Escriu per cercar…

Text

Un document HTML és un document de text "pla" amb marques que indiquen el tipus de contingut, com s'ha de visualitzar, etc.

WebCodi
S'ensenya a
Llenguatges de marques i sistemes de gestió d’informacióDocuments estàticsASIXDAMDAWDAW-BIO

Introducció

Un document HTML és un document de text pla amb marques que indiquen el tipus de contingut, com s’ha de visualitzar, etc.

En aquesta activitat escriuràs els teus primers documents HTML i al final en publicaràs un a Internet.

Editor

Per treballar amb documents HTML normalment s’utilitza un editor de programari.

Instal·la Visual Studio Code tal com s’explica a Bàsic.

Obre un terminal de Powershell

Crea una carpeta amb el nom document-text:

ps
mkdir document-text

Obre el directori document-text amb VS Code.

A continuació tens un exemple de document HTML:

html
hello.html
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script src="https://tailwind.xtec.dev/tailwind.js"></script>
  <title>Hello World!</title>
</head>
<body class="prose p-5">
  <h1>Hello World!</h1>
  <p>Welcome to the world of HTML ...</p>
</body>
</html>

El <meta charset="UTF-8"> diu al navegador com està codificat el text del document.

Sense aquesta línia, quan obris el fitxer del teu disc el navegador ho ha d’endevinar, i els accents surten com à en comptes de à.

Crea el fitxer hello.html:

Copia el contingut del document HTML al fitxer hello.html que has creat.

VS Code té moltes ajudes per escriure HTML tal com s’explica en aquest document: HTML Programming.

Per exemple, si poses el punter del ratolí sobre l’element h1 t’explica el seu significat:

Instal·la l’extensió Live Preview (Microsoft) que et permet visualitzar el document en el mateix editor amb un navegador integrat:

Un cop has instal·lat l’extensió apareixerà una icona nova a la part superior dreta de l’editor:

Apreta la icona “Show Preview” ; apareixerà un nou panell a la dreta.

Pots veure que només apareix el text!

Tot el marcatge ha desaparegut, no es mostra!

I el text que està entre les marques <h1> i </h1> apareix més gran i fosc.

Què és el marcatge?

Tot el text que està dins dels caràcters < i > són marques.

Cada cop que modifiques el document l’HTML en el panell de l’esquerra, s’actualitza el navegador del panell de la dreta:

Exercici

Modifica el contingut dels elements h1 i p del fitxer hello.html.

Mostra la solució
html
hello.html
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script src="https://tailwind.xtec.dev/tailwind.js"></script>
  <title>Hello World!</title>
</head>
<body class="prose p-5">
  <h1>Dolphin</h1>
  <p>Dolphins regularly rank at the top of the intelligence spectrum.</p>
</body>
</html>

Marcatge

L’HTML té un conjunt de marques predefinides (“tags”) que tenen un significat “semàntic” per als navegadors i els buscadors.

Cada element està format per un “tag” d’obertura, un contingut i un “tag” de tancament.

Per exemple:

html
<p>Hello World!</p>

Estàs llegint una vista prèvia.

Inicia sessió amb Google per llegir la pàgina completa.

Inicia sessió amb Google

Amb qualsevol compte de Google. Només et demanarem que acceptis les condicions del servei.