Curso de html5 desde cero

Ejercicios resueltos del curso de HTML Básico

Ejercicios de los capítulos 1 al 11.


En esta página tienes numeradas todas las soluciones a los ejercicios realizados durante todo el curso. Si te quedan dudas o tienes un resultado diferente, déjame un comentario, ya que a veces, un ejercicio puede tener muchas posibles soluciones.

    Capítulo 1

  1. En este caso, no necesitas realmente una solución, si has instalado el programa que vas a utilizar durante todo el curso, ya puedes seguir con el segundo ejercicio.
  2. La solución está en añadir el párrafo en el <body> con las etiquetas <p> de apertura y de cierre. La solución está marcada.
    En la imagen del resultado en el navegador puedes ver que aparece el título de la pestaña con lo que hemos etiquetado como <title> en el <head> y la frase aparece en el <body> con las etiquetas <p>.

  3. <!doctype html>
    <html>
    <head>
    	<meta charset="utf-8">
    	<title>Ejercicio 2 del curso html</title>
    </head>
    
    <body>
    	<p>Esto es un párrafo.</p>
    </body>
    </html>
    Primera página web con HTML
  4. En este caso, solo escribe cualquier otra cosa en el título de la página, etiquetas <title>.
  5. <!doctype html>
    	<html>
    	<head>
    		<meta charset="utf-8">
    		<title>Este título no es el mismo</title>
    	</head>
    
    	<body>
    		<p>Esto es un párrafo.</p>
    	</body>
    	</html>
    Primera página web con HTML

    Capítulo 2

  6. Añade un segundo párrafo y un título <h3> a tu página web (a la creada en este capítulo, en el último ejemplo, donde hay una etiqueta <h1>, <h2> y una <p>).
  7. <!doctype html>
    <html>
    <head>
    	<meta charset="utf-8">
    	<title>Mi primera página html</title>
    </head>
    
    <body>
    
    	<h1>Este es el título principal de mi primera página web.</h1>
    	<h2>Este es el subtítulo.</h2>
    
    	<p>Muy lejos, más allá de las montañas de palabras,
    	alejados de los países de las vocales y las consonantes,
    	viven los textos simulados. Viven aislados en casas de
    	letras, en la costa de la semántica, un gran océano de
    	lenguas. Un riachuelo llamado Pons fluye por su pueblo
    	y los abastece con las normas necesarias. Hablamos de un
    	país paraisomático en el que a uno le caen pedazos de frases
    	asadas en la boca. Ni siquiera los todopoderosos signos de
    	puntuación dominan a los textos simulados; una vida,
    	se puede decir, poco ortográfica. Pero un buen día, una
    	pequeña línea de texto simulado, llamada Lorem Ipsum,
    	decidió aventurarse y salir al vasto mundo de la gramática.
    	El gran Oxmox le desanconsejó hacerlo, ya que esas tierras
    	estaban llenas de comas malvadas, signos de interrogación
    	salvajes y puntos y coma traicioneros, pero el texto simulado
    	no se dejó atemorizar. Empacó sus siete versales, enfundó su
    	inicial en el cinturón y se puso en camino. Cuando ya había
    	escalado las primeras colinas de las montañas cursivas, se
    	dio media vuelta para dirigir su mirada por última vez, hacia
    	su ciudad natal Letralandia, el encabezamiento del pueblo
    	Alfabeto y el subtítulo de su...</p>
    
    	<h3>Esto es un título h3, soy un poco más pequeño que h1 y h2.</h3>
    
    	<p>Esto es un segundo párrafo.</p>
    
    </body>
    	</html>
    títulos html

    Capítulo 3

  8. Escribe en una página html cualquiera un comentario de una sola línea con el texto que quieras.
  9. <!doctype html>
    <html>
    <head>
    	<meta charset="utf-8">
    	<title>Mi primera página html</title>
    </head>
    
    <body>
    	<!-- Estos son los títulos de la página. -->
    	<h1>Este es el título principal de mi primera página web.</h1>
    	<h2>Este es el subtítulo.</h2>
    
    </body>
    </html>

    El navegador ignora el comentario, por eso no se ve, pero sirve para que ordenes correctamente los elementos de tus páginas y sepas para que sirve todo, tanto tú como otros que trabajen en tus webs.

    comentarios html
  10. Escribe en una página html cualquiera un comentario de tres líneas con el texto que quieras.
  11. <!doctype html>
    <html>
    <head>
    	<meta charset="utf-8">
    	<title>Mi primera página html</title>
    </head>
    
    <body>
    
    <!-- Estos son los títulos de la página. De momento los he deshabilitado.
    <h1>Este es el título principal de mi primera página web.</h1>
    <h2>Este es el subtítulo.</h2> -->
    
    </body>
    </html>

    El resultado en el navegador es una página en blanco, ya que al envolver en el comentario los títulos <h1> y <h2> hago que los ignore.
    Tu resultado puede ser diferente, con que hayas puesto un comentario informativo de tres líneas tienes el ejercicio correcto. No he pedido que anules ningún elemento.

  12. Escribe dos párrafos en una página html y anula el primero comentándolo.
  13. <!doctype html>
    <html>
    <head>
    	<meta charset="utf-8">
    	<title>Mi primera página html</title>
    </head>
    
    <body>
    
    <p>Este es el primer párrafo. Este se muestra en el navegador, ya que no está comentado.</p>
    
    <!-- <p>Este es el segundo párrafo. No se muestra en el navegador, ya que está comentado.</p> -->
    
    </body>
    </html>
    Párrafos html

    Capítulo 4

  14. Crea una lista ordenada con los siguientes elementos: Xiaomi, Samsung, Iphone, Huawei.
  15. <!doctype html>
    <html>
    <head>
    	<meta charset="utf-8">
    	<title>Listas</title>
    </head>
    
    <body>
    
    <ol>
    	<li>Xiaomi</li>
    	<li>Samsung</li>
    	<li>Iphone</li>
    	<li>Huawei</li>
    </ol>
    
    </body>
    </html>
    Listas ordenadas html
  16. Crea una lista desordenada con los elementos anteriores.
  17. <!doctype html>
    <html>
    <head>
    	<meta charset="utf-8">
    	<title>Listas</title>
    </head>
    
    <body>
    
    <ul>
    	<li>Xiaomi</li>
    	<li>Samsung</li>
    	<li>Iphone</li>
    	<li>Huawei</li>
    </ul>
    
    </body>
    </html>
    Listas desordenadas html
  18. Crea una lista de definiciones con tres términos. Solo el tercero llevará definición.
  19. <!doctype html>
    <html>
    <head>
    	<meta charset="utf-8">
    	<title>Listas</title>
    </head>
    
    <body>
    
    <dl>
    	<dt>Elemeto 1</dt>
    	<dt>Elemento 2</dt>
    	<dt>Elemento 3</dt>
    		<dd>Este es el tercer elemento, el único que lleva descripción.</dd>
    </dl>
    
    </body>
    </html>
    Listas de definiciones html

    Capítulo 5

  20. Crea una tabla de 4x5 (4 columnas y 5 filas). Esta tabla deberá llevar una cabecera, por lo que te queda una fila para la cabecera y cuatro para los datos. En la cabecera debes colocar lo siguiente: Vehículo, Precio, Velocidad y color en ese orden. En las cuatro filas restantes, inventa modelos de coche (pueden ser reales si los conoces) y dales el precio que quieras y una velocidad máxima.
  21. <!doctype html>
    <html>
    <head>
    	<meta charset="utf-8">
    	<title>Listas</title>
    </head>
    
    <body>
    
    	<table>
    		<thead>
    			<tr>
    				<th>Vehículo</th>
    				<th>Precio</th>
    				<th>Velocidad</th>
    				<th>Color</th>
    			</tr>
    		</thead>
    
    		<tbody>
    			<tr>
    				<td>Lamborghini Aventador</td>
    				<td>400.000 €</td>
    				<td>350 km/h</td>
    				<td>Rojo</td>
    			</tr>
    
    			<tr>
    				<td>Fiat Punto</td>
    				<td>7990 €</td>
    				<td>165 km/h</td>
    				<td>Azul</td>
    			</tr>
    
    			<tr>
    				<td>BMW M4</td>
    				<td>79.000 €</td>
    				<td>250 km/h</td>
    				<td>Verde</td>
    			</tr>
    
    			<tr>
    				<td>15.850 €</td>
    				<td>208 km/h</td>
    				<td>Azul celeste</td>
    			</tr>
    		</tbody>
    	</table>
    
    </body>
    </html>
    Ejercicios con tablas html

    Capítulo 6

  22. Crea una lista con seis elementos y ordénala en orden inverso.
  23. <!doctype html>
    <html>
    <head>
    	<meta charset="utf-8">
    	<title>listas html</title>
    </head>
    
    <body>
    
    	<ol reversed>
    		<li>Hartsfield-Jackson Atlanta Airport (Estados Unidos)</li>
    		<li>Pékin Capital Airport (China)</li>
    		<li>Dubái International Airport (Emiratos Árabes Unidos)</li>
    		<li>Los Angeles Airport (Estados Unidos)</li>
    		<li>Tokio Haneda Airport (Japón)</li>
    		<li>Chicago O’Hare Airport (Estados Unidos)</li>
    	</ol>
    
    </body>
    </html>
    Lista reversed
  24. Crea un <iframe> con una ubicación cualquiera utilizando OpenStreetMap. Este nuevo <iframe> será de 600 de ancho por 400 de alto.
  25. <!doctype html>
    <html>
    <head>
    	<meta charset="utf-8">
    	<title>Mi primera página html</title>
    </head>
    
    <body>
    
    	<iframe width="600" height="400"
    	src="https://www.openstreetmap.org/export/embed.html?bbox=
    	140.0357294082642%2C35.689613731585375%2C140.07993221282962%2C35.
    	7195140435175&amp;layer=mapnik"></iframe>
    
    </body>
    </html>
    Mapa openstreetmap

    Capítulo 7

  26. Crea un párrafo que contenga las etiquetas <b>, <i> y <mark>.
  27. <!doctype html>
    <html>
    <head>
    	<meta charset="utf-8">
    	<title>Formateo del texto html</title>
    </head>
    
    <body>
    
    	<p>Este párrafo tiene un trozo en <b>negrita</b>,
    	otro en <i>cursiva</i>. También tiene texto <mark>resaltado</mark>.</p>
    
    </body>
    </html>
    Texto formateado en html
  28. Escribe en un párrafo un número como este: 702
  29. <!doctype html>
    <html>
    <head>
    	<meta charset="utf-8">
    	<title>Formateo del texto html</title>
    </head>
    
    <body>
    
    	<p>70<sup>2</sup>=4900</p>
    
    </body>
    </html>
    Potencias en html
  30. Crea un párrafo con solo una parte tachada en el texto.
  31. <!doctype html>
    <html>
    <head>
    	<meta charset="utf-8">
    	<title>Formateo del texto html</title>
    </head>
    
    <body>
    
    	<p>El cielo está <del>nublado</del> soleado.</p>
    
    </body>
    </html>
    Texto tachado en html
  32. Intenta reproducir este texto con el mismo resultado:
    El cielo estaba nublado me recordaba que debí hacer caso al aviso de tormenta que dieron esta mañana en la televisión.
    Bueno, lo hecho, hecho está, ya era tarde para lamentarse.
  33. <!doctype html>
    <html>
    <head>
    	<meta charset="utf-8">
    	<title>Formateo del texto html</title>
    </head>
    
    <body>
    
    	<p>El cielo estaba <b>nublado</b> me recordaba que
    	debí hacer caso al <i>aviso de tormenta</i> que dieron esta mañana en la televisión.
    	<br>
    	Bueno, <del>lo hecho, hecho está</del>, <ins>ya era tarde para lamentarse</ins>.</p>
    
    </body>
    </html>
    Estilos de texto en html

    Capítulo 8

    Este capítulo no tiene ejercicios.

    Capítulo 9

  34. Crea un enlace que lleve a wikipedia.org y otro que te lleve a la página principal de este sitio web.
  35. <!doctype html>
    <html>
    <head>
    	<meta charset="utf-8">
    	<title>Enlaces html</title>
    </head>
    
    <body>
    
    	<a href="https://www.wikipedia.org">Ir a Wikipedia</a>
    
    	<br>
    
    	<a href="https://www.programacionfacil.org">Ir a Programación Fácil</a>
    
    </body>
    </html>
    Enlaces html
  36. Crea tres enlaces internos a otras dos páginas que crees (pueden estar vacías) y el tercero que no enlace a ningún sitio.
  37. <!doctype html>
    <html>
    <head>
    	<meta charset="utf-8">
    	<title>Enlaces html</title>
    </head>
    
    <body>
    
    	<a href="pagina_1.html">Primera página</a>
    
    	<br>
    
    	<a href="pagina_2.html">Segunda página</a>
    
    	<br>
    
    	<a href="#">Enlace no especificado</a>
    
    </body>
    </html>
    Enlaces html5

    Para que los dos primeros enlaces funcionen, te tiene que haber quedado todo en la misma carpeta. Los dos primeros enlaces te pueden haber quedado diferente si los tienes en una carpeta a parte. Es importante si no te queda claro esto que me dejes un comentario y te lo explicaré detalladamente.
    Según el ejemplo, quedaría así en la carpeta:

    archivos html

    Capítulo 10

  38. Crea una carpeta en tu ordenador y nómbrala como quieras. En ella, crea otra carpeta llamada img. En esta carpeta (img) guarda tres imágenes cualquiera, puedes bajarlas de internet o copiarlas de tu equipo. En la carpeta principal crea una página html que lleve dentro estas tres imágenes. No te olvides de poner la descripción a las imágenes.
  39. <!doctype html>
    	<html>
    	<head>
    		<meta charset="utf-8">
    		<title>Imágenes html</title>
    	</head>
    
    	<body>
    
    		<img src="img/lago.jpg" alt="Foto de un lago">
    		<img src="img/ciudad.jpg" alt="Foto de una ciudad">
    		<img src="img/nieve.jpg" alt="Foto de un lago nevado">
    
    	</body>
    	</html>

    Debería quedarte una carpeta en cualquier parte de tu disco duro (yo la he llamado HTML, tú llámala como quieras) y dentro una carpeta llamada img y el archivo html que corresponde a las etiquetas de arriba .

    Carpeta con un documento html

    Dentro de la carpeta img deberías tener tres imágenes cualquiera.

    Carpeta con imagenes

    En mi caso, las imágenes que he puesto son pequeñas, esto te aparecerá diferente según el tamaño que tengan las imágenes.

    Galeria de fotos con html
  40. Crea una subcarpeta dentro de la carpeta img (llámala como quieras) y añade dos de las tres imágenes a esta. Modifica la página html creada en el ejercicio anterior para que se visualicen correctamente. No te olvides de poner la descripción a las imágenes.
  41. He creado una carpeta llamada naturaleza dentro de la carpeta img del ejercicio anterior. En ella he metido dos de las tres imágenes. Ahora solo hay que cambiar la ruta en la hoja html para que se puedan cargar.

    Carpetas con imágenes
    <!doctype html>
    <html>
    <head>
    	<meta charset="utf-8">
    	<title>Imágenes html</title>
    </head>
    
    <body>
    
    	<img src="img/naturaleza/lago.jpg" alt="Foto de un lago">
    	<img src="img/ciudad.jpg" alt="Foto de una ciudad">
    	<img src="img/naturaleza/nieve.jpg" alt="Foto de un lago nevado">
    
    </body>
    </html>
  42. Redimensiona desde html el ancho y alto de las imágenes, todas a 300px de ancho por 175px de alto (da igual si quedan mal proporcionadas).
  43. <!doctype html>
    <html>
    <head>
    	<meta charset="utf-8">
    	<title>Imágenes html</title>
    </head>
    
    <body>
    
    	<img src="img/naturaleza/lago.jpg" alt="Foto de un lago" width="300px" height="175px">
    	<img src="img/ciudad.jpg" alt="Foto de una ciudad" width="300px" height="175px">
    	<img src="img/naturaleza/nieve.jpg" alt="Foto de un lago nevado" width="300px" height="175px">
    
    </body>
    </html>

    En mi caso, las imágenes que he utilizado ya eran de ese tamaño, por lo que no hay diferencia. En el tuyo seguro que si la notas si no da la casualidad que sean del mismo tamaño.

    Galería de imágenes en html
  44. Si dominas un programa de edición de imágenes como Photoshop o Gimp, redimensiona las imágenes anteriores para que queden todas en un ancho máximo de 300px (el alto déjalo en proporción). Al dejarlas redimensionadas, quita la redimensión desde html, ya no la necesitas.
  45. Resultado en Photoshop

    Lo importante en Photoshop es que esté marcada la opción que ves marcada en rojo (restringir relación de aspecto) en la imagen inferior. De ese modo, especificas un tamaño en ancho o en alto y el otro te lo pone automáticamente para dejar siempre la proporción correcta.

    redimensionar imágenes en Photoshop

    Capítulo 11 - Final

  46. ¿Qué formato o formatos de imagen utilizarías para crear una transparencia?
  47. Respuesta

    De los que te he enseñado podrías utilizar gif, png, svg y webp (todos menos jpg).

  48. ¿Qué formato o formatos de imagen utilizarías para crear una galería de fotografías?
  49. Respuesta

    jpg, svg y webp.

  50. ¿Cuál de todos los formatos que te he enseñado es el más moderno?
  51. Respuesta

    webp.

  52. ¿Qué formato utilizarías para mostrar un logo animado en una web?
  53. Respuesta

    gif.


Comentarios

Si te quedan dudas sobre el temario, sobre html, o cualquier otra cosa relacionada o simplemente quieres agradecer, aquí tienes tu sitio para dejar tu granito de arena. Gracias por tus comentarios y por darle vida a este sitio web.

Programación Fácil YouTube

Suscríbete

Si te ha gustado este curso y crees que el trabajo merece la pena, te agradeceré eternamente que te suscribas a mi canal de YouTube para apoyarme y que pueda seguir haciendo cursos gratuitos.

Además, si te encanta la programación, tienes un montón más de cursos gratuitos para ver.

No solo eso, podrás participar enviándome comentarios con tus sugerencias para temas específicos o cursos completos o incluso las dudas que tengas y las intentaré ir resolviendo en los cursos que estén todavía abiertos.