Limbajul Html

CUPRINS

Introducere

Unul din primele elemente fundamentale ale WWW (World Wide Web) este HTML (Hypertext Markup Language), care descrie formatul primar în care documentele sunt distribuite și văzute pe Web. Multe din trăsăturile lui, cum ar fi independența față de platforma, structurarea formatării și legăturile hipertext, fac din el un foarte bun format pentru documentele Internet și Web.

HTML este o abreviere de la Hypertext Markup Language și reprezintă scheletul oricărei pagini de Web. HTML nu este un limbaj de programare ci un limbaj descriptiv, prin care sunt descrise elementele structurale ale paginii de Web: titlurile, listele, tabelele, paragrafele, legăturile cu alte pagini, precum și aspectul pe care îl are pagina din punct de vedere grafic. În fond, HTML este modul în care îi comunicăm browserului ce elemente dorim să introducem în pagina Web și care este aspectul acestora.

Deși de-a lungul anilor, progresul științific a cunoscut noi orizonturi, punctul de pornire în ceea ce privește proiectarea informatică în cazul editării de site-uri o constituie editarea prin HTML.

In cazul lucrării de față am abordat proiectarea unui site prin HTML și Dreamweaver, pornind de la considerentul necesității unor site-uri descriptive ale unor locații diverse. Am ales abordarea orașului Paris din punct de vedere al unui site de prezentare, din punct de vedere al obiectivelor arhitecturale, al locației și al poziției ocupate de această capitală în economia și viața politică a Uniunii Europene.

Obiectivele urmărite în elaborarea acestei lucrări constă în enunțarea și aplicarea tehnicilor uzuale de editare a site-urilor în limbajul HTML precum și utilizarea unor concepte specifice Dreamweaver. Rolul aplicației constă în realizarea unor site-uri de promovare a unor obiective turistice (capitale europene), necesare unei agenții de turism în vederea valorificării portofoliului de destinații.

Privind în ansamblu problema abordată în cadrul acestei teme de licență o constituie motivarea alegerii acestei teme aceea de a sprijini în mod formal implementarea unui sistem informatic de prezentare a unor concepte în cadrul unor instituții cu specific turistic. Această idee a luat „naștere” în urma discuției cu un manager al unei agenții de turism care menționa că deși există pachete ofertante de servicii pentru vizitarea anumitor capitale europene, cererea nu abundă în acest sens, tocmai din lipsa unor pagini de prezentare, dar și de pe urma proastei puneri în lumină a „atacurilor teroriste” la nivel european, de aceea ar fi necesare crearea unor site-uri cu profil specific de prezentare, pentru a recrea sentimentul de încredere în spațiul european profund marcat de evenimente nefaste.

Prin această lucrare consider că pot sprjini demersurile necesare pentru a deschide orizonturile în vederea exploatării și pe viitor a resurselor informatice în ceea ce privește limbajul HTML cât și necesitatea explorării conceptelor specifice Dreamweaver.

Lucrarea are în structura sa două mari capitole și anume: un capitol de teorie care prezintă la modul general caracteristicile specifice limbajului HTML și editorului Dreamweaver.

Cel de-al doilea capitol reflectă prezentarea aplicației generate prin limbajul HTML, cu prezentarea detaliilor referitorare la modul de generare ale fiecărei pagini (codul sursă) precum și rezultatele/ rezultatele obținute.

Un alt aspect tratat îl constituie capitolul de concluzii care marchează importanța rezultatelor obținute precum și posibile aspecte de îmbunătățit pe viitor; lucrarea se încheie cu bibliografia selectivă specifică temei abordate.

Capitolul 1. Aspecte teoretice ale limbajului HTML

HTML (HyperText Markup Language) a fost dezvoltat inițial de Tim Berners-Lee în anul 1989, ca urmare a necesității de publicare a informațiilor la nivel global. Pe parcursul anilor, limbajul a evoluat (HTML 3.0, HTML 3.2, HTML 4, HTML 4.01, HTML 5.0), fiecare versiune oferind noi facilități.

Se remarcă câteva trăsături cum ar fi:

independența de platformă (modul de afișare al unui document este același, indiferent de computerul pe care se realizează afișarea);

structurarea formatării;

posibilitățile hypertext (orice cuvânt, imagine sau alt element al documentului vizualizat de utilizator poate face referință la un alt document, ceea ce ușurează navigarea în cadrul aceluiași document sau între documente diferite).

HTML este un limbaj simplu, compus din coduri speciale (marcaje) care se inserează într-un text pentru a adăuga informații despre formatare. Este derivat din SGML (Standard Generalized Markup Language), un sistem pentru definirea tipurilor de documente structurate, destinat să reprezinte instanțe ale acestor tipuri de documente. La baza SGML și a HTML se află același principiu: descrierea conținutului unui document se face într-un fișier text obișnuit (ASCII). S-a urmărit ca aceste fișiere să fie editabile cu aplicații software nepretențioase (ex. NotePad, WordPad).

În cadrul unui document HTML, un marcaj (tag, în limba engleză) va avea forma <nume_marcaj>. Parantezele unghiulare sunt elementele care indică prezența unui marcaj; numele marcajelor poate fi scris oricum, limbajul nefiind senzitiv la literele mari/mici (case sensitive).

Exista două tipuri de marcaje:

– individuale (ex. <br>)

– perechi (ex. <p>…</p>) – de menționat că sfârșitul unui marcaj este indicat prin utilizarea caracterului '/' în fața numelui de marcaj.

În funcție de modul de formatare a paginii, avem marcaje de tip:

– block: este afișat sub elementul anterior (ex. <p>);

– inline: este afișat după elementul anterior (ex. <span>);

– table: este afișat sub forma unui tabel.

Marcajele perechi pot fi imbricate:

<nume_marcaj1>

<nume_marcaj2>

……………

</nume_marcaj2>

</nume_marcaj1>

Browserele vor ignora marcajele și opțiunile pe care nu le recunosc.

1.1. Structura unui document HTML

Un document HTML 4 are următoarea structura:

o linie conținând versiunea HTML;

secțiunea HEAD, delimitată de marcajele <HEAD> </HEAD>;

secțiunea BODY, delimitată de marcajele <BODY> </BODY> sau <FRAMESET> </FRAMESET>

Un document HTML valid conține declarația versiunii HTML utilizate. Declarația se face prin intermediul DTD (document type definition). Pe scurt, fișierul DTD conține definițiile marcajelor din versiunea respectivă de HTML.

1.1.1 Secțiunea HEAD

Cuprinde informații care nu vor fi afișate în browser, cu excepția marcajului <TITLE>

Marcajul <TITLE> este obligatoriu și poate apare doar in secțiunea HEAD. El va conține un titlu relevant pentru pagină, fiind deosebit de important pentru motoarele de căutare.

Alte marcaje care apar în secțiune HEAD:

<META> – poate conține cuvinte cheie, o descriere a paginii, numele autorului paginii, frecvența (teoretică) cu care motoarele de căutare ar trebui să reindexeze pagina, etc. Declarațiile META implică în general declararea unei proprietăți și a valorii asociate acelei proprietăți.

<META name="nume" content="continut">

Declararea setului de caractere se face astfel:

<META http-equiv="Content-Type" content="text/HTML; charset=set_caractere">

Precizarea setului de caractere face posibilă afișarea în browserul utilizatorului a caracterelor specifice unor limbi precum româna, rusa, araba, etc.

<STYLE>- cascading STYLE sheets – stiluri pentru formatarea textului din documentul HTML.

<STYLE type="text/css">…</STYLE>

<SCRIPT> – scripturi JavaScript sau VBScript

<SCRIPT language="JavaScript1.2" type="text/javascript" src="lib.js"></SCRIPT>

<BASE> – stabileste URL-ul de "baza" al documentului. Toate referintele (<a href=""></a>, respectiv <img src="">) din documentul respectiv vor fi deschise relativ la marcajul <base>.

<LINK> – stabilește o legătură cu un document extern, spre exemplu un fișier de definiții CSS.

<LINK rel="STYLEsheet" href="stiluri.css" type="text/css">

1.1.2 Secțiunea BODY

Este inclusă între marcajele <BODY>…… </BODY>

<BODY [ BACKGROUND="adresa_imagine"] [

BGCOLOR="#rrggbb"|"culoare"] [ TEXT="#rrggbb"|"culoare"] [

LINK="#rrggbb"|"culoare"] [ VLINK="#rrggbb"|"culoare"] [

ALINK="#rrggbb"|"culoare"] [ LEFTMARGIN=marg_st] [

TOPMARGIN=marg_top]>

…………….

continut document

……………..

</BODY>

Marcajul de sfârșit (</BODY>) nu este obligatoriu.

În secțiunea BODY se găsește informația care va fi afișată în browser (text, imagini, etc.) (<BODY>…. </BODY>).

LEFTMARGIN și TOPMARGIN sunt extensii Microsoft:

LEFTMARGIN precizează, în pixeli, marginea stângă a documentului (distanța dintre fereastra și conținutul documentului);

TOPMARGIN precizează, in pixeli, marginea de sus a documentului (distanța dintre fereastră și conținutul documentului).

Ca în orice limbaj de programare în HTML există posibilitatea de a introduce comentarii, folosind marcajul

<!– …. textul comentariului –>

Pentru formatarea textului pot fi folosite și marcajele:

<b>…</b> – caractere îngroșate;

<i>…</i> – caractere înclinate;

<u>…</u> – caractere subliniate;

<s>…</s> – caractere "tăiate";

<pre>…</pre> – marcajul de informație preformatată ;

conservă toata caracterele si spațierile de linii;

utilizează un font diferit (Courier);

^… – exponent;

_… – indice;

<br> – "rupe" textul, trecând pe o linie nouă – poate apare oriunde in text;

<hr> – trasează o linie subțire orizontală;

<font>…</font> oferă posibilitatea modificării dimensiunii, culorii și a tipului de font utilizat;

<span> este un marcaj de tip "inline". Se folosește în general în interiorul marcajelor de tip "block" (ex. <p>) în combinație cu stilurile CSS, pentru a impune o formatare diferită de restul conținutului din marcajul "block" respective;

spre deosebire de <span>, marcajul <div> este de tip "block". Se folosește în general pentru poziționare în cadrul documentului și pentru specificarea unor proprietăți CSS care să fie aplicate textului din interiorul lui.

<DIV [ ALIGN="left|center|right"] STYLE="..">

…………………………… </DIV>

1.2. Etichete (tag-uri)

Tag-urile nu sunt altceva decât niște marcaje sau etichete pe care limbajul HTML le folosește alături de texte pentru a ajuta browser-ul de Internet să afișeze corect conținutul paginii web.

Aceste tag-uri (etichete) pot fi de două feluri:

– tag-uri pereche (un tag de început și unul de încheiere). Exemple: <HTML> și </HTML>; <TITLE> și </TITLE>; <HEAD> și </HEAD>;

– tag-uri singulare (nu au un tag de încheiere) Exemple: <HR>, <BR>.

Tag-urile de baza pe care trebuie să le conțină un document HTML:

<HTML> – cu acest tag începe orice document HTML. Prin folosirea acestui tag îi spunem browser-ului că este vorba de un fișier HTML pentru a îl putea afișa.

<HEAD> – între aceste tag-uri sunt trecute, pe lângă titlul paginii, diverse informații folositoare pentru browser-ul de Internet;

</HEAD> – acesta este tag-ul de încheiere al tag-ului <HEAD>;

<TITLE> – cu ajutorul acestei perechi de tag-uri se dă un titlu paginii web. Astfel, textul scris între aceste tag-uri va fi afișat în bara de titlu a documentului.

</TITLE> – este tag-ul de încheiere al tag-ului <TITLE>. Arată sfârșitul titlului documentului.

<BODY> – odată cu acest tag începe conținutul paginii web. Tot ce se scrie între tag-urile <BODY> și </BODY> va fi afișat, de către browser, pe ecranul monitorului.

</BODY> – comunică browser-ului că s-a terminat de scris conținutul paginii. Tot ceea ce se scrie după acest tag nu va mai fi afișat.

</HTML> – este tag-ul de încheiere al tag-ului <HTML>. Codul oricărui document se termina cu acest tag.

1.3. Atribute

Atributele HTML furnizează informații adiționale elementelor HTML.
     Tagurile HTML pot avea atribute. Acestea sunt întotdeauna definite în tagul de început al unui element HTML.

Sunt de forma: nume="valoare".

Pentru o mai bună diferențiere și evidențiere etichetele (tag-urile) HTML sunt scrise cu majuscule iar atributele asociate acestora sunt scrise cu litere mici. Valorile atributelor trebuie să fie întotdeauna încadrate în ghilimele.

HTML nu este un limbaj case-sensitive, adică nu face distincția între literele mici și cele mari (majuscule). Aceasta înseamnă că indiferent cum scriem etichetele, cu litere mari sau cu litere mici, ele vor fi corect interpretate de browser.

Daca sintaxa nu este respectată, browserul ignoră pur și simplu tagul, la fel dacă valoarea unui atribut nu este una validă, ea va fi de asemenea ignorată.

1.4. Formatarea textului

1.4.1. Formatarea titlului

Atunci când avem nevoie să folosim un titlu în cadrul paginii noastre web putem apela la tag-urile <H1>, <H2>, <H3>, <H4>, <H5>, <H6>. Cu ajutorul acestor tag-uri, care au și tag-uri de încheiere, vom scrie titlurile din cadrul paginilor noastre web. Astfel în cadrul codului HTML vom folosi tag-ul <H1>, de exemplu, urmat de textul titlului, iar la sfârșit vom folosi tag-ul de încheiere </H1>. Tag-urile <H1> și </H1> permit scrierea unui titlu cu caracterele cele mai mari în timp ce textul încadrat de tag-urile <H6> și </H6> va fi afișat cu caracterele cele mai mici.

Tag-urile acceptă atributul ALIGN cu ajutorul căruia titlul va putea fi aliniat la stânga, la centru sau la dreapta.

1.4.2. Formatarea textului

Pentru alegerea caracteristicilor unui text, putem folosi tag-ul <FONT>. Acest tag acceptă mai multe atribute (color, face, size) care ne vor ajuta în formatarea textelor. Atributul COLOR se referă la culoarea textului ce va fi încadrat de tag-urile <FONT> și </FONT>, atributul FACE arată tipul fontului, iar atributul SIZE arată mărimea fontului.

La tipul fontului, la fel ca și la culori, este bine să se folosească un font care se află pe majoritatea calculatoarelor, pentru ca dacă se folosește un font mai puțin utilizat, mulți utilizatori nu vor putea vedea textele din cadrul paginilor prezentate cu același font. Cele mai folosite fonturi pentru paginile web sunt următoarele:

Atunci când vrem ca textul din cadrul paginii noastre web să fie afișat pe mai multe rânduri vom folosi unul din tag-urile <BR> sau <P>. Tag-ul <BR> nu are tag de încheiere, în timp ce tag-ul <P> are tag de încheiere, însă nu este obligatoriu.

Tag-ul <BR> vine de la line break (întrerupere de linie) și este folosit pentru a face trecerea de la o linie la alta.

Tag-ul <P> vine de la cuvântul paragraf si se deosebește de tag-ul <BR> prin faptul că prin utilizarea lui nu numai că se trece pe următorul rând, dar se și lasă un rând liber intre texte.

1.5. Utilizarea caracterelor speciale

Pentru ca browser-ul să citească diacriticele specifice limbii române (ă, î, ș, ț etc.) trebuie să scriem o anumită combinație de diverse caractere.

Codurile HTML pentru diacriticele specifice limbii române.

1.6. Despre culori

Culoarea reprezintă un caracteristică extrem de importantă a unei pagini Web. Utilizată cu grijă și măsură, ea poate îmbunătăți substanțial aspectul paginii, făcând-o mai lizibilă și mai atractivă, iar textul mai ușor de parcurs.

Pe de altă parte, utilizarea excesivă sau inadecvată a culorilor poate transforma un text de calitate într-un fel de caleidoscop obositor, greu de urmărit, și care îi va determina pe mulți vizitatori să renunțe la a-l mai parcurge.

1.6.1. Sistemul de definire a culorilor

Sistemul general utilizat pentru definirea culorilor este RGB prin care sunt specificate pentru fiecare culoare care sunt cantitățile de roșu (Red), verde (Green) și albastru (Blue) care o compun.

În HTML orice culoare este desemnată printr-un cod de 6 cifre hexazecimale, dintre care primele două reprezintă cantitatea de roșu, cele două din mijloc, cantitatea de verde, iar ultimele două cantitatea de albastru.

Sistemul hexazecimal este un sistem de numerație care folosește 16 cifre, existând următoarea corespondență între cifrele hexazecimale și cele zecimale:

Deoarece uneori definirea culorii prin intermediul codului său hexazecimal este incomodă, standardul HTML stabilește un set de 16 culori standard.

În acest caz, pentru valoarea atributului de culoare se utilizează direct numele culorii, ca în exemplul de mai jos, în care se setează culoarea magenta pentru linkurile vizitate:

<BODY vlink="magenta">

Mai trebuie menționat faptul că se pot utiliza, pe lângă culori, 100 de nuanțe de gri (gray). Ele sunt numerotate de la 1 la 100, "gray 1" fiind nuanța cea mai închisă, iar "gray 100" cea mai deschisă.

1.6.2. Corespondența dintre codurile hexazecimal și zecimal

Multe dintre editoarele grafice folosesc pentru a defini culorile codul zecimal. Deși se bazează și ele pe același sistem RGB de definire a culorilor, numerele care stabilesc cantitățile celor trei culori sunt specificate în sistemul zecimal.

De exemplu, o culoare care are codul hexazecimal #63FF80 va avea codul zecimal 99, 255, 128. Această corespondență se realizează simplu, trecând fiecare dintre cele trei numere hexazecimale din codul culorii în sistemul zecimal:

63(16)=99(10) , FF(16)=255(10), 80(16)=128(10)

Vom lua pe rând atributele etichetei <BODY>. Cu ajutorul lor se pot seta culorile fundalului, textului și linkurilor:

bgcolor – culoarea fundalului

text – culoarea textului

link – culoarea linkurilor

vlink – culoarea linkurilor vizitate

alink – culoarea linkului activ

1.6.3. Culoarea fundalului

Pentru a stabili culoarea fundalului unei pagini folosim atributul bgcolor (background color) al etichetei <BODY>, căruia îi atribuim o valoare astfel:

<BODY bgcolor="#RGB sau nume_culoare">

1.6.4. Culoarea textului

Pentru a seta culoarea textului din întreaga pagină se folosește atributul text al etichetei <BODY>, conform sintaxei:

<BODY text="#RGB sau nume_culoare">

Dacă am stabilit o culoare pentru textul din pagină și dorim să utilizăm o altă culoare pentru o anumită secțiune a textului (culoarea unui bloc de text), vom folosi eticheta <font>. Aceasta este o etichetă container care cuprinde între etichetele de început și de final textul a cărui culoare dorim să o modificăm. Stabilirea culorii se face folosind atributul color al etichetei conform sintaxei:

<font color="#RGB sau nume_culoare">Text</font>

1.6.5. Culoarea legăturilor

În general legăturile (links) dintr-o pagină Web au culori prestabilite (default), astfel:

blue (albastru) – pentru legături

red (roșu) – pentru legătura activa (cea pe care este fixat cursorul mouse-ului, cu butonul stâng apăsat)

purple (violet) – pentru legăturile vizitate, cele pe care s-a efectuat cel puțin un click

Pentru a schimba culorile prestabilite se folosesc următoarele atribute ale etichetei <BODY>:

– link pentru legături

– alink pentru legăturile active

– vlink pentru legăturile vizitate

conform sintaxei:

<BODY link="#RGB sau nume_culoare"

alink="#RGB sau nume_culoare" vlink="#RGB sau nume_culoare">

1.6.6. Culori "sigure"

Nu toate monitoarele pot reproduce cele 16.777.000 de culori furnizate de codul RGB. Cele realizate cu tehnologii mai vechi, sau cele moderne setate pentru numai 256 de culori pot reproduce corect doar un set limitat de 256 de culori, așa-numită paletă Web sau "culorile sigure Web". Codul hexazecimal variază între #FFFFFF (alb) și #000000 (negru).

1.7. Imagini și elemente multimedia

Conținutul paginilor Web capătă un aspect atractiv și profesional dacă au incluse fotografii, imagini animate, sunete sau imagini video.

1.7.1. Formatele fișierelor grafice

Imaginile sunt stocate în fișiere cu diverse formate, cele mai folosite pe Web fiind cele care conferă un raport optim între calitatea imaginii și dimensiunile fișierului.

Două dintre cele mai utilizate tipuri de fișiere grafice sunt JPEG (Joint Photographic Experts Group) și GIF (Graphics Interchange Format).

Formatul GIF

Formatul GIF (.gif) folosește 256 de culori și este ideal pentru icon-uri, ilustrații și animație. Acest format utilizează o tehnologie specială de comprimare care reduce semnificativ dimensiunile fișierelor grafice pentru un transfer mai rapid prin rețea. În procesul de comprimare se păstrează toate caracteristicile imaginii originale, astfel că după decomprimare imaginea are același aspect ca și originalul, de asemena imaginile GIF suportă efecte de transparență, întrețesere și animație. Deoarece majoritatea browserelor recunosc formatul GIF, acesta a devenit cel mai frecvent utilizat în paginile Web.

Totuși, datorită numărului redus de culori, formatul GIF nu este potrivit pentru fotografii sau imagini de calitate înaltă. Pentru acest tip de imagini, cel mai adecvat este formatul JPEG.

Formatul JPEG

Formatul JPEG (.jpg), pe de altă parte, suportă un număr mult mai mare de culori (aproximativ 16 milioane). Dimensiunile unui fișier JPEG nu depind de numărul de culori ci de gradul de comprimare a imaginii. Gradul de comprimare al formatului JPEG este mai ridicat decât cel al formatului GIF. Nu este neobișnuit, de exemplu, ca un fișier GIF care are 200 de Kb să fie comprimat ca fișier JPEG până la dimensiunea de 30 de Kb.

Pentru a realiza un grad atât de înalt de comprimare a imaginilor, formatul JPEG pierde anumite informații din imaginea originală. Cu toate că la decomprimare imaginea JPEG nu va fi absolut identică cu imaginea originală, diferențele vor fi de cele mai multe ori inobservabile.

Formatul JPEG este potrivit pentru imaginile fotografice, dar el nu este adecvat pentru ilustrații, desene sau imagini de dimensiuni reduse. Algoritmii folosiți pentru comprimarea și decomprimarea imaginii alterează în mod notabil zonele de mari dimensiuni colorate cu o singură nuanță. Din acest motiv, atunci când doriți să includeți în pagină un desen sau o ilustrație care folosește un număr redus de culori, formatul GIF este cel mai potrivit.

1.7.2. Inserarea unei imagini

Pentru a insera o imagine în cadrul unei pagini (o imagine in-line), se utilizează eticheta <IMG> (de la image). Eticheta <IMG> nu este o etichetă container, prin urmare nu necesită o etichetă corespunzătoare de închidere.

Pentru a putea identifica imaginea care va fi inserată, se utilizează atributul src (source) al etichetei <IMG>. Atributul src îi comunica browserului numele și locația imaginii care urmează să fie inserată. Valoarea acestui atribut este adresa URL a imaginii respective.

Dacă imaginea se află în același director cu fișierul HTML care face referire la imagine, atunci adresa URL a imaginii este formata numai din numele fișierului, inclusiv extensia.

<IMG src="imagine.extensie">

Dacă imaginea se află într-un alt director, URL-ul imaginii trebuie specificat fie prin adresarea absolută fie, preferabil, prin cea relativă.

Atributele etichetei <IMG>:

– border: plasează un chenar în jurul imaginii. Valoarea atributului border este numărul de pixeli care reprezintă grosimea chenarului din jurul imaginii. Absența atributului sau setarea la valoarea "0" face ca acest chenar să nu fie prezent.

– alt: permite afișarea unui text explicativ în spațiul în care va fi afișată imaginea în pagină. Prin urmare, dacă dintr-un motiv oarecare, imaginea nu se încarcă în pagină, se încarcă mai greu, sau este vizualizată cu un browser care nu suportă grafica, în zona rezervată imaginii va fi afișat textul specificat ca valoare a atributului alt. De asemenea, textul specificat ca valoare pentru atributul alt va fi afișat și în cadrul unei mici ferestre care se deschide în momentul când cursorul mouse-ului este menținut deasupra imaginii.

1.7.3. Dimensionarea imaginii

Dimensionarea imaginii se realizează cu ajutorul atributelor width (prin care se stabilește lățimea imaginii) și height (prin care se stabilește înălțimea imaginii) în pixeli și în cazuri speciale în procente. Această ultimă variantă nu este recomandată deoarece prin redimensionarea ascendentă a imaginii de către browser, aceasta va pierde din calitate. Același lucru se petrece și în cazul redimensionării prin stabilirea unor valori mai mari a pixelilor decât dimensiunea inițială a imaginii.

Absența atributelor de dimensionare din cadrul etichetei <IMG> este considerată o practică defectuoasă. Motivul este acela că includerea dimensiunilor imaginii oferă browserului posibilitatea de a rezerva spațiu pentru imagine și de a începe încărcarea textului simultan cu încărcarea imaginii. Dacă atributele de dimensionare nu sunt prezente, browserul va efectua niște pași suplimentari pentru a calcula spațiul din pagină necesar afișării imaginii. Din acest motiv afișarea textului nu va putea începe decât după ce imaginea este încărcată în întregime. Este indicat să evitam o asemenea situație deoarece imaginile se încarcă mai greu decât textul.

1.7.4. Alinierea imaginii și a textului

Alinierea unei imagini în raport cu textul din pagină se realizează prin intermediul atributului align, care poate lua următoarele valori:

– left – aliniere la stânga; textul este dispus în partea dreaptă a imaginii încadrând imaginea;

– right – aliniere la dreapta; textul este dispus în partea stânga a imaginii încadrând imaginea;

– top – aliniere deasupra; partea de sus a imaginii se aliniază cu prima linie a textului ce precede imaginea;

– middle – aliniere la mijloc; mijlocul imaginii se aliniază cu prima linie a textului ce precede imaginea;

– bottom – aliniere dedesubt, la bază; partea de jos a imaginii se aliniază cu prima linie a textului.

Valorile left, right și bottom ale atributului align permit ca textul să fie dispus în jurul imaginii, în vreme ce top și middle nu permit acest lucru.

Alte două atribute utile, care servesc la alinierea imaginii față de restul elementelor din pagină, sunt atributele hspace și vspace. Ele precizează distanța, în pixeli, pe orizontală, respectiv pe verticală, dintre imagine și restul elementelor din pagină.

1.7.5. Imagini folosite ca fond (background) al paginii

O imagine poate fi utilizată și pentru a stabili fondul unei pagini Web. În acest scop se folosește atributul background al etichetei <BODY>, având ca valoare adresa URL a imaginii. Imaginea se multiplică aliniat (tiling) pe orizontală și pe verticală până umple întregul ecran.

1.8. Cadre (frames)

O modalitate de structurare avansată a unui document HTML este împărțirea ferestrei browserului în mai multe ferestre distincte, denumite cadre (frames).

Această facilitate permite afișarea simultană, în aceeași fereastră a browserului, a două sau mai multe documente HTML diferite, câte unul în fiecare cadru.

Avantaje:

dimensiunea (KB) mai mică a fiecărui cadru în parte, comparativ cu cazul în care ar fi existat o singură pagină, determină un timp de încărcare mai redus.

Dezavantaje:

unele motoare de căutare nu indexează siturile realizate cu cadre;

autorul trebuie să țină evidența unui număr mare de pagini HTML;

există unele browsere care nu pot afișa pagini realizate cu cadre;

este dificil de printat întreaga pagina.

Într-o pagină de cadre lipsește elementul BODY, conținutul paginii fiind marcat cu ajutorul controalelor <frameset> și </frameset>.

Frameset definește modul de împărțire al ferestrei (spațiul alocat fiecărui cadru în parte).

Fiecare cadru din interiorul documentului este marcat cu ajutorul controalelor <frame> și </frame>.

Marcajul <frameset> are următoarele atribute:

border – definește lățimea chenarului; numai frameset-ul exterior va răspunde la valoarea acestui atribut. Este o extensie Microsoft/Netscape.

bordercolor – specifică culoarea chenarului, în format RGB. Este o extensie Microsoft/Netscape.

cols – definește (pe verticală) dimensiunile sau proporțiile cadrelor în cadrul unui <frameset>. Dimensiunile pot fi precizate ca:

valoare absolută (în pixeli)

valoare relativă (în procente)

* – semnifică spațiul rămas disponibil după afișarea cadrelor anterior definite

rows – definește (pe orizontală) dimensiunile sau proporțiile cadrelor în cadrul unui <frameset>. Dimensiunile pot fi precizate ca:

valoare absolută (în pixeli)

valoare relativă (în procente)

* – semnifică spațiul rămas disponibil după afișarea cadrelor anterior definite

Marcajul <frame> are următoarele atribute:

frameborder – specifică dacă un cadru va afișa sau nu chenar. În cazul în care un cadru are setat frameborder=no, iar cadrele adiacente au specificată afișarea chenarului, acest atribut nu va avea efect pentru cadrul cu frameborder=no.

longdesc – specifică un link către o descriere "lungă" a cadrului respectiv. Scopul acestei descrieri este de a completa descrierea realizată prin atributul TITLE.

src – specifică linkul către conținutul inițial care va fi încărcat în elementul <frame>. Linkul poate fi o cale absolută (http://www.domeniu.ro/pagina.HTML) sau relativă (pagina.HTML).

name – atribuie un nume cadrului curent. Acest nume poate fi folosit în combinație cu marcajul a (<a href="pagina.HTML" target="RightFrame">…</a>) pentru a încărca o pagină într-un anumit cadru.

noresize – cadrele pot fi redimensionate de către utilizatori. Prin folosirea atributului noresize browserul va bloca redimensionarea cadrelor de către utilizator.

scrolling – specifică browserului afișarea/ascunderea barei de scroll (derulare) dintr-un cadru. Poate lua următoarele atribute:

auto – afișarea barei de scroll se face atunci când este necesar (conținutul depășește spațiul afișabil);

yes – bara de scroll este permanent afișată;

no – bara de scroll nu va fi afișată, chiar și in eventualitatea în care este necesară.

marginwidth, marginheight – specifică distanța dintre marginea interioară a cadrului și conținutul afișabil. Atributul marginheight stabilește distanța pentru marginea superioară/inferioară a cadrului. Atributul marginwidth stabilește distanța pentru marginea stânga/dreapta a cadrului.

Marcajul <noframes> reprezintă alternativa (codul HTML) care va fi afișată în browserele care nu suportă cadre. Browserele care pot afisa cadre vor ignora acest marcaj.

1.9. Legăturile (referințele)

Navigarea în cadrul site-urilor este posibilă cu ajutorul link-urilor (legăturilor).

Printr-o legătură într-un document HTML înțelegem marcajul locului de unde se poate efectua trecerea (cuplarea, conectarea) la un alt document sau la o nouă locație din documentul curent. Un loc marcat mai este denumit ancorare.

Marcajele pot fi de două tipuri:

1) legături către alte locații: acestea se vor caracteriza prin textul legăturii (vizibil în documentul afișat pe ecran) și prin adresa la care se poate efectua un salt; textul legăturii va apărea pe ecran subliniat, într-o culoare diferită de cea a textului adiacent; adresa țintă a legăturii apare (dacă nu s-a indicat alt text) pe linia de stare a ferestrei browserului atunci când pointerul mouse-ului este pe textul legăturii;

2) definiri de nume care au doar rolul de a introduce ținte pentru legături; nu sunt diferențiate în documentul afișat pe ecran.

Legătura către o altă pagină – Link-urile

Marcajul HTML principal pentru introducerea referințelor către alte pagini HTML sau către elemente din cadrul aceleiași pagini web este <a>, a provenind de la anchor. El trebuie să conțină atribute, în caz contrar neafectând formatarea documentului. Referințele pot fi către pagini HTML, dar și către alte tipuri de fișiere (imagini, fișiere audio, video, documente în alte formate, etc.)

Legătura către o secțiune de pagină – Ancorele

Până acum am prezentat modul de realizare a referințelor externe, către alte pagini sau către alte situri. Atunci când avem de-a face cu pagini mai lungi, putem împărți aceste pagini în mai multe secțiuni către care să adăugăm câte o legătura la începutul paginii pentru ca utilizatorii să ajungă mai repede la secțiunea care îi interesează. În acest caz soluția constă în utilizarea ancorelor.

O ancoră are următorul format:

<a name="nume_ancora">…</a>

Numele ancorelor nu poate conține spații și trebuie să fie unic în pagina respectivă.

Legătura către o adresă de e-mail

Forma generală a unei legături către o adresă de e-mail este următoarea:

<A href="mailto:adresa de e-mail">Trimite e-mail</A>

Utilizarea unei imagini ca legătură

Pentru a folosi o imagine ca legatură între tag-urile <a> și </a>, va trebui scrisă adresa imaginii:

<A href=numepagina.HTML><img src="adresaimaginii"</A>

Schimbarea culorilor legăturilor

Fiecare legătură din cadrul unei pagini web are trei culori:

• o culoare pentru legăturile nevizitate (nu a fost efectuat nici un click pe ele);

• o culoare pentru legăturile vizitate (s-a efectuat cel puțin un click pe ele);

• o culoare pentru legăturile active (atunci când cursorul mouse-ului se află deasupra lor).

Pentru fiecare culoare, din cele trei de mai sus, există câte un atribut al tag-ului </BODY> ajutorul caruia putem schimba culoarea implicita:

• link pentru legăturile nevizitate;

• vlink pentru legaturile vizitate;

• alink pentru legaturile active.

Fiecărui atribut i se va atribui un nume de culoare sau codul unei culori.

1.10. Liste

Enumerările, de orice fel, constituie o parte importantă a comunicării prin faptul că ajută la sistematizarea și evidențierea unor intrări.

HTML oferă mai multe mecanisme pentru specificarea listelor de informații. Există trei tipuri de liste, fiecare tip trebuie să includă cel puțin un element:

1) liste de tip definiție;

2) liste ordonate (numerotate);

3) liste neordonate (marcate).

Liste de tip definiție

Unul dintre cele mai obișnuite elemente în paginile HTML este un set de definiții, referințe sau indexuri. Un exemplu concret îl reprezintă glosarele; cuvintele sunt listate alfabetic, însoțite de definițiile termenilor respectivi.

Lista de tip definiție este introdusă de marcajele:

<dl>…</dl> – lista definiții (definition list);

<dt> – termenul definit (definition term);

<dd> – definiție (definition).

Liste neordonate

Sunt introduse de marcajele:

<ul>…</ul> – lista neordonată (unordered list);

<li> – element listă.

Atributului type precizează tipul maracatorului. Putem schimba cercul plin din fața fiecarui element (acesta este folosit în mod implicit atunci când folosim o listă neordonată) prin atribuirea atributului type valori precum square (pătrat) sau circle (cerc).

Liste ordonate

Sunt introduse de marcajele:

<ol>…</ol> – lista ordonată (ordered list);

<li> – element listă.

Ca și în cazul listelor neordonate, și la listele ordonate, atributul type are o valoare implicită: numerele. În loc de numere putem folosi și alte caractere. Pentru a folosi aceste caractere este de ajuns să utilizam atributul type cu valoarea potrivita:

– pentru litere mari: <ol type=A>;

– pentru litere mici: <ol type=a>;

– pentru cifre romane mici: <ol type=i>;

– pentru cifre romane mari: <ol type=I> .

Pe lânga atributul type, pentru tag-ul <ol> mai putem folosi și atributul start. Atributul start setează numărul de început pentru primul element al listei ordonate. De exemplu, dacă vrem să incepem de la 4, în cazul numerelor, sau de la D, în cazul literelor mari, etc. Forma generală a acestui atribut este start=n, unde n este un număr natural.

Personalizarea listelor

În locul simbolurilor folosite în mod prestabilit pentru elementele listelor se pot afișa propriile imagini. Pentru aceasta, în loc de tag-ul <li> cu care introducem fiecare element al listei vom adăuga imaginea dorită cu ajutorul tag-ului <img>.

1.11.Tabele

Prezentarea datelor sub formă de tabele prezintă avantaje din punct de vedere al clarității și sistematizării. Marcajele HTML dedicate formatării tabelelor permit operațiuni asemănătoare celor din procesoarele de texte (ex. MS Word).

Definirea unui tabel în HTML se face folosind perechea de marcaje <table> și </table>. Prin intermediul acestei perechi de marcaje se definesc atribute valabile pentru întregul tabel.

Semnificațiile atributelor marcajului <table> sunt:

border – specifică grosimea chenarului tabelului. Dacă are valoarea 0 sau atributul lipsește, tabelul nu va avea chenar.

frame – definește modul de afișare a chenarului exterior. Funcționează în prezența atributului "border". Atributul frame poate avea următoarele valori:

above – afișează latura superioară a chenarului;

below – afișează latura inferioară a chenarului;

border – afișează chenarul complet;

box – afișează chenarul complet (la fel ca și border);

hsides – afișează părțile inferioară, respectiv superioară ale chenarului;

vsides – afișează părțile laterale (stânga, dreapta) ale chenarului;

lhs – afișează latura stângă a chenarului;

rhs – afișează latura dreaptă a chenarului;

void – fără bordura exterioara.

rules – definește modul de afișare a chenarului interior dintre celulele tabelului. Funcționează în prezența atributului "border". Atributul rules poate avea următoarele valori:

none – nu se afișează chenar interior;

groups – afișează chenar între grupurile de celule definite de tHEAD, tBODY, colgroup, col, tfoot;

rows – afișează chenar între linii;

cols – afișează chenar între coloane;

all – afișează chenar între toate celule interioare.

width, height – specifică lățimea, respectiv înălțimea tabelului. În cazul în care valorile specificate nu sunt suficiente pentru afișarea conținutului celulelor, valorile vor fi modificate automat de către browser astfel încât tot conținutul să fie afișat. Valorile se pot exprima absolut, în pixeli, sau relativ la lățimea ecranului (width), respectiv la înălțimea ecranului (height). Trebuie menționat că atributul "height" nu face parte din specificațiile HTML.
Este recomandat să fie lăsat browserul să calculeze valoarea pentru "height" în funcție de conținutul tabelului.

bgcolor – specifică culoarea pentru fundalul tabelului.

bordercolor – specifică culoarea chenarului.

bordercolorlight, bordercolordark – sunt atribute utilizate pentru a crea un efect 3D asupra chenarului. Este recomandată folosirea de culori complementare pentru a obține efectul scontat. Sunt extensii Microsoft.

background – URL-ul imaginii care va fi utilizată ca fundal al tabelului. În cazul in care dimensiunile imaginii sunt mai mici decât cele ale tabelului, ea va fi repetată astfel încât să acopere întregul fundal al tabelului. Este extensie Microsoft.

cellspacing – specifică distanța dintre celule.

cellpadding – specifică marginea interioară a celulelor.

align – specifică alinierea pe orizontală a tabelului (stânga|centru|dreapta).

valign – specifică alinierea pe verticală a tabelului (sus|mijloc|jos).

summary – o descriere a tabelului, de obicei pentru browsere non-vizuale.

Semnificațiile atributelor marcajului <table> sunt:

<tHEAD>…</tHEAD> este un marcaj care conține unul sau mai multe rânduri de celule care reprezintă antetul tabelului. Poate apărea o singură dată în cadrul unui tabel.

<tBODY>…</tBODY> este un marcaj care conține unul sau mai multe rânduri de celule. Pot fi definite mai multe astfel de secțiuni în cadrul aceluiași tabel (ex. în cazul în care există stiluri de formatare diferite pentru secțiuni diferite ale tabelului).

<tfoot>…</tfoot> este un marcaj care conține unul sau mai multe rânduri de celule care reprezintă subsolul tabelului. Poate apărea o singură dată în cadrul unui tabel. Este obligatoriu să apără înaintea marcajului <tBODY>.

Marcajul caption adaugă o scurtă descriere (titlu) a tabelului. Poate fi utilizat numai în cadrul unui marcaj <table>, imediat după acesta.

Are următoarele atribute:

align – în mod normal browser-ul va afișa titlul aliniat central și deasupra/dedesubtul tabelului. În HTML 4.0 atributul align a fost abandonat în favoarea formatării prin CSS (text-align și vertical-align).

valign – precizează poziția titlului în raport cu tabelul (sus/jos).

Marcajul <tr> definește o linie intr-un tabel și poate avea următoarele atribute:

align – specifică modul în care va fi aliniat pe orizontală conținutul liniei de tabel.

valign – specifică modul în care va fi aliniat pe verticală conținutul liniei de tabel.

bgcolor – specifică culoarea pentru fundalul liniei de tabel.

bordercolor – specifică culoarea chenarului celulelor din linie de tabel.

bordercolorlight, bordercolordark – sunt atribute utilizate pentru a create un efect 3D asupra chenarului de tabel.

Marcajul <th> definește o celulă din antetul tabelului și poate avea următoarele atribute:

align, valign – indică alinierea orizontală și verticală a conținutului celule, în celula.

colspan – specifică numărul de coloane peste care se întinde celula curentă spre dreapta.

rowspan – specifică numărul de linii peste care se întinde celula curentă în jos.

nowrap – împiedică "ruperea" textului din celulă pe mai multe linii.

bgcolor, background, bordercolor, bordercolorlight, bordercolorlight – au efecte similare celor menționate mai sus.

Atributele marcajului <td> au efecte similare cu cele prezentate mai sus, în cazul marcajului <th>.

Ultimele atribute sunt colspan și rowspan. Ele extind o celula pe mai multe coloane, respectiv linii ale tabelului.

1.12. Formulare

Formularele reprezintă o metodă de interactivitate cu utilizatorii paginilor web. Prin intermediul unui formular se pot obține date importante de la vizitatori. După ce formularul a fost completat, utilizatorul apasă un buton de trimitere, iar datele introduse în formular vor fi primite sub forma unui e-mail sau vor fi procesate cu ajutorul unui limbaj de programare și adăugate într-o bază de date.

Un formular este introdus în pagina web prin tag-urile <FORM> și </FORM>. Între aceste tag-uri vor fi introduse toate elementele formularului.

Tag-ul <FORM> are două atribute foarte importante: action și method.

Cu ajutorul atributului action îi spunem browser-ului ce se va întâmpla cu datele introduse în formular. Astfel, valoarea atributului action poate fi o adresa URL a unui script, scris într-un limbaj de programare, care va interpreta datele și le va introduce într-o bază de date, dacă este cazul, sau poate fi o adresă de email, caz în care datele introduse în formular vor fi trimise prin email la adresa respectivă.

Atributul method, așa cum îi spune și numele, precizează metoda de trimitere a datelor și poate avea două valori. Valoarea implicită a acestui atribut este get, cu ajutorul acestei metode putând fi trimise cantități mici de date, cea mai folosită metoda fiind post.

Elementele unui formular

Elementele unui formular trebuie introduse, în majoritatea cazurilor, cu ajutorul tag-ului <input>. Atributele cele mai importante ale acestui tag sunt următoarele:

– type – tipul elementului;

– name – numele elementului;

– value – valoarea elementului.

Elementele ale unui formular pot fi:

– câmpurile de editare;

– butoanele radio;

– casetele de validare;

– casetele de fișiere;

– listele de selecție;

– butoanele submit și reset.

Câmpurile de editare

Pentru a introduce în cadrul unui formular un câmp de editare, trebuie să folosim pentru atributul type, al tag-ului <input>, valoarea text.

Atributele cele mai folosite pentru tagul <input> de tipul câmp de editare sunt:

• size, care reprezintă lățimea câmpului de editare;

• maxlength, specifică numărul maxim de caractere care pot fi introduse în câmpul de editare;

• value, valoarea inițială a câmpului de editare.

De exemplu, pentru câmpul de editare de mai sus s-a folosit următoarea linie de cod:

<input name="exemplu" type="text" value="Camp de editare" size="20" maxlength ="30">

Dacă se dorește introducerea unui câmp de editare de tip "parolă", atributul type va avea valoarea "password". În acest caz, caracterele introduse în câmpul de editare, nu vor fi vizibile.

Atunci când vrem să adăugam în cadrul formularului nostru un câmp de editare în care să poată fi introduse mai multe rânduri, folosim câmpurile de editare de tip multilinie. Pentru a folosi un astfel de câmp de editare, avem nevoie de tag-urile <textarea> și </textarea>.

Butoanele radio

Daca avem o întrebare cu mai multe variante de răspuns, vom folosi butoanele radio. Pentru a introduce un buton radio, folosim tag-ul <input>, iar la atributul type, valoarea "radio".

Cu ajutorul atributului checked, fără alte valori, putem selecta un buton radio în mod prestabilit. Nu pot fi selectate mai multe butoane radio dintr-un grup, în același timp.

Casetele de validare

Pentru a introduce o casetă de validare (checkbox) se utilizează eticheta <input> cu atributul type având valoarea "checkbox". Casetele de validare permit selectarea sau deselectarea uneia sau mai multor opțiuni.

Casetele de fișiere

Pentru a trimite un fișier prin intermediul unui formular, folosim pentru atributul type al tag-ului <input>, valoarea "file".

Listele de selecție

O listă de selecție, așa cum îi spune și numele, permite utilizatorului să aleagă una sau mai multe opțiuni dintr-o listă. Listele de selecție pot fi introduse în cadrul unui formular cu ajutorul tag-urilor <select> și </select>.

Atributele cele mai folosite pentru tag-ul <select> sunt:

• name, atribuie listei de selecție un nume;

• size, specifică numărul de elemente din cadrul listei de selecție;

• value, atribuie o valoare de tip text care va fi expediată serverului, sub forma de perechi "name = value";

• selected (fără alte valori), selectează în mod prestabilit un element al listei.

Butoanele de tip Submit și Reset

Pentru a putea expedia datele introduse în cadrul unui formular, fie prin e-mail, fie către un script scris într-un limbaj de programare care va interpreta aceste date, trebuie să folosim un buton de trimitere. Pentru a introduce un asemenea buton folosim tag-ul <input>, cu atributul type având valoarea "submit". Putem modifica și valoarea butonului, care în mod implicit este Submit, cu ajutorul atributului value.

Alături de butonul de tip Submit, putem folosi și un buton de tip Reset. Prin apăsarea acestui buton toate elementele formularului vor reveni la valoarea lor prestabilită, indiferent de valorile introduse de utilizator. Pentru a introduce un buton de tip Reset, se procedează la fel ca și la butonul de tip Submit, singura deosebire fiind că atributul type va avea valoarea "reset".

Trimiterea datelor dintr-un formular prin e-mail

Pentru ca datele introduse într-un formular să fie trimise prin e-mail trebuie să folosim pentru atributul action al tag-ului <form>, valoarea mailto:[anonimizat], în felul acesta, datele introduse in formular vor fi trimise la adresa de e-mail specificată.

Capitolul 2. Prezentarea aplicației practice

Tema acestei lucrări de licență constă în proiectarea unui site folosind limbajul HTML și editorul Dreamweaver, pornind de la considerentul necesității unor site-uri descriptive ale unor locații diverse.

Deși limbajul HTML pare în prezent un limbaj considerat „depășit” de către unii programatori, trebuie totuși să ținem cont de faptul că acest limbaj stă la baza tuturor limbajelor moderne de programare necesare în proiectarea paginilor de navigare web.

Din punctul meu de vedere al utilizatorului dar și al viitorului programator consider că limbajul HTML constituie „piatra” de temelie a cunoștințelor specifice editării/ proiectării de site-uri din perspectiva comenzilor multiple, greoaie ca sintaxă, implicând efectiv introducerea manuală a tuturor informațiilor în vederea generării finale a interfeței/ a paginilor de navigare.

In ceea ce urmează voi începe să prezint aplicația propriu-zisă care constă în realizarea unei pagini de prezentare a orașului Paris, folosind limbajul HTML.

Am considerat ca fiind necesară o interfață prietenoasă care să implice o pagină de start împărțită în trei cadre, astfel pagina „index” fiind generată prin următorul cod sursă introdus în mod manual prin intermediul editorului Notepad:

Sursă: Cod generat de autor/ print-screen

În urma generării codului sursă, rezultatul este următorul cu mențiunea că titlul orașului Paris pe ecranul paginii defilează de la stânga la dreapta:

Sursă: Pagină generată de autor/ print-screen

Tot în cadrul primei pagini/ interfața o altă subdiviziune o constituie imaginea principală care va întâmpina utilizatorii, o imagine care să creeze un impact emoțional deosebit; codul sursă este generat astfel:

Sursă: Cod generat de autor/ print-screen

Rezultatul obținut în urma generării codului anterior în constituie subdiviziunea paginii principale și anume:

Sursă: Pagină generată de autor/ print-screen

Concluzii

………………………………………………………………………………………………………

Bibliografie

Buraga, Sabin, Proiectare situri Web: design și funcționalitate, Editura Polirom, 2002.

idem, Tehnologii Web, Editura Matrix Rom, București, 2001.

Castro, Elizabeth, Html pentru world wide web, Editura Corint, 2003.

Darnel, Rick, Totul despre HTML 5, Editura Teora, 2008

Drăghici, Margareta Dina, Situri Web în HTML 4, Editura Tehnică, 2003.

Evans, Tim, HTML…în lecții de 10 minute, Editura Teora, 1996

Mavrodin, Horațiu, Inițiere rapidă în: Windows, Word, Excel, Access, PowerPoint, Internet Explorer, HTML, Editura Sigma, 2006.

Mitchell, Scott, Cum să creezi un site WEB, Editura Teora, București, 2008.

Phillips, Lee Anne, Utilizare HTML 4, Teora, Bucuresti, 2000.

Stamate, Eugenia Lucia, Crearea și publicarea unui site web. Limbajul html și elemente de web design, Editura Paralela 45, 2005

Taylor, Dave, Crearea paginilor WEB cu HTML 4, Teora, Bucuresti, 1998.