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

Introducció a HTML

Següent ►
►

En aquest tema, explorarem els fonaments d'HTML (HyperText Markup Language), que és el llenguatge bàsic utilitzat per crear pàgines web. HTML proporciona l'estructura d'un lloc web, permetent-nos definir elements com encapçalaments, paràgrafs, enllaços, imatges i molt més.

Què és HTML?

HTML és un llenguatge de marcatge utilitzat per descriure l'estructura d'una pàgina web. Utilitza etiquetes per definir diferents elements de la pàgina. Aquestes etiquetes són interpretades pels navegadors per mostrar el contingut de manera adequada.

Característiques clau d'HTML:

  • Etiquetes: HTML utilitza etiquetes per marcar el començament i el final dels elements. Les etiquetes solen venir en parelles, com <p> i </p>.
  • Atributs: Les etiquetes poden tenir atributs que proporcionen informació addicional sobre l'element, com id, class, src, etc.
  • Estructura jeràrquica: Els elements HTML poden estar imbricats, creant una estructura jeràrquica.

Estructura bàsica d'un document HTML

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

<!DOCTYPE html>
<html lang="ca">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>El Meu Primer Document HTML</title>
</head>
<body>
    <h1>Benvinguts al Món d'HTML!</h1>
    <p>Aquest és el meu primer paràgraf en HTML.</p>
</body>
</html>

Explicació del codi:

  • <!DOCTYPE html>: Declara el tipus de document i assegura que el navegador interpreti el document com HTML5.
  • <html lang="ca">: L'etiqueta <html> conté tot el document HTML. L'atribut lang especifica l'idioma del document.
  • <head>: Conté metadades sobre el document, com el conjunt de caràcters (<meta charset="UTF-8">), la configuració del viewport per a disseny responsive, i el títol de la pàgina (<title>).
  • <body>: Conté el contingut visible de la pàgina web, com encapçalaments (<h1>) i paràgrafs (<p>).

Elements HTML comuns

Encabezats

Els encapçalaments s'utilitzen per definir títols i subtítols. Van des de <h1> (el més important) fins a <h6> (el menys important).

<h1>Encapçalament Principal</h1>
<h2>Subtítol</h2>

Paràgrafs

Els paràgrafs es defineixen amb l'etiqueta <p>.

<p>Aquest és un paràgraf d'exemple.</p>

Enllaços

Els enllaços es creen amb l'etiqueta <a> i l'atribut href.

<a href="https://www.example.com">Visita Example</a>

Imatges

Les imatges s'insereixen amb l'etiqueta <img> i l'atribut src.

<img src="imatge.jpg" alt="Descripció de la imatge">

Exercici Pràctic

Crea un document HTML senzill que inclogui:

  1. Un títol de pàgina.
  2. Un encapçalament principal.
  3. Dos paràgrafs de text.
  4. Un enllaç a una pàgina externa.
  5. Una imatge amb una descripció alternativa.

Solució:

<!DOCTYPE html>
<html lang="ca">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document HTML Senzill</title>
</head>
<body>
    <h1>Benvinguts a la Meva Pàgina Web</h1>
    <p>Aquest és el primer paràgraf de la meva pàgina web.</p>
    <p>Aquest és el segon paràgraf, on explico més coses.</p>
    <a href="https://www.wikipedia.org">Visita Wikipedia</a>
    <img src="imatge.jpg" alt="Una imatge descriptiva">
</body>
</html>

Conclusió

En aquesta introducció a HTML, hem après sobre l'estructura bàsica d'un document HTML i alguns dels elements més comuns. Aquestes bases són essencials per a qualsevol desenvolupador web, ja que HTML és el fonament sobre el qual es construeixen les pàgines web. En el següent tema, explorarem CSS, que ens permetrà estilitzar i donar format al contingut HTML.

◄ Anterior
◄
Següent ►
►
El Projecte | Sobre nosaltres | Contribuir | Donacions | Llicència
© Copyright 2024. Tots els drets reservats