HTML Introducción

Lo primero que hay que decir es que este curso no explica
ningún estándar específico, ni examina exaustivamente todos los
parámetros de las etiquetas HTML. Intenta ser una guía
práctica, de modo que incluirá todas las cosas que yo crea
importantes y que me han provocado algún quebradero de cabeza
mientras realizaba mis páginas. El curso y sus ejemplos los he
probado con Explorer 5.0 y Netscape 4

HTML Bienvenido a este tu manual de HTML. En él se esta
pretendiendo recopilar todos aquellos conocimientos de este
lenguaje de etiquetas que van a ser necesarios para que puedas
desarrollar una aplicación web de nivel avanzado.
Esta siendo construido a partir de una extensa recopilación de
diferentes manuales disponibles en la red, de la colaboración
de diferentes profesionales del campo del diseño y programación
web y de la experiencia particular de autor.
Este quiere y debe ser un manual dinámico, por lo que te
agradecería que cualquier comentario sobre el mismo que pueda
mejorarlo, cualquier corrección a lo que en él se expone o
cualquier ampliación ó aporte de conocimientos me los remitas
lo antes posible mediante e-mail, a la dirección:
luis_walls@yahoo.com.mx

Página básica

El principio esencial del lenguaje HTML (HyperText Markup Language) es el uso de las etiquetas Funcionan de la siguiente manera:

<XXX> Este es el inicio de una etiqueta.
</XXX> Este es el cierre de una etiqueta.Las letras de la etiqueta pueden estar en mayúsculas o minúsculas, indiferentemente. Por claridad, se usarán en este manual sólamente las mayúsculas

Lo que haya entre ambas etiquetas estará influenciada por ellas. Por ejemplo, todo el documento HTML debe estar entre las etiquetas <HTML> y </HTML>: <HTML> [Todo el documento] </HTML>

El documento en sí está dividido en dos zonas principales:

  • El encabezamiento, comprendido entre las etiquetas <HEAD> y </HEAD>
  • El cuerpo, comprendido entre las etiquetas <BODY> y </BODY>

Dentro del encabezamiento hay información del documento, que no se ve en la pantalla principal, principalmente el título del documento, comprendido entre las etiquetas <TITLE> y </TITLE>. El título debe ser breve y descriptivo de su contenido, pues será lo que vean los demás cuando añadan nuestra página a su bookmark (o agenda de direcciones).

Dentro del cuerpo está todo lo que queremos que aparezca en la pantalla principal (texto, imágenes, etc.)

Por tanto, la estructura 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>

Antes de crear nuestra primera página, unas consideraciones sobre el texto: Cuando escribimos en el documento el texto que queremos que aparezca en la pantalla, veremos que éste se acomoda a ella, sin que tengamos que pulsar el retorno del carro. Si queremos separar el texto en distintos párrafos debemos usar la etiqueta <P>, (que no tiene su correspondiente etiqueta de cierre </P>)

El texto puede tener unas cabeceras, comprendidas entre las etiquetas <H1> y </H1>, <H2> y </H2>, etc. (hasta el número 6), siendo el número indicativo del tamaño. El tamaño mayor es el correspondiente al número 1. Puedes experimentar en el ejemplo que sigue, cambiando el número para comprobar el efecto que se logra.

Una etiqueta muy interesante es la de centrado <CENTER> y </CENTER> (no la soportan todos los navegadores, aunque sí la mayoría de ellos). Nos centra todo lo que esté dentro de ella, ya sea texto, imágenes, etc.

También tenemos los separadores (horizontal rules), que se consiguen con la etiqueta <HR> (no existe la correspondiente de cierre). Con ella se obtiene una raya horizontal tan ancha como la pantalla, y con la apariencia de estar embutida sobre el fondo, como se puede observar a continuación:

Ejemplo práctico

En el procesador de texto copiamos lo siguiente: <HTML> <HEAD> <TITLE> Mi pagina Web </TITLE> </HEAD> <BODY> <H1> <CENTER> Primera pagina </CENTER> </H1> <HR> Esta es mi primera pagina, aunque todavia es muy sencilla. Como el lenguaje HTML no es dificil, pronto estare en condiciones de hacer cosas mas interesantes. <P> Aqui va un segundo parrafo. </BODY>Las líneas en blanco y las indentaciones del texto se han puesto para mayor claridad, pero no son necesarias. De hecho, podría estar todo en una sola línea. Lo importante es el orden correcto de las etiquetas. Por cierto, una etiqueta puede estar anidada dentro de otra. Véase en el ejemplo cómo lo está la etiqueta <CENTER> dentro de la etiqueta <H1>. Es muy importante, en estos casos, que las etiquetas de inicio y de cierre vayan en el orden correcto, pues de lo contrario se producirían errores.

Obsérvese además la falta de los acentos. Se hablará más adelante sobre el motivo de ello.

Guardamos el fichero en el procesador de textos con el nombre de mipagina.html y lo cargamos en el navegador.

Caracteres especiales

 Existen algunas limitaciones para escribir el texto.

Una de ellas es debido a que las etiquetas se forman como un comando escrito entre los símbolos "<" y ">". Por tanto, si se quisieran escribir estos caracteres como parte normal del texto, daría esto lugar a una ambigüedad, ya que el programa navegador podría interpretarlos como el comienzo o final de una etiqueta, en vez de un carácter más del texto.

Para resolver este problema, existen unos códigos para poder escribir estos caracteres y otros relacionados con las etiquetas.< para < (less than, menor que) > para > (greater than, mayor que) & para & (ampersand) ” para ” (double quotation)Como se ve, estos códigos empiezan siempre con el signo & y acaban siempre con ;

De una manera similar, existen códigos para escribir letras específicas de distintos idiomas. Hay muchos de ellos, pero, lógicamente, los que más nos interesan son los propios del castellano (las vocales acentuadas, la ñ y los signos ¿ y ¡ )

Los códigos de las vocales acentuadas se forman comenzando con &, seguido de la vocal en cuestión, seguido de la palabra acute (aguda) y terminando con el signo ; á para la á
é para la é
í para la í
ó para la ó
ú para la ú
Á para la Á
É para la É
Í para la Í
Ó para la Ó
Ú para la Ú
El resto de los códigos son: ñ para la ñ
Ñ para la Ñ
ü para la ü
Ü para la Ü
¿ para ¿
¡ para ¡
Todo esto, que como se ve es muy laborioso, puede parecer inútil ya que si escribimos nuestro texto sin hacer ningún caso de estas convenciones, escribiendo las letras acentuadas y demás signos directamente, es muy posible que el resultado lo veamos correctamente en nuestro navegador, pero nunca podremos estar seguros que les ocurra lo mismo a todos los que accedan a nuestras páginas con otros navegadores distintos.Incluso si se escribe en un procesador de textos de forma manual, se puede escribir el texto en una primera etapa de forma normal y luego aplicarle algún de los programas que hacen la conversión adecuada.

Formato

Como hemos visto en el ejemplo del capítulo anterior, cuando queremos poner un texto sin ninguna caracterísca especial, lo ponemos directamente. Unicamente, la separación entre párrafos (dejando una línea en blanco) la conseguimos con la etiqueta <P>.

Si queremos separar los párrafos, o cualquier otra cosa, pero sin dejar una línea en blanco, usamos una etiqueta parecida <BR> (break, o romper). Tampoco tiene etiqueta de cierre.

Si queremos obtener múltiples líneas en blanco no basta con repetir la etiqueta <P>, sino que hay que combinarla con la etiqueta <BR>. Así por ejemplo, si queremos obtener cuatro líneas en blanco, pondríamos: <BR><P>
<BR><P>
<BR><P>
<BR><P>
Con lo que se obtiene: Al escribir el texto, si ponemos más de un espacio en blanco entre dos palabras observamos que el navegador sólo reconoce uno de ellos. Si queremos forzarle a que lo haga, debemos poner el código ” ” (non-breaking space).

Para destacar alguna parte del texto se pueden usar:

  • <B> y </B> para poner algo en negrita (bold).
  • <I> y </I> para poner algo en cursiva (italic).

Otra etiqueta interesante es <PRE> y </PRE>. El texto que se encuentre entre ella estará preformateado, es decir que aparecerá como si hubiera sido escrito con una máquina de escribir, con una fuente de espaciado fijo (tipo Courier). Además se respetarán los espacios en blanco y retornos del carro, tal como estaban en nuestro documento HTML (lo cual no ocurre normalmente, como hemos visto anteriormente). Es muy apropiada para confeccionar tablas y otros documentos similares.

Con la etiqueta <TT> y </TT> conseguimos también que el texto tenga un tamaño menor y la apariencia de los caracteres de una máquina de escribir (typewriter). La diferencia con la anterior es que no preformatea el texto, sino que únicamente cambia su apariencia.

En las fórmulas matemáticas puede interesar poder escribir índices y subíndices, que se consiguen con las etiquetas

<SUP> </SUP> y <SUB> </SUB> respectivamente. Así, por ejemplo:

m2 se consigue de la siguiente manera: m<SUP>2</SUP>
vx se consigue con: v<SUB>x</SUB>

A menudo nos interesará presentar las cosas en forma de listas. Podemos escoger entre tres tipos distintos:

  1. Listas desordenadas (no numeradas)
  2. Listas ordenadas (numeradas)
  3. Listas de definición.

Las 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> Una cosa
<LI>
Otra cosa
<LI>
Otra más
<LI>
Etc.
</UL>
Es decir, toda la lista está dentro de la etiqueta <UL> y </UL>, y luego cada cosa va precedida de la etiqueta <LI> (list item). El resultado de lo anterior es el siguiente:

  • Una cosa
  • Otra cosa
  • Otra más
  • Etc.

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>

Que daría el siguiente resultado:

  • Mamíferos
  • Peces
    • Sardina
    • Bacalao
  • Aves

Las listas ordenadas (ordered lists) sirven para presentar cosas en un orden determinado. Su estructura es muy similar a la anterior. La diferencia estriba en que en el resultado aparecerá automáticamente un número correlativo para cada cosa. <OL>
<LI> Primera cosa
<LI>
Segunda cosa
<LI>
Tercera cosa
<LI>
Etc.
</OL>
El resultado es:

  1. Primera cosa
  2. Segunda cosa
  3. Tercera cosa
  4. Etc.

Al igual que las listas desordenadas, también se pueden anidar las listas ordenadas.

El tercer tipo lo forman las 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>

Su resultado es:

Una cosa a definir
La definición de esta cosa
Otra cosa a definir
La definición de esta otra cosa

Comentarios no visibles en la pantalla

A veces es muy útil escribir comentarios en el documento HTML sobre el código que escribimos, que nos pueden servir para recordar posteriormente sobre lo que hicimos, y que no queremos que se vean en pantalla.

Esto se consigue encerrando dichos comentarios entre estos dos símbolos: <!-- y -->

Ejemplo: <!-- Esto es un comentario al código que no se verá en pantalla -->

Practica

En el procesador de textos copiamos:

<HTML> <HEAD> <TITLE> Mi pagina del Web – 2 </TITLE> </HEAD> <BODY> <CENTER> <H1> Mis aficiones </H1> </CENTER> <HR> Sin un orden particular, mis <B> aficiones </B> son las siguientes: <UL> <LI> El cine <LI> El deporte <UL> <LI> Natacion <LI> Baloncesto </UL> <LI> La musica </UL> La musica que mas me gusta es <I> (en orden de preferencia): </I> <OL> <LI> El rock <LI> El jazz <LI> La musica clasica </OL> </BODY> </HTML>

  

F o n d o s

Existen dos formas distintas para cambiar el fondo:

  1. Con un color uniforme
  2. Con una imagen

Fondos con un color uniforme

Se consigue añadiendo el comando BGCOLOR a la etiqueta <BODY> (situada al principio del documento), de la siguiente manera:<BODY BGCOLOR="#XXYYZZ">

donde:

XX es un número indicativo de la cantidad de color rojo
YY es un número indicativo de la cantidad de color verde
ZZ es un número indicativo de la cantidad de color azul

Estos números están en numeración hexadecimal. Esta numeración se caracteriza por tener 16 dígitos (en lugar de los diez de la numeración decimal habitual). Estos dígito son: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 .

Los colores primarios son:

#FF0000 – Rojo
#00FF00 – Verde
#0000FF – Azul

Otros colores son:

#FFFFFF – Blanco
#000000 – Negro
#FFFF00 – Amarillo

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.

Podemos hacer nuestros propios experimentos, pero si desea, existen páginas del Web en las que se pueden elegir los colores directamente, como por ejemplo en: http://soloprogramadores.ya.st&#8221;

Colores del texto y de los enlaces

Si no se variasen los colores habituales del texto y de los enlaces (negro y azul, respectivamente), podría ocurrir que su lectura contra un fondo oscuro fuese muy dificultosa, o incluso imposible, si el fondo fuese precisamente negro o azul.Para evitar esto, se pueden escoger los colores del texto y de los enlaces, añadiendo a la etiqueta (si se desea) los siguientes comandos:

TEXT – color del texto
LINK – color de los enlaces
VLINK – color de los enlaces visitados
ALINK – color de los enlaces activos (el que adquieren en el

momento de ser pulsados)

Los códigos de los colores son los mismos que los que se han visto anteriormente.La etiqueta, con todas sus posibilidades, sería:

< BODY BGCOLOR="#XXYYZZ" TEXT="#XXYYZZ" LINK="#XXYYZZ" VLINK="#XXYYZZ" ALINK="#XXYYZZ">

Cambio del color de una parte del texto

El comando TEXT explicado anteriormente (que va englobado dentro de la etiqueta <BODY>) cambia el color de la totalidad del texto de la página.Tanto el Netscape Navigator, como el Microsoft Explorer soportan una etiqueta de color de la fuente con la que se puede cambiar sólo una parte del texto:

<FONT COLOR="#FF0000"> Este texto es de color rojo </FONT>

Que resulta:

Este texto es de color rojo

Fondos con una imagen

El fondo de una página puede ser también una imagen, ya sea en formato GIF o JPEG. Esta imagen se repite por toda la página, de una manera análoga al tapiz de Windows. La estructura de la etiqueta es:<BODY BACKGROUND="imagen.gif">

o bien:

<BODY BACKGROUND="imagen.jpg">

No todos los navegadores soportan este formato

Se pueden añadir también a esta etiqueta todos los comandos para cambiar los colores del texto y de los enlaces, vistos anteriormente. Esto es imprescindible a veces para conseguir que el texto sea legible, en contraste con el fondo.

Dos ejemplos de fondos (Púlsalos para ver su efecto)


wall.gif

nubes.jpg
nubes.jpg

Hay que prever la posibilidad de que quien acceda a nuestra página haya deshabilitado la carga automática de imágenes, en cuyo caso tampoco cargaría la imagen que sirve como fondo y sólo vería el fondo estándar de color gris. Esto podría ser muy perjudicial si hemos escogido unos colores para el texto y los enlaces que no contrastan bien con ese fondo gris. La solución a este problema es poner dentro de la etiqueta <BODY> los dos comandos BACKGROUND y BGCOLOR (en este orden), teniendo cuidadado en escoger un color uniforme de fondo parecido al de la imagen.

Por ejemplo, supongamos que queremos poner como fondo la imagen nubes.jpg. Escogemos entonces un color de fondo azul claro, ( ejemplo: #CCFFFF). La etiqueta quedaría así:

<BODY BACKGROUND="nubes.jpg" BGCOLOR="#CCFFFF">

Esto tiene la ventaja adicional de que, incluso aunque no se deshabilite la carga automática de imágenes, al cargar la página, lo primero que se ve es ese fondo de color uniforme, que luego es reemplazado por el de la imagen.

¿Cómo conseguir un fondo para nuestra página?

Teóricamente, cualquier imagen puede servir como fondo, pero unas son más apropiadas que otras. Además, podemos querer crear un fondo nosotros mismos, o capturarlo de otras páginas.
En Soloprogramadores encontrarás una coleción de fondos, preparados para ser capturados.

Práctica

Vamos a poner como fondo la imagen nubes.jpg, junto con un fondo

 alternativo de color azul claro y hacer que el texto sea de color rojo oscuro, en un ejemplo de práctica. Para ello es necesario antes capturar la imagen y guardarla en el mismo directorio en donde vamos a guardar el fichero que vamos a crear.
(Si nuestro navegador no soporta el formato jpg, lo hacemos con el otro fondo, wall.gif)Cargamos en el editor de textos el codigo y sustituimos la etiqueta <BODY> por esta otra:
<BODY BACKGROUND="nubes.jpg" BGCOLOR="#CCFFFF" TEXT="#AA0000">guarda y visualiza la pagina para cualquier duda ó aclaracion acerca de este tema puedes pulsar el link de consultas.

Escribenos a Solo Programadores: http://www.soloprogramadores.ya.st – © L. Walls
if (document.all) document.body.onmousedown=new Function(“if (event.button==2||event.button==3) alert(‘Solo Programadores’)”) 
  geovisit(); 1   

E n l a c e s (Links)

La característica que más ha influido en el espectacular éxito del Web (o tela de araña) ha sido, aparte la de su carácter multimedia, la posibilidad de unir los distintos documentos repartidos por todo el mundo por medio de enlaces hipertexto.

Estructura de los enlaces

En general, los enlaces tienen la siguiente estructura: <A href="xxx" mce_href="xxx"> yyy </A>donde xxx es el destino del enlace (Obsérvese las comillas).
yyy es el texto indicativo en la pantalla del enlace (con un color especial y generalmente subrayado)

Tipos de enlaces

Vamos a distinguir cuatro tipos de enlaces:

  1. Enlaces dentro de la misma página
  2. Enlaces con otra página nuestra
  3. Enlaces con una página fuera de nuestro sistema
  4. Enlaces con una dirección de email

1. Enlaces dentro de la misma páginaA veces, en el caso de documentos (o páginas) muy extensos, nos puede interesar dar un salto desde una posición a otra determinada.En este caso, lo que antes hemos llamado XXX, es decir, el destino del enlace, en este caso el sitio dentro de la página a donde queremos saltar, se sustituye por #marca (la palabra marca puede ser cualquier palabra que queramos). Lo que hemos llamado antes YYY es la palabra (o palabras) que aparecerán en la pantalla en color (en forma de hipertexto). Su estructura es, entonces:

<A href="#marca" mce_href="#marca"> YYY </A>

Y en el sitio exacto a donde queremos saltar, debemos poner la siguiente etiqueta:

<A NAME="marca"> </A>

Por ejemplo, si quiero saltar desde aquí a la pantalla final, pongo la siguiente etiqueta:

<A href="#final" mce_href="#final"> Pulsa para ir al final </A>

Que resulta como: Pulsa para ir al final (Puedes comprobar cómo salta a la pantalla final)

Y en el final del documento he puesto esta otra etiqueta:

<A NAME="final"> </A>

2. Enlaces con otra página nuestra

Puede ser que tengamos una sola página. Pero lo más frecuente es que tengamos varias páginas, una inicial (o principal) y otras conectadas a ella, e incluso entre ellas mismas. Supongamos que queremos enlazar con la página creada en el ejemplo del capítulo anterior, que la hemos llamado web2.html. En este caso, simplemente sustituimos lo que hemos llamado XXX (el destino del enlace) por el nombre del fichero:

<A href="web2.html" mce_href="web2.html"> Ejemplo de Leccion 2 </A>

Que resulta como: Ejemplo de Leccion 2 (Puedes comprobar cómo carga esa página)

Si queremos que vaya a un sitio concreto de otra página nuestra en vez de ir al principio de la página, adonde va por defecto, en ese sitio tenemos que colocar una marca (véase la sección anterior), y completar el enlace con la referencia a esa marca.

Una observación importante: Estoy suponiendo que la página en la que estoy escribiendo esta etiqueta y la otra página a la que quiero saltar están en el mismo directorio. Porque pudiera ocurrir que he organizado mi sitio del Web con un directorio principal, y otros subdirectorios auxiliares. Si la página a la que quiero saltar está, p. ej. en el subdirectorio pagina, entonces en la etiqueta tendría que haber puesto "pagina/web2.html".

Y a la inversa, si quiero saltar desde una página a otra que está en un directorio anterior, en la etiqueta tendría que haber puesto "../web2.html". Esos dos puntos hace que se dirija al directorio anterior. Obsérvese que se debe utilizar el símbolo / para indicar los subdirectorios, y no este otro \, que es propio únicamente de Windows.

Si nos queremos evitar todas estas complicaciones, podemos tener todo junto en un único directorio, pero esto tiene el inconveniente de que esté todo más desordenado, y sean más difíciles de hacer las futuras modificaciones.

3. Enlaces con una página fuera de nuestro sistema

Si queremos enlazar con una página que esté fuera de nuestro sistema (es decir, que esté en un servidor distinto al que soporta nuestra página), es necesario conocer su dirección completa, o URL (Uniform Resource Locator). El URL podría ser, además de la dirección de una página del Web, una dirección de ftp, gopher, etc.

Una vez conocida la dirección (o URL), lo colocamos en vez de lo que hemos llamado anteriormente xxx (el destino del enlace). Si queremos enlazar con la página de Netscape (cuyo URL es: http://home.netscape.com/), la etiqueta sería:

<A href="http://home.netscape.com/" mce_href="http://home.netscape.com/"> Página inicial de Netscape </A>

Que daría como resultado: Página inicial de Netscape

Es muy importante copiar estas direcciones correctamente (respetando las mayúsculas y minúsculas, pues los servidores UNIX sí las distinguen)

4. Enlaces con una dirección de email

En este caso, sustituimos lo que se ha llamado antes xxx (el destino del enlace) por mailto: seguido de la dirección de email. La estructura de la etiqueta es:

<A HREF="mailto: dirección de email "> Texto del enlace </A>

Un ejemplo de esto está al final de la página principal de este manual. Podría haber puesto:

Comentarios a <A HREF="mailto: solo_programadoresyast@yahoo.com.mx" >Luis Walls </A>

Que resultaría:

Comentarios a Luis Walls

Pero hay algunos navegadores que no reconocen este tipo de enlace, y lo verían de esta manera:

Comentarios a Luis walls

y no tendrían ningún medio de conocer la dirección de email. Por lo tanto, es más seguro poner algo así como: Comentarios a Luis Walls en <A HREF="mailto: solo_programadoresyast@yahoo.com.mx"> solo_programadoresyast@yahoo.com.mx </A> Que resulta:

Comentarios a Luis Walls en solo_programadoresyast@yahoo.com.mx

Es decir, es conveniente, por la razón dicha anteriormente, poner también en el texto del enlace la dirección de email.

Ejemplo de práctica

En el procesador de textos copiamos:

<HTML> <HEAD> <TITLE> Mi pagina del Web – 3 </TITLE> </HEAD> <BODY> <CENTER> <H1> Mis paginas favoritas </H1> </CENTER> <HR> Estas son mis paginas favoritas: <P><A href=”http://home.netscape.com&#8221; mce_href=”http://home.netscape.com”&gt; Netscape </A> <BR> <A href=”http://www.microsoft.com&#8221; mce_href=”http://www.microsoft.com”&gt; Microsoft </A> <BR> <A href=”http://www.soloprogramadores.ya.st&#8221; mce_href=”http://www.soloprogramadores.ya.st”&gt; soloprogramadores! </A> </BODY> </HTML>

Guardamos el fichero de texto con el nombre enlaces.html y lo cargamos en el navegador.
Este es el final

Códigos hexadecimales de color

clr=new Array(’00’,’20’,’40’,’60’,’80’,’a0′,’c0′,’ff’); for (i=0;i<8;i++) { document.write(”

‘); document.write(‘ '); document.write(clr[i]+clr[j]+clr[k]+'

“); } // end –>

000000 000020 000040 000060 000080 0000a0 0000c0 0000ff
002000 002020 002040 002060 002080 0020a0 0020c0 0020ff
004000 004020 004040 004060 004080 0040a0 0040c0 0040ff
006000 006020 006040 006060 006080 0060a0 0060c0 0060ff
008000 008020 008040 008060 008080 0080a0 0080c0 0080ff
00a000 00a020 00a040 00a060 00a080 00a0a0 00a0c0 00a0ff
00c000 00c020 00c040 00c060 00c080 00c0a0 00c0c0 00c0ff
00ff00 00ff20 00ff40 00ff60 00ff80 00ffa0 00ffc0 00ffff
200000 200020 200040 200060 200080 2000a0 2000c0 2000ff
202000 202020 202040 202060 202080 2020a0 2020c0 2020ff
204000 204020 204040 204060 204080 2040a0 2040c0 2040ff
206000 206020 206040 206060 206080 2060a0 2060c0 2060ff
208000 208020 208040 208060 208080 2080a0 2080c0 2080ff
20a000 20a020 20a040 20a060 20a080 20a0a0 20a0c0 20a0ff
20c000 20c020 20c040 20c060 20c080 20c0a0 20c0c0 20c0ff
20ff00 20ff20 20ff40 20ff60 20ff80 20ffa0 20ffc0 20ffff
400000 400020 400040 400060 400080 4000a0 4000c0 4000ff
402000 402020 402040 402060 402080 4020a0 4020c0 4020ff
404000 404020 404040 404060 404080 4040a0 4040c0 4040ff
406000 406020 406040 406060 406080 4060a0 4060c0 4060ff
408000 408020 408040 408060 408080 4080a0 4080c0 4080ff
40a000 40a020 40a040 40a060 40a080 40a0a0 40a0c0 40a0ff
40c000 40c020 40c040 40c060 40c080 40c0a0 40c0c0 40c0ff
40ff00 40ff20 40ff40 40ff60 40ff80 40ffa0 40ffc0 40ffff
600000 600020 600040 600060 600080 6000a0 6000c0 6000ff
602000 602020 602040 602060 602080 6020a0 6020c0 6020ff
604000 604020 604040 604060 604080 6040a0 6040c0 6040ff
606000 606020 606040 606060 606080 6060a0 6060c0 6060ff
608000 608020 608040 608060 608080 6080a0 6080c0 6080ff
60a000 60a020 60a040 60a060 60a080 60a0a0 60a0c0 60a0ff
60c000 60c020 60c040 60c060 60c080 60c0a0 60c0c0 60c0ff
60ff00 60ff20 60ff40 60ff60 60ff80 60ffa0 60ffc0 60ffff
800000 800020 800040 800060 800080 8000a0 8000c0 8000ff
802000 802020 802040 802060 802080 8020a0 8020c0 8020ff
804000 804020 804040 804060 804080 8040a0 8040c0 8040ff
806000 806020 806040 806060 806080 8060a0 8060c0 8060ff
808000 808020 808040 808060 808080 8080a0 8080c0 8080ff
80a000 80a020 80a040 80a060 80a080 80a0a0 80a0c0 80a0ff
80c000 80c020 80c040 80c060 80c080 80c0a0 80c0c0 80c0ff
80ff00 80ff20 80ff40 80ff60 80ff80 80ffa0 80ffc0 80ffff
a00000 a00020 a00040 a00060 a00080 a000a0 a000c0 a000ff
a02000 a02020 a02040 a02060 a02080 a020a0 a020c0 a020ff
a04000 a04020 a04040 a04060 a04080 a040a0 a040c0 a040ff
a06000 a06020 a06040 a06060 a06080 a060a0 a060c0 a060ff
a08000 a08020 a08040 a08060 a08080 a080a0 a080c0 a080ff
a0a000 a0a020 a0a040 a0a060 a0a080 a0a0a0 a0a0c0 a0a0ff
a0c000 a0c020 a0c040 a0c060 a0c080 a0c0a0 a0c0c0 a0c0ff
a0ff00 a0ff20 a0ff40 a0ff60 a0ff80 a0ffa0 a0ffc0 a0ffff
c00000 c00020 c00040 c00060 c00080 c000a0 c000c0 c000ff
c02000 c02020 c02040 c02060 c02080 c020a0 c020c0 c020ff
c04000 c04020 c04040 c04060 c04080 c040a0 c040c0 c040ff
c06000 c06020 c06040 c06060 c06080 c060a0 c060c0 c060ff
c08000 c08020 c08040 c08060 c08080 c080a0 c080c0 c080ff
c0a000 c0a020 c0a040 c0a060 c0a080 c0a0a0 c0a0c0 c0a0ff
c0c000 c0c020 c0c040 c0c060 c0c080 c0c0a0 c0c0c0 c0c0ff
c0ff00 c0ff20 c0ff40 c0ff60 c0ff80 c0ffa0 c0ffc0 c0ffff
ff0000 ff0020 ff0040 ff0060 ff0080 ff00a0 ff00c0 ff00ff
ff2000 ff2020 ff2040 ff2060 ff2080 ff20a0 ff20c0 ff20ff
ff4000 ff4020 ff4040 ff4060 ff4080 ff40a0 ff40c0 ff40ff
ff6000 ff6020 ff6040 ff6060 ff6080 ff60a0 ff60c0 ff60ff
ff8000 ff8020 ff8040 ff8060 ff8080 ff80a0 ff80c0 ff80ff
ffa000 ffa020 ffa040 ffa060 ffa080 ffa0a0 ffa0c0 ffa0ff
ffc000 ffc020 ffc040 ffc060 ffc080 ffc0a0 ffc0c0 ffc0ff
ffff00 ffff20 ffff40 ffff60 ffff80 ffffa0 ffffc0 ffffff

Free tablecolors provided
by Solo Programadores

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s