En este tema, exploraremos los fundamentos de HTML (HyperText Markup Language), el lenguaje de marcado estándar utilizado para crear páginas web. HTML es la columna vertebral de cualquier sitio web, proporcionando la estructura básica sobre la cual se construyen los estilos y la funcionalidad.
¿Qué es HTML?
HTML es un lenguaje de marcado que utiliza etiquetas para estructurar el contenido de una página web. Estas etiquetas indican al navegador cómo debe presentarse el contenido. HTML no es un lenguaje de programación, sino un lenguaje de marcado que define la estructura de la información.
Conceptos Clave de HTML
-
Etiquetas HTML: Son los elementos básicos de HTML. Se escriben entre corchetes angulares, por ejemplo,
<tagname>. La mayoría de las etiquetas vienen en pares: una etiqueta de apertura y una etiqueta de cierre, como<p>y</p>. -
Atributos: Proporcionan información adicional sobre los elementos HTML. Se escriben dentro de la etiqueta de apertura, por ejemplo,
<a href="https://example.com">. -
Elementos HTML: Un elemento HTML es todo desde la etiqueta de apertura hasta la etiqueta de cierre, incluyendo el contenido entre ellas.
-
Anidación de Elementos: Los elementos HTML pueden contener otros elementos, lo que permite crear estructuras complejas.
Estructura Básica de un Documento HTML
Un documento HTML típico tiene la siguiente estructura:
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Mi Primera Página Web</title>
</head>
<body>
<h1>Bienvenido a mi página web</h1>
<p>Este es un párrafo de ejemplo en HTML.</p>
</body>
</html>Explicación del Código
<!DOCTYPE html>: Declara el tipo de documento y la versión de HTML utilizada.<html lang="es">: La etiqueta raíz que envuelve todo el contenido de la página. El atributolangespecifica el idioma del contenido.<head>: Contiene metadatos sobre el documento, como el conjunto de caracteres (<meta charset="UTF-8">), el título de la página (<title>) y otras configuraciones.<body>: Contiene el contenido visible de la página web, como encabezados (<h1>) y párrafos (<p>).
Ejercicio Práctico
Objetivo: Crear una página HTML básica con un título, un encabezado y un párrafo.
Instrucciones
- Abre tu editor de texto preferido (como Visual Studio Code o Sublime Text).
- Crea un nuevo archivo y guárdalo como
index.html. - Escribe el siguiente código en el archivo:
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Mi Página de Prueba</title>
</head>
<body>
<h1>Hola Mundo</h1>
<p>Esta es mi primera página web usando HTML.</p>
</body>
</html>- Guarda el archivo y ábrelo en un navegador web para ver el resultado.
Solución
El código proporcionado en las instrucciones es la solución al ejercicio. Al abrir el archivo index.html en un navegador, deberías ver un encabezado que dice "Hola Mundo" y un párrafo que dice "Esta es mi primera página web usando HTML."
Conclusión
En esta lección, hemos aprendido los conceptos básicos de HTML, incluyendo su estructura y cómo crear un documento HTML simple. Estos fundamentos son esenciales para cualquier desarrollador web, ya que HTML es la base sobre la cual se construyen todos los sitios web. En el próximo tema, exploraremos CSS, que se utiliza para estilizar y mejorar la apariencia de las páginas HTML.
Curso de Diseño Responsivo
Módulo 1: Introducción al Diseño Responsivo
- ¿Qué es el Diseño Responsivo?
- Historia e Importancia del Diseño Responsivo
- Principios Básicos del Diseño Responsivo
Módulo 2: Fundamentos de HTML y CSS
Módulo 3: Consultas de Medios
- Comprendiendo las Consultas de Medios
- Usando Consultas de Medios en CSS
- Puntos de Ruptura y Diseños Responsivos