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

19. Separadores Fáciles

¿Confundido? Esto es tan solo otra opción más de crear divertidos

separadores para marcar diferentes secciones en una página web.

Objetivos

Después de esta lección será capaz de:

Crear separadores con diferentes alturas.
Crear separadores con diferentes anchuras.
Crear separadores sin apariencia 3D.

Lección

NOTA: En esta lección no vamos a modificar nuestras páginas; así, puede mirar la lección y decidir si quiere experimentar. Quizás quiera echar un vistazo primero a la página de prueba para ver si su Browser soporta las etiquetas que se van a ver en esta lección.

Las primeras extensiones HTML de NetScape ofrecían más opciones de formato para la etiqueta <hr> tag (Hard Rule) - vea la lección 4). El Browser de NetScape muestra por defecto un separador como linea sólida con una apariencia tridimensional en vez de la línea sólida implementada en previos Browsers.

Altura de Línea

Esta primera opción permite dar diferentes alturas a una línea mediante la opción:

  <hr size=N>

donde N es el tamaño de la línea en pixeles. Mire unos ejemplos que le muestran este efecto (aunque no se note mucho por el color blanco del fondo de la página).

<hr size=2> igual que <hr> :

<hr size=8> :

<hr size=20> :

Anchura de Línea

Otra opción de formato de la etiqueta <hr> permite ajustar la anchura de la línea; no necesita ajustarse al ancho de la página. Se usa el siguiente código:

  <hr width=X>
  <hr width=Z%>

donde X es un número para la anchura y Z es el porcentaje del ancho de la página web. En general recomendamos usar el percentaje ya que se ajustará él solo a la anchura de la ventana del Browser de quien esté viendo sus páginas (algunos por ahí fuera usan monitores de alta de resolución y gran tamaño frente a otros que nos peleamos con nuestras pantallas de 13").

Aquí tiene algunos ejemplos (vea que se incluye el atributo de tamaño también):

<hr width=80 size=10> :

<hr width=80% size=10> :

NOTA: Pruebe a ensanchar o estrechar la anchura de su Browser para ver la diferencia entre especificar la anchura en pixeles (width=80) o en porcentajes (width=80%) respecto al ancho de la página.

<hr width=40% size=10> :

<hr width=5% size=10> :

Sin Efectos 3D

Finalmente podría haber casos en que no desee tener efectos 3D en su etiqueta <hr>. Eso es tan simple como poner: <hr width=80% size=6 noshade> :

Revisión

Tópicos a recordar de esta lección:

¿Cómo se cambia la altura de una línea?
¿Cómo se cambia la anchura de una línea?
¿Qué efecto tiene el atributo noshade dentro de una etiqueta <hr>?

Práctica Independiente

Experimente con algunas de las opciones de la etiqueta <hr> en sus páginas web.

A Continuación....

A la izquierda... ¡No! A la derecha... ¡No! Al centro...

IR A.... | Índice de Lecciones | anterior: "Retocando el Texto" | siguiente: "Alineamiento Extra" |

Writing HTML Lección 19: Separadores Fáciles

El enlace con el MCLI es Alan Levine --}
Comentarios a levine@maricopa.edu
Traducido al español por agma@usa.net

URL: