HTML

Colegio Boston
Formulario
Preparatoria
ISE Adda Laura Paz Olvera

Contenido
Conceptos Básicos ....................................................................................................................................................3
Internet .................................................................................................................................................................3
World Wide Web (WWW) ....................................................................................................................................3
El Modelo Cliente-Servidor...................................................................................................................................3
Navegador ............................................................................................................................................................4
Protocolo ..............................................................................................................................................................4
HTTP......................................................................................................................................................................4
Transacciones HTTP ..........................................................................................................................................4
Los códigos de estado.......................................................................................................................................4
Sesión....................................................................................................................................................................5
Páginas Estáticas y Páginas Dinámicas .................................................................................................................5
El lenguaje HTML ......................................................................................................................................................6
Edición ..................................................................................................................................................................6
Estructura Básica de un Documento HTML ..............................................................................................................6
Atributos de la etiqueta BODY..............................................................................................................................6
Etiquetas para Estructura del Documento. ..............................................................................................................7
Atributo de alineación ..........................................................................................................................................8
Uso de DIV ............................................................................................................................................................8
Etiquetas para Estilos de caracter ............................................................................................................................8
Estilos físicos. ........................................................................................................................................................8
Estilos lógicos........................................................................................................................................................8
Atributos de la fuente...........................................................................................................................................9
Caracteres especiales. ..........................................................................................................................................9
Color .................................................................................................................................................................. 10
Etiquetas para Listas en HTML .............................................................................................................................. 10
Listas ordenadas ................................................................................................................................................ 10
Atributos para listas ordenadas..................................................................................................................... 11
Listas desordenadas .......................................................................................................................................... 11

1
 HTML
Colegio Boston
Formulario
Preparatoria
ISE Adda Laura Paz Olvera

Atributos para listas desordenadas. .............................................................................................................. 11

Listas de Definición o de Glosario...................................................................................................................... 11
Atributos para listas de definición ................................................................................................................. 12
Listas anidadas................................................................................................................................................... 12
Imágenes en HTML ................................................................................................................................................ 12
Formatos para archivos ..................................................................................................................................... 12
Etiquetas para imágenes ................................................................................................................................... 13
Atributos para imágenes ................................................................................................................................... 13
Mapas de Imágenes........................................................................................................................................... 14
Etiquetas para mapas de imágenes ............................................................................................................... 14
Atributos para mapas de imágenes ............................................................................................................... 15
Tablas en HTML ..................................................................................................................................................... 15
Etiquetas para tablas ............................................................................................................................................. 15
Atributos para tablas ............................................................................................................................................. 16
Enlaces en HTML.................................................................................................................................................... 18
Composición de las URLs ................................................................................................................................... 19
Tipos de enlaces ................................................................................................................................................ 19
Enlaces internos............................................................................................................................................. 19
Enlaces locales ............................................................................................................................................... 19
Enlaces remotos ............................................................................................................................................ 19
Enlaces a direcciones de correo. ................................................................................................................... 20
Enlaces con archivos ...................................................................................................................................... 20
Etiquetas para enlaces....................................................................................................................................... 20
Atributos para enlaces....................................................................................................................................... 20
Sonido en HTML .................................................................................................................................................... 21
Conceptos Básicos de Sonido Digital. ................................................................................................................ 21
Tipos de Archivos de Sonido .............................................................................................................................. 22
Introducción de sonidos en HTML ..................................................................................................................... 23
Enlaces a archivos de sonido. ........................................................................................................................ 23
Etiquetas para sonido .................................................................................................................................... 23

2
 HTML
Colegio Boston
Formulario
Preparatoria
ISE Adda Laura Paz Olvera

Conceptos Básicos
Internet
Internet es un conjunto descentralizado de redes de comunicación interconectadas que utilizan la familia de
protocolos TCP/IP, garantizando que las redes físicas heterogéneas que la componen funcionen como una red
lógica única, de alcance mundial.

World Wide Web (WWW)

Uno de los servicios que más éxito ha tenido en Internet ha sido la World Wide Web (WWW, o "la Web"), hasta
tal punto que es habitual la confusión entre ambos términos. Sin embargo, la WWW fue un desarrollo posterior
y utiliza Internet como medio de transmisión. Además de la web, hay muchos otros servicios en Internet.
Es un sistema de información propio de Internet, que tiene como características:
 Información por hipertexto
 Multimedia
 Global
 Dinámico
 Independiente.

El Modelo Cliente-Servidor
La facilidad de tener información actualizada y realizar transacciones en línea implica el desarrollo de
aplicaciones que operen bajo un modelo de cliente-servidor.

Bajo este modelo, cada vez que se abre un navegador y se direcciona hacia una determinada página web, en
realidad se está estableciendo una comunicación entre dos programas: el cliente y el servidor.
3
 HTML
Colegio Boston
Formulario
Preparatoria
ISE Adda Laura Paz Olvera

 El cliente es un programa que tiene como función el facilitar la interacción con el usuario, presentando
y controlando la información administrada por la aplicación.
Las tecnologías que se procesan en el cliente están dirigidas a facilitar la visualización y control de la
información, como es el caso de HTML, Flash, Javascript y VBscript, entre otras.
 El servidor es un programa que constantemente está escuchando peticiones de clientes y devuelve a
cada programa una respuesta acorde que es tomada por el cliente y mostrada al usuario. Así, el servidor
es el responsable de prestar los servicios requeridos por los clientes.
Los lenguajes tradicionales de programación son muy utilizados para programar servidores, pero existen
tecnologías diseñadas específicamente para aplicaciones cliente-servidor en Internet, como es el caso de
ASP (Active Server Pages), PHP (Hypertext preprocesor), Servlets, ColdFusion y JSP (Java Server Pages)
entre otras.

Navegador
Es el programa que ofrece acceso a Internet. Actúa como cliente y comprende el lenguaje de todas las
herramientas que manejan la información de Web.

Protocolo
Conjunto de reglas que gobiernan una operación. Debe especificar claramente lo que se espera de ambas partes
a fin de no dar lugar a ambigüedades.

HTTP
Protocolo de transferencia de hipertexto. Es el protocolo por defecto de internet y es usado en cada transacción
de la red a menos que se especifique otro. Originalmente fue diseñado para transmitir texto plano y
posteriormente fue adaptado para transferir cualquier tipo de datos.
Está orientado a transacciones y sigue el esquema de petición-respuesta entre un cliente y un servidor.
Dentro de HTTP, el cliente es denominado “user agent”, la información transmitida es denominada “recurso” y
es identificada mediante un URL (Localizador Uniforme de Recursos o dirección).

