Sunteți pe pagina 1din 9

HTML este prescurtarea de la Hyper Text Mark-up Language şi este codul care stă la

baza paginilor web. HTML reprezintă de fapt limbajul pe care browserele de internet îl
inţeleg şi cu ajutorul lui pot fi afişate paginile web.

Pagina HTML este un fisier TEXT cu extensia .html sau .htm si poti folosi un editor simplu
pentru a crea o pagina WEB (ex. notepad) unde va scris codul.
Puteţi scrie astfel de fişiere cu Notepad. Verificati că nu aveţi extensiile ascunse (My Computer
-> Tools -> Folder Options -> View -> debifaţi Hide extensions for known file types). Pentru a
putea crea fişiere html dati clic dreapta New -> Text Document, apoi îl redenumiţi index.html.

HTML nu este un limbaj case sensitiv (nu face deosebirea intre litere mici si mari).

Pentru a putea publica informaţii pe Internet este necesar să le organizăm sub forma unor
pagini web. Web-ul (World Wide Web) este o retea de computere din toata lumea. În principiu
o pagină web este o combinaţie de text, imagini şi alte elemente care vor fi afişate cu ajutorul
unui program numit browser (ex: Internet Explorer, Mozilla Firefox, Opera, etc.).

Cum afiseaza browser-ul paginile html?

Realizarea paginilor web se face cu ajutorul limbajului specializat numit HTML. Folosirea
acestui limbaj garantează că orice program de navigare (=browser) va afişa corect informaţiile
de pe o pagină web.

Codul oricărei pagini web publicată pe Internet poate fi vizualizat accesând în browser
opţiunea “View Source”.

Toate paginile html conţin instrucţiuni despre cum să fie afişate. Browser-ul afişează pagina
citind aceste instrucţiuni.

HTML este un limbaj bazat pe marcatori (tag-uri). Un marcator este un cuvânt cheie care
indică realizarea unei anumite operaţii asupra unei zone din pagină (îî furnizăm browserului
informaţii despre cum să afişeze o anumită zonă din pagină). Practic o pagină web este o
succesiune de marcatori care indică începerea efectuării precum şi terminarea anumitor operaţii
legate de afişarea informaţiilor. În general fiecare operaţie este implementată de doi marcatori:
• Unul care indică începerea operaţiei, încadrat de între “<” şi “>”
• Unul care indică terminarea operaţiei respective, încadrat între “</” şi “>”. Între cei doi
se află blocul sau conţinutul tag-ului.
Există şi câteva excepţii cum ar fi marcatorul de trecerea la linie nouă: <br>.

Vizualizarea primei pagini web

Pentru a putea vedea pagina, va trebui sa folosesti un browser. Browser-ele sunt programele de
internet care interpreteaza codurile HTML şi le transformă într-o pagină web care poate fi citită
de orice utilizator.

Orice document HTML incepe cu notatia <html> şi se termină cu notaţia </html>.


Acestea se numesc în literatura de specialitate "TAG-uri".
Tag-urile nu sunt altceva decat niste marcaje sau etichete pe care limbajul HTML le foloseste
alaturi de texte pentru a ajuta browser-ul de Internet să afişeze corect conţinutul paginii web.

Tagurile pot fi scrise atât cu majuscule, cât şi cu minuscule – browserul le va înţelege în acelaşi
fel. Exemplu: <body>, <BODY> şi <Body> sunt identice.
Mai multe taguri conţin, în afară de numele său atribute – elemente, care poartă informaţii
suplimentare despre aceea cum trebuie să fie prelucrat tagul.

Un browser citeşte absolut tot ceea ce ai scris în documentul HTML. De fiecare dată când
găseşte un tag îl va trata ca atare şi îl va reda, ca de exemplu un paragraf, un titlu un tabel sau
orice altceva.

Numărul de marcatori HTML şi structura lor diferă în funcţie de pagină, însă există câţiva
marcatori (tag-uri) HTML care se regăsesc obligatoriu în orice pagină web. Aceştia sunt :

<HTML> - cu acest tag începe orice document HTML. Prin folosirea acestui tag îi spunem
browser-ului că este vorba de un fisier HTML pentru a îl putea afişa.
<HEAD> - între aceste tag-uri sunt trecute, pe lânga titlul paginii şi diverse informaţii utile
browserului.
</HEAD> - acesta este tag-ul de încheiere al tag-ului <HEAD>
<TITLE> - cu ajutorul acestei perechi de tag-uri vei putea da un titlu documentului tău.
Trebuie sa pui tag-ul title înauntrul celui de head. Astfel, textul pe care îl vei scrie între
aceste tag-uri va fi afişat în bara de titlu a documentului.
</TITLE> - este tag-ul de încheiere al tag-ului <TITLE>. Arată sfârşitul titlului
documentului.
<BODY> - odata cu acest tag începe conţinutul paginii web. Tot ce vei scrie între tag-urile
<BODY> şi </BODY> va fi afişat, de către browser, pe ecranul monitorului.
</BODY> - îi spui browser-ului că ai terminat de scris conţinutul paginii.
</HTML> - este tag-ul de încheiere al tag-ului <HTML>. Codul oricarui document .html se
termină cu acest tag.

Exista sute de taguri HTML. Absolut toate elementele care vor fi redate de un browser au
nevoie de un tag sau două.

Ordinea tag-urilor - Foarte important

Ordinea deschiderii şi a închiderii tag-urilor este foarte importantă. Se va închide întotdeauna


tagul deschis cel mai recent. Dacă un tag este deschis într-un altul, de exemplu body este
deschis în html atunci acel tag (body) este cel care trebuie închis înaintea celui de-al doilea
tag (html).

O etichetă poate fi scris atât cu litere mici, cât şi cu litere mari.


Adică <HTML> = <HtmL> = <html>. Caracterele "spaţiu" si "CR/LF" ce apar între etichete
sunt ignorate de către browser.

Deci un prim document HTML ar fi ceva de genul asta:

<html>
<head> </head>
<body>
</body>
</html>

Asa arată primul document HTML. Tipăriţi acest cod în fişierul index.html (folosind
Notepad). Apoi deschideţi fişierul folosind browserul de Internet. Pagina va fi goală.
Vom adauga primele elemente la pagina noastra. În primul rand, titlul unei pagini se obţine
inserând în secţiunea <head>...</head> a următoarei linii:
<title>Aceasta este prima mea pagina de Web</title>

În plus, în secţiunea <body>...</body> putem scrie texte cât dorim. Dacă nu întâlnim nici un
marcaj “<” sau “>” atunci interpretorul HTML le va lua ca texte simple şi le va afisa pe ecran.
Să vedem o nouă versiune a paginii noastre:

<html>
<head>
<title>Aceasta este prima mea pagina de Web</title>
</head>
<body>
Bine ati venit in pagina mea de Web!
</body>
</html>

Conţinutul blocului <title>...</title> va apărea în bara de titlu a ferestrei browser-ului.


Daca acest bloc lipseşte într-o pagina HTML, atunci în bara de titlu a ferestrei browser-ului va
apărea numele fişierului.

Daca introducem mai multe linii într-o pagina browser-ul va afişa într-un singur rand, întrucât
caracterele " CR/LF " sunt ignorate de browser. Trecerea pe o linie nouă se face la o comandă
explicită, care trebuie să apară în pagina html.
Această comandă este marcajul <br> (de la " line break " - întrerupere de linie).
Folosind aceleaşi operaţii ca mai sus, vizualizaţi noua pagină! Veţi vedea textul ce apare în
fereastra navigatorului. În plus, pagina va avea un titlu nou, cel introdus.

<html>
<head>
<title> titlul paginii</title>
</head>
<body>
Bine ati venit in <br> pagina mea de Web!
</body>
</html>
ATRIBUTELE

Atributele pot fi definite ca nişte proprietăţi ale tag-urilor. Atributele se pun numai în tag-ul
de început. Daca un tag nu are nici un atribut, atunci browser-ul va lua în considerare valorile
implicite ale tag-ului respectiv. Pentru a inţelege mai bine noţiunea de atribut să vedem câteva
exemple.

Culoarea fundalului

Culoarea fondului paginii Web se stabileşte cu atributul bgcolor al etichetei <body>, de


exemplu: <body bgcolor = “culoare”>.
Atributul BGCOLOR care se foloseşte cu tag-ul <BODY> indică ce culoare va avea fondul
viitoarei pagini web. Fondul unei pagini web are în mod implicit culoarea albă, dar să spunem
că vrem ca fondul paginii să fie galben.

<html>

<head>

<title>Titlu</title>
</head>
<body bgcolor="yellow">
Corpul paginii
</body>
</html>

Culorile sunt întotdeauna în limba engleza (blue, red, green , yellow, purple, cyan, black ,
white etc) sau în cod hexadecimal #FF9900 pentru orange.

!!!! Atenţie , tagul <body> se pune o singură dată într-o pagină, nu de mai multe ori!

Atributul bgcolor schimbă fundalul unei pagini. Puteti sa-i dati ca valoare orice culoare în
limba engleză.
Culoarea textului

Acest lucru se face prin intermediul atributului text al etichetei <body> dupa sintaxa <body
text=”culoare”>. În următorul exemplu textul are culoarea roşie.

<html>
<head>
<title>culoare textului </title>
</head>
<body text=”red”>
Un text de culoare rosie.
</body>
</html>

O eticheta poate avea mai multe atribute. De exemplu, o etichetă cu trei atribute arată astfel:
<eticheta atribut1 = “valoare1” atribut2 = “valoare2” atribut3 = “valoare3”>. Următorul
exemplu prezintă o pagină cu fondul de culoare albastră şi textul de culoare galbenă.

<html>
<head>
<title>atribute multiple </title>
</head>
<body bgcolor=blue text=yellow>
Fond de culoare albastra si text de culoare galbena.
</body>
</html>

Textul se poate introduce şi fără taguri. Dar dacă dorim să avem un text de o anumită formă
atunci îl introducem în taguri ca şi cele de mai jos:

<font> Text </font> - între ele se pune ce vrei să scrii pe pagină (acest tag nu va schimba
deloc forma textului)
<b> Text îngroşat </b> -defineşte text îngroşat
<big> Text mare </big> -defineşte text mare;
<mic> Text mic </mic> -defineşte text mic;
<em> Text accentuat </em> -defineşte text accentuat;
<i> Text italix </i> -defineşte text italic;

Tagul <br> este folosit când doriţi să întrerupeţi un rând/linie, dar nu vreţi să începeţi un nou
paragraf, forţează o rupere de linie oriunde este aşezat. Poate fi folosit pentru a lăsa un rând
liber. El este nepereche, neavând nevoie de tag de închidere.

&nbsp; -este folosit ca spatiu


&copy; -copyright- ©
&reg; -marca inregistrata- ®

<!-- This is a comment --> - cu acest tag se scrie un comentariu în html.


Comentariul este ignorat de browser.

FONTURI

Un font este caracterizat de următoarele atribute:

• culoare (stabilită prin atributul color);


• tipul sau stilul (stabilit prin atributul face);
• mărimea (definită prin atributul size);

Toate aceste atribute aparţin etichetei, care permite inserarea de blocuri de texte personalizate.

Pentru a scrie un fragment de text cu caractere de o anumita culoare se incadreaza acest


fragment între delimitatorii <font> şi </font> având stabilit atributul color la valoarea
necesară. De exemplu:

<font color=red>fragment de text de culoare rosie</font>


Familia fontului

Pentru a scrie un text într-o pagină pot fi folosite mai multe fonturi (stiluri de caractere).
Există cinci familii generice de fonturi care sunt de regulă disponibile pe toate calculatoarele
utilizatorilor: serif, sans serif, cursive, monospace şi fantasy.
Tipul de font necesar poate fi stabilit prin atributul face al etichetei.
Pot fi introduse mai multe fonturi separate prin virgulă.

<font face="Arial, serif, monospace">

În acest caz browserul va utiliza primul font pe care îl cunoaşte.

<html>
<head>
<title> Culoarea si familia fontului</title>
</head>
<body>
Aceste linie este scrisa cu caractere normale.
<br> <font color="red">Aceasta linie este rosie.</font>
<br>Aici<font color="green">fiecare</font>
<font color="blue">cuvant</font>
<font color="yellow">are</font>
<font color="cyan">alta</font>
<font color="#3478fa">culoare.</font>
<br><font face="monospace">Linie scrisa cu caractere monospatiate.</font>
<br> <font face="arial">Linie scrisa cu caractere arial.</font>
</body>
</html>

Mărimea fontului

Penrtu a stabili mărimea unui font se utilizeaza atributul size al etichetei. Valorile acestui
atribut pot fi:
• 1, 2, 3, 4, 5, 6, 7 ( 1 pentru cel mai mic font şi 7 pentru cel mai mare);
• +1, +2, etc. pentru a mări dimensiunea fontului cu 1, 2, etc. faţă de valoarea curentă;
• -1, -2, etc. pentru a micşora dimensiunea fontului cu 1, 2, etc. faţă de valoarea curentă.

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