Curs M7 HTML

MODULUL 7 INFORMAIE I COMUNICARE LIMBAJUL HTML
prof. Adriana Ilioasa
M7 Informaie i comunicare. Limbajul HTML
prof. Ilioasa Adriana
Competene de evaluat
1. 2. 3. 4. 5. 6. 7. Utilizarea operaiilor de baz necesare realizrii unei pagini HTML Folosirea elementelor de baz pentru inserarea n pagin a elementelor: text, imagine Aplicarea operaiilor de baz necesare pentru realizarea unei pagini copiere, mutare, tergere Enumerarea i aplicarea modalitilor de a realiza o hiper-legtur Utilizarea tabelelor ntr-o pagin web Realizarea unor aplicaii practice Transformarea documentelor text obinuite sau a prezentrilor PPT n pagini web
Coninuturi
1. Lansarea editorului HTML 2. Interfaa editorului 3. Inserarea i formatarea unui text: corp de liter, mrime, stil, culoare obinerea culorii legtura cu aplicaia Paint (Edit colors) i cu aplicaia Calculator (Dec-Hex) 4. Inserarea unei imagini modificarea proprietilor imaginii: poziionare, dimensiuni, ncadrare n text 5. Formatarea unui fundal sau a unei teme 6. Folosirea instrumentelor Copiere, Decupare, Lipire pentru a copia text, imagine 7. Realizarea unei legturi pe un text 8. Realizarea unei legturi pe o imagine 9. Maparea unei imagini 10. Inserarea unui tabel 11. Formatarea tabelului 12. Modaliti de depozitare a paginilor 13. Aplicaii practice
Lecia 1 Elementele standard ale unui document HTML

HTML (HyperText Markup Language = Limbaj de Marcare a HyperTextului), reprezint un ansamblu de marcaje (tag-uri) cu semnificaie precis, prin a cror folosire se obine un hypertext. HTML este un limbaj destinat descrierii statice a paginilor web. Putem asemna procesul de creare a unui hypertext, a unei pagini web, cu operaiile de formatare fcute asupra unui document obinuit, creat cu un editor de text evoluat; tag-urile au rolul pe care-l au butoanele sau punctele de meniu din editorul de texte. Un tag HTML are forma general: <TAG>...</TAG> Un document HTML este un fiier text care, pe lng textul propriu-zis ce va aprea n pagin, conine i o serie de elemente speciale, denumite etichete, sau marcaje (tags, n limba englez). Un document HTML contine taguri (marcaje). a) taguri de tip pereche exemplu: <html></html> b) taguri singulare exemplu: <br> Pas 1: se deschide NotePad: Start/All Programs/Accesories/Notepad i se bifeaz opiunea Format/WordWrap Pas2: nceputul unui document HTML <HTML> </HTML> Fiecare dintre acestea sunt numite tag-uri. Exist un tag pentru nceput i un tag pentru final (ncheiere). Pentru a face un tag final, doar adaug / la tagul de nceput. Majoritatea, dar nu toate tagurile au un tag final. Ceea ce tocmai i-ai spus pana acum browserului: acesta este nceputul unui document HTML (<HTML>) i acesta este sfritul unui document HTML (</HTML). Acum trebuie s punem ceva ntre tag-urile de nceput i de sfrit. Pas 3: zona de antet: perechea de tag-uri de tip : HEAD (reprezint antetul paginii web) <HTML> <HEAD> </HEAD> </HTML> Pas 4: titlul paginii: perechea de tag-uri de tip TITLE ( reprezint titlul care va aprea pe bara de titlu a ferestrei Internet Explorer). <HTML> <HEAD> <TITLE></TITLE> </HEAD> </HTML> Pas 5: corpul paginii perechea de tag-uri de tip BODY (coninutul paginii web) <HTML> <HEAD> <TITLE></TITLE> </HEAD>
3
<BODY> </BODY> </HTML> Exerciiul 1: <HTML> <HEAD> <TITLE>Exerciiu pagina Web!</TITLE> </HEAD> <BODY> Prima mea pagina web </BODY> </HTML> Pas 6: Salvarea ca fiier HTML: - File/Save As, alegei directorul n care salvai (directorul cu numele elevului) Cmpul Save in - n cmpul File name scriei numele documentului (exercitiul 1.html) cu extensia .html sau .htm iar n cmpul Save as type alegei All files(*.*) Pas 7: deschiderea fisierului html: dublu click pe el pentru a-l deschide sau deschide un browser de web, apoi click File / Open / Browse, selecteaz fiierul exerciiul1.html Pas 8: modificarea paginii web: Clic dreapta n pagina web, View Source Dup fiecare modificare pe care o vei face, nu uita s salvezi, pentru c altfel nu vei observa schimbrile. Dupa ce ai salvat, intr n browserul de web i click Refresh. Exerciiul 2 Schimbai titlul paginii cu Lectia1.html i textul din body enumernd paii necesari crerii unei pagini web OBSERVAII 1) Ceea ce ai realizat se numete scheletul unui document HTML; orice document HTML are nevoie de aceste tag-uri de baz. 2) Ceea ce ai scris ntre tag-urile <TITLE>...</TITLE> va aprea n bara de titlu a ferestrei browserului. Exerciiul 3 Rspundei n caietele de notie la urmtoarele ntrebri: 2. Ce este limbajul HTML? 3. Ce sunt tag-urile? 4. Care este perechea de tag-uri pentru: a) document HTML b) antet c) titlu d) coninutul paginii? 5. Care este modalitatea de salvare a unui document HTML? 6. Cum modificai un document html existent?
Lecia 2 Aplicaii practice

Aplicaie practic
1. Introducei codul surs din cele dou exemple i observai paginile web rezultate. Ce observai? Care este diferena ntre cele dou exemple? EXEMPLUL 1 <html> <head> <title> Colegiul Tehnic Anghel Saligny Baia Mare </title> </head> <body> Istoric Stiri Profesori Elevi Proiecte Forum </body> </html> EXEMPLUL 2 <html> <head> <title> Colegiul Tehnic Anghel Saligny Baia Mare </title> </head> <body> Istoric<br> Stiri<br> Profesori<br> Elevi<br> Proiecte<br> Forum </body> </html> 2. Completai spaiile libere n caietele de notie: Etapele realizrii unei pagini web sunt: 1. editarea ........utilizand: a) ....................b)....................... 2. salvarea......... cu extensia:.............. 3. rezolvarea referinelor ................... 4. vizualizarea paginii web cu ajutorul unui browser (Internet Explorer sau...) O pagin HTML standard este format din: 1. bloc extern..................... 2. 3 blocuri incluse: antetul paginii:................ titlul paginii:................... corpul paginii:................ 3. trecerea la un rnd nou: ................
5
Lecia 3 Utilizarea culorilor n HTML

Culorile ntr-un document HTML sunt definite cu ajutorul codului RGB care exprim n sistem hexazecimal cantitatea de rou, verde i albastru prezent n fiecare culoare. atributele etichetei <BODY> sunt: bgcolor - culoarea fundalului text - culoarea textului link - culoarea linkurilor vlink - culoarea linkurilor vizitate alink - culoarea linkului activ Pentru a stabili culorile ntr-o pagin Web se folosesc atributele etichetei <BODY> dup urmtoarea sintax: <BODY bgcolor="#RGB sau nume_culoare" text="#RGB sau nume_culoare" link="#RGB sau nume_culoare" alink="#RGB sau nume_culoare" vlink="#RGB sau nume_culoare">corpul documentului</BODY> Alegerea culorilor pentru o pagin Web trebuie s fie n strns legtur cu mesajul transmis de aceasta i s permit citirea cu uurin a informaiilor prezentate. Pentru a evita afiarea defectuoas a culorilor din pagin este recomandat folosirea culorilor "sigure". 1. Culoarea fundalului Pentru a stabili culoarea fundalului unei pagini folosim atributul bgcolor (background color) al etichetei <BODY>, cruia i atribuim o valoare astfel: <BODY bgcolor="#RGB sau nume_culoare"> Se poate folosi drept valoare pentru atributul bgcolor fie codul hexazecimal al culorii fie numele ei. Iat un exemplu de pagin cu fundal verde: Exemplul 3. 1 <HTML> <HEAD> <TITLE>culori1</TITLE> </HEAD> <BODY bgcolor="#00FF00"> <H1 align="center">Pagina cu fundal verde</H1><HR> </BODY> </HTML> Vizualizai aspectul paginii folosind Internet Explorer. 2. Culoarea textului Pentru a seta culoarea textului din ntreaga pagin se folosete atributul text al etichetei <BODY>, conform sintaxei: <BODY text="#RGB sau nume_culoare">
Dac am stabilit o culoare pentru textul din pagin i dorim s utilizm o alt culoare pentru o anumit seciune a textului (culoarea unui bloc de text), vom folosi eticheta <FONT>. Aceasta este o etichet container care cuprinde ntre etichetele de nceput i de final textul a crui culoare dorim s o modificm. Stabilirea culorii se face folosind atributul color al etichetei conform sintaxei: <FONT color="#RGB sau nume_culoare">Text</FONT> Exemplul 3. 2 <HTML> <HEAD> <TITLE>culori2</TITLE> </HEAD> <BODY bgcolor="#FFFFFF" text="#0000FF"> <H1 align="center">Text albastru si rosu</H1> <HR> Textul din aceasta pagina este albastru cu mici <FONT color="#FF0000"> exceptii</FONT> </BODY> </HTML> Vizualizai aspectul paginii folosind Internet Explorer. 3. Culoarea legturilor n general legturile (links) dintr-o pagin Web au culori prestabilite (default), astfel: blue (albastru) - pentru legturi red (rou) - pentru legtura activa (cea pe care este fixat cursorul mouse-ului, cu butonul stng apsat) purple (violet) - pentru legturile vizitate, cele pe care s-a efectuat cel puin un click Pentru a schimba culorile prestabilite se folosesc urmtoarele atribute ale etichetei <BODY>: link pentru legturi alink pentru legturile active vlink pentru legturile vizitate conform sintaxei: <BODY link="#RGB sau nume_culoare" alink="#RGB sau nume_culoare" vlink="#RGB sau nume_culoare"> Documentul din Exemplul 3.3 creeaz o pagin n care textul este negru iar legturile au culoarea verde, legturile active culoarea albastru i cele vizitate, culoarea rou. n exemplu este folosit eticheta <A> i atributul sau href, care vor fi prezentate pe larg n capitolul despre legturi. n acest moment singurul lucru care ne intereseaz este cum putem stabili culorile acestora. Exemplul 3. 3 <HTML> <HEAD> <TITLE>culori3</TITLE> </HEAD> <BODY bgcolor="#FFFFFF" text="#000000" link="#00FF00" alink="#0000FF" vlink="#FF0000"> <H1 align="center">Legaturi colorate</H1>
7
<HR> <A href="culori1.html">Legatura catre primul exemplu</A> </BODY> </HTML> Vizualizai aspectul paginii folosind Internet Explorer. 4. Alegerea culorilor Sunt multe elemente care trebuie luate n considerare la alegerea culorilor pentru o pagin Web. Primul i cel mai important este acela de a face coninutul uor de citit. Aceasta nseamn...ai ghicit! Litere negre pe fond alb. Dei n vestimentaie combinaia de rou cu bleumarin este rafinat, ntr-o pagin Web literele roii pe fond albastru nu arat bine i sunt greu de citit. O alt combinaie nefericit este cea cu fondul negru sau de culoare foarte nchis i textul de culoare alb. S nu uitm nici faptul c toate monitoarele dispun de reglaje ale strlucirii luminoase i ale contrastului pe care utilizatorii le seteaz diferit, n funcie de preferinele personale, de tolerana ochiului, de iluminarea camerei, etc. Pe un monitor cu reglaje medii ale contrastului i strlucirii, un text de culoare roie dispus pe un fundal negru va fi ilizibil, chiar dac la valori maxime ale acestor caracteristici combinaia poate genera efecte interesante. n alegerea culorilor pentru un site este bine s inei seama de cteva elemente de psihologia culorilor, pentru a sublinia astfel mesajul pe care vrei s l transmitei. Iat cteva dintre sentimentele pe care le sugereaz culorile: Rou - agresivitate, pasiune, putere, vitalitate Roz - feminitate, inocen, moliciune Portocaliu - amuzament, veselie, cldur, exuberan Galben - sentimente pozitive i cordialitate Verde - linite, sntate, prospeime Albastru - autoritate, demnitate, securitate, ncredere Violet - sofisticare, spiritualitate, mister Maro - utilitate, legtura cu pmntul, bogie Alb - puritate, ncredere, modernitate, rafinament Gri - sobrietate, autoritate, sim practic Negru - seriozitate, distincie, hotrre
Alegerea culorilor pentru site trebuie s fie n concordan cu tema site-ului i s sublinieze mesajul su. Astfel, dac dorii s construii un site destinat copiilor vei folosi culori vesele i luminoase, n vreme ce pentru un site destinat prezentrii unei firme de consultan financiar sunt potrivite culori sobre i care sugereaz seriozitate i ncredere. Alegerea culorilor pentru legturi este, de asemenea, important. Legturile au, n mod prestabilit, anumite culori. Schimbarea acestora, dei posibil, l poate induce n eroare pe vizitator. Ca i n cazul textului, alegei pentru legturi, legturile vizitate i legtura activ culori care s vin n contrast cu culoarea sau imaginea de fundal a paginii. Rmnei consecvent culorilor alese pentru legturi, pe parcursul ntregului site.
Sistemul general utilizat pentru definirea culorilor este RGB prin care sunt specificate pentru fiecare culoare care sunt cantitile de rou (Red), verde (Green) i albastru (Blue) care o compun.
n HTML orice culoare este desemnat printr-un cod de 6 cifre hexazecimale, dintre care primele dou reprezint cantitatea de rou, cele dou din mijloc, cantitatea de verde, iar ultimele dou cantitatea de albastru. Sistemul hexazecimal este un sistem de numeraie care folosete 16 cifre, existnd urmtoarea coresponden ntre cifrele hexazecimale i cele zecimale: Sistem zecimal Sistem hexazecimal 0 0 1 1 2 2 3 3 4 4 5 5 6 6 7 7 8 8 9 9 10 A 11 B 12 C 13 D 14 E 15 F
Aplicaie practic
1. Introducei codul surs de mai jos pentru a observa pagina web rezultat. <html> <head> <title> Colegiul Tehnic Anghel Saligny Baia Mare </title> </head> <body bgcolor=silver text=blue> Istoric<br> <font style=times roman size=3 color=ff0000> Stiri<br> <font size=3 color="green"> Profesori<br> <font size=5> Elevi<br> Proiecte<br> Forum <br> <font color="red"> SUCCES MAI DEPARTE! </body> </html> 2. Deschidei Notepad (Start/Allprograms/Accessories/Notepad). Scriei codul surs pentru o pagina web care s conin: titlul paginii: Prima pagina web coninut: culoarea de fundal: albastru Numele si prenumele vostru (culoare negru, marimea 5) Data nasterii (culoare rosie, marimea 4) Zodia (culoarea verde,marimea 3) Hobby-uri (culoarea galben, marimea 2) Datele s fie scrise fiecare pe rnd nou; Salvai fiierul pe Desktop cu numele index.htm , alegei la optiunea Save as type All Files; Deschidei fiierul index.htm. Ce observai?
Lecia 4 Formatarea textului

1. Textul afiat este caracterizat de urmtoarele atribute: a) mrime (size) b) culoare (color) c) font (style) Eticheta singular <basefont> se definete astfel: <basefont size=numr color=culoare style=font> Unde: - numr poate fi 1, 2, 3, 4, 5, 6, 7 (1 fontul cel mai mic, 7 fontul cel mai mare) - culoare este o culoare precizat prin nume sau construcia RGB - font poate fi un font generic ca serif, cursive sau un font instalat pe calculator ca Times Roman, Arial. 2. Poziionarea coninutului paginii Web fa de marginile ferestrei browserului se face cu ajutorul a dou atribute ale etichetei <body>: Leftmargin distana dintre marginea din stanga a coninutului paginii Topmargin distana dintre marginea de sus a ferestrei browserului i marginea de sus a coninutului paginii
Aplicaie practic 1
Scriei codul surs n Notepad, salvai fiierul cu numele aplicatie1.html, pe Desktop i vizualizai pagina obinut. <html> <head> <title>exemplu</title> </head> <body bgcolor="silver" text="blue"> Pagina are fondul de culoare gri i textul de culoare albastra<br> <font style="TimesRoman" size=3 color="ff0000">Textul este scris cu fontul "Times Roman", marimea 3, culoarea rosie<br> <font size=3 color="green">Textul este scris cu fontul implicit, marimea 3, culoarea verde<br> <font size=5>Textul este scris cu fontul implicit, marimea 5, culoarea implicita<br> Succes mai departe ! </body> 3. Formatarea paragrafelor: 1. <i> textul este scris cursiv </i> 2. <u> textul este scris subliniat </u> 3. <b> textul este scris ingrosat </b> 4. Delimitarea paragrafelor - se realizeaza cu ajutorul etichetei <p>, eticheta de sfarsit </p> fiind optionala. <p align=valori></p>
10
unde valori este definit astfel: left textul este aliniat la marginea din stanga right textul este aliniat la marginea din dreapta center textul este centrat justify textul este aliniat si la dreapta si la stanga Exemplu: Pt alinierea paragrafului la stanga: <p align=left></p> 5. Gruparea paragrafelor Pentru a stabili acelasi mod de aliniere pentru mai multe paragrafe, trebuie sa le grupam intr-un singur bloc, cu ajutorul etichetei <div> <div align="right"> <p>.....primul paragraf... <p>....al doilea paragraf... <p>... al treilea paragraf... </div>
Aplicaie practic 2
Realizai o pagin web care s conin 5 elevi din clasa voastr. Pagina trebuie s aib urmtorul aspect: Titlul paginii: Catalog
Clasa 12 (dimensiune 4, culoare rosie, centrat)

Diriginte: prof. (dimensiune 3, verde, aliniat la dreapta)
Nume Prenume 1 (albastru, dimensiune 2, aliniament la stanga) Nume Prenume 2 Nume Prenume 3 Nume Prenume 4 Nume Prenume 5 Culoare de fundal: gri Numele fisierului: nume_elev.html Salvai pe Desktop
Aplicaie practic 3
Completai spaiile libere n caietele de notie: 1. Precizarea culorilorntr-o pagin web se realizeaz: a) prin nume de culoare.................. b) prin construcia RGB #rrggbb.. 2. Atributele textului : a) mrime b) culoare c) font
11
eticheta singular basefont este definit astfel : <basefont size= numar color=culoare style=font> unde: numar reprezint................. culoare reprezint................. font reprezint...................... 3. Poziionarea coninutului paginii web Leftmargin aliniaz ................ Topmargin aliniaz..................
12
Lectia 5 Inserarea listelor n documente HTML
1. Liste neordonate (unordered list) sunt ncadrate de etichetele <ul> si </ul>. Fiecare intrare n list este precedat de eticheta <li> Exemplul 1 <ul> <li>nivel1 <li>nivel2 <li>nivel3 </ul> sau <ul> <li>nivel1 (implicit disc) <ul> <li>nivel2 (implicit circle) <ul> <li>nivel3 (implicit square) </ul> <li>nivel2 </ul> <li>nivel1 </ul> 2. Liste ordonate (ordered list) se realizeaz ncadrnd intrrile din list ntre etichetele pereche <ol> si </ol> Exemplul 2 elevii clasei a XI-B <ol> <li> Abel Andreea <li> Aman Alexandru <li> .... </ol>
3. Crearea unei liste de definiii se realizeaz cu ajutorul etichetelor pereche <dl> si </dl> ntre care vor fi ncadrate intrrile n list. n acest caz, o intrare n list este constituit din dou pri: Un termen <dt> definition term O definiie <dd> definition description Exemplul 3 <dl> <dt>liste ordonate <dd>elementele listei trebuie parcurse n ordinea numerotrii <p> <dt>liste neordonate
13
<dd>elementele listei nu trebuie parcurse n ordine <p> <dt>liste de definiii <dd>elementele listei au dou pri: un termen i descrierea sa </dl>
Aplicaie practic 1
Realizai un document HTML care s conin o list cu 5 elevi ai clasei voastre (ca n exemplul 2)
Aplicaie practic 2
Realizai un document HTML care s conin o lecie de informatic cu titlul INTERNETUL i n care s se gseasc definiiile urmtoarelor noiuni: HTML pagina Web machetare
14
Lectia 6 Inserarea tabelelor

Inserarea unui tabel se realizeaz cu ajutorul elementului table. Elementul table admite atributele: summary = text (specific o descriere a rolului i structurii tabelului) align = left/center/right (specific modul de aliniere a tabelului n document) width = valoare (specific limea ntregului tabel) height = valoare (specific nlimea tabelului) border = valoare (specific grosimea liniei chenarului din jurul tabelului) cellspacing=valoare (specific spaiul dintre celule i spaiul dintre celule i marginile tabelului) cellpading = valoare (specific spaiul dintre chenarul celulei i coninutul ei) Specificarea unei linii din tabel se face folosind eticheta <tr> Specificarea celulelor care constituie antetul tabelului se realizeaz prin intermediul etichetei <th> Pentru celulele care vor conine informaiile din tabel se utilizeaz eticheta <td>. Exemplu: <table width="200px" border="1" cellspacing="0" cellpadding="0"> <tr> <td>luni</td> <td>marti</td> </tr> <tr> <td>fizica</td> <td>logica</td> </tr> </table>
Aplicaie practic:
Creai o pagin web care s conin un tabel cu orarul clasei voastre.
15
Lecia 7 Inserarea legturilor n documente HTML

Limbajul HTML contine multimple elemente prin intermediul carora se poate crea o legatura catre resurse web: .img creaza o legatura catre o imagine .link specifica legaturi catre resurse utile; poate fi montat numai in sectiunea head .a creeaza o legatura catre un program executabil pe calculatorul utilizatorului .applet creaza o legatura catre un program executabil pe calculatorul utilizatorului Elementul a Textul cuprins intre <a> si </a> va aparea evidentiat (colorat, subliniat) in fereastra browserului , in functie de valorile atributelor sau in functie de valorile de configurare a browserului. Atribute: .href=URL (adresa sursei la care se face legatura) .name=sir de caractere (asociaza un nume ancorei curente, astfel incat sa poata constitui tinta unui alt link) .title = sir de caractere (asociaza un nume resursei la care se face legatura) Informatii suplimentare in <a href=mmm.htm> Regulament de organizare</a> Opiniile despre aceasta carte pot fi expediate aici: <a href=mailto:adriana_ilioasa@yahoo.com>Mesaj catre autor</a> Elementul img Img nu admite eticheta la sfarsit, prin urmare nu are continut. Atribute: .src=URL (specifica adresa fisierului care contine imagine; cele mai utilizate formate de fisiere grafice sunt GIF(graphic interchange format) si JPEG (joint photographic experts group) Sursa SRC nu specifica numai ce imagine se foloseste ci specifica si unde este imaginea, in ce director. Sursa folosita, "chef.gif", inseamna ca browserul va cauta imaginea numita chef.gif in acelasi director unde se gaseste si documentul html. .alt=text (semnifica un text alternativ care va fi afisat de browser cele care nu se pot vizualiza imagini) .height=dimensiune(defineste inaltimea imaginii) .width=dimensiune(defineste latimea imaginii) .aligh=valoare (specifica modul de aliniere a imaginii in raport cu textul. Valoarea poate fi: top-partea de sus a imaginii este aliniata cu textul middle- imaginea este aliniata centrat in raport cu textul bottom partea de jos a imaginii este aliniata in raport cu textul left imaginea este aliniata la marginea din stanga a paginii right imaginea este aliniata la marginea din dreapta a paginii border- numar pixeli (imaginea va fi incadrata de un chenar cu grosimea specificata in numar de pixeli hspace- dimensiune (specifica spatiul inserat in stanga si in dreapta imaginii) vspace- dimensiune (specifica spatiul inserat in partea de sus si partea de jos a imaginii) Exemplu: <html> <head> <title>o poz</title> </head> <body> <img src="globuri.jpg" height=135 width=135
16
align=middle alt="ilustrat de la mare"> <i>hai la mare!</i> </body> </html>
Aplicaie practic
Realizai o pagina web care s conin urmtoarele elemente: 1. titlul paginii web: concurs; 2. titlul documentului: Rezultatele concursului de informatic, culoarea titlului scris cu rou; 3. culoarea textului din pagina web: albastru nchis; 3. o imagine cu elevii participani la concurs, pe care o vei salva pe Desktop cu numele poza.jpg; 4. un tabel care s conin elevii participani, punctajul obinut i premiul acordat; 5. fundalul paginii: gri deschis; 6. salvai pagina web n locul indicat de profesor.
17
Lecia 8 Cadre (Frame)

Cu ajutorul cadrelor pot fi dispuse mai multe pagini web n aceeai fereastr a browserului. Fiecare document HTML care genereaz o pagina web reprezint un cadru; cadrele sunt independente unele fa de altele.
<frameset> definete modul de mprire a ferestrei n cadre. Un cadru poate fi vertical sau orizontal. Atribute: cols definete cadre verticale - are ca valoare un procent care arat ct din suprafaa total ocup coloanele rows definete cadre orizontale are ca valoare un procent care arat ct din suprafaa total ocup rndurile; daca sunt mai multe rnduri, procentele se despart prin virgul. <frame> definete documentul HTML care trebuie alocat fiecrui cadru. Exemplul 1.html <html> <head> <title>Cadre</title> </head> <frameset cols=25%,75%> <frame src=frame_a.html> <frame src=frame_b.html> </frameset> </html> unde: frame_a.html este un fisier html care are continutul Cadrul A frame_b.html este un fisier html care are continutul Cadrul B
18
Exemplul 2.html <html> <head> <title>Cadre</title> </head> <frameset rows=50%,50%> <frame src=frame_a.html> <frameset cols=25%,75%> <frame src=frame_b.html> <frame src=frame_c.html> </frameset> </html> unde: frame_a.html este un fisier html care are continutul Cadrul A frame_b.html este un fisier html care are continutul Cadrul B frame_c.html este un fisier html care are continutul Cadrul C
Aplicaie practic:
Pornind de la exemplele cu cadre exersate, realizai o pagin web care s aib urmatoarea structur: n cadrul A o fotografie cu elevii clasei voastre; n cadrul B numele clasei, numele profesorului diriginte i numele elevilor, sub form de list; n cadrul C un tabel cu elevii premiani din fiecare an colar: clasa, numele i prenumele, premiul obinut. Salvai pagina web n locul indicat de profesor. exemplu: Clasa/an scolar Clasa a IX-a
Clasa a X-a
Clasa a XI-a
Premiul obinut Premiul I Premiul II Premiul III Meniune Premiul I Premiul II Premiul III Meniune Premiul I Premiul II Premiul III Meniune
Numele elevului
19

Curs M7 HTML

Încărcat de

Informații document

Titlu original

Drepturi de autor

Formate disponibile

Partajați acest document

Partajați sau inserați document

Opțiuni de partajare

Vi se pare util acest document?

Este necorespunzător acest conținut?

Drepturi de autor:

Formate disponibile

Curs M7 HTML

Încărcat de

Drepturi de autor:

Formate disponibile

MODULUL 7 INFORMAIE I COMUNICARE LIMBAJUL HTML

prof. Adriana Ilioasa

M7 Informaie i comunicare. Limbajul HTML

prof. Ilioasa Adriana

M7 Informaie i comunicare. Limbajul HTML

prof. Ilioasa Adriana

Lecia 1 Elementele standard ale unui document HTML

M7 Informaie i comunicare. Limbajul HTML

prof. Ilioasa Adriana

M7 Informaie i comunicare. Limbajul HTML

prof. Ilioasa Adriana

Lecia 2 Aplicaii practice

M7 Informaie i comunicare. Limbajul HTML

prof. Ilioasa Adriana

Lecia 3 Utilizarea culorilor n HTML

M7 Informaie i comunicare. Limbajul HTML

prof. Ilioasa Adriana

M7 Informaie i comunicare. Limbajul HTML

prof. Ilioasa Adriana

M7 Informaie i comunicare. Limbajul HTML

prof. Ilioasa Adriana

M7 Informaie i comunicare. Limbajul HTML

prof. Ilioasa Adriana

Lecia 4 Formatarea textului

M7 Informaie i comunicare. Limbajul HTML

prof. Ilioasa Adriana

Clasa 12 (dimensiune 4, culoare rosie, centrat)

M7 Informaie i comunicare. Limbajul HTML

prof. Ilioasa Adriana

M7 Informaie i comunicare. Limbajul HTML

prof. Ilioasa Adriana

Lectia 5 Inserarea listelor n documente HTML

M7 Informaie i comunicare. Limbajul HTML

prof. Ilioasa Adriana

M7 Informaie i comunicare. Limbajul HTML

prof. Ilioasa Adriana

Lectia 6 Inserarea tabelelor

M7 Informaie i comunicare. Limbajul HTML

prof. Ilioasa Adriana

Lecia 7 Inserarea legturilor n documente HTML

M7 Informaie i comunicare. Limbajul HTML

prof. Ilioasa Adriana

align=middle alt="ilustrat de la mare"> <i>hai la mare!</i> </body> </html>

M7 Informaie i comunicare. Limbajul HTML

prof. Ilioasa Adriana

Lecia 8 Cadre (Frame)

M7 Informaie i comunicare. Limbajul HTML

prof. Ilioasa Adriana

S-ar putea să vă placă și