Curso HTML básico II

Formateo básico

Se 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árrafo

Estas son las etiquetas más importantes (excluyendo algunas que veremos más adelante):

TAG	UTILIDAD
<P>	Sirve para delimitar un párrafo. Inserta una línea en blanco antes del texto.
<CENTER> ... </CENTER>	Permite centrar todo el texto del párrafo.
<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.
<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).
<ADDRESS> ... </ADDRESS>	Para escribir direcciones (de esas donde vive la gente, no electrónicas).
<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.

 

Cambiando el tipo de letra

TAG	UTILIDAD
<B> ... </B>	Pone el texto en negrita.

Este texto está en negrita

<I> ... </I>

Representa el texto en cursiva.

Esto está ladeado

<U> ... </U>

Para subrayar algo

Como soy muy importante estoy subrayado

<S> ... </S>

Sirve 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>

Superíndice.

E=mc2

<SUB>..</SUB>

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.

 

Formato de frase

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

TAG	UTILIDAD
<CITE>...</CITE>	Para citar un texto ajeno.

Esta frase no es mía

<CODE>...</CODE>

Para escribir el 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>

Representa 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

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

Otros elementos

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

TAG	UTILIDAD
<HR>	Inserta una línea horizontal.

---

<BR>	Salto de línea.

Hay un antes y un
después de saltar a otra línea.

<!-- ... -->

Comentario.

Las 6 cabeceras

Estas etiquetas se pueden definir como de formato de párrafo pero por su importancia he preferido 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.

El HTML nos ofrece seis etiquetas distintas para mostrar cabeceras. Son éstas:

<H1>Titular de nivel 1</H1>

Titular de nivel 1

<H2>Titular de nivel 2</H2>

Titular de nivel 2

<H3>Titular de nivel 3</H3>

Titular de nivel 3

<H4>Titular de nivel 4</H4>

Titular de nivel 4

<H5>Titular de nivel 5</H5>

Titular de nivel 5

<H6>Titular de nivel 6</H6>

Titular de nivel 6

 

Hasta la próxima semana….