Introducció

HTML (HyperText Markup Language) és el llenguatge estàndard utilitzat per crear pàgines web. És un llenguatge de marcatge que defineix l'estructura del contingut web. A diferència dels llenguatges de programació, HTML no és un llenguatge de programació, sinó un llenguatge de marcatge que utilitza etiquetes per descriure elements dins d'un document.

Conceptes Clau

HyperText: Fa referència a la capacitat de crear enllaços dins del text que permeten navegar d'una pàgina a una altra.
Markup Language: Un llenguatge de marcatge utilitza etiquetes per definir elements dins d'un document. Aquestes etiquetes no es mostren a l'usuari final, sinó que són interpretades pel navegador per mostrar el contingut de manera adequada.

Estructura Bàsica d'un Document HTML

Un document HTML típic té la següent estructura bàsica:

<!DOCTYPE html>
<html lang="ca">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document HTML</title>
</head>
<body>
    <h1>Hola, món!</h1>
    <p>Això és un paràgraf en HTML.</p>
</body>
</html>

Explicació del Codi

<!DOCTYPE html>: Aquesta declaració defineix el document com un document HTML5.
<html lang="ca">: L'etiqueta <html> és l'element arrel de la pàgina HTML. L'atribut lang especifica l'idioma del document.
<head>: Conté metadades sobre el document, com ara el títol, la codificació de caràcters, i informació de visualització.
- <meta charset="UTF-8">: Defineix la codificació de caràcters del document com UTF-8.
- <meta name="viewport" content="width=device-width, initial-scale=1.0">: Assegura que la pàgina es mostri correctament en diferents dispositius.
- <title>Document HTML</title>: Defineix el títol del document que es mostra a la pestanya del navegador.
<body>: Conté el contingut visible de la pàgina web.
- <h1>Hola, món!</h1>: Un encapçalament de nivell 1.
- <p>Això és un paràgraf en HTML.</p>: Un paràgraf de text.

Exercici Pràctic

Objectiu

Crear un document HTML bàsic que contingui un títol, un encapçalament i un paràgraf.

Instruccions

Obre el teu editor de text preferit (per exemple, Visual Studio Code, Sublime Text, Notepad++).
Crea un nou fitxer i desa'l amb l'extensió .html (per exemple, index.html).
Escriu el següent codi HTML dins del fitxer:

<!DOCTYPE html>
<html lang="ca">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>La meva primera pàgina HTML</title>
</head>
<body>
    <h1>Benvingut a la meva pàgina web</h1>
    <p>Aquesta és la meva primera pàgina web creada amb HTML.</p>
</body>
</html>

Desa el fitxer i obre'l en un navegador web per veure el resultat.

Solució

El codi proporcionat hauria de mostrar una pàgina web amb un encapçalament que diu "Benvingut a la meva pàgina web" i un paràgraf que diu "Aquesta és la meva primera pàgina web creada amb HTML."

Resum

En aquesta secció, hem après què és l'HTML i la seva importància en la creació de pàgines web. Hem explorat l'estructura bàsica d'un document HTML i hem creat un exemple pràctic per reforçar els conceptes apresos. En la següent secció, configurarem el nostre entorn de desenvolupament per treballar amb HTML de manera eficient.

Què és l'HTML?

Introducció

Conceptes Clau

Estructura Bàsica d'un Document HTML

Explicació del Codi

Exercici Pràctic

Objectiu

Instruccions

Solució

Resum

Curs d'HTML

Mòdul 1: Introducció a l'HTML

Mòdul 2: Formatació de text en HTML

Mòdul 3: Enllaços i mitjans en HTML

Mòdul 4: Taules en HTML

Mòdul 5: Formularis en HTML

Mòdul 6: Elements semàntics d'HTML5

Mòdul 7: Tècniques avançades d'HTML

Mòdul 8: Integració d'HTML i CSS

Mòdul 9: Disseny web responsiu

Mòdul 10: Millors pràctiques i accessibilitat

Mòdul 11: Projecte: Construint un lloc web complet