Atribute

Un atribut HTML oferă informații suplimentare despre un element HTML.

Despre atributele HTML:

  • Toate elementele HTML pot avea atribute
  • Atributele oferă informații suplimentare despre un element
  • Atributele sunt întotdeauna specificate în tag-ul de pornire
  • Atributele apar de obicei în perechi nume / valoare precum: nume = "valoare"

Atributul href

Legăturile HTML sunt definite cu tag-ul <a>. Link-ul este specificat în atributul href.

Imagini

Cum se adaugă imagini pe un site?
  1. Se downloadează imaginea dorită
  2. Se salvează imaginea imaginea în folderul în care vor fi și fișierele site-ului
  3. Se copiază numele imaginii
  4. Se introduce în atributul src (source) al imaginii numele imagini(sursă)

Imaginile HTML sunt definite cu tag-ul <img>.

Atributul src

src reprezintă sursa imaginii. Astfel, pentru a pune o imagine pe site avem nevoie de codul:

<img src=”imagine.jpg”>

Observație: Tag-ul <img> nu se închide, deoarece o imagine nu are un început sau un final.

Atributele width, height

Reprezintă width-ul și height-ul imaginii. Dimensiunile pot fi scrise în:

Cele mai folosite unități de măsură sunt px (=pixel), și % (procente).

Când folosim px și când folosim procente?

px este folosit atunci când avem nevoie de o imagine statică, indiferent de dimensiunile ecranului pe care o vizualizăm

% este folosit atunci când avem nevoie de o imagine dinamică. De exemplu, o imagine poate avea width=50% din dimensiunea ecranului și height=20%.

Atributul alt

Atributul alt furnizează un text alternativ pentru o imagine, dacă utilizatorul din anumite motive nu îl poate vizualiza (din cauza conexiunii lente, a unei erori în atributul src sau dacă utilizatorul utilizează un cititor de ecran).

Valoarea atributului alt ar trebui să descrie imaginea.

Atributul style

Atributul style este o punte între HTML și CSS.

Ce este CSS?

CSS = Cascading Style Sheets

CSS este partea de “style” a unei pagini web și ajută la:

  1. adăugarea culorilor
  2. adăugarea de fundal
  3. mărimea textului
  4. fontul textului
  5. decorații precum: bold, italic, underline, și multe altele
  6. alinierea elementelor în pagină
  7. dimensiunea elementelor
  8. adăugarea bordurilor (borders)
  9. formatarea imaginilor
  10. alinierea elementulor în pagină în funcție de dimensiunile ecranului

Atributul style poate fi adăugat oricărui element.

De asemenea, se poate crea o porțiune mai mare de <style> în interiorul documentului unde se pot crea clase de CSS, despre care vom discuta în unul dintre capitolele următoare.

În HTML se pot adăuga mai multe caracteristici într-un singur style. De exemplu:

<p style=”color:red; margin-left: 10px; font-size: 50%;”> Paragraf </p>

Rezumatul capitolului

1. Toate elementele HTML pot avea atribute

2. Atributul style poate fi folosit pentru orice element HTML

3. Atributul href este folosit pentru link-uri

4. Atributele de width și height oferă informații despre mărime pentru imagini

5. Atributul alt oferă un text alternativ pentru imaginile care nu pot fi apar pe ecran

6. În HTML se folosesc întotdeauna nume de atribute lowercase

7. În HTML valorile atributelor sunt mereu cuprinse între "ghilimele"

Exerciții:

1. Downloadați imaginile de mai jos. Adăugați-le într-un fișier web. Introduceți dimensiuni convenabile în pixeli.

Soluţie

Soluţie


2. Folosind imaginile de la exercițiu anterior, introduceți-le într-un fișier web. Atribuiți-le dimensiuni adecvate în procente astfel încât să se încadreze pe un singur rând.

Soluţie

Soluţie


3. Pentru imaginile de la exercițiile anterioare adăugați câte un titlu semnificativ de culoare roșie, cea mai mare dimensiune și folosind atributul alt scrieți ce reprezintă fotografia.

Rezultat:

Soluţie

Soluţie


4. Adăugați link-uri către facebook și instagram pe imaginile de mai jos.

Soluţie

Soluţie


5. Folosind atributul style scrieți vertical, paragrafe, astfel încât acestea să aibă culoarea reprezentativă, precum în imaginea alăturată.

Soluţie

Soluţie


6. Adăugați paragrafelor de la exercițiul anterior un border de 2px solid, având culoarea literei. (litera R va avea culoarea roșie și un border roșu).

Soluţie

Soluţie


7. Formatati titlul “We learn HTML” astfel încât acesta să aibă culoarea gri, să fie subliniat, boldat, italic și să aibă o margine stânga de 30 de pixeli.

Un text se poate bolda în CSS folosind proprietatea font-weight: bold. Un text poate fi transformat în italic în CSS folosind proprietatea font-style: italic .

Soluţie

Soluţie


8. Formatati paragraful “We learn HTML” astfel încât fiecare cuvânt să fie scris pe un rând diferit și să fie aliniate pe centru (alinierea textului se face cu ajutorul style=”text-align: … “). Textul poate fi aliniat: “center”, “left”, “right”, “justify”, etc.

Soluţie

Soluţie


You could leave a comment if you were logged in.