2.5 Elementos básicos: texto, vínculos, listas, tablas, objetos, imágenes y aplicaciones

Texto

• El texto básico de un documento HTML puede escribirse sin etiquetas. Cada navegador lo visualiza entonces con el tipo y tamaño de caracteres escogidos en su configuración por defecto, e introduce un salto de línea cuando los caracteres alcanzan el borde de la ventana.
• La etiqueta básica, que controla el tipo de fuente utilizado, es <FONT>
• <FONT> es una etiqueta pareada. Por tanto, afecta a los caracteres introducidos entre <FONT> y </FONT>. Pero sin más especificaciones, la etiqueta aún no sirve para nada.
• Se puede especificar el tipo de letra (es decir, la fuente de caracteres) añadiéndolo a la etiqueta, de la siguiente manera (en este caso, la fuente escogida es Arial): <FONT FACE=”Arial”>…</FONT>.
• Se puede especificar el color de la fuente con la etiqueta <FONT COLOR=”?”>…</FONT>. Para especificar los colores, conviene saber al menos lo siguiente:
  1. Cada color posee su correspondiente código.
  2. Hay dos códigos: hexadecimal –lo más habitual– o RGB. En ambos casos se trata de expresar las proporciones de tres colores básicos: rojo, verde y azul.
  3. Los valores hexadecimales de los tres colores se expresan de la siguiente manera:
     1. Rojo: color:#ff0000;
     2. Verde: color:#00ff00;
     3. Azul: color:#0000ff;
  4. Los mismos colores, expresados con los valores RGB (red, green, blue), son los siguientes:
     1. Rojo: color:rgb(255,0,0);
     2. Verde: color:rgb(0,255,0);
     3. Azul: color:rgb(0,0,255);
  5. Todos los colores se expresan mediante combinaciones de estos tres colores básicos. Existen muchos programas que proporcionan los valores de todos los colores que el usuario puede componer. También en internet existen muchas páginas con los Códigos de colores.
  6. Los colores más básicos pueden especificarse sin código, simplemente escribiendo la palabra correspondiente (por supuesto en inglés). Por ejemplo: <FONT COLOR=”blue”>…</FONT>, <FONT COLOR=”red”>…</FONT>, etc.
•  Se puede especificar el tamaño de la fuente con la etiqueta <FONT SIZE=”?”>…</FONT>. El valor del tamaño (“?”) deseado puede suministrarse de manera absoluta (un número del 1 al 7) o relativa (+1, +2, -1, -2, etc., teniendo en cuenta que el valor por defecto es 3).
• Todas estas etiquetas se pueden combinar, de modo que con una sola se controla, por ejemplo, el tipo, el tamaño y el color de los caracteres: <FONT FACE=”Arial” COLOR=”#0000FF” SIZE=”5″>…</FONT>.

Ejemplo:

Vínculos o Enlaces

• La sintaxis general de la etiqueta es muy simple: <A HREF=”destino”>…</A>. (Los puntos suspensivos representan el elemento enlazado.)
• Para que el destino se abra en una ventana nueva, hay que indicar el siguiente atributo: <A HREF=”destino” target=”_blank”>…</A>
• El destino de un hiperenlace puede ser de tres tipos:
  1. Enlace externo: otro documento HTML situado en un ordenador remoto.
  2. Enlace local: otro documento HTML situado en el mismo ordenador.
  3. Ancla: otro lugar dentro del mismo documento HTML.

Ejemplo:

Listas

• Las listas son elementos que, como los títulos, permiten presentar niveles jerarquizados de texto.
• Los documentos HTML permiten dos tipos de listas:
  1. Listas no ordenadas (bullet list): su etiqueta principal es <UL>…</UL>.
  2. Listas ordenadas o numeradas (numbered list): su etiqueta principal es <OL>…</OL>.
  3. Listas de definiciones (definition list): su etiqueta principal es <DL>…</DL>

• Una vez definido el tipo de lista deseada, los elementos que la componen se marcan de distinta manera según el tipo:
  1. En las listas ordenadas (<OL>…</OL>) o no ordenadas (<UL>…</UL>), cada elemento de dicha lista se marca con la etiqueta <LI>…</LI> (list item).
  2. En las listas de definición (<DL>…</DL>), se utilizan dos: cada elemento que se define se marca con <DT>…</DT> y el texto de cada definición se marca con <DD>…</DD>. Esta etiqueta se puede repetir si se necesita introducir varios elementos de definición.
• Las listas se pueden encajar unas dentro de otras, además de con el resto de las etiquetas disponibles.

Ejemplo:

Tablas

• Las tablas permiten ordenar y alinear los elementos de un documento de una manera precisa.
• Las tablas son mucho más frecuentes de lo que parece a primera vista, puesto que, en la mayor parte de los casos, las líneas que las definen permanecen ocultas.
• Las etiquetas fundamentales que definen una tabla son las siguientes:

Etiquetas	Función
<TABLE>…</TABLE>	Principio y final de tabla
<TR>…</TR>	Principio y final de línea
<TD>…</TD>	Principio y final de celda

Ejemplo:

Objetos

Además de las imágenes, HTML permite incluir en las páginas web otros elementos mucho más complejos, como applets de Java y vídeos en formato QuickTime o Flash. La mayoría de este tipo de contenidos no los interpreta el navegador directamente, sino que hace uso de pequeños programas llamados plugins y que se encargan de tratar con este tipo de elementos complejos.

La etiqueta <object> es la que permite “embeber” o incluir en las páginas HTML cualquier tipo de contenido complejo:

Etiqueta	<object>
Atributos comunes	básicos, internacionalización y eventos
Atributos propios	data = "url" – Indica la URL de los datos que utiliza el objeto classid, codebase, codetype – Información específica que depende del tipo de objeto type – Indica el tipo de contenido de los datos height = "unidad_de_medida" – Indica la altura con la que se debe mostrar el objeto width = "unidad_de_medida" – Indica la anchura con la que se debe mostrar el objeto
Tipo de elemento	Bloque y en línea
Descripción	Se emplea para embeber objetos en los documentos

El atributo data se emplea para indicar la URL del recurso que se va a incluir. El atributo type indica el tipo de contenido de los datos del objeto. Los posibles valores de type están estandarizados y coinciden con los del atributo type de la etiqueta <a> que se explicó anteriormente.

Ejemplo:

También se pueden incluir varias versiones alternativas de un mismo contenido. Así, si el navegador no es capaz de interpretar el formato por defecto, puede optar por cualquiera de los otros formatos alternativos.

Imágenes

• La etiqueta básica para insertar una imagen es: <IMG SRC=”dirección de la imagen”>. De esta manera, el navegador visualizará la imagen contenida en la dirección especificada.
• Como puede verse, la imagen no forma parte de un documento HTML: éste sólo indica al navegador dónde puede descargarla.
• Esta etiqueta básica posee varios atributos, que se muestran en la siguiente tabla:

Atributos	Función
<IMG alt=”***”>	Texto alternativo (el que aparece cuando se posa el ratón sobre la imagen)
<IMG width=”¿?”> <IMG height=”¿?”>	Especificación de la altura y la anchura en píxeles
<IMG align=”top”> <IMG align=”middle”> <IMG align=”botton”> <IMG align=”left”> <IMG align=”right”>	Distintas posibilidades de alineación con respecto al texto
<IMG border=”¿?”>	Borde de la imagen

Aplicaciones

Las HTML applications o aplicaciones en HTML son programas ejecutados por parte de Internet Explorer bajo un programa llamado mshta.exe que hace que un código de HTML sea ejecutado como si fuera una aplicación.

Ejemplo: