HTML5 es la última versión del lenguaje de marcado estándar utilizado para crear y estructurar contenido en la web. Con una amplia gama de nuevas características y capacidades, HTML5 permite a los desarrolladores web crear sitios web más dinámicos y accesibles. A continuación, se presentan una serie de ejercicios diseñados para principiantes que desean aprender y practicar HTML5.
Ejercicio 1 HTML5 para Principiantes: Crear una Página Básica
Objetivo: Crear una página web básica utilizando las etiquetas fundamentales de HTML5.
Instrucciones:
- Abre tu editor de texto preferido (por ejemplo, Visual Studio Code).
- Crea un nuevo archivo y guárdalo con la extensión
.html
. - Escribe el siguiente código para crear una estructura básica de HTML5:
<!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 HTML5</title>
</head>
<body>
<h1>Bienvenido a HTML5</h1>
<p>Esta es una página básica creada con HTML5.</p>
</body>
</html>
- Guarda el archivo y ábrelo en tu navegador web para ver el resultado.
Ejercicio 2 HTML5 para Principiantes: Añadir Imágenes y Enlaces
Objetivo: Insertar una imagen y crear un enlace en la página web.
Instrucciones:
- Utiliza el archivo creado en el Ejercicio 1.
- Añade una imagen y un enlace utilizando las etiquetas
<img>
y<a>
.
<body>
<h1>Bienvenido a HTML5</h1>
<p>Esta es una página básica creada con HTML5.</p>
<img src="ruta/de/tu/imagen.jpg" alt="Descripción de la imagen">
<p>Visita <a href="https://www.ejemplo.com" target="_blank">Ejemplo.com</a> para más información.</p>
</body>
- Guarda los cambios y recarga la página en el navegador.
Ejercicio 3 HTML5 para Principiantes: Crear una Lista
Objetivo: Crear una lista ordenada y una lista desordenada.
También te puede interesar![Cómo Redireccionar a Otra Página con JavaScript](https://aiweblearning.com/wp-content/uploads/2024/07/redireccionar-a-otra-pagina-con-javascript-150x150.jpg)
Instrucciones:
- Abre el archivo HTML creado anteriormente.
- Añade las siguientes listas al cuerpo del documento:
<body>
<h1>Bienvenido a HTML5</h1>
<p>Esta es una página básica creada con HTML5.</p>
<img src="ruta/de/tu/imagen.jpg" alt="Descripción de la imagen">
<p>Visita <a href="https://www.ejemplo.com" target="_blank">Ejemplo.com</a> para más información.</p>
<h2>Lista Ordenada</h2>
<ol>
<li>Elemento 1</li>
<li>Elemento 2</li>
<li>Elemento 3</li>
</ol>
<h2>Lista Desordenada</h2>
<ul>
<li>Elemento A</li>
<li>Elemento B</li>
<li>Elemento C</li>
</ul>
</body>
- Guarda y visualiza los cambios en el navegador.
Ejercicio 4 HTML5 para Principiantes: Formularios Básicos
Objetivo: Crear un formulario simple con varios campos de entrada.
Instrucciones:
- Abre el archivo HTML creado anteriormente.
- Añade el siguiente formulario al cuerpo del documento:
<body>
<h1>Bienvenido a HTML5</h1>
<p>Esta es una página básica creada con HTML5.</p>
<img src="ruta/de/tu/imagen.jpg" alt="Descripción de la imagen">
<p>Visita <a href="https://www.ejemplo.com" target="_blank">Ejemplo.com</a> para más información.</p>
<h2>Lista Ordenada</h2>
<ol>
<li>Elemento 1</li>
<li>Elemento 2</li>
<li>Elemento 3</li>
</ol>
<h2>Lista Desordenada</h2>
<ul>
<li>Elemento A</li>
<li>Elemento B</li>
<li>Elemento C</li>
</ul>
<h2>Formulario de Contacto</h2>
<form action="/enviar" method="post">
<label for="nombre">Nombre:</label>
<input type="text" id="nombre" name="nombre">
<label for="email">Email:</label>
<input type="email" id="email" name="email">
<label for="mensaje">Mensaje:</label>
<textarea id="mensaje" name="mensaje"></textarea>
<input type="submit" value="Enviar">
</form>
</body>
- Guarda y visualiza el formulario en el navegador.
Ejercicio 5 HTML5 para Principiantes: Uso de Semántica en HTML5
Objetivo: Utilizar las nuevas etiquetas semánticas de HTML5 para mejorar la estructura del documento.
Instrucciones:
- Abre el archivo HTML creado anteriormente.
- Reemplaza las etiquetas
<div>
genéricas con etiquetas semánticas de HTML5:
<!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 HTML5</title>
</head>
<body>
<header>
<h1>Bienvenido a HTML5</h1>
</header>
<main>
<p>Esta es una página básica creada con HTML5.</p>
<img src="ruta/de/tu/imagen.jpg" alt="Descripción de la imagen">
<p>Visita <a href="https://www.ejemplo.com" target="_blank">Ejemplo.com</a> para más información.</p>
<section>
<h2>Lista Ordenada</h2>
<ol>
<li>Elemento 1</li>
<li>Elemento 2</li>
<li>Elemento 3</li>
</ol>
</section>
<section>
<h2>Lista Desordenada</h2>
<ul>
<li>Elemento A</li>
<li>Elemento B</li>
<li>Elemento C</li>
</ul>
</section>
<section>
<h2>Formulario de Contacto</h2>
<form action="/enviar" method="post">
<label for="nombre">Nombre:</label>
<input type="text" id="nombre" name="nombre">
<label for="email">Email:</label>
<input type="email" id="email" name="email">
<label for="mensaje">Mensaje:</label>
<textarea id="mensaje" name="mensaje"></textarea>
<input type="submit" value="Enviar">
</form>
</section>
</main>
<footer>
<p>© 2024 Mi Primera Página HTML5</p>
</footer>
</body>
</html>
- Guarda y visualiza los cambios en el navegador.
Practicar con estos ejercicios te ayudará a familiarizarte con las etiquetas y características de HTML5. La estructura semántica y la correcta organización de contenido son claves para crear sitios web accesibles y eficientes.
¡Sigue practicando y explorando nuevas funcionalidades de HTML5 para mejorar tus habilidades de desarrollo web!
También te puede interesar![Diferencias entre import y require en JavaScript](https://aiweblearning.com/wp-content/uploads/2024/07/js-import-vs-require-150x150.jpg)