Logotipo horizontal de Diego C Martín colores invertidos, blanco y naranja para findo negro

Estructura básica de una página HTML

Categorías:  Autor: Diego C Martin 
Apuntes de HTML

Las instrucciones HTML están encerradas entre los caracteres: < y > y las llamamos etiquetas.

La mayoría de las etiquetas HTML requieren una marca de comienzo, cláusula de apertura y otra de finalización, cláusula de cierre.

La estructura básica de una página HTML es:

<!DOCTYPE html>
<html>
  <head>
  </head>
  <body>
    Cuerpo de la página.
  </body>
</html>

Una página HTML es un archivo que generalmente tiene como extensión los caracteres html. Por ejemplo podemos llamar a nuestra primera página con el nombre: pagina1.html

Estos son los elementos básicos que toda página HTML debe llevar.

Consideraciones sobre una página HTML

La primera etiqueta es DOCTYPE, la cual debe aparecer y sirve para informar al navegador acerca de la versión de HTML con la que está codificada nuestra página. La que se indica en el ejemplo es la de HTML5, y es la más simple si la comparamos con las anteriores.

Descubre más cosas sobre HTML5 en Novedades y estructura de páginas web HTML5

  • Después, la página comienza con la etiqueta: y finaliza con la etiqueta:
  • Las cláusulas de cierre tienen el mismo nombre que las de apertura, más el caracter /

Una página HTML tiene dos secciones muy bien definidas que son la cabecera:

<head>
</head>

Y el cuerpo de la página:

<body>
Cuerpo de la página.
</body>
  • Todo el texto que dispongamos dentro del aparece dentro del navegador tal cual lo hayamos escrito.
  • Todas las páginas tienen como mínimo esta estructura: cabecera y cuerpo.

Otra cosa importante es que el lenguaje HTML no es sensible a mayúsculas y minúsculas, es decir podemos escribirlo como más nos guste, además no requiere que dispongamos cada marca en una línea (podríamos inclusive escribir toda la página en una sola línea! cosa que no conviene ya que somos nosotros quienes tendremos que modificarla en algún momento).

Recuerda que dentro de los elementos HTML podemos meter lo que queramos. Img, tablas, listas, etc. Tal como iremos desarrollando en el resto de artículos relacionados.

Caso práctico:

Copia el código anterior con la estructura básica de la página en un archivo de texto y luego le cambias la extensión de .txt a .html.

Nota: puede que la extensión del archivo no sea visible por defecto en tu equipo, esto se puede cambiar en las opciones de carpeta de Windows.

Una vez hecho eso, la página pasa a abrirse de manera predefinida con el navegador web

Para volver a editar su contenido tendremos que seleccionar Abrir con.. y emplear un editor de texto como el Block de notas.

Editores de código para HTML

Normalmente, en diseño web empleamos editores de código que nos facilitan la escritura de los lenguajes de desarrollo. Echa un vistazo aquí al ranking con las mejores agencias de diseño web en Madrid de la mano de SortList.

Uno de los más populares actualmente es Visual Studio Code, aunque este puede ser un poco pesado, ya que está pensado para el uso de otros lenguajes de programación como JavaScript. Si sólo quieres editar HTML y CSS hay muchos otros mucho más livianos como Notepad++ o Bluefish.

Índice de artículos sobre HTML

Manuales descargables e imprimibles de HTML sin publicidad

Echa un vistazo al Curso Online de HTML5

Aquí puedes ver algunas clases del Curso de HTML5 gratis.

img-7

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Artículos de la misma categoría

crossmenu
linkedin facebook pinterest youtube rss twitter instagram facebook-blank rss-blank linkedin-blank pinterest youtube twitter instagram