Hipervinculos o Enlaces entre paginas -Tutor xhtml / css

Después de un tiempo inactivo con respecto al Tutor, vuelvo con todo. Para terminar en el lapso de los próximos 7 dias toda la parte de conceptos básicos, para luego comenzar con el maquetado completo de paginas.

Ahora que básicamente ya sabemos crear paginas web de texto y modificarlas en forma parcial lo que nos interesa por el momento es ¿como llamar de una pagina a otra o movernos dentro de las mismas haciendo clics?

Bueno la respuesta a ese problema son los HIPERVINCULOS.

Los hipervinculos son otros de los elementos web mas importantes dentro de una pagina, es decir ¿de que serviria la red si no podemos saltar de pagina en pagina?

La sintaxis basica de un hipervinculo es las siguiente:

Bueno visto esto crearemos 3 archivos html, y ya que estoy estudiando analisis matematico utilizare la informacion basica que hay en el departamento de matematica de mi facultad para crear una mini pagina sobre la materia, donde incluiremos informacion de fechas de parciales, finales y linkearemos una pagina con el programa de la materia y otra con la bibliografia optativa:

Aquí va la pagina de el programa, la llamaremos programa-de-analisis-I.html

Ahora la pagina de la bibliografia:

Y por ultimo nuestra pagina principal, index.html. Este nombre es especial, porque todas las paginas webs deben o al menos deberian tener una pagina index.html. Esto le indica al servidor que mostrar cuando uno instancia una carpeta, es decir si por ejemplo alguien entra a www.blogdelaweb.com.ar/miproyecto (la web no existe es solo una suposición), siendo miproyercto una carpeta, lo que el servidor nos mostrara si existe sera en realidad www.blogdelaweb.com.ar/miproyecto/index.html o en su defecto www.blogdelaweb.com.ar/miproyecto/index.php. Por ello hice un parentesis antes de crear la pagina index.html:

Estamos en condiciones de probar nuestra primera pagina

¡Puedes abrir index.html!

Bueno ahora como te habras dado cuenta no existe forma de saltar de pagina en pagina a menos que habramos las paginas de una o sepamos la direccion web y la coloquemos manualemente en la barra de direcciones. Lo que habra que hacer es buscar un lugar en que cada pagina para colocar los links correspondientes a cada pagina. Utilizando el primer codigo que puse en esta leccion. Yo lo hare solo en el index, y ustedes deberan colocar un enlace de vuelta al index en las distintas paginas en el lugar que mas les guste.

Aqui va el index con los links incluidos y sin trampas xD:

Y ahora si puedes probarlos

Enlaces Relativos
Una aclaracion importante con respecto a los vínculos es que generalmente si son de una misma web conviene darlos de forma relativa, como lo he hecho yo en ejemplo. Es decir cuando coloque su dirección en el href=”” no coloque toda la direccion, por el simple hecho que no tengo ni idea en que disco de su maquina ejecutan el archivo, ni en que carpatas y subcarpetas. Pero si se o al menos supongo que estan colocando todos los archivos en la misma carpetas, entonces de esa forma no hace falta llamar a ningun otro lado. Simplemente llamamos al nombre del archivo.

Llamando a un enlace que esta dentro de otra carpeta
Si nosotros tenemos por ejemplo nuestro index.html en una carpeta llamada “practico”, y dentro de esta carpeta tenemos otra carpeta llamada “programa” y queremos llamar a el archivo dentro de programa que se llama “analisis-matematico-I.html” nuestro enlace seria:

Eso era algo facil de suponer, y volver a la carpeta anterior se lo realiza con la instruccion .. (dos puntos). Es decir si estamos en el archivo “/practico/programa/analisis-matematico-I.html” y queremos volver a “/practico/bibliografia.html” nuestro codigo seria:

Si no colocas el http://, pasa esto: clic aquí para ver que pasa

Bueno Hemos aprendido a manejar vinculos de manera basica, existen otras opciones y cosas que nos permiten hacer los vinculos, como abrir la pagina automaticamente en una nueva ventana, vinculos dentro de una misma paginas, tambien llamados anclas, y tampoco hemos visto como cambiar ese color azul feo, pero paciencia porque todo llega.

Los espero en la proxima leccion,

Siguiente Lección >>

>> Indice de Contenido <<

30 comments

  1. dacho

    |Author

    Gracias… Buenisimo que te haya gustado! Mañana estara lista la proxima leccion….

  2. adriana-FIUBA

    hola,queria hacerte una consulta

    cuando quiero probar los hipervinculos estos no se ven,pero al posicionarme en el lugar donde se encuentran puedo vincularme
    como hago para que se vean??

    puede ser que este fallando porque le estoy poniendo color al fondo?

    desde ya gracias

  3. Pingback: Elementos para el armado de estructuras mas complejas | Blog de la Web

  4. dmozop

    Hola,

    hoy empece el curso y ya voy por esta lección, me gusta mucho la forma sencilla y practica como explicas las cosas.

    Un saludo desde Colombia.

  5. ivana

    no salio copiado:
    !– Archivo: “programa-de-analisis-I.html” –>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http:/

    eso me referia.
    che y otra cosa,
    cuando queres esconder un texto veo que pones el <!
    pero a veces pones <–
    los guiones son para algo especial?

  6. ivana

    no entendi lo de que siempre hay que tener un index.html :(
    no entendi que es un index. una pagina? un archivo?
    porque deberia salir exrito en el navegador al final de cada direccion, con subdominio? como http://www.blabla.com/subblabla/index.html
    ??????????
    no entiendo es eindex ni de donde viene, ni hacia donde ya!

  7. ivana

    bue, no sale el codigo!! pruebo una vez mas, borrate dos todos estos mensajitos!
    (<)a href="http:www.blabla.com/articulos (cierro con el < invertido)articulos de mi web ( cierro con / y dps el a)

    espero que esta vez se lea!

  8. dacho

    |Author

    Hola Ivana muchas gracias por tus comentarios y criticas, tratare de responder todo:

    el doctype de la pagina nos permite informarle a los exploradores (IE, Firefox, chrome, etc) que clase de contenido es, es decir si es html estricto o no, la version del HTML, el idioma de la pagina, etc, parametros que a veces los navegadores detectan automaticamente y otras veces no por eso es importante colocarlo, es una simple linea!.

    con respecto a < ! -- (pero junto) es como se abren los comentarios en HTML, Comentarios son basicamente anotaciones que colocamos en los codigos para recordar ciertas cosas, si quieres colocar comentarios los abres con que es la forma de cerrarlo, el motivo de utilzar comentarios de esta forma es simplemente porque los que crearon el html eligieron esa forma para los comentarios!

    con respecto a los enlaces no logre entender cual es la pregunta, si aun no lo entiendes te pido vuelvas a consultar!… Saludos!

  9. Matt

    Hola tengo el siguiente problema.
    Cree los 3 archivos y los tengo en el escritorio (Análisis, Bibliografia, Index)
    Programa de la materia
    Bibliografia Optativa
    este es el código que tengo ahora cuando abro mi index y hago click en cualquiera de los 2 links me sale el siguiente error: Error 6 (net::ERR_FILE_NOT_FOUND): No se ha podido encontrar el archivo o el directorio.
    Muchas gracias por el tutorial hoy empece y me parece muy practico, espero que me sirva para poder empezar a diseñar algo y con mas practica poder trabajar de esto mientras estudio (estudio Ingeniería en sistemas de información), no es para vivir de esto si no para ayudar un poco en el tema de los gastos en mi familia.
    Nuevamente gracias y saludos.

  10. Matt

    href=”Análisis1.html”>Programa de la materia

    href=”Bibliografia.html”>Bibliografia Optativa
    ya lo acomode para que no salga el link xD perdón y mirando mi comentario anterior:”Cree los 3 archivos y los tengo en el escritorio (Análisis, Bibliografia, Index)” es Análisis1.

  11. dacho

    |Author

    Hola Matt,

    Si colocas las dirección Análisis1.html tenes que tener cuidado con las tildes!!! las direcciones web tienen problemas, nunca utilizar tildes en direcciones webs y en lo posible evitar espacios.

    Supuestamente debería funcionar, pero para evitar problemas te recomiendo que instales un servidor web y trabajes ahi. En el dia de mañana hago un post de como hacer eso, de esa forma no habrá mas problemas con muchas cosas!

    Saludos y mañana te dejo el post y a todos los lectores para que hagan trabajar su pc como servidor y se solucionen los problemas!

  12. fedko

    como exactamente hago para q dentro de la pagina del index , haciendo click en biblioteca , entre directamente hacia ahi!? no me sale

  13. dacho

    |Author

    Hola fedko, Supongo que te referis desde el index.html a la pagina bibliografia.html

    Fijate si los nombres coinciden los enlaces son por ejemplo (estando en la misma carpeta) si vas a colocar el enlace en index.html para ir a bibliografia.html seria asi:

    [code]<a href="bibliografia.html" Title="Bibliografía de Análisis">Bibliografía</a>[/code]

    Lo que hará eso es buscar la pagina bibliografia.html en la misma carpeta que esta index.html

    Como precauciones recomiendo escribir nombres de direcciones siempre en minúsculas y evitando signos de puntuación y espacios.

    Espero haya solucionado tu problema, cualquier cosa vuelve a preguntar!

    Saludos, Damian.

  14. Ricardo Gutierrez

    Que gran tutorial, de verdad que me esta enseñando mucho y espero pronto tener una web igual de bonita que la tuya.
    tengo una duda, no entendí porque es tan importante tener una pagina index.html.
    así se debe de llamar siempre la pagina principal? y porque?

  15. dacho

    |Author

    Hola Ricardo, Muchas gracias me pone muy contento que lo que escribí les sirva. Esta pregunta que me haces la tendre en cuenta para la revision que tengo planeada hacer al curso.

    En los servidores el index.html o index.php o lo que sea es el archivo que se muestra por defecto en la carpeta. Por ejemplo:

    Si tu sitio es http://www.mipagina.com, cuando subas los archivos al servidor que la aloja tendras una carpeta que se llama (generalmente) public_html. Dentro de la misma puedes colocar los archivos y/o carpetas que necesita tu sitio.

    Esa es la carpeta publica del servidor, entonces al ingresar un usuario a http://www.mipagina.com, el servidor automaticamente buscara un archivo que se llame index.html o index.php para mostrar. Se puede poner otro nombre y utilizar un archivo .htaccess para direccionar a la pagina que necesitas pero es mas complicado.

    Por otra parte, si creas un subdirectorio que sea por ejemplo http://www.mipagina.com/fotos, al colocar esa direccion el servidor entra a la carpeta fotos y busca el archivo index.html o index.php que haya dentro de la carpeta para mostrar al usuario.

    Espero haya sido claro al explicar, no dispongo de mucho tiempo para hacer una redaccion limpia.

    Saludos y te espero por el blog! :)

  16. Ricardo Gutierrez

    Muchas gracias por responder tan rápido y por tu explicación, ahora me quedo bastante claro.
    Oye muchas felicidades por tu blog, esta muy bueno e interesante y desde que lo leí por primera vez se volvió en uno de mis favoritos. no estaría mal que luego hicieras un curso de HTML5.
    en fin, seguiré adelante con el curso XD

  17. sofia

    gracias por este tutorial! siempre quise aprender html y css y esto me sirvió muchísimo
    todavía tengo que seguir leyendo :)
    mil gracias!

  18. Ferna

    Grandisimo dacho, por ahora encuentro todo muy claro y consiso!
    Solo tengo una duda, espero no haberme salteado nada, pero estas lineas no entiendo que siginifican:

    Sera que ienen algo que ver con los motores de busqueda?? o eso lo explicas mas adelante?

    Disculpa la molestia, y muchas gracias!

  19. Ferna

    Hui no se copiaron las dos lineas que te mencione, no se que paso xD
    estas dos son, que estan al inicio del practico:

  20. Ferna

    html xmlns=”http://www.w3.org/1999/xhrml” xml:lang=”es” lang=”es”

    meta http-equiv=”content-type” content=”text/html; charset=UTF-8″ /

  21. dacho

    |Author

    Hola Ferna, te comento que la primera linea indica a los navegadores web 2 cosas:

    El lenguaje de la pagina de hecho acabo de ver que esta lang=”es” que no iria.

    Y la direccion de las deficiones de los estandares que se utilizan para la estructura del codigo. De todas formas es algo que no es necesario, no te se justificar porque va exactamente, pero lo recomiendan en la W3C, por lo que es recomendable ponerlo ya que no cuesta nada.

    Por otra parte la segunda linea si te la se explicar. Se trata de indicarle a los navegadores webs que tipo de Codificacion de caracteres se utilizan. De esta forma evitamos errores cuando se tratan de caracteres como por ejemplo la ñ en caso de que estes en una computadora con el idioma en ingles (no existe la ñ en ingles), en caso de no aclarlo es posible que en lugar de la ñ vean algun caracter raro.

    Bueno me diste la idea de agregar todo esto al curso asi que seguramente lo voy a hacer proximamente!… Espero haya aclarado un poco, te recomiendo ver esto y esto.

    Saludos!

  22. Ferna

    Exelente Dacho maestro!

    Muy claro, y ya estoy entrando a “eso” y “eso” para ver de que se trata, y sigo adelante con la leccion 4, insertar imagenes, justo lo que necesitaba :D

    Muchisimas gracias !!
    Saludos.

  23. Edgar

    Hola, yo tengo una pregunta! a mi me sale el mismo error: Error 6 (net::ERR_FILE_NOT_FOUND): No se ha podido encontrar el archivo o el directorio.

    pero ese error me empezo a salir solamente cuando lo subi a FTP, luego en el FTP abro el index y me sale, pero luego todos los hipervinculos hacia las otras paginas ya no las encuentra! :S que puede ser?
    ya intente todo!! :(
    sera porque esta el index y las otras paginas estan en subcarpetas dentro de la carpeta principal. Ejemplo: Carpeta principal (tarea): Index.html luego hay otras tres carpetas y dentro de esas carpetas estan las demas paginas de los links.

    si abro la pagina web sin utilizar el FTP, todo funciona, todo sale excelente, lindo y perfecto. Pero al subirlo al FTP todo se arruina, y no se porque??!!!

  24. dacho

    |Author

    Hola Edgar, realmente no estoy seguro de donde puede estar el error exactamente. La mayor posibilidad que creo que puede haber es que estés trabajando en windows y tu servidor sea linux.

    Esto te lo digo porque linux es Case Sensitive, es decir no es lo mismo Index.html que index.html…. El sistema es sensible a mayúsculas y minúsculas, verifica que los hipervinculos sean al nombre exacto del archivo. Poner los nombres de carpetas, subcarpetas y archivos siempre en minuscula es una buena practica para evitar errores.

    Si te funciona bien con la misma extructura de archivos en tu maquina y mal en el servidor creo que es esta la solucion, si no te funciona avisame y vemos como hacer….

    Saludosss!

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos necesarios están marcados *

Puedes usar las siguientes etiquetas y atributos HTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">