curso basico con_html
TRANSCRIPT
DESCRIPCION INICIO FINAL COMENTARIOS
Obligatorias
Principio de Documento
<html> </html>Toda la codificación debe estar incluida en estas etiquetas
Encabezado <head> </head> Dentro del encabezado se encontrará el título.
Título <title> </title>Es el texto que aparece en la barra de títulos del navegador
Cuerpo <body> </body> Cuerpo de la página
Para toda la página
Color de Fondo
<body bgcolor="#RRVVAA">
Permite colocar un color uniforme de fondo a toda la página. Este color estará formado por 3 números hexadecimales que indiquen:RR = tonalidad de color rojoVV = tonalidad del color verdeAA = tonalidad del color azul
Imagen de Fondo<body background="nombreimagen.gif">
nombreimagen.gif deberá reemplazarse por el nombre de la imagen. Se recomienda utilizar formatos .gif o .jpg
Colores de texto color de enlacesenlaces visitadosenlaces activos
<body text="#RRVVAA"Link ="#RRVVAA"Vlink ="#RRVVAA"Alink ="#RRVVAA"
Permite definir los colores que se aplicarán en forma genérica para el texto como para los enlaces. El color está representado por un número hexadecimal
Estilos <style> </style>
Permite definir un estilo de fuente, color, tamaño, etc para todo el documento.
Meta
<metaname="description" content="comentarios"name="keywords" content="palabra1 palabra2 ... palabran">
</meta>
Permite definir propiedades internas del documento.Name = "description" content = ”Será el resumen con que se publicará en el buscador. No utilizar más de 25 palabras"Name = "keywords" content = "podrán definirse palabras claves para que nuestro documento sea encontrado por los buscadores"
Sonido <bgsound src="xx.wav" loop=infinite/n> <embed src="xx.wav" width=200 height=55 autostart="true" loop="true" hidden="true">
Ejecuta un archivo de sonido.xx.wav se debe reemplazar por el nombre del archivo; loop n indica la cantidad de veces que se repetirá.La etiqueta Embed con sus propiedades, se utiliza por las
incompatibilidades de los navegadores.Con esta opción aparece una consola cuyas di-mensiones se definen con Width o Height y que puede ocultarse con Hidden = "true"
Presentación de texto
Encabezamientos <h1><h2>....<h6> </h1></h2>....</h6> Opciones de formato de texto para encabezados,
NegritaCursiva
Subrayado
<b><i><u>
</b></i></u>
Coloca el texto incluido con éstos formatos.
Parpadeo <blink> </blink> El texto estará parpadeante
Grande Pequeña
<big><small>
</big></small>
Agranda el textoDisminuye el texto
Subíndice Superíndice
<sub><sup>
</sub> </sup>
Representa el texto sobre el renglón o bajo el renglón.
Color del Texto <font color="#RRVVAA"> </font>
Permite colocar un color a la fuente. El color está representado por un número hexadecimal.
Tamaño del Texto
<font size="n"> </font>
Define un tamaño de fuente específico. n repre-senta un número del 0 al 7 al que luego podrán agregarle los signos + o -
Tipo de fuente <font face="nombre de fuente"> </font>Permite definir un nombre de Fuente específico.
Estilo de fuente <tt> </tt>Formato de fuente Courier de tamaño menor (Typewriter)
Texto preformateado
<pre> </pre>Formato de fuente tipo Courier. Se representan los espacios en blanco
Texto en Movimiento
<marquee>(texto) </marquee>
Permite que un texto tenga movimiento. Pueden agregarse atributos para dimensionar la marquesina, para alinear el texto, para modificar tamaño, fuente y color.
Línea Horizontal <hr="n"> No utiliza etiqueta de cierre
Traza un línea horizontal cuyo grosor está representado por “n”
Espacio en Blanco
  No utiliza etiqueta de cierre
Representa un espacio en blanco.
Comentario <!- comentario> ->Comentarios que no serán visibles en la pantalla.
Caracteres especiales
Escribo Para ver
< <
> >
& &
" "
á á
é é
í í
ó ó
ú ú
Á Á
É É
Í Í
Ó Ó
Ú Ú
ñ ñ
Ñ Ñ
ü ü
Ü Ü
¿ ¿
¡ ¡
Permiten que los caracteres especiales sean leídos por todos los navegadores en sus distintas versiones. La escritura de cada carácter comienza con el signo ampersand (&) y debe terminar con punto y coma (;) En esta tabla vemos como escribir algunos símbolos, signos, las letras Ñ y ñ, y las vocales acentuadas en mayúscula y minúscula.
Presentación de párrafos
Alineaciones<center><left><right>
</center></left></right>
Todo texto que se escriba entre estas etiquetas sufrirá esa alineación .
Sangría <blockquote> </blockquote> Se utiliza para destacar una cita.
Parrafo<p align= center*left*right*justify> </p>
Realiza la separación entre párrafos, y la alineación de estos.
Renglones en blanco
<br> Permite dejar renglones en blanco
Tratamiento de imágenes
Imagen Individual
<img src="nombreimagen.gif">
Permite insertar una imagen en la página que estamos diseñando. El archivo de la imagen deberá estar ubicado en la misma carpeta que la página, caso contrario se deberá indicar su ruta de acceso
Texto de la imagen
<img src="nombreimagen.gif" alt="texto">
Coloca un texto que po-drá leerse al pasar el puntero del ratón sobre la imagen o cuando ésta no se carga.
Alineación del texto
<img src="nombreimagen.gif" align= top * middle * bottom>
Indicará la posición en que ubicaremos al texto que acompaña a la imagenTop Arriba * Middle Medio * Bottom Abajo
AnchoAlto
<img src="nombreimagen.gif"width="n"height="n">
Define el tamaño de la imagenWidth = ancho * height = altura n = será un valor en pixeles
Videos<img dynsrc="archivi.avi" loop=infinite controlsstart= mouseover>
Permite agregar archivos de video.
Listas
Lista numerada
<ol type= A * a * I * i start=n> <lh> título de la lista </lh> <li> Primera opción <li> Segunda opción <li> Tercera opción
</ol>
Se utiliza cuando las opciones deben ser numerados. La opción type representan número o letras y start indicará el número con que inicia.
Lista no ordenada
<ul type=square * circle * disk> <lh> título de la lista </lh> <li> Primera opción <li> Segunda opción <li> Tercera opción
</ul>
Se utiliza cuando las opciones no presentan un orden determinado. La opción type representa la viñeta.
Lista con sangrado
<dl> <lh> título de la lista </lh> <dt> Primer tema <dd> Primer detalle <dd> Segundo detalle <dt> Segundo tema <dd> Tercer detalle <dd> Cuarto detalle
</dl>
Se utiliza cuando las opciones llevan un título y una definición
Enlaces o Links
Enlace a otro URL
<a href="xxx"> yyy </a>
xxx se debe reemplazar por la dirección URL destino del enlace.yyy es el texto indicativo que se leerá en la página.
Enlace a un e-mail
<a href = "mailto:dirección e-mail"> texto indicativo del enlace
</a>Te permite un enlace directo a tu cliente de correo predeterminado
Marca para enlace dentro de la misma página (Ancla - Anchor)
<a href="#marca"> Texto de enlace al ancla
</a>
Referencia una posición a la que luego se accederá.
Localizar enlace anterior
<a name="marca"> texto del ancla </a>
Enlaza una posición previamente marcada, dentro de la misma página
Enlace a otra página con
marca, dentro del mismo sitio
<a href="ab.htm#marca"> texto indicativo del enlace
</a>
Enlaza a la posición establecida en marca, en la página ab.htm
Enlace con imagenes
<a href="xxx"><img src="nombreimagen.gif">
</a>
xxx se debe reemplazar por la dirección URL destino del enlace.nombreimagen.gif se debe reemplazar por el nombre de imagen seleccionadoEnlaza a la dirección URL haciendo un click sobre la imagen.
Tablas
Definición <table> </table> Crea una tabla
Bordes Color de Bordes
<table border=n bordercolor="#RRVVAA">
n = representa al grosor del borde. También se podrá especificar el color del borde
Separación entre celdas
<table cellspacing=n> Las celdas podrán sepa-rarse por el n valor
Separación entre el borde y el contenido
<table cellpadding=n> El contenido podrá estar separado del borde por el valor indicado en n
Altoancho
<table height=n o porcentaje width=n o porcentaje>
Se puede establecer un valor o un porcentaje para definir el tamaño de la tabla
Color de Fondo oImagen de Fondo
<table bgcolor="#RRVVAA" background="imagen.gif">
Se puede establecer un color de fondo de toda la tabla o colocar una imagen de fondo
Título<caption align=top * bottom> texto del título
</caption>
Posibilita colocar un título a la tabla alineado top=arriba o bottom=abajo
Definición de filas
<tr align=left*center*right valign=top*middle*bottom bgcolor="#RRVVAA">
</tr>
Por cada fila que tenga la tabla deberá utilizarse esta etiqueta: se podrá establecer la alineación del contenido, la ubicación dentro de la fila y el color de fondo.
Definición de títulos
<th align=left*center*right*justify*decimal valign=top*middle*bottom*baseline bgcolor="#RRVVAA">
</th>
Permite definir los nombres de las columnas.
Definición de datos o
contenidos
<td align=left*center*right*justify*decimal valign=top*middle*bottom*baseline bgcolor="#RRVVAA">
</td>
Coloca contenidos a cada celda
Celda que ocupa muchas filas
<td rowspan=numero de filas> </td>Se puede combinar una celda para que ocupe muchas filas.
Celda que ocupa muchas columnas
<td colspan=numero de columnas> </td> Se puede combinar una celda para que ocupe muchas columnas.
Ejercicio paso a paso. Insertar una imagen
Objetivo.
Practicar las operaciones que hay que realizar para insertar una imagen.
Si no tienes abierto el Bloc de notas, ábrelo para realizar el ejercicio.
Ejercicio
1 Abre el archivo inicio.htm, que se encuentra en la carpeta ejercicios_html/animales.
2 Sustituye la línea
<b> visita aulaclic </b>
que está incluida dentro de un hiperenlace, por la línea
<img src="imagenes/aulaclic.jpg" alt="visita aulaclic" width="90" height="32" border="4">
Con este código estarás asociando el enlace con la imagen aulaclic.jpg que se encuentra en la directorio imagenes dentro de la carpeta animales (la carpeta donde se encuentra el archivo inicio.htm.
La imagen medirá 90 píxeles de ancho, y 32 píxeles de alto (atributos width y height).
Tendrá un borde de 4 píxeles (atributo border), que aparecerá de color rojo, al ser este color el definido para los enlaces de esta página.
En el caso de que la imagen no pueda ser visualizada, o se situe el puntero sobre ella, se mostrará el texto visita aulaclic (atributo alt).
3 Haz clic sobre la opción Guardar del menú Archivo.
4 Abre el documento inicio.htm, que acabas de guardar, en un navegador, y comprueba que obtienes una pág
Ejercicio
1 Abre el documento menu.htm, de la carpeta originales/animales del curso.
2 Guarda la página con el mismo nombre en tu directorio de ejercicios Mis documentos/ejercicios_html/animales
2 Añade delante de la primera etiqueta <p ... la siguiente línea:
<p align="center"><img src="imagenes/logo_animales.gif" width="122" height="85"> </p>
El párrafo se añade para centrar la imagen.
3 Haz clic sobre la opción Guardar del menú Archivo.
4 Abre el documento menu.htm, que acabas de guardar, en un navegador, y comprueba que obtienes una pág.
Ejercicio
1 Abre el archivo gatos.htm, que se encuentra en la carpeta animales.
2 Añade detrás de la etiqueta </ul> la línea:
<img src="imagenes/gatito.gif" alt="gatito" border="0">
3 Haz clic sobre la opción Guardar del menú Archivo.
4 Abre el documento menu.htm, que acabas de guardar, en un navegador,
Veamos toda esta teoría con un ejemplo práctico:
<img src="imagen1.gif" alt="Foto de un perro lindo" height="113" width="150" align="top"> Esta foto es un perro muy lindo.
El ejemplo produciría el siguiente resultado:
Esta foto es un perro muy lindo.
Ejercicio paso a paso. Trabajar con tablas
Objetivo.
Practicar las operaciones que hay que realizar para modificar las propiedades de la tabla.
Ejercicio
Vamos a insertar en la página gatos.htm una tabla para colocar la imagen del gatito a la izquierda de la lista. Para eso crearemos una tabla de una fila y dos columnas, en la columna de la izquierda colocaremos el texto y en la columna de la derecha la imagen.
1 Si no tienes abierto el Bloc de notas, ábrelo para realizar el ejercicio.
2 Haz clic sobre el menú Archivo.
3 Haz clic sobre la opción Abrir. Se abrirá una nueva ventana.
4 En Tipo:, elige Todos los archivos.
5 Selecciona el archivo gatos.htm, que se encuentra en la carpeta animales, y pulsa sobre el botón Aceptar.
6 Detrás de la etiqueta <hr> añade el siguiente código para añadir una línea en blanco, definir la tabla, empezar la definición de la primera fila y primera columna de la tabla. Hacemos la tabla invisible (border="0") y que ocupe todo los ancho de la ventana (width="100%"), la primera columna ocupará el 70% de la ventana (width="70%") :
<br><table width="100%" border="0"><tr> <td width="70%">
7 Detrás de la última etiqueta </ul> añade el siguiente código para cerrar la columna y empezar la otra, ahora la segunda columna ocupará el 30% de la ventana (width="30%"):
</td><td width="30%">
8 Detrás de la etiqueta <img> añade el siguiente código para cerrar la columna y cerrar la fila y la tabla:
</td></tr></table>
9 Guarda el archivo y cierra el bloc de notas.
10 Abre con tu navegador el archivo gatos.htm, comprueba que ahora la imagen está a la derecha del texto y si haces la ventana más pequeña, el ancho de las columnas cambia.
Ejercicio
1 Abre el documento perros.htm, de la carpeta originales/animales del curso.
2 Guarda la página con el mismo nombre en tu directorio de ejercicios Mis documentos/ejercicios_html/animales
En el documento que has abierto vamos a crear la siguiente tabla:
DIFERENCIAS ENTRE EL PERRO Y EL HOMBRE
DIFERENCIASPERRO
HOMBREPEQUEÑO GRANDE
Duración crecimiento 10 meses 18 a 24 meses 16 años
Tiempo de gestación 58 a 63 días 9 meses
Duración de vida del pelo/cabello 1 año 2 a 7 años
Empezamos por definir la etiqueta de la tabla:
3 Escribe delante de la etiqueta </body>:
<table width="575" border="2" align="center" cellspacing="2" bordercolor="#000000" >
El atributo width nos permite definir la tabla de un tamaño fijo para que ese tamaño no cambie según el tamaño de la ventana abierta.
Con el valor 2 del atributo border hacemos que el borde externo de la tabla aparezca más grueso.
El atributo align con el valor center nos permite indicar que la tabla estará centrada con respecto a la ventana.
Con el valor 2 del atributo cellspacing hacemos que aparezca un hueco entre las celdas de la tabla.
El atributo bordercolor nos permite definir el color del borde la tabla.
Para que no se nos olvide cerrar etiquetas es mejor añadir la etiqueta de cierre y después entre la dos etiquetas añadir las otras.
4 Escribe:
</table>
La tabla tiene seis filas (contamos el número mayor de filas) y el texto contenido en ellas está centrado tanto en horizontal como en vertical:
5 Escribe seis veces:
<tr align="center" valign="middle">
</tr>
Ya hemos definido las filas, ahora las vamos a rellenar con las columnas. Miramos cuál es la fila con mayor número de columnas, tiene cuatro columnas.
Rellenamos la primera fila, en esta fila aparece una sola columna por lo que hay que indicar que esta se expande sobre cuatro columnas:
6 Escribe después de la primera etiqueta <tr..:<td colspan="4">DIFERENCIAS ENTRE EL PERRO Y EL HOMBRE</td>
Vamos a rellenar ahora la segunda fila.
En esta fila la primera columna se expande sobre dos filas:
7 Escribe después de la segunda etiqueta <tr..:
<td rowspan="2">DIFERENCIAS</td>
La segunda columna se expande sobre dos columnas:
8 Escribe a continuación:
<td colspan="2">PERRO</td>
La tercera columna se expande sobre dos filas:
9 Escribe a continuación:
<td rowspan="2">HOMBRE</td>
Vamos a rellenar ahora la tercera fila.En esta fila sólo tenemos que definir dos columnas ya que la primera y la última están incluidas en el rowspan de la fila anterior.
10 Escribe después de la tercera etiqueta <tr..:<td>PEQUEÑO</td><td>GRANDE</td>
Vamos a rellenar ahora la cuarta fila.En esta fila tenemos que definir las cuatro columnas normales
11 Escribe después de la cuarta etiqueta <tr..:<td>Duración crecimiento</td><td>10 meses</td><td>18 a 24 meses</td><td>16 años</td>
Vamos a rellenar ahora la quinta fila.En esta fila tenemos que indicar que la segunda columna se expande sobre dos columnas.
12 Escribe después de la quinta etiqueta <tr..:<td>Tiempo de gestación</td><td colspan="2">58 a 63 días</td><td>9 meses</td>
Por último rellenamos la sexta fila.En esta fila tenemos que indicar también que la segunda columna se expande sobre dos columnas.
13 Escribe después de la sexta etiqueta <tr..:<td>Duración de vida del pelo/cabello</td><td colspan="2">1 año</td><td>2 a 7 años</td>
Veamos el resultado.
14 Guarda los cambios y abre la página con tu navegador.
Ahora añadiremos los colores de fondo. Si quieres puedes ir observando los cambios según los vayas introduciendo, guardando sin cerrar el bloc de notas y cada vez actualizando la página en tu navegador (como hiciste en el ejercicio paso a paso del tema 3).
15 Añade background="imagenes/fondopatas.gif" dentro de la etiqueta <table>. De este modo, la imagen fondopatas.gif pasará a ser la imagen de fondo de la tabla.
16 Añade bgcolor="#669966" dentro de la primera etiqueta <tr>. De este modo, la primera fila de la tabla será de color verde oscuro.
17 Añade bgcolor="#FFCC99" dentro de la segunda etiqueta <tr>. De este modo, la segunda fila de la tabla será de color naranja.
18 Añade bgcolor="#FFFF99" dentro de la tercera etiqueta <tr>. De este modo, las celdas de esa fila, que contienen el texto PEQUEÑO y GRANDE, serán de color amarillo.
Por último cambiaremos las tres primeras filas para que el texto contenido en ellas tenga formato de cabecera de columna.
19 Sustituye td por th en las líneas que se encuentran entre los tres primeros pares de etiquetas <tr> y </tr>. De este modo, las celdas de las tres primeras filas pasarán a ser títulos de columna, por lo que el texto aparecerá centrado y en negrita.
20 Comprueba que obtienes una página
Ejercicio paso a paso. Insertar sonido de fondo
Objetivo.
Practicar las operaciones que hay que realizar para insertar sonido de fondo.
Primero añadiremos una música de fondo a una página.
1 Abre el archivo menu.htm, que se encuentra en la carpeta animales.
2 Inserta una línea en blanco debajo de la etiqueta <basefont>, y escribe el siguiente código en ella:
<bgsound src="varios/audioanimales.MID" loop="-1">
Con este código estarás estableciendo el archivo audioanimales.MID como sonido de fondo de la página, que se reproducirá continuamente en un bucle infinito (loop="-1").
3 Haz clic sobre la opción Guardar del menú Archivo.
4 Abre el documento menu.htm, que acabas de guardar, en un navegador, y comprueba que obtienes una página como la que aparece si pulsas aquí. No olvides encender unos altavoces que estén conectados a tu ordenador, para comprobar que el archivo de audio se reproduce correctamente.
Ahora vamos a sustituir las palabras INICIO PERROS GATOS y CONSULTAS por botones Flash.
1 Abre otra vez el archivo menu.htm, que se encuentra en la carpeta animales.
2 Sustituye la palabra INICIO por el siguiente código:
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0" width="100" height="23"><param name="movie" value="binicio.swf"><param name="quality" value="high"><embed src="binicio.swf" width="100" height="23" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" ></embed></object>
Nota: se ha escrito en el color de los valores del usuario unicamente los valores que cambian al insertar un botón Flash.
3 Sustituye la palabra PERROS por el siguiente código:
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0" width="100" height="23"><param name="movie" value="bperros.swf"><param name="quality" value="high"><embed src="bperros.swf" width="100" height="23" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" ></embed></object>
4 Sustituye la palabra GATOS por el siguiente código:
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0" width="100" height="23"><param name="movie" value="bgatos.swf"><param name="quality" value="high"><embed src="bgatos.swf" width="100" height="23" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" base="."></embed></object>
5 Sustituye la palabra CONSULTAS por el siguiente código:
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0" width="100" height="23"><param name="movie" value="bconsultas.swf"><param name="quality" value="high"><embed src="bconsultas.swf" width="100" height="23" quality="high"
pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" base="."></embed></object>
6 Haz clic sobre la opción Guardar del menú Archivo
Animaciones
• Marquee no está comprendido en los estándar HTML • Utilizar Marquee puede tener problemas de accesibilidad, es decir, se puede hacer difícil de leer para
determinadas personas con discapacidades.
• El hecho de animar elementos de una página favorece el dinamismo y ayuda a llamar la atención sobre determinados mensajes o imágenes, pero si utilizas marquee en muchos lugares puede provocar confusión y marear al usuario.
Para utilizar marquee, simplemente colocamos dentro de la etiqueta los contenidos que queremos que se muevan, ya sean texto, imágenes o cualquier otro tipo de contenido. Algo como esto:
<marquee>texto que se mueve</marquee>
Pero también podríamos meter algo como esto:
<marquee><table align="center" width="100"border="1"><tr> <td>Esta tabla se desplaza , con todo el contenido de la tabla</td></tr></table></marquee>
Marquee soporta una serie de atributos para modificar su comportamiento o su aspecto. Son los siguientes:
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.
Algunos ejemplos de marquee:
<marquee width=200 direction=right>Marquesina a la derecha y con ancho</marquee>
<marquee behaviour=alternate scrolldelay=500 bgcolor="#ff8833">texto que se mueve</marquee>
Sonido BGSOUND La etiqueta bgsound incorpora sonidos de fondo en una página web, sonidos que se ejecutan automáticamente al cargarse la página. Es una etiqueta propietaria de Microsoft, por lo que sólo es interpretada por Internet Explorer, admitiendo los formatos de audio MID y WAV, aunque generalmente también acepta AU y MP3, en versiones actuales del nevagador o mediante plugins de uso general.
Su sintaxis general, con sus atributos más importantes, es del tipo:
<bgsound src="ruta_fichero" loop="l" balance="b" volume="v"></bgsound>
Donde:
• src="ruta_fichero" fija la ruta en la que se encuentra el fichero de audio a reproducir. La ruta puede ser relativa a nuestro sistema de carpetas local, absoluta respecto el sistema de carpetas del servidor web o una URL completa que localice el fichero en Internet.
• loop="l" determina el número de veces (l) que se debe ejecutar el fichero de audio. Si le damos el valor infinite, el fichero se reproducirá indefinidamente.
• balance="b" determina el balance del sonido entre los dos altavoces del equipo, es decir, la potencia o intensidad con que se oirá en cada uno de ellos (derecho e izquierdo). Sus valores pueden estar entre -10,000 y +10,000, correspondiendo el valor 0 a un balance equilibrado entre los dos altavoces.
• volume="v" fija el volumen al que se oirá el sonido, y sus valores pueden variar entre -10,000 (mínimo) y 0 (máximo). No es soportado por los equipos MAC.
Ejemplo:
<bgsound src="../sonidos/wav.wav" balance=0 volume=0></bgsound>