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

Etiquetes i elements HTML

Següent ►
►

Introducció

En aquest tema, explorarem les etiquetes i elements HTML, que són la base de qualsevol pàgina web. Aprendrem què són, com es defineixen i com s'utilitzen per estructurar i donar format al contingut d'una pàgina web.

Què són les etiquetes i elements HTML?

Etiquetes HTML

Les etiquetes HTML són els components bàsics que defineixen els elements d'una pàgina web. Cada etiqueta està delimitada per claudàtors angulats (< >). Hi ha etiquetes d'obertura i etiquetes de tancament.

  • Etiqueta d'obertura: <nom_etiqueta>
  • Etiqueta de tancament: </nom_etiqueta>

Elements HTML

Un element HTML està format per una etiqueta d'obertura, el contingut i una etiqueta de tancament.

<nom_etiqueta>Contingut</nom_etiqueta>

Exemple

<p>Això és un paràgraf.</p>

En aquest exemple, <p> és l'etiqueta d'obertura, Això és un paràgraf. és el contingut, i </p> és l'etiqueta de tancament.

Tipus d'elements HTML

Elements de bloc

Els elements de bloc ocupen tot l'ample disponible del seu contenidor i comencen en una nova línia. Alguns exemples inclouen:

  • <div>
  • <p>
  • <h1> a <h6>
  • <ul> i <ol>

Elements en línia

Els elements en línia només ocupen l'ample necessari per al seu contingut i no comencen en una nova línia. Alguns exemples inclouen:

  • <span>
  • <a>
  • <img>
  • <strong>

Estructura d'un document HTML

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

<!DOCTYPE html>
<html>
<head>
    <title>El meu primer document HTML</title>
</head>
<body>
    <h1>Benvingut al meu lloc web</h1>
    <p>Això és un paràgraf de text.</p>
</body>
</html>

Explicació de l'estructura

  • <!DOCTYPE html>: Defineix el tipus de document i la versió d'HTML.
  • <html>: L'element arrel que conté tot el document HTML.
  • <head>: Conté metadades sobre el document, com el títol i els enllaços a fulls d'estil.
  • <title>: Defineix el títol del document que apareix a la pestanya del navegador.
  • <body>: Conté el contingut visible de la pàgina web, com encapçalaments, paràgrafs, imatges, etc.

Exemples pràctics

Exemple 1: Encapçalaments

<h1>Això és un encapçalament de nivell 1</h1>
<h2>Això és un encapçalament de nivell 2</h2>
<h3>Això és un encapçalament de nivell 3</h3>

Exemple 2: Paràgrafs i enllaços

<p>Això és un paràgraf amb un <a href="https://www.example.com">enllaç</a>.</p>

Exemple 3: Llistes

<ul>
    <li>Element de llista 1</li>
    <li>Element de llista 2</li>
    <li>Element de llista 3</li>
</ul>

Exercicis pràctics

Exercici 1: Crear una pàgina HTML bàsica

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

  • Un títol de nivell 1 amb el text "Benvingut al meu lloc web".
  • Un paràgraf amb el text "Això és un paràgraf de text".
  • Una llista desordenada amb tres elements de llista.

Solució

<!DOCTYPE html>
<html>
<head>
    <title>Benvingut al meu lloc web</title>
</head>
<body>
    <h1>Benvingut al meu lloc web</h1>
    <p>Això és un paràgraf de text.</p>
    <ul>
        <li>Element de llista 1</li>
        <li>Element de llista 2</li>
        <li>Element de llista 3</li>
    </ul>
</body>
</html>

Exercici 2: Afegir un enllaç i una imatge

Modifica la pàgina HTML anterior per afegir:

  • Un enllaç a "https://www.example.com" amb el text "Visita Example".
  • Una imatge amb l'URL "https://www.example.com/imatge.jpg" i un text alternatiu "Imatge d'exemple".

Solució

<!DOCTYPE html>
<html>
<head>
    <title>Benvingut al meu lloc web</title>
</head>
<body>
    <h1>Benvingut al meu lloc web</h1>
    <p>Això és un paràgraf de text.</p>
    <ul>
        <li>Element de llista 1</li>
        <li>Element de llista 2</li>
        <li>Element de llista 3</li>
    </ul>
    <p><a href="https://www.example.com">Visita Example</a></p>
    <img src="https://www.example.com/imatge.jpg" alt="Imatge d'exemple">
</body>
</html>

Conclusió

En aquesta secció, hem après què són les etiquetes i elements HTML, la seva estructura bàsica i com utilitzar-los per crear contingut en una pàgina web. Hem vist exemples pràctics i hem realitzat exercicis per reforçar els conceptes apresos. En el proper tema, explorarem com formatar text en HTML utilitzant diferents etiquetes.

◄ 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