You are on page 1of 43

LIMBAJUL HTML

La crearea unei pagini WEB se parcurg paii:


1. StartProgramsAccessoriesNOTEPAD. 2. Editarea codului surs ( a tag-urilor) n editorul de texte NOTEPAD. 3. Salvarea codului surs sub forma unui fiier cu extensia HTM sau HTML (obligatoriu). Fiierul va fi salvat n folderul dvs. 4. Localizarea fiierului salvat la pasul 3 cu programul Windows Explorer (distinctiv acest fiier va avea pictograma urmtoare: . 5. Lansarea n execuie a fiierului cu extensia HTM sau HTML (pentru a vedea cum sunt interpretate tagurile scrise n Notepad pe Internet) dublu click pe fiier i astfel se va deschide programul Internet Explorer. 6. Modificarea codului surs se va face n Notepad. Deschiderea fiierului pentru ai modifica sursa se poate face: a. NotepadFileOpen ... b. Direct din folder prin acionarea butonului dreapta de mouse direct pe fiierul cu extensia HTM sau HTML Open with.... Notepad Orice modificare adus codului surs trebuie salvat (FileSave). Pentru a vedea i pe Internet modificarea fcut n Notepad trebuie, fie s repetm paii 4 i 5, fie s revenim n fereastra Internet Explorer (ea este deja deschis vezi bara de START) i s alegem din meniul ViewRefresh (sau aps tasta F5) Observaie: Pentru o nou modificare a codului sursa se va repeta pasul 6.

Seminar: Glvan Nicolae

TAG-uri utlizate pentru realizarea unei pagini WEB


Structura general a unui fiier cu extensia HTM sau HTML este:

<HTML> <HEAD> <TITLE> </TITLE> </HEAD> <BODY> .. .. </BODY> </HTML>


Observaie: un tag se va scrie ntotdeauna ncadrat de semnele < >. Efectul unui tag este vizibil pna cnd acesta este nchis (Ex: <title> Prima pagina WEB</title> care permite scrierea pe bara de titlu a programului Internet Explorer a textului Prima pagina WEB).

Seminar Baze le tehnologiei informaiei HTML 1


43

Tag-uri cu efect asupra ntregii pagini web


<body bgcolor = a Text = b Link = c Vlink = d Alink = e> - permite stabilirea unei culori de fundal a paginii Web, culoarea implicit de scriere a textului, culoarea legturilor, culoarea legturilor vizitate, culoarea legturilor de aciune.

LIMBAJUL HTML

LIMBAJUL HTML
Atributul BGCOLOR stabilete culoarea de fundal a paginii Web (Ex: <body bgcolor = blue> - culoarea de fundal va fi albastr sau <body bgcolor = 804050> (formatul de culoare este RRGGBB rou, verde, albastru) sau <body bgcolor = 15%85%95% > sau <body bgcolor = aaffcc> (formatul hexazecimal)) Atributul TEXT permite stabilirea culorii implicite de scriere pe ntreaga pagin Web (Ex: <body Text = red> tot textul pe pagina de Web va scris cu rou) Atributul LINK permite stabilirea culorii unei legturi (vezi tag-urile de la legturi). Implicit aceasta este albastr. (Ex: <body link = green> - legturile vor avea culoarea verde) Atributul Vlink permite stabilirea culorii unei legturi vizitate (Ex: <body vlink = red> un link vizitat va avea culoarea roie) Atributul ALINK permite stabilirea culorii unei legturi de aciune, adic pna la realizarea conexiunii stabilite de legtur (vezi tag-urile de la legturi) link-ul va avea culoarea stabilit prin ALINK, iar dup realizarea conexiunii acesta culoare va devenii automat cea specificat cu VLINK (Ex: <body alink = yellow> - un link n aciune va avea culoarea galben) Observaie. Un tag poate folosi toate atributele de care dispune sau numai o parte din acestea (Ex: <body bgcolor = red text = yellow link = gray> Dac dorim ca pe o pagin Web s avem ca fundal o poz, atunci n locul atributului BGCOLOR din cadrul tag-ului <body bgcolor = a ......> vom folosii atributul BACKGROUND urmnd a specifica adresa pozei respective (Ex: <body background = c:\student\poza.gif text = red >

Tag-uri pentru formatarea caracterelor i aranjarea textului


<b> - permite scrierea caracterelor ngroat (bold) <i> - permite scrierea caracterelor nclinat (italic) <u> - permite scrierea caracterelor subliniat (underline) <center> - permite alinierea pe centru a textului pe pagin <p align = left/right/center>permite alinierea la stnga/dreapta/centru a unui paragraf pe o pagin Web, ntrerupnd linia curent i scriind textul pe o nou linie <br> - ntrerupe linia curent i trece textul sau imaginea pe urmtoarea linie Observaie. <p> este echivalentul lui <br><br> (de dou ori <br>). <hr size = a color = b width = c align = left/right/center > - plaseaz o linie orizontal n document. Atributul SIZE definete grosimea liniei orizontale (Ex: <hr size = 3> linia va avea o grosime de aproximativ 1 mm) Atributul COLOR permite colorarea liniei orizontale (Ex: <hr color = red> - linia va avea culoarea roie - sau color = 804050 (formatul de culoare este RRGGBB rou, verde, albastru) sau color = aaffcc (formatul hexazecimal)) Atributul WIDTH specific lungimea liniei orizontale (Ex: <hr width = 45%> - linia orizontal o s ocupe numai 45% din suprafaa paginii web) Atributul ALIGN permite specificarea modului de aliniere a liniei respective (stnga/dreapta/centru) <font color = a size = b face = c> - permite stabilirea culorii de scriere a caracterelor, stabilirea dimensiunii acestora, precum i stilul de scriere (Ex: Times New Roman, sau Arial) Atributul COLOR permite colorarea caracterelor (Ex: <font color = blue> textul va fi scris cu albastru. Observaie: Acest parametru are prioritate fa de acelai atribut din tag-ul <body text = b>. Aadar, dac se stabilete o culoarea a textului pe ntreaga pagin Web pe rou - <body text=red> - i doresc s scriu un cuvnt cu albastru, atunci voi folosi tag-ul <font color=blue> naintea cuvntului pe care doresc s-l scriu cu albastru. Acest fapt este posibil deoarece tag-ul <font color=blue> are prioritate fa de tag-ul <body text=red>. Atributul SIZE stabilete dimensiunea de scriere a caracterelor. SIZE poate lua valori de la 1 la 7 existnd un echivalent al acestora cu dimensiunile caracterelor din WORD 1 = 8pt / 2 = 10pt / 5 = 18pt / 7 = 36pt (Ex: <font size = 1> scrie la o dimensiune a caracterelor de 8pt) Atributul FACE permite specificarea stilului de scriere (Ex: <font face = Arial> - scrie pe stilul Arial)

Seminar Baze le tehnologiei informaiei HTML 2


43

Seminar: Glvan Nicolae

LIMBAJUL HTML

LIMBAJUL HTML
<sup> - permite scrierea unor cuvinte la putere (Ex: 9<sup>50 are ca efect - 950) <sub> - permite scrierea unor cuvinte ca indice (Ex: X<sub>i are ca efect Xi) <tt> - permite scrierea unui text monospaiat (Ex: <tt>Este cel mai bine</tt> <address> - permite scrierea pe un anumit stil aunei adrese potale, a unui telefon

Tag-uri pentru includerea unei imagini n cadrul paginii Web


<img src = locaia pozei border = a width = c height = d align = left/right/center permite amplasare unei imagini n cadrul paginii Web alt = > - acest tag

Atributul SRC este folosit pentru specificarea adresei (sursei) imaginii pe care dorim a o plasa pe pagina Web (Ex: <img src=c:\student\poza.gif> - va plasa pe pagina de Web fiierul poza.gif existent n folderul c:\student Atributul BORDER permite stabilirea grosimii liniei ce va nconjura poza (Ex: <img src=c:\student\poza.gif border = 3> - linia ce va nconjura poza va avea o grosime de aproximativ 1 mm) Atributul WIDTH permite stabilirea unei dimensiuni a imaginii pe orizontal (lungimea pozei pe orizontal) (Ex: <img src=c:\student\poza.gif width = 150> - poza va avea o lungime pe orizontal de aproximativ 5 cm) Atributul HEIGHT permite stabilirea unei dimensiuni a imaginii pe vertical (lungimea pozei pe vertical) (Ex: <img src=c:\student\poza.gif height = 300> - poza va avea o lungime pe orizontal de aproximativ 10 cm)

Seminar: Glvan Nicolae

Atributul ALIGN permite alinierea imaginii respective n src=c:\student\poza.gif align = left> - poza va fi aliniat la stnga)

cadrul

paginii

Web

(Ex:

<img

Atributul ALT permite scrierea unui text care va apare numai atunci cnd utilizatorul este poziionat cu mouse-ul pe imaginea respectiv (Ex: <img src=c:\student\poza.gif align = left alt = Poza aceasta este din secolul trecut>)

Tag-uri pentru realizarea listelor


Liste ordonate
<ol type = a start = b> <li>Primul element din list <li>Al doilea element din list <li>Al treilea element din list </ol> O lista este ordonat dac elementele ei au o numerotare n fa (ordonare). Atributul TYPE permite specificarea tipului de numerotare al listei. Atributul START specific de la ct s nceap numerotarea n lista Ex: <ol type = a start =1> <li> Primul element din list <li> Al doilea element din list <li> Al treilea element din list </ol> Ex: <ol type = A start =3> <li> Primul element din list <li> Al doilea element din list <li> Al treilea element din list </ol>

Seminar Baze le tehnologiei informaiei HTML 3


43

LIMBAJUL HTML

LIMBAJUL HTML
Ex: <ol type = 1 start =5> <li> Primul element din list <li> Al doilea element din list <li> Al treilea element din list </ol> Ex: <ol type = I start =3> <li> Primul element din list <li> Al doilea element din list <li> Al treilea element din list </ol>

Liste neordonate
<ul type = a> <li>Primul element din list <li>Al doilea element din list <li>Al treilea element din list </ul> O lista este neordonat dac elementele ei nu au o numerotare n fa (sunt neordonate), ci doar semne care s identifice elementul din list.

Seminar: Glvan Nicolae

Atributul TYPE permite specificarea tipului de semn al elementului din list Ex: <ul type = Square> <li> Primul element din list <li> Al doilea element din list <li> Al treilea element din list </ul> Ex: <ul type = Disc> <li> Primul element din list <li> Al doilea element din list <li> Al treilea element din list </ul> Ex: <ul type = Circle> <li> Primul element din list <li> Al doilea element din list <li> Al treilea element din list </ul>

Seminar Baze le tehnologiei informaiei HTML

Liste cu definiii
<DL> <DT>Student <DD>O persoan nscris la o instituie de nvmnt superior <DT>Profesor universitar <DD>Cadru didactic la o instituie de nvmnt superior </DL>

4
43

LIMBAJUL HTML

LIMBAJUL HTML
Tag-ul <DT> precizeaz termenul pe care vrem s-l definim n cadrul listei cu definiii, iar tag-ul <DD> definete termenul pe care vrem s-l definim. Ex:

Tag-ul pentru realizarea legturilor


Tag-ul pentru realizarea legturilor este: <A href = a>Textul sau imaginea de legtur</A> - permite realizarea unei conexiuni ctre adresa specificat n atributul HREF dac execut click stnga de mouse pe textul sau imaginea de legtur Atributul HREF permite specificarea adresei n care doresc s ajung. Atributul textul sau imaginea de legtur permite specificarea textului sau imaginii pe care se va executa click stnga de mouse pentru a ajunge la adresa specificat n cadrul atributului HREF. n funcie de adresa n care doresc s ajung (cea specificat n cadrul atributului HREF) distingem trei tipuri de legturi:

Legtur intern - permite realizarea unei legturi n cadrul aceluiai fiier. Schematic se prezint astfel:

Click aici
Seminar: Glvan Nicolae

Deplasare pn aici n cadrul aceluiai fiier.


Ex: S presupunem c avem o carte pe Internet de 300 de pagini. Cuprinsul acesteia (care se afl pe pagina 1) doresc a fi o punte de legtur cu coninutul fiecrui capitol. Cum voi proceda ? Parcurgem 2 etape: 1. Realizarea cuprinsului ca punte de legtur ntre el i coninutul fiecrui capitol (pe pagina 1) cu tag-ul <A>. 2. Deplasare la nceputul fiecrui capitol i realizarea unor semn de carte, aceasta pentru a ti unde s se deplaseze concret cursorul atunci cnd plecm de pe pagina ce conine cuprinsul. 1. Suntem pe pagina 1 i realizm curpinsul ca punte de legtur. <A href=#Continutul capitolului 1>Capitolul 1</A> <A href=#Continutul capitolului 2>Capitolul 2</A> <A href=#Continutul capitolului 3>Capitolul 3</A> <A href=#Continutul capitolului 4>Capitolul 4</A> <A href=#Continutul capitolului 5>Capitolul 5</A> Dup cum se observ textul Capitolul 3 a fost trecut ca text de legtur n cadrul sintaxei tag-ului A (vezi sintaxa tag-ului <A Href = . >..</A>) pentru a putea executa click stnga de mouse pe acest text i a ne trimite apoi la pagina 185 (unde presupunem c ncepe capitolul 3). De asemenea, s-a anticipat i numele semnului de carte, i anume #Continutul capitolului 3 (puteam s-i dau orice alt nume) 2. Deplasare la nceputul capitolului 3, adic la pagina 185 n cadrul crii respective. La aceast pagin vom crea semnul de carte cu numele #Continutul capitolului 3 astfel: <A name = #Continutul capitolului 3>

Seminar Baze le tehnologiei informaiei HTML 5


43

LIMBAJUL HTML

LIMBAJUL HTML
Dup ce am definit semnul de carte la pagina 185 putem s ne deplasm de la pagina 1 la pagina 185 cu doar un click de mouse pe textul de legtur.

Legtur local permite realizarea unei conexiuni cu un alt fiier existent pe calculator, adic la nivel local.
Schematic se prezint astfel: A.HTM B.HTM sau orice alt extensie

Click aici
Ex:

Deplasarea n cadrul altui fiier.

<A href = c:\student\fisier.doc>Click aici</A> - dac executai click stnga de mouse pe textul Click aici, se va realiza o conexiune cu fiierul fiier.doc existent pe c:\student. Dac ns avem dou fiiere cu extensia htm (fisierul1.htm i fisierul2.htm) i dorim s ne deplasm din fiierul1.htm n fiierul2.htm la pagina 200, atunci n fiierul1.htm vom scrie: <A href = c:\student\fisierul2.htm#Semnul de carte de la pagina 200>Ctre fiierul 2</A> Observaie: La pagina 200 din fiierul2.htm voi merge i voi defini un semn de carte cu numele Semnul de carte de la pagina 200. Astfel am realizat o legtur localo-intern.

Legtur extern permite realizarea unei conexiuni cu exteriorul, care poate fi un site sau un e-mail).
Schematic se prezint astfel: A.HTM Exterior (Site sau E-mail)

Seminar: Glvan Nicolae

Click aici
Ex: Legtur extrern ctre un site <A href = http://www.ase.ro>Vizitai site-ul A.S.E.</A> - permite realizarea unei conexiuni cu site-ul Academiei de Studii Economice. Ex: Legtur de transmitere a unui mesaj <A href=mailto:Georgescu@yahoo.com> Georgescu Nicolae </A> - permite transmiterea unei mesaj ctre csua potal a lui Georgescu Nicolae a crui adres de e-mail este.Georgescu@yahoo.com

Seminar Baze le tehnologiei informaiei HTML

Tag-uri pentru realizarea formularelor


Tag-urile pentru realizarea formularelor se vor scrie ntre tag-ul <form> ........</form>, astfel: <form method = post/get action = adresa unde vor fi trimise datele scrise spre analiz> .. .. </form> Atributul METHOD specific modalitatea de transmitere a datelor ctre server pentru a putea fi analizate. Atributul ACTION permite specificarea adresei server-ului care va primii datele scrise de utilizator pe internet. Tipurile de obiecte de formular sunt: Caset de tip text: <input type = text name = a size = b maxlength = c value = d> - permite realizarea de casete de tip text Atributul Type permite specificarea tipului de caset utilizat (text) Atributul Name permite specificarea numelui casetei de tip text Atributul Size permite stabilirea lungimii casete de tip text (nr. de caractere vizibile n caseta detip text)

6
43

LIMBAJUL HTML

LIMBAJUL HTML
Atributul Maxlength permite specificarea numrului maxim de caractere ce poate fi scris n caseta de tip text Atributul Value permite specificarea textului implicit ce va aprea scris n caseta de tip text. Ex: Introducei numele i prenumle <input type=text name=caseta1 size = 15 maxlength = 12 value = Popescu Ion>

Observaie. Caseta de tip text nu permite scrierea pe mai multe rnduri, ci doar pe unul singur. Caset de tip parol: <input type = Password name = a size = b maxlength = c value = d> - permite realizarea de casete de tip parol Ex: Introducei parola<input type=password name=caseta2 size=15 maxlength=12 value="Popescu Ion">

Caset de tip checkbox: <input type=checkbox name = a checked> Atributul Checked permite selectarea implicit a casetei de tip checkbox, utilizatorul putnd deselecta csua respectiv Ex: Care sunt limbile strine cunoscute: <input type=checkbox name = a>Englez <input type=checkbox name = b>Francez <input type=checkbox name = c>German

Seminar: Glvan Nicolae Seminar Baze le tehnologiei informaiei HTML 7


43

Caset de tip Radio buton: <input type=radio name = a checked> Atributul Checked permite selectarea implicit a casetei de tip checkbox, utilizatorul putnd deselecta csua respectiv Ex: Care este ara de origine: <input type=radio name=a>Romnia <input type=radio name=a >SUA <input type=radio name=a checked>Germania

Observaie. Toate radio butoanele aferente aceleiai ntrebri trebuie s aib acelai nume (name), iar ntrun formular nu pot exista mai multe grupuri de radio butoane cu un nume ce a mai fost dat anterior. Buton de trimitere a datelor ctre server: <input type=Submit name=a value = Trimite datele> Atributul VALUE permite scrierea unui text pe buton. Ex: <input type=Submit name=a value=Trimite datele>

Buton de tergere a datelor: <input type=Reset name=a value = Sterge datele> Ex: <input type=Reset name=a value=terge datele>

Buton obinuit: < input type=button name=a value=Calculeaza valoare din co>

Caset de tip multilinie: <textarea rows=a cols=b> .</textarea> - permite scrierea pe mai multe rnduri Atributul Rows permite precizarea numrului de linii vizibile n cadrul acestei casete de tip multilinie. Numrul liniilor ce poate fi scris n aceast caset este cu mult mai mare, dar vizibile pe ecran sunt doar cele precizate n Rows, pentru restul liniilor ne vom deplasa cu bara de defilare care va apare automat dac numrul de linii scrise este mai mare dect cel precizat cu Rows.

LIMBAJUL HTML

LIMBAJUL HTML
Atributul Cols permite precizarea numrului de caractere de pe coloan (un caracter = o coloan). Ex: <Textarea rows=6 cols=15>Tastai mesajul dvs.</Textarea>

Observaie. Verificai numrul liniilor precizate cu Rows i numrul caracterelor pe coloan precizate cu Cols. Caset de tip list derulant ComboBox: <select> <option>Elementul 1 <option>Elementul 2 <option SELECTED>Elementul 3 <option>Elementul 4 <option>Elementul 5 </select> Atributul OPTION permite specificarea elementelor casetei de tip list derulant Atributul SELECTED din cadrul tag-ului OPTION de la Elementul 3 realizeaz o selectie implicit a acestei opiuni. Ex:

Seminar Baze le tehnologiei informaiei HTML

Seminar: Glvan Nicolae

Caset de tip list derulant cu selectie multipl: <select multiple size = a> <option>Elementul 1 <option>Elementul 2 <option selected>Elementul 3 <option>Elementul 4 <option>Elementul 5 </select> Atributul SIZE permite specificarea numrului de opiuni vizibile n cadrul listei respective.

8
43

LIMBAJUL HTML

LIMBAJUL HTML
Ex:

Observaie. n list avem 5 ri, dar vizibile avem numai 4 dintre ele datorit atributului SIZE=4. Pentru a vedea i cea de-a 5-a ar ne deplasm cu bare de defilare vertical. Pentru a selecta mai multe ri trebuie s inem i tasta CTRL apast.

Tag-uri pentru realizarea tabelelor


Tag-urile pentru realizarea tabelelor se vor scrie ntre tag-ul <Table> .. </Table>. <table border=a cellspacing=b cellpadding=c width=d bordercolor=e align=left/right/center> <caption align=left/center/right> <tr bgcolor=a align=left/right/center valign=top/middle/bottom> <td bgcolor=a align=left/right/center valign=top/middle/bottom width=b> <td bgcolor=a align=left/right/center valign=top/middle/bottom width=b > <td bgcolor=a align=left/right/center valign=top/middle/bottom width=b > </tr> <tr bgcolor=a align=left/right/center valign=top/middle/bottom> <td bgcolor=a align=left/right/center valign=top/middle/bottom width=b> <td bgcolor=a align=left/right/center valign=top/middle/bottom width=b > <td bgcolor=a align=left/right/center valign=top/middle/bottom width=b > </tr> <tr bgcolor=a align=left/right/center valign=top/middle/bottom> <td bgcolor=a align=left/right/center valign=top/middle/bottom width=b> <td bgcolor=a align=left/right/center valign=top/middle/bottom width=b > <td bgcolor=a align=left/right/center valign=top/middle/bottom width=b > </tr> </table Atributul BORDER permite stabilirea grosimii liniilor tabelului Atributul CELLSPACING permite stabilirea spaiului dintre celulele unui table Atributul CELLPADDING permite stabilirea dimensiunii pe vertical a celulelor din table (ct de late s fie) Atributul WIDTH stabilete suprafaa pe care s o ocupe tot tabelul pe pagina de Web sau dimensiunea unei cellule. Atributul BORDERCOLOR permite stabilirea culorii liniilor tabelului Atributul BGCOLOR permite stabilirea culorii de fundal a liniei (n tag-ul TR) sau celulei (n tag-ul TD). Dac nu dorim pe fundal o culoare, ci o poz, atunci folosim n loc de BGCOLOR atributul BACKGROUND urmnd a preciza care este adresa pozei de fundal.

Seminar Baze le tehnologiei informaiei HTML 9


43

Seminar: Glvan Nicolae

LIMBAJUL HTML

LIMBAJUL HTML
Atributul ALIGN permite alinierea pe orizontal tabelului sau a textului n linia/celula respectiv Atributul VALIGN permite alinierea pe vertical a textului n linia/celula respectiv TAG-ul CAPTION permite specificarea unui titlu pentru tabelul respectiv. TAG-ul TR creeaz o linie n cadrul tabelului respectiv. Aadar, cte linii are tabelul, attea TR trebuie s avem (cheie de control). Atributele din TR au efect asupra ntregii linii. TAG-ul TD creeaz o celul pe linia respectiv. Aadar, cte celule are tabelul respectiv, attea TD trebuie s avem (cheie de control). Atributele din TD au efect asupra celulei curente. Observaie: Orice tabel se construiete de sus n jos, i de la stnga la dreapta. Exemplu: S se construiasc un tabel cu situaia notelor la disciplina de informatic pe grupe.

10 LIMBAJUL HTML
43

Seminar Baze le tehnologiei informaiei HTML

Seminar: Glvan Nicolae

LIMBAJUL HTML
Observaie. Atributele folosite n cadrul tag-ului TD au prioritate fa de cele folosite n cadrul tag-ului TR. n cadrul tag-ului TD se poate folosi simultan i atributul ROWSPAN i COLSPAN, semnificnd faptul c celula respectiv unete X linii i Y coloane. ATENIE: urmrii culorile liniilor pentru a nelege cum se realizeaz un tabel. Anumitor celule le-am schimbat culoare pentru a vedea prioritatea dintre TR i TD.

Tag-uri pentru realizarea de Frame-uri (cadre)


Tag-urile pentru realizarea frame-urilor sunt: <frameset rows = a frameborder = yes/no> - cnd se dorete mprirea ecranului pe linii <frameset cols=b frameborder = yes/no> - cnd se dorete mprirea ecranului pe coloane <frame name=a noresize src=b> - cnd trebuie s specificm sursa noilor cadre create. Observaie: Fiierul ce construiete cadrele nu trebuie s conin tag-ul <Body>. Orice fiier de cadre se construiete de sus n jos, i de la stnga la dreapta. Exemplu: Presupunem c vrem s mprim ecranul astfel:

Seminar: Glvan Nicolae Seminar Baze le tehnologiei informaiei HTML

Dintr-un capt n altul al ecranului nu ajunge dect o linie. Aadar, ecranul este mprit n dou linii dintre care prima are o dimensiune (*), iar cea de-a doua este de trei ori ct prima (3*). Aadar, pornim cu tag-ul <frameset rows =*,3* frameborder = yes> <html> <head> <title>Realizare frame-uri</title> <frameset rows="*,3*" frameborder=yes> <frameset cols="*,*,*"> <frame name=f1 src=1.htm noresize> <frame name=f2 src=2.htm noresize> <frame name=f3 src=3.htm noresize> </frameset> <frameset cols="*,*"> <frame name=f4 src=4.htm noresize> <frame name=f5 src=5.htm noresize> </frameset> </frameset> </head></html>

11 LIMBAJUL HTML
43

LIMBAJUL HTML
Prima linie este mprit n trei coloane egale. Deci, trebuie s construim coloanele respective cu <frameset cols="*,*,*">. Odat ce am creat coloanele respective, deoarece aceasta este forma final a primei linii, trebuie s precizm care este sursa pentru fiecare coloan n parte de pe prima linie. Pentru c doresc s nu aibe posibilitatea redimensionrii frame-urilor voi folosi i atributul NORESIZE atunci cnd precizez sursa fiecrui cadru n parte. <frame name=f1 src=1.htm noresize> <frame name=f2 src=2.htm noresize> <frame name=f3 src=3.htm noresize> Odat cu precizarea surselor celor trei coloanele, tag-ul ce a realizat mprirea n coloane trebuie nchis (</frameset>) Aadar, cu prima linie am terminat. Urmeaz a doua linie. Aceasta este i ea mprit n 2 coloane egale, deci trebuie s le crem: <frameset cols="*,*">. Aceasta fiind forma final trebuie acum s precizez care este sursa pentru cele 2 noi coloane create. <frame name=f4 src=4.htm noresize> <frame name=f5 src=5.htm noresize> Odat cu precizarea surselor coloanelor acesta trebuie nchis (</frameset>) Totodat am terminat cu ambele linii, deci trebuie s nchid frame-urile (</frameset>) Observaie: Fiierele precizate ca surs a coloanelor sau liniilor trebuie mcar s existe, chiar dac nu avem nimic scris n ele. (1.htm, 2.htm, 3.htm, 4.htm, 5.htm trebuie s existe).

Tag-uri pentru realizarea imaginilor reactive


Seminar: Glvan Nicolae Seminar Baze le tehnologiei informaiei HTML 12 LIMBAJUL HTML
43
O imagine reactiv este o imagine obinuit asupra creia se definesc zone de aciune diferite (ptrat, cerc, poligon, etc.) La definirea unei zone rectangulare trebuie specificate coordonatele colului din stnga sus i ale celui din dreapta jos. La definirea unei zone de cerc trebuie specificate coordonatele centrului cercului, precum si dimensiunea razei cercului, iar la definirea unei zone poligonale trebuie precizate coordonatele tuturor colurilor ce formeaz poligonul. Sugestie: Pentru aflarea tuturor coordonatelor se va plasa poza n progranul PAINT, iar apoi se poziioneaz mouse-ul pe zonele de demarcaie dorite, notndu-se separat coordonatele fiecrui col, dup caz. Aceste coordonate vor fi scrise n cadrul tag-ului corespunztor din NOTEPAD. Exemplu: S se scrie codul surs pentru realizarea urmtoarei pagini WEB:

LIMBAJUL HTML
Rezolvare Poza de pe pagina de WEB are dimensiunea: Width (lungimea) = 368 pixeli i Height (nlimea) = 263 pixeli. Pe aceasta se regsesc trei zone de aciune: o zon rectangular, ce are coordonatele: 198, 40 i 217, 55 o zon de cerc, ce are coordonatele: 210, 180, 7 o zon poligon, ce are coordonatele: 266, 68 267, 87 286, 87 286, 68 i 276, 39 2 Dup ce s-au stabilit coordonatele celor trei zone reactive de pe imaginea suport se poate trece la scrierea codului surs. Acesta este: 6 html> <head> 3

<title>Exemplu de imagine reactiva</title> p </head> i <body> x Aici este o singura poza in care6avem mai multe zone reactive, zone ce interactioneaza diferit la 3 8 p i x e l i un clic de mouse. e <p> l <Map name="Poza noastra"> i <area shape="rectangle" coords="198, 40 217, 55" href="mailto:georgescu@ase.ro">

Seminar: Glvan Nicolae

<area shape="circle" coords="210, 180, 7" href="Http://www.electrice.ro"> <area shape="polygon" coords="266, 68 267, 87 286, 87 286, 68 276, 39" href="Alta pagin.html"> </Map> <img Usemap="#Poza noastra" border="3" src="J0149118.JPG" width="386" height="263"> </body> </html> Dup cum se observ, pentru nceput a fost necesar crearea hrii pozei de pe pagina de WEB. Pentru aceasta s-a folosit tag-ul <Map></Map>. Tag-ul <Area> cu atributul Shape definete practic zonele reactive din imaginea nostr. Valorile luate de acest atribut trebuie s fie specifice formei zonei reactive dorite, i anume, Rectangle, Circle, Polygon. Atributul Coords permite specificarea coordonatelor zonelor reactive pe tipuri de forme, astfel: la o form de tip Rectangle se va specifica adresa colului stnga sus i adresa colului dreapta jos; la o form de tip Circle se va specifica adresa centrului cercului i lungimea razei cercului; la o form de tip Polygon ne alegem un punct de pe zona poligonl i un sens de parcurgere al acesteia, urmnd a specifica adresa fiecrui punct de pe forma poligonal creat. Atributul Href are rolul de o specifica adresa destinaiei legturilor din zonele reactive. Includerea unei poze pe o pagin Web se face cu tag-ul <IMG>, cunoscut deja de la aplicaiile anterioare. Un atribut nou, Usemap, ne permite specificarea faptului c poza ce se dorete a fi inclus pe pagina de Web are n cazul de fa, cele trei zone reactive la coordonatele specificate mai sus. Foarte importante sunt i atributele WIDTH i HEIGHT, deoarece harta zonelor reactive de pe poza noastr a fost fcut pe dimesiunile Width (lungimea) = 368 pixeli i Height (nlimea) = 263 pixeli. Aceasta nseamn c n colul din stnga sus al pozei se afl coordonatele 0,0, iar n colul din dreapta jos se afl coordonatele 368, 263. Aadar, ntre aceste coordonate s-au stabilit i zonele reactive.

13 LIMBAJUL HTML
43

Seminar Baze le tehnologiei informaiei HTML

LIMBAJUL HTML

Foi de stil
Foile de stil se pot defini n trei feluri: n fiiere externe (extensie .CSS) n antentul unui fiier cu extensia htm sau html (<HEAD> .. </HEAD>) in-line, adic n cadrul tag-ului respectiv

Aplicaia 1:
S se defineasc ntr-un fiier extern (nume fiier extern - APLICATIA 1.CSS) urmtoarele proprieti de stil asupra unui text oarecare existent n fiierul A.HTM: culoarea de fundal a textului verde; culoare caracterelor alb textul s fie ngroat (bold) i cursiv (italic) dimensiunea textului: 14pt familia de fonturi: Arial, Arial Black, Times New Roman, Courier New adic, n funcie de BROWSER spaiul dintre caractere s fie de 0.2cm

Rezolvare: Trebuie s se cunoasc tag-urile folosite pentru formatarea caracterelor sau textului. Acestea sunt: <P>, <B>, <I>, <FONT>, etc. Se alege tag-ul asupra cruia se vor preciza aceste proprieti de stil. Alegem tag-ul <P>, atunci n fiierul cu extensia CSS (scris n NOTEPAD i salvat cu extensia CSS Aplicatia 1.CSS) - vom scrie:

Seminar Baze le tehnologiei informaiei HTML


43

Seminar: Glvan Nicolae

OBSERVAIE: Pentru a scrie un text ntr-o pagin pot fi folosite mai multe fonturi (stiluri de caractere). Exist cinci familii generice de fonturi care sunt de regul disponibile pe toate calculatoarele utilizatorilor: "Serif", "Sans Serif", "Cursive", "Monospace" i "Fantasy". Tipul de font necesar poate fi stabilit prin proprietatea font-family: Pot fi introduse mai multe fonturi separate prin virgul - font-family: Arial, "Arial Black, "Times New Roman", "Courier New". n acest caz browserul va utiliza primul font pe care l cunoaste. Odat ce am ales tag-ul <P>, acesta trebuie precizat n fiierul A.HTM la modul obinuit, proprietile stabilite n fiierul extern se vor aplica ntregului text existent ntre <P>.</P>. Drept urmare, coninutul fiierului A.HTM poate fi:

14 LIMBAJUL HTML

LIMBAJUL HTML

Tag folosit pentru a stabili legatura cu fiierul extern Aplicatia 1.CSS

Execuia fiierului A.HTM este urmtoarea:

Seminar Baze le tehnologiei informaiei HTML


43

Seminar: Glvan Nicolae


Aplicaia 2:
Acelai enun cu specificare faptului c se dorete declararea proprietilor de stil n antetul documentului html, adic n <HEAD>. Rezolvare: Pentru c se dorete declararea proprietilor de stil n antetul documentului nu mai este nevoie de nici un fiier extern .CSS. Aadar, singura diferen ar fi aceea c proprietlile de stil cerute n enun vor fi declarate n interiorul tag-ului <HEAD>, ntre <STYLE> </STYLE> la fel cum au fost declarate i n fiierul extern. Concluzionnd putem spune c s-a schimbat doar locul n care se precizeaz aceste proprieti de stil. Deci, fiierul A.HTM se poate prezenta astfel:

15 LIMBAJUL HTML

LIMBAJUL HTML

Seminar: Glvan Nicolae Seminar Baze le tehnologiei informaiei HTML


43

Aplicaia 3:
Acelai enun cu specificare faptului c se dorete declararea proprietilor de stil IN-LINE, adic direct n tagul respectiv. Rezolvare: Pentru c se dorete declararea proprietilor de stil IN-LINE, atunci cnd vom scrie tag-ul <P> (cazul nostru) vom aduga i atributul STYLE = ., ntre ghilimele scriind practic aceleai proprieti cerute a fi modificate conform enunului. Deci, fiierul A.HTM se poate prezenta astfel:

16 LIMBAJUL HTML

LIMBAJUL HTML Aplicaia 4:


n cadrul fiierului B.HTM, cu ajutorul foilor de stil s se defineasc ntr-un fiier extern (numit APLICATIA 4.CSS) urmtoarele proprieti: fiierului B.HTM s aib ca fundal o poz (poza.gif), poz pe care nu o dorim a se multiplica pe fundalul paginii WEB respective. De asemenea, poza va fi poziionat central; toate legturile vor permite modificare aspectului de afiare la parcurgerea acestora cu mouse-ul (efectul HOVER): culoare - maro;dimensiune - 18pt; fundal galben; stilul de scriere verdana; nesubliniat; text expandat; textul va fi formatat astfel:bold, italic, dimensiune 16pt, text spaiat la 0.25cm; toate liniile orizontale s fie de culoare albastr, grosime 4pt. Rezolvare: Trebuie s se cunoasc tag-urile folosite pentru: plasarea unei poze pe fundalul unei pagini Web BODY realizarea legturilor A cu efectul HOVER formatrile de text fie FONT, fie P, fie B, fie I trasarea unei linii orizontale - HR Fiind vorba de un fiier extern trebuie s scriem totul n NOTEPAD i s-l salvm sub numele 4.CSS. Aadar, coninutul fiierului APLICATIA 4.CSS este: APLICATIA

Seminar Baze le tehnologiei informaiei HTML


43

Seminar: Glvan Nicolae


Fiierul B.HTM poate fi:

17 LIMBAJUL HTML

LIMBAJUL HTML Aplicaia 5:


S se foloseasc n cadrul fiierului C.HTM clase de stiluri pentru textul existent n acest fiier. Proprietile stilurilor vor fi declarate n antentul documentului pe urmtoarele clase: clasa albastru va avea fonturile de culoare albastr, bold, italic, dimensiune 16pt; clasa rou - va avea fonturile de culoare roie, dimensiune 12pt, spaiu dintre caractere de 0,25cm; clasa verde - va avea fonturile de culoare verde, bold, dimensiune 20pt, fundal galben, stil de scriere Arial. Rezolvare: Trebuie s se cunoasc tag-urile folosite pentru formatrile de text fie FONT, fie P, fie B, fie I. Se alege tagul <P>. Coninutul fiierului C.htm poate fi:

Seminar Baze le tehnologiei informaiei HTML

Seminar: Glvan Nicolae


Aplicaia 6:
S se defineasc n antetul unui document HTM foi de stil pentru elementele de legtur din cadrul tag-ului <A>, astfel: link-urile s aib aplicate urmtoarele proprieti: o culoare albastr; o nesubliniate; o spaiu dintre caractere: 0,25cm; o dimensiunea textului: 12pt. link-urile vizitate s aib aplicate urmtoarele proprieti: o culoare neagr; o nesubliniate; o spaiu dintre caractere: 0,10cm; o dimensiunea textului: 10pt. pentru efectul HOVER s se defineasc 2 clase (clasa X i clasa Y) care s aib urmtorele proprieti:

18 LIMBAJUL HTML
43

LIMBAJUL HTML
o Clasa X: culoare roie; nesubliniate; culoarea de fundal a textului: galben; spaiu dintre caractere: 0,50cm; dimensiunea textului: 14pt. Clasa Y: culoare aurie; nesubliniate; culoarea de fundal a textului: rou; spaiu dintre caractere: 0,15cm; text bold; text italic; dimensiunea textului: 16pt.

Link-urile se vor regsi n cadru unei liste ordonate cu 2 elemente. Primul element are aplicat evenimentului HOVER clasa X, iar cel de-al doilea element are aplicat clasa Y. Rezolvare:

19 LIMBAJUL HTML
43

Seminar Baze le tehnologiei informaiei HTML

Seminar: Glvan Nicolae

LIMBAJUL HTML

JavaScript
Codul surs JavaScript poate fi specificat astfel: ntr-un fiier extern cu extenia .JS; n antetul documentului, adic n interiorul tag-ului <HEAD>; n corpul documentului, adic n interiorul tag-ului <BODY>; att n antetul documentului, ct i n corpul documentului.

Aplicaia JS1:
S se scrie n JavaScript patru texte pe patru rnduri diferite, astfel: Pe primul rnd text aliniat la stnga, bold, italic i o culoare la alegere; Pe al doilea rnd text aliniat central, italic i o culoare la alegere Pe al treilea rnd text aliniat la dreapta, scris normal i o culoare la alegere Pe al patrulea rnd text aliniat la dreapta la care se aplic un efect de miscare tip Alternate pe o anumit dimensiune a zonei de aciune, cu o culoare de fundal la alegere i o culoare a textului oarecare.

Observaie:Codul JavaScript va fi specificat n corpul documentului, adic n interiorul tag-ului <BODY>. Rezolvare:

20 LIMBAJUL HTML
43

Seminar Baze le tehnologiei informaiei HTML

Seminar: Glvan Nicolae

LIMBAJUL HTML Aplicaia JS2:


S se defineasc, n antetul documentului, 2 funcii care s permit afiarea unui mesaj. Prima funcie s fie apelat la evenimentul OnClick ataat unui buton de formular, iar cea de-a doua funcie s fie apelat la evenimentul OnClick ataat tag-ului de specificare a unui paragraf.

Seminar Baze le tehnologiei informaiei HTML


43

Seminar: Glvan Nicolae


Aplicaia JS3:
S se defineasc n antetul documentului o funcie care s permit introducerea numelui dvs ntr-o fereastr de tip PROMPT, iar apoi s se afieze numele tastat ntr-un mesaj. Funcia va fi apelat la evenimentul OnClick ataat unui buton de formular.

21 LIMBAJUL HTML

LIMBAJUL HTML

Aplicaia JS4:
S se defineasc n antetul documentului o funcie care s permit introducerea numelui dvs ntr-o fereastr de tip PROMPT, iar apoi s se afieze numele tastat direct pe pagina de WEB. Funcia va fi apelat la evenimentul OnClick ataat unui buton de formular.

22 LIMBAJUL HTML
43

Seminar Baze le tehnologiei informaiei HTML

Seminar: Glvan Nicolae

LIMBAJUL HTML Aplicaia JS5:


S se defineasc ntr-un fiier extern o funcie care s permit introducerea numelui dvs ntr-o fereastr de tip PROMPT, iar apoi s se afieze numele tastat direct pe pagina de WEB. Funcia va fi apelat la evenimentul OnClick ataat unui buton de formular.

Seminar: Glvan Nicolae Seminar Baze le tehnologiei informaiei HTML


43 Aplicaia JS6:
S se defineasc n antetul documentului 2 variabile i o funcie care s cuprind alte 2 variabile prin care s se exemplifice utilizarea variabilelor globale i locale prin afiarea valoriilor acestora direct pe pagina de WEB.

23 LIMBAJUL HTML

LIMBAJUL HTML

Seminar: Glvan Nicolae Seminar Baze le tehnologiei informaiei HTML

Aplicaia JS7:
S se defineasc n antetul documentului o structur alternativ de tip IF care s analizeze media unui student tastat de dvs. ntr-o fereastr de tip PROMPT, iar n urma analizei acestei medii s se afieze direct pe pagina de web un text specific, astfel: Dac media tastat este mai mic sau egal cu 6, s se afieze textul Media este <=6; Dac media tastat este ntre 6 i 8 inclusiv, s se afieze textul Media este >6 si <=8; Dac media tastat este ntre 8 i 10 inclusiv, s se afieze textul Media este >8 si <=10; Iar dac media tastat este peste 10 s se afieze ntr-o fereastra un mesaj cu textul Nu exist medii mai mari dect 10.

24 LIMBAJUL HTML
43

LIMBAJUL HTML

Seminar: Glvan Nicolae

Aplicaia JS8:
S se defineasc n antetul documentului o structur alternativ de tip SWITCH care s analizeze partea ntreag a mediei unui student, medie tastat de dvs. ntr-o fereastr de tip PROMPT, iar n urma analizei acestei pri ntregi s se afieze direct pe pagina de web un text specific, astfel: Dac media tastat este mai mic sau egal cu 6, s se afieze textul Partea intreaga a mediei tastate este <=6; Dac media tastat este ntre 6 i 8 inclusiv, s se afieze textul Partea intreaga a mediei tastate este >6 si <=8; Dac media tastat este ntre 8 i 10 inclusiv, s se afieze textul Partea intreaga a mediei tastate este>8 si <=10; Iar dac media tastat este peste 10 s se afieze ntr-o fereastra un mesaj cu textul Nu exist medii cu partea ntrega mai mare dect 10.

25 LIMBAJUL HTML
43

Seminar Baze le tehnologiei informaiei HTML

LIMBAJUL HTML

Aplicaia JS9:

26 LIMBAJUL HTML
43

Seminar Baze le tehnologiei informaiei HTML

Seminar: Glvan Nicolae

S se defineasc n corpul documentului o structur alternativ de tip SWITCH care s analizeze luna tastat de utilizator i s o ncadreze corect n trimestrul din care face parte, prim afiarea unui text direct pe pagina de WEB sub forma Luna FEBRUARIE este n trimestrul I., n funcie de luna tastat.

LIMBAJUL HTML Aplicaia JS10:


S se defineasc n antetul documentului o funcie JavaScript care s conin o structur alternativ de tip IF ce va analiza rspunsul dat de utilizator cu privire la accesarea unei adrese WEB. Funcia va fi apelat la evenimentul OnClick ataat unui buton de formular.

27 LIMBAJUL HTML
43

Seminar Baze le tehnologiei informaiei HTML

Seminar: Glvan Nicolae

LIMBAJUL HTML Aplicaia JS11:


S se defineasc n antetul documentului o structur repetitiv de tip FOR ce va afia de cte ori s-a repetat o secvent de cod pornind de la 1 pn la 6.

28 LIMBAJUL HTML
43

Seminar Baze le tehnologiei informaiei HTML

Seminar: Glvan Nicolae

LIMBAJUL HTML Aplicaia JS12:


S se defineasc n antetul documentului o structur repetitiv de tip FOR ce va afia de cte ori s-a repetat o secvent de cod. Numrul de repetri va fi dat de diferena a dou variabile tastate de utilizator n ferestre de tip PROMPT. Structura repetitiv va fi afiat numai dac diferena este mai mare dect zero.

29 LIMBAJUL HTML
43

Seminar Baze le tehnologiei informaiei HTML

Seminar: Glvan Nicolae

LIMBAJUL HTML Aplicaia JS13:


S se defineasc n antetul documentului o structur repetitiv de tip WHILE ce va afia numrul repetrii unei secvene de cod pornind de la 1 pn la 4.

30 LIMBAJUL HTML
43

Seminar Baze le tehnologiei informaiei HTML

Seminar: Glvan Nicolae

LIMBAJUL HTML Aplicaia JS14:


S se defineasc n antetul documentului o structur repetitiv de tip WHILE ce va afia de cte ori s-a repetat o secvent de cod. Numrul de repetri va fi dat de diferena a dou variabile tastate de utilizator n ferestre de tip PROMPT. Structura repetitiv va fi afiat numai dac diferena este mai mare dect zero.

31 LIMBAJUL HTML
43

Seminar Baze le tehnologiei informaiei HTML

Seminar: Glvan Nicolae

LIMBAJUL HTML Aplicaia JS15:


S se defineasc n antetul documentului o structur repetitiv de tip DO....WHILE ce va afia numrul repetrii unei secvene de cod pornind de la 1 pn la 4.

32 LIMBAJUL HTML
43

Seminar Baze le tehnologiei informaiei HTML

Seminar: Glvan Nicolae

LIMBAJUL HTML Aplicaia JS16:


S se defineasc n antetul documentului o structur repetitiv de tip DO....WHILE ce va afia de cte ori sa repetat o secvent de cod. Numrul de repetri va fi dat de diferena a dou variabile tastate de utilizator n ferestre de tip PROMPT. Structura repetitiv va fi afiat numai dac diferena este mai mare dect zero.

33 LIMBAJUL HTML
43

Seminar Baze le tehnologiei informaiei HTML

Seminar: Glvan Nicolae

LIMBAJUL HTML Aplicaia JS17:


S se defineasc n antetul documentului o structur repetitiv de tip DO....WHILE ce va permite adugarea unui numr aleator de studenti, n funcie de rspunsul utilizatorului la ntrebarea Mai continuai adugarea unui alt student?

34 LIMBAJUL HTML
43

Seminar Baze le tehnologiei informaiei HTML

Seminar: Glvan Nicolae

LIMBAJUL HTML Aplicaia JS18:


S se defineasc 2 funcii n antetul documentului, prin care una s ne permit schimbarea culorii unui text, iar cealalt revenirea la culorile standard. Funciile vor fi apelate prin intermediul a dou legturi.

35 LIMBAJUL HTML
43

Seminar Baze le tehnologiei informaiei HTML

Seminar: Glvan Nicolae

LIMBAJUL HTML Aplicaia JS19:


S se definesc n antetul documentului o funcie ce va conine un vector format din 4 elemente (4 nume de studeni), ale crui valori dorim a le lista direct pe pagina de WEB. Numrul elementelor din vector l vom determina cu ajutorul proprietii length. Funcia va fi apelat la evenimentul OnClick ataat unui buton de formular.

Seminar: Glvan Nicolae Seminar Baze le tehnologiei informaiei HTML


43 Aplicaia JS20:
S se definesc n antetul documentului o funcie ce va conine un vector format dintr-un numr aleator de elemente (numr tastat de utilizator prin fereastr de tip PROMPT), ale crui valori dorim a le lista direct pe pagina de WEB. Numrul elementelor din vector l vom determina cu ajutorul proprietii length. Funcia va fi apelat la evenimentul OnClick ataat unui buton de formular.

36 LIMBAJUL HTML

LIMBAJUL HTML

Seminar: Glvan Nicolae Seminar Baze le tehnologiei informaiei HTML


43

Aplicaia JS21:
S se definesc n antetul documentului o funcie ce va conine un vector format din 4 elemente (4 nume de studeni), ale crui valori dorim a le lista direct pe pagina de WEB, att n ordine cresctoare, ct i n ordine descresctoare. Funcia va fi apelat la evenimentul OnClick ataat unui buton de formular. Observaie: Elementele vectorului trebuie s conin date de tip text.

37 LIMBAJUL HTML

LIMBAJUL HTML

Aplicaia JS22:
S se definesc n antetul documentului o funcie ce va conine un vector format dintr-un numr aleator de elemente (numr tastat de utilizator prin fereastr de tip PROMPT), ale crui valori dorim a le lista direct pe pagina de WEB, att n ordine cresctoare, ct i n ordine descresctoare. Funcia va fi apelat la evenimentul OnClick ataat unui buton de formular.

Seminar: Glvan Nicolae Seminar Baze le tehnologiei informaiei HTML


43

Observaie: Elementele vectorului trebuie s conin date de tip numeric.

38 LIMBAJUL HTML

LIMBAJUL HTML

Aplicaia JS22:
S se definesc n antetul documentului o funcie ce va conine un vector format dintr-un numr aleator de elemente (numr tastat de utilizator prin fereastr de tip PROMPT), ale crui valori dorim a le nsuma i lista direct pe pagina de WEB. Se va verifica dac suma valorilor vectorului este de tip numeric (utilizatorul poate introduce o valoare eronat de tip text). Dac suma este numeric se va afia suma, dac nu se va afia textul Suma nu poate fi determinat. Funcia ce conine vectorul va fi apelat prin evenimentul OnClick ataat unui buton de formular. Observaie: Elementele vectorului trebuie s conin date de tip numeric.

39 LIMBAJUL HTML
43

Seminar Baze le tehnologiei informaiei HTML

Seminar: Glvan Nicolae

40 LIMBAJUL HTML Seminar: Glvan Nicolae


LIMBAJUL HTML

43

Seminar Baze le tehnologiei informaiei HTML

LIMBAJUL HTML

MODEL SUBIECT EXAMEN - Aplicaie rezolvat


Scriei codul sursa pentru realizarea urmtoarei pagini de WEB:

Seminar: Glvan Nicolae Seminar Baze le tehnologiei informaiei HTML


43

Observaie. Coninutul existent n partea din stnga, partea centrala i partea de jos apare numai dup ce ai executat click pe textul aici situat n partea de sus. Rezolvare: Fiierul de creare al frame-urilor (Frame.htm) conine urmtorul cod surs:

Observaie. Frame-urile din stnga nu au nici o surs, deoarece acestea vor fi completate numai dup ce execut click stnga pe textul aici din fiierul surs SUS.htm. Fiierul SUS.htm conine urmtorul cod surs:

41 LIMBAJUL HTML

LIMBAJUL HTML

Seminar: Glvan Nicolae Seminar Baze le tehnologiei informaiei HTML


43

Observaie. Atributul TARGET din cadrul tag-ului <A href = > ..</A> are ca obiectiv afiarea conexiunii n frame-ul cu numele precizat n TARGET i nu n cadrul aceluiai frame (vezi ce nume am dat frame-urilor (name) n fiierul FRAME.htm i localizeaz locul cadranului n care este precizat <A href= ..>..</A> ce conine atributul TARGET fiierul Sus.htm este ca surs pentr cadranul din partea de sus.). Fiierul STNGA.HTM (vezi SUS.HTM este precizast aici ca referina (href)) curpinde:

42 LIMBAJUL HTML

LIMBAJUL HTML
Fiierul Central.HTM (vezi SUS.HTM este precizast aici ca referina (href)) curpinde:

Seminar Baze le tehnologiei informaiei HTML


43

Seminar: Glvan Nicolae


Fiierul Jos.HTM (vezi SUS.HTM este precizast aici ca referina (href)) curpinde:

43 LIMBAJUL HTML

You might also like