---
Página principal

CAPITULO 6
(Lo que nos habíamos dejado)

Indice del curso
---

Bueno, llegó el momento de ponernos un poco serios. Al principio de este curso de Edición Extremadamente Simple de HTML advertí que había un par de cosas fundamentales que dejaría para después. Bueno, pues ahora es después.

Lo primero son los códigos de caracteres extendidos. Sin darnos cuenta ya hemos usado uno de ellos ¿Recordais al viejo amigo   que nos permitió poner un espacio donde queríamos? Bueno, pues ese es uno de estos códigos. Aclaremos un poco las cosas:

El HTML usa caracteres de siete bits, esto significa que cada letra o signo se codifica mediante un número de siete bits. A los anglohablantes en general esto no les causa problemas de ninguna clase, puesto que todas las letras que ellos usan están dentro de las codificadas por esos siete bits. Lo malo es que a los que hablamos otros idiomas nos empiezan a faltar letras. Este es el caso, por ejemplo, de las letras Ñ, Ç, ß, Ø, Æ, y todas las vocales acentuadas de algún modo. Todas estas (y muchas otras) se codifican mediante ocho bits, y no serán reconocidas por un navegador que solo use caracteres de siete bits. Para solucionar esto se usan una serie de códigos, llamados entidades, que representan a estas letras. Todos estos códigos comienzan con el simbolo ampersand (&) y acaban con un punto y coma (;). Los mas habituales para los hispanohablantes son:

áá
éé
íí
óó
úú
ÁÁ
ÉÉ
ÍÍ
ÓÓ
ÚÚ
ññ
ÑÑ
´´
¿¿
¡¡

Esta tabla no es ni mucho menos completa, solo la pongo a modo de ejemplo elemental.

Mucho ojo con las mayúculas y las minúculas: No es lo mismo poner Á que á o Á.
En el primer caso aparecerá el caracter Á, en el segundo se verá á, y en el tercero saldrá el extraño código "Á".

Pulsa aquí para ver una tabla completa de los caracteres extendidos

De todas formas, con lo que hemos visto ya podemos hacer un ejemplo de página de este modo:

<HTML>
<HEAD>
<TITLE>Ejemplo con caracteres extendidos</TITLE>
</HEAD>
<BODY>
<P>Este es un peque&ntilde;o ejemplo de p&aacute;gina en el que podemos ver los c&oacute;digos que hay que introducir para que los acentos (&acute;), las e&ntilde;es (&Ntilde;), y otros signos se puedan ver sin problemas en cualquier navegador del mundo.</P>
<P>&iquest;No te parece fantastico?</P>
<P>Ya sabes que puedes copiarlo, ponerle la extensi&oacute;n HTML, y verlo en tu browser favorito.</P>
</BODY>
</HTML>

Ejemplotambién sabes como verla directamente.

El uso de estos simbolos es un poco engorroso al principio, pero te garantiza que cualquiera pueda leer tu página sin problemas, en cualquier parte del mundo.

---

Cuando vimos como dar formato al texto, nos saltamos un grupo de tags un poco diferentes de los demás. Hemos comprobado ya que cada navegador muestra las cosas ligeramente distintas a cualquier otro. Sin embargo, estos tags, aun siendo de los mas antiguos del HTML (o, mejor dicho, precisamente por esto), son un caso un poco especial. Cada navegador los presenta como le viene en gana, mas exactamente como le viene en gana al usuario, porque son perfectamente configurables en la mayor parte de browsers. Esto hace que hoy día no sean muy utilizados, pero tiene la ventaja de que incluso los navegadores en modo texto o los mas antiguos reconozcan estos tags y los muestren.

<ACRONYM>texto</ACRONYM>En este ejemplo puedes ver este tag tal como aparece en tu browser
<CITE>texto</CITE>En este ejemplo puedes ver este tag tal como aparece en tu browser
<CODE>texto</CODE>En este ejemplo puedes ver este tag tal como aparece en tu browser
<DFN>texto</DFN>En este ejemplo puedes ver este tag tal como aparece en tu browser
<EM>texto</EM>En este ejemplo puedes ver este tag tal como aparece en tu browser
<KBD>texto</KBD>En este ejemplo puedes ver este tag tal como aparece en tu browser
<VAR>texto</VAR>En este ejemplo puedes ver este tag tal como aparece en tu browser
<SAMP>texto</SAMP>En este ejemplo puedes ver este tag tal como aparece en tu browser
<STRONG>texto</STRONG>En este ejemplo puedes ver este tag tal como aparece en tu browser
<BLOCKQUOTE>texto</BLOCKQUOTE>
En este ejemplo puedes ver este tag tal como aparece en tu browser

El uso de los tags de esta tabla es el habitual, sustituyendo "texto" por lo que vayas a decir. Recuerda que, independientemente de como se muestren en tu navegador, pueden tener un aspecto totalmente distinto en cualquier otro o, incluso, tener el mismo aspecto que el texto normal.

Estas etiquetas están pensadas para indicar no la apariencia del texto, sino el papel lógico que desempeña la información que contiene.

Para que te hagas una idea, ACRONYM está pensado para indicar que su contenido son siglas o una abreviatura. CITE se concibió para ser usada en las citas literales, CODE para mostrar código fuente de programas y similares, DFN para definiciones, EM para indicar un énfasis al texto, KBD para indicar una entrada de teclado, VAR para mostrar variables de programas, SAMP para indicar ejemplos, STRONG para enfatizar el texto y BLOCKQUOTE para indicar un texto extraido de otra fuente o autor.

Una etiqueta parecida en su funcionamiento a las anteriores es la siguiente:

<ADDRESS>dirección del autor</ADDRESS>

Que se usa para indicar que su contenido es la dirección del autor de la página.

Otra etiqueta importante es <PRE>, que sirve para crear texto preformateado.

Texto preformateado significa que, al contrario de lo que suele ocurrir en HTML, se conservarán los espacios en blanco y los saltos de párrafo tal como los hayas escrito.

Se usa del siguiente modo:

<PRE>Texto en el que se conservará los espacios...
...
...
Y los saltos de párrafo.</PRE>

Con esta etiqueta también se mostrarán todas las letras como de "paso fijo" es decir, que todas las letras ocuparán el mismo ancho, como en las máquinas de escribir). Esto la hace muy útil para crear gráficas u otros dibujos usando solo texto, como el que tienes aquí abajo:

   ##########################################
   #                                        #
   #    _|||_         DIBUJO                #
   #  C(.) (.)D      HORRIBLE               #
   #   (  M  )                              #
   #    (---)     Ya se que es muy malo,    #
   #     | |   pero no me condenes por ello #
   #                                        #
   ##########################################

Otra serie de tags de apariencia variable son los llamados "cabeceras", que se usan para indicar secciones del texto (de ahí su nombre). Las cabeceras, generalmente, ponen el texto en negrita y cambian su tamaño. hay seis cabeceras que son, de mayor a menor importancia y (posiblemente) tamaño de letra:

<H1>texto</H1>
<H2>texto</H2>
<H3>texto</H3>
<H4>texto</H4>
<H5>texto</H5>
<H6>texto</H6>

en las que debes sustituir "texto" por la frase que quieras poner.

En un documento (página) HTML pueden aparecer tantas cabeceras de segundo o mayor nivel como quieras, pero solo puedes poner, como máximo, una de primer nivel.

La única opción que tienen las cabeceras es ALIGN= que, como en otros casos, alinea el texto a la derecha, izquierda o centro con RIGHT, LEFT o CENTER respectivamente.

para ver las cabeceras comodamente, usaremos este ejemplo:

<HTML>
<HEAD>
<TITLE>
cabeceras
</TITLE>
</HEAD>
<BODY>
<H1>texto con la cabecera 1</H1>
<H2>texto con la cabecera 2</H2>
<H3>texto con la cabecera 3</H3>
<H4>texto con la cabecera 4</H4>
<H5>texto con la cabecera 5</H5>
<H6>texto con la cabecera 6</H6>
</BODY>
</HTML>

Ejemplopica para ver el ejemplo

Otra etiqueta interesante es la siguiente:

<!-- texto -->

Que sirve para inclur comentarios en el código de una página, sin que estos aparezcan al mostrarla (en el ejemplo anterior, la palabra "texto" no aparecería en la página). los dos únicos signos que no puedes poner dentro de un comentario son dos guiones seguidos (--) y/o el signo "mayor que" (>)

Y con esto ya nos hemos puesto al día con lo que nos habíamos dejado atrás. En el próximo capítulo de Edición Extremadamente Simple de HTML veremos algunas cosas nuevas y muy interesantes.

---

Capitulo anteriorPrincipio de este capituloIndice del cursoCapitulo siguiente

---

HTML 4.0 VálidoCSS Válido