Programarea in limbaj HTML

Un document HTML este un fisier text (ASCII) care contine descrieri recunoscute de programele de navigare pe Internet. Aceste fisiere pot fi create utilizand orice editor de text (ex. Notepad in sistemele Windows). Poate fi utilizat si un editor de texte specializat cu conditia salvarii documentului ca fisier text (in Word – Text Only with Line Breaks).

Programul Microsoft Word are facilitatea salvarii documentului ca fisier HTML, pastrandu-se astfel eventuala formatare a paginii. Fisierele trebuie salvate cu extensia ".html" sau ".htm".

Exista si programe specializate de editare a fisierelor HTML care pot usura munca de realizare a unei pagini de Internet, dar intotdeauna cunoasterea detaliilor legate de limbajul HTML contribuie la perfectionarea codului oferit de aceste programe.

 

Etichete HTML (HTML Tags)

Un element este o componenta fundamentala a structurii unui document text. Cateva exemple de elemente sunt: titluri tabele, paragrafe, liste s.a.m.d. Se vor utiliza etichetele HTML pentru a scoate in evidenta elementele din fisier pentru utilizarea in programul de navigare.

Etichetele HTML constau din semnul mai mic (<), un nume de eticheta, si semnul mai mare (>). Etichetele sun de obicei in pereche (ex <H1> si </H1>) pentru a arata inceputul si sfarsitul instructiunii de eticheta. Etichetele de sfarsit arata identic cu eticheta de start cu exceptia semnului "/" care precede numele de eticheta.

 

Documentul HTML minimal

Fiecare document HTML trebuie sa contina anumite etichete. Orice document va avea o introducere (head) si un cuprins (body). Introducerea va contine titlul si diverse informatii despre document iar cuprinsul este realizat din informatia pe care o ofera pagina respectiva. Elementele necesare intr-un document HTML sunt cele care se observa in exemplul urmator:

	<html>
   	<head>
   <TITLE>Un exemplu HTML</TITLE>
   	</head>
   	<body>
   <H1>Titlu nr. 1</H1>
   <P>Acesta este textul.
    Va aparea in browser-ul dvs. formatat corect. Vor fi  
    mai multe linii intr-un text real</P>
    <P>Aici textul continua.</P>
    <P>S.a.m.d.</P>
    	</body>
    	</html>

Elementele necesare sunt etichetele: <html>, <head>, <title>, si <body> impreuna cu etichetele de sfarsit corespunzatoare.

Aici poate fi amintit faptul ca HTML este un limbaj care nu face deosebirea intre literele mici si literele mari. Astfel <html>, <HTML>, <HtMl> vor fi interpretate identic de un browser. Exista mici exceptii de la aceasta regula care vor fi amintite in lucrarile urmatoare.

 

Etichete

HTML

Acest element ii comunica programului de navigare ca fisierul respectiv contine informatie codata HTML.

HEAD

Acest element identifica prima parte a documentului HTML unde va fi specificat titlul.

TITLE

Acest element contine titlul documentului. Titlul este afisat undeva de catre browser (de obicei in denumirea ferestrei) dar nu in zona de text. Titlul este ceea ce apare in lista cu pagini favorite din browser (Favorites/Bookmarks). De asemenea titlul este aratat in cazul cautarii pe Internet.

Aceasta impune alegerea corecta a titlului. Acesta ar trebui sa contina ceva unic, relevant, si de asemenea relativ scurt. De exemplul titlul acestei lucrari ar trebui sa fie: "Facultatea de Electronica si Telecomunicatii Iasi - Utilizare Internet - Lucrarea nr. 5" si nu doar "Lucrarea nr. 5". Este bine ca titlurile sa aiba o lungime mai mica decat 64 caractere.

BODY

Este a doua si cea mai mare parte a unui document HTML. Aici va apare informatia si aici se folosesc celelalte etichete.

 

Subtitluri (headings)

HTML are 6 niveluri de subtitluri, numarate de la 1 la 6, cu 1 fiind cel mai proeminent. Subtitlurile sunt afisate cu caractere mai mari si/sau ingrosate. Primul subtitlu din document ar trebui sa fie cel etichetat <H1>. Nu este bine sa se sara peste nivele (de exemplu dupa H1 sa se foloseasca H3).

Sintaxa este urmatoarea: <Hx>Textul subtitlului</Hx> unde x exte un numar intre 1 si 6.

 

Paragrafe

Spre deosebire de documentele din alte editoare de text, in fisierele HTML nu sunt importante trecerile la liniile noi (Enter, Carriage Return). Deci nu va conta cat de lungi sunt liniile de text. Programul de navigare va prelua informatia si va formata documentul conform informatiilor codate HTML ignorind trecerile la linii noi, spatiile multiple, caracterele de distantare (TAB).

Un paragraf va fi cel cuprins intre perechea de etichete <P> si </P>. Se poate utiliza atributul ALIGN pentru a realiza alinierea textului in paragraf.

Exemplu:

	<P ALIGN=CENTER>
	Acesta este un paragraf centrat.
	</P>

Atributul ALIGN poate primi parametrii: LEFT, CENTER, RIGHT.

Eticheta </P> poate lipsi deoarece la intilnirea unei noi etichete <P> de incepere a unui nou paragraf browser-ul considera ca se incheie paragraful anterior.

 

Liste

HTML accepta listele numerotate, nenumerotate si de definitii. Se pot realiza si liste incluse unele in altele dar in general aceste elemente sunt dificil de urmarit de catre cititor.

 

Liste nenumerotate

Utilizeaza eticheta de start a listei <UL> + elementele din lista precedate de <LI> (nu este necesara eticheta de inchidere /LI) + eticheta de inchidere a listei </UL>.

Exemplul urmator:

<UL>

<LI>apples

<LI>bananas

<LI>grapefruit

</UL>

produce urmatoarea afisare:

 

Liste numerotate

Lista numerotata se realizeaza identic, singura diferenta finnd etichetele corespunzatoare: <OL> respectiv </OL>.

Exemplul urmator:

<OL>

<LI>oranges

<LI>peaches

<LI>grapes

</OL>

produce urmatoarea afisare:

  1. oranges
  2. peaches
  3. grapes

 

Liste de definitii

Listele de definitii (eticheta corespunzatoare <DL>) alterneaza un termen (codat ca <DT>) cu definitia corespunzatoare (<DS>).

Exemplul urmator:

<DL>

<DT>NCSA

<DD>NCSA, the National Center for Supercomputing Applications, is located

on the campus of the University of Illinois at Urbana-Champaign.

<DT>Cornell Theory Center

<DD>CTC is located on the campus of Cornell University in Ithaca, New York.

</DL>

produce urmatoarea afisare:

NCSA
NCSA, the National Center for Supercomputing Applications, is located on the campus of the University of Illinois at Urbana-Champaign.
Cornell Theory Center
CTC is located on the campus of Cornell University in Ithaca, New York.

 

Atributul COMPACT poate fi utilizat pentru cazul in care definitiile sunt scurte:

Exemplul urmator:

<DL COMPACT>

<DT>-i

<DD>invokes NCSA Mosaic for Microsoft Windows using the

initialization file defined in the path.

<DT>-k

<DD>invokes NCSA Mosaic for Microsoft Windows in kiosk mode.

</DL>

produce urmatoarea afisare:

-i
invokes NCSA Mosaic for Microsoft Windows using the initialization file defined in the path.
-k
invokes NCSA Mosaic for Microsoft Windows in kiosk mode.

Listele pot fi introduse unele in celelalte astfel:

Exemplul urmator:

<UL>

<LI>A few New England states:

<UL>

<LI>Vermont

<LI>New Hampshire

<LI>Maine

</UL>

<LI>Two Midwestern states:

<UL>

<LI>Michigan

<LI>Indiana

</UL>

</UL>

produce urmatoarea afisare:

Tema

Se vor realiza pagini HTML utilizind etichetele indicate de formatare a textului. Paginile scrise vor constitui scheletul paginii personale ce va trebui realizata si vor fi salvate utilizand "ftp" in directorul corespunzator contului de pe serverul zeta.