Limbajul HTML

Limbajul HTML
Spataru
Elena Daniela
Clasa a XIIaC
Colegiul
Economic Rm. Valcea
Limbajul HTML
CUPRINS
1.Limbajul HTML . Notiuni introductive .

2.Crearea unei pagini web .
3.Elemente de baza ale limbajului HTML .
4.Inserarea elementelor , a imaginilor intr-o
pagina web
5.Liste in pagini web .
Limbajul HTML
1.
Limbajul HTML . Notiuni introductive
HTML este prescurtarea de la HyperText Markup Language,

limbajul utilizat n protocolul World Wide Web pentru descrierea
hipertextelor.
HTML nu este un limbaj de programare propriu-zis, ci doar
un limbaj de descriere, coninnd elemente ce permit construirea
paginilor Web.
Documentele HTML sunt exclusiv de tip text (ASCII); prin
urmare ele pot fi editate direct, prin comenzi specifice sistemului
de operare folosit. De exemplu, pentru crearea unui document
HTML n Windows XP se poate utiliza unul din editoarele de texte
incluse n sistemul de operare (Notepad, Wordpad) sau orice alt
editor de texte.
Documentele descrise n HTML pot fi vizualizate cu ajutorul
unor aplicaii speciale denumite browser-e, care lucreaz pe
diferite tipuri de sisteme de calcul , prin urmare, documentele
HTML sunt independente de platforma de lucru .
HTML utilizeaz pentru descrierea documentelor Web
etichete (denumite i tag-uri) specifice pentru fiecare element
descris; etichetele stabilesc att structura documentului, ct i
aspectul acestuia
Limbajul HTML
2.
Crearea unei pagini web
Orice document HTML incepe cu notatia <html> si se termina cu

notatia</html>. Aceste "chestii" se numesc in literatura de specialitate
"TAG-uri".Prin conventie, toate informatiile HTML incep cu o paranteza
unghiulara deschisa " < " si se termina cu o paranteza unghiulara inchisa "
> ".
Tag-urile intre aceste paranteze transmit comenzi catre browser
pentru a afisa pagina intr-un anumit mod.Unele blocuri prezinta delimitator
de sfarsit de bloc, in timp ce pentru alte blocuri acest delimitator este
optional sau chiar interzis.
Intre cele doua marcaje <html> si </html> vom introduce doua
sectiuni:
-sectiunea de antet <head>...</head> si - corpul
documentului <body>...</body>. Blocul <body>...</body> cuprinde
continutul propriu-zis al paginii HTML, adica ceea ce va fi afisat in ferastra
browser-ului.
O eticheta poate fi scrisa atat cu litere mici, cat si cu litere
mari.Adica <HTML> = <HtmL> = <html>. Caracterele "spatiu" si "CR/LF"
ce apar intre etichete sunt ignorate de catre browser.
Deci un prim document HTML ar fi :
<html>
<head> </head>
<body>
</body>
</html>
Titlul unei pagini se obtine inserand in sectiunea <head>...</head> a

urmatoarei linii:
<title>Aceasta este prima mea pagina de Web</title>
In plus, in sectiunea <body>...</body> putem scrie texte cat dorim.

Daca nu intalnim nici un marcaj < sau > atunci interpretorul HTML le va lua
ca texte simple si le va afisa pe ecran.
4
Limbajul HTML
<html>
<head>
<title>Aceasta este prima mea pagina de Web</title>
</head>
<body>
Bine ati venit in pagina mea de Web!
</body>
</html>
Continutul blocului <title>...</title> va aparea in bara de titlu a

ferestrei browser-ului. Daca acest bloc lipseste intr-o pagina HTML, atunci
in bara de titlu a ferstrei browser-ului va aparea numele fisierului.
Daca introducem mai multe linii intr-o pagina browser-ul va afisa
intr-un singur rand, intrucat caracterele " CR/LF " sunt ignorate de browser.
Trecerea pe o linie noua se face la o comanda explicita, care trebuie sa
apara in pagina html.
Aceasta comanda este marcajul <br> ( de la " line break " - intrerupere de
linie ).Folosind aceleasi operatii ca mai sus, vizualizati noua pagina! Veti
vedea textul ce apare in fereastra navigatorului. In plus, pagina dvs. va
avea un titlu nou, cel introdus de dvs.
<html>
<head>
<title> titlul paginii</title>
</head>
<body>
Bine ati venit in <br> pagina mea de Web!
</body>
</html>
Pentru ca browser-ul sa interpreteze corect caracterele " spatiu ", "

tab " si " CR/LF " ce apar in cadrul unui text, acest text trebuie inclus intr-un
bloc<pre>...</pre>.
<html>
<head>
<title>bloc preformatat </title>
</head>
<body><pre>
Prima linie
A doua linie
A treia linie
</pre></body>
</html>
Limbajul HTML
Culoarea fontului
O culoare poate fi precizata in doua moduri:
Printr-un nume de culoare.Sunt disponibile cel putin 16 nume de

culori: aqua, black, fuchsia, gray, green lime, maroon, navy, olive,
purple, red, silver, teal, white si yellow.
Prin constructia " #rrggbb " unde r (red), g (green), sau b (blue) sunt
cifre hexazecimale si pot lua valorile: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, a, A,
b, B, c, C, d, D, e, E, f, F; se pot defini astfel 65536 de culori.
Culoarea unei pagini se precizeaza prin intermediul unui atribut al
etichetei<body>.
Culoarea fondului paginii Web se stabileste cu atributul bgcolor al
etichetei<body>, de exemplu: <body bgcolor = culoare>.
Urmatorul exemplu realizeaza o pagina cu fondul de culoare gri.
<html>
<head>
<title>culoare de fond </title>
</head>
<body bgcolor=gray>
O pagina Web cu fondul GRI!
</body>
</html>
Culoarea textului
Acest lucru se face prin intermediul atributului text al

etichetei <body> dupa sintaxa <body text=culoare>. In urmatorul
exemplu textul are culorea rosie.
<html>
<head>
<title>culoare textului </title>
</head>
<body text=red>
Un text de culoare rosie.
</body>
</html>
6
Limbajul HTML
Limbajul HTML
3.Elemente de baza ale Limbajului HTML

Prin conventie, toate informatiile HTML incep cu o paranteza unghiulara
deschisa (<) si se termina cu o paranteza unghiulara inchisa (>). Acest control sau
marcaj HTML, cum mai este numit comunica unui interpretor HTML (program de
navigare) ca documentul este scris si format in limbajul HTML standard.Desi multe
controale HTML sunt unitati de sine statatoare, unele dintre ele sunt perechi, avand
controale de inceput si sfarsit.
Controlul de inceput se numeste control de deschidere, iar cel de sfarsit se numeste de
inchidere.Cer mai important dintre controalele de baza este <html>, care specifica
faptul ca informatia care urmeaza este scrisa in limbajul HTML.
Marcajul <html> este de tip pereche, deci trebuie sa adaugati un marcaj de
inchidere la sfarsitul documentului, care este la fel ca marcajul de deschidere dar are
adaugata o bara inclinata: </html>. Orice element tableGu intre marcajul de deschidere
tableG de inchidere capata atributul acelui marcaj.Cele mai importante marcaje
nepereche, si cele folosite cel mai des, specifica trecerea la tableGueG tableGu la linie
noua. Ele sunt <p> si <br>.
Fisierele HTML sunt de obicei impartite, din motive de organizare, in doua
sectiuni: antetul (sau headerul) care contine informatia tableGueGive de formatare a
paginii si corpul. Utilizati marcajele pereche <head></head> si <body></body> pentru a
delimita fiecare sectiune.Alta tableGue folositoare si simpla este sa-I dai un titlu cu
ajutorul controlului pereche <title></title> care trebuie sa fie pus in blocul de informatii
<head></head> (vezi bara de sus a ferestrei). Un control util pentru organizare vizuala
a documentului este rigla orizontala care este introdusa de comanda <hr>.
Referintele catre alte pagini exterioare se fac cu ajutorul marcajului <a
href=adresa paginii respective></a>. Referintele catre locul din cadrul aceluiasi
document se fac cu ajutorul unui <a name=ancora interna></a>.
Tabelele reprezinta o extensie importanta a limbajului HTML, avandu-si
originea in laboratoarele de dezvoltare ale corporatiei Netscape Communication. Pentru
a tableGue un table trebuie sa specificati parametrii tabelului, apoi parametrii fiecarei
linii prin comanda <tr></tr> iar, in final, fiecare celula trebuie inconjurata de marcajele
<td></td> date de table.
Limbajul HTML
4.Inserarea elementelor,a imaginilor intr-o pagina web
Limbajul HTML permite creatorilor de pagini Web sa utilizeze, pe

