Documente Academic
Documente Profesional
Documente Cultură
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>
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).
1
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">
<html>
<head>
<title>Titlu</title>
</head>
<body>
Continut pagina
</body>
</html>
Formulare
Folosind formularele webdesignerul sau administratorul site-ului poate colecta
diverse informatii de la vizitatori.
Cele mai importante atribute ale etichetei <form> sunt action si method.
action metioneaza adresa scriptului (aflat pe server) care va interpreta
formularul. Aceste scripturi pot fi scrise in limbajele PHP sau Pearl.
method indica metoda folosita de browser pentru transmiterea formularului.
Poate lua valorile get si post.
get - datele sunt trimise prin adaugarea la adresa indicata de action. Permite
trimiterea unor mici cantitati de date.
post - datele sunt trimise separat si sunt permise cantitati mari de date.
2
Exemplu: formular cu 2 campuri, buton Trimite si buton Sterge
HTML Afisare
<form action="script.php" method="post">
Nume:<input type="text" name="nume">
Prenume:<input type="text" Nume:
name="prenume"><br> Prenume:
<input type="submit" value="Trimite"><input
type="reset" value="Sterge">
</form>
HTML Afisare
<form action="script.php" method="post"> Nume:
Nume:<input type="text" name="nume"> Prenume:
Prenume:<input type="text" Telefon:
name="prenume"><br> Fax:
Telefon:<input type="text" Email:
name="telefon"><br>
Fax:<input type="text" name="fax"><br> Sexul: Masculin Feminin
Email:<input type="text"
name="email"><br> Studii:
Sexul: Masculin<input type="radio"
name="sex" value="m"> Feminin<input Accesati Internetul de la:
type="radio" name="sex" value="f"> Serviciu
Acasa
Studii: <select> <option Internet cafe
value="scoala">Scoala profesionala
<option value="liceu">Liceu <option Fisier:
value="facultate">Facultate </select>
Observatii:
Accesati internetul de la:
Serviciu<input type="checkbox"
name="serv">
3
Acasa<input type="checkbox"
name="acasa">
Internet cafe<input type="checkbox"
name="cafe">
<input type="submit"
value="Trimite"><input type="reset"
value="Sterge">
</form>
Cadre
Exemplele prezentate in capitolele anterioare incarcau o singura pagina HTML in
fereastra browserului.
Sunt si situatii in care imaginea afisata de browser este formata din mai multe
pagini HTML numite cadre. Caracteristic acestor pagini este ca perechea de
etichete <body> </body> este inlocuita de <frameset> </frameset> iar in
interiorul lor cadrele sunt delimitate de <frame> si </frame>.
Cadrele sunt introduse prin pereche de etichete <frame> </frame> care suporta
atributele:
src fisierul sau adresa fisierului introdus
bordercolor culoarea chenarului cadrului curent conform modelului #rrggbb
noresize dezactiveaza posibilitatea vizitatorului de a redimensiona cadrul
scrolling adauga cadrului bare de defilare cu valorile yes no si auto
4
Exemplu: pagina cu doua cadre orizontale in proportia 20% si 80% din inaltimea
totala. Pagina de sus are chenarul rosu iar cea de jos are scroll.
<html>
<head>
<title>Exemplul 8_1</title>
</head>
<frameset rows="20%,80%">
<frame src="exemplu8_1_1.html" bordercolor="#ff0000">
<frame src="exemplu8_1_2.html" scrolling="yes">
</frameset>
</html>
Exemplu: pagina cu doua cadre verticale in proportia 40% si 60% din latimea
totala, fara posibilitatea de redimensionare a cadrelor
<html>
<head>
<title>Exemplul 8_2</title>
</head>
<frameset cols="40%,60%">
<frame src="exemplu8_2_1.html">
<frame src="exemplu8_2_2.html" noresize>
</frameset>
</html>
Exemplu: pagina cu doua cadre. In cadrul din stanga sunt link-ri catre alte pagini
care se vor deschide in cadrul din stanga (se poate verifica functionarea
atributului target al legaturii). Cadrul din stanga va avea scroll.
In situatia in care browserul folosit nu suporta pagini care contin cadre imaginea
afisata va fi goala. Pentru a evita acest lucru vom introduce un mesaj incadrat de
<body> si </body> intre etichetele <noframes> si </noframes> prin care
informam vizitatorul ca foloseste un browser care nu suporta cadre.
Cadre in-line
Sunt blocuri care se introduc in pagina prin perechea de etichete <iframe> si
5
</iframe> si au atributele:
src fisierul sau adresa acestuia
height inaltimea cadrul
width latimea cadrul
frameborder grosimea bordurii (chenarului)
scrolling adauga bare de defilare cu valorile yes no si auto
align aliniaza cadrul (left, right, center, top, bottom, middle)
vspace distanta peste si sub cadru
hspace distanta in stanga si in dreapta de cadru
<html>
<head>
<title>Exemplul 8_4</title>
</head>
Mai jos este un cadru in-line cu urmatori parametrii:<br>
width="300" si height="200" hspace="200" vspace="100" scrolling="yes"<br>
<iframe src="pag.html" width="300" height="100" hspace="200" vspace="100"
scrolling="yes">Browserul folosit nu suporta cadre in-line</iframe>
</body>
</html>
Videoclipuri
Formatele de videoclipuri utilizate in paginile web sunt: MPEG (*.mpg sau
*.mpeg), QuickTime (*.mov), AVI (*.avi).
HTML Afisare
<a href="1.avi">fisier video</a> fisier video
A doua varianta este acceptata doar de browserul internet Explorer care permite
atribute speciale in eticheta <img>:
dynsrc - fisierul sursa video care va fi vizionat
loop - numarul de repetitii ale fisierului ("infinite" sau "-1" pentru infinit si un
numar intreg care indica de cate ori va fi vizionat fisierul)
start - indica momentul in care fisierul va fi vizionat (fileopen=cand pagina a fost
6
incarcata, mouseover=cand mose-ul este deasupra imaginii)
controls - afiseaza butoanele de control
Sunete
Cateva din formatele de sunete utilizate in paginile web sunt: MIDI (*.mid sau
*.midi), WAVE (*.wav), AU (*.au).
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)
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 .
Tabele pot fi imbricate, adica in interior pot contine unul sau mai multe tabele.
HTML Afisare
7
<table border="1"> <tr><td width="80"
bgcolor="red">rosu</td><td width="160" rosu galben
bgcolor="yellow">galben</td></tr> <tr><td
bgcolor="white">alb</td><td bgcolor="green">verde</td></tr> alb verde
</table>
HTML Afisare
<table border="1"> <tr> <td bgcolor="white">R1 C1</td> <td
bgcolor="yellow">R1 C2</td> <td bgcolor="white">R1 R1 R1 R1 R1
C3</td> <td bgcolor="yellow">R1 C4</td> </tr> <tr> <td C1 C2 C3 C4
colspan="2" bgcolor="red">R2 C1+C2</td> <td R2 R2 R2
bgcolor="yellow">R2 C3</td> <td bgcolor="red">R2 C4</td> C1+C2 C3 C4
</tr> <tr> <td rowspan="2" bgcolor="white">R3 C1 + R4
C1</td> <td bgcolor="yellow">R3 C2</td> <td R3 R3 R3 R3
bgcolor="white">R3 C3</td> <td bgcolor="yellow">R3 C1 + C2 C3 C4
C4</td> </tr> <tr> <td bgcolor="red">R4 C2</td> <td R4 R4 R4 R4
bgcolor="yellow">R4 C3</td> <td bgcolor="red">R4 C4</td> C1 C2 C3 C4
</tr> </table>
Daca dorim sa evidentiem continutul primului rand (capul de tabel) putem folosi
perechea de etichete <th> si </th> in locul etichetelor <td> si </td>. Astfel
continutul celulei va fi afisat ingrosat si aliniat pe mijloc.
8
Exemplu: un tabel cu 3 randuri si 2 coloane folosind pe primul rand etichetele
<th> si </th>
HTML Afisare
<table border="1"> <tr> <th width="120">Titlul 1</th> <th Titlul 1 Titlul 2
width="120">Titlul 2lt;/th> </tr> <tr> <td>1</td> <td>2</td> 1 2
</tr> <tr> <td>3</td> <td>4</td> </tr> </table> 3 4
HTML Afisare
Necesar alimente
<table border="1"> <caption>Necesar alimente</caption>
<tr> <th width="120">Produse</th> <th Produse Cantitate
width="120">Cantitatelt;/th> </tr> <tr> <td>Fructe</td> Fructe 1 kg
<td>1 kg</td> </tr> <tr> <td>Legume</td> <td>5 kg</td> Legume 5 kg
</tr> <tr> <td>Carne</td> <td>1,5 kg</td> </tr> </table>
Carne 1,5 kg
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)
9
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.
HTML Afisare
Pentru a micsora timpul incarcarii complete a paginii exista programe care optimizeaza imaginile.
Optimizarea consta in:
1. reducerea dimensiunii imaginii fara degradarea majora a calitatii
2. eliminarea informatiilor tip metadata asociate imaginii. Aceste date (EXIF/IPTC) sunt asociate automat de
programele de grafica (de ex. Adobe Photoshop) sau de aparatele de fotografiat digitale.
Legaturi
3.1 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.
10
_top pagina va fi incarcata in fereastra top a cadrului
_self pagina va fi incarcata in aceeasi fereastra
HTML Afisare
<a href="http://www.academiaonline.ro">Academia
Academia Online
Online</a>
HTML Afisare
<a href="mailto:test@test.ro">Trimite e-mail</a> Trimite e-mail
<a href='mailto:test@test.ro?subject="subiect
Trimite e-mail
prestabilit"'>Trimite e-mail</a>
3.2 Ancore
Se pot adauga puncte de reper (ancore) pentru o deplasare mai usoara in cazul
unor pagini HTML lungi sau catre un loc anume aflat intr-o alta.
Ancora se defineste tot intre etichetele <a> si </a> dar cu atributul name. Pentru
a face trimitere catre ancora se introduce un link cu atributul href avand ca
valoare denumirea ancorei.
Exemplu:
Liste
11
Listele sunt un mod simplu de organizare a informatiei si pot fi neordonate,
ordonate si de definitii.
Exemplu
HTML Afisare
Exemple de fructe: Exemple de fructe:
<ul>
<li>mere</li> • mere
<li>pere</li> • pere
<li>struguri</li>
</ul> • struguri
Elementele listei pot fi particularizate folosind atributul type care poate lua
valorile square, c[hcXyISPtaFdoTqjjTLudh]le si disc.
Exemplu
HTML Afisare
Exemple de legume:
Exemple de legume:
<ul>
rosii
<li type="square">rosii</li>
<li type="circle">cartofi</li>
o cartofi
<li type="disc">morcovi</li>
</ul>
• morcovii
Exemplu
HTML Afisare
Exemple de combustibili: Exemple de combustibili:
<ol>
<li>benzina</li> 1. benzina
<li>motorina</li> 2. motorina
<li>gaz lichefiat</li>
</ol> 3. gaz lichefiat
12
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: Medii de stocare:
<ol>
<li type="I">HDD-ul</li> I.HDD-ul
<li type="I">discheta</li> II.discheta
<li type="I">CD-ROM-ul</li>
</ol> III.CD-ROM-ul
Exemplu
HTML Afisare
Legenda:
<dl> Legenda:
<dt>HTML</dt> HTML
<dd>Hyper Text Mark-ul Language</dd> Hyper Text Mark-ul Language
<dt>IP</dt> IP
<dd>internet protocol</dd>
</dl>
Formatare text
In HTML trecerea la un rand nou se face doar prin introducerea etichetei <br> iar
pentru paragraf nou cu eticheta <p>.
13
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>.
Exemplu
HTML Afisare
text normal text normal
<b>text bold</b> text bold
<i>text cursiv</i> text cursiv
<u>text subliniat</u> text subliniat
<del>text taiat</del>
exponent
<sup>exponent</sup>
<sub>indice</sub> indice
14
Harti de imagini
Hartile de imagini permit declararea unor zone din imagine ca legaturi catre alte
pagini web si implica doua aspecte.
Imaginea este declarata ca fiind harta. Pentru aceasta eticheta <img> a imaginii
are urmatoarele atribute:
src fisierul sau adresa fisierului imagine
usemap are valoarea de genul #nume care este folosit un interiorul etichetei
<map> prezentate mai jos
<html>
<head>
<title>Exemplul 10</title>
</head>
<body>
<b>Harti de imagini</b><p>
<img src="harta.gif" usemap="#harta" width="280" height="160" border="0">
<map name="harta">
<area shape="rect" coords="20,20,70,70" href="pag1.html">
<area shape="rect" coords="20,90,120,140" href="pag2.html">
<area shape="circle" coords="200,80,30" href="pag3.html">
<area shape="circle" coords="200,80,60" href="pag1.html">
<area shape="poly" coords="90,70,120,70,120,20" href="pag3.html">
</map>
</body>
</html>
15