MANUAL HTML (ENLACES)
Creado por “l3”
Introducción:
En este manual te enseñare como crear enlaces y cómo manejarlos con HTML, ya que
sin los enlaces de hipertexto no se podrían conectar las paginas web. Un enlace puede
ser fácilmente detectado en una página. Basta con deslizar el puntero del ratón sobre
las imágenes o el texto y ver cómo cambia de su forma original transformándose por
regla general en una mano con un dedo señalador. Adicionalmente, estos enlaces
suelen ir, en el caso de los textos, coloreados y subrayados para que el usuario no
tenga dificultad en reconocerlos. Si no especificamos lo contrario (ya tendremos
ocasión de explicar cómo), estos enlaces texto estarán subrayados y coloreados en
azul. En el caso de las imágenes que sirvan de enlace, veremos que están delimitadas
por un marco azul por defecto. Veremos paso a paso como utilizar al máximo los
enlaces, sus respectivas etiquetas y aprovecharlos para facilitar nuestra navegación en
una página web. Encontraras una diversa gama de ejercicios que iremos haciendo y
ejemplos para que puedas visualizar como te quedara lo que vayamos haciendo. Veras
que los enlaces es algo tan sencillo de utilizar, y te servirá demasiado a la hora de
crear tu propia página web, tratare de ser lo más detallado que se pueda.
INDICE:
Página
Capitulo 1: “Etiquetas y atributos de los enlaces”.........................................................3-4
Capitulo 2: “Enlaces internos, locales, remotos, con direcciones de correo y enlaces
con archivos”.................................................................................................................4-7
Capitulo 3: “Uso de alink, vlink y link”...............................................................................8
Capitulo 4: “Enlaces con imágenes”.......................................................................9,10-11
Capitulo 5: “Crear una barra de inicio con tablas”.....................................................11-12
Capitulo 6: “Quitar la línea del enlace con CSS (Bonus)” ........................................12-13
Créditos .........................................................................................................................13
Capitulo 1: “Etiquetas y atributos de los enlaces”
En los enlaces HTML utilizaremos una etiqueta con su respectivo cierre que será <a>
</a> luego agregamos un atributo llamado “href” que servirá para especificar el archivo,
imagen o programa al cual le aplicaremos el enlace. El código completo quedaría así:
<a href=”destino”> contenido </a>
Como podemos observar, colocamos las etiquetas <a> </a> y le agregamos el atributo
“href” también ponemos el signo igual y las comillas (recuerda siempre colocar las
comillas en los enlaces ya que a la hora de agregar más atributos no funcionara el link).
Observa el ejemplo de abajo de cómo quedara a la hora de poner el código HTML
completo:
<html>
<head>
<title>enlaces<title>
</head>
<body>
<a href=”enlaces2.”>Ir a la página siguiente</a>
</body>
</html>
Nota: Puedes ver el funcionamiento de este ejercicio haciendo clic aquí
Como vemos no es tan difícil hacer un link para un website. Nofollow es un atributo de
los links HTML (etiqueta <A>), que sirve para definir o marcar el comportamiento de los
buscadores cuando rastrean nuestra página web en busca de contenidos para
indexarlos. Por defecto, cuando un buscador visita una página web va recorriendo
todos sus enlaces y va indexando su contenido en su base de datos de páginas. Esto
es algo que hacen automática y periódicamente. Ocurre tanto con los enlaces internos
a otras páginas de nuestro sitio como con los enlaces externos a otras páginas web.
Los motores que recorren las webs de enlace a enlace, se llaman arañas. Ahora bien,
nosotros podemos, a través del atributo rel="nofollow", decirle a un buscador que no
continúe indexando los contenidos de la pagina a la que lleva un enlace en particular.
Lo haríamos así:
<a href=”destino” rel=”nofollow”>enlace</a>
Como interpretan los buscadores el nofollow
El atributo es tenido en cuenta no solo por el motor de indexación (araña) del buscador
Google, sino también por otras arañas de buscadores tan importantes como Yahoo! o
MSN. Aunque hay que decir que cada buscador hace un uso particular del atributo.
Habría que aclarar que los buscadores a menudo siguen el enlace que se ha marcado
como nofollow, visitando aquella web que se había enlazado. Lo que ocurre realmente
es que no tienen en cuenta el link para asignarle ranking o directamente no lo indexan.
Capitulo 2: “Enlaces internos, locales, remotos, con direcciones
de correo y enlaces con archivos”
En función del destino los enlaces son clásicamente agrupados del siguiente modo:
Enlaces internos: los que se dirigen a otras partes dentro de la misma página.
Enlaces locales: los que se dirigen a otras páginas del mismo sitio web.
Enlaces remotos: los dirigidos hacia páginas de otros sitios web.
Enlaces con direcciones de correo: para crear un mensaje de correo dirigido a una
dirección.
Enlaces con archivos: para que los usuarios puedan hacer download de ficheros.
Enlaces internos:
Son los enlaces que apuntan a un lugar diferente dentro de la misma página. Este tipo
de enlaces son esencialmente utilizados en paginas donde el acceso a los contenidos
puede verse dificultado debido al gran tamaño de la misma. Mediante estos enlaces
podemos ofrecer al visitante la posibilidad de acceder rápidamente al principio o final
de la pagina o bien a diferentes párrafos o secciones. Para crear un enlace de este tipo
es necesario, aparte del enlace de origen propiamente dicho, un segundo enlace que
será colocado en el destino. Veamos más claramente cómo funcionan estos enlaces
con un ejemplo sencillo:
Supongamos que queremos crear un enlace que apunte al final de la página. Lo
primero será colocar nuestro enlace origen. Lo pondremos aquí mismo y lo
escribiremos del siguiente modo:
<a href="#abajo">Ir abajo</a>
Como puedes ver, el contenido del enlace es el texto "Ir abajo" y el destino, abajo, es
un punto de la misma página que todavía no hemos definido. Ojo al símbolo #; es él
quien especifica al navegador que el enlace apunta a una sección en particular.
Enlaces locales:
Como hemos dicho, un sitio web está constituido de páginas interconexas. Nos queda
pues, estudiar la manera de relacionar los distintos documentos HTML que componen
nuestro sitio web. Para crear este tipo de enlaces, hemos de crear una etiqueta de la
siguiente forma:
<a href="archivo.html">contenido</a>
Por regla general, para una mejor organización, los sitios suelen estar ordenados por
directorios. Estos directorios suelen contener diferentes secciones de la pagina,
imágenes, sonidos...Es por ello es que en muchos casos no nos valdrá con especificar
el nombre del archivo, sino que tendremos que especificar además el directorio en el
que nuestro archivo.html está alojado. Si has trabajado con MS-DOS no tienes ningún
problema para comprender el modo de funcionamiento. Tan solo hay que tener cuidado
en usar la barra "/" en lugar de la contra barra "\".
Para aquellos que no saben cómo mostrar un camino de un archivo, aquí van una serie
de indicaciones que os ayudaran a comprender la forma de expresarlos. No resulta
difícil en absoluto y con un poco de práctica lo harás prácticamente sin pensar. Hay que
situarse mentalmente en el directorio en el que se encuentra la pagina con el enlace.
1. Si la pagina destino está en un directorio incluido dentro del directorio en el que
nos encontramos, hemos de marcar el camino enumerando cada uno de los
directorios por los que pasamos hasta llegar al archivo y separándolos por el
símbolo barra "/". Al final obviamente, escribimos el archivo.
2. Si la pagina destino se encuentra en un directorio que incluye el de la pagina con
el enlace, hemos de escribir dos puntos y una barra "../" tantas veces como
niveles subamos en la arborescencia hasta dar con el directorio donde esta
emplazado el archivo destino.
3. Si la pagina se encuentra en otro directorio no incluido ni incluyente del archivo
origen, tendremos que subir como en la regla 3 por medio de "…" hasta
encontrar un directorio que englobe el directorio que contiene a la pagina
destino. A continuación haremos como en la regla 2. Escribiremos todos los
directorios por los que pasamos hasta llegar al archivo.
Ejemplo:
Para clarificar este punto podemos hacer un ejemplo a partir de la estructura de
directorios de la imagen.
Para hacer un enlace desde índice.html hacia excavando.gif:
<a href=”images/excavando.gif>Ir a la imagen</a>
Para hacer un enlace desde body.html hacia excavando.gif:
<a href=”../images/excavando.gif”>Ir a la imagen</a>
Nota: Observa que en el ejemplo de arriba ponemos “../” antes de especificar la carpeta
images, debido a que con esto nos colocamos como que si el documento “body.html” estuviera
afuera de la carpeta “samples”
Enlaces externos, de correo y hacia archivos:
Para acabar con los enlaces vamos a ver los últimos 3 tipos de enlaces que habíamos
señalado.
Enlaces remotos:
Son los enlaces que se dirigen hacia páginas que se encuentran fuera de nuestro sitio
web, es decir, cualquier otro documento que no forma parte de nuestro sitio. Este tipo
de enlaces es muy común y no representa ninguna dificultad. Simplemente colocamos
en el atributo HREF de nuestra etiqueta <A> la URL o dirección de la página con la que
queremos enlazar. Sera algo parecido a esto.
<a href="http://www.guiarte.com">ir a guiarte.com</a>
Solo cabe destacar que
Crear cuenta
Comentarios de: Manual HTML (ENLACES) (0)
No hay comentarios