lnga text, si elemente multimedia, cum ar fi :imagini, secvente
video, applet-uri (programe compilate scrise n limbajul Java, care sunt
lansate n executie pe calculatorul utilizatorului). n primele versiuni ale
limbajului HTML erau permise doar imaginile (care puteau fi inserate prin
intermediul elementului IMG) si applet-urile scrise n limbajul Java (care
puteau fi inserate prin intermediul elementului APPLET). HTML 4.0
introduce elementul OBJECT, care reprezinta o solutie generala pentru
inserarea elementelor multimedia n documente HTML.
Elementul IMG este specific pentru inserarea unei imagini ntr-un
document HTML. Elementul IMG nu admite eticheta de sfrsit, prin urmare
nu are continut. Specificarea imaginii ce urmeaza a fi inserata si
informatiile necesare formatarii acesteia se realizeaza prin intermediul
atributelor:
SRC = URL - specifica adresa fisierului care contine imaginea.
Cele mai utilizate formate de fisiere grafice sunt GIF (Graphic Interchange
Format) si JPEG (Joint Photographic Expert's Group), dar si BMP(Bit
Map) .
ALT = text - specifica un text alternativ, care va fi afisat
de browser-ele care nu pot vizualiza imagini.
HEIGHT = dimensiune - defineste naltimea imaginii.
WIDTH = dimensiune - defineste latimea imaginii.
Dimensiunea se poate exprima att n numar de pixeli, ct si n
procente. n cazul n care dimensiunea este exprimata in procente,
procentajul se refera la spatiul disponibil pe orizontala/verticala si nu la
dimensiunile originale ale imaginii.Redimensionarea imaginii se realizeaza
prin scalare, nu prin decupare.
Limbajul HTML
TOP - partea de sus a imaginii este aliniata n raport cu textul;

MIDDLE - imaginea este aliniata central n raport cu textul;
BOTTOM - partea de jos a imaginii este aliniata n raport cu textul;
LEFT - imaginea este aliniata la marginea din stnga a paginii;
RIGHT - imaginea este aliniata la marginea din dreapta a paginii.
HSPACE = dimensiune specifica spatiul inserat n stnga si n
dreapta imaginii.
VSPACE = dimensiune specifica spatiul inserat n partea de sus si
n partea de jos a imaginii.
10
Limbajul HTML
5.Liste in pagini WEB
Unul din cele mai obisnuite elemente din documentele cu mai multe
pagini este un set de definitii, referinte sau indexuri. Glosarele sunt
exemple clasice in acest sens; cuvintele sunt listate in ordine alfabetica,
urmate de definitii ale termenilor respectivi. In HTML, intreaga sectiune a
unui glosar va fi gestoinata printr-o lista de definitii, care este inclusa intr-o
pereche de marcaje de lista de definitii: <dl>...</dl> (de la "definition list" =
lista de definitii).
Observatii:
-Un termen al listei este initiat de eticheta <dt> (de la "definition term" = termen definit);
-Definitia unui termen este initiata de eticheta <dd> (de la "definition description" = descrierea
definitiei);
-Definitia unui termen incepe pe o linie noua si este indentata;
<html>
<head><title>listex_1</title></head>
<body><h1 align=center>O lista de definitii</h1><hr>
<dl>
Glosar de termeni de World Wide Web

<dt><b>hypertext</b>
<dd>- o interconectare Web de informatii de tip text, in care orice cuvant sau
fraza poate face legatura catre un alt punct din document sau catre un alt
document
<dt><b>date</b>
<dd>- fluxul nesfarsit de materiale care apar pe Internet, spre deosebire
de informatii care sunt date cu un anumit inteles sau valoare
<dt><b>informatie</b>
<dd>- sub-setul de date care are efectiv semnificatie si care este util la
momentul curent
</dl>
</body>
</html>
Liste neordonate
O lista neordonata este un bloc de text delimitat de etichetele
corespondente <ul>...</ul> (" ul " vine de la " unordered list " = lista
neordonata).
Fiecare element al listei este initiat de
eticheta <li> (list item).
11
Limbajul HTML
Lista va fi indentata fata de restul paginii Web si fiecare element al