Transacciones HTTP
Son las operaciones que se llevan a cabo mediante HTTP
Están formadas por un encabezado seguido por una línea en blanco.
Un encabezado es un bloque de datos que precede a la información propiamente dicha, por lo que muchas veces
se hace referencia a él como metadato —porque tiene datos sobre los datos—.
Ante cada petición se inicia un diálogo entre servidor y cliente.

Los códigos de estado.

Están formados por 3 dígitos e indican el resultado de la petición.

4
 HTML
Colegio Boston
Formulario
Preparatoria
ISE Adda Laura Paz Olvera

El primer dígito indica el tipo de código, así los códigos iniciados con 1XX indican error en la conexión, 2XX
operación exitosa, 3XX redirección hacia otro URL, 4XX error por parte del cliente y 5XX error por parte del
servidor.

Sesión
HTTP es un protocolo sin estado (stateless), esto quiere decir que no guarda ninguna información sobre
conexiones anteriores y cada pedido es tratado de manera independiente del anterior. No sabe quién mandó la
solicitud, sólo recibe y responde.
Dado que HTTP trata cada solicitud de manera independiente no es posible para el servidor determinar si el
usuario sigue navegando en la página, si se fue a otra página o si cerró el navegador.
Dado que las aplicaciones web necesitan mantener estado y llevar un registro de la conversación, se define el
concepto de sesión.
1. El cliente realiza un pedido al servidor
2. El servidor responde el pedido y le devuelve un identificador al cliente
3. En pedidos sucesivos, el cliente deberá incluir este identificador en cada pedido que realice al servidor.
4. Así, el servidor puede mantener un estado de las peticiones del mismo cliente.
Para incluir este identificador, se utilizan dos métodos:
 El uso de “cookies”, que son pequeños archivos con información que el servidor envía al cliente para que
los guarde y que éste vuelve a enviar en cada petición que realiza al servidor. Las “cookies” permiten
guardar información específica sobre el sitio tal como el idioma, los colores, etc. También permiten
rastrear al cliente ya que son guardadas en el cliente por tiempo indeterminado.
 El “URL rewriting”, que hace que el cliente sobre-escriba todos los enlaces que vuelven al servidor
agregándoles como parámetro el identificador de sesión.
El servidor es el que guarda todos los datos asociados con la sesión.

Páginas Estáticas y Páginas Dinámicas

Existen dos tipos de páginas en Internet: las estáticas y las dinámicas.
 Las páginas estáticas
o Están compuestas por uno o varios archivos.
o Están guardadas dentro del servidor.
o Su contenido solamente se modifica cuando el administrador del sitio lo actualiza.
o Se usan para propósitos informativos.
 Las páginas dinámicas
o También están compuestas por uno o varios archivos
o No están guardadas dentro del servidor, sino que son creadas a medida que el cliente las solicita.
o Para crearlas, el servidor accede a datos variables.

5
 HTML
Colegio Boston
Formulario
Preparatoria
ISE Adda Laura Paz Olvera

El lenguaje HTML
Es un acrónimo de HyperText Mark Languaje. Y es un lenguaje que estructura documentos a partir de texto
especificando ciertos atributos a su contenido.
No describe la apariencia del diseño de un documento, sino que permite que cada plataforma le de formato
según su capacidad y la de su navegador (tamaño de la pantalla, fuentes instaladas, etc.
Puede referenciar a otro documento HTML. Cada vez que un documento hace referencia a otro dice que está
conectado mediante un enlace o liga.
Define sus acciones mediante marcas (etiquetas o “tags”) que dicen al texto cómo mostrarse mediante atributos
que le dan valor a la etiqueta.
Usa un número reducido de etiquetas o “tags”.
Básicamente, los documentos escritos en HTML constan del texto mismo del documento y las tags que pueden
llevar atributos.
<tag> texto afectado </tag>
La tag del principio activa la orden y la última (que será la del principio precedida del signo /) la desactiva.

Edición
Para crear archivos HTML es preferible utilizar un editor de texto simple ya que HTML ignora todos los espacios
en blanco. Los convertidores toman archivos de un procesador de textos y los convierten a HTML, pero los
resultados no siempre son legibles, ello depende de la complejidad del formato del documento, por lo que es
recomendable corregirlos de manera manual.

Estructura Básica de un Documento HTML

<HTML> Indica que el documento se encuentra escrito en ese lenguaje
<HEAD> Especifica el prólogo del resto del archivo.
<TITLE> Se utiliza por los marcadores del navegador e identifica el contenido de la página. Solamente
puede haber un título por documento. Y no admite el anidamiento de tags dentro de él.
<BODY> Es el contenido del documento.

Atributos de la etiqueta BODY

Afectan de manera global a toda la página.
Se definen dentro de la etiqueta <BODY>
bgcolor: especifica un color de fondo para la página. Se especifica mediante 6 caracteres hexadecimales
entrecomillados siguiendo el estándar RGB.

6
 HTML
Colegio Boston
Formulario
Preparatoria
ISE Adda Laura Paz Olvera

background: indica la colocación de una imagen como fondo de la página. La imagen se coloca haciendo un
mosaico.
text: asigna el color del texto de la página. Se especifica mediante 6 caracteres siguiendo el estándar
RGB. Por defecto es el negro.
link: asigna el color de los enlaces que no han sido visitados. Se especifica mediante 6 caracteres
siguiendo es estándar RGB. Por defecto es el azul.
vlink: asigna el color de los enlaces visitados. Se especifica mediante 6 caracteres siguiendo es estándar
RGB. Por defecto es el morado.
alink: asigna el color de los enlaces activos. Un enlace está activo en el preciso instante que se pulsa,
por lo que a veces es un poco difícil observarlo. Se especifica mediante 6 caracteres siguiendo es
estándar RGB.
leftmargin: indica el margen a los lados de la página. Válido para iexplorer.
topmargin: indica el margen arriba y debajo de la página. Para iexplorer.
marginwidth: la contrapartida de leftmargin para Netscape.
marginheight: igual que topmargin, pero para Netscape.
Si se desea que una página funcione para ambos exploradores, deberán incluirse ambas
directivas.

Etiquetas para Estructura del Documento.

No afectan la apariencia del documento, solamente le dan estructura.
<Hn> Activa la creación de títulos. N puede ser un número de 1 a 6 que indica el nivel del título.
<P> Activa la creación de párrafos.
<DIV> Marca divisiones que llevan un mismo tipo de alineado. Por sí sola no sirve para nada.
Acompañada del atributo align nos permite alinear cualquier elemento (párrafo o imagen) de la
manera deseada.
<PRE> Respeta los espacios adicionales que se ponen en el texto. Convierte el texto pre-formateado a
una fuente monoespaciada. Anteriormente se usaba para hacer tablas.
<BR> Inserta un salto de línea. No tiene etiqueta de cierre. Se diferencia de <P> en que no introduce
una línea en blanco, solamente el retorno de carro.
<HR> Inserta una línea divisoria. No lleva etiqueta de cierre.
El atributo WIDTH especifica el ancho de la línea.
<!-- Abre comentario
--> Cierra comentario

7
 HTML
Colegio Boston
Formulario
Preparatoria
ISE Adda Laura Paz Olvera

Atributo de alineación
Se utilizan dentro de las etiquetas <P> y <Hn>.
Sirven para dar una alineación determinada a los párrafos
Align Define la alineación del texto. Puede tomar los valores: left, center o right, dependiendo
de si se desea alinear a la izquierda, centro o derecha. Los valores son escritos entre
comillas. El valor por defecto es “left”.

Uso de DIV
Se utiliza para simplificar el código y no tener que introducir continuamente el atributo align en cada etiqueta
<P>.

Etiquetas para Estilos de caracter

Afectan a palabras o caracteres dentro de otras entidades HTML modificando su aspecto.
Existen dos tipos de estilos:
 Estilos lógicos. Dependen del navegador, ya que éste decide cómo serán realzados
 Estilos físicos. Modifican la presentación real del texto.

Estilos físicos.
<B> Negritas
<U> Subrayado
<I> Itálicas
<tt> Fuente monoespaciada
<sub> Subíndice
<sup> Superíndice
<font> Indica la tipografía.

Estilos lógicos.
Todos enfatizan el texto, pero la forma en que lo hacen depende del navegador
<em> Generalmente usa cursivas.
<strong> Generalmente usa negritas
<code> Usa una fuente monoespaciada, generalmente Courier.
<samp> Fuente monoespaciada, similar a code.

8
 HTML
Colegio Boston
Formulario
Preparatoria
ISE Adda Laura Paz Olvera

<kbd> Texto que el usuario debe escribir

<var> Nombre de una variable que deba ser reemplazada por su valor real. Generalmente cursiva o
subrayada.
<dfn> Resalta una palabra que se va a definir.
<cite> Citas cortas. Generalmente cursivas.

Atributos de la fuente.
Se especifican dentro de la etiqueta <font>
Face Indica el tipo de fuente a utilizar. Dado que no todas las plataformas tienen el mismo tipo de
fuente, se acostumbra listas dos o tres fuentes distintas, para que en caso de que el
navegador no disponga de la primera, utilice la segunda o la tercera fuente enumeradas
en lugar de utilizar la fuente por defecto (generalmente Times New Roman).
Ejemplo: <face font=” Comic Sans MS,arial,verdana”>
Size Indica el tamaño de la fuente. Se utilizan números del 1 al 7, correspondiendo 1 al
tamaño más pequeño disponible para la fuente y 7 al más grande.
Ejemplo: <font size = “4”>
También es posible especificarlo de manera relativa mediante los signos de + o – y el
número de niveles que se desea aumentar o disminuir el tamaño de la fuente.
Ejemplo: <face size= “+2”>
Color Indica el color del texto. Utiliza el estándar RGB mediante 6 dígitos hexadecimales.
Ejemplo: <font color = “00FF88”>
HTML es capaz de entender los siguientes colores predefinidos: aqua, black, blue,
fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, yellow.
Ejemplo: <font color = “red”>

Caracteres especiales.
Permiten insertar dentro del texto de una página caracteres que no sean ASCII estándar dentro de cualquier
plataforma.
HTML distingue entre tres grupos de caracteres especiales:
 Los nombrados. Que corresponden a símbolos comunes. Utilizan el símbolo & seguido de la abreviatura
del caracter y terminados en punto y coma. Por ejemplo: &reg; introduce el símbolo de registrado,
&euro; introduce el símbolo del euro y así.
 Los numerados. Que corresponden al código ASCII predeterminado del navegador, por ejemplo el
conjunto ISO-Latin-1 (ISO-8859-1). Estos símbolos utilizan el símbolo &# seguidos por el número que

9
 HTML
Colegio Boston
Formulario
Preparatoria
ISE Adda Laura Paz Olvera

corresponde a la posición del caracter y terminados en punto y coma. Por ejemplo: &#174; introduce el
símbolo de registrado de acuerdo con el estándar ISO-8859-1.
 Los reservados. Que se utilizan para escribir de manera textual algunos caracteres que se utilizan en
HTML, como son >, <, & y “.

Color
Todos los colores en el monitor se forman mediante la combinación de tres canales de luz: Rojo, Verde y Azul
(Red, Green & Blue) con los que se forman todos los demás colores.
Cualquier color puede expresarse mediante un código numérico formado de tres valores, que indican el valor
del rojo, del verde y del azul. Cada valor indica la intensidad de la luz emitida por el canal correspondiente
(síntesis aditiva)
El código de un color se expresa en formato hexadecimal. El valor mínimo para cada canal es el 00 y el valor
máximo es FF (que equivale a 255)

Etiquetas para Listas en HTML

Las listas se utilizan para enumerar y definir elementos, textos pre-formateados y títulos. HTML maneja cinco
tipos de listas: ordenadas, desordenadas, de glosario, de menú y de directorio, aunque las dos últimas
prácticamente han quedado en desuso debido a su parecido con las listas de viñetas.
Las etiquetas usadas en la definición de listas son las siguientes:
<OL> Indica el inicio de una lista ordenada
<UL> Indica el inicio de una lista desordenada
<LI> Indica un elemento de la lista
<dt> Indica un término de glosario
<dl> Indica una definición de glosario.

Listas ordenadas
Se utilizan para presentar información en diversos elementos o ítems con la particularidad de que éstos estarán
precedidos de un número o letra para enumerarlos.
Se engloban por las etiquetas <ol> y </ol>.
Cada elemento de la lista estará encabezado por la etiqueta <li>.
La etiqueta <li> puede o no llevar etiqueta de cierre.
Aunque no es necesario, se recomienda que cada elemento de la lista esté en una línea nueva para dar mayor
claridad al documento.

10
 HTML
Colegio Boston
Formulario
Preparatoria
ISE Adda Laura Paz Olvera

Atributos para listas ordenadas.

Se utilizan dentro de la la etiqueta <ol>
Type Nos permite seleccionar si la lista estará ordenada en base a letras números o números
romanos. Puede tomar los siguientes valores:
“1” La lista se ordena en base a números
“a” La lista se ordena en base a letras minúsculas
“A” La lista se ordena en base a letras mayúsculas
“i” La lista se ordena en base a números romanos en minúsculas
“I” La lista se ordena en base a números romanos en mayúsculas.
Start Permite iniciar la numeración en cualquier número. Su parámetro siempre es un número. Para
el caso de letras o números romanos, el navegador se encarga de hacer la traducción.

Listas desordenadas
Se utilizan para presentar información en diversos elementos o ítems con la particularidad de que éstos estarán
precedidos de una viñeta para enumerarlos.
Se engloban por las etiquetas <ul> y </ul>.
Cada elemento de la lista estará encabezado por la etiqueta <li>.

Atributos para listas desordenadas.

Pueden utilizarse dentro de la etiqueta <ul> si se desea que afecten a toda la lista.
Si se desea afectar a un sólo elemento de la lista, se utilizan dentro de la etiqueta <li>
Type Permite seleccionar la viñeta que se presentará ante cada ítem de la lista. Puede tomar
los siguientes valores:
circle Se utiliza un punto como viñeta. Es la viñeta por defecto.
Disc Se utiliza un disco como viñeta.
Square Se utiliza un cuadrado como viñeta.

Listas de Definición o de Glosario

En este tipo de listas, cada elemento está compuesto por un término y una definición del mismo.
Cada elemento es presentado junto con su definición, uno detrás de otro.
Se engloban por las etiquetas <dl> y </dl>.
Cada término de la lista estará encabezado por la etiqueta <dt>.
Cada definición del término estará encabezada por la etiqueta <dd>.
Las etiquetas <dt> y <dd> pueden o no llevar etiqueta de cierre.

11
 HTML
Colegio Boston
Formulario
Preparatoria
ISE Adda Laura Paz Olvera

Aunque no es necesario, se recomienda que cada elemento de la lista esté en una línea nueva para dar mayor
claridad al documento.

Atributos para listas de definición

Compact Por defecto, el navegador colocará término y definición en dos líneas diferentes. El uso de este
atributo dentro de la etiqueta <dl> evita este salto de línea.
Dado que cada línea <dd> desplaza efectúa un desplazamiento hacia la derecha, a menudo las listas de definición
se utilizan para crear texto identado.

Listas anidadas
Las listas pueden anidarse para crear listas más complejas. Se pueden anidar las listas colocándolas una dentro
de otra, de manera que la lista secundaria sangre respecto a la principal.
Se pueden anidar listas de diferente tipo para conseguir una lista mixta, pero es importante estructurar bien las
etiquetas ya que las etiquetas de la lista principal englobarán todo el conjunto de las listas y las etiquetas de las
listas secundarías deberán cerrarse antes de volver a la lista principal.
En este tipo de listas es muy recomendable identar el documento.

Imágenes en HTML
El componente gráfico de una página es muy importante, ya que la introducción de imágenes puede ayudar a
explicar más fácilmente la información y darle mayor estética a una página.
La sobrecarga de imágenes se traduce en una distracción para el navegante, quien tendrá más dificultad en
encontrar la información necesaria.
El uso de imágenes aumenta el tiempo de carga de la página, por ello es recomendable optimizar las imágenes
para internet haciendo que su tamaño en bytes sea lo más pequeño posible, sin comprometer por ello la calidad.
Las imágenes son almacenadas en forma de archivos.

Formatos para archivos

Los formatos más utilizados son GIF para dibujos y JPG para fotos. Estos formatos optimizan el tamaño en disco
ya que comprimen las imágenes para guardarlas. Las diferencias radican en el modo en que cada formato
comprime la imagen.
Otro formato muy usado es el PNG. Sin embargo, no es tan popular debido a que durante un tiempo no fue
reconocido por la mayoría de las herramientas para gráficos y los navegadores (Explorer no lo reconoce hasta la
versión 6). Sin embargo, se comporta muy bien en cuanto a compresión y calidad del gráfico.
A continuación, se presenta una tabla comparativa de las principales características de los formatos gráficos:
GIF JPG PNG

12
 HTML
Colegio Boston
Formulario
Preparatoria
ISE Adda Laura Paz Olvera

 Compresión con  Compresión sin

 Compresión sin
pérdida pérdida
pérdida
 Comprime bien las  Comprime bien los
 Comprime bien los
fotos dibujos
dibujos y también
funciona para fotos  Paleta de color real  Paleta de colores
pequeñas.  Hasta 16 millones de variable
 Paleta de colores colores  Hasta millones de
variable  Sin transparencia colores
 Hasta 256 colores  Sin animación  Permite transparencia
 Permite transparencia,  Alta compatibilidad  Sin animación
lo que permite colocar  En la optimización, se  Menor compatibilidad
las imágenes sobre recomienda bajar la  En la optimización, se
diferentes fondos. calidad de la imagen al recomienda reducir la
 Permite animación momento de paleta.
 Alta compatibilidad guardarla.
 En la optimización, se
recomienda reducir la
paleta de colores.

Etiquetas para imágenes

<IMG> Inserta una imagen dentro del documento HTML. No lleva etiqueta de cierre. Las imágenes
deben estar en formato GIF, JPEG o PNG. Siempre debe especificarse el atributo SRC. La sintaxis
es:
<img src="URL">
Para utilizar una imagen como enlace, deberá especificarse ésta dentro de la etiqueta <A>, de la
siguiente manera:
<a href="archivo.html"><img src="imagen.gif"></a>

Atributos para imágenes

Src Es de uso obligatorio con <IMG> y se le debe asignar una URL (entre comillas), que puede ser el
nombre de un archivo en la misma computadora o en un servidor remoto. Para ubicarlo se siguen
las mismas reglas que para los enlaces, pero en lugar de una página, el destino es un archivo
gráfico.
Align Especifica la alineación de la imagen. Cuando se desea que el texto rodee la imagen, es preferible
usar align, mientras que si se desea mantener la imagen sola, es preferible alinearla usando
<DIV>. Puede tomar los valores ya conocidos de left, right, center, top, middle o buttom. En el
caso de los alineamientos verticales, se supone una línea de texto de referencia y la imagen se

13
 HTML
Colegio Boston
Formulario
Preparatoria
ISE Adda Laura Paz Olvera

ajusta a su parte alta, media o central, según sea el caso, pudiendo tomar, además, alguno de los
siguientes valores:
“Absbuttom” Alinea la imagen al nivel del elemento más bajo de la línea.
“Absmiddle” Alinea la imagen al nivel medio absoluto de la línea.
Alt Establece un texto alternativo para la imagen. Entre comillas se escribe el texto que suplantará
a la imagen si no se carga o mientras se carga o cuando, visualizando ya la imagen, se pasa el
ratón por encima. Su uso, aunque no obligatorio, es indipensable cuando la imágen sirve como
enlace.
Ejemplo: <img src="logo.gif" alt="Logo de la Empresa">
Border Establece, en pixeles, el ancho del borde que rodeará a la imagen.
Clear Se usa en combinación con <br> para que salte de línea hasta encontrar el lado libre. Puede
tomar los valores siguientes:
“left” Saltará verticalmente hasta encontrar el margen izquierdo libre
“right” Saltará verticalmente hasta encontrar el margen derecho libre
“all” Saltará verticalmente hasta encontrar ambos márgenes libres.
Height Establece el alto de la imagen a visualizar en pixeles.
Hspace Indica el espacio libre, en pixeles, que debe colocarse entre la imagen y otros elementos que la
rodean en sentido horizontal.
Lowsrc Indica un archivo de imagen de baja resolución que es descargado antes de la imagen de alta
resolución. Se utiliza para dar una idea de la imagen rápidamente. Actualmente está en desuso.
Usemap Especifica un nombre de mapa. Es de uso obligatorio en imágenes mapeadas.
Vspace Indica el espacio libre, en pixeles, que debe colocarse entre la imagen y otros elementos que la
rodean en sentido vertical.
Width Establece el ancho de la imagen a visualizar en pixeles.
El uso de estos dos últimos atributos ayuda al navegador a confeccionar la página incluso antes de que las
imágenes hayan sido cargadas, ya que reserva el espacio correspondiente a cada una de ellas, evitando así que
el texto se mueva de un lado a otro cada vez que la imagen se cargue.

Mapas de Imágenes
Se utilizan para definir sobre una determinada imagen, regiones que sirvan como enlaces.

Etiquetas para mapas de imágenes

<MAP> Identifica un nuevo mapa de imágenes. Utiliza el atributo name
<AREA> Define las áreas que se podrán activar en la imagen. Utiliza los siguientes atributos: alt, shape,
coords y href.

14
 HTML
Colegio Boston
Formulario
Preparatoria
ISE Adda Laura Paz Olvera

Atributos para mapas de imágenes

Name Se utiliza name = “nombre del mapa” para definir el nombre del mapa.
Alt Define el texto que se mostrará cuando se pase el ratón por sobre el area.
Shape Establece el área a definir. Puede tomar los valores de rect, poly o circle.
Coords Indica las coordenadas de cada punto del área a activar. Las coordenadas se pueden averiguar
utilizando un programa de edición de imágenes. En las áreas rectangulares se especifican las
coordenadas de las esquinas superior derecha e inferior izquierda. En las poligonales se deben
especificar las coordenadas de todos los vértices del área. Por último, en las circulares, se
especifican las coordenadas del centro del área y el valor del radio.
Href Especifica la dirección del enlace. En el caso de imágenes, van dirigidos a una sección #.

Tablas en HTML
 Permiten representar y ordenar cualquier elemento de la presentación en filas y columnas permitiendo
así resumir grandes cantidades de información y presentarla de manera rápida y fácil. Una tabla permite
organizar y distribuir los espacios de manera más óptima.
 Las tablas se definen fila a fila, celda a celda, comenzando por la celda superior izquierda.
 Las columnas se calculan automáticamente según las celdas que hay en cada fila.
 Al igual que las listas, las tablas pueden anidarse, aunque no se recomienda anidar más de cuatro tablas
debido a que pueden retrasar la carga de la página en algunos navegadores.
 Se recomienda dibujar la tabla a lápiz antes de proceder a colocar las etiquetas correspondientes para
tener más claros los valores que deberán asignarse a los diferentes atributos. Esto es especialmente
importante en el caso de tablas complejas.

Etiquetas para tablas

<table> Indica el inicio de una tabla.
<tr> Indica una fila de la tabla.
<th> Indica los encabezados de una tabla.
<td> Indica una celda común que contiene información. Se puede indicar casi cualquier tipo de
etiqueta, por ejemplo <b>, dentro de <td> y </td> para dar forma a su contenido. Las etiquetas
colocadas dentro de la definición de una celda no modifican el resto del documento. Las
etiquetas colocadas fuera no son tomadas en cuenta dentro de ésta.
<caption> Indica el título de una tabla. Su uso no es obligatorio. El título también puede indicarse mediante
un párrafo. En caso se usarse la etiqueta <caption> deberá colocarse después de la etiqueta
<table>

15
 HTML
Colegio Boston
Formulario
Preparatoria
ISE Adda Laura Paz Olvera

<TBODY> Agrupa conjuntos del filas. Resulta útil para definir ciertos atributos a únicamente ciertas filas de
la tabla. Para definir un grupo, se utiliza <tbody> con los atributos a definir para el grupo antes
de la etiqueta <tr> del primer renglón del grupo, a continuación, se continúa con la definición
normal de la tabla y una vez que se escribe la etiqueta </tr> de la última fila del grupo, se coloca
la etiqueta </tbody> para cerrar la definición del grupo.
Los atributos que se pueden utilizar con la etiqueta TBODY son un subgrupo reducido de los que
se aplican a TR o TD: align, bgcolor y valign, class, id, además de manejadores de eventos. En el
siguiente ejemplo se definen para las filas 2, 3 y 4 una alineación y color de fondo distintos al
resto de la tabla.
<COLGROUP> Agrupa conjuntos de columnas. Su uso es diferente del de <tbody> ya que no es posible colocar
la etiqueta de apertura antes de la primera columna a agrupar y la de cierre después de la última
columna a agrupar. En lugar de eso, lo que se hace es colocar las etiquetas de apertura y cierre
de <colgroup> después de la definición de la tabla y antes de empezar a definir renglones. El
atributo colspan, indicará el número de columnas a agrupar comenzando desde la primera. Así,
<colgroup span=”2” width=”30%”> agruparía las dos primeras columnas de la tabla y les definiría
como ancho el 30% del ancho total de la tabla.
Los atributos que se pueden utilizar con la etiqueta COLGROUP incluyen align, valign, class, id,
style, width, además de manejadores de eventos. Algunos navegadores aceptan también
bgcolor.
También es posible especificar atributos particulares para cada columna, en cuyo caso no se
utiliza el atributo colspan, sino la etiqueta <col>.

Atributos para tablas

La mayor parte de estos atributos pueden usarse a diferentes niveles dentro de la tabla. Es importante recordar
que los atributos definidos para celdas tienen prioridad sobre los definidos dentro de las tablas.
Width Cuando se usa dentro de la etiqueta <table> especifica el ancho de la tabla ya sea en pixeles
o en porcentaje respecto a la pantalla. También puede acompañar a <th> y <td> para
especificar el ancho de la columna.
Ejemplo:<td width="80"> Da a la celda una anchura de 80 pixeles, mientras que <td
width="80%"> da a la celda una anchura del 80% de la tabla.
Height Define la altura de la celda o tabla en pixels o porcentaje. Este atributo no funciona bien
en todos los navegadores, de ahí que su uso no está muy extendido. Las celdas por lo
general tienen el alto que necesitan para que quepa todo el contenido que se le haya
insertado.

16
 HTML
Colegio Boston
Formulario
Preparatoria
ISE Adda Laura Paz Olvera

Border Indica el ancho del borde en pixeles. Border="0" indica la ausencia de borde. Puede
usarse a cualquier nivel, pero cuando se usa dentro de la etiqueta <table> se refiere al
borde principal de la tabla.
Cellspacing Se usa dentro de <table>. Indica el número de pixeles que separan cada celda. El valor
predeterminado es 2.
Cellpadding Se usa dentro de <table>. Indica el espacio en pixeles entre el borde de la celda y su
contenido. El valor predeterminado es 1.

Align Cuando se utiliza dentro de la etiqueta <caption> puede tomar los valores:
“top” para colocar el título antes de la tabla
“buttom” para colocar el título después de la tabla
Cuando se utiliza dentro de la etiqueta <td> indica la posición del contenido dentro de la
celda y puede tomar los valores:
“center” para colocar el contenido al centro
“left” para colocar el contenido a la izquierda
“right” para colocar el contenido a la derecha
Cuando se usa dentro de la etiqueta <table> indica la posición de la tabla con respecto a
su entorno. También puede tomar los valores de “center”, “left” o “right”.
Valign Se utiliza dentro de la etiqueta <td> para indicar la posición del contenido dentro de la
altura de la celda y puede tomar los valores
“top” para colocar el contenido en la parte superior
“middle” para colocar el contenido en la parte media
“buttom” para colocar el contenido en la parte inferior de la celda
Rowspan Expande una celda verticalmente. Se utiliza dentro de las etiquetas <td> o <th> para
indicar el número de filas que deberán abarcarse.
Ejemplo: <td rowspan=”2”> Fusiona la celda con su vecina de abajo, abarcando 2
renglones.
Colspan Expande una celda horizontalmente. Se utiliza dentro de las etiquetas <td> o <th> para
indicar el número de columnas que deberán abarcarse.

17
 HTML
Colegio Boston
Formulario
Preparatoria
ISE Adda Laura Paz Olvera

Ejemplo: <td colspan = “2”> Fusiona la celda con su vecina de la derecha, abarcando dos
columnas.
Bgcolor Se utiliza para dar color a la celda o línea elegida. Puede incluso utilizarse para toda la
tabla. Sigue el formato RGB utilizando 6 dígitos para especificar el color.
Bordercolor Define el color del borde de la celda, línea o tabla elegida.
Background Permite colocar un fondo para la celda o para la tabla a partir de un enlace a una imagen.
Frame Se usa dentro de la etiqueta <table> para definir el borde externo de la tabla, dejando inalterados
los bordes de las celdas. Puede tomar los siguientes valores:
“Void” Ningún borde externo.
“Above” Sólo borde superior de la tabla.
“Below” Sólo borde inferior de la tabla.
“Hsides” Sólo los bordes de arriba y abajo
“Vsides” Sólo los bordes de los lados derecho e izquierdo.
“Lhs” Solamente el borde izquierdo.
“Rhs” Solamente el borde derecho
“Box” Los cuatro bordes.
“Border” También los cuatro bordes.
Ejemplo: <table frame=”void”> No coloca borde externo a la tabla.
Rules Define el aspecto de los bordes internos de las tablas, esto es, los bordes de las celdas
de las tablas. Puede tomar los siguentes valores:
“None” Ningún borde interno
“Groups” Sólo se colocarán bordes en los grupos de columnas o filas.
“Rows” Sólamente se colocarán bordes entre filas.
“Cols” Solamente se colocarán bordes entre columnas.
“All” Se colocarán todos los bordes internos

Enlaces en HTML
Las páginas WEB son archivos HTML en los que se incluye diversa información con un determinado formato. De
ahí que, un sitio web podrá ser considerado como un conjunto de archivos debidamente conectados entre ellos
y con el exterior del sitio por medio de enlaces de hipertexto. Loa archivos constituyen el contenido del sitio y
los hipervínculos permiten definir relaciones entre diferentes objetos y estructurar todo el conjunto al que el
navegante tiene accesoLa facilidad para definir este tipo de enlaces es una de las razones de la potencia y
versatilidad de HTML.
Para especificar de manera uniforme el objeto al que apunta el enlace, se utiliza una forma estandarizada que se
denomina URL (Uniform Resource Locator).

18
 HTML
Colegio Boston
Formulario
Preparatoria
ISE Adda Laura Paz Olvera

Composición de las URLs

Un URL está formado de la siguiente manera:
protocolo://host/ruta
El protocolo (o esquema) es el identificador el tipo de servicio que va a solicitarse al navegador. Entre los
protocolos más usados se encuentran: http, https, ftp, File, mailto y News
El host identifica al servidor donde se encuentra el objeto al que apunta el enlace. Puede ser el nombre de una
computadora o también un nombre y un puerto.
La ruta es la ruta de acceso al archivo que contiene el objeto dentro del servidor. Sigue la convención de UNIX,
por lo que es importante recordar que la separación entre directorios se realiza usando una diagonal y que este
sistema hace diferencia entre letras mayúsculas y minúsculas. Cuando la ruta no se especifica, la URL apunta
directamente a la página principal del servidor.

Tipos de enlaces
Enlaces internos.
Apuntan a un lugar diferente dentro de la misma página. Una aplicación común, consiste en la colocación de un
índice al principio del documento donde se colocan enlaces origen a las diferentes secciones. Paralelamente, al
final de cada sección, se introduce un enlace que apunta al índice.
Para crear un enlace de este tipo es necesario, aparte del enlace de origen propiamente dicho, un segundo enlace
que será colocado en el destino. Este segundo enlace se define con la etiqueta <A> y el atributo name.

Enlaces locales
Se dirigen a páginas dentro del mismo sitio WEB. Se utilizan para relacionar los distintos documentos HTML que
componen el sitio WEB.
Para crearlos se utiliza el nombre del archivo a direccionar como parámetro del atributo href de la etiqueta <A>.
No es necesario incluir el nombre del host debido a que se trata de la misma computadora. Si se desea apuntar
a una sección específica del archivo, ésta deberá ser especificada también dentro de la url siguiendo una sintaxis
del tipo:
<a href="archivo.html#seccion">contenido</a>
Lo que resulta un híbrido entre los enlaces locales y los internos. Obviamente, la sección deberá haber sido
definida mediante el atributo name de la etiqueta <A>.

Enlaces remotos
Se dirigen hacia páginas que se encuentran fuera del sitio web. Para crearlos, se utiliza como valor del atributo
href la url completa, incluyendo el protocolo.

19
 HTML
Colegio Boston
Formulario
Preparatoria
ISE Adda Laura Paz Olvera

Enlaces a direcciones de correo.

Activan la aplicación de correo de la máquina local de tal forma que se crea un mensaje nuevo de correo
electrónico dirigido a una dirección de e-mail determinada.
Generalmente se usan para ofrecer al visitante una forma rápida de tener contacto con el propietario de la
página.
Se utilizan especificando el protocolo mailto: y la dirección de correo a la que se debe dirigir el enlace.
Además de la dirección, se puede especificar el asunto del mensaje colocándolo después de la dirección de correo
de la siguiente manera:
<a href=mailto:adda_laura@hotmail.com?subjet=dudas>

Enlaces con archivos

Son enlaces a archivos que no son páginas web. Son muy utilizados debido a que permiten al usuario, bajar
archivos del servidor. Se especifican de la misma forma que otros enlaces remotos, pero debe escribirse el
nombre del archivo y su extensión. Al ser activados, el navegador responde con la pregunta de qué se desea
hacer con el archivo, abrirlo o guardarlo en disco.

Etiquetas para enlaces

<A> Realiza un anclaje a un determinado objeto, que puede ser otro documento, un vídeo, un gráfico
u otro servidor. Esta etiqueta siempre lleva un parámetro, ya sea el atributo href o el atributo
name. Dentro de las etiquetas de apertura y cierre se especifica el nombre con el que se desea
que aparezca el enlace. Su sintaxis general lleva la forma:
<a href="destino">contenido</a>
Siendo el contenido un texto o una imagen. Es la parte de la página que se colocará activa y
donde deberemos pulsar para acceder al enlace.
Por su parte, destino será una página, un correo electrónico o un archivo.

Atributos para enlaces

Href Se utiliza para especificar el destino del enlace. Como valor de este atributo puede utilizarse la
ruta completa o únicamente la porción de ésta mínima indispensable para localizar el objeto.
Name Se utiliza para dar un nombre a una determinada porción del documento de forma tal que dicha
parte pueda ser direccionada después mediante un hipervínculo. Por ejemplo:
<A NAME=”parte1”> Primera Parte </A>
Posteriormente para incluir un vínculo a esa primera parte, se utilizará:
<A REF=”#parte1> Ir la primera parte </A>
Rel Define o marca el comportamiento de los buscadores cuando rastrean una página web en busca
de contenido para indexar. Por defecto, cuando un buscador visita una página web,

20
 HTML
Colegio Boston
Formulario
Preparatoria
ISE Adda Laura Paz Olvera

automáticamente va recorriendo todos sus enlaces y va indexando su contenido en su base de

datos de páginas, para evitar este comportamiento, se utiliza “nofollow” como parámetro de rel
de la siguiente manera:
<a href="URL_DEL_ENLACE" rel="nofollow">TEXTO_DEL_ENLACE</a>

Sonido en HTML
La aplicación de sonido está limitada por varias circunstancias, tales como:
 El ancho de banda de las conexiones a Internet, ya que los archivos de sonido tienen un tamaño muy
grande.
 La interpretación que hacen los navegadores de los archivos de sonido. De hecho, se utilizan etiquetas
diferentes para distintos navegadores.
 Muchos de los formatos usados requieren de un plugin especial para su reproducción en el navegador
del cliente.

Conceptos Básicos de Sonido Digital.

El sonido tiene una naturaleza contínua y se propaga en ondas desde la fuente que lo produce. Las características
propias de cada sonido tales como los tonos, el volúmen y las notas dependen de las propiedades físicas de las
ondas que lo forman principalmente de las frecuencias (principales y armónicas) y de la amplitud. Estas ondas
viajan desde el emisor hasta el receptor a través de un medio físico, tal como el aire, el agua, un alambre
conductor o la fibra óptica.

Para representar un sonido de manera digital, es preciso realizar un muestreo del mismo. Esto es, se toma una
lectura del valor de ciertos parámetros a intervalos regulares. Esta lectura es representada en un formato digital.
El dispositivo que realiza esta operación se denomina “convertidor análogo digital”.

La fidelidad con la que la onda muestreada pueda representar el sonido original depende de dos parámetros:

21
 HTML
Colegio Boston
Formulario
Preparatoria
ISE Adda Laura Paz Olvera

 El número de muestras tomadas en un intervalo de tiempo

 El número de bits utilizados para su representación
Respecto al primer parámetro, el oído humano percibe un espectro de frecuencias tan amplio que la cantidad
mínima de muestras que logran abarcarlo es de 44,000 por segundo. De ahí que los CD de audio contengan
sonidos capturados a 44,100 muestras por segundo. A esto se le llama “calidad de CD”, sin embargo, existen
tarjetas de sonido profesionales capaces de capturar hasta 100,000 muestras por segundo.
Respecto al número de bits usados para su representación, las tarjetas de sonido estándar utilizan 8 bits,
mientras que los CD de audio utilizan 16 bits.
Con los datos anteriores, se puede reconstruir la onda original de tal modo que pueda ser transformada
nuevamente en sonido y reproducida. La conversión de los valores digitalizados a valores análogos se lleva a
cabo por un dispositivo denominado “convertidor digital análogo”.
Por último, para que la reproducción se perciba de manera contínua, se debe contar con un ancho de banda tal
que pueda procesarse esa cantidad de datos por segundo.
Un caso especial es el del sonido sintetizado, en que no se realiza ninguna captura de ondas sonoras reales, sino
que es generado directamente por la computadora por el MIDI (Music Instrument Digital Interface). A pesar de
los avances en este sentido, los sonidos sintetizados no tienen la calidad ni la riqueza de la onda sonora natural
capturada.

Tipos de Archivos de Sonido

Un problema que surge al trabajar con formatos de sonido son las limitaciones de su uso, ya que muchos de llos
no pueden ser reproducidos más que en sistemas operativos concretos y/o mediante programas específicos.
Adicionalmente, los navegadores no interpretan de la misma manera las etiquetas para reproducción de sonido.
Tal es el caso de Netscape, que prácticamente no acepta ningún tipo de sonido incrustado en la página. Por ello,
es importante distinguir entre los archivos de sonido que pueden ser directamente ejecutados por el navegador
y aquellos que deben ser abiertos por un programa propio que deberá tener el usuario instalado en su equipo
para poder reproducirlos (plugin).
Los formatos de sonido más usuales son:
 WAV (Wave form Audio File format): formato típico de la casa Windows, de elevada calidad, usado en
las grabaciones de CDs, que trabaja a 44 Khz y a 16 bits. Consta básicamente de tres bloques: el de
identificación, el que especifica los parámetros del formato y el que contiene las muestras. Su principal
inconveniente es el tamaño de los archivos, por lo que su uso queda limitado en Internet a la
reproducción de ruidos o frases cortas. La extensión de estos ficheros es .wav. Es soportado por Internet
Explorer y Netscape 4x.
 AU (Audio File format): formato creado por la casa Apple para plataformas MAC, cuyos archivos se
guardan con la extensión .au
 MIDI formato de tabla de ondas, que no guardan el sonido a reproducir, sino un código que nuestra
tarjeta de sonido tendrá que interpretar. Este tipo de archivos no puede almacenar sonidos reales, como
voces o música real grabada; únicamente sonidos almacenables en tablas de ondas. Los archivos MIDI,

22
 HTML
Colegio Boston
Formulario
Preparatoria
ISE Adda Laura Paz Olvera

que se guardan con extensión .mid, son de pequeño tamaño, lo que los hace idóneos para la web. Es
soportado por Internet Explorer y Netscape 4x.
 MP3 (MPEG 1 Layer 3): desarrollado por el MPEG (Moving Picture Expert Group), obtiene una alta
compresión del sonido y una muy buena calidad basándose en la eliminación de los componentes del
sonido que no estén entre 20 hz y 16 Kh (casi el rango del oído humano). Tiene en cuenta el sonido
envolvente (surround) y la extensión multilingüe, y guarda los archivos con la extensión .mp3, y permite
configurar el nivel de compresión, consiguiéndose calidades similares a las del formato WAV pero con
hasta 10 veces menos tamaño de archivo. Es soportado directamente sólo por Internet Explorer 5.5 y
superiores.
 MOD Es una especie de mezcla entre el formato MIDI y el formato WAV, ya que por un lado almacena el
sonido en forma de instrucciones para la tarjeta de sonido, pero por otro puede almacenar también
sonidos de instrumentos musicales digitalizados, pudiendo ser interpretados por cualquier tarjeta de
sonido de 8 bits. No es un formato estándar de Windows, por lo que su uso se indica para sistemas Mac,
Amiga o Linux. La extensión de los archivos es .mod
 µ-Law Format de calidad similar al formato WAV, es original de las máquinas NeXt, y guarda sus archivos
con la extensión .au
 Real Audio de calidad media, permite archivos muy compactos que guarda con extensión .rmp o .ra.
Para su reproducción hace falta tener instalado el plugin Real Audio.

Introducción de sonidos en HTML

Existen diversas formas de incluir un archivo de audio en una página.

Enlaces a archivos de sonido.

Una de las más sencillas es mediante un enlace simple a un archivo de sonido. Por ejemplo:
<a href="sonidos/mp3.mp3" target="_blank"> oir música. </a>
Esta manera nos permite escuchar el archivo como música de fondo.

Etiquetas para sonido

<EMBED> Esta etiqueta incluye en la página web un objeto especial, una especie de consola de mando,
denominada Crescendo, que consta de tres botones, similares al de cualquier reproductor de
audio: un botón Play, para comenzar la reproducción (si no está establecida a automática), un
botón Pause, para detenerla momentáneamente y un botón Stop, para detenerla
definitivamente (puesta a cero). Esta consola es diferente según el navegador usado.
La sintaxis general es:
<embed atributo1="valor1" atributo2="valor2"...atributoN="valorN"></embed>
Ejemplos:
<embed src="../sonidos/mid.mid" hidden="true" type="audio/midi"
autostart="true"></embed>

23
 HTML
Colegio Boston
Formulario
Preparatoria
ISE Adda Laura Paz Olvera

<embed src="../sonidos/mid.mid" hidden="false" type="audio/midi" autostart="false"

width="150" height="100"></embed>
Atributos de EMBED
src="URL" Ruta en la que se encuentra el archivo de audio a reproducir. Puede ser relativa al sistema de
carpetas local, absoluta respecto el sistema de carpetas del servidor web o una URL completa
que localice el archivo en Internet.
loop="l/true/false" Determina el número de veces que se debe ejecutar el archivo de audio. Los valores
admitidos son l (número entero de veces), “true” (infinitas veces) y “false” (sólo una vez). Sólo
es reconocida por Netscape Navigator.
playcount="n" Define el número de veces (n) que se debe ejecutar el archivo de audio en el caso de Internet
Explorer.
type="tipo_archivo" Declara el tipo de archivo de audio que estamos usando, con lo que el navegador web
puede ejecutar el programa o plugin adecuado para la reproducción del fichero. Puede ser
audio/midi, audio/wav, etc.
autostart="true/false" Determina si el archivo de audio debe empezar a reproducirse por sí sólo al cargarse la
página o si por el contrario será precisa la actuación del usuario.
pluginspage="URL" Establece, la página web donde se puede descargar el plugin necesario para reproducir
el archivo. Sólo se activa en el caso de que el navegador no sea capaz de reproducir el fichero
por sí mismo, y es soportada sólo por Netscape.
name="nombre" Asigna un identificador (debe ser único en la página) a una etiqueta embed determinada,
con objeto de ser accedida luego por lenguajes de script.
volume="v" Determina el volumen de reproducción del sonido. Puede variar entre 0 y 100. Sólo es soportada
por Netscape, que en la consola muestra el valor establecido en su indicador de volumen, siendo
su valor por defecto 50. En en caso de Internet Explorer, el valor del volumen por defecto es 50
en plataformas PC, y 75 en MAC.
hidden="true/false" Establece si la consola va a ser visible (false) o no (true).
width="w" Determina el ancho visible de la consola, en pixeles.
height="h" Determina el alto visible de la consola, en pixels.
Estos atributos son muy importantes si se estableció hidden= "false", ya que de su valor va a
depender la correcta visulazación de la consola. En el caso de Internet Explorer, que muestra un
logo de Windows Media sobre los controles, el tamaño mínimo aceptable debe ser de 140x100
pixels, ya que si no la consola saldrá deformada en exceso o recortada. Y en el caso de Netscape
Navigator, se deberán asignar los valores fijos de 145x60 pixels, que es lo que ocupa la consola;
si ponemos un tamaño menor, la consola será recortada, perdiendo funcionalidades, y si
asignamos un tamaño mayor, aparecerán espacios grises alrededor de la consola,
desmereciendo el aspecto de la página. Si no se especifican estos atributos y tampoco hidden,

24
 HTML
Colegio Boston
Formulario
Preparatoria
ISE Adda Laura Paz Olvera

aparecerán en la página tan sólo los mandos de la consola, sin logotipos añadidos (Internet
Explorer) o la consola recortada (Netscape Navigator).
align="top/bottom/center/baseline/left/right/ texttop/middle/absmiddle/absbotom" Define la alineación
horizontal o vertical de la consola respecto de los elementos de la página.
hspace="hs" Establece la separación horizontal, en pixeles, entre la consola y los elementos de la página que
la rodean.
vspace="vs" Establece la separación vertical, en pixeles, entre la consola y los elementos de la página que la
rodean.

25