Instituto Nacional “General Francisco Morazán”

Docente: Ing. Evelyn Perdomo Asignatura: Informática II

Secciones: 2-A-C-E General
HTML (I Parte)

Qué es HTML
El HTML (Hyper Text Markup Language) es el lenguaje con el que se escriben las páginas web. Es un lenguaje
de hipertexto, es decir, un lenguaje que permite escribir texto de forma estructurada, y que está compuesto por
etiquetas, que marcan el inicio y el fin de cada elemento del documento.

Un documento hipertexto no sólo se compone de texto, puede contener imágenes, sonido, vídeos, etc., por lo que
el resultado puede considerarse como un documento multimedia.

Los documentos HTML deben tener la extensión html o htm, para que puedan ser visualizados en los
navegadores (programas que permiten visualizar las páginas web).

Los navegadores se encargan de interpretar el código HTML de los documentos, y de mostrar a los usuarios las
páginas web resultantes del código interpretado

Los navegadores. Compatibilidad

Como hemos dicho, el navegador instalado en el ordenador del usuario es el que interpreta el código HTML de
la página que visita por lo que a veces puede ocurrir que dos usuarios visualicen la misma página de forma
distinta porque tienen instalados navegadores distintos o incluso versiones distintas del mismo navegador.

Los navegadores de hoy en día pretenden ser compatibles con la última versión de HTML. Es necesario realizar
extensiones de los navegadores para que puedan ser compatibles con esta última versión. Dos de los navegadores
que continuamente están realizando extensiones son Internet Explorer y Netscape Navigator, que realizan
extensiones incluso antes de que se establezcan los estándares, intentando incluir las nuevas funciones incluidas
en los borradores.

Los navegadores tienen que ser compatibles con la última versión HTML para poder interpretar el mayor
número posible de etiquetas. Si un navegador no reconoce una etiqueta, la ignora y el efecto que pretendía la
etiqueta no queda reflejado en la página. Para realizar las extensiones de estos navegadores se añaden nuevos
atributos a las etiquetas ya existentes, o se añaden nuevas etiquetas.

Como resultado a estas extensiones, habrán páginas cuyo código podrá ser interpretado completamente por todos
los navegadores, mientras que otras, al incluir nuevos atributos o etiquetas del borrador de la última versión de
HTML, solo podrán ser interpretadas en su totalidad en los navegadores más actualizados.

1
En este último caso también puede ocurrir que alguna etiqueta de la página solamente pueda ser interpretada por
un navegador concreto, y otra etiqueta por un navegador diferente al anterior, por lo que nunca sería visualizada
en su totalidad por ningún navegador. Uno de los retos de los diseñadores de páginas web es hacer las páginas
más atractivas utilizando toda la potencia del lenguaje HTML pero teniendo en cuentas estos problemas de
compatibilidades para que el mayor número de internautas vean sus páginas tal como las ha diseñado.

Editores

Un editor es un programa que nos permiten redactar documentos. Hoy en día existen un gran número de editores
que permiten crear páginas web sin la necesidad de escribir ni una sola línea de código HTML. Estos editores
disponen de un entorno visual, y generan automáticamente el código de las páginas. Al poder ver en todo
momento cómo quedará la página en el navegador, se facilita la creación de las páginas, y el uso de menús
permite ganar rapidez.

Estos editores visuales pueden generar en ocasiones código basura, es decir, código que no sirve para nada, en
otras ocasiones puede ser más efectivo corregir directamente el código por lo que resulta necesario saber HTML
para poder depurar el código de nuestra páginas.

Algunos de los editores visuales con los que podrás crear tus páginas web son Macromedia Dreamweaver,
Microsoft Frontpage, Adobe Pagemill, NetObjects Fusion, CutePage, HotDog Proffesional, Netscape Composer
y Arachnophilia, de los cuales algunos tienen la ventaja de ser gratuitos. La plataforma Wix es totalmente online
y gratuita, donde el uso de ella es fácil y practico.

Es aconsejable comenzar utilizando una herramienta lo más sencilla posible, para tener que insertar nosotros
mismos el código HTML. Esto permite familiarizarse con el lenguaje, para poder utilizar algún editor visual
posteriormente, y depurar el código cuando fuera necesario. Para crear páginas web escribiendo directamente el
código HTML puedes utilizar la herramienta Wordpad o el Bloc de notas que proporciona Windows.

A lo largo de este material de informática II vamos a trabajar con el Bloc de notas para crear nuestras páginas,
pero si se usa una versión se Linux como sistema operativo se usara Gedit, ya que se trata de un editor de textos
muy sencillo de manejar, que nos permitirá crear páginas a través del código HTML.

Arrancar y cerrar el Bloc de notas

Veamos las dos formas básicas de arrancar el Bloc de notas.

Desde el botón Inicio situado, normalmente, en la esquina inferior izquierda de la pantalla.

Colocar el cursor y hacer clic sobre el botón Inicio, se despliega un menú; al colocar el cursor sobre Programas
aparece otra lista con los programas que hay instalados en tu ordenador, buscar Accesorios, seguidamente Bloc
de notas, hacer clic sobre él, y se arrancará el programa.

 Desde el icono del Bloc de notas del escritorio .

Para cerrar el Bloc de notas, puedes utilizar cualquiera de las siguientes operaciones:

 Hacer clic en el botón cerrar

 Pulsar la combinación de teclas ALT+F4.
 Hacer clic sobre el menú Archivo y elegir la opción Salir.

Si el documento ha sido modificado y no ha sido guardado antes de cerrar, se te pedirá confirmación para
guardarlo antes de cerrar el programa.

Escribir en el Bloc de notas

2
Siempre que se abre el bloc de notas aparece un documento en blanco. A la hora de escribir en él, funciona como
cualquier otro editor de texto, basta con situar el cursor en el documento y escribir. Es recomendable insertar una
nueva línea para cada nueva etiqueta HTML, ya que resulta más fácil trabajar de este modo. Si escribiéramos
todo el código seguido nos resultaría difícil interpretarlo, por ello es preferible programar insertando las
etiquetas por separado, en diferentes líneas.A través del menú Formato, opción Fuente, puedes cambiar la fuente
de todo el documento. Si lo deseas, puedes hacer la letra algo más grande o pequeña.

Abrir y guardar documentos

Para abrir un documento, puedes utilizar cualquiera de las siguientes operaciones una vez abierto el Bloc de
notas.
 Pulsar la combinación de teclas Ctrl+A.
 Hacer clic sobre el menú Archivo y elegir la opción Abrir.
Nota: Como el Bloc de notas sirve originalmente para escribir documentos de texto, cuando le decimos Abrir,
por defecto nos muestra los documentos con extensión .txt, nuestras páginas tienen la extensión .htm o html, por
lo que debemos cambiar en el cuadro de diálogo abrir el tipo de archivo para visualizarlos todos y poder ver así
nuestras páginas.

Para abrir un documento nuevo, puedes utilizar cualquiera de las siguientes operaciones.
 Pulsar la combinación de teclas Ctrl+N.
 Hacer clic sobre el menú Archivo y elegir la opción Nuevo.
Para guardar un documento, puedes utilizar cualquiera de las siguientes operaciones.

 Pulsar la combinación de teclas Ctrl+G.

 Hacer clic sobre el menú Archivo y elegir la opción Guardar.

A la hora de guardar un documento no debes olvidar guardarlo con la extensión htm o html. Por ejemplo,
puedes guardar un documento con el nombre mipagina.html

Etiquetas

Las etiquetas o marcas delimitan cada uno de los elementos que componen un documento HTML. Existen dos
tipos de etiquetas, la de comienzo de elemento y la de fin o cierre de elemento.

La etiqueta de comienzo está delimitada por los caracteres < y >. Está compuesta por el identificador o nombre
de la etiqueta, y puede contener una serie de atributos opcionales que permiten añadir ciertas propiedades. Su
sintaxis es: <identificador atributo1 atributo2 ...>

Los atributos de la etiqueta de comienzo siguen una sintaxis predefinida y pueden tomar cualquier valor propio
del usuario, o valores HTML predefinidos.

La etiqueta de final está delimitada por los caracteres </ y >. Está compuesta por el identificador o nombre de la

3
etiqueta, y no contiene atributos. Su sintaxis es: </identificador>

Cada uno de los elementos de la página se encontrará entre una etiqueta de comienzo y su correspondiente
etiqueta de cierre, a excepción de algunos elementos que no necesitan etiqueta de cierre. También es posible
anidar etiquetas, es decir, insertar etiquetas entre otras etiquetas de comienzo y de cierre.

A continuación tenemos un ejemplo en el que tenemos la etiqueta <font..> anidada dentro de la etiqueta <p..>.:

<p align="center"><font color="#993366" size="4" face="Comic Sans MS, Arial, MS Sans Serif">Bienvenidas
al Instituto Morazan</font></p>

Este código daría como resultado el siguiente texto:

Bienvenidas al Instituto Morazán

Es importante anidar bien las etiquetas, las etiquetas no se pueden 'cruzar', en nuestro ejemplo hemos empezado
por la etiqueta <p..>, antes de cerrar esta etiqueta hemos puesto la <font..> por lo que antes de cerrar la etiqueta
<p..> debemos cerrar la etiqueta etiqueta <font..>.

Mi primera página

Lo primero que tienes que hacer es abrir el Bloc de notas. Para abrirlo, puedes dirigirte al menú Inicio,
Programas, Accesorios, opción Bloc de notas.

Seguidamente introduce, en el documento en blanco, el texto siguiente:

<html>
<head>
<title>MI PRIMERA PAGINA</title>
</head>
<body bgcolor="#FFCC99">
<font color="#CC3300" size="5">Hola, estoy haciendo pruebas.</font>
</body>
</html>

Guarda el documento con la extensión htm, con el nombre miprimpag.htm. Puedes guardarlo a través del menú
Archivo, opción Guardar.

Pulsando dos veces sobre el icono del archivo miprimpag.htm, éste debería abrirse automáticamente en el
navegador que tengas instalado en tu ordenador.

El navegador deberá mostrar una página como la siguiente.

4
Como puedes ver, la página resultante es una página que solamente tiene una línea de texto. Si observas la barra
de título del navegador, verás que el título de la página es MI PRIMERA PAGINA. Este título ha sido
establecido por la línea <title>MI PRIMERA PAGINA</title>. El color de fondo de la página ha sido
establecido por la línea <body bgcolor="#FFCC99">. El texto Hola, estoy haciendo pruebas. se ha insertado a
través de línea <font color="#CC3300" size="5">Hola, estoy haciendo pruebas.</font>.

ESTRUCTURA DE UNA PÁGINA

A lo largo de este tema vamos a aprender a crear una página básica.

La estructura básica de una página es:

<html><head>
...
</head><body>
...
</body></html>

Ahora veamos cómo funcionan estas etiquetas.

Identificador del tipo de documento <html>

Todas las páginas web escritas en HTML tienen que tener la extensión html o htm. Al mismo tiempo, tienen que
tener las etiquetas <html> y </html>. Entre las etiquetas <html> y </html> estará comprendido el resto del
código HTML de la página.
Por ejemplo:
<html> “Comienza el texto html”
...
</html> “Fin del texto html”

Encabezado o Cabecera de la página <head>

La cabecera de la página se utiliza para agrupar información sobre ella, como puede ser el título. Está formada
por las etiquetas <head> y </head>. La etiqueta <head> va justo debajo de la etiqueta <html>.
Por ejemplo:
<html> “inicia pagina o texto html”
<head> “inicia encabezado”
...
</head> “finaliza encabezado”
...
</html> “finaliza pagina”

5
Título de la página <title>

El título de la página es el que aparecerá en la parte superior de la ventana del navegador, cuando la página esté
cargada en él. Para asignar un título a una página es necesario escribir el texto deseado entre las etiquetas <title>
y </title>. Estas etiquetas han de estar dentro de la cabecera, es decir, entre las etiquetas <head> y </head>.
Por ejemplo:
<html>
<head>
<title>
Curso de HTML
</title>
</head>
</html>
Cuerpo del documento <body>

El cuerpo del documento contiene la información propia del documento, es decir lo que pqueremos que se
visualice, el texto de la página, las imágenes, los formularios, etc. Todos estos elementos tienen que encontrarse
entre las etiquetas <body> y </body>, que van justo debajo de la cabecera.
Por ejemplo:
<html><head><title>
Curso de HTML
</title></head><body>
...
</body></html>

A través de la etiqueta <body> es posible establecer el color o la imagen de fondo de la página. El color de fondo
puede establecerse a través del atributo bgcolor, al que es posible asignarle un color representado en
hexadecimal o por un nombre predefinido.Existe otra forma de representar algunos colores, sin la necesidad
de utilizar números en hexadecimal. Estos colores pueden representarse por su nombre, y son los
siguientes:
Color Hexadecimal Nombre
#FFFFFF White / Blanco
#000000 Black / Negro
#000080 Navy / Azul Marino
#0000FF Blue / Azul
#008000 Green / verde
#008080 Teal / Verde celeste
#00FF00 Lime / Verde Limon
#00FFFF Aqua / Acua
#800000 Maroon / Café
#800080 Purple / Morado
#808000 Olive / Verde Olivo
#808080 Gray / gris
#C0C0C0 Silver / Plateado
#FF0000 Red / Rojo
#FF00FF Fucsia / Rosado Fucsia
#FFFF00 Yellow / amarillo

6
Por ejemplo, para hacer que el color de fondo de una página sea de color azul, tendremos que escribir:

...
<body bgcolor="#0000FF">
...
</body>
</html>

Sería equivalente a poner:

...
<body bgcolor="blue">
...
</body>
</html>

La imagen de fondo puede establecerse a través del atributo background, indicando la ruta en la que se encuentra
la imagen. Por ejemplo, para hacer que la imagen de fondo de una página sea la imagen fondo.gif, que se
encuentra en el mismo directorio en el que se encuentra guardada la página, tendremos que escribir:
...
<body background="fondo.gif">
...
</body>
</html>

En el caso de que la imagen no se encuentre en el mismo directorio que la página, y se encuentre dentro de la
carpeta imagenes, que sí se encuentra en el mismo directorio que la página, tendremos que escribir:
...
<body background="imagenes/fondo.gif">
...
</body>
</html>
A través de la etiqueta <body> también es posible establecer el color del texto de la página a través del atributo
text.
Por ejemplo, para hacer que el color del texto de una página sea de color rojo, tendremos que escribir:
...
<body text="#FF0000">
...
</body>
</html>

Entre el borde de la ventana y el contenido de la página existe un margen, cuyo tamaño en píxeles puede
modificarse mediante los atributos leftmargin (margen izquierdo) y topmargin (margen superior). Estos atributos
no funcionan para el navegador Netscape, pero sí los atributos marginwidth (anchura del margen) y
marginheight (altura del margen).
Estos atributos suelen utilizarse para eliminar el margen, para lo cual deben valer cero.
Por ejemplo, para hacer que una página no tenga margen superior, y tenga un margen izquierdo de 20 píxeles,
tendremos que escribir:
...
<body leftmargin="20" topmargin="0" marginwidth="20" marginheight="0" >
...

7
 </body>
</html>

Comentarios
En ocasiones podemos desear añadir comentarios aclaratorios dentro del código, de manera que no sean
visualizados en el navegador, pero sí a la hora de editar el documento.
Para insertar comentarios dentro del código, basta con insertar el texto entre <!-- y //-->.
Todo el código que se inserte entre estos símbolos no será visualizado en los navegadores.
Por ejemplo, para insertar el texto siguiente con un comentario:
¡Bienvenidos, esta es mi 1ª página!
Habría que escribir:

<!-- A continuación aparecerá una línea de texto//-->

&iexcl;Bienvenidos, esta es mi 1&ordf; p&aacute;gina!

Saltos de línea <br>

En general, cuando trabajamos con un editor de texto se produce un salto de línea al pulsar la tecla INTRO. Si
pulsamos INTRO en un documento HTML, el salto de línea se producirá en el código, pero no se mostrará en el
navegador. Para que se produzca el salto de línea en el navegador, en lugar de pulsar la tecla INTRO hay que
insertar la etiqueta <br> donde se desee que se produzca el salto. La etiqueta <br> no precisa ninguna etiqueta de
cierre. No hay que insertar la etiqueta </br> después de ella, ya que dicha etiqueta no existe.

Texto preformateado <pre>

Una forma de asegurarnos de que el texto aparezca en el navegador tal cual ha sido insertado dentro del código,
es utilizando las etiquetas <pre> y </pre>.

Utilizando estas etiquetas podemos tener la seguridad de que en el navegador se mostrarán todos los espacios en
blanco que se inserten en el texto, así como todos los saltos de línea resultantes de pulsar la tecla INTRO, sin la
necesidad de utilizar la etiqueta <br>.

Por ejemplo, para insertar el texto:

Hola, BIENVENIDOS
esta ES MI PÁGINA WEB
y esto un texto preformateado

Habría que escribir:

<pre>Hola, BIENVENIDOS
esta ES MI PÁGINA WEB
y esto un texto preformateado</pre>

El inconveniente de esta etiqueta es que entre las etiquetas <pre> y </pre> no se pueden incluir las etiquetas
<img> (para incluir imágenes), <object> (para incluir objetos como animaciones), <big>, <small>, <sub> ni
<sup> (las veremos en este tema).

8
Separadores <hr>
El elemento que suele utilizarse para separar secciones dentro de una misma página es la regla horizontal. Para
insertar una regla horizontal hay que insertar la etiqueta <hr>. Dicha etiqueta no precisa ninguna etiqueta de
cierre.

Es posible especificar algunos atributos de la regla horizontal:

Atributo Significado Posibles valores

left (izquierda)
align alineación de la regla dentro de la página right (derecha)
center (centro)
un número, acompañado de % cuando se desee
width ancho de la regla
que sea en porcentaje
size alto de la regla un número
noshade eliminar el sombreado de la regla no puede tomar valores

Sangrado de texto <blockquote>

La sangría es una especie de margen que se establece a ambos lados del texto. Para que un texto aparezca
sangrado, se inserta entre las etiquetas <blockquote> y </blockquote>.

Esta etiqueta en un principio se definió para delimitar citas pero que como la mayoría de los navegadores
resuelven la cita incluyendo un sangrado del texto, su uso para sangrar texto se ha generalizado.
El uso de la etiqueta <blockquote> obliga a que el texto aparezca en una nueva línea.

Insertando el texto entre varias etiquetas <blockquote> y </blockquote> se consigue que los márgenes sean
mayores.

Formatear el texto <font> ...

Las propiedades del texto pueden modificarse a través de la etiqueta <font>. Para ello, podemos insertar el texto
entre las etiquetas <font> y </font>, especificando algunos de los atributos de la etiqueta:

:Atributo Significado Posibles valores

face fuente nombre de la fuente, o fuentes
color color del texto número hexadecimal o texto predefinido
valores del 1 al 7, siendo por defecto el 3,
size tamaño del texto o desplazamiento respecto al tamaño por defecto,
añadiendo + o - delante del valor

Por ejemplo, para insertar el texto:

Bienvenidos a Informática II

9
Habría que escribir:

<font color="#993366" size="14" face="Comic Sans MS, Arial, MS Sans Serif">Bienvenidos a

Informatica II</font>

También es posible definir una fuente para todo el documento. Para ello, hay que insertar la etiqueta
<basefont> después de la etiqueta <body>.

La etiqueta <basefont> no necesita una etiqueta de cierre, y permite modificar los mismos atributos del texto
que la etiqueta <font>.

Por ejemplo:

<body>

<basefont color="#006699" size="4" face="Arial">

...

Este código haría que la fuente del documento fuera por defecto de color azul, de tamaño 14 y Arial. Si
después de indicar la etiqueta <basefont> o <font>, el navegador encuentra otra etiqueta <font>, la que
prevalece es siempre la última que se encuentra.

Resaltado del texto <b> ...

Existen una serie de etiquetas que permiten aplicar diferentes estilos al texto que se encuentra entre ellas, y
generalmente se utilizan para resaltarlo. Estos estilos pueden agruparse según vayan asociados al tipo de letra o
a la información que represente el texto. No hay que olvidar que todas estas etiquetas necesitan una etiqueta de
cierre, y que pueden aplicarse varias etiquetas al mismo texto.

A continuación se muestran algunas etiquetas asociadas al tipo de letra:

Etiqueta Significado Ejemplo
<b> negrita curso HTML
<i> cursiva curso HTML
<u> subrayado curso HTML
<s> tachado curso HTML
<tt> teletipo (máquina de escribir) curso HTML
<big> aumenta el tamaño de la fuente curso HTML
<small> disminuye el tamaño de la fuente curso HTML
<cite> cita curso HTML
<code> ejemplo de código curso HTML
<dfn> definición curso HTML
<del> eliminado
<em> énfasis curso HTML
<ins> insertado curso HTML
<kbd> teclado curso HTML
<samp> muestra curso HTML

10
 <strong> destacado curso HTML
<sub> subíndice curso HTML
<sup> superíndice curso HTML
<var> variable curso HTML

Las etiquetas más utilizadas son las asociadas al tipo de letra, ya que son más fáciles de recordar, y en muchos
casos los resultados son los mismos que los de aplicar una etiqueta diferente. Por ejemplo, el resultado de
aplicar las etiquetas <b> y <strong> es el mismo. Incluso a veces algunos estilos asociados al tipo de
información pueden representarse de forma distinta según el navegador.

Párrafos <p> ...

El texto de una página puede agruparse en párrafos. Para ello, el texto de cada uno de los párrafos debe
insertarse entre las etiquetas <p> y </p>.

No es necesario insertar la etiqueta <br> para que un nuevo párrafo aparezca debajo del anterior, ya que las
etiquetas <p> y </p> hacen que se cambie de línea automáticamente.

También es posible cambiar la alineación del texto de cada párrafo. Para ello se modifica el valor del atributo
align, cuyos valores pueden ser left (izquierda), right (derecha), center (centrado) o justify (justificado).

Encabezados <h1> ...

Existen una serie de encabezados que suelen utilizarse para establecer títulos dentro de una página. La
diferencia entre los distintos tipos de encabezado es el tamaño de la letra, el tipo de resaltado, y la separación
existente entre el texto y los elementos que tiene encima y debajo de él. Hay que tener en cuanta que el
navegador del usuario es el que aplicará el estilo del encabezado por lo que el mismo título se puede visualizar
de forma diferente según el navegador.

Existen seis etiquetas que representan seis tipos de cabeceras distintas. Todas estas etiquetas precisan una
etiqueta de cierre.

A continuación se muestran los distintos encabezados existentes:

Etiqueta Ejemplo

<H1> Título 1: HTML

<H2>
Título 2: HTML

<H3> Título 3: HTML

<H4> Título 4: HTML

<H5> Título 5: HTML

<H6> Título 6: HTML

Marquesinas <marquee>

11
 Las marquesinas son líneas de texto que pueden desplazarse de un lado a otro de la ventana en forma de
línea.

Para insertar una marquesina, es necesario insertar el texto entre las etiquetas <marquee> y </marquee>.

La marquesina, por defecto, se desplaza de derecha a izquierda indefinidamente, pero si lo deseas puedes
hacer que estas propiedades varíen.

A través del atributo behavior puede modificarse el tipo de movimiento. Puede tomar los valores alternate
(de lado a lado de la ventana, como si rebotara en los extremos), scroll (de un lado a otro, continuamente) o
slide (de un lado a otro, pero una sola vez).

A través del atributo direction puede modificarse la dirección en la que se moverá el texto. Puede tomar los
valores down (de arriba a abajo), up (de abajo a arriba), left (de derecha a izquierda) o left (de izquierda a
derecha).

También es posible establecer un color de fondo, a través del atributo bgcolor.

Elemento de lista <li> Cada uno de los elementos de una lista ha de insertarse entre las etiquetas <li> y </li>.
Por ejemplo, para insertar en una lista los siguientes elementos:
 Perro
 Gato
 Periquito

Habría que escribir:

...
<li>Perro</li>
<li>Gato</li>
<li>Periquito</li>
...

Todos los elementos de la lista deberán encontrarse entre las etiquetas que indiquen si la lista es desordenada
(con viñetas) u ordenada (numerada) como veremos a continuación.

Lista desordenada <ul>

Para que una lista sea desordenada, sus elementos deberán encontrarse entre las etiquetas <ul> y </ul>.

A través del atributo type es posible elegir el tipo de viñeta, que puede ser circle (círculo), disc (disco) o square
(cuadrado).

Lista ordenada <ol>

Para que una lista sea ordenada, sus elementos deberán encontrarse entre las etiquetas <ol> y </ol>.

A través del atributo type es posible elegir el tipo de numeración, que puede ser 1 (números), a (letras
minúsculas), A (letras mayúsculas), i (numeros romanos en minúsculas) o I (números romanos en mayúsculas).

Por ejemplo, para insertar la siguiente lista:

i. Perro
ii. Gato
iii. Periquito

Habría que escribir:

12
<ol type="i"><li>Perro</li>
<li>Gato</li><li>Periquito</li></ol>

Anidar listas

Es posible anidar listas dentro de otras. Estas listas pueden ser tanto desordenadas como ordenadas. Por
ejemplo, para insertar la siguiente lista:
1. Lunes
 Ingles
 Frances
2. Martes
1. Ingles
A. Corrección de ejercicios
B. Proponer ejercicios

Habría que escribir:

<ol>
<li>Lunes
<ul type="square">
<li>Ingles</li>
<li>Frances</li>
</ul>
</li>
<li>Martes
<ol>
<li>Ingles</li>
<ol type="A">
<li>Correccion de ejercicios</li>
<li>Proponer ejercicios </li>
</ol></li></ol></li></ol>

Empezamos por la lista ordenada (la más externa) <ol>, esta lista tiene dos elementos <li>Lunes y <li>Martes.

El elemento Lunes contiene una lista desordenada con tipo cuadrado <ul type="square"> que tiene dos
elementos <li>Ingles</li> y <li>Frances</li>.

El elemento Martes contiene una lista ordenada de un sólo elemento <li>Ingles</li> elemento que contiene a
su vez una lista desordenada de tipo letras mayúsculas <ol type="A"> con los dos elementos <li>Correccion de
ejercicios</li> y <li>Proponer ejercicios </li>

HIPERENLACES.

Un hiperenlace, hipervínculo, o vínculo, no es más que un enlace, que al ser pulsado lleva de una
página o archivo. Aquellos elementos (texto, imágenes, etc.) sobre los que se desee insertar un enlace
han de encontrarse entre las etiquetas <a> y </a>.

A través del atributo href se especifica la página a la que está asociado el enlace, la página que se
visualizará cuando el usuario haga clic en el enlace.

13
Por ejemplo, para insertar el enlace:

Visita www.inframor.edu.sv

Habría que escribir:

<a href="http://www.inframor.edu.sv">Visita www.inframor.edu.sv</a>

TIPOS DE REFERENCIAS.

Existen diferentes formas de expresar una referencia a una página a través del atributo href.

 Referencia absoluta:

Conduce a una ubicación externa al sitio en el que se encuentra el documento. La ubicación es en

Internet, en este caso hay que empezar la referencia por http:// , el nombre del dominio y algunas
veces el nombre de la página. Si no se escribe el nombre de la página se cargará la página de inicio
asociada al dominio.

Por ejemplo, "http://www.inframor.edu.sv" tendrá el mismo efecto que

http://www.inframor.edu.sv/index.htm

Para insertar el enlace:

Visita www.inframor.edu.sv.com

Habría que escribir:

<a href="http://www.inframor.edu.sv">Visita www.inframor.edu.sv.com</a>

 Referencia relativa al sitio:

Conduce a un documento situado dentro del mismo sitio que el documento actual. Un sitio web es un
conjunto de archivos y carpetas, relacionados entre sí, con un diseño similar o un objetivo común,
estando todos ellos dentro de una misma carpeta, conocida como carpeta raíz del sitio.Por ejemplo,
teniendo en cuenta que el documento t_4_1.htm se encuentra directamente dentro de la carpeta raíz
del sitio, para insertar el enlace:

Enlace a Tema 4: Hiperenlaces

Habría que escribir:

<a href="/t_4_1.htm">Enlace a Tema 4: Hiperenlaces</a>

Observa como aparece el símbolo "/" delante del nombre del documento. Esta barra inclinada indica
la carpeta raíz del sitio. Si el documento t_4_1.htm se encontrara, por ejemplo, dentro de una carpeta
llamada tema4, y esta estuviera dentro de la carpeta raíz del sitio, habría que escribir:

<a href="/tema4/t_4_1.htm">Enlace a Tema 4: Hiperenlaces</a>

14
  Referencia relativa al documento:

Conduce a un documento situado dentro del mismo sitio que el documento actual, pero partiendo del
directorio en el que se encuentra el actual. Por ejemplo, teniendo en cuenta que el documento
t_4_1.htm se encuentra dentro de la misma carpeta que el documento actual, para insertar el enlace:

Enlace a Tema 4: Hiperenlaces

Habría que escribir:

<a href="t_4_1.htm">Enlace a Tema 4: Hiperenlaces</a>

Observa que en este caso no aparece el símbolo "/" delante del nombre del documento. Si el
documento t_4_1.htm se encontrara, por ejemplo, dentro de una carpeta llamada tema4, y esta
estuviera dentro de la misma carpeta que el documento actual, habría que escribir:

<a href="tema4/t_4_1.htm">Enlace a Tema 4: Hiperenlaces</a>

 Punto de fijación:

Conduce a un punto dentro de un documento, ya sea dentro del actual o de otro diferente. Para ello el
vínculo debe ser "nombre_de_documento#nombre_de_punto".

Por ejemplo, para insertar el enlace:

Punto de fijacion Tipos de enlaces

Habría que escribir:

<a href="t_4_1.htm#tipos">Punto de fijacion Tipos de enlaces</a>

Teniendo en cuenta que el documento se llama t_4_1.htm y el punto de fijación se llama tipos. Al
final de este tema verás cómo definir el punto de fijación.

En general, un texto que tiene un vínculo asociado suele aparecer subrayado. Cuando el vínculo está
definido sobre una imagen, en el borde aparecen una serie de puntitos al pulsar sobre ella. Cuando el
vínculo está definido sobre una zona de una imagen (un mapa), aparece el contorno de esa zona.

Aquí tienes dos vínculos similares de ejemplo:

Como puedes ver, la segunda imagen que hace de vínculo contiene un recuadro alrededor. Esto ocurre
debido a que se ha establecido un borde para la imagen, como veremos más adelante.

15
Tanto si el vínculo se asigna a un texto como a una imagen, el cursor cambia de forma al situarse
encima del vínculo. Suele adquirir la apariencia de una mano señalando.

Normalmente los vínculos de texto cambian de color cuando el enlace ha sido ya pulsado o cuando el
puntero del ratón se posiciona sobre él, estos cambios están predefinidos en cada navegador, pero
nosotros podemos cambiar esos colores.

Los colores de los vínculos pueden especificarse a través de las propiedades de la página, en la
etiqueta <body>. Estos colores se asignan a través de los atributos link (vínculo), alink (vínculo
activo), y vlink (vínculo visitado). link permite determinar el color de los enlaces sin visitar (enlace
que no ha sido pulsado ninguna vez). alink permite determinar el color del enlace activo (enlace que
acaba de ser pulsado). vlink permite determinar el color de los enlaces visitados (enlaces que ya han
sido pulsados). Por ejemplo, al insertar el siguiente código:
...
<body link="#FF0000" vlink="#FF0099" alink="#FF9900">
...
<a href="http://www.inframor.edu.sv" target= "_blank"> www.inframor.edu.sv </a>
...

Mientras no se visite la página www.inframor.edu.sv , el enlace será de color rojo (#FF0000):

www.inframor.edu.sv

Mientras la página www.inframor.edu.sv sea la última visitada, el enlace será de color fucsia
(#FF0099):

www.inframor.edu.sv

Cuando se haya visitado la página www.inframor.edu.sv , el enlace será de color naranja (#FF9900):

www.inframor.edu.sv

 Vínculo a ficheros para descarga:

El valor del atributo href normalmente será una página web (con extensión htm, html, asp, php...)
pero también puede ser un fichero comprimido, una hoja de Excel, un documento Word, un
documento con extensión pdf. Cuando el enlace no es a una página Web nos aparecerá el cuadro de
diálogo que seguro habrás visto alguna vez en el que el navegador le pide al usuario permiso para
descargar el fichero en su ordenador.

El navegador reconoce algunas extensiones como asociadas a un determinado programa (por ejemplo
la extensión .doc está asociada al programa Word, .pdf al programa Acrobar Reader, .xls al programa

16
Excel...) en este caso en el cuadro de diálogo aparece una nueva opción, la de abrir el fichero sin
descargarlo en el disco duro del usuario. Para nombrar el fichero podemos utilizar según el caso, una
referencia externa, una referencia relativa al sitio o una referencia relativa al documento.

IMAGEN (IMG)

Todas las páginas web acostumbran a tener un cierto número de imágenes, que permiten mejorar su
apariencia, o dotarla de una mayor información visual. Para insertar una imagen es necesario insertar
la etiqueta <img>. Dicha etiqueta no necesita etiqueta de cierre. El nombre de la imagen ha de
especificarse a través del atributo src. Por ejemplo, para insertar la siguiente imagen:

Habría que escribir:

<img src="imagenes/logo_animales.gif">

Teniendo en cuentra que la imagen se llama logo_animales.gif y que está dentro de la carpeta
imagenes, que se encuentra en el mismo directorio que el documento actual (referencia relativa al
documento). Para trabajar de una forma más sencilla y ordenada, es recomendable que todos los
documentos html se encuentren en un mismo directorio, y que dentro de este directorio existan
diferentes carpetas para agrupar otros objetos, como puede ser una carpeta destinada a almacenar
imagenes, o una carpeta destinada a almacenar archivos de audio, etc.

TAMAÑO DE UNA IMAGEN.

Cuando insertamos una imagen, esta se muestra en los navegadores con su tamaño original, pero por
diversos motivos puede interesarnos modificar dicho tamaño. A través de los atributos width
(anchura) y height (altura) puede modificarse el tamaño de la imagen. Dicho cambio de tamaño no se
aplica directamente sobre el archivo de imagen, sino que lo que varía es la visualización de la imagen
en el navegador.

El valor que pueden tomar los atributos width y height ha de ser un número, acompañado de %
cuando se desee que sea en porcentaje con respecto a la página. Por ejemplo, para insertar la siguiente
imagen (cuyo tamaño original era de 122 píxeles de anchura y 71 píxeles de altura) con 200 píxeles
de anchura y 80 píxeles de altura:

Habría que escribir:

17
<img src="imagenes/logo_animales.gif" width="200" height="80">

Al modificar el tamaño de la imagen a través de estos atributos es muy probable que la imagen
resultante no sea de buena calidad.

Formatos de imagen

Las imágenes pueden ser de muchos formatos diferentes: bmp, gif, jpg, etc. Pero no todos estos
formatos son adecuados para una web, debido a que pueden ocupar mucha memoria o a que no son
compatibles con algunos navegadores.

Los formatos más utilizados son el GIF y el JPG, que a pesar de ser imágenes de menor calidad que
las imágenes BMP, son más recomendables debido a que ocupan menos memoria. Vamos a ver un
poco más sobre estos formatos:

Formato GIF:

Utilizan un máximo de 256 colores, y son recomendables para imágenes con grandes áreas de un
mismo color o de tonos no continuos. Suelen utilizarse con gran frecuencia, ya que permiten definir
transparencias y animación.

Formato JPG:

Las imágenes son de mayor calidad que las GIF, al poder contener millones de colores, pero el
tamaño de la imagen es mayor y tarda más en descargarse se utilizan más para fotos.

Puedes incluir imágenes en otros formatos, que podrán ser visualizadas en algunos navegadores. Este
es el caso de las imágenes BMP y PNG.

Puedes cambiar el formato de las imágenes mediante la utilización de algún programa de tratamiento
de imágenes, como pueden ser Fireworks, Photoshop, Corel Draw, etc. Por ejemplo el Fireworks de
Macromedia tiene una opción, exportar a tipo gif que reduce considerablemente la ocupación de la
imagen sin perder en calidad (siempre que la imagen se adecue al formato).

Dependiendo del programa utilizado existirá una mayor o menor cantidad de opciones a la hora de
modificar las imágenes. Para realizar modificaciones sencillas, como la de recortar las imágenes y
cambiar los colores, puedes utilizar incluso el programa Paint de Windows.

Borde de una imagen

En general, al visualizar una página en un navegador las imágenes aparecen sin ningún borde
alrededor, pero es posible establecer uno a través del atributo border.

El atributo border puede tomar valores numéricos, que indican el grosor en píxeles del borde.

<img src="imagenes/logo_animales.gif" border="4" >

18
Hay que tener en cuenta que el borde de la imagen siempre será de color negro, a no ser que la
imagen contenga un enlace, en cuyo caso el color del borde será el color establecido para los
vínculos. Por ejemplo, para insertar la siguiente imagen con borde y con un enlace:

<a href="http://www.aulaclic.com" target ="_blank" ><img

src="imagenes/logo_animales.gif" border="4" ></a>

Si se desea establecer un vínculo sobre una imagen y no se desea que se muestre el borde (que
por su color indica que existe dicho vínculo), es necesario establecer border="0".

ALINEACION DE UNA IMAGEN

La alineación de las imágenes se establece a través del atributo align. Este atributo indica la
alineación de las imágenes con respecto a la línea de texto en la que se encuentran. Los valores del
atributo align pueden ser los siguientes:

Valor Significado El resultado de aplicar uno u otro valor puede tener el mismo
resultado, como ocurre con los valores baseline y bottom, o con los
valores texttop y top.
absbottom inferior absoluta
TABLAS.
absmiddle medio absoluta Las tablas están formadas por celdas, que son los recuadros que se
obtienen como resultado de la intersección entre una fila y una
columna. Para crear una tabla hay que insertar las etiquetas <table> y
baseline línea de base </table>. Entre dichas etiquetas habrá que especificar las filas y
columnas que formarán la tabla.

bottom inferior FILA (TR)

Es necesario insertar las etiquetas <tr> y </tr> por cada una de las
filas de la tabla. Estas etiquetas deberán insertarse entre las etiquetas
left izquierda <table> y </table>. Por ejemplo, para crear una tabla con cinco filas
escribiríamos:

middle medio <table>

<tr>...</tr>
<tr>...</tr>
right derecha <tr>...</tr>
<tr>...</tr>
<tr>...</tr>
</table>
texttop texto superior
COLUMNA O CELDA (TD) Para crear una tabla no basta con
especificar el número de filas, es necesario también especificar el
top superior número de columnas. Una celda es el resultado de la intersección entre
una fila y una columna, por lo que podremos especificar el número de
celdas por fila, que equivale a especificar el número de columnas por fila.

Es necesario insertar las etiquetas <td> y </td> por cada una de las celdas que compongan cada una
de las filas de la tabla. Por lo tanto, habrá que insertar esas etiquetas entre las etiquetas <tr> y </tr>.

19
Entre las etiquetas <td> y </td> se podrá especificar el contenido de cada una de las celdas. Por
ejemplo, para insertar la siguiente tabla:

Sábado Domingo
Curso HTML Curso Dreamweaver
Curso Frontpage Curso Flash

Habría que escribir:

<table border="1">

<tr>
<td>Sabado</td>
<td>Domingo</td>
</tr>
<tr>
<td>Curso HTML</td>

<td>Curso Dreamweaver</td> </tr>

<tr>
<td>Curso Frontpage</td>

<td>Curso Flash</td>

</tr>
</table>

FORMATO DE LA TABLA.
Es posible modificar los siguientes atributos de una tabla:

Atributo Significado Posibles valores

un número, acompañado de % cuando se
Width ancho de la tabla
desee que sea en porcentaje
un número, acompañado de % cuando se
Height altura de la tabla
desee que sea en porcentaje
espacio entre el contenido de las
cellpadding un número
celdas y el borde
cellspacing espacio entre celdas un número
border grosor del borde un número
Align alineación de la tabla dentro de la left (izquierda)
página right (derecha)

20
 center (centro)
bgcolor color de fondo número hexadecimal
background imagen de fondo número hexadecimal
bordercolor color del borde número hexadecimal

FORMULARIOS

Un formulario es un elemento que permite recoger datos introducidos por el usuario. Los formularios
se utilizan para conocer las opiniones, dudas, y otra serie de datos sobre los usuarios, para introducir
pedidos a través de la red, tienen multitud de aplicaciones. Un formulario está formado, entre otras
cosas, por etiquetas, campos de texto, menús desplegables, y botones. Es muy recomendable utilizar
tablas para organizar los elementos de los formularios. Utilizando tablas se consigue una mejor
distribución de los elementos del formulario, lo que facilita su comprensión y mejora su apariencia.

Los formularios se insertan a través de las etiquetas <form> y </form>. Entre dichas etiquetas habrá
que insertar los diferentes objetos que formarán el formulario. la etiqueta <form> tiene los siguientes
atributos:

El atributo action indica una dirección de correo electrónico a la que mandar el formulario, o la
dirección del programa que se encargará de procesar el contenido del formulario.

El atributo enctype indica el modo en que será cifrada la información para su envío. Por defecto tiene
el valor application/x-www-form-urlencoded.

El atributo method indica el metodo mediante el que se transferirán las variables del formulario. Su
valor puede ser get o post.

El valor get se utiliza cuando no se van a producir cambios en ningún documento o programa que no
sea el navegador del usuario que pretende mandar el formulario, como ocurre cuando se realizan
consultas sobre una base de datos.

El valor post se utiliza cuando sí se van a producir cambios, como ocurre cuando el usuario manda
datos que deben ser almacenados en una base de datos.

21
Se recomienda utilizar el valor post.

Por ejemplo, podríamos insertar un formulario escribiendo el siguiente código:

<form action="mailto:[email protected]" method="post" enctype="text/plain" >

...
</form>

AREAS DE TEXTO.

Las áreas de texto permiten a los usuarios insertar varias líneas de texto. Por ello, suelen utilizarse
para que incluyan comentarios. Para insertar un área de texto es necesario incluir las etiquetas
<textarea> y </textarea> entre las etiquetas <form> y </form> del formulario. Para que el área de
texto tenga algún valor inicial, habrá que insertarlo entre las etiquetas <textarea> y </textarea>. El
atributo name indica el nombre del área de texto. Es necesario dar nombres diferentes a cada uno de
los elementos de un formulario, para poder identificarlos a la hora de procesarlos. El atributo rows
indica el número de líneas que podrán ser visualizadas en el área de texto por lo que determina al alto
del área de texto. El atributo cols indica el número de caracteres por línea que podrán ser visualizados
en el área de texto por lo que determina al ancho del área de texto.

Gracias a las barras de desplazamiento, es posible insertar más líneas de las especificadas en el
atributo rows, y más caracteres por línea de los especificados en el atributo cols.

Por ejemplo, para insertar el área de texto:

Habría que escribir: <textarea name="ejemploarea" cols="30" rows="3">Escribe el texto que

quieras</textarea>
ELEMENTOS DE ENTRADA.

Para insertar un elemento de entrada es necesario incluir la etiqueta <input> entre las etiquetas
<form> y </form> del formulario. El atributo name indica el nombre que se desea dar al elemento
de entrada, mediante el cual será evaluado, y el atributo type indica el tipo de elemento de entrada.
Vamos a ver los diferentes tipos de elementos de entrada, y el resto de atributos que pueden definirse
para cada uno de ellos.

CAMPO DE TEXTO:

Para insertar un campo de texto, el atributo type debe tener el valor text. El atributo size indica el
número de caracteres que podrán ser visualizados en el campo de texto, determina el ancho de la caja.
El atributo maxlenght indica el número de caracteres que podrán ser insertados en el campo de texto.
El atributo value indica el valor inicial del campo de texto.

Por ejemplo, para insertar el campo de texto:

22
Habría que escribir:

<input name="campo" type="text" value="Campo de texto" size="20" maxlength="15">

CAMPO DE CONTRASEÑA.

Para insertar un campo de contraseña, el atributo type debe tener el valor password. El resto de
atributos son los mismos que para un campo de texto normal. La única diferencia es que todas las
letras escritas en el campo de contraseña serán visualizadas como asteriscos.

Por ejemplo, para insertar el campo de contraseña:

Habría que escribir:

<input name="contra" type="password" value="contraseña" size="20" maxlength="15">

Botón:

Para insertar un botón, el atributo type debe tener el valor submit, restore o button. Si el valor es
submit, al pulsar sobre el botón se enviará el formulario. Si el valor es restore, al pulsar sobre el
botón se restablecerá el formulario, borrándose todos los campos del formulario que hayan sido
modificados y adquiriendo su valor inicial. Si el valor es button, al pulsar sobre el botón no se
realizará ninguna acción. El atributo value indica el texto que mostrará el botón. Por ejemplo, para
insertar el botón:

Habría que escribir:

<input name="boton" type="submit" value="Enviar">

Casilla de verificación:

Para insertar una casilla de verificación, el atributo type debe tener el valor checkbox.

El atributo value indica el valor asociado a la casilla de verificación. Es necesario poner este atributo,
aunque el usuario no pueda ver su valor. Es el valor a enviar.

La aparición del atributo checked indica que la casilla aparecerá activada inicialmente. Este atributo
no toma valores.

Por ejemplo, para insertar la casilla:

Habría que escribir:

23
<input name="casilla" type="checkbox" value="acepto" checked>

Botón de opción:

Para insertar un botón de opción, el atributo type debe tener el valor radio.

El atributo value indica el valor asociado al botón de opción. Es necesario poner este atributo, aunque
el usuario no pueda ver su valor. Es el valor a enviar.

La aparición del atributo checked indica que el botón aparecerá activado inicialmente. Este atributo
no toma valores.

Los botones de opción se utilizan cuando se desea que una variable del formulario pueda tomar un
solo valor de entre varios posibles. Para ello, se insertan varios botones de opción con el mismo
nombre (que indica la variable) y con distintos valores. Sólamente uno de estos botones podrá estar
activado, el que esté activado cuando se envia el formulario, su valor será el que tendrá la variable.

Por ejemplo, para insertar los botones de opción:

Habría que escribir:

<input name="prefiere" type="radio" value="estudiar" checked>

<input name="prefiere" type="radio" value="trabajar">

Cuando se envíe el formulario, si el primer botón está activado la variable prefiere será igual a
estudiar, si es el segundo el activado, la variable prefiere valdrá trabajar. Observa que lo que
ponemos como valor no aparece escrito en la página es un datos interno.

<input name="prefiere" type="radio" value="estudiar" checked>

<input name="prefiere" type="radio" value="trabajar">

Cuando se envíe el formulario, si el primer botón está activado la variable prefiere será igual a
estudiar, si es el segundo el activado, la variable prefiere valdrá trabajar. Observa que lo que
ponemos como valor no aparece escrito en la página es un datos interno.

<input name="prefiere" type="radio" value="estudiar" checked>

<input name="prefiere" type="radio" value="trabajar">

Cuando se envíe el formulario, si el primer botón está activado la variable prefiere será igual a
estudiar, si es el segundo el activado, la variable prefiere valdrá trabajar. Observa que lo que
ponemos como valor no aparece escrito en la página es un datos interno.

Existen otros tipos como el tipo hidden que sirve para definir un campo oculto, campo que no ve el
usuario, en este caso habría que incluir el atributo value para que el formulario pase ese valor al
programa que recoge los datos del formulario.

24
Para que el usuario envie un fichero suyo a través del formulario tenemos el tipo file, este tipo hay
que utilizarlo con mucho cuidado ya que si permitimos que cualquier internauta nos envie cualquier
tipo de fichero nos podríamos encontrar con sorpresas no siempre agradables.

CAMPOS DE SELECCIÓN.

Los campos de selección se utilizan para insertar menús y listas desplegables.

Para insertar uno de estos menús o listas es necesario insertar las etiquetas <select> y </select> en un
formulario.

El atributo name indica el nombre del menú o lista será el nombre de la variable que contendrá el
valor seleccionado.

El atributo size indica el número de elementos de la lista que pueden ser visualizados al mismo
tiempo, determina el alto de la lista.

La aparición del atributo multiple indica que el usuario podrá seleccionar varios elementos de la lista
al mismo tiempo, ayudándose de la tecla Ctrl. Este atributo no toma valores.

La aparición del atributo disabled indica que la lista estará desactivada, por lo que el usuario no
podrá seleccionar sus elementos. Este atributo tampoco toma valores.

Cada uno de los elementos de la lista ha de insertarse entre las etiquetas <option> y </option>.

El atributo value indica el valor a enviar si se selecciona el elemento. Si no se especifica este atributo,
se enviará el texto de la opción, que se encuentra entre las etiquetas <option> y </option>.

La aparición del atributo selected indica que el elemento aparecerá seleccionado. Este atributo no
toma valores.

Por ejemplo, para insertar el menú:

Habría que escribir:

<select name="mascota">
<option selected>--- Elige animal ---</option>
<option>Perro</option>
<option>Gato</option>
</select>

Y para insertar la lista:

25
Habría que escribir:
<select name="animal" size="3" multiple>
<option selected>---Elige animales---</option>
<option value="ave">Loro</option>
<option>Perro</option>
<option>Gato</option>
<option>Pez</option>
</select>

VIDEO Y AUDIO.

En ocasiones puede interesar incluir algún vídeo en una página web, pero hay que tener en cuenta que
los vídeos suelen ocupar mucho espacio en disco, y por lo tanto, precisan de mucho tiempo para
descargarse.

Los formatos de vídeo que suelen utilizarse en Internet son el AVI, el MPEG y el MOV.

La etiqueta <embed> es la que se utiliza para insertar archivos de vídeo. Puede incluirse la etiqueta
de cierre, pero en realidad no es necesaria, ya que entre las etiquetas <embed> y </embed> no hay
que insertar nada.

A través del atributo src hay que especificar la ruta y el nombre del archivo de vídeo.

Los videos insertados a través de esta etiqueta se reproducen automáticamente al cargarse la página, y
se reproducen solamente una vez. Esto puede cambiarse a través de los atributos autostart y loop.

El atributo autostart indica si el archivo se reproducirá automáticamente al cargarse la página, y

puede tomar los valores true o false.

El atributo loop indica si el archivo se reproducirá continuamente en un bucle, y también puede tomar
los valores true o false.

Los atributos width (anchura) y height (altura) sirven para especificar el tamaño de la consola de
control de vídeo. Estos atributos pueden tomar como valor un número, que indica el tamaño en
píxeles. Si no se especifican estos atributos, la consola de control de vídeo se mostrará con el tamaño
más adecuado al tamaño del vídeo.

A la derecha tienes un ejemplo de un archivo de video, para el que se muestran los controles de video.
Puedes reproducirlo pulsando sobre los controles.

Para insertar el vídeo anterior, se podría escribir:

<embed src="varios/cotorra.avi" autostart="false" loop="true">

26
Existen algunos navegadores que no reconocen la etiqueta <bgsound>, por lo que no es posible
utilizar esta etiqueta para incluir un sonido de fondo. En su lugar, se utiliza la etiqueta <embed>, que
funciona del mismo modo para los archivos de audio y de vídeo.

No hay que olvidar que para los archivos de audio también se mostrarán los controles de
reproducción.

A la derecha tienes un ejemplo de un archivo de sonido, para el que se muestran los controles de
audio. Si lo deseas, puedes reproducirlo pulsando sobre los controles.

Para insertar el archivo de audio anterior, se podría escribir:

<embed src="varios/audio.mid" autostart="false" loop="true">

Si no se desea que se muestren los controles de un archivo de audio, porque va a ser utilizado como
sonido de fondo, puede hacerse que los atributos width (anchura) y height (altura) valgan cero.

También puede utilizarse el atributo hidden, con los valores true o false. Cuando su valor estrue, se
ocultan los controles de reproducción.

Por ejemplo, para insertar sonido de fondo se podría escribir:

<embed src="varios/audio.mid" autostart="true" loop="true" hidden="true" >

O también:
<embed src="varios/audio.mid" autostart="true" loop="true" width="0" height="0">
NOTA:
Hay que tomar en cuenta que para que todos estos cambios en la página sean realizados como lo de
inserter imagines, videos, link y otros todo tiene que estar en una misma carpeta que tenga el mismo
nombre de la pagina que estamos creando.

Ejemplo:

Si la página se llama: tarea de informática II.html

Entonces la carpeta tiene que llamarse: tarea de informática II

27