INSTITUTO GUBERNAMENTAL SANTIAGO RIERA VASQUEZ

CODIGO: 0503000093MO2
Omoa, Cortes
“T
E QUEREMOS ESTUDIANDO EN CASA”

Bachillerato Técnico Profesional en Informática

DISEÑO WEB I- PARCIAL 2
GRADO: DUODECIMO SECCION: ______

NOMBRE DEL ALUMNO:

_______________________________________________
NOMBRE DEL MAESTRO:
_______________________________________________
Introducción:
En este material didáctico encontrara el contenido que permita adquirir los conocimientos
específicos directamente relacionados con los requerimientos de las competencias definidas
en el plan de estudios.
Debe entender que este material es una guía en su proceso de aprendizaje y no pretende
reemplazar la asistencia a las clases en línea. Por lo que la asistencia al espacio virtual de esta
clase es necesaria para adquirir dichos conocimientos.

Unidad de competencia:
Identificar y utilizar técnicas y programas para el desarrollo de sitios web personales e
institucionales.

Descripción de la Clase.
Crear, utilizar y dar soporte técnico a programas, equipos e infraestructura informática que
permita la comunicación de personas e instituciones.

Instrucciones:
- Lea el contenido con detenimiento.
- Desarrolle las actividades propuestas de forma individual.
- Mantenga este material limpio y ordenado, ya que lo presentará
como evidencia de su trabajo.
- En la plataforma virtual estará disponible una biblioteca la cual
puede ser consultada, para ampliar el contenido presentado en este
material.
TEMAS DEL PARCIAL 2
OBJETIVO CONTENIDO EVALUACION
Insertar imágenes a la página web, 1.1- HTML <IMG> Desarrollar guía de trabajo. (20%)
utilizando los atributos disponibles en - Formato de Imágenes
la etiqueta img. - Atributo src
- Atributo Alt Prácticas en el bloc de notas y
Crear catálogos de imágenes - Atributo Width explorador de internet (15%)
utilizando los atributos de la etiqueta Y height
picture.
1.2 HTML <PICTURE>
- Escenas
- Orientación

Insertar tablas a la página web, 2.1 HTML <TABLE> Desarrollar guía de trabajo (15%)
utilizando los atributos de la etiqueta - Atributo TR
table. - Atributo TD
- Atributo TH
Aplicar formato a las tablas utilizando - Formato de Tablas CSS
los atributos css - Atributo Colspan
- Atributo Rowspan
Insertar videos y sonidos a la página 2.1 HTML <VIDEO> Crear un sitio con al menos 5 páginas
web, utilizando los atributos de la - Atributo Controls web. Utilizando imágenes, tablas y
etiqueta video. - Atributo Autoplay videos. (25%)
 - Atributo Loop
- Atributo Mute
- Atributo Width y Height

Aplicar cambios en cascada a la página 2.1 HTML <css> Crear una página web utilizando los
web, utilizando los códigos css. - Sintaxis CSS estilos CSS. (5%)
- Selectores
- css Fuentes y texto
RUBRICA DE EVALUACION
CONTENIDO VALOR
Material Impreso 35%
Asistencia a clases Virtuales 5%
Desarrollo de páginas en HTML. 45%
Evaluación Virtual 15%
Total 100%

1.2- HTML <IMG>

Las imágenes son un elemento esencial en las páginas web. Hasta la versión 5 de
HTML se utilizaba la etiqueta <img> para incluirlas en una página web. Pero
debido a la necesidad de crear páginas web que se adapten a dispositivos de
diferente tamaño se ha incorporado la etiqueta <picture>.

los tipos de archivos más usados son .jpg, y .png; también se utilizan mucho para
gráficos y animaciones las de tipo .gif.

Etiqueta <img>

Con la etiqueta <img> representamos imágenes en una página web. Esta

etiqueta no tiene etiqueta de cierre, se cierra con el carácter >, aunque también
se puede cerrar con />. Para indicar el origen de la imagen se utiliza el
atributo src="ruta_imagen". Por ejemplo:

<img src="graficos/logoAulaclic.jpg"/>

Que produce el siguiente resultado:

Atributo src de la etiqueta <img>

Como acabamos de ver el atributo src sirve para indicar la ruta donde se

encuentra la imagen que se va a mostrar. Por tanto, la imagen estará en un
archivo distinto al archivo que contiene la página web, no puede estar incrustada
en el mismo archivo (salvo que se genere dinámicamente).

Atributo alt de la etiqueta <img>

El atributo alt contiene texto alternativo, que se mostrará en lugar de la imagen

cuando no sea posible verla.

Por ejemplo, si escribimos el siguiente código con el nombre del directorio

erróneo (grafico en lugar de graficos) se mostrará el texto de atributo alt:

<img src="graficos/logoAulaclic.jpg" alt="Logo de aulaClic"

/>

Se muestra lo siguiente:

Si no existe la imagen ni tampoco el atributo alt algunos navegadores (Firefox)

mostrarán un pequeño gráfico con un icono similar a este:  , y otros

navegadores (Chrome) no mostrarán nada:

<img src="graficos/logoAulaclic.jpg" />

Se muestra lo siguiente:

Aunque el atributo Alt es obligatorio, si se omite no se producirá ningún error

apreciable por el usuario. Si se omite este atributo, al validar la página con
la herramienta W3C no dará una validación correcta. Aparte de la función
 principal de mostrar el texto cuando no existe la imagen, es importante
utilizar Alt por dos motivos.

El primero es porque lo usan los buscadores para indexar las imágenes en sus

bases de datos de forma que podamos encontrar la imagen desde un buscador,
el segundo motivo es porque el atributo alt es utilizado por los programas que
ayudan a los ciegos y personas con problemas visuales a leer las páginas web.
En cualquier caso es importante dar un texto descriptivo y corto a este atributo.

5.5. Atributo title en la etiqueta <img>

El atributo title es un atributo global, es decir que puede usarse en la mayor

parte de las etiquetas de HTML. El atributo title proporciona información
descriptiva del elemento en el que está definido. El atributo title se muestra como
un tooltip al colocar el cursor encima del elemento y es bastante utilizado en las
etiquetas img ya que puede ser interesante proporcionar al usuario información
sobre la imagen en forma de tooltip.

Por ejemplo, con el siguiente código mostrará el tooltip al dejar colocado el

cursor sobre la imagen durante un segundo o más:

<img src="graficos/logoAulaclic.jpg" title="Cursos de

inforaática gratis" />

Atributos width y height de la etiqueta <img>

El atributo width establece la anchura de visualización de la imagen, y el

atributo height establece la altura de visualización de la imagen. No son
obligatorios, si no aparecen la imagen tendrá su altura y anchura original. Si
aparecen, modificarán el aspecto de la imagen pero no afectarán al archivo de
imagen, es decir, sólo afectarán a la visualización que realiza el navegador de la
imagen. Por defecto, las unidades son píxeles. Por ejemplo, si queremos que la
imagen anterior se vea a la mitad de sus tamaño original (200 x 79) escribiremos
este código.

<img src="graficos/logoAulaclic.jpg" width="100"

height="40" />

Es importante mantener las proporciones originales si queremos que la imagen

no se vea deformada. Si sólo indicamos la anchura, la altura se calculará
proporcionalmente, y viceversa. Como norma general, no conviene modificar las
dimensiones originales de la imagen, y sobre todo no agrandar demasiado la
imagen ya que perderá resolución y no se verá bien. Es preferible modificar el
tamaño de la imagen con un programa de edición fotográfica. Si necesitamos
agrandar mucho una imagen es mucho mejor utilizar imágenes vectoriales, como
imágenes svg, que veremos más adelante en este curso.

Si no indicamos los atributos width y height, el navegador no podrá reservar el

sitio adecuado para la imagen, y puesto que el texto se carga antes que la
imagen, se producirá un efecto de recomposición (o salto) de la página cuando se
cargue la imagen. Este efecto puede ser molesto con imágenes grandes que
harán que el texto se desplace de forma más apreciable.

Hasta la versión 5 de HTML, la anchura y la altura también se podía dar

en porcentaje, lo cual se utilizaba para hacer que la imagen se adaptará a todo el
ancho de la pantalla dando el valor width="100%". Actualmente con la aparición
de la etiqueta picture ya no es necesario utilizar ese truco para conseguir
imágenes adaptables.

Por ejemplo, En la siguiente imagen hemos dado un valor de width="25%", y la

imagen ocupa el 25% del ancho disponible, si redimensionas la ventana del
navegador verás como va cambiando de tamaño.

<img src="graficos/logoAulaclic.jpg" width="25%"/>

 Si damos una anchura en porcentaje puede que la imagen se agrande
demasiado y no se vea bien, para evitarlo se puede utilizar la propiedad max-
width=100% en la hoja de estilo, de forma que la imagen nunca se agrandará
más de su tamaño original. Por ejemplo:

<img src="graficos/en_rio_grande_800.jpg" style="max-width:

100%; height: auto;">

1.3- HTML <PICTURE>

La etiqueta picture es la nueva manera de insertar imágenes en una página web de una forma más
flexible que con la etiqueta img que ha venido usándose hasta las versión 5.1. de HTML. La
etiqueta picture es preferible sobre todo si queremos diseñar páginas web que se adapten a todo
tipo de pantallas. Ya que permite mostrar diferentes imágenes en función de varios parámetros,
como las dimensiones de la ventana, orientación de la ventana, tipo de imagen y resolución del
dispositivo.

Es decir, por ejemplo, podemos mostrar diferentes versiones de una imagen según el ancho de la
ventana del navegador con el que se va a visualizar la imagen; así mostraremos una imagen
pequeña en un teléfono móvil, una imagen mediana en un tablet y una imagen grande en un
ordenador.

El formato genérico de la etiqueta picture es el siguiente:

<picture>
<source media="(condición 1)" srcset="imagen_1.jpg">
<source media="(condición n)" srcset="imagen_n.jpg">
<img src="imagen_alt" alt="Si no se cumple ninguna condición">
</picture>

Es obligatoria la etiqueta de apertura <picture> y la de cierre </picture>, entre ambas se pueden

colocar tantas etiquetas <source> como se deseen. Antes de la etiqueta de cierre debe ir una
etiqueta <img>.

Si se cumple la condición de la primera etiqueta source se mostrará la imagen indicada en esa

etiqueta, en caso contrario se evaluará la siguiente etiqueta source, y así sucesivamente. Si no se
cumple ninguna condición o el navegador no soporta la etiqueta picture, se mostrará la imagen
contenida en la etiqueta img.
Las condiciones se pueden expresar utilizando Media-Queries y pueden hacer referencia a
distintos parámetros (anchura, orientación, ...)

Vamos a ver un ejemplo de diseño adaptable que muestra una imagen u otra según la anchura
de la pantalla, en este enlace puedes ver el ejemplo: Etiqueta picture con diferentes
anchuras  .

y este es el código empleado:

<picture>
<source media="(min-width: 800px)" srcset="graficos/en_rio_grande_800.jpg">
<source media="(min-width: 600px)" srcset="graficos/en_rio_mediana_600.jpg">
<source media="(max-width: 600px)" srcset="graficos/en_rio_pequenya_300.jpg">
<img src="graficos/por_si_acaso.jpg" alt="Si no se cumple ninguna condición">
</picture>

Hemos utilizado tres condiciones referentes al ancho de la ventana para mostrar una imagen
según estemos en una pantalla grande, mediana o pequeña.

La condición de la primera etiqueta source, min-width: 800px se cumplirá si la pantalla tiene,

como mínimo 800 px. de ancho, es decir si la anchura es mayor o igual a 800 px. Si es así se
mostrará la imagen en_rio_grande_800.jpg. Si no es así, se pasará a la siguiente
etiqueta source que pregunta si la anchura es mayor o igual a 600 px., por lo tanto si la anchura
está entre 799 px. y 600 px., se mostrará la imagen en_rio_mediana_600.jpg

Si no se cumple se pasará a la siguiente etiqueta source, que contiene la condición max-width:

600px que será cierta si la pantalla tiene como máximo 600 px, es decir si la pantalla es menor o
igual de 600 px., en ese caso se mostrará la imagen en_rio_pequenya_300.jpg (Hubiese sido más
correcto poner max-width: 599px)

Si no se cumple ninguna condición se ejecutaría la etiqueta img y se mostraría la

imagen por_si_acaso.jpg, también en el caso que el navegador no soportase la etiqueta picture.

En este ejemplo, siempre se va a cumplir alguna de las condiciones de las etiquetas  source, la
primera si el ancho >= 800, la segunda si el ancho está entre 799 y 600, y la tercera en el resto de
casos, ancho < 599. Por lo tanto la etiqueta img no se ejecutará nunca (salvo si el navegador no
soportase la etiqueta picture) . Si queremos utilizar esta etiqueta img como un caso posible más,
podemos modificar la etiqueta de picture para que quede más compacta y produzca el mismo
resultado.

<picture>

<source media="(min-width: 800px)" srcset="graficos/en_rio_grande_800.jpg">

<source media="(min-width: 600px)" srcset="graficos/en_rio_mediana_600.jpg">

<img src="graficos/en_rio_pequenya_300.jpg" alt="Si es menor de 600 px">

</picture>

Obviamente las imágenes deben tener las anchuras correspondientes, la etiqueta picture no

modifica el ancho de las imágenes. Según el diseño de nuestra página mostraremos unas imágenes
de un tamaño determinado. En este ejemplo, estamos mostrando una imagen con el mismo
contenido pero con tamaños y pesos distintos.

Como estamos viendo la etiqueta picture permite mostrar imágenes en función del ancho de la

pantalla, esto tiene dos ventajas fundamentales.

1. mostrar la imagen de tamaño adecuado para cada tipo de pantalla. Desde el punto de vista del
diseño de la página es una gran ventaja poder adecuar los tamaños de las imágenes al tamaño de
la pantalla.

2. Aprovechar mejor el ancho de banda. Si mostramos una imagen pequeña y por lo tanto de poco
peso en Kb, en pantallas pequeñas estaremos ahorrando ancho de banda.

Ahora vamos a comparar la etiqueta picture con la etiqueta img que vimos en el punto anterior, es

otra forma de mostrar imágenes en diseños adaptables. Recordemos ese código.

<img src="graficos/en_rio_grande_800.jpg" alt="Pendientes" style="max-width: 100%; height:

auto;">

Con este código conseguimos que la imagen se ajuste al tamaño de la pantalla pero no estamos
aprovechando bien el ancho de banda ya que si queremos que la imagen se vea bien en pantallas
grandes, deberá ser una imagen grande y pesada, y por lo tanto estaremos desaprovechando
ancho de banda cuando se vea en pantallas pequeñas.

Etiqueta <picture>. Distintas escenas según la anchura

Hasta ahora estamos suponiendo que lo que nos interesa es mostrar una
misma escena pero utilizando tres archivos de imagen de distintas dimensiones
para ajustarnos al ancho de la pantalla y aprovechar el ancho de banda, pero
existe otra posibilidad muy interesante para algunos casos.

Con la etiqueta picture podemos mostrar escenas distintas según la anchura

de la pantalla. Por ejemplo, si estamos diseñando un catálogo de joyas o
pendientes, en el caso de una pantalla grande podemos mostrar una imagen
donde se vea la cara completa de una modelo luciendo el pendiente, y para
pantallas pequeñas mostrar una imagen donde solo se vea la parte de la oreja
 con el pendiente, ya que lo que nos interesa es que siempre se vea bien el
pendiente.

Para un catálogo de coches podemos mostrar el coche en un paisaje bonito si

disponemos de una pantalla grande y mostrar un primer plano del coche en una
pantalla pequeña. Esto son solo dos ejemplos pero hay muchas más situaciones
en las que puede ser muy interesante mostrar escenas distintas según el tamaño
u orientación de la pantalla.

Vamos a ver un ejemplo de diseño adaptable que muestra una imagen u otra
según la anchura de la pantalla, en este enlace puedes ver el ejemplo: Etiqueta
picture con diferentes escenas  .

y este es el código empleado:

<picture>
<source media="(min-width: 800px)"
srcset="graficos/en_rio_grande_800.jpg">
<source media="(min-width: 600px)"
srcset="graficos/en_rio_zomm_600.jpg">
<source media="(max-width: 600px)"
srcset="graficos/en_rio_zomm_300.jpg">

<img src="graficos/por_si_acaso.jpg" alt="Si no se

cumple ninguna condición">
</picture>

Etiqueta <picture>. Orientación

Si la orientación es vertical (portrait) se cumplirá la condición y se mostrará la

imagen indicada en srcset.

La orientación puede ser horizontal (landscape) si la anchura de la ventana es

mayor que la altura, o vertical en otro caso.

Las Media Queries permiten especificar condiciones compuestas, es

decir varias preguntas en una condición, por ejemplo, podemos preguntar si la
ventana tiene orientación vertical y además el ancho es como máximo de 300 px.,
como vemos en la primera etiqueta source de este ejemplo.
 <picture>

<source media="(orientation: portrait) and (max-width:

300px)" srcset="graficos/en_rio_pequenya_200_portrait.jpg">

<source media="(orientation: portrait)"

srcset="graficos/en_rio_mediana_300_portrait.jpg">

<source media="(min-width: 800px)"

srcset="graficos/en_rio_grande_800.jpg">

<source media="(min-width: 600px)"

srcset="graficos/en_rio_mediana_600.jpg">

<source media="(max-width: 600px)"

srcset="graficos/en_rio_pequenya_300.jpg">

<img src="graficos/por_si_acaso.jpg" alt="Si no se cumple

ninguna condición">

</picture>

1.4- HTML <TABLE>

Las tablas nos permiten organizar la información en filas y columnas. Cada

fila se divide en celdas. La información se introduce en las celdas. Una
columna está formada por las celdas agrupadas verticalmente, en HTML no
existe una etiqueta para definir columnas. Las tablas se definen en base a las
filas y a las celdas, como veremos a continuación.
La etiqueta <table> y su correspondiente etiqueta de cierre </table> definen la
tabla. Entre ambas etiquetas se escriben las etiquetas de fila <tr> y </tr> y
dentro de las filas las etiquetas de celda <td> y </td>, entre estas se escribe el
contenido de la celda que puede ser cualquier etiqueta de HTML o directamente un
texto. Por lo tanto la tabla más sencilla con una sola celda sería esta:

