Atribute

postat acum 2 ani de Stefanescu Mihai in categorie HTML

Deja am discutat despre o serie de tag-uri HTML, tag-uri precum cele de heading (de la <h1> la <h6>), tag-uri pentru paragrafe (aici avem <p>), si asa mai departe. Le-am folosit in forma ce-a mai simpla pana acum, dar majoritatea tag-urilor pot avea si atribute.

Atributele sunt folosite pentru a defini anumite caracteristici ale elementelor HTML si sunt plasate in interiorul tagurlor de deschidere a elementelot.

Toate atributele sunt formate din nume si valoare.

    • Numele – denumirea proprietatii pe care dorim sa o schimbam.

Valoare

  • – valoarea pe care dorim sa o dam acelei proprietati.

Numele si valorile atributelor sunt case-insensitive (nu conteaza daca sunt scrise cu litere mici sau mari), dar World Wide Web Consortium (W3C) recomanda sa fie scrise cu litere mici.Un exemplu cat se poate de simplu:

<!DOCTYPE html>
<html>
<head>
<title>Exemplu Atribute HTML</title>
</head>
<body>
<p align="left">Aliniere la stanga.</p>
<p align="center">Aliniere in centru.</p>
<p align="right">Aliniere la dreapta.</p>
</body>
</html>

Atribute Esentiale

Acestea sunt atribute pe care probabil le vei folosi in fiecare tag HTML (Sau aproape in fiecare tag):

  • id
  • class
  • title
  • style

Atributul ID

Acest atribut este folosit pentru a identifica un anumit element HTML in pagina. Avem 2 motive sa folosim atributul id:

  • Atributul id identifica un singur element si continutul sau.
  • Daca avem 2 element cu acelasi nume putem folosi ID-ul pentru a le distinge.

Atentie: Nu putem avea 2 elemente cu acelasi ID in aceasi pagina web.

<div id="primul_id">Acest DIV are un anumit ID</div>
<div id="al_doilea_id">Acest DIV are alt ID</div>

Atributul title

Acest atribut este folosit pentru a da un nume sugestiv unui anumit element din pagina. Sintaxa acestui atribut este similara cu sintaga atributului ID. Acest element se va comporta diferit in functie de elementul in care este scris, dar de cele mai multe ori acesta va afisa un tooltip can cursorul este deasupra elementului in cauza.

<!DOCTYPE html>
<html>
<head>
<title>Exemplu atribut title</title>
</head>
<body>
<h3 title="Salutari!">Salut, ma bucur sa vad ca ai ajuns aici!</h3>
</body>
</html>

Acest cod va produce urmatorul lucru:

Salut, ma bucur sa vad ca ai ajuns aici!

 Atributul Class

Acest atribut este folosit pentru a asocia un element HTML cu un anumit stil CSS. Un element HTML poate avea o clasa sau mai multe separate printr-un spatiu:

<div class="numeClasaCSS">continut element</div>

sau

<div class="numeClasaCSS1 numeClasaCSS2 numeClasaCSS3">continut element</div>

Atributul Style

Acest atribut ne permite sa scriem cod CSS in interiorul codului HTML.

<!DOCTYPE html>
<html>
<head>
<title>Exemplu atribut style</title>
</head>
<body>
<p style="font-family:arial; color: rgb(255, 0, 0);">Continutul elementului</p>
</body>
</html>

Atribute Internationalizare

Avem 3 astfel de atribute:

  • dir
  • lang
  • xml:lang

Atributul dir

Acest atribut ii indica browserului directia textul si poate avea decat 2 valori:

Valoare Descriere
ltr Left To Right (valoare deafult), textul va fi afisat de la stanga spre dreapta.
rtl Right To Left, textul va fi afisat de la dreapta spre stanga.
<!DOCTYPE html>
<html dir="rtl">
<head>
<title>Directie Text</title>
</head>
<body>
Afisare text de la dreapta spre stanga.
</body>
</html>

Cand atributul dir este pus in tag-ul <html>  va determina cum sa fie afisat tot textul din pagina, iar cand este folosit in alt tag va determina decat directia textului din acel alement.

Atributul lang

Acest atribut permite indicarea limbii principale a unui document, dar acest element a fost pastrat doar pentru compatibilitatea cu versiunile mai vechi. In prezent acesta a fost inlocuit de atributul xml:lang.

Valoarea atributului lang trebuie sa fie codul unei limbi format din 2 caractere conform ISO-639 

<!DOCTYPE html>
<html lang="ro">
<head>
<title>Pagina in limba Romana</title>
</head>
<body>
Aceasta pagina este scrisa in limba Romana
</body>
</html>

Atributul xml:lang

Acest atribut a fost creat pentru a inlocui atributul lang. Valoarea lui xml:lang trebuie sa fie codul unei tari in iSO-639, cum am spus si mai sus.

Atribute generice

Am postat mai jos un tabel cu cateva atribute ce pot fi folosite in mai multe tag-uri HTML.

Atribut Valori Descriere
align right, left, center Aliniaza orizontal un element
valign top, middle, bottom Aliniaza vertical un element
bgcolor hexazecimal sau RGB Culoarea de fundal a unui element.
background URL Pune o imagine de fundal unui anumit element.
id Definita de programator Numele id-ului pentru stilul CSS
class Definita de programator Numele clasei pentru stilul CSS
width Valoare numerica Poate fi specificata latimea unui anumit element
height Valoare numerica Poate fi specificata inaltimea unui anumit element
title Definita de programator Afiseaza un mic tooltip cu titlul dat.

 

Sunt un tanar programator din Bucuresti ce lucreaza in PHP/Mysql (MySqli/PDO), Laravel, CodeIgniter, MySQL, PostgreSQL, Wordpress, HTML5/CSS3, Sass, Photoshop si multe altele.
Google+ Community Facebook Group
Acest articol a fost mutat de pe vechea platforma.
Pentru orice eroare aparuta la mutare va rog sa ma contactati!