HTML Básico
El HTML es un lenguaje de marcado, no un lenguaje de programación, lo que significa que no realiza operaciones lógicas complejas, sino que se centra en describir la organización del contenido.
¿De que trata?
El HTML (HyperText Markup Language) es el lenguaje fundamental para crear la estructura y el contenido de cualquier página web. Piensa en él como el esqueleto de una casa: define dónde van las paredes, las ventanas, las puertas, pero no cómo se ven (eso es trabajo de CSS).
Cuando abres una página web en tu navegador, lo que ves es una interpretación del código HTML. Este lenguaje utiliza un sistema de "etiquetas" (también conocidas como "tags") que encierran el contenido y le dan un significado estructural. Por ejemplo, una etiqueta <h1> indica un título principal, y <p> indica un párrafo. El navegador lee estas etiquetas y sabe cómo debe mostrar el contenido.
¿Cómo se hace el HTML Básico?
Para crear una página HTML básica, necesitas un editor de texto simple (como el Bloc de Notas, VS Code, Sublime Text, Atom, etc.) y un navegador web para ver el resultado.
Cada documento HTML sigue una estructura básica con etiquetas esenciales:
1. Estructura de una Página Web HTML
Todo documento HTML comienza con una declaración de tipo de documento (<!DOCTYPE html>) y está envuelto en la etiqueta <html>. Dentro de <html>, hay dos secciones principales: <head> y <body>.
HTML:
<!DOCTYPE html>: Esta declaración le dice al navegador qué versión de HTML se está utilizando. <!DOCTYPE html> es para HTML5, la versión más reciente y estándar.
<html lang="es">: Es la etiqueta raíz de todo el documento HTML. Todo el contenido de la página debe estar dentro de esta etiqueta. El atributo lang="es" es importante para la accesibilidad y los motores de búsqueda, indicando que el idioma principal del contenido es español.
2. Etiquetas Esenciales
Dentro de la estructura básica, las etiquetas <head> y <body> son cruciales:
a) <head> (Cabecera del Documento)
¿De qué trata? Contiene metadatos sobre la página web que no son directamente visibles para el usuario en el navegador (no es el contenido que lees), pero que son importantes para el navegador, los motores de búsqueda, las redes sociales, etc.
¿Cómo se hace? Se coloca dentro de la etiqueta <html>, antes de <body>.
Etiquetas comunes dentro de <head>:
<meta charset="UTF-8">: ¡Esencial! Define la codificación de caracteres del documento, asegurando que los caracteres especiales (como ñ, acentos, emojis) se muestren correctamente en todos los navegadores.
<title>Título de la Página</title>: Define el título de la página, que aparece en la pestaña del navegador o en la barra de título de la ventana. Es muy importante para la usabilidad y el SEO.
<meta name="description" content="Una descripción concisa de la página.">: Proporciona una breve descripción del contenido de la página, a menudo utilizada por los motores de búsqueda en los resultados.
<meta name="viewport" content="width=device-width, initial-scale=1.0">: Crucial para el diseño web responsivo. Le dice al navegador cómo escalar la página en diferentes dispositivos (móviles, tabletas, etc.).
<link rel="stylesheet" href="estilos.css">: Enlaza un archivo CSS externo para aplicar estilos a la página.
<script src="script.js"></script>: Enlaza un archivo JavaScript externo. Aunque a veces se coloca en <body> al final, en <head> es para scripts que deben cargarse antes que el contenido (con el atributo defer o async).
Ejemplo de <head>:
b) <body> (Cuerpo del Documento)
¿De qué trata? Contiene todo el contenido visible de la página web. Aquí es donde se colocan los textos, imágenes, videos, enlaces, formularios, botones y cualquier otro elemento con el que el usuario interactúa.
¿Cómo se hace? Se coloca dentro de la etiqueta <html>, justo después de <head>.
Etiquetas comunes dentro de <body> (Ejemplos)(HTML):
Encabezados (<h1> a <h6>): Para títulos y subtítulos. <h1> es el más importante, <h6> el menos. Solo debe haber un <h1> por página.
Párrafos (<p>): Para bloques de texto.
Enlaces (<a>): Para crear hipervínculos a otras páginas web, secciones de la misma página, o archivos. El atributo href es crucial.
Imágenes (<img>): Para insertar imágenes. Es una etiqueta de cierre automático (no tiene </img>).
Listas:
<ul> (unordered list): Para listas sin un orden específico (elementos con viñetas).
<ol> (ordered list): Para listas con un orden específico (elementos numerados).
<li> (list item): Cada elemento dentro de una lista.
Divisiones (<div>): Un contenedor genérico para agrupar otros elementos HTML con fines de estilo o de script. No tiene significado semántico por sí mismo.
Secciones Semánticas (HTML5): Etiquetas que dan significado estructural al contenido, mejorando la accesibilidad y el SEO.
<header>: Contenido introductorio o de navegación (ej., logo, menú).
<nav>: Contiene enlaces de navegación.
<main>: Contenido principal y único de la página.
<article>: Contenido independiente y auto-contenido (ej., una entrada de blog).
<section>: Una sección temática de contenido.
<footer>: Información de pie de página (ej., derechos de autor, enlaces de contacto).
Ejemplo completo de <body>:
Al guardar este código en un archivo con extensión .html (ej., index.html) y abrirlo con tu navegador, verás la estructura básica de tu primera página web. A partir de aquí, CSS le dará el aspecto visual y JavaScript la interactividad.