[FUNDAMENTOS DE PROGRAMACION WEB] HTML

VÍNCULOS E HIPERVÍNCULOS
Como en toda página Web siempre es necesario colocar vínculos, que es otra cosa ir a
algún lugar ya sea a nuestra misma página, como también a nuestro mismo sitio, aunque
también lo podemos realizar hacia vínculos externos, es decir, mostrar páginas como de
Google, Yahoo, Hi5, etc; a su vez mostrarlo en una nueva página (blank), en la misma
página (self), etc.

6.1 ¿Cómo crear vínculos externos (hipervínculos)?

Para crear vínculos externos debemos saber de antemano la dirección URL, veamos la siguiente imagen para que se
familiarice con esta palabra

Por ejemplo queremos mostrar una lista para cargar algunas páginas externas.

Si deseamos que no sea un texto sino una imagen, también podemos cambiarlo, el código que genera dicho resultado
será:

DOCENTE: Salinas Encinas, Aldo salinas282003@hotmail.com Página 1

 [FUNDAMENTOS DE PROGRAMACION WEB] HTML

6.2 Creando vínculos internos

Los vínculos internos, se desarrollan en el mismo sitio, por ejemplo veamos:

Es decir seleccionamos el texto y desde la mira buscamos la página a cargar, además elegimos el destino.

DOCENTE: Salinas Encinas, Aldo salinas282003@hotmail.com Página 2

 [FUNDAMENTOS DE PROGRAMACION WEB] HTML

Al igual podemos realizarlo para otras páginas, aunque también hemos colocado otros documentos que podemos
cargar, igualmente realizamos el mismo paso anterior

El resultado se verá cuando lo ejecute (F12)

El código que genera dicho resultado será:

DOCENTE: Salinas Encinas, Aldo salinas282003@hotmail.com Página 3

 [FUNDAMENTOS DE PROGRAMACION WEB] HTML

Note que el destino target ha sido colocada a 2 de ellos, cuando no hemos elegido el destino por defecto en self, pero
tenemos algunos destinos más:

6.3 Vínculos dentro de un documento

Es casi frecuente encontrar páginas Web con bastante información, hay algunas páginas que la información lo
presentan en varias páginas, en cambio hay otras que la información lo presentan de manera amplia hacia abajo.

Para poder realizar dichas páginas, debemos utilizar (ancla) ahora veamos cómo se utiliza:

1.- Crearemos un diseño para ver mejor su uso.

2.- Definamos el texto que servirá de vínculo.
3.- Definamos la posición o punto de anclaje a donde llegara nuestro vínculo interno.
4.- Siempre es necesario colocar un vínculo para regresar.

DOCENTE: Salinas Encinas, Aldo salinas282003@hotmail.com Página 4

 [FUNDAMENTOS DE PROGRAMACION WEB] HTML

DOCENTE: Salinas Encinas, Aldo salinas282003@hotmail.com Página 5

 [FUNDAMENTOS DE PROGRAMACION WEB] HTML

Ahora veamos el código que genera esta página

DOCENTE: Salinas Encinas, Aldo salinas282003@hotmail.com Página 6

 [FUNDAMENTOS DE PROGRAMACION WEB] HTML

Ahora mostraremos las anclas, para nos ubicamos por ejemplo al lado de Curriculum Vitae y hacemos clic en ,
aparecerá el siguiente cuadro:

Igualmente vamos a colocar a las siguientes 3 links, veamos:

DOCENTE: Salinas Encinas, Aldo salinas282003@hotmail.com Página 7

 [FUNDAMENTOS DE PROGRAMACION WEB] HTML

Ahora seleccionamos el texto que servirá de vínculo y en el panel propiedades colocaremos en punto de anclaje

De manera análoga para los siguientes:

DOCENTE: Salinas Encinas, Aldo salinas282003@hotmail.com Página 8

 [FUNDAMENTOS DE PROGRAMACION WEB] HTML

Usted puede comprobar que ya funciona haciendo clic en cada uno de los enlaces que aparecen al inicio, pero ahora
falta que regresen al punto inicial, para ello haremos lo mismo, es decir, vamos a crear un punto de anclaje
denominado inicio, veamos:

Ahora ya para finalizar, debemos colocar el enlace para en el botón (imagen regresar), para regrese al inicio,
repitamos la misma idea anterior.

DOCENTE: Salinas Encinas, Aldo salinas282003@hotmail.com Página 9

 [FUNDAMENTOS DE PROGRAMACION WEB] HTML

De igual manera para todos los botones, suerte si ya terminaste entonces debe funcionar….
Note el código que se genero al realizar el enlace

6.4 Aplicando estilos a los vínculos

Hemos ya trabajado los vínculos y los hipervínculos, llegando a crear páginas muy interesantes, es obvio que con una
cuota de su propia inspiración y habilidad, puede crear diseños mucho más interesantes, aunque tenga presente que
todavía nos falta mucho por aprender y allí podremos crear diseños más complejos.

Pero todavía podemos agregarle algunos estilos a nuestro diseño para realzar un poco más nuestro diseño de nuestra
página Web. Para poder aplicarle estilos solo debemos hacer clic en:

Se mostrara la siguiente ventana y hacemos clic en:

Tipo de fuente para los vínculos

Tamaño de la fuente para los vínculos

Si deseamos que los vínculos

aparezcan siempre subrayados
no hacemos nada, por el
contrario también podemos
cambiarlo aquí.

DOCENTE: Salinas Encinas, Aldo salinas282003@hotmail.com Página 10

 [FUNDAMENTOS DE PROGRAMACION WEB] HTML

Explicaremos ahora los 4 estados de los vínculos.

Color del vínculo, es el color que se presentara por defecto al cargar la página.

Vínculos de sustitución, es el color que se presentara cuando pasamos el cursor por encima del vínculo.

Vínculos de sustitución, es el color que se presentara cuando hayamos hecho clic, es decir cuando ya ha sido visitado.

Vínculos activos, es el color que se presentara cuando estamos en dicho vínculo, es decir, cuando el vínculo es activo.

Ahora veamos el código que se acaba de generar.

Vínculo normal

Vínculo visitado

Vínculo de sustitución

Vínculo activo

Ahora puede hacer la prueba, pero si queremos realzar un poco mas nuestro diseño, podemos agregar las siguientes
líneas de código, veamos:

DOCENTE: Salinas Encinas, Aldo salinas282003@hotmail.com Página 11

 [FUNDAMENTOS DE PROGRAMACION WEB] HTML

El resultado será.

6.5 Cambiar el icono de nuestro navegador

Aunque parece un poco complicado, no es cierto, pero debemos tener presente que hay que preparar el icono para
colocar allí (sugerencia 20x20), dicho icono puede ser el logo de una empresa.

Para colocar un icono en tu página web e indicar su ruta con la etiqueta link entre las etiquetas de cabecera head.
Veamos un ejemplo con una imagen en formato png:

<link rel="icon" type="image/png" href="/imagen/mi_icono.png" />

Dependiendo del formato, el atributo “type” cambiará:

 Formato png: image/png

 Formato gif: image/gif
 Formato jpeg (extension jpg o jpeg): image/jpeg

Si tienes un icono que no respeta los estándares, el atributo “rel” también cambia:
<link rel="shortcut icon" type="image/x-icon" href="/imagen/icon1.ico" />

DOCENTE: Salinas Encinas, Aldo salinas282003@hotmail.com Página 12

 [FUNDAMENTOS DE PROGRAMACION WEB] HTML

También se puede poner un archivo icono.ico en la raíz de la página para que algunos navegadores lo utilicen
automáticamente, pero esto no es estándar.

El resultado será:

DOCENTE: Salinas Encinas, Aldo salinas282003@hotmail.com Página 13