KULTUROSFERA

Atribute HTML

Ce sunt atributele HTML?

Atributele HTML oferă informații suplimentare despre elementele HTML.

Reguli generale pentru atribute

  • Toate elementele HTML pot avea atribute
  • Atributele oferă informații suplimentare
  • Ele sunt scrise întotdeauna în tag-ul de început
  • De obicei apar sub forma: nume="valoare"

Atributul href

Tag-ul <a> definește un link (hiperlegătură). Atributul href specifică adresa URL către care duce link-ul.

Exemplu:

<a href="https://www.w3schools.com">Vizitează W3Schools</a>

Atributul src

Tag-ul <img> este folosit pentru a afișa o imagine într-o pagină HTML. Atributul src specifică calea către imagine.

Exemplu:

<img src="img_girl.jpg">

Tipuri de URL-uri pentru src

URL absolut

Face legătura către o imagine de pe alt site:

<img src="https://www.w3schools.com/images/img_girl.jpg">

URL relativ

Face legătura către o imagine din site-ul tău:

<img src="img_girl.jpg">
<img src="/images/img_girl.jpg">

Atributele width și height

Aceste atribute definesc lățimea și înălțimea imaginii (în pixeli).

Exemplu:

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

Atributul alt

Atributul alt afișează un text alternativ dacă imaginea nu poate fi încărcată.

Exemplu:

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

Exemplu cu imagine lipsă:

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

Atributul style

Permite adăugarea de stiluri direct pe element (culoare, font, mărime etc.).

Exemplu:

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

Atributul lang

Se adaugă în tag-ul <html> și specifică limba paginii web.

Exemplu:

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

Limbă + țară:

<html lang="en-US">

Atributul title

Afișează un tooltip când duci mouse-ul peste element.

Exemplu:

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

Recomandări W3C

Folosește mereu litere mici

Corect:

<p title="Exemplu">

Greșit:

<p TITLE="Exemplu">

Pune mereu valorile în ghilimele

Corect:

<a href="https://www.w3schools.com/html/">Tutorial HTML</a>

Greșit:

<a href=https://www.w3schools.com/html/>Tutorial HTML</a>

Caz în care ghilimelele sunt OBLIGATORII

Greșit:

<p title=Descriere W3Schools>

Corect:

<p title="Descriere W3Schools">

LABORATOR (NU se modifică structura)

Copiați snippet-ul de mai jos într-un fișier nou .html și completați rândurile marcate cu TODO conform cerințelor fiecărui exercițiu.

<!DOCTYPE html>
<html TODO>
<head>
  <title>Laborator HTML</title>
</head>
<body>

  <h1>Laborator Atribute HTML</h1>

  <!-- EXERCITIUL 1 -->
  <a TODO>Vizitează W3Schools</a>

  <br><br>

  <!-- EXERCITIUL 2 -->
  <img TODO>

  <br><br>

  <!-- EXERCITIUL 3 -->
  <img src="peisaj.jpg" TODO>

  <br><br>

  <!-- EXERCITIUL 4 -->
  <img src="masina.jpg" TODO>

  <br><br>

  <!-- EXERCITIUL 5 -->
  <p TODO>Acesta este un paragraf informativ.</p>

</body>
</html>

EXERCIȚIUL 1 – Atributul href (20 puncte)

Completează doar acest rând:

<a TODO>Vizitează W3Schools</a>

Cerință:

  • Adaugă atributul href
  • Link către: https://www.w3schools.com

EXERCIȚIUL 2 – Atributul src (20 puncte)

Completează doar acest rând:

<img TODO>

Cerință:

  • Folosește atributul src
  • Imaginea se numește logo.png
  • Imaginea este în același folder cu fișierul HTML

EXERCIȚIUL 3 – Atributele width și height (20 puncte)

Completează doar acest rând:

<img src="peisaj.jpg" TODO>

Cerință:

  • Lățime: 300
  • Înălțime: 200

EXERCIȚIUL 4 – Atributul alt (20 puncte)

Completează doar acest rând:

<img src="masina.jpg" TODO>

Cerință:

  • Atribut alt
  • Text: "Mașină sport roșie"

EXERCIȚIUL 5 – Atributele title și style (20 puncte)

Completează doar acest rând:

<p TODO>Acesta este un paragraf informativ.</p>

Cerință:

  • Culoare text: albastru
  • Tooltip la hover: "Paragraf explicativ"

Verifică-te

Activitate

Se încarcă activitatea…

Activitate

Se încarcă activitatea…