Escribe para buscar…

Text

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

document-text-87397c.gitlab.ioweb/document-text
Esta página todavía no se ha traducido — se muestra en su idioma original:Català

IMPORTANT!! No donar format automàtic perquè desquadra algun HTML

Introducció

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

Editor

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

Instal·la VS Code.

Obre un terminal de Powershell

Crea una carpeta amb el nom html, i dins de la carpeta un fitxer hello.html:

ps
mkdir html
new-item html/hello.html

Obre el directori html amb VS Code:

shell
skills hello

A continuació tens un exemple de document HTML:

html
<!DOCTYPE html>
<html>
  <head>
    <title>Hello World!</title>
  </head>
  <body>
    <h1>Hello World!</h1>
    <p>Welcome to the world of HTML ...</p>
  </body>
</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:

Task

Modifica el contingut de l’element p del fitxer hello.html.

Show solution
html
<!DOCTYPE html>
<html>
<head>
    <title>Hello World!</title>
</head>
<body>
    <h1>Dolphin</h1>
    <p>Dolphins regularly rank at the top of the intelligence spectrum.</p>
</body>
</html>

Estás leyendo una vista previa.

Inicia sesión para leer el artículo completo. Cualquier cuenta abre 4 artículos gratuitos al mes; el alumnado y el profesorado leen las páginas de su curso sin límite.

Iniciar sesión