Capitolul 1

Capitolul 1

Primii pai

1. Ce este HTML?

HTML este o abreviere de la Hypertext Markup Language i reprezint scheletul oricrei pagini de Web. HTML nu este un limbaj de programare. Nu vei lucra aici cu variabile, expresii, tipuri de date, structuri de control. HTML este un limbaj descriptiv, prin care sunt descrise elementele structurale ale paginii de Web: titlurile, listele, tabelele, paragrafele, legturile cu alte pagini, precum i aspectul pe care l are pagina din punct de vedere grafic. n fond, HTML este modul n care i comunicam browserului ce elemente dorim s introducem n pagina Web i care este aspectul acestora.

2. Standarde i extensii HTML

HTML este un limbaj standardizat, aceasta nsemnnd c orice browser poate interpreta i afia corect un document Web. Sintaxa de baz a limbajului HTML este definit n versiunea HTML 3.2. n prezent a fost lansat i versiunea HTML 4.0 care se afl n curs de standardizare. De la o versiune la alta, limbajului HTML i se aduga noi elemente. De asemenea, fiecare tip de browser (Netscape Navigator i Internet Explorer, n particular) folosete anumite elemente ne-standard, pentru a mbunti capacitile limbajului. Etichetele noi, care nu fac parte din versiunea standard poart numele de extensii. n general, browserele cele mai folosite, Netscape Navigator i Internet Explorer recunosc etichetele HTML 3.2 i o mare parte din cele nou introduse n HTML 4.0.

Este recomandat s evitai extensiile, n afara cazului cnd avei un motiv foarte serios pentru a le folosi. Pentru utilizatorii browserelor care nu recunosc aceste extensii, anumite pri ale documentului dumneavoastr pot deveni complet ilizibile.

Bineneles, extensiile pot afecta n grade diferite aspectul formal al paginii dumneavoastr. De exemplu, folosirea extensiilor care in de aspectul liniilor orizontale incluse n pagin nu va afecta n mod grav aspectul paginii n browserele care nu suport aceste extensii. Cele mai multe dintre acestea vor ignora extensiile i vor afia o line orizontal standard. Pe de alt parte, extensiile care realizeaz formatarea i alinierea textului i aspectul fonturilor pot face ca documentul s aib un aspect foarte dezordonat n browserele care nu suport extensii de acest tip. Sau, n cazurile cele mai grave, acea parte a documentului poate s nu fie deloc afiat.

3. Coninut i aspect ntr-un document HTML

Pentru a realiza documente Web eficiente, cu impact asupra cititorului, i pentru a valorifica pe deplin puterea limbajului HTML, trebuie s inei seama de o idee fundamental: HTML este destinat structurrii documentele i nu doar formatrii n vederea afirii lor.

HTML furnizeaz modaliti variate pentru a defini aspectul documentului: specificaii legate de fonturi (tipurile de caractere), de formatare a textului, de culori, etc. Desigur, aspectul formal este important, cci el poate veni n beneficiul sau n detrimentul accesibilitii informaiilor prezentate.

Totui, nu aspectul formal, ci coninutul documentului primeaz. HTML conine numeroase ci de structurare a coninutului documentului fr a pune problema felului cum vor fi afiate elementele: titluri, liste, paragrafe, imagini, etc. Toate acestea sunt definite n limbajul HTML fr a impune browserului s le afieze ntr-un anumit mod. Browserului i se las astfel posibilitatea de a afia respectivele elemente n conformitate cu rolul pe care l au ele n structura documentului i nu respectnd regulile impuse de creatorul documentului HTML.

Marele avantaj al abordrii bazate pe coninut fa de cea bazat pe aspect rezid n faptul c paginile dumneavoastr vor fi vizualizate cu tipuri diferite de browsere, fiecare avnd versiuni diferite.

n abordarea bazat pe aspect, dac browserul nu recunoate indicaiile de formatare specificate, fie nu le execut, fie le execut eronat, astfel c structurarea paginii va avea de suferit.

n abordarea bazat pe coninut, indiferent cum va alege browserul s execute indicaiile de formatare, semnificaia elementelor din pagin va rmne neschimbat.

De exemplu, dac vei afia titlurile i subtitlurile din pagin folosind tipuri diferite de fonturi, caractere cu stiluri variate: aldine (bold, sau ngroate), cursive (italice, sau nclinate), subliniate, etc., un browser care nu recunoate aceste elemente ar putea afia titlurile n acelai mod n care afieaz restul textului, astfel c semnificaia lor n pagin i-ar pierde relevana.

Pe de alt parte, dac vei folosi etichetele speciale pentru titluri, chiar daca browserul nu le recunoate, are posibilitatea de a evidenia totui titlurile n cea mai bun manier pe care o are la dispoziie, astfel nct semnificaia lor pentru restul documentului se va pstra.

4. Uneltele de care avei nevoie

Instrumentele minime de care avei nevoie pentru a realiza documente HTML sunt, n esen, urmtoarele: un editor de text, cu ajutorul cruia s scriei documentul, un browser, prin intermediul cruia s vizualizai aspectul i coninutul documentului, un editor grafic cu care s prelucrai imaginile pe care le vei introduce n pagin i o conexiune la Internet.

Editorul

Pentru a scrie documente HTML avei la dispoziie trei posibiliti:

1. Folosirea unui simplu editor de text.

Cel mai cunoscut i accesibil este Notepad-ul din Windows.

Atenie!

Nu este recomandat s folosii un procesor de text complex cum este Microsoft Word, chiar dac acesta poate salva documentele n format HTML (cu extensia .htm), deoarece la salvarea documentelor Word-ul adaug automat la textul documentului dumneavoastr o mare cantitate de cod coninnd informaii lipsite de relevan care ncarc inutil documentul i mrete dimensiunile fiierului.

2. Folosirea unui editor HTML.

Acest tip de editoare dedicate ofer faciliti n scrierea codului, realizeaz corectarea documentului din punct de vedere sintactic i chiar scriu secvene de cod pentru anumite elemente pe care dorii s le inserai n document.

3. Folosirea unui editor WYSIWYG (What You See Is What You Get, n traducere liber "ceea ce vezi la editare este ceea ce obii la vizualizare").

Un editor de tip WYSIWYG permite alegerea i formatarea, cu ajutorul mouse-ului, a elementelor pe care dorii s le includei n pagin: tabele, link-uri, formulare, putei stabili tipul fonturilor, culorile, aranjarea textului n pagina. Pe msur ce un anumit element este inserat, editorul scrie n mod automat codul HTML corespunztor, fr ca utilizatorul s fie nevoit s intervin asupra lui. Totui, dac avei cunotine de HTML putei interveni la nivelul codului n orice manier dorii, orice schimbare pe care o facei n cod, reflectndu-se automat n aspectul paginii.

Printre profesioniti persist o controvers n privina tipurilor de editoare care ar trebui folosite pentru a edita documentele HTML. n esen, problema este aceasta: este mai bine s-i construieti paginile folosind HTML "pur", adic scriind totul tu nsui, sau este de preferat s foloseti un editor de tipul WYSIWYG? Editoare deosebit de puternice de acest tip: Macromedia Dreamweaver, Microsoft Front Page, Coffe Cup ca s dm numai cteva exemple, par a nclina definitiv balana n favoarea acestui tip de editare. Ele ofer facilitai avansate de editare a paginii, inclusiv posibilitatea de a crea pagini dinamice i de a include script-uri JavaScript sau applet-uri Java. Cu ajutorul lor se pot construi site-uri extrem de complexe.

Exist, de asemenea i editoare de tip "built-in". Acestea sunt cel mai uor de folosit i adesea sunt puse la dispoziie de providerii care ofer i servicii gratuite de hosting (www.home.ro, www.rhp.ro, etc.).

