Tutoriale HTML WebDesign Programare

Acest sir de tutoriale este conceput pentru a-ti oferi putina experienta, pentru ca tu sa fii capabil sa
citesti si sa scrii in HTML, sa poti salva corect documentele si sa poti, dupa aceea sa vizualizezi toata
"osteneala" intr-un browser web. Din pacate aceasta paina nu detine o rubrica pentru a te invata sa
folosesti functiile de baza ale unui calculator, asa ca in acest sens poti sa ceri a!utorul unui prieten
pentru a putea fii initiat in urmatoarele"
#a stii ce este un notepad si cum se foloseste
#a stii sa desc$izi un fisier folosind %nternet &xplorer 'sau oricare alt browser la aleere(
#a stii cum se face si ce este un cop)*paste
+rima paina web
+entru inceput copiaza urmatorul cod HTML in notepad. Asiurate ca operatiunea sa executat corect, in
caz contrar paina nu va functiona.
,$tml-
,$ead-
,*$ead-
,bod)- ,$.-+rima mea paina web/,*$.-
,*bod)-
,*$tml-

0odul de mai sus, este tot ceea ce iti trebuie pentru a crea o paina web de baza. Acum poti salva
documentul in notepad selectand din meniul File, optiunea Save As. %n fereastra care se desc$ide,
selecteaza All Files. 1om da un nume fisierului, de exemplu "index.$tml", fara $ilimele. 1erifica de doua
ori inainte de a apasa butonul Save. 2 sa te ro sa incerci sa iti aduci aminte unde ai salvat fisierul
deoarece vom lucra cu acest fisier ceva mai tarziu.
1izualizarea primei paini web - 3rowsers
+entru a putea vedea paina, va trebuii sa folosesti un browser. 3rowser-ele sunt proramele de internet
care interpreteaza codurile HTML, asemanatoare cu acelea pe care le-ai copiat si salvat in notepad.
Acestea transforma codul HTML intr-o paina web care poate fi citita de orice internaut. 0ele mai folosite
browsere sunt"
%nternet &xplorer
4ire4ox
5pera
6etscape 6aveator

1izualizarea primei paini
+entru a putea vizualiza paina web, trebuie sa desc$izi fisierul "index.$tml" intr-un browser. %n acest
sens, desc$ide o noua fereastra de %nternet &xplorer si urmareste intructiunile"
1. Din File selecteaza Open
.. 0lic7 pe 3rowse pentru a desc$ide un 8indows &xplorer
9. %ti aduci aminte unde ai salvat fisierul: 4oarte bine, acolo trebuie sa te duci.
;. 0and l-ai asit dai dublu clic7 pe el pentru a-l desc$ide.
4elicitari/ Tocmai ai vazut prima ta paina web.
Tags in HTML
Acum ca de!a ai creat prima ta paina web, ar trebuii sa examinam cateva semante ale fisierului
"index.$tml". 0u siuranta ai vazut ca exista un model in aran!atea comenzilor, niste cuvinte care sunt
incercuite de "," si "-", acestea sunt ta-urile de HTML
<n exemplu de ta in HTML este ,bod)-. Ta-ul ,bod)- spune browser-ului, unde incepe continutul
painii web. ,bod)- este deasemenea un exemplu de ta care ar trebuii sa existe in absolut orice paina
web.
Ta-uri de baza in HTML
#a mai aruncam o privire asupre codului. 2 paina web are in componenta doua elemente de baza. Daca
vei incerca sa creezi o paina fara cele doua ta-uri, vei avea probleme.
,$tml-
,bod)-
0ontinutul painii va fi aici
,*bod)-
,*$tml-

+rimul ta se numeste ,$tml- si este cel care ii spune browser-ului ca a inceput un cod in HTML. 0el de-al
doilea ta, ,bod)-, spune browser-ului ca aici incepe partea vizibila sau continutul painii.
%nc$iderea ta-urilor in HTML
+oate ai observat de!a inca doua ta-uri asemanatoare la sfarsitul documentului, ,*bod)- si ,*$tml-.
Acestea sunt ta-urile de inc$idere. ,*bod)-, da de stire browser-ului, ca sa inc$eiat continulul paini,
iar ,*$tml- ca s-a inc$eiat documentul HTML.
#les$ "*" este pus innaintea numelui ta-ului si spune browserului ca ar dori sa inc$ee respectiva functie.
Deci ,ta- este folosit pentru a incepe o functie, iar ,*ta- pentru a o inc$eia.
2rdinea ta-urilor - 4oarte important
2rdinea desc$iderii si a inc$iderii ta-urilor este foarte importanta. Daca un ta este desc$is intr-un altul,
de exemplu body este desc$is in html atunci acel ta 'body( este cel care trebuie inc$is inaintea celui de-
al doilea ta 'html(.
Am inc$is mai intai bod) pentru ca a fost cel care s-a desc$is cel mai recent. Aceasta reula si anume
desc$iderea si inc$iderea ta-urilor se aplica la toate celelalte tauri ale documentelor HTML.
0ea de-a doua paina
+robabil ca ai nevoie de timp si de mai multe incercari perntru a te acomoda cu aceste reuli, asa ca cel
mai bine ar fi sa exersam in continuare cu o a doua paina web. 0opiaza acest cod in notepad, asa cum ai
facut si prima data.
,$tml-
,$ead-
,title-+aina mea/ ,*title-
,*$ead-
,bod)-
,$.-3ine ati venit.,*$.-
,p-4oarte curand voi face o paina care va va da pe spate pe
toti/,*p-
,*bod)-
,*$tml-

Dupa ce te-ai asiurat ca totul e facut conform indicatiilor anterioare, poti salva documentul. Ai putea
c$iar sa-l salvezi cu acelasi nume ca si cel anterior, si anume "index.$tml". #-ar putea sa te intrebe daca
vrei sa salvezi peste documentul anterior, poti sa dai linistit 2=, nu vom mai avea nevoie de celalalt
document. 0and ai terminat, meri mai departe si citeste urmatorul tutorial.
Concluzie
%n exemplul anterior au fost introduse cateva ta-uri noi. 1om incerca sa dam o definitie acesstora,
pentru a putea incepe in lectia urmatoare, adevaratul Tutorial HTML.Taurile despre care vorbeam sunt"
,$ead-, ,title-, ,$.- si ,p-.
&xemplul in discutie"
,$tml-
,$ead-
,title-+aina mea/ ,*title-
,*$ead-
,bod)-
,$.-3ine a-ti venit.,*$.-
,p-4oarte curand voi face o paina care va v-a da pe spate pe
toti/,*p-
,*bod)-
,*$tml-
,$ead-
Acest ta urmeaza imediat dupa ,$tml- si este folosit pentru a indica browser-ului, informatii utile
precum" titlul paini, continulul 'folosit de motoarele de cautare vec$i( si multe altele
,title-
#e pune intre ,$ead- si ,*$ead-. Acest ta este cel care da numele paini. 6umele va fi afisat in browser,
de obicei in partea stana sus. %n exemplul anterior titlul era "+aina mea/" si va fi afisat ca si titlul
browserului.
,$.-
Acesta este titlul care apre in paina, inainte de continut si va fi mai mare decat litera de continut. ,$.-
inseamna ca e cea de-a doua marime a literei intre cel sase care exista. ,$>- este cea mai mare iar ,$?-
va fi cea mai mica.
,p-
&ste ta-ul care marc$eaza desc$iderea si inc$eerea unui pararaf. Asa ca atunci cand vei incepe un
pararaf asiurate ca ai pus ,p- la inceput si ,*p- la sfarsit.
0ontinua sa inveti - Tutorial HTML
Acum ca ai inteles baza etic$etelor in HTML si cum acestea functioneaza, poti sa meri ma departe
incepand sa citesti sectiunea Tutorial HTML.Aici vei invata toate etic$etele si atributele HTML, cum sa le
folosesti si cum sa construiesti o paina web functionala.
Tutorial HTML
Daca de!a esti familiarizat cu @ML, atunci HTML ti se va parea usor de invatat. 1a safatuim sa nu cititi tot
acest tutorial dintr-o data, ci sa petreceti un sfert sau o !umatate de ora parcurand cateva lectii dupa
care sa reflectari asupra informatiei citite si sa practicati.
+reatire pentru HTML
0rearea documentelor in HTML nu este dificil. +entru inceput vei avea nevoie decat de notepad si putina
dedicatie.
+aini 8eb
+ainile web au multe intrebuintari. Aici sunt explicate cateva dintre arumente"
0ea mai simpla cale de a raspandii informatii pe internet
2 alta forma de a-ti amplifica afacerea
+oti face cunoscut lumi ca ai ceva de spus intr-o paina personala
0uvinte de retinut
Tag - folosit pentru a specifica reiuni ale documentului HTML, pe care le va interpreta ulterior
browser-ul. Ta-urile vor avea aceasta infatisare" ,ta-
Element - este un ta complet, avand un ,ta- de desc$idere si unul de inc$idere ,*ta-.
Attribute - este folosit pentru a modifica valoarea unui element in HTML. De obicei un element
are mai multe atribute.
Deocamdata trebuie doar sa retii ca un tag este o comanda pe care browser-ul o interpreteaza, ca un
element este un ta complet iar un atribut personalizeaza si modifica un element in HTML.
Elemente HTML
&lementele de HTML au multe ranuri.
<n element are trei parti" un ta de desc$idere, continutul elementului si ta-ul de inc$idere.
1. <p> - ta-ul pentru desc$iderea unui pararaf.
2. Continutul elementului - pararaful propriu-zis.
3. </p> - ta-ul de inc$idere.
AAA6ota"
Toate painile web vor avea cel putin elementele de baza" html, head, title si body.
,$tml-element...,*$tml-
<n document HTML intotdeauna va incepe si va termina cu un ta ,$tml- si respectiv ,*$tml-. Aceasta
este spructura standard a unui HTML.
Desc$ide te ro 6otepad si copiaza urmatorul cod"
,$tml-
,*$tml-

#alveaza documentul di meniul File / Save As. #electeaza All Files si denumeste fisierul nou creeat,
"index.$tml". Apasa Save. Desc$ide acum fisierul intr-un browser pentru a avea posibilitatea sa dam
refres$ '4B(.
Daca ai facut totul bine vei putea vedea prima ta paina web, complet alba/
&lementul ,$ead-
&lementu ,$ead- este cel care urmeaza. Atata timp cand il pui intre html si body totul ar trebuii sa fie
2=. "Head" nu are nici o functie vizibila, asa ca vom discuta despre acest aspect in tutorialele ulterioare.
Totusi vreau sa mentionez ca ,$ead- poate oferi browserului informatii foarte utile. #e pot insera aici
printre altele coduri Cavascript sau 0##.
Deocamdata insa il vom lasa ol cu exceptia faptului ca vom introduce urmatorul element pe lista, dar
mai intai sa aruncam o privire fara el"
,$tml-
,$ead-
,*$ead-
,*$tml-

Daca vei salva documentul si vei incerca sa dai un refres$ la paina intiala din browser nu vei nota nici o
diferenta. Ai putina rabdare, in continuare vom studia cateva elemente vizibile.
&lementul ,title-
+entru ca totul sa iasa bine trebuie sa pui ta-ul title inauntrul celui de head. 0eea ce vei scrie intre cele
doua ta-uri title ',title- si ,*title-( va putea fi vizualizat ca si numele browser-ului, de obicei in partea
din stana sus. Alaturat avem si codul sursa"
,$tml-
,$ead-
,title- +rima mea paina web/,*title-
,*$ead-
,*$tml-

#alveazal acum fisierul si desc$ide-l in browser. 1ei putea vede titlul dupa cum am mai spu sin partea din
stana sus la marea ma!orilate a browser-elor
+oti pune orice nume doresti, daoar tine minte ca numele descriptive sunt cele mai usor de asit ulterior
&lementul ,bod)-
&lementul bod) este cel care defineste inceperea continutului paini propriu-zise 'titluri pararafuri
ftorafii muzica si orice altceva(. Dupa cum poti vedea in meniul de la stana, vom trata pe rand toate
aceste elemnte de continut.
Deocamdata tot ce trebuie sa retii este ca bod) incapsuleaza tot continutul painii.
,$tml-
,$ead-
,title- +rima mea paina web/,*title-
,*$ead-
,bod)-
#alut Dasca/ Aici voi pune mai tarziu continutul/
,*bod)-
,*$tml-

1izualizeaza acum toata isprava.
Html Tags - Introducere
<n browser citeste absolut tot ceea ce ai scris in documentul HTML. De fiecare data cand aseste un ta il
va trata ca atare si il va reda, ca de exemplu un pararaf, un titlu un tabel sau orice altceva. Taurile au
trei parti dupa cum am mai spus desc$iderea, continutul si inc$iderea.
Dupa cum vei putea invata mai departe exista sute de tauri HTML. Absolut toate elementele care vor fi
redate de un browser au nevoie de un ta sau doua.
,openinta-0ontinut,*closinta-
,p-&xemplu un pararaf,*p-

Ta-urile se scriu cu litere mici. Acesta este standardul de scriere in @HTML si D)namic HTML.
Alaturat sunt cateva exemple de tauri in HTML.
,bod)-Actioneaza ca o capsula asupra continutului.
,p-+araraf,*p-
,$.-Titlu '$eadin(,*$.-
,b-Ingrosat !old",*b-
,i-Inclinat (italic),*i-
,*bod)-
&xceptii - Ta-uri care nu au nevoie de inc$idere
&xista cateva ta-uri care nu indeplinesc modelul anterior aratat. Motivul este ca in realitate aceste ta-
uri nu au nevoie de nuci un continut. Datorita acestui fapt se va folosi o maniera modificat de criere a
acestor tauri.
0el mai simplu exemplu este "linebrea7"
,br*-

Acest ta a imbinat cele doua tauri, de desc$idere si de inc$idere, intro forma mult mai simpla si mai
eficace de folosit. Line brea7 se foloseste pentru a spune browser-ului ca vrem sa coboram cu o linie mai
!os, fara insa a inc$eia pararaful.
<rmand acest exemplu si alte ta-uri au fost modificate pentru o scriere mai simpla si mai rapida.
,im srcE"..*im*imae.!p" *- -- %mae Ta --
,br *- -- Line 3rea7 Ta --
,input t)peE"text" sizeE">." *- -- %nput 4ield --
1izualizare

-- Line 3rea7 --

Dupa cum poti vedea borowser-ul este capabil sa reproduca aceasta imaine atata timp cat furnizam
locatia cu a!utorul atributului "scr". Mai multe despre aceasta in tutorialul urmator.
Atri!ute HTML
Atributele sunt folosite pentru a personaliza ta-urile. 0e vreau sa spun: 0a la un moment dat vei vrea sa
redimensionezi o imaine sau un tabel sau sa sc$imbi culoarea de fond. Toate acestea sunt posibile cu
a!utorul atributelor.
0ele mai multe ta-uri au propriile lor atribute. 1om vorbi despre aceasta pe masura ce introducem in
discutie un nou ta. Acum insa vom vorbi despre un set de atribute enerice care se pot folosi cu
ma!oritatea ta-urilor.
Atributele se introduc intre parantezele un$iulare ',-( ale ta-ului de desc$idere.
Atributele "class" si "id" in HTML
Aceste doua atribute sunt foarte asemanatoare. &le nu au un rol direct in formatarea elementelor si mai
deraba sunt utile in spatele scenei cu a!utorul 0##. 1om vorbi despre rolul acestora la momentul
potrivit, atunci cand vom studia sintaxa si funcia lor in 0##
%dea este ca atunci cand vrei sa stabilesti o clasa de ta-uri pentru a fi folosite mai tarziu ca a!utorul 0##,
sa poti diferentia intre doua ta-uri identice dar cu atribute diferite. +riveste exempul alaturat.
,p idE"italicspararap$"-+ararap$ t)pe >, inclinat ,*p-
,p idE"boldpararap$"-+ararap$ t)pe ., inrosat ,*p-
1izualizare
Paragraph type 1, inclinat
#aragrap$ t%pe &' ingrosat
HTML - Atributul "name"
"name" este ceva mai diferit fat de "id" si "class". +unand un nume unui element, acesta devine o variabila
de script pentru Cavascript, A#+ si +H+. 0el mai des este intalnit in formulare si alte campuri de text
interactive.
,input t)peE"text" nameE"Text4ield" *-
1izualizare

Acest atribut nu are nici un afect asupra redarii casutei de text, cu toate ca in bac7round detine un rol
foarte important.
HTML - Atributul "title"
Acest atribut este folosit foarte putin fata de cat ar trebuii, el adaua un titlu 'un pop-up( oricarui
continut al unui element. Acest atribut nu ar trebui uitat. +oti denumi aproape orice si oricum doresti.
1izualizarea titlului apare atunci cand ne oprim co mausul cateva secunde deasupra contnutului.
,$. titleE"&u sunt un atribut title/"-<n Titlu 2arecare,*$.-
1izualizare
<n Titlu 2arecare

Treci cu mausul peste titlul de mai sus ca sa vezi maia atributului "title". Acest atribut va oferi site-ului
tau multa interactiune cu cei ce te vor vizita. 6u il trece cu vederea.
HTML - Atributul "alin"
Daca vrei sa aliniezi in mod diferit anumite elemente ale paini tale, atunci ai la dispozitie atributul
align. +oti alinia la stana 'left', dreapta 'ri$t( sau la la mi!locul 'center( paini aproape orice element.
+rin default elementele se aliniaza la stana, esceptand atuci cand se specifica o alta aliniere.
,$. alinE"center"-Titlu centrat ,*$.-
1izualizare
Titlu centrat
Alete exemple"
,$. alinE"left"-Titlu aliniat la stana ,*$.-
,$. alinE"center"-Titlu centrat ,*$.-
,$. alinE"ri$t"-Titlu aliniat la dreapta ,*$.-
1izualizare
Titlu aliniat la stana
Titlu centrat
Titlu aliniat la dreapta
1alori standard pentru atribute
Multora dintere ta-uri li se atribuie, valori standard. Asta inseamna ca daca nu specifici un alt atribut,
browser-ul o va face pentru tine. De exemplu un pararaf se va alinia sinur la stana, exceptand atunci
cand specifici altfelF la fel si elementele unui tabel. +e masura ce vei exersa vei intelee mai multe
despre valorile default ale unor ta-uri
Atribute enerice
Getine ca atributele sunt folosite pentru a personaliza elementele unei paini web. Am alturat aici cateva
dintre atributele cele mai comune, folosite in HTML"
Attri!ute Options Function
alin ri$t, left, center Aliniere orizontala
valin top, middle, bottom Aliniere verticala
bcolor
numeric, $exidecimal, sau
valoare GD3
<n bac7round in spatele
elementului
bac7round <GL 2 imaine in spatele elementului
id Definit de user
6umeste un element care se va
folosi cu 0##
class Definit de user
0lasifica un element care se va
folosi cu 0##
widt$ 1aloare numerica
#pecifica latimea unui tabel,
imaine, sau casute de tabel.
$ei$t 1aloare numerica
#pecifica inaltimea unui tabel,
imaine, sau casute de tabel.
title Definit de user
"+op-up". Afiseaza un titlu pentru un
element stabilit.
Atri!utul de paragra( )p*
+araraful este un elemet de baza in editare de text. Ta-ul pentru pararaf este ,p-. Acesta va plasa o
linie oala deasupra si dedesuptul textului pentru a fi evidentiat, iar browser-ul il va interpreta ca atare.
<p>Paragraful este un elemet de baza in...</p>
<p>Acesta va plasa o linie goala deasupra si...</p>
1izualizare
Paragraful este un elemet de baza in editare de text.
Tag-ul pentru paragraf este <p>.
Acesta va plasa o linie goala deasupra si dedesuptul
textului pentru a fi evidentiat, iar browser-ul il va
interpreta ca atare.
HTML - +araraf incadrat, justify
+ararafele se pot formata aproximatix la fel de simplu ca si intr-un editor de texte. %ncadrarea din
exemplul alaturat s-a facut cu a!utorul atributului justify.
<p align!"ustif#!>Paragraful este un elemet de baza
in...</p>
1izualizare
Tag-ul pentru paragraf este <p>. Acesta va plasa o linie
goala deasupra si dedesuptul textului pentru a fi
evidentiat, iar browser-ul il va interpreta ca atare.
HTML - +araraf centrat, center
<p align!center!>Paragraful este un elemet de baza
in...</p>
1izualizare

%n acest exemplu fiecare linie a pararafului a fost centrata la mi!locul randului de redare.
HTML - +araraf aliniat la dreapta, right
<p align!rig$t!>Paragraful este un elemet de baza
in...</p>
1izualizare
HTML - Titluri +,- Headings"
<n titlu in HTML este exact ceea ce pare" un titlu adevarat, sau un subtitlu. Atunci cand plasezi un text
intr-un ta ,$>-, textul va fi afisat inrosat, iar dimensiunea literei va fi dat de numarul $eadin-ului.
Titlurile pot avea dimensiuni de la de la > la ? unde > este cea mai mare dimensiune si repectiv ?, cea
mai mica.
,bod)-
,$>-Headins,*$>-
,$.-are,*$.-
,$9-reat,*$9-
,$;-for,*$;-
,$B-titles,*$B-
,$?-and subtitles,*$?-
,*bod)-
1izualizare

+oti obserba ca fiecare titlu are cate un "linebrea7" innainte si dupa. De fiecare data cand punem un
$eadind, browser-ul va reda automat de la sine un salt in linie inaintea lui si deasemenea dupa.
HTML - &xemplu +ractic
#a luam acum un exemplu simplu si sa practicam un pic pentru ca informatia sa fie inteleasa pe deplin. Ar
fi de preferat sa te obisnuiesti cu acesti termeni inainte de a continua.
,$. alinE"center"-HTML - Titluri >"? 'Headins( ,*$.-
,p-<n titlu in HTML este exact ceea ce pare" un titlu adevarat,
sau un ...,*p-
,p-<n titlu in HTML este exact ceea ce pare" un titlu adevarat,
sau un ...,*p-
1izualizare
HTML - Titluri >"? 'Headins(
<n titlu in HTML este exact ceea ce pare" un titlu adevarat, sau
un subtitlu. Atunci cand plasezi un text intr-un ta ,$>-, textul
va fi afisat inrosat, iar dimensiunea literei va fi dat de numarul
$eadin-ului. Titlurile pot avea dimensiuni de la de la > la ?
unde > este cea mai mare dimensiune si repectiv ?, cea mai
mica.
<n titlu in HTML este exact ceea ce pare" un titlu adevarat, sau
un subtitlu. Atunci cand plasezi un text intr-un ta ,$>-, textul
va fi afisat inrosat, iar dimensiunea literei va fi dat de numarul
$eadin-ului. Titlurile pot avea dimensiuni de la de la > la ?
unde > este cea mai mare dimensiune si repectiv ?, cea mai
mica.
Line !rea. - Salt in linie
<n salt in line este diferit fata de celelalte ta-uri pe care le-am studiat pana acum. +lasarea acestuia in
codul sursa al documentului, va inc$eia randul respectiv si va cobora cu o linie mai !os, lasand un spatiu
mai mic in comparatie cu cel de pararaf. #e foloseste in pararaf dupa cum poti observa in exemplul de
mai !os.
,p-
%on %onescu ,br *-
0alea 1ictoriei 6o.> ,br *-
3ucuresti, Gomania ,br *-
,*p-
1izualizare
%on %onescu
0alea 1ictoriei 6o.>
3ucuresti, Gomania

Deasemenea se poate folosi pentru a evidentia o semnatura ca de exemplu la sfarsitul unei scrisori.
,p-
Multumesc anticipat,,br *-
,br *-
,br *-
%on %onescu ,br *-
1ice +resedinte
,*p-
1izualizare
Multumesc anticipat,
%on %onescu
1ice +resedinte
HTML - Horizontal /ule linie orizontala"
4oloseste ,$r*- pentru a crea o linie orizontala. Acest ta esste similar celui de linebrea7.
,$r*-
4olosestele
,$r*-,$r*-
0u
,$r*-
Moderatie
,$r*-
1izualizare
4olosestele
0u
Moderatie

Dand la o parte acest exemplu exaerat linia orizontala poate deveni utila in diferite circumstante,
precum poti vedea in exemplul de mai !os" o nota de subsol.
,$r *-
,p->. "T$e Hobbit", CGG Tol7ein.,br *-
.. "T$e 4ellows$ip of t$e Gin" CGG Tol7ein.,*p-
1izualizare
>. "T$e Hobbit", CGG Tol7ein.
.. "T$e 4ellows$ip of t$e Gin" CGG Tol7ein.

