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.

6. Retoques finales (III)

6.3. Enlace a un e-mail

Enlaces para e-mail

El enlace a un e-mail no nos manda al correo del destinatario, sino que nos abre nuestra cuenta de correo (siempre que la tengamos configurada) con la dirección del destinatario ya preparada pàra que escribamos el e-mail y mandarlo luego.

Nosotros vamos a insertar un enlace al final de nuestra página para que nos manden correo. Para ello abre el archivo index.html con el bloc de notas y después de la última linea escribimos (texto en azul):

......
   <li>Otro buscador bastante conocido es Terra: www.terra.es. </li>
</ul>
<p>Puedes mandar tus comentarios y sugerencias:
   <a href="mailto:aprendeweb@ymail.com"> Mandar un correo </a></p>

Como puedes ver para enlazar a un e-mail escribimos la etiqueta para un enlace, y en la ruta debemos poner la palabra mailto: seguida de la dirección de correo electrónico completa, (con arroba y nombre del servidor):

<a href="mailto:mi_correo@servidor.com">Texto del enlace </a>

Yo he puesto el nombre de mi correo, (aprendeweb@ymail.com), pero tu puedes cambiarlo por el de tu propio correo o el que quieras. Eso sí, la palabra mailto: debe ir siempre al principio, pues es la que indica que este enlace debe ir a un correo electrónico.

Una vez hayamos escrito la línea, guardamos y cerramos el bloc de notas y abrimos el archivo index.html para ver como ha quedado.

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

Insertar una imagen como enlace

Tenemos ahora un enlace a un correo, pero tal vez quedaría mejor si el enlace lo hiciéramos por medio de una imagen. para ello cambiaremos el texto del enlace por una imagen. La siguiente imagen la pondremos como enlace para nuestro correo:

Copiamos la imagen en la carpeta objetos de nuestra carpeta raíz. Recuerda que para ello debes pulsar con el ratón derecho sobre la imagen y elegir la opción "Guardar imagen como..."; buscas la carpeta objetos, y la guardas alli con el nombre buzon (sin acento).

Abrimos la carpeta objetos para comprobar que el archivo buzon se ha copiado.

Una vez hechas estas comprobaciones, abrimos el archivo index.html con el bloc de notas para cambiar el texto del enlace. Buscamos la línea del enlace al correo electónico, que es la siguiente:

<p>Puedes mandar tus comentarios y sugerencias: <a href="mailto:anyelguti@gmail.com"> Mandar un correo </a></p>

En este código borramos el texto del enlace, es decir las palabras "mandar un correo" y alli insertaremos la etiqueta de la imagen, de la siguiente manera: (texto nuevo en azul)

......
<p>Puedes mandar tus comentarios y sugerencias:
   <a href="mailto:anyelguti@gmail.com">
      <img src="objetos/buzon.gif" alt="manda un correo"/> 
   </a>
</p>
			

Una vez hemos escrito la etiqueta de la imagen cerramos y guardamos el bloc de notas, y abrimos el archivo index.html con el navegador para ver el cambio.

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

Como ves, donde estaba el texto del enlace ahora hay una imagen, y si pùlsas sobre ella autúa como un enlace. La imagen tiene alrededor de ella un cuadro azul. Las imágenes de los enlaces siempre tienen este cuadro azul por defecto, pero nosotros se lo vamos a quitar mediante el estilo CSS.

Abre el archivo estilo.css con el boc de notas, y después de la última línea insertamos esta otra:

img { border: none; }

Con esta línea se suprimen los bordes de las imágenes en los enlaces. Una vez escrita, guardamos y cerramos el bloc de notas, y abrimos el archivo index.html con el navegador para ver los resultados:

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

Hemos quitado el borde de la imagen del enlace. Ahora sólo nos quedan unos cuantos retoques en el texto, pero eso lo veremos en el siguiente paso:

Ir al siguiente paso: Retoques en el texto

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