Capitulo 3-Diseno y Desarrollo de Aplicaciones en La Web 2.0

HTMLCSS

Versión 1.1 1 de 145

Índice de contenido 1 HTML............................................................................................................................................................................................4

1.1 Trabajo con Visual Studio.....................................................................................................................................................5 1.2 Trabajo con netbeans.............................................................................................................................................................6 1.3 Estructura de un documento html........................................................................................................................................12 1.4 Dando forma al texto...........................................................................................................................................................13 1.5 Enlaces con otras páginas....................................................................................................................................................20 1.6 Imágenes..............................................................................................................................................................................23 1.7 Caracteres especiales...........................................................................................................................................................24 1.8 Fondos.................................................................................................................................................................................25 1.9 Formularios..........................................................................................................................................................................28

1.9.1 Controles de texto.......................................................................................................................................................29 1.9.2 Contraseña..................................................................................................................................................................30 1.9.3 Area de texto...............................................................................................................................................................30 1.9.4 Cuadros combinados y cuadros de lista......................................................................................................................31 1.9.5 Casilla de verificación................................................................................................................................................33 1.9.6 Botones de radio.........................................................................................................................................................34 1.9.7 Botones de envío.........................................................................................................................................................35 1.9.8 Botones de restablecimiento.......................................................................................................................................37 1.9.9 Controles para la transferencia de archivos................................................................................................................38 1.9.10 Campos ocultos.........................................................................................................................................................39 1.9.11 Agrupar controles.....................................................................................................................................................39 1.9.12 Controlar el orden de tabulación...............................................................................................................................40

1.10 Frames...............................................................................................................................................................................41 1.11 Tablas................................................................................................................................................................................48 1.12 iframe.................................................................................................................................................................................55 1.13 Object................................................................................................................................................................................58

1.13.1 Flash..........................................................................................................................................................................58 1.13.2 PDF...........................................................................................................................................................................60 1.13.3 Word.........................................................................................................................................................................60 1.13.4 Excel.........................................................................................................................................................................60 1.13.5 PPT...........................................................................................................................................................................61 1.13.6 mpg...........................................................................................................................................................................61 1.13.7 mp3...........................................................................................................................................................................61

1.14 Agrupación de elementos..................................................................................................................................................62 1.14.1 span...........................................................................................................................................................................62 1.14.2 div.............................................................................................................................................................................62

2 XHTML.......................................................................................................................................................................................63 2.1 Diferencias entre HTML y XHTML...................................................................................................................................63 2.2 Normas................................................................................................................................................................................64

3 CSS...............................................................................................................................................................................................66 3.1 Introducción.........................................................................................................................................................................66 3.2 Definición de CSS...............................................................................................................................................................66 3.3 Agrupaciones.......................................................................................................................................................................68

3.3.1 class.............................................................................................................................................................................68 3.3.2 id.................................................................................................................................................................................68

3.4 Notación de colores en CSS................................................................................................................................................69 3.5 Atributos CSS......................................................................................................................................................................70 3.6 Definición de estilos............................................................................................................................................................72 3.7 Imágenes..............................................................................................................................................................................74

3.7.1 Ancho - Alto...............................................................................................................................................................74 3.7.2 Borde..........................................................................................................................................................................75

3.8 Selector descendente...........................................................................................................................................................76 3.9 Estilos de enlaces.................................................................................................................................................................78

3.9.1 Imágen en enlace........................................................................................................................................................81 3.10 Unidades y Medidas..........................................................................................................................................................81


3.11 Modelo de caja..................................................................................................................................................................82 3.11.1 width.........................................................................................................................................................................85 3.11.2 height........................................................................................................................................................................85 3.11.3 margin.......................................................................................................................................................................85 3.11.4 panding.....................................................................................................................................................................88 3.11.5 border........................................................................................................................................................................91 3.11.6 color..........................................................................................................................................................................91 3.11.7 border-style...............................................................................................................................................................92 3.11.8 background-color......................................................................................................................................................93 3.11.9 position.....................................................................................................................................................................94

3.11.9.1 Posicionamiento normal o estático...................................................................................................................96 3.11.9.2 Posicionamiento relativo..................................................................................................................................97 3.11.9.3 Posicionamiento absoluto................................................................................................................................98 3.11.9.4 Posicionamiento fijo........................................................................................................................................99 3.11.9.5 Posicionamiento flotante (float).......................................................................................................................99 3.11.9.6 clear................................................................................................................................................................101 3.11.9.7 display y visibility..........................................................................................................................................103

3.12 Seudo-elementos..............................................................................................................................................................105 3.13 Layout..............................................................................................................................................................................107 3.14 Menús .............................................................................................................................................................................112

3.14.1 Creación de menú sin imagen.................................................................................................................................112 3.14.2 Creación de menú con imagen................................................................................................................................114 3.14.3 Creación de menú horizontal con lista....................................................................................................................115 3.14.4 Creación de menú vertical con lista........................................................................................................................117 3.14.5 Creación de menú vertical efecto alteral.................................................................................................................118 3.14.6 Rollover con border................................................................................................................................................120

3.15 Recuadro..........................................................................................................................................................................121 3.16 Fotos................................................................................................................................................................................123 3.17 Maquetación....................................................................................................................................................................126

3.17.1 Fondo......................................................................................................................................................................126 3.17.2 Contenedor principal..............................................................................................................................................127 3.17.3 Cabecera.................................................................................................................................................................128 3.17.4 Barra superior de navegación.................................................................................................................................130 3.17.5 Caja buscar.............................................................................................................................................................132

3.18 Tamaños de texto con CSS: buenas prácticas.................................................................................................................135 3.18.1 Tamaño de las fuentes en unidades relativas..........................................................................................................135 3.18.2 Posibilidad de reducir y ampliar el texto de la página............................................................................................136

3.19 Técnicas de tipografía con CSS.......................................................................................................................................137 3.19.1 Cómo afectan los márgenes e interlineado a la velocidad de lectura y comprensión del texto..............................137 3.19.2 Cómo aplicar márgenes e interlineado con CSS.....................................................................................................137 3.19.3 Otros atributos CSS para mejorar el aspecto estético de los textos........................................................................138

3.20 Bordes redondeados en Firefox 3.5.3..............................................................................................................................140 3.21 Bordes redondeados en todos los Browser......................................................................................................................142 3.22 Formatos de tablas...........................................................................................................................................................144


1 HTMLEn 1989 existían dos técnicas que permitían vincular documentos electrónicos, por un lado los hipervínculos (links) y por otro lado un poderoso lenguaje de etiquetas denominado SGML. Por entonces un usuario conocedor de ambas opciones, Tim Berners-Lee físico nuclear del Centro Europeo para la Investigación Nuclear da a conocer a la prensa que estaba trabajando en un sistema que permitirá acceder a ficheros en línea, funcionando sobre redes de computadoras o máquinas electrónicas basadas en el protocolo TCP/IP.

A principios de 1990, Tim Berners-Lee define por fin el HTML como un subconjunto del conocido SGML y crea algo más valioso aún, el World Wide Web. En 1991, Tim Berners-Lee crea el primer navegador de HTML que funcionaría en modo texto y para UNIX.

Los trabajos para crear un sucesor del HTML, denominado HTML +, comenzaron a finales de 1993. HTML+ se diseñó originalmente para ser un superconjunto del HTML que permitiera evolucionar gradualmente desde el formato HTML anterior. A la primera especificación formal de HTML+ se le dio, por lo tanto, el número de versión 2 para distinguirla de las propuestas no oficiales previas. Los trabajos sobre HTML+ continuaron, pero nunca se convirtió en un estándar, a pesar de ser la base formalmente más parecida al aspecto compositivo de las especificaciones actuales.

El borrador del estándar HTML 3.0 fue propuesto por el recién formado W3C en marzo de 1995. Con él se introdujeron muchas nuevas capacidades, tales como facilidades para crear tablas, hacer que el texto fluyese alrededor de las figuras y mostrar elementos matemáticos complejos. Aunque se diseñó para ser compatible con HTML 2.0, era demasiado complejo para ser implementado con la tecnología de la época y, cuando el borrador del estándar expiró en septiembre de 1995, se abandonó debido a la carencia de apoyos de los fabricantes de navegadores web. El HTML 3.1 nunca llegó a ser propuesto oficialmente, y el estándar siguiente fue el HTML 3.2, que abandonaba la mayoría de las nuevas características del HTML 3.0 y, a cambio, adoptaba muchos elementos desarrollados inicialmente por los navegadores web Netscape y Mosaic. La posibilidad de trabajar con fórmulas matemáticas que se había propuesto en el HTML 3.0 pasó a quedar integrada en un estándar distinto llamado MathML.

El HTML 4.0 también adoptó muchos elementos específicos desarrollados inicialmente para un navegador web concreto, pero al mismo tiempo comenzó a limpiar el HTML señalando algunos de ellos como 'desaprobados'.


http://es.wikipedia.org/w/index.php?title=HTML_3.1&action=edit&redlink=1

1.1 Trabajo con Visual StudioImplementar un proyecto web vacío.

Seleccionar:

• Sitio web vacío

• Ubicación: Sistemas de archivos

• Una ruta de almacenamiento

• Lenguaje: Visual Basic


Crear un carpeta para incluir vuestro código

1.2 Trabajo con netbeansCrear un nuevo proyecto


Seleccionar el tipo de proyecto a realizar

Seleccionar la carpeta de almacenamiento del proyecto


Seleccionar el servidor de aplicaciones

Seleccionar alguno de los framework disponibles


Seleccionar la opción para crear una carpeta

Crear una carpeta


Seleccionar la opción para crear un archivo html

Crear un archivo html


Configurar el nuevo inicio de la aplicación

En la opción “Run” configurar la nueva ruta


1.3 Estructura de un documento htmlEl principio esencial del lenguaje HTML (HyperText Markup Language) es el uso de las etiquetas (tags). Por ejemplo, todo el documento HTML debe estar entre las etiquetas <HTML> y </HTML> Las letras de la etiqueta pueden estar en mayúsculas o minúsculas, indistintamente. El documento está dividido en dos partes principales:

• El encabezamiento, comprendido entre las etiquetas <HEAD> y </HEAD>

• El cuerpo, comprendido entre las etiquetas <BODY> y </BODY>

<html><head>

<title> Título de la página </title></head>

<body>[etiquetas que visualizan la página]

</body></html>

Consideraciones sobre el texto:

• Cuando escribimos en el documento el texto que queremos que aparezca en la pantalla, veremos que éste se acomoda a ella, sin que tengamos que pulsar el retorno del carro.

• Si queremos separar el texto en distintos párrafos dejando una línea en blanco debemos usar la etiqueta <P>, (que no tiene su correspondiente etiqueta de cierre </P>). Con este tag no se pueden generar múltiples líneas en blanco, para eso debemos usar el tag <BR> visto enseguida.

• El texto puede tener unas cabeceras, comprendidas entre las etiquetas <H1> y </H1>, <H2> y </H2>, etc. (hasta el número 6). El tamaño mayor es el correspondiente al número 1.

• La etiqueta <CENTER> y </CENTER> centra todo lo que esté dentro de ella, ya sea texto, imágenes, otros.

• También tenemos los separadores, que se consiguen con la etiqueta <HR> (no existe la correspondiente de cierre). Con ella se obtiene una raya horizontal tan ancha como la pantalla, y con la apariencia de estar embutida sobre el fondo.

• Los comentarios en HTML son: 

<html><head>

<title> mi pagina del web - 1 </title></head>

<body><h1> <center> Primera pagina </center> </h1><hr> Esta es mi primera pagina, aunque todavía es muy

sencilla. como el lenguaje html no es difícil, prontoestaré en condiciones de hacer cosas mas interesantes.

<p> Aquí va un segundo párrafo.

</body></html>

1.4 Dando forma al texto• Para separar los párrafos, o cualquier otra cosa, pero sin dejar una línea en blanco, usamos la etiqueta

<BR>. Esta no tiene etiqueta de cierre.

• Para obtener 4 líneas en blanco>:

<BR>

<BR>

<BR>

<BR>

• Al escribir el texto, si se pone más de un espacio en blanco entre dos palabras observamos que el navegador sólo reconoce uno de ellos. Si queremos forzarle a que lo haga, debemos poner el código " "

• Para destacar alguna parte del texto se pueden usar:

◦ <B> y </B> para poner algo en negrita (bold).

◦ <I> y </I> para poner algo en cursiva (italic).

◦ <PRE> y </PRE>. El texto que se encuentre entre ella estará preformateado, es decir que aparecerá como si hubiera sido escrito con una máquina de escribir, con una fuente de espaciado fijo (tipo Courier). Se respetarán los espacios en blanco y retornos del carro. Es muy apropiada para confeccionar tablas y otros documentos similares.

◦ Con <TT> y </TT> se consigue que el texto tenga un tamaño menor y la apariencia de los caracteres de


una máquina de escribir (typewriter). La diferencia con la anterior es que no preformatea el texto, sino que únicamente cambia su apariencia.

◦ <BLOCKQUOTE> y </BLOCKQUOTE> se utiliza para destacar una cita textual dentro del texto general.

◦ La etiqueta <strong> y </strong> le dice a nuestro explorador que el texto ha de estar resaltado. Ojo, no en negrita sinó resaltado. Da la casualidad de que todos los exploradores actuales entienden que el texto en negrita está resaltado, pero si un dia un explorador nuevo quiere resaltar el texto poniendolo en cursiva, la etiqueta strong lo que hará será poner el texto en cursiva y no en negrita.

<html><head>

<title> formatos </title></head>

<body>

¿cuántos caminos debe un hombre andar <br>

<br><br>

<br>  para que lo tengan por hombre?<br>¿cuántos mares debe surcar una blanca paloma

<br>  para poder descansar en la arena? <br>¿cuánto tiempo seguirán silbando las balas de cañón

<br>  antes de ser proscriptas para siempre?<br><b>la respuesta mi amigo, esta <i>soplando</i> en el viento</b>.

<br><br><pre>¿cuantas veces ha de mirar un hombre hacia arriba

<br> para poder ver el cielo?<br>¿cuántos oídos tiene que tener un hombre

<br> para oír los lamentos del pueblo? </pre><br><tt>¿cuántas muertes mas tendrá que haber

<br> para que sepa que ha muerto demasiada gente? </tt><br><blockquote>¿cuántos años puede existir una montaña

</body></html>


• En las fórmulas matemáticas para escribir índices y subíndices, se consiguen con las etiquetas <SUP> </SUP> y <SUB> </SUB> respectivamente.

• Las listas desordenadas se manejan con la etiqueta <UL> y sirven para presentar cosas que necesitan ir precedidas por una viñeta. Su estructura es la siguiente:

<html><head>

<title> mi pagina del web - 1 </title></head><body>

<ul> <li> una cosa <li> otra cosa <li> otra más <li> etc.

</ul> </body>

</html>


<html><head>


<ul><li> mamíferos<li> peces<ul>

<li> sardina<li> bacalao

</ul><li> aves

</ul></body></html>


• Las listas ordenadas (ordered lists) generadas con la etiqueta <OL> sirven para presentar cosas en un

orden determinado. La diferencia con la anterior es que el resultado aparecerá automáticamente un número correlativo.

<html><head>


<ol> <li> primera cosa <li> segunda cosa <li> tercera cosa <li> etc.

</ol></body>

</html>

Al igual que las listas desordenadas, también se pueden anidar las listas ordenadas.

• El tercer tipo lo forman las listas de definición. Son apropiadas para glosarios (o definiciones de términos). Toda la lista debe ir englobada entre las etiquetas <DL> y </DL> y a diferencia de las dos que hemos visto, cada renglón de la lista tiene dos partes:

◦ El nombre de la cosa a definir, que se consigue con la etiqueta <DT> (definition term)

◦ La definición de dicha cosa, que se consigue con la etiqueta <DD> (definition definition).


<html>

<head><title> mi pagina del web - 1 </title>

</head><body>

<dl><dt> una cosa a definir

<dd> la definición de esta cosa<dt> otra cosa a definir

<dd> la definición de esta otra cosa</dl>

</body></html>


<html><head>


<body><center>

<h1> mis aficiones </h1></center>

<hr> sin un orden particular, mis <b> aficiones </b> son las siguientes:<ul>

<li> el cine<li> el deporte<ul>

<li> natacion<li> baloncesto

</ul><li> la musica

</ul>la musica que mas me gusta es <i> (en orden de preferencia): </i><ol>

<li> el rock<li> el jazz<li> la musica clasica

</ol></body>

</html>


1.5 Enlaces con otras páginasEn general, los enlaces tienen la siguiente estructura:

<ahref="XXX"> YYY </A>

XXX: destino del enlace (observarse las comillas)

YYY: texto indicativo en la pantalla del enlace (con un color especial y generalmente subrayado)

Se distinguen cuatro tipos de enlaces:

✔ Enlaces dentro de la misma página

• XXX se sustituye por #marca (marca puede ser cualquier palabra).

• YYY son las palabras que aparecerán en la pantalla en color (en forma de hipertexto).

Su estructura es: <a href="#marca"> YYY </a>

Y en el sitio exacto a donde queremos saltar, debemos poner la siguiente etiqueta: <a name="marca"> </a>

Por ejemplo, para saltar desde aquí al final del documento se usa:

<a href="#final"> Pulsa para ir al final</a>

Y en el final del documento otra etiqueta:

<a name="final"> </a>

✔ Enlaces con otra página nuestra

• Para enlazar con la página mipag2.html sustituimos lo que hemos llamado XXX (el destino del enlace) por el nombre del archivo:

<a href="mipag2.html"> Ejemplo del capitulo 2 </a>

• Si queremos que vaya a un sitio concreto de otra página nuestra en vez de ir al principio de la página, adonde va por defecto, en ese sitio tenemos que colocar una marca (véase la sección anterior), y completar el enlace con la referencia a esa marca.

• Si la página a la que quiero saltar está, por ejemplo, en el subdirectorio subdir, entonces en la etiqueta tendría que haber puesto "subdir/mipag2.html".

• Y a la inversa, si quiero saltar desde una página a otra que está en un directorio anterior, en la etiqueta tendría que haber puesto "../mipag2.html". Esos dos puntos hace que se dirija al directorio anterior. Observase que se debe utilizar el símbolo / para indicar los subdirectorios, y no este otro \, que es propio únicamente de Windows.


Considerar los programas

C:\ricardo\html1\2.html

<html><head>

<title> formatos </title></head><body>

<h4>poemas, indice autores</h4><br><a href="../3.html">vicente balaguet</a>

<br>víctor hugo <br>vinicius de moraes

</body></html>

C:\ricardo\3.html

<html><head>


<body><h4>poemas - vicente balaguet</h4><br>balada catalana <br><a href="html1/2.html">regresar a indice de autores</a>

</body></html>


✔ Enlaces con una página fuera de nuestro sistema

• Para enlazar con una página que esté fuera de nuestro sistema es necesario conocer su URL (Uniform Resource Locator). El URL podría ser, además de la dirección de una página del Web, una dirección de ftp.

<a href="http://home.netscape.com/"> Página inicial de Netscape </a>

Es muy importante copiar estas direcciones correctamente (respetando las mayúsculas y minúsculas, pues los servidores UNIX sí las distinguen).

✔ Enlaces con una dirección de email

• Se sustituye XXX por mailto: seguido de la dirección de email. La estructura de la etiqueta es:

<a href="mailto: dirección de email"> Texto del enlace </a>

Es conveniente poner también en el texto del enlace la dirección de email.

<html><head>


<body><center>

<h1> mis paginas favoritas </h1></center><hr> estas son mis paginas favoritas:<p> <a href="http://home.netscape.com"> netscape </a><br> <a href="http://www.microsoft.com"> microsoft </a><br> <a href="http://www.yahoo.com"> yahoo! </a>

</body></html>


1.6 ImágenesLa etiqueta que nos sirve para incluir imágenes es:

<img src="imagen.gif">

Dentro de la etiqueta se pueden añadir otros comandos, tal como ALT

<img src="imagen.gif" alt="descripción">

Las imágenes deben estar guardadas en un formato especial como GIF. PNG, otros.

El título de la imagen se puede poner arriba, en medio o abajo del lado de la imagen. Para ello se añade el comando ALIGN a la etiqueta.

• <img src="isla.gif" ALIGN=TOP> Titular alineado arriba

• <img src="isla.gif" ALIGN=MIDDLE> Titular alineado en medio

• <img src="isla.gif" ALIGN=BOTTOM> Titular alineado abajo

Se puede utilizar una imagen como enlace a otra página. Según vimos en el capítulo anterior, la estructura general de un enlace es:

<A HREF="xxx"> yyy </A>

En este caso sustituimos xxx por el nombre del fichero de la página a la que queremos acceder y en lugar de yyy ponemos la etiqueta completa de la imagen (que queda así englobada dentro de la etiqueta del enlace)

<html><head>

<title> formatos </title></head><body> <img src="ad_get_your_apps.gif" alt=acceso directo align=top> titular alineado arriba <hr> <br><img src="logo_java.gif" alt=ir al producto align=middle> titular alineado en medio <hr> <br><a href="http://www.java.com/en/desktop/mpowerplayer.jsp"> <img src="mpowerplayer_promo_210_104.jpg" align=bottom> titular alineado abajo </a></body>

</html>


1.7 Caracteres especialesExisten algunas limitaciones para escribir el texto. Una de ellas es debido a que las etiquetas se forman como un comando escrito entre los símbolos "<" y ">". Por tanto, si se quisieran escribir estos caracteres como parte normal del texto, daría esto lugar a una ambigüedad, ya que el programa navegador podría interpretarlos como el comienzo o final de una etiqueta, en vez de un carácter más del texto.

Para resolver este problema, existen unos códigos para poder escribir estos caracteres y otros relacionados con las etiquetas.

< <

> >

& &

" "

Los códigos de las vocales acentuadas se forman comenzando con &, seguido de la vocal en cuestión, seguido de la palabra acute (aguda) y terminando con el signo ;

&aacute áá

&eacute éé

….

&Aacue Á

...

&ntilde ñ

&Ntilde Ñ

&uuml üü


&Uuml Ü

&#191 ¿

&#161 ¡

1.8 FondosEl fondo con un color uniforme se consigue añadiendo el comando bgcolor a la etiqueta <BODY> (situada al principio del documento), de la siguiente manera:

<body bgcolor="#XXYYZZ">

donde:

• XX: es un número (hexadecimal) indicativo de la cantidad de color rojo

• YY: es un número (hexadecimal) indicativo de la cantidad de color verde

• ZZ: es un número (hexadecimal) indicativo de la cantidad de color azul

Es decir, que en nuestro caso, el número menor es el 00 y el mayor el FF. Así, por ejemplo, el color rojo es el #FF0000, porque tiene el máximo de rojo y cero de los otro dos colores.

• #FF0000 - Rojo

• #00FF00 - Verde

• #0000FF - Azul

• Para hacer un color más oscuro, hay que reducir el número de su componente, dejando los otros dos invariables. Así, el rojo #FF0000 se puede hacer más oscuro con #AA0000, o aún más oscuro con #550000.

• Para hacer que un color tenga un tono más suave (más pastel), se deben variar los otros dos colores haciéndolos más claros (número más alto), en una cantidad igual. Así, podemos convertir el rojo en rosa con #FF7070.


Si no se variasen los colores habituales del texto y de los enlaces (negro y azul, respectivamente), podría ocurrir que su lectura contra un fondo oscuro fuese muy dificultosa, o incluso imposible, si el fondo fuese precisamente negro o azul.

Para evitar esto, se pueden escoger los colores del texto y de los enlaces, añadiendo a la etiqueta (si se desea) los siguientes comandos:

TEXT color del texto

LINK color de los enlaces

VLINK color de los enlaces visitados

ALINK color de los enlaces activos (el que adquieren en el momento de ser pulsados)

< body bgcolor="#xxyyzz" text="#xxyyzz"link="#xxyyzz"vlink="#xxyyzz"alink="#xxyyzz"

>


El fondo de una página puede ser también una imagen, ya sea en formato GIF o JPEG. Esta imagen se repite por toda la página.

<body background="imagen.gif">

<html><head>


<body background="abrir_el_cubo_cl.jpg"text="#ff0000"

link="#0000ff"vlink="#00ff00"

alink="#0000ff"><img src="ad_get_your_apps.gif" alt=acceso directo align=top> titular alineado arriba

<hr><br><img src="logo_java.gif" alt=ir al producto align=middle> titular alineado en medio

<hr><br><a href="http://www.java.com/en/desktop/mpowerplayer.jsp">

<img src="mpowerplayer_promo_210_104.jpg" align=bottom> titular alineado abajo </a></body>

</html>

El color del texto es rojo, de los enlaces visitados verde. Al situarse sobre el último botón y hacer clic se transforma a color azul.


1.9 FormulariosPermiten que nos envíen información a nuestro servidor, en donde hemos instalado un programa que procese esta información.

Por ejemplo, vamos a suponer que queremos crear una lista de correo. Los usuarios pueden introducir sus nombres y direcciones de mail y pulsar un botón de envío. De esta manera, podemos tener un programa CGI o un Servlets para procesar esos datos y pudiéramos devolver automáticamente al usuario algún tipo de información.

L a estructura general de un formulario es:

Etiqueta de inicio:

<FORM ACTION="URL" METHOD="POST" ENCTYPE="TEXT/PLAIN" ...>

Otros Atributos: TARGET, ONSUBMIT, ONRESET, ACCEPT, CCEPT-CHARSET

ACTION Establece el URL del servlets o CGI que procesará los datos del formulario (por ejemplo, http://cgi.whitehouse.gov/bin/shr) o una dirección de correo donde se enviarán los datos.

METHOD Establece como serán enviados los datos al servidor http.

GET: Los datos son adjuntados al final de la URL asignado luego de un signo de interrogación (?). Los datos son enviados en la misma línea de la URL.

POST: Envía los datos en una línea por separado.

ENCTYPE Establece la forma en que los datos serán cifrados antes de ser transmitidos. El valor predeterminado es application/x-www-form-urlen-coded, lo que significa que:

• Espacio convierte +

• Carácter no alfanumérico convierte % seguido por los dos dígitos hexadecimales del carácter.

• Además, de colocar un signo = entre los elementos de nombre y valor un & entre los elementos.

TARGET Col el uso de marcos se puede indicar para indicar donde se desplegarán los resultados del servlets en el marco. Por defecto los resultados se despliegan en el marco que contenga el formulario que sea usado para enviar los datos.

ONSYBMIT

ONRESET

Son utilizado por JavaScrip o VBScrip.

ACEPPT

ACCEPT-CHARSET

Establecen los tipos MIME (ACCEPT) y la codificación de caracteres (ACCEPT-CHARSET) que deberán ser aceptados por el servlet u otro programa que procese datos del formulario.


1.9.1 Controles de textoGenera un campo de captura de una sola línea donde se capturar texto.

<INPUT TYPE="TEXT" NAME="..." ...>

(no tiene etiqueta de fin)

NAME Identifica al campo de texto cuando se envía el formulario

VALUE Establece el contenido inicial del campo de texto. Cuando se envía el formulario, si el campo de texto está vacío los datos de este sólo estarán formados por el nombre y un signo igual

SIZE Indica la anchura visible del campo de texto

MAXLENGTH Da una cantidad máxima de caracteres permitidos

ONCHANGE, ONSELECT, ONFOCUS, ONBLUR,ONKEYDOWN, ONKEYPRESS, ONKEYUP

Utilizados con JavaScript o VBScript

<html xmlns="http://www.w3.org/1999/xhtml"><head> <title></title></head><body> <form action="http://localhost/web" method="post" enctype="text/plain">

escribe tu apellido:<br /><input type="text" name="apellido" />

</form></body></html>


1.9.2 ContraseñaNo muestra lo introducido sino que aparece con algún otro carácter (usualmente asteriscos).

<INPUT TYPE="password" NAME="..." ...>


Atributos: NAME(necesario), VALUE, SIZE, MAXLENGTH, ONCHANGE, ONSELECT, ONFOCUS, ONBLUR, ONKEYDOWN, ONKEYPRESS, ONKEYUP.

Los atributos se utilizan de la misma forma que lo campos de texto

Por ejemplo

<INPUT TYPE="password" NAME="Apellido" SIZE="10" MAXLENGTH="12">

1.9.3 Area de textoGenera un área de texto de varias líneas

<TEXTAREA NAME="..." ROWS=xxx COLS=yyy>...</TEXTAREA>

Atributos: NAME(necesario), ROWS (necesario), COLS(necesario), WARP (no es estándar), ONCHANGE, ONSELECT, ONFOCUS, ONBLUR, ONKEYDOWN, ONKEYPRESS, ONKEYUP.

NAME establece el nombre que será enviado al servidor

ROWS Indica la cantidad de líneas visibles de texto. Si se teclea más líneas, se agrega una barra de desplazamiento en el área de texto

COLS Establece la anchira visible del área de texto, basada en la anchura promedio de los caracteres de la fuente que será utilizada

WARP Específico de Nescape, indica que hacer con las líneas que son mayores que el tamaño indicado por cols

ONCHANGE, ONSELECT, ONFOCUS, ONBLUR,ONKEYDOWN, ONKEYPRESS, ONKEYUP


<html> <head> <title> mi pagina del web - 1 </title></head>


<body> <form action="http://localhost/web" method="post" enctype="text/plain"> introduce tus comentarios: <br />

<textarea name="comentarios" rows="6" cols="40"> </textarea> </form> </body></html>

1.9.4 Cuadros combinados y cuadros de lista<SELECT NAME="..." ...> </SELECT>

Atributos: NAME(necesario), SIZE, MULTIPLE, ONCLICK, ONFOCUS, ONBLUR, ONCHANGE

NAME Identifica al control cuando se envía el formulario al servlet o programa CGI. La combinación de nombre y valor se envía sólo si hay algún elemento de la lista seleccionado al momento de remitir el formulario

SIZE Devuelve la cantidad de líneas visibles

MULTIPLE Establece que pueden elegirse varios elementos de forma simultanea. Si se omite, sólo puede elegirse uno a la vez

ONCLICK, ONFOCUS, ONBLUR, ONCHANGE

Se usan en JavaScript y VBScript


<html> <head> <title> mi pagina del web - 1 </title> </head>

<body> <form action="mailto:dirección_de_email" method="post" enctype="text/plain">

¿cuál es tu color preferido? <br><select name="colorpreferido">

<option>rojo</option><option>verde</option> <option>azul</option><option>amarillo</option>

</select > </form> </body> </html>

<html> <head> <title> mi pagina del web - 1 </title> </head> <body>

<form action="http://localhost/web" method="post" enctype="text/plain">¿cuál es tu color preferido? <br /><select name="colorpreferido" size="3" multiple="multiple">

<option>rojo</option> <option>verde</option><option>azul</option><option>amarillo</option>


</select > </form>

</body> </html>

1.9.5 Casilla de verificaciónPuede o no ser seleccionada de forma individual.

<INPUT TYPE="CHECKBOX" NAME="..." ...>


Atributos: NAME(necesario), VALUE, CHECKED, ONCLICK, ONFOCUS, ONBLUR.

NAME Establece el nombre que será enviado al servidor

VALUE El nombre y el valor se envían al servidor si la casilla de verificación está seleccionada cuando se envía el formulario. Este atributo es opcional y se determina en on

CHECKED Si selecciona, entonces la casilla de verificación se selecciona inicialmente cuando se carga la página Web

ONCLICK, ONFOCUS, ONBLUR

Uso con JavaScript o VBScript


<body> <form action="[email protected]" method="post" enctype="text/plain">


<input type="checkbox" name="lista1"> deportes

<input type="checkbox" name="lista2"> entretencion

</form> </body> </html>

1.9.6 Botones de radioSe elige una única opción entre varias

<INPUT TYPE="RADIO" NAME="..." VALUE="..." ...>

(No tiene etiqueta de fin)

Atributos: NAME(necesario), VALUE(necesario), CHECKED, ONCLICK, ONFOCUS, ONBLUR.

El grupo se establece asignando a todos los elementos el mismo atributo NAME.

NAME Todos los botones de radio asocxiados con el mismo nombre se agrupan lógiamente de modo que no ,más de uno pueda seleccionarse a la vez

VALUE Establece el valor que será transmnitido con el NAME cuando se envíe el formualrio

CHECKED Si se establece este atributo, entonces el botón de radio se selecciona incialmengte cuando se cargha la página Web asociada

ONCLICK, ONFOCUS, ONBLUR

Uso con JavaScript o VBScript


<body>


<form action="[email protected]" method="post" enctype="text/plain">¿cuál es tu sistema operativo preferido? <br> <input type="radio" name="sistemaoperativo" value="windows" > windows <input type="radio" name="sistemaoperativo" value="mac"> macos <input type="radio" name="sistemaoperativo" value="unix" checked> unix <input type="radio" name="sistemaoperativo" value="linux"> linux


1.9.7 Botones de envíoCuando se hace clic en un botón de envío, el formulario se envía al servlet u programa CGI en el servidor designado por el parámetro ACTION de FORM.

<INPUT TYPE="SUBMIT" ...>


Atributos: NAME, VALUE, ONCLICK, ONDBCLICLK, ONFOCUS, ONBLUR.

NAME

VALUE

Asocian un nombre y un valor al botón de envío

ONCLICK, ONDBCLICLK, ONFOCUS, ONBLUR




<body><form action="[email protected]" method="post" enctype="text/plain">

escribe tu apellido: <br><input type="text" name="apellido"> <p><input type="submit" value="enviar datos">


Si necesita generar botones con texto HTML arbitrario como contenido del botón, entonces se debe utilizar el formato:

<BUTTON TYPE="SUBMIT" ...> CODIGO HTML </BUTTON>

Atributos: NAME, VALUE, ONCLICK, ONDBCLICLK, ONFOCUS, ONBLUR. NAME, VALUE, ONCLICK, ONDBCLICLK, ONFOCUS, ONBLUR: Similares al caso anterior.

<html> <head>

<title> mi pagina del web - 1 </title> </head>

<body> <form action="[email protected]" method="post" enctype="text/plain">

<center><button type="submit">

"etiqueta de una sola línea"</button>

<button type="submit"> "etiqueta de dos<br>

líneas"</button>

<p>


<button type="submit">

<b>etiqueta</b> con <i>cambios</i> a la fuente.</button>

<p><button type="submit">

<img src="dukewavered.gif" width=55 heigth=50 align="left"> etiqueta<br>con imagen

</button></center>

</form> </body>

</html>

1.9.8 Botones de restablecimiento<INPUT TYPE="RESET" ...>



NAME: Dado que los botones de restablecimiento no constituyen con la cadena de datos trasmitidos cuando se envía el formulario, no tiene un nombre en el HTML estándar. Sin embargo, JavaScript y VBScrip permiten que se use un nombre para simplificar la referencia al elemento.

VALUE: Establece el texto del botón; "Restablecer" es el predeterminado.

ONCLICK, ONDBCLICLK, ONFOCUS, ONBLUR: Utilizados con JavaScript o VBScript.


Si necesita generar botones con texto HTML arbitrario como contenido del botón, entonces se debe utilizar el formato:

<BUTTON TYPE="RESET" ...> Código HTML </BUTTON>


Otro botón interesante es el de borrado de los datos introducidos, muy conveniente en un formulario con muchos elementos. Es muy similar al de envío, pues se consigue con la etiqueta:

<INPUT TYPE="reset" VALUE="zzz">

En donde zzz es el texto que queremos que aparezca en el botón.

1.9.9 Controles para la transferencia de archivosEste elemento da como resultado un campo de texto para un nombre de archivo junto con un botón examinar. Cuando se envía el formulario, el contenido del archivo se transmite si se estableció un ENCTYPE de multipart/form-data en la declaración inicial del FORM.

<INPUT TYPE="FILE" ...>


Atributos: NAME(necesario), VALUE(ignorado), SIZE, MAXLENGTH, ACCEPT, ONCHANGE, ONSELECT, ONFOCUS, ONBLUR(fuera del estándar).

NAME Identifica el campo de texto cuando se envía el formulario

VALUE Por razones de seguridad se ignora este atributo

SIZE MAXLENGTH

Se utilizan de la misma forma que en los campos de texto, donde se establece la cantidad de caracteres visibles y máximos permitidos.

ACCEPT Tiene la intención de ser una lista separada por comas de tipos MIME utilizados para restringir los nombres de archivos disponibles

ONCHANGE, ONSELECT, ONFOCUS, ONBLUR

Utilizado con JavaScript y VBScript



<body> <form action="[email protected]" method="post" enctype="multipart/form-data">

indique la ruta del archivo:<input type="file" name="nombrearchivo">


1.9.10 Campos ocultosNo afectan la apariencia de la página que se presenta al usuario. En vez de ello, almacenan nombres fijos y valores que se envían sin cambios al servidor.

<INPUT TYPE="HIDDEN" NAME="..." VALUE="...">


Atributos: VALUE(necesario), VALUE

1.9.11 Agrupar controlesHTML define al elemento FIELDSET con un LEGEND asociado, que puede ser utilizado para agrupar visualmente controles dentro de un formulario.

<FIELDSET>

Atributos: Ninguno

Este elemento es utilizado como contenedor para incluir controles y, opcionalmente, un elemento LEGEND.

<LEGEND>

Atributo: ALIGN

Este elemento, válido sólo dentro de un FIELDSET, coloca una etiqueta en el borde que circunda al grupo de controles.


ALIGN Controla la posición de la etiqueta. Los valores permitidos son TOP, BOTTON, LEFT y RIGTH, donde TOP es el predeterminado

<html> <head> <title> mi pagina del web - 1 </title> </head> <body> <form action="[email protected]"> <fieldset>

<legend>primer grupo</legend>campo 1a: <input type="text" name="campo1a" value="campo a"> <br>campo 1b: <input type="text" name="campo1b" value="campo b"> <br>campo 1c: <input type="text" name="campo1c" value="campo c"> <br>

</fieldset> <fieldset>

<legend align="bottom"> segundo grupo</legend>campo 2a: <input type="text" name="campo2a" value="campo a"> <br>campo 2b: <input type="text" name="campo2b" value="campo b"> <br>campo 2c: <input type="text" name="campo2c" value="campo c"> <br>

</fieldset> </form> </body> </html>

1.9.12 Controlar el orden de tabulaciónHTML define un atributo TABINDEX que puede ser utilizado en cualquier elemento visual HTML.

<html> <head>


<title> mi pagina del web - 1 </title> </head> <body> <form action="[email protected]">

campo 1<input type="text" name="campo1" tabindex=1><br>campo 2<input type="text" name="campo2" tabindex=3><br>campo 3<input type="text" name="campo3" tabindex=2><br>


1.10 FramesLos Frames están en desuso; por ende, no deben usarse en nuevas implementaciones.

Frames (marcos) es un procedimiento para dividir la pantalla en diferentes zonas que pueden actuar independientemente unas de otras. Una de sus características más importantes es que pulsando un enlace situado en un frame, se puede cargar en otro frame una página determinada. De esta manera, se facilita la navegación entre las páginas, pues aunque se vaya pasando de unas a otras, siempre estará a la vista el índice del conjunto.

Lo primero es crear un documento HTML en el que se defina cuántas zonas va a haber, qué distribución y tamaño van a tener, y cuál va ser el contenido de cada una de ellas. En el ejemplo, la página va a tener dos frames distribuidos en columnas. El primero (el del izquierda) ocupe el 20% del ancho de la pantalla, y el otro, el 80% restante. El frame de la izquierda va a contener un documento HTML que va a servir de índice de lo que se vea en el otro (mipagind.html), y el de la derecha otro documento HTML que va a servir de página de presentación (mipagpre.html).


<html><head>

<title>mi pagina con frames</title></head>

<frameset cols="20%, 80%"><frame src="mipagind.html"><frame src="mipagpre.html" name="principal">

</frameset></html>

Observarse que en la etiqueta del segundo se ha incluido el atributo NAME="principal", pero no así en el primero. Se necesita dar un nombre al segundo frame, pues en el documento del primer frame va a haber unos enlaces que van a ir dirigidos hacia él. En este caso sólo tenemos dos frames, pero podría haber más, y es necesario distinguirlos unos de otros. El primero no necesita nombre, pues no va a haber enlaces en el segundo dirigidos hacia él.

El documento del frame de la izquierda va a tener un fondo amarillo, y va a contener dos enlaces dirigidos al frame de la derecha.

mipagpre.html

<html>

<head><title> indice </title>

</head> <body bgcolor="#ffbb00">

<p><a href="mipagpre1.html" target="principal"> listado trabajadores </a> <p><a href="mipagpre2.html" target="principal"> listado datos generales </a>

<p><img src="product-mozilla.png"> </body>

</html>

Dentro de las etiquetas de los enlaces podemos observar algo nuevo, y es el atributo TARGET (en inglés: objetivo, blanco), que sirve para hacer que al ser activado el enlace no se cargue en el propio frame, sino en otro, precisamente en el que hayamos llamado con ese nombre en el documento de definición de los frames.

En nuestro caso, le hemos dado el nombre de "principal" al frame de la derecha, y es por tanto ahí donde se van a cargar los documentos HTML.

Guardamos este documento con el nombre de mipagind.html. Además, capturamos la imagen y la guardamos junto con el documento.

mipagpre1.html

<html><head>

<title> presentacion </title></head>

<body bgcolor="#000000" text="#0000ff"><center>


<font size=+3><strong>

<p>esta es la version<br><font color="#ff0000">con frames</font>

<br>de mi pagina<br>al pulsar la primera opcion

<br><font color="#00ff00">listado de trabajadores</font></strong>

</font></center>

</body></html>

Mipagpre2.html

<html>

<head><title> presentacion </title>

</head><body bgcolor="#000000" text="#0000ff">

<center><font size=+3><strong>

<p>esta es la version<br><font color="#ff0000">con frames</font>

<br>de mi pagina<br>al pulsar la segunda opcion

<br><font color="#00ff00">listado datos generales</font></strong>

</font></center>

</body></html>


Se puede comprobar cómo cambiamos de página en el frame de la derecha, según el enlace que pulsemos en el frame de la izquierda.


Atributos de la etiqueta <FRAMESET>

La etiqueta FRAMESET, como hemos visto en el ejemplo, es la que define la distribución, el número y tamaño de los frames. Tiene dos atributos: COLS (columnas) y ROWS (filas):

<FRAMESET COLS="xx, yy, zz, ..">

<FRAMESET ROWS="xx, yy, zz, ..">

Define la distribución de los frames en columnas o en filas, según se use uno u otro atributo.

Define el número de frames que habrá, pues, por ejemplo:

<FRAMESET COLS="xx, yy"> (habrá dos frames en columnas)

<FRAMESET COLS="xx, yy, zz"> (habrá tres frames en columnas)

Define el tamaño de los frames, según el valor que demos a xx, yy, zz. Este valor se puede expresar en:

• Un porcentaje del ancho del pantalla (para las columnas), o del alto de la pantalla (para las filas). Así, por ejemplo:

• <FRAMESET COLS="%20, %80"> (la columna de la izquierda ocupará el 20% del ancho de la pantalla, y la de la derecha el 80% restante)

• <FRAMESET ROWS="%10, %70, %20"> (la fila superior ocupará el 10% del alto de la pantalla, la del medio el 70%, y la inferior el 20%)

• Un número absoluto que representa el número de pixels que ocupará cada frame a lo ancho o a lo alto (según sean filas o columnas). Es peligroso utilizar sólo valores absolutos, pues el tamaño de la pantalla varía de un usuario a otro.

• Un valor relativo que se consigue poniendo un asterisco (*), en vez de un número. Esto se interpreta como que ese frame debe tener el espacio restante.

• Por ejemplo: <FRAMESET ROWS="100,*,100"> (Habrá tres filas, la superior y la inferior de una altura fija de 100 pixels, y la del medio obtendrá el espacio restante).

• Si hay más de un frame con asterisco, ese espacio restante se dividirá por igual entre ellos.

• Si hay un número antes del asterisco, ese frame obtiene esa cantidad más de espacio relativo. Así "2*,*" daría dos tercios para el primer frame y un tercio para el otro.

Frames sin bordes

Si se desea que no haya un borde de separación entre los frames, se deben incluir el atributo FRAMEBORDER=0 dentro de la etiqueta FRAMESET.

Para que también desaparezcan los huecos de separación entre frames hay que añadir otros dos atributos (el primero es para el Explorer y el segundo para el Netscape): FRAMESPACING=0 y border=0. con lo que la etiqueta completa quedaría:

<FRAMESET FRAMEBORDER=0 FRAMESPACING=0 border=0 COLS="xx, yy">


Atributos de la etiqueta <FRAME>

Esta etiqueta define las características de un frame concreto, no del conjunto de los frames, como era el caso con la etiqueta <FRAMESET>. Puede tener los siguientes posibles atributos, que van dentro de la etiqueta <FRAME>:

• SRC="dirección". Esta dirección puede ser la de un documento HTML (tal como hemos utilizado en el ejemplo), o cualquier otro recurso del Web (o URL). Con este atributo se indica lo que se cargará inicialmente en el frame. Si no se le pone este atributo a la etiqueta <FRAME>, entonces dicho frame aparecerá inicialmente vacío, aunque tendrá las dimensiones asignadas.

• NAME="nombre_de_la_ventana". Este atributo se usa para asignar un nombre a un frame. El atributo NAME es opcional. Por defecto, todas las ventanas carecen de nombre. Los nombres que se escojan deben comenzar por un carácter alfanumérico (una letra o un número, pero no otro tipo de símbolo).

• MARGINWIDTH="número". Se utiliza este atributo cuando se quiere controlar el ancho de los márgenes dentro de un frame. El número que se ponga representa los pixels de los márgenes. Este atributo es opcional.

• MARGINHEIGHT="número". Igual que el anterior, pero referido a los márgenes en altura.

• SCROLLING="yes|no|auto". Este atributo se utiliza para decidir si el frame tendrá o no una barra deslizadora. Si se escoge "yes" tendrá siempre una barra deslizadora. Si se escoge "no" no la tendrá nunca, y si se escoge "auto", será el navegador quien decida si la tendrá o no. Este atributo es opcional. Su valor por defecto es "auto".

• NORESIZE. A este atributo no se le asigna un valor numérico, como a los demás. Es un indicador para que la ventana no se pueda re-dimensionar (en inglés, resize) por parte del usuario. Es un atributo opcional. Por defecto, todos los frames son re-dimensionables.

• FRAMEBORDER="no". Este atributo elimina el borde en un frame, pero si se quiere que se elimine completamente, también hay que ponérselo al frame contiguo. Si se quiere eliminar los bordes de todos los frames, se debe colocar en la etiqueta FRAMESET, como hemos visto anteriormente.

El atributo TARGET

En el ejemplo hemos visto que, como queríamos que los enlaces situados en el frame de la izquierda surtieran efecto no en él mismo, sino en otro frame, teníamos que poner dentro de cada enlace el atributo TARGET="principal", siendo "principal" el nombre que habíamos dado al segundo frame, en el documento de definición de frames. Es decir, hemos utilizado este atributo de esta manera:

TARGET="nombre_dado_a_otro_frame".

Estos nombres, que los escogemos nosotros, pueden ser cualquiera, pero con la condición que el primer carácter sea alfanumérico (letra o número).


Pero hay unos nombres reservados (es decir, que no se pueden usar para denominar a un frame), que hacen que este atributo efectúe unas funciones especiales. Para que cumplan su cometido, es imprescindible escribir estas palabras reservadas (blank, self y top) en minúsculas.

• TARGET="_blank". Hace que se abra una nueva copia del navegador, y el enlace activado se carga en ella, a pantalla completa. Es decir, tendríamos dos copias del navegador (Netscape, Explorer, etc.) funcionando a la vez.

• TARGET="_self". Hace que el enlace se cargue en el propio frame.

• TARGET="_top". Hace que el enlace se cargue a pantalla completa, suprimiendo todos los frames, pero sin que se cargue una nueva copia del navegador. Este es particularmente útil. Un error muy común es olvidarse de poner este atributo en los enlaces que están en un frame, con lo que resulta que al ser activados, la página llamada se carga dentro del propio frame, lo cual es muy molesto si esa página pertenece a otro sitio del Web, y aún más grave si esa página tiene a su vez frames. Este inconveniente se evita poniendo este atributo dentro de las etiquetas de los enlaces.

Frames anidados dentro de otros frames

Hasta ahora hemos contemplado sólo la posibilidad de tener una distribución de los frames bien en filas o bien en columnas, (dependiendo que se utilice el atributo ROWS o COLS en la etiqueta FRAMESET), pero no ambos a la vez. Se pueden obtener distribuciones más complejas anidando filas dentro de una columna, o a la inversa, columnas dentro de una fila.

Supongamos que queremos la siguiente distribución:

• Un frame estrecho en horizontal en la parte superior, de lado a lado de la pantalla (altura, el 15%)

• Otro frame estrecho en vertical en la parte izquierda, debajo del anterior (anchura, el 20%)

• Un tercero ocupando el resto de la pantalla.

Vemos que, en realidad, esto equivale a la siguiente distribución:

• Dos filas. La superior ocupa el 15% y la inferior el resto.

• La fila inferior está a su vez dividida en dos columnas. La primera (la de la izquierda) ocupa el 20% y la otra, el resto.


El documento de definición de las dos filas (olvidémonos de momento que la de abajo está subdividida), sería:

<html>

<head><title>pagina con dos filas</title>

</head><frameset rows="15%, *">

<frame src="documento_fila_superior"><frame src="documento_fila_inferior">

</frameset></html>

Como la fila inferior, en realidad, son dos columnas (con una distribución del 20% y resto), sustituimos (anidando) la etiqueta <FRAME SRC="documento_fila_inferior"> por:

<frameset cols="20%, *">

<frame src="documento_columna_izqda"><frame src="documento_columna_dcha">

</frameset>

Con lo que queda el documento definitivo así:

<html>

<head><title>pagina con fila superior y dos columnas inferiores</title>

</head><frameset rows="15%, *">

<frame src="documento_fila_superior"> <frameset cols="20%, *">

<frame src="documento_columna_izqda"> <frame src="documento_columna_dcha">

</frameset></frameset>

</html>

1.11 Tablas1. La etiqueta general, que engloba a todas las demás es <table> y </table>. Es decir:

<table> [resto de las etiquetas] </table>

2. En el siguiente nivel, dentro de la anterior, están las etiquetas para formar cada fila (row) de la tabla, que

son <tr> y </tr>. Hay que repetirlas tantas veces como filas queremos que tenga la tabla. Es decir, para una tabla con dos filas, sería:

<tr>

[etiquetas de las distintas celdas de la primera fila]

</tr>


<tr>

[etiquetas de las distintas celdas de la segunda fila]

</tr>

3. En el último nivel (dentro de las anteriores) están las etiquetas de cada celda, que son <td> y </td>, que

engloban el contenido de cada celda concreta (texto, imágenes, etc.). Hay que repetirla tantas veces como celdas queremos que haya en esa fila.

Un ejemplo de una tabla con dos filas. Cada fila va a tener tres celdas. Dentro de cada celda vamos a poner un texto indicativo de la posición de dicha celda:

<html> <head> <title> manejo de tablas </title> </head>

<body> <table border> <tr> <td>fila1-celda1</td> <td>fila1-celda2</td> <td>fila1-celda3</td> </tr> <tr> <td>fila2-celda1</td> <td>fila2-celda2</td> <td>fila2-celda3</td> </tr> </table> </body></html>


El atributo border pone por defecto un borde de espesor igual a la unidad. Pero se puede hacer que este borde sea tan grueso como queramos, poniendo:

<table border=número deseado>

Además, se pueden usar celdas de cabecera (header), que se distinguen por estar el texto de dichas celdas en negrita y centrado. Esto se consigue con la etiqueta <TH> y </TH> (en vez de la normal <td> y </td>)

<html> <head> <title> manejo de tablas </title> </head>

<body> <table border=5> <tr>

<th>columna 1</th> <th>columna 2</th> <th>columna 3</th> </tr> <tr>

<td>fila1-celda1</td> <td>fila1-celda2</td> <td>fila1-celda3</td> </tr> <tr>

<td>fila2-celda1</td> <td>fila2-celda2</td> <td>fila2-celda3</td> </tr> </table> </body></html>

Dentro de las celdas se puede poner cualquier como imágenes, enlaces, etc. No hay más que poner dentro de la etiqueta de la celda la etiqueta correspondiente a una imagen, un enlace, etc. Ejemplo con una imagen:

<table border=2>

<tr>

<td> <img src="babe.gif"> </td>

</tr>

</table>

Ejemplo con un enlace:

<table border=2>

<tr>

<td><a href="index.html">página principal </a></td>

</tr>

</table>


Normalmente, el contenido de una celda está alineado a la izquierda. Pero se puede cambiar esto añadiendo dentro de la etiqueta de la celda los siguientes atributos:

<td ALIGN=CENTER> Al centro </td>

<td ALIGN=RIGHT> A la derecha </td>

<TH ALIGN=LEFT> Cabecera a la izquierda </TH>

El alineamiento por defecto en el sentido vertical es en el medio. También se puede cambiar, añadiendo dentro de la etiqueta de la celda los siguientes atributos:

<td VALIGN=TOP> Arriba </td>

<td VALIGN=BOTTOM> Abajo </td>

El navegador se encarga normalmente de dimensionar el tamaño total de la tabla de acuerdo con el número de filas, de columnas, por el contenido de las celdas, espesor de los bordes, etc.

A veces nos puede convenir forzarle para que la tabla tenga unas dimensiones totales mayores que las que le corresponden, tanto en anchura como en longitud. Esto se consigue añadiendo dentro de la etiqueta de la tabla los atributos WIDTH y HEIGHT igual a un porcentaje de la dimensión de la pantalla, o a una cifra que equivale al número de pixels. Por ejemplo

<table WIDTH=60%>

<table HEIGHT=200>

Para conseguir que una celda se extienda sobre otras varias se usa en la etiqueta de la celda los atributos COLSPAN=número para extenderse sobre un número determinado de columnas, o ROWSPAN=número para extenderse verticalmente sobre un número determinado de filas.

Por ejemplo, en la tabla vamos a añadir una fila con una sola celda, que abarca a dos columnas:

<html> <head> <title> Manejo de Tablas </title> </head> <body> <table border=5>

<tr><th>Columna 1</th> <th>Columna 2</th> <th>Columna 3</th>

</tr><tr>

<td colspan=2 align=center>fila1-celda1</td>


<td rowspan= 2>fila1-celda2</td></tr><tr>

<td>fila2-celda1</td> <td>fila2-celda2</td></tr>

</table> </body></html>

Podemos conseguir que las tablas tengan un color de fondo, siguiendo un procedimiento totalmente análogo al empleado para que una página tenga un color de fondo uniforme. Para ello debemos utilizar el atributo bgcolor="#XXYYZZ", visto en dicho capítulo.

1. Para que la totalidad de la tabla tenga un color de fondo se coloca el atributo dentro de la etiqueta table. Por

ejemplo, vamos a hacer que la tabla tenga un fondo verde (#00FF00):

<table border bgcolor="#00FF00">

<tr> <td>fila1-celda1</td> <td>fila1-celda2</td> </tr>


</table>

2. Para que sólo una celda determinada tenga un color de fondo. Para ello, colocamos el atributo dentro de la

etiqueta de la celda correspondiente. Por ejemplo, vamos a hacer que sólo la celda 1 de la fila 1 tenga un color verde:

<table border>

<tr> <td bgcolor="#00FF00">fila1-celda1</td>

<td>fila1-celda2</td></tr>



</table>

3. Para que todas las celdas tenga un color pero que alguna celda tenga uno particular, el atributo del color

general se coloca en la etiqueta table y el del color particular en la etiqueta de la celda en cuestión.

<table border bgcolor="#FF0000">

<tr> <td bgcolor="#00FF00">fila1-celda1</td>

<td>fila1-celda2</td></tr>


</table>

Para colocar imágenes de fondo en el interior de las tablas se utiliza el atributo

background="imagen.gif"

Si se utiliza dentro de la etiqueta <table> la imagen en cuestión se multiplicará detrás de todas las celdas.

Por defecto, la separación entre las distintas celdas de una tabla es de dos pixels. Pero se puede variar esto con el atributo cellspacing, que se pone dentro de la etiqueta table. Por ejemplo, para obtener una separación de 20 pixels entre celdas ponemos:

<table border cellspacing=20>

Por defecto, la separación entre el borde y el contenido dentro de las celdas es de un pixel. Se puede cambiar esto con el atributo cellpadding, que se pone dentro de la etiqueta table.

Por ejemplo, para obtener una separación de 20 pixels entre el contenido y los bordes, dentro de cada celda:

<table border cellpadding=20>

Vamos a crear una tabla de dos filas, con una celda cada una. La primera, como cabecera, con el texto "Java está en todas partes", y la segunda con la imagen main_ringtone_remixer.jpg. Además vamos a alargar a lo ancho la tabla al 75% de la pantalla.

<html> <head> <title> Manejo de Tablas </title> </head>

<body> <table border=5 width=75%> <tr>

<th>Java está en todas partes</th> </tr> <tr>

<td colspan=2 align=center>


<img src="main_ringtone_remixer.jpg" alt="java aquí"></td> </tr> </table> </body></html>

Se puede definir una tabla dentro de otra tabla (o más específicamente, dentro de una celda)

<html xmlns="http://www.w3.org/1999/xhtml"><head> <title></title></head><body>

<table> <tr align='center'> <td> 1 </td> </tr> <tr align='center'> <td> <table> <tr align='center'> <td>10</td><td>20</td><td>30</td><td>40</td> </tr> <tr> <td colspan='2'>50</td><td colspan='2'>60</td> </tr>


</table> </td> </tr> <tr align='center'> <td> 3 </td> </tr> </table>

</body></html>

1.12 iframeSirve para crear un espacio dentro de la página donde se puede incrustar otra web. Es un cuadrado cuyas dimensiones debe especificar el desarrollador en la propia etiqueta iframe, que tiene asociada una página web que se carga en dicho espacio. Esa página web tendrá sus propios contenidos y estilos, independientes del contexto donde se está mostrando. Además será perfectamente funcional: si tiene enlaces se mostrarán en ese mismo espacio y si tiene scripts o aplicaciones dentro se ejecutarán también de manera autónoma en el espacio reservado al iframe.

Iframe se utiliza en muchos contextos. Dentro de un iframe podemos mostrar contenidos de otras páginas, como si estuvieran en la nuestra, por lo que sirven para ejemplos como:

• Códigos de banner, que se invocan por medio de un iframe pidiendo los datos del banner generalmente a un servidor de banners que puede estar en otra red.

• Visualizar contenidos de terceros, como bloques de noticias o novedades que ofrecen en otras webs.

• Interfaces de usuario, en el que ciertas actividades se realizan de forma autónoma y el procesamiento está en otra página web

<iframe src="pagina_fuente.html" width=290 height=250>Texto para cuando el navegador no conoce la etiqueta iframe, por ejemplo: Tu navegador no soporta

frames</iframe>


.DORE_FK_02

Como se puede ver, la etiqueta iframe tiene su correspondiente etiqueta de cierre. Todo el texto que coloquemos entre la etiqueta de inicio y la de cierre es texto alternativo, que sólo se mostrará en caso que el navegador del visitante no acepte la etiqueta iframe

src Para indicar la página web que se mostrará en el espacio del frame flotante.

width Para definir la anchura del recuadro del iframe

height Para definir la altura del iframe

name Para especificar el nombre del frame, que podemos utilizar luego para referirnos a él con el target de los links, o mediante javascript.

id: Para indicar el identificador del iframe, y poder referirnos a él desde javascript.

frameborder para definir si queremos o no que haya un borde en el frame. Los valores posibles son 0 | 1. frameborder=0 indicaría que no queremos borde y frameborder=1 que sí.

scrolling indica si se quiere que aparezcan barras de desplazamiento para ver los contenidos del iframe completo, en el caso que no aparezcan en el espacio reservado para el iframe. Los valores posibles son: yes | no | auto. El valor "yes" es para que aparezcan siempre las barras de desplazamiento o barras de scroll, "no" sirve para que no aparezcan nunca y "auto" es para que aparezcan sólo cuando son necesarias (es el valor por defecto)

marginwidth Para definir el margen a izquierda y derechar que debe tener la página que va dentro del iframe, con respecto al borde. Este margen va en pixels, pero prevalecerá el margen que pueda tener asignada la página web que mostremos en el frame flotante.

marginheight lo mismo que marginwidth, pero en este caso para el tamaño del margen por la parte de arriba y abajo.

margin para especificar alineación del frame, igual que se especifica para las imágenes.

style y class los atributos para definir el aspecto del iframe por medio de hojas de estilo css

Ejemplo: Considerar la siguiente estructura


pagina01.htm

<html xmlns="http://www.w3.org/1999/xhtml">

<head> <title></title>

</head><body>

<center><table>

<tr><td align='right'>User</td><td><input id="Text1" type="text" /></td>

</tr><tr>

<td align="right">Password</td><td><input id="Text2" type="text" /></td></tr>

</table></center>

</body></html>

pagina02.htm

<html xmlns="http://www.w3.org/1999/xhtml"><head>

<title></title></head>

<body><table>

<tr><td align="right">

El TG01 es conocido por sus altas prestaciones de rendimiento entre otras cosas gracias al procesador Snapdragon de 1GHz de Qualcomm. Ahora dispondrá de todas las nuevas prestaciones

de Windows Mobile 6.5 mediante una actualización del sistema operativo que estará disponible también para todos aquellos que ya dispongan del dispositivo con el sistema operativo antiguo.

La venta del nuevo terminal comenzara el 6 de Octubre, fechas para las que el nuevo sistema de Microsoft ya será oficial.

</td><td>

<img src="../imagen/2974-2.jpg" alt="Fono" width='358' height='386' title="Fono" /></td>

<td><iframe src='pagina01.htm' width='300' height='100' frameborder='0'></iframe>

</td></tr>

</table>


</body>

</html>

1.13 ObjectLa etiqueta <object> puede utilizarse para insertar diferentes objetos dentro de la página, como pueden ser archivos de audio, archivos de vídeo, imágenes, etc.

1.13.1 Flash En el siguiente ejemplo se inserta una película flash en una página HTML, que funciona en Internet Explorer y FireFox.

<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"

codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0" width="680" height="110">

<param name="movie" value="final_azeta.swf"> <param name="quality" value="high">

<embed src="final_azeta.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer"

type="application/x-shockwave-flash" width="680" height="110"></embed></object></body>

classid Se identifica al objeto. Cuando el objeto es una animación Flash, el atributo classid debe valer clsid:D27CDB6E-AE6D-11cf-96B8-444553540000.

codebase Se especifica la dirección en la que se encuentran los componentes externos necesarios para reproducir la animación.

width Ancho del elemento.

height Alto del elemento


(*) Notar que los valores de witch y height ajustan la

posición del elemento dependiendo de estos valores pero también del tamaño del elemento

<param>: name y value. El atributo name indica el nombre de la característica que va a ser definida, y value indica su valor.

width="680" height="110"

width="680" height="400"

<param

name="movie"

value="../flash/final_azeta.swf" />

Especifica el tipo de proceso “movie” y el lugar el donde está almacenado el archivo

<param

name="quality"

value="high">

Especifica el tipo de proceso “quality” y la calidad. Puede valer

• high (alta),

• autolow (baja automática), o

• low (baja).


Las animaciones Flash se reproducen de forma automática al cargarse la página, y su reproducción es continua.

• Para hacer que una animación no se reproduzca automáticamente, habrá que indicarlo mediante el atributo play, false. También habrá que insertar la línea <param name="play" value="false">.

• Lo mismo ocurre para hacer que la reproducción no sea continua. Habrá que insertar el atributo loop y declararlo false. <param name="loop" value="false">.

Para correr el script desde FireFox se debe emplear:

<object width="50" height="50" id="movie">

<param name="allowFullScreen" value="true" /> <param name="movie" value="final_azeta.swf" />

<embed src="final_azeta.swf" width="680" height="110" name="movie" /> </object>


1.13.2 PDF<object data="../pdf/Diseño y desarrollo de aplicaciones en la web 2.0.pdf" type="application/pdf" width="800" height="600"> </object>

1.13.3 Word<object type="application/msword" data="../pdf/Diseño y desarrollo de aplicaciones en la web 2.0.doc" width="800" height="600"></object>

1.13.4 Excelobject type="application/vnd.ms-excel" data="../xls/Planificación-Web 2.0.xls" width="800" height="600"></object>


1.13.5 PPT<object type="application/vnd.ms-powerpoint" data="../ppt/edublogs_tiscar_lara.ppt" width="800" height="600"></object>

1.13.6 mpgEn este caso se requiere la declaración en las dos oportunidades, que se ve en el ejemplo, de la ruta del video. Aquí el video no se inicializa solo y no se repite

<object data="../video/cap1.9-1.mpg" type="video/mpeg" width="320" height="255"> <param name="src" value="../video/cap1.9-1.mpg" /> <param name="autoplay" value="false" /> <param name="loop" value="0" /></object>

Ahora se inicializa solo y se ejecuta indefinidamente

<object data="../video/cap1.9-1.mpg" type="video/mpeg" width="320" height="255"> <param name="src" value="../video/cap1.9-1.mpg" /> <param name="autoplay" value="true" /> <param name="loop" value="-1" /></object>

1.13.7 mp3

<object type="audio/mpeg" data="../sonido/01 - Jerusalem.mp3" width="200" height="30"> <param name="src" value="../sonido/01 - Jerusalem.mp3" /> <param name="autoplay" value="true" /> <param name="loop" value="-1" /></object>


1.14 Agrupación de elementosLos elementos <span> y <div> se usan para agrupar y estructurar un documento, y se usarán, a menudo, junto con los atributos class e id.

1.14.1 spanEl elemento <span> es lo que se podría denominar un elemento neutro que no añade nada al documento en sí. Pero con CSS <span> se puede usar para añadir características visuales distintivas a partes específicas de texto en los documentos.

<p>El que pronto se acuesta y pronto se levanta,es hombre<span class="ventaja">saludable</span>,<span class="ventaja">rico</span>y <span class="ventaja">sabio</span>.</p>

Para que el ejercicio funciones se debe incluir definiciones de CSS

1.14.2 div

Mientras que <span> se usa dentro de un elemento a nivel de bloque, <div> se usa para agrupar uno o más elementos a nivel de bloque.

<div id="democrats"><ul>

<li>Franklin D. Roosevelt</li><li>Harry S. Truman</li><li>John F. Kennedy</li><li>Lyndon B. Johnson</li><li>Jimmy Carter</li><li>Bill Clinton</li>

</ul></div>

<div id="republicans"><ul>

<li>Dwight D. Eisenhower</li><li>Richard Nixon</li><li>Gerald Ford</li><li>Ronald Reagan</li><li>George Bush</li><li>George W. Bush</li>

</ul></div>


2 XHTML

XHTML es una "reformulación de los tipos de documento definidos por HTML 4, pero como aplicaciones de XML".

Se sintió que era necesaria una versión más estricta de HTML principalmente porque el contenido de la World Wide Web ahora puede visualizarse desde numerosos dispositivos (como teléfonos móviles) aparte de las computadoras de escritorio tradicionales, donde no se contaría con los recursos necesarios para afrontar la complejidad de la sintaxis del HTML. Sin embargo, en la práctica, fueron apareciendo navegadores para dispositivos móviles que pueden manejar documentos HTML comunes, antes que XHTML sea adoptado por los navegadores principales.

Las diferencias entre HTML y la primera generación de XHTML (es decir, XHTML 1.x) son menores ya que, principalmente, están destinados a conseguir la conformidad con XML. El cambio más importante es el requisito de que el documento esté bien formado y que todas las etiquetas estén explícitamente cerradas, como se requiere en XML. Como las etiquetas en XML distinguen entre mayúsculas y minúsculas (case-sensitive), la recomendación XHTML ha definido todos los nombres de etiqueta en minúsculas. Lo cual está en contraste directo con las tradiciones extendidas en el tiempo de HTML 2.0, cuando mucha gente prefería las mayúsculas para estos casos, normalmente para mostrar más fácilmente el contraste de éstas con el contenido. En XHTML, los valores de los atributos deben encerrarse entre comillas (siempre comillas "dobles"). Al contrario ocurría en SGML y por consecuencia en HTML, donde las comillas podían omitirse en algunos casos. Todos los elementos han de ser explícitamente cerrados, incluyendo elementos vacíos como pueden ser img o br. Esto puede hacerse añadiendo una barra a la etiqueta: <img … /> y <br />. La minimización de atributos (como <option selected>) está también prohibida; en lugar de eso, se usa <option selected="selected">. Hay más diferencias detalladas en la recomendación XHTML 1.0 de la W3C.

Ver :

http://vcecommerce.com/index.php?option=com_seyret&task=videodirectlink&id=1547

2.1 Diferencias entre HTML y XHTMLLa siguiente lista muestra algunas reglas de XHTML 1.0 que lo diferencian de HTML 4.01. Muchas de estas diferencias vienen con el cambio de ser una aplicación SGML a ser una aplicación del más estricto XML:

• Los elementos vacíos deben cerrarse siempre:

✔ Incorrecto: <br>

✔ Correcto: <br></br> o <br/> o <br />

Nota: Cualquiera de las tres formas es válida en XHTML. Para compatibilidad según el "Apéndice C" debe usarse <br />.

• Los elementos no vacíos también deben cerrarse siempre:


✔ Incorrecto: <p>Primer párrafo<p>Segundo párrafo

✔ Correcto: <p>Primer párrafo</p><p>Segundo párrafo</p>

• Los elementos anidados deben tener un correcto orden de apertura/cierre (el que se abre último, debe cerrarse primero).

✔ Incorrecto: <em><strong>Texto</em></strong>

✔ Correcto: <em><strong>Texto</strong></em>

• Los valores de los atributos deben siempre ir encerrados entre comillas (simples o dobles).

✔ Incorrecto: <td rowspan=3>

✔ Correcto: <td rowspan="3">

✔ Correcto: <td rowspan='3'>

• Los nombres de elementos y atributos deben ir en minúsculas.

✔ Incorrecto: <A HREF="http://www.domname.com">Domname</A>

✔ Correcto: <a href="http://www.domname.com">Domname</a>

• No está permitida la minimización de atributos (se usa el nombre del atributo como valor).

✔ Incorrecto: <textarea readonly>Solo-lectura</textarea>

✔ Correcto: <textarea readonly="readonly">Solo-lectura</textarea>

• Los atributos desaprobados en HTML 4.01 no forman parte de XHTML.

✔ Incorrecto: <font color="#0000FF">Blue text</font>

✔ Correcto: <span style="color: #0000FF;">Blue text</span>

2.2 NormasNorma número 1: Hay que hacer una declaración del tipo de documento (doctype)

• En HTML también se puede hacer pero no es obligatorio. En XHTML es obligatorio.

• Al comienzo del documento por encima de la etiqueta <html> hay que escribir la siguiente declaración:

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

Norma número 2: La etiqueta <html> debe llevar el namespace declarado en el atributo xmlns.

• El siguiente texto:

<html xmlns="http://www.w3.org/1999/xhtml">

Norma número 3: Todas las etiquetas (exceptuando la declaración, norma 1) y sus atributos, tienen que escribirse


con letras minúsculas.

• En HTML se pueden escribir con mayúsculas o minúsculas. En XHTML todas deben ser minúsculas.

Norma número 4: La etiqueta <head> (y por supuesto la <body>) son absolutamente obligatorias.

• En HTML si no poníamos la <head> no pasaba nada...

Norma número 5: La anidación de las etiquetas y sus cierres debe hacerse respetando las simetrías correspondientes: Lo que primero se abre, se cierra lo último.

• Por ejemplo:

<p> Marcar con <b> negrita <u> subrayado y <i> cursiva</i></u></b></p>

Norma número 6: Todas las etiquetas (todas) se deben cerrar.

• En HTML, por ejemplo, la etiqueta <p> era opcional que se cerrase. Aquí es obligatorio.

• Había etiquetas que no se cerraban nunca como <br>. En XHTML las etiquetas que no se cerraban en HTML tienen que escribirse con un espacio y la barra de cerrado dentro de la etiqueta.

• Así: <br> pasa a ser <br />

• La inclusión de una imagen, por ejemplo: <img src="imagenes/logo.png" widt="50" height="30"> tiene que escribirse ahora así <img src="imagenes/logo.png" widt="50" height="30" /> Observa el espacio de separación antes de la barra de cierre.

• Lo anterior es válido para todas las etiquetas similares. Incluído las etiquetas <meta> de la <head>.

Norma número 7: Todos los valores de los atributos deben entrecomillarse.

• En HTML era opcional.

• Por ejemplo <table border=2> que se permitía en HTML, pasaría a escribirse obligatoriamente <table border="2">


3 CSS

3.1 IntroducciónLas hojas de Estilo en cascada (Cascading Style Sheets, CSS) son usadas para definir la presentación de un documento estructurado escrito en HTML o XML (y por extensión en XHTML). El W3C (World Wide Web Consortium) es el encargado de formular la especificación de las hojas de estilo que servirán de estándar para los agentes de usuario o navegadores.

La información de estilo puede ser adjuntada tanto como un documento separado o en el mismo documento HTML.

Hay varias versiones: CSS1 y CSS2, con CSS3 en desarrollo por el World Wide Web Consortium (W3C). Los navegadores modernos implementan CSS1 bastante bien, aunque existen pequeñas diferencias de implementación según marcas y versiones de los navegadores.

3.2 Definición de CSSPara definir CSS tenemos tres casos:

1) Definición de CSS en archivos externosCualquier cambio de estilo que se realiza en esta hoja de estilo externa se refleja en todas las páginas del sitio Web.Para ello, vamos a colocar la etiqueta <LINK> con los atributos

• rel="STYLESHEET" indicando que el enlace es con una hoja de estilos • type="text/css" porque el archivo es de texto, en sintaxis CSS • href="estilos.css" indica el nombre del fichero fuente de los estilos

Por ejemplo, si se tiene la siguiente estructura:

Entonces para llamar a los estilos definidos en eslilos01.css desde la página html01.htm se tiene:

<head> <title></title> <link rel="stylesheet" type="text/css" href="../css/estilos01.css" /></head>


2) Definición de CSS globalesCualquier cambio de estilo que se realiza en una página Web se refleja sólo en esa página Web en donde se ha definido el estilo. Se debe usar la etiqueta <style>, por ejemplo:

