c



 


Un acrónimo es un conjunto de letras formado por las iniciales de otras palabras. El término procede del
griego, donde: akros es punta y onymos es nombre. Por ejemplo: URL (UniformResourceLocator)

Pero parece ser que este criterio no está tampoco unánimemente decidido, unos son de la idea que los
acrónimos sólo son aquellos que gracias a que contienen vocales pueden pronunciarse como palabras
como por ejemplo FAQ (FrequentlyAskedQuestions) mientras que otros sostienen que pueden
perfectamente ser acrónimos aquellos que tengan la secuencia de letras iniciales completas auún
cuando no se puedan pronunciar como una palabra sino letra por letra, como por ejemplo: HTTP (Hyper
Text Transfer Protocol).

En lo que respecta a las abreviaturas, la Wikipedia sostiene:

Una abreviatura es la representación escrita de una o varias palabras mediante una o varias de sus
letras, a fin de que la palabras o las palabras en cuestión resulten más cortas en el texto.Como por
ejemplo Mb. (Mega Byte).

En HTMLHTMLHTMLestos elementos son de gran importancia tanto para familiarizar a los usuarios con
términos más bien técnicos que quizás desconocían como para darles una mano a los lectores de
pantallas que utilizan los usuarios con problemas de visión, es más se pueden hacer manejos desde la
hoja de estilo para que por ejemplo a las abreviaturas las deletree en vez de tratar de interpretarlas,
todo un logro si preguntan mi opinión.

Otro tip a tener en cuenta a la hora de utilizar este tipo de herramientas es la posibilidad de señalar el
lenguaje en el que está explicado el acrónimo, ésto ayuda a la pronunciación correcta del

término por el lector de pantalla. Porejemplo:

<abbr title="Cascading Style Sheets" lang="en">CSS</abbr>

Otra de las sorpresas que me encontré en el camino es que había términos que yo creía eran acrónimos
y en realidad eran abreviaturas, el artículo de Craig Saila HTML isnotanacronym... es bastante ilustrador
al respecto.

En este punto debo aclarar que Wikipedia considera de HTML es un acrónimo y lo he visto en varios
lados así, pero parece ser que palabras como HTML, CSS y otras son abreviaturas nomas... parece ser
que parte en la culpa por la confusión la tiene el W3CW3CW3C ya que su definición de acronym y abbr
está medio difusa.

Para sumarle un grano de arena más a la pelea Internet Explorer decidión no soportar el tag<abbr>. Pero
esto también es fácil de subsanar gracias a nuestras queridas amigas las hojas de estilo, con las
siguientes líneas podemos engañar al browser para que nos muestre las abreviaturas de la misma forma
que los acrónimos:

