Scribd Logo
Carica

Benvenuto in Scribd!

  • Enlaces en HTML

    Caricato da

    GerenciaVirtual
    119 visualizzazioni4 pagine
    Material elaborado por: Lic. Francisco Reaño Silva

    Copyright

    © © All Rights Reserved

    Formati disponibili

    PDF, TXT o leggi online da Scribd

    Hai trovato utile questo documento?

    Questo contenuto è inappropriato?

    Segnala questo documento
    Material elaborado por: Lic. Francisco Reaño Silva

    Copyright:

    © All Rights Reserved
    Scarica in formato PDF, TXT o leggi online su Scribd
    Segnala contenuti inappropriati
    119 visualizzazioni4 pagine

    Enlaces en HTML

    Caricato da

    GerenciaVirtual
    Material elaborado por: Lic. Francisco Reaño Silva

    Copyright:

    © All Rights Reserved
    Scarica in formato PDF, TXT o leggi online su Scribd
    Segnala contenuti inappropriati
    di 4

    GERENCIA VIRTUAL

    “Capacitación y asesoría a solo un click”

    Enlaces en HTML
    Los enlaces son uno de los elementos más encontrado con frecuencia en las páginas web, ellos nos
    permiten ir de una página web a otra con solo realizar un click.

    Enlaces HTML - Hiperenlaces


    Se puede definir que los enlaces o link en HTML son hiperenlaces o hyperlinks. Gracias a ellos tu
    puedes hacer un click en un enlace y prácticamente saltar a otro documento, cuando pasamos el
    puntero del mouse por sobre un enlace la imagen del puntero, generalmente una flecha, se
    transforma en una pequeña mano.
    Un enlace o link necesariamente no tiene que ser un texto, el puede ser una imagen o cualquier
    otro elemento HTML.

    En HTML los enlaces son definidos por la etiqueta <a>.

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf8">
    </head>
    <body>
    <h2> Enlaces - Links</h2>
    <p><a href="http://www.gerenciavirtual.com.mx/">Visita Nuestra Web</h2>
    </body>
    </html>

    Código 52.html

    Como pueden observar dentro de la etiqueta <a> está el atributo href, este se encarga de
    especificar la dirección de destino (http://www.gerenciavirtual.net.ve) del enlace. En este
    ejemplo el texto enlazado es la parte visible del enlace. Realizando un click sobre este, nos enviará
    a la dirección específica.

    Enlaces locales HTML


    El ejemplo anterior utiliza una dirección URL (Uniform Resource Locator) absoluta
    (http://www.gerenciavirtual.net.ve ), un enlace local (link en el mismo sitio web) se
    especifica con una dirección relativa (sin incluir http//www….).

    <a href="turoriales.html">Página de Tutoriales</a>

    Veamos un ejemplo
    GERENCIA VIRTUAL
    “Capacitación y asesoría a solo un click”

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf8">
    </head>
    <body>
    <h2> Enlaces locales</h2>
    <p><a href="16.html">Ver imagen con atributos de largo y ancho</h2>
    </body>
    </html>

    Código 53.html

    Colores en los Enlaces HTML


    Por defecto, un enlace aparece con las siguientes especificaciones:
     Enlace no visitado de color azul subrayado.
     Enlace visitado de color purpura y subrayado.
     Enlace activo de color rojo y subrayado.

    Se pueden realizar cambios definiéndolo en los estilos CSS:


    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf8">
    <style>
    a: link {
    color: blue;
    background-color: transparent;
    text decoration: none;
    }
    a: visited {
    color: pink;
    background-color: transparent;
    text decoration: none;
    }
    a: hover {
    color: red;
    background-color: transparent;
    text decoration: underline;
    }
    </style>
    </head>
    <body>
    <h2> Enlaces - Links</h2>
    <p><a href="http://www.gerenciavirtual.com.mx/">Visita Nuestra Web</h2>
    </body>
    </html>

    Código 54.html
    GERENCIA VIRTUAL
    “Capacitación y asesoría a solo un click”

    Enlaces HTML – El atributo “target”


    El atributo target especifica donde abrir el documento enlazado, pudiendo tener uno de los
    siguientes valores:
     _blank - Abre el documento enlazado en una ventana nueva.
     _self - Abre el documento enlazado en la misma ventana desde donde se le hizo click.
     _parent - Abre el documento enlazado en el “frame” (cuadro o marco).
     _top - - Abre el documento enlazado en la totalidad de la ventana.
     framenanme - Abre el documento enlazado en el “frame” nombrado.

    Si su página web esta circunscripta a un frame (ya en desuso) se puede salir de ello utilizando el
    atributo target=_”top” .

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf8">
    </head>
    <body>
    <h2> Enlaces locales</h2>
    <p><a href="16.html" target="_blank">Ver imagen con atributos de largo y ancho</h2>
    </body>
    </html>

    Código 55.html

    Pueden observar que desde la página 55.html se abre una ventana nueva con la página 16.html.

    Enlaces HTML – Imágenes como enlace


    Es bastante común el uso de imágenes como enlace.

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf8">
    </head>
    <body>
    <a href=" http://www.gerenciavirtual.com.mx/">
    <img src="imagenes/logo.jpg" alt="Gerencia Virtual" style="border:0;">
    </a>
    </body>
    </html>

    Código 56.html

    En la propiedad style incluimos el atributo border:0; para prevenir que navegadores como IE9
    y anteriores no coloquen un borde alrededor de la imagen cuando esta tiene un enlace asociado.
    GERENCIA VIRTUAL
    “Capacitación y asesoría a solo un click”

    Título en el enlace HTML


    El atributo title especifica información extra acerca del elemento, esta información tiende a
    mostrarse como un texto de información al colocar el puntero del mouse sobre la imagen.

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf8">
    </head>
    <body>
    <a href=" http://www.gerenciavirtual.com.mx/" title="Ir Gerencia Virtual">
    Visita nuestra Web</a>
    </body>
    </html>

    Código 57.html

    Enlaces HTML – Creando Bookmarks


    El bookmarks o marcador es utilizado para permitir a los lectores ir a partes específicas dentro del
    mismo documento, es decir es un enlace dentro del mismo documento.
    Para crear un enlace al bookmark es necesario crear primero el bookmark y luego agregar el
    enlace a este. Cuando el enlace es ejecutado por un click, la página hará un scroll, arriba o abajo,
    llevándonos al bookmark.

    Paso 1 crear el bookmark

    <h2 id="C4">Capítulo 2</h2>

    Paso 2 agregar el enlace al bookmark (ir al capítulo 2), dentro de la misma página

    <a href="#C4">Ir al Capítulo 2</h2>

    Este bookmark también sirve para ser enlazado desde otra página web.
    <a href="pagina_bookmark.html#C4">Ir al Capítulo 2 de la pagina bookmark</h2>

     El elemento <a> define un enlace.


     El atributo href define la dirección de destino del enlace.
     El atributo target establece donde abrir el documento enlazado.
     En el elemento <img> dentro de la etiqueta <a> permite usar la imagen como enlace.
     El atributo id establece un bookmark en una página (id=”valor”).
     El atributo href establece el enlace al bookmark (href=”#valor”).

    Potrebbero piacerti anche