HTML hipertexto markup lenguaje permite describir hipertexto, es decir, texto presentado de forma estructurada, con enlaces (hyperlinks)

que conducen a otros documentos o fuentes de informacin relacionadas (otras pginas web), y con efectos multimedia (imgenes, sonido, multimedia). Es el lenguaje de publicacin de la World Wide Web, es decir, es el cdigo fuente de las pginas web que podemos ver en Internet. La descripcin de este lenguaje se basa en especificar en el texto la estructura del contenido (ttulos, prrafos, listas) as como los diferentes efectos (especificar negrita, cursiva o una imagen) que se quieren dar y dejar que la presentacin final de dicho cdigo se realice por un navegador. El cdigo HTML aparece dentro de etiquetas. Una vez abierta una etiqueta hay que cerrarla en el momento en que termine la orden asociada a esa parte del documento. Por ejemplo: <b>Negrita</b> b: pone el texto en negrita

Para confeccionar una pgina web lo nico que se necesita es un editor de texto. Podemos utilizar el Bloc de Notas. Luego este archivo se guardar con la terminacin .htm o .html y como documento de texto (para que no se incluyan otros cdigos). El elemento HTML A las instrucciones que forman el lenguaje HTML les llamaremos elementos. Otros autores tambin las denominan "TAGS", o "ETIQUETAS". La notacin de los elementos consiste en los smbolos < y > que encierran dentro una instruccin. Elementos HTML llenos Se forman escribiendo la instruccin correspondiente seguida del texto al que se quiere aplicar la instruccin y se termina repitiendo la instruccin pero con una barra inclinada (/) inmediatamente antes de la misma. Por ejemplo, el elemento H1, que sirve para dar el mximo tamao al texto, se escribir: <H1> Texto de prueba </H1> y este sera el resultado:

Texto de prueba
Si se olvida poner </H1> todo el resto de la pgina tendr el mismo tamao grande. Lo mismo suceder con algunos otros elementos si no se cierran. Elementos HTML vacos Los elementos vacos se escriben como los llenos, pero no es necesario poner la instruccin repetida (o instruccin de cierre) al final con una barra. Esto se debe a que estos elementos no producen un efecto sobre el texto. Generalmente se utilizan para separar bloques de texto y por tanto no es necesario indicar su fin. Empiezan y terminan en el mismo punto. Por ejemplo, el elemento <HR> que sirve para dibujar una lnea horizontal en la pantalla, se escribir: <HR>. Y este sera el resultado: Elementos con argumento Algunos elementos se escriben con argumentos denominados atributos del elemento, que permitirn definir parmetros para la instruccin que se va a ejecutar. Por ejemplo, el elemento que sirve para hacer un link (enlace) con otro documento, se escribir: <A HREF="http://www.miservidor.es/mifichero.htm"> Link de prueba </A> Este es un elemento lleno donde al atributo HREF se le asigna el valor que aparece entre comillas: "http://www.miservidor.es/mifichero.htm". El texto al que afecta este elemento es Link

de prueba y realiza un link con el fichero mifichero.htm que est en el servidor www.miservidor.es. Los elementos pueden escribirse tanto en maysculas como en minsculas. Puede ser preferible la primera opcin ya que aporta claridad al documento fuente, y eso se agradece a la hora de hacer correcciones, pero cuidado, el valor de algunos atributos hay que escribirlos exactamente, para evitar errores de interpretacin de cdigo. En el caso anterior no funcionara el link si escribiramos WWW.MISERVIDOR.ES, en maysculas, ya que es un nombre de mquina y sera interpretado como otra mquina. Los elementos pueden anidarse unos con otros, es decir, combinar varios elementos, unos dentro de otros, teniendo cuidado de poner los cierres en el lugar adecuado: los primeros elementos en abrirse sern los ltimos en cerrarse. Por ejemplo, el elemento <H1> combinado con <I> que sirve para generar texto en itlica, se escribir <H1><I>Texto de prueba </I></H1>, y el resultado sera ste:

Texto de prueba
Combinando ahora los elementos ya vistos, <H1>, <I> y <U> (que se utiliza para poner el texto subrayado) escribiremos <H1><I><U>Texto de prueba </U></I></H1>, y el resultado sera:

Texto de prueba

Estructura bsica de un documento HTML

Dentro del documento (entre las etiquetas principio y fin de HTML), hay dos zonas bien diferenciadas: cabecera o head y el cuerpo o body Un documento HTML versin 4 se compone de tres partes: 1 Una lnea que contiene informacin sobre la versin de HTML. 2 Una seccin de cabecera delimitada por el elemento HEAD. 3 Un cuerpo, que contiene el contenido real del documento. El cuerpo puede ser especificado mediante el elemento BODY o mediante el elemento FRAMESET. Las partes 2 y 3 debern estar delimitadas por el elemento html. <html> <head> <title>Mi primer documento HTML</title> </head> <body> <p>Hola mundo!</p> </body> </html>

Cabecera de un documento
Informacin sobre la versin de HTML Aunque en la mayora de los programas esta parte no se utiliza, sin que por ello el programa deje de funcionar, a veces es interesante saber en que versin de HTML estn escritos, ya que si se posee una versin anterior a la del programa visitado puede que se tengan problemas de acceso a todo el documento.

Para ello se hace uso de la declaracin del tipo de documento (DTD). La versin HTML 4.01 especifica tres DTDs de las que se elegir la ms adecuada, pues varan segn los elementos que contienen: DTD HTML 4.01 Estricto (Strict DTD) Incluye todos los elementos y atributos anticuados o que no aparecen en documentos con marcos. Se utiliza el siguiente cdigo: <!DOCTYPE HTML PUBLIC _//pag//DTD HTML 4.01// EN direccin de la pgina /html4/strict.dtd> DTD HTML 4.01 Transicional (Transitional DTD) Incluye todo lo que incluye el DTD estricto ms los elementos y atributos anticuados relacionados con la presentacin visual. Se utiliza el siguiente cdigo: <!DOCTYPE HTML PUBLIC _//pag//DTD HTML 4.01 Transitional//EN direccin de la pgina /html4/loose.dtd> DTD HTML 4.01 para documentos con marcos (Frameset DTD) Incluye todo lo que incluye el DTD Transicional ms los marcos. Se utiliza el siguiente cdigo: <!DOCTYPE HTML PUBLIC _//pag//DTD HTML 4.01 Frameset//EN direccin de la pgina /html4/frameset.dtd>

El elemento head
El encabezamiento, delimitado por <head> y </head>, que sirve para definir diversos valores vlidos en todo el documento.

Elemento title <title></title> permite asignar el ttulo de un documento HTML. Este elemento es opcional. <title> Mi primer documento HTML </title> Este ttulo no forma parte del documento en s, es decir, no aparece, por ejemplo al principio de un documento una vez que este se presenta, sino que suele servir como ttulo de la ventana del programa que la muestra y aparece en la barra de ttulo de dicha ventana.

Los Meta Tags Otro tipo de instrucciones html que dan informacin a los buscadores acerca de las propiedades ms relevantes (como por ejemplo autor, descripcin, palabras clave) del sitio web. La informacin de las pginas contenida en la etiqueta meta ser considerada por los robots para realizar los listados de resultados de bsquedas. Su utilizacin es opcional. Su buen uso aporta informacin adicional, en ocasiones necesaria de las pginas para su buena indexacin, localizacin y utilizacin por parte de los buscadores. Para la definicin de los meta tags se utiliza el elemento meta para especificar las propiedades de un documento (autor, fecha de caducidad, palabras clave relacionadas) y para asignarles valores. Cada elemento meta tendr asociado un par propiedad/valor. La etiqueta asociada a este elemento es <meta>, que nunca se cierra y dentro de ella aparecen los siguientes atributos asociados: Atributos del meta: Name: asigna el nombre de una propiedad. Content: Scheme: http-equiv: asigna el valor de la propiedad. asigna un esquema que se usa para interpretar el valor de la propiedad. este atributo puede usarse en el lugar de name.

El elemento meta tiene una serie de propiedades: Etiqueta Meta author Meta description Expires Meta Keywords Refresh Cdigo <meta name="author" content="apl"> <meta name=description content=texto> <meta http-equiv=expires content= Dom, 8 En 2004 09:38:20 GMT> <meta name=keywords content=pagina1, pagina2> <meta http-equiv=refresh content=2 das> Explicacin Asigna el nombre apl como el autor de la pgina Breve explicacin del contenido del documento Fecha y hora que indica la caducidad de la pgina web No ms de siete palabras separadas por comas que sirven como palabras clave para localizar la pgina Indica el tiempo hasta que se actualice la pgina

Tambin se puede considerar la instruccin <title></title> como un meta tag. Hay pginas que ofrecen generadores de meta tags en los cuales se introducen datos relativos a autor, palabras clave para que estos generen automticamente su cdigo asociado y solamente tengamos que aadirlo a nuestro sitio web.

Los campos bsicos que suelen aparecen en los generadores de meta tags son:

En el campo robots aparece un men desplegable en el que se puede elegir entre las opciones: All, none, index, no index, follow, no follow. Con ellas avisamos al robot cuando una pgina puede ser indexada o analizada para obtener ms vnculos.

Cuerpo de un documento
El cuerpo est delimitado por <body> </body> Por supuesto esta parte del documento es obligatoria, ya que es aqu donde reside el verdadero contenido de la pgina, y por tanto, al contrario del HEAD, s se ve cuando navegamos por ella. Los documentos que contienen marcos reemplazan el elemento BODY por el elemento FRAMESET <frameset> </frameset> El cuerpo de un documento HTML contiene el texto con la presentacin y los efectos que se quieren. Esto quiere decir que los espacios, tabulaciones y retornos de carro que se introduzcan en el fichero fuente no tienen ningn efecto a la hora de la visualizacin del documento. Los siguientes atributos van colocados a continuacin de la etiqueta <body> y tendrn vigencia a lo largo de todo el documento. Se podr colocar ms de un atributo en el mismo cuerpo: <body atributo=... atributo=> </body> background Este atributo coloca una imagen como fondo de la pgina, en general esta imagen se repite para rellenar el fondo. Es generalmente un fichero .gif o .jpg que tendr que ir acompaada de su ruta. <body background=imagen.gif> texto del documento </body>

Bgcolor Este atributo cambia el color de fondo de la pgina Text Este atributo define el color de texto a lo largo de toda la pgina Link Este atributo cambia el color del texto de los vnculos de hipertexto no visitados Vlink Este atributo cambia el color del texto de los vnculos de hipertexto visitados Alink Este atributo cambia el color del texto de los vnculos de hipertexto cuando son activados <BODY BGCOLOR="Black" <BODY BACKGROUND="imagen/imgfondo/azul.gif" TEXT="White" LINK="Green" VLINK="Red" ALINK="Blue"> <FONT SIZE="6"> Texto de prueba <br> <A HREF="#"> Enlace </A></FONT> </BODY> Estos cinco ltimos atributos (atributos ms comunes) manejan colores que se expresan, bien, mediante su cdigo hexadecimal (ejemplo:#xxyyzz son seis dgitos, encabezados por #, y que pueden ser nmeros de 0 a 9 y letras de la A a la F, en donde xx sera la cantidad de rojo, yy la cantidad de verde y zz la cantidad de azul, ya que trabajamos con RGB) o bien, usando alguno de los nombres (escritos en ingls) predeterminados que hay para los colores. Una muestra de ellos aparece en la siguiente tabla:
Nombres White Red Green Blue Magenta Cyan Yellow Cdigo hexadecimal #FFFFFF #FF0000 #00FF00 #0000FF #FF00FF #00FFFF #FFFF00

Usando hojas de estilo, se podra conseguir el mismo efecto con la ventaja de poder cambiar la presentacin sin tener que revisar el documento fuente HTML. Para hacer uso de estas hojas se hace desde el encabezamiento <head> porque se usarn a lo largo de todo el documento: <head> <link rel=stylesheet type=text/css href=estilos.css> </head> En el fichero estilos.css es donde previamente hemos introducido los estilos que queremos que aparezcan a lo largo de toda la pgina.

Tabla de cdigos hexadecimal La codificacin de estos colores est basada en mezclas cromticas RGB (RED, GREEN

BLUE). La cantidad de cada color est definida por el cdigo que utilizamos. Si los cortamos en 3 grupos de dos de izquierda a derecha, obtendremos la cantidad de cada color.

Tablas El elemento bsico de definicin de tabla es el elemento <table> </table> y en su interior se disponen los subelementos: <tr> para definir una fila <th> para definir una cabecera <td> para definir una celda de datos. Estos subelementos tambin han de llevar sus correspondientes cierres: </tr> </th> </td>. Una cabecera <th> es lo mismo que una celda de datos <td> pero de forma automtica el texto de su contenido recibe los atributos de negrita y centrado. Slo es posible definirlas al principio de las filas, de las columnas o de ambas a la vez. Atributos: Border: especifca la anchura, en nmero de pxeles del borde de la tabla. Su valor por defecto es 1, aunque el borde no ser visible salvo que se indique expresamente de la forma <table border>. Un valor cero indica que no existe borde. Bordercolor: color del borde de la tabla Background: imagen de fondo: Se coloca en forma de mosaico dentro de cada celda, como la imagen de fondo de una pgina. Bgcolor: color de fondo de las celdas de la tabla. Su formato es bgcolor=(expresado en formato #RRGGBB o dado por su nombre. Rowspan: extiende una celda a varias filas. Formato: rowspan= n de filas Colspan: extiende una celda a varias columnas. Formato: colspan= n de columnas Align: permite alinear horizontalmente el contenido de la celda. Los valores pueden ser Leith, center y right. Por defecto es Leith. Valign: permite alinear verticalmente el contenido de la celda. Los valores pueden ser top, middle y bottom. Por defecto es middle. Width: anchura de la tabla. Puede venir expresada de manera absoluta, en nmero de pxeles, o en porcentaje respecto a la anchura total de la ventana del navegador. En la celda es la anchura de la celda. Heigth: altura de la tabla. En la celda es la altura de la celda. Cellpadding: espacio entre el contenido de la celda y los bordes de esta. Cellspacing: espacio entre celdas.

<TABLE BORDER=2> <TR> <TD>A</TD> <TD>B</TD <TD>C</TD> </TR> <TR> <TD>D</TD> <TD>E</TD> <TD>F</TD> </TR> </TABLE>

<TABLE BORDER=2> <TR> <TD>Item 1</TD> <TD ROWSPAN=2>Item 2</TD> <TD>Item 3</TD> </TR> <TR> <TD>Item 4</TD> <TD>Item 5</TD> </TR> </TABLE>

<TABLE BORDER=2> <TR> <TD>Item 1</TD> <TD COLSPAN=2>Item 2</TD> </TR> <TR>

<TD>Item 3</TD> <TD>Item 4</TD> <TD>Item 5</TD> </TR> </TABLE>

<TABLE BORDER=2> <TR> <TH>Head1</TH> <TH>Head2</TH> <TH>Head3</TH> </TR> <TR> <TD>A</TD> <TD>B</TD> <TD>C</TD> </TR> <TR> <TD>D</TD> <TD>E</TD> <TD>F</TD> </TR> </TABLE>

<TABLE BORDER=2> <TR> <TH COLSPAN=2>Head1</TH> <TH COLSPAN=2>Head2</TH> </TR> <TR> <TH>Head3</TH> <TH>Head4</TH> <TH>Head5</TH> <TH>Head6</TH> </TR> <TR> <TD>A</TD> <TD>B</TD> <TD>C</TD>

<TD>D</TD> </TR> <TR> <TD>E</TD> <TD>F</TD> <TD>G</TD> <TD>H</TD> </TR> </TABLE>

<TABLE BORDER=2> <TR> <TH ROWSPAN=2>Head1</TH> <TD>Item1</TD> <TD>Item2</TD> <TD>Item3</TD> <TD>Item4</TD> </TR> <TR> <TD>Item5</TD> <TD>Item6</TD> <TD>Item7</TD> <TD>Item8</TD> </TR> <TR> <TH>Head2</TH> <TD>Item9</TD> <TD>Item10</TD> <TD>Item3</TD> <TD>Item11</TD> </TR> </TABLE>

<TABLE BORDER=2> <TR> <TD> <TH ROWSPAN=2></TH> <TH COLSPAN=2>Media</TH> </TD> </TR> <TR> <TD><TH>Altura</TH>

<TH>Peso</TH> </TD> </TR> <TR> <TH ROWSPAN=2>Sexo</TH> <TH>Hombres</TH> <TD>1.9</TD> <TD>85</TD> </TR> <TR> <TH>Mujeres</TH> <TD>1.7</TD> <TD>60</TD> </TR> </TABLE>

<TABLE BORDER=2> <TR> <TD>1</TD> <TD>2</TD> <TD>3 <TABLE BORDER=2> <TR> <TD>A</TD> <TD>B</TD> </TR> <TR> <TD>C</TD> <TD>D</TD> </TR> </TABLE> </TD> </TR> <TR> <TD>4</TD> <TD>5</TD> <TD>6 </TR> </TABLE> Cdigos Existen diversos sistemas operativos dentro del mundo de los ordenadores que no son otra cosa que unos programas especiales que se ejecutan inmediatamente despus de encender el ordenador. Junto con estos programas, los ordenadores cargan en memoria unas tablas especiales (tabla de cdigos) que coinciden con los caracteres que tiene su teclado y algunos ms que no estn en el mismo, pero que se pueden escribir en pantalla por otros medios.

Estas tablas, desafortunadamente, no son siempre las mismas, y varan de un sistema a otro, de una marca de ordenador a otra, y por supuesto, de un idioma a otro. Dado que el HTML pretende ser un lenguaje universal, y que una pgina debe verse como su creador desea, sin importar si estamos ante un ordenador que "habla" en ingls o en espaol, o que tiene tal o cual sistema operativo, se ha creado una tabla de caracteres "conflictivos" que se escriben con un cdigo en lugar de pulsar la tecla que lo contiene directamente. TABLA DE CARACTERES CONFLICTIVOS & &amp; &uml; &Agrave; &Aring; &agrave; &aring; < &lt; &acute; &Aacute; &AElig; &aacute; &aelig; > &gt; &reg; &Acirc; &Ccedil; &acirc; &ccedil; " &quot; &copy; &Auml; &Ntilde; &auml; &ntilde;

TABLA DE CDIGOS Caracter ! " # $ % & ' ( ) * + , . / 0-9 : Cdigo &#33; &#34; &#35; &#36; &#37; &#38; &#39; &#40; &#41; &#42; &#43; &#44; &#45; &#46; &#47; &#48; - &#57; &#58; Descripcin Cerrar exclamacin Dobles comillas Signo de nmero Dlar Tanto por ciento Ampersand Apstrofe Abrir parntesis Cerrar parntesis Asterisco Signo ms Coma Guin Punto Barra de divisin Dgitos del al 0-9 Dos puntos Alias ------------------

; < = > ? @ A-Z [ \ ] ^ _ ` a-z { | } ~

&#59; &#60; &#61; &#62; &#63; &#64; &#65; - &#90; &#91; &#92; &#93; &#94; &#95; &#96; &#97; - &#122; &#123; &#124; &#125; &#126; &#160;

Punto y coma Menor Igual Mayor Cerrar interrogacin Arroba Letras A-Z Abrir corchete (izquierdo) Barra inversa Cerrar corchete Circunflejo Subrayado Acento agudo Letras a-z Abrir llave Barra vertical Cerrar llave Tilde Espacio sin separacin Abrir exclamacin Centavo Libra Esterlina Signo de divisa general Yen Barra vertical partida (pipe) Seccin Diresis Copyright Doa Abrir comillas francesas No (smbolo lgico) Guin dbil

-&lt; -&gt; --------------&nbsp; &iexcl; &cent; &pound; &curren; &yen; &brvbar; &sect; &uml; &copy; &ordf; &laquo; &not; &shy;

&#161; &#162; &#163; &#164; &#165; &#166; &#167; &#168; &#169; &#170; &#171; &#172; &#173;

&#174; &#175; &#176; &#177; &#178; &#179; &#180; &#181; &#182; &#183; &#184; &#185; &#186; &#187; &#188; &#189; &#190; &#191; &#192; &#193; &#194; &#195; &#196; &#197; &#198; &#199; &#200; &#201; &#202; &#203; &#204; &#205;

Registrado Macrn Grados Ms-menos Dos superndice Tres superndice Acento agudo Micro Fin de prrafo Punto medio Cedilla Uno superndice Gnero masculino Cerrar comillas francesas Un cuarto Un medio Tres cuartos Abrir interrogacin A mayscula, acento grave A mayscula, acento agudo A mayscula, acento circunflejo A mayscula, tilde A mayscula, diresis A mayscula, anillo AE mayscula C cedilla mayscula E mayscula, acento grave E mayscula, acento agudo E mayscula, acento circunflejo E mayscula, diresis I mayscula, acento grave I mayscula, acento agudo

&reg; &macr; &deg; &plusmn; &sup2; &sup3; &acute; &micro; &para; &middot; &cedil; &sup1; &ordm; &raquo; &frac14; &frac12; &frac34; &iquest; &Agrave; &Aacute; &Acirc; &Atilde; &Auml; &Aring; &Aelig; &Ccedil; &Egrave; &Eacute; &Ecirc; &Euml; &Igrave; &Iacute;

&#206; &#207; &#208; &#209; &#210; &#211; &#212; &#213; &#214; &#215; &#216; &#217; &#218; &#219; &#220; &#221; &#222; &#223; &#224; &#225; &#226; &#227; &#228; &#229; &#230; &#231; &#232; &#233; &#234; &#235; &#236; &#237;

I mayscula, acento circunflejo I mayscula, diresis Eth mayscula Ee mayscula O mayscula, acento grave O mayscula, acento agudo O mayscula, acento circunflejo O mayscula, tilde O mayscula, diresis Signo de multiplicacin O barrada mayscula U mayscula, acento grave U mayscula, acento agudo U mayscula, acento circunflejo U mayscula, diresis Y mayscula, acento agudo THORN mayscula Beta minscula a minscula, acento grave a minscula, acento agudo a minscula, acento circunflejo a minscula, tilde a minscula, diresis a minscula, anillo ae mnuscula c cedilla minscula e minscula, acento grave e minscula, acento agudo e minscula, acento circunflejo e minscula, diresis i minscula, acento grave i minscula, acento agudo

&Icirc; &Iuml; &ETH; &Ntilde; &Ograve; &Oacute; &Ocirc; &Otilde; &Ouml; &times; &Oslash; &Ugrave; &Uacute; &Ucirc; &Uuml; &Yacute; &THORN; &szlig; &agrave; &aacute; &acirc; &atilde; &auml; &aring; &aelig ; &ccedil; &egrave; &eacute; &ecirc; &euml; &Igrave; &iacute;

&#238; &#239; &#240; &#241; &#242; &#243; &#244; &#245; &#246; &#247; &#248; &#249; &#250; &#251; &#252; &#253; &#254; &#255;

i minscula, acento circunflejo i minscula, diresis eth minscula ee minscula o minscula, acento grave o minscula, acento agudo o minscula, acento circunflejo o minscula, tilde o minscula, diresis Signo de divisin o barrada minscula u minscula, acento grave u minscula, acento agudo u minscula, acento circunflejo u minscula, diresis y minscula, acento agudo thorn minscula y minscula, diresis

&icirc; &iuml; &eth; &ntilde; &ograve; &oacute; &ocirc; &otilde; &ouml; &divide; &oslash; &ugrave; &uacute; &ucirc; &uuml; &yacute; &thorn; &yuml;

Creacin de enlaces (links) Los links (hipertexto) permiten realmente "navegar" por uno o varios documentos, que pueden residir en cualquier parte, parecindonos que siempre estamos en el mismo. Un link es un rea de la pantalla (que pueden contener una o varias palabras o una imagen) que es "sensible" al puntero del ratn, y al ponerlo sobre ella y pulsar el botn izquierdo el visualizador llamar a la pgina que tiene asignada el link. Habitualmente por defecto los visualizadores sealan un rea linkada subrayndola, si es texto, o ponindole un borde si es una imagen, ambas cosas en color azul. Una vez accedido, el enlace cambia de aspecto para informar al usuario que ya ha sido visitado. Pero esto se puede parametrizar con una instruccin de estilo. Esto podemos hacerlo de tres formas distintas: 1. En la declaracin de estilos global de la pgina con el elemento <STYLE></STYLE> que va en la cabecera del documento html y que utiliza la estructura: A:link{atributos} para enlaces normales A:visited{atributos} para enlaces visitados A:active{atributos} para enlaces activos A:hover{atributos} cuando el ratn est sobre ellos

2.- Tambin podemos definir el estilo de cada enlace en la propia etiqueta <A>, con el atributo style. De esta manera podemos hacer que determinados enlaces de la pgina se vean de manera distinta.

3.- Mediante un enlace a una hoja de estilo externa: los estilos pueden almacenarse en un documento independiente (fichero de texto que contiene unicamente las definiciones de los estilos y que tiene la extensin.css) y enlazarse al documento HTML mediante el elemento LINK, que tiene el siguiente formato: <LINK REL=stylesheet Type=text/css Href=url> siendo url el URL del documento que contiene la hoja de estilo externa (p.ej, estilo.css). La ventaja de este mtodo es que se pueden aplicar varias hojas de estilo a una misma pgina. Si se desea modificar el estilo de un elemento HTML no hay que modificar todas las pginas, sino tan slo la hoja de estilo. Tambin es posible definir varios estilos para un mismo elemento. Para ello se da un nombre a cada estilo y posteriormente se asocian al elemento deseado mediante el atributo class. En la hoja de estilo se escriben los nombres de los estilos detrs del nombre del elemento separados por un punto. Incluso es posible definir un estilo para utilizarlo en ms de un elemento. En este caso se omite el nombre del elemento. Para aplicar dicho estilo se usa igualmente el atributo class. El formato para definir estas clases sera un punto seguido del nombre de la clase y entre llaves los atributos de estilos (Nombre de la clase {atributo:valor; atributo2:valor2;})

deseados. Una vez tenemos una clase, podemos utilizarla en cualquier etiqueta HTML. Para ello utilizaremos el atributo class, ponindole como valor el nombre de la clase, de esta forma: <ETIQUETA class="nombredelaclase"> Para crear links utilizamos el elemento <A></A>. Tiene los atributos href y name. CREACIN DE ENLACES Dentro de la misma pgina La estructura sera la siguiente: <A href="#destino">texto o imagen del enlace</A> Y en el sitio del documento a donde queremos ir pondremos: <A name="destino"></A> El atributo name se utiliza para definir algo as como "un punto de aterrizaje" en cualquier lnea del documento de destino (de forma que nos aparecer en pantalla desde la lnea deseada y no desde el principio). Esto es muy til cuando se trata de documentos largos divididos en secciones. Tambin se puede utilizar para crear enlaces con pginas diferentes de la activa.

A otra pgina <A href="nombredelfichero.html">texto o imagen del enlace</A>. Si la pgina a la que quiero saltar est en otro directorio debo especificar la ruta, teniendo en cuenta que para subir un nivel se ponen dos puntos seguidos.

A una pgina externa Una vez conocida la direccin (o URL) la colocamos como destino del vnculo: <A href=url de destino>texto o imagen del enlace</A>. Por ejemplo, si queremos enlazar con la pgina de Netscape: <A href=http://home.netscape.com/>Netscape</A>. A una direccin de mail <A href=mailto:direccin de e-mail>texto o imagen del enlace</A>. Se debe tener en cuenta, que siempre es recomendable hacer explcita la direccin de e-mail en el texto del enlace, para el conocimiento del visitante. Nota: Para todos los ejemplos de imgenes se va a usar el ejemplo de logotipo del aula. En el de mapa de imgenes est por ver. IMGENES Las imgenes hacen ms atractivo e informativo nuestro documento web. Segn el tipo de grficos usados se pueden conseguir efectos sorprendentes pero su abuso puede conllevar lentitud, distraccin y dificultad para el usuario. Hay distintos tipos de imgenes. Las ms usadas son .gif o .png para dibujos y .jpg para fotos. Estos archivos son interpretados directamente por el navegador. Tabla breve de diferencias entre los tres formatos:

.gif

.png

.jpg

Compresin reas Transparentes Colores Animaciones

Muy buena para dibujos Muy buena para dibujos, Muy buena para DIBUJOS entre 10 % y 30% ms fotografas FOTOGRAFIAS que .gif S 256 colores o menos Permite crear pequeas animaciones Libre patente. Pretende ser el sustituto del .gif. Est diseado para la web, por lo que permite la visualizacin progresiva. De momento solo lo soportan navegadores de ltima generacin S No se pueden crear reas transparentes

16,7 millones de colores 16 millones de colores

Varios

Insertar y alinear Para insertar imgenes en nuestro documento web utilizaremos la etiqueta <img> (no necesita cierre) y el atributo src (obligatorio), donde escribiremos la ruta y el nombre del fichero. Las reglas para indicar la ruta del fichero son las mismas que las de los enlaces.

Podemos centrar la imagen de esta forma:

Para trabajar con la imagen en relacin con el texto debemos usar el atributo align (left, right, top, bottom, middle):

Dimensiones y marcos Podemos redimensionar la imagen con los atributos width y height, donde le indicaremos el tamao en pxeles. Para aadir un marco usaremos el atributo border, que define el tamao en pxeles del cuadro que rodea la imagen. O bien, forzar su situacin en el documento con los atributos hspace y vspace, que definen espacio libre, en pxeles.

Imgenes como enlaces Una imagen, al igual que un texto, puede usarse como enlace: <a href="http://apl.cesga.es/aula.asp"><img src="aula.gif"></a>

Imgenes como fondos Podemos usar una imagen como fondo de nuestra pgina incluyendo las instrucciones necesarias en la etiqueta <body>: <body background="aula.gif"> Tambin podemos insertar una imagen en la celda de una tabla, o bien usarla como fondo de tabla (<table border background=aula.gif>) o como fondo de celda (<tr><td background=aula.gif>texto</td></tr>). Mapa de imgenes Con los mapas de imgenes se puede conseguir que distintas secciones de una misma imagen correspondan a distintos enlaces. Para ello, es necesario usar las etiquetas <map> y <area>.

Para construir los mapas de imgenes, debemos crear dos partes: la imagen (estar situada dentro de la etiqueta <body> de nuestro documento HTML) y el cdigo (situado en el interior de la etqueta <map>, que delimitar por lneas geomtricas imaginarias cada una de las reas de los enlaces presentados en la imagen). Alt: para indicar un texto que se mostrar cuando situemos el ratn en el rea. Shape: indica el tipo de rea. Existen tres tipos: rect, circle y poly. Coords: las coordenadas que definen el rea. Sern un grupo de valores numricos distintos dependiendo del tipo de rea (shape) que estemos definiendo. Href: para indicar el destino del enlace correspondiente al rea. <area shape="RECT" coords="x1,y1,x2,y2" href="#"> <area shape="CIRCLE" coords="x1,y1,r" href="#"> <area shape="POLY" coords=" x1,y1, x2,y2, x3,y3, x4,y4" href="#">

Las imgenes en el navegador Si el usuario tiene deshabilitada la opcin de cargar imgenes del explorador, o no las soporta, es conveniente ofrecer un texto alternativo con el atributo alt: <img src="aula.gif" alt="icono del aula de productos lcteos"> De esta forma, aparece un texto breve explicativo en el lugar donde deba estar ubicada la foto. As mismo, aunque el explorador admita las imgenes, este texto aparecer en el lugar de la foto mientras no se cargue por completo esta ltima. No se deben incluir demasiadas imgenes o demasiado grandes en la pgina web. Tambin es recomendable indicar los atributos width y heigth al disear, ya que as se reserva el espacio en ventana al cargar el documento, y el usuario puede ir leyendo sin que se muevan de un lado para otro los prrafos.

FORMULARIOS El formulario es el instrumento que nos permite solicitar informacin al usuario que nos visita. El formulario es un elemento ms de nuestro documento html, con sus etiquetas y atributos. Es un contenedor de tantos controles como datos queramos obtener, cada uno a su vez, con su correspondiente etiqueta y atributo (entradas de texto, botones, casillas de verificacin, mens, controles ocultos,). Con HTML slo podemos enviar el contenido por e-mail. Para procesar los datos mediante un programa, es necesario emplear otros lenguajes de programacin como ASP o PHP, o bien usar algunos de los programas prediseados que nos ofrecen los servidores. ASP y PHP: Son lenguajes de programacin, que a diferencia de html, que se ejecuta en el navegador del cliente, estos se ejecutan en el servidor y nos enva la informacin en forma de html al cliente. Estos lenguajes desarrollan pginas dinmicas, que son muy tiles para la explotacin de bases de datos. El http es el protocolo de envo de datos de hipertexto. Es de naturaleza no persistente: no recoge ni trata datos y son necesarios estos otros programas para realizar las labores de gestin en bases de datos. Creacin de formularios Para crear un formulario en nuestra pgina, debemos emplear la etiqueta <form>, con su correspondiente cierre obligatorio </form>. Sus atributos son: action="" Especificamos la accin que va a realizar el formulario cuando lo enviemos. Podemos enviarlo por correo (mailto) o bien indicar la ruta y nombre del programa que manejar el formulario completado y enviado.

<form action="mailto:direccionde@correo.es" ...> <form action="direccin/delarchivo" ...> method="" Aqu indicamos el mtodo de transferencia de los contenidos de los campos (variables): - get enva los datos a travs de la direccin URL, y se usa en los casos en que los datos no implican efectos secundarios, como por ejemplo, una bsqueda. - post los enva a travs de stdio para que sean recogidos por un programa CGI, y se usa en los casos en que, por ejemplo, se va a modificar una base de datos. enctype="" Se utiliza para indicar la forma en la qu viajar la informacin que se mande por el formulario. El caso ms sencillo es enviar el formulario por correo electrnico; entonces indicaremos que el atributo debe de ser "text/plain". As se enviar como texto plano por correo electrnico. Para que al enviar el formulario lo recoja otro programa, dejaremos que use su valor por defecto. Depende de qu queramos realizar con los datos. Si lo enviamos sin poner ningn parmetro al elemento ACTION los datos llegarn as: CAMPO1=Esto+es+una&CAMPO2=demostracion+de+formularios y poniendo ENCTYPE="TEXT/PLAIN" as CAMPO1=Esto es una CAMPO2=demostracion de formularios Si decidimos que el formulario sea enviado por correo electrnico, debemos tener en cuenta que el usuario puede no tener configurada una cuenta, con lo cual, esos datos nunca sern enviados. Lo ms conveniente es enviarlos por method=post y que los recoja otro programa. Si no disponemos de uno que nos gestione esos datos, nuestro proveedor de servicios nos facilitar uno. A los programas que hacen de puente entre el formulario y el servidor, se les llama programas CGI (Common Gateway Interface). <form method="POST" action="mailto:mi-usuario@miservidor-e-mail"> ...... </form> En este caso, se enva el formulario (identificado con el atributo name) a un programa CGI en un servidor: <form name="mi_formulario" method="POST" action="http://miserver.midominio.mipais/cgi-bin/test2-cgi"> </form> Elementos que lo componen Un formulario contiene texto y controles de formulario que hemos agrupado de esta forma: Elementos de entrada Seleccin, de botn Accin Textarea En este sencillo ejemplo y sin formatos, podemos ver representados los cuatro grupos.

Cuadro para texto:

Elementos de entrada y seleccin: Caja de texto <input type="text">

Atributos comunes a los controles input: name define el nombre de la ventana, que es un campo del registro. size define el tamao de la caja en nmero de caracteres. maxlength = tamao mximo de caracteres que admite este campo de formulario. value = valor inicial que toma el campo. id = este atributo asigna un nombre a un elemento. Este nombre debe ser nico en un documento.

<input type="password"> De esta forma escondemos el texto escrito por medio de asteriscos, por ejemplo, para la introduccin de datos confidenciales. <input type="hidden"> Formato oculto que no aparece en nuestro documento. Se usa por ejemplo, cuando debemos enviar una valor fijo o un valor resultado de otros del formulario, sin que el usuario lo vea o intervenga. Casillas de verificacin (checkboxes)

Casillas de radiobotons (radiobuttons)

Listas de opciones y mens Permite elegir una nica opcin del men desplegable.

Con el elemento select, la longitud de la ventana de seleccin se autoajusta al valor ms largo de la lista. Adems, la ventana de seleccin, por defecto, muestra una lnea, si se quieren mostrar ms se utilizar el atributo size. Si se desea que un elemento en concreto de la lista est preseleccionado, habr que aadir el elemento selected dentro del atributo option. ELEMENTOS DE BOTN Y ACCIONES Botones de envo <input type="submit" value="Enviar"> Este tipo de botn captura los datos del formulario y ejecuta lo determinado en el atributo action del form.

Botones de reinicializacin <input type="reset" value="Borrar"> Al ser pulsado inicializa todos los campos del formulario. Botones pulsadores <input type="button" value="Texto escrito en el botn"> Es un botn muerto, no tiene un comportamiento por defecto. Suele utilizarse para asociarle instrucciones script mediante determinados eventos. Por ejemplo, si el usuario pulsa el ratn, o lo suelta, se acciona el script asociado. (estos dos apartados se ven ms adelante) ELEMENTO TEXTAREA Si lo que queremos es que el usuario escriba un comentario que puede llegar a ocupar varias lneas, incorporaremos a nuestro formulario la etiqueta <textarea> con su correspondiente cierre </textarea>. Podremos modificar los valores por defecto con los siguientes atributos : - rows define el nmero de lneas - cols define el nmero de columnas Podemos escribir un comentario por defecto entre las etiquetas

TYPE=IMAGE Usando este tipo en un formulario, obtendremos una imagen sensible al ratn que realizar la funcin de un tipo submit. Nos devolver los datos del formulario y, adems, los parmetros .x=n .y=n donde n son los nmeros de las coordenadas x y del punto en el que estaba el ratn en el momento del envo. Usando este tipo en un formulario, obtendremos una imagen sensible al ratn que realizar la funcin de un tipo submit. Nos devolver los datos del formulario y, adems, los parmetros .x=n .y=n donde n son los nmeros de las coordenadas x y del punto en el que estaba el ratn en el momento del envo. No se debe confundir con el uso de imgenes como enlaces o mapas de imgenes, ya que no son propias de formularios, imprescindible para el envo de datos. Ejemplos: Uso de los botones para redireccionamiento a pginas remotas o locales:

Seleccin mltiple con select:

<CENTER> <TABLE BORDER> <TR> <TD>Nombre:</TD> <TD> <INPUT TYPE="text" NAME="nombre" SIZE=18 MAXLENGTH=18> F.Nac.: <INPUT TYPE="text" NAME="edad" SIZE=8 MAXLENGTH=8> DNI: <INPUT TYPE="text" NAME="dni" SIZE=8 MAXLENGTH=8></TD> <TR> <TD>Apellidos:</TD> <TD> <INPUT TYPE="text" NAME="apellidos" SIZE=48 MAXLENGTH=48></TD> <TR> <TD>Calle y nmero:</TD> <TD> <INPUT TYPE="text" NAME="domicilio" SIZE=48 MAXLENGTH=48></TD> <TR> <TD>Cdigo Postal:</TD> <TD> <INPUT TYPE="text" NAME="postal" SIZE=5 MAXLENGTH=5>Ciudad: <INPUT TYPE="text" NAME="localidad" SIZE=36 MAXLENGTH=36></TD>

<TR> <TD>Provincia: </TD> <TD> <INPUT TYPE="text" NAME="provincia" SIZE=20 MAXLENGTH=20> Telfono: <INPUT TYPE="text" NAME="telefono" SIZE=19 MAXLENGTH=19></TD> <TR> <TD>Opcin:</TD> <TD> <SELECT NAME="OPCION"> <OPTION>OPCION 1 <OPTION>OPCION 2 <OPTION>OPCION 3 <OPTION>OPCION 4 <OPTION>OPCION 5 </SELECT>Escoja una opcin</TD> <TR> <TD>Comentarios<BR> personales:</TD> <TD> <TEXTAREA NAME="coment" ROWS=2 COLS=48></TEXTAREA></TD> <TR> <TD><B>Pulse aqu:</B></TD> <TD ALIGN=CENTER> <INPUT TYPE="submit" VALUE="Enviar datos "> <INPUT TYPE="reset" VALUE="Borrar los datos"></TD> 75</TABLE> </CENTER> </FORM>

DIRIGIR EL FOCO HACIA UN ELEMENTO

Para poder trabajar con un elemento, el usuario debe dirigir el foco para que ste se active. Por ejemplo, si desea introducir texto en un elemento de texto. Hay distintas maneras de dirigir un foco: Designar el elemento con un dispositivo apuntador Navegar con el tabulador Seleccionar el elemento por medio de una tecla de acceso

NAVEGACIN CON TABULADOR

Usamos el atributo tabindex, al cual le asignamos un valor entre 0 y 32767. Incluyendo este atributo en los elementos anteriormente descritos o en un enlace (<a></a>), indicamos el orden en que el foco se dirige hacia los elementos por medio del teclado. Por lo general se dirige el foco con la tecla tabulador y se selecciona con la tecla enter (depende de la configuracin del sistema).

El orden de la navegacin ser: Los elementos con tabindex positivo definido, de menor a mayor Despus los elementos que no soporten el atributo tabindex, o los que soporten, pero tengan valor 0. Todos segn el orden en el que aparezcan en el flujo de caracteres Al llegar la navegacin a un elemento de grupo (radiobotn o casilla de verificacin), nos moveremos entre ellos con las flechas de teclado.

TECLAS DE ACCESO Usamos el atributo accesskey para definir una tecla de acceso. Cada elemento (un elemento textarea situar el cursor para poder escribir en l, un radiobotn cambiar su valor y un enlace nos llevar a su destino) reaccionar de forma distinta al acceder a l. Soportan este atributo los elementos anteriormente descritos y los enlace (<a></a>). Se invocan las teclas de acceso dependiendo del sistema. Por ejemplo, en mquinas que ejecuten MS Windows, normalmente hay que pulsar la tecla "alt" adems de la tecla de acceso. En sistemas Apple, normalmente hay que pulsar la tecla "cmd" adems de la tecla de acceso. Es recomendable indicar claramente en el formulario cual es la tecla de acceso a ese elemento, por ejemplo, subrayndola.

CONTROLES DESHABILITADOS Y DE SOLO LECTURA En ocasiones es necesario que algunos campos del formulario estn desactivados o sean de slo lectura, en previsin a cualquier accin no deseada por parte del usuario. Por ejemplo, deberamos tener desactivado el botn de envo de un formulario hasta que el usuario no haya cubierto los campos obligatorios. En la definicin del formulario, deberamos indicar el atributo disabled. Si un elemento esta deshabilitado, no se pueden recibir datos del usuario. <input disabled type="submit" value="Confirmar"> Con el atributo readonly impedimos que existan cambios en el control. Por ejemplo, lo podemos usar para incluir al envo del formulario unos datos fijos, y de esta forma, el usuario no los puede modificar. La nica manera de modificar dinmicamente los atributos disabled y readonly es mediante un script. Se ver en un captulo ms avanzado. EVENTOS ASOCIADOS A un elemento determinado le podemos asociar una accin al ocurrir un evento concreto. Este nos permite llamar a un script, y de esta forma, poder realizar una accin concreta ms avanzada. Por ejemplo, cuando en una casilla de nmeros, al perder el foco, llamamos a un script que verifique que realmente solo hay nmeros, y si no es as, avisar al usuario y recuperar el foco para corregir. <input type="text" size="8" maxlength="8" name="dni" ...onblur=javascript:validanum()> EVENTOS EXCLUSIVOS ASOCIADOS AL FORMULARIO

onsubmit onreset

El formulario fue enviado El formulario fue reinicializado

EVENTOS EXCLUSIVOS ASOCIADOS A LOS CONTROLES DEL FORMULARIO onfocus onblur onselect onchange El foco se dirigi hacia el elemento El elemento perdi el foco Se seleccion parte del texto El valor del elemento fue modificado

TABLA DE CDIGOS DE CONVERSIN EN FORMULARIOS La tabla de cdigos de conversin decimal-hexadecimal es necesaria para conocer la conversin de caracteres que realiza el visualizador Netscape para Windows en los formularios. El espacio en blanco es traducido como +. Los visualizadores que trabajan en Windows envan al final del registro los cdigos 0D (decimal 13) y 0A (decimal 10) que son el retorno de carro y salto de lnea respectivamente y por ese orden. Ver tabla de cdigos en el captulo sobre los cdigos en este mismo bloque.

MARCOS (FRAMES) Los frames, que traducido sera algo as como marcos o cuadros, son reas definidas dentro de una misma ventana, cada cual como una pgina independiente y por tanto con contenidos distintos, aunque puedan estar relacionados. ESTRUCTURA Y DEFINICIN Un documento con frames tiene la estructura bsica de un documento normal de html, pero el elemento <body> es reemplazado por el elemento <frameset> y su correspondiente cierre </frameset>, que describe los documentos que contendr cada frame. La estructura de una pgina que contenga frames podra ser la siguiente: <html> <head> <title> Definicin de Frames</title> </head> <frameset cols=30%,70%> <noframes> <body> //Esto slo se activa cuando el visualizador no //soporta los frames. Aqu pondramos la accin a //desarrollar en tal caso. </body> </noframes> <frame src=pgina1.htm name=p1>

<frame src=pgina2.htm name=p2> </frameset> </html> Esto sera como una lanzadera que contiene la definicin del frame. Habra que crear tambin las pginas que constituirn el contenido de cada una de las reas definidas en la lanzadera, en este caso, pgina1.htm y pgina2.htm. ATRIBUTOS DE <FRAMESET> Rows : especifica la disposicin de los marcos horizontales. Es una lista de longitudes en pxeles, porcentajes o longitudes relativas, separadas por comas. Cols : especifica la disposicin de los marcos verticales. Es una lista de longitudes en pxeles, porcentajes o longitudes relativas, separadas por comas. Border : anchura en pxeles del borde de los marcos. Framespacing : espaciado entre los marcos. ATRIBUTOS DE <FRAME> Name : asigna un nombre al marco actual. Puede utilizarse como destino de vnculos subsiguientes. Src : Url del documento a mostrar en el marco. Noresize : indica que el marco tiene un tamao fijo que no puede ser modificado por el usuario. Scrolling : (yes/no/auto) especifica la existencia o no de barras de desplazamiento en el marco. Bordercolor : color del borde de los marcos. Frameborder : (yes/no) especifica como se dibuja el borde. Marginheight : altura en pxeles de los mrgenes superior e inferior del marco. Maginwidth : anchura en pxeles de los mrgenes derecho e izquierdo del marco.

MARCOS Y ENLACES DE HIPERTEXTO Cuando se activa un enlace de hipertexto el documento enlazado se carga por defecto en la ventana donde se encuentra el ancla del enlace. Si el ancla se encuentra en un marco, el documento se carga en el propio marco. Con el atributo TARGET del elemento <A> (que puede tomar como valor el nombre del marco dado por el atributo NAME del elemento FRAME) se carga el documento en el marco deseado. Este atributo tambin puede tomar los valores : blank : el documento se carga en una nueva ventana del navegador. self : el documento se carga en el lugar que ocupa el documento actual. parent : el documento se carga en la ventana que contena el documento padre del actual. top : el documento se carga en la ventana que contena el documento inicial.

MULTIMEDIA PGINAS CON SONIDO Netscape implementa en la versin 3.0 los sonidos y el vdeo. Pueden utilizarse indistintamente ficheros de sonido con los formatos WAV, AIFF, AU, MIDI o el nuevo MP3. Tanto un sonido como una secuencia de vdeo se incluyen mediante el elemento <EMBED>. En general, este elemento permite incluir no solo un sonido o un vdeo sino tambin un grfico con formato especial, una hoja de clculo,... Para visualizar estos objetos suele ser necesario un componente extra en el navegador, lo que habitualmente se conoce como plug-in. Este componente suele ser proporcionado por la compaa propietaria del objeto, normalmente de forma gratuita y con versiones para los navegadores ms habituales. Si no existe el plug-in correspondiente al tipo de objeto, el navegador muestra en su lugar un smbolo por defecto y abre una ventana en la que avisa de ello, ofreciendo la posibilidad de descargar el plug-in e incorporarlo al visualizador. ATRIBUTOS DE <EMBED> NAME: nombre del objeto (consola) SRC: indica donde est el fichero de sonido WIDTH, HEIGHT: tamao de la consola medido en pxeles. Son obligatorios (si se omiten, los tamaos por defecto no permiten ver la consola entera, y no es posible activar el sonido). Los tamaos mximos son 160 y 70 respectivamente.

CONTROLS: permite cambiar el aspecto de la consola. Internet Explorer no reconoce el atributo CONTROLS pero tiene uno similar CONTROLLER. Sus posibles valores son: TRUE (muestra la consola, valor por defecto) o FALSE (no muestra la consola). Toma los valores: CONSOLE (por defecto) SMALLCONSOLE (con el atributo SMALLCONSOLE el ancho y alto mximo es 144 y 15 respectivamente) PLAYBUTTON PAUSEBUTTON STOPBUTTON VOLUMELEVER VOLUME: controla el volumen. Toma 50% por defecto. AUTOSTART: determina si el sonido comienza a reproducirse automticamente al terminar la carga de la pgina. Toma los valores TRUE o FALSE (por defecto). HIDDEN: determina si la consola es visible o no. Toma los valores TRUE o FALSE (por defecto). Si la consola es invisible (HIDDEN=TRUE) no puedes activar el sonido, y por tanto lo hace l mismo siempre que no hayas puesto AUTOSTART=FALSE, claro. BORDER: tamao del borde de la consola en pxeles. Toma el valor 0 por defecto. LOOP: puede tomar los valores: TRUE (reproduce continuamente el sonido), FALSE (el sonido se detiene al finalizar la reproduccin) e INTEGER (nmero de veces que deseas que se repita la audicin) HSPACE, VSPACE: espacio horizontal o vertical en pxeles a dejar a izquierda/derecha o arriba/debajo de la consola. ALIGN: especifica la alineacin de la consola con respecto al texto. Sus posibles valores son: TOP; MIDDLE, BOTTOM, LEFT, CENTER O RIGHT. STARTTIME, ENDTIME: indican el punto de comienzo y fin de la audicin respectivamente. El formato sera STARTTIME=mm:ss, ENDTIME=mm:ss. Funciona solo con Windows 95 o Macintosh. Ejemplos: Consola pequea. Repeticin sin fin. Volumen al 40%. Sin autoarranque. <EMBED SRC="mozart.mid" CONTROLS=SMALLCONSOLE WIDTH=144 HEIGHT=15 LOOP=TRUE VOLUME=40 AUTOSTART=FALSE>

Consola grande. Sin repeticin. Volumen al 50% (por defecto). Sin autoarranque. Fragmento entre los 10 y los 20 segundos del fichero (Slo con Windows 95). <EMBED SRC="malu.mid" CONTROLS=CONSOLE WIDTH=160 HEIGHT=70 LOOP=FALSE AUTOSTART=FALSE STARTTIME=00:10 ENDTIME=00:20>

PGINAS CON VDEO

En cuanto a los ficheros de vdeo, los formatos ms utilizados son el AVI y los MPEG. El que se puedan ver o no, depender de que el formato utilizado sea compatible con nuestro reproductor multimedia. Siempre que se incluyan ficheros de vdeo, es buena idea acompaarlo de los codecs (controladores que se instalan en tu mquina y permiten que tu reproductor multimedia pueda decodificar correctamente los distintos formatos de video) necesarios para el reproductor. Igual que con el sonido se utiliza el elemento <EMBED>, pero con menos atributos: SRC, HEIGHT, WIDTH, AUTOSTART, LOOP y ALIGN. Se detiene al terminar la reproduccin. Con autoarranque. <EMBED SRC="america.avi" HEIGHT=300 WIDTH=400 AUTOSTART=TRUE LOOP=FALSE> MULTIMEDIA CON EL MEDIA PLAYER DE WINDOWS ATRIBUTOS DE < EMBED >: TYPE: efecta la llamada al media player SRC: indica donde est el fichero multimedia WIDTH, HEIGHT: tamao de la consola medido en pxeles AUTOSTART: determina que la reproduccin comienza automticamente al terminar la carga de la pgina. Toma los valores 1 (por defecto) o 0. HIDDEN: determina si la consola es visible o no. Toma los valores TRUE o FALSE (por defecto). SHOWCONTROLS: sirve para que la consola muestre los botones de control (start, stop,). Toma los valores 1 (por defecto) o 0. SHOWSTATUSBAR: sirve para que aparezca la barra de estado de la consola. Toma los valores 1 (por defecto) o 0. CLICKTOPLAY: permiten iniciar o parar la ejecucin del fichero multimedia pulsando con el puntero del ratn en la consola, en lugar de en los botones de la barra de controles. Toma los valores 1 (por defecto) o 0. VOLUME: para definir el volumen de sonido. El valor 0 establece el mximo volumen y cualquier valor mayor que 0 establece volumen medio. ALIGN: especifica la alineacin de la consola con respecto al texto. Sus posibles valores son: TOP, MIDDLE, BOTTOM, LEFT, RIGHT, CENTER QU ES STREAMING?

La tecnologa de Streaming se utiliza para aligerar la descarga y ejecucin de audio y vdeo en la web, ya que permite escuchar y visualizar los archivos mientras se estn descargando. Si no utilizamos Streaming, para mostrar un contenido multimedia en la Red, tenemos que descargar primero el archivo entero en nuestro ordenador y ms tarde ejecutarlo, para finalmente ver y or lo que el archivo contena. Sin embargo, el streaming permite que esta tarea se realice de una manera ms rpida y que podamos ver y escuchar su contenido

durante la descarga. Primero nuestro ordenador conecta con el servidor a travs de una red como Internet y ste le empieza a mandar el fichero. El cliente comienza a recibir el fichero y construye un buffer donde empieza a guardar la informacin. Cuando se ha llenado el buffer con una pequea parte del archivo, el cliente lo empieza a mostrar y a la vez contina con la descarga. El sistema est sincronizado para que el archivo se pueda ver mientras que se descarga, de modo que cuando el archivo acaba de descargarse el fichero tambin ha acabado de visualizarse. Si en algn momento la conexin sufre descensos de velocidad se utiliza la informacin que hay en el buffer, de modo que se puede aguantar un poco ese descenso. Si la comunicacin se corta demasiado tiempo, el buffer se vaca y la ejecucin del archivo se cortara tambin hasta que se restaurase la seal. LENGUAJES DE SCRIPT Un lenguaje de script es un lenguaje de programacin cuyo cdigo (se ejecuta en el navegador del usuario cuando se carga la pgina, al pulsar sobre un enlace, el movimiento del foco sobre los elementos,) suele incluirse dentro del documento HTML. Estos lenguajes permiten modificar el contenido del documento dinmicamente, validar formularios, rellenar automticamente partes de un formulario, realizar pequeos trucos visuales, etc... El cdigo de los lenguajes de scripts aparece entre las etiquetas <head> </head> (en el encabezado) y delimitado por las etiquetas <script> y </script> (indicadoras del comienzo y final del cdigo). En la etiqueta script aparece el atributo language (no es obligatorio su uso) que especifica el lenguaje script que se utiliza en el cdigo. Por ejemplo si trabajamos en Javascript se pondr: <script language=javascript> </script> Dentro de estos elementos ser donde se puedan poner funciones en Javascript. Si un navegador no reconoce la etiqueta <script> escribir el cdigo como si fuera un texto, para que esto no ocurra se encerrar entre comentarios mediante sus etiquetas. <!Esto es un comentario --> Los scripts, a veces son ejecutados cuando ocurre un determinado evento, as se podrn asignar a varios elementos usando los atributos de eventos intrnsecos. Uno de estos atributos es Onload (este evento ocurre cuando el usuario finaliza la carga de una ventana).

En este cdigo aparece la funcin Hola y dentro de ella se hace una llamada al mtodo alert (que pertenece al objeto window) que es la encargada de mostrar el mensaje Hola!!! en una ventana aparte. Ntese que las sentencias en Javascript finalizan con ; y las sentencias correspondientes a una funcin, un if, etc. van entre llaves. <script language=javascript> <!-function Ventana(url, nombre, ancho, alto) { ventana1=window.open(url,nombre, 200,300); } --> </script> Esta funcin abrir una ventana, la busca en la direccin url que le pasemos como argumento. ESTILOS CSS (Cascade Style Sheets) Aunque hoy da no es necesario, para evitar posibles errores el da que se generalicen varios lenguajes de estilo distintos, es recomendable poner, dentro de la seccin <HEAD></HEAD>, la siguiente directiva: <META HTTP-EQUIV="Content-Style-Type" CONTENT="text/css"> Esto no es ms que una etiqueta de Metainformacin que indica el tipo de lenguaje de hojas de estilo que se va a usar en el documento. Hoy por hoy no es necesaria, porque CSS es el nico lenguaje reconocido, pero quizs algn da s lo sea. Para escribir una hoja de estilo dentro de la seccin HEAD de la pgina (entre las etiquetas <HEAD> y </HEAD>): <STYLE TYPE=text/css> <!(reglas de estilo) --> </STYLE> LAS LNEAS DE COMENTARIO ( <!-- y -->) Estas lneas son para evitar que los navegadores ms antiguos (que no reconocen CSS) muestren en pantalla las reglas como si fueran texto (lo cual quedara muy feo y poco elegante, claro). Y, donde pone "reglas de estilo", se puede poner todas las que se quiera, siguiendo el formato del tipo de hojas de estilo que se haya especificado en TYPE (en este caso, CSS). Esta forma es, esquemticamente, la siguiente: ETIQUETA { PROPIEDAD: VALOR;}

Como por ejemplo sera: I {text-decoration: underline;} La etiqueta <DIV>...</DIV> es una etiqueta de formato de bloque (igual que, por ejemplo <P>...</P> o <CENTER>...</CENTER>), pero que no modifica en nada a su contenido. Puede usarse para separar bloques y asignarles estilos como se ha visto ms arriba. La etiqueta <SPAN>...</SPAN> se comporta como una etiqueta de formato de lnea (como por ejemplo <B>...</B> o <I>...</I>) y tampoco modifica en nada su contenido, aunque es muy til para dar formato con CSS a palabras o lneas concretas. ESTRUCTURA DE UNA HOJA DE ESTILO CSS

Las hojas de estilo en cascada tienen una estructura muy simple pero muy flexible y potente. Gracias a esto se puede definir la apariencia de cada elemento o grupo de ellos con total comodidad, definir distintas apariencias en funcin del medio por el que se mostrarn y cambiarlas posteriormente, si es necesario, de una forma muy simple y rpida.

SINTAXIS La sintaxis bsica de CSS es muy simple e intuitiva. Consta de una serie de Reglas que describen la forma en que se visualiza cada uno de los elementos del siguiente modo:

Si se quisiera que los prrafos aparecieran centrados y en color rojo, se escribira esto:

P {align: center;} P {color: #ff0000;} La primera regla indica que se quiere una alineacin centrada y la segunda asigna el color rojo. Pero este modo es poco eficiente. Si se desea especificar varias propiedades se tendr que repetir la lnea muchas veces. Para simplificar esto, CSS permite unir varias declaraciones en una misma regla, de modo que lo anterior se podra escribir, de forma mucho ms clara y concisa, del siguiente modo: P {align: center; color: #ff0000;} Las declaraciones se separan unas de otras por medio del signo "punto y coma" (;). Cada propiedad se separa de su valor por medio del signo "dos puntos" (:). Tambin se podra haber escrito en la forma y, la nica diferencia sera la legilibilidad y comodidad a la hora de editar y revisar el cdigo: P{ align: center; color: #ff0000; } Hay veces en que se querr asignar las mismas reglas a varios selectores distintos.

ASIGNAR LAS MISMAS REGLAS A VARIOS SELECTORES DISTINTOS Esto se puede hacer bien repitindolas para cada uno de ellos, o de esta otra manera: H1, H2, P {align: center; color: #ff0000;} Las reglas se aplican a los tres selectores, que han de ir separados por comas, de modo que, tanto las cabeceras de primer y segundo nivel como los prrafos, se mostrarn con alineacin centrada y color rojo. Algunas propiedades pueden tener varios valores. Este es el caso, por ejemplo, de la propiedad FONT, que permite asignar tipo de fuente, tamao, color y varias cosas ms. Esto se puede hacer separando todos los valores de una misma propiedad por espacios en blanco ( ), sin ningn signo de puntuacin, as: P {font: Arial 12/14 #00ff00;} La misma propiedad, FONT, permite elegir varios tipos de fuente para, en el caso de que el sistema no tenga instalado uno de ellos, recurrir al siguiente (si no se encontrase ninguno de ellos, se usara la fuente por defecto del navegador). Esto se hace separando los posibles valores por medio de comas (,): P {font: arial, helvetica, sans-serif;} Tambin se pueden hacer combinaciones algo ms complejas, como la siguiente: H1, H2 {align: center;} H2 {color: #ff0000;} Las cabeceras de primer nivel aparecern centradas y las de segundo centradas y en color rojo. Otra combinacin posible es asignar una regla a un selector slo si este est dentro de otro selector, por ejemplo: LI B {color: #ff0000;} Que asigna color rojo al elemento <B> slo si ste est dentro de un elemento <LI>. No hay

signos de puntuacin separando los selectores, slo un espacio en blanco. A estos se les llama Selectores Contextuales, porque hacen que la apariencia dependa del contexto donde se encuentra el selector. Tambin es posible combinar las reglas anteriores para obtener aplicaciones ms complejas de las reglas: H1, LI B {color: #ff0000;} Que asignara el color a todos los elementos <H1> y a los elementos <B> que estn dentro de un elemento <LI>. CLASES: EL ATRIBUTO CLASS La clase es el nombre que se le asigna a una etiqueta HTML por medio del atributo CLASS para luego poder hacer referencia a ella. Gracias a las clases se pueden asignar propiedades a slo una parte de los selectores de un mismo tipo. El atributo CLASS se usa del siguiente modo: <ETIQUETA CLASS="nombre"> (etiqueta puede ser cualquier elemento al que se le quiera poner un nombre. Nombre es el nombre que se le va a poner) Sirve para poner el mismo nombre a varias etiquetas del mismo tipo, para distinguirlas de las normales y aplicar una misma regla a todas ellas del siguiente modo: ETIQUETA.NOMBRE { PROPIEDAD: VALOR;} Por ejemplo, si se han definido uno o ms prrafos por medio de la etiqueta <P CLASS="azul">, se puede asignar color azul y alineacin a la derecha con la siguiente regla: P.azul {align: right; color: #0000ff;} Esta afectar slo a los prrafos que tengan en su atributo CLASS el valor "azul", sin modificar los dems. La clase se especifica escribindola tras el selector y un punto (sin dejar espacios). Si se omite el selector y se escribe slo un punto y el nombre de la clase, la regla se asignar a todos los selectores que tengan ese nombre de clase (ya sean prrafos, cabeceras, links...).

IDENTIFICADORES: EL ATRIBUTO ID Los identificadores, que se asignan a una etiqueta HTML con el atributo ID, funcionan igual que las clases, pero con la diferencia de que se pueden emplear slo una vez en un documento HTML. Es decir, que si se tiene un prrafo identificado como <P ID="fulano">, ese es el nico elemento, sea prrafo o no, que puede tener ese ID. No puede haber dos elementos con un mismo ID en la misma pgina. Por lo tanto, su uso es mucho ms restringido que el de CLASS, y se usa de esta forma: <ETIQUETA ID=nombre> (etiqueta es el nombre del elemento que se est usando. Nombre es el nombre exclusivo que se le quiere dar a esta) Por ejemplo: <P ID="fulano"> Cuando en la sentencia STYLE se quieren indicar una serie de reglas para una de estas etiquetas, se har del siguiente modo:

#nombre {variable: valor;} Es decir, el signo "almohadilla" (#), seguido del nombre que se le haya puesto y las reglas que se apliquen. Para asignar una regla al prrafo del ejemplo anterior se usar el signo "almohadilla" (#) de la siguiente forma: #fulano {align: center;} Ntese que no se ha puesto el selector (P en este caso). Despus de todo no es necesario, ya que solamente puede existir un "fulano" en todo el documento. LAS PSEUDOCLASES Son un tipo especial de clase que no define el diseador de la pgina, sino que ya estn definidas por el estndar CSS. Actualmente slo existen tres pseudoclases y slo afectan al elemento <A>: A: link A: active A: visited Se corresponden, respectivamente, con los links que an no han sido visitados (A:link), los que estn activos, mientras el navegador busca la direccin a la que hace referencia (A:active), y los que ya han sido visitados (A:visited). Funcionan igual que las clases, pero usando dos puntos (:) para separarlos del selector.

PSEUDOELEMENTOS Los pseudelementos son un tipo especial de clase que describe elementos particulares de la tipografa. Slo existen dos en CSS y los navegadores actuales los ignoran casi totalmente. Se pueden aplicar a cualquier selector de texto, se escriben igual que las pseudoclases (usando dos puntos para separarlos del selector) y son: SELECTOR:first-line SELECTOR:first-letter Donde SELECTOR es el selector al que quiera aplicar el pseudoelemento en cada caso; firstline se refiere a la primera lnea del selector, y first-letter a la primera letra. Por ejemplo: H1: first-letter {color: #ff0000;} P: first-line{color: #00ff00;} Esto asignara un color rojo a la primera letra de las cabeceras de primer nivel y verde a la primera lnea de cada prrafo. TIPOS DE HOJAS DE ESTILO Cmo se aplican las hojas de estilo a una pgina web? Existen tres tipos de aplicacin de estilos para html, segn en qu contexto se usen. Estos tipos son, por orden de especificidad, los siguientes: Reglas de estilo integradas, que se aplican a un solo elemento en un documento HTML Hojas de estilo incrustadas, que se aplican a todo un documento Hojas de estilo externas, que pueden aplicarse a varios documentos Se pueden usar los tres tipos de hoja en un mismo documento y cada uno de ellos tiene preferencia sobre los siguientes.

REGLAS DE ESTILO INTEGRADAS Las reglas de estilo integradas son la forma ms elemental de usar CSS. Se trata simplemente de asignar una regla a una etiqueta HTML por medio de su atributo STYLE de la siguiente forma: <P STYLE="color: #00ff00;"> Este prrafo, y slo este, sin afectar a los dems prrafos del documento aparecer en color rojo. Como se puede ver, es una forma muy simple y poco eficiente de usar CSS, ya que se tendra que repetir la regla por cada uno de los prrafos que se quiera mostrar en ese color. Para poder usar este mtodo sin tener problemas de compatibilidad, se debera poner, en la cabecera del documento HTML (entre las etiquetas <HEAD> y </HEAD>) la siguiente declaracin: <META HTTP-EQUIV="Content-Style-Type" CONTENT="text/css"> Que sirve para avisar al navegador de que el lenguaje que se est usando en las hojas de estilo es CSS. HOJAS DE ESTILO INCRUSTADAS Las hojas de estilo incrustadas se definen en la cabecera de un documento HTML y se aplican a todo este. Para ello se usa la instruccin <STYLE>...</STYLE>, del siguiente modo: <STYLE TYPE="text/css"> <!-Reglas de estilo aqu... ... ... --> </STYLE> El atributo TYPE de STYLE sirve, otra vez, para explicarle al navegador que el lenguaje que se usa en la hoja de estilo va a ser CSS. Las etiquetas de comentarios ( <!-- --> ) se usan para evitar que los navegadores antiguos (y que, por tanto, no reconozcan la etiqueta STYLE ) muestren el contenido de la hoja en pantalla. Entre las etiquetas de comentario es donde se indicarn las reglas de estilo tal y como ya se han visto. Un ejemplo de una hoja de estilo incrustada es este: <STYLE TYPE="text/css"> <!-IMG { vertical-align: 50%;} P {color: #00ff00;} A {font-family: sans-serif;} A:link {color: #0000ee; A:visited {color: #551a8b;} A:active {color: #ff0000;} --> </STYLE> Que debera ir entre las etiquetas <HEAD> y </HEAD> de la pgina Web. Este tipo de hoja se aplica a todo el documento, salvo que entre en contradiccin con una regla de estilo integrada que, al tener preferencia, se impondra sobre sta. (Es decir, que si se ha definido un prrafo con la etiqueta <P STYLE="color: #000000;">, este aparecer en color negro, aunque los dems s tendrn color rojo). El atributo TYPE slo es necesario si no se ha definido el lenguaje de hojas de estilo con la etiqueta <META>, tal como se vio anteriormente.

Otra cosa que se puede poner en las hojas incrustadas es la sentencia: @import url("direccin de pgina"), donde "direccin de pgina" es la URL donde se encuentra un archivo con otra hoja de estilo, cuyas reglas se aadirn a las de sta. La clusula @import debe ir siempre la primera en una hoja de estilo, antes de cualquier regla. Algunos ejemplos de @import seran las siguientes rdenes: @import url(hoja.css) Esta declaracin hace referencia a una hoja, situada en el mismo directorio que el documento, llamada hoja.css: @import url(../hoja.css) Esta otra declaracin llama a la hoja "hoja.css" que se encuentra en el directorio padre de aqul en que se encuentra el documento: @import url(http://host.com/estilo/hoja.css) Y esta llama a una hoja que se encuentra en el directorio "estilo" del dominio "host.com". HOJAS DE ESTILOS EXTERNAS Hojas de estilo externas son aquellas que se almacenan en un documento aparte y a las que se llama desde el documento HTML. Obviamente, esta hoja de estilo puede ser llamada desde tantos documentos como se quiera. Son las ms utilizadas y permiten dotar de un aspecto uniforme a todo un conjunto de pginas. Existen dos modos de declarar las hojas externas en un documento web. El primero es exactamente el mismo que se ha visto con las hojas incrustadas, ya que se usa el mismo tipo de sentencia @import url("direccin de pgina"): <STYLE TYPE="text/css"> <! @import url(direccin de pgina) --> </STYLE> En realidad esto es una hoja incrustada sin reglas y con una llamada a una hoja externa. No es un mtodo elegante ni eficiente, y algunos navegadores ms antiguos pueden no reconocerlo. La mejor manera de llamar a hojas de estilo externas es mediante la etiqueta <LINK> de la cabecera de un documento HTML, que se usa del siguiente modo: <LINK HREF="direccin de la hoja" REL="stylesheet" TYPE="text/css"> Donde: En HREF se indica la direccin en la que se encuentra la hoja de estilo. Con REL="stylesheet" se informa al navegador que se trata de una hoja de estilo. En TYPE se dice que est escrita en lenguaje CSS. Si ya se ha usado una etiqueta <META> definiendo el lenguaje de estilo por defecto, se puede omitir el atributo TYPE. Un ejemplo de llamada a una hoja de estilo externa sera: <LINK REL="stylesheet" HREF="css.css" TYPE="text/css"> La clusula @import, que ya se ha visto antes, puede usarse tambin en las hojas de estilo externas (recordando ponerla siempre antes que cualquier otra regla). USAR VARIAS HOJAS EN UN SOLO DOCUMENTO Es perfectamente posible usar varias hojas de estilo en un mismo documento. Para ello slo es

necesario declararlas al inicio de ste. La primera forma de hacer esto es la ms evidente: Usar una hoja externa para definir todo aquello que se quiera aplicar a varios documentos, otra incrustada para cosas especficas de ese documento, y una o ms reglas integradas para detalles concretos. Otra opcin es hacer que la aplicacin de las hojas de estilo dependa del modo en que vayan a visualizarse las pginas. No sera estupendo poder decirle al navegador algo del estilo de "Si lo sacas por pantalla a color usa esta hoja, si es slo texto usa esta otra y si lo imprimes usa aquella"? Pues bien, con CSS esto es posible. Para ello est atributo MEDIA, que se puede usar tanto en la etiqueta <STYLE> como en <LINK>, donde se especificar el medio concreto al que se quiere dirigir la hoja. Los medios a los que se puede referir con MEDIA son los siguientes: SCREEN: Se refiere al monitor. Es la opcin por defecto. PRINT: Para la impresora o cualquier otro medio escrito. PROJECTION: Para proyectores u otro tipo de dispositivos parecidos. BRAILLE: Dispositivos braille para leer con el tacto. SPEECH: Para dispositivos que leen en voz alta. ALL: Para todos los anteriores.

Hoy por hoy los medios que utilizar ms habitualmente son SCREEN y PRINT. Para ello se pueden poner dos hojas distintas indicando en cada una cul es el medio que se quiere usar: <LINK REL="stylesheet" MEDIA="screen" HREF="pantalla.css" TYPE="text/css"> <LINK REL="stylesheet" MEDIA="print" HREF="impreso.css" TYPE="text/css"> Cuando el documento se muestre e pantalla se usar la hoja contenida en "pantalla.css", ignorando la segunda hoja, y si se imprime se usar la hoja "impreso.css", sin hacer caso de la anterior. CASCADA DE HOJAS DE ESTILO Las hojas de estilo en cascada se llaman as porque pueden usarse unas sobre otras para sumar reglas y aplicarlas todas a un mismo documento. Sin embargo, esto puede llevar a problemas de interpretacin: Si hay dos hojas que proponen distintas reglas para un mismo selector Cul de ellas debe ser interpretada? CASCADA DE HOJAS DE ESTILO: HERENCIA Algunas de las caractersticas que se asignen en una hoja de estilo pueden heredarse de unos selectores a otros. La informacin al respecto de si una caracterstica es heredable suele ser, generalmente, bastante intuitiva. De todos modos puede consultarse en la descripcin de la propiedad. Las reglas que controlan esta herencia son muy simples: Todos los selectores que estn contenidos en otro selector heredan de ste los valores que se hayan asignado a sus propiedades (si tienen esa propiedad), salvo si se especifica para ellos otro valor. La siguiente regla: BODY {border: thin; color: #ff0000;} Asigna un borde fino a la pgina y color rojo al texto del elemento BODY. Al ser la propiedad color heredable, todos los elementos contenidos en BODY (por ejemplo prrafos) tendrn tambin color rojo, a menos que se cree otra regla para el elemento <P> especificando otro color. La propiedad border, sin embargo, no es heredable, de modo que, si se quiere que los prrafos tambin tengan un borde alrededor, se tendr que crear una regla para ello. Tambin hay que tener en cuenta que las propiedades que tenga por defecto un elemento HTML tienen

preferencia sobre las propiedades heredadas. Por otro lado, y aunque realmente no es un aspecto de herencia, todas las reglas que se apliquen a un selector se aplicarn tambin a todas las clases de ese mismo selector, a menos que se especifique otra cosa en esa clase. Por ejemplo: P {align: right; color: #0000ff;} P.rojo {color: #ff0000;} Todos los prrafos tendrn alineacin a la derecha y color azul, excepto aquellos que tengan definido CLASS="rojo", que heredarn la alineacin a la derecha, pero su color ser rojo. CASCADA DE HOJAS DE ESTILO: PRIORIDAD CSS estipula cinco niveles de prioridad, de tal modo que las reglas que se correspondan con un nivel superior se impondrn sobre aquellas que pertenezcan a uno inferior. Estos niveles de prioridad son, ordenados de menor a mayor, los siguientes: 1. Si no se aplican propiedades a un selector, se usar el valor heredado. Si no hubiera un valor heredado, se usar el valor por defecto. 2. Las declaraciones marcadas con !important prevalecen sobre aquellas que no estn marcadas. 3. Todas las hojas de estilo prevalecen sobre los valores por defecto del navegador (las hojas de estilo del diseador prevalecen sobre las del navegante. Las reglas incrustadas se imponen sobre las hojas vinculadas que, a su vez, tienen ms peso que las externas) . 4. Los selectores de idntificacin ID se imponen ante los selectores de clase CLASS, que son ms importantes que los selectores contextuales, los cuales, a su vez, se imponen sobre los selectores normales. 5. Las reglas de una hoja que sean posteriores a otras con las que entren en conflicto prevalecern sobre stas. Quizs sea necesario aclarar un poco la segunda norma. Cuando se construya una regla de estilo que se considere importante y no se quiera que pueda ser anulada por otra regla u hoja de estilo, se puede marcar con una sentencia !important del siguiente modo: P {color: #0000ff !important;} Esto hace que el color rojo de los prrafos se imponga sobre cualquier otro color para este mismo selector que se defina en cualquier otra regla u hoja de estilo. Realmente, estas reglas no son tan complicadas como parece. Es cuestin de leerlas un par de veces para ver que realmente son lgicas y razonables. De todos modos, lo mejor es experimentar por uno mismo y que procurar no dejar nada al azar. Conviene recordar tambin que los navegadores no son excesivamente fieles a las normas de CSS. UNIDADES DE MEDIDA CSS utiliza una serie de unidades para poder indicar cosas como tamaos, colores, etc. Unidades de tamao Hay tres posibles unidades relativas: em ex Designa el ancho de la letra m. Hace lo propio con la letra x.

px

Indica que la medida se hace en pxeles.

De estas unidades, la menos recomendable es el pxel, ya que puede dar lugar a errores al visualizar la pgina en monitores de distinta resolucin. Un ejemplo del uso de estas unidades sera: P {font-size: 12px; mrgin: 1em} Esta regla dara un tamao de letra para el elemento <P> de 12 pxels, y un margen equivalente al grosor de la letra m. Por otro lado estn las llamadas unidades absolutas, en las que se define el tamao final, y no en relacin al medio en que se presenta. Estas unidades son las siguientes: cm mm in pt pi Centmetros Milmetros Pulgadas (inches). Una pulgada equivale a 2.54 cm. Puntos. Equivale a 0.351 mm. Picas.Equivale a 12 puntos

Unidades porcentuales Las unidades porcentuales se usan en una gran variedad de contextos y sirven para especificar que la medida que se est indicando se refiere a un porcentaje de una medida anterior o de la medida por defecto. Se pueden usar de dos modos, el modo absoluto y el modo aditivo. En el modo absoluto slo se indica el porcentaje seguido del signo "por ciento" (%) de este modo: B {font-size: 120%;} Con esta regla se est indicando que se quiere que el tamao de fuente en el elemento <B> sea de un 120% del tamao original del texto. El modo aditivo es semejante al anterior, pero aadiendo un signo "ms" (+) o un signo "menos" (-) delante del nmero, para indicar si el porcentaje debe aadirse o sustraerse de la medida original. Por ejemplo: B {font-size: +20%}; I {font-size: -20%;} La primera regla tiene el mismo efecto que la anterior, hace que el tamao de fuente del elemento <B> sea un 20% mayor que el del resto del texto. La segunda hace lo contrario para el elemento <I>, en ste, el tamao de fuente ser un 20% ms pequeo. Unidades de color Cuando se quiere definir un color en CSS hay varias posibilidades: La primera, la ms prctica, y la nica que soportan los navegadores actuales, es usar los cdigos RGB (Colores aditivos) que usa HTML. stos consisten en el signo "almohadilla" (#) seguido de seis dgitos hexadecimales que corresponden,

respectivamente, los dos primeros a la componente roja del color, los dos siguientes a la verde, y los dos siguientes a la azul. Vemoslo con un ejemplo: B.negro {color: #000000;} B.rojo {color: #ff0000;} B.verde {color: #00ff00;} B.azul {color: #0000ff}; B.amarillo {color: #ffff00;} La notacin hexadecimal es aquella en la que hay 16 dgitos (en lugar de los 10 de la notacin decimal). Estos dgitos son: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C , D, E, F. (No importa si usas maysculas o minsculas). En la segunda existe tambin una paleta RGB reducida, que slo usa un dgito hexadecimal para cada color, que se usara de este modo: B.negro {color: #000;} B.rojo {color: #f00;} B.verde {color: #0f0;} B.azul {color: #00f;} B.amarillo {color: #ff0;} Tambin se puede usar el siguiente formato, muy semejante a los anteriores pero con dgitos decimales: B.negro {color: rgb(0,0,0);} B.rojo {color: rgb(255,0,0);} B.verde {color: rgb(0,255,0);} B.azul {color: rgb(0,0,255);} B.amarillo {color: rgb(255,255,0);}

Aqu las tres componentes de color se colocan tras la palabra "rgb", dentro de parntesis y separados por comas. Sus valores pueden ir desde 0 a 255. Y por ltimo, se puede usar el mismo sistema anterior, pero indicando valores porcentuales: B.negro {color: rgb(0%,0%,0%);} B.rojo {color: rgb(100%,0%,0%);} B.verde {color: rgb(0%,100%,0%);} B.azul {color: rgb(0%,0%,100%);} B.amarillo {color: rgb(100%,100%,0%);} Donde los valores pueden ir desde 0.0% hasta 100.0%.

Unidades de medida: URLS A veces ser necesario indicar la URL de una imagen, un documento, o cualquier otro recurso. Para ello se usa la construccin url(direccin) del siguiente modo: BODY {background: url(fondo.gif);} P {background: url(http://host.com/fondo2.gif);} Esta regla har que la imagen "fondo.gif" se use como fondo de la pgina y que la imagen "fondo2.gif" se use como pondo en los prrafos. Como se puede ver, se pueden usar tanto direcciones relativas como direcciones absolutas. Las direcciones relativas se indican con respecto a donde est ubicada la hoja de estilo, no con respecto a la pgina web.

PROPIEDADES DE CSS A continuacin veremos todas y cada una de las propiedades que CSS asigna a cada

elemento, junto con su sintaxis concreta y los posibles valores que puedan adoptar.

Propiedades de texto Son aquellas que modifican las caractersticas del texto, tales como el espaciado entre palabras o la alineacin:

Propiedades de texto Son las que afectan a las caractersticas de la letra, como el tamao o el tipo:

Propiedades de color y fondo Son las que definen los colores y/o imgenes que se usarn en un objeto, como el color del texto o la imagen de fondo de un prrafo.

Propiedades de cuadro Estas son las propiedades que definen el modo en que se mostrar el cuadro que contiene a un elemento, ya sea este un prrafo, una tabla, imagen, etc. MRGENES: margin-top:

margin-left:

margin-right:

margin-bottom:

margin:

ESPACIOS: padding-top:

padding-left:

padding-right:

padding-bottom:

padding:

BORDES: border-top-width:

border-width:

border-right:

border-right-width:

border-color:

border-bottom:

border-bottom-width:

border-style:

border-left:

border-left-width:

border-top:

border:

ESTILO: width:

height:

float:

clear:

Propiedades de clasificacin Son aquellas que afectan a la forma de representar los elementos de clasificacin como las listas: display:

White-space:

list-style-type:

list-style-image:

list-style-position:

list-style: