l1 Introducere in HTML - Structura Standard A Unui Document HTML

Lecția 1: Introducere în HTML prof.
Timb Edina Katalin
Introducere în HTML
Despre limbajul HTML

HTML a fost creat pentru prima dată de Tim Berners-Lee, Robert Cailliau și alții începând din 1989.
Hypertext înseamnă că documentul conține legături ce permite realizarea saltului în diferite zone din document
sau către un alt document. Cea mai recentă versiune este cunoscută sub numele HTML5.
HTML(HyperText Markup Language) este un limbaj de marcare utilizat pentru crearea paginilor web ce
pot fi afișate într-un browser. Scopul HTML este mai degrabă prezentarea informațiilor – paragrafe, fonturi,
tabele, ș. a. m. d. – decât descrierea semanticii documentului.
Paginile HTML:
 au extensia ”html” sau ”htm”,
 conțin etichete(marcaje) sau tag-uri.
Documentele HTML sunt documente text, deci pot fi interpretate de orice platformă(IBM, Macintosh
sau UNIX) și pot fi scrise folosind programe obișnuite de editare a textului(Notepad, Notepad++, Editorul
Sublime Text 3 de pe site-ul https://www.sublimetext.com/, etc.).
Fiind un limbaj de marcare, HTML folosește etichete și atribute. În marea lor majoritate etichetele sunt
pereche: una de deschidere <eticheta> și alta de închidere </eticheta>. Totuși sunt și cazuri când ele nu se
închid. Diferența dintre etichetă și atribut este următoarea: eticheta este folosită pentru a marca începutul unui
element HTML, iar atributul este informația suplimentară a unei etichete care poate avea anumite valori:
<eticheta atribut=”valoare”> … </eticheta>
HTML este un limbaj care nu face deosebire între litere majuscule și minuscule.
Pagina principală a unui domeniu este fișierul ”index.html”. Această pagină este setată a fi afișată
automat la vizitarea unui domeniu. De exemplu la vizitarea domeniului www.nume.ro este afișată pagina
www.nume.ro/index.html.
Regula de aur în scrierea unui document HTML este: dacă sunt utilizate mai multe etichete, ele trebuie
închise în ordinea în care au fost deschise. Exemplu de mai jos folosește marcajul p(paragraf) pentru a tipări
textul ”Numele meu este Popescu Maria”, dar numele este evidențiat folosind marcajele strong(îngroșat) și
em(înclinat).
Numele meu este: Popescu Maria
Rezultatul în browser a codului HTML va fi:
Structura standard a unui document HTML

declaraţii <!DOCTYPE html>
<html> <html>
<head>...</head> <head>
<title>TITLUL DOCUMENTULUI</title>
</head>
<body>...</body> <body>
Lecția 1: Introducere în HTML prof. Timb Edina Katalin
CORPUL DOCUMENTULUI
</body>
</html> </html>
 Declaraţia DOCTYPE indică browserului versiunea HTML în care este scris documentul, setul de elemente
şi atribute care pot fi folosite şi reguli privind structura documentului. În exemplul din tabel, versiunea este
HTML5.
 Marcajul <html> indică faptul că de aici înainte vom scrie în cod HTML.
 În marcajul <head> sunt specificate toate metadatele paginii - lucruri destinate mai ales motoarelor de
căutare și alte programe de calculator.
 Marcajul <body> va cuprinde întregul conținut al unei pagini web. Acesta trebuie să fie al doilea element
din interiorul elementului <html> părinte, primul fiind elementul <head>.
 Revenind la marcajul <head> un singur marcaj este obligatoriu: <title> … </title>, dar pot fi și alte. Iată un
bloc standard pentru conținutul elementului <head>:
<head>
<title>My First Webpage</title>
<meta charset="UTF-8">
<meta name="author" content="Popescu Maria">
<meta name="description" content="Acest câmp conține informații despre
această pagină. De obicei conține maxim două paragrafe.">
</head>
 Aplicaţie practică
Creaţi directorul principal HTML și un sub-folder cu numele Lecția 1.
Observații:
Toate documentele din această lecție se vor salva în directorul indicat!
În toate codurile sursă HTML pe care le veți scrie, în <head>, marcajul <meta> la content veți scrie
numele vostru!
1. Creaţi prima pagină în format HTML standard, parcurgând pașii:
a. deschideţi utilitarul Notepad sau Notepad++
b. scrieţi codul de mai jos:
c. salvaţi documentul cu numele L1_exe1.html, în folderul creat anterior(atenție la extensie, selectați

All Files (*.*) dacă lucrați în Notepad, Encoding: UTF-8)
d. reveniţi în directorul Lecția 1 şi daţi dublu-click pe documentul html creat , pentru

a-l vizualiza într-un browser; pagina va arăta astfel:
Observație: În orice moment puteți adăuga/modifica conținutul paginii, doar dând click dreapta pe fișierul html,
Edit with Notepad++ sau Open with → Notepad.
Formatarea de bază a unui text
Trecerea pe o linie nouă de text se face folosind marcajul (break line). Pentru interpretarea
corectă a unor caractere ca „spaţiu”, „tab” sau trecerea pe un rând nou, textul trebuie inclus într-un bloc
<pre>...</pre> (preformatted).
Pentru inserarea comentariilor în documentele HTML, folosiţi sintaxa 
2. Creaţi al doilea document în care veți folosi marcajul , cu numele L1_exe2.html. Codul sursă este:
3. Creaţi documentul L1_exe3.html, în care veți utiliza marcajele <pre> și comentariile. Codul HTML este:
Stabilirea culorii(text şi fundal) în pagina Web

Culorile în pagina Web sunt utilizate la nivelul textului, fundalul paginii sau la nivelul ilustraţiilor. Pentru
culoarea de fundal al unei pagini folosim atributul bgcolor, iar pentru text folosim atributul text. Ambele
atribute apar în marcajul <body>, astfel:
<body bgcolor=”culoare” text=”culoare”>
unde culoare poate fii: aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, silver, red,
teal, white, yellow.
4. Creaţi documentul L1_exe4.html, în care sunt folosite atributele elementului body: bgcolor și text. Codul
HTML arată astfel:
Setarea marginilor paginii Web

Pentru a poziţiona conţinutul paginii Web în raport cu marginile ferestrei browserului, se folosesc atributele
leftmargin şi topmargin ale elementului <body>. Valorile celor două atribute pot fi exprimate în pixeli sau în
procente din lăţimea, respectiv înălţimea ferestrei browserului.
5. Creaţi documentul cu numele L1_exe5.html. Codul HTML arată astfel:
6. Creaţi o pagină web, cu numele orar.html, în care veţi folosi noţiunile studiate. Pagina va conţine:
 în colţul stânga sus, poziționate una sub alta vor apare scrise:
o şcoala, numele, clasa, profilul şi specializarea la care sunteţi
 centrat, veţi scrie cuvântul ORAR
 sub ORAR, veţi trece orarul vostru, precizând ziua şi ora.
După terminarea materialelor, folderul Lecția 1, va avea următorul conținut:
Bibliografie/Webografie: https://html.com/

l1 Introducere in HTML - Structura Standard A Unui Document 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

l1 Introducere in HTML - Structura Standard A Unui Document HTML

Încărcat de

Drepturi de autor:

Formate disponibile

Lecția 1: Introducere în HTML prof.

Timb Edina Katalin

Despre limbajul HTML

Structura standard a unui document HTML

c. salvaţi documentul cu numele L1_exe1.html, în folderul creat anterior(atenție la extensie, selectați

d. reveniţi în directorul Lecția 1 şi daţi dublu-click pe documentul html creat , pentru

Stabilirea culorii(text şi fundal) în pagina Web

Setarea marginilor paginii Web

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