Inițiere în 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 si vazute pe Web. Multe din trasaturile lui, cum ar fi independenta fata de platforma, structurarea formatarii si legaturile hypertext, fac din el un foarte bun format pentru documentele Internet si Web.

Primele specificatiile de baza ale Web-ului au fost HTML, HTTP si URL.

HTML a fost dezvoltat initial de Tim Berners-Lee la CERN in 1989. HTML a fost vazut ca o posibilitate pentru fizicienii care utilizeaza computere diferite si schimbe intre ei informatie utilizind Internetul. Erau prin urmare necesare citeva trasaturi: independenta de platforma, posibilitati hypertext si structurarea documentelor.Independenta de platforma inseamna ca un document poate fi afisat in mod asemanator de computere diferite ( deci cu fonte, grafica si culori diferite ), lucru vital pentru o audienta atit de variata.

Hipertext inseamna ca orice cuvant, fraza, imagine sau alt element al documentului vazut de un utilizator ( client ) poate face referinta la un alt document, ceea ce usureaza mult navigarea intre multiple documente sau chiar in interiorul unui aceluiasi document. Structurarea riguroasa a documentelor permite convertirea acestora dintr-un format in altul precum si interogarea unor baze de date formate din aceste documente.

Standardul oficial HTML este World Wide Web Consortium (W3C), care este afiliat la Internet Engineering Task Force (IETF). W3C a enuntat cateva versiuni ale specificatiei HTML, printre care si HTML 2.0, HTML 3.0,HTML 3.2, HTML 4.0 si, cel mai recent, HTML 4.01. In acelasi timp, autorii de browsere, cum ar fi Netscape si Microsoft, au dezvoltat adesea propriile "extensii" HTML in afara procesului standard si le-au incorporat in browserele lor. In unele cazuri, cum ar fi tagul Netscape , aceste extensii au devenit standarde de facto adoptate de autorii de browsere.

HTML 2.0, elaborat in Iunie 1994, este standardul pe care ar trebui sa-l suporte toate browserele curente -- inclusiv cele mod text. HTML 2.0 reflecta conceptia originala a HTML ca un limbaj de marcare independent de obiectele existente pentru asezarea lor in pagina, in loc de a specifica exact cum ar trebui sa arate acestea. Daca doriti sa fiti siguri ca toti vizitatorii vor vedea paginile asa cum trebuie, folositi tagurile HTML 2.0.

Specificatia HTML 3.0, Enuntata in 1995, a incercat sa dezvolte HTML 2.0 prin adaugarea unor facilitati precum tabelele si un mai mare control asupra textului din jurul imaginilor. Desi unele din noutatile HTML 3.0 erau deja folosite de autorii de browsere, multe nu erau inca. In unele cazuri, taguri asemanatoare implementate de autorii de browsere au devenit mai raspandite decat tagurile "oficiale". Specificatia HTML 3.0 acum a expirat, deci nu mai este un standard oficial.

In Mai 1996, W3C a scos pe piata specificatia HTML 3.2 , care era proiectata sa reflecte si sa standardizeze practicile acceptate la scara larga. Deci, HTML 3.2 include tagurile HTML 3.0 ce erau adoptate de autorii de browsere ca Netscape si Microsoft plus extensii HTML raspandite. In Bilantul asupra HTML, W3C recomanda ca providerii de informatii sa utilizeze specificatia HTML 3.2.Versiunile curente ale majoritatii browserelor ar trebui sa suporte toate, sau aproape toate aceste taguri.

De asemenea exista extensii Netscape si Microsoft care nu fac parte din specificatia HTML 3.2, ori pentru ca sunt mai putin utilizate, ori au fost omologate dupa aparitia HTML 3.2. Pentru ca navigatorul Netscape a fost printre primele browsere care suporta anumite taguri HTML 3.0, iar Netscape detine in jur de 70% din piata de browsere, multi au crezut eronat ca toate extensiile Netscape (incluzand taguri ca si facilitati ca ferestrele) fac parte din HTML 3.0 sau HTML 3.2.

La momentul aparitiei acestui tutorial, HTML 4.0 este larg utilizat si au fost deja publicate specificatiile HTML 4.01.

Documentele HTML sint documente in format ASCII si prin urmare pot fi create cu orice editor de texte. Au fost insa dezvoltate editoare specializate care permit editarea intr-un fel de WYSIWYG desi nu se poate vorbi de WYSIWYG atita vreme cit navigatoarele afiseaza acelasi document oarecum diferit, in functie de platforma pe care ruleaza. Au fost de asemenea dezvoltate convertoare care permit formatarea HTML a documentelor generate ( si formatate ) cu alte editoare. Evident conversiile nu pot patra decit partial formatarile anterioare deoarece limbajul HTML este inca incomplet.

1. Structura documentului HTML.

Orice document HTML incepe cu notatia <html> si se termina cu notatia </html>. Aceste "chestii" se numesc in literatura de specialitate "TAG-uri".Prin conventie, toate informatiile HTML incep cu o paranteza unghiulara deschisa " < " si se termina cu o paranteza unghiulara inchisa " > ".

