ROMNIA

Universitatea Politehnica din Bucuresti

Facultatea de Antreprenoriat, Ingineria si Managementul
Afacerilor

Programarea Calculatoarelor II - Laboratorul 10
Responsabil: Drd. Ing. Bogdan Tiganoaia, bogdantiganoaia@yahoo.com
Obiectivele laboratorului sunt urmatoarele:
Preentarea limba!ului "T#$
$ucrul cu "T#$
Prezentarea limbajului HTML
Link-uri
Link-urile sunt esenta webului, fara acestea paginile unui site nu ar avea legatura
intre ele. Pentru a adauga un link se foloseste tagul de deschidere <a href="locatie">
si tagul de inchidere </a>. ot ce va aparea intre aceste doua taguri va fi subliniat si
colorat, iar in !o!entul click-ului pe acel te"t, browser-ul va fi tri!is spre locatia
data.
#
Exemplu:
$i%itea%a &utosite'
(ursa)
$i%itea%a <a href="http)//www.autosite.ro/">&utosite</a>'
*aca link-ul este catre o pagina care se afla in acelasi director cu pagina curenta, nu
!ai ai nevoie sa introduci url-ul, doar nu!ele paginii. (pre e"e!plu, daca ai o
pagina care se nu!este publicitate.ht!l, poti folosi codul <a
href="publicitate.ht!l">Publicitate</a>
agului de deschidere i se pot atasa atributul target="+blank" pentru ca link-ul sa se
deschida intr-o noua pagina.
,"e!plu)
$i%itea%a &utosite'
(ursa)
$i%itea%a <a href="http)//www.autosite.ro/" target="+blank">&utosite</a>'
De retinut: link-urile sunt folosite pentru a naviga de la o pagina la alta dar pot
fi folosite si pentru trimiterea mail-urilor!
Exemplu:
ri!ite un e!ail la -eb.aster'
"ursa:
ri!ite un e!ail la <a href="!ailto)e!gos+/hot!ail.co!">-eb.aster</a>'
#ask 1: $daugati un link intr-o pagina %eb
0
Imagini
Poti adauga paginii tale de web i!agini, atata ti!p cat acestea sunt in for!at .gif,
.1pg, .1peg. 2u se poate folosi for!atul .b!p' agul pentru a adauga o i!agine este
<i!g src="locatie">. ,ste reco!andat adaugarea atributelor height si width, acestea
per!itand i!aginii sa aiba diferite di!ensiuni. ,ste de ase!enea reco!andat
folosirea atributului alt="descrierea i!aginii", acesta in !o!entul suprapunerii
cursorului !ouse-ului cu i!aginea indica descrierea i!aginii. agul pentru adaugare
i!agine nu are si un tag de inchidere'
Exemplu:
"ursa:
<i!g src="!asina.1pg" width=033 height=#43 alt="ferrari">
*aca i!aginea este in acelasi director cu docu!entul 5.L, atunci folosesti
nu!ele i!aginii 6e")!asina.1pg7. *aca i!aginea se gaseste intr-un alt director,
atunci folosesti director/!asina.1pg
#ask &: $daugati o imagine intr-o pagina %eb!
8
Imagini link
Poate iti doresti sa ai o i!agine link, asta inse!nand ca in !o!entul unui click pe
i!agine esti tri!is la o alta pagina. &cesta este un lucru si!plu de facut, intre
tagurile de adaugare link se pune tagul de adaugare i!agine6<a href="url-ul link-
ului"><i!g src="locatia i!aginii"></a>. (e poate folosi si atributul de aliniere in
pagina align'
Exemplu:
"ursa:
<a href="http)//www.autosite.ro" target="+blank"><i!g src="!asina.1pg" width=033 height=#43 ></a>
#ask ': $daugati o imagine link intr-o pagina %eb
(ai multe taguri u)uale
agul center are ca actiune centrarea lucrurilor intr-o pagina. agul de deschidere
este <center>, iar tagul de inchidere este </center>. ot ceea ce este cuprins intre
aceste doua taguri va fi centrat in pagina6adica va aparea pe centrul paginii7.
9
Exemplu:
Invat *#(L+
Sursa:
<center><h3>Invat HTML !</h3></center>
2ota) -8: 6grupul care decide standardele 5.L7 reco!anda folosirea <div
align="center">te"t centrat</div> in locul tagului <center>, desi div nu functionea%a
in browsere vechi. &vanta1ul folosirii tagului div este ca poti alinia lucrurile in pagina
la stanga, pe centru si la dreapta prin folosirea atributului align.
Exemplu:
Invat *#(L+
Sursa:
<div align="center"><h3>Invat HTML!</h3></div>
Invat *#(L+
Sursa:
<div align="left"><h3>Invat HTML!</h3></div>
$tribute bod,
agul <bod;> are !ulte atribute. <n ur!atoarele randuri sunt cele !ai folositoare..
background-.locatia imaginii. = Pune o i!agine ca fundal al unei pagini web.
bgcolor-./cod 0exadecimal. = Pune o culoare ca fundal.
link-./cod 0exadecimal. = Pune o culoare pentru link.
vlink-./cod 0exadecimal. = Pune o culoare pentru linkurile de1a vi%itate.
text-./cod 0exadecimal. = Pune o culoare pentru te"t.
4
Exemplu:
<bod; bgcolor="blue">
..........
..........
</bod;>
Cod 0exa)ecimal
,"ista #=.> !ilioane de culori diferite in siste!ul de culori he"adeci!al, incepand de
la ?@@@@@@ care este alb, pana la ?333333 care este negru.
@iecare cod he"adeci!al este i!partit in 8 grupe)
- ?11"""" - enta de rosu
- ?""11"" - enta de verde
- ?""""11 - enta de albastru
@iecare unitate6"7 este o valoare intre 3 si @ in siste!ul de culori he"adeci!al.
(iste!ul de culori he"adeci!al consta in unitatile 3 # 0 8 9 4 = > A B & C : * , @, 3
fiind valoare nula, iar @ valoarea cea !ai !are.
*aca pri!ele doua unitati 6adica tenta de rosu7 sunt @@ 6cea !ai !are valoare7, iar
restul de patru sunt 3 6nul7 atunci culoarea va fi rosu curat.
*aca cele doua unitati din !i1loc 6adica tenta de verde7 sunt @@ 6cea !ai !are
valoare7, iar restul sunt 3 6nul7 atunci culoarea va fi verde curat.
*aca ulti!ele doua unitati 6adica tenta de albastru7 sunt @@ 6cea !ai !are valoare7,
iar restul sunt 3 6nul7 atunci culoarea va fi albastru curat.
<ncercati sa co!binati diferite culori pana cand a1ungeti la cea dorita plecand de la
cele 8 culori de ba%a.
#ask 2: Imbunatatiti pagina voastra %eb creata in laboratorul precedent cu
elemente invatate in cadrul laboratorului!
Cibliografie) http)//www.e-laborator;.net
=