abbr, acronym {
border-bottom: 1px dashed #000;

m      

Para hacer esta función muchos usan el atributo 'alt', pero esta utilización es errónea, ya que este
atributo sirve para mostrar un texto alternativa en el caso de que una imagen no se muestre.

El que Internet Explorer muestre la información contextual con esta etiqueta no quiere decir que esa sea
su función.

Para estos casos HTML tiene un atributo que se encarga de eso, este es el atributo title (no confundir
con la etiqueta title) que además de ser soportada por la gran mayoría de etiquetas, si que tiene como
función mostrar la información contextual y por lo tanto funciona en todos los navegadores.

Fijarse en el ejemplo como la etiqueta "img" muestra el texto del atributo 'title' en vez del de 'alt'

<p title="etiqueta p">Etiqueta p con título</p>

<atitle="etiqueta a" href="http://www.mcanam.com" target="_blank">Etiqueta a con título</a>

<imgtitle="etiqueta img sin existir" alt="Esta imagen no existe" src="xxx.gif">

  



Introducción

Si has tratado nunca de imprimir una página Web a menudo habrás sido víctima de saltos de página en
secciones inesperadas y poco prácticas. Esto puede evitarse aplicando un pequeño recurso de DHTML (y
más concretamente hojas de estilo) para Internet Explorer y mediante un truquillo muy sencillo en el
caso de Netscape.

En ambos casos deberás disponer de versiones 4.0 o superior. No se pretende juzgar que navegador
implementa mejor esta característica (en otros sitios web encontrarás extensa documentación a favor y
en contra de ambos), simplemente selecciona el código que necesitas (en el mejor de los casos aplica
ambos trucos).

Para Internet Explorer (versión 4.0 o superior)

Debes crear una hoja de estilos y definir el tag H1 del como sigue: (recuerda que debes insertar el
tagstyle dentro del tag head del documento).

<STYLE>

H1.SaltoDePagina

{
PAGE-BREAK-AFTER: always

</STYLE>

En el sitio en que quieras forzar el salto de página deberás poner el tag h1 aplicando el estilo
SaltoDePagina definido anteriormente.

<H1 class=SaltoDePagina></H1>

Para Netscape Navigator (versión 4 o superior)

Netscape no procesa el estilo PAGE-BREAK-AFTER con lo cual deberemos aplicar un truco simple pero
efectivo para conseguir nuestro propósito.

Inserta todos aquellos contenidos que deseas se incluyan en una página dentro de una tabla ya que
cuando una tabla no puede imprimirse por completo en una página Netscape fuerza un salto de página.
Por ejemplo:

<table>

<tr><td>

Introduzca aquí los contenidos correspondientes a la página 1.

</td></tr>

</table>

<table>

<tr><td>

Introduzca aquí los contenidos correspondientes a la página 2.

</td></tr>

</table>

¬ 
 
 !

Una gran idea

Microsoft tuvo una excelente idea: una manera de mostrar cierto código a Internet Explorer (versión 5
en adelante, sólo en Windows), pero ocultarlo de otros navegadores, poniéndolo dentro de un
comentario. Incluso es posible poner código que sea leido exclusivamente por la versión 5.0, 5.5 o 6.
Esto nos permite detectar la versión del browser sin necesidad de usar javascript o algún lenguaje de
servidor.

Como funcionan

La estructura básica es un comentario

<!-- -->

Pero dentro de ese comentario, ponemos una instrucción especial, que hace que IE interprete lo que
hay adentro como código y no comentario. Si queremos que algo se vea en IE 5.0, 5.5 y 6, pondríamos:

<!--[if IE]>

[Aquí va nuestro código]

<![endif]-->

Si queremos que algo únicamente se muestre en IE 5.5, nuestra sintáxis sería así:

<!--[if IE 5.5]>

[Aquí va nuestro código]

<![endif]-->

También podemos especificar navegadores mayores o menores que cierta versión. Por ejemplo:

<!--[ifgt IE 5.5]>

[Esto se mostrará a versiones posteriores a

IE 5.5. "gt" = mayor que]

<![endif]-->

<!--[ifgte IE 5.5]>

[Esto se mostrará a IE 5.5 y versiones

posteriores. "gte" = mayor que o igual]

<![endif]-->

<!--[iflt IE 6]>

[Esto se mostrará a versiones anteriores a

IE 6. "lt" = menor que]

<![endif]-->

<!--[iflte IE 6]>

[Esto se mostrará a IE 6 y versiones

anteriores. "lte" = menor que o igual]

<![endif]-->

Dentro de nuestro comentario condicional podemos tener cualquier código. (Si ves esta página en
Internet Explorer, verás unos ejemplos abajo.)

Este texto se está mostrando porque tu navegador es Internet Explorer posterior a 5.5

Este texto se está mostrando porque tu navegador es Internet Explorer versión 6 o anterior.

Este texto se está mostrando porque tu navegador es Internet Explorer versión 6. Por cierto, deberías
cambiar a un mejor navegador

Usos y Ventajas

En vez de utilizar hacks en las hojas de estilo, se pueden poner todas las correcciones en una hoja de
estilos separada y ponerse dentro de comentarios condicionales, de esta manera:

<!--[if IE]>

<link rel="stylesheet" type="text/css" href="ie.css" />

<![endif]-->

De esa manera los demás navegadores no ven esas correcciones, mantenemos nuestra hoja de estilos
limpia y sin parches, y en el remoto caso que una versión futura de Internet Explorer corrija su modelo
de cajas y multiples bugs, es muy fácil poder quitar los parches.

También podemos utilizar los comentarios para esconder propiedades exclusivas de Internet Explorer,
como por ejemplo, las barras de desplazamiento con color. Son una funcionalidad que, aunque no es
esencial, es práctica para los diseñadores. Si separamos esas propiedades de nuestra hoja de estilos
principal, y sólo dejamos que Internet Explorer la vea, tenemos código válido y barras de color para IE.

Si sólo queremos una propiedad de css específica para la página en cuestión, también podemos ponerla
así:

<!--[if IE]>

<style>

#miregla {
color:#333333;

</style>

<![endif]-->

Podemos también utilizar javascript:

<!--[if IE 6]>

<SCRIPT LANGUAGE="Javascript">

alert("Estás usando Internet Explorer 6";

</SCRIPT>

<![endif]-->

Conclusiones

Los comentarios condicionales nos permiten escribir código específico para Internet Explorer sin afectar
a otros navegadores. Nos permiten evitar parches y tener código más limpio, válido y estructurado.

 "
 
 #"$%

Si alguien quiere agregar una transición entre página y página sólo es necesario incluir esta línea en el
<head> junto con los META TAGS de tu página.

Fundido

<meta http-equiv="Page-Enter" content="blendTrans(Duration=3.0)">

Circle in

<META http-equiv="Page-Enter" CONTENT="RevealTrans(Duration=3,Transition=2)">

Circle out

<META http-equiv="Page-Enter" CONTENT="RevealTrans(Duration=3,Transition=3)">

Wipe up

<META http-equiv="Page-Enter" CONTENT="RevealTrans(Duration=3,Transition=4)">

Wipe down
<META http-equiv="Page-Enter" CONTENT="RevealTrans(Duration=3,Transition=5)">

Wipe right

<META http-equiv="Page-Enter" CONTENT="RevealTrans(Duration=3,Transition=6)">

Wipe left

<META http-equiv="Page-Enter" CONTENT="RevealTrans(Duration=3,Transition=7)">

Es posible cambiar la duración de la transición en la opción "Duration" en este ejemplo figura como
"Duration=3". Estos ejemplos están planteados para que las transiciones se produzcan al comienzo,
"Page-Enter", si queremos agregar el código para realizar la transición a la salida, tenemos que cambiar
por "Page-Exit"

<meta http-equiv="Page-Enter" content="blendTrans(Duration=3.0)">

<meta http-equiv="Page-Exit" content="blendTrans(Duration=3.0)">

3 "

<html>

<head>

<title>ejemplo de texto parpadeante</title>

</head>

<body>

Esta línea es normal.

<blink>Esta en cambio parpadea.</blink>

</body>

</html>

& " 

 



Hemos construido la tabla con las correspondientes etiquetas de tablas de HTML. Como consideración
cabe señalar que las etiquetas de las imágenes que se colocan dentro de las celdas tienen que estar
pegadas a la etiqueta </TD>, que se utiliza para cerrar la tabla. Si no es así puede que nuestro ejemplo
quede descuadrado.
El tamaño de la tabla en anchura se puede definir perfectamente en el atributo width de la etiqueta
<TABLE>. La altura será la suficiente para que quepan todos los contenidos de la tabla.

Este es el código en cuestión:

<TABLE WIDTH=300 BORDER=0 CELLPADDING=0 CELLSPACING=0>

<TR>

<TD>

<IMG SRC="images/tablita_01.gif" WIDTH=6 HEIGHT=6></TD>

<TD background="images/tablita_02.gif">

<IMG SRC="espacio.gif" WIDTH=1 HEIGHT=6></TD>

<TD>

<IMG SRC="images/tablita_03.gif" WIDTH=6 HEIGHT=6></TD>

</TR>

<TR>

<TD background="images/tablita_04.gif">

<IMG SRC="espacio.gif" WIDTH=6 HEIGHT=1></TD>

<TD bgcolor=E8E8E8 valign=top>

Cuerpo esto es el Cuerpo esto es el Cuerpo esto es el Cuerpo...

</TD>

<TD background="images/tablita_06.gif">

<IMG SRC="espacio.gif" WIDTH=6 HEIGHT=1></TD>

</TR>

<TR>

<TD>

<IMG SRC="images/tablita_07.gif" WIDTH=6 HEIGHT=6></TD>

<TD align=center background="images/tablita_08.gif">

<IMG SRC="espacio.gif" WIDTH=1 HEIGHT=6></TD>

<TD>

<IMG SRC="images/tablita_09.gif" WIDTH=6 HEIGHT=6></TD>

</TR>

</TABLE>

No hay mucho que explicar... simplemente que recojas las imágenes descargando el archivo comprimido
(a notar que han sido colocadas en un directorio llamado images y que si no están allí no funcionará el
ejemplo) y que la imagen que se llama espacio.gif es simplemente un píxel transparente.[/size]

Ô 
#"$%

En el presente taller vamos a tratar de explicar asuntos relativos al uso de fondos de imagen en HTML.
Indicaremos la manera de utilizarlos correctamente, pues los fondos son capaces de lo peor y de lo
mejor, es decir, pueden ser tan bonitos y vistosos como feos y molestos, y claro, se trata de quedarnos
con la parte buena.

Colocar un fondo en una página web

Para incluir un fondo en una página web necesitamos utilizar el atributo background en la etiqueta
<BODY>, al que le asignamos el nombre del archivo que deseamos utilizar como fondo. Si el archivo se
encuentra en un directorio distinto que la página web, necesitaremos incluir la ruta al archivo, teniendo
en cuenta siempre de utilizar una ruta relativa al archivo .html para que se conserve la ruta en caso de
que cambiemos el sitio web de localización.

<bodybackground="fondo.gif">

Lo que conseguimos con esto es que el archivo fondo.gif se muestre en la página como fondo. Por
defecto, la imagen de fondo aparece como un mosaico, repitiéndose a lo largo de todo el espacio de la
página.

Fondo en otros elementos

No solo la página puede tener un fondo, también lo podemos colocar a las tablas o las celdas, por
ejemplo. Se utiliza el mismo atributo background, aunque aplicado a otras etiquetas.

<table background="fondo.gif">

<td background="fondo.gif">

Consejos para utilizar fondos

Veamos ahora algunos consejos que se deberían seguir para una correcta utilización de los fondos de
imagen.
1) Colocar un fondo de color parecido a la imagen

Cuando colocamos un fondo en una página debemos utilizar el atributo bgcolor para asignar un color de
fondo parecido al predominante en la imagen que compone el mosaico. Posiblemente muchos de
nosotros habremos accedido a una página en la que no se ve nada y, cuando se carga el fondo, nos
damos cuenta que sí que había texto en la página, lo que ocurre es que no se veía porque no
contrastaba con el color de fondo blanco por defecto. Es posible que en estos casos la imagen de fondo
fuera oscura y que el texto fuera blanco y, hasta que no se carga la imagen de fondo, no se puede ver
nada. Este problema se agrava si el fondo no se llega a cargar por un error en la transferencia del archivo
o porque la imagen ha sido borrada del servidor accidentalmente.

2) Que se puedan leer bien los textos

Los fondos están para hacer más vistosa la página, no para molestar en la lectura de los textos. Es un
error muy común utilizar un fondo que luego molesta al leer los textos. Ya es bastante difícil leer una
web en un monitor como para que encima el texto no contraste bien con el fondo que se está
utilizando. En este caso cabe indicar también que es muy importante que las combinaciones de color del
texto y del fondo sean agradables, ya que hay ciertos colores que, aunque contrastan bien, provocan
unas combinaciones difíciles de leer, por ejemplo un fondo con un color azul predominante y el texto en
rojo.

3) Los fondos de imagen de color homogéneo

Si utilizamos un fondo de imagen, tenemos que procurar que en la imagen se utilicen colores de una
misma gama. Si la imagen tiene partes oscuras y claras, ¿de qué color pondremos el texto para
asegurarnos de que se lea bien siempre? Si el texto es claro no contrastará bien con las partes del fondo
que también son claras. Igual pasará si colocamos el texto con un color oscuro, que no contrastará bien
con las partes oscuras del fondo.

4) Tener cuidado con las distintas definiciones de pantalla

Es importante saber que un visitante puede acceder a una página con un tamaño de ventana variable. A
veces un fondo se comporta bien con una definición dada, pero no con otras mayores. Ocurre muy a
menudo que se utiliza un fondo y se ve el resultado en una ventana de 800x600 ó 1024x768. Luego
accede una persona con una definición de 1280x1024, o superior, y ve la página incorrectamente
porque se realiza un mosaico con el fondo que no había tenido en cuenta el desarrollador. Para
entender este punto, puede ser interesante acceder a esta página, que se verá bien en una definición de
800x600 pero mal si es mayor.

5) Hacer un fondo suficientemente grande

Es importante que el tamaño del archivo que vamos a utilizar como fondo tenga un cierto tamaño. Si
utilizamos como fondo una imagen de unos pocos pixels, nuestro ordenador trabajará mucho para crear
el mosaico repitiendo cientos o miles de veces esa imagen. Sin embargo, si el fondo hubiese sido un
poco más grande, para realizar el mosaico hubiera trabajado mucho menos.
En definitiva, tendremos que tener mucho cuidado al utilizar los fondos, puesto que pueden dificultar
mucho la presentación de la información en la página de una manera clara.

Si deseamos utilizar un fondo que pudiera dar algún problema, una idea para asegurarnos que los textos
se visualicen correctamente es colocar todo el contenido de la página dentro de una tabla y asignarle a
la tabla un color de fondo con el atributo bgcolor.

<html>

<head>

<title>Fondo de prueba</title>

</head>

<body background="fondo1.jpg" bgcolor="FFCECB">

<table width="550" bgcolor=FFCECB align=center>

<tr>

<td>

<h1 style="color:000000">Probando...</h1>

<br>

Este texto se lee bien porque tiene un fondo plano.

<br>

</td>

</tr>

</table>

</body>

</html>

ë '
(
 !

Tan sólo, lo que tenemos que incluir en la cabecera de nuestra página, es una escueta etiqueta META
que automáticamente nos deshabilitará la susodicha opción.
También disponemos de un comportamiento de Dreamweaver que nos ahorrará el tener que escribir
dicha META. Pero cuando veáis lo reducida que es, probablemente paséis de descargaros el
comportamiento. De todas formas para todos aquellos que deseéis tenerla, la podréis adquirir en la web
de Macromedia Exchange.

Esta es la etiqueta META que deberéis incluir entre <HEAD> y </HEAD>

<meta http-equiv="imagetoolbar" content="no">

Y lo veremos un poquito mejor en un pequeño ejemplo de código HTML, de modo que no quede ningún
tipo de duda.

Ej:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//SP">

<html>

<head>

<!-- #BeginEditable "doctitle" -->

<title>:::: Mipágina web::::</title>

<!-- #EndEditable -->

<META NAME="TITLE" CONTENT="Nombre">

<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">

<meta name="Description" content="descripción de nuestra web.">

<meta name="Keywords" content="palabras relacionadas con el contenido de nuestra web.">

<meta name="author" content="Nombre de la empresa.">

<META HTTP-EQUIV="EXPIRES" CONTENT="Mon, 31 Dec 2054 00:00:01 PST">

<meta name="reply-to" content="correo electrónico de la empresa">

<meta name="owner" content="Propietario de la empresa.">

<META HTTP-EQUIV="VW96.OBJECT TYPE" CONTENT="Tipo de web">

<META NAME="RATING" CONTENT="General">

<meta name="robots" content="index, follow">

<META NAME="REVISIT-AFTER" CONTENT="7 days">

<meta http-equiv="imagetoolbar" content="no">

</head>

<body>

El contenido de nuestra web.

</body>

</html>

Recordad que no importa donde coloquéis la etiqueta META, siempre y cuando esta se encuentre entre
el <HEAD> y </HEAD>.

c) 