listei incepe pe un rand noua.
<html>
<body><h1 align=center>O lista neordonata</h1><hr>
<ul>Culori uzuale disponibile prin nume
<li>Black <li>White <li>Red <li>Green <li>Blue<li>Yellow <li>Purp
le <li>Aqua
</ul>
</body>
</html>
Tag-urile <ul> si <li> pot avea un atribut type care satileste

caracterul asfisat in fata fiecarui element al listei.valorile posibile al
acestui atribut sunt:
o "circle" (cerc)
"disc" (disc plin) (valoarea prestabilita);

"square" (patrat)
Listele neordonate pot fi imbricate pe mai multe niveluri
<html>
<body><h1 align=center>O lista neordonata de liste
neordonate</h1><hr>
<ul>Elemente si atribute a unei pagini HTML
<li>Frameset <ul>Atribute: <li>cols <li>rows <li>border
</ul>
<li>Frame <ul>Atribute: <li>src <li>name <li>scrolling
</ul>
</body>
</html>
</ul>
Liste ordonate
O lista ordonata de elemente este un bloc de text delimitat de
etichetele corespondente <ol>...</ol> (" ol " vine de la " ordered list "
= lista ordonata). Fiecare element al listei este initiat de
12
Limbajul HTML
eticheta <li> (list item).

Lista va fi indentata fata de restul paginii Web si fiecare element al
listei incepe pe un rand noua.
<html>
<body><h1 align=center>O lista ordonata</h1><hr>
<ol>Culori uzuale disponibile prin nume
le <li>Aqua
</ol>
</body>
</html>
Tag-urile <ol> si <li> pot avea un atribut type care stabileste tipul de
caractere utilizate pentru ordonarea listei.Valorile posibile sunt:
" A " pentru ordonare de tipul A , B , C , D etc. ( litere mari );

" a " pentru ordonare de tipul a , b , c , d etc. ( litere mici );
" I " pentru ordonare de tipul I , II , III , IV etc. ( cifre romane
mari );
" i " pentru ordonare de tipul i , ii , iii , iv etc. ( cifre romane
mici );
" 1 " pentru ordonare de tipul 1 , 2 , 3 , 4 etc. ( cifre arabe optiune prestabilita );
Urmatorul exemplu este o lista ordonata cu cifre romane
<html>
<body><h1 align=center>O lista ordonata cu cifre
romane</h1><hr>
<ol type="I">Culori uzuale disponibile prin nume
le <li>Aqua
</ol>
</body>
</html>
13
Limbajul HTML
Tag-ul <ol> poate avea un atribut start care stabileste valoarea

initiala a secventei de ordonare.Valoarea acestui atribut trebuie sa fie
un numar intreg pozitiv.
Urmatorul exemplu este o lista ordonata cu litere mari,incepand de la
valoarea C.
<html>
<body><h1 align=center>O lista ordonata cu litere mari, incepand de
la valoarea C</h1><hr>
<ol type="A" start="3">Culori uzuale disponibile prin nume
<li>Red <li>Green <li>Blue <li>Yellow <li>Purple<li>Aqua
</ol>
</body>
</html>
Tag-ul <li> poate avea un atribut value care satileste valoare pentru
elementul respectiv al listei. Valoarea acestui atribut trebuie sa fie un
numar intreg pozitiv (vezi urmatorul exemplu).
<html>
<body><h1 align=center>O lista ordonata avand itemi setati
individual</h1><hr>
<ol start="3">Repetati urmatorii pasi ai algoritmului
<li>salvati fisierul;
<li value="6">incarcati fisierul in browser;
<li>schimbati browserul utilizat
<li>incarcati din nou fisierul
</ol>
</body>
</html>
Listele ordonate pot fi imbricate intre ele sau cu liste neordonate ,ca
in exemplul urmator.
<html>
<body><h1 align=center>O lista ordonata de liste ordonate si
neordonate</h1><hr>
<ol>Un sistem informatic include:
<li>Hardware:
<ol>
<li>placa de baza
14
Limbajul HTML
<li>procesor
<li>memorie
<li>harddisk
</ol>
<li>Software:
<ul>
<li>Linux
<li>Windows
<li>OS/2
<li>Unix
</ul>
<li>Software de aplicatie:
<ul type="disc">
<li>VisualC++
<li>Java
<li>SQL
<li>CorelDraw
</ul>
</ol>
</body>
</html>
O lista de meniuri este un bloc delimitat de etichete

corespondente<menu>...</menu>. Fiecare element al listei este
initiat de eticheta<li> ( list item ). Cele mai multe browsere afiseaza
lista de meniuri ca pe o lista neordonata.
O lista de directoare este un bloc delimitat de etichete
corespondente<dir>...</dir> (de la " director "). Fiecare element al
listei este initiat de eticheta <li> ( list item ). Cele mai multe browsere
afiseaza lista de directoare ca pe o lista neordonata.
(Nu se recomanda utilizarea acestori tipuri de liste).
Utilizari speciale ale listelor
Daca intr-o lista, in loc de elementele acesteia introduse prin <li>, se
insereaza un bloc de text, aceasta va fi indentat ( intocmai ca
elementele unei liste).
<html>
<body><h1>Un bloc de text indentat</h1><hr>
<ol> Un bloc de text indentat. Un bloc de text indentat. Un bloc de text
15
Limbajul HTML
indentat. Un bloc de text indentat. Un bloc de text indentat. Un bloc de text

indentat. Un bloc de text indentat. Un bloc de text indentat. Un bloc de text
indentat.
</ol>
</body>
</html>
In exemplul urmator lista de definitii are itemii <dt> si <dd> multipli.
<html>
<body><h1 align=center>O lista de definitii speciala</h1><hr>
<dl>Program
<dt><b>Luni</b>
<dt><b>Marti</b>
<dt><b>Miercuri</b>
<dd><i>Ora 9.00.</i>Insciere
<dd><i>Ora 11.00.</i>Audieri
<dd><i>Ora 13.30.</i>Raspunsuri
</dl>
</body>
</html>
Ultimul exemplu este o lista neordonata personalizata care utilizeaza pe post de

elemente imagini si texte.
<html>
<body><h1>O lista personalizata</h1><hr>
<ul>Tipuri de masini Volkswagen sunt: <br>
<img src="images/reddot.gif">Golf<br>
<img src="images/reddot.gif">Jetta<br>
<img src="images/reddot.gif">Passat<br>
<img src="images/reddot.gif">Bora<br>
<img src="images/reddot.gif">Corrado<br>
<img src="images/reddot.gif">Transporter<br>
</body>
</html>
16

Limbajul 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

Limbajul HTML

Încărcat de

Drepturi de autor:

Formate disponibile

Limbajul HTML

1.Limbajul HTML . Notiuni introductive .

Limbajul HTML . Notiuni introductive

HTML este prescurtarea de la HyperText Markup Language,

Crearea unei pagini web

Orice document HTML incepe cu notatia <html> si se termina cu

Titlul unei pagini se obtine inserand in sectiunea <head>...</head> a

In plus, in sectiunea <body>...</body> putem scrie texte cat dorim.

Continutul blocului <title>...</title> va aparea in bara de titlu a

Pentru ca browser-ul sa interpreteze corect caracterele " spatiu ", "

Printr-un nume de culoare.Sunt disponibile cel putin 16 nume de

Acest lucru se face prin intermediul atributului text al

3.Elemente de baza ale Limbajului HTML

4.Inserarea elementelor,a imaginilor intr-o pagina web

Limbajul HTML permite creatorilor de pagini Web sa utilizeze, pe

TOP - partea de sus a imaginii este aliniata n raport cu textul;

5.Liste in pagini WEB

Glosar de termeni de World Wide Web

Lista va fi indentata fata de restul paginii Web si fiecare element al

Tag-urile <ul> si <li> pot avea un atribut type care satileste

"disc" (disc plin) (valoarea prestabilita);

eticheta <li> (list item).

" A " pentru ordonare de tipul A , B , C , D etc. ( litere mari );

Tag-ul <ol> poate avea un atribut start care stabileste valoarea

O lista de meniuri este un bloc delimitat de etichete

indentat. Un bloc de text indentat. Un bloc de text indentat. Un bloc de text

Ultimul exemplu este o lista neordonata personalizata care utilizeaza pe post de

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