Html 5 – Capítulo 01 – Etiquetas básicas
1 minuto de lectura
HTML5 es el lenguaje fundamental en el desarrollo web moderno. A través de etiquetas y elementos, se estructuran y presentan contenidos en línea. En este manual, exploraremos las etiquetas básicas esenciales para crear una página web: <html>, <head>, y <body>. Comprenderás cómo estas etiquetas interactúan y trabajarás en ejercicios resueltos para reforzar tus conocimientos.
Etiqueta <html>
La etiqueta <html> es el punto de partida de cualquier documento HTML5. Define el comienzo del documento y rodea todos los demás elementos. Se ve así:
<!DOCTYPE html>
<html>
<!-- Contenido de la página -->
</html><!DOCTYPE html>: Declaración doctype que define la versión de HTML utilizada (en este caso, HTML5).<html>: Contenedor principal que envuelve todo el contenido de la página.
Etiqueta <head>
La etiqueta <head> contiene información sobre el documento y enlaces a recursos externos. Aquí se definen metaetiquetas, enlaces a hojas de estilo y scripts.
<head>
<meta charset="UTF-8">
<title>Título de la Página</title>
<!-- Enlaces a hojas de estilo y scripts -->
</head><meta charset="UTF-8">: Define la codificación de caracteres para el documento (UTF-8 es comúnmente utilizado).<title>: Define el título de la página que se muestra en la pestaña del navegador.
Etiqueta <body>
La etiqueta <body> contiene el contenido visible de la página web, como texto, imágenes, enlaces y otros elementos.
<body>
<h1>Encabezado Principal</h1>
<p>Este es un párrafo de ejemplo.</p>
<a href="https://www.ejemplo.com">Enlace a Ejemplo.com</a>
<!-- Otros elementos de la página -->
</body><h1>: Encabezado de nivel 1 que define un título importante.<p>: Párrafo que contiene texto.<a>: Enlace a una URL externa.
Ejercicios Resueltos
Ejercicio 1: Crear una Página Básica
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Mi Primera Página</title>
</head>
<body>
<h1>Bienvenidos a mi página web</h1>
<p>Esta es una introducción al mundo del desarrollo web.</p>
<a href="https://www.ejemplo.com">Visita Ejemplo.com</a>
</body>
</html>Ejercicio 2: Agregar una Imagen
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Mi Página con Imagen</title>
</head>
<body>
<h1>Una Imagen Colorida</h1>
<img src="imagen.jpg" alt="Una imagen colorida">
</body>
</html>Conclusión
Dominar las etiquetas básicas de HTML5 es esencial para construir una base sólida en desarrollo web. La etiqueta <html> marca el inicio del documento, <head> contiene metainformación y enlaces, y <body> aloja el contenido visible.
