Ut2.HTML IIVinculos ImagenesMultimedia

04/11/2014
Unidad 2.2: Lenguaje HTML
Contenido
Enlaces (links)
Imgenes
Multimedia
04/11/2014
ENLACES O HIPERVNCULOS (LINKS)

Los hipervnculos son enlaces de hipertexto para navegar de
una pgina a otra o de una parte de un documento a otra parte

simplemente haciendo clic sobre dicho enlace.
Un enlace es un rea de la pantalla, que puede contener una o
varias palabras o una imagen.
Habitualmente por defecto los visualizadores sealan un rea
linkada subrayndola, si es texto, o ponindole un borde si es
una imagen, ambas cosas en color azul. Son sensibles al paso
del ratn en la mayora de los navegadores (el cursor cambia de
aspecto, indicando que se trata de un elemento interactivo).

Se definen con la etiqueta <a> (por Anchor, en ingls = ancla o
punto de anclaje). En lo sucesivo le llamaremos enlace o

simplemente link (en ingls link=eslabn o enlace).
El atributo href es obligatorio e indica la direccin destino del
enlace
<a href= url a la que se accede> texto del hiperenlace</a>
Ejemplos:
<a href= http://www.google.es> ir a google</a>
Se ver as: ir a google
Por defecto aparecen en azul. Para cambiar el color de los link
se utilizan con la etiqueta body los atributos:
link (color del enlace por defecto azul)
vlink ( color de los enlaces visitados por defecto morado)
alink ( enlaces activos, pulsados y no soltados, por defecto rojo
Ejemplo:ejemplos-ut2-vinculos e Imagenes\hiper1.html
04/11/2014

Para definir los URL en los enlaces se utilizan
direcciones absolutas o relativas.
Absoluta
Se especifica la ruta o camino completo del
documento destino, incluso aunque el documento
est en el mismo directorio o en la misma mquina.
Relativa
En este tipo de direcciones se omite la mquina y la

ruta del fichero, se entiende que el fichero esta en
el mismo directorio, en el directorio indicado con la
etiqueta <BASE> en la cabecera o en un directorio
distinto que el fichero que contiene el enlace.
<BASE HREF="www.mipagina.com/">
El elemento BASE solo puede aparecer una vez en el
documento y slo se permite dentro de la cabecera de
un documento de HTML.
6
04/11/2014
Ejemplo
<html>
<head>
<base href="http://www.madrid.org">
</head>
<body>
<a href="/dat_capital/">Dat
capital</a><br>
<a href="/dat_sur/">Dat sur</a>
</body>
</html>
7
ATRIBUTOS DE LOS ENLACES

La etiqueta <a> puede tener otro atributo: target. Se utiliza para ordenar
la apertura de otra ventana del visualizador con la pgina que se desee. Se

escribir:
<a href="indice.htm" target=ventana-2> </A>
Esta instruccin mostrar la pgina indice.htm pero con otra ventana del
visualizador, es decir tendremos lanzado el visualizador 2 veces.

Existen otros valores para target:
target="_blank": Para que el enlace se muestre en una nueva ventana
vaca. Tambin puede darse un nombre cualquiera con el mismo efecto.
target="_self": Para mostrar el enlace en la misma ventana o frame que
lo referencia (valor por defecto).
target="_top": El documento solicitado se cargar en la pantalla actual,
ocupando toda la ventana y destruyendo la estructura de frames anterior,
si existe.
Ej:ejemplos-ut2-vinculos e Imagenes\hiper2.html
04/11/2014
ATRIBUTOS DE LOS ENLACES

Enlaces dentro de la misma pgina
El elemento <a> tiene dos atributos: href y id.
Para la creacin de estos hiperenlaces, debemos seguir
dos pasos:
1. Marcar las distintas zonas o secciones del documento.
Esto lo haremos con el parmetro id:
<a id= Nombredeancla></a>
Parte B del documento
2. Especificar un enlace a cada una de las secciones que
hayamos definido.
<a href= #Nombredeancla> Texto del enlace de ancla </a>
Parte A del documento

9

Ejemplo en el mismo documento:
<a href= #principio> Ir a principio </a>
En el punto donde queremos ir:
<a id= principio></a>.
Ejemplo:ejemplos-ut2-vinculos e Imagenes\anclasmismapag2.html
10
04/11/2014

La marca de hipervnculo a otra pgina del mismo
sitio tiene la siguiente sintaxis:
<a href="pagina2.html">Noticias</a>
11

Enlaces con otro documento:
En el documento activo:
<a href= url #nombreancla> texto del enlace de ancla </a>
En el documento destino:
<a id= nombreancla></a>.
Ej:ejemplos-ut2-vinculos e Imagenes\ancla3.html
12
04/11/2014
PRACTICA 6-enlaces con texto.doc
13
IMAGENES
Para insertar una imagen en un documento HTML se utiliza el elemento
<img>, es una etiqueta nica (sin contenido) por lo que tenemos que
utilizar el autocerrado. Este elemento puede ir acompaado de los atributos
src, alt, ismap, usemap,align, width, heigth, border, vspace, hspace.
Las imgenes utilizadas pueden estar en formato GIF, JPG o PNG.
Se puede usar cualquier otro formato como el MPG o el AVI (ambos de
vdeo), pero entonces el visualizador llamar a un programa auxiliar, que
previamente le habrs definido, para que sea ste el que visualice el fichero.
Ejemplo:
Imagen alineada a la izquierda (por defecto)
<img src=chistera.jpg/> texto texto texto texto
Imagen con un texto alternativo:
<img src="sugeren.gif" alt="aqui va una imagen/>
Imagen alineada a la izquierda. Texto alineado arriba
<img src=chistera.jpg" align=top/> texto texto texto texto texto
14
04/11/2014
IMGENES: Atributos
align: Permite establecer la alineacin de la imagen y del
texto alrededor de la imagen. Puede tomar los valores:

left, right, center (en sentido horizontal), top, middle,
bottom (en sentido vertical).
border: Permite establecer un borde o marco a la
imagen. Se expresa en pixels y determinar el grosor del

mismo. Por defecto tiene el valor 0, sin borde.
height: Permite establecer la altura que debe tener la
imagen. Se expresa en pixels o en porcentaje (%).
width: Permite establecer el ancho que debe tener la
imagen. Se expresa en pixels o en porcentaje (%).
Ej:ejemplos-ut2-vinculos e Imagenes\imagenconatributos.html
15
INSERTAR IMGENES: Atributos

hspace: Permite establecer la separacin horizontal
entre el texto y la imagen. Se expresa en pixels.

vspace: Permite establecer la separacin vertical entre el
texto y la imagen. Se expresa en pixels.

Cuando no se indica alguno o ninguno de los atributos
width y height, el navegador reserva un espacio para la

imagen, y al finalizar la carga de la imagen, los elementos
que rodean al recurso se desplazan empujados por el
tamao original de la imagen.
Los atributos align, border, hspace, vspace estn en
desuso a favor de las hojas de estilo.

16
04/11/2014
IMAGEN CON ENLACE

Para hacer un link desde una imagen, se escribe:
<a href=url"> <img src=fichero.jpg"> </a>
Algunos navegadores mostrarn un borde azul alrededor
de la imagen para identificar que es un enlace.
El atributo border de la etiqueta img permite poner un
borde con el grosor especificado. Por ejemplo:
<img src="Fichero.jpeg" border="numero_pixels">
Si se utiliza el valor 0 no aparecer borde, ni aunque la
imagen sea un enlace
El color del borde es azul si la imagen es un enlace; en
caso contrario ser negro.
Ej:ejemplos-ut2-vinculos e Imagenes\imagenconlink.html
17
Mapa de Imgenes
La creacin de este tipo de imgenes puede hacerse en
dos pasos:
Definicin de la imagen y utilizacin del atributo
usemap para especificar dnde se delimitarn las
zonas activas.
<img src=" Fichero_imagen " usemap="URL Fichero#Nombre_mapa">
Definicin del mapa de zonas a travs de la etiqueta
<map name="Nombre_mapa"> ... </map>

18
04/11/2014
Mapa de Imgenes
Entre <map> y </map> va una etiqueta <area> que
tiene los atributos siguientes:
href.- que constituye el enlace al objeto correspondiente.
alt.- para especificar el texto alternativo. Importante para
navegadores en modo texto y cuando no se puede mostrar la

imagen.
shape.- define la forma de la zona. Admite los valores :
rect (rectngulo),
circle (crculo)
poli (polgono).
coords.- define las coordenadas de la zona. Estas coordenadas
dependen de la forma de la zona y que de forma general definen
las coordenadas de los vrtices o centro del crculo y longitud
del radio.
19
Mapa de Imgenes
Coordenadas del rectngulo
son 4 valores separados por comas que corresponden a
las posiciones de las esquinas superior izquierda e
inferior derecha
Coordenadas del crculo
son tres valores que corresponden a la posicin del
centro y longitud del radio
Coordenadas del polgono
son parejas de valores que corresponden a la posicin
de cada uno de los vrtices.
Todos los valores se toman en pixels.
Ej:ejemplos-ut2-vinculos e Imagenes\mapadeimagenes\mapaareavirtual\mapaareavirtual.html
20
10
04/11/2014
Un ejemplo de mapa en una imagen de 400 x 200 puede ser:
<map name="mapa">
<area shape="rect"
coords="10, 10, 180, 90"
href="arriba_izda.html"
alt="Cuadro superior izquierdo">
<area shape="circle"
coords="298, 50, 43"
href="arriba_dcha.html"
alt="Crculo superior derecho">
<area shape="poly"
coords="5, 150, 70, 110, 330, 110, 395, 150, 330, 195, 70, 195"
href="abajo_centro"
alt="Polgono inferior centro">
</map>
21
Elementos Multimedia
HTML permite la inclusin de elementos
multimedia (videos y sonidos) en las
pginas Web. Es sin duda uno de los
avances ms atractivos del mundo de la
WWW pero tambin uno de los que ms
problemas y quebraderos de cabeza puede
dar.
22
11
04/11/2014
Multimedia - iframe
Con la etiqueta <iframe> </iframe> se inserta un
marco en lnea dentro de un documento HTML.
Sera como incluir una pgina dentro de otra con las
dimensiones pre-establecidas
Atributos de <iframe>: width=x, height=x,
src=xxxxxx, frameborder=x, autofullscreen
Ejemplo
para
incrustar
un
vdeo
youtube
(compartir)
<iframe width="560" height="315"
src="http://www.youtube.com/embed/YVEBMmbtR4
0" frameborder="0" > </iframe>
23
Multimedia - object
Con la etiqueta <object> </object> se inserta un objeto dentro un
documento HTML. El tipo de objeto podr ser: animacin flash, un
applet Java, una imagen, un vdeo, otro documento HTML, etc.
Atributos de <object>:
width=x, height=x,
type=categora/formato indica el tipo de datos del objeto por
ejemplo: audio/basic , audio/mp3 , video/mpeg , video/quicktime ,
application/x-shock-wave-flash
data=xxxxxx indica la URI donde est el objeto
classid indicar la URI donde est la implementacin del objeto
- aparte, pueden necesitar otro tipo de parmetros adicionales para la
ejecucin de esos objetos, estarn dentro del elemento <param>

</param>
24
12
04/11/2014
Ejemplo: Insertar un video de YouTube

Se trata de un archivo flash, por tanto utilizamos
type(application/x-shockwave-flash), en data
especificamos la URI que aparece en YouTube
<body>
<h1> un video de Youtube</h1>
<object type="application/x-shockwave-flash"
data="https://www.youtube.com/v/en0EfNXmL6M?version=3"
width="425" height="350">
</object>
</body>
Ej: ejemplos-ut2-vinculos e Imagenes\multimedia\object.html

25
Multimedia-embed
Con la etiqueta <embed> </embed> se muestra internamente la
consola de audio o video en la pgina. Insertar un archivo de sonido

o de vdeo <embed src=multimedia.xxx> </embed>
Atributos
de <embed>: align=tipo, width=x, height=x,

autostart=true false (arrancar nada ms cargarse),
loop=TRUE o FALSE (se repetir infinitas veces con TRUE y una
sola vez con FALSE)
El atributo pluginspace=URL nos permitir indicar el plug-in que
hace falta para reproducir el multimedia.

Se
puede insertar un elemento en Flash como <embed

src=archivo.swf type=application/x-shock wave flash
width=x heigth=x> </embed>
26
13
04/11/2014
Ejemplo: insertar un archivo de sonido con embed

<body>
<h1> PROBANDO embed para sonido</h1>
<embed src="archivo1.mp3" type="audio/mp3"
loop="TRUE"> </embed>
</body>
Ej: ejemplos-ut2-vinculos e Imagenes\multimedia\embed1.html
27
Multimedia-bgsound
Con la etiqueta <bgsound> </bgsound> . Insertar un archivo de
sonido <bgsound src=multimedia.xxx> </bgsound> , se oye

como fondo de la pgina, hace que suene la msica
indefinidamente, para pararla con STOP.Slo con IExplorer
Atributos de <bgsound>:
loop=x (indica veces que se repite, con -1 o infinite se repetir

infinitas veces)
balance= balance de sonido entre los altavoces(-10000,10000) el valor
0 es el equilibrio
Volume= volumen de reproduccin (-10000, 0)
<bgsound src=archivo.mp3 loop=3 balance=0

volume=+1000 > </bgsound>
Ej:ejemplos-ut2-vinculos e Imagenes\multimedia\bgsound.html
28
14
04/11/2014
Multimedia-audio
La etiqueta <audio></audio> es para html5. Nos permite insertar un archivo
de audio en nuestra pgina web sin necesidad de flash ni un plugin de
javascript. Es el propio navegador el que realiza la reproduccin
Atributos de <audio>:
src : Define donde se encuentra el archivo de audio a reproducir, es el nico
obligatorio.
controls: mostrar un pequeo cuadro de mandos con un botn de
play/pausa, sonido on/off y una barra de progreso de la duracin del archivo.

autoplay: Har que el sonido se reproduzca al cargar la prctica.
loop: loop=loop reproducira en bucle una y otra vez el sonido
preload: Nos permite cargar el archivo de audio al mismo tiempo que la
pgina y no cuando el usuario da al play- tiene tres valores: none, metadata y

auto.
<audio> src=archivo_audio controls=controls autoplay=autoplay>su
navegador no soporta la etiqueta audio</audio>
29
Multimedia-video
La etiqueta <video></video> es para html5. Nos permite insertar un archivo
de video o animacin
Atributos de <video>:
src : Define donde se encuentra el archivo de video a reproducir, es el nico
obligatorio.
poster: nos permite una imagen esttica que aparecer mientras el video se
carga o hasta que el usuario decide comenzar su reproduccin pulsando el

botn play
controls: mostrar un pequeo cuadro de mandos con un botn de
play/pausa, sonido on/off y una barra de progreso de la duracin del archivo.
autoplay: Har que el video se reproduzca al cargar la prctica.
loop: loop=loop reproducira en bucle una y otra vez el video
preload: Nos permite cargar el archivo de video al mismo tiempo que la
pgina y no cuando el usuario da al play- tiene tres valores: none, metadata y
auto.
< <video src="oso.mp4" controls autoplay>
Tu navegador no soporta la etiqueta "video".
</video>
30
15
04/11/2014
Multimedia-video
La etiqueta <video></video> es para html5. Los tipos de formato ms
habituales son:
ogg : Contiene diferentes datos de audio y video no comprimidos en un solo
archivo
mp4: del estndar mpeg-4
matroska: pretende ser la alternativa de cdigo abierto a otros formatos
como avi, mp4,mov.
31
Multimedia-source
La etiqueta <source> sirve para especificar con mayor detalle el archivo fuente
multimedia . Permite especificar distintos archivos fuente, en este caso el
navegador visualiza el primero con un formato reconocible. Se utiliza en
combinacin con <video> o <audio>
La etiqueta source tiene un parmetro opcional para especificar el tipo de
archivo y el cdec que usa el mismo
Atributos de <source>:
src : Define donde se encuentra el archivo de audio a reproducir, es el nico
obligatorio.
type: indica el tipo de formato contenedor. Sus posibles valores ogg,mp4,x-
matroska.
<audio controls="controls" >
<source src="finaldetrayecto.ogg" />
<source src="finaldetrayecto.mp3" />
<source src="finaldetrayecto.wav" />
Su navegador no soporta la etiqueta audio.
</audio>
32
16
04/11/2014
Multimedia-source
La etiqueta <source> sirve para especificar con mayor detalle el archivo fuente
multimedia . Permite especificar distintos archivos fuente, en este caso el
navegador visualiza el primero con un formato reconocible. Se utiliza en
combinacin con <video> o <audio>
La etiqueta source se usa para proporcionar alternativas al navegador.
<video controls="controls" width="700" poster="thatsallfolk.jpg" >
<source src="video_ogv.ogv" />
<source src="video_mp4.mp4" />
<source src="video_webm.webm" />
Su navegador no soporta la etiqueta video.
</video>
33
17

Ut2.HTML IIVinculos ImagenesMultimedia

Hochgeladen von

Dokumentinformationen

Copyright

Verfügbare Formate

Dieses Dokument teilen

Dokument teilen oder einbetten

Freigabeoptionen

Stufen Sie dieses Dokument als nützlich ein?

Sind diese Inhalte unangemessen?

Copyright:

Verfügbare Formate

Ut2.HTML IIVinculos ImagenesMultimedia

Hochgeladen von

Copyright:

Verfügbare Formate

04/11/2014

Unidad 2.2: Lenguaje HTML

ENLACES O HIPERVNCULOS (LINKS)

una pgina a otra o de una parte de un documento a otra parte

ENLACES O HIPERVNCULOS (LINKS)

punto de anclaje). En lo sucesivo le llamaremos enlace o

ENLACES O HIPERVNCULOS (LINKS)

En este tipo de direcciones se omite la mquina y la

ATRIBUTOS DE LOS ENLACES

la apertura de otra ventana del visualizador con la pgina que se desee. Se

visualizador, es decir tendremos lanzado el visualizador 2 veces.

ATRIBUTOS DE LOS ENLACES

Parte A del documento

ENLACES O HIPERVNCULOS (LINKS)

ENLACES O HIPERVNCULOS (LINKS)

ENLACES O HIPERVNCULOS (LINKS)

ENLACES O HIPERVNCULOS (LINKS)

PRACTICA 6-enlaces con texto.doc

texto alrededor de la imagen. Puede tomar los valores:

border: Permite establecer un borde o marco a la

imagen. Se expresa en pixels y determinar el grosor del

height: Permite establecer la altura que debe tener la

imagen. Se expresa en pixels o en porcentaje (%).

width: Permite establecer el ancho que debe tener la

imagen. Se expresa en pixels o en porcentaje (%).

INSERTAR IMGENES: Atributos

entre el texto y la imagen. Se expresa en pixels.

texto y la imagen. Se expresa en pixels.

width y height, el navegador reserva un espacio para la

desuso a favor de las hojas de estilo.

IMAGEN CON ENLACE

Definicin del mapa de zonas a travs de la etiqueta

<map name="Nombre_mapa"> ... </map>

navegadores en modo texto y cuando no se puede mostrar la

Un ejemplo de mapa en una imagen de 400 x 200 puede ser:

- aparte, pueden necesitar otro tipo de parmetros adicionales para la

ejecucin de esos objetos, estarn dentro del elemento <param>

Ejemplo: Insertar un video de YouTube

Ej: ejemplos-ut2-vinculos e Imagenes\multimedia\object.html

consola de audio o video en la pgina. Insertar un archivo de sonido

de <embed>: align=tipo, width=x, height=x,

El atributo pluginspace=URL nos permitir indicar el plug-in que

hace falta para reproducir el multimedia.

puede insertar un elemento en Flash como <embed

Ejemplo: insertar un archivo de sonido con embed

sonido <bgsound src=multimedia.xxx> </bgsound> , se oye

loop=x (indica veces que se repite, con -1 o infinite se repetir

<bgsound src=archivo.mp3 loop=3 balance=0

play/pausa, sonido on/off y una barra de progreso de la duracin del archivo.

pgina y no cuando el usuario da al play- tiene tres valores: none, metadata y

carga o hasta que el usuario decide comenzar su reproduccin pulsando el

Das könnte Ihnen auch gefallen