SlideShare una empresa de Scribd logo
1 de 19
Adriano Mazziotti [Escriba aquí] [Escriba aquí]
CREACIÓN DE PÁGINAS WEB
Todo lo que hay que saber sobre html
El lenguaje HTML
Las páginas Web están creadas con el lenguaje HTML (Hyper Text Markup Languaje).
Un documento HTML es un fichero de texto ASCII, en el que se incluye el texto que se desea
mostrar por pantalla. Además de este texto hay que introducir ciertas instrucciones o comandos,
también denominadas etiquetas, que indicarán al navegador como se debe visualizar el documento
en pantalla.
Estructura básica de un documento HTML
Todo documento HTML está dividido en una serie de bloques que forman su estructura.
<HTML> y </HTML> indica que el texto contenido entre estas dos etiquetas está escrito en lenguaje
HTML.
<HEAD> y </HEAD> información del documento que no se muestra, suele contener el título de la
página Web, que visualizará la barra de título del navegador.
<BODY> y </BODY> definen la parteprincipal o el cuerpo del documento, que se mostrará en la
ventana del navegador.
La estructura básica del documento HTML queda de esta manera:
<HTML>
<HEAD>
<TITLE> Título de la página </TITLE>
</HEAD>
<BODY>
[Aquí van las etiquetas que visualizan la página]
</BODY>
</HTML>
Como crearun documento HTML
Crear una carpeta dentro del disco duro, denominada 1ºBachillerato Ciencias o CC.SS
Abrir el bloc de notas (Menú Inicio /Programas /Accesorios)
Escribir en el bloc de notas el documento HTML
Adriano Mazziotti [Escriba aquí] [Escriba aquí]
Guardar el documento anterior (Menú Archivo /Guardar) en la carpeta creada anteriormente , con
el nombre PaginaWeb.htm (ojo la extensión es obligado que sea .htm ó .html)
Para abrir la página web creada basta con ir a la carpeta creada y hacer doble clic sobre el fichero
PaginaWeb
Ejemplo:
<HTML>
<HEAD>
<TITLE> Mi primera página Web </TITLE>
</HEAD>
<BODY>
Informática de 1º Bachillerato
Esta página ha sido creada por: Fulanito
</BODY>
</HTML>
Modificar una página web anteriormente creada
Para modificar una página web:
Abrir la pagina con el navegador correspondiente (Internet Explorer por ejemplo)
Activar el menú Ver y elegir la opción Código Fuente
Dentro del bloc de notas podremos realizar las oportunas modificaciones
Guardamos los cambios efectuados mediante el menú Archivo / Guardar
Cerramos el bloc de notas
Dentro del navegador: activar el menú Ver y elegir la opción Actualizar o pulsar F5
Encabezados
Se utiliza para destacarun texto. Existen seis niveles de encabezados, descritos por las siguientes
etiquetas:
<H1>Encabezado de Tamaño 1</H1> Encabezado de mayor tamaño
<H2>Encabezado de Tamaño 2</H2>
<H3>Encabezado de Tamaño 3</H3>
<H4>Encabezado de Tamaño 4</H4>
Adriano Mazziotti [Escriba aquí] [Escriba aquí]
<H5>Encabezado de Tamaño 5</H5>
<H6>Encabezado de Tamaño 6</H6> Encabezado de menor tamaño
Atributos:
ALIGN=left/center/right: Definen el alineamiento del encabezado. Por defecto es left.
Ejemplos: Hay que poner esto dentro del BODY o cuerpo del documento HTML
<H1 ALIGN = "center"> Encabezado de mayor tamaño, alineado al centro </H1>
<H6 ALIGN = "right"> Encabezado de menor tamaño, alineado a la derecha </H6>
Párrafos
La separación entre párrafos (dejando una línea en blanco) la conseguimos colocando la
etiqueta <P> al inicio de cada uno. Cuando escribimos en el documento el texto que queremos que
aparezca en la pantalla, veremos que éste se acomoda a ella, sin considerar los retornos del carro
en el documento fuente.
Atributos:
ALIGN=left/center/right/justify: Definen el alineamiento del encabezado. Por defecto es left.
Nota: Con los párrafos no es necesario colocar la etiqueta de final de párrafo </P>
Ejemplo:
<HTML>
<HEAD>
<TITLE>Mipágina web - 1</TITLE>
</HEAD>
<BODY>
<H1 align=center>Mi primera pagina</H1>
<P>Esta es mi primera pagina, aunque todavía es muy sencilla.
Como el lenguaje HTML no es difícil, pronto estaré en condiciones de hacer
cosas mas interesantes.
<P ALIGN="RIGHT">Aquíva un segundo párrafo alineado a la derecha.
</BODY>
</HTML>
Crear líneas horizontales
Adriano Mazziotti [Escriba aquí] [Escriba aquí]
Para crearlíneas horizontales debemos utilizar la etiqueta <HR>
Nota: Al igual que con los párrafos, no es necesario poner la etiqueta de fin de línea </HR>
Ejemplo: </P>
Ejemplo:
<HTML>
<HEAD>
<TITLE>Mipágina web - 2</TITLE>
</HEAD>
<BODY>
<H1 align="center">Misegunda pagina</H1>
<P> A continuación aparecerá una línea horizontal
<HR>
</BODY>
</HTML>
Formato físico
El texto formateado de esta manera se vera igual en todos los navegadores.
<B>[Texto]</B> Texto en Negrita
<I>[Texto]</I> Texto en cursiva
<U>[Texto]</U> Texto Subrayado
<STRIKE>[Texto]</STRIKE> Texto Tachado
<TT>[Texto]</TT> Texto tipo Máquina
<BIG>[Texto]</BIG> Texto en Fuente Grande
<SMALL>[Texto]</SMALL> Texto en Fuente Pequeña
<SUB>[Texto]</SUB> Texto como Subíndice
<SUP>[Texto]</SUP> Texto como Superíndice
Nota: Con la etiqueta <TT> y </TT> conseguimos también que el texto tenga un tamaño menor y la
apariencia de los caracteresde una máquina de escribir (typewriter).
Imágenes
Adriano Mazziotti [Escriba aquí] [Escriba aquí]
Los tres tipos de imágenes que soportan una página Web son:
Imágenes GIF (soportan hasta 256 colores), utilizado para dibujos, ilustraciones, cuadros, etc.
Imágenes JPEG/JPG (pueden presentar 16,7 millones de colores), utilizado principalmente para
fotografías.
Imágenes PNG que no es soportado por las versiones más antiguas de los navegadores.
Estos formatos de imagen utilizan algoritmos de compresión que permiten reducir
significativamente el tamaño de la imagen a comparación de otros formatos gráficos, lo que
permite una carga más rápida.
Un aspecto muy importante a tener en cuenta, es el tamaño de las imágenes, pues una imagen
grande supone un archivo grande, y esto puede resultar en un tiempo excesivo de carga, con el
consiguiente riesgo de que quien esté intentando cargarnuestra página se canse de esperar, y
desista de ello.
Para tener una imagen en nuestra página hay que cumplir 2 requisitos:
Tener guardada en la misma carpeta donde este nuestra página, la imagen que queremos mostrar
Incluir la etiqueta siguiente dentro del BODY de nuestra página web: <IMG SRC="foto.gif"> (caso de
llamarse nuestra imagen "foto" y ser de tipo GIF)
El comando IMG SRC (IMaGeSouRCe, fuente de la imagen), indica el nombre de la imagen.
Atributos:
Con el atributo ALT se introduce una descripción (una palabra o una frase breve) indicativa de la
imagen, que aparececuando el puntero del ratón se posiciona dentro de la imagen o durante el
proceso de carga de la imagen.
<IMG SRC="foto.gif" ALT="descripción">
Con el atributo ALIGN se puede elegir la posición de la imagen con respecto al texto:
<IMG SRC="foto.gif" ALIGN="TOP">Texto alineado arriba
<IMG SRC="foto.gif" ALIGN="MIDDLE">Textoalineado en medio
<IMG SRC="foto.gif" ALIGN="BOTTOM">Textoalineado abajo
<IMG SRC="foto.gif" ALIGN="RIGHT">Textoalineado a la derecha
<IMG SRC="foto.gif" ALIGN="LEFT">Texto alineado abajo
Con el atributo WIDTH y HEIGHT, se especifica la anchura y altura en píxeles con las que se va a
mostrar la imagen. Es muy importante que figuren los atributos de anchura y altura, porque eso
permite al navegador que reserve un espacio para la imagen y continúe cargando el resto de la
página aunque no haya recibido completamente la imagen.
Adriano Mazziotti [Escriba aquí] [Escriba aquí]
Ejemplo:
<IMG SRC="foto.jpg" WIDTH="28" HEIGHT="25" ALIGN="center" ALT="marca deaviso">
Nota: Para poder saber el alto y ancho en píxeles de una imagen hay que pulsar el botón derecho
sobre el archivo de imagen y elegir Propiedades.
Color en la página Web
Se consigue añadiendo el atributo BGCOLOR (color de fondo) y TEXT (color del texto) a la etiqueta
<BODY>(situada al principio del documento), de la siguiente manera:
<BODY BGCOLOR="blue" TEXT = "yellow">
Nota: Se puede utilizar cualquier color expresado en inglés (red, green, maroon, etc.)
También los colores se pueden expresar de la siguiente forma:
<BODY BGCOLOR="#rrggbb" TEXT = "#rrggbb">
donde:
• rr es un número indicativo de la cantidad de color rojo
• gg es un número indicativo de la cantidad de color verde
• bb es un número indicativo de la cantidad de color azul
Estos números están en numeración hexadecimal (0 1 2 3 4 5 6 7 8 9 A B C D E F).
Es decir, que en nuestro caso, el número menor es el 00 y el mayor el FF. Así, por ejemplo, el color
rojo es el #FF0000, porque tiene el máximo de rojo y cero de los otro dos colores.
Además del número, es posible escribir en su lugar el nombre del color elegido (como hemos visto
anteriormente). Esto solo es posible para algunos colores definidos en la programación de los
navegadores, por lo que sólo se verán en algunos de ellos. El estándar HTML 3.2 propone los
siguientes colores:
Black = "#000000" White = "#FFFFFF", Yellow = "#FFFF00", Green = "#008000"
Red = "#FF0000", Blue = "#0000FF", Maroon = "#800000", Navy = "#000080"
Silver = "#C0C0C0", Lime = "#00FF00", Gray = "#808080", Olive = "#808000"
Purple = "#800080", Teal = "#008080", Fuchsia = "#FF00FF", Aqua = "#00FFFF"
Para hacer un color más oscuro, hay que reducir el número de su componente, dejando los otros
dos invariables. Así, el rojo #FF0000 se puede hacer más oscuro con #AA0000, o aún más oscuro
con #550000.
Para hacer que un color tenga un tono más suave (más pastel), se deben variar los otros dos
colores haciéndolos más claros (número más alto), en una cantidad igual. Así, podemos convertir el
rojo en rosa con #FF7070.
Adriano Mazziotti [Escriba aquí] [Escriba aquí]
Enlaces a otras paginas o a direcciones de correo
Para crearun enlace a una página web de Internet tenemos que utilizar la etiqueta:
<A HREF="http:dirección de la página web"> Texto que sale en la página </A>
Ejemplo: si queremos tener un enlace a la página web de Ya.com, cuando nos aproximemos al
texto pagina web de ya y hacer clic sobre él, tenemos que incluir la siguiente etiqueta:
<A HREF="http:www.ya.com"> página web de ya </A>
Para crearun enlace a una página web creada por nosotros tenemos que utilizar la etiqueta:
<A HREF="nombre de la página web"> texto que sale en la página </A>
Ejemplo: si queremos tener un enlace a una página web denominada pagina.htm, cuando nos
aproximemos al texto mi pagina y hacer clic sobre él, tenemos que incluir la siguiente etiqueta:
Nota: La página donde va el enlace deberá estar creada en la misma carpeta que la página principal
<A HREF="pagina.htm">mi página
Para crearun enlace a una dirección de correo electrónico tenemos que utilizar la etiqueta:
<A HREF="mailto:dirección de correo"> texto que sale en la página </A>
Ejemplo: si queremos tener un enlace a la dirección de correo electrónico juan@yahoo.es, cuando
nos aproximemos al texto correo de Juan y hacer clic sobre él, tenemos que incluir la siguiente
etiqueta:
<A HREF="mailto:juan@yahoo.es"> Correo de Juan </A>
Tablas
Para definir una tabla en una página web utilizaremos la estructura siguiente, dentro del <BODY>o
cuerpo de la página web:
<TABLE BORDER> </TABLE> indican el principio y fin de una tabla
<TR> </TR> muestran una fila de la tabla
<TD> Texto que apareceen la celda </TD> celda que pertenece a una determinada fila
Ejemplo: Para construir una tabla de 2 filas y 3 columnas deberemos incluir las siguientes etiquetas:
<TABLE BORDER>
<TR>
<TD> 1ª CELDA </TD>
<TD> 2ª CELDA </TD>
<TD> 3ª CELDA </TD>
Adriano Mazziotti [Escriba aquí] [Escriba aquí]
</TR>
<TR>
<TD> 4ª CELDA </TD>
<TD> 5ª CELDA </TD>
<TD> 6ª CELDA </TD>
</TR>
</TABLE>
Uniones de celdas:
Para conseguir que una celda ocupe 2 o más filas tendremos que añadir el siguiente atributo a la
celda:
<TD RowSpan="2"> la celda ocupará 2 filas
<TD RowSpan="3"> la celda ocupará 3 filas
Para conseguir que una celda ocupe 2 o más columna tendremos que añadir el siguiente atributo a
la celda:
<TD ColSpan="2"> la celda ocupará 2 columnas
<TD ColSpan="3"> la celda ocupará 3 columnas
Ejemplo: Si queremos crearuna tabla de 2 filas y 2 columnas de talforma que la 1º fila contenga
una sola celda que ocupe las dos columnas:
<TABLE BORDER>
<TR>
<TD ColSpan="2"> Esta celda ocupa 2 columnas </TD>
</TR>
<TR>
<TD> Una celda </TD>
<TD> Otra celda </TD>
</TR>
</TABLE>
Listas
Adriano Mazziotti [Escriba aquí] [Escriba aquí]
A menudo nos interesará presentar las cosas en forma de listas. Podemos escoger entre tres tipos
distintos:
Listas desordenadas (no numeradas)
Listas ordenadas (numeradas)
Listas de definición.
1. Listas desordenadas: (Unordered Lists)
Sirven para presentar cosas que, por no tener un orden determinado, no necesitan ir precedidas
por un número. Su estructura es la siguiente:
<UL>
<LI>Primer ítem
<LI>Segundo ítem
<LI>Etc.
</UL>
Es decir, toda la lista está dentro de la etiqueta <UL> y </UL>, y luego cada ítem va precedido de la
etiqueta <LI> (List Item).
Nota: no es necesario cerrar la etiqueta <LI> con </LI>
Se puede anidar una lista dentro de otra. Por ejemplo:
<UL>
<LI>Mamíferos
<LI>Peces
<UL>
<LI> Sardina
<LI> Bacalao
</UL>
<LI>Aves
</UL>
2. Las listas ordenadas (Ordered Lists)
Sirven para presentar cosas en un orden determinado. Su estructura es muy similar a la anterior. La
diferencia está en que en el resultado aparecerá automáticamente un número correlativo para
cada cosa.
Adriano Mazziotti [Escriba aquí] [Escriba aquí]
<OL>
<LI>Primer ítem
<LI>Segundo ítem
<LI>Tercer ítem
<LI>Etc.
</OL>
Al igual que las listas desordenadas, también se pueden anidar las listas ordenadas.
3. Listas de definición.
Como su nombre indica, son apropiadas para glosarios (o definiciones de términos). Toda la lista
debe ir englobada entre las etiquetas <DL> y </DL>. Y a diferencia de las dos que hemos visto, cada
renglón de la lista tiene dos partes: 1) el nombre de la cosa a definir , que se consigue con la
etiqueta <DT> (definition term) y 2) la definición de dicha cosa, que se consigue con la etiqueta
<DD>(definition definition).
<DL>
<DT>Una cosa a definir
<DD>La definición de esta cosa
<DT>Otra cosa a definir
<DD>La definición de esta otra cosa
</DL>
Marcos
Podríamos decir que una estructura de marcos es una artimaña que hace posible dividir la pantalla
en varias zonas que nos permiten presentar en cada una de ellas una página independiente.
Las etiquetas que nos sirven para contener la definición del marco son <frameset>
</frameset> Internet Explorer presenta la página aunque olvidemos el cierre </frameset>, pero
Netscape no.
Estas etiquetas no se colocan en el <BODY> como todas las anteriormente vistas, sino que detrás
de la cabecera </HEAD> y antes del <BODY>
Distribución del espacio en columnas o filas
Lógicamente la mera indicación de que queremos crear una estructura de frames no es suficiente:
habrá que indicar si la distribución se hará en vertical o en horizontal y cuantas zonas queremos
crear.
Adriano Mazziotti [Escriba aquí] [Escriba aquí]
La definición de los espacios se puede hacer en términos absolutos (píxeles) o relativos (% de
ventana). El signo * representa el resto de la ventana.
A continuación se muestran algunos ejemplos de posibles divisiones de la pantalla.
Dos columnas con una medida absoluta para la primera:
<frameset cols="130,*">
Dos columnas con medidas relativas
<frameset cols="25%,75%*">
Tres filas con medidas absolutas para la superior y la inferior
<frameset rows="25,*,50">
Dos filas con definición relativa
<frameset rows="10%,*">
Contenido de los marcos
Una vez establecida la distribución general habrá que indicar al navegador cuál es el contenido que
tendrá que mostrar en cada marco la primera vez que se cargue la página.
Para indicar el contenido de cada marco se utiliza la etiqueta <frame>, que no necesita cierre con
los siguientes atributos:
name: Servirá para identificar el marco cuando se realicen enlaces a una página con este tipo de
estructura.
src: Indicará cuál es el contenido inicial del marco cuando se cargue por primera vez la página.
Lo que se acaba de comentar podría ser suficiente para crear una página basada en marcos, pero lo
ideal es crear una página siguiendo el esquema siguiente, en el que se indica la estructura de los
marcos pero se ofrece, a través de la etiqueta noframes, una alternativa para el caso de
navegadores que no puedan mostrarlos y, además, se incluye un título en la cabecera.
Ejemplo:
<html>
<head>
<title> Página de Marcos</title>
</head>
<frameset cols="25%,*">
<frame name = "izquierda" src ="Indice.htm" >
Adriano Mazziotti [Escriba aquí] [Escriba aquí]
<frame name = "derecha" src = "Contenidos.htm">
</frameset>
<noframes>
<body>
[Aqui van las etiquetas para definir la pagina en caso de que no soporte los marcos]
</body>
</noframes>
</html>
Los vínculos en los marcos
Establecer un vínculo que apunte a una determinada página será una tarea que realizaremos de la
forma habitual. Sin embargo tendremos que tener en cuenta un pequeño detalle: cada enlace se
abrirá en el marco desde el que ha sido invocado, por lo que, cuando queramos que una página se
presente en un marco diferente a aquél desde el que la llamamos tendremos que especificarlo.
Para especificar en que marco queremos que se abra un determinado enlace, tenemos que añadir
el atributo target en la etiqueta <frame> de la siguiente forma:
<frame name="Nombre_Marco" src="Pagina.htm" target = "Nombre_del_Marco_Enlace">
Ejemplo:
Si escogemos el ejemplo anterior, está claro que nuestra intención es mantener siempre visible el
listado de posibilidades en el marco denominado izquierda, de forma que las páginas a las que nos
referimos aparezcan en el marco al que hemos llamado derecha (o arriba y abajo si hemos optado
por una definición en filas), para conseguir esto tenemos que añadir el atributo target al marco de
la izquierda de la siguiente forma:
<frame name = "izquierda" src ="Indice.htm" target="derecha">
Texto en movimiento
Vamos a ver distintas soluciones para conseguir texto en movimiento: haciendo uso del lenguaje
HTML (las marquesinas), con un GIF animado, con Javascript, etc.
Marquesinas (Marquees)
Una marquesina (en inglés, marquee) es una ventana en la que se desplaza un texto. Sólo son
válidas para el Explorer de Microsoft (en el Netscapese verá como texto fijo).
La etiqueta básica es:
<MARQUEE> Texto que se desplaza </MARQUEE>
Adriano Mazziotti [Escriba aquí] [Escriba aquí]
Que resulta como:
Como no hemos añadido ningún atributo dentro de la etiqueta, el comportamiento de la
marquesina es el que tiene por defecto: ocupa todo el ancho de la pantalla, tiene la altura de una
línea y el texto se desplaza lentamente de derecha a izquierda. Vamos a ver los
distintos atributos que modifican su apariencia y comportamiento:
WIDHT, HEIGHT
Ajustan la anchura y altura, respectivamente, de la marquesina. Pueden ser igual a un número de
pixels, o a un porcentaje de la pantalla. Ejemplo:
<MARQUEE WIDTH=50%HEIGHT=60> Esta marquesina ocupa el 50% del ancho de la pantalla y
tiene una altura de 60 pixels </MARQUEE>
Que resulta como:
ALIGN
Modifica el alineamiento del texto que rodea a la marquesina, que puede
ser TOP (arriba), MIDDLE (en medio) o BOTTOM (abajo). Ejemplo:
<MARQUEE WIDTH=50%HEIGHT=60ALIGN=BOTTOM>La palabra "¡Hola!" estará alineada con la
parte inferior de la marquesina</MARQUEE> ¡Hola!
Que resulta como:
¡Hola!
BEHAVIOR
Este atributo (que quiere decir en inglés comportamiento) sirve para definir de qué manera se va a
efectuar el desplazmiento del texto. Si es igual a SCROLL (el valor por defecto), el texto aparece por
un lado, se desplaza hasta el otro hasta desaparecer por él, y vuelve a empezar (como los casos que
hemos visto anteriormente). Si es igual a SLIDE, aparecepor un lado y se desplaza hasta llegar al
otro extremo, y se para ahí. Si es igual a ALTERNATE se desplaza alternativamentehacia un lado y
otro, siempre dentro de los límites de la marquesina. Ejemplo:
<MARQUEE BEHAVIOR=ALTERNATE>Estetextose mueve a un lado y otro, sin
desaparecer</MARQUEE>
Que se resulta así:
BGCOLOR
Con este atributo se modifica el colorde fondo de la marquesina, de acuerdo con el método visto
en el Capítulo 7. Ejemplo:
Adriano Mazziotti [Escriba aquí] [Escriba aquí]
<MARQUEE BGCOLOR="#FF7070"> Esta marquesina tiene un fondo de color rosa </MARQUEE>
Que resulta así:
DIRECTION
Este atributo sirve para modificar la dirección hacia la que se dirije el texto. Por defecto
es LEFT (izquierda). Se puede hacer que el texto se dirija hacia la derecha igualando este atributo
a RIGHT. Ejemplo:
<MARQUEE DIRECTION=RIGHT>Estetextose dirije hacia la derecha </MARQUEE>
Que resulta como:
SCROLLAMOUNT
Define la cantidad de desplazamiento del texto en cada movimiento de avance, expresado en
pixels. Cuanto mayor es el número, más rápido avanza. Ejemplo:
<MARQUEE SCROLLAMOUNT=50> Doy saltos grandes </MARQUEE>
Que se ve como:
SCROLLDELAY
Define el tiempo entre cada movimiento de avance, expresado en milisegundos. Cuanto mayor es
el número más lento avanza. Ejemplo:
<MARQUEE SCROLLDELAY =200> Espero mucho entre cada salto </MARQUEE>
Que se ve como:
LOOP
Especifica el número deveces que aparecerá el texto. Es indefinido por defecto.
HSPACE, VSPACE
Definen, respectivamente, la separación en sentido horizontal o vertical del texto que está fuera de
la marquesina.
Fuentes dentro de las marquesinas
Si se desea que el texto que aparece dentro de una marquesina tenga una fuente concreta, distinta
de la que tiene por defecto el navegador, se debe poner la etiqueta <FONT FACE> (verCap. 6)
por fuera de la etiqueta de la marquesina. Ejemplo:
<FONT FACE="Impact">
Adriano Mazziotti [Escriba aquí] [Escriba aquí]
<MARQUEE BGCOLOR="#FFFF00">Esto se ve con la fuente Impact</MARQUEE>
</FONT>
Que se verá así:
Recuérdese lo dicho en el capítulo 6: para que esto surta efecto, la fuente indicada debe estar
instalada en el disco duro del usuario. Véase allí también cómo se pueden indicar otras fuentes
alternativas.
Como se ha dicho antes, esta etiqueta no es implementada por el Netscape. El texto que está
dentro de la etiqueta de la marquesina se verá en este navegador como texto fijo normal.
Normalmente, si se hace uso de este recurso es porque se quiere destacar de una manera muy
especial un texto, lográndose plenamente este objetivo en el Explorer, pero no así en el Netscape,
en donde dicho textopasaría totalmente desapercibido. Una manera de paliar este inconveniente,
al menos en parte, es introducir la etiqueta de la marquesina dentro de unatabla (ver el Capítulo
10). De esta manera, el texto estará en cierta medida destacado en el Netscape, y en el Explorer la
marquesina se verá de una manera aún más estética. Ejemplo:
<TABLE BORDER=1>
<TR><TD>
<MARQUEE> Marquesina dentro de una tabla </MARQUEE>
</TD></TR>
</TABLE>
Que se verá como:
Texto en movimiento con un GIF animado
Otro procedimiento para conseguir texto en movimiento es el de confeccionar un GIF animado (ver
el Capítulo 12).
Se puede conseguir que el texto se desplacerealmente, emulando el comportamiento de las
marquesinas, pero no es fácil conseguirlo, y puede ser bastante laborioso.
Un procedimiento más sencillo es el siguiente: Creamos el texto apropiado con un programa
gráfico (tiene la ventaja sobre las marquesinas de que podemos escoger el tipo de fuente y los
efectos que deseemos), tal como el siguiente ejemplo (bienv1.gif):
Adriano Mazziotti [Escriba aquí] [Escriba aquí]
Luego procedemos a borrar una a una cada palabra (o cada letra si se quisiera), y vamos guardando
cada imagen con un nombre distinto, tal como bienv2.gif:
A continuación borramos la palabra "del" y guardamos la imagen como bienv3.gif, y así con el
resto, hasta bienv7.gif en donde se habrían borrado todas las palabras.
Luego procedemos a montar la secuencia de las imágenes en algún programa para crear GIFs
animados, como por ejemplo en el GIF Construction Set . El orden será el inverso:
bienv7.gif - bienv6.gif - ... - bienv2.gif - bienv1.gif
Texto en movimiento con Javascript
Otra manera de conseguir texto en movimiento es haciendo uso de Javascript. Vamos a ver dos
ejemplos: un scroll (deslizamiento) de un texto en la barra de estado del navegador y un scroll en
una ventana dentro de la página.
Esto está implementado en los siguientes navegadores:
Netscape, versión 2.0o superior.
Explorer de Microsoft 3.0 o superior.
El Javascript es un lenguaje distinto del HTML, que es el tema de este manual. En los dos ejemplos
que vamos a ver a continuación, únicamente se mostrará la manera de incluirlos en nuestro
documento HTML, pero sin pretender explicar su estructura.
Cómo incluir Javascript en un documento HTML
Recordemos que la estructura de un documento HTML es:
<HTML>
<HEAD>
<TITLE>
</TITLE>
</HEAD>
<BODY>
</BODY>
</HTML>
Adriano Mazziotti [Escriba aquí] [Escriba aquí]
El script (documento) en Javascript lo tenemos que colocar dentro de la cabecera, después del
título. Es decir, entre las etiquetas </TITLE> y </HEAD>, contenido dentro de la etiqueta:
<SCRIPT LANGUAGE="JavaScript"> </SCRIPT >
Es decir, que queda de esta manera:
<HTML>
<HEAD>
<TITLE>
</TITLE>
<SCRIPT LANGUAGE="JavaScript">
[Aquí debeir colocado el script]
</SCRIPT >
</HEAD>
<BODY>
</BODY>
</HTML>
Además de esto, se debe añadir algo dentro de la etiqueta <BODY>, como se indicará en cada caso.
Scroll en la barra de estado
El script es el siguiente:
<SCRIPT LANGUAGE="JavaScript">
<!--
/// Scroll en la barra de estado, (C) Pedro Maicas, 1996.
var txt="Esta es la primera linea de texto que se desplaza "
+ " y esta es la segunda, puedes poner todas las"
+ " que quieras ! ";
function scroll()
{
Adriano Mazziotti [Escriba aquí] [Escriba aquí]
window.status = txt;
txt = txt.substring(1, txt.length)+ txt.charAt(0);
window.setTimeout("scroll()",150);
}
//-->
</SCRIPT>
Observación sobreel texto: Se puede poner el texto en una sola línea, tan larga como se quiera,
siempre que esté entre " y ";
Pero como no debe de haber ningún salto de línea, si el textoes demasiado largo, es mejor dividirlo
en distintas líneas, tal como está en el ejemplo.
Al final de la última palabra del textoconviene dejar una serie de espacios en blanco, para que no
esté encadenado el comienzo con el final.
Dentro de la etiqueta <BODY> se debe añadir el atributo:
onLoad="scroll();"
quedando así:
<BODY onLoad="scroll();">
Este es el resultado.
Scroll en una ventana
Ahora vamos a ver cómo conseguir que se desplace un texto dentro de una ventana de un
formulario. Con esto se consigue un efecto parecido al de las marquesinas (pero en este caso sí es
implementado por el Netscape 2.0 o superior).
El script es el siguiente:
<SCRIPT LANGUAGE="JavaScript">
<!--
/// Scroll en en una ventana, (C) Pedro Maicas, 1996.
var txt="Esta es la primera linea de texto que se desplaza "
+ " y esta es la segunda, puedes poner todas las"
+ " que quieras ! ";
function scroll()
{
Adriano Mazziotti [Escriba aquí] [Escriba aquí]
document.frm.w.value = txt;
txt = txt.substring(1, txt.length)+ txt.charAt(0);
window.setTimeout("scroll()",150);
}
//-->
</SCRIPT>
Dentro de la etiqueta <BODY> se debe añadir el atributo:
onLoad="scroll();"
quedando así:
<BODY onLoad="scroll();">
Las etiquetas para la ventana del formulario son:
<FORM NAME='frm'>
<INPUT TYPE='text'NAME='w' SIZE=64>
</FORM>
Como la ventana está situada dentro de la página, debemos colocar estas etiquetas en el sitio que
nos convenga, dentro de la seción <BODY></BODY>, mezclado con el resto del documento HTML.
Este es el resultado.

Más contenido relacionado

La actualidad más candente (20)

Practico html
Practico htmlPractico html
Practico html
 
Html tutorial
Html tutorialHtml tutorial
Html tutorial
 
MANUAL HTML BASICO.
MANUAL HTML BASICO.MANUAL HTML BASICO.
MANUAL HTML BASICO.
 
Crear una pagina web con bloc de notas
Crear una pagina web con bloc de notasCrear una pagina web con bloc de notas
Crear una pagina web con bloc de notas
 
Texto enrriquecido HTML
Texto enrriquecido HTMLTexto enrriquecido HTML
Texto enrriquecido HTML
 
Creacion de paginas web
Creacion de paginas webCreacion de paginas web
Creacion de paginas web
 
Html
HtmlHtml
Html
 
Dreamweaver 8
Dreamweaver 8Dreamweaver 8
Dreamweaver 8
 
Html
HtmlHtml
Html
 
Mi primera pagina web en html con bloc de notas
Mi primera pagina web en html con bloc de notasMi primera pagina web en html con bloc de notas
Mi primera pagina web en html con bloc de notas
 
Curso html
Curso htmlCurso html
Curso html
 
COMO CREAR UNA PAGINA WEB EN HTML SUS PRIMEROS PASOS
COMO CREAR UNA PAGINA WEB EN HTML SUS PRIMEROS PASOSCOMO CREAR UNA PAGINA WEB EN HTML SUS PRIMEROS PASOS
COMO CREAR UNA PAGINA WEB EN HTML SUS PRIMEROS PASOS
 
Etiquetas en Html
Etiquetas en HtmlEtiquetas en Html
Etiquetas en Html
 
Ejercicio html primer año
Ejercicio html primer añoEjercicio html primer año
Ejercicio html primer año
 
Valery....
Valery....Valery....
Valery....
 
Presentacinhtml 091121100213-phpapp02
Presentacinhtml 091121100213-phpapp02Presentacinhtml 091121100213-phpapp02
Presentacinhtml 091121100213-phpapp02
 
Páginas web (1)
Páginas web (1)Páginas web (1)
Páginas web (1)
 
Html
HtmlHtml
Html
 
Practicakompozer 3
Practicakompozer 3Practicakompozer 3
Practicakompozer 3
 
Alexander y diego paginas de html
Alexander y diego paginas de htmlAlexander y diego paginas de html
Alexander y diego paginas de html
 

Destacado

2015 Company Annual Report
2015 Company Annual Report2015 Company Annual Report
2015 Company Annual ReportTheron Fly
 
Media Samples_Boys & Girls Clubs of Metro Atlanta_Green, Alexis
Media Samples_Boys & Girls Clubs of Metro Atlanta_Green, AlexisMedia Samples_Boys & Girls Clubs of Metro Atlanta_Green, Alexis
Media Samples_Boys & Girls Clubs of Metro Atlanta_Green, AlexisAlexis Green
 
El último teorema de Fermat
El último teorema de FermatEl último teorema de Fermat
El último teorema de FermatEdith Padron
 
Trabajo práctico nº6 Realidad Aumentada- Adriano Mazziotti.
Trabajo práctico nº6  Realidad Aumentada- Adriano Mazziotti.Trabajo práctico nº6  Realidad Aumentada- Adriano Mazziotti.
Trabajo práctico nº6 Realidad Aumentada- Adriano Mazziotti.Adriano Mazziotti
 
protesis parcial removible
 protesis parcial removible protesis parcial removible
protesis parcial removiblePita Mg
 
Manual de anestesia en odontoestamatología
Manual de anestesia en odontoestamatologíaManual de anestesia en odontoestamatología
Manual de anestesia en odontoestamatologíaPita Mg
 
Imágenes bajo licencia creative commons-Adriano M
Imágenes bajo licencia creative commons-Adriano MImágenes bajo licencia creative commons-Adriano M
Imágenes bajo licencia creative commons-Adriano MAdriano Mazziotti
 
Mi future vacations
Mi future vacationsMi future vacations
Mi future vacationsrito amador
 
Web 2.0 di perpustakaan
Web 2.0 di perpustakaanWeb 2.0 di perpustakaan
Web 2.0 di perpustakaanyudin saqif
 
319_Spr14_syllabus copy
319_Spr14_syllabus copy319_Spr14_syllabus copy
319_Spr14_syllabus copyTravis Knoll
 
Instituto universitario de tecnología
Instituto universitario de tecnologíaInstituto universitario de tecnología
Instituto universitario de tecnologíaAngel Rojas
 
Equipment List
Equipment ListEquipment List
Equipment ListNicole Hay
 
Epitelios y glándulas
Epitelios y glándulasEpitelios y glándulas
Epitelios y glándulasGary Burgos
 

Destacado (17)

2015 Company Annual Report
2015 Company Annual Report2015 Company Annual Report
2015 Company Annual Report
 
Media Samples_Boys & Girls Clubs of Metro Atlanta_Green, Alexis
Media Samples_Boys & Girls Clubs of Metro Atlanta_Green, AlexisMedia Samples_Boys & Girls Clubs of Metro Atlanta_Green, Alexis
Media Samples_Boys & Girls Clubs of Metro Atlanta_Green, Alexis
 
El último teorema de Fermat
El último teorema de FermatEl último teorema de Fermat
El último teorema de Fermat
 
Willys
WillysWillys
Willys
 
Cnc
CncCnc
Cnc
 
Trabajo práctico nº6 Realidad Aumentada- Adriano Mazziotti.
Trabajo práctico nº6  Realidad Aumentada- Adriano Mazziotti.Trabajo práctico nº6  Realidad Aumentada- Adriano Mazziotti.
Trabajo práctico nº6 Realidad Aumentada- Adriano Mazziotti.
 
protesis parcial removible
 protesis parcial removible protesis parcial removible
protesis parcial removible
 
Manual de anestesia en odontoestamatología
Manual de anestesia en odontoestamatologíaManual de anestesia en odontoestamatología
Manual de anestesia en odontoestamatología
 
Primos
PrimosPrimos
Primos
 
Imágenes bajo licencia creative commons-Adriano M
Imágenes bajo licencia creative commons-Adriano MImágenes bajo licencia creative commons-Adriano M
Imágenes bajo licencia creative commons-Adriano M
 
Mi future vacations
Mi future vacationsMi future vacations
Mi future vacations
 
Web 2.0 di perpustakaan
Web 2.0 di perpustakaanWeb 2.0 di perpustakaan
Web 2.0 di perpustakaan
 
Amore e Fe 2016
Amore e Fe 2016Amore e Fe 2016
Amore e Fe 2016
 
319_Spr14_syllabus copy
319_Spr14_syllabus copy319_Spr14_syllabus copy
319_Spr14_syllabus copy
 
Instituto universitario de tecnología
Instituto universitario de tecnologíaInstituto universitario de tecnología
Instituto universitario de tecnología
 
Equipment List
Equipment ListEquipment List
Equipment List
 
Epitelios y glándulas
Epitelios y glándulasEpitelios y glándulas
Epitelios y glándulas
 

Similar a Html creacion de una pagina. Adriano Mazziotti (20)

Practicas html
Practicas htmlPracticas html
Practicas html
 
[modo de compatibilidad] HTML
[modo de compatibilidad] HTML[modo de compatibilidad] HTML
[modo de compatibilidad] HTML
 
Escuela Abierta - Taller de Html
Escuela Abierta - Taller de HtmlEscuela Abierta - Taller de Html
Escuela Abierta - Taller de Html
 
Crear una página básica en HTML
Crear una página básica en HTMLCrear una página básica en HTML
Crear una página básica en HTML
 
Conceptos Etiquetas de HTML
Conceptos Etiquetas de HTMLConceptos Etiquetas de HTML
Conceptos Etiquetas de HTML
 
Html111
Html111Html111
Html111
 
HTML
HTMLHTML
HTML
 
HTML
HTMLHTML
HTML
 
Diseño WEB 1.pptx
Diseño WEB 1.pptxDiseño WEB 1.pptx
Diseño WEB 1.pptx
 
Manual html
Manual htmlManual html
Manual html
 
Html basico
Html basicoHtml basico
Html basico
 
Guia de repaso html11
Guia de repaso html11Guia de repaso html11
Guia de repaso html11
 
Html
HtmlHtml
Html
 
Html
HtmlHtml
Html
 
Consulta de html
Consulta de html Consulta de html
Consulta de html
 
Páginas web en formato HTML
Páginas web en formato HTMLPáginas web en formato HTML
Páginas web en formato HTML
 
Tpd 02
Tpd 02Tpd 02
Tpd 02
 
Lenguaje de programación de páginas web
Lenguaje de programación de páginas webLenguaje de programación de páginas web
Lenguaje de programación de páginas web
 
Lenguaje HTML ETIQUETAS
Lenguaje HTML ETIQUETAS Lenguaje HTML ETIQUETAS
Lenguaje HTML ETIQUETAS
 
Clase 2 Desarrollo Web
Clase 2 Desarrollo Web Clase 2 Desarrollo Web
Clase 2 Desarrollo Web
 

Último

TIPOS DE RELIEVES EN PANAMÁ. SUS CARACTERÍSTICAS FÍSICAS Y GEOGRÁFICAS
TIPOS DE RELIEVES EN PANAMÁ. SUS CARACTERÍSTICAS FÍSICAS Y GEOGRÁFICASTIPOS DE RELIEVES EN PANAMÁ. SUS CARACTERÍSTICAS FÍSICAS Y GEOGRÁFICAS
TIPOS DE RELIEVES EN PANAMÁ. SUS CARACTERÍSTICAS FÍSICAS Y GEOGRÁFICASeileen465728
 
presentacion tesis Santiago morillo ..pptx
presentacion tesis Santiago morillo ..pptxpresentacion tesis Santiago morillo ..pptx
presentacion tesis Santiago morillo ..pptxDANIELMATEOZARATEACO
 
Patología Sistema Nervioso.pdf medicina veterinaria
Patología Sistema Nervioso.pdf medicina veterinariaPatología Sistema Nervioso.pdf medicina veterinaria
Patología Sistema Nervioso.pdf medicina veterinariaalissonLizana
 
ESPECIALIDAD DE SEMILLAS DESARROLLADA.pdf
ESPECIALIDAD DE SEMILLAS DESARROLLADA.pdfESPECIALIDAD DE SEMILLAS DESARROLLADA.pdf
ESPECIALIDAD DE SEMILLAS DESARROLLADA.pdfjaviervillegas521
 
THEOBROMA. Cacao. La Planta del Chocolate. I Parte
THEOBROMA. Cacao. La Planta del Chocolate. I ParteTHEOBROMA. Cacao. La Planta del Chocolate. I Parte
THEOBROMA. Cacao. La Planta del Chocolate. I ParteRuth Aneth Gutiérrez Blair
 
UNA VISION DE LA VIDA, presentacion de biologia
UNA VISION DE LA VIDA, presentacion de biologiaUNA VISION DE LA VIDA, presentacion de biologia
UNA VISION DE LA VIDA, presentacion de biologiaZonnia2
 
Manual Técnico Fedeplacol cultivo plátano Colombia.pdf
Manual Técnico Fedeplacol cultivo plátano Colombia.pdfManual Técnico Fedeplacol cultivo plátano Colombia.pdf
Manual Técnico Fedeplacol cultivo plátano Colombia.pdfnilsonbustamantego
 
Práctica 14. Detrinacion de Salmonella spp en alimentos-1.docx
Práctica 14. Detrinacion de Salmonella spp en alimentos-1.docxPráctica 14. Detrinacion de Salmonella spp en alimentos-1.docx
Práctica 14. Detrinacion de Salmonella spp en alimentos-1.docxoctavio cortez
 
hidrocarburos saturados e insaturados.pptx
hidrocarburos saturados e insaturados.pptxhidrocarburos saturados e insaturados.pptx
hidrocarburos saturados e insaturados.pptxjcarlos735389
 
Plan de acondicionamiento Territorial de la Provincia de Lambayeque
Plan de acondicionamiento Territorial de la Provincia de LambayequePlan de acondicionamiento Territorial de la Provincia de Lambayeque
Plan de acondicionamiento Territorial de la Provincia de LambayequeSayuriEsqun
 

Último (10)

TIPOS DE RELIEVES EN PANAMÁ. SUS CARACTERÍSTICAS FÍSICAS Y GEOGRÁFICAS
TIPOS DE RELIEVES EN PANAMÁ. SUS CARACTERÍSTICAS FÍSICAS Y GEOGRÁFICASTIPOS DE RELIEVES EN PANAMÁ. SUS CARACTERÍSTICAS FÍSICAS Y GEOGRÁFICAS
TIPOS DE RELIEVES EN PANAMÁ. SUS CARACTERÍSTICAS FÍSICAS Y GEOGRÁFICAS
 
presentacion tesis Santiago morillo ..pptx
presentacion tesis Santiago morillo ..pptxpresentacion tesis Santiago morillo ..pptx
presentacion tesis Santiago morillo ..pptx
 
Patología Sistema Nervioso.pdf medicina veterinaria
Patología Sistema Nervioso.pdf medicina veterinariaPatología Sistema Nervioso.pdf medicina veterinaria
Patología Sistema Nervioso.pdf medicina veterinaria
 
ESPECIALIDAD DE SEMILLAS DESARROLLADA.pdf
ESPECIALIDAD DE SEMILLAS DESARROLLADA.pdfESPECIALIDAD DE SEMILLAS DESARROLLADA.pdf
ESPECIALIDAD DE SEMILLAS DESARROLLADA.pdf
 
THEOBROMA. Cacao. La Planta del Chocolate. I Parte
THEOBROMA. Cacao. La Planta del Chocolate. I ParteTHEOBROMA. Cacao. La Planta del Chocolate. I Parte
THEOBROMA. Cacao. La Planta del Chocolate. I Parte
 
UNA VISION DE LA VIDA, presentacion de biologia
UNA VISION DE LA VIDA, presentacion de biologiaUNA VISION DE LA VIDA, presentacion de biologia
UNA VISION DE LA VIDA, presentacion de biologia
 
Manual Técnico Fedeplacol cultivo plátano Colombia.pdf
Manual Técnico Fedeplacol cultivo plátano Colombia.pdfManual Técnico Fedeplacol cultivo plátano Colombia.pdf
Manual Técnico Fedeplacol cultivo plátano Colombia.pdf
 
Práctica 14. Detrinacion de Salmonella spp en alimentos-1.docx
Práctica 14. Detrinacion de Salmonella spp en alimentos-1.docxPráctica 14. Detrinacion de Salmonella spp en alimentos-1.docx
Práctica 14. Detrinacion de Salmonella spp en alimentos-1.docx
 
hidrocarburos saturados e insaturados.pptx
hidrocarburos saturados e insaturados.pptxhidrocarburos saturados e insaturados.pptx
hidrocarburos saturados e insaturados.pptx
 
Plan de acondicionamiento Territorial de la Provincia de Lambayeque
Plan de acondicionamiento Territorial de la Provincia de LambayequePlan de acondicionamiento Territorial de la Provincia de Lambayeque
Plan de acondicionamiento Territorial de la Provincia de Lambayeque
 

Html creacion de una pagina. Adriano Mazziotti

  • 1. Adriano Mazziotti [Escriba aquí] [Escriba aquí] CREACIÓN DE PÁGINAS WEB Todo lo que hay que saber sobre html El lenguaje HTML Las páginas Web están creadas con el lenguaje HTML (Hyper Text Markup Languaje). Un documento HTML es un fichero de texto ASCII, en el que se incluye el texto que se desea mostrar por pantalla. Además de este texto hay que introducir ciertas instrucciones o comandos, también denominadas etiquetas, que indicarán al navegador como se debe visualizar el documento en pantalla. Estructura básica de un documento HTML Todo documento HTML está dividido en una serie de bloques que forman su estructura. <HTML> y </HTML> indica que el texto contenido entre estas dos etiquetas está escrito en lenguaje HTML. <HEAD> y </HEAD> información del documento que no se muestra, suele contener el título de la página Web, que visualizará la barra de título del navegador. <BODY> y </BODY> definen la parteprincipal o el cuerpo del documento, que se mostrará en la ventana del navegador. La estructura básica del documento HTML queda de esta manera: <HTML> <HEAD> <TITLE> Título de la página </TITLE> </HEAD> <BODY> [Aquí van las etiquetas que visualizan la página] </BODY> </HTML> Como crearun documento HTML Crear una carpeta dentro del disco duro, denominada 1ºBachillerato Ciencias o CC.SS Abrir el bloc de notas (Menú Inicio /Programas /Accesorios) Escribir en el bloc de notas el documento HTML
  • 2. Adriano Mazziotti [Escriba aquí] [Escriba aquí] Guardar el documento anterior (Menú Archivo /Guardar) en la carpeta creada anteriormente , con el nombre PaginaWeb.htm (ojo la extensión es obligado que sea .htm ó .html) Para abrir la página web creada basta con ir a la carpeta creada y hacer doble clic sobre el fichero PaginaWeb Ejemplo: <HTML> <HEAD> <TITLE> Mi primera página Web </TITLE> </HEAD> <BODY> Informática de 1º Bachillerato Esta página ha sido creada por: Fulanito </BODY> </HTML> Modificar una página web anteriormente creada Para modificar una página web: Abrir la pagina con el navegador correspondiente (Internet Explorer por ejemplo) Activar el menú Ver y elegir la opción Código Fuente Dentro del bloc de notas podremos realizar las oportunas modificaciones Guardamos los cambios efectuados mediante el menú Archivo / Guardar Cerramos el bloc de notas Dentro del navegador: activar el menú Ver y elegir la opción Actualizar o pulsar F5 Encabezados Se utiliza para destacarun texto. Existen seis niveles de encabezados, descritos por las siguientes etiquetas: <H1>Encabezado de Tamaño 1</H1> Encabezado de mayor tamaño <H2>Encabezado de Tamaño 2</H2> <H3>Encabezado de Tamaño 3</H3> <H4>Encabezado de Tamaño 4</H4>
  • 3. Adriano Mazziotti [Escriba aquí] [Escriba aquí] <H5>Encabezado de Tamaño 5</H5> <H6>Encabezado de Tamaño 6</H6> Encabezado de menor tamaño Atributos: ALIGN=left/center/right: Definen el alineamiento del encabezado. Por defecto es left. Ejemplos: Hay que poner esto dentro del BODY o cuerpo del documento HTML <H1 ALIGN = "center"> Encabezado de mayor tamaño, alineado al centro </H1> <H6 ALIGN = "right"> Encabezado de menor tamaño, alineado a la derecha </H6> Párrafos La separación entre párrafos (dejando una línea en blanco) la conseguimos colocando la etiqueta <P> al inicio de cada uno. Cuando escribimos en el documento el texto que queremos que aparezca en la pantalla, veremos que éste se acomoda a ella, sin considerar los retornos del carro en el documento fuente. Atributos: ALIGN=left/center/right/justify: Definen el alineamiento del encabezado. Por defecto es left. Nota: Con los párrafos no es necesario colocar la etiqueta de final de párrafo </P> Ejemplo: <HTML> <HEAD> <TITLE>Mipágina web - 1</TITLE> </HEAD> <BODY> <H1 align=center>Mi primera pagina</H1> <P>Esta es mi primera pagina, aunque todavía es muy sencilla. Como el lenguaje HTML no es difícil, pronto estaré en condiciones de hacer cosas mas interesantes. <P ALIGN="RIGHT">Aquíva un segundo párrafo alineado a la derecha. </BODY> </HTML> Crear líneas horizontales
  • 4. Adriano Mazziotti [Escriba aquí] [Escriba aquí] Para crearlíneas horizontales debemos utilizar la etiqueta <HR> Nota: Al igual que con los párrafos, no es necesario poner la etiqueta de fin de línea </HR> Ejemplo: </P> Ejemplo: <HTML> <HEAD> <TITLE>Mipágina web - 2</TITLE> </HEAD> <BODY> <H1 align="center">Misegunda pagina</H1> <P> A continuación aparecerá una línea horizontal <HR> </BODY> </HTML> Formato físico El texto formateado de esta manera se vera igual en todos los navegadores. <B>[Texto]</B> Texto en Negrita <I>[Texto]</I> Texto en cursiva <U>[Texto]</U> Texto Subrayado <STRIKE>[Texto]</STRIKE> Texto Tachado <TT>[Texto]</TT> Texto tipo Máquina <BIG>[Texto]</BIG> Texto en Fuente Grande <SMALL>[Texto]</SMALL> Texto en Fuente Pequeña <SUB>[Texto]</SUB> Texto como Subíndice <SUP>[Texto]</SUP> Texto como Superíndice Nota: Con la etiqueta <TT> y </TT> conseguimos también que el texto tenga un tamaño menor y la apariencia de los caracteresde una máquina de escribir (typewriter). Imágenes
  • 5. Adriano Mazziotti [Escriba aquí] [Escriba aquí] Los tres tipos de imágenes que soportan una página Web son: Imágenes GIF (soportan hasta 256 colores), utilizado para dibujos, ilustraciones, cuadros, etc. Imágenes JPEG/JPG (pueden presentar 16,7 millones de colores), utilizado principalmente para fotografías. Imágenes PNG que no es soportado por las versiones más antiguas de los navegadores. Estos formatos de imagen utilizan algoritmos de compresión que permiten reducir significativamente el tamaño de la imagen a comparación de otros formatos gráficos, lo que permite una carga más rápida. Un aspecto muy importante a tener en cuenta, es el tamaño de las imágenes, pues una imagen grande supone un archivo grande, y esto puede resultar en un tiempo excesivo de carga, con el consiguiente riesgo de que quien esté intentando cargarnuestra página se canse de esperar, y desista de ello. Para tener una imagen en nuestra página hay que cumplir 2 requisitos: Tener guardada en la misma carpeta donde este nuestra página, la imagen que queremos mostrar Incluir la etiqueta siguiente dentro del BODY de nuestra página web: <IMG SRC="foto.gif"> (caso de llamarse nuestra imagen "foto" y ser de tipo GIF) El comando IMG SRC (IMaGeSouRCe, fuente de la imagen), indica el nombre de la imagen. Atributos: Con el atributo ALT se introduce una descripción (una palabra o una frase breve) indicativa de la imagen, que aparececuando el puntero del ratón se posiciona dentro de la imagen o durante el proceso de carga de la imagen. <IMG SRC="foto.gif" ALT="descripción"> Con el atributo ALIGN se puede elegir la posición de la imagen con respecto al texto: <IMG SRC="foto.gif" ALIGN="TOP">Texto alineado arriba <IMG SRC="foto.gif" ALIGN="MIDDLE">Textoalineado en medio <IMG SRC="foto.gif" ALIGN="BOTTOM">Textoalineado abajo <IMG SRC="foto.gif" ALIGN="RIGHT">Textoalineado a la derecha <IMG SRC="foto.gif" ALIGN="LEFT">Texto alineado abajo Con el atributo WIDTH y HEIGHT, se especifica la anchura y altura en píxeles con las que se va a mostrar la imagen. Es muy importante que figuren los atributos de anchura y altura, porque eso permite al navegador que reserve un espacio para la imagen y continúe cargando el resto de la página aunque no haya recibido completamente la imagen.
  • 6. Adriano Mazziotti [Escriba aquí] [Escriba aquí] Ejemplo: <IMG SRC="foto.jpg" WIDTH="28" HEIGHT="25" ALIGN="center" ALT="marca deaviso"> Nota: Para poder saber el alto y ancho en píxeles de una imagen hay que pulsar el botón derecho sobre el archivo de imagen y elegir Propiedades. Color en la página Web Se consigue añadiendo el atributo BGCOLOR (color de fondo) y TEXT (color del texto) a la etiqueta <BODY>(situada al principio del documento), de la siguiente manera: <BODY BGCOLOR="blue" TEXT = "yellow"> Nota: Se puede utilizar cualquier color expresado en inglés (red, green, maroon, etc.) También los colores se pueden expresar de la siguiente forma: <BODY BGCOLOR="#rrggbb" TEXT = "#rrggbb"> donde: • rr es un número indicativo de la cantidad de color rojo • gg es un número indicativo de la cantidad de color verde • bb es un número indicativo de la cantidad de color azul Estos números están en numeración hexadecimal (0 1 2 3 4 5 6 7 8 9 A B C D E F). Es decir, que en nuestro caso, el número menor es el 00 y el mayor el FF. Así, por ejemplo, el color rojo es el #FF0000, porque tiene el máximo de rojo y cero de los otro dos colores. Además del número, es posible escribir en su lugar el nombre del color elegido (como hemos visto anteriormente). Esto solo es posible para algunos colores definidos en la programación de los navegadores, por lo que sólo se verán en algunos de ellos. El estándar HTML 3.2 propone los siguientes colores: Black = "#000000" White = "#FFFFFF", Yellow = "#FFFF00", Green = "#008000" Red = "#FF0000", Blue = "#0000FF", Maroon = "#800000", Navy = "#000080" Silver = "#C0C0C0", Lime = "#00FF00", Gray = "#808080", Olive = "#808000" Purple = "#800080", Teal = "#008080", Fuchsia = "#FF00FF", Aqua = "#00FFFF" Para hacer un color más oscuro, hay que reducir el número de su componente, dejando los otros dos invariables. Así, el rojo #FF0000 se puede hacer más oscuro con #AA0000, o aún más oscuro con #550000. Para hacer que un color tenga un tono más suave (más pastel), se deben variar los otros dos colores haciéndolos más claros (número más alto), en una cantidad igual. Así, podemos convertir el rojo en rosa con #FF7070.
  • 7. Adriano Mazziotti [Escriba aquí] [Escriba aquí] Enlaces a otras paginas o a direcciones de correo Para crearun enlace a una página web de Internet tenemos que utilizar la etiqueta: <A HREF="http:dirección de la página web"> Texto que sale en la página </A> Ejemplo: si queremos tener un enlace a la página web de Ya.com, cuando nos aproximemos al texto pagina web de ya y hacer clic sobre él, tenemos que incluir la siguiente etiqueta: <A HREF="http:www.ya.com"> página web de ya </A> Para crearun enlace a una página web creada por nosotros tenemos que utilizar la etiqueta: <A HREF="nombre de la página web"> texto que sale en la página </A> Ejemplo: si queremos tener un enlace a una página web denominada pagina.htm, cuando nos aproximemos al texto mi pagina y hacer clic sobre él, tenemos que incluir la siguiente etiqueta: Nota: La página donde va el enlace deberá estar creada en la misma carpeta que la página principal <A HREF="pagina.htm">mi página Para crearun enlace a una dirección de correo electrónico tenemos que utilizar la etiqueta: <A HREF="mailto:dirección de correo"> texto que sale en la página </A> Ejemplo: si queremos tener un enlace a la dirección de correo electrónico juan@yahoo.es, cuando nos aproximemos al texto correo de Juan y hacer clic sobre él, tenemos que incluir la siguiente etiqueta: <A HREF="mailto:juan@yahoo.es"> Correo de Juan </A> Tablas Para definir una tabla en una página web utilizaremos la estructura siguiente, dentro del <BODY>o cuerpo de la página web: <TABLE BORDER> </TABLE> indican el principio y fin de una tabla <TR> </TR> muestran una fila de la tabla <TD> Texto que apareceen la celda </TD> celda que pertenece a una determinada fila Ejemplo: Para construir una tabla de 2 filas y 3 columnas deberemos incluir las siguientes etiquetas: <TABLE BORDER> <TR> <TD> 1ª CELDA </TD> <TD> 2ª CELDA </TD> <TD> 3ª CELDA </TD>
  • 8. Adriano Mazziotti [Escriba aquí] [Escriba aquí] </TR> <TR> <TD> 4ª CELDA </TD> <TD> 5ª CELDA </TD> <TD> 6ª CELDA </TD> </TR> </TABLE> Uniones de celdas: Para conseguir que una celda ocupe 2 o más filas tendremos que añadir el siguiente atributo a la celda: <TD RowSpan="2"> la celda ocupará 2 filas <TD RowSpan="3"> la celda ocupará 3 filas Para conseguir que una celda ocupe 2 o más columna tendremos que añadir el siguiente atributo a la celda: <TD ColSpan="2"> la celda ocupará 2 columnas <TD ColSpan="3"> la celda ocupará 3 columnas Ejemplo: Si queremos crearuna tabla de 2 filas y 2 columnas de talforma que la 1º fila contenga una sola celda que ocupe las dos columnas: <TABLE BORDER> <TR> <TD ColSpan="2"> Esta celda ocupa 2 columnas </TD> </TR> <TR> <TD> Una celda </TD> <TD> Otra celda </TD> </TR> </TABLE> Listas
  • 9. Adriano Mazziotti [Escriba aquí] [Escriba aquí] A menudo nos interesará presentar las cosas en forma de listas. Podemos escoger entre tres tipos distintos: Listas desordenadas (no numeradas) Listas ordenadas (numeradas) Listas de definición. 1. Listas desordenadas: (Unordered Lists) Sirven para presentar cosas que, por no tener un orden determinado, no necesitan ir precedidas por un número. Su estructura es la siguiente: <UL> <LI>Primer ítem <LI>Segundo ítem <LI>Etc. </UL> Es decir, toda la lista está dentro de la etiqueta <UL> y </UL>, y luego cada ítem va precedido de la etiqueta <LI> (List Item). Nota: no es necesario cerrar la etiqueta <LI> con </LI> Se puede anidar una lista dentro de otra. Por ejemplo: <UL> <LI>Mamíferos <LI>Peces <UL> <LI> Sardina <LI> Bacalao </UL> <LI>Aves </UL> 2. Las listas ordenadas (Ordered Lists) Sirven para presentar cosas en un orden determinado. Su estructura es muy similar a la anterior. La diferencia está en que en el resultado aparecerá automáticamente un número correlativo para cada cosa.
  • 10. Adriano Mazziotti [Escriba aquí] [Escriba aquí] <OL> <LI>Primer ítem <LI>Segundo ítem <LI>Tercer ítem <LI>Etc. </OL> Al igual que las listas desordenadas, también se pueden anidar las listas ordenadas. 3. Listas de definición. Como su nombre indica, son apropiadas para glosarios (o definiciones de términos). Toda la lista debe ir englobada entre las etiquetas <DL> y </DL>. Y a diferencia de las dos que hemos visto, cada renglón de la lista tiene dos partes: 1) el nombre de la cosa a definir , que se consigue con la etiqueta <DT> (definition term) y 2) la definición de dicha cosa, que se consigue con la etiqueta <DD>(definition definition). <DL> <DT>Una cosa a definir <DD>La definición de esta cosa <DT>Otra cosa a definir <DD>La definición de esta otra cosa </DL> Marcos Podríamos decir que una estructura de marcos es una artimaña que hace posible dividir la pantalla en varias zonas que nos permiten presentar en cada una de ellas una página independiente. Las etiquetas que nos sirven para contener la definición del marco son <frameset> </frameset> Internet Explorer presenta la página aunque olvidemos el cierre </frameset>, pero Netscape no. Estas etiquetas no se colocan en el <BODY> como todas las anteriormente vistas, sino que detrás de la cabecera </HEAD> y antes del <BODY> Distribución del espacio en columnas o filas Lógicamente la mera indicación de que queremos crear una estructura de frames no es suficiente: habrá que indicar si la distribución se hará en vertical o en horizontal y cuantas zonas queremos crear.
  • 11. Adriano Mazziotti [Escriba aquí] [Escriba aquí] La definición de los espacios se puede hacer en términos absolutos (píxeles) o relativos (% de ventana). El signo * representa el resto de la ventana. A continuación se muestran algunos ejemplos de posibles divisiones de la pantalla. Dos columnas con una medida absoluta para la primera: <frameset cols="130,*"> Dos columnas con medidas relativas <frameset cols="25%,75%*"> Tres filas con medidas absolutas para la superior y la inferior <frameset rows="25,*,50"> Dos filas con definición relativa <frameset rows="10%,*"> Contenido de los marcos Una vez establecida la distribución general habrá que indicar al navegador cuál es el contenido que tendrá que mostrar en cada marco la primera vez que se cargue la página. Para indicar el contenido de cada marco se utiliza la etiqueta <frame>, que no necesita cierre con los siguientes atributos: name: Servirá para identificar el marco cuando se realicen enlaces a una página con este tipo de estructura. src: Indicará cuál es el contenido inicial del marco cuando se cargue por primera vez la página. Lo que se acaba de comentar podría ser suficiente para crear una página basada en marcos, pero lo ideal es crear una página siguiendo el esquema siguiente, en el que se indica la estructura de los marcos pero se ofrece, a través de la etiqueta noframes, una alternativa para el caso de navegadores que no puedan mostrarlos y, además, se incluye un título en la cabecera. Ejemplo: <html> <head> <title> Página de Marcos</title> </head> <frameset cols="25%,*"> <frame name = "izquierda" src ="Indice.htm" >
  • 12. Adriano Mazziotti [Escriba aquí] [Escriba aquí] <frame name = "derecha" src = "Contenidos.htm"> </frameset> <noframes> <body> [Aqui van las etiquetas para definir la pagina en caso de que no soporte los marcos] </body> </noframes> </html> Los vínculos en los marcos Establecer un vínculo que apunte a una determinada página será una tarea que realizaremos de la forma habitual. Sin embargo tendremos que tener en cuenta un pequeño detalle: cada enlace se abrirá en el marco desde el que ha sido invocado, por lo que, cuando queramos que una página se presente en un marco diferente a aquél desde el que la llamamos tendremos que especificarlo. Para especificar en que marco queremos que se abra un determinado enlace, tenemos que añadir el atributo target en la etiqueta <frame> de la siguiente forma: <frame name="Nombre_Marco" src="Pagina.htm" target = "Nombre_del_Marco_Enlace"> Ejemplo: Si escogemos el ejemplo anterior, está claro que nuestra intención es mantener siempre visible el listado de posibilidades en el marco denominado izquierda, de forma que las páginas a las que nos referimos aparezcan en el marco al que hemos llamado derecha (o arriba y abajo si hemos optado por una definición en filas), para conseguir esto tenemos que añadir el atributo target al marco de la izquierda de la siguiente forma: <frame name = "izquierda" src ="Indice.htm" target="derecha"> Texto en movimiento Vamos a ver distintas soluciones para conseguir texto en movimiento: haciendo uso del lenguaje HTML (las marquesinas), con un GIF animado, con Javascript, etc. Marquesinas (Marquees) Una marquesina (en inglés, marquee) es una ventana en la que se desplaza un texto. Sólo son válidas para el Explorer de Microsoft (en el Netscapese verá como texto fijo). La etiqueta básica es: <MARQUEE> Texto que se desplaza </MARQUEE>
  • 13. Adriano Mazziotti [Escriba aquí] [Escriba aquí] Que resulta como: Como no hemos añadido ningún atributo dentro de la etiqueta, el comportamiento de la marquesina es el que tiene por defecto: ocupa todo el ancho de la pantalla, tiene la altura de una línea y el texto se desplaza lentamente de derecha a izquierda. Vamos a ver los distintos atributos que modifican su apariencia y comportamiento: WIDHT, HEIGHT Ajustan la anchura y altura, respectivamente, de la marquesina. Pueden ser igual a un número de pixels, o a un porcentaje de la pantalla. Ejemplo: <MARQUEE WIDTH=50%HEIGHT=60> Esta marquesina ocupa el 50% del ancho de la pantalla y tiene una altura de 60 pixels </MARQUEE> Que resulta como: ALIGN Modifica el alineamiento del texto que rodea a la marquesina, que puede ser TOP (arriba), MIDDLE (en medio) o BOTTOM (abajo). Ejemplo: <MARQUEE WIDTH=50%HEIGHT=60ALIGN=BOTTOM>La palabra "¡Hola!" estará alineada con la parte inferior de la marquesina</MARQUEE> ¡Hola! Que resulta como: ¡Hola! BEHAVIOR Este atributo (que quiere decir en inglés comportamiento) sirve para definir de qué manera se va a efectuar el desplazmiento del texto. Si es igual a SCROLL (el valor por defecto), el texto aparece por un lado, se desplaza hasta el otro hasta desaparecer por él, y vuelve a empezar (como los casos que hemos visto anteriormente). Si es igual a SLIDE, aparecepor un lado y se desplaza hasta llegar al otro extremo, y se para ahí. Si es igual a ALTERNATE se desplaza alternativamentehacia un lado y otro, siempre dentro de los límites de la marquesina. Ejemplo: <MARQUEE BEHAVIOR=ALTERNATE>Estetextose mueve a un lado y otro, sin desaparecer</MARQUEE> Que se resulta así: BGCOLOR Con este atributo se modifica el colorde fondo de la marquesina, de acuerdo con el método visto en el Capítulo 7. Ejemplo:
  • 14. Adriano Mazziotti [Escriba aquí] [Escriba aquí] <MARQUEE BGCOLOR="#FF7070"> Esta marquesina tiene un fondo de color rosa </MARQUEE> Que resulta así: DIRECTION Este atributo sirve para modificar la dirección hacia la que se dirije el texto. Por defecto es LEFT (izquierda). Se puede hacer que el texto se dirija hacia la derecha igualando este atributo a RIGHT. Ejemplo: <MARQUEE DIRECTION=RIGHT>Estetextose dirije hacia la derecha </MARQUEE> Que resulta como: SCROLLAMOUNT Define la cantidad de desplazamiento del texto en cada movimiento de avance, expresado en pixels. Cuanto mayor es el número, más rápido avanza. Ejemplo: <MARQUEE SCROLLAMOUNT=50> Doy saltos grandes </MARQUEE> Que se ve como: SCROLLDELAY Define el tiempo entre cada movimiento de avance, expresado en milisegundos. Cuanto mayor es el número más lento avanza. Ejemplo: <MARQUEE SCROLLDELAY =200> Espero mucho entre cada salto </MARQUEE> Que se ve como: LOOP Especifica el número deveces que aparecerá el texto. Es indefinido por defecto. HSPACE, VSPACE Definen, respectivamente, la separación en sentido horizontal o vertical del texto que está fuera de la marquesina. Fuentes dentro de las marquesinas Si se desea que el texto que aparece dentro de una marquesina tenga una fuente concreta, distinta de la que tiene por defecto el navegador, se debe poner la etiqueta <FONT FACE> (verCap. 6) por fuera de la etiqueta de la marquesina. Ejemplo: <FONT FACE="Impact">
  • 15. Adriano Mazziotti [Escriba aquí] [Escriba aquí] <MARQUEE BGCOLOR="#FFFF00">Esto se ve con la fuente Impact</MARQUEE> </FONT> Que se verá así: Recuérdese lo dicho en el capítulo 6: para que esto surta efecto, la fuente indicada debe estar instalada en el disco duro del usuario. Véase allí también cómo se pueden indicar otras fuentes alternativas. Como se ha dicho antes, esta etiqueta no es implementada por el Netscape. El texto que está dentro de la etiqueta de la marquesina se verá en este navegador como texto fijo normal. Normalmente, si se hace uso de este recurso es porque se quiere destacar de una manera muy especial un texto, lográndose plenamente este objetivo en el Explorer, pero no así en el Netscape, en donde dicho textopasaría totalmente desapercibido. Una manera de paliar este inconveniente, al menos en parte, es introducir la etiqueta de la marquesina dentro de unatabla (ver el Capítulo 10). De esta manera, el texto estará en cierta medida destacado en el Netscape, y en el Explorer la marquesina se verá de una manera aún más estética. Ejemplo: <TABLE BORDER=1> <TR><TD> <MARQUEE> Marquesina dentro de una tabla </MARQUEE> </TD></TR> </TABLE> Que se verá como: Texto en movimiento con un GIF animado Otro procedimiento para conseguir texto en movimiento es el de confeccionar un GIF animado (ver el Capítulo 12). Se puede conseguir que el texto se desplacerealmente, emulando el comportamiento de las marquesinas, pero no es fácil conseguirlo, y puede ser bastante laborioso. Un procedimiento más sencillo es el siguiente: Creamos el texto apropiado con un programa gráfico (tiene la ventaja sobre las marquesinas de que podemos escoger el tipo de fuente y los efectos que deseemos), tal como el siguiente ejemplo (bienv1.gif):
  • 16. Adriano Mazziotti [Escriba aquí] [Escriba aquí] Luego procedemos a borrar una a una cada palabra (o cada letra si se quisiera), y vamos guardando cada imagen con un nombre distinto, tal como bienv2.gif: A continuación borramos la palabra "del" y guardamos la imagen como bienv3.gif, y así con el resto, hasta bienv7.gif en donde se habrían borrado todas las palabras. Luego procedemos a montar la secuencia de las imágenes en algún programa para crear GIFs animados, como por ejemplo en el GIF Construction Set . El orden será el inverso: bienv7.gif - bienv6.gif - ... - bienv2.gif - bienv1.gif Texto en movimiento con Javascript Otra manera de conseguir texto en movimiento es haciendo uso de Javascript. Vamos a ver dos ejemplos: un scroll (deslizamiento) de un texto en la barra de estado del navegador y un scroll en una ventana dentro de la página. Esto está implementado en los siguientes navegadores: Netscape, versión 2.0o superior. Explorer de Microsoft 3.0 o superior. El Javascript es un lenguaje distinto del HTML, que es el tema de este manual. En los dos ejemplos que vamos a ver a continuación, únicamente se mostrará la manera de incluirlos en nuestro documento HTML, pero sin pretender explicar su estructura. Cómo incluir Javascript en un documento HTML Recordemos que la estructura de un documento HTML es: <HTML> <HEAD> <TITLE> </TITLE> </HEAD> <BODY> </BODY> </HTML>
  • 17. Adriano Mazziotti [Escriba aquí] [Escriba aquí] El script (documento) en Javascript lo tenemos que colocar dentro de la cabecera, después del título. Es decir, entre las etiquetas </TITLE> y </HEAD>, contenido dentro de la etiqueta: <SCRIPT LANGUAGE="JavaScript"> </SCRIPT > Es decir, que queda de esta manera: <HTML> <HEAD> <TITLE> </TITLE> <SCRIPT LANGUAGE="JavaScript"> [Aquí debeir colocado el script] </SCRIPT > </HEAD> <BODY> </BODY> </HTML> Además de esto, se debe añadir algo dentro de la etiqueta <BODY>, como se indicará en cada caso. Scroll en la barra de estado El script es el siguiente: <SCRIPT LANGUAGE="JavaScript"> <!-- /// Scroll en la barra de estado, (C) Pedro Maicas, 1996. var txt="Esta es la primera linea de texto que se desplaza " + " y esta es la segunda, puedes poner todas las" + " que quieras ! "; function scroll() {
  • 18. Adriano Mazziotti [Escriba aquí] [Escriba aquí] window.status = txt; txt = txt.substring(1, txt.length)+ txt.charAt(0); window.setTimeout("scroll()",150); } //--> </SCRIPT> Observación sobreel texto: Se puede poner el texto en una sola línea, tan larga como se quiera, siempre que esté entre " y "; Pero como no debe de haber ningún salto de línea, si el textoes demasiado largo, es mejor dividirlo en distintas líneas, tal como está en el ejemplo. Al final de la última palabra del textoconviene dejar una serie de espacios en blanco, para que no esté encadenado el comienzo con el final. Dentro de la etiqueta <BODY> se debe añadir el atributo: onLoad="scroll();" quedando así: <BODY onLoad="scroll();"> Este es el resultado. Scroll en una ventana Ahora vamos a ver cómo conseguir que se desplace un texto dentro de una ventana de un formulario. Con esto se consigue un efecto parecido al de las marquesinas (pero en este caso sí es implementado por el Netscape 2.0 o superior). El script es el siguiente: <SCRIPT LANGUAGE="JavaScript"> <!-- /// Scroll en en una ventana, (C) Pedro Maicas, 1996. var txt="Esta es la primera linea de texto que se desplaza " + " y esta es la segunda, puedes poner todas las" + " que quieras ! "; function scroll() {
  • 19. Adriano Mazziotti [Escriba aquí] [Escriba aquí] document.frm.w.value = txt; txt = txt.substring(1, txt.length)+ txt.charAt(0); window.setTimeout("scroll()",150); } //--> </SCRIPT> Dentro de la etiqueta <BODY> se debe añadir el atributo: onLoad="scroll();" quedando así: <BODY onLoad="scroll();"> Las etiquetas para la ventana del formulario son: <FORM NAME='frm'> <INPUT TYPE='text'NAME='w' SIZE=64> </FORM> Como la ventana está situada dentro de la página, debemos colocar estas etiquetas en el sitio que nos convenga, dentro de la seción <BODY></BODY>, mezclado con el resto del documento HTML. Este es el resultado.