Lectii HTML PDF

Cuprins
Lecția 1-Introducere în HTML .............................................................................. 2
Lecția 2- Formatarea textului ................................................................................ 5
Lecția 3- Introducerea imaginilor .......................................................................... 6
Lecția 4- Introducerea hyperlinkurilor .................................................................. 7
Lecția 5- Utilizarea listelor .................................................................................... 8
Lecția 6- Introducerea tabelelor ............................................................................ 9
Lecția 7- Descrierea frameurilor ......................................................................... 10
Lecția 8- Maparea imaginilor .............................................................................. 12

LECȚIA 1-Introducere în HTML
Limbajul HTML (Hypertext Markup Language) este limbajul de descriere a paginilor web.
Aproape tot ceea ce putem obține într-un editor de texte cu ajutorul butoanelor sau comenzilor
din meniuri, se poate realiza și într-o pagină web, scriind de la tastatură anumite comenzi,
numite taguri, care produc efectul dorit.
Un document html se poate introduce cu ajutorul editorului Notepad și trebuie salvat cu
extensia html și nu txt cum pune implicit Notepad.
Structura unui document html este:
<html>
<head>
……………..
antetul documentului-conține informații care nu se vor afișa: titlul paginii-care
va apărea sus, în bara de titlu; cuvinte cheie care permit regăsirea paginii web
de către motoarele de căutare; informații despre autor
………
</head>
<body>
…………………. corpul documentului- tot ceea ce apare aici se va afișa
</body>
</html>
De exemplu, codul html de mai jos va produce în browser următorul efect:

<html>
<head> <title> pagina 1</title>
</head>
<body>
Primavara
</body>
</html>
Se observă că tagurile sunt în pereche, pentru a indica de unde și până unde trebuie să
acționeze. Nu avem posibilitatea de a selecta un text și apoi să-i aplicăm o anumită formatare,
ca în editoarele de texte.
Există și taguri singulare:

<br> are ca efect coborârea cu un rând
<hr> trasează o linie orizontală
Opțiuni ale tagului body:
bgcolor=” culoare” - culoarea de fundal a paginii (implicit este albă)
Text=” culoare ” - culoarea textului (implicit este negru)
background=”nume fișier imagine” –pagina va avea o imagine de fundal
<body bgcolor="#00FF00" text="yellow"> <body background="bk1.jpg" text="yellow">
In HTML culorile pot fi introduse în două moduri:

- prin denumirea lor în limba engleză (pentru un număr redus de culori)
- în format hexazecimal folosind două caractere (începând de la 00 la FF) pentru fiecare din
cele trei culori roșu (R), verde (G) și albastru (B) . Pentru culori, în format zecimal, valoarea
minimă este 0 (corespunzătoare valorii 00 în hexa) iar cea maximă 255 (corespunzătoare
valorii FF în hexa).
Exemplu:
Să presupunem că am ales o culoare folosind aplicația Paint din Windows care ne indică
R=111, G=52, B=200. Format Format Format
Folosind calculatorul științific din Windows zecimal hexazecimal HTML
Rezultat
transformăm aceste valori din format zecimal și
R=111 R=6F
obținem R=6F, G=34 si B=C8.
Formatul final recunoscut de HTML este G=52 G=34 #6F34C8
#6F34C8 (caracterul # conținut la început este B=200 B=C8
obligatoriu).
Codul RGB (Red Green Blue) este format din 6 cifre hexazecimale (0,
1,…A,B,C,D,E,F) , primele două indică cât roșu, următoarele două cât
verde și ultimele două cât albastru.
Alb are codul FFFFFF, negru are 000000, gri are 777777, mov are
FF00FF, șamd.
Cu ajutorul Paint putem afla componența RGB, cu Calculator putem
converti în hexazecimal.
Numele și codurile culorilor se pot găsi pe Internet făcând căutare după
RGB.
Exercițiul 1:
Realizați o pagină cu titlul ex1, care va avea fundal verde închis, identic cu nuanța din
imaginea cu bule, descris cu ajutorul codului RGB. Introduceți textul a patru versuri dintr-o
poezie de primăvară, scis cu auriu. Trasați la sfârșit o linie.
Indicații:
 copiați imaginea din lecție în Paint, notați în caiet valorile pentru Red, Green, Blue
 cu accesoriul Calculator convertiți în hexa valorile; adăugați un 0 în față dacă e cazul,

pentru a avea câte 2 cifre pentru fiecare componentă (RRGGBB)
 notați în caiet codul obținut din alipirea celor 3 valori de câte 2 cifre
 deschideți Notepad
 scieți codul html necesar pentru descrierea paginii, folosind exemplele din lecție
 salvați documentul din Notepad cu Salvare ca…
 vizualizați pagina în browser, dând dublu clic pe numele ei

 modificați pagina cu clic dreapta Deschidere cu… Notepad
