Entendido.

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

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++

Manuales para la creación y diseño de páginas web

RSS. Suscribir canal.

Este obra está bajo una licencia de Creative Commons Reconocimiento-NoComercial 4.0 Internacional.

4. Lista con enlaces (III)

4.3 Enlaces externos

Insertar un enlace

Para insertar un enlace a otra página en código HTML debemos escribir la siguiente etiqueta:

<a href="nombre_de_la_pagina"> Texto_del_enlace </a>

Vamos a a explicar las distintas partes de este código:

• a : Es el nombre de la etiqueta. Todos los enlaces, bien sea a otra página, a otra parte de la misma página, a una dirección de correo, etc. empiezan así. (<a ... )
• href= este atributo indica que hay que buscar fuera del propio archivo, es pues necesario para todos los enlaces a otras páginas, ya sean internas (de nuestro propio sitio) o externas (de otras Webs).
• "nombre_de_la_pagina" : Lo que hay que poner aquí entre comillas, es el nombre de la página Web que queremos enlazar, tal y como viene en la barra superior del navegador. Em los enlaces a otras páginas Web hay que poner también las letras http:// que aparecen al principio de toda dirección de página Web.
• Texto_del_enlace : Escribiremos aquí el texto que queremos que aparezca en nuestra Web, para que al pulsar sobre él sirva de enlace.También se puede insertar una pequeña imagen (utilizando la etiqueta para insertar imágenes que hemos visto).
• </a> : Es el cierre de la etiqueta de enlace. Lo que se escriba a partir de aquí ya no forma parte del enlace.

Ahora vamos a insertar enlaces en nuestra Web. para ello abre el archivo index.html con el bloc de notas, y busca la línea donde pone

<li>El primer buscador más usado es Google: www.google.com. </li>

borra la parte donde pone www.google.com., y la reemplazas por el siguiente texto: <a href="http://www.google.com"> www.google.com. </a>

La línea de texto quedará ahora así:(el texto en azul es el que hemos cambiado)

<li>El primer buscador más usado es Google:
<a href="http://www.google.com"> www.google.com. </a> </li>

Una vez que hayas cambiado el texto de la línea, guarda y cierra el bloc de notas. y abrimos el archivo index.html con el navegador para ver el resultado.

Tu página Web quedará así Ver mi Web.

Cómo ves, el texto del enlace aparece en color azul y subrayado, pero si pulsas sobre él, te aparecerá la página inicial de Google. En los pasos siguientes aprenderemos a cambiarle el color y la apariencia. De momento lo importante es que el enlace funcione.

Si te fijas, al pulsar sobre el enlace, la página de Google aparece en la misma ventana o pestaña del navegador en la que teníamos nuestra Web. Sin embargo nosotros querríamos que al abrirse el enlace aparezca en una ventana o pestaña nueva. para ello no tenemos más que hacer un pequeño cambio.

Abrimos de nuevo el archivo index.html con el bloc de notas, y en el enlace que hemos hecho en el paso anterior añadimos lo siguiente (texto en azul)

<a href="http://www.google.com" target="_blank" > www.google.com. </a>

esta instrucción indica que debe abrir el enlace en una nueva pestaña o ventana, ya que si no la ponemos, el navegador abrirá el enlace en la misma, con lo cual se borrará la que teníamos antes de pulsarlo.

Una vez escrita la instrucción, guardamos y cerramos el bloc de notas, y abrimos de nuevo el archivo index.html para comprobar el cambio. Verás que al pulsar sobre el enlace la página de Google se abre en una nueva pestaña.

Tal y como hemos hecho para esta primera línea de la lista, vamos a hacer lo mismo en las demás. Insertaremos los enlaces para que abran cada uno de ellos la página del buscador que indican.

Para ello abrimos el archivo index html y vamos cambiando cada una de las líneas de la lista para insertar los enlaces. Esta es la lista tal y como tiene que quedar: (Como siempre, en azul, el texto que hemos cambiado):

....
<p>Voy a escribir la lista de los buscadores más usados en la World Wide Web. 
   Con este paso aprendo a escribir listas y a insertar enlaces a otras Webs.</p>
<ul>
   <li>El primer buscador más usado es Google:
      <a href="http://www.google.com" target="_blank"> www.google.com. </a>
   </li>
   <li>El segundo buscador más usado es Yahoo:
      <a href="http://www.yahoo.es" target="_blank"> www.yahoo.es. </a>
   </li>
   <li>Le sigue el buscador MSN:
      <a href="http://www.msn.es" target="_blank" > www.msn.es. </a>
   </li>
   <li>Y otro de los más usados es Altavista:
      <a href="http://www.altavista.com" target="_blank"> www.altavista.com. </a>
   </li>
   <li>Otro buscador bastante conocido es Terra:
      <a href="http://www.terra.es" target="_blank"> www.terra.es. </a>
   </li>	
</ul> 
....
		

Una vez que hemos insertado todos los enlaces, tal y como está en el código anterior, guardamos y cerramos el bloc de notas. y abrimos el archivo index.html con el navegador para comprobar los resultados.

Tu página Web quedará así Ver mi Web.

Si lo has hecho correctamente, podrás comprobar que todos los enlaces funcionan,y que se abren en otra pestaña. Si no es así revisa el código, seguro que hay algo mal escrito.

En el siguiente paso vamos a cambiar la apariencia de los enlaces, para quitar el subrayado y cambiar el color.

Ir al siguiente paso: Estilo de enlaces.

Página creada por ANYELGUTI.

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

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

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