ESTABLECER VINCULOS E HIPERVINCULOS. La creación de
Anuncio
ESTABLECER VINCULOS E HIPERVINCULOS. La creación de enlaces es algo cotidiano e importante en el proceso de desarrollo de un sitio Web. Los enlaces entre sus páginas conformarán la estructura del sitio. Dreamweaver nos ofrece varias posibilidades para crear vínculos. Esta es una de las bazas de este programa para facilitar el trabajo al diseñador. Tiene varios métodos que están pensados para ser rápidos e intuitivos, sobre todo para crear enlaces entre las páginas de un mismo sitio Web. Entre todas estas opciones cada uno elegirá la que le resulte más rápida en cada ocasión. Con Los hipervínculos de pueden activar frases o palabras de la página para que al pulsar sobre ellas se salta a cualquier otra página de internet que decidamos. Los Enlaces Hipervínculo no son más que unas zonas especiales de nuestro texto que ofrecen la posibilidad de pulsar sobre ellas para ir a otras páginas. Lo realmente novedoso es la posibilidad de navegar hasta páginas que se encuentran en el otro extremo de la tierra. Normalmente se les llama enlaces.- Consisten en líneas de texto o imágenes que se encuentran dentro de ciertos documentos, generalmente en páginas web, y que permiten acceder a otros documentos. Estos enlaces establecen conexiones con otras páginas en Internet para que el navegador pueda visualizarlas. Cuando se hace click sobre un enlace, el navegador abrirá automáticamente la página de información a la que hace referencia. Para definir un enlace es necesario marcar con la etiqueta <a> el objeto del cual va a partir dicho enlace. Dicha directiva debe incluir el parámetro href="url" para especificar el destino del enlace. Es decir, que antes del objeto elegido debemos abrir con <a href="url">, y después cerrar con </a>. Por ejemplo, si queremos que el texto "pulse aquí para visitar la NASA" nos conduzca a la "home page" de la NASA, debemos escribir en nuestro texto HTML: <a href="http://www.nasa.gov/">Pulse aquí para visitar a la NASA</a> Establecer Vínculos e hipervínculos Los enlaces pueden clasificarse en 2 tipos: Los Internos /Locales y los externos: 1. Los enlaces internos son aquellos Que enlazan las páginas que componen un mismo sitio web. Todas estas páginas estarán generalmente en el mismo servidor, y por tanto estarán también en el mismo ordenador. Por esta razón solo será necesario indicar en nuestro código el nombre del archivo donde está la página que queremos enlazar y el directorio en el que se encuentran. Ejemplo:/hobbies/index.html 2. Los enlaces externos permiten saltar desde una pagina hasta otra puede estar en cualquier lugar del mundo (En otro servidor web). Al crear estos enlaces es necesario especificar la dirección completa de internet (URL) de la página que queremos enlazar. Ejemplo: http//www.otroservidor.com/hobbies/index.html Cabe resaltar que aunque la mayoría de las veces los LINKS se usan para enlazar una página con otras, también pueden usarse con imágenes, sonido, video, etc.,} Que se vería de esta forma: Pulse aquí para visitar a la NASA Si queremos que el texto "Foto" nos lleve a una imagen tenemos que escribir:<a href="imagen.gif">Foto</a> entonces al hacer clic en el texto Foto nos abrirá laimagen.gif. También se puede ir a otro enlace por medio de una imagen. Lo único que se debe hacer es cambiar el texto por una imagen:<ahref="http://www.altavista.com"><img src="Logo.jpg"></a>. Si se quiere hacer un link para que nos manden un E-Mail se debe hacer de la siguiente manera: <a href="mailto:[email protected]">Mandame un Email</a>. Entonces cuando se haga clic sobre esta palabra Mándame un Email se abrirá (por defecto) el Microsoft Outlook Express con la dirección del destinatario ya escrita. Etiqueta para un vinculo <BODY> ...texto... <P>Encontrarás mucho más en el <A href="capitulo2.html">capítulo dos</A>. Mira también este <A href="../imagenes/bosque.gif">mapa del bosque encantado.</A> </BODY> Los vínculos son una parte vital del HTML y todo el concepto de World Wide Web. Internet es considerada una red debido a cómo los vínculos conectan piezas separado de documentos, basándose en la idea de una simple referencia potenciada por la interactividad. Como resultado, un simple click te lleva del documento referente al mencionado en el vínculo. Un vínculo en un documento HTML puede ser básicamente considerado como una referencia a otro recurso. Esta referencia establece una relación implícita entre el documento referente y el recurso vinculado. Los vínculos pueden ser clasificados como visuales (ubicados en el contenido del documento) u ocultos (definiendo información relacional generalizada) Etiqueta s <a> Atribut os Valor href URL hreflang código de lenguaje nombre de sección alternate designates stylesheet start name rel Descripción Define un vínculo Dirección URL a conectar. Especifica el lenguaje de la URL. Para crear un marcapáginas dentro de un documento. Especifica la relación entre el documento actual y el destino del vínculo. Ej. next prev contents index glossary copyright chapter section subsection apendix help bookmark nofollow rev coords alternate designates stylesheet start next prev contents index glossary copyright chapter section subsection apendix help bookmark coordenadas shape rect rectangle circ circle poly polygon target Especifica las coordenadas de la superficie que contiene el enlace. Define la forma del área. Usamos coords="izquierda, arriba, derecha, abajo" Usamos coords="centro x, centro y, radio" Usamos coords="x1, y1, x2, y2, .., xn, yn" _blank Indica donde abrir el URL. El URL se abrirá en una nueva ventana. _parent El URL se abrirá en el frameset padre. _self El URL se abrirá en el mismo frame donde fue apretado. El URL se abriró en una ventana de tamaño completo. Especifica el tipo de contenido a conectar. _top type Especifica la relación entre el destino del vínculo y el documento actual(vínculo inverso). tipo de contenido Vínculos directos e inversos Los atributos rel y rev juegan papeles complementarios: el atributo rel especifica un vínculo directo y el atributo rev especifica un vínculo inverso. Consideremos dos documentos A y B. Documento A: <LINK href="docB" rel="blabla"> Esto significa exactamente lo mismo que: Documento B: <LINK href="docA" rev="blabla"> Ambos atributos pueden especificarse simultáneamente. Los enlaces nos permiten de una manera muy cómoda redirigir al usuario a otra parte, cuando éste pinche en dicho enlace. Podemos hacer que el usuario se vaya a otra url distinta a la que está, o podemos hacer que vaya a otra parte pero dentro del mismo archivo en el que está, dentro de la misma url. Esta explicación la entenderás más fácilmente cuando te presentemos los tipos de enlaces que hay y veas sus características. Así pues, vamos a ello: La etiqueta <a> Es dentro de esta etiqueta y de su cierre (</a>) dónde encontraremos el enlace. Todo lo que esté dentro de ella, ya sea texto o una imagen, estará considerado como un enlace y el navegador lo interpretará así. Atributo href Para que un enlace esté activo debemos indicar dentro de él el destino del mismo. Para establecer este destino le colocamos a la etiqueta <a> este atributo. La etiqueta completa nos quedaría así: <a href=“enlace”>Pincha aquí para ir al destino del enlace</a> Las urls pueden tener dos tipos de rutas o direcciones: Las urls con dirección relativa y las urls con dirección absoluta. Vamos a explicarlas a continuación: Direcciones absolutas y relativas: Las direcciones absolutas son aquellas que contienen la url completa. En estas direcciones podemos ver todos los elementos de la dirección. Un ejemplo muy claro es el siguiente: <a href="http://html.hazunaweb.com/112.php">Artículo de enlaces html</a> Si pincháramos en el enlace iríamos directamente al artículo de mapas de imágenes del tutorial. Fijaros en lo que hablábamos: podemos apreciar todas las partes de la url. En las direcciones relativas vemos que no está la url completa. En este tipo de direcciones, las partes que faltan de la dirección el navegador las genera de la propia página en la que está el enlace. Por ejemplo, si dentro de la página http://html.hazunaweb.com/112.php encontráramos la siguiente url... <a href="111.php">Artículo de enlaces html</a> …el navegador entiende que dentro de la página y de la carpeta en la que se encuntra, debe dirigirse al fichero “111.php”. Protocolos Los enlaces nos pueden llevar a url con diferentes protocolos. Nosotros os vamos a presentar los dos más importantes: http: Este es el protocolo básico de los servidores webs. https: Este protocolo se diferencia del anterior en que es un protocolo cifrado. Es decir, la información que se envía y se recibe con esa url esta siendo encriptada para que nadie más pueda interceptar y usar esa información. Las páginas con este protocolo son las conocidas como “páginas seguras”. Esta encriptación de los datos produce una pequeña ralentización de la página debido a que los datos se envían cifrados. Mailto La url mailto es aquella que te lleva directamente a una dirección de correo y, más concretamente, a redactar un mensaje. Una dirección mailto sería la siguiente: <a href=“mailto:[email protected]>correodeejemplo@correodeeje mplo.com</a> Fíjate en el ejemplo que acabamos de poner. Nosotros, como texto para albergar el enlace, hemos puesto la misma dirección que la que va a abrir la url. ¿Por qué? El programa de correo que abre el navegador es aquel que el usuario tenga como predefinido. Nosotros te aconsejamos que como texto para albergar el enlace pongas la dirección de correo electrónico. Windows por defecto tiene predeterminado el Outlook y al pinchar en el enlace lo abre directamente. Muchos usuarios prefieren copiar la dirección y pegarla en su programa de correo. La etiqueta target: La etiqueta sirve para definir la forma en la que se accederá a la nueva url. Esta etiqueta la escribimos dentro del enlace para predefinirla. Puede ser de diferentes tipos: _self: Es el valor por defecto del parámetro target. El enlace se abrirá en el mismo marco en el que está alojado. _blank: Para hacer que ese enlace se abra en una ventana a parte. _top: Elimina todos los marcos existente y muestra la nueva página en la ventana original sin marcos. _parent : Muestra la nueva página en el <frameset> que contiene al marco donde se encuentra alojado el enlace. La etiqueta <frameset> la explicamos en otro artículo. Anclas Un ancla nos sirve para dirigir al usuario a otra parte distinta pero dentro del mismo fichero en el que estamos. Para crear un ancla debemos crear primero el lugar al que queremos acceder. Debemos escribir lo siguiente: <a name=“ancla”> Y después debemos escribir un enlace con el código siguiente: <a href= “#ancla”>Enlace para acceder al ancla</a> Yo he situado un ancla justo al principio de este artículo. Si pinchas en el siguiente enlace acudirás a ella y verás el efecto. Ir al principio del artículo gracias al ancla Y para terminar te mostraremos como podemos hacer que un enlace nos diriga directamente a una imagen. Le hemos indicado al enlace que nos abra la imagen en una ventana diferente gracias al target:blank. El código es el siguiente: <a href="http://html.hazunaweb.com/html/imagenes/prueba.jpg" target="_blank">Ir a ver el ejemplo de prueba </a> Y el resultado le verás pinchando en aquí: Ir a ver el ejemplo de prueba Y terminamos con otro tipo de enlace. Esta vez el enlace está en la imagen. Si pinchas en ella, irás al artículo dónde vimos por primera vez esa fotografía. Primero te mostramos el código: <a href="http://html.hazunaweb.com/112.php" target="_blank"><img src="http://html.hazunaweb.com/html/imagenes/pruebaenlace.jpg" alt="Pincha para ir al enlace" width="300" height="214" border="0"></a> Y aquí tienes la imagen con el enlace. Se abrirá en una ventana nueva gracias al target blank. rel="nofollow" para buscadores Aunque esto no es un curso sobre SEO (optimización para buscadores), es importante comentar en este artículo que los enlaces "normales" orientan a Google a la hora de saber qué páginas son importantes y cuáles no. Una páginas con muchos enlaces suele indicar que es más importante que otra que no tiene enlaces. En ocasiones podemos querer poner un enlace pero no transmitir peso, es decir, no indicar a Google que esa página es importante. Podemos querer hacerlo por muchos motivos, por ejemplo, si los usuarios de nuestra página pueden poner enlaces, tal vez no queramos que éstos nos llenen la web de spam poniendo enlaces solo para ganar fuerza. También podemos querer hacerlo internamente dentro de nuestra web porque no queramos que ciertas secciones sean leídas e indexadas por Google, o simplemente porque no las consideremos importantes para el buscador. En la siguiente página sobre compra venta en Panamá podemos ver varios ejemplos si accedemos a su código fuente. Añadiendo el atributo rel="nofollow" Dentro de la etiqueta <a> indicamos a Google, y otros buscadores, que no transmitan fuerza a dicho enlace. Pondremos ejemplos dicho atributo. Por ejemplo, con Indicamos que no transmita peso a la sección de contacto <a href="http://www.hazunaweb.com/contacto.php" rel="nofollow">Contacto</a>
