Tutorial de HTML


el término HTML significa Hyper Text Markup Language y se refiere al lenguaje elemental para el desarrollo de una página. Aunque se conocen varias versiones del lenguaje como la 3.0, 3.2, 4.0. En esta versión(4.0) se incorporan las especificaciones sobre tablas, frames, hojas de estilo, scripts. etc. que veremos más adelante.

Funcionamiento

Los archivos de tipo .html están colocados en un servidor de cualquier proveedor de Internet. Cuando los visitantes de su página escriben la dirección de su página o URL, ellos estan llamando al archivo el cual está en el servidor web de su sitio. Ej: http://www.suservidor.com/archivo.html o htm

El navegador sólo agrega el texto y las etiquetas escritas en HTML que pueden ser entendidas . Cualquier otro elemento extra, será ignorado por el navegador
También es importante saber que HTML evoluciona constantemente, por lo que nuevas adiciones al lenguaje son agregadas (Hojas de Estilo o CSS, DHTML, Javascript). Pero no se preocupen por eso, ya que primero debemos profundizar más acerca del lenguaje HTML.

Conformación
(Fig 1)

<html> Etiqueta de Inicio de Documento HTML.
<head> Etiqueta de inicio de encabezamiento.
<title> TITULO </title> Etiquetas de principio y final de título.
</head> Etiqueta de final de encabezamiento.
<body> Etiqueta de comienzo del cuerpo.


Etiquetas que conforman la pagina


</body> Etiqueta de final del cuerpo.
</html> Etiqueta de final de Documento HTML.



El lenguaje HTML está conformado por medio de tags (etiquetas), así como lo muestra la Figura 1. Cada una de ellas describe un tipo de elemento. También a cada elemento se le pueden agregar atributos. Por ejemplo, para alinear un párrafo al centro se escribe:
<p align=center> En este caso, "p" se refiere al párrafo; "align" el cual es el alieamiento(derecha,izquierda,centro). Tal como queda señalado, este caso, citado como un ejemplo, constituye uno de los muchos códigos necesarios para la realización de un sitio.

Observaciones para la creación de tags :

No importa si las letras van escritas en mayúscula o minúscula; es decir, escribir <b> es lo mismo que <B>
Cuando se crea un tag, debe recordarse dejar un espacio entre el nombre y el atributo y asignar el signo =, como : <p align=center>
Cuando se llama a un archivo específico, éste debe ser colocado entre comillas, ejemplo: <img="logo.gif">
Si usted no especifica el valor del atributo (center-right-left) el navegador lo asignará automáticamente.

Herramientas

Existen herramientas tales como WYSIWYG, término que significa "What You See Is What You Get" ("Lo Que Tu Vez Es Lo Que Tu Obtienes"). Se llama así a los editores de HTML que dejan crear la página en un editor y la ordenan sin necesidad de programación para luego poder verla en el editor así como en el navegador.

Aunque en este momento existen varias herramientas avanzadas, como la mencionada anteriormente (WYSIWYG), que no necesitan de la creación del código,
considero que toda persona interesada en el tema, principiante o no, debe tener nociones básicas del lenguaje ya que éste ayudará al lector a entender más lo que esta haciendo y solucionar pequeños problemas que no pueden ser arreglados en un editor.

Otra de las mejores formas de aprender y entender un código escrito en HTML es accediendo a las páginas web y mirándolas mediante la opción de Ver Fuente o View Source en Internet Explorer y Origen de la Página en Netscape Navigator.

Se lo llama "sitio" o "web" a la página. Todo sitio debe estar ubicado en algún lugar de la red para que las personas conectadas a Internet puedan visitarlo. Existen varios sitios que colocan su página, sin costo  pero con condiciones a cumplir. Abajo citamos los más conocidos y sus condiciones:

 GEOCITIES ( http://www.geocities.com) Recibe su web de forma gratuita, pero exige la aparición de una nueva ventana en su página, como también watermarks (imágenes que saltan al moverse la página). Tiene varios "vecindarios", y usted puede elegir el más acorde con su sitio. Es decir, si su web trata de Fantasía y Ciencia Ficción su vecindario sería SilliconValley.

ANGELFIRE ( http://www.angelfire.com ) La única condición a cumplir es la colocación de un banner (publicidad) que puede ser borrado si así usted lo desea.

XOOM (http://xoom.com/home ) Incluye así como Geocities y Angelfire, una cuenta de email gratis. Como también espacio ilimitado, es decir, puede agregar cuanto desee a su sitio. Posee una barra de publicidad colocado en la parte de arriba.

HYPERMART ( http://www.hypermart.net ) Ofrece 10 megas de espacio, y un directorio cgi-bin para el colocamiento de cgi scripts (programas mas avanzados que no tocaremos en este capítulo).Tambien ofrece a los usuarios de FrontPage (programa para crear sitios) extensiones que ayudarán a subir al servidor de hypermart lo realizado con dicho programa.

TRIPOD ( https://www.tripod.com/planet/membership/signup ) Después de Geocities es el más difundido en Internet. Ofrece 11 Megas de espacio y una cuenta de email. Exige la aparición de una nueva ventana o la colocación de un banner. Usted elige.

 
Ejecute su editor de texto elija Archivo ¡V Nuevo, y teclee el código proporcionado mas abajo:

<! Dentro de este tag pueden agregarse comentarios. Comienza Codigo HTML -->

<html>

<head>

<title> Mi primera P&aacute;gina </title>

</head>

<h1 align="center">La p&aacute;gina de Nico </h1>

<hr>

<h2 align="center"> Bienvenido/a! </h2>

<p align="left">En este sitio usted podr&aacute; encontrar mucha informaci&oacute;n referente al
desarrollo de sitios web. Espero el mismo sea de su uso y utilidad. </p>

</body>

</html>

<!
Finaliza codigo HTML -->

En el código HTML proporcionado más arriba podemos observar la inserción de estos códigos (&aacute; &oacute; &iacute; ) que remplazan a las letras acentuadas á, ó, í respectivamente. Como se observa, se agrega el tag necesario <html> y las cabeceras , luego agregamos el título, y cerramos la cabecera. Podemos ver la inserción de <h1> que sería el título más importante, y éste se encuentra alineado al centro; <h1 align="center">Escribimos el título ( "La página de Nico") y lo cerramos con </h1> .
Agregamos una barra, para que sea mas interesante (<hr>) Después insertamos el título secundario, <h2> y de la misma forma del primario, lo alineamos. Escribimos el texto y lo cerramos así: </h2>.
Más tarde se abre el párrafo con <p> y éste es alineado a la izquierda como pueden observar. Al terminar, el párrafo es cerrado nuevamente con el signo </p>.
Para finalizar, cerramos el cuerpo (</body>) y el HTML (</html> .

Para comprobar cómo luce su primera página web, guarde y titulela como "página1.html", luego arranque su navegador. Elija la opción de File-Open Location (Archivo-Abrir Locación) y elija el archivo donde ha escrito el código proporcionado.

Las famosas ligas de hipertexto (links o enlaces) fue la caracterizca que más hizo resaltar a la web, aparte del desarrollo de muchas otras aplicaciones. Estás son necesarias para unir distintos documentos.

La estructura del enlace es: <A HREF = "zzz">ejemplo</A>

En este caso "zzz" es el destino del enlace y "ejemplo" el texto del mismo.

Existen varios de tipos de enlaces.

1-Enlaces a otros sitios
2-Enlaces dentro de la página
3-Enlaces a otra de mis páginas
4-Enlace de dirección de email

Enlaces a otros sitios

La etiqueta encargada de hacer esto es la siguiente:

<A HREF = "www.yagua.com">El primer buscador Paraguayo </A>

Analicemos esta etiqueta:

El comando A HREF que observamos mas arriba, indica que lo que se esta realizando es un enlace. Luego entre comillas podemos ver la direccion del sitio donde nos lleva el vínculo. Luego de cerrar la etiqueta podemos observar el texto del vinculo (En este lugar puede agregarse texto o una imagen ¡V proximo capitulo) Y luego se abre la otra etiqueta que cierra el vínculo: </A>.

Enlaces dentro del sitio

Si su sitio posee una página con un texto bastante largo, lo mas aconsejable es dar un salto de una posición a otro determinada.
La etiqueta de la cual estamos hablando es la siguiente:

<A HREF = "#texto2">Texto 2</A>

Este tag esta indicando un link a otra parte de su sitio, que titula "texto2". Para ubicar el lugar donde quiere que este texto2 se encuentre, se debe agregar esta etiqueta:

<A NAME = "texto2"></A>

Aquí se encontrará el texto 2. Aquí aparecerá su visitante al hacer click en el link " Texto 2".

Podemos observar la inclución del comando A NAME , el cual determina el lugar donde se encontrará el texto que usted ha vinculado. No necesita escribir nada entre los tags de <A NAME> y </A>.

Enlaces a otra de mis páginas

En el caso que posea más de una página, la forma de conectarlas unas a otras es la siguiente:

<A HREF = "bienvenido.html">Entrar</A>

Si queremos acceder a un lugar concreto en el sitio (bienvenido.html"), donde existe la etiqueta <A NAME = " cualquiertexto"></A>, entonces escribimos <A HREF = "bienvenido.html#cualquiertexto">Cualquier texto</A>.

Enlace a direccion de email

Con este vinculo el visitante podrá enviar un email, con un simple click en el enlace que veremos a continuación:

Escriba sus comentarios a<A HREF = mailto:tumail@servidor.com>Su Nombre </A>

En este ejemplo, vemos el comando A HREF que indica un vinculo, y sustituimos el destino del enlace ¡V mailto: - atributo que significa un envio via email, luego de este, agregamos la dirección del remitente. Entre tags, añadimos el nombre del dueño del sitio. Más tarde, se vuelve a cerrar la etiqueta.

Para terminar con este tema de enlaces/vinculos, les propongo arrancar su editor de texto, escribir el código siguiente y analizarlo minuciosamente.

<! Dentro de este tag pueden agregarse comentarios. Comienza Codigo HTML -->
<html>
<head>
<title> Mi primera Página </title>
</head>
<body>
<h1 align="center">La página de Nico </h1>
<hr>
<h2 align="center">Bienvenido/a! </h2>
<p align="left">En este sitio usted podrá encontrar mucha información referente al
desarrollo de sitios web. Espero el mismo sea de su uso y utilidad. </p>
<p><br>
Mis sitios favoritos son: </p>
<p><a href="http://www.yagua.com">Yagua </a><br>
<a href="http://www.hotmail.com">Hotmail </a><br>
<a HREF="http://www.globalchat.com.py">El sitio del Globalchat </a></p>
</body>
</html>
<! Finaliza codigo HTML -->La inserción de gráficos deja la página mucho más atractiva y visitada

Aunque el abuso de los mismos la perjudica, ya que vuelve más lenta la carga del sitio en sí, y hace que los visitantes tiendan a dejar el sitio. Por eso se debe ser racional al agregar gráficos NO ABUSAR. Esparcirlos bien, y no agregar imágenes muy grandes.

Bien, la etiqueta necesaria para agregar una imagen es la siguiente:

<IMG SRC="imagen.gif">

IMG = Image (imagen)
SRC = Source (fuente)

Dentro de este tag, pueden ser incluidos los siguientes atributos:

ALT = "descripción"

Este comando indica la descripción de la imagen. Lo máximo que se aconseja escribir es una palabra. Es muy importante la inserción de este atributo ya que, si por alguna razon, el navegador no puede cargar la imagen, la descripción de la misma ayudará al visitante a darse una idea de lo que representa.

BORDER = "t"

Con este atributo se indica el tamaño del borde de la imagen que está contenida en un enlace. Es decir, cuando una imagen posee un vínculo con una página ésta es rodeada por un borde, y este atributo decide el tamaño del mismo. Ejemplo:
<A HREF = "www.ejemplo.com"><IMG SRC = "imagen.gif" BORDER = "0"></a>

El borde en este ejemplo es nulo. Si queremos que sea visible agregamos 1, y así sucesivamente para hacerlo más grueso. El color que rodee la imagen depende del color que usted le haya proporcionado al atributo LINK.

ALIGN = " posicionamiento "

Este determina las posiciones de la imagen, las cuales pueden ser:

TOP = Alinea el texto de la imagen y ésta misma en la zona superior.

MIDDLE = Alinea el texto de la imagen y ésta misma en el medio.

BOTTOM = Alinea el texto de la imagen y ésta misma en la parte de abajo.

WIDTH = nn

Depende de este comando el ancho que se le otorga a las imágenes en pixels.

HEIGHT = nn

Depende de este atributo el largo que se le da a la imagen en pixels.

Es importante conocer todos estos atributos, para así poder lograr un buen manejo de las imágenes en el momento de ubicarlas en su sitio.

Después de mirar todos los atributos, damos un ejemplo de lo que quedaría un imagen con todos ellos:
<IMG SRC = " imagen.gif" ALT = "imagen" WIDTH=160 HEIGHT=120 ALIGN=BOTTOM>
La imagen "imagen.gif" sera colocada abajo, de ancho tendra 160, y de largo 120 en pixels.

Las tablas ademas de ser sumamente utiles dan una organizacion y forma elegante a nuestro documento. Incluyen tambien, varias etiquetas que permiten la modificacion de estas tablas, tanto en tamaño, como color, etc.

Tambien es importante la buena utilizacion de estas tablas, puesto que si son mal utilizadas tambien perjudican el tiempo de carga del documento.

Al final de esta leccion usted podra no solo crear tablas, sino tambien organizar su sitio web de una manera bastante simple, y dejarlo elegante y sobre todo profesional.

Tag o etiqueta basica:

Estas tablas, requieren la insercion de la etiqueta fundamental:

<table> ... </table>

Dentro de estas dos etiquetas van todo el contenido de la tabla en general.
Es decir las filas, celdas y los modificadores de todos estos.

Mas abajo se encuentran las etiquetas para las filas y celdas respectivamente.

Filas <tr> .contenido dentro de filas. </tr>
Celdas <td> .contenido dentro de celdas. </td>

Dentro de todas estas etiquetas podemos incluir tanto color, imagen o texto. Depende de usted.

Mas abajo le mostramos un ejemplo de todo lo desarrollado hasta el momento. Abra su editor de texto y tipee lo siguiente:


<html>
<head>

<title> Mi pagina con Tablas </title>

</head>

<body>

<table>

<tr>
<td> Fila 1 -- Celda, Columna 1 </td>
<td> Fila 1 -- Celda, Columna 2
</tr>
<tr>
<td> Fila 2 -- Celda, Columna 1 </td>
<td> Fila 2 -- Celda, Columna 2 </td>

</table>

</body>

</html>


Luego, abralo en su  navegador y podra ver como ha organizado su texto facilmente.

MODIFICADORES DE LAS TABLAS

Dentro de todas estas etiquetas existen ciertos modificadores para cambiar el estilo de su TABLA.

Borde:

<table border="tamano que desea agregar"> ej, <table border="1"></table>

Ancho:

<table width="tamano del ancho"> ej, <table width="300"></table>

Alto:

<table height="tamano del alto"> ej, <table height="200"></table>

Espacio dentro de las celdas:

<table cellpadding=espacio> ej, <table cellpadding=100> </table>

Aumenta bordes entre celdas:

<table cellspacing=anchura> ej, <table cellspacing=120> </table>

Color: (tabla de color azul marina)

<table bgcolor="color"> ej, <table bgcolor="#000080">

Justificar Tabla: (por defecto tabla queda alineada a la izquierda, depende de anchura que pongamos)

Centro - <center> <table> </table> </center>

Titulo - <table> <caption> Titulo aqui </caption> </table>


MODIFICADORES DE CELDAS

Los modificadores de mas arriba se referian a la tabla en si. Ahora , sin embargo, centraremos nuestra atencion en dar formatos a las celdas que se encuentran en ella.

Podemos modificar estas celdas tanto horizantal (align) como verticalmente (valign)

<td align=horizontal>

Modificador Descripcion

<td align=left> Celda alineada a la izquierda
<td align=center> Celda alineada al centro
<td align=right> Celda alineada a la derecha
<td valign=vertical>

Modificador Descripcion

<td valign=top> Celda alineada hacia arriba
<td valign=middle> Celda alineada hacia el medio
<td valign=bottom> Celda alineada hacia abajo (base de la celda)


Asi mismo como las tablas nos permiten modificar la medida, las celdas tambien lo hacen con los mismos modificadores: WIDTH (ancho) y HEIGHT (alto)

Ej. Celda con 300 pixels de ancho y 200 de alto

<td width=300 height=200> .. </td>

Celdas con color

Las celdas con color fueron un gran agregado de Microsoft. Estas permiten separar celdas con distintos colores dentro de una tabla.
Funcionan como los colores dentro de las tablas.

Existen ciertos colores predeterminados ya para estas celdas, que los facilitare mas abajo.

Color Valor

aqua azul claro
black negro
blue azul
fuchsia fuxia
gray gris
green verde
maroon marron
navy azul marino
purple purpura
red rojo
silver plateado
teal verde oliva
white blanco
yellow amarillo


Ej =Celda con 300 de ancho, 200 de alto y de color azul marino.

<td width=300 height=200 bgcolor=navy>

Celdas mas complejas

Para crear tablas mas complejas tiene la opcion de agregar etiquetas con las cuales las celdas pueden ocupar varias filas o columnas.

Son las etiquetas "rowspan" y "colspan" . Tienes un ejemplo mas adelante:

Otros usos con las tablas

Asi mismo como utilizamos tablas para crear estadisticas, y otros, tambien podemos utilizarla como columna o separadora entre dos imagenes.

Si tenemos una imagen y queremos colocarla al lado de un texto, con dos columnas podemos hacerlo. Mas abajo incluyo un codigo fuente que hara lo que anteriormente habiamos señalado.


<html>

<head>

<title> Pagina con tablas </title>

</head>

<body bgcolor="#ffffff" text="#000000" link="#000080" vlink="#000080">

<table>

<tr>

<td>
<img src="/imagen.gif" border="0" width="200" height="150" >
</td>

<td >
<font face="Arial" size=2>Aqui escribimos algo al lado de la <b>imagen</b>.
En este ejemplo podemos observar que el texto se encuentra al lado de la imagen utilizando una simple tabla. <b>Es facil, verdad?</b></font>
</td>

</tr>

</table>

</body>

</html>


Arriba encontramos un codigo fuente que explicaba como ubicar una imagen al lado de un parrafo.
Tambien podemos aprovechar el estilo de los bordes de las tablas para insertar una imagen dentro de ellas.
En el codigo HTML siguiente, podra observar como agregar a una imagen un borde bastante elegante.

<html>

<head>

<title> Imagen con bordes </title>

</head>

<body bgcolor="#ffffff" text="#000000" link="#000080" vlink="#000080">

<table border="10">

<caption> Mi imagen con bordes </caption>

<tr>

<td> img src="/imagen.gif" border="0" width="200" height="150" > </td>

</tr>

</table>

</body>

</html>


Evidentemente existen muchas formas mas de utilizar estas tablas, y si las demostraramos en esta leccion nunca terminariamos. Por ello, desde este momento, la creacion de nuevas formas de disposicion de sus tablas depende exclusivamente de su ingenio e imaginacion.
Con todo lo dado hasta ahora, usted podra ya crear un sitio web con enlaces, imagenes, fondos y bastante organizado. En el proximo numero, nos enfocaremos en los frames, que ayudan tambien a organizar y dividir mejor su sitio web, asi tambien explicaremos sus ventajas y desventajas.

Los marcos, al igual que las tablas, permiten organizar la informacion, aunque estas lo hacen de una manera curiosa. Los frames o marcos te permiten deslizar a traves de varias ventanas. Cada de uno de estos frames es o puede ser una documento HTML que puede estar ubicado en servidores distintos.

A lo largo de este capitulo veremos como crear marcos para optimizar la navegacion en sitio, y dejarlo con una buena presencia.

Tanto como todo elemento de HTML, los marcos requiere de una etiqueta especial. <FRAMESET> ...</FRAMESET> Dentro de esta etiqueta o tag, puedes incluir varios modificadores para crear marcos con filas o columnas.

Para entender un poco mejor el tema de marcos, fijese que la etiqueta FRAMESET remplaza a BODY (Cuerpo del sitio web) .

Dentro de la etiqueta podemos agregar por ejemplo:
<FRAMESET ROWS=filas COLS=columnas> ... </FRAMESET> Dentro de estas etiquetas incluimos otro frame que es donde esta el sitio o documento HTML que queremos incluir en nuestro "contenedor de marcos". El tag a definir seria <FRAME SRC="documento HTML">.

este es el codigo:
<HTML>
<HEAD>
<TITLE> EL SITIO CON MARCOS </TITLE>
</HEAD>

<FRAMESET COLS=50%,50%>
<FRAME SRC="/documento1.html>
<FRAME SRC="/documento2.html>
</FRAMESET>

<HTML>

 
Agregas como siempre la etiqueta de abertura del documento <HTML> Luego comenzamos con la cabecera <HEAD> que desplega el titulo del sitio <TITLE>, y mas adelante lo cerramos.
Ahora comenzamos con los frames. Se abre el tag <FRAMESET> con el atributo "COLS" que indica columnas. Como existen solamente dos columnas del mismo tamaño, escribimos 50%,50% que indica que las dos tienen el mismo porcentaje.(Logico, verdad?)
Bien..pero necesitamos los documentos HTML que se encuentren dentro de estos marcos. Para ello insertamos la etiqueta <FRAME SCR> y dentro de la misma documento1.html que es el documento que se encontrara en el primer marco. En la segunda linea, hacemos los mismo, solo que escribimos documento2.html en vez, que sera el segundo documento para el otro marco.
Luego cerramos la etiqueta </FRAMESET>, y finalmente el documento </HTML>.

MODIFICADORES DE <FRAME>

SCROLLING

Ademas del modificador SCR de la etiqueta <FRAME> existen otros varios. SCROLLING. Significa desplazamiento. Existen tres opciones dentro del SCROLLING.

Yes:
Agrega, sea o no necesario, una barra de desplazamiento en todas las ventanas.
No:
Sin importar el largo, en ningun caso, incluye la barra de desplazamiento.
Auto:
Depependiendo del caso, agrega o no, la barra de desplazamiento. Es decir, solo si lo necesita lo hace.

NORESIZE

Un problema muy comun con los frames es que no sabemos con que navegador trabaja el usuario, y las ventanas pueden cambiar de tamaño, lo cual perjudicaria a su sitio.La solucion a este problema es agregar el modificador NORESIZE que se ajustara al tamaño del navegador del usuario sin importar cual utilice.


DIRIGIENDO MARCOS AL SITIO WEB ADECUADO

Existen dos modificadores que permiten dirigir ciertos enlaces a otro marco.

Ellos son: <NAME> y <TARGET> El modificador NAME pertenece a la etiqueta <FRAME> mientras que TARGET se indica en la etiqueta <A HREF> para llevar al usuario al marco correcto desde un enlace o link.

Entonces si tenemos el frame: <FRAME NAME="index" SRC="destino.html">

Luego en el indice escribimos: <A TARGET="index" HREF="enlace.html"> ENLACE 1 </A>

Al hacer click sobre ENLACE 1, iras automaticamente al sitio con nombre "index", es decir "destino.html".

Existen ademas ciertos valores que puede tomar el modificador NAME:

_blank Enlaces se mostraran en una nueva ventana
_parent Enlaces se mostraran en la ventana madre
_self Enlaces se muestran en la misma ventana de la cual han sido llamadas (por defecto)
_top Enlaces se muestran en la ventana de orden superior.

Hay ademas, otros modificadores de marcos mas avanzados, pero los citados en este articulo son los mas importantes. Es mas, te aseguro, que con practica podras hacer algo excelente con esta herramienta.

COMPATIBILIDAD

Existen ciertos navegadores, aunque muy viejos ya, que no funcionan bien con marcos. Por y para ello existe la etiqueta <NO FRAMES> -comentario- </NO FRAMES> que te permite dejar cierto comentario si es que el usuario posee un navegador que no soporta frames. Es decir dentro de las etiquetas de mas arriba puedes escribir algo como: "Su navegador no soporta frames"

CONCLUSION

Aunque los marcos son de gran utilidad en la web, desde hace ya un buen tiempo, debemos tener en cuenta que hacen mas lenta la carga del sitio, puesto que son varios los documentos HTML que debe cargar.

Ademas, si utilizamos documentos HTML de otros servidores, estos por A o B motivo, pueden fallar y uno de nuestros marcos no se podria observar.

En fin, no existe ninguna regla de estilo que diga que agregar frames es malo, pero solo hay que tener bien en cuenta los pros y los contras de esta herramienta.


Sonido en la web

La etiqueta necesaria para agregar sonido a tu sitio web es la siguiente:

<EMBED SRC="sonido.wav">

Sin embargo puedes agregar los siguiente modificadores para poder "manejar" el sonido en tu web.

WIDTH=largo que desea, ej WIDTH=50

HEIGHT=alto que desea, ej HEIGHT=45

AUTOSTART (comienzo automatico)

-true : La opcion true te permite inicializar el sonido de tu web automaticamente cuando el usuario accede

-false : La opcion false te permite dar la oportunidad al usuario a elegir si desea o no escuchar el sonido.

LOOP (vueltas)

true : Con esta opcion el sonido comienza, termina y vuelve a comenzar siempre.

false : Con esta opcion el sonido solo suena una vez y luego termina.

HIDDEN (esconder)

true : Si desea esconder el elemento de sonido

false : Si desea que el elemento aparezca en el sitio.

Asi, un ejemplo completo seria el siguiente:

<EMBED SRC="sonido.wav" WIDTH=50 HEIGHT=45 AUTOSTART="true" LOOP="true" HIDDEN="true">

Texto en movimiento

Asi tambien como el sonido,la marquesina tiene una etiqueta que te permite incluir texto en movimiento y modificarlo agregando la fuente, el color , la medida y la direccion que se te ocurra.

Etiqueta:

<marquee> texto en movimiento aqui </marquee>

Puede modificar el texto agregando ciertas etiquetas:

WIDTH : Calcula el largo de la marquesina

HEIGHT : Calcula el alto de la marquesina

BGCOLOR : Permite agregar un color de fondo a la marquesina

BEHAVIOR

Alternate:
Permite deslizar el texto de forma alternada

ALIGN

Left Alinea el texto a la izquierda

Right Alinea el texto a la derecha

DIRECTION

Right Mueve el texto a la derecha

Left Mueve el texto a la izquierda

LOOP Especifica la cantidad de veces que aparece la marquesina.

FUENTE DE LA MARQUESINA: Permite elegir el tipo de fuente que desee, ej, <FONT FACE="Arial" size="2"> <marquue> texto con fuente Arial </marquee> </FONT>.


volver