0% encontró este documento útil (0 votos)
3 vistas3 páginas

Ejercicios Basicos HTML

El documento detalla una serie de bloques de ejercicios para aprender HTML, cubriendo desde la creación de una estructura básica hasta la implementación de formularios y estilos. Cada bloque incluye tareas específicas, como la inserción de imágenes, la creación de tablas y la aplicación de estilos CSS. El objetivo es proporcionar una comprensión práctica y progresiva de la construcción de páginas web.
Derechos de autor
© All Rights Reserved
Nos tomamos en serio los derechos de los contenidos. Si sospechas que se trata de tu contenido, reclámalo aquí.
Formatos disponibles
Descarga como PDF, TXT o lee en línea desde Scribd
0% encontró este documento útil (0 votos)
3 vistas3 páginas

Ejercicios Basicos HTML

El documento detalla una serie de bloques de ejercicios para aprender HTML, cubriendo desde la creación de una estructura básica hasta la implementación de formularios y estilos. Cada bloque incluye tareas específicas, como la inserción de imágenes, la creación de tablas y la aplicación de estilos CSS. El objetivo es proporcionar una comprensión práctica y progresiva de la construcción de páginas web.
Derechos de autor
© All Rights Reserved
Nos tomamos en serio los derechos de los contenidos. Si sospechas que se trata de tu contenido, reclámalo aquí.
Formatos disponibles
Descarga como PDF, TXT o lee en línea desde Scribd

1 Bloque 1: Texto y estructura básica (1–10)

1. Crear un archivo HTML básico con <html>, <head> y <body>.

2. Añadir un <title> y verificarlo en la pestaña del navegador.

3. Escribir un párrafo <p> con texto de prueba.

4. Añadir un segundo párrafo y experimentar con etiquetas <strong> y <em>.

5. Crear un encabezado <h1> y otro <h2>.


6. Añadir un comentario en HTML y comprobar que no se ve en la página.

7. Insertar un salto de línea <br> dentro de un párrafo.

8. Probar el atributo id en un elemento y enlazarlo con un enlace #id.

9. Crear varios <div> y usar el atributo class.

10. Añadir un <hr> horizontal para separar secciones.

2 Bloque 2: Listas y enlaces (11–20)

11. Crear una lista ordenada <ol> con tres elementos.


12. Crear una lista desordenada <ul> con cinco elementos.

13. Añadir un enlace <a> a otra página externa.

14. Hacer un enlace que abra en otra pestaña usando target="_blank".

15. Añadir un enlace a un email con [Link]

16. Anidar listas dentro de listas (sublistas).

17. Crear un menú de navegación básico con <nav> y enlaces.

18. Probar enlaces internos que saltan a un <section id="">.


19. Experimentar con el atributo title en un enlace.

20. Hacer que un enlace tenga estilo diferente usando class y CSS.

3 Bloque 3: Imágenes y multimedia (21–30)

21. Insertar una imagen <img> con atributo src y alt.

22. Cambiar el tamaño de la imagen con width y height.


23. Añadir varias imágenes y alinearlas con <div> o <span>.
24. Probar un enlace que rodee a la imagen.

25. Añadir un video <video> con controles.

26. Añadir un audio <audio> con controles.

27. Experimentar con formatos de imagen distintos: JPG, PNG, GIF.

28. Usar imágenes de Internet y de la carpeta local.

29. Añadir un título <figcaption> a una imagen usando <figure>.

30. Crear una galería simple con varias imágenes en fila.

4 Bloque 4: Tablas y datos (31–35)

31. Crear una tabla básica con <table>, <tr> y <td>.

32. Añadir un encabezado <th> a la tabla.

33. Combinar celdas usando colspan y rowspan.

34. Añadir borde a la tabla y celdas.

35. Insertar una tabla con 3 columnas y 4 filas con datos ficticios.

5 Bloque 5: Formularios (36–42)

36. Crear un formulario <form> con un campo de texto <input type="text">.

37. Añadir un campo de correo <input type="email">.

38. Añadir un campo de contraseña <input type="password">.

39. Añadir un botón <button> o <input type="submit">.

40. Añadir un área de texto <textarea>.

41. Añadir casillas de verificación <input type="checkbox">.


42. Añadir un menú desplegable <select> con varias opciones.

6 Bloque 6: Estilos y diseño básico (43–48, 50)

43. Aplicar color al texto con el atributo style="color:red;".

44. Cambiar el tamaño de fuente con style="font-size:20px;".

45. Aplicar fondo a un <div> con style="background-color:#ccc;".


46. (Ejercicio eliminado: Usar clases y CSS externo)
47. Cambiar la alineación de texto con text-align.

48. Probar diferentes fuentes con font-family.

49. (Ejercicio eliminado: bordes y padding)

50. Crear un diseño sencillo con <header>, <main> y <footer>.

También podría gustarte