Tutoriale HTML - Introducere în HTML

HTML (HyperText Markup Language), creat în Elveţia în anul 1989 este limbajul în care sunt scrise paginile World Wide Web (WWW). Termenii "document HTML" şi "pagina Web" sunt sinonime. Hypertext reprezintă posibilitatea de a crea legături (în engleză - link) între diferite documente. Markup Language înseamnă "limbaj de etichetare". Atunci când se crează o pagină în format HTML, ea va avea, în mod inevitabil, această structură:

tutorial html

Multe din trăsăturile lui, cum ar fi independenţa faţă de platformă (un document poate fi afişat în mod asemănător de computere diferite), structurarea formatării şi legăturile hipertext, fac din el un foarte bun format pentru documentele Internet şi Web.

Primele specificaţiile de bază ale Web-ului au fost HTML, HTTP şi URL. Utilizarea HTML propune scrierea textului, tabelelor şi referinţelor la imaginile încadrate în pagina web, iar apoi se adaugă tag-urile HTML pentru a descrie amplasarea elementelor în pagină. Paginile Web pot fi vizionate prin intermediul unor programe speciale, numite browsere, care sunt capabile să interpreteze limbajul HTML. HTML dispune de un set predefinit de tag-uri, nu se pot crea tag-uri proprii. Pentru a complica lucrurile, există versiuni diferite de browsere şi versiuni diferite ale limbajului HTML, un tag recunoscut de un browser nu poate fi recunoscut de un browser diferit sau mai puţin recent.

Exemple de tag-uri HTML:

  1. <b>...</b> Pentru text boldit
  2. <u>...</u> Pentru text subliniat
  3. <i>...</i> Pentru text italic
  4. <p>...</p> Pentru a începe un paragraf nou
  5. <table>...</table> Pentru a insera un tabel
  6. <title>...</title> Pentru a intitula o pagina

Tag-urile HTML indică efectele aplicate diferitelor părţi de pagină în programele browser (cum ar fi Netscape Navigator si Internet Explorer). Prima versiune a HTML conţinea mai puţin de 30 de tag-uri. Odată cu dezvoltarea web-ului, au apărut mai multe idei pentru îmbunătăţirea acestuia. În cea mai recentă versiune sunt mai puţin de o sută de tag-uri de bază HTML. Implementarea efectelor dorite poate fi făcută şi cu un numar mai mic decît acesta. Majoritatea tag-urilor HTML trebuie sa fie deschise <a>, apoi închise </a>.

Exemplu: Majoritatea programelor de editare a textului pot prezenta textul în font boldit, italic si subliniat. Codul HTML pentru aceasta propoziţie este: <p> Majoritatea programelor de editare a textului pot prezenta textul în <b>bold,</b> <i>italic</i> si <u>subliniat</u>. </p> Tag-urile HTML (<b>si</b>) de pe ambele părţi ale cuvântului “bold” fac ca acest cuvânt sa apară în bold, chiar daca cuvântul bold nu apare boldit în cod. Tag-urile HTML nu sunt văzute în browser. Editoarele HTML uşurează munca deoarece sunt capabile să insereze codul HTML în document. De aceea nu este necesar să se cunoască codul HTML, editorul transformă automat design-ului un cod HTML.

HTML permite utilizatorilor să producă pagini care includ texte, grafică şi indicatori la alte pagini de WEB. Pentru ca informaţia din documentul HTML să fie pusă la dispoziţia lumii, acesta trebuie să fie instalat pe un server WEB. Testarea documentului se poate face cu Nescape Navigator sau cu Microsoft Internet Explorer.

HTML constă dintr-un standard de coduri care specifică în ce mod documentele vor fi afişate pe ecran de către navigatoare, sau, mai simplu, se poate spune că reprezintă limbajul de bază al WWW.

Limbajul prezintă o portabilitate deosebită, un document sursă HTML arătând identic pe orice tip de calculator şi în orice tip de sistem de operare, sarcina interpretării sale revenind diferitelor navigatoare. De reţinut că HTML este un limbaj în plină evoluţie, astfel încât navigatoare diferite vor recunoaşte seturi diferite de elemente HTML..

Hipertext înseamnă că orice cuvânt, frază, imagine sau alt element al documentului văzut de un utilizator (client) poate face referinţa la un alt document, ceea ce uşurează mult navigarea între multiple documente sau chiar în interiorul unui aceluiaşi document. Structurarea riguroasă a documentelor permite convertirea acestora dintr-un format în altul precum şi interogarea unor baze de date formate din aceste documente.

SGML si HTML

Tim Berners-Lee a utilizat ca model SGML (Standard Generalized Markup Language), un standard internaţional în plină dezvoltare. SGML avea avantajul unei structurări avansate şi al independenţei de platformă, dar proiectarea lui a avut în vedere mai mult structura semantică a documentului decât modul de formatare. Flexibil, SGML putea fi descris ca o specificare pentru descrierea altor formate. Utilizatorii puteau crea noi formate (DTD, Document Type Definitions) care puteau fi înţelese de orice produs soft SGML pur şi simplu prin citirea mai întâi a definiţiilor noilor formate.

HTML este pur şi simplu un DTD, deci o aplicaţie a SGML. În primii ani de evoluţie, HTML a crescut lent, în principal pentru că îi lipseau posibilităţile de a descrie publicaţii electronice profesionale; limbajul permitea oarece control asupra fontelor dar nu permitea inserarea graficii.

Documentele HTML sunt documente în format ASCII şi prin urmare pot fi create cu orice editor de texte. Orice document HTML începe cu notaţia <html> şi se termina cu notaţia </html>. Acestea se numesc în literatura de specialitate "TAG-uri". Prin convenţie, toate informaţiile HTML încep cu o paranteză unghiulară deschisă "<" şi se termină cu o paranteză unghiulară închisă ">".

Tag-urile între aceste paranteze transmit comenzi către browser pentru a afişa pagina într-un anumit mod. Unele blocuri prezintă delimitator de sfârşit de bloc, în timp ce pentru alte blocuri acest delimitator este opţional sau chiar interzis.

Între cele doua marcaje <html> şi </>html> se vor introduce doua secţiuni:

  • secţiunea de antet <head>...</head>
  • corpul documentului <body>...</body>.

Blocul <body>...</body> cuprinde conţinutul propriu-zis al paginii HTML, adică ceea ce va fi afişat în fereastra browser-ului.

O etichetă poate fi scrisă atât cu litere mici, cât şi cu litere mari, adică

<HTML> = <HtmL> = <html>.

Caracterele "spaţiu" şi "CR/LF" ce apar între etichete sunt ignorate de către browser. În primul rând, titlul unei pagini se obţine inserând în secţiunea <head>...</head> a următoarei linii:

<title>Aceasta este prima mea pagină de Web</title>

În plus, în secţiunea <body>...</body> putem scrie texte cât dorim. Dacă nu se întâlneşte nici un marcaj < sau >, atunci interpretorul HTML le va lua ca texte simple şi le va afişa pe ecran.

Exemplu:

tutorial html tutorial html

Conţinutul blocului <title>...</title> va apărea în bara de titlu a ferestrei browser-ului. Dacă acest bloc lipseşte într-o pagina HTML, atunci în bara de titlu a ferestrei browser-ului va apărea numele fişierului (în cazul de faţǎ e1_1.html)

Dacă introducem mai multe linii într-o pagină, browser-ul va afişa într-un singur rând, întrucât caracterele " CR/LF " sunt ignorate de browser. Trecerea pe o linie nouă se face la o comandă explicită, care trebuie să apară în pagina html. Această comandă este marcajul <br> ( de la " line break " - întrerupere de linie ).

Folosind operaţiile de mai sus, se poate îmbunătăţi exemplul anterior:

tutorial html tutorial html

Blocuri preformatate

Pentru ca browser-ul să interpreteze corect caracterele " spaţiu ", " tab " şi " CR/LF " ce apar în cadrul unui text, acest text trebuie inclus într-un bloc <pre>...<pre>.

Exemplu:

tutorial html tutorial html