Atribute HTML

Atributele HTML oferă informații suplimentare despre elemente. Iată punctele cheie:

Toate elementele HTML pot avea atribute.
Atributele oferă informații suplimentare despre un element.
Atributele se pun întotdeauna în tag-ul de deschidere.
Atributele de obicei vin în perechi nume/valoare, precum name="value".

Atributul href

Tag-ul <a> creează un hyperlink. Atributul său href setează URL-ul către care duce linkul.

Exemplu

Un link către site-ul PromptCookbook.

O pagină cu un hyperlink creat cu eticheta a, al cărui href indică spre https://prompt-cookbook.com, cu textul linkului "Vizitează PromptCookbook".

> Rezultat: pagină HTML completă

Prompt

O pagină cu un hyperlink creat cu eticheta a, al cărui href indică spre https://prompt-cookbook.com, cu textul linkului "Vizitează PromptCookbook".

Rezultat: pagină HTML completă

<!DOCTYPE html>
<html lang="ro">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Href</title>
</head>
<body>

<a href="https://prompt-cookbook.com">Vizitează PromptCookbook</a>

</body>
</html>

Atributul src

Tag-ul <img> pune o imagine pe pagină. Atributul său src setează calea către imagine.

Există două moduri de a scrie calea. Un URL absolut indică o imagine pe un alt site web, precum https://prompt-cookbook.com; reține că imaginile externe pot fi protejate prin drepturi de autor și se pot schimba sau dispărea fără avertisment. Un URL relativ indică o imagine de pe propriul tău site și omite numele domeniului, precum img_girl.jpg (relativ la pagina curentă) sau /images/img_girl.jpg (relativ la domeniu).

Sfat: URL-urile relative sunt aproape întotdeauna cele mai bune, deoarece continuă să funcționeze dacă schimbi domeniul.

Exemplu

O imagine setată doar cu atributul src.

O pagină care încorporează o imagine cu eticheta img, folosind doar atributul src setat la "img_girl.jpg".

> Rezultat: pagină HTML completă

Prompt

O pagină care încorporează o imagine cu eticheta img, folosind doar atributul src setat la "img_girl.jpg".

Rezultat: pagină HTML completă

<!DOCTYPE html>
<html lang="ro">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Src</title>
</head>
<body>

<img src="img_girl.jpg">

</body>
</html>

Atributele width și height

Tag-ul <img> ar trebui să aibă și atribute width și height, care setează dimensiunea imaginii în pixeli.

Exemplu

O imagine cu lățime și înălțime setate.

O pagină cu o imagine (eticheta img, src "img_girl.jpg") care își setează dimensiunea cu atributele width="500" și height="600" (pixeli).

> Rezultat: pagină HTML completă

Prompt

O pagină cu o imagine (eticheta img, src "img_girl.jpg") care își setează dimensiunea cu atributele width="500" și height="600" (pixeli).

Rezultat: pagină HTML completă

<!DOCTYPE html>
<html lang="ro">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Lățime Înălțime</title>
</head>
<body>

<img src="img_girl.jpg" width="500" height="600">

</body>
</html>

Atributul alt

Atributul alt de la <img> este obligatoriu. Oferă un text alternativ afișat atunci când imaginea nu se poate încărca, de exemplu la o conexiune lentă, când src este greșit sau pentru cineva care folosește un cititor de ecran.

Cu o imagine funcțională

O imagine cu text alt.

O pagină cu o imagine (src "img_girl.jpg") care include atributul obligatoriu alt "Fată cu jachetă" ca text alternativ.

> Rezultat: pagină HTML completă

Prompt

O pagină cu o imagine (src "img_girl.jpg") care include atributul obligatoriu alt "Fată cu jachetă" ca text alternativ.

Rezultat: pagină HTML completă

<!DOCTYPE html>
<html lang="ro">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Alt</title>
</head>
<body>

<img src="img_girl.jpg" alt="Fată cu jachetă">

</body>
</html>

Când imaginea lipsește

Textul alt este afișat deoarece imaginea nu există.

O pagină care încearcă să afișeze o imagine care nu există (src "img_typo.jpg"), astfel încât textul alt "Fată cu jachetă" este afișat în schimb.

> Rezultat: pagină HTML completă

Prompt

O pagină care încearcă să afișeze o imagine care nu există (src "img_typo.jpg"), astfel încât textul alt "Fată cu jachetă" este afișat în schimb.

Rezultat: pagină HTML completă

<!DOCTYPE html>
<html lang="ro">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Eroare Alt</title>
</head>
<body>

<img src="img_typo.jpg" alt="Fată cu jachetă">

</body>
</html>

Atributul style

Atributul style adaugă stiluri unui element, precum culoare, font și dimensiune.

Exemplu

Un paragraf stilizat cu culoarea roșie.

O pagină cu un paragraf care folosește atributul style pentru a face textul roșu: "Acesta este un paragraf roșu."

> Rezultat: pagină HTML completă

Prompt

O pagină cu un paragraf care folosește atributul style pentru a face textul roșu: "Acesta este un paragraf roșu."

Rezultat: pagină HTML completă

<!DOCTYPE html>
<html lang="ro">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Style</title>
</head>
<body>

<p style="color:red;">Acesta este un paragraf roșu.</p>

</body>
</html>

Atributul lang

Ar trebui să pui întotdeauna atributul lang pe tag-ul <html> pentru a preciza limba paginii. Acest lucru ajută motoarele de căutare și browserele.

Poți adăuga și un cod de țară: primele două litere setează limba, iar ultimele două setează țara. De exemplu, en este engleza, iar en-US este engleza folosită în Statele Unite.

Doar limba

Declararea englezei cu lang="en".

<!DOCTYPE html>
<html lang="en">
<body>
...
</body>
</html>

Limbă și țară

Declararea englezei (Statele Unite) cu lang="en-US".

<!DOCTYPE html>
<html lang="en-US">
<body>
...
</body>
</html>

Atributul title

Atributul title oferă informații suplimentare despre un element. Valoarea sa este afișată ca un tooltip atunci când treci cu mausul peste element.

Exemplu

Un paragraf cu un tooltip.

O pagină cu un paragraf care are un atribut title "Sunt un tooltip", astfel încât trecerea cursorului peste paragraf afișează acel text ca tooltip. Paragraful spune "Acesta este un paragraf."

> Rezultat: pagină HTML completă

Prompt

O pagină cu un paragraf care are un atribut title "Sunt un tooltip", astfel încât trecerea cursorului peste paragraf afișează acel text ca tooltip. Paragraful spune "Acesta este un paragraf."

Rezultat: pagină HTML completă

<!DOCTYPE html>
<html lang="ro">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Title</title>
</head>
<body>

<p title="Sunt un tooltip">Acesta este un paragraf.</p>

</body>
</html>

Sugerăm: Folosește Întotdeauna Atribute cu Litere Mici

Standardul HTML nu impune nume de atribute cu litere mici, deci atât title, cât și TITLE funcționează. Dar PromptCookbook recomandă litere mici, iar tipurile de documente mai stricte precum XHTML le impun. PromptCookbook folosește întotdeauna nume de atribute cu litere mici.

Sugerăm: Pune Întotdeauna Valorile Atributelor Între Ghilimele

Standardul HTML nu impune ghilimele în jurul valorilor atributelor, dar PromptCookbook le recomandă, iar XHTML le impune. Ghilimelele sunt uneori obligatorii: o valoare care conține spații nu se va afișa corect fără ele. PromptCookbook pune întotdeauna valorile atributelor între ghilimele.

Ghilimele lipsă

O valoare title cu spații, dar fără ghilimele, care nu se afișează corect.

O pagină care arată de ce contează ghilimelele: un paragraf al cărui atribut title conține spații, dar este scris fără ghilimele, astfel încât nu se afișează corect. Folosește title=Description of PromptCookbook.

> Rezultat: pagină HTML completă

Prompt

O pagină care arată de ce contează ghilimelele: un paragraf al cărui atribut title conține spații, dar este scris fără ghilimele, astfel încât nu se afișează corect. Folosește title=Description of PromptCookbook.

Rezultat: pagină HTML completă

<!DOCTYPE html>
<html lang="ro">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Eroare de ghilimele</title>
</head>
<body>

<p title=Description of PromptCookbook>Acesta este un paragraf.</p>

</body>
</html>

Bine

O valoare de atribut pusă între ghilimele.

<a href="https://prompt-cookbook.com">Visit our HTML tutorial</a>

Greșit

Aceeași valoare de atribut fără ghilimele.

<a href=https://prompt-cookbook.com>Visit our HTML tutorial</a>

Ghilimele Simple sau Duble?

Ghilimelele duble în jurul valorilor de atribut sunt cele mai comune, dar funcționează și cele simple. Când valoarea în sine conține ghilimele duble, pune-o între ghilimele simple, și invers.

Exemplu

Ghilimele simple și duble folosite în jurul unor valori care conțin ghilimele.

O pagină cu două paragrafe care arată ghilimele simple vs. duble în jurul unei valori de atribut ce conține ea însăși ghilimele: unul title='John "ShotGun" Nelson' și unul title="John 'ShotGun' Nelson".

> Rezultat: pagină HTML completă

Prompt

O pagină cu două paragrafe care arată ghilimele simple vs. duble în jurul unei valori de atribut ce conține ea însăși ghilimele: unul title='John "ShotGun" Nelson' și unul title="John 'ShotGun' Nelson".

Rezultat: pagină HTML completă

<!DOCTYPE html>
<html lang="ro">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ghilimele simple și duble</title>
</head>
<body>

<p title='John "ShotGun" Nelson'>Acest paragraf folosește ghilimele simple.</p>
<p title="John 'ShotGun' Nelson">Acest paragraf folosește ghilimele duble.</p>

</body>
</html>

Rezumatul Capitolului

Pe scurt: toate elementele pot avea atribute. href de la <a> setează URL-ul unui link. src de la <img> setează calea imaginii, iar width și height îi setează dimensiunea, în timp ce alt oferă un text alternativ. Atributul style adaugă stilizare. Atributul lang de pe <html> declară limba paginii, iar title oferă informații suplimentare despre un element.