Introducción a HTML, XHTML y CSS

Jesús Arias Fisteus

Norberto Fernández García

Introducción a HTML

Para poder publicar la información y distribuirla globalmente, se necesita un lenguaje universalmente entendible por las máquinas. Este lenguaje es en el World Wide Web HTML (HyperText Markup Language).

HTML permite:

HTML fue desarrollado inicialmente por Tim Berners-Lee en el CERN (Centro Europeo de Investigación Nuclear). La aparición del primer navegador, Mosaic, desarrollado en el NCSA (Centro Nacional de Aplicaciones de Supercomputación en EE.UU.) contribuyó a la rápida popularización de esta nueva tecnología, y esa popularidad motivó un rápido desarrollo de la misma. Así, en noviembre de 1995 apareció el primer estándar HTML, llamado HTML 2.0, desarrollado bajo el auspicio del IETF y recogido en la RFC 1866. La siguiente versión de la especificación sería ya HTML 3.2 (las anteriores como HTML 3.0 no fueron sino meros borradores), aparecida en enero de 1997. Finalmente, en diciembre de ese mismo año apareció la última versión, llamada HTML 4, que fue revisada en abril de 1998 y ligeramente modificada en diciembre de 1999, dando lugar a la versión HTML 4.01.

Los principales aportes de la versión 4 de la especificación fueron:

Componentes básicos de un documento HTML

Elementos

Un documento HTML está formado por una jerarquía de elementos y texto. Cada elemento puede contener, a su vez, otros elementos y texto. Un elemento está delimitado por marcas (tags), que pueden ser de tres tipos: El contenido de un elemento es la porción del documento que se encuentra entre su marca de inicio y su marca de fin. El tipo de contenido de cada elemento está especificado, y debería ser respetado. Por ejemplo, el elemento html debería contener, en este orden, un elemento head y un elemento body. Existen dos tipos básicos de elementos, por su forma de ser representados: elementos de bloque (block) y elementos en línea (inline). Los primeros siempre son representados comenzando una nueva línea (por ejemplo: párrafos, tablas, 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: imágenes, elementos para especificar fuentes, cursiva, negrilla, etc.)

Atributos

Los elementos, además de contenido, pueden tener atributos. Un atributo está formado por un nombre y un valor. Los atributos de un elemento se especifican en su marca de inicio (o de elemento vacío), indicando, en este orden, su nombre, el sí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" />

En caso de que sea necesario especificar 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 significado, se encuentran especificados, y deberían ser respetados.

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 carácter reservado (<, >, &), el editor no es capaz de representarlo, o el sistema de codificación del documento no lo permite (por ejemplo, en ASCII de 7 bits no es posible introducir tildes o la letra ñ).

En la siguiente tabla se recoge la forma de referenciar a las entidades más habituales:

Referencia Carácter
&amp; &
&lt; <
&gt; >
&aacute; á
&eacute; é
&iacute; í
&oacute; ó
&uacute; ú
&ntilde; ñ
&iquest; ¿


Para escribir en castellano es, sin embargo, más cómodo declarar el sistema de codificación de caracteres ISO Latin 1 (ISO-8859-1), que permite utilizar todos los caracteres 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" />

Texto

El texto de un documento HTML se introduce como contenido de aquellos elementos que lo permitan. Los caracteres de fin de línea son tratados como espacios en blanco. Por otra parte, dos o más espacios en blanco consecutivos son tratados como un único espacio en blanco. Los navegadores se encargan de dividir el texto en líneas dependiendo del ancho de la ventada de representación, tamaño de letra, etc.

Si se desea forzar un cambio de línea, puede recurrirse al elemento br (marca <br />), pero sólo en situaciones justificadas. En la mayoría de las ocasiones, basta con dividir el texto en párrafos (es decir, englobar cada párrafo dentro de un elemento p). Por ejemplo: 

<p> 
El texto de un documento HTML se introduce como contenido
de aquellos elementos que lo permitan. Los caracteres de fin
de línea son tratados como espacios en blanco. 
</p>

<p> 
Por otra parte, dos o más espacios en blanco 
consecutivos son tratados como un único espacio en blanco. 
</p>

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 útiles para la siguiente vez que tenga que modificarlo, ocultar temporalmente texto o elementos, etc. Se especifican entre ``<!--'' y ``-->''. Por ejemplo: 

<!-- un comentario en una línea -->
<!-- comentario que ocupa más de una
línea -->

Elementos más utilizados

Elementos estructurales básicos

Todo el documento HTML está contenido dentro del elemento html. Por otra parte, 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 codificación de caracteres, hojas de estilo, meta-datos, etc.) El cuerpo contiene la parte directamente representable del documento (texto, imágenes, tablas, etc.) Cada una de estas partes está contenida dentro de un elemento. La estructura básica es, por tanto: 

<html>
  <head>
    ...
  </head>
  <body>
    ...
  </body>
</html>

Títulos

Normalmente, un documento HTML debe tener un título, que se suele mostrar en la barra superior de la ventana del navegador. Éste se especifica 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ítulo. En HTML se pueden utilizar los elementos h1, h2,..., h6. Estos elementos, de tipo bloque, aceptan como contenido el título de la sección. Cuanto menor es el número del nombre del elemento, de más alto nivel será la sección, como se puede ver en el siguiente ejemplo: 

...
<body>
  <h1>Noticias de última hora</h1>
  <h2>Nacional</h2>
  <h3>Palacio asegura no haber recibido ninguna...</h3>
  <p>
    Ayer, Marruecos acusó a España en la prensa...
  </p>
  
  <h3>...</h3>
  <p>
    El ministro de...
  </p>
  
  <h2>Internacional</h2>
  <h3>...</h3>
  <p>
    Ayer se celebró en...
  </p>

</body>

Párrafos

El elemento p es un elemento de bloque que permite estructurar el texto en párrafos. Puede contener texto y cualquier elemento en línea.

Imágenes

Las imágenes se insertan mediante el elemento en línea img. La mayoría de los navegadores son capaces de representar imágenes GIF, JPEG y PNG. Este elemento no puede tener contenido, y en él se especifica mediante atributos la siguiente información:

A continuación se muestran dos ejemplos de utilización: 

<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" />

Enlaces

Los enlaces a otras páginas se pueden realizar mediante el elemento en línea a. Su contenido es el texto (o imágenes) que el usuario puede pinchar para activar el enlace. El destino del enlace se especifica mediante el atributo href. El siguiente ejemplo muestra un enlace a otra página dentro de un párrafo: 

<p>
  La Escuela Politéctica de la <a href="http://www.it.uc3m.es">Universidad
  Carlos III de Madrid</a> está situada en Leganés.
</p>

Al igual que en el caso de las imágenes, el destino puede ser codificado de forma absoluta o relativa. También se puede asociar un enlace a una imagen, como se refleja en 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 último indicar que también es posible enlazar una parte de un documento HTML desde el propio documento o desde otro documento externo. Para ello no hay más que utilizar un elemento a pero acompañado de un atributo name (o id en XHTML) en lugar de href. Este elemento a actuará así como destino del enlace, seleccionando un bloque de documento. Para acceder a ese bloque se usará también el elemento a indicando en su 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 útil para movernos rápidamente por el interior del documento cuando éste tiene un tamaño considerable. Asimismo puede ayudarnos para construir un índice, con distintas secciones a las que se puede acceder directamente, dentro del documento HTML.

Listas

Las listas permiten estructurar información en puntos, comenzando cada punto en una nueva línea. Existen tres elementos, todos de tipo bloque, para especificar listas, uno para cada uno de los tipos de lista permitidos: listas ordenadas, listas no ordenadas y listas de definiciones.

Las listas ordenadas (elemento ol) asignan automáticamente un número a cada item de la lista. El contenido de este elemento es uno o más items de lista (elemento li).

Las listas no ordenadas (elemento ul) son como las anteriores, pero no asignan números a los items.

Las listas de definiciones (elemento dl) tienen como contenido elementos dt y dd. El primero permite especificar el término a definir, y el segundo, la propia definición.

A continuación se muestran ejemplos de listas, y cómo se verían en un navegador: 

<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 definiciones.
Lista ordenada:
  1. Listas ordenadas.
  2. Listas no ordenadas.
  3. Listas de definiciones.
Lista de definiciones:

HTML

HiperText Markup Language

XML

eXtensible Markup Language

Estilo del texto

Los elementos para controlar el estilo del texto se dividen en dos categorías: estilo físico y estilo lógico.

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 mecanografiado; font: tamaño y color de la fuente).

Los elementos de estilo lógico aportan información semántica acerca de su contenido, lo cual puede afectar, indirectamente, a su estilo de presentación. Se recogen en la siguiente tabla:

