Introducere

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 "<" (parantea desc!isa" si "#" (parantea inc!isa"$ cu
toate ca nu sunt c!iar parantee$ a%a se numesc si arata a%a& < #.
- Cele mai multe elemente (numite si tag-uri" au un element (tag" de desc!idere si un element
de 'nc!idere distins prin "(" in interiorul paranteei desc!ise "<".
E)emplu&
 ... 
- *rimul cu+,nt care apare 'n-untru "<" se nume%te element sau etic!eta HTML si spune
browser-ului sa fac- ce+a$ precum <./0T#
- Cu+intele care urmeaa dup- element in interiorul "< #"se numesc atribute care descriu
propriet-ile elementului. Cum ar fi & culoarea$ m-rimea$ etc.
- 1tributele sunt separate prin spatiu si urmate de semnul egal "2"$ dupa care sunt scrise$ intre
g!ilimele (" "" +alorile atributelor.
- 1stfel$ o etic!eta HTML poate contine elementul de identificare$ atribute si +alori.
- 3n urmatorul e)emplu elementul este ./0T atributul C/L/4 si +aloarea 5L6E&
Acest text va f albastru
2. Structura documentului HTML
<html>
<head>
<title>Titlu Documentului</title>
</head>
<body>
ontinutul !a"inii
</body>
</html>
#tructura "enerala a unui document $T%&
<HTML>
<H!"#> Acesta are si el mai multe sub'elemente(
<T$TL!> Aici se scrie titlul documentului) cat mai su"estiv) si se *ncheie
cu </T$TL!>
<B"%!> +oate f ,olosit !entru a *nre"istra loca-ia documentului in
,orma ./&0 1Necesar daca documentul nu este accesat in loca-ia lui ori"inala20
#e *ncheie cu</B"%!>
<L$N&> 3ndica o rela-ie dintre document si alte obiecte de !e 4560 #e
*ncheie cu </L$N&>
<M!T"> Aici sunt scrise in,orma-ii cum ar f tastatura 1limba72 ,olosita)
descrierea si cuvinte cheie care !ot f "8site de motoarele de c8utare0 #e
*ncheie cu</M!T">
<%CR$'T> on-ine oricare din 9ava#cri!t sau :6 #cri!t0 #e *ncheie
cu </%CR$'T>
<%T(L!> on-ine in,orma-ii !rivind stilul) "rafca in,orma-iilor care vor
a!8rea !e !a"ina0 #e *ncheie cu </%T(L!>
Aici se *ncheie elementele adau"ate in $5AD
</H!"#>
<BO#(> 5tichetele $T%& si continutul documentului care va f afsat in
!a"ina ;eb sunt incluse in acest element0 Aici !ot f !use si elemente cum ar
f( <%CR$'T> </%CR$'T>
#e *ncheie cu
</BO#(>
</HTML>
7intre editoarele de te)t cunoscute cel mai folosit este 0ote*ad$ care este folosit si
pentru acest curs$ dar poate fi utiliat orice editor de te)t. *entru 'ncepatori si pentru usurinta
cu care se lucreaa$ eu recomand folosirea aplicatie 0ote*ad sau 0otepad88$ dar cei a+ansati
pot folosi si altele cum ar fi 7reamwea+er.
1. Crearea )a*e+ ,e -n.eput a unu+ ,/.u0ent
+entru *nce!ut deschideti a!licatia Note+ad si scrieti structura de ba<a a
unei !a"ini ;eb0 Aceasta este(
<html>
<head>
<title>Mar'1/.net 2 Cursur+3 4/.ur+ s+ "n+0e</title>
</head>
<body>
<51>'ag+na HTML</51>
Le.t++3 exe0p1e s+ exp1+.at++.
</body>
</html>
- <!9# <(!9# este o etic!eta HTML pentru afisare de te)t mare (ca un titlu" in pagina.
- Ca sa +edeti reultatul$ copiati acest cod intr-o pagina noua desc!isa cu 0otepad si apoi
sal+ati fisierul cu e)tensia .!tml. 7aca nu stiti de:a$ pt. a-l sal+a alegeti la ";a+e as t<pe" - 1ll
.iles$ apoi la ".ile name" ii scrieti numele si e)tensia (e).& "pagina.!tml"". 7upa ce a fost
sal+at fisierul$ desc!ideti-l cu un browser (trebuie sa mearga cu dublu-clic= pe el".
6. %etarea pr/pr+etar+1/r ,/.u0entu1u+
- *roprietatile documentului pot fi controlate de atributele elementului 5/7>$ de e)emplu
cum ar fi culorile pentru fondul paginii$ pentru te)t si diferite fae ale lin=-urilor.
Culorile sunt setate folosind culorile de baa& rosu$ +erde si albastru? e)presia folosita 4@5
(4ed$ @reen$ 5lue"$ acestea sunt repreentate ca +alori !e)adecimale si sunt scrise intre
g!ilimele (" ""$ la inceput trebuie adaugat caracterul ABA. .iecare C unitati ale codului
repreinta una din culorile 4@5.
7e e)emplu& BDDaa99 repreinta o culoare care nu are 4osu (DD"$ are Eerde (aa" si 1lbastru
mai putin (99".
!1e0entu1 BO#(
- 1cestui element ii puteti adauga informatii care sa defineasca culoarea sau imaginea din
fondul paginii$ te)tul si culoarea lin=-urilor.
- 7aca elementul 5/7> nu este completat cu alte atribute atunci browser-ul +a preenta
culorile standard$ de obicei fondul este alb.
- *entru a seta culoare fondului paginii adaugati in etic!eta <5/7># atributul 5@C/L/4.
- 6rmatorul e)emplu +a preenta un document a carui fond este de culoare albastra&
<body b"color="=>>>>?"></body>
Cu1/area textu1u+
- 1tributul TEFT controleaa culoarea te)tului normal din document.
- 1cesta +a afecta tot te)tul din document care nu este colorat de alte elemente$ cum ar fi lin=-
ul.
- Culoarea standard pentru te)t este 0egru.
- 3ata un e)emplu in care culoarea fondului +a fi albastru si culoarea te)tului +a fi rosu$
atributul TEFT +a fi adaugat astfel&
<body b"color="=>>>>?" text789:;;;;8></body>
L+nk2ur+ (L$N&3 <L$N& s+ "L$N&)
o ' Aceste atribute controlea<a culoarea lin@'ului in di,erite stari
A0 &3NB ' culoarea initiala a lin@'ului0 #tandard este albastru
C0 :&3NB ' culoarea unui lin@ vi<itat0 #tandard este !ur!uriu0
D0 A&3NB ' culoarea lin@'ului in momentul activarii0 #tandard
este rosu0
o ' %odul de setare al acestor atribute este urmatorul(
<body b"color="=???" text="=?>>>>" lin@="=>>>>?"
vlin@="=?>>?" alin@="=??>>"></body>
/e<ultatul va f o !a"ina cu ,ondul alb) textul rosu) lin@'urile
albastre) lin@'urile vi<itate vor avea culoarea ro< iar culoarea
lin@'urilor in momentul activarii va f "alben0
F/1/s+rea une+ +0ag+n+ .a =/n, pentru pag+na ()a.kgr/un,)
o ' 5lementul body o,era !osibilitatea *nlocuiri ,ondului !a"inii
cu o ima"ine 16ac@"round ima"e20 Daca ima"inea este mai
mica decEt dimensiunile !a"inii atunci ima"inea va f
multi!licata !ana va aco!eri *ntre" cadru documentului0 5ste
indicat ca ima"inea sa fe in ,ormat F0"i, sau F07!"0 Folosirea
unei ima"ini va da un as!ect !lacut documentului0 +entru a
vedea cum arata un document al carui ,ond este o
ima"ine .1+.k a+.+0
o ' .n exem!lu de cod $T%& cu ima"ine !entru bac@"round
este urmatorul(
<body bac@"round="ima"ine0"i," b"color="=???"></body>
3n acest exem!lu ,ondul !a"ini va f dat de ima"inea fsierului
"ima"ine0"i," si de asemenea am setat 6GO&O/ ast,el incat
in tim!ul !rocesului de *ncarcare a ima"inii culoarea ,ondului
va f alba0
7upa ce a-ti creat baa de 'nceput a unui document si a-ti setat proprietatile$ trebuie sa sal+ati
fisierul. ;al+area trebuie facuta intr-un format pe care browser-ul 'l poate recunoaste. E)tensia
standard pentru un fisier care repreinta o pagina web este ".!tm" sau ".!tml". 7e obicei
folosesc (".!tml"".
- *entru a sal+a documentul ca sa arate ca o pagina web$ in 0ote*ad alegeti din
meniul .ile comanda ;a+e si sal+ati fisierul cu orice nume doriti dar cu e)tensia!tml (sau
"!tm"" - (La .ile name& scrieti si numele si e)tensia ".!tml"$ e)emplu& inde).!tml". 7aca nu
scrieti e)tensia$ 0ote*ad +a sal+a documentul in format "t)t".
- *entru a +edea documentul ca o pagina web$ duceti-+a in directorul in care a-ti sal+at fisierul
si desc!ideti-l pur si simplu (cu Enter sau dublu-clic= la mouse"$ acesta +a fi desc!is automat
de browser-ul pe care-l folositi (Moilla .irefo)$ 3nternet E)plorer$ /pera". ;au desc!ide-ti
browser-ul si din comanda /pen desc!ideti documentul pe care l-ati sal+at.
- *entru a continua munca$ a face modificari paginii sau pentru a adauga altce+a in
documentul HTML$ desc!ideti documentul cu 0ote*ad. 6na din metode este sa desc!ideti
aplicatia 0ote*ad si din meniul .ile alegeti /pen apoi gasiti fisierul pe care +reti sa-l
modificati si dati clic pe butonul /pen. 7upa ce terminati modificarile sal+ati$ astfel daca
redesc!ideti documentul ca o pagina web acesta +a fi desc!is cu noul format.
1. T+t1ur+ <Hx> ... </Hx>
' +entru titluri din continutul documentului $T%& este indicat ,olosirea
etichetelor <$x>) 1headings2 unde HxH este un numar intre A si I0
' 3n cadrul elementului 6ODJ) elementele $eadin"s sunt ,olosite ca
titluri sau !entru o mai buna im!artire a continutului !a"inii0
' %8rimea textului *ncon7urat de elementul $eadin" varia<8 de la ,oarte
mare) in <H1> !ana la ,oarte mic in <H>>0
6. 'aragra= ... 
' +ara"ra,ele !ermit sa adau"i text in document ast,el incat lun"imea
de afsare a textului va f a7ustata de marimea deschiderii bro;ser'
ului si fecare !ara"ra, va ince!e un nou rEnd0
' Distanta dintre doua !ara"ra,e succesive este mare deoarece
bro;ser'ul le afsea<a cu un rEnd "ol intre ele0
?. n n/u ran, <)r>
' Ta"'ul <)r> !ermite sa deci este un 5lement Gol dar !oate sa con-in atribut0 <)r> nu are si
nu cere element de *nchidere) nu se =/1/seste 
- Elementul <br# folose%te un singur atribut G CLE14 care poate a+ea +aloarea LE.T$
43@HT sau 1LL$ si sunt folosite daca este o imagine pe pagina. 1tributul CLE14 forea- o
linie in :os. 7aca o imagine este a%eata in partea stanga a paginii$ +aloarea LE.T +a muta
cursorul :os la prima linie din marginea %tanga.
@. L+n+e /r+*/nta1a <5r>
' Acest element afsea<a o linie ori<ontala in document
' Acest element nu ,oloseKte element de *nchidere L</hr>M
' 5lementul <5r> ,oloseste urmatoarele atribute(
o ' #3N5 = latimea liniei) in !ixeli 1standard este C2
o ' 43DT$ = lun"ii liniei) in !ixeli sau !rocente din lun"imea
afsarii !a"inii 1standard A>>O2
o ' NO#$AD5 = afsea<a linia ,ara a avea un as!ect DD
o ' A&3GN = alinia<a linia 1&e,t) enter) /i"ht2) adica #tan"a)
entru sau Drea!ta !a"inii 1 #tandard centru2
o ' O&O/ = setea<a culoarea liniei
Formatul textului
$T%& contine mai multe elemente) ta"'uri si atribute) !entru afsarea
textului in mai multe ,ormate cu as!ecte "rafce di,erite0
1. Tag2u1 ... 
u acest element) ) !uteti modifca as!ectul textului) cum sunt
ti!ul ,ontului ,olosit) marimea si culoarea textului0
' %arimea textului !oate f modifcata cu elementul FONT si
atributul %$A!0 Atributul #3N5 !oate lua valorile numerice de la A la P
si !e lan"a acestea !oate ,olosi) ca valoare relativa) semnele "B" sau
"2"0 Textul normal 1daca nu este s!ecifcat acest atribut2 are valoarea
D0
5xem!lu (
<,ont si<e="QC">Doua m8rimi mai mare</,ont>
' Ti!ul ,ontului !oate f modifcat cu elementul FONT si atributul F"C!0
5xem!lu (
<,ont ,ace="Arial 6lac@">Acesta este tipul de font Arial Black</,ont>
' uloarea textului !oate f modifcata cu elementul FONT si
atributul COLOR0
5xem!lu (
<,ont color="=>>dd>>">Acest text are culoarea verde</,ont>
6. B/1,3 $ta1+.3 n,er1+ne s+ a1te e1e0ente
5lemente des ,olosite !entru ,ormatul textului sunt(
' 6old 1in"rosat2 <)> ... </)>
' 3talic 1inclinat2 <+> ... </+>
' .nderline 1subliniat2 ... 
Alte elemente ,olosite !entru ,ormatul textului sunt(
' <pre> Performated </pre> ' Textul incadrat de elementul +/5 este
!re<entat intr'un sin"ur ,ont) oricare ar f atributul FA50 #!atiile mai
lun"i si liniile necesare sunt !re<entate aKa cum sunt scrise in
Note+ad) ne mai find nevoie de alte elemente adi-ionale) cum ar f
<)r> !entru o noua linie si Cn)spD Cn)spD !entru mai mult s!a-iu
intre cuvinte0
' <e0> Accentuare (Emphasis) </e0> ' 6ro;ser'ul de obicei arata
aces element ca italic
' <str/ng> %tr/ng </str/ng> ' 6ro;ser'ul de obicei arata aces
element ca bold
' <tt> Teletype </tt> ' a si +/5) bro;ser'ul !re<inta acesta intr'un
sin"ur ti! de ,ont) indi,erent de ,ontul ales cu atributul FA5) in
interiorul elementului FONT
' <.+te> Citatie </.+te> ' /e!re<inta o citatie din document0
- 3n browser +a fi afisat asa&
O sin"ura marire' normal ' O sin"ura micsorare
B/1,' Italic ' #ubliniat ' olorat
Accentut ' %tr/ng ' Tele type
Citatie
?. "1+n+erea
Eteva elemente !ot avea atributul 1"L$EN2 !entru aliniere) cum ar f
Titlurile <Hx> ) +ara"ra,ul F si &inia ori<ontala <5r> 0 ele trei
valori ale atributului"L$EN sunt( &5FT) /3G$T si 5NT5/0
Aliniamentul celor mai multe elemente se ,ace cu a7utorul altor elemente(
' <,+G a1+gn78valoare8> ... </,+G> +oate con-ine cele mai multe
elemente0 Tot ce este !o<i-ionat cu elementul D3: !oate f aliniat
oriunde'n !a"ina) indi,erent daca in acel loc se aRa si alt ceva
13ma"ine) Text) S20
' <.enter> ... </.enter> :a centra elementele
@. "1te et+.5ete HTML pentru =/r0atu1 textu1u+
' <str+ke> Text taiat </str+ke>
' <)+g> +re<inta textul intr'un ,ont mare </)+g>
' <s0a11> +re<inta textul intr'un ,ont mic </s0a11>
' <su)> Afsa<a textul in !o<itia subscri!t </su)>
' Asea<a textul in !o<itia su!erscri!t

Introducere

Î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

Introducere

Încărcat de

Drepturi de autor:

Formate disponibile

HTML

1. Ce este HTML? (Hypertext Markup Language)

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