Entendido.

Este sitio utiliza cookies para analizar la navegación. Si continúa navegando se entiende que acepta su uso. Ver más detalles.";

Logo

Aprende Web

Crea y diseña tus sitios en la Web.

Mi primera web

Aprender a hacer una sencilla web paso a paso partiendo de cero.


Y ahora tambien aprende a programar en C++ con Aprende Web C++

logo rss RSS. Suscribir canal.

Buscar en Aprende Web

Traducir página

Visita nuestro blog:

bolg.aprende-web.net

y entérate de las novedades o deja un comentario.

Dudas y sugerencias:

aprendeweb@aprende-web.net





Sobre ésta página

Ültima modificación: 29-01-2016.

Visitas este mes: 41

Visitas el mes pasado: 71

logo

Donativos

Si este sitio te parece interesante puedes contribuir con una pequeña aportación.




2. No sólo texto (II)

2.2 Enlaces externos

Paso 5

logo miweb

Qué son los enlaces

Un enlace es un texto que nos lleva a otra a otro sitio de la web. El usuario no tiene más que hacer click encima del texto para que le aparezca otra página en su navegador.

Los enlaces pueden ser de varios tipos, dependiendo del lugar al que nos lleven. Si nos llevan a una página de otro sitio web, es un enlace externo. Si nos lleva a otra página del mismo sitio que estamos viendo, es un enlace local. Por último si nos lleva a un lugar dentro de la misma página que estamos viendo es un enlace interno.

Los enlaces se distinguen del resto del texto porque suelen ser de diferente color. De forma predeterminada en HTML aparecen en color azul y subrayados. Además cuando pasamos el ratón por encima el cursor cambia de forma, y aparece como una mano con un dedo señalando el texto. Esto se puede cambiar, tal como veremos más adelante.Sin embargo siempre van destacados sobre el resto del texto para que el usuario sepa fácilmente que está ante un enlace.

Etiqueta de enlace

Para insertar un enlace utilizaremos una etiqueta de enlace, la cual, en su forma básica es así:

<a href="ruta_del_enlace">Texto del enlace</a>

La etiqueta <a> ... </a> Sirve para insertar en la página cualquier tipo de enlace. Si queremos que el enlace sea efectivo y lleve a algún lugar debemos poner siempre el atributo href="ruta" en donde su valor ("ruta") debe ser una dirección que nos lleve al lugar que queremos abrir con el enlace.

Donde hemos puesto "Texto del enlace" pondremos el texto que queremos que se vea en la página, y sobre el cual el usuario debe hacer click para ir a la página enlazada.

La ruta del enlace

Es por lo tanto fundamental para que el enlace funcione escribir bien la ruta en el valor del atributo href. Para enlaces externos (a otra página de otro sitio web) La ruta es la misma que la dirección de la página web.

La dirección de cualquier página la encontramos siempre en la barra de direcciones del navegador al abrir la página. Esta barra está en la parte superior del navegador e indica el nombre de la página. Por lo tanto para obtener la ruta hacia cualquier página basta con copiar y pegar la dirección que encontramos en la barra de direcciones.

Por ejemplo si queremos poner un enlace a Wikipedia en nuestra página, abrimos primero la página de Wikipedia, y copiamos la dirección (botón derecho, copiar), después en nuestra página insertamos un enlace con la ruta ahi indicada. El texto que pondremos en el HTML será el siguiente:

<a href="http://es.wikipedia.org/wiki/Wikipedia:Portada">Ir a Wikipedia</a>

Todas las direcciones web a páginas externas empiezan por http:// (o https://). Este comienzo debe ponerse también al escribir la ruta, ya que es lo que indica que estamos enlazando a una página externa.

Insertar enlaces en nuestra página

Ahora que ya sabemos cómo poner enlaces pondremos varios enlaces en nuestra página a otros sitios web.

Nosotros queremos, ademas, que al abrir la página del enlace, ésta se abra en una nueva pestaña del navegador, de manera que se conserve la pestaña en la que está nuestra página. Para ello a la etiqueta de enlace le añadiremos también el atributo target="_blank", por ejemplo:

<a href="http://es.wikipedia.org/wiki/Wikipedia:Portada" target="_blank">Ir a Wikipedia</a>

Abrimos el archivo index.html de la carpeta raíz de nuestro sitio y lo modificamos (aquí ponemos en color azul el nuevo texto que insertamos):

<html>
  <head>
    <title>Mi primera web</title>
  </head>
  <body>
    <img src="../objetos/logo.gif" alt="Logo de la página" width="15%" />
    <h1>Mi Primera Web</h1>	
    <h2>Aprendiendo a construir un sitio Web</h2>
    <p>Hola, estoy aprendiendo a hacer Webs y este es mi primer párrafo, 
       no es muy largo, pero es un párrafo.</p>
    <p>Este ya es mi segundo párrafo. Para construir un sitio web como éste, 
       hay que usar el lenguaje HTML. El HTML es un lenguaje de etiquetas.
       Con las etiquetas indicamos qué tipo de contenido insertamos en la página.</p>
    <h3>Los enlaces</h3>
    <p>Estoy aprendiendo a poner enlaces en mi página. Aquí he puesto unos enlaces 
       a unos sitios muy populares.</p>
    <p>Pulsa en los siguientes enlaces para ir a las siguientes páginas.</p>
    <p><a href="http://es.wikipedia.org" target="_blank">Consultar Wikipedia</a></p>
    <p><a href="https://www.youtube.com" target="_blank">Videos en You Tube</a></p>
    <p><a href="http://elpais.com" target="_blank">Noticias con el País</a></p>
 </body>
</html>

Ahora la página inicial de nuestra web (archivo index.html) la veremos como en el siguiente enlace:

Puedes comprobar el funcionamiento de los enlaces que hemos puesto en la página, y ver cómo al pulsar en ellos se abre una nueva pestaña con la página indicada.




En el siguiente paso vamos a insertar más enlaces, pero esta vez sobre imágenes.

Enlaces en imágenes




Mi primera web

Anterior siguiente ... Siguiente siguiente


imprimir esta página

Página creada por ANYELGUTI.

Sugerencias: aprendeweb@aprende-web.net. Envia un manda un correo

Visita nuestro blog par saber en qué estamos trabajando: Aprende Web Blog

Más sobre anyelguti en http://anyelguti.16mb.com