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: 82

Visitas el mes pasado: 119

logo

Donativos

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




2. No sólo texto (III)

2.3 Enlaces en imágenes

Paso 6

logo miweb

Usar una imagen como enlace

Podemos también usar una imagen como enlace, para ello creamos un enlace y sustituimos el texto del enlace por una etiqueta de imagen.

Por ejemplo si tenemos un enlace tal que:

<a href="http://es.wikipedia.org">
Consultar Wikipedia
</a>

Sustituimos el texto del enlace por una etiqueta de imagen. Siguiendo con este ejemplo, guardamos la imagen del logo de Wikipedia en la carpeta objetos. Después sustituimos el texto del enlace por una etiqueta que nos haga ver la imagen:

<a href="http://es.wikipedia.org">
<img src="objetos/logoWikipedia.jpg">
</a>

La imagen sustituye al texto del enlace, por lo que al pulsar sobre la imagen se nos abrirá la página indicada.

Incluir imagenes de enlace en nuestra página

Visto esto, vamos a seguir con nuestra página de inicio. Incluiremos ahora unas imágenes junto a los enlaces que hemos puesto. Las imágenes son los logos de los sitios a los que enlazamos. Estas imágenes también serán enlaces a estos sitios.

En primer lugar, copia en la carpeta objetos estas tres imágenes:

Logo Wikipedia         Logo You Tube         Logo El País

Los nombres de los archivos de imagen deben ser : wikipedia.jpg , youtube.jpg y elpais.jpg respectivamente.

Después insertamos las imágenes como enlaces en nuestra página. En la etiqueta de imagen pondremos también los siguientes atributos:

Ahora incluímos las imágenes en la página. Justo antes de cada enlace de texto pondremos su enlace de imagen. Para ello abrimos el archivo index.html con el block de notas de Windows y incluimos las líneas que marcamos en azul:

<html>
  <head>
    <title>Mi Propia Web</title>
  </head>
  <body>
    <img src="../objetos/logo.gif" alt="Logo de la página" width="15%" />
    <h1>Mi Propia 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">
       <img src="../objetos/wikipedia.jpg" alt="Logo Wikipedia" border="0" height="200" />
    </a></p>
    <p><a href="http://es.wikipedia.org" target="_blank">Consultar Wikipedia</a></p>
			
    <p><a href="http://www.youtube.com"  target="_blank">
       <img src="../objetos/youtube.jpg" alt="Logo YouTube" border="0" height="200" />
    </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">
       <img src="../objetos/elpais.jpg" alt="Logo El_Pais" border="0" height="200" />
    </a></p>
    <p><a href="http://elpais.com" target="_blank">Noticias con el País</a></p>
  </body>
</html>

Las líneas que hemos añadido son enlaces en los que hemos sustituido el texto por la etiqueta de imagen. El resultado es el mismo que puedes ver en el siguiente enlace:

Tal vez no sea este el aspecto que queremos que tenga nuetra web, sin embargo de momento hemos insertado en la página el contenido.

En pasos posteriores crearemos más páginas interiores de la web y pondremos los correspondientes enlaces. También veremos cómo cambiar los elementos de sitio y de estilo para que quede más bonito.




En el siguiente paso nos ocuparemos del editor de texto, es decir la aplicación con la que escribimos el archivo.

El editor de texto




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