domingo, 16 de agosto de 2009

Códigos muy básicos de HTML para edicción del blog

En el código html.lenguaje que usamos para que los navegadores de internet interpreten nuestras instrucciones, las indicaciones se hacen así:

<comando>texto afectado</comando>

Pudiendo acumularse más de un comando en el mismo texto (Por ejemplo, si queremos que además de en negrita, un texto salga subrayado):

<comando1><comando2>texto afectado</comando></comando2>

O podemos afectar diferentes porciones del texto con diferentes comandos (El comando deja de efectuarse en el momento que aparece su etiqueta de cierre)

<comando1><comando2>texto</comando1>afectado</comando2>

Esta es la forma habitual que usaremos para el tratamiento de "cosas" (texto, imágenes, otros sub-códigos insertados, etc.) que deben ser afectadas por esos comandos. Sin embargo, también podemos encontrar códigos que no afecten a ninguna "cosa", sino que ellos sean la cosa (salto de línea, una raya...); estos se insertarán tal cual, y no tendrán apertura y cierre.

Blogueros, somos muchos pero programadores hay no tantos. Por eso, la forma más común para desarrollar un blog efectivo, es conocer lo básico de html y el resto de códigos complicados los copiaremos y pegaremos (siguiendo sus indicaciones) desde las páginas y blogs de los que saben y tienen la generosidad de compartirlo con los demás. Os recomiendo:
Gem@ BLOG
El escaparate de Rosa
Blog & web (Muy recomendable, esta chuleta)
Vagabundia
La bloguería
Blogtenia y sociedad (De mi amigote, Carlos Soler)
entre otros muchos.



Veamos algunos de esos códigos básicos que nos enseñan:

<b> este texto saldrá en negrita </b>

este texto saldrá en negrita



<i> este texto saldrá en cursiva </i>

este texto saldrá en cursiva



<u> este texto saldrá subrayado </u>

este texto saldrá subrayado



<center> este texto saldrá centrado </center>



este texto saldrá centrado




<blink> este texto saldrá parpadeante </blink>

este texto saldrá parpadeante



<b><blink> este texto saldrá pardadeante (y negrita hasta aquí) </b> y aquí sólo parpadeante </blink>

este texto saldrá pardadeante (y negrita hasta aquí) y aquí sólo parpadeante




Cuando el código de un post (o un gadet) comienza a ser muy largo y se nos complica orientarnos, podemos insertarnos comentarios invisibles al navegador "pistas o explicaciones" nosotros mismos en el código de nuestro post, porque el navegador lo ignorará.

<!--En este espacio comienzo a desarrollar la parte graciosa--> (Esto es lo que ponía al principio de este párrafo)



Para forzar una salto de línea se usa (aquí la inserto)
la etiqueta única

<BR/>



Para recuadrar un texto de citación
Mi mamá siempre decía
La vida es como una caja de bombones...


Mi mamá siempre decía que ... <BLOCKQUOTE> La vida es como una caja de bombones...
</BLOCKQUOTE>



Para linkear (dirigir a una página web, un click de ratón sobre una palabra, imagen, etc..):
!éste, es un post la leche de majo!

<a href="http//www.dirección de url"> !éste, es un post la leche de majo! (texto que debe enlazar con esa dirección) </a>



Tamaño del texto:

Para tamaños, podemos usar estos tags (o etiquetas)

<hx>Texto</hx>:

donde x es un valor que podemos modificar desde 1 a 7, tal que así::

<h1>Texto 1</h1>

Texto 1



<h4>Texto 4</h4>

Texto 4



<h6>Texto 6</h6>

Texto 6


O pòdemos usar las etiquetas que especifican el tamaño de la fuente:

<font size="3">este </font> <font size="4">texto </font>
<font size="5">crece </font> <font size="5"> ydecrece </font> <font size="4">otra </font><font size="3">vez. </font>

este texto crece ydecrece otra vez.



Para cambiar el tipo de fuente:

<font face="times new roman">Texto en Times New Roman </font> <font face="arial">Texto en Arial </font><font face="courier new">Texto en Courier New </font><font face="courier">Texto en Courier </font> <font face="roman">Texto en Roman </font>

Texto en Times New Roman  Texto en Arial Texto en Courier New Texto en Courier  Texto en Roman 



Para cambiar el color de la fuente:

Podemos usar el tag con el nombre genérico en ingles del color:

<font color="blue">Texto rojo</font>

Texto rojo

o podemos especificar el color en su código  RGB: 

<span style="color: #ff0000;">Texto en rojo</span>

Texto en rojo
Por suepuesto, estos códigos son complementarios entre sí:

<font face="times new roman" size="5" color="green">Texto verde, en Times New Roman, tamaño 5</font>

Texto verde, en Times New Roman, tamaño 5

1 comentarios:

psique dijo...

Qué útil este pequeño tutorial de HTML. Imprescindible tenerlo cerca cuando uno tiene, además, tan mala cabeza como yo.

Un besazo