Cunostinta va deschide lumea intelepciunii - Referate profesionale unice

Acasa » scoala » informatica » html
Programarea in limbaj HTML - tutorial

Programarea in limbaj HTML - tutorial

Programarea in limbaj HTML

Ce este un document HTML (Hyper Text Markup Language) si cum poate fi creat

Un document HTML este un fisier text (ASCII) pe baza caruia navigatorul (browser) de Web afiseaza paginile caracteristice site-urilor Web .

care poate fi creat folosind orice editor de text :

Emacs, vi sau pico pentru masini Unix;

SimpleText pt. Macintosh;

Notepad, Microsoft Word, WordPerfect, PageMaker, etc., pentru Windows;

La salvarea documentului HTML trebuie folosita neaparat optiunea "text only".

Nu este obligatoriu ca un document HTML sa fie creat cu ajutorul unui editor de text. Exista si editoare de documente HTML de tipul WYSIWYG ("What You See Is What You Get") care permit programarea vizuala in limbaj HTML. Cele mai cunoscute sunt editoare: "Adobe PageMill", "Microsoft FrontPage", "NetObjects Fusion" etc. Aceste editoare permit generarea automata a codului HTML. Din pacate aceste editoare nu sunt perfecte putand aparea erori in generarea codului, pentru eliminarea lor fiind nevoie de interventia directa a operatorului uman in codul sursa HTML.

Ce contine un document HTML. Tag-uri.

Piesele de rezistenta din cadrul unui document HTML sunt "elementele". Textul simplu, pozele, paragrafele, listele sunt doar cateva exemple de elemente ce ar putea forma un document HTML.

Pentru a putea indica diferitele elemente din cadrul unui document HTML trebuie sa folosim tag-uri (marcaje) care delimiteaza zona de text afectata unui anumit element si au rolul de a indica browser-ului (navigatorului) tipul respectivului element.

Fiecare element trebuie sa fie incadrat de un tag de inceput (de start) si un tag de sfarsit.

La scrierea unui tag in cadrul documentelor HTML trebuie respectata urmatoarea sintaxa:

< nume_tag >

unde nume_tag reprezinta numele respectivului marcaj,

De exemplu tag-ul de start pentru elementul paragraf este <p>, iar tag-ul de sfarsit este </p>.

Dupa cum se poate observa din acest exemplu tag-urile de sfarsit sunt asemanatoare tag-urilor de start unica diferenta dintre ele fiind prezenta caracterului "/" (slash) in cel din urma. Cele mai multe tag-uri au nevoie de tag-ul de incheiere., dar exista si situatii cand prezenta lui nu este necesara: de exemplu cand un singur tag de incheiere se refera la mai multe tag-uri de start, sau pentru tipuri de tag-uri nepereche.

Folosirea necorespunzatoare a tag-urilor de sfarsit poate genera erori in afisarea elementelor, dupa cum putem observa si in exemplul de mai jos:

- Folosirea corecta:

Exemplu <b> de folosire </b> a tag-ului de incheiere.

La afisare va apare:

Exemplu de folosire a tag-ului de incheiere.

- Folosirea incorecta:

Exemplu <b> de folosire a tag-ului de incheiere.

La afisare va apare:

Exemplu de folosire a tag-ului de incheiere.

In acest exemplu, intentia programatorului a fost de marca prin ingrosare (bold) cuvantul "corecta", dar prin folosirea incorecta a tag-ului de incheiere a rezultat altceva.

Unele elemente pot avea diferite atribute ce trebuie incluse in interiorul tag-urilor ce le marcheaza. De exemplu se poate astfel specifica aliniamentul unei imagini in cadrul unui document HTML: la dreapta, la stanga, centrata, etc. Tag-urile care au atribute optionale sunt disponibile in Anexa1.

Important: Limbajul HTML nu tine cont de modul de scriere folosit, tag-urile pot fi scrise atat cu litere mari cat si cu litere mici fara a influenta negativ aparitia elementului in cadrul documentului HTML. De exemplu browser-ul va avea aceeasi interpretare pentru cele doua moduri de scriere <title> si <TiTLe>.

Trebuie precizat ca in limbajul HTML caracterele obtinute prin apasarea tastei SPACE existente intre tag-uri sunt ignorate de browsere.

Mai trebuie amintit ca nu toate navigatoarele World Wide Web (browsere WWW) suporta toate tag-urile HTML. Daca browser-ul WWW nu cunoaste un tag acesta va fi pur si simplu ignorat. Elementele dintre tag-uri necunoscute de browser-ul WWW vor fi afisate eronat.

. Consideratii generale asupra formatului documentelor HTML

Fiecare document HTML trebuie sa contina tag-uri acceptate de limbajul HTML. Un document HTML va fi format obligatoriu dintr-un cap (head) si un corp (body). Capul contine titlul documentului, iar corpul are in interiorul sau elementele ce formeaza documentul HTML.

in cele ce urmeaza vom da un exemplu de structura a unui document HTML minimal:

<html>

<head>

<title> Un exemplu simplu de document HTML </title>

</head>

<body>

<H1> Limbajul HTML este usor de invatat </H1>

<p> Aceasta este lumea HTML. Cu toate ca nu pare (este prea scurt, poate) acesta este totusi un paragraf ! </p>

<p> Acesta este al doilea paragraf </p>

</body>

</html>

Uitandu-ne cu atentie la exemplul de mai sus vom observa tag-urile obligatorii din cadrul unui document HTML: <html>, <head>, <title> si <body> (bineinteles ca acestora le corespund tag-urile de incheiere).

. Crearea, editarea si vizualizarea fisierelor in limbaj HTML. Descrierea principalelor tag-uri de marcare

Dupa cum s-a vazut pana acum, pentru a putea scrie un program in limbaj HTML nu este nevoie de un mediu de programare special, fiind suficienta doar folosirea unui editor de text.

Pentru crearea documentului HTML se deschide editorul de texte, in cazul general al platformei Windows fiind vorba de utilitarul de sistem intitulat Notepad. In acest moment in fereastra lui va aparea un fisier cu numele Untitled. Se modifica numele fisierului in proiect.html, folosind in acest scop optiunea Save As . din meniul File. Odata fisierul creat, el poate fi deschis oricand pentru editare, executand un dublu-click cu mouse-ul pe el imaginea lui. Dupa deschidere se scriu instructiunile HTML necesare, dupa care el se salveaza simplu cu optiunea Save din meniul File.

Pentru a putea vizualiza documentul HTML creat sau editat se procedeaza in felul urmator:

se lanseaza navigatorul de Internet

Din fereastra sa principala pentru:

Netscape Navigator: din meniul File al acestuia se selecteaza comanda Open Page, dupa care pe ecran va aparea fereastra: "Netscape: Open Page". Din aceasta se selecteaza Choose File, iar din fereastra File Browser se selecteaza numele documentului HTML dorit si se apasa butonul OK.

Internet Explorer: din meniul File al acestuia se selecteaza comanda Open., dupa care pe ecran va aparea fereastra: "Open". Din aceasta se selecteaza Browse, iar din din boxa de dialog ce apare se cauta si se selecteaza numele documentului HTML dorit, apoi se apasa butonul Open

Daca toate operatiunile au fost executate corect, in fereastra browser-ului va aparea pagina Web deschis.

Principalele tag-uri folosite intr-un program HTML sunt:

HTML (Tipul documentului)

Acest tag semnalizeaza browser-ului ca fisierul respectiv este un document HTML. Un fisier HTML este un fisier ce contine cod HTML si apare in sistemul de operare cu extensia ".html" sau ".htm". Sintaxa sa este:

<html> continutul_documentului </html>

HEAD (Antetul documentului)

Acest tag este de obicei localizat la inceputul documentului HTML si contine antetul documentului. Sintaxa lui este:

<head> antetul_documentului </head>

TITLE (Titlul documentului)

Tagul <title> marcheaza titlul documentului HTML. Titlul identifica documentul intr-un context global. Titlul este folosit pentru gasirea paginilor Web de catre serverele de cautare (Yahoo, Altavista, etc.).

Titlul documentului apare ca si parte a browser-elor el fiind prezent in cadrul ferestrei browser-ului in partea de stanga sus.

Aparitia titlului in coltul din stanga al ferestrei este urmarea fireasca a scrierii urmatorului cod HTML:

<html>

<head>

<title> Test de titlu </title>

</head>

<body>

</body>

</html>

Afisarea titlului din programul de mai sus este aratata in figura 1.

Figura.1 Afisarea titlului in cadrul browser-ului Netscape Navigator

Folosirea altor tag-uri in interiorul tag-ului <title> nu este permisa, aceasta ducand la afisarea eronata a titlului. in continuarea vom da un exemplu in acest sens:

<html>

<head>

<title> <b>Test de titlu</b> </title>

</head>

<body>

</body>

</html>

Scrierea codului de mai sus are ca efect aparitia titlului in forma prezentata in figura 2.

Figura 2 Aparitia eronata a titlului

BODY (Corpul documentului)

Intre cele doua tag-uri <body> si </body> se afla partea cea mai importanta a documentului HTML. Aici practic este informatia pe care programatorul HTML o pune la dispozitia celor interesati.

HEADINGS (Titlurile paragrafelor)

Titlurile paragrafelor sunt o parte importanta a documentului HTML. De obicei un titlu se foloseste pentru a desemna un paragraf (sectiune) nou in interiorul unei pagini. Limbajul HTML dispune de tag-uri care marcheaza un titlu de paragraf. Sintaxa este:

<hy>Titlul_paragrafului_sau_sectiunii</hy>

unde y este un numar de la 1 la 6 ce determina marimea caracterelor din titlu.

In continuare este exemplificata folosirea tag-urilor de marcare a titlurilor de sectiuni, cele sase marimi diferite fiind vizibile in figura 3.

fig.3 Marimile de titlu ce pot fi folosite in documentele HTML

Figura de mai sus a rezultat ca urmare a scrierii urmatorului cod HTML:

<html>

<head>

<title>Test de titlu</title>

</head>

<body>

<h1>Titlu de marimea H1</h1>

<h2>Titlu de marimea H2</h2>

<h3>Titlu de marimea H3</h3>

<h4>Titlu de marimea H4</h4>

<h5>Titlu de marimea H5</h5>

<h6>Titlu de marimea H6</h6>

</body>

</html>

BACKGROUND (Fundalul)

Fundalul unei pagini Web poate fi fixat (definit) cu ajutorul unui atribut al tag-ului <body>. Definirea fundalului se poate face in doua moduri:

folosind o imagine care este repetata pe intregul spatiu vizibil al paginii Web;

prin stabilirea culorii fundalului.

Sintaxa pentru cele doua posibiltati este urmatoarea:

In cele ce urmeaza se impun urmatoarele precizari:

a. in cazul in care se doreste folosirea ca si fundal a unei imagini aceasta trebuie sa fie in acelasi loc cu fisierul HTML (ne referim la stocarea pe unitatea de disc), iar daca aceasta nu se gaseste in acelasi loc cu sursa HTML trebuie indicata cale unde va fi gasita de browser;

b. in cazul in care se foloseste ca si fundal o culoare simpla aceasta trebuie sa fie recunoscuta de browser-ul folosit.

In figura 4 se da un exemplu de folosire a setarii fundalului unei pagini Web in cele doua moduri definite mai sus:

a. Folosirea unei imagini b. Setarea culorii

Figura 4 Modul de definire al fundalului

Cele doua moduri au fost obtinute scriind urmatoarele secvente de cod HTML:

- pentru a:

<html>

<head>

<title>Setare fundal</title>

</head>

<p>In acest caz a fost folosita o imagine</p>

</body>

</html>

-pentru b:

<html>

<head>

<title>Setare fundal</title>

</hea d>

<p>S-a folosit codul hexa al culorii gri</p>

</body>

</html>

HORIZONTAL RULE (Linie de separare orizontala)

Liniile de separare orizontale sunt folosite pentru a separa eficient, vizual, diferitele sectiuni ale unei pagini Web.

Tag-ul folosit pentru a marca o linie de separare este <hr>. Acest tag nu are nevoie de un tag de incheiere.

Tag-ului de marcare a liniilor orizontale ii sunt asociate mai multe atribute. Aceste atribute sunt: WIDTH, SIZE, NOSHADE. Folosirea tag-lui <hr> fara atribute are ca efect aparitia, in pagina Web, a unei linii de separarea dupa cum se poate observa in figura 5.

Figura 5. Aparitia liniei de separare cand este folosit tag-ul fara atribute.

In cele ce urmeaza vom explica pe rand ce reprezinta fiecare din atribute si cum pot fi ele folosite.

a. atributul WIDTH determina latimea liniei de separare orizontala in cadrul paginii HTML. Modul de folosire al acestui atribut este urmatorul:

unde "n" este un numar ce poate fi specificat in pixeli sau in procente din latimea paginii.

Diferenta dintre cele doua moduri de afisare a liniilor de separare este usor vizibila in figura 6.

Figura 6 Diferenta ce apare la folosirea in mod diferit a atributului WIDTH.

Pentru obtinerea ecranului din figura 6 a fost scrisa urmatoarea secventa de cod HTML:

<html>

<head>

<title>Folosirea liniilor orizontale de separare</title>

</head>

<body>

Sectiunea 1

Sectiunea 2

Sectiunea3

</body>

</html>

b. Atributul SIZE determina grosimea liniei de separare. Sintaxa pentru folosirea acestui atribut este:

unde n este un numar ce reprezinta grosimea in pixeli a liniei.

Efectul pe care il are folosirea acestui atribut este vizibil in figura 7, in care au fost alese trei grosimi de linii diferite: 7, 14, 28 de pixeli.

Figura 7 Modul de aparitie al liniilor atunci cand se seteaza grosimi de linie diferite.

Secventa de cod ce a trebuit scrisa este:

<html>

<head>

<title>Folosirea liniilor orizontale de separare</title>

</head>

<body>

Sectiunea 1

Sectiunea 2

Sectiunea 3

</body>

</html>

c. Cel de-al treilea atribut, NOSHADE, se foloseste atunci cand nu se doreste afisarea liniilor de separare cu efect 3D. Sintaxa este:

Folosirea acestui atribut are ca efect aparitia liniilor de separare conform figurii 8.

Figura 8 Folosirea atributului NOSHADE.

Secventa de cod ce trebuie scrisa pentru obtinerea figurii 8 este urmatoarea:

<html>

<head>

<title>Folosirea liniilor orizontale de separare</title>

</head>

<body>

Sectiunea 1

Sectiunea 2

</body>

</html>

Cele trei atribute pot fi folosite si combinat pentru a obtine efecte cumulate pentru liniile de separare. Acest lucru este evidentiat in figura 9.

Comentarii

Daca vreodata veti dori sa faceti modificari intr-un document HTML care a fost creat cu mult timp in urma este bine ca sursa acestui document sa contina din loc in loc informatii despre evolutia lui, precum si informatii care sa va ajute sa va reamintiti deciziile de codificare folosite la momentul respectiv. Comentariile ar putea fi inutile daca documentul are cateva linii in codul sursei, dar utilitatea lor creste considerabil atunci cand documentul este complicat, iar sursa lui contine cateva sute sau mii de linii.

Figura 9 Obtinerea efectelor cumulate asupra unei linii de separare.

Sintaxa marcajului (tag-ului) folosit pentru introducerea comentariilor in text este:

Textul dintre aceste marcaje va fi complet ignorat de navigatoare, el nefiind vizibil decat in sursa documentelor.

Exemplul de mai jos este edificator in acest sens:

- cum arata sursa:

<html>

<head>

<title>Comentarii incluse in sursa</title>

</head>

<body>

<p>

Textul acesta va fi vizibil navigatorului in timp ce cel cuprins intre marcajele ce delimiteaza comentariile nu va fi vizibil

</p>

</body>

</html>

- ce afiseaza navigatorul:

Figura 10. Comentariile sun invizibile.

Paragraph (Paragraful)

Paragrafele ne ajuta sa transmitem informatia mult mai clar scotand in evidenta ideile pe care le urmareste un anumit text.

De ce am avea nevoie de marcaje pentru paragrafe? De ce nu am scrie pur si simplu aliniatele clasice ca in orice editor de text? Raspunsul la aceste intrebari este evident, daca tinem cont de faptul ca navigatoarele nu iau in seama asezarea in pagina a textului sursei. Pentru a evidentia si mai clar acest lucru vom folosi exemplul de mai jos, unde in figura 2 a fost scris textul fara a folosi marcajul pentru paragraf, iar in figura 3 au fost folosite marcajele pentru a delimita clar paragrafele, asa cum se poate vedea si din sursele celor doua documente:

- sursa documentului in care nu au fost folosite marcaje explicite pentru paragraf:

<html>

<head>

<title>Nefolosirea marcajelor pentru paragrafe</title>

</head>

<body>

Aceasta este prima idee, iar incercarea de a o pune in evidenta fara a folosi marcaje de paragraf a dat gres.

Al doilea paragraf ar trebui sa inceapa de la capat de rind.

</body>

</html>

Figura 11. Efectul nefolosirii marcajelor de paragraf

- sursa documentului in care au fost folosite marcaje explicite pentru paragraf:

<html>

<head>

<title>Folosirea marcajelor pentru paragrafe</title>

</head>

<body>

<p>

Aceasta este prima idee, iar incercarea de a o pune in evidenta folosind marcaje de paragraf a avut succes.</p>

<p>

De aceasta data al doilea paragraf inceape de la capat de rind. </p>

</body>

</html>

Figura 12. Efectul folosirii marcajelor de paragraf.

Dupa cum probabil se observa din sursele celor doua exemple de mai sus, sintaxa marcajelor pentru delimitarea paragrafelor este:

<p> paragraf </p>

Delimitarea inferioara a paragrafului nu are nevoie neaparata de un marcaj de incheiere, dar este recomandat sa fie folosit. Marcajul de incheiere devine absolut necesar atunci cand se doreste o anumita aliniere a textului din paragraf. Alinierile posibile pentru textul dintr-un paragraf sunt urmatoarele: aliniat la stanga, aliniat la dreapta, centrat si odata cu limbajul HTML 4 a devenit posibila si alinierea ambelor margini. Sintaxele pentru cele patru tipuri de aliniere sunt:

- aliniat la stanga:

<p align=left> paragraf </p>

- aliniat la dreapta:

<p align=right> paragraf </p>

- centrat:

<p align=center> paragraf </p>

- ambele margini aliniate:

<p align=justify> paragraf </p>

In cele ce urmeaza se da un exemplu de folosire a atributelor de aliniere ale marcajului <p>:

<html>

<head>

<title>Folosirea marcajelor pentru paragrafe</title>

</head>

<body>

Acesta este primul paragraf si a fost aliniat la stinga folosind atributul 'left'.</p>

Acesta este cel de-al doilea paragraf si a fost centrat cu ajutorul atributului 'center'. </p>

Acesta este al treilea paragraf si a fost aliniat la dreapta folosind atributul 'right'.</p>

Acesta este cel de-al patrulea paragraf si liniile sale au fost fortate sa se alinieze frumos la stinga si la dreapta. Acest atribut nu este cunoscut decit de versiunile mai noi de 4 ale celor doua navigatoare cunoscute Internet Explorer si Netscape Navigator.</p>

</body>

</html>

Figura 13. Efectul folosirii atributelor marcajului <p>.

PREFORMATTED TEXT (Text preformatat)

Sintaxa marcajului pentru text preformatat este:

<pre> text preformatat </pre>

Pentru a intelege de ce este nevoie sa folosim marcaje pentru textul preformatat se va folosi din nou un exemplu. Se scrie urmatoarea sursa pentru un document HTML in care se doreste introducerea unei imagini realizate cu ajutorul caracterelor ASCII. Figura 14 este rezultatul scrierii codului HTML fara a folosi marcajul pentru text preformatat in timp ce figura 15 foloseste acest marcaj. Diferenta este evidenta.

- sursa documentului HTML fara marcarea textului preformatat:

<html>

<head>

<title>Nefolosirea marcajelor pentru text preformatat</title>

</head>

<body>

(a a)

+-------oOO----(_)----- ----- ----+

Text preformatat |

+----- ----- -------------oOO-----+

|__|__|

|| ||

ooO Ooo

</body>

</html>

Figura 14, Efectul absentei marcajelor pentru text neformatat

- sursa documentului HTML in care au fost introduse marcajele pentru text preformatat:

<html>

<head>

<title>Folosirea marcajelor pentru text preformatat</title>

</head>

<body>

<pre>

(a a)

+-------oOO----(_)----- ----- ----+

Text preformatat |

+----- ----- -------------oOO-----+

|__|__|

|| ||

ooO Ooo

</pre>

</body>

</html>

Figura 15. Efectul folosirii marcajului pentru text preformatat.

LINE BREAK (Sfarsitul de linie)

Limbajul HTML pune la dispozitia creatorului de documente HTML un marcaj cu ajutorul caruia se poate forta incheierea liniei. Sintaxa acestuia este:

linie <br>

Acest marcaj nu are nevoie de un marcaj de incheiere.

Efectul folosirii acestui marcaj este evident in exemplul urmator.

- sursa:

<html>

<head>

<title>Folosirea marcajului de sfirsit de linie</title>

</head>

<body>

Linia 1 <br>

Linia 2 <br>

Linia 3 <br>

Linia 4 <br>

</body>

</html>

Figura 16. Efectul folosirii marcajelor de sfarsit de linie.

TEXT FORMATTING (Formatarea textului)

Una din cele mai importante caracteristici ale oricarei tehnoredactari - in Web sau pe hartie - este utilizarea diverselor corpuri de litera (sau fonturi) si stiluri pentru al ajuta pe cititor sa parcurga materialul. Limbajul HTML pune la dispozitia creatorului de documente HTML un arsenal impresionant de marcaje care acopera toate posibilitatile de formatare a unui text: scrierea cu caractere ingrosate, inclinate, posibilitatea de subliniere a cuvintelor, posibilitatea de scriere cu caractere egal spatiate, utilizarea dimensiunilor diferite pentru litere, a corpurilor de litere diferite, precum si posibilitatea de colorare a cuvintelor din cadrul unui paragraf.

In continuare se trece la definirea marcajelor sus mentionate:

- marcajul pentru scrierea inclinata (italica) are sintaxa:

- marcajul pentru scrierea ingrosata (aldina = bold) are sintaxa:

- daca se doreste sublinierea textului se va folosi marcajul de subliniere cu urmatoarea sintaxa:

In exemplul urmator vor fi folosite toate cele trei tipuri de formatare a textului, care au fost mentionate mai sus:

<html>

<head>

<title>Folosirea marcajelor de formatare a textului</title>

</head>

<body>

<p>

Acesta este un paragraf demonstrativ in care au fost folosite marcajele pentru <i>text inclinat</i>, <b>text ingrosat</b> si <u>text subliniat</u>

</p>

</body>

</html>

Figura 17. Efectul folosirii marcajelor de formatare a textului.

- marcajul pentru spatierea egala a literelor are urmatoarea sintaxa:

Fiecare litera egal spatiata ocupa exact aceeasi latime, chiar daca litera respective este mai lata sau mai ingusta. Textul egal spatiat seamana de obicei, cu un text scris la masina. Literele egal spatiate sunt mai rar folosite, corpurile de litera proportionale fiind cele preferate atat ca estetica cat si ca economie de spatiu. Exemplul urmator lamureste cele prezentate mai sus:

- sursa:

<html>

<head>

<title>Folosirea marcajului monospatiu</title>

</head>

<body>

<p><b>Proportional</b><br>Aceste paragrafe scot in evidenta diferenta dintre fonturile proportionale si cele monospatiu</p>

<p><b><tt>Monospatiu</tt></b><br><tt>Aceste paragrafe scot in evidenta diferenta dintre fonturile proportionale si cele monospatiu</tt></p>

</body>

</html>

Figura 18 Efectul folosirii marcajului pentru spatiere egala.

- marcaj pentru scrierea indicilor inferiori, are sintaxa :

- marcaj pentru scrierea indicilor superiori, are sintaxa :

Efectul acestor ultime doua marcaje se prezinta in figura 19.

O extensie recenta a limbajului HTML faciliteaza una dintre cele mai atractive posibilitati: cea de a modifica dimensiunea, culoarea si corpul de litera utilizat. Dimensiunile corpurilor de litera HTML variaza de la 1 la 6, 1 fiind cel mai mic, iar 6 cel mai mare. Din pacate, aceasta notatie este exact inversa in comparatie cu numararea dimensiunii subtitlurilor, in care subtitlul <H1> este cel mai mare, iar <H6> este cel mai mic.

Figura 19. Efectul folosirii marcajelor pentru indicii superiori si inferiori.

Toate modificarile caracteristicilor corpului de litera se fac prin diverse variante ale marcajului <FONT>, acesta fiind un marcaj care contine atribute specifice.

- atributul pentru schimbarea marimii fontului este "size", iar folosirea lui se face conform sintaxei de mai jos:

- atributul pentru schimbarea culorii fontului este "color", iar folosirea lui se face conform sintaxei de mai jos:

- atributul pentru schimbarea corpului de litera este "face", iar folosirea lui se face conform sintaxei de mai jos:

Acest ultim atribut este un atribut inselator, deoarece trebuie sa fie specificat numele exact al fontului de pe sistemul utilizatorului, dar ele au nume diferite pe platforme diferite. De exemplu, pe masini Macintosh, fontul standard este "Times", pe masini Windows 95, fontul echivalent se numeste "Times Roman". Calculatoarele actuale includ multe tipuri de fonturi, dar din pacate nu exista o standardizare a numelor acestora.

Cele trei atribute pot fi aplicate simultan unui text folosind urmatoarea sintaxa:

Mai jos este prezentat un exemplul de folosire a atributelor pentru corpurile de litera:

<html>

<head>

<title>Formatarea textului</title>

</head>

<body>

<p align=justify>Acesta este un paragraf in care nu se schimba formatarea prestabilita a a textului</p>

<font size=5>In acest paragraf marimea fontului a fost schimbata in 5</font></p>

<font color=red>Paragraful acesta are culoarea rosie</font></p>

<font face='arial'>Aici se schimba fontul in Arial</font></p>

<font face='helvetica' size=1 color=green>Acest ultim paragraf inglobeaza toate atributele pentru formatarea fontului</font></p>

</body>

</html>

Figura 20. Efectul folosirii atributelor de formatare a fontului.

Caractere speciale

Limbile straine contin diverse caractere speciale, numite diacritice, care trebuie uneori folosite, in special daca aveti intentia sa prezentati materialul in alta limba decat engleza. Deloc surprinzator, limbajul HTML, permite includerea caracterelor speciale in codul HTML, utilizand marcaje speciale, numite entitati sau referinte de entitati.

Spre deosebire de marcajele expuse pana acum, entitatile pentru caractere speciale nu sunt incluse in paranteze unghiulare (<>); ele incep intotdeauna cu un ampersand (&) si se termina cu punct si virgula (;), dupa cum se poate vedea si mai jos:

&mnemonica;

Caracterele speciale sunt listate in Anexa 1.

Nota: Nu toate programele de navigare pot afisa aceste caractere Inainte de a utiliza diacriticele in propriile redactari de pagini Web este bine de verificat daca cele mai importante navigatoare folosite le accepta !

UNIFORM RESURSE LOCATOR (URL-uri)

Un Descriptor Uniform de Resurse (Uniform Resource Locator) este un descriptor unic care poate identifica orice document (simplu sau hipertext) - imagine grafica, meniu sau element de Gopher, articol Usenet, calculator sau chiar o arhiva de fisiere - oriunde in Internet sau pe masina locala. Aceasta proprietate face ca URL-urile sa fie valoroase, desi formatul lor ar putea fi la prima vedere, putin confuz si criptic. Pe intelesul tuturor, URL-urile sunt un fel de carti de vizita pentru resursele disponibile in retea.

Ca regula generala, un URL este compus din urmatoarele elemente:

serviciu :// nume_gazda : port / cale / fisier

unde serviciu poate fi:

file un fisier de pe masina locala

ftp descrie un server ftp

http descrie un server Web

telnet o conectare prin serviciul TELNET al unui server

mailto se foloseste pentru indicarea unei adrese de posta electronica

Nu toate componentele din descrierea unui URL sunt necesare. De exemplu, port-ul nu trebuie specificat decat atunci cand serverul apelat foloseste pentru serviciul pe care il cerem un alt port decat cel stabilit implicit (pentru http,de exemplu, se foloseste implicit portul 80).

LINK (Legaturi catre alte pagini Web)

Marcajul principal pentru legaturi catre pagini externe este <A>, marcajul ancora (anchor). Sintaxa marcajului pentru legaturi este:

Marcajul pentru legaturi trebuie sa contina neaparat atribute. In figura 21 este folosit marcajul pentru legaturi fara atribut, secventa de cod introdusa pentru obtinerea figurii 21 fiind urmatoarea:

<html>

<head>

<title>Efectul folosirii marcajului pentru legaturi fara atribute</title>

</head>

<BODY>

Daca atributele marcajului pentru legaturi ar fi fost folosite cuvintul <a>LEGATURA<a> ar fi aparut subliniat si eventual cu alta culoare.

</p>

</body>

</html>

Figura 21 Marcaj pentru legaturi folosit incorect.

O alta problema devenita clasica in codul HTML este utilizarea gresita a simbolurilor rotunjite pentru ghilimele, in locul simbolurilor drepte: serverele Web nu fac diferenta intre cele doua tipuri de ghilimele. Trebuie verificat daca ghilimele din documentele HTML create sunt toate drepte: "asa" si nu "asa". Acelasi lucru e valabil si pentru apostrof.

In continuare se da un exemplu de folosire corecta a marcajului pentru legaturi. Codul folosit este urmatorul, iar rezultatul poate fi vazut in figura 22:

<html>

<head>

<title>

Efectul folosirii corecte a marcajului pentru legaturi

</title>

</head>

<body>

<p align=justify> De aceasta data atributele marcajului pentru legaturi au fost folosite cuvintul <a href='193.226.10.61'> LEGATURA </a> a aparut subliniat si are culoarea albastra.</p>

</body>

</html>

Figura 22. Folosirea corecta a marcajului pentru legaturi.

Legaturile catre informatii non-Web

Pentru a face o legatura catre un document care nu este un document Web, trebuie doar sa folosim un URL adecvat.

Pentru legatura cu un server FTP se foloseste urmatoarea sintaxa:

Pentru realizarea legaturii cu un server prin serviciul TELNET se foloseste urmatoarea sintaxa:

Pentru realizarea lagaturi in scopul trimiterii unei scrisori prin posta electronica din cadrul unei pagini Web se foloseste urmatoarea sintaxa:

Exemplul urmator inglobeaza toate tipurile de legaturi discutate pana acum:

<html>

<head>

<title>Exemplu de legaturi</title>

</head>

<body>

<h3 align=center>Folosirea legaturilor in paginile Web</h3>

<ul>

Departamentul de Masurari si Electronica Optica

</a></ul>

<ul>

Serverul FTP din aceasta incapere

</a></ul>

<b>TELNET</b>

<ul>

Serviciul Telnet oferit de acelasi server

</a></ul>

<ul>

Scrieti un mail cui vreti voi

</a></ul>

</body>

</html>

Nota: In codul sursa ce a fost listat mai sus apar si cateva marcaje noi (<ul>, <li>), care nu au fost inca prezentate. Acestea au fost folosite pentru o evidentiere cat mai clara a marcajelor pentru legaturi si se va reveni pe larg asupra lor in prezentarea viitoare.

Figura 23. Folosirea marcajului pentru legaturi.

URL-uri relative

Pana in acest moment s-a aratat cum pot fi realizate legaturile (link-urile) catre pagini Web ce exista pe alte servere. Ceea ce a mai ramas de prezentat aici este modul in care pot fi realizate legaturile catre pagini Web aflate pe serverul propriu.

Exista doua feluri de a realiza o legatura catre un document intern (document de pe serverul propriu): un mod simplu si unul mai complicat.

Modul complicat se bazeaza pe exemplele precedente: punem in evidenta URL-urile complete ale fiecarei pagini si utilizam acele URL-uri ca marcaje de legatura hipertext.

Modul simplu de realizare a unei legaturi catre un alt document de pe propriul calculator consta in specificarea doar a numelui de document sau a cai si numelui sau.

Se considera in continuare urmatorul exemplu: exista o pagina pagina1.html si o alta pagina numita pagina2.html. Se doreste realizarea unei legaturi care sa ne duca din prima pagina in cea de a doua. Pentru aceasta se scrie urmatorul cod HTML:

<html>

<head>

<title>Exemplu de legaturi</title>

</head>

<body>

<h3 align=center>Din aceasta pagina se face saltul</h3>

<ul>

<li>Legatura catre <a href='pagina2.htm'> pagina 2 </a>

</ul>

</body>

</html>

Figura 24. Pagina 1 - originea.

Figura 25. Pagina 2 - destinatia.

In acest moment, ceea ce ar trebui sa nu se piarda din vedere, este posibilitatea de reintoarcere la pagina anterioara, pentru ca navigarea intre pagini sa fie cat mai usoara. Exista o modalitate foarte simpla de intoarcere la pagina anterioara si care este aratata tot printr-un exemplu:

Figura 26. Adaugarea legaturii de intoarcere la pagina anterioara

<html>

<head>

<title>Pagina 2</title>

</head>

<body>

<p align=justify>Aici ajungem daca facem un click cu butonul soarecului pe legatura din pagina anterioara </p>

<hr>

Legatura inapoi la <a href='pagina1.htm'> pagina 1 </a>

</body>

</html>

Legaturi interne in cadrul documentelor

Aceste legaturi sunt utile atunci cand dorim sa adaugam unui document Web, de dimensiuni mari, un cuprins, pentru a permite deplasarea rapida la paragrafele aceluiasi document.

Pentru realizarea legaturilor dorite, se foloseste tag-ul despre care am vorbit si pana acum si anume <a>. Bineinteles ca atributele acestui marcaj constituie elementele esentiale pentru realizarea corecta a legaturilor in cadrul documentelor. Atributele in cauza sunt doua : href=#nume si name=nume. Primul atribut defineste saltul spre locul pe care il marcheaza cel de-al doilea atribut. Sintaxa pentru folosirea acestor atribute este urmatoarea:

pentru definirea saltului:

unde nume este un cuvant sugestiv care se refera la sectiunea la care se va face saltul, fiind scris cu litere mici (minuscule);

pentru marcarea locului unde se va face saltul:

unde nume este acelasi cuvant ca si mai sus, el fiind elementul ce asigura legatura intre originea si destinatia saltului.

In cele ce urmeaza, pentru ca lucrurile sa fie mai clare, este dat un exemplu edificator. In sursa de mai jos, prin scriere cu caractere ingrosate, a fost evidentiat modul de folosire a marcajelor:

<html>

<head>

<title>Legaturi interne</title>

</head>

<body>

<h3 align=center>Folosirea legaturilor in cadrul paginilor Web</h3>

|<a href=#web>Web</a>|

<a href=#ftp>FTP</a>|

<a href=#telnet>TELNET</a>|

<a href=#mail>MAIL</a>|<br>

</font>

</center>

<a name=web>

<b>Web</b></a>

<ul>

Departamentul de Electroenergetica

</a></ul>

<a name=ftp>

<b>FTP</b></a>

<ul>

Serverul FTP din aceasta incapere

</a></ul>

<a name=telnet>

<b>TELNET</b></a>

<ul>

Serviciul Telnet oferit de acelasi server

</a></ul>

<a name=mail>

<b>MAIL</b></a>

<ul>

Se trimite un mail la web-masterul serverului Edison

</a></ul>

</body>

</html>

Rezultatul executiei acestui cod este vizibil in figura 27.

Figura 27. Legaturi in cadrul aceluiasi document.

O idee de care trebuie sa se tina seama este aceea ca pozitia exacta a a marcajului ce precizeaza locul saltului, la afisare se pozitioneaza chiar in partea superioara a ferestrei navigatorului.

Includerea imaginilor in paginile Web

Din multitudinea de formate de imagini existente, majoritatea navigatoarelor Web accepta, din diverse motive, urmatoarele doua tipuri:

GIF: Graphics Interchange Format introdus de Compuserve;

JPEG: formatul introdus de Joint Photographic Expert Group.

Cateva din caracteristicile celor doua formate sunt: imaginile GIF pot utiliza doar 256 de culori, pe cand JPEG permit milioane de culori distincte intr-o imagine. Ambele formate grafice comprima imaginile pentru a reduce dimensiunea fisierelor, dar deoarece comprimarea se face diferit, unele imagini vor avea dimensiuni mult mai mici intr-un format decat in celalalt.

La ora actuala cel mai utilizat format pentru imaginile din paginile Web este formatul GIF si aceasta nu pentru ca are o paleta de culori mica, ci pentru ca se poate reduce aceasta paleta pana la minimul necesar pentru o imagine specifica, ceea ce duce la o scadere considerabila a dimensiunii fisierului.

Includerea imaginilor intr-un document Web este imediata daca utilizam marcajul <IMG>. La fel ca si tag-ul ancora <A>, marcajul <IMG> are un singur atribut esential, SRC=nume_imagine si, la fel ca linia de separatie orizontala <HR>, nu are marcaj pereche. Sintaxa de folosire este:

unde nume_imagine este numele fisierului ce contine calea si numele fisierului cu imaginea ce se doreste a fi introdusa.

In cele urmeaza, este prezentat un exemplu de folosire corecta a marcajului pentru introducerea imaginilor:

<html>

<head>

<title>Introducerea imaginilor in pagini Web</title>

</head>

<body>

<p align=justify>Imaginea de mai jos a fost introdusa cu ajutorul marcajului pentru introducerea imaginilor:</p>

</body>

</html>

Ceea ce se obtine prin scrierea liniilor de cod de mai sus este vizibil in figura 28.

Figura 28. Introducerea imaginilor in documente HTML

Un al doilea atribut al marcajului <img> este atributul ALIGN care ofera un control precis al alinierii celorlalte elemente din cadrul unui document HTML in raport cu imaginea. Atributul ALIGN permite trei alinieri standard:

aliniere sus: align=top

aliniere la mijloc: align=middle

aliniere jos: align=bottom

In continuare este exemplificat modul concret de implementare a celor trei tipuri de aliniere in urmatorul cod HTML:

<html>

<head>

<title>Alinierea elementelor</title>

</head>

<body>

<h4>Aliniere sus</h4>

Tipul asta trage un carut dupa el

<h4>Aliniere la mijloc</h4>

Tipul asta trage un carut dupa el

<h4>Aliniere jos</h4>

Tipul asta trage un carut dupa el

</body>

</html>

Ceea ce se obtine in urma scrierii codului de mai sus este vizibil in figura 29.

Figura 29. Alinierea textului langa o imagine,

La ora actuala, una din situatiile des intalnite este aceea in care imaginea serveste la realizarea legaturilor catre diverse URL-uri. Astfel calitatea paginilor Web creste considerabil.

Folosirea imaginilor pentru a indica legaturi catre diverse URL-uri, este posibila daca combinam cele doua marcaje, cel de tip ancora pentru realizarea legaturilor si cel pentru introducerea imaginilor in documentele HTML. Concret combinarea celor doua tag-uri se face astfel:

Liste

Listele sunt elemente ce dau o forma atractiva unei pagini Web. Exista trei tipuri de liste ce pot fi implementate intr-o pagina Web:

liste pentru definitii;

liste neordonate;

liste ordonate.

In continuare vor fi descrise pe rand marcajele care fac posibila implementarea fiecarui tip de lista.

Liste pentru definitii

Listele pentru definitii sunt utile atunci cand documentul HTML contine, de exemplu, informatii despre denumirea si definirea unor termeni dintr-un domeniu oarecare de activitate. Sintaxa marcajului pentru astfel de liste este urmatoarea:

<dl>

<dt> termen ce urmeaza a fi definit

<dd> definitie

</dl>

In continuare, se prezinta un exemplu de folosire a unei liste pentru definitii, exemplu care se refera la o pagina Web destinata unui dictionar englez-roman. Codul HTML care duce la obtinerea figurii 30 este:

<html>

<head>

<title>Dictionar englez-roman</title>

</head>

<body>

<dl>

<dd>1.strat de vopsea,2.atingere usoara,3. (vb.) a unge <hr>

<dt><b>dad, daddy</b>

<dd>taticu <hr>

<dt><b>daffodil</b>

<dd>narcisa galbena<hr>

<dt><b>dahlia</b>

<dd>dalie<hr>

<dt><b>daily</b>

<dd>1. ziar, 2. femeie cu ziua, 3. zilnic<hr>

</dl>

</body>

</html>

Figura 30. Exemplu de folosire a unei liste pentru definitii.

Liste neordonate (marcate cu bulina)

Cu toate ca listele pentru definitii sunt utile, totusi ele nu sunt foarte folosite in cadrul paginilor Web. Un tip de lista foarte des intalnit in paginile Web este lista neordonata (marcata cu bulina). Sintaxa marcajului pentru listele neordonate este data in cele ce urmeaza:

<ul>

<li> element din lista

</ul>

Dupa cum se poate observa in exemplul urmator, modul de folosire a listelor neordonate intr-un document HTML este simplu, iar efectul pe care il are asupra paginii Web este vizibil in figura 31:

<html>

<head>

<title>Folosirea listelor neordonate</title>

</head>

<body>

<i>Exemplu de folosire a listelor neordonate</i>

<ul>

<li> elementul 1 al listei

<li> elementul 2 al listei

<li> elementul 3 al listei

<li> elementul 4 al listei</ul>

</body>

</html>

Figura 31. Lista neordonata.

Liste ordonate

Aceasta lista este foarte asemanatoare cu lista neordonata, atata doar ca in fata elementelor componente ale listei, in loc de buline (bullets) sunt puse numere care stabilesc ordinea de prioritate a componentelor respective. Sintaxa de folosire a marcajelor pentru listele ordonate este urmatoarea:

<ol>

<li> element din lista

</ol>

Marcajele pentru listele ordonate si neordonate pot fi folosite combinat, efectul lor asupra paginii Web fiind vizibil in exemplul urmator:

<html>

<head>

<title>Dictionar englez-roman</title>

</head>

<body>

<ol>

<ul>

<li>strat de vopsea,

<li>atingere usoara,

<li>(vb.) a unge

</ul>

<li><b>dad, daddy</b>

<ul>

<li>taticu

</ul>

<li><b>daily</b>

<ul>

<li>ziar,

<li>femeie cu ziua,

<li>zilnic

</ul>

</ol>

</body>

</html>

Figura 32. Folosirea combinata a listelor ordonate cu a celor neordonate.

Tabele

Tabelele reprezinta o extensie importanta a limbajului HTML, avandu-si originea in laboratoarele de cercetare ale firmei "Netscape Communications". Dar, spre deosebire de tabelele din procesoarele de text, folosirea tabelelor HTML este mai complicata si deci solicitanta.

Pentru a putea descrie marcajele HTML folosite la constructia tabelelor din paginile Web, este necesara stabilirea foarte exacta a elementelor de baza ale unui tabel : ele sunt liniile si celulele. Suprapunerea mai multor celule formeaza coloanele unui tabel. Toate aceste elemente sunt usor vizibile in figura 33.

	Aceasta
<---- Aceasta ----	este -------	o ----------	linie ----->
	o
	coloana		Este o celula

Figura 33. Elementele de baza ale unui tabel.

Marcajele esentiale pentru realizarea unui tabel dintr-un document HTML sunt:

<table>

marcajul ce defineste inceputul unui tabel. Elementele tabelului (liniile si celulele) trebuie cuprinse intre marcajul de inceput si cel de sfarsit </table>;

<tr>

defineste o linie a tabelului (Table Row). Celulele unei linii trebuie cuprinse intre marcajul de inceput si cel de sfarsit </tr>;

<td>

specifica o celula si are si el un marcaj de incheiere (</td>). Intre cele doua marcaje se aseaza continutul celulei.

Urmatorul cod HTML prezinta modul de constructie a unui tabel dintr-o pagina Web:

<html>

<head>

<title>Primul tabel</title>

</head>

<body>

<h3>Acesta ar trebui sa fie primul tabel</h3>

<table>

<tr>

<td>celula1</td>

<td>celula2</td>

<td>celula3</td>

</tr>

</table>

</body>

</html>

Rezultatul scrierii acestui cod este vizibil in figura 34.

Figura 34 Primul tabel fara folosirea atributului border.

Ceea ce ar trebui sa se vada acolo, nu este si ceea ce ar fi trebuit sa se obtina : un tabel frumos, cu margini exact ca cel din figura 33. Si totusi in principiu nu s-a gresit prea mult la scrierea codului HTML, atata doar ca ar fi trebuit utilizat atributul border. In continuare se prezinta sintaxa pentru folosirea acestui atribut:

<table border = un_nr_>_0> tabel </table>

Efectul folosirii atributului border in document HTML de mai jos este vizibil in figura 35, in sursa anterioara fiind introdusa modificarea tag-ului <table> cu tag-ul <table border=1>

Figura 35. Forma tabelului dupa folosirea atributului border .

Pana acum s-a aratat cum se poate crea o linie si mai multe celule intr-un tabel. In continuare se prezinta ce trebuie facut pentru ca intr-un tabel sa se obtine o coloana. Pentru coloane nu exista un marcaj special, ci trebuie doar sa se utilizeze marcajele cunoscute deja, asa cum se poate urmari in exemplul urmator :

<html>

<head>

<title>Aranjarea celulelor pe coloana</title>

</head>

<body>

<tr>

<td>celula1</td>

</tr>

<tr>

<td>celula2</td>

</tr>

<tr>

<td>celula3</td>

</tr>

</table>

</body> </html>

In figura 36 este vizualizat rezultatul executiei codului de mai sus:

Figura 36 Dispunerea intr-un tabel a celulelor pe coloana.

Acum, dupa prezentarea elementelor introductive necesare, este momentul realizarii unui tabel in adevaratul sens al cuvantului. In acest scop este scris urmatorul cod HTML:

<html>

<head>

<title>Primul tabel adevarat</title>

</head>

<body>

<tr>

<td>celula1</td>

<td>celula2</td>

<td>celula3</td>

</tr>

<tr>

<td>celula4</td>

<td>celula5</td>

<td>celula6</td>

</tr>

</table>

</body>

</html>

Figura 37. Referitoare la un tabel adevarat.

Un lucru util, care merita atentie, este controlul latimii tabelului astfel incat continutul sau sa nu apara inghesuit. Pentru realizarea acestui deziderat se folosesc trei atribute ale marcajului de baza <table> si anume: width, cellpadding si cellspacing.

Atributul width permite specificarea latimii exacte a tabelului de pe ecran, indiferent de continut lui. Latimea poate fi specificata fie ca procent din latimea totala a ferestrei curente de vizualizare, fie prin numarul de pixeli atribuit ei. Sintaxa de folosire a atributului width este urmatoarea:

unde n este numarul de pixeli sau de procente stabilit pentru latimea tabelului.

Daca in codul HTML ce a generat figura 36, se introduce width=75% se obtine rezultatul din figura 38:

Figura 38 Tabelul care ocupa 75% din fereastra.

Celelalte doua atribute, cellpadding si cellspacing, par la o prima vedere similare, dar la redactarea tabelelor ele servesc unor scopuri importante si distincte. cellpadding indica - in pixeli - spatiul dintre marginea interioara a chenarului unei celule si continutul celulei, pe cand cellspacing se refera la latimea liniilor de caroiaj dintre celulele date. Diferenta dintre cele doua atribute este vizibila in figura 39.

Figura 39 Diferenta dintre cellpadding=10 si cellspacing=10

In cadrul unui tabel, pe langa specificarea liniilor, prin tag-ul <tr> si a celulelor prin tag-ul <td>, mai pot fi specificate si antetele pentru linii si coloane, prin marcajul <th> (care inlocuieste marcajul <td> in definitia liniei). Marcajul <th> este aproape identic cu <td>, cu doua exceptii semnificative : textul din cadrul unui marcaj <th> este scris cu bold si este centrat orizontal in celula. In continuare este oferit un exemplu de folosire a marcajului <th>

<html>

<head>

<title>Folosirea marcajului TH</title>

</head>

<body>

<tr>

<th>denumire linie</th>

<td>celula1</td>

<td>celula2</td>

<td>celula3</td>

</tr>

<tr>

<th>denumire linie</th>

<td>celula4</td>

<td>celula5</td>

<td>celula6</td>

</tr>

</table>

</body>

</html>

Ceea ce se obtine este vizibil in figura 40 :

Figura 40. Folosirea marcajului <th>.

Pentru controlul cat mai amanuntit al reprezentarii grafice a tabelelor, marcajele folosite pentru definirea celulelor si liniilor au si ele atribute corespunzator definite. In continuare sunt prezentate cele mai importante atribute din aceasta categorie:

align

este folosit pentru alinierea pe orizontala a textului din celula. Are ca parametrii align=left (aliniere la stanga celulei), align=center (centrare in celula), align=right (aliniere la dreapta celulei);

valign

este folosit pentru alinierea pe verticala a textului in celule; de exemplu, parametrul valign=top - folosit ca atribut al unei marcaj de linie - face ca toate celulele din linie sa contina informatie aliniata in partea superioara a celulelor respective, in loc de optiunea implicita de centrare pe verticala. Parametrii pentru valign sunt: top - sus , middle - centrat si bottom - jos;

colspan

este folosit pentru a extinde o celula pe mai multe coloane. Modul de folosire al acestui atribut este colspan=nr_coloane;

rowspan

este folosit pentru a extinde o celula pe mai multe linii. Modul de utilizare al acestui atribut este rowspan='nr_linii;

bgcolor

este folosit pentru fixarea culorii fundalului unei linii sau celule. Modul de utilizare este bgcolor=culoare

In continuare este prezentat codul HTML pentru constructia unui tabel complex in care sunt folosite majoritatea marcajelor pentru tabele impreuna cu atributele corespunzatoare :

<html>

<head>

<title>Constructie tabel complicat</title>

</head>

<body>

<tr>

<td colspan=2>titlu peste doua coloane</td>

</tr>

<tr>

<th bgcolor=blue>Albastru</th>

<th bgcolor=yellow>Galben</th>

<th bgcolor=green>Verde</th>

</tr>

<tr>

<td align=left>celula1</td>

<td align=left>celula2</td>

<td align=left>celula3</td>

<td align=left>celula4</td>

</tr>

<tr>

<td align=center>celula5</td>

<td align=center>celula6</td>

<td align=center>celula7</td>

<td align=center>celula8</td>

</tr>

<tr>

<td align=right>celula9</td>

<td align=right>celula10</td>

<td align=right>celula11</td>

<td align=right>celula12</td>

</tr>

<tr>

<td colspan=4 align=center>titlu peste patru coloane</td>

</tr>

</table>

</center>

</body>

</html>

Rezultatul acestui cod este vizibil in figura 41.

Figura 41. Referitoare la un tabel complex.

Crearea tabelelor cu ajutorul marcajelor HTML pare a fi o activitate enorm de complicata.

Exista totusi o modalitate de simplificare a muncii, atunci cand in pagina Web se urmareste introducerea unui tabel. Pentru a explica aceasta cale de lucru, se considera tabelul din exemplele anterioare. In acest caz, se incepe cu desenarea pe hartie a tabelului in cauza. Pe desenul obtinut, in fiecare celula se ataseaza marcajele HTML necesare, rezultand urmatoarea reprezentare :

