El Projecte | Sobre nosaltres | Contribuir | Donacions | Llicència

HOME

En aquest tema, aprendrem a crear la nostra primera pàgina HTML des de zero. Aquest és un pas fonamental per a qualsevol desenvolupador web, ja que ens permetrà entendre la base sobre la qual es construeixen tots els llocs web.

Estructura bàsica d'una pàgina HTML

Abans de començar a escriure codi, és important conèixer l'estructura bàsica d'una pàgina HTML. Aquí tens un exemple senzill:

<!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>Hola, món!</h1>
    <p>Aquesta és la meva primera pàgina HTML.</p>
</body>
</html>

Explicació del codi

<!DOCTYPE html>: Aquesta línia indica al navegador que el document és un document HTML5.
<html lang="ca">: L'etiqueta <html> és l'arrel del document HTML. L'atribut lang="ca" especifica que l'idioma del document és el català.
<head>: Aquesta secció conté metadades sobre el document, com ara el títol i la codificació de caràcters.
<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">: Aquesta línia assegura que la pàgina es mostri correctament en dispositius mòbils.
<title>La meva primera pàgina HTML</title>: Defineix el títol de la pàgina, que es mostrarà a la pestanya del navegador.
<body>: Aquesta secció conté el contingut visible de la pàgina.
<h1>Hola, món!</h1>: Un encapçalament de nivell 1.
<p>Aquesta és la meva primera pàgina HTML.</p>: Un paràgraf de text.

Creant la teva pròpia pàgina HTML

Pas 1: Obre un editor de text

Pots utilitzar qualsevol editor de text per escriure codi HTML. Alguns editors populars són:

Visual Studio Code
Sublime Text
Atom
Notepad++ (per a Windows)
TextEdit (per a macOS)

Pas 2: Escriu el codi HTML

Copia i enganxa l'exemple d'estructura bàsica en un nou fitxer.

Pas 3: Desa el fitxer

Desa el fitxer amb l'extensió .html. Per exemple, pots anomenar-lo index.html.

Pas 4: Obre el fitxer en un navegador

Obre el fitxer HTML desat en un navegador web (com Chrome, Firefox, Safari, etc.). Hauries de veure una pàgina amb el text "Hola, món!" i un paràgraf que diu "Aquesta és la meva primera pàgina HTML."

Exercici pràctic

Objectiu

Crea una pàgina HTML que contingui els següents elements:

Un títol de la pàgina que digui "Pàgina de Benvinguda".
Un encapçalament de nivell 1 amb el text "Benvinguts a la meva pàgina".
Un paràgraf amb una breu descripció sobre tu mateix.

Solució

Aquí tens un exemple de com podria ser la teva pàgina:

<!DOCTYPE html>
<html lang="ca">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Pàgina de Benvinguda</title>
</head>
<body>
    <h1>Benvinguts a la meva pàgina</h1>
    <p>Hola! Em dic [El teu nom] i aquesta és la meva primera pàgina HTML. M'agrada programar i estic emocionat d'aprendre més sobre desenvolupament web.</p>
</body>
</html>

Errors comuns i consells

Errors comuns

Oblidar tancar etiquetes: Assegura't de tancar totes les etiquetes que obres. Per exemple, <p> ha de tenir un </p>.
No incloure el <!DOCTYPE html>: Això pot fer que el navegador no interpreti correctament el document com HTML5.
Desar el fitxer amb una extensió incorrecta: Assegura't de desar el fitxer amb l'extensió .html.

Consells

Indentació: Utilitza la indentació per fer el teu codi més llegible. La majoria dels editors de text tenen opcions per a l'auto-indentació.
Comentaris: Utilitza comentaris per anotar el teu codi. Els comentaris en HTML es fan així: .

Conclusió

Ara que has creat la teva primera pàgina HTML, ja tens una base sòlida per continuar aprenent més sobre HTML. En els següents temes, explorarem com formatar text, afegir imatges, crear enllaços i molt més. Continua practicant i experimentant amb el codi per reforçar els teus coneixements.

Creant la teva primera pàgina HTML

Estructura bàsica d'una pàgina HTML

Explicació del codi

Creant la teva pròpia pàgina HTML

Pas 1: Obre un editor de text

Pas 2: Escriu el codi HTML

Pas 3: Desa el fitxer

Pas 4: Obre el fitxer en un navegador

Exercici pràctic

Objectiu

Solució

Errors comuns i consells

Errors comuns

Consells

Conclusió

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