04 TIC Avansati B Tutorial HTML

Tutorial HTML si CSS
Introducere in HTML
HyperText Markup Language (HTML) este un limbaj de marcare utilizat pentru crearea paginilor web.
Scopul HTML este mai degraba prezentarea informatiilor paragrafe, fonturi, tabele s.a.m.d. decat
descrierea semanticii documentului.
HTML este o forma de marcare orientata catre prezentarea documentelor text pe o singura pagina,
utilizand un software de redare specializat, numit agent utilizator HTML, cel mai bun exemplu de astfel
de software fiind browserul web.
HTML furnizeaza mijloacele prin care continutul unui document poate fi adnotat cu diverse tipuri de
metadate si indicatii de redare. Indicatiile de redare pot varia de la decoratiuni minore ale textului,
cum ar fi specificarea faptului ca un anumit cuvant trebuie subliniat sau ca o imagine trebuie introdusa,
pana la scripturi sofisticate, harti de imagini si formulare.
HTML-ul nu este un limbaj case sensitive (nu face deosebirea intre litere mici si mari).
Pagina principala a unui domeniu este fisierul index.html respectiv index.htm Aceasta pagina este
setata a fi afisata automat la vizitarea unui domeniu. De exemplu la vizitarea domeniului www.nume.ro
este afisata pagina www.nume.ro/index.html.
Structura documentului HTML
Paginile HTML sunt formate din etichete sau tag-uri si au extensia .html sau .htm. In marea lor
majoritate aceste etichete sunt pereche, una de deschidere <eticheta> si alta de inchidere </eticheta>.
Mai exista si cazuri in care acestea nu se inchid. Atunci se foloseste <eticheta />, iar browserul
interpreteaza aceste etichete afisand rezultatul pe ecran.
Un document HTML se imparte in trei sectiuni:
<html> - Orice document html se incepe cu marcajul html. Acest tag transmite browser-ului ca
documentul respectiv este de fapt un document HTML , dand astfel indicatii asupra modului in
care vor fi interpretate diferite partitii ale fisierului
<head> - Cu acest marcaj se incepe cea de-a doua sectiune, care contine informatii ce nu se
afiseaza in browser, cu exceptia marcajului <title> in care se specifica titlul paginii web si apare
ca titlul ferestrei browser-ului. Marcajul <head> > contine descrieri de tip <meta>, stiluri
pentru formatarea textului, scripturi si linkuri catre fisiere externe (de exemplu scripturi, fisiere
de tip CSS sau favicon), etc.
Etichetele de tip meta contin cuvinte cheie, descrierea paginii, date despre autor, informatii
utile motoarelor de cautare si au urmatorul format: <META NAME="nume"
CONTENT="continut">
<body> - In interiorul acestui marcaj se afla tot continutul paginii web care va aparea in
browser (text, imagini,etc.).
Pentru a crea o pagina HTML simpla scrieti codul de mai jos intr-un editor de texte (Notepad) si apoi
salvati-l intr-un fisier cu extensia .html (index.html). Pentru a o afisa, fisierul creat trebuie deschis cu un
browser web(Mozilla Firefox, Internet Explorer).

<html>
<head>
<title> Acesta este titlul paginii </title>
</head>
<body>
Acesta este continutul paginii.
</body>
</html>

Atribute HTML
Atributele sunt ca o descriere pentru taguri, ele mereu au nume si o valoare. Un atribut se scrie sub
forma: nume=valoare si se introduce in tag sub forma <tag nume=valoare></tag>. Printre acestea
sunt tagurile de aliniere, de formatare a textului, a culorii diferitor elemente, pentru link-uri, etc.
Ex: La tagul body putem sa adaugam atributul bgcolor cu valoarea yellow si atributul align cu valoarea
center sub forma:
<html>
<head>
</head>
<body bgcolor="yellow">
Acesta este continutul paginii.
<h1 align="center"> Header central </h1>
</body>
</html>
Daca puneti aceste tag-uri in pagina care ati creat-o veti observa ca fundalul ei devine galben iar
headerul este aliniat central.

Text HTML
Textul se poate introduce si fara taguri. Dar daca se doreste un text de o anumita forma atunci acesta
se introduce intre tag-uri ca cele de mai jos.
<font> </font> - intre acestea se introduce textul care se doreste a fi afisat pe pagina (acest tag nu va
schimba deloc forma textului). Acesta are trei atribute optionale: color, face si size. Astfel cu ajutorul
lui se poate specifica culoarea textului, fontul si dimensiunea acestuia.
<b></b> sau <strong></strong> - defineste text ingrosat
<big></big> - defineste text mare
<i></i> sau <em></em> - defineste text italic
<u>...</u> - textul apare subliniat
<s>...</s> - textul apare taiat
Anteturile sunt folosite in general pentru evidentierea titlurilor (h - headings). In dependenta de
numarul din dreptul numelui marcajului, variaza dimensiunea fontului. HTML adauga automat o linie
goala in plus inainte si dupa un antet.
<h1></h1> -defineste un antet de cea mai mare marime;
<h2></h2>
<h3></h3>
<h4></h4>
<h5></h5>
<h6></h6> -defineste antetul de cea mai mica marime;
Marcajul <p>...</p> specifica un paragraf.
Marcajul <br> inseamna rand nou. Atunci cand se doreste ca o propozitie sa apara in rand nou, va
trebui sa se includa acest marcaj(<br> e echivalentul lui "Enter" in Word, de exemplu.) El este
nepereche, neavand nevoie de tag de inchidere.
Tot ceea ce urmeaza in interiorul marcajului <code>...</code> specifica un fragment de cod.
 - cu acest tag se scrie un comentariu in codul html, comentariu ce
este ignorat de browser. Pentru a vedea codul html se selecteaza View page source dup ace se apasa
click dreapta pe o pagina web.
<html>
<head>
</head>
<body>
<h1> Titlul paginii </h1>
<h3> Un titlu mai mic </h3>
<p> Un text oarecare, un text oarecare, un text oarecare </p>
<p align="center"> Paragraf aliniat la centru </p>
<p align="right"> Paragraf aliniat la dreapta </p>
<b> caractere ingrosate </b>, de asemenea <strong> caractere
ingrosate </strong>
<br>
<i> caractere inclinate </i>, de asemenea <em> caractere
inclinate </em>
<br>
<u> caractere subliniate </u>
<br>
<s> caractere taiate </s>
<br>

<font color="red" size="5" face="arial"> Font Arial, culoare
rosie, dimensiunea 5.
</font>
</body>
</html>

Liste in HTML
Exista trei tipuri de liste in HTML:
1. Liste de definitii
2. Liste neordonate
3. Liste ordonate
Liste de definitii - se creaza cu ajutorul marcajelor:
<dl>...</dl> - lista de definitii
<dt>...</dt> - termenul definit
<dd>...</dd> - definitia
<dl>
<dt><b>Ingrediente</b></dt>
<dd>100g zahar</dd>
<dd>50g faina</dd>
<dd>3 oua</dd>

<dt><b>Prepararea</b></dt>
<dd>Se dau la mixer</dd>
<dd>Se pun in cuptor pe 10 minute <br>
la 150 grade</dd>
</dl>
Liste neordonate - se realizeaza cu ajutorul marcajelor:
<ul>...</ul> - lista neordonata
<li>...</li> - elementul listei
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
Liste ordonate - se definesc cu ajutorul marcajelor:
<ol>...</ol> - lista ordonata
<li>...</li> - elementul listei
<ol>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ol>
Link-uri in HTML
Link-urile (sau referintele) constituie un element fundamental in elaborarea unui site. In lipsa lor, site-
ul ar fi format doar dintr-o pagina de dimensiuni foarte mari.
Un link se defineste cu ajutorul marcajului <a>...</a> care trebuie sa includa atributul href continand
calea pana la fisierul destinatie.
Exista doua tipuri de legaturi: interne si externe.
Legatura interna este o legatura in interioul site-ului. Daca in interiorul unei pagini este definit link-ul
Galerie care duce catre pagina galerie.html din cadrul aceluiasi site, atunci codul ar trebui sa aiba
urmatoarea forma:
<a href="galerie.html">Galerie<a>

Legatura externa este o legatura care duce spre un site extern. Daca in interiorul unei pagini este
definit link-ul Galerie care duce catre pagina galerie.html din cadrul site-ului www.altsite.ro, atunci
codul ar trebui sa aiba urmatoarea forma:
<a href="http://www.altsite.ro/galerie.html">Galerie<a>

