Sunteți pe pagina 1din 4

Toate paginile HTML incep si se termina cu etichetele <html> si </html>.

In interiorul acestor etichete gasim perechile <head>, </head> si <body>, </body>.


Marcajul < BODY > ... < / BODY > ncadreaz coninutul propriu-zis al paginii, avnd
urmtoarele atribute: bgcolor, background,
Sintaxa este: < body bgcolor="pink" > sau < body background="imagine.jpg" >
head contine titlul paginii intre etichetele <title> si </title>Exemplu: o pagina HTML cu titlul
Exemplu iar continutul Continut pagina
<html>
<head>
<title>Titlu</title>
</head>
<body>
Continut pagina
</body>
</html>

Formatare text
In HTML trecerea la un rand nou se face doar prin introducerea etichetei <br> iar pentru
paragraf nou cu eticheta <p>.
Exemplu
HTML Afisare
Proba text.<br>
Text pe un rand nou.<p>
Text intr-un paragraf nou.
Proba text.
Text pe un rand nou.
Text intr-un paragraf nou.
<hr> introduce o linie linie orizontala si trecerea la un rand nou.

Folosind etichete adecvate textul poate fi formatat.
Spre exemplu fonturilor li se poate modifica: marimea, culoarea, forma (normal, bold, italic),
familia (Arial, Verdana, etc.), textul poate fi aliniat pe orizontala sau verticala iar titlurile
(header), de la 1 la 6, sunt diferite ca marime (1 cel mai mare iar 6 cel mai mic).
-ului < Font > ... < / Font > cu atributele:
- pentru stabilirea fonturilor, avnd sintaxa < font face="Tahoma" Utilizm fontul
Tahoma > < / font >;
- pentru stabilirea dimensiunii fonturilor, avnd sintaxa < font size="2" Acest text are
dimensiunea 2 > < / font >;
- pentru stabilirea culorii fonturilor, avnd sintaxa < font color="red" Acest text este rou
> < / font >;
Stabilirea elementelor de stil se face cu ajutorul tag-urilor < I > ... < / I >, < B > ... < / B >, < U >
... < / U >, < S > ... < / S >, avnd ca efect nclinarea, ngroarea, sublinierea i tierea textului
cu o linie.
<b>text bold</b>
text bold
<i>text cursiv</i>
text cursiv
<u>text subliniat</u>
text subliniat
<font color="red">font rosu</font>
font rosu
<font face="Courier">font Courier</font> font Courier
<font size="6">font size=6</font>
font size=6
<h1>Titlu 1</h1>
Titlu 1
<h2>Titlu 2</h2>
Titlu 2
<h3>Titlu 3</h3>
Titlu 3
<h4>Titlu 4</h4>
Titlu 4
<h5>Titlu 5</h5>
Titlu 5
<h6>Titlu 6</h6>
Titlu 6


Liste
Listele sunt un mod simplu de organizare a informatiei si pot fi neordonate, ordonate si de
definitii.
Liste neordonate
Aceste liste sunt delimitate de etichetele <ul> si </ul> iar elementele de <li> si </li>.
Exemplu
HTML Afisare
Exemple de fructe:
<ul>
<li>mere</li>
<li>pere</li>
<li>struguri</li>
</ul>
Exemple de fructe:
mere
pere
struguri
Elementele listei pot fi particularizate folosind atributul type care poate lua valorile square,
circle si disc.
Exemplu
HTML Afisare
Exemple de legume:
<ul>
<li type="square">rosii</li>
<li type="circle">cartofi</li>
<li type="disc">morcovi</li>
</ul>
Exemple de legume:
rosii
o cartofi
morcovi
Liste ordonate
Aceste liste sunt delimitate de etichetele <ol> si </ol> iar elementele de <li> si </li>.
Exemplu
HTML Afisare
Exemple de combustibili:
<ol>
<li>benzina</li>
<li>motorina</li>
<li>gaz lichefiat</li>
</ol>
Exemple de combustibili:
1. benzina
2. motorina
3. gaz lichefiat
Elementele listei pot fi particularizate folosind atributul type care poate lua valorile A (litere
mari), a (litere mici), I (cifre romane mari), i (cifre romane mici), 1 (optiunea default):

Exemplu
HTML Afisare
Medii de stocare:
<ol>
<li type="I">HDD-ul</li>
<li type="I">discheta</li>
<li type="I">CD-ROM-ul</li>
</ol>
Medii de stocare:
I. HDD-ul
II. discheta
III. CD-ROM-ul
Legaturi
Legaturi
Legatura (link-ul) este o eticheta foarte importanta in HTML deoarece confera utilizatorului posibilitatea
navigarii de la o pagina la alta. Deobicei link-ul este subliniat iar atunci cand suntem deasupra lui cursorul
isi schimba forma.
Link-ul este definit cu etichetele <a> si </a> si are atributele:
href - adresa fisierului destinatie
target - in ce fereastra se va deschide fisierul destinatie
title - mica descriere asociata legaturii afisata in momentul in care mouse-ul se afla deasupra legaturii
<a href="adresa-fisier" target="_blank" title="titlu">
Adresa fisierului destinatie poate fi exprimata astfel:
nume fisier, daca se afla in acelasi folder cu pagina curenta
<a href="fisier.html">


Imagini
Folosind imagini pagina capata un plus de atractivitate dar puteti plati pretul unei incarcari
greoaie daca dimensiunile imaginii sunt mari.
Cateva din formatele de imagini utilizate in paginile web sunt: JPEG (*.jpg sau *.jpeg), GIF
(*.gif), BMP (*.bmp), PNG (*.png).
Eticheta folosita pentru inserarea unei imagini in pagina este <img> si are urmatoarele
atribute:
src = sursa, locul unde se afla imaginea
width = latimea imaginii
height = inaltimea imaginii
alt = numele care inlocuieste imaginea pana aceasta se incarca sau cand nu a fost gasita
border = chenar (0 = lipsa bordura)
Dimensiunea imaginii afisate de browser este stabilita de argumentele width si height care
pot fi diferite de dimensiunile imaginii originale, caz in care imaginea va fi redimensionata
automat de catre browser.
Exemplu: o imagine cu latime 100px, inaltime 75px, alt=poza si border=0 si inca o data cu
border=1
HTML Afisare
<img src="poza.jpg" width="100" height="75"
alt="poza" border="0">

<img src="poza.jpg" width="100" height="75"
alt="poza" border="1">

Tabele
Aceste etichete au o mare utilizare deoarece tabele constituie structura care sta la baza
organizarii marii majoritati a paginilor web (inclusiv cea de fata).
Tabelul este format din linii si coloane impartind zona in celule. Fiecare celula pastreaza
informatia care va fi afisata. Pentru o afisare corecta a tabelului fiecare rand va avea acelasi
numar de celule. Daca dorim ca o celula sa fie goala vom introduce un spatiu gol (space)
sau codul echivalent &nbsp;.
Pentru inserarea unui tabel este folosita perechea de etichete <table> si </table>, pentru
un rand <tr> si </tr> iar pentru o celula <td> si </td>.
Tabele pot fi imbricate, adica in interior pot contine unul sau mai multe tabele.
Exemplu: tabel cu 2 coloane si 2 randuri, border 1, coloana 1 latime 80px, coloana 2 latime
160px, fiecare celula are o alta culoare de fond (bgcolor)
HTML Afisare
<table border="1"> <tr><td width="80"
bgcolor="red">rosu</td><td width="160"
bgcolor="yellow">galben</td></tr> <tr><td
bgcolor="white">alb</td><td bgcolor="green">verde</td></tr>
</table>
rosu galben
alb verde

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