ROMNIA

Universitatea Politehnica din Bucuresti

Facultatea de Antreprenoriat, Ingineria si Managementul
Afacerilor

Programarea Calculatoarelor II - Laboratorul 12
Responsabil: Drd. Ing. Bogdan Tiganoaia, bogdantiganoaia@yahoo.com
Obiectivele laboratorului sunt urmatoarele:
Preentarea limba!ului "T#$
$ucrul cu "T#$
Prezentarea limbajului HTML
Navigarea intr-un document
Este foarte folositor sa adaugi un link intr-o pagina iar atunci cand dai click pe el sa
fii trimis in alta arie a paginii. Pentru aceasta se foloseste tagul deja invatat <a href>,
diferenta fiind ca in locul adresei paginei se va folosi semnul # precedat de un nume
pe care il va primi o anumita arie a paginei. Pentru a denumi aria paginei dorite,
mergi la aria respectiva, si adaugi tagul <a name="numeleariei">te!tul din arie<"a>,
#
apoi pentru a pune un link catre acel loc foloseste <a href="#numeleariei">te!tul
link<"a>
Exemplu:
<a href="#section$">%ergi la sectiunea $<"a>
.....
.....
.....
.....
.....
<a name="section$">&i ajuns la sectiunea $'<"a>
%ergi la sectiunea $
.....
.....
.....
.....
.....
&i ajuns la sectiunea $'
Structurarea linkurilor
Pentru inceput este cel mai (ine ca toate documentele )*%+, imaginile si alte fisiere
sa se afle in acelasi director. &stfel, cand pui linkuri intre documente nu tre(uie sa
introduci toata locatia documentului, ci doar denumirea.
$
E!, <a href="numedocument"><"a>
Exemplu:- ai doua pagini, una "inde!.html", iar a doua "reclama.html"
http,""---.numedomeniu.ro"inde!.html
http,""---.numedomeniu.ro"reclama.html
.aca vrei sa adaugi un link de la pagina inde!.html catre pagina reclama.html, tot ce
tre(uie sa faci este sa adaugi tagul <a href="reclama.html">Pagina de reclama<"a>.
.aca vrei sa pui un link de la pagina reclama.html catre pagina inde!.html, folosesti
<a href="inde!.html">Pagina principala<"a>.
Pentru o mai (una aranjare a documentelor pe server este nevoie de foldere, aici
lucrurile devin putin mai provocatoare. /a 0icem ca fratele tau vrea sa isi
construieasca o pagina, dar nu vrei ca documentele tale sa se amestece cu ale lui,
atunci creea0a un director.
Exemplu: avem pagina inde!.html, reclama.html si directorul denumit 123.&4 in
care se gaseste un alt document inde!.html
http,""---.numedomeniu.ro"inde!.html
http,""---.numedomeniu.ro"reclama.html
http,""---.numedomeniu.ro"123.&4"inde!.html
Pe pagina ta inde!.html, vrei un link catre pagina inde!.html a fratelui tau din
directorul 123.&4. 5ea mai comuna cale de a face acest lucru este prin 67+,
<a href="http,""---.numedomeniu.ro"123.&4"inde!.html">Pagina fratelui meu'<"
a>
Sau: fara 67+
<a href="1ogdan"inde!.html">Pagina fratelui meu'<"a>
&cum pe pagina fratelui tau vrei un link catre pagina ta inde!.html. .eoarece pagina
8
ta este inaintea directorului fratelui tau vei folosi .. " sau adresa de url.
Exemplu:
<a href=".."inde!.html">Pagina principala<"a>
Sau:
<a href="http,""---.numedomeniu.ro"inde!.html">Pagina principala<"a>
Derularea textului
.aca doriti sa scrieti un te!t care sa se derule0e pe ori0ontala pe ecran, folositi
eticheta mar9uee.
Sura:
<mar9uee>&cest te!t este derulat pe ecran.<"mar9uee>
Puteti folosi si optiunea -idth, putand da astfel o anumita lungime pe ecran in care
sa se derule0e te!tul.
Sura:
<mar9uee -idth="8::">&cest te!t este derulat pe ecran.<"mar9uee>
!ak 1: Derulati un text pe ecran
!abele
Exemplu de tabel:
La ce sunt bune tabelele?
*a(elele sunt facute pentru a face informatia mai usor de interpretat si se pot
considera chiar grafice.
Sura:
<ta(le (order=8>
<tr>
<th>+a ce sunt (une ta(elele;<"th>
<"tr>
<
<tr>
<td>*a(elele sunt facute pentru a face informatia mai usor de interpretat si se pot
considera chiar grafice.<"td>
<"tr>
<"ta(le>
*a(elele sunt unele dintre cele mai provocatoare lucruri din codul )*%+. 4u sunt
greu de folosit, doar ca au un cod mai lung si necesita mai multa atentie. *a(elele
incep cu tagul <ta(le> care de o(icei contine atri(utul (order=n si se inchide cu tagul
<"ta(le>. &tri(utul (order indica grosimea chenarului ta(elului. .aca atri(utul (order
are valoarea n=: atunci marginea ta(elei este invi0i(ila.
=iecare rand din ta(ela este definit de tagul <tr>.>n fiecare rand al ta(elului se
gasesc casute, care sunt definite prin tagurile <td> si <"td>. .e multe ori, vei avea
nevoie de un titlu al coloanei care se va afla pe primul rand, pentru aceasta se
foloseste <th> si <"th>. *agul de introducere titlul coloanei face te!tul bold si centrat.
Exemplu de tabela cu mai multe randuri i coloane:
Titlu 1 Titlu 2 Titlu 3
5asuta & 5asuta 1 5asuta 5
5asuta . 5asuta E 5asuta =
Sura:
<ta(le (order=$>
<tr>
<th>*itlu #<"th><th>*itlu $<"th><th>*itlu 8<"th>
<"tr>
<tr>
<td>5asuta &<"td><td>5asuta 1<"td><td>5asuta 5<"td>
<"tr>
<tr>
<td>5asuta .<"td><td>5asuta E<"td><td>5asuta =<"td>
<"tr>
<"ta(le>
>ntroducerea atri(utului ro-span=n.
Exemplu:
Titlu 1 Titlu 2 Titlu 3
5asuta & ? .
5asuta 1 5asuta 5
5asuta E 5asuta =
@
Sura:
<ta(le (order=$>
<tr>
<th>*itlu #<"th><th>*itlu $<"th><th>*itlu 8<"th>
<"tr>
<tr>
<td ro-span=$>5asuta & ? .<"td><td>5asuta 1<"td><td>5asuta 5<"td>
<"tr>
<tr>
<td>5asuta E<"td><td>5asuta =<"td>
<"tr>
<"ta(le>
/e remarca adaugarea atri(utului ro-span=$ tagului <td>. &cest atri(ut a permis
acelei casute sa se intinda pe doua randuri. .aca vrei ca o casuta sa se intinda pe n
coloane adauga atri(utul colspan=n. Pentru schim(area po0itiei te!tului pe
ori0ontala in casuta se foloseste atri(utul align=left"center"right. Pentru schim(area
po0itiei te!tului pe verticala se foloseste atri(utul valign=top"middle"(ottom.
!ak 2: Inerati un tabel intr-o pagina "eb#
$daugarea unetelor
Pentru adaugarea de sunete unei pagini de -e( se foloseste tagul <em(ed>. &cest
tag supota e!tensii de genul .-av, .mp8, .au, .midi.
/tructura de (a0a a acestui tag,
<em(ed src="numesunet" -idth=n height=n autoplaA=n hidden=n loop=n
volume=n><"em(ed>
.aca vrei ca sunetul sa inceapa automat la deschiderea paginii setea0a
autoplaA=true, daca nu vrei ca sunetul sa inceapa automat setea0a autoplaA=false.
.aca nu vrei ca plaAer-ul sa apara in pagina setea0a hidden=true. .aca vrei ca
B
sunetul sa se auda in mod repetat setea0a loop=true. Columul se setea0a pe o scara
de la # la #:: D@: fiind valoarea predefinitaE.
Nota: Daca tagul nu are atributul autopla%&true ete necear a apaa pla%#
Sura:
'embed rc&(engine#"av( autopla%&)ale*'+embed*
!ak ,: Inerati un unet intr-o pagina "eb#
!ak -: Imbunatatiti pagina voatra "eb creata in laboratorul precedent cu
elemente invatate in cadrul laboratorului#
1i(liografie, http,""---.e-la(oratorA.net
F