Structura elementara a unei pagini web Contrar cu ceea ce sar putea crede, cea mai mare parte dintre paginile web sunt n realitate doar simple fisiere de text. Browserul este cel care citeste textul, cauta n el etichete HTML si apoi afiseaza corespunzator pagina. De exemplu, putem preciza printro eticheta HTML ca dorim ca un anumit cuvnt sa apara cu caractere aldine. Atunci cnd browserul ajunge la partea respectiva a documentului, el formateaza cuvntul cu caractere aldine. 2. 1. Etapele crearii unei pagini HTML P1. Se creaza un nou fisier de text: deschidem editorul de text (Notepad, Wordpad sau Word) si eventual apelam meniul File New. De asemenea, putem deschide un fisier deja existent (File Open). P2. Introducem in fisier textul si etichetele HTML necesare. OBSERVATIE. Nu se folosesc comenzile programului pentru formatare (ex: utilizarea caracterelor italice sau centrarea paragrafelor), deoarece browserul nu va tine cont de ele - pentru el nu conteaza decat etichetele HTML. P3. Salvam fisierul ca pagina web. De exemplu, pentru Notepad: apelam meniul File Save/Save As. in caseta Save in, alegem locul unde trebuie salvata pagina web. introducem numele fisierului care trebuie salvat, terminat cu extensia .htm sau .html in caseta Save as type, specificam tipul fisierului ca fiind All files (*.*). Acest lucru determina Notepad sa foloseasca extensia .htm sau .html (si nu extensia normala, .txt). apasam butonul Save. OBSERVATII: Nu se salveaza fisierul n formatul nativ al procesorului de texte (ex: .txt, .doc, etc.), ci doar .htm sau .html. Daca nu facem acest lucru, nu apare in browser pagina dorita, ci doar textul impreuna cu etichetele HTML introduse. Se folosesc numai nume de fisier cu litere mici in caz contrar, serverul web poate sa nu identifice corect pagina. De exemplu, majoritatea serverelor web (calculatoare care stocheaza pagini web) cred ca index.html si INDEX.HTML sunt fisiere diferite. Nu se folosesc spatii: Desi browserul Internet Explorer interpreteaza corect spatiile din numele fisierelor, alte browsere nu fac acest lucru (ex: Netscape). Daca trebuie separate cuvintele din numele fisierelor si directoarelor, folosim un underscore (_) sau un minus (-). P4 . Incarcam pagina in browser, pentru a vedea cum arata daca o publicam pe Internet. Pentru aceasta, facem dublu clic pe fisierul HTML sau deschidem browserul si apelam meniul File Open (cazul browserului IE). Pentru reincarcarea paginii, apelam meniul View Refresh sau tastam F5 (ca ultima solutie: inchidem si repornim browserul). P5 . Repetam pasii 2 - 3 (si eventual 4) de cate ori este necesar. 2. 2. Etichete HTML Etichetele HTML, numite si tag uri (tags) sau marcatori , instruiesc browserul sa afiseze elementele din pagina asa cum este necesar. De exemplu, daca dorim ca un cuvnt din pagina sa apara cu scris ingrosat, atunci ncadram cuvntul respectiv n etichetele corespunzatoare pentru textul cu caractere aldine. Etichetele HTML au, n general, forma urmatoare: Textul care va fi afectat de eticheta Partea ETICHETA este un cod care specifica tipul de efect pe care l dorim. Codul apare ntotdeauna nconjurat cu paranteze unghiulare < > ; parantezele spun browserului web ca incepe sau se termina o portiune HTML si nu un text oarecare. De exemplu, eticheta pentru text aldin este < B>. Daca dorim ca textul Bine ati venit sa apara ingrosat, introducem in document: Bine ati venit Primul spune browserului ca incepe un text care trebuie afisat cu litere aldine, iar comunica terminarea acestui text. - bara oblica (/) definind eticheta in care apare ca eticheta de final (endtag). 2. 3. Elementele de baza ale paginii Fisierele HTML incep ntotdeauna cu eticheta . Aceasta eticheta spune browserului ca fisierul este o pagina web. Ultima linie din document este eticheta de final corespunzatoare: . Urmatoarele elemente servesc la mpartirea paginii n doua sectiuni: antetul si corpul paginii. Sectiunea antet este asemenea unei introduceri pentru pagina. Browserele web folosesc antetul pentru a prezenta diferite tipuri de informatii despre pagina. n antet pot aparea o serie de elemente, dintre care cel mai intalnit este titlul paginii. Pentru a defini antetul, se adauga o eticheta si o eticheta imediat sub/dupa eticheta . Asadar, pagina va arata deocamdata astfel: @ Nu conteaza daca scriem numele etichetelor cu litere mari sau cu litere mici cu toate ca ultimul standard HTML sugereaza ca toate etichetele HTML sa fie scrise folosind litere mici. Corpul paginii este locul unde introducem textul si alte elemente afisate de browser. Definirea corpului paginii se face cu etichetele: - nainte si - dupa sectiunea antet (dupa eticheta ), astfel: Adaugarea unui titlu Titlul paginii apare in bara de titlu a ferestrei browserului. Pentru a defini un titlu, folosim etichetele si . De exemplu, daca titlul paginii este Pagina Colegiului Economic, introducem: Pagina Colegiului Economic REGULI PENTRU TITLU: titlul trebuie sa descrie continutul paginii (sa nu fie gen pagina nr. 34), sa nu fie prea lung, pentru ca altfel nu apare complet in bara de titlu a browserului. sa aiba sens daca este vazut in afara contextului (ex: daca apare in lista paginilor favorite ale unui browser) Introducerea textului Textul obisnuit se introduce intre etichetele si , astfel: < HEAD> < TITLE> Pagina Colegiului Economic < /HEAD> < BODY> Acest text apare in corpul paginii < /BODY> < /HTML> @ OBSERVATIE: Nu se folosesc spatii, tabulatori, sfarsituri de rand (obtinute cu tasta ENTER) si alte elemente de formatare (culori, aliniere, etc.) folosind comenzile editorului de text toate acestea vor fi ignorate de catre browser . De asemenea, parantezele unghiulare < si > nu pot fi afisate direct n paginile HTML, deoarece browserul le foloseste pentru identificarea etichetelor. Realizarea paragrafelor Pentru a afisa un anumit text intr un nou paragraf, il incadram intre etichetele si . Exemplu: Pagina Colegiului Economic< /HEAD> < BODY> Acest text apare in corpul paginii. Aceasta nu este a doua linie: textul apare in continuare.< P>Aceasta este a doua linie. < /P> < /BODY> < /HTML> Incercati: Realizati o pagina web continand o strofa dintro poezie cunoscuta (cu versurile pe cate un rand). Titlul poeziei sa apara atat in pagina cu litere ingrosate, cat si in bara de titlu a browserului. Folositi, pe rand, editoarele Notepad, WordPad, Word.