Saltar al contenido

Categoría: 

Introducción a HTML

iniciarse en HTML

En un artículo anterior te relatábamos cómo nació la primera página web de la historia. Es el momento de hablar sobre HTML, que se ideó para poder estructurar el contenido en una página web. No es el objetivo de este artículo ahondar en aspectos técnicos, u ofrecer muchos ejemplos. Pensamos que una pequeña introducción a HTML te ayudará a entender cómo funcionan las web.

introduccion-html

HTML: La estructura de una web

Quizás aún no estás familiarizado con la programación web, pero seguramente ya habrás oído hablar de HTML, ¿no es así?

Habitualmente se suele dividir la programación de una web en tres direcciones: estructura, presentación e interactividad. HTML es el lenguaje que permite interpretar la estructura, de las otras dos direcciones hablaremos en otro momento.

portatil y html

¿Qué es la estructura de una página web? En general, al diseñar el contenido en una página web, se van añadiendo diferentes elementos predefinidos, como pueden ser títulos, párrafos, imágenes, etc. Al tener una serie de elementos identificables que tienen características en común, HTML nos permite etiquetar el contenido con palabras clave para que todo se interprete debidamente.

 

Un lenguaje de etiquetas

Las etiquetas son palabras clave que identifican lo que éstas encierran. De esta forma, una pareja de etiquetas delimita el contenido que se quiere etiquetar. Por ejemplo, para etiquetar un título:

<h1>Título principal</h1>

Una pareja de etiquetas se escribe de la siguiente forma: <[palabra clave]> …contenido… </[palabra clave]>. Hay muchas etiquetas, algunas para contenido visual, y otras para configurar la web.

pantalla html

Dentro de un archivo HTML hay dos secciones principales. La primera es el head, o lo que sería la cabecera. En esta sección se incluyen las opciones de configuración general. Y la segunda es el body, es decir, el cuerpo de la página. Es en esta parte donde se escribe todo el contenido de la página. Así pues, todo lo que hay en el head no es visible para el usuario, que solo ve en su pantalla que lo hay en el body.

 

Un ejemplo práctico

Para finalizar, te dejamos un ejemplo muy simple de cómo es un archivo HTML:
<html>
<head>
<meta charset="utf-8">
<title>Tu agencia de viajes de confianza</title>
</head>
<body>
<h1>Agencia de viajes</h1>
<p>¿Donde quieres ir este verano? En nuestra agencia te ayudaremos a seleccionare el mejor destino para tus vacaciones</p>
</body>
</html>

Tú mismo puedes ver el HTML de cualquier página que visites por la red. Algunos navegadores permiten al usuario ver el código HTML con la opción “Ver código fuente de la página” o alguna otra opción similar.

Open chat
Escríbenos
¿Cómo es el plugin de tus sueños? :)