<tag atribut="valoare">Conținut</tag>
Exemplu:
<a href="https://goai.ro" target="_blank">Vizitați GOAI</a>
Componente:
- <a> → tag de deschidere
- href="..." → atribut cu valoare
- target="..." → alt atribut
- Vizitați... → conținut (text)
- </a> → tag de închidere
Capitol gratuit
Structura de bază a unui document HTML
<tag atribut="valoare">Conținut</tag> Exemplu: <a href="https://goai.ro" target="_blank">Vizitați GOAI</a> Componente: - <a>...
Anatomia unui element HTML
Structura completă a unui document
<!DOCTYPE html>
<html lang="ro">
<head>
<!-- Meta informații (nu sunt vizibile pe pagină) -->
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Descrierea paginii pentru SEO">
<title>Titlul paginii - GOAI</title>
<!-- CSS extern -->
<link rel="stylesheet" href="style.css">
<!-- Favicon -->
<link rel="icon" href="favicon.ico">
</head>
<body>
<!-- Conținutul vizibil al paginii -->
<h1>Titlu principal</h1>
<p>Un paragraf de text.</p>
<!-- JavaScript extern -->
<script src="app.js" defer></script>
</body>
</html>Explicarea fiecărui element
| Element | Rol |
|---|---|
<!DOCTYPE html> | Declară documentul ca HTML5 (obligatoriu, prima linie) |
<html lang="ro"> | Elementul rădăcină, atributul lang specifică limba |
<head> | Conține meta-informații (nu sunt vizibile pe pagină) |
<meta charset="UTF-8"> | Setează codificarea caracterelor (suport diacritice) |
<meta name="viewport"> | Esențial pentru responsive design pe mobil |
<title> | Titlul din tab-ul browserului și rezultatele Google |
<body> | Conține tot conținutul vizibil al paginii |
Elemente block vs. inline
| Block | Inline |
|---|---|
| Ocupă toată lățimea disponibilă | Ocupă doar spațiul necesar |
| Începe pe o linie nouă | Rămâne pe aceeași linie |
<div>, <p>, <h1-h6>, <ul>, <section> | <span>, <a>, <strong>, <em>, <img> |
Elemente goale (self-closing)
Unele elemente nu au conținut și nu necesită tag de închidere:
<br> <!-- Line break -->
<hr> <!-- Linie orizontală -->
<img src="..."> <!-- Imagine -->
<input type="..."> <!-- Câmp de input -->
<meta ...> <!-- Meta informație -->
<link ...> <!-- Link extern (CSS, favicon) -->
<source ...> <!-- Sursă media -->Comentarii HTML
<!-- Acesta este un comentariu. Nu apare pe pagină. -->
<!--
Comentariu
pe mai multe
linii
-->
<!-- TODO: Adaugă secțiunea de contact -->
Atenție: Comentariile HTML sunt vizibile în codul sursă al paginii (View Source). Nu puneți niciodată informații sensibile (parole, chei API) în comentarii HTML.
Continuați cu restul cursului
Acesta este capitolul 2 din cele 14 ale cursului, cu 5 lecții din 60. Cumpărați cursul și parcurgeți tot conținutul în cont, cu progres salvat, test final și certificat.
Cumpărați cursul la 70 €