Proiectare și dezvoltare web, clasa a IX-a

Limbajul de marcare HTML.

Elementele HTML
 Ce vom studia astăzi?
Cognitive: Să definească HTML și rolul său în crearea paginilor web.
• Să identifice și să descrie elementele de bază HTML (etichete, atribute).
• Să înțeleagă structura unui document HTML valid.
• Să explice modul în care atributele modifică comportamentul elementelor
HTML.
Practice: Să creeze un document HTML simplu, utilizând elemente și atribute de
bază.
• Să vizualizeze documentul creat într-un browser web.
• Să modifice atributele elementelor pentru a observa schimbările în aspectul
paginii.
Atitudinale: Să dezvolte interesul față de programarea web și tehnologiile
HTML.
• Să colaboreze în cadrul activităților practice.
Medităm...

Ce este o pagină web?

Cum credeți că sunt create?
 Ce este HTML?
HTML este o abreviere de la Hypertext Markup Language şi reprezintă structura
oricărei pagini de Web. HTML nu este un limbaj de programare. Nu veţi lucra aici cu
variabile, expresii, tipuri de date, structuri de control. HTML este un limbaj descriptiv,
prin care sunt descries elementele structurale ale paginii de Web: titlurile, listele,
tabelele, paragrafele, legăturile cu alte pagini, precum şi aspectul pe care îl are pagina
din punct de vedere grafic. În fond, HTML este modul în care îi comunicam browserului
ce elemente dorim să introducem în pagina Web şi care este aspectul acestora.
HTML nu este un limbaj case-sensitive, adică nu face distincţia între literele mici şi cele
mari(majuscule). Aceasta înseamnă că indiferent cum scriem etichetele, cu litere mari
sau cu litere mici, ele vor fi corect interpretate de browser. Din acest motiv pe parcursul
acestei lucrări vom utiliza o convenţie de notaţie în care etichetele (tag-urile) HTML
sunt scrise cu majuscule iar atributele asociate acestora sunt scrise cu litere mici pentru
o mai bună diferenţiere şi evidenţiere a acestora.
 Noțiunile de „etichetă” și „atribute”
În HTML (HyperText Markup Language), etichetele (tags) și atributele sunt elemente fundamentale care
definesc structura și conținutul unei pagini web.
Etichete (Tags):
• Ce sunt: Etichetele sunt cuvinte cheie încadrate între paranteze unghiulare (< și >). Ele marchează
începutul și sfârșitul unui element HTML. De exemplu, eticheta <p> marchează începutul unui
paragraf, iar eticheta </p>marchează sfârșitul acestuia.
• Rol: Etichetele indică browserului web cum să interpreteze și să afișeze conținutul unei pagini. Ele
definesc elemente precum titluri, paragrafe, imagini, linkuri, liste și multe altele. Fiecare etichetă are un
rol specific în structura paginii.
• Tipuri:
• Etichete pereche: Majoritatea etichetelor HTML sunt pereche, având o etichetă de deschidere și
una de închidere. Eticheta de închidere se diferențiază de cea de deschidere printr-o bară oblică (/)
înaintea numelui etichetei. De exemplu: <p>Acesta este un paragraf.</p>
• Etichete nepereche: Unele etichete nu necesită o etichetă de închidere. De
exemplu, eticheta <br> (line break) introduce un sfârșit de linie.
 Noțiunile de „etichetă” și „atribute”
Atribute:
• Ce sunt: Atributele sunt proprietăți suplimentare care pot fi adăugate etichetelor pentru
a le oferi informații suplimentare despre modul în care ar trebui să fie afișate sau să se
comporte. Atributele sunt plasate în interiorul etichetei de deschidere și au
forma nume_atribut="valoare".
• Rol: Atributele permit personalizarea elementelor HTML. De exemplu, atributul src al
etichetei <img> specifică locația unei imagini, iar atributul href al
etichetei <a> specifică adresa URL a unui link.
• Exemple:
• <a href="https://www.exemplu.com">Vizitează
exemplul</a> (atributul href specifică adresa linkului)
• <img src="imagine.jpg" alt="O imagine frumoasă"> (atributele src și alt specifică
locația imaginii și textul alternativ)
Elementele de bază (taguri):
Elemente pentru liste
Elemente pentru formatarea caracterelor
Elemente pentru cadre
Elemente pentru tabele
Elemente pentru adăugarea imaginilor
Elemente pentru formulare
Elemente avansate
Caractere speciale românești
Structura unui document Web
 Compilator online

https://www.w3schools.com/html/tryit.asp?filen
ame=tryhtml_default
 Exemplul 1:

<HTML>
<HEAD>
<TITLE>Pagina mea Web</TITLE>14
</HEAD>
<BODY>
Salut Cneazule! Aici voi pune mai tarziu continutul! </BODY>
</HTML>
Rezultatul obținut:
 Exemplul 2:

<HTML>
<HEAD>
<TITLE>Pagina mea Web</TITLE>
</HEAD>
<BODY>
Salut Cneazule! Aici voi pune mai tarziu continutul!
<BR>Urmatoarea va fi cu mult mai cool.
</BODY>
</HTML>
Rezultatul obținut:
 Exemplul 3
<!DOCTYPE html>
<html>
<head>
<title>Prima mea pagină web </title>
</head>
<body>
<h1>Acesta este un titlu</h1>
<p>Acesta este un paragraf.</p>
</body> </html>
Rezultatul obținut:
Exersează independent:
Rezultatul final: