0% au considerat acest document util (0 voturi)

293 vizualizări

HTML

creare pagina web

Încărcat de

shevciuc84

Drepturi de autor

Formate disponibile

Descărcați ca DOCX, PDF, TXT sau citiți online pe Scribd

0% au considerat acest document util (0 voturi)

293 vizualizări

HTML

creare pagina web

Încărcat de

shevciuc84

Drepturi de autor

Formate disponibile

Descărcați ca DOCX, PDF, TXT sau citiți online pe Scribd

Sunteți pe pagina 1/ 147

HTML - cuprins

- Cunoasterea HTML este primul pas si cel mai important

pentru cei care vor sa construiasca pagini web de calitate
- Aici gasiti tutoriale, lectii, exemple si explicatii din care sa
invatati, daca exersati si singuri.

Introducere - Introducere in HTML

1 - Elementele principale, cod HTML
2 - Crearea si editarea pagini HTML
3 - Titluri, Paragrafe, Un nou rand, Linie orizontala
4 - Formatul textului
5 - Marcatori si numerotare
6 - Lucrul cu Imagini
7 - Crearea de link-uri
8 - Harti de imagini
9 - Lucrul cu Tabele
10 - Lucrul cu mai multe cadre
11 - Crearea de form-uri
12 - Elemente speciale (META, embed, marquee, object)
13 - Lucrul cu stiluri CSS
14 - Despre tag-urile DIV si SPAN
15 - Trecerea de la HTML la XHTML
XHTML - Tag-uri si atributele lor

Tutorial HTML5
HTML5 - Tag-uri Noi
HTML5 - Elemente si atribute noi in formular
Desenare cu HTML5, canvas si JavaScript
Coduri culori pentru site
Caractere speciale si secvente escape

Introducere
HTML (HyperText Markup Language) este un limbaj utilizat
pentru crearea paginilor web ce pot fi afisate intr-un browser
(sau navigator).
HTML este folosit pentru prezentarea unui continut (text,
imagine) intr-o pagina web, furnizeaza mijloacele prin care
continutul unui document poate fi structurat si adnotat cu
diverse tipuri de metadate si indicatii de redare si afisare.
Aceste indicatiile pot varia de la decoratiuni minore ale
textului, cum ar fi culoarea sau sublinierea unui cuvant ori
introducerea unei imagini, pana la adaugarea de elemente
sofisticate, tabele, harti de imagini, formulare si cod CSS sau
scripturi JavaScript.
Metadatele pot include informatii despre titlul si autorul
documentului, informatii structurale despre cum este impartit
documentul in diferite segmente, paragrafe, liste, titluri etc. si
informatii esentiale care permit ca documentul sa poata fi legat
de alte documente pentru a forma astfel hiperlink-uri.
HTML este un format text proiectat pentru a putea fi citit si
editat utilizand un editor de text simplu, editarea si intelegerea
paginilor in acest fel necesita cunostinte de HTML, pe care le
puteti obtine studiind lectiile din acest curs.
Exista si editoare grafice, de tip WYSIWYG (What You See Is
What You Get - "ceea ce vezi este ceea ce obtii"), cum ar fi
Macromedia Dreamweaver, Adobe GoLive sau Microsoft
FrontPage, care permit ca paginile web sa fie tratate
asemanator cu documetele Word si genereaza ele cod HTML
pentru continutul paginii, dar aceste programe genereaza un
cod HTML care este de multe ori prea incarcat si de proasta

calitate.
HTML este de asemenea utilizat in e-mail. Majoritatea
aplicatiilor de e-mail folosesc un editor HTML incorporat pentru
compunerea e-mail-urilor si un motor de prezentare a e-mailurilor de acest tip.

Acest curs prezinta elementele de baza ale limbajului HTML si

modul de lucru cu acesta, va ajuta sa invatati cum sa creati
pagini web folosind aceasta tehnologie.
Tot ce aveti nevoie este un editor de texte simplu, cum ar fi
Notepad, si un navigator, de exemplu Mozilla Firefox, care este
gratuit.
Pentru a invata cat mai bine elementele prezentate in aceste
lectii, exersati personal fiecare exemplu prezentat si creati si
altele pornind de la acestea.
Retineti ca acest curs reprezinta o baza si un punct de pornire
pentru invatarea HTML, ne fiind prezentate aici toate
proprietatile si elementele HTML. Pentru o cunoastere mai
amanuntita a acestora, vizitati site-ul W3C HTML.

Principalele elemente HTML

1. Ce este HTML? (Hypertext Markup Language)

- Este un set de coduri logice care constituie apariia unui

document web si a informatiilor pe care le deine. Codurile sunt
scrise intre "<"(paranteza deschisa) si ">" (paranteza
inchisa), cu toate ca nu sunt chiar paranteze, aa se numesc si
arata aa: < >.
Exemplu:
<BODY> sau <FONT>

- Cele mai multe elemente (numite si tag-uri) au un element (tag)

de deschidere si un element de nchidere distins prin "/" in interiorul
parantezei deschise "<".
Exemplu:
<FONT> ... </FONT>

- Primul cuvnt care apare nuntru "<" se

numete element sau eticheta HTML si spune browser-ului sa
fac ceva, precum <FONT>
- Cuvintele care urmeaza dup element in interiorul "< >"se
numesc atribute care descriu proprietile elementului. Cum ar fi :
culoarea, mrimea, etc.
- Atributele sunt separate prin spatiu si urmate de semnul egal "=",
dupa care sunt scrise, intre ghilimele (" ") valorile atributelor.
- Astfel, o eticheta HTML poate contine elementul de identificare,
atribute si valori.
- In urmatorul exemplu elementul este FONT atributul COLOR si
valoarea BLUE:
<FONT COLOR="BLUE">Acest text va fi albastru</FONT>
2. Structura documentului HTML

- Un document (fisier) HTML este alcatuit din mai multe elemente

si atributele lor.
- La nceput un element HTML cuprinde (nconjoar ) datele
documentului. Acest element conine doua sub-elemente
principale: HEAD siBODY. In HEAD se poate adauga titlul paginii
web si alte elemente numite metatag-uri, precum si scripturi
JavaScript si stil-uri CSS. In BODY se adauga continutul
documentului care va fi afisat in pagina web.
Exemplu:
<html>
<head>
<title>Titlu Documentului</title>
</head>
<body>
Continutul paginii
</body>
</html>

Structura generala a unui document HTML

<HTML>

<HEAD> Acesta are si el mai multe sub-elemente:

<TITLE> Aici se scrie titlul documentului, cat mai sugestiv, si
se ncheie cu </TITLE>
<BASE> Poate fi folosit pentru a nregistra locaia
documentului in forma URL. (Necesar daca documentul nu este
accesat in locaia lui originala). Se ncheie cu </BASE>
<LINK> Indica o relaie dintre document si alte obiecte de pe
WEB. Se ncheie cu </LINK>
<META> Aici sunt scrise informaii cum ar fi tastatura (limbaj)
folosita, descrierea si 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 pagina. Se ncheie cu </STYLE>
Aici se ncheie elementele adaugate in HEAD
</HEAD>
<BODY> Etichetele HTML si continutul documentului care va fi
afisat in pagina web sunt incluse in acest element. Aici pot fi puse si
elemente cum ar fi: <SCRIPT> </SCRIPT>
Se ncheie cu
</BODY>
</HTML>

Crearea si editarea paginii HTML

Sunt mai multe programe cu care se pot crea pagini web, chiar
fara a cunoaste limbjul HTML, cum sunt Microsoft FrontPage sau
Macromedia Dreamweaver.
Editoarele de text sunt programele de baza, si 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 creaza documente rapid si
usor, in plus ocupa foarte putin spatiu si resurse de memorie,
acestea insa necesita cunoasterea limbajului HTML.
Dintre editoarele de text cunoscute cel mai folosit este NotePad,

care este folosit si pentru acest curs, dar poate fi utilizat orice
editor de text. Pentru ncepatori si pentru usurinta cu care se
lucreaza, eu recomand folosirea aplicatie NotePad sau Notepad++,
dar cei avansati pot folosi si altele cum ar fi Dreamweaver.
1. Crearea bazei de nceput a unui document

Cum ati vazut in Lectia 1, sunt elemente sigure, generale, care

sunt necesare pentru crearea unui document HTML.
Pentru nceput deschideti aplicatia NotePad si scrieti structura de
baza a unei pagini web. Aceasta este:
<html>
<head>
<title> Titlul </title>
</head>
<body>
Continut
</body>
</html>

Acum pagina dv. are HEAD si BODY in interiorul bazei <HTML>.

In interiorul elementului HEAD are elementul TITLE, pe care ar trebui
sa-l completati cu un text reprezentativ ca titlu al documentului dv.;
si in BODY un text "Continut".
Ceea ce scrieti la TITLE va apare in linia cea mai de sus a browserului (deasupra meniurilor). La TITLE puteti pune orice text, dar este
bine sa scrieti ceva care sa descrie cat mai bine obiectul si
continutul paginii deoarece este ceea ce cauta si indexeaza multe
portaluri de cautare de pe internet, si indicat, sa nu depaseasca 70
caractere.
Ceea ce adaugati intre tag-urile <body> </body> reprezinta
continutul paginii, care va fi afisat in browser.
Mai jos gasiti un exemplu cum ar putea fi completat tag-ul TITLE si
un mic continut in pagina:
<html>
<head>
<title>MarPlo.net - Cursuri, Jocuri si Anime</title>
</head>
<body>

<h1>Pagina HTML</h1>
Lectii, exemple si explicatii.
</body>
</html>

- <h1> </h1> este o eticheta HTML pentru afisare de text mare (ca
un titlu) in pagina.
- Ca sa vedeti rezultatul, copiati acest cod intr-o pagina noua
deschisa cu Notepad si apoi salvati fisierul cu extensia .html. Daca
nu stiti deja, pt. a-l salva alegeti la "Save as type" - All Files, apoi la
"File name" ii scrieti numele si extensia (ex.: "pagina.html"). Dupa
ce a fost salvat fisierul, deschideti-l cu un browser (trebuie sa
mearga cu dublu-click pe el).
2. Setarea proprietarilor documentului

- Proprietatile documentului pot fi controlate de atributele