cite Cita
code Código fuente
dfn Definido
em Enfatizado
kdb Palabra clave
samp Ejemplo
strong Resalta
var Variable

Tablas

Las tablas resultan muy útiles para estructurar la información en filas y en columnas. Existen bastantes elementos relacionados con tablas, pero aquí sólo se explican los más relevantes: table, th (cabecera), tr (fila) y td (celda).

En HTML, una tabla se representa como un conjunto de filas. A su vez, cada fila contiene una o más celdas. En las misma tabla, todas las filas deben tener el mismo número de celdas, para poder representar las columnas correctamente alineadas.

Por defecto, cada celda se corresponde con una columna. El atributo colspan de td permite variar esta correspondencia, estableciendo su valor como el número de columnas por las que se debe expandir una celda.

A continuación se presenta un ejemplo, con su aspecto aproximado: 

<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. centro drcha.
1 izda. 1 centro 1 drcha.
3 izda. 3 drcha.

Marcos (Frames)

Los marcos permiten la división del espacio de visualización del navegador en subventanas independientes. En cada una de esas subventanas se puede presentar un documento HTML diferente.

A continuación se presenta un ejemplo con su aspecto aproximado: 

<html>
<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>
  <noframes>
      <p>Este documento contiene
      <ul>
         <li><a href="contenidos1.html">Un documento</a>
         <li><img src="contenidos2.gif" alt="Una imagen">
         <li><a href="contenidos3.html">Otro documento</a>
         <li><img src="contenidos4.gif" alt="Otra imagen">
      </ul>
  </noframes>
</frameset>
</html>








     
     
 

Como se puede ver, tres son los principales elementos que intervienen en el proceso de creación de marcos:

frameset
utilizado para determinar la disposición de los marcos en la ventana de visualización. Observar que sustituye al elemento body como raíz del cuerpo del documento.
frame
utilizado para definir los contenidos y apariencia de un marco concreto.
noframes
utilizado para especificar el contenido alternativo a presentar por el navegador en caso de que éste no soporte el uso de marcos.

Formularios

Los formularios son elementos de bloque que pueden contener controles, mediante los cuales el usuario puede interactuar con la página, normalmente para enviar datos al servidor web.

Controles

Cada control tiene un nombre, especificado mediante el atributo name. Además, cada control tiene asociado un valor inicial (salvo excepciones, especificado en el atributo value) y un valor actual (introducido por el usuario o por un script).

Cuando el formulario es enviado, se envía el nombre de cada uno de sus controles, y su valor actual.

Tipos de controles

En un formulario se pueden utilizar distintos tipos de controles:

Envío de un formulario

Cuando el usuario pincha en un botón de tipo submit, se produce el envío del formulario. Existen dos métodos de envío, que se especifican mediante el atributo method del elemento form:

Los parámetros a los cuales se hace mención son pares que contienen el nombre y valor actual correspondientes a todos los controles con éxito (en general, son aquellos que no se encuentren deshabilitados, y los botones radio y checkboxes que se encuentren en on).

Por otra parte, hay dos formas de codificar los parámetros a enviar al servidor, seleccionables mediante el atributo enctype del elemento form:

Ejemplo

A continuación se muestra el código de ejemplo de un formulario. 

<form action="http://acme.es/submit" method="post"
      encoding="multipart/form-data" >
 <h3>Información Personal</h3>
   <p>
    Apellidos: <INPUT name="personal_apellidos" type="text">
    Nombre: <INPUT name="personal_nombre" type="text">
    Dirección: <INPUT name="personal_direccion" type="text">
   </p>

 <h3>Historia Médica</h3>
   <p> 
    <input name="historia_enfermedades"
           type="checkbox" value="Sarampión" /> Sarampión
    <input name="historia_enfermedades"
           type="checkbox" value="Varicela" /> Varicela
   </p>

 <h3>Medicación actual</h3>
   <p>
    Está tomando usted medicación actualmente:
    <input name="medicacion_ahora" type="radio" value="Si">Sí
    <input name="medicacion_ahora" type="radio" value="No">No
   </p>
   <p>   
    Si la respuesta es afirmativa, indique el nombre de los
    medicamentos:
   </p>
   <p>
    <textarea name="medicación actual:" rows="20" cols="50">
    </textarea>
   </p>
   <p><input type="submit" value="Enviar" /></p>
</form>

Introducción a XHTML

XHTML es una redefinición de HTML 4 en XML. A pesar de detener distinto nombre, conserva la mayoría de los elementos y atributos de HTML. En 4.1 comentaremos en detalle las diferencias existentes entre HTML 4 y XHTML, pero adelantamos que las más destacables están en la ausencia de elementos y atributos relacionados con estilo (fuentes, colores, etc.), que ya en HTML 4 están desaconsejados, y en la existencia de unas normas más estrictas en la colocación de etiquetas de elementos.

En cuanto a los motivos por los que se vió la necesidad de redefinir HTML 4 como aplicación XML, podemos citar los siguientes:


Diferencias con HTML 4

Como ya indicamos, XHTML no es más que una redefinición de HTML 4 como aplicación XML. Como consecuencia de este hecho la semántica de los elementos y atributos de XHTML es exactamente la misma que en HTML 4. Existen sin embargo pequeñas diferencias entre los dos lenguajes de hipertexto, las principales de las cuales son:


Versiones de XHTML

Actualmente, existen varias versiones de XHTML:
XHTML 1.0
[2] el más parecido a HTML 4, con tres variantes:
Transitional
permite el uso de las capacidades de presentación de HTML y está pensado para trabajar con navegadores con soporte de CSS limitado.
Strict
no se permite el uso de los elementos y atributos relacionados con aspectos de presentación. Pensado para ser usado con hojas de estilo CSS.
Frameset
permite el uso de marcos (frames) para dividir la ventana del navegador.
XHTML 1.1
[3] nueva versión, que parte de XHTML 1.0 strict. No permite el uso de elementos y atributos relacionados con el estilo (pero sí, obviamente, hojas de estilo, como CSS). Se introduce el concepto de modularización.
XHTML Basic
[4] versión simplificada de XHTML 1.1 pensada para dispositivos de capacidad limitada de procesado, como televisores, teléfonos, móviles, PDAs, etc.
XHTML 2.0
[5] se encuentra actualmente, y desde hace unos cuantos años, en proceso de estandarización (Working Draft) por parte del W3C (World Wide Web Consortium). Retoma la línea iniciada con XHTML 1.1 de modularizar XHTML, añadiendo nuevos módulos como XML Events y XForms. Estos módulos nacen con el objetivo de minimizar el uso de scripts dentro de documentos XHTML mediante la inclusión, como parte del propio lenguaje, de los medios necesarios para implementar las funcionalidades más importantes que requerían el uso de dichos scripts (eventos y formularios).

Ejemplo

A continuación se muestra un ejemplo sencillo de documento XHTML 1.0 Transicional: 

  <?xml version="1.0" encoding="iso-8859-1"?>

  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

  <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es">
  
   <head>
    <title>Mi primera página XHTML</title>
   </head>

   <body>
    <h1>Hola Mundo!</h1>
   </body>
  
  </html>

Hojas de estilo CSS

En HTML existen elementos y atributos que permiten especificar el estilo de los documentos (por ejemplo, los tipos y tamaños de fuente, colores de texto, colores de fondo, ancho de elementos, etc). El uso de estas características de estilo de HTML presenta sin embargo una serie de problemas:

Para evitar estas dificultades es necesario separar el contenido del documento, su información, de la apariencia con la que esta información se presenta al usuario, consiguiendo así que cambios en una de las partes no afecten a la otra. Por eso la evolución de la recomendación HTML va por la línea de separar estos aspectos dejando la representación de la información a HTML/XHTML e introduciendo mecanismos que permitan representar la información de estilo. Uno de esos mecanismos es CSS (Cascading Style Sheets) [7].

En 5.1 veremos como asociar la información de estilo CSS a documentos HTML/XHTML, pero podemos adelantar que el mecanismo más usado es el de almacenar la información presentacional en un documento denominado hoja de estilo que se enlaza desde la página HTML/XHTML. De este modo, cuando queremos presentar de la misma manera un conjunto de documentos HTML/XHTML no tenemos más que asociarles a todos la misma hoja de estilo, y realizando cambios en esa hoja modificamos el aspecto de todos los documentos. Asimismo, para presentar un documento en dispositivos distintos, basta con asociar a ese documento hojas de estilo distintas o incluso una única hoja de estilo en la que la información a considerar estará condicionada al medio o dispositivo destino1.


Declaración de hojas de estilo

El lenguaje HTML es independiente del lenguaje utilizado para especificar las hojas de estilo. Por ello, en la cabecera del documento HTML, es recomendable declararlo. En el caso de CSS la declaración necesaria es la siguiente: 

