martes, 8 de mayo de 2012

9. Ordenando el texto.


En cuanto al orden del texto, podemos utilizar viñetas ordenadas o sin ordenar, que llamaremos listas ordenadas (si están numeradas) o listas desordenadas:

<ol><li>Primer elemento<li>Segundo elemento...</ol>
<ul><li>Primer elemento<li>Segundo elemento...</ul>

<html>
         <head>
                   <title>Primera Página</title>
         </head>
         <body bgcolor=#5d0000 text=#f9e783>
                   <h1>Mi primera página web.</h1>
                   <p>Estoy haciendo mi primera página web y esto empieza a gustarme, ya sé darle <i>color al fondo</i> y a <i>las letras</i> y ahora estoy aprendiendo a <b>darle formato al texto.</b></p>
                   <h2>Dando Formato al Texto</h2>
                   <ol type="A">
                            <li>Salto de línea
                            <li>Enfatizando el texto
                            <li>Tamaño de la fuente
                            <li>Ordenando el texto
                   </ol>
                   <p><font color=#4ff3ff size= 6>Lola Mena</font></p>
         </body>
</html>

Lo que hemos introducido como nuevo quedaría así:

Dando Formato al Texto

A. Salto de línea
B. Enfatizando el texto
C. Tamaño de la fuente
D. Ordenando el texto

En vez de poner type="A", podemos también poner "a" (letras minúsculas), "I" (números romanos en mayúsculas), "i" (números romanos en minúsculas) ó "1" (numeración decimal). Si no ponemos nada, utilizará automáticamente la decimal. 

También podemos utilizar listas anidadas, como por ejemplo:

<html>
         <head>
                   <title>Primera Página</title>
         </head>
         <body bgcolor=#5d0000 text=#f9e783>
                   <h1>Mi primera página web.</h1>
                   <p>Estoy haciendo mi primera página web y esto empieza a gustarme, ya sé darle <i>color al fondo</i> y a <i>las letras</i> y ahora estoy aprendiendo a <b>darle formato al texto.</b></p>
                   <h2>Dando Formato al Texto</h2>
                   <ol> 
                            <li>Salto de línea    
                                       <ol type="a">
                                                <li>tag &lt br &gt
                                                <li>tag &lt p &gt
                                       </ol>   
                            <li>Enfatizando el texto
                            <li>Tamaño de la fuente
                            <li>Ordenando el texto
                   </ol>
                   <p><font color=#4ff3ff size= 6>Lola Mena</font></p>
         </body>
</html>

En este caso hemos hecho dos cosas: la primera introducir una lista dentro de otra. La segunda, para que aparezca en la página web los símbolos < y > que forman parte del código, hay que utilizar &lt y &gt. Quedaría así:

Dando Formato al Texto

1. Salto de línea
         a. tag < br >
         b. tag < p >
2. Enfatizando el texto
3. Tamaño de la fuente
4. Ordenando el texto

Por último, dentro de las listas desordenadas (viñetas) utilizaremos el tag <ul> con el parámetro <ul type="valor">, donde valor puede ser circle (círculo abierto), square (cuadrado sólido) ó disk (disco sólido). Quedaría así:

...
<h2>Dando Formato al Texto</h2>
 <ul> 
                            <li>Salto de línea    
                                       <ul type="square">
                                                <li>tag &lt br &gt
                                                <li>tag &lt p &gt
                                       </ul>   
                            <li>Enfatizando el texto
                            <li>Tamaño de la fuente
                            <li>Ordenando el texto
                   </ul>

Dando Formato al Texto

  •  Salto de línea
       (viñeta cuadrada) tag < br >
       (viñeta cuadrada) tag < p >
  •  Enfatizando el texto
  •  Tamaño de la fuente
  •  Ordenando el texto

No hay comentarios:

Publicar un comentario