Introducere in HTML

Introducere
Pagina principala trebuie denumita index.html, majoritatea serverelor recunosc pagina

principala dupa aceasta denumire. Pentru a crea acest fisier deschideti Notepad si salvati fisierul
cu numele index.html. Acest fisier "index.html" il puteti deschide cu orice Browser de internet.
Pentru a vedea sau edita codul html dintr-un document HTML nu trebuie decat sa dati click
dreapta si sa selectati View Source.
Codul HTML este format din elemente de marcare numite tag-uri (etichete). Tag-urile se scriu
intre semnele "<" si ">". De exemplu tag-ul <p> da comanda de deschiderea unui paragraf, iar
tag-ul </p> da comanda de inchidere a paragrafului. Tag-ul <b> da comanda de a incepe scrierea
cu caractere Bold, iar tag-ul </b> da comanda de a opri scrierea cu caractere Bold.
Exemplu:
<p>Acesta este un paragraf</p>
Exemplu:
<p>Aceste este un <b>paragraf</b></p>
Unde cuvantul "paragraf" este scris cu caractere Bold.
Exista deasemenea si elemente care nu necesita sau nu au tag-uri de sfarsit sau incheiere, in
general pentru ca nu au un continut pe care sa il incadreze. Ex "<br />" care face referire la
trecerea la un nou rand. Trecerea la un nou rand in HTML nu se face apasand tasta Enter ci
folosind tagul <br />. HTML nu face distinctie intre literele mari si literele mici , deci <BR /> ,
<Br /> sau <br /> desemneaza acelasi element . Dar este de preferat sa folositi litere mici .
Continutul fiecarui document HTML trebuie scris intre tag-urile <html> si </html> .
Deci tag-ul <html> este primul tag din orice document HTML iar tag-ul </html> este intotdeauna
ultimul tag dintr-un document HTML.
<html>
.....Continutul paginii ....
</html>
Structura unui document

Documentele HTML au doua parti "head" si "body" . Prima parte Head-ul este delimitat de
Tag-urile <head> si </head> si contine informatii de identificare a paginii precum si titlul paginii
delimitat de tag-urile <title> si </title> ( Acesta va aparea pe bara de titlu a paginii ). Si o a doua
parte Body-ul , delimitat de tag-urile <body> si </body>, body-ul este partea cea mai mare a
documentului unde se va gasi continutul paginii.
<html>
<head>
<title>Titlu</title>
</head>
<body>
.....Continutul paginii......
</body>
</html>
Nota: Aceste Tag-uri vor aparea doar o singura data intr-un document HTML.
Heading-uri
Heading-urile sunt unele dintre cele mai importante tag-uri .Titlurile si subtitlurile
documentelor se vor marca cu Heading-uri. Tag-urile de deschidere pt Heading sunt
<h1>,<h2>...<h6> iar tag-urile de inchidere </h1>,</h2>...</h6>. Cifrele reprezentand marimea ,
1 fiind cel mai mare iar 6 cel mai mic .
Exemplu:
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>
Nota: Folositi heading-urile pentru titluri. Nu folositi heading-uri pentru a face textul mare sau
bold.
Paragrafe
Paragrafele se folosesc foarte mult in HTML . Tag-urile pt paragrafe sunt <p> pt deschiderea
paragrafului si </p> pt inchiderea paragrafului.
<p>Acesta este un paragraf</p>
Daca doriti sa treceti la un nou rand, fara a folosi un alt paragraf, folositi tag-ul <br />.
<p>Acest text este<br />scris pe<br />trei randuri</p>
Heading-urile si paragrafele suporta atribute de aliniere in pagina: Aliniere stanga, in centru, la

dreapta.
Exemplu:
<h3 align="left">Aliniere stanga</h3>
<p align="center">Aliniere centru</p>
<p align="right">ALiniere Drepata</p>
Formatul textului
In documentele pe care le veti crea veti folosi diferite stiluri de text pentru a pune in evidenta
anumite cuvinte sau pentru a le acorda o seminficatie dorita. Cel mai usor mod de a marca un
anumit stil corespunzator unor cuvinte sau a unui text in documentul dumneavoastra este de a
folosi Tag-uri ca <b>,<i> si <u> care modifica stilul fontului, in tabelul de mai jos gasiti o lista
cu stiluri de text:
Tag
<b>
<i>
<u>
<em>
<small>
<strong>
<sup>
<sub>
<del>
Descriere
Bold
Italics
Subliniat
Emphasized
Small
Strong
Superscripted
Subscripted
Deleted
Nota: Toate aceste tag-uri necesita tag-uri de inchidere.
Culoarea si modelul
Pt dimensiunea, culoarea si modelul corpului de litera folosim tag-ul <font> si </font>.
<font color="#ff0000" size="2" face="arial">Text</font>
Color:
Folosit pt a stabili culoarea textului marcat. Valorile acestei proprietati se pot scrie fie cu
ajutorul codului hexazecimal al culorii, fie cu ajutorul numelui culorii respective.
<font color="#FF0000">Text</font>
<font color="red">Text</font>
Despre culori puteti afla mai multe la capitolul Culori
Size:
Folosit pentru a specifica dimensiunea fontului utilizat si poate lua valori de la 1 la 7.
<font size="3">Text</font>
Face:
Folosit pentru alegerea corpului de litera utilizat.
<font face="Arial">Text</font>
<font face="Impact">Text</font>
Linii Orizontale
Liniile orizontale sunt folosite pentru a separa anumite arii intr-o pagina web. Tag-ul pentru o
linie orizontala este <hr />. Acestui tag i se pot adauga anumite atribute ca : Width (lungimea
liniei), Size (pentru linie ingrosata dar transparenta) sau Noshade (pentru linie ingrosata plina).
Exemple :
<hr width="300px" />
<hr width="30%" />
<hr size="5" />
<hr noshade="noshade" />
Se pot folosii si mai multe atribute untr-un singur tag :

<hr width="200px" size="3" noshade="noshade" />
Comentariile
In cadrul documentului HTML puteti face comentarii, care nu vor fi afisate de catre browser.
Comentariile sunt incadrate de marcajele "".
Exemplu:


Culori
Am vazut in capitolul anterior ca textele din paginile HTML pot avea diverse culori cu un tag
de tipul <font color="#00FF00">Text</font>. Va voi prezenta in continuare sistemul de
codificare a culorilor pentru paginile web. Valorile atributelor referitoare la culorile textului,
fondului sau ale altor elemente se pot exprima fie prin codul hexazecimal al culorii respective,
fie prin numele unei culorii ( Red, blue, yellow...etc).
Exemplu:
<p>
<font color="#000000">Acest text este negru</font><br />
<font color="red">Acest text este rosu</font><br />
<font color="yelllow">Acest text este galben</font><br />
<font color="green">Acest text este verde</font> <br />
<font color="#0000FF">Acest text este albastru</font><br />
</p>
Exista 16.7 milioane de culori diferite in sistemul de culori hexadecimal (hex) incepand de la
#FFFFFF care este Alb, pana la #000000 care este Negru.
Fiecare cod hexadecimal este impartit in 3 grupe :
-#XXxxxx - Tenta de rosu
-#xxXXxx - Tenta de verde
-#xxxxXX - Tenta de albastru
Acordand ponderi exprimate prin aceste numere in baza 16 culorilor rosu, verde si albastru
(RGB sau Red, Green, Blue) se poate obtine orice culoare. Cea mai mica valoare care poate fi
data este 0 (hex 00),
iar cea mai mare este 255 (hex FF).
Dar este de preferat ca atunci cand utilizati culori sa apelati la una din culorile standard.
Iata un tabel cu nume si coduri pentru cateva culori :
Nume culoare
Hexadecimal
White
#FFFFFF
Black
#000000
Red
#FF0000
Orange
#FFA500
Yellow
#FFFF00
Green
#00FF00
Blue
#0000FF
Indigo
#4B0082
Violet
#EE80EE
Brown
#993300
Cyan
#00FFFF
Pink
#FFC0CB
Purple
#800080
Grey
#808080
Mangeta
#FF00FF
Culoare
Folosind acelasi sistem vom putea specifica culoarea de fundal (background) a unei pagini
web, in cadrul tag-ului <body> despre care v-am vorbit la inceputul acestui curs:
<body bgcolor="#00FF00">
<body bgcolor="green">
Tag-ul <body> mai poate contine si alte informatii legate de culori, ca de exemplu culoarea cu
care vor fi afisate link-urile catre alte pagini folosind atributele LINK si VLINK .
-LINK este culoare pentru link.
-VLINK este culoare pentru link-urile deja vizitate.
<body bgcolor=#808080 link=#00FF00 vlink=#0000FF>
Dar despre link-uri vom vorbi mai multe in capitolul Link-uri.
Liste
De multe ori, in redactarea unui text ajungem in punctul in care trebuie sa enumeram un set de
elemente. Prezentarea acestora trebuie realizata in asa fel incat relatiile dintre ele, sau dintre ele
si eventualele "subelemente" sa fie cat mai clar exprimate din punct de vedere vizual. Pentru
aceasta se folosesc diferitele tipuri de liste.
Listele sunt de trei feluri: Neordonate, Ordonate si Liste de Definitii.
Liste neordonate
Lista neordonata (nenumerotata)este probabil cea mai folosita in cadrul documentelor HTML.
Pentru a marca inceputul si sfarsitul unei liste neordonate se foloseste tag-ul <ul> pentru
deschidere si </ul> pentru inchiderea listei, iar pentru fiecare element prezentat in lista se
folosesc tag-urile <li> si </li>.
Exemple
<h3>Lista neordonata 1</h3>
<ul>
<li>Ianuarie</li>
<li>Februarie</li>
<li>Martie</li>
<li>Aprilie</li>
</ul>
<h3>Lista neordonata 2</h3>
<ul type="circle">
<li>Pixuri</li>
<ul type="square">
<li>Albastre</li>
<li>Negre</li>
<li>Verzi</li>
</ul>
<li>Rigle</li>
<li>Mine</li>
</ul>
Cu ajutorul atributului Type putem schimba marcajul elementelor din lista, dupa cum ati vazut
in exemplul de mai sus.
Valorile posibile pentru Type sunt:
Disc - Disc
Circle - Cerc
Square - patrat
Liste Ordonate
Diferenta intre lista neordonata si cea ordonata este faptul ca listele ordonate atribuie ca marcaj
fiecarui element un numar sau o litera. Pentru a marca inceputul si sfarsitul unei liste
ordonate(numerotate) se foloseste tag-ul <ol> pentru deschidere si </ol> pentru inchiderea listei,
iar pentru fiecare element prezentat in lista se folosesc la fel ca la listele neordonate tag-urile <li>
si </li>.
Exemplu:
<h3>Lista ordonata</h3>
<ol>
<li>Creioane</li>
<li>Carioci</li>
<li>Pixuri</li>
<ol type="a">
<li>Albastre</li>
<li>Negre</li>
</ol>
<li>Rigle</li>
</ol>
La fel ca la lista neordonata cu ajutorul atributului Type putem schimba marcajul elementelor din
lista.
Valorile posibile pentru Type sunt:
1 - Pentru cifre arabe - 1,2,3
i - Pentru cifre romane mici - i,ii,iii

