LECTIA 3-a - 1 mai 2000
Curs de HTML

Cum se scrie un HTML document ?

Documentele HTML sunt scrise in "plain text" (ASCII), simplu spus un text asemanator celui scris la o masina de scris.
Exista diferite cai de realizare a unui document HTML:

Utilizarea unui editor de text (Notepad, Word, etc.) si adaugarea semnelor de reprezentare a asa-numitelor tag-uri HTML.
Reamintim ca aceste tag-uri se scriu intre doua paranteze unghiulare:
se incepe cu o paranteza unghiulara deschisa <
apoi se scrie tag-ul respectiv
si se sfarseste cu o paranteza unghiulara inchisa >
De exemplu: <p> denumit si tag-ul paragraf, defineste in pagina continutul unui paragraf.
Este important sa retineti ca majoritatea tag - urilor sunt perechi. Astfel, vom avea
de inceput, denumit open tag
si de sfarsit, denumit close tag.
In exemplu de mai sus, tag-ul paragraf se scrie astfel:
<p> continutul paragrafului respectiv </p>
unde <p> este open tag, iar </p> este close tag.
Dupa un open tag nu uitati sa incheiati cu un close tag. (Nu uitati semnul / - slash !)
O alta metoda este scrierea cu ajutorul unui program denumit HTML editor (de exemplu: Front Page 98, HTML Wizard, etc.) - program care adauga automat tag-urile potrivite in cuprinsul textului HTML in functie de comanda care defineste tag-ul respectiv in document.
Deasemeni puteti folosi un convertor (de exemplu Microsoft Internet Assistent for MS Word), respectiv un program cu ajutorul caruia se poate prelua un document scris intr-un format (un document.doc file scris in Microsoft Word, de exemplu) si apoi transformat (convertit) in HTML format.

Pentru inceput, se recomanda sa folositi metoda cea mai simpla de a invata scrierea HTML: un program de tip text editor (Notepad de exemplu), deja instalat pe computerul dumneavoastra.

Primul pas este de a crea un file care sa contina documentul dumneavoastra HTML ce urmeaza sa apara pe Web. Acest file trebuie sa prezinte extensia .html sau .htm (de exemplu mypage.html sau mypage.htm). Cele mai noi sisteme pot intelege files extensii de patru caractere, respectiv .html dar, mai exista inca PC-uri care folosesc DOS si Windows 3.1 si care nu pot intelege decat files cu extensii de maxim trei caractere. In acest caz denumirea documentului va trebui sa fie de genul mypage.htm in asa fel incat sa fie acceptata de sistemul respectiv. Oricum, pentru transferul pe internet sunt acceptate ambele extensii: atat .html cat si .htm .

Recapituland cele prezentate in primele doua lectii, o pagina internet trebuie sa cuprinda minimum urmatoarele sectiuni:

Aici urmeaza continutul documentului HTML ....

</body>
</html>

Organizarea documentelor HTML in sectiunea <head> si sectiunea <body> este foarte importanta pentru protocolul HTTP utilizat in transmiterea informatiilor pe internet. Acest protocol include o comanda head care atunci cand intalneste un document cu aceasta informatie (din sectiunea <head>) o retransmite mai departe, prin intermediul serverului respectiv, celui care o solicita, asemenea procedeului de trimitere si primire a unui email.
Tag-ul <title> care contine titlul documentului, trebuie sa fie inclus in interiorul tag-ului <head> asa cum este aratat mai sus, si trebuie sa fie cat mai scurt: maximum 5-6 cuvinte. Acest titlu va fi redat de browser intr-o zona speciala a ecranului, in coltul din stanga sus. Includerea titlului in sectiunea <head> face ca documentul sa fie mai usor de regasit de catre diferitele programe de cautare (AltaVista, Yahoo, InfoSeek, etc.) de pe Internet.

Sectiunea <body> este cea care include continutul documentului, care poate fi structurat (paginat) in paragrafe, liste, tabele, imagini, etc. Aceasta este sectiunea despre care ne vom ocupa cel mai mult in lectiile care urmeaza.

Folosirea tag-ului Paragraph: <p> </p>

Sa pornim de la ideea ca nu stiti nimic despre folosirea tag-urilor si veti incepe sa scrieti un text in modul cunoscut dumneavoastra. Acest text, asa cum este scris acum in programul editor de text Notepad, va fi redat pe toata latimea ecranului fara o aranjare in pagina, chiar daca am folosi spatii albe intre randuri, TAB, sau Enter la capatul randului. Browser-ul ignora toate aceste comenzi care nu-i sunt cunoscute. Textul va fi redat intr-un lung paragraf, de la inceput pana la sfarsit. Iata de ce consideram important sa incepem studiul HTML incepand cu folosirea tag-ului paragraph: <p>

<p>Asa cum am aratat mai sus, HTML aranjeaza automat textul scris pe toata latimea 
ecranului, ignorand  carriage return , tab , blank line, etc.
</p>

<p>Daca textul contine tag-ul paragraph asa cum este cazul in acest paragraf, 
textul va fi redat asa cum il vedeti, separat printr-un rand alb de blocul de text precedent.

Cele doua paragrafe vor fi redate de catre browser (Netscape, MI Explorer) astfel:

Asa cum am aratat mai sus, HTML aranjeaza automat textul scris pe toata latimea ecranului, ignorand carriage return , tab , blank line, etc.

Daca textul contine tag-ul paragraph asa cum este cazul in acest paragraf, textul va fi redat asa cum il vedeti, separat printr-un rand alb. Retineti deci, ca includera tag-ului paragraph atrage dupa sine, automat, adaugarea unui spatiu de un rand intre textul precedent si paragraful respectiv.

***
Tag-ul paragraph situeaza de obicei textul intr-un paragraf incepand din partea stanga a paginii respective. Totusi se poate defini cu ajutorul atributului ALIGN pozitia inceperii paragrafului la stanga, la centru sau la dreapta, astfel:

<p align=center> Acesta este un paragraf cu atributul align=center.</p>

<p align=right> Acesta este un paragraf cu atributul align=right.</p>

<p align=left> Acesta este un paragraf cu atributul align=left, care este standard 
(default).</p>

Cele trei paragrafe incluzand atributele respective vor fi redate de catre browser (Netscape, MI Explorer) astfel:

Acesta este un paragraf cu atributul align=center.

Acesta este un paragraf cu atributul align=right.

Acesta este un paragraf cu atributul align=left, care este atributul standard (default).

Folosirea tag-ului Line Break : <br>

Sfarsitul unui rand se poate determina prin adaugarea tag-ului <br> imediat dupa ultimul cuvant din randul respectiv. Spre deosebire de tag-ul paragraph, tag-ul line break <br> nu adauga un rand alb, ci pur si simplu intrerupe randul in pozitia unde este inscris semnul <br> si forteaza continuarea textului cu un nou rand de la capat (asemanator cu efectul butonului Enter intr-un text obisnuit din Word Processor, de exemplu). De retinut ca acest tag este nepereche (singular) si deci nu este necesara inchiderea lui ca in cazul tag-ului paragraph.

Un exemplu de folosire a tag-ului Line Break <br>
Al doilea rand<br>
Al treilea rand<br>
Si asa mai departe ...<br>

Textul va fi redat de browser astfel:

Un exemplu de folosire a tag-ului Line Break
Al doilea rand
Al treilea rand
Si asa mai departe ...

Folosirea tag-ului Preformatted Text: <pre> </pre>

Sunt situatii in care nu doriti ca web browser-ul sa schimbe aranjarea in pagina a textului dumneavoastra. De exemplu vreti ca spatiile libere, sau lungimea randului sa fie redate asa cum le scrieti. Sau doriti ca anumite date sa fie prezentate in coloane, intr-o anumita pozitie pe pagina, sau sa desenati anumite coduri cu ajutorul caracterelor ASCII (American Standard Code for Information Interchange). In toate aceste cazuri, puteti folosi tag-ul preformatted text <pre> care determina browser-ul sa reproduca textul identic, folosind a fixed-width font, exact asa cum l-ati tiparit: cu caracterele tastaturii folosite de computerul dumneavoastra.

Bineinteles, dupa scrierea textului, incheiati cu closed tag adaugand semnul de eticheta </pre>

IMPORTANT: Nu inserati alte tag-uri in cadrul tag-ului preformatted text pentru a nu deteriora calitatea paginii. Singurul tag admis a fi inserat intre open tag <pre> si close tag </pre> este tag-ul de links <a> despre care vom vorbi in lectiile urmatoare.

FOARTE IMPORTANT: Nu omiteti caracterul slash (/)! Omiterea acestuia, inseamna continuarea redarii textului urmator ca un text preformat, ceea ce nu este de fapt intentia dumneavoastra !

Iata un exemplu de folosire a tag-ului preformatted text <pre>:

<pre>Asa se scrie un text preformat prin care putem reda 

			     exact 
				
pozitia jucatorilor pe terenul de fotbal!

			     PORTAR

     Fundas stanga	Fundas centru  Fundas centru	Fundas dreapta

     	     	     Mijlocas	     Mijlocas

			     Inaintas

           Extrema stanga 		Extrema dreapta

		           Varf de atac</pre>

Textul va fi redat de browser in felul urmator:

Asa se scrie un text preformat prin care putem reda 

			     exact 
				
pozitia jucatorilor pe terenul de fotbal!

			     PORTAR

     Fundas stanga	Fundas centru  Fundas centru	Fundas dreapta

     	     	     Mijlocas	     Mijlocas

			     Inaintas

           Extrema stanga 		Extrema dreapta

		           Varf de atac

Folosirea tag-ului Heading: <h1> through <h6>

Asa cum poate ati observat, am folosit la fiecare subcapitol al lectiei un titlu (heading) care defineste pe scurt continutul subcaptitolului respectiv.

IMPORTANT: Nu confundati tag-ul <titlu> folosit in cadrul sectiunii <head> din pagina HTML cu titlul unui capitol din continutul documentului dumneavoastra.

Tag-ul heading defineste pur si simplu un titlu de document si poate fi reprezentat prin 6 nivele de dimensiune a caracterelor. Primul nivel <h1> este cel mai mare si este redat de catre browser ca un text de dimensiune maxima, urmand apoi in ordine descrescanda celelalte nivele, pana la nivelul cel mai mic <h6>.

Desigur ca puteti alege pentru redarea titlului unui capitol din documentul respectiv oricare din cele sase tag-uri: de la <h1> cel mai mare, pana la <h6> cel mai mic.

FOARTE IMPORTANT : Nu uitati sa inchideti tag-ul dupa scrierea titlului respectiv !

Iata cate un exemplu de scriere HTML pentru fiecare din cele 6 nivele, de la cel mai mare pana la cel mai mic titlu:

<h1>Titlul de nivel 1, cu formatul cel mai mare</h1>

<h2>Titlul de nivel 2, folosit la titlul acestei lectii</h2>

<h3>Titlul de nivel 3, folosit aici la titlul acestui subcapitol</h3>

<h4>Titlul de nivel 4, cu format de marime mijlocie</h4>

<h5>Titlul de nivel 5, cu format mic</h5>

<h6>Titlul de nivel 6, cu formatul cel mai mic</h6>

Textul va fi redat de browser astfel:

Titlul de nivel 1, cu formatul cel mai mare

Titlul de nivel 2, folosit la titlul acestei lectii

Titlul de nivel 3, folosit aici la titlul acestui subcapitol

Titlul de nivel 4, cu format de marime mijlocie

Titlul de nivel 5, cu format mic

Titlul de nivel 6, cu formatul cel mai mic

***

Ca si in cazul tag-ului paragraph, tag-ul heading se poate defini cu ajutorul atributului ALIGN stabilindu-se astfel pozitia in pagina a titlului respectiv. Exemplu:

<h3 align=center> Titlu (heading) cu atributul align=center.</h3>

<h3 align=right> Titlu (heading) cu atributul align=right.</h3>

<h3 align=left> Titlu (heading) cu atributul align=left, care este standard (default).
</h3>

Acest titlu (heading) incluzand atributele respective vor fi redate de catre browser (Netscape, MI Explorer) astfel: