Curs HTML

HTML – notiuni introductive
1. Structura de baza a unei pagini

- incepe ci tagu-ul <HTML> si se termina cu tag-ul </HTML>
- contine un antet care incepe directiva <HEAD> si se termina cu </HEAD>
- corpul propriu zis al paginii cuprins intre directivele <BODY> si </BODY>
Optional antetul poate contine titlu cuprins intre tag-urile <TITLE> si </TITLE>
Corpul paginii poate contine texte si/sau imagini.
Exemplu : <HTML>
<HEAD>
<TITLE> Exemplu 1 </TITLE>
</HEAD>
<BODY>
Acesta este un exemplu foarte simplu de pagina …
</BODY>
</HTML>
Antetul contine un titlu acesta fiind „Exemplu 1” titlu care apare la vizualizarea paginii
inaintea numelui browser-ului. Corpul paginii contine textul „Aceasta este un exemplu
simplu de pagina …”.
2. Introducerea textelor
2.1 Paragrafe
Paragrafele intr-un text se introduc utilizand tag-urile <P atribute> continut paragraf </P>
Tagul </P> poate lipsi. In Notepad, Wordpad, Word paragrafele sunt separate prin
tastarea unui ENTER. In HTML , ENTER-ul nu are nuci un efect.
Atribute : align – controleaza alinierea paragrafelor si poate lua valurile: center - aliniere
in centru , left right justify – aliniere stanga, dreapta , in ambele parti.
Exemplu : <P align=center> Paragraf aliniat in centru </P>
2.2 Alte elemente care permit formatarea textului
<BR> - are ca efect fortarea afisarii a ceea ce urmeaza pe randul urmator. Se utilizeaza
un singur tag.
Exemplu : <P> Sunt elev la <BR> C.N „FERDINAND I” </P> textul apare afisat pe
doua randuri.
<B> Afisare bold (ingrosat) a textului cuprins intre <B> si </B>
<I> Afisare italic (inclinat) a textului cuprins intre <I> si </I>
<U> Afisare subliniat a testului cuprins intre <U> si </U>
<S> Afizeaza taiat textul cuprins intre <S> si </S>
<FONT atribute> stabileste font-ul pentru afisarea textului cuprins intre tag-urile <FONT
atribute> si </FONT>
Atribute : face – indica fontul, size – marime (1 la 7), color – culoare
Exemplu : <FONT face=ARIAL size=2 color=red> text formatat arial marime 2 culoare
rosie </FONT>
Observatie : fontul ales poate sa nu existe pe calculatoarele care acceseaza pagina.
<STRONG> scrie textul cuprins intre <STRONG> si </STRONG> astfel incat sa atraga
atentia cititorului. (alta modalitate de a scrie bold)
<EM> scrie textul cuprins intre <EM> si </EM> astfel incat sa atraga atentia cititorului.
(alta madalitate de a scrie italic).
<BIG> comanda browser-ului ca textul scris intre tag-urile <BIG> si </BIG> sa fie scris
mai mare decat restul textului.
1
<SMALL> comanda browser-ului ca textul scris intre tag-urile <SMALL> si
</SMALL> sa fie scris mai mic decat restul textului.
<TT> comanda browser-ului ca textul scris intre tag-urile <TT> si </TT> sa fie scris
monospatiat (toate caracterele ocupa aceeasi lungime de spatiu , la fel ca fontul Courier
new).
<DEL> comanda browser-ului ca textul scris intre tag-urile <DEL> si </DEL> sa fie
scris taiat indicand stergerea lui dar pastrarea in text pentru a evita eventualele madificari
ale textului.
<INS> comanda browser-ului ca textul scris intre tag-urile <INS> si </INS> sa fie scris
subliniat pentru a arata ca a fost recent introdus in text.
<SUP> comanda browser-ului ca textul scris intre tag-urile <SUP> si </SUP> sa fie scris
mai sus (ca o putere).
Exemplu : <P> 3 <SUP> x*ln(x) </SUP> </P> este scris intr-un paragraf 3x*ln(x)
<SUB> comanda browser-ului ca textul scris intre tag-urile <SUB> si </SUB> sa fie
scris mai jos (ca un indice).
<DFN> comanda browser-ului ca textul scris intre tag-urile <DFN> si </DFN> sa fie
scris astfel incat sa sugereze o definitie (practic se scrie italic).
<CITE> comanda browser-ului ca textul scris intre tag-urile <CITE> si </CITE> sa fie
scris astfel incat sa sugereze un citat (se scrie la fel ca la DFN).
Pentru scrierea titlurilor se utilizeaza H1, H2, …, H6. Fiecare titlu este scris intre tag-
urile <H1> </H1>, … <H6> </H6>. Marimea difera : pentru <H1> titlu este scris
utilizand font-ul de dimensiune maxima iar pentru <H6> de dimensiune minima.
2.3 Liste
In HTML exista posibilitatea ca anumite enunturi sa fie numerotate sau marcate intr-un
anumit fel. O astfel de organizare poarta numele de lista. Acestea sunt de trei feluri : liste
ordonate , in care elementele sunt numerotate, liste neordonate ,in care elementele sunt
marcate astfel incat sa nu sugereze o anumita ordine si liste de tip definitie.
<OL> (Order lists) Creeaza o lista ordonata. Elementele listei sunt trecute intre tag-urile
<OL> si </OL>.
<LI> (List item) Descrie un element al listei, acesta fiind cuprins intre tag-urile <LI> si
</LI>.
Exemplu de lista ordonata :
Text HTML Imagine pe ecran
<P>Urmeaza o lista :</P> Urmeaza o lista :
<OL>
<LI>primul exemplu; 1. primul exemplu;
<LI>al doilea exemplu; 2. al doilea exemplu;
<LI>al treilea exemplu; 3. al treilea exemplu;
</OL>
Elementul OL are atributul type. Valorile acestui atribut se refera la felul cum
numerotam lista.
Astfel :<OL type=a> lista va fi numerotata cu literele mici a,b,…functie de numarul de
itemi, <OL type=i> lista va fi numerotata cu literele mici i,ii,…,<OL type=A>,<OL
type=I>,<OL type=1>
<UL> (unorder lists) descrie o lista neordonata (marcata). Elementele listei sunt cuprinse
intre tag-urile <UL> si </UL>. Atributul listei type poate lua valorile circle, squar, disc
si definesc forma marcatorului.
2
Se pot utiliza liste imbricate (in cadrul unei liste ordonate se includ liste neordonate –
vezi teste grila. Pentru a lasa un rand liber putem marca un paragraf prin <P> </P> sau
<P>.
<DL> (Definition lists) descrie o lista de definitii intre tag-urile <DL> </DL>
<DT> (Definition term) defineste termenii din lista.
<DD> (Definition description) retine descrierea termenului.
2.4 Atasarea imaginilor

<IMG atribute> se utilizeaza pentru a atasa unei pagini o imagine.
Atributele sunt :
src - identifica fisierul care contine imaginea (de tip .jpg, .gif …)
align – tipul de aliniere , specifica browser-ului modul in care se va alinia
imaginea in raport cu textul. Acesta poate lua valorile : Right, Left, Top, Middle,
Bottom
Exemplu : <p><img src=”ex1.jpg” align=”rigth”>
In exemplu ex1 (fictiv) este fisierul care contine imaginea de tip .jpg si se afla in acelasi
folder cu cel in care creem pagima (html). Daca imaginea este in alt folder atunci va
trebui specificata calea de gasire a acestuia.
alt=”nume” se utilizeaza atunci cand imaginea nu se poate incarca , folosind un
mume (alternativ) care va fi afisat in locul imaginii.
Exemplu : <img src=”c:/12d/ex1.jpg” alt=”un exemplu”>
height=”numar pixeli” inaltimea imaginii
width=”numar pixeli” latimea imaginii
In lipsa acestor parametri imaginea este afisata la dimensiunile pe care le are.
Modificarea dimensiunilor imaginii poate conduce la deformarea acesteia.
border=”numar pixeli” optional imaginea poate fi inconjurata de un chenar.
hspace=”numar pixeli” determina distanta minima care separa imaginea de
celelalte obiecte pe verticala.
vspace=”numar pixeli” determina distanta minima care separa imaginea de
celelalta obiecte pe orizontala.
Exemplu : <img src=ex1.jpg align=”left” hspace=”20”>
Imaginea este aliniata la stanga fata de text la minim 20 pixeli.
2.5 Tabele
2.5.1 Generalitati, atribute linii si coloane.
Paginile pot contine tabele descrise intre tag-urile
<TABLE> si </TABLE>
<TR atribute> descrie o linie a tabelului, aceasta incepe cu <tr> si se tremina la
intalnirea unui nou <tr> sau optional </tr>
Atributele sunt : (ele pot lipsi)
align – aliniaza textul pe orizontala pentru toate celulele liniei si ia valorile Left,
Right, Center, Justify.
valign – aliniaza continutul celulei pe verticala si poate lua valorile Top, Bottom,
Middle.
bgcolor – culoare fond.
<TD atribute>descrie o celula a tabelului. Sunt utilizate tag-urile <td> si optional </td>
Atributele sunt : (ele pot lipsi)
3
width, height – latimea si inaltimea celulei in procente fata de latimea respectiv
inaltimea tabloului.
align, valign – alinierea pe orizontala respectiv pe varticala, iau aceleasi valori ca
la <tr> dar sunt prioritare.
colspan=”numar” – insereaza in dreapta celulei specificata prin numar celule ale
caror continut este vid , dar care pot fi folosite pentru afisarea valorii retinute de celula
care are acest parametru.
Exemplu : <table border=”5”><tr><td>T11</td><td colspan=”2” align=”center”>T12
</td><tr><td>T21</td><td>T22</td><td>T23</td></tr></table>
rowspan=”numar” insereaza pe urmatoarele numar linii , in aceiasi coloana, cate
o celula al carei continut este vid si are ca efect secundar pastrarea formei
dreptunghiulare, toate liniile continand o celula in plus.
2.5.2 Atributele elementului TABLE
border=”nr.pixeli” defineste grosimea liniilor cate inconjoara tabelul. In absenta
lui tabelul nu este inconjurat de linii. Daca se utilizeaza border fara numar pixeli tabloul
este bordat cu chenar standard.
Daca o linie are mai multe celule decat celelalte automat sunt aliniate toate liniile la
numarul maxim de celule.
width – latimea tabelului exprimat in procente fata de dimensiunea ferestrei
browser-ului sau in pixeli.
height – inaltimea tabelului. Poate fi procent fata de inaltimea ferestrei browser-
ului sau pixeli.
align – alinierea tabelului in pagina. Poate lua valorile left, right, center.
cellspacing – determina spatiul , in pixeli , dintre celule.
cellpadding – determina , in pixeli , spatiu lasat in fiecare celula a tabelului intre
text (imagine) si marginile celulei.
rules – defineste modul in care vor fi trasate liniile care separa celulele tabelului.
Poate lua valorile none, rows, cols, all.
bgcolor – culoarea de fond comuna tuturor celulelor.
bordercolor – culoarea liniilor care inconjoara tabelul si care separa celulele.
Constantele de culoare sunt : aqua (azuriu), black (negru), blue (albastru), fuchsia
(galben spre maro), gray (gri), green (verde), lime (vernil), navy (bleumarin), olive
(oliv), purple (purpuriu), red (rosu), sylver (argintiu), teal (albastru catre verde), wite
(alb), maroon (maro), yellow (galben).
hspace, vspace – diferenta de la tabel la celelalte componente in pixeli (la fel ca
la img).
2.5.3 Elementele TH si CAPTION.
<TH> In loc de <TD> </TD> se poate folosi <TH> </TH>, parametrii sunt aceiasi , doar
ca textele, implicit, sunt tiparite bold.
<CAPTION atribute> Permite scrierea titlului unui tabel, titlu fiind scris intre tag-urile
<CAPTION> </CAPTION>
CAPTION are atributul align care poate lua valorile top, bottom, left, right.
2.5.4 Gruparea liniilor si coloanelor unui tabel.

Liniile unui tabel pot fi impartite in trei categorii : linii de antet, linii de corp si linii
finale.
<THEAD> marcheaza liniile de antet. Se foloseste <THEAD> si optional </THEAD>.
4
<TBODY> marcheaza liniile de corp. Se foloseste <TBODY> si optional </TBODY>.
<TFOOT> marcheaza liniile de sfarsit. Se foloseste <TFOOT> si optional <TFOOT>.
Atributele celor trei elemente sunt align – aliniere orizontala si valign – aliniere verticala.
Gruparea coloanelor.
<COLGROUP atribute> permite gruparea coloanelor unui tabel. Se utilizeaza tag-urile
<COLGROUP atribute> si optional </COLGROUP>.
Atributele sunt :
align – alinierea continuturilor calulelor coloanelor grupate ,ia valorile left, right,
center, justify.
span - numarul coloanelor care se grupeaza.
valign – alinierea pe verticala a continuturilor celulelor coloanelor grupate, ia
valorile top, middle, bottom.
width – latimea coloanelor exprimata in procente fata de latime tabelului sau in
pixeli.
<COL> permite specificarea valorilor pe care le iau atributele coloanelor pentru
fiecare coloana in parete. Atributele sunt aceleasai ca la COLGOUP.
Exemple :
<table border=”5” width=”50%”>
<colgroup span=”1” width=”50%” align=”rigth”>
<colgroup span=”2” width=”25%” align=”left”>
<tr> <td> 234 </td> <td> a12 </td> <td> a13 </td> </tr>
<tr> <td> 0.12 </td> <td> a22 </td> <td> a23 </td> </tr>
<tr> <td> 123456.7890123 </td> <td> a32 </td> <td> a33 </td> </tr> </table>
Este un tabel cu trei linii si trei coloane. Prima coloana ocupa 50% din latimea tabelului ,
textul fiin aliniat la dreapta (primul colgroup) , iar celelalte doua coloane ocupa fiecare
25% din latimea tabelului textul fiind aliniat la stanga (al doilea colgroup).
Sau cele doua linii care grupeaza coloanele pot fi scrise :
<colgroup span=”1” width=”50%” align=”rigth”>
<col width=”50%”
<colgroup span=”2”>
<col width=”25%” align=”left”>
<col width=”25%” align=”left”>
2.6 Legaturi (Link-uri)
Pana acum ne-am ocupat de introducerea textelor si imaginilor intr-un document HTML
(pagina WEB). In continuare sa vedem cum se leaga paginile intre ele.
<a atribute> realizeaza hiperlegaturile (a – ancora), atributul cel mai important este href
calea catre legatura.
Exemple : <a href=”http://www.ls-infomat.ro” > vizitati site-ul L&S Infomat </a> sau
<a href=”http://www.ls-infomat.ro/index.html” > vizitati site-ul L&S Infomat </a> unde
am specificat numele complet al fisierului care se incarca atunci cand este accesata
respectiva adresa. Sau specificam pagina pe care dorim sa o accesam.
<a href=”http://www.ls-infomat.ro/info.html” > vizitati site-ul L&S Infomat, pagina
Informaticii </a>
5
2.6.1 Legaturi relative la document (pagina)
Daca documentele HTML sunt lungi pentru a evita parcurgerea greoaie a acestora se pot
crea legaturi in cadrul aceluiasi document. Astfel in punctele unde dorim sa fie vizualizat
documentul cream ancore cu nume care este dat prin atributul id.
Exemplu : <a id=”top”> </a> ancora a fost asezata in partea de sus a documentului.
<a id=”mijloc”> </a> ancora asezata la mijloc.
In punctele de unde dorim ca utilizatorul sa poata vizualiza imediat documentul incepand
de la o anumita ancora definita anterior cream, tot cu ajutorul ancorelor , o hiperlegatura
Exemplu : <a href=”#top”> in top </a> <br> - salt in partea de sus a documentului (in
top).
Daca dorim sa efectuam un salt direct intr-un fisier HTML lung atunci in href precizam si
locul in document.
Exemplu : <a href=”c:\”lung.html#mijloc”> salt la fisierul „lung.html” la mijloc </a>
2.6.2 Trimitere automata a unui e-mail
Pentru a obtine acest efect , in href se va completa mailto urmat de : si de adresa de e-
mail.
Exemplu : <adress><a href=”milto:adresa@nume.tara””> Puteti sa-mi scrieti
</a></adress>
<adress> are rolul de a determina ca scrierea mesajului sa se faca la inceput de linie si in
stilul italic, pentru a atrage atentia asupra faptului ca este vorba de o adresa.
2.7 Harti imagine
Problema este urmatoarea : se da o imagine si se cere ca, prin executarea unui click
asupra unei anumite parti a ei , sa se execute una din operatiile prezentate in capitolele
anterioare, s.a.m.d. Initial browser-ul afiseaza imaginea fara a evidentia zonele , dar ,
atunci cand plimbam mous-ul pe suprafata imaginii acesta isi schimba forma si efectuand
un click se declanseaza operatia selectata.
<MAP atribute> - este elementul care descrie harta.
Atributul name – atribue hartii un nume, acest nume trebuie specificat si in
atributul usemap al elementului IMG.
Exemplu :
<IMG src=”c:\imagini\imagine.jpg” usemap=”#img”>
<MAP NAME=”img”>
<AREA atribute> - descrie o zona din harta pentru care, la executarea unui click , se
produce o actiune.
Atributele principale ale elementului AREA sunt :
href - aresa fisierului html sau alta resursa (la fel ca la ancore)
shape – descrie zona respectiva. Zona este alcatuita din pixeli iar fiecare pixel are
o coordonata (x,y) (considerand originea sistemului de coordonata (0,0) coltul din stanga
sus a ecranului (sau ferestrei) unde afisam imaginea. Valorile atributului sunt :
rect coords=”x1,y1,x2,y2” – dreptunghi x1,y1 coordonatele coltului stanga sus ,
iar x2,y2 cele al coltului din dreapta jos.
circle coords=”x1,y1,r” – cerc de centru x1,y1 si raza r.
poly coords=”x1,y1,x2,y2,…,xn,yn” – poligon cu n varfuri x1,y1,… fiid
coordonatele varfurilor.
Daca pentru dreptunghi, cerc este usor de stabilit coordonatele pentru poligon este mai
greu. Pentru a usura munca se poate folosi MAP THIS care decupeaza o imagine in
6
regiuni si creeaza un fisier HTML care contine toate elementele de descriere a hartii
precum si a zonelor decupate. Acesta este FREEWARE pe internet.
2.8 Elemente de baza : HTML, HEAD, BODY
Aceste documente au rolul de a defini structura documentului. Din acest motiv se mai
numesc elemente de structura.
Atributele elementului BODY :
background – oimagine apare pe fundal. Aceasta se repeta atat pe orizontala cat
si pe verticala pana cand se acopera intreaga suprafata necesara corpului.
bgcolor – culoarea de fond.
text – culoare text.
link – culoarea unei legaturi nevizitate.
alink – culoarea unei legaturi active (apare intr-un dreptunghi). O legatura este
activa in timpul si imediat dupa vizitare.
vlink – culoarea unei legaturi vizitate (care nu mai este activa)
Exemplu : <body link=”black” vlink=”green” alink=”red”>
2.9 Elementele BASE, META, STYLE, SCRIPT
<BASE href=”adresa”> - se gaseste in antet (HEAD) si precizeaza o adresa de
baza pentru resurse, iar celelalte adrese se obtin adaugand la adresa de baza o adresa
specifica.
Exemplu : pe C in catalogul imagini se gasesc fisierele 1.jpg , 2.jpg …
<head> <base href=”c:/imagini/”> …
<body> …
<img src=”1.jpg”> …
Resursele pot fi si adrese de internet.
<META atribute> - se gaseste in antet si pot exista mai multe elemente META.
Elementul este folosit pentru a furniza informatii motoarelor de cautare. Informatiile
continute de acest element nu sunt afisate de browser dar sunt utile pentru ca informatiile
din site-ul nostru sa fie accesibile.
Atribute : principalele sunt NAME si CONTENT
NAME – poate contine cateva cuvinte cheie :
AUTHOR – pentru specificarea autorului
TITLE – pentru a specifica titlul unui document.
KEYWORDS – specifica cuvintelecheie dupa care sa fie regasit site-ul.
LANGUAGE – specifica limba in care este scris site-ul (util cautarilor avansate)
CONTENT – are continut variabil in functie de valoarea lui NAME.
Exemple : <meta name=”author” content=”zaharia stancu”>
<meta name=”title” content=”descult”>
<meta name=”language” content=”RO”>
<meta name=”keywords” content=”mate, fizica, istorie, info, geo”> un exemplu in care
este suficienta utilizarea unei radacini a cheii de cautare pentru a obtine toate site-urile
care incep cu aceasta radacina.
<STYLE> - este in antet si specifica stilurile folosite in document (se va prezenta
pe larg in continuarea materialului). Stilurile sunt cuprinse intre tag-urile <style> si
</style>
<SCRIPT> - utilizat pentru intriducerea anumitor secvente de program in cadrul
paginilor web.
7
2.10 Cadre (FRAMESET, FRAME, IFRAME)
Exista posibilitatea ca aceiasi fereastra a browser-ului sa afiseze mai multe documente
html sau resurse.
<FREAMSET atribute> are rolul de a imparti fereastra in mai multe cadre. In
fisierul html el inlocuieste <body>. Elementul FREAMSET se utilizeaza intre tag-urile
<FREAMSET> si </FREAMSET>.
Atributele sunt : Rows – descrie liniile in care este impartita fereastra.
Cols – descrie coloanele in care este impartita fereastra.
Exemplu : <html> O fereastra impartita in doua linii una
<head> </head> de 30% din inaltimea ferestrei browser-
<freamset rows=”30%”,”70%”> ului, si una de 70%.
<fream scrolling=”yes” src=”c;/test.html”> continutul liniei este in test.html
<freamset cols=”30%”,”30%”,”40%”> trei coloane de 30,30,40 % dim latimea
<fream scrolling=”yes” src=”c:/imag1.jpg”> ferestrei. Continutul celor trei
<fream scrolling=”yes” src=”c:/poze/imag1.jpg”> coloane.
<fream …. >
</freamset> inchide definirea coloanelor
</freamset> inchide definirea liniilor
</html>
<FRAME atribute> - precizeaza continutul unui anumit cadru. Se utilizeaza un
singur tag <frame atribute>
Atributele sunt : src – adresa fisierului html sau a imaginilor.
marginheight – marginile, in pixeli sau procente fata de partea de sus
(top) si cea de jos (bottom)
marginwidth – marginile, in pixeli sau % fata de partea din stanga (left)
si dreapta (right)
frameborder – poate lua doua valori 1 sau 0. Valoarea 0 – cadrul nu
este separat de celelalte printr-un chenar.
scrolling – trateaza prezenta barei de scroll (defilare) si poate lua trei
valori : auto – bara de defilare este prezenta numai daca este cazul (in cadru se afiseaza o
suprafata mai mare decat a cadrului), yes – bara de defilare este prezenta intotdeauna,
no – bara de scroll nu este afisata.
noresize – indica browser-ului sa nu permita vizitatorului sa modifice
dimensiunea cadrului. Daca este prezent la un cadru atunci nici cadrele invecinate nu pot
fi redimensionate.
name – numele elementului FRAME. Dintr-un cadru se pot comanda
continutul oricarui cadru (inclusiv a cadrului curent)
Exemplu : Un cadru cu doua coloane una contine un fisier de ancore iar in a doua se
poate afisa continutul fisierelor specidicate in ancore.
<html>
<head> </head>
<freamset cols=”30%”,”70%”>
<fream src=”c:/ancore.html”>
<fream name=”cpt” src=”c:/c1.html> </freamset></html>
Fisierul cu ancore <html><head></head><body><a href=”c:/c1.html” target=”cpt”>
C1</a><br><a href=”c:/c2.html” target=”cpt”>C2</a><br><a href=”c:/c3.html
target=”cpt”></a></body></html> C3</a>
8
target – precizeaza „tinta” numele cadrului care va afisa fisierul html di href.
<IFRAME atribute> - permite crearea unui cadru in corpul documentului
(body).
Atributele sunt : name – numele (aceiasi semnificatie ca la FRAME)
height – inaltimea in pixeli
width - latimea in pixeli
frameborder – ia valoarea 0 sau 1 (vezi FRAME)
src – adresa fisierului html sau a imaginii
marginwidth – margini laterale (dreapta, stanga)
marginheight – margini sus si jos
scrolling – la fel ca la FRAME
align – left, right, top, bottom, middle (la fel ca la IMG)
2.11 Stiluri
2.11.1 Notiuni introductive
Notiunea de stil este, pentru un document HTML , asemanatoare cu formatarea unui
document WORD. Exista o multime de atribute prin care se pot stabili font-urile, culorile
de fond si ale literelor, caracteristicile de aliniere a textului, forma elementului, marginile,
pozitia elementelor etc.
Toate acestea se pot realiza cu ajutorul limbajului CSS2 (Cascading Style Sheets, level 2).
Exsista si CSS1 dar CSS2 este mai evoluat permitand stabilirea pozitiei unui document in
pagina.
Legatura intre HTML si CSS2 se realizeaza utilizand tag-uurile HTML <STYLE>
</STYLE> care vor fi asezate intere <HEAD> si </HEAD>
Un stil se aplica unor elemente de acelasi tip. Tipul unui element este numele elementului
din HTML, de exemplu P un paragraf, IMG imagine, TABLE un tabel.
- Stabilirea modului cum va arata un paragraf P (orice paragraf vom scrie va
arata asa cum am stabilit stilul)
<HTML>
<HEAD>
<STYLE>
P {font-size:20pt; color:Red; text-indent:1cm; background :yellow; font-family:cursive;
font-style:italic;font:weight:bold; text-decoration:underline }
</STYLE>
</HEAD>
<BODY>
<P> Stiluri , Stiluri …
<P> Un exemplu de formatare pentru paragrafe
</BODY>
</HTML>
In general , un element HTML este alcatuit sub forma de cutie (box)
Acestea sunt :
Marginea (margin) – nu este vizibila de vizitatirul paginii. Rostul ei este de a
pastra distanta dintre cutie si celelalte elemente.
Bordura (border) – in cazul in care cratorul paginii doreste, aceasta poate fi
facuta vizibila (exemplu i se stabileste o culoare)
9
Tesatura (padding) poate fi dimensionata dar nu poate fi facuta vizibila printr-o
culoare distincta. In continuare se va folosi termenul de padding.
Continutul este dat de text/imagine.
Exemplu de stil pentru un element H1
H1 {border:solid 10pt red; background-color:green; padding :0.5cm 0.5cm 0.5cm 0.5cm;
text-align:left; width:3cm}
…
<H1> Un element H1 </H1>
Exemplu de stil pentru paragrafe.
P {border:groove 1cm red; background-color:yeloow; padding:1cm 1cm 1cm 1cm;
width:5cm; hight:5cm; text-align:right; font-family:arial; font-weight:bold;
font-style:italic;}
…
<P> Un exemplu de paragraf </P>
Exemplu de lista pentru care s-a stabilit dimensiunea font-ului, culoarea de fond.
OL {font-size:20pt; font-weight:bold; color:black; background-color:yellow;}
…
<OL>
<LI> unu
<LI> doi
</OL>
2.11.2 Fonturi – atribute

a) font-style – poate lua valorile normal, italic
b) font-variant – poate lua valorile normal, small-caps
c) font-weight – poate lua valorile normal, bold
d) font-size – marimea. Cea mai simpla modalitate de a indica marimea este prin
puncte. (10pt, 15pt,…)
e) font – grupeaza 4 atribute. Daca este utilizat se poate renunta la ele.
Exemplu font:italic bold 15pt (nu conteaza ordinea in care sunt scrise)
f) font-family – are rolul de a stabili o familie de fonturi. Se pot specifica in
ordine familiile de fonturi utilizate. Valorile : serif, sans-serif, cursive,
monoscape.
Exemplu : P{font-size:20pt; font-family:courier, monoscape}
2.11.3 Atribute de culoare
Culorile pot fi recunoacute prin numele lor „red” , „green” etc. sau prin valorile RGB.
a) color – specifica culoarea textelor afisate.
b) Background-image – pentru fond se poate folosi o omagine
c) Background-color – stabileste culoarea fundalului.
d) Background-repeat – daca o imagine este mai mica decat spatiul necesar
pentru un element atuci ea se poare repeta pe orizontala si pe verticala pana la
unplerea spatiului. Repetarea se poate controla prin valorile atasate:
- repeat – repetare pe orizontala si verticala
- repeat-x - repetare pe orizontala
- repeat-y - repetare pe verticala
- no-repeat - fara repetare
10
e) background-attachment – poate lua valorile fixed , scroll (valoare implicita)
Daca valoarea este fixed atunci defileaza numai obiectele care se gesesc pe fundal
(imaginea ramane fixa), iar daca este scroll defileaza si imaginea.
f) background-position – daca pe fundal este o imagine atunci i se poate
preciza pozitia in raport cu fereastra.
Exista mai multe posibilitati de precizare a pozitiei.
- procentual: exemplu 33% 50% (1/3 de partea stanga a ferestrei si 1/2 din
inaltimea ei.
- In valori absolute: ex. 2cm 3cm (la 2cm de partea stanga a ferestrei si la 3cm
de partea de sus)
- Mixt: ex:2cm 50% (la 2cm de partea stanga a ferestrei si la jumatate raport la
inaltime)
- Numai o valoare – caz in care se refera numai la alinierea pe orizontala in
raport cu marginea din stanga a ferestrei.
- Prin cuvinte cheie : left, right, top, bottom. Ex. background-position left
bottom (in stanga jos)
Exemplu : o singura imagine , la mijlocul ferestrei, imagine care nu defileaza.
Body {background-image: url(c:\catalog\nume.jpg); background-repeat:no-repeat;
background-position:50% 50%; background-attachment:fixed;}
g) background – o singura caracteristica pentru toate celelalte. Se trec, in ordine
toate valorile pentru background-image, background-repeat, background-
position, background-attachment.
2.11.4 Atribute de text

a) text-decoration – poate lua valorile underline, overline, line-trough, blink
b) text-align – alinierea textelor. Poate lua valorile right, left, center, justify.
c) text-indent – permite indentarea textelor. Primul rand va incepe mai in
dreapta cu o valoare precizata. Ex. text-indent:1cm.
d) line-height – inaltimea liniei. Este folosit pentru a stabili diastanta dintre
randurile unui paragraf.
Exemple: P{font-size:15pt; line-height:0.5cm;}
P{font-size:15pt; line-height:1cm:}
2.11.5 Atribute pentru margini
a) margin-left – marimea marginii din stanga
b) margin-right – marimea marginii din dreapta
c) margin-top – marimea marginii de deasupra
d) margin-bottom – dimensiunea marginii de dedesupt
e) margin – toate marginile in ordine sus, dreapta, jos, stanga.
Exemplu : P{font-size:15pt; margin-left:1cm; margin-right:2cm; margin-top:3cm;}
2.11.6 Atribute de bordura
a) Padding-top – partea de sus
b) Padding-left – partea din stanga
c) Padding-bottom – partea de jos
d) Padding-right – partea din dreapta
e) Padding – toata marginile in ordine sus, dreapta, jos, stanga.
11

Curs HTML

Încărcat de

Informații document

Titlu original

Drepturi de autor

Formate disponibile

Partajați acest document

Partajați sau inserați document

Opțiuni de partajare

Vi se pare util acest document?

Este necorespunzător acest conținut?

Drepturi de autor:

Formate disponibile

Curs HTML

Încărcat de

Drepturi de autor:

Formate disponibile

HTML – notiuni introductive

1. Structura de baza a unei pagini

2.4 Atasarea imaginilor

2.5.4 Gruparea liniilor si coloanelor unui tabel.

2.11.2 Fonturi – atribute

2.11.4 Atribute de text

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