TEMA I

Introduccin al HTML
HTML es el lenguaje con el que se escriben las pginas Web. Las pginas Web pueden ser vistas por el usuario mediante un tipo de aplicacin llamada navegador. Podemos decir por lo tanto que el HTML es el lenguaje usado por los navegadores para mostrar las pginas Webs al usuario, siendo hoy en da la interface ms extendida en la red. Este lenguaje nos permite aglutinar textos, sonidos e imgenes y combinarlos a nuestro gusto. Adems, el HTML nos permite la introduccin de referencias a otras pginas por medio de los enlaces hipertexto. El HTML se cre en un principio con objetivos divulgativos. No se pens que la Web llegara a ser un rea de ocio con carcter multimedia, de modo que, el HTML se cre sin dar respuesta a todos los posibles usos que se le iba a dar y a todos los colectivos de gente que lo utilizaran en un futuro. Sin embargo, pese a esta deficiente planificacin, si que se han ido incorporando modificaciones con el tiempo, estos son los estndares del HTML. Numerosos estndares se han presentado ya. El HTML 5 es el ltimo estndar. Esta evolucin tan anrquica del HTML ha supuesto toda una seria de inconvenientes y deficiencias que han debido ser superados con la introduccin de otras tecnologas accesorias capaces de organizar, optimizar y automatizar el funcionamiento de las Webs. Ejemplos que pueden sonaros son las CSS, JavaScript u otros. Veremos ms adelante en que consisten algunas de ellas. Otros de los problemas que han acompaado al HTML es la diversidad de navegadores presentes en el mercado los cuales no son capaces de interpretar un mismo cdigo de una manera unificada. Esto obliga a que una vez creada la pgina, comprobar que sta puede ser leda satisfactoriamente por todos los navegadores, o al menos, los ms utilizados. Adems del navegador necesario para ver los resultados de nuestro trabajo, necesitamos evidentemente otra herramienta capaz de crear la pgina en si. Un archivo HTML (una pgina) no es ms que un texto. Es por ello que para programar en HTML necesitamos un editor de textos. Es recomendable usar el Bloc de notas que viene con Windows, u otro editor de textos sencillo. Hay que tener cuidado con algunos editores ms complejos como Wordpad o Microsoft Word, pues colocan su propio cdigo especial al guardar las pginas y HTML es nicamente texto plano, con lo que podremos tener problemas. Existen otro tipo de editores especficos para la creacin de pginas Web los cuales ofrecen muchas facilidades que nos permiten aumentar nuestra productividad. No obstante, es aconsejable en un principio utilizar una herramienta lo ms sencilla posible

para poder prestar la mxima atencin a nuestro cdigo y familiarizarnos lo antes posible con l. Siempre tendremos tiempo ms delante de pasarnos a editores ms verstiles con la consiguiente ganancia de tiempo. As pues, una pgina es un archivo donde esta contenido el cdigo HTML en forma de texto. Estos archivos tienen extensin .html o .htm (es indiferente cual utilizar). De modo que cuando programemos en HTML lo haremos con un editor de textos y guardaremos nuestros trabajos con extensin .html, por ejemplo mipagina.html
Consejo: Utiliza siempre la misma extensin en tus archivos HTML. Eso evitar que te confundas al escribir los nombres de tus archivos unas veces con .htm y otras con .html.

Sintaxis del HTML

El HTML es un lenguaje que basa su sintaxis en un elemento de base al que llamamos etiqueta. La etiqueta presenta frecuentemente dos partes: Una apertura de forma general <etiqueta> Un cierre de tipo </ etiqueta> Todo lo incluido en el interior de esa etiqueta sufrir las modificaciones que caracterizan a esta etiqueta. As por ejemplo: Las etiquetas <b> y </b> definen un texto en negrita. Si en nuestro documento HTML escribimos una frase con el siguiente cdigo: <b>Esto esta en negrita</b> El resultado Ser: Esto esta en negrita Las etiquetas <p> y </p> definen un prrafo. Si en nuestro documento HTML escribiramos: <p>Hola, estamos en el prrafo 1</p> <p>Ahora hemos cambiado de prrafo</p> El resultado seria: Hola, estamos en el prrafo 1 Ahora hemos cambiado de prrafo

Partes de un documento HTML

Adems de todo esto, un documento HTML ha de estar delimitado por la etiqueta <html> y </html>. Dentro de este documento, podemos asimismo distinguir dos partes principales:

El encabezado, delimitado por <head> y </head> donde colocaremos etiquetas de ndole informativo como por ejemplo el ttulo de nuestra pgina. El cuerpo, flanqueado por las etiquetas <body> y </body> , que ser donde colocaremos nuestro texto e imgenes delimitados a su vez por otras etiquetas como las que hemos visto. El resultado es un documento con la siguiente estructura: <html> <head> Etiquetas y contenidos del encabezado Datos que no aparecen en nuestra pgina pero que son importantes para catalogarla: Ttulo, palabras clave,... </head> <body> Etiquetas y contenidos del cuerpo Parte del documento que ser mostrada por el navegador: Texto e imgenes </body> </html> Las maysculas o minsculas son indiferentes al escribir etiquetas
en minscula) (nosotros siempre lo haremos

A notar que las etiquetas pueden ser escritas con cualquier tipo de combinacin de maysculas y minsculas. <html>, <HTML> o <HtMl> son la misma etiqueta. Resulta, sin embargo, aconsejable acostumbrarse a escribirlas en minscula ya que otras tecnologas que pueden convivir con nuestro HTML (XML por ejemplo) no son tan permisivas y nunca viene mal coger buenas costumbres desde el principio para evitar fallos triviales en un futuro.

Tu primera pgina
Podemos ya con estos conocimientos, y alguno que otro ms, crear nuestra primera pgina. Para ello, abre tu editor de textos y copia el siguiente texto en un nuevo documento. <html> <head> <title>Cocina Para Todos</title> </head> <body> <p><b>Bienvenido,</b></p> <p>Estas en la pgina <b>Comida para Todos</b>.</p> <p>Aqu aprenders recetas fciles y deliciosas.</p> </body> </html>

Ahora guarda ese archivo con extensin .html en tu disco. Para ello accedemos al men Archivo y seleccionamos la opcin Guardar como. En la ventana elegimos la carpeta donde deseamos guardarlo y colocaremos su nombre, por ejemplo mi_pagina.html
Consejo: Utiliza nombres en tus archivos que tengan algunas normas bsicas para ahorrarte disgustos y los. No utilices acentos ni espacios ni otros caracteres raros. Tambin te ayudara escribir siempre las letras en minsculas. Esto no quiere decir que debes hacer nombres de archivos cortos, es mejor hacerlos descriptivos para que te aclaren lo que hay dentro. Algn carcter como el guin "-" o el guin bajo "_" te puede ayudar a separar las palabras. Por ejemplo quienes_somos.html

Con el documento HTML creado, podemos ver el resultado obtenido a partir de un navegador. Es conveniente, llegado a este punto, hacer hincapi en el hecho de que no todos los navegadores son idnticos. Desgraciadamente, los resultados de nuestro cdigo pueden cambiar de uno a otro por lo que resulta aconsejable visualizar la pgina en varios. Generalmente se usan Internet Explorer y Netscape como referencias ya que son los ms extendidos (Mozilla Navigator es el sucesor hoy en da de Netscape). A decir verdad, Internet Explorer acapara la inmensa mayora de usuarios (90% ms o menos) y Netscape esta relegado a un segundo plano. Esto no quiere decir que lo debemos dejar totalmente de lado ya que el 10% de visitas que puede proporcionarnos puede resultar muy importante para nosotros. Por otra parte, parece que se ha hecho pblica la intencin de Netscape de desviar un poco su temtica de negocios hacia otros derroteros y abandonar esta llamada "lucha de navegadores" en la cual estaba recibiendo la peor parte. Pues bien, volviendo al tema, una vez creado el archivo .html, podemos visualizar el resultado de nuestra labor abriendo dicha pgina con un navegador. Para hacerlo, la forma resulta diferente dependiendo del navegador: Si estamos empleando el Explorer, hemos de ir a la barra de men, elegir Archivo y seleccionar Abrir. Una ventana se abrir. Pulsamos sobre el botn Examinar y accederemos a una ventana a partir de la cual podremos movernos por el interior de nuestro disco duro hasta dar con el archivo que deseamos abrir. La cosa no resulta ms difcil para Netscape. En este caso, nos dirigimos tambin a la barra de men principal y elegimos File y a continuacin Open File. La misma ventana de bsqueda nos permitir escudriar el contenido de nuestro PC hasta dar con el archivo buscado.
Nota: Tambin puedes abrir el archivo si accedes al directorio donde lo guardaste. En el podrs encontrar tu archivo HTML y veras que tiene como icono el logotipo de Netscape o el de Internet Explorer. Para abrirlo simplemente hacemos un doble clic sobre l.

Una vez abierto el archivo podris ver vuestra primera pgina Web. Algo sencillita pero por algo se empieza. Fijaos en la parte superior izquierda de la ventana del navegador. Podris comprobar la presencia del texto delimitado por la etiqueta <title>. Esta es una de las funciones de esta etiqueta.

Por otro lado, los elementos que colocamos entre la etiqueta <body> y </body> se pueden ver en el espacio reservado para el cuerpo de la pgina. Si ahora hacis clic con el botn derecho sobre la pgina y elegs Ver cdigo fuente (o View page source) veris como en una ventana accesoria aparece el cdigo de nuestra pgina. Este recurso es de extremada importancia ya que nos permite ver el tipo de tcnicas empleadas por otros para la confeccin de sus pginas. Con todo esto asimilado ya estamos en condiciones de adentrarnos un poco ms en la descripcin de algunas de las etiquetas ms empleadas del HTML.
Posible problema: Al utilizar el Block de Notas en Windows en ocasiones, aunque le digamos que es un archivo .html, el documento se guarda como si fuera un texto y no una pgina Web. Lo que esta pasando es que el Block de Notas tiene predeterminado guardar sus archivos con extensin .txt y en realidad lo que esta guardando en el disco es mi_pagina.html.txt Para conseguir tener el control de las extensiones en el block de notas y en Windows en general podemos acceder a MI-PC y en el men de Ver seleccionis "Opciones de carpeta". En la ventana que sale pulsamos en la solapa "Ver" y nos permite deseleccionar una caja de seleccin que pone algo como "Ocultar extensiones para los tipos de archivos conocidos". Con ello conseguiremos que se vea siempre la extensin del archivo con el que estamos trabajando y que el Block de Notas nos haga caso cuando le indicamos que grabe el archivo con otra extensin que no sea .txt

Formato de prrafos en HTML

Hemos presentado a ttulo de ejemplo algunas etiquetas que permiten dar formato a nuestro texto. Ahora veremos con ms detalle las ms ampliamente utilizadas y ejemplificaremos algunas de ellas posteriormente. Formatear un texto pasa por tareas tan evidentes como definir los prrafos, justificarlos, introducir vietas, numeraciones o bien poner en negrita, itlica... Hemos visto que para definir los prrafos nos servimos de la etiqueta <p> que introduce un salto y deja una lnea en blanco antes de continuar con el resto del documento.

Podemos tambin usar la etiqueta <br>, de la cual no existe su cierre correspondiente (</br>), para realizar un simple retorno de carro con lo que no dejamos una lnea en blanco sino que slo cambiamos de lnea.
Nota: Existen otras etiquetas que no tienen su correspondiente de cierre, como <img> para las imgenes, las veremos ms adelante. Esto ocurre porque un salto de lnea o una imagen no empiezan y acaban ms adelante sino que slo tienen presencia en un lugar puntual.

Podis comprobar que cambiar de lnea en nuestro documento HTML sin introducir alguna de estas u otras etiquetas no implica en absoluto un cambio de lnea en la pgina visualizada. En realidad el navegador introducir el texto y no cambiar de lnea a no ser que sta llegue a su fin o bien lo especifiquemos con la etiqueta correspondiente. Los prrafos delimitados por etiquetas <p> pueden ser fcilmente justificados a la izquierda, centro o derecha especificando dicha justificacin en el interior de la etiqueta por medio de un atributo align. Un atributo no es ms que un parmetro incluido en el interior de la etiqueta que ayuda a definir el funcionamiento de la etiqueta de una forma ms personal. Veremos cantidad de atributos muy tiles para todo tipo de etiquetas. As, si desesemos introducir un texto alineado a la izquierda escribiramos: <p align="left">Texto alineado a la izquierda</p> El resultado seria: Texto alineado a la izquierda Para una justificacin al centro: <p align="center">Texto alineado al centro</p> Quedara: Texto alineado al centro Para justificar a la derecha: <p align="right">Texto alineado a la derecha</p> cuyo efecto seria: Texto alineado a la derecha Como veis, en cada caso el atributo align toma determinados valores que son escritos entre comillas. En algunas ocasiones necesitamos especificar algunos atributos para el correcto funcionamiento de la etiqueta. En otros casos, el propio navegador toma un valor definido por defecto. Para el caso de align, el valor por defecto es left.
Nota: Los atributos tienen sus valores indicados entre comillas ("), pero si no los indicamos entre comillas tambin funcionar en la mayora de los casos. Sin embargo, es aconsejable que pongamos siempre las comillas para

acostumbrarnos a utilizarlas, por dar homogeneidad a nuestros cdigos y para evitar errores futuros en sistemas ms quisquillosos.

El atributo align no es exclusivo de la etiqueta <p>. Otras etiquetas muy comunes, que veremos ms adelante, entre las cuales se introducen texto o imgenes, suelen hacer uso de este atributo de una forma habitual. Imaginemos un texto relativamente largo donde todos los prrafos estn alineados a la izquierda (por ejemplo). Una forma de simplificar nuestro cdigo y de evitar introducir continuamente el atributo align sobre cada una de nuestras etiquetas es utilizando la etiqueta <div>. Esta etiqueta por si sola no sirve para nada. Tiene que estar acompaada del atributo align y lo que nos permite es alinear cualquier elemento (prrafo o imagen) de la manera que nosotros deseemos. As, el cdigo: <p align="left">Prrafo1</p> <p align="left"> Prrafo3</p> <p align="left"> Prrafo2</p> es equivalente a: <div align="left"> <p>Prrafo1</p> <p>Prrafo2</p> <p>Prrafo3</p> </div> Como hemos visto, la etiqueta <div> marca divisiones en las que definimos un mismo tipo de alineado.

Ejemplo prctico:

Para practicar un poco lo que acabamos de ver vamos a proponer un ejercicio que podis resolver en vuestros ordenadores. Simplemente queremos construir una pgina que tenga, por este orden: 2 Prrafos centrados 3 Prrafos alineados a la derecha Un salto de lnea triple 1 prrafo alineado a la izquierda

Encabezados
Existen otras etiquetas para definir prrafos especiales, formateados como ttulos. Son los encabezados o Header en ingls. Como decimos, son etiquetas que formatean el texto como un titular, para lo cual asignan un tamao mayor de letra y colocan el texto en negrita.

Hay varios tipos de encabezados, que se diferencian en el tamao de la letra que utilizan. La etiqueta en concreto es la <h1>, para los encabezados ms grandes, <h2> para los de segundo nivel y as hasta <h6> que es el encabezado ms pequeo. Los encabezados implican tambin una separacin en prrafos, as que todo lo que escribamos dentro de <h1> y </h1> (o cualquier otro encabezado) se colocar en un prrafo independiente. Podemos ver cmo se presentan algunos encabezados a continuacin. <h1>Encabezado de nivel 1</h1> Se ver de esta manera en la pgina:

Los encabezados, como otras etiquetas de HTML, soportan el atributo align. Vemos un ejemplo de encabezado de nivel 2 alineado al centro. <h2 align="center">Encabezado de nivel 2</h2> Se ver de esta manera en la pgina:

Otro ejercicio interesante es construir una pgina Web que contenga todos los encabezados posibles. Se puede ver a continuacin. <html> <head> <title>Todos los encabezados</title> </head> <body> <h1>Encabezado de nivel 1</h1> <h2>Encabezado de nivel 2</h2> <h3>Encabezado de nivel 3</h3> <h4>Encabezado de nivel 4</h4> <h5>Encabezado de nivel 5</h5> <h6>Encabezado de nivel 6</h6> </body> </html> El resultado ser:

Encabezado de nivel 1
Encabezado de nivel 2
Encabezado de nivel 3
Encabezado de nivel 4
Encabezado de nivel 5
Encabezado de nivel 6

Consejo: No debemos utilizar las etiquetas de encabezado para formatear el texto, es decir, si queremos colocar un tipo de letra ms grande y en negrita debemos utilizar las etiquetas que existen para ello (que veremos enseguida). Los encabezados son para colocar titulares en pginas Web y es el navegador el responsable de formatear el texto de manera que parezca un titular. Cada navegador, pues, puede formatear el texto a su gusto con tal de que parezca un titular.

Formateando el texto
Adems de todo lo relativo a la organizacin de los prrafos, uno de los aspectos primordiales del formateo de un texto es el de la propia letra. Resulta muy comn y prctico presentar texto resaltado en negrita, itlica y otros. Paralelamente el uso de ndices, subndices resulta vital para la publicacin de textos cientficos. Todo esto y mucho ms son posibles por medio del HTML a partir de multitud de etiquetas entre las cuales vamos a destacar algunas. Negrita Podemos escribir texto en negrita incluyndolo dentro de las etiquetas <b> y </b> (bold). Esta misma tarea es desempeada por <strong> y </strong> siendo ambas equivalentes. Nosotros nos inclinamos por las primeras por simple razn de esfuerzo. Escribiendo un cdigo de este tipo: <b>Texto en negrita</b> Obtenemos este resultado: Texto en negrita
Nota: .Que diferencia hay entre <b> y <strong>? Aunque las dos etiquetas hacen el mismo efecto, tienen una peculiaridad que las hace distintas. La etiqueta <b> indica negrita, mientras que la etiqueta <strong> indica que se debe escribir resaltado. El HTML lo interpretan los navegadores segn su criterio, es por eso que las pginas se pueden ver de distinta manera en unos browsers y en otros. La etiqueta <H1> quiere decir "encabezado de nivel 1", es el navegador el responsable de formatear el texto de manera que parezca un encabezado de primer nivel. En la prctica los encabezados de Internet Explorer y Netscape son muy parecidos (tamao de letra grande y en negrita), pero otro navegador podra colocar los encabezados con subrayado si le pareciese oportuno.

La diferencia entre <b> y <strong> se podr entender ahora. Mientras que <b> significa simplemente negrita y todos los navegadores la interpretaran como negrita, <strong> es una etiqueta que significa que se tiene que resaltar fuertemente el texto y cada navegador es el responsable de resaltarlo como desee. En la prctica <strong> coloca el texto en negrita, pero podra ser que un navegador decidiese resaltar colocando negrilla, subrayado y color rojo en el texto.

Itlica Tambin en este caso existen dos posibilidades, una corta: <i> e </i> (italic) y otra un poco ms larga: <em> y </em>. La primera forma sin duda es ms sencilla de escribir y acordarse. He aqu un ejemplo de texto en itlica: <i>Texto en itlica</i> Que da el siguiente efecto:

Texto en itlica
Subrayado El HTML nos propone tambin para el subrayado el par de etiquetas: <u> y </u> (underlined). Sin embargo, el uso de subrayados ha de ser aplicado con mucha precaucin dado que los enlaces hipertexto van, a no ser que se indique lo contrario, subrayados con lo que podemos confundir al lector y apartarlo del verdadero inters de nuestro texto. Subndices y superndices Este tipo de formato resulta de extremada utilidad para textos cientficos. Las etiquetas empleadas son: ^y para los superndices _y para los subndices Aqu tenis un ejemplo: La ¹³CC₃H₄ClNOS es un heterociclo alergeno enriquecido El resultado: La 13CC3H4ClNOS es un heterociclo alergeno enriquecido Anidar etiquetas Todas estas etiquetas y por supuesto el resto de las vistas y que veremos ms adelante pueden ser anidadas unas dentro de otras de manera que podemos conseguir resultados diferentes. As, podemos sin ningn problema crear texto en negrita e itlica embebiendo una etiqueta dentro de la otra: <b>Esto solo est en negrita <i>y esto en negrita e itlica</i></b>

10

Esto nos dara: Esto slo est en negrita y esto en negrita e itlica
Consejo: Cuando anides etiquetas HTML hazlo correctamente. Nos referimos a que si abres etiquetas dentro de otra ms principal, antes de cerrar la etiqueta principal cierres las etiquetas que hayas abierto dentro de ella. Debemos evitar cdigos como el siguiente: <b>Esto est en negrita e <i>itlica</b></i> En favor de cdigos con etiquetas correctamente anidadas: <b>Esto esta en negrita e <i>itlica</i></b> Esto es muy aconsejable, aunque los navegadores entiendan bien las etiquetas mal anidadas, por dos razones: 1. 2. Sistemas como XML no son tan permisivos con estos errores y puede que en el futuro nuestras pginas no funcionen correctamente. A los navegadores les cuesta mucho tiempo de procesamiento resolver este tipo de errores, incluso ms que construir la propia pgina y debemos evitarles que sufran por una mala codificacin.

Color, tamao y tipo de letra

A pesar de que por razones de homogeneidad y sencillez de cdigo este tipo de formatos son controlados actualmente por hojas de estilo en cascada (de las cuales ya tendremos tiempo de hablar), existe una forma clsica y directa de definir color, tamao y tipo de letra de un texto determinado. Esto se hace a partir de la etiqueta <font> y su cierre correspondiente. Dentro de esta etiqueta deberemos especificar los atributos correspondientes a cada uno de estos parmetros que deseamos definir. A continuacin os comentamos los atributos principales de esta etiqueta: Atributo face Define el tipo de letra. Este atributo es interpretado por versiones de Netscape a partir de la 3. Otros navegadores las ignoran completamente y muestran el texto con la fuente que utilizan. Hay que tener cuidado con este atributo ya que cada usuario, dependiendo de la plataforma que utilice, puede no disponer de los mismos tipos de letra que nosotros con lo que, si nosotros elegimos un tipo del que no dispone, el navegador se ver forzado a mostrar el texto con la fuente que utiliza por defecto (suele ser Times New Roman). Para evitar esto, dentro del atributo suelen seleccionarse varios tipos de letra separados por comas. En este caso el navegador comprobara que dispone del primer tipo enumerado y si no es as, pasara al segundo y as sucesivamente hasta encontrar un tipo que posea o bien acabar la lista y poner la fuente por defecto. Veamos un ejemplo. <font face="arial, Comic Sans MS ,verdana">Este texto tiene otra tipografa</font> Que se visualizara as en una pgina Web. Este texto tiene otra tipografa

11

Nota: Aqu tenemos un ejemplo de atributo cuyo valor debe estar limitado por comillas ("). Habamos dicho que las comillas eran opcionales en los atributos, sin embargo esto no es as siempre. Si el valor del atributo contiene espacios, como es el caso de: face=" arial, Comic Sans MS,verdana" debemos colocar las comillas para limitarlo. En caso de no tener comillas face= arial, Comic Sans MS,verdana se entendera que face=arial, pero no se tendra en cuenta todo lo que sigue, porque HTML no lo asociara al valor del atributo. En este caso HTML pensara que las siguientes palabras (despus del espacio) son otros atributos, pero como no los conoce como atributos simplemente los desestimar

Atributo size Define el tamao de la letra. Este tamao puede ser absoluto o relativo. Si hablamos en trminos absolutos, existen 7 niveles de tamao distintos numerados de 1 a 7 por orden creciente. Elegiremos por tanto un valor size="1" para la letra ms pequea o size="7" para la ms grande. <font size=4>Este texto es ms grande</font> Que se visualizara as en una pgina Web. Este texto es ms grande Podemos asimismo modificar el tamao de nuestra letra con respecto al del texto mostrado precedentemente definiendo el nmero de niveles que queremos subir o bajar en esta escala de tamaos por medio de un signo + o -. De este modo, si definimos nuestro atributo como size="+1" lo que queremos decir es que aumentamos de un nivel el tamao de la letra. Si estbamos escribiendo previamente en 3, pasaremos automticamente a 4. Los tamaos reales que veremos en pantalla dependern de la definicin y del tamao de fuente elegido por el usuario en el navegador. Este tamao de fuente puede ser definido en el Explorer yendo al men superior, Ver/Tamao de la fuente. En Netscape elegiremos View/Text Size. Esta flexibilidad puede en ms de una ocasin resultarnos embarazosa ya que en muchos casos desearemos que el tamao del texto permanezca constante para que este quepa en un determinado espacio. Veremos en su momento que esta prefijacin del tamao puede ser llevada a cabo por las hojas de estilo en cascada. Atributo color El color del texto puede ser definido mediante el atributo color. Cada color es a su vez definido por un nmero hexadecimal que esta compuesto a su vez de tres partes. Cada una de estas partes representa la contribucin del rojo, verde y azul al color en cuestin. Por otra parte, es posible definir de una manera inmediata algunos de los colores ms frecuentemente usados para los que se ha creado un nombre ms nemotcnico: Nombre Color aqua black

12

blue fuchsia gray green lime maroon navy olive purple red silver teal white yellow <font color="red">Este texto esta en rojo</font> Que se visualizara as en una pgina Web. Este texto esta en rojo Con todo esto estamos ya en disposicin de crear un texto formateado de una forma realmente elaborada. Pongamos pues en prctica todo lo que hemos aprendido haciendo un ejercicio consistente en una pgina que tenga las siguientes caractersticas: Un titular con encabezado de nivel 1, en itlica y color verde oliva. Un segundo titular con encabezado de nivel 2, tambin de color verde oliva. Todo el texto de la pgina deber presentarse con una fuente distinta de la fuente por defecto. Por ejemplo "Verdana" y en caso de que sta no est en el sistema que se coloque la fuente "Arial".

Los colores y HTML

Tabla de color

El la composicin de Webs juegan un papel muy importante los colores. Se indican en valores RGB, es decir, que para conseguir un color cualquiera mezclaremos cantidades de Rojo, Verde y Azul. Los valores RBG se indican en numeracin hexadecimal, en base 16. (Los dgitos pueden crecer hasta 16. Como no hay tantos dgitos numricos se utilizan las letras de la A a la F).

13

Para conseguir un color, mezclaremos valores de esta manera: RRGGBB Donde cada valor puede crecer desde 00 hasta FF. Ejemplo: Cmo se cambiara la fuente para escribir en rojo: <font color="#FF0000">Rojo</font> Al Atributo color le damos un valor RGB en formato hexadecimal. El carcter # se coloca al principio de la cadena. Otros colores: Naranja Verde turquesa Azul oscuro #FF8000 #339966 #000080

Colores compatibles en todos los sistemas Como las pginas Web las tienen que ver todos los usuarios, y los sistemas que utilizan para entrar son distintos, hay que utilizar colores compatibles con la paleta de todos ellos. La forma de conseguir esto es limitando nuestros colores a los que se pueden conseguir tilizando la siguiente norma:

Ejemplos: #3366FF #FF9900 #666666 Se consiguen los colores siguientes: FF3300 FF3333 FF0033 000000 33FF33 CC3300 CC3333 CC0033 CC0000 66FF66 FF9999 FFCC99 FF9966 663333 OLIVE FFCCCC CC0066 FF6699 990066 99FF99 990033 993300 660000 330000 CCFFCC

RED FF0000 LIME

MAROON 990000 GREEN

14

66FF00

AQUA 00FFFF

00CC00 00CC00 009900 00FFFF 33FFFF CCCCFF CCCCFF 00CCCC

YELLOW FUCHSIA TEAL FF3300 FF6600 FF9900 FFCC00 FFFF00 CC0000 CC3300 CC6600 CC9900 CCCC00 CCFF00 990000 993300 996600 999900 99CC00 99FF00 666600 669900 66CC00 66FF00 336600 339900 006600 009900 33CC00 00CC00 33FF00 00FF00 663300 660000

009900 009900 006600 3333FF 66FFFF 0000CC 000066 009999 FFFF33 CCCC00 FF33FF CC00CC 7D337D E100E1 FF3366 FF6666 FF9966 FFCC66 FFFF66 CC0066 CC3366 CC6666 CC9966

66FF00

TEAL 006666

FFFF66 999900 FF66FF 990099 7D667D CC00CC

006600 003300 00FF00 006600 003300 66FF00 009900 6666FF 9999FF 99FFFF CCFFFF BLUE 0000FF 000099 000099 000033 000099 006666 003333 FFFF99 FFFFCC 666600 333300 FF99FF FFCCFF 660066 330033 7D997D 7DCC7D AF00AF 990099 FF3399 FF6699 FF9999 FF33CC FF66CC FF99CC FFCCCC FFFFCC CC00CC CC33CC CC66CC CC99CC CCCCCC CCFFCC 9900CC 9933CC 9966CC 9999CC 99CCCC 99FFCC 6666CC 6699CC 66CCCC 66FFCC 3366CC 3399CC 0066CC 0099CC 33CCCC 00CCCC 33FFCC 00FFCC 6633CC 6600CC FF33FF FF66FF FF99FF FFCCFF FFFFFF CC00FF CC33FF CC66FF CC99FF CCCCFF CCFFFF 9900FF 9933FF 9966FF 9999FF 99CCFF 99FFFF 6666FF 6699FF 66CCFF 66FFFF 3366FF 3399FF 0066FF 0099FF 33CCFF 00CCFF 33FFFF 00FFFF 6633FF 6600FF

FF3333 FF6633 FF9933 FFCC33 FFFF33 CC0033 CC3333 CC6633 CC9933 CCCC33 CCFF33 990033 993333 996633 999933 99CC33 99FF33 666633 669933 66CC33 66FF33 336633 339933 006633 009933 33CC33 00CC33 33FF33 00FF33 663333 660033

FFCC99 FFFF99 CC0099 CC3399 CC6699 CC9999 CCCC99 CCFF99 990099 993399 996699 999999 99CC99 99FF99 666699 669999 66CC99 66FF99 336699 339999 006699 009999 33CC99 00CC99 33FF99 00FF99 663399 660099

CCCC66 CCFF66 990066 993366 996666 999966 99CC66 99FF66 666666 669966 66CC66 66FF66 336666 339966 006666 009966 33CC66 00CC66 33FF66 00FF66 663366 660066

15

333300 003300 330000 000000

333333 003333 330033 000033

333366 003366 330066 000066

333399 003399 330099 000099

3333CC 0033CC 3300CC 0000CC

3333FF 0033FF 3300FF 0000FF

Por ejemplo, el color rojo se representa como #FF0000, porque tiene el toda la intensidad de rojo y nada de verde y azul. Los colores bsicos son: #FF0000 - Rojo #00FF00 - Verde #0000FF - Azul Otros colores son: #FFFFFF - Blanco #000000 - Negro #FFFF00 - Amarillo Para hacer un color ms oscuro, simplemente reduce la intensidad del componente, dejando los otros dos iguales. As, el rojo (#FF0000) se hace ms oscuro as: #CC0000, #990000, #660000, #330000 etc. Para hacer que un color ms pastel, simplemente variar los otros dos colores dejando igual el principal. As, el rojo (#FF0000) se hace ms claro as: #FF3333, #FF6666, #FF9999, #FFCCCC etc.

Atributos para pginas

Las pginas HTML pueden construirse con variedad de atributos que le pueden dar un aspecto a la pgina muy personalizado. Podemos definir atributos como el color de fondo, el color del texto o de los enlaces. Estos atributos se definen en la etiqueta <body> y, como decamos son generales a toda la pgina. Lo mejor para explicar su funcionamiento es verlos uno por uno. Atributos para fondos bgcolor: especificamos un color de fondo para la pgina. Hemos aprendido a construir cualquier color, con su nombre o su valor RGB. El color de fondo que podemos asignar con bgcolor es un color plano, es decir el mismo para toda la superficie del navegador. background: sirve para indicar la colocacin de una imagen como fondo de la pgina. La imagen se coloca haciendo un mosaico, es decir, se repite muchas veces hasta ocupar todo el espacio del fondo de la pgina. Ms adelante veremos como se insertan imgenes con HTML y los tipos de imgenes que se pueden utilizar. Ejemplo de fondo

16

Vamos a colocar esta imagen como fondo en la pgina.

La imagen se llama fondo.jpg y suponemos que se encuentra en el mismo directorio que la pgina. En este caso se colocara la siguiente etiqueta <body> <body background="fondo.jpg">
Consejo: siempre que coloquemos una imagen de fondo, debemos poner tambin un color de fondo cercano al color de la imagen. Esto se debe a que, al colocar una imagen de fondo, el texto de la pgina debemos colocarlo en un color que contraste suficientemente con dicho fondo. Si el visitante no puede ver el fondo por cualquier cuestin (Por ejemplo tener deshabilitada la carga de imgenes) puede que el texto no contraste lo suficiente con el color de fondo por defecto de la Web. Lo mejor ser poner un ejemplo. Si la imagen de fondo es oscura, tendremos que poner un texto claro para que se pueda leer. Si el visitante que accede a la pgina no ve la imagen de fondo, le saldr el fondo por defecto, que generalmente es blanco, de modo que al tener un texto con color claro sobre un fondo blanco, nos pasar que no podremos leer el texto convenientemente. Ocurre parecido cuando se est cargando la pgina. Si todava no ha llegado a nuestro sistema la imagen de fondo, se ver el fondo que hayamos seleccionado con bgcolor y es interesante que sea parecido al color de la imagen para que se pueda leer el texto mientras se carga la imagen de fondo.

Color del texto text: este atributo sirve para asignar el color del texto de la pgina. Por defecto es el negro. Adems del color del texto, tenemos tres atributos para asignar el color de los enlaces de la pgina. Ya debemos saber que los enlaces deben diferenciarse del resto del texto de la pgina para que los usuarios puedan identificarlos fcilmente. Para ello suelen aparecer subrayados y con un color ms vivo que el texto. Los tres atributos son los siguientes: link: el color de los enlaces que no han sido visitados. (Por defecto es azul clarito) vlink: el color de los enlaces visitados. La "v" viene justamente de la palabra visitada. Es el color que tendrn los enlaces que ya hemos visitado. Por defecto su color es morado. Este color debera ser un poco menos vivo que el color de los enlaces normales. alink: es el color de los enlaces activos. Un enlace est activo en el preciso instante que se pulsa. A veces es difcil darse cuenta cuando un enlace est activo porque en el momento en el que se activa es porque lo estamos pulsando y en ese caso el navegador abandonar la pgina rpidamente y no podremos ver el enlace activo ms que por unos instantes mnimos.

Ejemplo de color del texto

17

Vamos a ver una pgina donde el color de fondo sea negro, y los colores del texto y los enlaces sean claros. Pondremos el color de texto blanco y los enlaces amarillos, ms resaltados los que no estn visitados y menos resaltados lo que ya estn visitados. Para ello escribiramos la etiqueta body as: <body bgcolor="#000000" text="#ffffff" link="#ffff33" alink="#ffffcc" link="ffff00">

Lneas horizontales <hr> sin atributos muestra una lnea horizontal que ocupa todo el ancho de la pgina <hr width=120> muestra una lnea en pxeles de 120 de ancho (los 120 se reparten en el centro) <hr width=47%> Indica el ancho de la lnea en % en funcin del ancho de la ventana del navegador. <hr align=left> <hr align=right> <hr align=center> Indican la alineacin de la lnea. Si no se expresa el atributo align se muestra en el centro. <hr size=14> Indica el grosor de la lnea, en este caso de 14 pxeles <hr color=green> Lnea de color verde <hr=#00ff00> Lnea de color verde

Mrgenes Con otros atributos de la etiqueta <body> se pueden asignan espacios de margen en las pginas, lo que es muy til para eliminar los mrgenes en blanco que aparecen a los lados, arriba y debajo de la pgina. Estos atributos son distintos para Internet Explorer y para Netscape Navigator, por lo que debemos utilizarlos todos si queremos que todos los navegadores los interpreten perfectamente. leftmargin: para indicar el margen a los lados de la pgina. Valido para iexplorer. topmargin: para indicar el margen arriba y debajo de la pgina. Para iexplorer. marginwidth: la contrapartida de leftmargin para Netscape. (Margen a los lados) marginheight: igual que topmargin, pero para Netscape. (Margen arriba y abajo) Ejemplo de pgina sin mrgenes <body topmargin=0 leftmargin=0 marginheight=0 marginwidth=0 bgcolor="ffffff"> <table width=100% bgcolor=ff6666><tr><td>

18

<h1>Hola amigos</h1> <br> <br> Gracias por visitarme! </td></tr></table> </body>

Esta pgina tiene el fondo blanco y dentro una tabla con el fondo rojo. En la pgina podremos ver que la tabla ocupa el espacio en la pgina sin dejar sitio para ningn tipo de margen.

Listas I
Las posibilidades que nos ofrece el HTML en cuestin de tratamiento de texto son realmente notables. No se limitan a lo visto hasta ahora, sino que van ms lejos todava. Varios ejemplos de ello son las listas, que sirven para enumerar y definir elementos, los textos preformateados y las cabeceras o ttulos. Las listas son utilizadas para citar, numerar y definir objetos. Tambin son utilizadas corrientemente para desplazar el comienzo de lnea hacia la derecha. Podemos distinguir tres tipos de listas: Listas desordenadas Listas ordenadas Listas de definicin Las veremos detenidamente una a una. Listas desordenadas Son delimitadas por las etiquetas <ul> y </ul> (unordered list). Cada uno de los elementos de la lista es citado por medio de una etiqueta <li> (sin cierre, aunque no hay inconveniente en colocarlo). La cosa queda as: <p>Pases del mundo</p> <ul> <li>Argentina <li>Per <li>Chile </ul> El resultado: Pases del mundo Argentina

19

 Per Chile Podemos definir el tipo de vieta empleada para cada elemento. Para ello debemos especificarlo por medio del atributo type incluido dentro de la etiqueta de apertura <ul>, si queremos que el estilo sea vlido para toda la lista, o dentro le la etiqueta <li> si queremos hacerlo especfico de un solo elemento. La sintaxis es del siguiente tipo: <ul type="tipo de vieta"> donde tipo de vieta puede ser uno de los siguientes: circle disc Square
Nota: En algunos navegadores no funciona la opcin de cambiar el tipo de vieta a mostrar y por mucho que nos empeemos, siempre saldr el redondel negro. En caso de que no funcione siempre podemos construir la lista a mano con la vieta que queramos tilizando las tablas de HTML. Veremos ms adelante como trabajar con tablas.

Vamos a ver un ejemplo de lista con un cuadrado en lugar de un redondel, y en el ltimo elemento colocaremos un crculo. Para ello vamos a colocar el atributo type en la etiqueta <ul>, con lo que afectar a todos los elementos de la lista. <ul type="square"> <li>Elemento 1 <li>Elemento 2 <li>Elemento 3 <li type="circle">Elemento 4 </ul> Que tiene como resultado

Listas II Continuamos estudiando las listas de HTML, con las que crear estructuras atractivas para presentar la informacin. Listas ordenadas En este caso usaremos las etiquetas <ol> (ordered list) y su cierre. Cada elemento ser igualmente precedido de su etiqueta <li>. Pongamos un ejemplo:

20

<p>Reglas de comportamiento en el trabajo</p> <ol> <li>El jefe siempre tiene la razn <li>En caso de duda aplicar regla 1 </ol> El resultado es: Reglas de comportamiento en el trabajo 1. El jefe siempre tiene la razn 2. En caso de duda aplicar regla 1

Del mismo modo que para las listas desordenadas, las listas ordenadas ofrecen la posibilidad de modificar el estilo. En concreto nos es posible especificar el tipo de numeracin empleado eligiendo entre nmeros (1, 2, 3...), letras (a, b, c...) y sus maysculas (A, B, C,...) y nmeros romanos en sus versiones maysculas (I, II, III,...) y minsculas (i, ii, iii,...). Para realizar dicha seleccin hemos de utilizar, como para el caso precedente, el atributo type, el cual ser situado dentro de la etiqueta <ol>. Los valores que puede tomar el atributo en este caso son: 1 Para ordenar por nmeros a Por letras del alfabeto A Por letras maysculas del alfabeto i Ordenacin por nmeros romanos en minsculas I Ordenacin por nmeros romanos en maysculas
Nota: Recordamos que en algunos navegadores no funciona la opcin de cambiar el tipo de vieta a mostrar

Puede que en algn caso deseemos comenzar nuestra enumeracin por un nmero o letra que no tiene por que ser necesariamente el primero de todos. Para solventar esta situacin, podemos utilizar un segundo atributo, start, que tendr como valor un nmero. Este nmero, que por defecto es 1, corresponde al valor a partir del cual comenzamos a definir nuestra lista. Para el caso de las letras o los nmeros romanos, el navegador se encarga de hacer la traduccin del nmero a la letra correspondiente. Vemos un ejemplo usando este tipo de atributos: <p>Ordenamos por nmeros</p> <ol type="1"> <li>Elemento 1 <li> Elemento 2 </ol> <p>Ordenamos por letras</p> <ol type="a"> <li>Elemento a <li> Elemento b

21

</ol> <p>Ordenamos por nmeros romanos empezando por el 10</p> <ol type="i" start="10"> <li>Elemento x <li> Elemento xi </ol>

El resultado: Ordenamos por nmeros 1. Elemento 1 2. Elemento 2 Ordenamos por letras a. Elemento a b. Elemento b c. Ordenamos por nmeros romanos empezando por el 10 x. xi. Listas III Terminamos el tema de listas estudiando las listas de definicin. Veremos tambin la anidacin de listas. Listas de definicin Cada elemento es presentado junto con su definicin. La etiqueta principal es <dl> y </dl> (definition list). La etiquetas del elemento y su definicin son <dt> (definition term) y <dd> (definition definition) respectivamente. Aqu proponemos un cdigo que podr aclarar este sistema: <p>Diccionario de la Real Academia</p> <dl> <dt>Brujula <dd>Seoruela montada en una escbela <dt>Oreja <dd>Sesenta minutejos </dl> El efecto producido: Elemento x Elemento xi

22

Diccionario de la Real Academia Brujula Oreja

Seoruela montada en una escbela

Sesenta minutejos Nos fijamos en que cada lnea <dd> est desplazada hacia la izquierda. Este tipo de etiquetas son usadas a menudo con el propsito de crear textos ms o menos desplazados hacia la izquierda. El cdigo: <dl> <dd>Primer nivel de desplazamiento <dl> <dd>Segundo nivel de desplazamiento <dl> <dd>Tercer nivel de desplazamiento
</dl> </dl> </dl> El resultado: Primer nivel de desplazamiento Segundo nivel de desplazamiento Tercer nivel de desplazamiento Anidando listas Nada nos impide utilizar todas estas etiquetas de forma anidada como hemos visto en otros casos. De esta forma, podemos conseguir listas mixtas como por ejemplo: <p>Ciudades del mundo</p> <ul> <li>Argentina <ol> <li>Buenos Aires <li>Bariloche </ol> <li>Uruguay <ol> <li>Montevideo <li>Punta del Este </ol> </ul> De esta forma creamos una lista como esta:

23

Ciudades del mundo Argentina 1. Buenos Aires 2. Bariloche Uruguay 1. Montevideo 2. Punta del Este

Caracteres especiales
Una pgina Web se ha de ver en pases distintos, que usan conjuntos de caracteres distintos. El lenguaje HTML nos ofrece un mecanismo por el que podemos estar seguros que una serie de caracteres raros se van a ver bien en todos los ordenadores del mundo, independientemente de su juego de caracteres. Este conjunto son los caracteres especiales. Cuando queremos poner uno de estos caracteres en una pgina, debemos sustituirlo por su cdigo. Por ejemplo, la "" (a minscula acentuada) se escribe "&aacute;" de modo que la palabra pgina se escribira en una pgina HTML de este modo: p&aacute;gina Caracteres especiales bsicos En realidad estos caracteres se usan en HTML para no confundir un principio o final de etiqueta, unas comillas o un & con su correspondiente carcter. &lt; < &gt; > &amp; & &quot; " Caracteres especiales del HTML 2.0 &Aacute; &Eacute; &Iacute; &Oacute; &Uacute; &aacute; &eacute; &iacute; &oacute; &uacute; &Auml; &Euml; &Iuml; &Agrave; &Egrave; &Igrave; &Ograve; &Ugrave; &agrave; &egrave; &igrave; &ograve; &ugrave; &Acirc; &Ecirc; &Icirc;

24

&Ouml; &Uuml; &auml; &euml; &iuml; &ouml; &uuml; &Atilde; &Ntilde; &Otilde; &atilde; &ntilde; &otilde; &Oslash; &oslash; &ETH; &eth; &szlig;

&Ocirc; &Ucirc; &acirc; &ecirc; &icirc; &ocirc; &ucirc; &aring; &Aring; &Ccedil; &ccedil; &Yacute; &yacute; &yuml; &THORN; &thorn; &AElig; &aelig;

Caracteres especiales del HTML 3.2 &frac14; &frac12; &frac34; &copy; &reg; &ordf; &sup2; &sup3; &sup1; &macr; &micro; &para; &middot; &deg; &cedil; &iquest; &nbsp; &iexcl; &pound; &yen; &sect; &curren; &brvbar; &laquo; &not; &shy; &ordm; &acute; &uml; &plusmn; &raquo;

Otros caracteres especiales

25

&times; &divide; &#147; &#148; &#140; &#135;

&cent; &euro; &#153; &#137; &#131; &#134;

26

27