Efectos Multimedia html Contenido Dinámico
Introducción
Bajo el nombre de HTML Dinámico se engloba un conjunto de técnicas con dos objetivos claros: proporcionar un control absoluto al diseñador de páginas HTML y romper con el carácter estático de este tipo de documentos. Hasta ahora, una vez mostrado un documento HTML, nada podía hacerse para modificarlo.
Los tres componentes del HTML Dinámico son:
• Hojas de Estilo
• Posicionamiento de Contenidos
• Fuentes Descargables
Las hojas de estilo permiten especificar atributos para los elementos de su página web. Con el posicionamiento de contenidos se puede asegurar que las diferentes partes serán mostradas exactamente donde usted quiera que aparezcan y podrá modificar su aspecto y posicion tras ser mostrada. Con las fuentes descargables podemos asegurar que siempre se utilizara la fuente correcta, pues podemos enviar la fuente junto con la página.
________________________________________
Introducción a las Hojas de Estilos
Antes de la introducción de las hojas de estilo, los creadores de páginas web sólo tenían un control parcial sobre el aspecto final de sus páginas. Por ejemplo, se podía especificar que cierto texto debia verse como una cabecera, pero no se podían colocar márgenes a una página ni escoger un borde decorado para un texto.
Las hojas de estilo nos permiten un mayor control sobre el aspecto de nuestros documentos. Con ellas podemos especificar muchos atributos tales como colores, márgenes, alineación de elementos, tipos y tamaños de letras, y muchos más. Podemos utilizar bordes para hacer que ciertos elementos resalten del resto de un documento. Podemos especificar que se utilicen diferentes fuentes para diferentes elementos tales como párrafos o cabeceras.
Además podemos emplear hojas de estilo como patrones o páginas maestras de forma que múltiples páginas puedan tener el mismo aspecto.
Las hojas de estilo pueden crearse empleando dos tipos de sintaxis, CSS (Cascade Style Sheets) y JavaScript.
________________________________________
Introducción al Posicionamiento de Contenidos
Ya no se está restringido al posicionamiento secuencial de los elementos sobre la página. Especificando la posición de los bloques podemos decidir donde se mostrara cada elemento en vez de dejar esta tarea al arbitrio del navegador. Por ejemplo, podemos colocar un bloque en la esquina superior izquierda, y otro en la inferior derecha. También podemos hacer que varios bloques compartan espacio, de forma que se puedan solapar. Ahora se puede decidir la posición exacta de los elementos.
Utilizando JavaScript podemos cambiar el aspecto de la página dinámicamente. Podemos hacer que los elementos aparezcan o se desvanezcan, podemos cambiar su color y su posición, etc. Podemos añadir animaciones dentro de nuestras páginas moviendo y modificando ciertas partes de la misma.
El uso conjunto las hojas de estilo y el posicionamiento de contenidos nos permite crear páginas web que utilicen diferentes estilos en diferentes partes de la página.
Para el posicionamiento de contenidos también podemos utilizar dos tipos de sintaxis: CSS y JavaScript.
________________________________________
Introducción a las Fuentes Descargables
Utilizando fuentes descargables podemos adjuntar fuentes con nuestras páginas web. De esta forma se garantiza que las página siempre serán mostradas con la fuente que deseemos. Ya no es necesario emplear las fuentes genéricas para conseguir que sus páginas tengan aproximadamente el mismo aspecto en todas las plataformas. Tampoco estaremos restringidos por las características propias de las fuentes en cada plataforma.
Para protejer los derechos de autor de los diseñadores de fuentes, estas están protegidas de forma que es imposible que el usuario las copie y las pueda usar de nuevo. Asi podemos incluir fuentes en nuestras páginas sin tener que preocuparnos de que los usuarios las puedan copiar.
________________________________________
Hojas de Estilo
En esta sección se introduce el uso de las hojas de estilo. Se da un breve resumen de los diferentes tipos de sintaxis que se pueden emplear para definir estilos, se muestran algunos ejemplos y se explica la herencia de propiedades.
________________________________________
Definición de Estilos mediante Hojas de Estilo en Cascada
Una hoja de estilo consiste en una o más definiciones de estilo. En sintaxis CSS, los nombres de las propiedades y los valores se encierran entre llaves {}.
El criterio de selección determina a que elementos se aplica, o es aplicable, el estilo. Si el criterio de selección es un elemento HTML, el estilo es aplicado a todos las instancias de dicho elemento. El criterio de selección también puede ser una clase, un ID o contextual. Cada una de estos criterios de selección se verán a continuación.
En una definicion de estilo cada propiedad es seguida por dos puntos y el valor de dicha propiedad. Cada par propiedad/valor está separado del siguiente por un punto y coma (;).
Por ejemplo, la siguente hoja de estilo en cascada contiene dos definiciones de estilos. El primero especifica que todos los párrafos,
, se veran en negrita y en color blanco. El segundo hará que todas las cabeceras,
, aparezcan centradas.
La definición de estilos se puede encerrar entre commentarios (), de esta forma los navegadores que no reconozcan la etiqueta
No se pueden encerrar entre comentarios () los contenidos de una hoja de estilo creada mediante JavaScript.
También se puede utilizar with para abreviar la definición de estilos para elementos sobre los que hay que modificar varias propiedades. Este ejemplo especifica que todas las etiquetas
serán verdes, negritas, cursivas y usaran la fuente helvética.
with (tags.p)
{
color = "green";
fontWeight = "bold";
fontStyle = "italic";
fontFamily = "helvetica";
}
________________________________________
Ejemplos
Usando hojas de estilo se pueden especificar muchos atributos de estilo. Algunas de estas características son el alineación, indentación y color del texto, la familia, peso y estilo de las fuentes,... Podemos seleccionar una imagen o un color de fondo para cualquier elemento. También podemos escoger el color y estilo de las marcas de lista.
Se pueden poner márgenes y especificar bordes para elementos de bloque, escoger el relleno de los elementos que tienen bordes, indicar la distancia entre el borde y el contenido del elemento.
El siguiente ejemplo muestra una hoja de estilo sencilla descrita mediante sintaxis CSS y JavaScript. En ella se especifica que todos los elementos
tendran márgenes derecho e izquierdo y que su texto estará centrado. Todos los elementos
estarán subrayados y en verde. Todos los elementos
se mostraran en mayúsculas, tendran un borde con aspecto 3D sobresaliente de 4 puntos de ancho y color rojo. Su texto será rojo y el fondo amarillo. Finalmente, los
serán azules y en cursiva, su altura de línea (interlínea) será un 150% mayor que por defecto y su primera línea estará indentado un 10%.
Sintaxis CSS
Sintaxis JavaScript
Uso de la hoja de estilo
Titulo subrayado
Esto es un bloque. Normalmente los bloques están indentados,
pero en este, además, la primera línea tiene una indentación
extra. También la interlínea es mayor de lo habitual.
Titulo h5 en mayusculas y con borde
Este párrafo está centrado. También tiene unos amplios
márgenes derecho e izquierdo.
Resultado del ejemplo
Titulo subrayado
Esto es un bloque. Normalmente los bloques están indentados, pero en este, además, la primera línea tiene una indentación extra. También la interlínea es mayor de lo habitual.
TITULO EN MAYUSCULAS Y CON BORDE
Este párrafo está centrado. También tiene unos amplios márgenes derecho e izquierdo.
________________________________________
Herencia de Estilos
Un elemento HTML que contenga a otro se considera como el padre del elemento que contiene, y el elemento contenido se considera el elemento hijo.
Por ejemplo, en el siguiente texto HTML, el elemento es el padre del elemento
, que a su vez es padre del elemento .
¡El titulo es importante!
En muchos casos, los hijos adquieren o heredan el estilo de los elementos de sus padres. Por ejemplo, supongamos que asignamos a
el estilo color azul:
¡El titulo es importante!
En este caso el elemento hijo hereda el estilo de su padre, que es el elemento
. Asi la palabra "es" apareceria en color azul. Supongamos ahora que previamente se habia especificado para el color rojo. En este caso la palabra "es" apareceria en rojo porque las propiedades del hijo tienen preferencia sobre las que hereda del padre.
La herencia comienza desde el elemento de más alto nivel. En HTML, este elemento es , que es seguido de .
Para establecer las propiedades de estilo por defecto para todos los elementos de un documento lo normal es asignárselas al elemento . Por ejemplo, el siguiente código fija el color por defecto del texto a verde:
Sintaxis CSS
Sintaxis JavaScript
Muy pocas propiedades no son heredadas de padres a hijos, pero en la mayoría de los casos el resultado final es el mismo que si lo hiciesen. Por ejemplo, la propiedad color de fondo no se hereda. Si un hijo no especifica un color de fondo propio, se vera el color de fondo del padre a través suyo, tal como ocurriria si heredase la propiedad. Para más información sobre las propiedades que se heredan y cuales no, dirigirse al manual de referencia del final de este tutorial.
________________________________________
Creación y uso de Hojas de Estilo
En esta sección se verán las diferentes formas de definir estilos y como aplicar esos estilos a los elementos HTML.
Una hoja de estilo es una serie de una o más definiciones de estilo. Podemos definir una hoja de estilos en el interior del documento que la utiliza, pero también podemos utilizar hojas de estilo desde un documento externo. Por ejemplo, podemos emplear una única hoja de estilo para definir el estilo empleado por un grupo de personas en sus páginas.
Si la hoja de estilos no va a ser aplicada a otros documentos, es más conveniente definirla en el interior de dicho documento para asi tener la hoja de estilo y el contenido de la página todo en un mismo sitio.
________________________________________
Definición de Hojas de Estilo con la etiqueta la cierra. Asegurese de utilizar
...
Sintaxis JavaScript
...
Uso de la hoja de estilo
Este titulo es azul y esta en mayusculas.
Este bloque en cursiva es rojo.
Resultado del ejemplo
ESTE TITULO ES AZUL Y ESTA EN MAYUSCULAS.
Este bloque en cursiva es rojo.
________________________________________
Definición de Hojas de Estilo en Ficheros Externos
Se puede definir una hoja de estilo en un fichero distinto del que contiene la página y despues enlazarlos. Las ventajas de este método son que podremos utilizar la hoja de estilo desde cualquier documento HTML. Se podría pensar en una hoja de estilo asi definida como en un patrón que pudiera aplicarse a cualquier documento. De esta forma, se puede aplicar un estilo a todas las páginas servidas desde un sitio web sin más que incluir un enlace al fichero con la hoja de estilo en cada página.
La sintaxis para definir estilos en ficheros es identica a la que se usa para definirlos en el propio documento, excepto que no es necesario incluir la etiqueta
Para incluir un gráfico en un documento HTML se utiliza la directiva . En dicha directiva debe incluirse un parámetro src="URL", con el cual indicamos dónde está el fichero con el gráfico concreto que queremos para nuestro documento. Esto pone a nuestra disposición una gran flexibilidad, ya que podemos complementar el contenido de nuestro documento tanto con gráficos que se encuentren disponibles en nuestro servidor de WWW como con una foto situada en un servidor de la NASA o del Ministerio de Cultura, por ejemplo, sin que el lector final tenga por qué apreciar ninguna diferencia.
Existe alguna limitación respecto a los formatos gráficos que los programas lectores de HTML puede interpretar sin problemas. El formato fundamental es el GIF, que cualquier programa con capacidades gráficas debería poder mostrar directamente en nuestro texto (Mosaic y Netscape pueden hacerlo). Si utilizamos otro formato diferente, lo más probable es que cuando un lector esté accediendo al documento, el programa no comprenda ese formato y se tenga que solicitar la ayuda de otro programa, con lo cual al final el gráfico no se insertará en el lugar estratégico de nuestro documento, sino que aparecerá en otra ventana diferente.
Hay un parámetro optativo de la directiva que sirve para proponer un texto alternativo a un gráfico. Este texto aparecerá cuando se esté usando para leer el HTML un programa sin capacidades gráficas (por ejemplo Lynx, que sólo trabaja con texto). Se trata de alt="texto". Conviene utilizarlo cuando los gráficos sirven como origen a hiperenlaces, porque si no los programas sin capacidades gráficas no podrían mostrar los enlaces que nosostros queremos.
Como ocurría antes con los enlaces, por lo general no es necesario escribir el URL completo, sino que basta con dar la mínima información. Por ejemplo, para colocar en este punto del documento un monigote que está en el mismo subdirectorio que este manual, en el fichero monigote.gif, escribiremos:
Lo que se traduce en:
Como se ve, hemos especificado el texto alternativo "MONIGOTE", con lo cual una persona que no dispusiera del programa adecuado hubiera visto algo parecido a [MONIGOTE] en lugar del dibujo.
Podemos también incluir un dibujo que esté en otro lugar especificando un URL completo, por ejemplo:
Para incluir un fondo en una página web necesitamos utilizar el atributo background en la etiqueta
, 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.
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.
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.
Fondo de prueba
Probando...
Este texto se lee bien porque tiene un fondo plano.
Animaciones html
Cómo crear una animación con html?
MARQUEE es la etiqueta de HTML que crear una animación que desplace el contenido de la etiqueta horizontalmente. El contenido tanto puede ser texto, tablas, imágenes o ambas cosas.
Para realizar esta animación no necesitamos nada más que la etiqueta html, sin utilizar java, javascript, flash ni ningún otro lenguaje.
Esta etiqueta dispone de varios atributos para modificar el efecto de la animación WIDTH Anchura de la marquesina. Si no marcamos altura, se colocará en la siguiente línea, como en un párrafo distinto. Si marcamos una anchura, la marquesina intentará mostrarse en la misma línea donde la hayamos colocado. Si no hay espacio para ella se realizará el consiguiente salto de línea para mostrarla un poco más abajo.
DIRECTION Hacia donde queremos que se displace el contenido del marquee. Los posibles valores son “LEFT” y “RIGHT”.
BEHAVIOR Es el comportamiento de la marquesina, de entre los posibles: SCROLL (el comportamiento por defecto) indica que tiene que hacer el desplazamiento siempre en una misma dirección y ALTERNATE, que indica que el desplazamiento se hace a un lado y al otro de manera alternada.
SCROLLDELAY Es el tiempo en milisegundos que tiene que pasar entre cada cambio de la posición de lo que hay desplazándose. Es decir, cuanto mayor sea el valor, más milisegundos tardará la marquesina en moverse. El valor por defecto es 85, pero si por ejemplo ponemos un valor 500 la marquesina cambiará de estado (desplazará el contenido) cada medio segundo.
SCROLLAMOUNT Es la cantidad de pixel que tiene que desplazarse el contenido de la marquesina cada vez que se mueve. A mayor scrollamount, más se desplazará la marquesina en cada movimiento y por tanto la animación será más rápida. El valor por defecto es 6. Podemos probar a colocar un valor mayor y veremos que el movimiento será más “a golpes”.
LOOP El número de ciclos que va a moverse el texto o lo que quiera que haya dentro de la marquee. Este atributo sólo funciona en Internet Explorer. Por defecto es INFINITE, que quiere decir que se desplazará todo el tiempo sin parar. Pero si por ejemplo colocamos un valor como 3, querrá decir que la marquesina sólo realizará tres ciclos o movimientos y luego parará.
BGCOLOR El color de fondo de la marquesina. Acepta el nombre de un color HTML o bien un valor RGB de dicho color.
HSPACE y VSPACE Estos dos atributos sirven para definir el número de píxel que debe aparecer entre la marquesina y otros contenidos de la página, en horizontal y vertical.
Los marcos HTML permiten a los autores presentar documentos con vistas múltiples, que pueden ser ventanas o subventanas independientes. Las vistas múltiples ofrecen a los autores una manera de mantener cierta información visible mientras otras vistas se desplazan o se sustituyen. Por ejemplo, dentro de una misma ventana, un marco podría mostrar un gráfico estático, un segundo marco un menú de navegación, y un tercero el documento principal que puede ser desplazado, o reemplazado al navegar por el segundo marco.
Aquí tenemos un documento simple con marcos:
"http://www.w3.org/TR/html4/frameset.dtd">
Un documento simple con marcos
<o:p></o:p></span></pre><pre style="text-align: justify;"><span style="font-size: 12pt; font-family: "Times New Roman","serif";"><span style=""> </span><p>Este conjunto de marcos contiene:<o:p></o:p></span></pre><pre style="text-align: justify;"><span style="font-size: 12pt; font-family: "Times New Roman","serif";"><span style=""> </span><ul><o:p></o:p></span></pre><pre style="text-align: justify;"><span style="font-size: 12pt; font-family: "Times New Roman","serif";"><span style=""> </span><li><a href="contenidos_del_marco1.html">Contenidos chéveres</a><o:p></o:p></span></pre><pre style="text-align: justify;"><span style="font-size: 12pt; font-family: "Times New Roman","serif";"><span style=""> </span><li><img alt="Una imagen chévere" src="contenidos_del_marco2.gif" /><o:p></o:p></span></pre><pre style="text-align: justify;"><span style="font-size: 12pt; font-family: "Times New Roman","serif";"><span style=""> </span><li><a href="contenidos_del_marco3.html">Más contenidos chéveres</a><o:p></o:p></span></pre><pre style="text-align: justify;"><span style="font-size: 12pt; font-family: "Times New Roman","serif";"><span style=""> </span></ul><o:p></o:p></span></pre><pre style="text-align: justify;"><span style="font-size: 12pt; font-family: "Times New Roman","serif";"><span style=""> </span>
Esto podría crear una disposición de marcos como la siguiente:
---------------------------------------
|||
|||
| Marco 1 ||
|||
|||
|---------||
||Marco 3|
|||
|||
|||
| Marco 2 ||
|||
|||
|||
|||
---------------------------------------
Si el agente de usuario no puede mostrar marcos o está configurado para no mostrarlos, representará los contenidos del elemento NOFRAMES.
Los documentos HTML que describen una disposición de marcos (llamados documentos con marcos) tienen una estructura diferente a la de los documentos HTML sin marcos. Un documento normal tiene una sección HEAD y una sección BODY. Un documento con marcos tiene una sección HEAD, y un FRAMESET en lugar del BODY.
La sección FRAMESET de un documento especifica la disposición de las vistas en la ventana principal del agente de usuario. Además, la sección FRAMESET puede contener un elemento NOFRAMES que proporcione contenido alternativo para los agentes de usuario que no soporten marcos o que estén configurados para no mostrar marcos.
Los elementos que normalmente podrían colocarse en el elemento BODY no deben aparecer antes del primer elemento FRAMESET o el FRAMESET no será tenido en cuenta.
Este atributo especifica la disposición de los marcos horizontales. Es una lista de longitudes en píxeles, porcentajes o longitudes relativas, separadas por comas. El valor por defecto es 100%, que significa una fila.
Este atributo especifica la disposición de los marcos verticales. Es una lista de longitudes en píxeles, porcentajes o longitudes relativas, separadas por comas. El valor por defecto es 100%, que significa una columna.
El elemento FRAMESET especifica la organización de la ventana principal del usuario en términos de subespacios rectangulares.
Filas y columnas
Cuando se establece el atributo rows (filas) se define el número de subespacios horizontales. Cuando se establece el atributo cols (columnas) se define el número de subespacios verticales. Ambos atributos se pueden especificar simultáneamente para crear una cuadrícula.
Si no se establece el atributo rows, cada columna se extiende a lo largo de toda la longitud de la página. Si no se establece el atributo cols, cada fila se extiende a lo largo de toda la anchura de la página. Si no se establece ninguno de los dos atributos, el marco tiene exactamente el mismo tamaño que la página.
Los marcos se crean de izquierda a derecha para las columnas y de arriba a abajo para las filas. Cuando se especifican ambos atributos, las vistas se crean de izquierda a derecha en la fila superior, de izquierda a derecha en la segunda fila, etc.
En este primer ejemplo dividimos la pantalla verticalmente en dos (es decir, creamos una mitad superior y una mitad inferior).
...el resto de la definición...
El siguiente ejemplo crea tres columnas: la segunda tiene una anchura fija de 250 píxeles (lo cual es útil, por ejemplo, para incluir una imagen de tamaño conocido). La primera recibe el 25% del espacio restante, y la tercera el 75% del espacio restante.
...el resto de la definición...
El siguiente ejemplo crea una cuadrícula de 2x3 subespacios.
...el resto de la definición...
Para el siguiente ejemplo, supongamos que la ventana del navegador tiene actualmente una altura de 1000 píxeles. Para la primera vista se asigna el 30% de la altura total (300 píxeles). Para la segunda vista se especifica que tenga una altura de exactamente 400 píxeles. Esto deja 300 píxeles para repartir entre los otros dos marcos. La altura del cuarto marco se ha especificado como "2*", de modo que es el doble de alto que el tercer marco, cuya altura es sólo "*" (equivalente a 1*). Por tanto el tercer marco será de 100 píxeles de alto y el cuarto tendrá una altura de 200 píxeles..
...el resto de la definición...
Las longitudes absolutas que no sumen el 100% del espacio real disponible deberían ser ajustadas por los agentes de usuario. Cuando sobre espacio, el espacio sobrante debería repartirse proporcionalmente entre cada vista. Cuando falte espacio, debería reducirse cada vista en función de la relación entre el espacio especificado y el espacio total.
Los grupos de marcos pueden anidarse hasta cualquier nivel.
En el siguiente ejemplo, el FRAMESET exterior divide el espacio disponible en tres columnas iguales. A continuación el FRAMESET interior divide la segunda área en dos filas de alturas diferentes.
Los autores pueden compartir datos entre varios marcos incluyendo estos datos a través de un elemento OBJECT. Los autores deberían incluir el elemento OBJECT en el elemento HEAD del documento con marcos y darle un nombre con el atributo id. Cualquier documento que sea el contenido de un marco del documento con marcos puede hacer referencia a este identificador.
El siguiente ejemplo ilustra cómo podría hacer referencia un script a un elemento OBJECT definido para todo un grupo de marcos:
"http://www.w3.org/TR/html4/frameset.dtd">
Esto es un documento con marcos con un OBJECT en el HEAD
Este atributo especifica un vínculo a una descripción larga del marco. Esta descripción debería complementar la descripción corta proporcionada por el atributo title, y puede ser particularmente útil para agentes de usuario no visuales.
Este atributo especifica información sobre el desplazamiento de la ventana del marco. Valores posibles:
·auto: Este valor le dice al agente de usuario que proporcione mecanismos de desplazamiento en la ventana del marco cuando sea necesario. Este es el valor por defecto.
·yes: Este valor le dice al agente de usuario que siempre proporcione mecanismos de desplazamiento en la ventana del marco.
·no: Este valor le dice al agente de usuario que nunca proporcione mecanismos de desplazamiento en la ventana del marco.
Este atributo proporciona información al agente de usuario sobre el borde del marco. Valores posibles:
·1: Este valor le dice al agente de usuario que dibuje un separador entre este marco y todos los marcos adyacentes. Este es el valor por defecto.
·0: Este valor le dice al agente de usuario que no dibuje un separador entre este marco y todos los marcos adyacentes. Obsérvese que aún se puede dibujar un separador junto a este marco si así se especifica para otros marcos.
Este atributo especifica la cantidad de espacio que debe dejarse entre los contenidos del marco en sus márgenes izquierdo y derecho. El valor debe ser mayor o igual que cero (píxeles). El valor por defecto depende del agente de usuario.
Este atributo especifica la cantidad de espacio que debe dejarse entre los contenidos del marco en sus márgenes superior e inferior. El valor debe ser mayor o igual que cero (píxeles). El valor por defecto depende al agente de usuario.
El atributo src especifica el documento inicial que contendrá el marco.
El siguiente ejemplo de documento HTML:
"http://www.w3.org/TR/html4/frameset.dtd">
Un documento con marcos
debería crear una distribución de marcos parecida a ésta:
------------------------------------------
|Marco 1|Marco 3|Marco 4|
||||
||||
||||
||||
||||
||||
||||
-------------|||
|Marco 2|||
||||
||||
------------------------------------------
y hacer que el agente de usuario cargara cada fichero en una vista separada.
Los contenidos de un marco no deben estar en el mismo documento que la definición del marco.
EJEMPLO ILEGAL: La siguiente definición de un grupo de marcos no es legal según HTML, ya que los contenidos del segundo marco están en el mismo documento que la definición del grupo de marcos.
El siguiente ejemplo ilustra el uso de los atributos decorativos de FRAME. Especificamos que el marco 1 no permitirá barras de desplazamiento. El marco 2 dejará espacio en blanco alrededor de sus contenidos (inicialmente, un fichero de imagen) y el marco no será redimensionable. No se dibujará ningún borde entre los marcos 3 y 4. Se dibujarán los bordes (por defecto) entre los marcos 1, 2 y 3.
Este atributo especifica el nombre de un marco en el que debe abrirse un documento.
Al asignar un nombre a un marco por medio del atributo name, los autores pueden referirse a él como el "destino" de los vínculos definidos por otros elementos. Se pueden establecer el atributo target para los elementos que creen vínculos (A, LINK), para los mapas de imágenes (AREA), y para los formularios (FORM).
Consulte la sección sobre nombres de marcos destino para información sobre nombres de marcos reconocidos.
Este ejemplo ilustra cómo es posible mediante la especificación de un destino la modificación dinámica de los contenidos de un marco. Primero definimos un grupo de marcos en el documento frameset.html, mostrado a continuación:
"http://www.w3.org/TR/html4/frameset.dtd">
Un documento con marcos
Después, en inicial_dinamico.html, hacemos un vínculo al marco llamado "dinamico".
"http://www.w3.org/TR/html4/loose.dtd">
Un documento con vínculos con destinos específicos
Si se activa cualquiera de los vínculos se abre un nuevo documento en el marco llamado "dinamico", mientras que el otro marco, "fijo", mantiene sus contenidos iniciales.
Actualmente no hay ninguna manera de codificar con un URI el estado real de un grupo de marcos. Por tanto, muchos agentes de usuario no permiten a los usuarios asignar un marcador a un grupo de marcos.
Cuando muchos vínculos del mismo documento designan al mismo destino, es posible especificar el destino una sola vez para que no sea necesario incluir el atributo target en todos los elementos. Esto se hace estableciendo el atributo target del elemento BASE.
Volvemos al ejemplo anterior, esta vez definiendo la información sobre el destino en el elemento BASE para quitarla de los elementos A.
Los agentes de usuario deberían determinar el marco destino en el que cargar un recurso vinculado de acuerdo con las siguientes reglas de precedencia (ordenadas de mayor a menor prioridad):
Si un elemento especifica en su atributo target un marco conocido, cuando se activa el vínculo (p.ej., se sigue el vínculo o se procesa un formulario), el recurso designado por el elemento debería cargarse en el marco destino.
Si un elemento no tiene el atributo target establecido pero el elemento BASE sí lo tiene, el atributo target del elemento BASE determina el marco.
Si ni el elemento que vincula el recurso ni el elemento BASE hacen referencia a un destino, el recurso designado por el elemento debería cargarse en el marco que contiene al elemento.
Si alguno de los atributos target se refiere a un marco desconocido F, el agente de usuario debería crear una ventana y marco nuevos, asignar el nombre F al marco, y cargar el recurso designado por el elemento en el nuevo marco.
Los agentes de usuario pueden proporcionar a los usuarios un mecanismo para deshabilitar el atributo target.
Los autores deberían proporcionar contenido alternativo para aquellos agentes de usuario que no soporten marcos o que estén configurados para no mostrar marcos.
El elemento NOFRAMES especifica un contenido que sólo deberían mostrar los agentes de usuario que no soporten marcos o que estén configurados para no mostrar marcos. Los agentes de usuario que soporten marcos sólo deben mostrar los contenidos de una declaración NOFRAMES cuando se configuren para no mostrar marcos. Los agentes de usuario que no soporten marcos deben mostrar los contenidos de NOFRAMES en cualquier caso.
<o:p></o:p></span></pre><pre style="text-align: justify;"><span style="font-size: 12pt; font-family: "Times New Roman","serif";"><span style=""> </span><p>Aquí puede encontrar la <a href="principal-sinmarcos.html"><o:p></o:p></span></pre><pre style="text-align: justify;"><span style="font-size: 12pt; font-family: "Times New Roman","serif";"><span style=""> </span>version sin marcos del documento.</a> <o:p></o:p></span></pre><pre style="text-align: justify;"><span style="font-size: 12pt; font-family: "Times New Roman","serif";"><span style=""> </span>
NOFRAMES se puede usar, por ejemplo, en un documento que sea el origen de un marco y que use el DTD transicional. Esto permite a los autores explicar el propósito del documento en los casos en que éste se vea fuera del grupo de marcos o con un agente de usuario que no soporte marcos.
El atributo longdesc permite a los autores hacer los documentos con marcos más accesibles a las personas que utilizan agentes de usuario no visuales. Este atributo designa un recurso que proporciona una descripción larga del marco. Los autores deberían recordar que las descripciones largas asociadas con los marcos se refieren al marco, y no a los contenidos del marco. Como los contenidos pueden variar con el tiempo, la descripición larga inicial podría ser inapropiada para los contenidos posteriores del marco. En particular, los autores no deberían incluir una imagen como único contenido de un marco.
El siguiente documento con marcos describe dos marcos. El marco izquierdo contiene una tabla de contenidos y el marco derecho contiene inicialmente la imagen de un avestruz:
"http://www.w3.org/TR/html4/frameset.dtd">
Un documento con marcos mal diseñado
Obsérvese que la imagen ha sido incluida en el marco independientemente de cualquier elemento HTML, de modo que el autor no tiene ninguna manera de especificar un texto alternativo aparte de usar el atributo longdesc. Si los contenidos del marco derecho cambian (p.ej., el usuario selecciona una serpiente de cascabel en la tabla de contenidos), los usuarios no tendrán acceso textual a los nuevos contenidos del marco.
Por tanto, los autores no deberían poner una imagen en un marco directamente. En su lugar, la imagen debería especificarse en un documento HTML independiente, en el cual se podría adjuntar el texto alternativo apropiado:
Este atributo especifica un vínculo a una descripción larga del marco. Esta descripción debería servir como complemento de la descripción corta que proporciona el atributo title, y es particularmente útil para los agentes de usuario no visuales.
El elemento IFRAME permite a los autores insertar un marco dentro de un bloque de texto. Insertar un marco en línea dentro de una sección de texto es muy similar a insertar un objeto mediante un elemento OBJECT: ambos permiten insertar un documento HTML en medio de otro, ambos pueden alinearse con el texto circundante, etc.
La información a insertar en línea se designa mediante el atributo src de este elemento. Los contenidos del elemento IFRAME, por su parte, sólo deberían ser mostrados por los agentes de usuario que no soporten marcos o que estén configurados para no mostrar marcos.
Para aquellos agentes de usuario que soporten marcos, el siguiente ejemplo colocará un marco en línea rodeado por un borde en medio del texto.
Los marcos en línea no pueden ser redimensionados (y por lo tanto no tienen un atributo noresize).
Botones
Vamos a ver una etiqueta HTML que sirve para hacer botones, de la que no habíamos hablado antes en nuestro manual de HTML . Esta etiqueta es
Primero habría que conocer bien los usos de la etiqueta INPUT, que sirve para hacer varias cosas, como campos de texto, campos ocultos, botones de enviar formulario, borrar sus datos y botones normales. Veamos los usos de la etiqueta INPUT antes de continuar.
Utilización de la etiqueta
La etiqueta BUTTON se utiliza con una apertura de etiqueta . Entre las dos etiquetas, de apertura y cierre, se coloca el contenido que irá dentro del botón.
Tiene la particularidad que se pueden colocar dentro del botón los contenidos que se desee, es decir, entre la etiqueta de apertura y cierre se puede colocar texto a voluntad, pero también otras etiquetas HTML, como imágenes, saltos de línea, negritas o lo que podamos necesitar.
Veamos un ejemplo:
Y otras cosas
Que tendría este aspecto:
Hola esto es un botón
Puedo poner saltos de línea en él!
Y otras cosas
Como se puede ver, permite aportar bastante creatividad a los botones que incorporemos en páginas web, mucho más que la etiqueta INPUT, que sólo permite colocar texto dentro del botón:
Atributos de BUTTON
Ahora veamos rápidamente los atributos que podemos utilizar:
name: sirve para darle un nombre al botón. Al enviarse el formulario se enviarán los datos del bot´n bajo este nombre.
type: sirve para indicar el tipo de botón, que podría ser: button para un botón normal, reset para un botón de borrado de datos del formulario y submit para un botón de envío de formulario.
value: para especificar el valor de un botón. El valor es lo que se enviará por formulario, en el momento del submit. Pero ojo aquí porque puede haber diferencias entre navegadores, que veremos a continuación.
disabled: este atributo sirve para hacer que el botón se encuentre deshabilitado.
Incompatibilidades entre navegadores con la etiqueta BUTTON
Lamentablemente, la etiqueta BUTTON tiene diversas interpretaciones por parte de los distintos navegadores del mercado. Desde desarrollo web .com advertimos que se debe tener cuidado cuando la usemos, porque estas incompatibilidades podrían perjudicar el buen funcionamiento de la página.
Por defecto, el atributo type de BUTTON tiene el valor "button" en todos los navegadores, salvo Internet Explorer, al menos hasta la versión 7, que le da por defecto valor "submit". Esto lo solucionamos simplemente colocando siempre el atributo type con el valor que queramos.
Cuando se envía un formulario con un botón creado con la etiqueta BUTTON, Internet Explorer envía como value del botón lo que hay escrito en él, es decir, el texto que haya entre con todas las etiquetas que pueda haber dentro. Los demás navegadores envían el atributo value que tenga el botón, aunque sólo hacen esto cuando el botón es de type="submit" y si se ha enviado el formulario pulsando ese botón.
De estas dos incompatibilidades, la segunda tiene más difícil solución, porque deberíamos saber el navegador que está utilizando el usuario para poder saber el comportamiento del BUTTON. Es por ello que lo más recomendable es no basar el funcionamiento de scripts en formularios en esta etiqueta. Por lo demás, tiene algunas funcionalidades interesantes que podrían venirnos bien el algún momento.