Implicit, dupa accesarea link-ului, pagina ceruta va fi afisata in fereastra curenta. In cazul cand se
doreste ca pagina sa se deschida intr-o noua fereastra, marcajului <a> i se adauga atributul
target=_blank.
<a href=" http://www.altsite.ro/galerie.html"
target="_blank">Galerie<a>
Legaturile pot fi si catre alte tipuri de fisiere: imagini, fisiere audio, fisiere video.
Imagini in HTML
Imaginile in paginile web sunt foarte importante. Cu ajutorul lor site-ului prinde viata si capata
atractivitate.
Inserarea unei imagini in pagina se face cu ajutorul marcajului <img> care are ca atribute:
src - fisierul imagine
width - latimea imaginii
height - inaltimea imaginii
alt - valoarea acestuia este un text. Poate fi o descriere a imaginii sau paginii. Textul este afisat
in browser doar atunci cand imaginea inca nu sa incarcat sau nu poate fi gasita.
border - chenar. Poate lua valorile 1 (cu chenar) sau 0 (fara chenar).
align - alinierea imaginii la dreapta - right, stanga - left, centru - center.
Marcajul <img> nu este un marcaj cu pereche. Adaugarea la sfarstit a marcajului de genul </img> este
inutila.
O simpla imagine poate avea rol de link in cazul cand se include in interiorul marcajului <a>...</a>.
<a href=galerie.html>
<img src="(9).jpg" align="right" border="2" height="250"
alt="Energie verde">
<p>Textul in partea stanga, imaginea in dreapta.</p>
</a>

Tabele in HTML
Cu ajutorul tabelelor informatia capata o claritate mai mare. Deasemenea, importanta tabelelor se
remarca si prin faptul ca acestea pot fi folosite la definirea structurii paginii (layout-ul), ex: headerul,
meniul, footerul, etc. Desi in zilele noastrea aceasta numai este o practica obisnuita (locul ei fiind luat
de CSS), totusi ramane ca o alternativa.
Un tabel este compus din randuri si coloane si se se defineste cu ajutorul marcajului <table>,
continand in sine definitiile randului - <tr> (tr - table row) si definitiile coloanei - <td> (td - table data).
Cele mai uzuale attribute ale tabelului sunt urmatoarele:
align - alinirea tabelului, valori posibile: left, center, right
valign - alinierea pe verticala, valori posibile: top (sus), middle (mijloc), bottom (jos)
width - latimea specificata in pixeli
height - inaltimea specificata in pixeli
bgcolor - culoarea de fundal
border - chenar. In cazul cand border=0, chenarul este invizibil
cellpadding - distanta dintre marginile celulelor si continutul acestora
cellspacing - distanta dintre celulele unui table
In afara de aceste atribute, exista inca doua atribute foarte importante ale marcajului <td>. Acestea
sunt:
colspan - numarul de coloane pe care se intinde celula
rowspan - numarul de randuri pe care se intinde celula
<table border="1" align="center" width="350">
<tr>
<td rowspan="5" bgcolor="brown" align="center"><b>
Browser </b></td>
<td colspan="2" bgcolor="orange" align="center">
<b>Cota de piata</b></td>
</tr>
<tr>
<td>Firefox</td>
<td width="50">38.1</td>
</tr>
<tr>
<td>Chrome</td>
<td>33.4</td>
</tr>
<tr>
<td>Internet explorer</td>
<td>21.2</td>
</tr>
<tr>
<td>Safari</td>
<td>4.2</td>
</tr>
</table>

Campuri in HTML
Campurile reprezinta niste zone care au menirea de a prelua de la utilizator date, care ulterior sa fie
prelucrate.
Definirea unui camp se face prin intermediului marcajului <input />. Atributul type determina tipul
campului, si poate lua valorile: text, password si file, pentru definirea unui camp de tip text, parola si
respectiv fisier.

<b>Adresa de e-mail:</b>
<input type="text" name="email"/><br><br>
<b>Parola:</b>
<input type="password" name="parola"/><br><br>
<b>Fisier:</b>
<input type="file" name="fisier"/>
Butoane in HTML
Butoanele, ca si campurile, sunt definite prin intermediul marcajului <input />.
<input type="button" /> defineste un buton.
<input type="reset" /> defineste un buton de tip reset. El are menirea de a goli toate campurile unui
formular. Pentru functionarea corecta, butonul reset trebuie sa fie inclus intr-un formular.
<input type="submit" /> defineste un buton de tip submit. Butonul submit trebui sa fie inclus intr-un
formular pentru ca sa fie functional si are menirea de a trimite toate datele dintr-un formular la server.
<form>
<input type="text" name="user"/><br><br>
<input type="reset"/>
<input type="submit" value="Submit"/>
</form>

Butoane radio in HTML
Butoanele radio permit utilizatorului sa aleaga doar o singura optiune din cele disponibile. Pentru
gruparea mai multor radio butoane intr-o singura categorie, fiecare camp trebuie sa fie definit cu
acelasi nume.
<input type="radio" /> defineste un buton radio.
Pentru ca o optiune sa fie implicit selectata, trebuie sa se adauge atributul checked="yes" optiunii
respective.
<p>
<b>Tip transfer</b> <br>
Western Union: <input type="radio" name="transfer"/><br>
PayPal: <input type="radio" name="transfer"/><br>
Check:<input type="radio" name="transfer"/><br>
</p>
<p>
<b>Valuta</b><br>
USD: <input type="radio" name="valuta"/><br>
EU: <input type="radio" name="valuta"/><br>
</p>

Checkbox-uri in HTML
Checkbox-urile, la fel ca si radio butoanele ofera utilizatorului posibilitatea de a alege o optiune din mai
multe variante.
Spre deosebire de radio butoane, unde este permisa alegerea doar a unei singure optiuni, checkbox-
urile permit alegerea simultana a mai multor optiuni.
<input type="checkbox" /> defineste un checkbox.
Pentru ca o optiune sa fie implicit selectata, trebuie sa se adauge atributul checked="yes" optiunii
respective.
<p>
<b>Limbi cunoscute</b> <br>
Romana: <input type="checkbox" checked="yes"
name="limba" value="Romana"/> <br>
Engleza: <input type="checkbox" name="limba"
value="Engleza"/> <br>
Franceza: <input type="checkbox" name="limba"
value="Franceza"/>
</p>

TextArea in HTML
Un element de tip textarea defineste un camp de text cu mai multe linii. Campurile de acest fel sunt
folosite de obicei pentru introducerea unor comentarii, scrierea unui mesaj sau in general atunci cand
utilizatorul are nevoie de mai mult spatiu de exprimare.
Definirea controlului are loc prin intermediul marcajelor <textarea> </textarea>. Dimensiunele
campului textarea se specifica prin numarul de coloane si randuri cu ajutorul atributelor cols si
respectiv rows.
Atributul wrap specifica felul in care va reactiona textul atunci cand acesta va atinge sfarsitul liniei.
Exista 3 valori pe care le poate lua acest atribut:
soft - va plasa un enter la sfaritul fiecarei linii, dar nu va trimite la server caracterul enter
(carriage return)
hard - arata exact asa ca si "soft", insa spre deosebire de acesta, caracterul enter este trimis la
server.
off - Textul este afisat si trimis la server exact asa cum este scris.
Alte doua attribute ale unui textarea sunt readonly si disabled.
Readonly poate lua valorile "yes" sau "no". Cu ajutorul acestui atribut se specifica daca continutul
campului de text va putea sau nu fi modicat.
Disabled este asemanator lui readonly, deasemenea nu permite modificarea textului, insa spre
deosebire de acesta, textul va fi afisat in gri. In asa fel utilizatorul va percepe vizual ca acel camp nu
poate fi modificat.
De mentionat ca textul dintr-un textarea definit cu "readonly" putea fi selectat cu mouse-ul, si ulterior
copiat, pe cand "disabled" nu ofera aceasta posibilitate.
<textarea rows="4" cols="22" wrap="soft" > Hello World!
</textarea>
<textarea rows="4" cols="22" wrap="hard" > Hello World!
</textarea>
<textarea rows="4" cols="22" wrap="off"> Hello World!
</textarea>
<p>
<textarea rows="4" cols="30" readonly="yes" > Hello
World! </textarea>
<textarea rows="4" cols="30" disabled="yes" > Hello
World! </textarea>
</p>

Select in HTML
Tagul <select> este utilizat pentru crearea listelor (drop-down lists). Cu ajutorul tagului <option> din
interiorul elementului <select> se definesc optiunile disponibile in lista.
Implicit meniul va afisa primul element din lista. Pentru a afisa un alt element decat cel implicit, se va
specifica atributul selected="yes" optiunii care dorim sa fie afisata prima in lista.
Implicit doar 1 singur element din lista este vizibil, insa acest lucru se poate schimba cu ajutorul
atributului size.
Implicit se permite selectarea unui singur element din lista, insa este posibila selectarea mai multor
elemente din cadrul aceleeasi liste. Pentru aceasta se va specifica atributul multiple="yes".
Limba materna:
<select>
<option>Engleza</option>
<option selected="yes">Romana</option>
<option>Franceza</option>
</select>
<p> Limbi vorbite: <br>
<select size="4" multiple="yes">
<option>Romana</option>
<option>Engleza</option>
<option>Franceza</option>
<option>Germana</option>
</select>
</p>

Formulare in HTML
Formularele reprezinta o modalitate de comunicare intre utilizatori si server.
Un formular se defineste cu ajutorul marcajului <form>, iar in interiorul acestuia se gasesc diferite
campuri de introducere a datelor. Campurile unui formular destinate pentru introducerea datelor se
definesc prin intermediul marcajului <input>.
Pentru transmiterea informatiilor catre server se utilizeaza una din cele doua metode:
metoda get - informatiile din formular sunt vizibile in URL
metoda post- informatiile din formular nu sunt vizibile in URL
Atributul action are ca valoare URL-ul careia ii vor fi transmise informatiile din formular, pentru
prelucrare.
Campurile unui formular sunt definite cu ajutorul marcajului <input> care poate lua urmatoarele
atribute:
type - tipul campului. Poate lua urmatoarele valori:
o button - definirea unui buton
o checkbox - casute de bifat
o file - permite utilizatorului sa selecteze un fisier din calculatorul sau
o hidden - acest camp nu va aparea in formular, va fi invizibil.
o submit - informatiile din formular sunt trimise spre prelucrare la URL-ul indicat in action.
o password - acest camp se foloseste la introducerea parolei. Din motive de securitate se
inlocuieste fiecare caracter tastat cu un asterix (*).
o radio - reprezinta un set de elemente cu un singur nume, din care se poate selecta doar
unul.
o text - camp in care utilizatorul poate introduce text.
o reset - buton la apasarea careia se goleste formularul.
name - numele elementului
value - valoarea atributului elementului
size - lungimea campului de tip text sau password
maxlength - numarul maxim de caractere care pot fi introduse intr-un camp de tip text sau
password
disabled - dezactivarea unui element.
<form action="mailto:AdresaTa@email.com" method="POST">
Nume:<br>
<input type="text" name="name" size="25"><br>
Email:<br>
<input type="text" name="email" size="30"><br>
Mesaj:<br>
<textarea cols="30" rows="5"></textarea><br>
<input type="submit" name="submit" value="Trimite">
<input type="reset" name="reset" value="Reseteaza">
</form>

Introducere in CSS
CSS este acronimul pentru Cascading Style Sheets.
CSS este un limbaj (style language) care defineste "layout-ul" pentru documentele HTML. CSS acopera
culori, font-uri, margini (borders), linii, inaltime, latime, imagini de fundal, pozitii avansate si multe alte
optiuni.
HTML este de multe ori folosit necorespunzator pentru a crea layoutul site-urilor de internet. CSS ofera
mai multe optiuni, este mai exact si sofisticat. In plus, este suportat de toate browserele actuale.
In perioada de inceput a web-ului, HTML era folosit numai pentru structura textului. Textul se putea
marca cu taguri precum <hl> si <p> pentru a marca titlul sau un paragraf. Odata cu cresterea
popularitatii web-ului designeri au inceput sa caute diferite posibilitati de a adauga layout
documentelor online. Pentru a raspunde acestor cerinte, producatorii de browsere (in acea vreme
Microsoft si Netscape) au inventat noi taguri HTML precum <font> care difera fata de tagurile originale
HTML prin faptul ca definesc layoutul si nu structura.
Acest lucru a dus si la o situatie unde tagurile originale de structura ca <table> sa fie folosite
necorespunzator pe pagini de layout (to layout pages). Multe taguri noi de layout brecum <blink> erau
recunoscute numai de unele browsere. O formula comuna ce aparea pe siteuri era "Aveti nevoie de
browserul X pentru a vedea aceasta pagina". CSS a fost inventat pentru a remedia aceast situatie,
furnizandu-le designerilor facilitati sofisticate pentru editarea layoutului, suportate de toate
browserele.
In acelasi timp, separarea site-urilor de prezentare pentru documente de continutul documentelor
usureaza foarte mult intretinerea lor.
Beneficiile concrete ale CSS includ:
controlarea layoutului documentelor dintr-o singura pagina de stiluri
control mai exact al layoutului
aplicare de layouturi diferite pentru tipuri media diferite (ecran, printare, etc)
tehnici numeroase si sofisticate.
Definirea unui stil CSS
Stilurile pentru o pagina pot fi definite in partea de Head a documentului html, pot fi definite intr-un
fisier css extern, care poate fi apelat tot din partea de head a paginii, sau se poate aplica un stil diferit in
partea Body a fisierului html, la fiecare tag html in parte.
Stil css definit in HEAD
<head>
<title>Stil definit in head</title>
<style type="text/css">
p {
font-family:Arial;
font-size:19px;
color:#0033FF;
}
</style>
</head>
<body>
<p>Paragraf la care se va aplica stilul
definit mai sus!</p>
</body>

Dupa cum vedeti stilurile se definesc in partea head a documentului cu ajutorul tagurilor <style
type=text/css> si </style>. In acest exemplu a fost definit cu css un stil pentru toate paragrafele din
pagina respectiva, adaugand un stil la tagul <p>.
Stil css in partea BODY (css inline)
In partea body a fisierului html, putem adauga un stil diferit la fiecare tag html, ba chiar putem si
suprascrie un stil definit in partea head.
<body>
<p style=font-family:Arial; color:#003300;>
Paragraf care a fost stilizat in interiorul
tagului p!</p>
</body>
Pentru a adauga un stil diferit fata de restul documentului, a fost folosit atributul style pentru a
redefini, a adauga stilul respectiv. Parametrii, ca si in cazul stilurilor definite in partea de head, sunt
separati prin ;.
Definirea stilurilor cu un fisier extern
Pentru a tine toate stilurile intr-un fisier extern, stilurile trebuie definite intr-un fisier cu extensia .css,
de exemplu stiluri.css, care poate fi invocat in partea de head a documentului.
<head>
<link rel=stylesheet href=stiluri.css/>
</head>
Cu ajutorul stilurilor CSS se pot stiliza site-uri intregi dintr-un singur fisier. Daca in viitor se doreste
realizarea unei modificari pe site, nu va trebui editata fiecare pagina, articol in parte, ci doar un singur
fisier, fisierul css extern.
Css-ul da libertatea de suprascriere a unui stil deja definit, pentru ca lucreaza cu o anumita ierarhie:
1. Prima data va fi luat in considerare stilul definit in fisierul extern
2. stilul definit in partea head
3. css-ul inline, adica stilul definit intr-un tag html cu ajutorul atributului style poate suprascrie
orice stil definit anterior.
Stilizarea textului cu CSS
Limbajul html nu contine nici un stil, ci fiecare browser in parte are un fisier css extern, care este
incarcat la fiecare pagina web by default, si pe care designerul de fapt il suprascrie cu stilul lui.
Teoretic se poate folosi orice tip de font, insa daca utilizatorul nu are in sistemul lui de operare fontul
respectiv instalat, atunci nu va vedea pagina web cu fonturile specificate. Tocmai din aceasta cauza,
este recomandata folosirea de fonturi mai comune, daca se doreste evitarea aceastei probleme.
Specificarea unui font
p { font-family:Arial, Helvetica, sans-serif; }
In acest exemplu a fost definit pentru tagul p, tipul de font Arial. Daca utilizatorul nu are pe calculator
instalat fontul Arial, atunci se va aplica tipul de font Helvetica, respectiv varianta sans-serif.
Formatarea fonturilor font-size
Marime
font-size:12px;
font-size:large;
font-size: small;
Marimea fonturilor se poate specifica in pixeli, sau cu ajutorul unor cuvinte. Ultima variant nu este
recomandata, pentru ca large si small pot arata altfel in diferite browsere.
Grosime
font-weight:bold;
font-weight:bolder;
font-weight:normal;
Stil
font-style:italic;
font-style:normal;
Font variant
font-variant:normal;
font-variant:small-caps;
Inaltimea liniilor
line-height:normal;
line-height:28px;
Cu aceasta directiva, se poate specifica inaltimea liniilor, care va rezulta de fapt ca si spatiu intre linii.
Distanta intre litere
letter-spacing:2px;
<html>
<head>
<title>Exemplu stilizare font CSS</title>
p {
font-family:Arial;
font-size:18px;
line-height:40px;
color:#0033FF;
}
</style>
</head>
<body>
<p>Stilul definit in head <br>
Stilul definit in head</p>
<p style="font-family:Arial; font-size:20px;
font-weight:bold; font-variant:small-caps;
letter-spacing:4px; color:#023357;">
Stilul inline</p>
</body>
</html>

Stilizarea background-ului in CSS
Cu ajutorul Css-ului se pot adauga imagini pentru background la oricare element al paginii. Bineinteles
se pot adauga si culori, sau numai culori.
In definirea culorii a background-ului se folosesc codurile hexa ale culorilor. Pentru a schimba culoarea
de background a intregii pagini trebuie aplicat un stil tagului body.
body { background-color:#993300; }
p { background-color:#AAAAAA; }
div { background-color:#EEEEEE; }
Astfel, background-ul se poate colora la oricare tag html, div, p etc. in mod diferit.
Adaugarea unei imagini se realizeaza cu ajutorul background-image. Daca nu se specifica in ce directie
sa se repete imaginea de background, atunci aceasta se va repeta atat horizontal cat si vertical.
background-image:url("nume_imagine");
Pentru ca imaginea sa nu se repete trebuie adaugat
background-repeat:no-repeat;
Pentru ca imaginea sa se repete orizontal sau vertical trebuie adaugata una din urmatoarele directive
background-repeat:repeat-x;
background-repeat:repeat-y;
Daca se doreste ca background-ul sa fie pozitionat altfel decat stanga sus, se poate specifica acest
lucru.
background-position:right top; (sus dreapta)
background-position:bottom right; (jos dreapta)
background-position:bottom left; (jos stanga)
background-position:center; (in centru)
<html>
<head>
<title>Exemplu background CSS</title>
body {
font-size:18px;
line-height:40px;
color:#056005;
font-weight:bold;
background-image:url("(9).jpg");
background-position:right top;
background-repeat: repeat-y;

background-color:#EEEEEE;}
</style>
</head>
<body>
<p>Stilul definit in head</p>
<p style=" font-size:20px;
font-weight:bold;
font-variant:small-caps;
color:#023357;
background-color:#AAAAAA; ">
Stilul inline</p>
</body>
</html>

Dimensionarea elementelor pe pagina
Dimensionarea tagurilor html, al elementelor html de pe o pagina web, este foarte usoara cu css,
putandu-se specifica dimensiuni specifice pentru fiecare tag, paragraf, div, tabel etc. Acestea pot fi fixe
sau elastice. Printr-o dimensiune fixa se intelege o latime si o inaltime specificata in pixeli.
Div inseamna division, adica impartirea paginii pe arii de fapt. Daca se doreste dimensionarea unui
div se poate folosi inline css, pentru ca div-urile se utilizeaza destul de des in design, si nu este
recomandat sa fie specificate la o dimensiune fixa pentru toata pagina:
<div style=width:300px; height:100px></div>
Dupa cum se poate observa, parametri necesari pentru latime inaltime sunt width:(nr)px si
height:(nr)px. In cadrul unui div se poate incadra aproape orice alt tag html care poate avea alt stil.
Exista si posibilitatea de a defini latimea sau inaltimea unui div, unui element html, folosind procentaje.
Procentul definit pentru un div, adica pixelii actuali, vor fi calculatati in functie de marimea tagului
parinte. Adica, daca intr-un div, care are 500 de pixeli latime, se afla un alt div, la care se specifica o
latime de 10%, atunci cel de al doilea div va avea o latime de 100 de pixeli.
<div style=20%; height:80px></div>
Se poate specifica o dimensiune fixa si la alte taguri html, de exemplu pentru tagul img. Acest lucru
insa de multe ori nu este recomandat; el trebuie aplicat doar in cazuri in care se stie sigur ca
dimensiunea respectiva va trebui utilizata de cele mai multe ori. In cazul in care dimensiunea
specificata la imagini nu mai este convenabila intr-o situatie, aceasta se poate suprascrie cu css inline.
img { width:150px;height:200px; }

<html>
<head>
<title>Exemplu dimensionare CSS</title>
body {
font-size:17px;
color:#056005;
font-weight:bold;
background-position:right top;
background-repeat: repeat-y;
background-color:#EEEEEE; }
p img { width:250px;height:175px; }
</style>
</head>
<body>
<div style="width:400px; height:320px;
background-color:#50AAFE;">
Text intr-un paragraf stilizat.
Text intr-un paragraf stilizat.
<p style="width:300px;height:70%;
background-color:#94CAFC;">
Text intr-un paragraf stilizat,
care se afla intr-un div stilizat.
<img src="(8).jpg">
</p>
</div>
</body>
</html>

Padding in CSS
Proprietatea padding este o directiva prin care se poate adauga spatiu liber in jurul continutului.
Padding-ul este in interiorul elementelor, deci nu este o parte invisibila, precum sunt marginile.
Padding-ul este afectat de culoarea de background si este folosit de obicei pentru stilizarea
paragrafelor, dar nu numai. Acesta se poate adauga folosind
padding:(nr)px;
Daca se specifica padding:0px;, atunci textul sau elementul respectiv nu va fi inconjurat de spatiu liber.
Se poate specifica si separat un padding pentru fiecare directie, acest lucru realizandu-se astfel:
padding-top:10px;
padding-right:20px;
padding-bottom:30px;
padding-left:40px;
O varianta prescurtata a padding-ului de mai sus este urmatoarea:
padding:10px 20px 30px 40px;
<html>
<head>
<title>Exemplu padding CSS</title>
body {
color:#062630;
font-weight:bold;
}
</style>
</head>
<body>
<p style="background-color:#EEEEEE;">
Acesta este un paragraf fara padding, deci intre
text si marginile paragrafului nu este spatiu
liber! Textul este lipit de marginile acestuia.
</p>
<p style="background-color:#DDDDDD; padding:20px;">
In acest paragraf am folosit padding de 20
pixeli, deci textul nu mai e lipit de marginile
paragrafului, ci este inconjurat din fiecare
directie cu un spatiu liber de 20 pixeli.
</p>
</body>
</html>

Stilizarea link-urilor in CSS
Link-urile pot fi stilizate in functie de comportamentul lor, adica se poate aplica un stil diferit daca
link-ul respectiv a fost deja vizitat, sau daca mouse-ul se afla deasupra link-ului etc.
Stilizarea unui link la care inca nu s-a dat click se face cu a:link. Link-urile nu se pot stiliza cu inline CSS,
astfel, ca sa definim stilul lor, stilurile trebuiesc create in partea de head a documentului sau intr-un
fisier extern.
Efectele obtinute cand mouse-ul se afla deasupra unui link si acesta clipeste sau se observa orice
modificare la design-ul link-ului, se fac cu a:hover.
Cand pagina unde duce link-ul respectiv a fost vizitata deja, se poate specifica ca link-ul sa arate diferit.
Acest lucru se realizeaza cu a:visited.
Cand pagina unde duce linkul respectiv este deja deschisa se poate aplica un alt stil cu a:active .
<html>
<head>
<title>Exemplu padding CSS</title>
body {
}
a:link {
background-color:#C0E0E8; color:#1A2A70;
text-align:center;
text-decoration:none;
}
a:hover {
font-family:Arial;
background-color:#333333; color:#ffffff;
text-align:center;
}
a:visited {
background-color:#EEEEEE; color:#333333;
text-align:center;
}
</style>
</head>
<body>
<a href="link.html">Exemplu link<a>
<a href="link.html">Exemplu link<a>
<a href="link1.html">Exemplu link vizitat<a>
</body>
</html>

Id-uri si clase in CSS
Id-urile si clasele constituie un punct foarte puternic al acestui limbaj de stilizare. Pana acum a fost
prezentat faptul ca se poate defini un anumit stil pentru fiecare tag html. Ce se intampla daca se doresc
paragrafe cu stiluri diferite? O varianta ar fi definirea stilului partea head pentru tagul dorit, iar apoi
folosirea de inline css. O alta varianta e folosirea id-urilor si claselor. Cu ajutorul id-urilor si claselor se
pot defini mai multe stiluri ce se pot aplica aplica unde se doreste, fara a incarca pagina cu cod de
stilizare.
Id-urile se folosesc mai ales la elementele de baza a unui design, si trebuie sa fie unice intr-o pagina.
Ele se definesc in partea de head cu ajutorul semnului #, care este urmat de un nume unic, altfel
suprascriindu-se un stil deja definit. Aplicarea id-urilor in interiorul tag-urilor html se realizeaza scriind
id=numele-id-ulu-definit.
#nume_id {
stilizare
}
</style>
...
<div id="nume_id">Text</div>
Avantajul claselor consta in faptul ca pot fi folosite la mai multe taguri html. Prin asta se intelege ca se
poate folosi acelasi stil pentru mai multe paragrafe, heading-uri etc. Singura diferenta intre definirea si
folosirea claselor fata de id-uri este, ca in loc de # la definire, se foloseste ., iar in interiorul tagului
html in loc de id, se scrie class=numele-clasei.
.nume_clasa {
stilizare
}
</style>
...
<p class="numeclasa">Text in paragraful la care am
aplicat clasa nume_clasa</p>
Fiecare atribut are avantajele lui. Id-urile se folosesc pentru a aplica anumite stiluri care trebuie sa fie
unice, care sunt folosite mai ales la pozitionare si pentru crearea design-ului de baza. Clasele se pot
folosi in mai multe locuri, economisesc timp de scriere, si fac codul mai curat.
Daca a fost specificat un anumit stil cu ajutorul unui id pentru fonturile dintr-un div, si se vrea ca in
unele paragrafe din cadrul div-ului sa se foloseasca alte fonturi, nu trebuie neaparat folosit inline css.
Acest lucru se poate realiza cu ajutorul unor directive mai complexe, se pot crea stiluri speciale.
#nume_id { color:#990000; }
#nume_id p { color:#000000; }
Se defineste o a doua directiva care suprascrie culoarea pentru paragrafele din div-ul cu id-ul
nume_id. Paragrafele care se vor afla in interiorul div-ului cu id-ul nume_id vor avea o alta culoare
datorita celei de-a doua directive.

04 TIC Avansati B Tutorial HTML

Încărcat de

Informații document

Drepturi de autor

Formate disponibile

Partajați acest document

Partajați sau inserați document

Opțiuni de partajare

Vi se pare util acest document?

Este necorespunzător acest conținut?

Drepturi de autor:

Formate disponibile

04 TIC Avansati B Tutorial HTML

Încărcat de

Drepturi de autor:

Formate disponibile

Tutorial HTML si CSS

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