Structura generala a unui document HTML
Întreaga dezvoltare a HTML s-a facut în ideea cresterii ulterioare a limbajului fara sacrificarea simplitatii. Exista putine reguli generale de care trebuie sa se tina cont în construirea unui document HTML.
Documentele HTML (4.0) au stru 747f58h ctura generala:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 //EN"
"https://www.w3.org/TR/REC-html40/strict.dtd">
<HTML>
< HEAD>
<TITLE>Titlul documentului</TITLE>
... alte declaratii/informatii despre document...
</HEAD>
<BODY>
...Textul documentului propriu-zis...
</ BODY>
</HTML>
Nota importanta:
Daca se foloseste un document multiplu definit cu FRAMESET, atunci elementul FRAMESET înlocuieste elementul BODY.
Un document HTML (uneori referit si ca pagina HTML) este structurat în trei parti:
1. Începutul unui document HTML este o declaratie (<!DOCTYPE... >) care specifica versiunea limbajului HTML caruia i se conformeaza acesta. Restul documentului este continut în cadrul elementului de limbaj (tagului) <HTML>
2. O sectiune declarativa numita antet (head) definita cu tagul <HEAD>. Aceasta contine informatii (declaratii) despre document (cum ar fi titlul si cuvinte cheie asociate cu documentul)
3. O sectiune numita continut (body) definita cu tagul <BODY> sau <FRAMESET> si care înseamna de fapt (hyper)textul documentului. Acesta este alcatuit din elemente de tip bloc si elemente de tip inline.
Un document valid HTML trebuie sa declare ce versiune utilizeaza pentru descrierea sa. Declaratia tipului documentului (document type declaration) defineste ce DTD se foloseste în documentul respectiv.
De exemplu, HTML 4.0 poate specific 3 DTD, astfel ca un autor trebuie sa includa una dintre urmatoarele declaratii ale tipului de document:
HTML 4.0 Strict DTD include toate elementele si atributele ce nu sînt "obsolete" (inutile, depasite) sau nu apar în documente definite cu FRAMESET. Pentru astfel de documente se foloseste urmatoarea declaratie de tip:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"
"https://www.w3.org/TR/REC-html40/strict.dtd">
HTML 4.0 Transitional DTD include tot ceea ce este în declaratia anterioara la care se adauga elementele si atributele depasite (vechi, redefinite, dar nu eronate!). Pentru astfel de documente se foloseste urmatoarea declaratie de tip:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"
"https://www.w3.org/TR/REC-html40/loose.dtd">
HTML 4.0 Frameset DTD include tot ceea ce este în declaratia anterioara la care se adauga documentele multiple (create frame-uri). Pentru astfel de documente se foloseste urmatoarea declaratie de tip:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Frameset//EN"
"https://www.w3.org/TR/REC-html40/frameset.dtd">
Adresele ce apar în fiecare declaratie permit agentilor utilizatori sa acceseze (si sa descarce) DTD-ul documentului (descrierea formala) si orice set de caractere de care are nevoie. Urmatoarele adrese se folosesc pentru accesarea descrierilor (DTD-urilor) si seturilor de caractere utilizate de HTML 4.0.
https://www.w3.org/TR/REC-html40/strict.dtd DTD strict (implicit)
https://www.w3.org/TR/REC-html40/loose.dtd DTD Transitional
https://www.w3.org/TR/REC-html40/frameset.dtd DTD pentru documente cu frameset
https://www.w3.org/TR/REC-html40/HTMLlat1.ent setul de caractere Latin-1
https://www.w3.org/TR/REC-html40/HTMLsymbol.ent setul de caractere Symbol
https://www.w3.org/TR/REC-html40/HTMLspecial.ent setul de caractere Special
Sintaxa:
<HTML>...</HTML>
Atribute posibile:
VERSION = xxx
atribute de internationalizare: LANG, DIR
Contine:
In HTML 4.0 Strict si Transitional: HEAD urmat de BODY
In HTML 4.0 Frameset: HEAD urmat de FRAMESET
Continut în:
Nu se aplica, este element de nivel 0
Descriere:
Acest element contine de fapt documentul (pagina) HTML si este alcatuit din HEAD urmat de BODY (sau FRAMESET). Atît tagul de început cît si cel de sfîrsit ale elementului sînt optionale.
Atributele LANG si DIR se folosesc cu HTML pentru a specifica limba (de baza) în care este creat documentul (si "directia" în care se citeste textul). Se foloseste în special cu tehnica style-sheet-urilor pentru a crea un document cu text în mai multe limbi.
Atributul VERSION specifica DTD-ul din document (versiunea de HTML) si nu mai trebuie folosit întrucît este redundant cînd se foloseste DOCTYPE.
Sintaxa:
<HEAD>...</HEAD>
Atribute posibile:
PROFILE = uri (dictionar de meta informatii)
atribute de internationalizare: LANG, DIR
Contine:
TITLE (exact un element
BASE optional
ISINDEX optional
SCRIPT zero sau mai multe elemente
STYLE zero sau mai multe elemente
LINK zero sau mai multe elemente
OBJECT zero sau mai multe elemente
Continut în:
Elementul HTML
Descriere:
Acest element contine informatii despre document (cum ar fi titlul sau, cuvinte cheie utilizabile de motoarele de cautare, descrierea documentului si style-sheet-uri asociate/utilizate. HEAD este solicitat în toate documentele, dar tagurile sale de început/sfîrsit sînt optionale. Daca tagul de sfîrsit lipseste primul element BODY sau FRAMESET determina sfîrsitul lui. Este urmat de BODY în documentele Strict si Transitional si de FRAMESET în cele Frameset.
Atributul optional PROFILE ofera locatia în care se afla un profil de metadate. Un profil este un fisier ce defineste proprietatile ce pot fi utilizate de elementele META si LINK din header, neavînd un format standard stabilit.
Continutul acestui element (cu exceptia lui TITLE care este afisat de browsere) nu este prelucrat în mod uzual.
Sintaxa:
<BODY>...</BODY>
Atribute posibile:
BACKGROUND = URI (imaginea de background a documentului)
BGCOLOR = Color (culoarea de background a documentului)
TEXT = Color (culoarea textului documentului)
LINK = Color (culoarea link-urilor documentului)
VLINK = Color (culoarea link-urilor deja vizitate ale documentului)
ALINK = Color (culoarea link-urilor active ale documentului)
ONLOAD = Script (documentul a fost încarcat de browser/agentul utilizator)
ONUNLOAD = Script (documentul a fost parasit de browser/agentul utilizator)
atribute comune (vezi nota de mai jos)
Contine:
În HTML 4.0 Strict:
elemente de tip bloc (nivel bloc), unul sau mai multe
SCRIPT,
INS,
În HTML 4.0 Transitional:
elemente de tip bloc (nivel bloc)
elemente de tip inline
INS,
Continut în:
In HTML 4.0 Strict or Transitional: HTML
In HTML 4.0 Frameset: NOFRAMES
Descriere:
Acest element contine de fapt corpul (continutul) documentului (paginii) HTML. BODY este cerut de documentele în care nu apar frame-uri, dar tagurile de început/sfîrsit sînt optionale. În documentele ce contin frame-uri, BODY trebuie obligatoriu continut în elementul NOFRAMES, daca este utilizat.
Continutul documentului apare în cadrul elementelor de tip bloc sau în corpul elementului SCRIPT, iar în cazul documentelor HTML 4.0 de tip Transitional sînt permise si elemente de tip inline direct în cadrul elementului BODY.
BODY poate avea atribute care specifica background-ul (fundalul) si culoarea documentului sau a unor elemente din cadrul sau. Aceasta metoda este însa considerata depasita, preferîndu-se utilizarea stilurilor de documente (style-sheet). Daca unul dintre atributele ce se refera la link-uri este setat, atunci se recomanda folosirea tuturor pentru a se asigura ca difera culorile diverselor tipuri de legaturi. Aceste culori pot fi însa suprapuse de setarile din browsere.
Atributul BACKGROUND sugereaza o imagine de fundal care va fi folosita pentru document (prin extindere pe verticala si/sau orizontala). Daca acest atribut este setat se recomanda utilizarea si a atributelor BGCOLOR, TEXT, LINK, VLINK si ALINK pentru a fi siguri ca documentul poate fi citit. BGCOLOR se foloseste pentru fundalul imaginilor neîncarcate.
Style-sheet-urile (stilurile de documente) permit o mai mare flexibilitate în specificarea imaginii de background, chiar a pozitiei si modalitatii de extindere pe întreaga suprafata ocupata de document, sau daca imaginea sa se deplaseze (scroll) sau nu cu documentul, etc...
În plus fata de evenimentele ce pot fi generate de orice element, BODY accepta urmatoarele atribute de tip eveniment utilizate în tehnologia client-scripting:
ONLOAD, apare atunci cînd documentul a fost încarcat;
ONUNLOAD, apare atunci cînd documentul este parasit.
Atributele comune ce pot apare în acest element sînt comune mai multor elemente si sînt împartite în:
atribute fundamentale (core): ID, CLASS, STYLE, TYTLE
atribute de internationalizare: LANG, DIR
evenimente scriptabile (ce pot fi tratate cu ajutorul scripturilor): ONCLICK, ONDBLCLICK, ONMOUSEDOWN, ONMOUSEUP, ONMOUSEOVER, ONMOUSEMOVE, ONMOUSEOUT, ONKEYPRESS, ONKEYDOWN, ONKEYUP.
Elementele de tip bloc si cele de tip inline sînt definite mai departe.
Exemple:
O varianta de pagina HTML care contine ca si "body" (continut) textul: "The scariest jungle: Follow the map to see lions and tigers and bears. Oh, my!" arata astfel:
<HTML>
<HEAD>
<TITLE>My Jungle Home Page</TITLE>
</HEAD>
<BODY>
The scariest jungle: Follow the map to see lions and tigers and bears.
Oh, my!
</BODY>
</HTML>
Iar ceea ce se va vedea cu un browser (aici Internet Explorer) este prezentat în figura urmatoare:
O varianta "depasita" (fara a fi eronata, dar nerecomandata ca stil) de pagina HTML care ilustreaza utilizarea atributelor depasite este prezentata în continuare. Culoarea de background se stabileste ca fiind alba, textul negru, iar legaturile initial rosii, active ca fiind de culoare fuchsia, iar cele deja vizitate maron.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"
"https://www.w3.org/TR/REC-html40/loose.dtd">
<HTML>
<HEAD>
<TITLE>Exemplu depasit</TITLE>
</HEAD>
<BODY bgcolor="white" text="black"
link="red" alink="fuchsia" vlink="maroon">
... document body...
</BODY>
</HTML>
2. Prin folosirea style-sheet-urilor (stilurilor), acelasi efect se poate obtine si astfel:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"
"https://www.w3.org/TR/REC-html40/strict.dtd">
<HTML>
<HEAD>
<TITLE>Un exmplu cu stiluri incluse</TITLE>
<STYLE type="text/css">
BODY
A:link
A:visited
A:active
</STYLE>
</HEAD>
<BODY>
... document body...
</BODY>
</HTML>
3. Cea mai flexibila solutie este data de posibilitatea de a specifica un stil definit într-un alt fisier (stiluri externe). Orice modificare de stil se face fara a accesa documentul HTML.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"
"https://www.w3.org/TR/REC-html40/strict.dtd">
<HTML>
<HEAD>
<TITLE>A study of population dynamics</TITLE>
<LINK rel="stylesheet" type="text/css" href="smartstyle.css">
</HEAD>
<BODY>
... document body...
</BODY>
</HTML>
Sintaxa:
<FRAMESET>...</FRAMESET>
Atribute posibile:
ROWS = MultiLengths (lungimile rîndurilor)
COLS = MultiLengths (lungimile coloanelor)
ONLOAD = Script (toate frame-urile au fost încarcate)
ONUNLOAD = Script (toate frame-urile au fost eliminate/parasite)
atribute comune
Contine:
FRAMESET (unul sau mai multe elemente)
FRAME (unul sau mai multe elemente)
NOFRAMES (un singur element, optional)
Continut în:
HTML
Descriere:
Elementul FRAMESET este un container de frame-uri folosit pentru a diviza fereastra în subspatii dreptunghiulare numite frame-uri. Într-un document ce contine frame-uri, elementul FRAMESET exterior ia locul lui BODY si urmeaza imediat lui HEAD. Elementul FRAMESET contine unul sau mai multe elemente FRAMESET sau FRAME, împreuna cu elementul optional NOFRAMES pentru a oferi un continut alternativ browser-elor care nu suporta frame-urile (sau le au dezactivate). Se recomanda însa sa existe întotdeauna si sa ofere informatie utila pentru astfel de cazuri (cel putin, de exemplu, o legatura catre frame-ul principal).
Atributele ROWS si COLS definesc dimensiunile exacte ale fiecarui frame din set. Fiecare atribut are formatul unei liste de lungimi (cu elemente separate de virgula) care specifica în pixeli, ca procent sau ca lungime relativa dimensiunea (lungimea sau latimea) fiecarui frame. O dimensiune relativa se exprima ca i*, unde i este un întreg. Daca lipseste întregul se considera egal cu 1. De exemplu, un set de frame-uri definit cu ROWS="3*,*" va avea primul rînd cu o înaltime de 3 ori mai mare decît al doilea rînd.
Valorile specificate pentru ROWS dau înaltimea fiecarui rînd, din partea de sus a ecranului înspre baza acestuia. Atributul COLS defineste latimea fiecarei coloane, începînd de la stînga la dreapta.. Daca ROWS sau COLS lipsesc, valoarea implicita a atributului este 100%. Daca ambele atribute sînt specificate, ecranul se "împarte" dpdv logic într-o matrice care se "umple" mai întîi de la stînga la dreapta si apoi de sus în jos.
Cînd se utilzeaza dimensiuni în pixeli, acestea trebuie combinate întotdeauna cu lungimi relative pentru a acoperi diferitele dimensiuni ale ferestrelor (determinate de diferitele rezolutii la care se utilizeaza ecranele). Dimensiunile în pixeli trebuie folosite doar cînd frame-urile contin în principal imagini sau alte obiecte cu o dimensiune fixa (în pixeli). Preferata este însa exprimarea în procente si dimensiuni relative, datorita capacitatii acesteia de adaptare la diferitele dimensiuni de ferestre.
Elementul FRAMESET accepta atributele ONLOAD si ONUNLOAD pentru a specifica actiuni de tip client-side (executate în agentul utilizator) cînd toate frame-urile au fost încarcate sau descarcate (eliminate din browser).
Exemple:
Exemplul urmator determina împartirea ecranului în 2 rînduri si 3 coloane.
<FRAMESET ROWS="70%,30%" COLS="33%,33%,34%">
<FRAME NAME="Photo1" SRC="Row1_Column1.html">
<FRAME NAME="Photo2" SRC="Row1_Column2.html">
<FRAME NAME="Photo3" SRC="Row1_Column3.html">
<FRAME NAME="Caption1" SRC="Row2_Column1.html">
<FRAME NAME="Caption2" SRC="Row2_Column2.html">
<FRAME NAME="Caption3" SRC="Row2_Column3.html">
<NOFRAMES>
<BODY>
<H1>Table of Contents</H1>
<UL>
<LI>
<A HREF="Row1_Column1.html">Photo 1</A>
(<A HREF="Row2_Column1.html">Caption</A>)
</LI>
<LI>
<A HREF="Row1_Column2.html">Photo 2</A>
(<A HREF="Row2_Column2.html">Caption</A>)
</LI>
<LI>
<A HREF="Row1_Column3.html">Photo 3</A>
(<A HREF="Row2_Column3.html">Caption</A>)
</LI>
</UL>
</BODY>
</NOFRAMES>
</FRAMESET>
Se remarca utilizarea elementui NOFRAMES pentru cazul în care frame-urile nu pot fi afisate. Efectul se doreste a fi "asemanator" cu cel determinat de frame-uri (o matrice de dreptunghiuri cu 2 rînduri si 3 coloane).
2. Exemplul urmator foloseste elemente FRAMESET îmbricate pentru a defini 2 frame-uri în primul rînd si un frame în al doilea rînd.
<FRAMESET ROWS="*,100">
<FRAMESET COLS="40%,*">
<FRAME NAME="Menu" SRC="nav.html" TITLE="Menu">
<FRAME NAME="Content" SRC="main.html" TITLE="Content">
</FRAMESET>
<FRAME NAME="Ad" SRC="ad.html" TITLE="Advertisement">
<NOFRAMES>
<BODY>
<H1>Table of Contents</H1>
<UL>
<LI><A HREF="reference/html40/">HTML 4.0 Reference</A></LI>
<LI><A HREF="reference/wilbur/">HTML 3.2 Reference</A></LI>
<LI><A HREF="reference/css/">CSS Guide</A></LI>
</UL>
<P>
<IMG SRC="ad.gif" ALT="Advertising">
</P>
</BODY>
</NOFRAMES>
</FRAMESET>
|
