View
78
Download
10
Category
Preview:
Citation preview
i
EXERCIII
DE CREARE
A PAGINILOR WEB
ii
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
2
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
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 i atributul align=center pentru
primul paragraf, respectiv align=right pentru cel de-al doilea paragraf (figura 1.8)
Figura 1.8
9
Afiai pagina web ntr-un browser.
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
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.
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
Deschidei Adobe Dreamweaver i afiai modul code (figura 1.12).
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
Afiai pagina web ntr-un browser.
COMENTARII
Tag-ul foreaz trecerea la o nou linie n cadrul
13
paragrafului curent, dar nu ncepe un nou paragraf.
Mai multe detalii despre tag-ul HTML 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
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
Deschidei Adobe Dreamweaver i afiai modul code (figura 1.17).
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
Afiai pagina web ntr-un browser.
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)
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
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
Deschidei Adobe Dreamweaver i afiai modul code (figura 1.22).
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
Afiai pagina web ntr-un browser.
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
MESAJE PENTRU CITITOR
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
Deschidei Adobe Dreamweaver i afiai modul code (figura 1.28).
23
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.
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
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 , , 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
Deschidei Adobe Dreamweaver i afiai modul code (figura 1.32).
Figura 1.32
Pentru inserarea caracterului special de Copyright utilizai sau (figura 1.33 a) i b)).
Figura 1.33
a)
27
b)
Afiai pagina web ntr-un browser.
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: office@valdor.ro 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
Deschidei Adobe Dreamweaver i afiai modul code (figura 1.35).
29
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.
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)
MESAJE PENTRU CITITOR
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
Deschidei Adobe Dreamweaver i afiai modul code (figura 1.38).
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
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 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
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
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
Afiai pagina web ntr-un browser.
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
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
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
Deschidei Adobe Dreamweaver i afiai modul code (figura 1.51).
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
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 i atributul href gsii n referina HTML a editorului OREILLY (figura 1.51), via Help, Reference, Book, OReilly Reference, Tag.
42
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
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 (ldumitracu@upg-ploiesti.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.
44
Figura 1.54
Inserai n codul HTML al paginii tag-ul 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.
45
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
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
Deschidei Adobe Dreamweaver i afiai modul code (figura 1.58.
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
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
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
Deschidei Adobe Dreamweaver i afiai modul code (figura 1.63.
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.
Mai multe detalii despre tag-ul HTML gsii n referina HTML a editorului OREILLY (figura 1.65), via Help, Reference, Book, OReilly Reference, Tag.
Figura 1.65
54
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 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
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)
57
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
58
EDHTML
16
Crearea i aplicarea stilurilot CSS
ENUN
Creai o legtur ctre o adres de e-mail (ldumitracu@upg-ploiesti.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 cu atributul href="mailto:ldumitrascu@upg-ploiesti.ro" (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.
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
60
61
62
63
Partea a II - a
Exerciii didactice Dreamweaver
Recommended