Curs HTML

Curs HTML
- 13 lecii n care vei putea nva HTML, principalul limbaj folosit pentru
crearea site-urilor.
Chiar dac sunt mai multe programe de tip WYSIWYG cu ajutorul crora
putei construi pagini web, fr a cunoate acest limbaj, este bine totui s avei
mcar cunotinele de baz ale limbajul HTML. Astfel putei s realizai cu
uurin i cu un aspect profesionist propria pagin pe internet.
Introducere
HTML (HyperText Markup Language) este un limbaj utilizat pentru
crearea paginilor web ce pot fi afiate ntr-un browser (sau navigator).
HTML este folosit pentru prezentarea unui coninut (text, imagine) ntr-o
pagin web, furnizeaz mijloacele prin care coninutul unui document poate fi
structurat i adnotat cu diverse tipuri de metadate i indicaii de redare i afiare.
Aceste indicaii pot varia de la decoraiuni minore ale textului, cum ar fi culoarea
sau sublinierea unui cuvnt ori introducerea unei imagini, pn la adugarea de
elemente sofisticate, tabele, hri de imagini, formulare i cod CSS sau scripturi
JavaScript.
Metadatele pot include informaii despre titlul i autorul documentului,
informaii structurale despre cum este mprit documentul n diferite segmente,
paragrafe, liste, titluri etc. i informaii eseniale care permit ca documentul s
poat fi legat de alte documente pentru a forma astfel hiperlink-uri.
HTML este un format text proiectat pentru a putea fi citit i editat utiliznd
un editor de text simplu, editarea i nelegerea paginilor n acest fel necesit
cunotine de HTML, pe care le putei obine studiind leciile din acest curs.
Exist i editoare grafice, de tip WYSIWYG (What You See Is What You Get "ceea ce vezi este ceea ce obii"), cum ar fi Macromedia Dreamweaver, Adobe
GoLive sau Microsoft FrontPage, care permit ca paginile web sa fie tratate
asemntor cu documentele Word i genereaz ele cod HTML pentru coninutul
paginii, dar aceste programe genereaz un cod HTML care este de multe ori prea
ncrcat i de proast calitate.
HTML este de asemenea utilizat n e-mail. Majoritatea aplicaiilor de email folosesc un editor HTML ncorporat pentru compunerea e-mail-urilor i un
motor de prezentare a e-mail-urilor de acest tip.
Acest curs prezint elementele de baz ale limbajului HTML i modul de

lucru cu acesta, v ajut s nvai cum s creai pagini web folosind aceast
tehnologie.
Tot ce avei nevoie este un editor de texte simplu, cum ar fi Notepad, i un
navigator, de exemplu Mozilla Firefox, care este gratuit.
Pentru a nva ct mai bine elementele prezentate n aceste lecii, exersai
personal fiecare exemplu prezentat i creai i altele pornind de la acestea.
Reinei c acest curs reprezint o baz i un punct de pornire pentru
nvarea HTML, ne fiind prezentate aici toate proprietile i elementele HTML.
Pentru o cunoatere mai amnunit a acestora, vizitai site-ul W3C HTML.
Lecia 1 - Principalele elemente HTML

1. Ce este HTML? (Hypertext Markup Language)
- Este un set de coduri logice care constituie apariia unui document web i a
informaiilor pe care le deine. Codurile sunt scrise ntre "<" (parantez
deschis) i ">" (parantez nchis), cu toate c nu sunt chiar paranteze, aa se
numesc i arat aa: < >.
Exemplu:
<BODY> sau <FONT>
- Cele mai multe elemente (numite i tag-uri) au un element (tag) de deschidere
i un element de nchidere distins prin "/" n interiorul parantezei deschise "<".
Exemplu:
<FONT> ... </FONT>
- Primul cuvnt care apare nuntru "<" se numete element sau etichet HTML
i spune browser-ului s fac ceva, precum <FONT>
- Cuvintele care urmeaz dup element in interiorul "< >"se numesc atribute
care descriu proprietile elementului. Cum ar fi : culoarea, mrimea, etc.
- Atributele sunt separate prin spaiu i urmate de semnul egal "=", dup care sunt
scrise, ntre ghilimele (" ") valorile atributelor.
- Astfel, o etichet HTML poate conine elementul de identificare, atribute i
valori.
- n urmtorul exemplu elementul este FONT atributul COLOR i valoarea
BLUE:
<FONT COLOR="BLUE">Acest text va fi albastru</FONT>
2. Structura documentului HTML
- Un document (fiier) HTML este alctuit din mai multe elemente i atributele
lor.
- La nceput un element HTML cuprinde (nconjoar) datele documentului.
Acest element conine dou sub-elemente: HEAD i BODY. n HEAD se
poate aduga titlul paginii web i alte elemente numite metatag-uri iar n BODY
se adug coninutul documentului care va fi afiat n pagina web.
Exemplu:
<html>
<head>
<title>Titlu Documentului</title>
</head>
<body>
Coninutul paginii
</body>
</html>
Structura general a unui document HTML

<HTML>
<HEAD> Acesta are i el mai multe sub-elemente:
<TITLE> Aici se scrie titlul documentului, ct mai sugestiv, i se ncheie
cu </TITLE>
<BASE> Poate fi folosit pentru a nregistra locaia documentului n
forma URL. (Necesar dac documentul nu este accesat n locaia lui original).
Se ncheie cu </BASE>
<LINK> Indic o relaie dintre document i alte obiecte de pe WEB. Se
ncheie cu </LINK>
<META> Aici sunt scrise informaii cum ar fi tastatura (limbaj) folosit,
descrierea i cuvinte cheie care pot fi gsite de motoarele de cutare. Se ncheie
cu </META>
<SCRIPT> Conine oricare din JavaScript sau VB Script. Se ncheie cu
</SCRIPT>
<STYLE> Conine informaii privind stilul, grafica informaiilor care vor
aprea pe pagin. Se ncheie cu </STYLE>
Aici se ncheie elementele adugate n HEAD
</HEAD>
<BODY> Etichetele HTML i coninutul documentului care va fi afiat n
pagina web sunt incluse n acest element. Aici pot fi puse i elemente cum ar fi:
<SCRIPT> </SCRIPT>
Se ncheie cu
</BODY>
</HTML>
3
Lecia 2 - Crearea i editarea paginii HTML

Sunt mai multe programe cu care se pot crea pagini web, chiar fr a
cunoate limbajul HTML, cum sunt Microsoft FrontPage sau Macromedia
Dreamweaver.
Editoarele de text sunt programele de baz, i cele mai folosite, pentru
editarea paginii web. Avantajul folosirii lor este simplitatea, pentru creare paginii
web sunt necesare cteva din codurile invizibile ale limbajului HTML, astfel se
creeaz documente rapid i uor, n plus ocup foarte puin spaiu i resurse de
memorie,
acestea
ns
necesit
cunoaterea
limbajului
HTML.
Dintre editoarele de text cunoscute cel mai folosit este Notepad, care este
folosit i pentru acest curs, dar poate fi utilizat orice editor de text. Pentru
nceptori i pentru uurina cu care se lucreaz, eu recomand folosirea aplicaiei
NotePad, dar cei avansai pot folosi si altele cum ar fi Notepad++, Dreamweaver.
1.Crearea bazei de nceput a unui document

Cum ai vzut n Lecia 1, sunt elemente sigure, generale, care sunt
necesare pentru crearea unui document HTML.
Pentru nceput deschidei aplicaia NotePad i scriei structura de baz a
unei pagini web. Aceasta este:
<html>
<head>
<title> </title>
</head>
<body>
</body>
</html>
Acum pagina dv. are HEAD i BODY n interiorul bazei <HTML>. De
asemenea are elementul TITLE n interiorul elementului HEAD, pe care ar trebui
s-l completai cu un text reprezentativ ca titlu al documentului dv.
Ceea ce scriei la TITLE va apare n linia cea mai de sus a browseru-lui
(deasupra meniurilor). La TITLE putei pune orice text, dar este bine s scriei
ceva care s descrie ct mai bine obiectul i coninutul paginii deoarece este ceea
ce caut i indexeaz multe portaluri de cutare de pe internet.
Mai jos gsii un exemplu cum ar putea fi completat meniul TITLE:
4
<html>
<head>
<title>MarPlo.net - Cursuri, Jocuri i Anime</title>
</head>
<body>
</body>
</html>
2. Setarea proprietarilor documentului

BODY, de exemplu cum ar fi culorile pentru fondul paginii, pentru
text i diferite faze ale link-urilor.
Culorile sunt setate folosind culorile de baz: rou, verde i
albastru; expresia folosita RGB (Red, Green, Blue), care sunt
reprezentate ca valori hexadecimale i sunt scrise ntre ghilimele (" "),
la nceput trebuie adugat caracterul '#'. Fiecare 2 uniti ale codului
reprezint una din culorile RGB.
De exemplu: #00aa11 reprezint o culoare care
nu are Rou (00), are Verde (aa) i Albastru mai puin (11).
Elementul BODY
- Acest element conine informaii despre culoarea sau imaginea din
fondul paginii, text i culoarea link-urilor.
- Dac elementul BODY nu este completat cu alte atribute atunci
browser-ul va prezenta culorile standard, de obicei fondul este alb.
- Pentru a seta culoare fondului paginii trebuie s editai eticheta
<BODY> adugnd atributul BGCOLOR.
- Urmtorul exemplu va prezenta un document a crui fond este de
culoare albastr:
<body bgcolor="#0000ff"></body>
Culoarea textului
- Atributul TEXT controleaz culoarea textului normal din
document
- Acesta va afecta tot textul din document care nu este colorat de al
te elemente, cum ar fi link-ul.
- Culoarea standard pentru text este Negru.
- n urmtorul exemplu culoarea fondului va fi albastru i culoarea
textului va fi rou, atributul TEXT va fi adugat astfel:
<body bgcolor="#0000ff" text="#ff0000"></body>
Link-uri (LINK, VLINK si ALINK)
5
- Aceste atribute controleaz culoarea link-ului n diferite stri

