Algunos códigos HTML para mejorar nuestros blogs

.

El HTML es el lenguaje que se utiliza para construir páginas web. Aunque se utiliza cada vez menos en beneficio de nuevos lenguajes de creación de páginas web más modernos y eficientes, como el PHP, el caso es que no acaba de caer en desuso ya que se sigue utilizando en combinación con estos lenguajes nuevos. Además, nuestros blogs entienden a la perfección el HTML, por lo que nunca está de más tener algunas nociones de HTML y conocer algunos códigos que nos harán la vida más fácil y nos ayudarán a mejorar el aspecto de nuestros blogs.

No pretendo dar aquí un minicursillo de HTML. Primero porque no tengo los conocimientos suficientes para ello. Además, hoy en día es muy fácil encontrar en Internet buenos tutoriales sobre este lenguaje.

Mi intención es tan sólo compartir con vosotros algunos códigos HTML que conozco y que os serán de gran ayuda, estoy seguro.

Para facilitar la comprensión de estos códigos, procederé de la siguiente manera:

- En primer lugar, os pondré el código tal y como lo tenéis que copiar en vuestros blogs para poder utilizarlo. Tened en cuenta que cada código lleva por así decirlo dos tipos de información: el código en sí, que hay que copiar tal cual, y lo que podríamos llamar “variables”, que es la información que cambia según lo que queráis hacer en concreto y que tenéis que adaptar a vuestro caso particular. Para que todo esto resulte más legible, os pondré en negro el código que no hay que tocar y en rojo lo que tenéis que personalizar. Cuando os ponga unos ejemplos concretos lo entenderéis enseguida.

- En segundo lugar, os indicaré el resultado que tiene el uso de cada código, para que podáis entender de qué se trata.

- Recordad finalmente que hay varias formas de usar códigos HTML en un blog. Si queréis insertar un código HTML en una entrada o una página del blog, tenéis que pulsar en el botón “HTML” que tenéis en la ventana “Escribir Entrada” o “Escribir Página” del editor de vuestro blog. Si queréis usar un código HTML en una barra lateral del blog, tenéis que usar un “widget” de texto y pegarle dentro el código. Y también podéis usar códigos HTML en los comentarios, tanto en vuestro propio blog como en el de otros.

Dicho todo eso, veamos algunos ejemplos concretos de códigos HTML.
.

Crear un enlace que se abra en una página nueva

Todos sabemos que para enlazar con otra página web, en la mayoría de los casos basta con poner la dirección de la página ya que el propio blog la reconoce como tal y se encarga de crear el “link”, de tal forma que cuando hagamos “clic” en la dirección que hayamos introducido, nos llevará automáticamente a la página indicada.

Lo que quiero enseñaros aquí es a hacer un link más elaborado. Pongamos por ejemplo que estoy visitando el blog de un amigo y que dentro del comentario que le acabo de dejar, quiero hacer un link.

–> Código HTML:

<a href=”http://www.aquesabenlasnubes.com/?p=242“ target=”_blank”>mermelada de tomate</a>

–> Resultado:

Hola Pepe, me ha gustado mucho la receta. Es parecida a la receta de una mermelada de tomate que he publicado yo en mi blog.
.

Crear un enlace con una imagen

Lo que queremos conseguir en este caso es que al hacer “clic” en una imagen se abra un enlace.

–> Código HTML:

<a href=”http://www.aquesabenlasnubes.com/“><img src=”/tuimagen.jpg” width=”139” height=”89” border=”0″ /></a>

–> Resultado:

En este ejemplo, la imagen se encuentra en el directorio raíz de nuestro servidor, pero podríamos haber elegido una foto ubicada en otra página web (en cuyo caso hay que indicar la dirección URL completa: http://www. …. /tuimagen.jpg).

Los parámetros “width” y “height” son el ancho y la altura de la imagen. Border=”0″ significa que la imagen aparecerá sin recuardo.
.

Crear un enlace para el envío de un email

No es recomendable poner una dirección de e-mail directamente en un blog. Hay que esconderla, por así decirlo, para que los robots que se encargan de buscar direcciones de email en Internet para mandar spam, no la encuentren tan fácilmente. Para eso tenemos el código HTML llamado MAILTO.

Pongamos por ejemplo que queramos poner “Contacto” en nuestro blog y que al hacer “clic” sobre esta palabra se abra el programa de correo para mandar un e-mail:

–> Código HTML:

<a href=”mailto:correo@gmail.com>Contacto</a>

–> Resultado:

Contacto

.
Y si además queremos que cuando alguien haga “clic” en “Contacto” no sólo se abra el programa de correo, sino que además nos ponga ya el asunto del mensaje y algún texto en el cuerpo del mensaje, usaremos el siguiente código:

–> Código HTML:

<a href=”mailto:correo@gmail.com?subject=Asunto del mensaje&body=Texto que aparece en el cuerpo del mensaje“>Contacto</a>

–> Resultado:

Contacto

.
Insertar en un post una imagen de Flickr

En vez de “subir” una imagen desde nuestro ordenador al blog, puede ocurrir que queramos insertar en un post una imagen de un álbum de Flickr (o de cualquier otra página de Internet).

–> Código HTML:

<div><img src=”http://farm4.static.flickr.com/3281/2851986304_8310dc8a3d.jpg?v=0” border=”0″ alt=”" width=”139” height=”89” /></div>

–> Resultado:

Los parámetros “width”, “height” y “border” son los mismos de antes.
.
.
Cambiar imagen al pasar el ratón.
.
Vamos a hacer que una imagen cambie a otra imagen cuando pasamos el puntero del ratón por encima:
.
–> Código HTML:

<img src=”http://farm4.static.flickr.com/3223/2828313699_013d660ae9.jpg?v=0” border=”0″ alt=”" width=”139” height=”89” onmouseover=”imgdir = this.src ;this.src=’http://farm4.static.flickr.com/3236/2828315337_d9cdf61962.jpg?v=0‘” onmouseout=”this.src=imgdir”>

–> Resultado:


Crear un buscador de contenidos en un blog de Blogger

Para colocar un recuadrito en la barra lateral de nuestro blog de Blogger, que permita a nuestros visitantes hacer búsquedas en el blog, basta con pegar el siguiente código en un “widget” de texto:

–> Código HTML:

<form name=”b-search” action=”http://search.blogger.com/”>
<input type=”text” id=”b-query” name=”as_q” />
<input type=”hidden” name=”ie” value=”UTF-8″ />
<input type=”hidden” name=”ui” value=”blg” />
<input type=”hidden” name=”bl_url” value=”tublog.blogspot.com” />
<input type=”submit” value=”go” alt=”Search This Blog” id=”b-searchbtn” title=”Search this blog with Google Blog Search” onclick=”document.forms['b-search'].bl_url.value=’tublog.blogspot.com’” />
</form>

–> Resultado:

.

Como podéis comprobar, las posibilidades son infinitas. Estos códigos no son más que unos pocos ejemplos de todo lo que se puede hacer.

Como siempre, os animo a probar. Y si tenéis cualquier duda, ya sabéis que podéis escribirme .

Un saludo y hasta la próxima.
.

.

Escrito por phroc el 16 de septiembre de 2008.