elementului BODY, de exemplu cum ar fi culorile pentru fondul
paginii, pentru text si diferite faze ale link-urilor.
Culorile sunt setate folosind culorile de baza: rosu, verde si
albastru; expresia folosita RGB (Red, Green, Blue), acestea sunt
reprezentate ca valori hexadecimale si sunt scrise intre ghilimele ("
"), la inceput trebuie adaugat caracterul '#'. Fiecare 2 unitati ale
codului reprezinta una din culorile RGB.
De exemplu: #00aa11 reprezinta o culoare care nu are Rosu (00),
are Verde (aa) si Albastru mai putin (11).
Elementul BODY
- Acestui element ii puteti adauga informatii care sa defineasca
culoarea sau imaginea din fondul paginii, textul si culoarea linkurilor.
- Daca 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 adaugati in eticheta
<BODY> atributul BGCOLOR.

- Urmatorul exemplu va prezenta un document a carui fond este

de culoare albastra:
<body bgcolor="#0000ff"></body>

Culoarea textului
o - Atributul TEXT controleaza culoarea textului normal din
document.
o - Acesta va afecta tot textul din document care nu este
colorat de alte elemente, cum ar fi link-ul.
o - Culoarea standard pentru text este Negru.
o - Iata un exemplu in care culoarea fondului va fi albastru si
culoarea textului va fi rosu, atributul TEXT va fi adaugat
astfel:
<body bgcolor="#0000ff" text="#ff0000"></body>

Link-uri (LINK, VLINK si ALINK)

o - Aceste atribute controleaza culoarea link-ului in diferite
stari
1. LINK - culoarea initiala a link-ului. Standard este
albastru
2. VLINK - culoarea unui link vizitat. Standard este
purpuriu.
3. ALINK - culoarea link-ului in momentul activarii.
Standard este rosu.
o - Modul de setare al acestor atribute este urmatorul:
<body bgcolor="#ffffff" text="#ff0000" link="#0000ff"
vlink="#ff00ff" alink="#ffff00"></body>

Rezultatul va fi o pagina cu fondul alb, textul rosu, link-urile

albastre, link-urile vizitate vor avea culoarea roz iar
culoarea link-urilor in momentul activarii va fi galben.

Folosirea unei imagini ca fond pentru pagina

(background)

o - Elementul body ofera posibilitatea nlocuiri fondului

paginii cu o imagine (Background image). Daca imaginea
este mai mica dect dimensiunile paginii atunci imaginea
va fi multiplicata pana va acoperi ntreg cadru
documentului. Este indicat ca imaginea sa fie in format
*.gif sau *.jpg. Folosirea unei imagini va da un aspect
placut documentului. Pentru a vedea cum arata un
document al carui fond este o imagine click aici.
o - Un exemplu de cod HTML cu imagine pentru background
este urmatorul:
<body background="imagine.gif" bgcolor="#ffffff"></body>

In acest exemplu fondul pagini va fi dat de imaginea

fisierului "imagine.gif" si de asemenea am setat BGCOLOR
astfel incat in timpul procesului de ncarcare a imaginii
culoarea fondului va fi alba.

Dupa ce a-ti creat baza de nceput a unui document si a-ti setat

proprietatile, trebuie sa salvati fisierul. Salvarea trebuie facuta intrun format pe care browser-ul l poate recunoaste. Extensia standard
pentru un fisier care reprezinta o pagina web este ".htm" sau
".html". De obicei folosesc (".html").
- Pentru a salva documentul ca sa arate ca o pagina web,
in NotePad alegeti din meniul File comanda Save si salvati fisierul
cu orice nume doriti dar cu extensia html (sau "htm") - (La File
name: scrieti si numele si extensia ".html", exemplu: index.html).
Daca nu scrieti extensia, NotePad va salva documentul in format
"txt".
- Pentru a vedea documentul ca o pagina web, duceti-va in
directorul in care a-ti salvat fisierul si deschideti-l pur si simplu (cu
Enter sau dublu-click la mouse), acesta va fi deschis automat de
browser-ul pe care-l folositi (Mozilla Firefox, Internet Explorer,
Opera). Sau deschide-ti browser-ul si din comanda Open deschideti
documentul pe care l-ati salvat.
- Pentru a continua munca, a face modificari paginii sau pentru a
adauga altceva in documentul HTML, deschideti documentul cu
NotePad. Una din metode este sa deschideti aplicatia NotePad si din
meniul File alegeti Open apoi gasiti fisierul pe care vreti sa-l
modificati si dati clic pe butonul Open. Dupa ce terminati

modificarile salvati, astfel daca redeschideti documentul ca o pagina

web acesta va fi deschis cu noul format.
Aici puteti vedea structura generala a unei pagini Web

Titluri, Paragrafe, Un nou rnd, Linie orizontala

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

- Pentru titluri din continutul documentului HTML este indicat

folosirea etichetelor <Hx>, (headings) unde 'x' este un numar
intre 1 si 6.
- In cadrul elementului BODY, elementele Headings sunt folosite
ca titluri sau pentru o mai buna impartire a continutului paginii.
- Mrimea textului nconjurat de elementul Heading variaz de la
foarte mare, in <H1> pana la foarte mic in <H6>.

Mai jos puteti 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 in pagina

Heading 1
Heading 2
Heading 3
Heading 4
Heading 5
Heading 6

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

- Paragrafele permit sa adaugi text in document astfel incat

lungimea de afisare a textului va fi ajustata de marimea
deschiderii browser-ului si fiecare paragraf va incepe un nou
rnd.
- Distanta dintre doua paragrafe succesive este mare deoarece
browser-ul le afiseaza cu un rnd gol intre ele.

Mai jos puteti vedea exemplu:

Cod HTML
<html>
<head>
<title>Titlu documentului</title>
</head>
<body>
<p>Paragraf 1</p>
<p>Paragraf 2</p>
<p>Paragraf 3</p>
<p>Paragraf 4</p>
</body>
</html>

Cum apare in pagina

Paragraf 1
Paragraf 2
Paragraf 3
Paragraf 4

3. Un nou rand <br>

- Tag-ul <br> permite sa decizi unde textul va incepe un nou

rnd, astfel se forteaza nceperea unui nou rnd.
- <br> este un Element Gol dar poate sa conin atribut. <br> nu
are si nu cere element de nchidere, nu se foloseste </br>

Mai jos puteti vedea exemplu:

Cod HTML
<html>
<head>
<title>Titlu documentului</title>

Cum apare in pagina

Heading 1
Paragraf 1

</head>
<body>
<h1>Heading 1</h1>
<p>Paragraf 1<br>
Linie 2<br>
Linie 3<br>
... </p>
<p>Paragraf 2</p>
</body>
</html>

Linie 2
Linie 3
...
Paragraf 2

- Elementul <br> folosete un singur atribut CLEAR care poate

avea valoarea LEFT, RIGHT sau ALL, si sunt folosite daca este o
imagine pe pagina. Atributul CLEAR foreaz o linie in jos. Daca o
imagine este aezata in partea stanga a paginii, valoarea LEFT va
muta cursorul jos la prima linie din marginea tanga.
4. Linie orizontala <hr>

- Acest element afiseaza o linie orizontala in document

- Acest element nu folosete element de nchidere [</hr>]
- Elementul <hr> foloseste urmatoarele atribute:
o - SIZE = latimea liniei, in pixeli (standard este 2)
o - WIDTH = lungii liniei, in pixeli sau procente din lungimea
afisarii paginii (standard 100%)
o - NOSHADE = afiseaza linia fara a avea un aspect 3D
o - ALIGN = aliniaza linia (Left, Center, Right), adica Stanga,
Centru sau Dreapta paginii ( Standard centru)
o - COLOR = seteaza culoarea liniei

Mai jos puteti vedea exemplu:

Cod HTML

Cum apare in
pagina

<html>
<head>
<title>Titlu documentului</title>
</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

Formatul textului
HTML contine mai multe elemente, tag-uri si atribute, pentru
afisarea textului in mai multe formate cu aspecte grafice diferite.
1. Tag-ul <FONT> ... </FONT>

Cu acest element, <FONT>, puteti modifica aspectul textului,

cum sunt tipul fontului folosit, marimea si culoarea textului.
- Marimea textului poate fi modificata cu elementul FONT si
atributul SIZE. Atributul SIZE poate lua valorile numerice de la 1
la 7 si pe langa acestea poate folosi, ca valoare relativa,
semnele "+" sau "-". Textul normal (daca nu este specificat
acest atribut) are valoarea 3.
Exemplu :
<font size="+2">

Doua mrimi mai mare</font>

- Tipul fontului poate fi modificat cu elementul FONT si

atributul FACE.
Exemplu :
<font face="Arial Black">Acesta este tipul de font Arial Black</font>

- Culoarea textului poate fi modificata cu elementul FONT si

atributul COLOR.
Exemplu :
<font color="#00dd00">Acest text are culoarea verde</font>
2. Bold, Italic, Underline si alte elemente

Elemente des folosite pentru formatul textului sunt:

- Bold (ingrosat) <b> ... </b>
- Italic (inclinat) <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 incadrat de elementul PRE
este prezentat intr-un singur font, oricare ar fi atributul FACE.
Spatiile mai lungi si liniile necesare sunt prezentate aa cum
sunt scrise in NotePad, ne mai fiind nevoie de alte elemente
adiionale, cum ar fi <br> pentru o noua linie si  
  pentru mai mult spaiu intre cuvinte.
- <em> Accentuare (Emphasis) </em> - Browser-ul de obicei
arata aces element ca italic

- <strong> Strong </strong> - Browser-ul de obicei arata aces

element ca bold
- <tt> Teletype </tt> - Ca si PRE, browser-ul prezinta acesta intrun singur tip de font, indiferent de fontul ales cu atributul FACE,
in interiorul elementului FONT
- <cite> Citatie </cite> - Reprezinta o citatie din document.

Mai jos puteti vedea cteva exemple de coduri si modul lor de

afisare in browser.
<html>
<head>
<title>titlu documentului</title>
</head>
<body>
<p><font size="+1">O singura marire</font>- normal <font size="-1">O singura micsorare</font><br>
<b>Bold</b>- <i> Italic </i> - <u> Subliniat </u> <font color="#ff0000"> Colorat </font><br>
<em>Accentut</em> - <strong> Strong </strong> <tt>Tele type</tt><br>
<cite> Citatie </cite></p>
</body>
</html>

- In browser va fi afisat asa:

O singura marire- normal - O singura micsorare
Bold- Italic - Subliniat - Colorat
Accentut - Strong - Tele type
Citatie
3. Alinierea

Cteva elemente pot avea atributul (ALIGN) pentru aliniere, cum

ar fi Titlurile <Hx> , Paragraful <p></p> si Linia
orizontala <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 pagina, indiferent daca in acel loc se afla si alt
ceva (Imagine, Text, ).
- <center> ... </center> Va centra elementele
4. Alte etichete HTML pentru formatul textului

- <strike> Text taiat </strike>

- <big> Prezinta textul intr-un font mare </big>
- <small> Prezinta textul intr-un font mic </small>
- <sub> Afisaza textul in pozitia subscript </sub>
- <sup> Aseaza textul in pozitia superscript </sup>

In continuare puteti vedea un exemplu cu aceste coduri de mai sus

si felul cum sunt afisate de browser.
<html>
<head>
<title>Titlu documentului</title>
</head>
<body>
<p>
<strike> Text taiat </strike><br>
<big> Prezinta textul intr-un font mare </big><br>
<small> Prezinta textul intr-un font mic </small><br>
<sub> Aseaza textul in pozitia subscript </sub> normal
<sup> Aseaza textul in pozitia superscript </sup><br>
</p>
</body>
</html>

- In browser va fi afisat asa:

Text taiat

Prezinta textul intr-un font mare

Prezinta textul intr-un font mic
Aseaza textul in pozitia subscript

normal

Aseaza textul in pozitia superscript

- Urmatoarele elemente pentru format sunt folosite mai rar si sunt

pentru documente cu aplicatii tehnice
- <dfn> Defineste exemplu de termen inchis </dfn>
- <code> Folosit pentru extragerea unui cod de
program </code>
- <samp> Folosit pentru simple productii 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>

In continuare puteti vedea un exemplu cu aceste coduri de mai sus

si felul cum sunt afisate de browser.
<html>
<head>
<title>Titlu documentului</title>
</head>
<body>
<p>
<dfn> Definite exemplu de termen inchis </dfn><br>
<code> Folosit pentru extragerea unui cod de program </code><br>
<samp> Folosit pentru simple productii de programe, scripturi , etc. </samp><br>
<kbd> Folosit pentru text care va fi scris de utilizator </kbd><br>
<var> Folosit pentru variabile sau argumente de comenzi </var><br>
</p>
</body>
</html>

- In browser va fi afisat asa:

Definite exemplu de termen inchis
Folosit pentru extragerea unui cod de program

Folosit pentru simple productii de programe, scripturi ,

etc.
Folosit pentru text care va fi scris de utilizator

Folosit pentru variabile sau argumente de comenzi

- Alte elemente pentru formatul textului:

- <q> ... </q> - Folosit pentru citate scurte.
- <blockquote> ... </blockquote> - Folosit pentru incadrarea
de citate mai lungi, creaza spatiu pentru text. Pentru a crea mai
mult spatiu puteti adauga de mai multe ori acest element.
- <address> ... </address> - Cu acest element se specifica
informatii cum ar fi autorul documentului si detalii pentru
contact.

In continuare puteti vedea un exemplu cu aceste coduri de mai sus

si felul cum sunt afisate de browser.
<html>
<head>
<title>Titlu documentului</title>
</head>
<body>
<p>
<q>Daca vrei si crezi, orice este posibil.</q>
<blockquote>
Bucuriile neimpartasite pot aduce tristete iar suferinta impartasita poate sa aduca
bucurie. <br>
Aceasta este prima zi din restul vietii tale.
</blockquote>
<center>
<address>180 Attwell Dr. Suite 130 <br> Toronto, ON <br> M9W 6A9</address>
</center>
</p>
</body>
</html>

- In browser va fi afisat asa:

Daca vrei si crezi, orice este posibil.
Bucuriile neimpartasite pot aduce tristete iar suferinta impartasita poate sa aduca
bucurie.
Aceasta este prima zi din restul vietii tale.

180 Attwell Dr. Suite 130

Toronto, ON
M9W 6A9

Marcatori si numerotare
HTML contine cateva tag-uri utile pentru asezarea continutului in
pagina. Prin acestea textul este mai usor de citit si evidentiat.
1. Elementele pentru marcatori si numerotare

Un element des folosit in formarea listelor (neordonate)

este <ul>.
- <ul> este elementul de nceput si dupa scrierea listei se incheie
cu </ul>.
- Majoritatea elementelor pentru marcatori si numerotare sunt
compuse din unu sau mai multe elemente <li> ... </li> (list
element). Fara atributul "type" specificat in "<ul>" acestea
prezint un marcaj ca un bullet.

Mai jos puteti vedea exemplu.

<html>
<head>
<title>titlu documentului</title>
</head>
<body>
<ul>
<li>List item 1 ...</li>
<li>List item 2 ...</li>
<li>List item 3 ...</li>
</ul>
</body>
</html>

- In pagina web apare asa:

List item 1 ...
List item 2 ...

List item 3 ...

- Sunt 3 tipuri de marcaje: disc, circle (cerc) si square (patrat)

- Tipul de marcaj care se doreste folosit se introduce prin
atributul type in eticheta <ul>
- Exemplu:
<html>
<head>
<title>titlu documentului</title>
</head>
<body>
<ul type="square">
<li>List item 1 ...</li>
<li>List item 2 ...</li>
<li>List item 3 ...</li>
</ul>
</body>
</html>

- In pagina web apare asa:

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
lista sunt numerotate automat.
- Impreuna cu <ol> se foloseste <li> ... </li>

Iata un exemplu:
<html>
<head>
<title>titlu documentului</title>
</head>
<body>
<ol>
<li>List item 1 ...</li>

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

- In pagina web apare asa:

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 adaugat in
elementul <ol>, le puteti vetea 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 numarul de inceput al numerotarii

printr-o valoare data atributului start.
Exemplu:
<html>
<head>
<title>titlu documentului</title>
</head>
<body>
<ol type="a">
<li>List item 1 ...</li>
<li>List item 2 ...</li>
<li>List item 3 ...</li>
</ol>
- Alta lista:
<ol type="I" start="3">
<li>List item 1 ...</li>
<li>List item 2 ...</li>
<li>List item 3 ...</li>

</ol>
</body>
</html>

- In pagina web apare asa:

a. List item 1 ...
b. List item 2 ...
c. List item 3 ...

- Alta lista:
III. List item 1 ...
IV. List item 2 ...
V. List item 3 ...
2. Alte elemente pentru asezarea textului in pagina

Alte elemente pentru asezarea textului sunt: tag-ul <dl>, care

cuprinde in el elementele <dt> si <dd>
- <dl> ... </dl> este folosit (impreuna cu "dt" si "dd") pentru
definirea si incadrarea unei liste de definitii.
- <dt> ... </dt> Defineste elementul din lista. Fiecare tip de
astfel de element trebuie precedad de unul sau mai multe
elemente <dd> ... </dd>, folosite pentru descrierea
elementului definit.

Aceste elemente ajuta pentru a da un aspect ordonat si placut

textului si a putea face o separare mai buna a continutului.
In urmatorul exemplu puteti vedea cum se folosesc aceste elemente
:
<html>
<head>
<title>titlu documentului</title>
</head>
<body>
<dl>
<dt>HTML</dt>

<dd> - Hyper Text Markup Language</dd>

<dd> - Limbaj pentru pagini web</dd>
<dt>Dog</dt>
<dd>dog = caine</dd>
<dd>animal de casa</dd>
</dl>
</body>
</html>

- In pagina web apare asa:

HTML
- Hyper Text Markup Language
- Limbaj pentru pagini web
Dog
dog = caine
animal de casa
Pentru o eficienta mai buna se pot combina elementele de marcaj si
numerotare, introducand elementele <ul> si <ol> imbricate (unele
in celelalte) impreuna cu elementele <li>
Exemplu:
<html>
<head>
<title>titlu documentului</title>
</head>
<body>
<ul type="square">
<li> List item 1 ... </li>
<li> List item 2 ...
<ol type="a" start="3">
<li> Alt List item ... </li>
<li> Alt List item ... </li>
</ol></li>
<li> List item 5 ... </li>
</ul>
</body>
</html>

- Observati ca tot ce contine "<ol> ... </ol>" este adaugat in cadrul

unui "<li> </li>"
- In pagina web apare asa:
List item 1 ...
List item 2 ...
c. Alt List item ...
d. Alt List item ...

List item 5 ...

Adaugare Imagini
HTML contine si elemente pentru adaugarea de imagini in pagina
web.
1. Formatul imaginilor care pot fi folosite

Cele mai folosite formate pentru imaginile adaugate intr-o pagina

HTML sun GIF si JPEG (JPG ; JPE), avantajul acestora este ca
imaginile care au aceste extensii au o marime mica (in bytes),
avand maximum 256 de culori.
Alte tipuri de formate (folosite mai rar) sunt:
PNG, BMP, TIFF, PCX
2. Adaugarea unei imagini intr-o pagina web

Pentru a introduce o imagine intr-un format HTML se folosete

elementul <img> ... </img> mpreuna cu urmatoarele atribute :
- src - Valoarea acestui atribut determina locatia fisierului care
contine imaginea.
- alt - La acest atribut se scrie textul care va aparea daca
imaginea nu e afisata (de unele browsere) sau cand utilizatorul
va pozitiona, in browser, mouse-ul peste imagine.

- align - Acest atribut permite asezarea imagini in locuri diferite

pe pagina. Pot fi folosite urmatoarele optiuni:
o Bottom , Middle , Top , Left , Right , TextTop ,
ABSMiddle , Baseline , ABSBottom

- width - Valoarea acestui atribut reprezinta lungimea imaginii,

in pixeli. Daca nu este scris imaginea va fi prezentata cu
lungimea originala.
- height - Valoarea acestui atribut reprezinta inaltimea (latimea)
imaginii, in pixeli. Daca nu este scris imaginea va fi prezentata
cu inaltimea originala.
- border - Prin adaugarea acestui atribut imaginea va aparea
nconjurata de un chenar, valoarea acestui atribut reprezinta
grosimea chenarului, in pixeli.
- hspace - Acest atribut este pentru spatiu orizontal pe ambele
parti ale imaginii, specificat in pixeli. De exemplu o valoare de 5
va pune un spatiu invizibil, de 5 pixel, in prtile orizontale ale
imaginii.
- vspace - Acest atribut este pentru spatiu vertical pe ambele
parti ale imaginii, specificat in pixeli. De exemplu o valoare de 5
va pune un spatiu invizibil, de 5 pixel, in prtile verticale ale
imaginii.

In exemplu de mai jos puteti vedea modul de introducere a unei

imagini pe o pagina web si cum pot fi folosite atributele :
<html>
<head>
<title>titlu documentului</title>
</head>
<body>
<img src="imagine.jpg" alt="puteti adauga orice text" align="top"
width="100" height="120" border="4" hspace="10" vspace="7"></img>
</body>
</html>

- In pagina web va aparea:

Incercati singuri mai multe exemple, folosind si alte atribute si valori

prezentate mai sus.

Crearea de link-uri
Link-urile (links) sunt elemente HTML cu ajutorul carora putem
deschide alte pagini, sari de la un document la altul sau la alt site.
Sunt foarte importante in crearea de pagini web.
Forma generala pentru crearea unui link este urmatoarea:
<a href="url" title="Titlu link">Nume</a>

- a este elementul specific pentru crearea link-urilor

- href este atributul care marcheaza indicarea adresei link-ului
- url este adresa link-ului (a paginii care va fi deschisa). De exemplu
(http://www.marplo.net)
- title este atributul prin care se da un titlu link-ului (un text ascuns,
care apare numai cand este pozitionat mouse-ul deasupra link-ului)
- Titlu link este textul ascuns care apare cand este pozitionat
mouse-ul deasupra link-ului
- Nume este textul care va aparea in browser si pe care trebuie dat
click cu mouse-ul. In loc de acest text se poate folosi si o imagine,
astfel "Nume" va fi inlocuit cu <img
src="nume_imagine.extensie">
Cand documentul este alcatuit din mai multe cadre se foloseste si
atributul target, vezi Lectia 10
Culoarea link-urilor poate fi schimbata de urmtoarele atribute, care
trebuie scrise in interiorul elementului <BODY>
link="#0000ff - reprezinta culoarea link-ului in browser.

vlink="#00ffff - reprezinta culoarea link-ului cnd pagina

respectiva a fost / este vizitata.
alink="#ff0000 - reprezinta culoarea link-ului cnd acesta este
activat.
Exemplu:
<body bgcolor="#00ffff" link="#000000" vlink="#ff0000"
alink="#00ff00">

Link-urile sunt de doua feluri:

1. Link-uri externe - (sunt cele mai utilizate), care sunt si ele de
doua feluri:
a) Link-uri externe ctre pagini ale aceluiasi site. Pentru acestea
URL-ul poate sa nu includa si domeniul site-ului, cum ar fi
"http://www.nume.com", ci se poate folosi doar cale in directoare,
numele si extensia documentului la care se face saltul.
De exemplu:
- daca documentul tinta se afla in acelasi director cu fisierul in
care se scrie link-ul, codul va fi scris asa:
o <a href="nume_fisier.extensie" title="Titlu
link">Nume</a>

- daca documentul tinta se afla intr-un director anterior celui in

care se afla fisierul in care se scrie link-ul, codul va fi scris asa:
o <a href="../nume_fisier.extensie" title="Titlu
link">Nume</a>

- daca documentul tinta se afla intr-un director din cel care se afla
fisierul in care se scrie link-ul, codul va fi scris asa:
o <a href="director/nume_fisier.extensie" title="Titlu
link">Nume</a>

b) Link-uri externe ctre alte site-uri. Aici, adresa URL din link
trebuie sa contina si domeniul (numele site-ului) paginii tinta, codul
HTML se va scrie, de exemplu, asa:
<a href="http://nume_site/pagina" title="Titlu
link">Nume</a>

2. Link-uri interne - sunt link-uri ctre alte texte din aceeasi

pagina. Se folosesc cnd pagina respectiva este lunga si e nevoie sa
se sara spre anumite texte din pagina.
- Pentru creare de link-uri interne trebuie urmati urmatorii pasi:
1. Se scrie urmatorul cod la textul tinta, care marcheaza locatia
unde se va face saltul si se afla in aceeasi pagina cu linkul
o <a name="cuvant">Textul tinta</a>
o

- atributul "name" indica tinta pentru link, e un fel de

semn care indica locatia.

- "cuvant" poate fi orice cuvnt, trebuie sa fie unic pentru

fiecare link.

- "Textul tinta" este textul unde se face saltul.

2. In locul unde vrem sa fie link-ul (acolo unde o sa dam click

pentru a face saltul ctre textul ales), se scrie urmatorul cod:
o <a href="#cuvant">Nume</a>
o - aici "cuvant" este acelasi text scris la pasul 1.

Link-urile interne si externe pot fi combinate. Astfel putem face

saltul ctre un anumit text aflat intr-o alta pagina. In pagina
respectiva se scrie codul de la pasul 1, la textul ales pentru tinta
link-ului, iar in pagina in care va fi link-ul se scrie:
<a href="adresa_pagina#cuvant">Nume</a>

Harti de imagini

Hartile de imagini sunt parti din aceeasi imagine care este

"impartita" in mai multe zone, apoi in functie de zona pe care se
executa click, browserul poate afisea 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 pe zona
Brasov se incarca o pagina care descrie diverse obiective turistice
din judetul Brasov, iar un click pe o alta zona de judet ar duce la
alta pagina care descrie obiectivele turistice din acel judet.
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 acele butoane - mai
multe imagini se incarca mai incet decat o imagine cu dimensiunea
egala cu suma celorlalte (in kb) deoarece comunicarea cu serverul
(cand se cere imaginea) se face o singura data.
Pana aici am prezentat numai avantaje; dezavantajul major este ca
un vizitator care are browserul setat sa nu incarce imagini pentru a
naviga mai repede nu va vedea imaginea si nu va intelege mai
nimic (putem totusi folosi marcajul "alt" de specificare a textului
alternativ pentru imagini). Totusi acest lucru este foarte rar.
Crearea hartii de imagini

Pentru formarea unei harti de imagini, se adauga in interiorul tagului "<img>" atributul "usemap" a carui valoare reprezinta
numele hartii, apoi se incepe formarea hartii prin elementul:
<map name="nume_harta"> </map>

- unde pt. "nume_harta" a atributului "name" se foloseste acelasi

cuvant adaugat la "usemap"
- in cadrul acestuia se adauga elemente
<area atribute>

- acestea definesc zonele hartii imaginii si forma acestora (prin

valorile atributelor),
- numarul de elemente "AREA" reprezinta numarul de suprafete (cu
link-uri specifice) in care este "impartita" imaginea.

In urmatorul exemplu puteti vedea forma generala a creari unei

"harti de imagini" (cu 2 cadre), URL poate fi orice adresa de site sau
pagina a site-ului curent:
<img src="poza.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>

In tabelul de mai jos puteti vedea atributele care se folosesc si

descrierea acestora:
Instructiun
e

Atribute
-

usemap="nume_h specifica harta de imagine la

arta"
client

lowscr = "url"

marcaj de includere a imaginilor

specifica faptul ca este o harta de
imagine pe server (se foloseste
mai rar; de obicei folosim harti de
imagine la client)

ismap
<img atribut
e>

Descriere

name =
"nume_harta"

imaginea de rezolutie scazuta

care se incarca prima (doar
pentru Netscape)
specifica regiunile unei harti de
imagine la client
numele hartii de imagine
(corespunzator atributului

USEMAP al marcajului <IMG>)

defineste o regiune a unei harti

de imagine

shape = "forma"

forma regiunii: rect sau rectangle

(dreptunghi), circle sau circ
(cerc), point (punct), poly sau
polygon (poligon)

coords =
"coordonate"

coordonatele unei regiuni (in

pixeli); se calculeaza in functie de
coltul din stanga sus al imaginii
(care are coordonatele (0, 0),
adica x = 0, y = 0); variaza in
functie de SHAPE = forma
regiunii:
- pentru rect (dreptunghi) se dau
coordonatele celor 4 colturi sau a
celor din stg. sus si dr. jos ale
regiunii
- pentru circ (cerc) se dau
coordonatele centrului cercului si
raza
- pentru point (punct) se dau
coordonatele punctului
- pentru poly (poligon) se dau
coordonatele colturilor poligonului

href = "=url="

URL - ul asociat regiunii

specificate din cadrul imaginii; in
cazul unui clic pe acea regiune se
incarca pagina specificata prin
URL

alt = "text"

textul asociat regiunii specificate

din cadrul imaginii; apare plasand

mouse-ul deasupra regiunii
respective sau celor cu browserul
setat sa nu incarce imagini
Iata un exemplu practic, avem imaginea de mai jos.
In aceasta imagine avem trei zone distincte: dreptunghi, cerc si
romb (poligon); pe care, prin codurile HTML de creare a hartii de
imagini, le-am definit sa fie tratate ca zone diferite, separate, si
cand dam click pe ele, fiecare deschide cate o pagina diferita
(sugerata de numele din zona respectiva).

- Observati ca mouse-ul isi schimba forma numai cand este

deasupra zonelor care au fost definite ca sa fie suprafete a hartii de
imagini. Aceasta definire nu este facuta prin desen, ci prin
coordonatele folosite in atributul "coords", coordonate care au fost
alese pentru a se potrivi cu desenul. Reperul cel mai important este
lungimea in pixeli din coltul stanga-sus pana in punctele care
formeaza zona dorita.
Codul HTML pentru acest exemplu este urmatorul (studiati cu

atentie atributele folosite si coordonatele scrise; revizuiti si tabelul

de mai sus):
<div align="center">
<img src="image_map.gif" alt="Harta de imagini" border="0" width="300"
height="300" usemap="#map1">
<map name="map1">
<area
href="dir/contact.php" alt="Date de contact" title="Date de contact"
shape="rect" coords="6,116,97,184">
<area
href="curs.html" alt="Curs HTML" title="Curs HTML"
shape="circle" coords="251,143,47">
<area
href="../index.html" alt="Pagina principala" title="Pagina principala"
shape="poly" coords="150,217, 190,257, 150,297,110,257">
</map>
</div>

Lucru cu tabele
Tabelele sunt elemente foarte utile pentru asezarea si prezentarea
continutului intr-o pagina web.
1. Crearea de tabele

Pentru a crea tabele in paginile web se foloseste

elementul <table> ... </table> , acesta incadreaza alte patru
sub-elemente, care alcatuiesc structura tabelului.
- Linia (randul) Tabelului <tr> ... </tr>
- Titlul Tabelului <th> ... </th>
- Coloanele tabelului (datele) <td> ... </td>
- Sub-titlu tabelului <caption> ... </caption>

Linia tabelului de obicei contine elementul pentru titlurile tabelului si

elementul pentru coloanele tabelului.
In cadrul elementelor pentru titluri si coloanele tabelului se pot

adauga si alte elemente HTML, cum ar fi cele pentru formatul

textului, paragrafe, link-uri sau imagini
Mai jos puteti 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
<td>linia 2- coloana
</tr>
<tr>
<td>linia 3- coloana
<td>linia 3- coloana
</tr>
<tr>
<td>linia 4- coloana
<td>linia 4- coloana
</tr>
</table>

1</td>
2</td>

- In pagina web apare asa:

titlu 1

titlu 2

linia 2- coloana 1

linia 2- coloana 2

linia 3- coloana 1

linia 3- coloana 2

linia 4- coloana 1

linia 4- coloana 2

2. Atributele Tabelului

- bgcolor = defineste culoarea tabelului

- width = specifica lungimea tabelului (In pixeli sau procente
din lungimea paginii)
- border = grosimea liniei (in pixeli) ce defineste tabelul si
nconjoara fiecare celula
- cellspacing = spatiu dintre celule (in pixeli)

- cellpadding = spatiu dintre linia celulei si continutul acesteia

(in pixeli)
- align = controleaz poziionarea tabelului in pagina, cu
urmtoarele atribute : left, right, sau center
- background = controleaza culoarea de fond a tabelului, care
poate fi si o imagine
- bordercolor = culoarea liniei din jurul tabelului
- bordercolorlight = culoarea luminoasa folosita de doua linii
din cele patru care nconjoara tabelul
- bordercolordark = culoarea ntunecata folosita de doua linii
din cele patru care nconjoara tabelul

Sub-titlu tabelului
- Sub-titlu tabelului "caption" permite specificarea unei linii de
text care va aparea deasupra sau sub tabel, acest lucru este definit
de atributul "align" care poate lua
valorile: top (deasupra) bottom (jos)
Exemplu:
<table border="1" cellpadding="2">
<caption align="bottom">acesta este textul</caption>
<tr>
<th>titlu 1</th>
<th>titlu 2</th>
</tr>
<tr>
<td>linia 2- coloana 1</td>
<td>linia 2- coloana 2</td>
</tr>
</table>

- In pagina web apare asa:

titlu 1
linia 2- coloana 1

titlu 2
linia 2- coloana 2
acesta este textul

3. Atributele specifi ce elementelor pentru titlu si coloane

- colspan = specifica cat de multe coloane ale tabelului aceasta

celula va inlocui
- rowspan = specifica cat de multe randuri ale tabelului
aceasta celula va inlocui
- align = alinierea datelor celulei pe orizontala (left,
right sau center)
- valign = alinierea datelor celulei pe verticala (top,
middle sau bottom)
- background = controleaza culoarea de fond a celulei, care
poate fi si o imagine
- bgcolor = defineste culoarea celulei (dar nu imagine)
- width = specifica lungimea celulei (In pixeli sau procente din
lungimea paginii)
- height = specifica inaltimea celulei (In pixeli sau procente din
inaltimea paginii)

in urmatorul exemplu puteti vedea rezultatul folosirii atributelor:

"colspan" "rowspan" si "bgcolor"
<table border="1" cellpadding="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>
<tr>
<td rowspan="2">linia 3- coloana 1</td>
<td>linia 3- coloana 2</td>
</tr>
<tr>
<td bgcolor="#adadff">linia 4- coloana 2 - colorat</td>

</tr>
</table>

- In pagina web apare asa:

titlu 1

titlu 2

linia 2- coloana 1
linia 3- coloana 2
linia 3- coloana 1
linia 4- coloana 2 - colorat
acesta este textul

Exersati singuri si alte exemple de tabele, cu mai multe randuri si

coloane.

Utilizarea cadrelor
Cadrele, sau frame-uri, sunt folosite pentru impartirea ferestrei
browser-ului astfel incat sa fie afisate mai multe pagini in aceeasi
fereastra de browser.
Un frame (cadru) este o parte din suprafata ferestrei browserului.
Fiecare frame prezinta n interior un document propriu (in general
un document HTML). De exemplu puteti creea doua cadre intr-o
fereastra, in primul cadru puteti incarca un document HTML (ex.
doc1.htm) iar in al doilea cadru un alt document HTML, de la alta
adresa (ex. doc2.htm)
Dupa cum puteti vedea in imaginea de mai jos.

Pentru crearea de frame-uri se pot folosi urmatoarele etichete HTML:

<frameset> si <frame> sau <iframe>
1. Confi gurarea cadrelor

Pentru inceput se adauga un

element <FRAMESET> ... </FRAMESET> in interiorul
documentului HTML, n sectiunea HEAD.
<FRAMESET> determina cat din spaiul ferestrei este atribuit
fiecrui cadru, folosind atributele ROWS sau COLS care impart
ecranul in Linii sau Coloane.
Acesta va conine elemente <FRAME>, cate unul pentru fiecare
divizare a ferestrei din browser.

ROWS
Determina numarul de linii si marimea cadrelor care vor fi
asezate in linie, ncepnd de sus.
Pot fi folosite urmatoarele valori:
o - pixeli absoluti ; ex : "360,120"
- procente din inaltimea ecranului ; ex : "75%,25%"
- valori proportionale, folosind (*). Acesta putnd fi
combinat cu procente sau pixeli. Ex : "120,*" sau "30%,*"

COLS
Determina numarul de coloane si marimea cadrelor care vor fi
asezate pe coloane, ncepnd din stanga.
Pot fi folosite urmatoarele valori:
o - pixeli absoluti ; ex : "380,120"
- procente din lungimea ecranului ; ex : "33%,77%"
- valori proportionale, folosind (*). Acesta putnd fi
combinat cu procente sau pixeli. Ex : "120,*" sau "30%,*"

Alte atribute ale elementului <FRAMESET>

FRAMEBORDER - Stabileste afisarea sau nu a unei borduri in
jurul cadrelor. Posibile valori: 0, 1 sau YES, NO.
FRAMESPACING - Acest atribut este specificat in pixeli. Daca
FRAMEBORDER este 0 atunci si acesta trebuie sa aiba valoarea
0
BORDER - Marginea cadrelor. Valori posibile: 0 sau 1
BORDERCOLOR - Acest atribut permite sa alegi culoarea
bordurii.

Elementul <FRAME>
Acest element defineste un singur cadru , este scris in interiorul
elementului <FRAMESET>
Pentru fiecare cadru trebuie scris cate un element <FRAME>
Acesta are urmatoarele atribute:
o SRC - Aici trebuie scrisa adresa si numele paginii folosite
pentru cadru
o NAME - Aici trebuie scris numele de identificare al cadrului.
o MARGINWIDTH - Atribut optional, valoare in pixeli.
Determina spatiul orizontal dintre continutul cadrului si
marginea acestuia
o MARGINHEIGHT - Atribut optional, valoare in pixeli.
Determina spatiul vertical dintre continutul cadrului si
marginea acestuia.
o SCROLLING - Afiseaza un Scroll Bar in cadru. Valori
posibile: YES (permite afisarea Scroll Bar-ului), NO (nu va fi
prezentat nici un Scroll Bar) si AUTO (browser-ul va decide
daca este nevoie de Scroll Bar. Aceasta valoare este cea
mai indicata)

o NORESIZE - Optional, impiedica utilizatorul sa modifice

marimea cadrului, prin selectarea marginii acestuia
si mutarea in stnga sau dreapta ori sus sau jos.

Mai jos puteti vedea cum poate fi creata o pagina HTML care sa
contina doua cadre, cel din stnga ocupnd 23% din spatiul 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 combinatie de

linii si coloane.
In acest caz, un al doilea element "<FRAMESET>" va fi scris in locul
elementului "<FRAME>" care descrie a doua linie. Al doilea element
<FRAMESET> va divide spatiul ramas in doua coloane. Pentru
aceasta, al doilea element "<FRAMESET>" trebuie urmat de inca
doua elemente "<FRAME>"
- Pentru o mai buna intelegere puteti studia exemplu de mai jos,
care creaza o pagina ce contine 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

Cand sunt create link-uri care sunt folosite pentru a deschide

pagini in cadre, este nevoie de specificarea unui atribut in eticheta
de link "<a>" numit target, acesta spune browser-ului in ce cadru
sa deschida pagina.
Atributul target foloseste ca valoare textul din atributul NAME al
elementului FRAME in care se va deschide noua pagina.
De exemplu, daca avem un link in Meniu.htm care vrem sa
deschid pagina Doc3.htm in spaiul in care se afla celalat cadru,
de exempluContinut.htm; codul HTML pentru link va arata astfel
in Meniu.htm:
<a href="Doc3.htm" target="numele cadrului
Continut.htm"> Numele link-ului </a>

- daca nu se specifica atributul TARGET , pagina se va deschide in

cadrul curent
- atributul TARGET trebuie sa aiba acelasi nume specificat in codul
HTML, ca si atributul NAME din FRAME-ul in care se doreste afisarea
paginii.
Special Target:
Sunt 4 nume speciale de TARGET, care nu pot fi asociate cu
atributul NAME. Fiecare are o functie speciala.
target="_top"
o - acesta va ncarca link-ul in toata fereastra browser-ului,
disparnd astfel cadrele.

target="_blank"
o - acesta va ncarca link-ul intr-o noua fereastra de browser,
astfel ramanand deschisa si vechea fereastra.

target="_self"

o - acesta va ncarca link-ul in aceeasi fereastra de unde a

fost actionat.

target="_parent"
o - cadrul "_parent" este cadrul anterior de la care a fost
deschis noul cadru, daca acesta nu exista atunci link-ul se
va deschide in actuala fereastra de browser.
3. Adaugarea cadrelor iframe

Pentru crearea unui cadru cu "<iframe>" puteti folosi, ca

exemplu, urmatoarea sintaxa (aceasta se adauca in sectiunea
BODY, in locul unde doriti sa apara frame-ul):
<iframe src="url_pagina" width="600" height="200"
align="center" scrolling="yes" frameborder="0"
name="nume_frame"> </iframe>

- Unde "iframe" este elementul principal care indica adaugarea

unui frame in pagina.
- "url_pagina" e adresa paginii care va fi incarcata in iframe,
"width" si "height" reprezinta lungimea respectiv inaltimea
cadrului (exprimata in procente sau pixeli), "scrolling" reprezinta
permisiunea de derulare a paginii din cadru (yes sau no),
"frameborder" specifica daca va fi sau nu afisata o margine
(bordura) pentru cadru (1=da, 0=nu), iar "nume_frame" este
numele cadrului (necesar pentru atributul "TARGET" in link-uri sau
cand frame-ul este folosit de JavaScript).

Crearea formularelor
De cele mai multe ori formularele HTML sunt create pentru a fi
folosite impreuna cu alte programe si scripturi web, cum sunt PHP,
JavaScript si altele.
1. Tag-ul FORM

Pentru a crea un formular in HTTML se folosete

elementul <form> ... </form>, in cadrul acestuia se vor adauga

celelalte elemente specifice.

Elementul <form> ... </form> nu contine atribute pentru format,
foloseste insa urmatoarele atribute:
action - aici se scrie adresa URL a unui script de pe server (de
obicei PHP sau CGI), program care trebuie sa accepte datele din
FORM , le proceseaza si trimite napoi raspunsul la browser.
method - aici putem scrie get , sau post. Aceste valori specifica
ce metoda HTTP va fi folosita pentru a trimite continutul
formularului la server.
enctye - determina mecanismul folosit pentru a codifica
continutul transmis din formular.
name - Este numele formularului, folosit de scripturi VB (Visula
Basic) sau JavaSript.
target - Este tinta cadrului (frame) unde pagina va fi vizualizata,
dupa transmiterea datelor din form.
2. Elementele de formular

In continuare sunt prezentate restul elementelor de formular care

sunt folosite pentru a crea diferite campuri, casete, butoane in
pagina web, necesare pentru a aduna datele care vor fi trimise la
aplicatie pe server.
Cele mai multe se creaza prin atributul type al
elementului <input> ... </input>

Proprietatile 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 si

care sunt trimise, impreuna cu numele, catre scripturi (PHP,
CGI, JavaScript)
size - specifica numarul de caractere care dau lungimea zonei de
text
maxlength - numarul maxim de caractere acceptate
checked - specifica daca un buton sau alta forma va fi initial
selectata (bifata).
readonly - folosit pentru campuri de tip text, impedica
modificarea valorii (textului) din acel camp
disabled - impedica folosirea campului care are aceasta
proprietate. Va fi vizibil dar nu va putea fi folosit, datele
acestuia nu vor fi trimise din formular la vreun script.

Casete de text
- este folosit pentru a crea in pagina un camp pentru text (cu o
singura linie).
- Codul este <input type="text"></input>
In browser va apare:

- Acest element foloseste urmatoarele atribute:

o type - text
o name - numele casutei de text, folosit de scriptul la care
sunt trimise datele
o value - va reprezenta propriul context ca valoare aleasa.
Un sir de text care apare in casuta de text
o size - specifica numarul de caractere care dau lungimea
casutei de text (default 20)

o maxlength - numarul maxim de caractere acceptate sa fie

adaugate de utilizator

Camp textarea
- "textarea" este un element ce creaza un camp in pagina, in care
utilizatorul poate adauga mai multe linii de text.
- Codul este <textarea></textarea>
In browser va apare:

- Acest element foloseste urmatoarele atribute:

o name - numele campului de text, folosit de scriptul la care
sunt trimise datele
o rows - numarul de linii a zonei de text
o cols - numarul de coloane a zonei de text
o wrap - standard este OFF. Dar poate avea valorile :
"VIRTUAL" sau "PHYSICAL", astfel ca textul wraps in
browser sa fie prezentat exact cum este scris de utilizator.

Casete pentru parole

- "password" este folosit pentru a permite adaugarea de parole.
Caracterele adaugate in aceasta caseta nu sunt afisate cu
valoarea lor reala, pentru a nu se vedea parola scrisa.
- Codul este <input type="password"></input>
In browser va apare:

- Acest element foloseste urmatoarele atribute:

o type - password
o name - numele casutei pentru parole, folosit de scriptul la
care sunt trimise datele
o value - de obicei nu este adaugat. Daca este scris, va
reprezenta parola default din acea caseta.
o size - specifica numarul de caractere care dau lungimea
casutei pt. adaugarea parolei (default 20)
o maxlength - numarul maxim de caractere acceptate sa fie
adaugate de utilizator

Casete de formular ascunse

- "hidden" este folosit pentru a adauga in formular date care sa
nu fie vizibile in browser si care sunt trimise la scripturi
impreuna cu celelalte date din formular.
- Codul este <input type="hidden"></input>
- Acest element foloseste urmatoarele atribute:
o type - hidden
o name - numele casutei ascunse, folosit de scriptul la care
sunt trimise datele
o value - valoarea care se doreste sa fie transmisa prin acea
caseta ascunsa.

Check box
- este folosit pentru adaugarea mai multor optiuni pe care
utilizatorul le poate alege (oricate din ele) prin bifarea lor
- Codul este <input type="checkbox"></input>

In browser va apare:

- Acest element foloseste urmatoarele atribute:

o type - checkbox
o name - numele casutei checkbox, folosit de scriptul la care
sunt trimise datele
o value - valoarea casetei checkbox respective, care poate fi
selectata (bifata)
o checked - daca este adaugat acest atribut, caseta
checkbox respectiva este selectata (bifata).

Radio button
- este folosit pentru adaugarea mai multor optiuni dintre care
utilizatorul poate alege una singura
- Codul este <input type="radio"></input>
In browser va apare:

- Acest element foloseste urmatoarele atribute:

o type - radio
o name - numele casutei radio, folosit de scriptul la care
sunt trimise datele
o value - valoarea casetei radio respective, care poate fi
selectata (bifata)
o checked - daca este adaugat acest atribut, caseta radio
respectiva este selectata (bifata).

Casete pentru upload

- "file upload" este folosit pentru a permite utilizatorului sa

incarce alte documente pe serverul web. Aceasta caseta este
insotita 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>
In browser va apare:
- Acest element foloseste urmatoarele atribute:
o type - file
o name - numele casutei upload, folosit de scriptul la care
sunt trimise datele
o size - specifica numarul de caractere care dau lungimea
casutei upload.

Buton simplu
- acesta este folosit cu JavaScript sau VBScript pentru a efectua o
actiune cnd este apasat
- Codul este <input type="button" value="Buton"></input>
In browser va apare:
- Acest element foloseste urmatoarele atribute:
o type - button
o name - numele butonului, necesar pentru a fi folosit de
script
o value - textul care apare pe buton.

Buton Submit

- acest element face ca prin apasarea lui browser-ul sa trimita

numele si valoarea tuturor celorlalte elemente din formular la
scriptul de pe server
- Codul este <input type="submit"
value="Trimite"></input>
In browser va apare:
Trimite

- Acest element foloseste urmatoarele atribute:

o type - submit
o name - numele butonului, poate fi folosit de scriptul la care
se trimit datele
o value - textul care apare pe buton.

Imagine pentru buton Submit

- permite aplicarea unei imagine in locul butonului Submit
standard
- Codul este <input type="image"
src="locatie_imagine"></input>
- Acest element foloseste urmatoarele atribute:
o type - image
o name - numele butonului, poate fi folosit de scriptul la care
se trimit datele
o src - locatia imaginii folosite.

Buton Reset
- permite utilizatorului sa stearga toate datele pe care le-a scris in
celelalte elemente din formular

- Codul este <input type="reset" value="Sterge"></input>

In browser va apare:
Sterge

- Acest element foloseste urmatoarele atribute:

o type - reset
o value - textul care apare pe buton.

Elemente select
- pentru acest element se foloseste tag-ul "<select></select>",
care formeaza o lista, un meniu, cu date ce pot fi selectate.
- Atributete elementului "<select>" sunt:
o name - numele acestui element, necesar pentru a fi folosit
de scriptul la care sunt trimise datele
o size - seteaza inaltimea elementului Select, care reprezinta
si numarul de optiuni din lista care vor fi vizibile initial
o multiple - prezenta acestui atribut specifica faptul ca
utilizatorul poate selecta mai multe optiuni.

- "<select></select>" este folosit impreuna cu elemente

"<option> </option>" care reprezinta lista elementelor ce
sunt adaugate si afisate in lista de selectare.
- <option> </option> foloseste doua atribute:
o selected - cand acesta este adaugat, optiunea respectiva
este selectata cnd pagina web este initial incarcat. Cand
sunt adaugate mai multe optiuni, este indicat folosirea
acestui atribut doar cu una singura.
o value - specifica valoarea variabilei numita in optiunea
respectiva (necesara pt. scriptul care va primi datele).

- sunt doua tipuri de elemente Select, unde diferenta o face

folosirea atributului SIZE
- Cele doua tipuri de elemente Select sunt:

1. Drop Down List (Lista de derulare)

o - Codul este:
<select name="select">
<option>Optiune 1</option>
<option>Optiune 2</option>
</select>
o - unde "name" este atributul care defineste numele acestui
tag SELECT, iar "<option>" impreuna cu "Optiune 1" (si 2)
reprezinta elementele din lista de selectare.
In browser va apare:

2. List Box
o - Codul este:
<select name="select" size="4">
<option>Optiune 1</option>
<option>Optiune 2</option>
</select>
o - unde "name" este atributul care defineste numele acestui
tag SELECT, atributul "size" determina inaltimea
elementului select care determina si numarul de optiuni
vizibile initial, iar "<option>" impreuna cu "Optiune 1" (si
2) reprezinta elementele din lista de selectare.
In browser va apare:

Optiune 1
Optiune 2

- Toate aceste elemente trebuie incadrate in tag-ul

"<form> ... </form>"!

Elemente speciale meta, embed, marquee,

object
Codul HTML contine si anumite elemente speciale, unele folosite
pentru optimizarea paginii in vederea unei cat mai bune indexari in
motoarele de cautare sau altele pentru adaugarea de aplicatii
audio si video ori alte elemente in pagina.
1. Elemente pentru optimizarea indexarii paginii

Aceste elemente de optimizare se adauga in sectiunea HEAD a

documentului HTML.
Cel mai important este tag-ul <title></title>
Alte elemente importante pentru motoarele de cautare sunt cele
META, (numite si "meta tag-uri), acestea au 2 atribute: name (care
determina tipul meta tag-ului) si content (care determina
continutul meta tag-ului).
In continuare sunt prezentate exemple de meta tag-uri care sunt
indicate sa fie adaugate in fiecare pagina HTML:

<meta content="text/html; charset=UTF-8" httpequiv=Content-Type>

- indica browserului ca este un fisier HTML
- charset stabileste tipul de caractere (in general se foloseste ISO8859-1 sau UTF-8), dar exista si altele.

<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.
- textul adaugat cu acest tag pentru descriere are prioritate
inaintea frazelor din continut. (folositi maxim 40, 50 caractere).

<meta name="keywords" content="lista, de cuvinte,

separate, prin, virgula">
- motoarele de cautare tin cont de cuvintele din meta "keywords"
in momentul indexarii site-ului pentru atunci cand sunt afisate
rezultate de cautari. (folositi maxim 15-20 cuvinte).

<meta name="author" content="numele dvs., e-mail, etc">

- acesta nu este neaparat necesar, dar nu strica sa-l folositi. Arata
autorul documentului.

Recomandare: Cuvintele din tag-ul <title> ... </title> este

bine sa se regaseasca si in meta tag-urile "keywords",
"description" cat si in titlurile din continutul paginii.
Un alt meta tag care este cateodata necesar, dar nu are legatura cu
motoarele de cautare, este "Refresh", acesta are urmatoarea forma:
<meta http-equiv="Refresh"
content="4;url=http://www.nume_site/pagina">
- acesta determina browser-ul sa incarce o noua pagina, cea care
este adaugata la url-ul din acest tag
(aicihttp://www.nume_site/pagina), dupa un anumit numar de
secunde (aici 4). Practic, face un redirect.

2. Adaugarea de sunet la o pagina HTML

Pentru a adauga sunet intr-o pagina web, puteti folosi elementele

Exemplu:
<bgsound src="sunet.midi" loop="3" title="titlul melodiei" derlay="5">

2. <embed></embed> - afiseaza o consola pentru sunet, are

urmatoarele atribute:
src - Defineste locatia fisierului audio folosit (midi .au sau wav)
controls - ofera posibilitatea alegerii mai multor controale care
includ: console, console mici, butoane de play si altele
autostart - cand este TRUE sunetul incepe in timp ce sunetul
este descarcat de browser
hidden - cand este TRUE va ascunde controalele, standard este
FALSE
loop - defineste de cate ori se va repeta sunetul
volume - seteaza volumul sunetului (sonorul)
height - inaltimea in pixeli a consolei
width - lungimea in 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 afisarea de imagini

video, care au extensiile ".movs", ".mpeg" sau ".avi", recomandat
este ".movs". Se adauga similar ca si sunetul, la "src" scriti calea
catre fisierul video. Diferenta e ca nu trebuie folosit atributul
"hidden" iar pentru "width" si "height" dimensiunile nu trebuie sa fie
mai mici decat dimensiunile in care este salvat fisierul video.
- Totusi, afisarea de imagini video necesita mai mult timp deoarece
fisierele video au dimensiuni destul de mari.
-- "<embed>" se foloseste si pentru adaugarea de imagini flash (cu
extensia ".swf"), pentru aceasta este incadrat in alt
element, <object> </object>
-- Iata un exemplu de cod prin care puteti adauga imagini flash in
pagina web:
<object width="580" height="400">
<param name="movie" value="fisier.swf">
<embed src="fisier.swf" width="580" height="400">
</embed>
</object>

Unde "width" si "height" sunt dimensiunile cadrului in care este

afisata imaginea flash, iar la atributele "value" si "src" se scrie calea
catre fisierul ".swf" (trebuie scrisa aceeasi cale la ambele atribute).
- Afisarea in pagina a elementelor cu EMBED necesita
folosirea unui plug-in, care de cele mai multe ori, daca
acesta nu este deja instalat, este ceruta automat incarcarea
lui de catre browser.
3. Elemente de animatie text

HTML are un tag special, <marquee> </marquee>, prin care

puteti crea un efect de miscare a unui text (sau imagine) care este
incadrat de a cest element.
Are urmatoarele atribute:

loop - defineste de cate ori se va misca textul

height - inaltimea in pixeli a zonei in care se misca textul
width - lungimea in pixeli a zonei in care se misca textul
bgcolor - culoarea zonei in care se misca textul
direction - directia de miscare (left, right, up, down) - (stanga,
dreapta, sus, jos)
behavior - defineste cum se va misca textul (scroll, slide,
alternate)
scrolldelay - seteaza numarul, in milisecunde, intre refreshuri de
miscare.

Exemplu de miscare pe orizontala

<marquee behavior="alternate" bgcolor="#00ffff" direction="right">Marquee
text</marquee>

In pagina va arata asa:

Iata un alt exemplu unde miscarea se face pe verticala:

<marquee behavior="alternate" bgcolor="#00ffff" direction="up" width="100"
height="100">Marquee text</marquee>

In pagina va arata asa:

- In loc de text poate fi folosit si o imagine, inlocuind textul (aici

"Marquee text") cu tagul "<img> pentru imagine.
4. Includerea unei pagini HTML externe

In afara de modalitatea cu folosirea tag-ului <iframe> pentru

afisarea in pagina web HTML a continutului din alta pagina HTML
Ex.: <iframe src="url_pagina.html" width="600"
height="200" align="center" scrolling="yes"> </iframe>
- exista si o alta solutie, data de tag-ul <object> folosit cu
atributele "data" si "type".
Urmatorul cod HTML este sintaxa generala de afisare intr-o pagina
web a continutului HTML aflat in alta pagina externa:
<object data="adresa_pagina_externa" type ="text/html" width="600"
height="400"> </object>

- Avantajul utilizarii uneia din aceste 2 metode, pentru cei care fac
site-uri doar cu HTML, este faptul ca acelasi continut HTML poate fi
inclus in mai multe pagini din site, fiind scris o singura data. De
exemplu, in cazul unui Meniu ce trebuie afisat in toate paginile siteului; codul acestuia poate fi scris intr-un fisier special ("meniu.html")
apoi, cu una din formulele de mai sus (tag-ul "<iframe>" sau
"<object>") se adauga in fiecare fisier al paginilor, iar la o eventuala
modificare a meniului se va face doar in codul acestuia din
"meniu.html".

Stiluri CSS in HTML

Cu HTML 4.0 au aparut specificatiile pentru modele de stiluri,
cunoscute ca Modele de Stiluri in Cascada (Cascading Style Sheets
- CSS). Acestea ajuta la afisarea grafica si incadrarea continutului in
pagina.
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 etichete HTML,

folosind proprietati si valori specifice codului CSS, unele din ele
sunt prezentate in tabelul de jos al paginii.
Modelele de stiluri pot fi aplicate in mai multe moduri:

1. Intern - direct in eticheta HTML

- Pentru adaugarea unui STYLE intern la un element se foloseste
atributul style urmat de proprietati si valori, folosind
urmatoarea sintaxa:
o <element style="proprietate:valoare;
proprietate:valoare;"></element>

- Exemplu:
<h4 style="color:#ff1111;">Exemplu h4</h4>

In pagina va apare
Exemplu h4

2. In antetul (header-ul) fisierului

- In acest caz se adauga in sectiunea HEAD a documentului HTML
urmatoarea sintaxa <style type="text/css"> ... </style>.
Aceasta spune browser-ului ca sunt adaugate elemente de stil
CSS.
- Aceasta metoda este utila cand se doreste folosirea acelorasi
stiluri pentru mai multe elemente din pagina astfel sunt scrise o
singura data si nu la fiecare element.
- Proprietatile si valorile de sti CSS se introdul in acest element
STYLE, dupa cum puteti vedea in exemplul urmator:
<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 pagina vor avea
culoarea albastra si vor fi subliniate.
- Se foloseste (optional) "" pentru browserele care nu
recunosc elementul "<style>" si astfel il ignora.

3. Extern
- Aici proprietatile si valorile pentru diverse stiluri sunt specificate
intr-un fisier extern special, de obicei cu extensia "css" (pe care
il putem construi cu un editor de simplu texte gen Notepad).
- Avantajul folosirii fisierelor externe CSS este faptul ca aceleasi
coduri de stil pot fi folosite de mai multe pagini din site, chiar
tot site-ul, fiind scrise o singura data. In plus ajuta la micsorarea
ca marime (in bytes) a documentului HTML care astfel se
incarca mai repede.
- In fisierul extern CSS se scriu direct elementele cu proprietatile
si valorile dorite, NU se mai adauga eticheta "style".
Exemplu de model pentru creare unui fisier ".css" :
Se scrie intr-o pagina noua, deschisa cu NotePad, urmatoarele, si
se salveaza fisierul 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;
}
p{
font-weight: normal;
font-size: 11pt;
line-height: 12pt;
text-indent: 20px;
font-family: Arial;
}

Pentru a adauga acest stil CSS intr-o pagina web, adaugati in

sectiunea HEAD a documentului HTML care va folosi acel fisier
cu stiluri, (intre <head> ... </head>) urmatoarea comanda:
o <link href="fisier.css" rel="stylesheet"
type="text/css">

- unde la "href" se scrie calea si numele fisierului css folosit.

Se poate face chiar ca un anumit stil sa poata fi aplicat numai unei

singure etichete HTML, iar altul sa poata fi aplicat mai multor
etichete HTML de tipuri diferite. Pentru aceasta se foloseste
atributul id sau class in interiorul etichetelor HTML la care vrem sa
aplicam un anumit stil.
Diferenta dintre id si class este faptul ca se poate folosi acelasi
atribut "class" pentru mai multe elemente HTML, pe cand acelasi
"id" se foloseste numai pentru un singur element HTML.
Exemplu pentru "class"
<html>
<head>
<title>Titlul</title>
<style type="text/css">
<!-.cuvant {
color:#1111fe;
dext-decoration:underline;
}
-->
</style>
</head>
<body>
<h2 class="cuvant">Text ...</h2>
<h3 class="cuvant">Alt text ... </h3>
</body>
</html>

- In exemplu de sus, stilul creat poate fi folosit doar de elementele

unde vom adauga comanda class="cuvant", celelalte elemente
nefiind afectate.
Important: selectorul (aici "cuvant") in STYLE trebuie sa
inceapa cu punct (.)

Exemplu pentru "id"

<html>
<head>
<title>Titlul</title>
<style type="text/css">
<!-#idh {
color:#fe1111;

dext-decoration:overline;
text-align:center;
}
-->
</style>
</head>
<body>
<h2 id="idh">Text ...</h2>
<h2>Alt text ... </h2>
</body>
</html>

- In acest exemplu, stilul creat pentru "idh" va fi folosit doar pentru

primul element "h2" care contine 'id="idh"'
Important: Pentru stilurile definite de ID, selectorul (aici
"idh") trebuie sa inceapa cu #.

Incercati singuri aceste exemple pentru a vedea rezultatul.

In tabelul de mai jos sunt cateva atribute (sau proprietati) care pot fi
modificate cu STYLE
Atribut

Descriere

Valori

backgroun imagini sau culori de

d
fundal

URL-ul (imaginii) sau culori

date prin nume sau valoare
RGB

Color

culoarea textului

nume sau valoare RGB

fontfamily

tipul fontului

Numele fontului sau al

familiei de fonturi

font-size

dimensiunea fontului

data in puncte(pt), inch(in),

centimetri(cm), pixeli(px)

font-style text cursiv

normal, italic

fontweight

extra-light, light, demi-light,

medium, demi-bold, bold,

grosimea fontului

extra-bold
distanta dintre liniile de
line-height
baza ale randurilor

data in puncte(pt), inch(in),

centimetri(cm), pixeli(px),
procent(%)

marginleft

distanta fata de marginea data in puncte(pt), inch(in),

din stanga a paginii
centimetri(cm), pixeli(px)

marginright

distanta fata de marginea data in puncte(pt), inch(in),

din dreapta a paginii
centimetri(cm), pixeli(px)

margintop

distanta fata de textul

data in puncte(pt), inch(in),
precedent sau fata de
centimetri(cm), pixeli(px)
marginea de sus a paginii

text-align alinierea textului

left(stanga), center(centru),
right(dreapta), justify

textevidentierea textului
decoration

none(nimic),
underline(subliniat),
italic(cursiv), linethrough(taiat)

textindent

distanta primului rand fata data in puncte(pt), inch(in),

de marginea din stanga
centimetri(cm), pixeli(px)

borderstyle

tipul chenarului

none, groove, dotted,

dashed, solid, double, ridge,
inset, outset

borderwidth

grosimea chenarului

data in puncte(pt), inch(in),

centimetri(cm), pixeli(px)

bordercolor

culoarea chenarului

nume sau valoare RGB

72 pt=1 inch = 25,4 mm;

un font de dimensiunea 13pt inseamna ca sunt 13 puncte intre
partea superioara a literei N sau h si partea inferioara a literei y sau
j
- Pentru aplicarea unui stil css asupra unei portiuni dintr-un text, se
foloseste eticheta <span> </span>, ca in exemplu urmator:
O fraza <span class="cls"> cu orice text</span> si caractere.

- in acest exemplu se pot aplica elemente de stil css clasei (.cls)

care vor afecta doar portiunea de text inclusa intre tag-ul "<span>".

Pentru mai multe informatii despre lucru cu stiluri CSS, studiati lectiile de la Curs
CSS.

DIV si SPAN
Tag-urile <div></div> si <span></span> nu au efecte
importante daca sunt folosite singure.
- Tag-ul DIV creaza sectiuni de blocuri in pagina, al caror forma si
grafica de continut pot fi manipulate pentru fiecare separat. Are
doar un singur atribut HTML, align (pt. aliniere pe orizontala) care
poate avea urmatoarele
valori: left (stanga), right (dreapta), center (centru), justify(dista
nta textului fata de margini egala).
- Tag-ul SPAN creaza posibilitatea modificarii separate a unei
portiunii dintr-un context, putand fi folosit si ca o "classa" cu CSS.
Singur nu are nici un efect vizual poropriu si nu foloseste nici un
atribut HTML special.
Chiar daca folosite singure, DIV si SPAN nu au nici un efect major,
in combinatie cu CSS pot crea aspecte grafice importante. Pentru