<tr>	<td colspan=2>		<td colspan=2>		</tr>
<tr>	<th bgcolor=red>	<th bgcolor=blue>	<th bgcolor=yellow>	<th bgcolor=green>	</tr>
<tr>	<td align=left>	<td align=left>	<td align=left>	<td align=left>	</tr>
<tr>	<td align=center>	<td align=center>	<td align=center>	<td align=center>	</tr>
<tr>	<td align=right>	<td align=right>	<td align=right>	<td align=right>	</tr>
<tr>	<td colspan=4 align=center>				</tr>

Daca se compara acest tabel cu codul HTML asociat figurii 41, se constata ca tabelul de mai sus este de fapt implementarea grafica intuitiva a codului sursa in discutie.

In concluzie, este bine ca de fiecare data cand se doreste introducerea un tabel intr-o pagina sa se procedeze in modul descris mai sus. Astfel, riscurile de a gresi la scrierea codului se reduc la minim.

FRAMES (Cadre)

La fel ca si in cazul folosirii listelor si tabelelor in documentele HTML, utilizarea cadrelor (frames), aduce un plus de atractivitate si claritate paginilor Web. In esenta, o pagina Web care contine cadre, este de fapt o pagina multipla care include in ea mai multe pagini simple.

Impartirea unei pagini Web in cadre este principial usor de realizat: fiecare cadru trebuie sa fie un document HTML complet. De exemplu, daca se doreste impartirea paginii Web in doua cadre asezate unul langa altul, atunci trebuie sa se scrie un document HTML complet in cadrul din dreapta si un alt document HTML complet in cadrul din stanga. In plus este nevoie si de un al treilea document HTML (documentul principal) care va contine marcajele specifice ale cadrelor in cauza.

Tag-ul principal pentru obtinerea cadrelor este: <frameset> cu tag-ul de incheiere </frameset>. Acest marcaj se va gasi in documentul principal si va inlocui marcajul <body> al acestuia. Marcajul <frameset> are doua atribute principale: rows si cols.

rows - acest atribut specifica impartirea ecranului in cadre orizontale, iar parametrii acestui atribut specifica dimensiunea cadrelor. Dimensiunea poate fi data atat in pixeli cat si in procente din dimensiunea ecranului.

cols - acest atribut specifica impartirea ecranului in cadre verticale, iar parametrii acestui atribut specifica dimensiunea cadrelor. Dimensiunea poate fi data atat in pixeli cat si in procente din dimensiunea ecranului.

Al doilea marcaj important pentru definirea cadrelor este marcajul <frame>. Acest marcaj nu necesita un tag de incheiere si are urmatoarele atribute:

name - acest atribut denumeste cadrul curent. Poate fi folosit drept tinta pentru referire.

src - defineste sursa care se incarca in cadrul respectiv.

noresize - cand este prezent acest atribut atunci dimensiunea cadrului nu este modificabila.

scrolling - folosirea acestui atribut da posibilitatea cadrului in cauza sa aiba sau sa nu aiba bare de derulare. Acest atribut are trei valori:

auto - barele de derulare sunt prezente numai atunci cand este necesar;

yes - barele de derulare exista in permanenta;

no - barele de derulare nu sunt afisate.

frameborder - permite validarea sau invalidarea afisarii unui chenar in jurul cadrului. Are doi parametrii:

0 - cadrul nu are chenar;

1 -cadrul are chenar.

marginwidth - cu ajutorul acestui atribut se specifica distanta dintre cadru si marginea din dreapta, respectiv cea din stanga a unui element din interiorul lui.

marginheight - cu ajutorul acestui atribut se specifica distanta dintre cadru si partea de jos, respectiv cea de sus a unui element din interiorul sau.

In continuare se exemplifica modul de folosire a marcajelor prezentate mai sus, precum si influenta pe care o au atributele acestor marcaje asupra cadrelor. In acest scop, pentru inceput, se vor crea doua fisiere HTML cu urmatorul continut:

primul document HTML:

<html>

<head><title>Cadrul 1</title></head>

<body>

<h1>Pagina 1</h1>

</body>

</html>

cel de al doilea document HTML:

<html>

<head><title>Cadrul 2</title></head>

<body>

<h1>Pagina 2</h1>

</body>

</html>

Documentul HTML principal care contine referiri la cele doua documente de mai sus are urmatoarea forma:

<html>

</frameset>

</html>

Rezultatul codului de mai sus este vizibil in figura 42:

Figura 42. Impartirea unei pagini Web in doua cadre verticale

Se observa modul in care a fost specificata impartirea documentului HTML in doua cadre verticale prin folosirea atributului cols='50%,*': fereastra navigatorului este impartita in doua cadre verticale, primul dintre ele va ocupa 50% din fereastra, iar cel de-al doilea ceea ce mai ramane, aceasta specificare facandu-se cu ajutorul caracterului "*".

Daca in loc de atributul cols='50%,*', s-ar folosi atributul rows='100,*' s-ar obtine ceea ce se vede in figura 43:

Figura 43. Impartirea paginii Web in doua cadre orizontale

De aceasta data dimensiunea cadrului din partea de sus a ecranului a fost data in pixeli.

In continuare se va modifica putin documentul HTML principal, asa cum se observa mai jos:

<html>

</frameset>

</html>

Dupa cum se poate observa in programul sursa de mai sus, de aceasta data documentul HTML va contine o imagine cu urmatoarele dimensiuni: 576 de pixeli pe orizontala si 85 de pixeli pe verticala. Aceasta imagine va fi incarcata de programul de navigare in cadrul din partea superioara a ferestrei navigatorului, cadru caruia i-a fost fixata o dimensiune de 85 de pixeli.

In acest moment se asteapta ca fereastra navigatorului sa contina doua cadre:

unul in care se gaseste inscrisa frumos, conform celor specificate la definirea cadrului de sus, imaginea dorita;

cel de-al doilea continand al doilea document HTML.

Insa, rezultatul dorit, vizibil in figura 44 nu coincide cu cel asteptat datorita barelor de derulare verticale. Daca insa, s-ar folosi atributul scrolling cu parametrul no este de asteptat ca situatia sa se imbunatateasca. Rezultatul dupa aceasta schimbare este vizibil in figura 45.

Figura 44. Barele de derulare creeaza probleme

Figura 45. Folosirea parametrilor atributului scrolling

Situatia s-a imbunatatit, dar inca mai sunt probleme. Cu toate ca s-a specificat dimensiunea cadrului din partea superioara a ecranului sa fie la fel de mare ca si imaginea pe care se doreste sa se includa in cadru, aceasta din urma, inca nu se incadreaza in cadru. Acest fapt se datoreaza distantei dintre imagine si marginile cadrului. Pentru a remedia acest neajuns se scrie urmatorul cod:

<html>

</frameset>

</html>

Rezultatul care se obtine in acest caz este vizibil in figura 46:

Figura 46. Combinarea atributelor marcajului <frame>

In cele ce urmeaza este exemplificata o alta modalitate de folosire a cadrelor:

<html>

</frameset>

</html>

Ceea ce rezulta in urma scrierii codului de mai sus este vizibil in figura 47:

Figura 47. Combinarea marcajelor pentru definirea cadrelor

In figura 47, se observa cu usurinta ca acum fiecare cadru este inconjurat de un chenar. Asa cum se observa in urmatorul exemplu, se poate renunta la acel chenar folosind atributul frameborder:

<html>

</frameset>

</html>

Figura 48. Eliminarea chenarului din jurul paginilor.

In cele ce urmeaza se va crea un document HTML asemanator cu cel din figura 48, dar in pagina1.html se adauga o referinta catre o a treia pagina:

<html>

<head><title>Cadrul 1</title></head>

<body>

<h3>Pagina 1</h3>

Link catre<br><a href='pagina3.htm'>pagina 3</a>

</body>

</html>

Pagina 3, nou introdusa are codul similar cu al paginii 2, care a fost prezentat anterior:

<html>

<head><title>Cadrul 3</title></head>

<body>

<h1>Pagina 3</h1>

</body>

</html>

Documentul HTML principal ramane neschimbat:

<html>

</frameset>

</html>

Ceea ce se obtine acum se poate vedea in figura 49:

Figura 49. Adaugarea unei legaturi catre Pagina 3

Figura 50. Dupa realizarea legaturii din pagina 1 catre pagina 3.

Dupa cum se poate observa din figura 50, activarea legaturii din pagina 1 va avea ca efect incarcarea paginii 3 peste pagina 1. Daca insa se doreste ca paginile 2 si 3 sa apara succesiv una peste cealalta in cadrul 2 (din dreapta ferestrei navigatorului), atunci trebuie ca in primul rand sa se dea un nume cadrului comun 2, iar legaturile din pagina 1 trebuie sa aiba ca tinta cadrul comun. Realizarea practica presupune:

modificarea corespunzatoare a codului HTML pentru documentul principal:

<html>

</frameset>

</html>

schimbarea codului HTML al paginii 1:

<html>

<head><title>Cadrul 1</title></head>

<body>

<h3>Pagina 1</h3>

<p>Link catre<br>

<a href='pagina2.htm' target='home'>pagina 2</a><br>

<a href='pagina3.htm' target='home'>pagina 3</a><p>

</body>

</html>

Rezultatul acestor modificari este vizibil in figurile 51, 52, 53:

Figura 51. Ceea ce se obtine cand este incarcat documentul principal

Figura 52.Ceea ce se obtine dupa activarea legaturii catre pagina 2

Figura 53.Ceea ce se obtine activarea legaturii catre pagina 3

FORMS (Formulare)

O optiune foarte utila pentru documentele HTML este posibilitatea lor de a modela formularele cu casete care se intalnesc foarte des in activitatea statisticienilor si a functionarilor publici. Formularele existente in paginile Web, permit utilizatorilor sa introduca efectiv informatii, care apoi sunt direct transmise bazelor de date de pe servere. Calea de comunicare intre programul de navigare Web si server se numeste CGI (Common Gateway Interface).

Exista doua moduri prin care se poate realiza prelucrarea datelor culese cu ajutorul formularelor:

programul de navigare trimite datele la server, iar acesta prin intermediul unui program (script CGI) face prelucrarea lor,
datele sunt trimise catre server prin intermediul unei scrisori electronice (e-mail).

In cele ce urmeaza, este prezentata preluarea datelor extrase din formulare doar prin cea de-a doua metoda (pe calea e-mail-ului), deoarece prima metoda, necesitand cunostinte mai profunde de programare, nu face obiectul prezentului studiu.

Definirea unui formular se face cu ajutorul marcajului <form> care are marcajul pereche </form>. Toate elementele unui formular trebuie sa fie cuprinse in interiorul acestor doua marcaje.

Sintaxa de folosire a marcajului pentru definirea formularelor, in varianta in care datele sunt trimise ca si e-mail este urmatoarea:

elementele formularului

</form>

Elementele din interiorul unui formular se definesc ca si atribute ale marcajului <input>. Definirea elementelor unei liste se face in felul urmator:

Tipul cel mai comun de element este elementul text. Pentru definirea completa a acestui element trebuie sa se tina cont si de alte atribute care completeaza acest element. Acestea sunt:

name

da posibilitatea sa se denumeasca elementul, pentru a fi mai usor de identificat intr-o lista cu mai multe elemente. Acest atribut este disponibil pentru toate celelalte elemente ce pot compune o lista;

value

la fel ca si atributul anterior si acesta este disponibil pentru toate elementele. In cazul elementului TEXT are rolul de a seta o valoare prestabilita care sa apara in casuta de text in mod prestabilit;

size

defineste marimea casetei de text in pixeli;

maxlenght

stabileste numarul maxim de caractere ce pot fi introduse in caseta de text.

In continuare se prezinta modul concret de implementare a unei casete de text. Codul HTML, care are ca rezultat imaginea din figura 54 este:

<html>

<head><title>Formular</title></head>

<body>

Se defineste o caseta de text cu numele 'caseta_text'<br>

Se da o valoare initiala textului din caseta<br>

Se fixeaza marimea casetei la 10 pixeli<br>

Se fixeaza la 10 caractere numarul maxim de caractere ce poate fi introdus<br>

</form>

</body>

</html>

Figura 54. Elementul TEXT cu diferitele sale caracteristici.

Un alt element apropiat de elementul TEXT este PASSWORD. Acest element il putem folosi atunci cand dorim ca textul pe care il introducem sa nu fie vizibil, acesta din urma fiind inlocuit cu caracterul "*" dupa cum se poate vedea in figura 55.

<html>

<head><title>Formular</title></head>

<body>

Introduceti parola:<br>

</form>

</body>

</html>

Figura 55. Caseta de introdus text ascuns.

In anumite formulare ar putea fi nevoie ca la un moment dat sa se aleaga dintr-o lista de variante posibila o anumita varianta. Intr-un formular HTML acest lucru este posibil cu ajutorul butoanelor radio. Modul de folosire al acestui tip de buton este exemplificat in cele ce urmeaza:

<html>

<head><title>Formular</title></head>

<body>

Alegeti varianta corecta:<br>

<input type=radio name='varianta1' value='var1'>Varianta 1<br>

<input type=radio name='varianta2' value='var2'>Varianta 2<br>

<input type=radio name='varianta3' value='var3'>Varianta 3<p>

</form>

</body>

</html>

Figura 56. Folosirea butoanelor RADIO

S-ar putea ca intr-un formular sa fie nevoie sa se aleaga din mai multe variante un anumit numar de variante sau toate variantele. In formularele Web, acest lucru este posibil datorita butoanelor de tipul checkbox.

html>

<head><title>Formular</title></head>

<body>

Alegeti varianta(ele) corecta(e):<br>

<input type=checkbox name='varianta1' value='yes'>Varianta 1<br>

<input type=checkbox name='varianta2' value='yes'>Varianta 2<br>

<input type=checkbox name='varianta3' value='yes'>Varianta 3<p>

</form>

</body>

</html>

Figura 57. Folosirea butoanelor de tip CHECKBOX

Un alt element ce apartine doar formularelor electronice este lista de tipul "Pull Down" Definirea unei astfel de liste se face cu ajutorul marcajului a carei sintaxa este data mai jos:

<option value=valoare>Denumire varianta_1

<option value=valoare>Denumire varianta_2

<option value=valoare>Denumire varianta_n

</select>

Printr-o simpla adaugare a unui atribut, in prima linie a definitiei listei de mai sus lista se transforma intr-o lista derulanta. Atributul este:

size=valoare_numerica,

iar folosirea lui precum si diferenta dintre cele doua liste o putem vedea in figura 58, care este precedata de listingul codului HTML folosit pentru obtinerea ei:

<html>

<head><title>Formular</title></head>

<body>

Alegeti varianta corecta:<br>

<option value='var1'>Varianta 1

<option value='var1'>Varianta 2

<option value='var1'>Varianta 3

<option value='var1'>Varianta 4

<option value='var1'>Varianta 5

<option value='var1'>Varianta 6

</select><br>

Alegeti varianta corecta (lista derulanta):<br>

<option value='var1'>Varianta 1

<option value='var1'>Varianta 2

<option value='var1'>Varianta 3

<option value='var1'>Varianta 4

<option value='var1'>Varianta 5

<option value='var1'>Varianta 6

</select>

</form>

</body>

</html>

Figura 58. Folosirea listelor derulante

O alta varianta de a introduce textul in cadrul unui formular HTML este aceea care foloseste pentru acest lucru marcajul textarea Acest marcaj permite realizarea unei casete de text pe mai multe linii si mai multe coloane. Folosirea acestui marcaj se poate face conform exemplului urmator:

<html>

<head><title>Formular</title></head>

<body>

<textarea name='zona_text' rows=7 cols=54>

</textarea>

</form>

</body>

</html>

In figura 59 se poate observa ceea ce se obtine in urma folosirii marcajului prntru o zona de text.

Ceea ce mai lipseste in acest moment formularelor HTML este un buton de trimitere catre server a intregului formular HTML si unul de aducere in stare initiala a elementelor unui formular.

Primul poate fi obtinut cu ajutorul marcajului:

Al doilea poate fi obtinut cu ajutorul marcajului:

Figura 59. Zona cu text

Exemplul urmator demonstreaza modul de folosire a marcajelor pentru cele doua butoane descrise mai sus:

<html>

<head><title>Formular</title></head>

<body>

<form action=mailto:[email protected]

method=post enctype='text/plain'>

</textarea><br>

</form>

</body>

</html>

Rezultatul este vizibil in figura 60

Figura 60. Folosirea butoanelor submit si reset

Politica de confidentialitate

.com	Copyright © 2024 - Toate drepturile rezervate. Toate documentele au caracter informativ cu scop educational.

Programarea in limbaj HTML - tutorial

Figura 6 Diferenta ce apare la folosirea in mod diferit a atributului WIDTH.

Exemplul urmator inglobeaza toate tipurile de legaturi discutate pana acum:

Nota: In codul sursa ce a fost listat mai sus apar si cateva marcaje noi (<ul>, <li>), care nu au fost inca prezentate. Acestea au fost folosite pentru o evidentiere cat mai clara a marcajelor pentru legaturi si se va reveni pe larg asupra lor in prezentarea viitoare.

Legaturi interne in cadrul documentelor

Aceasta

Figura 33. Elementele de baza ale unui tabel.

valign

Comentarii literare

Personaje din literatura

Tehnica si mecanica

Economie

Geografie