TEXTO


En esta sección vamos a ver todo lo relacionado con el formato del texto:

 


 


CARACTERES ESPECIALES

Un documento contiene muchos tipos de caracteres, así que es necesario disponer de un juego de caracteres que pueda ser representado en cualquier máquina y que pueda representar todo lo que queremos. El código básico de 127 caracteres (US-ASCII) no es suficiente, así que HTML usa un conjunto de caracteres mucho más completo llamado Conjunto Universal de Caracteres (Universal Character Set, UCS), definido en el estándar ISO10646. En este estándar se define un repertorio de miles de caracteres usados en todo el mundo.El conjunto de caracteres definido en este estándar es equivalente carácter por carácter a Unicode (UNICODE). Los caracteres se transmiten codificados a través de la red, por tanto, los agentes de usuario deben conocer esta codificación. Se pueden utilizar distintos tipos de codificaciones, así, que lo aconsejable es utilizar el atributo "charset" de la etiqueta META para especificarlo. Por ejemplo, para especificar que la codificación de caracteres del documento es la iso-8859-1 debería escribirse:

<META http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

Cuando una codificación no puede representar todos los caracteres, o cuando elhardware o de software no permiten a los usuarios introducir algunos caracteres directamente, se pueden usar :

  • las referencias numéricas de caracteres: decimales ("&#D;", D se refiere al carácter de ISO 10646 en decimal) o hexadecimales ("&#xH;", se refiere al carácter de ISO 10646 en hexadecimal). Por ejemplo, "a" sería &#229 ó &#xE5, respectivamente.
  • las referencias a entidades de caracteres: se utilizan nombres simbólicos para que los autores no tengan que recordar posiciones de código. Por ejemplo, el espacio en blanco es "&nbsp;".

    Ver lista de caracteres.


ENCABEZADOS

La etiqueta <Hn></Hn> formatea el texto como encabezado, siendo n un número entero comprendido entre 1 y 6. Siendo 1 el de mayor tamaño.

Ejemplo:

Código Resultado

<h1>Encabezado 1</h1>
<h2>Encabezado 2</h2>
<h3>Encabezado 3</h3>
<h4>Encabezado 4</h4>
<h5>Encabezado 5</h5>
<h6>Encabezado 6</h6>

Encabezado 1

Encabezado 2

Encabezado 3

Encabezado 4

Encabezado 5
Encabezado 6


ESPACIO EN BLANCO

Para escribir un espacio en blanco se puede usar la barra espaciadora o el código &nbsp;


SALTO DE LÍNEA

Cuando queramos cambiar de línea tenemos que usar la etiqueta abierta <br>


CENTRADO

Si queremos centrar un texto hay que usar la etiqueta <center></center>

Código Resultado

<center>Texto centrado</center>

Texto centrado


ESTILOS LÓGICOS

Las siguientes etiquetas sirven para dar formato al texto. Son etiquetas cerradas.

  • EM: Indica énfasis (emphasis).
  • STRONG: Indica un énfasis más fuerte.
  • CITE: Contiene una cita o una referencia a otras fuentes.
  • DFN: Indica que aquí es donde se define el término encerrado.
  • CODE: Designa un fragmento de código.
  • SAMP: Designa una muestra de la salida de un programa, script, etc.
  • KBD: Indica texto que debe ser introducido por el usuario.
  • VAR: Indica que el texto es una variable o un argumento de un programa.
  • ABBR: Indica una forma abreviada (p.ej., WWW, HTTP, URI, Mass., etc.).
  • ACRONYM: Indica un acrónimo (p.ej., WAC, radar, etc.).
Código Resultado

<em>Énfasis</em>
<strong>Énfasis fuerte</strong>
<cite>Cita</cite>
<dfn>Definición</dfn>
<code>Código</code>
<samp>Muestra</samp>
<kbd>Texto a introducir</kbd>
<var>Variable</var>
<abbr>Abreviatura</abbr>
<acronym>Acrónimo</acronym>

Énfasis
Énfasis fuerte
Cita
Definición
Código
Muestra
Texto a introducir
Variable
Abreviatura
Acrónimo


PÁRRAFOS

  • La etiqueta <p></p> representa un párrafo. Es decir, el texto que vaya entre estas dos etiquetas aparecerá con un salto de línea y adentrado.
Código Resultado

Texto anterior al párrafo
<p align="justify">Tradicionalmente los autores dividen sus pensamientos y argumentos en secuencias de párrafos. La organización de la información en párrafos no se ve afectada por el modo en que se presentan los párrafos.</p>Texto posterior al párrafo

Texto anterior al párrafo

Tradicionalmente los autores dividen sus pensamientos y argumentos en secuencias de párrafos. La organización de la información en párrafos no se ve afectada por el modo en que se presentan los párrafos.

Texto posterior al párrafo
  • La etiqueta <div></div> se utiliza para delimitar un bloque de texto.
Código Resultado

Texto anterior al párrafo
<div align="justify">Tradicionalmente los autores dividen sus pensamientos y argumentos en secuencias de párrafos. La organización de la información en párrafos no se ve afectada por el modo en que se presentan los párrafos.</div>Texto posterior al párrafo

Texto anterior a div
Tradicionalmente los autores dividen sus pensamientos y argumentos en secuencias de párrafos. La organización de la información en párrafos no se ve afectada por el modo en que se presentan los párrafos.
Texto posterior a div

Atributos de <p></p> y <div></div>:

Atributo Valor Descripción
align left|center|right|justify Alinea el parráfo horizontalmente.
lang idioma Indica el idioma en el que se está escribiendo el texto
  • La etiqueta <pre></pre> se utiliza cuando necesitemos que el texto aparezca con los retornos de carro y los espacios en blanco que escribamos.
Código Resultado
<pre>
Este texto aparece preformateado | | | | | 1 | 2 | 3 | | | | | ---------------------------------- | | | | ---------------------------------- </pre>
Este texto aparece preformateado
|          |           |         |
|    1     |     2     |    3    |
 |          |           |         | 
----------------------------------
|          |           |         |
----------------------------------


SEPARADORES

La etiqueta <hr> inserta una línea de separación. Sus atributos son:

Atributo Valor Descripción
align left|center|right Alineación horizontal del separador con respecto al contexto circundante.
noshade   El separador aparece con un color sólido en lugar del "relieve" tradicional de dos colores
size píxeles Altura del separador
width longitud (% o píxeles) Anchura del separador

Ejemplos:

Código Resultado
<hr>

<hr size="5" width="30%" align="center" noshade>




FUENTES

Estilos de fuentes:

TT: texto de teletipo o ancho fijo.
I: texto itálica.
B: texto negrita.
BIG: texto con una fuente "grande".
SMALL: texto con una fuente "pequeña".
S: texto tachado.
U: texto subrayado
SUB: subíndice
SUP: superíndice

Ejemplos:

Código Resultado
<b>negrita</b>
<i>cursiva</i>
<u>subrayado</u>
<tt>teletipo</tt>
<big>grande</big>
<small>pequeña</small>
<s>tachado</s>
X <sub>3</sub>
Y <sup>2</sup>
negrita
cursiva
subrayado
teletipo
grande
pequeña
tachado
X3
Y2

La etiqueta <font></font> cambia las propiedades de las fuentes.
Atributos:

Atributo Valor Descripción
size Un entero entre 1 y 7.El valor "+1" significa un tamaño más grande. El valor "-3" significa tres tamaños menor tamaño de la fuente
color código de color color del texto
face nombre de una fuente lista de nombres de fuentes separados por comas

Ejemplo:

Código Resultado
<font face="Verdana, Arial, Helvetica, sans-serif" size="2" color="#993333">
Tipos de fuentes</font>
Tipos de fuentes

La etiqueta <basefont> sirve para cambiar el tamaño de la fuente.

Ejemplo:

Código Resultado
<basefont size="4">letra a 4, <basefont size="2">letra a 2
Letra a 4, letra a 2


Ejercicio:

En el documento index.html añadir texto e ir probando los distintos elementos de texto mostrados en este apartado.