aceasta, ambele pot folosi atributul style (cu proprietati 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 in combinatie cu proprietati CSS poate
crea efecte grafice deosebite, iar in interiorul lui pot fi incluse
oricare elemente HTML: tabele, formulare, marcatori, linii sau alte
DIV-uri. Cadrul in care acestea sunt adaugate poate avea propriul
fundal (background), lungime, inaltime si margini cu diferite linii.
Iata un exemplu in care avem 2 div-uri, unul contine un formular iar
celalalt o lista "<ul></ul>", fiecare DIV cu proria 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>
<li>Linie 3</li>
</ul>
</div>

- In atributul "style" sunt specificate proprietatile CSS care stabilesc

aspectul grafic al fiecarui DIV (lungime in pixeli, fundal si bordura).
Acest cod va afisa intr-o pagina web urmatorul rezultat:

Nume:
E-mail:

Trimite

Alt DIV
Linie 1
Linie 2
Linie 3

Un alt aspect important este si faptul ca putem pozitiona continutul

din interiorul tag-ului <div> </div> oriunde in pagina, folosind
proprietati CSS precum:
position - care poate lua valorile: static, relative,
fixed sau absolute (pt. mai multe detalii vezi Pozitionare CSS).
margin - care stabileste distanta dintre marginea cadrului
sectiunii (blocul) DIV si elementele din jurul lui (pt. mai multe
detalii veziMargini si chenare CSS).

Iata un exemplu in care, prin folosirea mai multor DIV-uri pozitionate

suprapus, putem afisa in pagina un titlu cu aspect grafic deosebit.
Codul este urmatorul:
<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>

In acest exemplu avem un prim DIV cu atributul "style" in care avem

o proprietate de pozitionare relativa (pt. a pozitiona toate celelalte
elemente pe care el le incadreaza dupa contextul scris anterior) si o
alta proprietate pentru marimea textului. In interiorul acestui DIV
avem alte 3 div-uri, pozitionate absolut si care incadreaza fiecare
cate un text identic. Prin pozitionarea absoluta div-urile se suprapun,
la o distanta stabilita de proprietatile "margin-top" si "margin-left",
iar prin culoare diferita (cu proprietatea "color") data textului din
fiecare "div" va apare in pagina web urmatorul rezultat:

- Pentru a folosi tag-urile DIV eficient si cu rezultate

deosebite este necesar sa cunoasteti proprietatile CSS de
baza (pentru fonturi, pozitionare, margini, borduri,
background) pe care le puteti invata la Cursul CSS din acest
site.
2. Tag-ul SPAN

Cu tag-ul <span></span> puteti adauga stiluri grafice unei

anumite portiuni dintr-un context. Pentru aceasta trebuie folosit
impreuna cu proprietati CSS care pot fi adaugate printr-un atribut
"style" in interiorul etichetei "<span>" (sau in foi de stil).
Pentru a intelege mai bine, iata un exemplu in care se scoate in
evidenta anumite cuvinte dintr-un text. Pentru aceasta incadram
cuvintele respective intr-un tag SPAN caruia ii adaugam
proprietatile dorite, ca in exemplul urmator.
Aceasta este o lectie din <span style="background:#88fe88; fontweight:bold;">Cursul HTML</span> de pe MarPlo.net.

- Am adaugat portiunea din context (aici textul "Curs HTML") intr-un

tag SPAN pentru a-i putea aplica proprietatile grafice dorite si care
nu afecteaza restul continutului.
- Astfel, prin proprietatile adaugate in "style"

(background:#88fe88; si font-weight:bold;), in pagina web va fi

afisat textul in felul urmator:
Aceasta este o lectie din Cursul HTML de pe MarPlo.net.
Tag-ul SPAN poate fi folosit si ca o classa pentru CSS. Astfel,
proprietatile adaugate elementului "span" intr-o foaie de stil vor fi
transferate tuturor elementelor din pagina care sunt incadrate in
tag-uri "<span></span>".
Iata un exemplu
<html>
<head>
<title>Titlul</title>
<style type="text/css">
span {
border:2px solid red;
padding:1px;
color:#1111fe;
}
</style>
</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>

- Observati cum a fost adaugat elementul "span" in tag-ul "<style>

</style>" din sectiunea HEAD a codului HTML. Acest element face
referire la toate tag-urile "<span></span>" din document si le
transmite aceleasi proprietati.
- Acest cod va afisa intr-o pagina web urmatorul rezultat:

Exemplu de text cu eticheta SPAN in interiorul frazei.

Linia 1
Linie 2, in span
Linia 3
Linie 4, in span
Linia 5
3. Diferenta dintre DIV si SPAN

- Diferenta dintre DIV si SPAN este faptul ca DIV incadreaza o

sectiune din document sub forma unui bloc iar SPAN incadreaza o
portiune din context sub forma de linii.
Iata un exemplu din care se poate intelege mai bine, atribuim
aceeasi proprietate grafica (bordura rosie) unui tag DIV si 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>
se termina cu linia a treia.
</span>

- In pagina web va apare

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,
se termina cu linia a treia.
- Observati diferenta, modul in care este afisata bordura. Pentru DIV
aceasta incadreaza exteriorul sectiunii (blocul) div-ului, iar pentru
SPAN bordura este afisata pe fiecare linie.
- De aceea este indicata folosirea tag-ului "<span></span>" pentru
continut din interiorul unei linii.

- Cand aveti mai multe

elemente <div></div> si <span></span> in pagina, este
indicat folosirea atributului "id" sau "class". Acestora le acordati
proprietati CSS o singura data in sectiunea HEAD sau intr-un fisier
CSS extern. Este mai eficient decat sa scrieti in fiecare "<div>" si
"<span>" cate un atribut "style".
Pentru mai multe detalii despre "ID" si "CLASS" folosite cu CSS,
puteti studia prima lectie de la Cursul CSS, Scriere cod CSS.

De la HTML la XHTML
Explicatiile din acest tutorial sunt pentru cei care cunosc deja
limbajul HTML, prezentat detaliat in lectiile si tutorialele precedente
din acest curs.
XHTML (eXtensible HyperText Markup Language) are acelasi rol si
capacitati ca HTML, fiind o varianta avansata a acestuia, dar cu o
sintaxa putin diferita, mai stricta.
XHTML este un inlocuitor modern al HTML-ului, o combinatie intre
HTML si XML, fiind aproape identic cu HTML 4.01.
Principala diferenta ce trebuie avuta in vedere la XHTML fata de
HTML este la sintaxa acestuia.

Daca stiti deja limbajul HTML, respectand regulile de sintaxa

XHTML, prezentate mai jos, se poate spune ca stiti si XHTML.
Reguli de sintaxa XHTML

1. - Pentru ca un document XHTML sa fie considerat valid, acesta

trebuie sa aibe la inceput (prima linie) o declaratie !DOCTYPE, un
DTD (Document Type Definitions) ce contine regulile standard ale
elementelor din pagina.
Sunt 3 tipuri de DTD ce pot fi
folosite: Strict, Transitional si Frameset. Iata cod-ul specifc fiecaruia,
ce trebuie sccris in prima linie din pagina:
Strict - folosit pentru o sinntaxa stricta, fara vreun element ce nu
e specific XHTML.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd";>

Transitional - este tipul cel mai comun si indicat. Acesta permite

in pagina si elemente HTML ce nu sunt stricte XHTML.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Frameset - mai putin folosit, acest tip e pentru cazuri cand in

pagina se folosesc frame-uri.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd";>

Dupa una din aceste declaratii se adauga codul pentru structura

documentului XHTML, cum se vede in urmatorul exemplu (structura
standard ce trebuie sa o aibe o pagina de site XHTML):
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ro">
<head>

<meta http-equiv="content-type" content="text/html; charset=utf-8" />

<title>Titlul paginii</title>
<meta name="description" content="Descrierea paginii" />
<meta name="keywords" content="cuvinte, principale, din, pagina" />
</head>
<body>
Continutul paginii, care apare in fereastra navigatorului web.
</body>
</html>

2. - Toate elementele si atributele trebuie scrise cu litera mica.

Corect: <div>

Incorect: <DIV>

Corect: <tag atribut="valoare">

Incorect: <tag Atribut="valoare">

3. - Valorile tuturor atributelor trebuie scrise intre ghilimele.

Corect: <tag width="80">
Incorect: <tag width=80>

4. - Spre deosebire de HTML, in care elementele sunt inchise cu un

al doilea tag (identic) de inchidere, iar unele nici nu trebuie sa aibe
inchidere, in XHTML toate elementele trebuie inchise si exista taguri specifice care au inchidere singulara, in acelasi tag.
In XHTML
In HTML
<meta ... />

<br />

<br>

<hr />

<hr>

<input>

<img ... />

- Celelalte, precum <p> </p>, <div> </div>, <span> </span>, ...

etc. sunt la fel.
5. - La inchiderea tag-urilor trebuie sa se respecte ordinea simetrica
de deschidere.
Corect: <b>Ceva <i>altceva</i></b>
Incorect: <b>Ceva <i>altceva</b></i>

6. - Toate atributele trebuie sa fie insotite de o valoare. In HTML fiind

atribute, precum "checked", care sunt scrise fara vreo valoare. Iata
cateva din cele mai folosite:
In XHTML
In HTML
checked="checked"

checked

declare="declare"

declare

readonly="readonly"

readonly

disabled="disabled"

disabled

selected="selected"

selected

nowrap="nowrap"

nowrap

noresize="noresize"

noresize

7. - Atributul name din tag-urile <a> si <map> a fost inlocuit cu id.

XHTML - Tag-uri si atributele lor

In aceasta pagina gasiti o lista, clasificata pe grupe de elemente
cu tag-urile XHTML si atributele ce po fi folosite pentru fiecare
TAG.
Aceasta lista poate fi de folos mai ales cand doriti sa creati pagini

web valide XHTML (Transitional), oferind o referinta la ce atribute

pot fi folosite cu un anume TAG.
- Structura
<html> </html> - Tag-ul radacina, ce contine toate celelalte tag-uri si indica browserului ca acesta este inceputul /sfarsitul documentului (X)HTML.

xmlns
dir
lang
xml:lang
<head> </head> - Contine meta informatii (meta-tags), tag-ul "<title> </title>" si
alte tag-uri pt. scripturi si stiluri CSS. Toate acestea, cu exceptia Titlului, nu sunt
afisate de navigatorul web.

xml:lang
profile
<body> </body> - In acest tag se adauga continutul ce va fi afisat in pagina web.
Acest continut poate fi alcatuit si din alte tag-uri, prezentate in continuare.

class
id
style
title
onmousedown
onmouseover
onkeypress
onkeyup
onmouseup
onload

- Tag-uri ce pot fi incluse in zona <head>

<title> </title> - Contine Titlul ce va fi afisat in bara de sus a browser-ului.

xml:lang
<meta /> - Adauga meta informatii despre document, precum: descriere, cuvinte
cheie, autor, si altele.

name
content
http-equiv
xml:lang
scheme
<link /> - Este folosit in tag-ul <head> pentru a face legatura cu (sau a include) o
resursa externa, in general CSS (Cascading Style Sheet).

class
id
style
title
href
xml:lang
hreflang
charset
type
rel
rev
media
<style> </style> - Este folosit pentru a defini proprietati de stil CSS pentru
elementele din pagina.

type
media
dir
title
lang
xml:lang

- Text
<span> </span> - O sectiune in document, fara linie noua la inceput si sfarsit. Singur
nu face nimic, de aceea este adesea folosit cu un "id" sau "class" pentru ca sa-i fie
aplicate proprietati CSS.

class
id
style
title
xml:lang
<div> </div> - O sectiune in document, un cadru cu linie noua inainte si dupa el.
Singur nu face nimic, de aceea este adesea folosit cu un "id" sau "class" pentru ca sa-i
fie aplicate proprietati CSS.

class
id
style
title
xml:lang
<p> </p> - Un paragraf cu o linie noua in plus inainte si dupa el.

class
id

style
title
xml:lang
<h1> </h1>, <h2> </h2>, <h3> </h3>, <h4> </h4>, <h5> </h5> si <h6>
</h6> - Folosit in general pentru titluri si sub-titluri in pagina web. Textul apare
ingrosat si mare pt. "<h1>", descrescand treptat pana la "<h6>".

class
id
style
title
xml:lang
<br /> - Adauga o linie noua dupa el.

class
id
style
title
<blockquote> </blockquote> - Acest Tag poate fi folosit pentru citate /fraze lungi.
Cadrul definit de acesta lasa un anumit spatiu in exterior (stanga si dreapta).

class
id
style
title
xml:lang
cite
<q> </q> - In acest tag se adauga de obicei fraze scurte, citate, ce vor fi afisate intre
ghilimele.

class
id
style
title
xml:lang
cite
<code> </code> - Poate fi folosit pentru a prezenta coduri de program, textul fiind
afisat distinct pt. acest tip.

class
id
style
title
xml:lang
<u> </u> - Afiseaza textul subliniat.

class
id
style
title
xml:lang
<i> </i> - Afiseaza textul inclinat.

class
id
style
title

xml:lang
<b> </b> - Afiseaza textul ingrosat.

class
id
style
title
xml:lang
<strong> </strong> - Afiseaza textul ingrosat (similar cu <b>).

class
id
style
title
xml:lang
<em> </em> - Afiseaza textul inclinat (similar cu <i>).

class
id
style
title
xml:lang
<sup> </sup> - Afiseaza textul in partea de sus a liniei randului, si mai mic.

class
id
style
title

xml:lang
<sub> </sub> - Afiseaza textul in partea de jos a liniei randului, si mai mic.

class
id
style
title
xml:lang
<a> </a> - Creaza o legatura catre alta pagina web sau zona din pagina curenta (link
intern).

class
id
style
title
xml:lang
accesskey
charset
type
href
hreflang
onblur
rev
rel
shape
coords

tabindex
onfocus
onclick

- Liste
<ol> </ol> - Tag folosit pentru afisarea unei liste ordonate, numerotate.

class
id
style
title
xml:lang
<ul> </ul> - Tag utilizat pentru afisarea unei liste neordonate numeric, ci cu simboluri
gen: disc, cerc, patrat.

class
id
style
title
xml:lang
<li> </li> - Defineste un element in liste <ol> sau <ul>, fiind adaugat in cadrul
acestora.

class
id
style
title
xml:lang
<dl> </dl> - Creaza o lista de definitii. Trebuie sa contina tag-urile <dt> si <dd>.

class
id
style
title
xml:lang
<dt> </dt> - Defineste un termen pentru lista de definitii.

class
id
style
title
xml:lang
<dd> </dd> - Se adauga in cadrul tag-ului <dt> si prezinta lista de definitii pentru
termenul definit de acel tag.

class
id
style
title
xml:lang

- Obiecte
<object> </object> - Folosit pentru a include in pagina elemente multimedia.

class
id
style
title

xml:lang
usemap
name
height
width
classid
codebase
data
type
codetype
standby
tabindex
archive
<param /> - Este adaugat in cadrul tag-ului <object> si e folosit pentru a trimite
parametri la obiectul respectiv, inclus in pagina XHTML.

value
type
valuetype
id
name

- Tabele
<table> </table> - Defineste un tabel in care pot fi adaugate randuri, coloane, titluri,
celule de tabel.

class
id

style
title
xml:lang
border
align
summary
width
dellpadding
cellspacing
frame
rules
<thead> </thead> - Defineste zona de Header (Antet) a tabelului, unde se pot
include linii si coloane.

class
id
style
title
xml:lang
char
charoff
align
valign
<tfoot> </tfoot> - Defineste zona de subsol a tabelului, unde se pot include linii si
coloane.

class

id
style
title
xml:lang
char
charoff
align
valign
<tbody> </tbody> - Defineste corpul tabelului, unde se pot include linii si coloane.

class
id
style
title
xml:lang
char
charoff
align
valign
<tr> </tr> - Creaza o linie noua in tabel, in care se includ coloane.

class
id
style
title
xml:lang

char
charoff
align
valign
<th> </th> - Se foloseste pt. celule cu titlu pentru coloane. Afiseaza un scris mai
ingrosat.

class
id
style
title
xml:lang
axis
abbr
headers
rowspan
colspan
scope
char
charoff
align
valign
<td> </td> - Se foloseste pt. a crea coloane si celule in randurile tabelului. Trebuie
adaugat in cadrul tag-ului <tr>.

class
id

style
title
xml:lang
axis
abbr
headers
rowspan
colspan
scope
char
charoff
align
valign
<caption> </caption> - Defineste un titlu pentru tabel. Acest tag trebuie adaugat
imediat dupa eticheta <table> si poate fi adaugat doar unul singur.

class
id
style
title
xml:lang

- Formular
<form> </form> - Incepe crearea unui formular in care pot fi incluse diferite casute
si butoane.

class
id

style
title
xml:lang
action
enctype
method
onsubmit
onreset
accept
accept-charset
<label /> - Defineste o eticheta ce va corespunde unei casute de formular a carui "id"
e adaugat in atributul "for". Cand se da click pe textul din eticheta sa, comuta controlul
la acea casuta de formular.

class
id
style
title
xml:lang
for
accesskey
onfocus
onblur
<input /> - Adauga o casuta in formular, specificata la atributul "type".

class
id

style
title
xml:lang
name
value
checked
disabled
readonly
size
maxlenght
src
alt
usemap
tabindex
accesskey
accept
onfocus
onblur
onselect
onchange
<select> </select> - Creaza o lista de selectare optiuni. Aceste optiuni sunt
adaugate cu tag-ul <option>.

class
id

style
title
xml:lang
name
disabled
multiple
size
tabindex
onfocus
onblur
onchange
<option> </option> - Adauga lista cu optiuni in tag-ul <select>.

class
id
style
title
xml:lang
disabled
selected
label
value
<textarea> </textarea> - Creaza un camp pentru adaugare de text.

class
id

style
title
xml:lang
name
disabled
rows
cols
readonly
tabindex
accesskey
onfocus
onblur
onchange
onselect

- Alte tag-uri
<img /> - Include o imagine in documentul XHTML.

class
id
style
title
src
alt
height
width

xml:lang
longdesc
usemap
ismap
<script> </script> - Folosit pentru a adauga un script in document, de obicei
JavaScript.

type
src
defer
charset
xml:lang
<noscript> </noscript> - Afiseaza textul din el daca browserul nu stie sa lucreze cu
un anumit script.

class
id
style
title
xml:lang

Tutorial HTML5
Noile caracteristici adaugate in HTML5 sunt bazate pe HTML,
CSS, DOM, si JavaScript; si reduc necesitatea plugin-urilor externe
(precum Flash).
Despre sintaxa HTML5

Sintaxa HTML5 este compatibila cu HTML4 si XHTML.

- Puteti inchide elementele ce au un singur tag (META, BR, HR,
INPUT, IMG) cu slash, <tag />, precum in XHTML; sau puteti sa le

lasati fara sa le adaugati slash, <tag>.

- Puteti folosi litere mici, sau /si litere mari, pentru numele tagurilor si atribute.
Astfel, toate variantele urmatoare sunt valide HTML5:
<meta charset="utf-8">
Sau, inchis cu slash:
<meta charset="utf-8" />
<img src="image.jpg" alt="Text oarecare">
Sau:
<img src="image.jpg" alt="Text oarecare" />
Sau, cu litere mari:
<IMG src="image.jpg" ALT="Text oarecare">
<br>
Sau:
<BR>
Sau:
<br />

- In HTML5 puteti alege sa specificati sau nu atributul type in

elementele <script>, and <style>, acesta a devenit optional:
<script type="text/javascript"><!-// Cod JavaScript
--></script>
Sau:
<script><!-// Cod JavaScript
--></script>
<style type="text/css">

/* Cod CSS */
</style>
Sau:
<style>
/* Cod CSS */
</style>

Toate aceste variante sunt valide in HTML5, dar, ca o buna

practica, este indicat sa folositi sintaxa XHTML; adica sa folositi
litere mici, sa adaugati slash-ul de inchidere, si sa specificati
atributul "type" in tag-urile <script>, si <style>.
Structura HTML5

Doctype in HTML5 e mai simplu:

<!doctype html>

Tag-ul Meta charset e mai simplu:

Div-urile sunt acum folosite petru stil si design, nu mai sunt

necesare pentru structura; HTML5 include mai multe elemente noi
pentru structurare, care ajuta la definirea si organizarea diferitelor
parti in document.
Acestea sunt principalele elemente de structura care sunt folosite
mai des in HTML5:

<header> - e folosit pentru a defini titluri (si sub-titluri), sau

meniu de navigare in site. Poate fi adaugat direct in BODY, sau
in <article>, ori <section>.
- De obicei in acest element se adauga tag-uri H1, H2, Hx, sau
<nav> cu principalele link-uri.

<footer> - reprezinta subsolul paginii sau a unui <section>, ori

<article>; poate contine informatii despre autor, copyright, etc.
<section> - representa o sectiune distincta a documentului sau
aplicatiei. Se foloseste pentru a grupa logic structura
documentului.
Poate contine header, articles, meniu de navigare si footer.
<nav> - in acest tag se adauga meniul de navigare in paginile
site-ului. Acest element ar trebui folosit doar pentru link-uri
grupate intr-un meniu.
Daca aveti un <footer> cu link-uri de navigare in site, nu mai e
necesar sa le adaugati si in <nav>, deoarece <footer> e
suficient.
<article> - se foloseste pentru a defini un element independent
in pagina (sau in <section>), si poate contine articole de stiri,
postari de blog, comentarii, sau alt continut cu text si imagini.
<aside> - poate fi folosit ca sa defineasca o zona laterala, sau
alt continut care e considerat intr-un fel separat de continutul
din jurul lui. Un exemplu ar fi, banner sau publicitate.
<hgroup> - se foloseste pentru a grupa un set de doua sau mai
multe elemente H1, H2, H3, ..., cand avem de exemplu un titlu
si subtitluri

HTML5 vine si cu alte elemente interesante, precum <video> si

<audio>, plus alte tag-uri si atribute noi si modificate, dar acest
tutorial este o descriere scurta care prezinta principalele elemente
de baza, ca sa intelegeti noua structura in HTML5, si sa treceti rapid
de la HTML4 sau XHTML la HTML5.
Toate principalele browsere (Safari, Chrome, Firefox, Opera, Internet
Explorer) continua sa adauge noile caracteristici HTML5 in ultimile
lor versiuni, dar multi utilizatori inca folosesc versiuni de browser
web ce nu recunosc noile elemente HTML5, precum IE7, IE8. In acest
caz exista o solutie JavaScript, un script extern, html5.js (gazduit
de un proiect Google) care face browser-ul IE sa recunoasca noua
structura din HTML5.

Este recomandat sa includeti acest script in sectiunea HEAD a

documentului HTML5, folosind acest cod:

Si urmatorul cod CSS, care face ca tag-urile specificate sa fie afisate
ca elemente de tip bloc:
<style>header, footer, section, aside, nav, article {display:
block;}</style>
Iata o structura comuna a unei pagin cu HTML5, ce contine un
header in partea de sus a paginii (cu u meniu in el), o sectiune in
partea stanga (cu un meniu de navigare "aside" pt. banner), o alta
sectiune (cu Header, 2 articole si footer), si un footer in subsolul
paginii (click pe imagine):

Puteti folosi tag-urile pentru structurare cu atributele "id" si "class",

precum si <div>, <span>, <p>, si alte tag-uri HTML pentru design
si organizare /aranjare continut in documentul HTML.
Mai jos sunt codurile HTML5 si CSS pentru a crea o pagina web
bazata pe structura din imaginea de mai sus:

Document HTML5
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>Web Development Cursuri si Tutoriale</title>
<meta name="description" content="Examplu document in HTML5,
template, cursuri si tutoriale" />
<meta name="keywords" content="html5, tutoriale html5, cursuri" />

<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<header id="page_header">
<h1>Web Development Cursuri si Tutoriale</h1>
<nav>
<ul>
<li><a href="http://www.marplo.net/" title="Home">Home</a></li>
<li><a href="http://www.coursesweb.net/" title="Cursuri Web">Cursuri
Web</a></li>
<li><a href="http://www.marplo.net/forum/">Forum</a></li>
<li><a href="../../coment/contact.php"
title="Contact">Contact</a></li>
</ul>
</nav>
</header>
<section id="posts">
<header id="posts_header">
<h2>Tutoriale HTML5</h2>
</header>

<article class="post">
<header>
<h3>Invata rapid HTML5</h3>
</header>
<div class="ctext">
Invata despre noile caracteristici din HTML5.<br />
Tag-uri noi, si elemente pentru structura.
</div>
<aside class="post_baner">Aici poate fi un banner</aside>
<p>
Noile caracteristici din <b>HTML5</b> sunt bazate pe HTML, CSS, DOM,
si JavaScript; si reduc necesitatea plugin-urilor externe (precum
Flash).<br />
Multe alte noi caracteristici HTML5 sunt centrate pe crearea unei mai
bune platforme pentru aplicatiile web, <a
href="http://www.marplonet.net/html/tutorial-html5.html" title="Tutorial
HTML5">Cititi mai mult</a> ...
</p>
</article>
<article class="post">
<header>
<h3>Elemente si attribute noi pentru formular in HTML5</h3>
</header>
<div class="ctext">
Formularele HTML sunt folosite in general ca sa transfere date adaugate
de utilizator la un script de pe server sau JavaScript, ca sa fie procesate de
un limbaj de programare.
</div>
<p>
HTML5 adauga mai multe tipuri de casute input noi, pentru formular
(datetime, datetime-local, date, month, week, time, number, range, email,
url, search, and color), <a href="http://www.marplonet.net/html/html5formular-input-atribute.html" title="Elemente de formular noi">Cititi mai
mult</a> ...
</p>
</article>

<footer id="post_footer">
<p>Mai multe lectii si tutoriale HTML: <a
href="http://www.marplo.net/html/" title="Curs HTML">Curs
HTML</a>.</p>
</footer>
</section>
<section id="sidebar">
<nav>
<ul>
<li><a href="http://www.marplo.net/html/" title="Curs HTML">Curs
HTML</a></li>
<li><a href="http://www.marplo.net/curs_css/" title="Curs CSS">Curs
CSS</a></li>
<li><a href="http://www.marplo.net/javascript/"
title="JavaScript">JavaScript</a></li>
<li><a href="http://www.marplo.net/php-mysql/" title="PHPMySQL">PHP-MySQL</a></li>
<li><a href="http://www.marplo.net/flash/" title="Flash-ActionScript
3">Flash-ActionScript 3</a></li>
<li><a href="http://www.marplo.net/jocuri/" title="Jocuri Flash">Jocuri
Flash</a></li>
</ul>
</nav>
<aside class="sidebar_baner">Banner in sidebar</aside>
</section>
<footer id="page_footer">
<p>De la: <a href="http://www.marplo.net/" title="Cursuri gratuite, Jocuri,
Anime">www.marplo.net</a></p>
</footer>
</body>
</html>

Cod CSS, in fisierul style.css

body {

width: 99%;
margin: 2px auto;
font-family: Arial, "MS Trebuchet", sans-serif;
text-align: center;
}
header, footer, section, aside, nav, article { display: block; }
header#page_header {
width: 100%;
margin: 4px auto;
border: 2px solid blue;
}
header#page_header nav ul {
list-style: none;
margin: 0;
padding: 0;
}
#page_header nav ul li {
display:inline;
margin: 0 20px 0 0;
padding: 1px;
}
section#posts {
float: right;
width: 79%;
background-color: #f1f2fe;
border: 1px solid yellow;
}
section#posts header#posts_header {
background-color: #abcdef;
border: 1px solid green;
}

article.post {
margin:10px;
background-color: yellow;
text-align: left;
}
article.post aside {
float: right;
margin-top: -58px;
width: 250px;
height: 120px;
background-color: #fefefe;
}
article.post p { clear: right;}
section#sidebar {
float: left;
width: 18%;
background-color: #d7d8fe;
border: 1px solid green;
padding:5px;
}
section#sidebar nav ul {
margin: 3px auto;
text-align: left;
padding: 0 0 0 15;
}
section#sidebar aside {
width: 160px;
height: 250px;
margin: 10px auto;
background-color: #fefefe;
}
footer#page_footer {

clear: both;
width: 100%;
margin: 4px auto;
border: 2px solid blue;
}

Aceste reguli CSS sunt salvate intr-un fisier extern, denumit

"style.css", si este inclus in pagina HTML cu urmatorul cod adaugat
in sectiunea HEAD.
<link rel="stylesheet" type="text/css" href="style.css" />

Pentru a crea pagini web cu HTML5, ar trebui sa cunoasteti si CSS.

Dupa mai multi ani de experienta cu HTML 4 si XHTML, HTML5 a

venit cu tag-uri noi pentru o mai buna structra a documentului si a
formularelor, pentru desen si continut multimedia.
Multe din noile elemente HTML5 nu sunt inca suportate de

principalele navigatoare web, dar treptat acestea implementeaza

noile caracteristici din HTML5.
In acest tutorial sunt prezentate cateva din noile tag-uri HTML5
suportate in principalele navigatoare web, cu o scurta descriere si
exemple de cod.
HTML5 audio tag

Tag-ul <audio> se foloseste pt. a adauga sunet, muzica in pagina

web.
Poate folosi aceste atribute:
autoplay (autoplay="autoplay") - Sunetul, muzica va incepe
automat.
controls (controls="controls") - Controalele audio (play / pauza,
etc.) vor fi afisate.
loop (loop="loop") - Muzica va incepe din nou dupa ce se
termina.
preload (preload="auto|metadata|none") - Specifica daca si cum
va fi incarcat fisierul audio cand pagina se incarca. Atributul
"preload" este ignorat daca se adauga "autoplay".
("auto" - incarca tot fisierul audio cand pagina se incarca;
"metadata" - incarca numai metadata cand pagina se incarca;
"none" - browser-ul nu ar trebui sa incarce fisierul audio cand se
incarca pagina).
src (src="url") - Adresa URL a fisierului audio.

Elementul <audio> foloseste tag-ul <source> ca sa specifice sursa

fisierului audio si fisiere alternative pentru diferentele dintre
navigatoarele web, bazate pe tipul de codec recunoscut.
IE9 si Safari folosesc fisiere MP3; Firefox, Chrome si Opera folosesc
tipul OGG (sau OGV).
- Exemplu:
<audio controls="controls">
<source src="audio_file.ogg" type="audio/ogg" />
<source src="audio_file.mp3" type="audio/mp3" />

Browser-ul dv. nu recunoste tag-ul audio, dar puteti <a

href="audio_file.mp3">Descarca fisierul</a>.
</audio>

- Textul dintre <audio> si </audio> va fi afisat in navigatoarele web

care nu recunosc tag-ul audio. In exemplu de mai sus, daca browserul nu recunoste tag-ul <audio>, va fi afisat in acel loc un link de
download.
Rezultat:
HTML5 video tag

Tag-ul <video> este un element multimedia folosit pt. a adauga in

pagina web video clipuri si alt continut video.
Tag-ul HTML5 <video> poate folosi aceste atribute:
autoplay (autoplay="autoplay") - Filmul /videoclip-ul va incepe
automat.
controls (controls="controls") - Butoanele de control (play /
pauza, etc.) vor fi afisate.
height (height="pixeli") - Inaltimea player-ului, in pixeli.
width (width="pixeli") - Lungimea player-ului, in pixeli.
muted (muted="muted") - Sunetul din film va fi pe mut, nu e
redat.
poster (poster="URL") - Specifica o imagine care sa fie afisata in
timp ce filmul se incarca, sau pana cand e apasat butonul play.
Daca acest atribut nu e adaugat, va fi afisat primul cadru din
film.
loop (loop="loop") - Filmul va porni de la inceput dupa ce se
termina.
preload (preload="auto|metadata|none") - Specifica daca si cum
va fi incarcat filmul cand pagina se incarca. Atributul "preload"
este ignorat daca se adauga "autoplay".
("auto" - incarca tot fisierul video cand pagina se incarca;
"metadata" - incarca numai metadata cand pagina se incarca;

"none" - browser-ul nu ar trebui sa incarce filmul cand se

incarca pagina).
src (src="url") - Adresa URL a fisierului video.

Elementul <video> foloseste tag-ul <source> ca sa specifice sursa

fisierului video si fisiere alternative pentru diferentele dintre
navigatoarele web, bazate pe tipul de codec recunoscut.
IE9 si Safari folosesc fisiere MP4; Firefox, Chrome si Opera folosesc
tipul OGG (sau OGV)
- Exemplu:
<video controls="controls"width="200" height="150">
<source src="video/video_file.mp4" type="video/mp4" />
<source src="video/video_file.ogg" type="video/ogg" />
Browser-ul dv. nu recunoste tag-ul video, dar puteti <a
href="video/video_file.mp4">Descarca filmul</a>.
</video>

- Textul dintre <video> si </video> va fi afisat in navigatoarele web

care nu recunosc tag-ul video. In exemplu de mai sus, daca browserul nu recunoste tag-ul <video>, va fi afisat in acel loc un link de
download.
Rezultat:
HTML5 embed tag

Tag-ul <embed> se foloseste pentru a adauga in pagina aplicatii cu

continut interactiv, cum sunt prezentarile flash SWF, plug-inuri, sau
fisiere cu imagini.
Poate sa foloseasca aceste atribute:
height (height="pixeli") - Inaltimea cadrului in care e afisat
continutul, in pixeli.
width (width="pixeli") - Lungimea cadrului in care e afisat
continutul, in pixeli.
type (type="MIME_type") - Tipul MIME al continutului.
src (src="url") - Adresa URL a fisierului.

Exemplu:
<embed src="flash_game.swf" width="150" height="150" />

Rezultat:
Tag-ul canvas

Elementul <canvas> poate fi utilizat ca sa adauge in pagina

desene grafice folosind script-uri (de obicei JavaScript), sau
compozitii foto si animatii simple.
Atribute:
height (height="pixeli") - Lungimea cadrului canvas, in pixeli.
width (width="pixeli") - Inaltimea cadrului canvas, in pixeli.

- Exemplu (creaza un patrat albastru):

<canvas id="cvs1" width="88" height="88">
Acest text e afisat daca browser-ul nu recunoste elementul HTML5 Canvas.
</canvas>
<script type="text/javascript">
var canvas=document.getElementById('cvs1');
var ctx=canvas.getContext('2d');
ctx.fillStyle='#0102fe';
ctx.fillRect(0,0,80,80);
</script>

- Textul dintre <canvas> si </canvas> va fi afisat daca navigatorul

web nu recunoaste canvas.
Rezultat:
HTML5 fi gure tag

Tag-ul <figure> se foloseste pentru a adauga in pagina un grup de

elemente care au un contint de sine statator, cum ar fi diagrame,
poze, cod, etc. Continutul din elementul <figure> e atasat la
derularea paginii, dar pozitia lui este independenta. Dace e sters nu
ar trebui sa afecteze cursul paginii.

Tag-ul <figure> poate sa contina elementul <figcaption> ca sa

adauge o scurta descriere la ceea ce e adaugat in <figure> .
- Exemplu:
<figure>
<img src="html_course.jpg" alt="Curs HTML" width="200"
height="100" />
<figcaption>Curs HTML: www.marplo.net/html/</figcaption>
</figure>

Rezultat:

Curs HTML: www.marplo.net/html/

HTML5 hgroup tag

Tag-ul <hgroup> se foloseste pentru a grupa mai multe tag-uri H1 H6.

- Exemplu:
<hgroup>
<h2>Bine ai venit pe www,narplo.net</h2>
<h3>Cursuri gratuite, Jocuri, Anime</h3>
</hgroup>
<p>Restul continutului...</p>
HTML5 mark tag

Tag-ul <mark> defineste un text marcat, se foloseste cand doriti sa

scoateti in evidenta parti din text,
- Exemplu:
<p>Cursuri gratuite si tutoriale: <mark>www.marplo.net</mark> pt. Web
Development.</p>

Rezultat:
Cursuri gratuite si tutoriale: www.marplo.net pt. Web Development.

Tag-ul progress

Elementul <progress> adauga in pagina o bara de progres. De

obicei e folosit impreuna cu script-uri JavaScript.
Poate folosi aceste atribute:
max (max="nr") - Specifica totalul de unitati din bara de progres.
value (value="nr") - Specifica numarul de unitati completate din
bara de progres.

- Exemplu:
<progress value="33" max="100"></progress>

Rezultat:
Tag-ul ruby

Elementul <ruby> specifica o adnotare rubin. Adnotarile Ruby sunt

folosite in scrierile din Asia de Est, pentru a arata pronuntia
caracterelor est-asiatice.
Acest tag se foloseste impreuna cu tag-urile <rt> si <rp>.
- <rt> - defineste o explicatie sau pronuntia caracterelor dintr-o
adnotare rubin.
- <rp> - defineste ce sa afiseze daca navigatorul web nu recunoaste
elementul <ruby>.
Exemplu:
<ruby>
<rt><rp>(</rp> <rp>)</rp></rt>
</ruby>
Tag-ul WBR

Elementul <wbr> (Word Break Opportunity) specifica unde in text

ar putea fi adaugat rand nou, indica: "Browser-ul poate adauga aici
un rand nou daca e necesar". Daca browser-ul nu considera ca
trebuie adaugat un nou rand, nu afecteaza cu nimic.
De exemplu, se poate folosi <wbr> ca sa adauge oportunitatea de
rand nou la un cuvant prea lung, sau ca sa evitati adaugarea de

catre browser a unui rand nou intr-un loc nepotrivit.

Exemplu:
<p>Pentru a crea Pagini<wbr>Web profesionale, un Web<wbr>Master ar
trebui sa stie HTML si CSS.</p>

HTML5 - Elemente si atribute noi in formular

Noile caracteristici adaugate in HTML5 nu sunt complet
recunoscute de principalele browsere. Navigatoarele web cu cel
mai bun suport pentru noile elemente din HTML5 sunt: Opera,
Chrome si Mozill Firefox.
Noile tipuri de casete input in HTML5

HTML5 adauga mai multe tipuri de casute input pentru formular

(datetime, datetime-local, date, month, week, time, number, range,
email, url, search, si color), care sunt prezentate mai jos:
type="date" - Creaza o caseta de control pentru specificarea
datei (an, luna, zi), precum un calendar. Valoarea initiala (adaugata
in atributul "value") trebuie sa fie furnizata in format data ISO.
<input type="date" name="set_date" value="2011-10-15" />

type="datetime" - Creaza o caseta input pentru data si ora,

care poate fi adaugat in format ISO date/time, si e trimisa ca fiind in
fusul orar UTC.
<input type="datetime" name="dt" value="2011-06-14T01:26:32:00Z" />

type="datetime-local" - Creaza o caseta input pentru data si

ora, care poate fi adaugat in format ISO date/time, la fel ca
"datetime", dar presupunand ca timpul este cel din fusul orar local.
<input type="datetime-local" name="dtl" value="2011-0614T01:26:32:00">

type="month" - Creaza o caseta input in care se poate specifica

anul si luna.
<input type="month" value="2012-09" name="mnt" />

type="week" - o caseta input pentru anul si numarul unei

anumite saptamani din an (AN-Wnr , nr e numarul saptamanii).
<input type="week" name="weeks" value="2011-W34" />

type="time" - creaza o casuta de formular pentru ora (ora,

minute, secunde).
<input type="time" name="currenttime" value="18:12:00" />

type="tel" - o caseta input pentru numar de telefon.

<input type="tel" name="hometel" value="123-888-2012" />
123-888-

type="url" - e folosit pentru campuri de formular care trebuie sa

contina doar adresa URL. Valoarea din acest input e automat
validata cand datele din formular sunt trimise (daca nu are un
format URL valid, returneaza un mesaj de eroare).
<input type="url" name="site" size="25"
value="http://www.marplo.net" />
http://w w w .marplo.net

type="number" - creaza casete de formular care sa contina

doar numere. Se poate restrictiona numerele acceptate, cu
atributele "min", "max" si "step".
<input type="number" name="points" min="5" max="80" />

type="range" - Creeaza o zona cu un cursor de control care

indica o valoare dintr-o serie de numere. Numerele acceptate incep
de la valoarea specificata in atributul "min" (0 default), pana la
numarul specificat in atributul "max" (100 default).
<input type="range" name="val" min="1" max="10" />

type="email" - e folosit pentru campuri de formular care trebuie

sa contina doar adresa de e-mail. Valoarea din acest input e
automat validata cand datele din formular sunt trimise.
<input type="email" name="email" />

type="search" - Creaza un camp de text special folosit pentru

cautare (de ex. cautare in site, cu un script).
<input type="search" name="srch" size="25" value="Cautare" />
Cautare

type="color" - Creaza un camp de formular special pentru

selectarea unei culori.
<input type="color" name="get_color" />

Atribute noi pentru <form> adaugate in HTML5

autocomplete="on | of" - Permite browser-ului sa completeze

automat datele in formular (on), sau de fiecare data utilizatorul
trebuie sa introduca el insusi datele (off).
- Functioneaza cu <form>, si urmatoarele tipuri <input>: text,
search, url, tel, email, password, date-pickers, range, color.

<form action="script.php" method="post" autocomplete="on"

id="idf">

Name:<input type="text" name="fname" />

<input type="submit" value="Send" />

</form>

novalidate - (novalidate="novalidate" in XHTML) - Seteaza ca

formularul, sau campul input unde e adaugat, sa nu valideze
automat datele cand sunt trimise.
- Se poate adauga in <form> si in urmatoarele casete
<input>: text, search, url, tel, email, password, date-pickers,
range, color.

<form action="script.php" id="idf" novalidate="novalidate">

E-mail: <input type="email" name="email" />

<input type="submit" value="Send"/>

</form>

Atribute noi pentru input

autofocus - (autofocus="autofocus" in XHTML) - specifica faptul

ca un camp de formular sa primeasca automat focus cand pagina e
afisata. Functioneaza in toate casetele <input>.
Name: <input type="text" name="name1" autofocus="autofocus" />

form="form_id" - Asociaza campul input cu formularul care

are id="form_id". Cu aceasta metoda, caseta de text nu trebuie
adaugata special intr-un element form. Functioneaza in toate tipurile
<input>.
<form action="script.php" method="post" id="idf">
Name:<input type="text" name="fname" />
<input type="submit" value="Send" />
</form>
E-mail: <input type="email" name="email" form="idf" />

formaction="url" - Rescrie valoarea atributului "action" din

<form>, trimitand datele la adresa specificata la "url".
formenctype="content_type" - Rescrie valoarea atributului
"enctype" din <form>.
formmethod="get | post | put | delete" - Rescrie valoarea
atributului "method" din <form>. Valorile "put" si "delete" sunt noi
in HTML5.
formnovalidate - (formnovalidate="formnovalidate" in XHTML) Rescrie valoarea atributului "novalidate" din <form>.
formtarget="target" - Rescrie valoarea atributului "target" din
formular.
- Aceste atribute de recriere sunt folosite doar in buton submit
(type "submit" sau "image").
<form action="script.php" method="post" id="idf">
E-mail: <input type="email" name="email" /><br />
<input type="submit" value="Trimite" /><br />
<input type="submit" formaction="script_2.php" value="Trimite la
script_2" /><br />
<input type="submit" formnovalidate="formnovalidate" value="Trimite
fara validare" />
</form>

height="pixels" - Specifica inaltimea butonului imagine, cand

type="image".
width="pixels" - Specifica lungimea butonului imagine, cand
type="image".
- Aceste atribute sunt folosite doar in butoane cu type="image":
<input type="image" src="img_submit.gif" width="80" height="23" />

list="id_datalist" - Indica faptul ca exista o list predefinita de

optiuni pentru utilizator, care sunt furnizate de un element datalist.
Valoarea atributului list ("id_datalist") este ID-ul adaugat in
<datalist>.
- Poate fi utilizat cu urmatoarele tipuri de <input>: text, search, url,
tel, email, datepickers, number, range, color.
Website: <input type="url" list="sites" name="link" />
<datalist id="sites">
<option label="CoursesWeb" value="http://www.coursesweb.net" />
<option label="MarPlo" value="http://www.marplo.net" />
<option label="W3Schools" value="http://www.w3schools.com" />
</datalist>

max="number" - specifica valoarea maxima pentru numere,

aceasta trebuie sa fie mai mare (sau egala) decat valoarea
adaugata in atributul "min".
min="number" - specifica o valoarea minima pentru numere.
step="any/number" - specifica intervalul de numere care poate
fi folosit (daca step="3", numerele acceptate sunt: -3,0,3,6, etc).
- Atributele "min", "max", si "step" pot fi utilizate in urmatoarele
casete <input> types: date-pickers, number, range.
Urmatorul cod defineste o caseta care accepta numere de la 1 la 10,
cu step 3 (numere ce pot fi adaugate: 3, 6 sau 9):
<input type="number" name="num" min="1" max="10" step="3" />

multiple - (multiple="multiple" in XHTML) - Indica faptul ca

utilizatorul poate specifica mai mult de o valoare.

- Poate fi utilizat in urmatoarele casete <input>: email, file.
<input type="file" name="img" multiple="multiple" />

pattern="regexp" - specifica o expresie regulata folosita la

validarea datelor din caseta input. Puteti adauga un atribut "title"
care sa indice pe scurt formatul datelor ce trebuie adaugate.
- Poate fi utilizat in urmatoarele casete <input>: text, search, url,
tel, email, password.
Codul urmator defineste un camp text in care pot fi adaugate maxim
5 caractere (doar litere si numere):
<input type="text" name="pass" pattern="[A-z0-9]{5}" title="Cinci
caractere, litere si numere" />

placeholder="text" - Furnizeaza un mic indiciu, sau exemplu

care sa ajute utilizatorul sa adauge datele corecte (pentru o
descriere mai lunga, se foloseste atributul "title").
Indiciul e afisat in caseta input cand e goala, si dispare cand
cursorul e in acel camp.
- Poate fi utilizat in urmatoarele casete <input>: text, search, url,
tel, email, password.
<input type="search" name="src" placeholder="Search MarPlo" />

required - (required="required" in XHTML) - indica faptul ca

respectivul camp input trebuie sa fie completat inainte de a trimite
datele.
- Poate fi adaugat in urmatoarele casete <input>: text, search, url,
tel, email, password, date-pickers, number, checkbox, radio, file.
<input type="text" name="name1" required="required" />

Alte elemente de formular adaugate in HTML5

<datalist> ... </datalist> tag

Elementul datalist trebuie sa contina un "id" si tag-uri <option> ...
</option>.
Creaza un meniu cu optiuni (adaugate in elementul "option"),
oferind o functie de "auto-completare" in timp ce utilizatorul
tasteaza in caseta input care are un atribut "list" ce face referire la
"id-ul" din datalist.
Tag-ul <option> trebuie sa contina atributul "value".
Exemplu:
Website: <input type="url" list="sites" name="link" />
<datalist id="sites">
<option label="CoursesWeb" value="http://www.coursesweb.net" />
<option label="MarPlo" value="http://www.marplo.net" />
<option label="W3Schools" value="http://www.w3schools.com" />
</datalist>

<keygen /> tag

Elementul keygen e folosit pentru a genera doua chei (una privata,
si cealalta publica) care ofera un mod mai sigur de autentificare a
utilizatorului.
Cheia privata este salvata pe calculatorul client, iar cheia publica e
trimisa la server.
Suportul navigatoarelor web pentru acest element nu e inca destul
de bun pentru a fi utilizat ca un standard de securitate.
Exemplu:
<form action="script.php" id="idf" method="post">
Utilizator: <input type="text" name="user" />
Encriptare: <keygen name="security" />
<input type="submit" value="Submit" />
</form>

<output> </output> tag

E folosit pentru a afisa rezultatul unei operatiuni de calcul, cel mai
probabil rezultatul returnat de un script.
Total: <output name="total" onformchange="calc()">0</output>

- Aici, "calc()" poate fi o functie dintr-un script JavaScript.

Tutorial HTM5 canvas

Desenare cu HTML5
Adaugare transparenta
Desenare linii
Desenare arce si cercuri
Canvas - Text
Canvas - Umbre
Canvas - Gradient
Adaugare imagini

<canvas> este unul din cele mai interesante elemente introduse

in HTML5.
Tag-ul <canvas> este destul de simplu, defineste lungimea,
inaltimea si un ID unic. Dar se folosesc o serie de instructiuni
JavaScript (denumite generic APIs) pentru a desena obiecte in
canvas.
Exemplu de mai jos arata structura de baza pentru implementare
canvas intr-o pagina web:

<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>Titlu paginii</title>
<script type="text/javascript">
function draw() {
// preia intr-un obiect tag-ul <canvas>
var canvas = document.getElementById("id_canvas");
// daca browser-ul recunoaste canvas
if (canvas.getContext) {
var ctx = canvas.getContext('2d');
// Aplica instructiuni JavaScript (API canvas) pt. desenare
}
}
// apeleaza functia draw() imediat ce pagina s-a incarcat
window.onload = draw;
</script>
</head>
<body>
<canvas id="id_canvas" width="200" height="200"></canvas>
</body>
</html>

- Atributele width si height specifica dimensiunile zonei CANVAS in

pagina web.
- Important este ID-ul (aici "id_canvas"), acesta se foloseste in
JavaScript ca sa fie preluat tag-ul <canvas> intr-un obiect
(cudocument.getElementById('ID')), apoi se aplica functii si
proprietati specifice pentru a crea desene care sunt afisate in tag-ul

CANVAS.
- Metoda getContext('2d') trebuie aplicata la elementul Canvas ca
sa se obtina un obiect la care se aplica instructiuni API pentru
crearea continutului din <canvas>.

<canvas> este un element de tip bloc, poate fi adaugat in oricare alt tag de tip
bloc, precum <p>, <div>, sau in elementele noi de structura introduse in HTML5:
<section>, <article>.
Desenare cu HTML5, canvas si JavaScript

Instructiunile JavaScript permit dezvoltatorilor de pagini web sa

deseneze diferite forme, linii, sa aplice culori, transparenta si
gradient, sa adauge text si imagini in Canvas; chiar sa creeze
animatie.
- Exemplu urmator deseneaza un patrat albastru.
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>Canvas patrat albastru</title>
<script type="text/javascript"><!-function draw() {
var canvas = document.getElementById('cav1');
if (canvas.getContext) {
var ctx = canvas.getContext('2d');
ctx.fillStyle = '#0101fe';
ctx.fillRect (50, 60, 100, 100);
}
}
window.onload = draw;
incarcat

// acceseaza functia draw() cand pagina s-a

--></script>
</head>
<body>
<canvas width="200" height="200" id="cav1"></canvas>
</body>
</html>

Rezultat:

- Sintaxa:
ctx.fillStyle = "Culoare" - reprezinta culoarea din interiorul
formei. Se poate folosi orice metoda de definire a culorii
utilizata in CSS (blue, #0000ff, #00f, sau rgb(0,0,255) ).
- Daca nu se specifica o culoare, va fi aplicat negru.
ctx.fillRect(X-stanga, Y-sus, lungime, inaltime) - Deseneaza
patrulaterul in canvas, folosind cloarea din "fillStyle".

Puteti crea desene mult mai complexe, combinand cercuri, linii,

patrulatere, gradient, transparenta.
- Deoarece multi utilizatori inca folosesc browser care nu recunoaste
elementul CANVAS, puteti adauga un text cu un mesaj de eroare pt.
no-canvas, intr-un tag ascuns (cu style="display:none;"), iar cu
JavaScript faceti acest tag vizibil in cazul cand browser-ul nu
recunoaste elementul canvas.
- Daca adaugati codul JavaScript dupa tag-ul <canvas>, nu mai e
necesar window.onload, doar apelati simplu functia cu API-uri pt.
canvas. Veti vedea in exemplele urmatoare.

Adaugare transparenta
Ca sa adaugati transparenta, definiti culoarea folosind formula:
rgba(Red, Green, Blue, Alpha). "Alpha" e o valoare intre 0 si 1
care reprezinta transparenta.
In urmatorul exemplu adaugam un dreptunghi cu Alpha 0.5. In acest
caz definim culoarea din "fillStyle" pentru dreptunghi folosind rgba()
pentru a specifica valoarea de transparenta ( rgba(220, 223, 0,
0.5) ).
De aseemenea, va fi adaugat un mesaj pt. no-canvas, iar codul
JavaScript e scris sub tag-ul <canvas> (pt. a nu mai folosi
window.onload).
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>Canvas transparenta</title>
</head>
<body>
<canvas width="200" height="200" id="cav1"></canvas>
<p id="no_cav" style="display:none;">Folositi un browser compatibilCanvas ca sa vedeti aceasta zona.</p>
<script type="text/javascript"><!-function draw() {
var canvas = document.getElementById('cav1');
if (canvas.getContext) {
var ctx = canvas.getContext('2d');
ctx.fillStyle = '#0101fe';
ctx.fillRect (50, 60, 100, 100);
ctx.fillStyle = "rgba(220,223,0, 0.5);";
ctx.fillRect (90, 105, 100, 80);
}
else {

// face vizibil tag-ul cu text pt. no-canvas

document.getElementById('no_cav').style.display = 'block';
}
}
draw();

// apeleaza functia draw()

--></script>
</body>
</html>

Rezultat:

Desenare linii

Ca sa desenati linii se foloseste functia lineTo().

lineTo(x, y)

Aceasta metoda traseaza o linie de la punctul curent pana la

coordonatele (x, y).
Pentru a seta sau muta punctul curent de inceput, se foloseste
metoda moveTo().
moveTo(x, y)

- Aceasta metoda creaza, sau muta, punctul de inceput al desenarii,

la coordonatele specificate.
Ca sa definiti culoarea liniei, se foloseste:
ctx.strokeStyle =
"culoare";
Pentru grosimea liniei (in pixeli), se foloseste:
ctx.lineWidth =
valoare;

Urmatorul exemplu creaza trei linii.

<canvas width="200" height="200" id="cav1"></canvas>
<p id="no_cav" style="display:none;">Folositi un browser compatibilCanvas ca sa vedeti aceasta zona.</p>
<script type="text/javascript"><!-function draw() {
var canvas = document.getElementById('cav1');
if (canvas.getContext) {
var ctx = canvas.getContext('2d');
// definesste culoarea si grosimea liniei
ctx.strokeStyle = '#01da01';
ctx.lineWidth = 3;
// creaza prima linie
ctx.moveTo(10, 10);
ctx.lineTo(100, 80);

// seteaza punctul de inceput

// defineste linia

// creaza a doua linie

ctx.moveTo(10, 10);
ctx.lineTo(120, 120);

// seteaza punctul de inceput

// defineste linia

// the third line

ctx.moveTo(10, 150);

// muta punctul de inceput

ctx.lineTo(140, 150);
ctx.stroke();

// adauga liniile

}
else {
// face vizibil tag-ul cu text pt. no-canvas

document.getElementById('no_cav').style.display = 'block';
}
}
draw();

// apeleaza functia

--></script>

Dupa ce a fost definita culoarea liniei (cu strokeStyle), si grosimea

(cu lineWidth), am folosit metoda moveTo() pentru a seta punctul de
inceput, apoi cu lineTo(100, 80) se creaza o linie de la acel punct
curent pana la punctul dat de coordonatele (100, 80).
Acum, ultimul punct devine punctul curent de inceput, pentru a-l
muta, se foloseste iar meoda moveTo().
Codul de mai sus va afisa aceste trei linii (intr-un browser Canvascompatibil):

Desenare arce si cercuri

Pentru a desena arce de cerc si cercuri, se foloseste functia arc().

arc(x, y, raza, startUnghi, endUnghi, anticlockwise)

- Aceasta metoda deseneaza un arc de cerc

intre startUnghi si endUnghi, in sens invers orelor de ceas daca
argumentul anticlockwise e setat true, daca e false deseneaza in
sensul orelor de ceas.
Ca sa desenati un crc, setati: startUnghi=0,
endUnghi=Math.pi*2
Dupa ce ati definit arc-ul de cerc (sau cercul) cu metoda arc(),
aplicati:
ctx.stroke(); - ca sa desenati linia de margine.

ctx.fill(); - ca sa adaugati culoarea de umplere.

Urmatorul cod deseneaza o fata zambitoare.
<canvas width="200" height="200" id="cav1"></canvas>
<p id="no_cav" style="display:none;">Folositi un browser compatibilCanvas ca sa vedeti aceasta zona.</p>
<script type="text/javascript"><!-function draw() {
var canvas = document.getElementById('cav1');
if (canvas.getContext) {
var ctx = canvas.getContext('2d');
ctx.arc(75,75,50,0,Math.PI*2,true);

// Fata

ctx.moveTo(110,75);
ctx.arc(75,75,35,0,Math.PI,false);

// Gura

ctx.moveTo(65,65);
ctx.arc(60,65,4,0,Math.PI*2,true);

// Ochiul stang

ctx.moveTo(95,65);
ctx.arc(90,65,4,0,Math.PI*2,true);

// Ochiul drept

ctx.stroke();
}
else {
// face vizibil tag-ul cu text pt. no-canvas
document.getElementById('no_cav').style.display = 'block';
}
}
draw();

// apeleaza functia

--></script>

Desenul incepe cu desenarea fetei, apoi se muta punctul de inceput

pentru desenare gura, si traseaza alt arc de cerc, si tot asa pentru
fiecare ochi. Functia moveTo() se ocupa de mutarea coordonatelor.
Rezultat:

Canvas - Text

Sunt doua metode pentru adaugare text in canvas:

fillText(text, x, y) - adauga textul la pozitia specificata, avand
culoarea din fillStyle.
strokeText(text, x, y) - adauga textul la pozitia specificata, dar
fara culoare de umplere, doar cu linia de margine a literelor,
avand culoarea din strokeStyle.

Pentru text se pot folosi urmatoarele proprietati la obiectul context:

ctx.font = valoare - Specifica fontul textului, la fel ca
proprietatea font-family din CSS.
ctx.textAlign = valoare - Specifica alinierea pe orizontala a
textului, valori: "start", "end", "left", "right", "center" (default e
"start").
ctx.textBaseline = valoare - Specifica alinierea pe verticala a
textului, valori: "top", "hanging", "middle", "alphabetic",
"ideographic", "bottom" (default e "alphabetic").

Exemplu:
<canvas width="200" height="200" id="cav1"></canvas>
<p id="no_cav" style="display:none;">Folositi un browser compatibilCanvas ca sa vedeti aceasta zona.</p>
<script type="text/javascript"><!-function draw() {

var canvas = document.getElementById('cav1');

if (canvas.getContext) {
var ctx = canvas.getContext('2d');
// creaza text cu o culoare de umplere
ctx.fillStyle = '#00f';
ctx.font = 'italic 30px sans-serif';
ctx.textBaseline = 'top';
ctx.fillText('Hy everyone', 2, 5);
// creaza text afisat doar cu linia de margine a literelor
ctx.font = 'bold 30px sans-serif';
ctx.strokeText('Hy everyone', 2, 50);
}
else {
// face vizibil tag-ul cu text pt. no-canvas
document.getElementById('no_cav').style.display = 'block';
}
}
draw();

// apeleaza functia

--></script>

Rezultat:

Canvas - Umbre

Instrctiunile JavaScript pentru umbre contin proprietati care se

aplica la obiectul context:

ctx.shadowColor = valoare - Seteaza culoarea umbrei.

ctx.shadowBlur = valoare - Seteaza "blur" la umbra, in pixels.
Cu cat valoarea e mai mica, umbra e mai ascutita.
ctx.shadowOffsetX = valoare - Specifica distanta X, in pixeli.
ctx.shadowOffsetY = valoare - Specifica distanta Y, in pixeli.

Urmatorul cod deseneaza o sfera albastra, cu o umbra verde avand

transparenta 0.5:
<canvas width="200" height="200" id="cav1"></canvas>
<p id="no_cav" style="display:none;">Folositi un browser compatibilCanvas ca sa vedeti aceasta zona.</p>
<script type="text/javascript"><!-function draw() {
var canvas = document.getElementById('cav1');
if (canvas.getContext) {
var ctx = canvas.getContext('2d');
// seteaza proprietatile umbrei
ctx.shadowOffsetX = 8;
ctx.shadowOffsetY = 8;
ctx.shadowBlur = 4;
ctx.shadowColor = 'rgba(0, 200, 1, 0.5)';
// defineste si adauga un cerc
ctx.fillStyle = '#0000fe';
ctx.arc(75,75,50,0,Math.PI*2,true);
ctx.fill();
}
else {
// face vizibil tag-ul cu text pt. no-canvas

document.getElementById('no_cav').style.display = 'block';
}
}
draw();

// apeleaza functia

--></script>

Rezultat:

Canvas - Gradient

Pentru a crea culoare gradient in Canvas, se aplica un

obiect CanvasGradient la proprietatile fillStyle sau /si strokeStyle.
Se pot crea doua tipuri de obiect CanvasGradient, utilizand una din
urmatoarele metode:
gradient = context.createLinearGradient(x0, y0, x1, y1) Returneaza un obiect CanvasGradient ce reprezinta un gradient
liniar, care incepe de la punctul (x0, y0) si se termina la punctul
(x1, y1).
gradient = context.createRadialGradient(x0, y0, r0, x1,
y1, r1) - Returneaza un obiect CanvasGradient ce reprezinta un
gradient radial, ca un con cu cercul mic dat de (x0, y0, re), iar
cercul mare definit de (x1, y1, r1).

Dupa ce ati creat obiectul pentru gradient, puteti adauga culori in

gradient, cu metoda addColorStop() aplicata acestui obiect.
Urmatoarele doua coduri arata cum puteti crea si folosi gradient.
1) Exempu cu createLinearGradient():
<canvas width="200" height="200" id="cav1"></canvas>
<p id="no_cav" style="display:none;">Folositi un browser compatibilCanvas ca sa vedeti aceasta zona.</p>

<script type="text/javascript"><!-function draw() {

var canvas = document.getElementById('cav1');
if (canvas.getContext) {
var ctx = canvas.getContext('2d');
// creaza un obbiect CanvasGradient liniar
// furnizand sursa si coordonatele de inceput si sfarsit (x0, y0, x1, y1)
var gradient = ctx.createLinearGradient(0, 0, 150, 0);
// Se adauga culori in gradient, primul argument specifica pozitia culorii
// - se folosesc valori cuprinse intre 0 (gradient start) si 1 (gradient end)
// Al doilea argument specifica culoarea, in orice format folosit si in CSS
gradient.addColorStop(0, '#f00');

// rosu

gradient.addColorStop(0.4, '#ff0');

// galben

gradient.addColorStop(0.8, '#0f0');

// verde

gradient.addColorStop(1, '#00f');

// albastru

// Aplica gradientul la proprietatea fillStyle, si deseneaza un dreptunghi

ctx.fillStyle = gradient;
ctx.fillRect(0, 0, 200, 125);
}
else {
// face vizibil tag-ul cu text pt. no-canvas
document.getElementById('no_cav').style.display = 'block';
}
}
draw();
--></script>

Rezultat:

2) Exemplu cu createRadialGradient():
<canvas width="200" height="200" id="cav1"></canvas>
<p id="no_cav" style="display:none;">Folositi un browser compatibilCanvas ca sa vedeti aceasta zona.</p>
<script type="text/javascript"><!-function draw() {
var canvas = document.getElementById('cav1');
if (canvas.getContext) {
var ctx = canvas.getContext('2d');
// creaza un obiect CanvasGradient radial
// furnizeaza sursa, coordonatele de inceput, sfarsit si razele cercurilor
(x0, y0, r0, x1, y1, r1)
var gradient = ctx.createRadialGradient(70, 80, 10, 78, 75, 45);
// Adauga culori la gradientul radial, la fel ca la cel liniar
gradient.addColorStop(0, '#0f0');
gradient.addColorStop(0.5, '#fff');
gradient.addColorStop(1, '#00f');

// Aplica gradientul la proprietatea fillStyle, si deseneaza un cerc

ctx.fillStyle = gradient;
ctx.arc(75,75,50,0,Math.PI*2,true);
ctx.fill();

}
else {
// face vizibil tag-ul cu text pt. no-canvas
document.getElementById('no_cav').style.display = 'block';
}
}
draw();
--></script>

Rezultat:

Adaugare imagini

Pentru a adauga o imagine in <canvas>, se foloseste

metoda drawImage(). E o functie complexa, care foloseste trei, cinci,
sau noua argumente.
Iata sintaxa cu cinci argumente:
drawImage(img_element, dx, dy, dw, dh)

- Primul argument, img_element reprezinta o referinta la imagine

(obiectul JavaScript cu ea), "dx" si "dy" specifica coordonatele de
destinatie in contextul canvas, "dw" si "dh" specifca lungimea si
inaltimea imaginii afisate in Canvas (in caz ca doriti sa o
redimensionati).
- Varianta cu noua argumente se foloseste cand doriti sa adaugati o
portiune decupata din imagine. Contine inca patru argumente care
definesc suprafata decupata (x0, y0, x1, y1).

In urmatorul exemplu adaugam aceasta imagine:

intr-un <canvas> (redimensionand-o), si un text langa ea.
<canvas width="260" height="200" id="cav1"></canvas><br />
<p id="no_cav" style="display:none;">Folositi un browser compatibilCanvas ca sa vedeti aceasta zona.</p>
<img src="html_course.jpg" alt="HTML course" width="152" height="160"
id="img1" />
<script type="text/javascript"><!-function draw() {
var canvas = document.getElementById('cav1');
if (canvas.getContext) {
var ctx = canvas.getContext('2d');
// obtine un obiect cu imaginea, o adauga in context canvas (cu
dimensiuni specificate)
var img_elm = document.getElementById('img1');
ctx.drawImage(img_elm, 0, 0, 95, 100);
// adauga un text fara culoare de umplere
ctx.font = 'bold 25px sans-serif';
ctx.textBaseline = 'top';
ctx.strokeText('HTML Course', 98, 38);
}
else {
// face vizibil tag-ul cu text pt. no-canvas
document.getElementById('no_cav').style.display = 'block';
}

}
draw();
--></script>

Rezultat:

Elementul <canvas> poate fi si interactiv, sa raspunda la actiunile

