Está en la página 1de 16

Formato y alineacin de texto HTML.

1/16

Tema 2: Formato y alineacin de texto HTML.


1. Trabajando con cabeceras. Las cabeceras HTML ayudan a resaltar ciertas reas de un documento ponindole ttulos. La etiqueta de cabecera es una combinacin alfanumrica de una h y un valor entre 1 y 6, con el valor 1 como el mayor y 6 el ms pequeo (<h1>, <h2>, <h3>, <h4>, <h5> y <h6>), teniendo en cuenta que cada ttulo se debe cerrar con su correspondiente etiqueta (</h1>, </h2>, </h3>, </h4>, </h5> y </h6>).
Nota: Cuidado con las etiquetas de cabecera, ya que parecen funcionar hacia atrs, con el valor ms bajo (1) como titular ms grande y el ms alto (6) como el titular ms pequeo.

Las etiquetas de cabecera se colocan, simplemente, rodeando el texto que se quiere utilizar como ttulo: <h1>Lenguaje C++</h1> --> Aparece en el navegador con el tamao mximo. Para conseguir un tamao distinto, bastar con cambiar el valor numrico de la etiqueta: <h6>Lenguaje C++</h6> --> Aparece en el navegador con el tamao mnimo. Se debe tener en cuenta que no es bueno abusar de las cabeceras, se utilizarn cuando sea necesario. Se recomienda utilizar las cabeceras de 1 a 3, ya que una cabecera menor puede llegar a ser difcil de leer. Ejemplo: <html> <!-- Cabecera de mi primera pgina web --> <head> <title> Mi pgina web. </title> </head> <!-- Cuerpo de mi primera pgina web --> <body> <h1>Titular mayor</h1> Este es el texto de mi primera pgina web. <h6>Titular menor</h6> </body> <!-- Final de mi primera pgina web --> </html>

Pg. 1

Formato y alineacin de texto HTML. 2/16 Se produce la salida:

2. Prrafos en HTML. Intenta crear una pgina Web con las siguientes consideraciones: Ttulo: Prrafos en HTML Cabecera: Introduccin. Cuerpo: Tambin en el caso de haber metido la pata a la hora de configurar la seguridad del sistema haciendo alguna prueba podemos recuperarla desde el proceso de reparacin. Solo debemos reparar los archivos de registro que sepamos que estn daados o desaparecidos, porque podemos quitar algunas actualizaciones de ficheros realizadas por programas que las necesitan para funcionar. Has podido hacerlo utilizando slo las etiquetas estudiadas hasta el momento?. La respuesta, con toda seguridad, es NO. La razn es porque el lenguaje HTML, a no ser que se especifique lo contrario, ignora los espacios en blanco adicionales, los retornos de carro, etc...

Pg. 2

Formato y alineacin de texto HTML. 3/16 La salida ser algo parecido a:

Adems, si nos fijamos, nos daremos cuenta que el texto representado en el navegador se adapta al tamao de la ventana.

Pg. 3

Formato y alineacin de texto HTML. 4/16 La solucin al problema anterior est en utilizar las etiquetas para trabajar con prrafos. En lenguaje HTML se utilizan las etiquetas <p> y </p> para contener un prrafo. Ejemplo: <body> <h1>Introduccin</h1> <p>Tambin en el caso de haber metido la pata a la hora de configurar la seguridad del sistema haciendo alguna prueba podemos recuperarla desde el proceso de reparacin.</p> <p>Solo debemos reparar los archivos de registro que sepamos que estn daados o desaparecidos, porque podemos quitar algunas actualizaciones de ficheros realizadas por programas que las necesitan para funcionar.</p>

</body>

Se producir la salida:

Pg. 4

Formato y alineacin de texto HTML. 5/16 En realidad la etiqueta de prrafo puede prescindir de su cierre, por lo que existen dos estilos distintos para crear prrafos: El primero consiste en utilizar nicamente la etiqueta de apertura de prrafo y no la de cierre, ya que el navegador interpretar que un prrafo termina cuando empieza otro. <body>

</body>

<h1>Introduccin</h1> <p>Tambin en el caso de haber metido la pata a la hora de configurar la seguridad del sistema haciendo alguna prueba podemos recuperarla desde el proceso de reparacin. <p>Solo debemos reparar los archivos de registro que sepamos que estn daados o desaparecidos, porque podemos quitar algunas actualizaciones de ficheros realizadas por programas que las necesitan para funcionar.

El segundo, consiste en ir cerrando los prrafos, lo que nos permite especificar atributos para cada uno de ellos, tal y como veremos a continuacin.

3. Atributos de los prrafos. Las etiquetas de prrafo pueden ser modificadas mediante atributos de alineacin de texto, para conseguir que el texto aparezca alineado a la izquierda (opcin por defecto), a la derecha, centrado o justificado. <p align=valor> .... </p> Donde valor ser left (opcin por defecto), right, center o justify, segn se desee alineado a la izquierda, a la derecha, centrado o justificado respectivamente. Ejemplo: <body> <h1>Alineacin</h1> <p>Este texto aparecer en el navegador alineado a la izquierda, ya que es la opcin por defecto.</p> <p align="right">Este texto aparecer en el navegador alineado en su parte derecha, lo que provocar un extrao efecto, ya que no estamos acostumbrados a este tipo de alineacin.</p>

Pg. 5

Formato y alineacin de texto HTML. 6/16 <p align="center">Este otro prrafo, aparecer centrado respecto a la ventana del navegador.</p> <p align="justify">Por ltimo, pero no menos importante, este prrafo aparecer justificado, es decir, alineado a izquierda y derecha al mismo tiempo.</p> </body> Lo que producir una salida:

4. Etiqueta de agrupacin de prrafos. Supongamos que disponemos un gran nmero de prrafos y todos y cada uno de ellos queremos alinearlo. La nica solucin, en principio, consistira en etiquetar cada prrafo con una apertura y cierre y asignarlos una alineacin a cada uno de ellos, con lo que el trabajo se puede llegar a volver muy tedioso.

Pg. 6

Formato y alineacin de texto HTML. 7/16 Ejemplo: <body> <h1>Alineacin</h1> <p align=right>Este texto aparecer en el navegador alineado a la derecha.</p> <p align="right">Este otro prrafo tambin aparecer alineado en su parte derecha. </p> <p align="right">Este prrafo, igualmente aparecer alineado en la parte derecha del navegador.</p> <p align=right>....</p> </body>

Existe una alternativa a lo anterior, y consiste en la agrupacin de prrafos y aplicar a todos ellos el elemento de alineacin. Para conseguir ese efecto utilizaremos la etiqueta de divisin de texto <div> y </div>, cuyo formato admite atributos de alineacin.

Pg. 7

Formato y alineacin de texto HTML. 8/16 Ejemplo: <body> <h1>Alineacin</h1> <div align=right> <p>Este texto aparecer en el navegador alineado a la derecha. <p>Este otro prrafo tambin aparecer alineado en su parte derecha. <p>Este prrafo, igualmente aparecer alineado en la parte derecha del navegador. <p>La diferencia est en la utilizacin de la etiqueta de divisin de texto. <p>.... </div>

</body>

Pg. 8

Formato y alineacin de texto HTML. 9/16 Las etiquetas de divisin de prrafo pueden anidarse. Ejemplo: <body>

<div align="right"> <h1>Alineacin</h1> <p>Este texto aparecer en el navegador alineado a la derecha.

<!-- Inicio de anidamiento de etiqueta de divisin de prrafos --> <div align="center"> <p>Este otro prrafo aparecer centrado en el navegador. <p>Este prrafo, igualmente aparecer centrado en el navegador por la utilizacin de la etiqueta de divisin de texto anidada. </div> <!-- Fin de anidamiento de etiqueta de divisin de prrafos --> <p>Este prrafo aparecer nuevamente alineado en la derecha, ya que no se encuentra dentro de las etiquetas de divisin mas internas. <p>... </div>

</body>

Pg. 9

Formato y alineacin de texto HTML. 10/16 5. Etiqueta de creacin de mrgenes. Para la creacin de mrgenes se utiliza la etiqueta <blockquote> y </blockquote>. Ejemplo: <body> <blockquote> <div align="right"> <h1>Alineacin</h1> <p>Este texto aparecer en el navegador alineado a la derecha. <!-- Inicio de anidamiento de etiqueta de divisin de prrafos --> <div align="center"> <p>Este otro prrafo aparecer centrado en el navegador. <p>Este prrafo, igualmente aparecer centrado en el navegador por la utilizacin de la etiqueta de divisin de texto anidada. </div> <!-- Fin de anidamiento de etiqueta de divisin de prrafos --> <p>Este prrafo aparecer nuevamente alineado en la derecha, ya que no se encuentra dentro de las etiquetas de divisin mas internas. <p>... </div> </blockquote>

</body>

Pg. 10

Formato y alineacin de texto HTML. 11/16 6. Rupturas de lnea y lneas sin ruptura. En algunas ocasiones deseamos introducir en el texto una ruptura de lnea o retorno de carro, para ello utilizaremos le etiqueta de ruptura de lnea <br> (break). Se debe destacar que la etiqueta de ruptura de lnea (<br>), no dispone de etiqueta de cierre, es decir, la etiqueta </br> no existe. Ejemplo: C/ Zapateros n 32; 1 C.<br> 28034 Madrid<br> Espaa<br>

Pg. 11

Formato y alineacin de texto HTML. 12/16 Existe una relacin entre las etiquetas de prrafo y ruptura de lnea: 1 <p> = 2 <br>. Ejemplo: <body>

<h1>Rupturas de lnea</h1> <p>Este texto tiene una etiqueta de prrafo.</p> <p>Este otro texto tambin tiene la, ya famosa entre entre todos nosotros, etiqueta de prrafo.</p> Este texto lleva dos etiquetas de ruptura de lnea, con lo que se consigue el mismo efecto que con la etiqueta de prrafo.<br><br> Para demostrar el efecto, este texto tambin lleva las dos etiquetas de ruptura de lnea.<br><br>

</body>

Pg. 12

Formato y alineacin de texto HTML. 13/16 Si se desea conseguir lneas adicionales, se puede hacer utilizando la acumulacin de tantas etiquetas de ruptura como deseemos. Nota: No funciona con las etiquetas de prrafo. Ejemplo: <body>

<h1>Rupturas de lnea</h1> Este texto lleva dos etiquetas de ruptura de lnea, con lo que se consigue el mismo efecto que con la etiqueta de prrafo.<br><br> Para conseguir lneas de espacio se aaden tantas etiquetas de ruptura de lnea como se desee. En este ejemplo se utilizan 7.<br><br><br><br><br><br><br> C/ Zapateros n 32; 1 C.<br> 28034 Madrid<br> Espaa<br>

</body>

Pg. 13

Formato y alineacin de texto HTML. 14/16 Podra llegar a ocurrir que no deseamos que una lnea se rompa, para lo cual, utilizaremos la etiqueta de lnea sin ruptura <nobr> y </nobr>, ya que la etiqueta de no ruptura de texto deber llevar asociada la etiqueta de cierre. Ejemplo: <body> <h1>Rupturas de lnea</h1> <nobr> Este texto aparecer en una nica lnea, ya que se utiliza la etiqueta de lnea sin ruptura, con lo que aparecer una barra de desplazamiento horizontal en el navegador. </nobr> <p>Esta lnea aparecer dividida en la pantalla como cualquier otra lnea ms del texto.</p> </body>

Pg. 14

Formato y alineacin de texto HTML. 15/16 7. Letras en negrita, cursiva y subrayado. Para los tipos de letra se utilizarn etiquetas de apertura y cierre, siendo especialmente importante no descuidar el mtodo del contenedor, para evitar posibles errores mezclando etiquetas. Para letras en negrita se utilizan las etiquetas <b> y </b>. Para letras en cursiva se utilizan las etiquetas <i> e </i>. Para letras con subrayado se utilizan las etiquetas <u> y </u>. Ejemplo: <body> <h1>Tipos de letras.</h1> <p><b>Negrilla.</b></p> <p><i>Cursiva.</i></p> <p><u>Subrayado.</u></p> <p><b><i>Negrilla y cursiva.</i></b></p> <p><b><u>Negrilla y subrayado.</u></b></p> <p><u><i>Cursiva y subrayado.</i></u></p> <p><b><i><u>Negrilla, cursiva y subrayado.</u></i></b></p> </body>

Pg. 15

Formato y alineacin de texto HTML. 16/16 8. Letra grande, pequea, superndice, subndice y tachado. Al igual que en el caso anterior, se utilizarn etiquetas de apertura y cierre, siendo especialmente importante no descuidar el mtodo del contenedor, para evitar posibles errores mezclando etiquetas. Para letras grandes se utilizan las etiquetas <big> y </big>. Para letras pequeas se utilizan las etiquetas <small> y </small>. Para letras superndice se utilizan las etiquetas <sup> y </sup>. Para letras subndices se utilizan las etiquetas <sub> y </sub>. Para letras tachadas se utilizan las etiquetas <strike> y </strike>. Ejemplo: <body> <h1>Ms tipos de letras.</h1> <p>Letra normal y <big>letra grande.</big></p> <p>Letra normal y <small>letra pequea.</small></p> <p>Letra normal y <sup>letra superndice.</sup></p> <p>Letra normal y <sub>letra subndice.</sub></p> <p>Letra normal y <strike>letra tachada.</strike></p> <p>Tambin se pueden combinar con <b><sup>negrilla</sup></b>, <i><strike>cursiva</strike></i> y <u><big>subrayada<big></u>.</p> </body>

Pg. 16