<table>

<tr>

<td>Celda 1.1.</td>

</tr>

</table>

Que produce este resultado:

Celda 1.1.

Como decíamos antes, no existe una etiqueta para definir las columnas, en su
lugar, el número de celdas define el número de columnas. Todas las filas deben
tener el mismo número de celdas, aunque ya veremos que es posible unir celdas.
Por ejemplo, una tabla con tres filas y cuatro columnas se escribe así:

<table>

<tr>

<td>Marcas</td>

<td>Seat</td>

<td>Ford</td>

<td>BMW</td>

</tr>

<tr>

<td>2016</td>

<td>23900</td>

<td>21500</td>
 <td>11500</td>

</tr>

<tr>

<td>2017</td>

<td>24600</td>

<td>23500</td>

<td>13400</td>

</tr>

</table>

Etiqueta <th>

Dado que es muy común que las tablas tengan una primera fila de cabecera se
creó la etiqueta <th>. Esta etiqueta se aplica a las celdas de cabecera en lugar de
la etiqueta td y el efecto fundamental es que tiene un formato diferente,
normalmente letra negrita y alineación centrada. Como ya sabemos, este formato
se puede cambiar con las hojas de estilo. La etiqueta <th> se puede colocar tanto
en las filas como en las columnas, por ejemplo:

<table>

<tr>

<th>Marcas</th>

<th>Seat</th>

<th>Ford</th>

<th>BMW</th>
</tr>

<tr>

<th>2016</th>
 <td>23900</td>

<td>21500</td>

<td>11500</td>

</tr>

<tr>

<th>2017</th>

<td>24600</td>

<td>23500</td>

<td>13400</td>

</tr>

</table>

 Formato de tablas con CSS

Como vemos, por defecto, las tablas no tienen borde. Podemos manejar los
bordes desde las hojas de estilo. Por ejemplo, para dar un borde exterior
podemos utilizar la propiedad border-style y darle el valor solid. Al asignarlo
al selector table, de esta forma: table { border-style: solid }

Obtendremos este resultado:

Marcas Seat Ford BMW

2016 23900 21500 11500
2017 24600 23500 13400

Si queremos que el borde también afecte a las celdas debemos añadir el

selector td, esto producirá un doble borde, si sólo queremos un borde simple,
podemos utilizar la propiedad border-collapse, con el valor collapse. Es
decir, con este código: table, td { border-style: solid; border-
collapse:collapse}

Obtendremos este resultado:

Marca Seat Ford BMW

 s
2016 23900 21500 11500
2017 24600 23500 13400

Si queremos que el texto esté más separado del borde le daremos un padding
de 5 px. y un fondo blanco a las celdas. Es decir, con este código: td
{ padding: 5px; background-color: white; }

Obtendremos este resultado:

Marca
Seat Ford BMW
s

2016 23900 21500 11500

2017 24600 23500 13400

También se pueden utilizar las propiedades de formato en la propia tabla, sin

utilizar hojas de estilo. Por ejemplo, para poner borde y color de fondo rojo,
podemos escribir el siguiente código <table border="1" bgcolor="red">

Pero como ya sabemos es algo que hay que tratar de evitar, salvo
excepciones, lo correcto es utilizar las hojas de estilo. Más adelante, a partir de la
unidad 9, veremos cómo dar formato con hojas de estilo.

Unir celdas con colspan y rowspan

Con los atributos colspan y rowspan podemos unir o fusionar celdas

adyacentes, así obtendremos celdas de mayor tamaño, el resultado siempre será
un rectángulo. Es decir, no podríamos unir las celdas formando una "L" o una "U".

 El atributo colspan extiende la celda tantas celdas a la derecha como le

indiquemos, contando la celda actual. Por ejemplo colspan="2" ocupa su celda
y una más a la derecha. Veamos este código aplicado a una tabla:

<table border="1">

<tr>

<td>Celda</td>
 <td>Celda</td>

<td>Celda</td>

<td>Celda</td>

</tr>

<tr>

<td colspan="2">Celda cs2</td>

<td>Celda</td>

<td>Celda</td>

</tr>

<tr>

<td colspan="3">Celda cs3</td>

<td>Celda</td>

</tr>

<tr>

<td colspan="4">Celda cs4</td>

</tr>

</table>

Produce este resultado:

Celda Celda Celda Celda

Celda cs2 Celda Celda
Celda cs3 Celda
Celda cs4

Observa que al expandir la celda, en la fila ponemos menos etiquetas <td>.

 El atributo rowspan expande la celda tantas celdas hacia abajo como le

indiquemos, contando la celda actual.
<table border="1">

<tr>
<td>Celda</td>

<td rowspan="2">Celda rs2</td>

<td rowspan="3">Celda rs3</td>

<td rowspan="4">Celda rs3</td>

</tr>

<tr>

<td>Celda</td>

</tr>

<tr>

<td>Celda</td>

<td>Celda</td>

</tr>

<tr>

<td>Celda</td>

<td>Celda</td>

<td>Celda</td>

</tr>

</table>

Celda
Celda rs2
Celda Celda rs3
Celda rs3
Celda Celda
Celda Celda Celda

Observa que al aplicar rowspan a una celda, "cogemos" una celda de la

siguiente fila, por lo que la siguiente celda tendrá una celda menos.

Y en cualquier caso podemos combinar estos dos atributos en la misma celda:

 <table border="1">

<tr>

<td colspan="2" rowspan="2">Celda cs2 rs2</td>

<td>Celda</td>

</tr>

<tr>

<td>Celda</td>

</tr>

<tr>

<td>Celda</td>

<td>Celda</td>

<td>Celda</td>

</tr>

</table>

Produce este resultado

Celda
Celda cs2 rs2
Celda
Celda Celda Celda

1.5- HTML <VIDEO>

El vídeo es cada día más importante en la web, hasta hace poco el ancho de banda
y la potencia de los dispositivos limitaban su uso pero esto ha cambiado y cada vez
es más usual reproducir vídeos a través de internet de forma satisfactoria, incluso
en dispositivos móviles con conexiones inalámbricas.

La etiqueta vídeo incrusta un vídeo en una página web, dentro de la etiqueta

se debe especificar la fuente del vídeo mediante la etiqueta source, por ejemplo:
<video controls>

<source src="multimedia/tortola.mp4" type="video/mp4">

Formato de vídeo no soportado.

</video>

El atributo controls hace que aparezca una barra con los controles para

arrancar/parar la reproducción, control del volumen, etc.

Antes del cierre de la etiqueta </video> se puede escribir un texto que

aparecerá si el navegador no es capaz de reproducir el formato de vídeo. Aunque
algunos navegadores no lo muestran y muestran un mensaje propio como
"Origen no válido".

Pueden aparecer tantas etiquetas source como deseemos, lo normal es que

cada una de ellas contenga el vídeo en un formato diferente. El navegador
intentará reproducir la primera etiqueta source y si no puede lo intentará con las
siguientes. De esta forma podemos aumentar las posibilidades de que el vídeo
sea reproducido en todos los navegadores.

Lo normal, es colocar primero el formato preferido por nosotros, por

ejemplo ogg, y a continuación los formatos más estándares, por ejemplo mp4.

Vamos a mostrar el comportamiento de dos etiquetas source con el siguiente

código que hará que si ves esta página en Google Chrome veas el vídeo de la
cotorra, pero si la ves en Microsoft Edge veas el vídeo de la tórtola porque a
fecha de hoy (Diciembre de 2018) el navegador Edge no soporta el formato ogg:

<video controls>

<source src="multimedia/cotorra.ogg" type="video/ogg">

<source src="multimedia/tortola.mp4" type="video/mp4">

Formato de vídeo no soportado.

</video>

 Atributos.
 autoplay. Si aparece este atributo el vídeo comenzará a reproducirse
automáticamente al cargarse la página, si no aparece el usuario tendrá que pulsar
en el botón Play.

loop. Si aparece este atributo cuando el vídeo llegue al final volverá a

reproducirse desde el principio, y así indefinidamente.

muted. Si aparece este atributo no se oirá el sonido. Si utilizamos este atributo

es conveniente incluir el atributo controls para que el usuario pueda activar el
sonido.

Por ejemplo con controls, autoplay, muted y loop quedaría así:

<video controls muted loop>

<source src="multimedia/tortola.mp4" type="video/mp4">

Formato de vídeo no soportado.

</video>

width y height.

Indican la anchura y altura del vídeo en pixels. Si no se especifican, por defecto,

estos atributos toman los valores originales del vídeo. Si damos unos valores más
grandes que el original el vídeo puede verse pixelado, si son menores no suele
afectar a la resolución. Siempre conviene dar unos valores que mantengan la
proporción del original, en otro caso el vídeo puede verse truncado. Como
explicamos en la unidad 5, para el caso de imágenes, se puede controlar el
tamaño con CSS.

preload. Indica cómo se debe cargar el vídeo, tiene estos tres valores:

1) auto, es el valor por defecto, el proceso de carga es optimizado por el

navegador, es el valor recomendable. El vídeo se descargará para estar
disponible inmediatamente.

2) none. El autor piensa que no se debe cargar el vídeo inmediatamente para

que se minimice la carga. No aparecerán los metadata, ni se verá el primer
 fotograma del vídeo. Cuando el usuario pulse el botón Play el vídeo se
reproducirá.

3) metadata. El autor piensa que no se debe cargar el vídeo inmediatamente,

pero que es deseable obtener sus metadatos (dimensiones, primer fotograma,
lista de pistas, duración, etc.). Cuando el usuario pulse el botón Play el vídeo se
reproducirá.

A continuación vemos un ejemplo para el valor none:

<video controls="controls" preload="none">

<source src="multimedia/tortola.mp4" type="video/mp4" />

Formato de v&iacute;deo no soportado.

</video>

1.6- HTML <CSS>

Las hojas de estilo sirven para dar formato a una página web

manteniendo separado el contenido del formato. Con HTML damos contenido y con
CSS formato.

A lo largo de este curso ya hemos ido utilizando las hojas de estilo en determinados
momentos, y en la unidad 2 vimos una pequeña introducción a las hojas de estilo,
en esta unidad vamos a ver la sintaxis de las hojas de estilo, los tipos de selectores
y como se pueden combinar. En las dos siguientes unidades veremos cómo definir
los colores, márgenes, fondos, bordes y fuentes. Más adelante seguiremos con
hojas de estilo aplicadas a diversos temas como la estructura de la página y la
maquetación.

Para situar históricamente las hojas de estilo en cascada conocidas como CSS
(Cascading Style Sheets) diremos que en Diciembre de 1995 aparecieron las hojas
de estilo CCS 1, el creador fue Håkon Wium Lie, desde entonces han ido
apareciendo distintos niveles de CSS, actualmente en Enero de 2019 estamos en
CSS 3. Al contrario que el lenguaje HTML que se nombra con versiones, las hojas
de estilo se nombran con niveles, aunque el concepto es el mismo.

Antes de las hojas de estilo el formato estaba escrito en las propias etiquetas de
HTML, todavía podemos encontrar muchas páginas web con esta forma de trabajar.
Por ejemplo <td width="95%">. Es algo que sigue funcionando pero que no está
recomendado salvo en casos muy concretos.

El lenguaje CSS está desarrollado por W3C, igual que el lenguaje HTML, y tiene
más de 200 atributos que van creciendo en cada nuevo nivel.

Sintaxis CSS

Las hojas de estilo están formadas por reglas, y las reglas están formadas por
el selector y entre llaves las declaraciones separadas por punto y coma. Una
declaración es un atributo (propiedad) seguido por dos puntos y a continuación
el valor de la propiedad.

Se pueden escribir varias declaraciones en una línea, separadas por punto y coma,
pero resulta más claro escribir una por línea. Se puede omitir el punto y coma final,
justo antes de cerrar la llave.

Los comentarios se inician con los dos caracteres /*, y se cierran con los dos
caracteres */, pueden abarcar varias líneas. Por ejemplo /* esto es un comentario
*/

Existen otro tipo de reglas llamadas reglas de arroba que empiezan por el carácter

arroba @, como @import, y también las reglas @media. En este tema avanzado
puedes ver las reglas de arroba y Media Queries  .

A continuación vamos a explicar con detalle los tipos de selectores, cómo se

pueden combinar y dónde declarar los estilos.
Tipos de selectores

El selector es el sujeto de la declaración, es decir, sobre quien se aplica la

declaración. La declaración es la definición de la característica que se aplica
sobre el selector. Por ejemplo, h1 { text-align: center } nos dice que sobre las
etiquetas h1 se aplica el texto alineado al centro.

Existen varias formas de definir el selector, vamos a verlas a continuación.

1.- Definir selector con etiquetas.

Podemos indicar los nombres de las etiquetas separados por comas. La

declaración se aplicará a todas las etiquetas que indiquemos. Por ejemplo, si
queremos aplicar el color rojo a todas las etiquetas h2 y p, declaramos el estilo

h2, p { color: red }

Para este fragmento de página:

<h2>Cabecera h2</h2>

<h3>Cabecera h3</h3>

<h4>Cabecera h4</h4>

<p>Párrafo uno</p>

<p>Párrafo dos</p>

Produce este resultado:

Cabecera h2
Cabecera h3

Cabecera h4

Párrafo uno

Párrafo dos
 GUIA DE TRABAJO

CORRESPONDE AL TEMA 1 IMÁGENES

1. La etiqueta <picture> es preferible a la etiqueta <img> para crear páginas

adaptables a diferentes tipos de dispositivos.

   a) Verdadero.

   b) Falso.

2. El atributo "alt" con una descripción de la imagen ...

   a) Es obligatorio para que los buscadores puedan indexar la imagen.

   b) Es obligatorio para que los ciegos puedan saber que muestra la imagen.

   c) Las dos respuestas anteriores son ciertas.

3. ¿Que tipo de imágenes son las que tienen extensión .GIF?

   a) Imágenes de mapas de bits.

   b) Imágenes con animación.

4. El atributo "title" en una etiqueta de imagen ...

   a) Permite mostrar información sobre la imagen en forma de "tooltip".

   b) Permite mostrar información sobre la imagen al hacer clic sobre la

imagen.

5. Si no indicamos los atributos width y height en una etiqueta de imagen ...

   a) La imagen se mostrará con su tamaño original.

   b) La imagen se mostrará adaptando su tamaño al espacio disponible.

6. Si indicamos unos valores de width y height que no mantengan la proporción

original de la imagen ...

   a) La imagen se mostrará deformada.

    b) La imagen se mostrará con su tamaño original.

7. La etiqueta <picture> puedes expresar las condiciones mediante "Media-

Queries".

   a) Verdadero.

   b) Falso.

8. La etiqueta <picture> incluye una etiqueta <img> al final para ...

   a) Mostrar esa imagen si no se cumplen las condiciones indicadas.

   b) Mostrar esa imagen si se produce algún error.

   c) Las dos respuestas anteriores son ciertas.

9. Con la etiqueta <picture> podemos ...

   a) Mostrar diferentes imágenes según la anchura de la pantalla.

   b) Mostrar diferentes imágenes según la orientación de la pantalla.

   c) Las dos respuestas anteriores son ciertas.

10. Con la etiqueta <picture> podemos ...

   a) Mostrar diferentes imágenes según la resolución de la pantalla.

   b) Mostrar diferentes imágenes según la marca y modelo de la pantalla.

   c) Las dos respuestas anteriores son ciertas.

 GUIA DE TRABAJO

CORRESPONDE AL TEMA 1 TABLAS Y VIDEOS

1. Las filas de una tabla se definen ...

   a) Mediante la etiqueta <td>.

   b) Mediante la etiqueta <tr>.

2. ¿Qué etiqueta se utiliza específicamente para dar formato diferente a la primera fila de una
tabla?

   a) La etiqueta <th>.

   b) La etiqueta <td>.

   c) La etiqueta <tr>.

3. Las columnas de una tabla se definen con una etiqueta específica.

   a) Verdadero.

   b) Falso.

4. Con la propiedad "border-collapse" ...

   a) Podemos evitar bordes dobles en una tabla.

   b) Podemos cambiar el estilo de los bordes.

5. Con atributos "colspan" y "rowspan" podemos unir o fusionar celdas adyacentes ...

   a) Si, pero siempre obtendremos celdas rectangulares.

    b) Si, podremos obtener celdas en forma de "L" y rectangulares.

6. Las tablas son adecuadas para diseñar la estructura de una página web ...

   a) Si, pero con las tecnologías de Grid y Flexbox, no con la etiqueta <table>.

   b) No, las tablas sólo deben usarse para mostrar datos en forma de tabla.

7. La etiqueta <table>, por defecto, asigna un borde a la tabla.

   a) Verdadero.

   b) Falso.

8. Las etiquetas <tbody>, <thead> y <tfoot> se utilizan para dar formato a las tablas ...

   a) Si, por defecto, cada una de ellas ya tiene un formato asignado.

   b) Si, pero es necesario utilizar hojas de estilo para asignarles formato.

   c) Ninguna de las dos respuestas anteriores es cierta.

9. Con propiedades CSS es posible dar formatos diferentes a las filas pares e impares de una
tabla ...

   a) Si, de una forma sencilla.

   b) Si, pero debemos utilizar programación Javascript.

   c) No es posible.

10. Con las etiquetas <colgroup> y <col> podemos ...

   a) Definir sólo la primera y última columnas para darles formato.

   b) Definir las columnas que deseemos para darles formato.

1. El atributo "controls" de la etiqueta <video> ...

   a) Hace que aparezca una barra con los controles para arrancar/parar la reproducción,
control del volumen, etc.
    b) Hace que el vídeo se pueda controlar desde el menú del navegador.

2. ¿Qué etiqueta se utiliza para reproducir vídeo en una página web?

   a) Exclusivamente la etiqueta <video>.

   b) La etiqueta <video> y etiqueta <object>, indistintamente.

   c) Preferentemente la etiqueta <video> y la etiqueta <object> en algunos casos.

3. El archivo que contiene el vídeo se escribe en la etiqueta ...

   a) <source>.

   b) <video>.

4. En cada etiqueta <video> sólo se puede especificar una etiqueta <source>.

   a) Verdadero.

   b) Falso.

5. Al cargarse un vídeo en una página web, este comienza a reproducirse automáticamente ...

   a) Si, por defecto.

   b) Sólo si hemos especificado el atributo "autoplay".