Trucos HTML

 

Los mejores trucos HTML para tu blog que no te puedes perder

Hay cosas que sólo las puedes hacer mediante código html, además estas son muy fáciles.

Conviene saber algunos trucos html que te ayuden a mejorar tu blog, además conocer html te valdrá sea en blogger o wordpress.

En este post hay algunos trucos html para que puedas controlar un poco más tu diseño y hacer cosas a mano que vas a necesitar para tus post , además así si no has usado nunca código te vendrán bien porque son muy fáciles.

Por qué es importante saber usar HTML en los blogs

• Es importante saber usar los elementos html en tu blog porque te permiten mayor control de lo que estás haciendo en tu diseño.
• A veces las plantillas incluyen algunos tipos de constructores que pesan mucho y cuando quitas la plantilla puede que te queden restos de código a la vista que no funcionan, si lo haces a mano lo tendrás siempre.

• Si trabajas con blogspot (blogger para los amigos) es importante que comiences a usar html para maquetar post y familiarizarte ya que es la mejor forma de personalizar tu contenido, en caso de plantillas muy antiguas te vendrá muy bien.
• Si eres usuario de WordPress te conviene usar html en algunos casos antes que recurrir a un plugin, a veces es una línea de código la que tienes que añadir y un plugin es una medida desproporcionada, si vas sumando plugins al final tu instalación tendrá más posibilidades de tener problemas y será mas difícil de mantener.

Este post al ser HTML de toda la vida lo puedes aplicar en blogspot, wordpress, tumblr, web normal…

Son elementos básicos en html y pequeños recursos muy sencillos que se usan a menudo.

Poner enlaces en HTML

Insertar enlaces en cualquier parte de tu blog es muy fácil, aunque los editores como wordpress y blogger los ponen solos hay elementos como en los widgets que los tienes que poner tu a manita, por lo que vamos a ver como funciona un enlace.

Un enlace es esto: <a></a> dependiendo de a qué queramos que enlace y como queremos que se comporte el enlace le vamos añadiendo cosas:

A la etiqueta de apertura “a” le tenemos que decir a dónde queremos ir por ello colocamos la etiqueta href que quiere decir “Hypertext reference” referencia al enlace para nosotros la ruta absoluta con su http://

<a href=”a dónde va nuestro enlace”></a>

Este enlace no se vería porque no tenemos un anchor text, el texto de ancla voy a poner el más popular:

<a href=”a dónde va nuestro enlace”>Pinche aquí</a>

Después de indicar a dónde nos lleva el enlace podemos poner como queremos que se porte, por ejemplo:

target=”_blank” en una página nueva

target=”_self” en la misma página

target=”_new” otra página y otra pestaña

Boton de enlace rel

rel=”follow”

rel=”nofollow”

<a href="http://a-donde-va-el-enlace" target="_blank" rel="nofollow">YO SOY EL TEXTO QUE MARCA EL ENLACE</a>

Poner enlaces no es un truco de html sino es lo más básico y necesario que vas a tener que hacer.

Poner una foto con un enlace:

Este recurso es muy útil por ejemplo para poner imágenes en los widgets o en otras partes en las que no tengamos editores, a aparte podemos añadir código css para hacer efectos de desvanecimiento o color en las fotos, añadir bordes y muchas más cosas que nos ayuden a personalizar nuestra web.

https://yoblogueo.com/aclarar-las-fotos-cuando-el-raton-pasa-por-encima-en-blogger/

La manera de colocar una foto a mano en un post es como si insertásemos un enlace pero en lugar del anchor text colocamos la imagen que queremos insertar dentro de la etiqueta <img>, dentro de esta etiqueta va el parámetro src= que quiere decir origen o sea la ruta dónde tenemos la imagen, ya puede ser dentro del blog o en otro lugar.

<img src=”https://ruta de la imagen”>

Como puedes ver también podemos controlar el ancho, el alto o la proporción de la foto

<a href="http://a-donde-va-el-enlace" target="_blank"><img src="https://direccion-de-donde-tienes-la-foto-o-ruta" width="320"></a>

Poner un enlace con tu mail directo:

Hay muchas referencias útiles pero la de mailto: es muy importante porque abre outlook u otro cliente de correo para enviar un mail, este enlace es muy útil para las firmas de correo, RRSS y en lugares dónde no pongas un formulario de contacto.

Los enlaces de correo son los más útiles de una web

<a href=”mailto:carmen@yoblogueo.com” target=”_blank”> Mi correo </a>

Enlace para descarga:

Si en tu blog hay archivos para descargar, este enlace te va a venir bien, ya que los plugins que lo hacen esta función tienen pegas tipo que no te dejan poner el anchor text que tu quieras, te limitan archivos…

Poner un enlace de descarga con esta línea de código html es muy fácil.

<a href="archivo.exe">Descripción del enlace </a>

Insertar un PDF en cualquier parte de tu blog

Esto mola mucho porque hay empresas que manejan tarifas, o gente que hace dossiers y presentaciones que no van a ponerse a pegarlas en jpg porque se verían mal.

Incrustar un PDF está muy bien para que pasen tiempo en página y si quieren imprimir o descargar puedan hacerlo sin tener que ir a la página del archivo vinculado.

<iframe style="width: 600px; height: 900px;" src="https://yoblogueo.com/wp-content/uploads/2016/11/Calendario-PDF-2017-cactus-b.pdf" width="700" height="900" frameborder="0"></iframe>

Hacer tablas con HTML

Las tablas son importantes por que a veces las necesitamos para organizar información, si no las hacemos con código al final recurrimos a hacer las tablas como imágenes cosa que quizás no es tan beneficioso para el SEO, por eso usar tablas hechas en HTML son una buena práctica.

Es importante usar tablas en html porque nos ayudan a ordenar la información y son un recurso muy utilizado.

La etiqueta HTML que define la tabla es table, <table></table>

Entre esa etiqueta de inicio y cierre deben ir las filas horizontales que se definen con la etiqueta <tr></tr> que viene de table row

Y dentro tenemos las celdas con su etiqueta correspondiente <td></td>

<table><tr><td><img src="punto.gif" height="5"></td></tr>

por ejemplo:
<code>
<table>
<tbody>
<tr>
<td>hola</td>
<td>adios</td>
</tr>
<tr>
<td>gato</td>
<td>perro</td>
</tr>
</tbody>
</table>
</code>

hola	adios
gato	perro

Hola

Adiós

Perro

Gato

Os las pongo sin estilos porque por lo general los themes del blog tienen lo suyos.

Bueno espero que os hayan gustado estos conceptos básicos de HTML que son tan útiles para cualquiera que tenga un blog.