ut2.html iivinculos imagenesmultimedia
DESCRIPTION
Vinculos HtmlTRANSCRIPT
-
04/11/2014
1
Unidad 2.2: Lenguaje HTML
1
Contenido
Enlaces (links)
Imgenes
Multimedia
2
-
04/11/2014
2
ENLACES O HIPERVNCULOS (LINKS)
Los hipervnculos son enlaces de hipertexto para navegar deuna 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 ovarias palabras o una imagen.
Habitualmente por defecto los visualizadores sealan un realinkada 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).
33
Se definen con la etiqueta (por Anchor, en ingls = ancla opunto 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
texto del hiperenlace
Ejemplos:
ir a google
Se ver as: ir a google
Por defecto aparecen en azul. Para cambiar el color de los linkse 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 4
ENLACES O HIPERVNCULOS (LINKS)
4
-
04/11/2014
3
ENLACES O HIPERVNCULOS (LINKS)
Para definir los URL en los enlaces se utilizandirecciones absolutas o relativas.
Absoluta
Se especifica la ruta o camino completo deldocumento destino, incluso aunque el documentoest en el mismo directorio o en la misma mquina.
5
6
Relativa
En este tipo de direcciones se omite la mquina y laruta del fichero, se entiende que el fichero esta enel mismo directorio, en el directorio indicado con laetiqueta en la cabecera o en un directoriodistinto que el fichero que contiene el enlace.
El elemento BASE solo puede aparecer una vez en eldocumento y slo se permite dentro de la cabecera deun documento de HTML.
-
04/11/2014
4
7
Ejemplo
Dat
capital
Dat sur
La etiqueta puede tener otro atributo: target. Se utiliza para ordenar la apertura de otra ventana del visualizador con la pgina que se desee. Se
escribir:
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 8
ATRIBUTOS DE LOS ENLACES
8
-
04/11/2014
5
Enlaces dentro de la misma pgina
El elemento 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:
Parte B del documento
2. Especificar un enlace a cada una de las secciones que
hayamos definido.
Texto del enlace de ancla
Parte A del documento
9
ATRIBUTOS DE LOS ENLACES
9
Ejemplo en el mismo documento:
Ir a principio
En el punto donde queremos ir:
.
Ejemplo:ejemplos-ut2-vinculos e Imagenes\anclasmismapag2.html
10
ENLACES O HIPERVNCULOS (LINKS)
10
-
04/11/2014
6
La marca de hipervnculo a otra pgina del mismo sitio tiene la siguiente sintaxis:
Noticias
11
ENLACES O HIPERVNCULOS (LINKS)
11
Enlaces con otro documento:
En el documento activo:
texto del enlace de ancla
En el documento destino:
.
Ej:ejemplos-ut2-vinculos e Imagenes\ancla3.html
12
ENLACES O HIPERVNCULOS (LINKS)
12
-
04/11/2014
7
PRACTICA 6-enlaces con texto.doc
13
ENLACES O HIPERVNCULOS (LINKS)
13
IMAGENES Para insertar una imagen en un documento HTML se utiliza el elemento
, es una etiqueta nica (sin contenido) por lo que tenemos queutilizar el autocerrado. Este elemento puede ir acompaado de los atributossrc, 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 devdeo), pero entonces el visualizador llamar a un programa auxiliar, quepreviamente le habrs definido, para que sea ste el que visualice el fichero.
Ejemplo:
Imagen alineada a la izquierda (por defecto)
texto texto texto texto
Imagen con un texto alternativo:
texto texto texto texto texto
1414
-
04/11/2014
8
IMGENES: Atributos
align: Permite establecer la alineacin de la imagen y deltexto 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 laimagen. Se expresa en pixels y determinar el grosor delmismo. 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
1515
INSERTAR IMGENES: Atributos
hspace: Permite establecer la separacin horizontalentre 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 atributoswidth y height, el navegador reserva un espacio para laimagen, y al finalizar la carga de la imagen, los elementosque rodean al recurso se desplazan empujados por eltamao original de la imagen.
Los atributos align, border, hspace, vspace estn en desuso a favor de las hojas de estilo.
1616
-
04/11/2014
9
Para hacer un link desde una imagen, se escribe:
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:
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
IMAGEN CON ENLACE
17
Mapa de ImgenesLa 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.
Definicin del mapa de zonas a travs de la etiqueta
...
18
-
04/11/2014
10
Mapa de ImgenesEntre y va una etiqueta quetiene los atributos siguientes:
href.- que constituye el enlace al objeto correspondiente.
alt.- para especificar el texto alternativo. Importante paranavegadores en modo texto y cuando no se puede mostrar laimagen.
shape.- define la forma de la zona. Admite los valores :
rect (rectngulo),
circle (crculo)
poli (polgono).
coords.- define las coordenadas de la zona. Estas coordenadasdependen de la forma de la zona y que de forma general definenlas coordenadas de los vrtices o centro del crculo y longituddel 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
-
04/11/2014
11
21
Un ejemplo de mapa en una imagen de 400 x 200 puede ser:
Elementos Multimedia
HTML permite la inclusin de elementosmultimedia (videos y sonidos) en laspginas Web. Es sin duda uno de losavances ms atractivos del mundo de laWWW pero tambin uno de los que msproblemas y quebraderos de cabeza puededar.
22
-
04/11/2014
12
Multimedia - iframe Con la etiqueta 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 : width=x, height=x,src=xxxxxx, frameborder=x, autofullscreen
Ejemplo para incrustar un vdeo youtube(compartir)
23
Multimedia - objectCon la etiqueta 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 :
width=x, height=x,
type=categora/formato indica el tipo de datos del objeto porejemplo: 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
24
-
04/11/2014
13
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
un video de Youtube
Ej: ejemplos-ut2-vinculos e Imagenes\multimedia\object.html
25
Multimedia-embed Con la etiqueta se muestra internamente la
consola de audio o video en la pgina. Insertar un archivo de sonido
o de vdeo
Atributos de : align=tipo, width=x, height=x,autostart=true false (arrancar nada ms cargarse),loop=TRUE o FALSE (se repetir infinitas veces con TRUE y unasola vez con FALSE)
El atributo pluginspace=URL nos permitir indicar el plug-in quehace falta para reproducir el multimedia.
Se puede insertar un elemento en Flash como
26
-
04/11/2014
14
Ejemplo: insertar un archivo de sonido con embed
PROBANDO embed para sonido
Ej: ejemplos-ut2-vinculos e Imagenes\multimedia\embed1.html
27
Multimedia-bgsound Con la etiqueta . Insertar un archivo de
sonido , se oyecomo fondo de la pgina, hace que suene la msica
indefinidamente, para pararla con STOP.Slo con IExplorer
Atributos de :
loop=x (indica veces que se repite, con -1 o infinite se repetirinfinitas veces)
balance= balance de sonido entre los altavoces(-10000,10000) el valor
0 es el equilibrio
Volume= volumen de reproduccin (-10000, 0)
Ej:ejemplos-ut2-vinculos e Imagenes\multimedia\bgsound.html
28
-
04/11/2014
15
Multimedia-audioLa etiqueta 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 :
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.
src=archivo_audio controls=controls autoplay=autoplay>su navegador no soporta la etiqueta audio
29
Multimedia-videoLa etiqueta es para html5. Nos permite insertar un archivo
de video o animacin
Atributos de :
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.
<
Tu navegador no soporta la etiqueta "video".
30
-
04/11/2014
16
Multimedia-videoLa etiqueta 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-sourceLa etiqueta 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 o
La etiqueta source tiene un parmetro opcional para especificar el tipo de archivo y el cdec que usa el mismo
Atributos de :
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.
Su navegador no soporta la etiqueta audio.
32
-
04/11/2014
17
Multimedia-sourceLa etiqueta 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 o
La etiqueta source se usa para proporcionar alternativas al navegador.
Su navegador no soporta la etiqueta video.
33