Herramientas para desarrolladores : Cursos, manuales y guías de referencia : Cursos : Introducción al HTML :
Capítulo 2: Inserción de textos
1. Creación de párrafos
Toda página HTML está compuesta, principalmente, por párrafos de texto combinados con otros elementos, como pueden ser imágenes, tablas o formularios. La inserción de párrafos ser realiza mediante la utilización de la étiqueta <p> y su correspondiente cierre, </p>.
La separación entre los párrafos queda prefijada al utilizar las etiquetas anteriores, aunque dependerá del navegador con el que se muestre la página. Sin embargo sí podemos modificar la justificación del texto mediante el parámetro align, que puede tomar los valores left (alineación izquierda), center (alineación centrada) y right (alineación derecha).
Si se desea dejar poco espacion entre párrafos se pueden insertar saltos de línea mediante la etiqueta <br>. A diferencia del tag <p> ... </p>, esta etiqueta no tiene cierre.
Vamos a ver un ejemplo de lo descrito anteriormente:
<html><head>
<title>Ejemplo de creación de párrafos</title>
</head><body>
<p align="right">Párrafo alineado a la derecha.</p>
<p align="center">Párrafo centrado.</p>
<p >Párrafo alineado a la izquierda...<br>y pegado e esta otra línea.</p>
</body></html>
El resultado del códgio anterior es el siguiente:
Párrafo alineado a la derecha.
Párrafo centrado.
Párrafo alineado a la izquierda...
y
pegado a esta línea.
2. Dando formato al texto
Para controlar las tipografías, colores y tamaños de los textos de tu página puedes utilizar la etiqueta <font> ... </font>. Este tag está siendo reemplazado por la utilización de hojas de estilos (CSS), pero para usuarios poco avanzados es mejor comenzar utilizando la etiqueta <font>, más fácil de entender y de implementar.
Para elegir el tipo de letra que desea utilizar en un párrafo, basta con incluirlo entre <font face="tipo-letra"> ... </font>. Por ejemplo, si queremos escribir ¡Hola! con letra Century Gothic utilizamos el siguiente código:
<p><font face="Century Gothic">¡Hola!</font></p>
Lo que resulta en:
¡Hola!Si queremos cambiar el color, emplearemos <font color="color"> ... </font>, donde color es un número que indica el color. Este número está codificado en hexadecimal, y utiliza 256 bits para cada uno de los colores primarios (rojo, verde y azul). En hexadecimal con dos caracteres (de 0 a 9 y de la A a la F) se representan valores de 256 bits. Así, el color blanco se expresa como #FFFFFF y el negro como #000000. Como se aprecia, este sistema es poco intuitivo, por lo que se pueden usar las nomenclaturas estándar de los colores en inglés (red, para el rojo, black para el negro, etc.), pero este sistema es menos flexible y más dependiente del navegador.
Veamos un ejemplo:
<p><font color="red">¡Hola!</font></p>
Que resulta en:
¡Hola!Finalmente, si lo que queremos es modificar el tamaño, le etiqueta a usar es <font size="tamaño"> ... </font>, donde tamaño es un número que puede indicar el tamaño absoluto (con rango de 1 a 7) o el relativo. Por ejemplo, si se utiliza size="2" e texto se mostrará en tamaño 2. Si se utiliza size="+2", se le indica al navegador que muestre el texto 2 veces más grande que el tamaño por defecto definido.
El siguiente ejemplo
<p><font size="5">¡Hola!</font></p>
muestra el texto con el siguiente tamaño:
¡Hola!Por supuesto, existe la posibilidad de combinar los 3 modificadores anteriores en un mismo tag <font>, para especificar el tamaño, color y tipo de letra de una sola vez. En este ejemplo
<p><font face="Courier" color="red" size="4">¡Hola!</font></p>
indicamos que el texto debe escribirse con tipografía courier, color rojo y tamaño 4, lo que resulta en:
¡Hola!
