diciembre 28, 2010

HTML práctico para Blogs
Compartir en FacebookComparte este enlace en Facebook Compartir en TwitterComparte este enlace en Twitter

Aunque el editor de Blogger permite formatear el texto como si se estuviese trabajando con cualquier editor de texto, en mi caso como me gusta controlar todo lo que puedo prefiero usar el editor básico e intrucir cambios al texto usando Código HTML.

Hay que recordar que las pagínas web aparcieron en 1989 y están contruidas básicamente con Hypertexto que en un principio se codificaba con HTML. El hypertexto es el que permite entre otras cosas conectar paginas entre sí, formatear los textos e incrustar elementos como imágenes y otros elementos multimedia.

HTML tiene un montón de posibilidades pero aquí solo mostraré las que nos puedes servir para amononar un poco el texto de las entradas de Blogger.

Etiquetas HTML

HTML trabaja con etiquetas (tags en inglés). Toda etiqueta se encierra entre los signos menor que < y mayor que >.

Normalmente existirá una etiqueta de inicio y otra de fin. Esta última es casi igual a la de inicio salvo que lleva el signo / justo antes del nombre de la etiqueta. Ejemplo:

<ETIQUETA>Elementos Afectados por la etiqueta</ETIQUETA>

Todos los elementos del lenguaje HTML o texto incluidos dentro de la etiqueta se verán afectados por su acción.

A continuación muestro ejemplos y el efecto que se logra:

Letras en Negrita

Se usa:
<b>Estas letras están en negrita</b>
efecto:
Estas letras están en negrita

Letras en Cursiva (Itálicas)

Se usa:
<i>Estas letras están en cursiva</i>
efecto:
Estas letras están en cursiva

Letras Subrayadas

Se usa:
<u>Estas letras están subrayadas</u>
efecto:
Estas letras están en subrayadas

Letras Tachadas

Se usa:
<s>Estas letras están en tachadas</s>
efecto:
Estas letras están en tachadas

Cita de Texto

Se usa:
<blockquote>Este es un bloque que contiene una cita de texto: "A bove ante, ab asino retro, a muliere undique caveto"</blockquote>
efecto:
Este es un bloque que contiene una cita de texto: "A bove ante, ab asino retro, a muliere undique caveto". Este es un bloque que contiene una cita de texto: "A bove ante, ab asino retro, a muliere undique caveto".


Subíndices

H<sub>2</sub>O

efecto:

H2O

Superíndices

x<sup>3</sup> + x<sup>2</sup> + x + K = 0

efecto
x3 + x2 + x + K = 0

Listas

Para hacer una lista con viñetas se usa:

<ul>
<li>Primer Elemento</li>
<li>Segundo Elemento</li>
<li>Tercer Elemento</li>
<li>etc...</li>
</ul>

efecto:

  • Primer Elemento

  • Segundo Elemento

  • Tercer Elemento

  • etc...


Por cada elemento se usa <li>elemento n</li>

Para hacer una lista con número se usa:

<ol>
<li>Primer Elemento</li>
<li>Segundo Elemento</li>
<li>Tercer Elemento</li>
<li>etc...</li>
</ol>

efecto:

  1. Primer Elemento

  2. Segundo Elemento

  3. Tercer Elemento

  4. etc...


Para evitar los saltos de carro conviene juntar el código de la lista completa en una sola línea:

<ol><li>Primer Elemento</li><li>Segundo Elemento</li><li>Tercer Elemento</li><li>etc...</li></ol>

Centrar Elementos

<center>Estas letras están centradas</center>
efecto:
Estas están centradas


Alinear a la derecha

Para alinear a la derecha se puede usar:

<p align='right'>Texto alineado
a la derecha</p>

efecto:

Texto alineado
a la derecha



Colores de Texto

Para cambiar el color de los texto se puede usar lo siguiente:

<span Style="color: #FFCCCC;">Estas letras son de color Rozado</span>

efecto:

Estas letras son de color Rozado

En este caso la etiqueta de apertura contiene el atributo style que permite entre cosas especificar el color. El color se especifica a través del atributo de estilo color: #codigo_color

Algunos colores

Rojo = #FF0000

Verde = #00FF00

Azul = #0000FF

Amarillo = #FFFF00

Celeste: #00FFFF

Naranjo: #FF9900

Blanco: #FFFFFF

Negro: #000000

Para ver más colores pueden ir a Google:
http://www.google.com/search?q=colores+html&hl=es&btnG=Buscar

Saltos de carro

Para insertar saltos de carro (de línea) extras se puede utilizar la etiqueta </br>
Esta etiqueta es única, o se no hay cierre ni apertura.

Combinación de etiquetas

También se pueden combinar etiquetas para producir varios efectos en una porción de texto. Hay que tener en cuenta que las etiquetas deben estar anidadas. El orden en que se aniden no tiene impotancia pero si sebe resptar que la primera etiqueta abierta es la última en cerrarse, y la última en abrirse es la primera en cerrarse.

Ejemplo:

<b><u><span style="color: #00FFFF;">Esta letra esta en negrita, subrayada y de color celeste</span></u></b>

efecto
Esta letra esta en negrita, subrayada y de color celeste

Modificar ancho de los videos incrustados

A través del código HTML se pueden adapatar el ancho y alto de de los videos de Youtube (Daily Motion u otros). Esto lo explico en el link:
Como incrustar videos de Youtube

Letra capital

Pillé hace poco una manera de hacer letra capital, pero es un poco más complicado pues hay que crear un classe de estilo y almacenarla en la plantilla del blog. Ya explicaré como hacer eso,aí que por ahora sólo les dejo el link:
http://lineadecodigo.com/css/letra-capital/

Vea más apuntes y trucos para blogger en:
http://bufoland.blogspot.com/2009/04/ayuda-para-blogs.html

No hay comentarios.: