Liceul Teoretic „Emil Racoviță” , Galați 2 CUPRINS 1. INTRODUCERE ………………………….. …………………………….. [609719]
1 UNIVERSITATEA din BUCUREȘTI
FACULTATEA de MATEMATICĂ -INFORMATICĂ
PAGINI WEB DINAMICE
Coordonator științific:
Conf. univ. dr. POPESCU MARIUS
Autor:
CIOC CRISTINA (căs. OPREA)
Liceul Teoretic „Emil Racoviță” , Galați
2 CUPRINS
1. INTRODUCERE ………………………….. ………………………….. ………………………….. …………. 4
1.1. Justificarea temei alese ………………………….. ………………………….. ………………………… 4
1.2. World Wide Web ………………………….. ………………………….. ………………………….. ……4
2. LIMBAJUL HTML ………………………….. ………………………….. ………………………….. ……… 5
2.1. HTML st andard – limbaj descriptiv al unei pagini WEB ………………………….. ………… 5
2.2. Sintaxa limbajului HTML ………………………….. ………………………….. ……………………. 7
2.3. Elemente de bază pentru construirea unei pagini HTML ………………………….. ………… 7
2.4. Definiție structurală ………………………….. ………………………….. ………………………….. ..8
2.5. Divizori de text, comentarii, citate ………………………….. ………………………….. ……….. 11
2.6. Format de prezentare ………………………….. ………………………….. ………………………… 16
2.7. Liste în HTML ………………………….. ………………………….. ………………………….. …….. 21
2.7.1. Liste nenumerotate ………………………….. ………………………….. ……………………… 21
2.7.2. Liste ordonate ………………………….. ………………………….. ………………………….. … 22
2.7.3. Liste de definiții ………………………….. ………………………….. ………………………….. 23
2.7.4. Imbricarea listelor ………………………….. ………………………….. ………………………. 24
2.8. Grafică și link -uri ………………………….. ………………………….. ………………………….. … 25
2.8.1. Imagini ………………………….. ………………………….. ………………………….. …………. 25
2.8.2. Link -uri (legături/referințe) ………………………….. ………………………….. ………….. 27
2.8.2.1. Legătura între pagini ………………………….. ………………………….. ……………… 28
2.8.2.2. Legătura către un site ………………………….. ………………………….. …………….. 29
2.8.2.3. Utilizarea poștei electronice ………………………….. ………………………….. …….. 29
2.8.2.4. Legături către alte tipuri de fișiere ………………………….. ………………………… 30
2.8.2.5. Legături către secțiuni din interiorul aceluiași document (ancore) ……………. 30
2.9. Tabele în HTML ………………………….. ………………………….. ………………………….. ….. 31
2.10. Di vizarea în cadre (Frame -uri) ………………………….. ………………………….. ………….. 35
2.11.Introducerea sunetelor și a deplasărilor textului ………………………….. …………………. 41
2.11.1. Mișcarea textului ………………………….. ………………………….. ………………………. 41
2.11.2. Introducerea sunetelor ………………………….. ………………………….. ……………….. 42
2.12. Formulare în HTML ………………………….. ………………………….. ……………………….. 44
2.12.1. Câmpuri de intrare și butoane ………………………….. ………………………….. ……… 45
2.12.1.1. Câmpuri de intrare simple și butoane ………………………….. …………………… 45
2.12.1.2. Câmpuri de intrare multilinii ………………………….. ………………………….. …. 47
2.12.2. Liste de selecție ………………………….. ………………………….. …………………………. 47
2.13.Stiluri ………………………….. ………………………….. ………………………….. ……………….. 51
3 3. JAVASCRIPT ………………………….. ………………………….. ………………………….. ……………. 53
3.1. Introducere în JavaScript ………………………….. ………………………….. …………………… 53
3.2. Inserarea scripturilor ………………………….. ………………………….. ………………………… 54
3.3. Instrucțiuni și comentarii ………………………….. ………………………….. …………………… 55
3.4. Variabile și funcții ………………………….. ………………………….. ………………………….. … 56
3.5. Operatorii ………………………….. ………………………….. ………………………….. ………….. 58
3.6. Instrucțiuni ………………………….. ………………………….. ………………………….. …………. 62
3.6.1. Instrucțiuni condiționale ………………………….. ………………………….. ………………. 62
3.6.2. Instrucțiuni repetitive (de ciclare) ………………………….. ………………………….. …… 65
3.6.3. Instrucțiuni complementare ………………………….. ………………………….. ………….. 68
3.7. Ferestre Alert, Prompt si Confirm ………………………….. ………………………….. ……….. 70
3.8. Obiectele interne ………………………….. ………………………….. ………………………….. ….. 73
3.8.1. Obiectul String ………………………….. ………………………….. ………………………….. . 74
3.8.2. Obiectul Array (tablou sau matrice) ………………………….. ………………………….. .. 80
3.8.3. Obiectul Date ………………………….. ………………………….. ………………………….. …. 83
3.8.4. Obiectul Math ………………………….. ………………………….. ………………………….. .. 85
3.8.5. O biecte de tip Global ………………………….. ………………………….. …………………… 86
3.9. Evenimentele JavaScript ………………………….. ………………………….. ……………………. 88
3.10. Obiectul Navigator ………………………….. ………………………….. ………………………….. 90
3.11. Validarea formularelor ………………………….. ………………………….. ……………………. 91
3.12. Animații ………………………….. ………………………….. ………………………….. …………… 94
3.13. Imagini mapate ………………………….. ………………………….. ………………………….. ….. 96
4. METODICĂ – OPȚIONAL PAGINI WEB DINAMICE ………………………….. ………… 98
4.1. Pograma disciplinei opționale Pagini web dinamice ………………………….. ………………. 98
4.2. Model de planificare pentru disciplina opțională Pagini web dinamice ………………… 105
Bibliografie ………………………….. ………………………….. ………………………….. ………………….. 108
4 1. INTRODUCERE
1.1. Justificarea temei alese
Deși a început ca un experiment militar, în mai puțin de un deceniu, chiar înainte de
mileniul trei, rețeaua globală de rețele de calculatoare (cunoscută și sub numele Internet) a
ajuns să fie prezentă în toate domeniile de activitate, în toate zonele geografice, în rândul
diverselor catgorii sociale și profesionale.
Începând cu anii ’95, Internetul, sub aspectul său cel mai popular, și anume al
paginilor web, a cunoscut o amploare greu de imaginat.
Dacă la început, paginile web aveau un conținut simplu și oarecum stângace, în
zilele noastre aspectul acestora s -a schimbat radical. După doar 10 ani, în paralel cu
evoluția tehnicii de calcul, au evoluat și tehnicile de programare a acestora. Primele pagini
permiteau doar navigarea prin conținutul lor, pe când în zilele noastre ele au o utilizare
foarte largă, de la jocuri și aplicații grafice dinamice la comerț pe Internet.
Paginile Web se clasifică în funcție de natura conținutului în pagini statice ș i pagini
dinamice. Principalele caracteristici ale paginile Web statice sunt:
– conțin doar elemente HTML;
– codul sursă vizualizat în navigator este identic cu cel al fișierului stocat pe disc;
– nu oferă interactivitate.
Paginile Web dinamice se caracterizează prin urmă toarele:
– conținutul lor este creat dinamic și poate diferi la accesări diferite; de exemplu , la
același URL , conținutul paginii poate varia în funcție de anumiți parametri cum ar fi
locaț ia geografică a utilizatorului, ora, paginile vizitate anterior, profilul utilizatorului;
– oferă interactivitate;
– posibilități de interacțiune.
Lucrarea de față își propune în primul rând să fie o unealtă didactică, un manual
școlar care să îi poată ajuta pe elevi în procesul de învățare, conținând și câteva detalii mai
tehnice, cum ar fi aplicarea noțiunilor de algoritmică învățate , respectiv noțiuni despre
limbajul C++ .
1.2. World Wide Web
Serviciul World -Wide Web (W3 sau simpul Web) s -a născut în martie 1989 la
inițiațiva lui Tim Berners -Lee care l -a propus ca sistem de comunicare de informații pentru
5 comunitatea fizicienilor de la CERN (The European Organizat ion for Nuclear
Research)
Definiția ofici ală pentru World -Wide Web este : Wide -area hypermedia
information retrieval initiative aiming to give universal access to a large universe of
documents .
Sistemul este bazat pe extinderea tehnicii hypertext (hypertext)la nivel de rețele. Un
document hypertext este un fișier normal de text care are însa particularitatea următoare :
conține legături la alte pă rți ale documentului sau la alte documente.
Descrierea unui document Web se face prin HyperText Ma rkup Language
(HTML). Conținutul său îl constituie textul documentului împreună cu diverse comenzi de
formatare.
Sistemul WWW u tilizează modelul client/server :
● un server WWW – este un program care ruleaz ă în permanență pe un calcu lator și are
sarcina de tratată cererile sosiste de la componenta client a sistemului care rulează pe
alt calculator ;
● un client WWW (Explorer, Netscape, Mosaic) – este un program care permite
utilzatorului transmisia de cereri către un server WWW și vizualizarea rezultatului .
Protocolul utilizat pentru comunicare între client și server se numește HTTP (HyperText
Transmission Protocol)
Important : Nu există o sesiune permanentă între client și server
2. LIMBAJUL HTML
2.1. HTML standard – limbaj descriptiv al unei pagini WEB
În prezent site-ul web este un “must”. Indiferent de domeniul de activitate, un site
web reprezintă o identitate vizuală în mediul online. Un site web poate fi creat cu ajutorul
limbajului HTML (HyperText Markup Language). Acest limbaj este cel mai simplu, s e
încarcă repede în orice browser web, este indexat foart e bine de motoarele de căutare.
Pentru a crea un site c u ajutorul HTML sunt necesare: un editor de text pentru a scrie codul
HTML, un browser w eb pentru a putea testa HTML -ul, cunoștinte de bază HTML . În cazul
editorului de text pentru scrierea codul HTML , ne putem alege Notepad++ , phpDesigner 7
sau Sublime Text. Scopul unui browser web (Mozilla Firefox, Google Chrome) este de a
6 citi documentele de tip HTML. Un browser nu va afișa niciodată tag -uri, ci doar
interpretarea lor.
Crearea u nui document WWW stă la îndemâna oricui, indiferent dacă are sau nu
noțiuni de administrare a unui server WWW. În prezent, tendința este ca, așa cum o adresa
de e-mail este un lucru obișnuit pentru utilizatorii de Internet, home -page -urile, documente
HTML care oferă informații despre persoane, institutii, diverse grupuri e tc să fie exploatate
pe scară câ t mai largă.
HTML nu este, de fapt, un limbaj de programare. Specificațiile lui definesc un set
de “tag” -uri (comenzi) si regulile de scriere ale acestora . Cu ajutorul limbajului HTML
formatăm un document pentru a putea fi accesat prin Internet realizând următoarele:
documente independente de platforma (sistemul de operare)
legături la alte documente de pe Internet
introducerea de imagini, sunet și video
interactivitate între cititorul documentului și document
Documentele WWW su nt de fapt texte ASCII care conț in diferite elemente ale
acestui limba j de formatare (HTML). De regulă, documentele HTML au extensia .html , dar
si .htm. Documentele HTML pot fi create manual folosind un editor de texte ASCII (de
exemplu “Notepad” din Windows), poate fi convertit din alte formate folosind diverse
editoare HTML sau pot fi create dinamic de un server WWW sau de un script.
Un document HTML lucrează extrem de simplu. El “spune” programului de
navigare prin Internet pe care -l folosim (browser), prin intermediul “tag” -urilor, ce să facă
cu textul, imaginile, sunetul, sau celelalte elemente cuprinse în document.
Limbajul HTML este utilizat pentru a descrie structura docum entului și referințele
conținute de acesta.
Învățarea limbajului HTML are trei mari avantaje:
este foarte simplă și nu necesită mult timp
oferă controlul absolut asupra realizării paginii web
oferă posibilitatea folosirii în ca drul paginilor realizate secven țe de cod HTML
”împrumutate” de la alte pagini web.
7 2.2. Sintaxa limbajului HTML
HTML nu ține cont de forma originală a textului. Nu contează cum arată textul
când este scris, ci cum va arăta pe ecran în fața unui privitor. Nu conteaza tab -urile,
spațiile mu ltiple, nu se ține cont de sfârș itul de linie etc. Pentru realizarea aspectului
obținut de regulă cu ajutorul acestor caractere se folosesc tag -uri.
Toate instrucțiunile sau tag -urile sunt scrise între paranteze unghiulare: <nume -tag>. Ele
trans mit comenzi către browser pentru a afișa pagina într -un anumit mod.
Aceste tag -uri sunt de două feluri: de început <nume -tag> și de sfârșit </nume –
tag> și au efect asupra obiectului descris între ele (paragraf de text, imagine, etc).
O etichetă/instrucțiun e/tag poate fi scrisă atât cu litere mici, cât și cu litere mari. ea
acționează asupra textului până la închiderea ei </>.
După numele tag -ului de început mai pot fi scrise și o serie de atribute, astfel:
<numetag [lista atribute]>obiectul afectat de tag </numetag>
unde
lista atribute= nume atribut=”valoare atribut” [nume atribut=”valoare atribut” …]
Dacă într -un tag există mai multe atribute, acestea trebuie separate prin spațiu.
Obs. Parantezele pătrate […] semnifică faptul că obiectul încadrat între ele poate
lipsi. Uneori valorile atributelor pot fi date și fără ghilimele “ ” .
Atributele pot fi definite ca niște proprietăți ale tag -urilor. Ele se adaugă numai în tag -ul de
început. Dacă un tag nu are niciun atribut, atunci browser -ul va lua în considerare valorile
implicite ale tag -ului respective.
2.3. Elemente de bază pentru construirea unei pagini HTML
Pentru primul document de cod hypertext se vor folosi doar câteva etichete (tags)
de bază. Pentru descrierea documentului este nevoie de un editor de te xt simplu (xterm,
NotePad etc). Fișierul trebuie salvat cu extensia *.html (*.htm) pentru a fi recunoscut ș i
vizualizat de browser.
Întreaga dezvoltare a limbajului HTML s -a facut în ideea creșterii cal ității fără
sacrificarea simplității. Fiecare document H TML este structurat în două părț i: antetul –
“head” și conținutul – “body”. St ructura unui document HTML arată astfel:
8 <html>
<head>
…antetul documentului…
</head>
<body>
…corpul documentului…
</body >
</html>
Exemplu:
Codul HTML:
2.4. Definiție structurală
TAG -ul <HTML>
Sintaxa:
<HTML> documentul html </HTML>
Marchează î nceputul , respectiv sfârșitul unui document HTML sau XHTML . Acest tag
poate include tag -urile <HEAD> ș i <BODY>.
TAG -ul <HEAD>
Sintaxa:
<HEAD> antetul documentului </HEAD>
Include antetul (header -ul) document ului HTML. Acest tag p oate include tag -urile
9 <TITLE> ș i <META>.
TAG -ul <TITLE>
Sintaxa:
<TITLE> titlul documentului </TITLE>
Cuprinde titlul documentului.
TAG -ul <META>
Sintaxa:
<META NAME=”nume” CONTENT=”continut”>
Cuprinde informația suplimentară despre acest document. De exemplu, acest tag poate
conține cuvintele cheie pentru acest document, deosebit de importante pentru facilizarea
accesibilităț ii acestuia pe Internet. Mai poate conț ine numele autorului documentului,
descrierea documentului HTML etc.
Atributele:
NAME – specifică numele informaț iei suplimentare
CONTENT – definește conținutul informaț iei suplimentare
Exemplu:
<META name=” Facultatea de matematică -informatică ” content=” În 1991 -1992, Secția
Știința Calculatoarelor (Facultatea de matematică ) a devenit Facultatea de Știința
Calculatoarelor . Această facultate a avut la început două secții : Știința Calculatoarelor
(învățământ de lungă durată ) și Colegiul de Tehnologia Informației (învățământ de scurtă
durată ). Din 1994, Colegiul de Birotică , înființat anterior (ca secțiune a altei facultăți) , a
fost intergrat ca secție a Facultății de Ștința Calculatoarelor” ><META name="keywords"
content=" Educație , Facultate , Știința Calculatoarelor, Secția ">
Se poate observ a că acest tag nu are corespondent un tag de închidere </META>, el fiind
închis normal prin paranteză unghiulară .
TAG -ul <BODY>
Sintaxa:
10 <BODY [BACKGROUND=”imagine -fundal”] [BGCOLOR=culoare -fundal]
[TEXT=culoare -text] [LINK=culoare -link] [ALINK=culoare -alink] [VLINK=culoare –
vlink] >
continutul documentului
</BODY>
Defineș te atributele “corpului” documentului.
Atributele:
BACKGROUND – defineș te o imagine utilizat ă ca fundal;
Ex: BACKGROUND=”f undal .jpg”
Imaginea “f undal.jpg” utilizată ca fundal;
BGCOLOR – definește culoarea fundal ului documentului
Ex: BGCOLOR=#FF0000
fundalul paginii va fi de culoare roș ie (culoare scrisă î n hexa);
BGCOLOR=Yellow
fundal ul paginii va fi de culoare galben ă (culoa re scrisă î n clar);
Culori în hexa:
#BF0000 rosu inchis
#FF0000 rosu
#BFBF00 galben inchis
#FFFF00 galben
#00BF00 verde inchis
#00FF00 verde
#00BFBF albastru mediu
#00FFFF albastru deschis #0000BF albastru inchis
#0000FF albastru
#BF00BF magenta inchis
#FF00FF magenta
#808080 gri inchis
#C0C0C0 gri
#000000 negru
#FFFFFF alb
TEXT – indic ă culoarea textului normal
Ex: TEXT=#FF0000
textul pe pagină va fi de culoare ro șie (culoare scris ă în hexa);
TEXT=Yellow
textul pe pagină va fi de culoare galben ă (culoare scrisă î n clar);
LINK – indică culoarea textului corespunză tor unei hyperlegă turi nevizitate
Ex: LINK=#FF0000
textul corespunză tor unei hyperlegă turi nevizitate va fi de culoare roșie (culoare scrisă î n
11 hexa);
LINK=Yellow
textul de hyperleg ătură nevizitată va fi de culoare galben ă (culoare scrisă î n clar);
ALINK – indică culoarea textului corespunzător unei hyperlegături active (î n curs de
procesare)
Ex: ALINK=#FF0000
textul corespunză tor unei hyperlegă turi active va fi de culoare ro șie (culoare scrisă în
hexa);
ALINK=Yellow
textul de hyperlegătura activă va fi de culoare galben ă (culoare scrisă în clar);
VLINK – indică culoarea textului corespunzăt or unei hyperlegă turi vizitate
Ex: VLINK=#FF0000
textul corespunză tor unei hyperlegă turi vizitate va fi de culoare ro șie (culoare scris ă în
hexa);
VLINK=Yellow
textul corespunzător unei hyperlegă turi vizitate va fi de culoare galben ă (culoare scrisă î n
clar);
Exemplu:
<body bgcolor=#ffffff text=#000000 link=blue alink=red vlink=#C0C0C0>
Acest tag va defini fundalul paginii de culoare albă , scrisul pe pagina d e culoare neagră,
textul de legă tură albastru, textul de leg ătură activă roșu și textul pentru l egătura vizitată de
culoare gri.
Exemplu:
Codul HTML:
2.5. Divizori de text, comentarii, citate
TAG -ul <P>
12 Sintaxa:
<P [ALIGN=left|center|right]> text [</P> ]
În general, textele conținute de o pagină se pot găsi în mai multe paragrafe. Un
paragraf se introduce între tag -urile <P>text</P>.
La afișare, două paragrafe consecutive vor fi separate printr -o linie goală.
Tag-ul </P> poate lipsi; un nou paragraf poate fi detectat prin tag -ul <P>.
În cadrul unui fișier HTML, Enter -ul nu are nici un efect. D e asemenea, dacă două cuvinte
ale unui paragraf sunt separate prin mai multe spații sau alte caractere albe (enter -uri, tab –
uri), browser -ul afișează doar un singur spațiu.
Atributele:
ALIGN – definește alinierea paragrafului
ALIGN=center
Paragraf aliniat pe centru;
ALIGN=left
Paragraf aliniat la stânga;
ALIGN=right
Paragraf aliniat la dreapta.
TAG -ul <BR>
Sintaxa:
<BR>
Acest tag (“Brake”) forțează terminarea rândului. Când navigatorul (browser -ul) întâlnește
acest tag, afișează textul care urmează începând de la marginea din stânga, indiferent unde
anume este această margine.
TAG -ul <NOBR>
Sintaxa:
<NOBR> text </NOBR >
Specifică un text în care nu sunt permise ruperile de rând.
TAG -ul <HR>
Sintaxa:
13 <HR [WIDTH=latime] [SIZE=grosime] [ALIGN=left|center|right ] [COLOR=culoare]>
Tag-ul <HR> are ca efect crearea unei linii orizontale pe pagină. Liniile orizontale pot fi
utilizate pentru separarea diferitelor secțiuni ale unei pagini Web sau pentru punerea î n
evidenț a a unor por țiuni de document cum ar fi liste, meniur i, informaț ii de contact.
Atributele:
WIDTH – indică lăț imea liniei orizontale î n pixeli.
Ex: WIDTH=630
SIZE – definește înălțimea liniei orizontale î n pixeli.
Ex: SIZE=5
ALIGN – defineș te alinierea liniei orizontale
ALIGN=left
Alinierea la stâ nga a liniei orizontale;
ALIGN=center
Alinierea pe centru a liniei orizontale;
ALIGN=right
Alinierea la dreapta a liniei orizontale;
COLOR – defineș te culoarea liniei orizontale.
Ex: COLOR=red
Exemplu:
14 Codul HTML:
TAG -ul <DIV>
Sintaxa:
<DIV [ALIGN=left|center|right] > text </DIV>
Permite divizarea textului, cu sau f ără aliniere.
TAG -ul <!>
Sintaxa:
<! text -comentariu>
Permite inserarea de adnotari î n documente HTML. Comentari ile sunt ignorate de
navigator și se pot extinde pe mai multe râ nduri.
TAG -ul <BLOCKQUOTE>
Sintaxa:
<BLOCKQUOTE> textul citatului <BLOCKQUOTE>
Definește un citat. Punerea în evidență a citatelor se face de regulă prin indentare diferită
față de restul textului din documentul HTML.
15 TAG -ul <CITE>
Sintaxa:
<CITE> textul citatului <CITE>
Definește un citat. Punerea în evidență a citatelor se face fără indentare diferită față de
restul textului din documentul HTML.
Exemplu:
Codul HTML:
16 2.6. Format de prezentare
TAG -urile <Hn>
Sintaxa:
<Hn [ALIGN=left|center|right] > antetul de nivel n </Hn> n=1…6
Antetele (headings) sunt utilizate pent ru a ierarhiza diferite secțiuni de text , diferite titluri .
HTML definește ș ase nivele pentru antete. în funcție de numărul de după H mărimea
fontului diferă (<H1> utilizează fontul de dimensiune maximă, <H6> fontul de dimensiune
minimă) , iar textul care apare între tag -uri este scris îngroșat (bold).
Exemplu:
Codul HTML:
TAG -ul <CENTER>
Sintaxa:
<CENTER> text </CENTER>
Definește centrarea unei porț iuni de docume nt (text, tabele, imagini), față de dimensiunile
curente ale ferestrei.
TAG -ul <FONT>
Sintaxa:
<FONT [COLOR=culoare] [FACE=font] SIZE=dimesiune> text </FONT>
Defin este aspectul textului cuprins între tag -urile de început ș i de s fârșit.
Atributele:
COLOR – specifică culoarea textului
17 Ex: COLOR=#FF0000
textul va fi de culoare roșie (culoare scrisă î n hexa)
COLOR=Yellow
textul va fi de culoare galben ă (culoare scrisă î n clar)
FACE – defineș te tipul de caractere
Ex: FACE=Arial
tipul de caracter folosit (font);
Obs. Cele mai des întalnite fonturi pentru document ele HTML s unt Arial, Times New
Roman, Verdana, Helvetica, Courier, etc.
SIZE – defineș te dimensiunea textului
Ex: SIZE=2
Obs. Dimensiunile variaz ă între 1 si 7 si pot fi prefixate cu + sau -, caz în car e specifică
distanț a dint re dimensiunea fontului curent și fontul de bază .
EXEMPLU:
<font face=Arial size=2 color=red>
Textul va fi afisat pe monitor de dimensiunea 10 puncte cu caractere Arial de culoare rosie.
</font>
TAG -ul <BASEFONT>
Sintaxa:
<BASEFONT SIZE=dimensiune> text </BASEFONT>
Permite schimbarea dimensiunii fontului de baza.
Atributele:
SIZE – defineș te dimensiunea fontului de baz ă
Obs. Dimensiunile fonturilor de bază variază între 1 ș i 7, dar nu pot fi prefixate cu + sau –
TAG -ul <B>
Sintaxa:
<B> text </B>
Define ște stilul de text î ngroș at (bold). Un tag sinonim al lui <B> este:
<STRONG> text </STRONG>
TAG -ul <I>
Sintaxa:
18 <I> text </I>
Defineș te stilul de text î nclinat (italic). Tag-uri sinonime ale lui <I> sunt:
<EM>text< /EM> , <DFN>text</DFN> , <CITE>text</CITE> .
TAG -ul <U>
Sintaxa:
<U> text </U>
Defineș te text subliniat (underline).
Tag-ul <FONT> poate include printre alte tag -uri si tag -urile <B>, <I> si <U>.
Exemplu:
Codul HTML:
TAG -ul <INS>
Sintaxa:
<INS> text </INS>
Are rolul de a afișa subliniat textul cuprins între cele două tag -uri ale sale. Este un tag
sinonim al lui <U>.
TAG -ul <S>
Sintaxa:
<S> text </S>
19 Are rolul de a afișa tăiat (cu o linie orizontală) textul cuprins între cele două tag-uri ale
sale. Un tag sinonim al lui <S> este: <DEL> text</DEL>
TAG -ul <BIG>
Sintaxa:
<BIG> text </BIG>
Are rolul de a afișa textul cuprins între cele două tag-uri ale sale mai mare decât textul în
care este cuprins.
TAG -ul <SMALL >
Sintaxa:
<SMALL> text </SMALL>
Are rolul de a afișa textul cuprins între cele două tag-uri ale sale mai mic decât textul în
care este cuprins.
TAG -ul <SUP>
Sintaxa:
<SUP>text</SUP>
Are rolul de a afișa textul cuprins între cele două tag-uri ale sale mai sus (ca o putere) .
TAG -ul <SUB>
Sintaxa:
<SUB> text </SUB>
Are rolul de a afișa textul cuprins între cele două tag-uri ale sale mai sus (ca un indice) .
TAG -ul <TT>
Sintaxa:
<TT> text </TT>
Are rolul de a afișa textul cuprins între cele două tag -uri ale sale mai sus monospațiat (toate
caracterele ocupă aceeași lungime – practic, se folosește fontul Courier New).
Exemplu: Codul HTML:
20
TAG -ul <PRE>
Sintaxa:
<PRE> text </PRE>
Definește un text preformatat. Majoritatea documentelor HTML conțin text formatat cu
tag-uri. Asta înseamnă că textul respectiv este afectat de restricțiile HTML, adică toate
spațiile suplimentare, taburi etc să fie ignorate de către navigator. Afișarea textelor, exact
ața cum sunt ele se poate face cu ajutorul tag -ului <PRE> care permi te chiar afișarea unei
grafici rudimentare obținute cu caractere ASCII.
Exemplu:
Codul HTML:
21 2.7. Liste în HTML
Listele permit ca anumite enunțuri (texte, elemente) să fie numerotate sau marcate
într-un anumit fel.
2.7.1. Liste nenumerotate
Sunt liste în care elementele nu sunt numerotate, ci în dreptul fiecăruia este afișat
un marcator.
TAG -ul <UL>
Sintaxa:
<UL [TYPE=disk|circle|square] >
<LI [TYPE=disk|circle|square]> element -lista < /LI>
[ <LI [TYPE=disk|circle|square]> element -lista < /LI>
<LI [TYPE=disk|circle|square]> element -lista < /LI>
……………………………….. ]
</UL>
Tag-ul <UL > definește o listă nenumerotat ă.
Atributul TYPE permite inserarea de buline de tip disc, cerc sau pă trat-umplut în fa ța
elementelor liste i cu excepț ia celor care au atributul TYPE în linia de definiț ie a
elementului ( tag-ul <LI>). Valoarea implicită este disk. Daca atr ibutul TYPE lipsește,
bulina inserată în față va fi un disk.
TAG -ul <LI> definește un element de listă nenumerotată.
Atributul TYPE are aceeaș i semnificaț ie ca la tag -ul <UL> , însă afecteaz ă doar elementul
listei definit de tag -ul <LI> curent.
Exemplu:
Codul HTML:
22
2.7.2. Liste ordonate
Sunt liste în care elementele sunt numerotate.
TAG -ul <O L>
Sintaxa:
<OL [TYPE=A|a|1|I START=numar]>
<LI> element -lista </LI>
[ <LI> element -lista </LI>
<LI> element -lista </LI>
……………………………….. ]
</OL>
Definește o listă numerotată .
Atributele:
TYPE – permite generarea de tipuri diverse de liste numerotate
TYPE=A – elementele vor fi notate cu litere majuscule (A,B,C,…)
TYPE=a – elementele vor fi notate cu litere mici (a,b,c,…)
TYPE=1 – elementele vor fi numerotate cu cifre arabe (1,2,3,…)
TYPE=I – elementele vor fi numerotate cu cifre romane (I,II,III,…)
START – definește valoarea de start (literă sau numă r)
Tag-ul <LI> definește un element de lista ordonată .
23 Exemplu:
Codul HTML:
2.7.3. Liste de definiții
Au rolul de a descrie o listă de definiții.
Inserarea lor în cadrul documentului HTML se face prin tag -urile <DL>…</DL> .
TAG-ul <DL>
Sintaxa:
<DL atribute >
<DT> antet 1</LI>
[ <DD>subantet 11 </LI>
<DD> subantet 12 </LI>
………………………]
[ <DT> antet 2 </LI>
24 <DD>subantet 21 </LI>
<DD>subantet 22 </LI>
……………………………]
</DL>
Elementele listelor de definiție sunt de două tipuri:
Termenul care este definit (antetul) – introdus de tag-ul <DT> …</DT> (tag-ul de sfârșit
nefiind obligatoriu) ;
Definiția propriu -zisă (subantetul) – introdusă de tag -ul <DD>…</DD> (tag-ul de sfârșit
nefiind obligatoriu) .
Exemplu:
Codul HTML:
2.7.4. Imbricarea listelor
Pentru o eficiență mai bună se po t combina elementele de marcaj ș i numerotare ,
listele pot con ține în interiorul lor alte liste .
25 Exemplu:
Codul HTML:
2.8. Grafică și l ink-uri
2.8.1. Imagini
Imaginile sunt stocate în fișiere cu diverse formate. Formatele acceptate de
browserele pentru imagini sunt:
GIF (Graphics Interchange Format) cu extensia .gif;
JPEG (Joint Photografic Experts Group) cu extensia .jpg;
PNG (Portable Network Graphics) cu extensia .png;
BMP (BitMap) cu extensia .bmp (numai cu Internet Explorer);
XPM (X PixMap) cu extensia .xmp ;
TIFF (Tagged Image File Format) cu extensia .tif.
TAG -ul <IMG>
Sintaxa:
<IMG src=”URL -imagine” [lowsrc=”URL -imagine -simpla”] [alt=”text -alternativ”]
[width=latime -imagine] [height=inaltime -imagine] [border=grosime -chenar]>
Tag-ul inserează o imagine (format GIF sau JPG). Acest tag nu este un tag pereche (nu are
26 corespondent un tag de închidere </IMG>).
Atributele:
SRC – specifică calea către imagine, respectiv fișierul care conține imaginea (URL -ul
imaginii);
Ex: SRC=”imagine_color.gif”
LOWSRC – specifică calea și fișierul care conține o imagine care va fi încărcată înainte de
a se încărca imaginea specificată in atributul SRC. Aceasta este de regula aceeasi imagine,
dar de o rezoluție mai slabă sau chiar aceeași i magine, dar în tonuri de gri sau numai în alb –
negru;
Ex: LOWSRC=”imagine_simpla.gif”
ALT – textul care va fi afișat de navigatoarele care nu lucrează în modul grafic;
Ex: ALT=”Facultatea de Informatica”
WIDTH – definește lățimea imaginii în pixeli. Daca imaginea este de altă latime, ea va fi
scalată să încapă în spațiul rezervat;
Ex: WIDTH=200
HEIGHT – definește înălțimea imaginii în pixeli. Dacă imaginea este de altă înălțime, ea
va fi scalată sa încapă în spațiul rezervat;
Ex: HEIGHT=50
BORDER – specif ică dimensiunea în pixeli a unui chenar în jurul imaginii;
Ex: BORDER=2
Exemplu:
Codul HTML:
27
2.8.2. Link -uri (legături/referințe)
O caracteristică importantă a HTML -ului o reprezintă abilitatea lui de legare a unei
porțiuni de text de alte documente, de a purta cu el referințe. Acest lucru este realizat cu
hyperlink -uri. Browserul afișeaza textele care fac legături sau referințe cu alte culori și/sau
subliniate pentru a evidenția faptul ca sunt legături hypertext.
Link -urile reprezintă mecanismul prin care:
un vizitator al paginii, prin executarea unui click, să poată accesa rapido altă pagină, și,
dacă acesta dorește, să poată reveni în pagina inițială prin apăsarea butonului Back al
browser -ului de Internet;
un vizitator al paginii să primească un anumit fișier, de orice tip, care se găsește pe site –
ul respectiv (download);
un vizitator al paginii să poată asculta un mesaj sonor sau chiar să poată viziona un film;
un vizitator al paginii, printr -un click, să poata vizualiza pagina (incl usiv cea curentă)
doar dintr -un anumit loc, fără a folosi barele de derulare;
un vizitator al paginii, prin accesarea unui click, să poată trimite un e -mail
administratorului paginii.
Fiecare referință (hyperlink) într -un document HTML este definită de dou ă componente:
elementul de activare, de tip text sau de tip grafic, prin intermediul căruia (cu ajutorul
mouse -ului sau a tastaturii) se activează legătura;
elementul URL care descrie adresa documentului adresat și eventual a punctului de
intrare în document (ancora), dupa ce hyperlink -ul este activat.
Există posibilitatea de a realiza o legătură între un anumit punct al unui document si un alt
anumit punct al aceluiași sau al altui document. Acest lucru se realizează prin crearea unei
ancore în locul din document unde dorim sa ne conducă legătura și apoi în realizarea unei
legături care va indica atât documentul referit, cât și paragraful (sau secțiunea de
document) la care facem referire.
TAG -ul <A>
28 Sintaxa:
<A [atribute] > text /imagine activare hiperlegatura </A>
Tag-ul ancoră marcheaz ă textului activ (sau imaginea activă ) în documentul HTML inițial
(de la care pornește legătura).
Cele mai întâlnite atribute sunt:
HREF – precizează calea de legătură
TARGET – indică unde se deschide documentul către care se face legătura; poate avea
valorile:
_blank: deschide noua pagina într -o fereastră nouă ;
_self: deschide noua pagină în aceeași fereastră cu legătura ;
_parent: deschide noua pagină într -un cadru superior l ink-ului;
_top: deschide noua pagina în toată fereastra navigatorului, anulând toate cadrele .
2.8.2.1. Legătura între pagini
<A HREF=”URL”> text </A>
URL – numele paginii HTML c ătre care se face legătura
Exemplu :
Codul HTML:
29
2.8.2.2. Legătura către un site
<A HREF=”URL”> text </A>
URL – adresa site -ului c ătre care se face legătura
Exemplu:
Codul HTML:
2.8.2. 3. Utilizarea poștei electronice
<A HREF=”mailto:adresa_email”> text </A>
Exemplu:
Codul HTML:
30 2.8.2.4. Legături către alte tipuri de fișiere
<A HREF=”numefisier”> text </A>
numefisier – reprezinta denumirea (inclusiv extensia) unui fișier audio, video,
arhivă etc.
2.8.2.5. Legături către secțiuni din interiorul aceluiași document
(ancore)
Dacă o pagină este foarte lungă, pentru a evita folosirea barelor de derulare, se
folosesc ancorele.
1. Se specifică numele secțiunii (ancorei)
<A NAME=”sirdecaractere”></A>
NAME = sirdecaractere, asociază un nume ancorei curente, astfel încât să poată constitui
ținta unui alt link. Numele trebuie să fie unic în cadrul documentului.
2. Se specifică codul linkului
<A NAME=”#sirdecaractere”> text </A>
Exemplu:
Codul HTML:
În mod analog se pot face și linkuri cu nume declarate în alte fișiere.
Pagina din care se face legătura:
31 Exemplu:
Codul HTML:
Pagina cătr e care se face legătura, la secț iunea Partea 3 :
Exemplu:
Codul HTML:
2.9. Tabele în HTML
Tabelele reprezintă o modalitat e de aranjare a textului, imaginilor ș i altor elemente
care compun documentul HTML.
32 TAG -ul <TABLE>
Sintaxa:
<TABLE [ BORDER =grosime -chenar] [ CELLSPACING =spatiu –celule]
[CELLPADDING =spatiu continut —>margine -celula] [ WIDTH =latime -tabel]>
tabelul
</TABLE>
Orice tabel se definește cu tag-ul pereche <TABLE> </TABLE>, iar conținutul tabelului
său care poate avea un număr oarecare de rânduri și un numă r oarecare de coloane.
Atributele:
BORDER – defineș te chenarul tabelului, exprimat î n pixeli
Ex: BORDER=3
CELLSPACING – specifică spaț iul dintr e celulele tabelului, exprimat î n pixeli;
Ex: CELLSPACING =3
CELLPADDING –specifică spațiul dintre marginile celulelor și continutul lor, exprimat
în pixeli;
Ex: CELLPADDING=2
WIDTH – specifică lățimea tabelului pe pagină, în pixeli sau în procente față de l ățimea
totală a ecranului monitorului, exprimată î n pixeli.
Ex: WIDTH=500 sau WIDTH=75%
Orice tabelel HTML e specificat rând cu rând. Fiecare rând conține definiț ii pentru
fiecare celulă . Pentru a defini un tabel : se definește primul rând din partea de sus, celulă cu
celulă , apoi se definește al doilea rând, celulă cu celulă etc. Coloanele su nt calculate
automat conform numa rului de celule care formează râ ndurile.
TAG -ul <TR>
Sintaxa:
<TR> continut -linie </TR>
<TR> – “Table Row” defineș te o linie din ta bel.
TAG -ul <TH>
Sintaxa:
<TH> antet </TH>
<TH> – ”Table Head” specific ă o celulă de tip antet .
33 TAG -ul <TD>
Sintaxa:
<TD> antet </TD >
<TD> – ”Table Data” defineș te o celul ă normal ă din tabel.
Atributele:
ALIGN – specifică alinierea orizontală
ALIGN=left
Este util izat pentru alinierea orizontală la stâ nga;
ALIGN=center
Este util izat pentru alinierea orizontală pe centru;
ALIGN=right
Este util izat pentru alinierea orizontală la dreapta;
VALIGN – specifică alinierea vertica lă
VALIGN=top
Este uti lizat pentru alinierea verticală î n partea de sus a celulei;
VALIGN=middle
Este uti lizat pentru alinierea verticală î n partea de mijloc a celulei;
VALIGN=bottom
Este uti lizat pentru alinierea verticală î n partea de jos a celulei.
Exemplu:
Codul HTML:
Pentru a obține tabele complex organiz ate, celulele pot fi extinse atâ t orizontal (pe
mai multe coloane), c ât și vertical (pe mai multe râ nduri) cu ajutorul atributelor
COLSPAN , respectiv ROWSPAN utilizate î n tag -ul <TD>.
COLSPAN crează o celulă care se extinde pes te câteva coloane.
34 ROWSPAN crează o celulă care se extinde peste câteva rânduri.
Valorile atributelor reprezintă numărul de coloane, respectiv râ nduri peste care se
dorește a fi extinsă celula.
Exemplu:
Codul HTML:
Exemplu:
Codul HTML:
35 Tabelele pot fi incluse unul î n altul prin inserare a tag -ului <TABLE> în inte riorul unei
intrări <TD> .
Exemplu:
Codul HTML:
2.10. Divizarea în cadre (Frame -uri)
Cadrele sau frame -urile( frames ) împart fereastra activă a navigatorului (browser –
ului) în mai multe ferestre mai mici .
Lucrul cu frame -uri permite realizarea unor documente HTML mai sofisticate, care
pot facilita navigarea prin spaț iul WWW. Folosirea cadr elor permite navigarea simultană
prin mai multe docu mente HTML în cadrul a celuiasi browser. Acest lucru s -ar putea face
și fără frame -uri, deschizând succesiv mai multe ferestre a le unui browser.
Într-un documet HTML cu frame -uri, tag-urile <BODY> si </BODY> sunt
înlocuite de <F RAMESET> ș i </FRAMESET>. Aceste t ag-uri definesc documentul de
mai sus ca un document de tip frame. La vizualizarea unui astfel de documen t cu un
browser care nu recunoaș te stilul frame, va apărea o fereastra complet albă .
În momentul încărcării unui docu ment de tip frame, navigatorul întâ i împarte
fereastra în frame -uri și apoi documentele specificate în <FRAME> vor fi încarcate și
36 afișate î n interiorul cadrelor.
TAG -ul <FRAMESET>
Sintaxa:
<FRAMESET COLS=”lista -dimensiuni -1” ROWS=”lista -dimensiuni -2”
[BOR DER =”grosime -chenar”] [ BORDERCOLOR =”culoare”] >…</FRAMESET >
Acest tag înlocuiește t ag-urile <BODY> si </BODY> și realizeaz ă declaraț ia împă rțiri in
frame -uri a ferestrei browser -ului. El conține o declaraț ie de cadre orizontale sau o
declaraț ie de cadre verticale.
Atributele:
ROWS =”dim1,d im2,…,*” reprezintă în câ te cadre va fi împărțită fereastra navigatorului
pe direcția orizontală . dim1,dim2 este dimensiunea î n pixeli a cadre lor, * este diferența
dintre dimensiunea totală a ecranului de monitor și suma celorlalte cadre.
COLS =”dim1,dim2,…,*” reprezintă în câte cadre va fi împărțită fereastra navigatorului pe
direcția orizontală.
BORDER specifică dimensiunea în pixeli a chenarului din jurul tuturor cadrelor .
BORDERCOLOR stabilește culoarea chenarului tuturor cadrelor .
EXEMPLU:
<FRAMESET ROWS=”35 ,20%,*,*”>
atunci documentul va fi împ ărțit în linii astfel :
1. există patru linii (râ nduri);
2. toate liniile au aceeasi lă țime, respectiv lăț imea ferestrei active a navigatorului;
3. rândul de sus are înalțimea egală cu 35 de pixeli;
4. al doilea rând este 20% din înălț imea total ă a ferestrei active ;
5. restul de înaltime este împărtit între rândurile 3 și 4, î n mod egal.
TAG -ul <FRAME>
Sintaxa:
<FRAME SRC=”U RL-document” [NAME=”nume”] NORESIZE
SCROLLING= ”yes|no|auto ” [BORDERCOLOR =”culoare ”]>
Acest tag indică browser -ului ce să pună î n cadrele definite cu tag -ul <FRAMESET>.
Trebuie s a existe un singur tag <FRAME> ș i numai unul singur pentru fie care cadru
specificat î n lista de coloane si de linii. Tag-ul <FRAME> neînsoțit de atribute generează
împarțirea ecranului fără introducerea vreunui conținut.
37 Atributele:
SRC – Definește calea către documentul care va fi afișat de navigator î n cadrul respectiv;
NAME – Determ ină numele cadrului respectiv. Folosirea numelor p entru frame -uri face ca
orice pagină web să se încarce în interiorul acelui cadru precizand atributul target =”nume
cadru” pentru tagul <A HREF> ;
NORESIZE – Indică faptul ca frame -ul nu poate fi redimensionat;
SCROLLING – specifică existenț a sau nu a barelo r de rulare
SCROLLING=yes
Barele de rulare ( scroll -bars) exista la nivelul unui frame;
SCROLLING=no
Barele de rulare ( scroll -bars) nu exista la nivelul unui frame;
SCROLLING=auto
Barele de rulare ( scroll -bars) la nivelul unui frame vor fi afișate numai dacă
documentul nu poate fi afișat în întregime î n interiorul cadrului;
BORDERCOLOR stabilește culoarea chenarului frame -ului.
Exemplu:
Codul HTML:
Cadrele imbricate se obțin prin includerea unui bloc <FRAMESET> în cadrul altui bloc
38 <FRAMESET>.
Exemplu:
Codul HTML:
Definirea unei subferestre în interiorul unei pagini web se face prin intermediul cadrelor
interne , utilizând tag -ul <IFRAME> :
TAG -ul <IFRAME>
Sintaxa:
<IFRAME SRC=”U RL-document” [NAME=”nume”] [NORESIZE
39 SCROLLING=yes|no|auto ] [WIDTH =latime -cadru] [ HEIGHT =inaltime -cadru]
[BORDER =grosime -chenar] [BORDERCOLOR =culoare] ></IFRAME>
Introducerea tag -ului se face in interiorul corpului <BODY>…</BODY>
Atributele:
SRC – Definește calea către documentul care va fi afișat de navigator în cadrul respectiv;
NAME – Determină numele cadrului respectiv. Folosirea numelor pentru frame -uri face ca
orice pagină web să se încarce în interiorul acelui cadru preciz ând atributul target =”nume
cadru” pentru tagul <A HRE F>;
NORESIZE – Indică faptul ca frame -ul nu poate fi redimensionat;
SCROLLING – specifică existența sau nu a barelor de rulare
SCROLLING=yes
Barele de rulare ( scroll -bars) exista la nivelul unui frame;
SCROLLING=no
Barele de rulare ( scroll -bars) nu exista la nivelul unui frame;
SCROLLING=auto
Barele de rulare ( scroll -bars) la nivelul unui frame vor fi afișate numai dacă
documentul nu poate fi afișat în întregime în interiorul cadrului;
WIDTH – definește lățimea cadrului în pixeli;
HEIGHT – definește înălți mea cadrului în pixeli;
BORDER – specifică dimensiunea în pixeli a chenarului cadrului;
BORDERCOLOR stabilește culoarea chenarului frame -ului.
Exemplu:
Codul HTML:
40 Legături în frame -uri
Într-un document HTML normal, când este selectată o legătura (link) navigatorul
înlocuiește documentul curent cu un nou document. Î n cazul documentelor tip frame, când
un link î ntr-un frame este selectat, browserul poate modifica fra me-ul conținând acea
legatură , un alt f rame, un grup de frame -uri sau î ntreaga fereastra. Acest lucru poate fi
specificat cu ajutorul unui nou atribut TAR GET al tag -ului <HREF>. Pentru fiecare
legătura, se poate specifica atât document ul care să se î ncarce, cât și unde să fie afișat
(încă rcat) acel document.
EXEMPLU:
<A HREF=”URL_do cument” TARGET=”nume_tinta”>Hyperlink Text</A>
unde “nume_tinta” poate fi un nume de frame sau un nume implicit.
Exemplu:
41 Codul HTML :
Codul 024legaturi1.html :
Codul 024legaturi2.html :
Se construiește pagina. Când se accesează link -urile, paginile respective se vor afișa în
cadrul numit ”cadrumobil” (de aceea s -a folosit în interiorul link -ului atributul target ).
2.11. Introducerea sunetelor și a deplasărilor textului
2.11.1. Mișcarea textului
TAG -ul <MARQUEE>
42 Sintaxa:
<MARQUEE [DIRECTION=” right|up| down ”] [BEHAVIOR =” scroll| slide|
alternate ”] [ SCROLLDELAY =”valoare -viteza” ] [SCROLLAMOUNT =”numar –
pixeli” ] [LOOP =”valoare”] [WIDTH=latime -caseta-miscare ] [HEIGHT=inaltime –
caseta-miscare ] [BGCOLOR= ”culoare ”]> text </MARQUEE>
Tag-ul permite deplasarea textului de la dreapta la stânga.
Atributele :
DIRECTION – direcția de mișcare a textului, valoarea implicită este “left”;
BEHAVIOR – tipul de scroll aplicat ce poate avea valorile:
– scroll – valoarea implicită, conținutul se mișcă de la o margine la alta și apoi reapare;
– slide – când se atinge marginea opusă, mișcarea se oprește;
– alternate – conținutul se mișcă alternativ între cele 2 margini și este întotdeauna vizibil;
Ex: <MARQUEE BEHAVIOR= ”alternate ”> textul animat </MARQUEE>
SCROLLDELAY – permite stabili rea vitezei de derulare a animației, cu cât valoarea este
mai mare – tranziția este mai lentă ( scrolldelay=”1” deplasarea are viteza foarte mare;
scrolldelay=”1000” viteza este foarte mică );
SCROLLAMOUNT – reprezintă numărul de pixeli cu care se mută textul la fiecare pas –
o valoare mai mare implică o viteză mărită de mișcare; valoarea implicită este “6”;
LOOP – numărul de parcurgeri ale textului , valoarea implicită fiind “infinite”. Atributul
behavior trebuie să specifice ca la ultimul ciclu animația să se oprească atunci când atinge
marginea respectivă;
Ex: <MARQUEE Loop=3 BEHAVIOR=Slide>Adrese Web utile</MARQUEE>
WIDTH, HEIGHT – stabilesc dimensiunile casetei în care se produce an imarea textului.
Aceste dimensiuni pot fi stabilite în pixeli sau în procente din dimensiunile ferestrei de
afișare a browser -ului;
BGCOLOR – permite specificarea culorii casetei în care se produce animarea textului.
Ex: <MARQUEE WIDTH=60% BGC OLOR=red SCROOLDELAY=200>Adrese Web
utile</MARQUEE>
2.11.2. Introducerea sunetelor
Sunetele utilizate în pagini web pot avea e xtensiile: . mp3, .mid, .midi, .wav, .au,
.ra.
TAG -ul <EMBED>
43 Sintaxa:
<EMBED SRC=”numesunet” [ AUTOSTART =” true| false ”] [VOLUME =”valoare ”]
[LOOP =”valoare”] ></EMBED>
Permite introducerea în pagină a unui sunet.
Atributele:
SRC – Definește calea către fișierul sunet care va fi accesat de navigator în cadrul
respectiv;
AUTOSTART – Stabilește dacă sunetul va începe sau nu după încărcarea paginii web.
Poate avea valoare true sau false ;
LOOP – Stabilește numărul de repetiții ale sunetului ( loop=”infinite” rulează sunetul la
nesfârșit;
VOLUME – Permite reglarea volumului sonor, poate lua valori între 0 și 100.
Introducerea unui sunet folosind link -uri:
<A HREF=”numefisier”> text </A>
Exemplu:
Codul HTML :
44
2.12. Formulare în HTML
Formularele sunt folosite în scopul obținerii informației de la vizitatorii site -ului.
Un formular este o secțiune a unui document Web în care utilizatorul poate
introduce informații. Acestea sunt trimise către serverul Web unde pot fi înregistrate într -o
bază de date pentru utilizări ulterioare sau pentru controlul informațiilor returnate
utilizatorulu i.
Formularele HTML pot realiza: introducerea de text sau alegerea dintr -o paletă de
opțiuni, colectarea mai multor elemente de informa ție împreună, restrângerea ră spunsurilor
utilizatorului la un set de valori bine definite, structurarea informați ei furn izate de utili zator
pentru procesarea automată, implementarea GUI (Graphical User I nterfaces) pentru
aplicatii de reț ea sau pentru navigarea pe site-uri Web.
Formular ul este alcătuit din:
– câmpuri de text;
– meniuri ce se pot derula;
– butoane radio;
– casete de validare.
TAG -ul <FORM>
Sintaxa:
<FORM ACTION=”URL” METHOD=get|post>
continut formular
</FORM>
45 Tag-ul defineș te un formular:
Atributele:
ACTION – precizează script -ul care va fi declanșat după validarea cererii;
METHOD – precizează modul în care datele vor fi transmise script -ului destinatar;
METHOD = get – informațiile su nt transmise ca parametri ai script -ului destinatar
Metoda get creeaza o variabilă de mediu Query -String în care su nt memorate
datele, variabil ă care poate fi examinat ă de script -ul server.
Inconvenien t: dacă informaț iile sun t voluminoase se pot pierde porț iuni din acestea
METHOD = post – informaț iile sunt transmise că tre intrarea stan dard (stdin). Pentru a
le recepț iona, script -ul server trebuie să aibă acces la fluxul datelor de intrare
standard.
2.12.1. Câmpuri de intrare ș i butoane
Câmpurile de intrare sunt variabile (zone) care pot recepționa informaț ii de tip text
introduse de că tre utili zatorul formularului. Fiecare câ mp are asociat ă o fereastră pe
ecranul formularului.
Butoanele sunt obie cte care permit setarea unor opțiuni ce urmează a fi transmise
script -ului server sau lansarea unor operaț ii speciale – transmisia datelor formularului
(butonul de validare) sau reiniț ilizarea datelor cu valorile lor implicite (butonul reset) .
2.12.1.1. Câmpuri de intrare simple ș i butoane
Câmpurile de intrare simple se caracterizează prin aceea că în fereastra asociată
câmpul ui respectiv nu pot fi introduse mai multe linii de text.
TAG -ul <INPUT>
Sintaxa:
<INPUT TYPE=”tip ” [NAME=”nume”] [SIZE=lungime -camp] [VALUE=valoare]
[CHECKED] [MAXLENGTH] >
Atributele :
TYPE – defineș te tip ul datelor ce pot fi introduse în zona (câ mpul) de intrare sau tipul de
buton
Valori:
TYPE=”text” – desemnează un câmp în fereastra căruia se va int roduce un ș ir normal
46 de caractere;
TYPE=”password” – caracterele introduse sunt afișate prin * -uri (formează o parolă );
TYPE=”hidden” – caracterele introd use nu su nt vizualizate;
TYPE=”checkox” – desemnează o casetă ()de maracar e (). Daca formularul
conține mai multe casete “checkbox”, pot fi marcate la un moment dat mai
multe astfel de butoane;
TYPE=”radio” – desemnează un buton ( ) ce poate fi activat (apasat) ( ). Dacă
formularul conț ine mai multe butoane “radio” , doar unul va fi activ la un
moment dat;
TYPE=”submit” – desemnează un buton de validare;
TYPE=”reset” – desemnează un buton care permite reiniț ializarea tuturor var iabilelor
(atribute), definite î n zona formularelor cu valorile lor implicite;
NAME – permite atribuirea unui nume simbolic câ mpului de intrare. Acest nume nu
apare pe formular (afiș at), dar poate fi utilizat î n scri pt-ul server pentru
reperarea câ mpului de intrare sau a butonului. Atributul NAME nu poate fi
utilizat în combinaț ie cu tipul “su bmit” sau “reset” ;
VALUE – Pentru tipul “text”, “password” sau “hidden” defineș te o valoare implicita;
Pentru tipul “radio” permite desemnarea valorii care va fi afectat ă câ nd
butonul radio va fi activat;
Pentru tipul “checkbox” permite desemn area valorii care va fi afectată câ nd
boxa va fi marcata;
Pentru tipul “submit” sau “reset” permite denumirea butoanelor altfel decâ t
<submit> sau <reset>;
SIZE – permite indicarea lungimii câ mpului de intrare de tip “text”, “password” sau
“hidden”. Daca S IZE nu este prezent, valoarea implicita este 20 caractere. Size
nu limitează de fapt lungimea textului sau parolei , ci fereastra de vizualizare;
CHECKED – este utilizat î n combinatie cu butoane radio sau casete de marcare.
Semnifică faptul ca aceste butoan e sau boxe sunt implicit active respectiv
marcate.
MAXLENGTH – indică numă rul m axim de caractere ce pot fi conținute de un câ mp de
tip “text” sau “password”. Valoarea implicit ă este nelimitată .
47 2.12.1.2. Câ mpuri de intrare multilinii
Câmpurile de intrare multilinii se caracterizeaz ă prin aceea că în fereastra asociată
cu câ mpul respectiv pot fi introduse mai multe linii de text. Tastarea <ENTER> marchează
sfârșitul unei linii de text.
TAG -ul <TEXTAREA>
Sintaxa:
<TEXTAREA [NAME=”nume”] ROWS=nr.linii COLS=nr.coloane
[WRAP=”off|hard|soft] >
Atributele :
NAME – permite atribuirea unui nume simbolic câ mpului de intrare. Acest nume nu
apare afișat pe formular , dar poate fi utilizat în scri pt-ul server pentru reperarea câ mpului
de intrare.
ROWS – definește numă rul de linii ale ferestrei asociate câmpului (dimensiunea pe
verticală )
COLS – defineș te numă rul de c oloane ale ferestrei asociate câ mpului (dimensiunea pe
orizontală )
WRAP – stabile ște trecerea cuvintelor pe rândul următor, determinând comportamentul
câmpului la sfârșitul liniei;
Valori:
WRAP=”off” – întrerupe cuvintele la marginea dreaptă numai când dorește utilizatorul;
WRAP=”hard” – determină întreruperea cuvintelor la marginea dreaptă, caracterul de
sfârșit de linie este inclus în te xtul transmis serverului odată cu formularul;
WRAP=”soft” – determină întreruperea cuvintelor la marginea dreaptă, nu este inclus
caracterul de sfârșit de linie în textul trasnmis serverului odată cu formularul.
2.12.2. Liste de selecț ie
Permit operarea u nei selecții între mai multe opț iuni.
TAG -ul <SELECT>
Sintaxa:
<SELECT NAME=”nume” [SIZE=valoare] [MULTIPLE]>
48 <OPTION VALUE=”text -pentru -server” [SELECTED]> optiune
<OPTION VALUE=”text -pentru -server” [SELECTED]> optiune
[ <OPTION VALUE=”text -pentru -server” [SELECTED]> optiune
……………………………… ]
</SELECT>
Tag-ul <SELECT> define ște o list ă de opț iuni.
Atributele :
NAME – este obligatoriu, asignează un nume listei;
SIZE – indică numarul opț iunilor vizibile în fereastra asociată listei de opț iuni
Valori:
SIZE=1 – lista are forma unui meniu grafic
SIZE=n>1 – opțiunile listei apar î ntr-o fereastra cu scroll vertical
MULTIPLE – permite selec ționarea mai multor opț iuni
TAG -ul <OPTION> defineș te o op țiune.
Atributele :
VALUE – asignează un nume listei;
SELECTED – permite selectarea prestabilită a unui element din listă.
Exemplu l 1:
Codul HTML:
49
Exemplu l 2:
Codul HTML:
50
Exemplu l 3:
Codul HTML:
51
2.13. Stiluri
Stilurile se folosesc în scopul simplificării muncii și a economisirii timpului de
lucru. Un stil odată definit va putea fi aplicat automat de mai multe ori și paginile vor putea
fi modificate cu ușurință.
Prin stil se înțelege formatarea unui bloc de text (font, culoare, aliniere etc.)
Definirea unui stil s e rea lizeaz ă cu tag -ul <STYLE>. Acesta trebuie inclus în
interiorul blocului <HEAD> … </HEAD>.
Tagul <STYLE>
Sintaxa
<STYLE> { atribut1; atribut2; atribut3, … } </STYLE>
Atribute :
– font-size: mărime font;
– font-style : normal/italic;
– font-weight : normal/bold;
– font-family : familie font (”Arial”, ”Times New Roman”, ”Courier New” …);
– color : nume culoare ;
52
– text-indent : mărime indentare;
– text-align : tip aliniere ( left, right, center );
– background -color : nume culoare fundal ;
– background -image : url (adresa URL imagine de fundal) ;
– border -top-width : lățime margine sus ;
– border -bottom -width : lățime margine jos;
– border -left-width : lățime margine stânga ;
– border -right -width : lățime margine dreapta ;
– margin -top: mărime margine sus;
– margin -bottom : mărime margine jos;
– margin -left: mărime margine stânga ;
– margin -right : mărime margine dreapta .
Exemplu:
Codul HTML:
53
Definirea un ui stil are ca avantaj ca se poate folosi oriunde este necesar.
Sintaxa:
#numeclasa {atribut1; atribut2; atribut3, … }
Apelarea stilului nou -creat se realizează în interiroul corpului paginii folosind:
<numetag id=numeclasa>
Exemplu:
Codul HTML:
3. JAVASCRIPT
3.1. Introducere în JavaScript
Dacă HTML asigur ă formatul și designul informaț iei dintr -o pagina web,
JavaScript a fost proiectat pentru a ad ăuga interactivitate paginilor . El este un limbaj de
programare simplificat, înglobat, în general, direct în paginile HTML.
Cu ajutorul lui pot fi construite animații. În acest fel, paginile web devin mai
intuitive și, totodată mai in teractive. JavaScript și Java sunt dou ă limbaje complet diferite.
Sintaxa limbajului JavaScript este parțial inspirată din cea a lui Java, dar cel din urmă este
un limbaj mult mai puternic și mai complex, din aceea și categorie cu C sau C++.
54 JavaScript est e preferat de realizatorii de pagini web deoarece este un limbaj ușor
de învățat. Sunt suficiente câteva linii de cod pentru ca paginile să devină mult mai
interactive.
Limbajul JavaScript poate realiza în paginile web :
animații personalizate;
calcule ma tematice;
afișarea unor mesaje interactive;
validarea conținutului unui formular;
crearea unor butoane animate;
afișarea unor informații referitoare la pagina Web;
executarea funcțiilor clasice ale unui limbaj de programare.
De asemena, datorită limbajului JavaScript , paginile Web pot fi personalizate și modificate
dinamic .
3.2. Inserarea scripturilor
Scripturile JS sunt inserate cu ajutorul tag -ul <SCRIPT>.
TAG -ul <SCRIPT>
Sintaxa:
<SCRIPT TYPE="text/javascript" SRC="…….js"></SCRIPT>
Scripturile pot fi inserate:
– în secțiunea <HEAD >…</HEAD>, situație în care sunt încărcate înainte de a fi utilizate
și executate doar în momentul apelării;
– în secțiunea <BODY >…</BODY>, situație în care executate la încărcarea paginii;
55 – într-un fișier extern cu extensia ”.js”. Acest fișier va putea fi apelat în mai multe pagini
HTML
• fișierul "cod.js" va conține :
3.3. Instrucțiuni și comentarii
Sintaxa limbajului JavaScript este parțial inspirată din cea a limbajului Java.
Așadar, ca și Java, JavaScript este o succesiune de declarații, instrucțiuni și comenzi pe
care le execută browser ul. Spre deosebire de HTML, JavaScript este casesensitive. O
instrucțiune JavaScript este o comandă către browser ș i are rolul de a spune browserului ce
trebuie s ă facă. Toate declara țiile se termină cu caracter ul "punct si virgula" (;) . Spațiile
libere sunt ignorate. Ghilimelele simple (' '), respectiv cele duble (" ") delimitează șirurile
de caractere (string). Instrucțiunile pot fi grupate în blocuri de instrucțiuni, delimitate
printre acolade ({ }).
Comentariile JavaScript sunt folosite pentru a explica codul sau a -l face mai u șor
de citit. Pot fi scrise pe o singur ă linie încep ând cu // sau pot fi comentarii multi -linie care
încep cu /* și se încheie cu */ .
Exemplu:
Codul HTML:
56
3.4. Variabile și funcții
O variabilă JavaScript este creată prin atribuirea unei valori sau a unei expresii .
Numele variabilei poate fi format din unul sau mai multe caractere (a..z, A..Z, 0 -9, _) .
Poate să înceap ă cu o liter ă sau cu liniu ța de subliniere (underscore) și este case -sensitive.
Când este creată o variabilă, valoarea atribui tă determină tipul variabilei .
Exemplu:
<script>
x=17;
//x este o variabilă de tip numeric
mesaj=”Succes !”;
//mesaj este o variabilă de tip șir de caractere
</script>
Observație: O variabilă își poate schimb a tipul, în mod dinamic, în cadrul aceluiași script .
Exemplu:
<script>
y=”avansat ”;
y=12 ;
</script>
Exemplu:
Codul HTML:
57 Declararea unei variabile
Sintaxa:
var nume_variabila;
Cuvântul cheie var poate fi omis în JavaScript. Variabila va fi în mod automat declarată în
momentul în care i se atribuie o valoare.
Variabile le pot fi:
globale – sunt definite în exteriorul oricărei funcții JavaScript (funcțiile sunt
întotdeauna globale); pot fi utilizate în orice funcție din pagina;
locale – sunt defin ite în interiorul unei funcții; sunt recunoscute numai în interiorul
funcțiilor în cad rul cărora sunt declarate; cuvântul cheie var are rolul de a evita
confuzia între o variabilă locală și o variabilă globală cu același nume .
Funcți ile JavaScript sunt executat e când are loc un eveniment sau când sunt
apelat e. În situația în care se dorește ca browserul să nu execute un script atunci câ nd
pagina se încarcă , scriptul poate fi scris într-o funcție. O funcție poate fi apelată din orice
punct al paginii, dar și din alte pagini, dacă a fost scrisă într-un fișier JS extern.
Funcțiile JS pot fi scrise atât în secțiunea <head> , cât și în secțiunea <body> a
documentului. Este recomandat însă ca funcția să fie scrisă în secțiunea <head> , pentru a
fi încărcată în browser înainte de a fi apelată .
Definirea unei funcții
Sintaxa :
function nume_functie ([var1, var2, …])
{
codul functiei
}
var1 , var2 , … sunt variabile sau valori transmise funcției.
Observație : Prezența parantezelor rotunde de după numele funcției este obligatorie,
inclusiv în cazul în care funcția nu are parametri .
Parantezele sunt folosite pentru a transfera valori funcției. Aceste valori se numesc
argumente . Un argument este una sau mai multe variabile.
58 Exemplu:
Codul HTML:
Orice funcție care returnează o valoare folosește instrucțiunea return .
Exemplu:
Codul HTML:
3.5. Operatorii
Ideea care stă la baza realizării unui script este introducerea, evaluarea, manipularea
sau afișarea datelor. Instrumentele necesare acestor operații se fac prin intermediul
operatorilor.
Operatorii aritmetici efectuează operații aritmetice cu variabile și/sau valori.
59 Sunt: + (adunare ), – (scădere ), * (înmulțire ), / (împărțire ), % modulo (restul împărț irii
întregi) , ++ (incrementare ), – (decrementare).
Exemplu:
Codul HTML:
Operatorii de atribuire au rolul de a atribui valori variabilelor JavaScript. Sunt:
=, +=, -=, *=, /=, %= .
Exemplu:
Codul HTML:
60
Operatorul de concatenare + este utilizat pentru variabilele de tip șir de caractere .
Daca se adună două șiruri de caractere, se va obține un șir de caracatere. Dacă se adună un
număr cu un șir de caractere, rezultatul va fi un șir de caractere.
Exemplu:
Codul HTML:
Operatorii de comparație au rolul de a verifica egalitatea sau diferența dintre
două variabile sau valori. Valorile pe care le returnează pot fi Fals sau Adevarat . Sunt: ==
(Egal), === Egal exact (valoare și tip) , != (Diferit ), > (Mai mare dec ât), < (Mai mic dec ât),
>= (Mai mare sau egal cu ), <= (Mai mic decât).
Exemplu: Codul HTML:
61
Operatorii logici au rolul de a determina relația logică dintre variabile sau valori.
Sunt: && (și), || (sau), ! (not) .
Exemplu:
Codul HTML:
62 Operatorul condiț ional atribuie o valoare unei variabile în funcție de o anumită
condiție.
Sintaxa:
variabila=(conditie)?valoare1:valoare2
Exemplu:
<script>
a=2;
(a>10)?alert(”adevarat”):alert(”false”);
</script>
3.6. Instrucțiuni
3.6.1. Instrucțiuni condiționale
Instrucțiunile condiționale(decizionale) realizează anumite acțiuni în funcție de
îndeplinirea unei condiții.
Instrucțiunea if
Sintaxa:
if (conditie )
{
cod JavaScript ;
}
– condiție este o expresie logică (are valoarea True sau False);
– cod JavaScript reprezintă un set de instrucțiuni ce se execută în cazul în care condiție are
valoarea ” True ”.
Exemplu:
Codul HTML:
63 Instrucțiunea if…else
Sintaxa:
if (conditie )
{
cod1 JavaScript
}
else {
cod2 JavaScript
}
– condiție este o expresie logică (are valoarea True sau False );
– cod1 JavaScript reprezintă un set de instrucțiuni ce se execută în cazul în care condiție
are valoarea ” True ”;
– cod2 JavaScript reprezintă un set de instrucțiuni ce se execută în cazul în care condiție
are valoarea ” False ”;
Exemplu:
Codul HTML:
Instrucțiunile if, respectiv if…else pot fi și imbricate ( pot fi urmate de una sau mai multe
instrucțiuni delimitate de acolade) .
Instrucțiunea switch
Sintaxa:
64 switch (variabila )
{case valoare1 :
cod1 JavaScript ;
break;
case valoare2:
cod2 JavaScript ;
break;
……………………
default:
cod JavaScript ;}
– se compară variabila cu valoare1 , valoare2 , …;
– dacă variabila este egală cu valoare1 , se execută cod1 JavaScript , daca variabila este
egal cu valoare2 , se execută cod2 JavaScript etc;
– cod JavaScript se execută dacă variabila e diferită de valoare1 , valoare2 etc;
– break execută trecerea la instrucțiunea următoare instrucțiunii switch și este obligatorie;
– default este opțională.
Exemplu:
Codul HTML:
65
3.6.2. Instrucțiuni repetitive (de ciclare)
Instrucțiunile de ciclare sunt folosite pentru a executa una sau mai multe
instrucțiuni în mod repetat, fără a fi necesar s ă se copieze de mai mult ori instrucțiunile
respective.
Instrucțiunea for
Sintaxa:
for (var= val_initiala ;var<= val_finala ;var=var +increment )
{
cod JavaScript ;
}
– expresia var= val_initiala reține de câte ori va fi executat cod JavaScript ;
– expresia var<= val_finala stabilește condiția în care se va opri execuția cod JavaScript ;
– expresia var=var +increment crește sau micșorează valoarea variabilei var de fiecare
dată când se execută cod JavaScript ;
– cod JavaScript conține setul de instrucțiuni ce sunt executate de browser odată cu
parcurgerea ciclului.
Exemplu:
Codul HTML:
66
Instrucțiunea for in
Sintaxa:
for (variabila in obiect )
{
cod JavaScript;
}
– variabila poate fi o variabil ă, un element de tablou sau o proprietate a unui obiect ;
– cod JavaScript conține setul de instrucțiuni ce sunt executate de browser odată cu
parcurgerea ciclului.
Ciclul for in este folosit atunci când nu se cunoaște numărul de repetări ale setului cod
JavaScript . Poate fi utilizat pentru a parcurge elementele unui tablou sau
a enumera propriet ățile unui obiect .
Exemplu:
Codul HTML:
67
Instrucțiunea while
Sintaxa:
while (expresie )
{
cod JavaScript;
}
– expresie reprezintă o condiție logică; dacă este adevărată browserul va executa cod
JavaScript ;
– cod JavaScript conține setul de instrucțiuni ce sunt executate de browser odată cu
parcurgerea ciclului.
Exemplu:
Codul HTML:
Instrucțiunea do… while
Sintaxa:
do
{
cod JavaScript;
} while (expresie );
– cod JavaScript conține setul de instrucțiuni ce sunt executate de browse r odată cu
parcurgerea ciclului;
68 – expresie reprezintă o condiție logică; dacă este adevărată browserul va executa cod
JavaScript .
Exemplu:
Codul HTML:
3.6.3 . Instrucțiuni complementare
Instrucț iunile complementare sunt folosite împreună cu instrucțiunile for, while
etc.
Instruc țiunea break întrerupe definitiv execuț ia unui ciclu.
Exemplu:
Codul HTML:
69 Instruc țiunea continue întrerupe execuț ia iterației curente, dar verifică din nou
condiția și, dacă este îndeplinită, continuă executarea ciclului pentru următoarele iterații.
Exemplu:
Codul HTML:
Instruc țiunea label (eticheta) permite ieșirea dintr -un ciclu cu instrucț iuni ciclice
imbricate, la o locaț ie specificat ă a scriptului.
Exemplu:
Codul HTML:
70
Instruc țiunea with se foloseș te pentru a evita referirea repetată a unui obiect, atunc i când i
se accesează metodele sau proprietăț ile.
Exemplu:
Codul HTML:
3.7. Ferestre Alert, Prompt si Confirm
JavaScript are trei tipuri de ferestre popup: Alert, Confirm și Prompt. Ele sunt
ferestre predefinite de dialog ce aparțin obiectului window .
Fereastra Alert
Caseta de alertă este utilizată atunci când este necesar a se atrage atenția asupra
unei anumite informații . În urma afișării caset ei de alertă , utilizatorul poate continua numai
acționând butonul " OK".
Sintaxa:
window.alert( ”mesaj ”);
– ”mesaj ” reprezintă textul care va fi afișat în fereastra Alert;
71 Exemplu:
Codul HTML:
Fereastra Prompt
Caseta prompt este utilizată atunci când se dorește ca utilizatorul să introducă un
mesaj, o valoare etc. înainte de a se încărca efectiv conținutul paginii web. Fereastra
conține butoanele OK și Cancel .
Sintaxa:
window. prompt (”mesaj ”, ”default ”);
– ”mesaj ” reprezintă textul care va fi afișat în fereastra, deasupra casetei input ;
– ”default ” reprezintă textul care va fi afișat în caseta input;
– La acționarea butonul ui OK, caseta returnează valoarea true, la acționarea butonul ui
Cancel , caseta returnează valoarea false .
Exemplu:
Codul HTML:
72
Fereastra Confirm
Fereastra prompt este utilizată atunci când se dorește confirmarea unui mesaj, o
rezultat etc. înainte de a se încărca efectiv conținutul paginii web. Fereastra conține
butoanele OK și Cancel .
Sintaxa:
window. confirm (”mesaj ”);
– ”mesaj ” reprezintă textul care va fi afișat în fereastra;
– La acționarea butonului OK, caseta returnează valoarea true, la acț ionarea butonul ui
Cancel , caseta returnează valoarea false .
Exemplu:
Click OK:
Click Cancel :
73 Codul HTML:
3.8. Obiectele interne
JavaScript nu este un program orientat pe obiecte (OO), cum sunt limbajele de
programare C++ sau Java, dar lucrează cu obiecte. În lumea reală folosim obiecte : case,
mașini, haine etc. Aceste obiecte au anumite proprietăți; de exemplu casele a u pereț i,
mașinile au roți, hainele sunt compuse din anumite materiale etc. În mod similar,
JavaScript lucrează cu obiectele , cum ar fi, de exemplu: un formular, o fereastră , butoane,
imagini. Toate elementele pe care le inserăm într -o pagină sunt interpretate de JavaScript
ca fiind obiecte. Asemeni obiectelor din lumea înconjurătoare, și obiectele JavaScript au
propri etăți: formularele au buton, ferestrele au titluri. Totodată, JavaScript folosește si
termenul ” metode ”.
Metodele sunt de fapt funcț iile pe care le îndeplin ește un obiect. De exemplu,
metoda ”open()” deschide ferestrele, metoda ” click() ” este pentru folosirea butoanelor etc .
Un obiect JavaS cript este o colecț ie de proprietăț i și funcț ii (metode ).
Sintaxa pentru folosirea obiectelor:
obiect.prorietate
obiect.metoda()
Obiectele din JavaScript sunt de trei tipuri :
– Obiecte pe partea de client
– Obiecte pe partea de server
– Obiecte esenț iale
74 Pentru începă tori, sunt folosite preponderent obiectele pe partea de client , respectiv
obiectele esenț iale (de exemplu: ”string ”, ”math ” sau cele provenind de la etichetele
HTML ).
Obiectele esențiale JavaScript sunt:
– Obiectul String
– Obiectul Array
– Obiectul Date
– Obiectul Math
– Obiecte de tip Global
3.8.1. Obiectul String
Obiectul String este folosit pentru a manipula secven țe de caractere (text). Șirurile
reprezintă o parte esențială a oricărui limbaj de programare. În JavaScript , un șir este un
obiect cu proprietăți și metode proprii.
Sintaxa:
var txt=new String(string);
sau
var txt =string;
Proprietatea obiectului String:
length – returnează lungimea șirului
Exemplu:
Codul HTML:
Metodele obiectului String
– pentru formatarea șirurilor de caractere :
75 big() – returnează un ș ir cu text mare;
blink() – returnează un șir care clipeș te;
bold() – returnează un șir cu litere îngroș ate;
fontcolor() – returnează un ș ir cu o culoare specificat ă;
fontsize() – returnează un șir cu litere de o anume m ărime;
italics() – returnează un șir î n italic (scris înclinat );
small() – returnează un ș ir cu caractere mai mici ;
strike() – returnează un șir tă iat cu o linie la mijloc ;
sub() – returnează un ș ir ca indice ;
sup() – returnează un ș ir ca putere .
Exemplu:
Codul HTML:
– pentru manipularea șirurilor de caractere :
anchor() – returnează un șir ca ș i ”anchor”;
charAt() – returnează un cara cter de la poziț ia care este specificat ă;
charCodeAt() – returnează codul ASCI I al unui caracter de la o poziție specificată ;
76 concat() – returnează două șiruri concatenate ;
fixed() – returnează un șir cu caractere tip ;
fromCharCode() – returnează valoarea Unicode a unui caracater ;
indexOf() – returnează pozitia primei apariț ii a unui subșir în ș ir, sau dacă subșirul nu e
găsit, valoarea -1;
lastIndexOf() – returnează poziț ia primei apari ții a unui subșir în ș ir, sau dacă acesta nu e
găsit, -1 (Precizare : se î ncepe din dreapta șirului spre stâ nga);
link() – returnează un șir ca hyperlink ;
match() – similar cu indexOf si lastIndexOf, dar aceast ă metod ă returnează șirul specificat
șir, sau "null", în locul unor valori numerice ;
replace() – înlocuie ște într-un șir unele caractere specifi cate cu altele noi specificate;
search() – returnează un număr întreg dacă șirul conț ine caracterele specificate, altfel
returnează -1;
slice() – returnează un șir î ncep ând de la poziția index specificată ;
split() – împarte un șir în mai multe șiruri, în funcț ie de caract erele specificate ;
substr() – returnează un subș ir specificat astfel, exemplu: 12,8 returnează 8 caractere,
începând de la caracterul al 12 -lea;
substring() – returnează un subș ir specificat astfel, ex emplu: 8,12 returnează toate
caracterele, începând de la caracterul al 8 -lea, pâ nă la al 12 -lea;
toFixed(n) – returnează șirul numeric rotunjindu -l la o valoare cu 'n' zeci male ;
toLowerCase() – convertește un șir î n litere mici ;
toUpperCase() – converte ște un șir î n litere mari .
Exemplu l 1:
Codul HTML:
77
Exemplu l 2:
Codul HTML:
Exemplu l 3:
Codul HTML:
78
Exemplu l 4:
Codul HTML:
Exemplu l 5:
Codul HTML:
79
Exemplu l 6:
Codul HTML:
80 3.8.2. Obiectul Array (tablou sau matrice)
Tabloul este o construcție pentru programare, fundamentală în aproape toate
limbajele de programare. Un tablou conține un set de elemente de date. Fiecare element din
tablou este o valoare separată. Deși alte limbaje cer ca toate valorile tabloului să fie de
acela și tip, în JavaScript un tablou poate conține tipuri de date combinate, tot așa cum un
obiect poate avea proprietăți de diverse tipuri.
Crea rea unui tablou se poate realiza în trei moduri:
1. Tablou obiș nuit
var oras=new Array();
oras[0]=”Bucuresti” ;
oras[1]=”Budapesta”;
oras[2]=”Praga”;
oras[3]=”Viena”;
2. Tablou condensat
var oras=new Array (”Bucuresti”, ”Budapesta”, ”Praga”, ”Viena”)
3. Tablou literal
var oras=[”Bucuresti”, ”Budapesta”, ”Praga”, ”Viena” ];
Accesarea elementelor dintr -un tablou se face precizând numele tabloului ș i
indicele elementului. Prim ul element din tablou are indice le 0.
De exemplu:
document.write( oras[0]);
va afișa șirul: Bucuresti
Modificarea valorilor dintr -un tablou
Se realizează atribui nd noua valoare elementului pe care dorim sa îl modificăm.
De exemplu:
oras[1 ]=”Berlin ”;
Proprietatea obiectului Array :
length – returnează numărul de elemente ale tabloului
Exemplu:
81 Codul HTML:
Metodele obiectului Array :
concat() – returnează tabloul obținut în urma c oncaten ării a două sau mai multe tablouri ;
join() – convertește un tablou într -un șir de caractere ;
pop() – înlătură ultimul element dintr -un tablou și returnează respectivul element ;
push() – adaugă noi elemente la sfârșitul unui tablou și returnează noua lungime a
tabloului ;
reverse() – inversează ordinea elementelor dintr -un tablou ;
shift() – înlătură primul element dintr -un tablou și returnează respectivul element ;
slice() – selectează o parte dintr -un tablou și returnează elementele selectate ;
sort() – sortează elementele unui tablou ;
splice() – adaugă/ înlătură elemente dintr -un tablou;
toString() – convertește un tablou în șir de caractere și returnează rezultatul ;
unshift() – adaugă noi elemente la începutul unui tablou și returnează noua lungime a
tabloului .
Exemplu l 1:
82 Codul HTML:
Exemplu l 2:
Codul HTML:
83
3.8.3. Obiectul Date
Obiectul Date este modalitatea care oferă posibilitatea lucrului cuu valori de ore și
date calendaristice. Când se creează un obiect Date, ora reflectată în interiorul obiectului
este ora calculatorului client.
Declararea unui obiect Date se poate realiza în patru moduri:
var d = new Date();
var d = new Date(milisecunde);
var d = new Date(dataString);
var d = new Date(an, luna, zi, ore, minute, secunde, milisecunde).
Metodele obiectului Date :
getDate() – returnează ziua din lună (între 1 și 31) ;
getDay() – returnează ziua din săptămână (0 -6);
getFullYear() – returnează anul (patru cifre) ;
getHours() – returnează ora (0 -23);
getMilliseconds() – returnează milisecundele (0 -999);
getMinutes() – returnează minutele (0 -59);
getMonth() – returnează luna (0 -11);
getSeconds() – returnează secundele (0 -59);
getTime() – returnează numă rul de milisecunde scurse de la 1.01.1970 ;
getTimezoneOffset() – returnează diferența dintre GMT ș i timpul local, în minute ;
parse() – analizează(parsează) o dată ca șir de caractere ș i returnează numă rul de
milisecunde scurse de la 1.01.1970 ;
setDate() – setează data din lună (1 -31);
setFullYear() – setează anul (patru cifre) ;
setHours() – setează ora (0 -23);
setMilliseconds() – setează milisecundele (0 -999);
setMinutes() – setează minutele (0 -59);
84 setMonth() – setează lunile (0 -11);
setSeconds() – setează secundele (0 -59);
setTime() – setează o dată și o oră adunând sau scăzâ nd un anumit număr de milisecunde
la/din 1.01.1970 ;
toDateString() – convertește porțiunea corespunză toare da tei calendaristice dintr -un obiect
Date într-un șir de caractere ;
toString() – convertește un obiect Date într-un șir de caractere ;
toTimeString() – convertește porțiunea corespunză toarea timpului dintr -un obiect Date
într-un șir de caractere ;
valueOf() – returnează valoarea primară a unui obiect Date .
Exemplu l 1:
Codul HTML:
Exemplu l 2:
85 Codul HTML:
3.8.4. Obiectul Math
Pentru calculele matematice, JavaScript încapsulează o serie de constante și
proceduri matematice în entitatea obiectul Math . Un obiect Math nu este nevoie sa fie
creat (instantat) anterior folos irii.
Proprietățile obiectului Math :
E – returnează constanta lui Euler (2.7182…….) ;
LN2 – returnează logaritm natural din 2 ;
LN10 – returnează logaritm natural din 10 ;
LOG2E – returnează logaritm în baza 2 din E ;
LOG10E – returneaz ă logaritm î n baza10 din E ;
PI – returneaz ă PI;
SQRT1_2 – returnea ză radical din 0.5 ;
SQRT2 – returnează radical din 2 .
Metodele obiectului Math :
abs(x) – returnează valoarea absolută din x ;
acos(x) – returnează arccosinus din x ;
asin(x) – returnează arcsinus din x ;
atan(x) – returnează arctangenta din x ;
atan2(y,x) – returnează unghiul dintre axa și un punct (x,y) ;
ceil(x) – returnează cel mai apropiat î ntreg mai mare sau egal cu x ;
cos(x) – returnează cosinus din x ;
86 exp(x) – returnează valoarea lui E la puterea x ;
floor(x) – returnează cel mai apropiat î ntreg mai mic sau egal cu x ;
log(x) – returnează log natural din x ;
max(x,y) – returnează maximul dintre x ș i y;
min(x,y) – returnează minimu l dintre x ș i y;
pow(x,y) – returnează valoare a lui x la puterea y ;
random() – returnează un număr aleator între 0 ș i 1;
round(x) – rotunjește pe x la cel mai apropiat î ntreg ;
sin(x) – returnează sinus din x ;
sqrt(x) – returnează radical din x ;
tan(x) – returnează tangenta din x .
Exemplu:
Codul HTML:
3.8.5. Obiecte de tip Global
Obiectele de tip Global grupeaz ă proprietățile și metodele de nivel cel mai î nalt.
Proprietățile obiectelor de tip Global :
Infinity – cuvânt -cheie care reprezintă plus sau minus infinit ;
NaN – reprezintă un obiect null, care nu are vreo valoare ;
undefined – indică dacă o variabil ă a fost sau nu definită.
87 Metodele obiectelor de tip Global :
escape() – întoarce un obiect sir î n care toate caracterele non a lfa-numerice sunt
transformate î n echivalentele lor numerice ;
eval() – acceptă un șir de instrucț iuni Java Script și îl evaluează ca fiind cod sursă ;
isFinite() – determin ă dacă o variabil ă are limite finite ;
isNaN() – determină dacă o variabil ă este sau nu un număr;
Number() – convertește valoarea unui obiect î n num ăr;
parseFloat() – transformă un șir într -un număr de tip float (cu virgulă );
parseInt() – transformă un șir într -un numar î ntreg ;
string() – converteste valoarea unui obiect în string (de tip ș ir);
unescape() – ia o valoare hexazecimală și întoarce echivalentul său î n ISOLatin -1 ASCII .
Exemplu:
Codul HTML:
88 3.9. Evenimente le JavaScript
JavaScript este utilizat pentru crearea de pagini web dinamice. Evenimentele sunt
acțiuni le pe care le detecteaz ă JavaScript. Utilizatorul paginii web este cel ce declanșează
evenimentele. De exemplu, apăsarea unui buton din pagina web implică declanșarea
evenimentului onClick . La deplasarea mouse -ului deasupra unui link se declanșează
evenimentul MouseOver . Prin urmare, fiecărui element al paginii web îi aparțin
evenimente care declanș ează un script. Evenimentele sunt definite în tagurile HTML.
Exemple de evenimente dintr -o pagină web dinamică:
– Încărcarea unei imagini ;
– Deplasarea mouse -ului peste o anumită zonă din pagina web ;
– Click de mouse ;
– Selectarea unui câmp dintr -un formular HTML ;
– Submiterea unui formular HTML .
Evenimentele care pot fi folosite î n programarea JavaScript:
onAbort – se declanșează atunci când încărcarea unui element este anulată;
onBlur – se declanșează atunci când un obiect nu mai este activ, prin trecerea la o alta
resurs ă;
onChange – se declanșează atunci când se modifică conținutul unui câ mp dintr -un
formular HTM L (o parola, text, bloc de text sau FileUpl oad) și câ nd acesta pierde
focalizarea ;
onClick – se declanșează atunci când se dă click pe un obiect (document, link, buton,
checkbox, buton radio, buton reset sau submit);
onDblClick – se declanșează la efectuarea a dou ă clickuri unul după altul;
onError – se declanșează când acțiunea de încă rcare a u nei imagin i sau document esuează ;
onFocus – se declanșează când este activat un obiect câ mp: caseta password, câmp text,
bloc de text, câ mp Fil eUpload dintr -un formular HTML;
onKeydown – se declanșează când se apasă o tastă;
onKeyUp – se declanșează după ce am terminat de apăsat pe o tastă;
onKeyPress – se declanșează la apasarea unei taste (precede "KeyDown");
onLoad – se declanșează când browserul a terminat de încă rcat un document, imagine sau
toate Frame -urile dintr -un <FRAMESET>
onMouseDown – se declanșează când ținem apă sat unul din butoanele mouse -ului, pe un
document, buton sau link;
89 onMouseMove – se declanșează când se mișcă mouse -ul;
onMouseOut – se declanșează câ nd se mut ă mouse -ul de pe un hy perlink sau o imagine ;
on MouseOver – se declanșează câ nd se pozi ționeaz ă mouse -ul deas upra unui link sau
unei imagini;
onMouseUp – se declanșează câ nd este eliberat degetul de pe unul din butoanele mouse –
ului;
onMove – se declanșează câ nd se comand ă deplasarea fer estrei sau cadrului;
onReset – se declanșează la reiniț ializarea unui formular ;
onResize – se declanșează când se comandă redimensionarea ferestrei sau cadrului ;
onSelect – se declanșează câ nd utilizatorul selectează text dintr -un obiect Text sau
Textar ea;
onSubmit – se declanșează la trimiterea unui formular ;
onUnload – se declanșează când se iese dintr -un document și se încarcă altul .
Exemplu l 1:
Codul HTML:
Exemplu l 2:
90
Codul HTML:
3.10. Obiectul Navigator
Reprezintă aplicați a browser cu care sunt vizualizate rezultatelor . Deoarece unele
coduri JavaScript se comportă diferit de la un browser la altul, este indicat ca proiectarea
acestor coduri să se facă în funcție debrowserul vizitatorului. În acest scop, obiectul
Navigator conține informa ții legate de numele și versiunea browserului vizitatorului.
Proprietățile obiectului Navigator :
appCodeName – returnează codul browserului ;
appName – reprezinta numele oficial al browserului ;
appVersion – returnează versiunea browserului
language – limbajul browserului
91 platform – returnează sistemul de operare ;
plugins – face referire la un tabl ou de obiecte "Plugin" care conț ine toate modulele plugin
instalate pe browser .
userAgent – Returnează numele navigatorului urmat de numărul său de versiune.
Exemplu:
Codul HTML:
3.11. Validarea formularelor
Validarea unui formular este ac țiunea ce constă în verificarea pe baza unui script a
corectitudinii informațiilor pe care le -a introdus utilizator ul. Cu un script JavaScript se pot
verifica într -un formular: dac ă au fost comple tate câmpurile obligatorii, dacă datele
completate în câmpuri sunt valide (de exemplu: o adresă de email, o dată calendaristică) ,
dacă au fost selectate casete de validare etc.
Exemplu l 1: Calculul rădacinii patrate a unui număr x, x≥0. În c azul în care x˂0, se
afișează mesajul Rădăcină imaginară .
92
Codul HTML:
Exemplul 2: Verificarea completării a trei câmpuri dintr -un formular: nume, prenume,
card. În cazul în care se omite completarea unuia din aceste câmpuri, apare un mesaj de
avertizare.
93
Codul HTML:
Exemplul 3: Verificarea completării unei adrese de e-mail. Date respectiv ă trebuie s ă
conțină cel pu țin caracterul @ și un punct. Totodată , @ nu poate fi primul caracter din șir,
iar ultimul punct trebuie s ă fie cel pu țin la un caracter distan ță de @ .
94
Codul HTML:
3.12. Animaț ii
JavaScript poate fi utilizat pentru crearea animațiilor simple. Pentru animații mai
complexe trebui e însă folosit Java sau un soft dedicat, ca de exemplu, Macromedia Flash.
Pentru crearea animațiilor cu JavaScript trebuie lăsat scriptul să afișeze imagini diferite
pentru evenimente di ferite.
95 Exemplul 1:
Click Turn on the light :
Click Turn off the light :
Codul HTML:
Exemplul 2:
Mouse over :
Mouse out :
Codul HTML:
96
3.13. Imagini mapate
Imaginile mapate reprezint ă mijlocul de simplificare a navigării în paginile web. O
imagine mapată ( image -map ) este o imagine care are zone ce pot fi acționate cu mouse -ul.
Fiecare zona are rolul unui link. Pentru a descrie fiecare zonă a imaginii este necesară
cunoaște rea coordonatel or punctelor care delimitează zonele respective . Acea sta se poate
realiza cu ajutorul unui program specializat, cum ar fi : MapEdit sau LiveImage .
Zonele imaginii sunt definite cu tag -urile (X)HTML: <map> și <area> .
În tagurile <area> din imaginea mapată pot fi adăugate evenimente care să apele ze
funcții JavaScript. Tagul <area> suportă evenimentele onClick , onDblClick ,
onMouseDown , onMouseUp , onMouseOver , onMouseMove , onMouseOut ,
onKeyPress , onKeyDown , onKeyUp , onFocus și onBlur .
Exemplu: utilizarea unei imagini mapate într -un program HTML . La trecerea cu mouse -ul
peste fiecare din cele trei zone ale căror coordonate sunt definite, va apărea cate un mesaj
text.
OnMouse Over
97
Codul HTML:
98 4. METODICĂ – OPȚIONAL PAGINI WEB DINAMICE
În prezent , termenu l informatică (combinația între informație și automatică )
desemnează u na dintre cele mai recent apărute știi nțe. Această știință acoperă de domeniile
științific, tehnologic și industrial, raportate la tratarea automată a informație i de către
mașini precum calculatoare, console, terminale , roboți.
Inițial, informatica a fost considerată o ramură matematică, însă de -a lungul
timpului și până în prezent lucrurile evoluând într-un ritm inimaginabil de alert,
informatica a devenit o știință de sine stătătoare cu propriile sub-ramuri.
Datorită faptului că rețeaua Internet a cunoscut o dezvoltare explozivă, a apărut și
necesitatea dezvol tării unor unelte corespuzătoare de creare a paginilor web . Toate acestea
conduc la ideea că este binevenită introducerea în programa școlară a disciplinei opțion ale
Pagini web dinamice care să aibă o abordare preponderent practică.
4.1. Pograma disciplinei opționale Pagini web dinamice
99
Liceul Teoretic Emil Racoviță
GALAȚI
CURRICULUM LA DECIZIA ȘCOLII PENTRU
CLASA A XII -A
CURSUL SUPERIOR AL LICEULUI
PAGINI WEB DINAMICE
Profil real
Specializarea: Ș tiințe ale naturii
100 NOTĂ DE PREZENTARE
Prezentul curriculum școlar cuprinde programa pentru disciplina Pagini web
dinamice , studiată în filiera teoretică, la profilul real, specializ area științele naturii,
prevăzută cu o oră pe săptămână în componenta curriculum la decizia școlii .
Programa are următoarele componente:
Notă de prezentare
Competențe generale
Competențe specifice și conținuturi
Valori și atitudini
Sugestii metodologice.
Disciplina Pagini web dinamice are drept scop familiarizarea elevilor cu modul de
utilizare a calculatorului ca instrument de lucru în procesul de instruire și formarea unor
cunoștințe de folosire a unor produse software pentru programare; familiarizarea cu
tehnicile moderne de prezentare a materialului didactic folosind calculatorul; dobândirea
sistemului de cunoștințe și a deprinderilor de utilizare în scopul rezolvării problemelor
practice; dobândirea capacității de integrare a noilor tehnici hardware ș i software în
tehnologia educației.
În elaborarea programei de față am luat în considerație atât cercetările în domeniul
curricular, tendințe pe plan internațional, cât și propria experiență didactică.
Opționalul e adresat elevilor din clasele a XII -a, specializarea științe ale naturii .
Aceștia au studiat pe de o parte, informatica în liceu după următoarea structură:
– în clasa a IX -a, reprezentarea algoritmilor în pseudocod, principiile programării
structurate, structuri de bază, algoritmi elementar i și implementarea algoritmilor în
limbajul de programare C++ ;
– în clasa a X -a, elementele de bază ale limbajului de programare C++, tipuri
structurate de date, algoritmi fundamentali de prelucrare a datelor structurate în tablouri .
Pe de altă parte, au stud iat în clasa a IX -a câteva noțiuni de bază pentru realizarea
unei pagini web simple folosind HTML, la disciplina Tehnologia informației și a
comunicațiilor .
Aceste aspecte constituie o premisă favorabilă pentru a studia JavaScript, inclusiv
datori tă simili tudinii dintre acesta ș i C++.
101 Conținutul învățării este conceput astfel încât să asigure un bagaj minim de
cunoștințe și deprinderi din domeniul construirii paginilor web dinamice. Opționalul este
realizat sub formă de site.
Studiul disciplinei Pagini web dinamice se va desfășura cu întreg colectivul de
elevi ai clasei, pe parcursul unui an școlar, o oră pe săptămână, în laboratorul de
informatică.
În procesul de predare învățare, activitatea va fi orientată pe probleme: analiza unor
situații practice (generale sau specifice unui anumit domeniu), identificarea fluxului
informațional, elaborarea unui model algoritmic de rezolvare.
Exemplele utilizate la predare vor fi preponderent alese din aria curriculară a
specializării, în colaborare cu profesorii d e la aceste discipline.
Studiul acestui opțional este binevenit, deoarece ar reprezenta în primul rând un
factor de atractivitate, iar în al doilea rând ar familiariza elevii cu lucrul efectiv . Este
necesar ca elevii să lucreze cât mai mult din punct de vedere practic, deci să implementeze
pe calculator cât mai multe exemple, să testeze cât mai multe funcții și situații.
De asemenea, este foarte indicată reluarea problemelor clasice școlăreș ti (de cl asa a
IX-a, a X-a și a XI -a) cu mici preciză ri (acolo unde se poate ) care să ajute la
înfrumuseț area datelor de ieșire (gen: numerele să fie afișate în tabele, anumite elemente să
fie colorate etc.).
Avantajul cunoașterii JavaScript la terminarea liceului nu poate fi decât benefică ,
mergând până într -acolo încât poate chiar să constituie un punct de pornire a unei meserii
în domeniul realizării paginilor web.
COMPETENȚE GENERALE
1. Dezvoltarea deprinderilor moderne de utilizator
2. Cunoașterea modului de utilizare a unor medii informatice de lucru
3. Elaborarea unor produse utilizabile care să dezvolte spiritul inventiv și creativitatea
102 VALORI ȘI ATITUDINI
Utilizarea surselor informaționale și a mijloacelor de procesare în scopul preluării,
prelucrării și prezentării informației;
Dezvoltarea competențelor de utilizare a unui sistem de calcul și a unor produse
soft de largă răspândire;
Exprimarea unui mod de gândire creativ în structurarea și rezolvarea problemelor;
Dezvoltarea competențelor de comunicare în cadru individual și de echipă ;
Educarea elevilor pentru realizarea unor produse utilizabile și dezvoltarea spiritului
inventiv și creator ;
Formarea obișnuințelor de a recurge la concepte și metode informatice de tip
algoritmic specifice în abordarea unei varietăți de probleme.
Manifestarea unor atitudini favorabile față de știință și de cunoaștere în general ;
Manifestarea disponibilității de a evalua / autoevalua activități practice;
Manifestarea inițiativei și disponibilității de a aborda sarcini var iate.
COMPETENȚE SPECIFICE ȘI CONȚINUTURI
1. Dezvoltarea deprinderilor moderne de utilizator
Competențe specifice Conținuturi
1.1. Utilizarea operațiilor de bază necesare
realizării unei pagini HTML Lansarea editorului HTML
Interfața editorului
1.2. Folosirea elementelor de bază pentru
inserarea în pagină a elementelor: text,
imagine Inserarea și formatarea unui text: corp de
literă, mărime, stil, culoare
Inserarea unei imagini – modificarea
proprietăților imaginii: poziționare,
dimensiuni, încadrare în text
Formatarea unui fundal sau a unei teme
1.3. Enumerarea și aplicarea modalităț ilor
de a realiza o hiper -legătură Realizarea unei legături pe un text
Realizarea unei legături pe o imagine
Maparea unei imagini
1.4. Utilizarea tabelelor într -o pagină WEB Inserarea unui tabel
Formatarea tabelului
1.5. Utilizarea cadrelor într -o pagină WEB Divizarea în cadre
103 1.6. Utilizarea formularelor într -o pagină
WEB Câmpuri de intrare și butoane
Liste de selecție
1.7. Enumerarea și aplicarea modalităț ilor
de introducere a sunetelor și a deplasării
textului Mișcarea textului
Introducerea sunetelor
1.8. Enumerarea și aplicarea specificațiilor
pentru modele de stiluri Stiluri CSS ( Cascading Style Sheets) în
HTML
1.9. Realizarea unor aplicații practice Sugestii: întocmirea unei pagini WEB
aferente studierii unui capitol al unei
discipline specifice specializăriii Științe
ale naturii (fizică, chimie, biologie)
Modalități de depozitare a paginilor
2. Cunoașterea modului de utilizare a unor medii informatice de lucru
Competențe specifice Conținuturi
2.1. Utlizarea operațiilor de bază pentru a
insera JavaScript într -un document HTML
deja existent Inserarea scripturilor
Instrucțiuni și comentarii
2.2. Identificarea elementelor fundamentale
într-o pagină WEB dinamică Variabile și funcții JS
Operatorii JS
2.3. Utilizarea instrucț iunilor condiționale și
repeti tive pentru a adăuga anu mite
caracteristici într -o pagină WEB dinamică Instrucțiuni condiționale în JS
Instrucțiuni repetitive în JS
2.4. Utilizarea tehnicilor de comunicare
eficientă cu vizitatorii site -ului WEB Ferestrele Alert, Pompt și Confirm
2.5. Gruparea elementelor unei pagini WEB
în obiecte Obiectul String
Obiectul Array (tablou sau matrice)
Obiectul Date
Obiectul Math
Obiecte de tip G lobal
2.6. Aplicarea modalităților de manipulare a
unui formular într -o pagină WEB dinamică Evenimentele JS
Validarea formularelor
104 2.7. Utilizarea metodelor de realizare a unor
elemente animate într -o pagină WEB Animații
Imagini mapate
3. Elaborarea unor produse utilizabile care să dezvolte spiritul inventiv și
creativitatea
Competențe specifice Conținuturi
3.1. Utilizarea unor scripturi ce pot fi
adăugate în paginile WEB , pentru a înțelege
modul cum sun t folosite obiectele,
proprietățile ș i metodele JavaScript Coduri și funcții JavaScript
Scripturi
3.2. Realizarea unei pagini web dinamice pe
o temă dată Tema proiectului
Proiectarea conținuturilor
Realizarea și prezentarea proiectului
SUGESTII METODOLOGICE
Predarea -învățarea disciplinei Pagini web dinamice va fi orientată pe rezolvarea
unor sarcini de lucru , utilizându -se preponderent metoda învățării și a formării
deprinderilor prin rezolvarea unei game cât mai variate de aplicații practice și punându -se
accent pe realizarea cu exactitate și la timp a cerințelor. Realizarea proiectelor în cadrul
activităților practice va urmări dezvoltarea abilităților de lucru în echipă.
Locul de desfășurare a instruirii trebuie să fie un laborator de informatică în care –
pentru optimizarea demersului didactic – este necesar să ex iste o dotare minimală care
presupune un numă r suficient de calculatoare, cu acces la INTERNET. Configurația
calculatoarelor trebuie s ă permită rularea aplicațiilor prin care vor fi formate competențele
specifice.
Prezența unui videoproiector sau a unui pr ogram de vizualizare în rețea va
îmbunătăți instruirea interactivă.
Profesorul va alege cele mai potrivite aplicații în funcție de specialitatea clasei ,
Științe ale naturii .
Specificul disciplinei impune metode didactice interactive, recomandând cu
precădere aplicațiile practice individuale, metoda descoperirii, lucrul în echipă, conversația
euristică.
105 Se va urmări ca a plicațiile prezentate efectiv elevilor să aibă ca obiect, într-o cât
mai mare măsură , probleme concrete ale activităților din domeniu l propriu de activita te
pentru a sublinia avantajele utilizării sistemelor informatice.
Proiectele și documentarea, stabilirea tematicii, vor fi realizate prin consultarea
cadrelor didactice de specialitate (matematică, fizică, chimie, biologie) , pentru a fi
identificate temele de interes aferente profilului Științe ale naturii .
Evaluarea trebuie să vizeze mai ales interpretarea creativă a informațiilor și
capacitatea de a rezolva o situație -problemă cu ajutorul calculatorului.
Elevii vor putea fi motivați în studiul acestei discipline și prin s ublinierea creșterii
șanselor de ocupare a unui loc de muncă sau de dezvoltare ca antreprenori, în situa ția
existenței cunoștințelor de proiectare a unei pagini Web dinamice .
4.2. Model de planificare pentru disciplina opțională Pagini web
dinamice
PLANIFICARE CALENDARISTICĂ
Semestrul I: 18 săptămâni
Nr.
crt.
Unitatea de învățare Compe –
tențe
specifi –
ce Conținuturi Nr.
ore
Săpt.
1. Pagini HTML –
Creare,
Personalizare 1.1.
1.2. Structura unei pagini
Personalizarea paginii
Personalizarea textului 3 1, 2, 3
2. Imagini și hiper-
legături în paginile
HTML 1.3.
Liste în HTML
Utilizarea imaginilor
Legături și referințe 3 3, 4, 5
3. Tabele în paginile
HTML 1.4. Inserarea unui tabel
Formatarea tabelului 2 6, 7
4. Cadre (Frames) 1.5. Divizarea în cadre 1 8
5. Formulare 1.6. Câmpuri de intrare și
butoane 2 9,10
106 Liste de selecție
6. Introducerea
sunetelor și a
deplasării textului 1.7. Mișcarea textului
Introducerea sunetelor 1 11
7. Stiluri 1.8. Stiluri CSS ( Cascading
Style Sheets) în HTML 1 12
8. Aplicații 1.9. Realizarea unei pagini
WEB statice 2 13, 14
9. Sintaxa JavaScript.
Noțiuni de bază 2.1. Inserarea scripturilor
Instrucțiuni și comentarii 1 15
10. Variabile, operatori
și funcții 2.2. Variabile și funcții JS
Operatorii JS 1 16
11. Instrucțiuni
JavaScript 2.3. Instrucțiuni condiționale
Instrucț iuni repetitive
Instrucțiuni
complementare 2 17, 18
Semestrul II: 17 săptămâni
Nr.
crt.
Unitatea de învățare Compe –
tențe
specifi –
ce Conținuturi Nr.
ore
Săpt.
1. Ferestrele Alert,
Pompt și Confirm 2.4. Ferestrele Alert, Pompt
și Confirm 1 1
2. Obiecte JavaScript 2.5. Obiectul String
Obiectul Array (tablou
sau matrice)
Obiectul Date
Obiectul Math
Obiecte de tip Global 3 2, 3, 4
3. Evenimente
JavaScript 2.6. Evenimente le JS 1 5
4. Validarea 2.6. Câmpuri obligatorii 1 6
107 formularelor Validarea unei adrese de
email
5. Elemente animate
într-o pagină WEB 2.7. Animații
Maparea imaginilor 2 7, 8
6. Scripturi Java 3.1. Coduri și funcții JS
Scripturi 4 9, 10, 11, 12
7. Realizarea și
prezentarea
proiectelor 3.2. Alegerea temelor în
funcție de specificul clasei
Reguli de lucru în echipa
Planul de lucru
Culegerea datelor
necesare, structurarea
datelor, realizarea paginii
WEB
Reguli de bază pentru
prezentarea unui proiect
Prezentarea proiectului 5 13, 14, 15,
16, 17
108 Bibliografie
1. Cristea, Sorin, Fundamentele pedagogiei , Polirom, Iași, 2010
2. Flanagan, David JavaScript The Definitive Guide, Third Edition , O'Reilly and
Associates , United States of America, 1998
3. Goodman, Danny, Dynamic HTML The Definitive Reference , Third Edition , O'Reilly
and Associates , United States of America, 2007
4. Keogh, Jim , JavaScript fără mistere : ghid pentru autodidacți , Rosetti Educational ,
București, 2006
5. Musciano, Chuck and Kennedy, Bill, HTML & XHTML The Definitive Guide ,
O'Reilly and Associates , United States of America, 2007
6. Noveanu, Eugen , Potolea, Dan , ȘTIINȚELE educației: dicționar enciclopedic Vol. I
(A-L), Sigma, București, 2007
7. Radu, Ion T. , Evaluarea în procesul didactic , Editura Didactică și Pedagogică ,
București, 2008
8. Wagner, Richard (calc.), Wyke, Allen R., JavaScript , Teora, București, 2001
Bibliografie Internet
http://wikipedia.org
https://www.learn -html.org/
https://ro.scribd.com/doc/29834200/Limbajul -HTML
http://www.tutorialehtm l.com/
http://www.w3.org/standards/webdesign/
http://javascript.info/
http://www.marplo.net/javascript/
http://www.w3schools.com
http://web.ceiti.md/lesson.php?id=16
http://www.learn -js.org/
https://www.tutorialspoint.com/java/
http://www.howtocreate.co.uk/tutorials/javascript/
109
Declarație de autenticitate
Subsemnata Cioc Cristina (căs.Oprea ), profesor titular de informatică la Liceul
Teoretic „Emil Racoviț ă” – Galați, declar pe propria răspundere următoarele: lucrarea a fos t
elaborată personal și îmi aparține în întregime, nu am folosit alte surse decât cele
menționate în biblio grafie, nu am preluat texte, date sau elemente de grafică din alte
lucrări sau d in alte surse fără a fi citate și fără a fi precizată sursa preluării, inclusiv în cazul
în care sursa o reprezintă alte lucrări ale mele, lucrarea nu a mai fost folosită în al te
contexte de examen sau de concurs.
Data:
Copyright Notice
© Licențiada.org respectă drepturile de proprietate intelectuală și așteaptă ca toți utilizatorii să facă același lucru. Dacă consideri că un conținut de pe site încalcă drepturile tale de autor, te rugăm să trimiți o notificare DMCA.
Acest articol: Liceul Teoretic „Emil Racoviță” , Galați 2 CUPRINS 1. INTRODUCERE ………………………….. …………………………….. [609719] (ID: 609719)
Dacă considerați că acest conținut vă încalcă drepturile de autor, vă rugăm să depuneți o cerere pe pagina noastră Copyright Takedown.