2. Structura elementara a unei pagini web

Gazduire site-uri web nelimitata ca spatiu si trafic lunar la doar 15 eur / an. Inregistrare domenii .ro .com .net .org .info .biz .com.ro .org.ro la preturi preferentiale. Pentru oferta detaliata accesati site-ul BluePink

Contrar cu ceea ce s–ar 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 printr–o eticheta HTML ca dorim ca un anumit cuvânt sa apara cu caractere aldine. Atunci când browserul ajunge la partea respectiva a documentului, el formateaza cuvântul 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).

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.

• 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).

• 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).

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 cuvânt din pagina sa apara cu scris ingrosat, atunci încadram cuvântul respectiv în etichetele corespunzatoare pentru textul cu caractere aldine.

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 . Daca dorim ca textul „ Bine ati venit ” sa apara ingrosat, introducem in document:

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 <HTML>. Aceasta eticheta spune browserului ca fisierul este o pagina web. Ultima linie din document este eticheta de final corespunzatoare: </HTML>.

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 <HEAD> si o eticheta </HEAD> imediat sub/dupa eticheta <HTML>. 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: <BODY> - înainte si </BODY> - dupa sectiunea antet (dupa eticheta </HEAD>), astfel:

Adaugarea unui titlu

Titlul paginii apare in bara de titlu a ferestrei browserului. Pentru a defini un titlu, folosim etichetele <TITLE> si </TITLE>. De exemplu, daca titlul paginii este „Pagina Colegiului Economic”, introducem:

• 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

<HTML>
<HEAD>
<TITLE> Pagina Colegiului Economic </TITLE>
</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:

<HTML> <HEAD> <TITLE>Pagina Colegiului Economic</TITLE>
</HEAD>
<BODY>
Acest text apare in corpul paginii.
Aceasta nu este a doua linie: textul apare in continuare.

Aceasta este a doua linie.

</BODY>
</HTML>

Incercati:

Realizati o pagina web continand o strofa dintr–o 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.