Creati Un SITE Plecând de La ZERO Folosind HTML

Creati un SITE plecând de la ZERO folosind 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.
Pentru a prinde curaj si a vedea modul de lucru, sa construim o pagina simpla.
Instructiuni, atribute, exemple :

a) Forma generala a unui fisier HTML
b) Formatarea textului si a caracterelor (1) | continuare (2)
c) Referinte (legaturi)
d) Tabele
e) Harti de imagini
f) Imagini
g) Cadre (frame-uri)
h) Caractere speciale
i) Culori specificate prin : nume sau valoare RGB ;
este bine sa folosim asa - numitele culori sigure
j) Liste
k) Facilitarea gasirii paginii de catre motoarele de cautare
l) Stiluri de text - formatare avansata a textului
O PAGINA SIMPLA
Modul de lucru :
* Porniti un editor de texte simplu (Notepad, nu Word) pentru a edita codul sursa.
* Tastati doar ceea ce este pe fondul gri:
<html>
NU trebuie tastat nici un spatiu in interiorul parantezelor unghiulare. Instructiunile
Textul dorit de dvs.
HTML sunt intotdeauna incadrate intre parantezele unghiulare < si >; intre paranteze nu
trebuie sa avem spatii decat daca separa numele instructiunii de atributele ei sau atributele
</html>
intre ele, dar nu este cazul aici.
* Salvam fisierul cu FILE - SAVE AS... :
Save in : alegem directorul de pe hard - disk in care salvam fisierul.
File name : tastam pagina simpla.htm sau pagina simpla.html (atentie la extensie cand le apelati: desi

browserul le afiseaza la fel, ele sunt fisiere diferite)
Save as type : Text documents
* Pentru a vedea rezultatul NU este nevoie sa fim conectati la Internet:
- lansam Windows Explorer, mergem in directorul unde l - am salvat si il deschidem cu dublu - click. Va
porni browserul care este setat ca browser implicit (daca avem instalate mai multe).
SAU
- pornim browserul; daca incearca stabilirea conexiunii la retea dati Cancel
- FILE - OPEN din meniul browserului (sau Open Page pentru Netscape si bifati butonul radio Navigator)
- BROWSE (sau Choose File pentru Netscape) - deschideti directorul in care l - ati salvat si selectati
fisierul
- OPEN
- OK (sau Open pentru Netscape)
* Trebuie sa va apara o pagina alba; in coltul din stanga sus se gaseste textul: Textul dorit de dvs.
* Daca vom face modificari in codul sursa, pentru a le putea vedea in browser trebuie salvat fisierul .html
(FILE - SAVE), apoi folosim butonul Refresh(Reload pentru Netscape. Doar uneori, pentru a afisa ultima
1
versiune salvata a codului sursa si a evita afisarea unei copii aflate in memoria cache, folosimShift +
Reload sau Option + Reload).
Acesta este modul de lucru; dupa cum vedeti nu este foarte complicat. Putem continua sa dezvoltam
aceasta pagina si sa introducem imagini, text de diverse marimi, culori, legaturi spre alte pagini, tabele, etc.
Alaturi de marcajele necesare veti gasi si foarte multe exemple (aproape fiecare atribut al fiecarui marcaj +
combinatii ale atributelor si comentarii); lista nu este completa, dar cuprinde mai mult decat cateva notiuni de
baza; o sa continui dezvoltarea ei.
a) Forma generala a unui fisier HTML este:

- marcajul HTML de deschidere - indica faptul ca informatia care urmeaza
<html>
este scrisa in limbajul HTML
<head> -marcajul HEAD de deschidere - de aici incepe antetul paginii
- marcajele pereche TITLE - aici se scriu cateva cuvinte sugestive despre
<title>Titlul paginii</title> continutul paginii - aceste 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. - ne vom ocupa mai
content = "... o lista de cuvinte ...">
tarziu de ele;
<meta name = "description"
!!! - valorile unor atribute, de exemplu "keywords", trebuie incadrate cu
content = "... o fraza sugestiva ...">
ghilimele duble, drepte ( " ) obtinute cu Shift + tasta de langa Enter, nu ( ' )
... alte instructiuni: JavaScript,
sau ( ` ).
CSS, etc. ...
- marcajul HEAD de inchidere - aici se termina antetul paginii; tot ce este
</head>
in antet nu apare in fereastra browserului
<body> - marcajul BODY de deschidere - incepe corpul documentului
... - tot ceea ce apare aici va fi afisat in fereastra browserului, dar trebuie
... formatat cu HTML
</body> - marcajul BODY de inchidere - indica sfarsitul 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 _ color_=_blue> text < font size = 5 color = blue> text < / <font_size = 5 _ color = blue> text
text
<_/_font_> font > </font>
2
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 sursa, dar ia in considerare instructiunile html
< / pre > textul preformatat,
- < 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:
e l r r a
cols =
t x u p e o m t t
t f a
wrap atributul wrap se pare ca este ignorat de unele browsere (ex. IE5.5)
< xmp > afiseaza pe linie noua textul preformatat, ca in codul sursa, dar nu ia in considerare instructiunile html
< / xmp >
textul preformatat,
-
<b>adica asa cum arata el in</b>
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
< samp > < / samp > - exemplu de date introduse de utilizator
<q></q> - ar fi trebuit sa aiba un efect asemanator instructiunii BLOCKQUOTE
3
| alte marcaje : font, paragraf, rigle, etc. |
b2) Formatarea textului si a caracterelor

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

< / font >
color = culoarea poate fi data prin numele ei sau prin valoarea RGB
o lista de minim 2 fonturi:

font1 = un font specific sistemelor Windows,
face = font2 = un font specific echivalent sistemelor Macintosh;
" font1 , font2 , ..." daca nu gaseste instalat nici unul din ele, va afisa textul cu fontul proportional
predefinit (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 > marimea fontului implicit al intregii pagini: i = 1, 2, ... , 7; 1 = mic, 7 = mare;
< / basefont > size = i 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
< h i > < / h i > este folosit pentru titluri in document; i = 1, 2, 3, 4, 5, 6;

- h
h1 h2 h3 h4 h6
5
< 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
clear =
(right) sau 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)
align = 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
4
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 la stanga daca nu este in
-
< / div > 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
align = 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.
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
width = x de tabel, 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), pentru color = #00ffff obtinem:
color =
< body atribute > - defineste inceputul si sfarsitul corpului documentului HTML

< / body >
bgcolor = culoarea fondului paginii (data prin nume sau valoarea RGB)
background = url - ul (adresa si numele) imaginii de fond a paginii
text = culoarea textului (nume culoare sau valoare RGB)
link = culoarea legaturilor nevizitate din pagina (nume sau RGB)
vlink = culoarea legaturilor vizitate din pagina (nume sau RGB)
alink = culoarea legaturilor in timpul click - ului (nume sau RGB)
5
leftmargin = indentarea intregului material din pagina fata de marginea din stanga (pixeli)
rightmargin = indentarea intregului material din pagina fata de marginea din dreapta (pixeli)
topmargin = deplasarea intregului material din pagina fata de marginea de sus (pixeli)
bgproperties = primeste doar valoarea "fixed"; daca derulam pagina, fondul ramane fix
c) Referinte ( legaturi )
Instructiune Atribute Descriere
< a atribute > - marcaj tip ancora

</a>
href = " url " referinta hipertext (legaturi spre alte pagini folosind un text sau o imagine); intre " si " nu trebuie
sa existe spatii; 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
href = " # nume-ancora " referinta catre o ancora interna (din acelasi fisier)
href = " url # nume-ancora " referinta catre o ancora externa (din alt 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
href = " alt-URL " fisiere situate pe alt site de pe alt server; este folositor daca in fisier avem 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:
6
Tabelul descrie imaginea din
dreapta
nivelul 1 nivelul 2 nivelul 3
fisierul : Printr-o legatura plasata intr-un fisier putem accesa un alt fisier, prin intermediul

index.html referintelor.
Referintele pot fi: interne (spre o ancora din acelasi fisier) sau externe (spre un alt fisier);
fisiere :
directorul : in functie de modul cum specificam calea spre alt fisier pot fi absolute sau relative:
a11.htm
A1 absolute :
a12.htm
- legatura <a href = "http: //www. alte_servere. com/ alt_site/ nume_fisier.html">, plasata in
orice fisier din site - ul nostru, indica o legatura externa.
directorul : fisiere :
directorul : - legatura <a href = "http: //www.nume_server.com/ nume_director/ A/ A1/ a12.htm">, plasata
A a21.htm
A2 in fisierul index.html, indica o legatura spre fisierul a12.htm din site - ul nostru.
a22.htm
relative :
fisierul : - legatura <a href = ".. / .. / index.html">, plasata in orice fisier din directorul A1 sau A2, indica
o legatura spre fisierul index.html din site - ul nostru.
a.htm
- legatura <a href = ".. / A / a.htm">, plasata in fisierul b.htm din directorul B, indica o legatura
directorul : fisierul : spre fisierul a.htm din directorul A.
- legatura <a href = "A / A1 / a12.htm">, plasata in fisierul index.html, indica o legatura spre
B b.htm
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); in acest caz dati lui cellpadding valori diferite de
zero pentru ca textul din celula sa nu fie aproape"lipit" de chenarul ei - este greu lizibil;
- putem controla mult mai bine aranjarea in pagina a elementelor (folosind tabele fara chenar, eventual
introducem tabele in interiorul altui tabel); in acest caz valoarea zero pentru cellpadding si cellspacing este (in
general) indicata.
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)
cellpadding = spatiu intre continutul celulelor tabelului si continutul lor (in pixeli)
cellspacing = spatiu intre celulele tabelului (in pixeli)
width = latimea tabelului (in pixeli sau % din spatiul disponibil)
7
bordercolor = culoarea chenarului (nume culoare sau valoare RGB)
bordercolorlight = culoarea mai deschisa a chenarului (stanga + sus) (nume culoare sau valoare RGB)
bordercolordark = culoarea mai inchisa a chenarului (dreapta + jos) (nume culoare sau valoare RGB)
aliniaza tabelul in dreapta (right) sau stanga (left) paginii; textul din jurul tabelului curge
align =
pe partea opusa
hspace = spatiu pe orizontala in jurul tabelului (in 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 >
bgcolor = culoarea fondului pentru intreaga linie (valoare RGB sau nume culoare)
align = alinierea continutului celulelor (left, center, right); implicit left
inaltimea liniei (in pixeli); in unele browsere nu functioneaza, dar puteti folosi height in
height =
TD
< td atribute > - celula de tabel

< / td >
inaltimea celulei; daca pe aceeasi linie (TR) dati din greseala 2 valori diferite pentru
height =
height in TD, va lua maximul pentru toate celulele liniei
width = latimea celulei
bgcolor = culoarea fondului pentru intreaga celula (valoare RGB sau nume culoare)
background = " url " imaginea de fond pentru celula
align = alinierea continutului celulei pe orizontala (left, center, right); implicit left
valign = alinierea continutului celulei pe verticala: top (sus), middle (mijloc), bottom (jos);
implicit middle
align = baseline aliniaza celulele cu linia de baza a textului adiacent
align = caracter aliniaza coloana fata de un anumit 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
nowrap nu permite despartirea textului pe linii in celula
poate fi folosit :
< th > < / th > - - in loc de TD, dar continutul va fi centrat si ingrosat (bold);
- impreuna cu TD pe aceeasi linie (TR)
< caption atribute > - text explicativ asociat tabelului

< / caption >
align = alinierea textului (top = implicit, bottom, left, right)
< colgroup > - impreuna cu marcajul < col > defineste un set de definitii de coloane
< / colgroup>
bgcolor = culoarea de fond
8
< col atribute > - fara atribute: aceeasi latime pentru toate coloanele
width = latimea coloanei, in pixeli, % sau " * "
align = alinierea textului pentru intreaga coloana (se 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>
Pentru a va depana codul paginilor realizate pe baza de tabele sau daca vedeti o aranjare in pagina care va
place (si banuiti ca este pe baza de tabele) puteti inlocui TABLE BORDER=0 cu 1; si mai clar este sa adaugati
BORDERCOLOR=...diverse culori. Nu va mai arata la fel de bine, eventual se va lati, dar va fi mai usor de
depanat.
Pentru a o "repara" puteti folosi Replace All: TABLE BORDER=1 cu TABLE BORDER=0 (Atentie: 1-si
alte instructiuni au atributul BORDER, nu numai TABLE; 2-in pagina pot fi tabele care deja au BORDER
diferit de zero). Pe BORDERCOLOR=... il puteti lasa: daca aveti BORDER=0 el nu mai conteaza.
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 pe server (se foloseste mai rar; de obicei
ismap
folosim harti de imagine la client)
usemap = " nume_harta " specifica harta de imagine la client
lowscr = " url " imaginea de rezolutie scazuta care se incarca prima (doar pentru Netscape)
9
< map atribute > - specifica regiunile unei harti de imagine la client
< / map >
name = " nume_harta " numele hartii de imagine (corespunzator 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 (punct), poly
shape = " forma " sau polygon (poligon)
!!! Netscape 4.51 nu a "inteles" decat circle, nu si circ
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
coords = " coordonate "
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
alt = " text " deasupra regiunii respective sau celor cu browserul setat sa nu incarce imagini
!!! Netscape 4.51 nu a afisat decat primul text dat cu alt
Harti de imagini - exemplu : map , usemap , area shape
Codul sursa al acestei pagini este:
<html> - indica browserului ca incepe un document HTML
<head> - inceputul antetului
<title> Harti de imagini - exemplu : map ,

- titlul de pe bara de titlu a browserului
usemap , area shape</title>
</head> - sfarsitul antetului
<body bgcolor=white> - inceputul corpului documentului
<h2> Harti de imagini - exemplu </h2> - primul text din pagina
<center> - aliniaza pe centru materialul care urmeaza
<img src="../foto/imagine.gif"
usemap="#map1" border=0 width=200 - include imaginea (de dimensiuni 200x200 pixeli) si o defineste ca fiind o harta de
height=200 alt="contine 3 zone"> imagini la client
</center> - sfarsitul alinierii pe centru
<map name="map1"> - incepem sa definim regiunile hartii de imagini numita map1
<area shape= "rect" coords=

"30,30,70,70" - defineste o regiune dreptunghiulara; coltul din stg. sus are x=30, y=30; coltul din dr. jos
href= "rect.htm" alt="dreptunghi"> are x=70, y=70; cu click ajungem la pagina (fisierul) rect.htm
10
<area shape= "circle" coords=
"150,50,40" - defineste o regiune circulara; centrul cercului are x=150, y=50, iar raza=40; cu click
href= "circ.htm" alt="cerc"> ajungem la pagina (fisierul) circ.htm
<area shape= "poly" href= "poly.htm"

coords= "0,110,200,110,100,200" - defineste o regiune de forma unui poligon cu 3 colturi; primul colt are x=0, y=110; al
alt="poligon (triunghi in acest caz)"> doilea are x=200, y=110; al treilea are x=100, y=200; cu click ajungem la pagina (fisierul)
poly.htm
 - sfarsit de comentariu in codul sursa
</map> - terminam de definit regiunile hartii de imagini numita map1
</body> - sfarsitul corpului documentului
</html> - sfarsitul documentului HTML
In acest caz, atributul HREF din cadrul instructiunilor AREA indica legaturi spre pagini (fisiere) diferite;
este posibil ca unele dintre ele sa indice legaturi spre acelasi fisier, in cadrul caruia sa avem definite ancore (cu
<a name= nume_ancora> text_ancora 1, 2, ... </a>); atunci HREF ar avea forma: HREF = " nume_fisier.html #
nume_ancora ".
f) Imagini
Instructiunea Atribute Descriere
< img atribute > - marcajul de includere a imaginii
src = " url " adresa fisierului grafic (url absolut sau relativ)
alt = " text " textul alternativ care este afisat celor care navigheaza fara 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)
11
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.
Imagini - exemple
1 <img src="../foto/imagine.gif">
obtinem imaginea (src) imagine.gif nedeformata, in marimea ei originala
2 <img src="../foto/imagine.gif" border=10>
obtinem imaginea imagine.gif in marimea ei originala, nedeformata, cu un chenar (border) de 10 pixeli
3 <img width=20% src="../foto/imagine.gif">
imaginea se obtine nedeformata, pe 20% din latimea (width) spatiului disponibil (in acest caz intregul ecran)
12
4 <img height=20% src="../foto/imagine.gif">
imaginea se obtine nedeformata, pe 20% din inaltimea (height) spatiului disponibil (in acest caz intregul ecran)
5 <img width=90% height=50% src="../foto/imagine.gif">
imaginea se obtine deformata, pe o latime (width) de 90% si inaltime (height) 50% din spatiul disponibil (in
acest caz un tabel de 400x200 pixeli)
6 <img src="../foto/imagine.gif" width=70 height=70>
imaginea se obtine nedeformata (deoarece pentru ambele dimensiuni am pastrat proportia de 7/20 fata de

original), inalta (height) de 70 si lata (width) de 70 pixeli
13
7 <img src="../foto/imagine.gif" width=70 height=70%>
imaginea se obtine deformata, inalta (height) de 70 % din inaltimea spatiului disponibil si lata (width) de 70
pixeli
8 <img alt="imagine..." width=20% src="../foto/imagine.gif">
imaginea se obtine nedeformata, pe 20% din latimea (width) spatiului disponibil (in acest caz intregul
ecran); alt = "imagine" reprezinta textul alternativ (apare daca lasam mouse-ul nemiscat deasupra imaginii sau
la cei ce navigheaza fara imagini); este recomandata folosirea atributului alt
9 text<img hspace=50 height=50 width=100 src="../foto/imagine.gif">text
text text
imaginea se obtine deformata, cu o latime (width) de 100 pixeli si inaltime (height) de 50 pixeli; in stanga si
dreapta imaginii exista un spatiu pe orizontala (hspace) de 50 pixeli
10 text<br><img vspace=50 height=50 width=100 src="../foto/imagine.gif"><br>text

text
text
imaginea se obtine deformata, cu o latime (width) de 100 pixeli si inaltime (height) de 50 pixeli; deasupra si
dedesubtul imaginii exista un spatiu pe verticala (vspace) de 50 pixeli
14
Alinierea imaginii in pagina
11 <img src ="../foto/imagine.gif" align=right height=20%><br clear=all>text text . . . text
text text . . . text

imaginea se obtine nedeformata, la 20 % din latimea spatiului disponibil, aliniata (align) la
dreapta; este necesar br clear=all sau br clear=right pentru ca textul sa apara sub imagine.
12 Cu : <img src ="../foto/imagine.gif" align=right height=20%><br>text text . . . text

textul nu mai apare sub imagine, ci in stanga ei
13 Cu : <img src="../foto/imagine.gif" align=left height=20%><br>text text . . . text

textul nu mai apare sub imagine, ci in dreapta ei
14 Fara "align" : <img src="../foto/imagine.gif" height=20% ><br>text text . . . text

textul apare sub imagine
15 Deoarece "align" nu primeste valoarea "center" putem folosi:

text1 text1 . . . text1<center><img src="../foto/imagine.gif " height=20%></center>text text . . . text
text1 text1 . . . text1

textul apare sub imagine
Alinierea elementelor din jurul imaginii
15
16 Cu : text text . . . text<img src="../foto/imagine.gif" align=top height=20%>text text . . . text
text text . . . text text text . . . text

textul este aliniat la partea superioara a imaginii
17 Cu : text text . . . text<img src="../foto/imagine.gif" align=middle height=20%>text text . . . text

textul este aliniat la jumatatea imaginii
18 Cu : text text . . . text<img src="../foto/imagine.gif" align=bottom height=20%>text text . . . text

textul este aliniat la baza imaginii
19 Fara "align" : text text . . . text<img src="../foto/imagine.gif " height=20%>text text . . . text

textul este aliniat (implicit) la baza imaginii
20 <img src="../foto/hello.gif" border=1 width=150 height=60>
Exista fisiere .gif animate si / sau transparente; dupa cum vedeti hello.gif le imbina pe amandoua.
Aceeasi imagine este plasata in ambele celule ale unui tabel cu o linie si doua coloane: pentru prima celula nu
este specificata culoarea fondului celulei (deci ia culoarea paginii); pentru a doua este dat un fond galben, care
se "vede" prin imagine.
21
16
Putem face sa apara un text pe bara de stare a browserului (deasupra butonului "Start")atunci cand
mouse-ul este plasat deasupra unei imagini si un alt text care ramane (aveti grija sa alegeti un text potrivit
oricarei situatii - plasati mouse-ul pe imagine, apoi si pe legaturile "Home" si "Imagini" de mai jos si veti
intelege la ce ma refer; acest subiect il gasiti tratat mai pe larg la c) Referinte) pe bara de stare cand luam
mouse-ul de pe imagine:

Codul sursa este:
<img height=50 width=50 src="../foto/imagine.gif" alt="imaginea
reprezinta ..." OnMouseOut="self.status='text ce ramane pe bara de stare
cand luam mouse-ul de pe imagine';return true" OnMouseOver="self.status='text
ce apare pe bara de stare cand mouse-ul este deasupra imaginii';return true">
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
border = marimea chenarului (pixeli); in general nu dorim chenar si folosim border =0 impreuna cu
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.
frameborder = specifica daca cadrul definit cu FRAMESET are sau nu chenar : yes sau no; implicit yes
framespacing = marimea spatiului dintre cadre (pixeli); daca il folositi impreuna cu border, dar cu valori
diferite, 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
name = numele cadrului, utilizat de marcajul < a href = "url" target = nume >
scrolling = optiuni pentru bara de derulare : yes (da), no (nu), auto (daca este nevoie); implicit "auto"
noresize pentru a nu redimensiona tragand de chenar (doar 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 pot interpreta cadre
< / noframes >
< iframe atribute > - cadru intern (doar IE)

< / iframe >
src = " url " sursa cadrului
17
name = numele cadrului, utilizat de marcajul < a href = "url" target = nume >
height = inaltimea cadrului inglobat (pixeli sau %)
width = latimea cadrului inglobat (pixeli sau %)
frameborder = specifica daca cadrul definit cu IFRAME are sau nu chenar (yes sau no; implicit yes)
scrolling = optiuni pentru bara de derulare : yes (da), no (nu), auto (daca este nevoie); implicit "auto"
Cadre - exemple
Acest tip de impartire in cadre (redimensionate dupa dorinta) a intregului display poate fi folosit ca pagina
principala pentru un site, de aceea am denumit fisierul care o genereaza index.html. (vezi sursele pe calculator).
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)
18
ç ç 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; nu am obtinut s cu sedilã; afiseazã exact codul sursã
ţ &tcedil; nu am obtinut t cu sedilã; afiseazã codul sursã
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
00 00
33 33
66 66
G= G=
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
19
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
Aici puteti testa size, color, face cu ajutorul unui formular

Alte 139 culori exprimate prin nume
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
20
Combinatii de liste - exemplu
Sursa : Rezultat :
<ol type=I>
<li>termen 1
<ul>
<li>termen1-1 : I. termen 1
<dl> o termen1-1 :
<dt>termen1-1a
<dd>descriere termen1-1a
<dt>termen1-1b termen1-1a
<dd>descriere termen1-1b descriere termen1-1a
</dl> termen1-1b
<li>termen1-2 : descriere termen1-1b
<dl> o termen1-2 :
<dt>termen1-2a
<dd>descriere termen1-2a termen1-2a
<dt>termen1-2b descriere termen1-2a
<dd>descriere termen1-2b termen1-2b
</dl> descriere termen1-2b
</ul> II. termen 2
<li>termen 2
<ul type=square>
<li>termen2-1 :  termen2-1 :
<dl>
<dt>termen2-1a termen2-1a
<dd>descriere termen2-1a descriere termen2-1a
<dt>termen2-1b termen2-1b
<dd>descriere termen2-1b descriere termen2-1b
</dl>  termen2-2 :
<li>termen2-2 :
<dl>
<dt>termen2-2a termen2-2a
<dd>descriere termen2-2a descriere termen2-2a
<dt>termen2-2b termen2-2b
<dd>descriere termen2-2b descriere termen2-2b
</dl> II. termen 3
</ul>
<li>termen 3
</ol>
k) Facilitarea gasirii paginii de catre motoarele de cautare

<title> - marcajele pereche TITLE - aici dam titlul: cateva cuvinte sugestive despre continutul
</title> - 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
21
<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 nume sau

background imagini sau culori de fundal
valoare RGB
color culoarea textului nume sau valoare RGB
font-family tipul fontului numele fontului sau al familiei de fonturi
data in puncte(pt), inch(in), centimetri(cm),

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

font-weight grosimea fontului
bold, bold, extra-bold

line-height distanta dintre liniile de baza ale randurilor
pixeli(px), procent(%)

margin-left distanta fata de marginea din stanga a paginii
pixeli(px)

margin-right distanta fata de marginea din dreapta a paginii
pixeli(px)
margin-top distanta fata de textul precedent sau fata de data in puncte(pt), inch(in), centimetri(cm),
22
marginea de sus a paginii pixeli(px)
left(stanga), center(centru), right(dreapta),

text-align alinierea textului
justify
text- none(nimic), underline(subliniat), italic(cursiv),

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

border-style tipul chenarului
ridge, inset, outset

border-width grosimea chenarului
pixeli(px)
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
23

Limbă

Creati Un SITE Plecând de La ZERO Folosind 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

Creati Un SITE Plecând de La ZERO Folosind HTML

Titlu original:

Încărcat de

Drepturi de autor:

Formate disponibile

Creati un SITE plecând de la ZERO folosind HTML

Pentru a prinde curaj si a vedea modul de lucru, sa construim o pagina simpla.

Instructiuni, atribute, exemple :

a) Forma generala a unui fisier HTML este:

Gresit Rezultat Bine Rezultat

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

- 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

< strike > < / strike > - afiseaza textul taiat

< strong > < / strong > - evidentiere logica puternica

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

< address > informatii

< 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

<q></q> - ar fi trebuit sa aiba un efect asemanator instructiunii BLOCKQUOTE

b2) Formatarea textului si a caracterelor

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

o lista de minim 2 fonturi:

culoarea poate fi data prin numele ei sau prin valoarea RGB

< h i > < / h i > este folosit pentru titluri in document; i = 1, 2, 3, 4, 5, 6;

< center > centreaza in pagina

< blockquote > textul

< br atribute > forteaza

aliniat pe centru (center),

aliniat la dreapta (right),

class = specifica un anume stil de text

type = " text/css "

< hr atribute > rigla orizontala; fara atribute obtinem:

elimina umbra riglei:

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

alinierea riglei in pagina; pentru width = 50 % obtinem:

< body atribute > - defineste inceputul si sfarsitul corpului documentului HTML

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

text = culoarea textului (nume culoare sau valoare RGB)

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

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

alink = culoarea legaturilor in timpul click - ului (nume sau RGB)

< a atribute > - marcaj tip ancora

name = " nume-ancora " definirea unei ancore

numele cadrului in care va fi afisata sursa definita cu HREF

nivelul 1 nivelul 2 nivelul 3

Referintele relative au cateva avantaje :

< table atribute > - inceput de tabel HTML

imaginea de fond pentru tabel;

cellspacing = spatiu intre celulele tabelului (in pixeli)

width = latimea tabelului (in pixeli sau % din spatiul disponibil)

hspace = spatiu pe orizontala in jurul tabelului (in 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

align = alinierea continutului celulelor (left, center, right); implicit left