HTML

HTML este limbajul primar utilizat pentru descrierea şi distribuirea documentelor în Internet.
HTML a fost dezvoltat initial de Tim Berners-Lee la CERN in 1989 în încercarea de a oferi
fizicienilor care utilizeaza computere diferite posibilitatea de a schimba informaţie între ei prin
intermendiul Internetului.
Limbajul HTML este un limbaj de marcare care utilizează un set de marcaje sau etichete (tag în
engleză) care sunt utilizate pentru a descrie conţinutul unui document. Documentele HTML
(cunoscute mai ales sub denumirea de pagini web) sunt documente în format ASCII şi prin
urmare pot fi create cu ajutorul oricărui editor de texte (de exemplu Notepad). În timp ce
crearea documentelor HTML cu ajutorul unui editor de texte se poate dovedi utilă mai ales în
faza de deprindere a limbajului, editoarele specializate sunt recomandate datorită facilităţilor
oferite în privinţa productivităţii. Majoritatea acestor editoare permit editarea în modul
WYSIWYG (What you see is what you get). Mai mult, majoritatea programelor care lucrează cu
documente în formate diverse permit convertirea acestora în format HTML în vederea
publicării lor pe Internet.
Marcajele HTML (tag-uri) sunt cuvinte rezervate încadrate de caracterele “<” respectiv “>”
(exemplu de tag: <html>). Aceste sunt de obicei folosite în pereche existând un tag de început şi
unul de sfârşit. Tagul de sfârşit este similar tag-ului de început conţinând în plus caracterul “/”
(exemplu </html>).
Tag-urile HTML nu sunt case sensitive, adică se pot folosi majuscule şi minuscule deopotrivă
pentru editarea aceloraşi valori (<p> este echivalent cu <P>, de exemplu). Consorţiul W3C
recomandă utilizarea minusculelor pentru HTML 4 şi impune minusculele pentru XHTML. În
privinţa spaţiilor şi a liniilor inserate în codul sursă trebuie avut în vedere faptul că în momentul
afişării paginii sunt ignorate spaţiile şi liniile suplimentare. Astfel din mai multe spaţii alăturate
este afişat unul singur. Asemănător, scrierea unui text pe mai multe linii nu are efect asupra
modului în care acesta este afişat în browser (textul este afişat pe o singură linie).
Cele mai multe tag-uri HTML pot avea unul sau mai multe atribute care apar în cadrul tag-ului
de început sub forma
nume_atribut=valoare_atribut
Reguli de sintaxă privind atributele:
Atributele apar în cadrul tagului de început după numele acestuia
Atributul este urmat de semnul „=” şi valoarea acestuia
Valoarea atributului este încadrată de ghilimele („”) sau apostrof
Exemplu:
<img src=”foto.gif” align=”left”>
Valorile atributelor pot îmbrăca forma de text sau valori numerice. În continuare se va prezenta
modul de utilizare a atributelor prin care se precizează culoare pentru diverse elemente HTML.
Culorile pot fi precizate utilizând una din următoarele metode:
-numele culorii (de exemplu: color=”red”)
-codul culorii în format hexazecimal. În acest caz codul este precedat de semnul # (de
exemplu: color=#FF45A0)
-codul culorii în format zecimal (de exemplu: color=rgb(255,67,135))
În situaţia în care se utilizează numele culorii, acesta se poate alege dintr-o listă predefintă. O
astfel de listă poate fi accesată la adresa:
http://www.w3schools.com/html/html_colornames.asp
Codurile de culoare sunt coduri pentru formatul RGB (red, green, blue-roşu, verde, albastru).
Practic fiecare culoare se obţine prin diverse combinaţii de roşu, verde şi albastru, codul culorii
exprimând intensitatea cu care participă fiecare dintre cele trei culori fundamentale la
obţinerea culorii dorite. Intensitatea este exprimată ca un număr cuprins între 0 şi 255 (0
înseamnă că respectiva culoare nu participă la culoarea finală, 255 înseamnă că acea culoare
participă cu intensitate maximă).
Exemplu de cod de culoare în format RGB:
Nume culoare Format hexazecimal Format zecimal
Orange #FFA500 rgb(255,165,0)
În exemplul de mai sus pentru obţinerea culorii Orange (portocaliu) intensitatea pentru fiecare
dintre cele trei culori fundamentalte este:
Rosu 255 (FF în format hexazecimal)
Verde 165 (A5 în format hexazecimal)
Albastru 0 (00 în format hexazecimal)
Majoritatea editoarelor grafice şi editoarelor HTML dispun de instrumente prin intermediul
cărora codurile culorilor sunt generate automat prin alegerea culorii dintr-o paletă cu ajutorul
mouse-ului. Un astfel de instrument poate fi accesat online la adresa
http://www.colorspire.com/rgb-color-wheel/
Structura de bază a unui document HTML
<html>
<head>
<title>titlu pagina</title> Antetul paginii
</head>
<body>
Conţinutul paginii
</body>
</html>
Tag-ul HTML încadrează întreg documentul html specificând începutul, respectiv sfârşitul
documentului.
Tagul HEAD delimitează antetul documentului în care apar metadate referitoare la document.
De exemplu în această secţiune poate apărea titlul paginii web (tag-ul TITLE) adică acel text care
este afişat pe tab-ul browserului în care este deschis documentul respectiv. Alte elemente des
întâlnite în această secţiune sunt:
-definiţii de stiluri (CSS);
-referinţe către foi de stil;
-scripturi javascript;
-informaţii utilizate de către motoarele de căutare.
Tag-ul BODY încadrează partea de conţinut a paginii web adică informaţiile care sunt destinate
a fi afişate utilizatorului paginii web.
Formatări de bază ale unei pagini web
Titlurile din cadrul paginii web
Se definesc cu ajutorul tag-ului <Hi> unde i poate lua valori de la 1 la 6. Există astfel titluri de nivelul 1
(H1), nivelul 2 (H2)… nivelul 6(H6).
Cod html Conţinut afişat în browser

<html>
<body>
<h1>Titlu nivel 1</h1>
</body>
</html>
În variantele anterioare HTML 4.01 se putea folosi şi atributul align având ca valori posibile left, right,
center, justify pentru a specfica unde se va alinia textul. Începând cu HTML 4.01 se recomandă utilizarea
stilurilor (CSS) pentru stabilirea formatului titlurilor.
Se recomandă plasarea titlurilor în cadrul paginii web în raport de importanţa lor nu în funcţie de
mărimea textului sau alte caracteristici de formatare (nivelul 1 este considerat cel mai important).
Această recomandare are în vedere modul în care motoarele de căutare tratează titlurile din cadrul
paginii web (cuvintelor cheie utilizate în cadrul titlurilor de pe nivelurile superioare li se acordă o
importanţă mai mare în stabilirea poziţiei pe care va apărea pagina în cadrul unei căutări pe Internet).
Aşadar atunci când o pagina conţine informaţii din sfera contabilităţii şi se doreşte ca pagina respectivă
sa fie poziţionată cât mai bine printre rezultatele motoarelor de căutare atunci când se caută termenul
„contabilitate”, este recomandat ca titlurile de pe nivelurile superioare din cadrul paginii (H1, H2…) să
conţină textul respectiv („contabilitate”).
Paragrafe
Pentru inserarea paragrafelor se utilizează tagul <p>. Un spaţiu este plasat automat de către browsere
înainte şi după paragraf. Alte caracteristici de formatare se recomandă a fi precizate prin intermediul
CSS. Pentru întreruperea liniei curente se utilizează tagul <br>.
Exemplu:

<html>
<body>
<p>
Nu spera si nu ai teama,<br>
Ce e val ca valul trece;
</p>
</body>
</html>
Taguri utilizate pentru formatare
<b> Defineşte un text scris utilizând caractere aldine (îngroşat)
<em> Defineşte un text scos în evidenţă
<i> Defineşte un text scris cu caractere cursive (italic)
<small> Defineşte un text scris cu caractere micşorate
<strong> Defineşte un text important
<sub> Defineşte un text scris ca indice
<sup> Defineşte un text scris ca exponent

<ins> Defineşte un text inserat
<del> Defineşte un text eliminat
Tagurile <ins> şi <del> se utilizează pentru a urmări modificările realizate pe un document. Browserele
subliniază textul marcat cu <ins> şi taie cu o linie orizontală pe cel marcat cu <del>.
Textul marcat cu <strong> este afişat de majoritatea browser-elor similar textului marcat cu <b> iar
textul marcat cu <em> similar textului marcat cu <i>. Aceasta este starea de fapt actuală pentru
afişarea textelor importante sau scoase în evidenţă. Este posibil ca în viitor să fie utilizate alte
caracteristici de formatare pentru acestea.

