Volver a la portada de Duiops
Volver al
Web de Duiops
Portada | Fundamentos del HTML | Formateando el texto

Formateando el texto

Atrás Arriba Siguiente

(contenido antiguo)

Párrafos | Cabeceras | Líneas horizontales

Formateo del texto | Listas | Comentarios

 

Para empezar a crear nuestra primera página tenemos que iniciar el programa editor de texto e ir introduciendo las etiquetas y su contenido. En esta página conoceremos todo lo básico y esencial dentro de un documento HTML.

PÁRRAFOS

Párrafos. Las etiquetas de párrafo <P> nos servirán para iniciar un nuevo párrafo de texto. No necesita la etiqueta </P> al final si no están alineados de ninguna manera.

Los párrafos pueden alinearse. En este caso sí que necesitan su correspondiente etiqueta de cierre </P>. Son las siguientes:

 

<P ALIGN="LEFT"> Para alinear el texto con el margen izquierdo:

Este párrafo está alineado a la izquierda

 

<P ALIGN="CENTER"> Para centrar el texto:

Este párrafo está centrado.

 

<P ALIGN="RIGHT"> Para alinear el texto con el margen derecho:

Este párrafo está alineado a la derecha

 

<P ALIGN="JUSTIFY"> Para alinear el texto a los dos márgenes. Es ignorado por muchos navegadores, pero algunos no, como el Explorer 4.0.

Eso es un ejemplo el alineamiento justificado. Si se observa este breve párrafo con exploradores como el Microsoft Internet Explorer 4.0 podrás observar que los dos extremos, izquierdo y derecho, están alineados. Recuerda que para poder apreciar este efecto en los párrafos de texto, necesitas escribir más de 2 líneas.

 

Si se quiere hacer un salto de línea o retorno de carro, habrá que usar la eiqueta <BR>. Por ejemplo:

<P>Esto<BR>es un párrafo

Se vería así:

Esto
es un párrafo

 

Dos <BR> equivalen a un <P>. Estos dos ejemplos se verían igual:

<P>Esto es un párrafo
<P>Esto es otro

<P>Esto es un párrafo<BR><BR>
Esto es otro

 

También puede usarse la etiqueta <NOBR>...</NOBR>. Es para no permitir el salto de línea, es decir, para hacer líneas muy largas en páginas en las que haya que usar la barra de desplazamiento horizontal.

 

CABECERAS

Son para poner títulos en nuestras páginas. Van entre las etiquetas <Hx> y </Hx>, donde x en un número del 1 al 6. 1 es el número mayor y 6 el número menor. El que corresponde al tamaño estándar del texto es 3. Estos números no tienen nada que ver con el número de píxeles ni con los números de la etiqueta <FONT> que veremos posteriormente.

Usaremos la cabecera H1 o la H2 para el título principal de la página, y los otros tamaños menores para los títulos inferiores de segunda categoría.

<H1>Prueba</H1> se verá como:

Prueba

<H2>Prueba</H2> se verá como:

Prueba

<H3>Prueba</H3> se verá como:

Prueba

<H4>Prueba</H4> se verá como:

Prueba

<H5>Prueba</H5> se verá como:

Prueba

<H6>Prueba</H6> se verá como:

Prueba

 

LÍNEAS HORIZONTALES

Líneas horizontales. En inglés horizontal rules. Para introducirlos hay que usar la etiqueta <HR>. Así se creará una línea embutida en el fondo que llegue de lado a lado de la página.

También se puede modificar. Para variar la anchura hay que usar el atributo WIDTH=x%, donde x es el porcentaje del ancho de la pantalla. Para que ocupe el 75% habría que poner:

<HR WIDTH="75%">

Si se quiere variar la anchura en píxels hay que introducir el valor de ellos en WIDTH=x, pero sin el símbolo %:

<HR WIDTH="250">

Se puede variar la alineación con el atributo ALIGN=x, donde x es LEFT o RIGHT.

<HR WIDTH="50%" ALIGN="LEFT"> para alinear a la izquierda:

<HR WIDTH="50%" ALIGN="RIGHT"> para alinear a la derecha:

Se puede variar el espesor con SIZE=x, donde x es el número de píxels:

<HR SIZE="15">

Y por último se puede hacer que la línea no esté sombreada con el atributo NOSHADE:

<HR NOSHADE>

 

FORMATEO DEL TEXTO

Formateo del texto. Veremos una serie de etiquetas para el texto:
bulletLíneas en blanco, con <BR><P>.

<BR><P>
<BR><P>
<BR><P>
<BR><P>

quedaría así:




bulletEspacios. Nos pueden servir para separar imágenes de textos. La etiqueta es &nbsp;
bulletNegrita, cursiva, subrayado y tachado. Necesitan etiqueta de cierre. Son <B>negrita</B> para negrita, <I>cursiva</I> para cursiva, <U>subrayado</U> para subrayado y <S>tachado</S> para tachado. Es posible usarlos a la vez, <B><I><U><S>texto</S></U></I></B> para texto. Hay otras etiquetas que equivalen a estas, como <STRONG> = <B>; <CITE> y <EM> = <I>; y <STRIKE> = <S>.
bulletAumentar o disminuir tamaño del texto. Se puede hacer de una forma muy sencilla con <BIG>...</BIG> para aumentarlo y con <SMALL>...</SMALL> para disminutirlo. Por ejemplo:

Este es un texto <BIG>más grande</BIG>

Se vería como

Este es un texto más grande

Este es un texto <SMALL>más pequeño</SMALL>

Se vería como

Este es un texto más pequeño

En vez de usar estas dos etiquetas, puedes usar la etiqueta <FONT> que se explica más abajo.

bulletPreformateado. La etiqueta es <PRE> con etiqueta de cierre. La característica es que se verá con letra Courier respetando espacios y cambios de lía, por ejemplo:

<PRE>

Hola

Esto es una prueba del preformateado

</PRE>

y quedaría así:

Hola

Esto es una prueba del preformateado
bulletMáquina de escribir. La etiqueta es <TT> con etiqueta de cierre. Es como el anterior pero sólo cambia el tipo de letra, por ejemplo (el mismo que pusimos en PRE):

<TT>

Hola

Esto es una prueba del preformateado

</TT>

y quedaría así:

Hola Esto es una prueba del preformateado

Como ves no ha respetado los espacios ni los cambios de línea.

bulletCitas textuales. La etiqueta es <BLOCKQUOTE> con etiqueta de cierre, para resaltar partes de texto con márgenes a ambos lados, por ejemplo:

<BLOCKQUOTE>

xxxxxxxxxxxxxxxxx xxxxxxxxxx xxxxxxxxxxx xxxxxxxxxxx xxxxxxxxxxxxxxxx xxxx xxxxxxxxxxx xxxxxxxxxxxx xxxxxxxxx xxxxxxxxxxxxxxx xxxxx xxxxxxxxxxxx

</BLOCKQUOTE>

y quedaría así:

xxxxxxxxxxxxxxxxx xxxxxxxxxx xxxxxxxxxxx xxxxxxxxxxx xxxxxxxxxxxxxxxx xxxx xxxxxxxxxxx xxxxxxxxxxxx xxxxxxxxx xxxxxxxxxxxxxxx xxxxx xxxxxxxxxxxx


bulletTexto parpadeante. Sólo lo incorpora Netscape Navigator. La etiqueta es <BLINK> y <BLINK>, y quedaría así:

<BLINK>Hola</BLINK>

Hola

bulletÍndices y subíndices. Las etiquetas son <SUP> para el superíndice y <SUB> para el subíndice (ambas con etiqueta de cierre), por ejemplo:

cm<SUP>3</SUP>

cm3

H<SUB>2</SUB>SO<SUB>4</SUB>

H2SO4

bulletEtiqueta FONT. Tiene etiqueta de cierre, y nos permite variar el tamaño, el color, y el tipo de letra de un texto determinado. Utiliza para ello los atributos siguientes:

size="x", siendo "x" el número del tamaño, de 1 a 8, por defecto 3; o +/-, que indican si se usa un tamaño inferior o superior), bgcolor="xxyyzz" (siendo "xxyyzz" un número hexadecimal). Para saber qué es esto mira el tema de fondos) y face="xxx" (siendo "xxx" el nombre de la fuente). Si la fuente tiene dos palabras o más es necesario poner comillas, y se pueden colocar varios nombres para usar unas fuentes en caso que otras no existan. Si la fuente no está instalada en el ordenador se verá Times New Roman). Ejemplo:

<FONT SIZE=4 COLOR="AA0000" FACE="Arial, Verdana">Prueba de texto</FONT>.

...que quedaría así:

Prueba de texto

Observa cómo hay dos nombres de fuentes. En caso de que Arial no esté instalada se verá con Verdana, y si ésta tampoco lo está se verá entonces con Times New Roman: la fuente por defecto.

COMENTARIOS

Comentarios. Su principal objetivo es escribir líneas de HTML que no se vean en la pantalla, entre las etiquetas <!-- y -->. Puede ser muy útil para organizar internamente páginas escritas en su totalidad con HTML o, como veremos en los capítulos finales, ocultar código no soportado por versiones antiguas de navegadores, como programas JavaScript y VBScript, hojas de estilo... En este caso, sería con <!-- y // -->. Veamos los dos casos:

Comentario de 1 línea:

<!-- Comentario -->

Comentario de varias líneas:

<!--
Aquí va el script
// -->

Esto es todo. En los siguientes capítulos irás conociendo docenas de etiquetas más.

 

Atrás Arriba Siguiente

 © 1997-2009 Duiops (http://www.duiops.net)
 Prohibida la reproducción parcial o total de los textos o las imágenes.

 Para comentarios, usar las direcciones e-mail de contacto