Formateo Básico


Formateo básicoSe pueden establecer varias categorías dentro de las etiquetas usadas para formatear el texto. Nosotros las dividiremos entre aquellas que sirven para cambiar párrafos enteros y las que son capaces de formatear tiras de caracteres dentro del párrafo.

Formato del párrafoEstas son las etiquetas más importantes (excluyendo algunas que veremos más adelante):

Etiqueta Utilidad Resultado
<P> Sirve para delimitar un párrafo. Inserta una línea en blanco antes del texto. Soy un párrafo

<CENTER> ... </CENTER> Permite centrar todo el texto del párrafo. Yo soy normal

Yo estoy centrado

<PRE WIDTH=x> ... </PRE> Representa el texto encerrado en ella con un tipo de letra de paso fijo. Muy útil a la hora de representar código fuente. El parámetro WIDTH especifica el número máximo de caracteres en una línea.

Estoy en paso fijo

<DIV ALIGN=x> ... </DIV> Permite justificar el texto del párrafo a la izquierda (ALIGN=LEFT), derecha (RIGHT), al centro (CENTER) o a ambos márgenes (JUSTIFY )

Yo estoy a la izquierda
Yo al centro
Y yo a la derecha (recuerda a la política esto, oye)
Yo soy el más chulo, porque estoy en todos los lados.

<ADDRESS> ... </ADDRESS> Para escribir direcciones (de esas donde vive la gente, no electrónicas).

Daniel Rodríguez Herrera C/Ecuador 9, 1ºB 28220 Majadahonda

<BLOCKQUOTE> ... </BLOCKQUOTE> Para citar un texto ajeno. Se suele implementar dejando márgenes tanto a izquierda como a derecha, razón por la que se usa habitualmente.

Me gustaría reencarnarme en las yemas de los dedos de Warren Beatty (Woody Allen)

Las 6 cabecerasEl HTML nos ofrece seis etiquetas distintas para mostrar cabeceras. Son éstas:

Etiqueta Resultado
<H1> ... </H1>

Cabecera de nivel 1

<H2> ... </H2>

Cabecera de nivel 2

<H3> ... </H3>

Cabecera de nivel 3

<H4> ... </H4>

Cabecera de nivel 4

<H5> ... </H5>

Cabecera de nivel 5

<H6> ... </H6>

Cabecera de nivel 6

Estas etiquetas se pueden definir como de formato de párrafo pero por su importancia he prefirido tratarlas aparte. No resulta recomendable utilizarlas para aumentar o disminuir el tamaño del tipo de letra, ya que cada navegador los muestra de manera diferente. Se usan para dividir correctamente en secciones nuestra página, tal y como se hace en un documento de texto normal.

Cambiando el tipo de letraTodas estas etiquetas nos permiten cambiar de una manera u otra el aspecto del tipo de letra que estemos utilizando y se pueden utilizar con tiras de caracteres dentro de un párrafo.

Etiqueta Utilidad Resultado
<B> ... </B> Pone el texto en negrita. Soy un texto negro como el tizón
<I> ... </I> Representa el texto en cursiva. Estoy ladeado
<U> ... </U> Para subrayar algo. Como soy muy importante estoy subrayado
<S> ... </S> Para tachar. A mí, en cambio, nadie me quiere
<TT> ... </TT> Permite representar el texto en un tipo de letra de paso fijo. No soy variable
<SUP> ... </SUP> Letra superíndice. E=mc2
<SUB> ... </SUB> Letra subíndice. ai,j=bi,j+1
<BIG> ... </BIG> Incrementa el tamaño del tipo de letra. Soy GRANDE
<SMALL> ... </SMALL> Disminuye el tamaño del tipo de letra. Creí ver un lindo gatito
<BLINK> ... </BLINK> Hace parpadear el texto. Resulta algo irritante. ¿Molesto?

Formato de fraseEn estos elementos indicas el tipo de información que encierran las etiquetas, pero no como se representan:

Etiqueta Utilidad Resultado
<CITE> ... </CITE> Para citar un texto ajeno. Esta frase no es mía
<CODE> ... </CODE> Para escribir código fuente. int x=0;
<STRONG> ... </STRONG> La cosa es importante. Hay cosas importantes.
<EM> ... </EM> Para dar énfasis. Hay que poner énfasis en algunas cosas.
<KBD> ... </KBD> Texto tecleado por el usuario. El usuario debe teclear Multivac es el mejor.
<VAR> ... </VAR> Representar variables de un código. La variable x, definida anteriormente…
<SAMP> ... </SAMP> Para representar una serie de caracteres literalmente. Estoy en un literal
<ABBR> ... </ABBR> Abreviaturas. La WWW usa el protocolo http

No son muy utilizados, ya que no permiten tener un control exacto de la manera en que la página se representará finalmente.

Otros elementosPor último, debemos estudiar algunas cosas que no son texto y que podemos incorporar a nuestra página.

Etiqueta Utilidad Resultado
<HR> Inserta una barra horizontal.


<BR> Salto de línea. Hay un antes y un
después de saltar a otra línea
<!-- ... --> Comentarios. Esto se escribe y <!– esto no –>

Aquí tenemos en un ejemplo casi todas las etiquetas estudiadas:

Mi segunda pagina

La primera version de esta pagina


Esta es mi primera pagina (chispas). Por el momento no se que tendra, pero dentro de poco pondre aqui muchas cosas interesantes.

La primera version de esta pagina, ahora actualizada


Esta es mi primera pagina (chispas). Por el momento no se que tendra, pero dentro de poco pondre; aqui muchas cosas interesantes.

Y esta es la segunda version

Ya tenemos aqui las cosas interesantes. Tenemos a mi novia Loli diciendo que

Como me pongas en tu pagina te atizo.

Tambien podemos a ver a mi querido perro fufu diciendo guau, guau y, sobre todo, el codigo fuente de este ejemplo:

<HTML>
<HEAD>
  <TITLE>Mi segunda pagina</TITLE>
</HEAD>

<BODY>
<DIV ALIGN=CENTER><H1>Mi segunda pagina</H1></DIV>

<H2>La primera version de esta página</H2>
<HR>
<P>Esta es mi primera pagina (chispas). Por el momento no se que
tendra, pero dentro de poco pondre aqui muchas cosas
interesantes.

<BR><BR><H2>La primera version de esta pagina, ahora actualizada</H2>
<HR>
<DIV ALIGN=CENTER>Esta es mi <STRONG>primera</STRONG> pagina (<I>chispas</I>). Por el
momento no se que tendra, pero <S>dentro de poco</S> pondre
<EM>aqui</EM> muchas cosas <B>interesantes</B>.</DIV>

<BR><BR><H2>Y esta es la segunda versión</H2>
<P>Ya tenemos aqui las cosas interesantes. Tenemos a mi novia
<BIG>Loli</BIG> diciendo que <BLOCKQUOTE>Como me pongas en tu pagina te atizo.</BLOCKQUOTE>
Tambien podemos a ver a mi querido perro <SMALL>fufu</SMALL> diciendo <CITE>guau, guau</CITE> y,
sobre todo, el codigo fuente de este ejemplo:
<PRE>
<!-- Aqui estaria el codigo fuente que no voy a poner porque
   entrariamos en un circulo vicioso.-->
</PRE>
</BODY>
</HTML>

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s

A %d blogueros les gusta esto: