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>
|