<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 continuación se muestran algunos ejemplos: 

<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">
Aren't style sheets wonderful?
</p>

Colores y tamaños

Aquí se presentan los tipos de datos más habituales de las propiedades de CSS: colores y tamaños.


Colores

Hay dos formas de especificar un color: por sus componentes RGB (rojo, verde y azul), o, para los colores predefinidos, por su nombre.

Las componentes RGB se dan indicando para cada uno de estos colores (rojo, verde, azul) un valor entre 0 y 255. Por ejemplo, rgb(64,128,255) especifica un color con 64 de rojo, 128 de azul y 255 de verde.

Los colores predefinidos en CSS son los siguientes: aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white y yellow.


Tamaños

Los tamaños permiten especificar altura y anchura de elementos, tamaños de márgenes, tamaños de fuentes, etc. Pueden ser especificados de forma relativa a otra propiedad (em, tamaño de fuente; ex, valor x-height de la fuente; px, tamaño de pixel) o de forma absoluta (in, pulgadas; cm, centímetros; mm, milímetros; pt, puntos, o 1/72 pulgadas; pc, picas, o 12 puntos).

También se pueden especificar longitudes como porcentajes. En el siguiente ejemplo se establece un margen izquierdo del 10% del ancho del párrafo: 

p  { margin-left: 10% }


Asignación de propiedades a elementos

CSS define 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 establece a qué elementos se les aplica la información de estilo. Las declaraciones especifican propiedades (y sus valores) para los elementos seleccionados. Por ejemplo, la siguiente regla de estilo CSS asigna un color de texto, un tamaño de fuente y texto en negrilla a 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 especifica el selector, y a continuación las declaraciones entre llaves, separadas entre sí por ``;''. El nombre y el valor de cada propiedad se separan por ``:''. Los tamaños de fuente se suelen especificar en puntos (pt en CSS). Los colores pueden ser especificados utilizando las coordenadas RGB, o el nombre del color, para aquellos predefinidos.

En la siguiente tabla se muestran los patrones más importantes que se pueden utilizar como selectores en documentos CSS.

Patrón Elementos seleccionados
* Cualquier elemento.
E Cualquier elemento E.
E,F Cualquier elemento E o F.
E F Cualquier elemento F descendiente de E.
E $>$ F Cualquier elemento F hijo de E.
E:first-child Cualquier elemento que sea el primer hijo de un elemento E.
E:link Cualquier elemento E tal que sea origen de un enlace cuyo destino no haya sido visitado.
E:visited Ídem, 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 atributo 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.

Reglas de cascada

Cabe preguntarse qué pasaría si definimos dos veces en distintas partes de una hoja 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ía por ejemplo si nuestra hoja de estilo, además de la declaración anterior (ver 5.3), contuviese la siguiente: 
p.clase1   { color: rgb(128,128,128); }
Dado que los elementos que son seleccionados por p.clase1 también lo son por p. ¿Qué color tomarían esos elementos?. Aquí es donde entra en juego el mecanismo de cascada que da nombre a esta especificación. Dicho mecanismo establece las siguientes reglas para la resolución de conflictos:

Ejemplos

A continuación se muestran ejemplos sencillos de utilización de propiedades de CSS básicas: 
p  { color: red }
p  { background-color: rgb(128,129,255) }
p  { background-image: url("http://www.foo.com/image.png" }
p  { background: url("http://www.foo.com/image.png" }
p  { background: black }

p  { text-indent: 3em }             // em = tamaño de fuente
p  { text-align: center }           // left, center, right, justify
p  { text-decoration: underline }   // underline, overline,
                                    //   line-through, blink, none 
p  { text-transform: capitalize }   // capitalize, uppercase, lowercase,
                                    //   none

p  { font-style: italic }           // normal, italic, oblique
p  { font-weight: bold }            // normal, bold, bolder, lighter, 
                                    // 100, 200, ..., 900
p  { font-size: large }             // xx-small, x-small, small,
                                    //   medium, large, x-large,
                                    //   xx-large, o un tamaño
                                    //   relativo o absoluto. 
p  { margin-left: 10% }             // 10% del ancho
p  { margin-top: 10px }             // 10 pixels
p  { margin-bottom: 1cm }           // 1 cm
p  { margin-right: 5em }            // 5 veces el tamaño de fuente

p  { padding-left: 10% }            // otros: padding-right, padding-top,
                                    //   padding-left, padding-bottom

Agrupación de elementos

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 después), mientras que el segundo es de tipo en línea y no fuerza a dicho salto. Se muestra, a continuación, un ejemplo que hace uso de ambos: 

<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 
     nueve jornadas de caídas consecutivas, la peor estadística 
     desde la Guerra del Golfo. </p> 
   <p><span class="inicio">El Ibex </span> llegó al triste 
     récord de cinco mínimos anuales seguidos y restó un 
     3,39% para situarse en los 5.390 puntos. </p>
 </div>
</body>

Modelo de representación de CSS

Figura 1: Modelo de caja CSS
\begin{figure}\psfig{figure=box.ps,width=0.8\textwidth}\end{figure}

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 información en pantalla, a cero o más cajas, cada una de las cuales presenta la estructura representada en la figura 1.

Como se puede ver el contenido de la caja está rodeado de tres capas: un relleno (padding), un borde (border) y un margen (margin). Las propiedades recogidas en las recomendaciones CSS1 y CSS2 permiten dar formato (tamaño, color, estilo) a cada una de esas capas así como también al contenido que rodean.


Referencia de elementos y atributos HTML 4

A
Define un ``ancla'': origen o destino de un enlace. Atributos:
href
Especifica la localización (URL) del recurso al que apunta el enlace.
name
Le pone nombre al elemento para que pueda servir de destino a otro enlace.

ADDRESS
Proporciona al lector información de contacto, típicamente sobre el desarrollador de la página web.

B
Texto en negrita (bold).

BLOCKQUOTE
Citas textuales.
cite
URI (Uniform Resource Identifier) que identifica 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 inserción de un fin de línea.

CENTER
Su contenido se representará centrado en la ventana de visualización.

DD
Descripción de un elemento definido.

DIV
Usado para estructurar documentos. Los elementos que conformen su contenido estarán agrupados y se presentarán como un bloque. Diseñado para ser usado en conjunción con hojas de estilo.

DL
Indica el comienzo de una lista de definiciones de términos.

DT
Término a ser definido en una lista de definición.

FONT
Establecer el color y tamaño de fuente.
color
Color de fuente.
size
Tamaño de fuente. Número entero entre 1 y 7 o bien +/- y un número para indicar un incremento/decremento respecto al valor actual. En este segundo caso el valor final absoluto deberá estar igualemente comprendido entre 1 y 7. Así por ejemplo si el valor actual de tamaño de fuente es 5 y el atributo size vale +3, el valor absoluto final será 7 y no 8.

FORM
Formulario.
action
URL con la ubicación del programa que se encargará de procesar la información del formulario.
method
Especifica el método HTTP que se utilizará para enviar al servidor los 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 localización del documento que se va a presentar inicialmente como 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 visualización del navegador dividiéndola en marcos.
cols
Define el número de subespacios verticales.
rows
Define el número de subespacios horizontales.
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 tamaño del espacio de visualización.

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
Tamaño horizontal de la regla. El valor por defecto es 100% (se ocupa a lo ancho la ventana de presentación).

HTML
Raíz de todo documento HTML.

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 localización indicada con src).
height
Altura de imagen.
src
URL con la localización de la imagen a ser insertada.
width
Anchura de imagen.

INPUT
Elemento utilizado para que el usuario pueda introducir información en un formulario (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.
maxlength
Cuando el control es de tipo text o password este atributo indica la longitud máxima de la cadena de texto a introducir.
name
Asigna un nombre al control. Este nombre se envía la servidor para que pueda reconocer los controles existentes.
size
Indica el ancho inicial del control en pixeles. Cuando el control es de tipo text o password el número se refiere al ancho en caracteres. Si maxlength es mayor que size, el navegador debería proporcionar barras de desplazamiento para poder visualizar todo el control.
src
Cuando el control es de tipo image este atributo indica cual es la localización de esa imagen.
type
Tipo del control. Los valores aceptados son: text, password, checkbox, radio, submit, reset, file, 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 únicamente en el head del documento.
href
URL con la localización del recurso enlazado.
rel
Describe de manera textual la relación existente entre el recurso enlazado y la página desde la que se enlaza. Así por ejemplo cuando link se utiliza para 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
Identifica propiedades de un documento (autor, fecha, etc.) y valores asociados a esas propiedades.
content
Valor de la propiedad.
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 codificados en un lenguaje concreto (como por ejemplo Javascript).

OBJECT
Permite incluir objetos en un documento. Un objeto no es más que un conjunto de datos que el navegador no sabe interpretar si no es mediante la utilización de una aplicación externa o plug-in.
data
URL con la localización del objeto que debe ser incluido en el documento.
type
Tipo MIME de los datos referenciados por el atributo data.

OL
Lista ordenada.
start
Establece el número del primer elemento de la lista (por si no queremos que empiece en 1).
type
Estilo de representación de cada nodo de la lista. Los valores posibles son: 1 para números arábigos, a para letras minúsculas, A para letras mayúsculas, i para números romanos en minúsculas, I para números romanos en mayúsculas.

OPTGROUP
Permite agrupar las opciones de un menú de manera lógica.

OPTION
Cada una de las opciones de un menú.
selected
Cuando este atributo aparece y toma el valor selected, la opción aparecerá por defecto inicialmente seleccionada.

P
Representa un párrafo.
align
Alineamiento del párrafo. Valores posibles: left, center, right y justify. El 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 número de espacios en blanco o sustituir las entidades por sus valores.

SCRIPT
Permite incluir trozos de código escritos en un lenguaje de script en el interior del documento HTML. Típicamente se utiliza para asociar código Javascript a los documentos. Puede aparecer tanto en el head como en el body de una página HTML.
src
URL del código del script si éste es externo. Si el código es interno se almacena en el contenido del propio elemento.
type
Tipo MIME asociado al lenguaje de script. Por ejemplo en Javascript es text/javascript.

SELECT
Control de tipo menú.
multiple
Cuando está presente y toma el valor multiple permite que se puedan seleccionar varios elementos en el menú a la vez.
name
Nombre del control.

SPAN
Usado para estructurar documentos. Los elementos que conformen su contenido estarán agrupados y se presentarán como un elemento inline. Diseñado para ser usado en conjunción con hojas de estilo.

STYLE
Puede aparecer únicamente 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 están escritas las reglas de estilo del elemento. Para CSS es text/css.

SUB
Permite añadir un subíndice.

SUP
Permite añadir un superíndice.

TABLE
Utilizado para la definición de tablas.
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
Tamaño del borde de la tabla en pixeles.
cellpadding
Espaciado entre el borde de una celda y su contenido. Las unidades más empleadas son pixeles o % del espacio total disponible.
cellspacing
Espaciado que separa los bordes de la tabla de las celdas, así como las celdas entre si. Las unidades más empleadas son pixeles o % del espacio total disponible.

TD
Define 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 más importantes son left, center, right y justify. El valor por defecto es center.
bgcolor
Color de fondo de la celda.
rowspan
Número de filas por las que se expande la celda. El valor 0 quiere decir que ocupa todas las filas hasta la última.
colspan
Número de columnas por las que se expande la celda. El valor 0 quiere decir que ocupa todas las columnas hasta la última.

TH
Define una celda que contiene información de cabecera (título de una fila o columna) dentro de una tabla.
align
Alineamiento del contenido de la celda respecto a los límites de la misma. Los valores más importantes son left, center, right y justify. El valor por defecto es center.
bgcolor
Color de fondo de la celda.
rowspan
Número de filas por las que se expande la celda. El valor 0 quiere decir que ocupa todas las filas hasta la última.
colspan
Número de columnas por las que se expande la celda. El valor 0 quiere decir que ocupa todas las columnas hasta la última.

TR
Contenedor de celdas de una misma fila de una tabla.
align
Alineamiento del contenido de las celdas de la fila respecto a los límites de las mismas. Los valores más importantes son left, center, right y justify. El valor por defecto es center.
bgcolor
Color de fondo de las celdas de la fila.

U
Texto subrayado.

UL
Lista desordenada.
type
Estilo de representación de cada nodo de la lista. Los valores posibles son: circle para circunferencias, disc para circunferencias rellenas, square para cuadrados.

Además de los atributos incluidos en esta sección, existen otros tres que por su importancia 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 información de estilo a todos.
id
Se aplica a todos los elementos HTML excepto a BASE, HEAD, HTML, META, SCRIPT, STYLE, TITLE. Pemite asignar un identificador único a los elementos de un documento. Elementos distintos no pueden tener el mismo identificador. Esto puede ser usado para seleccionar un elemento concreto dentro del documento y asociarle información de estilo específica 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 información de estilo específica (típicamente CSS) a un elemento concreto.

Referencia de propiedades básicas CSS

background-color
Color de fondo de los elementos seleccionados.

background-image
Imagen de fondo de los elementos seleccionados.

color
Color del texto de los elementos seleccionados.

text-align
Establece cómo se alinea el texto de los elementos seleccionados.

text-decoration
Decoración del texto de los elementos seleccionados.

text-indent
Indentación de la primera línea de texto de un bloque.

text-transform
Transformación aplicada al texto de los elementos seleccionados.

font
Permite establecer el tamaño, tipo y estilo (entre otras propiedades) de la fuente que será empleada para representar el texto de los elementos seleccionados.

font-family
Especifica una lista de posibles familias de fuentes que pueden ser empleadas para representar el texto de los elementos seleccionados.

font-size
Permite especificar el tamaño de la fuente utilizada para representar el contenido de los elementos seleccionados.

font-style
Estilo de la fuente que se utilizará para representar el texto de los elementos seleccionados.

font-weight
Especifica el ``peso'' de la fuente, si esta es más clara o más oscura.

display
Opciones de visualización de los elementos.

border
Mecanismo abreviado de definir el ancho, estilo y color de los cuatro bordes de la caja que encierra a un elemento a la hora de representarlo.

border-bottom-width
Ancho del borde inferior de la caja que encierra a un elemento a la hora de representarlo.

border-bottom-style
Estilo del borde inferior de la caja que encierra a un elemento a la hora de representarlo.

border-bottom-color
Color del borde inferior de la caja que encierra a un elemento a la hora de representarlo.

border-top-width
Ancho del borde superior de la caja que encierra a un elemento a la hora de representarlo.

border-top-style
Estilo del borde superior de la caja que encierra a un elemento a la hora de representarlo.

border-top-color
Color del borde superior de la caja que encierra a un elemento a la hora de representarlo.

border-left-width
Ancho del borde izquierdo de la caja que encierra a un elemento a la hora de representarlo.

border-left-style
Estilo del borde izquierdo de la caja que encierra a un elemento a la hora de representarlo.

border-left-color
Color del borde izquierdo de la caja que encierra a un elemento a la hora de representarlo.

border-right-width
Ancho del borde derecho de la caja que encierra a un elemento a la hora de representarlo.

border-right-style
Estilo del borde derecho de la caja que encierra a un elemento a la hora de representarlo.

border-right-color
Color del borde derecho de la caja que encierra a un elemento a la hora de representarlo.

margin
Permite especificar el tamaño de los márgenes de la caja que encierra al elemento. Es una notación abreviada de margin-top, margin-bottom, margin-left y margin-right.

margin-bottom
Tamaño del margen inferior de la caja que encierra al elemento.

margin-top
Tamaño del margen superior de la caja que encierra al elemento.

margin-left
Tamaño del margen izquierdo de la caja que encierra al elemento.

margin-right
Tamaño del margen derecho de la caja que encierra al elemento.

padding
Tamaño del relleno de la caja que encierra al elemento.

padding-bottom
Tamaño del relleno inferior de la caja que encierra al elemento.

padding-top
Tamaño del relleno superior de la caja que encierra al elemento.

padding-left
Tamaño del relleno izquierdo de la caja que encierra al elemento.

padding-right
Tamaño del relleno derecho de la caja que encierra al elemento.

list-style-type
Permite especificar el tipo de marcador que se utilizará para señalar los elementos de una lista.

Bibliografía

1
``HTML 4.01 Specification''
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 Specification''
http://www.w3.org/TR/REC-CSS2

Sobre este documento...

Introducción a HTML, XHTML y CSS

This document was generated using the LaTeX2HTML translator Version 2002-2-1 (1.71)

Copyright © 1993, 1994, 1995, 1996, Nikos Drakos, Computer Based Learning Unit, University of Leeds.
Copyright © 1997, 1998, 1999, Ross Moore, Mathematics Department, Macquarie University, Sydney.

The command line arguments were:
latex2html -split 0 -no_navigation intro-html.tex

The translation was initiated by Jesus Arias Fisteus on 2007-10-10

Notas al pie

... destino1
Esto sólo es posible a partir de la versión 2 de la especificación CSS, denominada CSS2
... [Color]2
[Color] representa un color cualquiera especificado utilizando los mecanismos expuestos en 5.2.1
... [Tamaño]3
[Tamaño] se corresponde con lo definido en 5.2.2: un valor absoluto o relativo o un porcentaje.

Jesus Arias Fisteus 2007-10-10