Saltar al contingut principal
Logo FPCode

HTML

Contingut

Tutorial introductori d'HTML per crear documents web ben estructurats: elements, atributs, text, enllaços, imatges, llistes, taules, formularis i HTML semàntic.

Per José Luís Ferrer Rodríguez | Actualitzat:

Introducció

HTML significa HyperText Markup Language. És el llenguatge de marques que s’utilitza per definir l’estructura d’una pàgina web: títols, paràgrafs, enllaços, imatges, llistes, taules, formularis i seccions del document.

HTML no és un llenguatge de programació. No serveix per crear algorismes ni per executar lògica complexa. La seva funció és descriure el contingut i donar-li significat perquè el navegador, els cercadors i les tecnologies de suport el puguin interpretar correctament.

Coneixement previ

  • Ús bàsic de fitxers i carpetes.
  • Ús elemental d’un navegador web.

Referències

Índex

  1. Què és HTML
  2. Crear un primer document HTML
  3. Estructura bàsica d’una pàgina
  4. Elements, etiquetes i atributs
  5. Text i encapçalaments
  6. Enllaços i imatges
  7. Llistes
  8. Taules
  9. Formularis bàsics
  10. HTML semàntic
  11. Errors freqüents
  12. Exercicis

1. Què és HTML

HTML organitza la informació mitjançant elements. Cada element indica quin tipus de contingut representa una part de la pàgina.

Per exemple:

<h1>La meva primera pàgina</h1>
<p>Aquest és un paràgraf de text.</p>

El navegador interpreta aquests elements i els mostra visualment. A més, altres sistemes poden entendre l’estructura: lectors de pantalla, motors de cerca, eines de validació o generadors de documentació.

2. Crear un primer document HTML

Crea una carpeta anomenada primer-html i dins un fitxer index.html.

Contingut inicial:

<!doctype html>
<html lang="ca">
  <head>
    <meta charset="UTF-8">
    <title>La meva primera pàgina</title>
  </head>
  <body>
    <h1>Hola, HTML</h1>
    <p>Aquesta és la meva primera pàgina web.</p>
  </body>
</html>

Obre el fitxer amb el navegador. Veuràs el títol principal i el paràgraf.

3. Estructura bàsica d’una pàgina

Un document HTML sol tenir aquestes parts:

<!doctype html>
<html lang="ca">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Títol de la pàgina</title>
  </head>
  <body>
    Contingut visible de la pàgina
  </body>
</html>

Parts principals:

PartFunció
<!doctype html>Indica que el document usa HTML modern.
<html>Element arrel del document.
<head>Metadades, títol, enllaços a estils i configuració.
<body>Contingut visible per a l’usuari.
<meta charset="UTF-8">Permet usar caràcters com accents i ela geminada.
<title>Títol que apareix a la pestanya del navegador.

4. Elements, etiquetes i atributs

Un element HTML normalment té etiqueta d’obertura, contingut i etiqueta de tancament.

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

Alguns elements poden incloure atributs. Els atributs afegeixen informació addicional.

<a href="https://www.fpcode.es">Visitar FPCode</a>

En aquest exemple:

  • <a> crea un enllaç.
  • href indica l’adreça de l’enllaç.
  • Visitar FPCode és el text visible.

Alguns elements no necessiten contingut intern, com meta o img.

<img src="logo.png" alt="Logotip del lloc">

5. Text i encapçalaments

HTML ofereix elements per estructurar text.

<h1>Títol principal</h1>
<h2>Subtítol</h2>
<p>Aquest és un paràgraf amb informació.</p>

Els encapçalaments van de h1 a h6. No s’han d’usar per la seva mida visual, sinó pel seu nivell jeràrquic.

També existeixen elements per donar significat a fragments concrets:

<p>Aquest text té <strong>importància</strong> i aquest té <em>èmfasi</em>.</p>

strong indica importància. em indica èmfasi. Encara que el navegador sol mostrar-los com a negreta i cursiva, la seva funció principal és semàntica.

6. Enllaços i imatges

Els enllaços permeten navegar a una altra pàgina o recurs.

<a href="https://developer.mozilla.org/">MDN Web Docs</a>

També pots enllaçar a pàgines locals:

<a href="contacte.html">Contacte</a>

Les imatges s’insereixen amb img:

<img src="imatges/perfil.jpg" alt="Foto de perfil d'una alumna">

L’atribut alt és important perquè descriu la imatge per a persones que usen lectors de pantalla o per a casos en què la imatge no carrega.

7. Llistes

HTML permet crear llistes no ordenades i ordenades.

Llista no ordenada:

<ul>
  <li>HTML</li>
  <li>CSS</li>
  <li>JavaScript</li>
</ul>

Llista ordenada:

<ol>
  <li>Crear el fitxer HTML</li>
  <li>Escriure l'estructura bàsica</li>
  <li>Obrir-lo al navegador</li>
</ol>

Cada element de la llista s’escriu amb li.

8. Taules

Les taules serveixen per representar dades tabulars, no per maquetar pàgines.

<table>
  <thead>
    <tr>
      <th>Llenguatge</th>
      <th>Ús</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>HTML</td>
      <td>Estructura</td>
    </tr>
    <tr>
      <td>CSS</td>
      <td>Presentació</td>
    </tr>
  </tbody>
</table>

Elements principals:

  • table: taula completa.
  • thead: capçalera.
  • tbody: cos de la taula.
  • tr: fila.
  • th: cel·la d’encapçalament.
  • td: cel·la de dades.

9. Formularis bàsics

Els formularis permeten recollir dades de l’usuari.

<form action="/contacte" method="post">
  <label for="nom">Nom</label>
  <input id="nom" name="nom" type="text">


  <label for="email">Correu electrònic</label>
  <input id="email" name="email" type="email">


  <button type="submit">Enviar</button>
</form>

Bones pràctiques:

  • Usa label associat a cada camp mitjançant for i id.
  • Usa el tipus d’input adequat: text, email, password, number, etc.
  • Usa button type="submit" per enviar el formulari.
  • No depenguis només del text visual del placeholder.

10. HTML semàntic

HTML semàntic significa usar elements que descriuen el significat del contingut.

<header>
  <h1>FPCode</h1>
</header>


<nav>
  <a href="/tutorials">Tutorials</a>
  <a href="/about">Sobre el projecte</a>
</nav>


<main>
  <article>
    <h2>Introducció a HTML</h2>
    <p>HTML permet estructurar documents web.</p>
  </article>
</main>


<footer>
  <p>Projecte educatiu d'informàtica.</p>
</footer>

Elements útils:

ElementÚs
headerCapçalera d’una pàgina o secció.
navZona de navegació.
mainContingut principal de la pàgina.
articleContingut independent.
sectionSecció temàtica.
footerPeu de pàgina o secció.

Usar semàntica millora l’accessibilitat, el SEO i la mantenibilitat.

11. Errors freqüents

ErrorExempleCorrecció
Oblidar el doctypecomençar directament amb <html>afegir <!doctype html>
No indicar idioma<html><html lang="ca">
Usar diversos h1 sense criteritítols desordenatsmantenir jerarquia lògica
Usar taules per maquetartaula per col·locar columnes visualsusar CSS per a maquetació
Ometre alt en imatges<img src="foto.jpg">afegir alt descriptiu
No associar etiquetes en formularislabel sense forconnectar for amb l’id del camp

12. Exercicis

Exercici 1: Estructura bàsica d'una pàgina HTML

Crea un fitxer index.html amb l’estructura bàsica d’una pàgina HTML.

Exercici 2: Encapçalaments i seccions

Afegeix un h1, dues seccions amb h2 i diversos paràgrafs.

Exercici 3: Llistes i enllaços

Crea una llista ordenada amb els teus tres llocs web preferits i afegeix enllaços a cadascun.

Exercici 4: Imatges

Afegeix una imatge amb un text alternatiu correcte.

Exercici 5: Taula de llenguatges web

Crea una taula amb tres llenguatges web i la seva funció principal.

Exercici 6: Formulari de contacte

Dissenya un formulari de contacte amb nom, correu i missatge.

Exercici 7: HTML semàntic

Reestructura la pàgina usant header, nav, main, article i footer.

Amb aquests fonaments ja pots crear documents HTML senzills, ben estructurats i preparats per treballar després amb CSS, JavaScript, accessibilitat i validació web.