partea 1.pdf

i

EXERCIII

DE CREARE

A PAGINILOR WEB

iii

EXERCIII DE CREARE

A PAGINILOR WEB

Liviu Dumitracu (coodonator) Eduard Apostol Irina Ioni Gabriel Marcu

Editura Universitii Petrol-Gaze din Ploieti 2014

iv

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

v

Cuprins general Despre carte vii

Mulumiri

PARTEA I Exerciii Didactice HTML

EDHTML 1 3

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

vi

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

vii

PARTEA a III-a - Exemple de pagini web

EXEMPLUL 1

EXEMPLUL 2

Bibliografie, webografie

viii

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

* * *

ix

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.

* * *

x

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,

* * *

xi

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

xii

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 - n particular, Doamnei Decan prof. dr. Anca DOBRINESCU i

xiii

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

1

Partea I

Exerciii didactice HTML

3

EDHTML

1

Crearea paragrafelor

ENUN

Creai un paragraf n HTML (figura 1.1).

Figura 1.1

4

REZOLVARE

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

Figura 1.2

Introducei textul din figura 1.1, tastai tag-ul la nceputul paragrafului i tag-ul la sfritul paragrafului (figura 1.3).

Figura 1.3

5

Afiai pagina web ntr-un browser.

COMENTARII

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

distincte.

Mai multe detalii despre tag-ul HTML 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

6

Figura 1.5

Comentariu personal

7

EDHTML

2

Formatarea HTML a paragrafelor

ENUN

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

Figura 1.6

8

REZOLVARE


Figura 1.7

Introducei de la tastatur paragrafele din figura 1.6. Introducei tag-ul i atributul align=center pentru

primul paragraf, respectiv align=right pentru cel de-al doilea paragraf (figura 1.8)

Figura 1.8

9


COMENTARII

Pentru centrarea unui paragraf putei folosi i tagul .

Evitai centrarea paragrafelor lungi ntruct riscai s fie citite cu dificultate.

Utilizai pentru alinierea la stnga a unui paragraf.

Utilizai pentru alinierea ambelor margini ale unui paragraf.

Mai multe detalii despre tag-ul HTML i atributele acestuia gsii n referina HTML a editorului OREILLY (figura 1.9), via Help, Reference, Book, OReilly Reference, Tag.

Figura 1.9


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.

10

Figura 1.10

Comentariu personal

11

EDHTML

3

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


12

Figura 1.12

Introducei textul din figura 1.11 ntr-un paragraf i tag-ul dup cuvntul sunt (figura 1.13).

Figura 1.13


COMENTARII

Tag-ul foreaz trecerea la o nou linie n cadrul

13

paragrafului curent, dar nu ncepe un nou paragraf.


Figura 1.14


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

14

EDHTML

4

Scrierea unui text cu exponent / indice

ENUN

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

Figura 1.16

15

REZOLVARE


Figura 1.17

Utilizai tag-ul pentru scrierea unui text cu exponent (figura 1.18).

Figura 1.18

Utilizai tag-ul pentru scrierea unui text ca indice (figura 1.19).

16

Figura 1.19


COMENTARII

Tag-urile i nu admit atribute. Tag-ul a fost folosit pentru salt la urmtoarea linie. Mai multe detalii despre tag-urile HTML i

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)

17

b)


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

18

EDHTML

5

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

19

REZOLVARE


Figura 1.22

Plasai primul rand de text ntre tag-urile i (figura 1.23).

Figura 1.23

20

Plasai al doilea rand de text ntre tag-urile i (figura 1.24)

Figura 1.24

Plasai al treilea rand de text ntre tag-urile i (figura 1.25).

Figura 1.25


21

COMENTARII

Putei utiliza cel mult 6 nivele de titlu . Pentru principalele titluri(3) utilizai: ,,. Pentru textul principal utilizai . Pentru adres, copyright al paginii web, etc. utilizai:

i . Dimensiunea cea mai mare a titlului se obine cu (32

pixeli).

Dimensiunea cea mai mic a titlului se obine cu (10 pixeli).

Mai multe detalii despre tag-urile HTML , , , , i gsii n referina HTML a editorului OREILLY (figura 1.26), via Help, Reference, Book, OReilly Reference, Tag.

Figura 1.26


Punei n eviden i celelalte nivele de titluri : , i .

Realizai cte un exemplu de pagini web pentru fiecare nivel de titlu , i .

22

EDHTML

6

Formatarea HTML a titlurilor

ENUN

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

Figura 1.27

REZOLVARE


23

Figura 1.28

n figura 1.29 se prezint codul HTML inserat n Adobe Dreamweaver CS6

Figura 1.29


COMENTARII

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

24

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 , , , , , i atributul align gsii n referina HTML a editorului OREILLY (figura 1.30), via Help, Reference, Book, OReilly Reference, Tag.

Figura 1.30


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 , , 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

25

EDHTML

7

Inserarea caracterelor speciale

ENUN

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

Figura 1.31

26

REZOLVARE


Figura 1.32

Pentru inserarea caracterului special de Copyright utilizai sau (figura 1.33 a) i b)).

Figura 1.33

a)

27

b)


COMENTARII

sau insereaz simbolul la poziia curent a cursorului.

n navigator, simbolul apare explicit. Utilizai pentru caracterul , codul , caracterul @,

codul @

MESAJ PENTRU CITITOR

Inserai ntr-o pagin Web textul: [email protected] Inserai ntr-o pagin Web textul: Servicii hoteliere & Cazare Comentariu personal

28

EDHTML

8

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


29

Figura 1.35

n figura 1.36 se prezint documentul surs HTML care pune n valoare tag-urile folosite.

Figura 1.36


30

COMENTARII

Pentru a bara un text, utilizai tag-urile sau . Pentru a sublinia un text, utilizai tag-ul , dar se

recomand mult pruden ntruct se pot crea confuzii cu textul subliniat folosit ca link.

Mai multe detalii despre tag-urile HTML si gsii n referina HTML a editorului OREILLY (figura 1.37 a, b), via Help, Reference, Book, OReilly Reference, Tag.

Figura 1.37

a)

b)


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

Afiai pagina web ntr-un browser

31

EDHTML

9

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


Figura 1.39

32

Creai pagina web valdor.html (figura 1.40). Figura 1.40

Creai o niu pagin web (EDHTML9.html) n care inserai tag-ul cu atributul href (figura 1.41).

Figura 1.41

33

Testai legtura (figura 1.42). Figura 1.42

COMENTARII

Pentru a realiza o legtur hipertext, utilizai tag-ul 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 gsii n referina HTML a editorului OREILLY (figura 1.43), via Help, Reference, Book, OReilly Reference, Tag.

Figura 1.43

34


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

Figura 1.44

Indicaie: Folosii tag-ul cu atributul src (

Comentariu personal

35

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

36

REZOLVARE


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

37

Creai ancorele cu ajutorul tag-ului 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 i a atributului href. (figura 1.47 liniile de cod 11,12, 13 i 14)

38

Figura 1.47

Introducei pentru fiecare serviciu comercial legturi ctre ancora START, cu ajutorul tag-ului Revers START (figura 1.48 linia de cod 18)

Figura 1.48


COMENTARII

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

39

culoare diferit fa de legturile hipertext clasice. Mai multe detalii despre tag-urile HTML i atributul

name gsii n referina HTML a editorului OREILLY (figura 1.49), via Help, Reference, Book, OReilly Reference, Tag.

Figura 1.49


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

ancore.

Comentariu personal

40

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


41

Figura 1.51

Inserai n codul HTML al paginii tag-ul cu atributul href="http://www.valdor.ro" (figura1.52 linia de cod 9)

Figura 1.52


COMENTARII

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

Mai multe detalii despre tag-urile HTML i atributul href gsii n referina HTML a editorului OREILLY (figura 1.51), via Help, Reference, Book, OReilly Reference, Tag.

42

Figura 1.51


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

43

EDHTML

12

Legturi hipertext externe

Crearea legturilor hipertext ctre o adres de e-mail

ENUN

Creai o legtur ctre o adres de e-mail ([email protected]). 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.

44

Figura 1.54

Inserai n codul HTML al paginii tag-ul cu atributul href="mailto:[email protected]" (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.

45


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

46

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.

Figura 1.57

47


Figura 1.58

Pentru crearea tabelului utilizai tag-urile:, , .

Pentru a atribui un titlu tabelului utilizai tag-ul 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

48

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!

49

Utilizai stilurile CSS. Mai multe detalii despre tag-urile HTML , ,

i 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)

50


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

51

EDHTML

14

Inserarea i formatarea unei imagini

ENUN

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

Figura 1.62

52

REZOLVARE


Figura 1.63

Introducei n tagul 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 Figura 1.64

53

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.

mut textul de dup ntreruperea de linie dincolo de imagine pn cnd ambele margini sunt libere.


Figura 1.65

54


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 tag-urile: src, usemap=#zona1

Introducei n tagul numele pe care l-ai atribuit zonei reactive (zona1)

Introducei n tagul 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

55

EDHTML

15

Crearea unui formular

ENUN

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

Figura 1.66

56

REZOLVARE


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)

57

b)

d)


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

58

EDHTML

16

Crearea i aplicarea stilurilot CSS

ENUN

Creai o legtur ctre o adres de e-mail ([email protected]). Utilizai textul de legtur E-mail-ul meu (figura 1.53)

Figura 1.53

REZOLVARE


Figura 1.54

Inserai n codul HTML al paginii tag-ul cu atributul href="mailto:[email protected]" (figura1.55 linia de cod 9)

Figura 1.55

Testai legtura realizat

59

COMENTARII

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


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

63

Partea a II - a

Exerciii didactice Dreamweaver

partea 1.pdf

Documents