Ficha de codigos HTML

Diseño de Páginas Web con HTML

Primeros pasos

<HTML>

<HEAD>

<TITLE> TITULO </TITLE>

</HEAD>

<BODY>

CUERPO DEL DOCUMENTO HTML

</BODY>

</HTML>

Colores de fondo de la página <BODY BGCOLOR="#CCFFCC">

Imágenes <BODY BACKGROUND="tortuga1.gif">

Formato de fuentes Negrita <B>letra negrita</B> letra negrita

Cursiva <I>letra cursiva</I> letra cursiva

Subrayado <U>letra subrayada</U> letra subrayada

Espaciado uniforme <TT>letra con espacio uniforme</TT> letra con espacio uniforme

sentencias combinadas <B>letra negrita</B> <I>letra cursiva</I> <U>letra subrayada</U>

sentencias anidadas <B><I>letra negrita cursiva</I></B>

<I><U>letra cursiva subrayada</U></I>

<B><I><U>letra negrita cursiva subrayada</I></B></U>

Tamaño de la fuente <FONT SIZE="7">

Tipos de fuentes. <FONT FACE="ARIAL”>

Fuentes Habituales Andale Mono Arial Arial Black Comic Sans MS Courier New

Georgia Impact Times New Roman Trebuchet MS Verdana

Color de la fuente <FONT COLOR="#FF0000">

Paleta de 216 colores: números

FFFFFF FFFFCC FFFF99 FFFF66 FFFF33 FFFF00 CCFFFF CCFFCC

CCFF99 CCFF66 CCFF33 CCFF00 99FFFF 99FFCC 99FF99 66FFFF

99FF66 99FF33 66FFCC FFCCFF 99FF00 33FFFF FFCCCC 33FFCC

00FFFF 66FF99 FFCC99 66FF66 66FF33 00FFCC 66FF00 33FF99

FFCC66 FFCC33 CCCCFF 33FF66 33FF33 00FF99 FFCC00 33FF00

00FF66 00FF33 00FF00 CCCCCC CCCC99 99CCFF CCCC66 CCCC00

CCCC33 99CCCC FF99FF 99CC99 66CCFF FF99CC 99CC66 66CCCC

99CC33 00CCFF 33CCFF 99CC00 FF9999 66CC99 FF9966 66CC66

33CCCC CC99FF 00CCCC FF9933 FF9900 66CC33 66CC00 33CC99

00CC99 CC99CC 33CC66 00CC66 CC9999 FF66FF 33CC33 33CC00

CC9966 00CC33 9999FF 00CC00 CC9933 CC9900 FF66CC 9999CC

FF6699 999999 6699FF FF6666 CC66FF 999966 6699CC 999933

FF6633 FF6600 FF33FF 3399FF 999900 669999 CC66CC 0099FF

FF33CC 3399CC CC6699 669966 FF00FF 339999 669933 669900

FF3399 0099CC 9966FF CC6666 009999 CC6633 CC6600 339966

FF00CC FF3366 009966 CC33FF FF3333 339933 009933 9966CC

FF3300 FF0099 339900 009900 6666FF CC33CC FF0066 996699

FF0033 FF0000 CC00FF CC3399 996666 6666CC 996633 996600

3366FF CC3366 CC00CC 9933FF 0066FF 666699 CC3333 CC3300

3366CC CC0099 9933CC 666666 666633 0066CC 9900FF 666600

CC0066 336699 993399 CC0033 6633FF 336666 006699 CC0000

993366 9900CC 336633 006666 336600 6633CC 3333FF 006633

993333 993300 6600FF 990099 006600 0033FF 663399 990066

3333CC 663366 6600CC 990033 0033CC 990000 3300FF 663333

663300# 660099 0000FF 333399 3300CC 003399 333300 660066

333333 003366 0000CC 660033 333300 660000 330099 003333

003300 000099 330066 330033 000066 330000 000033 000000

Paleta de 140 colores: nombres

White Snow Seashell FloralWhite OldLace

Linen GhostWhite WhiteSmoke Gainsboro LightGrey

Silver DarkGray LightCyan Azure AliceBlue

Lavender LavenderBlush MistyRose MintCream Honeydew

Beige Cornsilk AntiqueWhite PapayaWhip Ivory

LightYellow LightGoldenrodYellow LemonChiffon PaleGoldenrod Khaki

BlanchedAlmond Bisque Moccasin Wheat NavajoWhite

PeachPuff LightSteelBlue LightBlue SkyBlue LightSkyBlue

DeepSkyBlue DodgerBlue CornflowerBlue SteelBlue RoyalBlue

Blue MediumBlue DarkBlue MediumSlateBlue SlateBlue

DarkSlateBlue Indigo Navy MidnightBlue MediumPurple

BlueViolet DarkViolet DarkOrchid DarkMagenta Purple

Thistle Plum Magenta Violet Orchid

MediumOrchid Pink LightPink HotPink DeepPink

PaleVioletRed MediumVioletRed Burlywood LightSalmon DarkSalmon

RosyBrown Salmon LightCoral Coral Tomato

OrangeRed Red IndianRed Crimson Firebrick

Brown Sienna SaddleBrown DarkRed Maroon

Tan SandyBrown Orange DarkOrange Chocolate

Peru DarkSeaGreen DarkKhaki Yellow Gold

Goldenrod DarkGoldenrod OliveDrab ForestGreen Green

Olive DarkOliveGreen DarkGreen SeaGreen MediumSeaGreen

LimeGreen YellowGreen Chartreuse GreenYellow LawnGreen

Lime MediumSpringGreen SpringGreen LightGreen PaleGreen

Cyan PaleTurquoise PowderBlue Turquoise MediumTurquoise

DarkTurquoise Aquamarine MediumAquamarine LightSeaGreen CadetBlue

DarkCyan Teal LightSlateGray SlateGray Gray

DimGray DarkSlateGray Black

Varios atributos n <FONT COLOR="#FF0000" FACE="ARIAL" SIZE="7">

Salto de línea nn <br>

Encabezamientos <H1>Encabezamiento H1</H1>

<H2>Encabezamiento H2</H2>





Alineamiento del encabezado <H2 ALIGN="left">Alineación a la izquierda<H2>

<H2 ALIGN="center">Alineación al centro<H2>

<H2 ALIGN="right">Alineación a la derecha<H2>

Tabla de caracteres del Documento

Carácter CÓDIGO ENTIDAD Carácter CÓDIGO ENTIDAD Carácter CÓDIGO ENTIDAD

! ! -- « « &laquo Ö Ö &Ouml

" " -- ¬ ¬ &not × × &times

# # -- &shy Ø Ø &Oslash

$ $ -- ® ® &reg Ù Ù &Ugrave

% % -- ¯ ¯ &macr Ú Ú &Uacute

& & -- ° ° &deg Û Û &Ucirc

' ' -- ± ± &plusmn Ü Ü &Uuml

( ( -- ² ² &sup2 Ý Ý &Yacute

) ) -- ³ ³ &sup3 Þ Þ &THORN

* * -- ´ ´ &acute ß ß &szlig

+ + -- µ µ &micro à à &agrave

, , -- ¶ ¶ &para á á &aacute

- - -- · · &middot â â &acirc

. . -- ¸ ¸ &cedil ã ã &atilde

/ / -- ¹ ¹ &sup1 ä ä &auml

: : -- º º &ordm å å &aring

; ; -- » » &raquo æ æ &aelig

< < -- ¼ ¼ &frac14 ç ç &ccedil

= = -- ½ ½ &frac12 è è &egrave

> > -- ¾ ¾ &frac34 é é &eacute

? ? -- ¿ ¿ &iquest ê ê &ecirc

@ @ -- À À &Agrave ë ë &euml

[ [ -- Á Á &Aacute ì ì &igrave

\ \ -- Â Â &Acirc í í &iacute

] ] -- Ã Ã &Atilde î î &icirc

^ ^ -- Ä Ä &Auml ï ï &iuml

_ _ -- Å Å &Aring ð ð &eth

` ` -- Æ Æ &AElig ñ ñ &ntilde

{ { -- Ç Ç &Ccedil ò ò &ograve

| | -- È È &Egrave ó ó &oacute

} } -- É É &Eacute ô ô &ocirc

~ ~ -- Ê Ê &Ecirc õ õ &otilde

&nbsp Ë Ë &Euml ö ö &ouml

¡ ¡ &iexcl Ì Ì &Igrave ÷ ÷ &divide

¢ ¢ &cent Í Í &Iacute ø ø &oslash

£ £ &pound Î Î &Icirc ù ù &ugrave

¤ ¤ &curren Ï Ï &Iuml ú ú &uacute

¥ ¥ &yen Ð Ð &ETH û û &ucirc

¦ ¦ &brvbar Ñ Ñ &Ntilde ü ü &uuml

§ § &sect Ò Ò &Ograve ý ý &yacute

¨ ¨ &uml Ó Ó &Oacute þ þ &thorn

© © &copy Ô Ô &Ocirc ÿ ÿ &yuml

ª ª &ordf Õ Õ &Otilde

Espaciado Uniforme

Bien, con la sentencia <PRE> (PREFORMATO) podemos evitarlo y hacer que el navegador muestre las cosas

tal y como las hemos tecleado en el Bloc de Notas, pero usando una fuente con espaciado uniforme.

Listas de elementos Listas numeradas

Las listas numeradas representarán los elementos de la lista numerando cada uno de ellos según el lugar

que ocupan en la lista. Para este tipo de lista se utiliza la directiva <OL></OL>. Cada uno de los elementos

de la lista irá precedido de la directiva <LI>. La directiva <OL> puede llevar los siguientes parámetros:

start = num

Indica que número será el primero de la lista. Si no se indica se entiende que empezará por el número 1. Se

indica numéricamente, independientemente del tipo que se elija.

type = tipo

Indica el tipo de numeración utilizada. Si no se indica se entiende que será una lista ordenada

numéricamente.

Los tipos posibles son:

1 = Numéricamente. (1, 2, 3, 4, ... etc.)

a = Letras minúsculas. (a, b, c, d, ... etc.)

A = Letras mayúsculas. (A, B, C, D, ... etc.)

i = Números romanos en minúsculas. (i, ii, iii, iv, v, ... etc.)

I = Números romanos en mayúsculas. (I, II, III, IV, V, ... etc.)

Ejemplo Resultado

<OL> <LI>Fila1

<LI> Fila2

<LI> Fila3

<LI> Fila4

</OL>

1. Fila1

2. Fila2

3. Fila3

4. Fila4

<OL type = A >

<LI> Fila1

<LI> Fila2

<LI> Fila3

<LI> Fila4

</OL>

A. Fila1

B. Fila2

C. Fila3

D. Fila4

Listas sin numerar

Las listas sin numerar representan los elementos de la lista con un "topo" o marca que antecede a cada uno

de ellos. Se utiliza la directiva <UL></UL> para delimitar la lista, y <LI> para indicar cada uno de los

elementos. La directiva <UL> puede contener el parámetro type que indica la forma del "topo" o marca que

antecede a cada elemento de la lista. Los valores de type pueden ser disc, circle o square, con lo que el topo

o marca puede ser un disco, un círculo o un cuadrado.

Ejemplo Resultado

<UL type = disc >

<LI> Fila1

<LI> Fila2

<LI> Fila3

<LI> Fila4

</UL>

Fila1

Fila2

Fila3

Fila4

<UL type = square>

<LI> Fila1

<LI> Fila2

<LI> Fila3

<LI> Fila4

</UL>

Fila1

Fila2

Fila3

Fila4

Listas de definición

Las listas de definición muestran los elementos tipo Diccionario, o sea, término y definición. Se utiliza para

ellas la directiva <DL></DL>. El elemento marcado como término se antecede de la directiva <DT>, el

marcado como definición se antecede de la directiva <DD>.

Ejemplo Resultado

<DL> <DT>WWW

WWW

Abreviatura de World Wide Web

<DD>Abreviatura de World Wide Web

<DT>FTP

<DD>Abreviatura de File Transfer Protocol

<DT>IRC

<DD>Abreviatura de Internet Relay Chat

</DL>

FTP

Abreviatura de File Transfer Protocol

IRC

Abreviatura de Internet Relay Chat

Existen otros dos tipos de listas menos comunes. Las listas de Menú o Directorio se comportan igual que las

listas sin numerar. La lista de Menú utiliza la directiva <MENU></MENU> y los elementos se anteceden

de <LI> El resultado es una lista sin numerar más "compacta" es decir, con menos espacio interlineal entre

los elementos. La lista de Directorio utiliza la directiva <DIR></DIR> y los elementos se anteceden de

<LI>. Los elementos tienen un límite de 20 caracteres.

Listas anidadas

Todas las listas se pueden "anidar", es decir incluir una lista dentro de otra, con lo que se consigue una

estructura tipo "índice de materias".

Ejemplo Resultado

<UL type= disc>

<LI>Buscadores

<UL> <LI>Google

<LI>Yahoo

<LI>Ole

<LI>El índice

</UL> <LI>Links

<UL> <LI>Pangea

<LI>PIE

</UL>

</UL>

Buscadores

Google

Yahoo

Ole

El índice

Links

Pangea

PIE

Imágenes <IMG src="leon.jpg" >

Hay dos formatos de imágenes que todos los navegadores modernos reconocen. Son las imágenes GIF

y JPG. Cualquier otro tipo de fichero gráfico o de imagen (BMP, PCX, CDR, etc...) no será mostrado

por el visor, a no ser que disponga de un programa externo que permita su visualización.

La directiva <IMG>

src = "imagen"

Indica el nombre del fichero gráfico a mostrar.

alt = "Texto"

Mostrará el texto indicado en el caso de que el navegador utilizado para ver la página no sea capaz de

visualizar la imagen.

align = TOP / MIDDLE / BOTTOM

Las imágenes, por defecto, se comportan como si fueran un carácter, alineándose en la misma línea que el

texto que las precede o que las sigue. Éste parámetro indica cómo se alineará el texto que siga a la imagen

con respecto a ésta. TOP alinea el texto con la parte superior de la imagen, MIDDLE con la parte central, y

BOTTOM con la parte inferior. Otras opciones más avanzadas serían: TEXTTOP se alinea justo al

comienzo del texto más alto de la línea, ABSMIDDLE, se alinea en el centro real de la imagen y

ABSBOTTOM, coloca el texto justo al final de la imagen. Estos tres parámetros son más precisos, pero no

todos los navegadores los aceptan.

align = LEFT / RIGHT

Si en el parámetro align tiene los valores left o right, la imagen dejará de comportarse como un carácter

colocándose a la izquierda o a la derecha y permitiendo escribir texto a su otro lado (si no, sólo se podrá

escribir una línea).

border = tamaño

Indica el tamaño del "borde" de la imagen. A toda imagen se le asigna un borde que será visible cuando la

imagen forme parte de un Hyperenlace.

height = tamaño

Indica el alto de la imagen en puntos o en porcentaje. Se puede usar para variar el tamaño de la imagen

original, aunque es mejor redimensionarla en un programa de retoque fotográfico ya que será de mejor

calidad y el archivo tendrá el tamaño apropiado.

width = tamaño

Indica el ancho de la imagen en puntos o en porcentaje. Se puede usar para variar el tamaño de la imagen

original, aunque es mejor redimensionarla en un programa de retoque fotográfico ya que será de mejor

calidad y el archivo tendrá el tamaño apropiado.

hspace = margen

Indica el número de espacios horizontales, en puntos, que separarán la imagen del texto que la siga y la

anteceda.

vspace = margen

Indica el número de puntos verticales que separaran la imagen del texto que le siga y la anteceda.

Comentarios <!-—comentario-->

Tablas Estructura de una tabla

Vamos a ver ordenadamente (de fuera hacia dentro) las etiquetas necesarias para confeccionar las tablas.

1. La etiqueta general, que engloba a todas las demás es <TABLE> y </TABLE>. Es decir:

<TABLE> [resto de las etiquetas] </TABLE> Con esto se presentarían los datos tabulados, pero faltaría la característica que hace más atractivas a las

tablas, y es que estos datos vayan dentro de unos cajetines formados por un borde. Para esto tenemos que

añadir el atributo BORDER a la etiqueta, es decir:

<TABLE BORDER> [resto de las etiquetas] </TABLE> 2. En el siguiente nivel, dentro de la anterior, están las etiquetas para formar cada fila (row) de la tabla,

que son <TR> y </TR>. Hay que repetirlas tantas veces como filas queremos que tenga la tabla. Es decir,

para una tabla con dos filas, sería:

<TR> [etiquetas de las distintas celdas de la primera fila] </TR> <TR> [etiquetas de las distintas celdas de la segunda fila] </TR> 3. En el último nivel (dentro de las anteriores) están las etiquetas de cada celda, que son <TD> y </TD>,

que engloban el contenido de cada celda concreta (texto, imágenes, etc.). Hay que repetirla tantas veces

como celdas queremos que haya en esa fila.

Tabla con bordes

Tabla sin bordes

border="0"

Tabla con borde ancho border="5" Aumentamos el tamaño de las celdas cellpadding="15"

Aumentamos el espacio entre las celdas cellspacing="20"

Título de la tabla <CAPTION> TÍTULO </CAPTION> Celdas de cabecera

<TR> <TH>Columna 1</TH> <TH>Columna 2</TH> <TH>Columna 3</TH> </TR> Que resulta:

Se pueden colocar en el sitio que se quiera, aunque lo normal es que vayan en los bordes., encabezando las

columnas o las filas.

Contenido de las celdas

Hasta ahora, en todos los ejemplos se ha puesto un texto normal dentro de las distintas celdas. Pero se puede

poner en ellas cualquier otro elemento de los que van en un documento HTML, como imágenes, enlaces,

etc. No hay más que poner dentro de la etiqueta de la celda la etiqueta correspondiente a una imagen, un

enlace, etc.

Ejemplo con una imagen:

<TABLE> <TR><TD><IMG SRC="imagen.gif"></TD></TR> </TABLE>

Posicionamiento del contenido dentro de la celda

Alineamiento horizontal dentro de la celda

<TD ALIGN=CENTER> Al centro </TD>

<TD ALIGN=RIGHT> A la derecha </TD>

<TD ALIGN=LEFT> izquierda </TD>

Alineamiento vertical dentro de la celda

../HTML-Webmaster/cap4.html

<TD VALIGN=TOP> ARRIBA </TD>

<TD VALIGN=BOTTOM> ABAJO </TD>

Variando las dimensiones de la tabla <TABLE WIDTH=60% HEIGHT=40%>

<TABLE WIDTH=400 HEIGHT=300> Filas con desigual número de celdas

Celdas que abarcan a otras varias <TR> <TD COLSPAN=2> Celda sobre 2 columnas </TD> <TR> <TD ROWSPAN=2> Celda junto a 2 filas </TD>

Color de fondo en las tablas 1. Que la totalidad de la tabla tenga un color de fondo. Para ello, colocamos el atributo dentro de la

etiqueta TABLE. Por ejemplo, vamos a hacer que la tabla tenga un fondo verde (#00FF00):

<TABLE BORDER BGCOLOR="#00FF00"> <TR> <TD>fila1-celda1</TD> <TD>fila1-celda2</TD> </TR> <TR> <TD>fila2-celda1</TD> <TD>fila2-celda2</TD> </TR> </TABLE> 2. Que solamente una celda determinada tenga un color de fondo. Para ello, colocamos el atributo

dentro de la etiqueta de la celda correspondiente. Por ejemplo, vamos a hacer que sólo la celda 1 de la fila 1

tenga un color verde:

<TABLE BORDER> <TR><TD BGCOLOR="#00FF00">fila1-celda1</TD><TD>fila1-celda2</TD></TR> <TR> <TD>fila2-celda1</TD> <TD>fila2-celda2</TD> </TR> </TABLE> 3. Que la generalidad de las celdas tenga un color, pero que alguna celda tenga uno particular. El

atributo del color general se coloca en la etiqueta TABLE, y el del color particular en la etiqueta de la celda en

cuestión (una combinación de los dos casos anteriores). por ejemplo, vamos a hacer que la generalidad de

la tabla sea de color rojo (#FF0000), pero que la celda 1 de la fila 1 sea de color verde (#00FF00):

<TABLE BORDER BGCOLOR="#FF0000"> <TR><TD BGCOLOR="#00FF00">fila1-celda1</TD><TD>fila1-celda2</TD></TR> <TR> <TD>fila2-celda1</TD> <TD>fila2-celda2</TD> </TR> </TABLE>

Imágenes de fondo en las tablas

<TABLE BORDER BACKGROUND="león.jpg"> (Se omite el resto de las etiquetas de la tabla)

Si, se pone este atributo dentro de la etiqueta de una fila: <TR BACKGROUND="leon.jpg"> se verá sólo en esa fila, como por ejemplo:

Si, por el contrario, sólo se pone este atributo dentro de la etiqueta de una celda concreta <TD BACKGROUND="leon.jpg"> entonces la imagen de fondo se verá sólo en esa celda, como por ejemplo:

Separación entre las celdas de una tabla

<TABLE BORDER CELLSPACING=20&GT; (Se omite el resto de las etiquetas de la tabla) <TABLE BORDER=5 CELLSPACING=20>; Separación entre el borde y el contenido dentro de las celdas

Por defecto, la separación entre el borde y el contenido dentro de las celdas es de un pixel. Se puede

cambiar esto con el atributo CELLPADDING, que se pone dentro de la etiqueta TABLE.

Por ejemplo, para obtener una separación de 20 pixels entre el contenido y los bordes, dentro de cada celda: <TABLE BORDER CELLPADDING=20>;

Se puede combinar este atributo con CELLSPACING (visto en el apartado anterior).

Por ejemplo, una tabla con bordes de 5 de espesor, separación entre celdas de 15 y separación del contenido

con respecto a los bordes de las celdas de 20, lo obtendríamos con: <TABLE BORDER=5 CELLSPACING=15 CELLPADDING=20>;

(Se omite el resto de las etiquetas de la tabla)

Hiperenlaces <a> </a> Un hiperenlace, hipervínculo, o vínculo, no es más que un enlace, que al ser pulsado lleva de una página o

archivo.

Hiperenlace <a> </a>

Aquellos elementos (texto, imágenes, etc.) sobre los que se desee insertar un enlace han de encontrarse entre

las etiquetas <a> y </a>, especificando con el atributo href la página a la que está asociado el enlace,

Referencia absoluta

<a href="http://www.google.es/index.html">Visita www.google.es/index.html</a> Referencia relativa

<a href="HTML006.html">Enlace a fondo de página</a>

Marcos o Frames

Marcos horizontales

<HTML> <HEAD> <TITLE>HTML47</TITLE> </HEAD> <FRAMESET COLS="20%, 80%"> <FRAME SRC=" HTML008.html " NAME="HTML08"> <FRAME SRC=" HTML009.html " NAME="HTML09"> </FRAMESET> </HTML>

Marcos verticales

Marcos mixtos

Es posible adoptar simultáneamente una división tanto en columnas como en filas, de manera que se cree

una ventana dividida en varios marcos. Veamos cómo debemos intervenir en el código HTML del

documento según el número y la posición de los marcos que queremos crear.

http://www.google.es/index.html%3c/a

Para eliminar el borde gris de los marcos, se debe insertar el siguiente código:

<FRAMESET COLS="70%,30%" BORDER=0>

Sonido

Sonido activado por el usuario

<A HREF="musica.mp3">Pulsa para escuchar la música<A>

Sonido de fondo

<EMBED SRC="mid1.mid" WIDTH=2 HEIGHT=0 AUTOSTART="true" hidden> Esta etiqueta tiene los siguiente parámetros:

Parámetro Utilidad

SRC Contiene el nombre de archivo de sonido a reproducir

WIDTH y HEIGHT En Netscape aparece un pequeño reproductor, estos parámetros especifican su

tamaño.

AUTOSTART="true" Arranca automáticamente la reproducción.

LOOP="true" Reproduce ininterrumpidamente el fichero hasta que salimos de la página.

HIDDEN="true" Oculta el reproductor.

Sonido de fondo en Java

<html> <body> <div id="fantasma"><embed src=mid1.mid autostart=true hidden=true></div> <script language="javascript"> function enciende(){ document.getElementById("fantasma").innerHTML = "<embed src=mid1.mid autostart=true hidden=true>" } function apaga(){ document.getElementById("fantasma").innerHTML = "<embed src=mid1.mid autostart=false hidden=true>" } </script> <input type=button value="Activa el Sonido" onClick="enciende()"><br><br> <input type=button value="Desactiva el sonido" onClick="apaga()"> </body> </html>

Texto en movimiento

Marquesinas (Marquees) <MARQUEE> Texto que se desplaza </MARQUEE> Atributos de las marquesinas

WIDHT, HEIGHT

WIDHT: Ajusta la anchura de la marquesina

HEIGHT: Ajusta la altura de la marquesina

<MARQUEE WIDTH=50% HEIGHT=60>

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=200 ALIGN=botton>

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, aparece por un lado y se desplaza hasta llegar al otro extremo, y se para

ahí. Si es igual a ALTERNATE se desplaza alternativamente hacia un lado y otro, siempre dentro de los

límites de la marquesina. Ejemplo:

<MARQUEE BEHAVIOR=ALTERNATE> Este texto se mueve a un lado y otro, sin desaparecer </MARQUEE>

BGCOLOR

Con este atributo se modifica el color de fondo de la marquesina.

<MARQUEE BGCOLOR="#FF7070"> Esta marquesina tiene un fondo de color rojo </MARQUEE>

DIRECTION

Este atributo sirve para modificar la dirección hacia la que se dirige el texto.

Por defecto es LEFT (izquierda). Se puede hacer que el texto se dirija hacia la derecha igualando este

atributo a RIGHT.

<MARQUEE DIRECTION=RIGHT> Este texto se dirige hacia la derecha </MARQUEE>

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.

<MARQUEE SCROLLAMOUNT=50> Este texto se mueve rápidamente </MARQUEE>

SCROLLDELAY

Define el tiempo entre cada movimiento de avance, expresado en milisegundos.

Cuanto mayor es el número más lento avanza.

<MARQUEE SCROLLDELAY=200> Este texto se mueve lentamente </MARQUEE>

LOOP

Especifica el número de veces que aparecerá el texto.

Es indefinido por defecto.

<MARQUEE LOOP=5 > texto </MARQUEE>

HSPACE, VSPACE

Definen, respectivamente, la separación en sentido horizontal o vertical del texto que está fuera de la

marquesina.

<MARQUEE HSPACE=60 VSPACE=30 > texto </MARQUEE>

Marquesina dentro de una tabla

<TABLE BORDER=1> <TR><TD> <MARQUEE> Marquesina dentro de una tabla </MARQUEE> </TD></TR> </TABLE>

Ficha de codigos HTML

Technology

Transcript of Ficha de codigos HTML