<html xmlns="http://www.w3.org/1999/xhtml"><head> <title></title> <style type="text/css"> h1 { color:Blue; font-size:x-small; } </style></head><body> <h1>Hola Mundo...</h1></body></html>

• Si un estilo ya ha sido declarado en una hoja de estilo externa, el estilo de la página global tiene prioridad sobre el estilo declarado en la hoja de estilo externa

3) Definición de un estilo sobre un elemento particularCualquier cambio de estilo que se realiza en el elemento particular se refleja sólo en el elemento particular que ha definido el estilo. Se debe usar la etiqueta <style>, por ejemplo:

<html xmlns="http://www.w3.org/1999/xhtml"><head> <title></title></head><body> <h1 style="color: Olive; font-size:large">Hola Mundo ...</h1></body></html>

• Si un estilo ya ha sido declarado en una hoja de estilo externa y/o de forma global en una página Web, el estilo del elemento particular tiene prioridad tanto los otros.

Observación: • Los comentarios se definen:

/* Este es uncomentario CSS de variaslineas */


3.3 AgrupacionesA veces se encesita aplicar un estilo especial a un elemento concreto o a un grupo concreto de elementos. ¿Cómo se puede dar color a un título concreto de forma diferente a los otros títulos de tu sitio web? ¿Cómo se pueden agrupar los enlaces en diferentes categorías y dar a cada categoría un estilo especial?

3.3.1 classNos permite asignar estilos al documento<p class="cita">En en lugar de la mancha ...</p>

Sólo nos queda definir este nuevo estilo como una regla más de nuestro documento CSS: .cita {

font-weight: bold; color: red;

}

El punto inicial (.) es necesario para mantener la definición de este estilo desvinculada de cualquier elemento del documento. Si queremos restringir el uso de este estilo a un tipo de elemento, podemos definirlo como: p.cita {

font-weight: bold; color: red;

}

3.3.2 idEn cierta forma, el atributo ID es igual que CLASS. Diferencias:

• La definición de los estilos de tipo ID, están precedidas por el carácter #, en lugar del punto. #first-para {

font-weight: bold;}

<p id="first-para">This is the first paragraph, and will be boldfaced.</p>

• El mismo atributo ID sólo puede usarse en un elemento. Debe ser único.Una de las principales recomendaciones del diseño de páginas XHTML y hojas de estilos CSS está relacionada con los valores asignados a los atributos id y class. Siempre que sea posible, estos atributos se deben utilizar para mejorar la semántica del documento, es decir, para añadir significado a cada elemento de la página.

Por este motivo, se recomienda que los valores asignados a id y class indiquen la función del elemento y no estén relacionados con su aspecto o su posición:


3.4 Notación de colores en CSSSe tienen las siguientes formas para definir colores:

1) Notación hexadecimal RGB Esta notación se especifican los tres valores de color (rojo, verde y azul) con valores en hexadecimal entre 00 y FF.background-color: #ff8800;

2) Notación hexadecimal abreviada Esta notación es muy parecida a la anterior, pero permite abreviar un poco la declaración del color, indicando sólo un número para cada valor rojo, verde y azul. Por ejemplo, para especificar el color de antes (#ff8800) podríamos haber escrito: background-color: #f80;

3) Nombre del color También podemos definir un color por su nombre. Los nombres de colores son en inglés, los mismos que sirven para especificar colores con HTML.color: red; border-color: Lime;

4) Notación de color con porcentajes de RGB Se puede definir un color por los distintos porcentajes de valores RGB. Si todos los valores están al 100% el color es blanco. Si todos están al 0% obtendríamos el negro y con combinaciones de distintos porcentajes de RGB obtendríamos cualquier matiz de color. color: rgb(33%, 0%, 0%);

5) Notación por valores decimales de RGB, de 0 a 255 De una manera similar a la notación por porcentajes de RGB se puede definir un color directamente con valores decimales en un rango desde 0 a 255. color: rgb(200,255,0);

6) Color transparente Específica que el elemento debe tener el mismo color que el fondo donde está. Este valor, transparent, sustituye al color. Podemos indicarlo en principio sólo para fondos de elementos, es decir, para el atributo background-color. background-color: transparent;


3.5 Atributos CSS


3.6 Definición de estilosPara definirlos utilizamos la siguiente sintaxis, un punto seguido del nombre de la clase y entre llaves los atributos de estilos deseados. De esta manera: .nombre_de_la_clase {

atributo: valor;atributo2:valor2; …

}

Una vez tenemos una clase, podemos utilizarla en cualquier etiqueta HTML. Para ello utilizaremos el atributo class, poniéndole como valor el nombre de la clase, de esta forma: <ETIQUETA class="nombre_de_la_clase">

Como ejemplo se puede tener:<html xmlns="http://www.w3.org/1999/xhtml"><head> <title></title> <style type="text/css"> .fondonegroletrasblancas { background-color:black;


color:white; font-size:12; font-family:arial } .letrasverdes { color:#009900 } </style></head><body> <h1 class='letrasverdes'>Titulo 1</h1> <h1 class='fondonegroletrasblancas'>Titulo 2</h1> <p class='letrasverdes'> Esto es un párrafo con estilo de letras verdes </p> <p class='fondonegroletrasblancas'> Esto es un párrafo con estilo de fondo negro y las letras blancas. Es todo! </p></body></html>

Si se quiere aplicar los mismos estilos a dos etiquetas diferentes, se pueden encadenar los selectores. En el siguiente ejemplo, los títulos de sección h1, h2 y h3 comparten los mismos estilos.


h1, h2, h3 {color: #8A8E27;font-weight: normal;font-family: Arial, Helvetica, sans-serif;

}

En las hojas de estilo complejas, es habitual agrupar las propiedades comunes de varios elementos en una única regla CSS y posteriormente definir las propiedades específicas de esos mismos elementos. El siguiente ejemplo establece en primer lugar las propiedades comunes de los títulos de sección (color y tipo de letra) y a continuación, establece el tamaño de letra de cada uno de ellos:h1, h2, h3 {

color: #8A8E27;font-weight: normal;font-family: Arial, Helvetica, sans-serif;

}h1 { font-size: 2em; }h2 { font-size: 1.5em; }h3 { font-size: 1.2em; }

3.7 Imágenes

3.7.1 Ancho - AltoUtilizando las propiedades width y height, es posible mostrar las imágenes con cualquier altura/anchura, independientemente de su altura/anchura real:<html xmlns="http://www.w3.org/1999/xhtml"><head> <title>Imagen</title> <style type="text/css"> #imagen1 { width: 204px; height: 200px; } #imagen2 { width: 104px; height: 400px; } #imagen3 { width: 608px; height: 200px; } </style></head><body>


<img id="imagen1" src="../imagenes/anillo.jpg" title="Imagen 1" alt="Imagen 1" />

<img id="imagen2" src="../imagenes/anillo.jpg" title="Imagen 2" alt="Imagen 2" />

<img id="imagen3" src="../imagenes/anillo.jpg" title="Imagen 3" alt="Imagen 3" /></body></html>

Observar la deformación de la foto respecto a su tamaño original y la pérdida de calidad

Para no perder el control de las etiquetas CSS una solución, que no respeta la separación completa entre contenidos (XHTML) y presentación (CSS), es que se recomienda establecer la altura/ anchura de las imágenes mediante los atributos width y height de la etiqueta <img>:<img src="imagen.png" width="120" height="250" />

3.7.2 BordePor ejemplo, para eliminar el borde de una imagen


img {border: none;

}

Manejo de borde de la imagen<html xmlns="http://www.w3.org/1999/xhtml"><head> <title>Imagen</title> <style type="text/css"> #imagen1 { width: 204px; height: 200px; border: 2px red solid; padding: 3px; //Indica la distancia entre la imagen y el margen// } #imagen2 { width: 204px; height: 200px; border: 5px green solid; } </style></head><body><img id="imagen1" src="../imagenes/anillo.jpg" title="Imagen 1" alt="Imagen 1" />

<img id="imagen2" src="../imagenes/anillo.jpg" title="Imagen 2" alt="Imagen 2" /></body></html>

3.8 Selector descendenteSelecciona los elementos que se encuentran dentro de otros elementos. Un elemento es descendiente de otro cuando se encuentra entre las etiquetas de apertura y de cierre del otro elemento. La sintaxis formal del selector descendente se muestra a continuación:elemento1 elemento2 elemento3 ... elementoN

Los selectores descendentes siempre están formados por dos o más partes separadas entre sí por espacios en blanco. La última parte indica el elemento sobre el que se aplican los estilos y todas las partes anteriores indican el lugar en el que se tiene que encontrar ese elemento para que los estilos se apliquen realmente.


En el siguiente ejemplo, el selector descendente se compone de cuatro partes:p a span em {

text-decoration: underline;}

Los estilos de la regla anterior se aplican a los elementos de tipo <em> que se encuentren dentro de elementos de tipo <span>, que a su vez se encuentren dentro de elementos de tipo <a> que se encuentren dentro de elementos de tipo <p>.

Observación: No debe confundirse el selector descendente con la combinación de selectores:/* El estilo se aplica a todos los elementos "p", "a", "span" y "em" */p, a, span, em {

text-decoration: underline; }

/* El estilo se aplica solo a los elementos "em" que se encuentran dentro de "p a span" */p a span em {

text-decoration: underline; }

Por ejemplo:<html xmlns="http://www.w3.org/1999/xhtml"><head> <title></title> <style type="text/css"> p span { color: Red; } </style></head><body><p> <span>texto1</span> <a href="">texto2<span>texto3</span></a> texto4</p>texto5</body></html>


3.9 Estilos de enlacesUna técnica muy habitual, que se puede realizar utilizando CSS y no se podía en HTML, es la definición de estilos en los enlaces, quitándoles el subrayado o hacer enlaces en la misma página con distintos colores.

Para aplicar estilo a los enlaces debemos definirlos para los distintos tipos de enlaces que existen (visitados, activos...). Utilizaremos la siguiente sintaxis, en la declaración de estilos global de la página (<STYLE>) o del sitio (definición en un archivo externo):

• Enlaces normales: aplica estilos a los enlaces que apuntan a páginas o recursos que aún no han sido visitados por el usuarioA:link {

atributos}

• Enlaces visitados: aplica estilos a los enlaces que apuntan a recursos que han sido visitados anteriormente por el usuario. El historial de enlaces visitados se borra automáticamente cada cierto tiempo y el usuario también puede borrarlo manualmente.A:visited {

atributos}

• Enlaces activos: aplica estilos al enlace sobre el que el usuario ha posicionado el puntero del ratón. A:active {

atributos}

• Enlaces hover: aplica estilos al enlace que está pinchando el usuario. Los estilos sólo se aplican desde que el usuario pincha el botón del ratón hasta que lo suelta, por lo que suelen ser unas pocas décimas de segundoA:hover {

atributos}

Considerar que el atributo para definir enlaces sin subrayado es text-decoration: none, y para darles color es color : tu_color<html xmlns="http://www.w3.org/1999/xhtml"><head> <title></title> <style type="text/css"> A:link {text-decoration:none;color:green;} /*Sin subrayado y color inicial, al inicio */ A:visited {text-decoration:none;color:blue;} /*Después que se hace clic en el elemento*/ A:active {text-decoration:none;color:Black;}/*Al ubicarse sobre el elemento con el mouse presionado*/


A:hover {text-decoration:underline;color:red;font-weight:bold} /*Al ubicar mouse sobre el elemento*/ </style></head><body> <a href="http://dominioinexistente.nofunciona.com">Enlace normal</a> <br /> <br /> <a href='html05.htm'>Enlace CSS</a></body></html>

Inicialmente se muestra el enlace el color verde y sin subrayado, esta actuando, A:link. Al pasar el mouse sobre el primer o segundo enlace se pone de color rojo. Esta actuando, A:hover. Notar que si volvemos a ingresar a la página con el FireFox, entonces los colores mostrados en los enlaces es el verde, teniendo que haber sido el azul (de la propiedad A:visited). Esto es una propiedad del FireFox; si se ingresa con el explorer el resultado puede ser distinto.


Se ha visitado el primer enlace y se ha vuelto a la página

Se ha visitado el segundo enlace y se ha vuelto a la página

Observación: Si se definen varias pseudo-clases sobre un mismo enlace, el único orden que asegura que todos los estilos de las pseudo-clases se aplican de forma coherente es el siguiente :link, :visited, :hover y :active. De hecho, en muchas hojas de estilos es habitual establecer los estilos de los enlaces de la siguiente forma:a:link, a:visited {...}a:hover, a:active {...}


3.9.1 Imágen en enlacePuede resultar útil incluir un pequeño icono al lado de un enlace para indicar el tipo de contenido que enlaza, como por ejemplo un archivo comprimido o un documento con formato PDF.

Utilizando la propiedad background (y background-image) se puede personalizar el aspecto de los enlaces para que incluyan un pequeño icono a su lado

<html xmlns="http://www.w3.org/1999/xhtml"><head> <title></title> <style type="text/css"> .rss1 { color: #E37529; /*Color de la letra del enlace*/ padding: 0 0 0 28px; /*Distancia del texto respecto la parte final de la imagen*/ background: #FFF url(../imagenes/rss.png) no-repeat left; } .rss2 { color: #E37529; padding: 0 0 0 28px; background: #FFF url(../imagenes/twitter.png) no-repeat left; } </style></head><body><a class="rss1" href="#">Enlace a un archivo RSS</a><br /><br /><a class="rss2" href="#">Enlace a twitter</a></body></html>

3.10 Unidades y MedidasHay dos tipos de unidades: absolutas y relativas. Unidades absolutas:

• pulgadas (in). Una pulgada=2.54 cm.


• centímetros (cm). • milímetros (mm) • puntos (pt). Un punto=1/72 de pulgada. • picas (pc). Una pica=12 puntos

Unidades relativas• em • ex • px

La unidad em es igual a la altura (font-size) de la letra del elemento en el que se usa. Por ejemplo, si para un párrafo especificamos un indentado de 2em, el largo de la sangría será igual a dos veces el tamaño de la letra de ese párrafo. Cuando empleamos la unidad de medida 'em' para especificar el tamaño de la letra (font-size) entonces el valor de 'em' viene dado por el tamaño de la fuente del elemento padre.

Este ejemplo equivale a un indentado de 22 px para el párrafo a que se aplicap {

font-size:11px;text-indent: 2em;

}

Observación: Por ejemplo, la unidad absoluta 'pixel' tiene un valor diferente dependiendo de la resolución de la pantalla y el tipo de ordenador del usuario. Así, normalmente un sistema operativo Windows mantiene una equivalencia de 96px por pulgada, y un Macintosh 72px por pulgada. Si en lugar de pixels se utiliza la medida de puntos (pt) el tamaño del punto depende de la resolución de la pantalla del usuario. Esta es la razón por la que se recomienda el uso de unidades de medida 'relativas', y dentro de estas, el uso de 'em'.

3.11 Modelo de cajaEl modelo de cajas o "box model" es seguramente la característica más importante del lenguaje de hojas de estilos CSS, ya que condiciona el diseño de todas las páginas web. El "box model" es el comportamiento de CSS que hace que todos los elementos incluidos en una página HTML se representen mediante cajas rectangulares. CSS permite controlar el aspecto de todas las cajas.

El diseño de cualquier página XHTML está compuesto por cajas rectangulares. CSS permite definir la altura y anchura de cada caja, el margen existente entre cajas y el espacio de relleno interior que muestra cada caja. Además, CSS permite controlar la forma en la que se visualizan las cajas: se pueden ocultar, desplazar respecto de su posición original y fijarlas en una posición específica dentro del documento. Como la mayoría de cajas de las páginas web no muestran ningún color de fondo ni ningún borde, no son visibles a simple vista.

Las cajas de una página se crean automáticamente. Cada vez que se inserta una etiqueta o elemento en la página, se crea una nueva caja rectangular que encierra los contenidos del elemento. El siguiente esquema muestra la creación automática de cajas por parte de HTML para cada elemento definido en el código HTML de la página:


Cada una de las cajas está formada por seis partes, tal y como se muestra en la siguiente imagen tridimensional:


• Contenido (content): se trata del contenido HTML del elemento (las palabras de un párrafo, una imagen, el texto de una lista de elementos, etc.)

• Relleno (padding): espacio libre opcional entre el contenido y el borde que lo encierra.

• Borde (border): línea que encierra completamente el contenido y su relleno.

• Imagen de fondo (background image): imagen que se muestra por detrás del contenido y el espacio de relleno.

• Color de fondo (background color): color que se muestra por detrás del contenido y el espacio de relleno.

• Margen (margin): espacio libre entre la caja y las posibles cajas adyacentes.

Considerar:

• El relleno y el margen son transparentes, por lo que en el espacio ocupado por el relleno se muestra el color o imagen de fondo (si están definidos) y en el espacio ocupado por el margen se muestra el color o imagen de fondo de su elemento padre (si están definidos).

• Si ningún elemento padre tiene definido un color o imagen de fondo, se muestra el color o imagen de fondo de la propia página (si están definidos).

• Si una caja define tanto un color como una imagen de fondo, la imagen tiene más prioridad y es la que se visualiza. No obstante, si la imagen de fondo no cubre totalmente la caja del elemento o si la imagen tiene zonas transparentes, también se visualiza el color de fondo.

• Combinando imagenes transparentes y colores de fondo se pueden lograr efectos gráficos muy interesantes.


3.11.1 widthControla la anchura de los elementos

• La propiedad width no admite valores negativos y los valores en porcentaje se calculan a partir de la anchura de su elemento padre.

• El valor inherit indica que la anchura del elemento se hereda de su elemento padre.

• El valor auto, que es el que se utiliza si no se establece de forma explícita un valor a esta propiedad, indica que el navegador debe calcular automáticamente la anchura del elemento, teniendo en cuenta sus contenidos y el sitio disponible en la página.

#lateral { width: 200px; }<div id="lateral">

...</div>

3.11.2 heightControla la altura de los elementos

• Al igual que sucede con width, la propiedad height no admite valores negativos.

• Si se indica un porcentaje, se toma como referencia la altura del elemento padre.

• Si el elemento padre no tiene una altura definida explícitamente, se asigna el valor auto a la altura.

#cabecera { height: 60px; }<div id="cabecera">...</div>

3.11.3 margin


Cada una de las propiedades establece la separación entre el borde lateral de la caja y el resto de cajas adyacentes. Unidades:

• Las unidades más utilizadas para indicar los márgenes de un elemento son los píxeles(cuando se requiere una precisión total)

• Los em (para hacer diseños que mantengan las proporciones)

• Los porcentajes (para hacer diseños líquidos o fluidos).

Para el manejo de margenes tenemos:margin:superior derecho inferior izquierdo;

Por ejemplo: margin:10pt 20pt 10pt 20pt;

<html xmlns="http://www.w3.org/1999/xhtml"><head> <title></title> <style type="text/css"> .destacado { margin-left: 2em; } </style></head><body><p>Venid gente , reunios,dondequiera que estéisy admitid que las aguashan crecido a vuestro alrededory aceptad que prontoestaréis calados hasta los huesos,si creéis que estais a tiempode salvarosserá mejor que comencéis a nadaru os hundiréis como piedrasporque los tiempos están cambiando.. </p><p class='destacado'>Venid gente , reunios,dondequiera que estéisy admitid que las aguashan crecido a vuestro alrededory aceptad que pronto


estaréis calados hasta los huesos,si creéis que estais a tiempode salvarosserá mejor que comencéis a nadaru os hundiréis como piedrasporque los tiempos están cambiando.. </p></body></html>

<html xmlns="http://www.w3.org/1999/xhtml"><head> <title></title> <style type="text/css"> div img { margin-top: 2.5em; margin-bottom: 2.5em; margin-left: 1em; margin-right: 2.5em; </style></head><body> <img src="../imagenes/imagen1.gif" alt="imagen 1" /> <img src="../imagenes/imagen2.gif" alt="imagen 2" /> <img src="../imagenes/imagen3.gif" alt="imagen 3" /> <img src="../imagenes/imagen4.gif" alt="imagen 4" /><div>


<img src="../imagenes/imagen1.gif" alt="imagen 1" /> <img src="../imagenes/imagen2.gif" alt="imagen 2" /> <img src="../imagenes/imagen3.gif" alt="imagen 3" /> <img src="../imagenes/imagen4.gif" alt="imagen 4" /></div></body></html>

3.11.4 pandingEstablece la separación entre el lateral de los contenidos y el borde lateral de la caja

Para especificar el ancho de los márgenes internos de un bloque, es decir la distancia del contenido de un bloque a los bordes del mismo, se usa el atributo "padding" de la siguiente forma: padding:superior derecho inferior izquierdo;


Por ejemplo: padding:10pt 20pt 10pt 20pt;

Otra opción cuando todos los márgenes son del mismo tamaño es usar el atributo padding de la siguiente forma: paddding: 20pt

Es posible indicar el ancho de un bloque usando el atributo "width", también es posible especificar las unidades del ancho o usar un valor porcentual. ESTILO { width:valor;}

<html xmlns="http://www.w3.org/1999/xhtml"><head> <title></title> <style type="text/css"> .margen { margin-top: 2em; margin-right: 2em; margin-bottom: 2em; margin-left: 2em; } .relleno { padding-top: 5em; padding-right: 5em; padding-bottom: 5em; padding-left: 5em; } </style></head><body><p class="margen"> Venid gente , reunios, dondequiera que estéis y admitid que las aguas han crecido a vuestro alrededor y aceptad que pronto estaréis calados hasta los huesos, si creéis que estais a tiempo de salvaros será mejor que comencéis a nadar u os hundiréis como piedras porque los tiempos están cambiando.. </p>

<p class="relleno">


Venid gente , reunios, dondequiera que estéis y admitid que las aguas han crecido a vuestro alrededor y aceptad que pronto estaréis calados hasta los huesos, si creéis que estais a tiempo de salvaros será mejor que comencéis a nadar u os hundiréis como piedras porque los tiempos están cambiando.. </p></body></html>

Considerar:


El resultado es:

3.11.5 borderLa anchura de los bordes se puede indicar mediante una medida (absoluta o relativa y en cualquier unidad de medida de las definidas) o mediante las palabras clave thin (borde delgado), medium (borde normal) y thick (borde ancho).

div {border-top-width: 10px;border-right-width: 1em;border-bottom-width: thick;border-left-width: thin;}

3.11.6 colorColor de los bordes


div {border-top-color: #CC0000;border-right-color: blue;border-bottom-color: #00FF00;border-left-color: #CCC;

}

3.11.7 border-stylePermite establecer el estilo de cada uno de los bordes

div {border-top-style: dashed;border-right-style: double;border-bottom-style: dotted;border-left-style: solid;

}


Tipos de líneas:

3.11.8 background-colorEl fondo puede ser un color simple o una imagen. El fondo solamente se visualiza en el área ocupada por el contenido y su relleno, ya que el color de los bordes se controla directamente desde los bordes y las zonas de los márgenes siempre son transparentes.

El siguiente ejemplo muestra una página web con un color gris claro de fondo:

body {background-color: #F5F5F5;

}

El siguiente ejemplo muestra una imagen como fondo de toda la página

body { background-image: url("imagenes/fondo.png")

}


Considerar la imagen:

Se va a rellenar todo el fondo con la imagen:

<html xmlns="http://www.w3.org/1999/xhtml"><head> <title></title> <style type="text/css"> body {

background-image: url("../imagenes/imagen5.gif") }

</style></head><body>

</body></html>

3.11.9 position

El estándar HTML clasifica a todos sus elementos en dos grandes grupos: elementos en línea y elementos de bloque.

Los elementos de bloque siempre empiezan en una nueva línea y ocupan todo el espacio disponible hasta el final de la línea. Por su parte, los elementos en línea no empiezan necesariamente en nueva línea y sólo ocupan


el espacio necesario para mostrar sus contenidos.

• Los elementos en línea 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, noscript, ol, p, pre, table, ul, dd, dt, frameset, li, tbody, td, tfoot, th, thead, tr.

• Los siguientes elementos pueden ser en línea y de bloque según las circunstancias: button, del, iframe, ins, map, object, script.

Los navegadores crean y posicionan de forma automática todas las cajas que forman cada página HTML. No obstante, CSS permite al diseñador modificar la posición en la que se muestra cada caja.

El estándar de CSS define cinco modelos diferentes para posicionar una caja:

• Posicionamiento normal o estático: se trata del posicionamiento que utilizan los navegadores si no se indica lo contrario.

• Posicionamiento relativo: variante del posicionamiento normal que consiste en posicionar una caja según el posicionamiento normal y después desplazarla respecto de su posición original.

• Posicionamiento absoluto: la posición de una caja se establece de forma absoluta respecto de su elemento contenedor y el resto de elementos de la página ignoran la nueva posición del elemento.

• Posicionamiento fijo: variante del posicionamiento absoluto que convierte una caja en un elemento inamovible, de forma que su posición en la pantalla siempre es la misma independientemente del resto de elementos e independientemente de si el usuario sube o baja la página en la ventana del navegador.


• Posicionamiento flotante: se trata del modelo más especial de posicionamiento, ya que desplaza las cajas todo lo posible hacia la izquierda o hacia la derecha de la línea en la que se encuentran.

Los valores de position son:

• static: corresponde al posicionamiento normal o estático. Si se utiliza este valor, se ignoran los valores de las propiedades top, right, bottom y left que se verán a continuación.

• relative: corresponde al posicionamiento relativo. El desplazamiento de la caja se controla con las propiedades top, right, bottom y left.

• absolute: corresponde al posicionamiento absoluto. El desplazamiento de la caja también se controla con las propiedades top, right, bottom y left, pero su interpretación es mucho más compleja, ya que el origen de coordenadas del desplazamiento depende del posicionamiento de su elemento contenedor.

• fixed: corresponde al posicionamiento fijo. El desplazamiento se establece de la misma forma que en el posicionamiento absoluto, pero en este caso el elemento permanece inamovible en la pantalla.

Observar que position sólo indica cómo se posiciona una caja, pero no la desplaza. Para esto se debe usar las propiedades: top, right, bottom y left

3.11.9.1 Posicionamiento normal o estáticoEl modelo que utilizan por defecto los navegadores para mostrar los elementos de las páginas. En este modelo, ninguna caja se desplaza respecto de su posición original, por lo que sólo se tiene en cuenta si el elemento es de bloque o en línea.

En este tipo de contextos, las cajas se muestran una debajo de otra comenzando desde el principio del elemento contenedor.

Si un elemento se encuentra dentro de otro, el elemento padre se llama "elemento contenedor" y determina tanto la posición como el tamaño de todas sus cajas interiores. Si un elemento no se encuentra dentro de un elemento contenedor, entonces su elemento contenedor es el elemento <body> de la página. Normalmente, la anchura de los elementos de bloque está limitada a la anchura de su elemento contenedor, aunque en algunos casos sus contenidos pueden desbordar el espacio disponible.


3.11.9.2 Posicionamiento relativo

El posicionamiento relativo permite desplazar una caja respecto de su posición original establecida mediante el posicionamiento normal. El desplazamiento de la caja se controla con las propiedades top, right, bottom y left.

El desplazamiento de una caja no afecta al resto de cajas adyacentes, que se muestran en la misma posición que si la caja desplazada no se hubiera movido de su posición original.

En la imagen anterior, la caja 2 se ha desplazado lateralmente hacia la derecha y verticalmente de forma descendente. Como el resto de cajas de la página no modifican su posición, se producen solapamientos entre los contenidos de las cajas.


3.11.9.3 Posicionamiento absoluto

El posicionamiento absoluto se emplea para establecer de forma precisa la posición en la que se muestra la caja de un elemento. La nueva posición de la caja se indica mediante las propiedades top, right, bottom y left.

Cuando una caja se posiciona de forma absoluta, el resto de elementos de la página la ignoran y ocupan el lugar original ocupado por la caja posicionada. Al igual que en el posicionamiento relativo, cuando se posiciona de forma absoluta una caja es probable que se produzcan solapamientos con otras cajas.

La caja 2 está posicionada de forma absoluta, lo que implica que el resto de elementos ignoran que esa caja exista. Por este motivo, la caja 3 deja su lugar original y pasa a ocupar el hueco dejado por la caja 2.


3.11.9.4 Posicionamiento fijo

La principal característica de una caja posicionada de forma fija es que su posición es inamovible dentro de la ventana del navegador. El posicionamiento fijo hace que las cajas no modifiquen su posición ni aunque el usuario suba o baje la página en la ventana de su navegador.

3.11.9.5 Posicionamiento flotante (float)

La mayor parte de las estructuras de las páginas web complejas están diseñadas con el posicionamiento flotante.

Cuando una caja se posiciona con el modelo de posicionamiento flotante, automáticamente se convierte en una caja flotante, lo que significa que se desplaza hasta la zona más a la izquierda o más a la derecha de la posición en la que originalmente se encontraba


Cuando se posiciona una caja de forma flotante:

• La caja deja de pertenecer al flujo normal de la página, lo que significa que el resto de cajas ocupan el lugar dejado por la caja flotante.

• La caja flotante se posiciona lo más a la izquierda o lo más a la derecha posible de la posición en la que se encontraba originalmente.

Para el gráfico anterior hay dos pasos de ejecución:

1) La caja 1 es de tipo flotante, por lo que desaparece del flujo normal de la página y el resto de cajas ocupan su lugar. El resultado es que la caja 2 ahora se muestra donde estaba la caja 1 y la caja 3 se muestra donde estaba la caja 2.

2) Al mismo tiempo, la caja 1 se desplaza todo lo posible hacia la izquierda de la posición en la que se encontraba. El resultado es que la caja 1 se muestra encima de la nueva posición de la caja 2 y tapa todos sus contenidos.

En el ejemplo siguiente, las cajas no se superponen entre sí porque las cajas flotantes tienen en cuenta las otras cajas flotantes existentes. Como la caja 1 ya estaba posicionada lo más a la izquierda posible, la caja 2 sólo puede colocarse al lado del borde derecho de la caja 1, que es el sitio más a la izquierda posible respecto de la zona en la que se encontraba.

Si no existe sitio en la línea actual, la caja flotante baja a la línea inferior hasta que encuentra el sitio necesario para mostrarse lo más a la izquierda o lo más a la derecha posible en esa nueva línea:


El formato de float es:

• Si se indica un valor left, la caja se desplaza hasta el punto más a la izquierda posible en esa misma línea (si no existe sitio en esa línea, la caja baja una línea y se muestra lo más a la izquierda posible en esa nueva línea).

• El valor right tiene un funcionamiento idéntico, salvo que en este caso, la caja se desplaza hacia la derecha.

• El valor none permite anular el posicionamiento flotante de forma que el elemento se muestre en su posición original.

Observar que los elementos que se encuentran alrededor de una caja flotante adaptan sus contenidos para que fluyan alrededor del elemento posicionado:

3.11.9.6 clear

La propiedad clear indica el lado del elemento HTML que no debe ser adyacente a ninguna caja posicionada de forma flotante.

• Si se indica el valor left, el elemento se desplaza de forma descendente hasta que pueda colocarse en una línea en la que no haya ninguna caja flotante en el lado izquierdo.

• Si se indica el valor right, el comportamiento es análogo, salvo que en este caso se tienen en cuenta los elementos desplazados hacia la derecha.

• El valor both despeja los lados izquierdo y derecho del elemento, ya que desplaza el elemento de forma


descendente hasta que el borde superior se encuentre por debajo del borde inferior de cualquier elemento flotante hacia la izquierda o hacia la derecha.

• Como se verá más adelante, la propiedad clear es imprescindible cuando se crean las estructuras de las páginas web complejas.

Por ejemplo:

<html xmlns="http://www.w3.org/1999/xhtml"><head> <title>html 20</title> <style type="text/css"> #paginacion { border: 1px solid #CCC; background-color: #E0E0E0; padding: .5em; } .derecha { float: right; } .izquierda { float: left; } div.clear { clear: both; } </style></head><body>

<div id="paginacion"><span class="izquierda">« Anterior</span>


<span class="derecha">Siguiente »</span><div class="clear"></div>

</div></body></html>

3.11.9.7 display y visibility

La propiedad display permite ocultar completamente un elemento haciendo que desaparezca de la página. Como el elemento oculto no se muestra, el resto de elementos de la página se mueven para ocupar su lugar.

Por otra parte, la propiedad visibility permite hacer invisible un elemento, lo que significa que el navegador crea la caja del elemento pero no la muestra. En este caso, el resto de elementos de la página no modifican su posición, ya que aunque la caja no se ve, sigue ocupando sitio.


Para display los valores más utilizados son inline, block y none (oculta un elemento y hace que desaparezca de la página). Por ejemplo,

<div>DIV normal</div><div style="display:inline">DIV con display:inline</div><a href="#">Enlace normal</a><a href="#" style="display:block">Enlace con display:block</a>

Como se verá más adelante, la propiedad display: inline se puede utilizar en las listas (<ul>, <ol>) que se quieren mostrar horizontalmente y la propiedad display: block se emplea frecuentemente para los enlaces que forman el menú de navegación.

Inicialmente todas las cajas que componen la página son visibles. Empleando el valor hidden es posible convertir una caja en invisible para que no muestre sus contenidos. El resto de elementos de la página se muestran como si la caja todavía fuera visible, por lo que en el lugar donde originalmente se mostraba la caja invisible, ahora se muestra un hueco vacío.

Por último, el valor collapse de la propiedad visibility sólo se puede utilizar en las filas, grupos de filas,


columnas y grupos de columnas de una tabla. Su efecto es similar al de la propiedad display, ya que oculta completamente la fila y/o columna y se pueden mostrar otros contenidos en ese lugar. Si se utiliza el valor collapse sobre cualquier otro tipo de elemento, su efecto es idéntico al valor hidden.

3.12 Seudo-elementosLos seudo-elementos se refieren a sub partes de elementos, como la primera letra de un párrafo. Las reglas con seudo-clases o seudo-elementos toman la forma:selector:seudo-clase {

propiedad: valor }

selector:seudo-elemento { propiedad: valor

}

Las clases normales pueden usarse con seudo-clases y seudo-elementos de la siguiente manera:selector.clase:seudo-clase {

propiedad: valor }

selector.clase:seudo-elemento { propiedad: valor

}

Con frecuencia, en artículos de periódicos, como los del Wall Street Journal, la primera línea de texto de un artículo se muestra en negrita y con todas las letras en mayúsculas. CSS1 ha incluido esta capacidad como un seudo-elemento. Un seudo-elemento first-line puede usarse en cualquier elemento de nivel de bloque (como p, h1, div, etc.). Un ejemplo de un seudo-elemento first-line sería:<html><head><title>Drop cap formatting</title><style type="text/css"> p.dropcap:first-line { font-weight: bold; float: left; color: Green; }</style></head><body><h1>IN CONGRESS, July 4, 1776.</h1><p>The unanimous Declaration of the thirteen united States of America,</p><p class="dropcap">


When in the Course of human events, it becomes necessary for one people to dissolve the political bands which have connected them with another, and to assume among the powers of the earth, the separate and equal station to which the Laws of Nature and of Nature’s God entitle them, a decent respect to the opinions of mankind requires that they should declare the causes which impel them to the separation.</p></body></html>

El seudo-elemento first-letter se emplea para crear letras capitales y otros efectos. La primera letra de texto dentro de un selector asignado se representará de acuerdo al valor asignado. Un seudo-elemento first-letter puede usarse en cualquier elemento de nivel de bloque.

<html><head><title>Drop cap formatting</title><style type="text/css"> p.dropcap:first-letter { font-size: 3em; font-weight: bold; float: left; border: solid 1px black; padding: .1em; margin: .2em .2em 0 0; } /*Distancia entre el recuadro y el texto*/</style></head><body><h1>IN CONGRESS, July 4, 1776.</h1><p>The unanimous Declaration of the thirteen united States of America,</p><p class="dropcap"> When in the Course of human events, it becomes necessary for one people to dissolve the political bands which have connected them with another, and to assume among the powers of the earth, the separate and equal station


to which the Laws of Nature and of Nature’s God entitle them, a decent respect to the opinions of mankind requires that they should declare the causes which impel them to the separation.</p></body></html>

3.13 LayoutEl diseño de las páginas web habituales se divide en bloques: cabecera, menú, contenidos y pie de página. Visualmente, los bloques se disponen en varias filas y columnas. Por este motivo, hace varios años la estructura de las páginas HTML se definía mediante tablas.


A medida que aumenta el tamaño y la resolución de las pantallas de ordenador, se hace más difícil diseñar páginas que se adapten al tamaño de la ventana del navegador. El principal reto que se presenta con resoluciones superiores a 1024 x 768 píxel, es que las líneas de texto son demasiado largas como para leerlas con comodidad. Por ese motivo, normalmente se opta por diseños con ancho fijo limitado a un valor aceptable para mantener la legibilidad del texto.

<html xmlns="http://www.w3.org/1999/xhtml"><head> <title></title> <style type="text/css"> #contenedor { width: 300px; /*El ancho es fijo, pero la altura es variable y se ajusta*/ margin: 0 auto; /*Ver explicación en el siguiente párrafo (interesante)*/ } </style></head><body><div id="contenedor"> Bibliografía de Edgar Codd: Nacido en Portland Bill, Dorset (Reino Unido), de padre fabricante de cuero y madre profesora de escuela, estudió matemáticas y química en la Universidad de Oxford. Más tarde, durante la Segunda Guerra Mundial, fue piloto capitán de la Royal Air Force entre 1942 y 1945. En 1948 se mudó a Nueva York para trabajar como programador matemático para IBM, pero se mudó a Ottawa en 1953 debido a discrepancias políticas con el senador americano Joseph McCarthy. Tras volver una década más tarde a Estados Unidos se doctoró en ciencias de la computación en la Universidad de Michigan, en Ann Arbor (1965). En 1967 se mudó a California, donde trabajó en el Laboratorio IBM


de Investigación en San José del Cabo. En 1981 recibió el Premio Turing de ciencias de la computación, el mayor galardón en su campo. Murió de fallo cardíaco en Williams Island, Filadelfia (Estados Unidos), el 23 de abril de 2003.</div></body></html>

El valor 0 auto significa que los márgenes superior e inferior son iguales a 0 y los márgenes laterales toman un valor de auto (o sea, automático). Cuando se asignan márgenes laterales automáticos a un elemento, los navegadores centran ese elemento respecto de su elemento padre. En este ejemplo, el elemento padre del <div> es la propia página (el elemento <body>), por lo que se consigue centrar el elemento <div> respecto de la ventana del navegador.

Otras alternativa de solución para lo anterior es usar margenes relativos:

#contenedor {width: 70%;margin: 0 auto;

}

Crear la estructura siguiente en donde la página se fija en 700px, la anchura del menú es de 150px, la anchura de los contenidos es de 550px, el alto de la cabecera es de 50px y al alto del pie es de 50px.


La solución CSS se basa en el uso de la propiedad float para los elementos posicionados como el menú y los contenidos y el uso de la propiedad clear en el pie de página para evitar los solapamientos ocasionados por los elementos posicionados con float.

<html xmlns="http://www.w3.org/1999/xhtml"><head> <title></title> <style type="text/css"> #contenedor { width: 700px; } #cabecera { height: 50px; background-color:Aqua;


} #menu { float: left; width: 150px; height: 300px; background-color:Blue; } #contenido { float: left; width: 550px; height: 300px; background-color:Lime; } #pie { clear: both; height: 50px; background-color:Yellow; } </style></head><body> <div id="contenedor"> <div id="cabecera"> Cabecera </div> <div id="menu"> Menu </div> <div id="contenido"> Contenido </div> <div id="pie"> Pie de página </div></div></body></html>


3.14 Menús

3.14.1 Creación de menú sin imagenEn este caso se tiene:

background-color de a.botonMenu color de estado reposo (out)

background-color de a.botonMenu:hover color de estado sobre (over)

background-color de a.botonMenu:active color de estado seleccionado

<html xmlns="http://www.w3.org/1999/xhtml"><head> <title></title> <style type="text/css">

#menu div.barraMenu { /* Propiedad de menu y la barra de menu */ font-family: sans-serif; font-size: 8pt; color: white; text-align: left; }

#menu div.barraMenu a.botonMenu { /* Propiedad de menu, la barra de menu y del botón */ background-color: Lime; /* Por defecto esta es la opción de botón de la barra de menú */ color: white; cursor: pointer;

padding: 4px 6px 2px 5px; /*superior derecho inferior izquierdo*/ text-decoration: none; }

#menu div.barraMenu a.botonMenu:hover { /* Se activa cuando se pasa por el botón */ background-color: Blue; }

#menu div.barraMenu a.botonMenu:active { /* Se activa cuando se presiona el botón */ background-color: Blue; color: Red; } </style></head><body><div id="menu"> <div class="barraMenu"> <a class="botonMenu" href="">Opción 1</a>


<a class="botonMenu" href="">Opción 2</a> <a class="botonMenu" href="">Opción 3</a> <a class="botonMenu" href="">Opción 4</a> </div></div> </body></html>

Sin ninguna acción sobre los botones

Al pasar sobre un botón:

Al presionar el mouse sobre uno de los botones:


3.14.2 Creación de menú con imagenPara este ejemplo se construyeron dos imágenes de tamaño 100x23px.

<html xmlns="http://www.w3.org/1999/xhtml"><head> <title></title> <style type="text/css"> .navegador{ margin-left: 45%; /* Sin estos parámetros el boton ocupa todo el ancho del video */ margin-right: 45%; width: 150px; /* Tamaño mínimo del elemento */ } .navenlace { border: 1px solid #999999; padding: 2px; /* Distancia entre el botón y sus bordes */ } .navenlace a { background-image: url("../imagenes/boton.png"); color: Black; /*Color inicial de la letra*/ text-decoration: none; /* Saca el subrayado */ display: block; /* Muestra el boton en todo el bloque */ /* Si es necesario llena espacios faltantes */ width: 100%; /* El efecto se genera en todo la caja */ }

.navenlace a:hover { background-image: url("../imagenes/boton1.png"); color: White; /*Color de la letra la posicionarse sobre el botón*/ } </style></head><body><div class="navegador"> <p class="navenlace"><a href="#">Enlace 1</a></p> <p class="navenlace"><a href="#">Enlace 2</a></p> <p class="navenlace"><a href="#">Enlace 3</a></p> </div>


</body></html>



3.14.3 Creación de menú horizontal con lista<html xmlns="http://www.w3.org/1999/xhtml"><head> <title></title> <style type="text/css"> #navegador ul{ list-style: none; /*Elimina los estilos de las listas*/ width: 350px; /*El tamaño mínimo, permite NO desarmar la estructura de botones */ padding: 0; } #navegador li{ display: inline; /*Muestra los botones en una sola linea horizontal*/ text-align: center; } #navegador li a { padding: 2px 7px 2px 7px; /*Distancia el texto del margen del botón (superior derecho inferior izquierdo)*/

color: Blue;


background-color: Gray; border: 1px solid Lime; text-decoration: none; } #navegador li a:hover{ background-color: Black; color: White; } </style></head><body><div id="navegador"> <ul> <li><a href="#">Elemento 1</a></li> <li><a href="#">Elemento 2</a></li> <li><a href="#">Elemento 3</a></li> <li><a href="#">Elemento 4</a></li> </ul></div> </body></html>




3.14.4 Creación de menú vertical con lista<html xmlns="http://www.w3.org/1999/xhtml"><head> <title></title> <style type="text/css"> #navegador ul{ list-style: none; /*elimina los estilos de las listas*/ width: 120px; /*El tamaño mínimo, permite NO desarmar la estructura de botones */ padding: 0px; /*Ajusta el menú a la izquierda*/ } #navegador li{ text-align: center; } #navegador li a { padding: .2em 0 .2em .5em; /*Distancia el texto del margen del botón*//*superior derecho inferior izquierdo*/

display: block; /* Muestra el boton en todo el bloque */ /* Si es necesario llena espacios faltantes del tamaño 120px*/ color: Blue; background-color: Gray; border: 1px solid Lime; text-decoration: none; } #navegador li a:hover{ background-color: Black; color: White; } </style></head><body><div id="navegador"> <ul> <li><a href="#">Elemento 1</a></li> <li><a href="#">Elemento 2</a></li> <li><a href="#">Elemento 3</a></li> <li><a href="#">Elemento 4</a></li> </ul></div> </body></html>




3.14.5 Creación de menú vertical efecto alteral<html xmlns="http://www.w3.org/1999/xhtml"><head> <title></title> <style type="text/css"> ul#navlist /*Son los estilos por defecto*/ { width: 158px; padding: 0px; font: bold 12px verdana,helvetica,arial,sans-serif; } ul#navlist li {


list-style: none;/*Elimina los estilos de li*/ margin: 0px; border: 0px; border-top: 1px solid #808080; } ul#navlist li a { display: block; width: 122px; padding: 4px 8px 4px 8px; /*superiorDerechoInferiorIzquierdo*/ border: 0px; border-left: 20px solid #aaaabb;/*Da el efecto cuadro izquierdo por defecto*/ background: blue; text-decoration: none;/*Elimina el subrayado del link*/ text-align: right; }

ul#navlist li a:link /*link por defecto*/ { color: white;/*Color de la letra*/ } div#navcontainer li a:visited /*link despues de visitado*/ { color: white;/*Color de la letra*/ } ul#navlist li a:hover /*link al pasar por el botón*/ { border-left: 20px solid orange;/*Da el efecto cuadro izquierdo*/ color: green; /*Color de la letra*/ background: #000066; /*Color fondo, azul oscuro*/ } </style></head><body><div id="navcontainer"> <ul id="navlist"> <li><a href="#">Item one</a></li> <li><a href="#">Item two</a></li> <li><a href="#">Item three</a></li> <li><a href="#">Item four</a></li> <li><a href="#">Item five</a></li> </ul></div></body></html>


Al inicio

Al pasar el mouse sobre los elementos

3.14.6 Rollover con border<html xmlns="http://www.w3.org/1999/xhtml"><head> <title></title> <style type="text/css">

#borde-interior{ width: 420px;

} #borde-interior a img, #borde-interior a {

border: none; /*Elimina los bordes por defecto*/ overflow: hidden; float: left; /*Ajusta los elementos a la izquierda*/

} #borde-interior a:hover {

border: 3px solid #ffcc33; /*Borde de tamaño 3*/ } #borde-interior a:hover img {

margin: -3px; /*para que el borde de tamaño 3 calce justo*/ }</style>

</head><body><div id="borde-interior"> <a href="#"><img src="../imagenes/74.jpg" width="140" height="77" alt="" title="" /></a>


<a href="#"><img src="../imagenes/75.jpg" width="140" height="77" alt="" title="" /></a> <a href="#"><img src="../imagenes/76.jpg" width="140" height="77" alt="" title="" /></a> <a href="#"><img src="../imagenes/77.gif" width="140" height="77" alt="" title="" /></a> <a href="#"><img src="../imagenes/78.gif" width="140" height="77" alt="" title="" /></a> <a href="#"><img src="../imagenes/79.jpg" width="140" height="77" alt="" title="" /></a></div></body></html>

Al pasar sobre los elementos se aprecia el borde y no se pierde la forma:

3.15 Recuadro<html xmlns="http://www.w3.org/1999/xhtml"><head> <title></title> <style type="text/css"> #tabla1{ border: 1px solid Blue; width: 280px; }


#cabtab1{ /*Propiedades de título*/ background-color: Blue; font-weight: bold; color: White; padding: 2 2 2 2px; /*superior derecho inferior izquierdo*/ } #cuerpotab1{ /*Propiedades del cuerpo*/ padding: 4 4 4 4px; /*superior derecho inferior izquierdo*/ background-color: #ffffcc; }

</style></head><body><div id="tabla1"> <div id="cabtab1"> Viola Chilensis </div> <div id="cuerpotab1"> Cuando se trata de bailar la cueca<br /> De tu guitarra no se libra nadie<br /> Hasta los muertos salen a bailar<br /> Cueca valseada.<br /> Cueca de la Batalla de Maipú<br /> Cueca del Hundimiento del Angamos<br /> Cueca del Terremoto de Chillán<br /> Todas las cosas.<br /> Ni bandurria<br /> Ni tenca<br /> Ni zorzal<br /> Ni codorniza libre ni cautiva<br /> Tú<br /> Solamente tú<br /> Tres veces tú<br /> Ave del paraíso terrenal.<br /> </div> </div> </body></html>


3.16 FotosEn este caso tomamos la recomendación que es dar el tamaño a la imagen en el tab img.

<html xmlns="http://www.w3.org/1999/xhtml"><head> <title></title> <style type="text/css"> #principal { margin:0 auto; } .contenedorfoto { width: 230px; /*Indica el tamaño del contenedor*/ height: 230px; float:left; /*Posiciona los elementos a izquierda*/ margin: 10px; padding:5px; background-color:#f5f7f9;


border-right: #a5a7aa solid 1px; border-bottom: #a5a7aa solid 1px; text-align:center; } </style></head><body><div id="principal"> <div class="contenedorfoto"> <a href="#"> <img src="../imagenes/01.jpg" border="0" alt="" style= 'max-width:200px; max-height: 200px; min-width:200px; min-height:200px' /> </a> <br /><span>Descripción de la imagen</span></div> <div class="contenedorfoto"> <a href="#"> <img src="../imagenes/02.jpg" border="0" alt="" style= 'max-width:200px; max-height: 200px; min-width:200px; min-height:200px' /> </a> <br /><span>Descripción de la imagen</span></div> <div class="contenedorfoto"> <a href="#"> <img src="../imagenes/03.jpg" border="0" alt="" style= 'max-width:200px; max-height: 200px; min-width:200px; min-height:200px' /> </a> <br /><span>Descripción de la imagen</span></div> <div class="contenedorfoto"> <a href="#"> <img src="../imagenes/04.jpg" border="0" alt="" style= 'max-width:200px; max-height: 200px; min-width:200px; min-height:200px' /> </a> <br /><span>Descripción de la imagen</span></div> <div class="contenedorfoto"> <a href="#"> <img src="../imagenes/05.jpg" border="0" alt="" style= 'max-width:200px; max-height: 200px; min-width:200px; min-height:200px' /> </a> <br /><span>Descripción de la imagen</span></div></div> </body></html>


Considerar que las fotos tiene una calidad muy por encima del 200x200 exigido


3.17 Maquetación

3.17.1 FondoVamos a considera la siguiente imagen

<html xmlns="http://www.w3.org/1999/xhtml"><head> <title></title> <style type="text/css"> body {

background : url(../imagenes/fondo-principal.jpg); /*Imagén de fondo que se repite*/ font : 8pt Verdana, Geneva, Arial, Helvetica, sans-serif; color : #666666; margin : 20px 0px 20px 0px; /*superior derecho inferior izquierdo*/ text-align: center; } </style></head><body>


</body></html>

3.17.2 Contenedor principal

<html xmlns="http://www.w3.org/1999/xhtml"><head> <title></title> <style type="text/css"> body { background : url(../imagenes/fondo-principal.jpg); /*Imagén de fondo que se repite*/ font : 8pt Verdana, Geneva, Arial, Helvetica, sans-serif; color : #666666; margin : 20px 0px 20px 0px; /*superior derecho inferior izquierdo*/ text-align: center; } #contenedor{ text-align: left; /*Alineación a la izquierda*/ width: 700px; background-color : #ffffff; margin: auto; /*Para que Mozilla y otros centren*/ } </style></head><body>


<div id="contenedor">Luego el concepto se fue ampliando y evolucionando, dando lugar a los sitios de noticias al estilo web 2.0 donde los usuarios pueden comentar, votar y subir noticias (artículos, post), enviar enlaces por correo a sus conocidos, recibir las actualizaciones mediante RSS y conformar grupos y redes sociales.<br /><br />

Podríamos decir que uno de los pioneros de estos sitios de noticias fue Digg, fundado en diciembre de 2004, lo que no es tan poco tiempo en términos de Internet. Sin embargo, Slashdot data de 1997.<br /><br />

La novedad de Digg consiste en que las noticias son enviadas por los usuarios para luego ser mostrados en la página principal por medio de un sistema basado en el ranking de usuarios. Esto difiere del sistema de jerarquías editoriales que emplean otros sitios (incluido este), pues aquí los usuarios son los editores. Es como si en un diario, los lectores votaran las noticias y sólo las que tienen cierta cantidad de votos son publicadas en tapa.<br /><br />

Los artículos presentados constan de un titular y un breve resumen con el link hacia la historia original y un espacio para que los usuarios comenten la nota. Todo el contenido y acceso al sitio es gratis, pero es necesario estar registrada/o para poder llevar a cabo ciertas acciones como la promoción de historias, envío y comentarios de las mismas.<br /><br />


3.17.3 Cabecera

<html xmlns="http://www.w3.org/1999/xhtml"><head> <title></title> <style type="text/css">


body { background : url(../imagenes/fondo-principal.jpg); /*Imagén de fondo que se repite*/ font : 8pt Verdana, Geneva, Arial, Helvetica, sans-serif; color : #666666; margin : 20px 0px 20px 0px; /*superior derecho inferior izquierdo*/ text-align: center; } #contenedor{ text-align: left; /*Alineación a la izquierda*/ width: 700px; background-color : #ffffff; margin: auto; /*Para que Mozilla y otros centren*/ } #cabecera{ height : 161px; width: 700px; margin: auto; /*Para que Mozilla y otros centren*/ } </style></head><body><div id="contenedor"><div id="cabecera">

<img src="../imagenes/cabecera01.jpg" width="700" height="161" alt="maquetacion" title="maquetacion" /> </div>

Luego el concepto se fue ampliando y evolucionando, dando lugar a los sitios de noticias al estilo web 2.0 donde los usuarios pueden comentar, votar y subir noticias (artículos, post), enviar enlaces por correo a

sus conocidos, recibir las actualizaciones mediante RSS y conformar grupos y redes sociales.<br /><br />

Podríamos decir que uno de los pioneros de estos sitios de noticias fue Digg, fundado en diciembre de 2004, lo que no es tan poco tiempo en términos de Internet. Sin embargo, Slashdot data de 1997.<br /><br />

La novedad de Digg consiste en que las noticias son enviadas por los usuarios para luego ser mostrados

en la página principal por medio de un sistema basado en el ranking de usuarios. Esto difiere del sistema de jerarquías editoriales que emplean otros sitios (incluido este), pues aquí los usuarios son los editores.

Es como si en un diario, los lectores votaran las noticias y sólo las que tienen cierta cantidad de votos son publicadas en tapa.<br /><br />

Los artículos presentados constan de un titular y un breve resumen con el link hacia la historia original y

un espacio para que los usuarios comenten la nota. Todo el contenido y acceso al sitio es gratis, pero es necesario estar registrada/o para poder llevar a cabo ciertas acciones como la promoción de historias, envío

y comentarios de las mismas.<br /><br />

</div>

</body></html>


3.17.4 Barra superior de navegación

<html xmlns="http://www.w3.org/1999/xhtml"><head> <title></title> <style type="text/css"> body { background : url(../imagenes/fondo-principal.jpg); /*Imagén de fondo que se repite*/ font : 8pt Verdana, Geneva, Arial, Helvetica, sans-serif; color : #666666; margin : 20px 0px 20px 0px; /*superior derecho inferior izquierdo*/ text-align: center; } #contenedor{ text-align: left; /*Alineación a la izquierda*/ width: 700px; background-color : #ffffff; margin: auto; /*Para que Mozilla y otros centren*/ } #cabecera{ height : 161px; width: 700px; margin: auto; /*Para que Mozilla y otros centren*/ } #navegador{ background : url(../imagenes/cabecera02.png); /*Imagén de fondo*/ padding : 3px 10px 5px 10px; /*superior derecho inferior izquierdo*/


} A.enlacenav, A.enlacenav:VISITED, A.enlacenav:ACTIVE, A.enlacenav:LINK{ color: #494E6B; /*Todos con el mismo color*/ } A.enlacenav:HOVER{ color: #3F7DE3; /*Color al pasar sobre el elemento*/ } </style></head><body><div id="contenedor"> <div id="cabecera">

<img src="../imagenes/cabecera01.jpg" width="700" height="161" alt="maquetacion" title="maquetacion" /> </div>

<div id="navegador"> <a href="#" class="enlacenav">Portada</a> |

<a href="#" class="enlacenav">Invierno</a> | <a href="#" class="enlacenav">Diciembre a marzo</a> |

<a href="#" class="enlacenav">La chimenea</a> | <a href="#" class="enlacenav">Deportes de invierno</a> |

<a href="#" class="enlacenav">Contacto</a> </div>

Luego el concepto se fue ampliando y evolucionando, dando lugar a los sitios de noticias al estilo web 2.0

donde los usuarios pueden comentar, votar y subir noticias (artículos, post), enviar enlaces por correo a sus conocidos, recibir las actualizaciones mediante RSS y conformar grupos y redes sociales.<br /><br />

Podríamos decir que uno de los pioneros de estos sitios de noticias fue Digg, fundado en diciembre de 2004,

lo que no es tan poco tiempo en términos de Internet. Sin embargo, Slashdot data de 1997.<br /><br />

La novedad de Digg consiste en que las noticias son enviadas por los usuarios para luego ser mostrados en la página principal por medio de un sistema basado en el ranking de usuarios. Esto difiere del sistema

de jerarquías editoriales que emplean otros sitios (incluido este), pues aquí los usuarios son los editores. Es como si en un diario, los lectores votaran las noticias y sólo las que tienen cierta cantidad de votos son

publicadas en tapa.<br /><br />

Los artículos presentados constan de un titular y un breve resumen con el link hacia la historia original y un espacio para que los usuarios comenten la nota. Todo el contenido y acceso al sitio es gratis, pero es

necesario estar registrada/o para poder llevar a cabo ciertas acciones como la promoción de historias, envío y comentarios de las mismas.<br /><br />



3.17.5 Caja buscar

Uno de los elementos que vamos a colocar dentro del lateral es una caja de búsqueda, con un formulario para realizar búsquedas internas, dentro del sitio, y en todo el web.

<html xmlns="http://www.w3.org/1999/xhtml"><head> <title></title> <style type="text/css"> body { background : url(../imagenes/fondo-principal.jpg); /*Imagén de fondo que se repite*/ font : 8pt Verdana, Geneva, Arial, Helvetica, sans-serif; color : #666666; margin : 20px 0px 20px 0px; text-align: center; } #contenedor{ text-align: left; /*Alineación a la izquierda*/ width: 700px; background-color : #ffffff; margin: auto; /*Para que Mozilla y otros centren*/ } #cabecera{ height : 161px; width: 700px; margin: auto; /*Para que Mozilla y otros centren*/ } #navegador{


background : url(../imagenes/cabecera02.png); /*Imagén de fondo*/ padding : 3px 10px 5px 10px; /*superior derecho inferior izquierdo*/ } A.enlacenav, A.enlacenav:VISITED, A.enlacenav:ACTIVE, A.enlacenav:LINK{ color: #494E6B; } A.enlacenav:HOVER{ color: #3F7DE3; } #lateral{ /* Define el area lateral izquierda */ width: 200px; /*Ancho del formulario*/ background-color: #EBF2FE; float: left; /*Importante, envía el formulario a la izquierda*/ } .titlat{ /* Estilos para los titulos de las cajas laterales */ background-color:#68729E; color:#ffffff; font-size:8pt; text-transform : uppercase; padding: 7px 3px 7px 8px; /*superior derecho inferior izquierdo*/ font-weight : normal; letter-spacing : 2px; margin: 0px 0px 8px 0px; } .radio{ /*define que no deben haber elementos "flotando"*/ clear:both; /* ni a la izquierda ni a la derecha, de los botones de radio*/ } input { font-size : 8pt; /*Tamaño de letra para manejar formulario*/ } #campotexto{ /*Ajusta el texto a la izquierda*/ float: left; } #campotexto input{ /*El input que hay dentro de la capa campotexto*/ width:150px; /* debe tener 100 pixels de ancho*/ } #botonbuscar { padding-top : 3px; /*Centra el botón de acuerdo a la caja de texto*/ padding-left: 156px; /*Posiciona el botón al lado de la caja de texto*/ } </style>


</head><body><div id="contenedor">

<div id="cabecera"> <img src="../imagenes/cabecera01.jpg" width="700" height="161" alt="maquetacion" title="maquetacion" />

</div> <div id="navegador">

<a href="#" class="enlacenav">Portada</a> | <a href="#" class="enlacenav">Invierno</a> |

<a href="#" class="enlacenav">Diciembre a marzo</a> | <a href="#" class="enlacenav">La chimenea</a> |

<a href="#" class="enlacenav">Deportes de invierno</a> | <a href="#" class="enlacenav">Contacto</a>

</div> <div id="lateral">

<h2 class="titlat">Buscar</h2> <form action="http://localhost:3333/index.asp" >

<div id="campotexto"><input type="text" name="criterio" /></div> <div id="botonbuscar"><input type="image" src="../imagenes/action_go.gif" /></div>

<div class="radio"><input type="radio" name="op" value="1" /> En la Web del invierno</div> <div class="radio"><input type="radio" name="op" value="2" /> En toda la Web</div>

</form> </div>

Luego el concepto se fue ampliando y evolucionando, dando lugar a los sitios de noticias al estilo web 2.0

donde los usuarios pueden comentar, votar y subir noticias (artículos, post), enviar enlaces por correo a sus conocidos, recibir las actualizaciones mediante RSS y conformar grupos y redes sociales.<br /><br />

Podríamos decir que uno de los pioneros de estos sitios de noticias fue Digg, fundado en diciembre de 2004,

lo que no es tan poco tiempo en términos de Internet. Sin embargo, Slashdot data de 1997.<br /><br />

La novedad de Digg consiste en que las noticias son enviadas por los usuarios para luego ser mostrados en la página principal por medio de un sistema basado en el ranking de usuarios. Esto difiere del sistema

de jerarquías editoriales que emplean otros sitios (incluido este), pues aquí los usuarios son los editores. Es como si en un diario, los lectores votaran las noticias y sólo las que tienen cierta cantidad de votos son

publicadas en tapa.<br /><br />

Los artículos presentados constan de un titular y un breve resumen con el link hacia la historia original y un espacio para que los usuarios comenten la nota. Todo el contenido y acceso al sitio es gratis, pero es

necesario estar registrada/o para poder llevar a cabo ciertas acciones como la promoción de historias, envío y comentarios de las mismas.<br /><br />

</div>

</body></html>


3.18 Tamaños de texto con CSS: buenas prácticasVisualmente en nuestra computadora puede que sea indiferente usar una u otra unidad para asignar el tamaño a los textos, pero hay algunas diferencias entre las distintas unidades que merecería la pena conocer. Nosotros vamos a asumir en este artículo que la mejor manera de asignar tamaño a los textos es cuando:

• El tamaño se define de modo que se pueda ver bien en todos los dispositivos de acceso (que pueden ser un ordenador, con diferentes sistemas operativos o distinto navegador, pero también una agenda electrónica o teléfono móvil)

• Que las fuentes se puedan redimensionar correctamente, para aumentar o reducir su tamaño (lo que es útil para mejorar la accesibilidad a nuestra web por todo tipo de personas)

3.18.1 Tamaño de las fuentes en unidades relativasLa primera regla básica para definir los tamaños de los textos en una web con CSS es utilizar unidades CSS relativas. Las unidades relativas tienen la particularidad que se ajustan mejor a distintos dispositivos, ya que su tamaño real es en función de las características propias de cada sistema.

Por ejemplo, pensemos en la unidad de centímetros, que es una unidad absoluta, porque un centímetro es exactamente igual en España y en China, en una computadora o en un teléfono móvil. Si definimos las unidades en centímetros, puede que para nuestra computadora esté todo correcto, que tiene una pantalla, digamos, de 17 pulgadas, en la que un tamaño de fuente en x centímetros puede ser razonable. Pero ¿qué pasaría con un móvil que tiene una pantalla de 2,5 pulgadas? Quizás esas fuentes que se veían bien en la pantalla del ordenador se vean gigantes en la del móvil. Las unidades relativas son:

• em: 1em equivale al tamaño de fuente que tenga ese dispositivo configurada por defecto.


• ex: que es el tamaño de la letra x, según la fuente por defecto del sistema

• px: que es justamente un pixel de la pantalla.

Por poner un ejemplo, si definimos el tamaño del texto con píxeles, al ver la fuente en el monitor del ordenador, tendrá un tamaño relativo a la definición que el usuario tenga en su pantalla y las dimensiones de la misma. Al ver la fuente en un móvil tampoco habrá problema, aunque quizás los píxeles de esa pantalla puedan ser menores, la letra seguirá viéndose igual de bien definida y ajustada a las características de esa pantalla.

Además de estas unidades relativas, está la posibilidad de usar la unidad de porcentaje, que es relativa al tamaño de la fuente con la que se estaba escribiendo.

3.18.2 Posibilidad de reducir y ampliar el texto de la páginaOtro de los criterios válidos para decidir si una unidad es o no interesante para asignar tamaño a las fuentes es que el texto se pueda ampliar y reducir en la pantalla del ordenador. Como sabemos, los navegadores admiten hacer zoom sobre la página para ver el contenido mayor o menor. Pero ésta no es una utilidad de los navegadores creada simplemente para la comodidad de algunos usuarios, sino más bien es una ayuda necesaria para que cualquier persona con dificultades de lectura o de visión pueda asimilar el texto de las webs.

Así pues, para mejorar la accesibilidad de las páginas web, es ideal que se puedan aumentar o reducir las dimensiones del texto y para ello hay algunas unidades que se comportan mejor que otras.

• Unidades en píxeles: Tienen el problema que, en Internet Explorer, antes de la reciente versión 8, no permitían redimensionarse. Al ser medidas en píxeles, el explorador entendía que siempre tenían que medir lo indicado en las CSS, independientemente del tamaño de fuentes configuradas por el usuario.

• Unidades en em: Son las recomendadas por la W3C. El único problema que podemos tener para utilizarlas es saber cómo convertir los tamaños que conocemos en puntos (pt) a em. La regla es bien simple, pero tenemos que asumir el tamaño de fuentes predeterminado en el entorno del usuario. Lo común es que 1em corresponda con 16pt. Luego, si queremos convertir cualquier pt a em tenemos que dividir por 16, es decir Xpt = X/16em. Por ejemplo 14pt = 14/16em = 0,875em.

• Unidades en porcentaje: Otra posibilidad para ahorrarnos el cálculo constante de unidades em, es asignar un tamaño al cuerpo (etiqueta BODY) en unidades CSS em y luego asignar por porcentaje los tamaños de distintas fuentes, mayores con valores en porcentaje superiores a 100% y menores con tamaños en porcentaje menores que 100%.

Sobre las unidades en em, que serían las más aconsejadas, de nuevo Internet Explorer 6 y 7 dan un problema y es que cuando se reduce la fuente, el tamaño se hace demasiado pequeño. Esto se puede arreglar con un truquillo. Simplemente tenemos que asignar el atributo CSS font-size: 100% a la etiqueta BODY y luego definir con em las fuentes de cualquier otro elemento.

BODY{font-size: 100%;

}.cualquierotroestilo{

font-size: 0.875em;


}

3.19 Técnicas de tipografía con CSSExisten muchos tipos de webs, creadas para infinidad de propósitos, pero en muchos de los casos, el componente más importante es el texto. Unos pequeños cambios en las declaraciones de estilos para alterar la forma como se presenta el texto pueden ser cruciales para que el aspecto de una web pase de ordinario a atractivo, sobre todo, en las webs que se basan en contenido. Pero también es sumamente importante que un texto se pueda leer bien y se ha comprobado que ciertas características de los textos, que podemos definir con CSS, ayudan bastante a aumentar su legibilidad.

3.19.1 Cómo afectan los márgenes e interlineado a la velocidad de lectura y comprensión del texto

Se han realizado diversos estudios acerca del uso de márgenes e interlineado y cómo afectan a la velocidad de lectura y comprensión de los textos. Ambos criterios son deseables a la hora de presentar textos, pero se encuentra que a menudo chocan entre sí, es decir, a medida que aumenta la velocidad de lectura, se pierde un poco de capacidad de comprensión. Por tanto, en principio se entiende que lo más deseable sería que las personas entiendan bien lo que se está escribiendo y en un segundo plano, aunque también importante, estaría que pudieran leer los textos con rapidez.

En el estudio de usabilidad Reading Online Text: A Comparison of Four White Space Layouts se comparan 4 textos formateados de la siguiente manera:

• Con márgenes grandes y espacio entre líneas grandes

• Con márgenes grandes y menor espacio entre líneas

• Con márgenes menores y espacio entre líneas grandes

• Con márgenes menores y menor espacio entre líneas

Se comprobó entre varias personas que la comprensión del texto aumentaba cuando hay más margen y el espacio entre líneas también es mayor. Por lo que respecta a la velocidad de lectura se vio que aumentaba cuando los márgenes y el espacio de interlineado es menor.

En la encuesta se dedujo que las personas prefieren leer textos que tengan espacio en blanco en márgenes y un mayor espacio entre líneas. Un interlineado y márgenes adecuados hacen más fácil leer el texto facilitan su comprensión, sin embargo, si nos pasamos en su uso estaríamos disminuyendo la velocidad con la que las personas pueden revisar nuestro contenido.

3.19.2 Cómo aplicar márgenes e interlineado con CSSLas hojas de estilo en cascada permiten definir las características del texto como los márgenes y el espacio entre líneas, a través de los conocidos atributos margin y line-height. Es importante definir ambos valores con CSS, dado que los márgenes por defecto de la mayoría de los elementos, por lo menos a la izquierda y derecha, son nulos por defecto. Además, el valor de line-height que utilizan los navegadores por defecto suele ser escaso.


Podemos definir estos atributos, o bien para el cuerpo de la página, o bien para los contenedores en los que necesitemos escribir texto que deseamos que sea legible y atractivo.

body{ margin: 20px; line-height: 1.5em; font-size: 0.875em;}

Así hemos definido un margen de 20 píxeles arriba, abajo, a la izquierda y a la derecha del cuerpo de la página. Además un espacio entre líneas de 1,5 veces el tamaño de la letra configurada por defecto. La fuente tendrá un tamaño un poco menor que la fuente configurada por defecto.

div.textolegible{ margin: 10px 20px; font-family: verdana, arial, helvetica; line-height: 18px; font-size: 10px;}

En este caso hemos definido un una class de CSS definida para las etiquetas DIV donde tenemos un margen arriba y abajo de 10 píxeles y a los lados de 20 píxeles. Para el tamaño del texto y el espacio entre líneas hemos optado, por variar, por expresar los tamaños en píxeles.

3.19.3 Otros atributos CSS para mejorar el aspecto estético de los textosAunque los márgenes e interlineado son muy importantes para mejorar el aspecto y aportar mayor legibilidad al texto, existen diversos atributos de estilos que merece la pena conocer y comentar que nos pueden servir especialmente para que el aspecto del texto sea un poco más atractivo.

Espacio entre letras

Con CSS podemos utilizar el atributo letter-spacing para separar o juntar las letras de cualquier texto. Alterar la distancia entre las letras puede ser un recurso estético, pero si nos pasamos puede mermarse la facilidad de lectura, sobre todo en textos largos, por eso es más aconsejable usarlo en los titulares, que suelen ser más cortos. Ojo cuando separamos los caracteres, porque las palabras quedan poco definidas, ya que las letras parece que están sueltas. Un recurso utilizado a menudo con letter-spacing es juntar las letras un poco en los titulares.

h1{ letter-spacing: -1px;}


Espacio entre palabras

El atributo CSS word-spacing permite separar o juntar las palabras contiguas en un texto. No altera la distancia entre caracteres, sino entre las palabras, por lo que no tiene el problema que comentábamos en letter-spacing. Si separamos las palabras crearemos un espacio en blanco entre ellas mayor, lo que puede dar un afecto más ligero al texto y se leerá fácilmente, porque las palabras se leerán como una unidad. Si juntamos las palabras corremos el riesgo que no se puedan identificar bien como una unidad y el efecto tampoco ayudará a la lectura.

body{ word-spacing: 0.25em;}

Transformar el texto entre mayúsculas y minúsculas

El atributo CSS text-transform sirve para cambiar las letras entre mayúsculas y minúsculas. Son permitidos los valores: none (que deja el texto como estaba), capitalize (que pone la primera letra de cada palabra en mayúscula), uppercase, (que pone todo en mayúsculas) y lowercase (que pone todo en minúsculas). De nuevo, resultará más útil para textos cortos que se coloquen en titulares o en encabezamientos de cajas.

h1{ text-transform: uppercase;}

Sangrado de la primera línea

Con el atributo text-indent podemos hacer un sangrado de la primera línea de cada párrafo. No es muy útil para el cuerpo entero, porque te sangraría todos los elementos de la página, pero para textos largos podría servir en algunos casos, porque da un aspecto al texto más de carta.

div.carta{ text-indent: 20px;}

Decorar la primera letra o la primera línea de un párrafo

Otro recurso bastante original y que, bien utilizado, puede quedar atractivo es utilizar los pseudo-elementos de CSS :first-letter y :first-line, con los que podemos asignar estilos diferentes a la primera letra de un párrafo o a la primera línea completa. Algo que, de nuevo, se utiliza bastante en los medios escritos, pero no tanto en la web.

p.parrafodecorado:first-letter { font-size: 300%; font-weight: bold;}


Justificar el texto

Entre los estilos de párrafo, los alineamientos del texto son bastante interesantes. En concreto el atributo text-aling permite varios valores que seguramente conozcamos, como left, rigth y center. Pero hay otro valor, justify, que sirve para alinear la terminación de las líneas a ambos lados del texto, tanto a la izquierda como la derecha. Aunque da un aspecto bastante diferente a la web, se utiliza bastante menos dado que las personas no están acostumbradas a leer texto justificado en la web y realmente no ayuda a aumentar la comprensión del mismo. Pero existe un problema estético, puesto que el justificado queda realmente bien cuando se utilizan columnas más o menos estrechas, pero en estos casos da problemas porque a menudo las palabras quedan muy separadas, cuando se cuentan pocas por línea. Este problema no lo tenemos cuando los textos se colocan en columnas anchas y hay muchas palabras por línea, pero en ese caso visualmente no queda tan atractivo.

Utilizar distintas familias tipográficas

Otro recurso interesante, aunque en este caso más de diseño en general que de hojas de estilo en particular, es jugar con distintos tipos de letra en la página. Por ejemplo, queda bien colocar los titulares con una tipografía y los cuerpos con otra. En este caso incluso nos podemos aventurar a trabajar con fuentes bastante diferentes, lo que dará una marca especial a nuestro sitio. En cualquier caso, no es recomendable utilizar más de 2 familias tipográficas distintas.

Para el desarrollo de pruebas visitar: http://www.typetester.org/

3.20 Bordes redondeados en Firefox 3.5.3<html xmlns="http://www.w3.org/1999/xhtml"><head> <title></title> <style type="text/css"> .demo { background: #009933; width: 180px; -moz-border-radius: 15px; padding: 10px; /*superior derecho inferior izquierdo*/ font-size: .6em; font-family: Verdana } </style></head><body> <div class="demo"> Ya me vuelvo a la montaña<br />


que renegué por ingrata.<br /> La niebla me va llevando<br /> con manos desbaratadas.<br /> Las cascadas me ensordecen<br /> como unos pueblos que claman<br /> y de dormida o despierta,<br /> voy andando entre sus hablas. </div></body></html>

Ahora vamos a detenerlos a explicar un poco como funciona esto, cuando solo colocamos un valor, el mismo se aplicara en todas las esquinas, no obstante podemos declarar cada valor de forma independiente y esto lo hacemos de la siguiente manera:

• moz-border-radius-topleft: Esquina superior izquierda. • moz-border-radius-topright: Esquina superior derecha. • moz-border-radius-bottomleft: Esquina inferior superior izquierda. • moz-border-radius-bottomright: Esquina inferior superior derecha.

También se puede dejar alguna esquina cuadra mientras que las otras son redondeadas.

<html xmlns="http://www.w3.org/1999/xhtml"><head> <title></title> <style type="text/css"> .demo { background: #009933; width: 180px; -moz-border-radius: 15px 55px; padding: 19px; /*superior derecho inferior izquierdo*/ font-size: .6em; font-family: Verdana } </style>


</head><body> <div class="demo"> Ya me vuelvo a la montaña<br /> que renegué por ingrata.<br /> La niebla me va llevando<br /> con manos desbaratadas.<br /> Las cascadas me ensordecen<br /> como unos pueblos que claman<br /> y de dormida o despierta,<br /> voy andando entre sus hablas. </div></body></html>

Observación: Estos efectos no funcionan en Internet Explorer 8

3.21 Bordes redondeados en todos los BrowserLos inconvenientes:

• Se deben diseñar las imagénes a medida

• Funcionan sólo para un color de fondo determinado. Por ejemplo, el siguiente caso sólo funciona con color de fondo blanco.

Con las siguientes imágenes el fondo debe ser blanco


<html xmlns="http://www.w3.org/1999/xhtml"><head> <title></title> <style type="text/css"> .caja { width: 482px; background-image: url("../imagenes/centro.gif"); background-repeat: repeat-y;}

.cajaarriba { background-image: url("../imagenes/arriba.gif"); background-position: top center; background-repeat: no-repeat;}

.cajaabajo { background-image: url("../imagenes/abajo.gif"); background-position: bottom left; background-repeat: no-repeat; padding: 15px 15px 15px 15px; /*superior derecho inferior izquierdo*/} </style></head><body><div class="caja"> <div class="cajaarriba"> <div class="cajaabajo"> Ya me vuelvo a la montaña<br /> que renegué por ingrata.<br /> La niebla me va llevando<br /> con manos desbaratadas.<br /> Las cascadas me ensordecen<br /> como unos pueblos que claman<br /> y de dormida o despierta,<br /> voy andando entre sus hablas. </div> </div></div> </body></html>


En el IE se aprecia

3.22 Formatos de tablasVer: http://icant.co.uk/csstablegallery/index.php?css=101#r101


Capitulo 3-Diseno y Desarrollo de Aplicaciones en La Web 2.0

Documents

Transcript of Capitulo 3-Diseno y Desarrollo de Aplicaciones en La Web 2.0