(Anterior) HTML / XHTML

HTML / XHTML a Detalle (Parte 2) (Siguiente)

Uso diario y ocasiones especiales.

Existen varios elementos HTML / XHTML que son empleados en diversas instancias a lo largo de un documento, entre ellos se encuentran :

Además de estos elementos, existen otros Tags utilizados para dar un formato especial al texto que será incorporado a un documento:

Finalmente existen otros caracteres que por su naturaleza son reservados, o bien, carecen de un despliegue definido en determinados ambientes, a continuación se describen estos caracteres especiales :

Tablas y Listas

Tablas

Una Tabla en HTML / XHTML es una manera muy eficiente de organizar datos por medio de cuadrantes, los tags que se utilizan para definir una tabla son <table> ,y dentro de estos elementos se encuentran anidados los tags <tr> para definir renglones, <th> para declarar encabezados y <td> para definir el contenido de una celda , a su vez cada tag también puede tomar ciertos atributos empleados para definir detalles más específicos, a continuación se describen varios de estos atributos que pueden emplearse en la generación de Tablas:

La siguiente tabla hace uso de los diversos elementos descritos anteriormente:

 
<table align=center border=4>
<tr bgcolor="#DDDDDD">   
<th> Producto </th> 
<th> Valor </th>
<th rowspan=2> Inventario </th> 
<th> Tiempo de Entrega </th> 
</tr>

<tr bgcolor="#DDDDDD">   
<th> (Descripción) </th> 
<th> (Dlls)  </th>
<th> (Semanas)  </th> 
</tr>

<tr>
<td>Relojes</td>   
<td><font color=blue>$120.35 </font></td>   
<td> 23 </td>
<td> 1 Semana </td>
</tr>

<tr >
<td bgcolor=yellow>PDA's height=100</td>   
<td>$250.00</td>   
<td colspan=2 align=center> No Disponible </td>
</tr>


</table>

El fragmento anterior generaría una tabla como la siguiente:

Además de los elementos mencionados anteriormente hay otros Tags que fueron incorporados a la especificación HTML (4.01) y permiten funcionalidades opcionales en la definición de Tablas, algunos de estos elementos son:

La siguiente tabla hace uso de los elementos descritos anteriormente:

 
<table align="center" border="5" rules="groups">

<caption align="bottom"> Uso de "Browsers" entre 1997-2002 </caption> 

<thead>
 <tr>   
  <td colspan="2" rowspan="2"> 
  <th colspan="2" align="center"> Tendencias de Uso
 </tr>
 <tr> 
  <th> 1997
  <th> 2002
 </tr>
</thead>

<tfoot> 
<tr>
  <td colspan="4" align="center"> 
     Nota: Datos de <i>internet.com</i>
 </td> </tr>
</tfoot> 

<tbody> 
 <tr align="center">   
  <th rowspan="3"> Browsers
  <th> "Netscape Navigator"
  <td> 75%
  <td> 12%
 </tr>

 <tr align="center">   
  <th> "Internet Explorer"
  <td> 20%
  <td> 85%
 </tr>

 <tr align="center">   
  <th> Otros  
  <td> 5%
  <td> 3%
 </tr>
</tbody> 
</table>

Nótese que algunos elementos no contienen su elemento de clausura, específicamente <td>, <th>, <tbody>, <thead>, <tfoot>, la terminación de estos elementos se da por "default" en el "Browser" al encontrarse otro Tag del mismo tipo; aunque este diseño es válido, se recomienda siempre clausurar todos los elementos en un documento HTML para evitar despliegues erróneos y así también conformar un documento XHTML, ya que esta clausura es un requisito del estándar XHTML como sera descrito posteriormente.

El fragmento anterior generaría una tabla como la siguiente:

Listas

La creación de listas es otro elemento de HTML / XHTML que es utilizado ampliamente, existen dos metodologías:

• Listas sin enumerar: Una lista sin enumerar esta compuesta por elementos que no ocupan secuencia, para este tipo de listas los dos tags que se utilizan son <li> y <ul> . El elemento <li> genera un inciso ("bullet") para la información , mientras que <ul> desfaza el contenido hacia el interior del documento.

 
Esto aun no se desfaza 
<ul>  
<li> Este es el primer elemento sin orden
<li> Le sigue el segundo 
<li> Es mejor utilizar lista con orden 
</ul>  
El desfaze termino 

Generaría una lista de la siguiente manera:

• Listas Enumeradas: También es posible enumerar los elementos que conforman la lista, este tipo utiliza los tags <ol> y y <li> . El elemento <li> genera un inciso ("bullet") dependiendo del parámetro que sea especificado en <ol> , además desfaza el contenido de la lista de acuerdo a su composición.

 
Esto aun no se desfaza 

<ol type=I>  
<li> Primer elemento romano 

<ol type=1>
<li> Mejor en la lista interna  
<li> Su segundo Valor  
</ol>  

<li> Seguimos con el segundo romano 

<ol type=a>
<li> Empezamos lista con letra para terminar 
</ol>

</ol>

Termina el desfaze

Generaría una lista de la siguiente manera:

En la siguiente tabla se describen los atributos más comunes para elementos de listas.

Links e Imágenes

Links

Los Links quizás presenten el elemento más importante de HTML / XHTML : la facilidad de saltar de un punto del documento a otro y generar información a partir de archivos ajenos al documento original

Links de Referencia

El link clásico es la referencia a otra página, para esto se utiliza el tag a con el atributo href

  <a href="http://www.osmosislatina.com"> Visita Osmosis Latina !! </a> 

Aparece como: Visita Osmosis Latina !!

Otro tipo de link es aquel que se ofrece para movilizarse a otro documento dentro del mismo sitio:

 <a href="javascript.htm"> JavaScript </a> 

Aparece como: JavaScript

Este tipo de Link asume que el documento solicitado se encuentra en el mismo directorio de trabajo que el documento que contiene el link. En dado caso de no ser esta la ubicación, se pueden utilizar ".." (Dos Puntos) para descender del directorio o una dirección absoluta para indicar la ubicación:

<a href=../index.htm"> Indice </a> 

 (NOTA: Esta sintaxis aunque válida, no es recomendable )
        

Aparece como: Indice

  <a href="/index.htm"> Indice (Absoluto)  </a> 

Aparece como: Indice (Absoluto)

Cuando se emplea una diagonal al inicio del atributo href se dice que se trata de un link absoluto, mientras que cuando se omite esta diagonal se dice que el link es relativo al directorio de trabajo.

Links de Referencia Avanzados

Existe la posibilidad de ofrecer un Link y que este sea abierto en otra ventana, esto beneficia al lector ya que no interrumpe la lectura del documento actual, para esto se utiliza el atributo target :

  <a href="http://www.cisco.com" target="cisco"> http://www.cisco.com </a>

Aparece como: http://www.cisco.com

Esta capacidad de asignarle un nombre a una ventana del "Browser" será descrita a mayor detalle en la sección de "Frames" para HTML, por ahora solo vale mencionar que el valor "default" cuando no es indicado el atributo target es la ventana actual del Navegador, la cual es referenciada por el valor _self.

Para generar un Link que transfiera al usuario a un punto dentro del mismo documento, se deben utilizar dos tipos de tags , uno llamado anchor que indica el punto de referencia y otro link con un argumento hacia el anchor . Para definir el punto de interés (anchor) se utiliza el atributo name

 <a name="links"> <h4> Links </h4> </a>  
      
(Los tags  <h4>  y  </h4>  indican un titulo de Encabezado )

La declaración anterior define como punto de interés (anchor) el titulo principal de Links, para definir un link hacia este punto de interés ( anchor ) se utiliza el signo # anexado al titulo del documento.

  <a href="html_fondo.htm#links"> hacia el titulo de Links  </a> 

Aparece como: hacia el titulo de Links

Cabe mencionar que también es posible hacer referencias con anchors a otros documentos:

 <a href="html.htm#porque"> Porque se necesita HTML   </a> 

Aparece como: Porque se necesita HTML

Para desplegar un link de correo electrónico se utiliza el atributo mailto :

  <a href=mailto:micorreo@hotmail.com> mi correo </a> 

Aparece como: mi correo

Imágenes

A pesar que las imágenes en un documento HTML / XHTML parecieran formar parte integral del documento, una imagen se integra a un documento HTML / XHTML de una manera muy similar a un link, toda imagen es llamada de un directorio para que ésta forme parte del documento, el tag empleado para esta tarea es img acompañado del atributo src .

Además del atributo src el tag , img puede emplear los atributos : alt, height, width y align ,el primero es utilizado para ofrecer una descripción textual en dado caso de no observarse la imagen, los siguientes dos son utilizados para forzar la imagen en un espacio limitado , mientras el último parámetro indica la alineación de la imagen en el documento.

 <img src="graficas/logo.gif" width=50 height=20 
            alt="El logo pequeño de Osmosis Latina"> 

Aparece como:

Donde 50 es el ancho(en pixels) y 20 el largo(en pixels) de la imagen. Observe el siguiente ejemplo donde puede ser alineada la imagen y modificado su tamaño

  <img src="graficas/logo.gif" width="180" height="80" align="right" 
             alt="El logo modificado de Osmosis Latina con más pixels"> 

Aparece como:

Existen ciertas imágenes que son fraccionadas para utilizarse en combinación con links, esta tarea es realizada a través de los elementos <map> y <area>

La gráfica anterior es fraccionada en tres secciones y su definición en código fuente es la siguiente:

<img src="graficas/mapa.gif" alt="Mapa" usemap="#latam" height="200" width="120">

<map name="latam" id="latam">
  <area coords="0,0,45,45" href="javascript:window.alert('México!')" alt="México">
  <area coords="45,45,60,60" href="javascript:window.alert('Centro-América!') alt="Centro-América">  
  <area coords="60,60,170,170" href="javascript:window.alert('Sud-América!')" alt="Sud-América">  
</map>

La primer declaración es idéntica a cualquier otra imagen con la excepción del atributo usemap, el cual indica el uso de un mapa de coordenadas para la gráfica en cuestión, dicho mapa es definido a través del elemento <map> que toma como atributo su nombre.

Anidado dentro del elemento <map> se encuentran diversos Tags <area> que representan las coordenadas en Pixels de la gráfica así como las respectivas acciones; el atributo coords representa un juego de coordenadas x,y,x,y del vértice inicial y final (en Pixels) respectivamente, mientras el atributo href representa la acción a realizarse en el punto de la gráfica.

En este caso los valores de los atributos href representan funciones JavaScript las cuales serán descritas en su respectiva sección, estos valores también pudieron haber sido definidos como links hacia otros documentos, tal y como se hace en los elementos <a>.

Finalmente vale mencionar que para el Tag area existe un atributo opcional denominado shape que permite definir una sección diferente a la de un rectángulo :

  <!-- Define una área de circulo con vértice x,y y 
          un radio de r Pixels                         -->

  <area shape="circle" coords="x,y,r" href=".....">


  <!-- Define una área Poligonal con los respectivos vértices
           x1,y1, x2,y2, x3,y3 -->

  <area shape="polygon" coords="x1,y1,x2,y2,x3,y3,..." href=".....">  

BMP, GIF, JPEG, PNG y SVG.

Existen diversos formatos de gráficas empleados para distribuir imágenes en Internet hoy en día, en los siguientes incisos se describen sus principales características, ventajas y desventajas.

• BMP ("Bitmap File Format") : Es el formato estándar para plataformas Windows y es uno de los más antiguos para almacenar gráficas, sin embargo, a pesar de poseer una de las mejores resoluciones para almacenaje, esta misma resolución hace que este formato sea de poco uso en sitios de Internet, esto generalmente se debe al alto tiempo de descarga que representaría una imagen de este tipo.

• GIF ("Graphics Interchange Format") : Este formato es ideal para imágenes que no contienen una gran variedad de colores, esto se debe a que GIF solo es capaz de guardar hasta 8-bits de resolución (256 Colores), para la gran mayoría de los casos la resolución ofrecida por una gráfica GIF es suficiente para ambientes como Internet.Además de lo antes mencionado, utilizando el formato GIF es posible generar una imagen compuesta por varias gráficas, para dar el efecto de cortometraje o "Banner".

• JPEG/JPG ("Joint Photographic Experts Group") : El formato JPEG es recomendado cuando se requiere una alta resolución fotográfica, ya que una de las cualidades del formato JPEG es guardar imágenes en 24-bits y la otra cualidad es el nivel de compresión que puede ser logrado con la imagen, en efecto minimizando el tiempo de descarga. En ocasiones en las que es necesario re-editar una imagen, no es conveniente utilizar el formato JPEG, ya que en el proceso de compresión se pierden características originales de la imagen

• PICT : Es el formato nativo de Macintosh para almacenar imágenes y es utilizado en algunos sitios de Internet; ofrece mejores niveles de resolución que el formato GIF, sin embargo, el nivel de compresión es inferior aquel ofrecido por JPEG/JPG.

• PNG ("Portable Network Graphic") : Es un formato creado recientemente para superar algunas deficiencias (Patentes) de los formatos GIF y complejidades (Niveles de compresión) del formato TIFF. A diferencia del formato GIF, PNG no es capaz de soportar imágenes compuestas ("Banners").

• SVG ("Scalable Vector Graphic") : Es el formato más nuevo para el almacenaje de imágenes, diseñado por el W3C para suplantar los formatos GIF y JPEG/JPG; entre sus características principales se encuentran: La facilidad de enfocar ("Zoom") una imagen sin perder resolución, ser rastreable para texto (Se pueden buscar palabras/texto dentro de la gráfica) y estar basada en un formato abierto (XML).

• TIFF ("Tagged Image File Format") : Es un formato empleado para el intercambio de documentos entre distintas aplicaciones sobre diversas plataformas; la misma flexibilidad que ofrece este formato ha hecho que se integre a la distribución de imágenes, sin embargo, esta misma flexibilidad le otorga una gran complejidad en su almacenaje y distribución. En ciertos sitios existen este tipo de imágenes, sin embargo, es fuertemente recomendado utilizar un formato alterno como los descritos anteriormente.

• ICO ("Icon Graphic") : Utilizada como imagen estética de URL, esta gráfica es la que aparece en el extremo izquierdo del URL previo a http://; aunque es posible generar una gráfica explícitamente con este formato, generalmente se trata de una gráfica de 16 X 16 Pixels en formato BMP, con su extensión modificada hacia .ico.

 
<head>
<link rel="SHORTCUT ICON" href="/www.osmosislatina.com/miicono.ico"> 
</head>

Algunos editores de gráficas capaces de generar los formatos antes mencionados son :

• GIMP ( http://www.gimp.org ) Open-Source
• Corel DRAW ( http://www.corel.com/coreldraw ) de Corel
• Photoshop ( http://www.adobe.com/products/photoshop/ ) de Acrobat

Uso de "Frames"

En ciertos diseños para páginas de Internet se toma la decisión de particionar la pantalla en diversos fragmentos, esta funcionalidad se logra a través de "Frames" en HTML, a continuación se describen varios ejemplos de pantallas diseñadas alrededor de "Frames".

• Uso de "Frames" en 2 Fragmentos

• Uso de "Frames" en 3 Fragmentos

Aunque a través de un "Frame" es posible particionar la pantalla de despliegue, vale mencionar que esta metodología presenta algunas desventajas descritas a continuación :

• El diseño con "Frames" se encuentra basado en la resolución de pantalla (pixels) del usuario final, dicho parámetro puede variar de usuario a usuario provocando un despliegue desproporcionado; hoy en día se conoce (por estadísticas) que la mayoría de los usuarios emplean una resolución 800 X 600, sin embargo, también son comúnmente utilizadas las resoluciones 640 X 480 y 1024 X 768 entre otras.

• Otra característica al utilizar "Frames" es que las páginas en cuestión no pueden ser referenciadas para uso posterior, esto es, no pueden ser guardadas en un "Bookmark" ya que el URL de la página se mantiene estático; lo anterior puede ser tanto una ventaja como desventaja dependiendo del tipo de diseño que se desee realizar.

DTD's de HTML y XHTML revisitados

En la sección anterior pudo observar cual es el funcionamiento y uso de los tags <frame> y <frameset>, por esta razón vale recordar que dichos elementos sólo pueden presentarse en aquellos documentos diseñados con los DTD's : HTML Frameset, o bien, XHTML Frameset.

Dicho esto y dado que ya se enunciaron diversos elementos HTML / XHTML , también es pertinente mencionar las diferencias que existen entre los DTD denominados Strict y aquellos Transitional tanto en la modalidad HTML así como XHTML.

Cuando es empleado cualquier atributo en HTML / XHTML que implique una modificación de estilo como : align, bgcolor, height o width entre otros, o bien, el tag <font>, esto automáticamente califica un documento como Transitional ya sea en HTML o XHTML .

Por consiguiente, un documento es considerado HTML / XHTML Strict, si y sólo si, no se utiliza ningún mecanismo de estilo es su estructura directamente, ahora bien, esto no significa que no pueda utilizarse ningún tipo de estilo en un documento HTML / XHTML Strict, sino que el estilo debe ser declarado de una manera modular a través de un CSS("Cascading Style Sheet"), tema que es abordado en la siguiente sección de este curso.