tutorial de HTML

A veces es necesario escribir comentarios o aclaraciones en el documento, de tal manera de recordar lo que hicimos pero no queremos que se vean en pantalla. Esto se consigue encerrándolos entre los símbolos: <!−− y −−> Por ejemplo:

<!-- Esto es un comentario al que no se verá en pantalla -->

Cuando queremos poner un texto sin ninguna característica especial, simplemente lo escribimos. La separación entre párrafos (dejando una línea en blanco) la conseguimos con la etiqueta <P>.

Si queremos separar los párrafos (o cualquier otro elemento), pero sin dejar una línea en blanco, debemos usar la etiqueta <BR /> (break, o romper). Esta etiqueta tampoco tiene etiqueta de cierre así que le agregamos la barra final.

Si queremos obtener múltiples líneas en blanco no es suficiente repetir la etiqueta <P>, hay que combinarla con <BR />. Por ejemplo, si queremos obtener cuatro líneas:

<BR /> <P> </P>
<BR /> <P> </P>
<BR /> <P> </P>
<BR /> <P> </P>

Al escribir el texto, si ponemos más de un espacio en blanco entre dos palabras el navegador sólo reconocerá uno de ellos. Debemos indicárselo en forma explícita utilizando el código &nbsp; (non-breaking space).

Las etiquetas <B> </B> (bold) permiten destacar alguna parte del texto. Las etiquetas <I> </I> (italic) muestran el texto en cursiva.

Lo mismo puede hacerse con otras dos etiquetas alternativas, <STRONG> </STRONG> que ponen el texto en negrita y <EM> </EM> en cursiva.

en negrita utilizando la etiqueta B


y en negrita utilizando la etiqueta STRONG


en itálica utilizando la etiqueta I


y en itálica utilizando la etiqueta EM

Hay más etiquetas simples para dar formato, <STRIKE> </STRIKE> o <S> </S> muestran el texto tachado, <U> </U> lo muestra subrayado:

texto TACHADO con la etiqueta S


y texto TACHADO con la etiqueta STRIKE


texto subrayado con la etiqueta U

Las etiquetas de formato pueden aplicarse individualmente o combinarse

<STRONG>
    <EM>
        <CENTER>
            texto en negrita, itálica y centrado
        </CENTER>
        texto en negrita, itálica y no centrado
    </EM>
    texto en negrita
</STRONG>

En matemáticas se utilizan índices y subíndices, estos se consiguen escrbir con las etiquetas <SUP> </SUP> y <SUB> </SUB> respectivamente. Por ejemplo, si quisiéramos escribir m² para indicar metros cuadrados:

m<sup>2</sup>

Para escribir V_x:

V<sub>x</sub>

Para controlar cambiar el tamaño de las fuentes hay dos etiquetas de uso frecuente que permiten aumentarlo o disminuirlo, son <BIG> </BIG> y <SMALL> </SMALL>:

Tamaño de texto normal: ABCDEFG abcdefg 01234567


Utilizando BIG: ABCDEFG abcdefg 01234567


Utilizando SMALL: ABCDEFG abcdefg 01234567

Anidando estas etiquetas, el efecto se va acumulado ya que toma como referencia el tamaño del texto anterior:

    [texto normal]
    <BIG>
        texto grande
        <BIG>
            aún más grande
            <BIG>
                mucho más grande
            </BIG>
        </BIG>
    </BIG>

[texto normal]


texto grande


aún más grande


mucho más grande

Otra etiqueta que permite que formateemos es <PRE> </PRE>. El texto que se encuentre entre ella estará preformateado, por defecto, aparecerá con una fuente de espaciado fijo (tipo Courier) pero lo más importante es que se respetarán los espacios en blanco y saltos de línea, tal y como estaban en el documento HTML.

<PRE>
este texto
    preformateado
        se mostrará
            tal y como lo escribamos
</PRE>

Se verá así:

este texto
    preformateado con PRE
        se mostrará
            tal y como lo escribamos

Aunque no es muy utilizada, la etiqueta <TT> </TT> (typewriter) muestra el texto de un tamaño levemente menor y con la apariencia de haber sido escrito con una máquina de escribir . La diferencia con la anterior es que no preformatea el texto, sino que únicamente cambia su apariencia.

este texto
preformateado con TT
no se mostrará
tal y como lo escribamos


La etiqueta <BLOCKQUOTE> </BLOCKQUOTE> generalmente la utilizamos para destacar una cita textual dentro del texto general. Este párrafo está escrito entre ambas etiquetas.

Para terminar, hay algunas etiquetas especiales que no se utilizan para dar formato sino para identificar el tipo de texto.

CITE se utiliza cuando el texto es una cita o una referencia, DFN indica que se define el término y VAR que el texto es una variable o un argumento, por defecto, se muestran en itálica:

ABBR se usa para indicar que el contenido es una abreviatura, ACRONYM para indicar que es un acrónimo y Q para citas cortas. Ninguna de las dos posee un formato predefinido:

Con CODE designamos un fragmento de código, con KBD indicamos que el texto debería ser introducido por el usuario y con SAMP que estamos mostrando la salida de un programa, script, etc. en ambos casos, el formato de salida es similar a TT:

INS se usa para indicar que un texto se ha insertado en el código y DEL para indicar que un texto se ha borrado:

Un texto dentro de la etiqueta INS


Un texto dentro de la etiqueta DEL

La mayoría de estas etiquetas se muestran de manera diferente según el navegador. Esto se debe a que, en general, al no ser de uso común, no se les asigna un formato y utilizan el predeterminado.