Está en la página 1de 24

Nombre: __________________________________ 11.

Determine la fórmula para el sueldo de la celda H7


Grado: ___________________________________ Si tiene 6 años de servicio o menos su sueldo será
Fecha: _____________________________________ de $7,850; si tiene entre 7y 13 años su sueldo será
1. ¿Cuál de éstas corresponde a la extensión de un de $ 9,950, si tiene 14 o más años ganará $11,844
archivo de vídeo?
a) .html c) .midi
b) .ppt d) .avi
2. ¿Qué formato o formatos de imagen utilizarías para
crear una transparencia?
a) Gif d) Png
b) svg e) webp c) jpg ____________________________________________
12. Determine la función para agregar la fecha en la
3. ¿Cuál de todos los formatos que te he enseñado es celda E6
el más moderno?
a) Gif d) Png
b) svg e) webp c) jpg

4. ¿Qué formato utilizarías para mostrar un logo


animado en una web?
a) Gif d) Png
b) svg e) webp c) jpg

5. Crea una página HTML, donde muestre una lista


ordenada con los siguientes elementos: Xiaomi,
Samsung, Iphone, Huawei.
13. Determine la fórmula para la Comisión de la celda
E6; Si el código comienza con AL, el destino es
Japón entonces la comisión será de 3.1%; %; todos
los demás recibirán una comisión de 2.3%.

6. Determine la fórmula para sumar la columna B, en


la celda B6

14. Elija la forma correcta de ingresar una imagen.


a) imgsrc="foto.jpg"
b) imagen src="foto.jpg"
c) imghref="foto.jpg"
15. ¿Cómo definimos un color en sistema hexadecimal?
a) beige
b) 245,245,220
________________________________________ c) #F5F5DC
7. Determine la fórmula de la celda D12 para calcular 16. Para definir el fondo de la página se utiliza:
el total de MEMORIA USB 32GB VENDIDAS a) <FONT COLOR="RED">los guardianes azules </font>
b) <FONT SIZE="1">cada día seré mejor </FONT>
c) <p align="center">la mejor musica</p>
d) <body bgcolor=”#00ff00”>
17. ¿Cómo definimos un texto alternativo para una
imagen?
a) Img src="foto.jpg" alt="texto alternativo"
b) Img src="foto.jpg" value="texto alternativo"
c) imgsrc="foto.jpg" text="texto alternativo"
18. ¿Cómo mandamos un e-mail al webmaster de
Tutorial Monsters a partir de un vínculo?
_______________________________________ a) a mail="norsupam@gmail.com"
b) a mailto="norsupam@gmail.com"
8. ¿Cuál de éstas corresponde a la extensión de un c) a href="norsupam@gmail.com"
archivo de imagen? 19. HyperText Markup Language (Lenguaje de Marcado
a) .htm c) .mpeg de Hipertexto), es el lenguaje de marcado
b) .avi d) .jpg predominante para la elaboración de páginas web.
9. .odp es la extensión de: a) html c) .doc
a) Un archivo de texto. b) .js d) .css
b) Una hoja de cálculo.
c) Un archivo de Internet. 20. Hojas de estilo en cascada (en inglés Cascading
d) Un archivo de imagen. Style Sheets).
10. Cambiar la extensión de un archivo... a) .pdf c) .doc
a) ... puede hacerse sin problema.
b) .gif d) .css
b) ... deja siempre al archivo inservible.
c) ... puede hacerse si se conocen otras extensiones y
compatibilidades.
d) ... es imposible de hacer
28. Formato gráfico basado en un algoritmo de
compresión sin pérdida para bitmaps no sujeto a
patentes. Este formato fue desarrollado en buena
parte para solventar las deficiencias del formato
GIF y permite almacenar imágenes con una mayor
profundidad de contraste y otros importantes
datos.
a) .jpg c) .png
b) .gif d) .tiff
29. Formato de imagen muy extendido en internet.
a) .jpg c) .jpeg
b) .gif d) .tiff
30. Microsoft Word.
a) .asf c) .doc
b) .docx d) .css
31. Microsoft Office Power Point pertence a:
a) Software ofimático
b) Software de programación
21. ¿Cuál de éstas corresponde a la extensión de un c) Software de presentación
archivo de sonido? d) Software de diapositivas
a) .mp4 c) .mp3
b) .flv d) .xlsx 32. Describe la ventana Microsoft Office de word
22. .docx es la extensión de:
a) Un archivo de texto. c) Una hoja de cálculo.
b) Un archivo de Internet. d) Un archivo de
imagen.
23. La extensión de un archivo... (Más de una respuesta
correcta)
a) ...depende del sistema operativo del ordenador. 33. Formato de imagen muy extendido en internet.
b) ... se expresa con un punto y un grupo de letras al a) .jpg c) .jpeg
final del nombre del archivo. b) .gif d) .tiff
c) ... depende del programa con el que se creó el Comprime la imagen mediante la aplicación de algoritmos
archivo. informáticos.
d) ... determina con qué programa se puede editar el 34. Formato gráfico muy extendido usado también para
archivo. el uso de animaciones simples.
. a) .jpg c) .png
24. .png es la extensión de: b) .gif d) .tiff
a) Un archivo de texto. 35. Formato gráfico basado en un algoritmo de
b) Una hoja de cálculo. compresión sin pérdida para bitmaps no sujeto a
c) Un archivo de Internet. patentes. Este formato fue desarrollado en buena
d) Un archivo de imagen. parte para solventar las deficiencias del formato
GIF y permite almacenar imágenes con una mayor
25. Formato propio del programa Microsoft Paint, que profundidad de contraste y otros importantes
viene con el sistema operativo Windows. datos.
a) .jpg c) .wav a) .jpg c) .png
b) .mp3 d) .bmp b) .gif d) .tiff
36. Formato de archivo de imágenes con etiquetas.
26. Determine la fórmula en la celda D8 de saldo. que a) .jpg c) .png
es la diferencia entre ingresos y egresos. b) .gif d) .tiff
37. Formato de archivo gráfico que satisface algunas
restricciones adicionales.
a) .eps c) .png
b) .gif d) .tiff

38. Formato destinado a la creación artística de dibujo


y pintura para Ilustración (Ilustración como rama
del Arte digital aplicado a la Ilustración técnica o el
___________________________________ diseño gráfico, entre otros). Es desarrollado y
comercializado por Adobe Systems Incorporated.
Sus usos se dan en (Maquetación-Publicación)
impresión, vídeo, publicación en la Web y
dispositivos móviles.
27. Ubique en la celda D4, la diferencia de la columna B a) .bpm c) .ai
y C. b) .gif d) .png

39. HyperText Markup Language (Lenguaje de Marcado


de Hipertexto), es el lenguaje de marcado
predominante para la elaboración de páginas web.
a) .html c) .doc
b) .js d) .css
__________________
40. Hojas de estilo en cascada (en inglés Cascading
Style Sheets).
c) .pdf c) .doc
d) .gif d) .css
41. Es un archivo de texto plano que contiene scripts de b) .ra d) .wmv
Javascript, y que puede, por tanto, ser modificado 51. Formato contenedor de audio y video lanzado por
con cualquier editor de textos. Es ejecutado Microsoft en 1992.
generalmente por un navegador web. a) .mp3 c) .mpg
a) .tiff c) .js b) .avi d) .wmv
b) .aiff d) .css 52. QuickTime es un framework multimedia estándar
42. Es un formato de archivo de gráficos vectoriales desarrollado por Apple que consiste en un conjunto
creado por la empresa Macromedia (actualmente de bibliotecas y un reproductor multimedia
Adobe Systems). (QuickTime Player).
a) .tiff c) .js a) .mp3 c) .mpg
b) .swf d) .css b) .mov d) .wmv
43. Formato de audio digital normalmente sin
compresión de datos desarrollados y propiedad de 53. Grupo de trabajo del ISO/IEC encargado de
Microsoft y de IBM que se utiliza para almacenar desarrollar estándares de codificación de audio y
sonidos en el PC, admite archivos mono y estéreo a vídeo.
diversas resoluciones y velocidades de muestreo. a) .mp3 c) .mpg
Sin pérdida de calidad. b) .mpc3 d) .wmv
a) .mp4 c) .wav 54. Nombre genérico que se da al conjunto de
algoritmos de compresión ubicados en el set
b) .mp3 d) .aiff propietario de tecnologías de vídeo desarrolladas
por Microsoft, que forma parte del framework
44. Formato de audio comprimido sin ninguna pérdida, Windows Media.
lo que ayuda a un rápido procesado de la señal a) .asf c) .doc
pero con la desventaja del gran espacio en disco b) .docx d) .wmv
que supone. 55. Formato contenedor de audio y video digital
a) .jpg c) .wav propiedad de Microsoft, diseñado especialmente
b) .mp3 d) .aiff para el streaming.
a) .asf c) .doc
45. Formato de fichero para comprimir información de b) .gif d) .css
audio. Siendo un formato de compresión sin 56. En los ficheros de texto la información se guarda
pérdida. como caracteres, codificados en ASCII u otras
a) .ape c) .wav codificaciones de texto. Están compuestos por
b) .mp3 d) .aiff bytes que representan caracteres ordinarios como
46. Formato del proyecto Ogg para codificar audio sin letras, números y puntuación (incluyendo espacios),
pérdida de calidad, es decir, el archivo inicial puede también incluye algunos caracteres de control como
ser recompuesto totalmente con la desventaja de tabulaciones, separaciones de líneas y retornos de
que el archivo ocupe mucho más espacio del que se carro. Esta simplicidad permite que una gran
obtendría al aplicar compresión con pérdida. variedad de programas pueda leer y editar ese
a) .flac c) .doc contenido.
b) .gif d) .fiag a) .txt c) .doc
b) .docx d) .rtf
47. Formato de audio digital comprimido con pérdida 57. Formato de Documento Abierto para Aplicaciones
desarrollado por el Moving Picture Experts Group Ofimáticas de OASIS (en inglés, OASIS Open
(MPEG) para formar parte del formato de vídeo Document Format for Office Applications), también
MPEG. referido como formato OpenDocument (ODF), es un
a) .jpg c) .wav formato de fichero estándar para el
b) .mp3 d) .aiff almacenamiento de documentos ofimáticos.
48. Formato de compresión de audio con pérdida y es a) .odt c) .doc
propiedad de Microsoft. Compite con el formato b) .docx d) .odf
MP3, antiguo y bastante inferior técnicamente; y 58. Microsoft Word.
Ogg-Vorbis, superior y libre, usando como a) .asf c) .doc
estrategia comercial la inclusión de soporte en el b) .docx d) .css
reproductor Windows Media Player, incluido en su 59. Surgió como acuerdo para intercambio de datos
popular sistema operativo Windows. entre Microsoft y Apple en los tiempos en que
a) .jpg c) .wav Apple dominaba el mercado de los computadores
b) .mp3 d) .aiff personales.
a) .txt c) .doc
49. Formato informático de señal digital audio basado b) .docx d) .rtf
en el Algoritmo de compresión con pérdida, un 60. Portable document format (formato de documento
proceso por el que se eliminan algunos de los datos portátil). Es multiplataforma y es uno de los
de audio para poder obtener el mayor grado de formatos más extendidos en Internet para el
compresión posible, resultando en un archivo de intercambio de documentos. Por ello es muy
salida que suena lo más parecido posible al original. utilizado por empresas, gobiernos e instituciones
a) .aac c) .wav educativas. .
b) .mp3 d) .aiff a) .pdf c) .doc
b) .gif d) .css
50. Formato de audio que permite adaptarse
automáticamente a la capacidad de recepción del
61. PostScript es un lenguaje de descripción de páginas
usuario final, dependiendo de su velocidad de
(en inglés PDL, page description language), utilizado
conexión, procesador y memoria. Si el usuario
en muchas impresoras y, de manera usual, como
puede recibir paquetes de alta calidad de audio sin
formato de transporte de archivos gráficos en
interrupciones, el servidor lo proveerá así, de lo
talleres de impresión profesional.
contrario, el servidor reducirá el rango de muestreo
(y con ello, la calidad del audio) hasta que el
a) .pdf c) .pss
usuario no sufra interrupciones en su señal.
a) .mp3 c) .avi b) .gif d) .ps
74. El <input type=submit> se usa para ejecutar el
62. Es un formato de compresión de datos sin pérdida action de un formulario
con tasas muy altas, superando a las de los a) Verdadero
populares formatos zip y rar. b) Falso
a) .rer c) .isa 75. Para sacar una lista desplegable se usa <select>
b) .7z d) .zip a) Verdadero
63. Formato de almacenamiento sin pérdida, muy b) Falso
utilizado para la compresión de datos como 76. Para crear una celda de una tabla se usa <td>
imágenes, programas o documentos. a) Verdadero
a) .rer c) .isa b) Falso
b) .gif d) .zip 77. Para centrar se puede usar <center>
64. Formato de archivo propietario, con un algoritmo a) Verdadero
de compresión sin pérdida utilizado para la b) Falso
compresión de datos y archivación, desarrollado 78. Los input type=radio con el mismo name hacen que
por el ingeniero de software ruso, Eugene Roshal. sólo se pueda seleccionar una opción entre ellos
a) .rar c) .doc a) Verdadero
b) .gif d) .css b) Falso
79. Los textarea sirven para introducir en un formulario
Teoría de los sistemas varias líneas de texto
� Procesadores de texto II a) Verdadero
� Recursos energéticos b) Falso
� Documentación de recursos energéticos. 80. ¿Qué entiende por HTML?
a) HyperTextMaskLanguage
� Herramientas, opciones de menú de Excel, teclas
b) HardTextMarkupLanguage
para hacer operaciones y dar formato. c) HyperTextMarkupLanguage
� Opciones de menú de Power Point en el diseño de 81. ¿Qué etiqueta utilizamos para definir el cuerpo del
diapositivas con imágenes, hipervínculo y animación. documento?
a) background
b) body
65. Microsoft Word es un programa informático c) b
orientado al procesamiento de textos. 82. ¿Qué etiqueta utilizamos para insertar una línea
a) Verdadero horizontal?
b) Falso a) br
66. Microsoft Excel es una aplicación cuya finalidad es b) hr
la realización de diapositivas c) line
a) Verdadero 83. ¿Cuál es la forma correcta de insertar un
b) Falso comentario?
67. ¿Qué programa nos permite presentar material a) !--...--
audiovisual de forma organizada y entretenida? b) ¡--...--!
a) Microsoft Excel c) comment
b) Microsoft Word 84. Elija la etiqueta apropiada para un texto en negrita.
c) Microsoft Power Point a) bold
d) Microsoft Viso Viewer b) bb
e) Ninguna de las anteriores c) b
68. Mencione ¿con qué herramienta se organizan datos 85. ¿Cuál es la forma correcta de crear un vínculo a la
de forma eficiente con el objeto de poder página principal de Tutorial Monsters?
compararlos? a) a
a) Word target="http://ienormalsuperiorpamplona.edu.co/"
b) Acces b) a href="http://ienormalsuperiorpamplona.edu.co/"
c) Excel c) a url="http://ienormalsuperiorpamplona.edu.co/"
d) Power Point 86. ¿Qué etiqueta define la fila de una tabla?
69. ¿Es posible crear un archivo PDF con word, excel o a) tr
power point? b) td
a) Verdadero c) row
b) Falso 87. ¿Qué etiqueta define una lista ordenada?
a) ol
70. Una página con extensión htm o html comienza por b) ul
html (entre signos mayor y menor) c) li
a) Verdadero 88. Elija la etiqueta apropiada para hacer una lista
b) Falso desplegable.
a) inputtype="list"
71. Para insertar una fila en una tabla usamos td (entre b) inputtype="menu"
signos menor y mayor) c) select
a) Verdadero 89. ¿Cómo definimos un área de texto?
a) textarea
b) Falso
b) input type="textarea"
c) input type="text"
72. Para comenzar un formulario usamos formulary
90. Elija la forma correcta de ingresar una imagen.
(entre signos mayor y menor)
d) imgsrc="foto.jpg"
a) Verdadero
e) imagen src="foto.jpg"
b) Falso
f) imghref="foto.jpg"
73. El <title> se encuentra dentro del <body> en una
91. ¿Cómo definimos un color en sistema hexadecimal?
página web
d) beige
a) Verdadero
e) 245,245,220
b) Falso
f) #F5F5DC
92. ¿Qué etiquetas pueden figurar en la sección <div> Contenedor de bloque
<head>? <t1> No existe esta etiqueta en
a) style, meta, table HTML
b) link, title, base <span> Contenedor en línea
c) link, meta, p <tr> Fila de una tabla
93. ¿Cómo mandamos un e-mail al webmaster de <hr> Linea horizontal
Tutorial Monsters a partir de un vínculo?
¿Cómo se etiqueta un párrafo en HTML?
d) a mail="webmaster@tutorialmonsters.com"
e) a mailto="webmaster@tutorialmonsters.com" a) <p>Esto es un párrafo.</p>
f) a href="mailto:webmaster@tutorialmonsters.com" b) (p)Esto es un párrafo.(p)
94. ¿Qué es padding? c) </p>Esto es un párrafo.<\p>
a) Establece la anchura de algunas o todas las zonas de d) <p="Esto es un párrafo">
relleno de los elementos e) <p>Esto es un párrafo.<p>
b) Define el espacio entre el borde de la celda y su
contenido 100. Para definir el fondo de la página se utiliza:
c) Define el espacio entre celdas de una tabla e) <FONT COLOR="RED">los guardianes azules </font>
95. ¿Cómo definimos un texto alternativo para una f) <FONT SIZE="1">cada día seré mejor </FONT>
imagen? g) <p align="center">la mejor musica</p>
a) Img src="foto.jpg" alt="texto alternativo" h) <body bgcolor=”#00ff00”>
b) Img src="foto.jpg" value="texto alternativo"
c) imgsrc="foto.jpg" text="texto alternativo"
96. ¿Qué etiqueta define un salto de línea?
a) br
b) break
c) linebreak
97. ¿Cómo colocamos una imagen de fondo de un
elemento con CSS?
a) td background="..."
b) background-image
c) background
98. Elija la etiqueta que nos da el título más grande
a) h1
b) h6
c) head
99. ¿Cómo hacemos para abrir un vínculo en otra
ventana?
a) a href="http://ienormalsuperiorpamplona.edu.co/"
new
b) a href="http://ienormalsuperiorpamplona.edu.co/"
target="_new"
c) a href="http://ienormalsuperiorpamplona.edu.co/"
target="_blank"

