Lectie 4 Formatare elemente cu HTML

HTML (HyperText Markup Language) este limbajul standard utilizat pentru crearea și formatarea paginilor web. Prin intermediul etichetelor HTML, putem formata și stiliza diferite elemente ale unei pagini web, cum ar fi textul, imagini, link-uri și tabele.

Formatarea textului

Una dintre cele mai comune utilizări ale HTML este formatarea textului. Putem utiliza etichetele <b> și <i> pentru a evidenția textul.

Eticheta <b> este utilizată pentru a face textul să fie mai bold, în timp ce eticheta <i> este utilizată pentru a face textul să fie italic.

De exemplu, pentru a face textul “Hello, world!” bold, putem utiliza următorul cod:<p><b>Hello, world!</b></p>

Rezultatul va fi afișat ca:

Hello, world!

Formatarea imaginilor

HTML ne permite, de asemenea, să formatați și să stilizați imagini. Putem utiliza atributul style pentru a specifica diferite proprietăți de stil, cum ar fi lățimea, înălțimea și marginile imaginii.

De exemplu, pentru a afișa o imagine cu o lățime de 300 de pixeli și o înălțime de 200 de pixeli, putem utiliza următorul cod:<img src=”imagine.jpg” alt=”Imagine” style=”width: 300px; height: 200px;”>

Rezultatul va fi afișat ca:

Formatarea link-urilor

Link-urile sunt elemente importante în paginile web și pot fi, de asemenea, formate utilizând HTML. Putem utiliza eticheta <a> pentru a crea link-uri și putem utiliza atributul style pentru a le stiliza.

De exemplu, pentru a crea un link cu textul “Click aici” și pentru a-l face bold și italic, putem utiliza următorul cod:

<a href="https://www.example.com" style="font-weight: bold; font-style: italic;">Click aici</a>

Rezultatul va fi afișat ca:

Click aici

Formatarea tabelelor

Tabelele sunt utilizate pentru a organiza și afișa date într-un mod structurat. HTML ne oferă etichete speciale pentru a crea și formata tabele.

Pentru a crea o tabelă cu două coloane și două rânduri, putem utiliza următorul cod:

<table>
  <tr>
    <th>Coloană 1</th>
    <th>Coloană 2</th>
  </tr>
  <tr>
    <td>Rând 1, Celula 1</td>
    <td>Rând 1, Celula 2</td>
  </tr>
  <tr>
    <td>Rând 2, Celula 1</td>
    <td>Rând 2, Celula 2</td>
  </tr>
</table>

Rezultatul va fi afișat ca:

Coloană 1	Coloană 2
Rând 1, Celula 1	Rând 1, Celula 2
Rând 2, Celula 1	Rând 2, Celula 2

Formatarea elementelor cu HTML ne permite să adăugăm stil și structură paginilor web. Prin utilizarea etichetelor și a atributelor de stil, putem crea pagini web atractive și ușor de citit pentru utilizatori.

Este important să fim atenți la modul în care utilizăm etichetele și proprietățile de stil, pentru a asigura o experiență plăcută și coerentă pentru vizitatorii paginilor noastre web.

Quiz:

1. Care este scopul atributului <strong> în HTML?
   • A) Adaugă o înclinare textului.
   • B) Îngroașă textul, indicându-l ca fiind important.
   • C) Creează un efect de subliniere pentru text.
2. Cum se creează un efect de subliniere pentru text în HTML?
   • A) Folosind tagul <em>
   • B) Folosind tagul <u>
   • C) Folosind tagul <s>
3. Ce face tagul <mark> în HTML?
   • A) Adaugă un indice la text.
   • B) Creează un exponent în text.
   • C) Marchează textul pentru a-l evidenția.
4. Cum se adaugă un exponent în HTML?
   • A) Folosind tagul <sub>
   • B) Folosind tagul <sup>
   • C) Folosind tagul <mark>