1.LINK - culoarea iniial a link-ului. Standard este albastru
2.VLINK - culoarea unui link vizitat. Standard este purpuriu.
3.ALINK - culoarea link-ului in momentul activrii. Standard este
rou.
- Modul de setare al acestor atribute este urmtorul:
<body
bgcolor="#ffffff"
text="#ff0000"
link="#0000ff"
vlink="#ff00ff" alink="#ffff00"></body>
Rezultatul va fi o pagin cu fondul alb, textul rou, link-urile albastre, link-urile vizitate vor avea culoarea roz iar culoarea link-urilor
n momentul activrii va fi galben.
Folosirea unei imagini ca fond pentru pagin (background)
- Elementul body ofer posibilitatea nlocuiri fondului paginii cu o
imagine (Background image). Daca imaginea este mai mic dect
dimensiunile paginii atunci imaginea va fi multiplicat pn va
acoperi ntreg cadrul documentului. Este indicat ca imaginea s fie
n format *.gif sau *.jpg. Folosirea unei imagini va da un aspect
plcut documentului.
- Un exemplu de cod HTML cu imagine pentru background este
urmtorul:
<body background="logo.gif" bgcolor="#ffffff"></body>
n acest exemplu fondul pagini va fi dat de imaginea fiierului
"logo.gif" i de asemenea am setat BGCOLOR astfel nct n timpul
procesului de ncrcare a imaginii culoarea fondului va fi alb.
Dup ce ai creat baza de nceput a unui document i ai setat proprietile,
trebuie s salvai fiierul. Salvarea trebuie fcut ntr-un format pe care browserul l poate recunoate. Extensia standard pentru un fiier care reprezint o pagin
web este ".htm" sau ".html". De obicei folosesc (".htm").
- Pentru a salva documentul ca s arate ca o pagin web, n NotePad
alegei din meniul File comanda Save i salvai fiierul cu orice nume dorii dar
cu extensia html (sau "htm") - (La File name: scriei i numele i extensia
".html", exemplu: index.html). Dac nu scriei extensia, NotePad va salva
documentul n format "txt".
- Pentru a vedea documentul ca o pagin web, ducei-v n directorul n
care ai salvat fiierul i deschidei-l pur si simplu (cu Enter sau dublu-click la
mouse), acesta va fi deschis automat de browser-ul pe care-l folosii (Mozilla
Firefox, Internet Explorer, Opera). Sau deschidei browser-ul i din comanda
Open deschidei documentul pe care l-ai salvat.
- Pentru a continua munca, a face modificri paginii sau a aduga altceva
n documentul HTML, deschidei documentul cu NotePad. Una din metode este
s deschidei aplicaia NotePad i din meniul File alegei Open apoi gsii fiierul
pe care vrei s-l modificai i dai clic pe butonul Open. Dup ce terminai
6
modificrile salvai, astfel dac redeschidei documentul ca o pagin web acesta

va fi deschis cu noul format.
Aici putei vedea structura general a unei pagini Web
Forma general a unei pagini Web
<html>
- marcajul HTML de deschidere - indic

faptul c informaia care urmeaz este scris
n limbajul HTML
<head>
- marcajul HEAD de deschidere - de aici

ncepe antetul paginii
<title>Titlul paginii</title>
- marcajele TITLE - aici se scriu cteva

cuvinte despre coninutul paginii - aceste
cuvinte vor aprea pe bara de titlu a
browserului; dac pagina este adugat ntro list favorit, ele apar ca nume al paginii.
- metatag-uri, ajut motoarele de cutare la

<meta name = "keywords"
indexarea paginii.
content = "... o lista de cuvinte ...">
- valorile unor atribute, de exemplu
<meta name = "description"
"keywords", trebuie ncadrate cu ghilimele
content = "... o fraz sugestiv ...">
duble, drepte ( " ), cuvintele cheie din
... alte instruciuni: JavaScript,
atributul content se scriu separate prin
CSS, etc. ...
virgul, exemplu: content="cursuri, lecii,
jocuri, anime".
</head>
- marcajul HEAD de nchidere - aici se

termin antetul paginii; cea ce este n antet
nu apare n fereastra browserului
<body>
- marcajul BODY de deschidere - ncepe

corpul documentului, de aici este adugat
coninutul care va aprea n pagina web
... Coninut, etichete HTML ...
- tot ceea ce apare aici va fi afiat n

fereastra browserului
</body>
- marcajul BODY de nchidere - indic

sfritul corpului documentului
</html>
- marcajul HTML de nchidere
Instruciunile HTML (numite i controale, marcaje sau tag-uri) ncep cu o

parantez unghiular deschis < urmat imediat de numele instruciunii, unul sau
mai multe atribute ale instruciunii (opional), apoi de o parantez unghiular
nchis >.
Majoritatea instruciunilor sunt perechi; cea de nceput se numete marcaj
de deschidere i este de forma:
<nume_instruciune atribut="valoare_atribut">
iar cea de sfrit marcaj de nchidere i nu conine atribute sau spaii; este de
forma:
</nume_instruciune>
NU sunt permise spaii dect ntre nume de instruciune i atribute. Tot ce
se gsete ntre marcajul de deschidere i cel de nchidere va avea caracteristicile
elementului respectiv.
Browserul ignor elementele pe care nu le nelege i pe cele scrise greit.
Exemplu (daca simbolizm spaiul prin _ atunci):
Greit
Rezultat
Bine
Rezultat
<_h2>text</h2>
< h2>text
<h2> text </h2>
text
<_font_size = 6 _
color_=_red> text
<_/_font_>
< font size = 6 color

= red> text < / font
>
<font_size = 6 _
color = red> text
</font>
text
Lecia 3 - Titluri, Paragrafe, Un nou rnd, Linie

orizontal
1. Titluri <Hx> ... </Hx>

- Pentru titluri din coninutul documentului HTML este indicat
folosirea etichetelor <Hx>, (headings) unde 'x' este un numr ntre 1 i
6.
- n interiorul elementului BODY, elementele Headings sunt folosite ca
titluri sau pentru o mai bun mprire a coninutului paginii.
- Mrimea textului nconjurat de elementul Heading variaz de la foarte
8
mare, n <H1> pn la foarte mic n <H6>.

Mai jos putei vedea exemplu:
Cod HTML
<html>
<head>
<title>Titlu documentului</title>
</head>
<body>
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>
</body>
</html>
Cum apare n pagin
Heading 1
Heading 2
Heading 3
Heading 4
Heading 5
Heading 6
2. Paragraf <p> ... </p>

- Paragrafele permit s adaugi text n document astfel nct lungimea de
afiare a textului va fi ajustat de mrimea deschiderii browser-ului i
fiecare paragraf va ncepe un nou rnd.
- Distana dintre doua paragrafe succesive este mare deoarece browserul le afieaz cu un rnd gol intre ele.
Cod HTML
Cum apare n pagin
<html>
<head>
</head>
<body>
<p>Paragraf 1</p>
<p>Paragraf 2</p>
<p>Paragraf 3</p>
<p>Paragraf 4</p>
</body>
Paragraf 1
Paragraf 2
Paragraf 3
Paragraf 4
</html>
3. Un nou rnd <br>

- Tag-ul <br> permite s decizi unde textul va ncepe un nou rnd, astfel
se foreaz nceperea unui nou rnd.
- <br> este un Element Gol dar poate s conin atribut. <br> nu are i
nu cere element de nchidere, nu se folosete </br>
Cod HTML
<html>
<head>
</head>
<body>
<h1>Heading 1</h1>
<p>Paragraf 1<br>
Linie 2<br>
Linie 3<br>
... </p>
<p>Paragraf 2</p>
</body>
</html>
Cum apare n pagin
Heading 1
Paragraf 1
Linie 2
Linie 3
...
Paragraf 2
- Elementul <br> folosete un singur atribut CLEAR care poate avea valoarea
LEFT, RIGHT sau ALL, i sunt folosite dac este o imagine pe pagin. Atributul
CLEAR foreaz o linie n jos. Dac o imagine este aezat n partea stnga a
paginii, valoarea LEFT va muta cursorul jos la prima linie din marginea stnga.
4. Linie orizontal <hr>

- Acest element afieaz o linie orizontal n document
- Acest element nu folosete element de nchidere [</hr>]
- Elementul <hr> folosete urmtoarele atribute:
-SIZE = limea liniei, n pixeli (standard este 2)
-WIDTH = lungii liniei, n pixeli sau procente din lungimea afirii
paginii (standard 100%)
10
- NOSHADE = afieaz linia fr a avea un aspect 3D

- ALIGN = aliniaz linia (Left, Center, Right), adic Stnga, Centru sau
Dreapta paginii (Standard centru)
- COLOR = seteaz culoarea liniei
Cod HTML
Cum apare n pagin
<html>
<head>
</head>
<body>
<h1>Heading 1</h1>
<p>Paragraf 1<br>
Linie 2<br>
Linie 3<br>
... </p>
<hr>
<hr color="#1111fe" size="4" width="50%">
<p>Paragraf 2</p>
</body>
</html>
Heading 1
Paragraf 1
Linie 2
Linie 3
...
Paragraf 2
Lecia 4 - Formatul textului
HTML conine mai multe elemente, tag-uri i atribute, pentru

afiarea textului n mai multe formate cu aspecte grafice diferite .
1. Tag-ul <FONT> ... </FONT>

Cu acest element, <FONT>, putei modifica aspectul textului, cum
sunt tipul fontului folosit, mrimea i culoarea textului.
- Mrimea textului poate fi modificat cu elementul FONT i atributul
SIZE. Atributul SIZE poate lua valorile numerice de la 1 la 7 i pe
lng acestea poate folosi, ca valoare relativ, semnele "+" sau "-".
Textul normal (dac nu este specificat acest atribut) are valoarea 3.
11
Exemplu :
<font
size="+2">Dou mrimi mai mare</font>
Tipul fontului poate fi modificat cu elementul FONT i atributul FACE.
Exemplu :
<font
face="Arial Black">Acesta este tipul de font Arial Black</font>
- Culoarea
textului poate fi modificat cu elementul FONT i atributul COLOR.
Exemplu :
<font color="#00dd00"> Acest text are culoarea verde </font>
2. Bold, Italic, Underline i alte elemente

Elemente des folosite pentru formatul textului sunt:
- Bold (ngroat) <b> ... </b>
- Italic (nclinat) <i> ... </i>
- Underline (subliniat) <u> ... </u>
Exemple:
<b> Bold </b>
<i> Italic </i>
<u> Underline </u>
Alte elemente folosite pentru formatul textului sunt:
- <pre> Performated </pre> - Textul ncadrat de elementul PRE este
prezentat ntr-un singur font, oricare ar fi atributul FACE. Spaiile mai lungi
i liniile necesare sunt prezentate aa cum sunt scrise n NotePad, ne mai
fiind nevoie de alte elemente adiionale, cum ar fi <br> pentru o nou linie
i pentru mai mult spaiu ntre cuvinte.
- <em> Accentuare (Emphasis) </em> - Browser-ul de obicei arat acest
element ca italic.
- <strong> Strong </strong> - Browser-ul de obicei arat acest element ca
bold.
- <tt> Teletype </tt> - Ca i PRE, browser-ul prezint acesta ntr-un singur
tip de font, indiferent de fontul ales cu atributul FACE, n interiorul
elementului FONT
- <cite> Citaie </cite> - Reprezint o citaie din document.
Mai jos putei vedea cteva exemple de coduri i modul lor de afiare n browser.
<html>
<head>
<title>titlu documentului</title>
</head>
12
<body>
<p><font size="+1">O singur mrire</font>- normal <font size="-1">O singur micorare</font><br>
<b>Bold</b>- <i> Italic </i> - <u> Subliniat </u> <font color="#ff0000"> Colorat </font><br>
<em>Accentuat</em> - <strong> Strong </strong> <tt>Tele type</tt><br>
<cite> Citatie </cite></p>
</body>
</html>
- n browser va fi afiat aa:
O singur mrire- normal - O singur micorare
Bold - Italic - Subliniat - Colorat
Accentut - Strong - Tele type
Citaie
3. Alinierea
Cteva elemente pot avea atributul (ALIGN) pentru aliniere, cum ar fi
Titlurile <Hx> , Paragraful <p></p> i Linia orizontal <hr> . Cele trei valori
ale atributului ALIGN sunt: LEFT, RIGHT si CENTER.
Aliniamentul celor mai multe elemente se face cu ajutorul altor elemente:
- <div align="valoare"> ... </div> Poate conine cele mai multe elemente. Tot
ce este poziionat cu elementul DIV poate fi aliniat oriunde-n pagin, indiferent
dac n acel loc se afl i altceva (Imagine, Text, ).
- <center> ... </center> Va centra elementele
4. Alte etichete HTML pentru formatul textului

- <strike> Text tiat </strike>
- <big> Prezint textul ntr-un font mare </big>
- <small> Prezint textul ntr-un font mic </small>
- <sub> Afieaz textul n poziia subscript </sub>
- <sup> Aeaz textul n poziia superscript </sup>
n continuare putei vedea un exemplu cu aceste coduri de mai sus i felul cum
sunt afiate de browser.
<html>
<head>
13
</head>
<body>
<p>
<strike> Text tiat </strike><br>
<big> Prezint textul ntr-un font mare </big><br>
<small> Prezint textul ntr-un font mic </small><br>
<sub> Aeaz textul n poziia subscript </sub> normal
<sup> Aeaz textul n poziia superscript </sup><br>
</p>
</body>
</html>
Text tiat
Prezint textul ntr-un font mare
Prezint textul ntr-un font mic
Aeaz textul n poziia superscript
Aeaz textul n poziia subscript normal
- Urmtoarele elemente pentru format sunt folosite mai rar i sunt pentru
documente cu aplicaii tehnice
- <dfn> Definete exemplu de termen nchis </dfn>
-<code> Folosit pentru extragerea unui cod de program </code>
- <samp> Folosit pentru simple producii de programe, scripturi , etc. </samp>
- <kbd> Folosit pentru text care va fi scris de utilizator </kbd>
- <var> Folosit pentru variabile sau argumente de comenzi </var>
n continuare putei vedea un exemplu cu aceste coduri de mai sus si felul cum
sunt afiate de browser.
<html>
<head>
</head>
<body>
<p>
<dfn> Definite exemplu de termen nchis </dfn><br>
<code> Folosit pentru extragerea unui cod de program </code><br>
<samp> Folosit pentru simple producii de programe, scripturi , etc.
</samp><br>
<kbd> Folosit pentru text care va fi scris de utilizator </kbd><br>
14
<var> Folosit pentru variabile sau argumente de comenzi </var><br>

</p>
</body>
</html>
Definite exemplu de termen nchis
Folosit pentru extragerea unui cod de program
Folosit pentru simple producii de programe, scripturi , etc.
Folosit pentru text care va fi scris de utilizator
Folosit pentru variabile sau argumente de comenzi
- Alte elemente
- <q> ... </q> - Folosit pentru citate scurte.
- <blockquote> ... </blockquote> - Folosit pentru ncadrarea de citate mai lungi,
creeaz spaiu pentru text. Pentru a crea mai mult spaiu putei aduga de mai
multe ori acest element.
- <address> ... </address> - Cu acest element se specifica informaii cum ar fi
autorul documentului si detalii pentru contact.
n continuare putei vedea un exemplu cu aceste coduri de mai sus si felul
cum sunt afiate de browser.
<html>
<head>
</head>
<body>
<p>
<q>Daca vrei i crezi, orice este posibil.</q>
<blockquote>
Bucuriile nemprtite pot aduce tristee iar suferina mprtit poate s aduc
bucurie. <br>
Aceasta este prima zi din restul vieii tale.
</blockquote>
<center>
<address>180 Attwell Dr. Suite 130 <br> Toronto, ON <br> M9W
6A9</address>
</center>
</p>
</body>
</html>
15

Dac vrei si crezi, orice este posibil.
Bucuriile nemprtite pot aduce tristee iar suferina mprtit poate s aduc
bucurie.
Aceasta este prima zi din restul vieii tale.
180 Attwell Dr. Suite 130
Toronto, ON
M9W 6A9
Lecia 5 - Marcatori i numerotare
HTML conine cteva tag-uri utile pentru aezarea coninutului n

pagin. Prin acestea textul este mai uor de citit i evideniat.
1. Elementele pentru marcatori i numerotare

Un element des folosit n formarea listelor (neordonate) este <ul>.
- <ul> este elementul de nceput i dup scrierea listei se ncheie cu
</ul>.
- Majoritatea elementelor pentru marcatori i numerotare sunt compuse
din unu sau mai multe elemente <li> ... </li> (list element). Fr
atributul "type" specificat n "<ul>" acestea prezint un marcaj ca un
bullet.
Mai jos putei vedea exemplu.
<html>
<head>
</head>
<body>
<ul>
<li>List item 1 ...</li>
16

</ul>
</body>
</html>
- n pagina web apare aa:
List item 1 ...
List item 2 ...
List item 3 ...
- Sunt 3 tipuri de marcaje: disc, circle (cerc) i square (ptrat)

- Tipul de marcaj care se dorete folosit se introduce prin atributul type n
eticheta <ul>
- Exemplu:
<html>
<head>
</head>
<body>
<ul type="square">
</ul>
</body>
</html>
List item 1 ...
List item 2 ...
List item 3 ...
Un alt element folosit pentru formarea listelor (ordonate) este <ol>. - <ol> ...
</ol> este un element de numerotare. Elementele din list sunt numerotate
automat.
- mpreun cu <ol> se folosete <li> ... </li>
Iat un exemplu:
17
<html>
<head>
</head>
<body>
<ol>
</ol>
</body>
</html>
1. List item 1 ...
2. List item 2 ...
3. List item 3 ...
Sunt mai multe tipuri de numerotare care pot fi folosite. Acestea sunt
controlate de atributul "type care este adugat n elementul <ol>, le putei vedea
mai jos:
- type="1" - stil: 1, 2, 3, ...
- type="a" - stil: a, b, c, ...
- type="i" - stil: i, ii, iii, ...
- type="I" - stil: I, II, III, ...
De asemenea se poate specifica numrul de nceput al numerotrii printr-o
valoare data atributului start.
Exemplu:
<html>
<head>
</head>
<body>
<ol type="a">
</ol>
- Alta list:
<ol type="I" start="3">
18

</ol>
</body>
</html>
a. List item 1 ...
b. List item 2 ...
c. List item 3 ...
- Alt list:
III.
IV.
V.
List item 1 ...

List item 2 ...
List item 3 ...
2. Alte elemente pentru aezarea textului n pagin

Alte elemente pentru aezarea textului sunt: tag-ul <dl>, care
cuprinde n el elementele <dt> i <dd>
- <dl> ... </dl> este folosit (mpreun cu "dt" si "dd") pentru
definirea i ncadrarea unei liste de definiii.
- <dt> ... </dt> Definete elementul din list. Fiecare tip de
astfel de element trebuie precedat de unul sau mai multe elemente <dd>
...</dd>, folosite pentru descrierea elementului definit.
Aceste elemente ajut pentru a da un aspect ordonat i plcut
textului i a putea face o separare mai bun a frazelor.
n urmtorul exemplu putei vedea cum se folosesc aceste
elemente :
<html>
<head>
</head>
<body>
<dl>
<dt>HTML</dt>
<dd> - Hyper Text Markup Language</dd>
<dd> - Limbaj pentru pagini web</dd>
<dt>Dog</dt>
19
<dd>dog = cine</dd>
<dd>animal de cas</dd>
<dl>
</body>
</html>
HTML
- Hyper Text Markup Language
- Limbaj pentru pagini web
Dog
dog = cine
animal de cas
Pentru o eficiena mai bun se pot combina elementele de marcaj i
numerotare, introducnd elementele <ul> i <ol> imbricate (unele in celelalte)
mpreun cu elementele <li>
Exemplu:
<html>
<head>
</head>
<body>
<ul type="square">
<li> List item 1 ... </li>
<ol type="a" start="3">
<li> Alt List item ... </li>
<li> Alt List item ... </li>
</ol>
</ul>
</body>
</html>
List item 1 ...
List item 2 ...
c. Alt List item ...
d. Alt List item ...
List item 5 ...
20
Lecia 6 - Adugare Imagini

HTML conine i elemente pentru adugarea de imagini n pagina web.
1. Formatul imaginilor care pot fi folosite

Cele mai folosite formate pentru imaginile adugate ntr-o pagin
HTML sunt GIF i JPEG (JPG ; JPE), avantajul acestora este ca
imaginile care au aceste extensii au o mrime mic (n bytes), avnd
maximum 256 de culori. Alte tipuri de formate (folosite mai rar) sunt:
PNG, BMP, TIFF, PCX
2. Adugarea unei imagini ntr-o pagin web
Pentru a introduce o imagine ntr-un format HTML se folosete
elementul <img> ... </img> mpreun cu urmtoarele atribute :
- src - Valoarea acestui atribut determin locaia fiierului care conine
imaginea.
- alt - La acest atribut se scrie textul care va aprea cnd utilizatorul va
poziiona, n browser, mouse-ul peste imagine.
- align - Acest atribut permite aezarea imagini n locuri diferite pe pagin.
Pot fi folosite urmtoarele opiuni:
Bottom , Middle , Top , Left , Right , TextTop , ABSMiddle ,
Baseline , ABSBottom
- width - Valoarea acestui atribut reprezint lungimea imaginii, n pixeli.
Dac nu este scris imaginea va fi prezentat cu lungimea original
- hight - Valoarea acestui atribut reprezint nlimea (limea) imaginii, n
pixeli. Dac nu este scris imaginea va fi prezentat cu nlimea original
- border - Prin adugarea acestui atribut imaginea va aprea nconjurat de
un chenar, valoarea acestui atribut reprezint grosimea chenarului, n pixeli
- hspace - Acest atribut este pentru spaiu orizontal pe ambele pri ale
imaginii, specificat n pixeli. De exemplu o valoare de 5 va pune un spaiu
invizibil, de 5 pixeli, n prile orizontale ale imaginii
- vspace - Acest atribut este pentru spaiu vertical pe ambele pri ale
imaginii, specificat n pixeli. De exemplu o valoare de 5 va pune un spaiu
invizibil, de 5 pixel, n prile verticale ale imaginii
21
n exemplu de mai jos putei vedea modul de introducere a unei imagini pe

o pagina web i cum pot fi folosite atributele :
<html>
<head>
</head>
<body>
<ul>
<img src="imagine.jpg" alt="putei aduga orice text" align="top" width="100"
high="120" border="4" hspace="10" vspace="7"></img>
</body>
</html>
- n pagina web va apare:
ncercai singuri mai multe exemple, folosind i alte atribute i valori

prezentate mai sus.
Lecia 7 - Crearea de link-uri
Link-urile (links) sunt elemente HTML cu ajutorul crora putem

deschide alte pagini, sari de la un document la altul sau la alt site. Sunt
foarte importante n crearea de pagini web.
Forma general pentru crearea unui link este urmtoarea:
<a href="url" title="Titlu link">Nume</a>
- a este elementul specific pentru crearea link-urilor
- href este atributul care indica adresa link-ului
- url este adresa link-ului. De exemplu (http://www.marplo.net)
- title este atributul prin care se d un titlu link-ului (un text ascuns, care apare
numai cnd este poziionat mouse-ul deasupra link-ului)
22
- Titlu link este textul ascuns care apare cnd este poziionat mouse-ul deasupra
link-ului.
- Nume este textul care va aprea n browser i pe care trebuie dat click cu
mouse-ul. n loc de acest text se poate folosi i o imagine, astfel "Nume" va fi
nlocuit cu <img src="nume_imagine.extensie">
Cnd documentul este alctuit din mai multe cadre se folosete i atributul
target, vezi Lecia 10.
Culoarea link-urilor poate fi schimbat de urmtoarele atribute, care
trebuie scrise n interiorul elementului <BODY>
link="#0000ff
reprezint
culoarea
link-ului
n
browser
vlink="#00ffff - reprezint culoarea link-ului cnd pagina respectiva a fost /
este vizitat
alink="#ff0000 - reprezint culoarea link-ului cnd acesta este activat
Exemplu:
<body
bgcolor="#00ffff"
link="#000000"
vlink="#ff0000"
alink="#00ff00">
Link-urile sunt de dou feluri:
1. Link-uri externe - (sunt cele mai utilizate), care sunt i ele de dou feluri:
a) Link-uri externe ctre pagini ale aceluiai site. Pentru acestea URL-ul nu
trebuie s fie de forma "http://www.nume.com", se folosete doar numele i
extensia documentului la care se face saltul.
De exemplu:
- dac documentul int se afla n acelai director cu fiierul n care se
scrie link-ul, codul va fi scris aa:
<a href="nume_fisier.extensie" title="Titlu link">Nume</a>
- daca documentul int se afl ntr-un director anterior celui n care se
afla fiierul n care se scrie link-ul, codul va fi scris aa:
<a href="../nume_fisier.extensie" title="Titlu link">Nume</a>
- dac documentul int se afl ntr-un director ncadrat n cel care se
afla fiierul n care se scrie link-ul, codul va fi scris aa:
<a href="director/nume_fisier.extensie" title="Titlu
link">Nume</a>
b) Link-uri externe ctre alte site-uri. Petru acestea codul HTML se va scrie,
de exemplu, aa:
<a href="http://nume_site/pagina" title="Titlu link">Nume</a>
2. Link-uri interne - sunt link-uri ctre alte texte din aceeai pagin. Se folosesc
cnd pagina respectiv este lung i e nevoie s se sar spre anumite texte din
pagin.
- Pentru creare de link-uri interne trebuie urmai urmtorii pai:
23
1. Se scrie urmtorul cod la textul int, care marcheaz locaia unde se

va face saltul i se afl n aceeai pagin cu linkul.
<a name="cuvnt">Textul int</a>
- atributul "name" indic inta pentru link, e un fel de semn care
indic locaia
- "cuvnt" poate fi orice cuvnt, trebuie sa fie unic pentru fiecare
link
- "Textul int" este textul unde se face saltul
2. n locul unde vrem s fie link-ul (acolo unde o s dam click pentru a
face saltul ctre textul ales), se scrie urmtorul cod:
<a href="#cuvnt">Nume</a>
- aici "cuvnt" este acelai text scris la pasul 1
Link-urile interne i externe pot fi combinate. Astfel putem face saltul ctre
un anumit text aflat ntr-o alt pagin. Dup ce n pagin respectiv se scrie codul
de la pasul 1, la textul ales pentru int link-ului, iar n pagina n care va fi link-ul
se scrie:
<a href="adresa_pagina#cuvnt">Nume</a>
Lecia 8 - Hri de imagini
Hrile de imagini sunt pari din aceeai imagine care este "mprit" n
mai multe zone, apoi n funcie de zona pe care se execut click, browserul
afieaz o alt pagin.
De exemplu, pe un site dedicat turismului am putea avea pe pagina
principal o imagine care reprezint harta trii (n care definim zonele dup
conturul judeelor); n cazul unui click pe zona Braov se ncarc o pagin care
descrie diverse obiective turistice din judeul Braov, iar un click pe o alt zon
de jude ar duce la alta pagin care descrie obiectivele turistice din acel jude.
O hart de imagini ar putea fi folosit i pentru navigarea n cadrul unui site: dac
avem mai multe butoane de navigare grupate, se poate folosi o imagine care
reprezint toate butoanele - mai multe imagini se ncrc mai ncet dect o
imagine cu dimensiunea egal cu suma celorlalte (kb) deoarece comunicarea cu
serverul (cnd se cere imaginea) se face o singur data.
Pn aici am prezentat numai avantaje; dezavantajul major este ca un
vizitator care are browserul setat s nu ncarce imagini pentru a naviga mai
repede nu va vedea imaginea i nu va nelege mai nimic (putem totui folosi
24
marcajul "alt" de specificare a textului alternativ pentru imagini). Totui acest

lucru
este
foarte
rar.
- Pentru formarea unei hri de imagini, n interiorul tag-ului "<img>" se adaug
atributul "usemap" a crui valoare este numele hrii, apoi se ncepe formarea
hrii prin elementul <map name="nume_hart"> </map> (unde pt. "name" se
folosete acelai cuvnt preluat de "usemap") i n interiorul acestuia se adug
elemente <area atribute> care formeaz zonele hrii imaginii (prin valorile
atributelor), numrul de elemente "AREA" reprezint numrul de suprafee (cu
link-uri specifice) n care este "mprit" imaginea.
n urmtorul exemplu putei vedea forma general a formrii unei "hri de
imagini (cu 2 cadre), URL poate fi orice adres de site sau pagin a site-ului
curent:
<img src="poz. jpg" usemap="#map1">
<map name="map1">
<area shape="rect" coords="9, 120, 56, 149" href="url">
<area shape="rect" coords="100, 200, 156, 249" href="url">
</map>
n tabelul de mai jos putei vedea atributele care se folosesc i descrierea
acestora:
Instruciune
Atribute
Descriere
marcaj de includere a imaginilor
ismap
specific faptul c este o hart de

imagine pe server (se folosete mai rar;
de obicei folosim hri de imagine la
client)
usemap="nume_harta"
specific harta de imagine la client
lowscr = "url"
imaginea de rezoluie sczut care se

ncarc prima (doar pentru Netscape)
specific regiunile unei hri de

imagine la client
<img atribute >
<map atribute >

< / map >
<area atribute >
numele hrii de imagine

name = "nume_harta" (corespunztor atributului USEMAP al
marcajului <IMG>)
-
definete o regiune a unei hri de

imagine
shape = "forma"
forma regiunii: rect sau rectangle
25
(dreptunghi), circle sau circ (cerc),

point (punct), poly sau polygon
(poligon)
coordonatele unei regiuni (n pixeli); se
calculeaz n funcie de colul din
stnga sus al imaginii (care are
coordonatele (0, 0), adic x = 0, y = 0);
variaz n funcie de SHAPE = forma
regiunii:
- pentru rect (dreptunghi) se dau
coords = "coordonate" coordonatele celor 4 coluri sau a celor
din stg. sus i dr. jos ale regiunii
- pentru circ (cerc) se dau coordonatele
centrului cercului i raza
- pentru point (punct) se dau
coordonatele punctului
- pentru poly (poligon) se dau
coordonatele colurilor poligonului
href = "=url="
URL - ul asociat regiunii specificate

din cadrul imaginii; n cazul unui clic
pe acea regiune se ncarc pagina
specificat prin URL
alt = "text"
textul asociat regiunii specificate din

cadrul imaginii; apare plasnd mouseul deasupra regiunii respective sau
celor cu browserul setat s nu ncarce
imagini
Lecia 9 - Lucru cu tabele

Tabelele sunt elemente foarte utile pentru aezarea i prezentarea
coninutului intr-o pagin web.
1. Crearea de tabele
26
Pentru a crea tabele n paginile web se folosete elementul <table> ...

</table> , acesta are i ncadreaz alte patru sub-elemente.
- Linia Tabelului <tr> ... </tr>
- Titlul Tabelului <th> ... </th>
- Coloanele tabelului (datele) <dt> ... </dt>
- Sub-titlu tabelului <caption> ... </caption>
Linia tabelului de obicei conine elementul pentru titlurile tabelului i
elementul pentru coloanele tabelului.
n elementele pentru titlurile i coloanele tabelului se poate aduga mai
multe elemente, cum ar fi cele pentru formatul textului, link-uri sau imagini
Mai jos putei vedea un exemplu de cod HTML pentru crearea unui tabel:
<table border="1">
<tr>
<th>titlu 1</th>
<th>titlu 2</th>
</tr>
<tr>
<td>linia 2- coloana 1</td>
</tr>
</tr>
</tr>
</table>
titlu 1
titlu 2
linia 2- coloana 1 linia 2- coloana 2
2. Atributele Tabelului
- bgcolor = definete culoarea tabelului
- width = specific lungimea tabelului (n pixeli sau procente din lungimea
paginii)
27
- border = grosimea liniei (n pixeli) ce definete tabelul i nconjoar

fiecare celul
- cellspacing = spaiu dintre celule (n pixeli)
- cellpading = spaiu dintre linia celulei i coninutul acesteia (n pixeli)
- align = controleaz poziionarea tabelului n pagin, cu urmtoarele
atribute : left, right, sau center
- background = controleaz culoarea de fond a tabelului, care poate fi i o
imagine
- bordercolor = culoarea liniei din jurul tabelului
- bordercolorlight = culoarea luminoas folosit de dou linii din cele
patru care nconjoar tabelul
- bordercolordark = culoarea ntunecat folosit de dou linii din cele
patru care nconjoar tabelul
Sub-titlu
tabelului
- Sub-titlu tabelului "caption" permite specificarea unei linii de text care va
aprea deasupra sau sub tabel, acest lucru este definit de atributul "align" care
poate lua valorile: top (deasupra) bottom (jos)
Exemplu:
<table border="1" celpading="2">
<caption align="bottom">acesta este textul</caption>
<tr>
<th>titlu 1</th>
<th>titlu 2</th>
</tr>
<tr>
</tr>
</table>
titlu 1
titlu 2
acesta este textul
3. Atributele specifice elementelor pentru titlu si coloane
28
- colspan = specific ct de multe coloane ale tabelului aceast celul va nlocui

- rowspan = specifica ct de multe rnduri ale tabelului aceast celul va
nlocui
- align = alinierea datelor celulei pe orizontal (left, right sau center)
- valign = alinierea datelor celulei pe vertical (top, middle sau bottom)
- background = controleaz culoarea de fond a celulei, care poate fi i o
imagine
- bgcolor = definete culoarea celulei (dar nu imagine)
- width = specific lungimea celulei (n pixeli sau procente din lungimea
paginii)
- height = specific nlimea celulei (n pixeli sau procente din nlimea
paginii)
n urmtorul exemplu putei vedea rezultatul folosirii atributelor: "colspan"
"rowspan" si "bgcolor"
<table border="1" celpading="2">
<caption align=bottom>acesta este textul</caption>
<tr>
<th>titlu 1</th>
<th>titlu 2</th>
</tr>
<tr>
<td colspan="2">linia 2- coloana 1</td>
</tr>
<td rowspan="2">linia 3- coloana 1</td>
</tr>
<td bgcolor="#adadff">linia 4- coloana 2 - colorat</td>
</tr>
</table>
titlu 1
titlu 2
linia 2- coloana 1
linia 3- coloana 2
linia 3- coloana 1
linia 4- coloana 2 - colorat
acesta este textul
Exersai singuri i alte exemple de tabele, cu mai multe rnduri i coloane.
29
Lecia 10 - Utilizarea cadrelor
Cadrele, sau frame-uri, sunt folosite pentru mprirea ferestrei browserului astfel nct s fie afiate mai multe pagini n aceeai fereastr de browser.
Un frame (cadru) este o parte din suprafaa ferestrei browserului.
Fiecare frame prezint n interior un document propriu (n general un document
HTML). De exemplu putei crea dou cadre ntr-o fereastr, n primul cadru
putei ncrca un document HTML (ex. doc1.htm) iar n al doilea cadru un alt
document HTML, de la alt adres (ex. doc2.htm)
Dup cum putei vedea n imaginea de mai jos
Pentru crearea de frame-uri se pot folosi urmtoarele etichete HTML:

<frameset> si <frame> sau <iframe>
1. Configurarea cadrelor
Pentru nceput se adug un element <FRAMESET> ...
</FRAMESET> n interiorul documentului HTML, n seciunea HEAD.
<FRAMESET> determin ct din spaiul ferestrei este atribuit fiecrui
cadru, folosind atributele ROWS sau COLS care mpart ecranul in Linii
sau Coloane.
Acesta va conine elemente <FRAME>, cte unul pentru fiecare
divizare a ferestrei din browser.
ROWS
Determin numrul de linii i mrimea cadrelor care vor fi aezate n
linie, ncepnd de sus
Pot fi folosite urmtoarele valori:
- pixeli absolui ; ex : "360,120"
30
- procente din nlimea ecranului ; ex : "75%,25%"

- valori proporionale, folosind (*). Acesta putnd fi combinat cu
procente sau pixeli. Ex : "120,*" sau "30%,*"
COLS
Determina numrul de coloane i mrimea cadrelor care vor fi aezate pe
coloane, ncepnd din stnga
Pot fi folosite urmtoarele valori:
- pixeli absolui ; ex : "380,120"
- procente din lungimea ecranului ; ex : "33%,77%"
- valori proporionale, folosind (*). Acesta putnd fi combinat cu
procente sau pixeli. Ex : "120,*" sau "30%,*"
Alte atribute ale elementului <FRAMESET>
FRAMEBORDER - Stabilete afiarea sau nu a unei borduri n jurul
cadrelor. Posibile valori: 0, 1 sau YES, NO
FRAMESPACING - Acest atribut este specificat n pixeli. Dac
FRAMEBORDER este 0 atunci i acesta trebuie s aib valoarea 0
BORDER - Marginea cadrelor. Valori posibile: 0 sau 1
BORDERCOLOR - Acest atribut permite s alegi culoarea bordurii
Elementul <FRAME>
Acest element definete un singur cadru , este scris n interiorul
elementului <FRAMESET>
Pentru fiecare cadru trebuie scris cte un element <FRAME>
Acesta are urmtoarele atribute:
SRC - Aici trebuie scris adresa i numele paginii folosite pentru cadru
NAME - Aici trebuie scris numele de identificare al cadrului.
MARGINWIDTH - Atribut opional, valoare n pixeli. Determin
spaiul orizontal dintre coninutul cadrului i marginea acestuia
MARGINHEIGHT - Atribut opional, valoare n pixeli. Determin
spaiul vertical dintre coninutul cadrului i marginea acestuia.
SCROLLING - Afieaz un Scroll Bar n cadru. Valori posibile: YES
(permite afiarea Scroll Bar-ului), NO (nu va fi prezentat nici un Scroll
Bar) i AUTO (browser-ul va decide daca este nevoie de Scroll Bar.
Aceasta valoare este cea mai indicat)
NORESIZE - Opional, mpiedic utilizatorul s modifice mrimea
cadrului, prin selectarea marginii acestuia i mutarea n stnga sau
dreapta ori sus sau jos
31
Mai jos putei vedea cum poate fi creata o pagina HTML care s conin
dou cadre, cel din stnga ocupnd 23% din spaiul paginii iar cel din dreapta
77%
<HTML>
<HEAD>
<TITLE> TITLU PAGINII </TITLE>
</HEAD>
<FRAMESET COLS="23%,77%">
<FRAME SRC="doc1.htm" NAME="left" SROLLING="NO">
<FRAME SRC="doc2.htm" NAME="right" SROLLING="YES">
</FRAMESET>
<BODY>
</BODY>
</HTML>
De asemenea se poate crea un design de cadre cu o combinaie de linii i
coloane.
n acest caz, un al doilea element "<FRAMESET>" va fi scris n locul
elementului "<FRAME>" care descrie a doua linie. Al doilea element
<FRAMESET> va divide spaiul rmas n dou coloane. Pentru aceasta, al doilea
element "<FRAMESET>" trebuie urmat de nc dou elemente "<FRAME>"
- Pentru o mai bun nelegere putei studia exemplu de mai jos, care creeaz o
pagin ce conine trei cadre:
<HTML>
<HEAD>
<TITLE> TITLU PAGINII </TITLE>
</HEAD>
<FRAMESET COLS="120,*">
<FRAME SRC="baner.htm">
<FRAMESET COLS="120,*">
<FRAME SRC="Meniu.htm" NAME="meniu">
<FRAME SRC="Continut.htm" NAME="date">
</FRAMESET>
</FRAMESET>
<BODY>
</BODY>
</HTML>
2. Atributul target
32
Cnd sunt create link-uri care sunt folosite pentru a deschide

pagini n cadre, este nevoie de specificarea unui atribut n eticheta de
link "<a>" numit target.
Atributul target folosete ca valoare textul din atributul NAME al
elementului FRAME n care se va deschide noua pagin.
De exemplu, dac avem un link n Meniu.htm care vrem s
deschid pagina Doc3.htm n spaiul n care se afl cellalt cadru, de
exemplu Coninut.htm; codul HTML pentru link va arta astfel n
Meniu.htm:
<a href="Doc3.htm" target="numele cadrului Continut.htm"> Numele
link-ului </a>
- dac nu se specific atributul TARGET , pagina se va deschide n cadrul curent
- atributul TARGET trebuie s aib acelai nume specificat n codul HTML, ca i
atributul NAME din FRAME-ul n care se dorete afiarea paginii.
Special Target:
Sunt 4 nume speciale de TARGET, care nu pot fi asociate cu atributul
NAME. Fiecare are o funcie special.
target="_top"
- acesta va ncrca link-ul n toat fereastra browser-ului, disprnd astfel
cadrele
target="_blank"
- acesta va ncrca link-ul ntr-o nou fereastr de browser, astfel rmnnd
deschis i vechea fereastr.
target="_self"
- acesta va ncrca link-ul n aceeai fereastr de unde a fost acionat
target="_parent"
- cadrul "_parent" este cadrul anterior de la care a fost deschis noul
cadru, dac acesta nu exist atunci link-ul se va deschide n actuala
fereastr de browser.
3. Adugarea cadrelor iframe

Pentru crearea unui cadru cu "<iframe>" putei folosi, ca exemplu,
urmtoarea sintax (aceasta se aduga n seciunea BODY, n locul unde dorii s
apra frame-ul):
<iframe src="url_pagin" width="600" height="200" align="center"
scrolling="yes" frameborder="0" name="nume_frame"> </iframe>
33
- Unde "iframe" este elementul principal care indic adugarea unui frame n
pagin.
- "url_pagin" e adresa paginii care va fi ncrcat n iframe, "width" i "height"
reprezint lungimea respectiv nlimea cadrului (exprimat n procente sau
pixeli), "scrolling" reprezint permisiunea de derulare a paginii din cadru (yes
sau no), "frameborder" specific daca va fi sau nu afiat o margine (bordur)
pentru cadru (1=da, 0=nu), iar "nume_frame" este numele cadrului (necesar
pentru atributul "TARGET" n link-uri sau cnd frame-ul este folosit de
JavaScript).
Lecia 11 - Crearea formularelor
De cele mai multe ori formularele HTML sunt create pentru a fi

folosite mpreun cu alte programe i scripturi web, cum sunt PHP,
JavaScript i altele.
1. Tag-ul FORM
Pentru a crea un formular in HTTML se folosete elementul <form> ...
</form>, n cadrul acestuia se vor aduga celelalte elemente specifice.
Elementul <form> ... </form> nu conine atribute pentru format, folosete
ns urmtoarele atribute:
action - aici se scrie adresa URL a unui script de pe server (de obicei PHP
sau CGI), program care trebuie s accepte datele din FORM , le proceseaz
i trimite napoi rspunsul la browser.
method - aici putem scrie get , sau post. Aceste valori specific ce metod
HTTP va fi folosit pentru a trimite coninutul formularului la server.
enctye - determin mecanismul folosit pentru a codifica coninutul transmis
din formular.
name - Este numele formularului, folosit de scripturi VB (Visual Basic) sau
JavaSript.
target - Este inta cadrului (frame) unde pagina va fi vizualizat, dup
transmiterea datelor din form.
34
2. Elementele de formular
n continuare sunt prezentate restul elementelor de formular care sunt
folosite pentru a crea diferite cmpuri, casete, butoane n pagin web, necesare
pentru a aduna datele care vor fi trimise la aplicaie pe server.
Cele mai multe se creeaz prin atributul type al elementului <input> ... </input>
Proprietile elementului <input> ... </input>
type - tipul de FORM folosit (caseta text, buton si altele ...)
name - numele elementului respectiv de formular, folosit de scripturile la
care sunt trimise datele
value - datele (valoarea) asociate acelui element de formular i care sunt
trimise, mpreun cu numele, ctre scripturi (PHP, CGI, JavaScript)
size - specific numrul de caractere care dau lungimea zonei de text
maxlength - numrul maxim de caractere acceptate
checked - specific daca un buton sau alt form va fi iniial selectat
(bifat)
Casete de text
- este folosit pentru a crea n pagin un cmp pentru text (cu o singur linie).
- Codul este <input type="text"></input>
n browser va aprea:
- Acest element folosete urmtoarele atribute:
type text
name - numele csuei de text, folosit de scriptul la care sunt trimise
datele
value - va reprezenta propriul context ca valoare aleas. Un ir de text
care apare n csua de text
size - specific numrul de caractere care dau lungimea csuei de text
(default 20)
maxlength - numrul maxim de caractere acceptate sa fie adugate de
utilizator
Cmp textarea
- "textarea" este un element ce creeaz un cmp n pagin, n care
utilizatorul poate aduga mai multe linii de text.
- Codul este <textarea;></textarea>
n browser va aprea:
35

name - numele cmpului de text, folosit de scriptul la care sunt trimise
datele
rows - numrul de linii a zonei de text
cols - numrul de coloane a zonei de text
wrap - standard este OFF. Dar poate avea valorile : "VIRTUAL" sau
"PHYSICAL", astfel ca textul wraps n browser s fie prezentat exact
cum este scris de utilizator
Casete pentru parole
- "password" este folosit pentru a permite adugarea de parole. Caracterele
adugate n aceasta caset nu sunt afiate cu valoarea lor real, pentru a nu
se vedea parola scris.
- Codul este <input type="password"></input>
n browser va aprea:
type password
name - numele csuei pentru parole, folosit de scriptul la care sunt
trimise datele
value - de obicei nu este adugat. Dac este scris, va reprezenta parola
default din acea caseta.
size - specific numrul de caractere care dau lungimea csuei pt.
adugarea parolei (default 20)
maxlength - numrul maxim de caractere acceptate sa fie adugate de
utilizator
Casete de formular ascunse
- "hidden" este folosit pentru a aduga n formular date care s nu fie vizibile
n browser i care sunt trimise la scripturi mpreun cu celelalte date din
formular.
- Codul este <input type="hidden"></input>
type hidden
name - numele csuei ascunse, folosit de scriptul la care sunt trimise
datele
value - valoarea care se dorete s fie transmis prin acea caseta
ascuns
Check box
- este folosit pentru adugarea mai multor opiuni pe care utilizatorul le
poate alege (oricte din ele) prin bifarea lor
36
- Codul este <input type="checkbox"></input>

