a
a es la etiqueta de hipervínculos. va acompañada de href= y entre comillas se pone un enlace.
En el medio de las dos etiquetas (osea entre > y <) puede haber una palabra, una imagen u otras cosas
Se traduce a: LINK AL BLOG
Sin embargo, esta etiqueta puede tener también una imagen
Por ejemplo:
Se traduce a:
Bueno, ya conociendo estas cosas, conocemos lo básico de la etiqueta a, pero ¿Qué más nos permite hacer esta etiqueta? Eso son estas propiedades: coords, shape, id, target, mailto, entre muchas otras. Acá solo vamos a explicar target, mailto y id, ya que creo que son las más importantes al realizar un post. Si quieren un tutorial de coords y shape lo puedo hacer, pero más adelante, ya que eso es un poco más avanzado.
mailto: mailto nos permite que al dar click a un enlace o imagen, se nos de la opción de enviar un mail, generalmente si usas microsoft se te suele abrir outlook, y si se fijan en "para" ya aparece un mail. Sinceramente resulta bastante molesto cuando uno no usa outlook, es preferible que diga MANDAR MAIL A: blahblah@soyunmensajero.com , y que uno copie y pegue la dirección. Pero al entrar en páginas de empresas o cosas así, se suele usar el mailto, ya que las empresas tienen el outlook o servicio de mensajería bastante bien programado XD.
Para usar mailto seguimos utilizando a href=" pero esta vez en vez de poner un enlace escribimos: mailto:MAIL"> resultando algo similar a:
Y eso de ahí arriba haría que se te abriera el outlook o lo que sea que utilices, para mandarme un mail a mi
Que pasa si queremos que el mail tenga un nombre en específico para que los mails que nos lleguen a través de ese enlace tengan ese nombre y podamos filtrarlos (ojo, el nombre el usuario que mande el mail lo puede cambiar, pero generalmente no se hace). Para hacer eso, luego del mail tenemos que poner ?Subject=Título si queremos que ese título tenga más palabras (por ejemplo Books Are My Universe, tenemos que separar cada palabra con %20 en vez de con espacio, por ejemplo: Books%20Are%20My%20Universe). %20 es el "espacio" en este código
Se vería igual que antes, pero al dar click en título del mail sería Books Are My Universe. Contacto
TARGET: target le explica al html si el enlace se debe abrir en la misma pestaña, en una pestaña nueva, ventana nueva, o frame (aunque este para nosotros no tiene mucho sentido, así que este no será explicado). para esto, luego de a href="LINK" y antes de > debemos poner alguno de los siguientes atributos target="_blank" o target="_self".
_blank abre el enlace en una nueva ventana o pestaña, _self por el contrario, en la misma ventana o pestaña. En lo personal siempre prefiero blank, ya que a veces estas abajo de todo de una página, y si el enlace se abre en la misma pestaña y no en una nueva, después tenes que volver atrás, etc... Aunque a veces, es necesario que se abra en la misma ventana. Siempre hay que ver que es lo que más conviene.
¡Probalo!
Link al blog en nueva pestaña
Link al blog en la misma pestaña
ID: el ID nos ayuda a hacer enlaces dentro de nuestra entrada o página, a otra parte de la misma página, o, para ir a otra página pero llegar a una sección en particular. Se que esto marea un poco, pero espero que luego de la explicación lo entendamos.
La palabra ID que está en negrita acá arriba nos va a servir de "ancla" por así decirlo. Nuestra tarea es armar un enlace, que al darle click, nos lleve a esa palabra. Primero, debemos crear el ancla (en nuestro caso ya está creado, pero acá les enseño como).
Para crear un ancla abrimos la etiqueta a, pero en vez de seguirla por href="LINK", la vamos a seguir por id="ID". lo que está entre comillas puede ser cualquier cosa ID, Soyunid, HolaQueHace, o lo que sea, pero tenemos que recordarlo bien, porque nos servirá luego (INCLUSO las mayúsculas y minúsculas, ya que en HTML estas son MUY IMPORTANTES). Yo coloqué la palabra ejemplo como ID.
Ahora, debemos crear un enlace que vaya a ese ID, y para eso, en a href=" en vez de poner un link pondremos #ejemplo . El numeral indica que nos estamos refiriendo a un ID y no un enlace. En caso de que queramos que nuestro enlace vaya al ID ejemplo de la página google.com (cosa que no funcionaría porque no está creado
Prueben dando click a este enlace: Ir al ID ejemplo
Usando esto es como se crean los enlaces al estilo "Back to top" o similares.
Espero que este segundo tutorial les haya gustado, nos vemos en el siguiente, cualquier duda la dejan en los comentarios :D.
Muchas gracias por hacerlo, la verdad he comprendido cosas que nunca antes había hecho. ¡Saludos! Espero el próximo.
ResponderEliminarDe nada! Ya el lunes tendremos un tutorial con cosas de las imagenes =D
Eliminar