Edi I2011 Unidad 3

Instituto Superior de Formacin Tcnica 179
EDI I
12
Hipertexto
Su caracterstica principal es la capacidad de establecer vnculos dentro del mismo documento, con otros documentos en nuestra computadora o con pginas ubicadas en cualquier sitio de Internet. El destino del vnculo puede ser cualquier tipo de documento: pgina Web, imagen, archivo, etc.
12.1 Etiqueta <a>

Un hipervnculo, o ancla se escribe entre las etiquetas <a> y </a>, el mismo puede ser un texto o un grfico. El navegador modifica su aspecto para indicar que es un link a otro documento; generalmente subraya el texto y coloca un borde alrededor de la imagen.
12.1.1.
Atributo href
Indica el URL o direccin del documento destino del vnculo. El siguiente ejemplo muestra un hipervnculo a otra pgina ubicada en la misma carpeta: <a href=mipagina1.html>Mi pagina web</a> Cuando en el nombre del URL hay un espacio en blanco, conviene codificarlo utilizando el smbolo %20 que es el cdigo ASCII en notacin hexadecimal del espacio. <a href=mi%20pagina.html>Mi pagina web</a> Para cambiarle el formato al vnculo es conveniente que las etiquetas <a> y </a> se coloquen dentro de otros tags y no al revs. <h1><a href=mipagina1.html>Mi pagina web</a></h1> Si el vnculo es una imagen, se coloca la etiqueta <img> dentro de las anteriores. <a href=mipagina1.html><img src=midibujo.gif></a> El link puede contener una imagen y tambin un texto:
Ana Mara Clos
EDI I
<a href=mipagina1.html><img src=milogo.gif align=center>Esta es mi pgina</a> Para ubicar el documento destino, el URL puede ser absoluto o relativo. Un URL absoluto indica el camino completo donde est ubicada la pgina, como en: c:\edi1\grupo5\mipagina.html Un URL relativo indica donde est ubicada la pgina en relacin con la carpeta actual; por ejemplo el documento mipagina.html est ubicado en la carpeta paginas, en el directorio actual. paginas\mipagina.html Si se desea ubicar una pgina que est en un nivel superior que el actual se recurre a: ..\principal.html
12.1.2.
Cambiar el color de los vnculos
La etiqueta <body> que usamos continuamente tiene tres atributos que permiten modificar el color por defecto de los hipervnculos. El navegador puede configurarse para impedir esta modificacin. link: indica el color del vnculo antes de ser visitado, el color por defecto es azul. vlink: especifica el color del vnculo ya visitado, el color por defecto es violeta. alink: permite indicar el color del vnculo que est activo al hacer clic con el Mouse, el color por defecto es rojo <body link=green vlink=red alink=yellow>
12.1.3.
Actividad
a) Escribir la pgina index.html en la carpeta mis paginas. Colocar tres hipervnculos a las pginas 1.html, 2.html, 3.html ubicadas en la subcarpeta documentos. Estas tres pginas deben tener un vnculo
Ana Mara Clos
EDI I
volver que retorne a la pgina principal. En todos los casos utilizar rutas relativas. Cambiar el color por defecto de los hipervnculos. b) Reemplazar uno de los vnculos anteriores por una imagen. En otro utilizar imagen y texto.
12.2 Distintos tipos de vnculos

12.2.1. Pgina Web en Internet
Como vimos en la primera unidad, para localizar una pgina en Internet utilizamos su URL. La separacin entre las distintas partes puede hacerse con barra / (Linux) o contrabarra \(Windows); la mayora de los navegadores realiza la conversin para que el URL sea compatible con distintos sistemas operativos utilizados en Internet. <a href=http://www.google.com.ar/>Google</a>
12.2.2.
Pgina Web en una LAN
Si se desea direccionar una pgina en otra mquina dentro de una red local (LAN), la referencia utiliza el esquema file en lugar de http. file://servidor/ruta En el siguiente ejemplo el documento se encuentra en la computadora llamada PC_01 dentro del recurso que est compartido como c. <a href="file://PC_01/c/pagina1.html" >Pgina 1</a> En este otro ejemplo, el servidor se identifica por su direccin IP. <a href="file://192.168.0.1/c/pagina1.html">Pgina 1</a> Si se omite el servidor, o se usa localhost, el navegador asume que la pgina est alojada en la mquina local. <a href="file://localhost\c:\mipagina.html">Mi pagina</a>
Ana Mara Clos
EDI I
12.2.3.
Correo electrnico
Hay un URL que se utiliza para enviar correo electrnico. El formato es: mailto:direccin El siguiente ejemplo crea un nuevo correo en el servidor configurado por defecto en el navegador y escribe la direccin indicada en el campo Para. <a href="mailto:anaclos2@yahoo.com.ar">Ana Clos</a> Si se desea llenar los campos Asunto (subject), Con copia (cc) o Con copia oculta (bcc), se coloca un signo de pregunta (?) luego de la direccin de correo y se separan los campos con amphersand (&). No es necesario rellenar todos los campos. <a href="mailto:anaclos2@yahoo.com.ar? subject=TP1&cc=unnombre@hotmail.com&bcc=otronombre@gmail.c om">Ana Clos</a>
12.2.4.
Documentos y multimedia
Un hipervnculo tambin se utiliza para mostrar un documento, una imagen, un video o un archivo de audio, siempre que tengamos el programa asociado para abrirlo. <a <a <a <a href="documentos/modulo_1.pdf">Modulo 1</a> href="documentos/documento1.doc">Documento 1</a> href=multimedia/video1.wmv>Video 1</a> href=multimedia/audio1.mp3>Audio 1</a>
12.2.5.
Imgenes
Cuando se desea mostrar una imagen a tamao real, se produce una gran demora al cargarse la pgina. Para evitarlo se establece un hipervnculo con la imagen de un tamao ms pequeo y al oprimirla nos lleva a otra pgina con la imagen del tamao real. <a href="multimedia\epi1.png"><img src="multimedia/epi1.png" width="10%"></a>
Ana Mara Clos
EDI I
12.2.6.
Actividad
Confeccionar una pgina Web que tenga un vnculo hacia una direccin de correo electrnico y otro vnculo hacia un recurso multimedia. Si la red est habilitada, establecer un vnculo hacia un recurso ubicado en otra PC.
12.3 Vnculos dentro del mismo documento

