Curso de HTML5 básico - Soluciones de los ejercicios

Curso de html5 básico desde cero

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.

Soluciones de ejercicios html

    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 (subrayada en amarillo, la solución).
    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. Etiquetas HTML

    <!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>

    Resultado en el navegador

    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. Etiquetas HTML

    <!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>

    Resultado en el navegador

    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. Etiquetas HTML

    <!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>

    Resultado en el navegador

    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. Etiquetas HTML

    <!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>

    Resultado en el navegador

    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. Etiquetas HTML

    <!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>

    Resultado en el navegador

    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. Etiquetas HTML

    <!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>

    Resultado en el navegador

    Párrafos html

    Capítulo 4

  14. Crea una lista ordenada con los siguientes elementos: Xiaomi, Samsung, Iphone, Huawei.

  15. Etiquetas HTML

    <!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>

    Resultado en el navegador

    Listas ordenadas html
  16. Crea una lista desordenada con los elementos anteriores.

  17. Etiquetas HTML

    <!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>

    Resultado en el navegador

    Listas desordenadas html
  18. Crea una lista de definiciones con 3 términos. Solo el tercero llevará definición.

  19. Etiquetas HTML

    <!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>

    Resultado en el navegador

    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 4 filas restantes, inventa modelos de coche (pueden ser reales si los conoces) y dales el precio que quieras y una velocidad máxima.

  21. Etiquetas HTML

    <!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>

    Resultado en el navegador

    Ejercicios con tablas html

    Capítulo 6

  22. Crea una lista con 6 elementos y ordénala en orden inverso.

  23. Etiquetas HTML

    <!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>

    Resultado en el navegador

    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. Etiquetas HTML

    <!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>

    Resultado en el navegador

    Mapa openstreetmap

    Capítulo 7

  26. Crea un párrafo que contenga las etiquetas b, i y mark.

  27. Etiquetas HTML

    <!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>

    Resultado en el navegador

    Texto formateado en html
  28. Escribe en un párrafo un número como este: 702

  29. Etiquetas HTML

    <!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>

    Resultado en el navegador

    Potencias en html
  30. Crea un párrafo con solo una parte tachada en el texto.

  31. Etiquetas HTML

    <!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>

    Resultado en el navegador

    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. Etiquetas HTML

    <!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>

    Resultado en el navegador

    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. Etiquetas HTML

    <!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>

    Resultado en el navegador

    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. Etiquetas HTML

    <!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>

    Resultado en el navegador

    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. Etiquetas HTML

    <!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>

    Resultado

    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 3 imágenes cualquiera.

    Carpeta con imagenes

    Resultado en el navegador

    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. Resultado

    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

    Etiquetas HTML

    <!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. Etiquetas HTML

    <!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>

    Resultado en el navegador

    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. (Opcional)- 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.


Suscríbete a mi canal de YouTube para apoyarme

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.


Comentarios

Si te quedan dudas sobre el temario, sobre Python, 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.