Source: https://tecencliente.osmosislatina.com/curso/html_fondo.htm
Timestamp: 2018-04-22 15:54:01+00:00

Document:
HTML / XHTML a Detalle
Menú Curso Tecnologías en Cliente : HTML / XHTML a Detalle
(Anterior) HTML / XHTML HTML / XHTML a Detalle (Parte 2) (Siguiente)
Existen varios elementos HTML / XHTML que son empleados en diversas instancias a lo largo de un documento, entre ellos se encuentran :
<p> Definición de Párrafo
<ul> Desfase de Contenido (Margen)
<h1>,<h2>,<h3>,<h4>,<h5>,<h6> Encabezados de Titulo (NOTA: Estos Tags también pueden tomar como atributo align para dar alineamiento al Titulo)
<b> Contenido en Letras Negritas
<i> Contenido en Letras Itálicas
<code> Contenido en Letras estilo CODIGO
<big> Incrementa el tamaño de Letra en 1pt.
<small> Decrementa el tamaño de Letra en 1pt.
<sub> Desciende Letra en 1/2 renglón (H2O).
<sup> Asciende Letra en 1/2 renglón (1X105).
<!-- --> Comentario no desplegado en página.
Además de estos elementos, existen otros Tags utilizados para dar un formato especial al texto que será incorporado a un documento:
background : Imagen de Fondo del Documento (url de imagen)
bgcolor : Color de Fondo del Documento (Letra o Valor RGB)
link : Color de Links no visitados del Documento (Letra o Valor RGB)
text : Color del Texto no en el Documento (Letra o Valor RGB)
vlink : Color de Links visitados en el Documento (Letra o Valor RGB)
<blockquote> Bloques de Texto Centrado -----
<br> Salto de Renglón
clear : Tipo de Salto (left,right,all)
<font> Tipo de Letra
size : Tamaño de Letra (Número de Puntos)
color : Color de Letra (Letra o Valor RGB)
<hr> Linea Sólida Horizontal
size : Ancho de Linea (En Pixels)
width : Longitud de Linea (En Pixels o % de Pantalla)
align : Alineamiento de Linea (right, center, left)
<pre> Bloques de Texto Literal
align : Alineamiento de Bloque (left,center,right)
width : Ancho de Bloque (En Pixels o % de Pantalla)
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 :
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:
align : Alineamiento de Tabla (left,center,right)
bgcolor : Color de Fondo (Letra o Valor RGB)
border : Margen de Tabla (Ancho en Pixels)
cellpadding : Espacio entre contenido y celda (Ancho en Pixels)
cellspacing : Espacio entre celdas (Ancho en Pixels)
rules : Reglas para el delineado de Celdas (groups,rows,all)
width : Ancho de Tabla (En Pixels o % de Pantalla)
align : Alineamiento Horizontal de Renglón (left,center,right)
nowrap : Alinea contenido en una sola linea
valign : Alineamiento Vertical de Renglón (top,center,bottom,centerline)
<td>/<th>
align : Alineamiento Horizontal de Contenido en Celda (left,center,right)
colspan : Indica el número de columnas que se extiende Celda (Número de Columnas)
height : Altura de Celda (En Pixels)
rowspan : Indica el número de renglones que se extiende Celda (Número de Renglones)
valign : Alineamiento Vertical de Contenido en Celda (top,center,baseline,bottom)
width : Ancho de Celda (En Pixels o % de Pantalla)
La siguiente tabla hace uso de los diversos elementos descritos anteriormente:
<th rowspan=2> Inventario </th>
<th> Tiempo de Entrega </th>
<th> (Descripción) </th>
<th> (Dlls)  </th>
<th> (Semanas)  </th>
<td><font color=blue>$120.35 </font></td>
<td> 1 Semana </td>
<td bgcolor=yellow>PDA's height=100</td>
<td colspan=2 align=center> No Disponible </td>
El fragmento anterior generaría una tabla como la siguiente:
Relojes $120.35 23 1
PDA's $250.00 No Disponible
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:
<caption> Utilizado para definir una descripción acerca de la Tabla; puede tomar como atributo align
align : Alineamiento de descripción (bottom,top)
<colgroup> Empleado para anidar un grupo de columnas.
span : Columnas que abarcará el grupo (Número de Columnas)
width : Longitud de Columna (En Pixels o % de Pantalla)
<col> Empleado dentro del Tag <colgroup> para definir características especiales a cada columna del grupo.
<thead> Empleado para delimitar la cabezera de una Tabla; su uso tiene efecto con el atributo rules de <table> -----
<tbody> Empleado para delimitar el cuerpo de una Tabla; su uso tiene efecto con el atributo rules de <table> -----
<tfoot> Empleado para delimitar el pie de una Tabla; su uso tiene efecto con el atributo rules de <table> -----
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>
<th colspan="2" align="center"> Tendencias de Uso
<th> 1997
<th> 2002
Nota: Datos de <i>internet.com</i>
<th rowspan="3"> Browsers
<th> "Netscape Navigator"
<td> 75%
<td> 12%
<th> "Internet Explorer"
<td> 20%
<td> 85%
<th> Otros
<td> 5%
<td> 3%
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.
Uso de "Browsers" entre 1997-2002
Nota: Datos de internet.com
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.
<li> Este es el primer elemento sin orden
<li> Es mejor utilizar lista con orden
El desfaze termino
Generaría una lista de la siguiente manera:
Este es el primer elemento sin orden
Es mejor utilizar una lista enumerada
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.
Termina el desfaze
En la siguiente tabla se describen los atributos más comunes para elementos de listas.
type : Tipo de Lista Enumerada (A,a,I,i,1)
start : Orden en que se debe iniciar la Lista Enumerada (En base al tipo)
type : Tipo de Inciso ("Bullet") (circle,square,disc | A,a,I,i,1)
value : Valor asignado al Inciso ("Bullet") (Empleado en <ol>, En base al tipo)
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
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>
<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.
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>
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
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">
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">
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">
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.
Definición de gráficas ICO.
Existen dos maneras para definir una gráfica ICO en un URL/Documento:
Gráfica "Default" : Es colocada la gráfica deseada con el nombre: favicon.ico bajo el directorio raíz del servidor de páginas, esto permite que todo documento del sitio sea observado con esta gráfica.
Gráfica por Documento : También es posible definir una gráfica ICO para cada documento de un sitio, esto se logra agregando los siguientes Tags al documento :
<link rel="SHORTCUT ICON" href="/www.osmosislatina.com/miicono.ico">
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
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.
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.

References: resolución 
 resolución 
 resolución 
 resolución 
 resolución 
 resolución 
 resolución