Editoarele de acest tip ofer un numr (de obicei redus) de template-uri (pagini preformatate), i doar cteva opiuni de editare: putei aduga text, modifica tipul fonturilor, culoarea fundalului i a textului, forma butoanelor de navigare, putei include un numr prestabilit de imagini. Din pcate, gradul de control asupra aspectului paginii este foarte redus. Utilizatorul este limitat la cteva opiuni, iar numrul mic de template-uri puse la dispoziie face ca pagina s fie lipsita de originalitate.

Ai putea, atunci, s v ntrebai de ce mai este nevoie s nvai HTML dac exist editoare profesionale care scriu codul n locul dumneavoastr. n fond, muli dintre web designerii profesioniti le folosesc, deoarece a scrie codul unui site "by hand", cu ajutorul unui simplu editor de text, este o munca titanic i mare consumatoare de timp.

Rspunsul este simplu: trebuie s cunoatei HTML deoarece orict de performant ar fi un editor WYSIWYG, mai devreme sau mai trziu v vei gsi n situaia de a interveni la nivelul codului. Cea mai comun situaie este aceea n care, datorit multiplelor operaii de editare cum sunt mutarea, copierea, tergerea elementelor, anumite pri ale paginii nu vor mai funciona corect.

De obicei, interveniile necesare asupra codului pentru depanarea sa sunt minime i uor de realizat... cu condiia s tii ce trebuie s facei. Cu alte cuvinte, s tii HTML.

n concluzie, oricare ar fi opiunea dumneavoastr, fie c vei folosi un editor de HTML de tip text, fie c vei folosi unul de tip WYSIWYG, pentru a putea construi documente Web corecte i funcionale este nevoie s stpnii bine limbajul HTML.

Browserul

Evident, pentru a vizualiza documentele dumneavoastr avei nevoie de un browser. Recomandarea noastr este s deinei cel puin dou dintre cele mai rspndite browsere, Internet Explorer i Netscape Navigator, de dorit ar fi chiar cu versiuni diferite ale aceluiai browser. Testarea paginilor dumneavoastr sub diferite browsere este o etap important naintea publicrii lor pe Web.

Dei n anii de nceput ai Web-ului problema aspectului paginilor n diferite tipuri de browsere era vital, deoarece erau folosite o mare diversitate de browsere, fiecare tip realiznd afiarea paginilor n maniera sa proprie, n prezent aceast problem i-a pierdut din importan. Motivul este acela c browserele Internet Explorer au acaparat cea mai mare parte din pia, statisticile artnd c Internet Explorer este tipul folosit de 93% dintre utilizatori iar Netscape Navigator de circa 6% dintre ei.

Editorul grafic

Desigur, vei dori s introducei imagini n paginile dumneavoastr. Pentru a putea s prelucrai imaginile n conformitate cu inteniile dumneavoastr i cu rolul lor n pagin avei nevoie de un editor grafic.

Numrul editoarelor de acest tip este foarte mare, printre cele mai puternice i mai cunoscute fiind CorelDraw i Adobe Photoshop. Putei alege ns acel editor cu care suntei deja familiarizat, chiar dac mai puin performant, mai ales dac pentru nceput nu dorii s facei prelucrri foarte complexe ale imaginilor.

Conexiunea la Internet

Spre deosebire de primele trei instrumente, conexiunea la Internet nu este absolut esenial n etapa de construire a documentului HTML. Aa cum spuneam, documentele HTML se pot construi i vizualiza local, pe propriul computer. Cu toate acestea, existena unei conexiuni Internet v va ajuta foarte mult n procesul de nvare, i nu numai.

Pe de-o parte deoarece pe Web vei gsi nenumrate exemple, i bune i rele, pe care le putei studia. n plus, vei avea acces la o cantitate uria i n continu cretere de resurse, documentaie i produse care v vor ajuta cu siguran la construirea paginilor dumneavoastr. i, n fine, accesul la Internet este esenial n etapa de testare a legturilor cu pagini externe.

5. Cum s procedai?

Pentru a folosi eficient informaiile din aceast carte iat mai jos cteva indicaii n privina modului n care v putei organiza activitatea:

Creai-v n folderul My Documents (sau ntr-o alta locaie aleas de dumneavoastr) un folder de lucru numit Work.