¿Qué formato tienen las páginas HTML?


a) Son ficheros de texto. Podemos leer su contenido
con cualquier procesador de texto
b) Son ficheros de texto especiales. Solo pueden leerlos
los navegadores, un editor de texto normal no
podría abrirlo
c) Son ficheros binarios compilados. No se pueden leer,
solo ejecutar en un navegador
¿Cuál es la versión actualmente vigente del estándar HTML?
a) HTML 3
b) HTML 6
c) HTML 4
d) HTML 5
¿Cuál es la estructura de una página Web? Elige de las
siguientes cuál es el que muestra las secciones correctas

a) <!DOCTYPE html> <html> <head>.....</head>


<body>.....</body> </html>
b) <!DOCTYPE html> <head>.....</head>
<body>....</body> <footer>.....</footer>
c) <!DOCTYPE html> <html> <head>.....</head>
<body>.....</body> <footer>....</footer> </html>
d) <!DOCTYPE html> <body> <head>.....</head>
<html>.....</html> </body>

Empareja cada definición con su elemento/etiqueta HTML:

Ordenar elementos
<a> Enlace
<h1> Título/encabezado de primer
nivel
Soluciones de ejercicios
html
101. 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>.

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

COPIAR

 Resultado en el navegador 

3. En este caso, solo escribe cualquier otra cosa en el título de la página,


etiquetas <title>.

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

COPIAR

 Resultado en el navegador 

102. Capítulo 2
4. 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>).

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

COPIAR

 Resultado en el navegador 

103. Capítulo 3
5. Escribe en una página html cualquiera un comentario de una sola línea con el texto
que quieras.

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

COPIAR

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

6. Escribe en una página html cualquiera un comentario de tres líneas con el texto que
quieras.

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

COPIAR

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

7. Escribe dos párrafos en una página html y anula el primero comentándolo.


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

COPIAR

 Resultado en el navegador 

104. Capítulo 4
8. Crea una lista ordenada con los siguientes elementos: Xiaomi, Samsung, Iphone,
Huawei.

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

COPIAR

 Resultado en el navegador 

9. Crea una lista desordenada con los elementos anteriores.

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

COPIAR

 Resultado en el navegador 

10. Crea una lista de definiciones con tres términos. Solo el tercero llevará definición.
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>
HTML

COPIAR

 Resultado en el navegador 

105. Capítulo 5
11. 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.

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

COPIAR

 Resultado en el navegador 
106. Capítulo 6
12. Crea una lista con seis elementos y ordénala en orden inverso.

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

COPIAR

 Resultado en el navegador 

13. Crea un <iframe> con una ubicación cualquiera utilizando OpenStreetMap. Este
nuevo <iframe> será de 600 de ancho por 400 de alto.

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%2C
35.
7195140435175&amp;layer=mapnik"></iframe>

</body>
</html>
HTML

COPIAR

 Resultado en el navegador 

107. Capítulo 7
14. Crea un párrafo que contenga las etiquetas <b>, <i> y <mark>.

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

COPIAR

 Resultado en el navegador 
15. Escribe en un párrafo un número como este: 702

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

COPIAR

 Resultado en el navegador 

16. Crea un párrafo con solo una parte tachada en el texto.

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

COPIAR

 Resultado en el navegador 
17. 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.

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

COPIAR

 Resultado en el navegador 

108. Capítulo 8
Este capítulo no tiene ejercicios.
109. Capítulo 9
18. Crea un enlace que lleve a wikipedia.org y otro que te lleve a la página principal de
este sitio web.

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

COPIAR

 Resultado en el navegador 

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

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

COPIAR

 Resultado en el navegador 

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:

110. Capítulo 10
20. 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.

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

COPIAR

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 .

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

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

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

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

COPIAR

22. 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).

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

COPIAR
 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.

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

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.

111. Capítulo 11 - Final


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

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

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

Respuesta
jpg, svg y webp.

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


Respuesta
webp.

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

Respuesta
gif.

También podría gustarte