Sunteți pe pagina 1din 77

EXERCIII

DE CREARE
A PAGINILOR WEB

ii

EXERCIII DE CREARE
A PAGINILOR WEB

Liviu Dumitracu (coodonator)


Eduard Apostol
Irina Ioni
Gabriel Marcu

Editura Universitii Petrol-Gaze din Ploieti


2014
iii

Copyright 2014 EDITURA UNIVERSITII PETROL-GAZE DIN PLOIETI

Toate drepturile asupra acestei ediii sunt rezervate editurii

Autorii poart ntreaga rspundere moral, legal i material fa de editur i tere


persoane pentru coninutul lucrrii.
Pentru realizarea acestei cri autorul a utilizat aplicaii software cu licen trial.

Descrierea CIP a Bibliotecii Naionale a Romniei


Exerciii de creare a paginilor web / Liviu Dumitracu (coord.),
Eduard Apostol, Irina Ioni, Gabriel Marcu - Ploieti : Editura
Universitii Petrol-Gaze din Ploieti, 2014
Bibliogr.
ISBN 978-973-719-558-6

I. Dumitracu, Liviu (coord.)


II. Apostol, Eduard
II. Ioni, Irinal
III. Marcu, Gabriel

Redactori: Liviu Dumitracu


Tehnoredactare: Eduard Apostol
Control tiinific: Cristian Marinoiu, Viorel Marinescu
Copert: Bogdan Manea
Director editur: erban Vasilescu

Adresa:
Editura Universitii Petrol-Gaze din Ploieti
Bd. Bucureti 39, cod 100680
Ploieti, Romnia
Tel 0244-573171, Fax: 0244-575847
ISBN: 978-973-719-558-6
iv

Cuprins general
Despre carte

vii

Mulumiri
PARTEA I Exerciii Didactice HTML
EDHTML 1

EDHTML 2
EDHTML 3
EDHTML 4
EDHTML 5
EDHTML 6
EDHTML 7
EDHTML 8
EDHTML 9
EDHTML 10
EDHTML 11
EDHTML 12
EDHTML 13
EDHTML 14
EDHTML 15
EDHTML 16

PARTEA a II -a Exerciii Didactice Dreamweaver


EDDW 1
EDDW 2
EDDW 3
EDDW 4
EDDW 5
EDDW 6
EDDW 7
EDDW 8
EDDW 9
EDDW 10
EDDW 11
EDDW12
EDDW13
EDDW 14
EDDW 15
EDDW 16
EDDW 17
EDDW 18
EDDW 19
EDDW 20
EDDW 21
vi

PARTEA a III-a - Exemple de pagini web


EXEMPLUL 1
EXEMPLUL 2
Bibliografie, webografie

vii

Despre carte
Care este esena acestei cti?
Cartea, intitulat Exerciii de creare a paginilor web cuprinde exerciii
didactice HTML (Partea nti), exerciii didactice Dreamweaver
(Partea a doua) i dou exemple de pagini web create cu limbajul JSP
i JavaScript (Partea a treia).
Toate exerciiile (HTML, Dreamweaver) i exemplele (JSP, JavaScript)
sunt rezolvate, iar cititorul este antrenat pe tot parcursul lucrrii s
urmreasc activ textul, structurat n ENUN, REZOLVARE,
COMENTARII, MESAJE PENTRU CITITOR, implicndu-se prin aplicaiile
sale proprii, cu o contribuie interactiv la nsuirea fiecrei
provocri.
Lucrarea conine exerciii, exemple atrgtoare, prieteneti, care s
in conectat cititorul la procesul permanent de nvare (creare a
paginilor web) prin temele propuse la finele fiecrui exerciiu
(MESAJE PENTRU CITITOR) i prin finalitate pe care l-am instigat s o
realizeze.
Pentru rezolvarea exerciiilor didactice din prima parte a lucrrii, am
folosit editorul Adobe Dreamweaver CS 6, iar pentru exerciiile
***
viii

didactice din a doua parte a lucrrii am utilizat tot Adobe


Dreamweaver CS 6, cititorii avnd posibilitatea s compare de fiecare
dat codul HTML introdus manual cu Adobe Dreamweaver (Partea
nti) cu codul HTML generat n mod automat de ctre Adobe
Dreamweaver CS 6 (Partea a doua).
Pentru primul exemplu i al doilea exemplu (Partea a treia) se
prezint numai codul surs HTML lsnd n sarcina celor interesai s
studieze limbajele utilizate: JavaScript respectiv JSP. Cele dou
exemple sunt create de autorii acestei cri (Liviu Dumitracu, Gabi
Marcu).
Care au fost sursele (bibliografice, webografice) folosite pentru
realizarea acestei cri?
Pentru realizarea acestei lucrri am folosit lucrrile cunoscutului
publicist francez Christophe AUBRY Dreamweaver CS 5, CS 5.5, CS 6
pour des sites full CSS conformes aux standards de W3C, Editions ENI,
La Collection Studio Factory 2009, 2010, 2011; site-ul web
www.adobe.com; http://adobe.com/devent/dreamweaver/articles/
css_concepts_05html; http://help.adobe.com/en_us/Dreamweaver/
10.0_using/index.html; referinele OREILLY OReilly Reference
HTML (Adobe Dreamweaver CS6) ct i lucrrile autorilor acestei
cri: (X)HTML, XML, JavaScript, Editura Universitii din Ploieti
(2003, 2004)(vezi bibliografie, webografie)
Cui se adreseaz aceast carte?
Lucrarea se adreseaz n primul rnd celor care nc nu tiu c vor
deveni, n curnd, interesai i celor presai s se formeze n acest
domeniu World Wide Web.
***

ix

i n ara noastr majoritatea instituiilor i a societilor comerciale


i-au construit site-uri web pentru promovarea produselor, serviciilor
i a activitii lor. Tot timpul este nevoie de specialiti care s creeze
site-uri web i s realizeze diverse aplicaii informatice.
Cine sunt autorii acestei cri?
Pentru a rspunde la aceast ntrebare, adresat, n special tinerilor
informaticieni v propun s accesai urmtoarele site-uri:
www.dumitrascu.ro, www.apeduard.uv.ro, www.upg-ploiesti.ro.
Cum studiai aceast carte?
Cartea se studiaz n funcie de obiectivele fiecruia dintre
Dumneavoastr, dup cum urmeaz:

Pentru studeni (licen, masterat) v recomandm toate

exerciiile didactice HTML, Dreamweaver i exemplele de pagini


web din cadrul lucrrii.

Pentru cei care doresc s studieze numai limbajul HTML, v


recomandm exerciiile didactice HTML din prima parte a lucrrii.

Pentru cei care doresc s studieze numai Adobe Dreamweaver

CS6, v recomandm exerciiile didactice Dreamweaver din


partea a doua a lucrrii.

Pentru cei care doresc s programeze n JavaScript v


recomandm:
- EXEMPLUL 1 + bibliografia, webografia din cadrul lucrrii;

Pentru cei care doresc s programeze n JSP v recomandm:


-

EXEMPLUL 2 + bibliografia, webografia din cadrul lucrrii;

Tuturor celor interesai de crearea paginilor web le transmitem


invitaia s nceap prin a utiliza Adobe Dreamweaver CS 6,
***
x

ntruct nu trebuie s scrie nici o linie de cod HTML, dar pentru a


putea depi anumite limite ale aplicaiei trebuie s tie i HTML,
care v asigurm c nu stric viaa personal a nimnui!
Aadar, v rugm s trecei de aceast scurt prezentare, iar apoi vei
vedea i singuri ce urmeaz.

Liviu DUMITRACU
Ploieti, 10 iulie 2014

xi

Mulumiri
Pentru nceput in s mulumesc:

Doamnei Director a Departamentului Informatic, Tehnologia

Informaiei, Matematic, Fizic (ITMF), conf. dr. inf. Gabriela


MOISE
- pentru inteligena cu care tie s se relaioneze cu toate
cadrele didactice din departamentul ITMF.
- pentru ncurajrile i sprijinul generos pe care ni l-a acordat
pe tot parcursul elaborrii lucrrii.

Firmei VALDOR
-

n particular, doamnei director ec. Ionelia MORCOVESCU,


pentru generozitatea pe care mi-a acordat-o timp de 20 de
ani n editarea lucrrilor mele.

echipei de specialiti care a asigurat controlul tiinific


-

n particular, domnului profesor conf. dr. mat. Cristian


MARINOIU i domnului profesor dr. mat. Viorel
MARINESCU.

Domnului Rector prof. dr. ing. Mihai Pascu COLOJA


-

pentru ajutorul acordat n toate etapele de realizare i


promovare a acestei lucrri.

Editurii Universitii Petrol-Gaze din Ploieti


-

n particular, domnului director prof. dr. ing. erban


VASILESCU i domnioarei redactor Carmen AVRAM.

Conducerii Facultii de Litere i tiine


-

xii

n particular, Doamnei Decan prof. dr. Anca DOBRINESCU i

doamnei Prodecan conf. dr. ing. Monica VLDOIU pentru


managementul de excepie aplicat n Universitate.

Conducerii Televiziunii Regionale Valea Prahovei


-

n particular domnului Director general Laureniu MEGELEA,


doamnei director Marketing Ioana ZAMFIRESCU, domnului
Director Programe Daniel DIMACHE.
in s mulumesc de asemenea:

tuturor colegilor de la Departamentul ITMF din cadrul UPG


Ploieti.

tuturor studenilor de la cele trei masterate din cadrul Facultii

de Litere i tiine: Concepte i strategii de comunicare


intercultural, Administraie public i integrare european,
Management educaional i integrare european, care nainte i n
timpul editrii acestei lucrri au suportat cu demnitate mai multe
variante ale manuscrisului, testri prelungite i nu doar att!

Colaboratorilor mei cu care am realizat aceast carte: Eduard


APOSTOL , Irina IONI i Gabriel MARCU.

Nu pot ncheia fr a mulumi i prietenilor mei care, n realitate


ignor ceea ce fac i de asemenea numeroilor mei prieteni care
nu vor avea plcerea de a citi aceast carte.

Liviu DUMITRACU
Ploieti, 10 iulie 2014

xiii

Partea I

Exerciii didactice HTML

EDHTML

Crearea paragrafelor

ENUN
Creai un paragraf n HTML (figura 1.1).
Figura 1.1

REZOLVARE
Deschidei Adobe Dreamweaver i afiai modul code (figura
1.2).

Figura 1.2

Introducei textul din figura 1.1, tastai tag-ul <p> la

nceputul paragrafului i tag-ul </p> la sfritul paragrafului


(figura 1.3).
Figura 1.3

Afiai pagina web ntr-un browser.


COMENTARII
Tag-ul <p> specific trecerea la un paragraf nou.
Se recomand ca toate tag-urile <p> s fie plasate pe linii
distincte.

Mai multe detalii despre tag-ul HTML <p> gsii n referina


HTML a editorului OREILLY (figura 1.4), via Help,
Reference, Book, OReilly Reference, Tag.

Figura 1.4

MESAJE PENTRU CITITOR


Creai n HTML pagina Web din figura 1.5, care conine
dou paragrafe.

Afiai pagina web obinut ntr-un browser.


Comentariu personal

Figura 1.5

Comentariu personal

EDHTML

Formatarea HTML a
paragrafelor

ENUN
Centrai primul paragraf i aliniai la dreapta al doilea paragraf
(figura 1.6).

Figura 1.6

REZOLVARE
Deschidei Adobe Dreamweaver i afiai modul code (figura
1.7).

Figura 1.7

Introducei de la tastatur paragrafele din figura 1.6.


Introducei tag-ul <p> i atributul align=center pentru
primul paragraf, respectiv align=right pentru cel de-al
doilea paragraf (figura 1.8)

Figura 1.8

Afiai pagina web ntr-un browser.


COMENTARII
Pentru centrarea unui paragraf putei folosi i tagul
<center>.

Evitai centrarea paragrafelor lungi ntruct riscai s fie citite


cu dificultate.

Utilizai <p align=left> pentru alinierea la stnga a unui


paragraf.

Utilizai <p align=justify> pentru alinierea ambelor


margini ale unui paragraf.

Mai multe detalii despre tag-ul HTML <p> i atributele

acestuia gsii n referina HTML a editorului OREILLY


(figura 1.9), via Help, Reference, Book, OReilly
Reference, Tag.

Figura 1.9

MESAJE PENTRU CITITOR


Creai n HTML pagina Web din figura 1.10, care conine
dou paragrafe n care ambele margini sunt aliniate.

Afiai pagina web obinut ntr-un browser.

Figura 1.10

Comentariu personal

10

EDHTML

Inserarea unui salt de linie

ENUN
Forai trecerea la un rnd nou (o nou linie) n cadrul
paragrafului curent, fr a ncepe un nou paragraf (figura
1.11).
Figura 1.11

REZOLVARE
Deschidei Adobe Dreamweaver i afiai modul code (figura
1.12).

11

Figura 1.12

Introducei textul din figura 1.11 ntr-un paragraf i tag-ul


<br> dup cuvntul sunt (figura 1.13).

Figura 1.13

Afiai pagina web ntr-un browser.


COMENTARII
Tag-ul <br > foreaz trecerea la o nou linie n cadrul
12

paragrafului curent, dar nu ncepe un nou paragraf.

Mai multe detalii despre tag-ul HTML <br> gsii n referina

HTML a editorului OREILLY (figura 1.14), via Help,


Reference, Book, OReilly Reference, Tag.

Figura 1.14

MESAJE PENTRU CITITOR


Creai n HTML pagina Web din figura 1.15, care conine trei
linii de text.

Afiai pagina web obinut ntr-un browser.

Figura 1.15

Comentariu personal

13

EDHTML

Scrierea unui text cu


exponent / indice

ENUN
Scriei n HTML urmtoarele texte (figura 1.16):
b2 = b b
b12 = b1 b1

14

Figura 1.16

REZOLVARE
Deschidei Adobe Dreamweaver i afiai modul code (figura
1.17).

Figura 1.17

Utilizai tag-ul <sup> pentru scrierea unui text cu exponent


(figura 1.18).

Figura 1.18

Utilizai tag-ul <sub> pentru scrierea unui text ca indice


(figura 1.19).

15

Figura 1.19

Afiai pagina web ntr-un browser.


COMENTARII
Tag-urile <sup> i <sub> nu admit atribute.
Tag-ul <br> a fost folosit pentru salt la urmtoarea linie.
Mai multe detalii despre tag-urile HTML <sup> i <sub>

le gsii n referina HTML a editorului OREILLY (figura


1.20 a) i b), via Help, Reference, Book, OReilly
Reference, Tag.
Figura 1.20

a)

16

b)

MESAJE PENTRU CITITOR


Scriei n HTML formula acidului sulfuric (H2SO4), folosind
una din metodele:
Quick Tag Editor.
HTML Tags.

Scriei n HTML urmtoarea formul: c2=a2+b2.


Comentariu personal

17

EDHTML

Crearea titlurilor

ENUN
n pagina web, din figura 1.21, punei n eviden cele trei
nivele de titlu (1 3) HTML: Titlu de nivel 1, Titlu de nivel 2,
Titlu de nivel 3.
Figura 1.21

18

REZOLVARE
Deschidei Adobe Dreamweaver i afiai modul code (figura
1.22).

Figura 1.22

Plasai primul rand de text ntre tag-urile <h1> i</h1>


(figura 1.23).

Figura 1.23

19

Plasai al doilea rand de text ntre tag-urile <h2> i</h2>


(figura 1.24)

Figura 1.24

Plasai al treilea rand de text ntre tag-urile <h3> i</h3>


(figura 1.25).
Figura 1.25

Afiai pagina web ntr-un browser.


20

COMENTARII

Putei utiliza cel mult 6 nivele de titlu <h1> </h6>.


Pentru principalele titluri(3) utilizai: <h1>,<h2>,<h3>.
Pentru textul principal utilizai <h4>.
Pentru adres, copyright al paginii web, etc. utilizai: <h5>
i <h6>.

Dimensiunea cea mai mare a titlului se obine cu <h1> (32


pixeli).

Dimensiunea cea mai mic a titlului se obine cu <h6> (10


pixeli).

Mai multe detalii despre tag-urile HTML <h1>, <h2>,


<h3>, <h4>, <h5> i <h6> gsii n referina HTML a
editorului OREILLY (figura 1.26), via Help, Reference,
Book, OReilly Reference, Tag.

Figura 1.26

MESAJE PENTRU CITITOR


Punei n eviden i celelalte nivele de titluri : <h4>,
<h5> i <h6>.

Realizai cte un exemplu de pagini web pentru fiecare nivel


de titlu <h4>, <h5> i <h6>.

21

EDHTML

Formatarea HTML a titlurilor

ENUN
Centrai titlurile de nivel 1, nivel 2 i nivel 3 (figura 1.27)
Figura 1.27

REZOLVARE
Deschidei Adobe Dreamweaver i afiai modul code (figura
1.28).

22

Figura 1.28

n figura 1.29 se prezint codul HTML inserat n Adobe


Dreamweaver CS6

Figura 1.29

Afiai pagina web ntr-un browser.


COMENTARII
Utilizai atributul align=left pentru alinierea la stnga a
titlurilor.

23

Utilizai atributul align=right pentru alinierea la dreapta a


titlurilor.

Utilizai atributul align=justify pentru alinierea ambelor


margini ale titlurilor.

Mai multe detalii despre tag-urile HTML <h1>, <h2>,

<h3>, <h4>, <h5>, <h6> i atributul align gsii n


referina HTML a editorului OREILLY (figura 1.30), via
Help, Reference, Book, OReilly Reference, Tag.

Figura 1.30

MESAJE PENTRU CITITOR


Pentru pagina web din figura 1.27 aliniai la dreapta titlurile
de nivel 1, 2 i 3 colorndu-le n albastru.

Indicaie : Introducei n tagurile <h1>, <h2>, <h3>

atributul color=blue sau color=#FF0000

Creai o pagin web, n care, aliniai ambele margini ale


titlurilor de nivel 1, 2 i 3, colorndu-le n verde.

Comentariu personal

24

EDHTML

Inserarea caracterelor
speciale

ENUN
Inserai ntr-o pagin Web textul: Copyright 2011 SC Valdor
SRL (figura 1.31).

Figura 1.31

25

REZOLVARE
Deschidei Adobe Dreamweaver i afiai modul code (figura
1.32).

Figura 1.32

Pentru inserarea caracterului special de Copyright utilizai


&copy; sau &#169; (figura 1.33 a) i b)).

Figura 1.33

a)

26

b)

Afiai pagina web ntr-un browser.


COMENTARII
&copy; sau &#169; insereaz simbolul la poziia curent a
cursorului.

n navigator, simbolul apare explicit.


Utilizai pentru caracterul , codul &#174;, caracterul @,
codul &#64;

MESAJ PENTRU CITITOR


Inserai ntr-o pagin Web textul: office@valdor.ro
Inserai ntr-o pagin Web textul: Servicii hoteliere & Cazare
Comentariu personal

27

EDHTML

Bararea / sublinierea
unui text

ENUN
Bordai (tiai) primul cuvant i subliniai al doilea cuvnt din
textul: Adobe Dreamweaer (figura 1.34).

Figura 1.34

REZOLVARE
Deschidei Adobe Dreamweaver i afiai modul code (figura
1.35).

28

Figura 1.35

n figura 1.36 se prezint documentul surs HTML care pune


n valoare tag-urile folosite.

Figura 1.36

Afiai pagina web ntr-un browser.

29

COMENTARII
Pentru a bara un text, utilizai tag-urile <s> sau <strike>.
Pentru a sublinia un text, utilizai tag-ul <u>, dar se

recomand mult pruden ntruct se pot crea confuzii cu


textul subliniat folosit ca link.

Mai multe detalii despre tag-urile HTML <s> si <u> gsii


n referina HTML a editorului OREILLY (figura 1.37 a, b),
via Help, Reference, Book, OReilly Reference, Tag.

Figura 1.37

a)

b)

MESAJE PENTRU CITITOR


Creai o pagin web n care s folosii tagurile din prezentate
n EDHTML8

Afiai pagina web ntr-un browser

30

EDHTML

Legturi hipertext interne.


Crearea legturilor hipertext
ctre o alt pagin a site-ului web

ENUN
Creai o legtur hipertext, din pagina EDHTML9.html ctre
pagina valdor.html. Folosii textul de legtur Exerciiu
didactic.

REZOLVARE
Deschidei Adobe Dreamweaver i afiai modul code (figura
1.38).

Figura 1.39

31

Creai pagina web valdor.html (figura 1.40).

Figura 1.40

Creai o niu pagin web (EDHTML9.html) n care inserai


tag-ul <a> cu atributul href (figura 1.41).

32

Figura 1.41

Testai legtura (figura 1.42).

Figura 1.42

COMENTARII
Pentru a realiza o legtur hipertext, utilizai tag-ul <a> cu
atributul href, absolut necesar ntr-o legtur.

Textul de legtur pe care se execut clic va fi afiat cu o


culoare albastru i subliniat.

Nu uitai regula HTML: atributele se scriu cu minuscule, iar


valorile acestora trebuie ncadrate ntre ghilimele.
Mai multe detalii despre tag-urile HTML <a> gsii n
referina HTML a editorului OREILLY (figura 1.43), via
Help, Reference, Book, OReilly Reference, Tag.

Figura 1.43

33

MESAJE PENTRU CITITOR


Realizai o legtur hipertext, avnd ca suport o imagine,
ctre pagin web valdor.html (figura 1.44)

Figura 1.44

Indicaie : Folosii tag-ul <img> cu atributul src (<a href=


"valdor.html">
<img
src="taverna_romaneasca.jpg"
width="300" height="168"></a>

Comentariu personal

34

EDHTML

10

Legturi hipertext interne.


Crearea legturilor hipertext n
cadrul aceleiai pagini web

ENUN
Creai n HTML, legturi hipertext interne, cu ajutorul ancorelor
ca n figura 1.42

Figura 1.42

35

REZOLVARE
Deschidei Adobe Dreamweaver i afiai modul code (figura
1.43).

Figura 1.43

Creai la nceputul documentului, un meniu (o list) cu


serviciile comerciale oferite de SC Valdor SRL. (figura 1.44
liniile de cod 10, 11, ,13).
Figura 1.44

36

Creai ancorele cu ajutorul tag-ului <a> i atribuii fiecreia


cte un nume cu ajutorul atributului name (figura 1.45 liniile
de cod 15 i 18).
Figura 1.45

Creai o ancor numit START la nceputul documentului


(figura 1.46 linia de cod 8).

Figura 1.46

Creai legturi ctre ancorele definite cu ajutorul tag-ului


<a> i a atributului href. (figura 1.47 liniile de cod 11,12,
13 i 14)

37

Figura 1.47

Introducei pentru fiecare serviciu comercial legturi ctre


ancora START, cu ajutorul tag-ului <a href=#start>
Revers START</a> (figura 1.48 linia de cod 18)
Figura 1.48

Afiai pagina web ntr-un browser.


COMENTARII
n navigator ancora nu se afieaz.
n navigator, legturile ctre ancore se afieaz ntr-o
38

culoare diferit fa de legturile hipertext clasice.

Mai multe detalii despre tag-urile HTML <a> i atributul

name gsii n referina HTML a editorului OREILLY (figura


1.49), via Help, Reference, Book, OReilly Reference,
Tag.
Figura 1.49

MESAJE PENTRU CITITOR


Testai legturile pentru ancorele pe care le-ai realizat.
Creai o pagin web in care s avei definite mai multe
ancore.

Comentariu personal

39

EDHTML

11

Legturi hipertext externe


Crearea legturilor hipertext
ctre un site Web

ENUN
Creai o legtur ctre site-ul www.valdor.ro. Utilizai textul de
legtur SC Valdor SRL (figura 1.50)

Figura 1.50

REZOLVARE
Deschidei Adobe Dreamweaver i afiai modul code (figura
1.51).

40

Figura 1.51

Inserai n codul HTML al paginii tag-ul <a> cu atributul


href="http://www.valdor.ro" (figura1.52 linia de cod 9)

Figura 1.52

Afiai pagina web ntr-un browser.


COMENTARII
n browser, legtura hipertext extern apare colorat (n
albastru) i subliniat.

Mai multe detalii despre tag-urile HTML <a> i atributul

href gsii n referina HTML a editorului OREILLY (figura


1.51), via Help, Reference, Book, OReilly Reference,
Tag.
41

Figura 1.51

MESAJE PENTRU CITITOR


Creai o pagin Web care conine link-uri utile ctre site-urile
web preferate. (figura 1.52)

Afiai pagina web ntr-un borowser.


Figura 1.52

Comentariu personal

42

EDHTML

12

Legturi hipertext externe


Crearea legturilor hipertext
ctre o adres de e-mail

ENUN
Creai o legtur ctre o adres de e-mail (ldumitracu@upgploiesti.ro). Utilizai textul de legtur E-mail-ul meu (figura
1.53)
Figura 1.53

REZOLVARE
Deschidei Adobe Dreamweaver i afiai modul code (figura
1.54.

43

Figura 1.54

Inserai n codul HTML al paginii tag-ul <a> cu atributul

href="mailto:ldumitrascu@upg-ploiesti.ro" (figura1.55
linia de cod 9)
Figura 1.55

Testai legtura realizat


COMENTARII
Cnd executai clic pe o legtur e-mail, se activeaz
aplicaia de pot electronic.

44

MESAJE PENTRU CITITOR


Creai o pagin Web care conine link-uri utile (trei adrese de
e-mail), figura 1.56, utilizai titlurile h1 i h2

Figura 1.56

Testai legturile realizate.


Comentariu personal

45

EDHTML

13

Crearea i formatarea
unui tabel HTML

ENUN
Accesai site-ul www.dumitrascu.ro/dumitrasculiviu iar apoi
structurai informaiile privind cele dou emisiuni TV
CONFESIUNI
ACADEMICE
i
SENIORII
PETROLULUI
ROMNESC, ntr-un tabel HTML (titlu, corp tabel, linii de date).

REZOLVARE
Analizai structura celor dou emisiuni TV, pentru a sintetiza
informaiile n tabelul prezentat n figura 1.57.

46

Figura 1.57

Deschidei Adobe Dreamweaver i afiai modul code (figura


1.58.

Figura 1.58

Pentru crearea tabelului utilizai tag-urile:<table>, <tr>,


<td>.

Pentru a atribui un titlu tabelului utilizai tag-ul <caption>


Pentru formatarea tabelului (centrare, dimensiune,
modificarea spaiului dintre celule, etc.) utilizai atributele:
align, width, height, border, cellspacing, cellpading, bgcolor
etc.

Centrai datele din tabel.


n figura 1.59 se prezint tabelul HTML n forma final.

Figura 1.59

47

n figura 1.60 se prezint codul HTML al exerciiului didactic,


introdus cu editorul Adobe Dreamweaver CS6.

Figura 1.60

COMENTARII
nainte de a ncepe crearea unui tabel v recomandm s
parcurgei urmtorii pai: listai toate datele nainte de a fi
inserate n tabel, definii structura tabelului, realizai un
cadru al viitorului tabel pentru a putea judeca aspectul
acestuia.

Nu folosii tabelele HTML pentru formatarea paginilor web!


48

Utilizai stilurile CSS.

Mai multe detalii despre tag-urile HTML <table>, <tr>,


<td> i <th>
gsii n referina HTML a editorului
OREILLY (figura 1.61 a), b), c)), via Help, Reference,
Book, OReilly Reference, Tag.

Figura 1.61

a)

b)

c)

49

MESAJE PENTRU CITITOR


Analizai tag-urile HTML utilizate n acest exerciiu didactic.
Aplicai o culoare primei linii a tabelului.
Aplicai o imagine de background tabelului.
Comentariu personal

50

EDHTML

14

Inserarea i formatarea
unei imagini

ENUN
Inserai o imagine, care reprezint sigla Televiziunii regionale
Valea Prahovei (figura 1.62)
Figura 1.62

51

REZOLVARE
Deschidei Adobe Dreamweaver i afiai modul code (figura
1.63.

Figura 1.63

Introducei n tagul <img> din Adobe Dreamweaver CS 6


(modul de afiare code) atributele: src (pentru calea de
acces la imagine), align, height, width, border.

n figura 1.64 este prezentat codul surs HTML

52

Figura 1.64

Vizualizai pagina web ntr-un browser.


Plasai textul de prezentare a emisiunii

SENIORII
PETROLULUI ROMNESC n jurul imaginii pe care tocmai ai
inserat-o.

Centrai textul din titlu (SENIORII PETROLULUI ROMNESC)


Vizualizai pagina web ntr-un browser.
COMENTARII
Putei ntrerupe linia de text din jurul unei imagini i muta
textul de dup ntreruperea de linie dincolo de imagine.

<br clear=all> mut textul de dup ntreruperea de linie


dincolo de imagine pn cnd ambele margini sunt libere.

Mai multe detalii despre tag-ul HTML <img> gsii n

referina HTML a editorului OREILLY (figura 1.65), via


Help, Reference, Book, OReilly Reference, Tag.

Figura 1.65

53

MESAJE PENTRU CITITOR


Pornind de la imaginea cu sigla Televiziunii regionale Valea

Prahovei, creai o nou imagine cu zone reactive pe care


apoi s-o mprii n forme (arii) diferite (dreptunghi) cu
rolul de legturi ctre o pagin web diferit.
Indicaie : parcurgei urmtorii pai:
Introducei n tag-ul
<img> tag-urile: src,
usemap=#zona1
Introducei n tagul <map> numele pe care l-ai atribuit
zonei reactive (zona1)
Introducei n tagul <area> n care urmeaz s definii
zona reactiv atributele: shape, coords (valorile
coordonatelor colul din stnga-sus i colul din
dreapta-jos), href.

Testai funcionalitatea zonei reactive.


Comentariu personal

54

EDHTML

15

Crearea unui formular

ENUN
Inserai un formular n HTML care conine aprecierile
vizitatorilor site-ului dumneavoastr. (figura 1.66)

Figura 1.66

55

REZOLVARE
Deschidei Adobe Dreamweaver i afiai modul code (figura
1.67.

Figura 1.67

Utilizai tagurile: form, input, label.


Mai multe detalii despre tag-urile HTML utilizate pentru

crearea formularelor le gsii n referina HTML a editorului


OREILLY (figura 1.68), via Help, Reference, Book,
OReilly Reference, Tag.

Figura 1.68

a)
56

b)

d)

MESAJE PENTRU CITITOR


Afiai pagina web ntr-un browser
Creai un buton imagine pentru expedierea i resetarea unui
formular.

Creai trei casete de validare cu numele a trei site-uri web pe


care le accesai frecvent

Comentariu personal

57

EDHTML

16

Crearea i aplicarea
stilurilot CSS

ENUN
Creai o legtur ctre o adres de e-mail (ldumitracu@upgploiesti.ro). Utilizai textul de legtur E-mail-ul meu (figura
1.53)
Figura 1.53

REZOLVARE
Deschidei Adobe Dreamweaver i afiai modul code (figura
1.54.

Figura 1.54

Inserai n codul HTML al paginii tag-ul <a> cu atributul

href="mailto:ldumitrascu@upg-ploiesti.ro" (figura1.55
linia de cod 9)
Figura 1.55

Testai legtura realizat


58

COMENTARII
Cnd executai clic pe o legtur e-mail, se activeaz
aplicaia de pot electronic.

MESAJE PENTRU CITITOR


Creai o pagin Web care conine link-uri utile (trei adrese de
e-mail), figura 1.56, utilizai titlurile h1 i h2

59

60

61

62

Partea a II - a
Exerciii didactice Dreamweaver

63