Ahora que conocemos las estructura básica de una página, podemos empezar a agregarle algo de contenido.

Una de las características principales de una página web es que, cuando ingresamos un texto, este se va a “acomodar” al tamaño de la ventana sin que tengamos que agregar ninguna instrucción o carácter especial. Por el contrario, si queremos separar el texto en distintos párrafos debemos indicarlo y para eso usamos la etiqueta <P> </P>:

[Este es un párrafo.]
<P>
    [Y este es otro, entre ambos se verá una línea en blanco.]
</P>

Los navegadores no reconocen ni saltos de línea ni tabulaciones ni espacios en blanco extras a menos que se lo indiquemos de manera específica, de tal manera que, un código escrito así:

[Esto lo escribo en una línea. ]
[Y esto lo escribo en otra.]
[Y aquí dejo         10 espacios en blanco.]

Se verá así:

Esto lo escribo en una línea. Y esto lo escribo en otra. Y aquí dejo 10 espacios en blanco.

El atributo align en la etiqueta P permite especificar la alineación del párrafo. Puede tener tres valores: “center“, “left” y “right” (centrado, a la izquierda y a la derecha):

<P ALIGN="left">
    [a la izquierda (es el valor por defecto)]
</P>
<P ALIGN=”center”>
    [en el centro]
</P>
<P ALIGN=”right”>
    [a la derecha]
</P>

a la izquierda (es el valor por defecto)

en el centro

a la derecha

De manera elemental podemos dar formato a los textos utilizando etiquetas especiales: los encabezados:

<H1> ... </H1>
<H2> ... </H2>,
<H3> ... </H3>
<H4> ... </H4>
<H5> ... </H5>
<H6> ... </H6>

Cada una de esta etiquetas mostrará el texto comprendido entre ellas son un tamaño distinto donde, por defecto, H1 será el mayor y H6 el menor.

<H1>
<H2> <H3>
<H4> <H5> <H6>

Otra etiqueta elemental, <CENTER> </CENTER>, permite central los textos (y cualquier otra cosa comprendida entre ellas) en la pantalla:

<CENTER>
    [Este texto estará centrado]
</CENTER>
[Este texto estará NO estará centrado]

Los separadores se consiguen con la etiqueta <HR / > (horizontal rules) y esta es una de las pocas etiquetas que no posee cierre. Con ella se obtiene una raya horizontal tan ancha como la pantalla, y con la apariencia de estar embutida sobre el fondo:

<HR />
    [Este texto está comprendido entres dos líneas horizontales]
<HR />

Esta etiqueta tiene los siguientes atributos:


align=left|center|right alineación
noshade (sin sombra) algunos navegadores muestran las líneas horizontales con un efecto tridimensional con sombra y este atributo elimina el efecto
size=valor grosor de la línea em pixeles
width=valor ancho de la línea

Aunque los navegadores no lo requieran, es conveniente que nos acostumbremos a agregarle la barra de cierre.

IMPORTANTE: cuidar el orden en que se colocan las etiquetas.

Como una etiqueta puede estar incluida (anidada) dentro de otra, debe respetarse el orden de inicio y de cierre, esto es, la jerarquía. Y siempre debe cerrarse la última etiqueta abierta.

Este código es incorrecto

<CENTER>
    <P>
        [un texto centrado en la pantalla.]
    </CENTER>
    </P>

La forma correcta de escribirlo sería esta:

<CENTER>
    <P>
        [un texto centrado en la pantalla.]
    </P>
</CENTER>

Aunque las indentaciones del texto no son necesarias, es conveniente utilizarlas para visualizar los elementos y comprender donde comienzan y donde terminan.

EJEMPLO PRACTICO:

En un procesador de textos cualquiera escribimos lo siguiente:

<HTML>
    <HEAD>
    <TITLE>La primera pagina</TITLE>
    </HEAD>

    <BODY>
        <H1>
            <CENTER>Este es el título</CENTER>
        </H1>
        <HR />
        Y aquí se coloca un texto cualquiera.
        Aunque lo escribamos en líneas separadas, los navegadores
        mostrarán un sólo párrafo. Para separar un texto de otro,
        debemos utilizar la etiqueta P:

        <P>
            Lorem ipsum dolor sit amet,
            consectetuer adipiscing elit,
            sed diam nonummy nibh euismod
            tincidunt ut laoreet
            dolore magna aliquam erat volutpat.
        </P>

    </BODY>
</HTML>

Ahora, guardamos el archivo con el nombre que se nos ocurra pero con extensión HTM o HTML y lo abrimos con el navegador.