Taller de HTML en el que explicamos cómo realizar frames sin bordes en lso navegadores más
habituales.

Este taller de HTML explica cómo realizar una declaración de frames sin bordes.

Hemos visto que hay muchos atributos que sirven para eliminar los bordes de los marcos, tal vez
demasiados y haya quedado poco claro cual sería la forma exacta de eliminar todos los frames de una
vez. Resulta que no se hace igual en todos los navegadores, aunque incluyendo los atributos adecuados
para cada navegador estaremos seguros que los bordes no se verán nunca.

En Netscape, simplemente necesitamos especificar el atributo border="0" en el primer frameset. Esta

opción también funciona en las versiones más modernas de Internet Explorer.

En Internet Explorer, debemos especificar dos atributos también en el primer frameset.

frameborder="0" y framespacing="0".

Si colocamos los tres atributos a la vez en el primer frameset estaremos seguros que no hay bordes, por
lo menos en los navegadores más habituales.

La etiqueta frameset con los tres atributos quedaría así:

<frameset cols="90,*" border="0" frameborder="0" y framespacing="0">

Ejemplo práctico

Vamos a escribir por completo una declaración de frames sin bordes, para que quede todo
suficientemente claro.

<html>
<head>

<title>Definición de Frames</title>

</head>

<frameset cols="200,*" border="0" frameborder="0" y framespacing="0">

<frameset rows="170,*">

<frame src="pagina1.html">

<framesrc="pagina2.html">

</frameset>

<framesrc="pagina3.html">

</frameset>

</html>