12.3.1. Atributo name
Se utiliza para identificar un fragmento dentro de un documento HTML, que puede ser usado como vnculo. El valor del atributo es cualquier porcin de texto encerrada entre comillas. <h2><a name=parrafo2>Los formatos físicos</a></h2> Para establecer un hipervnculo al fragmento, se escribe su nombre precedido del smbolo de numeral. <a href=#parrafo2>Ir a formatos físicos</a> Si el fragmento est ubicado en otro documento, se escribe su nombre despus del URL: <a href=mipagina.html#parrafo2>Ir a formatos físicos</a>
12.3.2.
Atributo id
Su uso es similar al anterior, pero el identificador del prrafo puede indicarse dentro de cualquier otra etiqueta que lo soporte, como <p>, <div> o de <h1> a <h6>. <h2 id=parrafo2>Los formatos físicos</h2>
Ana Mara Clos
EDI I
12.3.3.
Actividad
Escribir una pgina Web que tenga vnculos a tres prrafos en el mismo documento. Poner suficiente texto entre un prrafo y otro para que se aprecie el desplazamiento al hacer clic sobre el vnculo.
13
La etiqueta <embed>
Otra forma de mostrar contenido dinmico, es utilizando la etiqueta <embed>. El navegador utiliza el Plug-In correspondiente para procesar el objeto. Si el Plug-In no se encuentra, es necesario instalarlo. El navegador despliega el objeto en una regin de la pantalla (puede no ser visible) y coloca controles para manejarlo.
13.1 Atributos
src: de manera similar a como se utiliza con la etiqueta <a>, este atributo indica el URL del contenido. width y height: indican el ancho y alto de la regin (en pixeles o un align: alinea el objeto con respecto al texto que lo rodea, admite los
porcentaje de la pantalla).
valores left, right, middle, top, bottom, center. Algunos ejemplos son: <embed src="rhapsody.mp3" width="25%" height="25%" align=left></embed> <embed src="Lake.wmv" width="100" height="100" align=top></embed>
Ana Mara Clos
EDI I
13.2 Actividad
Escribir una pgina Web que muestre un video en una regin de aproximadamente del ancho y del alto de la pantalla, utilizando la etiqueta <embed>.
14
Imgenes sensitivas
Una imagen puede contener varios vnculos embebidos; si se oprimen distintas reas de la misma, el navegador visualiza documentos diferentes. Se requieren dos etiquetas para crear imgenes sensitivas: <map> que crea un mapa de las distintas zonas de una imagen e <img> que indica qu mapa se usar para una imagen dada.
14.1 Etiqueta <img >

Una imagen, puede ser procesada del lado del servidor o del lado del cliente. En el primer caso se utiliza el atributo ismap y en el segundo, el atributo usemap.
14.1.1.
Atributo ismap
Requiere tener acceso a un servidor para procesar la informacin relativa al mapa. La etiqueta <img> debe estar contenida entre las etiquetas <a> y </a>. Al pasar el Mouse por la imagen, las coordenadas se muestran en la barra de estado del navegador. El servidor utiliza las coordenadas para determinar qu documento se devolver al navegador. El siguiente ejemplo simplemente visualiza las coordenadas al pasar el Mouse sobre la imagen y se puede usar localmente con ese propsito: <a href=pagina2.html><img src=imagen.gif ismap></a>
Ana Mara Clos
EDI I
14.1.2.
Atributo usemap
Se corresponde con el nombre de un mapa indicado por la etiqueta <map> que se ver a continuacin. No se requiere ninguna conexin con un servidor y tampoco se utiliza la etiqueta <a>. <img src=imagen.gif usemap=#mapa1>
14.2 Etiqueta <map>

Define el mapa de una imagen, o sea las regiones sensitivas y el vnculo destino de las mismas. Contiene una secuencia de etiquetas <area> que especifican los detalles de cada zona.
14.2.1.
<img>.
Atributo name
Es el nombre que se especifica para ese mapa, el cual es usado en la etiqueta
<map name="mapa1"> <area .........> <area .........> </map>
14.3 Etiqueta <area>

Define cada regin sensitiva y la accin que se debe llevar a cabo si esa regin es seleccionada por el usuario en un mapa de imagen. No tiene etiqueta de cierre.
14.3.1.
Atributo shape
Indica la forma de la regin sensitiva, que puede ser un crculo, polgono o rectngulo. Si no se incluye el atributo, se asume que el rea es rectangular. Los respectivos valores son: circ o circle, poly o polygon y rect o rectangle.
Ana Mara Clos
EDI I
14.3.2.
Atributo coords
Define las coordenadas de la regin sensitiva, las mismas comienzan a numerarse a partir del extremo superior izquierdo de la pantalla (0,0). La cantidad de parmetros depende del tipo de forma de la regin: Si la regin es un crculo: coords=x, y, r, donde x, y definen la posicin del centro del crculo, y r el radio. Si la regin es un polgono: coords=x1, y1, x2, y2, x3, y3, , donde cada par define un vrtice del polgono. Por lo menos se requieren tres pares para definir un tringulo. El polgono se cierra automticamente y no es necesario repetir el primer punto. Si la regin es un rectngulo: coords=x1, y1, x2, y2, donde el primer par indica el vrtice superior izquierdo y el segundo par se refiere al vrtice inferior derecho. Si las coordenadas se superponen unas con otras, la etiqueta que est antes toma precedencia sobre la que est despus. El navegador ignora las coordenadas que se extienden ms all de los lmites de la imagen.
14.3.3.
Atributo href
Define el URL del vnculo asociado a cada regin de la imagen. <map name="mapa1"> <area shape=rect coords="0,0,49,24" href="#parrafo 1"> <area shape=rect coords="50,25,99,49" href="#principio"> </map>
14.3.4.
Atributo alt
Despliega una etiqueta para cada rea de la imagen. <map name="mapa1"> <area shape=rect coords="0,0,49,24" href="#parrafo 1" alt="parrafo 1"> <area shape=rect coords="50,25,99,49" href="#principio" alt="principio"> </map>
Ana Mara Clos
EDI I
14.3.5.
Regiones con distinta forma
En el siguiente ejemplo, se definen dos reas dentro de la imagen que se superponen en parte: una circular que toma precedencia dentro de sus lmites por ser la primera, y otra rectangular que usa la zona exterior al crculo.
<img src="imagenes\circulo.jpg" usemap="#mapa2"> <map name="mapa2"> <area shape=circle coords="34,30,20" alt="circulo" href="pagina2.html"> <area shape=rect coords="0,0,76,59" alt="rectangulo" href="pagina1.html"> </map>
14.4 Actividad
Utilizar el programa Paint para dibujar una imagen con dos o tres formas geomtricas. Escribir una pgina Web que muestre la imagen y permita que al hacer clic en sus distintas zonas, se abran otros documentos Web.
Ana Mara Clos
10

Edi I2011 Unidad 3

Cargado por

Información del documento

Título original

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

Edi I2011 Unidad 3

Cargado por

Copyright:

Formatos disponibles

Instituto Superior de Formacin Tcnica 179

12.1 Etiqueta <a>

Ana Mara Clos

Instituto Superior de Formacin Tcnica 179

Cambiar el color de los vnculos

Ana Mara Clos

Instituto Superior de Formacin Tcnica 179

12.2 Distintos tipos de vnculos

Pgina Web en una LAN

Ana Mara Clos

Instituto Superior de Formacin Tcnica 179

Ana Mara Clos

Instituto Superior de Formacin Tcnica 179

12.3 Vnculos dentro del mismo documento

Ana Mara Clos

Instituto Superior de Formacin Tcnica 179

Ana Mara Clos

Instituto Superior de Formacin Tcnica 179

14.1 Etiqueta <img >

Ana Mara Clos

Instituto Superior de Formacin Tcnica 179

14.2 Etiqueta <map>

Es el nombre que se especifica para ese mapa, el cual es usado en la etiqueta

<map name="mapa1"> <area .........> <area .........> </map>

14.3 Etiqueta <area>

Ana Mara Clos

Instituto Superior de Formacin Tcnica 179

Ana Mara Clos

Instituto Superior de Formacin Tcnica 179

Regiones con distinta forma

Ana Mara Clos

También podría gustarte