Documente Academic
Documente Profesional
Documente Cultură
INFORMAŢIE ŞI
COMUNICARE
LIMBAJUL HTML
Competenţe de evaluat
Conţinuturi
2
M7 Informaţie şi comunicare. Limbajul HTML prof. Ilioasa Adriana
HTML este un limbaj destinat descrierii statice a paginilor web. Putem asemăna procesul de creare a unui
hypertext, a unei pagini web, cu operaţiile de formatare făcute asupra unui document obişnuit, 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 fişier text care, pe lângă textul propriu-zis ce va apărea în pagină, conţine şi o
serie de elemente speciale, denumite etichete, sau marcaje (tags, în limba engleză).
Un document HTML contine taguri (marcaje).
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 apărea 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 (conţinutul paginii web)
<HTML>
<HEAD>
<TITLE></TITLE>
</HEAD>
3
M7 Informaţie şi comunicare. Limbajul HTML prof. Ilioasa Adriana
<BODY>
</BODY>
</HTML>
Exerciţiul 1:
<HTML>
<HEAD>
<TITLE>Exerciţiu pagina Web!</TITLE>
</HEAD>
<BODY>
Prima mea pagina web
</BODY>
</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 schimbările. Dupa ce
ai salvat, intră în browserul de web şi click Refresh.
Exerciţiul 2
Schimbaţi titlul paginii cu Lectia1.html şi textul din body enumerând paşii necesari creării unei pagini web
OBSERVAŢII
1) Ceea ce ai realizat se numeşte 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 apărea în bara de titlu a ferestrei browserului.
Exerciţiul 3
Răspundeţi în caietele de notiţe la următoarele întrebări:
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) conţinutul paginii?
5. Care este modalitatea de salvare a unui document HTML?
6. Cum modificaţi un document html existent?
4
M7 Informaţie şi comunicare. Limbajul HTML prof. Ilioasa Adriana
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>
5
M7 Informaţie şi comunicare. Limbajul HTML prof. Ilioasa Adriana
Pentru a stabili culorile într-o pagină Web se folosesc atributele etichetei <BODY> după următoarea 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 strânsă legătură cu mesajul transmis de aceasta şi să
permită citirea cu uşurinţă a informaţiilor prezentate. Pentru a evita afişarea 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>, căruia î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>
2. Culoarea textului
Pentru a seta culoarea textului din întreaga pagină se foloseşte atributul text al etichetei <BODY>, conform
sintaxei:
<BODY text="#RGB sau nume_culoare">
6
M7 Informaţie şi comunicare. Limbajul HTML prof. Ilioasa Adriana
Dacă am stabilit o culoare pentru textul din pagină şi dorim să utilizăm o altă culoare pentru o anumită
secţiune 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 cărui culoare dorim să o modificăm. 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>
3. Culoarea legăturilor
În general legăturile (links) dintr-o pagină Web au culori prestabilite (default), astfel:
• blue (albastru) - pentru legături
• red (roşu) - pentru legătura activa (cea pe care este fixat cursorul mouse-ului, cu butonul stâng apăsat)
• purple (violet) - pentru legăturile vizitate, cele pe care s-a efectuat cel puţin un click
Pentru a schimba culorile prestabilite se folosesc următoarele atribute ale etichetei <BODY>:
link pentru legături
alink pentru legăturile active
vlink pentru legăturile 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 legăturile au culoarea verde,
legăturile active culoarea albastru şi cele vizitate, culoarea roşu. În exemplu este folosită eticheta <A> şi
atributul sau href, care vor fi prezentate pe larg în capitolul despre legături. Î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
M7 Informaţie şi comunicare. Limbajul HTML prof. Ilioasa Adriana
<HR>
<A href="culori1.html">Legatura catre primul exemplu</A>
</BODY>
</HTML>
Vizualizaţi 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 conţinutul uşor de citit. Aceasta înseamnă...aţi ghicit! Litere
negre pe fond alb.
Deşi în vestimentaţie combinaţia de roşu cu bleumarin este rafinată, într-o pagină Web literele roşii pe
fond albastru nu arată bine şi sunt greu de citit. O altă combinaţie nefericită este cea cu fondul negru sau de
culoare foarte închisă şi textul de culoare albă.
Să nu uităm nici faptul că toate monitoarele dispun de reglaje ale strălucirii luminoase şi ale
contrastului pe care utilizatorii le setează diferit, în funcţie de preferinţele personale, de toleranţa ochiului, de
iluminarea camerei, etc.
Pe un monitor cu reglaje medii ale contrastului şi strălucirii, un text de culoare roşie dispus pe un fundal negru
va fi ilizibil, chiar dacă la valori maxime ale acestor caracteristici combinaţia poate genera efecte interesante.
În alegerea culorilor pentru un site este bine să ţineţi seama de câteva elemente de psihologia culorilor, pentru
a sublinia astfel mesajul pe care vreţi să îl transmiteţi.
Alegerea culorilor pentru site trebuie să fie în concordanţă cu tema site-ului şi să sublinieze mesajul
său. Astfel, dacă doriţi să construiţi un site destinat copiilor veţi folosi culori vesele şi luminoase, în vreme ce
pentru un site destinat prezentării unei firme de consultanţă financiară sunt potrivite culori sobre şi care
sugerează seriozitate şi încredere.
Alegerea culorilor pentru legături este, de asemenea, importantă. Legăturile au, în mod prestabilit,
anumite culori. Schimbarea acestora, deşi posibilă, îl poate induce în eroare pe vizitator. Ca şi în cazul textului,
alegeţi pentru legături, legăturile vizitate şi legătura activă culori care să vină în contrast cu culoarea sau
imaginea de fundal a paginii. Rămâneţi consecvent culorilor alese pentru legături, pe parcursul întregului site.
Sistemul general utilizat pentru definirea culorilor este RGB prin care sunt specificate pentru fiecare
culoare care sunt cantităţile de roşu (Red), verde (Green) şi albastru (Blue) care o compun.
8
M7 Informaţie şi comunicare. Limbajul HTML prof. Ilioasa Adriana
În HTML orice culoare este desemnată printr-un cod de 6 cifre hexazecimale, dintre care primele două
reprezintă cantitatea de roşu, cele două din mijloc, cantitatea de verde, iar ultimele două cantitatea de
albastru.
Sistemul hexazecimal este un sistem de numeraţie care foloseşte 16 cifre, existând următoarea
corespondenţă între cifrele hexazecimale şi cele zecimale:
Sistem zecimal 0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15
Sistem hexazecimal 0 1 2 3 4 5 6 7 8 9 A B C D E F
Aplicaţie practică
1. Introduceţi 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>
9
M7 Informaţie şi comunicare. Limbajul HTML prof. Ilioasa Adriana
Unde:
- numãr 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 construcţia RGB
- font poate fi un font generic ca “serif”, “cursive” sau un font instalat pe calculator ca «Times Roman»,
«Arial».
2. Poziţionarea conţinutului paginii Web faţă de marginile ferestrei browserului se face cu ajutorul a două
atribute ale etichetei <body>:
Leftmargin – distanţa dintre marginea din stanga a conţinutului paginii
Topmargin – distanţa dintre marginea de sus a ferestrei browserului şi marginea de sus a conţinutului paginii
Aplicaţie practică 1
Scrieţi codul sursă în Notepad, salvaţi fişierul cu numele aplicatie1.html, pe Desktop şi vizualizaţi pagina
obţinută.
<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:
4. Delimitarea paragrafelor
- se realizeaza cu ajutorul etichetei <p>, eticheta de sfarsit </p> fiind optionala.
<p align=valori>…</p>
10
M7 Informaţie şi comunicare. Limbajul HTML prof. Ilioasa Adriana
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>
Aplicaţie practică 2
Realizaţi o pagină web care să conţină 5 elevi din clasa voastră. Pagina trebuie să aibă următorul aspect:
Aplicaţie practică 3
Completaţi spaţiile libere în caietele de notiţe:
2. Atributele textului :
a) mărime
b) culoare
c) font
11
M7 Informaţie şi comunicare. Limbajul HTML prof. Ilioasa Adriana
12
M7 Informaţie şi comunicare. Limbajul HTML prof. Ilioasa Adriana
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ă încadrând intrările 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 definiţii se realizează cu ajutorul etichetelor pereche <dl> si </dl> între care vor fi
încadrate intrările în listă. În acest caz, o intrare în listă este constituită din două părţi:
Un termen <dt> definition term
O definiţie <dd> definition description
Exemplul 3
<dl>
<dt>liste ordonate
<dd>elementele listei trebuie parcurse în
ordinea numerotãrii
<p>
<dt>liste neordonate
13
M7 Informaţie şi comunicare. Limbajul HTML prof. Ilioasa Adriana
Aplicaţie practică 1
Realizaţi un document HTML care să conţină o listă cu 5 elevi ai clasei voastre (ca în exemplul 2)
Aplicaţie practică 2
Realizaţi un document HTML care să conţină o lecţie de informatică cu titlul INTERNETUL şi în care să se
găsească definiţiile următoarelor noţiuni:
HTML
pagina Web
machetare
14
M7 Informaţie şi comunicare. Limbajul HTML prof. Ilioasa Adriana
Exemplu:
Aplicaţie practică:
15
M7 Informaţie şi comunicare. Limbajul HTML prof. Ilioasa Adriana
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)
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 expert’s 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
M7 Informaţie şi comunicare. Limbajul HTML prof. Ilioasa Adriana
Aplicaţie practică
17
M7 Informaţie şi comunicare. Limbajul HTML prof. Ilioasa Adriana
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
M7 Informaţie şi comunicare. Limbajul HTML prof. Ilioasa Adriana
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
Aplicaţie practică:
Pornind de la exemplele cu cadre exersate, realizaţi 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 premianţi din fiecare an şcolar: clasa, numele şi prenumele, premiul obţinut.
Salvaţi pagina web în locul indicat de profesor.
exemplu:
Clasa/an scolar Premiul obţinut Numele elevului
Clasa a IX-a Premiul I
Premiul II
Premiul III
Menţiune
Clasa a X-a Premiul I
Premiul II
Premiul III
Menţiune
Clasa a XI-a Premiul I
Premiul II
Premiul III
Menţiune
19