ETIQUETA PARA INSERTAR VIDEOS EN

HTML
Un primer ejemplo muy básico para colocar un video en nuestra
página web:

<video src="video.mp4" width="640" height="480"></video>

Sin embargo, esto mostrará el primer fotograma del video, con un

tamaño de 640x480, pero se verá como una imagen, ya que no
muestra los controles del video y tampoco tiene la autoreproducción
activada. Podríamos solucionarlo indicando los
atributos controls o autoplay.

Otro ejemplos básicos para colocar videos en nuestra página:

<video src="video.webm" poster="presentacion.jpg"

controls></video>
<video src="video.mp4" autoplay muted loop></video>

En este caso cargamos un video, pero que no se mostrará porque

se ha indicado que se utilice una imagen de presentación que se
mostrará hasta que el usuario pulse en el botón de reproducir de los
controles. En el segundo ejemplo, tenemos un video que se
reproduce automáticamente al cargar la página, en silencio y en
bucle, iniciándose una y otra vez.

Utilizando los fragmentos multimedia se pueden conseguir algunas

acciones interesantes, como por ejemplo especificar el momento
concreto del video (o audio) en el que se quiere empezar a
reproducir o terminar de reproducir. Veamos unos ejemplos:

<video autoplay controls src="video.mp4#t=15"></video>

<video autoplay controls src="video.mp4#t=25,45"></video>

En el primer caso, reproducimos el video a partir del segundo 15 del

mismo, mientras que en el segundo caso, reproducimos el video a
partir del segundo 25 y terminará de reproducirse en el segundo 45.
Formatos alternativos (fallbacks)

Si utilizamos la etiqueta <video> como etiqueta contenedora,

podemos incluir etiquetas <source> en su interior para proporcionar
formatos alternativos y tener mayor compatibilidad con otros
navegadores y navegadores antiguos que no soporten HTML5:

<video width="640" height="480">

<source src="video.mp4" type="video/mp4">
<source src="video.webm" type="video/webm">
<source src="video.ogv" type="video/ogg">
<img src="imagen.png" alt="Video no soportado">
Su navegador no soporta contenido multimedia.
</video>

En este ejemplo, los navegadores no mostrarán todos los

contenidos a la vez, sino que seguirán el siguiente procedimiento:

 Intenta mostrar el primer formato (MP4). Si el navegador no

soporta este formato, salta al siguiente.
 Intenta mostrar el segundo formato (WEBM). Si el navegador
no soporta este formato, salta al siguiente.
 Intenta mostrar el tercer formato (OGV). Si el navegador no
soporta este formato, salta al siguiente.
 Si se trata de un navegador que no soporta HTML5, intentará
mostrar la imagen.
 Si se trata de un navegador de terminal de texto (o sin
capacidades gráficas), mostrará el texto "Su navegador no
soporta contenido multimedia".

De esta forma tenemos soporte completo para todo tipo de

dispositivos.
ETIQUeTA PARA INSERTAR IMAGENES EN
HTML
Antes de describir en detalle la marca principal de inserción de
imágenes en los hipertextos, es conveniente precisar algunos
conceptos de HTML. A diferencia de muchos procesadores de texto
(Ms Word, por ejemplo), los hipertextos no se "funden" con las
imágenes que les sirven de acompañamiento gráfico, sino que se
limitan a invocarlas desde un recorrido específico in situ o en el
web. Dicho de otro modo, existe una división muy clara entre
archivo .htm e imágenes (y también sonidos, apliques, etc.). Los
documentos HTML se limitan a prever dentro de ellos un espacio en
el que se insertan las imágenes solicitadas.

La marca <IMG> no necesita cierre y su sintaxis correcta es:

<IMG SRC="immagine.gif">

donce SRC corresponde al inglés Search y es el recorrido del que el

navegador saca la imagen (en este caso "immagine.gif"). Como
hemos señalado, esta marca es única en el sentido de que NO lleva
como cierre el correspondiente </IMG>.
Los navegadores (Netscape, MsIe, Opera etc.) reconocen
numerosos formatos gráficos, aunque los más utilizados son
dos: GIF (Graphics Interchange Format) y JPEG (Joint
Photographics Experts Group). En los últimos meses, asistimos a la
difusión a nivel internacional de otro formato: PNG (Portable
Network Graphics).

El elemento <IMG> va acompañado de diversos atributos que

facilitan su uso. Veamos ahora juntos cuáles son.

ALT

El uso de texto para comentar las imágenes es una regla

fundamental que debemos observar en la creación de sitios web por
varias razones:

algunos navegadores pordrían estar impostados para no invocar

las imágenes;
 los navegadores textuales para invidentes no conseguirían
interpretar las imágenes si carecieran de comentario;
es posible evitar pies de imagen incluyendo comentarios dentro
de la imagen misma.

En todos estos casos, el uso de comentarios resuelve el problema y

permite optimizar la página web. La sintaxis correcta de los
comentarios es la siguiente:

<IMG SRC="immagine.gif" ALT="Obra de K. Haring">

Para comprobar sus efectos, pasa el ratón por encima de la imagen

del ejemplo.

WIDTH y HEIGHT

En los ejemplos vistos hasta ahora, no hemos especificado las

medidas de la imagen que el navegador se ha encargado de buscar
automáticamente. Es posible definir la anchura y la altura de la
imagen gracias a los atributos width y height, respectivamente:

<IMG SRC="immagine.gif" WIDTH=178 HEIGHT=180 ALT="Obra

de K. Haring">

donde WIDTH=178 es la dimensión horizontal (ancho) de la imagen

expresada en píxel, y HEIGHT=180 la dimensión vertical (alto).

Mediante estos atributos podemos definir dimensiones diferentes de

las que realmente tiene la imagen. En cualquier caso, es
aconsejable insertar imágenes con su tamaño efectivo sobre todo si
están en formato GIF, dado que, cuando se cambian las medidas,
este formato pierde mucha calidad.

BORDER

Con el atributo BORDER podemos aplicar un borde a la imagen.

Los valores son numéricos y van expresados en píxel. Si
impostamos el valor BORDER en 0, la imagen no va recuadrada.
Cuando omitimos este atributo, el navegador no aplica ningún
borde, pero si la imagen es también un enlace automáticamente se
le asignará un BORDER=1. La sintaxis correcta es:
<IMG SRC="immagine.gif" WIDTH=178 HEIGHT=180
BORDER=2 ALT="Obra de K. Haring"

HSPACE y VSPACE

Con estos dos atributos podemos establecer la distancia en píxel de

la imagen a los objetos que se encuentran a los cuatro lados de la
misma.

HSPACE define la distancia de los lados derecho e izquierdo de

la imagen a los objetos más cercanos (texto, imágenes, apliques,
etc.).

VSPACE define la distancia de los lados superior e inferior de la

imagen a los objetos más cercanos (texto, imágenes, apliques,
etc.). La sintaxis correcta es

<IMG SRC="immagine.gif" WIDTH=178 HEIGHT=180

BORDER=2 VSPACE=3 HSPACE=3 ALT="Obra de K. Haring">

Estos atributos resultan útiles cuando queremos distanciar la

imagen de los objetos más cercanos.

ALIGN

El atributo ALIGN define la posición de la imagen respecto al texto

colocado inmediatamente antes o después de la misma. Existen
varias opciones para el atributo ALIGN:

ALIGN=top: alinea la primera línea de texto con la parte superior

de la imagen.
ALIGN=middle: alinea la primera línea del texto con el centro de
la imagen.

ALIGN=bottom: alinea la primera línea de texto con la parte

inferior de la imagen.
ALIGN=left: el texto se coloca a la derecha de la imagen
empezando desde la parte superior de la misma.

ALIGN=right: el texto se coloca a la izquierda de la imagen

empezando desde la parte superior de la misma.