TIPOS DE LINKS

Existen 2 tipos generales de LINKS...

/a

ABSOLUTOS

/b RELATIVOS

= Referidos a URL Uniform Resources Localizator (Localizador Uniforme de Recursos). Es decir, referidos a una direccin web completa con el protocolo HTTP. Establecen links a pginas de OTRO SITIO web que tiene su propia URL. Por ejemplo: http://www.unr.edu.ar

= Referidos al SITIO LOCAL (clase 02).

es decir, relativos a la ubicacin del documento base en relacin al archivo solicitado y segn sus ubicaciones en la estructura local establecen links entre pginas de UN MISMO SITIO. Es el tipo de links que utilizaremos para vincular las pginas de nuestro sitio de prcticas.

MDW por default establece todas las instancias de "links" entre pginas del sitio en el tipo RELATIVOS. Si todas las pginas que queremos vincular se alojan en el Sitio Local, las relaciones de links se establecern con esos parmetros y funcionarn OK.

Para definir un link ABSOLUTO desde cualquier archivo de nuestro sitio, slo debemos escribir el protocolo URL en el campo "vnculo". OPCIONES DE LINKS Las posibilidades bsicas para establecer LINKS en pginas web son 3... LINK A OTRA PGINA WEB = Ordena la carga y apertura de un nuevo archivo.htm LINK A DIRECCIN DE E-MAIL (mailto) = ordena la apertura del software de correo electrnico (POP3) configurado por el usuario (por ejemplo: MS-

Outlook Express) con un mensaje nuevo y completando automticamente la direccin de correo electrnico definida en el link en el campo "para/to". LINK A PUNTO DE FIJACIN CON NOMBRE = ordena el "salto" a una ubicacin especfica dentro de la misma pgina actual. TARGETS DE LINKS El TARGET o "destino" especifica el tipo ventana o instancia del navegador en que se abrir la nueva pgina vinculada en relacin a la pgina actual, es decir, desde donde se hizo el link. Tengan en cuenta que... El atributo de DESTINO compete a todos los tipos y opciones de links, excepto a los "links a correo electrnico" (ya que stos no ordenan la carga de una pgina web en el navegador) Las posibilidades estndares de "destinos de aperturas de links" son 4... 1. _ blank = Abre la pgina vinculada en una NUEVA VENTANA del navegador 2. _ top = abre la pgina vinculada EN LA MISMA VENTANA de la pgina actual. 3. _ self = abre la pgina vinculada en la misma ventana del documento actual. No confundir con _TOP, ya que si bien parece accionar el mismo tipo de apertura, _SELF es el parmetro posible o correcto para "links a puntos de fijacin", y en algunos casos del trabajo con "links en frames o conjunto de marcos" 4. _ parent = Uso exclusivo en Conjunto de Marcos o Framesets

Desde la Paleta de Propiedades, el campo DEST=Destino, se habilita exclusiva y automticamente luego de definir un vnculo a la seleccin.

LINK A OTRA PGINA WEB = Ordena la carga y apertura de un nuevo archivo.htm Siempre los LINKS a otras pginas, se definen desde la PALETA PROPIEDADES Recordamos que... MDW por default establece todas las instancias de "links" entre pginas del sitio en el tipo RELATIVOS. Si todas las pginas que queremos vincular se alojan en el Sitio Local, las relaciones de links se establecern con esos parmetros y funcionarn OK. Para definir un link ABSOLUTO, slo debemos escribir el protocolo URL en el campo "vnculo". 1. Crear 2 3 nuevos archivos.htm en la estructura web del sitio de prcticas MI_SITIO. Pueden estar en diferentes niveles (carpetas y sub-carpetas) 2. Editar en MDW4 los archivos.htm existentes en el sitio local de prcticas. Escribir un breve texto en cada uno. Escriba algo sencillo e indicativo que servir luego para verificar que los "links" funcionan OK! en MDW4 podemos ecribir, copiar y pegar textos como lo hacemos habitualmente en cualquier procesador de textos. En clases posteriores veremos cmo dar formato a textos para la web. 3. Guardar todos.

4. Ahora, editar en MDW4 otro archivo.htm existente en el sitio de prcticas MI_SITIO, si desea cree uno nuevo. Desde este archivo haremos LINKS a los otros recin editados. Si desea, escriba un breve texto tambin aqu. 5. Insertar un imagen Escribir un breve texto. Elegir alguna imagen existente en el sito local e insertarla en el documento actual, o bien, fuera del entorno MDW4 elegir y guardar una imagen en la carpeta base de MI_SITIO y luego desde MDW4 insertarla en el documento. Si desean, pueden practicar composicin de imgenes en relacin a textos como vimos en la clase 03/2, y por qu no, tambin propiedades de pginas, ya que, al finalizar el paso a paso para establecer "links", podremos ver cmo quedan los colores de texto comunes y los textos con links. 1: CREAR LINKS a pginas web desde TEXTOS Desde la ventana de trabajo del documento... Activar la paleta PROPIEDADES Ventana Propiedades PASO 1 Seleccionar el texto que definir el link (prrafo completo, parte del prrafo, una o varias palabras seguidas) Como sabemos, la interface de la paleta Propiedades al seleccionar textos es la siguiente...

Trabajaremos con el sector superior de la Paleta Propiedades, especficamente con los campos VNCULO y DEST=DESTINO PASO 2 Manteniendo el texto en seleccin, en la Paleta de Propiedades indicar... 1 CLIC! sobre el icono-carpeta a la derecha del campo VNCULO Se abrir el cuadro de dilogo "seleccionar Archivo". Por default este cuadro mostrar algn nivel de la estructura del SITIO LOCAL (en nuestro caso, el sitio de prcticas MI_SITIO) PASO3 en el cuadro "seleccionar Archivo"... localizar el archivo a vincular, seleccionar y luego indicar... Seleccionar para confirmar; se cierra el cuadro de dilogo y volvemos a la ventana del documento de trabajo. En la Paleta Propiedades, en el campo VNCULO, ahora aparece el archivo vinculado y el campo DEST=DESTINO se encuentra habilitado.

PASO 4 manteniendo en seleccin de texto que vincula, en la paleta Propiedades, indicamos... 1 CLIC! sobre la flechita del campo "DEST" para desplegar las opciones y... 1 CLIC! en la opcin requerida para confirmar

2: crear links a pginas desde IMGENES desde la ventana de trabajo del documento... Activar la paleta PROPIEDADES Ventana Propiedades Los pasos son similares a "links desde textos" 1 PASO seleccionar la imagen que definir el link La interface de la paleta Propiedades al seleccionar imgenes es similar a...

En este caso debemos activar los 2 sectores de la Paleta de Propiedades (superior e inferior) para trabajar nuevamente con los campos VNCULO y DEST=DESTINO 2PASO manteniendo la imagen en seleccin, en la paleta Propiedades... 1 CLIC! sobre el icono-carpeta a la derecha del campo VNCULO se abrir el cuadro de dilogo "seleccionar Archivo" El resto de los pasos es exactamente igual a los pasos 3 a 5 de "links desde textos" Una vez definido el link, si a la imagen no se la configurado "borde", notaremos que no presenta ningn cambio de aspecto o identificacin visual luego de definirle el link. Una opcin para diferenciar imgenes con links, es configurar el atributo "borde" a la imagen en la Paleta de Propiedades El color del borde de una imagen con link, tomar los colores definidos en las Propiedades de Pgina como colores de links. OPCIN: MEN CONTEXTUAL 3: CREAR LINKS A PGINAS WEB DESDE EL MEN CONTEXTUAL

Tambin podemos definir links o vnculos a pginas web con el MEN CONTEXTUAL. Pero, tengan en cuenta que... Slo los links "relativos" a pginas del SITIO LOCAL actual, se pueden configurar con el "men contextual" Los pasos son similares a los que vimos recientemente, tanto para imgenes como para textos, salvo que en este caso, luego de... Seleccionar el texto que definir el link (prrafo completo, parte del prrafo, una o varias palabras seguidas). O bien, luego de... Seleccionar la imagen que definir el link 1 CLIC! con el botn derecho del mouse para activar el men contextual. All indicar... "Crear vnculo..." Se activar el cuadro de dilogo "seleccionar Archivo" y los pasos a seguir son idnticos a los anteriores. 4: MODIFICAR LINKS /A QUITAR LINKS 1 TEXTOS posar el mouse sobre cualquier sector del texto que define el link IMAGENES seleccionar la imagen que define el link Luego... 2 en la paleta Propiedades, en el campo "vnculo" (que es editable)... BORRAR! /B CAMBIAR LINKS Para modificar la ruta de links, simplemente... 1 TEXTOS posar el Mouse sobre cualquier sector del texto que define el link, o seleccionar el texto completo que define el link IMAGENES seleccionar la imagen que define el link 2/A en la paleta Propiedades, en el campo "vnculo"... 1 CLIC! sobre el icono-carpeta a la derecha del campo VNCULO y volvemos a repetir los mismos pasos que para "crear links", eligiendo el nuevo archivo a vincular. 2/B Si lo que necesitamos en cambiar un link "relativo" por otro "absoluto, simplemente... en la paleta Propiedades, en el campo "vnculo"... borrar! el vnculo actual y escribir la URL a vincular. /C CAMBIAR "targets" o DESTINOS Para modificar el destino o target de apertura, simplemente... Luego 1 TEXTOS posar el mouse sobre cualquier sector del texto que define el link IMAGENES seleccionar la imagen que define el link Luego... 2 en la paleta Propiedades, en el campo "vnculo" (que es editable)... BORRAR! Para eliminar links, simplemente...

Actividad previa 1. Editar en MDW4 un archivo.htm existente en el sitio de prcticas MI_SITIO, que contenga textos e imgenes. Pueden editar alguno creado en la clase anterior, donde ya definimos "links a pginas". Si desean creen uno nuevo, escriban un breve texto e inserten alguna imagen del sitio local. /1 CREAR links a direcciones de correo electrnico = e-mail

Como vimos, una de las opciones de links es... LINK A DIRECCIN DE E-MAIL (mailto) = Ordena la apertura del software de correo electrnico (POP3) configurado por el usuario (por ejemplo: MSOutlook Express) con un mensaje nuevo y completando automticamente la direccin de correo electrnico definida en el link en el campo "para/to" Es muy simple definir links a direcciones de correo electrnico, y los pasos son similares al trabajo que vimos anteriormente. Pero, en este caso.... Los "links a direcciones de e-mail" siempre se definen desde la PALETA OBJETOS DEFINIR links a direcciones de E-MAIL desde TEXTOS Desde la ventana de trabajo del documento... Activar la paleta OBJETOS Ventana Objetos 1 PASO Posar el mouse en el punto de insercin, es decir, donde deseamos que comience el texto que definir el link 2 PASO

En la Paleta OBJETOS indicar... 1 CLIC! sobre el icono "insertar vnculo de correo electrnico para activar el cuadro de dilogo correspondiente, que es el siguiente...

3 PASO en el cuadro de dilogo "Insertar vnculo de correo...", completar los 2 campos disponibles... TEXTO escribir el texto que definir el link. Puede ser la direccin de correo electrnico, o bien un texto de invitacin (por ejemplo "comunquese con nosotros!"). Este texto solamente define o indica el link y es el que se visualiza en la pantalla, no configura la accin del link. CORREO ELECTRNICO escribir correctamente la direccin de correo electrnico. Este campo s OK/Aceptar! para confirmar y cerrar el cuadro de dilogo, volviendo a la configura la orden de link, por lo que recomendamos verificar que la direccin escrita sea la correcta. Finalmente, en el cuadro de dilogo... 4 PASO F12, se abrir la pgina en el navegador y verificamos el link. Listo! /2 DATOS PRCTICOS... acerca de links a e-mail o "mailto" Si bien al inicio de esta prctica de "links a correo electrnico" hemos apuntado que se defimen siempre desde la Paleta Objetos, a continuacin analizaremos la Paleta de Propiedades y vern que encontraremos algunos datos que resultarn de inters... Luego de definir el link segn los pasos anteriores, observen en la ventana de trabajo del documento que... Al seleccionar el texto con link a correo electrnico, la PALETA DE PROPIEDADES presenta en el campo "vnculo", la informacin que configura el link "MAILTO:INFO@PUNTOEDU.EDU.AR" (en minsculas!) ventana de trabajo del documento actual.

Qu es "MAILTO"? Es la orden o etiqueta HTML especfica para configurar links a direcciones de correo electrnico. La cadena completa y correcta es (en minsculas y sin espacios - y sin comillas!) mailto:usuario@dominiocompleto Siempre luego de los 2 puntos se escribe la direccin de e-mail. Y... Por qu nos interesa este dato? Por 2 motivos.... /a fcil! Modificar la direccin de correo del link Slo debemos tener cuidado en...

= Si deseamos modificar la direccin de correo definida para el link, hacerlo desde la Paleta de Propiedades es ms NO ROMPER LA CADENA "mailto:usuario@dominiocompleto", donde luego de los 2 puntos escribimos la nueva direccin de correo (minsculas, sin espacios) /b! CREAR LINK A CORREO ELECTRNICO DESDE IMGENES

= Si deseamos crear un link a e-mail desde una imagen del documento, hacerlo desde la Paleta de Propiedades es muy fcil! Los pasos son simples, slo tengan cuidado en el 2... 1- Seleccionar la imagen, luego... 2- En la Paleta de Propiedades, directamente en el campo "vnculo", escribir la direccin de correo electrnico con la orden HTML, es decir, con LA CADENA COMPLETA "mailto:usuario@dominiocompleto", donde luego de los 2 puntos escribimos la direccin de correo (minsculas, sin espacios)

/0

QU ES UN PUNTO DE FIJACIN CON NOMBRE?

LINK A PUNTO DE FIJACIN (named anchor) = Ordena el "salto" a una ubicacin especfica dentro de la misma pgina actual, dada por un "punto invisible especificado con nombre"

Para comprender qu es un "punto de fijacin con nombre", veamos un ejemplo de aplicacin bsico... Supongamos que necesitamos establecer un vnculo desde (A) hacia (B) que se encuentran en LA MISMA PGINA. Para ello, NO podemos hacerlo con "links a pginas", ya que abriramos la misma pgina y siempre visualizando el tem (A) primero.

Lo que debemos realizar es en un link interno, es decir, que "salte" de una ubicacin especfica de la misma pgina. Esto es LINKS A PUNTOS DE FIJACIN CON NOMBRE. Si recordamos la definicin que apuntamos al inicio: "ordena el "salto" a una ubicacin especfica dentro de la misma pgina actual, dada por un "punto invisible especificado con nombre". Y sto es exactamente lo que nos relaciona (A) con (B) que estn en la misma pgina. Es decir, (A) sera uno de los puntos de fijacin y (B) el otro, pudiendo exitir muchos ms. Y cmo distinguir cul es cul? Justamente ESPECIFICNDOLE A CADA UNO UN NOMBRE DISTINTO!.

Actividad previa 1. Crear y editar en MDW4 un nuevo archivo.htm en el sitio local de prcticas MI_SITIO 2. Escriba textos y guarde el archivo en el sitio Es conveniente para la prctica de esta clase, escribir 2 prrafos bastante separados entre s. Tomen como referencia la imagen que ejemplifica (A) y (B). Trabajar con "links a puntos de fijacin" implica 2 tareas fundamentales: /1 DEFINIR Puntos de Fijacin con Nombre Para desarrollar efectivamente esta prctica de "puntos de fijacin con nombre", vamos a necesitar visualizar elementos invisibles en la interface de trabajo. Por lo tanto, a quienes no hayan editado las "Preferencias de MDW" (clase 01/2) habilitando la visualizacin de stos, solicitamos lo hagan ahora mismo, a los fines de que la prctica resulte comprensible y sencilla de realizar. Una vez realizada la actividad previa, comprendidos los conceptos de "puntos de fijacin con nombre" y habilitados los "elementos invisibles", vamos directamente al paso a paso! DEFINIR PUNTOS DE FIJACIN CON NOMBRES Los "puntos de fijacin" se definen desde la Paleta OBJETOS/INVISIBLES. Trabajaremos a partir del ejemplo de 2 puntos (A) y (B) segn la imagen que vimos anteriormente. Vamos a vincular (A) hacia (B) Desde la ventana de trabajo del documento... activar la paleta OBJETOS Ventana Objetos Invisibles 1 Posar el mouse a la altura de B para indicar el punto de insercin del punto de fijacin correspondiente a (B) 2 En la Paleta Objetos/Invisibles

 1 CLIC el icono-botn "insertar punto de fijacin..." Automticamente, se activa el cuadro de dilogo "insertar..."

3 En la cuadro de dilogo "Insertar punto de fijacin con nombre" escribir el nombre del punto en el campo editable "nombre del punto..." Al definir los NOMBRES, sugerimos sean breves y concretos. Siempre utilizen nombres simples, sin acentos ni caracteres especiales y sin espacios!. Por ejemplo, indicar simplemete B, o bien, itemB Luego de completar el campo de nombre, finalmente... Ok/Aceptar para confitmar, se cierra el cuadro de dilogo y volvemos a la ventana del documento de trabajo. Listo! Ya qued DEFINIDO el Punto de Fijacin con Nombre para el sector (B) de nuestra pgina! Luego veremos cmo definir links entre puntos de fijacin. Para cada "punto de fijacin" que se desee crear en la pgina, seguir los mismos pasos. Siempre! indicar nombres distintos para cada "punto" que se genere. Los "puntos de fijacin..." pueden estar situados en cualquier sector del documento de trabajo: al comienzo de textos, en el medio de prrafos, dentro de celdas de tablas, en espacios de rengln, etc. Ustedes irn viendo segn necesidades donde conviene ubicarlos. Antes de continuar, observemos y analizemos la ventana de trabajo... / Donde posamos el mouse indicando el punto de insercin del "punto de fijacin", aparece ahora el siguiente icono: Este icono es un "elemento invisible" (clase 01/2) que indica la ubicacin exacta del"punto de fijacin con nombre". Ahora veamos qu pasa en la Paleta Propiedades: activar la paleta PROPIEDADES

Si seleccionamos el icono, la Paleta de Propiedades reconfigura su interface similar a....

Aqu, en la Paleta de Propiedades, visualizamos (a la izquierda superior) un "ancla" que es el icono de MDW para los "puntos de fijacin", y en el campo "Nombre" est el nombre que hemos indicado recientemente. Por ahora, el icono "elemento invisible" en la pantalla de trabajo, ms la visualizacin en la Paleta de Propiedades del nombre que indicamos, significa que est todo OK. Si hacen un F12, vern que en el navegador nada parece haber cambiado an, porque los "puntos de fijacin..." son "elementos invisibles"! links a "puntos" ! /2 CREAR LINKS a Puntos de Fijacin con Nombre Sigamos con el tem 3, donde terminaremos la prctica exitosa creando

Luego de DEFINIR los "puntos de fijacin con nombre" necesarios en la pgina, vamos a vincularlos entre s. Solicitamos para realizar efectivamente la prctica que definan por lo menos 2 puntos (como el ejemplo de (A) y (B) que estuvimos analizando. CREAR LINK A PUNTOS DE FIJACIN CON NOMBRES Los "links" a "puntos de fijacin con nombre" se configuran desde la Paleta PROPIEDADES. Desde la ventana de trabajo del documento... activar la paleta PROPIEDADES Ventana Propiedades 1 PASO seleccionar el texto o imagen que configurar el link 2 PASO Desde la Paleta de Propiedades...

1 CLIC SIN SOLTAR! sobre el icono antecesor del icono-carpeta (es como un "cuadrante") SOSTENIENDO EL CLIC! desplazarse por la ventana del documento (hacia abajo o arriba segn el punto a localizar A o B) hasta visualizar el "icono-elemento invisible del punto de fijacin" requerido, luego.... 1 CLIC! sobre el "icono-elemento invisible de punto de fijacin" para confirmar y configurar la ubicacin.

3 PASO Ahora, nuevamente el la Paleta de Propiedades... especificar un "target o DESTINO" de carga en la ventana del navegador. En general suele utilizarse _SELF

4 PASO Finalmente... F12, se abrir la pgina en el navegador y verificamos que el link a punto de fijacin funcione OK y se cargue correctamente segn el "destino" configurado. Listo! As se CREA un link a Punto de Fijacin con Nombre! Para cada "link" a "punto de fijacin" que se desee crear en la pgina, seguir los mismos pasos, desplazndose hacia arriba o hacia abajo segn se requiera. /3 DATOS PRCTICOS... acerca de "puntos de fijacin con nombre" Luego de DEFINIR los "puntos de fijacin con nombre" y CREAR los links, observemos y analizemos nuevamente la ventana de trabajo...

Al seleccionar el texto con link a "punto de fijacin con nombre", la PALETA DE PROPIEDADES presenta en el campo "vnculo", la informacin que configura el link "#itemA" Qu es "#nombredelpunto"? Es la orden o etiqueta HTML especfica que configura links a puntos de fijacin con nombres. La cadena completa y correcta es (sin comillas!) "#nombredelpunto" (signo cardinal seguido del nombre del punto de fijacin) Siempre, luego del signo cardinal # se escribe el nombre del punto completo, sin espacios y respetando maysculas y minsculas si hubiera. Y... Por qu nos interesa este dato? Por 2 motivos, parecidos a los que vimos en "mailto". Veamos... /a Modificar link a punto de fijacin = Si deseamos modificar el link a un punto de fijacin, desde la Paleta de Propiedades es ms fcil! Slo debemos tener cuidado en... NO ROMPER LA CADENA "#nombredelpunto", donde luego del signo cardinal # se escribe el nombre del punto completo, sin espacios y respetando maysculas y minsculas si hubiera.

CREAR LINK a punto de fijacin PERO CON MUCHO CUIDADO! = Crear un link a un punto de fijacin existente en el documento desde la Paleta de Propiedades es muy muy fcil! PERO..... Como es una tarea "realizada a mano" no contamos con la asistencia de MDW en la verficacin de la existencia y el nombre preciso del punto hacia donde vincular. Por sto, recomendamos MUCHSIMO CUIDADO! Si el punto no existe o nos equivocamos en el nombre (aunque sea una letra!), el link no funcionar OK!, mejor dicho NO FUNCIONAR. Los pasos son simples, slo tengan previsto que: / los puntos de fijacin EXISTAN, es decir, estn previamente definidos segn vimos en el tem 2 de esta clase (no hay otro modo de hacer la definicin de puntos!) / anotar en papel (si, si! en papel!) los nombres que vamos asignando a cada punto. Una vez previstas las recomendaciones... 1- Seleccionar la imagen o texto que definir el link al punto de fijacin, luego... 2- En la Paleta de Propiedades, directamente en el campo "vnculo", escribir la orden HTML, es decir, LA CADENA COMPLETA "#nombredelpunto"