HTML: estructura básica de una web

Las páginas web no son más que una serie de documentos que se estructuran de una forma en la que el navegador (Chrome, Firefox, Edge...) puedan leerlos y mostrar por pantalla una web.

En esta entrada me voy a centrar en la estructura de una web, que se establece en HTML en un fichero.

Una página web se puede crear con tantos ficheros como veamos necesarios, pero mínimo tiene que tener 1 con el HTML.

Estructura


Una página escrita en HTML5 tiene siempre esta estructura:

<!DOCTYPE html>
<html>

    <head>

        <title>Titulo de mi web</title>

    </head>

    <body>

        Contenido

    </body>

</html>

La etiqueta DOCTYPE es obligatoria para indicar que estamos utilizando la versión de HTML5 (última versión de HTML).

La etiqueta HEAD se utiliza para el título que aparece en la pestaña del navegador, que estilos se van a utilizar (rutas o código CSS) y si se va a utilizar lógica (funcionalidades que puede darnos JavaScript por ejemplo).

La etiqueta BODY se utiliza para escribir el contenido que se va a mostrar en la pantalla del navegador.

Ya para finalizar este documento, se cierra la etiqueta HTML, para indicar que todo eso va en el fichero HTML.

Las etiquetas se pueden escribir tanto en mayúscula como en minúscula, pero por convenio se escriben en minúscula, al igual que se puede escribir todo el código sin espaciado, pero al hacerlo facilitamos la lectura a futuras modificaciones de código por parte de ti o futuros desarrolladores.

Todas las etiquetas se abren y se cierran <etiqueta></etiqueta>

Formas en la visualización y organización de los datos

Se pueden organizar en bloque o en línea. 
En bloque estarían las etiquetas:
  • h1, h2, h3, h4, h5 y h6: estas etiquetas se utilizan para los títulos, donde h1 es el título de mayor pero y por lo tanto con un tamaño de fuente mayor y h6 es el de menor que nos permite HTML.
  • div: se utiliza para agrupar contenido, su funcionamiento es similar al de la etiqueta p, pero sin dejar la misma separación entre párrafos que tendría la etiqueta <p></p>
  • p: es un párrafo en HTML, cuando se termina de escribir el texto en él, el navegador detecta que estás haciendo un "intro" (salto de línea).
En línea estarían las etiquetas:
  • a: se utiliza para insertar un enlace.
  • strong: se utiliza para resaltar un texto (poner la negrita en un word por ejemplo).
  • i: se utiliza para poner en cursiva un texto.
Esto se ve mejor probando, así que os dejo por aquí el uso de estas etiquetas con el código (en esta web en la que os lo dejo podéis editar el código y ver el resultado sin necesidad de descargar).

See the Pen HTML Bloque vs Línea by Eva (@evapikachu) on CodePen.



Para programar en HTML no hace falta un programa específico, con un bloc que notas os puede valer, aunque siempre es mejor con editores como Visual Studio, Notepad++ y similares ya que se puede autocompletar las etiquetas y verlas con diferentes colores.

Comentarios

Entradas populares de este blog

Minterms y Maxterms

Sumador y restador con puertas lógicas

Teorema de expansión de Shannon