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

HTML
CSS
Versin 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 pginas....................................................................................................................................................20
1.6 Imgenes..............................................................................................................................................................................23
1.7 Caracteres especiales...........................................................................................................................................................24
1.8 Fondos.................................................................................................................................................................................25
1.9 Formularios..........................................................................................................................................................................28
1.9.1 Controles de texto.......................................................................................................................................................29
1.9.2 Contrasea..................................................................................................................................................................30
1.9.3 Area de texto...............................................................................................................................................................30
1.9.4 Cuadros combinados y cuadros de lista......................................................................................................................31
1.9.5 Casilla de verificacin................................................................................................................................................33
1.9.6 Botones de radio.........................................................................................................................................................34
1.9.7 Botones de envo.........................................................................................................................................................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 tabulacin...............................................................................................................................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 Agrupacin 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 Introduccin.........................................................................................................................................................................66
3.2 Definicin de CSS...............................................................................................................................................................66
3.3 Agrupaciones.......................................................................................................................................................................68
3.3.1 class.............................................................................................................................................................................68
3.3.2 id.................................................................................................................................................................................68
3.4 Notacin de colores en CSS................................................................................................................................................69
3.5 Atributos CSS......................................................................................................................................................................70
3.6 Definicin de estilos............................................................................................................................................................72
3.7 Imgenes..............................................................................................................................................................................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 Imgen en enlace........................................................................................................................................................81
3.10 Unidades y Medidas..........................................................................................................................................................81
Versin 1.1
2 de 145
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 esttico...................................................................................................................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 Mens .............................................................................................................................................................................112
3.14.1 Creacin de men sin imagen.................................................................................................................................112
3.14.2 Creacin de men con imagen................................................................................................................................114
3.14.3 Creacin de men horizontal con lista....................................................................................................................115
3.14.4 Creacin de men vertical con lista........................................................................................................................117
3.14.5 Creacin de men vertical efecto alteral.................................................................................................................118
3.14.6 Rollover con border................................................................................................................................................120
3.15 Recuadro..........................................................................................................................................................................121
3.16 Fotos................................................................................................................................................................................123
3.17 Maquetacin....................................................................................................................................................................126
3.17.1 Fondo......................................................................................................................................................................126
3.17.2 Contenedor principal..............................................................................................................................................127
3.17.3 Cabecera.................................................................................................................................................................128
3.17.4 Barra superior de navegacin.................................................................................................................................130
3.17.5 Caja buscar.............................................................................................................................................................132
3.18 Tamaos de texto con CSS: buenas prcticas.................................................................................................................135
3.18.1 Tamao de las fuentes en unidades relativas..........................................................................................................135
3.18.2 Posibilidad de reducir y ampliar el texto de la pgina............................................................................................136
3.19 Tcnicas de tipografa con CSS.......................................................................................................................................137
3.19.1 Cmo afectan los mrgenes e interlineado a la velocidad de lectura y comprensin del texto..............................137
3.19.2 Cmo aplicar mrgenes e interlineado con CSS.....................................................................................................137
3.19.3 Otros atributos CSS para mejorar el aspecto esttico 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
Versin 1.1
3 de 145
HTML
En 1989 existan dos tcnicas que permitan vincular documentos electrnicos, por un lado los hipervnculos (links) y
por otro lado un poderoso lenguaje de etiquetas denominado SGML. Por entonces un usuario conocedor de ambas
opciones, Tim Berners-Lee fsico nuclear del Centro Europeo para la Investigacin Nuclear da a conocer a la prensa
que estaba trabajando en un sistema que permitir acceder a ficheros en lnea, funcionando sobre redes de
computadoras o mquinas electrnicas 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
ms valioso an, el World Wide Web. En 1991, Tim Berners-Lee crea el primer navegador de HTML que funcionara
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 especificacin formal de HTML+ se le dio, por lo tanto, el nmero de versin 2
para distinguirla de las propuestas no oficiales previas. Los trabajos sobre HTML+ continuaron, pero nunca se
convirti en un estndar, a pesar de ser la base formalmente ms parecida al aspecto compositivo de las
especificaciones actuales.
El borrador del estndar HTML 3.0 fue propuesto por el recin 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 matemticos complejos. Aunque se dise para ser compatible con
HTML 2.0, era demasiado complejo para ser implementado con la tecnologa de la poca y, cuando el borrador del
estndar 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 estndar siguiente fue el HTML 3.2,
que abandonaba la mayora de las nuevas caractersticas del HTML 3.0 y, a cambio, adoptaba muchos elementos
desarrollados inicialmente por los navegadores web Netscape y Mosaic. La posibilidad de trabajar con frmulas
matemticas que se haba propuesto en el HTML 3.0 pas a quedar integrada en un estndar distinto llamado
MathML.
El HTML 4.0 tambin adopt muchos elementos especficos desarrollados inicialmente para un navegador
web concreto, pero al mismo tiempo comenz a limpiar el HTML sealando algunos de ellos como 'desaprobados'.
Versin 1.1
4 de 145
1.1
Trabajo con Visual Studio
Implementar un proyecto web vaco.
Seleccionar:
Sitio web vaco
Ubicacin: Sistemas de archivos
Una ruta de almacenamiento
Lenguaje: Visual Basic
Versin 1.1
5 de 145
Crear un carpeta para incluir vuestro cdigo
1.2
Trabajo con netbeans
Crear un nuevo proyecto
Versin 1.1
6 de 145
Seleccionar el tipo de proyecto a realizar
Seleccionar la carpeta de almacenamiento del proyecto
Versin 1.1
7 de 145
Seleccionar el servidor de aplicaciones
Seleccionar alguno de los framework disponibles
Versin 1.1
8 de 145
Seleccionar la opcin para crear una carpeta
Crear una carpeta
Versin 1.1
9 de 145
Seleccionar la opcin para crear un archivo html
Crear un archivo html
Versin 1.1
10 de 145
Configurar el nuevo inicio de la aplicacin
En la opcin Run configurar la nueva ruta
Versin 1.1
11 de 145
1.3
Estructura de un documento html
El 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 maysculas o minsculas, 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> Ttulo de la pgina </title>
</head>
<body>
[etiquetas que visualizan la pgina]
</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 prrafos dejando una lnea en blanco debemos usar la etiqueta
<P>, (que no tiene su correspondiente etiqueta de cierre </P>). Con este tag no se pueden generar
mltiples lneas 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 nmero 6). El tamao mayor es el correspondiente al nmero 1.
La etiqueta <CENTER> y </CENTER> centra todo lo que est dentro de ella, ya sea texto, imgenes, otros.
Tambin 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 todava es muy

sencilla. como el lenguaje html no es difcil, pronto
estar en condiciones de hacer cosas mas interesantes.
<p> Aqu va un segundo prrafo.
Versin 1.1
12 de 145
</body>
</html>
1.4
Dando forma al texto

Para separar los prrafos, o cualquier otra cosa, pero sin dejar una lnea en blanco, usamos la etiqueta
<BR>. Esta no tiene etiqueta de cierre.
Para obtener 4 lneas en blanco>:

<BR>
<BR>
<BR>
<BR>
Al escribir el texto, si se pone ms de un espacio en blanco entre dos palabras observamos que el
navegador slo reconoce uno de ellos. Si queremos forzarle a que lo haga, debemos poner el cdigo
" "
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 mquina de escribir, con una fuente de espaciado fijo (tipo
Courier). Se respetarn 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 tamao menor y la apariencia de los caracteres de
Versin 1.1
13 de 145
una mquina 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>
cuntos caminos debe un hombre andar
<br>
<br>
<br>
<br>  para que lo tengan por hombre?
<br>cuntos mares debe surcar una blanca paloma
<br>  para poder descansar en la arena?
<br>cunto tiempo seguirn silbando las balas de can
<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>cuntos odos tiene que tener un hombre
<br> para or los lamentos del pueblo? </pre>
<br><tt>cuntas muertes mas tendr que haber
<br> para que sepa que ha muerto demasiada gente? </tt>
<br><blockquote>cuntos aos puede existir una montaa
</body>
</html>
Versin 1.1
14 de 145
En las frmulas matemticas para escribir ndices y subndices, 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 vieta. Su estructura es la siguiente:
<html>
<head>
</head>
<body>
<ul>
<li> una cosa
<li> otra cosa
<li> otra ms
<li> etc.
</ul>
</body>
</html>
Versin 1.1
15 de 145
<html>
<head>
</head>
<body>
<ul>
<li> mamferos
<li> peces
<ul>
<li> sardina
<li> bacalao
</ul>
<li> aves
</ul>
</body>
</html>
Versin 1.1
16 de 145
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 automticamente un nmero
correlativo.
<html>
<head>
</head>
<body>
<ol>
<li> primera cosa
<li> segunda cosa
<li> tercera cosa
<li> etc.
</ol>
</body>
</html>
Al igual que las listas desordenadas, tambin se pueden anidar las listas ordenadas.
El tercer tipo lo forman las listas de definicin. Son apropiadas para glosarios (o definiciones de trminos).
Toda la lista debe ir englobada entre las etiquetas <DL> y </DL> y a diferencia de las dos que hemos visto,
cada rengln de la lista tiene dos partes:
El nombre de la cosa a definir, que se consigue con la etiqueta <DT> (definition term)
La definicin de dicha cosa, que se consigue con la etiqueta <DD> (definition definition).
Versin 1.1
17 de 145
<html>
<head>
</head>
<body>
<dl>
<dt> una cosa a definir
<dd> la definicin de esta cosa
<dt> otra cosa a definir
<dd> la definicin de esta otra cosa
</dl>
</body>
</html>
Versin 1.1
18 de 145
<html>
<head>
</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>
Versin 1.1
19 de 145
1.5
Enlaces con otras pginas
En 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 pgina
XXX se sustituye por #marca (marca puede ser cualquier palabra).
YYY son las palabras que aparecern 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 pgina nuestra
Para enlazar con la pgina 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 pgina nuestra en vez de ir al principio de la pgina,
adonde va por defecto, en ese sitio tenemos que colocar una marca (vase la seccin anterior), y
completar el enlace con la referencia a esa marca.
Si la pgina a la que quiero saltar est, por ejemplo, en el subdirectorio subdir, entonces en la etiqueta
tendra que haber puesto "subdir/mipag2.html".
Y a la inversa, si quiero saltar desde una pgina a otra que est en un directorio anterior, en la etiqueta
tendra que haber puesto "../mipag2.html". Esos dos puntos hace que se dirija al directorio anterior.
Observase que se debe utilizar el smbolo / para indicar los subdirectorios, y no este otro \, que es
propio nicamente de Windows.
Versin 1.1
20 de 145
Considerar los programas

C:\ricardo\html1\2.html
<html>
<head>
</head>
<body>
<h4>poemas, indice autores</h4>
<br><a href="../3.html">vicente balaguet</a>
<br>vctor hugo
<br>vinicius de moraes
</body>
</html>
C:\ricardo\3.html
<html>
<head>
</head>
<body>
<h4>poemas - vicente balaguet</h4>
<br>balada catalana
<br><a href="html1/2.html">regresar a indice de autores</a>
</body>
</html>
Versin 1.1
21 de 145
Enlaces con una pgina fuera de nuestro sistema
Para enlazar con una pgina que est fuera de nuestro sistema es necesario conocer su URL (Uniform
Resource Locator). El URL podra ser, adems de la direccin de una pgina del Web, una direccin de
ftp.
<a href="http://home.netscape.com/"> Pgina inicial de Netscape </a>
Es muy importante copiar estas direcciones correctamente (respetando las maysculas y
minsculas, pues los servidores UNIX s las distinguen).
Enlaces con una direccin de email
Se sustituye XXX por mailto: seguido de la direccin de email. La estructura de la etiqueta es:
<a href="mailto: direccin de email"> Texto del enlace </a>
Es conveniente poner tambin en el texto del enlace la direccin de email.
<html>
<head>
</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>
Versin 1.1
22 de 145
1.6
Imgenes
La etiqueta que nos sirve para incluir imgenes es:

<img src="imagen.gif">
Dentro de la etiqueta se pueden aadir otros comandos, tal como ALT
<img src="imagen.gif" alt="descripcin">
Las imgenes deben estar guardadas en un formato especial como GIF. PNG, otros.
El ttulo de la imagen se puede poner arriba, en medio o abajo del lado de la imagen. Para ello se aade 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 pgina. Segn vimos en el captulo 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 pgina 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>
</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>
Versin 1.1
23 de 145
1.7
Caracteres especiales
Existen algunas limitaciones para escribir el texto. Una de ellas es debido a que las etiquetas se forman como un
comando escrito entre los smbolos "<" y ">". Por tanto, si se quisieran escribir estos caracteres como parte normal
del texto, dara esto lugar a una ambigedad, ya que el programa navegador podra interpretarlos como el comienzo
o final de una etiqueta, en vez de un carcter ms del texto.
Para resolver este problema, existen unos cdigos para Los cdigos de las vocales acentuadas se forman
poder escribir estos caracteres y otros relacionados con comenzando con &, seguido de la vocal en cuestin,
las etiquetas.
seguido de la palabra acute (aguda) y terminando con el
<
<
>
>
&
&
"
"
signo ;
&aacute
&eacute
.
&Aacue
...
Versin 1.1
&ntilde
&Ntilde
&uuml
24 de 145
1.8
&Uuml
&#191
&#161
Fondos
El fondo con un color uniforme se consigue aadiendo el comando bgcolor a la etiqueta <BODY> (situada al
principio del documento), de la siguiente manera:
<body bgcolor="#XXYYZZ">
donde:
XX: es un nmero (hexadecimal) indicativo de la cantidad de color rojo
YY: es un nmero (hexadecimal) indicativo de la cantidad de color verde
ZZ: es un nmero (hexadecimal) indicativo de la cantidad de color azul
Es decir, que en nuestro caso, el nmero menor es el 00 y el mayor el FF. As, por ejemplo, el color rojo es el
#FF0000, porque tiene el mximo de rojo y cero de los otro dos colores.
#FF0000 - Rojo
#00FF00 - Verde
#0000FF - Azul
Para hacer un color ms oscuro, hay que reducir el nmero de su componente, dejando los otros dos
invariables. As, el rojo #FF0000 se puede hacer ms oscuro con #AA0000, o an ms oscuro con #550000.
Para hacer que un color tenga un tono ms suave (ms pastel), se deben variar los otros dos colores
hacindolos ms claros (nmero ms alto), en una cantidad igual. As, podemos convertir el rojo en rosa con
#FF7070.
Versin 1.1
25 de 145
Si no se variasen los colores habituales del texto y de los enlaces (negro y azul, respectivamente), podra 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, aadiendo 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"
>
Versin 1.1
26 de 145
El fondo de una pgina puede ser tambin una imagen, ya sea en formato GIF o JPEG. Esta imagen se repite por
toda la pgina.
<body background="imagen.gif">
<html>
<head>
</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 botn y hacer clic se transforma
a color azul.
Versin 1.1
27 de 145
1.9
Formularios
Permiten que nos enven informacin a nuestro servidor, en donde hemos instalado un programa que procese esta
informacin.
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 botn de envo. De esta manera, podemos tener un programa CGI o un
Servlets para procesar esos datos y pudiramos devolver automticamente al usuario algn tipo de informacin.
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 direccin de correo donde se enviarn los datos.
METHOD
Establece como sern enviados los datos al servidor http.

GET: Los datos son adjuntados al final de la URL asignado luego de un signo de interrogacin
(?). Los datos son enviados en la misma lnea de la URL.
POST: Enva los datos en una lnea por separado.
ENCTYPE
Establece la forma en que los datos sern cifrados antes de ser transmitidos. El valor
predeterminado es application/x-www-form-urlen-coded, lo que significa que:
Espacio convierte +
Carcter no alfanumrico convierte % seguido por los dos dgitos hexadecimales del
carcter.
Adems, 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 desplegarn 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
Son utilizado por JavaScrip o VBScrip.
ONRESET
ACEPPT
ACCEPT-
Establecen los tipos MIME (ACCEPT) y la codificacin de caracteres (ACCEPT-CHARSET) que

debern ser aceptados por el servlet u otro programa que procese datos del formulario.
CHARSET
Versin 1.1
28 de 145
1.9.1 Controles de texto

Genera un campo de captura de una sola lnea donde se capturar texto.
<INPUT TYPE="TEXT" NAME="..." ...>
(no tiene etiqueta de fin)
NAME
Identifica al campo de texto cuando se enva el formulario
VALUE
Establece el contenido inicial del campo de texto. Cuando se enva el

formulario, si el campo de texto est vaco los datos de este slo estarn
formados por el nombre y un signo igual
SIZE
Indica la anchura visible del campo de texto
MAXLENGTH
Da una cantidad mxima de caracteres permitidos
ONCHANGE, ONSELECT,
Utilizados con JavaScript o VBScript
ONFOCUS,
ONBLUR,ONKEYDOWN,
ONKEYPRESS, ONKEYUP
<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>
Versin 1.1
29 de 145
1.9.2
Contrasea
No muestra lo introducido sino que aparece con algn otro carcter (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 texto

Genera un rea de texto de varias lneas
<TEXTAREA NAME="..." ROWS=xxx COLS=yyy>...</TEXTAREA>
Atributos: NAME(necesario), ROWS (necesario), COLS(necesario), WARP (no es estndar), ONCHANGE,
ONSELECT, ONFOCUS, ONBLUR, ONKEYDOWN, ONKEYPRESS, ONKEYUP.
NAME
establece el nombre que ser enviado al servidor
ROWS
Indica la cantidad de lneas visibles de texto. Si se teclea ms lneas, 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
Especfico de Nescape, indica que hacer con las lneas que son mayores que el
tamao indicado por cols
ONCHANGE, ONSELECT,
ONFOCUS,
ONBLUR,ONKEYDOWN,
ONKEYPRESS, ONKEYUP
<html>
<head>
</head>
Versin 1.1
30 de 145
<body>
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 enva el formulario al servlet o programa CGI. La combinacin

de nombre y valor se enva slo si hay algn elemento de la lista seleccionado al momento
de remitir el formulario
SIZE
Devuelve la cantidad de lneas visibles
MULTIPLE
Establece que pueden elegirse varios elementos de forma simultanea. Si se omite, slo
puede elegirse uno a la vez
ONCLICK,
Se usan en JavaScript y VBScript
ONFOCUS,
ONBLUR,
ONCHANGE
Versin 1.1
31 de 145
<html>
<head>
</head>
<body>
<form action="mailto:direccin_de_email" method="post" enctype="text/plain">
cul 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>
</head>
<body>
cul es tu color preferido?
<br /><select name="colorpreferido" size="3" multiple="multiple">
<option>rojo</option>
<option>verde</option>
<option>azul</option>
<option>amarillo</option>
Versin 1.1
32 de 145
</select >
</form>
</body>
</html>
1.9.5 Casilla de verificacin

Puede 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 envan al servidor si la casilla de verificacin est seleccionada

cuando se enva el formulario. Este atributo es opcional y se determina en on
CHECKED
Si selecciona, entonces la casilla de verificacin se selecciona inicialmente cuando se carga

la pgina Web
ONCLICK,
Uso con JavaScript o VBScript
ONFOCUS,
ONBLUR
<html>
<head>
</head>
<body>
<form action="rgarces@dgac.cl" method="post" enctype="text/plain">
Versin 1.1
33 de 145
<input type="checkbox" name="lista1">

deportes
<input type="checkbox" name="lista2">
entretencion
</form>
</body>
</html>
1.9.6 Botones de radio

Se elige una nica opcin 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

lgiamente de modo que no ,ms de uno pueda seleccionarse a la vez
VALUE
Establece el valor que ser transmnitido con el NAME cuando se enve el formualrio
CHECKED
Si se establece este atributo, entonces el botn de radio se selecciona incialmengte

cuando se cargha la pgina Web asociada
ONCLICK,
Uso con JavaScript o VBScript
ONFOCUS,
ONBLUR
<html>
<head>
</head>
<body>
Versin 1.1
34 de 145

cul 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
</form>
</body>
</html>
1.9.7 Botones de envo

Cuando se hace clic en un botn de envo, el formulario se enva al servlet u programa CGI en el servidor designado
por el parmetro ACTION de FORM.
<INPUT TYPE="SUBMIT" ...>
Atributos: NAME, VALUE, ONCLICK, ONDBCLICLK, ONFOCUS, ONBLUR.
NAME
Asocian un nombre y un valor al botn de envo
VALUE
ONCLICK,
ONDBCLICLK,
ONFOCUS,
ONBLUR
<html>
<head>
</head>
Versin 1.1
35 de 145
<body>
escribe tu apellido:
<br><input type="text" name="apellido">
<p><input type="submit" value="enviar datos">
</form>
</body>
</html>
Si necesita generar botones con texto HTML arbitrario como contenido del botn, 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>
</head>
<body>
<center>
<button type="submit">
"etiqueta de una sola línea"
</button>

"etiqueta de dos<br>
líneas"
</button>
<p>
Versin 1.1
36 de 145
<b>etiqueta</b> con <i>cambios</i> a la fuente.
</button>
<p>
<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
enva el formulario, no tiene un nombre en el HTML estndar. Sin embargo, JavaScript y VBScrip permiten que se
use un nombre para simplificar la referencia al elemento.
VALUE: Establece el texto del botn; "Restablecer" es el predeterminado.
ONCLICK, ONDBCLICLK, ONFOCUS, ONBLUR: Utilizados con JavaScript o VBScript.
Versin 1.1
37 de 145
Si necesita generar botones con texto HTML arbitrario como contenido del botn, entonces se debe utilizar el
formato:
<BUTTON TYPE="RESET" ...> Cdigo HTML </BUTTON>
Otro botn interesante es el de borrado de los datos introducidos, muy conveniente en un formulario con muchos
elementos. Es muy similar al de envo, pues se consigue con la etiqueta:
<INPUT TYPE="reset" VALUE="zzz">
En donde zzz es el texto que queremos que aparezca en el botn.
1.9.9 Controles para la transferencia de archivos

Este elemento da como resultado un campo de texto para un nombre de archivo junto con un botn examinar.
Cuando se enva el formulario, el contenido del archivo se transmite si se estableci un ENCTYPE de multipart/formdata en la declaracin inicial del FORM.
<INPUT TYPE="FILE" ...>
Atributos: NAME(necesario), VALUE(ignorado), SIZE, MAXLENGTH, ACCEPT, ONCHANGE, ONSELECT,
ONFOCUS, ONBLUR(fuera del estndar).
NAME
Identifica el campo de texto cuando se enva el formulario
VALUE
Por razones de seguridad se ignora este atributo
SIZE
Se utilizan de la misma forma que en los campos de texto, donde se establece la cantidad de
MAXLENGTH
caracteres visibles y mximos permitidos.
ACCEPT
Tiene la intencin de ser una lista separada por comas de tipos MIME utilizados para restringir
los nombres de archivos disponibles
ONCHANGE,
Utilizado con JavaScript y VBScript
ONSELECT,
ONFOCUS,
ONBLUR
<html>
<head>
</head>
Versin 1.1
38 de 145
<body>
<form action="rgarces@dgac.cl" method="post" enctype="multipart/form-data">
indique la ruta del archivo:
<input type="file" name="nombrearchivo">
</form>
</body>
</html>
1.9.10
Campos ocultos
No afectan la apariencia de la pgina que se presenta al usuario. En vez de ello, almacenan nombres fijos y valores
que se envan sin cambios al servidor.
<INPUT TYPE="HIDDEN" NAME="..." VALUE="...">
Atributos: VALUE(necesario), VALUE
1.9.11
Agrupar controles
HTML 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, vlido slo dentro de un FIELDSET, coloca una etiqueta en el borde que circunda al grupo de
controles.
Versin 1.1
39 de 145
ALIGN
Controla la posicin de la etiqueta. Los valores permitidos son TOP, BOTTON, LEFT y RIGTH, donde
TOP es el predeterminado
<html>
<head>
</head>
<body>
<form action="rgarces@dgac.cl">
<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 tabulacin
HTML define un atributo TABINDEX que puede ser utilizado en cualquier elemento visual HTML.
<html>
<head>
Versin 1.1
40 de 145

</head>
<body>
<form action="rgarces@dgac.cl">
campo 1<input type="text" name="campo1" tabindex=1><br>
</form>
</body>
</html>
1.10 Frames
Los Frames estn 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 caractersticas ms importantes es que pulsando un enlace situado
en un frame, se puede cargar en otro frame una pgina determinada. De esta manera, se facilita la navegacin
entre las pginas, 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 cuntas zonas va a haber, qu distribucin y
tamao van a tener, y cul va ser el contenido de cada una de ellas. En el ejemplo, la pgina 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 pgina de presentacin
(mipagpre.html).
Versin 1.1
41 de 145
<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 slo tenemos dos frames, pero podra haber ms, 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 ingls: 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 definicin 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. Adems, capturamos la imagen y la guardamos junto
con el documento.
mipagpre1.html
<html>
<head>
<title> presentacion </title>
</head>
<body bgcolor="#000000" text="#0000ff">
<center>
Versin 1.1
42 de 145
<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>
Versin 1.1
43 de 145
Se puede comprobar cmo cambiamos de pgina en el frame de la derecha, segn el enlace que pulsemos en el
frame de la izquierda.
Versin 1.1
44 de 145
Atributos de la etiqueta <FRAMESET>

La etiqueta FRAMESET, como hemos visto en el ejemplo, es la que define la distribucin, el nmero y tamao de los
frames. Tiene dos atributos: COLS (columnas) y ROWS (filas):
<FRAMESET COLS="xx, yy, zz, ..">
<FRAMESET ROWS="xx, yy, zz, ..">
Define la distribucin de los frames en columnas o en filas, segn se use uno u otro atributo.
Define el nmero 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 tamao de los frames, segn 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 nmero absoluto que representa el nmero de pixels que ocupar cada frame a lo ancho o a lo alto
(segn sean filas o columnas). Es peligroso utilizar slo valores absolutos, pues el tamao de la pantalla
vara de un usuario a otro.
Un valor relativo que se consigue poniendo un asterisco (*), en vez de un nmero. 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 ms de un frame con asterisco, ese espacio restante se dividir por igual entre ellos.
Si hay un nmero antes del asterisco, ese frame obtiene esa cantidad ms de espacio relativo. As "2*,*"
dara dos tercios para el primer frame y un tercio para el otro.
Frames sin bordes

Si se desea que no haya un borde de separacin entre los frames, se deben incluir el atributo FRAMEBORDER=0
dentro de la etiqueta FRAMESET.
Para que tambin desaparezcan los huecos de separacin entre frames hay que aadir 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 quedara:
<FRAMESET FRAMEBORDER=0 FRAMESPACING=0 border=0 COLS="xx, yy">
Versin 1.1
45 de 145
Atributos de la etiqueta <FRAME>

Esta etiqueta define las caractersticas 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="direccin". Esta direccin 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 vaco, 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 carcter alfanumrico (una letra o un nmero, pero no otro tipo de smbolo).
MARGINWIDTH="nmero". Se utiliza este atributo cuando se quiere controlar el ancho de los mrgenes
dentro de un frame. El nmero que se ponga representa los pixels de los mrgenes. Este atributo es
opcional.
MARGINHEIGHT="nmero". Igual que el anterior, pero referido a los mrgenes 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 numrico, como a los dems. Es un indicador para que
la ventana no se pueda re-dimensionar (en ingls, 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, tambin hay que ponrselo 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 queramos que los enlaces situados en el frame de la izquierda surtieran
efecto no en l mismo, sino en otro frame, tenamos que poner dentro de cada enlace el atributo
TARGET="principal", siendo "principal" el nombre que habamos dado al segundo frame, en el documento de
definicin 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 condicin que el primer carcter
sea alfanumrico (letra o nmero).
Versin 1.1
46 de 145
Pero hay unos nombres reservados (es decir, que no se pueden usar para denominar a un frame), que hacen que
este atributo efecte unas funciones especiales. Para que cumplan su cometido, es imprescindible escribir estas
palabras reservadas (blank, self y top) en minsculas.
TARGET="_blank". Hace que se abra una nueva copia del navegador, y el enlace activado se carga en ella,
a pantalla completa. Es decir, tendramos 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 comn es
olvidarse de poner este atributo en los enlaces que estn en un frame, con lo que resulta que al ser
activados, la pgina llamada se carga dentro del propio frame, lo cual es muy molesto si esa pgina
pertenece a otro sitio del Web, y an ms grave si esa pgina 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 slo la posibilidad de tener una distribucin 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 ms complejas anidando filas dentro de una columna, o a la inversa,
columnas dentro de una fila.
Supongamos que queremos la siguiente distribucin:
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 distribucin:
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.
Versin 1.1
47 de 145
El documento de definicin de las dos filas (olvidmonos de momento que la de abajo est subdividida), sera:
<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 distribucin 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 Tablas
1. La etiqueta general, que engloba a todas las dems es <table> y </table>. Es decir:
<table> [resto de las etiquetas] </table>
2. En el siguiente nivel, dentro de la anterior, estn 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, sera:
<tr>
[etiquetas de las distintas celdas de la primera fila]
</tr>
Versin 1.1
48 de 145
<tr>
[etiquetas de las distintas celdas de la segunda fila]
</tr>
3. En el ltimo nivel (dentro de las anteriores) estn las etiquetas de cada celda, que son <td> y </td>, que
engloban el contenido de cada celda concreta (texto, imgenes, 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 posicin 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>
</tr>
</table>
</body>
</html>
Versin 1.1
49 de 145
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=nmero deseado>
Adems, 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>
</tr>
<tr>
</tr>
</table>
</body>
</html>
Dentro de las celdas se puede poner cualquier como imgenes, enlaces, etc. No hay ms 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">pgina principal </a></td>
</tr>
</table>
Versin 1.1
50 de 145
Normalmente, el contenido de una celda est alineado a la izquierda. Pero se puede cambiar esto aadiendo 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. Tambin se puede cambiar, aadiendo 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 tamao total de la tabla de acuerdo con el nmero 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 aadiendo dentro de la etiqueta de la tabla los
atributos WIDTH y HEIGHT igual a un porcentaje de la dimensin de la pantalla, o a una cifra que equivale al
nmero 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=nmero para extenderse sobre un nmero determinado de columnas, o ROWSPAN=nmero para
extenderse verticalmente sobre un nmero determinado de filas.
Por ejemplo, en la tabla vamos a aadir 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>
Versin 1.1
51 de 145
<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 anlogo al
empleado para que una pgina tenga un color de fondo uniforme. Para ello debemos utilizar el atributo
bgcolor="#XXYYZZ", visto en dicho captulo.
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 slo 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 slo 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>
Versin 1.1
52 de 145
</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 cuestin.
<table border bgcolor="#FF0000">
<tr>
<td bgcolor="#00FF00">fila1-celda1</td>
<td>fila1-celda2</td></tr>
</table>
Para colocar imgenes 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 cuestin se multiplicar detrs de todas las celdas.
Por defecto, la separacin 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 separacin de 20
pixels entre celdas ponemos:
<table border cellspacing=20>
Por defecto, la separacin 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 separacin 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. Adems 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>
Versin 1.1
53 de 145
<img src="main_ringtone_remixer.jpg" alt="java aqu"></td>

</tr>
</table>
</body>
</html>
Se puede definir una tabla dentro de otra tabla (o ms especficamente, dentro de una celda)
<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>
Versin 1.1
54 de 145
</table>
</td>
</tr>
<tr align='center'>
<td>
3
</td>
</tr>
</table>
</body>
</html>
1.12 iframe
Sirve para crear un espacio dentro de la pgina donde se puede incrustar otra web. Es un cuadrado cuyas
dimensiones debe especificar el desarrollador en la propia etiqueta iframe, que tiene asociada una pgina web que
se carga en dicho espacio. Esa pgina web tendr sus propios contenidos y estilos, independientes del contexto
donde se est mostrando. Adems ser perfectamente funcional: si tiene enlaces se mostrarn en ese mismo
espacio y si tiene scripts o aplicaciones dentro se ejecutarn tambin de manera autnoma en el espacio reservado
al iframe.
Iframe se utiliza en muchos contextos. Dentro de un iframe podemos mostrar contenidos de otras pginas, como si
estuvieran en la nuestra, por lo que sirven para ejemplos como:
Cdigos 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 autnoma y el procesamiento est
en otra pgina 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>
Versin 1.1
55 de 145
.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 slo se mostrar en caso que el navegador del
visitante no acepte la etiqueta iframe
src
Para indicar la pgina 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 indicara 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 slo cuando son necesarias (es el valor por defecto)
marginwidth
Para definir el margen a izquierda y derechar que debe tener la pgina que va dentro del iframe,
con respecto al borde. Este margen va en pixels, pero prevalecer el margen que pueda tener
asignada la pgina web que mostremos en el frame flotante.
marginheight
lo mismo que marginwidth, pero en este caso para el tamao del margen por la parte de arriba y
abajo.
margin
para especificar alineacin del frame, igual que se especifica para las imgenes.
style y class
los atributos para definir el aspecto del iframe por medio de hojas de estilo css
Ejemplo: Considerar la siguiente estructura
Versin 1.1
56 de 145
pagina01.htm
<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
<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 actualizacin del sistema operativo que estar disponible
tambin 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>
Versin 1.1
57 de 145
</body>
</html>
1.13 Object
La etiqueta <object> puede utilizarse para insertar diferentes objetos dentro de la pgina, como pueden ser archivos
de audio, archivos de vdeo, imgenes, etc.
1.13.1
Flash
En el siguiente ejemplo se inserta una pelcula flash en una pgina 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 animacin Flash, el

atributo
classid
debe
valer
clsid:D27CDB6E-AE6D-11cf-96B8-
444553540000.
codebase
Se especifica la direccin en la que se encuentran los componentes

externos necesarios para reproducir la animacin.
width
Ancho del elemento.
height
Alto del elemento
Versin 1.1
58 de 145
(*) Notar que los valores de witch y height ajustan la

posicin del elemento dependiendo de estos valores
pero tambin del tamao del elemento
<param>: name y value.
El atributo name indica el nombre de la caracterstica que va a ser

definida, y value indica su valor.
width="680" height="110"
width="680" height="400"
<param
Especifica el tipo de proceso movie y el lugar el donde est
name="movie"
almacenado el archivo
value="../flash/final_azeta.swf" />
<param
Especifica el tipo de proceso quality y la calidad. Puede valer
name="quality"
high (alta),
value="high">
autolow (baja automtica), o
low (baja).
Versin 1.1
59 de 145
Las animaciones Flash se reproducen de forma automtica al cargarse la pgina, y su reproduccin es continua.
Para hacer que una animacin no se reproduzca automticamente, habr que indicarlo mediante el atributo
play, false. Tambin habr que insertar la lnea <param name="play" value="false">.
Lo mismo ocurre para hacer que la reproduccin 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>
Versin 1.1
60 de 145
1.13.2
PDF
<object data="../pdf/Diseo 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/Diseo y desarrollo de aplicaciones en la web 2.0.doc"
width="800"
height="600">
</object>
1.13.4
Excel
object type="application/vnd.ms-excel"
data="../xls/Planificacin-Web 2.0.xls"
width="800"
height="600">
</object>
Versin 1.1
61 de 145
1.13.5
PPT
<object type="application/vnd.ms-powerpoint"
data="../ppt/edublogs_tiscar_lara.ppt"
width="800"
height="600">
</object>
1.13.6
mpg
En este caso se requiere la declaracin 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>
Versin 1.1
62 de 145
1.14 Agrupacin de elementos

Los elementos <span> y <div> se usan para agrupar y estructurar un documento, y se usarn, a menudo, junto con
los atributos class e id.
1.14.1
span
El elemento <span> es lo que se podra denominar un elemento neutro que no aade nada al documento en s. Pero
con CSS <span> se puede usar para aadir caractersticas visuales distintivas a partes especficas 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 ms
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>
Versin 1.1
63 de 145
XHTML
XHTML es una "reformulacin de los tipos de documento definidos por HTML 4, pero como aplicaciones de XML".
Se sinti que era necesaria una versin ms estricta de HTML principalmente porque el contenido de la
World Wide Web ahora puede visualizarse desde numerosos dispositivos (como telfonos mviles) aparte de las
computadoras de escritorio tradicionales, donde no se contara con los recursos necesarios para afrontar la
complejidad de la sintaxis del HTML. Sin embargo, en la prctica, fueron apareciendo navegadores para dispositivos
mviles que pueden manejar documentos HTML comunes, antes que XHTML sea adoptado por los navegadores
principales.
Las diferencias entre HTML y la primera generacin de XHTML (es decir, XHTML 1.x) son menores ya que,
principalmente, estn destinados a conseguir la conformidad con XML. El cambio ms importante es el requisito de
que el documento est bien formado y que todas las etiquetas estn explcitamente cerradas, como se requiere en
XML. Como las etiquetas en XML distinguen entre maysculas y minsculas (case-sensitive), la recomendacin
XHTML ha definido todos los nombres de etiqueta en minsculas. Lo cual est en contraste directo con las
tradiciones extendidas en el tiempo de HTML 2.0, cuando mucha gente prefera las maysculas para estos casos,
normalmente para mostrar ms fcilmente el contraste de stas con el contenido. En XHTML, los valores de los
atributos deben encerrarse entre comillas (siempre comillas "dobles"). Al contrario ocurra en SGML y por
consecuencia en HTML, donde las comillas podan omitirse en algunos casos. Todos los elementos han de ser
explcitamente cerrados, incluyendo elementos vacos como pueden ser img o br. Esto puede hacerse aadiendo
una barra a la etiqueta: <img /> y <br />. La minimizacin de atributos (como <option selected>) est tambin
prohibida; en lugar de eso, se usa <option selected="selected">. Hay ms diferencias detalladas en la
recomendacin 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 XHTML
La 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 aplicacin SGML a ser una aplicacin del ms estricto XML:
Los elementos vacos deben cerrarse siempre:
Incorrecto: <br>
Correcto: <br></br> o <br/> o <br />
Nota: Cualquiera de las tres formas es vlida en XHTML. Para compatibilidad segn el "Apndice C" debe
usarse <br />.
Los elementos no vacos tambin deben cerrarse siempre:
Versin 1.1
64 de 145
Incorrecto: <p>Primer prrafo<p>Segundo prrafo
Correcto: <p>Primer prrafo</p><p>Segundo prrafo</p>
Los elementos anidados deben tener un correcto orden de apertura/cierre (el que se abre ltimo, debe
cerrarse primero).
2.2
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 minsculas.
Incorrecto: <A HREF="http://www.domname.com">Domname</A>
Correcto: <a href="http://www.domname.com">Domname</a>
No est permitida la minimizacin 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>
Normas
Norma nmero 1: Hay que hacer una declaracin del tipo de documento (doctype)
En HTML tambin 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 declaracin:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/tr/xhtml1/DTD/xhtml1-transitional.dtd">
Norma nmero 2: La etiqueta <html> debe llevar el namespace declarado en el atributo xmlns.
El siguiente texto:
Norma nmero 3: Todas las etiquetas (exceptuando la declaracin, norma 1) y sus atributos, tienen que escribirse
Versin 1.1
65 de 145
con letras minsculas.
En HTML se pueden escribir con maysculas o minsculas. En XHTML todas deben ser minsculas.
Norma nmero 4: La etiqueta <head> (y por supuesto la <body>) son absolutamente obligatorias.
En HTML si no ponamos la <head> no pasaba nada...
Norma nmero 5: La anidacin de las etiquetas y sus cierres debe hacerse respetando las simetras
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 nmero 6: Todas las etiquetas (todas) se deben cerrar.
En HTML, por ejemplo, la etiqueta <p> era opcional que se cerrase. Aqu es obligatorio.
Haba 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 inclusin 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
separacin antes de la barra de cierre.
Lo anterior es vlido para todas las etiquetas similares. Includo las etiquetas <meta> de la <head>.
Norma nmero 7: Todos los valores de los atributos deben entrecomillarse.
En HTML era opcional.
Por ejemplo <table border=2> que se permita en HTML, pasara a escribirse obligatoriamente <table
border="2">
Versin 1.1
66 de 145
3.1
CSS
Introduccin
Las hojas de Estilo en cascada (Cascading Style Sheets, CSS) son usadas para definir la presentacin de un
documento estructurado escrito en HTML o XML (y por extensin en XHTML). El W3C (World Wide Web
Consortium) es el encargado de formular la especificacin de las hojas de estilo que servirn de estndar para los
agentes de usuario o navegadores.
La informacin 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 pequeas diferencias de
implementacin segn marcas y versiones de los navegadores.
3.2
Definicin de CSS
Para definir CSS tenemos tres casos:

1) Definicin de CSS en archivos externos
Cualquier cambio de estilo que se realiza en esta hoja de estilo externa se refleja en todas las pginas 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 pgina html01.htm se tiene:
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="../css/estilos01.css" />
</head>
Versin 1.1
67 de 145
2) Definicin de CSS globales

Cualquier cambio de estilo que se realiza en una pgina Web se refleja slo en esa pgina Web en donde
se ha definido el estilo. Se debe usar la etiqueta <style>, por ejemplo:
<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 pgina global tiene
prioridad sobre el estilo declarado en la hoja de estilo externa
3) Definicin de un estilo sobre un elemento particular

Cualquier cambio de estilo que se realiza en el elemento particular se refleja slo en el elemento particular
que ha definido el estilo. Se debe usar la etiqueta <style>, por ejemplo:
<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 pgina
Web, el estilo del elemento particular tiene prioridad tanto los otros.
Observacin:
Los comentarios se definen:
/* Este es un
comentario CSS de varias
lineas */
Versin 1.1
68 de 145
3.3
Agrupaciones
A veces se encesita aplicar un estilo especial a un elemento concreto o a un grupo concreto de elementos. Cmo
se puede dar color a un ttulo concreto de forma diferente a los otros ttulos de tu sitio web? Cmo se pueden
agrupar los enlaces en diferentes categoras y dar a cada categora un estilo especial?
3.3.1 class
Nos permite asignar estilos al documento
<p class="cita">En en lugar de la mancha ...</p>
Slo nos queda definir este nuevo estilo como una regla ms de nuestro documento CSS:
.cita {
font-weight: bold;
color: red;
}
El punto inicial (.) es necesario para mantener la definicin 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 id
En cierta forma, el atributo ID es igual que CLASS. Diferencias:
La definicin de los estilos de tipo ID, estn precedidas por el carcter #, 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 slo puede usarse en un elemento. Debe ser nico.
Una de las principales recomendaciones del diseo de pginas 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 semntica del documento, es decir, para aadir significado a cada elemento de la pgina.
Por este motivo, se recomienda que los valores asignados a id y class indiquen la funcin del elemento y no
estn relacionados con su aspecto o su posicin:
Versin 1.1
69 de 145
3.4
Notacin de colores en CSS
Se tienen las siguientes formas para definir colores:

1) Notacin hexadecimal RGB
Esta notacin se especifican los tres valores de color (rojo, verde y azul) con valores en hexadecimal entre
00 y FF.
background-color: #ff8800;
2) Notacin hexadecimal abreviada

Esta notacin es muy parecida a la anterior, pero permite abreviar un poco la declaracin del color,
indicando slo un nmero para cada valor rojo, verde y azul. Por ejemplo, para especificar el color de antes
(#ff8800) podramos haber escrito:
background-color: #f80;
3) Nombre del color

Tambin podemos definir un color por su nombre. Los nombres de colores son en ingls, los mismos que
sirven para especificar colores con HTML.
color: red;
border-color: Lime;
4) Notacin de color con porcentajes de RGB

Se puede definir un color por los distintos porcentajes de valores RGB. Si todos los valores estn al 100%
el color es blanco. Si todos estn al 0% obtendramos el negro y con combinaciones de distintos
porcentajes de RGB obtendramos cualquier matiz de color.
color: rgb(33%, 0%, 0%);
5) Notacin por valores decimales de RGB, de 0 a 255

De una manera similar a la notacin 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
Especfica que el elemento debe tener el mismo color que el fondo donde est. Este valor, transparent,
sustituye al color. Podemos indicarlo en principio slo para fondos de elementos, es decir, para el atributo
background-color.
background-color: transparent;
Versin 1.1
70 de 145
3.5
Atributos CSS
Versin 1.1
71 de 145
Versin 1.1
72 de 145
Definicin de estilos
3.6
Para 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,
ponindole como valor el nombre de la clase, de esta forma:
<ETIQUETA class="nombre_de_la_clase">
Como ejemplo se puede tener:

<head>
<title></title>
.fondonegroletrasblancas
{
background-color:black;
Versin 1.1
73 de 145
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 ttulos de seccin h1, h2 y h3 comparten los mismos estilos.
Versin 1.1
74 de 145
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 especficas de esos mismos elementos. El siguiente ejemplo
establece en primer lugar las propiedades comunes de los ttulos de seccin (color y tipo de letra) y a continuacin,
establece el tamao 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; }
Imgenes
3.7
3.7.1 Ancho - Alto

Utilizando las propiedades width y height, es posible mostrar las imgenes con cualquier altura/anchura,
independientemente de su altura/anchura real:
<head>
<title>Imagen</title>
#imagen1 {
width: 204px;
height: 200px;
}
#imagen2 {
width: 104px;
height: 400px;
}
#imagen3 {
width: 608px;
height: 200px;
}
</style>
</head>
<body>
Versin 1.1
75 de 145
<img id="imagen1"
src="../imagenes/anillo.jpg"
title="Imagen 1"
alt="Imagen 1" />
<img id="imagen2"
title="Imagen 2"
alt="Imagen 2" />
<img id="imagen3"
title="Imagen 3"
alt="Imagen 3" />
</body>
</html>
Observar la deformacin de la foto respecto a su tamao original y la prdida de calidad
Para no perder el control de las etiquetas CSS una solucin, que no respeta la separacin completa entre
contenidos (XHTML) y presentacin (CSS), es que se recomienda establecer la altura/ anchura de las imgenes
mediante los atributos width y height de la etiqueta <img>:
<img src="imagen.png" width="120" height="250" />
3.7.2 Borde
Por ejemplo, para eliminar el borde de una imagen
Versin 1.1
76 de 145
img {
border: none;
}
Manejo de borde de la imagen

<head>
<title>Imagen</title>
#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"
title="Imagen 1"
alt="Imagen 1" />
<img id="imagen2"
title="Imagen 2"
alt="Imagen 2" />
</body>
</html>
3.8
Selector descendente
Selecciona 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 continuacin:
elemento1 elemento2 elemento3 ... elementoN
Los selectores descendentes siempre estn formados por dos o ms 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.
Versin 1.1
77 de 145
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>.
Observacin: No debe confundirse el selector descendente con la combinacin de selectores:
/* El estilo se aplica a todos los elementos "p", "a", "span" y "em" */
p, a, span, em {
}
/* El estilo se aplica solo a los elementos "em" que se encuentran dentro de "p a span" */
p a span em {
}
Por ejemplo:
<head>
<title></title>
p span
{
color: Red;
}
</style>
</head>
<body>
<p>
<span>texto1</span>
<a href="">texto2<span>texto3</span></a>
texto4
</p>
texto5
</body>
</html>
Versin 1.1
78 de 145
Estilos de enlaces
3.9
Una tcnica muy habitual, que se puede realizar utilizando CSS y no se poda en HTML, es la definicin de estilos
en los enlaces, quitndoles el subrayado o hacer enlaces en la misma pgina 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 declaracin de estilos global de la pgina (<STYLE>) o del sitio
(definicin en un archivo externo):
Enlaces normales: aplica estilos a los enlaces que apuntan a pginas o recursos que an no han sido
visitados por el usuario
A: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 automticamente cada cierto tiempo y el usuario
tambin puede borrarlo manualmente.
A:visited
{
atributos
}
Enlaces activos: aplica estilos al enlace sobre el que el usuario ha posicionado el puntero del ratn.
A:active
{
atributos
}
Enlaces hover: aplica estilos al enlace que est pinchando el usuario. Los estilos slo se aplican desde que
el usuario pincha el botn del ratn hasta que lo suelta, por lo que suelen ser unas pocas dcimas de
segundo
A:hover
{
atributos
}
Considerar que el atributo para definir enlaces sin subrayado es text-decoration: none, y para darles color es color :
tu_color
<head>
<title></title>
A:link {text-decoration:none;color:green;} /*Sin subrayado y color inicial, al inicio */
A:visited {text-decoration:none;color:blue;} /*Despus que se hace clic en el elemento*/
A:active {text-decoration:none;color:Black;}/*Al ubicarse sobre el elemento con el mouse presionado*/
Versin 1.1
79 de 145
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
pgina 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.
Versin 1.1
80 de 145
Se ha visitado el primer enlace y se ha vuelto a la pgina
Se ha visitado el segundo enlace y se ha vuelto a la pgina
Observacin: 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 {
...
}
Versin 1.1
81 de 145
3.9.1 Imgen en enlace

Puede resultar til incluir un pequeo 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 pequeo icono a su lado
<head>
<title></title>
.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 Medidas

Hay dos tipos de unidades: absolutas y relativas.
Unidades absolutas:
pulgadas (in). Una pulgada=2.54 cm.
Versin 1.1
82 de 145
centmetros (cm).
milmetros (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 prrafo
especificamos un indentado de 2em, el largo de la sangra ser igual a dos veces el tamao de la letra de ese
prrafo. Cuando empleamos la unidad de medida 'em' para especificar el tamao de la letra (font-size) entonces el
valor de 'em' viene dado por el tamao de la fuente del elemento padre.
Este ejemplo equivale a un indentado de 22 px para el prrafo a que se aplica
p{
font-size:11px;
text-indent: 2em;
}
Observacin: Por ejemplo, la unidad absoluta 'pixel' tiene un valor diferente dependiendo de la resolucin 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 tamao del punto depende de la resolucin de la pantalla del usuario. Esta es la razn por la que se
recomienda el uso de unidades de medida 'relativas', y dentro de estas, el uso de 'em'.
3.11 Modelo de caja

El modelo de cajas o "box model" es seguramente la caracterstica ms importante del lenguaje de hojas de estilos
CSS, ya que condiciona el diseo de todas las pginas web. El "box model" es el comportamiento de CSS que hace
que todos los elementos incluidos en una pgina HTML se representen mediante cajas rectangulares. CSS permite
controlar el aspecto de todas las cajas.
El diseo de cualquier pgina 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.
Adems, CSS permite controlar la forma en la que se visualizan las cajas: se pueden ocultar, desplazar respecto de
su posicin original y fijarlas en una posicin especfica dentro del documento. Como la mayora de cajas de las
pginas web no muestran ningn color de fondo ni ningn borde, no son visibles a simple vista.
Las cajas de una pgina se crean automticamente. Cada vez que se inserta una etiqueta o elemento en la
pgina, se crea una nueva caja rectangular que encierra los contenidos del elemento. El siguiente esquema muestra
la creacin automtica de cajas por parte de HTML para cada elemento definido en el cdigo HTML de la pgina:
Versin 1.1
83 de 145
Cada una de las cajas est formada por seis partes, tal y como se muestra en la siguiente imagen tridimensional:
Versin 1.1
84 de 145
Contenido (content): se trata del contenido HTML del elemento (las palabras de un prrafo, 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): lnea que encierra completamente el contenido y su relleno.
Imagen de fondo (background image): imagen que se muestra por detrs del contenido y el espacio de
relleno.
Color de fondo (background color): color que se muestra por detrs 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 estn definidos) y en el espacio ocupado por el margen se muestra el color o imagen
de fondo de su elemento padre (si estn definidos).
Si ningn elemento padre tiene definido un color o imagen de fondo, se muestra el color o imagen de fondo
de la propia pgina (si estn definidos).
Si una caja define tanto un color como una imagen de fondo, la imagen tiene ms 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, tambin se visualiza el color de fondo.
Combinando imagenes transparentes y colores de fondo se pueden lograr efectos grficos muy
interesantes.
Versin 1.1
85 de 145
3.11.1
width
Controla 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 explcita un valor a esta propiedad, indica
que el navegador debe calcular automticamente la anchura del elemento, teniendo en cuenta sus
contenidos y el sitio disponible en la pgina.
#lateral { width: 200px; }

<div id="lateral">
...
</div>
3.11.2
height
Controla 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 explcitamente, se asigna el valor auto a la altura.
#cabecera { height: 60px; }

<div id="cabecera">
...
</div>
3.11.3
margin
Versin 1.1
86 de 145
Cada una de las propiedades establece la separacin entre el borde lateral de la caja y el resto de cajas
adyacentes. Unidades:
Las unidades ms utilizadas para indicar los mrgenes de un elemento son los pxeles(cuando se requiere
una precisin total)
Los em (para hacer diseos que mantengan las proporciones)
Los porcentajes (para hacer diseos lquidos o fluidos).
Para el manejo de margenes tenemos:

margin:superior derecho inferior izquierdo;
Por ejemplo:
margin:10pt 20pt 10pt 20pt;
<head>
<title></title>
.destacado {
margin-left: 2em;
}
</style>
</head>
<body>
<p>
Venid gente , reunios,
dondequiera que estis
y admitid que las aguas
han crecido a vuestro alrededor
y aceptad que pronto
estaris calados hasta los huesos,
si creis que estais a tiempo
de salvaros
ser mejor que comencis a nadar
u os hundiris como piedras
porque los tiempos estn cambiando..
</p>
<p class='destacado'>
Versin 1.1
87 de 145

de salvaros
</p>
</body>
</html>
<head>
<title></title>
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" />
<div>
Versin 1.1
88 de 145

</div>
</body>
</html>
3.11.4
panding
Establece la separacin entre el lateral de los contenidos y el borde lateral de la caja
Para especificar el ancho de los mrgenes 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;
Versin 1.1
89 de 145
Por ejemplo:
padding:10pt 20pt 10pt 20pt;
Otra opcin cuando todos los mrgenes son del mismo tamao es usar el atributo padding de la siguiente forma:
paddding: 20pt
Es posible indicar el ancho de un bloque usando el atributo "width", tambin es posible especificar las unidades del
ancho o usar un valor porcentual.
ESTILO { width:valor;}
<head>
<title></title>
.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">
de salvaros
</p>
<p class="relleno">
Versin 1.1
90 de 145

de salvaros
</p>
</body>
</html>
Considerar:
Versin 1.1
91 de 145
El resultado es:
3.11.5
border
La 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
color
Color de los bordes
Versin 1.1
92 de 145
div {
border-top-color: #CC0000;
border-right-color: blue;
border-bottom-color: #00FF00;
border-left-color: #CCC;
}
3.11.7
border-style
Permite 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;
}
Versin 1.1
93 de 145
Tipos de lneas:
3.11.8
background-color
El 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
mrgenes siempre son transparentes.
El siguiente ejemplo muestra una pgina web con un color gris claro de fondo:
body {
background-color: #F5F5F5;
}
El siguiente ejemplo muestra una imagen como fondo de toda la pgina

body {
background-image: url("imagenes/fondo.png")
}
Versin 1.1
94 de 145
Considerar la imagen:
Se va a rellenar todo el fondo con la imagen:

<head>
<title></title>
body {
background-image: url("../imagenes/imagen5.gif")
}
</style>
</head>
<body>
</body>
</html>
3.11.9
position
El estndar HTML clasifica a todos sus elementos en dos grandes grupos: elementos en lnea y elementos de
bloque.
Los elementos de bloque siempre empiezan en una nueva lnea y ocupan todo el espacio disponible hasta
el final de la lnea. Por su parte, los elementos en lnea no empiezan necesariamente en nueva lnea y slo ocupan
Versin 1.1
95 de 145
el espacio necesario para mostrar sus contenidos.
Los elementos en lnea definidos por HTML son: a, abbr, acronym, b, basefont, bdo, big, br, cite, code,
dfn, em, font, i, img, input, kbd, label, q, s, samp, select, small, span, strike, strong, sub, sup, textarea, tt,
u, var.
Los elementos de bloque definidos por HTML son: address, blockquote, center, dir, div, dl, fieldset, form,
h1, h2, h3, h4, h5, h6, hr, isindex, menu, noframes, noscript, ol, p, pre, table, ul, dd, dt, frameset, li, tbody,
td, tfoot, th, thead, tr.
Los siguientes elementos pueden ser en lnea y de bloque segn las circunstancias: button, del, iframe, ins,
map, object, script.
Los navegadores crean y posicionan de forma automtica todas las cajas que forman cada pgina HTML. No
obstante, CSS permite al diseador modificar la posicin en la que se muestra cada caja.
El estndar de CSS define cinco modelos diferentes para posicionar una caja:
Posicionamiento normal o esttico: 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 segn el
posicionamiento normal y despus desplazarla respecto de su posicin original.
Posicionamiento absoluto: la posicin de una caja se establece de forma absoluta respecto de su elemento
contenedor y el resto de elementos de la pgina ignoran la nueva posicin del elemento.
Posicionamiento fijo: variante del posicionamiento absoluto que convierte una caja en un elemento
inamovible, de forma que su posicin en la pantalla siempre es la misma independientemente del resto de
elementos e independientemente de si el usuario sube o baja la pgina en la ventana del navegador.
Versin 1.1
96 de 145
Posicionamiento flotante: se trata del modelo ms especial de posicionamiento, ya que desplaza las cajas
todo lo posible hacia la izquierda o hacia la derecha de la lnea en la que se encuentran.
Los valores de position son:
static: corresponde al posicionamiento normal o esttico. Si se utiliza este valor, se ignoran los valores de
las propiedades top, right, bottom y left que se vern a continuacin.
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 tambin se controla con

las propiedades top, right, bottom y left, pero su interpretacin es mucho ms 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 slo indica cmo 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 esttico
El modelo que utilizan por defecto los navegadores para mostrar los elementos de las pginas. En este modelo,
ninguna caja se desplaza respecto de su posicin original, por lo que slo se tiene en cuenta si el elemento es de
bloque o en lnea.
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
posicin como el tamao 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 pgina. 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.
Versin 1.1
97 de 145
3.11.9.2
Posicionamiento relativo
El posicionamiento relativo permite desplazar una caja respecto de su posicin 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
posicin que si la caja desplazada no se hubiera movido de su posicin 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 pgina no modifican su posicin, se producen solapamientos entre los
contenidos de las cajas.
Versin 1.1
98 de 145
3.11.9.3
Posicionamiento absoluto
El posicionamiento absoluto se emplea para establecer de forma precisa la posicin en la que se muestra la caja de
un elemento. La nueva posicin 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 pgina 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.
Versin 1.1
99 de 145
3.11.9.4
Posicionamiento fijo
La principal caracterstica de una caja posicionada de forma fija es que su posicin es inamovible dentro de la
ventana del navegador. El posicionamiento fijo hace que las cajas no modifiquen su posicin ni aunque el usuario
suba o baje la pgina en la ventana de su navegador.
3.11.9.5
Posicionamiento flotante (float)
La mayor parte de las estructuras de las pginas web complejas estn diseadas con el posicionamiento flotante.
Cuando una caja se posiciona con el modelo de posicionamiento flotante, automticamente se convierte en
una caja flotante, lo que significa que se desplaza hasta la zona ms a la izquierda o ms a la derecha de la posicin
en la que originalmente se encontraba
Versin 1.1
100 de 145
Cuando se posiciona una caja de forma flotante:
La caja deja de pertenecer al flujo normal de la pgina, lo que significa que el resto de cajas ocupan el lugar
dejado por la caja flotante.
La caja flotante se posiciona lo ms a la izquierda o lo ms a la derecha posible de la posicin en la que se

encontraba originalmente.
Para el grfico anterior hay dos pasos de ejecucin:

1) La caja 1 es de tipo flotante, por lo que desaparece del flujo normal de la pgina 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 posicin en la que se
encontraba. El resultado es que la caja 1 se muestra encima de la nueva posicin 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 ms a la izquierda posible, la caja 2 slo puede
colocarse al lado del borde derecho de la caja 1, que es el sitio ms a la izquierda posible respecto de la zona en la
que se encontraba.
Si no existe sitio en la lnea actual, la caja flotante baja a la lnea inferior hasta que encuentra el sitio necesario para
mostrarse lo ms a la izquierda o lo ms a la derecha posible en esa nueva lnea:
Versin 1.1
101 de 145
El formato de float es:
Si se indica un valor left, la caja se desplaza hasta el punto ms a la izquierda posible en esa misma lnea
(si no existe sitio en esa lnea, la caja baja una lnea y se muestra lo ms a la izquierda posible en esa
nueva lnea).
El valor right tiene un funcionamiento idntico, 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 posicin
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
lnea en la que no haya ninguna caja flotante en el lado izquierdo.
Si se indica el valor right, el comportamiento es anlogo, 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
Versin 1.1
102 de 145
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 ms adelante, la propiedad clear es imprescindible cuando se crean las estructuras de las
pginas web complejas.
Por ejemplo:
<head>
<title>html 20</title>
#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>
Versin 1.1
103 de 145
<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 pgina. Como el
elemento oculto no se muestra, el resto de elementos de la pgina 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 pgina no modifican su
posicin, ya que aunque la caja no se ve, sigue ocupando sitio.
Versin 1.1
104 de 145
Para display los valores ms utilizados son inline, block y none (oculta un elemento y hace que desaparezca de la
pgina). 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 ms 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 navegacin.
Inicialmente todas las cajas que componen la pgina 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 pgina se muestran
como si la caja todava fuera visible, por lo que en el lugar donde originalmente se mostraba la caja invisible, ahora
se muestra un hueco vaco.
Por ltimo, el valor collapse de la propiedad visibility slo se puede utilizar en las filas, grupos de filas,
Versin 1.1
105 de 145
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 idntico al valor hidden.
3.12 Seudo-elementos
Los seudo-elementos se refieren a sub partes de elementos, como la primera letra de un prrafo. 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 artculos de peridicos, como los del Wall Street Journal, la primera lnea de texto de un artculo
se muestra en negrita y con todas las letras en maysculas. CSS1 ha incluido esta capacidad como un seudoelemento. 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 sera:
<html>
<head>
<title>Drop cap formatting</title>
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">
Versin 1.1
106 de 145
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 Natures 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>
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
Versin 1.1
107 de 145
to which the Laws of Nature and of Natures 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 Layout
El diseo de las pginas web habituales se divide en bloques: cabecera, men, contenidos y pie de pgina.
Visualmente, los bloques se disponen en varias filas y columnas. Por este motivo, hace varios aos la estructura de
las pginas HTML se defina mediante tablas.
Versin 1.1
108 de 145
A medida que aumenta el tamao y la resolucin de las pantallas de ordenador, se hace ms difcil disear pginas
que se adapten al tamao de la ventana del navegador. El principal reto que se presenta con resoluciones
superiores a 1024 x 768 pxel, es que las lneas de texto son demasiado largas como para leerlas con comodidad.
Por ese motivo, normalmente se opta por diseos con ancho fijo limitado a un valor aceptable para mantener la
legibilidad del texto.
<head>
<title></title>
#contenedor {
width: 300px; /*El ancho es fijo, pero la altura es variable y se ajusta*/
margin: 0 auto; /*Ver explicacin en el siguiente prrafo (interesante)*/
}
</style>
</head>
<body>
<div id="contenedor">
Bibliografa de Edgar Codd:
Nacido en Portland Bill, Dorset (Reino Unido),
de padre fabricante de cuero y madre profesora de escuela,
estudi matemticas y qumica en la Universidad de Oxford.
Ms tarde, durante la Segunda Guerra Mundial,
fue piloto capitn de la Royal Air Force entre 1942 y 1945.
En 1948 se mud a Nueva York para trabajar como programador matemtico
para IBM, pero se mud a Ottawa en 1953 debido a discrepancias polticas
con el senador americano Joseph McCarthy.
Tras volver una dcada ms tarde a Estados Unidos se doctor en ciencias
de la computacin en la Universidad de Michigan, en Ann Arbor (1965).
En 1967 se mud a California, donde trabaj en el Laboratorio IBM
Versin 1.1
109 de 145
de Investigacin en San Jos del Cabo.

En 1981 recibi el Premio Turing de ciencias de la computacin,
el mayor galardn en su campo.
Muri de fallo cardaco en Williams Island, Filadelfia (Estados Unidos),
el 23 de abril de 2003.
</div>
</body>
</html>
El valor 0 auto significa que los mrgenes superior e inferior son iguales a 0 y los mrgenes laterales toman un valor
de auto (o sea, automtico). Cuando se asignan mrgenes laterales automticos a un elemento, los navegadores
centran ese elemento respecto de su elemento padre. En este ejemplo, el elemento padre del <div> es la propia
pgina (el elemento <body>), por lo que se consigue centrar el elemento <div> respecto de la ventana del
navegador.
Otras alternativa de solucin para lo anterior es usar margenes relativos:

#contenedor {
width: 70%;
margin: 0 auto;
}
Crear la estructura siguiente en donde la pgina 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.
Versin 1.1
110 de 145
La solucin 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 pgina para evitar los solapamientos ocasionados por los
elementos posicionados con float.
<head>
<title></title>
#contenedor {
width: 700px;
}
#cabecera {
height: 50px;
background-color:Aqua;
Versin 1.1
111 de 145
}
#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="cabecera"> Cabecera </div>
<div id="menu"> Menu </div>
<div id="contenido"> Contenido </div>
<div id="pie"> Pie de pgina </div>
</div>
</body>
</html>
Versin 1.1
112 de 145
3.14 Mens
3.14.1
Creacin de men sin imagen
En 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
<head>
<title></title>
#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 {
background-color: Lime;
/* Propiedad de menu, la barra de menu y del botn */
/* Por defecto esta es la opcin de botn 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 botn */
background-color: Blue;
}
#menu div.barraMenu a.botonMenu:active { /* Se activa cuando se presiona el botn */
color: Red;
}
</style>
</head>
<body>
<div id="menu">
<div class="barraMenu">
<a class="botonMenu" href="">Opcin 1</a>
Versin 1.1
113 de 145

</div>
</div>
</body>
</html>
Sin ninguna accin sobre los botones
Al pasar sobre un botn:
Al presionar el mouse sobre uno de los botones:
Versin 1.1
114 de 145
3.14.2
Creacin de men con imagen
Para este ejemplo se construyeron dos imgenes de tamao 100x23px.
<head>
<title></title>
.navegador{
margin-left: 45%; /* Sin estos parmetros el boton ocupa todo el ancho del video */
margin-right: 45%;
width: 150px; /* Tamao mnimo del elemento */
}
.navenlace {
border: 1px solid #999999;
padding: 2px; /* Distancia entre el botn 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 botn*/
}
</style>
</head>
<body>
<div class="navegador">
<p class="navenlace"><a href="#">Enlace 1</a></p>
</div>
Versin 1.1
115 de 145
</body>
</html>
3.14.3
Creacin de men horizontal con lista
<head>
<title></title>
#navegador ul{
list-style: none; /*Elimina los estilos de las listas*/
width: 350px; /*El tamao mnimo, 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 botn (superior derecho inferior izquierdo)*/
color: Blue;
Versin 1.1
116 de 145
background-color: Gray;
border: 1px solid Lime;
}
#navegador li a:hover{
background-color: Black;
color: White;
}
</style>
</head>
<body>
<div id="navegador">
<ul>
<li><a href="#">Elemento 1</a></li>
</ul>
</div>
</body>
</html>
Versin 1.1
117 de 145
3.14.4
Creacin de men vertical con lista
<head>
<title></title>
#navegador ul{
list-style: none; /*elimina los estilos de las listas*/
width: 120px; /*El tamao mnimo, 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 botn*//*superior derecho inferior izquierdo*/
display: block; /* Muestra el boton en todo el bloque */
/* Si es necesario llena espacios faltantes del tamao 120px*/
color: Blue;
background-color: Gray;
border: 1px solid Lime;
}
#navegador li a:hover{
background-color: Black;
color: White;
}
</style>
</head>
<body>
<ul>
</ul>
</div>
</body>
</html>
Versin 1.1
118 de 145
3.14.5
Creacin de men vertical efecto alteral
<head>
<title></title>
ul#navlist /*Son los estilos por defecto*/
{
width: 158px;
padding: 0px;
font: bold 12px verdana,helvetica,arial,sans-serif;
}
ul#navlist li
{
Versin 1.1
119 de 145
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 botn*/
{
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>
Versin 1.1
120 de 145
Al inicio
Al pasar el mouse sobre los elementos
3.14.6
Rollover con border
<head>
<title></title>
#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 tamao 3*/
}
#borde-interior a:hover img {
margin: -3px; /*para que el borde de tamao 3 calce justo*/
}
</style>
</head>
<body>
<div id="borde-interior">
<a href="#"><img src="../imagenes/74.jpg" width="140" height="77" alt="" title="" /></a>
Versin 1.1
121 de 145

<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>
</div>
</body>
</html>
Al pasar sobre los elementos se aprecia el borde y no se pierde la forma:
3.15 Recuadro
<head>
<title></title>
#tabla1{
border: 1px solid Blue;
width: 280px;
}
Versin 1.1
122 de 145
#cabtab1{ /*Propiedades de ttulo*/

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 Chilln<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 paraso terrenal.<br />
</div>
</div>
</body>
</html>
Versin 1.1
123 de 145
3.16 Fotos
En este caso tomamos la recomendacin que es dar el tamao a la imagen en el tab img.
<head>
<title></title>
#principal {
margin:0 auto;
}
.contenedorfoto {
width: 230px; /*Indica el tamao del contenedor*/
height: 230px;
float:left; /*Posiciona los elementos a izquierda*/
margin: 10px;
padding:5px;
background-color:#f5f7f9;
Versin 1.1
124 de 145
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>Descripcin de la imagen</span></div>
<a href="#">
</a>
<a href="#">
</a>
<a href="#">
</a>
<a href="#">
</a>
</div>
</body>
</html>
Versin 1.1
125 de 145
Considerar que las fotos tiene una calidad muy por encima del 200x200 exigido
Versin 1.1
126 de 145
3.17 Maquetacin
3.17.1
Fondo
Vamos a considera la siguiente imagen
<head>
<title></title>
body {
background : url(../imagenes/fondo-principal.jpg); /*Imagn 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>
Versin 1.1
127 de 145
</body>
</html>
3.17.2
Contenedor principal
<head>
<title></title>
body {
color : #666666;
text-align: center;
}
#contenedor{
text-align: left; /*Alineacin a la izquierda*/
width: 700px;
background-color : #ffffff;
margin: auto; /*Para que Mozilla y otros centren*/
}
</style>
</head>
<body>
Versin 1.1
128 de 145
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 (artculos, post), enviar enlaces por correo a
sus conocidos, recibir las actualizaciones mediante RSS y conformar grupos y redes sociales.<br /><br />
Podramos 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 trminos 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 pgina principal por medio de un sistema basado en el ranking de usuarios. Esto difiere del sistema
de jerarquas 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 slo las que tienen cierta cantidad de votos son publicadas en
tapa.<br /><br />
Los artculos 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 promocin de historias, envo
y comentarios de las mismas.<br /><br />
</div>
</body>
</html>
3.17.3
Cabecera
<head>
<title></title>
Versin 1.1
129 de 145
body {
color : #666666;
text-align: center;
}
#contenedor{
width: 700px;
}
#cabecera{
height : 161px;
width: 700px;
}
</style>
</head>
<body>
<div id="cabecera">
<img src="../imagenes/cabecera01.jpg" width="700" height="161" alt="maquetacion" title="maquetacion" />
</div>
Es como si en un diario, los lectores votaran las noticias y slo las que tienen cierta cantidad de votos son
publicadas en tapa.<br /><br />
</div>
</body>
</html>
Versin 1.1
130 de 145
3.17.4
Barra superior de navegacin
<head>
<title></title>
body {
color : #666666;
text-align: center;
}
#contenedor{
width: 700px;
}
#cabecera{
height : 161px;
width: 700px;
}
#navegador{
background : url(../imagenes/cabecera02.png); /*Imagn de fondo*/
padding : 3px 10px 5px 10px; /*superior derecho inferior izquierdo*/
Versin 1.1
131 de 145
}
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="cabecera">
</div>
<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>
</body>
</html>
Versin 1.1
132 de 145
3.17.5
Caja buscar
Uno de los elementos que vamos a colocar dentro del lateral es una caja de bsqueda, con un formulario para
realizar bsquedas internas, dentro del sitio, y en todo el web.
<head>
<title></title>
body {
color : #666666;
margin : 20px 0px 20px 0px;
text-align: center;
}
#contenedor{
width: 700px;
}
#cabecera{
height : 161px;
width: 700px;
}
#navegador{
Versin 1.1
133 de 145
background : url(../imagenes/cabecera02.png); /*Imagn 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, enva 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;
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; /*Tamao 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 botn de acuerdo a la caja de texto*/
padding-left: 156px; /*Posiciona el botn al lado de la caja de texto*/
}
</style>
Versin 1.1
134 de 145
</head>
<body>
<div id="cabecera">
</div>
<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>
</div>
</body>
</html>
Versin 1.1
135 de 145
3.18 Tamaos de texto con CSS: buenas prcticas

Visualmente en nuestra computadora puede que sea indiferente usar una u otra unidad para asignar el tamao a los
textos, pero hay algunas diferencias entre las distintas unidades que merecera la pena conocer. Nosotros vamos a
asumir en este artculo que la mejor manera de asignar tamao a los textos es cuando:
El tamao 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 tambin una agenda electrnica o
telfono mvil)
Que las fuentes se puedan redimensionar correctamente, para aumentar o reducir su tamao (lo que es til
para mejorar la accesibilidad a nuestra web por todo tipo de personas)
3.18.1
Tamao de las fuentes en unidades relativas
La primera regla bsica para definir los tamaos 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
tamao real es en funcin de las caractersticas propias de cada sistema.
Por ejemplo, pensemos en la unidad de centmetros, que es una unidad absoluta, porque un centmetro es
exactamente igual en Espaa y en China, en una computadora o en un telfono mvil. Si definimos las unidades en
centmetros, puede que para nuestra computadora est todo correcto, que tiene una pantalla, digamos, de 17
pulgadas, en la que un tamao de fuente en x centmetros puede ser razonable. Pero qu pasara con un mvil
que tiene una pantalla de 2,5 pulgadas? Quizs esas fuentes que se vean bien en la pantalla del ordenador se vean
gigantes en la del mvil. Las unidades relativas son:
em: 1em equivale al tamao de fuente que tenga ese dispositivo configurada por defecto.
Versin 1.1
136 de 145
ex: que es el tamao de la letra x, segn la fuente por defecto del sistema
px: que es justamente un pixel de la pantalla.
Por poner un ejemplo, si definimos el tamao del texto con pxeles, al ver la fuente en el monitor del ordenador,
tendr un tamao relativo a la definicin que el usuario tenga en su pantalla y las dimensiones de la misma. Al ver la
fuente en un mvil tampoco habr problema, aunque quizs los pxeles de esa pantalla puedan ser menores, la letra
seguir vindose igual de bien definida y ajustada a las caractersticas de esa pantalla.
Adems de estas unidades relativas, est la posibilidad de usar la unidad de porcentaje, que es relativa al
tamao de la fuente con la que se estaba escribiendo.
3.18.2
Posibilidad de reducir y ampliar el texto de la pgina
Otro de los criterios vlidos para decidir si una unidad es o no interesante para asignar tamao 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 pgina 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 ms bien es una ayuda necesaria para que cualquier
persona con dificultades de lectura o de visin pueda asimilar el texto de las webs.
As pues, para mejorar la accesibilidad de las pginas 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 pxeles: Tienen el problema que, en Internet Explorer, antes de la reciente versin 8, no
permitan redimensionarse. Al ser medidas en pxeles, el explorador entenda que siempre tenan que medir
lo indicado en las CSS, independientemente del tamao 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 cmo convertir los tamaos que conocemos en puntos (pt) a em. La regla es bien simple, pero
tenemos que asumir el tamao de fuentes predeterminado en el entorno del usuario. Lo comn 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 clculo constante de unidades em, es asignar
un tamao al cuerpo (etiqueta BODY) en unidades CSS em y luego asignar por porcentaje los tamaos de
distintas fuentes, mayores con valores en porcentaje superiores a 100% y menores con tamaos en
porcentaje menores que 100%.
Sobre las unidades en em, que seran las ms aconsejadas, de nuevo Internet Explorer 6 y 7 dan un problema y es
que cuando se reduce la fuente, el tamao se hace demasiado pequeo. 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;
Versin 1.1
137 de 145
3.19 Tcnicas de tipografa con CSS

Existen muchos tipos de webs, creadas para infinidad de propsitos, pero en muchos de los casos, el componente
ms importante es el texto. Unos pequeos 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 tambin es sumamente importante que un texto se pueda leer bien y se
ha comprobado que ciertas caractersticas de los textos, que podemos definir con CSS, ayudan bastante a
aumentar su legibilidad.
3.19.1
Cmo afectan los mrgenes e interlineado a la velocidad de lectura y
comprensin del texto
Se han realizado diversos estudios acerca del uso de mrgenes e interlineado y cmo afectan a la velocidad de
lectura y comprensin 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 comprensin. Por tanto, en principio se entiende que lo ms deseable sera que las personas
entiendan bien lo que se est escribiendo y en un segundo plano, aunque tambin importante, estara 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 mrgenes grandes y espacio entre lneas grandes
Con mrgenes grandes y menor espacio entre lneas
Con mrgenes menores y espacio entre lneas grandes
Con mrgenes menores y menor espacio entre lneas
Se comprob entre varias personas que la comprensin del texto aumentaba cuando hay ms margen y el espacio
entre lneas tambin es mayor. Por lo que respecta a la velocidad de lectura se vio que aumentaba cuando los
mrgenes y el espacio de interlineado es menor.
En la encuesta se dedujo que las personas prefieren leer textos que tengan espacio en blanco en mrgenes
y un mayor espacio entre lneas. Un interlineado y mrgenes adecuados hacen ms fcil leer el texto facilitan su
comprensin, sin embargo, si nos pasamos en su uso estaramos disminuyendo la velocidad con la que las
personas pueden revisar nuestro contenido.
3.19.2
Cmo aplicar mrgenes e interlineado con CSS
Las hojas de estilo en cascada permiten definir las caractersticas del texto como los mrgenes y el espacio entre
lneas, a travs de los conocidos atributos margin y line-height. Es importante definir ambos valores con CSS, dado
que los mrgenes por defecto de la mayora de los elementos, por lo menos a la izquierda y derecha, son nulos por
defecto. Adems, el valor de line-height que utilizan los navegadores por defecto suele ser escaso.
Versin 1.1
138 de 145
Podemos definir estos atributos, o bien para el cuerpo de la pgina, 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 pxeles arriba, abajo, a la izquierda y a la derecha del cuerpo de la pgina.
Adems un espacio entre lneas de 1,5 veces el tamao de la letra configurada por defecto. La fuente tendr un
tamao 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 pxeles y a los lados de 20 pxeles. Para el tamao del texto y el espacio entre lneas hemos optado,
por variar, por expresar los tamaos en pxeles.
3.19.3
Otros atributos CSS para mejorar el aspecto esttico de los textos
Aunque los mrgenes 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 ms 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 esttico, pero si nos pasamos puede mermarse la facilidad de
lectura, sobre todo en textos largos, por eso es ms aconsejable usarlo en los titulares, que suelen ser ms cortos.
Ojo cuando separamos los caracteres, porque las palabras quedan poco definidas, ya que las letras parece que
estn sueltas. Un recurso utilizado a menudo con letter-spacing es juntar las letras un poco en los titulares.
h1{
letter-spacing: -1px;
}
Versin 1.1
139 de 145
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 comentbamos en letter-spacing. Si
separamos las palabras crearemos un espacio en blanco entre ellas mayor, lo que puede dar un afecto ms ligero al
texto y se leer fcilmente, porque las palabras se leern 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 maysculas y minsculas

El atributo CSS text-transform sirve para cambiar las letras entre maysculas y minsculas. Son permitidos los
valores: none (que deja el texto como estaba), capitalize (que pone la primera letra de cada palabra en mayscula),
uppercase, (que pone todo en maysculas) y lowercase (que pone todo en minsculas). De nuevo, resultar ms
til para textos cortos que se coloquen en titulares o en encabezamientos de cajas.
h1{
text-transform: uppercase;
}
Sangrado de la primera lnea

Con el atributo text-indent podemos hacer un sangrado de la primera lnea de cada prrafo. No es muy til para el
cuerpo entero, porque te sangrara todos los elementos de la pgina, pero para textos largos podra servir en
algunos casos, porque da un aspecto al texto ms de carta.
div.carta{
text-indent: 20px;
}
Decorar la primera letra o la primera lnea de un prrafo

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 prrafo o a la
primera lnea 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;
}
Versin 1.1
140 de 145
Justificar el texto
Entre los estilos de prrafo, 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 terminacin de las lneas 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 estn acostumbradas a
leer texto justificado en la web y realmente no ayuda a aumentar la comprensin del mismo. Pero existe un
problema esttico, puesto que el justificado queda realmente bien cuando se utilizan columnas ms o menos
estrechas, pero en estos casos da problemas porque a menudo las palabras quedan muy separadas, cuando se
cuentan pocas por lnea. Este problema no lo tenemos cuando los textos se colocan en columnas anchas y hay
muchas palabras por lnea, pero en ese caso visualmente no queda tan atractivo.
Utilizar distintas familias tipogrficas

Otro recurso interesante, aunque en este caso ms de diseo en general que de hojas de estilo en particular, es
jugar con distintos tipos de letra en la pgina. Por ejemplo, queda bien colocar los titulares con una tipografa 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 ms de 2 familias
tipogrficas distintas.
Para el desarrollo de pruebas visitar: http://www.typetester.org/
3.20 Bordes redondeados en Firefox 3.5.3

<head>
<title></title>
.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 montaa<br />
Versin 1.1
141 de 145
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.
Tambin se puede dejar alguna esquina cuadra mientras que las otras son redondeadas.
<head>
<title></title>
.demo
{
background: #009933;
width: 180px;
-moz-border-radius: 15px 55px;
padding: 19px; /*superior derecho inferior izquierdo*/
font-size: .6em;
font-family: Verdana
}
</style>
Versin 1.1
142 de 145
</head>
<body>
<div class="demo">
</div>
</body>
</html>
Observacin: Estos efectos no funcionan en Internet Explorer 8
3.21 Bordes redondeados en todos los Browser

Los inconvenientes:
Se deben disear las imagnes a medida
Funcionan slo para un color de fondo determinado. Por ejemplo, el siguiente caso slo funciona con color
de fondo blanco.
Con las siguientes imgenes el fondo debe ser blanco
Versin 1.1
143 de 145
<head>
<title></title>
.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;
}
</style>
</head>
<body>
<div class="caja">
<div class="cajaarriba">
<div class="cajaabajo">
</div>
</div>
</div>
</body>
</html>
Versin 1.1
144 de 145
En el IE se aprecia
3.22 Formatos de tablas

Ver: http://icant.co.uk/csstablegallery/index.php?css=101#r101
Versin 1.1
145 de 145

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

Diunggah oleh

Informasi Dokumen

Hak Cipta

Format Tersedia

Bagikan dokumen Ini

Bagikan atau Tanam Dokumen

Opsi Berbagi

Apakah menurut Anda dokumen ini bermanfaat?

Apakah konten ini tidak pantas?

Hak Cipta:

Format Tersedia

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

Diunggah oleh

Hak Cipta:

Format Tersedia

HTML

3.11 Modelo de caja..................................................................................................................................................................82

Trabajo con Visual Studio

Implementar un proyecto web vaco.

Sitio web vaco

Ubicacin: Sistemas de archivos

Una ruta de almacenamiento

Lenguaje: Visual Basic

Crear un carpeta para incluir vuestro cdigo

Trabajo con netbeans

Crear 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 opcin para crear una carpeta

Crear una carpeta

Seleccionar la opcin para crear un archivo html

Crear un archivo html

Configurar el nuevo inicio de la aplicacin

En la opcin Run configurar la nueva ruta

Estructura de un documento html

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

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

Consideraciones sobre el texto:

Los comentarios en HTML son:

<center> Primera pagina </center> </h1>

Esta es mi primera pagina, aunque todava es muy

<p> Aqu va un segundo prrafo.

Dando forma al texto

Para obtener 4 lneas en blanco>:

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).

Enlaces con otras pginas

En general, los enlaces tienen la siguiente estructura:

Enlaces dentro de la misma pgina

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

<a href="#marca"> YYY </a>

Enlaces con otra pgina nuestra

Considerar los programas

Enlaces con una pgina fuera de nuestro sistema

Enlaces con una direccin de email

<a href="http://home.netscape.com"> netscape </a>

<br> <a href="http://www.microsoft.com"> microsoft </a>

La etiqueta que nos sirve para incluir imgenes es:

<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

seguido de la palabra acute (aguda) y terminando con el

XX: es un nmero (hexadecimal) indicativo de la cantidad de color rojo

YY: es un nmero (hexadecimal) indicativo de la cantidad de color verde

ZZ: es un nmero (hexadecimal) indicativo de la cantidad de color azul

color del texto

color de los enlaces

color de los enlaces visitados

< body bgcolor="#xxyyzz"

a estructura general de un formulario es:

Establece como sern enviados los datos al servidor http.

Son utilizado por JavaScrip o VBScrip.

Establecen los tipos MIME (ACCEPT) y la codificacin de caracteres (ACCEPT-CHARSET) que

1.9.1 Controles de texto

Identifica al campo de texto cuando se enva el formulario

Establece el contenido inicial del campo de texto. Cuando se enva el