HTML, siglas en inglés de HyperText Markup Language, hace referencia al lenguaje de marcado para la elaboración de páginas web.
HTML: es un lenguaje de marcación que sirve para definir el contenido de las páginas web. Se compone en base a etiquetas, también llamadas marcas o tags, con las cuales conseguimos expresar las partes de un documento, cabecera, cuerpo, encabezados, párrafos, etc. En definitiva, el contenido de una página web.
es el primer lenguaje que debe aprender cualquier persona interesada en construir un sitio web. A partir del HTML podemos pasar a muchos otros lenguajes interesantes que sirven para hacer cosas diversas y más avanzadas. Es decir, sea cual sea la tecnología, herramienta o gestor de contenido que nos hayamos propuesto aprender, o que tengamos que usar en nuestro día a día, HTML siempre será el lenguaje en el que toda web se construye y, por tanto, es de obligado conocimiento para todos.
Una muy breve historia de estos lenguajes para conocimiento general:
Etiquetas:
La etiqueta es el elemento básico del código HTML. Es un bloque de contenido que puede tener naturaleza diversa, desde un párrafo a una imagen o un vídeo, por ejemplo.
Las etiquetas se engloban entre signos menor y mayor que y tienen un inicio y un cierre. Dentro de estos signos mayor y menor que se coloca el nombre de la etiqueta. Por ejemplo:
<p>Esto es un párrafo.</p>
La anterior etiqueta <p> sirve para indicar el inicio de un párrafo. Dentro figura su contenido y finalmente tenemos la etiqueta de cierre del párrafo </p>.
Muchas etiquetas tienen atributos para ajustar su comportamiento o definir alguna de sus propiedades. Por ejemplo, la etiqueta <a> para crear enlaces tiene el atributo href, donde se coloca la URL a la que va dirigido un enlace.
<a href="https://mundos-informaticos.blogspot.com/p/revista-digital.html">Enlace a Mundos Informaticos</a>
Esqueleto de un documento HTML
Un documento HTML, una página web, contiene un árbol de etiquetas, que tiene una organización básica. La etiqueta raíz de un documento HTML es <html> y dentro tiene dos etiquetas principales:
<head>: con la información de cabecera de la página. Es información que en principio no aparecerá en el cuerpo de la página, pero que sirve para saber de qué trata la página, cómo deben interpretarla los distintos clientes web, etc.
<body>: que es la información del cuerpo, es decir, lo que se verá en el navegador cuando el usuario entre.
Además, hay algunas otras etiquetas básicas de control, como podemos ver en el siguiente esqueleto de documento HTML básico. Ejemplo:
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Título del documento HTML</title>
</head>
<body>
</body>
</html>
La primera etiqueta (DOCTYPE) indica el tipo de documento. Esta etiqueta debe estar siempre al principio. Fue definido y simplificado así desde HTML 5, ya que antes el doctype se expresaba con una etiqueta mucho mayor.
Posteriormente tenemos la etiqueta <html>, con el atributo "lang" opcional. En este caso hemos indicado que el idioma es español.
Luego encontramos el <head>, que tiene varias etiquetas. Las importantes son:
Para acabar, el <body> contendrá la mayor parte de las etiquetas, con todo el marcado necesario para definir el contenido completo que se verá en la página.
Una muy breve historia de estos lenguajes para conocimiento general:
- HTML 1: fue la primera versión, creada por Tim Berners-Lee en 1991.
- HTML 2: la segunda versión apareció en 1994 y se terminó en 1996 con la aparición de HTML 3.0, esta es la versión que en realidad plantea las bases de las siguientes versiones de HTML. Las reglas y el funcionamiento de esta versión están dadas por el W3C (mientras que la primera versión fue creada por una persona).
- HTML 3: apareció en 1996, esta nueva versión de HTML, añade muchas posibilidades al lenguaje como tablas, applets, scripts, posicionamiento de texto alrededor de imágenes, etc.
- HTML 4: Esta es la versión más común de HTML (en concreto, es HTML 4.01). Apareció por primera vez en 1998 y propone el uso de marcos (que dividen una página web en varias partes), tablas más complejas, mejoras en las formas, etc. Más importante aún, esta versión permite por primera vez utilizar hojas de estilo del famoso CSS.
- HTML 5.2: es la última versión. Aún no está muy extendida, llama mucho la atención porque trae muchas mejoras como la posibilidad de incluir fácilmente vídeos, mejorar el contenido, nuevas características para los formularios, etc. Esta es la versión que vamos a describir en esta documentación. El estándar está completo desde el año 2014.
La etiqueta es el elemento básico del código HTML. Es un bloque de contenido que puede tener naturaleza diversa, desde un párrafo a una imagen o un vídeo, por ejemplo.
Las etiquetas se engloban entre signos menor y mayor que y tienen un inicio y un cierre. Dentro de estos signos mayor y menor que se coloca el nombre de la etiqueta. Por ejemplo:
<p>Esto es un párrafo.</p>
La anterior etiqueta <p> sirve para indicar el inicio de un párrafo. Dentro figura su contenido y finalmente tenemos la etiqueta de cierre del párrafo </p>.
Muchas etiquetas tienen atributos para ajustar su comportamiento o definir alguna de sus propiedades. Por ejemplo, la etiqueta <a> para crear enlaces tiene el atributo href, donde se coloca la URL a la que va dirigido un enlace.
<a href="https://mundos-informaticos.blogspot.com/p/revista-digital.html">Enlace a Mundos Informaticos</a>
Esqueleto de un documento HTML
Un documento HTML, una página web, contiene un árbol de etiquetas, que tiene una organización básica. La etiqueta raíz de un documento HTML es <html> y dentro tiene dos etiquetas principales:
<head>: con la información de cabecera de la página. Es información que en principio no aparecerá en el cuerpo de la página, pero que sirve para saber de qué trata la página, cómo deben interpretarla los distintos clientes web, etc.
<body>: que es la información del cuerpo, es decir, lo que se verá en el navegador cuando el usuario entre.
Además, hay algunas otras etiquetas básicas de control, como podemos ver en el siguiente esqueleto de documento HTML básico. Ejemplo:
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Título del documento HTML</title>
</head>
<body>
</body>
</html>
La primera etiqueta (DOCTYPE) indica el tipo de documento. Esta etiqueta debe estar siempre al principio. Fue definido y simplificado así desde HTML 5, ya que antes el doctype se expresaba con una etiqueta mucho mayor.
Posteriormente tenemos la etiqueta <html>, con el atributo "lang" opcional. En este caso hemos indicado que el idioma es español.
Luego encontramos el <head>, que tiene varias etiquetas. Las importantes son:
- Charset, siendo UTF-8 el recomendado. Lógicamente es importante que ese juego de caracteres se esté usando realmente al guardar el archivo con el código .html. Si usamos algún editor orientado a programadores seguramente se guarde con UTF-8 o al menos tengas la opción de escoger este juego de carácteres.
- Title, que es lo que mostrará el navegador en la pestaña donde se muestre esta página. También es muy importante para que Google y otros motores identifiquen bien el contenido. Hay otras etiquetas en el <head> que son realmente aconsejables. El caso más claro es el del viewport. También es el lugar correcto para importar estilos CSS, por ejemplo.
Para acabar, el <body> contendrá la mayor parte de las etiquetas, con todo el marcado necesario para definir el contenido completo que se verá en la página.