Tag-urile intre aceste paranteze transmit comenzi catre browser pentru a afisa pagina intr-un anumit mod. Unele blocuri prezinta delimitator de sfarsit de bloc, in timp ce pentru alte blocuri acest delimitator este optional sau chiar interzis.

Intre cele doua marcaje <html> si </html> vom introduce doua sectiuni:

- sectiunea de antet <head> </head> si - corpul documentului <body> </body>. Blocul <body> </body> cuprinde continutul propriu-zis al paginii HTML, adica ceea ce va fi afisat in fereastra browser-ului.

O eticheta poate fi scris atat cu litere mici, cat si cu litere mari.

Adica <HTML> = <HtmL> = <html>. Caracterele "spatiu" si "CR/LF" ce apar intre etichete sunt ignorate de catre browser.

Deci un prim document HTML ar fi ceva de genul asta:

<html>

<head> </head>

<body>

</body>

</html>

Asa arata primul document HTML. Copiati-l folosind Copy/Paste intr-un fisier nou si salvati-l ca PRIM.HTM sau PRIM.HTML. Apoi porniti Netscape Navigator sau Internet Explorer, dati CTRL-O si introduceti calea spre fisier. Dati OK si nimic.

Sa nu disperam vom adauga primele elemente la pagina noastra. In primul rand, titlul unei pagini se obtine inserand in sectiunea <head> </head> a urmatoarei linii:

<title>Aceasta este prima mea pagina de Web</title>

In plus, in sectiunea <body> </body> putem scrie texte cat dorim. Daca nu intalnim nici un marcaj < sau > atunci interpretorul HTML le va lua ca texte simple si le va afisa pe ecran. Sa vedem o noua versiune a paginii noastre:

<html>

<head>

<title>Aceasta este prima mea pagina de Web</title>

</head>

<body>

Bine ati venit in pagina mea de Web!

</body>

</html>

Continutul blocului <title> </title> va aparea in bara de titlu a ferestrei browser-ului.

Daca acest bloc lipseste intr-o pagina HTML, atunci in bara de titlu a ferestrei browser-ului va aparea numele fisierului.

Daca introducem mai multe linii intr-o pagina browser-ul va afisa intr-un singur rand, intrucat caracterele " CR/LF " sunt ignorate de browser. 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 " - intrerupere de linie ).

Folosind aceleasi operatii ca mai sus, vizualizati noua pagina! Veti vedea textul ce apare in fereastra navigatorului. In plus, pagina dvs. va avea un titlu nou, cel introdus de dvs.

<html>

<head>

<title> titlul paginii</title>

</head>

<body>

Bine ati venit in <br> pagina mea de Web!

</body>

</html>

Blocuri preformatate

Pentru ca browser-ul sa interpreteze corect caracterele " spatiu ", " tab " si " CR/LF " ce apar in cadrul unui text, acest text trebuie inclus intr-un bloc <pre> </pre>.

<html>

<head>

<title>bloc preformatat </title>

</head>

<body><pre>

Prima linie

A doua linie

A treia linie

</pre></body>

</html>

Culoarea de fond

O culoare poate fi precizata in doua moduri:

- Printr-un nume de culoare. Sunt disponibile cel putin 16 nume de culori: aqua, black, fuchsia, gray, green lime, maroon, navy, olive, purple, red, silver, teal, white si yellow.

- Prin constructia " #rrggbb " unde r (red), g (green), sau b (blue) sunt cifre hexazecimale si pot lua valorile: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, a, A, b, B, c, C, d, D, e, E, f, F; se pot defini astfel 65536 de culori.

Culoarea unei pagini se precizeaza prin intermediul unui atribut al etichetei <body>.

Culoarea fondului paginii Web se stabileste cu atributul bgcolor al etichetei <body>, de exemplu: <body bgcolor = culoare>.

Urmatorul exemplu realizeaza o pagina cu fondul de culoare gri.

<html>

<head>

<title>culoare de fond </title>

</head>

<body bgcolor=gray>

O pagina Web cu fondul GRI!

</body>

</html>

Culoarea textului

Acest lucru se face prin intermediul atributului text al etichetei <body> dupa sintaxa <body text=culoare>. In urmatorul exemplu textul are culoarea rosie.

<html>

<head>

<title>culoare textului </title>

</head>

<body text=red>

Un text de culoare rosie.

</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>. Urmatorul exemplu prezinta o pagina cu fondul de culoare albastra si textul de culoare galbena.

<html>

<head>

<title>atribute multiple </title>

</head>

<body bgcolor=blue text=yellow>

Fond de culoare albastra si text de culoare galbena.

</body>

</html>

Textul afisat este caracterizat de urmatoarele atribute: Marime ( size), Culoare ( color ), Font (style).

Acestea sunt atribute ale etichetei <basefont>.Este o eticheta singulara (fara delimitator de sfirsit 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 si 7 pentru fontul cel mai mare);

- culoare - este o culoare precizata prin nume sau printr-o constructie RGB;

- font - poate fi un font generic ca " serif ", " san serif ", " cursive ", " monospace ", "fantasy " sau un font specific instalat pe calculatorului clientului, ca " Times New Roman ", " Helvetica " sau " Arial ".Se accepta ca valoare si o lista de fonturi separate prin virgula, de exemplu:

" Times New Roman, serif, monospace ".