Guia de repaso html11

1. QUÉ ES HTML? (Hyper Text Markup Language)

HTML es el lenguaje con el que se escriben las páginas web. Las páginas web pueden ser vistas
por el usuario mediante un tipo de aplicación llamada navegador. Podemos decir por lo tanto que
el HTML es el lenguaje usado por los navegadores para mostrar las páginas webs al
usuario, siendo hoy en día la interface más extendida en la red. Este lenguaje nos permite
aglutinar textos, sonidos e imágenes y combinarlos a nuestro gusto. Además, y es aquí donde
reside su ventaja con respecto a libros o revistas, el HTML nos permite la introducción de
referencias a otras páginas por medio de los enlaces hipertexto.

2. PASOS PARA CREAR UN DOCUMENTO HTML

Para crear un documento HTML debo:

 Abrir el botón menú Inicio en la barra de tareas
 Programas
 Accesorios
 Bloc de Notas

3. PASOS PARA GUARDAR UN DOCUMENTO HTML
 Clic en el menú Archivo
 Clic en el comando Guardar Como
 Selecciono la Unidad en la que deseo Guardar el documento
 Escribo el nombre de archivo, seguido coloco un punto con la tecla numérica y luego
escribo HTML EJEMPLO: REPASO.html

4. CÓMO ABRIR LA PÁGINA WEB
 Abro la unidad en la que guarde el documento
 Busco el documento y doy doble clic sobre él
 Para observar o modificar el código doy clic en el menú ver y luego en el comando código
de fuente.
 Siempre que se agrega o modifica el código debo dar clic en el comando guardar para
aplicar los cambios realizados en el documento.

5. ETIQUETAS

Las etiquetas son el elemento en el que se basa y presenta la sintaxis de un documento
HTML; toda etiqueta se abre entre signo mayor y menor y se cierra agregando (/)
Ejemplo: cuando se empieza a crear el documento debe escribirse la etiqueta <html> y para
cerrarlo o terminarlo </html>, más adelanta conocerás una gran variedad de etiquetas que te
permitirán diseñar diferentes tipos de documentos.

6. ESTRUCTURA BÁSICA DE UN DOCUMENTO HTML
Todo documento HTML tiene la siguiente estructura:
 Comienza con la etiqueta <html>
 Después está el encabezamiento que se abre con la etiqueta <head> y cierra con la
etiqueta </head>, donde colocaremos etiquetas de índole informativo como por ejemplo el
titulo de nuestra página.
 Y finalmente está el cuerpo del documento que empieza o se abre con la etiqueta <body>
y termina con la etiqueta </body> en donde aparece la información del documento.

 Finalmente se cierra la etiqueta </html> lo cual indica que allí concluye el documento.

Ejemplo:

<html>

<Head>

Etiquetas y contenidos del encabezado Datos que no aparecen en nuestra página pero que son
importantes para catalogarla: Titulo, palabras clave,...

</head>

<body> Etiquetas y contenidos del cuerpo Parte del documento que será mostrada por el
navegador: Texto e imágenes

</body>

</html>

Las mayúsculas o minúsculas son indiferentes al escribir etiquetas

7. ETIQUETAS PARA CREAR TITULOS

Dentro del documento se encuentran títulos que de acuerdo a su importancia pueden
clasificarse en diferentes niveles:
 Mucha importancia
<h1> JÓVENES EN ACCIÓN </h1>
 Menos importancia
<h2>Jóvenes deportistas </h2>
 Mucho menos importancia
<h3>Jóvenes futbolistas </h3>

8. ETIQUETAS PARA APLICAR ATRIBUTOS A LAS PÁGINAS

 Color de fondo <body bgcolor=”digita el código del color deseado”>
 Color de texto en toda la página <body text=”código del color deseado”
 Color de los enlaces <body link=”código del color deseado”>
 Color de enlaces visitados <body vlink=”código del color deseado”>
 Color de enlaces activos <body alink=”código del color deseado”>
 Imagen de fondo en la página <body background=”Se escribe la ruta y extensión (.gif)en
donde se encuentra guardada la imagen”
 Sonido de fondo para para la página <Bgsound src=”Se escribe la ruta donde se
encuentra guardado el sonido, luego la extensión ejm: .Wav”loop=”true”
<wildth=”200”Heigh=”55”Autostar=”True”loop=”false”HIPPEN=”True”>

Ejemplo de color del texto
Vamos a ver una página donde el color de fondo sea negro, y los colores del texto y los
enlaces sean claros. Pondremos el color de texto balnco y los enlaces amarillos, más
resaltados los que no estén visitados y menos resaltados lo que ya están visitados. Para ello
escribiríamos la etiqueta body así:
<body bgcolor="#000000" text="#ffffff" link="#ffff33" alink="#ffffcc" alink="ffff00">
 Márgenes

Con otros atributos de la etiqueta <body> se pueden asignar espacios de margen en las páginas, lo que es muy
útil para eliminar los márgenes en blanco que aparecen a los lados, arriba y debajo de la página. Estos atributos
son distintos para Internet Explorer y para Netscape Navigator, por lo que debemos utilizarlos todos si queremos
que todos los navegadores los interpreten perfectamente.

leftmargin: para indicar el margen a los lados de la página. Válido para iexplorer.

topmargin: para indicar el margen arriba y debajo de la página. Para iexplorer.

marginwidth: la contrapartida de leftmargin para Netscape. (Margen a los lados) marginheight: igual que
topmargin, pero para Netscape. (Margen arriba y abajo)

Una forma de simplificar nuestro código y de evitar introducir continuamente el atributo align sobre
cada una de nuestras etiquetas es utilizando la etiqueta <div>.

Esta etiqueta por si sola no sirve para nada. Tiene que estar acompañada del atributo align y lo que
nos permite es alinear cualquier elemento (párrafo o imagen) de la manera que nosotros deseemos.
Así, el código:

<p align="left">Parrafo1</p>

<p align="left"> Parrafo3</p>

<p align="left"> Parrafo2</p>

Es equivalente a:

<div align="left">

<p>Parrafo1</p>

<p>Parrafo2</p>

<p>Parrafo3</p>

</div>

Como hemos visto, la etiqueta <div> marca divisiones en las que definimos un mismo tipo de alineado.

9. ETIQUETAS PARA FORMATO DE PÁRRAFOS

 Abrir o crear un párrafo <p>
 Cerrar o terminar un párrafo </p>
 Párrafo alineado a la izquierda: <p align="left">Texto alineado a la izquierda</p>
 Párrafo Justificado: <p align="center">Texto alineado al centro</p>
 Párrafo alineado a la derecha: <p align="right">Texto alineado a la derecha</p>
 Interlineado, o sea pasar de un renglón a otro: <br> </br>
 Encabezados:
<h1>Encabezado de nivel 1</h1>

Ejemplo:
<html>
<head>
<title>Todos los encabezados
</title>
</head>
<body>
</body>
</html>

10. ETIQUETAS PARA FORMATO DE TEXTOS
Las siguientes etiquetas permiten aplicar ciertos atributos a los textos:

 Estilo: Negrita
Podemos escribir texto en negrita incluyéndolo dentro de las etiquetas <b> y </b> (bold).
Esta misma tarea es desempeñada por <strong> y </strong> siendo ambas equivalentes.
Nosotros nos inclinamos por la primera por simple razón de esfuerzo. Escribiendo un
código de este tipo: <b>Texto en negrita</b> Obtenemos este resultado: Texto en negrita.
 Estilo Kursiva
También en este caso existen dos posibilidades, una corta: <i> e </i> (italic) y otra un
poco más larga: <em> y </em>. He aquí un ejemplo de texto en itálica: <i>Texto en
itálica</i> Que da el siguiente efecto: Texto en itálica
 Estilo subrayado:

El HTML nos propone también para el subrayado el par de etiquetas: <u> y </u>
(underlined). Sin embargo, el uso de subrayados ha de ser aplicado con mucha precaución
dado que los enlaces hipertexto van, a no ser que se indique lo contrario, subrayados con
lo que podemos confundir al lector y apartarlo del verdadero interés de nuestro texto.

 Tipo de fuente o letra
La etiqueta para el tipo de fuente es <Font face=”escribo el nombre del tipo de fuente que
desee”> y se cierra </Font>
Ejemplo: <font face="Comic Sans MS,arial,verdana">Este texto tiene otra tipografía</font>
Que se visualizaría así en una página web. Este texto tiene otra tipografía

 Tamaño de fuente
La etiqueta que permite definir el tamaño de la letra es : <font size=4>Este texto es
más grande</font>, los tamaños van desde 1 hasta 7.

 Color de fuente
Aplicamos color a la fuente con la etiqueta:
<font color="se escribe el nombre del color en inglés o el código">en
este espacio digito el texto </font>
Ejemplo:
<Font color=”red”> La naturaleza es maravillosa</Font> o
<Font color=”#FF2400”> La naturaleza es maravillosa</Font>
Las dos formas son correctas y en los dos casos el color de fuente es rojo.
Algunos colores son:

Aqua
Black
Blue
Fuchsia
Gray
Green
Lime
Maroon
Navy
Olive
Purple
Red
Silver
Teal
White
Yellow

 Subíndices y Superíndices:

Este tipo de formato resulta de extremada utilidad para textos científicos. Las etiquetas empleadas son:
<sup> y </sup> para los superíndices
<sub> y </sub> para los subíndices.

Ejemplo: La <sup>13</sup>CC<sub>3</sub>H<sub>4</sub>ClNOS es un heterociclo alergeno enriquecido
El resultado:
13
La CC3H4ClNOS es un heterociclo alérgeno enriquecido

11. ETIQUETAS PARA LISTAS
 Numeradas
<ol> Abre la lista
<li>Digito la primera línea o renglón de texto</li>
<li>Digito la segunda línea de texto</li>
</ol>cierra la lista
Podemos colocar listas numeradas con letras, números romanos….. Observa el Ejemplo:

<p>Ordenamos por números</p>
<ol type="1">
<li>Elemento 1
<li> Elemento 2

</ol> <p>Ordenamos por letras</p>
<ol type="a">
<li>Elemento a
<li> Elemento b
</ol>

<p>Ordenamos por números romanos empezando por el 10</p>
<ol type="i" start="10">
<li>Elemento x
<li> Elemento xi
</ol>

El resultado:

Ordenamos por números

1. Elemento 1

2. Elemento 2

Ordenamos por letras

a. Elemento a

b. Elemento b

Ordenamos por números romanos empezando por el 10

x. Elemento x

xi. Elemento xi

 Con viñetas
<ul>Abre la lista
<li>Digita el primer elemento de la lista </li>
<li>Digita el segundoelemento de la lista </li>
</ul> Cierra la lista.
El tipo de viñeta puede ser: circle, disc, square y el siguiente ejemplo te enseñará
cómo definirlo:

Vamos a ver un ejemplo de lista con un cuadrado en lugar de un redondel, y en el último
elemento colocaremos un círculo.
Para ello vamos a colocar el atributo type en la etiqueta <ul>, con lo que afectará a todos los
elementos de la lista.

<ul type="square">
<li>Elemento 1
<li>Elemento 2

<li>Elemento 3
<li type="circle">Elemento 4 </ul>

Que tiene como resultado:

 Elemento 1

 Elemento 2

 Elemento 3

o Elemento 4

 Listas de definición. Ej.: Un glosario.
Cada elemento es presentado junto con su definición. La etiqueta principal es <dl> y </dl>
(definition list). La etiquetas del elemento y su definición son <dt> (definition term) y <dd>
(definition definition) respectivamente.
Ejemplo:

<p>Diccionario de la Real Academia</p>

<dl>
<dt>Bruja
<dd>Señora montada en una escoba
<dt>Hora
<dd>Medida de tiempo equivalente a sesenta minutos </dl>

El resultado obtenido es:
Diccionario de la Real Academia
Bruja
Señora montada en una escoba
Hora
Medida de tiempo equivalente a sesenta minutos

12. ETIQUETAS PARA CREAR TABLAS
La tabla se empieza a crear con la etiqueta:
<table> y se cierra con </table>
Las filas se crean con la etiqueta <tr> y se cierran con </tr>
Las columnas se crean con la etiqueta <td>digito el texto y cierro la columna </td>
Ejemplo:
<table>
<tr>
<td>Lunes</td>
<td> Martes</td>
</tr>
<tr>
<td> Miércoles</td>
<td> Jueves</td>
</tr>
</table>

Cuando se presenta la página se obtiene el siguiente resultado:

Lunes Martes
Miércoles Jueves

Aplicar Atributos a tablas, filas y celdas
Los atributos que se desean colocar a la tabla, fila o celda deben escribirse cuando se abre la
respectiva etiqueta; algunos atributos son comunes.

Atributos para la tabla

Son todas las etiquetas que permiten aplicar atributos de alineación o formato a una tabla, algunos
de ellos son:
 Align: Permite alinear la tabla en la hoja.
 Background: Coloca una imagen de fondo a la tabla
 Bgcolor: Permite colocar un color para toda la tabla
 Border: Define el grosor de la línea o borde de contorno de la tabla
 Bordercolor: Define el color del borde
 Cellpading: Define el espacio o distancia entre el borde y el contenido de la celda.
 Cellspacing: Define el espacio entre los bordes
 Height: Define la altura de la tabla en pixeles o porcentaje
 Width: Determina el ancho deseado para la tabla

Etiquetas que permiten aplicar atributos a las filas y celdas de una tabla:

 Align: Para justificar el texto en la celda
 Valign para la posición del texto dentro de la celda: (Top) arriba, (middle) en el centro y
(bottom) abajo
 Bgcolor: para aplicar color a la celda o a la fila elegida
 Bordercolor: Define el color del borde
 Background: Permite insertar una imagen en la celda
 Height: Define la altura de la celda en pixeles o porcentaje
 Width: Define el ancho de la celda en pixeles o porcentaje
 Colspan: fusiona dos celdas continuas horizontalmente
 Rowspan: Fusiona dos celdas continuas verticalmente.
13. ETIQUETAS PARA INSERTAR IMÁGENES

Las imágenes son muy importantes en un sitio Web, para insertar una imagen en una página Web se
utiliza la etiqueta:

<img src =”Escribo la dirección en la que se encuentra guardada la imagen, para saber la dirección
ubico la imagen y la copio, seguido coloco punto con la tecla del bloque numérico y luego la
extensión de la imagen, cierro las comillas” y cierro la etiqueta </img>

Para saber el tipo de archivo que es la imagen damos clic secundario dentro de ellas y en la lista de
opciones que se activa clic en propiedades, en la ventana que se abre observamos en donde dice
tipo, puede ser: GIF, WMF, JPEG,

Ejemplo:

<img src= “C:Archivos de programaMicrosoft OfficeMEDIACntCD1Animatedj0283572.GIF”>

</img >

Al presentar la página nos permitirá visualizar la siguiente imagen guardada

en la dirección especificada:

ATRIBUTOS QUE PUEDEN DARSE A UNA IMAGEN

Así como pueden aplicarse atributos a la fuente, a las tablas también las imágenes tienen algunos
atributos que permiten variar y mejorar su aspecto, ellos son:

 Alt: Permite hacer una descripción de la imagen.
 HEIGHT Y WIDTH: Definen la altura y anchura respectivamente de la imagen en píxeles.
 BORDER: Definen el tamaño en pixeles del cuadro que rodea la imagen.

 VSPACE Y HSPACE: Sirven para indicar el espacio libre, en pixeles, que tiene que colocarse
entre la imagen y los otros elementos que la rodean, como texto, otras imágenes, etc.
 LOWSRC: Con este atributo podemos indicar un archivo de la imagen de baja resolución.
Cuando el navegador detecta que la imagen tiene este atributo primero descarga y muestra la
imagen de baja resolución (que ocupa muy poco y que se transfiere muy rápido).
Posteriormente descarga y muestra la imagen de resolución adecuada (señalada con el
atributo src, que se supone que ocupará más y será más lenta de transferir). Este atributo está
en desuso, aunque supone una ventaja considerable para que la descarga inicial de la web se
realice más rápido y que un visitante pueda ver una muestra de la imagen mientras se
descarga la imagen real.

 ALINEACIÓN DENTRO DEL DOCUMENTO:

CENTRAR LA IMAGEN: <div align="center"><img src="images/logo.gif"></div>
ALINEAR A LA DERECHA:<img src="imagen.gif" align="right">
ALINEAR A LA IZQUIERDA: <img src="imagen.gif" align="left">

 ATRIBUTOS QUE SE PUEDEN DAR A LA ALINEACIÓN:

Estos valores adicionales del atributo Align son:
 Top Ajusta la imagen a la parte más alta de la línea. Esto quiere decir que, si hay una imagen
más alta, ambas imágenes presentaran el borde superior a la misma altura.
 Bottom Ajusta el bajo de la imagen al texto.
 Absbottom Colocara el borde inferior de la imagen a nivel del elemento más bajo de la línea.
 Middle Hace coincidir la base de la línea de texto con el medio vertical de la imagen.
 Absmiddle Ajusta la imagen al medio absoluto de la línea.

14. ETIQUETAS PARA CREAR ENLACES CON TEXTOS E IMÁGENES

Los enlaces o links son muy importantes en un sitio Web ya que es mediante ellos que podemos
acceder a otras páginas u archivos externos relacionados con el tema.

Un enlace puede ser fácilmente detectado en una página. Basta con deslizar el puntero del ratón
sobre las imágenes o el texto y ver como cambia de su forma original transformándose por regla
general en una mano con un dedo señalador. Adicionalmente, estos enlaces suelen ir, en el caso de
los textos, coloreados y subrayados para que el usuario no tenga dificultad en reconocerlos.

Podemos fácilmente convertir en enlace un texto o una imagen mediante las siguientes etiquetas:

<a href="Aquí se digita la dirección en la que se encuentra el documento que deseamos abrir con el enlace">aquí se
digita el contenido o explicación para el usuario</a>

En función del destino los enlaces son clásicamente agrupados del siguiente modo:

• Enlaces internos: los que se dirigen a otras partes dentro de la misma página.
<a href="#abajo">Ir abajo</a>
• Enlaces locales: los que se dirigen a otras páginas del mismo sitio web.

<a href="seccion1/paginas/yyy.html">contenido</a>

• Enlaces remotos: los dirigidos hacia páginas de otros sitios web.
<a href="http://www.comcel.com">ir a sena.com</a>
• Enlaces con direcciones de correo: para crear un mensaje de correo dirigido a una dirección.

Para colocar un enlace dirigido hacia una dirección de correo colocamos mailto: en el atributo
href del enlace, seguido de la dirección de correo a la que se debe dirigir el enlace.

<a href="mailto:raguilar@santander.gov.co">raguilar@santander.gov.co </a>

• Enlaces con archivos: para que los usuarios puedan hacer download de ficheros.

<a href="d:datostrabajosdecimos">archivos</a>

 Abrir un enlace con una imagen

<a href="c:documents and SettingsAll Usersmenú inicioprogramasjuegos"><img src="c:archivos
de programaMicrosoft officemediacntcd1clipart3j0232734.wmf"></img></a>

Destino del enlace
El destino del enlace determina en qué ventana va a ser abierta la página vinculada, se especifica a través del
atributo target al que se le puede asignar los siguientes valores:

_blank: Abre el documento vinculado en una ventana nueva del navegador.

_parent: Abre el documento vinculado en la ventana del marco que contiene el vínculo o en el conjunto de
marcos padre.

_self: Es la opción predeterminada. Abre el documento vinculado en el mismo marco o ventana que el vínculo.

_top: Abre el documento vinculado en la ventana completa del navegador.

No te preocupes si no te queda del todo claro para qué sirve cada una de estas opciones de destino, ya que se
volverán a ver en el tema de Marcos. De momento sólo te interesa retener la opción _blank y _self.

Para insertar el enlace:

Visita www.facebook.com en una ventana nueva

Habría que escribir:

<a href="http://www.facebook.com" target ="_blank">Visita www.aulaclic.com en una ventana nueva</a>

Es interesante utilizar esta opción cuando la página de destino está fuera de nuestro sitio para que cuando el
usuario cierre la ventana del explorador, se encuentre automáticamente en la página desde la que había salido (que
vuelva a nuestro sitio).

Formato de los enlaces
En general, un texto que tiene un vínculo asociado suele aparecer subrayado.

Cuando el vínculo está definido sobre una imágen, 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.

Aqui 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.

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.aulaclic.com" target ="_blank">www.aulaclic.com</a>
...

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

www.facebook.com

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

www.facebook.com

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

www .facebook.com

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 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.

Por ejemplo, en la carpeta donde se encuentra esta página tenemos el fichero Word carta.doc y queremos
que nuestros visitantes puedan visualizar e incluso descargar el fichero en su disco duro, en este caso
definiremos el enlace:

De la siguiente forma:

<a href="carta.doc" tarjet=_blank >haz clic aquí para descargarte el fichero</a>

En este caso hemos utilizado una referencia relativa al documento ya que la carta se encuentra en la misma
carpeta que nuestra página.

Vínculo vacío:

Al pulsar sobre un enlace vacío no se abre ninguna página ni archivo, pero el formato es el mismo que el de
cualquier otro enlace. El vínculo debe ser el símbolo almohadilla "#".

Por ejemplo, para insertar el enlace vacío:

vinculo vacio


<a href="#">vinculo vacio</a>

Este tipo de enlace resulta útil para trabajar con comportamientos javascript.

TALLER DE EJERCICIOS DE REPASO

Los ejercicios deben ser entregados al final de la clase.

Ejercicio 1

1 Si no tienes abierto el Bloc de notas, ábrelo para realizar el ejercicio.

2 Crear un archivo inicio.htm

3 Inserta una línea en blanco debajo de la etiqueta <body>, y escribe el siguiente código en ella:

<basefont color="red" size="1 ">

Con este código estarás estableciendo el color rojo (#FF0000) y tamaño 1 para el texto del documento.

Si guardas ahora los cambios y visualizas la página, no verás ningún cambio ya que la página no tiene texto.

4 Detrás de la etiqueta <basefont> inserta una línea en blanco, y escribe el siguiente texto: Inicio

5 Guarda el archivo y visualízalo en tu navegador, el texto debe aparecer en rojo y pequeño.

Dejaremos la página un poco más discreta y cambiaremos el color del texto a verde oscuro ( #003333) y
subiremos el tamaño de las letras.

6 Rectifica la etiqueta <basefont para que quede así:

<basefont color="#003333" size="4">

Con este código estarás estableciendo el color verde oscuro (#003333) y tamaño 4 para el texto del documento.

7 Guarda el archivo y visualízalo en tu navegador, observa los cambios.

8 Encierra el texto Inicio entre etiquetas <H1> de la siguiente forma:

<h1>Inicio</h1>

Con este código estarás conviertiendo el texto en un encabezado de primer nivel.

9 Guarda el archivo y visualízalo en tu navegador, observa los cambios, el texto aparece destacado y más grande.

10 Inserta una línea en blanco debajo del código anterior, y escribe la etiqueta <hr>.

Con esta etiqueta estarás insertando una regla horizontal.

11 Guarda el archivo y visualízalo en tu navegador, observa la regla

12 Inserta una línea en blanco debajo de la etiqueta anterior, y escribe el siguiente código en ella:

<blockquote>
<blockquote>

<p align="left">
<em>

Somos una asociación de veterinarios, estudiantes de veterinaria, o simplemente amantes de los
animales.
<br>
Desde esta página web intentaremos resolver tus dudas acerca de cómo cuidar a tus
mascotas.
</em>
</p>
</blockquote>
</blockquote>

Con este código estarás insertando un párrafo (<p>) dividido en dos líneas (<br>).

Este párrafo estará alineado a la izquierda (align="left"), aparecerá en cursiva (<em>) y tendrá doble sangrado
(<blockquote>).

13 Guarda el archivo y visualízalo en tu navegador, comprueba que obtienes una página como la que aparece
si pulsas aquí. Para apreciar mejor el efecto del párrafo ves cambiando el tamaño de la ventana de tu navegador y
verás como el texto se va escribiendo en más líneas pero siempre alineado a la izquierda y saltando de línea
después de la primera frase.

Ejercicio 2.

1 Abre el documento gatos.htm, de la carpeta originales/animales del curso.

2 Guarda la página con el mismo nombre en tu directorio de ejercicios Mis
documentos/ejercicios_html/animales

Vamos a modificar la página para que tenga el siguiente aspecto:

1 Empezamos por darle a la palabra Gatos un estilo de encabezado 1: <h1>Gatos</h1>

Si quieres puedes ir observando los cambios según los vayas introduciendo, guardando sin cerrar el bloc de notas
y visualizando la página cada vez (la primera vez abres el explorador con la página gatos.htm y después de ver el
efecto, en vez de cerrar la ventana del explorador la dejas abierta, así cuando hayas hecho el siguiente cambio en la
página podrás volver a la sesión del explorador con la página gatos.htm y después de hacer clic en el botón
Actualizar de tu navegador verás mejor el efecto producido por el cambio que has incorporado a la página).

2 Detrás añadimos una regla con la etiqueta <hr>.

3 Añadimos una línea en blanco con <br>

4 La pregunta queda sangrada con respecto al resto del texto, la colocamos dentro de una
etiqueta <blockquote> y además le asignamos un estilo de encabezado 3:

<blockquote>
<h3>¿COMO PREVENIR LOS PROBLEMAS DENTALES?</h3>
</blockquote>

5 Sólo nos queda definir la lista intercalando las siguientes etiquetas:

<ul>
<li>Alimentar al gato con comida seca de buena calidad o darle algo duro para que lo mastique</li>
<ul>
<li>Preferiblemente que coma pienso</li>
</ul>

<li>Cepillarle los dientes una vez a la semana</li>
<li>Que el veterinario examine la boca del gato por lo menos cada seis meses</li>
</ul>

6 Guarda el archivo y visualízalo en tu navegado

EJERCICIOS DE ENLACES
Ejercicio 1: Deportes.
1 Abrir el documento menu.htm, de la carpeta originales/deportes del curso.
2 Guardar la página con el mismo nombre en tu directorio de ejercicios Mis
documentos/ejercicios_html/deportes
3 Rectificar la página para que la palabra E-MAIL sea un enlace de correo electrónico a tu dirección de correo.
4 Guardar los cambios y comprobar el funcionamiento en un navegador.

TABLAS EN HTML
TABLA <table>

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.

imagen y texto COLUMNA

Texto dentro de una
celda

FILA CELDA

Para crear una tabla hay que insertar las etiquetas <table> y </table>. Entre dichas etiquetas habrá que
especificar las filas y columnas que formarán la tabla.

FILA

Es necesario insertar las etiquetas <tr> y </tr> por cada una de las filas de la tabla. Estas etiquetas deberán
insertarse entre las etiqetas <table> y </table>.

Por ejemplo, para crear una tabla con cinco filas escribiríamos:

<table>
<tr>...</tr>
<tr>...</tr>
<tr>...</tr>
<tr>...</tr>
<tr>...</tr>
</table>

COLUMNA

Para crear una tabla no basta con especificar el número de filas, es necesario también especificar el 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>.

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

Sabado Domingo
FISICA QUIMICA
FILOSOFIA INGLES


<table border="1">
<tr>
<td>Sabado</td>
<td>Domingo</td>
</tr>
<tr>
<td>FISICA<td>
<td>QUIMICA</td>
</tr>
<tr>
<td>FILOSOFIA</td>
<td>INGLES</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 desee que
width ancho de la tabla
sea en porcentaje
un número, acompañado de % cuando se desee que
height altura de la tabla
sea en porcentaje
espacio entre el contenido de las celdas
cellpadding un número
y el borde
cellspacing espacio entre celdas un número
border grosor del borde un número
left (izquierda)
alineación de la tabla dentro de la
align página
right (derecha)
center (centro)
bgcolor color de fondo número hexadecimal
background imagen de fondo número hexadecimal
bordercolor color del borde número hexadecimal

Por ejemplo, para modificar la tabla de la página anterior para que quedase como la siguiente:
Sabado Domingo
FISICA QUIMICA
FILOSOFIA INGLES


<table width="50%" border="2" align="center" cellspacing="0" bordercolor="#000000"bgcolor="#FFCC99">
...
</table>

Con esto indicamos que el ancho (width) de la tabla debe ocupar el 50% del ancho de la ventana (lo puedes
comprobar cambiando el ancho de la ventana de tu navegador y verás que el ancho de la tabla varía para ocupar
siempre la mitad de la ventana), que el borde (border) tiene un grosor de dos píxeles (es más ancho que las
separaciones internas de la tabla que tienen grosor 1), que la tabla está alineada al centro ( center) de la ventana,
que no hay espacio entre las celdas (cellspacing="0"), que el borde la tabla es negro (#000000) y el fondo naranja

(#FFCC99).

También es posible modificar estos atributos de toda una fila, especificándolos en la etiqueta <tr>, en lugar de en
la etiqueta <td>.

Hay que tener en cuenta que los atributos tienen más prioridad cuando son establecidos para una celda que
cuando son establecidos para una fila completa. Al mismo tiempo, tienen más prioridad los atributos establecidos
para una fila que los establecidos para toda la tabla.

Por ejemplo, si escribiéramos el siguiente código:

<table width="50%" border="2" align="center" cellspacing="0" bordercolor="#000000"bgcolor="#FFCC99">
<tr align="center" bgcolor="#0099CC">
<td>Sabado</td>
<td bgcolor="#66CC99">Domingo</td>
</tr>
<tr>
<td>FISICA</td>
<td>QUIMICA</td> EJERCICIO
</tr>
<tr>
<td>FILOSOFÍA</td>
<td>INGLES</td>
</tr>
</table>

Obtendríamos la siguiente tabla:
Sabado Domingo
FISICA QUIMICA

FILOSOFIA INGLES

Se ha establecido el color naranja como fondo de toda la tabla, pero con la línea de
código <tr align="center"bgcolor="#0099CC"> se ha establecido el color azul como color de fondo de la primera
fila, por lo que dicha fila se mostrará de color azul, y no de color naranja. Al mismo tiempo, se ha cambiado el color
de la segunda celda de la primera fila por el color verde, a través de la
línea <td bgcolor="#66CC99">Domingo</td> por lo que esta fila en vez de ser azul será verde, los atributos de
celda tienen prioridad sobre los de la fila.

Existe otro atributo que puede establecerse sobre las celdas. Se trata del atributo nowrap, que hace que el
contenido de la celda no se ajuste de manera automática al ancho de la columna sino que el ancho de la celda se
adapta al ancho del contenido para que el contenido ocupe una sólo fila. Este atributo no toma ningún valor,
simplemente se añade o no a las etiqueta <td>.

ENCABEZADO DE COLUMNA

Las etiquetas <td> y </td> se utilizan para definir las celdas de cada una de las filas, pero podemos
poner en su lugar las etiquetas<th> y </th>.

Para la etiqueta <th> es posible especificar los mismos atributos que para la etiqueta <td>, pero esta
nueva etiqueta hace que el texto de la celda aparezca centrado y en negrita, por lo que se utiliza para
definir los encabezados o títulos de las columnas.


<table width="50%" border="1" align="center">
<tr>
<th>Sabado</td>
<th>Domingo</td>
</tr>
<tr>
<td>FISICA</td>
<td>QUIMICA</td>
</tr>
<tr>
<td>FILOSOFÍA</td>
<td>INGLES </td>
</tr>
</table>

Obtendríamos la siguiente tabla:
Sábado Domingo
FISICA QUIMICA
FILOSOFÍA INGLES

TITULO DE LA TABLA

No solamente es posible establecer títulos para las columnas, también es posible establecer un título para la
tabla mediante las etiquetas <caption> y </caption>.

Estas etiquetas han de ir después de la etiqueta <table>, y puede especificarse el valor de los
atributos align (con los valoresbottom, center, left, right y top) y valign (con los valores bottom y top).


<table width="50%" border="1" align="center">
<caption align="right" valign="top">Titulo de la tabla<tr>
<tr>
<th>Sabado</td>
...
</tr>
</table>

Obtendríamos la siguiente tabla con título:
Título de la tabla
Sábado Domingo
FISICA QUIMICA
FILOSOFÍA INGLES

El título aparece ajustado a la margen derecho de la tabla (align="right") y encima de la tabla (valign="top").

COMBINAR CELDAS

Para las etiquetas <td> y <th> existen los atributos colspan y rowspan, que se utilizan para combinar
celdas.

A través del atributo colspan se especifica el número de columnas por las que se extenderá la celda, y a
través del atributo rowspan se especifica el número de filas por las que se extenderá la celda.

Para que quede más claro, vamos a ver un ejemplo de su uso. Por ejemplo, para insertar la siguiente
tabla:
DIFERENCIAS ENTRE EL PERRO Y EL HOMBRE
PERRO
DIFERENCIAS HOMBRE
PEQUEÑO GRANDE
Duración crecimiento 10 meses 18 a 24 meses 16 años
Tiempo de gestación 58 a 63 días 9 meses
Duración de vida del pelo/cabello 1 año 2 a 7 años

Habría que escribir el siguiente código:

<table width="575" border="2" cellspacing="2">
<tr align="center" valign="middle">
<th colspan="4">DIFERENCIAS ENTRE EL PERRO Y EL HOMBRE</th>
</tr>
<th rowspan="2">DIFERENCIAS</th>
<th colspan="2">PERRO</th>
<th rowspan="2">HOMBRE</th>
</tr>
<th>PEQUEÑO</th>
<th>GRANDE</th>
</tr>
<td>Duración crecimiento</td>
<td>10 meses</td>
<td>18 a 24 meses</td>
<td>16 años</td>
</tr>
<td>Tiempo de gestación</td>
<td colspan="2">58 a 63 días</td>
<td>9 meses</td>
</tr>
<td>Duración de vida del pelo/cabello</td>
<td colspan="2">1 año</td>
<td>2 a 7 años</td>
</tr>
</table>

Vamos a explicar un poco cómo funciona dicho código, aunque sería conveniente que primero intentaras
entender el código comparándolo con la tabla que de él se obtiene.

En primer lugar, tenemos que ver el número máximo de columnas que ha de tener la tabla. En este caso
serían cuatro columnas. Para saber el número de columnas total de la tabla, tenemos que fijarnos en el
número total de celdas que podemos obtener por fila al trazar las líneas verticales que separan las
columnas entre sí.

En la primera fila, la línea <th colspan="4">DIFERENCIAS ENTRE EL PERRO Y EL
HOMBRE</th> indica que la celda ocupará cuatro columnas de la tabla (la columna actual y las 3
siguientes). Como la tabla tiene como mucho cuatro columnas y el atributocolspan de la celda vale cuatro,
no hay que definir más celdas para esa misma fila.

En la segunda fila, la línea <th rowspan="2">DIFERENCIAS</th> indica que la celda ocupará dos filas
de la tabla (la actual y la siguiente). Lo mismo ocurre con la línea <th rowspan="2">HOMBRE</th>.

Ya hemos definido dos celdas de la segunda fila. Sabemos que la tabla tiene como mucho cuatro
columnas, por lo que como en la línea <th colspan="2">PERRO</th> el atributo colspan vale dos, ya
tenemos las cuatro celdas.

En la segunda fila hemos definido dos celdas que se expanden por dos filas, por lo que en la tercera fila
habrá que definir solamente dos celdas, y no cuatro, ya que dos de sus celdas se corresponden con las
definidas en la fila anterior.

Las dos nuevas celdas son <th>PEQUEÑO</th> y <th>GRANDE</th>.

El uso de los atributos colspan y rowspan puede resultar algo complicado al principio. Es cuestión de
práctica.

EJERCICIOS A DESARROLLAR

1 Crear un archivo llamado tabla.htm, de la carpeta mis documentos.

2 crear la siguiente tabla en el archivo:
LISTADO DE VENDEDORES
NOMBRE CEDULA FECHA DE NACIMIENTO CIUDAD
KAREN RODRIGUEZ 34.998.999 12/03/1980 CARTAGENA
LUIS FELIPE MEDINA 98.099.123 31/12/1977 CARTAGENA
PABLO ANTONIO PEREZ 12.888.876 23/11/1969 BUCARAMANGA
JUAN LUIS CORTES 91.998.888 24/12/1970 SINCELEJO

3 Rectificar la tabla para que las celdas de la primera fila sean títulos de columna.

4. crear un enlace que permita acceder a la guía de trabajo.


II EJERCICIO

1 Crear el documento instalaciones.htm, en la carpeta mis documentos.

2 crear la siguiente tabla
TIPO DE LENGUAJE DE
PROGRAMACION
JAVA P.O.O
ALTO
RUBY P.O.O.
BAJA ENSAMBLADOR LINEAL
LINEAL
MEDIO C++ P.O.O.
C LINEAL


4. crear un link a una página de programación, que se abra en una ventana nueva mediante la etiqueta
<a hfef>

EVALUACIONES CONCEPTUALES DE HTML

1. Para insertar una imagen es necesario insertar la etiqueta <imagen>.

a) Verdadero

b) Falso

2. Existen una serie de formatos de imagen más recomendables que otros para ser introducidos en una
página web.

a) Verdadero

b) Falso

3. Cuando una imagen no puede ser visualizada en el navegador aparece un recuadro blanco con una X roja
en su lugar.

a) Verdadero

b) Falso

4. El texto alternativo no aparece al situar el puntero sobre la imagen.

a) Verdadero

b) Falso

5. Es preferible modificar el tamaño de las imágenes desde un editor de imágenes.

a) Verdadero.

b) Falso.

6. La alineación de las imágenes se establece a través del atributo align.

a) Verdadero

b) Falso

7. El atributo width...

a) Va fuera de la etiqueta <img>

b) Sirve para especificar la altura de la imagen

c) Sirve para especificar la anchura de la imagen

8. Si escribiéramos align="middle"...

a) La imagen aparecería centrada en la ventana

b) El medio de la imagen aparecería a la misma altura que la línea de texto que la acompañara

c) La imagen sería más pequeña

9. Las imágenes...

A) Pueden redimensionarse a través de los atributos width y height

B) Siempre tienen un borde alrededor

C) Cualquiera de las dos primeras opciones

D) Ninguna de las opciones anteriores

10. El borde de la imagen ...

A) Suele ser de color negro

B) Adquiere el color de los vínculos cuando contiene alguno

C) Puede desaparecer si escribimos border="0"

D) Cualquiera de las opciones anteriores

11. Las celdas se obtienen como resultado de la intersección entre una fila y una columna.

a) Verdadero

b) Falso

12. Para crear una tabla hay que insertar las etiquetas <table> y </table>.

a) Verdadero

b) Falso

13. Es necesario insertar las etiquetas <td> y </td> por cada una de las filas de la tabla.

a) Verdadero

b) Falso

14. El atributo bordercolor tiene que especificarse mediante un número hexadecimal.

a) Verdadero

b) Falso

15. El atributo nowrap hace que el contenido de la celda no se ajuste de manera automática.

a) Verdadero.

b) Falso.

16. El atributo colspan sirve para especificar el número de filas por las que se extenderá la celda.

a) Verdadero

b) Falso

17. A través del atributo background...

a) Se establece el grosor del borde de la tabla

b) Se establece una imagen de fondo

c) Ese atributo no existe para las tablas

18. Los atributos...

a) Tienen más prioridad cuando son establecidos para una celda

b) Tienen más prioridad cuando son establecidos para una fila completa

c) Ninguna de las dos anteriores opciones

19. La etiqueta <th>...

A) Hace que el texto de la celda aparezca centrado y en negrita

B) Se utiliza para insertar reglas horizontales



20. El atributo valign indica...

A) La alineación horizontal del contenido de la celda

B) La alineación vertical del contenido de la celda



MARCOS EN HTML
Conjunto de marcos <frameset>
Los marcos o frames sirven para distribuir mejor
los datos de las páginas, ya que permiten
mantener fijas algunas partes, como pueden ser el
logotipo y la barra de navegación, mientras que
otras sí pueden cambiar. Además de mejorar la
funcionalidad, pueden mejorar también la
apariencia.
Cada uno de los marcos de una página, contiene
un documento HTML individual. Por ejemplo, en la
imagen de la derecha puedes ver una página con
dos marcos. El marco izquierdo contiene el
documento menu.htm y el derecho el
documento perros.htm. Para poder visualizar la
página de este modo, hemos tenido que abrir en
el navegador el documentomarcos.htm, que es el
que en este caso contiene el grupo de marcos.
El trabajar con marcos puede resultar una tarea algo complicada, sobretodo al principio, por lo que vemos
solamente algunos conteptos básicos y ejemplos sencillos.
Como hemos visto si queremos utilizar marcos debemos crear una página con la definición del conjunto de
marcos (en el ejemplo anterior la página marcos.htm).

Los conjuntos de marcos se definen a través de las etiquetas <frameset> y </frameset>, que van después
de la etiqueta<head>. A través de estas etiquetas se indica el número de marcos en que se dividirá la
ventana, cada uno de los cuales será una especie de subventana.

Cuando se insertan las etiquetas <frameset> y </frameset> no hay que insertar las
etiquetas <body> y </body>, ya que el cuerpo del documento será el cuerpo de las páginas que se carguen
en cada uno de los marcos del conjunto de marcos.

Los atributos que pueden especificarse sobre la etiqueta <frameset> son los siguientes:

tamaño de cada una de las un número (acompañado de % cuando se
cols columnas en que se divide desee que sea en porcentaje) por cada
el documento columna, separados por comas.

tamaño de cada una de las un número (acompañado de % cuando se
rows columnas en que se divide desee que sea en porcentaje) por cada fila,
el documento separados por comas.

aparece o no el borde de los yes
frameborder
marcos no

framespacing separación entre los marcos un número

un número, acompañado de % cuando se
border grosor del borde
desee que sea en porcentaje

bordercolor color del borde número hexadecimal

También es posible incluir asteriscos como valores para los atributos cols y rows. Este valor indica que
dicha fila o columna ocupará todo lo que quede de ventana o subventana. Cuando existan varias columnas o
filas con este valor, se repartirán de forma equitativa lo que quede de ventana.

Por ejemplo, si insertáramos la siguiente línea de código:
<frameset rows="*" cols="142,*,25%">...</frameset>
Como el atributo rows tiene el valor asterisco, solo habría una fila, que ocuparía todo el alto de la ventana.
En este caso concreto no haría falta poner el atributo rows.
Como el atributo cols tiene tres valores, estaríamos dividiendo el documento en tres columnas. La primera
columna sería de 142píxeles de ancho, la tercerá del 25% de la ventana, y la segunda columna ocuparía lo
que quedará de ventana (el 75% de la ventana menos 142 píxeles).

También es posible anidar marcos. Es decir, es posible dividir marcos en otros marcos.
Por ejemplo, si insertáramos el siguiente código:
<frameset cols="142,*">
<frameset rows="80,*">...</frameset>
<frameset cols="25%,*,*">...</frameset>
</frameset>
Estaríamos dividiendo el documento en dos columnas. La primera sería de 142 píxeles, y la otra abarcaría el
resto de la ventana.

Al mismo tiempo, la primera columna o subventana estaría dividida en dos filas o subventanas horizontales,
la primera de ellas de80 píxeles.
La segunda columna o subventana de la ventana principal se dividiría a su vez en tres columnas, la primera
de ellas del 25% de la subventana, y las otras dos se repartirían el resto a partes iguales (se repartirían el
75% de la subventana).

Por último debemos saber que entre las etiquetas <frameset> y </frameset> sólo se pueden encontrar la
etiquetas<head> <noframe> <frameset> <frame> y sus correspondientes etiquetas de cierre.

Marco <frame>

Ya hemos visto cómo dividir un documento en varias subventanas o marcos, pero no hemos visto cómo
hacer que se carguen las distintas páginas en cada uno de los marcos.

Para indicar qué documento se cargará en cada uno de los marcos habrá que insertar la
etiqueta <frame> por cada uno de los marcos de la ventana. Estas etiquetas estarán entre las
etiquetas <frameset> y </frameset>, y no necesitan etiqueta de cierre.

Es posible modificar los siguientes atributos de un marco:

yes o 1
frameborder aparece o no el borde del marco
no o 0

name nombre del marco cualquier valor

si aparece, el usuario no podrá redimensionar
noresize no puede tomar valores
el tamaño de este marco

un número, acompañado de %
anchura del margen con respecto a los bordes
marginwidth cuando se desee que sea en
del marco
porcentaje

un número, acompañado de %
altura del margen con respecto a los bordes del
marginheight cuando se desee que sea en
marco
porcentaje

se mostrará o no la barra de desplazamiento yes
scrolling cuando la página del marco no se pueda no
visualizar completamente en él auto

src documento que se cargará en el marco ruta y nombre del documento

Por ejemplo, para crear el conjunto de marcos de la página que aparece si pulsas aquí, tendríamos que

escribir:

<frameset cols="150,*" frameborder="yes" framespacing="3" border="3" bordercolor="#FF9900">
<frame src="izquierdo.htm" name="marcoizquierdo" frameborder="no" scrolling="no" noresize>
<frame src="derecho.htm" name="marcoderecho" frameborder="no" scrolling="auto">
</frameset> Y para crear el conjunto de marcos de la página que aparece

<frameset rows="90,*" framespacing="3" frameborder="yes" border="3" bordercolor="#FF9900">
<frame src="superior.htm" name="marcosuperior" frameborder="yes" scrolling="NO" noresize>
<frameset cols="150,*" framespacing="3" frameborder="yes" border="3" bordercolor="#FF9900">
<frame src="izquierdo.htm" name="marcoizquierdo" scrolling="NO" noresize>
<frame src="derecho.htm" name="marcoderecho">
</frameset>
</frameset> Esta última página está dividida en dos marcos horizontales (rows="90,*"), estando el inferior de

Siempre que creamos una página queremos que pueda ser visitada por el mayor número de usuarios, por lo
que el hecho de que hayan usuarios cuyos navegadores no soportan los marcos puede resultar un
problema.
Las etiquetas <noframes> y </noframes> se utilizan para que su contenido sea visualizado en aquellos
navegadores que no soportan los marcos.
Si un navegador no soporta los marcos, no cargará ningún documento en ningún marco, por lo que
tendremos que mostrar el cuerpo del documento actual de algún modo. Por ello, han de introducirse las
etiquetas <body> y </body> entre las etiquetas<noframes> y </noframes>.
<html>
<head>
...
</head>
<frameset cols="150,*">
<frame src="izquierdo.htm" name="marcoizquierdo">
<frame src="derecho.htm" name="marcoderecho">
</frameset>
<noframes>
<body>
Este documento tiene marcos y tu navegador no los soporta.
</body>
</noframes>
</html>
Obtendríamos una página con dos marcos, que en el caso de intentar ser visualizada en un navegador que
no soportase marcos, mostraría una página con el texto Este documento tiene marcos y tu navegador no los
soporta.
Una buena solución para que el mayor número de usuarios pueda visitar nuestra página, es crear nuevas
páginas con el contenido de los documentos que deberían mostrarse en los marcos, pero que permitan
pasar de unos a otros dentro de la misma ventana.
De este modo, en el caso de que el navegador no soporte los marcos, podemos incluir un enlace a una de
estas páginas. Por ejemplo, si escribiéramos el siguiente código:
...
<noframes>
<body>
Este documento tiene marcos y tu navegador no los soporta.
<a href="sinmarcos.htm">Pulsa aqui para visualizar la página sin marcos.</a>
</body>
</noframes>
</html>
ellos dividido en dos marcos verticales (cols="150,*").

Destino del enlace
Como recordarás, en el tema de hipervínculos vimos los posibles destinos de los enlaces. Estos destinos
podían ser _blank, _parent, _self, y _top. Vamos a recordar para qué servía cada uno de ellos, ya que ahora
que sabes trabajar con marcos te serán más fáciles de entender.
_blank:Abre el documento vinculado en una ventana nueva del navegador.
_parent:Abre el documento vinculado en la ventana del marco que contiene el vínculo o en el conjunto de
marcos padre.
_self:Es la opción predeterminada. Abre el documento vinculado en el mismo marco o ventana que el vínculo.
_top:Abre el documento vinculado en la ventana completa del navegador, lo cual quiere decir que los marcos
de la ventana desaparecerán al abrir el vínculo en ella.

Además de estos destinos para los enlaces, también podrás utilizar los nombres de los distintos marcos de la
página. Por ejemplo, si tuvieramos un marco con el nombre marcoderecho, podríamos insertar el enlace:

<a href="http://www.nusepre.com" target="marcoderecho">nusepre en el marco derecho</a>

Este enlace cargaría la página de Nusepre en el marco llamado marcoderecho.
Podemos añadir todos estos nuevos destinos a cualquier elemento de la página que contenga algún enlace, ya
sea texto, una imágen, un mapa de imagen, un elemento Flash, etc.
Gracias a todo esto podremos hacer que las barras de navegación y el resto de enlaces funcionen a nuestro
antojo, cargando unas u otras páginas en alguno de los marcos, en una ventana nueva, en toda la ventana,
etc.
Esta tarea puede resultar algo pesada, y al principio complicada, pero da muy buenos resultados finales.

EJERCICIO DE PRUEBA
Crear un documento marcos.htm, sobre los conceptos básicos de programación (if, for, while), cabe resaltar
que debes crear una pagina llamada menú.html y otra inicio.html

Inserta una línea en blanco debajo de la etiqueta </head>, y escribe el siguiente código en ella:
<frameset rows="*" cols="142,*" framespacing="0" frameborder="NO" border="0">
<frame src="menu.htm" name="marcoizquierdo" frameborder="no" scrolling="NO" noresize>
<frame src="inicio.htm" name="marcoderecho" frameborder="no">
</frameset>

Con la primera línea, estarás creando dos marcos en la página. El primero será de 142 píxeles, y el otro
ocupará el resto de la ventana del navegador. Los marcos se distribuirán en forma de columna (cols="142,*").
No habrá espacio entre los marcos (framespacing="0"), ni se mostrarán sus bordes
(frameborder="NO"border="0").

Con la segunda línea, estarás especificando las propiedades del primer marco. Este marco se
llamará marcoizquierdo, no se mostrarán sus bordes (frameborder="no"), y el usuario no podrá modifciar su
tamaño (noresize). En este marco se cargará el documento menu.htm, y cuando éste no pueda ser mostrado
en su totalidad, no aparecerán las barras de desplazamiento (scrolling="NO").

Con la tercera línea, estarás especificando las propiedades del segundo marco. Este marco se
llamará marcoderecho, y no se mostrarán sus bordes (frameborder="no"). En este marco se cargará el
documento inicio.htm.

Inserta una línea en blanco debajo de la etiqueta </frameset>, y escribe el siguiente código en ella:
<noframes>
<body bgcolor="#99CC99">
Esta página tiene marcos, y tu navegador no los soporta
</body>
</noframes>

Este código será el utilizado por los navegadores que no soportan los marcos. Cuando un navegador no
soporte los marcos, mostrará una página de color verde (<body bgcolor="#99CC99">), con el texto Esta página
tiene marcos, y tu navegador no los soporta.

ETIQUETAS DE SONIDO <BGSOUND>

Añadir una música de fondo a una página tiene pros y contras, si el sonido es apropiado al contenido de la
página, puede hacerla más atractiva en contrapartida la descarga del archivo de sonido supone una carga que
puede ralentizar la visualización de la página y además muchos usuarios suelen estar escuchando otro tipo de
música cuando navega en Internet, por lo que el escuchar también sonido en cada página que visita puede
resultar algo molesto.

Los formatos de sonido más habituales en Internet son el WAV, el MP3 y en algunas ocasiones el MIDI,
aunque existen otros formatos diferentes que también pueden utilizarse. Lo ideal es incluir algún archivo de
audio que no ocupe mucho espacio, y que no por ello sea de mala calidad.

El navegador Internet Explorer puede reconocer la etiqueta <bgsound>, que se utiliza para incluir sonido de
fondo. Esta nueva etiqueta no necesita etiqueta de cierre.

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

Con el atributo loop indicamos el número de veces que se tienen que reproducir el sonido. Si se desea que el
archivo de audio se reproduzca continuamente en un bucle, habrá que asignarle el valor infinite o -1.

Por ejemplo, podríamos insertar un sonido de fondo escribiendo el siguiente código:

<bgsound src="varios/audio.mid" loop="-1">

La etiqueta <bgsound> puede situarse en cualquier parte del documento, pero es preferible que la situemos
siempre en un sitio fácil de encontrar, por si deseamos hacerle alguna modificación. Podríamos, por ejemplo,
incluirla justo debajo de la etiqueta <body>.

Vídeo y audio <embed>
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">

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" >onido de fondo <bgsound>

Añadir una música de fondo a una página tiene pros y contras, si el sonido es apropiado al contenido de la
página, puede hacerla más atractiva en contrapartida la descarga del archivo de sonido supone una carga que
puede ralentizar la visualización de la página y además muchos usuarios suelen estar escuchando otro tipo de
música cuando navega en Internet, por lo que el escuchar también sonido en cada página que visita puede
resultar algo molesto.

Los formatos de sonido más habituales en Internet son el WAV, el MP3 y en algunas ocasiones el MIDI,
aunque existen otros formatos diferentes que también pueden utilizarse. Lo ideal es incluir algún archivo de
audio que no ocupe mucho espacio, y que no por ello sea de mala calidad.
El navegador Internet Explorer puede reconocer la etiqueta <bgsound>, que se utiliza para incluir sonido de
fondo. Esta nueva etiqueta no necesita etiqueta de cierre.
A través del atributo src hay que especificar la ruta y el nombre del archivo de audio.
Con el atributo loop indicamos el número de veces que se tienen que reproducir el sonido. Si se desea que el
archivo de audio se reproduzca continuamente en un bucle, habrá que asignarle el valor infinite o -1.
Por ejemplo, podríamos insertar un sonido de fondo escribiendo el siguiente código:
<bgsound src="varios/audio.mid" loop="-1">

La etiqueta <bgsound> puede situarse en cualquier parte del documento, pero es preferible que la situemos
siempre en un sitio fácil de encontrar, por si deseamos hacerle alguna modificación. Podríamos, por ejemplo,
incluirla justo debajo de la etiqueta <body>.
Vídeo y audio <embed>

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">

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" >

Películas Flash <object> ...

Las películas Flash son animaciones con la extensión SWF. Suelen incluirse en las páginas iniciales de los
sitios web, y se utilizan a modo de presentación hacia los usuarios. También pueden utilizarse como botones
de las barras de navegación.
Estas películas pueden crearse mediante el programa Flash de Macromedia, y necesitan que el usuario tenga
instalado el plug-in para poder ser visualizadas.
La etiqueta <object> puede utilizarse para insertar diferentes objetos dentro de la página, como pueden ser
archivos de audio, archivos de vídeo, imágenes, etc.
El objetivo del uso de la etiqueta <object> es la de que no se produzcan incompatibilidades por las distintas

etiquetas soportadas por unos u otros navegadores.
Las animaciones Flash se insertan del mismo modo que los archivos de audio y de vídeo, a través de la
etiqueta <embed>, pero debido a que tiene más posibilidades de que se produzcan incompatibilidades entre
los distintos navegadores, necesita también de la etiqueta <object>.
Como el uso de la etiqueta <object> puede resultar bastante complicado, vamos a ver solamente un caso
concreto para la inserción de un archivo SWF.
Por ejemplo, vamos a analizar el código que habría que escribir para insertar la animación Flash de la derecha.

El código a escribir sería el siguiente:
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0"
width="200" height="100">
<param name="movie" value="graficos/pelicula.swf">
<param name="quality" value="high">
<embed src="graficos/pelicula.swf" width="200" height="100" quality="high"
pluginspage="http://www.macromedia.com/go/getflashplayer"
type="application/x-shockwave-flash"></embed>
</object>

En primer lugar vamos a analizar la etiqueta <embed>. En ella aparecen tres atributos que no conocíamos.
A través del atributo quality se especifica la calidad con la que se reproducirá la animación Flash. Puede valer
high (alta), autolow (baja automática), o low (baja). Si no se incluye este atributo, se considera que la ca lidad
será automáticamente alta.

A través del atributo pluginspage se especifica la página desde la que se podrá descargar el plug -in necesario
para reproducir la animación Flash, para que si algún usuario no lo tiene aún instalado en su ordenador pueda
descargarlo.
A través del atributo type se especifica el tipo de fichero, para que el navegador pueda saber qué tipo de
programa necesita ejecutar para reproducir la animación.
Ahora vamos a analizar la etiqueta <object>.

A través del atributo classid se identifica al objeto. Cuando el objeto es una animación Flash, el atributo classid
debe valer clsid:D27CDB6E-AE6D-11cf-96B8-444553540000.
A través del atributo codebase se especifica la dirección en la que se encuentran los componentes externos
necesarios para reproducir la animación.

Los atributos width y height se utilizan del mismo modo, y deben tener el mismo valor, que en la etiqueta
<embed>.

Por último, vamos a analizar la etiqueta <param>. Esta etiqueta se utiliza para especificar los valores
necesarios para la inicialización de un objeto.
La etiqueta <param> no necesita etiqueta de cierre, y ha de contener los atributos name y value. El atributo
name indica el nombre de la característica que va a ser definida, y value indica su valor.
Por ejemplo, para indicar la ruta del archivo, que en la etiqueta <embed> aparece especificado por el atributo
src, es necesario incluir también una etiqueta <param>, en la que name tenga el valor movie.
Por eso aparece la línea <param name="movie" value="graficos/pelicula.swf">.
Para indicar la calidad de reproducción, que en la etiqueta <embed> aparece especificado por el atributo
quality, es necesario incluir también una etiqueta <param>, en la que name tenga el valor quality.
Por eso aparece la línea <param name="quality" value="high">.
Las animaciones Flash se reproducen de forma automática al cargarse la página, y su reproducción es
continua.
Para hacer que una animación no se reproduzca automáticamente, habrá que indicarlo mediante el atributo
play, que debe incluirse dentro de la etiqueta <embed>.
El atributo play puede valer true o false. Para que la animación no se reproduzca automáticamente, el valor de
play debe ser false.
También habrá que insertar la línea <param name="play" value="false">.
Lo mismo ocurre para hacer que la reproducción no sea continua. Habrá que insertar el atributo loop en la
etiqueta <embed>.
El atributo loop puede valer true o false. Para que la animación no se reproduzca continuamente, el valor de
loop debe ser false. De este modo, solo se reproducirá una vez.
También habrá que insertar la línea <param name="loop" value="false">.

EJERCICIO DE PRACTICA

1 crear el archivo menu.htm, con una lista siguiente:
2 Inserta una línea en blanco debajo de la etiqueta <basefont>, y escribe el siguiente código en ella:
<bgsound src="varios/audioanimales.MID" loop="-1">
Con este código estarás estableciendo el archivo audioanimales.MID como sonido de fondo de la página, que
se reproducirá continuamente en un bucle infinito (loop="-1").
3 Haz clic sobre la opción Guardar del menú Archivo.
4 Abre el documento menu.htm, que acabas de guardar, en un navegador, y comprueba que funciona.

Ahora vamos las palabras del menú se van a sustituir (INICIO, PROGRAMACION, PAGINAS WEB,
INTRODUCCION A LA INGENIERIA)

1 Abre otra vez el archivo menu.htm
2 Sustituye la palabra INICIO por el siguiente código:
<param name="movie" value="binicio.swf">
<embed src="binicio.swf" width="100" height="23" quality="high"
pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" >
</embed>
</object>
Nota: se ha escrito en el color de los valores del usuario unicamente los valores que cambian al insertar un
botón Flash.

3 Sustituye la palabra PROGRAMACION por el siguiente código:
<param name="movie" value="bprogramacion.swf">
<embed src="bperros.swf" width="100" height="23" quality="high"
pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" >
</embed>
</object>

4 Sustituye la palabra PAGINAS por el siguiente código:
<param name="movie" value="bpaginas.swf">
<embed src="bgatos.swf" width="100" height="23" quality="high"
pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" base=".">
</embed>
</object>
5 Sustituye la palabra INTRODUCCION por el siguiente código:
<param name="movie" value="bintroduccion.swf">
<embed src="bconsultas.swf" width="100" height="23" quality="high"
pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" base=".">
</embed>
</object>
6 Haz clic sobre la opción Guardar del menú Archivo.
7 Abre el documento menu.htm, que acabas de guardar, en un navegador, y comprueba que obtienes una
página como la que aparece si pulsas aquí.

EJERCICIO PARA ENTEGA FINAL DE PERIODO
Teniendo en cuenta los últimos avances en tecnología, realice una página utilizando los marcos donde
se plasme los avances de la tecnología en celulares y aparatos tecnológicos.

El menú debe contener :
Inicio
Celulares de primeras tecnologías
Celulares de media tecnología
Celulares de última tecnología
Pc de escritorio
Pc portátiles

La página index o principal debe llevar una imagen atractiva y animaciones.
En conclusión debe crear 6 páginas cada una con el título del menú.

Guia de repaso html11

Recomendados

Recomendados

Más contenido relacionado

La actualidad más candente

La actualidad más candente (18)

Destacado

Destacado (20)

Similar a Guia de repaso html11

Similar a Guia de repaso html11 (20)

Más de María C. Plata

Más de María C. Plata (20)

Guia de repaso html11