Ejercicios de HTML5 para Principiantes

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.

Contenido

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.

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>&copy; 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!