Trucos HTML para Copiar y Pegar

Me preguntáis un montón de veces por cómo se consigue que un determinado párrafo quede centrado, que salga la foto donde queremos, o cómo se pone un link a una imagen o texto... esto entre un millón de cosas más; pues bien, todo esto se hace con el HTML ¡¡ese gran desconocido!!

Cuando escribes un post en wordpress tienes, arriba a la derecha, dos pestañitas: "Visual" y "Texto".

• Visual es la pantalla tal como la ves cuando escribes, en formato texto plano, como si lo hicieras en un documento de Word, por ejemplo.
• Texto es donde podemos añadir código para que nuestro post quede tal y como lo queremos. Cuando escribes un código en "Texto", al pasar a "Visual" ese código deja de verse y a cambio tienes un bonito diseño de letras, una imagen con link...

También puedes usarlo en los widgets del blog que puedes añadir a tu sidebar, como poner una imagen con un link a otra página (lo usamos mucho para publicidad de marcas o para enlazar con otros blogs)

Trucos HTML

Como me es imposible hacer un post por cada uno de los códigos que se pueden usar (más que imposible, me resulta tedioso, la verdad), voy poner aquí unos trucos html de copiar y pegar para que sólo tengas que venir aquí cada vez, coger los códigos y llevarlos a donde los necesites, ahí van:

Crear una linea separadora

A veces queremos separar dentro de un post un texto de otro, pues así es cómo se hace, un truco html súper fácil y que queda muy bien.

<hr />

---

Cambiar el tamaño de la fuente

Sólo tienes que cambiar el porcentaje y el tamaño de la letra variará en función de si es mayor o menor.

<span style="font-size: 150%;">Tu texto aquí</span>

Cambiar el color de la fuente

Si quieres que una determinada palabra o el texto completo cambie de color, cambia el código de letras y números que va detrás de # por el color que más te guste, en internet puedes encontrar un montón de sitios donde elegir el color, en este enlace te dejo uno de ellos.

<span style="color: #ff6cc5;">Tu texto aquí</span>

Cambiar el tipo de fuente

Para cambiar el tipo de letra, usa este código en tu blog y modifica por la que quieras utilizar.

<span style="font-family: georgia, serif;">Tu texto aquí</span>

Hacer el texto más pequeño

Te puede venir bien para poner un aviso legal o los derechos de autor en el blog, donde el texto suele ponerse más pequeño de lo normal.

<small>Tu texto aquí</small>

Hacer un área de texto

Uno de los trucos html facilísimos y que poca gente usa; cuando quieras resaltar algo dentro de un recuadro sombreado, esta es la forma.

<textarea>Tu texto aquí</textarea>

Texto con un link

Si quieres que una determinada palabra o texto tenga un enlace a otro sitio, el código que debes usar es este.

<a href="http://www.tuurlaquí.com/">Tu texto aquí</a>

Texto con un link en otra ventana

Si queremos el link, pero nos gustaría que se abriera en otra ventana del navegador.

<a href="http://www.tuurlaquí.com/" target="_blank">Tu texto aquí</a>

Enlazar un mail

Si queremos que en nuestro mail aparezca el enlace para que sólo tengan que pulsar, como hola@trucosparamiblog.com.

<a href="mailto:nombre@dominio.com">Nuestro mail</a>

Inserta una imagen

Puede usarse en un post o en el sidebar lateral. El "title" es el nombre de la imagen, "alt" es donde debes poner la palabra clave por la que quieres que posicione ese determinado post, "width" es el ancho en pixel y "height" el alto, debes cambiar esos valores por los que quiera que ocupe tu imagen.

<img title="titulo de la imagen" src="http://www.tuurlaquí.com/nombredelaimagen.jpg" alt="palabra clave" width="100" height="150" />

Insertar una imagen con un link

Igual que antes, pero en este caso, al clicar sobre la imagen, nos llevará al enlace que le marquemos.

<a href="http://www.tuurlaquí.com/"><img src="http://www.tuurlaquí.com/nombredelaimagen.jpg" alt="palabra clave" width="100" height="150" /></a>

Poner un botón

Seguro que has visto en muchos blogs que tienen una imagen con un texto en HTML abajo para que puedas cogerlo y pegarlo directamente en tu blog, éste es uno de esos trucos html que viene genial para que nos conozcan; los podemos ver muy habitualmente en insignias como la de Madresfera, por ejemplo. Si quieres poner uno de tu propio blog, es así.

<div align="center"><img title="titulo de la imagen" src="http://www.tuurlaquí.com/nombredelaimagen.jpg" alt="palabra clave" width="125" height="125" />
Aquí el texto que quieras poner
<textarea cols="14" rows="3">href="http://www.tuurlaquí.com/" src="http://www.tuurlaquí.com/nombredelaimagen.jpg" alt="palabra clave" title="titulo" width="125" height="125" </textarea></div>

Llévate nuestro icono a tu blog, sólo tienes que copiar y pegar el código de abajo ¡¡mil gracias!!

Espero que te sirvan de ayuda estos trucos html y si tienes dudas con alguno, o hay algo que quiera hacer y no sabes, sólo tienes que dejar un comentario.

¡Que te diviertas! 

http://www.trucosparamiblog.com/trucos-html-copiar-pegar/

Read more...