<html>
<body>
<b>Text scris utilizând caractere aldine
(îngroşat)</b><br>
<em>Text scos în evidenţă</em><br>
<i>Text scris cu caractere cursive (italic)</i><br>
<small>Text scris cu caractere micşorate</small><br>
<strong>Text important<strong></br>
Text normal<sub>Text scris ca indice</sub><br>
Text normal<sup>Text scris ca exponent</sup><br>
<ins>Text inserat</ins><br>
<del>Text eliminat</del>
</body>
</html>
Caractere speciale
Unele caractere au o însemnătate specială în HTML, cum ar fi semnul “<”. Dacă se doreşte ca
browserul să afişeze aceste caractere trebuie să se folosească fie numelecaracterului respectiv
fie codul asociat lui. Pentru inserarea acestor caractere se începe cu semnul „&”, urmat de
numele caracterului (sau de semnul “#” şi codul caracterului); la final se plasează semnul „;”.
Caracter Descriere Numele caracterului Codulcaracterului

Spaţiu
< Mai mic decât < <
> Mai mare decât > >
& Ampersand & &
Liste HTML
Există trei tipuri de liste care pot fi definite în HTML:
-liste neordonate
-liste ordonate
-liste de definiţii
Liste ordonate
Au specific faptul că fiecare element este precedat de un număr sau o literă. Întreaga listă este
indentată. Lista este delimitată de tag-urile <ol>…</ol>, fiecare element fiind încadrat de <li>…</li>.
Atributul start precizează numărul din dreptul primului element al listei, iar atributul type este folosit
pentru a specifica tipul numerotarii astfel:
A pentru numerotare utilizând majuscule (A, B, C…)
a pentru numerotare cu minuscule (a, b, c…)
I pentru numerotare cu cifre romane majuscule (I, II, III, IV…)
i pentru numerotare cu cifre romane majuscule (i, ii, iii, iv…)
1 pentru numerotare cu cifre arabe (valoarea implicită a atributului)
Atributul reversed introdus în specificaţia HTML 5 precizează faptul că elementele vor fi ordonate
descrescător.
<html>
<body>
<h4>Lista discipline de studiu</h4>
<ol type="A" start="5">
<li>Contabilitate</li>
<li>Microeconomie</li>
<li>Tehnologia aplicatiilor Office</li>
<li>Statistica</li>
</ol>
</body>
</html>
Liste neordonate
Prezintă aceleaşi caracteristici specifice listelor ordonate cu excepţia faptului că fiecare element al listei
este precedat de un semn grafic în loc de un numar sau text. Pentru specificarea tipului elementului
grafic se recomandă utilizarea stilurilor CSS (de exemplu atributul CSS list-style-type poate lua una din
valorile: disc, circle, square)

<html>
<body>
<ul style="list-style-type:square">
<li>Statistica</li>
</ul>
</body>
</html>
Liste de definiţii
Fiecare element al unei astfel de liste este compus la rândul său două elemente: termenul de definit şi
definiţia acestuia. Ca mod de prezentare, aceste subelemente apar pe rânduri distincte, definiţia fiind
indentată (plasată mai în dreapta) faţă de termenul de definit . Lista este încadrată de tag-urile
<dl>…</dl>, termenii de definit sunt încadraţi de <dt>…</dt> iar definiţiile de <dd>…</dd>.
<html>
<body>
<h4>Lista de definitii</h4>
<dl>
<dt>Informatica</dt>
<dd>Stiinta care se ocupa cu studiul
prelucrarii informatiei cu ajutorul
sistemelor automatice de calcul</dd>
<dt>Cibernetica</dt>
<dd>Stiinta care are ca obiect studiul
matematic al
legaturilor, comenzilor si controlului în
sistemele tehnice si în organismele vii
din punctul de vedere al analogiilor lor
formale.</dd>
</dl>
</body>
</html>
Liste imbricate
Listele se pot imbrica (intercala) fără vreo restricţie în privinţa tipurilot listelor implicate. Un exemplu de
liste imbricate este prezentat în continuare.
<html>
<body>
<ul>
<li>Discipline an 1</li>
<ol type="A">
<li>Statistica</li>
</ol>
<li>Discipline an 2</li>
<ol type="A">
<li>Contabilitate financiara II</li>
<li>Baze de date</li>
<li>Contabilitate consolidata</li>
<li>Finante</li>
</ol>
</body>
</html>
Legaturi hipertext (linkuri)

Legaturile hipertext (linkurile), deşi un concept simplu reprezintă fundamentul succesului de
care se bucură World Wide Web. Un link reprezintă o conexiune dinspre o resursă Web către
alta.
Un link prezintă două repere numite ancore şi o direcţie. Linkul începe de la ancora „sursă” şi
are ca destinaţie ancora „ţintă” care poate fi orice resursa Web (o imagine, un clip video, un
program, o secţiune dintr-un document HTML, etc)
Sintaxa generala a unei ancore sursă este:
<a href=”URL_resursa_Web” target=”fereastra_deschidere_resursa” title=””>Descriptor</a>
Valoarea atributului href este o referinţă către resursa Web ţintă. Descriptorul este partea
vizibilă a linkului (ceea ce este afişat utilizatorului de către browser) şi este marcat diferit de
restul elementelor din pagina web. În mod implicit un link nevizitat este subliniat si albastru, un
link vizitat este subliniat şi mov iar un link activ este subliniat şi roşu. Aceste caracteristici de
formatare a linkurilor se pot modifica, de preferat utilizând CSS. Atributul title are ca efect
afisarea unei mici ferestre atunci cand utilizatorul plasează mouse-ul deasupra linkului,
fereastra care afişează valoarea atributului. Valoarea atributului target specifică fereastra sau
tab-ul browserului în care se va deschide ţinta linkului.
Valorile posibile pentru atributul target:
Valoare Descriere
_blank Deschide documentul ţintă într-o nouă fereastră sau tab
_self Deschide documentul ţintă în acelaşi cadru
_parent Deschide documentul ţintă în cadrul părinte
_top Deschide documentul ţintă în întreaga fereastră
framename Deschide documentul ţintă în cadrul al cărui nume este
precizat
Linkuri către o pagină web

Este una dintre modalităţile cele mai uzuale de utilizare a linkurilor şi presupune specificarea
URL-ului paginii ţintă ca valoare a atributului href.
Exemplu:
<a href=”http://www.w3schools.com/tags/tag_a.asp”>Invata HTML</a>
În continuare sunt prezentate componentele unui URL
http: //www.w3schools.com /tags/ tag_a.html
Protocol Nume server Director (folder) Nume fişier
Acest tip de URL are componentele separate prin următoarele caractere

Protocolul este urmat de “:”
Numele serverului este precedat de “//”
Directorul sau directoarele care urmează sunt separate cu “/”
Numele fişierului apare la final separat de restul URL-ului de semnul “/”
În exemplul de mai sus când vizitatorul paginii web va da click pe textul Invata HTML va accesa
pagina web descrisă de fisierul tag_a.html care se găseşte în directorul (folderul) tags de pe
serverul www.w3schools.com. În cazul în care linkul ar fi conţinut doar protocolul şi numele
serverului (http://www.w3schools.com) s-ar fi realizat o legatura catre fisierul implicit de pe
acel server (de obicei un fişier cu numele index.htm, index.html, default.asp, default.aspx,
index.php etc).
Linkuri absolute şi linkuri relative
Exemplul prezentat mai sus conţine un link absolut adică un link care are întreaga cale de acces
pornind de la protocol până la fişier. În cazul în care se realizează legături între paginile aceluiaşi
site se recomandă folosirea linkurilor relative adică folosirea doar a structurii de directoare
pornind de la directorul radacină al site-ului în funcţie de poziţia relativă a resursei destinaţie
faţă de pagina din care se realizează link-ul
Exemplu:
Presupunâd că avem un site al cărui director rădăcină este E:\Home, un link relativ din fişierul
index.html către fişierul capitolul1.html se realizează astfel:
<a href=”Cuprins/capitolul1.html”>Capitolul 1</a>
Calea de acces relativă Cuprins/capitolul1.html semnifică faptul că din fişierul din care se
realizează legătura (index.html), care se găseşte în directorul Home, trebuie accesat directorul
Cuprins şi, din acesta fişierul capitolul1.html.
Un link din fişierul capitolul1.html către fişierul index.html se realizează astfel:
<a href=”../index.html”>Acasa</a>
Calea de acces relativă ../index.html semnifică faptul că din fişierul din care se realizează
legătura (capitolul1.html), care se găseşte în directorul Home/Cuprins, trebuie accesat
directorul părinte (Home) al directorului curent (Cuprins) şi, din acesta fişierul index.html.
Referirea directorului părinte se face cu ajutorul combinaţiei ../.
Crearea unei legaturi în cadrul aceleiaşi pagini web
Presupune crearea unei ancore ţintă care să identifice zona din pagina web către care se
doreşte realizearea unui link. De exemplu dacă se doreşte realizarea unui link către paragraful 7
de pe o pagină, acesta trebuie identificat astfel:
<html>
<body>
….
<a name=”cuvant_cheie”><H2>Paragraf 7</h2></a>
<P> Continut paragraf 7 ….</p>
…
</body>
</html>
Se remarcă crearea unei ancore la începutul paragrafului (de fapt titlul care precede paragraful)
şi în cadrul acesteia atribuirea unui cuvânt cheie atributului name. Acest cuvânt cheie este ales
arbitrar, are rol de identificator al zonei respective din pagina, prin urmare trebuie să fie unic.
Specificaţiile HTML 5 nu acceptă atributul name, în locul acestuia se va folosi atributul id.
Exemplu:
<a id=”cuvant_cheie”><H2>Paragraf 7</h2></a>
Un link către zona definită anterior se realizeză prin specificarea cuvantului cheie ca valoare a atributului
href precedat de semnul “#”. Exemplu:
<a href=”#cuvant_cheie”>Click aici pentru paragraful 7</a>
Accesarea zonei definite de ancora ţintă din afara fişierului în care aceasta este plasată se realizează prin
plasarea URL-ului fişierui înaintea semnului “#”. Se păstrează regulile privind linkurile relative sau
absolute. De exemplu, presupunând că ancora ţintă a fost plasată în fişierul capitolul1.html, o legătură
către acesta din fişierul index.html se realizează astfel:
<a href=”Cuprins/capitolul1.html#cuvant_cheie”>Click aici pentru paragraful 7</a>
Inserarea imaginilor în paginile web

Majoritatea browserelor suportă câteva formate de imagine:
GIF (Graphics Interchange Format) cu extensia .gif;
JPEG (Joint Photographic Experts Group) cu extensia .jpeg sau .jpg;
PNG (Portable Network Graphics) cu extensia .png
XPM (X PixMap) cu extensia .xmp;
XBM (X BitMap) cu extensia .xbm;
BMP (BitMap) cu extensia .bmp (numai cu Internet Explorer);
TIFF (Tagged Image File Format) cu extensia .tif sau .tiff;
Dintre aceste formate cele mai uzitate sunt GIF, JPEG şi PNG. Fiecare dintre acestea utilizează o metodă
de comprimare astfel că fişierele care conţin aceste imagini sunt mai mici în raport cu cele care utilizează
alte formate.
Inserarea unei imagini într-o pagină web se realizează cu ajutorul tagului img
<img src=”URL_imagine” alt=”text_alternativ” height=”n” width=”m”>
URL_imagine reprezintă URL-ul imaginii care se inserează şi repectă aceleaşi reguli ca la
realizearea linkurilor
text_alternativ reprezintă un text care va fi afişat atunci când imaginea nu este disponibilă
n-o valoare numerică prin care se specifică înălţimea imaginii exprimată în pixeli
m-o valoare numerică prin care se specifică lăţimea imaginii exprimată în pixeli
Majoriitatea browserelor plasează imaginea exact în locul în care aceasta a fost inserată. Aceasta
înseamnă că o imagine poate apărea în mijlocul unei linii de text. În cazul în care se doreşte poziţionarea
imaginii în partea stângă a paginii, aceasta ar trebui să apară înaintea textului în stânga căruia se
plasează imaginea. În specificaţiile HTML anterioare versiunii 4.01 se utiliza atributul align prin
intermediul căruia se preciza cum se aliniază imaginea faţă de restul elementelor paginii. Tabelul care
urmează prezintă modul de aliniere în funcţie de valorile atributului align.
text text<img src="foto.gif" align=" bottom"> text text
text text<img src="foto.gif" align=" top "> text text
text text<img src="foto.gif" align=" middle "> text text
text text<img src="foto.gif" align="left"> text text text text

text text
text text<img src="foto.gif" align="right"> text text text text

text text
Începând cu specificaţiile HTML 4.01 se recomandă utilizarea CSS pentru alinierea imaginilor.
Tabele HTML
Un tabel prezintă următoarele elemente:

Linii
Coloane
Celule ale antetului
Celule de conţinut
Etichetă
Linii ale antetutului
Linii de conţinut
Linii de subsol
Exmplu de cod HTML pentru crearea unui tabel:

<html>
<body>
<table border="1">
<caption>Etichetă tabel</caption>
<thead>
<tr><td colspan="2">Antet tabel</td></tr>
</thead>
<tfoot>
<tr><td colspan="2">Subsol tabel</td></tr>
</tfoot>
<tbody>
<tr><th>Antet celula 1</th><th>Antet celula 2</th></tr>
<tr><td>Conţinut celula 1</td><td>Conţinut celula 2</td></tr>
</tbody>
</table>
</body>
</html>
<caption>Etichetă tabel</caption>
<thead>
<tr><td colspan="2">Antet tabel</td></tr>
</thead>
<tbody>
<tr><th>Antet celula 1</th><th>Antet celula
2</th></tr>
<tr><td>Conţinut celula 1</td><td>Conţinut
celula 2</td></tr>
</tbody>
<tfoot>
<tr><td colspan="2">Subsol
tabel</td></tr>
</tfoot>
<table> -tagul utilizat pentru descrierea unui tabel

<caption> -tag utilizat pentru ataşarea unei etichete tabelului
<thead> -tag utilizat pentru descrierea antetului tabelului
<tfoot> -tag utilizat pentru descrierea subsolului tabelului
<tbody>-tag utilizat pentru descrierea corpului tabelului
<tr> -tag utilizat pentru descrierea unei linii a tabelului
<td>-tag utlizat pentru descrierea unei celule standard a tabelului (conţinutul unei astfel de
celule este scris cu text normal, aliniat la stânga)
<th> -tag utilizat pentru descrierea unei celule de tip antet (conţinutul unei astfel de celule este
automat aliniat pe centru, textul este îngroşat)
Oricare secţiune a tabelului (antet, conţinut sau subsol) se construieşte linie cu linie, utilizând
pentru aceasta tagul <tr>. În cadrul liniilor se declară celulele care o compun cu ajutorul
tagurilor <td> respectiv <th>. Conţinutul celulelor este precizat între <td> şi </td> (sau <th>
</th>) şi poate consta în text, imagini, tabele etc. În situaţia în care se doreşte inserarea unei
celule vide, pentru a fi afişată, aceasta trebuie să conţină codul pentru spaţiu ( ).
Precizarea secţiunilor unui tabel este opţională. Practic un tabel se poate crea utilizând doar
tagurile <table>, <tr> şi <td>. Intr-un tabel exista un singur subbloc de tipul <thead> si un singur
subbloc de tipul<tfoot>, dar pot exista mai multe subblocuri de tip <tbody>. Browserele pot
utiliza aceste elemente pentru a permite derularea independentă a conţinutul fiecăruia dintre
ele. În cazul tabelelor mari, care se întind pe mai multe pagini, la imprimare se poate repeta
antetul şi subsolul pe fiecare din paginile imprimate. Blocul <tfoot> trebuie plasat înaintea blocului
<tbody> pentru a permite browserului să anticipeze existenţa subsolului şi să pregătească în mod
corespunzător formatatea blocului <tbody>.
Dimensiunile unui tabel

Lăţimea unui tabel se precizează cu ajutorul atributului width. Acesta poate fi plasat în cadrul
tagului <table> precizând lăţimea tabelului sau în cadrul celulelor precizând lăţimea acestora.
Valoarea luată de atributul table poate fi una absolută şi în acest caz este exprimată în pixeli sau
relativ, ca procent din lăţimea containerului tabelului respectiv (fereastra browserului de
exemplu). În cazul în care se precizează o valoare relativă dimensiunea tabelului se va ajusta
dinamic
Exemplu:
<table width=”400”>
<tr>
<td width=”100”>Celula 1</td>
< td width=”300”>Celula 1</td>
</tr>
</table>
În situaţia în care nu se precizează lăţimea tabelului, aceasta se va ajusta automat în funcţie de
lăţimea elementului în care este plasat tabelul (contaninerul acestuia) şi de dimensiunile
conţinutul tabelului (lungimea textului introdus în celulele tabelului, laţimea imaginilor încluse
în tabel, etc). În situaţia în care lăţimea tabelului depăşeşte lăţimea containerului său, lăţimea
va fi limitată la lăţimea containerului exceptâns situaţia în care containerul suportă barele de
derulare. În momentul în care tabelul atinge limitele containerului său conţinutul celulelor sale
este împărţit automat pe mai multe linii.
Spaţierea celulelor unui tabel se realizează cu ajutoru atributelor cellspacing, respectiv
cellpadding. Cellspacing reprezintă spaţiul lăsat liber între două celule alăturate ale tabelului,
cellpadding reprezintă spaţiul lăsat liber, în interiorul celulei, între marginile conţinutul acesteia,
pe oricare din cele patru laturi.
Exemplu:
<html>
<body>
<table border="1" cellspacing="15" cellspacing
cellpadding="10"> cellpadding
<tr>
<td>Continut celula 1</td>
</tr>
<tr>
</tr>
</table>
</body>
</html>
Fuzionarea liniilor şi coloanelor

O celulă a unui tabel se poate întinde pe mai multe linii şi/sau coloane. Atributele utilizate în
acest scop sunt colspan respectiv rowspan. Atributul rowspan prin valoarea sa precizează pe
câte linii în jos se va extinde celula în cadrul căreia este plasat atributul. Atributul colspan
precizează prin valoarea luată pe câte coloane către dreapta se va extinde celula în cadrul
căreia este plasat.
Exemplu fuzionare celule pe verticală (rowspan)

</html>
<body>
<table border="1" >
<tr>
<td>Linia 1 Celula 1</td>
<td rowspan="3">Linia 1 Celula 2</td>
</tr>
<tr>
</tr> Se poate observa prezenţa în tagul <td> aferent celei de-a
<tr> doua celule de pe prima linie a atributului rowspan cărui
<td>Linia 3 Celula 1</td> valoare are ca efect crearea unei celule care va ocupa 3 linii.
<td>Linia 3 Celula 2</td> Pe următoarele 2 linii nu este necesară decât crearea a două
</tr> celule deoarece a doua coloană este ocupată de celula de pe
</table> prima linie
</body>
</html>

</html>
<body>
<table border="1" >
<tr>
<td colspan="2">Linia 1 Celula 2</td>
</tr>
<tr>
Se poate observa prezenţa în tagul <td> aferent celei de-a doua
</tr>
celule de pe prima linie a atributului colspan cărui valoare are ca
</table>
efect crearea unei celule care va ocupa 2 coloane.
</body>
</html>
Chenare, aliniere şi culori de fundal

Pentru a stabili grosimea chenarului unu tabel se utilizează atributul border a cărui valoarea
specifică grosimea chenarului tabelului. Exemplu: <table border=”2”>.
Pentru a alinia tabelul în raport cu celelalte elemente din pagină se poate utiliza atributul align
care poate lua valorile left, right sau center (exemplu: <table align=”right”). Specificaţiile HMTL
4.01 recomandă utilizarea stilurilor pentru alinierea tabelului.
Pentru alinierea conţinutului celulelor se utilizează următorele taguri:
pentru alinierea pe orizontală se foloseşte tagul align care poate lua una din
următoarele valori:
o left-pentru aliniere la stânga
o right pentru aliniere la dreapta
o center pentru aliniere pe centru
o justify pentru aliniere stânga-dreapta
o char pentru aliniere faţă de un anumit caracter
pentru alinierea pe verticală se foloseşte tagul valign care poate lua una din
următoarele valori:
o top-pentru aliniere în partea de sus a celulei
o middle-pentru aliniere pe mijlocul celulei
o bottom-pentru aliniere în partea de jos a celulei
o baseline-pentru aliniere la baza liniei textului
Atributele align respectiv valign pot apărea în cadrul tagului <tr> caz în care precizează modul
de aliniere pentru toate celulele de pe linia respectivă sau în cadrul tagului <td> precizând
modul de aliniere pentru celula în care apare. În situaţia în care pentru o celulă există reguli de
aliniere definite atât la nivelul liniei din care face parte (în cadrul tagului <tr>) cât şi la nivelul
celulei (în cadrul tagului <td>) prioritate vor avea atributele definite la nivel de celulă.
Culorile de fundal se stabilesc cu ajutorul atributului bgcolor (exemplu: <table
bgcolor=”white”>). Acesta poate fi prezent în cadrul tagului table, caz în care precizează
culoarea de fundal a întegului tabel, în cadrul tagului <br>, specificând culoarea de fundal a
liniei sau în cadrul tagului <td> specificând culoarea de fundal a celulei.
Formulare HTML
Dacă la începuturile sale, limbajul HTML servea doar ca instrument prin care date de pe un
server erau afisate utilizatorilor, fără ca aceştia din urmă să poată interveni aupra acestora, mai
târziu formularele HTML au oferit utilizatorilor o modalitate prin care date introduse de aceştia
să fie preluate şi prelucrate. Formularele HTML pun la dispoziţia utilizatorilor o serie de
controale (casete de text, liste derulante, casete de validare, butoane de opţiunee etc.) prin
intermediul cărora se preiau date care sunt transmise unui program capabil să le prelucreze.
Crearea unui formular presupune în primul rând utilizarea tagului form astfel:
<form action=”URL_program_prelucrare_date” method=”metoda_transmitere_date”>…</form>
Un exemplu de formular HTML este prezentat în continuare:
<html>
<body>
<form action="http://www.google.ro/search"
method="get">
<input type="text" name="q">
<input type="submit" value="Cauta">
</form>
</body>
</html>
URL_program_prelucrare_date reprezintă URL-ul programului care va recepţiona şi prelucra datele

formularului (un script CGI, o pagina ASP, o pagina PHP etc.). Atributul method specifică protocolul de
transmitere a datelor. Când valoarea atributului este get (method=get) protocolul utilizat este HTTP GET
ceea ce înseamnă că datele introduse în formular sunt ataşate la URL-ul precizat ca valoarea a
atributului action sub forma: nume_control=valoare_introdusă. Pentru exemplul de mai sus apăsarea
butonului Caută va avea ca efect transmiterea datelor către server utilizând URL-ul
http://www.google.ro/search?q=test (q este numele controlului din formular, test este valoarea
introdusă de utilizator). Când valoarea atributului method este post protocolul utilizat este HTTP POST,
datele fiind transmise criptat fără a fi vizibile utilizatorului.
Caseta de text
Caseta de text de tip password

Caseta de fişier
Listă derulantă
Butoane radio
Casete de validare
Caseta de text multilinie

Caseta de text
Buton reset
Buton de expediere
Crearea unei casete de text se realizează astfel:

<input type=”text” name=”nume_control” maxlength=”n” value=”valoare_predefinita” size=”n”>
Atributele tagului de mai sus au următoarea semnificaţie:
type=”text”-specifică tipul controlului (casetă de text în cazul de faţă)
name-numele utilizat pentru identificarea controlului (de asemenea numele parametrului
transmis către server)
maxlength-specifică numărul maxim de caractere acceptate de către control
value-valoarea predefinită afişată de către control
size-lăţimea controlului specificată în număr de caractere
Crearea unei casete de text de tip parolă se realizează similar creării unei casete de text, singura
diferenţă fiind dată de valoarea aributului type (type=”password”). Caseta de text de tip password nu
ascunde textul introdus, afişând în locul caracterelor introduse un caracter generic (*). În momentul
transmiterii datelor către server acesta este trimis însă în clar.
Crearea butoanelor radio (de opţiune)
Butoanele radio sunt controale de formă rotundă prin intermediul cărora se oferă posibilitatea
utilizatorului de a alege o singură opţiune din mai multe disponibile.
Sintaxa utilizată pentru crearea unui buton radio este:
<input type="radio" id="id_control" name="nume_grup" checked="checked"
value="valoarea_daca_este_selectat" /> Text descriptiv pentru buton
Semnificaţia atributelor este următoarea
type="radio" specifică tipul butonului (buton radio în cazul de faţă)
id_control-identificatorul controlului
name –este utilizat pentru a specifica numele grupului din care face parte butonul respectiv (va
fi acelaşi pentru toate butoanele dintr-un grup, determinând şi comportamenul acestora-este
posibilă bifarea unui singur buton dintr-un grup)
checked-atunci când este prezent, butonul radio în cadrul căruia este plasat este bifat implicit
value-atributul a cărui valoare este transmisă spre prelucrare atunci când butonul este bifat.
Fiecare buton din cadrul aceluiaşi grup trebuie să aibă propria valoare unică.
Crearea casetelor de validare
Sunt controale de formă pătrată pe cae utilizatorul le poate bifa independent (bifarea unuia nu duce
automat la debifarea altuia ca în cazul butoanelor radio).
<input type="checkbox" id="id_control" name="nume_grup" checked="checked"
value="valoarea_daca_este_selectat" /> Text descriptiv pentru buton
Semnificaţia atributelor este aceeaşi ca şi în cazul butoanelor radio.
Crearea listelor de selecţie (liste derulante)
Sintaxa pentru crearea listei de selecţie este următoarea:

<select id="id_lista" size="numar_de_linii_afisate" multiple="multiple">
<option value=”valoare” label=”eticheta” [selected] >element_lista</option>
…
<optgroup label=”eticheta_grup”>
…
<option [selected] value=”valoare” label=”eticheta”>element_lista</option>
</optgroup>
</select>
Lista de selecţie este declarată cu ajutorul tagului select. Un element al listei este inserat utilizând tagul
option. Opţional se pot crea grupuri de opţiuni cu tagul optgroup.
Atributele tagului select:
id-precizează identificatorul listei
size-specifică numărul de elemente afişate (cele neafişate iniţial se pot accesa prin derularea
listei)
multiple-oferă posibilitatea selecţiei multiple
Atributele tagului option:
value-valoarea ataşată opţiunii respective
label-eticheta asociată opţiunii respective
selected-are ca efect selectarea implicită a opţiunii respective
<html>
<body>
<form action="text.aspx">
<select id="discipline[]" size="1">
<optgroup label="An 1">
<option value="micro">Microeconomie</option>
<option value="macro">Macroeconomie</option>
</optgroup>
<optgroup label="An 2">
<option value="fin">Finante</option>
<option value="bd">Baze de date</option>
</optgroup>
</body>
</html>
Crearea casetelor de text multilinie

Casetele de text multilinie sunt controale care oferă utilizatorului posibilitatea introducerii unui text mai
lung. Sintaxa generală utilizată pentru crearea unei casete de text multilinie este:
<textarea id="id_control" name="numele_campului" cols="număr_de_coloane"
rows="numar_de_linii">Text implicit</textarea>
Atributele tagului textarea sunt:
id-identificatorul controlului
name-numele controlului
cols-numărul de coloane (numărul de caractere acceptate pe o linie)
rows-numărul de linii de text afişate de casetă (în momentul în care textul introdus depăşeşte
capacitatea de afişare a acesteia apar barele de derulare)
Dacă se doreşte afişarea unui text implicit în casetă, acesta se precizează între <textarea…></textarea>.
Crearea câmpurilor ascunse

Câmpurile ascunse au rolul de a stoca valori fără ca acestea să fe afişate utilizatorului. Sintaxa utilizată
pentru crearea unui câmp ascuns este următoarea:
<input type="hidden" id="id_camp" name="nume_camp" value="valoare_camp" />
Semnificaţia atributelor:
value-valoarea câmpului
Crearea butoanelor
Pentru crearea unui buton standard se utilizează sintaxa:
<input type="button" id="id_camp" name="nume_camp" value="text_afisat_pe_buton" />
value-textul afişat pe buton
Pentru a fi utile în cadrul formularelor este recomandat să se ataşeze scripturi butoanelor, scripturi care
să fie executate în momentul în care un eveniment intervine asupra butonului (click, dubluclick etc.).
Crearea câmpurilor pentru fişiere

Aceste câmpuri au rolul de a permite utilizatorului selectarea unui fişier local în vederea transmiterii lui
către server. Acest câmp este afişat ca o casetă de text alături de un buton sau ca un buton alături de
care apare o etichetă (în funcţie de browser). Rolul butonului este de a lansa fereastra care permite
alegerea fişierului. Caseta de text sau eticheta afişează numele fişierului selectat (caseta de text permite
şi editarea directă numelui fişierului).
Sintaxa utilizată pentru crearea unui câmp pentru fişier este:
<input type="file" id="id_camp" name="nume_camp" size="dimensiune_camp" />
size-dimensiunea câmpului
Un câmp pentru fişiere trebuie plasat într-un formular cu metoda „POST” iar în cadrul tagului form
trebuie plasat atributul enctype cu valoarea „multipart/form-data”.

<html> Camp de tip fişier afişat de Google Chrome
<body>
<form action="test.cgi" method="post"
enctype="form/multipart">
<input type="file" id="id_camp"
name="nume_camp"
size="40" /> Camp de tip fişier afişat de Internet Explorer
</form>
</html>
</body>
Butoanele de transmitere respectiv resetare a datelor

Butonul de trimitere a datelor (submit) are rolul de a trimite datele spre prelucrare. Sintaxa acestui tip
de buton:
<input type=”submit” id="id_camp" name="nume_camp" value=”text_afisat”>
value-text afişat pe buton (în cazul în care acest atribut lipseşte butonul va afişa textul „Submit”)
Având aceeaşi funcţionalitate se poate utiliza şi sintaxa:
<input type="image" id="id_camp" name="nume_camp" src="url_imagine" />
Diferenţa faţă de un buton de transmitere standard constă în faptul că butonul este reprezentat de o
imagine al cărei URL este precizat ca valoare a atributului src.
Butonul de resetare (reset) are rolul de a reiniţializa formularul anulându-se toate modificările efectuate
de utilizator. Sintaxa este:
<input type=”reset” id="id_camp" name="nume_camp" value=”text_afisat”>
Semnificaţia atributelor este aceeaşi de la butonul de transmitere. În cazul în care atributul value
lipseşte butonul va afişa textul “Reset”.
Gruparea câmpurilor de pe formular

În vederea sporirii lizibilităţii câmpurile formularului pot fi grupate. Gruparea se realizează cu ajutorul
tagului fieldset. Sintaxa este următoarea:
<fieldset>
<p><legend> Gender </legend></p>
…
</fieldset>
Rezultatul utilizării tagului fieldset constă în crearea unui dreptunghi care încadrează câmpurile plasate
între tagul de deschidere şi cel de închidere. Tagul legend este utilizat pentru a specifica o etichetă
pentru grupul respectiv.
<html>
<body>
<fieldset>
<legend> Autentificare </legend>
Utilizator<input type="text"
value="user"><br>
Parola <input type="password"
value="user">
</fieldset>
</body>
</html>
Blocuri HTML
Majoritatea elementelor HTML sunt fie elemente de tip „block level” fie elemente „inline”. Elementele
de tip „block level” se caracterizează prin faptul că sunt afişate pe o linie nouă (ceea ce urmează după
ele este de asemenea afişat pe o linie nouă). Elementele inline sunt afişate fără a începe o linie nouă.
Elementul <div>
Este utilizat ca un container care grupează mai multe elemente HTML. Elementul nu are o semnificaţie în
sine dar fiind un element de tip „block level” va avea o linie înainte şi după. Utilizat împreună cu stilurile
CSS poate defini formatul unor blocuri mari de conţinut. De asemenea elementul div se recomandă a fi
utilizat pentru setarea aspectului paginii.
Elementul span
Este utilizat drept container pentru gruparea mai multor elemente, dar spre deosebire de div, este un
element inline. Scopul principal în care poate fi utilizat constă în formatarea unitară a unor blocuri de
conţinut.
Cadre interne
Reprezintă un element HTML prin intermediul căruia se poate afişa conţinutul unei pagini web în cadrul
altei pagini web. Sintaxa utilizată pentru crearea unui cadru intern este:
<iframe src=”URL_document” width=”n” height=”n” name=”nume_cadru” frameborder=”n”
marginidth=”n” marginheight=”n” align=”left|right|top|middle|bottom”>
src-specifică URL-ul documentului web al cărui conţinut va fi afişat de către cadrul intern
width-specifică lăţimea cadrului în pixeli sau ca raport din lăţimea containerului care conţine
cadrul intern
height-specifică înălţimea cadrului în pixeli sau ca raport din lăţimea containerului care conţine
cadrul intern
name-specifică numele cadrului intern
frameborder-specifică grosimea chenarului cadrului. Dacă valoarea este 0 atunci cadrul nu avea
chenar, orice valoare mai mare decât 0 specifică grosimea chenarului
marginwidth-specifică marginea lăsată libera pe părţile laterale ale cadrului
marginheight-specifică marginea lăsată libera în partea superioară şi inferioară a cadrului
align-specifică modul de aliniere al cadrului

HTML

Încărcat de

Informații document

Drepturi de autor

Formate disponibile

Partajați acest document

Partajați sau inserați document

Opțiuni de partajare

Vi se pare util acest document?

Este necorespunzător acest conținut?

Drepturi de autor:

Formate disponibile

HTML

Încărcat de

Drepturi de autor:

Formate disponibile

HTML este limbajul primar utilizat pentru descrierea şi distribuirea documentelor în Internet.

Nume culoare Format hexazecimal Format zecimal

Orange #FFA500 rgb(255,165,0)

Formatări de bază ale unei pagini web

Titlurile din cadrul paginii web

Cod html Conţinut afişat în browser

Cod html Conţinut afişat în browser

Taguri utilizate pentru formatare

<b> Defineşte un text scris utilizând caractere aldine (îngroşat)

<em> Defineşte un text scos în evidenţă

<i> Defineşte un text scris cu caractere cursive (italic)

<small> Defineşte un text scris cu caractere micşorate

<strong> Defineşte un text important

<sub> Defineşte un text scris ca indice

<sup> Defineşte un text scris ca exponent

<del> Defineşte un text eliminat

Cod html Conţinut afişat în browser

Caracter Descriere Numele caracterului Codulcaracterului

Cod html Conţinut afişat în browser

Legaturi hipertext (linkuri)

Sintaxa generala a unei ancore sursă este:

<a href=”URL_resursa_Web” target=”fereastra_deschidere_resursa” title=””>Descriptor</a>

Valorile posibile pentru atributul target:

Linkuri către o pagină web

http: //www.w3schools.com /tags/ tag_a.html

Protocol Nume server Director (folder) Nume fişier

Acest tip de URL are componentele separate prin următoarele caractere

Inserarea imaginilor în paginile web

text text<img src="foto.gif" align=" bottom"> text text

text text<img src="foto.gif" align=" top "> text text

text text<img src="foto.gif" align=" middle "> text text

text text<img src="foto.gif" align="left"> text text text text

text text<img src="foto.gif" align="right"> text text text text

Un tabel prezintă următoarele elemente:

Exmplu de cod HTML pentru crearea unui tabel:

<table> -tagul utilizat pentru descrierea unui tabel

Dimensiunile unui tabel

Fuzionarea liniilor şi coloanelor

Exemplu fuzionare celule pe verticală (rowspan)

Cod html Conţinut afişat în browser

Chenare, aliniere şi culori de fundal

URL_program_prelucrare_date reprezintă URL-ul programului care va recepţiona şi prelucra datele

Caseta de text de tip password

Caseta de text multilinie

Crearea unei casete de text se realizează astfel:

Crearea listelor de selecţie (liste derulante)

Sintaxa pentru crearea listei de selecţie este următoarea:

Crearea casetelor de text multilinie

Crearea câmpurilor ascunse

Crearea câmpurilor pentru fişiere

Cod html Conţinut afişat în browser

Butoanele de transmitere respectiv resetare a datelor

Gruparea câmpurilor de pe formular

S-ar putea să vă placă și