I - Pentru cifre romane mari- I,II,III
a - Pentru litere mici - a,b,c
A - Pentru litere mari - A,B,C
Liste de definitii
O lista de definitii este o lista de elemente carora li se pot adauga o descriere.
Pentru a marca inceputul si sfarsitul unei liste de definitii se foloses tag-urile <dl> si </dl>.
Pentru termenul de definit se folosesc tag-urile <dt> si </dt> , iar pentru descrierea definitiei tagurile <dd> si </dd>.
Exemplu:
<h4>Lista de definitii</h4>
<dl>
<dt>Tag</dt>
<dd>Element de marcare in HTML</dd>
<dt>Head</dt>
<dd>Contine informatiile de identificare a paginii</dd>
<dt>Body</dt>
<dd>Cuprinde continutul paginii</dd>
</dl>
Tabele
Tabelele sunt unele din cele mai provocatoare lucruri din codul HTML. Nu sunt greu de creat si
de folosit dar au un cod mai lung si necesita mai multa atentie.
Tabele incep cu tag-ul <table> si se inchid cu tag-ul </table>. Fiecare rand din tabel este definit
cu tag-urile <tr> si </tr>, in fiecare rand al tabelului se gasesc casute care sunt definite de tagurile <td> si </td>.
De multe ori veti avea nevoie de un titlu al coloanei, pentru acesta se folosesc tag-urile <th> si
</th>.
Exemplu:
<table border=1>
<tr>
<th>Titlu 1</th><th>Titlu 2</th><th>Titlu 3</th>
</tr>
<tr>
<td>Casuta 1</td><td>Casuta 2</td><td>Casuta 3</td>
</tr>
<tr>

</tr>
</table>
Tag-urile de definire a tabelelor pot avea diverse atribute, pentru formatarea tabelului.
Astfel, tag-ul <table> poate avea urmatoarele atribute:
- width=n sau width=n% - acesta specifica lungimea intregului tabel in pixeli width="400" sau in
procente fata de lungimea intregii ferestre width="80%" .
- height=n sau height=n% - similar cu width, dar pentru inaltimea intregului tabel.
exemple: height="200" sau height="70%" .
- border=n - daca n este 0 atunci tabelul nu va avea cadru (linii de delimitare a celulelor).
Daca n este 1 atunci acesta va avea cadru, daca nu specificam atributul border atunci tabelul nu
va avea cadru.
- cellspacing=n - specifica spatiul dintre casute, in pixeli.
- cellpadding=n - specifica spatiul dintre marginea unei casute si continutul acesteia, in pixeli.
- align="left"|"center"|"right" - pentru pozitia textului in casuta ( <td align="center"> ).
Exemplu:
<table width="500" height="50%" border=1 cellpadding=1 cellspacing=10>
<tr>
<th>Titlu 1</th><th>Titlu 2</th><th>Titlu 3</th>
</tr>
<tr>
</tr>
<tr>
</tr>
</table>
Dupa cum ati vazut in exemplul de mai sus, se pot folosii mai multe atribute in cadrul aceluiasi
tag <table>.
Adaugarea atributului rowspan=n tag-ului <td> permite acelei casute sa se intinda pe n randuri.
Adaugarea atributului colspan=n tag-ului <td> permite acelei casute sa se intinda pe n coloane.
<table border=1>
<tr>
<td>Casuta 1</td><td>Casuta 2</td><td rowspan=2>Casuta 3&6</td>
</tr>
<tr>
<td>Casuta 4</td><td>Casuta 5</td>
</tr>
</table>
<table border=1>
<tr>
</tr>
<tr>
<td colspan=3 align="center">Casuta 4,5,6</td>
</tr>
</table>
Link-uri
Un element foarte important intr-o pagina web il constituie link-urile. Este foarte util sa adaugati
un link intr-o pagina iar atunci cand dati click pe el sa fiti trimis in alta pagina sau in alta parte a
aceleiasi pagini sau chiar catre alt site. Pentru link-uri se foloseste tag-ul <a href="locatie"> si
tag-ul de inchidere </a>, tot ceea ce veti scrie intre aceste doua tag-uri va aparea in pagina
colorat si subliniat. In momentul in care veti face click pe acel text browser-ul va fi trimis catre
acea locatie.
Si o imagine sau un buton se poate folosi drept link, dar despre asta vom vorbi la capitolul
Imagini.
Exemplu:
Apasati <a href="Pagina 2.html">aici</a> pentru pagina 2.
Atributul target:
<a href="http://notepad-plus.sourceforge.net/uk/site.htm" target="_blank">Notepad++</a>
Dupa cum puteti vedea in exemplul de mai sus am adaugat si atributul target="_blank". Va voi
prezenta doua valori pentru Target care sunt simple si foarte utile:
target="_blank" - pentru a deschide link-ul intr-o ferestra noua, astfel incat vizitatorul nu trebuie
sa paraseasca pagina dumneavoastra.
target="_self" - pentru a deschide link-ul in aceeasi fereastra.
O alta varianta este posiblitatea transmiterii unui e-mail. Astfel, codul de mai jos afiseaza
"Contact !", text care prin apasare va deschide o fereastra pentru transmiterea unui mesaj la
adresa electronica a destinatarului mesajului.
<a href="mailto:contact@gmail.com">Contact !</a>
Tot cu ajutorul link-urilor puteti da posibilitatea vizitatorului sa salveze de pe site-ul
dumneavoastra un fisier sau o arhiva:
<a href="program.rar">Salveaza programul.</a>

