Curso de HTML desde 0

Para cursos gratis www.mailxmail.com

NDICE:
Introduccin: Introduccin al HTML 1.2.3.4.5.6.7.8.9.Primera parte de la pgina: head Color en HTML. Dar formato a Body (I). Dar formato a Body (II) Listas en HTML Hipervnculos. Tablas. Imgenes. Complementos y Multimedia... 4 8 13 18 22 25 29 32 37 40 44 48 52 55 57

10.- Formularios (I).. 11.- Formularios (II). 12.- Marcos en HTML.. 13.- Tags Olvidados.. 14.- DHTML: Capas.

15.- DHTML: Introduccin al CSS. 16.- Dar estilos con CSS... 17.- Hipervnculos y tablas con CSS... 18.- Efectos en Imgenes y formularios con CSS... 19.- Maquetar con Capas y CSS.. 20.- La propiedad Display ... 21.- Listas con CSS. Botones y barras de vnculos. ... 22.- Cmo funciona JavaScript (JS)... 23.- Scripts tiles de JS (I)... 24.- Scripts tiles de JS (II)..

58 63 67 72 77 83 86 92 95 99

25.- PHP y XHTML.. 102 26.- Consejos para crear tu Sitio Web (I)... 104 27.- Consejos para crear tu Sitio Web (II). 108 28.- Publicar la Web. 111

0.- Introduccin
Bienvenidos al curso. Vamos a aprender a crear pginas WEB (y sitios WEB) utilizando cdigo HTML. Antes de introducir el HTML, presento el curso: este curso est dirigido a todos aquellos que quieran aprender HTML sin ningn conocimiento previo acerca de l. Voy a intentar que sea haga lo ms ameno posible para que se convierta en un aprendizaje placentero; conforme avancemos en el curso, tambin empezar a hablar con algo ms de confianza. Tambin voy a intentar incluir tantas imgenes como me sea posible, de forma que mis explicaciones queden ilustradas con ejemplos que permitan al usuario entender todo mejor. En vista de que hay muchos usuarios latinoamericanos, he de anotar que, como espaol, utilizo a lo largo del curso el pronombre vosotros que no es apenas usado en otros pases y puede prestarse a confusin. Vosotros es el plural de t, y se conjuga como vosotros hacis (significa lo mismo que ustedes hacen), pero como plural de t, algo ms informal. Esta es una forma verbal correcta, aunque a aquellos que no la usen pueda parecer extraa. Espero, entonces, que todos disfrutis con el curso y logris aprender HTML de manera satisfactoria. En este mismo captulo voy a incluir una breve explicacin del HTML en conjunto. En el primer captulo aprenderemos a crear una pgina en blanco. El segundo captulo est dedicado exclusivamente al color en HTML, que es muy conveniente. El resto de captulos estn dedicados solamente a diferentes elementos que podemos incluir en la pgina: insertar imgenes, dar formato al texto, etc. Finalmente, incluyo algunas lecciones sobre CSS (ya veremos lo que es) que es fundamental en las pginas Web. Tambin veremos algo de Javascript. Aunque su aprendizaje requiere un curso aparte, incluir algunas lneas de cdigo que nos sern de gran utilidad. Da a da vemos pginas Web en Internet, pero hacerlas no es una tarea muy sencilla si no tenemos ayuda de un programa. Aquellos que ya hayan creado pginas Web con programas como FrontPage o Dreamweaver han diseado su pgina Web cual documento de Microsoft Word, o como una presentacin de Power Point. En este curso vamos a aprender a crearlas desde un cdigo. Como si fuera un lenguaje de programacin. Para crear un archivo se tienen que crear secuencias enormemente largas de bits (ceros y unos). Diferentes lenguajes de programacin, como el Ensamblador, convierten caracteres en rdenes. Otros lenguajes de programacin interpretan un cdigo y lo convierten a ceros y unos para que el ordenador lo entienda. Para crear pginas Web tambin se utiliza un cdigo: el HTML. HTML es el lenguaje en el que estn escritas las pginas Web. Es un cdigo que puede entender un programa de Internet llamado Navegador. Internet Explorer, Mozzilla Firefox, Google Chrome, etc son navegadores. Estos navegadores entienden el cdigo HTML y lo transforman en el texto, en las imgenes y en todo lo que vemos. El HTML es un texto, un cdigo. No necesita compilarse (convertirse a ceros y unos) porque el navegador se encarga de hacerlo: el navegador entiende el cdigo tal y como lo escribimos. Considero que comprender esto (aunque parezca repetitivo), es fundamental para entender el curso entero.

HTML significa en ingls Hyper Text Markup Language, en espaol sera algo como Lenguaje de marcado de hipertexto. Un hipertexto es un texto que se muestra en la pantalla y permite enlazarse a otros textos. El HTML es un lenguaje de programacin de nivel 0 (como se lo llama) puesto que no se puede considerar un lenguaje de programacin propiamente dicho, pero s constituye una buena introduccin a ellos. En HTML se disea la pgina Web con su informacin y sus datos de formato como las letras en negrita, los colores de las letras, las tablas y las imgenes. Para gente ms exigente HTML se queda pequeo: necesitaremos insertar scripts de JavaScript y de PHP para que nuestra pgina sea dinmica; prximamente publicar cursos de ambos lenguajes, pero sin HTML no podemos crear ninguna Web. Podemos utilizar programas de edicin Web como FrontPage, Dreamweaver o Webmaker, nos sirve incluso Word. All diseamos la pgina como si fuera una presentacin y lo guardamos como pgina Web; pero lo que vamos a aprender aqu es a escribir el cdigo por nosotros mismos: este curso es de HTML, no de Frontpage. Aprender el cdigo, adems de ayudarnos a desarrollar nuestra inteligencia y prepararnos para aprender otros lenguajes, nos permite tener un control absoluto de nuestra pgina, personalizarla y reducir su tamao segn nuestro criterio. Adems de evitar problemas y cdigo inservible que puedan insertar estos programas, podemos incluir cdigo que no pueden crear estos programas. Es importante practicar el HTML de forma continuada, porque es algo que si no se usa se olvida con una sorprendente facilidad. Si no lo usamos, en unos aos se nos habr olvidado completamente. Una vez que tengamos la pgina terminada, necesitamos que un servidor nos la mantenga en Internet todo el da, todos los das del ao, los que son de calidad requieren, por desgracia, pagar. Los lenguajes como PHP y MySQL actan con el servidor, son imprescindibles para bases de datos, registros y otras funciones avanzadas. JavaScript no necesita servidor, y se pueden hacer maravillas con l, pero eso lo veremos en otros cursos. HTML sin embargo es mucho ms arcaico, pero es la base de todas las Web, ya que en ste se disean, y en l van incrustados Scripts de PHP, JS y VBS. HTML se ejecuta en el navegador directamente: no necesita un servidor, todos los navegadores lo entienden, as que siempre podremos pre-visualizarla. No necesitamos siquiera conexin a Internet para verla, puesto que el archivo con el cdigo est en nuestro ordenador. No obstante para que podamos subirla a Internet, necesitaremos que el servidor la mantenga en lnea. Pero cmo funciona el HTML? El HTML se basa en Etiquetas. Las etiquetas se llaman TAGs, y cada etiqueta define qu es lo que va a continuacin de ella. Las etiquetas son las instrucciones que el navegador interpreta. Existen dos tipos:

TAGs de accin concreta: estos tags realizan una accin concreta y ya est. Es el caso de tags como Insertar una imagen o pasar a la siguiente lnea. Son instrucciones simples. TAGs de seccin: afectan a una parte (seccin) del cdigo; por lo que tenemos que indicar cundo comienzan a actuar y cundo dejan de hacerlo. Un tag de seccin sera texto en negrita, por ejemplo (porque hay que indicar a partir de dnde el texto empieza a ser en engrita, y a partir de dnde deja de serlo). Debemos indicar a partir de dnde empezamos a escribir en negrita y cundo queremos dejar de escribir en negrita.

Las etiquetas (tags) se colocan entre los signos mayor que y menor que: <insertar un salto de lnea> Para los tags de seccin debemos indicar cundo comienzan a actuar (abrir el tag) y cundo dejan de actuar (cerrar el tag). Para abrirlo colocamos el tag normal, y para cerrarlo, colocamos una barra inclinada despus del signo menor que. <negrita>Texto que estar en negrita</negrita> Texto que ya no estar en negrita. Ya hemos visto cmo funcionan los tags. Estos tags son bastante especficos, pero los hay que no lo son tanto: <insertar imagen> Qu imagen, cmo de grande? Hay tags que necesitan especificar muchos datos sobre ellos. Estos datos se indican dentro del tag y se llaman atributos. Algunos atributos necesitan un valor que concrete el dato: Tag: <negrita> Tag con atributo vlido: <insertar lnea horizontal, no-redimensionable> Tag con atributo no vlido porque carece de un valor necesario: <negrita grosor> Tag con atributo con valor <negrita grosor=10px> Espero que se puedan visualizar los colores correctamente. Voy a usar el rosa oscuro para los tags, el rojo para los atributos y el azul para los valores de los atributos. Los atributos se separan de los tags por espacios (si no, se considerara todo un tag muy largo). El valor de los atributos no se indica con dos puntos (:) sino con un igual, y conviene que el valor est siempre entre comillas a partir del igual. <negrita grosor="10px"> Si no ponemos comillas no podemos poner espacios, porque se pensar que la siguiente palabra es un atributo nuevo. Se pueden omitir las comillas cuando solamente usamos los caracteres bsicos, pero es preferible incluirlas siempre. ATENCIN: cuando cerramos un tag, cerramos el tag solo, tenga los atributos que tenga: Un tag se cierra as: <negrita grosor="10px">.</negrita>

Y NO: <negrita grosor=10px>.</ negrita grosor=10px > Nunca se cierra un tag escribiendo los atributos en el cierre. Otra cosa: los tags combinados se cierran siempre en el orden inverso. <negrita><cursiva>..</cursiva></negrita> Esto se hace porque la cursiva va DENTRO de la negrita. Si incluimos texto despus de cerrar cursiva pero antes de cerrar negrita, se mostrar texto en negrita pero ya no en cursiva. En este caso no tiene mucha importancia el orden, pero en otros s. Si quisiramos continuar la cursiva despus de la negrita, sera mejor poner la cursiva primero, de manera que no se superpongan etiquetas, sino que se incluyan unas dentro de otras.
Muy preferible: <negrita><cursiva>..</cursiva></negrita> <cursiva><negrita>..</negrita>.</cursiva> Evitar: <negrita><cursiva>..</cursiva></negrita> <negrita><cursiva>..</negrita><cursiva>

En otros casos, esto es mucho ms importante: por ejemplo, sera grave cerrar el cdigo antes de cerrar el final de la pgina. Cualquier navegador lo entendera, pero es mejor no confundir al navegador: en primer lugar porque le costar menos trabajo cargar la pgina, y en segundo lugar porque un fallo de conexin podra afectar al cdigo y empeorarlo aun ms. Quedan muchos otros tipos de tags, pero los veremos ms adelante. Nota importante: aunque creo que ya lo habrs deducido, ninguno de estos tags es vlido: HTML fue inventado en EEUU, y por lo tanto (cmo no?!) est en ingls. Todos los tags estn en ingls, y de hecho, son ABREVIATURAS en ingls. En los captulos de este curso aprenderemos cada uno de ellos y sus utilidades. Los tags pueden escribirse tanto en mayscula como en minscula, pero es mucho ms que recomendable que lo hagamos siempre en minsculas, ya que en otros lenguajes las maysculas son diferentes que las minsculas y, adems, es como dictan las reglas y como mejor entendern el cdigo los navegadores.

1.- Primera parte de la pgina: HEAD

Vamos a empezar a crear la Web. Como HTML es un texto simple, lo podemos escribir sobre un bloc de notas, Notebook, incluso Microsoft Word o Writer (cuidado si usas stos, por la funcin de autocorreccin). Existen programas como Webmaker, DreamWeaver o Microsoft FrontPage, que escriben el cdigo por nosotros, incluso aaden nuevos lenguajes a la pgina. En ellos la diseamos cual imgenes o documentos, pero hay cosas que no se pueden hacer con ellos, y especialmente, cuanto ms los usemos, ms se nos olvidar programar manualmente. HTML es una variante de un lenguaje basado en etiquetas llamado XML. En XML nosotros nos inventamos los tags. En HTML son fijos. Seguramente habremos visto en alguna pgina Web que hay veces que caracteres con tildes, s u otros smbolos extraos para un norteamericano han salido como rectngulos huecos, o cosas como etc Esto se debe a que estos caracteres son de una codificacin diferente (como por ejemplo, juego de smbolos del espaol) y la pgina ha sido creada en codificacin inglesa. Para evitar esto, lo primero que vamos a hacer es definir que estamos en XML (donde HTML es una variante) y como atributo de XML pondremos la codificacin. Vamos a elegir siempre UNICODE UTF-8 (que contiene TODOS los caracteres). Si estis trabajando con Bloc de notas, se guarda como codificacin AINSI, as que cambiadla siempre a unicode UTF-8. Podis copiar este tag: <?xml version="1.0" encoding="UTF-8"?> Las etiquetas de PHP tambin empiezan por ?, adems, estamos en HTML puro, no XML, por lo que esta manera no me gusta demasiado. Sois libres de usarla, pero yo prefiero incluir la codificacin en otro lugar, que voy a explicar ms adelante. Empezamos con el cdigo HTML. Hay un tag llamado DOCTYPE que significa tipo de documento. Los navegadores actuales adivinan el cdigo en que est escrita la Web tras analizarlo, por lo que este tag es prescindible, no obstante, a m me gusta ponerlo. La pgina Web est mejor, y ahorra trabajo al navegador, lo que se traduce en mayor velocidad de carga. El tag doctype tiene muchos atributos, los podis encontrar aqu: http://www.w3schools.com/tags/tag_doctype.asp Cada tipo incluye una serie de caractersticas. El que yo uso es siempre el HTML 4.1 Frameset:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">

Lo uso porque este en concreto permite TODO, absolutamente todo, con lo cual no tengo que preocuparme por ninguna restriccin. Se tiende ltimamente a usar el Strict, que no permite marcos ni algunos efectos. Esto se debe a que se pueden sustituir por estilos de CSS, pero con el que yo uso (donde vale todo) tambin se pueden usar las CSS, de manera que prefiero sinceramente trabajar con total libertad. Voy a usar las CSS del mismo modo, pero con la tranquilidad de que puedo usar marcos si quiero.

Este tag, por lo tanto, encabeza la pgina. Despus de esto, abrimos el cdigo HTML con: <html></html> Dentro de una pgina Web se definen dos partes: HEAD y BODY, que significan encabezado y cuerpo de la pgina respectivamente. HEAD no es la cabecera de la Web, ni mucho menos: HEAD: no se muestra jams en la pgina, sirve exlusivamente para albergar informacin sobre la pgina. Aunque no lo parezca, es la parte ms importante del documento si queremos una Web dinmica. En head se colocan el ttulo, los metatags y los scripts. BODY: es la pgina Web propiamente dicha. Todo lo que escribamos en BODY ser lo que se muestre en la pantalla del navegador. Ahora que sabemos esto, vamos a crear una pgina en blanco (escribo el cdigo que uso y el resultado en Google Chrome): <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd"> <html> <head> </head> <body> </body> </html>

Recordad que para que un archivo de texto HTML lo entienda el navegador hemos de guardarlo con la extensin .htm o .html. Vemos el resultado: una pgina en blanco. Es lgico: no hemos escrito nada. Vamos a incluir unas cuantas cosas en head. Observad que el Tag DOCTYPE no se cierra, porque no pertenece al HTML, es una indicacin para el navegador.

[Nota: Si ests impaciente por entender de una vez qu es eso de CSS ve directamente al captulo, lee el principio y vuelve]

Tags para head:

<title></title>. El ttulo de la pgina Web. Recuerdo que est en head, luego no se muestra en la pgina. Este es el texto que se mostrar en las ventanas y en la pestaa del navegador. Tags meta o metatags: son tags de accin concreta que contienen datos sobre nuestra pgina. Scripts de Javascript: son cdigos de javascript que dan instrucciones para hacer una accin. Posteriormente, en nuestra pgina podemos decirles que realicen uno de estos scritps en el momento que deseemos. Estilos: son cdigos de CSS insertados en la pgina. Desde Body podemos decirle a un elemento que adopte uno de los estilos de aqu, de HEAD.

An no sabemos nada de Javascript ni de CSS, as que cuando veamos cada uno de estos, explicaremos esto con ms detalle. Probad este cdigo: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd"> <html> <head> <title>Mi pgina Web</title> </head> <body> </body> </html> Si lo habis guardado con la extensin correcta y lo habis abierto con un navegador, el resultado debera ser el mismo: una pgina en blanco. La pgina est en blanco porque no hemos escrito nada en body, y lo que sale en la pgina es el body; sin embargo, esta pgina tiene un nombre. Ese nombre (el title), aparece arriba a la izquierda, en la barra donde estn los botones de cerrar, maximizar y minimizar. Tambin aparece en la ventana que tenemos abierta, en la barra de tareas del sistema operativo (SO). Con paciencia, poco a poco aprenderemos a crear Webs completas.

Vamos a incluir en un meta tag la codificacin que no hemos puesto antes. Los tags meta suelen tener la siguiente estructura: 1. 2. 3. 4. 5. apertura del tag meta atributo name o atributo http-equiv. valor de ese atributo atributo content, que especifica datos para name o http-equiv valor de content.

de esta manera: <meta http-equiv="Content-Type" content="text/html; charset=windows-1252"> La que nosotros vamos a usar es: <meta http-equiv="Content-Type" content="text/html;charset=utf-8" > Esta es la codificacin unicode UTF-8. En este caso, est diciendonos: el tipo de contenido (Content type) es lo que pone en content, es decir, el utf-8. Otros tags meta que puedes incluir: 1. <meta name="generator" content="Programa"> name=generator indica que en content se especifica el nombre del programa que ha generado la pgina Web. 2. <meta name="ProgId" content="id_del_programa"> en este caso en content especifica el identificador (id) del programa que ha creado la Web. 3. <meta name="author" content="Javier G."> author indica que en content se especifica el autor de la pgina. 4. <meta name="keywords" content="Mi,pgina,Web"> keywords indica que en content se enumeran las palabras clave por las que un buscador como Google deber mostrar nuestra pgina. Los diferentes elementos de la enumeracin se separan por comas sin espacios. 5. <meta name="Description" content="descripcin de la pgina"> Description remite en la descripcin de la pgina. Como aqu hay espacios, las comillas son especialmente obligatorias. 6. <meta http-equiv="refresh" content="X;URL=./indice.htm"> Este cdigo permite que en X tiempo se cargue otra Web. En content se especifica el tiempo, en segundos; y seguido, URL es la ruta de la pgina a la que se cambia. Cambiad la X por el nmero de segundos y el indice.htm por vuestra pgina y listo. 7. <meta name="Robots" content="follow"> Robots explica cmo deben registrar nuestra pgina los motores de bsqueda. 8. <meta http-equiv="expires" content="fecha en formato GMT"> Expires indica cundo caduca nuestra Web y deja de mostrarse.

9. <meta http-equiv="Pragma" content="no-cache"> Pragma con no-cache har que nuestra pgina no se guarde en el cach del sistema. Existen muchos ms, y podis verlos con ms detalle y con ms posibles valores de content en http://www.w3.org/TR/REC-html40/struct/global.html#h-7.4.4.2 La mitad de los que he puesto no sirven para nada ms que estorbar. Utilizad solamente el de autor, el de palabras clave, el de descripcin, y los dems solamente si verdaderamente son necesarios. El de la codificacin es el nico que debe estar fijo en todas las pginas. Es importante decir que los Tags meta son texto, y por tanto, no conviene abusar de ellos. La pgina debe ocupar lo menos posible (el menor nmero de kilobytes posible) para que se cargue rpido. Incluid solamente los que de verdad necesitis y solo en la pgina principal. En las dems solamente la codificacin. En resumen, en head se colocan el ttulo, los tags meta que contienen informacin sobre la pgina, las funciones de los scripts (programas incrustados) y los estilos css de la pgina. Muchos scripts van entre comentarios. Los comentarios son textos que NO SE MUESTRAN en el navegador, permanecen en el cdigo con el fin de orientar al programador. Es conveniente usarlos por ejemplo para marcar los scripts y dems, ya que suelen ser largos y liosos, especialmente si se es novato conviene aadir comentarios para aclararse mejor. Son texto, de modo que si llenamos de demasiados comentarios el cdigo va sumando kilobytes. Pero no pasa nada por cuatro o cinco comentarios, son tiles. Para abrir un comentario se usa <!-- y para cerrarlo --> Ejemplo: <!-- Aqu empieza el script --> <script languaje=javascript> Etc Eso es el comentario Y ah empieza el script. Hemos puesto el comentario para que cuando editemos la pgina nos podamos orientar mejor.

Muchos scripts tienen todo su contenido encerrado en un comentario de HTML porque garantiza que el script no se ver en el navegador, pero s que actuar. Por cierto, el tag DOCTYPE no es exactamente un comentario. Bueno, visto esto, ya podemos pasar de HEAD hasta que volvamos a Javascript (JS) y CSS. Vamos a Body, pero antes, debemos tener un concepto muy claro del color en el ordenador:

2.- Color en HTML

Todo lo que incluyamos en body se mostrar, y como cada cosa la vamos a explicar posteriormente en otros captulos, voy a dedicar este captulo al color, para que podamos dar formato a body. Existen muchos modelos de color en el ordenador, de manera que entenderlos muy bien es esencial para todo programador, desde diseo grfico hasta creacin de programas y de videojuegos, pasando por pginas Web. Desde pequeos sabemos que si mezclamos azul y amarillo nos dar verde. Esto es ligeramente diferente en una pantalla. En tinta, cuando dos tintas se mezclan se restan, se juntan, se vuelven ms densas y absorben ms luz, con lo que se vuelven ms oscuras. En la luz, por el contrario, se suman. Las longitudes de onda y las energas se juntan, con lo que la onda resultante es ms energtica y ms luminosa. Para entenderlo, vienen bien dos diagramas de Venn:

Los colores primarios en tinta son el cin, el magenta, el amarillo y el negro, abreviado en ingls C, M, Y y B, CMYB, que pasa a ser CMYK. En la luz son el rojo, el verde y el azul (y se entiende por azul al del crculo grande de la derecha). En sus siglas en ingls: R. G. B. Seguro que nos suena eso de RGB, pero antes de empezar con el RGB, hay otro ms bsico que est bien conocerlo para entender todo bien. El HSL. HSL viene de Hue, Saturation, Luminosity (Matiz, Saturacin y Luminosidad. El matiz es la longitud de onda (el color en el espectro del arco iris). La saturacin es la saturacin del color: de ms a menos grisceo. La luminosidad es la claridad u oscuridad (de blanco a negro). Vamos a ver tres grficas para entenderlo bien

Creo que ya est entendido, pero si queremos seleccionar CUALQUIER color, necesitamos representar tres variables (H, S y L), por lo que necesitaramos tres dimensiones:

Y si tuviramos TODOS los colores, no habra huecos entre esas capas, con lo que no podramos seleccionar los colores de dentro. Es por ello que se tiene que quedar como una de las grficas anteriores y una magnitud aislada. En Paint la luminosidad queda aislada. Lo podis comprobar si hacis doble clic sobre un color y en modificar colores, le dais clic a Definir colores personalizados.

Como podis ver, tiene la grfica matiz-saturacin, y la magnitud de luminosidad en una barra a la derecha, aislada. Esto nos permite obtener cualquier color. En paint, el valor mximo de HSL es 240. El matiz 0 es rojo, el 240 da la vuelta entera y vuelve a ser rojo. La saturacin 0 es gris, saturacin 240 es color ntido. La luminosidad 0 es negro, 240 es blanco. 120 (la mitad) es el color ntido.

Si miramos la grfica, el cin est en la mitad (Matiz: 120). Si miramos el diagrama de Venn de Luz, el verde est en un tercio (80), y el azul en dos tercios (160). El amarillo a la mitad del verde (40) el naranja a la mitad del amarillo (20) etc Practicad con esto durante al menos media hora, es importante entender esto a la perfeccin. Abrid el Paint y observad el funcionamiento de las magnitudes Matiz, Saturacin y Luminosidad.

El modelo RGB. Existen muchas ms formas de lograr colores en pantalla, y una de ellas es el modo RGB (Rojo, Verde y Azul). Este modelo consiste en indicar cunto de cada color primario se muestra en cada pxel, de hecho, as funcionan los pxeles. Volvamos a la rueda de la luz: Cada pxel es capaz de formar cualquier color dando ms o menos intensidad a cada uno de los colores primarios. En cada pxel (en cada puntito de la pantalla) hay tres colores: el rojo, el verde y el azul. Segn la intensidad de cada uno, el punto ser de un color u otro. El resultado que vemos es la combinacin de los tres colores (que equivale a la interseccin de los tres crculos en el diagrama de la izquierda, es decir, a lo del centro)

Y as sucesivamente. El periodo del modelo RGB es de 255, ya que 28 = 256, desde el 0 hasta el 255 son los valores que puede tomar cada color. Es dos elevado a la octava porque son ocho bits los que recibe cada color del pxel. Una taba lo explicar muy bien:

No hay que memorizar esta tabla de ninguna de las maneras. Basta con aprenderse los colores ms importantes. Lo importante de esta tabla es comprobar que nuestras

predicciones son acertadas (hay que intentar razonar: por ejemplo, si el amarillo est entre el verde y el rojo, ser la suma del verde ms el rojo: 100% rojo y 100% verde). Repito: es muy importante insistir en esto, porque nos valdr para todo el trabajo en el ordenador referido al diseo: grfico, fotogrfico, Web y programacin. Es lgico que en los colores normales todo se haga con valores de estilo: 100% rojo (255) y 50% verde (128). Si queremos oscurecer los colores, deberemos dividir estos nmeros por un nmero siempre que el resultado sea un nmero natural. En la tabla los he dividido entre dos, y el color se ha quedado con el doble de oscuridad. Para aclarar un color ntido, hay que aumentar todos los valores en la misma proporcin. Practicad con esto durante mucho rato hasta que comprobis que lo habis entendido absolutamente todo y muy bien. Cuando estis listos, pasamos al color en HTML. El color en HTML es el mismo que el RGB, pero ligeramente modificado. HTML utiliza notacin hexadecimal para los valores de 0 a 255. Qu significa esto? Significa que el mdulo aritmtico es 16 en lugar de 10, por lo que es hexadecimal en lugar de decimal. Y es hexadecimal porque cada color tiene 8 bits (28=256), y se usan dos cifras para cada color, es decir, 224 = 2 16. Nosotros utilizamos un sistema decimal y posicional. Cada vez que llegamos al nueve reiniciamos la numeracin y subimos una unidad en la siguiente posicin: 0 0 0 1 0 2 0 3 0 4 0 5 0 6 0 7 0 8 0 9 Reinicio 1 0 1 1 1 2 1 3 1 4

En el sistema hexadecimal, se reinicia la caracterizacin al llegar a 16. Los caracteres son del 0 a la F: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F. A=10 B=11 F=15 Entonces, 0=0, 1=110=A 15=F 16=10, 17=11, 18=12 25=19 26=1A etc Para convertir un nmero decimal podemos usar la propia calculadora de nuestro S.O. Escribimos el nmero, y cambiamos DEC de decimal, por HEX, de hexadecimal, y quedar convertido (esto, claro, con el modo de calculadora cientfica). En Windows es as pulsando en Hex, y por ejemplo, de 16, cambiar a 1 0. Probadlo.

Para representar un color en notacin HTML se utiliza una almohadilla (el signo #) y a continuacin dos cifras para cada color (RGB): #000000 Los colores suelen ser valores de atributos, de manera que es conveniente ponerlo siempre entre comillas. Vamos a ver ejemplos: <color-de-letra color="#000000"> Algo as hara que escribisemos en negro. <color-de-fondo color="#FFFFFF"> Algo as nos pondra un fondo blanco. Si la segunda cifra de un color coincide con la primera, la podemos suprimir, pero yo personalmente prefiero no hacerlo: #FFF = # FFFFFF recordar: #FFF #F0F0F0

Tambin podemos escribir el color como el nombre en ingls. No obstante, esto se desaconseja, puesto que cada navegador puede interpretar diferentes tonos: color=red, color=blue (y as con todos los nombres de colores, todos) Es preferible color=#FF0000 y color=#0000FF

Por si no ha quedado del todo claro, os dejo algunos. Rojo FF0000 Rosa FF00FF Naranja FF8800 Pistacho 88FF00 Verde 00FF00 Amarillo FFFF00 Esmeralda 00FF88 Cielo 0088FF Azul 0000FF Cian 00FFFF Morado 8800FF Magenta FF0088 Se consideran Colores seguros para la Web aquellos que solamente contienen los caracteres 0, 3, 6, 9, C y F. Esto ya ha quedado obsoleto, puesto que todos los navegadores soportan cualquier color, pero dejo esa anotacin por si (por el motivo que sea) hace falta.

Recomiendo releer varias veces este captulo, y muy lentamente para comprenderlo bien. Por supuesto, la prctica supone el 80% del aprendizaje del color.

3.-Dar formato a body

Bien, ahora que sabemos esto del color, ya podemos empezar a darle formato a body. Antes de empezar con esto es importante que tengamos, antes de nada, una idea previa de lo que queremos hacer. Vamos a crear una carpeta que se llame Sitio Web o algo por el estilo. Todos los archivos de nuestra pgina debern estar guardados en carpetas o subcarpetas de ese sitio Web. Es fundamental tener un cdigo bien ordenado para aclararse y no perderse entre las lneas de cdigo. Aconsejo sangrar (tabular) cada seccin segn su nivel de inclusin en otras etiquetas, es decir, jerarquizar las etiquetas. Podemos escribir todo el cdigo seguido si queremos. Los saltos de lnea se interpretan como espacios en blanco. Varios saltos y varios espacios normales seguidos se consideran como un nico espacio. Ya hemos dicho que todo lo que escribamos en body se mostrar en la pgina. Vamos a escribir un pequeo texto para ver cmo queda.

Si queremos que los saltos de lnea se tomen como saltos de lnea y dems, podemos usar un tag llamado <pre>. Lo que vaya dentro de este tag se mostrar tal y como est en el cdigo, incluyendo el tipo de letra: (omito el resto, que es idntico) <pre> Este texto se debera mostrar con la fuente de la consola y con los saltos de lnea del cdigo, porque est con el tag "pre" </pre> </body>

Sin embargo, en lugar de utilizar el tag pre vamos a dar formato al texto de otra manera. Los saltos de lnea se interpretan como espacios, as que por poder, podemos poner nuestro cdigo en una sola lnea, o cada palabra en una lnea, pero vamos a aprender a hacerlo bien. En primer lugar, vamos a aprender a darle color al fondo y al texto: para ello vamos a aadirle unos atributos a body. De manera predeterminada escribe con fondo blanco y letra negra. Para cambiar eso aadimos los atributos bgcolor y text. <body bgcolor="#8888FF" text="#333300">

Bgcolor significa background color (Color de fondo). Con l especificamos el color de fondo de la pgina, y con text, el color de la letra. En mi caso apenas se nota, pero es ligeramente amarillento. Es muy importante elegir los colores segn la temtica de la Web, y elegirlos de manera que haya mucho contraste para que se pueda leer con facilidad. Si en lugar de un color liso, queremos incluir una imagen de fondo, el atributo es background y el valor es la direccin de la imagen: <body background=fondo.jpg> Y de esta forma, el fondo de nuestra pgina ser una imagen llamada fondo.jpg, se supone que debis poner el nombre de la imagen que queris. Esto funcionar si la imagen est en la misma carpeta que la pgina (carpeta del sitio Web) si no, hay que poner la ruta completa: <body background=imgenes/fondo.jpg> o incluso: <body background=C:/Documents and Settings//fondo.jpg> Pero esto ltimo no debera hacerse nunca, puesto que slo se publica la carpeta del sitio Web, y una imagen que no est ene sa carpeta imagen no se publicara. Tened en cuenta que al publicar la Web, o al cambiarla de ordenador, la ruta de C:/ tal, cambia; por eso la carpeta del sitio Web es la predeterminada, y al no poner nada se supone que se refiere a la carpeta del sitio Web. Si la imagen es ms grande que la pantalla, aparecer cortada. Si la imagen es ms pequea se rellenar en forma de mosaico (es decir, se repite la imagen hasta llenar todo el hueco). Es imposible acertar con el tamao, pues simplemente con restaurar la ventana y maximizarla se modifica. Adems, cada uno tiene su propia resolucin de pantalla. Podemos hacer que al desplazarnos hacia abajo se desplace el texto sobre el fondo fijo. Para ello aadimos bgproperties=fixed, pero es opcional. <body background="fondo.jpg" bgproperties="fixed">

Comprobad la diferencia entre poner el bgproperties=fixed y el no ponerlo. Listo? Pues empecemos a escribir. Normalmente una pgina tiene un ttulo en lo alto. Este ttulo es una cabecera, en ingls heading y tiene su propio tag. El tag <h1> (Encabezado de nivel uno). Todo lo que contenga el h1 se mostrar como un texto bastante grande, que se usa como titular. Existen seis niveles de tags h, desde h1 hasta h6. H1 es el ms grande, y h6 es el ms pequeo (ms incluso que el texto normal. Evidentemente del 2 al 5 son una transicin de tamao entre estos. <body> <h2>Esto es un antettulo</h2> <h1>Esto es el ttulo principal</h1> <h3>Esto es un subttulo</h3> <h4>Esto es un infrasubttulo</h4> <h5>Esto es una entradilla</h5> <h6>Esto es un ttulo de seccin</h6> Esto es el texto normal </body>

Para escribir el texto normal lo escribiremos en prrafos. Para crear prrafos escribiremos el texto entre los tags <p></p>. Si, en lugar de eso, queremos hacer un salto de lnea, escribimos el tag de accin concreta <br>. Podemos insertar lneas horizontales con el tag hr (horizontal rule). Estas lneas horizontales son separadores, y podemos darle altura, anchura, y otos atributos.

<body> <p>Esto es un prrafo</p> <p>Esto es otro prrafo<br> y aqu he hecho un salto de lnea</p> <hr> <hr width="50%" height="4px" noshade color="#FF0000"> </body> Explico este cdigo: cada prrafo (p) est separado del siguiente por un espacio interlineal doble. El salto de lnea (br) es pasar a la fila siguiente, simplemente. El primer hr ha insertado una lnea horizontal normal, gris. El segundo lo he personalizado bastante: width es la anchura; adems de en pxeles, se lo puedo indicar en porcentaje del rea de navegacin. De esta manera, aunque el usuario modifique el tamao de la ventana, la lnea siempre ocupar la mitad. Height es la altura de la lnea.

Noshade significa sin brillo. Color es el color de la lnea. He dedicado poco tiempo a esto, as que id probando posibilidades si queris entenderlo bien. Es importante que cuando escribimos un texto, tengamos cuidado con los caracteres especiales: Hemos definido la codificacin unicode, de manera que no deberan darnos nunca ningn problema, mas yo, por costumbre y por si acaso, prefiero asegurarme del todo. Para asegurar que un carcter se muestra correctamente, es preferible escribir el cdigo del carcter, en lugar de la propia letra. El cdigo de un carcter se encierra entre un smbolo & y un punto y coma. La es una a con tilde aguda, y se representa como &aacute; & a acute ; Olvidar el punto y coma convertir eso en texto normal, as que cuidado. He aqu todos los cdigos que os pueden interesar como hispanoparlante: < &Aacute; &Eacute; &Iacute; &Oacute; &Uacute; &Uuml; &Ntilde; &iquest; &lt; > &aacute; &eacute; &iacute; &oacute; &uacute; &uuml; &ntilde; &iexcl; &gt;

Los smbolos < (greater than [gt] y less than [lt]) son importantes si deseamos incluirlos en el texto, porque si los escribimos como texto normal los confundir con un tag y puede echarnos abajo la pgina. No solo eso: estos cdigos nos permiten insertar cualquier smbolo existente. Aqu tenis una lista: http://ascii.cl/es/codigos-html.htm Se est empezando a alargar el captulo, as que lo secciono en dos. Termino con las citas. Se pueden incluir citas en un documento HTML. Las citas sern texto con un formato diferente, que harn parecer una cita de un autor, para mencionar alguna frase de algn personaje. El tag <q></q> sirve para hacer una cita corta. Lo que hace es poner el texto entre comillas. El tag <cite></cite> sirve para hacer una cita normal. Su efecto es simplemente texto en cursiva. El tag <blockquote></blockquote> hace una cita larga, en un prrafo aparte. Podis probar estos cdigos para ver lo que hacen. La pregunta es. Para qu usar estos tags si se puede conseguir su efecto de otra manera (manual, escribiendo el formato con cursiva, escribiendo comillas)? La respuesta es que si los hacemos de forma manual, sern texto normal. Si los ponemos con estos tags, podremos cambiarles el estilo con CSS. Profundizaremos en las citas ms adelante.

4.-Dar formato a body (Parte 2)

Vamos a terminar de ver cmo dar otros formatos al texto. Son fundamentales los estilos bsicos de negrita, cursiva, subrayado tag <b></b> <i></i> <u></u> <s></s> o <strike></strike> <tt></tt>   traduccin bold italic underlined stricken teletype text subscript superindex significado negrita cursiva subrayado tachado texto en formato cdigo subndice superndice

Si queremos usar la negrita para hacer nfasis, y la cursiva para hacer menos nfasis, hay otros tags: <strong></strong> Encierra un nfasis fuerte. Normalmente se mostrar en negrita. <em></em> Encierra un nfasis. Normalmente se mostrar en cursiva. De nuevo, el motivo de usar estos tags y no los otros es que con CSS podremos especificar el estilo para los nfasis va a ser este y as personalizarlo. Con un ejemplo, adems de verlo, aprovecho para poner en prctica los cdigos de los caracteres. He olvidado que mencionar que &nbsp; es un espacio en blanco normal. Poner varios espacios normales cuenta como solo uno, poner varios &nbsp; cuentan como varios &nbsp; esto es muy importante, ya veris como le sacamos partido. No miris el texto, analizadlo detenidamente: <p>Esto es un p&aacute;rrafo</p> <p><b>Texto en negrita</b><br> <i>Texto en cursiva</i><br> <u>Texto subrayado</u><br> <s>Texto tachado</s><br> <strong>Texto con &eacute;nfasis fuerte</strong><br> <em>Texto con &eacute;nfasis</em><br> La f&oacute;rmula del sulfato alumnico es Al₂(SO₄)< sub>3</sub><br> Una ecuaci&oacute;n famosa es e^{i&times;&#960;}=-1 </p>

Por cierto, ninguna etiqueta de seccin puede estar vaca (si no, no se mostrar). Lo mnimo que debe contener una etiqueta para que se muestre es el &nbsp; Est bastante bien, verdad? Podemos insertar cualquier smbolo. Para los dems efectos de texto necesitamos CSS y DHTML (HTML dinmico). Os adelanto unos cdigos que analizaremos cuando lleguemos a sus captulos correspondientes: El tag <span></span> nos permite delimitar una zona de texto que ser afectada por un estilo de CSS. He aqu unos ejemplos: <span style="text-decoration: overline"> Suprarrayado </span> <span style="visibility: hidden"> Oculto </span> <span style="text-decoration: blink"> Intermitente </span> (Tambin se puede con <blink></blink>, advertimos de que intermitente es un tag que no suelen soportar muchos navegadores, apenas Netscape y FS Netexplorer) Y el span ms importante: <span style="background-color:#FFFF00"> Para resaltar un texto (poner fondo al texto) </span> Limitaos a cambiar solo los seis caracteres del color. <span style="background-color:#FFFF00"> Texto resaltado en amarillo </span> Texto resaltado en amarillo Nos queda ver cmo alinear el texto. Para ello hay que usar capas. De momento os adelanto que es con el tag div y lo de centrado o no se consigue cambiando el valor de align. <div align="left"> </div> (predeterminado) <div align="center"> </div> (centrado) <div align="right"> </div> (alineado a la derecha) <div align="justify"> </div> (texto justificado) Tambin se puede centrar texto directamente con los tags <center></center> Para alinear prrafos enteros no hacen falta capas, sino que el align se indica directamente en el prrafo: <p align="right">Prrafo alineado a la derecha</p> Finalmente, nos queda ver cmo cambiar el color, tamao y tipo de letra a mitad de prrafos. Eso se consigue (hasta que aprendamos CSS) con el tag font. <font color="#00FF00" size="5" face="Arial">texto diferente</font></p> El atributo color indica el color del texto. Face es el tipo de letra. Si el ordenador usuario no tiene instalado el tipo de letra se mostrar la fuente predeterminada.

El atributo size es el tamao. El tamao va del 1 al 7 (3=12pt, 4=16pt) etc Si queremos otros valores debemos indicar que el nmero no es un coeficiente del 1 al 7 sino puntos: size=3 es lo mismo que size=12pt

POR FAVOR, PRACTICAD TODO ESTO BIEN ANTES DE CONTINUAR.

5.-Listas en HTML
En HTML podemos crear listas, y tienen mucha ms utilidad que en otros programas en numerosas ocasiones. Cuando hablamos de listas hablamos de lo que en otros programas es Numeracin y vietas. Vamos a empezar por las vietas. Esto en HTML es una lista desordenada (porque no lleva nmeros de orden). En ingls unordered list, con el tag <ul>. Cada elemento de la lista lo encerraremos en el tag <li></li>. Si escribimos texto antes de escribir Li, ese texto no tendr vieta. Puede formar un ttulo de la lista: <body> <ul><b>Esto es el t&iacute;tulo de la lista</b> <li>Esto es un elemento de la lista</li> <li>Esto es otro elemento</li> </ul> </body> En definitiva, todo lo que no est entre <li></li> ser texto pero sin la vieta. Podemos incluir listas dentro de otras. Una lista dentro de otra ser una sublista, y aparecer con mayor sangra.

Fijmonos en una cosa: las listas aparecen de forma predeterminada con crculos. La sublista con circunferencias, y las dems sublistas con cuadrados. Esto lo podemos cambiar en cualquier momento con el atributo type: Type=disc es crculo Type=circle es circunferencia (qu estupidez, verdad? Porque circle es crculoEstos ingleses) Type=square es cuadrado

Cuidado, disc es con C, no con K, esto suele ser un error habitual. Si aplicamos este atributo al tag <ul>, todos los elementos de la lista sern de ese tipo. Si lo aplicamos al tag <li>, solamente ese elemento de la lista tendr la vieta diferente. Ahorrad cdigo: si vais a personalizar elementos concretos de listas, ahorroslos si ya vienen de manera predeterminada, quiero decir, no pongis type=circle en un elemento de una sublista, porque el navegador lo hace solo. Hacedlo solamente para las que vayan a cambiar. Si queremos que en lugar de una de estas tres vietas, tenga una imagen personalizada, tendremos que recurrir a CSS: <li style="list-style-image: url(ruta.gif')"> Tambin se puede aplicar a <ul>. Hay muchas ms posibilidades, pero las veremos con CSS. Otra posibilidad es crear listas ordenadas, es decir listas con nmeros. Esto se considera una lista ordenada (ordered list) y se utiliza el tag <ol> en lugar de <ul>. El elemento de la lista tambin es <li>. No solo podemos usar nmeros: podemos usar letras maysculas, minsculas, y nmeros romanos: Para usar letras usamos type=A o type=a segn las queramos maysculas o minsculas. Para usar nmeros romanos type=I o type=i (Este ltimo har i, ii, iii, iv, v lo cual no es muy correcto ni profesional).

Para personalizar el estilo de los nmeros a otros formatos, como por ejemplo 1), 1] (1), necesitaremos CSS. Puede ser que tengamos que interrumpir la lista (por lo que sea) y queramos continuarla despus. Si creamos una lista ordenada nueva volver a empezar en 1. Para que esto no ocurra utilizamos el atributo Start, donde indicamos en qu nmero debe comenzar la lista. Si estamos en una lista de A,B, C, empezar de la misma manera por el segundo elemento: por la B.

<body> <ol> <li>Esto es un elemento de la lista</li> <ol start="2"> <li>Elemento de la sublista</li> <li>Esto es otro elemento</li> </ol></ol> </body> Existen ms tipos de listas: listas de definiciones, listas de directorios, y mens. Una lista de definiciones sirve para hacer una especie de diccionario en nuestra Web. Podemos usarlo para ayudar al usuario con tecnicismos, o para lo que vosotros consideris conveniente. El Tag es <dl> (definition list). A a partir de aqu hay varias etiquetas: <dt></dt> es para englobar un trmino que vamos a definir. <dd></dd> es para una acepcin <dfn></dfn> contiene la categora gramatical, en cursiva. <bdo></bdo> contiene la definicin de la acepcin. <big></big> resalta lo que escribamos dentro en grande. <code></code> escribe con letra de cdigo (letra de mquina). <small></small> hace ms pequeo el texto, se puede usar en cualquier parte de body.

Analizad bien el cdigo y podris entender todo. Probad tambin los tags big y code, que no los he incluido yo. Como podis observar, el resultado es elegante y profesional. Vamos a ver las dos listas restantes: la lista de directorios y el men. La lista de directorios es una lista desordenada, solo que en lugar de ul se coloca dir. El resultado son las mismas vietas. Esto nos servir para diferenciarlas de las listas desordenadas normales, y con CSS y Javascript darle esa apariencia que buscamos para una lista de carpetas:

Repito: esto solamente lo podremos hacer si tenemos las imgenes deseadas (en este caso las de las carpetas) y varios cdigos de CSS y de Javascript, por lo que de momento no vamos a ver cmo hacer esto, sino que lo veremos mucho ms adelante. Ser con la opcin de submens, ocultando y mostrando capas.

Y vamos con el ltimo: el men. El men es igual que dir, pero en lugar de dir ponemos men. Est inicialmente pensado para hacer mens de una nica columna. Es exactamente igual que <ul>. Tanto dir como men son reemplazables por ul, y podemos darle a ul un identificador nico para que solo esa lista reciba un estilo. Es por ello que se desaconseja utilizar dir y men. Esta recomendacin es avalada y reforzada por el consorcio de las tres uve-dobles (www), el W3C, que se dedica, entre otras cosas, a dictar las normas del HTML. Podemos combinar todos los tipos de listas entre ellos. Podemos hacer una sublista ordenada en una lista de vietas (incluir un <ol> dentro de un <ul>) y viceversa, y as sucesivamente. Todos se pueden combinar con todos.

6.- Hipervnculos
Esto es de lo ms importante de nuestra pgina Web. Un hipervnculo es cualquier cosa que nos lleva a otra pgina cuando hacemos clic. Esto es un hipervnculo: http://www.w3c.es/

Los hipervnculos suelen aparecer en azul y subrayados, el cursor cambia de una flecha a una mano. Esto lo podemos cambiar. Cmo se crea un hipervnculo? El tag es <a> (de anchor, ancla), pero hay muchos tipos de hipervnculos o enlaces (que es lo mismo). Una pgina Web hurfana (sin conexin a otras Web) es una Web psima. Hay que solucionar esto: 1) Enlaces internos-internos Si nuestra pgina es muy larga, debemos aadir enlaces que nos coloquen en ciertas partes de la Web. Por ejemplo, en wikipedia hay enlaces (en el ndice) que nos llevan a las diferentes secciones. Para ello, debemos asignar un identificador a un elemento, por ejemplo, al titular de la pgina vamos a llamarlo titular: <h1 id=titular> Desde cualquier parte de la pgina podremos vincular al titular: <a href="#titular" title="subir"> Ir arriba </a> Analicemos: <a abre el tag. Href (hyperlink reference) es la ruta a la que hacemos el vnculo. En este caso, como se trata de una seccin de nuestra pgina, colocamos una almohadilla. Title es el texto que se mostrar en un cuadrito si dejamos el ratn sobre l. Lo que encerramos entre <a>y</a> es el texto que se muestra como hipervnculo:

En lugar de asignar IDs a los tags que queramos, es preferible crear un marcador. Un marcador es una posicin a la que podemos vincular de la misma manera. Para eso usamos el mismo tag: <a name="Marcador"> <a href="#Marcador">Ir a Marcador</a> le damos un nombre al ancla con name=nombre. Despus, en cualquier parte del documento podemos vincular a ese marcador

En XHTML hay que sustituir name por id. Si estis haciendo lo mismo que yo, no hay que cambiar nada. Con esto podremos poner un ndice en nuestra pgina Web que lleve a cada seccin, y desde cada seccin podremos hacer un hipervnculo que ponga

subir, y que lleve al ndice. Esto, evidentemente, si nuestra pgina es as (de tipo Blog). No obstante, lo normal no es crear una pgina Web de tipo blog (con cada seccin debajo de otra), sino que lo normal es crear un Stio Web. Un sitio Web es un conjunto de pginas (principal y secciones como noticias, fotos, etc) y con subcarpetas donde hay archivos que incluimos. Vamos, por tanto, a crear enlaces externos. 2) Enlaces externos-internos Si queremos hacer un hipervnculo a una pgina Web de nuestro sitio Web, escribimos su nombre o ruta en href. <a href="pgina2.htm" title="Pg.2"> Ir a la pgina 2 </a> Se supone que el archivo pgina2.htm se encuentra en la misma carpeta que nuestra Web principal. Si se encuentra en una subcarpeta, ponemos <a href="webs/pgina2.htm" title="Pg.2"> Ir a la pgina 2 </a> Se supone, en este caso, que el archivo pgina2.htm se encuentra en la subcarpeta webs. Adaptadlo a vuestros nombres. Hago hincapi en que podemos vincular a cualquier pgina de nuestro ordenador, pero no debemos hacerlo jams. Solamente se enva a otros ordenadores o se sube a Internet la carpeta del sitio Web. Si hacemos un vnculo a un archivo que no est en la carpeta del sitio, no lo habremos publicado, asi que no se mostrar. Si simplemente pasamos nuestra Web a otro ordenador, no existir esa ruta. Hacedlo solamente dentro del sitio Web. 3) Enlaces externos-externos. Lo que s que podemos hacer es vincular a otras pginas Web de la red, porque esas s estn en Internet, disponibles para todos los usuarios. Tenemos que escribir la ruta completa. <a href="http://www.google.es" title="Google"> Ir a la Google </a> 4) Enlaces mixtos. Tambin podemos vincular a un marcador de una pgina externa, colocamos el nombre del marcador inmediatamente despus de la ruta, sin espacio: <a href="pgina2.htm#titular" title="Pg.2"> Ir al titular de la pgina 2 </a> Evidentemente, deben existir esa pgina y ese titular en ella.

5) Enlaces a correos electrnicos: Podemos hacer un enlace a una direccin de correo electrnico, escribimos correo a (mail to), todo junto, y a continuacin el correo. Podemos incluir un asunto predeterminado especificndolo con Subject= <a href="mailto:fuckencio@hotmail.com" subject="Hola"> Ir a la pgina 2 </a> Ahora bien, hoy en da ya nadie usa programas como Microsoft Outlook para gestionar su correo electrnico (y si conoceis a alguno, hacedle una foto, por favor). El correo est en servidores de Internet como Yahoo (Correo yahoo!), Google (Gmail) o Microsoft (Hotmail). Al hacer clic en un hipervnculo de correo electrnico se abrir el programa que en nuestro sistema operativo tengamos seleccionado como editor de correo. Esto quiere decir que se abre un programa para nada (a no ser que vuestro S.O. os permita, como en mi caso, enlazar a la Web de vuestro correo). Por ello, recomiendo que en lugar de esto, pongis vuestro correo para copiar y pegar. 6) Enlaces de descarga: Si enlazamos a un archivo que nuestro navegador no puede abrir, el navegador lo descargar (por ejemplo, al enlazar a un archivo .zip, lo descargar). Los navegadores que ya soportan algunos archivos extraos como PDF o Vdeo no los descargan, sino que los muestran gracias a plug-ins, pero nos dan la opcin de guardarlos en nuestro equipo. Podemos personalizar el color de los hipervnculos en body: <body link="#0000FF" vlink="#880088" alink="#FF0000"> Link es el color del hipervnculo normal. Vlink el del vnculo ya visitado. Alink el del hipervnculo activo (justo al hacer clic). JS nos permitir ms efectos de los hipervnculos, como cambiar totalmente la apariencia al pasar el ratn, al hacer clic, etcy CSS personalizar otros efectos y cambiar el cursor. Finalmente, para los siguientes captulos, TODO, y digo absolutamente todo lo que se encuentre entre <a href> y </a> formar parte del hipervnculo. Si creamos una tabla dentro de los tags <a></a>, la tabla entera ser un hipervnculo, y as con todo. Resumen: 1. Para crear un marcador ponemos <a name=nombre_del_marcador> 2. Para hacer un vnculo a un marcador o aun elemento con un id, hacemos <a href=#destino>Texto de hipervnculo</a> 3. Para hacer un vnculo a otra Web escribimos su ruta en href. 4. Para hacer un enlace a un correo electrnico (no recomendable) ponemos href=mailto:direccin@loquesea.tal 5. Si enlazamos a un archivo no soportado por el navegador, el navegador lo descargar. 6. Cualquier cosa que est entre <a> y </a> forma parte del vnculo.

7.- Tablas
Las tablas son muy usadas (o al menos hasta que lleg DHTML, pero se siguen usando con una frecuencia altsima). Es muy importante aprender a crear tablas en HTML. El tag es table. En table vamos a definir por obligacin tres cosas: el id, el ancho y el grosor del borde: <table border="1" width="100%" id="tabla1"><table> En border ponemos los pxeles del borde, 0 significa sin borde. En width ponemos la anchura, bien en pxeles, bien en porcentaje del rea de navegacin. Podemos aadir height (la altura). Si guardamos este cdigo, aparecer un cuadro muy pequeo en la pantalla. Por qu, si hemos puesto 100%? La respuesta es sencilla: Una tabla no puede estar vaca. Lo mnimo que una celda puede contener es un espacio, que se escribe con el &nbsp;. <table border="1" width="100%" id="tabla1">&nbsp;<table> Se sigue viendo igual. Esto es porque hemos definido una tabla, nada ms, no hemos definido ninguna celda. Es como definir la lista con ul, no hemos puesto ningn elemento. Para definir una tabla se definen filas (horizontales), y en cada fila se definen celdas. El tag <tr> define una fila, y <td> una celda:

Ahora s, nos ha creado una tabla. Si eres como yo, y no te gusta que el borde quede as, puedes convertirlo en una lnea simple con CSS, as: <table border="1" width="100%" id="tabla1" style="border-collapse: collapse"> De esta forma tenemos una tabla con borde simple. Vamos a aprender a dar formato a la tabla. Los atributos bgcolor y background funcionan igual que en body, y afectarn a toda la tabla si lo ponemos en table, o a una nica fila o celda si lo ponemos en <tr> o <td> respectivamente. <td bgcolor=yellow> pondr la celda con fondo

amarillo. Si se lo ponemos al tr, lo tendr toda la fila, si se lo ponemos a table, la tabla entera. Podemos personalizar el borde de la tabla con bordercolor, si queremos preservar ese efecto de brillo y sombra, ponemos bordercolorlight para el color de brillo, y bordercolordark para el color de sombra. Ojo con las comillas en los atributos de los colores.

Para seleccionar los colores o la visibilidad de solamente algunos bordes de las tablas, necesitaremos CSS. Hay dos atributos para table que nos sern muy tiles: cellpadding y cellspacing. Cellspacing nos permite definir la anchura del hueco entre celdas:

Con cellspacing=10 hemos definido una distancia de diez pxeles entre el borde de la tabla y el borde de la celda. Ntese que esta vez he elegido el 50% de anchura, para que me quepa en la parte de la pantalla que he capturado, vosotros poned la que queris. El atributo align me permite alinear la tabla a la izquierda (left), a la dereccha (right), y centrarla (center). Align=left es lo predeterminado, con lo que escribirlo solamente sirve para aumentar el tamao de la pgina (evitadlo).

En este caso he creado tres tablas, de anchura al 30%. La segunda la he centrado (align=center) y la tercera la he alineado a la derecha align=right). El otro atributo, cellpadding, es muy bueno: nos permite dar un margen uniforme a la celda: define la distancia entre el texto y el borde de la celda:

Aqu he colocado el atributo cellpadding=10. El atributo Cellpadding sustituye a incluir celdas vacas (que no tienen ni siquiera &nbsp;) que se usaban para aadir margen superior. Se recomienda tener presente el atributo Cellpading siempre.

Las tablas dan mucho ms juego: vamos a empezar a trabajar sobre las celdas. A las celdas podemos aplicarles los mismos atributos que a table (bgcolor, background, etc). Todas las celdas pueden contener cualquier cosa que pueda ir en el HTML. Para definir una celda utilizamos <td></td>, pero si son las primeras de la tabla, es conveniente utilizar el tag <th></th>, que crea celdas de encabezamiento. Normalmente sern celdas normales con texto en negrita y centrada, pero podremos cambiar esto con CSS.

Algo muy importante es el atributo valing (Vertical Align), que sirve para alinear texto verticalmente en la celda. Sus valores pueden ser top (Arriba), middle (centrado), bottom (abajo) y baseline (sobre la lnea de escritura donde se asientan las letras). En el ejemplo uso valign=bottom.

<td valign="bottom">Texto con Valign</td> El atributo nowrap (sin valor) o nowrap=nowrap aplicado a una celda hace que no se pueda segmentar su contenido de texto. Vamos a usar el ejemplo de la pgina del W3C:

En la segunda imagen, hemos colocado <td nowrap=nowrap> en la primera celda. Se advierte que este atributo est empezando a caer en desuso. Pero sin duda, lo ms importante es combinar celdas. En HTML se pueden combinar celdas. No se puede dividir celdas, en lugar de eso, se crean ms celdas. Para combinar dos celdas verticalmente se utiliza rowspan (Combinar filas rows - ) y para combinar dos celdas horizontalmente se utiliza colspan, (combinar columnas). Con ejemplos lo veris perfectamente, y terminamos el captulo:

Como podemos observar, cuando combinamos dos celdas no hace falta definir la siguiente: el programa la sobreentiende. Creo que esto es todo sobre las tablas (por el momento). Quiz tan solo quede una cosa que explicar: se puede utilizar una tabla para maquetar nuestra pgina Web. Maquetar significa crear un esqueleto que divida en zonas nuestra pgina para situar los elementos en sus diferentes partes. Muchas pginas tienen un margen a cada lado y el contenido est en el centro. Esto se puede conseguir haciendo con tablas. Creamos una tabla de tres celdas. A las de de los extremos les ponemos un ancho de un 20% del rea de navegacin, y as siempre quedar la celda central centrada en el rea de navegacin. Tambin se hace con celdas horizontales, para secciones de la pgina. Esta forma de maquetar est obsoleta y debe evitarse, pero nosotros la vamos a usar hasta que aprendamos la otra forma (la actual).

8.- Imgenes
Los archivos multimedia son bsicos en una pgina Web. Multimedia se refiere a imgenes, msica y vdeo. Vamos a empezar por las imgenes. Para insertar una imagen, esta debe estar en nuestro sitio Web o en una subcarpeta de ste, y su extensin puede ser cualquiera, pero para evitar errores, ser mejor que solamente usemos las que se permiten realmente: JPEG, GIF y PNG. Adems, esto nos ahorrar mucho tamao de la Web (kb), con lo que cargar ms rpido. La instruccin de insertar una imagen es una accin concreta, no hay cdigo que describa la imagen, as que el tag de la imagen es img y es de accin concreta. La ruta se escribe en el valor del atributo src (source, fuente/origen): <img src="ruta.jpg"> El atributo alt significa texto alternativo. Es muy importante ponerlo y en algunos casos obligatorio. El valor de alt es el texto que aparecer al posar el ratn unos segundos sobre la imagen, y el texto que aparecer cuando no cargue bien la imagen:

Podemos poner un borde a la imagen con <img border=1> El valor de border es el grosor en pxeles. Podemos alinear la imagen con el atributo align y los valores center o right. Si la imagen est afectada por los tags <center></center> (es decir, est dentro de esos tags) la imagen tambin estar centrada y podremos entonces poner align=left. Para esto no pongo ejemplos, pero probad los cdigos, que no cuesta nada cambiar unas letras, guardar y actualizar la pgina en el navegador. El atributo longdesc nos permite introducir una descripcin larga de la imagen. Esto ser utilizado por buscadores o visualizadores. No es muy habitual, pero puede ser til en algunas ocasiones. Si no es el caso, ahorrad texto. Es posible que tengamos que insertar imgenes muy grandes, y eso se traduce en mucho tiempo de carga. Existe un recurso que nos permite lo siguiente: podemos poner una imagen de baja calidad mientras la buena se carga poco a poco encima de ella. Para que esto sea posible ambas imgenes deben tener las mismas dimensiones y el mismo formato. La imagen de baja calidad puede ser en escala de grises, en blanco y negro, o simplemente transparente con un texto que ponga cargando. El objetivo es que el usuario no quiera abandonar la pgina porque se le acabe la paciencia. Hoy en da, con velocidades de Internet muy superiores, esto ya no es tan til, puesto que se

cargan mucho ms rpido, no obstante, si tenis una imagen grande, usadlo: introducimos la ruta buena en src (como siempre) y la de baja calidad en el atributo lowsrc: <img src="ruta.jpg" lowsrc="ruta_LQ.jpg" alt="imagen"> Al insertar una imagen se insertar con las dimensiones que sta tiene. Si queremos modificar su tamao, podemos especificar un tamao concreto con width y height. Podemos aplicarle mrgenes a la imagen con hspace (espacio horizontal, margen superior) y vspace (espacio vertical, margen izquierdo), especificado en pxeles. <img src="ruta.jpg" alt="imagen" height="50%" width="50%" hspace="10" vspace="10">

No hay mucho ms que aadir acerca de las imgenes por el momento. Recuerdo que si insertamos una imagen entre <a></a>, la imagen entera ser un hipervnculo. A veces (bueno, antes se sola) hacer una cosa que se llamaban Vistas en miniatura o thumbnails en ingls. Si queremos hacer esto, es muy sencillo: Insertamos la miniatura dentro de un hipervnculo. El hipervnculo debe estar enlazado a la imagen original. De esta manera, al hacer clic en la miniatura, nos mostrar la imagen en una pgina nueva. Atencin: para hacer la miniatura es recomendable crear una imagen ms pequea en lugar de redimensionar la original. Si creamos una imagen en miniatura, el tamao del archivo (en kilobytes) ser menor que si redimensionamos una imagen grande (que ocupara lo mismo, con lo cual, casi que no servira de nada). Podemos usar estas miniaturas como botones que nos llevan a otras pginas. Esto es muy til, pero sin javascript queda un tanto pobre. Al final veremos cdigos que nos permitirn darle una apariencia mucho mejor. Queda ver una cosa: el mapa de imagen. En tiempos se usaban mapas de imgenes en algunas imgenes grandes. Un mapa de imagen permite delimitar diferentes zonas en una imagen, que funcionan como hipervnculos. Explico: imaginemos la imagen de una casa. Nosotros podramos crear un mapa de imagen indicando que la puerta lleve a puerta.htm, la ventana a ventana.htm y as sucesivamente. Hoy en da se fragmenta cada seccin y se asla en capas, de manera que cada seccin es una imagen independiente, y se les puede dar efectos con javascript; sin embargo, como todava no sabemos js, debemos aprender HTML del todo. Para crear un mapa de imagen lo definimos al principio de body. Usamos el tag <map> y le damos un nombre. <map name="mapa1">. En l definimos reas hasta cerrarlo con </map> Desde la imagen lo llamamos con usemap almohadilla nombre <img usemap="#mapa1"> Las reas posibles son rectngulo, polgono y crculo. En el rea definimos el hipervnculo con Href, la forma en shape y las coordenadas en coords.

He sido escueto con la explicacin porque voy a poner un ejemplo y lo voy a describir ahora:

Despus de body defino un mapa con nombre FPMap0. Dentro de l hay tres reas. Todas llevan a Pgina_nueva_1.htm. En shape defino la forma: rect (Rectangle, de rectngulo), circle (crculo) o polygon (polgono). En coords indico las coordenadas de esas formas: En el rectngulo las coordenadas corresponden a los puntos de su esquina superior izquierda y su esquina inferior derecha. Se agrupan en dos pares: (45, 15) y (535, 192). Esos dos son los dos puntos por los que pasa el rectngulo. Evidentemente, el formato de las coordenadas es X, Y, como en matemticas:

En el crculo, los dos primeros nmeros pertenecen a las coordenadas de su centro. El tercer nmero es su radio.

En el polgono, cada par de nmeros corresponde a cada punto de los vrtices del polgono irregular.

Podemos insertar videos dentro de las imgenes, pero eso lo vemos en el siguiente captulo.

9.- Complementos y multimedia.

Ya hemos aprendido a insertar imgenes, que merecen una seccin aparte; continuamos con el multimedia. Podemos insertar un vdeo dentro de la imagen si el video tiene las mismas dimensiones. Para ello se usa el atributo dynsrc (dynanmic source). <img dynsrc="video.avi"> De esta forma, en lugar de cargar una imagen, cargar el vdeo. Si aadimos dynsrc, podemos aadir unos cuantos atributos ms: Loop="4", para repetir el vdeo 4 veces (o las que queramos) cada vez que termine. Si ponemos loop=infinite, el vdeo se repetir hasta que abandonemos la pgina. Loopdelay="2" indica el tiempo (en segundos) que esperar despus de terminar la reproduccin para iniciar la siguiente. Si no aadimos estos dos atributos, el vdeo solamente se reproducir una vez. Otros dos atributos son: start="fileopen" y start="mouseover", que como podemos deducir, significan comenzar cuando cargue la pgina y comenzar cuando se pase el ratn por encima respectivamente. La extensin del vdeo debe ser AVI o MPG, que garantiza que todos los sistemas podrn verlos. Si el navegador dispone de Plug-ins adicionales, podr ver otros como WMV, QTV, etc

Sin embargo, el atributo dynsrc no es la mejor manera de insertar un vdeo (ni mucho menos), as que se desaconseja totalmente su uso. En su lugar utilizamos el tag embed. El tag embed sirve para insertar un archivo (normalmente multimedia) con sus controles bsicos. Para insertar un audio podemos hacer <embed src="audio.mp3"> (por cierto, usad esta extensin si es posible). Nos dara este resultado en windows:

Para insertar un vdeo lo ponemos en la ruta. Especificar altura y anchura (que ya sabis cmo) no est de ms. El resultado ser un reproductor, como este:

Es conveniente especificar el tipo de archivo que insertamos, porque ayuda al navegador a identificarlo y a mostrarlo. <embed type="video/quicktime" src="pelicula.mov" width="340" height="140"> Al emebd podemos aadirle borde con border=x, y podemos aadirle los mrgenes con hspace y vspace, como en las imgenes. Si no tenemos el plug-in para reproducir el vdeo, el navegador lo detectar, pero si no puede, podemos aadir pluginspage=ruta, que es el sitio Web desde donde se descarga el plug-in necesario. ltimamente ha cado en desuso este tag para vdeos, puesto que todo el mundo inserta un vdeo de youtube o de otro sitio Web. Embed, por tanto, se ampla a cualquier tipo de archivo: swf, flv, etc Embed sirve para insertar cualquier archivo, no obstante, algunos objetos, requieren de ms datos (parmetros) para funcionar correctamente. En ese caso definiremos un objeto con <object> y aadiremos los parmetros (<param>) y el embed. Classid es la versin del programa que utilizamos y codebase el sitio Web desde donde descargar el plug-in. <object classid="clsid:D27CDB6E-AE6D-11CF-96B8-444553540000" id="obj1" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#ve rsion=6,0,40,0" border="0" width="300" height="400"> <param name="movie" value="ruta.swf"> <param name="quality" value="High"> <embed src="ruta..SWF" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/xshockwave-flash" name="obj1" width="300" height="400"> </object>

Este tipo de cdigos es difcil de memorizar, de forma que normalmente, o nos lo genera un programa automtico, o nos lo dan para copiar y pegar, o nos dan las instrucciones. Podemos insertar subprogramas hechos en Java en nuestra pgina. Java no es lo mismo que Javascript, Java es un lenguaje de programacin como C o Visual Basic, Javascript son cdigos basados en Java que se pueden insertar en HTML. Un subprograma java es la tpica aplicacin o juego que necesita cargar Java, como esta:

Nos suena, verdad? Para insertar uno de estos, primero tenemos que tener creado el archivo (lgicamente). Despus lo insertamos con el tag applet. Estas aplicaciones se llaman applets de java, y son archivos .class. Lo que escribamos entre <applet> y </applet> ser el texto alternativo que se mostrar. <applet code="Applet1.class" width="200" height="200"> Tu navegador no soporta este applet de Java </applet>

Quedan ms contenidos que podemos insertar, por ejemplo, controles Active-X. Los controles Active-X son componentes Web como calendarios o subprogramas de Microsoft. Ya han quedado obseoletos porque se sustituyen por controles similares y de mayor calidad. Todos son objetos (<object>). Podemos insertar marquesinas. Una marquesina es una banda por la que se desplaza un texto. El tag es <marquee>. Todo lo que escribamos entre <marquee> y </marquee> ser el texto que se desplaza, pero podemos insertar cualquier objeto. Todo lo que est entre marquee se desplazar. Podemos aadir los siguientes atributos: Por defecto el texto se desplazar de derecha a izquierda. Para cambiar esto ponemos el atributo direction="right". Por supuesto, podemos ponerle la altura y la anchura que queramos. Podemos definir el color de fondo de la marquesina con bgcolor. Hspace y Vspace definen los mrgenes de la marquesina igual que en las imgenes. De forma predeterminada, la marquesina se repite infinitamente. Para cambiar esto ponemos loop="repeticiones". Scrolldelay="x" es el tiempo que espera entre una posicin y otra en el desplazamiento. Scrollamount="y" es la cantidad de desplazamiento (Velocidad). Finalmente, podemos elegir tres tipos de deslizamientos: El desplazamiento normal es el predeterminado, no hay que poner nada. Para elegir deslizamiento pondremos behaviour=slide, y para que el texto cambie de sentido al llegar al final (Como una bola de ping pong) usaremos behaviour=alternate. La diferencia entre el normal y el deslizamiento es que el deslizamiento deslizar el texto hasta que se vea completamente y lo detendr, o si es muy largo, deslizar hasta

que se vea la ltima parte. Con el normal, todo sale por un lado, y TODO desaparece por el otro. He aqu un ejemplo:

Las marquesinas, junto con los Gifs animados, eran unos elementos muy utilizados en la antigedad (me refiero a hace unos aos), no solamente estaban en todas las pginas Web, sino que ABUNDABAN en ellas: estaban por todas partes. El motivo es que tras salir de una pantalla con ceros y unos en blanco y negro, estos efectos eran para el diseador Web algo que molaba. A quin no le suena esta escena?

Sin embargo, esto para el visitante es tremendamente molesto. Adems de ser intil y sumar kilobytes, es incmodo y disuasorio para que el usuario permanezca en la pgina. Evitad el abuso de estas cosas. Este tag, adems de estar cayendo en desuso, es poco recomendado, pero a mi me gusta para poner anuncios (avisos) o cosas por el estilo. La dosis hace el veneno, por una que ponga mi sitio Web no ser malo, pero hay que saber muy bien cmo ponerlas. Finalmente, solamente quedan controles de tipo galeras fotogrficas, contadores de visitas a la pgina y formularios de bsqueda interna, etc Todo esto se consigue con el tag <!webbot bot >. No es un comentario, es una etiqueta de PHP. Como no tenemos servidor, no merece la pena explicar nada, al menos todava. Vamos a pasar al siguiente captulo, y quiz explique algo de esto al final.

10.- Formularios.
Toda pgina Web que se precie tiene un formulario. Un formulario es un grupo de controles en los que el usuario puede introducir datos y dale al botn de enviar. Cualquier registro es un formulario donde tenemos que incluir nombre de usuario y contrasea. Eso es un formulario:

Este es un formulario de Google. La imagen entera es el formulario. El recuadro donde introducimos texto no es el formulario: es una parte del formulario. Esta informacin tiene que ser procesada por un servidor, y para eso necesitamos PHP. Sin PHP lo nico que podemos hacer es enviarlos a un correo electrnico, pero tampoco est tan mal. Si usamos php tendremos que colocar el tag webbot bot, si no, definimos directamente el formulario con <form></form>. Todo lo que vaya dentro de esas etiquetas se enviar. Cada uno de los rectngulos (cuadros de texto), botones, listas, etc se llaman campos de un formulario. Para insertar un campo la etiqueta es input, y en el atributo type definimos el tipo de campo. Vamos a usar tres atributos adems del id: method, action y enctype. En method hay dos valores posibles: post y get. Post es para enviar los datos, y get es para tomarlos. Como no tenemos PHP ni nada que nos los guarde, usaremos method="post". En action definimos lo que haremos con el formulario. De momento nuestra nica opcin es enviarlo por correo: action="mailto:fuckencio@loquesea.com". Enctype sirve para especificar de qu manera nos llegarn los datos. Si ponemos enctype ="text/plain", nos llegarn en forma de texto (lo que facilita su lectura). Tambin podemos poner el atributo autocomplete=on, que permitir al navegador rellenar los campos de forma automtica si empezamos a escribir. Es bastante til.

Por cierto, no os vayis a pensar que ese es mi correo de verdad, eh?.

Vamos a ver los diferentes tipos de cosas que podemos hacer en un formulario. Lo primero, y una de las cosas que ms me gustan y que poca gente conoce, es el grupo de campos. Un grupo de campos es un recuadro con un ttulo, que sirve para agrupar formularios de un mismo tema. Normalmente no son necesarios porque apenas se piden dos cosas, pero para registros completos o cosas as, viene muy bien. El tag es fieldset. Todo lo que vaya entre <fieldset> y </fieldset> estar recuadrado en el mismo grupo. Entre estos tags insertamos los campos que queramos y, convenientemente, insertamos un ttulo para el cuadro entre <legend> y </legend>. Podemos incluir fieldsets dentro de otros.

El resultado es satisfactorio. Ahora vamos a ver cmo insertar campos. El primero, un cuadro de texto simple. <input type="text"> Pero tendremos que aadirle ms atributos si queremos sacar partido de sus posibilidades. En primer lugar le ponemos un nombre name="nombre". Esto har que recibamos nombre = (datos introducidos) en lugar de simplemente lo que ha introducido el usuario. Es decir, si ponemos name="nombre_completo". Recibiremos nombre_completo= (datos introducidos por el usuario), lo que nos facilitar la administracin de los datos obtenidos. Vamos a poner un id al formulario (preferiblemente que coincida con

name), tanto para cambiar su estilo con CSS como para otras cosas, como lo que veremos a continuacin. Usamos size="20" para darle una longitud de 20 caracetres (poned el nmero que queris. El usuario, aun as, puede escribir muchos ms (simplemente no cabr el texto entero en lo que vemos, pero podemos seleccionar todo con el ratn, no s si me explico:

Aunque no se puedan ver todos de vez, podemos escribir tantos como queramos, y estarn ah y se enviarn. Si queremos, ahora de verdad, limitar el nmero de caracteres posibles, utilizamos el atributo maximum lenght (longitud mxima, en caracteres): maxlenght="50". Todos los formularios los podemos alinear con align. Podemos tambin ponerle un title para que se muestre el texto alternativo al posar el ratn sobre l. Podemos poner un texto predeterminado para que el usuario escriba a partir de ah: por ejemplo, si queremos que el usuario nos deje una direccin Web, podemos poner value=http://www. Y de esta manera, el usuario comienza a escribir en el campo con eso ya escrito. El usuario, al escribir, lo puede borrar, pero si no tiene que borrarlo, le hemos ahorrado una parte y por pequea que sea, lo agradecer.

Finalmente queda decir que podemos aadir el atributo autocomplete="on" y autocomplete="off" al campo individualmente. Los campos de texto y similares tienen dos opciones ms: disabled y readonly. Son dos atributos sin valor. Disabled significa deshabilitado, con ello no podr escribir en el campo. Readonly significa slo lectura: en l tampoco puede escribir, pero aparece como uno normal. No puedo estar poniendo tantas imgenes para todo. Insisto: probad los cdigos. No hay mejor forma para aprender que a ver qu pasa si quito esto, y si lo vuelvo a poner luego. El siguiente tipo de input es el campo de contrasea. Un campo de contrasea es idntico a uno de texto (y valen los mismos atributos), la diferencia es que al escribir en un campo de contrasea se vern asteriscos o puntitos, mientras que en el de texto vemos lo que escribimos. Para insertar uno de contrasea es <input type="password"> Si queremos insertar estos formularios sueltos queda muy mal. Debemos escribir para qu sirve cada formulario:

Vaya, no queda mal (y lo de que estn casi alineados es un puntazo, sin duda. No obstante, al recibir esto recibiremos el texto nombre y luego T1 = (Datos) tal y como hemos especificado en name. Para que esto no ocurra, y de paso quede una presentacin mejor, le podemos aadir una etiqueta al campo de texto. Esta etiqueta es el motivo por el cual hemos puesto id al campo de texto: la etiqueta <label></label> especificamos con el atributo for=id a qu formulario est enlazada:

El resultado es idntico (as que no lo pongo) pero, adems de tener un cdigo ms limpio y correcto, hace que recibamos los datos de una manera ms clara. Vemos ms cosas que podemos hacer: examinar y rea de texto. Podemos insertar un formulario que sirva para cargar un archivo. Esto ser un campo de texto con el botn de examinar para cargar la ruta del archivo. Cuando se enve el formulario, se enviar el archivo introducido ah. Podemos aplicarle los atributos de size, name e id. El tag es <input type="file"> Si queremos (por lo que sea) insertar un campo de texto que quede oculto para el usuario ponemos <input type="hidden"> esto crea un campo de texto, pero oculto para el usuario. Suele usarse muy poco, y cuando se usa, se hace con algn value, para incluir texto en l, o para mostrarlo posteriormente si el usuario acepta las condiciones y eso Finalmente, el rea de texto. El rea de texto es un cuadro de texto pero ms grande, donde se pueden escribir varias lneas. Es donde normalmente escribimos los comentarios de las pginas que visitamos. Este tag es especial: no se pone con input, sino directamente con el tag <textarea></textarea>. Le podemos aadir tambin disabled y readonly. Para crear un rea de texto, adems del id y del nombre, hay que especificar un alto y un ancho. Esto se hace con cols (columnas) y rows (filas), donde se especifica el nmero de caracteres por lnea y el nmero de lneas respectivamente. Con CSS podremos restringir la libertad de este campo (si se puede redimensionar y si se pude usar la barra de desplazamiento interna).

11.- Formularios (Parte 2)

Se estaba alargando el captulo e iba siendo hora de empezar otro para proseguir. Hay ms tipos de campos: en primer lugar tenemos las casillas de verificacin. Las casillas de verificacin son esos cuadraditos donde podemos poner un tick u otras cosas. Por ejemplo el tpico He ledo y acep (Y hasta ah ms o menos lee la gente). Puede que necesitemos estas pequeas casillas, as que utilizamos <input type="checkbox"> Le asignamos un nombre y un id. Si queremos que esta casilla est activada por defecto aadimos el atributo sin valor checked. Es muy importante poner un value="s" como atributo, porque cuando recibimos el formulario recibimos: name = value As que si ponemos name="No he ledo pero s acepto" y value="acepto", cuando recibamos el e-mail recibiremos: No he ledo pero s acepto = acepto

Otro tipo son los botones de opcin. En algunos casos pueden reemplazar a las casillas de verificacin. Los botones de opcin (Radio buttons) son esos circulitos donde si hacemos clic se les pone un puntito verde en medio. A diferencia de las casillas de verificacin, en los botones de opcin solamente se puede escoger una nica opcin. Esto hace que tengamos que agrupar una serie de botones de alguna manera: el nombre (name) de un grupo de botones de opcin es igual (de esta forma quedan agrupados), pero el id es, como no puede ser de otra manera, distinto, con lo que podemos asignarle etiquetas (label) independientes. Si queremos tener alguna seleccionada de forma predeterminada, ponemos el atributo sin valor selected.

Bien, creo que ya se ha entendido. Pasamos a lo siguiente:

Listas de seleccin. Todo el mundo ha visto esos formularios con una flechita que despliega varias opciones. Se llaman listas de seleccin y hay de dos tipos. Para ambas el tag es independiente: <select></select>. Cada opcin la encerraremos entre <option></option>, como en las listas, pero en vez de li, option. Si tenemos una lista larga de opciones, es conveniente que las agrupemos segn su temtica. Para agrupar un grupo de opciones las incluimos dentro del tag <optgroup></optgroup> Si queremos que ese separador lleve un nombre, ponemos <optgroup label=nombre> Normalmente tambin solemos querer evitar que el primer elemento sea seleccionado. Para ello hace falta un <!--webbot> Lo ensear en la parte de PHP. Por cierto, el ancho del campo de lista ser tan largo como la longitud de la opcin ms larga, es decir, el tamao de la lista de seleccin depende de lo largas que sean sus opciones:

No queda nada mal. An hay algn que otro atributo ms, pero esos son para javascript. Nos queda ver la otra posibilidad para este tag: nmero de opciones visibles y selecciones mltiples. En todas pone size=1, esto significa que solamente se puede visualizar una opcin, y es entonces cuando aparece la flechita hacia abajo. Si cambiamos esto, desaparecer la flechita y en su lugar aparecer una barra de desplazamiento. Podemos, si se ve ms de una opcin, permitir seleccionar varias opciones. Para ello se usa el atributo multiple (sin valor), y es opcional.

Como he puesto mltiple, puedo seleccionar varias opciones si mantengo pulsado Control. Esto no lo suele saber el usuario, as que indicdselo con un texto. Es importante que pongamos el atributo disabled a la primera opcin, para que no permita seleccionar la primera opcin, que suele se Elije o cosas por el estilo. Podemos incluir ms cosas en los formularios, como imgenes (me refiero a imgenes como campos de formulario). Para ello ponemos <input type=image border="0" src="ruta.jpg" name="I1" width="16" height="16"> Y lo ms importante en un formulario: los botones. Cmo vamos a enviar un formulario sin el botn enviar? Vemos cmo se hace: Para insertar un botn normal hay dos opciones: a) <input type="button" name="x" id="x" value=Texto> Esto crear un botn donde ponga Texto, para cambiar ese texto cambiamos el value. b) <button name="y" id="y">Texto del botn</buton> Esto crea un botn normal que no hace nada. Si metemos este botn dentro de un hipervnculo, al hacer clic nos llevar adonde vaya el hipervnculo. Est aparentemente bien porque tiene el efecto de que es un botn, pero no utilicis este mtodo! Para eso est javascript, lo veremos en su captulo Y hablando de javascript, os sorprendern las maravillas que podemos hacer con l para los formularios. Los botones diferentes e importantes son dos: el de enviar datos y el de borrar todo lo escrito en los campos del formulario. <input type="subimit" value="Enviar" name="E" id="E"> Esto crear el botn enviar (con el texto de value), no es un botn cualquiera, porque al poner type="subimit" establecemos que enviar el formulario a donde hayamos especificado en method y action. Para borrar todo lo que el usuario escrito puede ponerse un botn: <input type="reset" name="B" id="B" value="Borrar todo"> Esto crear un botn en el que ponga borrar (lo que pone en value) y cuando el usuario lo apriete se borrar todo lo que haya escrito y seleccionado en el formulario. No suele aparecer en las pginas Web, pero es un recurso que tenemos. Ya hemos visto todos los campos posibles. Me queda explicar dos cosillas tiles para agradar el visitante: tabindex y acceskey. Estos dos palabros son atributos que se pueden incluir en cualquier campo de cualquier tipo y son verdaderamente tiles. Cuando pulsamos el tabulador el cursor pasa automticamente al siguiente formulario. Si queremos alterar el orden de saltos, lo indicamos en tabindex. El

nmero que pongamos en el valor de tabindex ser la posicin (el orden) en el que el tabulador saltar a ese campo: <form method="post" action="mailto:fuckencio@loquesea.com" autocomplete="on" enctype="text/plain"> <label for="T1">Nombre</label><input type=text name=T1 id=T1 tabindex=1><br> <label for="T2">Contrasea</label><input type=text name=T2 id=T2 tabindex=3> <br><label for="T3">Apellido</label><input type=text name=T3 id=T3 tabindex=2> </form> Si probis este cdigo, comprobaris lo siguiente. Si yo me sito en el primer campo (nombre) con el cursor, y pulso el tabulador, el tabulador, en lugar de saltar al siguiente campo, saltar al tabindex="2" (el que est en 2 posicin), que es el apellido. Si vuelvo a pulsarlo ir al tabindex="3" (que es el de contrasea) y as sucesivamente. Pongamos tabindex o no, el tabulador siempre salta al siguiente campo. Esto es algo que el usuario no sabe, y muchos se quejan de que es un coazo eso de ratn teclado ratn teclado. Indicad al usuario que puede usar tab para desplazarse sin ratn, le alegraris la estancia en vuestra Web. El otro atributo interesante es el acceskey. Si nosotros definimos acceskey="x" para un campo de un formulario, cuando el usuario apriete alt+x se situar el cursor en ese campo. Es til a veces. Elegid siempre una letra (acceskey) que aparezca en la etiqueta (label) del formulario. Se suele poner la letra que es, subrayada en la etiqueta. Esto tampoco lo sabe el usuario, as que indicadlo con texto por algn sitio visible:

He abierto el documento y he pulsado alt+c, el cursor no estaba en ningn formulario y se ha puesto en el formulario de contrasea, tal y como hemos indicado con accesskey. No tenemos por qu definir el acceskey con la inicial del nombre (De hecho, podemos poner cualquier tecla), pero se recomienda que est dentro del label, para poder subrayarla. Recordad indicar al usuario que puede hacer esto, y procurad que ninguna combinacin de alt + letra coincida con una orden del navegador.

Ya hemos acabado con los formularios, usadlos segn vuestras necesidades. Pasamos a los marcos.

12.- Marcos en HTML

En HTML normal, y con el doctype que yo estoy usando, podemos aadir marcos. Qu son los marcos? Los marcos (frames) son divisiones de la pgina, y cada divisin alberga una pgina diferente. Los marcos sustituyen al body, es decir: o la pgina tiene contenido, o tiene marcos. Una pgina de marcos podra ser algo como Cabecera.htm Botones.htm Contenido.htm

La comparacin entre una pgina normal y una de marcos sera algo como: Normal De marcos <html> <html> <head><title>&nbsp;<title></head> <head><title>&nbsp;<title></head> <body> Marco arriba. Pgina=cabecera.htm Esto es una p&aacute;gina normal Marco a la izquierda pgina=vnculos.htm </body> Marco a la derecha pgina=contenido.htm </html> </html> Ahora que ya queda entendido, empezamos con los marcos. Estos marcos son tiles si queremos mantener un contenido fijo mientras otro vara, como mantener el mismo logotipo de cabecera. Para definir un marco usaremos <frameset></frameset> En l indicaremos si es vertical u horizontal, y en cada caso indicaremos la longitud de cada marco que especificaremos despus. Despus de cerrar </head> ponemos directamente el <frameset> (no hay body). Como atributo le ponemos rows si definimos marcos horizontales, y cols si son verticales. El valor de estos atributos es la altura o anchura de cada uno: </head> <frameset rows="64,*" frameborder="no"> <frame name="tit" scrolling="no" noresize target="contenido" src="ruta.htm"> </frameset> Aqu hemos dicho marcos horizontales, uno que mida 64 px, y el otro lo que sobre. En este caso hemos dicho frameborder=no, que har que el marco no tenga borde. Esto es opcional. Dentro de ese frameset definimos el primer marco con el tag frame. Le ponemos un nombre (esto es importante), y la ruta de la pgina que alberga en src. Noresize hace que el usuario no pueda cambiarle el tamao. Scrolling=no hace que no pueda

haber barras de desplazamiento en el marco. Target=contenido lo explicaremos ms adelante. Hemos puesto dos marcos horizontales, pero solo hemos definido uno. Si queris dos marcos horizontales, definid el otro <frame>. Yo no lo he hecho porque voy a rellenar el espacio de abajo con marcos verticales, y eso requiere otro frameset: </head> <frameset rows="64,*"> <frame name="titular" scrolling="no" noresize target="contenido"> <frameset cols="150,*"> <frame name="contenido" target="principal"> <frame name="principal"> </frameset> Nada que explicar aqu, podis deducir lo que significa. Lo de target= es muy importante: sirve para los hipervnculos. En target indicamos dnde se cargar la pgina a la que lleva el vnculo: target=nombre es lo especfico, los hipervnculos se abrirn en el marco que lleve en name nombre. Target="_self " (en el mismo marco) Target="_parent" (en el de al lado) Target="_top" (en el de arriba) Esto tambin vale para hipervnculos sueltos (aunque estemos en una pgina normal con body). <a href="tal.htm" target="_self"> En la misma pgina <a href="tal.htm" target="_newtab"> En una pestaa nueva <a href="tal.htm" target="_blank"> En una ventana nueva Esto es muy importante saberlo. Ahora que ya sabemos lo de los marcos, voy a explicarlo ms detenidamente: Noresize (no redimensionable) es un atributo sin valor, indica que la altura del marco no puede ser modificada por el visitante, el marco est totalmente fijo. Podemos aadir los atributos <frameborder="0" o frameborder="1" segn queramos que el marco tenga borde visible o no. Tambin podemos darle color al borde con bordercolor. No hay que olvidarse jams de src="pgina_cabecera.htm" que ser la pgina que se muestre en el marco (Recordad, con src). Sin embargo, lo ms importante de un marco si lo queremos para lo ms habitual es target. Tarjet (objetivo) especifica el marco donde se abrirn sus vnculos. Si ponemos al marco de debajo el nombre abajo (name="abajo"), podemos poner en el marco de arriba tarjet="abajo". De esta forma, todos los hipervnculos que estn en el marco de arriba, en lugar de cargarse en la pgina entera, se cargarn en el marco abajo porque lo hemos seleccionado con target. Por eso es importante definir un nombre para cada marco.

Para frameset cols es exactamente igual. 150,*, uno de 150 y dejamos lo que sobre (*). Tambin lo podemos poner en porcentajes del rea de navegacin, esto es til ya que hay usuarios con otra resolucin de pantalla, pero si definimos un porcentaje sin scrolling los marcos aparecern cortados sin posibilidad de ver el resto del contenido con la barra de desplazamiento. Vemos ahora el tag <noframes><body></body></noframes> Este tag contiene a body. Noframes significa no marcos, y es lo que se muestra cuando el navegador no permite marcos. Si no permite marcos, se muestra un body en la pgina. En ese body se suele escribir un mensaje como Esta pgina utiliza marcos, pero tu navegador no los admite. Ningn navegador ha quedado tan obsoleto, pero por si acaso, se pone. As se hacan muchas pginas Web cuando no exista HTML dinmico (DHTML). Esto ya no se usa. El DHTML ha reemplazado completamente a todo lo que hacen los marcos, con lo cual ahora se usan mucho menos. Sois libres de usarlos, y de hecho, si algn da necesito un marco, el doctype con frameset me lo va a permitir, y seguro que lo uso. Hay un tipo de marco que s se va a seguir usando: el marco flotante. Un marco flotante es un marco cuadrado o rectangular que se encuadra en una parte de la pantalla. Este marco sirve, por ejemplo, para insertar contenidos de otras pginas en la nuestra. Para insertar un marco flotante usamos el tag iframe. Le podemos aadir los mismos atributos que a los marcos normales: name, id, scrolling y noresize. El src es, lgicamente, imprescindible. Adems, a este le tendremos que poner width y height. Podemos aadirle tambin hspace y vspace. Pginas como Google maps permiten insertar el contenido de su Web (en este caso, el mapa) dndonos para copiar el cdigo de un iframe con la ruta. Probadlo:

13.- Tags olvidados:

Ya hemos visto todo lo que tenamos que ver de HTML normal. Enhorabuena: ya podemos crear una Web sencilla (y un sitio Web entero tambin). Antes de proseguir, me gustara mencionar la definicin y uso de algunos tags que he olvidado mencionar a lo largo del curso, pero que no son demasiado importantes: <abbr>: Este tag sirve para definir una abreviatura, un grupo de siglas, un acrnimo etc. Si encerramos esa abreviatura entre estos tags, al posar el ratn, aparecer el nombre completo: Segn dicta la <abbr title="Organizacin de las Naciones Unidas"> <u>ONU</u></abbr> De esta manera, al pasar el cursor por la palabra O.N.U. aparecera lo que hemos puesto en title. El tag <acronym> (acrnimo) funciona de la misma manera, exactamente igual. <address> </address> encierra los datos de contacto para contactar con el dueo o con el autor de la pgina. Es poco usado, pero no est mal. El resultado es un texto en cursiva separado del resto. Suele ponerse al final de un documento, especialmente en secciones de contactar. Entre estos tags incluimos un prrafo con saltos de lnea donde ponemos nombre, direccin, correo y telfono, por ejemplo. El address solamente sirve para darle un formato especial, pero el contenido es el que pongamos nosotros. <base>. Este tag se coloca en head, y abarca las direcciones (rutas) en las que el navegador debe buscar los archivos que insertamos. De manera predeterminada las busca en el sitio Web. Esto lo podemos cambiar con base. Tambin nos permite establecer el target predeterminado para todos los hipervnculos. <base href="http://www.sitioweb.com/images/" target="_blank"> Con este cdigo establecemos que todas las rutas debe buscarlas en la direccin de href, y que los hipervnculos debe abrirlos en ventanas nuevas (target=_blank) <basefont> se coloca en head y permite especificar la fuente predeterminada para todo el documento con los atributos face (tipo de letra) size (tamao) y color. Este tag apenas lo reconocen los navegadores modernos, y est obsoleto. <bdo></bdo> tiene otra funcin. Con el atributo dir cambia el sentido del texto, esto sirve para poner texto en rabe o hebreo. <bdo dir="rtl">Texto</bdo> rtl=(right to left, derecha a izquierda). El resultado sera otxeT. <caption></caption> Sirve para ponerle un ttulo a una tabla. Se pone despus de table y antes de definir la primera fila. El texto entre <caption>y </caption> ser como un ttulo para la tabla.

<colgroup> <col>. Sirven para darle un mismo estilo a varias columnas de una tabla: <colgroup> <col span="2" style="" > <col style="" > </colgroup> Con span=2 definimos que el grupo es de dos columnas. En cada columna (<col>) podemos definir un estilo con CSS en style. <del></del> e <ins></ins>. Del encierra un texto equivocado. El texto que pongamos entre estas etiquetas aparecer tachado, y lo que vaya dentro de <ins></ins> aparecer subrayado, como cuando fallamos al escribir en un examen y tachamos algo. Podemos aadir el atributo datetime y el valor lo ponemos en formato YYYY-MMDDThh:mm:ssTZD (Ejemplo 1995-05-22T20:32:35GMT+1) en ambos tags. Esto es para indicar cundo fue borrado o cambiado el texto. Esto es bastante chorrada con perdn de la expresin. Simplemente est ah, y podemos personalizar el resultado con CSS, aunque a m personalmente me parece ms intil que el codo de un playmobil <samp> </samp> Es para insertar una muestra de otro programa. El resultado es texto con apariencia de cdigo. <kbd></kbd> Hace lo mismo, pero se supone que sirve para mostrar texto capturado del teclado, es decir, mostrar algo que ha sido escrito por el usuario. <var></var> sirve para nombrar una variable. Estas tres suelen usarse en cosas como listas de definiciones (<dl>) <noscript></noscript>. Los cdigos de javascript (js) y VisualBasicScript(vbs) se llaman scripts. Despus de insertar scripts, podemos poner este tag, que sirve para contener el mensaje que se mostrar si el navegador no permite scripts. Es muy improbable que se d esta situacin, pero el tag es ms viejo que los navegadores actuales. <thead><tbdoy> y <tfoot>. Estos tres tags sirven para definir cabeceras, cuerpos y pies> en las tablas. Entre <thead></thead> escribimos las filas que formarn parte del encabezado de la tabla, entre <tbody> y </tbody> pondremos el cuerpo de la tabla y entre <tfoot> y </tfoot> el pie de la tabla. Esto solamente sirve para aplicar estilos con CSS a estas partes. Un resultado que podramos obtener sera este: Lo verde pertenece al thead, lo azul al tbody y lo rojo al tfoot. Como veis solamente sirve para eso (lo cierto es que no es especialmente til, pero mi deber es enseroslo.

Estos son todos los tags que me haba dejado. Hemos terminado el HTML. Enhorabuena. Ya podis hacer una Web simple en HTML. No obstante, si aspiris a cierto nivel, necesitamos ver las capas, el CSS y algo de javascript. En los siguientes captulos explico estas cosas y os dejo algunos cdigos tiles.

14.- DHTML: Capas.

DHTML, o HTML dinmico es una ampliacin del HTML constituida por las capas y por CSS. Gracias a estos dos elementos el nmero de posibilidades que nos ofrece HTML aumenta de una manera radical. Lo importante del HTML y de las capas es el CSS, as que este captulo va a ser breve. Una capa en HTML funciona de la misma manera que funciona en un programa de diseo grfico. Una capa es una seccin de forma rectangular que podemos mover por encima del documento. Si yo tengo una capa, esa capa es independiente del resto del body, y la puedo superponer por encima de otros elementos, porque es una capa que va encima, la puedo mover libremente, es como si estuviera encima del resto de la pgina. Puedo aadir tantas capas como quiera y colocarlas donde me plazca. Ahora que tenemos en mente el concepto de capa, vamos a pensar ms bien que una capa es simplemente una seccin que podemos mover a lo largo del body, y no tiene por qu quedar por encima. En las capas podemos insertar exactamente lo mismo que insertamos en body: cualquier tag. Al fin y al cabo, una capa es una seccin, una divisin, de body. Esa divisin se usa normalmente para aislar contenido y de lo que sera una pgina normal. El tag para insertar una capa es <div></div> (de divisin). Os suena? Efectivamente, es el que utilizamos para alinear texto que no est en prrafos: <div align=center></div> A fin de cuentas, lo que estamos haciendo es aislar esa parte del texto en una capa nueva y colocar la capa en el centro, de manera que el resultado es texto en el centro. Las capas nos ofrecen mucho ms juego: podemos darles fondo, posiciones cualquiera y muchas cosas ms. Todo lo que encerremos entre <div></div> pertenecer a una capa nueva, y esa capa podremos posicionarla en cualquier punto, podremos cambiar su color de fondo y podremos modificar todas sus propiedades con CSS. Las capas han sustituido a las tablas para maquetar. Antes se usaba una tabla donde el contenido estaba en la celda central y los extremos se redimensionaban porque su anchura estaba en porcentajes. Hoy en da, lo que se hace es posicionar una capa en el medio de la pgina con el fondo que sea, y esa capa se ajusta al rea de navegacin. Por qu uno y no otro? Teniendo en cuenta que normalmente se utiliza un mismo estilo de presentacin para todo el sitio Web, ocupa mucho menos cdigo usando capas que usando tablas. Buscamos la velocidad de carga, as que si es ms econmico usar capas, se usan capas, y adems son ms fciles de manejar y menos complicadas de modificar, especialmente en cuanto a presentacin. Para poder maquetar con capas y dems, necesitamos CSS. En el siguiente captulo vamos a ver, por fin (redoble) las CSS.

15.- DHTML: Introduccin al CSS.

CSS significa Cascading Style Sheets (Hojas de estilo en cascada) o tambin se traducen como Cascade shell styles (temas y estilos en cascada). CSS es un cdigo escrito en otro lenguaje y sirve para cambiar el estilo a diferentes elementos de la pgina Web. Con CSS puedo definir un estilo para todo el body, y puedo definir estilos X que podr usar cualquier atributo, etc. Podemos crear estilos con CSS que se apliquen a todas las pginas del sitio Web, lo cual nos facilita mucho el trabajo, y sobre todo, ofrece estilos de presentacin no disponibles en HTML normal. A propsito, Qu es eso de cascada? Muy sencillo, cuando definimos un estilo en CSS, ese estilo afecta a todos los sub-estilos. Si ponemos un tag con un estilo, todos los tags diferentes que vayan dentro de l tambin tendrn el mismo estilo (a no ser que lo cambiemos, evidentemente). La cuestin es que los elementos secundarios arrastran los estilos de sus elementos principales. En resumen, CSS es otro tipo de cdigo (diferente que el HTML) y sirve para dar estilos y formatos a elementos del HTML. Llevamos todo el curso hablando de l. Lo hacemos porque el HTML ha evolucionado con l desde su aparicin, y ha permitido convertir una pgina Web en un formato que puede contener cualquier cosa que puede contener un documento de Word o de Power Point (lo que antes no se poda hacer), y ms efectos que mejoran la Web de manera considerable. A todo esto hay que sumarle el gran ahorro de lneas de cdigo (y por tanto, de kilobytes). Son todo ventajas. Vamos a usar CSS en todo y para todo. De verdad? No necesariamente: evidentemente si nos ocupa menos cdigo definirlo de manera normal, casi que no merece la pena usar CSSdesgraciadamente este no suele ser el caso; lo primero porque es muy difcil que se d esa situacin (sera crear pginas de un nico elemento), y en segundo lugar, porque solemos aplicar el mismo estilo a todas las Web y siempre ocupa menos definirlo una vez (aunque sea un poco largo) y que valga para todas, que definirlo veinte veces, una para cada subweb. Consecuentemente, aunque me queris matar, os lo digo: de todo lo que habis aprendido a lo largo del curso, la mitad es intil. La mitad no se usa porque se sustituye por CSS, pero sigue leyendo: En realidad no ha sido en absoluto intil, lo primero porque este curso es de HTML (y no de CSS), con lo que ya has completado el curso. Lo segundo, porque para saber hacerlo con CSS hay que saber hacerlo en HTML y por supuesto, hace falta saber HTML para usar CSS; y en tercer lugar, porque nunca est de ms saber (Quin sabe? A lo mejor necesitis alguna vez algo de aquello anterior). El CSS es muy parecido al HTML, as que no habr problema en aprenderlo. CSS nos permite:

1. Definir estilos para un tag o un atributo. Esto significa que para todos los casos, lo que est dentro de ese tag tendr el estilo marcado. Si damos un estilo a body, la pgina entera tendr ese estilo. Si damos un formato al tag table, todas las tablas tendrn ese formato, etc. Todo lo que est dentro del tag al que hemos aplicado un estilo adquirir su mismo formato. 2. Aplicar un estilo a un elemento segn su identificador (id), es decir, aplicar un estilo al elemento que queramos simplemente especificando el id de ese elemento. Si defino un estilo para el id x, al elemento que le ponga x se le aplicar el estilo. 3. Crear un estilo de nombre cualquiera, y despus, definir <tag estilo=cualquiera>. Nos permite crear un estilo y aplicarlo a todos los elementos que elijamos. Esto es crear un estilo que puedan usar varios elementos diferentes del tipo que sean. Parece que CSS nos puede facilitar las cosas, pero slo si lo aprendemos bien. Parece que no es para tanto no? Ms de 50 hojas y resulta que slo es esto Bueno, al final os voy a dar unos cuantos cdigos de CSS que cambiarn vuestra opinin. Haced un acto de fe hasta entonces: primero hay que aprender CSS. Existen tres maneras de usarlo: Escribir el cdigo CSS en un programa de texto y guardarlo como archivo .CSS. Luego, desde la pgina Web, insertar el archivo CSS. Usad este si queris aplicar el mismo estilo a varias pginas Web. Escribir el estilo en head, entre los tags <style></style> (hacedlo si solamente queris definir estilos en una pgina) Escribir el cdigo directamente en el tag: <tag style=cdigo CSS> usad esto si solamente vais a usar CSS para este elemento en toda la Web y el cdigo es corto.

Para insertar el CSS en la Web tenemos que poner en head lo siguiente: <link rel="stylesheet" type="text/css" href="ruta.css"> Y ponemos en href la ruta del archivo CSS. Pero vamos, al lo: Cmo se escribe el cdigo CSS? Es muy sencillo: en primer lugar, las abreviaturas ya no estn presentes. CSS escribe palabras completas (pero no nos libramos del ingls). Su sintaxis se basa en nombrar un elemento y definir un estilo para ese elemento. El estilo va entre llaves. El elemento que se nombra es el que recibe el estilo, y se llama selector. Hay tres tipos de selectores; podemos definir los estilos para los tres tipos de casos que hemos visto: el tag, el id, o crear una clase. El estilo va entre llaves y se llama declaracin. La declaracin consta de varios elementos que pueden tomar un estilo, a esos se los llama propiedades, y el estilo que tienen es el valor. Entretente en leer esto despacio, pero si no queda muy claro que es lo ms probable- ejemplo al rescate:

Vamos a ver un ejemplo. Si yo quiero definir un estilo para todos los prrafos, voy a definir un estilo para el tag <p>. De esta manera todos los prrafos tomarn ese estilo (ya que todos utilizan el tag <p>). Estoy, por lo tanto, definiendo un estilo para un tag, porque quiero que todos los tags homnimos tengan ese estilo. Para definir el estilo de un tag, se pone lo que va dentro de los signos mayor qu y menor que, es decir <> no se pone, y recordad: el estilo entre llaves. p { aqu va el estilo } Esta es la sintaxis para el CSS. Voy a aprovechar para explicar cmo poner comentarios en CSS, para ponerlos yo y que as entendis mejor los cdigos. En CSS los comentarios se ponen igual que en C, C++ etc. Si son de una sola lnea, basta con poner dos barras inclinadas y a continuacin el comentario. // Esto es un comentario de una sola lnea en CSS; aunque no es el mejor mtodo Y es que el mejor mtodo es el mtodo general (aunque solo lo usemos para una lnea): el comentario se abre con una barra y un asterisco, y se cierra al revs: /* Esto es un comentario en CSS */ Y podra ocupar las lneas que quisisemos hasta que lo cerrsemos. Continuemos: para definir cada estilo de la etiqueta lo ponemos de la siguiente manera: dentro de las llaves ponemos la descripcin del elemento que vamos a modificar (por ejemplo: color de fondo), y separamos el valor con dos puntos. Y lo ms importante de todo: poner un punto y coma al final. Si no ponemos el punto y coma estar mal. Olvidrselo es un error frecuente y desespera cometerlo porque no encontramos el fallo hasta que nos damos cuenta al mirar minuciosamente (es algo que no se ve a primera vista): ojo con eso. Un ejemplo y su explicacin: h1 {color: #FF0000; } Con esto habramos definido que los encabezados sern de color rojo. Analicemos el cdigo bien: he definido un estilo para los encabezados, por lo que le doy un estilo a todas las etiquetas h1. Como le quiero dar un estilo a todas esas etiquetas, defino un estilo para h1, y lo hago ponindolo sin los <>; de esta forma consigo que a todas las etiquetas h1 les afecte el estilo. El estilo lo pongo entre llaves. Dentro del estilo (que va entre llaves) defino una propiedad, es decir, una parte a la que le puedo dar formato, en este caso, es el color. El valor de esa propiedad lo separo con dos puntos en lugar de con un igual, luego, dejo un espacio y escribo el valor. Lo cierro con un punto y coma (importantsimo) y como ya no quiero cambiar nada ms, ya cierro la llave. Releed esto varias veces para entenderlo del todo, aunque creo que est bastante claro.

Fcil no? Pensad que sin haber aprendido HTML no entenderamos nada de esa frase, as que no ha sido un esfuerzo intil. El punto y coma sirve para finalizar propiedades, y para separarlas, as que podemos darles todas las que queramos: body { background-color: #FFFFFF; color: #666666; font-size: 10pt ; } (Este cdigo solo es de ejemplo, tranquilos, no teneis por qu entender todo todava. Lo pongo para que veais que para un tag puedo modificar todas las propiedades que quiera.

Podemos aplicar todos los estilos que queramos a la vez, siempre y cuando estn dentro de las llaves. No olvidis el punto y coma del final. Podemos escribirlo todo seguido o con saltos de lnea o con tabulaciones, eso es indiferente. Como el punto y coma sirve para finalizar elementos, podemos ponerlos seguidos, lo importante es el punto y coma de separador. As definimos elementos para un tag. Y si solo queremos hacerlo para tags que estn dentro de otros, y que si estn sueltos no? Los ponemos a continuacin: div p { /*Esto hara que solo tomaran el estilo los prrafos (p) que estuvieran DENTRO de las capas (div). Los prrafos que se encuentren fuera de las capas no recibirn el estilo: solamente los que estn dentro de la capa */ } Y si queremos que solo sea para un atributo, ponemos el tag y el atributo. Para definir los nfasis dentro de tablas usaramos table strong {}, as primero el navegador comprueba si el elemento est en la tabla, y luego si est en el nfasis. En resumen, para que solo afecte a unos tags que estn dentro de otros, los ponemos seguidos.

Para definir el estilo de un elemento concreto pondremos, en lugar del tag, una almohadilla (#) y el id del elemento al que queremos dar formato

#tabla1 { /* Aqu pondramos los estilos */ } Luego, en el cdigo, si ponemos <table id=tabla1 > Esta tabla ser afectada por ese estilo, porque lo hemos definido para que el elemento cuyo id sea tabla1 reciba el estilo.

Si finalmente, queremos definir un estilo global, ponemos un punto y el nombre del estilo. Esto es definir una clase, y podremos hacer que cualquier elemento tome ese estilo con class=nombre:

.clase1 {/*estilos*/} Y luego en el cdigo <p class=clase1>, de esta forma, el prrafo tomara el estilo definido en clase1. Esta clase se puede aplicar a cualquier elemento ya varios, mientras que el id solo al elemento que tenga ese id, y solo hay un elemento con ese id (porque no se pueden repetir ids); pero class=clase1 lo podemos poner en tantas etiquetas como queramos. As funciona CSS, parece sencillo, pero se va a ir complicando un poquico CSS no solamente nos va a permitir mejorar nuestra presentacin y hacer cosas que solo Word podra hacer, sino que nos va a dar muchas ms opciones, entre ellas: Cambiar el cursor de la Web Maquetar con capas Colocar cualquier elemento en cualquier lugar de la Web Sustituir texto por imgenes y que quede bien alineado Poner solo los bordes que queramos en los elementos, y de cualquier tipo de borde. Cambiar los mrgenes que considerbamos intocables Cambiarle la sangra a los prrafos Crear botones alineados de forma que queden barras de vnculos Sustituir a los marcos gracias a que CSS permite insertar una cabecera y una barra lateral en todas las Web que indiquemos.

Y muchas cosas ms, todo eso, reduciendo cdigo y tamao del archivo.

16.- Dar estilos con CSS.

Vamos a ir captulo por captulo sustituyendo todo lo aprendido por CSS. En primer lugar, vamos a aprender a darle el formato a todo lo de body. A partir de ahora la etiqueta body no tendr ningn atributo (excepto eventos de js). Con CSS podemos definir directamente la imagen, el color de fondo, el tipo, color y tamao de la letra, y cualquier otra cosa. Vemos cmo: body { background-color: #00F; /* Por cierto, recordad que todo es en minsculas */ } Esto sirve para poner el azul de color de fondo, como es lgico. Os preguntaris por qu he puesto tres letras: si solamente ponemos tres caracteres, el navegador sobreentiende que se repite cada uno: 00f = 0000FF. Hay ms mtodos para indicar el color, por ejemplo, en porcentajes o valores de rgb, entre parntesis: color: rgb(0%, 0%, 100%); o rgb(0,0,255). Yo prefiero la forma tradicional, que ocupa menos, adems. Podemos poner una imagen de fondo, escribimos url y entre parntesis la ruta de la imagen. Podemos ponerle otros atributos adems de la imagen de fondo. body { background-color: #00F; background-image: url(fondo.gif); } Ojo con el punto y coma del final. Bien, ya sabemos que si la imagen es demasiado pequea, se repetir en mosaico. Por fin podemos cambiar esto: ponemos en la propiedad background-repeat uno de los siguientes posibles valores: repeat (Repetir en mosaico), no-repeat (no repetir), repeat-x (repetir solo en horizontal) y repeat-y (repetir solo en vertical).

body { background-color: #00F; background-image: url(fondo.gif); background-repeat: no-repeat; }

Eureka, hemos conseguido que el fondo no se repita. Si hemos seleccionado que se repita y queremos hacer eso de bgproperties=fixed, ponemos attachment: fixed, en contraposicin a attachment: scroll; body { background-color: #00F; background-image: url(fondo.gif); background-attachment: fixed; /* Con esto ltimo establecemos bgproperties=fixed para el fondo.gif */ } Por esto cobra sentido poner un fondo y una imagen a la vez: por donde no se repita la imagen, se ver el fondo. Vamos a pensar un poco: si la imagen no se repite, es como insertar una imagen simplemente, no? Pues podemos aprovechar eso y utilizar ese fondo como imagen normal; podemos posicionarla con position y sus valores, y podemos darle altura y anchura con width y height. body { background-color: #00F; background-image: url(fondo.gif); background-repeat: no-repeat; background-position: 50% 0%; /* Con esto ltimo insertamos la imagen en la mitad verticalmente (eje X), y arriba del todo (0%) horizontalmente. Ntese que los porcentajes solo se separan con un espacio */ } Todo esto, si lo queremos para insertar imgenes, se hace en capas nuevas, de momento, nos quedamos con el background-color, el background-image y el repeat. Hemos especificado el color de fondo para que si acaba la imagen se muestre ese color de fondo. Como no se repite la imagen, los huecos que queden se vern con el color de fondo. Si, ahroa al revs, queremos que una imagen ocupe todo el fondo, podemos especificar sus magnitudes X e Y (en pxeles, en porcentaje, etc..) con background-size: body { background-image: url(fondo.gif); background-size: 100% 100%; /*Esto hace que la imagen ocupe toda la pantalla*/} Creo que se ha visto ya, pero para dar formato, la propiedad que queremos cambiar y la parte del formato van separadas por un guin. Esto significa, si quiero cambiar el COLOR del fondo, pongo fondo guin color (background-color: ) si quiero cambiar la IMAGEN de fondo, pongo background-image etc

Vamos a ver cmo cambiar las fuentes. Como el tag era font, ahora ser la propiedad. body { font-color: #F00; font-family: "times New Roman", "Arial"; font-size: 14pt; } Con font-color especificamos el color de la forma que queramos, a mi me gusta el hexadecimal, pero podis usar la que queris. En font family especificamos el tipo de letra que vamos a usar, hay que ponerlo entre comillas. Si ponemos varios hay que separarlos por una coma. Ponemos varios porque si el usuario no tiene instalad la primera fuente, la ver en la segunda, y as sucesivamente. Finalmente, el font-size especifica el tamao. Hay muchas maneras de indicar el tamao: En porcentajes (pero no en este caso), en centmetros (cm), en milmetros (mm), en pulgadas (in), en picas (pc) [1pc = 12pt]Y lo ms importante: en puntos, en pxeles y en coeficiente. Un punto equivale a 1/72 de una pulgada. El texto normal lo escribimos en 12 puntos (12pt). Esto lo indican los coeficientes. Al igual que en HTML, size=3 es 12pt, size=7 es 48pt Finalmente, podemos usar medidas menos exactas, medidas relativas. Son el em, el ex y el pxel (px). El pxel? S, porque cada pantalla tiene una resolucin diferente. Todos los pxeles no son iguales, por eso, aunque muchas veces coinciden con los puntos, es preferible usar puntos. El em equivale a la anchura de la de letra M mayscula (que es cuadrada) la anchura de la M de referencia se toma de la fuente predeterminada del sistema o de la que hayamos establecido antes. Si mi fuente predeterminada es times new Roman, de 12pt, 1 em = 12pt. As de simple. El ex es lo mismo, pero equivale a la anchura de una x minscula. Vamos a ver formatos para los prrafos. En primer lugar, la alineacin. Podemos usar text-align para alinear los prrafos, y cualquier otro texto dentro de un elemento: p { text-align: justify; } Como podemos suponer, podemos usar left, center, right o justify (Creo que no hace falta poner la traduccin, o bueno, en realidad estoy escribiendo ms as que si os pusiera la traduccinda igual, que ya sabis ingls, narices). Otra cosa que nos ofrece CSS y HTML no nos ofrece es indentar los prrafos. Indentar consiste en aumentar la sangra de la primera lnea. <p style=text-indent: 10em;> (Me imagino que sabris usarlo del resto de maneras). Y para los formatos del texto: text-decoration, que puede tomar los valores de bold, Italic, underline, line-through, y overline. (Estos dos ltimos significan tachado y suprarrayado respectivamente. Tambin podemos darle un formato especial a la primera letra del prrafo, para ello podemos espeficar una parte de la etiqueta p:

p:first-letter {} Con eso le podemos dar formato a las primeras letras de los prrafos. Si queremos que solo lo haga para una, lo ponemos como un id, y si lo queremos para varias, como una clase. Quedan dos cosas por decir: el espaciado (letter-spacing) nos permite definir el espacio entre dos caracteres. El interlineado (line-height) nos permite definir la dsistanccia entre dos lneas de texto. Ponedlos en prctica, y buscad que quede bien. Vaya, s que ha cundido el captulo, eh? Con lo que hemos aprendido aqu ya sabemos cmo dar formato al texto. Por si no habais cado en la cuenta, os comento que con todo lo que hemos aprendido de background-color para el texto, color, fuente, tamaoya podemos personalizar tambin las etiquetas stong y em, as como muchas otras. Vamos a ver qu podemos hacer con las listas, tablas, imgenes, hipervnculos. Como ya he terminado la hoja y me queda hueco, voy a poner en prctica lo que he explicado, para ayudaros a entenderlo bien. body { background-color: #333; background-image: url(fondo.gif); background-repeat: no-repeat; background-attachment: fixed; text-align: center; font-color: #fff; font-weight: bold; font-size: 14pt; } En este cdigo le he dado formato a mi pgina entera, porque he definido el estilo para body. He puesto un color gris de fondo. He insertado una imagen de fondo que no se repetir, y he colocado ese bgproperties=fixed. El texto ser blanco, en negrita y de tamao 14, y aparecer centrado. He usado font-weight en lugar de text decoration. El font-weight es preferible para la negrita y para la cursiva.

#parrafoespecial { background-color: #fff; font-color: #000; text-indent: 10px; letter-spacing: 0.2em; line-height: 1.2 em; }

En este otro caso, he definido un estilo para un prrafo que tendr como id parrafoespecial. En este prrafo concreto he puesto el fondo blanco (resaltado en blanco sobre el fondo gris anterior). Para que sea legible, devuelvo el color negro a la letra. LE he puesto un indentado de 10 px para ponerle sangria de 10 px a la primera linea, y he aumentado el interlineado y el espaciado.

17.- Hipervnculos y tablas con CSS.

Podemos con CSS darle efectos especiales a los hipervnculos. Podemos definir estilos para la etiqueta <a> de manera que todos los hipervnculos reciban ese estilo. No obstante, es interesante que demos un formato distinto a cada posicin del hipervnculo: el hipervnculo normal (link), el que ya ha sido visitado (visited) el que est activo (es decir, justo al hacer clic: active) y uno nuevo que no estaba en HTML: al posar el ratn sobre el hipervnculo: hover. a{ font-family: "Trebuchet MS"; font-size: 12px; color: #FF0000; } a:link { text-decoration: underline; color: #00f; } a:visited { text-decoration: underline; color: #00f; } a:hover { text-decoration: none; color: #f00; } a:active { text-decoration: underline; color: #800; } Ntese que para un estado de una etiqueta se especifica con dos puntos y el estado (sin espacios) justo despus de la etiqueta. As, el estado active de la etiqueta a se representa con a:active para darle un estilo a esa posicin. Ahora si probis el cdigo, observareis cmo cambian los hipervnculos segn su posicin. Atencin a eso de text-decoration: none; porque anula cualquier formato por defecto, es importante saberlo para el futuro. Bien, ahora supongamos que esto solamente lo queremos poner para un hipervnculo determinado. En ese caso, deberamos definirlo segn el id. Para definirlo a la vez como etiqueta y como id, ponemos el id inmediatamente despus de la etiqueta, con su almohadilla (Como siempre). Eso quiere decir para la etiqueta a con el id tal, tcnicamente con el id basta, pero no nos permite aplicarle estados de la etiqueta si ponemos solo el id). a#vinculo { color: #04f; } <a id=vinculo></a> y de esta forma tomar el estilo solamente ese hipervnculo.

Y si queremos ese estilo para varios hipervnculos pero no para todos? Pues definimos una clase, con el punto y el nombre de la clase: a.vinculo { <a class="vinculo"></a> Y todos los hipervnculos que tengan font-family: "Trebuchet MS"; class="hiprvinculo" tomarn ese estilo. font-size: 12px; color: #000000; } O tambin podemos ponerlo al revs: primero la clase y despus la etiqueta: .vinculo a:hover { font-size: 18px; background-color: #000000; } Y podemos ponerle estados a cada una de las posiciones de los hipervnculos si ponemos el estado despus de la etiqueta (como antes), aunque est el id o la clase: #vinculo a:hover {} (para ids) o .vinculo a:hover (para clases)

Esto es todo sobre los hipervnculos, vamos con las tablas

Para las tablas hay cientos de cosas que podemos hacer con CSS, una de ellas ya la hemos visto: contraer el borde. Si eres como yo, y no te gusta ese doble borde en 3D, puedes usar esto: border-collapse:collapse; A una tabla le podemos dar las alineaciones que queramos, y tambin altura y anchura, pero no solo a la tabla entra, tambin a una celda en concreto. Recordad que con que se lo demos a una celda, la altura le afectar a toda la fila y la anchura a toda la columna, as que no repitis cdigo en valde: usad un id simplemente. td#celda { height: 50px; width: 30px; vertical-align: middle; align: center; } No obstante, a veces no termina de funcionar correctamente eso del valign, de modo que nos puede quedar un resultado como este:

Para evitar esto, CSS al rescate: podemos aplicar el cellpadding a una sola celda, lo cual har que podamos centrar el texto. Podremos tambin darle una altura a la celda, de forma que no nos quede una ms grande que la otra: tr {height: 50%;} /* El 50% de la altura de la tabla para esta fila */ td {padding: 5px; } /*Espacio entre contenido y borde (padding) de 5px*/ Y de esta manera, tantatachn, nos da un resultado como este, sin duda mucho mejor:

Esto va a reemplazar a insertar filas vacas (sin ni siquiera &nbsp;, que servan para dar mrgenes) y tambin a la tpica imagen de 11 transparente que se usaba antes para dar mrgenes. Vamos a dejar una cosa clara, por si no lo estaba: el margen (margin) es la distancia que hay entre el objeto y el resto de elementos (el margin de un texto sera la distancia entre el borde del texto y la lnea de texto anterior); el padding es la distancia entre el borde del objeto y lo que compone el objeto. En una tabla, el padding sera la distancia entre el borde de la celda y el texto. Aplicar un table { padding: 5px;} hace que el padding sea de 5 px en todos los sentidos. Si queremos valores diferentes para cada uno, podemos especificarle la direccin con un guin, as: td#celda { padding-top: 3px; /* el superior*/ padding-left: 4px; /*el de la izq. Lo mismo con bottom para el de abajo y right para el derecho */ } No hace falta decir que podemos usar todo lo referido a la fuente (texto), y al color de frente y de fondo, aqu en las tablas. (Ya sabis, el background-color, el text-align, y todo eso). Todas las propiedades de CSS valen para todos los elementos del HTML. Otra cosa que nos ofrece CSS es darle a la tabla diferente formato a cada borde: color (con color), estilo (con style), anchura (width): border-right-width: 1px; border-bottom-width: 1px; border-right-style: solid; border-bottom-color: #EBE9BC; Esto sirve para cualquier elemento (porque todo se puede recuadrar). Una forma de comprimirlo es poniendo todo en orden, separado por espacios: anchura, estilo y color:

p {border: 1px solid #000;} y tambin para cada borde (left, right, top y bottom). P {border-bottom: 1px solid #00f;} Por cierto, este ltimo de aqu, a efectos visuales, es un subrayado de otro colorno? Ah lo dejo. El caso es que podemos personalizar el formato de cualquier borde individual. El estilo de borde es borde simple (solid), punteado (dotted), de rayas (dashed) etc Aqu tenis todos los estilos posibles: http://www.w3schools.com/cssref/pr_border-style.asp Estas opciones se pueden aplicar no solo a tablas: a cualquier elemento que tenga borde o pueda tenerlo. Con todo esto que sabemos, el objetivo es crear una tabla atractiva. Si la tabla es simplemente para ordenar informacin, podis darle el formato que sea ms conveniente. Si la tabla es, por contra, para ordenar varias series de datos, es conveniente que le demos un estilo diferente. Esto de aqu es una tabla para ordenar datos, puesto que el texto ms grande es algo que comparte con el Texto A y Texto B, no es un esquema, pero ordena la informacin. Este tipo de tablas es simple, y no necesita formatos especiales. Si, por el contrario, queremos hacer una tabla de datos ms elaborada, como esta, recomiendo que tengis una imagen de tipo 3D para las cabeceras (th), para que podamos ponrselas de fondo. Es muy interesante alternar el color de fondo de las filas (uno blanco, otro azul claro, por ejemplo), porque ayuda a distinguir una fila de otra. Esto es til para no confundir el dato correspondiente a una fila con el de la fila de arriba o con la de abajo. Esto se consigue creando una clase para las celdas pares (donde se les da un color claro) y una clase para las celdas impares (que se les da uno oscuro). Este sera un resultado. Evidentemente, si la lista est en vertical, lo que debe llevar diferentes colores alternos son las columnas. No seis horteras, elegid los colores en la gama de la tabla. Vamos a ver dos efectos ms: El valor empity-cells: show; mostrar las celdas que estn vacas. Si en lugar de show ponemos hide, las ocultar. Esto se puede aplicar a otros elementos, y lo cierto es que con JS es un recurso muy usado eso de desplegar - ocultar. Finalmente, un efecto muy til para orientar al usuario en tablas complejas de datos, consiste en cambiar el color de la fila por donde pase el ratn. De esta manera, cuando la fila cambia de color (si hay contraste) el usuario ve rpidamente qu datos corresponden a esa entrada, y no se puede equivocar con la fila de arriba o con la de

abajo. Para ello tenemos que aplicarle el efecto cuando el ratn pase por encima, es decir hover. tr:hover { background-color: #C00; } De esta forma, todas las filas se iluminarn en un rojo ligeramente oscuro al pasar el ratn sobre ellas. Si tenemos una tabla en vertical...pues la hemos liao O a lo mejor no. Si miris el captulo doce veris que hay un tag llamado colgroup que nos permite agrupar columnas. Podremos hacer un col: hover, y ya est. Da juego esto del CSS, verdad? Por lo que respecta a las tablas ya est todo. Vamos a ver imgenes y formularios con CSS.

18.- Efectos en imgenes y formularios con CSS.

Ya sabemos cmo darle formato a una imagen con CSS (lo tpico del border color, etcheight, width, vertical-space, align.). #img1 { border-width: 1px; border-color: #555; height: 25px; width: 25px; vertical-space: 12px; margin-left: 50px; } Y muchas cosas ms. A propsito, se me haba olvidado decir que podemos ponerle un icono a nuestro sitio Web. Este icono aparecer en la barra de direcciones y si creamos un acceso directo a nuestra Web. Para ello ponemos en head: <link rel="Shortcut icon" href="ruta.ico"> Podemos hacer otras cosicas chulas en las imgenes; por ejemplo, podemos sustituir ese lowsrc tan anticuado por una imagen animada de cualquier tamao que ponga cargando. Si tenemos una gif animada que simule la carga de la imagen (como el video que se est cargando de youtube) se la podemos poner de fondo para la imagen, de forma que se vea hasta que se cargue la imagen encima: img.loading { border: 1px solid #000; background: url("cargando.gif") no-repeat center center; } Esto le pone una imagen de fondo a la imagen. Las CSS van en head, y son de lo primero que se carga, de manera que mientras se carga la imagen buena, la imagen de fondo ya est ah, y se muestra la imagen de cargando mientras se carga la otra. Podemos usar todos los recursos del fondo, por ejemplo, el no repetir, la alineacin, y especialmente, el tamao del fondo (background-size: ;) que nos permite darle al fondo las dimensiones que quermos: poned las de la imagen y se cargar justo encima. Se pueden conseguir efectos espectaculares con las imgenes. Uno de ellos, y de los mejores, es que una imagen cambie de manera atenuada al posar el ratn sobre ella: Insertamos dos imgenes del mismo tamao en una capa, a la que le aplicaremos un estilo con CSS (No teneis que entender todo todava, haced un acto de f y Control C, control V). <div class="demoIMG"> <img class="novisible" src="ruta_imagen1"> <img class="visible" src="ruta_imagen2"> </div>

Despus le aplicamos este cdigo CSS. Lo que har ser colocar una imagen encima de la otra y ocultar la segunda. Despus podremos seleccionar con hover que al posar el ratn se convierta en una capa visible. Para eliminar la visibilidad de una imagen le daremos opacidad: 0, que significa transparencia 100%. .demoimg { position: relative; height: 330px; margin: 0 auto; width: 500px; } .demoimg img {position:absolute; left: 0; top: 0; } .demoimg img.novisible {opacity:0;filter:alpha(opacity=0);} .demoimg:hover img.novisible {opacity:1;filter:alpha(opacity=100);} .demoimg:hover img.visible {opacity:0;filter:alpha(opacity=0);} .demoimg img.visible:hover {opacity:0;filter:alpha(opacity=0);} Con este cdigo intercambiamos la opacidad de ambas imgenes cuando el ratn pasa por encima de la capa. Este otro cdigo har que la transicin sea progresiva: #demoimg img { -moz-transition: all 1s ease-in-out; -webkit-transition: all 1s ease-in-out; -o-transition: all 1s ease-in-out; transition: all 1s ease-in-out; } Tenis ms cdigos similares aqu: http://vagabundia.blogspot.com/2011/04/transiciones-con-css-e-imagenes.html Explorad esa pgina, porque vienen efectos de texto muy interesantes. Por supuesto, podemos aplicar todos estos efectos a reas de mapas de imagen, simplemente creando estilos y clases para el tag area.

Formularios: Ya hemos visto cmo dar efectos interesantes a las imgenes, pero CSS nos ofrece cientos de posibilidades para mejorar la apariencia de nuestros formularios (si los hay) Esto es lo ms importante del captulo. En las imgenes lo nico que puede haber interesante es personalizar las imgenes para la posicin de hover, y ya sabis cmo ponerles bordes y cambiar otras cosas, as que no hay mucho ms. Vamos con los formularios: En primer lugar, est bien hacer coincidir los colores con los del tema de nuestra Web. Si usamos en nuestra Web rojos y blancos, estara muy bien que los

formularios tambin los tuvieran. Podemos darle un formato al borde de fieldset as: #f1 { border: 1px solid #900; width: 450px; } Y en el HTML, evidentemente, el id tendr que ser ese: <fieldset id=f1>. Tambin le podemos dar formato a la leyenda, con las mismas propiedades que para un texto normal: #f1 legend{ font-weight: bold; font-size: 12px; font-color: #f00; } Es muy importante darles a los botones un formato similar. No cambiis la gama de colores a mitad del formulario. #f1 input.boton1 padding:3px; color:#FFFFFF; background-color:#900; border:1px solid #000; } Esto lo que hace es aplicarle esas propiedades (texto blanco, fondo rojo, etc) a los botones que tengan especificada la clase que hemos creado. (Probad este, que queda muy bien). Con #f1 definimos que el estilo va a ser para el formulario (entero) que lleve por id f1. Con input.boton1 hemos definido que para las etiquetas input dentro del formulario f1, definimos una clase (con el puntito) que se llama boton1. En el HTML tendremos que poner, por lo tanto, el formulario con el id correspondiente, y aplicarle la clase botn1 a los botones que queramos que tengan ese formato. <form id="f1"> <input type="subimit" class="boton1"> Podemos darle la altura y anchura que queramos a los campos y a las etiquetas, pero para que quede centrado tendremos que especificar un padding. Muy interesante para los formularios es, no solo darle formato al fondo que los contiene, sino cambiarles el fondo a los propios campos. Me refiero a sustituir la caja en blanco por una imagen sobre la cual escribir. Esta imagen debe parecerse al campo de texto, lgicamente.

Simplemente ponemos al campo la imagen de fondo, y listo: .txt input { background-image: url(ruta.png); background repeat: no-repeat; /* Podemos especificar altura, la anchura y el padding */ } Podemos cambiarle o quitarle el borde al formulario con border:none, border:solid etc Todo esto puede cambiar si el ratn pasa por encima (:hover) y si estamos con el cursor para escribir en el formulario. El tener el cursor en el formulario significa que tenemos el formulario seleccionado con el cursor, y si escribimos algo se escribir en l. Sabis no? Este estado se llama enfocado (:focus) input:focus{ background-color: #FFFFCC; } input:hover{ background-color: #CCFFFF; } Est muy bien el usar ese color amarillo claro para el focus. Ojo con este cdigo. Las hojas de estilo son en Cascada: Si ponemos el hover despus de definir el focus, cuando el usuario haga clic en el formulario, el cursor todava estar sobre l, y se mostrar el estilo de hover aunque ya est el formulario seleccionado. Si ponemos el hover antes que el focus (que es lo lgico) no hay ningn problema.

He aqu la importancia del orden en nuestros estilos. Probad esos dos casos. Podemos (si no lo he dicho antes) aplicar el mismo estilo a dos elementos separndolos por comas: input:focus, textarea:focus{ background-color: #FFFFCC; } Y hablando del textarea, en este hay unas cosillas que se pueden hacer: las barras de desplazamiento. En primer lugar, la propiedad overflow: dice si se muestran o no las barras de desplazamiento. Sus valores pueden ser auto, scroll, visible y hidden. No hace falta explicar.

Podemos, que esto es lo mejor, cambiar el color de los elementos de las barars de desplazamiento: scrollbar-phase-color: #FDCF66; scrollbar-highlight-color: #FDCF66; scrollbar-3dlight-color: #FDCF66; scrollbar-darkshadow-color: #FDCF66; scrollbar-shadow-color: #FDCF66; scrollbar-arrow-color: #FDCF66; scrollbar-track-color: #FDCF66;

Por supuesto, esto tambin se puede aplicar a la pgina entera si lo ponemos en body. El problema es que esto solo personaliza barras con la apariencia del Windows 98. (En Windows solamente, claro). Esto se puede mejorar, cambiandolas por las imgenes que queramos, y modificando la posiciond e los botones de las flechas, pero es demasiado avanzado, y requiere de otros lenguajes de programacin. Y otra cosa que podemos hacer con CSS, y con esto termino en la parte de formularios, es cambiar el formato de los elementos de las listas de seleccin: es tan simple como dar formato al tag option, o crear clases para cada <option> etc option#a {background-color: #ff0;} option#b {color: #00f; option#c {color: #f0f; option#d {color: #0f0;} <option selected>elije</option> <option id="a">opcion 1</option> <option id="b">opcion 2</option> <option id="c">opcion 3</option> <option id="d">opcion 4</option>

Y este sera el resultado:

No est mal, eh? Para hacer ms cosas con los formularios (y mejores) necesitaremos javascript.

19.- Maquetar con Capas y CSS.

Sin embargo, maquetar con capas es lo ms importante de CSS. Antes se utilizaba una tabla que cubra body para organizar los datos. Como las celdas tenan el tamao especificado en porcentajes, se redimensionaban automticamente. Esto se haca antes, pero cada tabla ocupa una cantidad de cdigo desmesurada: cada tr, con cada tantos tds, con sus ids y dems Es mucho mejor usar un archivo CSS para todas, en la que se especifique la posicin de cada tipo de capa. El ahorro puede ser de ms de 200 lneas de cdigo por pgina, lo cual es muchsimo (unos 20 kb ms rpido que se cargar, 20kb en cada pgina es mucho). Para maquetar usaremos capas (<div></div>) Estas capas son simplemente rectngulos en los cuales insertamos contenido de HTML, como marcos, pero en lugar de mostrar otra pgina, muestran cdigo, muestran una parte de body. Tenemos pensado un diseo de nuestra pgina por adelantado, si no, lo pensamos. Entonces dividimos ese diseo en partes independientes. Si yo tengo una idea de una imagen de cabecera que aparezca siempre, y una barra de vnculos a la izquierda, se acabaron los marcos. Yo creara, en un principio tres capas, con la misma forma que los marcos. En cada una insertara su contenido correspondiente:

Si yo he usado marcos, se supone que es porque hay partes invariables. Es ms fcil que eso:

En la capa de la cabecera (capa 1), lo que voy a hacer es insertar una imagen fija. Esto lo voy a hacer con el truco del principio: voy a ponerle un fondo que no se repita. A efecto visual, es como insertarla imagen. Voy a ponerle a esa capa el id cabecera. #cabecera { background-image: url (ruta.png); background-repeat: no-repeat; height: ~ //Pondremos la altura de la imagen width: ~ //Pondremos la anchura de la imagen, para que no aparezca cortada. margin: 0 auto; //Para centrar la capa en el centro (luego lo vemos) } Recordad que intervienen ms propiedades como el margen, el padding, etc Si yo este cdigo que acabo de escribir lo aslo en un archivo aparte, todas las webs que tengan <div id=cabecera></div> tendrn arriba la imagen de cabecera (evidentemente, si a esas Web tambin les inserto el mismo archivo css). Repito: con solamente, nica y exclusivamente insertar en la Web <div id=cabecera></div>, se pondr la cabecera, porque en el archivo CSS (Comn a las webs) hemos puesto lo que debe llevar esa capa. Nos hemos ahorrado un frameset. *Nota: es conveniente que la cabecera entera sea un hipervnculo a la pgina principal: <div id="1" title="Esta capa contiene el hipervnculo"><a href><div id="cabecera"></div></a></div>

Ya tenemos lo ms importante hecho. Esto es el tipo de maquetacin ms simple. Recordad que tenemos el div align=center para centrarlo, sin embargo, hay otra forma mejor, que la vamos a ver ahora. Ahora supongamos que queremos poner la barra de vnculos en vertical. Esto ya es algo ms complejo. Hay que usar la propiedad float. Antes de eso, he de explicar los tipos de posicionamiento de una capa. Una capa puede tener cuatro tipos de posicin: absoluta (Absolute), relativa (relative), fija (fixed) y esttica (Static). Vamos de fcil a difcil: Position="static" es la que viene por defecto. Esa situar a la capa como cualquier otro elemento: justo despus de lo que haya antes, como si la capa fuera otro prrafo.

Position="fixed" mantendr a la capa en un lugar fijo de la pantalla, aunque nos desplacemos con el ratn. Ese lugar lo habremos especificado con los mrgenes. Position="absolute" mantendr a la capa en un lugar fijo del rea de navegacin, es decir, posicionar a la capa en un lugar fijo de nuestra pgina. Position="relative" inicialmente se coloca en su lugar correspondiente (Como en static), pero esto se compensa con los mrgenes y los dems datos. El espacio que le correspondera en static queda vaco, y la capa est desplazada, por encima de las letras (capa independiente). Este tipo de capas son las que se usan como contenedores. *Probad qu pasa al cambiarle la posicin a la capa. <div style="position: absolute;"> TEXTO DE LA CAPA</div>. Teneis que darle mrgenes y dems. Tambin podeis probarlo aqu: http://www.w3schools.com/cssref/tryit.asp?filename=trycss_position_absolute Vamos a ver la propiedad float de CSS: float va acompaado de un valor de alineacin (center, right, left, top, bottom). El float lo que hace es posicionar la capa en esa alineacin (la capa, o cualquier otra cosa); y una vez en esa posicin, hace que el resto de contenido la rodee. Esto quiere decir, que si yo coloco una capa normal y otra a la derecha, pasa esto:

Si lo que hago es ponerle a la primera float: left, el resto de contenido rodear a esa capa:

El problema de usar el float es que saca a la capa del plano de la pgina. Como decamos: igual que photoshop, al crear una capa nueva, esa capa es independiente, y flota por encima del resto de elementos. Si usamos float, la capa deja de ser como un prrafo para convertirse en capa independiente. El problema es si queremos que esa capa termine antes de otra. Por ejemplo, si queremos que una barra lateral termine, y luego insertamos otra horizontal. Si hemos usado float: left, la capa lateral pasar por encima del resto de capas que haya en su camino, porque es independiente de ellas. Esto se puede corregir dndole a la capa de abajo (es decir, sobre la que el float pasa por encima) el atributo clear: both;

Vamos a ver el cdigo CSS: #barra { background-color: #333; width : 200 px ; padding : 10 px ; float : left ; } HTML: <div id ="barra"> <h3> Barra </h3> </div> <div id ="pie"> <p> Pie de pgina </p> </div>

Con esto, la capa barra pasara por encima de la capa pie. Para que esto no pase, ponemos # pie { clear : both ; } Y ya tenemos la capa a medida, porque el clear: both anula el efecto del float previo. Esto es todo, ya sabemos cmo maquetar con capas. Ahora lo difcil ser meter el contenido correctamente en ellas, pero todas las capas pueden estar colocadas en su posicin ahora. Imaginad un diseo para vuestra Web en paint, y creadlo con los floats. Recordad que un salto de lnea se interpreta como un espacio en el cdigo HTML. Si te quedan separadas puede que sea por ello. No se muestran las capas? Recordad que una capa es como una celda: no puede estar vaca. Mnimo un &nbsp; Un cdigo de ejemplo: div.izq{ background-image: url(ruta.png); float: left; padding-top: 10px; padding-left: 2%; width: 23%;}

<div class="left"><p>&nbsp;</p></div> Por supuesto, para el contenido, se crea otra capa con float center o right (dependiendo de si hay ms capas o no). Y se le dan mrgenes, anchura etc para rellenar el hueco. Utilizar float:center no es demasiado correcto, en su lugar se prefiere usar margin: 0 auto;. Colocar el auto hace que el mrgen sea igual a ambos lados, con lo que el resultado es una capa (o un elemento) centrado.

Os dejo probando esos cdigos. No es fcil, pero si est bien escrito, tiene que funcionar. Vamos a ver cmo insertar ese hipervnculo en la cabecera: Podemos establecerle un fondo a la etiqueta h1, o crear una capa nueva. El texto lo vamos a sustituir por una imagen. <div id ="cabecera"> <h1><span> <a href =" ... " title =" ... "> Texto</a> </h1></span> </div> A la capa de la cabecera le ponemos las dimensiones de la imagen que queremos mostrar. Le quitamos el margin y el padding a todo. # cabecera { background : url(cabecera.png ) top left no-repeat ; width: 600px ; //pon el ancho de tu imagen height: 100px ; //pon la altura de tu imagen padding: 0px ; margin: 0px ; } Hacemos lo mismo con h1 para que midan exactamente lo mismo. # cabecera h1 { margin : 0 px ;} Nos queda darle formato a Span. Span es una etiqueta que no significa nada: simplemente sirve para afectar a un segmento de cdigo para poder darle formato con CSS. # cabecera a span { visibility : hidden ; }

Esto es, si has encerrado el vnculo en un span, para poder ocultar el texto. Lo que yo recomiendo es que el texto del hipervnculo sea un espacio (&nbsp;) y ponerle un textdecoration:none. De esta forma es un espacio vaco y sin subrayar, invisible. Ahora solo falta el hipervnculo. Ahora mismo, el hipervnculo solamente sera el texto invisible (un espacio). Para que sea toda la imagen, aadimos display: block; que lo explico en el siguiente captulo. Hasta entonces, simplemente copiar y pegar. Adems, hemos de quitar los mrgenes y el padding, as como la decoracin del texto, para que no salga una lnea de subrayado: # cabecera a { display: block; width: 600px; height:100px; margin: 0px; padding: 0px; text-decoration: none; } Listo, ahora la imagen entera es un hipervnculo. Pero y este lo? Explico: lo que hemos hecho es poner de cabecera de la pgina un titular h1. A ese titular h1 le hemos puesto de fondo la imagen de la cabecera. El texto del h1 es el hipervnculo a la pgina principal. Hemos ocultado el texto del hipervnculo, para que solo sea vea la imagen. Display block har que en lugar de ser el texto, la imagen entera sea el hipervnculo. El motivo de hacerlo as lo explicar junto con la propiedad display, de momento, os adelanto que es porque el incluir una capa dentro de un hipervnculo no es demasiado correcto. A veces no queremos que sea la imagen entera, sino solamente una parte de la imagen (donde suele estar el logotipo). No hay problema: en lugar de aplicarle esto a la imagen, se lo aplicamos al rea del logotipo, creando un mapa de imagen. Si queremos que la imagen cambie segn el estado del cursor, hay que crear imgenes nuevas para cada posicin, y lo de siempre: a:hover background a:active background

20.- La propiedad Display.

La propiedad display significa disposicin, y nos va a permitir distribuir los elementos de manera atpica. Es realmente til. Lo mejor para entenderlo es, como casi siempre, un ejemplo: los elementos de una lista se disponen por defecto verticalmente, es decir, uno encima de otro. Con la propiedad display podemos hacer que se dispongan de manera horizontal, por ejemplo. Podemos cambiar su disposicin. Podramos decir que todos los elementos del HTML son capas rectangulares, rectngulos, dispuestos en orden. Un prrafo al fin y al cabo es un rectngulo en el que hay texto, una imagen es un rectngulo, todo son rectangulos. Podemos clasificar los elementos del HTML segn el tipo de rectangulo que sea: de bloque (block) o alineado (inline). Los elementos de bloque son elementos que interrumpen el rectngulo anterior, los elementos alineados no lo rompen. A ver si me explico: Un prrafo es un elemento de bloque, sin duda, porque un prrafo nuevo no se puede insertar en medio de otros elementos sin que quede aparte, de lo contrario, es simplemente texto diferente. No se puede insertar un prrafo dentro de un texto y que quede el resto seguido. Texto que estaba escribiendo Esto es un nuevo prrafo <p> sigo con el texto. Pero no puedo hacer que un prrafo est en medio de este texto. Esto no puede ser un prrafo nuevo. Porque el prrafo es todo, y eso es una parte del prrafo con otro formato.

Un hipervnculo es un elemento alineado (inline), podemos insertar un hipervnculo en medio del texto, y el bloque no se rompe, como si fuera un prrafo. Bien, ahora que se ha entendido (espero), hay muchos valores posibles para la propiedad display, pero los ms comunes son cinco: none, block, inline, inline-block y list-item. Display: none, hace que no aparezca ese elemento (lo oculta). Display: block hace que ese elemento aparezca como un bloque, rompiendo el flujo de maquetacin. Display: inline hace que el elemento se coloque en linea con lo que estabamos escribiendo. Display: list-item es como display block, pero con una vieta de lista; y finalmente, display block-inline lo coloca en lnea, pero lo trata como un bloque. Esto es algo difcil de explicar, especialmente el ltimo. Os sugiero que probeis este cdigo:

Cadena de texto <span class="dsp">interrumpida por este span</span> y que sigue por aqu. Eso lo escribs en el HTML. En el CSS poneis: .dsp { background-color: #F99; /* Para verlo ms claramente */ display: none } Probad qu ocurre al cambiar la propiedad display. De acuerdo, creo que ha quedado bastante claro. Vamos a recuperar el cdigo css del vnculo de la cabecera: # cabecera a { display: block; width: 600px; height:100px; margin: 0px; padding: 0px; text-decoration: none; } Ese display: block sirve para convertir el hipervnculo en un bloque. El hipervnculo, por defecto, es un elemento alineado (no rompe la cadena), de modo que si ponemos un hipervnculo en la cabecera, solamente ser hipervnculo el texto del hipervnculo. Le habamos establecido al vnculo una altura y una anchura, pero solamente el texto de esa rea sera el vnculo. Si convertimos el vnculo en un bloque, el rectngulo entero es el hipervnculo. Ese es el motivo de que hayamos puesto ah ese display block. Hemos usado aquel cdigo por lo siguiente: acabamos de ver que un hipervnculo es un elemento alineado, y las capas son bloques. Si insertamos un elemento de bloque dentro de un hipervnculo, no es demasiado correcto, porque el hipervnculo deja de ser alineado. El navegador lo entiende, pero no es la mejor opcin. Esto tiene una utilidad tambin para las listas. Display: block convierte a los elementos de una lista en rectangulos completos. Si el elemento de una lista es un hipervnculo, si ponemos display:block el rectngulo que encuedra al texto ser el hipervnculo, en lugar de solamente el texto. Si tenemos una lista horizontal y queremos el mismo efecto, usamos display: inlineblock, esto lo que hace es poner los elementos horizontalmente, pero cada elemento es un rectangulo, no solo el texto. Esto es todo, espero que gracias a estos ejemplos lo hayais entendido.

Y, jum, parece que esto es bastante interesante para crear BOTONES. S, en efecto, amigos: terminamos CSS ya con los cdigos para crear botones y barras de vnculos con ella. Os dejo la pgina del W3C por si queris ms informacin de la propiedad display: http://www.w3schools.com/cssref/pr_class_display.asp

21.- Listas con CSS. Botones y barras de vnculos.

Lo prometido es deuda (y el dinero tambin), as que por fin, os voy a decir cmo personalizar el estilo de nuestras vietas. Con la propiedad list-style-type: podemos definir el tipo de lista que queramos, pero esta vez, con css, disponemos del valor none, que hace que los elementos de la lista no tengan vieta: #id ul li { list-style-type: none;} Con esto se borra la vieta, pero queda el hueco. Si queremos eliminar ese hueco, le ponemos mrgenes negativos. (margin-left: -10px; por ejemplo). Si queremos poner nuestra propia imagen, le ponemos la imagen de la vieta como fondo. La imagen no se repite, as que el resultado ser como haber insertado la imagen de la vieta. Si la imagen es ms grande, aumentad el Padding hasta que la distancia entre el lmite de la imagen y el texto sea de vuestro agrado: #id ul li { list-style-type: none; background-image: url(imgs/bullet1.gif); background-repeat: no-repeat; padding-left: 2px; } De esta manera ponemos las listas personalizadas. A un elemento de la lista le podemos dar un formato diferente para cuando se pase el ratn sobre ellas [ ul li:hover {;} ]. Si queremos que un elemento de la lista sea un hipervnculo, pero que el hipervnculo sea todo el rectngulo, en lugar de solo el texto del hipervnculo, aadimos a la lista display: block;. Podemos aadirles bordes de diferentes colores y tipos, imgenes de fondo, etc Todo lo que se puede aplicar a cualquier objeto se puede aplicar a una lista. Eso es de lo ms importante de las listas. Las listas normales tal y como vienen en HTML se usan realmente poco en la Web, pero las listas personalizadas con CSS abundan por todos los lados. En primer lugar, las listas sin vieta suelen usarse para reemplazar el contenido de las tablas, ya que ocupa mucho menos cdigo: en lugar de definir filas y celdas, basta con definir li y ponerle a la lista (ul) el estilo dado en CSS. La otra funcin de las listas es crear barras de vnculos. Ms del 99,99% de las Web poseen barras de vnculos. Si son normales, se hacen con CSS, y eso es lo que vamos a ver.

Para hacer un men vertical, vamos a crear una lista (porque de esta forma se pone cada elemento de manera ordenada y en vertical. A cada elemento de la lista le

daremos un fondo y lo convertiremos en bloque, de manera que cada elemento de la lista sea un rectngulo (bloque) con formato, y parecer un botn. Creamos una capa que contendr la barra de vnculos. Dentro escribimos la lista: <div id="men"> <ul id="ulmenu"> <li>Inicio</li> <li>Quines somos?</li> <li>Contacto</li> </ul></div> Por ejemplo. Ahora, vamos a personalizar el estilo de esta lista con CSS. En primer lugar, vamos a posicionar la capa, y la vamos a emplazar a la izquierda con float: left, para que la lista que est dentro aparezca a la izquierda. Le daremos a la capa la altura y la anchura deseadas. Dentro de esa capa va la lista. Vamos a darle formato a esta lista. Quitamos las vietas con list-style-type: none. Si queremos otra vieta, se la ponemos de background, si no (como suele ser el caso), ya est. Le ponemos el Padding que queramos, y una vez esto, ya podemos darle formato para que parezca un botn: # menu ul { list-style-type : none margin: 0 px; padding: 0 px; width: 200 px; background-color: #333; } Le damos la fuente que queramos, y todo lo dems. Importante: definid bien el ancho para que los bloques no ocupen toda la capa, sino solamente la anchura del botn. # menu ul li a { color: #ccc display: block; text-decoration : none; padding: 10px; } Hacemos lo mismo para la posicin hover y para la posicin active. Dadle un color ms claro para hover, y ms oscuro para active. Probad este cdigo:

body {color: #fff; background: grey;} div#menu { float: left; } ul#ulmenu { /*estilo a la lista entera */ list-style-type : none ; margin: 0 px ; padding: 0 px ; width: 200 px ; background-color: #333; border: 1px solid #fff; } li { /*Estilo para posicin normal */ border: 1px solid #fff; margin: 1px; display: block; padding: 5px; } li:hover { /*al pasar el ratn por encima*/ background-color: #666; } li:active{ /*Al pulsar con el ratn */ background-color: #222; }

</head> <body> <div id="men"> <ul id="ulmenu"> <li>Inicio</li> <li>Quines somos?</li> <li >Contacto</li> </ul></div> </body> <!-- al darle formato a ulmenu le quitamos la lista a las vietas y los mrgenes. Especificamos la anchura de 200 px, para que no ocupen toda la capa. Ponemos de fondo ese gris oscuro y un borde blanco. Definimos un estilo para cada vnculo, que ser el elemento de la lista. Cada elemento de la lista (li) lleva otro borde, as que se juntan los dos y crea un doble borde. Los consideramos como un bloque y ponemos el padding correspondiente. Para hover y active le cambiamos el color de fondo. Como son en cascada, el borde y lo dems lo hereda, slo especificamos lo que cambia. Personalizad este cdigo como queris -->

Un efecto excelente, verdad? Se supone que cada <li></li> contiene un hipervnculo, evidentemente. Lo bueno de aislar este CSS, es que nos permite asignar un estilo para el hipervnculo y otro para el elemento segn el id. En la pgina principal, deberamos deshabilitar el vnculo de Inicio, e indicar que est deshabilitado con otro color. Bien, esto est bien si queremos hacer una barra de vnculos con color de fondo simple. Si tenemos las imgenes de los botones, y queremos hacer la barra de botones, no hay problema: sustituimos el background-color por background-image y ponemos en cada caso la imagen del botn correspondiente. Recordad: si lo hacis as, cread el botn normal, el botn de hover (brillante), el de active (oscuro) y el de deshabilitado (gris). Un problemilla que tiene CSS es que cargar estas imgenes segn las vaya necesitando, si la imagen es de alta resolucin, puede haber un momento en el que aparezca negro hasta que se cargue la imagen. Esto lo podremos solucionar con Javascript. Evidentemente, si usamos imgenes, habr que poner un cdigo diferente para cada una:

#barralateral ul li a#inicio {background-image: url(botones/1.png); } # barralateral ul li a#qnsms {background-image: url(botones/2.png); } # barralateral ul li a#contact{background-image: url(botones/3.png); } Y lo mismo para hover, para active y para el que no lleve hipervnculo: # barralateral ul li a:hover#inicio { background-image: url(botones/1h.png); } # barralateral ul li a:active#inicio { background-image: url(botones/1h.png); } # barralateral ul li a#iniciodisabled { background-image: url(botones/1h.png); } Lgicamente, en la pgina que deshabilitemos el enlace, pondremos al elemento de la lista un id diferente, y ponemos el hipervnculo normal en los dems. Ya hemos visto cmo hacer barras de vnculos. Estn geniales, no? Nos queda ver la opcin ms comn: una barra de vnculos horizontal. Es exactamente igual, solo que habr que poner display:inline para que la lista sea horizontal. Pero, vaya!, si es horizontal, los elementos no son bloques. Recordamos: para que sea alineado, pero tratndo cada elemento como un bloque, usamos display: inline-block;. #vinculos ul li { list-style: none; width: 100px; height: 50px; margin: 0; padding: 0; display: inline-block } Problema solucionado. Pues ya hemos terminado todo lo que tenamos que ver de CSS. Al final resulta que s que es importante no? Ahorra muchsimo cdigo, nos permite distribuir los elementos de la pgina al milmetro, nos permite hacer vnculos cambiantes, barras de mens Son tan fundamentales que las tena que incluir en l el curso, van siempre juntas; de hecho, alguna vez os ha pasado que con una conexin lenta, le habis dado a actualizar una pgina y han aparecido todos los elementos sueltos por la pgina? Eso es que, como siempre, el navegador ha ledo correctamente el HTML, pero no ha podido establecer conexin con la hoja de estilos CSS que va aparte. Nos queda ver una ltima cosa, ya como complemento: el cambio de cursor. Podemos cambiar el cursor con CSS, simplemente hay que especificar la propiedad cursor y el nombre o la ruta. Si lo hacemos en body, toda la pgina tendr el nuevo cursor. Si se la aplicamos a un elemento, solo tendr ese cursor mientras el ratn pase por el elemento. El sistema operativo tiene una serie de cursores instalados. Esos cursores se pueden llamar con su nombre. Por ejemplo, para poner el cursor de la manita usamos:

Body { cursor: hand;} /* Recuerdo que lo podemos aplicar a cualquier parte del documento */ Si somos ms manitas y hemos creado un cursor personalizado, o nos lo hemos descargado, para usarlo ponemos su ruta: body {cursor : url("cursor.cur")} Aqu os dejo una lista de nombres de los cursores de Windows: default (flecha) crosshair (cruz) e-resize (flecha que apunta a la derecha) hand (mano) help (signo de interrogacin, para la ayuda) move (cruz con flechas en los extremos, para mover) n-resize (flecha que apunta hacia arriba) ne-resize (flecha que apunta al noreste) nw-resize (flecha que apunta al noroeste) pointer (mano) s-resize (flecha que apunta hacia abajo) se-resize (flecha que apunta hacia el sudeste) sw-resize (flecha que apunta hacia el sudoeste) text (Cursor de texto) w-resize (flecha que apunta a la izquierda) wait (reloj de arena)

Si, por ltimo, tenis cursores dimicos, son bienvenidos, y ms ahora que est de moda el estilo Windows-Vista de los iconos. Eso s: si creis un cursor, hacedlo parecido al cursor normal. Un cursor diferente pero chulo es bien recibido, pero un cursor extrao solamente confundir al usuario. No uses un cursor de hipervnculo para la pgina normal, etc Esto es todo de CSS, pero si tenis problemas, siempre est San Google para resolver dudas. De momento, con lo visto, podemos hacer un sitio Web completo. Si te has quedado con ganas de ms, o solo por curiosidad, contina leyendo los captulos de JavaScript, PHP y XHTML. De todas formas, los leas o no, no olvides ver los de los consejos, y el de publicar tu Web.

Anexo: no funciona tu cdigo CSS? Posibles causas: 1. Has escrito mal la orden. A lo mejor has puesto backrgound en lugar de background, o cosas as. 2. Te has dejado algn punto y coma al final. Si te dejas uno solo no funcionar nada ms, as que revisa uno por uno. 3. No has cerrado una llave, y por tanto muchos estilos han quedado como comandos incorrectos dentro de otros. Asegrate de que todas las llaves empiezan y acaban en su sitio. 4. La Cascada. Las CSS son hojas de Estilo en Cascada porque los elementos que van a continuacin heredan lo especificado antes, a no ser que se cambie ese valor. Jerarquiza bien tu cdigo. 5. En realidad est bien, pero su efecto no es el deseado. Prueba a cambiar mrgenes y paddings. 6. Has corregido el cdigo, pero se te ha olvidado guardar los cambios o actualizar la vista del navegador. 7. El problema est en el HTML. Algunas comillas? ahs puesto id en lugar de class, quiz (o al revs)? Mira letra por letra hasta encontrarlo. Parecen evidentes, pero se suele cometer uno de estos errores cada minuto, casi siempre.

Bueno, adis al CSS y a lo que entendemos. Vamos a ver un poco por encima el javascript, que no quiero liaros ms.

22.- Cmo funciona JavaScript (JS).

Vamos a ver ahora un nuevo lenguaje que nos va a permitir una infinidad de posibilidades ms: javascript. Javascript se puede considerar un sub-lenguaje de programacin. Deriva del lenguaje de programacin Java. Java es un lenguaje de programacin de alto nivel. Se puede crear un sistema operativo completo como Windows usando Java. Javascript es un formato de cdigo basado en java, y se aplica al HTML. Javascript nos va a permitir realizar clculos con datos (que pueden ser introducidos por el usuario), mostrar cuadros de dilogo, crear calendarios, y funciones complejas, como un programa, pero dentro de la web. Sus posibilidades son prcticamente ilimitadas, mucho ms que CSS. El hecho de que pueda tomar variables del sistema (como la fecha, la hora, el SO, el navegador que se esta utilizando) y darnos el valor de esas variables nos abre un campo enorme, especialmente en cuanto a interaccin con el usuario. Si no quieres profundizar en Javascript, ya puedes parar, si no es as (como espero que sea), contina: Todo eso suena muy bien pero cmo funciona? Voy a intentar explicarlo: se basa en funciones llamadas a travs de eventos. Una funcin es un conjunto de instrucciones independiente, que se ejecuta en un momento dado. Un evento es un suceso que desencadena el inicio de la funcin. Un ejemplo vale ms que mil palabras: supongamos que yo quiero que al cargar mi web aparezca un cuadro de dilogo (de esos que salen con un botn de aceptar y hacen toln), con una advertencia. Lo primero que tengo que hacer es crear la funcin (instrucciones). Las instrucciones seran mostrar un cuadro de dilogo con el siguiente texto: . Esa es la funcin. Ahora tengo que crear el evento, es decir, especificar cundo debe ocurrir eso. El evento seria que se ejecutase al cargar la pgina, con lo que el evento lo defino como Cuando se cargue la pgina, ejecutar la funcin tal. Se entiende mejor? Espero que s. Vamos a lo siguiente: existen dos posibilidades para insertar el cdigo de javascript. El primero es escribirlo directamente en head. El segundo es crearlo en un archivo aparte (De extensin .js) y vincularlo a la pgina desde head, igual que hacemos con css. <head> <script language="javascript" type="text/javascript"> <!-//Aqu va el cdigo JS // --> </script></head> Sencillo. Observad que el cdigo va entre comentarios. Esto es para tener la seguridad completa de que el cdigo no se mostrar como texto. Tambin ponemos el cierre del comentario (-- >) como comentario de una linea (//, igual que CSS).

La otra opcin es guardar el cdigo aparte en un archivo punto jota ese (.js) y vincularlo cual hoja de CSS. El cdigo es diferente: <script language="javascript" src="ruta.js"></script> En src escribimos la ruta del archivo.

Bien, ya podis copiar y pegar de la Web lo que os interese. Si queris aprender a hacer algo sencillico, os explico; pero primero hay que saber un poco (un mnimo) de programacin. Si sabis BATCH o C, Java no debera ser un problema, pero como dudo que todos los lectores los conozcan, no merece la pena explicarlo. Javascript requiere un curso aparte (sin ninguna duda), as que solamente os voy a explicar algunos comandos, algunas funciones y algunos cdigos completos bastante tiles. Me voy a dejar todo lo que sera programacin: variables, estructuras condicionales, bucles, arrays Dentro de la funcin, cada instruccin es un comando. Lo que debe mostrar cada comando se escribe entre parntesis, y como en CSS y cualquier otro lenguaje, termina en punto y coma. Un ejemplo es la instruccin alert, que sirve para crear un cuadro de dilogo. function holamundo() { alert("Hola Mundo!"); } Se parece bastante al CSS en este sentido. Recordad: las cadenas de texto siempre entre comillas. Es bastante fcil entender el cdigo. Function define el nombre de la funcin. El nombre de esa funcin va a continuacin, y como no tiene ningn parmetro adicional, cerramos el parntesis que los contendra. A partir de ah abrimos una llave, que contiene el cdigo con las instrucciones de esa funcin. El comando Alert sirve para crear un cuadro de dilogo que muestre lo que va entre parntesis. Entre parntesis ponemos lo que queremos mostrar, y como en este caso es texto, lo ponemos entre comillas. Cerramos la instruccin con un punto y coma (;) y cerramos la llave, como en CSS. Bien, ya tenemos la funcin creada. Se supone que la hemos creado para que se muestre en un determinado momento, as que tendremos que llamarla desde un evento. Vemos cmo. Eventos en JavaScript: Los eventos son las instrucciones que especifican cundo debe ejecutarse un cdigo o una funcin. Su sintaxis NO es hacer esto cuando sino cuando ocurra esto, ejecutar .

Los eventos de javascript son atributos del HTML. Atributos? S: se colocan como atributos de un tag cualquiera. Un ejemplo es el evento onload, que significa al cargar la pgina. El valor de este atributo es la funcin a la cual remite: <body onload="holamundo()"> Y al cargar la pgina, se ejecutar la funcin Holamundo, que es el mensaje de antes: <head> <script language="javascript" type="text/javascript"> <!-function Holamundo() { alert("Hola Mundo!"); } // --> </script></head> <body onload="Holamundo()"> Todos los eventos comienzan por on, que vendra a significar algo como al. Onload: al cargar la pgina. Os dejo la lista de los eventos posibles, y de esa lista solamente voy a explicar los importantes (los ms usados). Para los dems, con saber algo de ingls es suficiente para deducir. Recuerdo: si quieres aprender JS detenidamente, esto te confundir, as que lee un curso de javascript; si solo quieres verlo un poco por encima, contina. Os dejo una pgina con la lista de eventos a la izquierda: http://msdn.microsoft.com/enus/library/ms536919(v=vs.85).aspx Nosotros nos vamos a quedar con los importantes: Onload: al cargar la pgina Onbeforeunload: justo antes de cerrar la pgina Onmouseover: al pasar el ratn por encima (hover) Onmousedown: al pulsar el clic izquierdo Onmouseup: al levantar el clic izquierdo despus de haberlo pulsado Onclick: al hacer clic (completo, de pulsar y levantar) Ondblclick: al hacer doble clic Onmouseout: al sacar el ratn del elemento Onmousemove: al mover el ratn. Al abrir la pgina nos da este resultado:

Si aparece alguno ms lo explico. De momento esos son los bsicos.

23.- Scripts tiles de JS (I).

No voy a explicar nada ms, que bastante lo hemos hecho ya. Es posible que ya hasta se os haya olvidado parte del HTML normalas que vamos a ver simplemente cdigos tiles para nuestras pginas. En primer lugar, acabamos de ver que JS ofrece muchas ms posibilidades de interaccin con el usuario que CSS. Mientras en CSS solo esta el hover, aqu est el onmousedown, up, move, out, over Parece que con Javascript vamos a tener ms posibilidades para crear un botn interactivo (hipervnculo). No obstante, para hacer esto con JavaScript, hay que hacer varias cosas: en primer lugar crear una funcin para que cargue esas nuevas imgenes al mismo tiempo o justo despus que la pgina. En segundo lugar, crear para cada botn varios eventos, cada uno para una posicin diferente del ratn; y en tercer lugar, llamar a la imagen. Todo esto ocupa muchsimo cdigo, y el resultado es idntico al CSS. En conclusin, no sale rentable. No obstante, uno de los problemas del CSS era que iba cargando las imgenes segn las necesitaba, y que si eran muy buenas, poda haber un tiempo en el que apareciera un hueco mientras cargaba la imagen de hover. Para evitar esto, podemos usar una funcin de javascript para precargar esas imgenes. Os dejo el cdigo, que est sacado de Internet: <script language="javascript 1.2"> <!-var i; var imagenes = new Array("imagen1.png","imagen2.png","imagen3.png"); var lista_imagenes = new Array(); function cargarimagenes(){ for(i in imagenes){ lista_imagenes[i] = new Image(); lista_imagenes[i].src = imagenes[i]; } } //--> </script> Si no sabes programar, no hace falta que analices el cdigo: basta con que cambies eso de imagen1.png y las dems por las imgenes que quieres tener cargadas cuando se cargue la pgina. Esa es la funcin (recomiendo que la aislis en un archivo .js para poder enlazarla a todo el sitio Web. Si la aislais, poneis solamente el cdigo, sin lo de script language= ni los comentarios, como es obvio. Ahora simplemente tenemos que llamar a esta funcin. Usamos el elemento onload o onafterload (este segundo las cargar tras cargar la pgina, lo que reduce el tiempo de espera.

<body onload="cargarimagenes()"> o <body onafterload="cargarimagenes()"> <body> <script> cargarimagenes(); </script> </body>

Podemos llamar a la funcin escribiendo su nombre en un script dentro de body:

Este cdigo es bastante til. Vamos a ver ms. Con respecto a las imgenes, un efecto interesante es la transicin de imgenes, bastante til en galeras fotogrficas. Aqu explica muy bien, y texto que me ahorro: http://www.cristalab.com/tutoriales/efecto-de-transicion-fadein-en-imagenes-conjavascript-c54415l/ Si buscis ms efectos para transicin de imgenes, hay miles por la Web. Es algo que tampoco se usa tanto, creo que no es necesario incluirlo aqu. Vamos a ver ms cdigos de javascript: es posible que a alguien le interese bloquear el clic derecho de su pgina. Es posible: <script language="javascript" type="text/javascript"> document.oncontextmenu = function(){return false} </script> Esto suele usarse para evitar la copia de imgenes. Otro recurso muy utilizado es poner una capa transparente encima de la imagen, de forma que no se pueda seleccionar la imagen para guardarla. A mi, personalmente, no me gusta ninguno de estos mtodos: en primer lugar porque son muy molestos y frustrantes para el usuario, y lo segundo, porque con una simple captura de pantalla pueden copiar las imgenes, as que son bastante intiles, al fin y al caboPero especialmente, porque creo en la libertad y en el derecho de todos a la informacin. Veremos ms tarde cmo crear una galera de imgenes sin Flash. Ahora vamos a ver algunas de las cosas ms tiles que nos ofrece javascript para los formularios. Un efecto muy extendido es utilizar una lista desplegable (<select>) para elegir un hipervnculo. Es decir, que si seleccionamos Opcin 1 vaya a una pgina, si seleccionamos Opcin 2 a otra, y as sucesivamente. Hay dos formas de hacer esto: La primera es crear un botn que ponga Ir a y vaya a lo que se ha marcado en la lista anterior o siguiente. El cdigo es este: <input onclick="top.location.href=this.form.list.options[this.form.list.selectedIndex].value" type="button" value="Ir a..."> En donde pone list poned el nombre del select (select name=estenombre). La otra opcin es que el hipervnculo se active justo al marcar la opcin, esto se consigue as:

<form name="F1" action="" method="post"> <select name="elegir" onchange='document.location.href=document.F1.elegir.options[document.F1.elegir.sel ectedIndex].value; return false;'> <option value="" selected>Escoje una p&aacute;gina Web</option> <option value="pagina1.htm">Pgina 1</option> <option value="pagina2.htm">Pgina 2</option> </select> </form> Este truco es sin duda muy bueno. Vamos a ver dos cosas ms con respecto a los formularios. Una de ellas, no puede faltar, es ponerle un hipervnculo a un botn de opcin (input type=radio). Se trata de utilizar la instruccin window.location, que viene a significar localizarse en la pgina tal (es decir, un hipervnculo). Para ello usaremos el evento Onclick, para que cuando el usuario haga clic se active el vnculo: <input type=radio name=R1 onclick=" window.location.href='ruta.htm' "> Tan solo tenis que cambiar la ruta de la pgina en href. Para cada botn de opcin, suele ser una ruta diferente. Si el usuario ya se encuentra en una de esas pginas, lo lgico es no poner el vnculo en el botn de la pgina en la que ya est el usuario. Esto tambin est muy bien, verdad? Vamos a ver solo una cosa ms: condicionar secciones. Eing? Me refiero a que algunos formularios aparezcan solo si se cumplen ciertas condiciones. El tpico He ledo y acepto para que nos deje continuar. En head incluiremos un script de javascript y un par de estilos del CSS. Esto s que lo voy a explicar: <script type="text/javascript" src="http://lineadecodigo.com/js/wforms/wforms.js"></script> <style type="text/css"> .onstate-datos { display: block; } /*Estamos definiendo una clase llamada onstate-datos en la que los elementos se muestran como bloque y en la de offstate no se muestran. */ .offstate-datos { display: none; } </style> Wforms.js es un script de otra pgina, donde se incluyen las funciones necesarias (Esperemos que esa pgina permanezca en la Web). donde se encuentra esta funcin, as que no cambieis ningn nombre a nada, porque si no, no se mostrar. En el estilo de CSS, gracias a la propiedad display (que ya he explicado) podemos hacer que los datos onstate se muestren como bloque, y los de offstate no se muestren. Despus, en nuestro formulario, tenemos que escribir lo siguiente:

<form action="#" method="post"> <input id="activar" type="checkbox" class="switch-datos"> <label for="activar">No he ledo, pero s acepto los trminos de licencia y las condiciones de privacidad y de uso. </label><br> <div class="offstate-datos"> <input type="submit" value="Enviar los datos"> </div> </fieldset> </form> Esto es todo de momento. Son unos scripts bastante tiles. Las posibilidades de JavaScript no acaban aqu, para nada, y de hecho, os dejo una pgina con muchos ms cdigos geniales para formularios. http://www.elcodigo.net/cgi-bin/DBread.cgi?tabla=scripts&campo=5&clave=1x3

24.- Scripts tiles de JS (II).

Vamos a ver tres efectos de capas imprescindibles, todas ellas basadas en la posibilidad de mostrar y ocultar una capa con javascript. <script language="javascript"> function oculta() { document.getElementById('capa1').style.visibility = "hidden"; } function muestra() { document.getElementById('capa1').style.visibility = "visible"; } </script> </head> <body> <div id="capa1" style='position: relative;'> Esta es la capa 1 </div> <a href="#" onclick="oculta()">Oculta la capa 1</a> <a href="#" onclick="muestra()">Muestra la capa 1</a> Sin duda, muy ingeniosopero de qu nos sirve esto? Echadle imaginacin, y pensadDe momento a mi se me ocurre que podra hacer que al pasar el ratn sobre un botn se me desplegara una capa. Esa capa podra contener un men. En otras palabras, podemos hacer que un men oculto aparezca al pulsar sobre un botn de una barra de vnculos, y por consiguiente, crear un submen. Un ejemplo es la barra lateral de softonic.com, en la cual, cada categora posee unas subcategoras. Esto son submens. Vamos a ver cmo hacerlos: Pensemos de forma lgica: Cmo se hara? Bueno, lo primero que tenemos que hacer es crear el botn. Despus el submen en una capa que estar oculta por defecto, y finalmente, hacer que al pasar el ratn por el botn aparezca la sublista. Empezamos definiendo el botn, ser un elemento de una lista li con estilos de CSS. Ese li, recordamos, contiene el hipervnculo en modo bloque. Copiad y pegad este script tal y como est. Este permitir ocultar y mostrar la capa. <script language="javascript"> < !-function mostrar(nombreCapa){ document.getElementById(nombreCapa).style.visibility="visible"; } function ocultar(nombreCapa){ document.getElementById(nombreCapa).style.visibility="hidden"; } // --> </script>

Luego, en la pgina tendramos algo como esto: <body> <p>&nbsp;</p> <ul> <li onmouseover="mostrar('submenu')"><a href="x.htm">Botn 1</a></li></ul> <div id="submenu" onmouseover="mostrar('submenu')" onmouseout="ocultar('submenu')" style="visibility:hidden;"> <ul> <li><a href="y.htm">Subcategora 1</a></li> <li><a href="z.htm">Subcategora 2</a></li> </ul> </div> </ul> </body> Listo: ya tenemos un submen para el botn. No es genial? Recordad que podis ponerle tantos subapartados como queris aadiendo ms <li>s, y los estilos que sean con CSS. Si queris que en lugar de ser al pasar el ratn, sea al hacer clic, es muy sencillo: Cambiamos el onmouseover (hover) por onclik (al hacer clic), recordad, si es el caso, el quitar el hipervnculo en botones para que al hacer clic no vaya a otra pgina.

Vamos a ver una ltima cosa, con la que me despido de Javascript: capas que siguen al cursor. A que suena bien? El objetivo que puede tener una capa as es que sea informativa, y que no se pueda pasar el ratn por ella, puesto que lo sigue, y no puede estar encima. Estas capas suelen usarse como informacin cuando el ratn pasa (onmouseover) sobre un elemento. <script language="javascript"> <!-var divName = 'id_de_la_capa'; /* Aqu el id de la capa que sigue al ratn, debe ser en position:absolute */ var offX = 15; var offY = 15; function mouseX(evt) {if (!evt) evt = window.event; if (evt.pageX) return evt.pageX; else if (evt.clientX)return evt.clientX + (document.documentElement.scrollLeft ? document.documentElement.scrollLeft : document.body.scrollLeft); else return 0;} function mouseY(evt) { if (!evt) evt = window.event; if (evt.pageY) return evt.pageY; else if (evt.clientY)return evt.clientY + (document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop); else return 0;} function follow(evt) {if (document.getElementById) {var obj = document.getElementById(divName).style; obj.visibility = 'visible';

obj.left = (parseInt(mouseX(evt))+offX) + 'px'; obj.top = (parseInt(mouseY(evt))+offY) + 'px';}} document.onmousemove = follow; </script> <body> <div id= "id_de_la_capa"><p>&nbsp;</p></div> Dadle con CSS las dimensiones y el formato que queris a esa capa, pero debe ser de posicin absoluta. Recordad que esto la mostrar por todo el documento. Para que esto solo ocurra al pasar el ratn por un rea especfica quitamos eso de document.onmousemove del script, y en su lugar, lo ponemos como onmouseover en el elemento que queramos, ya en body. Bien, esto es todo. Dejamos Javascript y el aprendizaje del HTML. Solamente quiero mencionar unas cosas que se me habian olvidado: Javascript nor permite hacer vnculos a funciones del navegador: Hipervnculo de atrs: <a href="javascript:history.back(1)">Volver Atrs</a> Hipervnculo de agregar a favoritos: <a href="javascript:if(document.all)window.external.AddFavorite(location.hr ef,document.title); else if(window.sidebar)window.sidebar.addPanel (document.title,location.href,'');">Agregar a Favoritos</a>

Hay ms, como la funcin adelante, historial, establecer como pgina de inicio, etc Las tenis todas por Internet. Felicidades: hemos terminado el curso de HTML: ya podemos crear la Web completa 100%. No olvides leer los consejos del final antes de empezar.

25.- PHP y XHTML.

PHP es otro tipo de cdigos que podemos insertar en nuestro sitio Web. Esta vez es mucho ms complejo. Mientras que CSS y JS actan en el navegador, PHP trabaja sobre el servidor. Un servidor es un equipo que mantiene la Web online. Si el servidor est desconectado o saturado (en definitiva, no disponible), la pgina Web no podr ser mostrada. PHP es un sub-lenguaje de programacin que no se muestra en el navegador, sino que son instrucciones que ejecuta el servidor que mantiene online nuestra pgina. Si en PHP ponemos la instruccin decir hola mundo, ese mensaje no aparecer si no tenemos la Web en un servidor. El servidor ejecutar esa orden. PHP se inserta en head con la etiqueta <?php (no se cierra con el >) y se cierra con ?>. Para insertar instrucciones en el body, se utilizan comandos de PHP. Estos comandos suelen ser del tipo <!-- Webbot bot -->. Si se usa uno o ms scripts de PHP, la pgina debe ser guardada como .php y no como .html. Para qu se usa PHP? Evidentemente, para aquellas cosas a las que JavaScript y CSS no pueden llegar: todo lo que sea independiente del equipo del usuario. Por ejemplo, para crear un calendario con un da fijo marcado, se necesita PHP (o una imagen, evidentemente, pero me refiero a un calendario interactivo). Se necesita PHP porque ese da marcado no puede almacenarse en todos los equipos de los usuarios que visiten la Web. S se puede marcar el da en concreto con CSS, pero para determinar el da, Javascript necesitara tomar la variable de algn lado. Bueno, quizs un calendario no es el mejor ejemplo. PHP se utiliza junto a lenguajes como SQL para gestionar bases de datos. Estas bases de datos suelen ser bases de datos de nombres de usuario, datos y contraseas de los usuarios de una pgina. PHP permite que los datos de un formulario se enven a una base de datos del servidor. Otra cosa para la que se usa muchsimo PHP es para crear pginas de los perfiles de los usuarios. Una pgina en la que uno se crea un perfil es diferente para cada usuario. El usuario A tiene una pgina con su perfil. El usuario B tiene un perfil diferente El diseador no crea cada una de esas wes diferentes: tiene una plantilla de la Web. Cuando un usuario nuevo se registra, le asigna una copia de esa plantilla y la rellena con las variables correspondientes. A partir de entonces esa pgina es fija y pasa a formar parte del sitio Web. Esto slo se puede hacer con PHP o con muchsimo trabajo cada da. Yo prefiero PHP. No voy a explicar lo de PHP, porque tendria que explicar muchsimas cosas de su sintaxis y de programacin. PHP nos ofrece infinitas posibilidades, como crear galeras de fotos (lo cual podemos hacer fcilmente con botones que muestren capas con las imgenes, usando javascript y CSS), crear formularios de bsqueda interna, crear foros, y crear todo tipo de archivos y de formularios. Os recuerdo que ninguno de estos archivos os funcionar si no tenis un servidor ni si vuestra pgina no est guardada en formato correcto (.php).

XHTML
XHTML (eXtensible HyperText Markup Language) es una variante de HTML, bastante ms estricta, que se est poniendo muy de moda ltimamtente, se alega, porque facilita la edicin y la lectura de los cdigos. Para que seais capaces de programar en XHTML, os digo cmo se hace: En priemr lugar, hay que poner el DOCTYPE correspondiente de XHTML. Lo tenis en la misma pgina que los dems. Luego, las diferencias con HTML 4 son las siguientes: Todas las etiquetas se abren y se cierran, incluso las de accin concreta. Para cerrar las de accin concreta se pone /> al final: <p>&nbsp;</p>, <meta />. Todos los atributos deben llevar comillas, sin excepcin. (Esto es un fallo tpico, si nos dejamos unas, el cdigo no funcionar. Estad atentos). El orden inverso del cierre de tags debe respetarse siempre. <x><y></y></x> Todos los tags y atributos deben estar en minsculas. Se distingue entre maysculas y minsculas. No se permiten los tags que han sido desaconsejados en el HTML 4, es decir, no existe font, ni b, i, etcen su lugar se usa <span> y se le aade un cdigo css.

Por lo dems, XHTML es idntico al HTML, as que no hay ningn problema. Pues ya est: ahora ya no tenis nada ms que saber. Ya podis crear el sitio Web, pero voy a deciros unos consejos para hacerlo correctamente:

26.- Consejos para crear tu sitio Web (I).

Os dejo una bastante grande lista de consejos para crear un sitio Web bien hecho: 1. Crate una plantilla para usarla en todas las webs. Crea un documento.html con el doctype, el head con la codificacin, y los tags de head y body escritos. Para crear cada Web, copia la plantilla: ahorra mucho trabajo. 2. Piensa antes de nada en el tema sobre el que vas a hacer tu pgina. Una vez bien pensado, imagina su diseo: dibuja cmo quieres que sea tu pgina, distribuyendo la cabecera, los vnculos y el contenido como prefieras. Piensa en todos los subapartados que incluirs. 3. Crea una carpeta de tu sitio Web. En ella debers guardar TODO lo que se publique en tu pgina. Crea subcarpetas para las imgenes y para los botones de los vnculos. Si tu Web tiene muchos subapartados, crea subcarpetas para las diferentes categoras. En definitiva, ten un sitio Web perfectamente ordenado. 4. Utiliza la extensin .html en lugar de .htm, ambas son vlidas, pero esa es ms correcta. Si ya las tienes, tendrs que cambiar los hipervnculos si aades la l. 5. Llama a la pgina principal index.html o index.php, si no, los servidores no la tomarn como principal. Qu ya has hecho una Web principal con otro nombre? No hay problema: utiliza el truco de redirigir una Web que se llama index.htm (y puede estar en blanco) a la que es verdaderamente principal. <meta http-equiv="refresh" content="0;URL=./principal.htm"> 6. Llama a todas las subwebs con nombres sencillos, en minsculas y sin espacios ni caracteres especiales. Si no, algunos servidores no mostrarn tus pginas. 7. Ten un cdigo bien estructurado con saltos de lnea y dems. Si tienes que modificarlo lo mejor ser que lo entiendas. Pon comentarios si se dificulta en algn momento. 8. Aunque est en la plantilla, recuerda incluir el doctype, la codificacin y el ttulo en todas las webs. Si usas copiar y pegar, asegrate de cambiar el ttulo (Title) a las webs. 9. Coloca los tags meta que no sean de la codificacin solamente en la pgina principal. De esta forma ahorrars cdigo y no se accede desde los buscadores a secciones de tu Web, sino a la principal, etc. 10. Asla los scripts de JS y de CSS en archivos aparte, ya sabes que puedes insertar ms de uno). Esto, adems de ahorrar cdigo, facilita la comprensin del cdigo, y te permite usarlos en varias pginas. 11. Usa minsculas para todos los tags y atributos. Aunque se permitan maysculas, las minsculas no dan lugar a error, y se cogen buenas costumbres.

12. Por seguridad, pon siempre comillas a todos los atributos, sean del tipo que sean. 13. Cada vez que abras un tag, escribe el cierre, y luego escribe dentro. De esta forma no se te olvidar cerrarlos nunca. Recuerda cerrarlos siempre en orden inverso. 14. Crea una imagen que sirva de cabecera y que aparezca en todas las webs. Puede ser una imagen animada. Convirtela en un hipervnculo a la pgina principal. 15. Incluye en tu cabecera el logotipo de tu Web. Si la cabecera entera no es un vnculo, al menos que lo sea el logotipo. 16. Utiliza en tu Web una gama de colores determinada. Esos colores deberan pertenecer a la gama de colores de tu logotipo. 17. Crea un diseo profesional: elegante pero sencillo. No hace falta poner florituras: un diseo sencillo y simple, pero con colores y estructura bien elegidos da a la Web un aspecto profesional. 18. Sita el contenido que el usuario anda buscando al prncipio de la Web, para que no tenga que desplazarse abajo para verlo. Esto es muy importante. No permitas nunca el desplazamiento en dos direcciones. O vertical (lo normal) u horizontal, pero nunca los dos a la vez. 19. Puedes hacer cambios en tu Web y volver a subirla al servidor, con lo que mantn tu Web actualizada. Si tu Web no recibe suficientes visitas mensuales ser borrada, as que ofrece contenido novedoso para asegurarte las visitas periodicas de los usuarios. Es importante que indiques al suario cada cunto tiempo se actualiza. Cambia imgenes, aade frases o haz cualquier cambio, pero hazlo. Utiliza ponderaciones remarcadas de nuevoo gratis, que influyen en la opinin del usuario. 20. Guarda los cambios cada x tiempo, que nunca se sabe lo que puede pasar. Ten copias de seguridad en medios externos, pero no en la Web: no publiques tu Web sin que est terminada. 21. Indcale siempre al usuario dnde se encuentra. Puedes tambin desactivar el enlace (y que parezca deshabilitado) de la seccin donde el usuario se encuentra. 22. Crea un mapa del sitio, un esquema u organigrama de tu sitio Web, donde indiques cmo se estructuran tus sub-webs. 23. Pon una barra de vnculos accesible al principio de la pgina. Puedes poner tambin una barra de vnculos alternativa (de solo texto) abajo del todo, como pie de pgina. [recuerda, clear: both]. 24. Pon siempre un title a todos los hipervnculos, como texto alternativo.

25. Revisa que funcionan todos los hipervnculos de tu pgina antes de publicar. Revsalos peridicamente si incluyes enlaces a otros sitios Web. 26. Si tu pgina se alarga, pon hipervnculos a cada seccin, y en cada seccin, hipervnculos para subir arriba. 27. Utiliza strong y em en lugar de negrita y cursiva. Es preferible que para las partes de nfasis el texto resaltado tenga un tamao ligeramente mayor, y un color de la gama de la pgina. 28. No uses ninguna etiqueta de negrita, cursiva etcni font. Utiliza CSS en su lugar. 29. Las imgenes y los efectos distraen del texto. Separa las imgenes del texto de manera que cuando el usuario se desplace no las vea hasta terinar de leer el texto. No pongas demasiado texo: solo el principal. 30. No uses dir ni men. Sustituyelas por listas desordenadas (ul). Si quieres hacer listas diferentes, asgnales un id diferente, y dale un estilo distinto con CSS. Para lograr el efecto de sublistas-desplegables, basta con hacer lo de mostrar y ocultar capas con onclick. 31. Si pones en un address o en una seccin de contacto tu direccin de correo electrnico, encrptala con Javascript. Algunos robots de Internet buscan direcciones de correo en los cdigos HTML para poder enviarles spam. Para encriptarlas puedes hacerlo con javascript as: http://www.desarrolloweb.com/articulos/1735.php 32. Utiliza CSS para todo lo que puedas. Utiliza identificadores diferentes para elementos de pginas distintas, puesto que la hoja de estilos es comn a todas. 33. Utiliza menos clases y pon un id a todos los elementos. Aunque para dos elementos parezca que hay un estilo comn, siempre son diferentes, y es posible que queramos modificar uno solo por separado. 34. No utilices tablas para maquetar: cada fila con sus tantas celdas puede ocupar hasta 200 lneas de cdigo. Utiliza capas, que son mucho ms simples, limpias y fciles de crear. Dales su correspondiente formato con CSS y podrs crear cosas que ni siquiera las tablas ofrecen. 35. Para las imgenes, crea miniaturas para poder enlazarlas a las imgenes en grande. Pueden servirte tambin como galeras fotogrficas si en lugar de enlazarte a la imagen, la muestran en grande (capa nueva con la imagen en grande, oculta por defecto, con mostrar y ocultar capas). No redimensiones la imagen original para hacer las miniaturas, porque el navegador las cargar igualmente y adems tendr que trabajar en redimensionarlas, y nuestro objetivo es que ahorre espaico y tiempo. Crea nuevas imgenes, de menores dimensiones y de menor calidad.

36. Utiliza lowscr para no acabar con la paciencia del usuario. Ponle el fondo a la imagen con CSS para que se muestre la imagen de cargando o una en baja resolucin mientras carga la original (En otras palabras, el lowscr, pero con CSS).

27.- Consejos para crear tu sitio Web (II).

37. Sustituye, si puede ser, todos los mapas de imgenes, por imgenes nuevas, superpuestas por estar en capas independientes. Esto te permitir poner efectos a cada zona con CSS. 38. No uses dynsrc para insertar vdeos. Utiliza el embed. Es preferible, de todas formas, que insertes el vdeo como marco de youtube, y reserves el embed para otros objetos. 39. No abuses de los efectos decorativos como las marquesinas, las gifs animadas o los efectos de texto: son muy molestos. Las gifs animadas slo debes usarlas cuando se necesiten, o en botones de vnculos. Las marquesinas slo deben usarse como informacin acerca del estado anormal de una pgina. 40. En los formularios agrupa todo lo que puedas. Agrupa grupos de campos con fieldsets, agrupa opciones en las listas desplegables, etc 41. Usa etiqutas label para todos los campos del formulario. 42. Utiliza el value para darles parte del texto escrito a los usuarios en campos como introducir una direccin Web. 43. Dales a los campos de formulario colores relacionados con la pgina (de la gama de la pgina). Especialmente a los bordes de los formularios, a las barras de desplazamiento y a los botones. 44. Indcale al usuario cundo y cmo puede hacer selecciones mltiples, y cmo puede usar el acceskey y el tabindex. 45. No seas somarda con los formularios: evita hacer campos de confirmar contrasea, confirmar e-mail, etc 46. No uses marcos: las capas pueden reemplazarlos completamente. El nico marco que deberas usar es el iframe. 47. Acostmbrate a usar prrafos si usas demasiados saltos de lnea (br). Es fundamental para tener un cdigo ordenado y para poder darle estilos a los prrafos. 48. Para las citas utiliza <q>, <cite> y <blockquote>. A las citas se les pueden dar formatos interesantes con CSS. Al blockquote especialmente se le pueden agregar imgenes de comillas, fondos, etc 49. No escribas ms de un espacio &nbsp;, si necesitas tabular objetos utiliza textindent, o capas. 50. Revisa bien las faltas de ortografa y gramtica de tu pgina, incluso los lesmos, malos usos de palabras, etc Los errores de escritura desprestigian muchsimo.

51. Elige los colores de frente y de fondo de forma que haya mucho contraste entre el color de la letra y el del fondo. El texto debe ser siempre legible. 52. Elige un fondo de un color cualquiera, pero muy claro; muy, muy claro. Otra opcin, muy usada, es poner el fondo de un color normal u oscuro (normalmente oscuro), y el texto sobre una capa centrada de fondo blanco. Utiliza fuentes seguras y fciles de leer, que tengan todos los ordenadores, o al menos, especifica fuentes alternativas. 53. Evita incluir Spam en tu pgina, especialmente en cuanto a ventanas emergentes. 54. No permitas que alguna parte de tu pgina quede inaccesible sin javascript. Algunos usuarios desactivan el javascript. 55. Estructura el contenido de tu Web de manera coherente y ordenada. Crala visiblemente atractiva. 56. Puedes incluir en tu Web enlaces de javascript a atrs (Eso siempre lo agradece el usuario). Incluye, si eso, enlaces de agregar a favoritos y tal. Muchas veces al usuario le interesa medianamente nuestra pgina, pero olvida esa posibilidad de agregarla a favoritos (a no ser que realmente le encante, que es difcil). El ponerle esa opcion puede recordrselo e incitarlo a hacerlo. 57. Comprueba que tu pgina Web se ve correctamente en todos los navegadores, y con todos los tamaos de la ventana del navegador. 58. Permite al usuario contactar contigo, o al menos dejar comentarios en tu pgina. 59. Evita subrayar texto: se puede confundir con hipervnculos. Utiliza las negritas, los encabezados y; sobre todo, las maysculas solamente cuando realmente sean adecuados. Utiliza la negrita (nfasis) para resaltar las partes importantes de los textos (como he hecho yo en este curso). Consigue que uno pueda entender lo ms bsico leyendo solo lo que est en negrita. 60. Crea los enlaces externos con target_blank. Es muy molesto que te cambie la pgina y tener que volver atrs. Indcale esto al usuario, ya que da por supuesto que no lo son y hace clic con la rueda del ratn directamente. 61. No incluyas contenidos prescindibles, como contadores de visitas a la pgina. Si tienes pocas, el usuario puede pensar que tu Web es mala, y ralentiza bastante. Adems, no es objetivo, porque si el usuario actualiza la Web contar como otra visita 62. Usa colores que puedan imprimirse: puede que alguien quiera imprimir la Web. Comprueba que todo se lee bien en escala de grises, y aade el botn para imprimir la Web: onclick="window.print();"> Haz que haya una confirmacin, que siempre se puede ir el cursor

63. No seas mala perosna: no obligues al usuario a registrarse. Esto, adems de disuasorio, supone una prdda de tiempo increble, y es muy frustrante para el usuario. Especialmente si se equivoca en un campo, u otras cosas 64. Evita crear textos largos en tu Web. S claro y conciso. Sintetiza. 65. Mira tu Web desde la perspectiva del usuario. Pide opinin a ms gente. 66. No pongas ningn elemento de reproduccin automtica con volumen. Si insertas msica o vdeos, que no empiecen hasta que el usuario quiera. A veces abre varias pginas a la vez, y el no saber de dnde viene el sonido es infernal, y ms, si est en un sitio donde no puede hacer ruido. 67. Sesenta y siete ya? Madre ma 68. Si has publicado la Web antes de tener alguna seccin terminada, no pongas una Web en construccin. Desactiva el link e indica que no est disponible la seccin. Si no quieres privar al usuario de parte de ese contenido, no lo desactives, pero avisa que la pgina est incompleta. 69. Malpensaos! 70. Est bien aadir un buscador a tu Web para buscar secciones por palabras y dems. Recuerda que necesitars PHP y un servidor y todo aquello... 71. Elige bien el nombre de tu direccin Web. No se puede cambiar. 72. Ten pensado un servidor antes de publicar la Web.

Bueno, pues esto es todo. Ahora ya podis hacer vuestro sitio Web, y solo nos quedar publicarlo:

28.- Publicar la Web.

Y vamos con lo ltimo: publicar una Web. Se supone que ya tenemos creado nuestro sitio Web completo; ahora toca publicarlo, al fin y al cabo si lo hemos creado es para eso. Publicar un sitio Web consiste en hacer que cualquier usuario de la red pueda acceder a nuestro sitio Web. Para ello necesitamos un servidor. Un servidor es un ordenador normal que mantiene nuestra Web con conexin a Internet, y permite que se pueda acceder a ella desde cualquier otro equipo. Para que cualquiera pueda acceder, necesitamos tener nuestra carpeta de nuestro sitio Web compartida en la red en su totalidad; y la direccin de nuestro sitio debe ser apta para ser escrita. Para facilitar todo esto podemos utilizar un servidor externo. Estos servidores que alojan nuestro sitio Web se denominan Hosting servers. El tener nuestro archivo en un servidor nos proporciona varias ventajas: 1. Nos mantendr la Web disponible las 24 horas del da, porque est siempre conectado. 2. Nos proporcionar un dominio en la Web. 3. Podr almacenar bases de datos y pginas creadas automticamente por PHP. Parece bastante bueno. Y qu es eso del dominio Web? Es la direccin url que tendr nuestra pgina: www.midominio.com. Navegando por la red encontraris varios servidores que os ofrezcan lo que andis buscando. Ahora bien, el problema, como siempre en este mundo, es el dinero. Los servidores buenos son todos de pago. Un servidor de pago tiene, evidentemente, ventajas como las siguientes: Nos mantiene la Web indefinidamente, tengamos las visitas que tengamos, siempre y cuando le paguemos la mensualidad. Tenemos una capacidad ilimitada de almacenamiento. Tendremos todas las opciones disponibles . Nos proporciona un dominio www.com

Pero claro, uno no siempre puede costearse un servidor de este tipo. Por ello existen sitios Web de almacenamiento gratuito. Esto tiene las desventajas opuestas a las ventajas del otro: Nos borrarn nuestro sitio Web del servidor si nuestro sitio no recibe visitas suficientes.

Es posible que su capacidad de almacenamiento sea limitada. En algunos casos no tendremos todos los recursos disponibles. No nos proporciona un dominio Web, sino un www.alojamiento.com/misitioweb/index.htm Nos incluir publicidad para sufragar los gastos de alojar nuestra pgina.

No obstante, tampoco est tan mal esto, y es una opcin bastante interesante: (its free). Esta es la que suelo usar yo. Es importante tener en cuenta los siguientes puntos a la hora de buscar alojamiento Web. Si has encontrado un alojamiento de pago que se ajusta a tus necesidades, enhorabuena, pero cuidado: crea una cuenta bancaria nicamente para el servidor, y con el dinero justo. De esta manera evitas que la compaa pueda robarte, y cualquier posible robo a manos de un virus que haya capturado el nmero de cuenta. Si has optado por un servidor gratuito, est bien, pero debes fijarte bien en que te ofrece lo que necesitas para el funcionamientoplenod e tu Web: Te ofrece capacidad suficiente? Te permite modificar tu pgina siempre que quieras? Cuntas visitas mensuales te pide? Soporta PHP, ASP, JavaScript, etc? Cul ser la direccin Web de tu sitio? Ests seguro de lo de la publicidad? Por cunto tiempo es gratis?

Hay que pensarlo muy bien. Si ya lo has pensado, adelante. Hay muchos servidores de pago por ah, as que con buscar un poco es suficiente. Os dejo unas cuantas direcciones de servidores gratuitos. Espero que no queden obsoletos dentro de unos aos: http://www.awardspace.com/ http://www.freewebhostingarea.com/ http://www.50webs.com/ http://www.atspace.com/ http://www.newbiesite.com/hosting.php http://www.dalir.net/free.php

CON ESTO CONCLUYE EL CURSO DE HTML PARA PRINCIPIANTES Por favor, comentad el curso, podis escribirme a GMFFS@yahoo.es para preguntarme dudas o comentar lo que sea, pero comentad el curso en mailXmail. Soy consciente de que mis explicaciones han sido escuetas pero no debo abusar de ejemplos sino que debis ser vosotros quienes probis los cdigos. Explorar y probar es la mejor forma de aprender. Espero que el curso haya sido ameno y til para todos. Gracias por leerlo. Espero tambin que gracias a mis explicaciones podis crear vuestros sitios Web tal y como deseis. Ha sido un placer ensearos. Me Despido. Un Saludo.