Exemple de bază în HTML

Exemple de Bază HTML

Acest capitol arată câteva exemple de bază HTML. E în regulă dacă unele tag-uri îți sunt noi; acestea sunt explicate în capitolele următoare.

Documente HTML

Fiecare document HTML trebuie să înceapă cu o declarație a tipului de document: <!DOCTYPE html>.

Documentul propriu-zis începe cu <html> și se termină cu </html>. Partea vizibilă a paginii se pune între <body> și </body>.

Exemplu

Un document HTML de bază cu un titlu și un paragraf.

Un document HTML de bază cu un doctype, html și body, conținând un h1 "Primul meu titlu" și un paragraf "Primul meu paragraf."

> Rezultat: pagină HTML completă

Prompt

Un document HTML de bază cu un doctype, html și body, conținând un h1 "Primul meu titlu" și un paragraf "Primul meu paragraf."

Rezultat: pagină HTML completă

<!DOCTYPE html>
<html lang="ro">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Documente</title>
</head>
<body>

<h1>Primul meu titlu</h1>
<p>Primul meu paragraf.</p>

</body>
</html>

Declarația <!DOCTYPE>

Declarația <!DOCTYPE> îi spune browserului tipul documentului, ceea ce îl ajută să afișeze pagina corect.

Trebuie să apară o singură dată, chiar la începutul paginii, înainte de orice tag HTML. Nu este sensibilă la majuscule.

Doctype HTML5

Declarația doctype folosită pentru HTML5.

<!DOCTYPE html>

Titluri HTML

Titlurile HTML se creează cu tag-urile <h1> până la <h6>. <h1> este cel mai important titlu, iar <h6> este cel mai puțin important.

Exemplu

Trei titluri de importanță descrescătoare.

O pagină care arată trei titluri HTML de importanță descrescătoare: un h1 "Acesta este titlul 1", un h2 "Acesta este titlul 2" și un h3 "Acesta este titlul 3".

> Rezultat: pagină HTML completă

Prompt

O pagină care arată trei titluri HTML de importanță descrescătoare: un h1 "Acesta este titlul 1", un h2 "Acesta este titlul 2" și un h3 "Acesta este titlul 3".

Rezultat: pagină HTML completă

<!DOCTYPE html>
<html lang="ro">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Titluri</title>
</head>
<body>

<h1>Acesta este titlul 1</h1>
<h2>Acesta este titlul 2</h2>
<h3>Acesta este titlul 3</h3>

</body>
</html>

Paragrafe HTML

Paragrafele HTML se creează cu tag-ul <p>.

Exemplu

Două paragrafe, fiecare în propriul tag <p>.

O pagină cu două paragrafe: "Acesta este un paragraf." și "Acesta este un alt paragraf.", fiecare în propria etichetă p.

> Rezultat: pagină HTML completă

Prompt

O pagină cu două paragrafe: "Acesta este un paragraf." și "Acesta este un alt paragraf.", fiecare în propria etichetă p.

Rezultat: pagină HTML completă

<!DOCTYPE html>
<html lang="ro">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Paragrafe</title>
</head>
<body>

<p>Acesta este un paragraf.</p>
<p>Acesta este un alt paragraf.</p>

</body>
</html>

Linkuri HTML

Linkurile HTML se creează cu tag-ul <a>. Destinația linkului se setează în atributul href. Atributele oferă informații suplimentare despre un element, și vei afla mai multe despre ele într-un capitol ulterior.

Exemplu

Un link către site-ul PromptCookbook.

O pagină cu un singur link creat cu eticheta a, text "Acesta este un link", care indică spre https://prompt-cookbook.com folosind atributul href.

> Rezultat: pagină HTML completă

Prompt

O pagină cu un singur link creat cu eticheta a, text "Acesta este un link", care indică spre https://prompt-cookbook.com folosind atributul href.

Rezultat: pagină HTML completă

<!DOCTYPE html>
<html lang="ro">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Link</title>
</head>
<body>

<a href="https://prompt-cookbook.com">Acesta este un link</a>

</body>
</html>

Imagini HTML

Imaginile HTML se creează cu tag-ul <img>. Fișierul sursă (src), textul alternativ (alt), width și height se dau ca atribute.

Exemplu

O imagine cu sursă, text alt, lățime și înălțime.

O pagină cu o imagine creată cu eticheta img, src "PromptCookbook.jpg", text alt "PromptCookbook", lățime 104 și înălțime 142.

> Rezultat: pagină HTML completă

Prompt

O pagină cu o imagine creată cu eticheta img, src "PromptCookbook.jpg", text alt "PromptCookbook", lățime 104 și înălțime 142.

Rezultat: pagină HTML completă

<!DOCTYPE html>
<html lang="ro">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Imagine</title>
</head>
<body>

<img src="PromptCookbook.jpg" alt="PromptCookbook" width="104" height="142">

</body>
</html>

Cum să Vezi Sursa HTML

Poți vedea codul HTML din spatele oricărei pagini web. Pentru a vedea codul sursă, apasă CTRL + U, sau dă click dreapta pe pagină și alege „View Page Source”; aceasta deschide o filă nouă cu codul HTML al paginii.

Pentru a inspecta un singur element, dă click dreapta pe el și alege „Inspect”. Aceasta afișează atât HTML-ul, cât și CSS-ul, și le poți chiar edita pe loc în panoul care se deschide.