lunes, 8 de agosto de 2011

Enlaces !!!

Para generar un enlace a otro documento necesitamos el nombre de un archivo (o dirección URL) y el texto que sirve como punto de activacion del otro documento. Son lo que le decimos link, ya sea para pasar a la pagina siguiente o dirigirnos a otra página web diferente.

Viene del inglés Anchor o ancla, por tanto los enlaces se generan mediante la tag <a> y la tag de cierre va a ser </a> y llevará SIEMPRE un atributo. Los dos atributos mas conocidos son href y name.

1- HREF

La tag se redacta así: <a href="URL> ..... </a>

Es la más habitual y sirve para saltar entre diferentes URLs. Los dos ejemplos más comunes son saltar a la siguiente página de nuestra web o saltar a una página web totalmente diferente.

* Saltar del archivo 1 al archivo 2

En el archivo 1 incluiremos la tag: <a href="archivo 2.html">Siguiente página</a>

En nuestra página web se va a ver solamente lo que esta en el medio de las tags de apertura y cierre. En este ejemplo es "Siguiente página".

* Saltar a otra página web diferente

Supongamos que queremos poner una referencia a Google en nuestra página.

Debemos tipear en el html: <a href="http://www.google.com">Visita esta página</a>

Lo que va a mostrar el explorador es "Visita esta página" y cuando le demos click encima del link, nos llevará a Google. SIEMPRE pongan la URL completa, sino les va a tirar que no encuentra la página!!!

2- NAME

Esto me pareció mas complicado de entender que el href, pero nada es imposible.

Un ejemplo de este tag y su aplicación puede ser las páginas de preguntas frecuentes: arriba tienen enumeradas las preguntas y abajo esta la pregunta con la respuesta. La mayoria de las veces cuando vamos a la lista de preguntas que está arriba y hacemos click en el link, nos muestra en que parte de la página está esa pregunta y nos muestra directamente esa parte de la página. Esto se logra con un "a name" y un "a href" a esa parte.... les explico como:

Imaginense que tienen una página muy larga en contenido, por ejemplo una página de preguntas frecuentes de su empresa y quieren ir rápidamente al inicio.

En el inicio se pone <a name="inicio"> puede no tener nada en el medio y como siempre, el tag de cierre </a>. Que es lo que estoy haciendo? Diciendole a la compu que esta parte de la página se llama inicio y nada mas que eso. Esta referencia no se va a mostrar en el explorador cuando abran nuestra página.

Luego, al final de la página tipeamos una referencia (y esta sí se muestra en el explorador). Vamos a tipear: <a href="#inicio">Ir al inicio</a>.

Se pone la referencia con un # para que se de cuenta que es a lo que denominamos dentro del <a name>.

Les doy un ejemplo muy "chancho" de codigo que pueden copiar para ver como funciona esto. En mi ejemplo,  puse una tag dentro de otra (se puedeeeeeee!!!) en la tag de name quise poner que la referencia sea un título, pero puedo no poner nada, como hice en la referencia de ir abajo.

<html>

<head>
    <title>Ejemplo del tag A</title>
</head>

<body>
    <a name="inicio"><h1>Quiero que mi tag de referencia venga aca!</h1></a>
    <p>Les pongo un link para ir abajo en la página:</p>
    <a href="#abajo">ir abajo</a>
    <p> hola hola que tal, todo bien? Voy a poner muchos saltos de página de los que no me gusta usar para que noten en su explorador mi ejemplo</p>

<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>

    <p> Acá voy a hacer una referencia para que vayan a Google, si dan click, les va a abrir la ventana de Google, recuerden poner toda la URL para que vaya a la página externa!</p>

    <a href="http://www.google.com">Ir a Google</a>

    <p> Y acá abajo esta mi referencia del inicio</p>
    <a href="#inicio">Ir a inicio</a>
    <a name="abajo"></a>
    <!--Vieron que no puse nada para decir que esto era abajo?-->
</body>
</html>

Por favor! si no entienden algo, manden sus comentarios!

2 comentarios:

  1. mary!!! me queda asi!
    file:///C:/Users/pachi/Desktop/Primer%20html.html

    y prima no la puede abrir... explicacion???

    ResponderEliminar
    Respuestas
    1. Porque lo que estas generando es un archivo html local, o sea, que solo se te puede abrir en tu computadora.... cuando eso se publica en un sitio web es cuando se hace publico......

      Para que alguien mas lo pueda abrir, tenes que mandarle el txt con la extension html para que lo pueda abrir... capisce?

      Eliminar