La capacidad de crear un enlace en un documento que lo lleve a otro documento, quizás en una red en todo el mundo, es posiblemente la razón más importante por la que se inventó la World Wide Web. Estos enlaces, llamados hipervínculos, son la "H" en HTML (HyperText Markup Language). Sin hipervínculos, la web no sería muy útil. No habría motores de búsqueda, redes sociales ni anuncios publicitarios (está bien, la mayoría de nosotros podría soportar verlos funcionar).
Cuando cree sus propias páginas web, querrá crear hipervínculos y KompoZer tiene herramientas que facilitan la adición de enlaces de cualquier tipo. La página de muestra que se muestra en este tutorial contendrá enlaces a otros sitios web en cuatro categorías, a otras partes de la misma página web y para iniciar un mensaje de correo electrónico. Comenzaré con un encabezado y cuatro
H3 Encabezados para cada categoría. En la siguiente página añadiremos algunos enlaces. 01 de 05
Creando un hipervínculo con KompoZer
Se accede a las herramientas de hipervínculo de KompoZer haciendo clic en el botón Vincular en la barra de herramientas. Para crear un hipervínculo:
- Coloque el cursor en la página donde desea que aparezca su hipervínculo.
- Haga clic en el botón Enlace en la barra de herramientas. Aparecerá el cuadro de diálogo Propiedades del enlace.
- El primer campo que debe completar es el cuadro Enlace de texto. Escriba el texto que desea que aparezca en la página de su hipervínculo.
- El segundo campo que debe completar es el cuadro Ubicación del enlace. Escriba la URL de la página que su hipervínculo llevará al usuario cuando se haga clic. Es una buena idea copiar y pegar la URL desde la barra de direcciones de su navegador. Es mucho menos probable que cometa un error de esta manera y sabe, al menos en el momento de la creación de su enlace, que la página está viva y que el enlace no está roto.
- Haga clic en Aceptar y el cuadro de diálogo Vincular propiedades se cerrará. Tu enlace ahora aparecerá en tu página.
En la mayoría de los navegadores, el hipervínculo aparecerá en texto azul subrayado de forma predeterminada. Puede aplicar sus propios estilos a los hipervínculos con KompoZer, pero por ahora, nos quedaremos con el hipervínculo básico. Es una buena idea obtener una vista previa de su página en un navegador web y hacer clic en los enlaces para asegurarse de que funcionan.
02 de 05Creando un enlace de anclaje con KompoZer
Existe otro tipo de hipervínculo que lo lleva a otra parte de la misma página web cuando se hace clic. Este tipo de hipervínculo se denomina enlace de ancla, y el área de la página a la que se dirige cuando hace clic en ese enlace se denomina ancla. Si alguna vez ha utilizado el enlace "volver al principio" en la parte inferior de una página web, está haciendo clic en un enlace a un ancla.
KompoZer le permite crear anclajes con los que puede enlazar utilizando la herramienta Ancla en la barra de herramientas.
- Haga clic en el área de su página donde desea un ancla. Es decir, donde desea que se lleve al visor de páginas cuando se hace clic en un enlace de anclaje. Para este ejemplo, hice clic justo antes de la "F" en el encabezado de Música favorita.
- Haga clic en el botón Ancla en la barra de herramientas. Aparece el cuadro de diálogo Propiedades de anclaje con nombre.
- Cada ancla en una página necesita un nombre único. Para este ancla, utilicé el nombre "música".
- Haga clic en Aceptar, y debería ver, y el símbolo de ancla aparece en el lugar donde deseaba que estuviera el ancla. Este símbolo no aparecerá en su página web, solo es cómo KompoZer le muestra dónde están sus anclas.
- Repita el procedimiento para cualquier otra área de la página donde desee que los usuarios puedan saltar. Si tiene una gran cantidad de texto en la página separados por encabezados o algún otro divisor lógico, los anclajes son una forma fácil de navegar por una página.
A continuación, crearemos los enlaces que llevan al lector a los anclajes que usted creó.
03 de 05Creando la navegación de la página con KompoZer
Ahora que tiene anclajes en su página, creemos los enlaces que se usarán como accesos directos a esos anclajes. Para este tutorial, creé una tabla de 1 fila y 4 columnas debajo del encabezado superior de la página. Cada celda de la tabla contiene el mismo texto que uno de los encabezados de categoría que se utilizan para separar los enlaces en la página. Haremos que el texto en cada una de estas celdas de la tabla sea un enlace al ancla correspondiente.
04 de 05Creando hipervínculos a anclas con KompoZer
Ahora que tenemos nuestros anclajes en su lugar y el texto que usaremos para la navegación de la página ingresados, podemos convertir esos fragmentos de texto sin formato en enlaces. Volveremos a utilizar el botón Vincular, pero esta vez funcionará de forma un poco diferente.
- Seleccione el texto que desea convertir en un enlace. En este ejemplo, seleccioné el texto "Música favorita" que se encuentra en la primera celda de la tabla en la parte superior de la página.
- Haga clic en el botón Enlace en la barra de herramientas. Se abrirá el cuadro de diálogo Propiedades del enlace.
- En este caso, seleccionamos el texto antes de hacer clic en el botón Vincular, por lo que la sección Enlace de texto de la ventana ya está completa y no se puede editar. Haga clic en la flecha hacia abajo en la sección Ubicación del enlace. Verá una lista de los anclajes que creó en los pasos anteriores. Para este ejemplo, selecciono el # ancla musical.
- Haga clic en Aceptar. El texto "Música favorita" en la barra de navegación se convierte en un enlace que hará que el espectador salte a esa sección de la página cuando se haga clic.
Notará que cada ancla nombrada en el menú desplegable tiene un signo "#" delante de él. Así es como crearías un enlace a un ancla en HTML. La “#” frente al nombre del ancla le dice al navegador que este enlace lo lleva a otro lugar en la misma página.
05 de 05Creando un hipervínculo de una imagen con KompoZer
¿Sabías que puedes crear un enlace a partir de imágenes y texto? KompoZer le permite hacer esto con solo unos pocos clics. Aquí he insertado un pequeño icono de imagen que muestra una flecha apuntando hacia arriba y el texto "TOP" en la parte inferior de la página. Voy a usar esta imagen como un enlace para volver a la parte superior de la página.
- Haga clic con el botón derecho en una imagen y elija Propiedades de imagen y enlace en la etiqueta de contexto. Se abrirá el cuadro de diálogo Propiedades de la imagen.
- En la pestaña Ubicación, verá el nombre de archivo de la imagen y una vista en miniatura ya completada. Debe ingresar algún texto en el cuadro de texto Alternativo. Esto es lo que aparece cuando mueve el mouse sobre la imagen, y también lo que lee un lector de pantalla cuando una persona con discapacidad visual lee la página web.
- Haga clic en la pestaña Enlace. Aquí puede elegir un ancla del menú, tal como hicimos con los enlaces de ancla. De hecho, esta imagen se está utilizando como enlace de anclaje. Seleccioné el #Links_Of_Interest anchor que nos llevará de vuelta a la cima.
- Haga clic en Aceptar. La imagen ahora enlaza de nuevo a la parte superior de la página cuando se hace clic.