LECȚIA 2- Formatarea textului
Dacă dorim ca anumite porțiuni din textul afișat să apară cu altă formatare încadrăm textul
respectiv cu perechi de taguri care determină afișarea lui în modul dorit.
Exemplu: Dorim centrarea și îngroșarea cuvântului Primavara
<CENTER> <B> Primavara </B> </CENTER>
Pentru culoare, dimensiune sau stilul fontului avem tagul:
<FONT COLOR=”GOLD” SIZE=”7” FACE=”VERDANA”> ………….</FONT>
Size poate lua valori între 1-7
Pentru scriere cursivă (italic) se folosește <I> …. </I>
Ce marcaj folosim pentru a sublinia un text?
Pentru titluri putem apela la tag-urile <H1>, <H2>, <H3>, <H4>, <H5>, <H6>, care au și
perechi de închidere.
Alinierea textului:
<p align=right>
<p align=justify> …..samd
Exercițiul 2:
Realizați o pagină , care va avea o imgine de fundal specifică verii.
Afișați cuvântul Vara, centrat, îngroșat, dimensiune maximă.
Introduceți textul a 4 versuri dintr-o poezie de vară, scis înclinat, cu font și culoare diferită.
Adăugați distanță între rânduri, aliniere paragraf, astfel încât textul să fie vizibil.
Lecția 3- Introducerea imaginilor
Tipurile de imagini care sunt suportate în pagina web sunt jpg, gif, png, bmp.
Dacă imaginile de tip gif au animație, aceasta va fi redată în browser.
<img src=”nume fisier imagine” width=” …..” height=”…..”>
Fișierul de imagine trebuie salvat în aceșași folder cu fișierul html.
Tagul marquee- permite derularea unui text sau imagini pe direcție orizontală sau verticală,
cu diverse opțiuni (lungime, lățime, repetiție)
<marquee width=”…” direction=” ….” loop=”…” behavior=”…”> ….text …</ marquee>
Slide, alternate
900, 500 , 60% left,right, up, down 1, 2, 3…. infinite
<marquee height=”30%” > <img src=”nume fisier imagine” > </marquee>
Exercițiul 3:
Realizați pagina toamna.html, având în centru o imagine de dimensiune 300 x 400 iar sub ea,
4 versuri care se deplasează de jos în sus de 3 ori.
Exercițiul 4:
Realizați pagina iarna.html, având ca fundal ninsoare animată, în centru 2 imagini de
dimensiuni mici care conțin animații de Crăciun, cu 10 rânduri mai jost textul **** care se
deplasează alternativ, pe orizontală.
Lecția 4- Introducerea hyperlinkurilor
Hyperlinkurile permit înlănțuirea paginilor web. Pot pleca de pe text sau de pe imagine. Ne
pot trimite la altă pagină web, la adrese de internet, la adrese mail, sau la fișiere oareare din
calculator.
<a href=”vara.html”> clic aici pentru …. </a> link de pe text
<a href=”nume fisier”> <img src=”nume fisier imagine”> </a> link de pe imagine
<a href="http://www.inmh.ro" > mai multe informatii despre vreme </a> link spre www
<a href="mailto: rodica@yahoo.com" > sau alte impresii </a> link spre mail
Exercițiul 5:
Creați o pagină principală care să conțină linkuri spre cele 4 fișiere create în lecțiile
precedente, un link spre o pagină meteo, un link spre o adresă de mail (va pleca de pe o
imagine sugestivă), un link spre o imagine creată de voi în Paint.
Lecția 5- Utilizarea listelor
Listele sunt enumerări de idei care au la început un simbol , o cifră sau literă.
Lista ordonată, are litere sau cifre la începutul paragrafelor.

<ol TYPE ="a">
<li>LUNI
<li>MARTI
<li>MIERCURI
<li>JOI
</OL>
Lista neordonată, are marcatori la începutul paragrafelor.

<ul type=”circle”>
<li>13.30-romana
<li> 14.30 informatica
<li>15.30 ed. fizica
<li>16.30 geografie
</ul>
Putem avea și liste îmbricate:
Exercițiul 6:
Introduceți orarul vostru într-o pagină html, urmând modelul de mai sus.
Lecția 6- Introducerea tabelelor
Spre deosebire de automatismul cu care se pot introduce și modifica tabelele Word, în html
trebuie descrisă fiecare căsuță în parte:
Exercițiul 7:
 Introduceți tabelul cu căsuțe unite pe coloana 2, folosind o imagine de fundal în loc de
culoarea roșie.
 Introduceți orarul vostru într-o pagină html, sub formă de tabel, înlocuind unele
marterii cu imagini sugestive.
Lecția 7- Descrierea frameurilor
Frameurile sau cadrele sunt zone de ecran în care se încarcă pagini html diferite.
Dimensiunile fiecărei zone se exprimă în pixeli sau în procent( %) din dimensiunile ecranului.
Paginile html care descriu frame-uri nu au tagul body.
Ecranul de mai sus se descrie

considerând că avem un set de
2 rânduri, unul de 200 pixeli
lățime și celălalt de cât rămâne
din lățimea totală (semnul *).
Primul rând este un set de 2
coloane, egale (50%, *). În
prima coloană de pe primul
rând se va încărca pagina
p1.html, în a doua se va
încărca pagina alb.html. Zona
2 are numele p2. Acesta va fi
folosit mai departe când
încărcăm altceva în această zonă.
Inițial zona 2,
3, 4, 5 încarcă
aceeași pagină,
alb.html. Codul
care determină
ca în fiecare
zonă să se
încarce ulterior
alte pagini este
scris în p1.html :
Exercițiul 8:
1.Introduceți în Notepad următorul cod html, pentru a obține un ecran împărțit în 3 cadre.
Înlocuiți p1, p2, p3 cu numele unor pagini html create de voi.
<html>
<frameset rows="100,*">
<frame src="p1.html" >
<frameset cols="30%,*">
</frameset>
</frameset>
</html>
Exercițiul 9
Creați următoarea structură:
Lecția 8- Maparea imaginilor
Maparea unei imagini permite ca zone diferite ale aceleiași imagini să funcționeze cu linkuri
spre pagini diferite. Zonele pot avea formă de cerc, dreptunghi sau poligon.
Exercițiul 10: Miniproiect - Utilizarea hărților de imagini în HTML
PAS 1: Se creează un folder pentru această lucrare, cu numele maparea.

PAS 2: Se descarcă o imagine cu harta Romaniei (dimensiune aprox=700x500) și se
deschide cu Paint
Se prelucrează puțin imaginea (se uniformizează culorile, se înlătură textul și fundalul din
exteriorul conturului. Se poate folosi harta viticolă.
320,90
164,124
400,150
50
Se notează în caiet coordonatele următoarelor puncte (perechea de valori din bara de stare
de la Paint) :
centrul Moldovei
centrul Dobrogei
colțurile opuse ale unui dreptunghi care acoperă Muntenia
Se salvează imaginea în folderul creat anterior, cu numele hartarom și tipul jpg
PAS 3: Cu Notepad se editează un fișier html care va folosi harta creată în Paint.
<html><head><title>harta viticola a Romaniei</head></title>

<body bgcolor="green" text="white"> în spațiile punctate
se completează
<center><font size="4">HARTA VITICOLA A ROMÂNIEI</font> valorile din caiet
Selectati zona care va intereseaza:<br> (50 reprezintă raza
cercului)
<img src="hartarom.jpg" usemap="#harta"></center>
<map name="harta">
<area shape="circle" coords="..., ... ,50" href ="moldova.docx">
<area shape="rect" coords="... , ... , ... , ... " href ="muntenia.docx">
<area shape="circle" coords="... , ... ,50" href ="dobrogea.docx">
</map></body></html>
Se salvează cu numele harta.html, în acelașii loc cu fișierul hartarom.jpg
PAS 4 : Se creează câte un fișier Word pentru fiecare zonă (Moldova, Muntenia, Dobrogea)
vezi modelul de mai jos. Se salveaza cu numele Moldova, Muntenia respectiv Dobrogea in
acelasi loc cu celelalte fisiere de la Pas2, Pas3.
Aceste 3 fișiere sunt necesare pentru a putea proba cele 3 linkuri descrise pe hartă.
La Cotnari, mostenirea este fara seaman. Prin mestesugul

vinului, vechi de peste doua mii de ani, traditia, arta si
voia buna stralucesc, din nou, laolalta. Transmitem
patrimoniul pastrat de secole: o reala mostenire a
indeletnicirii vinului, a locuitorilor de pe aceste
meleaguri, a traditiilor si a evolutiei, probabil cel mai bine
pastrate din Romania din domeniul vini-viticol.
PAS 5 : Se dă clic pe fișierul harta.html și se probează

linkurile obținute.

Lectii HTML PDF

Î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

Lectii HTML PDF

Încărcat de

Drepturi de autor:

Formate disponibile

Cuprins

Lecția 1-Introducere în HTML .............................................................................. 2

Lecția 2- Formatarea textului ................................................................................ 5

Lecția 3- Introducerea imaginilor .......................................................................... 6

Lecția 4- Introducerea hyperlinkurilor .................................................................. 7

Lecția 5- Utilizarea listelor .................................................................................... 8

Lecția 6- Introducerea tabelelor ............................................................................ 9

Lecția 7- Descrierea frameurilor ......................................................................... 10

Lecția 8- Maparea imaginilor .............................................................................. 12

De exemplu, codul html de mai jos va produce în browser următorul efect:

Există și taguri singulare:

<body bgcolor="#00FF00" text="yellow"> <body background="bk1.jpg" text="yellow">

In HTML culorile pot fi introduse în două moduri:

 cu accesoriul Calculator convertiți în hexa valorile; adăugați un 0 în față dacă e cazul,

 vizualizați pagina în browser, dând dublu clic pe numele ei

900, 500 , 60% left,right, up, down 1, 2, 3…. infinite

<marquee height=”30%” > <img src=”nume fisier imagine” > </marquee>

Lista ordonată, are litere sau cifre la începutul paragrafelor.

Lista neordonată, are marcatori la începutul paragrafelor.

Ecranul de mai sus se descrie

PAS 1: Se creează un folder pentru această lucrare, cu numele maparea.

<html><head><title>harta viticola a Romaniei</head></title>

La Cotnari, mostenirea este fara seaman. Prin mestesugul

PAS 5 : Se dă clic pe fișierul harta.html și se probează

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