Líneas y párrafos
Esta sección describe HTML asociado con líneas y párrafos. Comenzamos con el y <P> etiquetas.
Este tutorial se proporciona por valor histórico. Algunos de las etiquetas y atributos presentados en este tutorial han quedado obsoletos y no deben utilizarse. La compatibilidad del navegador con los elementos y atributos obsoletos puede ser limitada y su uso puede producir resultados inesperados.
Para obtener una descripción detallada del HTML moderno, consulte nuestros tutoriales. sobre marcado semántico, estructura de documentos HTML y fuentes y tipografía web.
El < DIV > Elemento
<DIV>, un elemento a nivel de bloque, simplemente define un bloque de contenido en la página. Más allá de definir un bloque, <DIV> en sí mismo no hace nada. Por ejemplo, el siguiente código crea un elemento <DIV> con dos párrafos dentro. Observe que puede colocar elementos <P> dentro de un <DIV>.
Lo que nos da:
<DIV ...>.
<DIV ...>. Esto es más material dentro del <DIV ...>. Esto es algo después de <DIV ...>.
El atributo ALIGN
ALIGN establece la alineación del contenido del elemento <DIV>. Los cuatro valores, LEFT, CENTER, RIGHT y JUSTIFY, están bien soportados. LEFT es el valor predeterminado.
Este código muestra el valor predeterminado:
Lo que nos da:
El elemento de párrafo
<P> indica el comienzo de un nuevo párrafo. Esto generalmente se representa con dos retornos de carro, produciendo una sola línea en blanco entre los dos párrafos:
Lo que produce esto:
El atributo ALIGN
ALIGN indica la alineación del párrafo.
Lo que produce esto:
Esto está alineado a la izquierda. Este es el predeterminado.
Esto está alineado en el centro.
Esto está alineado a la derecha.
El atributo CLEAR
CLEAR es reconocido por algunos navegadores y funciona de manera muy similar a <BR>. Sin embargo, no es HTML estándar y todavía no se admite en gran medida, así que use <BR> en su lugar.
¿Se requiere la etiqueta P?
El W3C dice de </P>: «La etiqueta final es opcional, ya que el analizador siempre puede inferirla». Esto significa que un nuevo <P> implica el final del anterior <P> (y cualquier alineación establecida por el anterior <P>).
Cualquier otro elemento de nivel de bloque, como <HR> o <BLOCKQUOTE> también debe terminar el párrafo. Sin embargo, no siempre funciona de esa manera. Algunos navegadores, por ejemplo, alinean el texto a la derecha incluso después de una tabla. En el siguiente ejemplo, MSIE muestra la parte «después de la tabla» como alineada a la derecha, mientras que Netscape lo muestra alineado a la izquierda:
 |
 |
| Representación de MSIE | Representación de Netscape |
Si establece la alineación u otra propiedad de estilo para un elemento de párrafo, es mejor usar </P>. Si nunca usa establecer ningún estilo, generalmente puede ignorar </P>.
Consulte las especificaciones de W3C para párrafos para obtener más información sobre este tema.
Alineación de texto
Puede establecer la alineación de cualquier elemento HTML usando la regla de estilo text-align. text-align se puede utilizar para establecer la alineación de un párrafo, una sección del documento o incluso todo el documento. text-align se puede usar para establecer la alineación a izquierda, derecha, centro o justificada.
Por ejemplo, supongamos que queremos centrar un párrafo.Primero, crearemos una clase de estilos llamada centeralign colocando el siguiente código en la «sección del documento:
Ahora podemos establecer cualquier párrafo para centrar la clase de esta manera:
Lo que nos da esto:
Get Centered
Podemos aplicar la misma clase a un elemento <DIV> para centrar una sección del página:
Lo que nos da:
Cada elemento dentro del DIV alineado al centro hereda el estilo alineado al centro.
Justificación
Por defecto , la mayoría de los navegadores procesan el texto con un borde derecho irregular.
Si desea que todo el texto se procese como en un libro con un borde derecho uniforme, puede usar una sola regla de estilo. Para configurar todo el texto como justificado, copie lo siguiente código i na la sección «de su documento.
El problema con la justificación es que muchos navegadores se confunden acerca de dónde está la última línea de texto (que no debería ser justificado). Por ejemplo, MSIE 4.x se confunde cuando un bloque de texto es seguido inmediatamente por una tabla. Observe en esta imagen que la última línea de texto extiende las palabras «uno de nuestros agentes» en una línea completa:
Para remediar esta situación, rodee todos los bloques de texto con <P> y </P>:
Ahora nuestro MSIE errante muestra las cosas más sensatamente:
Sangría
Hay varias formas de sangrar párrafos y secciones enteras de su página web Las siguientes secciones describen las cuatro técnicas principales de sangría:
- Sangría de un párrafo
- Sangría de una sección de la página
- Sangría de toda la página
- Sangría en la primera línea de cada párrafo
Sin embargo, antes de comenzar, vale la pena decir algunas palabras sobre <BLOCKQUOTE> . Existe la idea errónea de que <BLOCKQUOTE> debe utilizarse para sangrar secciones de la página. Esta creencia se debe al hecho de que la mayoría de los navegadores web visualizan el texto citado como sangrado. Sin embargo, recuerde que HTML no es un lenguaje de formato y da resultados impredecibles cuando intenta usarlo como tal. Utilice <BLOCKQUOTE> si tiene un bloque de texto entre comillas; de lo contrario, utilice las técnicas descritas en los siguientes párrafos.
Sangría de un párrafo
Puede sangrar un solo párrafo usando estilos. Por ejemplo, supongamos que queremos sangrar un párrafo 50 puntos. Primero, creamos una clase llamada sangría con las siguientes reglas de estilo. Pon este código en la sección «de tu documento.
Ahora configuramos la clase del párrafo con sangría agregando un atributo CLASS al <P> etiqueta:
Lo que nos da este párrafo con sangría:
No sabes sobre mí sin haber leído un libro con el nombre de Las aventuras de Tom Sawyer; pero eso no importa. Ese libro fue hecho por el Sr. . Mark Twain, y dijo la verdad, principalmente. Hubo cosas que estiró, pero principalmente dijo la verdad. Eso no es nada. Nunca vi a nadie, pero mentí una vez u otra, sin que fuera la tía Polly, o la viuda O tal vez Mary. La tía Polly, la tía Polly de Tom, es ella, y Mary, y la viuda Douglas, se habla de todo en ese libro, que es principalmente un libro verdadero, con algunas camillas, como dije antes. – Abriendo a Huck Finn
Sangría en una sección de una página
Para sangrar más de un par Agraph usaremos el mismo estilo que establecimos en el ejemplo anterior. Pon este código en la sección «de tu página:
Luego usaremos la clase con sangría en un <DIV> elemento:
Lo que nos da una sección con sangría como esta:
Estos artículos se pueden llevar al centro de reciclaje para su redistribución. mucho mejor que tirarlos.
- Limpiadores domésticos
- Computadoras y accesorios de computadora
- Ropa
Sangría de toda la página
Si desea sangrar toda la página, establezca una regla de estilo que establezca el relleno derecho e izquierdo para el elemento «. Por ejemplo, este estilo establece el relleno derecho e izquierdo en 100 píxeles:
Esta técnica es popular cuando se usa en combinación con una imagen de fondo. Por ejemplo, supongamos que queremos que esta imagen se extienda por el lado izquierdo de la página.
Esta imagen tiene 56 píxeles de ancho, así que establezcamos el relleno en 60.El siguiente estilo establece la imagen de fondo, establece la repetición en repeat-y (solo se repite verticalmente hacia abajo en el lado izquierdo de la página) y establece el relleno izquierdo en 60 (no estableceremos el relleno derecho).
Así es como se vería:
Sangría en la primera línea de cada párrafo
Para sangrar la primera línea de cada conjunto de párrafos una regla de estilo que utiliza sangría de texto. Por ejemplo, el siguiente código sangra la primera línea de cada párrafo 30 puntos. Copie este código en la sección «de su página:
Este código sangra la primera línea de cada <P> elemento, pero probablemente se encontrará con un problema molesto. Si es como la mayoría de los diseñadores, probablemente no ponga una P antes del primer párrafo o entre un encabezado como <H1> y el texto que le sigue. Desafortunadamente, eso es exactamente lo que debe hacer si desea que el párrafo tenga sangría. El texto en estas situaciones es parte de algo llamado «bloques anónimos» y no se puede hacer referencia a él directamente. Para sangrarlo debes poner el texto en un elemento <P>.
Entonces, por ejemplo, el siguiente código no tiene un <P> entre el encabezado y el texto, por lo que el texto no tiene sangría:
Lo que nos da:
Este párrafo no tiene sangría.
Este código tiene un <P> entre el encabezado y el texto, por lo que el texto tiene sangría:
Este párrafo tiene sangría.
El < BR > Elemento
<BR> inserta un solo retorno de carro . Mientras que <P> indica el comienzo de un nuevo párrafo, <BR> solo implica un retorno de carro dentro del mismo párrafo. <BR> generalmente se representa con un solo retorno de carro.
Por ejemplo, este código:
Lo que produce esto:
que guardaba toda su masa en un balde
Su hija llamada Nan
Se escapó con un hombre
Y en cuanto al depósito, Nantucket
Debido a que <BR> no inicia un nuevo párrafo, todos los atributos del párrafo actual permanecen iguales:
Lo que produce esto:
Había una vez un hombre de Nantucket
que guardaba toda su masa en un balde
El nombre de su hija Nan
se escapó con un hombre
Y en cuanto al cubo, Nantucket
El atributo CLEAR
CLEAR dice que además de insertar un salto de línea, si hay una imagen u otro objeto a la derecha oa la izquierda, pasa también. Por ejemplo, este código dice que la imagen debe alinearse en el lado izquierdo de la página. Luego hay algo de texto, luego LEFT. El texto que sigue es más allá de la imagen:
Lo que produce esto:
¡Ven a la fiesta de Halloween! diviértete. 8:00 pm a medianoche. ¡Ponte un disfraz o ven como tú mismo!
BOTH es lo mismo que ALL, pero no lo es compatible con tantos navegadores, así que utilice ALL en su lugar.
El elemento CENTER
Recomendación de uso: utilice <DIV> en su lugar.
Lo que nos da:
Que es lo mismo que:
Lo que nos da:
El elemento < HR >
<HR> dibuja una línea horizontal (una «regla horizontal») a lo largo de la página. Eso es todo. Para un concepto tan simple, las reglas horizontales son sorprendentemente populares. Comencemos con lo básico. <HR> no tiene etiqueta final y no requiere atributos:
Lo que crea esta regla:
Algo de texto aquí
Algo de texto aquí
<HR> suele indicar una división en la página. Las cosas antes de la regla están en una «sección» diferente de las que están después. Por esa razón, muchos diseñadores consideran <HR> una etiqueta lógica, no una etiqueta de diseño.
El atributo NOSHADE
NOSHADE indica que la regla debe presentarse como plana en lugar de tridimensional.Compare esta regla horizontal normal:
Con una NOSHADE regla:
Lo que nos da:
NOSHADE se usa a menudo junto con SIZE:
Produce esta regla:
NOSHADE es popular porque los navegadores no suelen representar muy bien las reglas tridimensionales. De hecho, en muchas circunstancias, la regla se presenta en el mismo color que el fondo, lo que la hace casi invisible.
El atributo SIZE
SIZE indica la altura de la regla. (Supongo que llamarlo «ALTO» hubiera sido demasiado fácil). Para el ancho horizontal, consulte WIDTH. Compare algunos de estos tamaños:
Lo que nos da estas reglas:
Los navegadores generalmente no mostrarán un <HR> más grande que 100 .
El atributo WIDTH
WIDTH establece el ancho horizontal de la regla. Puede expresar el tamaño en píxeles o como porcentaje.
Estos <HR> están configurados con anchos de píxeles:
Lo que nos da estas reglas:
WIDTH generalmente se expresa como un porcentaje. Si usa un ancho porcentual, asegúrese de incluir el valor entre comillas.
Produce estas reglas:
El valor predeterminado es 100%. Por defecto, la regla es centrado. Para establecer una alineación diferente, use ALIGN.
Los anchos de porcentaje usan el porcentaje o f el ancho disponible, no el ancho completo de la página. Por ejemplo, si la regla está en una tabla, entonces el ancho es un porcentaje del ancho de la celda de la tabla.
Lo que produce esta tabla:
Una puntada en el tiempo ahorra nueve
El atributo ALIGN
ALIGN establece la alineación del regla. ALIGN sólo es útil si también usa WIDTH.
Danos esto:
El elemento < PRE >
<PRE> es una de las etiquetas más útiles de la caja de herramientas HTML. <PRE> marca el texto como «preformateado»: todos los espacios y los retornos de carro se representan exactamente como los escribe.
Lo que produce esto:
<PRE> el texto se representa en una fuente de ancho fijo, lo que significa que todos los caracteres y espacios son los mismo ancho. El ancho fijo facilita la distribución del texto de la manera que desee, por lo que <PRE> es ideal para crear tablas «rápidas y sucias» como la anterior.
<PRE> NO hace que el navegador ignore las etiquetas. Aún puede crear enlaces y otros beneficios:
Produce esto:
Cuando comienza a agregar marcas , se vuelve más difícil ver cómo resulta el texto (espaciar las etiquetas de manera uniforme como ayuda en la tabla anterior). <PRE> se usa a menudo para citar grandes bloques de texto que no desea «HTMLizar», pero un «podría estropear el texto. Para una tabla de más de unas pocas líneas, generalmente es más fácil usar código de tabla a largo plazo.
El «Elemento
» evita que ocurra un retorno de carro. Por ejemplo, el siguiente código produce un poema sin sentido de una línea larga:
Que produce esto:
is most useful for making the page layout more attractive by disallowing breaks inside logical groups of symbols and words. The poem quoted above breaks in appropriate places if each phrase is surrounded by:
Lo que produce esto:
girando y gritando,
silbidos y rugidos,
miedo y burlas,
pisadas y gritos,
correr y saltar,
pelar y cortar en cubitos,
cocinar y pesar,
costeo y precios,
comer y beber,
todo en un día de trabajo.
El «Elemento
is for the situation where you have used para evitar saltos de línea en una sección de texto, y luego quiere decir «pero puede romper AQUÍ si lo desea».»no fuerza un salto de línea, simplemente permite uno:
Produce:
Habiendo inventado , Netscape now seems to have abandoned it. It"s better to stick to grouping non-breakable sets of words within, así:
Lo que nos da este párrafo:
empujar, encajar y meter tantas palabras como pueda. de lo que pueda
