2.1. Tamaño del texto.
Todo lo que hagamos a partir de ahora (a no ser que se diga lo contrario) irá dentro del cuerpo de la página (entre los tags <BODY> ... </BODY> que hemos visto en la página HTML base).
Para crear títulos se usan las directivas:
donde 'n' es un numero entre 1 y 6 que representa el tamaño del texto, siendo H1 el mayor y H6 el menor. Por ejemplo:
(vaya, más que un curso de programación esto parece 'Barrio Sesamo' ;-)
Al usar las etiquetas <Hn> en un texto, se interpreta este texto como un título, y se añade automáticamente un salto de linea al final, por lo que este comando no se puede utilizar para variar el tamaño de una sola palabra/palabras dentro de una linea, sino de toda la linea.
Para hacer más grande o más pequeño un cierto texto o palabras, sin que se ponga un salto de linea al final se pueden usar dos tipos de etiquetas:
<SMALL> ... </SMALL>
Como el propio nombre indica, estas etiquetas aumentan (big) o disminuyen (small) el tamaño del texto que se incluye entre ellas. Para hacer un texto aún más grande o más pequeño se pueden anidar varias de estas etiquetas. Así:
<BIG><BIG>Hola</BIG></BIG>
Quedaría:
Hola
La otra forma de conseguir este efecto es mediante la etiqueta <FONT SIZE=+/- n> ... </FONT> donde 'n' es el tamaño (-n=menor...n=mayor). Ejemplo:
<FONT SIZE=+2>Hola</FONT>
Quedaría:
Hola
Tanto el texto, como otros elementos que añadamos más tarde pueden alinearse, de forma similar a como se hace en un procesador de textos, mediante una serie de etiquetas o comandos:
<CENTER> ... </CENTER> centrado
<P ALIGN=LEFT> ... </P> determina un párrafo alineado a la izquierda (incluido imágenes). Es el valor por defecto.
<P ALIGN=RIGHT> ... </P> determina un párrafo alineado a la derecha (incluido imágenes).
<P ALIGN=CENTER> ... </P> determina un párrafo alineado al centro (incluido imágenes).
Recordemos que los saltos de línea se consiguen mediante el comando <BR> al final de la línea, o escribir párrafos completos encerrados entre las etiquetas <P> ... </P>, sin preocuparnos de los saltos de línea (los visores HTML se encargaran de poner los saltos de carro para que el texto no se salga de la ventana).
Otra forma bastante útil a la hora de organizar visualmente la página web es el comando <HR> (sin etiqueta final), que coloca una linea horizontal que sirve para separar las diferentes secciones de nuestro documento. Así:
La mejor forma de asimilar todo esto es viendo ejemplos, así que al final de este capítulo podras ver un ejemplo de todas estos comandos.
2.2. Tipos y efectos de texto.
La aplicación de efectos de texto se realiza de la misma forma que el resto de los comandos, delimitando el texto sobre el que queremos aplicar el efecto entre etiquetas (tags).
Muchos de estos efectos son los mismos que nos encontramos en los procesadores de texto, por lo que no necesitan muchas explicaciones:
|
Etiquetas |
Efecto |
Utilidad/Precauciones |
Ejemplo |
|
<B> ... </B> |
Negrita (Bold) |
Ideal para destacar palabras |
Hola |
|
<I> ... </I> |
Cursiva (Itálica) |
Para citar frases literales. |
Hola |
|
<TT> ... </TT> |
Máquina de escribir |
Como una máquina de escribir. |
Hola |
|
<U> ... </U> |
Subrayado |
Usar con precaución, pues puede confundirse en la página con los enlaces (links), que se verán más adelante. |
Hola |
|
<BLINK> ... </BLINK> |
Parpadeante |
Queda bonito, pero si abusas de esto tu página web puede ser un poco mareante. |
|
Vale, ya tenemos texto de todos los tipos, pero falta un poco de color. Veamos como hacerlo...
Para cambiar el color del texto se encierra entre las etiquetas:
donde 'xxxxxx' es el codigo del color, que se expresa con los valores de las componentes rojo, verde y azul (RGB), cuyo valor va oscila entre 0 y 256 (en hexadecimal, y usando dos dígitos para cada componente). Por ejemplo, el rojo correspondería a las componentes RGB (256,0,0), que en hexadecimal es: "#FF0000".
Para colores más raros o complejos lo mejor es probar combinaciones, aunque hay utilidades shareware (o el propio editor de Netscape 3.0 Gold) que permiten obtener el código a partir de un color seleccionado.
De todas formas, aquí teneis los más usados:
"#000000" Negro
"#FFFFFF" Blanco
* El resto de combinaciones con las 6 cifras iguales son tonos de gris.
"#FFFF00" Amarillo
"#FF0000" Rojo
"#00FF00" Verde
"#0000FF" Azul
Podemos cambiar el color por defecto del texto añadiendo a la etiqueta de la sección BODY (en la que estamos escribiendo el código HTML) un parámetro adicional:
Así como otro parametro para definir el color del fondo del documento:
* Nota: se pueden aplicar los dos parametros a la vez, separados por espacios.
2.3. Listas.
Las listas son una forma sencilla y elegante de mostrar opciones, definiciones... y se implementan de una forma sencilla: la lista completa esta delimitada por un comando que indica el tipo de lista, y dentro de éste se pone un comando para cada elemento.
Estructura general:
<tipoLista>
<elemento>nombre del elemento 1
<elemento>nombre del elemento 2
...
...
</tipoLista>
Hay varios tipos de listas: no numeradas, numeradas y de definiciones. La sintaxis concreta para cada una es la siguiente:
- Lista no numerada (unnumbered list):
<ul> ( ul = identificador de tipo de lista )
<li>elemento1 ( li = identificador de elemento de lista )
<li>elemento2
...
...
</ul>
- Lista numerada:
<ol>
<li>elemento1
<li>elemento2
...
...
</ol>
- Lista de definiciones: parejas de terminos <dt> y sus definiciones <dd>
<dl>
<dt>termino1
<dd>definicion del termino1
<dt>termino2
<dd>definicion del termino2
...
...
</dl>
Nota: las listas pueden estar anidadas (unas dentro de otras).
Bueno, ya hemos terminado este tema, ya deberías saber hacer una página web con texto. De todas formas a continuación tienes una página de ejemplo de todo lo que hemos visto en esta lección.
Otros Links de Interés:
Cocina - Videos - Juegos Gratis - Postales cachondas - Cine - Programas Gratis - Letras de Canciones
Listas de todos los Tutoriales Gratis. 1998- 2007 - -
Los
tutoriales y cursos aquí reunidos son una recopilación de los mejores encontrados en
Internet.
El crédito y copyright de los mismos si lo hubiere corresponde al autor de cada
uno de ellos.
Si tu tutorial o curso está aquí, y deseas darlo de baja de esta recopilación o
quieres añadir el tuyo,
envíanos un mensaje desde
aquí