Aprender a hacer una sencilla web paso a paso partiendo de cero.
Y ahora tambien aprende a programar en C++ con Aprende Web C++
y entérate de las novedades o deja un comentario.
última modificación: 13-07-2018.
Visitas este mes: 2
Visitas el mes pasado: 9
Por elegir aprende-web
Aprende-web está diseñado a partir de los lenguajes que aquí mismo se enseñan.
By Anyelguti
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:
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.
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