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: