Ejercicios de HTML
Ejercicio 1: Estructura básica de HTML
• Crea un archivo HTML básico que incluya la estructura mínima: <html>, <head>, <title> y <body>.
• Agrega el título “Mi primer documento HTML”.
CORRECCION
Solución 1
<!DOCTYPE html>
<html>
<head>
<title>Mi primer documento HTML</title>
</head>
<body>
</body>
</html>
Ejercicio 2: Encabezados y párrafos
• Añade un encabezado <h1> con el texto “Bienvenido a mi sitio web”.
• Añade un párrafo <p> que diga “Este es mi primer sitio web en HTML”.
CORRECION
Solución 2
<h1>Bienvenido a mi sitio web</h1>
<p>Este es mi primer sitio web en HTML.</p>
Ejercicio 3: Listas no ordenadas
• Crea una lista no ordenada <ul> con tres elementos: “Inicio”, “Acerca de” y “Contacto”.
CORRECION
Solución 3
<ul>
<li>Inicio</li>
<li>Acerca de</li>
<li>Contacto</li>
</ul>
Ejercicio 4: Listas ordenadas
• Crea una lista ordenada <ol> con cinco elementos: “HTML”, “CSS”, “JavaScript”, “PHP”, “Python”.
CORRECION
Solución 4
<ol>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
<li>PHP</li>
<li>Python</li>
</ol>
Ejercicio 5: Enlaces básicos
• Crea un enlace <a> que lleve a “https://www.google.com” con el texto “Ir a Google”.
Ejercicio 6: Imágenes
• Inserta una imagen <img> desde una URL, asignándole el atributo alt con una descripción de la imagen.
Ejercicio 7: Comentarios
• Añade un comentario en el código que diga “Esto es un comentario en HTML”.
CORRECION
Solución 7
<!– Esto es un comentario en HTML –>
Ejercicio 8: Texto en negrita y cursiva
• Escribe un párrafo que incluya una palabra en negrita <strong> y otra en cursiva <em>.
CORRECION
Solución 8
<p>Este es un <strong>texto en negrita</strong> y este es un <em>texto en cursiva</em>.</p>
Ejercicio 9: Crear enlaces internos
• Crea dos secciones con encabezados <h2>. En la primera sección, crea un enlace que lleve a la segunda.
CORRECION
Solución 9
<h2 id=»seccion1″>Sección 1</h2>
<a href=»#seccion2″>Ir a Sección 2</a>
<h2 id=»seccion2″>Sección 2</h2>
<p>Esta es la segunda sección.</p>
Ejercicio 10: Divisiones y secciones
• Usa un <div> para contener un título <h2> y un párrafo <p>. Da formato a esta sección usando una clase CSS.
CORRECION
Solución 10
<div class=»mi-clase»>
<h2>Título de la sección</h2>
<p>Contenido del párrafo.</p>
</div>
Ejercicio 11: Formulario básico
• Crea un formulario con un campo de texto para “Nombre” y un botón de envío.
CORRECION
Solución 11
<form>
<label for=»nombre»>Nombre:</label>
<input type=»text» id=»nombre» name=»nombre»>
<button type=»submit»>Enviar</button>
</form>
Ejercicio 12: Atributos en los enlaces
• Crea un enlace que abra “https://www.openai.com” en una nueva pestaña usando target=»_blank».
Ejercicio 13: Listas anidadas
• Crea una lista ordenada que contenga otra lista no ordenada dentro de uno de sus elementos.
CORRECION
Solución 13
<ol>
<li>Primero</li>
<li>Segundo
<ul>
<li>Subelemento 1</li>
<li>Subelemento 2</li>
</ul>
</li>
<li>Tercero</li>
</ol>
Ejercicio 14: Formulario con varios campos
• Crea un formulario que incluya campos de texto para “Nombre”, “Correo electrónico” y “Teléfono”.
CORRECION
Solución 14
<form>
<label for=»nombre»>Nombre:</label>
<input type=»text» id=»nombre» name=»nombre»>
<label for=»email»>Correo electrónico:</label>
<input type=»email» id=»email» name=»email»>
<label for=»telefono»>Teléfono:</label>
<input type=»tel» id=»telefono» name=»telefono»>
</form>
Ejercicio 15: Tablas básicas
• Crea una tabla <table> de 2×2 con encabezados <th> y celdas <td>.
CORRECION
Solución 15
<table>
<tr>
<th>Encabezado 1</th>
<th>Encabezado 2</th>
</tr>
<tr>
<td>Celda 1</td>
<td>Celda 2</td>
</tr>
</table>
Ejercicio 16: Enlaces de anclaje
• Crea tres secciones con encabezados <h2>, cada una con un identificador único. Agrega un menú de enlaces al principio que permita desplazarse a cada sección.
CORRECION
Solución 16
<a href=»#seccion1″>Ir a Sección 1</a>
<a href=»#seccion2″>Ir a Sección 2</a>
<a href=»#seccion3″>Ir a Sección 3</a>
<h2 id=»seccion1″>Sección 1</h2>
<h2 id=»seccion2″>Sección 2</h2>
<h2 id=»seccion3″>Sección 3</h2>
Adescript 
Deja un comentario