UNIDAD 2: Lenguajes para la visualizacin de informacin

Este documento tiene como objetivo introducir a los alumnos y alumnas en el desarrollo de
pginas web. En primer lugar se explica el lenguaje de marcas XHTML y se comentan las
diferencias con HTML. Despus de introducir las etiquetas principales tenemos un punto
donde se trata la apariencia de las pginas web, CSS.

U.2: Lenguajes para la visualizacin de la informacin

0. Estndares
Los estndares web son un conjunto de recomendaciones dadas por el W3C
y otras organizaciones internacionales sobre cmo crear e interpretar
documentos web.
Una pgina web basada en los estndares web permite:

Compatibilidad: ser compatible con todos los navegadores actuales, y

con versiones futuras de stos.

Independencia de los dispositivos: funcionar de igual manera en un

navegador de un ordenador, de un telfono mvil, etc.

Facilitar la tarea a los buscadores: a los motores de bsqueda como

Google, Yahoo!, Ask, etc. les gusta un documento con una estructura
semntica correcta. Ya que analizan el contenido de las pginas Web.

Pginas ms ligeras: el uso de CSS aligera entre un 60% y un 70%

las pginas web lo que permite que la pgina se muestre ms
rpidamente al usuario.

0.1 Validacin de pginas Web: W3C

La W3C ofrece un servicio gratuito de validacin de documentos HTML,
XHTML y CSS. Este servicio, conocido como Markup Validation Service,
permite validar una pgina introduciendo su URL, subindola o copiando su
cdigo fuente directamente.

U.2: Lenguajes para la visualizacin de la informacin

Validar correctamente los documentos HTML y XHTML es bsico. Una

validacin correcta permite a los navegadores interpretar correctamente el
documento.
El proceso de validacin pasa por utilizar un DOCTYPE en cada cabecera del
documento.
El DOCTYPE es el conjunto de reglas que determina la estructura de los
documentos y, por tanto, indica al validador como tiene que interpretar
correctamente el documento.
El validador lee el cdigo del documento y localiza los posibles errores,
siempre teniendo como referencia las especificaciones del DOCTYPE
asociado al documento.
Las pginas vlidas segn el W3C pueden mostrar un icono indicndolo:

U.2: Lenguajes para la visualizacin de la informacin

Para el CSS, el W3C tambin dispone de una utilidad similar pero para
validar la sintaxis de las hojas de estilo (CSS) asociadas a los documentos
HTML /XHTML.

Tambin las pginas vlidas disponen de un logo:

U.2: Lenguajes para la visualizacin de la informacin

1. XHTML
1.1 Qu es el XHTML?
Las siglas HTML son las iniciales de la expresin del ingls Hypertext Markup
Language (lenguaje de etiquetas de hipertexto). Se trata de un conjunto de
etiquetas que se intercalan entre el texto de forma que los programas que
utilizamos para navegar por la red conozcan que tienen que mostrar cuando
accedimos a una pgina y como lo tienen que representa en pantalla.
En su origen, el HTML era un lenguaje diseado para compartir informacin
cientfica entre cientficos de todo el mundo. Era puramente un lenguaje
estructural, en el cual no haba forma posible de describir la apariencia de las
pginas (ni tan solo la posibilidad de poner un texto en negrita o cursiva=.
Mas adelante se aadieron muchas opciones para dar formato y presentar
texto y grficos. El W3C recomienda utilizar el XHTML (eXtensible HTML),
que mantiene la misma sintaxis y los mismos mecanismos que el HTML, pero
reformulado con las normas del XML, preparndose para sacar provecho a
las ventajas de este lenguaje.
1.1.1 Elementos, etiquetas y atributos
Cuando trabajamos con el lenguaje XHTML lo haremos con elementos,
etiquetas y atributos:

U.2: Lenguajes para la visualizacin de la informacin

Un elemento en XHTML es un componente del documento que tiene

un significado semntico ( un prrafo, una cabecera, una lista, ...) . Un
elemento est formado, como mnimo, por dos etiquetas y un
contenido, pudiendo contener tambin uno o ms atributos. Ms
adelante se ver con ms detalle que los elementos pueden ser de
dos tipos: en bloque o lnea, y que pueden estar anidados, unos dentro
de otros, es muy importante que se realice correctamente.

Las etiquetas son fragmentos de texto entre los signos menor que (<)
y mayor que (>). Marcan el inicio y el final de un elemento. Hay
etiquetas de inicio (como <nombre>) y etiquetas de fin (como
</nombre>). Un ejemplo seria la etiqueta <html> que como veremos
ms adelante, tienen que estar presente en todos los documentos
XHTML.

Un atributo es un par nombre-valor que se encuentra dentro de la

etiqueta de inicio de un elemento e indica informacin adicional.

1.2 Estructura de un documento XHTML

Un documento XHTML, para ser considerado vlido, debe tener una
estructura mnima con una serie de partes.
Ejemplo de documento vlido:

U.2: Lenguajes para la visualizacin de la informacin

Las partes que forman el documento son:
1. Declaracin del tipo de documento (DTD): en la primera lnea de un
documento XHTML tienen que aparecer siempre la declaracin del tipo de
documento, dentro de la etiqueta <!DOCTYPE> (es el conjunto de reglas que
determinan la estructura del documento). Es un requisito obligatorio. Sin esta
declaracin un documento XHTML no es vlido, ya que el navegador o
dispositivo desconocer las reglas que lo tienen que ayudar a interpretar
correctamente.
2. Elemento raz e idioma: un documento XHTML debe tener siempre un
elemento raz. Este elemento se abre con la etiqueta <html> y se cierra con
</html> y se pone siempre al final del documento. El atributo que hace
referencia al espacio de nombres del XHTML (xml namespace), informa al
navegador del significado de cada etiqueta y atributo del lenguaje XHTML. El
segundo atributo hace referencia al idioma. No especificar el idioma del
contenido del documento va en contra de la accesibilidad y de una correcta
interpretacin de los contenidos (si redactamos un documento en valenciano,
pero no especificamos el idioma un buscador podria confundir la palabra
ingles home con la palabra home en valenciano).
3. Cabecera del documento XHTML: se abre con la etiqueta <head> y se
cierra con </head>. Entre estas dos etiquetas se sita toda la informacin
relativa al documento: tipo de contenido, ttulo, metadatos, enlaces,
referencias,...

Ttulo: va entre las etiquetas <title>...</title> y es obligatorio.

Tipo de contenido: el tipo de archivo y el conjunto de carcteres del

documento XHTML es necesario para que la pgina sea un
documento XHTML vlido. El conjunto de caracteres recomendado
es UTF-8.
http://www.htmlquick.com/es/reference/character-encoding.html

4. Cuerpo del documento: el cuerpo incluye el contenido visible del

documento XHTML. Se inicia con la etiqueta <body> y se cierra con la
etiqueta </body>.

U.2: Lenguajes para la visualizacin de la informacin

1.3 Diferencias entre HTML y XHTML

Las diferencias fundamentales son:

Un documento XHTML requiere una declaracin del tipo de

documento en la primera lnea del documento XHTML y su
contenido tiene que ser:

Un documento XHTML tiene que tener todas las etiquetas,

atributos y valores en minsculas. Por ejemplo se debe poner
<body> y no <BODY>.

Un documento XHTML, a diferencia del HTML, requiere la

presencia de la etiqueta <html> y adems esta tiene que incluir los
atributos xmlns, xml:lang i lang:

Todos los elementos de marcado de un documento XHTML se

tienen que cerrar con la etiqueta correspondiente y todos los
atributos tienen que quedar entre comillas. Los que no tienen
etiqueta de cierre (como <br>, <hr>,etc) se cierran en la misma
etiqueta: <br/>.

Los elementos del documento XHTML tienen que estar anidados

correctamente.

U.2: Lenguajes para la visualizacin de la informacin

1.4 Principales etiquetas
HTML define 91 etiquetas que los diseadores pueden utilizar para marcar
los diferentes elementos que componen una pgina:
a, abbr, acronym, address, applet, area, b, base, basefont, bdo, big,
blockquote, body, br, button, caption, center, cite, code, col, colgroup, dd, del,
dfn, dir, div, dl, dt, em, fieldset, font, form, frame, frameset, h1, h2, h3, h4, h5,
h6, head, hr, html, i, iframe, img, input, ins, isindex, kbd, label, legend, li, link,
map, menu, meta, noframes, noscript, object, ol, optgroup, option, p, param,
pre, q, s, samp, script, select, small, span, strike, strong, style, sub, sup, table,
tbody, td, textarea, tfoot, th, thead, title, tr, tt, u, ul, var

Algunas etiquetas son elementos de bloque, se aplican a un bloque o

prrafo completo. Otras son elementos de lnea que se aplican a palabras
dentro de un prrafo.

Los elementos en lnea definidos por HTML son: a, abbr, acronym, b,

basefont, bdo, big, br, cite, code, dfn, em, font, i, img, input, kbd, label, q,
s, samp, select, small, span, strike, strong, sub, sup, textarea, tt, u, var.

Los elementos de bloque definidos por HTML son: address, blockquote,

center, dir, div, dl, fieldset, form, h1, h2, h3, h4, h5, h6, hr, isindex, menu,
noframes, nos-cript, ol, p, pre, table, ul.

U.2: Lenguajes para la visualizacin de la informacin

A continuacin vamos a hacer un breve resumen de las etiquetas ms

utilizadas.

10

U.2: Lenguajes para la visualizacin de la informacin

1.4.1 Estructurar el texto
La tarea inicial del editor de contenidos HTML consiste en estructurar el texto
original definiendo sus prrafos, titulares y ttulos de seccin, como se
muestra en la siguiente imagen:

Para estructurar el texto de una pgina utilizaremos principalmente prrafos

y ttulos.
Cara prrafo estar dentro de las etiquetas <p> y </p>.
Los ttulos aparecern dentro de las etiquetas <h1>, <h2>,...,<h6>. La
etiqueta <h1> es la de mayor importancia y por tanto se utiliza para definir los
titulares de la pgina. La importancia del resto de etiquetas es descendiente,
de forma que la etiqueta <h6> es la que se utiliza para delimitar las secciones
menos importantes de la pgina.

11

U.2: Lenguajes para la visualizacin de la informacin

Para introducir una lnea en blanco se utiliza la etiqueta <br /> y para incluir
un espacio en banco escribiremos su cdigo: &nbsp;

Cul es el aspecto de la siguiente pgina?

12

U.2: Lenguajes para la visualizacin de la informacin

1.4.2 Marcado de texto
Son etiquetas para marcar los diferentes elementos del texto:

em: nfasis. Se ve como en cursiva en la mayora de los navegadores

strong: ms nfasis. Se suele ver como negrita

blockquote: cita. Puede tener un atributo cite="url" con la URL de la

cita.

abbr: abreviatura. Atributo title="texto" con el significado completo.

acronym: acrnimo. Atributo title="texto" con el significado completo

de las siglas.

dfn: definicin. Atributo title="texto" con la definicin completa.

cite: cita, pero para palabras y no bloques como <blockquote>.

code: cdigo fuente.

pre: texto preformateado. Aparece con los saltos de lnea y espacios

en blanco que tenga.

Ejemplo <em> y <strong>:

13

U.2: Lenguajes para la visualizacin de la informacin

Ejemplo <abbr> o <acronym>:
La etiqueta <abbr> marca las abreviaturas de un texto y la etiqueta
<acronym> se emplea para marcar las siglas o acrnimos del texto. Su
definicin es la siguiente:

La mayora de navegadores muestran por defecto un borde inferior punteado

para todos los elementos <abbr> y <acronym>. Al posicionar el puntero del
ratn sobre la palabra subrayada, el navegador muestra un pequeo
recuadro (llamado tooltip en ingls) con el valor del atributo title:

14

U.2: Lenguajes para la visualizacin de la informacin

Ejemplo <pre>:

15

U.2: Lenguajes para la visualizacin de la informacin

1.4.3 Caracteres especiales
Los caracteres especiales (como los acentos, , , etc) no se deben escribir
nunca en una pgina, sino que se pone su cdigo, que empieza siempre por
& y termina en ;

De esta forma, si se considera el siguiente texto:

Los caracteres <, >, " y & pueden dar problemas con los textos
en HTML
Para mostrar correctamente el texto anterior en una pgina HTML, se debe
sustituir cada carcter especial por su entidad HTML:
<p>Los

caracteres

&lt;,

&gt;,

&quot;

&amp;

pueden

dar

problemas con los textos en HTML</p>

Por otra parte, los caracteres propios de los idiomas diferentes al ingls
tambin pueden ser problemticos. El motivo es que desde que se crea una
pgina Web hasta que llega al navegador del usuario, intervienen numerosos
procesos:

El diseador crea la pgina Web con su editor HTML

Si se trata de una aplicacin dinmica, el programador recorta la

pgina HTML del diseador y la mezcla con el resto del cdigo de la
aplicacin (por ejemplo PHP).

El servidor Web almacena las pginas HTML estticas o el cdigo de

la aplicacin Web y sirve las pginas solicitadas por los usuarios.

16

U.2: Lenguajes para la visualizacin de la informacin

El usuario solicita y visualiza las pginas Web a travs de su

navegador.

Si en todos los procesos anteriores se utiliza la misma codificacin de

caracteres, los caracteres propios de los idiomas se pueden escribir
directamente:

<p>Este prrafo contiene caracteres acentuados y se almacena

en formato UTF-8</p>

La palabra prrafo del ejemplo anterior incluye la letra . Si el editor HTML

del diseador utiliza la codificacin UTF-8, el entorno de desarrollo del
programador tambin utiliza UTF-8, el servidor web sirve las pginas con esa
codificacin y el navegador del usuario es capaz de visualizar las pginas con
formato UTF-8, el texto anterior se ver correctamente en el navegador del
usuario.
Sin embargo, muchas veces no es posible que todos los procesos
involucrados utilicen la misma codificacin de caracteres. Por limitaciones
tcnicas o por decisiones de los diseadores y programadores, los textos
pueden pasar de codificacin UTF-8 a codificacin ISO-8859 en cualquier
momento. Si se produce este cambio sin realizar una conversin correcta, el
navegador del usuario mostrar caracteres extraos en todos los acentos y
en todas las letras como la .

La solucin ms sencilla para asegurar que todos estos caracteres

potencialmente problemticos se van a visualizar correctamente en el
navegador del usuario consiste en sustituir cada carcter problemtico por su
entidad HTML:

17

U.2: Lenguajes para la visualizacin de la informacin

1.4.4 Listas
El lenguaje HTML define tres tipos diferentes de listas para agrupar los
elementos:

Listas no ordenadas: se trata de una coleccin simple de elementos

en la que no importa su orden.

Listas ordenadas: similar a la anterior, pero los elementos estn

numerados y por tanto, importa su orden.

Listas de definicin: un conjunto de trminos y definiciones similar a

un diccionario.

18

U.2: Lenguajes para la visualizacin de la informacin

Listas no ordenadas
Son las ms sencillas y las que ms se utilizan. Una lista no ordenada es un
conjunto de elementos relacionados entre s pero para los que no se indica
un orden o secuencia.
La etiqueta <ul> encierra todos los elementos de la lista y la etiqueta <li>
cada uno de sus elementos.

Visualmente quedara:

Listas ordenadas
Las listas ordenadas son casi idnticas a las listas no ordenadas, salvo que
en este caso los elementos relacionados se muestran siguiendo un orden
determinado.
Se define mediante la etiqueta <ol> y los elementos de la lista se definen
mediante la etiqueta <li>, la misma que se utiliza en las listas no ordenadas.

19

U.2: Lenguajes para la visualizacin de la informacin

Visualmente quedara:

Listas de definicin
Su funcionamiento es similar al de un diccionario, ya que cada elemento de la
lista est formado por trminos y definiciones.

<dl> (definition list) para la estructura global de la lista

<dt> (definition term) para el trmino a definir

<dd> (definition description) para la descripcin del trmino

Visualmente quedara:

20

U.2: Lenguajes para la visualizacin de la informacin

Listas anidadas

Visualmente quedara:

1.4.5 Enlaces
Los enlaces se utilizan para establecer relaciones entre dos recursos.
Aunque la mayora de enlaces relacionan pginas Web, tambin es posible
enlazar otros recursos como imgenes, documentos y archivos.
Los enlaces pueden ser internos o externos en funcin de si enlazan hacia
otra parte del mismo documento Web o hacia un recurso Web externo.
Los enlaces en HTML se crean mediante la etiqueta <a>...</a>, y siempre va
acompaada de un atributo muy especial: href. El valor de este atributo
indica el objetivo del enlace, es decir, el lugar donde el navegador tiene que ir
cuando el usuario haga clic sobre el enlace:

21

U.2: Lenguajes para la visualizacin de la informacin

Enlaces relativos y absolutos
Si el enlace es a un recurso externo a nuestra Web tenemos que poner la
URL completa al recurso, como en el anterior ejemplo.
Pero si es a un recurso de nuestra Web es mejor poner la ruta relativa, por
ejemplo:

Enlaces internos
Son enlaces a una parte especfica del documento. El primer paso es
identificar el elemento al que queremos enlazar. Por ejemplo si una pgina es
muy larga, puede ser til mostrar enlaces de tipo "Saltar hasta la segunda
seccin", "Volver al principio de la pgina",... lo definiremos de dos formas:

Ahora en la posicin donde queremos hacer en enlace a ese elemento

hacemos:

Tambin se puede hacer un enlace interno desde otra pgina Web:

22

U.2: Lenguajes para la visualizacin de la informacin

Ejemplos de enlaces ms habituales

Enlace a un mail: Al pinchar sobre el siguiente enlace, se abre

automticamente el programa de correo electrnico del ordenador del
usuario y se establece la direccin de envo al valor indicado despus de
mailto: La sintaxis es la misma que la de un enlace normal, salvo que se
cambia el prefijo http:// por mailto:

Enlace a un archivo FTP: Para enlazar un archivo almacenado en un

servidor FTP, la parte del protocolo debe cambiar de http:// a ftp://

Enlazar el favicon: El favicon o icono para favoritos es el pequeo icono

que muestran las pginas en varias partes del navegador. Dependiendo
del navegador que se utilice, este icono se muestra en la barra de
direcciones, en la barra de ttulo del navegador y/o en el men de
favoritos/marcadores.

Aunque en principio la imagen debera ser de tipo .ICO (formato grfico de

los iconos), algunos navegadores soportan otros formatos (ej.: .PNG).

Enlazar hojas de estilo con CSS:

23

U.2: Lenguajes para la visualizacin de la informacin

1.4.6 Imgenes
Los formatos de imagen que podemos utilizar en una pgina Web son:

jpg: muy utilizado para fotografas porqu ocupan poco espacio debido
a su compresin. No permite transparencias.

gif: muy utilizado para imgenes con menos de 256 colores (logos,
dibujos, etc). Soporta transparencias y animaciones.

png: es un formato tcnicamente mejor que los otros y permite la

compresin de la imagen sin prdida de calidad y transparencias.

Para insertar una imagen utilizamos la etiqueta <img>. Algunos de sus

atributos son:

src: indica donde se encuentra el archivo con la imagen.

alt: ofrece un texto alternativo a la imagen. El W3C obliga su uso por

razones de accesibilidad.

width: ancho de la imagen en pxels.

height: altura de la imagen en pxels.

1.4.7 Tablas
Las tablas en HTML utilizan los mismos conceptos de filas, columnas,
cabeceras y ttulos que los que se utilizan en cualquier otro entorno de
publicacin de documentos:

24

U.2: Lenguajes para la visualizacin de la informacin

Hasta hace unos aos, las tablas tambin se utilizaban para definir la
estructura de las pginas web. La cabecera de la pgina era una fila de una
gran tabla, el pie de pgina era otra fila de esta tabla y la zona de contenidos
estaba formada por varias columnas dentro de esa gran tabla. Slo se
tienen que utilizar para mostrar contenidos en forma de tabla, no para
maquetar la pgina Web.
Un elemento tabla ir entre las etiquetas <table> y </table>. En su interior
cada fila se etiqueta con <tr> y dentro de cada fila se colocan las celdas con
la etiqueta <td> (o <th>) si se trata de una celda de ttulo. Ejemplo:

25

U.2: Lenguajes para la visualizacin de la informacin

Unir celdas: colspan y rowspan. En ocasiones tenemos que unir celdas de
la tabla. Esto se hace con el atributo rowspan="n" para que ocupe n filas o
colspan="n" para que ocupe n columnas. Ejemplos:

Ejemplo de fusin mltiple:

26

U.2: Lenguajes para la visualizacin de la informacin

1.4.9 Formularios
Un formulario es una pgina Web en la que se piden datos. Los formularios
son la forma ms popular de hacer pginas Web interactivas. Hay formularios
ms o menos complejos: des de la pgina de un buscador hasta los que
ofrecen a los usuarios la posibilidad de realizar sugerencias, hacer
comentarios o enviar cualquier otro tipo de informacin.
En general, estos formularios ocupan una pgina completa y estn formados
por varios elementos.

Ejemplo de un formulario sencillo:

La etiqueta <form> encierra todo el formulario y tiene los siguientes atributos:

action: indica donde encontrar el programa que procesar el

formulario. Normalmente se trata de un script o programa que est
alojado en el servidor Web, pero se puede utilizar el correo electrnico
para enviar los resultados de los formularios. Por ejemplo:

27

U.2: Lenguajes para la visualizacin de la informacin

method: es la forma que utilizar el navegador para comunicarse con

el servidor Web y enviarle la informacin del formulario. Este atributo
puede ser get o post:
o post: este es el mtodo ms comn, y enva al servidor la
informacin del formulario como un bloque de datos, mediante
protocolos HTTP. El usuario nicamente ve la direccin del
formulario web en la barra de direcciones web.

o get: este mtodo enva una peticin al servidor y los datos del
formulario

son

aadidos

la

informacin

del

URL

continuacin de un signo de interrogacin. Por ejemplo, esto es

lo que el usuario ve en su barra de direcciones web:

El signo ? es el delimitador que nos permite separar la

consulta de la URL.
Hay algunas diferencias entre get y post que son realmente
importantes:
i. Si se tiene en cuenta que muchos usuarios aaden como
favoritas las pginas que son el resultado de enviar
formularios, entonces se tiene que utilizar el mtodo get,
ya que no hay forma de marcar como direccin de inters
una pgina que ha sido retornada como resultado de un
post. Por ejemplo una aplicacin Web que devuelve una
lista

de

resultados

despus

de

una

bsqueda,

seguramente los usuarios querrn guardar la pgina

como direccin de inters. Por otro lado, si se trata de
una aplicacin Web que procesa rdenes, seguramente
no se querr que los usuarios puedan marcar la pgina.

ii. Una situacin en la que no se tiene que utilizar nunca el

mtodo get es cuando los datos en el formulario son

28

U.2: Lenguajes para la visualizacin de la informacin

provocados, como tarjetas de crdito o contraseas. Ya
que la direccin URL es visible, as que la informacin
privada se puede encontrar con facilidad por otros
usuarios si buscan en el historial del navegador o si la
pgina queda guardada como direccin de inters. An
ms, si se utiliza un elemento <textarea>, se debera de
utilizar el mtodo post, ya que seguramente se enven
muchos datos.

iii. Finalmente, las peticiones del mtodo get tienen un lmite

de 256 caracteres, mientras que el mtodo post no tiene
lmite en la medida del paquete de datos que se enva.

Si no sabes que mtodo elegir para un formulario, existe una regla

general que dice que el mtodo GET se debe utilizar en los formularios
que no modifican la informacin (por ejemplo en un formulario de
bsqueda). Por su parte, el mtodo POST se debera utilizar cuando el
formulario modifica la informacin original (insertar, modificar o borrar
alguna informacin).

El ejemplo ms comn de formulario con mtodo GET es el de los

buscadores. Si realizas una bsqueda con tu buscador favorito, vers
que las palabras que has introducido en tu bsqueda aparecen como
parte de la URL de la pgina de resultados.

enctype: este atributo indica el formato en que los datos son enviados
al servidor.

29

U.2: Lenguajes para la visualizacin de la informacin

Elementos <input>
La mayora de controles se crean con esta etiqueta.
Sus atributos principales son:

type: indica el tipo de control a crear. Puede ser: text, password,

checkbox, radio, submit, reset, file, hidden, image o button.

name: asigna un nombre al control, imprescindible para que se pueda

procesar el formulario.

value: valor por defecto del control (opcional).

size: grandaria del control, para campos de texto.

maxlength: nmero mximo de caracteres que podremos escribir en

el control.

checked: para controles checkbox y radiobuttom indica que la opcin

est seleccionada por defecto.

disabled= "disabled": el control est deshabilitado y no se enva su

valor.

readonly="readonly": no se puede modificar su contenido.

alt: descripcin del control

Cuadro de texto

Cuadro de contrasea

30

U.2: Lenguajes para la visualizacin de la informacin

Checkbox

RadioButton

Botn de envo y reseteo de formulario

Botn genrico

Ficheros adjuntos

31

U.2: Lenguajes para la visualizacin de la informacin

Cuadro resumen:

32

U.2: Lenguajes para la visualizacin de la informacin

Elementos <select>
La etiqueta <select> sirve para crear una lista desplegable de elementos.
Dentro de ella especificaremos las opciones con <option>.
Los atributos de <select> son los siguientes:

name: representa el nombre asociado con la casilla de texto, que

permite su identificacin en el par nombre/valor.

size: representa el nmero de lneas de la lista (este valor puede ser

ms grande que el nmero de elementos reales de la lista). Nmero de
opciones que se ven (por defecto 1).

multiple: Permite al usuario seleccionar varios campos de la lista.

Los principales atributos de la etiqueta <option> son:

selected: para que la opcin est seleccionada por defecto.

value: el valor que se enva al servidor.

33

U.2: Lenguajes para la visualizacin de la informacin

Otras etiquetas comunes:
A continuacin se citan algunas etiquetas que tambin son interesantes y las
utilizaremos para desarrollar pginas web. Estas tambin estn relacionadas
con los formularios.

Otras etiquetas utilizadas en los formularios:

<label>: para establecer el ttulo de cada campo del formulario. El

nico atributo con la etiqueta <label> es for, que identifica (atributo
id) del campo del formulario para el que esta etiqueta hace de
ttulo.
En el siguiente ejemplo, el nombre de los campos se incluya
mediante texto normal:

Utilizando la etiqueta <label>, cada campo dispone de su ttulo:

La principal ventaja es que el cdigo HTML est mejor estructurado

y se mejora la accesibilidad.

34

U.2: Lenguajes para la visualizacin de la informacin

<fieldset>: agrupa a los controles que estn dentro de ella. En su

interior podemos utilizar la etiqueta <legend> para darle ttulo al marco.

35

U.2: Lenguajes para la visualizacin de la informacin

<textarea>: para crear un cuadro donde escribir texto. Tiene como

atributo rows y cols para indicar las filas y las columnas de cuadrado.

36

U.2: Lenguajes para la visualizacin de la informacin

2. CSS
2.1 Qu es CSS?
CSS (Cascade Style Sheets), hojas de estilo en cascada. Es un lenguaje
orientado a definir el estilo de los documentos Web.

La presentacin no est limitada a la pantalla del ordenador. Con los CSS se

puede definir la impresin del documento, la presentacin visual en
dispositivos mviles o la pronuncia del documento a travs de dispositivos de
lectura.
Pero no todos los navegadores interpretan correctamente la totalidad de la
gramtica CSS, lo que puede llevar a la situacin de que una pgina Web
presentada mediante CSS se vea de forma diferente segn el navegador
utilizado.
De la misma manera que el HTML y el XHTML, el lenguaje CSS ha ido
evolucionando a travs de diferentes versiones segn las directrices del
W3C: la CSS 1, la CSS 2 y la CSS 2.1 y la ltima, que se est desarrollando,
la CSS 3.

37

U.2: Lenguajes para la visualizacin de la informacin

2.2 Aplicar CSS a los documentos XHTML
Hay diferentes maneras de aplicar una hoja de estilo. Cada una de ellas tiene
ventajas e inconvenientes.

2.2.1 CSS en lnea

Con el atributo style se pueden aplicar reglas de estilo directamente a un
elemento del documento XHTML:

El gran inconveniente de esta prctica es ir contra la propia filosofa de los

CSS, que es la de separar la presentacin del contenido.

2.2.2 CSS dentro del elemento <style> en la cabecera del HTML

Este mtodo permite escribir todas las reglas CSS en el documento XHTML,
pero dentro de la cabecera del documento y, por tanto, separadas de la
estructura y el contenido.

Tiene el inconveniente de no poder asociar las reglas CSS a mltiples

pginas Web.

38

U.2: Lenguajes para la visualizacin de la informacin

2.2.3 CSS externos

Se trabaja con dos archivos, un archivo XHTML, que define la estructura del
documento y otro, CSS, asociado al primero, que define la presentacin.
Un CSS externo se puede asociar de diferentes maneras al documento
XHTML:

Utilizando la etiqueta <link>. El atributo href de la etiqueta <link> tendr como

valor la ubicacin fsica del archivo.
Este mtodo tiene la ventaja de que si el CSS est asociado a mltiples
documentos Web, nicamente hace falta que sea descargado una vez,
despus estar en la memoria cache del navegador, y se ganar en
velocidad en la descarga de los documentos y en la navegacin.

39

U.2: Lenguajes para la visualizacin de la informacin

2.3 Sintaxis del CSS
La sintaxis del CSS es totalmente diferente de la sintaxis del XHTML. En vez
de un nmero de etiquetas que estructuran la informacin, en CSS se
encuentra un conjunto de reglas formadas por selectores, propiedades y
valores. Estas reglas determinan el estilo del documento.
El modelo que define una regla CSS sera:

El selector corresponde al nombre del elemento al que modifica la regla. La

propiedad indica la caracterstica del elemento que quedar determinado con
la regla.

Ejemplo:

Los elementos de tipo <h2>, <h3> o <h4> de las pginas asociadas a ste
CSS tendrn un tamao de letra de 12 pxeles, de tipo monospace, de color
negro y el fondo de color blanco.

Comentarios en CSS
Los comentarios en un archivo CSS se escriben entre /* y */

40

U.2: Lenguajes para la visualizacin de la informacin

2.4 Tipo de selectores
Los selectores de regla CSS pueden ser de 4 tipos:

Selector universal, *: la regla se aplica a todos los elementos de la

pgina.

Etiquetas XHTML: la regla se aplicar a todos los elementos de las

pginas incluidas con esa etiqueta.

Selectores id: es un atributo que puede tener cualquier elemento de

una pgina XHTML y tiene que ser nico (no pueden haber dos
elementos en una pgina con el mismo valor id). La regla se aplicar a
ese elemento.

Selectores class: cualquier elemento XHTML puede tener un atributo

class que indica que pertenece a una clase. Puede haber varios
elementos que pertenezcan a la misma clase en una pgina Web. La
regla se aplicar a esos elementos.

Ejemplo de selector universal:

Todos los elementos tendrn tipo de letra Verdana, aunque en posteriores

reglas se puede modificar sobrescribiendo esta regla para algunos
elementos.

Ejemplo de selector XHTML:

El texto de todos los prrafos ser rojo.

41

U.2: Lenguajes para la visualizacin de la informacin

Ejemplo de selector id:
Especificamos en el documento XHTML un elemento que contiene el valor
del atributo id:

La etiqueta <h1> contiene el atributo id de valor rojo. La especificacin del

selector se correspondera con:

Los selectores de tipo id empiezan por el carcter #

Ejemplo de selector class:

Especificamos en el documento XHTML un elemento que contiene el valor
del atributo class:

Si se quiere aplicar un determinado estilo a la clase ciutats, se utilizar el

valor del atributo class aadiendo delante el carcter .

Se pueden aplicar diferentes clases en un mismo elemento XHTML:

El prrafo tiene 2 clases. Podemos aplicar una regla diferente a cada clase:

42

U.2: Lenguajes para la visualizacin de la informacin

2.4.1 Anidar selectores

Podemos anidar selectores porqu una regla nicamente se aplique a los
elementos que tengan todos los selectores de la regla. Los selectores se
tienen que separar por un espacio.

Ejemplo:
Teniendo la siguiente pgina en XHTML:

Y el siguiente CSS:

Todos los elementos marcados como <strong> que estn dentro de un

elemento <p> que est dentro del elemento con el id=informacio tendrn el
color de texto rojo. A los dems elementos <strong> esta regla no les
afectar.

43

U.2: Lenguajes para la visualizacin de la informacin

2.5 Orden en cascada
Una hoja de estilo tendr muchas reglas, muchas veces incompatibles entre
s. En caso de que una regla entre en conflicto con otra hay una jerarqua que
indica cul se aplicar.
Imaginaros que queremos crear un documento que tenga toda la tipografa
de color gris, de una medida de 12 pxeles, sobre un fondo claro. Para
conseguirlo tendremos que definir la siguiente regla:

Esta regla de selector universal afectar a todos los elementos del

documento. Pero si queremos que el ttulo de primer nivel sea de color rojo
tenemos que aadir una segunda regla:

El navegador sobrescribir el valor del color (selector h1 sobre el selector

universal), pero el selector h1 heredar las dems propiedades de la regla
ms general, y mostrar, por tanto, la misma medida y el mismo color de
fondo que el resto de elementos.

Este orden en cascada separa las reglas en seis grupos diferentes segn el
tipo de selector utilizado. El listado de los seis grupos est ordenado de
mayor a menor prioridad. En general, tendrn siempre preferencia los tipos
de selectores de ms precisin que los ms generales.
Los seis grupos en los que se agrupan las reglas segn el tipo de selector
utilizado, ordenador de mayor a menor prioridad son los siguientes:

44

U.2: Lenguajes para la visualizacin de la informacin

1. Propiedades que contienen la expresin !important detrs de su valor:

2. Estilos declarados como valor del atributo style del elemento XHTML:

3. Reglas definidas por uno o ms selectores del tipo ID:

4. Reglas definidas por una o ms clases, atributos o pseudo-selectores:

5. Reglas que contienen uno o ms selectores XHTML:

6. Reglas que contienen el selector universal:

Cuando diferentes reglas de estilo son del mismo nivel de prioridad, el orden
de preferencia vendr determinado por el orden de aparicin: una regla que
aparece despus que otra tendr preferencia sobre la que ha aparecido
primero.

45

U.2: Lenguajes para la visualizacin de la informacin

2.6 Unidades de medida
Se puede diferenciar tres tipos de unidades:

Para indicar la medida de un elemento, por ejemplo del texto, podemos

utilizar unidades de medida absolutas (el tamao siempre ser el mismo) o
relativas (en funcin del tamao de la ventada del navegador o del
dispositivo).

Unidades absolutas
Se pueden medir en pixeles (px), puntos (pt) o milmetros (mm). Ejemplo:

Unidades relativas
Se indican en porcentaje o en unidades em. Ejemplo:

Unidad em: unidad relativa respecto del tamao de letra empleado.

Aunque no es una definicin exacta, el valor de 1em se puede aproximar
por la anchura de la letra M ("eme mayscula") del tipo y tamao de letra
que se est utilizando.

46

U.2: Lenguajes para la visualizacin de la informacin

2.7 Unidades de color
Los colores se pueden indicar por su nombre, por el valor RGB o por su
valor hexadecimal (los nmeros RGB en hexadecimal precedidos de 0x).

Por su nombre:

Por su valor en RGB:

Por su valor en hexadecimal:

47

U.2: Lenguajes para la visualizacin de la informacin

3. Principales propiedades CSS

Vamos a ver algunas de las propiedades CSS ms utilizadas. Podemos ver
un listado completo en la referencia CSS de w3schools:
http://www.w3schools.com/css/default.asp

3.1 Fuente
Font Family
Determina el tipo de fuente. No es muy recomendable especificar una fuente
en concreto porque puede que el navegador del cliente no la tenga instalada.
Es mejor dar una alternativa de un tipo de fuente.

Hay 5 tipos:

Serif: las letras tienen terminaciones pequeas (ej. Times). Favorece la

legibilidad en papel.

Sans-serif: las letras no tienen terminaciones (ej. Arial). Favorece la

legibilidad en pantalla.

Monospace: cada letra tiene la misma anchura, la i ocupa lo mismos que

la m (ej. Courier)

Cursiva: imita la letra escrita a mano (ej. Script)

Fantasia: las dems fuentes (ej. Comic)

Ejemplo:

Indicamos que queremos la fuente Trebuchet MS y, si no est instalada una

arial y sino una helvtica...

48

U.2: Lenguajes para la visualizacin de la informacin

Otras propiedades
Las otras propiedades de fuente son:

color: color del texto.

background-color: color de fondo.

font-size: tamao de la fuente.

font-style: italic (cursiva).

font-weight: bold (negrita), bolder (ms negrita).

line-height: distancia entre lneas.

background: imagen de fondo.

text-decoration: underline (subrallado), overline (lnea por encima), linethrough (rallado), none (ninguno), blink (intermitente).

word-spacing: espacio entre palabras.

letter-spacing: espacio entre letras.

text-indent: sangras.

text-allign: alineacin. Puede ser left, center, right o justify.

Ejemplo:

49

U.2: Lenguajes para la visualizacin de la informacin

3.2 Listas
Algunas propiedades CSS son:

list-style-type (tipo de numeracin): Posibles valores que podemos

utilizar: none, disc (disco slido), circle (crculo), square (cuadrado),
decimal (1,2, ...), lower-roman (i,ii,...),

list-style-image: url (imagen). Para poner una imagen personalizada. Los

mens de las pginas web los haremos con listas.

Ejemplo:

50

U.2: Lenguajes para la visualizacin de la informacin

3.3 Imgenes
Las imgenes son un elemento especial que no se considera de lnea ni de
bloque. Por tanto, para que funcionen correctamente algunas propiedades de
los elementos de bloque tendremos que utilizar la propiedad display: block
con ellas.
background-image
Para utilizar una imagen como fondo (de la pgina, de una tabla,)

Muchas veces utilizamos de fondo una imagen pequea que se repite

muchas veces. Para eso utilizamos la propiedad background-repeat, que
puede tomar los valores repeat-x (para que se repita nicamente en
horizontal), repeat-y (para que se repita nicamente en vertical), los dos
(opcin por defecto) o no-repeat (para que no se repita).
Tambin podemos variar la posicin en que aparece una imagen con
background-position indicando donde la queremos: top, bottom, left, right o
center (por defecto aparece top left). Tambin podemos especificar un
desplazamiento en pxeles.
background
Podemos resumir todo lo anterior con una nica lnea utilizando background
para definir en una lnea el fondo, la imagen, la repeticin y la posicin:

51

U.2: Lenguajes para la visualizacin de la informacin

3.4 Tablas
A las tablas se les pueden aplicar propiedades de colores, imgenes de
fondo, texto, medida, etc. Las propiedades las podemos aplicar a toda la
tabla, a las filas o a cualquier celda en particular.
Algunas de las propiedades que podemos aplicar son:

width y height: para especificar el ancho y alto.

border-spacing: para determinar el espacio entre los bordes de 2 celdas.

background: para especificar el fondo.

text-align: para alinear texto horizontalmente.

vertical-align: para alinear texto verticalmente.

Para ms informacin mirar el anexo I del tema donde se vern todas las
opciones de estilo referente a las tablas.

52

U.2: Lenguajes para la visualizacin de la informacin

4. Estructura de una pgina

4.1 Introduccin al modelo de caja

Hasta la adopcin de la versin 2 del CSS por parte de los navegadores la
maquetacin se haca utilizando tablas e incorporando pequeas imgenes
en blanco para ajustar los elementos de la tabla, y utilizando muchos
espacios en blanco (&nbsp;). Este uso de tablas y espacios en blanco como
elementos de presentacin del documento, permite una maquetacin que se
ve igual en todos los navegadores, pero que comporta importantes
deficiencias:

El mantenimiento, edicin y actualizacin visual del documento se hacen

muy difciles por la complejidad de la maqueta visual.

El peso del documento se incrementa con el uso de tablas, y las pginas

cargan lentamente.

Queda degradada la accesibilidad.

Las pginas maquetadas en tablas resultan menos accesibles des de

dispositivos mviles.

A partir del CSS 2, se incorporan un conjunto de propiedades que permiten el

posicionamiento de todos los elementos XHTML en cualquier parte del
documento.
Cada elemento XHTML del documento est encerrado dentro de una caja
invisible que interacta con el resto de elementos del mismo documento que
tambin se encuentran encerrados en sus respectivas cajas.
Cada caja tiene un contenido y opcionalmente un rea que lo rodea, que
puede constar de un rea de relleno, un borde y un margen. El elemento
ocupa un espacio determinado y puede tener un padding que hace su caja
mayor. Todo ello est rodeado por el borde y a su alrededor se puede
establecer una margin (margen) que separe la caja del resto de cajas de los
otros elementos.

53

U.2: Lenguajes para la visualizacin de la informacin

Propiedades que representan las cuatro partes de una caja:

Contenido (content)
Representa el espacio que ocupa el elemento contenido entre las etiquetas
XHTML y es el que, por defecto, aparece en pantalla.
Relleno (padding)
Es lo que rodea al contenido de la caja. Si el valor de ste es igual a cero,
coincidir con el lmite o margen de la caja.
Borde (border)
Representa el lmite de la caja, que envuelve el contenido del elemento.
Normalmente el borde se muestra como una simple lnea, pero en realidad es
un rea que puede tener cualquier grosor. Si el lmite del borde es igual a
cero, tendr el mismo valor que el padding.
Margen (margin)
Representa el rea transparente que envuelve los lmites o bordes de la caja.
Si el valor del lmite del margen o lmite externo es cero, este ocupar el
mismo espacio que el lmite del borde.

54

U.2: Lenguajes para la visualizacin de la informacin

Cada rea de la caja se puede dividir en cuatro partes: arriba (top), abajo
(bottom), izquierda (left) y derecha (right).
Por ejemplo:

El orden en el cual se especifican estos valores en una lnea es el siguiente:

Tambin se puede resumir:

55

U.2: Lenguajes para la visualizacin de la informacin

4.2 Margin, border y padding
Margin
Representa un rea transparente que rodea la caja. Por defecto, a todos los
elementos del documento se les asigna un valor de margin:0, pero los
navegadores modifican este valor en funcin del elemento. Por ejemplo, a un
elemento h1, sin ninguna regla de estilo asociada, el navegador le asignar
un valor X para los mrgenes. Para evitar estos problemas lo primero que
debemos haces es quitar todos los mrgenes con margin:0.
La propiedad margin, se puede descomponer en cuatro propiedades ms,
segn el lado de la caja que identifique.

En los elementos en lnea los valores que se dan a los mrgenes superiores
e inferiores son ignorados.
El valor de cada margen puede ser positivo o negativo. Un valor negativo
hace que los elementos se aproximen o que se superpongan.
Cuando dos o ms elementos estn en contacto sus mrgenes se colapsan y
la distancia entre sus cajas no es la suma de los mrgenes sino nicamente
el valor del margen mayor. El margen ms pequeo desaparece.
Un valor especial que puede tener un margen es auto que se utiliza para
alinear elementos:

Este elemento aparece siempre alineado a la derecha, independientemente

de la medida de la ventada del navegador. Si se quiere centrar un elemento
pondremos a auto los mrgenes derecho e izquierdo.

56

U.2: Lenguajes para la visualizacin de la informacin

Border
Con los bordes se trabaja de igual manera que con los mrgenes.
La propiedad border se puede dividir en cuatro propiedades ms, para cada
una de ellas se deben especificar los siguientes valores:

border: [ancho del borde][estilo][color];

border-right: [ancho del borde][estilo][color];

border-left: [ancho del borde][estilo][color];

border-top: [ancho del borde][estilo][color];

border-bottom: [ancho del borde][estilo][color];

El estilo puede tomar los siguientes valores: solid, dotted i dashed.

Padding
Con el padding se trabaja de igual manera que con los mrgenes y los
bordes.

57

U.2: Lenguajes para la visualizacin de la informacin

4.3 Dimensiones de la caja
Son la suma de las reas de content, padding, border y margin.

En este caso la medida de un elemento de clase model_box es:

350px + 50px*2 + 30px*2 + 75px*2 = 660px
Nota: Internet Explorer 5 no sigue las recomendaciones del W3C y toma el
valor de width y height como la medida total.
Propiedades de la caja model_box:

El fondo del rea de contenido y de padding ser establecido por el

elemento en su propiedad background (en el ejemplo anterior gris
claro).

El fondo del margen es siempre transparente.

El del border se establece con la propiedad border-color (en el ejemplo

anterior gris oscuro).

En el atributo border se puede establecer su ancho (30 px en el

ejemplo), su estilo (solid) y su color (#555).

4.3.1 Overflow
Si el elemento XHTML no cabe en su caja se utiliza la propiedad overflow.
Su valor por defecto es visible, eso quiere decir que el contenido se har ms
grande que el valor establecido para que sea visible. En el ejemplo de arriba
si tenemos un prrafo de clase model_box que no cabe en los 40px de height
se ignora ese valor y el elemento tendr la altura necesaria para que se
pueda ver el prrafo entero.

58

U.2: Lenguajes para la visualizacin de la informacin

Podemos obligar a que la caja no se haga ms grande mediante la propiedad
overflow. Los valores posibles son:

visible (por defecto): el rea del contenido (content) crece para que se
pueda ver todo el contenido.

hidden: no crecen las reas. El contenido que no cabe en content

aparece en padding y el que tampoco cabe all no se ve.
overflow: hidden;

scroll: hace visibles barras de desplazamiento en el rea content.

overflow: scroll;

auto: hace visibles barras de desplazamiento nicamente si son

necesarias.
overflow: auto;

59

U.2: Lenguajes para la visualizacin de la informacin

4.4 Lnea o bloque: la propiedad display
Hemos visto que hay elementos XHTML de lnea (como <strong> o <a>) y
otros de bloque (como <p> y <h1>). Con la propiedad display podemos
cambiar el comportamiento de estos elementos.
Los valores posibles son:

inline: el elemento se comporta como un elemento en lnea. Si lo

aplicamos a 2 prrafos desaparecer el punto y aparte entre ellos e irn
juntos.

block: el elemento se comporta como un elemento de bloque. Por

ejemplo si lo aplicamos a un enlace en medio de un prrafo aparecer un
punto y aparte antes y otro despus del enlace.

list-item: el elemento se comporta como un elemento de una lista. Si lo

aplicamos a un prrafo aparecer anidado y con una vieta.

none: el elemento no es visible.

60

U.2: Lenguajes para la visualizacin de la informacin

4.5 Posicionamiento
El lenguaje CSS dispone de seis modelos de posicionamiento para ubicar un
elemento en la ventana del navegador: esttico, absoluto, fijo, relativo,
flotante y relativo flotante. Los cuatro primeros forman parte de la
propiedad position, el quinto, el modelo de posicionamiento flotante,
pertenece a la propiedad float. El ltimo modelo, el relativo flotante, es una
combinacin entre los modelos de posicionamiento relativo y flotante.

Esttico (static)
Por defecto todos los elementos son representados por el navegador de
manera esttica, respetando el flujo normal de la posicin de las cajas de los
elementos segn su tipologa, en bloque o en lnea. El flujo normal consiste
en anidar los bloques de elementos representados verticalmente. La posicin
de inicio de un elemento esttico est determinada por el elemento que le
precede. El tamao, el padding, los bordes y los mrgenes del elemento
anterior determinan la posicin del siguiente elemento.

Absoluto (absolut)
El valor absoluto significa que el elemento se separa del flujo normal y se
posiciona en un sitio concreto. Por eso se da como referencia la posicin de
la esquina superior izquierda del elemento a posicionar:

El elemento se posicionar a 200px del margen superior de la pgina y a

30px del margen izquierdo.
Si un elemento se posiciona absolutamente dentro de otro tambin en
posicin absoluta toma como coordenada 0,0 el elemento dentro del cual se
encuentra en vez de la pgina.

61

U.2: Lenguajes para la visualizacin de la informacin

Con este tipo de posicionamiento es posible que unas cajas se superpongan
a otras. La propiedad z-index indica en esos casos quien estar por encima y
quin estar por debajo. Cuanto ms alto sea su valor ms prximo al
usuario se encuentra la caja estando las de valores inferiores por debajo de
ella.

Fijo (fixed)
El valor fijo es como el anterior pero la coordenada 0,0 no ser la esquina de
la pgina sino de la ventana es por ello que si nos desplazamos por la pgina
(con las barras de desplazamiento por ejemplo) la caja posicionada fija
siempre se ve en la misma posicin de la ventana del navegador, no se
mueve.
Ejemplo:

62

U.2: Lenguajes para la visualizacin de la informacin

Relative
Finalmente la posicin relativa es como la static pero el elemento aparece
desplazado de la posicin tantos pxeles como los indicados:

El elemento aparece desplazado 20px por arriba y 100px a la izquierda del

lugar donde debera de estar.

63

U.2: Lenguajes para la visualizacin de la informacin

4.6 Elementos flotantes
La propiedad float
La propiedad float obliga al elemento a "flotar" sobre el flujo normal de
posicionamiento del resto de elementos hacia una de las dos direcciones
posibles: izquierda o derecha.
Los valores que puede tomar la propiedad float son:

left: el elemento flotante acta como un bloque y flota hacia la izquierda.

El contenido fluye por la derecha de la caja flotante, empezando por
arriba.

right: Muy parecido al valor left, pero flotando hacia la derecha. El

contenido fluye por la izquierda, empezando por la parte superior.

none: El elemento no flota.

Atendiendo a esta propiedad se pueden destacar algunos comportamientos

como los siguientes:

Cuando un elemento flotante no se puede alinear horizontalmente con

otro elemento flotante, se ubicar de bajo de ste.

La posicin de un elemento flotante, su medida, mrgenes y padding,

afectan a la posicin de los otros elementos flotantes, como cualquier otro
contenido en lnea adyacente.

Nunca se puede predeterminar la ubicacin precisa de un elemento

flotante.

La propiedad clear
La propiedad clear anula el efecto de la propiedad float, devolviendo al flujo
normal del documento. Puede tomar los valores: left o right (segn sea el
valor flotante del elemento precedente) o both (para anular tanto un float left
como un right).

64

U.2: Lenguajes para la visualizacin de la informacin

4.7 Composicin de una pgina Web
Con todo lo que hemos visto hasta ahora vamos a estructurar nuestra pgina
Web. La pgina tendr el siguiente aspecto:

Para estructurar la informacin utilizamos la etiqueta <div> en el archivo

XHTML, as creamos los diferentes bloques que contendrn los contenidos
de la misma y en el archivo CSS posicionaremos y daremos el formato
deseado a esos elementos.
Para tener ms control sobre todos los elementos los crearemos dentro de un
elemento contenedor.
El cdigo de la pgina XHTML ser:

65

U.2: Lenguajes para la visualizacin de la informacin

Contenedor y cabecera
Al contenedor le daremos un ancho de 770px y le pondremos un fondo gris
para poderlo ver (despus si queremos lo quitamos). Adems le pondremos
un padding de 20px.

Pondremos a 0 los mrgenes superior e inferior y a auto el derecho y el

izquierdo para que el contenido aparezca centrado en la ventana.
Respecto a la cabecera le pondremos una altura de 70px y el texto centrado.

66

U.2: Lenguajes para la visualizacin de la informacin

El margen superior en IE es mayor que en Firefox. Este es el margen que el
navegador aplica al body y cambia de unos navegadores a otros. Para evitar
diferencias aadiremos en las hojas CSS una regla para poner a 0 los
margin, padding y border de todos los elementos:

67

U.2: Lenguajes para la visualizacin de la informacin

Men
Crearemos el men con float: left lo posicionamos a la izquierda (siempre
dentro del contenedor). Tambin crearemos el men utilizando una lista:

A continuacin le daremos al men un aspecto mejor (en el siguiente punto

se mejorar el aspecto del men). Y quedar as:

68

U.2: Lenguajes para la visualizacin de la informacin

Contenido
Ahora creamos la seccin del contenido y especificamos las propiedades de
fondo, texto, etc.:

Pero tenemos un problema: un objeto flotante nicamente afecta a los

elementos que se encuentren en la misma altura que ste. Para que el
contenido no se expanda hacia abajo al men le tenemos que dar un margen
izquierdo como mnimo de la anchura del men:

69

U.2: Lenguajes para la visualizacin de la informacin

Pie de la pgina
Por ltimo nada ms nos queda crear la seccin del pie. Como queremos
que est por debajo tanto del men como del contenido y el men es flotante
tenemos que darle al pie la propiedad clear: both (o clear: left) que obliga a
que este elemento empiece despus de terminar los objetos flotante que
hubiese.
Si fuese mayor la longitud del men sin la propiedad clear el resultado sera:

Despus de aadir esa propiedad quedara:

70

U.2: Lenguajes para la visualizacin de la informacin

4.8 Mejorar el men
Como hemos visto antes hemos creado los mens utilizando listas. Una vez
creado con CSS cambiaramos totalmente su apariencia:

El resultado sera:

Si queremos crear un men horizontal en vez del men vertical anterior

tenemos que utilizar display:inline para los elementos de la lista (crear un
estilo #nav ul li con esa propiedad) y quitar display:block de los enlaces. El
resultado sera:

71