Cómo insertar un enlace a tu E-Mail
Sin conocer lo que piensan tus visitantes no tienes nada que hacer, nada que mejorar, de modo que colocar un enlace donde el usuario pueda hacer clic para escibirte un E-Milio parece algo imprescindible, verdad? Claro que más adelante colocaremos un foro en la web, pero nunca está de más al menos saber como insertar estos enlaces de correo, así que vamos a aprender.
Código Html de un enlace de E-Mail
Como vas a ver, es muy parecido al código Html de un enlace a otra página web. Solo cambian una palabrilla, y por supuesto la ruta, que en este caso será simplemente tu dirección E-Mail. La línea de código en Html es la siguiente:
Texto que quieras poner para hacer clic en él
Donde pone "Texto que quieras poner.." escribe las palabras que verá el visitante y donde ha de hacer clic para enviarte el mensaje. Puedes poner "Envíame un E-Milio", "Clic para escribirme" o simplemente la propia dirección de tu E-Mail.
Problemas de este tipo de enlace
El problema que yo le veo a esto es que hay miles de robots pululando por la red en busca de direcciones de E-Mail para crear bases de datos con ellos y enviarles todo ese spam del que terminamos tan hartos. Por lo que quizás prefieras una alternativa, más incomoda para el visitante pero efectiva contra el spam. Se trata de escribir tu dirección de E-Mail con un programa de dibujo y colocar la imagen en la web. De este modo, como las imágenes no pueden ser leidas, estos robots no pueden cazar tu dirección mientras que cualquiera de tus visitantes siempre puede leerla y escribirla en su programa de correo para mandarte sus felicitaciones.
También puedes colocar un botón cualquiera y hacer el enlace desde allí. El botón sería un simple dibujo con el texto "E-Mail" o el dibujo de un buzón de correo o algo así. En ese caso los robots de spam no pueden leer la imagen, pero quizás puedan sacar la dirección de tu E-Mail desde el código html de tu web, por lo que seguimos con el mismo problema...
Qué hacemos entonces? Por el momento y para el caso del ejemplo, vamos a colocar el enlace de E-Mail en un dibujo de un buzón. Aunque sea para aprender, oki?
Enlace de E-Mail en una imagen
Primero guárdate esta imagen en tu carpeta de "objetos" para poder seguir. Al guardarla ponle de nombre buzon.gif
Ya tenemos tres archivos en la carpeta de "objetos":
Ahora abre el index de tu Html-Kit y pon la vista "Editor". Como siempre, puedes cerrar la ventana de Workspace de la derecha para tener más sitio y maximizar la ventana del index. Mejor, verdad? je je.
Pon el cursor del ratón justo al final de la línea de código del último párrafo (justo antes de ), pulsa con el ratón una sola vez para colocar el cursor allí y pulsa luego el Intro para crear una nueva línea. Como te dije anteriormente, conviene poner las cosas dentro de un párrafo, de modo que creamos ese párrafo aún vacio escribiendo sus etiquetas
.
Ahora situa el cursor dentro de ese párrafo (colocándolo entre
y
) y en el Html-Kit tal y como hicimos anteriormente pulsa en insertar una imagen (te dejo una foto para que recuerdes cómo era):(Fijate como en la línea número 15 del código html en la imagen de arriba, he escrito ya
y he colocado el cursor entre esas dos etiquetas)
Y del mismo modo que la otra vez, ponemos algunos datos en la ventana que aparece:
Fíjate como tras seleccionar el archivo buzón en la ventana derecha de arriba, podemos escribir el "alt" del que hablamos páginas atras, y como por fín he descubierto como poner las unidades en el ancho y alto de la imagen.... era obvio verdad? je je je. Pues si, escribe "px" detrás de cada cifra de auchura y altura después de poner al "alt" y luego pulsa el Ok.
Automáticamente aparece esa nueva línea de código Html en la ventana de nuestro index
y si le das a "preview" podrás ver el buzón en cuestión. Vamos ahora a colocarle el enlace a nuestro E-Mail.
Enlace de E-Mail con Html-Kit:
Para insertar un enlace de E-Mail desde una imagen, tienes que seleccionar todo el código html de la imagen primero. Si te cuesta trabajo seleccionarlo, prueba colocando el cursor en el inicio y luego haciendo clic pulsando a la vez la tecla "Shift" (es la flecha que apunta para arriba, esa que se pulsa para escribir mayúsculas, justo encima del "Control") de tu teclado teniendo el cursor al final del código que quieres seleccionar. Lo que tienes que seleccionar es el que he puesto arriba, desde . No selecciones la parte de
ni la de
, oki?Una vez seleccionado pulsa en la barra de herramientas del Html-Kit sobre Etiquetas > Crear Link...:
Se abre la ventana de los links y vemos como en la ventana de la parte inferior derecha aparece la imagen seleccionada (aunque puede que no se vea). Ahora en la lista de opciones de la izquierda de esa ventana, en la línea que pone "href" escoge "mailto:", así:
y a continuación de mailto: escribe tu dirección de correo.
Después pulsa Ok y listo!
Los estilos CSS para las imágenes con enlaces
Como verás si pulsas en "Overview" o vista previa, la imagen del buzón de correo aparece recuadrada en azul. Esto es porque por defecto, los enlaces aparecen siempre subrayados con una lína azul, para indicar que son enlaces. Cuando se hace un enlace desde una imagen en lugar de aparecer subrrayada aparece recuadrada en azul.
Esto no queda demasiado bien, de modo que vamos a corregirlo.Verás qué rápido y fácil se hace esto con la hoja de estilo y sin tocar para nada el index.
Cierra el index.html de tu Html-Kit y abre la hoja de estilos llamada "estilos.css". Verás como solo tenemos aquella línea que habiamos definido para el body. Vamos a incluir otra línea más con este contenido:
img {border-style: none}
Esto indica que, todos los elementos de imagen (img) han de cumplir lo que hemos puesto entre corchetes, es decir, que no tengan ningúna tipo de borde.
Si guardamos la hoja de estilo y abrimos el index.html veremos como en el "Overview" o vista previa ya no aparece ese recuadro. Tampoco saldrá ya en ninguna de las imágenes de ninguna de nuestras páginas. Buen invento esta hoja de estilos, verdad? Pues aún tiene cosas mejores, ya lo verás más adelante.
Inventbuy COMPRAR Y VENDER POR INTERNET de manera gratuita
Cómo centrar un párrafo de la página web
Lo que hemos conseguido hasta ahora no es gran cosa comparado con lo que nos espera, pero por lo pronto hemos aprendido ya algunas cosas interesantes. El aspecto de la web conseguida hasta ahora no está mal del todo, pero se le echa en falta por lo menos el conseguir centrar algunos párrafos.
Vamos a aprender a centrar párrafos de un modo muy sencillo gracias como siempre a nuestra grandiosa Hoja de Estilos.
Crear un estilo centrado
La propiedad en CSS que define la alineación de un elemento es text-align y se le pueden dar los valores left (pegado a la izquierda), right (pegado a la derecha), center (centrado), y justify (justificado).
Si quisieramos que todos los párrafos aparecieran centrados, bastaría con poner en la Hoja de Estilo esta línea:
p {text-align:center}
El problema de esto es que nos centra TODOS los párrafos y seguramente no queramos eso, sino centrar solo unos pocos. En estos casos en los que queremos definir un estilo pero no queremos que se aplique a todos los elementos, es necesario definir lo que se llaman Clases de Estilo.
Por ejemplo, podríamos crear un nuevo tipo o clase de estilo que podemos llamar como queramos, por ejemplo "centrado". Definimos en la Hoja de Estilo las propiedades que queremos que tenga y luego en el Html de la página le indicamos a un párrafo concreto que ha de tomar ese estilo. Vamos a verlo por partes.
Crear una clase de estilo
Abrimos la Hoja de Estilo y escribimos esta línea:
.centrado {text-align:center}
Fíjate que hemos puesto un punto seguido del nombre que nos ha dado la gana y a continuación entre los corchetes hemos dado la propiedad de centrado.
Es importante que sepas que al ponerle nombre a estos estilos creados por nosotros hemos de seguir ciertas normas para evitar problemas:
- Siempre en minúsculas.
- No poner acentos, simbolos raros ni espacios en blanco. Solo letras y números.
- Nunca empezar el nombre con un número.
- Si necesitas separar el nombre en dos o más palabras usa guiones medios "nombre-nombre", nunca bajos "nombre_nombre".
Bien, una vez claras estas normas (recuérdalas muy bien!) guarda la Hoja de Estilos y abrimos el index.html para centrar algunos párrafos.
Centrar párrafos en el Html
Como recordarás, todos los párrafos empiezan con la etiqueta
. Pues es dentro de esa etiqueta donde tenemos que indicarle (si es que lo queremos así) la clase de estilo que queremos que tome.
Vamos por ejemplo a centrar el párrafo donde ponemos "Bienvenidos...". Para ello vamos a la vista del código html del index y modificamos esa etiqueta
dejándola así:
Bienvenidos a mi página web. Muy pronto estará lista!
Si ahora haces vista previa o "Overview" desde el Html-Kit, verás como este párrafo aparece ahora centrado. Fácil, verdad?
A partir de ahora, cada vez que quieras centrar un elemento solo tienes que ponerle class="centrado" dentro de la etiqueta de inicio en su código Html.
Que te quede claro: Se define en la Hoja de Estilo poniendo un punto, más el nombre, y se indica en el html con class="nombre" (aquí sin el punto). Estas cosas no las sabe cualquiera, no te creas... estás empezando a ser un Webmaster de verdad!
Cómo va nuestra página web por el momento?
Por si te has perdido o por si has estado experimentando por tu cuenta y te has cargao el código Html de la web de ejemplo, te dejo aquí lo conseguido hasta el momento. Recuerda que puedes hacer experimentos creando otro sitio local, creando otra carpeta dentro de la carpeta "mis-paginas-web" que hemos creado en tu escritorio y repitiendo los primeros pasos de estas lecciones. Pero la web del ejemplo es mejor que no la toques mucho pues te podrías perder cuando la usamos en las lecciones siguientes, oki?
La maravillosa Hoja de Estilo queda así:
body { background-color: #E6E6FA ;
background-image: url(objetos/fondo.png) ;
background-repeat: no-repeat ;
background-position: center center }
img { border-style: none }
.centrado { text-align:center }
Y el código Html del index.html de ejemplo así:
Bienvenidos a mi página web. Muy pronto estará lista!
Y con esta página terminamos con la primera lección. Pulsando arriba, en la barra de navegación naranja sobre "Lección Segunda" o pulsando en la flecha derecha de aquí abajo continuamos con la segunda, donde empezaremos a meter mano a la plantilla.
Espero que me des tu opinión de estas lecciones en el Foro CCTW, eh? Solo con tu punto de vista y tu opinión puedo mejorar todo esto, acuérdate de mí! je je je.
No hay comentarios:
Publicar un comentario