|
|
|
Prezentarea limbajului HTML
1. Istoric al Limbajului HTML
Unul din primele elemente fundamentale ale WWW ( World Wide Web) este HTML(Hypertext Markup Language), care descrie formatul primar in care documentele sunt distribuite și vazute pe Web. Multe din trasaturile lui, cum ar fi independența fața de platforma,structurarea formatarii și legaturile hypertext,fac din ele un foarte bun format pentru documentele Internet și Web.
Primele specificații de baza ale Web-ului au fost HTML, HTTP și URL.
HTML a fost dezvoltat inițial de Tim Berners-Lee la CERN in 1989. HTML a fost vazut ca o posibilitate pentru fizicienii care utilizeaza computere diferite și schimba intre ei informații utilizand Internet-ul. Erau prin urmare necesare cateva trasaturi : independența de platforma, posibilitați hypertext și structurarea documentelor. Independența de platforma inseamna ca un document poate fi afișat in mod asemanator de computere diferite (deci cu fonte, grafica și culori diferite), lucru vital pentru o audiența atat de variata.
Hipertext inseamna ca orice cuvant, fraza, imagine sau alt element al documentului vazut de un utilizator (client) poate face referința la un alt document, ceea ce ușureaza mult navigarea intre multiple documente sau chiar in interiorul aceluiași document.Structurarea riguroasa a documentelor permite convertirea acestora dintr-un format in altul, precum și interogarea unor baze de date formate din aceste documente.
Tim Berners-Lee a utilizat ca model SGML (Standard Generalized Markup Language), un standard internațional in plina dezvoltare. SGML avea avantajul unei structurari avansate și al independenței de platforma dar proiectarea lui a avut in vedere mai mult structura semantica a documentului decat modul de formatare. Flexibil, SGML putea fi descris ca o specificare pentru descrierea altor formate. Utilizatorii puteau creea noi formate (DTD, Document Type Definitions) care puteau fi ințelese de orice produs soft SGML pur și simplu prin citirea mai intai a definițiilor noilor formate.
HTML este pur și simplu un DTD, deci o aplicație a SGML. In primii ani de evoluție HTML a crescut lent, in principal pentru ca ii lipseau posibilitațile de a descrie publicații electronice profesionale; limbajul permitea oarece control asupra fontelor dar nu permitea inserarea graficii. In 1933, NCSA a imbogațit limbajul pentru a permite inserarea graficii și au construit primul navigator grafic, Mosaic. Au urmat apoi contribuții ad hoc ale diverselor firme care au adus adaugari limbajului HTML (adaugari și nu imbogațiri pentru ca unele tag-uri nu erau in conformitate cu principiile generale ale SGML) astfel incat, prin 1994 limbajul parea scapat de sub control.
Urmarea a fost ca la prima conferința WWW din Geneva (Elveția) s-a construit un grup (HTML Working Group) a carui prima misiune a fost formalizarea HTML intr-un DTD al SGML, lucru care s-a concretizat in HTML Level 2 ( sau HTML 2.0, Nivelul 1, deci HTML 1.0, a fost proiectat de Tim Berners-Lee ). Importanța acțiunii acestui grup consta in faptul ca, odata standardizat, limbajul poate fi apoi extins intr-un mod mai controlat la alte nivele.
Standardul official HTML este World Wide Web Consortium (W3C), care este afiliat la Internet Engineering Task Force (IETF). W3C a enunțat cateva versiuni ale specificației HTML, printre care și HTML 2.0, HTML 3.0, HTML 3.2, HTML 4.0 și cel mai recent, HTML 4.01. In același timp, autorii de browsere, cum ar fi Netscape și Microsoft, au dezvoltat adesea propriile "extensii" HTML in afara procesului standard și le-au incorporat in browser-ele lor. In unele cazuri, cum ar fi tag-ul Netscape, aceste extensii au devenit standarde adoptate de autorii de browsere.
HTML 2.0, elaborate in iunie 1994, este standardul pe care ar trebui sa-l suporte toate browser-ele curente - inclusiv cele mod text. HTML 2.0 reflecta concepția originala a HTML ca un limbaj de marcare independent de obiectele existente pentru așezarea lor in pagina, in loc de a specifica exact cum ar trebui sa arate acestea.
Specificația HTML 3.0, enunțata in 1995, a incercat sa dezvolte HTML 2.0 prin adaugarea unor facilitați precum tabelele și un mai mare control asupra textului din jurul imaginilor. Deși unele din noutațile HTML 3.0 erau deja folosite de autorii de browsere, multe nu erau inca folosite. In unele cazuri, tag-uri asemanatoare implementate de autorii de browsere au devenit mai raspandite decat tag-urile "oficiale". Specificația HTML 3.0 acum a expirat,deci nu mai este un standard oficial.
In mai 1996, W3C a scos pe piața specificația HTML 3.2, care era proiectata sa reflecte și sa standardizeze practicile acceptate la scara larga. Deci, HTML 3.2 include tag-urile HTML 3.0 ce erau adoptate de autorii de browsere ca Netscape și Microsoft plus extensii HTML raspandite. In bilanțul asupra HTML, W3C recomanda ca providerii de informații sa utilizeze specificația HTML 3.2.
Versiunile curente ale majoritații browser-elor ar trebui sa suporte toate, sau aproape aceste tag-uri.
La momentul apariției acestui tutorial,HTML 4.0 este larg utilizat și au fost deja publicate specificațiile HTML 4.01.
Documentele HTML sunt documente in format ASCII și prin urmare pot fi create cu orice editor de texte. Au fost insa dezvoltate editoare specializate care permit editarea intr-un fel de WYSIWYG deși nu se poate vorbi de WYSIWYG atata vreme cat navigatoarele afișeaza același document oarecum diferit, in funcție de platforma pe care ruleaza. Evident conversiile nu pot pastra decat parțial formatarile anterioare deoarece limbajul HTML este inca incomplet.
2. Primii pași
Orice document HTML incepe cu notația <html> și se termina cu notația </html>. Acestea se numesc in literatura de specialitate "TAG-uri". Prin convenție, toate informațiile HTML incep cu o paranteza unghiulara deschisa "<" și se termina cu o paranteza unghiulara inchisa ">".
Tag-urile intre aceste paranteze transmit comenzi catre browser pentru a afișa pagina intr-un anumit mod. Unele blocuri prezinta delimitator de sfarșit de bloc, in timp ce pentru alte blocuri acest delimitator este opțional sau chiar interzis.
Intre cele doua marcaje <html> și </html> vom introduce doua secțiuni:
Blocul <body>.</body> cuprinde conținutul propriu-zis al paginii HTML, adica ceea ce va fi afișat in fereastra browser-ului.
O eticheta poate fi scrisa atat cu litere mici ,cat și cu litere mari.
Adica <HTML>=<HtmL>=<html>.Caracterele "spațiu" și "CR/LF" ce apar intre etichete sunt ignorate de catre browser.
Exemplu de prim document HTML:
<html>
<head>
</head>
<body>
</body>
</html>
Se obține inserand numele in secțiunea <head>.</head> .
Exemplu 1:
<html>
<head>
<title>Aceasta este prima mea pagina de Web</title>
</head>
<body>
Bine ați venit in pagina mea de Web!
</body>
</html>
Conținutul blocului <title>.</title> va aparea in bara de titlu a ferestrei browser-ului. Daca acest bloc lipsește intr-o pagina HTML, atunci in bara de titlu a ferestrei browser-ului va aparea numele fișierului.
Trecerea pe o linie noua se face la o comanda explicita, care trebuie sa apara in pagina html. Aceasta comanda este marcajul <br> ( de la "line break"- inrerupere de linie).
Exemplu 2:
<html>
<head>
<title>Limbajul HTML</title>
</head>
<body>
Bine ați venit in <br> pagina mea de Web!
</body>
</html>
Penru ca browser-ul sa interpreteze corect caracterele "spațiu", "tab" și "CR/LF" ce apar in cadrul unui text trebuie inclus intr-un bloc <pre>.</pre>.
Exemplu 3:
<html>
<head>
<title>Bloc preformatat</title>
</head>
<body><pre>
Prima linie
A doua linie
A treia linie
</pre></body>
</html>
O culoare pote fi precizata in doua moduri:
Culoarea unei pagini se precizeaza prin intermediul unui atribut al etichetei <body>.Culoarea fondului paginii Web se stabilește cu atributul " bgcolor " al etichetei <body>, de exemplu : <body bgcolor=culoare>.
Exemplu 4 :
<html>
<head>
<title>Culoare de fond</title>
</head>
<body bgcolor=gray>
O pagina Web cu fondul GRI!
</body>
</html>
Acest lucru se face prin intermediul atributului text al etichetei <body> dupa sintaxa <body text=culoare>.
Exemplu 5 :
<html>
<head>
<title>Culoarea textului</title>
</head>
<body text=red>
Un text de culoare roșie.
</body>
</html>
O eticheta poate avea mai multe atribute. De exemplu, o eticheta cu trei atribute arata astfel : <eticheta atribut1 = valoare1 atribut2 = valoare2 atribut3 = valoare3>.
Exemplu 6:
<html>
<head>
<title>Atribute multiple </title>
</head>
<body bgcolor=blue text=yellow>Fond de culoare albastra și text de culoare galbena.
</body>
</html>
Textul afișat este caracterizat de urmatoarele atribute: marime (size), culoare (color), font (style). Acestea sunt atribute ale etichetei <basefont>.
Este o eticheta singulara(fara delimitator de sfarșit de bloc) : <basefont size = numar color = culoare style = font> , unde :
Numar - poate fi 1, 2, 3, 4, 5, 6 sau 7; ( 1 pentru fontul cel mai mic și 7 pentru cel mai mare ) ;
culoare - este o culoare precizata prin nume sau printr-o construcție RGB;
font - poate fi un font generic ca "serif", "san serif", "cursive", "monospace", "fantasy" sau un font specific instalat pe calculatorul clientului, ca "Times New Roman" sau "Arial". Se accepta ca valoare și o lista de fonturi separate prin virgule, de exemplu : "Times New Roman, serif, monospace".
Poziționarea conținutului paginii Web fața de marginile ferestrei browserului se poate face cu ajutorul a doua atribute ale etichetei <body>:
leftmargin ( stabilește distanța dintre marginea stanga a ferestrei browser-ului și marginea stanga a conținutului paginii );
topmargin ( stabilește distanța dintre marginea de sus a ferestrei browser-ului și marginea de sus a conținutului paginii ).
Exemplu 7:
<html>
<head>
<title>Configurarea textului și stabilirea marginii</title>
</head>
<body leftmargin=100; topmargin=50>
Textul are atribute implicite. <br><basefont style=Arial color=blue size=6>
Textul este scris cu fontul "Arial",culoare albastra și marimea 6.</body>
<html>
Pentru ca un bloc de text sa apara in pagina evidențiat (cu caractere aldine), trebuie inclus intre delimitatorii <b>.</b> (b vine de la "bold" = indrazneț).
Pentru ca un text sa fie scris cu caractere mai mari cu o unitate decat cele curente acesta trebuie inclus intr-un bloc delimitat de etichetele <big>.</big>.
Pentru ca un text sa fie scris cu caractere mai mici cu o unitate decat cele curente acesta trebuie inclus intr-un bloc delimitat de etichetele <small>.</small>.
Pentru ca un text sa fie scris cu caractere cursive acesta trebuie inclus intr-un bloc delimitat de etichetele <i>.</i> ( i vine de la "italic" ).
Pentru a insera secvențe de text aliniate ca indice (sub-script) sau ca exponent (super-script), aceste fragmente trebuie delimitate de etichetele <sub>.</sub>, respective <sup>.</sup>.
Pentru a insera un bloc de caractere subliniate se utilizeaza etichetele <u>.</u> ( u vine de la "underline").
Pentru a insera un bloc de caractere subliniate se utilizeaza etichetele <strike>.</strike> sau <s>.</s>.
Exemplu 8:
<html>
<head>
<title>Stiluri pentru blocuri de text</title>
</head>
<body>
<b>Text scris cu caractere ingroșate.</b>
<br>
<big>Text cu caractere marite cu o unitate <big>mai mare<big> și mai mare<big> și mai mare.</big></big></big></big>
<br>
<small>Textul este scris cu caractere micșorate cu o unitate <small>mai mic. </small></small>
<br>
<i>Text scris cu caractere italice</i>
<br>
In aceasta linie <sup>sus</sup> este superscript iar <sub>jos</sub> este subscript.<br>
<strike>Aceasta linie este in intregime secționata de o linie orizontala.</strike>
<br>
In aceasta linie urmatorul cuvant este <u>subliniat</u>, iar cuvantul <s>strike</s> secționat.
</body>
</html>
Aceste stiluri țin cont de semnificația pe care o are blocul in cadrul imaginii Web.Pentru a pune in evidența (prin stilul cursiv) fragmente de text se utilizeaza etichetele :
In locul lor se poate utiliza eticheta echivalenta <i>.</i>. Urmatoarele etichete au efecte similare. Ele permit scrierea fragmentului de text cu caractere monospațiale (de tipul celor folosite de o mașina de scris ):
Aceasta eticheta funcționeaza numai in browser-ul Netscape Communicator.
3. Fonturi
Un font este caracterizat de urmatoarele atribute :
●culoare (stabilita prin atributul "color");
●tipul sau stilul (stabilit prin atributul "face");
●marimea (definita prin atributul "size");
●grosime (definita prin atributul "weight").
Toate aceste atribute aparțin etichetei, care permite inserarea de blocurile de texte personalizate.
O culoare poate fi precizata in doua moduri:
O astfel de constanta se formeaza astfel : #rrggbb, unde r, g și b sunt cifre hexazecimale.
Pentru a scrie un fragmented text cu caractere de o anumita culoare se incadreaza acest fragment intre delimitatorii . avand stabilit atributul "color" la valoarea necesara.
Pentru a scrie un text intr-o pagina pot fi folosite mai multe fonturi (stiluri de caractere). Exista cinci familii generice de fonturi care sunt de regula disponibile pe toate calculatoarele utilizatorilor : serif, sans serif, cursive, monospace și fantasy. Tipul de font necesar poate fi stabilit prin atributul "face" al etichetei. Pot fi introduse mai multe fonturi separate prin virgula. In acest caz browser-ul va utiliza primul font pe care il cunoaște.
Exemplu 9:
<html>
<head>
<title>Culoarea și familia fontului</title>
</head>
<body>
Aceasta linie este scrisa cu caractere normale.
<br>
<font color=red>Aceasta linie este roșie.</font>
<br>Aici <font color=green> fiecare</font>
<font color=blue>cuvant</font>
<font color=yellow>are</font>
<font color=cyan>alta</font>
<font color=#3478fa>culoare.</font>
<br>
<font face=monospace>Linie scrisa cu caractere monospațiate.</font>
<br>
<font face=Arial>Linie scrisa cu caractere arial.</font>
</body>
</html>
Pentru a stabili marimea unui font se utilizeaza atributul "size" al etichetei. Valorile acestui atribut pot fi :
Marimea unui font poate fi stabilita exact cu ajutorul atributului "point-size". Valorile acceptate de acest atribut pot fi orice numere naturale pozitive. Numarul astfel precizat reprezinta marimea fontului in puncte tipografice. Acest atribut funcționeaza numai cu Netscape Communicator.
Exemplu 10:
<html>
<head>
<title>Marimea fontului</title>
</head>
<body>
Aceasta linie este scrisa cu caractere normale.<br>
<font size=5>Fonturi de marime 5.</font><br>
<basefont size=4>Fonturi de marime 4.</font><br>
<font size=-3>Fonturi de marime 1.</font><br>
<font size=+2>Fonturi de marime 6.</font><br>
<font point-size=30>Fonturi de marime 30 pentru (numai cu Netscape Communicator).</font><br>
<font point-size=50>Fonturi de marime 50 pentru (numai cu Netscape Communicator).</font>
</body>
</html>
Grosimea unui caracter poate fi definita cu ajutorul atributului "weight" al etichetei. Valorile posibile pentru acest atribut sunt 100, 200, 300, 400, 500, 600, 700, 800, 900 (100 pentru fontul cel mai subțire și 900 pentru cel mai gros).
Exemplu 11:
<html>
<head>
<title>Grosimea fontului</title>
</head>
<body>
Aceasta linie este scrisa cu caractere normale.<br>
<font weight="100">Fonturi cu grosime 100.</font><br>
<font weight="500">Fonturi cu grosime 500.</font><br>
<font weight="900">Fonturi cu grosime 900.</font>
</body>
</html>
Aceste etichete nu se refera la particularitațile caracterelor ce compun textul, ci la funcțiile pe care le poate avea un bloc de text in cadrul paginii Web. Toate aceste etichete produc automat trecerea la un rand nou și adaugarea unui spațiu suplimentar.
Pentru ca un bloc de text sa fie indentat (marginea din stanga a textului sa fie deplasata la dreapta la o anumita distanța fața de marginea paginii), acesta trebuie inclus intre etichetele <blockquote>.</blockquote>.
Exemplu 14:
<html>
<head>
<title>Indentarea unui bloc</title>
</head>
<body>
Textul ce urmeaza sa fie indentat: <blockquote> Aceste etichete nu se refera la particularitațile caracterelor ce compun textul, ci la funcțiile pe care le poate avea un bloc de text in cadrul paginii Web. Toate aceste etichete produc automat trecerea la un rand nou și adaugarea unui spațiu suplimentar. </blockquote>
</body>
</html>
Intr-un bloc <pre>.</pre>, semnificația marcajelor HTML se pastreaza. Blocul <pre>.</pre> este indicat pentru a insera randuri vide (spațiu intre randurile succesive).
Exemplu 13:
<html>
<head>
<title>Bloc preformatat</title>
</head>
<body>
Orar: <pre>
Ora/Ziua LuniMarțiMiercuri
8:00 Romana Matematica Sport
9:00Geografie Istorie Fizica</pre>
</body>
</html>
Intr-un fișier HTML, caracterele "<" și ">" au o semnificație speciala pentru browser. Ele incadreaza comenzile și atributele de afișare a elementelor intr-o pagina. Daca dorim ca un fragment de text sa conțina astfel de caractere , acest fragment trebuie incadrat de una dintre perechile de etichete :
Aceste marcaje interpreteaza corect caracterele "spațiu", "eticheta" și "CR/LF".
Cu ajutorul etichetei paragraf <p> este posibil trecerea la o linie noua și permite :
Exemplu 14:
<html>
<head>
<title>Blocuri paragraf</title>
</head>
<body>
Prima linie
<p> Linie generata de un paragraf ( implicit paragraful este aliniat la stanga).
<p align=right> Paragraf aliniat la dreapta.
<p align=center> Paragraf aliniat in centru.
</body>
</html>
Intr-un text titlurile (headers) de capitole pot fi introduse cu ajutorul etichetelor <h1>, <2>, <h3>, <h4>, <h5>, <h6>. Toate aceste etichete se refera la un bloc de text și trebuie insoțite de o eticheta de incheiere similara. Aceste etichete accepta atributul "align" pentru alinierea titlului blocului de text la stanga (in mod prestabilit), in centru și la dreapta. Tag-ul <h1> permite scrierea unui titlu cu caractere mai mari și aldine, pe cand <h6> folosește caracterele cele mai mici.
Exemplu 15:
<html>
<head>
<title>Blocuri de titlu</title>
</head>
<body>
<h1 align=center>Titlu de marime 1 aliniat in centru </h1>
<h2 align=right>Titlu de marime 2 aliniat la dreapta. </h2>
<h4>Titlu de marime 4 aliniat la stanga (implicit) </h4>
</body>
</html>
Modalitatea cea mai eficienta de delimitare și de formatare a unui bloc de text este folosirea delimitatorilor <div>.</div>. Un parametru foarte util pentru stabilirea caracteristicilor unui bloc <div> (diviziune) este align (aliniere).
Valorile posibile ale acestui parametru sunt :
Un bloc <div>.</div> poate include alte subblocuri. In acest caz , alinierea precizata de atributul "align" al blocului are efect asupra tuturor subblocurilor incluse in blocul <div>.
Un bloc <div>.</div> admite atributul "nowrap" care interzice intreruperea randurilor de catre browser.
Exemplu 16:
<html>
<head>
<title>Blocul<div></title>
</head>
<body>
Aceasta linie este o linie normala. Urmatorul bloc este aliniat la dreapta.
<div align=right>
O singura linie. O singura linie.<br>
</div>
<div align=center>
Bloc aliniat pe centru.Bloc aliniat pe centru.<br>
</div>
</body>
</html>
Intr-o pagina Web pot fi inserate linii orizontale. Acest lucru se face cu ajutorul etichetei <hr>. Pentru a configura o linie orizontala se utilizeaza urmatoarele atribute ale etichetei <hr> :
Exemplu 17:
<html>
<head>
<title> Linii orizontale </title>
</head>
<body>
<H2 align=center> Tipuri de linii orizontale </H2> O linie implicita, aliniere stanga, lațime 100%, grosime 2 cu umbra.
<hr>
Urmeaza o linie aliniata in centru, de lațime 50% , grosime 5 pixeli, fara umbra.
<hr align=center, width=50%, size=5, noshade> Urmeaza o linie aliniata la dreapta , de lațime 150 de pixeli, grosime 12 pixeli și culoare roșie.
<hr align=right, width=150, size=12, color=red>
</body>
</html>
Imaginile sunt stocate in fișiere cu diverse formate. Formatele acceptate de browsere pentru fișierele imagine sunt :
Cele mai raspandite formate sunt GIF (8 biți pentru o culoare, 256 culori posibile) și JPEG (24 biți pentru o culoare, 16777216 de culori posibile).
Adresa URL a unei imagini URL ("Uniform Resourse Locator" = identificator unic al resursei) este un standard folosit in identificarea unica a unei resurse in Internet.
Pentru a insera o imagine intr-o pagina, se utilizeaza eticheta <img> (de la "image"=imagine). Pentru a putea identifica imaginea care va fi inserata, se utilizeaza un atribut al etichetei <img> și anume "src" (de la "source"= sursa).
Exemplu :
<img src="imagine1.jpg">
Daca doriți sa adaugați un chenar in jurul imaginii, folosiți atributul "border" al etichetei <img>. Valorile acestor atribute sunt numere intregi pozitive. O imagine are anumite dimensiuni pe orizontala și verticala, stabilite in momentul crearii ei. Daca nu se cere altfel, aceste dimensiuni sunt respectate in momentul afișarii ei in browser, in cadrul paginii Web. Dimensiunile prestabilite ale unei imagini pot fi modificate la afișarea in browser prin intermediul atributelor "width" și "height" setate de proiectant in codul HTML al paginii la valorile dorite.
Exemplu 18:
<html>
<head>
<title> Imagine cu chenar si marita </title>
</head>
<body>
O imagine cu chenar si de 350 pixeli X 25%
<img src=imagine1.jpgborder =5 width=350 height=25%>
Text dupa imagine.
</body>
</html>
5.2 Alinierea unei imagini
Alinierea unei imagini se poate face prin intermediul atributului "align" care poate lua urmatoarele valori :
Exemplu 19:
<html>
<head>
<title> Alinierea unei imagini </title>
</head>
<body>
Alinieri:
<br>
La mijloc: <img src=imagine3.jpg align= middle>
Jos: <img src=imagine3.jpg align=bottom>
</body>
</html>
Atributele "hspace" și "vspace" precizeaza distanța in pixeli pe orizontala, respectiv pe verticala, dintre imagine și restul elementelor din pagina. Atributul "alt" admite ca valoare un text care va fi afișat in locul imaginii, in funcție de setarile browser-ului utilizatorului.
Exemplu 20:
<html>
<head>
<title> Alinierea textului </title>
</head>
<body>
<h4> Imagine aliniata la stanga inconjurata de text la distanța de 30 de pixeli.
</h4><p> Text inainte de imagine. Text inainte de imagine. Text inainte de imagine. <img src=imagine3.jpg align=center id='30' vspace='30' alt='Universitatea din Pitesti'>
Text dupa imagine. Text dupa imagine. Text dupa imagine. Text dupa imagine. Text dupa imagine.
</body>
</html>
O imagine poate fi utilizata pe post de fundal al unei pagini Web. In acest scop se folosește atributul "background" al etichetei< body>, avand ca valoare adresa URL a imaginii. Imaginea se multiplica pe orizontala și verticala pana umple intregul ecran.
Exemplu 21:
<html>
<head>
<title>Pagina cu imagine de fond </title>
</head>
<body background=imagine1.jpg>
1<br>2<br>3<br>4<br>5<br>6<br>7<br>8<br>9<br>
</body>
</html>
O legatura (link) introduce in pagina Web o zona activa. Efectuand click cu butonul mouse-ului pe aceasta zona in browser se va incarca o alta pagina.
Pentru a utilize imaginea "img1.jpg" drept legatura catre pagina index.html utilizam sintaxa:
<a href="index.html"><img src="w3.gif"></a>
In mod prestabilit imaginea utilizata pe post de zona activa este inconjurata de un chenar avand culoarea unei legaturi. Daca stabilim pentru atributul "border" al etichetei <img> la 0, acest chenar dispare.
Exemplu 22:
<html>
<head> <title> Imagini folosite ca legaturi </title>
</head>
<body><h4> Imagini folosite ca legaturi<h4>Text inainte de imagine. <a href='http://www.yahoo.com ' ><img src=imagine2.jpg> </a>
Text dupa imagine.
</body>
</html>
6. Tabele
Tabelele ne permit sa cream o rețea dreptunghiulara de domenii, fiecare domeniu avand propriile opțiuni pentru culoarea fondului, culoarea textului, alinierea textului etc.
Pentru a insera un tabel se folosesc etichetele corespondente <table>.</table>. Un tabel este format din randuri. Pentru a insera un rand intr-un tabel se folosesc etichetele <tr>.</tr> (de la "table row"= rand de tabel).
Folosirea etichetei de sfarșit </tr> este opționala. Un rand este format din mai multe celule ce conțin date. O celula de date se introduce cu eticheta <td>.</td>.
Exemplu 23:
<html>
<head>
<title>Tabelu 1</title>
</head>
<body>
<h1 align=center>Un tabel simplu format din 4 linii și 2 coloane</h1><hr>
<table>
<tr>
<td>Romana</td>
<td>Matematica</td>
</tr>
<tr>
<td>Istorie</td>
<td>Informatica</td>
</tr>
<tr>
<td>Engleza</td>
<td>Franceza</td>
</tr>
<tr>
<td>Sociologie</td>
<td>Drept constitutional</td>
</tr>
</table>
</body>
</html>
In mod prestabilit, un tabel nu are chenar. Pentru a adauga un chenar unui tablel, se utilizeaza un atribut al etichetei <tabel> numit "border". Acest atribut poate primi ca valoare orice numar intreg (inclusiv 0) și reprezinta grosimea in pixeli a chenarului tabelului.
Daca atributul "border" nu este urmat de o valoare atunci tabelul va avea o grosime prestabilita egala cu 1 pixel, o valoare egala cu 0 a grosimii semnifica absența chenarului. Cand atributul "border" are o valoare nenula chenarul unui tabel are un aspect tridimensional.
Exemplu 24:
<html>
<head>
<title>Tabelu 2</title>
</head>
<body>
<h1 align=center>Un tabel simplu cu chenar</h1><hr>
<table border=4>
<tr>
<td>Matematica</td>
<td>Romana</td>
</tr>
<tr>
<td>Istorie</td>
<td>Informatica</td>
</tr>
<tr>
<td>Engleza</td>
<td>Franceza</td>
</tr>
<tr>
<td>Sociologie</td>
<td>Drept</td>
</tr>
</table>
</body>
</html>
Pentru a alinia un tabel intr-o pagina Web se utilizeaza atributul "align" al etichetei <table>, cu urmatoarele valori posibile : "left" (valoare prestabilita), "center" și "right".
Alinierea este importanta pentru textul ce inconjoara tabelul , astfel :
Exemplu 25:
<html>
<head>
<title>Tabel 3</title
</head>
<body>
<h1 align=center>Un tabel aliniat in centru</h1><hr>
Text inainte de tabel.Text inainte de tabel.Text inainte de tabel.Text inainte de tabel.
<table border align=center>
<tr>
<td>Romana</td>
<td>Matemtica</td>
</tr>
<tr>
<td>Franceza</td>
<td>Engleza</td>
</tr>
</table>
Text dupa tabel.Text dupa tabel.Text dupa tabel.Text dupa tabel.Text dupa tabel.
</body>
</html>
Distanța dintre tabel și celelalte elemente din pagina Web poate fi stabilita cu ajutorul atributelor "hspace" și "vspace" al etichetei <table>. Valoarea atributului "hspace" poate fi orice numar pozitiv, inclusiv 0 și reprezinta distanța pe orizontala dintre tabel și celelalte elemente ale paginii Web.
Valoarea atributului "vspace" poate fi orice numar pozitiv, inclusiv 0, și reprezinta distanța pe verticala dintre tabel și celelalte elemente ale paginii Web. Aceste atribute funcționeaza numai cu Netscape Communicator.
Culoarea de fond se stabilește cu ajutorul atributului "bgcolor", care poate fi atașat intregului tabel prin eticheta <table>, unei linii prin eticheta <tr> sau celule de date prin eticheta <td>. Valorile pe care le poate primi "bgcolor" sunt cele cunoscute pentru o culoare. Daca in tabel sunt definite mai multe atribute "bgcolor", atunci prioritatea este urmatoarea : <td>, <tr>, <table> (cu prioritatea cea mai mica).
Exemplu 26:
<html>
<head>
<title>Tabel 4</title>
</head>
<body>
<h1 align=center>Un tabel simplu colorat</h1><hr>
<table border=3 bgcolor=green>
<tr>
<td>MARIN</td>
<td bgcolor=red>Ionescu</td>
</tr>
<tr bgcolor=blue>
<td>POPESCU</td>
<td bgcolor=yellow>MIHAI</td>
</tr>
<tr bgcolor=cyan>
<td>DUMITRASCU</td>
<td>FUIOREA</td>
</tr>
<tr>
<td>ZAMFIR</td>
<td bgcolor=white>UNGUREANU</td>
</tr>
</table></body>
</html>
Distanța dintre doua celule vecine se definește cu ajutorul atributului "cellspacing" al etichetei <table>. Valorile acestui atribut pot fi numere intregi pozitive, inclusiv 0 și reprezinta distanța in pixeli dintre doua celule vecine. Valoarea prestabilita a atributului "cellspacing" este 2.
Exemplu 27:
<html>
<head>
<title>Tabel 5</title>
</head>
<body>
<h1 align=center>Un tabel fara chenar de celule lipite</h1><hr>
<table cellspacing=0>
<tr>
<td bgcolor=gray>Gri</td>
<td bgcolor=red>ROSU</td>
</tr>
<tr bgcolor=blue>
<td>ALBASTRU</td>
<td bgcolor=yellow>GALBEN</td>
</tr>
</table>
</body>
</html>
Distanța dintre marginea unei celule și conținutul ei pot fi definite cu ajutorul atributului "cellpadding" al etichetei <table>. Valorile acestui atribut pot fi numere intregi pozitive și reprezinta distanța in pixeli dintre celule și conținutul ei. Valoarea prestabilita a atributului "cellpadding" este 1.
Exemplu 28:
<html>
<head>
<title>Tabel 6</title>
</head>
<body>
<h1 align=center>Un tabel de celule mari</h1><hr>
<table border cellpadding=20>
<tr>
<td>Nr.crt.</td>
<td>Nume student</td>
</tr>
<tr>
<td>1</td>
<td>IONESCU</td>
</tr>
<tr>
<td>2</td>
<td>POPESCU</td>
</tr>
</table>
</body>
</html>
Dimensiunile unui tabel - lațimea și inalțimea - pot fi stabilite exact prin intermediul a doua atribute : "width" și "height", ale etichetei <table>.
Valorile acestor atribute pot fi :
Exemplu 29:
<html><head>
<title>Tabel 7</title></head>
<body>
<h1 align=center>Un tabel de 350 pixeli x 75%</h1><hr>
<table border width=350 height=75%>
<tr>
<td>Nr.crt</td>
<td>Nume Salariat</td>
</tr>
<tr>
<td>1</td>
<td>Ionescu Damian</td>
</tr>
<tr>
<td>2</td>
<td>Popescu Marian</td>
</tr>
<tr>
<td>3</td>
<td>Marin Alexandru</td>
</tr>
</table>
</body>
</html>
Unui tabel i se poate atașa un titlu cu ajutorul etichetei <caption> (de la "table caption"=titlu tabel). Aceasta eticheta trebuie plasata in interiorul etichetelor <table>.</table>, dar nu in interiorul etichetelor <tr> sau <td>.
Titlul unui tabel poate fi aliniat cu ajutorul atributului "align" al etichetei <caption> care poate lua una dintre valorile :
Exemplu 30:
<html>
<head>
<title>Tabel 8</title>
</head>
<body>
<h1 align=center>Un tabel cu titlu</h1>
<table border><caption align=top>Mașini
<tr>
<td>Mercedes</td>
<td>Citroen</td>
<td>Jaguar</td>
</tr>
<tr>
<td>BMW</td>
<td>Volvo</td>
<td>Renault</td>
</tr>
</table>
</body>
</html>
Un tabel poate avea celule cu semnificația de cap de tabel. Aceste celule sunt introduse de eticheta <th> (de la "tabel header"=cap de tabel) in loc de <td>.
Toate atributele care pot fi atașate etichetei <td> pot fi desemenea atașate etichetei <th>. Conținutul celulelor definite cu <th> este scris cu caractere aldine și centrat.
Exemplu 31:
<html>
<head>
<title>Tabel 9</title>
</head>
<body>
<h1 align=center>Un tabel cu titlu și cap de tabel</h1>
<table border><caption align=bottom>Prețurile mașinii
<tr>
<th>Preț</th>
<th>Citroen</th>
<th>Jaguar</th>
<th>BMW</th>
<th>Volvo</th>
</tr>
<tr>
<th>In dolari
</th>
<td>5000</td>
<td>100000</td>
<td>50000</td>
<td>80000</td>
</tr>
<tr>
<th>In lei</th>
<td>2000000</td>
<td>2000000000</td>
<td>2000000</td>
<td>16000000</td>
</tr>
</table>
</body>
</html>
Alinierea pe orizontala a conținutului unei celule se face cu ajutorul atributului "align" care poate lua valorile :
Alinierea pe verticala a conținutului unei celule se face cu ajutorul atributului "align" care poate lua valorile :
Aceste atribute pot fi atașate atat etichetei <tr> pentru a defini tuturor elementelor celulelor unui rand, cat și etichetelor <td> și <th> pentru a stabili alinierea textului
intr-o singura celula.
Un tabel trebuie privit ca o rețea dreptunghiulara de celule. Cu ajutorul a doua atribute ale etichetelor <td> și <th>, o celula se poate extinde peste celule vecine.
Astfel :
Sunt posibile extinderi simultane ale unei celule pe orizontala și pe verticala. In acest caz , in etichetele <td> și <th> vor fi prezente ambele atribute "colspan" și "rowspan".
Exemplu 32:
<html>
<head>
<title>Tabel 10</title>
</head>
<body>
<h1 align=center>Un tabel simplu cu chenar</h1><hr>
<table border>
<tr>
<td rowspan='3>' <br>Nr.<br>Crt.</td>
<td>Nume</td>
<td colspan=2 rowspan='3>Student</td>
</tr>
<tr>
<td>Prenume</td>
</tr>
<tr>
<td>Adresa </td>
</tr>
<tr>
<td>1</td>
<td colspan=3>Ionescu Sorina, Rm. Valcea</td>
</tr>
</table>
</body>
</html>
Daca un tabel are celule vide, atunci aceste celule vor aparea in tabel fara un chenar de delimitare. In scopul de a afișa un chenar pentru celule vide se utilizeaza urmatoarele trucuri :
Caracterul " " (no break space) este de fapt caracterul spațiu. Un spațiu introdus prin intermediul acestui caracter nu va fi ignorat de browser.
Exemplu 33:
<html>
<head>
<title>Tabel 11</title>
</head>
<body>
<h1 align=center>Un tabel cu celule vide</h1><hr>
<table border>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td> </td>
<td>4</td>
</tr>
</table>
</body>
</html>
Urmatoarele atribute ale etichetei <table> funcționeaza cu Internet Explorer 4.0, 5.0, dar nu cu Netscape Communicator 4.5 :
Exemplu 34:
<html>
<head>
<title>Tabel 12</title>
</head>
<body>
<h1 align=center>Atribute "Internet Explorer"</h1><hr>
<table border=5 background=imagine2.jpg cellspacing=15 bordercolor=maroon bordercolordark=red>
<tr bgcolor=yellow>
<td>BMW</td>
<td>AUDI</td>
<td>VOLVO</td>
</tr>
<tr bgcolor=yellow>
<td> </td>
<td></td>
<td></td>
</tr>
</table>
</body>
</html>
Blocul <colgroup>.</colgroup> permite definirea unui grup de coloane. Atributele acceptate de <colgroup> sunt :
Exemplu :
<colgroup span="3" width="100"></colgroup>
Intr-un bloc <colgroup>, coloanele pot avea configurari diferite daca se utilizeaza elementul <col>, care admite atributele :
Exemplu 35:
<html>
<head>
<title>Tabel 13</title>
</head>
<body>
<h1 align=center>Grupuri de coloane</h1><hr>
<table width=400 cellspacing=10>
<colgroup> <col width= align=rigth> <col width= align=center> <col width=200 align=right> </colgroup>
<tr>
<td valign=top>Ionescu Sorina
</td>
<td valign=top>Popescu
</td>
<td valign=bottom>Ungureanu Andreea Maria
</td>
</tr>
</table>
</body>
</html>
Atributul "frame" al eichetei <table> permite specificarea parților din chenarul unui tabel care vor fi afișate. Valorile posibile ale acestui atribut sunt :
Atributul "rules" al etichetei <table> permite alegerea unor delimitatori pentru celulele unui tabel. Valorile posibile sunt :
Exemplu 36:
<html>
<head>
<title>Tabel 14</title>
</head>
<body>
<h1 align=center>Atributele frames și rules</h1>
<table width=400 frame=box rules=rows cellspacing=10>
<tr>
<td>Nr.crt</td>
<td>Nume</td>
<td>Prenume</td>
</tr>
<tr>
<td>1</td>
<td>Zamfir</td>
<td>Alin</td>
</tr>
</table>
</body>
</html>
Legaturile (link-urile reprezinta partea cea mai importanta a unei pagini Web. Ele transforma un text obisnuit in hypertext sau hyperlegatura care permite trecerea rapida de la o informatie aflata pe un anumit server la alta informatie memorata pe un alt server aflat oriunde in lume. Se pot realiza diferite legaturi, ca de exemplu:
1. O legatura catre o pagina aflata in acelasi director - se formeaza cu ajutorul etichetei <a> (de la "anchor"=ancora). Pentru a preciza pagina indicata de legatura se utilizeaza un atribut al etichetei <a> numit "href", care ia valoare numele fisierului HTML aflat in acelasi director din textul cuprins intre etichetele<a>. </a>.
Exemplu 37:
<html>
<head>
<title>Comutarea intre doua pagini </title>
</head>
<body>
<h3>Pagin1 </h3>
<a href="pagina 2.html">
Link catre pagina2 </a>
</body>
</html>
2. O legatura catre o pagina aflata pe acelasi disc local
Daca pagina referita se afla pe acelasi disc local, dar intr-un alt director atunci pentru a preciza pozitia ei in structura de directoare se poate folosi adresarea relativa.
Exemplu 38:
<html>
<head>
<title> Comutarea intre doua pagini aflate pe acelasi disc local</title>
</head>
<body>
<h3>Pagina 3</h3>
<a href="exemplu 21.html">
Link catre o pagina cu imagini</a>
</body>
</html>
3. O legatura catre un site particular
Exemplu 39:
<html>
<head>
<title> Link catre Yahoo</title>
</head>
<body>
<h3> Link catre Yahoo </h3>
<a href="http://www.yahoo.com">Yahoo<a>
</body>
</html>
Intr-o pagina foarte lunga pot exista puncte de reper catre care se definesc legaturi.O ancora se defineste de asemenea prin eticheta <a>. Pentru a defini ancora se utilizeaza atributul "name" care primeste ca valoare un nume atribuit ancorei. Pnetru a insera o logatura catre "legl" definita in aceeasi pagina se utilizeaza eticheta <a> avand atributul "href" de valoare "#legl".
Pnetru a introduce o legatura catre o ancora definita in alt document (alta pagina) aflat in acelasi director, atributul "href" primeste o valoare de forma "nume_fisier.html#nume_ancora".
Atributul "id" este un atribut universal , adica poate fi atasat oricarui element al unei pagini Web. Acest atribut va inlocui complet atributul "name", care putea fi atasat numai anumitor elemente.
Atributul "id" primeste ca valoare un nume (de exemplu "id1") care identifica in mod unic un element. Atributul "id" poate fi utilizat pe post de ancora intr-o pagina Web conform sintaxei:
<eticheta id= "id1">. </eticheta>
<a href ="#id1">Link catre elemental "id1" </a> , unde "eticheta" poate fi orice element.
Unul din cele mai obisnuite elemente din documentele cu mai multe pagini este un set de definitii, referinte sau indexuri. Dosarele sunt exemple clasice in acest sens, cuvintele sunt listate in ordine alfabetica, urmate de definitii ale termenilor respectivi.
In HTML, intreaga sectiune a unui dosar va fi gestionata printr-o lista de definitii, care este inclusa intr-o pereche de marcaje <dl>.</dl> (de la "definition list"=lista de definitii).
Observatii:
Un termen al listei este initiat de eticheta <dt> (de la "definition term"=termen definit);
Definitia unui termen este initiata de eticheta <dd> (de la "definition description"=descrierea definitiei);
Definitia unui termen incepe pe o linie noua si este indentata.
Exemplu 40:
<html>
<head>
<title>Liste 1</title>
</head>
<body><h1 align=center>O lista de definitii</h1><hr>
<dl>
Dosar de termeni de World Wide Web
<dt><b>hypertext</b>
<dd>- o interconectare Web de informatii de tip text, in care orice cuvant sau fraza poate face legatura catre un alt punct din document sau catre un alt document
<dt><b>date</b>
<dd>- fluxul nesfarsit de materiale care apar pe Internet, spre deosebire de informatii care sunt date cu un anumit inteles sau valoare
<dt><b>informatie</b>
<dd>- sub setul de date
care are efectiv semnificatie si care este util la momentul curent
</dl>
</body>
</html>
Pe langa listele de definitii mai sunt utilizate urmatoarele liste:
1) Liste neordonate
O lista neordonata este un bloc de text delimitat de etichetele corespondente <ul>.</ul> ( "ul" vine de la "unordered list"=lista neordonata). Fiecare element al listei este initiat de eticheta <li> (list item). Lista va fi indentata fata de restul paginii Web si fiecare element al listei incepe pe un rand nou.
Exemplu 41:
<html>
<head><title>Liste 2</title></head>
<body><h1 align=center>O lista neordonata</h1><hr>
Dosar de termeni de World Wide Web
<ul>Culori uzuale disponibile prin nume:
<li>Black <li>White <li>Red <li>Green <li>Blue <li>Yellow <li>Purple
<li>Aqua
</ul>
</body>
</html>
Tag-urile <ul> si <li> pot avea un atribut "type" care stabileste caracterul afisat in fata fiecarui element al listei. Valorile posibile ale acestui atribut sunt:
"circle" (cerc);
"disc" (disc plin)(valoarea prestabilita);
"square" (patrat).
2) Liste ordonate
O lista ordonata de elemente este un bloc de text delimitat de etichetele corespondente <ol>. </ol> ("ol" vine de la " ordered list"=lista ordonata).
Exemplu 42:
<html>
<head>
<title>Liste 3</title>
</head>
<body><h1 align=center>O lista ordonata</h1><hr>
<ol>Culori uzuale disponibile prin nume:
<li>Black <li>White <li>Red <li>Green <li>Blue <li>Yellow <li>Purple
<li>Aqua
</ol>
</body>
</html>
Tag-urile <ol> si <li> pot avea un atribut "type" care stabileste tipul de caractere utilizate pentru ordonarea listei. Valorile posibile sunt:
Tag-ul <ol> poate avea un atribut "start" care stabileste valoarea initiala a secventei de ordonare. Valoarea acestui atribut trebuie sa fie un numar intreg pozitiv.
Exemplu 43:
<html>
<head>
<title>Liste 4</title>
</head>
<body><h1 align=center>O lista ordonata cu litere mari, incepand de la valoarea
C</h1><hr> <ol type=A start=3>Culori uzuale disponibile prin nume: <li>Red <li>Green <li>Blue <li>Yellow <li>Purple <li>Aqua
</ol>
</body>
</html>
Tag-ul <li> poate avea un atribut "value" care stabileste o valoare pentru elementul respectiv al listei. Valoarea acestui atribut trebuie sa fie un numar intreg pozitiv.
Exemplu 44:
<html>
<head>
<title>Liste 5</title>
</head>
<body><h1 align=center>O lista ordonata avand itemi setati individual</h1><hr>
<ol start=3>Repetati urmatorii pasi ai algoritmului:
<li>Salvati fisierul;
<li value=6>Incarcati fisierul in browser;
<li>Schimbati browser-ul utilizat;
<li>Incarcati din nou fisierul.
</ol>
</body>
</html>
3) O lista de meniuri este un bloc delimitat de etichetele corespondente <menu>.</menu>. Cele mai multe browsere afiseaza lista de meniuri ca pe o lista neordonata.
4) O lista de directoare este un bloc delimitat de etichetele corespondente <dir>.</dir> (de la "director"). Nu se recomanda utilizarea acestor doua tipuri de liste, lista de meniuri si lista de directoare.
CSS (Cascading Style Sheets) sau foi de stil in cascada, reprezinta un mecanism simplu de a adauga elemente de stil (tipuri de caractere, culori, aliniere, spatiere etc.) unui document web.
Tag-urile HTML au avut initial rolul de a defini continutul unui document, de a face distinctia intre titlul unui paragraf (definit prin tag-urile <Hn>), continutul paragrafului (definit prin tag-ul <P>), tabele (definite prin tag-ul <TABLE>) etc. Aspectul si modul de afisare al unui site cadeau in sarcina browser-ului, fara a fi folosite niciun fel de tag-uri de formatare.
Dar cum cele doua principale browsere - Internet Explorer si Netscape Navigator - au continuat sa adauge noi tag-uri si atribute limbajului HTML original, a devenit tot mai dificil sa creeyi un site in care continutul documentului HTML sa fi e clar separat de modul sau de prezentare.
Pentru a rezolva aceasta problema, consortiul W3C, responsabil de standardizarea specificatiilor HTML, a creat stilurile si le-a adaugat specificatiilor HTML 4.0.
In prezent, marea majoritate a browserelor suporta CSS.
CSS specifica o schema a prioritatilor pentru a determina care regula de stil are prioritate atunci cand exista mai multe reguli aplicate aceluiasi. Este vorba de asa numita " prioritate in cascada ", prioritatea fiind calculata conform anumitor reguli, astfel incat rezultatul sa fie predictibil.
Informatiile de stil pot fi prezentate sub diferite forme, astfel putem deosebi:
Stiluri in-line, definite an interiorul unui element HTML
Foi de stil interne, definite in interiorul elementului <HEAD>
Foi de stil externe, definite intr-un fisier cu extensia ".css"
Prioritatea cea mai mare o are stilul in-line, dupa care, din punctul de vedere al prioritatii, urmeaza stilul definit in interiorul elementului <HEAD> si in cele din urma, stilul din foaie externa. Prin urmare, o definire a stilului in-line va prevala in fata stilului intern, care la randul sau, va prevala in fata stilului extern.
Sintaxa CSS este alcatuita din trei parti: un selector, o proprietate si o valoare, in urmatorul format :
selector
Selectorul este reprezentat de elementul (tag-ul) carui doriti sa-i aplicati un anumit stil, proprietatea este atributul pe care doriti sa-l schimbati si fiecare proprietate poate lua o anumita valoare. Proprietatea si valoarea sunt separate de doua puncte (:) si sunt incadrate de acolade .
Exemplu:
body
Daca doriti sa modificati mai multe proprietati aceluiasi element, trebuie sa separati fiecare proprietate cu punct si virgula (;).
Exemplul urmator arata cum sa definim un paragraph aliniat pe centru paginii iar textului i se aplica culoarea rosie:
p
Pentru a evidentia mai bine proprietatile definite de stil, puteti scrie fiecare proprietate pe cate un rand, ca in exemplu urmator:
p
De asemenea, ca si in HTML, pentru a putea introduce si explicatii ce pot fi utile ulterior, in CSS pot fi inserate comentarii ce vor fi ignorate de catre browser.
Comentariile incep cu (/*) si se incheie cu (*/), ca in exemplul urmator:
/* Acesta este un comentariu */
Cand .un browser citeste o foaie de stil, va aplica documentului formatarile specificate in foaia respectiva. In funcsie de forma in care sunte prezentate informatiile de stil, inserarea acestora intr-un document web se poate efectua in trei moduri:
1. astfel, pentru inserarea unei foi de stil extern, ideala cand stilul se va aplica mai multor pagini, trebuie folosit tag-ul <LINK> in fiecare pagina ce urmeaza sa foloseasca stilul respective. Atributele obligatorii pentru tag-ul <LINK> sunt REL cu valoarea "stylesheet", TYPE cu valoarea "text/css" si HREF care are ca valoare adresa url a fisierului care contine foaia de stil.
Acest tag se amplaseaza in sectiunea HEAD a paginii web cu urmatoarea sintaxa:
<HEAD>
<LINKREL= "stylesheet" TYPE= "text/css"HREF= "css/header.css">
<HEAD>
In aceste conditii, browser-ul va citi foaia de stil din fisierul "header.css" si va formata documentul in mod corespunzator. O foaie de stil poate fi scrisa in orice editor de text. Fisierul nu trebuie sa contina vreun tag HTML si trebuie salvat cu extensia " .css ".
2. O foaie de stil intern ar trebui folosita atunci cand exista un singur document cu stil propriu. Foaia de stil interna se defineste in sectiunea HEAD folosind tag-ul <STYLE> astfel:
<HEAD>
<STYLE TYPE= "text/css">
h1
p
body
</STYLE>
</HEAD>
Browser-ul va citi acum stilurile, asa cum au fost definite, si va formata documentul in conformitate cu acestea.
Observatie: In mod normal un browser ignora tag-urile necunoscute. Acest lucru inseamna ca browserele mai vechi, care nu suporta stiluri, vor ignora tag-ul <STYLE>, dar vor afisa continutul acestuia, cuprins intre tag-ul de inceput si cel de incheiere, sub forma de text. Pentru a preintampina acest neajuns, este recomandabil sa includeti continutul in interiorul unui comentariu, ca in exemplu de ma jos:
<HEAD>
<STYLE TYPE= "text/css">
<!--
h1
p
body
-->
</STYLE>
</HEAD>
3. In final, daca doriti sa folositi un stil in-line, va trebui sa folositi atributul "STYLE" in interiorul tag-ului respective. Este o metoda folosita mai ales atunci cand un stil urmeaza sa fie aaplicat unei singure aparitii a unui element. Atributul "STYLE" poate contine orice caracteristica CSS. Exemplul urmator arata cum se poate schimba culoarea si stilul fontului folosit intr-un paragraf, fara a mai apela la tag-urile <FONT> cu atributul "color" si <B>:
< p style= "color:red; font-weight:bold"> Acesta este un peregraf in care textul va fi de culoare rosie si scris cu caractere ingrosate </p>