Pentru inceput este bine ca toate documentele HTML, imaginile si alte fisiere sa fie in acelasi
director cu locatia documentului index.html. Astfel incat, atunci cand puneti link-urile sa nu fie
nevoie sa introduceti toata locatia documentului ci doar denumirea.
In cazul in care fisierul se gaseste in alt director atunci se foloseste:
<a href="director/program.rar">Salveaza programul.</a>
Imagini
Puteti adauga paginii dumneavoastre imagini. Tag-ul folosit pentru a adauga o imagine este
<img scr="imagine.jpg">. Acest tag nu are tag de inchidere.
Exemplu:
<img scr="imagine.jpg">
Este recomandata adaugarea atributelor height si width, acestea permit imaginii sa aiba diferite
dimensiuni.
<img scr="imagine.jpg" height="200" width="100">
Deasemenea folosirea atributului border=n unde n este grosimea chenarului din jurul pozei in
pixeli.
<img scr="imagine.jpg" height="200" width="100" border="3">
O imagine poate fi aliniata, astfel incat textul sa poata fi scris in staga sau in dreapta imaginii.
Folosind atributul align="left | right".
<p>
<img scr="imagine.jpg" height="200" width="100" border="3" align="right">
Aceasta imagine este aliniata drepata si permite scrierea textului in partea stanga a imaginii.
</p>
Aceasta imagine este aliniata drepata si permite scrierea textului
in partea stanga a imaginii.
O imagine se poate folosi si drept link, asta inseamna ca in momentul unui click pe imaginea
respectiva sunteti trimis catre o alta pagina. Acest lucru este foarte usor de facut, intre tag-urile
de adaugare link
(<a href="adresa"> si </a>) se pun tag-urile de adaugare imagine.
Exemplu:
<a href="http://www.google.com" target="_Blank"><img scr="imagine.jpg"></a>
O imagine poate fi folosita si ca fundal (Background) pentru pagina de internet. Pentru aceasta
se introduce atributul background in cadrul tag-ului <body>.
Exemplu:
<body background="imagine.jpg">

Introducere in 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

Introducere in HTML

Încărcat de

Drepturi de autor:

Formate disponibile

Introducere

Pagina principala trebuie denumita index.html, majoritatea serverelor recunosc pagina

Structura unui document

Heading-urile si paragrafele suporta atribute de aliniere in pagina: Aliniere stanga, in centru, la

Nota: Toate aceste tag-uri necesita tag-uri de inchidere.

<hr width="30%" />

<hr size="5" />

<hr noshade="noshade" />

Se pot folosii si mai multe atribute untr-un singur tag :

Dar despre link-uri vom vorbi mai multe in capitolul Link-uri.

i - Pentru cifre romane mici - i,ii,iii

<td>Casuta 4</td><td>Casuta 5</td><td>Casuta 6</td>

<a href="program.rar">Salveaza programul.</a>

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