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