44.3 Crear un archivo HTML

A través de un editor de texto plano como Notepad++ o del “Bloc de notas” es posible crear un archivo HTML, simplemente guardándolo con la extensión .html. Éste se puede visualizar a través del navegador, aunque sólo de forma local. En los notebooks de python se puede visualizar el código html tanto en celdas de texto como en celdas de código, aunque el despliegue en celdas de código es más similar al del navegador; esta última visualización es posible, declarando en el inicio de la celda de código %%html.

44.3.1 Sintaxis

  • Cada elemento (salvo algunas etiquetas de tipo vacío) tiene apertura y cierre: <etiqueta> contenido </etiqueta>.
  • Las etiquetas de tipo vacío no tienen contenido ni cierre.
  • Las etiquetas pueden ser escritas en mayúsculas o minúsculas indistintamente.
  • Los comentarios se escriben de la forma: <–[Texto aquí]—>.
  • Este lenguaje no requiere sangría, los espacios, tabulaciones y saltos de línea del teclado escritos dentro de una etiqueta no tienen efecto visible en la página.
  • A pesar de no ser un requisito, es buena práctica dejar sangría cuando se coloca una etiqueta al interior de otra. En algunas referencias se le llama elemento hijo a una etiqueta interna, y elemento padre a la etiqueta que la contiene.

44.3.2 Estructura

Un documento HTML está formando por un encabezado y un cuerpo, En el encabezado se encuentra el título de la página, los estilos de cada elemento y metadatos. Mientras que en el cuerpo está el texto visible en el navegador.

La primera línea es una declaración del tipo de documento, necesaria desde la versión HTML5, y no necesita cierre. Esto indica que es un documento HTML. Después se encuentra la etiqueta HTML que encierra todo el documento, y al interior de ella se encuentran el encabezado y el cuerpo.

44.3.3 Hello world!

En este primer ejemplo de documento html obtendremos el clásico Hello world!. Desde el editor escribimos el siguiente código y guardamos el archivo con extensión .html

<!DOCTYPE html>
<html>
  <head>
  <title>Hello</title>
  </head>

  <body>
  <h1>Hello world!</h1>
  </body>
</html>

Al abrir el archivo desde el navegador se observará algo similar a la siguiente imagen: