El Projecte | Sobre nosaltres | Contribuir | Donacions | Llicència
HOME Els meus cursos Finalitzats
◄ Anterior
◄

Estructura bàsica de l'HTML

Següent ►
►

En aquesta secció, aprendrem sobre l'estructura bàsica d'un document HTML. Aquesta estructura és fonamental per a qualsevol pàgina web i proporciona el marc necessari perquè els navegadors puguin interpretar i mostrar el contingut correctament.

Components Principals d'un Document HTML

Un document HTML típic consta de les següents parts:

  1. Declaració del tipus de document (DOCTYPE)
  2. Element <html>
  3. Element <head>
  4. Element <body>

  1. Declaració del tipus de document (DOCTYPE)

La declaració <!DOCTYPE html> indica al navegador que el document està escrit en HTML5. Aquesta declaració ha d'estar a la primera línia del document.

<!DOCTYPE html>

  1. Element <html>

L'element <html> és l'element arrel de la pàgina HTML. Tots els altres elements HTML han d'estar continguts dins d'aquest element.

<html>
  <!-- Contingut de la pàgina -->
</html>

  1. Element <head>

L'element <head> conté metadades sobre el document, com ara el títol de la pàgina, enllaços a fulls d'estil, scripts, i altres informacions que no es mostren directament a la pàgina.

<head>
  <title>El meu primer document HTML</title>
</head>

Elements comuns dins del <head>:

  • <title>: Defineix el títol de la pàgina que es mostra a la pestanya del navegador.
  • <meta>: Proporciona metadades com la codificació de caràcters.
  • <link>: Enllaça fulls d'estil externs.
  • <style>: Conté CSS intern.
  • <script>: Inclou scripts de JavaScript.

  1. Element <body>

L'element <body> conté tot el contingut visible de la pàgina web, com ara paràgrafs, imatges, enllaços, taules, etc.

<body>
  <h1>Benvingut al meu lloc web</h1>
  <p>Aquesta és la meva primera pàgina HTML.</p>
</body>

Exemple complet d'un document HTML bàsic

A continuació, es mostra un exemple complet d'un document HTML bàsic que inclou tots els elements esmentats anteriorment:

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>El meu primer document HTML</title>
</head>
<body>
  <h1>Benvingut al meu lloc web</h1>
  <p>Aquesta és la meva primera pàgina HTML.</p>
</body>
</html>

Explicació del codi

  • <!DOCTYPE html>: Indica que el document està escrit en HTML5.
  • <html>: Element arrel que conté tot el contingut de la pàgina.
  • <head>: Conté metadades com el títol i la codificació de caràcters.
  • <meta charset="UTF-8">: Defineix la codificació de caràcters com UTF-8.
  • <title>: Defineix el títol de la pàgina.
  • <body>: Conté el contingut visible de la pàgina.
  • <h1>: Encapçalament de nivell 1.
  • <p>: Paràgraf de text.

Exercici pràctic

Exercici 1: Crear un document HTML bàsic

Crea un document HTML que contingui:

  1. Un títol que digui "La meva pàgina HTML".
  2. Un encapçalament de nivell 1 amb el text "Hola, món!".
  3. Un paràgraf amb el text "Aquesta és la meva primera pàgina HTML."

Solució

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>La meva pàgina HTML</title>
</head>
<body>
  <h1>Hola, món!</h1>
  <p>Aquesta és la meva primera pàgina HTML.</p>
</body>
</html>

Conclusió

En aquesta secció, hem après sobre l'estructura bàsica d'un document HTML, incloent la declaració DOCTYPE, els elements <html>, <head>, i <body>. Aquesta estructura és essencial per a qualsevol pàgina web i proporciona el marc necessari perquè els navegadors puguin interpretar i mostrar el contingut correctament.

En el següent tema, explorarem les diferents etiquetes i elements HTML que podem utilitzar per enriquir el contingut de les nostres pàgines web.

◄ Anterior
◄
Següent ►
►

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

El Projecte | Sobre nosaltres | Contribuir | Donacions | Llicència
© Copyright 2024. Tots els drets reservats