Deschidei editorul de text n care ai ales s lucrai (ar fi de dorit ca pe parcursul procesului de nvare s folosii un simplu editor text, de exemplu Notepad).

Scriei (editai) fiecare exemplu pe care l gsii aici.

Salvai-l n folderul dumneavoastr cu numele indicat n blocul i extensia .html. Putei folosi att extensia .html ct i extensia .htm dar este bine ca odat ce ai ales o anumit extensie s fii consecvent n folosirea ei. Denumii-v fiierele cu litere mici.

Atenie!Editorul de text Notepad salveaz fiierele cu extensia implicita ".txt". De aceea cnd salvai este necesar s precizai n mod explicit extensia dorit (.html sau .htm)

Cnd vei salva fiierul creat n Notepad s-ar putea s constatai c restul de fiiere HTML pe care le-ai salvat anterior nu apar n fereastr. Pentru a le vedea, deschidei meniul File>Save As..., iar n fereastra deschis selectai din list All files.

Deschidei cu browserul utilizat fiierul HTML (File> Open> Browse) pentru a vedea cum arat pagina Web descris n fiierul dumneavoastr.

Dup fiecare modificare pe care o facei n fiierul HTML nu uitai s-l salvai, altminteri schimbrile fcute nu se vor reflecta n aspectul final al paginii.

Pentru a observa felul cum modificrile pe care le facei n codul HTML schimb aspectul paginii, trebuie s apsai butonul Refresh/Reload al browserului.

Pentru a putea s vizualizai cu uurin aspectul paginilor dumneavoastr este bine s avei deschise permanent att editorul de text n care scriei documentul HTML ct i browserul cu care l vizualizai.

6. Convenii de notaie

HTML nu este un limbaj case-sensitive, adic nu face distincia 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. Din acest motiv pe parcursul acestei lucrri vom utiliza o convenie de notaie n care etichetele (tag-urile) HTML sunt scrise cu majuscule iar atributele asociate acestora sunt scrise cu litere mici pentru o mai bun difereniere i evideniere a acestora.

Desigur c n documentele pe care le scriei putei respecta aceast convenie sau putei scrie cu un singur tip de litere, dup cum v este mai uor.

Peste tot n cadrul textului, unde apar etichete, atribute sau valori ale acestora am folosit caractere Courier New pentru a diferenia elementele de limbaj de restul textului.

De asemenea, vei observa c, n exemplele prezentate, codul HTML este scris indentat, adic aliniat la diverse nivele. Ca i n cazul etichetelor, acest lucru nu are importan pentru browser. Indentarea v este util doar dumneavoastr, pentru a diferenia i urmri mai uor diversele elemente pe care le includei n document. Totui, dac n cazul etichetelor putei opta pentru orice variant dorii n privina scrierii lor, indentarea este recomandat chiar i programatorilor cu experien. Un cod neindentat este foarte greu de citit i de depanat, n cazul apariiei unor erori.

7. Rezumat

World Wide Web este o colecie imens de documente interconectate prin intermediul Internetului, care asigur o interfa hypermedia pentru informaii.

Pentru a transmite i afia documentele, World Wide Web folosete protocolului de comunicaie HTTP. Funcionarea World Wide Web se bazeaz pe relaia client-server. Clienii sunt browserele Web iar serverele sunt serverele Web.

Limbajul HTML realizeaz descrierea documentelor Web. Prin intermediul su i se comunic browserului ce elemente fac parte din pagina Web i care este aspectul acestora. Este recomandat crearea unor documente HTML orientate ctre coninut i nu ctre aspect.

Pentru a crea documente HTML avei nevoie de un set minimal de instrumente: un editor de text, un browser, un editor grafic i o conexiune la Internet.

| Capitolul anterior | Cuprins | Capitolul urmtorCopyright 2003 - 2007 Softpage Internet. Reproducerea neautorizata si/sau fara specificarea susrsei va fi urmarita si sanctionata conform legilor in vigoare.

PAGE 1