INTRODUCCIÓN

El lenguaje Html sirve para construir documentos electrónicos, que son visualizados por medio de un navegador web.

El documento puede contener textos y enlaces a marcadores del propio documento o a otros documentos, y también a imágenes, sonidos o animaciones.

HTML es la abreviatura de "HyperText Markup Language" (en Inglés), que se traduce como: Lenguaje de Etiquetas de HiperTexto. La particularidad "HiperTexto" señala precisamente que desde un documento se puede enlazar con otros.

Así pues, HTML no es un lenguaje de programación, sino un lenguaje de descripción o presentación de documentos.

Textos

Texto simple

- ¿cual es la forma más simple de presentar un texto en un documento Html?
Ponerlo tal cual, sin más.

Ejemplo 1.1

Este es el ejemplo mas simple de presentar un texto.

y guardar el archivo con el nombre h11.htm o h11.html (cualquiera de las dos extensiones es válida).

El editor tiene que serlo de texto simple, o 'texto plano', no recomendamos usar procesadores de texto como Word, que tienden a guardar los documentos con su propio formato interno, lo que podría convertir en inoperativo el documento Html.

Luego hay que cargar el documento en el navegador. Una forma de hacerlo sería entrar en el navegador, ir a "Abrir archivo" y desde ahí buscar y seleccionar el archivo h11.htm. Una vez cargado, veréis que el texto es presentado sin problemas:

Este es el ejemplo mas simple de presentar un texto.

- ¿Como editar después la página para hacer cambios?
Seleccionando el documento desde el propio editor, o bien entrado por MiPC o con el Explorador de Windows y, situando el cursor sobre el fichero, dar al botón derecho del ratón, elegir "Editar" o "Abrir con" y luego elegir el editor.

Espacios en blanco y saltos de línea

El navegador ignorará en el texto los espacios en blanco repetidos, teniendo en cuenta además que los saltos de línea los interpreta como espacios en blanco. Es decir, si se ponen varios espacios en blanco entre dos letras, el navegador sólo enseñará uno. Ejemplos:

"Hola    mundo"

se verá como

"Hola mundo"

"Hola
mundo"

se verá también como

"Hola mundo"

Si queremos forzar que se vean varios espacios en blanco seguidos entre dos palabras tenemos que poner su correspondiente entidad html:  

De forma que

"Hola    mundo"

se verá en el navegador como:

"Hola    mundo"

(Para quien no conozca los 'secretos' del Html, cuando vea:
"Hola    mundo"
pensará que es una expresión del Diablo ;-))

La entidad   también se utiliza cuando se quieren 'unir' dos palabras de manera que, aunque se vea un espacio entre ellas, si coincidiera el final de una línea entre ambas no queden una al final de la línea y la otra al principio de la siguiente línea.

También hay una manera de forzar la presentación de un salto de línea, para eso está la etiqueta: <br>

Asi,

"Hola<br>mundo"

se verá en el navegador como:

"Hola
mundo"

Etiquetas

Un documento Html siempre contiene texto simple que se ve al completo en el editor, pero en el navegador unos textos se verán y otros no, o se verán de forma diferente. Los que no se ven son las "etiquetas", los que se ven de forma distinta son las "entidades".

Las etiquetas en general son las reglas de presentación de los textos, que son interpretadas por el navegador.
También se utilizan para poner en el documento los enlaces a imágenes, sonidos o a otros documentos, que están fuera del fichero del documento Html.

El formato es: <etiqueta>

Una etiqueta empieza con el simbolo "<" (menor que) y termina con el simbolo ">" (mayor que).
Generalmente una etiqueta va al principio del texto afectado y al final de éste va otra etiqueta de cierre:

<etiqueta>texto afectado</etiqueta>

Como se puede observar la etiqueta de cierre lleva siempre una barra "/".
Con eso el navegador identifica donde comienza la orden, cual es el texto afectado por ella y donde termina.

Hay algunas etiquetas que no tienen etiqueta de cierre, como la <br> que vimos antes.

Decoración sencilla

La forma más sencilla de resaltar textos es utilizar negritas, cursivas o subrayados.

Las etiquetas a emplear son:
Negrita ....... inicio: <b> ... fin: </b>
Cursiva ....... inicio: <i>  ... fin: </i>
Subrayado ... inicio: <u> ... fin: </u>

Ejemplo 1.2

Editar el fichero h11.htm y poner dentro, a continuación del texto existente:

<br><b>Este es un texto en negrita</b>
<br><i>Este es un texto en cursiva</i>
<br><u>Este es un texto subrayado</u>

Guardar y cargar con el navegador. Deben aparecer los textos en sus respectivos formatos:

Este es un texto en negrita
Este es un texto en cursiva
Este es un texto subrayado

Etiquetas anidadas

Se pueden poner unas etiquetas dentro de otras, de forma que el texto será presentado siguiendo las reglas de todas ellas. Ejemplos:

<br><b><i>Este es un texto en negrita y cursiva</i></b>
<br><i><u>Este es un texto en cursiva y subrayado</u></i>
<br><b><u>Este es un texto en negrita y subrayado</u></b>
<br><b><i><u>Este es un texto en negrita, en cursiva y subrayado</u></i></b>

que se verán:

Este es un texto en negrita y cursiva
Este es un texto en cursiva y subrayado
Este es un texto en negrita y subrayado
Este es un texto en negrita, en cursiva y subrayado

El orden en que vayan las etiquetas no cambia el resultado, pero sí es importante que las etiquetas de cierre vayan en el orden inverso de las de inicio.

Otras etiquetas

Superíndice ... Inicio: ^{... Fin:}
Subíndice ...... Inicio: _{... Fin:}

Ejemplos:

<br>El salón tiene 20 m<sup>2</sup>.
<br><b>H<sub>2</sub>O</b> es el símbolo químico del agua.

Se ven:

El salón tiene 20 m².
H₂O es el símbolo químico del agua.

Tamaño, color y fuentes de caracteres

ETIQUETA <font>

La etiqueta <font>, así sola, no sirve para nada pero... una etiqueta puede tener atributos.

Los atributos generalmente siguen el siguiente formato:

<etiqueta atributo1="valor" atributo2="valor"...>

En una etiqueta que admite atributos éstos van dentro de ella (después del nombre de la etiqueta y antes del ">" del final), separados por espacios en blanco (recordemos que el salto de línea también se interpreta como espacio en blanco) y en cualquier orden.

Los atributos que pueden ponerse en la etiqueta <font> son:

size="tamaño-de-letra"

donde tamaño-de-letra puede ser un número sin signo de 1 a 7, o un número con signo de -2 a +4.

Ejemplo 2.1

<font size="1">Texto tamaño 1</font><br>
<font size="2">Texto tamaño 2</font><br>
<font size="3">Texto tamaño 3</font><br>
<font size="4">Texto tamaño 4</font><br>
<font size="5">Texto tamaño 5</font><br>
<font size="6">Texto tamaño 6</font><br>
<font size="7">Texto tamaño 7</font><br>

Al cargarlo en el Navegador, se verán así los textos:

Texto tamaño 1
Texto tamaño 2
Texto tamaño 3
Texto tamaño 4
Texto tamaño 5
Texto tamaño 6
Texto tamaño 7

El tamaño-de-letra también puede ser un incremento o decremento relativo al tamaño "base" que tenga establecido el navegador (que por defecto suele ser el "3"), aunque esta opción se usa poco. Para ver su efecto podemos añadir al fichero anterior el siguiente texto:

<font size="-2">Texto tamaño -2</font><br>
<font size="-1">Texto tamaño -1</font><br>
<font size="+1">Texto tamaño +1</font><br>
<font size="+2">Texto tamaño +2</font><br>
<font size="+3">Texto tamaño +3</font><br>
<font size="+4">Texto tamaño +4</font><br>

que se mostrará así en el navegador:

Texto tamaño -2
Texto tamaño -1
Texto tamaño +1
Texto tamaño +2
Texto tamaño +3
Texto tamaño +4

color="color-de-letra"

Donde color-de-letra puede ser un nombre, o un código hexadecimal con un signo "#" delante (este símbolo se obtiene con la tecla "Alt Gr" y la tecla 3).

Según el navegador usado podría interpretar más nombres, pero estos son los nombres y colores estándar:

Todos los colores se pueden representar con un código hexadecimal y sólo unos pocos tienen un nombre equivalente.

En el código hexadecinal los dos primeros dígitos se refieren a la intensidad del rojo, los dos siguientes a la del verde y los dos últimos a la del azul.

Ejemplo 2.2

Copiar y guardar en el fichero html el siguiente texto:

<font color="blue"><b>Texto en color azul</b></font><br>
<font color="#FF0000"><b>Texto en color rojo</b></font><br>
<font color="purple"><b>Texto púrpura</b></font><br>
<font color="#800080"><b>Texto púrpura también</b></font><br>
<font size="5" color="#809080"><b>Texto grande "¿gris verdoso?"</b></font><br>

que así es como se verá:

Texto en color azul
Texto en color rojo
Texto púrpura
Texto púrpura también
Texto grande "¿gris verdoso?"

face="lista-de-fuentes"

Donde "lista-de-fuentes" es una lista de nombres de fuentes de caracteres, separados por comas.

Este es un atributo que depende mucho del sistema operativo utilizado, de las fuentes de caracteres instaladas y de las que el navegador tenga definidas por defecto.

La lista indica el orden de preferencia de las fuentes con las que queremos que se presente el texto. Si el navegador identifica la primera de la lista la utilizará, en caso contrario si identifica la segunda será la que use, y así sucesivamente; si no reconoce ninguna de ellas, presentará el texto con la fuente de caracteres que tenga definida por defecto. Si un nombre de fuente tiene algún espacio en blanco, se debe poner entre comillas simples.

Hay algunas fuentes genéricas, reconocidas por todos los navegadores:

<font face="serif">Este texto está escrito con fuente "serif"</font><br>
<font face="sans-serif">Este texto está escrito con fuente "sans-serif"</font><br>
<font face="monospace">Este texto está escrito con fuente "monospace"</font><br>

Este texto está escrito con fuente "serif"
Este texto está escrito con fuente "sans-serif"
Este texto está escrito con fuente "monospace"

por eso habitualmente se pone alguna de estas fuentes como última de la lista.

Además de los anteriores, si usáis Windows, el navegador podrá representar las fuentes de caracteres que aparezcan en 'Mapa de caracteres'; si usáis Linux con KDE, las fuentes que aparezcan en 'Instalar fuentes'.

Ejemplo 2.3

Copiar y guardar en un fichero html el texto siguiente:

<font face="Verdana,Helvetica,Arial,sans-serif">
Texto en Verdana, o Helvetica, o Arial, o sans-serif</font><br>
<font face="'Bookman Old Style','Times New Roman',serif" size="5">
Texto en Bookman Old Style,<br>
o Times New Roman, o serif; tamaño 5</font><br>
<font size="4" color="navy" face="'Comic Sans MS',sans-serif"><b>
Texto en Comic Sans MS, o sans-serif;<br>
color azul marino; tamaño 4; negrita</b></font><br>

Así se verá en el navegador (puede variar según las fuentes instaladas):

Texto en Verdana, o Helvetica, o Arial, o sans-serif
Texto en Bookman Old Style,
o Times New Roman, o serif; tamaño 5
Texto en Comic Sans MS, o sans-serif;
color azul marino; tamaño 4; negrita

NOTA: El World Wide Web Consontium (W3C), que es el organismo que define el estándar de Html, entre otros, considera obsoletos o 'desaprobados' la etiqueta <font> y sus atributos, y desaconseja su uso en favor de las hojas de estilo (CSS, ya veremos que es eso) desde la especificación de HTML 4 en abril de 1998. Referencias: http://html.conclase.net/w3c/html401-es/cover.html
Aún debe haber unos cuantos millones de páginas en internet que usan esta etiqueta, así que a corto o medio plazo no parece que vaya a dejar de ser reconocida por los navegadores.