Curso de HTML

HTML

Cuarta y última entrega

HTML: HYPER TEXT MARKUP LANGUAGE.

Hola, y ¿cómo les fué? entiendo que la tercera clase fue bastante intensiva, pero por suerte en esta última trataremos frames o marcos, sonido y como mapear una imágen.

Frames o Marcos

Visitemos la siguiente página: HUARRANCHI
Una vez que estamos dentro, vayamos al menu ver y seleccionemos Código fuente, van a observar que ese html no contiene ningún body, ¿lo notaron?.

Simplemente porque es un sitio que esta desarrollado en frames y esta dividido en dos marcos o frames.

Por eso en el código lo que podemos observar, es como esta realizado el conjunto de marcos, de frames, son dos e indica que html va inscrustado en cada marco, en este caso serian.....

<html>
<head>
<title>Huarranchi Turismo - Un reencuentro con la naturaleza</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<frameset cols="137,655*" frameborder="NO" border="0" framespacing="0" rows="*">
<frame name="leftFrame" scrolling="NO" src="botonera.htm" noresize frameborder="NO" bordercolor="#000066">
<frame name="mainframe" src="proyect.htm" frameborder="NO" bordercolor="#000066" noresize>
</frameset>
<noframes>
<body bgcolor="#FFFFFF">
</body>
</noframes>
</html>

..... botonera.htm y proyect.htm, ¿lo ven?, tratemos de hacer una lectura del código que vemos...
Comenzamos con html, el head (cabezal del html), el título... <title>Huarranchi Turismo - Un reencuentro con la naturaleza</title> y cuando cerramos el head, desaparece el body y colocamos el tag <frameset> y lo cerramos con </frameset>. Con este tag indicamos que famos a utilizar FRAMES entonces, le diremos como dividir la ventana principal, la que contiene tooodos los marcos o frames.

Para definir las divisiones utilizamos el tag <frame> </frame>

Veamos los correpondientes atributos:

TAG FRAMESET
rows	filas, cantindad de filas en que vamos a dividir el html que los contenga a los marcos en filas.
rows	<frameset rows="25%,75%">
cols	columnas, cantindad de filas en que vamos a dividir el html que los contenga a los marcos en columnas. El asterisco indica que ocupe la segunda columna todo el resto de pixels (aca no se uso porcentaje, que también se puede utilizar) y el asterisco tambien se utiliza en los rows.
cols	<frameset cols="120,*">
bordercolor	Le damos color al relieve del borde
framespacing	ancho del borde de los marcos
TAG FRAME
name	nombre del frame o marco
src	ruta donde está ubicado el html que contiene por defecto al marco.
marginwidth	margen izquierdo y derecho del marco en puntos.
marginheight	margen superior e inferior del marco en puntos.
scrolling	indicamos yes, no o auto, para la aparición de las barras de desplazamiento.
noresize	si damos este atributo NO dejaremos que el usuario, el espectador de la página html corra a su gusto el borde del frame y así reescalar el tamaño del frame o marco, es decir, conviene colocarlo así respetan nuestra distribución en nuestros desarrollos webs.
borde	Indicamos el grosor del relieve del borde entre marcos o frames. Si colocamos 0 es por defecto invisible y si colocamos 1 o + estamos hablando de unidades de pixels.

Ustedes me harían una pregunta a todo esto... ¿para qué colocarle un nombre a un frame?, sencillamente para que cuando realicemos vínculos en un botón por ejemplo colocado en un marco y queremos que el vínculo llame a un html en otro marco, agregaremos ahora un nuevo concepto, el destino, target, entonces en ese botón le decimos:

Target="name del marco que hemos colocado"

Target=_blank (abrimos el vínculo en una página, en un nuevo navegador.)

Target=_self (mostramos el vínculo en el mismo navegador y marco de donde hayamos hecho click en el vínculo.)

Target=_parent (mostramos el vínculo en el frameset definido anteriormente al actual.

Target=_top (abrimos el vínculo en el mismo navegador eliminando todo tipo de marco, dejándolo atras en el navegador y forma parte del navegador sin frames algunos salvo que el html al cual llamamos tenga en marcos, en resumen es un blank pero en el mismo navegador.)

ver ejemplo

Sonido

Podemos colocar en nuestros html sonidos que se activen cuando entran en ellos, para eso tenemos que utilizar el atributo <bgsound> para el Internet Explorer.

Veamos sus parámetros:

src	ruta del archivo.wav, .mid que vamos a utilizar.
loop	si colocamos true lo hace indefinidamente, si le colocamos algun número, será la cantidad de veces que lo va a realizar, por ultimo false, no lo repetira, solo lo emitirá una sola vez.
ejemplo: <bgsound src="mimusica.wav" loop="3">

Para el Netscape utilizaremos <embed>

Veamos sus parámetros:

src	ruta del archivo.wav, .mid que vamos a utilizar.
loop	si colocamos true lo hace indefinidamente, si le colocamos algun número, será la cantidad de veces que lo va a realizar, por ultimo false, no lo repetira, solo lo emitirá una sola vez.
autostart	true o false
volumen	un número, nos daría el volumen del sonido.
controls	smallconsole una seria de controles para el sonido, play, pausa y stop.
ejemplo: <EMBED src="mimusica.mid" loop="true" autostart=true volume=50 controls=smallconsole>

Mapeo de una imágen

Hasta ahora nos dimos cuenta que siempre realizamos vínculos desde un texto o toda una imágen, con el mapeo podemos vincular partes de una imágen y tener en una misma imágen más de un vínculo. Veamos el ejemplo:

Se habrán dado cuenta que podemos tener tres tipos de mapas, uno cuadrado:

<area shape="rect" coords="5,4,42,45" alt="CUADRADO" title="CUADRADO">

uno circular:

<area shape="circle" coords="110,34,26" href="#" alt="CIRCULAR" title="CIRCULAR">

uno poligonal (un predeterminado, no importanto su forma, nosotros se la damos en forma personalizada.):

<area shape="poly" coords="3,97,20,78,35,83,119,75,126,97,30,105,22,90" href="#" alt="PREDETERMINADA" title="PREDETERMINADA">

Para poder realizarlo necesitamos dos cosas, colocar un nombre al mapa, y luego asignarlo a una imagen.

shape	forma de la zona a vincular, cuadrado, circulo o poligonal
coords	Coordenadas como pensamos... separadas por comas, definimos la zona. Damos los X y los Y de la zona.
href	Url a la cual vincularemos
nohref	Especifica que esa zona no tiene vínculo alguno.
alt	texto, aclaración, que se presentará en lugar de la imágen en los navegadores no gráficos para acceder al enlace.

Como colocar las coordenadas:

Si lo deseo rectangular	x1,y1,x2,y2 (primero la esquina superior izquierda y luego la inferior derecha)
Si lo deseo circular	x,y,radio (x,y es el punto centro del círculo, luego el radio del círculo.)
Polígono irregular	x1,y1,x2,y2,x3,y3,x4,y4,x5,y5,x6,y6 cada pareja xy es un punto del polígono, por defecto la ultima se unirá a la primera.

¡Suerte! y hasta la próxima.

Paola Fraticola de García Torres