Lectii curs ⊞

📑 Cele mai noi postari ⊞

Stefanescu Mihai a postat in Paginare in PHP
johhny a postat in Paginare in PHP
Stefanescu Mihai a postat in Cum pot afisa eroarea cand utilizatorul a scris un username gresit sau o parola gresita?
madalin a postat in Cum pot afisa eroarea cand utilizatorul a scris un username gresit sau o parola gresita?
Stefanescu Mihai a postat in Featureuri site

Atribute

HTML | Stefanescu Mihai | 2020-10-11

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>

<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.

Articolul precedent

Articolul urmator

Imi place ce faci aici

Daca iti place ce fac aici imi poti cumpara o cafea

Stefanescu Mihai
Programator de ~8 ani, am lucrat la proiecte din mai multe industrstrii, de la eCommerce la telecomunicatii la automatizari. In acest timp am folosi diferite tehnologii, de la PHP, MySQL, PostgreSql, RabbitMq, Redis, Memcached si altele.

Get in touch

Pentru nelamuriri, dubii, comentarii si chestii de pe suflet ne putem auzi pe Discord, Reddit sau poti deschide o discutie noua pe forum.

Posteaza un comentariu

Comentarii

Inca nu au fost postate comentarii, fii primul care posteaza un comentariu!

🔖 Bookmarks ⊞

✨ Pentru a sustine aceasta comunitate am sa te rog sa te autentifici sau sa te inregistrezi!

🌪️ Discord ⊞