Skip to main content

Història i Estructura bàsica

Aquest capítol presenta una introducció a l'HTML, la seva història, els primers estàndards i les estructures bàsiques que composen una pàgina web. També aprendrem a utilitzar les Dev Tools del navegador per explorar i entendre millor el funcionament d'una web.

Breu història d’HTML​

  • 1980: Tim Berners-Lee (CERN) proposa "Enquire", un sistema d’hipertext per compartir documents.
  • 1990: Desenvolupa el primer HTML, servidor web i navegador WorldWideWeb.
  • 1991: Publica "HTML Tags" amb 18 elements bàsics com <p>, <h1> a <h6>, i <a>.
  • 1993: Neix Mosaic, un dels primers navegadors gràfics.
  • 1994: Es funda el W3C per establir estàndards del web.
  • 1995–1998: Surt HTML 2.0, 3.2 i finalment 4.0 amb suport per CSS.
  • 2004–2014: El grup WHATWG impulsa HTML5 amb suport per <video>, <audio>, <canvas>, nous elements semàntics i APIs avançades.
  • 2020: W3C i WHATWG arriben a un acord per treballar conjuntament. Neix l’HTML Vivent, un estàndard viu i en evolució contínua.

Què és HTML?​

HTML (HyperText Markup Language) és el llenguatge estàndard per crear pàgines web.

  • Defineix l’estructura d’una web
  • Indica al navegador com ha de mostrar el contingut
<!DOCTYPE html>
<html lang="ca">
  <head>
    <title>Títol de la pàgina</title>
  </head>
  <body>
    <h1>El meu primer títol</h1>
    <p>El meu primer paràgraf.</p>
  </body>
</html>

Etiquetes bàsiques d'HTML​

<html>​

  • Element arrel del document HTML
  • Pot incloure l'atribut lang per indicar l'idioma
<html lang="es">
  ...
</html>
  • Conté metadades, scripts, enllaços a arxius externs
<head>
  <title>Mi título</title>
</head>

<body>​

  • Contingut visible: text, imatges, enllaços, vídeos...
<body>
  <h1>Mi título</h1>
</body>

Altres etiquetes estructurals​

<h1> a <h6>​

Títols jeràrquics

<h1>Heading 1</h1>
<h6>Heading 6</h6>

<p> – Paràgraf​

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

<div> – Contenidor genèric​

<div>
  <h1>Títol</h1>
  <p>Paràgraf</p>
</div>

<section> – Secció temàtica​

<section>
  <h1>Capítol</h1>
  <p>Text relacionat</p>
</section>

Diferència entre <div> i <section>

  • <div> s’utilitza com a contenidor genèric sense significat semàntic
  • <section> s’utilitza per estructurar contingut relacionat temàticament
  • Evita fer servir <section> com a substitut d’un <div> si només vols aplicar estils

Dev Tools del navegador​

Elements​

  • Mostra l'HTML i CSS d'un element seleccionat

Console​

  • Permet executar codi JavaScript i veure missatges, errors i logs

Sources​

  • Accés al codi font, possibilitat d’afegir punts d’interrupció i fer debugging

Network​

  • Mostra totes les peticions fetes pel navegador, capçaleres, codis de resposta, etc.

Selecció d'elements​

  • Amb la icona d’una fletxa, pots clicar a qualsevol part de la pàgina i veure’n l’estructura HTML

Accés ràpid a Dev Tools: F12 o clic dret > "Inspeccionar"

Aquest mòdul et proporciona les eines i coneixements bàsics per entendre què és HTML, com estructurar una pàgina i com començar a inspeccionar el codi des del navegador. Ara ja estàs preparat per crear les teves primeres webs!