utilizatorului, efectuate cu mouse-ul sau tastatura.
- In urmatorul exemplu se folosesc evenimentele: "onmouseover",
"onmouseout", si "onclick" pentru a schimba culoarea unui
dreptunghi in <canvas>.
<canvas width="121" height="81" id="cav1"
onmouseover="draw('#fefe01');" onmouseout="draw('#01de02');"
onclick="draw('#fe0708');" style="cursor:pointer;"></canvas>
<p id="no_cav" style="display:none;">Folositi un browser compatibilCanvas ca sa vedeti aceasta zona.</p>
<script type="text/javascript"><!-function draw(clr) {
var canvas = document.getElementById('cav1');
if (canvas.getContext) {
var ctx = canvas.getContext('2d');
// deseneaza un dreptunghi, cu o culoare preluata din parametru "clr"
ctx.fillStyle = clr;
ctx.fillRect (0, 0, 120, 80);
}
else {

// face vizibil tag-ul cu text pt. no-canvas

document.getElementById('no_cav').style.display = 'block';
}
}
draw('#0102fe');

// apeleaza functia

--></script>

Proprietatea "fillStyle" foloseste o culoare preluata din parametru

"clr", astfel, cand functia e apelata cu o culoare diferita la argument,
afiseaza un dreptunghi cu alta culoare.
Ca sa vedeti efectul, pozitionati mouse-ul deasupra dreptunghiului si
apasati click pe el.

Sunt mai multe proprietati si metode JavaScript pentru Canvas. O

documentatie completa cu acestea gasiti la pagina HTML Canvas 2D
Context.

Coduri culori pentru site

Aici gasiti un tabel cu mai multe culori ce pot fi utilizate in
designul paginilor web, prin cod HTML si CSS, dar si in alte aplicatii
cum ar fi editoare de imagini sau flash.
Fiecare culoare are 3 reprezentari: Denumirea (in engleza), Cod
Hexazecimal (perechi de numere de la 0 la 9 si litere de la A la
F), Cod Decimal(numere de la 0 la 255).
Astfel, puteti utiliza o culoare folosind oricare din cele 3
reprezentari. Daca nu stiti cum, studiati exemplele urmatoare:
De exemplu, daca doriti sa folositi intr-un stil o nuanta de albastru
deschis (luam DeepSkyBlue), puteti adauga intr-un cod CSS una din
urmatoarele expresii, folosind denumirea culorii, codul hexa sau cel
decimal (pentru hexadecimal se adauga in fata caracterul # iar
pentru decimal se foloseste sintaxa rgb(r, g, b); )
color: DeepSkyBlue;

color: #00BFFF;
color: rgb(0, 191, 255);

In general asa se folosesc aceste coduri de culori, de exemplu,

pentru cod HTML la "font" (aici nu se foloseste decimal):
<font color="DeepSkyBlue">Text de culoare DeepSkyBlue</font>
<font color="#00BFFF">Text de culoare DeepSkyBlue</font>

Iata inca un exemplu pt. CSS, cu proprietatea "background-color",

de data asta o culoare spre verde (am ales SpringGreen)
background-color: SpringGreen;
background-color: #00FF7F;
background-color: rgb(0, 255, 127);

Tabel Culori
Nume culoare (en.)

Cod Hexadecimal
R G B

Cod Decimal
R G B

Culori cu fond Rosu

IndianRed

CD 5C 5C

205 92 92

LightCoral

F0 80 80

240 128 128

Salmon

FA 80 72

250 128 114

DarkSalmon

E9 96 7A

233 150 122

LightSalmon

FF A0 7A

255 160 122

Crimson

DC 14 3C

220 20 60

Red

FF 00 00

255 0 0

FireBrick

B2 22 22

178 34 34

DarkRed

8B 00 00

139 0 0

Culori cu fond Roz

Pink

FF C0 CB

255 192 203

LightPink

FF B6 C1

255 182 193

HotPink

FF 69 B4

255 105 180

DeepPink

FF 14 93

255 20 147

MediumVioletRed

C7 15 85

199 21 133

PaleVioletRed

DB 70 93

219 112 147

Culori cu fond Portocaliu

LightSalmon

FF A0 7A

255 160 122

Coral

FF 7F 50

255 127 80

Tomato

FF 63 47

255 99 71

OrangeRed

FF 45 00

255 69 0

DarkOrange

FF 8C 00

255 140 0

Orange

FF A5 00

255 165 0

Culori cu fond Galben

Gold

FF D7 00

255 215 0

Yellow

FF FF 00

255 255 0

LightYellow

FF FF E0

255 255 224

LemonChiffon

FF FA CD

255 250 205

LightGoldenrodYellow

FA FA D2

250 250 210

PapayaWhip

FF EF D5

255 239 213

Moccasin

FF E4 B5

255 228 181

PeachPuff

FF DA B9

255 218 185

PaleGoldenrod

EE E8 AA

238 232 170

Khaki

F0 E6 8C

240 230 140

DarkKhaki

BD B7 6B

189 183 107

Culori cu fond Purpuriu (mov)

Lavender

E6 E6 FA

230 230 250

Thistle

D8 BF D8

216 191 216

Plum

DD A0 DD

221 160 221

Violet

EE 82 EE

238 130 238

Orchid

DA 70 D6

218 112 214

Fuchsia

FF 00 FF

255 0 255

Magenta

FF 00 FF

255 0 255

MediumOrchid

BA 55 D3

186 85 211

MediumPurple

93 70 DB

147 112 219

BlueViolet

8A 2B E2

138 43 226

DarkViolet

94 00 D3

148 0 211

DarkOrchid

99 32 CC

153 50 204

DarkMagenta

8B 00 8B

139 0 139

Purple

80 00 80

128 0 128

Indigo

4B 00 82

75 0 130

Nume culoare (en.)

Cod Hexadecimal
RGB

Cod Decimal

Culori cu fond Verde

GreenYellow

AD FF 2F

173 255 47

Chartreuse

7F FF 00

127 255 0

LawnGreen

7C FC 00

124 252 0

Lime

00 FF 00

0 255 0

LimeGreen

32 CD 32

50 205 50

PaleGreen

98 FB 98

152 251 152

LightGreen

90 EE 90

144 238 144

MediumSpringGreen

00 FA 9A

0 250 154

SpringGreen

00 FF 7F

0 255 127

MediumSeaGreen

3C B3 71

60 179 113

SeaGreen

2E 8B 57

46 139 87

ForestGreen

22 8B 22

34 139 34

Green

00 80 00

0 128 0

DarkGreen

00 64 00

0 100 0

YellowGreen

9A CD 32

154 205 50

OliveDrab

6B 8E 23

107 142 35

Olive

80 80 00

128 128 0

DarkOliveGreen

55 6B 2F

85 107 47

Aquamarine

7F FF D4

127 255 212

MediumAquamarine

66 CD AA

102 205 170

DarkSeaGreen

8F BC 8F

143 188 143

LightSeaGreen

20 B2 AA

32 178 170

DarkCyan

00 8B 8B

0 139 139

Teal

00 80 80

0 128 128

Culori cu fond Albastru

RGB

Aqua

00 FF FF

0 255 255

Cyan

00 FF FF

0 255 255

LightCyan

E0 FF FF

224 255 255

PaleTurquoise

AF EE EE

175 238 238

Turquoise

40 E0 D0

64 224 208

MediumTurquoise

48 D1 CC

72 209 204

DarkTurquoise

00 CE D1

0 206 209

CadetBlue

5F 9E A0

95 158 160

SteelBlue

46 82 B4

70 130 180

LightSteelBlue

B0 C4 DE

176 196 222

PowderBlue

B0 E0 E6

176 224 230

LightBlue

AD D8 E6

173 216 230

SkyBlue

87 CE EB

135 206 235

LightSkyBlue

87 CE FA

135 206 250

DeepSkyBlue

00 BF FF

0 191 255

DodgerBlue

1E 90 FF

30 144 255

CornflowerBlue

64 95 ED

100 149 237

MediumSlateBlue

7B 68 EE

123 104 238

RoyalBlue

41 69 E1

65 105 225

Blue

00 00 FF

0 0 255

MediumBlue

00 00 CD

0 0 205

DarkBlue

00 00 8B

0 0 139

Navy

00 00 80

0 0 128

MidnightBlue

19 19 70

25 25 112

Nume culoare (en.)

Cod Hexadecimal
RGB

Cod Decimal

Culori cu fond Maro

Cornsilk

FF F8 DC

255 248 220

BlanchedAlmond

FF EB CD

255 235 205

Bisque

FF E4 C4

255 228 196

NavajoWhite

FF DE AD

255 222 173

Wheat

F5 DE B3

245 222 179

BurlyWood

DE B8 87

222 184 135

RGB

Tan

D2 B4 8C

210 180 140

RosyBrown

BC 8F 8F

188 143 143

SandyBrown

F4 A4 60

244 164 96

Goldenrod

DA A5 20

218 165 32

DarkGoldenrod

B8 86 0B

184 134 11

Peru

CD 85 3F

205 133 63

Chocolate

D2 69 1E

210 105 30

SaddleBrown

8B 45 13

139 69 19

Sienna

A0 52 2D

160 82 45

Brown

A5 2A 2A

165 42 42

Maroon

80 00 00

128 0 0

Culori cu fond Alb

White

FF FF FF

255 255 255

Snow

FF FA FA

255 250 250

Honeydew

F0 FF F0

240 255 240

MintCream

F5 FF FA

245 255 250

Azure

F0 FF FF

240 255 255

AliceBlue

F0 F8 FF

240 248 255

GhostWhite

F8 F8 FF

248 248 255

WhiteSmoke

F5 F5 F5

245 245 245

Seashell

FF F5 EE

255 245 238

Beige

F5 F5 DC

245 245 220

OldLace

FD F5 E6

253 245 230

FloralWhite

FF FA F0

255 250 240

Ivory

FF FF F0

255 255 240

AntiqueWhite

FA EB D7

250 235 215

Linen

FA F0 E6

250 240 230

LavenderBlush

FF F0 F5

255 240 245

MistyRose

FF E4 E1

255 228 225

Culori cu fond Gri

Gainsboro

DC DC DC

220 220 220

LightGrey

D3 D3 D3

211 211 211

Silver

C0 C0 C0

192 192 192

DarkGray

A9 A9 A9

169 169 169

Gray

80 80 80

128 128 128

DimGray

69 69 69

105 105 105

LightSlateGray

77 88 99

119 136 153

SlateGray

70 80 90

112 128 144

DarkSlateGray

2F 4F 4F

47 79 79

Black

00 00 00

000

Caractere speciale - Entitati HTML

In tabelul din aceasta pagina este o lista cu mai multe caractere
speciale (simboluri, diacritice si caractere specifice altor limbi
straine) si codurile lor specifice HTML si ISO.
Aceste caractere pot fi adaugate si afisate corespunzator in orice
pagina web, putand fi introduse cu aceste coduri cunosute si cu
denumirea deEntitati HTML.
De exemplu:
- ca sa afisati in pagina simbolul (copyright) se adauga
codul © (sau codul ISO ©)
- ca sa afisati in pagina simbolul (jumatate) se adauga
codul ½ (sau codul ISO ½)
- pentru caracterul < (mai mic), ca browser-ul sa nu-l confunde
cu inceputul de tag, se poate folosi codul <
Nume

Sintaxa

Nume ISO
Latin-1
&#193

Descriere

Aacute

&Aacute

A ascutit ()

aacute

á á

a ascutit ()

Acirc

A circumflex ()

acirc

a circumflex ()

acute

accent grav ()

AElig

ligatura AE ()

aelig

ligatura ae ()

Agrave

À À

A grav ()

agrave

à à

a grav ()

amp

ampersand (&)

Aring

A cu inel ()

aring

a cu inel ()

Atilde

A tilda ()

atilde

a tilda ()

Auml

A umlaut ()

auml

a umlaut ()

brvbar

¦ ¦

bara intrerupta ()

Ccedil

C sedila ()

ccedil

c sedila ()

cent

cent ()

copy

curren

valuta generala ()

deg

grad ()

div

&div;
÷

impartire ()

Eacute

É É

E ascutit ()

eacute

é é

e ascutit ()

Ecirc

E circumflex ()

ecirc

e circumflex ()

Egrave

È È

E grav ()

egrave

è è

e grav ()

emdash

&emdas

em dash (&emdash)

nedefinit

h;
emsp

&emsp;

nedefinit

em spatiu ()

endash

&endash
nedefinit
;

en dash (&endash;)

ensp

&ensp;

nedefinit

en spatiu ()

ETH

Eth nordic ()

eth

eth nordic ()

Euml

E umlaut ()

euml

e umlaut ()

frac12

jumatate ()

frac14

sfert ()

frac34

trei sferturi ()

nedefinit

mai mare dect (>)

Iacute

I ascutit ()

iacute

i ascutit ()

Icirc

I circumflex ()

icirc

i circumflex ()

iexcl

exclamatie inversata ()

Igrave

I grav ()

igrave

i grav ()

iquest

intrebare inversata ()

Iuml

I umlaut ()

iuml

i umlaut ()

laquo

paranteza unghiular
dubl stng ()

mai mic dect (<)

macr

macron ( )

micro

micro ()

middot

· ·

punct la mijloc ()

nbsp

spatiu nonbreaking

not

negatie ()

Ntilde

N tilda ()

ntilde

n tilda ()

Oacute

&Oacute
Ó
;

O ascutit ()

oacute

ó ó

o ascutit ()

Ocirc

O circumflex ()

ocirc

o circumflex ()

Ograve

&Ograve
Ò
;

O grav ()

ograve

ò ò

o grav ()

ordf

ordinal feminin ()

ordm

ordinal masculin ()

Oslash

Ø Ø

O tiat ()

oslash

o tiat ()

Otilde

O tilda ()

otilde

o tilda ()

Ouml

O umlaut ()

ouml

o umlaut ()

para

paragraf ()

plusmn

&plusmn
±
;

plus minus ()

pound

lira sterlina ()

quot

ghilimele (")

raquo

paranteza unghiular
dubl dreapta ()

reg

marca inregistrata ()

sect

semn sectiune ()

shy

soft hyphen ()

sup1

1 superior ()

sup2

2 superior ()

sup3

3 superior ()

szlig

sharp s ()

THORN

&THORN
Þ
;

Thorn nordic ()

thorn

thorn nordic ()

times

inmultire ()

trade

™

nedefinit

trademark ()

Uacute

Ú Ú

U ascutit ()

uacute

ú ú

u ascutit ()

Ucirc

U circumflex ()

ucirc

u circumflex ()

Ugrave

&Ugrave
Ù
;

U grav ()

ugrave

ù ù

u grav ()

uml

umlaut ()

Uuml

U umlaut ()

uuml

u umlaut ()

Yacute

Ý Ý

Y ascutit ()

yacute

ý ý

y ascutit ()

yen

yen ()

yuml

y umlaut ()

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

HTML Manual in Limba Romana
71% (7)
HTML Manual in Limba Romana
65 pagini
HTML Pe Intelesul Tuturor
100% (1)
HTML Pe Intelesul Tuturor
75 pagini
Carte HTML
Încă nu există evaluări
Carte HTML
80 pagini
HTML Css
Încă nu există evaluări
HTML Css
140 pagini
Seminarii Web Design
Încă nu există evaluări
Seminarii Web Design
31 pagini
HTML Lecția
Încă nu există evaluări
HTML Lecția
20 pagini
Coduri HTML, HTML Codes
100% (1)
Coduri HTML, HTML Codes
9 pagini
JavaScript Curs4
Încă nu există evaluări
JavaScript Curs4
17 pagini
Multimedia HTML
0% (1)
Multimedia HTML
12 pagini
HTML
100% (1)
HTML
545 pagini
Lab 1 HTML
Încă nu există evaluări
Lab 1 HTML
8 pagini
Curs HTML
Încă nu există evaluări
Curs HTML
17 pagini
Curs CSS
Încă nu există evaluări
Curs CSS
41 pagini
Curs 2 HTML&CSS PDF
Încă nu există evaluări
Curs 2 HTML&CSS PDF
62 pagini
Test CSS
Încă nu există evaluări
Test CSS
4 pagini
Limbajul HTML
100% (1)
Limbajul HTML
6 pagini
Introducere În HTML Si CSS
Încă nu există evaluări
Introducere În HTML Si CSS
167 pagini
Limbaj CSS
100% (1)
Limbaj CSS
42 pagini
Tehnologii Web Grile Rezolvate Anul 2007-2008
0% (1)
Tehnologii Web Grile Rezolvate Anul 2007-2008
15 pagini
Curs HTML A5
Încă nu există evaluări
Curs HTML A5
139 pagini
Mini Curs PHP PDF
Încă nu există evaluări
Mini Curs PHP PDF
19 pagini
Curs 1
100% (1)
Curs 1
8 pagini
Stiluri HTML
Încă nu există evaluări
Stiluri HTML
13 pagini
HTML Curs - Probleme
Încă nu există evaluări
HTML Curs - Probleme
7 pagini
Ce Este HTML
0% (1)
Ce Este HTML
20 pagini
Crearea de Tabele În Documente HTML
Încă nu există evaluări
Crearea de Tabele În Documente HTML
4 pagini
Universitatea TRANSILVANIA Brasov: Introducere in PHP
Încă nu există evaluări
Universitatea TRANSILVANIA Brasov: Introducere in PHP
19 pagini
Web3.tehnologii Web CSS PDF
Încă nu există evaluări
Web3.tehnologii Web CSS PDF
78 pagini
Baze de Date Si Utilizarea Acestora
Încă nu există evaluări
Baze de Date Si Utilizarea Acestora
43 pagini
Tutorial XAMPP
Încă nu există evaluări
Tutorial XAMPP
8 pagini
Modelele de Culoare CMYK Si RGB
Încă nu există evaluări
Modelele de Culoare CMYK Si RGB
4 pagini
MySQL Server
Încă nu există evaluări
MySQL Server
90 pagini
Limbajul HTML PDF
Încă nu există evaluări
Limbajul HTML PDF
20 pagini
Proiect Didactic HTML A9a
Încă nu există evaluări
Proiect Didactic HTML A9a
5 pagini
Crearea Paginilor Web
Încă nu există evaluări
Crearea Paginilor Web
19 pagini
Tutorial JavaScript
Încă nu există evaluări
Tutorial JavaScript
9 pagini
Curs 3 HTML&CSS
Încă nu există evaluări
Curs 3 HTML&CSS
62 pagini
Tutorial HTML-PG WEB
Încă nu există evaluări
Tutorial HTML-PG WEB
82 pagini
Suport Laborator AE
Încă nu există evaluări
Suport Laborator AE
255 pagini
C3 CSS Introduction
Încă nu există evaluări
C3 CSS Introduction
25 pagini
Prezentare PHP
100% (1)
Prezentare PHP
14 pagini
CSS Prezentare
Încă nu există evaluări
CSS Prezentare
99 pagini
4.test HTML - Formatarea Textului
Încă nu există evaluări
4.test HTML - Formatarea Textului
2 pagini
PHP
Încă nu există evaluări
PHP
381 pagini
Tehnologii Web CSS
100% (1)
Tehnologii Web CSS
28 pagini
Tabele HTML
Încă nu există evaluări
Tabele HTML
5 pagini
Cum Creezi Un Site Web În WordPress
Încă nu există evaluări
Cum Creezi Un Site Web În WordPress
19 pagini
HTML Manual
Încă nu există evaluări
HTML Manual
197 pagini
Tutorial XAMPP
Încă nu există evaluări
Tutorial XAMPP
8 pagini
HTML Manual
Încă nu există evaluări
HTML Manual
197 pagini
Initiere Operare Calculator
100% (2)
Initiere Operare Calculator
271 pagini
Tic - CLS A Xii-A - Fisa 1 HTML
Încă nu există evaluări
Tic - CLS A Xii-A - Fisa 1 HTML
4 pagini
Limbajul HTML
Încă nu există evaluări
Limbajul HTML
6 pagini
Scriere Cod CSS: Obiectele (Regulile) CSS Selectorul HTML
Încă nu există evaluări
Scriere Cod CSS: Obiectele (Regulile) CSS Selectorul HTML
61 pagini
HTML
Încă nu există evaluări
HTML
70 pagini
Manual Vechi Si Depasit de HTML4
100% (1)
Manual Vechi Si Depasit de HTML4
545 pagini
Elemente Principale HTML
Încă nu există evaluări
Elemente Principale HTML
59 pagini
Curs HTML
Încă nu există evaluări
Curs HTML
10 pagini
18c55ac261dd987c3f4c6e8a36f96895
Încă nu există evaluări
18c55ac261dd987c3f4c6e8a36f96895
14 pagini
ilovepdf_merged_620e9b87-9347-4237-899d-d72931d6b8cb
Încă nu există evaluări
ilovepdf_merged_620e9b87-9347-4237-899d-d72931d6b8cb
93 pagini