documente html

download documente html

of 27

  • date post

    04-Apr-2018
  • Category

    Documents

  • view

    219
  • download

    0

Embed Size (px)

Transcript of documente html

  • 7/29/2019 documente html

    1/27

    Lecia 1: Structura unui document HTML. Notiuni de baza.

    1.1 Ce este HTML?

    HTML (HyperText Markup Language) a fost dezvoltat initial de Tim Berners-Lee in anul 1989, ca urmare a necesitatii de

    publicare a informatiilor la nivel global. Pe parcursul anilor, limbajul a evoluat (HTML 3.0, HTML 3.2, HTML 4 si cel mai recenHTML 4.01), fiecare versiune oferind noi facilitati.

    Se remarca cateva trasaturi cum ar fi:

    independenta de platforma (modul de afisare al unui document este acelasi, indiferent de computerul pe care serealizeaza afisarea);

    structurarea formatarii;

    posibilitatile hypertext (orice cuvant, imagine sau alt element al documentului vizualizat de utilizator poate facereferinta la un alt document, ceea ce usureaza navigarea in cadrul aceluiasi document sau intre documente diferite)

    HTML este un limbaj simplu, compus din coduri speciale (marcaje) care se insereaza intr-un text pentru a adauga informatdespre formatare. Este derivat din SGML (Standard Generalized Markup Language), un sistem pentru definirea tipurilor dedocumente structurate, destinat sa reprezinte instante ale acestor tipuri de documente. La baza SGML si a HTML se aflaacelasi principiu: descrierea continutului unui document se face intr-un fisier text obisnuit (ASCII). S-a urmarit ca aceste

    fisiere sa fie editabile cu aplicatii software nepretentioase (ex. NotePad, WordPad).

    In cadrul unui document HTML, un marcaj (tag, in limba engleza) va avea forma . Parantezele unghiularesunt elementele care indica prezenta unui marcaj; numele marcajelor poate fi scris oricum, limbajul nefiind senzitiv la literelmari/mici (case sensitive). Unele marcaje permit utilizarea unor atribute care se vor scrie in marcajul de inceput:

    ................

    DR: Exista doua tipuri de marcaje:

    - individuale (ex.
    )- perechi (ex.

    ...

    ) - de mentionat ca sfarsitul unui marcaj este indicat prin utilizarea caracterului '/' in fata numeluide marcaj

    In functie de modul de formatare a paginii, avem marcaje de tip:

    - block: este afisat sub elementul anterior (ex.

    )- inline: este afisat dupa elementul anterior (ex. )- table: este afisat sub forma unui tabel

    Marcajele perechi pot fi imbricate:

    ................

    Browserele vor ignora marcajele si optiunile pe care nu le recunosc.

    1.2 Structura unui document HTML

    Un document HTML 4 are urmatoare structura:

    1. o linie continand versiunea HTML2. sectiunea HEAD, delimitata de marcajele 3. sectiunea BODY, delimitata de marcajele sau

    DR:

  • 7/29/2019 documente html

    2/27

    Prima mea pagina web

    ...........

    Un document HTML valid contine declaratia versiunii HTML utilizate. Declaratia se face prin intermediul DTD (document typedefinition). Pe scurt, fisierul DTD contine definitiile marcajelor din versiunea respectiva de HTML.HTML 4.01 specifica 3 variante DTD :

    HTML 4.01 Strict DTD include toate elementele si atributele care nu sunt "invechite" (elemente si atribute a carorutilizare nu este recomandata deoarece se doreste renuntarea la acestea pe viitor) sau care nu apar in documentelece contin cadre.

    HTML 4.01 Transitional DTD include Strict DTD plus elementele si atributele "invechite".

    HTML 4.01 Frameset DTD include Transitional DTD plus cadrele (frames).

    HTML 4.01 Strict DTD

    HTML 4.01 Transitional DTD

    HTML 4.01 Frameset DTD

    1.2.1 Sectiunea HEADCuprinde informatii care nu vor fi afisate in browser, cu exceptia marcajului .Marcajul este obligatoriu si poate apare doar in sectiunea HEAD. El va contine un titlu relevant pentru pagina, fiinddeosebit de important pentru motoarele de cautare.

    Alte marcaje care apar in sectiune HEAD:

    - poate contine cuvinte cheie, o descriere a paginii, numele autorului paginii, frecventa (teoretica) cu caremotoarele de cautare ar trebui sa reindexeze pagina, etc. Declaratiile META implica in general declararea uneiproprietati si a valorii asociate acelei proprietati.

    Declararea setului de caractere se face astfel:

    DR: Precizarea setului de caractere face posibila afisarea in browserul utilizatorului a caracterelor specifice unor limbi precumromana, rusa, araba, etc

    - cascading style sheets - stiluri pentru formatarea textului din documentul HTML.

    ...

    - scripturi JavaScript sau VBScript

    - stabileste URL-ul de "baza" al documentului. Toate referintele (, respectiv ) din documentul respectiv vor fi deschise relativ la marcajul .

  • 7/29/2019 documente html

    3/27

    - stabileste o legatura cu un document extern, spre exemplu un fisier de definitii CSS.

    EX: Sectiunea HEAD a unui document HTML poate arata in felul urmator:

    Titlul paginii mele

    1.2.2 Sectiunea BODY

    Este inclusa intre marcajele ......

    ................continut document.................

    Marcajul de sfarsit () nu este obligatoriu

    In sectiunea BODY se gaseste informatia care va fi afisata in browser (text, imagini, etc.) (.... ).

    DR: LEFTMARGIN si TOPMARGIN sunt extensii Microsoft (nu functioneaza decat in Internet Explorer 3+).

    LEFTMARGIN precizeaza, n pixeli, marginea stanga a documentului (distanta dintre fereastra si continutuldocumentului);

    TOPMARGIN precizeaza, in pixeli, marginea de sus a documentului (distanta dintre fereastra si continutul documentului)

    Ca in orice limbaj de programare in HTML exista posibilitatea de a introduce comentarii, folosind marcajul

    EX:

    Titlul paginii mele

    text text text text text text text text text text

    alt text alt text alt text alt text alt text

  • 7/29/2019 documente html

    4/27

    In exemplul de mai sus a aparut un nou marcaj

    (paragraf). Alaturi de el trebuie mentionate marcajele , ,, , , (headings - toate necesita marcaj de inchidere) care sunt folosite in general pentru evidentieretitlurilor. (exemplu)

    Pentru formatarea textului pot fi folosite si marcajele:

    ... - caractere ingrosate

    ... - caractere inclinate

    ... - caractere subliniate

    ... - caractere "taiate"

    ... - marcajul de informatie preformatata

    conserva toata caracterele si spatierile de linii

    utilizeaza un font diferit (Courier)

    ... - exponent

    ... - indice


    - "rupe" textul, trecand pe o linie noua - poate apare oriunde in text

    - traseaza o linie subtire orizontala

    Acestexemplu evidentieaza efectele marcajelor mentionate mai sus.

    Marcajul ... ofera posibilitatea modificarii dimensiunii, culorii si a tipului de font utilizat (exemplu)

    Ultimele 2 marcaje asupra carora ne vom opri in aceasta lectie sunt marcajele si (ambele necesita marcaj deinchidere):.

    este un marcaj de tip "inline". Se foloseste in general in interiorul marcajelor de tip "block" (ex.

    ) incombinatie cu stilurile CSS, pentru a impune o formatare diferita de restul continutului din marcajul "block" respect(exemplu).

    spre deosebire de , marcajul este de tip "block". Se foloseste in general pentru pozitionare in cadrudocumentului si pentru specificarea unor proprietati CSS care sa fie aplicate textului din interiorul lui (exemplu).

    .................................

    EX:

    1. Conform specificatiilor HTML 4.01, este recomandata folosirea marcajului pentru centrarea textului, in locul

    marcajului exemplu.

    2. poate fi folosit ca un container pentru alte elemente de tip "block".Exemplu: se pot include 2 sau mai multe paragrafe intr-un marcaj , insa pentru a se evita formatareaexplicita pe fiecare paragraf in parte (ex. fontul), se va defini stilul de formatare pentru marcajul , stil care vfi preluat de paragrafele mentionate.

    3. Vizualizeaza sursele exemplelor si comenteaza-le in seminarul online

    EXERCITII: Realizeaza o pagina HTML (folosind NotePad) care sa includa toate marcajele prezentate in aceasta lectie.Valideaza pagina la adresa http://validator.w3.org/

    http://www.academiaonline.ro/cursuri/13/headings.htmlhttp://www.academiaonline.ro/cursuri/13/formatare.htmlhttp://www.academiaonline.ro/cursuri/13/formatare.htmlhttp://www.academiaonline.ro/cursuri/13/font.htmlhttp://www.academiaonline.ro/cursuri/13/span.htmlhttp://www.academiaonline.ro/cursuri/13/div-attribCss.htmlhttp://www.academiaonline.ro/cursuri/13/div-align.htmlhttp://www.academiaonline.ro/cursuri/13/div-align.htmlhttp://validator.w3.org/http://www.academiaonline.ro/cursuri/13/headings.htmlhttp://www.academiaonline.ro/cursuri/13/formatare.htmlhttp://www.academiaonline.ro/cursuri/13/font.htmlhttp://www.academiaonline.ro/cursuri/13/span.htmlhttp://www.academiaonline.ro/cursuri/13/div-attribCss.htmlhttp://www.academiaonline.ro/cursuri/13/div-align.htmlhttp://validator.w3.org/
  • 7/29/2019 documente html

    5/27

    Lecia 2: Liste si referinte

    2.1 Liste

    HTML ofera mai multe mecanisme pentru specificarea listelor de informatii. Exista 3 tipuri de liste, fiecare tip trebuie saincluda cel putin un element:

    1. liste de tip definitie2. liste ordonate (numerotate)3. liste neordonate (marcate)

    2.1.1 Liste de tip definitieUnul dintre cele mai obisnuite elemente in paginile HTML este un set de definitii, referinte sau indexuri. Un exemplu concret reprezinta glosarele; cuvintele sunt listate alfabetic, insotite de definitiile termenilor respectivi.

    Lista de tip definitie este introdusa de marcajele:

    ... - lista definitii (definition list)

    - termenul definit (definition term)

    - definitie (definition)

    EX:

    Lista de tip definitie

    Applet JavaAplicatie Java inclusa intr-un document HTMLCookieMecanism de comunicare intre client si serverDomeniuNume unic prin care se identifica un site pe Internet

    Poti vizual