HTML este prescurtarea de la Hyper Text Mark-up Language si este codul care sta la baza paginilor web

HTML este prescurtarea de la Hyper Text Mark-up Language si este codul care sta la baza paginilor web.

Notiuni de baza

HTML este prescurtarea de la Hyper Text Mark-up Language si este codul care sta la baza paginilor web.
Paginile HTML sunt formate din etichete sau tag-uri si au extensia .html sau .htm. In marea lor majoritate aceste etichete sunt pereche, una de deschidere <eticheta> si alta de inchidere </eticheta>. Browserul interpreteaza aceste etichete afisand rezultatul pe ecran. HTML-ul nu este un limbaj case sensitiv (nu face deosebirea intre litere mici si mari).

Pagina principala a unui domeniu este fisierul index.html. Aceasta pagina este setata a fi afisata automat la vizitarea unui domeniu.
De exemplu la vizitarea domeniului www.nume.ro este afisata pagina www.nume.ro/index.html.

Unele etichete permit utilizarea de atribute care pot avea anumite valori:
<eticheta atribut="valoare"> ... </eticheta>

Componenta unui document HTML este:
1. versiunea HTML a documentului
2. zona head cu etichetele <head> </head>
3. zona body cu etichetele <body> </body> sau <frameset> </frameset>

Toate paginile HTML incep si se termina cu etichetele <html> si </html>.
In interiorul acestor etichete gasim perechile <head>, </head> si <body>, </body>.

head contine titlul paginii intre etichetele <title> si </title>, descrieri de tip <meta>, stiluri pentru formatarea textului, scripturi si linkuri catre fisiere externe (de exemplu scripturi, fisiere de tip CSS sau favicon).

Etichetele de tip meta contin cuvinte cheie, descrierea paginii, date despre autor, informatii utile motoarelor de cautare si au urmatorul format:
<META NAME="nume" CONTENT="continut">

body gazduieste practic toate etichetele afisate de browser pe ecran.

<html>
<head>
<title>Titlu</title>
</head>
<body>
Continut pagina
</body>
</html>

Si in HTML poate fi introdus un comentariu, care bineinteles nu va fi afisat de browser:

Formatare text

In HTML trecerea la un rand nou se face doar prin introducerea etichetei <br> iar pentru paragraf nou cu eticheta <p>.

<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).

Etichetele <div> si </div> delimiteaza un bloc text in vederea formatarii. Unul din atributele blocului div este align care poate lua valorile:
center aliniere pe centru
left aliniere la stanga
right aliniere la dreapta

In situatia in care dorim ca textul introdus sa fie afisat exact asa cum a fost introdus (text preformatat) in fisierul sursa vom folosi pereche de etichete <pre> si </pre>.

HTML	Afisare
text normal	text normal
<b>text bold</b>	text bold
<i>text cursiv</i>	text cursiv
<u>text subliniat</u>	text subliniat
<sup>exponent</sup>	^exponent
<sub>indice</sub>	_indice
<strong>text ingrosat</strong>	text ingrosat
<big>mare</big>	mare
<small>mic</small>	mic
<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
<div align="center">text aliniat pe centru</div>	text aliniat pe centru
<div align="left">text aliniat la stanga</div>	text aliniat la stanga
<div align="right">text aliniat la dreapta</div>	text aliniat la dreapta
<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.

2.1 Liste neordonate
Aceste liste sunt delimitate de etichetele <ul> si </ul> iar elementele de <li> si </li>.

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.

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

cartofi

morcovii

2.2 Liste ordonate
Aceste liste sunt delimitate de etichetele <ol> si </ol> iar elementele de <li> si </li>.

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):

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

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 cind 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

Adresa fisierului destinatie poate fi exprimata astfel:
nume fisier daca se afla in acelasi folder cu pagina curenta
adresa relativa daca se afla pe acelasi server sau disc, indicandu-se calea
adresa URL fiind adresa completa a paginii (de exemplu: http://www.proba.ro/pagina.html)

Atributul target poate lua valorile:
_blank pagina va fi incarcata intr-o noua fereastra
_parent pagina va fi incarcata in fereastra parinte
_top pagina va fi incarcata in fereastra top a cadrului
_self pagina va fi incarcata in aceeasi fereastra

Exemplu: link catre pagina web Academia Online

HTML	Afisare
<a href="http://www.academiaonline.ro">Academia Online</a>	Academia Online

Culoarea linkurilor poate fi modificata introducand in eticheta body urmatoarele atribute:
LINK legatura nevisitata (default albatru)
VLINK legatura visitata (default rosu)

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).

Formatul gif este recomadat pentru realizarea butoanelor si a icoanelor iar jpg pentru fotografii.

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.

Tabele

Aceste etichete au o mare utilizare deoarece tabele constituie structura care sta la baza organizarii marii majoritati a paginilor web.

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  .

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

Atributele etichetei table sunt:
border = bordura (0 = lipsa bordura)
width = latimea tabelului
height = inaltimea tabelului
bgcolor = culoarea de fundal
background = imaginea de fundal
cellspacing = distanta intre celule
cellpadding = distanta dintre marginea celului si continut

Atributele etichetei td sunt:
align = aliniere pe orizontala a continutului (left=stanga, right=dreapta, center=centru)
valign = aliniere pe verticalala a continutului (top=sus, bottom=jos, middle=mijloc)
width = latimea celulei
height = inaltimea celulei
bgcolor = culoarea de fundal
background = imaginea de fundal
colspan = uneste celula cu cea din dreapta ei
rowspan = uneste celula cu cea de sub ea

Exemplu: un tabel in care am folosit colspan pentru a uni celulele 1 si 2 din randul 2 si rowspan pentru a uni celula 1 din randul 3 cu celula 1 din randul 4

HTML

Afisare

R1 C1	R1 C2	R1 C3	R1 C4
R2 C1+C2		R2 C3	R2 C4
R3 C1 + R4 C1	R3 C2	R3 C3	R3 C4
R3 C1 + R4 C1	R4 C2	R4 C3	R4 C4

Sunete

Cateva din formatele de sunete utilizate in paginile web sunt: MIDI (*.mid sau *.midi), WAVE (*.wav), AU (*.au).

In pagini putem introduce:
1. link-uri catre fisiere de sunet
2. sunete care care sa fie audiate direct din pagina web
3. sunet de fond (fundal sonor)

Exemplu: Varianta 1 este un simplu link catre un fisier de sunet

HTML	Afisare
<a href="1.mid">fisier sunet</a>	fisier sunet

A doua varianta mentionata se realizeaza folosind fisiere de tip flash, care pot contine si butoane de control de tip Play, Pause, Stop.

A treia varianta este acceptata doar de browserul Internet Explorer si consta in inserarea in interiorul corpului paginii a etichetei: <bgsound> care poate avea atributele:
src - fisierul sursa de sunet care va fi audiat
loop - numarul de repetitii ale fisierului ("infinite" sau "-1" pentru infinit si un numar intreg care indica de cate ori va fi audiat fisierul)