Diferencias entre una página web y un sitio web

Una página web es un único documento electrónico que se puede visualizar en un navegador y que está codificado en lenguaje HTML. Cada página web tiene una dirección web (una “URL”) única.

En cambio, un sitio web es el conjunto de páginas web pertenecientes a un mismo dominio.

Qué es el HTML (HyperText Markup Language)

HTML son las siglas de “HyperText Markup Language”, lo que se puede traducir en español a “Lenguaje de marcado de hipertexto (texto con enlaces)”.

Eso quiere decir que permite “marcar” el texto mediante unas etiquetas especiales que le añaden semántica.

Por ejemplo: 

¿Qué ha pasado aquí? Pues que simplemente añadiendo la etiqueta <h1> le hemos añadido una información semántica muy útil a la frase que indica que esto no es una frase cualquiera sino un título (fíjate en la “h” de “header” en inglés) de nivel 1.

Esto es muy útil porque, por ejemplo, le sirve al navegador web para aplicar ciertas pautas de diseño que faciliten la lectura como diferentes tamaños de letra a los títulos según su nivel jerárquico, de modo que destaquen en la lectura.

Otro ejemplo es el buscador de Google. Si alguien busca, por ejemplo, “cómo hacer una página web”, al ver que son palabras que coinciden con el título principal de la página, esto le indicará a Google que esa página tiene que ver probablemente mucho con lo que el usuario está buscando.

Como vemos con estos dos ejemplos, el marcado que proporciona HTML permite hacer muchas más cosas con estos contenidos que con un texto normal y corriente sin marcado. Ese es el propósito básico del HTML, aparte de permitir enlazar las páginas entre sí y crear así la “web” de Internet.

Conceptos HTML fundamentales: Etiquetas, elementos y atributos HTML

A lo largo del tiempo se han desarrollado diferentes versiones de HTML siendo la más usada la versión HTML 5. 

Empezamos viendo el código HTML de una página web:

Por ejemplo, una versión extremadamente simplificada de ésta página, tendría un código HTML como el siguiente:

El ejemplo empieza con una etiqueta especial que es <!DOCTYPE HTML>, es simplemente una etiqueta especial que tiene que ir al principio de todo fichero HTML e identifica al fichero como un documento en formato HTML versión 5.

Lo que sigue son etiquetas anidadas que forman una estructura jerárquica (excepto la línea del DOCTYPE). Fíjate que siempre hay una etiqueta de apertura y una etiqueta de cierre que es la misma etiqueta, pero con una barra invertida delante del nombre de la etiqueta.

Estas etiquetas, junto con el contenido que envuelven, forman lo que se conoce como un elemento HTML.

En el ejemplo podrás observar que hay una estructura básica compuesta por las etiquetas <html>, <head> y <body>. Esto es la estructura básica de cualquier página web.

<html> es el elemento raíz de la página, es simplemente el elemento del que tienen que “colgar” todos los demás, no tiene más función que esa. <head> es la cabecera de la página, una sección con información descriptiva de la página, etc. que no se visualiza como tal en la página, eso le corresponde a la etiqueta <body>. En <body> irán los elementos que vemos realmente dentro del navegador como tales.

Fíjate también en cómo se abren y cierran las etiquetas, por ejemplo, la etiqueta “<title>” (etiqueta de apertura) y “</title>” (etiqueta de cierre). A su vez, estas etiquetas pueden contener a otras etiquetas, como es el caso de <head> que es la que encierra a la etiqueta o elemento “title”.

Si seguimos, verás que varios niveles de títulos con etiquetas <h1> hasta <h3>. Esto sería lo equivalente, por ejemplo, a los estilos de títulos “Título 1”, “Título 2” y “Título 3” en Microsoft Word. En HTML dispones de un total de 6 niveles, de h1 a h6.

Por otra parte, puedes ver varias etiquetas <p>, éstas corresponden a los párrafos que vienen a continuación de los títulos y para las cuales hemos puesto solamente un pequeño extracto de texto como ejemplo.

Fíjate especialmente en las etiquetas tipo <a> que son los enlaces. Ésta es, si cabe, la etiqueta por excelencia del HTML, la que permite crear los hiperenlaces que son lo que hace de la web la web.

Con esto podemos introducir, además, otro concepto fundamental del HTML: los atributos.

Si echamos un vistazo con atención, en el caso de la etiqueta <a>, antes del corchete de cierre vienen dos palabras: “href” y “target”. Estas palabras son dos atributos y sirven para especificar parámetros adicionales en una etiqueta. De esta manera le podemos dar mucho más juego a las etiquetas.

En ejemplo concreto el atributo “href” indica la URL de la página enlazada y con el atributo “target” indicamos que, además, queremos que cuando el usuario haga clic en él, la página correspondiente se abra en otra pestaña del navegador.

¿Es una buena idea hacer un sitio web entero con HTML?

Ahora que ya te puedes hacer una idea concreta de lo que es una página HTML, quiero mencionar también otra cuestión que me parece muy importante plantearte antes de que decidas a ponerte a hacer páginas web con HTML:

Aunque todas las páginas web estén compuestas por HTML, hoy en día ya no es necesario picar el HTML que has visto antes “a pelo”. Es más, suele ser generalmente la peor opción, la más laboriosa y la menos productiva.

Hoy en día, si quieres crear un sitio web, la fórmula normal suele ser algún tipo de herramienta como WordPress o Joomla etc. que te permiten crear los contenidos en HTML de una manera mucho más eficiente usando editores visuales.

Además, con este tipo de herramientas puedes añadir mucha funcionalidad (comentarios, feed RSS, etc.) que con una página HTML en principio no puedes implementar o que, al menos, supondrían un esfuerzo muy grande y necesitar programar con lenguajes de programación avanzados como JavaScript.

¿Quiere decir que eso no tiene sentido aprender HTML?

En absoluto.

La razón es muy simple: aunque, en general, trabajes con herramientas como las mencionadas siempre hay ocasiones en las cuales para una cosa concreta que quieras hacer te será más cómodo hacer eso en concreto con HTML. Por otra parte, es muy bueno que sepas HTML para que puedas revisar el HTML que generan ya que algunas veces contiene fallos o artefactos que no convienen y conviene “limpiarlo” un poco si quieres dejar el contenido perfecto.

HTML5 Es la quinta revisión importante del lenguaje HTML. Su principal objetivo es mejorar el lenguaje añadiendo soporte para las últimas tecnologías multimedia, así como manteniendo el código leíble al humano y entendible para la máquina y dispositivos (navegadores, etc.).

HTML5 ofrece nuevas características (elementos, atributos, manejadores de eventos, y APIs) para desarrollos de páginas web más simples y para formas más complejas de manejo.