n browser va aprea:
type checkbox
name - numele csuei checkbox, folosit de scriptul la care sunt trimise
datele
value - valoarea casetei checkbox respective, care poate fi selectat
(bifat)
checked - dac este adugat acest atribut, caseta checkbox respectiv
este selectat (bifat)
Radio button
- este folosit pentru adugarea mai multor opiuni dintre care utilizatorul
poate alege una singur
- Codul este <input type="radio"></input>
n browser va aprea:
type radio
name - numele csuei radio, folosit de scriptul la care sunt trimise
datele
value - valoarea casetei radio respective, care poate fi selectat (bifat)
checked - dac este adugat acest atribut, caseta radio respectiv este
selectat (bifat)
Casete pentru upload
- "file upload" este folosit pentru a permite utilizatorului s ncarce alte
documente pe serverul web. Aceasta caseta este nsoit de un buton
"Browse" prin care se alege documentul care va fi transferat pe server.
(upload-ul se face tot prin intermediul unui script (PHP, CGI)
- Codul este <input type="file"></input>
n browser va aprea:
type file
name - numele csuei upload, folosit de scriptul la care sunt trimise
datele
size - specific numrul de caractere care dau lungimea csuei upload
Buton simplu
- acesta este folosit cu JavaScript sau VBScript pentru a efectua o aciune
cnd este apsat
37
- Codul este <input type="button" value="Buton"></input>

n browser va aprea:
type button
name - numele butonului, necesar pentru a fi folosit de script
value - textul care apare pe buton
Buton Submit
- acest element face ca prin apsarea lui browser-ul s trimit numele i
valoarea tuturor celorlalte elemente din formular la scriptul de pe server
- Codul este <input type="submit" value="Trimite"></input>
Trimite
n browser va aprea:
type submit
name - numele butonului, poate fi folosit de scriptul la care se trimit
datele
Imagine pentru buton Submit
- permite aplicarea unei imagine n locul butonului Submit standard
- Codul este <input type="image" src="locaie_imagine"></input>
type image
name - numele butonului, poate fi folosit de scriptul la care se trimit
datele
src - locaia imaginii folosite
Buton Reset
- permite utilizatorului s tearg toate datele pe care le-a scris n celelalte
elemente din formular
- Codul este <input type="reset" value="Sterge"></input>
Sterge
n browser va aprea:
type reset
Elemente select
- pentru acest element se folosete tag-ul "<select></select>", care formeaz
o list, un meniu, cu date ce pot fi selectate.
38
- Atributele elementului "<select>" sunt:

name - numele acestui element, necesar pentru a fi folosit de scriptul la
care sunt trimise datele
size - seteaz nlimea elementului Select, care reprezint i numrul
de opiuni din list care vor fi vizibile iniial
multiple - prezena acestui atribut specific faptul c utilizatorul poate
selecta mai multe opiuni
- "<select></select>" este folosit mpreun cu elemente "<option>
</option>" care reprezint lista elementelor ce sunt adugate i afiate n
lista de selectare
- <option> </option> folosete dou atribute:
selected - cnd acesta este adugat, opiunea respectiv este selectat
cnd pagina web este iniial ncrcat. Cnd sunt adugate mai multe
opiuni, este indicat folosirea acestui atribut doar cu una singur.
value - specific valoarea variabilei numita n opiunea respectiv
(necesar pt. scriptul care va primi datele).
- sunt dou tipuri de elemente Select, unde diferena o face folosirea
atributului SIZE
- Cele dou tipuri de elemente Select sunt
Drop Down List (Lista de derulare)
- Codul este:
<select name="select"><option>Opiune 1</option>
<option>Opiune 2</option></select>
- unde "name" este atributul care definete numele acestui tag SELECT,
iar "<option>" mpreun cu "Opiune 1" (i 2) reprezint elementele din
lista de selectare
n browser va aprea:
List Box
Codul
este:
<select name="select" size="4"><option>Opiune 1</option>
<option>Opiune 2</option></select>
- unde "name" este atributul care definete numele acestui tag SELECT,
atributul "size" determin nlimea elementului select care determin i
numrul de opiuni vizibile iniial, iar "<option>" mpreun cu "Opiune
1" (i 2) reprezint elementele din lista de selectare
n browser va aprea:
- Toate aceste elemente trebuie ncadrate n tag-ul "<form> ... </form>"!
39
Lecia 12 - Elemente speciale meta, embed, marquee
Codul HTML conine i anumite elemente speciale, unele folosite

pentru optimizarea paginii n vederea unei ct mai bune indexri n
motoarele de cutare sau altele pentru adugarea de aplicaii audio i
video ori alte elemente n pagin.
1. Elemente pentru optimizarea indexrii paginii

Aceste elemente de optimizare se aduga n seciunea HEAD a
documentului HTML.
Cel mai important este tag-ul <title></title>
Alte elemente importante pentru motoarele de cutare sunt cele META,
(numite i "meta tag-uri), acestea au 2 atribute: name (care determin tipul meta
tag-ului) i content (care determin coninutul meta tag-ului).
n continuare sunt prezentate exemple de meta tag-uri care sunt indicate sa
fie adugate n fiecare pagin HTML:
<meta content="text/html; charset=UTF-8" http-equiv=Content-Type>
- indic browserului c este un fiier HTML
- charset stabilete tipul de caractere (n general se folosete ISO-8859-1 sau
UTF-8), dar exist i altele
<meta name="description" content="O fraz care descrie pe scurt
coninutul paginii">
- n cazul unei catari dup cuvinte-cheie, motorul de cutare ne d o list de
pagini; pentru fiecare pagin (site) din list apare titlul ei (dat cu marcajul
TITLE) urmat de o fraz (cea de la name="description" content="o fraz
care descrie ..."); dac nu avem n marcajul META acea fraz, motorul va
indexa dup prima fraza din pagin; tot ea va fi data la o eventual cutare.
- textul adugat cu acest tag pentru descriere are prioritate naintea frazelor
din coninut. (folosii maxim 40, 50 caractere)
<meta name="keywords" content="list, de cuvinte, separate, prin,
virgul">
- motoarele de cutare in cont de cuvintele din meta "keywords" n
momentul indexrii site-ului pentru atunci cnd sunt afiate rezultate de
cutri. (folosii maxim 15-20 cuvinte)
40
<meta name="author" content="numele dvs., e-mail, etc">

- acesta nu este neaprat necesar, dar nu strica sa-l folosii. Arat autorul
documentului.
Recomandare: Cuvintele din tag-ul <title> ... </title> este bine s se
regseasc i n meta tag-urile "keywords", "description" ct i n titlurile din
coninutul paginii.
Un alt meta tag care este cteodat necesar, dar nu are legtur cu
motoarele de cutare, este "Refresh", acesta are urmtoarea form:
<meta http-equiv="Refresh"
content="4;url=http://www.nume_site/pagina">
- acesta determin browser-ul s ncarce o nou pagin, cea care este
adugata la url-ul din acest tag (aici http://www.nume_site/pagina), dup un
anumit numr de secunde (aici 4). Practic, face un redirect.
2. Adugarea de sunet la o pagin HTML

Pentru a aduga sunet ntr-o pagin web, putei folosi elementele <embed>
sau <bgsound>:
1. <bgsound></bgsound> - introduce un background (fundal) audio n
pagin, are urmtoarele atribute:
src - Definete locaia fiierului audio folosit (midi .au sau wav)
loop - definete de cte ori se va repeta sunetul
delay - definete timpul dintre repetri
title - Textul care va descrie sunetul
Exemplu:
<bgsound src="sunet.midi" loop="3" title="titlul melodiei" derlay="5">
2. <embed></embed> - afieaz o consol pentru sunet, are urmtoarele
atribute:
src - Definete locaia fiierului audio folosit (midi .au sau wav)
controls - ofer posibilitatea alegerii mai multor controale care includ:
console, console mici, butoane de play i altele
autostart - cnd este TRUE sunetul ncepe n timp ce sunetul este descrcat
de browser
hidden - cnd este TRUE va ascunde controalele, standard este FALSE
loop - definete de cate ori se va repeta sunetul
volume - seteaz volumul sunetului (sonorul)
height - nlimea n pixeli a consolei
41
width - lungimea n pixeli a consolei

Exemplu:
<embed src="sunet.midi" width="145"height="60" autostart="truie"
volume"100" controls="console" hidden="false">
- Tag-ul "<embed>" poate fi folosit si pentru afiarea de imagini video, care au
extensiile ".movs", ".mpeg" sau ".avi", recomandat este ".movs". Se adug
similar ca i sunetul, la "src" scriti calea ctre fiierul video. Diferena e c nu
trebuie folosit atributul "hidden" iar pentru "width" i "height" dimensiunile nu
trebuie s fie mai mici dect dimensiunile n care este salvat fiierul video.
- Totui, afiarea de imagini video necesit mai mult timp deoarece fiierele
video au dimensiuni destul de mari.
- "<embed>" se folosete i pentru adugarea de imagini flash (cu extensia
".swf"), pentru aceasta este ncadrat n alt element, <object> </object>
- Iat un exemplu de cod prin care putei aduga imagini flash n pagina web:
<object width="580" height="400">
<param name="movie" value="fiier.swf">
<embed src="fiier.swf" width="580" height="400">
</embed>
</object>
Unde "width" si "height" sunt dimensiunile cadrului n care este afiat
imaginea flash, iar la atributele "value" i "src" se scrie calea ctre fiierul ".swf"
(trebuie scris aceeai cale la ambele atribute).
- Afiarea n pagin a elementelor cu EMBED necesit folosirea unui plug-in,
care de cele mai multe ori, dac acesta nu este deja instalat, este cerut
automat ncrcarea lui de ctre browser.
3. Elemente de animaie text

HTML are un tag special, <marquee> </marquee>, prin care putei crea
un efect de micare a unui text (sau imagine) care este ncadrat de acest element.
Are urmtoarele atribute:
loop - definete de cte ori se va mica textul
height - nlimea n pixeli a zonei n care se mic textul
width - lungimea n pixeli a zonei in care se mic textul
bgcolor - culoarea zonei n care se mic textul
direction - direcia de micare (left, right, up, down) - (stnga, dreapta, sus,
jos)
42
behavior - definete cum se va mica textul (scroll, slide, alternate)

scrolldelay - seteaz numrul, n milisecunde, ntre refreshuri de micare
Exemplu de micare pe orizontal
<marquee behavior="alternate" bgcolor="#00ffff" direction="right">Marquee
text</marquee>
n pagin va arata aa:
Marquee text
Iat un alt exemplu unde micarea se face pe vertical:
<marquee behavior="alternate" bgcolor="#00ffff" direction="up" width="100"
height="100">Marquee text</marquee>
n pagin va arata aa:
Marquee text
- n loc de text poate fi folosit i o imagine, nlocuind textul (aici "Marquee
text") cu tagul "<img> pentru imagine
Lecia 13 - Stiluri CSS n HTML
Cu HTML 4.0 au aprut specificaiile pentru modele de stiluri,

cunoscute ca Modele de Stiluri n Cascada (Cascading Style Sheets CSS). Acestea ajuta la afiarea grafica i ncadrarea coninutului n
pagin.
Pn la acea dat, forma, culoarea i mrimea textului puteau fi
date cu instruciunea "font" i cu atributele sale: "face", "color",
"size".Modelele de stiluri pot fi aplicate aproape oricrei etichete
HTML, folosind proprietatea i valori specifice codului CSS, unele din
ele sunt prezentate n tabelul de jos al paginii.
Modelele de stiluri pot fi aplicate n mai multe moduri:
43
1. Intern - direct in eticheta HTML

- Pentru adugarea unui STYLE intern la un element se folosete
atributul style urmat de proprieti i valori, folosind urmtoarea
sintax: <element style="proprietate:valoare;
proprietate:valoare;"></element>
- Exemplu:
<h4 style="color:#ff1111;">Exemplu h4</h4>
n pagin va aprea
Exemplu h4
2. n antetul fiierului
- n acest caz se adaug n seciunea HEAD a documentului HTML
urmtoarea sintax <style type="text/css"> ... </style>. Aceasta spune
browser-ului c sunt adugate elemente de stil CSS.
- Aceasta metod este util cnd se dorete folosirea acelorai stiluri pentru
mai multe elemente din pagin astfel sunt scrise o singur dat i nu la
fiecare element.
- Proprietile i valorile de stil CSS se introduc n acest element STYLE,
dup cum putei vedea n exemplul urmtor:
<html>
<head>
<title>titlu</title>
<style type="text/css">
<!-h2 {color:blue; text-decoration:underline;}
-->
</style>
</head>
<body>
</body>
</html>
- Conform acestui cod, toate textele h2 din pagin vor avea culoarea albastr
i vor fi subliniate.
- Se folosete "" pentru browserele care nu recunosc elementul
"<style>" si astfel l ignor.
44
3. Extern
- Aici proprietile i valorile pentru diverse stiluri sunt specificate ntr-un fiier
extern special, de obicei cu extensia "css" (pe care l putem construi cu un editor
de simplu texte gen Notepad).
- Avantajul folosirii fiierelor externe CSS este faptul c aceleai coduri de stil
pot fi folosite de mai multe pagini din site, chiar tot site-ul, fiind scrise o singur
data. n plus ajut la micorarea ca mrime (n bytes) a documentului HTML care
astfel se ncrca mai repede.
- n fiierul extern CSS se scriu direct elementele cu proprietile i valorile
dorite, NU se mai adaug eticheta "style".
Exemplu de model pentru creare unui fiier ".css" :
Se scrie intr-o pagin nou, deschis cu Notepad, urmtoarele, i se
salveaz fiierul cu extensia ".css"
a:link {
color:#0000ff;
text-decoration:none;
font-weight:normal;
font-size:15px;
font-family: Arial;
}
a:visited {
color:#008080;
text-decoration:none;
font-weight:normal;
font-size: 15px;
font-family: Arial;
}
a:active {
color:#b54090;
text-decoration:underline;
}
a:hover {
color:#b54090;
text-decoration:underline;
font-weight:normal;
font-size: 15px;
font-family: Arial;
}
45
p{
font-weight: normal;
font-size: 11pt;
line-height: 12pt;
text-indent: 20px;
font-family: Arial;
}
Pentru a aduga acest stil CSS ntr-o pagin web, adugate n seciunea
HEAD a documentului HTML care va folosi acel fiier cu stiluri, (intre
<head> ... </head>) urmtoarea comand:
<link href="fisier.css" rel="stylesheet" type="text/css">
- unde la "href" se scrie calea i numele fiierului css folosit.
Se poate face chiar ca un anumit stil s poat fi aplicat numai unei singure
etichete HTML, iar altul s poat fi aplicat mai multor etichete HTML de tipuri
diferite. Pentru aceasta se folosete atributul id sau class n interiorul etichetelor
HTML la care vrem s aplicam un anumit stil.
Diferena dintre id i class este faptul c se poate folosi acelai atribut
"class" pentru mai multe elemente HTML, pe cnd acelai "id" se folosete
numai pentru un singur element HTML.
Exemplu pentru "class"
<html>
<head>
<title>Titlul</title>
<!-.cuvnt {
color:#1111fe;
dext-decoration:underline;
}
-->
</style>
</head>
<body>
<h2 class="cuvnt">Text ...</h2>
<h3 class="cuvnt">Alt text ... </h3>
</body>
</html>
- n exemplu de sus, stilul creat poate fi folosit doar de elementele unde vom
aduga comanda class="cuvnt", celelalte elemente ne fiind afectate.
46
Important: selectorul (aici "cuvnt") in STYLE trebuie sa nceap cu

punct (.)
Exemplu pentru "id"
<html>
<head>
<!-#idh {
color:#fe1111;
dext-decoration:overline;
text-align:center;
}
-->
</style>
</head>
<body>
<h2 id="idh">Text ...</h2>
<h2>Alt text ... </h2>
</body>
</html>
- n acest exemplu, stilul creat pentru "idh" va fi folosit doar pentru primul
element "h2" care conine 'id="idh"'
Important: Pentru stilurile selectate de ID, selectorul (aici "idh")
trebuie s nceap cu #.
ncercai singuri aceste exemple pentru a vedea rezultatul
n tabelul de mai jos sunt cteva atribute (sau proprieti) care pot fi modificate
cu STYLE
Atribut
Descriere
Valori
background
imagini sau culori de fundal
URL-ul (imaginii) sau culori date

prin nume sau valoare RGB
Color
culoarea textului
nume sau valoare RGB
font-family
tipul fontului
Numele fontului sau al familiei de

fonturi
47
font-size
dimensiunea fontului
dat n puncte(pt), inch(in),

centimetri(cm), pixeli(px)
font-style
text cursiv
normal, italic
font-weight
grosimea fontului
extra-light, light, demi-light,

medium, demi-bold, bold, extrabold
line-height
distana dintre liniile de baz

ale rndurilor

centimetri(cm), pixeli(px),
procent(%)
margin-left
distana fa de marginea din

stnga a paginii

margin-right
distana fa de marginea din

dreapta a paginii

distana fa de textul
margin-top precedent sau fa de marginea
de sus a paginii

text-align
alinierea textului
left(stnga), center(centru),
right(dreapta), justify
textdecoration
evidenierea textului
none(nimic), underline(subliniat),
italic(cursiv), line-through(tiat)
text-indent
distana primului rnd fa de

marginea din stnga

border-style
tipul chenarului
none, groove, dotted, dashed, solid,

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 13pt nseamn c sunt 13 puncte ntre partea superioar a
literei N sau h i partea inferioar a literei y sau j
- Pentru aplicarea unui stil css asupra unei poriuni dintr-un text, se folosete
eticheta <span> </span>, ca in exemplu urmtor:
O fraz <span class="cls"> cu orice text</span> i caractere.
- n acest exemplu se pot aplica elemente de stil css clasei (.cls) care vor afecta
doar poriunea de text inclus intre tag-ul "<span>".
48
Lecia 14 - DIV i SPAN

Tag-urile <div></div> si <span></span> nu au efecte importante dac
sunt folosite singure.
- Tag-ul DIV creeaz seciuni de blocuri n pagina, a cror form i grafic de
coninut pot fi manipulate pentru fiecare separat. Are doar un singur atribut
HTML, align (pt. aliniere pe orizontal) care poate avea urmtoarele valori: left
(stnga), right (dreapta), center (centru), justify (distana textului fata de
margini egal).
- Tag-ul SPAN creeaz posibilitatea modificrii separate a unei poriunii dintr-un
context, putnd fi folosit si ca o "classa" cu CSS. Singur nu are nici un efect
vizual propriu i nu folosete nici un atribut HTML special.
Chiar dac folosite singure, DIV si SPAN nu au nici un efect major, n
combinaie cu CSS pot crea aspecte grafice importante. Pentru aceasta, ambele
pot folosi atributul style (cu proprieti CSS) ori atributele id sau class ca
identificator pentru stiluri CSS.
1. Tag-ul DIV
Tag-ul <div></div> este unul din cele mai folosite elemente HTML, aceasta
deoarece n combinaie cu proprieti CSS poate crea efecte grafice deosebite,
iar n interiorul lui pot fi incluse oricare elemente HTML: tabele, formulare,
marcatori, linii sau alte DIV-uri. Cadrul n care acestea sunt adugate poate avea
propriul fundal (background), lungime, nlime i margini cu diferite linii.
Iat un exemplu n care avem 2 div-uri, unul conine un formular iar celalalt o
list "<ul></ul>", fiecare DIV cu propria culoare de fundal, dimensiuni stabilite
si margini diferite.
<div style="width:250px; background:#aaee88; border:1px solid blue;">
<form action="" method="post">
Nume: <input type="text"></input><br>
E-mail:<input type="text"></input><br>
<input type="submit" value="Trimite"></input>
</form>
</div>
Alt DIV
<div style="width:180px; background:#88aafe; border:5px outset #888888;">
<ul>
<li>Linie 1</li>
<li>Linie 2</li>
49
<li>Linie 3</li>
</ul>
</div>
- n atributul "style" sunt specificate proprietile CSS care stabilesc aspectul
grafic al fiecrui DIV (lungime n pixeli, fundal si bordur).
Acest cod va afia ntr-o pagin web urmtorul rezultat:
Nume:
E-mail:
Trimite
Alt DIV
Linie 1
Linie 2
Linie 3
Un alt aspect important este i faptul c putem poziiona coninutul din
interiorul tag-ului <div> </div> oriunde n pagin, folosind proprieti CSS
precum:
position - care poate lua valorile: static, relative, fixed sau absolute (pt.
mai multe detalii vezi Poziionare CSS)
margin - care stabilete distana dintre marginea cadrului seciunii (blocul)
DIV i elementele din jurul lui (pt. mai multe detalii vezi Margini i
chenare CSS)
Iat un exemplu n care, prin folosirea mai multor DIV-uri poziionate
suprapus, putem afia n pagin un titlu cu aspect grafic deosebit. Codul este
urmtorul:
<div style="position:relative; font-size:21px;">
<div style="position:absolute; margin-top:-1; margin-left:-2; color:white;">Titlu
- Exemplu</div>
<div style="position:absolute; margin-top:1; margin-left:2; color:black;">Titlu Exemplu</div>
<div style="position:absolute; margin-top:0; margin-left:0; color:silver;">Titlu Exemplu</div>
</div>
n acest exemplu avem un prim DIV cu atributul "style" n care avem o
proprietate de poziionare relativ (pt. a poziiona toate celelalte elemente pe
care el le ncadreaz dup contextul scris anterior) i o alt proprietate pentru
mrimea textului. n interiorul acestui DIV avem alte 3 div-uri, poziionate
absolut i care ncadreaz fiecare cate un text identic. Prin poziionarea absoluta
div-urile se suprapun, la o distana stabilit de proprietile "margin-top" i
50
"margin-left", iar prin culoare diferit (cu proprietatea "color") dat textului din
fiecare "div" va apare n pagina web urmtorul rezultat:
- Pentru a folosi tag-urile DIV eficient i cu rezultate deosebite este necesar s

cunoatei proprietile CSS de baza (pentru fonturi, poziionare, margini,
borduri, background) pe care le putei nva la Cursul CSS din acest site.
2. Tag-ul SPAN
Cu tag-ul <span></span> putei aduga stiluri grafice unei anumite
poriuni dintr-un context. Pentru aceasta trebuie folosit mpreun cu proprieti
CSS care pot fi adugate printr-un atribut "style" n interiorul etichetei "<span>"
(sau n foi de stil).
Pentru a nelege mai bine, iat un exemplu n care se scoate n eviden
anumite cuvinte dintr-un text. Pentru aceasta ncadram cuvintele respective ntrun tag SPAN cruia i adugam proprietile dorite, ca n exemplul urmtor.
Aceasta este o lecite din <span style="background:#88fe88; fontweight:bold;">Cursul HTML</span> de pe MarPlo.net.
- Am adugat poriunea din context (aici textul "Curs HTML") ntr-un tag SPAN
pentru a-i putea aplica proprietile grafice dorite i care nu afecteaz restul
coninutului.
- Astfel, prin proprietile adugate n "style" (background:#88fe88; si fontweight:bold;), n pagina web va fi afiat textul n felul urmtor:
Aceasta este o lecie din Cursul HTML de pe MarPlo.net.
Tag-ul SPAN poate fi folosit i ca o classa pentru CSS. Astfel, proprietile
adugate elementului "span" ntr-o foaie de stil vor fi transferate tuturor
elementelor din pagin care sunt ncadrate n tag-uri "<span></span>".
Iat un exemplu
<html>
<head>
span {
border:2px solid red;
padding:1px;
color:#1111fe;
}
</style>
51
</head>
<body>
<h4>Exemplu de <span>text cu eticheta SPAN</span> in interiorul frazei.</h4>
<ul>
<li>Linia 1</li>
<li><span> Linie 2, in span </span></li>
<li>Linia 3</li>
<li><span> Linie 4, in span </span></li>
<li>Linia 5</li>
</ul>
</body>
</html>
- Observai cum a fost adugat elementul "span" n tag-ul "<style> </style>" din
seciunea HEAD a codului HTML. Acest element face referire la toate tag-urile
"<span></span>" din document i le transmite aceleai proprieti.
- Acest cod va afia ntr-o pagina web urmtorul rezultat:
Exemplu de text cu eticheta SPAN n interiorul frazei.
Linia 1
Linie 2, n span
Linia 3
Linie 4, n span
Linia 5
3. Diferena dintre DIV i SPAN

- Diferena dintre DIV si SPAN este faptul ca DIV ncadreaz o seciune din
document sub forma unui bloc iar SPAN ncadreaz o poriune din context sub
forma de linii.
Iat un exemplu din care se poate nelege mai bine, atribuim aceeai
proprietate grafic (bordura roie) unui tag DIV i unui tag SPAN.
<div style="border:1px solid #fe1111;">
Fraza pe mai multe linii, <br>
continua cu linia a doua, <br>
se termina cu linia a treia.
</div>
<br>
- Acum cu SPAN:<br><br>
<span style="border:1px solid #fe1111;">
Fraza pe mai multe linii, <br>
continua cu linia a doua, <br>
52

</span>
- n pagina web va aprea:
Fraza pe mai multe linii,
continua cu linia a doua,
se termina cu linia a treia
- Acum cu SPAN:
Fraza pe mai multe linii,
continua cu linia a doua,
- Observai diferena, modul n care este afiata bordura. Pentru DIV aceasta
ncadreaz exteriorul seciunii (blocul) div-ului, iar pentru SPAN bordura este
afiata pe fiecare linie.
- De aceea este indicat folosirea tag-ului "<span></span>" pentru coninut din
interiorul unei linii.
- Cnd avei mai multe elemente <div></div> si <span></span> n pagin, este
indicat folosirea atributului "id" sau "class". Acestora le acordai proprieti CSS
o singur dat n seciunea HEAD sau ntr-un fiier CSS extern. Este mai eficient
dect sa scriei n fiecare "<div>" si "<span>" cate un atribut "style".
Pentru mai multe detalii despre "ID" si "CLASS" folosite cu CSS, putei
studia prima lecie de la Cursul CSS, Scriere cod CSS.
53

Curs 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

Curs HTML

Încărcat de

Drepturi de autor:

Formate disponibile

Curs HTML

Acest curs prezint elementele de baz ale limbajului HTML i modul de

Lecia 1 - Principalele elemente HTML

2. Structura documentului HTML

Structura general a unui document HTML

Lecia 2 - Crearea i editarea paginii HTML

1.Crearea bazei de nceput a unui document

2. Setarea proprietarilor documentului

- Aceste atribute controleaz culoarea link-ului n diferite stri

modificrile salvai, astfel dac redeschidei documentul ca o pagin web acesta

Forma general a unei pagini Web

- marcajul HTML de deschidere - indic

- marcajul HEAD de deschidere - de aici

- marcajele TITLE - aici se scriu cteva

- metatag-uri, ajut motoarele de cutare la

- marcajul HEAD de nchidere - aici se

- marcajul BODY de deschidere - ncepe

... Coninut, etichete HTML ...

- tot ceea ce apare aici va fi afiat n

- marcajul BODY de nchidere - indic

- marcajul HTML de nchidere

Instruciunile HTML (numite i controale, marcaje sau tag-uri) ncep cu o

<h2> text </h2>

< font size = 6 color

Lecia 3 - Titluri, Paragrafe, Un nou rnd, Linie

1. Titluri <Hx> ... </Hx>

mare, n <H1> pn la foarte mic n <H6>.

Cum apare n pagin

2. Paragraf <p> ... </p>

Cum apare n pagin

3. Un nou rnd <br>

Cum apare n pagin

4. Linie orizontal <hr>

- NOSHADE = afieaz linia fr a avea un aspect 3D

Cum apare n pagin

Lecia 4 - Formatul textului

HTML conine mai multe elemente, tag-uri i atribute, pentru

1. Tag-ul <FONT> ... </FONT>

2. Bold, Italic, Underline i alte elemente

4. Alte etichete HTML pentru formatul textului

<var> Folosit pentru variabile sau argumente de comenzi </var><br>

- n browser va fi afiat aa:

Lecia 5 - Marcatori i numerotare

HTML conine cteva tag-uri utile pentru aezarea coninutului n

1. Elementele pentru marcatori i numerotare

<li>List item 3 ...</li>

- Sunt 3 tipuri de marcaje: disc, circle (cerc) i square (ptrat)

<li>List item 2 ...</li>

List item 1 ...

2. Alte elemente pentru aezarea textului n pagin

Lecia 6 - Adugare Imagini

1. Formatul imaginilor care pot fi folosite

n exemplu de mai jos putei vedea modul de introducere a unei imagini pe

ncercai singuri mai multe exemple, folosind i alte atribute i valori

Lecia 7 - Crearea de link-uri

Link-urile (links) sunt elemente HTML cu ajutorul crora putem

1. Se scrie urmtorul cod la textul int, care marcheaz locaia unde se

Lecia 8 - Hri de imagini

marcajul "alt" de specificare a textului alternativ pentru imagini). Totui acest

marcaj de includere a imaginilor

specific faptul c este o hart de

specific harta de imagine la client

imaginea de rezoluie sczut care se

specific regiunile unei hri de