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.
- 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.
- 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>
. - En este caso, solo escribe cualquier otra cosa en el título de la página, etiquetas
<title>
. - 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>
). - Escribe en una página html cualquiera un comentario de una sola línea con el texto que quieras.
- Escribe en una página html cualquiera un comentario de tres líneas con el texto que quieras.
- Escribe dos párrafos en una página html y anula el primero comentándolo.
- Crea una lista ordenada con los siguientes elementos: Xiaomi, Samsung, Iphone, Huawei.
- Crea una lista desordenada con los elementos anteriores.
- Crea una lista de definiciones con tres términos. Solo el tercero llevará definición.
- 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.
- Crea una lista con seis elementos y ordénala en orden inverso.
- Crea un
<iframe>
con una ubicación cualquiera utilizando OpenStreetMap. Este nuevo<iframe>
será de600
de ancho por400
de alto. - Crea un párrafo que contenga las etiquetas
<b>
,<i>
y<mark>
. - Escribe en un párrafo un número como este: 702
- Crea un párrafo con solo una parte tachada en el texto.
- 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. - Crea un enlace que lleve a wikipedia.org y otro que te lleve a la página principal de este sitio web.
- 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.
- 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.
- 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.
- Redimensiona desde html el ancho y alto de las imágenes, todas a
300px
de ancho por175px
de alto (da igual si quedan mal proporcionadas). - 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. - ¿Qué formato o formatos de imagen utilizarías para crear una transparencia?
- ¿Qué formato o formatos de imagen utilizarías para crear una galería de fotografías?
- ¿Cuál de todos los formatos que te he enseñado es el más moderno?
- ¿Qué formato utilizarías para mostrar un logo animado en una web?
Capítulo 1
<!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>
<!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>
Capítulo 2
<!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>
Capítulo 3
<!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.
<!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.
<!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>
Capítulo 4
<!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>
<!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>
<!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>
Capítulo 5
<!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>
Capítulo 6
<!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>
<!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&layer=mapnik"></iframe>
</body>
</html>
Capítulo 7
<!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>
<!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>
<!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>
<!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>
Capítulo 8
Este capítulo no tiene ejercicios.
Capítulo 9
<!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>
<!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>
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:
Capítulo 10
<!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 .
Dentro de la carpeta img deberías tener tres imágenes cualquiera.
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.
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.
<!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>
<!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.
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.
Capítulo 11 - Final
Respuesta
De los que te he enseñado podrías utilizar gif, png, svg y webp (todos menos jpg).
Respuesta
jpg, svg y webp.
Respuesta
webp.
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.