Dupa cum poti vedea, tot ceea ce face acest ta este sa deseneze o linie orizontala separand diferite
zone ale continutului sau pur si simplu decoreaza. 4olosita cu iscusinta poate da rezultate destul de
neasteptate.
HTML - Liste
HTML pune la dispozitie trei tipuri de liste. ,ol- va afisa o lista ordonata in timp ce ,ul- una neordonata,
iar pentru a realiza o lista de defnitii se foloseste ,dl-. 4oloseste atributele type si start pentru a realiza
lista cea mai potrivita cerintelor tale.
,ul- - unsorted list, buline
,ol- - ordered list, numere
,dl- - definition list, lista de definitii.
HTML - Lista ordonata
4oloseste ta-ul ,ol-pentru a incepe o lista ordonata. +rin punerea ,li-,*li- 'list item( intre taurile ,ol-
si ,*ol- semnalizezi browser-ului elementele listei.
,$; alinE"center"-2viective,*$;-
,ol-
,li-# asesc o slu!ba ,*li-
,li-#a iau bani multi ,*li-
,li-#a ma mut in alt oras ,*li-
,*ol-
1izualizare
2viective
>. # asesc o slu!ba
.. #a iau bani multi
9. #a ma mut in alt oras

+oti incepe lista cu orice alt numar doresti specificandu-l insa cu a!utorul atributului start.
,$; alinE"center"-2viective,*$;-
,ol startE";" -
,li-# asesc o slu!ba ,*li-
,li-#a iau bani multi ,*li-
,li-#a ma mut in alt oras ,*li-
,*ol-
1izualizare
2viective
;. # asesc o slu!ba
B. #a iau bani multi
?. #a ma mut in alt oras

Acest element nu face nimic iesit din comun dar este destul de folositor uneori.
HTML - Alte tipuri de liste ordonate
%n afara de modelul mai sus aratat mai sunt alte patru tipuri de liste ordonate. %n locul cifrelor arabe poti
folosi cifre romane sau la fel de bine litere iar in ambele cazuri pot fi folosite litere mici sau ma!uscule.
4oloseste atributul type pentru a modifica tipul numerotarii.
,ol t)peE"a"-
,ol t)peE"A"-
,ol t)peE"i"-
,ol t)peE"%"-
1izualizare
Litere mici Ma0uscule
1umere romane
cu litere mici
1umere romane
cu ma0uscula
a. <n loc
de munca
b. 3ani
c. Alt
oras
A. <n loc
de munca
3. 3ani
0. Alt oras
i. <n loc
de munca
ii. 3ani
iii. Alt oras
%. <n loc
de munca
%%. 3ani
%%%. Alt oras
Liste nesortate
0reaza o lista nesortata cu a!utorul taului ,ul-. Listele nesortate deasemenea sunt de mai multe tipuri si
anume, patratele buline si cerculete.1aloarea standard redata de ma!oritatea browser-elor sunt bulinele
,$; alinE"center"-lista de cumparaturi ,*$;-
,ul- ,li-lapte,*li-
,li-branza,*li-
,li-oua,*li-
,li-za$ar,*li-
,*ul-

Am alaturat ceva mai !os un exemplu despre cum arata si celelalte tipuri de liste neordonate.
,ul t)peE"sHuare"-
,ul t)peE"disc"-
,ul t)peE"circle"-
HTML - Lista de definitii
Deasemene poti face liste de definitii folosind ta-ul ,dl-. Aceasta lista reda cuvantul deasupra definitiei.
&ste indicat sa inrosam cuvantu pentru a fi mai bine evidentiat.
,dl-
,dt-,b-4romae,*b-
,*dt- ,dd-0uvant francez pentru branza .,*dd-
,dt-,b-1oiture,*b-,*dt-
,dd-0uvant francez pentru masina,*dd-
,*dt-

HTML - Elemente de (ormat
+e masura ce vei adaua din ce in ce mai mult text paini tale, vei avea nevoie de noi elemente pentru al
formata in functie de ustul si necesitati. %n tutorialul despre atribute am vorbit despre, modalitati de a
adaua un plus elementelor dorite. Acete ta-uri de formatare pot face elementele, inrosate inclinate
subliniate taiate dar nu numai.
,p-&xemplu de ,b-3old Text,*b-,*p-
,p-&xemplu de ,em-&mp$asized Text,*em-,*p-
,p-&xemplu de ,stron-#tron Text,*stron-,*p-
,p-&xemplu de ,i-%talic Text,*i-,*p-
,p-&xemplu de ,sup-superscripted Text,*sup-,*p-
,p-&xemplu de ,sub-subscripted Text,*sub-,*p-
,p-&xemplu de ,del-struc7t$rou$ Text,*del-,*p-
,p-&xemplu de ,code-0omputer 0ode Text,*code-,*p-
1izualizare
&xemplu de 2old Te3t
&xemplu de Emphasized Tet
&xemplu de Strong Te3t
&xemplu de Italic Tet
&xemplu de
superscripted Text
&xemplu de subscripted Text
&xemplu de
&xemplu de Computer Code Text
HTML - 0um sa folosesti ta-urile de formatare
Aceste ta-uri ar trebuii utilizare cu moderatie. 0eea ce vreau sa spun este ca este indicat sa le folosesti
pentru a inrosa sau inclina de exemplu un cuvant sau doua intr-un pararaf. Atunci cand vrei sa le
folosesti de exemplu cu un intre paaraf, cel mai bine este sa apelelezi la 0##. 2ricum acesta nu este
decat un sfat, in final decizia iti apartine tie si le poti folosi dupa cum experienta iti indica.
HTML - Coduri de culori
&xista trei feluri distincte de a defini o culoare. 0ea mai simpla metoda este aceea de a numi culorile 'in
enleza(. De exemplu" blac7, w$ite, red, reen, si blue. Am alaturat mai !os numele de culori care sunt
suportate in HTML.

HTML - #istemul de culori GD3
Acest cod de culori nu este recomandat, deoarece %ntenet &xplorer este sinurul 3rowser care suporta
valorile GD3 in HTML.
GD3 este prescurtarea pentru" Ged, Dreen, 3lue. 4iecare dintre aceste culori poate lua orice valoare intre
I 'nu coloreaza deloc( si .BB 'in totalitate acea culoare(. Am alaturat mai !os forma de scriere a culorilor
in GD3. Daca folosesti un browser ca re nu este %nternet &xplorer nu vei avea nici un rezultat.

HTML - #istemul de culori $exazecimal
#istemul $exazecimal este destul de dificil la prima vedere. 0u toate aceste te asiur ca odata cu
trecerea timpului, si cu putina practica, il vei intelee pe deplin. #istemul de culori $exazecimal este
sistemul standard pentru toate browser-ele web. &ste de incredere si este compatibil nu numai in
aplicatiile web.
#istemul $exazecimal este o reprezentare de ? caractere de culoare. +rimele doua caractere 'GG(
reprezinta valoarea rosu 'red(, urmatoarele doua 'DD( sunt verde 'reen(, iar ultimele doua '33( sunt
albastru 'blue(.
bgcolor!%&&''((!
HTML - 0oduri de culoare - Guperea codului
Tavelul urmator arata cum, mai exact, literele sunt interate in sistemul $exazecimal, marind astfel
posibilitatile de combinare.
Jecimal
) * + , - . / 0 1 2 *) ** *+ *, *- *.
Hexazecimal
) * + , - . / 0 1 2 A ( 3 4 5 6
%n acest fel posibilitatile cresc iar sistemul poate avea >? valori.
<n exemplu de cod $exazecimal ar fi"
bgcolor!%666666!

Litera "4" este valoarea maxima pe care o poate avea sistemul. La intalnirea acestui cod un browser va
afisa culoare alb. %n cazul in care vrei sa afli valoarea numerica a acestei culori avem formula urmatoare"
7*. 8 */9 : 7*.9 +..

4ormula este foarte simpla. #e ia prima valoare a lui "4" sau >B si se inmulteste cu >? si se adaua celei
de-a doua valoare >B. Gezultatul este .BB, valoarea maxima pe care o poate avea o culoare primara.
bgcolor!%330)).!
337&& - &ed9
7*+ 8 */9 : 7*+9 +)-
0)7'' - 'reen9
70 8 */9 : 7)9 **+
).7(( - (lue9
7) 8 */9 : 7.9 .
True 0olors
#istemul $exazecimal este cel mai utilizal pentru crearea painilor. Acesta este compatibil cu ma!oritatea
browser-elor, in acest fel interfata paini web nu va fi distorsionata. +entru a adaua o nota de siuranta
foloseste culorile imperec$iata 'true colors( precum" "KII>>&&", "K;;HH44", sau "K>>LLMM. 0onform
statisticilor acestea nu vor fi sc$imbate indiferent de browser.
Am alaturat mai !os un tabel cu aceste culor.
+entru simplificarea tabelului am folorit o metoda simplificata de afisare. Tine minte in acest sub-capitol
vorbim de culori imperec$iate, asa ca de exemplu culoarea reprezentata ca fiind 9?N este de fapt 99 ??
NN iar 440 va fi 44 44 00.
O
A0ele mai siure culori HTML
0u toate ca aceste culori 'true colors( de mai sus, sunt cele recomadate pentru a fi folosite de catre
webmasteri, a fost demonstrat ca doar .. dintre cele .>? culori sunt cu adevarat siure si nu vor fi in
absolot modificate in reprezentare de catre nici un browser. %n tabelul de mai sus culorile cu adevarat
siure au fost reprezentate cu un asterix ' A ( in fata.
HTML - Font si 2ase(ont
Ta-ul ,font- este folost pentru a modifica tipul de text, marimea si culoare. 4oloseste atributele "size",
"color", si "face" pentru a personaliza textul. 4oloseste ta-ul ,basefont- pentru a seta culoarea marimea
si stilul intreului tau text.
%n eneral ta-urile "font" si "basefont" nu se folosesc prea mult, in eneral se foloseste css-ul pentru a
stabili atributele textului.
Marimea 4ont-ului
#eteaza marimea font-ului tau cu a!utorul atributului size al taului ont. #unt acceptate valori intre >
'cea mai mica( si L 'cea mai mare(. 1aloarea standard a unui text normal este 9.
<p>
<font size!.!>Acesta este un font de marime .
</font>
</p>
1izualizare
Acesta este un font de marime
.
0uloarea fontului
#eteaza culoarea textului
<font color!%22))))!>T$is text is $excolor
%22))))</font>
<br />
<font color!red!>T$is text is red</font>
T$is text is $excolor %22))))
T$is text is red
4ont 4ace
Alee un stil de litera folosind ta-ul onta!e. +oti alee orice font ai instalat, cu toate acestea, alee
cu ri!a deoarece utilizatorul aflat pe paina ta nuva putea vizualiza fontul respectiv daca nu il are
instalat. Acesta va vedea in sc$imb font-ul default si anume Times 6ew Goman. #olutia ar fi sa alei mai
multe font-uri asemanatoare ca aspect.
<p>
<font face!(oo;man <ld =t#le, (oo; Anti>ua,
'aramond!>T$is paragrap$ $as $ad its font...</font>
<p>
This paragraph has had its font formatted by the font
tag!
3asefont
0u a!utorul ta-ului basefont vei putea stabili valoare default a font-ului in paina ta web. Gecomandam
sa specifici un basefont in cazul in care vei utiliza font-ul in HTML. Avem alaturat un model.
<$tml> <bod#>
<basefont size!+! color!green!>
<p>T$is paragrap$ $as $ad its font...</p>
</basefont>
</bod#> </$tml>
T$is paragrap$ $as $ad its font formatted b# t$e basefont tag?

0u toate acestea, basefont este oarecum depasit, este foarte probabil ca in viitorul apropiat sa nu se mai
lucreze cu el, trecanduse in acest fel definitiv confiurarea cu a!utorul 0##.
Atribute
Attribute= "Value" Description
size !@um. Aalue *-0!
=ize of #our text, 0 is
biggest
color !rgb,name,or $exidecimal!3$ange font color
face !name of font! 3$ange t$e font t#pe
%nceputul "0a la carte"
<p>
<font size!0! face!'eorgia, Arial!
color!maroon!>3</font>ustomize #our font to ac$ieve
a desired loo;.
</p>

Customize #our font to ac$ieve a desired loo;.
HTML - H%perte3t /e(erence 4 $re(
Atributul href numeste leatura catre o alta paina web. De fapt este locul unde va fi dus user-ul care va
executa un clic7 pe lin7ul respectiv.
Lin7urile pot fi de trei tipuri"
interne - catre locuri specifice din paina 'anc$ors(
locale - catre alte paini dar pe acelasi domeniu
lobale - catre alte domeni in afara site-ului
Bnternal - $ref!%anc$orname!
Cocal - $ref!../img/foto."pg!
'lobal - $ref!$ttpD//www.tutoriale$tml.com/!
HTML - Llin7-uri text
+entru a seta inceputul si sfarsitul unui anc$or se poate folosi ,a-,*a-. Alee tipul de atribut care iti
trebuie si punel in interiorul taului. en exemoplu simplu ar fi"
<a $ref!$ttpD//www.tutoriale$tml.com!
target!Eblan;! >Fizix Tutoriale </a>
1izualizare
Zizix Tutoriale
HTML - Taret-uri de lin7
Atributul taret spune browser-ului daca trebuie sa desc$ida noua paina intr-o noua fereastra sau in
aceeasi fereastra.
target
!
Eblan;! 4esc$ide o noua fereastra
Eself! 4esc$ide pagina in aceeasi fereastra
Eparent!
4esc$ide noua pagina intr-un frame superior
lin;ului
Etop!
desc$ide noua pagina in acelasi browser
anuland toate frame-urile

&xemplu de mai !os arata cum se poate desc$ide o paina intr-o noua fereastra a browserului. %n acest fel
putem ramane pe paina de tutoriale si desc$idem o noua paina de naviare.
<a $ref!$ttpD//www.google.com/! target!Eblan;!
>'oogle </a>
1izualizare
Google
HTML - Anc$or
&ste folosit pentru a lea doua sectiuni ale aceleiasi paini. %n acest sens va trebuii sa dam un nume
sectiunilor, dar pentru aceasta cel mai indicat ar fi sa aruncam o privire exemplului urmator.
<$*>GTHC - G#pertext &eference / $ref<a
name!top!></a></$*>
<$+>GTHC - Clin;-uri text<a name!text!></a></$+>
<$+>GTHC - Cin;-uri de e-mail<a name!email!></a>
</$+>

Mai departe trebuie sa formulam codul lin7-ului punand innaintea numelui anc$or-ului semnul diez 'K(.
<rmareste exemplul pentru mai buna inteleere.
<a $ref!%top!>Hergi la inceput </a>
<a $ref!%text!>Bnvata despre lin;-uri text </a>
<a $ref!%email!>Bnvata despre adrese de e-mail </a>
1izualizare
Mergi la inceput
Invata despre link-uri text
Invata despre adrese de e-ail

HTML - Lin7-uri de e-mail
0rearea unui lin7 de email este foarte simplu. Daca vrei ca cineva sa iti scrie un email cel mai bine ar fi sa
sa ii pui la dispozitie un lin7 cu email-ul tau si deasemenea un subiect prestabilit.
<a $ref!mailtoDcinevaIexemplu.comJ
sub"ect@elamuriri ! >@elamuriri aici </a>
1izualizare
!elauriri aici

%n cazul in care un subiect nu este de a!uns si vrei sa adaui ceva si la continutul email-ului, o poti face cu
a!utorul urmatorului cod"
<a $ref!mailtoDcinevaIexemplu.comJ
sub"ect@elamuririKbod#=crie aici daca ai nelamuriri !
>@elamuriri aici </a>
1izualizare
!elauriri aici

HTML - Lin7-uri de download
4orma unui lin7 de download este exact aceeasi ca a unui lin7 normal de text. +roblema intervine atunci
cand vrem sa punem o fotorafie. 0ea mai buna solutie ar fi sa folosim un tumbnail cu un lin7, dar vom
discuta aceasta problema mai pe lar in lectia urmatoare.
<a
$ref!$ttpD//www.tutoriale$tml.com/$tmlT/text.zip!>Text
4ocument</a>
HTML - L%n7-uri default * Lin7-uri de baza
4olosesta ta-ul ,base- in interiorul elementului head pentru a seta un lin7 de baza. Acesta este necesar
in cazul in care ai pe undeva un lin7 care nu functioneaza corect sau a carui destinatie numai exista. Lin7-
ul de baza redirectioneaza user-ul la adresa specificata. %n mod normal se redirectioneaza catre paina de
start, dar este acceptata oricare alta paina, eventual o paina special facuta acestui scop.
<$ead>
<base $ref!$ttpD//www.tutoriale$tml.com/!>
</$ead>
HTML - Entitati 4 Sim!oluri
%n HTML "entitati" este un numele te$nic pentru "simboluri". 0ateva simboluri precum cop)ri$t,
trademar7, si multe altele, unele dintre ele disponibile pe tastatura, au nevoie de o scriere speciala.
Bncepe cu semnul !end! - K
4upa care vom scrie numele semnului - cop#
=B la sfarsit !punct si virgula! - L
Cop%rig$t
6oloseste Kcop#L pentru a realiza- M - =imbolul
3op#rig$t.

#patii multiple si ,-
Dupa cum am spus si in lectia despre pararafuri, un browser va recunoaste un sinur spatiu, indiferent de
cat de multe tastezi intr-un cod de HTML. &xista insa o entitate care poate fi introdusa pentru a afisa mai
mult de un spatiu.
<p> Bn acesta fraza au fost introdese
KnbspLKnbspLKnbspLKnbspL mai multe spatii.<p>
1izualizare
Bn acesta fraza au fost introdese mai multe spatii.

+entru a realiza comenzi in HTML sunt folosite simbolurile "mai mult" si "mai putin". +entru a fi afisate in
browser va trebuii sa folosim o entitate.
<p>
Hai putin - KltL <br/>
Hai mult - KgtL <br />
Tagul $ead - KltL$eadKgtL
</p>
1izualizare
Hai putin - <
Hai mult - >
Tagul $ead - <$ead>
HTML - Crearea de lin.-uri tip e-mail
0rearea de lin7-uri tip e-mail este foarte simpla. Trebuie mentionat insa ca atunci cand vei pune un lin7
tip e-mail pe o paina publica, este foarte usor pentru un expert sa il aseasca pentru al folosi mai tarziu,
in vederea trimiteri de mesa!e spam.
2 metoda diferita, care scade riscul spam-ului este acea de a implementarea unui (ormular e-mail in
continutul painii tale.
HTML - Lin7-uri de e-mail
0rearea unui lin7 de email este foarte simplu. Daca vrei ca cineva sa iti scrie un email cel mai bine ar fi sa
sa ii pui la dispozitie un lin7 cu email-ul tau si deasemenea un subiect prestabilit.
,a $refE"mailto"cinevaPexemplu.com:sub!ectE6elamuriri "
-6elamuriri aici ,*a-
1izualizare
1elamuriri aici

%n cazul in care un subiect nu este de a!uns si vrei sa adaui ceva si la continutul email-ului, o poti face cu
a!utorul urmatorului cod"
,a $refE"mailto"cinevaPexemplu.com:
sub!ectE6elamuririQbod)E#crie aici daca ai nelamuriri "
-6elamuriri aici ,*a-
1izualizare
1elamuriri aici
HTML - Inserarea de imagini
%mainile sunt foarte importante intr-o paina web. De aceea este recomandat sa le folosesti in mod
corect. %nserarea lor se face cu a!utorul ta-ului ,im*-.
<img src!../img/image."pg! />
1izualizare

HTML - im src
"src" este prescurtarea pentru "source" 'sursa(. Acest atribut se foloseste pentru a indica locatia
fotorafiei. Dupa cum am explicat in capitolul destinat lin7urilor se poate folosi orice tip de <GL pentru a
indica adresa fisierului.
"ursa #ocala Descriere
src!image."pg!
fotografia este situata pe acelasi nivel cu
fisierul .$tml
src!../image."pg!
fotografia este situata pe un nivel anterior
fisierului .$tml.
src!../img/image."pg!
fotografia este situata in folderul !img! pe
nivelui anterior fisierului .$tml

#e poate folosi deasemenea adresa completa a fotorafie. De exemplu
scrE"$ttp"**www.tutoriale$tml.com*im*imae.!p". Acest model de <GL nu este recomandat deoarece
la sc$imbarea domeniului va trebui sa sc$imbi deasemenea si adresele tuturor fotorafiilor. #au in cazul
in care imainea este stocata pe un alt domeniu scrE"$ttp"**www.domeniu.com*imae.!p".
4aptul de a stoca imainea pe un domeniu alternativ, prezinta un mare avanta! in cazul in care dispui de
un spatiu limitat pe domeniul pe care este stocat fisierul .$tml.
HTML - Atribute alternative pentru imaini
Atributul "alt" este folosit pentru a afisa un text in locul imaini, in cazul in care browser-ul pentru un
oarecare motiv nu poate afisa imainea sau in cazul in care un user are deselectata functia "#$ow%mae".
<img src!$ttpD//example.com/folder/image."pg!
alt!Bmagine Albastra !/>
1izualizare
HTML - inaltimea si latimea unei imaini
+entru a stabili inaltimea si latimea unei imaini sunt folosite atributele height si !idith.
<img src!../img/image."pg! alt!Bmagine Albastra!
widt$!*))! $eig$t!.)! />
1izualizare
HTML - Alinierea orizontala si verticala a unei imaini
%n acest sens, sunt folosite atributele align si "align. 2btiunile oferite de aceste atribute sunt"
>. Alin 'orizontal(
ri$t
left
center
..1ali$ 'vertical(
top
bottom
center
Am atasat alaturat si un exemplu"
<p>Acesta este primul paragraf ...</p>
<p>
<img src!../img/image."pg! align!left!>
Acesta este cel deal doilea paragraf...
</p>
<p>Acesta este cel de-al treilea paragraf...</p>
1izualizare
Acesta este primul paragraf, este doar un exemplu
pentru a putea intelege mai bine alinierea unei imagini.
Acesta este cel deal doilea paragraf, Bmaginea va fi
afisata alaturat in partea dreapta, acesta
este cel deal doilea paragraf, Bmaginea va
fi afisata alaturat in partea dreapta,
acesta este cel deal doilea paragraf,
Bmaginea va fi afisata alaturat in partea dreapta, acesta
este cel deal doilea paragraf, Bmaginea va fi afisata
alaturat in partea dreapta,
Acesta este cel de-al treilea paragraf si ultimul, el nu
contine nimic dar l-am pus pentru ca !da bine!.
HTML - 4olosirea imainilor ca lin7
Aceasta este doar o introducere, vom trata acest subiect mai pe lar intr-un tutorial urmator. %mainile
sunt foarte utile pentru lin7-uri si se pot forma cu a!utorul codului urmator"
<a $ref!$ttpD//www.tutoriale$tml.com!>
<img src!../img/image."pg!> </a>
1izualizare

%mainea de mai sus te va trimite la paina de start. 2 poti sc$imba cu paina ta de start si vei obtine o
imaine cu cu un lin7 catre paina ta de start.
HTML - Tumbnails
Tumbnails-urile sunt versinui in miniatura 'mult mai putini 7ilob)tes( a unor imaini care in realitate sunt
mult mai mari si cu o calitate sporita. +entru a realiza un tumbnail, salveza imainea intr-o calitate mult
mai scazuta cu dimensiuni reduse. 4a apoi aceasa imaine un lin7 ce va conduce la imainea initiala de de
dimensiuni sporite.
<a $ref!../img/fereastra."pg!> <img
src!../img/tumbEfereastra."pg!> </a>
1izualizare

HTML - Lin.-uri imagine
0u a!utorul imainilor poti da putina viata unei paini web. Transformarea unei imaini intr-un lin7 nu
este nicidecum dificila. Trebuie doar sa introduci sursa imaini in interiorul ta-ului de lin7.
<a $ref!$ttpD//www.tutoriale$tml.com!><img
src!../img/image."pg!></a>
1izualizare
%n eneral prin default ma!oritatea browser-elor adaua o marine fotorafiei folosite drept lin7, pentru a
fi mai usor diferentiata de o fotorafie normala.
+entru a nu avea probleme de vizualizari diferite in functie de browser putem seta
marinea la o valoare definita.
<a $ref!$ttpD//www.tutoriale$tml.com!><img
src!../img/image."pg! border!)!></a>
1izualizare
HTML - Tumbnails
Tumbnails-urile sunt versinui in miniatura 'mult mai putini 7ilob)tes( a unor imaini care in realitate sunt
mult mai mari si cu o calitate sporita. +entru a realiza un tumbnail, salveza imainea intr-o calitate mult
mai scazuta cu dimensiuni reduse. 4a apoi aceasa imaine un lin7 ce va conduce la imainea initiala de de
dimensiuni sporite.
<a $ref!../img/fereastra."pg!> <img
src!../img/tumbEfereastra."pg!> </a>
1izualizare

HTML - Formulare
4ormularele sunt una dintre unetele cele mai importante, folosite de un webmaster pentru a obtine
informatii importante despre un internaut, informatii precum email, nume, adressa, telefon sau orice alte
informaii.
%n functie de necesitati infoarmatia poate fi procesata si stocata intr-un fisier, se pot realiza statistici,
formulare de inscriere sau abonamente la informatia prezentata in paina ta si multe altele.
HTML - 0ampuri de text
%nainte sa intram in detalii t
rebuie expunem putin bazele unui formular. 0ampurile de text au cateva atribute care trebuiesc
mentionate inca de la inceput"
type - Determina tipul campului de text. De exemplu" text, trimite, sau parola.
name - Atribuie un nume campului pentru a pute face referire la el mai tarziu
size - #eteaza marimea campului.
malength - valoarea maxima de caractere ce pot fi introduse.
,form met$odE"post" actionE"mailto")ouremailPemail.com"-
6ame" ,input t)peE"text" sizeE">I" maxlent$E";I"
nameE"name"- ,br *-
+assword" ,input t)peE"password" sizeE">I" maxlent$E">I"
nameE"password"-
,*form-
1izualizare
6ame"
+assword"

6< folosi acest cod. Datele din formular nu vor fi criptate si nu vor fi siure din punct de vedere al
securitatii.
HTML - 4ormular de email
#a adauam acum si butonul de trimitere. %n eneral, butonul de "trimitere" ar trebuii sa fie ultimul si sa
aibe atributul name definit ca "Trimite". "#end", "#ubmit" sau ceva asemanator. Acest nume va fi numele
butonului.
1a trebui deasemenea sa specificam o destinatie a datelor introduse in formular la fel ca si modul de
transfer. Aceasta se poate face aauand urmatoarele atribute formularului.
method - 1om folosi metoda "post". Aceasta trimite formularul cu informatia introdusa fara sa
afiseze detalli userului.
a!tion - Acesta va fi folosit pentru a specifica <GL-ul unde va fi trimisa informatia.
6ame" ,input t)peE"text" sizeE">I" maxlent$E";I"
nameE"name"- ,br *-
+assword" ,input t)peE"password" sizeE">I" maxlent$E">I"
nameE"password"-,br *-
,input t)peE"submit" valueE"#end"- ,*form-
1izualizare
6ame"
+assword"
Send

Trebuie doar sa sc$imbi adresa de e-mail cu una valabila pentru ca formularul sa functioneze corect.
HTML - 3utoane Gadio
"utoanele #adio sunt foarte populare, utile si usor de folosit. 0el mai intalnit exemplu a fi o intrebare cu
multiple variante de raspuns. Atributele care ar trebuii cunoscute sunt urmatoarele.
value - specifica ceea ce va fi trimis in cazul in care un user selecteaza un anume buton. Doar o
sinura valoare va fi trimissa.
name - decide carui set de butoane apartine butonul selectat.
0e tip de pantofi porti : ,br *-
0uloare"
,input t)peE"radio" nameE"culoare" valueE"inc$is"-%nc$is
,input t)peE"radio" nameE"culoare" valueE"desc$is"-Desc$is
,br *-
Marime"
,input t)peE"radio" nameE"marime" valueE"mica"-Mica
,input t)peE"radio" nameE"marime" valueE"medie"-Medie
,input t)peE"radio" nameE"marime" valueE"mare"-Mare ,br *-
,input t)peE"submit" valueE"&mail M)self"- ,*form-
1izualizare
0e tip de pantofi porti :
0uloare" %nc$is Desc$is
Marime" Mica Medie Mare
Email Myself

%n cazul in care vei inlocuii adresa de email cu a ta vei primi un email cu" "marimeE'alee(
culoareE'alee(".
HTML - 0$ec7box
0u a!utorul Che!$"o%-urilor userul are posibilitatea de a alee unul, doua sau mai multe variante de
raspuns. Atributele name si value se folosesc la fel ca si pentru butoanele radio.
,p-0e culoare de pantofi preferi : ,*p- ,p-
,input t)peE"c$ec7box" nameE"pantofi" valueE"neru"-6eru
simplu ,br*-
,input t)peE"c$ec7box" nameE"pantofi" valueE"alb"-Alb simplu
,br*-
,input t)peE"c$ec7box" nameE"pantofi" valueE"ri"-6uante de
ri ,br*-
,input t)peE"c$ec7box" nameE"pantofi" valueE"alb neru "-Alb
cu neru ,br*-
,input t)peE"submit" valueE"&mail M)self"-,*p- ,*form-
1izualizare
0e culoare de pantofi preferi :
6eru simplu
Alb simplu
6uante de ri
Alb cu neru
Email Myself
HTML - Alte tipuri de formulare de liste
<n alt model de formular tip lista este urmatorul, in care userul selecteaza o anumita linie care va fi
trimisa ca si optiunea aleasa.
+referinte muzicale
,select multiple nameE"music" sizeE";"-
,option valueE"emo" selected-&mo,*option-
,option valueE"metal*roc7" -Metal*Goc7,*option-
,option valueE"$ip$op" -Hip Hop,*option-
,option valueE"s7a" -#7a,*option-
,option valueE"!azz" -Cazz,*option-
,option valueE"countr)" -0ountr),*option-
,option valueE"classical" -0lassical,*option-
,option valueE"alternative" -Alternative,*option-
,option valueE"oldies" -2ldies,*option-
,option valueE"tec$no" -Tec$no,*option-
,*select-
,input t)peE"submit" valueE"&mail Rourself"- ,*form-
1izualizare
+referinte muzicale
Email Yourself

<n alt model de formular este meniul "dropdown". Acesta va fi afisat ca si un camp, care va afisa o lista
atunci cand este executat un cli7 asupra lui.
6ivel de studii:
,select nameE"studii"-
,option-Alee,*option-
,option-#coala Denerala ,*option-
,option-Liceu,*option-
,option-+ostliceala,*option-
,option-4acultate,*option-
,option-Doctorat,*option-
,input t)peE"submit" valueE"&mail Rourself"-
,*select-
,*form-
1izualizare
6ivel de studii:
Email Yourself
HTML - formular de upload
Mai intai de toate trebuie mentionat ca acest formular este doar interfata, partea vizibila cu care un user
va putea interactiona.. +entru a face un formular complet de upload sunt necesare cunostinte de +H+ si
+&GL iar !avascriptul este si el binevenit.
<n formular de upload este compus din mai multe parti. 1om incepe prin a stabili marimea fisierului pe
care il vom uploada. Acest lucru se face cu a!utorul unui cam ascuns. %n continuare vom crea campul
propriu-zis in care userul va putea scrie adresa fisierului sau pur si simplu sa sa dea browse pentru a
desc$ide o fereastra windows explore.
,input t)peE"$idden" nameE"MA@S4%L&S#%J&" valueE">II" *-
,input nameE"file" t)peE"file" *-
1izualizare
HTML - Jone de text, 0omentarii
%n eneral zonele de text sunt foosite pentru a trimite comentarii. 3lourile si forumurile sunt principalele
tipuri de paini web care folosesc aceste optinui. Totusi exista multe alte tipuri de situri care folosesc
zonele de text pentru a afla parerea userilor despre un anumit aspect.
+entru a crea o zona de text vom specifica mai intaii atributele ro&s si !ols in interiorul ta-ului
,textarea-. "Gows" va stabilii innaltime campului in linii de caractere iar "cols" lunimea unei linii in
caractere. %n exemplul urmator exista B linii a cate .I de caractere. De asemenea strebuie specificat unul
dintre atributele taului &rap, acestea sunt"
5rap6
1. "o(("
2. "virtual"
3. "p$%sical"
1om insista mai mult pe explicarea acestor valori in tutorialul destinat campurilor de
text
,textarea rowsE"B" colsE".I" wrapE"p$)sical" nameE"comments"-
#crie un comentariu
,*textarea- ,input t)peE"submit" valueE"&mail Rourself"-
,*form-
1izualizare
Scrie un comentariu
Email Yourself

Deasemenea trebuie specificat ca ceea ce vei scrie intre taul de desc$idere si cel de inc$idere va apare
in interiorul zonei de text. %n acest caz a fost folosita o invitatie predefinita" "#crie un comentariu"
HTML - Ta!ele
Tabelele pot aparea dificile la inceput, dar cu putina rabdare si practica vei vedea ca nu sunt asa cum
par. Taul ,table- este folosit pentru a desc$ide un tabel. %nauntrul acestui ta vom asi alte doua tauri
tipice ,tr- 'liniile tabelului( si ,td- 'coloanele tabelului(. Dar cea mai buna explicatie ar fi in momentul
de fata un exemplu"
<table border!*!>
<tr><td>&ow * 3ell *</td><td>&ow * 3ell
+</td></tr> <tr><td>&ow + 3ell *</td><td>&ow +
3ell +</td></tr>
</table>
1izualizare
&ow * 3ell * &ow * 3ell +
&ow + 3ell * &ow + 3ell +

0ontinutul va fi plasat in interiorul casutelor tabelului. 2 casuta este ceea ce se afla intre ,td- si ,*td-.
Atributul border stabileste latimea marinii tabelului.
HTML - Tabele asimetrice
+entru a forma tabele asimetrice vom folosi "ro&span" pentru a traversa mai mute linii si "!olspan"
pentru a traversa mai multe coloane. Deasemenea daca vrem ca prima linie sa serveasca de titluri pentru
toate coloanele vom folosi taul ,t$-. Acestea vor fi scrise cu litere inrosate dupa cum vom vedea in
exemplu urmator"
<table border!*!>
<tr>
<t$>3olumn *</t$>
<t$>3olumn +</t$>
<t$>3olumn ,</t$>
</tr>
<tr><td rowspan!+!>&ow * 3ell *</td>
<td>&ow * 3ell +</td><td>&ow * 3ell ,</td></tr>
<tr><td>&ow + 3ell +</td><td>&ow + 3ell
,</td></tr>
<tr><td colspan!,!>&ow , 3ell *</td></tr>
</table>
1izualizare
$olun % $olun & $olun '
&ow * 3ell *
&ow * 3ell + &ow * 3ell ,
&ow + 3ell + &ow + 3ell ,
&ow , 3ell *
HTML - #patierea celulelor
0u a!utorul atributelor "cellpaddin" si "cellspacin" vom defini distanta dintre celule. "cellspacin"
stabileste marimea marinii, iar "cellpanddin" stabileste distanta dintre marine si continut. %n exemplu
urmator a fost adauata deasemenea putina culoare.
<table border!*! cellspacing="%("
bgcolor!rgb7),+..,)9!>
<tr>
<t$>3olumn *</t$> <t$>3olumn +</t$>
</tr>
3ell +</td></tr>
</table>
1%zualizare
Vizualizeaza acest exeplu intr-o )ereastra noua*

+entru a face mai bine diferenta vom elimina marinea din exemplu anterior.
<table border!*! cellpadding="%("
bgcolor!rgb7),+..,)9!>
<tr>
<t$>3olumn *</t$>
<t$>3olumn +</t$>
</tr>
3ell +</td></tr>
</table>
1izualizare

Distanta intre celule si dimensiunea marini va fi inerpretata de browser in pixeli. 0onform acestei "lei" o
valoare de >I sunt de fapt >I pixeli. Acest atribut nu este sinurul care foloseste ca unitate de masura,
pixeli, dar vom invata despre celelalte pe masura ce vom innainta in urmatoarele tutoriale.
HTML - 2gcolor
Atributul "bcolor" este folosit pentru a stabilii fondul de culoare al unui pararaf, tabel sau alte
componente ale HTML. &ste recomandata folosirea cu moderatie a acestui ta. #e recomanda in sc$imb
stabilirea culorilor de fond si a stilurilor de text normal sau de lin7uri, cu a!utorul 0##.
,"numeta" bcolorE"valoare"-
Aceasta este un model de cum se va folosi atributul bg!olor in interiorul unui ta.
,bod) bcolorE"#ilver"-
,p-Am stabilit culoarea ...,*p-
,*bod)-
1izualizare
7izualizeaza acest e3emplu intr-o (ereastra noua.

HTML - Adaua culoare tabelelor
Acest exemplu arata cum sa colorezi un tabel de diverse culori, folosint atributul "bcolor".
,table-
,tr bcolorE"K4444II"-,td-T$is Gow is Rellow/,*td-,*tr-
,tr bcolorE"KAAAAAA"-,td-T$is Gow is Dra)/,*td-,*tr-
,*table-
1izualizare
HTML - 4ont si bac7round impreuna
Mai intai de toate vom pune in practica un exemplu de o tabla de scoruri facand un !oc de culori pentru a
evidentia anumite aspecte.
,table bcolorE"KIIIIII"-
,tr-,td bcolorE"KIINNII"-
,font colorE"K4444II" alinE"ri$t"-#teaua,*font-,*td-
,td-,font colorE"K444444"-.L,*font-,*td-,*tr-
,tr-,td bcolorE"KIIII44"-
,font colorE"KDDDDDD" alinE"ri$t"-Dinamo,*font-,*td-
,td-,font colorE"K444444"-.I,*font-,*td-,*tr-
,*table-
1izualizare

&xemplu de pararaf colorat pe fond ri
,table bcolorE"KLLLLLL"-
,tr-,td-
,p-,font faceE"Monot)pe 0orsiva, 1erdana" sizeE";"
colorE"KII44II"- T$is pararap$ ta $as... ,*font-,*p-
,*td-,*tr-
,*table-

1izualizare
HTML - 2ac.ground
%n afara de o culoare solida pentu fond, se poate folosi la fel de bine o fotorafie. +entru a face acest
lucru urmareste cu atentie urmatorul exemplu.
<table $eig$t!*))! widt$!*.)!
bac;ground!../img/image."pg! > <tr><td>Acest text
are drept fond o imagine </td></tr> </table>
1izualizare

HTML - 3ac7round repetat 'tile(
%n primul exemplu am avut putin noroc pentru ca imainea si tabelul au coincis ca si marime. %nsa atunci
cand tabelul este mai mare decat imainea, aceasta se va multiplica si repeta la nesfarsit.
<table $eig$t!*))! widt$!+.)!
bac;ground!../img/image."pg! >
<tr><td>Acest text are drept fond o imagine
</td></tr> </table>
1izualizare
HTML - +atterned 3ac7rounds
Gepetarea unei imaini are o alta aplicatie dupa cum vom vedea in exemplu urmator. Aceasta functie a
browser-ului de a repeta imainea la nesfarsit se poate folosi ca un avanta! si anume, putem crea o
imaine foarete mica 'cu a!utorul +$otos$op sa 0orel +aint #$op +G2(, de esemplu ;x; pixeli. Aceasta
imaine poate fi un anume model care se va repeta continu.
%mainea"
%mainea a fost marita pentru a fi vazuta cu claritete.
<table $eig$t!*))! widt$!*.)!
bac;ground!../../img/pattern."pg! > <tr><td>T$is
table $as a bac;ground patterned image</td></tr>
</table>
1izualizare
HTML - 0uloare de fond transparenta
2 alta metoda de a folosi imaini repetate este fondul transparent. %n acest scop vom folosi o imaine
".if"
+lasarea acestei imaini in bac7round se face exact in aceasi maniera ca si in exemplul anterior.
<table bac;ground!../../img/transparent.gif! >
<tr><td>T$is table $as a red transparent bac;ground
image</td></tr>
</table>
1izualizare

HTML - Frame-uri
4rame-urile sunt folosite pentru a afisa mai multe documente .$tml intro fereastra. Aceata inseamna ca
vei avea o paina fara continut, care va avea rolut de a indica browser-ului ce paini trebuie sa afiseze.
2data cu introducerea +H+ si 0## aceasta te$nica a fost inlaturata putin cate putin, a!unand sa se
foloseasca foarte putin.
HTML - 4rames, +aina Denerica
%n eneral frame-urile se folosesc pentru a afisa un meniu pe de o parte iar continutul pe de o alta parte.
Atunci cand cineva da un cli7 pe un lin7 din meniu se va desc$ide o alta paina in partea de continut. 1om
exempifica toate acestea cu a!utorul codului urmator"
<$tml> <$ead></$ead>
<frameset cols!,)N,8!>
<frame src!menu.$tml!>
<frame src!content.$tml!>
</frameset>
</$tml>
1izualizare

(rameset - &ste taul care stabileste caracteristicile frame-ului. 4rame-urile individuale vor fi
definite i nauntrul lui.
(rameset cols689:' ;8- "0ols" stabileste inaltime pe care fiecareframe o va avea. %n exemplul
anterion am stabilit ca primul frame 'meniul( va ocupa 9IT din suprafata afisata, si am folosit semnul " A "
pentru a indica browser-ului ca in restul painii ramase se va afisa continutul painii.
(rame src688 - adresa fisierelor care vor fi afisate ca meniu si respectiv continut.
HTML - 4rame- Adauarea unui banner sau Titlu
4olositi codul urmator"
<$tml><$ead></$ead>
<frameset rows!+)N,8!>
<frame src!title.$tml!>
<frame src!content.$tml!>
</frameset> </$tml>

(rameset ro5s689:' ;8- "rows" stabileste inaltimea fiecarui frame care va fi afisat. %n exemplul anterior
am ales ca primul frame va fi .IT iar restul de spatiu ramas va fi impartit intre menu.$tml si
content.$tml.
HTML - 4rame - Marine si #patiere
+robabil ai observat ca intera frame-uri raman niste linii ri care de multe ori nu sunt dorite. %nlaturarea
lor este posibila cu a!utorul rameborder si ramespa!iing. Aceste atribute vor fi introduse innauntru
ta-ului rameset.
;;1ota" %n realitate frameset si frameborder este acelasi atribut. &xista insa browsere care nu recunosc
decat unul dintre cele doua. Deaceia, sfatul nostru, este sa le folositi pe amandoua pentru mai multa
siuranta.
(rame!order6898 - 1aloarea I nu reproduce marine.
!order6898- modifica rosimea marinii. 'folosit de netscape(
(ramespacing6898 - modifica rosimea marinii 'folosit de %nternet &xplorer(
%ata si un exemplu practic"
<$tml><$ead></$ead>
<frameset border!)! frameborder!)!
framespacing!)! rows!+)N,8!>
<frame src!title.$tml!>
<frameset border!)! frameborder!)!
framespacing!)! cols!,)N,8!>
<frame src!content.$tml!> </frameset> </$tml>
HTML - "rame name" si "rame target"
+entru a menitine meniul in pozitia actuala iar cand executam clic pe paina de contact de exemplu sa se
desc$ida in locul paini de continut, vom da un nume fiecarui frame si vom precisa locul unde se va
desc$ide cu a!utorul base target.
%ata si codul pentru paina noastra
<$tml><$ead>
<base target!content!>
</$ead>
<frameset rows!+)N,8!>
<frame name!title! src!title.$tml!>
<frame name!menu! src!menu.$tml!>
<name!content! src!content.$tml!>
</frameset>
</$tml>

6oresize si scrollin
4rame-ul se mai poate personaliza inca putin folosind atributele neresize si s!rolling.
<$tml><$ead></$ead>
<frameset border!+! frameborder!*!
framespacing!+! rows!+)N,8!>
<frame src!title.$tml! noresize scrolling!no!>
<frameset border!-! frameborder!*!
framespacing!-! cols!,)N,8!>
<frame src!menu.$tml! scrolling!auto! noresize>
<frame src!content.$tml! scrolling!#es! noresize>
</frameset> </$tml>

no resize - nu lasa ca framul sa se redimensioneze in functie de monutorul vizitatorului
s!rolling'()yes/no*(- permite sau nu sroll-ul intr-un frame
HTML - La%outs
<n layout nu are prea multe optiuni. +& de alta parte un table este foarte folositor. %ntr-un tabel poate fi
introdus cam orice element, c$iar si un alt tabel.
<table id!s$ell! bgcolor!blac;! border!*!
$eig$!+))! widt$!,))!>
<tr><td> <table id!inner! bgcolor!w$ite!
$eig$!*))! widt$!*))!>
<tr><td>Tables inside tables?</td></tr>
</table> </td></tr></table>

0opiaza acest cod in notepad si salveazal ca un document .$tml.
HTML - la)out standard
<n la)out standard consta intr-un banner in zona de sus a painii un meniu in partea din stana iar zona
de continut in partea de dreapta-mi!loc. Acesta este cel mai clasic la)out pentru un website, iar dupa
parerea mea un model foarte
<table cellspacing!*! cellpadding!)! border!)!
bgcolor!blac;! id!s$ell! $eig$t!+.)! widt$!-))!>
<tr $eig$t!.)!><td colspan!+! bgcolor!w$ite!>
<table title!(anner! id!banner! border!)!>
<tr><td>Place a banner $ere</td></tr>
</table>
</td></tr> <tr $eig$t!+))!><td bgcolor!w$ite!>
<table id!navigation! title!@avigation! border!)!>
<tr><td>Cin;s?</td></tr>
<tr><td>Cin;s?</td></tr> <tr><td>Cin;s?</td></tr>
</table>
</td><td bgcolor!w$ite!> <table title!3ontent!
id!content! border!)!> <tr><td>3ontent goes
$ere</td></tr>
</table>
</td></tr></table>
1izualizare
Vezi acest exeplu intr-o )ereastra noua

Aceasta este o abordare de baza. Dupa cum vei observa daca vei folosi aceste la)out-uri in painile tale,
va daveni foarte complex pe masura ce vei adaua continut. 0u toate acestea este important sa specifici
inaltimea '$ei$t( si latimea 'widt$(. 0u cat vei fi mai specific in stabilirea acestor atribute cat si a altora
cu atat mai putine bu-uri vei avea.
<table id!s$ell! title!=$ell! $eig$t!+.)! widt$!-))!
border!)! bgcolor!blac;! cellspacing!*!
cellpadding!)!> <tr $eig$t!.)!><td
bgcolor!w$ite!>
<table title!banner! id!banner!>
<tr><td>(anner goes $ere</td></tr>
</table>
</td></tr> <tr $eig$t!+.!><td bgcolor!w$ite!>
<table title!@avigation! id!navigation!>
<tr><td>Cin;s?</td> <td>Cin;s?</td> <td>Cin;s?
</td></tr>
</table>
</td></tr> <tr><td bgcolor!w$ite!>
<table title!3ontent! id!content!> <tr><td>3ontent
goes $ere</td></tr>
</table> </td></tr></table>

#tudiaza putin acest cod, oranizeazal in asa masura incat sa il poti intelee. 0opiazal intr-un document
nou pentru a-l vizualiza
HTML - )<--Comentarii--*
Comentariile sunt folosite des in codurile HTML. De aceea este important sa fiene smenalate browserului
pentru a evita afisarea lor.
#unt mai multe motive pentru care putem sa plasam un comentariu in interiorul unui script $tml.
2 nota sau un reminder, o specificatie sau o crarificare.
0omentarii !avascript
<n element lasat neterminat
Comentariul va fi plasat intere semnele ",/--" si "---" . %n acest fel vom putea lasa o
nota pentru ca mai tarziu sa ne dam seama ce este ceeea ce face codul respectiv sau ce anume ramane
de introdus.
<?--Bnceputul codului care afiseaza o fotografie-->
<img src!../img/banner.gif! widt$!*.)!
$eig$t!.)! />
<?--=farsitul codului care afiseaza o fotografie-->
1izualizare

Acesta este doar un exmplu de ceea ce poti comenta intr-un script. 0u timpul vei invata ca aceste
comentari sunt foarte utile pentru inteleerea ulterioara a codului.
2rice text sau combinatie de caractere, simboluri sau orice altceva ce vei plasa intre taul de desc$idere
" ,/-- " si taul de inc$idere " --- ", nu vor fi afisate de catre browser.
HTML - #cript neterminat
0omentariile se dovedesc folositoare atunci cand lucrezi la un script dar il lasi neterminat. +lasarea lui
intre cele doua ta-uri ',/--cod---( va fi interpretat de browser ca si un comentariu si in consecinta nu va
fi afisat.
<?-- <input t#pe!text! size!*+! /> -- Bnput 6ield -->

0and vei termina codul si va trebuii sa il afisezi tot ceea ce trebuie sa faci este sa steri cele doua ta-uri
' ,/--cod---( iar browserul va afisa scriptul dorit.
<input t#pe!text! size!*+! />
1%zualizare

HTML - Cavascript coments
0omentariile sunt deasemenea folosite in !avascript. 1om vorbi in sc$imb despre aceasta intr-un proxim
tutorial, dedicat acestei teme. Aceste comentari vor avea insa un alt scop decat cel informativ
Tag-uri )meta*
Taul meta este folosit pentru a enera informatii aditionale motorului de cautare. Aceste informatii nu
vor fi vizibilu unui vizitant decat daca acesta va selecta view "#ource" din meniul "1iew" unde va avea
acces la partea HTML a painii.
=e)word-uri in meta
%n taul meta pot fi puse cuvinte sau fraze c$eie. 1or fi puse aici cele mai importante cuvinte c$eie care
pot tareta situl tau. &ste recomandabil sa nu se faca abuz de acest ta, deoarece folosirea de cuvinte
c$eie care se repeta sau care nu au leatura cu continutul sitului, nu vor aduce nuci un beneficiu nici
motoarelor de cautare si nici utilizatorilor.
%ata un exemplu moderat de a folosi taul meta
)$ead*
)meta name68.e%5ords8 content68Tutoriale' zizi3' HTML'
5e!' resurse' 5e!masteri 8 4*
)4$ead*

Acest exemplu este bazat pe profilul aceste paini.
Dupa cum se observa name specifica ce fel de ta meta se va folosi. deasemenea trebuie mentionata
virula folosita pentru a separa cuvintele c$eie, ceva banal dar pe care multi il uita atunci cand trec la
actiune.
Description in meta
Acest ta este o descriere a sitului. #e va folosi o fraza cel mult doua pentru a completa continutul
acestui ta
)$ead*
)meta name68description8 content68=n 5e!site de resurse
pentru cei dispusi sa invete HTML dar si pentru 5e!masteri
8 4*
)4$ead*

Dupa cum se vede cuvintele c$eie si descrierea sunt asemanatoare. Asa si trebuie deoarece in cazul in
care nu se aseamana vei fi inorat de catre anumite motoare de cautare.
Taul Gevised in meta
#e foloseste pentru a specifica ultima actualizare a websitului.
)$ead*
)meta name68revised8 content68+4>?4&>>?8 4*
)4$ead*
Gefres$ si Gedirect din meta
Gefres$-ul se face cu a!utorul atributului http-e+uiv'(reresh(. #copul acestui ta este de a reincarca
paina si a afisa noi informatii in cazul unei actualizari. 2 aplicatie destul de folositoare unui forum spre
exemplu.
)$ead*
)meta $ttp-e@uiv68re(res$8 content68+>A
url6$ttp,44555.tutoriale$tml.com8 4*
)4$ead*

0at despre redirect se face la fel de simplu sc$imband adresa painii web cu cea spre care se doreste
redirectionarea. Aplicatia este bine venita atunci cand se cumpara un nou domeniu si se doreste
redirectionarea vizitatorilor spre locatia noii paini.
)$ead*
)meta $ttp-e@uiv68re(res$8 content68BA
url6$ttp,44555.etutoriale.ro8 4*
)4$ead*
Inserarea Cavascript si 7!script in HTML
Cavascript si vbscript sunt deseori folosite in codul unei paini in HTML pentru a da mai multa animatie,
sau pur si simplu pentru una dintre multele aplicatii care sunt facilitate de aceste scripturi.
0u a!utorul acestora se pot creea paini dinamice animatii ale fotorafiilor, un meniu animat cu efecte
surprinzatoare si multe altele. Deasemenea una dintre aplicatiile cele mai importante este aceea de a
valida un formular innainte de a fi trimis. Acesta va scuti userul de mult timp pierdut in cazul in care a
introdus resit datele fiindi nevoie de reincarcarea painii si recompletarea campurilor.
%n aceasta sectiune vom vorbi doar de modalitatea de inserare a scriptuluiA in HTMl.
6ota" De multe ori este mult mai simplu sa descarci de la altcineva aceste scripturi decat sa le scrii.
Desiur acest lucru este posibil in cazul in care persoana respectiva si-a dat acordul in prealabil.
%nserarea Cavascript in HTML
%ntroducerea unui cod !avascript se face foarte simplu cu a!utorul taului s!ript. %ata si un exemplu"
)script t%pe68te3t40avascript8*
)<--script
;;;Aici va (i introdus scriptul 0avascript;;;
--*
)4script*

+entru codurile !avascript se va da atributului type valoarea Ute%t/,avas!ript-.
%nserarea 1bscript in HTML
%nserarea unui cod vbscript se face in aceeasi maniera ca si a codului !avascript cu exceptia inlocuirii
valorii #tet$ja"ascriptU a atributului type cu (te%t/vbs!ript(. %ata si exemplul"
)script t%pe68te3t4v!script8*
)<--script
;;;Aici va (i introdus codul v!script;;;
--*
)4script*

&ste intotdeauna recomandabil introducerea unui comentariu alaturi de codurile !avascript si vbscript.
Acasta va atentiona browser-ele care nu suporta acest tip de script, sau care au !avascript si vbscript
disabled.
%nserarea codurilor pentru muzica in HTML
0u ceva timp in urma era destul de complicat sa introduci muzica sau sunete un eneral pe o paina web.
%n momentul de fata aceasta problema s-a rezolvat, adauarea de sunete fiind
foarte simpla.
)EM2ED
S/C68sound.mid8 $idden68(alse8 autostart68(alse8
loop68(alse8 volume68->8 5idt$68+EE8 $eig$t68->84*

#e recomanda ca atat innaltimea cat si latimea sa fie direct proportionale pentru a evita distorsionarea
pla)erului.
+entru a ascunde pla)erul valoarea atributului hidden 'false( se va inlocuii cu -true-. Acest lucru se va
face doar in cazul in care esti absolut siur ca userul nu va dorii sa opreasca sunetul.
0ontrolul si manipularea pla)erului
#a mai aruncam o privire exemplului de mai sus"
)EM2ED
S/C68sound.mid8 $idden68(alse8 autostart68(alse8
loop68(alse8 volume68->8 HEIFHT6-> GIDTH6+EE4*

autostart - stabileste daca sunetul va incepe imediat dupa incarcarea painii web. +oate avea
valoarea true sau false
loop - stabileste daca sunetul va fi repetat la nesfarsit. +oate avea valoarea true sau false.
volume - poate avea orice valoare intre I si >II
&xperimenteaza putin cu aceste atribute pentru a le intelee mai bine si retine ca un volum ridicat este
de cele mai multe ori suparator pentru utilizator.
Inserarea de coduri pentru 7ideo in HTML
<n fisier video se poate insera intr-o paina $tml de doua moduri. +rima modalitate ar fi cu a!utorul
taului <embed/>. Acest ta nu are nevoie de un altul de inc$idere, functioneaza in mare masura la fel
ca si un ta de introducere a unei fotorafii.
)em!ed src68e3ample.mpeg8
autostart68(alse8 HEIFHT6-> GIDTH6+EE4*

Deasemenea se poate introduce un fisier video cu a!utorul unui lin7
)a $re(68e3ample.mpeg8*(ilm name )4a*
(ilm name
&xtensi video suportate de taul embed
Acestea sunt dupa cum urmeaza"
.swf - creat de Macromedia 4las$
.wmv - Microsoft 8indows Media 1ideo
.mov - Vuic7 Time Movie, apartine Apple
.mpe files - creat de Movin +ictures &xpert Droup.
0ele mai folosite find .mpe si .swf, datorita formaului compact.
Atribute ale taului embed
autostart - stabileste daca fisierul va rula imediat dupa incarcarea painii. +oate avea valoarea
true sau (alse.
$idden - stabileste daca butoanele sunt sau nu ascunse. +oate avea valoarea true sau (alse.
volume - poate avea orice valoare intre I si >II
loop - stabileste daca fisierul va fi reprodus in cerc sau nu. +oate avea valoarea true sau (alse.
pla%count - acesta stabileste de cate ori va fi reprodus fisierul. #pre exemplu pla%count68&8 'va
fi reprodus de doua ori dupa care se va opri(.
%ntroducerea unui video de pe RouTube
Acest lucru se face foarte simplu, )outube avand pe paina fiecarui video codul HTML corespunzator.
)< -- Aici incepe codul Houtu!e --*
)o!0ect 5idt$68E&B8 $eig$t68IEE8*)param name68movie8
value68$ttp,44555.%outu!e.com4
v4=A@?@H1GM15J$l6enJ(s6+8*
)4param*)param name68allo5FullScreen8 value68true8*
)4param* )em!ed src68$ttp,44555.%outu!e.com4
v4=A@?@H1GM15J$l6enJ(s6+8 t%pe68application43-
s$oc.5ave-(las$8 allo5(ullscreen68true8 5idt$68E&B8
$eig$t68IEE8*)4em!ed*)4o!0ect*
)< -- Aici se termina codul Houtu!e --*

Adevarul este ca ai dreptate e cam $aotic tut ce vezi, dar partea buna este ca nu trebuie sa il faci tu ci
doar sa il copiezi de pe paina )outube, si vei avea ca rezultat reprezentarea de mai !os, sau una
asemanatoare in cazul in care alei alt video.
#ucces//
HTML - Tagul )!od%*
Dupa cum am mai mentionat intr-un tutorial anterior taul ,bod)- este cel care contine tot ceea ce va fi
afisat intro paina web" tabele, cadre 'frame-uri( formulare, pararafuri, fotorafii si orce altceva.
Toate acestea trebuiesc introduse intre ,bod)- si ,*bod)-.
Atribute ale taului bod)
leftmarin - stabileste o marine in partea stana a painii 'un spatiu ol(
topmarin - stabileste o marine in partea de sus a painii 'un spatiu ol(.
<n exemplu simplu ar fi"
)!od% topmargin68B>8*
Acest te3t se a(la la o distanta de B> de pi3eli de partea de
sus a paginii
)4!od%*
)!od% le(tmargin68B>8*
Acest te3t se a(la la o distanta de B> de pi3eli de partea
stanga a paginii
)4!od%*

+oti copia aceasta bucata de cod intr-un notepad, salvandu-l ca .$tml, pentru a vizualiza mai bine.
0uloarea textului default stabilita cu taul bod)
)!od% te3t68red8 *
sau
)!od% te3t68rg!&BB'>'>"8 *

Acest frament de cod va stbilii culoarea de baza a fontului ca fiind rosu doar in cazul in care nu se
specifica o culoare alternativa in interiorul taului de pararaf, ,p-.
0uloarea lin7urilor stabilita cu taul bod)
%n aceeasi masura se pot stabilii culorile lin7urilor vizitate sau nevizitate cu a!utorul taului bod).
)!od% lin.685$ite8 vlin.68!lac.8 *
sau
)!od% lin.68rg!&BB'&BB'&BB"8 vlin.68rg!>'>'>"8 *

