HTML

Totul despre HTML
Consortiul World Wide Web, W3, a definit si standardizat specificatiile HTML 4.0 si a
versiunilor anterioare (1, 1.1, 2.0, 3.2); fiecare versiune a adus instructiuni (numite si
controale, marcaje, tag - uri) noi fata de versiunea anterioara. La randul lor si producatorii
browserelor realizeaza noi versiuni care sa "inteleaga" noile marcaje; ei introduc uneori si
marcaje proprii, in plus fata de specificatiile standard, pe care le "intelege" doar
browserul lor.
a) Forma generala a unui fisier HTML este:

- marcajul HTML de deschidere - indica faptul ca
<html> informatia care urmeaza este scrisa in limbajul
HTML
-marcajul HEAD de deschidere - de aici incepe
<head>
antetul paginii
- marcajele pereche TITLE - aici se scriu cateva
cuvinte sugestive despre continutul paginii - aceste
<title>Titlul paginii</title> cuvinte vor apare pe bara de titlu a browserului;
daca pagina este adaugata intr-o lista favorita, ele
apar ca nume al paginii.
<meta name = "keywords" - ajuta motoarele de cautare la gasirea paginii, etc. -
content = "... o lista de cuvinte ..."> ne vom ocupa mai tarziu de ele;
<meta name = "description" !!! - valorile unor atribute, de exemplu "keywords",
content = "... o fraza sugestiva ..."> trebuie incadrate cu ghilimele duble, drepte ( " )
... alte instructiuni: JavaScript, obtinute cu Shift + tasta de langa Enter, nu ( ' ) sau
CSS, etc. ... ( ` ).
- marcajul HEAD de inchidere - aici se termina
</head> antetul paginii; tot ce este in antet nu apare in
fereastra browserului
- marcajul BODY de deschidere - incepe corpul
<body>
documentului
... - tot ceea ce apare aici va fi afisat in fereastra
... browserului, dar trebuie formatat cu HTML
- marcajul BODY de inchidere - indica sfarsitul
</body>
corpului documentului
</html> - marcajul HTML de inchidere
Dupa cum puteti observa, instructiunile HTML (numite si controale, marcaje sau
tag-uri) incep cu o paranteza unghiulara deschisa < urmata imediat de numele
instructiunii, unul sau mai multe atribute ale instructiunii (optional), apoi de o paranteza
unghiulara inchisa >.
Majoritatea instructiunilor sunt perechi; cea de inceput se numeste marcaj de
deschidere si este de forma:
<nume_instructiune atribut = valoare_atribut>
iar cea de sfarsit marcaj de inchidere si nu contine atribute sau spatii; este de forma:
</nume_instructiune>.
NU sunt permise spatii decat intre nume_instructiune si atribut. Tot ce se gaseste
intre marcajul de deschidere si cel de inchidere va avea caracteristicile marcajului
respectiv.
Browserul ignora marcajele pe care nu le intelege si pe cele scrise gresit.
Exemple :
daca simbolizam spatiul prin _ atunci:
Gresit Rezultat Bine Rezultat
<_h3>text</h3> < h3>text <h3> text </h3>

text
<_font_size = 5 _
< font size = 5 color = <font_size = 5 _ color
color_=_blue> text
blue> text < / font > = blue> text </font> text
<_/_font_>
b1) Formatarea textului si a caracterelor

Instructiunea Atribute Descriere / Exemple
 - Comentariu in codul sursa; nu este afisat de browser
<b></b> - afiseaza textul cu litere aldine (ingrosate)
<i></i> - afiseaza textul cu litere italice (inclinate)
<u></u> - afiseaza textul subliniat
< sup > < / sup > - afiseaza textul ca indice superior
< sub > < / sub > - afiseaza textul ca indice inferior
< tt > < / tt > - text cu font monospatiu
< big > < / big > - text cu font marit + bold
< pre atribute > afiseaza pe linie noua textul preformatat, ca in codul
< / pre > sursa, dar ia in considerare instructiunile html
t e x t u l p r e f o r m a t a
t ,
- < b >adica asa cum arata el
in< /b >
codul sursa din
Notepad
latimea liniilor cu text preformatat (numar caractere);

se pare ca este ignorata; pentru width = 10 obtinem:
e l r r a
width = t x u p e o m t
t
t f a
latimea liniilor cu text preformatat

(cols=coloane=numar caractere); se pare ca este
ignorata; pentru cols = 10 obtinem:
cols = e l r r a
t x u p e o m t
t
t f a
atributul wrap se pare ca este ignorat de unele

wrap
browsere (ex. IE5.5)
< xmp > afiseaza pe linie noua textul preformatat, ca in codul

< / xmp > sursa, dar nu ia in considerare instructiunile html
t e x t u l p r e f o r m a t a
- t ,
adica asa cum arata el in
codul sursa din
Notepad
Cele de mai jos, pe fond gri, nu ne sunt de prea mult folos si / sau le putem obtine
folosind instructiunile de mai sus
< strike > < / strike > - afiseaza textul taiat
< strong > < / strong > - evidentiere logica puternica
< em > < / em> - stil logic de evidentiere
< address > informatii

-
< / address > despre adresa si autor
< cite > < / cite > - citare bibliografica

< dfn > < / dfn > - definitie de cuvant
< var > < / var > - program sau variabila
< code > < / code > - listing de program
< kbd > < / kbd > - text de la tastatura
exemplu de date introduse de

< samp > < / samp > -
utilizator
ar fi trebuit sa aiba un efect asemanator instructiunii

<q></q> -
BLOCKQUOTE
| alte marcaje : font, paragraf, rigle, etc. |
b2) Formatarea textului si a caracterelor

Instructiunea Atribute Descriere / Exemple
< font atribute > marimea fontului: i = 1, 2, ... , 7; 1 = mic, 7 =

size = i
< / font > mare
culoarea poate fi data prin numele ei sau prin

color =
valoarea RGB
o lista de minim 2 fonturi:

font1 = un font specific sistemelor Windows,
font2 = un font specific echivalent sistemelor
Macintosh;
daca nu gaseste instalat nici unul din ele, va
face = afisa textul cu fontul proportional predefinit
" font1 , font2 , ..." (fonturile proportionale sunt cele in care
spatiul dintre litere este acelasi: ex.
imimimmm; fonturile monospatiu
sunt fonturile in care spatiul
ocupat de fiecare litera este
acelasi: ex. imimimmm)
< basefont atribute > size = i marimea fontului implicit al intregii pagini: i =
< / basefont > 1, 2, ... , 7; 1 = mic, 7 = mare;
fontul implicit are marimea 3;
nu are influenta asupra textului din interiorul
tabelelor
culoarea poate fi data prin numele ei sau prin
valoarea RGB
color =
are influenta si asupra instructiunii <hi> </hi>
dar nu in interiorul tabelelor
<hi></hi> este folosit pentru titluri in document; i = 1, 2,

3, 4, 5, 6;
-
h
h1 h2 h3 h4 h6
< center > centreaza in pagina

-
< / center > (text, imagine, tabel, etc.)
< blockquote > textul

< / blockquote > este indentat cu un TAB fata de ambele
-
margini (stanga si dreapta) ale spatiului
disponibil (pagina, celula de tabel, etc.)
< br atribute > forteaza

-
trecerea pe linie noua
left, right sau all: trece la linie noua cand

marginea din stanga (left), dreapta (right) sau
clear = ambele margini (all) ale ecranului sunt libere,
de ex. pentru a aduce un text sub o imagine
care nu ocupa intreaga latime a spatiului
disponibil
< p atribute > -

</p> paragraf nou (aliniat implicit la stanga daca nu
este in interiorul unui marcaj care face o alta
aliniere, de ex. CENTER)
aliniat la stanga (left), - este alinierea
implicita, deci nu este necesar decat in
interiorul unui marcaj care face o alta aliniere,
de ex. CENTER
aliniat pe centru (center),
aliniat la dreapta (right),

align =
pentru ambele margini aliniate (justify);
observati spatiul din dreapta dintre text si
marginea tabelului si distanta dintre cuvinte,
care este reglata astfel incat marginea din
dreapta a textului sa nu fie neregulata. Sesizati
diferenta fata de paragrafele cu align = left sau
fara align de mai sus.
class = specifica un anume stil de text
type = " text/css "

specifica un anume stil de text
style = ...
< div atribute > marcaj pentru blocuri de text (aliniat implicit
< / div > - la stanga daca nu este in interiorul unui marcaj
care face o alta aliniere, de ex. CENTER)
aliniat la stanga (left), - este alinierea

implicita, deci nu este necesar decat in
interiorul unui marcaj care face o alta aliniere,
de ex. CENTER
aliniat pe centru (center),
aliniat la dreapta (right),
pentru ambele margini aliniate (justify);
observati spatiul din dreapta dintre text si
align = marginea tabelului si distanta dintre cuvinte,
care este reglata astfel incat marginea din
dreapta a textului sa nu fie neregulata. Sesizati
diferenta fata de paragrafele cu align = left sau
fara align de mai sus.
Deosebirea dintre p si div consta in faptul
ca prima lasa un spatiu mai mare deasupra si
dedesubtul paragrafului, pe cand div lasa
spatiul egal cu cel dintre randuri.
< hr atribute > - rigla orizontala; fara atribute obtinem:

elimina umbra riglei:
noshade
z = inaltimea riglei (in pixeli); pentru z = 7:

size = z
x = latimea riglei, in pixeli sau procente din

spatiul disponibil (pagina, celula de tabel,
width = x etc.); aliniaza implicit pe centru; pentru x = 50
%:
alinierea riglei in pagina; pentru width = 50 %

obtinem:
left
align =
center
right
culoarea (data prin nume sau valoarea RGB),

color = pentru color = #00ffff obtinem:
< body atribute > defineste inceputul si sfarsitul corpului

-
< / body > documentului HTML
culoarea fondului paginii (data prin nume sau

bgcolor =
valoarea RGB)
url - ul (adresa si numele) imaginii de fond a

background =
paginii
culoarea textului (nume culoare sau valoare

text =
RGB)
culoarea legaturilor nevizitate din pagina

link =
(nume sau RGB)
culoarea legaturilor vizitate din pagina (nume

vlink =
sau RGB)
culoarea legaturilor in timpul click - ului

alink =
(nume sau RGB)
leftmargin = indentarea intregului material din pagina fata

de marginea din stanga (pixeli)
indentarea intregului material din pagina fata
rightmargin =
de marginea din dreapta (pixeli)
deplasarea intregului material din pagina fata

topmargin =
de marginea de sus (pixeli)
primeste doar valoarea "fixed"; daca derulam

bgproperties =
pagina, fondul ramane fix
c) Referinte ( legaturi )
Instructiune Atribute Descriere
< a atribute > - marcaj tip ancora

</a>
referinta hipertext (legaturi spre alte

pagini folosind un text sau o imagine);
intre " si " nu trebuie sa existe spatii;
href = " url " daca dorim sa introducem legaturi spre
fisiere sau directoare al caror nume
contine spatii (adica sunt formate din cel
putin 2 cuvinte) trebuie sa inlocuim
spatiile cu %20
name = " nume-ancora " definirea unei ancore
referinta catre o ancora interna (din

href = " # nume-ancora "
acelasi fisier)
referinta catre o ancora externa (din alt

href = " url # nume-ancora "
fisier)
numele cadrului in care va fi afisata

sursa definita cu HREF
valori speciale:
_top = incarca pagina intr - o fereastra
noua, deasupra altor ferestre de pe ecran
target = " nume_cadru " _self = incarca pagina in cadrul curent;
este valoarea implicita
_parent = incarca pagina in fereastra
parinte
_blank = incarca pagina intr - o fereastra
noua, fara nume
< base atribute >
" alt_URL " = "
http://www.alte_servere.com/alt_site/ ":
putem specifica legaturi relative spre
fisiere situate pe alt site de pe alt server;
este folositor daca in fisier avem
href = " alt-URL "
majoritatea legaturilor relative spre
celalalt site si site-ul este administrat tot
de dvs. (altfel se poate schimba structura
site-ului sau denumirea fisierelor sau
directoarelor fara sa stiti si legaturile vor
deveni invalide)
Putem defini ancore si cu ajutorul instructiunii id = nume-ancora , care se poate

atasa ca atribut aproape oricarei instructiuni.
Mouse-ul plasat deasupra unei legaturi face sa apara pe bara de stare (deasupra
butonului "Start") adresa/ directorul/ fisierul accesat de acea legatura; adesea nu ne facem
o idee foarte clara despre subiectul acelei pagini.
In functie de actiunea vizitatorului (plaseaza mouse-ul deasupra sau il ia de pe
legatura) putem face sa apara altceva in acel loc (de exemplu subiectul sau titlul paginii);
atentie la textul ales sa apara in cazul cand se ia mouse-ul de pe legatura deoarece ramane
afisat pana cand este plasat deasupra unei alte legaturi. Exemplu
Atunci cand dorim sa incarcam pagina principala a unui site, in general nu tastam si
numele unui fisier; serverul ne trimite un fisier predefinit; de obicei numele lui este
index.html (ori default.html sau welcome.html; cel mai sigur este sa intrebam
administratorul serverului pentru a sti cum sa ne denumim fisierul paginii principale).
Sa presupunem ca pe PC-ul de acasa, in directorul MySite, construim un site sau ca
la adresa www.nume_server.com/nume_director/ avem un site cu urmatoarea
organizare:
Tabelul descrie imaginea din

dreapta
nivelul
nivelul 1 nivelul 2
3
Printr-o legatura plasata intr-un fisier putem
fisierul : accesa un alt fisier, prin intermediul referintelor.
index.html Referintele pot fi: interne (spre o ancora din
acelasi fisier) sau externe (spre un alt fisier); in
directorul : directorul fisiere : functie de modul cum specificam calea spre alt fisier
A : a11.htm pot fi absolute sau relative:
A1 a12.htm absolute :
- legatura <a href = "http: //www. alte_servere. com/
alt_site/ nume_fisier.html">, plasata in orice fisier din
directorul fisiere :
site - ul nostru, indica o legatura externa.
: a21.htm
- legatura <a href = "http: //www.nume_server.com/
A2 a22.htm
nume_director/ A/ A1/ a12.htm">, plasata in fisierul
fisierul : index.html, indica o legatura spre fisierul a12.htm din
a.htm site - ul nostru.
relative :
directorul : fisierul : - legatura <a href = ".. / .. / index.html">, plasata in
B b.htm orice fisier din directorul A1 sau A2, indica o legatura
spre fisierul index.html din site - ul nostru.
- legatura <a href = ".. / A / a.htm">, plasata in fisierul
b.htm din directorul B, indica o legatura spre fisierul
a.htm din directorul A.
- legatura <a href = "A / A1 / a12.htm">, plasata in
fisierul index.html, indica o legatura spre fisierul
a12.htm din site - ul nostru.
Referintele relative au cateva avantaje :

- avem mai putin de tastat in codul sursa: nu mai tastam http: //www. nume_server. com/
nume_director pentru fiecare legatura in parte;
- legaturile vor functiona si in timp ce construim site - ul intr - un director pe hard - disk;
- daca vom dori sa mutam site - ul pe un alt server, nu trebuie sa modificam nimic; daca
am avea legaturi absolute, pentru fiecare ar trebui sa inlocuim http://www.
nume_server.com cu http://www. nume_nou_server.com
In cazul unui site de dimensiuni mici, care contine doar cateva pagini (fisiere), nu
avem nevoie de o organizare mai complicata a site - ului (cu multe directoare); am putea
plasa toate fisierele in acelasi director (pe hard - disk sau la adresa
www.nume_server.com/nume_director/); o legatura relativa plasata in orice fisier, care
apeleaza orice alt fisier, ar fi de forma <a href = "alt_fisier.htm">.
d) Tabele
Instructiunile de mai jos sunt folosite aproape in orice site deoarece cu ajutorul lor:
- putem crea tabele propriu - zise (cum este cel de mai jos);
- putem controla mult mai bine aranjarea in pagina a elementelor (folosind tabele fara
chenar, eventual introducem tabele in interiorul altui tabel).
Liniile de tabel sunt orizontale; coloanele sunt cele verticale; intersectia unei linii cu
o coloana defineste o celula.
< table atribute > - inceput de tabel HTML

< / table>
border = chenarul tabelului (in pixeli sau %)
bgcolor = culoarea fondului pentru tabel (valoare RGB

sau nume culoare)
imaginea de fond pentru tabel;
background = " url " probleme: fond inchis-text deschis sau fond
inadecvat (ca marime sau model)
spatiu intre continutul celulelor tabelului si

cellpadding =
continutul lor (in pixeli)
cellspacing = spatiu intre celulele tabelului (in pixeli)
latimea tabelului (in pixeli sau % din spatiul

width =
disponibil)
culoarea chenarului (nume culoare sau

bordercolor =
valoare RGB)
culoarea mai deschisa a chenarului (stanga +

bordercolorlight =
sus) (nume culoare sau valoare RGB)
culoarea mai inchisa a chenarului (dreapta +

bordercolordark =
jos) (nume culoare sau valoare RGB)
aliniaza tabelul in dreapta (right) sau stanga

align = (left) paginii; textul din jurul tabelului curge
pe partea opusa
spatiu pe orizontala in jurul tabelului (in

hspace =
pixeli)
vspace = spatiu pe verticala in jurul tabelului (in pixeli)
cols = numarul de coloane ale unui tabel
frame = ajustarea cadrelor in tabel - doar in IE
rules = ajustarea riglelor in tabel - doar in IE
< tr atribute > - linie de tabel

< / tr >
culoarea fondului pentru intreaga linie
bgcolor =
(valoare RGB sau nume culoare)
alinierea continutului celulelor (left, center,

align =
right); implicit left
inaltimea liniei (in pixeli); in unele browsere

height = nu functioneaza, dar puteti folosi height in
TD
- celula de tabel
< td atribute > inaltimea celulei; daca pe aceeasi linie (TR)
< / td > dati din greseala 2 valori diferite pentru
height =
height in TD, va lua maximul pentru toate
celulele liniei
width = latimea celulei
culoarea fondului pentru intreaga celula

bgcolor =
(valoare RGB sau nume culoare)
background = " url " imaginea de fond pentru celula
alinierea continutului celulei pe orizontala

align =
(left, center, right); implicit left
valign = alinierea continutului celulei pe verticala: top

(sus), middle (mijloc), bottom (jos); implicit
middle
aliniaza celulele cu linia de baza a textului

align = baseline
adiacent
aliniaza coloana fata de un anumit caracter

align = caracter
(implicit caracterul " . ")
align = justify aliniaza marginile din stg. si dr. ale textului
colspan = numarul de coloane pe care se intinde celula
rowspan = numarul de linii pe care se intinde celula
nu permite despartirea textului pe linii in

nowrap
celula
poate fi folosit :
- in loc de TD, dar continutul va fi centrat si
< th > < / th > -
ingrosat (bold);
- impreuna cu TD pe aceeasi linie (TR)
< caption atribute > - text explicativ asociat tabelului

< / caption >
alinierea textului (top = implicit, bottom, left,
align =
right)
< colgroup > impreuna cu marcajul < col > defineste un set
-
< / colgroup> de definitii de coloane
bgcolor = culoarea de fond

< col atribute > fara atribute: aceeasi latime pentru toate
-
coloanele
width = latimea coloanei, in pixeli, % sau " * "
alinierea textului pentru intreaga coloana (se

align =
pare ca nu functioneaza in Netscape 4.51)
char = alinierea textului fata de un anumit caracter
< thead > - defineste titlul tabelului

< / thead >
< tbody > - corpul tabelului

< / tbody >
< tfoot >

< / tfoot > pentru liniile de sfarsit ale tabelului;
COLGROUP, THEAD, TBODY, TFOOT nu
- sunt neaparat necesare intr-un tabel, dar
uneori demarcarea facuta de ele este folosita
de alte marcaje, de ex. <TABLE RULES =
GROUPS>
e) Harti de imagini
Sunt imagini care sunt "impartite" in mai multe zone, in functie de zona pe care se
executa click, browserul afiseaza o alta pagina.
De exemplu, pe un site dedicat turismului am putea avea pe pagina principala o
imagine care reprezinta harta tarii (in care definim zonele dupa conturul judetelor); in
cazul unui click in zona Brasov se incarca o pagina care descrie diverse obiective turistice
din judet si/sau contine o imagine a hartii judetului, pe care definim alte zone in jurul
localitatilor, iar un click pe o localitate ar duce la alta pagina care descrie obiectivele
turistice din localitate.
O harta de imagini ar putea fi folosita si pentru navigarea in cadrul unui site: daca
avem mai multe butoane de navigare grupate se poate folosi o imagine care reprezinta
toate butoanele - mai multe imagini se incarca mai incet decat o imagine cu dimensiunea
egala cu suma celorlalte (kb) deoarece comunicarea cu serverul (cand se cere imaginea)
se face o singura data.
Pana aici numai avantaje; dezavantajul major este ca un vizitator care are browserul
setat sa nu incarce imagini pentru a naviga mai repede nu va intelege mai nimic (putem
totusi folosi marcajul alt de specificare a textului alternativ pentru imagini).
< img atribute > - marcaj de includere a imaginilor
specifica faptul ca este o harta de imagine

ismap pe server (se foloseste mai rar; de obicei
folosim harti de imagine la client)
usemap = " nume_harta " specifica harta de imagine la client
imaginea de rezolutie scazuta care se

lowscr = " url "
incarca prima (doar pentru Netscape)
< map atribute > specifica regiunile unei harti de imagine la

-
< / map > client
numele hartii de imagine (corespunzator

name = " nume_harta "
atributului USEMAP al marcajului <IMG>)
< area atribute > - defineste o regiune a unei harti de imagine
forma regiunii: rect sau rectangle

(dreptunghi), circle sau circ (cerc), point
shape = " forma " (punct), poly sau polygon (poligon)
!!! Netscape 4.51 nu a "inteles" decat circle,
nu si circ
coords = " coordonate " coordonatele unei regiuni (in pixeli); se

calculeaza in functie de coltul din stanga
sus al imaginii (care are coordonatele (0, 0),
adica x = 0, y = 0); variaza in functie de
SHAPE = forma regiunii:
- pentru rect (dreptunghi) se dau
coordonatele colturilor din stg. sus si dr. jos
ale regiunii
- pentru circ (cerc) se dau coordonatele
centrului cercului si raza
- pentru point (punct) se dau coordonatele
punctului
- pentru poly (poligon) se dau coordonatele
colturilor poligonului
URL - ul asociat regiunii specificate din
cadrul imaginii; in cazul unui clic pe acea
href = " url "
regiune se incarca pagina specificata prin
URL
textul alternativ asociat regiunii specificate

din cadrul imaginii; apare plasand mouse-ul
deasupra regiunii respective sau celor cu
alt = " text "
browserul setat sa nu incarce imagini
!!! Netscape 4.51 nu a afisat decat primul
text dat cu alt
f) Imagini
Instructiunea Atribute Descriere
< img atribute > - marcajul de includere a imaginii
src = " url " adresa fisierului grafic (url absolut sau relativ)
textul alternativ care este afisat celor care navigheaza fara

alt = " text "
imagini
alinierea imaginii in pagina: right (dreapta), left (stanga =

implicit)
align =
alinierea elementelor din jurul imaginii: top (sus), middle
(mijloc), bottom (jos)
height = inaltimea imaginii (in pixeli sau %)
width = latimea imaginii (in pixeli sau %)
border = marimea chenarului din jurul imaginii (in pixeli)
hspace = spatiu pe orizontala in jurul imaginii (in pixeli)
vspace = spatiu pe verticala in jurul imaginii (in pixeli)
Folositi intotdeauna atributele width si height (exprimate in pixeli): ele rezerva

in pagina un spatiu cu latimea si inaltimea specificate si permit afisarea paginii si a
textului inainte de receptionarea imaginii de la server.
g) Cadre
Cu ajutorul cadrelor putem imparti ecranul in mai multe zone si alegem ce fisier sa
apara in fiecare zona. Cel mai folosita este impartirea in 2 coloane: in coloana din stanga,
mai ingusta, sunt legaturile, iar in zona din dreapta se afiseaza fisierele accesate.
< frameset atribute > - definirea impartirii paginii in cadre

< / frameset >
cols = numarul si marimea relativa a coloanelor
rows = numarul si marimea relativa a liniilor
marimea chenarului (pixeli); in general nu dorim

chenar si folosim border =0 impreuna cu
border = framespacing =0 si frameborder =no, pentru ca
nu stim ce browser (cu ce valori setate ca
implicite) foloseste vizitatorul, deci mai bine le
specificati dvs.
specifica daca cadrul definit cu FRAMESET are

frameborder =
sau nu chenar : yes sau no; implicit yes
marimea spatiului dintre cadre (pixeli); daca il

folositi impreuna cu border, dar cu valori diferite,
framespacing =
pentru unele browsere primeaza valoarea lui
framespacing (ex. IE.5) iar pentru altele valoarea
lui border (ex. Netscape 4.51)
< frame atribute > - definitia unui cadru
src = " url " sursa cadrului
numele cadrului, utilizat de marcajul < a href =

name =
"url" target = nume >
optiuni pentru bara de derulare : yes (da), no (nu),

scrolling =
auto (daca este nevoie); implicit "auto"
pentru a nu redimensiona tragand de chenar (doar

noresize
daca are)
marginheight = spatiu deasupra si sub un cadru (pixeli)
marginwidth = spatiu la stanga si la dreapta unui cadru (pixeli)
< noframes > sectiunea de pagina afisata browserelor care nu

-
< / noframes > pot interpreta cadre
< iframe atribute > - cadru intern (doar IE)
< / iframe >
src = " url " sursa cadrului
numele cadrului, utilizat de marcajul < a href =

name =
"url" target = nume >
height = inaltimea cadrului inglobat (pixeli sau %)
width = latimea cadrului inglobat (pixeli sau %)
specifica daca cadrul definit cu IFRAME are sau

frameborder =
nu chenar (yes sau no; implicit yes)
optiuni pentru bara de derulare : yes (da), no (nu),

scrolling =
auto (daca este nevoie); implicit "auto"
h) Caractere speciale
Pentru a face sã aparã în browser caracterul din coloana Caracter, in codul sursã trebuie
sã avem Cod HTML
Cod
Caracter Semnificatie
HTML
& & ampensand
< < mai mic (less than)
> > mai mare (greater than)
Pentru a obtine majuscule, le folosim in codul sursa in locul literelor mici . Ex. : Â
=Â
á á a mic cu accent ascutit (acute)
à à a mic cu accent grav
â â a mic cu accent circumflex
ã ã a mic cu tildã
ä ä a mic cu doua puncte (umblaut)
å å a mic cu inel (ring)
ç ç c mic cu sedilã

ñ ñ n mic cu tildã
ø ø o mic barat (slash)
ß ß s-z mic ligaturat
¿ ¿ semnul de întrebare invers
£ £ lira sterlinã
¢ ¢ cent
© © simbolul de copyright
® ® simbolul de marcã înregistratã
forteazã spatii multiple; chiar dacã în codul sursã avem mai multe
spatii, browserul afiseazã unul singur; se poate folosi pentru a
scrie un paragraf cu aliniat
" " ghilimele
&scedil; &scedil; nu am obtinut s cu sedilã; afiseazã exact codul sursã
&tcedil; &tcedil; nu am obtinut t cu sedilã; afiseazã codul sursã
i) Culori : date prin nume

Culori ce pot fi apelate prin nume (in engleza), prin comparatie puteti afla echivalentul
lor RGB.
albastru marin negru albastru

violet deschis
aqua black blue
fuchsia
#00FFFF #000000 #0000FF
gri verde
verde citron maro
gray green
lime maroon
aprox. #999999 #00FF00
violet rosu
bleumarin oliv
purple red
navy olive
#FF00FF #FF0000
argintiu verde inchis alb galben

silver white yellow
teal
aprox. #CCCCCC #FFFFFF #FFFF00
i) Culori : exprimate prin valoarea RGB

Exista instructiuni care au atribute prin care se pot specifica culori (ex.: COLOR,
BGCOLOR, BORDERCOLOR, etc.). Culorile se pot specifica prin numele lor (in
engleza, de ex.: red, white, etc.) sau prin valoarea RGB. Culorile se obtin prin
combinarea culorilor de baza Red, Green, Blue si rezulta un grup de 6 cifre hexazecimale
precedate de semnul # (de ex.: BODY BGCOLOR = # FF0000 are ca rezultat un fond al
paginii de culoare rosie). R, G, B sunt initialele culorilor de baza: R (Red = rosu), G
(Green = verde), B (Blue = albastru). Primele 2 cifre din cele 6 reprezinta valoarea lui R,
urmatoarele 2 valoarea lui G iar ultimele 2 pentru B. Pentru a obtine culori care sunt
afisate la fel pe orice sistem (Windows, Macintosh) este bine sa folosim asa - numitele
culori sigure Internet.
Baza 10 are ca cifre: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9.
Baza 16 are ca cifre: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, a (= 10), b (= 11), c (= 12), d (=
13), e (= 14) f (= 15).
Urmatorul tabel nu cuprinde toate nuantele care se pot obtine pentru R = 00;
deoarece ele sunt valori exprimate in baza 16, intre B = 00 si B = 11 exista valorile: 01,
02, 03, 04, 05, 06, 07, 08, 09, 0a, 0b, 0c, 0d, 0e, 0f, 10. Idem pentru G.
B=
R=00
00 11 22 33 44 55 66 77 88 99 aa bb cc dd ee ff
G = 00
11
22
33
44
55
66
77
88
99
aa
bb
cc
dd
ee
ff
Se pot realiza si alte tabele cu nuantele culorilor obtinute pentru diferite valori ale
lui R deoarece intre R = 00 si R = 33 exista o multime de valori pe care le poate lua R
(01, 02, ... , 0f, 10, 11, 12, ... , 1f, 20, 21, 22 , ... 2f, 30, 31, 32) dar diferentele sunt relativ
mici; le puteti realiza singur inlocuind in codul sursa (folosind functia REPLACE a
editorului de texte: inlocuiti #XX (primele doua cifre din toate sirurile #xxxxxx ce apar
in cadrul unui singur tabel) cu valoarea dorita (de ex. #0f)); in continuare apar numai
tabelele construite pentru R = 33, 66, 99, cc, ff.
B=
R=33
00 11 22 33 44 55 66 77 88 99 aa bb cc dd ee ff
00
11
22
33
44
55
66
77
G=
88
99
aa
bb
cc
dd
ee
ff
B=
R=66
00 11 22 33 44 55 66 77 88 99 aa bb cc dd ee ff
G = 00
11
22
33
44
55
66
77
88
99
aa
bb
cc
dd
ee
ff
B=
R=99
00 11 22 33 44 55 66 77 88 99 aa bb cc dd ee ff
00
11
22
33
44
55
66
77
G=
88
99
aa
bb
cc
dd
ee
ff
B=
R=cc
00 11 22 33 44 55 66 77 88 99 aa bb cc dd ee ff
G = 00
11
22
33
44
55
66
77
88
99
aa
bb
cc
dd
ee
ff
B=
R=ff
00 11 22 33 44 55 66 77 88 99 aa bb cc dd ee ff
00
11
22
33
44
55
66
77
G=
88
99
aa
bb
cc
dd
ee
ff
i) Culori sigure Internet

Este posibil ca browserul sa nu poata afisa anumite culori specificate prin valoarea
RGB, insa va incerca sa genereze o culoare apropiata (prin dithering = difuzie) sau un
fond texturat format din doua culori apropiate celei specificate; se poate ajunge astfel la
un fond care poate face textul ilizibil.
Pentru a evita aceasta situatie, este bine sa folosim asa - numitele culori sigure
Internet, care sunt afisate la fel pe orice sistem (Windows, Macintosh). Pentru fiecare
dintre culorile de baza, R (Red = rosu), G (Green = verde), B (Blue = albastru) trebuie sa
alegem una din valorile : 00, 33, 66, 99, CC sau FF.
B= B=
R=00 R=33
00 33 66 99 cc ff 00 33 66 99 cc ff
G = 00 G = 00
33 33
66 66
99 99
cc cc
ff ff
B= B=
R=66 R=99
00 33 66 99 cc ff 00 33 66 99 cc ff
00 00
33 33
66 66
G= G=
99 99
cc cc
ff ff
B= B=
R=cc R=ff
00 33 66 99 cc ff 00 33 66 99 cc ff
00 00
33 33
66 66
G= G=
99 99
cc cc
ff ff
j) Liste
liste de tip definitie
<dl>
- lista de tip definitie
</dl>
<dt> - termen de definitie
<dd> - descriere de definitie
liste neordonate ( marcate )
<ul atribute> - lista neordonata (marcata)

</ul>
type= forma marcajului: circle, square, disc (implicit)
<li> - element de lista
liste ordonate ( numerotate )
<ol atribute> - lista ordonata (numerotata)

</ol>
type= tipul numerotarii: A, a, I, i, 1 (implicit)
start= cu a cat-a valoare incepe (implicit cu prima)
<li> - element de lista
Combinatii de liste - exemplu

Sursa : Rezultat :
<ol type=I> I. termen 1
<li>termen 1
o termen1-1 :
<ul>
<li>termen1-1 :
<dl> termen1-1a
<dt>termen1-1a descriere termen1-1a
<dd>descriere termen1-1a termen1-1b
<dt>termen1-1b
<dd>descriere termen1-1b descriere termen1-1b
</dl> o termen1-2 :
<li>termen1-2 :
<dl> termen1-2a
<dt>termen1-2a
<dd>descriere termen1-2a
descriere termen1-2a
<dt>termen1-2b termen1-2b
</dl> II. termen 2
</ul>
<li>termen 2
<ul type=square>  termen2-1 :
<li>termen2-1 :
<dl> termen2-1a
<dt>termen2-1a descriere termen2-1a
<dd>descriere termen2-1a
<dt>termen2-1b
termen2-1b
</dl>  termen2-2 :
<li>termen2-2 :
<dl>
termen2-2a
<dt>termen2-2a
<dd>descriere termen2-2a descriere termen2-2a
<dt>termen2-2b termen2-2b
</dl> II. termen 3
</ul>
<li>termen 3
</ol>
Lista de tip definitie - exemplu

Sursa : Rezultat :
<dl>
<dt>termen1 termen1
<dd>descriere termen1</dl> descriere termen1
<dt>termen2 termen2
<dt>termen3 termen3
</dl>
Liste neordonate - exemple

Sursa : Rezultat : Sursa : Rezultat :
lista 1 - fara type - implicit type=disc lista 2 - cu type=disc
<ul> <ul type=disc>

 termen 1  termen 1
<li>termen 1 <li>termen 1
</ul> </ul>
lista 3 - cu type=square lista 4 - cu type=circle
<ul type=square> <ul type=circle>

 termen 1 o termen 1
 termen 2 o termen 2
 termen 3 o termen
</ul> </ul>
k) Facilitarea gasirii paginii de catre motoarele de

cautare
<title> - marcajele pereche TITLE - aici dam titlul: cateva cuvinte

</title> sugestive despre continutul paginii - aceste cuvinte vor apare
- pe bara de titlu a browserului; daca pagina este adaugata
intr-o lista favorita sau listata ca rezultat al unei cautari, ele
apar ca nume al paginii.
<meta atribute> name = keywords, description, author, ...
content = descrie valoarea lui name
In general in antetul unei pagini web, intre marcajele <HEAD> si </HEAD>, exista
mai multe marcaje META, cu atribute name - content perechi. Exemplu:
<html><head><title>Titlul dorit</title>
<meta content="text/html; charset=windows-1252" http-equiv=Content-Type>
indica browserului ca este un fisier HTML;
charset stabileste tipul de caractere (in general windows-1252), dar exista si altele
<meta name=keywords content="o lista de cuvinte, separate prin virgula">
pagina va fi listata de un motor de cautare (la care ati inscris deja site-ul) in cazul unei
cautari in care s-au folosit cuvinte din aceasta lista
<meta name=description content="O fraza care descrie pe scurt continutul paginii">
in cazul unei cautari dupa cuvinte-cheie, motorul de cautare ne da o lista de pagini; pentru
fiecare pagina (site) din lista apare titlul ei (dat cu marcajul TITLE) urmat de o fraza (cea
de la name=description content="o fraza care descrie ..."); daca nu avem in marcajul
META acea fraza, motorul va indexa dupa prima fraza din pagina; tot ea va fi data la o
eventuala cautare
<meta name=author content="numele dvs., e-mail, etc">
nu este neaparat necesara
</head><body> .... </body></html>
l) Modele de stiluri
In specificatiile HTML 4.0 au aparut specificatiile pentru modele de stiluri,
cunoscute ca Modele de Stiluri in Cascada (Cascading Style Sheets - CSS). Pana la acea
data forma, culoarea si marimea textului puteau fi date cu instructiunea "font" si cu
atributele sale: "face", "color", "size".
Modelele de stiluri pot fi aplicate aproape oricarei instructiuni, folosind atributele
din tabelul de mai jos.
Modelele de stiluri pot fi aplicate in mai multe moduri:
a) intern: atributele sunt specificate in interiorul marcajului de deschidere al
fiecarei instructiuni; este cel mai neeconomic mod.
b) specificate in antetul fisierului: specificam la inceputul unui fisier diverse
atribute pentru mai multe stiluri de text; acele stiluri le putem folosi de mai multe ori in
corpul acelui fisier fara a mai specifica si atributele.
c) extern: atributele pentru diverse stiluri sunt specificate intr-un fisier special (pe
care il putem construi cu un editor de texte (Notepad) si il salvam ca fisier de tip text cu
extensia .css ) astfel incat pot fi apelate de orice alt fisier de pe site. Este modul cel mai
recomandat, mai ales pentru site-uri mari.
Putem face chiar ca un anumit stil sa poata fi aplicat numai cu o anumita
instructiune, iar altele sa poata fi aplicate cu mai multe instructiuni. Unele atribute din
tabelul de mai jos pot fi specificate si sub o forma prescurtata; se poate intampla ca unele
caracteristici specificate de dvs. sub forma prescurtata sa nu functioneze - folositi forma
explicita, neprescurtata.
Atribut Descriere Valori
URL-ul (imaginii) sau culori date prin

background imagini sau culori de fundal
nume sau valoare RGB
color culoarea textului nume sau valoare RGB
numele fontului sau al familiei de

font-family tipul fontului
fonturi
data in puncte(pt), inch(in),

font-size dimensiunea fontului
centimetri(cm), pixeli(px)
font-style text cursiv normal, italic
extra-light, light, demi-light, medium,

font-weight grosimea fontului
demi-bold, bold, extra-bold
distanta dintre liniile de baza ale data in puncte(pt), inch(in),

line-height
randurilor centimetri(cm), pixeli(px), procent(%)
distanta fata de marginea din data in puncte(pt), inch(in),

margin-left
stanga a paginii centimetri(cm), pixeli(px)
distanta fata de marginea din data in puncte(pt), inch(in),

margin-right
dreapta a paginii centimetri(cm), pixeli(px)
distanta fata de textul precedent

margin-top sau fata de marginea de sus a
paginii
left(stanga), center(centru),
text-align alinierea textului
right(dreapta), justify
text- none(nimic), underline(subliniat),

evidentierea textului
decoration italic(cursiv), line-through(taiat)
distanta primului rand fata de data in puncte(pt), inch(in),
text-indent
marginea din stanga centimetri(cm), pixeli(px)
none, groove, dotted, dashed, solid,

border-style tipul chenarului
double, ridge, inset, outset

border-width grosimea chenarului
border-color culoarea chenarului nume sau valoare RGB
72 pt=1 inch = 25,4 mm;

un font de dimensiunea 14pt inseamna ca sunt 14 puncte intre partea superioara a literei
M sau h si partea inferioara a literei g sau y
Se folosesc si instructiunile:
< style > - specifica in antet caracteristicile stilurilor

< / style >
type= in general Cascading Style Sheets: "text/css"
< span > - marcaj generic, numai pentru stiluri

< / span >
class= specifica un anumit stil
id= specifica un anumit stil

HTML

Încărcat de

Informații document

Titlu original

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

HTML

Încărcat de

Drepturi de autor:

Formate disponibile

Totul despre HTML

a) Forma generala a unui fisier HTML este:

Gresit Rezultat Bine Rezultat

<_h3>text</h3> < h3>text <h3> text </h3>

b1) Formatarea textului si a caracterelor

- Comentariu in codul sursa; nu este afisat de browser

<b></b> - afiseaza textul cu litere aldine (ingrosate)

<i></i> - afiseaza textul cu litere italice (inclinate)

<u></u> - afiseaza textul subliniat

< tt > < / tt > - text cu font monospatiu

latimea liniilor cu text preformatat (numar caractere);

latimea liniilor cu text preformatat

atributul wrap se pare ca este ignorat de unele

< xmp > afiseaza pe linie noua textul preformatat, ca in codul

< strike > < / strike > - afiseaza textul taiat

< strong > < / strong > - evidentiere logica puternica

< em > < / em> - stil logic de evidentiere

< address > informatii

< cite > < / cite > - citare bibliografica

< var > < / var > - program sau variabila

< code > < / code > - listing de program

< kbd > < / kbd > - text de la tastatura

exemplu de date introduse de

ar fi trebuit sa aiba un efect asemanator instructiunii

| alte marcaje : font, paragraf, rigle, etc. |

b2) Formatarea textului si a caracterelor

< font atribute > marimea fontului: i = 1, 2, ... , 7; 1 = mic, 7 =

culoarea poate fi data prin numele ei sau prin

o lista de minim 2 fonturi:

<hi></hi> este folosit pentru titluri in document; i = 1, 2,

< center > centreaza in pagina

< blockquote > textul

< br atribute > forteaza

left, right sau all: trece la linie noua cand

< p atribute > -

aliniat pe centru (center),

aliniat la dreapta (right),

class = specifica un anume stil de text

type = " text/css "

aliniat la stanga (left), - este alinierea

< hr atribute > - rigla orizontala; fara atribute obtinem:

z = inaltimea riglei (in pixeli); pentru z = 7:

x = latimea riglei, in pixeli sau procente din

alinierea riglei in pagina; pentru width = 50 %

culoarea (data prin nume sau valoarea RGB),

< body atribute > defineste inceputul si sfarsitul corpului

culoarea fondului paginii (data prin nume sau

url - ul (adresa si numele) imaginii de fond a

culoarea textului (nume culoare sau valoare

culoarea legaturilor nevizitate din pagina

culoarea legaturilor vizitate din pagina (nume

culoarea legaturilor in timpul click - ului

leftmargin = indentarea intregului material din pagina fata

deplasarea intregului material din pagina fata

primeste doar valoarea "fixed"; daca derulam

< a atribute > - marcaj tip ancora

referinta hipertext (legaturi spre alte

name = " nume-ancora " definirea unei ancore

referinta catre o ancora interna (din

referinta catre o ancora externa (din alt

numele cadrului in care va fi afisata

Putem defini ancore si cu ajutorul instructiunii id = nume-ancora , care se poate

Tabelul descrie imaginea din