Un poco de HTML para tu blog

< > Si eres de a los que le gusta aplicarle un poco de estilo a tu blog, deberias leer un poco de lo que menciono aqui, que son cosas ustiles de HTML que puedes usar en tu blog:

1.Texto:

Muy bien, aqui explico unos pocos trucos para el texto, como negrita, cambiar fuente, etc.

Primero empecemos con como agregar negrita a un texto , supongamos que tenemos el siguiente texto:

En Linux existen varios manejadores de paquetes, entre los cuales tenemos basicamente, dos tipos de distribuciones: Las que utilizan apt y las que utilizan…. me olvide!

Un lector leera todo, y poco agarrara, en vez, si queremos que agarre algo de eso, tendriamos que poner en negrita (dandole importancia) a lo que pensamos que se lo merece, para utilizar negrita ponemos esto : <strong>Texto</strong>. Supongamos que ponemos “apt” entre las etiquetas strong, entonces quedaria asi:

En Linux existen varios manejadores de paquetes, entre los cuales tenemos basicamente, dos tipos de distribuciones: Las que utilizan apt y las que utilizan…. me olvide!

Ahora vamos con cursiva, para eso utilizaremos la etiqueta <em>, pongamos de ejemplo el texto anterior:

En Linux existen varios manejadores de paquetes, entre los cuales tenemos basicamente, dos tipos de distribuciones: Las que utilizan apt y las que utilizan…. me olvide!

Ahora acabamos de subrayar Linux con “em”, para eso hacemos <em>Linux</em> . Debemos recordar cerrar siempre una etiqueta que abrimos, las etiquetas se abren con <etiqueta> y se deben cerrar con </etiqueta>.
Ahora vamos con el cambio de fuente, para eso usamos la etiqueta <font face = “fuente”>, tambien podemos definir el color con <font face = “fuente” color = “color”> por ejemplo, digamos que el texto anterior queremos que este en consolas y que el color sea rojo, entonces, seria asi:

En Linux existen varios manejadores de paquetes, entre los cuales tenemos basicamente, dos tipos de distribuciones: Las que utilizan apt y las que utilizan…. me olvide!

Entonces ponemos : <font face = “consolas” color = “red”> y, al final del texto va un </font> aunque, el wordpress me lo traduce siempre a <span style=”font-family: consolas; color: red;”> y despues </span> quizas esa sea la correcta ahora, pero en el mini manual que me lei se utilizaba font y no span. Supongo que sera por gustos :S
Ahora ya sabemos cambiarle el color, la fuente y negrita-cursiva. Ahiora vamos con como poner un titular:

Distribuciones Linux

Para eso, se utiliza <hx> donde X es un numero del 1 al 7, siendo el 1 el encabezado mas grande y 7 el menos importante, y al final, como siempre se pone un </hx> Yo recomiendo usar la etiqueta strong para subrayar mas los encabezados.
Ahora, una cosa importante sobre el html es que, aunque pongas mil espacios y mil nuevas lineas, siempre te lo va a leer como un espacio, ni siquiera te lee las lineas nuevas. Para que te las lea debes usar la etiqueta <pre> y despues </pre> por ejemplo, el siguiente texto tiene muchos espacios:

Muchos espacios

Pero no se muestran, asi que si aplicamos pre debe quedar asi:

Muchos                        espacios

Esto es util cuando lo combinas con la etiqueta <code> que es para introducir codigo y que se vea “nice”.
Pero que hay de las palabras marcadas asi como se hacen? Con la etiqueta <del> con su correspondiente </del> al final del texto.
Ejemplo: <del>texto</del>
Otra buena tecnica es la de blockquote que se usa para citar textos, y que es la que e estado utilizando para los ejemplos, la etiqueta se usa asi: <blockquote>Texto</blockquote>

Listas

Aqui pongo una introduccion basica a las listas desordenadas porque el tema es largo y estas son las mas usadas. Para crear una lista necesitas dos etiquetas, la que crea la lista y las que crean los elementos.
<ul>
<li>Libros</li>
<ul>
Produce lo siguiente:

• Libros

Por lo que se ve, li crea elementos de la lista y ul crea una lista. Puedes crear cuantos elementos quieras, y tambien puedes hacer listas anidadas, por ejemplo, lo siguiente:
<ul>
<li>Cosas que me gustan</li>
<ul>
<li>Linux</li>
<li>Pizza</li>
<li>Footbal</li>
</ul>
<li>Cosas que no me gustan</li>
<ul>
<li>Windows</li>
<li>Software Privativo</li>
<li>Microsoft</li>
</ul>
</ul>

Genera:

• Cosas que me gustan
  • Linux
  • Pizza
  • Footbal
• Cosas que no me gustan
  • Windows
  • Software Privativo
  • Microsoft

Esa es una lista anidada, tu puedes llegar al nivel de anidacion que quieras, pero pasarse del 5 me parece exagerado. Por ultimo, si quieres que tu lista sea en numero romanos debes poner lo mismo pero cambian el <ul> por <ul type = “I”> asi:

<ul type = “I”>
<li>Cosas que me gustan</li>
<ul type = “I”>
<li>Linux</li>
<li>Pizza</li>
<li>Footbal</li>
</ul>
<li>Cosas que no me gustan</li>
<ul type = “I”>
<li>Windows</li>
<li>Software Privativo</li>
<li>Microsoft</li>
</ul>
</ul>

Que genera:

• Cosas que me gustan
  • Linux
  • Pizza
  • Footbal
• Cosas que no me gustan
  • Windows
  • Software Privativo
  • Microsoft

Ahora, hay bastantes “types” pero yo solo me se el default y el de i mayuscula = I, para los numeros romanos.

Tablas Basicas

Aqui introduzco el manejo de tablas basicos que tampoco es tan dificil, para crear una tabla se utiliza <table>, pero eso crea la tabla.

<table>
…
</table>

Ahora, vamos a agregarle el enacbezado:

<table>

<thead>
…
</thead>

</table>

Ahora vamos con el cuerpo:

<table>

<thead>
…
</thead>

<tbody>
…
</tbody>
</table>

Ahora un pequeño ejemplo:

<table>

<thead>

<tr>
<th>Nueva Tabla, Elemento 1</th>
<th>La misma tabla, Elemento 2</th>
<tr>

</thead>

<tbody>
</tr>
<td>Elemento1 de columna 1</td>
<td>Elemento2 de columna 1</td>
</tr>
<tr>
<td>Elemento1 de columna 2</td>
<td>Elemento2 de columna 2</td>
</tr>

</tbody>
</table>

Que deberia generar:

Nueva Tabla, Elemento 1	La misma tabla, Elemento 2
Elemento1 de columna 1	Elemento2 de columna 1
Elemento1 de columna 2	Elemento2 de columna 2

Como vemos, el elemento tr dentro del cuerpo crea una nueva columna mientras que td crea una nueva fila, al igual que antes, se pueden crear tantas columns/filas como sea necesario. En el encabezado, el elemento tr se usa para crear una columna de encabezado, en casi todas las tablas, solo se crea una, pero puedes crear varias. Y el elemento th crea una fila.

Enlaces

Los enlaces son generalmente muy basicos y muy sencillos, un ejemplo sencillo seria decir <a href =” direccion”>clickee aqui</a> lo cual hari un enlace a la direccion señalada. Eso es todo lo que tienes que saber para usarlos.

Acronym

GNU Ese es un buen ejemplo de su uso, si pones el mouse sobre GNU te dira lo que significa, para utilizarlo solo debes poner: <acronym title = “definicion”>texto</acronym> y listo

Imagenes

Para insertar una imagen en una pagina, solo debes poner: <img src = “lugarDeImagenEnWeb” width = “ancho” height = “alto” style = “float:(right, left o center)” /> y la imagen se insertara. Tambien puedes hacer listas de imagenes, tablas con imagenes, etc.

Ejemplo de Entrada para Blog

A continuacion el codigo para una entrada en un blog editada en html, con su codigo y lo que hace:

Hola ultimamente me he pasado no he salido nunca de la red y veo que hay muchas personas que tienen problemas con:

• Linux
  • Compilacion de Paquetes
  • Configuracion
  • Aplicaciones
  • Utilidades
• Windows
  • Demasiados Bugs
  • Esta pagina

Claro, que lo de Linux puede ser porque sean venidos de microsoft, pero cabe destacar lo que dijeron los monos cuando fueron a la luna:

Era de queso, en realidad

Y es que esta entrada no tiene sentido, porque no esta escrita en recursividad rojo ytampoco en consola pero ahora si, asi que a divertirse, pero mejor creo una tabla

Linux	Windows
Establilidad	BSOD
Comandos	10 Comandos
Permisos correctos	Estupido uso de administrador

Te gusto?

Ahora el codigo

<b>Hola</b> ultimamente me he pasado <del>no he salido nunca</del> de la red y veo que hay muchas personas que tienen problemas con:
<ul>
<li>Linux</li>
<ul>
<li>Compilacion de Paquetes</li>
<li>Configuracion</li>
<li>Aplicaciones</li>
<li>Utilidades</li>
</ul>
<li>Windows</li>
<ul>
<li>Demasiados Bugs</li>
<li><a href = “http://www.microsoft.com”>Esta pagina</a></li>
</ul>
</ul>
Claro, que lo de <em> Linux </em> puede ser porque sean venidos de microsoft, pero cabe destacar lo que dijeron los monos cuando fueron a la luna:
<blockquote>Era de queso, en realidad</blockquote>
<img src = “http://agaudi.files.wordpress.com/2007/01/mono.jpg” width = “100″ height = “100″ style = “float:right” />
Y es que esta entrada no tiene sentido, porque no esta escrita en <acronym title = “Vea recursividad”>recursividad</acronym> <font face = “consolas” color = “red”>rojo y tampoco en consola pero ahora si, asi que a divertirse, pero mejor creo una tabla</font>
<table>
<thead>
<tr>
<th>Linux</th>
<th>Windows</th>
</tr>
</thead>
<tbody>
<tr>
<td>Establilidad</td>
<td>BSOD</td>
</tr>
<tr>
<td>Comandos</td>
<td>10 Comandos</td>
</tr>
<tr>
<td>Permisos correctos</td>
<td>Estupido uso de administrador</td>
</tr>
</tbody>

</table>
Te gusto?

Listo

Esto, como dice la entrada es un tuto para el blog, no esta pensado para paginas web grandes, aunque quizas publiqiue para esas tambien cuando tenga un poco de tiempo.