Para que un texto se muestre en nuestra página web simplemente lo introduciremos en la etiqueta <body>, como hemos visto en los ejemplos anteriores.
Para insertar un párrafo escribiremos el texto entre la apertura y el cierre de la etiqueta <p>:
<p
align: alineación del párrafo (center | left | right | justify).
</p>
Asimismo, podemos insertar un salto de línea usando la etiqueta <br /> (observa que consta de una sola etiqueta, y se cierra con una '/' al final).
<html>
<head>
<title>Mi primera página WEB: texto</title>
</head>
<body>
Esta es línea, y a continuación insertamos un salto de línea.<br/>
Esta es una línea, y a continuación insertamos un salto de línea.<br/>
Esta es una línea, y a continuación insertamos un salto de línea.<br/>
<p>Esto es un párrafo.</p>
<p>Esto es otro párrafo.</p>
</body>
</html>
En la etiqueta <p> podemos usar el atributo align para configurar cómo alinear el texto del parráfo.
También podemos usar la etiqueta HTML <center> para centrar el texto, aunque se encuentra desactualizada en HTML 4.
<html>
<head>
<title>Página WEB de ejemplo: texto</title>
</head>
<body>
Esta es línea, y a continuación insertamos un salto de línea.<br/>
<center>Esta es otra línea.</center>
Esta es una línea, y a continuación insertamos un salto de línea.<br/>
<p align="left">El texto de este párrafo está alineado a la izquierda (por defecto, si no se indica nada).</p>
<p align="center">El texto de este párrafo está alineado al centro.</p>
<p align="right";>El texto de este párrafo está alineado a la derecha.</p>
</body>
</html>
El anterior código fuente dará como resultado la siguiente página en el navegador.
Observa cómo en la línea donde se usa la etiqueta <center> no es necesario poner un <br/> al final, ya que se trata de una etiqueta de tipo block (crea una línea nueva).
Relacionado: [ Texto en CSS ]
Con el atributo text de la etiqueta <body> podremos definir el color de letra para todo el documento.
Usaremos las etiquetas <b> o <strong>para mostrar el texto en negrita, <u> para mostrarlo subrayado e <i> para visualizarlo en cursiva.
También podemos usar los atributos de la etiqueta <font>:
<font
color: color del texto (nombre del color | hexadecimal).
face: nombre del tipo de letra a usar para mostrar el texto.
size: tamaño de la letra, especificado entre un rango de '1' a '6', siendo '3' el valor por defecto.
>
</font>
Ejemplo:
<html>
<head>
<title>Página WEB de ejemplo: texto</title>
</head>
<body text="orange">
<b>Esta es una línea</b>, y a continuación <b><u>insertamos un salto</u></b> de línea.<br/>
Esta es una línea, y <u>a continuación insertamos</u> un salto de línea.<br/>
Esta es una línea, y <strong>a continuación</strong> insertamos un <i>salto de línea</i>.<br/>
<font color="green" size="11px">Esta es una línea</font>, y a continuación insertamos un <i>salto de línea</i>.<br/>
<font face="Arial">Esta es una</font> línea, y <font color="red">a continuación</font> insertamos un <i>salto de línea</i>.<br/>
<p>Este es una párrafo <font color="cyan">con <u>la letra</u> en <b>diferentes formatos</b></font>.</p>
</body>
</html>
Dará como salida:
Las etiquetas <font> y <u> se encuentran desactualizadas en HTML 4, así como los atributos de la etiqueta <body> (se recomienda usar CSS en su lugar).
A continuación te mostramos otras etiquetas HTML que definen la forma en que se debe mostrar el texto:
- <abbr>: indica que el texto se trata de una abreviatura. Es recomendable indicar el texto sin abreviar en el atributo title, para que se visualice al situar encima el cursor del ratón. Se suele mostrar punteado en varios navegadores web.
- <address>: mostrar datos de contacto.
- <acronym>: indica que el texto se trata de un acrónimo o sigla. Es recomendable indicar el texto completo en el atributo title, para que se visualice al situar encima el cursor del ratón. Se suele mostrar punteado en varios navegadores web.
- <b>: muestra el texto en negrita. Declarada como obsoleta.
- <big>: texto más grande
- <cite>: hace referencia al autor de una cita (normalmente el texto es mostrado como itálica).
- <code>: muestra el texto con apariencia de código fuente de programación.
- <del>: tachado.
- <dfn>: definición.
- <em>: enfatizado.
- <i>: muestra el texto como itálica.
- <ins>: tipo corrección (normalmente se muestra subrayado).
- <kbd>: texto tipo teclado (normalmente se muestra con un tipo de letra 'monospaced').
- <pre>: muestra el texto manteniendo espacios, saltos de línea, tabulaciones, etc.
- <samp>: tipo ejemplo (normalmente se muestra con un tipo de letra 'monospaced').
- <small>: texto más pequeño.
- <strong>: texto en negrita, usado como para dar más importancia al texto.
- <sub>: subíndice.
- <sup>: superíndice.
- <u>: subrayado. Declarada como obsoleta.
Como hemos visto, disponemos de <cite> para referenciar a la fuente de un texto, pero también podemos usar <q> para mostrar la cita o bien <blockquote> cuando ésta es más extensa.
<q> y <blockquote> disponen del siguiente atributo para hacer referencia a la fuente original:
cite: URL de la que se ha extraído la frase.
Se puede usar <cite> al indicar el nombre de la persona o fuente de la cita, y <blockquote> para el texto en sí.
Por último comentar que HTML ignora cuando se introducen varios espacios, mostrando sólo uno: si se desea que hayan usaremos la entidad HTML (una vez por cada espacio en blanco deseado).
Ejemplo:
<html>
<head>
<title>Página WEB de ejemplo: texto</title>
</head>
<body>
<em>Text enfatizado</em><br/>
<strong>Texto en negrita</strong><br/>
<dfn>Texto definición</dfn><br/>
<code>Texto código fuente de ordenador</code><br/>
<samp>Texto tipo ejemplo</samp><br/>
<kbd>Texto de teclado</kbd><br/>
<var>Variable</var><br/>
En esta línea se muestra un <del>texto tachado</del> y se simula <ins>una corrección</ins>.<br/>
<cite>Esto es una cita</cite><br/>
<big>Este texto más grande</big> y este <small>texto más pequeño</small><br/>
En esta línea tenemos <sup>texto en superíndice</sup> y <sub>texto en subíndice</sub><br/>
<pre>
El texto en una etiqueta 'pre' mantiene los espacios y
saltos de línea
</pre>
</body>
</html>
En la siguiente imagen puedes ver cómo quedará la página web en el navegador:
La etiqueta <span> permite agrupar texto, siendo usado principalmente con Hojas de Estilos CSS para aplicarles un formato:
<html>
<head>
<title>Mi primera página WEB</title>
<style type="text/css">
.azul { color:blue }
.rojo { color:red }
</style>
</head>
<body>
<p>En este <span class="azul">párrafo mostramos</span> un <span class="rojo">ejemplo de uso</span> de la etiqueta.</p>
</body>
</html>
En nuestro curso de CSS explicamos el uso de Hojas de Estilos
Al crear una página web hemos de tener en cuenta que si insertamos determinados caracteres o símbolos es posible que no se visualicen correctamente dependiendo de la región en la que se encuentre el usuario, y que su navegador web use un juego de caracteres diferente al nuestro.
Los juegos de caracteres son sistemas de codificación de caracteres, siendo UTF-8 e ISO-8859-1 los más usados en las páginas web.
Podemos insertar caracteres especiales en HTML usando entidades. Algunas de las más usadas son:
| CARÁCTER | ENTIDAD |
| < | < |
| > | > |
| & | & |
| " | " |
| espacio | |
Relacionado: [ Entidades HTML ] - [ Codificación de caracteres ] - [ Unicode ] - [ UTF-8 ] - [ ISO-8859-1 ]
