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 WEBStructura general a unui fiier cu extensia HTM sau HTML este:

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

Seminar Baze le tehnologiei informaiei HTML 143

Tag-uri cu efect asupra ntregii pagini web - 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 HTMLAtributul BGCOLOR stabilete culoarea de fundal a paginii Web (Ex: - culoarea de fundal va fi albastr sau (formatul de culoare este RRGGBB rou, verde, albastru) sau sau (formatul hexazecimal)) Atributul TEXT permite stabilirea culorii implicite de scriere pe ntreaga pagin Web (Ex: 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: - legturile vor avea culoarea verde) Atributul Vlink permite stabilirea culorii unei legturi vizitate (Ex: 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: - 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: Dac dorim ca pe o pagin Web s avem ca fundal o poz, atunci n locul atributului BGCOLOR din cadrul tag-ului vom folosii atributul BACKGROUND urmnd a specifica adresa pozei respective (Ex:

Tag-uri pentru formatarea caracterelor i aranjarea textului - permite scrierea caracterelor ngroat (bold) - permite scrierea caracterelor nclinat (italic) - permite scrierea caracterelor subliniat (underline) - permite alinierea pe centru a textului pe pagin permite alinierea la stnga/dreapta/centru a unui paragraf pe o pagin Web, ntrerupnd linia curent i scriind textul pe o nou linie
- ntrerupe linia curent i trece textul sau imaginea pe urmtoarea linie Observaie. este echivalentul lui

(de dou ori
). - plaseaz o linie orizontal n document. Atributul SIZE definete grosimea liniei orizontale (Ex: linia va avea o grosime de aproximativ 1 mm) Atributul COLOR permite colorarea liniei orizontale (Ex: - 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: - linia orizontal o s ocupe numai 45% din suprafaa paginii web) Atributul ALIGN permite specificarea modului de aliniere a liniei respective (stnga/dreapta/centru) - 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: textul va fi scris cu albastru. Observaie: Acest parametru are prioritate fa de acelai atribut din tag-ul . Aadar, dac se stabilete o culoarea a textului pe ntreaga pagin Web pe rou - - i doresc s scriu un cuvnt cu albastru, atunci voi folosi tag-ul naintea cuvntului pe care doresc s-l scriu cu albastru. Acest fapt este posibil deoarece tag-ul are prioritate fa de tag-ul . 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: scrie la o dimensiune a caracterelor de 8pt) Atributul FACE permite specificarea stilului de scriere (Ex: - scrie pe stilul Arial)Seminar Baze le tehnologiei informaiei HTML 243Seminar: Glvan NicolaeLIMBAJUL HTMLLIMBAJUL HTML - permite scrierea unor cuvinte la putere (Ex: 950 are ca efect - 950) - permite scrierea unor cuvinte ca indice (Ex: Xi are ca efect Xi) - permite scrierea unui text monospaiat (Ex: Este cel mai bine - permite scrierea pe un anumit stil aunei adrese potale, a unui telefonTag-uri pentru includerea unei imagini n cadrul paginii Web - acest tagAtributul SRC este folosit pentru specificarea adresei (sursei) imaginii pe care dorim a o plasa pe pagina Web (Ex: - 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: - 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: - 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: - poza va avea o lungime pe orizontal de aproximativ 10 cm)Seminar: Glvan NicolaeAtributul ALIGN permite alinierea imaginii respective n src=c:\student\poza.gif align = left> - poza va fi aliniat la stnga)cadrulpaginiiWeb(Ex:Caset de tip multilinie: . - 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 HTMLLIMBAJUL HTMLAtributul Cols permite precizarea numrului de caractere de pe coloan (un caracter = o coloan). Ex: Tastai mesajul dvs.Observaie. Verificai numrul liniilor precizate cu Rows i numrul caracterelor pe coloan precizate cu Cols. Caset de tip list derulant ComboBox: Elementul 1 Elementul 2 Elementul 3 Elementul 4 Elementul 5 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 HTMLSeminar: Glvan NicolaeCaset de tip list derulant cu selectie multipl: Elementul 1 Elementul 2 Elementul 3 Elementul 4 Elementul 5 Atributul SIZE permite specificarea numrului de opiuni vizibile n cadrul listei respective.843LIMBAJUL HTMLLIMBAJUL HTMLEx: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 tabelelorTag-urile pentru realizarea tabelelor se vor scrie ntre tag-ul .. . 3Exemplu de imagine reactiva p i 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 l i Seminar: Glvan Nicolae Dup cum se observ, pentru nceput a fost necesar crearea hrii pozei de pe pagina de WEB. Pentru aceasta s-a folosit tag-ul . Tag-ul 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 , 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 HTML43Seminar Baze le tehnologiei informaiei HTMLLIMBAJUL HTMLFoi de stilFoile de stil se pot defini n trei feluri: n fiiere externe (extensie .CSS) n antentul unui fiier cu extensia htm sau html ( .. ) in-line, adic n cadrul tag-ului respectivAplicaia 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.2cmRezolvare: Trebuie s se cunoasc tag-urile folosite pentru formatarea caracterelor sau textului. Acestea sunt: , , , , etc. Se alege tag-ul asupra cruia se vor preciza aceste proprieti de stil. Alegem tag-ul , atunci n fiierul cu extensia CSS (scris n NOTEPAD i salvat cu extensia CSS Aplicatia 1.CSS) - vom scrie:Seminar Baze le tehnologiei informaiei HTML43Seminar: Glvan NicolaeOBSERVAIE: 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 , acesta trebuie precizat n fiierul A.HTM la modul obinuit, proprietile stabilite n fiierul extern se vor aplica ntregului text existent ntre .. Drept urmare, coninutul fiierului A.HTM poate fi:14 LIMBAJUL HTMLLIMBAJUL HTMLTag folosit pentru a stabili legatura cu fiierul extern Aplicatia 1.CSSExecuia fiierului A.HTM este urmtoarea:Seminar Baze le tehnologiei informaiei HTML43Seminar: Glvan NicolaeAplicaia 2:Acelai enun cu specificare faptului c se dorete declararea proprietilor de stil n antetul documentului html, adic n . 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 , ntre 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 HTMLLIMBAJUL HTMLSeminar: Glvan Nicolae Seminar Baze le tehnologiei informaiei HTML43Aplicaia 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 (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 HTMLLIMBAJUL 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: APLICATIASeminar Baze le tehnologiei informaiei HTML43Seminar: Glvan NicolaeFiierul B.HTM poate fi:17 LIMBAJUL HTMLLIMBAJUL 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 . Coninutul fiierului C.htm poate fi:Seminar Baze le tehnologiei informaiei HTMLSeminar: Glvan NicolaeAplicaia 6:S se defineasc n antetul unui document HTM foi de stil pentru elementele de legtur din cadrul tag-ului , 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 HTML43LIMBAJUL HTMLo 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.oLink-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 HTML43Seminar Baze le tehnologiei informaiei HTMLSeminar: Glvan NicolaeLIMBAJUL HTMLJavaScriptCodul surs JavaScript poate fi specificat astfel: ntr-un fiier extern cu extenia .JS; n antetul documentului, adic n interiorul tag-ului ; n corpul documentului, adic n interiorul tag-ului ; 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 . Rezolvare:20 LIMBAJUL HTML43Seminar Baze le tehnologiei informaiei HTMLSeminar: Glvan NicolaeLIMBAJUL 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 HTML43Seminar: Glvan NicolaeAplicaia 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 HTMLLIMBAJUL HTMLAplicaia 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 HTML43Seminar Baze le tehnologiei informaiei HTMLSeminar: Glvan NicolaeLIMBAJUL 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 HTML43 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 HTMLLIMBAJUL HTMLSeminar: Glvan Nicolae Seminar Baze le tehnologiei informaiei HTMLAplicaia 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 si 8 si