Estructura básica de una página web en HTML

Todos navegamos por internet, ya sea en Firefox o en otro navegador. Consecuentemente, todos tenemos una idea de lo que es una página web. Sin embargo, un número bastante menor de personas llega a conocer cuál es la estructura básica de una página web. La mayor parte de las webs que consultamos están escritas según un lenguaje muy particular, que seguro que habéis escuchado alguna vez: HTML. El lenguaje HTML proviene del inglés HiperText Markup Language, o lo que es lo mismo, lenguaje de marcas de hipertexto en nuestro idioma.

En esta entrada os voy a dar unas nociones básicas. De este modo, los que estáis comenzando con HTML podréis tener una idea algo más clara de cómo se estructura una web.

Estructura básica de una página web en lenguaje HTML

El lenguaje de programación HTML se basa en etiquetas de abrir y cerrar elementos. Dicho así puede sonar un poco abstracto, pero veamos un ejemplo de página web codificada en HTML muy sencilla para describir uno a uno esos elementos y lo que significan las etiquetas de abrir / cerrar.

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
<title>Esto es una prueba de página web en Viva el Software Libre</title>
	</head>
	<body>
		<header><h1>Título de Viva el Software Libre</h1></header>
	</body>
</html>

Este es el resultado de la página web anterior:

Estructura básica de una página web en HTML

Etiquetas básicas de una web HTML

Para comprender en profundidad qué significan todas esas etiquetas, es necesario conocer qué hace cada una de ellas.

<!DOCTYPE html> Informa al navegador sobre la versión del HTML, en este caso HTML 5.

<html></html> El código situado entre ellas tiene que ser interpretado como HTML. Además, entre estas dos etiquetas hay que señalar dos partes principales:

  • <head></head> Es la cabecera, es decir, la que incluye la información que necesita el navegador para que pueda ejecutarse adecuadamente la web. La información no será visible en el navegador. Es donde se ponen las características básicas de la web. Pueden incluir otras etiquetas dentro de ellas:
    • <meta> (no tiene cierre). Indica la codificación de los caracteres.
    • <title></title> Texto que se utiliza como título en la barra o pestaña del navegador.
    • <link> (no tiene cierre). Nos permite enlazar con un recurso externo, como puede ser un archivo CSS. Si es una hoja de estilo CSS tenemos que añadir en su interior rel=stylesheet.
    • <style></style> Esta etiqueta nos permite introducir código CSS en su interior.
    • <script></script> Nos permite invocar archivos externos JavaScript. Puede ser un enlace relativo o absoluto.
  • <body></body> Es el cuerpo. Dentro de estas etiquetas están los elementos que sí se van a ver en el navegador. Pueden incluir dentro otras etiquetas, como…
    • <header></header> Define el título.
    • <footer></footer> Se refiere a los pies de página.
    • <div></div> Hace referencia a las divisiones de la web.
    • <h1></h1> Encabezados y subencabezados. Van hasta <h6>
    • <p></p> Crea un párrafo de texto.
    • <br> (no tiene cierre). Equivale a un punto y aparte.
    • <strong></strong> o <b></b>. Negrita.
    • <i></i> o <em></em>. Cursiva.
    • <u></u>. Subrayado.
    • Pero también otras vistas en el <head></head>, como <link> o <script>. En este caso, sí que se visualizarán.

Algunas etiquetas extras y atributos de HTML

Lo que hemos visto anteriormente es la estructura básica de una página web escrita con lenguaje HTML.

Introducción de comentarios

Cuantas más líneas de código editemos, más complicado puede volverse el documento HTML. Para indicar qué hace cada parte de la web podemos añadir comentarios. Estos comentarios se añaden entre el código para informarnos de qué está haciendo. Para ello, dentro de la sección <body></body> podemos añadir comentarios no ejecutables que sirvan para enterarnos qué está haciendo el código.

<! - - Introducimos el comentario aquí - - >

Creación de listas

Podemos añadir también listas con puntos empleando <ul>.

<ul>
	<li></li>
</ul>

… o con números:

<ol>
	<li></li>
</ol>

Añadir imágenes

Para añadir imágenes no hace falta que añadamos una etiqueta de cierre:

<img src="ruta de acceso o dirección web">

Atributos en las etiquetas

Algunas etiquetas (como la vista antes de <img>) permiten modificar algunos aspectos mediante la inclusión de atributos siguiendo esta estructura: <etiqueta atributo=”valor”>

Añadir un id único la etiquetas, para identificarla en el futuro

<header id=”cabecera”></header>

Modificar el alineamiento del texto

<p align=”center”></p>

Es interesante mencionar que el desarrollo web HTML se integra muy bien con el lenguaje de estilo CSS.

7 comentarios en “Estructura básica de una página web en HTML”

Deja un comentario