Aceasta metoda se foloseste foarte rar, utilizanduse in sc$imb formatarea cu a!utorul 0## '0ascadin
#t)le #$eets(, fiind mult mai usor si mai practic.
HTML - Tagul Div
Taul div este nu este altceva decat un suport pentru alte tauri. %ata cateva atribute ale acestui ta"
id
title
st%le
$eig$t
5idt$
Gestul atributelor nu se folosesc in eneral functiile lor fiind cedate 0##-ului.
%ata si un exemplu de folosire a taului <div> "
)div id68menu8 align68rig$t8 *
)a $re(6898*HOME)4a* K )a $re(6898*CO1TACT)4a* K )a
$re(6898*A2O=T)4a*
)4div*
)div id68content8 align68le(t8 !gcolor685$ite8* )$B*Titlu
Aici )4$B*
)p*Iar aici va (i si continutul paragra(ului. Iar a...)4p*
)4div*
1izualizare
HOME K CO1TACT K A2O=T
Titlu Aici
Iar aici va (i si continutul paragra(ului. Iar aici va (i si
continutul paragra(ului. Iar aici va (i si continutul
paragra(ului.

Taul div este mult mai usor de folosit decat taul table, de aceea este recomandabil si preferabil,
folosirea lui ori de cate ori este nevoie.
Taul Div - usurinta in modificare
<nul dintre motivele pentru care este usor de folosit este introducerea noilor date cu facilitate si vom si
exemplifica acest locru.
%n exemplul urmator am adauat cateva campuri noi painii exemplificate mai sus.
)div id68menu8 align68rig$t8 *
)a $re(6898*HOME)4a* K
)a $re(6898*CO1TACT)4a* K
)a $re(6898*A2O=T)4a* K
)a $re(6898*SITEMA#)4a*
)4div*
)div id68content8 align68le(t8 *
)$B*Titlu Aici )4$B*
)p*Iar aici va (i si continutul paragra(ului. Iar aici va (i si
paragra(ului.)4p*
)$B *Titlu & Aici )4$B*
)p*Iar aici va (i si continutul paragra(ului &. Iar aici va (i si
continutul paragra(ului &. Iar aici va (i si continutul
paragra(ului &.)4p*
)4div*

Liniile albastere au fost adauate dupa formatarea initiala a painii.
HOME K CO1TACT K A2O=T KSITEMA#
Titlu Aici
Iar aici va (i si continutul paragra(ului. Iar aici va (i si
paragra(ului.
Titlu & Aici
Iar aici va (i si continutul paragra(ului &. Iar aici va (i si
continutul paragra(ului &. Iar aici va (i si continutul
paragra(ului &.
HTML - Te3t 2old
+entru a obtine textul inrosat vom folosii taul ,b-
)!*Acest te3t este !old)4!*
Afisare
Acest te3t este !old

Text inrosat - Aplicatii
%n eneral textul inrosat se foloseste pentru a scoate in evidenta anumite cuvinte sau anumiti termeni in
interiorul unei fraze.
)p*Te3tul )!*ingrosat)4!* este util pentru a scoate in evidenta
anumiti )!*termeni)4!*)4p*
Afisare
Te3tul ingrosat este util pentru a scoate in evidenta
anumiti termeni

#e poate folosii deasemena pentru scrierea tip definitie. Dar mai bine sa exemplificam.
)p*)!*2old)4!* - Cuvantul corespondent in engleza pentru ingrosat'
deasemena poate insemna' vitez. 8)4p*
Afisare
2old - Cuvantul corespondent in engleza pentru ingrosat'
deasemenea poate insemana' viteaz 8

HTML - Tagul Input
taul %nput nu are nevoie de un ta de inc$idere si poate avea numeroase atribute dupa cum urmeaza"
text
password
radio
c$ec7box
reset
submit
HTML - campuri de text si parole
0u siuranta ai completat o sumedienie de-a lunul timpului pe internet.
)input t%pe68te3t8 4*
)input t%pe68pass5ord8 4*
1izualizare

#crie ceva in casutele de mai sus pentru a nota diferenta.
HTML - c$ec7boxes
%deale pentru a oferi utilizatorului optiunea de a selecta mai multe variante e raspuns.
)input t%pe68c$ec.!o38 4*
1izualizare
HTML - Gadio
#i aici nu ma refer la un radio care canta si la un cerculet care ofera posibilitatea de a alee o sinura
varianta de raspuns in cazul in care avem de-a face cu o intrebare.
)input t%pe68radio8 4*
1izualizare
HTML - 3utoane de submit
Aici va trebuii sa dam si o valoare atributului submit, aceasta fiind textul care va fi afisat pe butonul
enerat.
)input t%pe68su!mit8 value68Su!mit8 4*
)input t%pe68su!mit8 value68Continuare**8 4*
Submit
Continuare>>
HTML - 3utoane de reset
Aici ca si la atributul submit va trebuii sa dam o valoare, aceasta fiind textul care va fi afisat pe butonul
enerat. Acest buton este foarte folositor in cazul in care userul completeaza marea ma!oritate a
formularului cu informatii resite sau eronate.
)input t%pe68reset8 value68/eset8 4*
)input t%pe68reset8 value68Sterge tot 8 4*

Reset
Sterge tot
HTML input fields - Mentiune
Trebuie specificat ca aceste formulare si butoane nu vor functiona pe deplin fara a!utorul unor fisiere in
p$p sau !avascript care sa execute aciunea dorita atunci cand se acceseaza un anumit buton.
%n tutorialul urmator vom face o aprofundare a atributelor studiate aici si deasemenea a unelor pe care
inca nu le-am mentionat.
HTML - Campuri de te3t te3t (ields"
0ampurile de text sunt intalnite sub forma formularelor. Acestea sunt ulteror procesate cu a!utorul unui
limba! de proramare de cele mai multe ori A#+ +&GL sau +H+.
Atributele aditionale care se folosesc pentru formatarea unui camp de text sunt
size
value
maxlent$
1om exemplifica in continuare pe fiecare in parte.
HTML - Marimea campului de text
Atributul size stabileste lunimea campului de text. Lunimea standard a unui camp de text este in
eneral intre .I-.B de caractere, dar poate varia depinzand de scopul formularului sau al campului in
sine.
)input t%pe68te3t8 size68B8 4*
)input t%pe68te3t8 size68+B8 4*
)input t%pe68te3t8 size68&B8 4*
%ata si rezultatul
<n alt atribut este UvalueU
4olosind acest atribut vom face posibila scrierea de informatie in campurile noastre, informatie pe care
userul o poate stere sau nu. Aceasta aplicatie este destul de folositoare in special atunci cand se
intereaza un script p$p care recunoaste un vizitator si retine optiunile inscrise de acesta.
)input t%pe68te3t8 size68B8 value68+&IEB8 4*
)input t%pe68te3t8 size68+B8 value68Lizi38 4*
)input t%pe68te3t8 size68&B8 value68Tutoriale HTML 8 4*
HTML - Maxlent$
Ma3lengt$ este unul dintre atributele cele mai folositoare ale campurilor de text, el impiedicand userul
sa introduca un sir de caractere mai mare decat cel dorit.
)input t%pe68te3t8 size68B8 ma3lengt$68B8 4*
)input t%pe68te3t8 size68+B8 ma3lengt$68+B8 4*
)input t%pe68te3t8 size68&B8 ma3lengt$68&B8 4*
%ata si rezultatul

in cazul in care vei dori sa introduci mai mult de B, >B si respectiv .B de caractere in campurile de mai
sus, acest lucru nu va fi posibil datorita restrictiei aplicata de catre "maxlent$" .
HTML - #ass5ord
0Ampurile cu parole sunt o cateorie aparte a taului input. 0u toate acestea constructia lor este la fel
de simpla ca a unui camp de text normal.
)input t%pe68pass5ord8 size68B8 ma3lengt$68B8 4*
)input t%pe68pass5ord8 size68+>8 ma3lengt$68+>8 4*

#i rezultatul este un camp in care textul este ascuns sub asteriscuri, stelute,
patratele sau cerculete nere, acest lucru depinzand de interpretarea browserului.
0ampuri de parole in HTML - Mentiune
Dupa cum se observa nu este mare diferenta intre structura unui camp normal de text si un camp care
contine o parola.
Trebuie mentionat ca aceste campuri de parole nu sunt criptate, iar folosirea lor asa cum a fost
exemplificat mai sus fara nici o masura de precautie nu este recomandata sub nici o forma.
0riptarea acestor campuri se realizeaza cu a!utorul altor limba!e de proramare de exemplu p$p sau
!avascript.
HTML - C$ec.!o3
0$ec7box-urile dupa cum am mai spus intr-un tutorial anterior, fac parte dintre aplicatiile pe care le
ofera taul input.
#pre deosebire insa de tutorialul anterior, aici vom trata acest subiect mai pe lar.
0$ec7box - 0rearea listelor
0$ec7box-urile vin in a!utorul utilizatorului facilitand aleerea simulatana am mai multor variane de
raspuns.
)p*Alege culorile care iti plac. .)4p*
Al!astru, )input t%pe68c$ec.!o38 name68culori8
value68al!astru8 4*)!r 4*
Fal!en, )input t%pe68c$ec.!o38 name68culori8
value68gal!en8 4*)!r 4*
/osu, )input t%pe68c$ec.!o38 name68culori8 value68rosu8
4*)!r 4*
7erde, )input t%pe68c$ec.!o38 name68culori8
value687erde8 4*
Alege culorile care iti plac. .
Al!astru,
Fal!en,
/osu,
7erde,
0$ec7box - 0asute selectate "b) default"
0$ec7box-urile ofera deasemenea posibilitatea de a fi bifate pentru a facilita in anumite situatii "munca"
userului.
Acest lucru se realizeaza cu a!utorului atributului !he!$ed acesta avand valoarea yes.
)p*Alege culorile care iti plac. .)4p*
Al!astru, )input t%pe68c$ec.!o38 c$ec.ed68%es8
name68culori8 value68al!astru8 4*)!r 4*
Fal!en, )input t%pe68c$ec.!o38 name68culori8
value68gal!en8 4*)!r 4*
/osu, )input t%pe68c$ec.!o38 name68culori8
value68rosu8 4*)!r 4*
7erde, )input t%pe68c$ec.!o38 c$ec.ed68%es8
name68culori8 value687erde8 4*
Alege culorile care iti plac. .
Al!astru,
Fal!en,
/osu,
7erde,
%ncercati sa va !ucati putin cu aceasta aplicatie destul e simpla zic eu dar foarte utila.
HTML - 2utoane radio
3utoanele radio sunt folosite pentru a permite userului sa selecteze una dintre optiunile listate. +entru a
realiza acest tip de formular va trebuii in primul rand sa dam un mume fiecarui camp.
)p* Alege nationaliatea)4p*
/omana, )input t%pe68radio8 name68nationalitate8 4*
Engleza, )input t%pe68radio8 name68nationalitate8 4*
/usa, )input t%pe68radio8 name68nationalitate8 4*
Alege nationaliatea
/omana,
Engleza,
/usa,

#pecificand un nume pentru cateoria din care face parte formularul vom instiinta
browser-ul pentru ca ulterior el sa faca diferenta intre mai multe formulare de tip radio permitand astfel
aleeraea unei sinure variante de raspuns pentru fiecare formular in parte.
&xemplu avansat"
/omana, )input t%pe68radio8 name68nationalitate8 4*
Engleza, )input t%pe68radio8 name68nationalitate8 4*
/usa, )input t%pe68radio8 name68nationalitate8 4*
)p*Alege se3ul)4p*
2ar!at, )input t%pe68radio8 name68se38 4*
Femeie, )input t%pe68radio8 name68se38 4*
Alege nationaliatea
/omana, Engleza, /usa,
Alege se3ul
2ar!at, Femeie,
HTML - 3utoane radio selectate "b) default"
La fel ca si la c$ec7box-uri, butoanele radio pot fi selectate pentru a facilita "munca" userului.
/omana,
)input t%pe68radio8 name68nationalitate8 c$ec.ed68%es8 4*
Engleza,
)input t%pe68radio8 name68nationalitate8 4*
/usa,
)input t%pe68radio8 name68nationalitate8 4*
Afisare
Alege nationaliatea
/omana,
Engleza,
/usa,

+oate fi selectat oricare dintre optiuni, nu neaparat prima. Deasemenea este bne sa folosim aceasta
metoda de a selecta anumite butoane, cu moderate si doar atunci cand informatia ceruta nu este de o
importanta ma!ora. &ste posibil ca din neatentie sau comoditate userul sa lase optiunea de!a selectata
fara ca aceasta sa fie cea corecta in cazul lui.

Tutoriale HTML WebDesign Programare

Încărcat de

Informații document

Titlu original

Drepturi de autor

Formate disponibile

Partajați acest document

Partajați sau inserați document

Opțiuni de partajare

Vi se pare util acest document?

Este necorespunzător acest conținut?

Drepturi de autor:

Formate disponibile

Tutoriale HTML WebDesign Programare

Încărcat de

Drepturi de autor:

Formate disponibile

Acest sir de tutoriale este conceput pentru a-ti oferi putina experienta, pentru ca tu sa fii capabil sa

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