Writing HTML | Acerca de | FAQ | Alumnos | Tags | Lecciones | anterior | siguiente |

20. Alineamiento Extra

Objetivos

• Crear texto alineado en el centro de la p·gina.
• Alinear im·genes y bloques de texto.
• Crear texto con justificaciÛn derecha.

LecciÛn

AlineaciÛn del Texto

Esto nos lleva a una de esas curiosas situaciones de NetScape vs. HTML "est·ndar". NetScape introdujo una extensiÛn HTML -la etiqueta <center>...</center>- que alineaba todo lo que contuviera en el centro de la p·gina. øTiene sentido? Bien, si hablamos desde el lenguaje mark-up purista, el alineamiento es un atributo . Un cÛdigo m·s general para centrar texto es una variaciÛn de la etiqueta <p>:

  <p>
  bla bla bla
  <img src="archivo.gif"><br>
  bla bla
  </p>

La mayorÌa de los Browsers y el HTML 3.2 est·ndar soportan la etiqueta de NetScape <center>...</center>. Recuerde que si un Browser no soporta una etiqueta simplemente la ignorar·.

Para ver el efecto del centrado compare:

Ahora modificaremos nuestra p·gina de entrada (index.htm) para usar la etiqueta de centrado con la lista de secciones. Haremos tambiÈn otros cambios para mejorar su aspecto.

1. Abra el archivo index.htm en su editor de textos.
2. Busque la secciÛn que dice:

     <B>En Esta LecciÛn...</B>
     <ul>
     <i>
     <li><A HREF="intro.htm">IntroducciÛn</A>
     <li><A HREF="term.htm">TerminologÌa de Volcanes</A>
     <li><A HREF="usa.htm">Lugares Volc·nicos en USA</A>
     <li><A HREF="mars.htm">Lugares Volc·nicos en Marte</A>
     <li><A HREF="proj.htm">Proyectos de InvestigaciÛn</A>
     </i>
     </ul>

   y sustit™yala por lo siguiente:

     <p align=center>
     <font size=+1>
     <i>
     <A HREF="intro.htm">IntroducciÛn</A><br>
     <A HREF="term.htm">TerminologÌa de Volcanes</A><br>
     <A HREF="usa.htm">Lugares Volc·nicos en USA</A><br>
     <A HREF="mars.htm">Lugares Volc·nicos en Marte</A><br>
     <A HREF="proj.htm">Proyectos de InvestigaciÛn</A><br>
     </i>
     </font>
     </p>
   

3. Salve y Abra en su web Browser.

NOTA: Observe cuidadosamente los cambios que hemos realizado. Toda esta secciÛn se encierra entre las etiquetas <p align=center>..</p> de alineado. La lista sin ordenar que construÌmos en la lecciÛn 6 podrÌa aparentar mal centrada (los "topos" podrÌan bailar) AsÌ que hemos quitado la estructura <ul><li>...<li>...</ul>. Las etiquetas <br> al final de cada lÌnea fuerzan un salto de lÌnea. Y, finalmente, hemos aÒadido una etiqueta <font>...</font> aumentar el tamaÒo del texto.

Si lo desea puede usar las etiquetas <center>...</center> en vez de <p align=center>...</p>

Se puede centrar cualquier etiqueta de encabezado <hN>...</hN> sin m·s que aÒadir el atributo:

  <hN align=center>bla bla bla</hN>

1. Abra todos sus documentos HTML en su editor de textos.
2. Para cada uno edite el texto que aparece cerca de la parte superior, en las etiquetas <h1> o <h2>, siguiendo el ejemplo para el archivo intro.htm:

     <h2>IntroducciÛn</h2>

   a:

     <h2 align=center>IntroducciÛn</h2>

3. Salve y Actualice en su web Browser.

NOTA: Existe tambiÈn un atributo de alineaciÛn para la etiqueta <hr> que tiene cierta relevancia con las dem·s opciones que vimos en la lecciÛn 19 "Separadores F·ciles". Cuando se especifica una anchura m·s pequeÒa para una lÌnea se puede especificar tambiÈn si va a estar alineada a la izquierda o la derecha (el valor inicial es centrar las lÌneas):

  <hr size=8 width=60% align=right>

will produce:

mientras que si usamos alineaciÛn izquierda

  <hr size=8 width=60% align=left>

produce:

Alineando Im·genes y Texto

Con el atributo align de la etiqueta <img> ahora se puede especificar que la imagen se alinee en el margen derecho o izquierdo de la p·gina. Pero hay m·s, podemos colocar cualquier HTML de modo que rellene el espacio vacÌo. Para ello se hace:

  <img src="nombre_de_archivo.gif" align=right>
  <img src="nombre_de_archivo.gif" align=left>

sin atributo "align" align=bottom
El Queso en la Historia El queso ha estado ahÌ en los eventos m·s importantes. Cuando Magallanes navegÛ por complicados estrechos comiÛ queso. Cuando las tropas aliadas entraron en Europa, el queso estaba ahÌ. Cuando Neil Armstrong pisÛ la Luna acababa de comerse una tableta de queso.
texto fluido align=left
El Queso en la Historia El queso ha estado ahÌ en los eventos m·s importantes. Cuando Magallanes navegÛ por complicados estrechos comiÛ queso. Cuando las tropas aliadas entraron en Europa, el queso estaba ahÌ. Cuando Neil Armstrong pisÛ la Luna acababa de comerse una tableta de queso.

Ensanche y estreche la ventana de su Browser para ver como afecta esto con las im·genes y el texto.

Una nota m·s. Habr· veces que el texto u otros elementos que se alineen con la imagen sea m·s bien cortos y quiera forzar que el texto vaya debajo de la imagen. Hay un atributo para la etiqueta <br> para resttaurar la alineaciÛn:

  <br clear=left>
  <br clear=right>
  <br clear=all>

Ahora volveremos a nuestra p·gina index.htm para reformatear la ventana abierta. La imagen puede ser bonita pero se usa mucho espacio vertical teniendo la imagen y el texto debajo. Usaremos la alineaciÛn del texto/im·genes para colocar alg™n texto adyacente a la imagen.

1. Abra el archivo index.htm en su editor de textos.
2. Busque la parte que dice:

     <img alt="Una lecciÛn sobre:"   src="../pictures/lava.gif">
     <p>
     <B><font size=+4 color=#FF66FF>W</font>
     <font size=+3 color=#DD0055>EX DE VOLCANES</font></B>
     <BLOCKQUOTE>
     <B><I><font size=+1>"La Naturaleza se enfurece salvajemente, 
     amenazando las tierras"</font></I></B><br>
     -- <A HREF="http://magic.geol.ucsb.edu/~fisher/pliny.htm">
     Plinio el Viejo</A>, quien muriÛ de asfixia despuÈs de
     observar la destrucciÛn de Pompeya por la erupciÛn
     del Vesubio en el aÒo 79 d.C.
     </BLOCKQUOTE>
   
     En esta lecciÛn usar· la Internet
     para buscar informaciÛn sobre volcanes y luego
     escribir un informe sobre los resultados.

   y c·mbielo por:

     <img alt="Una lecciÛn sobre:" src="../pictures/lava.gif"   align=left>
     <B><I><font size=+1>
     "La Naturaleza se enfurece salvajemente, amenazando las tierras"
     </font></I></B><br>
     -- <A HREF="http://magic.geol.ucsb.edu/~fisher/pliny.htm">
     Plinio el Viejo</A>, quien muriÛ de asfixia despuÈs de
     observar la destrucciÛn de Pompeya por la erupciÛn
     del Vesubio en el aÒo 79 d.C.
     <p>
     <B><font size=+4 color=#FF66FF>W</font>
     <font size=+3 color=#DD0055>EB DE VOLCANES</font></B>
     <p>
     En esta lecciÛn usar· la Internet
     para buscar informaciÛn sobre volcanes y luego
     escribir un informe sobre los resultados.
     <br clear=left>

3. Salve y Actualice en su web Browser.

NOTA: Todo lo que haya entre las etiquetas <img... align=left> y la etiqueta <br clear=left> ser· colocado adyacente a la imagen; Èsta se alinea a la izqueirda y el resto del HTML llenar· el espacio vacÌo.

TambiÈn pondremos la cita arriba para atraer la atenciÛn. Con este nuevo aspecto la etiqueta <blockquote> no es eficaz asÌ que ha sido eliminada.

JustificaciÛn/Alineamiento del Texto

  <div align=left>...</div>
  <div align=right>...</div>
  <div align=center>...</div>

Ahora usaremos esta etiqueta para que la cita que abre niestra p·gina tenga su texto alineado con el margen derecho de la p·gina.

1. Abra el archivo index.htm en su editor de textos.
2. AÒada las etiquetas <div> y </div> como se indica a continuaciÛn:

     <div align=right>
     <B><I><font size=+1>
     "La Naturaleza se enfurece salvajemente, amenazando las tierras"
     </font></I></B><br>
     -- <A HREF="http://magic.geol.ucsb.edu/~fisher/pliny.htm">
     Plinio el Viejo</A>, quien muriÛ de asfixia despuÈs de
     observar la destrucciÛn de Pompeya por la erupciÛn
     del Vesubio en el aÒo 79 d.C.
     <p>
     <B><font size=+4 color=#FF66FF>W</font>
     <font size=+3 color=#DD0055>EB DE VOLCANES</font></B>
     </div>

3. Salve y Abra en su web Browser.

Compruebe Su Trabajo

RevisiÛn

1. øCÛmo se consigue que parte del texto se alinee en el centro de la p·gina?
2. øCu·l es la forma correcta de conseguir que una imagen se alinee a la derecha de la p·gina web?
3. øCÛmo se puede crear texto justificado a la derecha?

Pr·ctica Independiente

A ContinuaciÛn....

IR A.... | Õndice de Lecciones | anterior: "Separadores F·ciles" | siguiente: "Usando Tablas" |

URL: