Ejercicios de HTML, aprende los conceptos básicos de HTML con esta serie de ejercicios resueltos.
- Ejercicio 1 .- Crea un documento HTML con la estructura básica.
<!DOCTYPE html> <html> <head> <title>Mi primera página web</title> </head> <body> <h1>Hola mundo xD</h1> </body> </html>
- Ejercicio 2 .- Crea un documento HTML con una lista con viñetas con los elementos "gato, cuy, pato" y también crea una lista enumerada con los elementos "amarillo, azul, rojo".
<!DOCTYPE html> <html> <head> </head> <body> <ul> <li>gato</li> <li>cuy</li> <li>pato</li> </ul> <ol> <li>amarillo</li> <li>azul</li> <li>rojo</li> </ol> </body> </html>
- Ejercicio 3 .- Crea un documento HTML con una imagen de tu elección.
<!DOCTYPE html> <html> <head> </head> <body> <img src="imagen.png" alt="Imagen de ejemplo"> </body> </html>
- Ejercicio 4 .- Crea un documento HTML con un enlace a una página web de tu elección.
<!DOCTYPE html> <html > <body> <a href="https://youtube.com/@VaidrollTeam">Youtube</a> </body> </html>
- Ejercicio 5 .- Crea un documento HTML con un formulario con los siguientes campos: Nombre, Correo electrónico, Teléfono, Mensaje.
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> </head> <body> <form action="" method="post"> <input type="text" name="nombre" placeholder="Nombre"><br><br> <input type="email" name="correo" placeholder="Correo electrónico"><br><br> <input type="number" name="telefono" placeholder="Teléfono"><br><br> <textarea name="mensaje" placeholder="Mensaje"></textarea><br><br> <input type="submit" value="Enviar"> </form> </body> </html>
- Ejercicio 6 .- Crea una tabla HTML con 3 columnas y 3 filas. En la primera fila, coloca los títulos "Nombre", "Edad" y "Teléfono". En las siguientes filas, coloca los datos de tres personas diferentes.
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> </head> <body> <table> <thead> <tr> <th>Nombre</th> <th>Edad</th> <th>Teléfono</th> </tr> </thead> <tbody> <tr> <td>Adolfo</td> <td>20</td> <td>1234567</td> </tr> <tr> <td>Paul</td> <td>26</td> <td>1111111</td> </tr> <tr> <td>Kiara</td> <td>32</td> <td>3322331</td> </tr> </tbody> </table> </body> </html>
- Ejercicio 7 .- Crea un documento HTML con una lista desordenada con una lista anidada dentro.
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> </head> <body> <ul> <li>Lista principal 1 <ul> <li>Lista anidada 1</li> <li>Lista anidada 2</li> </ul> </li> <li>Lista principal 2</li> </ul> </body> </html>
- Ejercicio 8 .- Crea una hoja HTML con una barra de navegación con enlaces a diferentes páginas.
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> </head> <body> <nav> <a href="#">Página principal</a> <a href="#">Sobre nosotros</a> <a href="#">Información</a> <a href="#">Galería</a> <a href="#">Contacto</a> </nav> </body> </html>
- Ejercicio 9 .- Crea un formulario de registro con los siguientes campos: Nombre, Correo electrónico, Contraseña.
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> </head> <body> <form action="" method="post"> <input type="text" name="nombre" placeholder="Nombre"><br><br> <input type="email" name="correo" placeholder="Correo electrónico"><br><br> <input type="password" name="contraseña" placeholder="Contraseña"><br><br> <input type="submit" value="Registrarse"> </form> </body> </html>
- Ejercicio 10 .- Crea un formulario de búsqueda con un campo de texto y un botón.
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> </head> <body> <form action="" method="get"> <input type="text" name="buscar" placeholder="Buscar"> <input type="submit" value="Buscar"> </form> </body> </html>
- Ejercicio 11 .- Crea una galería de imágenes con una lista desordenada.
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> </head> <body> <ul> <li><img src="imagen.png" alt="Imagen 1"></li> <li><img src="imagen.png" alt="Imagen 2"></li> <li><img src="imagen.png" alt="Imagen 3"></li> </ul> </body> </html>
- Ejercicio 12 .- Crea un formulario que permita al usuario ingresar dos números.
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> </head> <body> <form action="" method="post"> <input type="number" name="numero1" placeholder="Número 1"> <input type="number" name="numero2" placeholder="Número 2"> </form> </body> <html>
- Ejercicio 13 .- Crea un menú desplegable con una lista de opciones.
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> </head> <body> <select id="menu"> <option value="Opción 1">Opción 1</option> <option value="Opción 2">Opción 2</option> <option value="Opción 3">Opción 3</option> </select> </body> </html>
- Ejercicio 14 .- Crea una lista de reproducción con una lista de canciones.
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> </head> <body> <h1>Lista de reproducción</h1> <ul> <li>Canción 1</li> <li>Canción 2</li> <li>Canción 3</li> </ul> </body> </html>
- Ejercicio 15 .- Crea un calendario con 30 días usando una tabla.
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> </head> <body> <h1>Calendario</h1> <table> <thead> <tr> <th>L</th><th>M</th><th>M</th><th>J</th> <th>V</th><th>S</th><th>D</th> </tr> </thead> <tbody> <tr> <td>1</td><td>2</td><td>3</td><td>4</td> <td>5</td><td>6</td><td>7</td> </tr> <tr> <td>8</td><td>9</td><td>10</td><td>11</td> <td>12</td><td>13</td><td>14</td> </tr> <tr> <td>15</td><td>16</td><td>17</td><td>18</td> <td>19</td><td>20</td><td>21</td> </tr> <tr> <td>22</td><td>23</td><td>24</td><td>25</td> <td>26</td><td>27</td><td>28</td> </tr> </tr> <tr> <td>29</td><td>30</td> </tr> </tbody> </table> </body> </html>
- Ejercicio 16 .- Crea un carrito de compras con una lista de productos y un total.
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> </head> <body> <ul> <li> <p>Producto 1</p> <img src="silla.png" alt="Producto 1"><br> <span>S/. 20</span><br> <input type="number" value="0"> </li> <li> <p>Producto 2</p> <img src="sofa.png" alt="Producto 2"><br> <span>S/. 50</span><br> <input type="number" value="0"> </li> <li> <p>Producto 3</p> <img src="tv.png" alt="Producto 3"><br> <span>S/. 30</span><br> <input type="number" value="0"> </li> </ul> <p>Total: <span>S/. 100</span></p> <button>Calcular total</button> </body> </html>
- Ejercicio 17 .- Crea una hoja HTML con un video.
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> </head> <body> <h1>Mi Página con Video</h1> <video width="640" height="360" controls> <source src="nombre_video.mp4" type="video/mp4"> </video> </body> </html>
- Ejercicio 18 .- Crea una página web con un sonido.
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> </head> <body> <audio src="audio.mp3" controls autoplay loop> </audio> </body> </html>
- Ejercicio 19 .- Agrega un comentario HTML en tu página.
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> </head> <body> <!-- Hola mundo :v --> </body> </html>
- Ejercicio 20 .- Crea una página web que contenga una lista de 3 sitios web, cada elemento de la lista debe ser un enlace "<a>" que dirija a uno de los sitios web.
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> </head> <body> <h1>3 Sitios Web </h1> <ul> <li> <a href="https://youtube.com/@VaidrollTeam"> Sitio Web 1 - Youtube </a> </li> <li> <a href="https://www.facebook.com/"> Sitio Web 2 - Facebook </a> </li> <li> <a href="https://www.google.com/"> Sitio Web 3 - Google </a> </li> </ul> </body> </html>
Excelente.
El archivo es una carpeta con los 20 ejercicios.
- Nombre: 20EjerciciosHTML1.rar
- Tamaño: 66 KB
