Recientes


Home » , » Formateando texto

Formateando texto

Continuando con el curso HTML, hoy voy a hablar sobre las etiquetas relacionadas al texto. Este es un tema un poquito mas extenso como para un post solo asi que seguramente lo divida en 2 o 3 posts ya que no quiero dejr  nada por el camino. No voy a explicar muy detalladamente cada etiqueta por que creo que no es necesario, creo que bastaria con ejemplos para apreciar la funcion de cada etiqueta.

En tutoriales anteriores ya estuvimos hablando algo sobre el formato de texto. Aprendimos a usar las Negritas Cursiva y subrayado  sin embargo voy a repetir estas cosas para que quede un poco mas ordenado el curso.

Texto en Negrita

Para poner texto en negrita tenemos dos opciones: la etiqueta <b></b>  o  <strong></strong> ambas daran el mismo resultado, por lo que es recomendable usar  B  ya que es menos para escribir XD.

Ejemplos:

<b>Texto en negrita usando B</b>
<strong>Texto en negrita usan STRONG</strong>


Resultado:


Texto en negrita usando B
Texto en negrita usan STRONG

Cabe destacar una cosa sobre las diferencias entre B y STRONG. B quiere decir texto en negrita minetras que STRONG es un texto resaltado. Si hacemos pruebas obtendremos los mismo resultados pero no siempre. Cada navegador interpretara estas etiquetas de una manera distinta. La etiqueta B sera reconocida como negrita en cualquier navegador, en cambio STRONG puede aparecer como ngrita en un navegador o con un subrayado o color rojo en otros navegadores. Por experiencia propia en los navegadores mas usados como IE y Mozilla firefox no he encontrado diferencia entre estas etiqueta pero vale la pena destacar este punto.

Texto en Cursiva

La cursiva tambien conocida como italica la aplicaremos usando la etiqueta <i></i>  Tenemos otra opcion para aplicar una cursiva que es usando la etiqueta <em></em> la cual nos dara una cursiva con una inclinacion un poco mas larga. Lo mas normal en la mayoria de webs es usar la etiqueta <i></i>  ya que es mas facil de recordar (i  de italica)


Ejemplo:

<i>Texto en Cursiva</i>


 Resultado:

Texto en Cursiva


Texto Subrayado 


Para aplicar un texto subrayado vamos a utilizar la etiqueta  <u></u> (underlined)

Ejemplo:

<u>Texto subrayado</u>


 Resultado:

Texto subrayado


Subindices y Supraindices

Personal mente yo no soy de usar estos formatos, mas bien nunca he tenido porque hacerlo, pero son muy utiles para expresar formulas matematicas o quimicas (por ej). Para los subindices usaremos la etiqueta <sub></sub>  y para los supraindices <sup></sup>

Ejemplos:

Sub indice: H<sub>2</sub>O es la formula del agua
SupraIndice:  x<sup>2</sup> + 2y = -2y <sup>3</sup>

Resultado:

Sub indice: H2O es la formula del agua
SupraIndice: x2 + 2y = -2y 3

Combinar etiquetas

Esto es algo de lo que ya se hablo pero vamos a profundizar un poco por si quedo algo en el camino.

Es muy posible que necesitemos combinar varias de estas etiquetas para formatear nuestro texto. En estos casos tenemos que ser lo mas ordenados posible. Por varios motivos, para que al momento de editar nuesto codigo sea mas comprensible leerlo y buscar las partes que qeuramos editar, y por supuesto para evitar los errores.

Al escribir nuestro codigo tenemos que analizar la prioridad de nuestra etiquetas. Por ej. Si estamos usando B como etiqueta principal del parrafo esta debe ser cerrada al final, y antes de ella todas las secundarias, voy con unos ejemplos mas practicos:

Este texto esta en negrita y este en negrita y cursiva

la manera correcta de escribir esto es asi:

<b>Este texto esta en negrita <i>y este en negrita y cursiva</i></b>

Vemos que Abro en primer lugar la etiqueta B  en segundo lugar la etiqueta I y al momento de cerrarlas cerre B al final. Como decia en oto tutorial la manera mas facil de comprender esto es "lo que mas a la izquierda esta al incio mas a la derecha en el cierre"

De esta manera esta MAL escrito:


<b>Este texto esta en negrita <i>y este en negrita y cursiva</b></i>

Si hacemos la prueba veran que va a funcionar del mismo modo, la diferencia es que el navegador tendra que "pensar" mas para resolver estos errores provocando un tiempo de carga mayor (lo cual no es la idea) y segun a que valla destinado nuestra pagina es posible que no funcione (por ej si usamos XHTML)


Eso es todo amigos diria el viejo Bunny para el proximo post continuare con el formato de texto: Colores, tipos de letra y anda a saber que mas
Share this article :

No hay comentarios:

 
Support : Creating Website | Johny Template | Mas Template
Copyright © 2011. Hazlo Tu Mismo - All Rights Reserved
Template Modify by Creating Website
Proudly powered by Blogger