Diseño Web – HTML y CSS - HTML etiquetas básicas
1) ¿Qué es HTML?
Definiéndolo de forma sencilla, “HTML es lo que se utiliza para crear la mayoría las páginas web de Internet”. Más concretamente, HTML es el lenguaje con el que se “escriben” estas páginas web.
Los diseñadores utilizan el lenguaje HTML para crear sus páginas web, los programas que utilizan los diseñadores generan páginas escritas en HTML y los navegadores que utilizamos los usuarios muestran las páginas web después de leer su contenido HTML.
2) Breve Historia
El origen de HTML se remonta a 1980, cuando el físico Tim Berners-Lee, trabajador del CERN (Organización Europea para la Investigación Nuclear) propuso un nuevo sistema de “hipertexto” para compartir documentos.
El primer documento formal con la descripción de HTML se publicó en 1991 bajo el nombre “HTML Tags” (Etiquetas HTML) y todavía hoy puede ser consultado online a modo de reliquia informática.
La primera propuesta oficial para convertir HTML en un standard se realizó en 1993 por parte del organismo IETF (Internet Engineering Task Force).
En 1995, el organismo IETF organiza un grupo de trabajo de HTML y consigue publicar, el 22 de septiembre de ese mismo año, el standard HTML 2.0. A pesar de su nombre, HTML 2.0 es el primer standard oficial de HTML.
A partir de 1996, los estándares de HTML los publica otro organismo de estandarización llamado W3C (World Wide Web Consortium).
HOY estamos usando la versión 5 de HTML.
Especificación oficial
El organismo W3C (World Wide Web Consortium) elabora las normas que deben seguir los diseñadores de páginas web para crear las páginas HTML. Las normas oficiales están escritas en inglés y se pueden consultar de forma gratuita en las siguientes direcciones:
👉 Especificación oficial de HTML 5.2 https://www.w3.org/TR/html52/
Características básicas
HTML Les un Lenguaje de etiquetas.
¿Qué significa etiquetas específicas?
Es un conjunto de etiquetas que usaremos para encerrar diferentes partes del contenido o elementos para que se vean o comporten de una determinada manera.
Estos elementos suelen tener etiquetas de inicio y cierre para los diferentes formatos que se quieren aplicar. De esta forma se indica cuando tiene que empezar y finalizar el formato.
<etiqueta> </etiqueta>
Ejemplo:
<p>Esta etiqueta es para indicar que este texto es un párrafo</p>
<title>Esta es la etiqueta donde colocaremos el título de la página</title>
Elementos HTML: Un elemento HTML Es la combinación de:
<etiqueta de APERTURA> CONTENIDO </etiqueta de CIERRE>
El primer documento HTML
Este es el texto - la separación del margen no es obligatoria, pero sirve para visualizar mejor el documento.
<!DOCTYPE html>
<html>
<head>
<title>El primer documento HTML</title>
</head>
<body>
<p>Contenido de nuestro primer document de HTML</p>
</body>
</html>
Explicación de cada elemento:
<!DOCTYPE html> Definición del tipo de documento.
<html> </html> Especifica el principio y fin del documento HTML, entre las etiquetas de principio y fin del documento se ubican las etiquetas correspondientes al encabezado y cuerpo del documento
<head> </head> Este elemento actúa como un contenedor de todo aquello que quieres incluir en la página HTML que no es contenido visible por los visitantes de la página. Incluye cosas como palabras clave (keywords), una descripción de la página que quieres que aparezca en resultados de búsquedas, código CSS para dar estilo al contenido, declaraciones del juego de caracteres, etc.
<meta charset="UTF-8"> Este elemento establece que nuestro documento usará el juego de caracteres utf-8, que incluye casi todos los caracteres de todos los idiomas humanos. (UTF-8 : 8 bit Unicode Transformation Format - Unicode es un estándar global que asigna un número único a cada carácter) (en nuestro ejemplo no está esta etiqueta pero será automáticamente insertada por cualquier editor).
<title> </title> Especifica el título de tu documento, es el que aparece en la pestaña o en la barra de título del navegador cuando la página es cargada, y se usa para describir la página cuando es añadida a los marcadores o como favorita.
<body> </body> Es donde se encuentra todo el contenido que deseas mostrar a los usuarios web que visiten tu página, ya sea textos, imágenes, videos, audios, formulario, etc.
