Tutorial Elemente fundamentale ale HTML

Elemente fundamentale ale HTML

Ce este HTML?

HTML (HyperText Markup Language) este limbajul standard de markup pentru crearea paginilor web. El descrie structura unei pagini web și conținutul acesteia. HTML nu este un limbaj de programare, ci un limbaj de markup, ceea ce înseamnă că folosește etichete (tag-uri) pentru a defini elementele dintr-un document.

Structura de bază a unui document HTML:

Un document HTML minim are următoarea structură:

<!DOCTYPE html>
<html lang="ro">
<head>
    <meta charset="UTF-8">
    <title>Titlul paginii</title>
</head>
<body>
    </body>
</html>

<!DOCTYPE html>: Declară tipul documentului ca fiind HTML5.
<html lang="ro">: Elementul rădăcină al paginii HTML. lang="ro" specifică limba paginii (română).
<head>: Conține metadate despre pagină, cum ar fi titlul paginii, setul de caractere, etc. Aceste informații nu sunt afișate direct pe pagină, însă sunt foarte importante pentru ca motoarele de căutare să înțeleagă mai bine conținutul.
- <meta charset="UTF-8">: Specifică codificarea caracterelor ca UTF-8, care suportă majoritatea caracterelor din lume.
- <title>Titlul paginii</title>: Definește titlul care apare în bara de titlu a browserului sau în tab-ul paginii.
<body>: Conține conținutul vizibil al paginii web (text, imagini, link-uri, etc.).

Etichete HTML (Tag-uri):

Etichetele HTML sunt folosite pentru a marca elementele din document. Majoritatea etichetelor au o etichetă de deschidere și una de închidere.

Etichetă de deschidere: <tag>
Etichetă de închidere: </tag>

Exemplu: <p>Acesta este un paragraf.</p>

Exemple de etichete HTML uzuale:

Etichete pentru text:
- <p>: Paragraf.
```
<p>Acesta este primul paragraf.</p>
<p>Acesta este al doilea paragraf.</p>
```
- <h1> până la <h6>: Titluri de diferite nivele (de la cel mai important la cel mai puțin important).
```
<h1>Titlu principal</h1>
<h2>Subtitlu</h2>
<h3>Sub-subtitlu</h3>
```
- <strong>: Text important (bold).
```
<p>Acest cuvânt este <strong>important</strong>.</p>
```
- <em>: Text subliniat (italic).
```
<p>Acest cuvânt este <em>subliniat</em>.</p>
```
- <br>: Linie nouă (fără a crea un nou paragraf). Este o etichetă singulară (nu are etichetă de închidere).
```
<p>Prima linie<br>A doua linie</p>
```
Etichete pentru link-uri:
- <a>: Ancoră (link).
  Atributul href specifică destinația link-ului.
```
<a href="https://programatic.io">Link către Programatic.io</a>
```
Etichete pentru imagini:
- <img>: Imagine.
  Atributul src specifică calea către imagine, iar atributul alt specifică un text alternativ pentru imagine (util pentru accesibilitate și dacă imaginea nu se încarcă). Este o etichetă singulară.
```
<img src="imagine.jpg" alt="Descrierea imaginii">
```

Etichete pentru liste:

<ul>: Listă neordonată.

<ul>
    <li>Elementul 1</li>
    <li>Elementul 2</li>
    <li>Elementul 3</li>
</ul>

<ol>: Listă ordonată.

<ol>
    <li>Primul element</li>
    <li>Al doilea element</li>
    <li>Al treilea element</li>
</ol>

Etichete pentru tabele:

<table>: Tabel.
<tr>: Rând în tabel.
<th>: Celulă de antet în tabel.

<td>: Celulă de date în tabel.

<table>
    <tr>
        <th>Film</th>
        <th>An</th>
    </tr>
    <tr>
        <td>Interstellar</td>
        <td>2014</td>
    </tr>
    <tr>
        <td>Godfather</td>
        <td>1972</td>
    </tr>
</table>

Atribute HTML:

Atributele oferă informații suplimentare despre elemente. Se specifică în eticheta de deschidere, sub forma nume_atribut="valoare_atribut". Am văzut deja exemple cu atributele href, src, alt și lang.

Exemplu complet:

<!DOCTYPE html>
<html lang="ro">
<head>
    <meta charset="UTF-8">
    <title>Exemplu HTML</title>
</head>
<body>
    <h1>Bun venit pe pagina mea!</h1>
    <p>Acesta este un exemplu de pagină HTML.</p>
    <img src="imagine.jpg" alt="O imagine exemplificativă">
    <p>Mai multe informații găsiți pe <a href="https://programatic.io">Programatic</a>.</p>
    <ul>
        <li>Elementul 1</li>
        <li>Elementul 2</li>
    </ul>
</body>
</html>

Acest tutorial acoperă elementele de bază ale HTML. Există multe alte etichete și atribute disponibile, dar acestea sunt suficiente pentru a începe crearea paginilor web simple. În tutorialele următoare vom explora mai multe tag-uri, vom crea pagini HTML mai complexe și vom adăuga elemente de stil care sunt absolut necesare pentru a oferi personalitate paginilor noastre.