Intro HTML

Introduccin a HTML, XHTML y CSS o
Jess Arias Fisteus u Norberto Fernndez Garc a a
1.
Introduccin a HTML y XHTML o
Para poder publicar la informacin y distribuirla globalmente, se necesita un lenguaje o universalmente entendible por las mquinas. Este lenguaje es, en la World Wide Web, a HTML (HyperText Markup Language), considerando todas sus versiones y variantes, como XHTML. HTML y XHTML permiten: Publicar documentos. Acceder a documentos cargndolos directamente en el navegador o, simplemente, a activando en otros documentos hiperenlaces que apunten a l. e Rellenar formularios con informacin que es enviada al servidor, para que este la o procese y realice cierta tarea con ella. Incluir objetos multimedia (v deos, imgenes, sonidos, animaciones, etc.) en los doa cumentos.
1.1.
Introduccin a HTML o
HTML fue desarrollado inicialmente por Tim Berners-Lee en el CERN (Centro Europeo de Investigacin Nuclear). La aparicin del primer navegador, Mosaic, desarrollado o o en el NCSA (Centro Nacional de Aplicaciones de Supercomputacin en EE.UU.) contrio buy a la rpida popularizacin de esta nueva tecnolog y esa popularidad motiv un o a o a, o rpido desarrollo de la misma. As en noviembre de 1995 apareci el primer estndar a , o a HTML, llamado HTML 2.0, desarrollado bajo el auspicio del IETF y recogido en la RFC 1866. La siguiente versin de la especicacin ser ya HTML 3.2 (las anteriores como o o a HTML 3.0 no fueron sino meros borradores), aparecida en enero de 1997. Finalmente, en diciembre de ese mismo ao apareci una nueva versin, llamada HTML 4, que fue n o o revisada en abril de 1998 y ligeramente modicada en diciembre de 1999, dando lugar a la versin HTML 4.01. o Los principales aportes de la versin 4 de la especicacin con respecto a las versiones o o previas fueron: Aparicin de los mecanismos para asociar informacin de estilo. o o Scripts, marcos y objetos. Mejoras en los formularios. 1
Mejoras en aspectos de internacionalizacin y accesibilidad. o Actualmente se est desarrollando una nueva especicacin, llamada HTML5, en el a o ambito del W3C. Esta especicacin supone una actualizacin de HTML 4.01, y propor o o cionar tambin una sintaxis XML que se llamar XHTML5. a e a
1.2.
Introduccin a XHTML o
XHTML es una redenicin de HTML 4 con sintaxis XML. A pesar de tener distinto o nombre, conserva la mayor de los elementos y atributos de HTML. En la seccin ?? a o se comentan en detalle las diferencias existentes entre HTML 4 y XHTML. Las ms a destacables estn en la ausencia de elementos y atributos relacionados con estilo (tipos de a letra, colores, etc.), que ya en HTML 4 estn desaconsejados, y en la existencia de unas a normas ms estrictas en la colocacin de etiquetas de elementos. a o En cuanto a los motivos por los que se vio la necesidad de redenir HTML 4 como aplicacin XML, se pueden citar los siguientes: o En XHTML se refuerza la separacin entre contenido y presentacin, eliminando de o o la especicacin aquellos elementos y atributos relacionados con el estilo. Esto tiene o la ventaja de facilitar el cambio de la informacin de presentacin para adaptarla o o a las caracter sticas del dispositivos de salida concreto (asistente digital, telfono e mvil, ordenador, televisor, etc.) o Dado que los documentos XHTML son un tipo de documentos XML, todas las herramientas disponibles para trabajar con XML se pueden emplear tambin con e XHTML. En XHTML existen reglas estrictas acerca del formato que debe tener un documento. Ests reglas se reeren por un lado a la buena formacin del documento (establecen a o por ejemplo que todo elemento debe cerrarse adecuadamente) y por otro a la validez del mismo (indicando por ejemplo que dentro de un elemento <html> slo puede o haber un <body>). Todo documento XHTML, para ser tal, debe cumplir estas reglas, y el hecho de que las cumpla facilita su procesado automatizado por parte de aplicaciones. Modularizacin: en ?? se ve que existen distintas versiones de XHTML, y que, a o partir de la versin 1.1, se inicia un proceso de modularizacin de la especicacin. o o o Este proceso permitir que los dispositivos de capacidades reducidas implementen a unicamente ciertas partes de la especicacin, y que los desarrolladores web puedan o adaptar mejor sus documentos a los dispositivos en los que se van a visualizar. Asimismo la modularizacin permitir la extensin de XHTML sin rehacer de nuevo o a o la especicacin, aadiendo nuevos mdulos aprovechando al mximo la capacidad o n o a de extensibilidad de XML.
1.3.
Versiones de XHTML
Actualmente, existen varias versiones de XHTML: XHTML 1.0 [?] el ms parecido a HTML 4, con tres variantes: a
Transitional permite el uso de las capacidades de presentacin de HTML y est peno a sado para trabajar con navegadores con soporte de CSS limitado. Strict no se permite el uso de los elementos y atributos relacionados con aspectos de presentacin. Pensado para ser usado con hojas de estilo CSS. o Frameset permite el uso de marcos (frames) para dividir la ventana del navegador. XHTML 1.1 [?] nueva versin, que parte de XHTML 1.0 strict. No permite el uso de o elementos y atributos relacionados con el estilo (pero s obviamente, hojas de estilo, , como CSS). Se introduce el concepto de modularizacin. o XHTML Basic 1.0 y 1.1 [?] versiones simplicadas de XHTML 1.1 pensadas para dispositivos de capacidades ms limitadas de procesado y presentacin, como televisoa o res, telfonos, mviles, PDAs, etc. e o XHTML 2.0 [?] se encuentra actualmente, y desde hace aos, en proceso de estandarin zacin (Working Draft) por parte del W3C (World Wide Web Consortium). Retoma o la l nea iniciada con XHTML 1.1 de modularizar XHTML, aadiendo nuevos mdun o los como XML Events y XForms. Estos mdulos nacen con el objetivo de minimizar o el uso de scripts dentro de documentos XHTML mediante la inclusin, como parte o del propio lenguaje, de los medios necesarios para implementar las funcionalidades ms importantes que requer el uso de dichos scripts (eventos y formularios). Es a an probable que esta especicacin desaparezca en favor de HTML5. o
1.4.
Cdigo XHTML de ejemplo o
A continuacin se muestra un ejemplo sencillo de documento XHTML 1.1: o <?xml version="1.0" encoding="iso-8859-1"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Mi primera pgina XHTML</title> a </head> <body> <h1>Hola Mundo!</h1> </body> </html> En el ejemplo cabe destacar que los documentos XML deben comenzar con la instruccin especial <?xml ... ?>, que indica a qu versin de XML es conforme el documento, o e o y cul es el sistema de codicacin de caracteres que emplea (por defecto, si no se indica, a o es UTF-8). Esta instruccin debe necesariamente ser la primera l o nea del documento, no pudiendo haber ningn carcter inmediatamente antes del < inicial. A continuacin se u a o declara a qu versin de XHTML es conforme el documento, en este caso XHTML 1.1. e o
1.5.
Diferencias entre HTML 4 y XHTML
Como ya se ha indicado, XHTML no es ms que una redenicin de HTML 4 como a o aplicacin XML. Como consecuencia de este hecho la semntica de los elementos y atribuo a tos de XHTML es exactamente la misma que en HTML 4. Existen sin embargo pequeas n diferencias entre los dos lenguajes de hipertexto, las principales de las cuales son: Los nombres de elementos y atributos deben escribirse en minscula en los docuu mentos XHTML, mientras que en HTML 4 es posible escribirlos en minscula o u mayscula. u Los valores de los atributos deben escribirse entre comillas ( o ) en XHTML. No son vlidas construcciones del tipo <font color=red> que s lo son en HTML 4. a Todos los elementos tienen marca de inicio o nalizacin (o elemento vac Por o o). ejemplo: <br />, <p></p>. No son vlidas construcciones del tipo a <br> o <ul> <li>A <li>B </ul>. La anidacin de elementos debe ser correcta. No son vlidas construcciones del tipo o a <i><b></i></b> Los elementos y atributos utilizados para especicar preferencias en cuanto al estilo de la informacin (como por ejemplo <font> o el atributo bgcolor) desaparecen. o Las caracter sticas de presentacin se establecen ahora mediante el uso de lenguajes o espec cos como CSS. El atributo id sustituye al atributo name en: a, applet, frame, iframe, img y map. Es obligatorio aadir al comienzo del documento XHTML una declaracin DOCTYn o PE que referencia al DTD (Denicin de Tipo de Documento) donde se indican las o reglas de construccin del documento (como por ejemplo, qu elementos y atributos o e son vlidos y dnde puede aparecer cada uno). Ese DTD ser espec a o a co de cada versin de XHTML. o
2.
2.1.
Componentes bsicos de un documento (X)HTML a

Elementos
Un documento HTML est formado por una jerarqu de elementos y texto. Cada a a elemento puede contener, a su vez, otros elementos y texto. Un elemento est delimitado a por marcas (tags), que pueden ser de tres tipos: Marcas de inicio de elemento: contienen el nombre del elemento y sus atributos. Por ejemplo: <table width="300">. Marcas de n de elemento: contienen slo el nombre del elemento. Por ejemplo: o </table>. Marcas de elemento vac util cuando un elemento no tiene contenido. Por ejemo: plo: <br />. Es equivalente a <br></br>. Estas marcas tambin pueden contener e declaracin de atributos. o 4
El contenido de un elemento es la porcin del documento que se encuentra entre su marca o de inicio y su marca de n. El tipo de contenido de cada elemento est especicado, y a deber ser respetado. Por ejemplo, el elemento html deber contener, en este orden, un a a elemento head y un elemento body. Existen dos tipos bsicos de elementos, por su forma de a ser representados: elementos de bloque (block ) y elementos en l nea (inline). Los primeros siempre son representados comenzando una nueva l nea (por ejemplo: prrafos, tablas, a listas, etc.) Los segundos se representan siempre en la misma l nea que el resto del texto o elementos a representar, sin provocar un salto de l nea, salvo que sea necesario por falta de espacio en la l nea anterior (por ejemplo: imgenes, elementos para especicar tipos de a letra, cursiva, negrilla, etc.)
2.2.
Atributos
Los elementos, adems de contenido, pueden tener atributos. Un atributo est formado a a por un nombre y un valor. Los atributos de un elemento se especican en su marca de inicio (o de elemento vac indicando, en este orden, su nombre, el s o), mbolo = y su valor, que suele incluirse entre comillas dobles o simples. Por ejemplo: <img src="imagen.jpg" alt="Paisaje monta~oso" width="300" height="150" /> n En caso de que sea necesario especicar un tipo de comillas dentro del valor de un atributo, se puede utilizar el otro tipo para englobarlo, sin dar lugar a confusiones. Por ejemplo: <img src="img.jpg" alt=Esto tiene "comillas dobles" /> El nombre y tipo de los atributos que puede tener un determinado elemento, as como su signicado, se encuentran especicados, y deber ser respetados. an
2.3.
Referencias a entidades
Las referencias a entidades permiten incluir caracteres que no pueden aparecer directamente en el documento, normalmente debido a alguna de estas razones: es un carcter a reservado (<, >, &), el editor no es capaz de representarlo, o el sistema de codicacin del o documento no lo permite (por ejemplo, en ASCII de 7 bits no es posible introducir tildes o la letra n). En la siguiente tabla se recoge la forma de referenciar a las entidades ms habituales: a Referencia Carcter a & & < < > > á a é e í ó o ú u ñ n ¿ 5
Para escribir en castellano es, sin embargo, ms cmodo declarar el sistema de codia o cacin de caracteres ISO Latin 1 (ISO-8859-1), que permite utilizar todos los caracteres o de los lenguajes de Europa occidental, sin necesidad de utilizar entidades. Para ello, se puede introducir en head el siguiente elemento: <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
2.4.
Texto
El texto de un documento HTML se introduce como contenido de aquellos elementos que lo permitan. Los caracteres de n de l nea son tratados como espacios en blanco. Por otra parte, dos o ms espacios en blanco consecutivos son tratados como un unico a espacio en blanco. Los navegadores se encargan de dividir el texto en l neas dependiendo del ancho de la ventada de representacin, tamao de letra, etc. o n Si se desea forzar un cambio de l nea, puede recurrirse al elemento br (marca <br />), pero slo en situaciones justicadas. En la mayor de las ocasiones, basta con dividir el o a texto en prrafos (es decir, englobar cada prrafo dentro de un elemento p). Por ejemplo: a a <p> El texto de un documento HTML se introduce como contenido de aquellos elementos que lo permitan. Los caracteres de fin de lnea son tratados como espacios en blanco. </p> <p> Por otra parte, dos o ms espacios en blanco a consecutivos son tratados como un nico espacio en blanco. u </p>
2.5.
Comentarios
Los comentarios permiten incluir cualquier texto en el documento que los navegadores deben ignorar. As por ejemplo, el creador del documento puede dejar indicaciones utiles , para la siguiente vez que tenga que modicarlo, ocultar temporalmente texto o elementos, etc. Se especican entre . Por ejemplo:  
3.
3.1.
Elementos ms utilizados a
Elementos estructurales bsicos a
Todo el documento HTML est contenido dentro del elemento html. Por otra parte, a los documentos HTML contienen dos partes claramente diferenciadas: la cabecera (head ) y el cuerpo (body). La cabecera contiene declaraciones globales para todo el documento (t tulo, sistema de codicacin de caracteres, hojas de estilo, meta-datos, etc.) El cuerpo o contiene la parte directamente representable del documento (texto, imgenes, tablas, etc.) a 6
Cada una de estas partes est contenida dentro de un elemento. La estructura bsica es, a a por tanto: <html> <head> ... </head> <body> ... </body> </html>
3.2.
T tulos
Normalmente, un documento HTML debe tener un t tulo, que se suele mostrar en la barra superior de la ventana del navegador. Este se especica mediante el elemento title, dentro de la cabecera: <html> <head> <title>Hola Mundo!</title> </head> <body> ... </body> </html> Por otra parte, es muy frecuente la necesidad de estructurar un documento en secciones (cap tulos, apartados, etc), y que cada una de stas tenga un t e tulo. En HTML se pueden utilizar los elementos h1, h2,. . . , h6. Estos elementos, de tipo bloque, aceptan como contenido el t tulo de la seccin. Cuanto menor es el nmero del nombre del elemento, o u de ms alto nivel ser la seccin, como se puede ver en el siguiente ejemplo: a a o ... <body> <h1>Noticias de ultima hora</h1> <h2>Nacional</h2> <h3>Palacio asegura no haber recibido ninguna...</h3> <p> Ayer, Marruecos acus a Espa~a en la prensa... o n </p> <h3>...</h3> <p> El ministro de... </p> <h2>Internacional</h2> <h3>...</h3> <p> 7
Ayer se celebr en... o </p> </body> ...
3.3.
Prrafos a
El elemento p es un elemento de bloque que permite estructurar el texto en prrafos. a Puede contener texto y cualquier elemento en lnea.
3.4.
Imgenes a
Las imgenes se insertan mediante el elemento en l a nea img. La mayor de los navea gadores son capaces de representar imgenes GIF, JPEG y PNG. Este elemento no puede a tener contenido, y en l se especica mediante atributos la siguiente informacin: e o Fuente de la imagen (src): URL, absoluta o relativa, de la imagen (atributo obligatorio). Texto alternativo (alt): texto descriptivo de la imagen, pensado para navegadores incapaces de representar imgenes y para navegadores que representen el documento a mediante sonido (atributo obligatorio). Tamao de la imagen (width y height): ambos son atributos opcionales que permiten n al navegador conocer el tamao de las imgenes sin necesidad de descargarlas. Su n a utilizacin facilita a los navegadores el ir representando la pgina mientras descarga o a las imgenes, permitiendo as al usuario ver la pgina mientras se realiza la descarga. a a A continuacin se muestran dos ejemplos de utilizacin: o o <img src="http://www.it.uc3m.es/imag/uc3m.gif" alt="Logotipo de uc3m" width="304" height="195" /> <img src="imag/uc3m.gif" alt="Logotipo de uc3m" width="304" height="195" />
3.5.
Enlaces
Los enlaces a otras pginas se pueden realizar mediante el elemento en l a nea a. Su contenido es el texto (o imgenes) que el usuario puede pinchar para activar el enlace. El a destino del enlace se especica mediante el atributo href. El siguiente ejemplo muestra un enlace a otra pgina dentro de un prrafo: a a <p> La Escuela Politctica de la <a href="http://www.it.uc3m.es">Universidad e Carlos III de Madrid</a> est situada en Legans. a e </p> Al igual que en el caso de las imgenes, el destino puede ser codicado de forma a absoluta o relativa. Tambin se puede asociar un enlace a una imagen, como se reeja en e el siguiente ejemplo:
<a href="http://www.it.uc3m.es"> <img src="http://www.it.uc3m.es/imag/uc3m.gif" alt="Logotipo de uc3m" /> </a> Por ultimo indicar que tambin es posible enlazar una parte de un documento HTML e desde el propio documento o desde otro documento externo. Para ello no hay ms que a utilizar un elemento a pero acompaado de un atributo name (o id en XHTML) en lugar n de href. Este elemento a actuar as como destino del enlace, seleccionando un bloque de a documento. Para acceder a ese bloque se usar tambin el elemento a indicando en su a e href el nombre del destino precedido del s mbolo #. Por ejemplo: <h1>Este es el inicio del documento</h1> <a name="inicio" /> <p> Contenido del documento </p> <a href="http://www.foo.org/index.html#parte1"> Nos lleva a la parte1 de un documento externo </a> <h1>Este es el fin del documento</h1> <a href="#inicio"> Nos lleva al inicio del documento </a> Esto puede resultar util para movernos rpidamente por el interior del documento a cuando ste tiene un tamao considerable. Asimismo puede ayudarnos para construir e n un ndice, con distintas secciones a las que se puede acceder directamente, dentro del documento HTML.
3.6.
Listas
Las listas permiten estructurar informacin en puntos, comenzando cada punto en una o nueva l nea. Existen tres elementos, todos de tipo bloque, para especicar listas, uno para cada uno de los tipos de lista permitidos: listas ordenadas, listas no ordenadas y listas de deniciones. Las listas ordenadas (elemento ol ) asignan automticamente un nmero a cada item a u de la lista. El contenido de este elemento es uno o ms items de lista (elemento li ). a Las listas no ordenadas (elemento ul ) son como las anteriores, pero no asignan nmeros u a los items. Las listas de deniciones (elemento dl ) tienen como contenido elementos dt y dd. El primero permite especicar el trmino a denir, y el segundo, la propia denicin. e o A continuacin se muestran ejemplos de listas, y cmo se ver en un navegador: o o an
<p> Lista no ordenada: </p> <ul> <li>Listas ordenadas.</li> <li>Listas no ordenadas.</li> <li>Listas de definiciones.</li> </ul> <p> Lista ordenada: </p> <ol> <li>Listas ordenadas.</li> <li>Listas no ordenadas.</li> <li>Listas de definiciones.</li> </ol> <p> Lista de definiciones: </p> <dl> <dt>HTML</dt> <dd>HiperText Markup Language</dd> <dt>XML</dt> <dd>eXtensible Markup Language</dd> </dl>
Lista no ordenada: Listas ordenadas. Listas no ordenadas. Listas de deniciones. Lista ordenada: 1. Listas ordenadas. 2. Listas no ordenadas. 3. Listas de deniciones. Lista de deniciones: HTML HiperText Markup Language XML eXtensible Markup Language
3.7.
Estilo del texto
Los elementos para controlar el estilo del texto se dividen en dos categor estilo as: f sico y estilo lgico. o Los elementos de estilo f sico regulan el formato de los caracteres de su contenido expl citamente (b: negrilla; i : cursiva; u: subrayado; tt: texto mecanograado; font: tamao y color de la fuente). n Los elementos de estilo lgico aportan informacin semntica acerca de su contenido, lo o o a cual puede afectar, indirectamente, a su estilo de presentacin. Se recogen en la siguiente o tabla: cite code dfn em kdb samp strong var Cita Cdigo fuente o Denido Enfatizado Palabra clave Ejemplo Resalta Variable
3.8.
Tablas
Las tablas resultan muy utiles para estructurar la informacin en las y en columnas. o Existen bastantes elementos relacionados con tablas, pero aqu slo se explican los ms o a relevantes: table, th (cabecera), tr (la) y td (celda). En HTML, una tabla se representa como un conjunto de las. A su vez, cada la contiene una o ms celdas. En las misma tabla, todas las las deben tener el mismo a 10
nmero de celdas, para poder representar las columnas correctamente alineadas. u Por defecto, cada celda se corresponde con una columna. El atributo colspan de td permite variar esta correspondencia, estableciendo su valor como el nmero de columnas u por las que se debe expandir una celda. A continuacin se presenta un ejemplo, con su aspecto aproximado: o
<table border="1"> <tr> <th>izda.</th> <th>centro</th> <th>drcha.</th> </tr> <tr> <td>1 izda.</td> <td>1 centro</td> <td>1 drcha.</td> </tr> <tr> <td>3 izda.</td> <td colspan="2">3 drcha.</td> </tr> </table>
izda. 1 izda. 3 izda.
centro 1 centro 3 drcha.
drcha. 1 drcha.
3.9.
Marcos (Frames)
Los marcos permiten la divisin del espacio de visualizacin del navegador en subveno o tanas independientes. En cada una de esas subventanas se puede presentar un documento HTML diferente. A continuacin se presenta un ejemplo con su aspecto aproximado: o
11
<?xml version="1.0" encoding="ISO-8859-1"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd" > <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Ejemplo simple de marcos</title> </head> <frameset cols="20%, 80%"> <frameset rows="100, 200"> <frame src="contenidos1.html"/> <frame src="contenidos2.gif"/> </frameset> <frameset rows="100, 200"> <frame src="contenidos3.html"/> <frame src="contenidos4.gif"/> </frameset> </frameset> </html> Como se puede ver, tres son los principales elementos que intervienen en el proceso de creacin de marcos: o frameset utilizado para determinar la disposicin de los marcos en la ventana de visualio zacin. Observar que sustituye al elemento body como ra del cuerpo del documento. o z frame utilizado para denir los contenidos y apariencia de un marco concreto. noframes utilizado para especicar el contenido alternativo a presentar por el navegador en caso de que ste no soporte el uso de marcos. e
3.10.
Formularios
Los formularios son elementos de bloque que pueden contener controles, mediante los cuales el usuario puede interactuar con la pgina, normalmente para enviar datos al a servidor web. 3.10.1. Controles
Cada control tiene un nombre, especicado mediante el atributo name. Adems, cada a control tiene asociado un valor inicial (salvo excepciones, especicado en el atributo value) y un valor actual (introducido por el usuario o por un script). Cuando el formulario es enviado, se env el nombre de cada uno de sus controles, y a su valor actual.
12
3.10.2.
Tipos de controles
En un formulario se pueden utilizar distintos tipos de controles: Botn: se pueden especicar tanto con el elemento input (type=button) como o con el elemento button. Puede ser de tres tipos: submit (env el formulario), reset a (establece el valor inicial en todos los controles del formulario) y push (utilizado para cualquier otra cosa, en combinacin con scripts). o Checkbox : permite especicar valores on/o. Se especican mediante el elemento input (type=checkbox). Pueden utilizarse, en el mismo formulario, varios con el mismo nombre. Si se especica el atributo checked=checked, se inicializa a on. Botn radio: tambin permite especicar valores on/o, pero de tal forma que slo o e o uno de los que comparten el mismo nombre puede estar en on simultneamente. Se a especican mediante el elemento input (type=radio). Si se especica el atributo checked=checked, se inicializa a on. Men: permite al usuario seleccionar una opcin entre varias. Se crean mediante los u o elementos select, optgroup y option. Texto: permite que el usuario introduzca una o varias l neas de texto. Se especica mediante el elemento input (type=text), cuando se desea slo una l o nea, o mediante el elemento textarea cuando ste puede introducir cualquier nmero de l e u neas. Fichero: permite al usuario seleccionar un chero del sistema local de cheros. Mediante este control se pueden enviar cheros al servidor. Se especica mediante el elemento input (type=le). Valor oculto: no se muestra al usuario. Su valor ser siempre el valor inicial, salvo que a algn script lo modique. Permite que los scripts puedan pasar valores al servidor, u y como ayuda para el control de sesiones. 3.10.3. Env de un formulario o
Cuando el usuario pincha en un botn de tipo submit, se produce el env del formuo o lario. Existen dos mtodos de env que se especican mediante el atributo method del e o, elemento form: GET : utiliza el mtodo GET de HTTP. Los parmetros se codican concatenados e a en el URI especicado en el atributo action del elemento form. No se debe utilizar este mtodo para operaciones no idempotentes. e POST : utiliza el mtodo POST de HTTP. Los parmetros se codican en el cuerpo e a del mensaje HTTP. Los parmetros a los cuales se hace mencin son pares que contienen el nombre y valor a o actual correspondientes a todos los controles con xito (en general, son aquellos que no se e encuentren deshabilitados, y los botones radio y checkboxes que se encuentren en on). Por otra parte, hay dos formas de codicar los parmetros a enviar al servidor, seleca cionables mediante el atributo enctype del elemento form:
13
application/x-www-form-urlencoded : se sustituyen los espacios en blanco por +, y todos los valores no alfanumricos y caracteres reservados por % seguido de su e valor ASCII (dos d gitos en hexadecimal). Los nombres se separan de los valores por un carcter =, y cada par nombrevalor se separa del resto por un carcter &. a a Por ejemplo: nombre=Juan+P%C3%A9rez&edad=29. Este es tipo de codicacin por o defecto, y el unico permitido con el mtodo GET. e multipart/form-data: ms eciente para el env de grandes cantidades de datos, a o as como datos binarios. Debe ser utilizado, por ejemplo, para el env de cheros al o servidor. El cuerpo del mensaje HTTP se separa en varias partes, cada una de las cules env los datos asociados a un control. a a 3.10.4. Ejemplo
A continuacin se muestra el cdigo de ejemplo de un formulario. o o <form action="http://acme.es/submit" method="post" enctype="multipart/form-data" > <h3>Informacin Personal</h3> o <p> Apellidos: <input name="personal_apellidos" type="text" /> Nombre: <input name="personal_nombre" type="text" /> Direccin: <input name="personal_direccion" type="text" /> o </p> <h3>Historia Mdica</h3> e <p> <input name="historia_enfermedades" type="checkbox" value="Sarampin" /> Sarampin o o <input name="historia_enfermedades" type="checkbox" value="Varicela" /> Varicela </p> <h3>Medicacin actual</h3> o <p> Est tomando usted medicacin actualmente: a o <input name="medicacion" type="radio" value="Si" />S <input name="medicacion" type="radio" value="No" />No </p> <p> Si la respuesta es afirmativa, indique el nombre de los medicamentos: </p> <p> <textarea name="medicacion_detalle" rows="20" cols="50"></textarea> </p> <p><input type="submit" value="Enviar" /></p> </form>
14
4.
Hojas de estilo CSS
En HTML existen elementos y atributos que permiten especicar el estilo de los documentos (por ejemplo, los tipos y tamaos de fuente, colores de texto, colores de fondo, n ancho de elementos, etc). El uso de estas caracter sticas de estilo de HTML presenta, sin embargo, una serie de problemas: La informacin de estilo va dentro del propio documento, con lo que se diculta la o homogeneizacin de las caracter o sticas de presentacin de un conjunto de pginas de o a un mismo sitio web. Por ejemplo, si se tiene un grupo de documentos con la misma informacin de estilo, y se quiere realizar un pequeo cambio en la presentacin, es o n o necesario modicar todos y cada uno de los documentos. Para adaptar la presentacin del documento a las caracter o sticas de los distintos dispositivos en los que se puede presentar, no queda otro remedio que hacer distintas versiones del mismo documento. Para evitar estas dicultades, es necesario separar el contenido del documento (su informacin) de la apariencia con la que se muestra al usuario (su presentacin), consio o guiendo as que cambios en una de las partes no afecten a la otra. Por eso la evolucin de o la recomendacin HTML va por la l o nea de separar estos aspectos, dejando la representacin de la informacin a HTML/XHTML, e introduciendo mecanismos que permitan o o representar la informacin de estilo. La tecnolog ms usada actualmente para declarar o a a cmo se debe presentar un documento es CSS (Cascading Style Sheets) [?]. o En el apartado ?? se indica cmo asociar la informacin de estilo CSS a documentos o o HTML/XHTML, para lo cual normalmente se almacena la informacin de presentacin o o en un documento, denominado comnmente hoja de estilo, al cual se hace referencia desde u pginas HTML/XHTML. De este modo, si varios documentos HTML/XHTML deben ser a presentados con el mismo estilo, es suciente con referenciar desde ellos a la misma hoja de estilo. Simplemente con cambiar dicha hoja de estilo, se cambia la rpesentacin de todos o los documentos que hagan referencia a ella. Por otra parte, para presentar un documento en dispositivos de distintas caracter sticas (mviles, televisores, etc.), basta con asociar o a ese documento hojas de estilo distintas o incluso una unica hoja de estilo en la que la informacin a considerar est condicionada al medio o dispositivo destino1 . o e
4.1.
Declaracin de hojas de estilo o
El lenguaje HTML es independiente del lenguaje utilizado para especicar las hojas de estilo. Por ello, en la cabecera del documento HTML, es recomendable declararlo. En el caso de CSS la declaracin necesaria es la siguiente: o <meta http-equiv="Content-Style-Type" content="text/css" /> Por otra parte, las hojas de estilo a utilizar para un documento pueden ser incluidas en el propio documento (con el elemento style en la cabecera), en un documento externo (elemento link en la cabecera) o directamente en un elemento (atributo style). A continuacin o se muestran algunos ejemplos:
1
Esto slo es posible a partir de la versin 2 de la especicacin CSS, denominada CSS2 o o o
15
<head> ... <link href="special.css" rel="stylesheet" type="text/css" /> </head> <head> ... <style type="text/css"> h1 {border-width: 1; border: solid; text-align: center} </style> </head> <p style="font-size: 12pt; color: fuchsia"> Arent style sheets wonderful? </p> Por los motivos explicados en el apartado anterior, es recomendable normalmente que la informacin de estilo aparezca fuera del documento (X)HTML. Por ello, en muchos o casos resulta ms adecuado utilizar la primera opcin (elemento <link>). a o
4.2.
Colores y tama os n
Aqu se presentan los tipos de datos ms habituales de las propiedades de CSS: colores a y tamaos. n 4.2.1. Colores
Hay dos formas de especicar un color: por sus componentes RGB (rojo, verde y azul) o, para los colores predenidos, por su nombre. Las componentes RGB se declaran indicando para cada uno de estos colores (rojo, verde, azul) un valor entre 0 y 255. Por ejemplo, rgb(64,128,255) especica un color con 64 de rojo, 128 de verde y 255 de azul. Los colores predenidos en CSS son los siguientes: aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white y yellow. 4.2.2. Tama os n
Los tamaos permiten especicar altura y anchura de elementos, mrgenes, tamaos n a n de letra, etc. Pueden ser especicados de forma relativa a otra propiedad (em, tamao n de fuente; ex, valor x-height de la fuente; px, tamao de pixel) o de forma absoluta (in, n pulgadas; cm, cent metros; mm, mil metros; pt, puntos, o 1/72 pulgadas; pc, picas, o 12 puntos). Tambin se pueden especicar longitudes como porcentajes. En el siguiente ejemplo e se establece un margen izquierdo del 10 % del ancho del prrafo: a p { margin-left: 10% }
16
4.3.
Asignacin de propiedades a elementos o
CSS dene un conjunto de propiedades y sus posibles valores. Cada regla se estilo est compuesta por dos campos: un selector y un bloque de declaraciones. El selector a establece a qu elementos se les aplica la informacin de estilo. Las declaraciones especie o can propiedades (y sus valores) para los elementos seleccionados. Por ejemplo, la siguiente regla de estilo CSS asigna un color de texto, un tamao de fuente y texto en negrilla a n todos los elementos p del documento: p { color: rgb(0,0,128); font-size: 14pt; font-weight: bold }
Como se ve en l, primero se especica el selector, y a continuacin las declaraciones e o entre llaves, separadas entre s por ;. El nombre y el valor de cada propiedad se separan por :. Los tamaos de fuente se suelen especicar en puntos (pt en CSS). Los colores n pueden ser especicados utilizando las coordenadas RGB, o el nombre del color, para aquellos predenidos. En la siguiente tabla se muestran los patrones ms importantes que se pueden utilizar a como selectores en documentos CSS. Patrn o * E E,F EF E>F E:rst-child E:link E:visited Elementos seleccionados Cualquier elemento. Cualquier elemento E. Cualquier elemento E o F. Cualquier elemento F descendiente de E. Cualquier elemento F hijo de E. Cualquier elemento que sea el primer hijo de un elemento E. Cualquier elemento E tal que sea origen de un enlace cuyo destino no haya sido visitado.
Idem, con destino visitado. E+F Cualquier elemento F inmediatamente precedido por un elemento E. E[foo] Cualquier elemento E en el que est establecido el atrie buto foo. E[foo=warning] Cualquier elemento E cuyo atributo foo tenga el valor warning. E[foo =warning] Lo contrario que el anterior. E.warning Cualquier elemento E cuyo atributo class tenga el valor warning.
4.4.
Reglas de cascada
Cabe preguntarse qu pasar si denimos dos veces en distintas partes de una hoe a ja de estilo, o en dos hojas de estilo diferentes que se aplican al mismo documento HTML/XHTML, la misma regla con valores contradictorios. Eso ocurrir por ejemplo, si a, nuestra hoja de estilo, adems de la declaracin anterior (en el apartado ??), contuviese: a o p.clase1 { color: rgb(128,128,128); } 17
Dado que los elementos que son seleccionados por p.clase1 tambin lo son por p. Qu color e e tomar esos elementos? Aqu es donde entra en juego el mecanismo de cascada que da an nombre a esta especicacin. Dicho mecanismo establece las siguientes reglas para la o resolucin de conictos: o Encontrar todas las declaraciones que incluyan al elemento y propiedad en cuestin. o Ordenar las declaraciones segn el origen. Si esas declaraciones proceden de inforu macin de estilo especicada por el diseador web tendrn mayor importancia que o n a si proceden de informacin de estilo establecida por el usuario o tomada por el o navegador por defecto. Esta primera clasicacin no suele ayudar mucho, porque o en general toda la informacin de estilo es proporcionada por el diseador, bien o n mediante hojas de estilo externas (enlazadas al documento utilizando el elemento link ) o bien incluyendo la informacin de estilo en el propio documento (mediante o elementos/atributos style). Si an persisten los conictos, se ordenan las declaraciones ms prioritarias (las u a procedentes del diseador web) por la especicidad del selector. Este es el caso en n que nos encontramos, ya que el selector p.clase1, al ser ms espec a co que el p, tiene ms prioridad. a De seguir existiendo contradicciones, el ultimo aspecto a considerar debe ser el orden. Las declaraciones que aparecen ms tarde sern consideradas prioritarias. a a
4.5.
Ejemplos
A continuacin se muestran ejemplos sencillos de utilizacin de propiedades de CSS o o bsicas: a p p p p p p p p p { { { { { color: red } background-color: rgb(128,129,255) } background-image: url("http://www.foo.com/image.png" } background: url("http://www.foo.com/image.png" } background: black } // // // // // // // // // // // // // // 18 em = tama~o de fuente n left, center, right, justify underline, overline, line-through, blink, none capitalize, uppercase, lowercase, none normal, italic, oblique normal, bold, bolder, lighter, 100, 200, ..., 900 xx-small, x-small, small, medium, large, x-large, xx-large, o un tama~o n relativo o absoluto. 10% del ancho
{ text-indent: 3em } { text-align: center } { text-decoration: underline } { text-transform: capitalize }
p p p
{ font-style: italic } { font-weight: bold } { font-size: large }
{ margin-left: 10% }
p p p p
{ margin-top: 10px } { margin-bottom: 1cm } { margin-right: 5em } { padding-left: 10% }
// 10 pixels // 1 cm // 5 veces el tama~o de fuente n // otros: padding-right, padding-top, // padding-left, padding-bottom
4.6.
Agrupacin de elementos o
En muchas ocasiones resulta interesante aplicar las mismas propiedades a un grupo de elementos o texto. Se pueden agrupar utilizando los elementos div y span. La diferencia entre ambos es que el primero es de tipo bloque (y, por tanto, fuerza un salto de l nea antes y despus), mientras que el segundo es de tipo en lnea y no fuerza a dicho salto. e Se muestra, a continuacin, un ejemplo que hace uso de ambos: o <head> ... <style type="text/css"> div.resumen { text-align: justify } span.inicio { font-weight: bold } </style> </head> <body> <div class="resumen"> <p><span class="inicio">La Bolsa espa~ola</span> acumula n nueve jornadas de cadas consecutivas, la peor estadstica desde la Guerra del Golfo. </p> <p><span class="inicio">El Ibex </span> lleg al triste o rcord de cinco mnimos anuales seguidos y rest un e o 3,39% para situarse en los 5.390 puntos. </p> </div> </body>
4.7.
Modelo de representacin de CSS o
Cada elemento presente en el documento HTML/XHTML al que se le asocia la hoja de estilo CSS, va a dar lugar, a la hora de visualizar la informacin en pantalla, a cero o o ms cajas, cada una de las cuales presenta la estructura representada en la gura ??. a Como se puede ver el contenido de la caja est rodeado de tres capas: un relleno a (padding), un borde (border ) y un margen (margin). Las propiedades recogidas en las recomendaciones CSS1 y CSS2 permiten dar formato (tamao, color, estilo) a cada una n de esas capas as como tambin al contenido que rodean. e
A.
Referencia de elementos y atributos HTML 4

href Especica la localizacin (URL) del recurso al que apunta el enlace. o
A Dene un ancla: origen o destino de un enlace. Atributos:
19
Figura 1: Modelo de caja CSS name Le pone nombre al elemento para que pueda servir de destino a otro enlace. ADDRESS Proporciona al lector informacin de contacto, t o picamente sobre el desarrollador de la pgina web. a B Texto en negrita (bold ). BLOCKQUOTE Citas textuales. cite URI (Uniform Resource Identier ) que identica el origen de la cita. BODY Cuerpo del documento HTML. alink Color de los enlaces cuando son seleccionados. background URL de una imagen de fondo. bgcolor Color de fondo. Un color en HTML es un valor RGB hexadecimal (#RRGGBB) o bien una de las siguientes cadenas de texto: black, silver, gray, white, maroon, red, purple, fuchsia, green, lime, olive, yellow, navy, blue, teal, aqua. link Color de los enlaces no visitados. text Color de texto. vlink Color de los enlaces visitados. BR Causa la insercin de un n de l o nea. CENTER Su contenido se representar centrado en la ventana de visualizacin. a o DD Descripcin de un elemento denido. o DIV Usado para estructurar documentos. Los elementos que conformen su contenido estarn agrupados y se presentarn como un bloque. Diseado para ser usado en a a n conjuncin con hojas de estilo. o DL Indica el comienzo de una lista de deniciones de trminos. e DT Trmino a ser denido en una lista de denicin. e o
20
FONT Establecer el color y tamao de fuente. n color Color de fuente. size Tamao de fuente. Nmero entero entre 1 y 7 o bien +/- y un nmero para n u u indicar un incremento/decremento respecto al valor actual. En este segundo caso el valor nal absoluto deber estar igualemente comprendido entre 1 y 7. a As por ejemplo si el valor actual de tamao de fuente es 5 y el atributo size n vale +3, el valor absoluto nal ser 7 y no 8. a FORM Formulario. action URL con la ubicacin del programa que se encargar de procesar la inforo a macin del formulario. o method Especica el mtodo HTTP que se utilizar para enviar al servidor los e a datos del formulario. Puede ser get o post. FRAME Marco. scrolling Para indicar si queremos o no que el navegador proporcione barras de desplazamiento lateral para el marco. Valores posibles yes, no, auto. El valor por defecto es auto que deja decidir al navegador. src URL con la localizacin del documento que se va a presentar inicialmente como o contenido del marco. name Asocia un nombre al marco para poder crear enlaces con destino a dicho marco desde otras partes del documento. FRAMESET Utilizado para estructurar la ventana de visualizacin del navegador dio vidindola en marcos. e cols Dene el nmero de subespacios verticales. u rows Dene el nmero de subespacios horizontales. u El valor de cualquiera de estos dos atributos es una lista de longitudes separadas por comas. T picamente las longitudes se expresan en pixeles o como porcentajes del tamao del espacio de visualizacin. n o H1-H6 Suelen contener t tulos que se utilizan para destacar comienzos de secciones o apartados dentro del documento. HEAD Cabecera del documento HTML. HR Permite dibujar una regla horizontal en el interior del documento. T picamente empleado para separar dos partes diferentes de un mismo documento. align Alineamiento de la regla. Valores posibles: left, center, right. Por defecto el valor adoptado es center. width Tamao horizontal de la regla. El valor por defecto es 100 % (se ocupa a lo n ancho la ventana de presentacin). o HTML Ra de todo documento HTML. z 21
I Texto en cursiva. IMG Permite insertar una imagen en un documento. alt Texto alternativo a presentar al usuario si hay alguna clase de problema al cargar la imagen (por ejemplo, que no se encuentra en la localizacin indicada o con src). height Altura de imagen. src URL con la localizacin de la imagen a ser insertada. o width Anchura de imagen. INPUT Elemento utilizado para que el usuario pueda introducir informacin en un foro mulario (control). checked Cuando el control es de tipo radio o checkbox y este atributo aparece y toma el valor checked, el control estar por defecto inicialmente activo. a maxlength Cuando el control es de tipo text o password este atributo indica la longitud mxima de la cadena de texto a introducir. a name Asigna un nombre al control. Este nombre se env la servidor para que a pueda reconocer los controles existentes. size Indica el ancho inicial del control en pixeles. Cuando el control es de tipo text o password el nmero se reere al ancho en caracteres. Si maxlength es mayor que u size, el navegador deber proporcionar barras de desplazamiento para poder a visualizar todo el control. src Cuando el control es de tipo image este atributo indica cual es la localizacin o de esa imagen. type Tipo del control. Los valores aceptados son: text, password, checkbox, radio, submit, reset, le, hidden, image y button. value Valor inicial del control. Es opcional salvo en controles de tipo radio y checkbox. LI Elemento de una lista. LINK Representa un enlace a un elemento externo, por ejemplo, a una hoja de estilo CSS. Puede aparecer unicamente en el head del documento. href URL con la localizacin del recurso enlazado. o rel Describe de manera textual la relacin existente entre el recurso enlazado y o la pgina desde la que se enlaza. As por ejemplo cuando link se utiliza para a asociar hojas de estilo a los documentos, rel toma el valor stylesheet. type Representa el tipo MIME (Multipurpose Internet Mail Extensions) de los datos que se almacenan en el recurso enlazado. META Identica propiedades de un documento (autor, fecha, etc.) y valores asociados a esas propiedades. content Valor de la propiedad. 22
name Nombre de la propiedad. http-equiv Puede ser utilizado en lugar de name y provoca que el servidor HTTP a la hora de elaborar la respuesta con el documento HTML, introduzca esos valores en la cabecera del protocolo. NOFRAMES Establece el contenido alternativo que debe ser presentado al usuario en caso de que el navegador no soporte el empleo de marcos. NOSCRIPT Indica el contenido alternativo que debe ser presentado al usuario en caso de que el navegador no soporte el empleo de scripts codicados en un lenguaje concreto (como por ejemplo Javascript). OBJECT Permite incluir objetos en un documento. Un objeto no es ms que un conjunto a de datos que el navegador no sabe interpretar si no es mediante la utilizacin de o una aplicacin externa o plug-in. o data URL con la localizacin del objeto que debe ser incluido en el documento. o type Tipo MIME de los datos referenciados por el atributo data. OL Lista ordenada. start Establece el nmero del primer elemento de la lista (por si no queremos que u empiece en 1). type Estilo de representacin de cada nodo de la lista. Los valores posibles son: 1 o para nmeros arbigos, a para letras minsculas, A para letras maysculas, i u a u u para nmeros romanos en minsculas, I para nmeros romanos en maysculas. u u u u OPTGROUP Permite agrupar las opciones de un men de manera lgica. u o OPTION Cada una de las opciones de un men. u selected Cuando este atributo aparece y toma el valor selected, la opcin apareo cer por defecto inicialmente seleccionada. a P Representa un prrafo. a align Alineamiento del prrafo. Valores posibles: left, center, right y justify. El a valor por defecto es right. PRE Permite incluir texto preformateado. El navegador debe representar los contenidos de este elemento tal cual, sin cambiar por ejemplo el nmero de espacios en blanco u o sustituir las entidades por sus valores. SCRIPT Permite incluir trozos de cdigo escritos en un lenguaje de script en el interior o del documento HTML. T picamente se utiliza para asociar cdigo Javascript a los o documentos. Puede aparecer tanto en el head como en el body de una pgina HTML. a src URL del cdigo del script si ste es externo. Si el cdigo es interno se almacena o e o en el contenido del propio elemento. type Tipo MIME asociado al lenguaje de script. Por ejemplo en Javascript es text/javascript. 23
SELECT Control de tipo men. u multiple Cuando est presente y toma el valor multiple permite que se puedan a seleccionar varios elementos en el men a la vez. u name Nombre del control. SPAN Usado para estructurar documentos. Los elementos que conformen su contenido estarn agrupados y se presentarn como un elemento inline. Diseado para ser a a n usado en conjuncin con hojas de estilo. o STYLE Puede aparecer unicamente en el head de un documento. Su contenido consiste en declaraciones de estilo, t picamente en lenguaje CSS. type Tipo MIME asociado al lenguaje en el que estn escritas las reglas de estilo a del elemento. Para CSS es text/css. SUB Permite aadir un sub n ndice. SUP Permite aadir un super n ndice. TABLE Utilizado para la denicin de tablas. o align Alineamiento de la tabla en el documento. Los valores posibles son left, center y right. El valor por defecto es center. bgcolor Color de fondo de las celdas de la tabla. border Tamao del borde de la tabla en pixeles. n cellpadding Espaciado entre el borde de una celda y su contenido. Las unidades ms empleadas son pixeles o % del espacio total disponible. a cellspacing Espaciado que separa los bordes de la tabla de las celdas, as como las celdas entre si. Las unidades ms empleadas son pixeles o % del espacio total a disponible. TD Dene una celda que contiene datos en una tabla. align Alineamiento del contenido de la celda respecto a los l mites de la misma. Los valores ms importantes son left, center, right y justify. El valor por defecto es a center. bgcolor Color de fondo de la celda. rowspan Nmero de las por las que se expande la celda. El valor 0 quiere decir u que ocupa todas las las hasta la ultima. colspan Nmero de columnas por las que se expande la celda. El valor 0 quiere u decir que ocupa todas las columnas hasta la ultima. TH Dene una celda que contiene informacin de cabecera (t o tulo de una la o columna) dentro de una tabla. align Alineamiento del contenido de la celda respecto a los l mites de la misma. Los valores ms importantes son left, center, right y justify. El valor por defecto es a center. 24
bgcolor Color de fondo de la celda. rowspan Nmero de las por las que se expande la celda. El valor 0 quiere decir u que ocupa todas las las hasta la ultima. colspan Nmero de columnas por las que se expande la celda. El valor 0 quiere u decir que ocupa todas las columnas hasta la ultima. TR Contenedor de celdas de una misma la de una tabla. align Alineamiento del contenido de las celdas de la la respecto a los l mites de las mismas. Los valores ms importantes son left, center, right y justify. El valor a por defecto es center. bgcolor Color de fondo de las celdas de la la. U Texto subrayado. UL Lista desordenada. type Estilo de representacin de cada nodo de la lista. Los valores posibles son: o circle para circunferencias, disc para circunferencias rellenas, square para cuadrados. Adems de los atributos incluidos en esta seccin, existen otros tres que por su ima o portancia y amplio alcance merecen ser tratados de manera especial. Estos son: class Se aplica a todos los elementos HTML excepto a BASE, BASEFONT, HEAD, HTML, META, PARAM, SCRIPT, STYLE, TITLE. Pemite asignar uno o varios nombres de clase a un elemento en un documento. Varios elementos distintos pueden pertenecer a la misma clase. Esto puede ser usado para agrupar los elementos y asociarles la misma informacin de estilo a todos. o id Se aplica a todos los elementos HTML excepto a BASE, HEAD, HTML, META, SCRIPT, STYLE, TITLE. Pemite asignar un identicador unico a los elementos de un documento. Elementos distintos no pueden tener el mismo identicador. Esto puede ser usado para seleccionar un elemento concreto dentro del documento y asociarle informacin de estilo espec o ca sin tener que usar el atributo style. style Se aplica a todos los elementos HTML excepto a BASE, BASEFONT, HEAD, HTML, META, PARAM, SCRIPT, STYLE, TITLE. Permite asociar informacin o de estilo espec ca (t picamente CSS) a un elemento concreto.
B.
Referencia de propiedades bsicas CSS a

Valores ms usados: [Color]2 o transparent. a
background-color Color de fondo de los elementos seleccionados.
background-image Imagen de fondo de los elementos seleccionados.

2
[Color] representa un color cualquiera especicado utilizando los mecanismos expuestos en ??
25
Valores ms usados: una URL con la localizacin de la imagen en formato a o url(localizacin). o color Color del texto de los elementos seleccionados. Valores ms usados: [Color]. a text-align Establece cmo se alinea el texto de los elementos seleccionados. o Valores ms usados: left, right, center, justify. a text-decoration Decoracin del texto de los elementos seleccionados. o Valores ms usados: underline (subrayado), overline (superrayado), line-through a (con una l nea tachndolo horizontalmente) y blink (parpadeando). a text-indent Indentacin de la primera l o nea de texto de un bloque. Valores ms usados: [Tamao]3 a n text-transform Transformacin aplicada al texto de los elementos seleccionados. o Valores ms usados: uppercase (poner en mayscula), lowercase (poner en a u minscula) y capitalize (poner la primera letra en mayscula). u u font Permite establecer el tamao, tipo y estilo (entre otras propiedades) de la fuente n que ser empleada para representar el texto de los elementos seleccionados. a Valores ms usados: su valor ser la concatenacin de los valores concretos de a a o tamao, tipo y estilo (suponiendo que slo se establezcan estas tres caracterin o ticas de la fuente). As por ejemplo valores vlidos de esta propiedad ser a an: {font: bold italic large Courier;} o {font: 12pt sans-serif;}. font-family Especica una lista de posibles familias de tipos de letra que pueden ser empleadas para representar el texto de los elementos seleccionados. Valores ms usados: pueden ser nombres concretos de familias (como Courier, a Arial, etc) o nombres genricos de familias (como serif, sans-serif, cursive, e etc.) La lista estar compuesta por una serie de estos valores separados por a comas. En caso de incluir nombres concretos y genricos, los concretos deben e especicarse con anterioridad, puesto que los navegadores elegirn como familia a la primera de la lista que puedan utilizar. font-size Permite especicar el tamao de la fuente utilizada para representar el conten nido de los elementos seleccionados. Valores ms usados: [Tamao], xx-small, x-small, small, medium, large, x-large, a n xx-large cuyo valor depender de la implementacin del navegador, siendo la a o unica restriccin que los valores estn ordenados de manera creciente (es decir, o a que el tamao asociado a xx-small sea menor que el de x-small, ste a su vez n e menor que el de small y as sucesivamente).
3
[Tamao] se corresponde con lo denido en ??: un valor absoluto o relativo o un porcentaje. n
26
font-style Estilo de la fuente que se utilizar para representar el texto de los elementos a seleccionados. Valores ms usados: normal, italic (cursiva) y oblique (cursiva inversa, doblada a hacia el otro sentido). font-weight Especica el peso de la fuente, si esta es ms clara o ms oscura. a a Valores ms usados: normal, bold, bolder, lighter, 100, 200,..., 900. a display Opciones de visualizacin de los elementos. o Valores ms usados: inline y block cuyo signicado se puede deducir leyendo a la seccin ??. o border Mecanismo abreviado de denir el ancho, estilo y color de los cuatro bordes de la caja que encierra a un elemento a la hora de representarlo. Valores ms usados: Se concatenan los valores de ancho, estilo y color. As un a posible ejemplo de valor vlido de esta propiedad ser {border: thick solid a a: red;} border-bottom-width Ancho del borde inferior de la caja que encierra a un elemento a la hora de representarlo. Valores ms usados: Longitud (no porcentaje) o uno de los siguientes valores: a thin (delgado), medium, thick (grueso). border-bottom-style Estilo del borde inferior de la caja que encierra a un elemento a la hora de representarlo. Valores ms usados: a dotted El borde es una serie de puntos. dashed El borde est formado por segmentos cortos de recta. a solid Borde slido. o double El borde est compuesto por dos l a neas y un espacio entre ellas. groove El borde parece que est introducido en la ventana. a ridge El borde parece que est saliendo de la ventana del navegador. a inset El borde hace parecer que la caja est introducida en la ventana. a outset El borde hace parecer que la caja que encierra est saliendo de la a ventana del navegador. border-bottom-color Color del borde inferior de la caja que encierra a un elemento a la hora de representarlo. Valores ms usados: [Color]. a border-top-width Ancho del borde superior de la caja que encierra a un elemento a la hora de representarlo. Valores ms usados: [ver border-bottom-width] a
27
border-top-style Estilo del borde superior de la caja que encierra a un elemento a la hora de representarlo. Valores ms usados: [ver border-bottom-style] a border-top-color Color del borde superior de la caja que encierra a un elemento a la hora de representarlo. Valores ms usados: [ver border-bottom-color ]. a border-left-width Ancho del borde izquierdo de la caja que encierra a un elemento a la hora de representarlo. Valores ms usados: [ver border-bottom-width] a border-left-style Estilo del borde izquierdo de la caja que encierra a un elemento a la hora de representarlo. Valores ms usados: [ver border-bottom-style] a border-left-color Color del borde izquierdo de la caja que encierra a un elemento a la hora de representarlo. Valores ms usados: [ver border-bottom-color ] a border-right-width Ancho del borde derecho de la caja que encierra a un elemento a la hora de representarlo. Valores ms usados: [ver border-bottom-width] a border-right-style Estilo del borde derecho de la caja que encierra a un elemento a la hora de representarlo. Valores ms usados: [ver border-bottom-style] a border-right-color Color del borde derecho de la caja que encierra a un elemento a la hora de representarlo. Valores ms usados: [ver border-bottom-color ] a margin Permite especicar el tamao de los mrgenes de la caja que encierra al elemento. n a Es una notacin abreviada de margin-top, margin-bottom, margin-left y margino right. Valores ms usados: Concatenacin de 1 a 4 [Tamaos]. Si slo aparece uno, a o n o ese se aplica a todos los mrgenes, si aparecen 2, el primero se aplica a los a mrgenes superior e inferior y el segundo a los otros, si aparecen 3, el primero a se aplica al margen superior, el segundo a los mrgenes derecho e izquierdo y el a tercero al margen inferior. Por ultimo, si aparecen los cuatro tamaos, se van n aplicando a los mrgenes en el siguiente orden: top, right, bottom y left. a margin-bottom Tamao del margen inferior de la caja que encierra al elemento. n Valores ms usados: [Tamao] a n 28
margin-top Tamao del margen superior de la caja que encierra al elemento. n Valores ms usados: [Tamao] a n margin-left Tamao del margen izquierdo de la caja que encierra al elemento. n Valores ms usados: [Tamao] a n margin-right Tamao del margen derecho de la caja que encierra al elemento. n Valores ms usados: [Tamao] a n padding Tamao del relleno de la caja que encierra al elemento. n Valores ms usados: [ver margin] a padding-bottom Tamao del relleno inferior de la caja que encierra al elemento. n Valores ms usados: [Tamao] a n padding-top Tamao del relleno superior de la caja que encierra al elemento. n Valores ms usados: [Tamao] a n padding-left Tamao del relleno izquierdo de la caja que encierra al elemento. n Valores ms usados: [Tamao] a n padding-right Tamao del relleno derecho de la caja que encierra al elemento. n Valores ms usados: [Tamao] a n list-style-type Permite especicar el tipo de marcador que se utilizar para sealar los a n elementos de una lista. Valores ms usados: a decimal Nmero decimales empezando en 1. u decimal-leading-zero 01, 02, 03, ..., 99 lower-roman i, ii, iii, ... upper-roman I, II, III, ... lower-latin o lower-alpha a,b,c, ... upper-latin o upper-alpha A, B, C, ... lower-greek Letras minsculas del alfabeto griego clsico. u a disc, circle o square Con el mismo signicado que el del atributo type del elemento ul de HTML (ver ??).
29
Referencias
[1] HTML 4.01 Specication http://www.w3.org/TR/html4 [2] XHTML 1.0 The Extensible HyperText Markup Language (Second Edition) http://www.w3.org/TR/xhtml1 [3] XHTML 1.1 - Module-based XHTML http://www.w3.org/TR/xhtml11 [4] XHTML Basic http://www.w3.org/TR/xhtml-basic [5] XHTML 2.0 (Working Draft, July 26 2006) http://www.w3.org/TR/xhtml2 [6] Cascading Style Sheets, level 1 http://www.w3.org/TR/REC-CSS1 [7] Cascading Style Sheets, level 2. CSS2 Specication http://www.w3.org/TR/REC-CSS2
30

Intro HTML

Cargado por

Información del documento

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

Intro HTML

Cargado por

Copyright:

Formatos disponibles

Introduccin a HTML, XHTML y CSS o

Jess Arias Fisteus u Norberto Fernndez Garc a a

Introduccin a HTML y XHTML o

Cdigo XHTML de ejemplo o

Diferencias entre HTML 4 y XHTML

Componentes bsicos de un documento (X)HTML a

Ayer se celebr en... o </p> </body> ...

Estilo del texto

izda. 1 izda. 3 izda.

centro 1 centro 3 drcha.

Hojas de estilo CSS

Declaracin de hojas de estilo o

Esto slo es posible a partir de la versin 2 de la especicacin CSS, denominada CSS2 o o o

Asignacin de propiedades a elementos o

{ text-indent: 3em } { text-align: center } { text-decoration: underline } { text-transform: capitalize }

{ font-style: italic } { font-weight: bold } { font-size: large }

{ margin-top: 10px } { margin-bottom: 1cm } { margin-right: 5em } { padding-left: 10% }

// 10 pixels // 1 cm // 5 veces el tama~o de fuente n // otros: padding-right, padding-top, // padding-left, padding-bottom

Modelo de representacin de CSS o

Referencia de elementos y atributos HTML 4

A Dene un ancla: origen o destino de un enlace. Atributos:

Referencia de propiedades bsicas CSS a

background-color Color de fondo de los elementos seleccionados.

background-image Imagen de fondo de los elementos seleccionados.

[Color] representa un color cualquiera especicado utilizando los mecanismos expuestos en ??

[Tamao] se corresponde con lo denido en ??: un valor absoluto o relativo o un porcentaje. n

También podría gustarte