Limbaj HTML

CAPITOLUL 1.
LIMBAJUL HTML5 SI REGULI CSS3

1.1 Limbajul HTML5
HTML, abrevierea de la HyperText Markup Language reprezinta limbajul de marcare
standard, de programare folosit atat pentru afisarea intr-un browser a unor pagini web, cat si
pentru prezentarea unor informatii – paragrafe, tabele, fonturi, etc. Acest limbaj este utilizat
mai putin pentru descrierea semanticii documentului.
Din anul 1991 pana in 1999, HTML a dezvoltat 4 versiuni:
 1990 – HTML 1.0 (1993 – HTML )
 1994 – HTML 2.0 – prima versiune standardizata
 1995 – HTML 3.0 – versiunea nu mai este utilizata
 1996 – HTML 3.2
Din anul 1997, HTML a fost standardizat ca HTML4.
Din octombrie 2011, exista in curs de dezvoltare a cincea versiune a standardului
HTML si anume HTML5. Datorita aparitiilor multimedia, limbajul a fost imbunatatit,
totodata ramanand usor de utilizat de oameni si de browser.
Cele mai cunoscute elemente in HTML sunt:
 <html> - reprezinta radacina unei pagini html;
 <head> - contine informatii ale documentului;
 <title> - reprezinta titlul pentru document;
 <body> - reprezinta continutulul vizibil al paginii;
 <h1> - defineste o rubrica mai mare;
 <p> - defineste un paragraf.
Aceste elemente sunt recunoscute ca etichete, ce sunt reprezentate in perechi.
Intre cele doua etichete exista o singura diferenta, si anume faptul ca la eticheta finala
se adauga un slash inainte de numele acesteia.
Declaratia DOCTYPE pentru HTML5 este : <!DOCTYPE html> si defineste
documentul ca fiind HTML5.
Aceasta eticheta face exceptie de la regula si nu are pereche. Apare o singura data, la
inceputul paginii, inainte de orice alt element HTML.
Declaratia de codare a caracterelor este urmatoarea: <meta charset=”UTF-8”>.
Orice document HTML incepe cu eticheta <html> si se incheie cu </html>.
Partea vizibila a documentului se scrie intre etichetele <body> si </body>.
De asemenea, prin HTML se pot accesa link-uri , definite prin eticheta <a> :
<a href =”https://google.com”>Acesta este un link</a>
In atributul href se specifica destinatia link-ului.
Imaginile se definesc prin eticheta <img>, butoanele prin eticheta <button>, iar pentru
liste exista doua tipuri de tag-uri, si anume: eticheta <ul>, reprezinta o lista neordonata, iar
eticheta <ol> reprezinta o lista ordonata/numerotata. Aceste doua etichete, <ul> sau <ol> sunt
urmate de tag-ul <li> ,care prezinta elementele listei.
Atributele HTML :
Fiecare element HTML poate avea un atribut , care sa ofere informatii suplimentare.
Acest atribut este introdus in eticheta de inceput a elementului, avand urmatoarea
forma generala : nume=”valoare”.
Cele mai utilizate atribute in HTML sunt prezentate in tabelul urmator:
Atributul Descrierea atributului
alt Cand imaginea nu poate fi afisata, se
specifica un text alternativ pentru aceasta
disabled Cand un element de intrare ar trebui
sa fie dezactivat
href Reprezinta adresa pentru un link
id Reprezinta un id unic pentru un
element
src Reprezinta adresa imaginii(sursa)
style Reprezinta stilul pentru un element
title Specifica informatii suplimentare
Tabel 1. Atribute HTML5
Pentru a defini stilurile unor elemente in HTML se utilizeaza eticheta <style>. In
interiorul acesteia se specifica ce anume este stilizat:
 background-color – pentru imaginea de ansamblu
 color – pentru culoarea textului
 font-family – pentru tipurile de text
 font-size – pentru marimea textului
 text-align – pentru alinirea textului
Exemplul cel mai simplu de cod HTML5 este urmatorul:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Title of the document</title>
</head>
<body>
Content of the document......
</body>
</html>
Fata de HTML4, penultima versiune de HTML, HTML5 are cateva elemente noi, cele
mai utilizate fiind:
 In campul semantic, elementele sunt: <header>, <footer>, <article>, <section>
 In campul atributelor : number,date, time, calendar, range
 In campul grafic : <svg>, <canvas>
 In campul multimediat: <audio>, <video>
De asemenea, cateva elemente utilizate in HTML4 au fost eliminate sau inlocuite in
HTML5, precum:
<acronym>, <applet>, <basefont>, <big>, <center>, <dir>, <font>, <frame>,
<frameset>, <noframes>, <strike>, <tt>.
Toate broswerele moderne accepta HTML5. Plus de asta, atat cele vechi, cat si cele
noi, gestioneaza automat elementele necunoscute.
Pentru a oferi o structura mai buna , HTML5 ofera elemente noi, cele prezentate mai
sus fiind doar cateva exemple. In continuare, le voi explica pe cele prezentate mai sus si voi
adauga alte cateva.
<article> - defineste un articol dintr-un document
<aside> - defineste continutul din afara unei pagini
<bdi> - izolează o parte a textului care ar putea fi formatată într-o direcție diferită de
celălalt text din afara acestuia
<details> - defineste detalii pe care utilizatorul le poate vedea sau le poate ascunde
<dialog> - defineste o fereastra de dialog
<figure>- definește conținutul de sine stătător
<figcaption> - definește o legendă pentru un element <figure>
<footer> - definește un subsol pentru un document sau secțiune
<header> - definește un antet pentru un document sau secțiune
<main> - definește conținutul principal al unui document
<mark> - definește un text marcat / evidențiat
<meter> - defineste o masura scalara intr-un interval cunoscut
<nav> - definește legăturile de navigare
<progress> - reprezintă progresul unei sarcini
<rp> - definește ce trebuie afișat în browserele care nu acceptă adnotările ruby
<rt> - definește o explicație / pronunție a caracterelor (pentru tipografia din Asia de
Est)
<ruby> - definește o adnotare a rubinelor (pentru tipografia din Asia de Est)
<section> - defineste o sectiune intr-un document
<summary> - definește un titlu vizibil pentru un element detaliat
<time> - defineste o data/un timp
<wbr> - definește o posibilă întrerupere a liniei
1.2 REGULI CSS3

CSS reprezinta abrevierea de la Cascading Style Sheets si este un limbaj de
programare utilizat pentru a stiliza mai usor elementele HTML. Astfel , CSS ne ajuta sa
aranjam elementele ce vor fi afisate pe ecran. CSS este utilizat pentru a defini stilul paginilor
din site-ul web, impreuna cu design-ul, asezarea in pagina, variatia marimii ecranelor pentru
diferite dispozitive. Prin CSS se salveaza o mare parte din munca crearii unui site web.
Definitiile stilurilor sunt salvate intr-o pagina externa cu extensia “.css”, direct pe element
folosind atributul style (metoda numita inline) sau in interiorul paginii HTML, in cadrul unui
tag <style> in sectiunea HEAD a documentului.
Daca se scrie codul CSS intr-o pagina separate cu extensia “.css”, atunci in fisier, in
sectiunea <head> se va adauga urmatoarea linie de cod:
<link rel=”stylesheet” href=”style.css” type=”text/css”/>.
Daca se utilizeaza si prima metoda, dar si a treia, atunci browser-ul va aplica ultima
regula CSS intalnita. Codul CSS, in general, este alcatuit din: obiectul care va fi formatat,
proprietatile acestuia si valoarea (sau atributele) fiecarei proprietate.
selector {proprietate: valoare; }
Regulile CSS generale definesc un selector si un bloc de declaratii:
h1 { color: pink; font-size:12px;}, unde:
 h1 reprezinta selectorul, mai exact elementul html care este stilizat;
 color: pink ; font-size:12px sunt declaratiile, continute in blocul de declaratii,
separate prin punct si virgula;
 color si font-size sunt proprietati, separate de valori prin doua puncte, valorile
fiind pink si 12px in acest caz.
Fiecare declaratie CSS se incheie cu punct si virgula, blocul de declaratie fiind
introdus in acolade. Cand este adaugat intr-un fisier extern ".css", codul CSS se scrie la fel,
dar nu se mai adauga tag-ul <style>. Asadar, pentru a scrie un cod CSS trebuie sa decidem
carui element vrem sa ii schimbam proprietatile, scriem selectorul, apoi alegem regulile ce
dorim sa le aplicam.
Pentru un element se pot scrie mai multe reguli, de aceea acestea vor fi adaugate intre
doua acolade si vor fi scrise pe linii separate sau pe aceeasi linie, la sfarsitul fiecarei reguli
adaugandu-se punct si virgula.
Se va exemplifica prin modificarea unui tag, si anume <p>, care reprezinta un paragraf
din pagina web.
p{
color: yellow;
}
Regula este formata din 2 parti: proprietatea pe care o modificam - color si noua
valoare pe care o aplicam – yellow.
De asemenea, in continuare se va adauga marimea textului, care va fi exprimata in
pixeli , cum ar fi: font-size:20px.
Revenind la ordinea in care sunt citite regulile CSS , acestea au aceeasi importanta,
insa browser-ul le va lua in calcul pe ultimele citite.
1.2.1 Efectul de cascada
O regula importanta in limbajul de programare CSS este efectul de cascada, de unde
vine si denumirea acestuia. Suprascrierea este caracteristica acestei reguli, si anume , daca
pentru un element au fost scrise deja reguli se doreste adaugarea altora, aceste reguli nu se vor
reseta, ci se vor completa. Daca exista conflicte, regulile vor fi suprascrise.
1.2.2 Obiectele CSS
Selectorul, clasa si identificatorul sunt cele trei tipuri esentiale de obiecte.
 Selectorul – reprezentat de selectorul HTML – Eticheta HTML prezinta un anume
continut, iar selectorul ajuta la reformularea felului in care acest continut este afisat.
 Clasa – acest obiect poate fi potrivit oricarei etichete HTML. Inainte de a fi conturata
intr-un cod CSS, clasa se creeaza in interiorul etichetele HTML. Acest lucru se face
prin precizarea cuvantului class si numele acesteia. De exemplu:
< p class = “nume_clasa”>Textul din paragraph</p>
Numele clasei este precizat de noi, iar in momentul in care este adaugat in interiorul
codului CSS, se adauga un punct (.) inaintea sa . Exemplu:
.nume_clasa{ color:green; font-size:20px;}
Numele aceleasi clase poate fi distribuit mai multor etichete HTML, apartinand
aceleasi pagini , aceste etichete preluand acelasi stil .
 Identificatorul(ID) – fata de clasa, numele unui identificator este unic, este atribuit unei
singure etichete HTML dintr-o pagina. Daca dorim sa atribuim si altei etichete un ID,
atunci acesta trebuie sa aiba alt nume, diferit. Crearea ID-ului este similiara cu cea a clasei.
Exemplu:
<div id=“nume_id”>Textul</div>
De asemenea, id-ului ii putem defini orice nume dorim.
La adaugarea in codul CSS, inainte de numele id-ului se adauga caracterul diez (#) ,
astfel: #nume_id{color:green; font-size:10px;}
Fiecare obiect CSS are anumite elemente in componenta, precum:
 Selectori – selectori de etichete HTML, identificatori, clase
 Proprietati – se refera la o caracteristica de stil a obiectului
 Valori – se precizeaza valoarea unei proprietati; aceste valori sunt numerice
sau procentuale, cuvinte cheie.

Limbaj HTML

Încărcat de

Informații document

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

Limbaj HTML

Încărcat de

Drepturi de autor:

Formate disponibile

CAPITOLUL 1.

LIMBAJUL HTML5 SI REGULI CSS3

1.2 REGULI CSS3

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