Manual Creación Paginas Web - 2

Creacin de Pginas Web
MANUAL CURSO
CREACIN DE PGINAS WEB
ALUCO
SECRETARA GENERAL- FORMACIN
INSTITUTO NACIONAL DE ESTADSTICA
1
ndice Contenido
1.- Funcionamiento de las pginas web: editores, navegadores, servidores, comunicaciones e
intercambio de ficheros. ...................................................................................................................... 8
Editores .............................................................................................................................................. 8
Editores de texto .................................................................................................................................... 8
Editores de HTML .................................................................................................................................. 8
Editores WYSIWYG ............................................................................................................................... 8
Navegadores .................................................................................................................................... 10
Servidores y direcciones URL .......................................................................................................... 10
Comunicaciones ............................................................................................................................... 11
A que llamamos un sitio web? ....................................................................................................... 11
Alojamiento Web (Web Hosting) ...................................................................................................... 12
Tipos de alojamientos Web .................................................................................................................. 12
2.- Qu es una pgina web? .......................................................................................................... 15
Elementos en un documento HTML................................................................................................. 15
Elementos llenos .................................................................................................................................. 15
Elementos vacos ................................................................................................................................. 16
Elementos con atributos ....................................................................................................................... 16
3.- Estructura HTML .......................................................................................................................... 17
Cabecera de documento HTML ....................................................................................................... 18
Cuerpo de documento HTML ........................................................................................................... 20
Cierre del documento HTML ............................................................................................................ 20
4.- Formato del texto ......................................................................................................................... 20
Apariencia del Texto......................................................................................................................... 20
Estilos de tipo lgico ............................................................................................................................. 20
Tipos de letra ........................................................................................................................................ 21
Encabezados ........................................................................................................................................ 21
Tamao de la letra ............................................................................................................................... 22
Etiqueta P (prrafo) .......................................................................................................................... 23
Lnea de Comentarios ...................................................................................................................... 24
Comando quiebre o salto de lnea ................................................................................................... 24
2
HR (lnea horizontal) ........................................................................................................................ 24
Caracteres Especiales ..................................................................................................................... 25
Otros caracteres ............................................................................................................................... 26
Preformateado .................................................................................................................................. 27
Blockquote ........................................................................................................................................ 27
Alineado central de texto y objetos .................................................................................................. 27
5.- Listas ............................................................................................................................................ 28
Listas desordenadas ........................................................................................................................ 29
Listas ordenadas .............................................................................................................................. 29
Listas definicin ................................................................................................................................ 30
Anidamiento de listas ....................................................................................................................... 30
6.- Enlaces o hipervnculo ................................................................................................................. 31
Formato de enlace ........................................................................................................................... 31
Estructura ......................................................................................................................................... 32
Enlaces a otras pginas ................................................................................................................... 32
Referencia absoluta ............................................................................................................................. 32
Referencia relativa al sitio .................................................................................................................... 33
Enlaces dentro de la pgina o locales ............................................................................................. 33
Enlace en un punto de otra pgina .................................................................................................. 34
Enlaces con una direccin de email................................................................................................. 35
Vnculo a ficheros para descarga ..................................................................................................... 35
7.- Imgenes ...................................................................................................................................... 35
Formato GIF. .................................................................................................................................... 36
Formato JPEG .................................................................................................................................. 36
Insertar imgenes ............................................................................................................................. 36
IMG ....................................................................................................................................................... 36
Como descargar una imagen que nos interesa de una pgina que estamos visitando. ................. 38
Uso de imgenes como enlaces ...................................................................................................... 39
8.- Tablas ........................................................................................................................................... 39
TABLE .............................................................................................................................................. 40
CAPTION ......................................................................................................................................... 40
3
Bordes de la tabla ............................................................................................................................ 40
Tamao de la tabla........................................................................................................................... 41
Espacio dentro de las celdas. .......................................................................................................... 41
Filas .................................................................................................................................................. 41
Columna o Celdas ............................................................................................................................ 42
Tamao Columna o Celdas ............................................................................................................. 42
Combinar Celdas o celdas expandidas............................................................................................ 43
Alineacin texto de celdas ............................................................................................................... 43
Anidamiento tablas ........................................................................................................................... 44
9.- Formularios .................................................................................................................................. 44
INPUT ............................................................................................................................................... 45
TYPE ................................................................................................................................................ 45
TEXTAREA ...................................................................................................................................... 48
SELECT ........................................................................................................................................... 48
10.- Elementos de Multimedia ........................................................................................................... 49
Sonido de fondo ............................................................................................................................... 50
Video y Audio ................................................................................................................................... 51
Video Flash ...................................................................................................................................... 52
11.- Gua de Diseo .......................................................................................................................... 54
Recomendaciones Generales .......................................................................................................... 54
Qu es un buen diseo web? ........................................................................................................ 55
Navegacin ...................................................................................................................................... 56
Estructura de tu pgina .................................................................................................................... 56
Texto................................................................................................................................................. 57
Colores ............................................................................................................................................. 57
Tamao de la fuente ........................................................................................................................ 57
Color del texto .................................................................................................................................. 57
Espacios ........................................................................................................................................... 58
Alineacin ......................................................................................................................................... 58
Fondo ............................................................................................................................................... 59
Tamao del documento ................................................................................................................... 59
Imgenes .......................................................................................................................................... 59
4
La estructura de navegacin ............................................................................................................ 59
Jerrquica. ......................................................................................................................................... 60
Lineal. ................................................................................................................................................. 60
Lineal con jerarqua............................................................................................................................ 60
Red. .................................................................................................................................................... 61
Organizacin de directorios ............................................................................................................. 61
La ergonoma del color..................................................................................................................... 63
Lo Que S Funciona En El Diseo Web ........................................................................................... 66
Fcil de navegar. .................................................................................................................................. 67
Actualizado constantemente. ............................................................................................................... 67
Sencillo pero elegante. ......................................................................................................................... 67
Gua de Eye Tracking Para El Diseo Web ..................................................................................... 68
Gua de Accesibilidad web ............................................................................................................... 71
Accesibilidad web ................................................................................................................................. 71
Tcnicas y herramientas para evaluar la accesibilidad web ................................................................ 76
TAW ...................................................................................................................................................... 76
BARRA AIS. ......................................................................................................................................... 77
Nuevas recomendaciones, WCAG 2.0 ................................................................................................ 78
Pautas de accesibilidad al contenido web 2.0 (WCAG 2.0) ................................................................. 78
Comparativa de WCAG 1.0 - WCAG 2.0 ............................................................................................. 79
Diferencias estructurales y organizativas. ............................................................................................ 79
Referencias de inters. ........................................................................................................................ 80
12.- Hojas de estilo en cascada CSS ................................................................................................ 81
Enlace Reglas de estilo .................................................................................................................... 82
El concepto de Cascada .................................................................................................................. 83
13.- Sintaxis CSS .............................................................................................................................. 84
Sintaxis CSS .................................................................................................................................... 84
Definicin en la propia etiqueta html .................................................................................................... 85
Unidades Absolutas ............................................................................................................................. 85
Unidades Relativas .............................................................................................................................. 86
Los tantos por ciento % porcentajes ................................................................................................. 86
Dentro del documento Html.................................................................................................................. 87
5
En un Archivo ....................................................................................................................................... 87
14.- Propiedades de las reglas de estilo ........................................................................................... 88
Propiedades del texto....................................................................................................................... 88
Propiedades de las fuentes .............................................................................................................. 90
Propiedades de los colores y los fondos.......................................................................................... 92
Propiedades de mrgenes y padding .............................................................................................. 99
Propiedades del borde ................................................................................................................... 101
15.- Enlace en CSS ......................................................................................................................... 103
Pseudoclases y pseudoelementos ................................................................................................. 103
Pseudoclases ..................................................................................................................................... 103
Pseudoelementos ............................................................................................................................... 103
Definicin de los estilos .................................................................................................................. 104
Clases................................................................................................................................................. 104
ID ........................................................................................................................................................ 105
Diferencias entre CLASES e ID ......................................................................................................... 105
16.- Agrupar elementos con span y div .......................................................................................... 105
Capas ............................................................................................................................................. 105
Tamao de la capa......................................................................................................................... 106
Posicionar capas ............................................................................................................................ 106
Posicionamiento relativo .................................................................................................................... 107
Posicionamiento absoluto .................................................................................................................. 108
Desbordamiento ............................................................................................................................. 108
Capas flotantes .................................................................................................................................. 108
Solapamiento de capas .................................................................................................................. 109
Visibilidad de capas........................................................................................................................ 110
clip ...................................................................................................................................................... 110
17.- JavaScript ................................................................................................................................. 116
JavaScript con archivo externo ...................................................................................................... 117
JavaScript etiquetas HTML ............................................................................................................ 118
Funciones ....................................................................................................................................... 118
6
7
El objetivo de este curso Bsico Online guiado, con multitud ejemplos y ejercicios prcticos pensados
para convertirlo en una herramienta cuyo principal fin es ensear a crear pginas web partiendo desde un
nivel cero utilizando editores simples y gratuitos, despus de cada tema existir un test de evaluacin
para fijar los conceptos aprendidos.
1.- Funcionamiento de las pginas web: editores, navegadores,

servidores, comunicaciones e intercambio de ficheros.
Las pginas web necesitan de distinto software (programas), hardware (mquinas) y comunicaciones
para poder ser visualizadas.
Utilizaremos los editores, navegadores (software) para crear y visualizar las pginas respectivamente.
Utilizaremos un servidor o PC (hardware) para alojar las pginas creadas, y el sistema de
comunicaciones para llegar a esos servidores en los que estarn alojadas.
Editores
Lo fundamental para escribir pginas web es conocer HTML. Si quiere poner una imagen en su pgina
necesitar saber un poco sobre grficos web, si quiere poner un men desplegable es conveniente que
conozca algo sobre JavaScript, si quieres recoger datos de los usuarios mediante un formulario es
conveniente hacerlo con un lenguaje tipo PHP o Java.
Editores de texto
Nos permiten editar el cdigo fuente como texto, como puede ser el Bloc de notas de Windows.
Editores de HTML
Funcionan como los editores de texto, pero pueden tener algunas ayudas avanzadas. Como
mostrar las etiquetas de colores, o cerrarlas automticamente.
Editores WYSIWYG
Es una combinacin de los dos anteriores, nos permiten editar el cdigo fuente como los editores de
HTML, nos permiten trabajar con vista de diseo. Vemos la pgina como se mostrara en un navegador
mientras la editamos. La mayora de estos editores tienen opciones para realizar tareas complementarias,
como por ejemplo, crear elementos de un formulario, insertar mens, e incluso cdigo JavaScript. De
estos ltimos nos vamos a olvidar durante el curso para centrarnos ms en el cdigo HTML puro y duro.
Editores de este tipo pueden ser Amaya, Dreamweaver, KompoZer o Microsoft SharePoint Designer 2007
nos hemos quedado con este ltimo por ser bastante simple e intuitivo.
Enlace a SharePoint Designer 2007 http://www.microsoft.com/en-us/download/details.aspx?id=21581
Pero de momento no nos vamos complicamos mucho, iremos a lo ms elemental para poder
empezar a disear una pgina, nuestra pgina, es conveniente utilizar un editor texto tan simple como
8
Block de Notas de Windows, es verdad que existen editores de diseo Web ms complejos que facilitan
la escritura de pginas web. ltimamente se est extendiendo Editores Web Online en la nube con
servicio gratuito muy tiles para diseo Web.
Para que su pgina sea agradable es conveniente saber algo sobre maquetacin y diseo, por ltimo
para que puedan ser publicadas, y los usuarios pueda disfrutar del resultado del nuestro diseo es
necesario subir su pgina a un Servidor de Internet para darla a conocer.
Bien, a lo largo de todo del curso, se explicar de la forma ms sencilla posible, dentro de las
posibilidades que permite el lenguaje HTML, y podr ser comprendido por cualquier persona sin
conocimientos previos.
Esperamos que siga todo el curso y llegue al final cumpliendo todas las expectativas creadas de lograr
crear pginas web atractivas y completas.
Entendemos documento como un conjunto de ficheros, tanto de texto como de imgenes multimedia
que deseamos transmitir al usuario, guardarlo con la extensin .htm Windows o .HTML Linux, que al ser
abierto por su navegador va incorporando elementos del documento hasta completar su presentacin.
Fig1. Un editor de texto simple, como el block de notas de Windows, sirve para crear paginas
En esencia, una pgina escrita en HTML no es ms que texto normal, escrito con cualquier editor y al
que, cuando se le quiere dar algn aspecto especial, como por ejemplo el tamao de la letra, habr que
acompaar de ciertos cdigos para indicar el efecto deseado. A estos cdigos se les llama elementos o
etiquetas del lenguaje.
Para realizar la publicacin de nuestras pginas Web, lo primero es crearlas en su PC, de momento sin
subirlas a ningn servidor. Eso le permitir navegar por su documento, simplemente abriendo las pginas
creadas con su navegador preferido.
Algunos Editores Web Online gratuitos son:
Quackit Online HTML Editor: http://www.quackit.com/html/online-html-editor/
Real-Time HTML Editor: http://www.timsfreestuff.com/HTMLEditor/
9
Online HTML Editor: http://www.onlinehtmleditor.net/
Navegadores
El "navegador", "visualizador" o "cliente" HTML (HyperText Markup Language) es un programa que le
permite visualizar e interactuar con este curso.
Toda la presentacin y efectos en el texto que forman el lenguaje HTML no son ms que instrucciones
estndares que interpreta nuestro visualizador, browser o navegador. En ocasiones todos hemos
comprobado que no se ve lo mismo con todos los visualizadores; lo que vemos depende de cmo estn
diseados y para qu versin de lenguaje estn diseados.
Actualmente existen multitud de ellos, aunque los ms conocidos son el Internet Explorer de Microsoft
IE, el Netscape Navigator de Netscape Netscape, o el Mozilla Firefox que en realidad es el nuevo
Netscape, sin olvidar el navegador Opera, Google Chrome, Opera, Safary, etc.
Todo lo que se trataremos en este curso funciona correctamente con Netscape, Opera o Firefox, casi
todo con el IE. Algunas cosas puede que no se vean bien dependiendo del navegador utilizado.
Si est conectado a Internet, con un navegador, adems de ver documentos HTML se puede recibir y
enviar correo electrnico, recibir y enviar NEWS (noticias), y acceder a servidores FTP (ms servidores
de ficheros) tanto en entrada como en salida, todo ello con el mismo programa. De la misma manera se
pueden imprimir los documentos visualizados.
La idea es sencilla, se puede crear un documento o pagina Web con su editor preferido.
Servidores y direcciones URL
Las pginas o documentos creados pueden residir en el disco duro de su ordenador, o estar a varios
miles de kilmetros en otro ordenador llamado servidor web. Si es as, entonces se estars moviendo por
la www (World Wide Web) que es como se ha dado en llamar a este tipo de servicios de Internet.
Si lo que quiere es publicarlas en Internet, lo primero es conseguir una cuenta y espacio en disco en
algn proveedor de servicios internet (ISP -Internet Service Provider-), en el caso de no disponer de su
propio servidor. Una vez conseguido el espacio en servidor, hay que almacenar las pginas junto con los
ficheros imgenes, multimedia, datos, etc. que componen sus pginas a ese servidor. Para ello puede
utilizar la pgina que habitualmente proporcionan los ISP para "subir" sus ficheros desde su mquina, o
bien utilizar algn programa de FTP.
Internet es un gran conjunto de servidores conectados entre s por medio de una Red capaces de
intercambiar informacin entre ellos.
Un servidor es un ordenador conectado a la red de acceso a Internet que dispone de un programa que
es capaz de recibir una URL (direccin web) y devolver una pgina web o recurso al que hizo la peticin.
10
Cuando descargamos una pgina web estamos accediendo a archivos almacenados en un servidor
web (ISP o Local (PC)). La direccin o URL (Uniform Resource Locator, Localizador de Recursos
Uniformes) tiene este formato:
http://www.nombredominio.com/directorio/nombrepaginaweb.htm
Donde http:// es el protocolo utilizado y www. World Wide Web indica literalmente su traduccin al
espaol seria "Telaraa alrededor del mundo" o Red alrededor del mundo. Habr observado que no
hace falta escribir esto en el navegador, nombredominio.com es el nombre del sitio. La ltima parte
indica el nombre de la pgina. Y la carpeta o directorio donde se encuentra ubicada.
Los URL permite movernos de una pgina a otra, lo que llamamos comnmente navegar por Internet,
podemos visitar una direccin directamente desde el navegador o desde un enlace en otra pgina.
Podemos teclear la direccin en la barra de direcciones del navegador o acceder desde "favoritos" si lo
hemos capturado previamente.
Comunicaciones
Los ordenadores se pueden comunicar porque estn unidos a travs de conexiones y gracias a que
utilizan un lenguaje o protocolo comn, el TCP/IP.
Protocolo de comunicaciones, es un conjunto de reglas y normas que permiten que dos o ms

Servidores de una red se comuniquen entre ellos para transmitir informacin utilizando cualquier
magnitud fsica (cable, laser, ptica, etc.).
A que llamamos un sitio web?
Llamamos a un sitio web o website, a un conjunto de pginas web, agrupadas bajo un dominio, con
un objetivo o temtica previamente fijado, como puede ser www.ine.es o www.boe.es
Todo sitio web que se precie dispone de una pgina inicial o raz desde la cual podemos acceder, de
forma jerrquica a todo el contenido del sitio, a travs de hiperenlaces. A su vez, existen enlaces hacia
otros sitios web distintos, ya que cada sitio tiene una URL nica que nos permite acceder a l.
Al conjunto de los sitios web publicados en Internet reciben el nombre WEB o WWW.
Sitio esttico
Dentro del conjunto de pginas que forman el sitio, existen paginas que estn escritas directamente
en HTML con datos estticos. Cuyas actualizaciones se hacen manualmente sobre el cdigo HTML.
Sitios dinmicos
Actualmente existen sitio web con lenguajes mixtos, como PHP, ASP,JAVA o JSP que generan en
HTML a partir de datos de consultas sobre informacin contenida en bases de datos, con los datos
introducidos previamente por el usuario, informacin global, etc. Ya que los cambios se producen
frecuentemente y son generados desde la propia pgina.
11
La temtica
La motivacin que nos mueve a crea un sitio web es transmitir toda la informacin a la sociedad. Bien
porque el tema resulta interesante para nosotros o para el resto. Porque, aunque crear una pgina Web
con nuestros hobbies y aventuras cotidianas puede ser un buen ejercicio como aprendizaje, a la hora de
la verdad a poca gente le resultar interesante leerlo. Para esto, obtendremos mejores resultados
crendonos una cuenta en una de las numerosas redes sociales.
El tema tambin debe de ser concreto. Si dominamos la informtica y la jardinera, no resultar serio si
creamos un sitio en el que encontremos las dos cosas. Es mejor crear un sitio independiente para cada
una.
No slo debemos de elegir un tema que resulte atractivo para un grupo de usuarios, si no que
debemos de tener informacin sobre l. No tiene demasiado sentido crear un sitio para escribir un slo
artculo de media pgina.
El tema elegido determinar el diseo de la pgina. No es lo mismo si pensamos mostrar fotos de

animales para los amantes de las mascotas, una web para nios, una empresa de informtica, etc.
Una vez elegido la temtica, debemos de distinguir cuales son las categoras en las que vamos a dividir
nuestro sitio. Estas sern ms genricas o menos, dependiendo del tamao del sitio. Es importante saber
desde el mismo momento de generar el tema definir a que perfil de usuarios va ser dirigido nuestro sitio.
Alojamiento Web (Web Hosting)
Es el servicio que provee a los usuarios de Internet un soporte para poder almacenar informacin,
imgenes, videos o cualquier contenido accesible va Web, para crear un sitio Web.
Las Web Host son compaas que proporcionan espacio de un servidor a sus clientes.
Tipos de alojamientos Web
Gratuito Estos servicios son buenos para pginas personales, hobbies, pginas familiares, etc.
No se recomienda el servicio gratuito para los negocios o para un alto trfico de datos.
Por lo general no puede usar de su propio dominio y debe usar el del proveedor.
No es muy profesional, pero para iniciarse en desarrollo de pagina Web recomendable.
Ventajas Desventajas
Sin ningn costo. No cuenta con dominio propio.
Bueno para sitios muy pequeos. Mucha publicidad en el sitio.
Email generalmente gratis. Espacio limitado.
Trfico limitado.
Seguridad limitada.
Generalmente no soporta base de datos.
12
Soporte tcnico limitado o nulo.
Compartido (Shared Hosting) En este tipo de servicio su sitio Web es almacenado en un

servidor muy potente junto con otros cientos de sitios. Resulta una alternativa muy buena para
pequeos y medianos clientes, es un servicio econmico debido a la reduccin de costos ya que
al compartir un servidor con cientos miles o millones de personas o usuarios el costo se reduce, y
en general tiene buen rendimiento.
Puede hacer uso de su propio dominio y cuenta con gran cantidad de software a su
disposicin.
Servicio econmico. Restriccin el volumen de trfico.
Ideal para pequeos y medianos Restriccin en el soporte de base

clientes. de datos.
Varias opciones de software. Restriccin en el soporte de

software.
Uso de dominio propio.
Buen soporte tcnico.
Servidor dedicado. Se refiere al alojamiento Web en el cual el cliente alquila o compra un

ordenador completo, y por lo tanto tiene el control y la responsabilidad de administrarlo.
El cuidado fsico del equipo y de la conectividad a Internet es tarea de la empresa de alojamiento.
A diferencia de lo que ocurre con el alojamiento compartido, en donde los recursos de la
mquina son compartidos entre un nmero indeterminado de clientes, en el caso de los
servidores dedicados, generalmente es un slo cliente el que dispone de todos los recursos de la
mquina para los fines por los cuales haya contratado el servicio.
Bueno para grandes empresas.
Bueno para alto trfico.
Uso de mltiples dominios. Alto costo.
Herramientas avanzadas de email. Requiere de habilidades en el tema.
Soporta potentes bases de datos.
Soporte sin lmite de software.
Colocacin. El cliente compra su propio equipo y lo coloca en la empresa que presta el servicio.
La empresa de Host le suministra la corriente y la conexin a Internet.
Es como tener su propio servidor en la oficina solo que se encuentra en un lugar ms apropiado
para eso.
Gran ancho de banda. Alto costo.
13
Alto funcionamiento sin interrupciones. Requiere de habilidades en el tema.
Mucha seguridad. Complicado de configurar y depurar.
Opciones de software sin lmites.
Alojamiento web en la nube (cloud hosting) est basado en las tecnologas ms innovadoras
que permiten a un gran nmero de mquinas actuar como un sistema conectadas a un grupo de
medios de almacenamiento, tiene ventajas considerables sobre las soluciones de web hosting
tradicionales tal como el uso de recursos. La seguridad de un sitio web alojado en la "nube"
(cloud) est garantizada por numerosos servidores en lugar de slo uno.
14
2.- Qu es una pgina web?

Una pgina web es un fichero de texto con marcas, llamadas etiquetas (tags en ingls). Cuando este
fichero se ve con el navegador web, las etiquetas son interpretadas y se visualizan como una pgina web.
Las etiquetas no se muestran, es decir, no se ven aparentemente, pero estn, son las que determinan
el aspecto de la pgina.
Por lo tanto, si somos capaces de escribir un fichero de texto, seremos capaces de escribir una pgina
web. Slo necesitamos conocer el lenguaje de las etiquetas o HTML.
Para aprender HTML no se requiere de conocimientos previos en programacin.
Es muy simple de aprender ya que no es un lenguaje de programacin sino que es un lenguaje de

marcas.
Los ficheros HTML tienen una extensin htm o HTML
Para crear un fichero HTML solo hace falta un editor de texto. Existen determinados programas que
nos ayudan a hacerlo automticamente, pero es conveniente comenzar de una manera manual. Ello
permitir comprender mejor la estructura del lenguaje HTML.
Un documento HTML est compuesto por etiquetas.
Elementos en un documento HTML
Vamos a ver los elementos bsicos o fundamentales del HTML. Primero veremos la estructura general
de las etiquetas, marcas o comandos (a partir de ahora utilizaremos indistintamente uno de los tres
trminos para denominar los elementos que se estructura HTML), luego la estructura bsica de la
pgina, poco a poco iremos empezando a colocar cosas en las pginas, primero texto, luego imgenes,
despus enlaces y por ltimo hablaremos de los elementos que sirven para maquetar o colocar cada
cosa en el sitio que queramos, las tablas, capas.
La notacin de las etiquetas consiste en los smbolos corchetes angulares < inicio > final, que
encierran a una etiqueta.
Los elementos pueden ser llenos o vacos.
Elementos llenos
Se forman escribiendo la etiqueta correspondiente seguida del texto al que se quiere aplicar la
etiqueta y se termina la etiqueta pero con una barra inclinada (/) indicando el final de la misma.
Las etiquetas tienen una etiqueta de apertura y una de cierre, marcada por el signo /.
< inicio [atributos] > final, </ fin etiqueta >
15
Por ejemplo, el elemento H1 que sirve para dar el mximo tamao al texto, se escribir:
<H1> Texto de prueba </H1>.
Y este sera el resultado:
Texto de prueba
Si olvidas poner </H1> tendra consecuencias para el resto de la pgina tendr el mismo tamao grande.
Elementos vacos
Los elementos vacos se escriben como los llenos, pero no es necesario poner la marca repetida al final
con una barra. Esto se debe a que estos elementos no producen un efecto sobre el texto. Generalmente
se utilizan para separar bloques de texto, y por tanto no es necesario indicar su fin. Empiezan y terminan
en el mismo punto.
Por ejemplo, el elemento <HR> que sirve para dibujar una lnea horizontal en la pantalla, se escribir:
<HR>
Y este sera el resultado:
Elementos con atributos

Las etiquetas pueden contener de forma opcional u obligatoria, lo que se denominan atributos o
modificadores. Los atributos matizan el significado de la etiqueta, y se expresan de la siguiente forma:
Algunos elementos se escriben con argumento. Es como pasarle parmetros a la etiqueta, y se llaman
atributos del elemento.
<etiqueta atrib1=valor1 atrib2=valor2..............>
El valor de los atributos siempre va contenido con comillas dobles.
En la mayora de los visualizadores es posible omitir las comillas y colocar directamente el valor del
atributo. Esta prctica no es aconsejable ya que no est normalizada, no est soportada por la totalidad
de los visualizadores.
La primera palabra que aparece es el nombre o identificador de la etiqueta. A parte, podemos

encontrar atributos con sus valores, siguiendo el anterior formato. La forma correcta es escribir el
nombre de la etiqueta y los atributos en minscula, y los valores contenidos entre comillas dobles.
Algunos atributo pueden tener ms de un valor, se escriben todos los valores dentro de las mismas
comillas, separados por espacios en blanco, por ejemplo.
<etiqueta atributo="valor1 valor2">
16
Anteriormente, lo normal era escribir pginas web que cada etiqueta tuviera bastantes atributos. La
tendencia actual es la de separar el formato del contenido, descartando estos atributos, sustituyndolos
por propiedades de estilo, que veremos ms adelante.
Antes, sin estilos:
<p align="center"><b><font color=red size="4" face="Comic Sans MS, Arial, MS

Sans Serif">Bienvenidos a www.ine.es></font></b></p>
Ahora, con estilos:
<p class="presentacion">Bienvenidos a www.ine.es </p>
Donde la class presentacin contiene todos los atributos o propiedades para la etiqueta <p>, lo
veremos en los siguientes temas, como Hoja de estilo CSS.
Por ejemplo, el elemento <a> que sirve para hacer un link (enlace) con otro documento o con otra
pgina, se escribir:
<a HREF="http://www.miservidor.es/mifichero.htm"> Link de prueba </a>
Este es una etiqueta llena donde al atributo HREF se le asigna el valor que aparece entre comillas:
"http://www.miservidor.es/mifichero.htm". El texto indica que este elemento es link de prueba y realiza un
link con el fichero mifichero.htm que est en el servidor (dominio) www.miservidor.es.
Las marcas pueden escribirse tanto en maysculas como en minsculas, pero CUIDADO, el valor de
algunos atributos hay que escribirlos EXACTAMENTE como deban ser. En el ejemplo anterior no
funcionara el link si escribiramos WWW.MISERVIDOR.ES/MIFHERO.HTML en maysculas, eso es un
nombre de otra mquina y otro fichero, sera interpretado como otro servidor y otro fichero distinto.
Las etiquetas pueden anidarse unas con otras, teniendo cuidado de poner los cierres en el lugar
adecuado.
<etiqueta1><etiqueta2> Texto.. </etiqueta1></etiqueta2>
Por ejemplo, el elemento <H1> combinado con <I> que sirve para generar texto en itlica, se escribir:
<H1><I>Texto de prueba </I></H1> -- > Texto de prueba
3.- Estructura HTML

La estructura bsica de un documento HTML, no es ms que el texto definido entre las marcas:
<HTML>
.....................
</HTML>
<HTML> etiqueta de inicio del documento Web y </HTML> fin o cierre. Acta como contenedor de
todo el documento HTML, donde se definen la cabecera, y el cuerpo o parte representable del
documento.
17
La estructura bsica de un documento HTML est formada por dos partes: la cabecera <HEAD> y el
cuerpo <BODY>. Ambas partes estn dentro de las etiquetas <HTML></HTML>, que simplemente
configuran el propio documento HTML.
<HTML>
<HEAD>
informacin relativa al documento
</HEAD>
<BODY>
Contenido del documento
</BODY>
</HTML>
La etiqueta BODY engloba todo el contenido de visualizacin del documento, mientras que la etiqueta
HEAD, contiene la informacin relativa al documento.
Elementos vacos: HTML no tiene en cuenta los finales de lnea y salto de pgina del documento.
Maysculas y minsculas: los nombres de las etiquetas y atributos son insensibles a maysculas o
minsculas. De esta forma, la etiqueta <HTML> puede escribirse equivalentemente como <HTML>, o
<html>, <Html>. CUIDADO, los valores asignados a los atributos si son sensibles.
Ejemplo.
<HTML>
<HEAD>
<TITLE>Elemento BODY de html</TITLE>
</HEAD>
<BODY>
teclea este Ejemplo y veras el resultado
</BODY>
</HTML>
Cabecera de documento HTML
La etiqueta <HEAD>...</HEAD> acta como contenedor de la informacin particular, o meta-

informacin, sobre el formato del documento. Toda la informacin es cargada al principio antes que la
definicin de cuerpo, lo cual puede ser til para definir ciertas caractersticas que necesitan ser
precargadas (por ejemplo, scripts u hojas de estilos). El contenido de esta parte no se muestra en la
visualizacin de la pgina Web (a excepcin del ttulo <TITLE>.</TITLE>).Por lo tanto solo algunas
etiquetas pueden ser colocadas dentro de la parte head. Estas son:
TITLE
Indica el titulo de la pgina. Este elemento es obligatorio, para orientar al usuario en la navegacin en
un sitio Web.
Esta etiqueta es obligatoria la marca fin de etiqueta.
Ejemplo:<TITLE> Mi primera pgina </TITLE>
18
LINK
Define las relaciones entre este documento y otros, cargar ficheros externos.
Ejemplo: <LINK HREF="estilo.css" type="Text/css">
BASE
Indica informacin al usuario donde se encuentra URL de la pgina principal.
Atributos:
HREF indica URL absoluto del documento de la pgina principal o camino.
TARGET indica en que parte se debe cargar la pgina.
META
Se utiliza para comunicar instrucciones especiales al navegador cliente o al servidor en la operacin de

bsquedas. Tambin se puede incluir textos adicionales que indiquen la fecha de creacin u otros datos.
Atributos:
Sintaxis Descripcin
CONTENT Ofrece informacin relativa al valor especfico en el atributo HTTP-EQUIV. Los
rastreadores y motores de bsqueda suelen transmitir el valor del atributo
CONTENT.
HTTP-EQUIV Indica al usuario que transmita peticiones al servidor para poder ejecutar las
distintas funciones HTTPD (capacidad cliente). El valor REFRESH de este
atributo simplemente indica al cliente que vuelva a enviar el URL o el
documento actual.
NAME Indica el tipo de informacin especfica por el atributo CONTENT.
URL Indica el nombre del documento que s debe refrescar. Por defecto de carga el
documento activo.
Ejemplo:
<meta content="text/HTML; charset=ISO-8859-1" http-equiv="content-type">
Este ejemplo consigue cargar el set de caracteres que utilizara la pgina.
<META HTTP-EQUIV="refresh" CONTET="2; url="HTTP://www.sitio.com/">
Este ejemplo consigue cargar el documento sitio.com pasados 2 segundos.
SCRIPT
Indica al cliente navegador que implemente las instrucciones del lenguaje indicado por el atributo
LANGUAGE mandatos entre sus etiquetas de apertura y cierre correspondiente, tiene marca de cierre
<SCRIPT atributo=>...</SCRIPT>
Atributos:
19
LANGUAGE: su valor indica el lenguaje se encontrara despus de la etiqueta <script> estos pueden ser (
Javascript o VBScript ).
Ejemplo:
<SCRIPT LANGUAGE="JavaScript">Codigo Javascript</SCRIPT>
Esta indicando que el texto entre la etiqueta <script> </script> tiene que interpretarlo como cdigo
JavaScript.
Cuerpo de documento HTML
La etiqueta <BODY>...</BODY> contenedor para la parte visual del documento. Permite elementos de
marca dentro del cuerpo para indicar cabeceras, prrafos, listas, hiperenlaces, imgenes, capas, tablas,
etc., que dan forma al aspecto visual de la pgina.
BODY
Atributos:
Sintaxis Descripcin
ALINK Establece el color de enlaces en el momento de seleccionarlo.
BACKGROUND Permite especificar un fichero de imagen que vaya utilizar como fondo(
formatos grficos .gif . jpg )
BGCOLOR Establece el color de fondo del documento.

BGPROPERTIES Indica que el fondo no se traslade con el documento. FIXED
LEFTMARGIN Establece el margen izquierdo documento, se mide pixeles.
LINK Establece el color de enlaces de hipertexto no visitadas
TEXT Establece el color del texto de todo el documento.
TOPMARGIN Establece el margen superior del documento, se mide en pixeles.
VLINK Establece el color de enlaces de hipertexto visitados.
Cierre del documento HTML
La etiqueta </HTML> fin o cierre. Acta como delimitador del documento indicando al navegador que
el documento esta completado.
4.- Formato del texto

En esta leccin veremos todo lo relativo a lo que denominamos formato en otros editores de texto
(Word, Oppen Office, etc.): tipos de letra, fuente, tamao de la fuente, prrafo, alineacin, etc.
Apariencia del Texto

Las marcas de estilo de texto especifican el tipo de letra (negrita, cursiva, etc.) tamao, color que se
desea para la representacin de los caracteres.
Estilos de tipo lgico

Sintaxis Resultado
20
<cite>Texto cita</cite> Texto cita

<code>Texto paso fijo</code> Texto paso fijo
<kbd>Entrada Teclado</kbd> Entrada Teclado
<samp>Texto ejemplo</samp> Texto ejemplo
<strong>Texto resaltado</strong> Texto resaltado
Ejemplo: <code>Texto paso fijo</code>
Tipos de letra
Algunas de las marcas que permiten especificar la tipografa de los caracteres son las siguientes:
Sintaxis Resultado
<b>Texto Negrita </b> Texto Negrita
<big>Texto ms grande</big> Texto ms grande
<blink>Texto Parpadeante</blink> Texto Parpadeante</blink>
<i>Texto Italica (cursiva)</i> Texto Italica (cursiva)
<small>Texto ms pequeo</small> Texto ms pequeo
<sub>subindice</sub> subindice
<tt>Tamao paso fijo</tt> Tamao paso fijo
<u>Texto Subrayado </u> Texto Subrayado
<b><i>Negrita y Italica</i></b> Negrita y Italica
Todas estas marcas requieren etiquetas de comienzo y fin, y se pueden anidar.
Ejemplo: <u> Texto Subrayado </u>
Encabezados
HTML permite seis niveles predefinidos de encabezamientos con los nombres de etiqueta
<Hn>...</Hn>, h1, h2, h3, h4, h5, h6. El nivel de encabezamiento H1 se usa para las divisiones
mayores del texto, es por lo tanto, el que hace el texto ms grande. El nivel 6 se usa para las
divisiones ms pequeas del texto.
H[1..6]
Atributos:
Sintaxis Valores
ALIGN left alinear izquierda. right alinear derecha. center centrar.justify
Sintaxis Ejemplo
<h1>Cabecera</h1>
Cabecera
<h2>Cabecera</h2>
Cabecera
<h3>Cabecera</h3> Cabecera
21
<h6 align=left >Cabecera Izquierda</h6> Cabecera Izquierda
<h6 align=right>Cabecera Derecha</h6> Cabecera Derecha

<h6 align=center> Cabecera Central</h6> Cabecera Central
Todas estas marcas requieren etiquetas de comienzo y fin.
Tamao de la letra
Ya hemos visto en la leccin anterior diferentes tipos de letra. Ahora veremos lo relacionado con el
tamao y color
Para establecer la fuente a utilizar se usa la etiqueta <FONT>... </FONT>. Los tamaos de
las fuentes se definen dentro de un rango de 1 a 7 el valor por defecto es 3.
<FONT>
Atributos:
Sintaxis Descripcin
COLOR #RRGGBB o Nombre del color del dgito.
FACE Tipo de letra, se pueden encadenar una serie de tipos separados por
una coma como alternativas, para el caso que la primera no estuviera
disponible.
POINT-SIZE Expresa el tamao del fuente en puntos.
SIZE=[+ -] numero Tamao de la letra. Un signo ms o menos indica que se debe sumar
o restar uno respectivamente al nmero de BASEFONT del
documento (por defecto es 3).
WEIGHT Indica el grado de intensidad del trazo del texto, valor mnimo= 100,
mximo 900
Esta marca requiere de las etiquetas de comienzo y fin.
Ejemplo:
<font color="yellow" face="Impact,Arial,Univers">...</Font>
Fuente
<font face="Times New Roman">Times New Roman
<font face="Arial">Arial
<font size=5 face="WingDings">(WingDings)
Enlace a pgina de tabla de equivalencias de caracteres WingDings, es til para aadir algn icono,
no imagen, en nuestra pgina http://appel-vaud.ch/renaud/table-car.htm
Tamao Fuente 1 2 3 4 56 765 4321
El Color en el lenguaje HTML se puede indicar con el formato:
#RRGGBB o nombre color
RR indica cantidad de color ROJO.
22
GG indica cantidad de color VERDE.
BB indica cantidad de color AZUL.
Estos nmeros estn en numeracin hexadecimal. Esta numeracin se caracteriza por tener 16
dgitos (en lugar de los diez de la numeracin decimal).Que son:
0123456789ABCEF
<La intensidad de la composicin de los colores bsicos >FF...00 van desde mxima para FF la
ausencia 00.
Colores primarios serian:
#FF0000 - Rojo #FFFFFF - Blanco
#00FF00 - VERDE #000000 - Negro
#0000FF - Azul #FFFF00 - Amarillo
Adems de expresar los colores en formato hexadecimal, se puede designar 16 colores por su nombre:
Font color=yellow>Amarillo <Font color=redw>Rojo
<Font color=lime>lima <Font color=maroon>Marrn
<Font color=green>Verde <Font color=Gray>Gris
<Font color=olive>Verde oliva <Font color=black>Negro
<Font color=aqua>Azul Cielo <Font color=silver>Plata
<Font color=teal>Gris-Azul <Font color=white>Bl
<Font color=Blue>Azul <Font color=purple>Prpura
<Font color=navy>Azul oscuro <Font color=fuchsia>Fusia co
Etiqueta P (prrafo)
La etiqueta <P>...</P> inserta un prrafo en el documento, se usa como un delimitador de prrafo

en HTML. Inserta automticamente un salto de lnea antes de comenzar a escribir. Adicionalmente
permite alinear el texto al centro, a la izquierda o a la derecha.
Atributos
ALIGN (su uso no recomendado)
left, right y center. Las alineaciones a izquierda y derecha desplazan el texto a los mrgenes
izquierda y derecha respectivamente mientras que la alineacin central centra el texto.
Justify, debe justificar el texto.
23
Lnea de Comentarios
Es muy til escribir comentarios en el documento HTML sobre el cdigo que escribimos, que nos
pueden servir para recordar posteriormente sobre lo que hicimos, y que no queremos que se vean en
pantalla.
Esto se consigue encerrando dichos comentarios entre dos etiquetas:
<! texto comentario -->
Ejemplo:

Comando quiebre o salto de lnea
El comando <BR> permite hacer un quiebre (salto) de lnea.
Adicionalmente se permite realizar saltos ms largos o ms cortos, dejar atrs las imgenes, etctera.
Atributos:
clear=left provoca que la siguiente lnea de texto comience abajo tan pronto como el margen
izquierdo est libre.
clear=right provoca que la siguiente lnea de texto comience abajo tan pronto como el margen
derecho est libre.
clear=all provoca que la siguiente lnea de texto comience abajo tan pronto como los mrgenes
derecho e izquierdo estn libre.
none Fuerza el aclarado del texto sin indicar un margen especifico.
Esta marca solo requiere de las etiquetas de comienzo.
Ejemplos:
<BR clear=left> El texto se separa antes y despus de una imagen, a la
izquierda de sta</BR>
HR (lnea horizontal)
Si necesita separar dos secciones diferentes de una pgina, ya sea texto o no, puede emplearse una
nueva etiqueta: <hr>. Su nombre proviene del ingls Horizontal Rule (lnea horizontal). Esta etiqueta est
formada por una nica instruccin y provoca que el navegador dibuje una lnea horizontal separando dos
contenidos.
Este elemento posee un conjunto de atributos que han sido desaprobados en HTML 4.01. Estos
atributos son: align, noshade, size y width, su uso no es recomendado.
Atributos
Sintaxis Descripcin
ALIGN left, right, center. Determina la alineacin de la lnea.
24
COLOR nombre del color o valor RGB.
NOSHADE Dibuja la lnea como una lnea negra. Por defecto es una sombreada.
SIZE="n" Especifica el ancho vertical de la lnea divisoria en pixeles, donde n

es un entero.
WIDTH="n" ,o "n%" Especifica el ancho horizontal de la lnea.
Caracteres Especiales
Algunos caracteres distintos de los habituales son considerados en el mundo de la informtica como
caracteres especiales. Dentro de estos se incluyen las vocales acentuadas y la letra ee.
En los ltimos aos se ha avanzado mucho en conseguir que cualquier ordenador pueda leer todos los
caracteres de todos los idiomas. En concreto es ya poco habitual que no se soporten los caracteres
latinos. En cualquier caso es interesante saber que HTML ofrece mecanismos para insertar estos y otros
caracteres especiales en aquellos sistemas donde no estn soportados.
Se considera caracteres especiales por HTML " Si se puede escribir un carcter pulsando sobre una
sola tecla del teclado o usando como ayuda las teclas MAYSCULAS o ALT-GR entonces ese carcter
es vlido". En el teclado espaol hay que hacer tres excepciones: la letra y los smbolos y que no
son vlidas.
A estos cdigos se les llama entidades de caracteres
Caracteres con nombre: son las que los smbolos & y ; se pone el nombre (abreviatura) asignado a
ese carcter. Slo existen para los caracteres especiales ms usados.
Una entidad de carcter con nombre tiene tres partes: & + nombre +;
<font face="Impact,Arial,Univers">Á</Font>
Caracteres numricas: en este tipo de entidades entre & y ; se escribe el nmero asignado a ese
carcter en el estndar ISO-Latin-1 precedido de una almohadilla: #. Este tipo de entidades son menos
usadas que las anteriores aunque tienen la ventaja de abarcar cualquier letra posible en cualquier idioma.
Una entidad de carcter numrica tiene cuatro partes: & + # +nmero + ;
<font face="Impact,Arial,Univers">Á</Font>
los caracteres <, >, &, and " tienen un significado especial en el lenguaje HTML. Pueden
representarse como < , > , & , y " respectivamente.
Los caracteres que no estn en el teclado pueden introducirse en el documento como &#NNN;
Donde NNN es el nmero decimal de cdigo ASII del carcter. Por ejemplo, el smbolo
Copyright puede ser introducido como &169; .
Es importante respetar las maysculas y minsculas en las entidades de caracteres. Si no se usa

correctamente el resultado obtenido no ser el deseado o no funcionar.
25
Tabla caracteres espaoles

Carcter Sec. escape Sec. Carcter Sec. Sec.
numrica escape numrica
á &#225 Á &#193
é &#233 É &#201
í &#237 Í &#205
ó &#243 Ó &#211
ú &#250 Ú &#218
ü &#252 Ü &#220
ñ &#164 Ñ &#165
-------- &#161 -------- &#191
Caracteres reservados
Existen una serie de caracteres que tienen un significado especial. La mayora de estos caracteres ya
los conocemos y estamos acostumbrados al crear una pgina. Algunos caracteres son: <, >, & y ".
La gran pregunta seria Cmo podemos incluirlos en nuestras pginas?
Por ejemplo, si se desea poner la cadena "la etiqueta <B> muestra el texto en negrilla".
<font face="Arial> la etiqueta <B> muestra el texto en negrilla</Font>
Si se pone tal cual, el navegador la confundir con una etiqueta ms y pondr el texto siguiente en
negrita. Existe alguna forma de escribir el nombre de una etiqueta? La respuesta es, S.
Y la solucin es usar las entidades de los caracteres reservados de HTML.
Estas entidades reservadas.
Carcter Sec. Escape Sec. numrico
< < &#139
> > &#155
& & &#38
" &#34
Otros caracteres
Existen otros caracteres que son de especial utilidad en la creacin de pginas Web.
Carcter Sec. Escape Sec. numrico

© ©
® ®
Espacio en blanco ------------
<font face="Impact> © prohibida la reproduccin total o parcial</font>
26
Preformateado
El hecho de que HTML ignore los retornos de carro a la hora de mostrar un texto no es un
comportamiento arbitrario, sino que es la forma que tenemos de que, independientemente de la ventana
del visualizador, nuestro prrafo quede convenientemente justificado Sin embargo, es posible que en
alguna ocasin queramos que el texto aparezca en el visualizador tal y como lo hemos introducido,
respetando los retornos de carro e incluso los espacios que podamos haber dejado entre caracteres.
Para ello podemos utilizar la marca <PRE> y englobar en ella todo el texto del documento.
La marca <PRE> respeta tanto los retornos de carro como los espacios en blanco del archivo original,
y la letra aparece como tipo de letra de espacio no proporcional (El tipo de letra usado por el texto
preformateado es el mismo que el de <TT> ... </TT>), y no con el tipo de letra habitual del visualizador.
Esta marca permite mostrar el texto preformateado tal cual.
Adems, en el texto preformateado no se interpretan los caracteres especiales HTML: <, > y &.
Texto Preformateado El elemento <pre>...</pre> se utiliza para encerrar texto presentarlo como un
ancho fijo normalmente con una fuente y paso fijo, respetando los retornos de carro y los espacios entre
las palabras.
Blockquote
Texto El elemento blockquote define un bloque de citacin. <blockquote> ... </blockquote>
Indentando el texto ligeramente y/o ponindolo en cursiva, provoca adems un comienzo de prrafo y
fuerza a un espacio vertical antes y despus de la cita.
Ejemplo:
Cita de una historia triste.
Muchos aos despus, frente al pelotn de fusilamiento, el coronel Aurelio haba de recordar
aquella tarde remota en que su padre lo llevo a conocer al hielo.
Gabriel Garca Mrquez, Cien aos de soledad.
Alineado central de texto y objetos
La etiqueta <CENTER> ...</CENTER> permite la alineacin al centro de todo lo que se encuentre

ambas etiquetas, bloques de texto, figuras, tablas, etc.
Este texto est centrado. Elemento desaprobado no se recomienda su uso, se utiliza css.
Tabla centrada
27
5.- Listas
El lenguaje HTML nos permite la posibilidad de crear listas. Es posible crear listas numeradas, no
numeradas, de definicin, etc. gracias a las cuales se facilitar la labor de diseo para organizar los datos
y dar una apariencia ms agradable a la pgina. Las listas son uno de los elementos HTML ms
comnmente usados en las pginas web. HTML soporta varias etiquetas para crearlas.
El lenguaje HTML define los siguientes tipos de listas:

Numerada u ordenada.
No ordenada.
Listas de glosario o de definicin.
Mens.
Usadas con prrafos cortos.
Listas de directorio.
La forma de crear listas difiere ligeramente de los elementos HTML vistos hasta ahora, ya que consta
de dos pasos.
Primero hay que definir el tipo de lista y despus deben insertarse cada uno de los elementos de lista.
Al crear una lista deberemos indicar su etiqueta inicio y su fin. Para empezar la lista usaremos la
instruccin de inicio de la etiqueta que defina esa lista. Existe una etiqueta para cada tipo distinto de lista.
Por ejemplo, para crear una lista no ordenada ser necesario usar la etiqueta <UL> elementos</UL>
Una vez hemos abierto la lista deberemos insertar, como hemos dicho antes, cada uno de los
elementos de lista. Para ello usaremos una nueva etiqueta (o dos en algn caso) que depender del tipo
de lista. En el caso de la lista no ordenada los elementos se introducen con la etiqueta de una nica
instruccin <LI>
Ejemplo:
<UL>
<LI>Blanco
<LI>Azul
<LI>Rojo
</UL>
Se pueden anidar para conseguir sublistas dentro de las listas.
Hasta ahora todo es igual, la diferencia es la etiqueta <LI> (En otras listas se usar tambin LI o alguna
etiqueta similar). La etiqueta <UL> no tiene ningn significado por s sola, necesita a LI. Y por otro lado
<LI> no puede ser usado como una etiqueta independiente sino que debe ir dentro de UL. Por esta razn
en ocasiones se suele llamar a <LI> subetiqueta.
<LI>, define cada elemento de la lista.
Atributos:
ALIGN = left, right, center.
TYPE= (en listas desordenadas) disk, circle, square (listas ordenadas) A,a,I,i,1
TYPE sustituye los nmeros de una lista numerada por los diferentes valores que puede tomar:
28
COMPACT, hace que la lista se visualice con un espacio mnimo entre lneas
DISC disco lleno
CIRCLE Crculo hueco
SQUARE Signo cuadrado
A Letras maysculas
a minsculas
I Nmeros romanos
i nmeros romanos en minscula
VALUE indica cul ser el primer nmero que se utilizar en una secuencia de numeracin.
Listas desordenadas
Llamadas listas no numeradas, son listas en las que no es necesario numeracin de los elementos que
la componen, sino que cada elemento tiene delante un smbolo (un punto, un cuadrado, etc.).
La forma de especificar una lista desordenada es mediante la marca <UL>. Las etiquetas de comienzo
y fin de esta marca son obligatorias.
Cada elemento de la lista se identifica mediante la marca <LI>. La etiqueta de fin para la marca </LI> se
puede omitir. Es posible en las listas desordenadas especificar el smbolo que va a aparecer delante de
cada elemento de la lista.
Las listas desordenadas pueden ser anidadas una dentro de otra.
Listas ordenadas
Listas numeradas son aquellas en las que cada elemento muestra un nmero que indica el orden del
elemento dentro del conjunto de la lista.
La marca para crear una lista ordenada es <OL> .... </OL>. Son obligatorias las etiquetas de comienzo
y fin de estas marcas.
Cada elemento de la lista ordenada se identifica escribindolo dentro de la marca <LI> ....</LI>.
La etiqueta de fin puede ser omitida.
Con la marca LI no es necesario introducir un retorno de carro detrs de cada elemento de la lista.
Es posible especificar el tipo de numeracin que se dar (nmeros arbigos, nmeros romanos, letras,
etc.), por defecto se sigue la numeracin rabe.
Las listas numeradas pueden ser anidadas una dentro de otra.
OL
Atributos:
ALIGN = left, ight, center, justify
START= nmero de inicio de la lista
TYPE= Tipo de numeracin: letras maysculas, minsculas, nmeros romanos [ A,a,I,i,1]
29
Listas marcadas o no numeradas. Define una lista no ordenada, que consiste de una cantidad de
elementos multilnea separados <li>, marcados con algn smbolo.
Listas definicin
Como su nombre indica se utilizan para crear glosarios, es decir, listas de definiciones o de
descripciones.
El principio y final de este tipo de listas se delimitan con la etiqueta <DL>...</DL >.
La insercin de elemento es ligeramente distinta a la del resto de listas ya que no se usa la etiqueta <LI>.
Esto es as porque en este caso cada uno de los elementos de lista est compuesto de dos partes:
La palabra que queremos definir: para insertar la palabra usaremos la etiqueta <DT> que proviene de
Definition Term (Trmino de definicin). Esta nueva etiqueta funciona de forma muy similar a <LI> y la
instruccin de fin (</DT>) es igualmente optativa.
La definicin o descripcin de esa palabra: una vez indicada la palabra es hora de poner su definicin.
Para ello usamos otra nueva etiqueta: <DD> cuyas siglas significan Definition Description (parte de
la definicin que contiene la descripcin). La definicin suele ser un prrafo y ser mostrado por el
navegador sangrado con respecto al texto anterior.
Defina una lista descriptiva o lista de definicin. Se espera que cada elemento de la lista tenga dos
partes, identificadas por los elementos <dt><dd>
Como puede comprobar faltan algunas etiquetas bsicas HTML. Para su cumplimentacin es necesario
que teclee las etiquetas necesarias para su correcta visualizacin.
Anidamiento de listas
El lenguaje HTML permite insertar unas listas dentro de otras ya sean del mismo o de distinto tipo. A
esta posibilidad se le llama anidamiento de listas y la forma de realizarlo es incluir todo el cdigo de una
lista dentro de uno de los elementos de la otra. En el siguiente ejemplo combinaremos algunos de los
ejemplos anteriores para dar lugar a un listado con varias listas anidadas unas dentro de otras:
Como puede comprobar faltan algunas etiquetas bsicas HTML. Para su cumplimentacin es
necesario que escriba las etiquetas necesarias para su correcta visualizacin.
30
6.- Enlaces o hipervnculo

La caracterstica que ms ha influido en el espectacular xito del WEB ha sido, aparte la de su
carcter multimedia, la posibilidad de unir los distintos documentos repartidos por todo el mundo por
medio de enlaces hipertexto, son un elemento esencial para cualquier pgina web.
En cualquier pgina web tiene imgenes o texto, que al hacer clic nos llevan a otra pgina del mismo
sitio, o a una pgina de un sitio distinto. Esto es un enlace o hiperenlace (en ingls link o hyperlink)
tambin llamado hipertexto o hipervnculo.
Los enlaces se diferencian del texto normal porque al colocar el cursor encima, este cambia el icono y
pasa de una flecha a una mano. Es muy frecuente que los enlaces aparezcan subrayados, ya que es la
opcin por defecto que les asigna el HTML.
<A> hiperenlace</A>
Atributos:
Sintaxis Descripcin
HREF URL de la pgina que se desea cargar o enlazar
NAME Indica adonde debe saltar el control dentro de la pgina
TARGET Indica el nombre de la ventana en la que se visualizara la pgina
_blank Abre una nueva sesin del navegador
_self Hace que el enlace se cargue en el propio frame
_top Se carga a pantalla completa
_parent Muestra el contenido en la ventana superior
Formato de enlace
El color de los vnculos de texto cambia de color cuando el enlace ha sido ya visitado o cuando el
puntero del ratn se posiciona sobre l, estos cambios estn predefinidos en cada navegador, pero
nosotros podemos cambiar esos colores.
Los colores de los vnculos pueden especificarse a travs de las propiedades de la pgina, en la
etiqueta <body>. Los colores de los enlaces se asignan por medio de los atributos link (vnculo), alink
(vnculo activo), y vlink (vnculo visitado).
link permite determinar el color de los enlaces sin visitar (enlace que no ha sido pulsado ninguna vez).
alink permite determinar el color del enlace activo (enlace que acaba de ser pulsado).
vlink permite determinar el color de los enlaces visitados (enlaces que ya han sido pulsados).
Ejemplo:
Si introducimos en la etiqueta <body>
<body link="#FF0000" vlink="#FF0099" alink="#FF9900">

...
31
<a href="http://www.ine.es.com" target ="_blank">www.ine.es</a>

...
Mientras no se visite la pgina www.ine.es, el enlace ser de color rojo (#FF0000): www.ine.es
Mientras la pgina www.aulaclic.com sea la ltima visitada, el enlace ser de color www.ine.es
fucsia (#FF0099):
Cuando se haya visitado la pgina www.aulaclic.com, el enlace ser de color naranja www.ine.es
(#FF9900):
Estructura
<A href="direccin URL a pgina destino">texto indicativo del enlace</A>
Tipos de referencias.
Enlaces dentro de la pgina.
Enlaces con otra pgina nuestro sitio Web.
Enlaces con una pgina fuera de nuestro sistema.
Enlaces con una direccin de email.
Vnculo a ficheros para descarga.
Atributo: title, sirve para mostrar informacin adicional sobre el destino del enlace cuando el usuario
deje unos instantes el cursor encima del enlace.
HTML por defecto, cuando se abre un enlace la nueva pgina se visualizara en la misma ventana. Si
deseamos abrir una nueva ventana, tendremos que utilizar el atributo target="_blank". As pues si en
nuestra pgina queremos informar sobre la existencia de otra pgina del mismo tema, colocaremos un
enlace a ella y le pondremos el atributo target="_blank" para evitar que el usuario se vaya a esa pgina y
no se acuerde de volver a la nuestra.
Enlaces a otras pginas
Para establecer un enlace con otros documentos, es necesario conocer la ubicacin exacta del
documento que se referenciar. Una ubicacin, puede ser referenciada en forma relativa o absoluta.
Existen diferentes formas de expresar una referencia a una pgina a travs del atributo href.
Referencia absoluta:
Conduce a una ubicacin externa al sitio en el que se encuentra la pgina. La ubicacin es en

Internet, en este caso hay que empezar la referencia por http:// , el nombre del dominio y algunas
veces el nombre de la pgina. Si no se escribe el nombre de la pgina se cargar la pgina de
inicio asociada al dominio.
32
Por ejemplo,
href="http://www.ine.es" tendr el mismo efecto que

href="http://www.ine.es/index.htm"
Referencia relativa al sitio:
Conduce a un documento situado dentro del mismo sitio que la pagina actual. Un sitio web es
un conjunto de archivos y carpetas, relacionados entre s, con un diseo similar o un objetivo
comn, estando todos ellos dentro de una misma carpeta, conocida como carpeta raz del sitio.
Por ejemplo:
En nuestro caso teniendo en cuenta que todas nuestras pginas ejemplos estn ubicados
dentro de la carpeta c:/CursoWeb/ la etiqueta que tenemos que generar seria.
href="ejemplo12.html"
<a href="ejemplo12.html ">Ver ejemplo12</a>
Al hacer clic con el ratn sobre nos mostrara el contenido de la pgina

ejemplo12.html
Nota: Es muy importante que las direcciones sean correctas (respetando las maysculas y
minsculas, pues los Servidores Web UNIX s las distinguen).
Enlaces dentro de la pgina o locales
A veces, en el caso de documentos (o pginas) muy extensos, nos puede interesar dar un salto una
posicin a otra previamente determinada.
Esto posibilita hacer enlaces que lleven al usuario de una parte del documento a otra dentro del mismo
documento con solo hacer clic. A este tipo de enlaces los llamaremos enlaces locales.
Para que realmente se pueda apreciar este tipo de enlaces tiene que producirse un scroll o
desplazamiento vertical cuando se visualice la pgina.
Estos enlaces constan de dos etiquetas:
El punto de enlace o marca:
Corresponde a la zona en la cual el usuario har clic, para viajar a otra parte de la pgina.
Esta zona aparece subrayada en el documento. Un enlace local se crea delimitando la zona con la
etiqueta <A href="#nombre"> texto enlace... </A>, el nombre es el punto o marca
referenciado.
33
El nombre enlazado o referenciado
Corresponde al punto o marca de la zona del documento a la cual el usuario llegar al hacer clic en
la referencia correspondiente. Un nombre local se crea delimitando la zona con el comando <A
NAME="nombre"> ... </A>, en que nombre es la etiqueta que asignamos a ese punto.
A veces, en el caso de documentos muy extensos, nos puede interesar dar un salto desde una seccin
a otra determinada.
Su estructura es:
<A HREF="#marca_o_punto"> enlace al punto </A>
Y en el sitio exacto a donde queremos saltar, debemos poner la siguiente etiqueta:
<A NAME="marca_o_punto"> </A>
Si se quiere saltar desde aqu a la pantalla final, pongo la siguiente etiqueta:
<A HREF="#final"> Pulsa para ir al final</A>
Y al final de pgina donde queremos que se posicione.
<A NAME="final"> </A>
Enlace en un punto de otra pgina
Puede ser que tengamos una sola pgina. Pero lo ms frecuente es que tengamos varias pginas,
una inicial (o principal) y otras conectadas a ella, e incluso entre ellas mismas.
Supongamos que queremos enlazar con la pgina creada en el ejemplo del anterior, con
ejemplo11.html. En este caso, simplemente sustituimos la URL (el destino del enlace) por el nombre del
fichero.
<A HREF="Ejemplo11.htm"> Enlace unidad Uno</A>
Si queremos que vaya a un punto definido dentro de ejemplo12.html, tendremos que crear un punto de
referencia donde queremos posicionarnos.
Lo veremos con el siguiente ejemplo, Queremos poner un enlace que nos lleve al ejemplo anterior,
pero en un sitio concreto, donde he puesto la marca <A NAME="alinear"></A>. Entonces la etiqueta
ser:
<A HREF="Ejemplo11.htm#uno">Ejemplo 12</A>
34
Enlaces con una direccin de email
Enlaces con una direccin de correo electrnico, abre la aplicacin Outlook o aplicacin de correo que
tengamos prefijado, para escribir el contenido del correo, cuyo destinatario ser el especificado despus
de mailto:DireccionDeCorreoDestino. La estructura de la etiqueta es:
<A HREF="mailto: direccin de email destino"> Texto del enlace </A>
Vnculo a ficheros para descarga
El valor del atributo href normalmente ser la ubicacin de una pgina web (con extensin
htm, HTML, asp, php...) pero tambin puede ser un fichero de otro formato, una hoja de Excel,
un documento Word, un documento Adobe con extensin pdf.
Cuando el enlace no es a una pgina Web nos aparecer el cuadro de dilogo que seguro
habrs visto alguna vez en el que el navegador le pide al usuario permiso para descargar el
fichero en su ordenador.
Ejemplo:
<a href="curso_css.doc" tarjet=_blank >haz clic aquí para descargarte

el fichero</a>
clic aqu para descargarte el fichero
Si hacemos clic sobre el enlace aparece un dialogo de Windows Vista, ser diferente para cada
sistema operativo, donde como se ver en la figura se puede elegir Abrir, Guardar, Guardar Como,
7.- Imgenes
Para insertar una imagen en una pgina Web es necesario que este soportado en un archivo
independiente del documento HTML. El formato de la imagen archivo debe ser extensin GIF o JPEG.
Los archivos JPG que pueden ser vistos con la prctica totalidad de navegadores. Es importante resaltar
que cambiando la extensin de una imagen no cambiamos el formato de dicha imagen.
35
Las imgenes son un elemento esencial para diseo atractivo. Un excesivo nmero de imgenes en
una pgina pueden hacer ralentizar el proceso de visualizacin.
Es importante conseguir un equilibrio entre un diseo atractivo y el tiempo necesario para visualizarse.
Formato GIF.
Las siglas GIF provienen del ingls Graphics Interchange Format o formato de intercambio de
grficos. Este formato fue desarrollado por CompuServe para proporcionar un mecanismo de transmisin
de archivos de imgenes mediante lneas telefnicas. Este mecanismo consiste en comprimir las
imgenes con un algoritmo para disminuir el peso (tamao en Kb).
Las imgenes en formato GIF estn limitadas a 256 colores simultneos.
Una propiedad interesante del formato GIF es la de poder seleccionar un color transparente.
As, cuando la imagen en cuestin es mostrada en un visualizador, la zona de la imagen con el color
transparente toma el color del fondo del documento. Otra propiedad interesante del formato GIF, es la
poder crear grficos animados, el formato de este tipo de imgenes se le denomina GIF 89.
Los archivos de imgenes en este formato tienen asociados la extensin .gif.
Formato JPEG
JPEG son las iniciales de Joint Photographic Expert Group (Grupo de Expertos Fotogrficos
Reunidos). Comprime las imgenes para una transmisin ms rpida, aunque difiere en el algoritmo de
compresin.
Mientras que con el formato GIF la comprensin de un archivo de imgenes viene determinada, JPEG
nos permite especificar la relacin de compresin deseada, por lo que modificar el tamao del archivo.
Naturalmente, a mayor relacin de compresin, menor peso (tamao en Kb) y peor calidad.
Disminuyendo la compresin obtenemos imgenes de mayor calidad pero tambin de mayor tamao.
No debemos obsesionarnos con la calidad de las imgenes. Hay que tener presente que Internet es
en ocasiones un medio de transmisin bastante lento, por lo que a veces es preferible perder algo de
calidad en las imgenes antes de aburrir al usuario con nuestros documentos.
Los archivos de imgenes en este formato tienen asociado la extensin .jpg
Insertar imgenes
Con la etiqueta <IMG atributos /> podemos incluir un grfico dentro de un documento HTML. Con ello,
conseguimos que a insertar imgenes para dar ms vida a nuestra pgina, iconos, mapas, botones, etc.
Los formatos que puede interpretar el IE sin recurrir a aplicaciones auxiliares son los formatos GIF y
JPEG.
IMG
Atributos:
36
Sintaxis Descripcin
ALIGN Alineacin de la imagen en el documento valores (top, middle, bottom, left,
right)
ALT Texto alternativo.
BORDER Ancho del borde de la imagen, cuando existe un enlace (border=0, sin border).
HEIGHT Altura de la imagen en pixeles.
HSPACE Establece el espacio en blanco que se coloca a la izquierda y derecha de la
imagen, el tamao se define en pixeles.
ISMAP Indica al navegador que existe un mapeo de imgenes en el servidor Web
LOOP Indica al navegador que reproduzca el archivo de imagen en movimiento de
forma permanente o un numero especifico de veces ( por ejemplo LOOP=5 ).
SRC URL de la imagen.
Ubicacin ser direccin absoluta, src=http://www.ine.es/img/glass.gif
Ubicacin puede ser direccin relativa si la imagen est en la misma carpeta que
la pgina web src=cuadro.jpgf
TITLE Especifica la cadena de texto que se vincular a un grfico en un archivo HTML.
Esta cadena no se visualiza.
USEMAP Define un nombre para la imagen como un mapa interactivo.
VSPACE Establece el espacio en blanco que se coloca a la arriba y abajo de la imagen, el
tamao se define en pixeles.
WIDTH Anchura de la imagen en pixeles.
Cuando un navegador no puede cargar la imagen ubicada en scr no puede mostrar la imagen. En su
lugar muestra una imagen de error, como en Internet Explorer que muestra o el texto contenido en
el atributo alt ya que su funcin: es mostrar un texto alternativo cuando no se puede mostrar la imagen,
por cualquiera de las razones no exista la imagen en la ubicacin definida o formato no es correcto.
El anterior prrafo es importante tenerlo en cuenta para la accesibilidad a la web. Imaginar que
tenemos insertadas una imagen que hacen de botn que sirve de enlace para ir a partes de nuestra web,
como Siguiente o Men.
Si no ponemos el alt, y no se Muestran las imgenes, el usuario no podr navegar correctamente en
nuestro web, por falta de informacin. La descripcin que pongamos en alt tambin ser de gran utilidad
para las personas ciegas puesto que sus ordenadores leen esa descripcin y se la dicen (sonido) al
invidente.
Opcionalmente se puede controlar el tamao de la imagen, es muy frecuente aadir a la imagen los
atributos height (alto) y width (ancho), introduciendo en ellos las dimensiones de la imagen, en pxeles.
No obstante es conveniente para aumentar o disminuir el tamao de una imagen utilizar un programa
de Diseo grfico, para optimizar su visualizacin.
Hay que tener en cuenta que al cargar una pgina, el navegador muestra primero el texto y despus
las imgenes. Si conoce las dimensiones de cada imagen, puede dejar un hueco reservado para ellas lo
que har que la pagina se pueda leer antes que est totalmente cargada.
Otro atributo frecuente en las imgenes es title. Si lo ponemos en la imagen, al posicionar con el ratn
encima de la imagen se mostrara el texto del atributo.
Cuando insertamos una imagen sta se sita justo en el lugar donde est la etiqueta IMG con
independencia de si hay texto alrededor o no, por esta razn este tipo de imgenes reciben el nombre de
imgenes en lnea. Usando el atributo align podamos insertar imgenes pequeas como si fuesen parte
de un prrafo.
37
Nota:
A la hora de elegir una imagen hemos de tener en cuenta el tamao. Es fcil que una sola imagen
ocupe ms tamao que el resto de elementos de la pgina. Por eso hemos de intentar optimizar las
imgenes, e intentar que el "peso" sea lo menos posible, es decir que su tamao en Kb. El sentido ms
comn nos dice que cuanto ms grande sea la imagen, ms pesa, por lo tanto, hay que procurar usar
imgenes lo ms pequeas posibles, sin perder la informacin que se desea transmitir.
Dos imgenes que se visualizan con mismo tamao pueden tener pesos diferentes, ya que pueden
tener resoluciones distintas. Es decir que aparte del tamao influye la resolucin. En la resolucin de una
imagen debe buscarse siempre el equilibrio entre nitidez y tamao en Kb, como ya hemos indicado, para
optimizar la resolucin de las imgenes conviene utilizar un programa grfico, ya que estos programas
tienen opciones para ello.
Antes de empezar realizar el ejemplo vamos a crear una carpeta en nuestro PC que sirva de
contenedor de imgenes para los ejercicios del curso.
Crear una subcarpeta en nuestra carpeta CursoWeb:
Abrimos Explorador de Windows Unidad C elegimos la carpeta CursoWeb Botn

derechoNuevoCarpetaTeclear imagen
Con esto hemos creado una subcarpeta de CursoWeb la llamaremos imagen.
Ejemplo:
<img src="imagen/circulo.bif" border=1 alt="texto alternativo"

align=middle width="32px" height="32px"/>Hola
Hola
Con esta etiqueta estars asociando la pgina con la imagen circulo.jpg que se encuentra en la
directorio imagen que es una subcarpeta de la carpeta CursoWeb (la carpeta donde se encuentra la
pagina MiPagina.htm), si su ubicacin fuera otra tendramos que indicar la direccin absoluta de la
imagen.
Ejemplo de ubicacin, si la imagen estuviese nuestra carpeta c:/imagenes/iconos/circulo.bif, la

ubicacin seria absoluta.
<img src="c:/imagenes/iconos/circulo.gif" />
La imagen medir 32 pxeles de ancho, y 32 pxeles de alto (atributos width y height).Tendr un

borde de 1 pxeles (atributo border). En el caso de que la imagen no pueda ser visualizada, o se situ el
puntero sobre ella, se mostrar (atributo alt). La imagen est alineada en el centro con
respecto al texto align=middle.
Como descargar una imagen que nos interesa de una pgina que estamos visitando.
1.- Nos situamos con el ratn sobre la imagen.
38
2.- pulsamos botn derecho Guardar imagen como
3.- Guardamos la imagen con un nombre propuesto y en la
carpeta que se desea.
Uso de imgenes como enlaces

Para utilizar una imagen como enlace a otra parte de la pgina o a otra pgina, simplemente hay
que introducirlas dentro de la etiqueta <A HREF> de la siguiente manera:
<A HREF=enlace> <IMG SRC=imagen> </A>
8.- Tablas
Una tabla es una manera muy compacta y clara de mostrar la informacin. Una tabla en HTML se
entiende como un conjunto de filas (fila=horizontal), apiladas una sobre otra. Cada fila contiene a su vez
un conjunto de celdas, puestas una al lado de la otra.
Una tabla se declara usando el comando <TABLE> </TABLE>.
Dentro de la tabla, se usa <TR>... </TR> para crear una nueva fila y dentro de la fila, <TD>... </TD> para
crea una nueva columna. El elemento de cierre y celda es optativo.
El texto incluido dentro de cada celda puede ser formateado con cualquiera de las etiqueta vistas
anteriormente.
Todos estos comandos aceptan numerosos modificadores. Se pueden, entre otras cosas, unir celdas,
especificar la alineacin del contenido de la celda, y mucho ms.
Ejemplo de tabla:
<TABLE>
<TR><TD>Celda A1</TD><TD>Celda B1</TD><TD>Celda C1</TD></TR>
</TABLE>
Es posible modificar estos atributos de toda una fila, especificndolos tan solo en la etiqueta <tr>, en
lugar de en cada una de las etiquetas <td>.
IMPORTANTE: Hay que tener en cuenta que los atributos tienen jerarqua o prioridad en este orden:
de mayor a menor: tabla, dila, columna, celda. Por esa razn tienen ms prioridad los atributos
establecidos para una fila que los establecidos para toda la tabla.
La explicacin de este comportamiento se debe a la regla establecidas dentro jerarqua de atributos

de HTML, como puedes observar la etiqueta <table bgcolor="#FFCC99"> fijamos el color naranja para
todos los elementos de la tabla, en la primera fila con <tr bgcolor="#0099CC"> fijamos en azul , pero en la
segunda celda de la fila tenemos <td bgcolor="#66CC99"> verde, luego ese color tiene mayor jerarqua y
predomina, machacando el azul definido por <tr>, as como fila segunda no tiene definido ningn color
39
asume el de la tabla. La tercera el color se fija con <tr bgcolor="yellow"> para toda la fila, como no existe
ninguna etiqueta <td> con atributo bgcolor en las celdas que la forma, asume amarillo.
Estas reglas jerrquicas se cumplen con todos los atributos de estilo en las etiquetas HTML. Hemos
de tener esto muy presente para entender ms adelante las reglas de estilo CSS.
TABLE
Atributos:
Sintaxis Descripcin
ALIGN [left,right,center] Posicin de la tabla dentro de la ventana.
BACKGROUND Permite utilizar una imagen como fondo de la tabla
BGCOLOR Define el color RGB o nombre del color para el fondo de la tabla.
BORDER Ancho de la caja alrededor de la tabla.
BORDERCOLOR Color del borde de la tabla.
BORDERCOLORDA Define el color RGB o nombre del color oscuro, del efecto de tres
RK dimensiones de los bordes de la tabla
BORDERCOLORLI Define el color RGB o nombre del color claro, del efecto de tres
GHT dimensiones de los bordes de la tabla
CELLPANDING Espacio entre las celdas (en pixeles) y su contenido.
CELLSPANDING Espacios entre las celdas (en pixeles).
COLS Nmero (total de columnas).
HEIGHT Altura de la tabla en pixeles
RULES Muestra los marcos de una tabla [none, basic, rows, cols, all].
SPAN Nmero entero positivo que especifica a cuantas columnas elemento se
aplicar este elemento (por defecto span=1).
VALIGN Alineacin vertical de la tabla.
ALIGN Determina la alineacin de la tabla.
WIDHT Anchura de la tabla dentro del documento.
La etiqueta <CAPTION> ... </CAPTION> define el nombre de la tabla.
Es conveniente que las tablas tengan un ttulo que las identifique y aclare su contenido.
CAPTION
Atributos:
* VALIGN= [left,right] Define la alineacin del texto.
Ejemplo.
<TABLE>
<CAPTION>identificador del contenido</CAPTION>
</TABLE>
Bordes de la tabla
Existe la posibilidad de colocar bordes exteriores en una tabla en HTML, se utiliza el atributo BORDER
dentro de la etiqueta <TABLE>.
El ancho se indica con un nmero el tamao del borde exterior de la tabla.
40
El definir el BORDER coloca bordes externos e internos en la tabla, pero la anchura que se especifica
solo afecta a los bordes externos.
Tamao de la tabla
El tamao de la tabla viene definido por defecto por el texto o los grficos que contiene. HTML permite
modificar el ancho de la tabla. La forma de establecer una anchura fija en una tabla es utilizar el atributo
WIDTH dentro de la etiqueta <TABLE>.
Ejemplo:
<TABLE WIDTH="anchura"> </TABLE>
La anchura puede ser un nmero que especifique en pixel la anchura absoluta de la tabla, o %
indicarlo por medio de porcentaje que indique la anchura de la tabla en relacin a la anchura del rea de
la pgina.
CUIDADO, a pesar de que podemos modificar la anchura de la tabla para ajustar a nuestra pgina, si
el texto de las celdas ocupa una anchura mayor de la fijada, la tabla tomar la anchura mnima para que
el texto de las celdas pueda verse ntegramente.
Espacio dentro de las celdas.
En ocasiones consideraremos conveniente que nuestro texto tenga algo de holgura dentro de las
celdas, o que exista espacio extra entre celdas para que se pueda leerse mejor.
Esto puede hacerse mediante los dos atributos:
CELLPADDING: establece la distancia en pixel entre los bordes de cada celda y el texto que va
encerrado en ellas. Su valor por defecto es 1.
Ejemplo: <TABLE WIDTH="120px" CELLPADDING=1> </TABLE>
CELLSPACING: establece la anchura en pixel de los bordes de cada celda.
Ejemplo: <TABLE WIDTH="50%" CELLSPACING=1> </TABLE>
Filas
Para inserta filas en una tabla se utiliza las etiquetas <tr> y </tr> por cada una de las filas de la tabla.
Estas etiquetas debern insertarse entre las etiquetas <table> y </table>.
La etiqueta <TR>... </TR> define una nueva fila dentro de la tabla.
TR
Atributos:
* ALIGN= [left, right, center, justify] Define la alineacin del texto dentro de la celda.
* VALIGN= [top, middle, bottom] Posicin vertical del texto dentro de la celda.
Si queremos que la justificacin de un texto horizontal o vertical afecte a todas las celdas de una fila,
podemos hacerlo incluyendo el modificador ALIGN o VALIGN dentro de la etiqueta <TR>.
41
Por ejemplo:
<table>
<tr>...</tr>
<tr>...</tr>
<tr>...</tr>
<tr>...</tr>
<tr>...</tr>
</table>
Columna o Celdas
En el momento de crear una tabla no basta con especificar el nmero de filas, es necesario tambin
especificar el nmero de columnas que contendr cada fila.
Es necesario insertar las etiquetas <td> y </td> por cada una de las celdas que compongan cada
una de las filas de la tabla. Por lo tanto, habr que insertar esas etiquetas entre las etiquetas <tr> y </tr>
Entre las etiquetas <td> y </td> se podr especificar el contenido de cada una de las celdas texto,
imagen, enlace. Permite dar formato a su contenido.
TD
Atributos
Sintaxis Descripcin
ALIGN [left,right,center,justify] Define la alineacin del texto dentro de la celda
BACKGROUND Imagen de fondo de la celda
BGCOLOR Color de fondo de la celda. celda
COLSPAN Nmero de Columnas que abarca la celda.
HEIGHT Altura de la celda
ROWSPAN Nmero de filas que abarca la celda.
VALIGN [Top,middle,bottom] Posicin vertical del texto dentro de la celda.
WIDTH Ancho de la celda.
Tamao Columna o Celdas
Las celdas que constituyen una tabla en HTML por defecto tienen el mismo tamao. Sin embargo, es
posible establecer el tamao de una determinada celda mediante los atributos de la etiqueta <TD>, que
son WIDTH y HEIGHT:
WIDTH: define la anchura del texto en una celda. Se puede especificar como valor absoluto o con
como relativo en forma de % porcentaje de la anchura de la tabla.
HEIGHT: establece la altura de una celda individual.
No es posible usar los modificadores WIDTH y HEIGTH para aplicarlos a toda una fila. La nica forma
de hacerlo es poniendo en cada celda de la fila los valores correspondientes de WIDTH y HEIGHT.
Existe otro atributo que puede establecerse sobre las celdas. Se trata del atributo nowrap, que
hace que el contenido de la celda no se ajuste de manera automtica al ancho de la columna sino que el
ancho de la celda se adapta al ancho del contenido para que el contenido ocupe una slo fila. Este
atributo no toma ningn valor, simplemente se aade o no a las etiqueta <td>.
Por ejemplo:
<table>
42
<tr>
<td nowrap >contenido </td>
<td nowrap > contenido </td>
<td></td>
</tr>
</table>
Combinar Celdas o celdas expandidas
Si necesitamos que una de nuestras celdas ocupe varias filas y/o columnas. La forma de hacerlo es
introducir los modificadores COLSPAN y ROWSPAN en la etiqueta <TD>:
COLSPAN: se especifica el nmero de celdas por las que se extender la celda en las celdas
adyacentes.
ROWSPAN: especifica el nmero de celdas que ocupara en funcin de las celdas que estn
debajo.
Color de cada celda
Para especificar el color de cada celda de la tabla se utiliza el modificador BGCOLOR en la etiqueta
<TD>. Como formato de colores se acepta el hexadecimal o una cadena de color estndar definidas por
defecto.
Ejemplo:Tabla Simple 2 x 2 table

<table border=1>
<tr>
<td>celda1</td> celda1 celda2
<td>celda2</td>
<tr> celda3 celda4
<td bgcolor=olive>celda3</td>
<td bgcolor=green>celda 4</td>
</table>
TH
La etiqueta <TH>... </TH> define una nueva celda encabezamiento de una tabla.
Existe una forma alternativa de indicar la cabecera de una fila o columna mediante la etiqueta <TH>.
La desventaja de usar esta etiqueta es que el texto que va dentro de ella no permite formatear con
ninguna otra etiqueta como ocurre con el resto de celdas.
Atributos los mismos que la etiqueta <TD>.

Alineacin texto de celdas
HTML permite justificar horizontal y verticalmente el texto dentro de cada celda. Para ello implementa
los atributos ALIGN y VALIGN dentro de la etiqueta <TD>.
43
Ejemplo:
<TABLE>
<TR>
<TD ALIGN=horizontal VALIGN=vertical>
..
</TD>
</TR>
.
</TABLE>
Atributos.
Sintaxis Valores
ALIGN top(arriba), middle (medio), bottom (abajo), left (izquierda), right (derecha), center
(centrado)
Anidamiento tablas
La etiqueta <TABLE> admite anidamiento mltiple, tablas dentro de las celdas de otras tablas.
Ejemplo
<TABLE>
<TR><TD>Celda A1</TD><TD>Celda B1</TD>
<TD>
<!inicio de la nueva tabla dentro de la celda -->
<TABLE>
</TABLE>
<!fin de la tabla dentro de la celda -->
</TD>
</TR>
</TABLE>
9.- Formularios
La etiqueta <FORM>... </FORM> crea un formulario, que permite recoger datos de un usuario. Los
formularios se utilizan para recolectar opiniones, dudas, y datos sobre los usuarios, para realizar pedidos
en el mbito comercial a travs de internet, en definitiva tienen multitud de aplicaciones.
El formulario est compuesto por una seria de elementos u objetos, como etiquetas, campos de texto,
mens desplegables, y botones.
Es muy til para crear formularios maquetar (dar forma) en sus diseos con tablas sin bordes,
consiguiendo una mejor distribucin de los elementos, lo que facilita su comprensin y mejora su
apariencia.
Atributos
Sintaxis Descripcin
ACTION URL direccin del programa que tiene que tratar los datos recibidos.
ENCTYPE [application, x-ww-form-urlencoded, multipart, form-data]
44
Tipo de codificacin de los datos en el envo.

METHOD=POST, Indica el mtodo mediante el que se transferirn las variables del
GET formulario
NAME nombre del formulario
TARGET Indica el nombre de la venta que contiene el resultado del formulario.
Ejemplo de formulario:
<HTML>
<HEAD>
<TITLE>Formulario de ejemplo</TITLE>
</HEAD>
<BODY>
<H1>FORMULARIO DE EJEMPLO</H1>
<FORM method=POST
enctype="text/plain">
Introduzca su nombre:<INPUT
TYPE="Text">
</FORM>
</BODY>
</HTML>
La etiqueta <INPUT> se usa para insertar un elemento de entrada entre las etiquetas
<FORM></FORM> del formulario (formulario).
El atributo name indica el nombre dado al elemento de entrada, mediante el cual ser referenciado.
Vamos a ver los diferentes tipos de elementos de entrada, y el resto de atributos que pueden definirse
para cada uno de ellos.
INPUT
Atributos
Sintaxis Descripcin
ALIGN Especifica la alineacin del objeto.
NAME Define el nombre simblico del campo retornado el servidor al ser
enviado el formulario, y se debe estar presente para todos los elementos
INPUT
MAXLENGTH Especifica el nmero mximo de caracteres que puede introducir el
usuario
SIZE Tamao que tomara la ventana de la variable INPUT
VALUE Valor inicial del campo
TYPE especifica el tipo de variable de entrada, puede ser de varios tipos:
TYPE=submit (Botn de accin)
Representa botn que al ser pulsado realiza la accin de enviar todos los datos del formulario, a la
url de atributo accin=url, de tratamiento de los datos.
<INPUT TYPE="submit" NAME="boton" VALUE="Enviar">
45
<HTML>
<HEAD>
</HEAD>
<BODY>
<FORM method=POST enctype="text/plain">
Introduzca su nombre: <INPUT TYPE="Text">
<INPUT TYPE="submit" NAME="boton"
VALUE="Enviar">
</FORM>
</BODY>
</HTML>
TYPE =text (cajas de Texto)
Muestra una ventana para ingresar los datos e indica que el campo a introducir ser un texto, se
utilizan generalmente para introducir cadenas de texto cortas como nombres, direcciones, e-mail...
<INPUT TYPE="text" NAME="texto" size="10" MAXLENGTH="10" >
Nombre:
TYPE=password (Cajas de texto para claves)
Indica que el campo ser una clave o palabra de paso, por tanto los caracteres tecleados por el
usuario en pantalla se vern como asteriscos. Sus atributos opcionales son los mismos que para
type= text: name, maxlenght, size y value.
La caja de texto para claves o palabra de paso simplemente impide que el texto que se escribe
sea mostrado en pantalla, sin embargo este texto no es codificado al ser enviado al servidor Web, y
por tanto no es seguro mandar datos confidenciales.
Ejemplo:
<INPUT TYPE="password" NAME="clave">
TYPE = checkbox (chequeo de opcin)

El campo se elegir marcando una casilla, o ms de una. El campo aparece como una cajita que
puede estar marcada o no, segn se active o desactive respectivamente. Slo se devuelve el par
nombre/valor correspondiente a un "checkbox" cuando est activada.
<INPUT TYPE="checkbox" NAME="queso" >
TYPE=radio (Botn de eleccin o radio)
Este tipo de controles tiene dos estados o posiciones: seleccionado (ON) o no seleccionado
(OFF), estando inicialmente todos en la posicin OFF. Tambin es posible especificar que un botn
determinado est seleccionado inicialmente insertando el atributo CHECKED en la etiqueta INPUT de
la siguiente manera:
<INPUT TYPE="radio" NAME="boton" checked >
Los botones de eleccin suelen estar agrupados, dando al usuario la posibilidad de elegir solo uno
46
entre una serie de opciones. Esto es as porque entre los botones de radio de un mismo grupo slo
uno de ellos puede estar seleccionado, por tanto cuando seleccionamos uno, aquel que estuviese
seleccionado previamente dejar de estarlo.
Para construir un grupo de botones radio deben tener el mismo valor en el atributo NAME en
todos ellos. Adems debemos usar el atributo VALUE para dar un nombre distinto a cada uno de los
botones.
Ejemplo:
<INPUT TYPE="radio" NAME="idioma" VALUE="1">Ingles

<INPUT TYPE="radio" NAME="idioma" VALUE="2" >Frances
<INPUT TYPE="radio" NAME="idioma" VALUE="3>Aleman
TYPE= image (Campo Imagen)
Indica que el campo contendr el valor de las coordenadas del punto de la imagen pinchada, la
imagen se indica con el atributo:
Ejemplo:
<INTPUT type="image" src="estadistica1.gif" >
TYPE= hidden (Datos Ocultos)
Es un campo que no admite ningn dato introducido por el usuario, sino que el valor prefijado
con anterioridad, cuyos datos no son accesibles desde el formulario, que se enva con el resto de las
variables del formulario.
Ejemplo:
<INPUT TYPE=hidden NAME="BORRAR" VALUE="SI">
TYPE =reset
Devuelve los campos del formulario a los valores de inicio especificados. De igual forma que para
los botones de envo tiene los mismos atributos.
<INPUT TYPE="reset" NAME="borro" VALUE="Restablecer">
47
<HTML>
<HEAD>
</HEAD>
<BODY>
<FORM method="POST"
enctype="text/plain">
Introduzca su nombre: <INPUT
TYPE="Text"><br>
Contraseña:<INPUT
TYPE="password" NAME="clave"
size="6"><br>
Idioma preferido:
<INPUT TYPE="radio" NAME="boton"
checked >Ingles
checked >Frances
checked >Aleman
<br>
<INPUT TYPE="submit" NAME="boton"
VALUE="Enviar"><INPUT TYPE="reset"
NAME="borro" VALUE="Restablecer">
</FORM>
</BODY>
</HTML>
TEXTAREA
La etiqueta <TEXTAREA>...</TEXTAREA> especifica una caja para introducir texto multilnea dentro del
formulario.
Atributos:
Sintaxis Descripcin
NAME Nombre simblico del campo.
ROWS Nmero de filas.
COLS Nmero de columnas.
ALIGN [top, middle, bottom, left, right ] posicin del texto en el textarea.
WRAP [on, off, virtual ] controla el hecho de que las palabras sean enviadas a la
lnea siguiente si no caben en la lnea actual.
<TEXTAREA NAME="Comentarios" ROWS="6" COLS="40">
Crea una ventana de texto con de tamao 6 filas por 40 columnas.
Que resulta: Introduce tus comentarios:
SELECT
La etiqueta <SELECT>...</SELECT> define un men con una serie de opciones elegibles en un

formulario, cada una identifica por un elemento OPTION dentro de los contenidos de SELECT. Por
omisin, aparece seleccionada la primera opcin de los contenidos del SELECT.
Atributos:
Sintaxis Descripcin
48
NAME Nombre simblico del campo.

SIZE Determina el nmero de opciones visibles cuando muestra el
formulario.
ALIGN [ top, middle, bottom, left, right ] Posicin del texto en la caja.
MULTIPLE Permite seleccionar ms de un elemento
Cul es tu color preferido?

<BR><SELECT NAME="ColorPreferido">
<OPTION>Rojo
<OPTION>Verde
<OPTION>Azul
<OPTION>Amarillo
</SELECT >
</FORM>
Que resulta: Cul es tu color preferido?
10.- Elementos de Multimedia

Como hemos visto ahora las posibilidades del lenguaje HTML se limita a insertar imgenes dentro de
un texto, mostrar un fondo en el documento y modificar los colores que presentarn los distintos textos.
Posibilidad de mostrar Multimedia inline de vdeo o sonido junto con resto elementos de la pgina HTML
est limitada a la capacidad y a la configuracin del navegador.
En general podemos incluir contenido multimedia online siempre y cuando est en un formato
entendible por los navegadores y no ocupe demasiado tiempo de carga. En caso de ser un archivo
grande o de un formato no soportado por los navegadores debemos usar multimedia externa.
Multimedia externa, es otra forma bsica de incluir un elemento multimedia de un formato no

reconocido por el navegador es incluirlo como un enlace externo de forma que cuando el usuario siga el
hiperenlace el navegador abra un programa que pueda tratar este tipo de ficheros. El navegador tiene
una lista definida de aplicaciones que trabajarn con los formatos ms comunes de fichero de vdeo,
audio o imgenes.
El formato de vdeo es el tipo de archivo que va contener el vdeo, las pistas de audio y otra
informacin necesaria poder mostrar el vdeo correctamente. Hay muchos contenedores diferentes, como
MPEG-4 (archivos .mp4), Flash (.flv o .f4v), Ogg Vorbis (archivos .ogg), WebM (archivos .webm) o AVI
(extensin .avi).
Cada formato tiene sus ventajas y sus inconvenientes, es ms abierto o presenta las limitaciones
propias del software propietario.
Dado el tamao que suele ocupar una pequea porcin de vdeo, todos los contenedores de video y
audio almacenan su contenido con algn tipo de compresin. Es decir, el vdeo est codificado con algn
mtodo. Esta compresin se realiza mediante un cdec. Lo mismo sucede con el flujo de audio; tambin
estar comprimida con algn cdec de audio. As, en cada contenedor podemos encontrar uno o varios
49
flujos de video y audio, cada uno codificado con un mtodo diferente. Si nuestro ordenador no dispone de
los cdec adecuados, nos encontraremos con que no somos capaces de visualizar o escuchar el material
en cuestin.
Los formatos de sonido ms habituales en Internet son el WAV, el MP3 y en algunas ocasiones el
MIDI, aunque existen otros formatos diferentes que tambin pueden utilizarse. Lo ideal es incluir algn
archivo de audio que no ocupe mucho espacio, y que no por ello sea de mala calidad.
En resumen, el vdeo y el audio estn codificados con un formato concreto y, a su vez, todo ello est
insertado en un formato de archivo contenedor. Dentro de un formato contenedor no siempre nos
encontraremos la misma codificacin.
Todo esto genera una combinatoria enorme de formatos a los que hay que incorporar la variable del
navegador. Cada navegador en la actualidad es capaz de reproducir un nmero concreto de formatos. A
da de hoy, casi todas las nuevas versiones de los navegadores son capaces de reproducir vdeo en
formato WebM. El formato Ogg Vorbis, por ejemplo, una muy buena alternativa por ser libre, en la
actualidad no funcionara en Internet Explorer ni en Safari.
El Internet Explorer de Microsoft incluye una serie de etiquetas y atributos que permiten el uso de
elementos multimedia, pero no es estndar y se puede asegurar que no ser posible verlos en maquinas
distintas a los PC con Windows, ni en navegadores distintos a este.
Otra manera es la que realiza Netscape con la inclusin de los Plug-ins, los programas que se
aaden al navegador de Netscape versin 9.0 y permiten tratar diversos tipos de ficheros, de esta forma
podr insertarse estos tipos de ficheros dentro de una pgina HTML, permitiendo mostrar vdeo en
distintos formatos (mpeg, avi, mov), interpretar sonido, en varios formatos (au, mid,), incluir ficheros de
Adobe Acrobat (pdf), mostrar ficheros VRML, etc. El principal problema es que estos plug-in no son
estndar ni estn realizados por el mismo fabricante, ni son todos de libre distribucin.
Sonido de fondo
La etiqueta <BGSOUND> se utiliza para incluir sonido de fondo. Esta nueva etiqueta no necesita
etiqueta de cierre.
Incluir a una pgina msica de fondo tiene pros y contras, el sonido tiene que ser apropiado al
contenido de la pgina, para hacerla ms atractiva en contra la descarga del archivo de sonido supone
una carga adicional y adems muchos usuarios suelen estar escuchando su propia msica cuando
navega en Internet, por lo que el escuchar dos fuentes de sonido resulta algo molesto.
<BGSOUND>
Atributos:
50
Parmetro Utilidad
SRC Contiene el nombre de archivo de sonido a reproducir
WIDTH y HEIGHT En Netscape aparece un pequeo reproductor, estos parmetros especifican
su tamao.
AUTOSTART="true" Arranca automticamente la reproduccin.
LOOP="true" Reproduce ininterrumpidamente el fichero hasta que salimos de la pgina.
HIDDEN="true" Oculta el reproductor.
La etiqueta <bgsound> puede situarse en cualquier parte del documento.
A travs del atributo src hay que especificar la ruta y el nombre del archivo de audio.
loop indicamos el nmero de veces que se tienen que reproducir el sonido. Si se desea que el archivo
de audio se reproduzca continuamente en un bucle, habr que asignarle el valor infinite o -1.
Ejemplo:
<bgsound src="audio.mp3" loop="-1">
Video y Audio
La etiqueta <embed> se utiliza para cuando interesa incluir algn vdeo en una pgina web con resto
de elementos, hay que pero hay que tener en cuenta que los vdeos suelen ocupar mucho espacio en
disco, y por lo tanto, precisan de mucho tiempo para descargarse.
Los formatos de vdeo que suelen utilizarse en Internet son el AVI, el MPEG y el MOV.
<embed src="video.avi" autostart="false" loop="true">
Atributos:
A travs del atributo src hay que especificar la direccin y el nombre del archivo de vdeo.
Los videos insertados a travs de esta etiqueta se reproducen automticamente al cargarse la pgina,
y se reproducen solamente una vez. Esto puede cambiarse a travs de los atributos autostart y loop.
El atributo autostart indica si el archivo se reproducir automticamente al cargarse la pgina, y puede

tomar los valores true o false.
El atributo loop indica si el archivo se reproducir continuamente en un bucle, y tambin puede tomar
los valores true o false.
Los atributos width (anchura) y height (altura) sirven para especificar el tamao de la ventana de
control de vdeo. Estos atributos pueden tomar como valor que indica el tamao en pxeles. Si no se
especifican estos atributos, la consola de control de vdeo se mostrar con el tamao ms adecuado al
tamao del vdeo.
51
Tambin se puede utilizar la etiqueta como sonido de fondo, es necesario que no muestre los controles
de un archivo de audio, puede hacerse que los atributos width (anchura) y height (altura) valgan cero y
autostart=true. Esto es especialmente til para navegadores que no reconocen la etiqueta <bgsound>
como Netscape.
<embed src="oxegen.mp3" autostart="true" loop="true" width="0" height="0" >
Otra forma ms fcil utilizando el atributo hidden, con los valores true o false. Cuando su valor es true,
se ocultan los controles de reproduccin, hidden es true muestra los controles de reproduccin.
<embed src="oxegen.mp3" autostart="true" loop="true" hidden=true >
Video Flash
Para los creadores de pginas constituyen los adornos ms vistosos y expresivos a utilizar en pginas
web. Por sus caractersticas son muy usados en publicidad, por su sencillez y grficos ideales para
juegos online, imprescindibles como videos (YouTube), para aplicaciones multimedia de enseanza, etc.
Los videos Flash son animaciones con la extensin SWF. Suelen incluirse en las pginas iniciales de
los sitios web, y se utilizan a modo de presentacin hacia los usuarios.
Tienen el inconveniente de que para poder reproducirlos, el navegador necesita tener instalado un
pluig plugin Flash Player. Estas pelculas pueden crearse mediante el programa Flash de Macromedia o
SWF Opener es totalmente gratis.
SWF Opener es una magnfica aplicacin de edicin (gratuita) con la cual podrs no solo reproducir
ficheros SWF (es decir, ficheros Flash), te permite controlar aspectos parciales de esa animacin como
puede ser el tamao en que quieres reproducirla, controlar los aspectos de reproduccin (velocidad,
calidad, etc.), poder personalizar el fondo de dicha animacin, controlar el tiempo, etc.
SWF Opener dispone de la posibilidad de bsqueda avanzada de los ficheros SWF que se hayan ido
visualizando en su ordenador de las diferentes reproducciones flash a travs de la navegacin por las
distintas webs de Internet (es decir, los que estn en la cach de la memoria del ordenador). Aqu
http://swf-opener.programas-gratis.net/
La etiqueta <object> puede utilizarse para insertar diferentes objetos dentro de la pgina, como pueden
ser archivos de audio, archivos de vdeo, imgenes, etc.
El objetivo del uso de la etiqueta <object> es la de que no se produzcan incompatibilidades por las
distintas etiquetas soportadas por unos u otros navegadores.
Las animaciones Flash se insertan del mismo modo que los archivos de audio y de vdeo, a travs de la
etiqueta <embed>, pero debido existen posibilidades que se produzcan incompatibilidades entre los
distintos navegadores, necesita tambin de la etiqueta <object>.
52
Ejemplo:
<object width="250" height="250" classid="clsid:D27CDB6E-AE6D-11cf-96B8-

444553540000" codebase="clockanal.swf" >
<param name="movie" value="clockanal.swf" >
<param name="play" value="true" >
<param name="loop" value="true" >
<param name="quality" value="high" >
<param name="align" value="left" >
<embed src="clockanal.swf" width="250" height="250" play="true"
loop="true" quality="high" type="application/x-shockwave-flash">
</embed>
</object>
Tenemos que volver a analizar la etiqueta <embed>. En ella aparecen tres atributos que no
conocamos.
Atributo:
quality se especifica la calidad con la que se reproducir la animacin Flash. Puede valer high
(alta), autolow (baja automtica), o low (baja). Por defecto asume calidad alta.
pluginspage se especifica la url desde la que se podr descargar el plug-in necesario para
reproducir la animacin Flash, para que si algn usuario no lo tiene an instalado en su ordenador
pueda descargarlo.
type indica al navegador qu tipo de programa necesita ejecutar para reproducir la animacin.
La etiqueta <object>.
Atributo:
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 y height se utilizan del mismo modo, y deben tener el mismo valor, que en la etiqueta
<embed>.
La etiqueta <param>. Esta etiqueta se utiliza para especificar los valores necesarios para la
inicializacin de un objeto.
Atributos:
name y value. El atributo name indica el nombre de la caracterstica que va a ser definida, y
value indica su valor.
53
Por ejemplo, para indicar la ruta del archivo, que en la etiqueta <embed> aparece especificado por el
atributo src, es necesario incluir tambin una etiqueta <param>, en la que name tenga el valor movie.
<param name="movie" value="clockanal.swf" >
Para indicar la calidad de reproduccin, que en la etiqueta <embed> aparece especificado por el
atributo quality, es necesario incluir tambin una etiqueta <param>, en la que name tenga el valor
quality.
<param name="quality" value="high" >
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, que debe incluirse dentro de la etiqueta <embed>.
El atributo play puede valer true o false. Para que la animacin se reproduzca automticamente, el
valor de play debe ser true.
<param name="play" value="true" >
La etiqueta <param> no necesita etiqueta de cierre.
11.- Gua de Diseo
La tecnologa World Wide Web ha convertido Internet en un gran fenmeno tecnolgico y social,
introducindose en todos los niveles de la sociedad tanto en el plano profesional como en el personal.
Como consecuencia directa, los documentos hipertexto, con la posibilidad de incorporar elementos
multimedia, han irrumpido como un moderno formato de comunicacin, a pesar de la inexperiencia de las
personas que cada da se incorporan al nuevo sistema global.
Es cierto que los documentos hipertexto, tienen sus caractersticas especficas, que es preciso
conocer para disear de forma eficiente las pginas Web y conseguir comunicar lo que realmente
queremos.
Esta es la razn del presente documento. Por un lado ayudar a los creadores de pginas Web a
travs de unas sencillas directrices, y por otro lado, conseguir una mayor homogeneidad del conjunto de
pginas en vuestro sitio web, logrando un estilo comn.
El objetivo de esta Gua de Estilo, no es por tanto, la imposicin de unos criterios estrictos para el
diseo de las pginas que componen un sitio Web, sino presentar unas recomendaciones generales que
ayuden a los diferentes autores a disear pginas atractivas y sobre todo eficaces.
Recomendaciones Generales
Antes de comenzar a trabajar en nuestras pginas, es recomendable reflexionar sobre la Audiencia a
54
la que nos dirigimos, y la finalidad de los documentos que queremos incorporar.
Esto nos va a ser muy til a la hora de decidir los enlaces que necesitaremos, as como el tipo de
documentos a utilizar (formularios, ficheros de texto, hojas de clculo, acceso a bases de datos).
No debemos olvidar que nuestras pginas deben integrarse dentro de nuestro sitio Web, van dirigidas
a un determinado tipo de usuarios, y por razones de economa, la informacin prima sobre la esttica y el
diseo espectacular ser secundario respecto a la eficiencia de la comunicacin. Cuanto ms simple,
mejor.
La principal caracterstica de las pginas Web, es su capacidad de realizar conexiones inmediatas a

otros archivos mediante enlaces (links), conviene utilizar esta utilidad sin excesos, ya que una estructura
de pginas con poca informacin y muchos links, obliga a una navegacin complicada y a la prdida de
un buen diseo web.
Qu es un buen diseo web?
El usuario o visitante debe sentirse cmodo. Con una navegacin que le resulte gil, y tambin debe
de poder captar la informacin (texto, imgenes, flash, vdeos...) segn se le va mostrando. Por eso es
importante un buen sistema de navegacin, y presentar el contenido de forma clara y concisa.
Comodidad para el autor. Se debe realizar una estructura que nos facilite realizar modificaciones
sobre el diseo. Por eso es recomendable el uso de hojas de estilo, que permite separar el contenido del
diseo.
Accesibilidad. Tener muy en cuenta que nuestro sitio sea lo ms accesible posible a todo tipo de
usuarios. Pensemos en cmo accede el visitante. En el aspecto tecnolgico, el sitio debera de seguir
unos estndares, para facilitar la compatibilidad con navegadores de versiones anteriores, u otros
dispositivos, como telfonos mviles. Tambin es importante un diseo que soporte las pantallas
pequeas, pero sin olvidar las pantallas de gran tamao, cada vez ms frecuentes. Adems de hacer las
pginas web legible y poner textos descriptivos alternativos a las imgenes puede facilitar el uso para
visitantes con problemas visuales.
Los usuarios pueden llegar a tu web desde cualquier navegador (Chrome, Firefox, Opera, etc.) y
usando una pantalla de cualquier resolucin. Ten esto en cuenta cuando disees tu pgina, debe poder
verse desde cualquier soporte.
No abuses de los plugins. Muchos usuarios pueden tener ordenadores con recursos limitados y no
quieren a que se carga un applet de Java o una presentacin en Flash. Mejor hazlo todo en HTML y
Javascript.
55
Usabilidad. Por otra parte, hay que analizar quin es el nuestro posible visitante e intentar aglutinar el
mayor variedad de visitantes. No es igual si se dirige a nios, adultos, personas mayores o a todo el
mundo. En cualquier caso, nuestro sitio debe de ser fcil de usar.
Transmitir. El diseo debe de comunicar lo que el visitante puede esperar de l.
Por ejemplo, de un sitio oficial del Gobierno esperamos sensatez, por lo que un diseo extravagante da al
traste con las expectativas del visitante y puede ser contraproducente.
Bonito y original. El diseo debe de ser agradable, combinar bien colores, organizacin de los
elementos, etc. Y cuanto ms original sea, ms lo ser nuestro sitio.
Simple. Cuanto ms simple sea el diseo, ms se facilitarn el resto de aspectos que hemos comentado.
Estos aspectos debemos de tenerlos en cuenta, pero no podemos pretender aplicar cada uno al 100%.
Por ejemplo, un diseo ms original implicar utilizar ms elementos, y que todos aparezcan
correctamente ordenados, lo que lo har ms complejo. Y al final un buen diseo depende de la temtica
de la pgina y de lo que queramos transmitir con ella.
Navegacin
La navegacin de tu web ha de ser clara y sencilla. Los usuarios deben llegar a la informacin que
buscan en un par de clics. No hagas que tengan que volver a la pgina principal para saltar de una
seccin a otra.
La clave para esto es un buen men de navegacin. Debe contar con un enlace a cada una de las
secciones y subsecciones de tu sitio. Puedes montar este men con JavaScript, con un frame ndice o
colocando en todas las pginas el cdigo HTML de esa barra.
Observa los datos de trfico de tu web y facilita el acceso a las secciones menos visitadas. Tambin
puedes incluir enlaces a otras partes de tu web desde las pginas ms vistas.
Estructura de tu pgina
Una pgina web bien estructurada permitir a los usuarios encontrar todos los contenidos de forma fcil
y clara. Es importante que planifiques la estructura antes de empezar. Para ello puedes usar desde un
folio de papel hasta un programa especializado.
El contenido de tu web el que va a condicionar su estructura. A veces ser necesario una estructura
jerrquica, otras una relacin lineal de todos los documentos. Divide tu sitio en varias secciones y mete
en ellas las pginas que correspondan. Un usuario que llega a tu pgina buscando una solucin quiere ir
al grano. Los diseos ms comunes son:
56
-Maquetacin a dos o tres columnas con un men vertical.
-Maquetacin a dos columnas con un men horizontal.
Cuidado con el tamao de los documentos. El ancho de banda actual permite servir pginas de mucho
peso en poco tiempo. En cualquier caso es bueno que limites el nmero de fotos. Las imgenes siempre
aaden peso. Si vas a incluir una animacin Flash en la pgina de inicio, siempre es bueno que incluyas
un botn para saltar la presentacin (skip intro).
Texto
Al comenzar a aplicar estilos al sitio, comenzaremos por lo ms generalizado e iremos hasta lo ms

concreto o detallado. Y lo ms genrico es el estilo del texto para despus ir pasando a lo ms especfico.
La mayora de los visitantes no suelen leen todo el texto, echan un vistazo por encima buscando lo que
les interesa. Es muy importante que el texto sea claramente visible, lo que tenemos que tener en cuenta
ciertas cosas:
Tipo de fuente. Ya comentamos al hablar del estilo bsico del texto que con la propiedad font-family nos
permita asignar una o varias fuentes alternativas de texto. Debemos de escoger una fuente que se lea
fcilmente, y que sea comn, para que el usuario la tenga instalada.
Mientras que en el texto impreso es habitual el uso de fuentes con serifa (Times New Roman, serif), al
tener menor resolucin en los monitores se leen mejor las fuentes sin serifa, como Verdana, Arial, o la
genrica sans-serif.
Colores
La eleccin de colores apropiados es una de las cosas que ms influyen en el aspecto final del sitio.
Lo habitual es utilizar una gama de colores armnicos, con variaciones de tonos de un mismo color se
crea un diseo armonioso, creando una transicin de colores suave. Con ellos formaremos la paleta de
colores de nuestro sitio. Utilizar la misma paleta es importante, porque si no iremos utilizando variaciones
del color, y al final tendremos un sitio con muchos colores distintos poco armonioso.
Para aquellos que no sean buenos combinando colores, siempre se pueden inspirar en el diseo de
pginas web, o herramientas que nos facilitan paletas de colores. Una buena idea es utilizar un selector
de color, una herramienta que nos permita tomar el color de una parte de la pantalla o de la pgina web.
Tamao de la fuente
Es obvio que un tamao muy pequeo dificultar la lectura. Tampoco utilizaremos una fuente
excesivamente grande para el texto. Por lo tanto es importante utilizar tamao de fuente relativo '%' y
'em' que permiten al usuario ajustar el tamao. Si no al <body>, al resto de elementos. Esto permite que
despus, con slo cambiar el tamao de la fuente del <body>, cambie proporcionalmente el de todos los
elementos, y no resulta difcil permitir que el visitante adapte esto a su gusto.
Color del texto
Para que el texto sea legible, debe de haber un buen contraste entre el color del texto y el color de
fondo. Lo que ms cmodo resulta de leer es un texto oscuro sobre un fondo claro. Tampoco se lee bien
el texto sobre una imagen con varios colores.
Adems, debemos de seguir cierta armona, ya que hay colores que al combinarlos pueden resultar
demasiado intensos o casi molestos, sobre todo en textos amplios.
Al final, elegir un color u otro acaba siendo una cuestin de gusto.
57
Espacios
Un texto muy comprimido no invita a leerlo. Hay que dejarlo espaciado. Para ello es importante dejar
separacin (margin o padding) entre el texto y otros elementos, como imgenes, y entre prrafos.
Tampoco deben de estar muy pegadas las lneas del prrafo. Esto lo podemos regular con la propiedad
line-height.
Alineacin.
Es importante alinear correctamente el texto, lo que podemos hacer con la propiedad text-align. Por
defecto, est alineado a la izquierda (text-align: left;), aunque en prrafos con poco texto, como el pie,
suele quedar mejor centrado (text-align: center;). Cuando hay mucho texto, suele haber muchos saltos de
lnea, como en las columnas. En este caso, queda mejor el texto justificado (text-align: justify;).
58
Fondo
Ya hemos comentado que el fondo del texto debe de tener un buen contraste. As que las zonas de
nuestra pgina destinadas a contener texto tendrn un fondo normalmente de un color, evitando utilizar
imgenes que puedan dificultar la lectura.
Pero es habitual que las pginas no ocupen todo el contenido, dejando mrgenes laterales. Por ejemplo,
pensemos en una pgina con una columna central de ancho fijo. A los lados quedan huecos, que no
suelen tener el mismo fondo que el texto. Para esto es muy comn utilizar imgenes. Si decidimos
utilizarlas, debemos de elegir una imagen que no resulte demasiado llamativa, para que no desve la
atencin del contenido de la pgina, puede quedar bonito, pero distrae la atencin del usuario.
Tamao del documento
Es importante tener en cuenta algunas consideraciones sobre el tamao del documento, entre otras
cosas porque de este va a depender la velocidad de transferencia del mismo.
No es aconsejable publicar documentos de texto de muchas pginas porque eso hace intratable en la
pantalla el documento.
En su caso habr que valorar que solucin es la ms adecuada en funcin del documento de que se
trate. Puede ser aconsejable por ejemplo partir el original en diferentes captulos, construyendo una
estructura jerrquica de captulos y subcaptulos. Otra solucin es poner a disposicin del usuario el
documento en formato de texto (Word), as este podr recuperarlo, editarlo, manipularlo e imprimirlo
desde el procesador.
Imgenes
Las imgenes ayudan a la comunicacin, aunque se trata de un recurso peligroso si no se sabe

racionalizar su uso. Debe tenerse en cuenta, que las imgenes son en general ficheros grandes, lo que
ralentizar la transferencia de la pgina que las contienen.
Lo recomendable en este caso es incorporar las imprescindibles, cada fichero .gif o .jpg, debe cumplir
una funcin til, esto es no incorporar imgenes puramente artsticas.
Por otro lado existe un subdirectorio general de imgenes colgando del directorio raz, por lo que para
evitar duplicidades y no consumir recursos, se deben referenciar las imgenes contenidas en este.
La estructura de navegacin
Al momento de pensar la estructura de la informacin en una pgina web es importante disear, ya

sea en papel o a travs de algn recurso tecnolgico, un organigrama con todas las secciones que
queremos publicar. Esto incluye la distribucin de texto, imgenes, vnculos y otras herramientas.
59
La estructura de navegacin se suele elegir en funcin del tipo de contenido. Existen distintos tipos de
estructuras:
Jerrquica.
Esta estructura se disea a partir de una pgina principal que se vincula con otras pginas con menor
nivel de jerarqua: esta lnea jerrquica se reitera cuantas veces sea necesario. Esta estructura era muy
utilizada en los inicios de la Web; sin embargo, hoy no es recomendada para pginas con mucha
informacin, ya que la estructura en rbol implica que para ver cierta informacin debemos atravesar
todas las pginas de mayor jerarqua que la precedan. Es ideal para sitios web de centros o proyectos.
No se aconseja utilizar ms de 4 niveles para evitar que el usuario se desoriente durante la navegacin.
En conclusin, esta estructura solo es recomendada para pginas con poca informacin.
Lineal.
Es una estructura muy simple similar a las pginas de un libro. Desde una pgina concreta se puede ir a
la pgina siguiente o la pgina anterior. Es especialmente til si deseamos que el usuario siga un
itinerario fijo y guiado sin posibilidad de acceder a otras pginas que pudieran distraerle. No es
recomendable si el nmero de pginas encadenadas es muy y no permite retomar fcilmente la
secuencia all donde se abandon en la ltima sesin.
Lineal con jerarqua.
Es una estructura hbrida que trata de aprovechar las ventajas de las dos estructuras anteriores. Las
60
pginas y subpginas se organizan de forma jerrquica pero tambin es posible navegar de forma lineal
por las pginas de un mismo nivel.
Red.
A partir de la pgina ndice o principal se puede navegar a otra u otras sin ningn orden aparente. Es una
estructura ms libre pero no es aconsejable cuando el nmero de pginas es elevado porque desorienta
al usuario al no saber dnde est ni disponer de recursos para ir donde desea.
Organizacin de directorios
Antes de iniciar el diseo de un sitio web es necesario planificar su estructura de carpetas y ficheros.
Cuando el nmero de ficheros es considerable, resulta muy til ubicarlos en carpetas para facilitar su
localizacin y edicin. Existen algunas posibilidades de organizar el sistema de ficheros.
Las pginas HTML se guardarn en el directorio o carpeta principal mientras que los elementos que
utilizan (audios, vdeos, hojas de estilo, imgenes, etc.) se situarn en las subcarpetas correspondientes
61
Esta organizacin est especialmente pensada para un sistema de pginas HTML que comparten
recursos: imgenes, hoja de estilo, JavaScript, etc.
Las principales carpetas que utiliza son:
audios: archivos de audio mp3.
css: hojas de estilo css.
descargas: archivos zip, exe, etc. que se ofrecen para descarga.
images: imgenes jpg, gif o png.
pdf: documentos pdf.
scripts: archivos js con cdigo JavaScript reutilizable.
swfs: archivos con animaciones flash (*.swf).
vdeos: ficheros en distintos formatos de vdeo: *.wmv, *.flv
Una vez diseado, que iremos rellenando con los ficheros que se vayan creando. En general esta
estructura estar duplicada en nuestra unidad local que ser nuestra unidad de trabajo y desde esta
iremos transfiriendo los documentos .html y los dems componentes de nuestras pginas, al servidor
utilizando un cliente FTP.
Es conveniente hacer descargas peridicas desde el servidor (que contiene las pginas que se
visualizan y por tanto las ms actualizadas) hasta nuestra unidad, con lo que nos aseguraremos que en
ambas unidades tenemos los mismos ficheros.
De igual modo habr que hacer limpiezas peridicas de ficheros en ambas unidades, borrando los
ficheros anticuados que se convierten en islas de informacin a las que los usuarios no tienen acceso y
62
que consumen recursos innecesariamente.
La ergonoma del color
El color es una sensacin visual generada por el cerebro a partir de la luz que entra por los ojos y que
se registra en las retinas. Por tanto, iluminacin y color estn intrnsecamente relacionados: un objeto no
iluminado no se percibe coloreado, a menos que sea auto-luminoso. Como el color forma parte del
conjunto de modelos de informacin visual que utiliza el ser humano para interpretar el mundo que le
rodea y para desenvolverse en l de forma segura y cmoda, es indudable que, al igual que la
iluminacin, influye en el rendimiento y la salud laboral.
La visin cromtica humana se basa en el registro de la luz incidente en la retina mediante tres tipos de
fotorreceptores retinianos o conos, llamados rojo (R o L), verde (G o M) y azul (B o S). Las seales roja,
verde y azul, codificadas en cada parte de la imagen retiniana, se trasladan al cerebro donde se efectan
combinaciones y transformaciones neuronales hasta generar los tres cdigos de percepcin del color:
tono, claridad y colorido. Estos cdigos son los que, con mayor o menor destreza, se utilizan para asignar
un atributo de color a los objetos cotidianos.
En algunas profesiones resulta crucial tener una visin normal del color, porque en numerosas tareas se
realizan juicios nominales y comparativos de colores para realizar controles (visuales) de calidad de los
productos o pre-productos fabricados.
Cul es el origen de este defecto cromtico, popularmente conocido como daltonismo, y a cuntas
personas afecta? Est demostrado cientficamente que la visin defectuosa de los colores se debe a
factores hereditarios, concretamente ligados al sexo: hay una incidencia ms alta de casos en los
hombres (8 por ciento) que en las mujeres (1 por ciento) de la raza caucasiana.
FIGURA 1. Dos ejemplos de lminas del libro o test de Ishihara*
El rendimiento visual
La visin es uno de los principales sistemas sensoriales para desenvolverse en el medio fsico que le
rodea y, por tanto, la mayora de las tareas que se llevan a cabo son parcial o completamente controladas
visualmente. Es evidente que un buen nivel de rendimiento visual mejorar siempre el rendimiento de la
tarea. Ahora bien, qu es y cmo se puede medir el rendimiento visual?
En efecto, una tarea visual que fuerza al sistema visual a funcionar a los lmites de sus posibilidades
puede causar estrs general, fatiga ocular y disminucin del rendimiento, con lo que se aumenta la
probabilidad de cometer errores. Por tanto, las tareas visuales deben ser ajustadas a niveles supra-
umbrales de visin (CIE 145:2002; North, R.V., 1996). Pero, cmo se ajustan estos niveles de confort
visual y qu variables asociadas al entorno y la tarea estn implicadas?
63
FIGURA 4. Rueda de colores para localizar los colores adyacentes, complementarios y opuestos
ABLA 3. Efectos de algunos colores segn categoras
http://riesgoslaborales.wke.es/articulos/la-ergonom%C3%ADa-del-color-influencia-en-el-rendimiento-y-la-
salud-del-trabajador
No existen recetas para hacer buenas combinaciones de colores, y que el conocimiento terico no es
directamente proporcional a la aplicacin prctica; pero tambin es cierto que conocer las propiedades de
los colores nos ayudaran a no cometer barbaridades en el manejo de los colores a la hora de disear
pginas web.
Como todos ya conocemos los colores bsicos en la naturaleza a partir de los cuales se generan el resto
de los colores son el Rojo, Amarillo y Azul. Por ejemplo, si mezclamos Rojo con Amarillo obtenemos
Naranja, si lo hacemos con Azul y Amarillo obtenemos verde, y de esta manera podemos seguir jugando
con diferentes combinaciones y en diferentes cantidades para obtener ms y ms resultados de colores.
El crculo cromtico es una excelente herramienta para establecer diferentes caractersticas de los
colores.
64
Colores clidos y fros
Los colores clidos dan sensacin de actividad, de alegra, de dinamismo, de confianza y amistad. Estos
colores son el amarillo, el rojo, el naranja y el prpura en menor medida.
Los colores fros dan sensacin de tranquilidad, de seriedad, de distanciamiento. Colores de este tipo son
el azul, el verde, el azul verdoso, el violeta, cian y a veces el celeste. Un color azul acuoso es perfecto
para representar superficies metlicas. Verdes oscuros saturados expresan profundidad.
Colores apagados o sucios y los colores pastel
Estos se obtienen cuando se aumenta o disminuye la luminosidad de todo el crculo cromtico. Los
colores apagados expresan oscuridad, muerte, seriedad, mientras que los pasteles sugieren luz, frescura
y naturalidad.
Gama de grises
Los grises son colores idneos para expresar seriedad, ambigedad, elegancia, aunque son por
naturaleza colores algo tristes.
http://www.abcdisegno.com/teoria-del-color/
La eleccin adecuada del color para el diseo de un sitio web no es una tarea para nada fcil, es una de
las decisiones ms difciles, ya que de ello depende de que sea estticamente armonioso, de cara a
lograr un impacto visual en nuestros futuros visitantes, por regla general se aconseja elegir entre tres y
cinco colores como mximo, para el diseo grfico del sitio web.
Los usuarios en Internet, al igual que los consumidores en grandes superficies son susceptibles de
sentirse influidos por el color, de la misma forma que lo son tambin por la msica, o la disposicin de los
productos en los pasillos y lineales como estrategia de comercializacin.
La eleccin correcta del color va de acuerdo al pblico objetivo a que se dirigir el negocio, es por esto
muy importante seguir un estudio de preferencias de los consumidores. Si la intencin es conseguir las
mayores entradas para el sitio web hay que garantizar que la eleccin del color ser la adecuada para
generar la imagen y crear marca para el proyecto.
65
Segn los estudios de preferencias de los consumidores, el color puede responder a las fobias, afectos e
inclinaciones del pblico en general, pero tambin incluso a tendencias de un determinado pas, porque
tambin estas tendencias son producto de patrones culturales y afectivos.
Es de acuerdo a estos estudios como se llego a determinar que los colores luminosos transmiten
actividad, mientras que los medios influyen y provocan reflexin.
Eleccin de los colores.
Con los colores, como con muchas otras cosas, cuanto menos, a veces es mejor. Lo ideal es elegir entre
tres y cinco colores para un diseo o para una seccin del sitio web si se desea que estas sean distintas.
Hay que ser cuidadoso con las connotaciones de los colores y amoldarlos al publico objetivo que
esperamos atraer.
Negro: Es un color que denota distincin, si est bien combinado, sin embargo no se considera
conveniente utilizarlo como fondo para una web, ya que disminuye la legibilidad. Con excepcin de la
pgina principal y solo en situaciones especiales.
Rojo. No es recomendable para un sitio web salvo en los casos que se deseen provocar acciones
inmediatas, con diseos muy desenfadados y tonalidades agresivas que mermen su efecto. El rojo est
muy asociado a la agresividad, por lo cual algunas de sus aplicaciones en el diseo web son: anunciar
bebidas energticas, coches, motocicletas, deportes y actividades de riesgo.
Azul. Es uno de los colores ms utilizados en el diseo web, por lo cual casi se le puede considerar
institucional, provoca en las personas que se sientan relajadas y dispuestas de aceptar nuevas
situaciones e influencias. Es ideal para productos relacionados con la limpieza, y todo aquello relacionado
directamente con el mar, el agua, el cielo y el aire.
Naranja. El color naranja es visualmente muy impactante, por lo que es muy til para captar atencin y
subrayar los aspectos ms destacables de una pgina web. Recomendado para webs de corte juvenil sus
detonantes son la efusin, la actividad y todos los valores de la juventud.
Verde. La influencia que ejercen sobre las personas es de tranquilidad. Muy recomendado para sitios web
que quieran vender productos o servicios ecolgicos, actividades al aire libre, turismo, jardinera.
Violeta. Recomendable para las webs de tendencias artsticas, as como a las relacionadas con los
estudios msticos.
Amarillo. Recomendable para webs que desarrollan productos innovadores y que rompen con los
estndares establecidos, este color denota aspectos intelectuales y aprendizaje.
Rosa. Este color est asociado a la sensibilidad y la feminidad y quizs por este motivo es usado en webs
relacionados con las mujeres y los nios.
Lo Que S Funciona En El Diseo Web
Si usted es un deportista, un cantante, un pintor o un artista de cualquier medio de comunicacin, que

necesita vender su imagen, o vende en su sitio Web, descargas de pelis, msica o tonos para mviles,
entonces puede hacer alarde de diseo en su sitio Web con el nimo de impresionar a sus fans o
visitantes.
Pero si por el contrario ha creado su pgina para aprovechar Internet como un canal ms de venta para
66
vender sus productos o servicios y pretende alardear de diseo a sus visitantes con excesos de
animaciones en flash o en uso de grficos, entonces usted se est equivocando de estrategia porque as
no funcionan los negocios en Internet.
Un sitio Web en los que sus prospectos tienen que adivinar donde esta lo que busca, bien porque la
informacin esta oculta a demasiados clics de profundidad, o porque tiene que adivinar el funcionamiento
de los botones, con mens del sitio Web que son complejos y en general un sitio difcil de navegar porque
esta tan sofisticadamente creado para IMPRESIONAR, pensando que impresionar vende, cuando esto en
Internet est probado y comprobado que No Funciona y es el camino ms fcil y rpido para fracasar.
El tiempo en Internet es su mayor enemigo, est comprobado que los primeros 10 segundos son
cruciales para despertar el inters o el rechazo de las bsquedas, sino consigue atrapar la atencin de
sus visitantes dndoles exactamente lo que estn buscando se marchar irremediablemente, sin haber
visto siquiera que lo que busca, por eso su sitio web tiene que ser sencillo pero elegante, fcil de navegar
y con un texto muy cuidado de errores gramaticales.
Su sitio Web debe ser:
Fcil de navegar.
Siempre que piense en mejorar su web debe pensar en hacerlo fcil de navegar, atractivo y profesional,
por eso la mejor estrategia es ponerse en los zapatos de sus posibles clientes, hgase usted mismo las
preguntas como un visitante ms: Cmo encontrara lo que anda buscando?
Visite otros sitios web y observe lo que est bien y lo que est mal, no le pido que les copie, porque no es
tico, sino de que busque ideas y trate adaptarlas a su manera y con su propia personalidad al sitio Web
de su negocio en Internet.
Actualizado constantemente.
Debe actualizar su pgina principal con regularidad, como si de un escaparate de una tienda se tratase,
porque en caso contrario corre el riesgo de que sus visitantes piensen que no ofrece nada nuevo, en ellas
puedes incluir noticias de su inters, promociones especiales, nuevos productos o servicios disponibles.
En fin debe hacerle saber que est al da con las ltimas tendencias del sector, con esto se asegurar
una mayor probabilidad de que su prospecto regrese a su negocio.
Mantener su sitio actualizado no debe suponer para usted un quebradero de cabeza, es aconsejable si
piensa en renovar constantemente los contenidos de su web, que este hecha de manera dinmica, y no
en HTML, puesto que su actualizacin puede convertirse en una gigantesca y pesada carga, hacer su
sitio web dinmico supone hacer el proceso de actualizacin de cualquier tipo de contenidos un proceso
muy fcil.
Sencillo pero elegante.
Si su pgina no fue diseada con el objetivo de promocionar sus productos o servicios a travs del
posicionamiento orgnico en buscadores, entonces aunque suene lapidario y le cueste aceptarlo, su
pgina Web est mal hecha, y todos los esfuerzos que usted haga o que le aconsejen hacer algunos
pseudo-expertos en marketing en buscadores (SEO) con algunas propuestas de "soluciones" como por
ejemplo "Puedo darle de alta en 800 buscadores" sern casi a un 100% de los casos un timo y totalmente
contraproducentes e intiles para posicionar y promocionar su pgina web en internet.
Lamentablemente los das de esos sitios web comerciales estarn contados, la mayora de los
emprendedores noveles y empresas que quieren tener presencia en la red, se dejan llevar por lo
estticamente espectacular por lo cual quieren que los sitios de sus negocios impacten con diseos en
flash o animaciones web muy refinadas pensando que con esto lograrn "capturar" al visitante y hacerle
comprar sus productos o servicios. El diseo "espectacular" es muy "creativo" e inmejorable desde el
punto de vista esttico, pero as no es cmo funcionan los negocios a travs de internet.
A no ser de que usted tenga una empresa archi conocida como: Adidas, Coca Cola, El Corte Ingls, Nike,
etc., o que desee inscribir su Web comercial en un concurso de sitios, o bien quiera tener una pgina
enfocada a la venta de juegos de ordenador, pelculas o msica y quiere impactar a su pblico objetivo,
entonces s que necesitar un sitio con un diseo espectacular que tarde 30, 40 o 50 o ms segundos en
67
cargar.
De lo contrario, lo nico que se va a conseguir es DISTRAER a los visitantes, o sencillamente hacerlos

marchar de su negocio online, debido al tiempo interminable de carga de sus grficos o de imgenes en
flash, ya que la mayor parte de los usuarios en Internet, no esperan ms de 8 o 10 segundos.
Gua de Eye Tracking Para El Diseo Web
El "eye tracking" consiste en el proceso cientfico mediante el cual se evala y determina el punto hacia
donde se dirigen los movimientos de los globos oculares de una persona cuando est mirando, segn los
estudios realizados confirman las tendencias de los usuarios en la navegacin de los sitios en Internet, lo
cual es tremendamente til para desarrollar y conseguir un diseo Web vendedor.
Segn estos estudios cientficos de eye tracking, determinaron las reas de mayor inters as como
aquellas que son totalmente ignoradas o evitadas por la mayora de los navegantes; conclusiones que
podr utilizar como una gua en el diseo y desarrollo de pgina web en Internet:
Los visitantes leen con un movimiento horizontal, por lo general a travs de la parte superior del
rea de contenido.
El primer "escaneo visual" de los usuarios se centran en la esquina superior izquierda de la

pgina.
Inicialmente, los navegantes buscan en la parte superior izquierda y en la parte superior de la

pgina antes de desplazarse hacia abajo y hacia la derecha.
Finalmente los usuarios "escanean" las partes ms bajas de la pgina.
La mayora de los visitantes, ignoran o evitan:
Los banners
Los grandes y extensos bloques de texto.
Los textos con fondos coloridos, est comprobado que funcionan mucho mejor y son ms
agradables para la lectura los textos con fuentes negras sobre fondo blanco.
Comportamientos de navegacin "eye tracking".
Los textos llaman ms la atencin que las imgenes.
Los visitantes recorren y hacen un "escaneo visual" de una pgina web, deteniendo su recorrido
en los encabezados.
Los usuarios slo echan un vistazo en los subttulos cuando realmente les interesa el contenido.
Utilizar negritas y cursivas en los textos puede atraer la atencin.
68
El tamao de las fuentes de los textos influyen en el comportamiento del usuario.
Los prrafos cortos funcionan mejor que los prrafos largos, por eso lo mejor es dividir los
grandes bloques de texto en pequeos y visualmente atractivos prrafos.
Mantener espacios en blanco entre los prrafos y otros contenidos es visualmente atractivo.
Una sola columna es mucho mejor e invita a la lectura que las columnas mltiples.
Las listas ayudan a que el lector mantenga la atencin ms tiempo.
Los mens y enlaces de navegacin funcionan mucho mejor en la parte superior de la pgina.
Los usuarios se detienen a mirar los botones y los mens, en ellos se debe poner a la vista la
forma de localizar la informacin relevante.
Los anuncios en la parte superior y en la parte izquierda reciben mayor atencin visual.
Anuncios situados cerca de los mejores contenidos son vistos ms veces.
Anuncios de texto son los que mayor atencin reciben de los formatos estudiados.
Utilice esta gua de comportamiento de "eye tracking" y tngala en cuenta siempre que vaya a aadir
nuevo contenido relevante a su pgina Web, la har visualmente atrayente y estar un paso ms cerca
de conseguir resultados y del xito en Internet.
El diseo de un sitio Web para la promocin de los productos y servicios online requiere de un conjunto
de estrategias diseados para que el sitio sea vendedor y exitoso y logre el objetivo que usted persigue al
crearla.
Es por esto que atrapar y despertar el inters del usuario desde un primer momento, es vital en la red,
porque la puerta de salida solo est al alcance de un clic de ratn, aqu tiene 10 consejos que sin duda le
ayudarn a conseguirlo:
1 - Su pgina tiene que cargar rpido. Tan solo tiene 10 preciosos y escasos segundos para despertar el
inters de sus visitantes antes de que se marchen. Ellos y probablemente usted tampoco esperara 30,
40, ni 50 segundos hasta que el sitio cargue, en Internet el tiempo pesa y mucho, cuando navegamos en
la red se pierde la paciencia rpidamente, as que lo mejor es asegurarse que sus pginas sean
grficamente ligeras para que no convierta su sitio web para la paciencia de sus prospectos en un sitio
"pesado".
2 - Despierte el inters dndoles lo que estn buscando. Su prospecto antes de comprar va primero que
todo en busca de informacin, el "que hay aqu para mi", ofrezca precisamente eso "informacin", pero no
cualquier informacin ofrzcales contenido que no pueda conseguir en su competencia, es por eso que
sus contenidos no pueden ser ms de lo mismo que tienen los dems, debe enfocarlo desde un punto de
vista novedoso, que lo haga fresco y original. De esta manera sentirn que su sitio tiene eso "especial"
que estn buscando y que solo usted puede ofrecerle.
3 - Ponga a la vista lo que ofrece. Enseles claramente y desde un primer momento los productos o
servicios que vende, si sus clientes o prospectos no estn seguros de que va su sitio web, se confundirn
se marcharan y es muy poco probables que les recupere.
4 - Atrpelos con un titulo poderoso. Si pone un titulo que llame poderosamente su atencin, atraer su
inters por ver que es lo que tiene para l, y permanecer ms tiempo, lo que aumenta la posibilidad de
que pueda venderle sus productos o servicios.
5 - De para recibir. Quiere que sus prospectos se suscriban a su boletn?, entonces ofrzcales contenido
gratis y relevante, es la mejor manera de ganarse su confianza, la confianza es un paso previo muy
importante antes de que decidan comprar sus productos o servicios. Posterior a la suscripcin tambin
puede enviarle informacin peridicamente, bien sea en forma de cursos, seminarios e incluso software
69
gratis que apoye y le sirva como una herramienta de complemento a la informacin relevante de su
inters.
6 - Diseo sencillo pero elegante. Un sitio Web sencillo no tiene que ser poco atractivo, al contrario de los
que mucha gente piensa, los sitios web que ms oportunidades de negocios tienen y que ms visitados
actualmente en la red son precisamente aquellos que son sencillos pero elegantes. Y muy importante sin
errores gramaticales, un lugar con errores ortogrficos denota poca profesionalidad y genera rechazo y
desconfianza en los usuarios. No debe tener colores de fondo chillones, debe ser agradable a la vista y
sus textos tener un tamao adecuado y ser fciles de leer para todo el mundo.
7 - Ponga un mapa a su sitio. Si su sitio Web es muy grande lo mejor es tener un mapa del sitio para
facilitarle conseguir a sus usuarios lo que estn buscando.
8 - Informacin bsica. Siempre, hay que incluir el nombre, la direccin, y telfonos en nuestro sitio Web.
Resulta asombrosa la cantidad de negocios que circulan por la red que dan la impresin de estar
hurfanos o acfalos, carecen de informacin bsica del responsable, lo cual genera sin duda
desconfianza y poca credibilidad para el usuario, tambin hay que poner un e-mail de contacto de ser
posible en todas y cada una de las paginas que componen el sitio.
9 - Faq's. Si tiene que responder a las mismas preguntas una y otra vez, lo mejor es hacer una pgina
con las respuestas a esas preguntas frecuentes, sus visitantes solo tienen que consultarlas para despejar
rpidamente sus dudas relacionadas con sus productos o servicios.
10 - Ofrzcales un glosario de trminos. Una excelente manera de que sus clientes o prospectos vuelvan
una y otra vez a su negocio es poner a su disposicin, un glosario de trminos con la informacin que
necesitan, volvern una y otra vez a consultar sus dudas y tendr ms posibilidades de ofrecerles sus
productos o servicios.
El sitio Web debe estar diseado para atrapar y despertar el inters del usuario desde un primer
momento, y de esta manera el prospecto pase el mayor tiempo posible dentro del sitio Web, de cara a
que logre que pueda ver sus productos o servicios, y antes de que piense que lo que busca est en otra
parte y se marche.
Nombre del Autor: Omar Jareo VargasWeb: http://www.capsulasdemarketing.com
70
Gua de Accesibilidad web
Accesibilidad web
Asegurar que personas con algn tipo de discapacidad van a poder hacer uso de Internet Al hablar
de accesibilidad Web se est haciendo referencia a un diseo Web que va a permitir que estas
personas puedan navegar e interactuar con la Web. La accesibilidad no solo beneficia a las personas
con discapacidad tambin beneficia a otras personas, incluyendo personas de edad avanzada, con
bajo nivel de alfabetizacin o personas que no hablan el idioma, usuarios que han visto mermadas sus
habilidad a consecuencia de la edad.
La accesibilidad web, perfila como la capacidad de acceso a Internet y a sus contenidos por todas las
personas, independientemente de la discapacidad (fsica, intelectual o tcnica) que presenten o de las
que se deriven del contexto de uso (tecnolgico o ambiental). Esta cualidad est ntimamente
relacionada con la usabilidad.
El mximo organismo dentro de la jerarqua de Internet que se encarga de promover la accesibilidad

es el W3C, en especial su grupo de trabajo WAI (Iniciativa de Accesibilidad Web). Es una actividad
desarrollada por el W3C, cuyo objetivo es facilitar el acceso de las personas con discapacidad,
desarrollando pautas de accesibilidad, mejorando las herramientas para la evaluacin y reparacin de
accesibilidad Web, llevando a cabo una labor educativa y de concienciacin con relacin a la
importancia del diseo accesible de pginas Web, y abriendo nuevos campos en accesibilidad a travs
de la investigacin en esta rea.
Web Content Accessibility Guidelines 1.0 (WCAG 1.0) es una recomendacin del 5 de mayo de 1999 del
W3C que explica cmo hacer el contenido web accesible a las personas con discapacidad.
Hasta el momento, WCAG 1.0 es reconocido como el estndar de facto a nivel internacional en cuanto a
accesibilidad web. Incluso, se ha convertido en el estndar en muchos pases, como en el caso de
Espaa.
Para ms informacin: http://www.w3c.es/Traducciones/es/WAI/intro/accessibility
En Espaa una de las asociaciones que trabaja en este campo es el SIDAR. En enero de 2007 el
Instituto Nacional de Tecnologas de la Comunicacin (INTECO) cre el Centro de Referencia en
Accesibilidad y Estndares Web con el objetivo de fomentar la accesibilidad y crear un foco de
conocimiento al respecto.
Un sitio web es accesible si las personas con discapacidad lo pueden utilizar con la misma
efectividad, seguridad y proteccin que las personas sin discapacidad.
La idea principal es hacer la Web ms accesible para todos los usuarios independientemente de las
circunstancias y los dispositivos involucrados a la hora de acceder a la informacin. Partiendo de esta
idea, una pgina accesible lo sera tanto para una persona con discapacidad, como para cualquier otra
persona que se encuentre bajo circunstancias externas que dificulten su acceso a la informacin (en
71
caso de ruidos externos, en situaciones donde nuestra atencin visual y auditiva no est disponible,
pantallas con visibilidad reducida, etc.)
Para realizar un sitio Web accesible, se han desarrollado las denominadas Pautas de Accesibilidad
al Contenido en la Web (WCAG), cuya funcin principal es guiar el diseo de pginas Web hacia un
diseo accesible, reduciendo de esta forma barreras a la informacin. WCAG consiste en 14 pautas
que proporcionan soluciones de diseo y que utilizan como ejemplo situaciones comunes en las que el
diseo de una pgina puede producir problemas de acceso a la informacin. Las Pautas contienen
adems una serie de puntos de verificacin que ayudan a detectar posibles errores.
Cada punto de verificacin est asignado a uno de los tres niveles de prioridad establecidos por las
pautas.
Prioridad 1.- son aquellos puntos que un desarrollador Web tiene que cumplir ya que, de otra
manera, ciertos grupos de usuarios no podran acceder a la informacin del sitio Web.
Prioridad 2.- son aquellos puntos que un desarrollador Web debera cumplir ya que, si no
fuese as, sera muy difcil acceder a la informacin para ciertos grupos de usuarios.
Prioridad 3.- son aquellos puntos que un desarrollador Web debera cumplir ya que, de otra
forma, algunos usuarios experimentaran ciertas dificultades para acceder a la informacin.
Los niveles de prioridad son concntricos, de forma que la Prioridad 1 forma parte de la Prioridad 2, y
sta a su vez de la Prioridad 3. De esta clasificacin se deduce que las pginas que soportan el nivel de
prioridad 3 son las que ms se ajustan a las pautas establecidas por WAI sobre accesibilidad, y por lo
tanto, que menos problemas de accesibilidad presentan para las personas discapacitadas, mientras que
el nivel de prioridad 1 es el nivel mnimo exigible a una pgina web accesible.
Si se decide implementar los puntos de verificacin de las Prioridades 1, 2 o 3, en realidad establece el

nivel de sus contenidos con los requerimientos establecidos en los puntos de verificacin de una
Prioridad. Existen tres niveles de adecuacin. .
Nivel de Conformidad "A": todos los puntos de verificacin de prioridad 1 se satisfacen.

Nivel de Conformidad "Doble A": todos los puntos de verificacin de prioridad 1 y 2 se
satisfacen.
Nivel de Conformidad "Triple A": todos los puntos de verificacin de prioridad 1,2 y 3 se
satisfacen.
Una vez que el sitio Web ha sido implementado el conjunto de puntos de verificacin de una Prioridad
puede identificar la pgina web, sitio web o portal web mediante unos logotipos que muestran el nivel de
adecuacin logrado por la organizacin :
nivel A nivel AA nivel AAA
Cuando se decide poner en prctica las Pautas, debe realizar el siguiente proceso.
72
Decidir el grado de accesibilidad (nivel A, nivel AA o nivel AAA) que desea conseguir en los
contenidos y servicios electrnicos.
Utilizar los puntos de verificacin tcnica de aspectos de accesibilidad contenidos en la

prioridad o grado de accesibilidad que se quiera obtener (Prioridad 1, Prioridad 2, o Prioridad
3)
Codificar cada pgina web o recurso electrnico con los aspectos que especifica cada punto
de verificacin. Identificar la pgina web o recurso electrnico con el logotipo que establece el
nivel de adecuacin conseguido.
Las Pautas de Accesibilidad al Contenido de la Web 1.0 (WCAG 1.0) son 14. Cada pauta
proporciona tcnicas sobre cmo mejorar algn aspecto relacionado con accesibilidad web. En las
pautas se ofrecen explicaciones detalladas, as como ejemplos y directrices para solucionar los
posibles problemas que se puedan presentar. A continuacin, se enuncian y describen cada una
de las 14 pautas.
Pauta 1
Definicin: Proporcionar alternativas equivalentes para el contenido sonoro y visual.
Los textos alternativos al contenido visual o auditivo benefician a personas ciegas y/o sordas y
a aquellos usuarios que deciden anular la descarga de imgenes y/o sonidos (velocidad de
acceso a Internet limitada).
Los equivalentes no textuales, como pueden ser dibujos o vdeos, benefician a personas
analfabetas o con dificultades en la lectura.
Pauta 2
Definicin: No se base slo en el color.
Los textos y grficos deben comprenderse sin necesidad de ver los colores. El cumplimiento
de esta pauta beneficia a personas con dificultades para ver los colores y a usuarios que
utilizan pantallas monocromticas.
Pauta 3
Definicin: Utilice marcadores y hojas de estilo y hgalo de forma apropiada.
El control de la presentacin de los contenidos se debe realizar con hojas de estilo en vez de
con elementos y atributos de presentacin. Con el uso de marcadores de presentacin los
usuarios que utilizan software especializado tendrn dificultades para entender la estructura de
la pgina.
Pauta 4:
Definicin: Identifique el idioma utilizado.
73
Esta pauta implica usar marcadores que faciliten la pronunciacin o interpretacin de texto
abreviado o extranjero. Se debe indicar el idioma predominante en cada pgina y marcar
aquellas expresiones que se encuentren en otra lengua. De esta forma, los sintetizadores de
voz son capaces de cambiar su pronunciacin en funcin del idioma siempre y cuando se usen
los marcadores apropiados.
Pauta 5
Definicin: Crear tablas que se transformen correctamente.
Las tablas slo se utilizan para marcar informacin tabular (tablas de datos). El uso de tablas
con otros fines crea dificultades para los usuarios que usan lectores de pantalla. De igual
forma, las tablas mal estructuradas (por ejemplo, sin encabezados <th>) dificultan la lectura a
usuarios que no pueden visualizar la informacin de forma global: ciegos con lectores de
pantalla y/o dispositivos braille, deficientes visuales que utilizan magnificadores de pantalla o
usuarios con dispositivos de pantalla pequea.
Pauta 6
Definicin: Asegrese de que las pginas que incorporan nuevas tecnologas se transformen
correctamente.
Una pgina basada en tecnologas modernas tiene que ser accesible al desconectarla o al
visualizarla con navegadores antiguos. El usuario puede desconectar las tecnologas ms
modernas para ganar en rapidez de descarga. Sin embargo, los contenidos deben permanecer
accesibles.
Pauta 7
Definicin: Asegure al usuario el control sobre los cambios de contenidos tempo-sensibles
El movimiento de los objetos o pginas, su parpadeo o actualizacin automtica deben ser

controlados por el usuario. Las personas con discapacidades cognitivas o visuales no pueden
leer textos en movimiento. De forma similar, algunos discapacitados fsicos no pueden
interactuar con objetos mviles (limitaciones motrices).
Pauta 8
Definicin: Asegure la accesibilidad directa de las interfaces de usuario incrustadas.
Cuando un objeto incrustado (flash, applet) tiene su "propia interfaz", sta (al igual que la
interfaz de su navegador) debe ser accesible. Si la interfaz del objeto incrustado no puede
hacerse accesible, debe proporcionarse una solucin alternativa accesible.
Pauta 9
Definicin: Disee con independencia del dispositivo.
74
Esta pauta significa que el usuario puede interactuar con la aplicacin de usuario o el
documento con un dispositivo de entrada (o salida) preferido - ratn, teclado, voz, puntero de
cabeza u otro. Si, por ejemplo, un control de formulario slo puede ser activado con un ratn u
otro dispositivo de apuntamiento, alguien que use la pgina sin verla, con entrada de voz, con
teclado o quien utilice otro dispositivo de entrada que no sea de apuntamiento, no ser capaz
de utilizar el formulario.
Pauta 10
Definicin: Utilice soluciones provisionales.
Las alternativas accesibles slo son necesarios hasta que los antiguos navegadores y las
ayudas tcnicas operen correctamente.
Pauta 11
Definicin: Utilice las tecnologas y pautas del W3C.
Cuando no se pueda usar una tecnologa W3C o al usarla se obtengan materiales que no se
transformen correctamente, se debe proporcionar una versin alternativa. Se recomiendan las
tecnologas W3C por incluir caractersticas accesibles incorporadas, estar desarrolladas en un
proceso abierto consensuado y porque se utilizan como base para crear contenidos
accesibles.
Pauta 12
Definicin: Proporcione informacin de contexto y orientacin.
Esta informacin ayuda al usuario a comprender pginas o elementos complejos. Se deben

agrupar los elementos y ofrecer informacin contextual sobre la relacin entre elementos. Esta
accin es fundamental para discapacitados cognitivos y visuales.
Pauta 13
Definicin: Proporcione mecanismos claros de navegacin.
Estos mecanismos facilitan a todos los usuarios la bsqueda de aquella informacin que
necesitan (fundamental para discapacitados cognitivos y visuales). Ejemplos: mapa web,
ayuda, barras de navegacin, etc.
Pauta 14
Definicin: Asegrese de que los documentos sean claros y sencillos.
La utilizacin de lenguaje claro y simple facilita la comunicacin de informacin. El acceso a la

informacin escrita puede ser difcil para discapacitados cognitivos o con dificultad de
aprendizaje y para personas sordas o que hablan en una lengua extranjera. La comprensin
75
de un documento tambin depende de la maquetacin de la pgina y de los grficos (que

deben llevar un texto alternativo).
Cada pauta tiene uno o ms puntos de verificacin que indican cmo se aplica la pauta en
determinadas reas.
Las pautas describen cmo hacer pginas Web accesibles sin sacrificar el diseo, ofreciendo esa
flexibilidad que es necesaria para que la informacin sea accesible bajo diferentes situaciones y
proporcionando mtodos que permiten su transformacin en pginas tiles e inteligibles.
Tcnicas y herramientas para evaluar la accesibilidad web
Existen Pautas de Accesibilidad para Herramientas de Autor, cuyo objetivo es ayudar a los
desarrolladores de software a la hora de crear herramientas de autor para producir contenido Web
accesible.
Antes de comenzar en el manejo de algunas de ellas, se debe distinguir entre los aspectos de
accesibilidad que requieren una revisin automtica y aspectos de revisin manual.
Revisin automtica.
Se realiza mediante una aplicacin informtica que analiza el cdigo de una pgina web, devolviendo una
serie de anotaciones con los fallos encontrados.
Ejemplo: TAW (Test de Accesibilidad Web). http://tawdis.net/
Revisin manual.
La verificacin del funcionamiento de un sitio web bajo distintas circunstancias: utilizar ayudas tcnicas
especficas de ciertas discapacidades, interactuar con las pginas con distintos navegadores, etc.
Se puede combinar mtodos de revisin automtica y manual, se debe contar con la experiencia distintos
usuarios (personas con discapacidad, personas de edad avanzada, etc.) para observar las dificultades
con las que distintos usuarios se encuentran al navegar por el sitio web analizado.
La revisin automtica de accesibilidad se debe complementar con la revisin del cdigo HTML y CSS
utilizado en un sitio web. La utilizacin adecuada de HTML y CSS evita muchos errores relacionados con
la accesibilidad
TAW
Es un analizador automtico de la accesibilidad web que est disponible en castellano y adems tiene
una versin ejecutable en la direccin: http://www.tawdis.net
La nica condicin para que TAW apruebe una pgina como accesible consiste en la ausencia de
problemas de prioridad 1, tanto de los detectables automticamente (automticos) como los que
requieren verificacin manual (manuales).
TAW distingue entre dos tipos de problemas de accesibilidad:
Problemas de tipo automtico: son aquellos que pueden ser reconocidos como tales por la
aplicacin.
Problemas de tipo manual: son aquellos otros problemas que requieren la verificacin del usuario
ya que dependen de condiciones no comprobables por el programa.
Una pgina cumple con el nivel mnimo de accesibilidad si no tiene problemas de prioridad 1 ni de tipo
automtico ni de tipo manual.
76
BARRA AIS.
Existen otras soluciones, la barra de herramientas de accesibilidad web ha sido desarrollada por el
equipo de Accesible Information Solutions (AIS) del National Information and Library Service (NILS),
Australia. La barra ha sido traducida por Fundosa Teleservicios (Fundacin ONCE), Madrid, Espaa.
Enlace de acceso a la barra de herramientas:
http://www.teleservicios.com/SRV/barra_ais/index_es.asp#develop
La Barra de Herramientas de Accesibilidad Web se ha desarrollado para facilitar el examen manual de

diversos aspectos de la accesibilidad de las pginas Web. Consiste en una serie de funciones que
ayudan a:
Identificar los componentes de una pgina web
Facilitar el uso de aplicaciones en lnea proporcionadas por terceros: por ejemplo:
Enviar la URL de la pgina actual a la herramienta de comprobacin de accesibilidad

TAW Enlace: http://www.tawdis.net
Comprobar el cdigo HTML de la pgina (o pginas) actual con el validador HTML del
W3C. Enlace: http://validator.w3.org/
Comprobar la codificacin CSS en la pgina actual con el Validador CSS del W3C.
Enlace: http://jigsaw.w3.org/css-validator/
Simular la experiencia de diferentes tipos de usuarios.
Proporcionar enlaces a referencias y recursos de informacin adicionales
Pgina de informacin sobre la funcionalidad de la barra de herramientas.
Informacin acerca de la versin de la barra de herramientas y su desarrollo.
Existe una Gua Prcticas de Comprobacin de Accesibilidad, del Instituto Nacional de Tecnologas de la
Comunicacin.
http://www.inteco.es/Accesibilidad/difusion/Manuales_y_Guias/guias_comprobacion
El objetivo de las Guas Prcticas de Comprobacin de la Accesibilidad Web es identificar los

requisitos de accesibilidad y proporcionar un mtodo de evaluacin mixto (manual y automtico) para
comprobar su validez.
Se pretende ofrecer una visin general de la Accesibilidad Web para cada tipologa de contenidos as
como una metodologa prctica que permita comprobar la adecuacin de los mismos conforme a las
normativas y recomendaciones vigentes.
1. Introduccin a la Accesibilidad Web.
2. Herramientas de Evaluacin de la Accesibilidad.
77
3. Comprobacin de la Accesibilidad: Imgenes.
4. Comprobacin de la Accesibilidad: Multimedia.
5. Comprobacin de la Accesibilidad: Objetos Programados.
6. Comprobacin de la Accesibilidad: Tablas.
7. Comprobacin de la Accesibilidad: Formularios.
8. Comprobacin de la Accesibilidad: Estructura y Presentacin.
9. Comprobacin de la Accesibilidad: Navegacin y Orientacin.
10. Comprobacin de la Accesibilidad: Legibilidad y Metainformacin.
Nuevas recomendaciones, WCAG 2.0
El 11 de diciembre de 2008 el W3C culmin el desarrollo de las Pautas de Accesibilidad al Contenido

Web 2.0 (WCAG 2.0). Estas Pautas suponen un importante paso para adaptarse a los cambios
tecnolgicos que se han ido produciendo en los ltimos aos, al tiempo que su redaccin les permite
estar preparadas para tecnologas futuras.
Con las aparicin de las WCAG 2.0 por parte de W3C, intentan suceden a las Pautas de Accesibilidad
para el Contenido Web (WCAG) 1.0. Aunque es posible cumplir con las WCAG 1.0 o con las WCAG 2.0
(o con ambas), el W3C recomienda que los contenidos nuevos o actualizados sigan las WCAG 2.0. El
W3C tambin recomienda que las polticas de accesibilidad web hagan referencia a las WCAG 2.0.
Pautas de accesibilidad al contenido web 2.0 (WCAG 2.0)
Se componen de se compone de 4 principios, 12 directrices y 61 criterios de cumplimiento (xito), ms

un nmero no determinado de tcnicas suficientes y tcnicas de asesoramiento:
1. Principio 1: Perceptibilidad - La informacin y los componentes de la interfaz de usuario

deben presentarse a los usuarios de la manera en que puedan percibirlos. : 4 directrices y 22
criterios de cumplimiento.
Directriz 1: Texto alternativo: Proporciona texto alternativo para el contenido que no sea
textual, as podr ser transformado en otros formatos que la gente necesite, como
caracteres grandes, lenguaje braille, lenguaje oral, smbolos o lenguaje ms simple.
Directriz 2: Contenido multimedia dependiente del tiempo: Proporcione alternativas

sincronizadas para contenidos multimedia sincronizados dependientes del tiempo.
Directriz 3: Adaptable: Crear contenido que pueda ser presentado de diferentes formas sin
perder ni informacin ni estructura.
Directriz 4: Distinguible: Facilitar a los usuarios ver y escuchar el contenido incluyendo la

distincin entre lo ms y menos importante.
78
2. Principio 2: Operabilidad - Los componentes de la interfaz de usuario y la navegacin deben

ser operables. : 4 directrices y 20 criterios de cumplimiento.
Directriz 1: Teclado accesible: Poder controlar todas las funciones desde el teclado.
Directriz 2 Tiempo suficiente: Proporciona tiempo suficiente a los usuarios para leer y utilizar
el contenido.
Directriz 3: Ataques epilpticos: No disear contenido que pueda causar ataques epilpticos.
Directriz 4: Navegacin: Proporciona formas para ayudar a los usuarios a navegar, a buscar
contenido y a determinar donde estn estos.
3. Principio 3: Comprensibilidad - La informacin y el manejo de la interfaz de usuario deben ser

comprensibles. : 3 directrices y 17 criterios de cumplimiento.
Directriz 1: Legible. Hacer contenido de texto legible y comprensible.
Directriz 2 Previsible: Hacer la apariencia y la forma de utilizar las pginas web previsibles.
Directriz 3 Asistencia a la entrada de datos: los usuarios de ayuda evitarn y corregirn

errores.
4. Principio 4: Robustez - El contenido debe ser lo suficientemente robusto como para confiarse
en su interpretacin por parte de una amplia variedad de agentes de usuario, incluidas las
tecnologas asistidas. : 1 directriz y 2 criterios de cumplimiento.
Directriz 1 Compatible: Maximiza la compatibilidad con los agentes de usuario actuales y

futuros, incluyendo tecnologas de asistencia.
Comparativa de WCAG 1.0 - WCAG 2.0
Las WCAG 2.0 mejoran las WCAG 1.0 y se consideran los referentes definitivos en accesibilidad
Web. Por este motivo el conocimiento y adopcin de esta versin de las pautas por parte de las
empresas es de vital importancia de cara a un posicionamiento para un futuro, siendo una necesidad
para mejorar la competitividad.
En Espaa las WCAG 1.0 a travs de la Norma UNE 139803:2004 son obligatorias a travs del
Real Decreto 1494/2007. Se cree que en poco tiempo dicha Norma ser actualizada para adaptarla a
las WCAG 2.0, convirtindose de esta forma en un requisito legal. Por este motivo, desde su aparicin
se aconseja adoptarlas.
Desde el ao 2008 se aconseja la aplicacin de estas normas por encima de las WCAG 1.0 con el
fin de evitar una doble inversin en accesibilidad por parte de las empresas.
Diferencias estructurales y organizativas.

WCAG 2.0 va acompaado de una documentacin de soporte mucho ms amplia, con ms tcnicas
(en este momento para ms tecnologas W3C, posteriormente para tecnologas propietarias). Adems
describe fallos tpicos que dan lugar a incumplimiento de cada criterio.
La jerarqua de los componentes del conjunto ha cambiado ligeramente. Ahora tenemos cuatro
niveles: o Principios fundamentales (normativos)
79
Pautas (normativas)
Criterios de xito (normativos)
Tcnicas de xito y fallos comunes (slo informativos)
WCAG 1.0 tiene Pautas, y cada una de ellas tiene sus Puntos de Verificacin. Estos puntos son la
base para determinar el cumplimiento; WCAG 2.0 tiene cuatro Principios fundamentales, que a su vez
contienen Pautas. Cada pauta tiene sus Criterios de xito. Estos ltimos son la base para determinar el
cumplimiento. Para cada criterio de xito se proporcionan tcnicas y fallos comunes que son orientativos.
Un mismo criterio de xito puede aparecer con distintos niveles de conformidad. Por ejemplo, el criterio
1.4.3 Contraste (Mnimo) con Nivel AA y el 1.4.6 Contraste (Mejorado) con Nivel AAA. Son esencialmente
lo mismo, pero a nivel AAA es ms exigente.
En WCAG 1.0 cada punto de verificacin va acompaado de una descripcin con ejemplos, que suelen
ser para HTML. En el documento principal de WCAG 2.0 cada criterio de xito es escueto y preciso, sin la
descripcin y sin ejemplos, pero con enlaces directos a los apartados sobre el mismo criterio en los
documentos de soporte Comprender WCAG 2.0 y Tcnicas para WCAG 2.0. Los documentos de
soporte son mucho ms detallados y claros que los correspondientes documentos de WCAG 1.0.
Describen en detalle la intencin de cada pauta y criterio y cmo ayuda a personas con diferentes
discapacidades, incluyendo notas sobre el soporte en navegadores y productos de apoyo, ejemplos, y
enlaces a recursos de informacin externos.
Mientras WCAG 1.0 tiene su lista de comprobacin, WCAG 2.0 tiene una referencia rpida Cmo
cumplir con WCAG 2.0 que se puede filtrar por niveles y tecnologas para ver slo lo que interesa en
cada momento.
Referencias de inters.
Enlace de importante para ampliar informacin sobre accesibilidad Web.
http://www.slideshare.net/tayzee/taller-de-introduccin-a-la-accesibilidad-web
World Wide Web Consortium (W3C). http://www.w3.org/
Oficina Espaola W3C. http://w3c.es/
Pgina principal de WAI de la Iniciativa de Accesibilidad Web del W3C, donde se puede
encontrar la informacin ms actual sobre accesibilidad Web. http://www.w3.org/WAI/
Centro Estatal de Autonoma Personal y Ayudas Tcnicas. http://www.ceapat.org/

Para ms informacin: http://www.technosite.es/SRV/614_es.html
Legislacin.
Recopilacin de las principales disposiciones que directa o indirectamente afectan al mundo de

la accesibilidad en Espaa.
80
http://www.inteco.es/Accesibilidad/Legislacion_2/Espana
Legislacin que afecta a nivel europeo.
http://www.inteco.es/Accesibilidad/Legislacion_2/Europa
Referencia Tcnica.
Pautas de Accesibilidad al Contenido en la Web 1.0. http://www.w3.org/TR/WCAG10/
Norma UNE 139803:2004, Aplicaciones informticas para personas con discapacidad.

Requisitos de accesibilidad para contenidos en la Web.
http://www.inteco.es/Accesibilidad/Normativa_1/Descarga/DescargaUNE_139803
12.- Hojas de estilo en cascada CSS

HTML desde el principio se intent la definicin de estilos lgicos que se centrasen ms en el
contenido de la informacin que en su presentacin, con motivo una evolucin del HTML se ha ido
centrada en mejorar su presentacin. Con el nuevo concepto surgi gracias a la posibilidad que ofrecen
algunos navegadores ms avanzados una presentacin ms complejas, sin olvidar que no siempre es
posible su visualizacin o su compatibilidad con los distintos Navegadores.
Viene del trmino CSS (Cascading StyleSheet, Hojas de Estilo en Cascada) y est recogido en la
W3C.
CSS3 es mecanismo que permite al diseador y a los usuarios realizar unin reglas de estilo en el
que se incluyen fuentes, tamaos, color, espacios, etc. y aadirlo a una pgina HTML. De hecho,
necesitamos insertarlo dentro de las etiquetas y atributos que hemos aprendido de HTML.
Las hojas de estilo en CSS, es el conjunto de reglas definidas para un determinado sitio Web.
Se usan principalmente para definir reglas de estilos que luego se aplicarn a las pginas de nuestro
sitio, incluso a veces permiten definir caractersticas que no permiten definir los atributos HTML, como el
color de fondo para el texto por ejemplo.
Al estar la definicin de las reglas de estilos en un archivo externo a las pginas y comn a todas las
pginas del sitio (es recomendable) el aspecto de nuestras pginas ser ms homogneo y adems
podremos cambiar ese aspecto de manera segura e inmediata cambiando nicamente la hoja de estilos.
Se pueden definir reglas de estilos independientes o reglas de estilos asociados a determinadas

etiquetas por ejemplo a la etiqueta <p> (prrafo).De este modo, todos los prrafos de la pgina o del
sitio adquiriran la apariencia definida en ese estilo y con un slo cambio en la hoja de estilos podemos
cambiar de golpe el estilo de todos los prrafos en todas las pginas vinculadas a este estilo.
Las reglas de estilo pueden crearse con cualquier editor de texto, como puede ser el Bloc de notas,
y pueden guardarse con la extensin .css.
Versiones.
81
CSS nivel 1 (1996, revisado en 2008) http://www.w3.org/TR/CSS1
CSS nivel 2 (1998), actual: 2.1 (2011) http://www.w3.org/TR/CSS21
CSS 2.1 Soportado por todos los navegadores habituales
CSS nivel 3 (en desarrollo) http://www.w3.org/Style/CSS/current-work
Varias caractersticas ya definidas (selectores, pseudoclases y muchas propiedades) las

van soportando todos los navegadores habituales (MS Internet Explorer es el ms retrasado,
solo desde la versin 10.0)
Enlace Reglas de estilo
Para poder utilizar las propiedades de una regla de estilo en una pgina web, hay que vincularla a
ella.
Una misma pgina puede tener varias hojas de estilo vinculadas.

Se puede realizar de 4 formas distintas
1. Usando un LINK a un fichero .css externo.
Usando un fichero externo que contenga las reglas estilos necesarios para ser referenciado
desde una o varias pginas Web. Es sin duda una de las mayores virtudes, ya que nos permite
definir una regla utilizable para todas nuestras pginas web, con lo que reduce la carga de trabajo
al poder reutilizar y realizar modificaciones en la reglas de estilos repercutiendo en todas las
pginas web vinculadas al estilo. De esta manera, cambiando los estilos contenidos en el fichero
podemos cambiar el aspecto de toda la web.
Para vincular un fichero externo con reglas de estilos a una pgina es necesario insertar la
etiqueta <link> en la pgina, entre las etiquetas <head> y </head>. Si se desea utilizar ese mismo
fichero para varias pginas se repetir la etiqueta <link> en cada una de ellas. Esta etiqueta no
necesita etiqueta de cierre.
<head>
<link href="misEstilos.css" rel="stylesheet" type="text/css" >
</head>
El atributo href se especifica la direccin de las reglas de estilo que se va a vincular.
A travs del atributo rel se especificar que se intenta vincular una regla de estilo, por lo que su
valor ha de ser stylesheet.
Con el atributo type se indica que el archivo es de texto, con sintaxis CSS, por lo que su valor
debe ser text/css.
82
2. Una marca <STYLE> dentro de la <HEAD>.
Creando un espacio entre las etiquetas <style> </style> dentro de pgina que deseamos
utilizar las reglas definidas.
<head>
<style type= "text/css"> Pgina.html
H1 {color:red;
font-size:10em;
}
</style>
</head>
3. Una hoja de estilo importada del CSS denominada "@import".
Es muy similar a apartado 1 y 2
Ejemplo:
<style type= "text/css">
@import url(http://misEstilos.css);
</style>
4. Definicin en la propia etiqueta html
Es la manera de personalizar una regla de estilo de cualquier de las etiquetas HTML. Se

especifica con el atributo style, dentro de la etiqueta afectada.
Ejemplo.
<BODY>
<Hl style="color:red;" > La cabecera es rojo </HI>
<P style="color:green;"> Mientras que el prrafo es verde
</BODY>
El concepto de Cascada
A travs del concepto de cascada se establecen la jerarqua que determinan la forma en que una
definicin de regla de estilo puede sustituir a otra.
83
Como ya hemos visto las reglas de estilos pueden definirse en varios sitios:
1. En un fichero externo.css que luego referenciamos a travs de la etiqueta <LINK> o @IMPORT .

2. A travs de un bloque de estilos definidos en la etiqueta <STYLE>.
3. Directamente sobre la etiqueta HTML.
La utilizacin conjunta de estos mtodos no es incompatible, sino que en muchos casos es necesaria
y recomendable. Es decir, en una pgina HTML nos puede interesar utilizar el fichero.css global que
utilizamos para todas las pginas Web, y luego definir reglas de estilos particulares para esa pgina.
Esto va a dar lugar a que muchas definiciones de estilo se solapen y entonces la jerarqua de cascada
nos garantiza que manda la ltima regla de estilo definida siguiendo el orden jerrquico definido en la lista
anterior. Es decir si se utiliza una regla definido en el fichero externo ser el dominante, siempre que no
se defina otra regla de estilo dentro de la etiqueta afectada en este caso dominara esta ltima.
Hay que tener en cuenta que las propiedades se heredan de los elementos padre. Por ejemplo, si
decimos que el texto del body ser de color negro, todos los elementos tendrn este color para el texto, a
no ser que indiquemos otra cosa.
El proceso para resolver la regla que se aplica es el siguiente:
1. Buscar todas las declaraciones aplicables a un elemento.
Solo se tienen en cuenta las que correspondan al medio CSS seleccionado.
2. Si no existen reglas, se usa el valor heredado.
Si no hubiera valor heredado, el navegador usa el valor por defecto
3. Si existen reglas, se aplica la de mayor peso de acuerdo a los siguientes criterios:
En cualquier momento podemos saltarnos el orden de prioridad de los estilos, aadiendo

!important al final de una propiedad.
selector { atributo:valor ! important ; atributo: valor ; }
Ejemplo:
p { color: blue !important;

color: red;
}
Se da mayor prioridad a los selectores ms especficos.
etiqueta << clase << ID
Si despus de aplicar las normas anteriores existen dos o ms reglas con la misma prioridad, se
aplica la que se indic en ltimo lugar
13.- Sintaxis CSS

Sintaxis CSS
Como hemos visto, hasta ahora se utilizamos etiquetas normales de HTML. Todas las propiedades del
84
estilo se especifica a travs del atributo style, y debe aparecer entre comillas dobles, con un punto y
coma detrs de cada una. La asignacin de valores a las propiedades se utiliza el smbolo: (dos puntos).
<etiqueta style="propiedad:valor;">... </etiqueta>
Esto es debido a que se est especificando una regla de estilo, pero sin vincular ninguna hoja de estilo
a la pgina.
Para especificar las propiedades de una regla de estilo, la sintaxis es muy similar.
En el momento de definir las reglas debemos tener en cuenta que estos se pueden declarar
directamente sobre la etiqueta HTML o que podemos definirlos en su conjunto para toda la pgina html o
en un fichero externo.
Definicin en la propia etiqueta html
La sintaxis bsica para especificar una regla de estilo en una etiqueta determinada es:
<etiqueta STYLE="propiedad:valor;....">... </etiqueta>
Donde etiqueta representa una etiqueta estndar del HTML y la palabra STYLE es el atributo que
indica que a dicha etiqueta le vamos a asociar una regla. El resto ya es la definicin propia del estilo que
viene definido por un las propiedades, valor separados entre s por dos puntos y del resto de pares por un
punto y coma.
En propiedad indicamos que caracterstica (tipo de fuente, color, etc.) queremos cambiar y el valor
que le damos.
Por ejemplo si a un prrafo le queremos dar un tamao de fuente 10px y un margen izquierdo de 20
px.
<p STYLE="font-size:10px; margin-left:20px;">Mi Primer prrafo con Estilo</p>
Pero la asignacin individual a cada etiqueta de la regla de estilo puede resultar un poco pesada
tambin contamos con la posibilidad de definirlos de forma global para toda la pgina.
En valor indicamos la magnitud que debe tomar la regla de estilo definido, bien unidades o en valores
predefinidos, dentro de las unidades podemos distinguir.
Unidades Absolutas
Son medidas con un valor fijo. Si indicamos medidas de este tipo, solo deben usarse cuando
pretendamos fija un tamao indispensable para su visualizacin.
Las distintas unidades Absolutas que podemos usar son las siguientes:
CSS Unidad
Descripcin
In pulgadas Equivale a 2,5 cm.
85
Cm Centmetros Una centsima parte del metro.
Mm milmetros Una milsima parte del metro.
Pt puntos Un punto es 1/72 pulgadas. Su tamao concreto depende de la

resolucin de la pantalla, siendo iguala un pixel para resoluciones de
72dpi. Esta es la unidad de medida de los procesadores de texto, siendo
lo valores normales entre 10, 12 puntos.
Pc picas Una pica equivale a 12 puntos
Em anchura-m Es una unidad relativa al tamao del texto adyacente.
Por ejemplo 1.0em significa que se mantenga el tamao, 0.5em significa

que se reduzca a la mitad y 2.0 hace que el tamao sea el doble.
Ex altura-x Equivale a la altura de la letra x minscula.
Px pxeles Un pixel es la unidad de medida usada en los monitores, representa la

distancia entre un punto de la pantalla y el siguiente.
NOTA: Este tipo de unidades no se debe utilizar, porque no cumplir las Pautas de accesibilidad
al Contenido Web (WCAG) o acceso universal a la web
Unidades Relativas
Toman el valor relativo al tamao del documento, del monitor, impresora, etc., segn el caso y
son las siguientes:
px: la ms utilizada es el Pixel que es la cantidad de puntos en los que se divide el

monitor. Si tu monitor tiene una definicin de 800x600, se refiere a pixeles.
ex: se refiere a la altura de la "x" del tipo de letra usada.
em: es relativa al tamao de letra M definido por font-size.
CUIDADO. Nunca separis la cifra (el nmero) de las unidades (px, pt, ex, em) con un espacio, hay
algunos navegadores no las leern.
Los tantos por ciento % porcentajes
Cuando indicamos las unidades en porcentajes, nos referimos al tanto por ciento de la zona
que contiene al elemento donde se aplica.
Por ejemplo, si se especifica un tamao de celda de 50%, sta ser la mitad de la tabla. Si se
indica una anchura del 25% a una tabla, esta ser el 25% del ancho del sitio donde ste,
contenido normalmente del documento, siempre se refiere al porcentaje del espacio que lo
contiene.
86
Ejemplo de propiedades, sus valores y unidades podran ser:
p { text-indent: 20px; } (sangria de prrafo de 20 px)

.gigante { font-size: 10cm} (texto de 10cm de altura)
p { word-spacing: 5mm} (espacio entre palabras de 5mm)
Dentro del documento Html
Para definir serie de reglas de estilos de forma global dentro de un documento HTML se emplea las
etiquetas <STYLE>. </STYLE>, esta tiene que estar colocada en la cabecera del documento HTML es
decir entre la etiqueta <HEAD></HEAD> de la siguiente manera:
<HTML>
<HEAD>
<TITLE>Esta es mi primera hoja de estilos</TITLE>
<STYLE TYPE="text/css">
<!-
......
Estilos y sus propiedades
-->
</STYLE>
</HEAD>
La definicin de la regla de estilo se realiza de forma similar a la indicada arriba:
En este caso debemos colocar entre llaves { . } la definicin del estilo.
Un ejemplo tpico sera:

H1 Color: red
<STYLE TYPE="text/css">
<!-
H1 {color:red;}
P {font-size:10px; marginleft:20px;} Selector Propiedad Valor
-->
</STYLE>
Donde estamos indicando que todo el texto que se encuentra entre las etiquetas <h1></h1> el texto
Selector Propiedad Valor
ser de color rojo, y el que est entre las etiquetas <p></p> el tamao del texto 10px. y tendr un
margen izquierdo de 20px.
En un Archivo
El conjunto de reglas de estilo se denomina Hojas de estilo, se puede y se debe (consejo) definir
dentro de un archivo externo y luego referenciarlas desde el cdigo HTML.
Las hojas de estilo en CSS estn compuestas de reglas.
El fichero hoja_estilos.css es un simple archivo de texto con extensin *.css en el que definimos las
reglas de estilo en funcin de la sintaxis que hemos descrito anteriormente.
/*Fichero hoja_estilos.css*/
<!-
H1 {color:blue;}
87
P {font-size:10px; marginleft:20px;}
-->
/*Fin del fichero hoja_estilo.css*/
14.- Propiedades de las reglas de estilo
De igual manera que en HTML hemos ido viendo los diferentes atributos de la etiquetas para darles
una aspecto personalizado. En CSS como ya hemos visto que la definicin de estilos consiste en la
sucesin de pares propiedad: valor separados por; en los que indicamos que caracterstica del texto que
va entre la etiqueta HTML queremos controlar.
Todas estas propiedades estn divididas en 6 grandes grupos que facilitan su utilizacin y
documentacin:
Propiedades de texto
Propiedades de las fuentes
Propiedades de los colores y fondos
Propiedades de mrgenes y padding
Propiedades de los bordes
Propiedades del texto
Son propiedades que afectan a la presentacin visual de caracteres, espacios, palabras y prrafos, las
propiedades que podemos utilizar son las siguientes:
text-transform
text-align
text-indent
text-decoration
letter-spacing
text-transform
Especifica, por medio de palabras reservadas, si las letras del texto deben transformarse en
maysculas, minsculas, slo la primera letra de cada palabra en maysculas, o si ha de dejarse
como est.
Capitalize.
Pone en mayscula la primera letra de cada palabra. Por ejemplo, "curso web" aparecer como
"Curso Web".
h1 { text-transform: capitalize; }
uppercase
Convierte todas las letras a mayscula. Por ejemplo, "curso web" aparecer como "CURSO
WEB".
h1 { text-transform: uppercase; }
lowercase
88
Convierte todas las letras a minscula. Por ejemplo, "CURSO WEB". Aparecer como "curso
web".
h1 { text-transform: lowercase; }
none
No se realiza transformacin alguna; el texto se presenta tal como aparece en el cdigo HTML.
h1 { text-transform: none; }
text-align
La propiedad CSS text-align es el equivalente al atributo align usado en versiones

anteriores de HTML. Los valores posibles de esta propiedad son: left (texto alineado a la izquierda),
right (texto alineado a la derecha) o center (texto con alineacin centrada). Adems, el valor justify
(alineacin justificada).
vertical-align
Alineacin vertical del texto en relacin con la lnea base del texto.
baseline | sub | super | top | text-top | middle | mottom | text-bottom | %
STRONG {vertical-align: sub}
text-indent
Fija la sangra o indentacin de la primera lnea del texto.
XX unidad | %, (Por defecto su valor es 0)
p { text-indent: 1em }
line-height
Indica la distancia entre dos lneas adyacentes. Se hereda.
normal | XX unidad | %
text-decoration
Fija una o ms caractersticas "decorativas" del texto, como subrayado, lneas superiores,
caracteres tachados o parpadeantes.
Si se aplica a un elemento de bloque la heredan slo los descendientes que sean de texto (o en-
lnea). Si se aplica a uno de stos la heredan todos los descendientes.
underline | overline | line-trough | blink | none
H1 {text-decoration: underline;}
letter-spacing
89
Especifica el espaciado entre letras. En el caso de especificar una longitud esta se sumar a la
normal.
normal | XX unidad
H1 { letter-spacing: 0.5px}
word-spacing
Especifican el espaciado entre palabras. En el caso de especificar una longitud esta se sumara a
la normal. Se hereda.
normal | XX unidad
H1 { word-spacing: 0.5px}
Propiedades de las fuentes

Con estas propiedades controlamos el estilo de una fuente, su tamao, su familia, su grosor, etc.
Las propiedades que podemos utilizar son las siguientes:
font-family
font-style
font-variant
font-weight
font-size
font
font-family
Indicamos la familia de la fuente a utilizar. Sus posibles valores son los nombres de las fuentes,
pudiendo especificar un conjunto de familias. Se selecciona la primera que se encuentra en el
sistema.
nombre de las familias de las fuentes | familia genrica
BODY { font-family: Verdana, Arial, Helvetica, sans-serif;}
En el ejemplo anterior estamos indicando que todo el contenido de la pgina est en Verdana, y
que en caso de que no est instalada (mquina cliente) utilice Arial y si no Helvtica y si no el tipo de
familia genrica sans-serif.
font-style
Especifica el estilo de la fuente, es decir, si los caracteres irn en normal, en itlica (cursiva)
o en oblicua (un poco ms inclinada que la itlica). Se hereda.
normal | italic | oblique
H1, H2, H3{font-style: italic} H1,EM{font-style: normal}
90
En este ejemplo estamos indicando que las cabeceras de hasta nivel 3 irn en itlica. Pero que el
texto enfatizado de las cabeceras de nivel 1 ir en normal.
font-variant
Especifica la variante de la fuente, es decir, si los caracteres sern tomados de la fuente normal o
de small-caps (o versalitas, donde las minsculas son parecidas a las maysculas pero de menor
tamao) dentro de una familia de fuentes. Se hereda.
normal | small-caps
Ejemplo:
h1 {font-variant: small-caps;}
h2 {font-variant: normal; }
font-weight
Especifica el peso, densidad o grosor (cantidad de espacio ocupado en relacin con el rectngulo
en que se inscribe el carcter) de la fuente de caracteres dentro de una familia de fuentes, con
valores entre 100 y 900 siendo cada vez ms densos. El valor 400 equivale a normal, y el 700 a
bold.
El valor bolder indica que los caracteres deben ser ms densos que el valor heredado excepto
en el que caso de que ya valga 900.
El valor lighter funciona a la inversa de bolder indicando que tiene que ser de menos densidad
excepto en el caso de que ya valga 100.
Esta propiedad se hereda.

lighter | normal | bold | bolder | 100 | 200 | 300 | ...... | 900
p {font-family: arial, verdana, sans-serif;}
td {font-family: arial, verdana, sans-serif; font-weight: bold;}
font-size
Especifica el tamao de la fuente.
Puede ponerse como una longitud en unidades (absoluta o relativa), aunque tambin admite
palabras reservadas que indican tamao absoluto predefinido (de menor a mayor xx-small, x-small,
small, medium, large, x-large, xx-large).
Los valores larger y smaller especifican un tamao, en relacin con los anteriores,
respectivamente un grado mayor o menor que el heredado.
Para facilitar el funcionamiento en cascada, es conveniente utilizar longitudes relativas (como em)
o porcentajes.
XX units | % | larger | smaller | xx-small | x-small | medium | large | x-large | xx-large
Ejemplo:
91
h1 {font-size: 30px;}
h2 {font-size: 12pt;}
h3 {font-size: 120%;}
p {font-size: 1em;}
Existe una diferencia importante entre las cuatro unidades anteriores. Las unidades 'px' y 'pt'
establecen el tamao de la fuente de forma absoluta, mientras que '%' y 'em' permiten al usuario
ajustar el tamao. Muchos usuarios son discapacitados, mayores o sufren de disminucin visual, o
disponen de un monitor de mala calidad. Para que tu sitio web sea accesible para todo el mundo,
deberas usar unidades relativas como, por ejemplo, '%' o 'em'.
Combinacin de propiedades font
Si usamos la propiedad abreviada font es posible incluir todas las propiedades diferentes relativas
a fuentes en una nica propiedad.
Por ejemplo:
p { font-style: italic;
font-weight: bold;
font-size: 30px;
font-family: arial, sans-serif;
}
Usando la propiedad abreviada, el cdigo se puede simplicar as:
p{ font: italic bold 30px arial, sans-serif; }
El orden de los valores para la propiedad font es:
Font-style | Font-variant | Font-weight | Font-size | font-family
Propiedades de los colores y los fondos

Son las propiedades que permiten fijar el color del primer plano y fondo de un elemento.
color
background-color
background-image
background-repeat
background-attachment
background-position
background
Color
Especificamos el color del primer plano del contenido del texto.
Nombre Color | Valor HEX | Rgb (R%, g%,B%) | Rgb(R, G,B)
Ejemplo:
92
h1 { color: #ff0000; } Rgb(R, G,B)

p { color: rgb(255,0,0); } Valor HEX
h2 { color: red; } Nombre Color
background-color
Especfica el color del fondo del elemento, que puede ser un color o la palabra reservada
transparent (el fondo del elemento padre se ve).
transparent | Nombre Color | Valor HEX | Rgb (R%,g%,B%) | Rgb(R, G, B)
H1 {background-color: #0000FF;}
En el anterior ejemplo todos los encabezados de nivel 1 aparecern con un fondo azul.
Ejemplo:
body { background-color: #FFCC66; }

h1 { color: #990000;
background-color: #FC9804;
}
background-image
Se utiliza para Inserta una imagen de fondo, la imagen rellena todo el fondo repitiendo la imagen
hasta completar la presentacin de la pgina, la palabra reservada none para indicar que no se
utilizar ninguna imagen.
none | url(direccin)
Ejemplo:
body {
background-color: #FFCC66;
background-image: url("rana1.gif");
}
h1 {
color: #990000;
}
El ejemplo con imagen de fondo, vamos a usar la rana1.gif que ves abajo. Descarga la imagen a su
PC para usarla en el ejemplo (pulsa el botn derecho sobre la imagen y elige "guardar imagen
como..."), o bien puedes usar cualquier otra imagen.
93
CUIDADO: Tiene que fijarse donde hemos especificado la localizacin de la imagen:

url("rana1.gif"). Esto significa que la imagen est en la misma carpeta que la pagina. Se puede
hacer referencia a imgenes en otras carpetas usando url ("../imagen/rana1.gif") o incluso
imgenes de internet si indicas la direccin completa del fichero:
url("http://www.ine.es/rana1.gif").
background-repeat
Establece si la imagen de fondo (establecida con background-image) se repetir horizontal y

verticalmente para rellenar todo el fondo del elemento (repeat), slo horizontalmente (repeat-x), slo
verticalmente (repeat-y), o no se repetir (no-repeat).
background-repeat: repeat; se repite;
background-repeat: no-repeat; no se repite.
background-repeat: repeat-x; se repite eje horizontal.
background-repeat: repeat-y; se repita eje vertical.
Ejemplo:
body { background-color: #FFCC66;

background-image: url("rana1.gif");
background-repeat: no-repeat;
}
h1 { color: #990000;
}
En este ejemplo al no especificarse la propiedad background-repeat por defecto se toma el valor

repeat por lo que la imagen "rana.gif" se repetir tanto horizontal como verticalmente tantas veces
como sea necesario hasta ocupar toda la zona determinada por el encabezado.
94
body {background-color:
#FFCC66;
background-image:
url("rana.gif");
background-repeat: repeat-x
}
La imagen se repite en el eje
horizontal
#FFCC66;
background-image:
url("rana.gif");
background-repeat:repeat-y }
La imagen se repite en el eje vertical
#FFCC66;
background-image:
url("rana.gif");
background-repeat: repeat;
La imagen se repite en todo el

documento.
95
#FFCC66;
background-image:
url("rana.gif");
background-repeat:no-repeat
La imagen no se repite.
background-attachment
Establece si la imagen debe desplazarse (scroll) o permanecer fija con respecto a la ventana
(fixed) cuando el usuario hace scroll. En cualquier caso slo asoma en el rea de contenido y relleno
del elemento.
background-attachment: fixed; la imagen queda fija se desplaza el

contenido.
background-attachment: scroll; la imagen se desplaza junto con el
contenido.
Ejemplo:

background-image: url("rana.gif");
background-attachment: fixed;
}
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Como se puede apreciar cuando se
Strict//EN" produce scroll, la imagen
"http://www.w3.org/TR/xhtml1/DTD/xhtml1- permanece fija mientras el
strict.dtd"> contenido se desplaza.
<html xmlns="http://www.w3.org/1999/xhtml"
lang="en">
<head>
<title>Ejemplo Imagen fondo</title>
<meta http-equiv="Content-Type" content="text/html;

charset=utf-8" />
<style type="text/css">

Background-attachment: fixed;
}
h1 { color: #990000;
}
96
p { color: black; }
</style>
</head>
<body>
<h1>Documento con imagen de fondo</h1>
<p>De igual manera que en HTML hemos ido viendo
los diferentes atributos de la etiquetas para
darles una aspecto personalizado. En CSS como ya
hemos visto que la definición de estilos
consiste en la sucesión de pares propiedad:
valor separados por ; en los que indicamos que
característica del texto que va entre la
etiqueta HTML queremos controlar.</p>
</body>
</html>
background-position
Fija la posicin de la imagen en el rea de relleno del elemento por medio de:
Coordenadas, expresadas como longitud (distancia hasta la esquina superior izquierda del lmite de
relleno) o porcentaje sobre el tamao de la caja (el punto n% de la imagen se sita en el punto n% del
rea de relleno), de manera que "0% 0%" indica un ajuste a la esquina superior izquierda, "100%
100%" a la inferior derecha y "50% 50%" centrada. Si se expresa una sola se entiende como "x"
dndose a "y" el valor 50%.
Palabras reservadas, poniendo una o dos en cualquier orden. Si falta una se le da el valor "center",
de manera que por ejemplo "left" es equivalente a "center left".
XX unidad | % | top | center | bottom | left | right (el valor por defecto es la esquina superior
izquierda "0% 0%")
Ejemplo: cdigo siguiente posiciona la imagen de fondo en la esquina inferior derecha:

background-position: right bottom;
}
Combinacin de propiedades background
Esta propiedad en s representa un mtodo abreviado para especificar todos los valores en un solo
marcador.
transparent | color | url | repeat | scroll | position
Ejemplo:
background-color: #FFCC66;
background-position: right bottom;
Usando background se puede abreviar el mismo resultado con una nica lnea de cdigo:
97
background: #FFCC66 url("rana.gif") no-repeat fixed right bottom;
El orden en que deben aparecer las propiedades individuales es el siguiente:

[background-color] | [background-image] | [background-repeat]| [background-
attachment] | [background-position]
Sobre la utilizacin del color
El color puede ser especificado mediante nombre o mediante especificacin RGB.
Los nombres son los pertenecientes a la paleta VGA de Windows: aqua, black, blue, fucshia, gray,
green, lime, marron, navy, olive, purple, red, silver, teal, white, y yellow.
black Silver gray white
maroon Red purple fuchsia
green Lime olive yellow
navy Blue teal aqua
La especificacin RGB se puede efectuar de tres formas. La primera es mediante tres nmeros
hexadecimales, donde el primero corresponde a la cantidad de rojo, el segundo a la cantidad de verde y
el tercero a la cantidad de azul.
Por ejemplo.
#FF0000 -> Ser el color rojo

#00FF00 -> Ser el color verde
#0000FF -> Ser el color azul
y con la combinacin de estos podemos conseguir el color que necesitemos.
#FFFF00 -> Amarillo
El mismo color puede ser especificado mediante la funcin rgb() indicando el cdigo de color o el
porcentaje:
98
rgb(0,255,0) -->color verde

rgb(0%,100%,0) -->color verde
Propiedades de mrgenes y padding
Con estas propiedades especificamos los mrgenes de cualquier elemento y con el padding
controlamos la distancia entre el borde y el contenido. Las propiedades que podemos utilizar son las
siguientes:
margin-top
Fijamos el margen superior.
Con la propiedad auto el navegador dar un valor adecuado dependiendo del tipo de elemento.
XX unidades | % | auto (el valor por defecto es 0)
margin-bottom
Fijamos el margen inferior.
margin-left
Fijamos el margen izquierdo. XX unidades | % | auto (el valor por defecto es 0)
margin-right
Fijamos el margen derecho.
Ejemplo:
body {
margin-top: 100px;
margin-right: 40px;
margin-bottom: 10px;
margin-left: 70px;
}
99
body {
margin-top: 50px;
margin-right: 40px;
margin-left: 35px;
}
Combinacin margin
Mediante esta propiedad podemos especificar todos los valores de los mrgenes de una sola vez.
Se pueden poner hasta cuatro valores, para especificar cada uno de los mrgenes.
margin: ancho1 ancho2 ancho3 ancho4
body {
margin: 100px 40px 10px 70px; }
Pero si slo especificamos ancho1 se refiere a los cuatro lados del margen. Si se especifican dos
valores, ancho1 se refiere a los lados superior e inferior y ancho2 al izquierdo y derecho. En el caso
de poner los tres primeros, ancho1 se refiere al lado superior, ancho2 al izquierdo y derecho y
ancho3 al inferior.
Ejemplo:
body {margin: 100px 40px 10px 70px;}
p {margin: 5px 50px 5px 50px;}
padding
La propiedad padding puede entenderse como "relleno". Esto tiene sentido puesto que el relleno
(padding) no afecta a la distancia de un elemento respecto a otros elementos, sino que slo define la
distancia interior entre el borde y el contenido del elemento.
100
body {
margin-top: 50px;
margin-right: 40px;
margin-left: 35px;
}
h1{ background: teal;
padding: 20px 20px 20px 120px;
}
h2 { background: orange;
padding-left:120px;
padding: 10px 20px 30px 120px;
los valores de asignas siguiendo las agujas de un reloj
padding-top=10px, padding-right=20px, padding-bottom=30px, padding-left=40px
padding-top
Distancia entre el borde superior y el contenido.
XX unidades | %
padding-right
Distancia entre el borde derecho y el contenido.
XX unidades | %
padding-bottom
Distancia entre el borde inferior y el contenido.
XX unidades | %
padding-left
Distancia entre el borde izquierdo y el contenido.
XX unidades | %
Propiedades del borde
Todos elementos de HTML tienen bordes que se pueden utilizar para diferentes situaciones, como
elemento decorativo o para subrayar la separacin entre dos cosas. CSS te ofrece opciones sin fin a la
hora de usar bordes en tus pginas.
101
border-width
border-color
border-style
border
border-width
Se puede especificar un valor numrico en pixeles o las palabras reservadas thin, medium y thick
para que el navegador asigne tres valores normalizados de grosor creciente y constantes en el
documento.
h1 { border-width: thick; }
h2 { border-width: 20px; }
border-color
La propiedad border-color define el color del borde. La anotacin es igual que color.
Ejemplo:
h1 { border-color: red; }
border-style
Especificamos el estilo de visualizacin del borde.
none: ninguno,
anchura,cero
dottet: punteado groove: hundido
dashed: discontinuo Ridge: resaltado
solid: liso inset: toda la caja

hundida
outset: toda la caja Double: doble
resaltada
En cada una de las cuatro propiedades podemos especificar en conjunto todas las caractersticas de
cada uno de los lados del borde: tamao, estilo y color.
102
15.- Enlace en CSS

Como vimos en HTML los enlaces se puede cambiar de apariencia (colores, fuentes, subrayado,
etc.). La novedad respecto a los enlaces es que en CSS te permite definir estas propiedades de forma
diferente dependiendo del estado del mismo, es decir, si el enlace se ha visitado, no se ha visitado, si es
el enlace activo o si el cursor est sobre dicho enlace. Esto permite aadir efectos tiles a tu sitio web.
Para controlar estos efectos se usan lo que se ha denominado como pseudo-clases.
Pseudoclases y pseudoelementos
Una pseudo-clase, proporciona en algunos casos a cierta etiqueta HTML una regla estilo especial
propio en funcin de determinadas condiciones o eventos. El hecho de que los enlaces se marquen y se
subrayen es un ejemplo de estilo que ya existe incluso antes de ser especificado en nuestra hoja de
estilo. A estos elementos los denominaremos pseudo-clases.
Por pseudoelementos nos referiremos a algunos elementos del documento que no estn
reconocidos como parte del HTML estndar pero que el navegador va a ser capaz de identificar y por lo
tanto proporcionarles un estilo determinado. Son por ejemplo la primera letra o la primera lnea de un
bloque de texto.
Pseudoclases
Por el momento slo podemos definir pseudoclases para los enlaces, es decir slo se utiliza con la
etiqueta A.
La forma de utilizarlas es la siguiente:
Etiqueta: Pseudoclase {definicin de estilo}
Se dispone de las siguientes pseudo-clases:
:link, nos indica el estilo con el que debe aparecer el enlace antes de ser visitado.
:visited, nos indica el estilo con el que aparece un enlace visitado.
:active, nos indica el estilo con el que aparece el enlace en el momento de activarlo, es decir de
pulsar sobre l.
:hover, nos indica el estilo en el que aparece el enlace al pasar por encima el ratn.
Las pseudoclases se pueden combinar con las clases. Es decir podemos aplicar estas pseudoclases slo
a la clase de enlace que nos interese.
Pseudoelementos
Los pseudolementos se utilizan por el momento para crear efectos de texto tales como letras
capitales o destacar la primera lnea de ciertos bloques de texto.
La forma de utilizarlas es la siguiente:
etiqueta:Pseudoelemento {definicin de regla}
103
Por el momento disponemos de los siguientes pseudoelementos:
:first-line, selecciona y aplica estilo a la primera lnea de un bloque de texto. La cantidad de texto
que compone la primera lnea depende del tamao y familia de la fuente, tamao de la ventana,
tamao del bloque, existencia de objetos flotantes, etc. Slo se pueden aplicar algunas
caractersticas de estilo.
:first-letter, selecciona la primera letra del texto de un bloque de texto para aplicarle
determinados efectos tipogrficos. Slo se pueden aplicar algunas caractersticas de estilo.
En el siguiente ejemplo la primera lnea de un prrafo debe mostrarse en maysculas.
P:first-line {text-transform:uppercase}
En el siguiente ejemplo los prrafos del documento van en negro y con un tamao de fuente de 12
puntos, en cambio la primera letra del prrafo debe ser verde y de doble tamao.
P {color: black; font-size: 12pt}
P:first-letter {color:green; font-size:200%}
Definicin de los estilos
Hasta el momento siempre que hemos definido la regla de estilo han ido asociados a una etiqueta
HTML.
El problema es que una misma etiqueta tendr que presentar el mismo aspecto en toda la pgina y
esto evidentemente algunos momentos no nos interesa. Hemos visto que utilizando las reglas que
determinan la cascada se puede evitar en parte este problema, pero mediante el uso de clases y de la
definicin de regla estilo con ID lo solucionaremos completamente.
A travs de ellos asociaremos a un identificador un estilo de manera que luego podamos utilizar este
identificador con la etiqueta HTML que nos interese.
Clases
Class es un conjunto de regla de estilo para un determinado propsito. Definiendo regla de estilo
mediante la utilizacin de clases, un formato que en principio no est asociado a ninguna etiqueta
HTML y que nosotros podemos vincular con la que queramos a travs del atributo CLASS.
Para definir una clase que identifica un estilo se hace como hasta ahora, la sintaxis es punto
Nombreclase seguido { reglas.. } Lo que cambiamos el nombre de la etiqueta por el nombre de
la clase.
IDENTIFICADORES
.NombreClase { color: blue
font-size:1em; } .azul color: blue;
Vinculamos a la etiqueta HTML con el atributo CLASS.

Selector Propiedad Valor
Ejemplo:
NombreClase
<p class="azul">Este prrafo ira en azul. </p>
nombre del
identificador
104
<h2 class="azul">Y este tambin</p>

Pudiendo ser las etiquetas diferentes.
Conviene tener bien clara la utilizacin de las clases, posiblemente sea la forma ms habitual de
definir estilos dada la libertad de accin que nos permiten al no obligarnos a presentar una misma
etiqueta con el mismo aspecto en toda la pgina.
ID
ID funcionan de forma similar a las clases pero estn limitados a su utilizacin con un slo elemento.
La sintaxis de ID, se definen utilizando el signo "#" seguido por el nombre del identificador y luego
las propiedades del estilo.
IDENTIFICADORES
#NombreID {regla o reglas}
li.#azul color: blue;
Selector Nombre Propiedad Valor

Identificador
Propiedad Valor
Que luego asociamos a la etiqueta HTML mediante el atributo ID.
<li id="NombreID">Este párrafo

nombreira
del en azul</p>
<li id="azul">Este párrafo ira en azul</p>
identificador
Lo importante de definir estilos utilizando ID es que de esa manera identificamos de forma unvoca
un elemento de la pgina HTML.
Diferencias entre CLASES e ID
La principal diferencia entre utilizar un identificador o una clase para definir un estilo es que mediante
un ID estamos identificando algn elemento de la pgina de forma unvoca y por tanto slo lo podemos
utilizarlo con ese elemento. Esto se suele hacer porque luego posiblemente querremos realizar alguna
accin sobre ese elemento, mientras que con una clase estamos definiendo un estilo genrico que luego
podremos utilizar sobre cualquier elemento del HTML.
16.- Agrupar elementos con span y div

Los elementos <span> y <div> son elementos muy importantes para maquetacin se pginas web,
se utilizan para agrupar y estructurar una pgina.
Entintaremos revisar el uso de los elementos <span> y <div>, ya que estos dos elementos de HTML
son, precisamente, de importancia clave en lo que se refiere a CSS.
Capas
La capa no son ms que un recuadro o bloques, que contiene un conjunto de etiquetas donde insertar
contenido HTML, y colocar en cualquier parte de la pgina. Dichas capas pueden ocultarse y solaparse
105
entre s, lo que proporciona grandes posibilidades de diseo o maquetacin de la pgina.
Para definir dicho recuadro o capa, se insertar entre las etiquetas <div> y </div>, que nos servir para
agrupar bloques de contenido.
Atributos:
id da un nombre a la capa.
style se establecen el resto de propiedades CSS de la capa, siempre se escribe entre doble
comillas.
Ejemplo:
<div id="contenido" style=" reglas de Estilo "> </div>
Tamao de la capa
En general, la maquetacin con capas se realiza sobre elementos en capas. Normalmente

divisiones, pero tambin lo podemos hacer con prrafos, listas, o con el propio body. Por defecto los
elementos de bloque ocupan todo el ancho del elemento que lo contiene, y su alto se ajusta al
contenido.
Las magnitudes suelen ser
absolutos, utilizando px, cm, etc.
relativos, utilizando porcentajes (%) y em.
El valor auto es el valor por defecto.
Ejemplo:
<p style="width:200px; height:100px; border: red 1px solid">
Posicionar capas
Los elementos se posicionan uno a continuacin de otro, por defecto. Si se trata de elementos de
bloque, como capas, prrafos, listas, etc., se irn colocando uno debajo del otro. A este
posicionamiento se le denomina esttico.
Utilizando la propiedad CSS position podemos modificar la posicin esttica de las capas.
Existen cuatro tipos de posicionamiento.
static. Es el normal (se asume por defecto).
relative. El posicionamiento relativo coloca la capa o bloque en su posicin normal. Permitiendo

corregir su posicin de su ubicacin original.
106
absolute. Con la posicin absoluta, especificamos la posicin de la capa con respecto al

elemento que lo contiene.
fixed. Se establece la posicin de la capa de forma parecida al absoluto, pero el elemento queda
fijo en la pantalla, aunque existan barras de desplazamiento.
Ejemplo.
En la imagen se muestra. Como posemos apreciar en este caso la capa tiene una posicin
absoluta dentro de la del documento, independientemente de los elementos que la rodean.
<div style="position: absolute; left: 200px; top:100px;">
El punto de fijacin de la capa seria la distancia 100px del eje vertical y 200px distancia eje
horizontal.
Los valores por defecto de top, left es 0px; el par (0,0).
Posicionamiento relativo
El posicionamiento relativo coloca el elemento en su posicin normal, y a partir de ah lo desplaza

la distancia que le indiquemos. Al desplazarlo deja un "espacio" donde estara su posicin normal.
Se indica, al principio de las reglas de estilo, utilizando la propiedad position: relative;
Se puede perfeccionar su ubicacin, con las propiedades para indicar el desplazamiento

horizontal, left para desplazarlo a la izquierda y right para hacerlo a la derecha. Se puede
utilizar valores negativos, produce el efecto opuesto.
Los para desplazarlo verticalmente utilizando top para desplazarlo hacia arriba o bottom para
hacerlo hacia abajo.
Ejemplo, para desplazar un elemento 10px a la derecha, podramos poner right: 10px; o left: -10px;
<div style="position: relative; left: -10%; top:0px; ">
107
Los valores por defecto de desplazamiento el elemento no cambian su posicin, por eso es muy
comn asignar el posicionamiento relativo a elementos para poder utilizar una propiedad que requiere
posicionamiento, como puede ser z-index.
Posicionamiento absoluto
El elemento que se posiciona de forma absoluta dentro de la pgina. Esto significa que no deja un
espacio vaco despus de ser posicionado.
Para posicionar un elemento de forma absoluta, la propiedad position se establece como position:
absolute. Posteriormente puedes usar las propiedades left, right, top, y bottom para
colocar la caja.
Para definir la posicin utilizamos top para referirnos a la distancia entre el borde superior del
elemento posicionado y el borde superior del elemento contenedor. Por lo tanto left ser la
distancia entre los lados izquierdos, right entre los lados derechos y bottom entre los lados
inferiores.
Ejemplo: #box1 { position:absolute;

top: 50px;
left: 50px;
}
Desbordamiento
Al utilizar un elemento de bloque, como una capa, un prrafo, el body, etc. el tamao depende del
contenido. Pero cuando el tamao fijo definido es ms pequeo que el contenido. Entonces se
produce un desbordamiento, CSS dispone de una propiedad overflow que para controlar el
desbordamiento.
Podemos darle estos valores:
Visible. Es la opcin por omisin. El contenido sale de elemento, y puede que se solape con los
elementos que haya a continuacin.
Hidden. Lo que no quepa en el elemento, queda oculto.
Auto. Muestra las barras de desplazamiento en el elemento cuando sea necesario.
Scroll. Siempre muestra las barras de desplazamiento.
Capas flotantes
Los elementos se pueden hacer flotar a la derecha o a la izquierda usando la propiedad float.
Es decir, que la caja con su contenido flota bien a la derecha o la izquierda de un documento (o de la
caja contenedora.
Ejemplo:
108
<div style="float: left"; >
<div <div
Style="float: left; <div style="float:
style="float:
>Lunes, 14 de Febrero left;">Lunes, 14 de
left;">Lunes, 14 de
de 2011</div> Febrero de 2011</div>
Febrero de 2011</div>
Lunes, 14 de febrero Lunes, 14 de febrero Lunes,14 de Febrero de

de 2011 de 2011 2011
La propiedad float tambin se puede usar para crear columnas en un documento. Para crear
dichas columnas tendrs que estructurar las columnas deseadas en el cdigo HTML con la etiqueta
<div>
Solapamiento de capas
Al existir la posibilidad del desplazamiento de las capas, es fcil que se solape una sobre otra. Esto
produce que una capa permanezca oculta por que existe una capa encima que no permite su
visualizacin. Para controlar esto, disponemos de la propiedad CSS z-index, a la que podemos
asignar un valor numrico. Un elemento con un z-index-99 mayor se ver por encima de otro con un
z-index-0 menor.
Sintaxis.
<div class="nombre de clase" style="reglas de estilo de la capa">
contenido html
</div>
109
Visibilidad de capas
Con la propiedad visibility puede establecerse la visibilidad de la capa. Existe otra propiedad
display muy similar pero de comportamiento distinto. Puede tomar los valores
visibility: inherit se muestra la capa mientras la capa a la que pertenece tambin

se est mostrando.
visibility:visible muestra la capa, aunque la capa a la que pertenece no se est

viendo
visibility: hidden que hace que la capa sea invisible.
visibility: collapse slo se puede utilizar en las filas, grupos de filas, columnas y
grupos de columnas de una tabla.Si se utiliza el valor collapse sobre cualquier otro tipo de
elemento, su efecto es idntico al valor hidden.
Cuando hacemos invisible una capa mediante visibility: hidden , se puede realizar tambin
la ocultacin mediante display: none.
La siguiente imagen se muestra el comportamiento de hacer invisible con una u otra propiedad.
Capa B visibility:visible
Capa A Capa B Capa C
Capa B visibility:hidden
Capa A Capa C
no se muestra pero sigue ocupando sitio, por
lo que los elementos adyacentes se
comportan como si fuera visible
Capa B display:none
Capa A Capa C
No se muestra, no ocupa sitio, por lo que es
como si no existiera en la pgina y los
elementos adyacentes se ven afectados.
La propiedad visibility es especialmente til para diseo Hmtl dinmico, por la cantidad de
efectos visuales que se puede realizar junto con JavaScript.
clip
Se utiliza clip para establecer qu rea de la capa que podr ser visualizado. Lo que hace es
recortar la capa, haciendo que partes de ella no sean visibles. Ha de especificarse la distancia de los
mrgenes de la capa entre parntesis, despus de la palabra url.
110
El primer valor ha de ser la distancia (se asume que est en pxeles) del margen superior, hasta
la que no se visualizar el contenido de la capa.
El segundo valor ha de ser la distancia del margen izquierdo, hasta la que no se visualizar el
contenido de la capa.
El tercer valor ha de ser la distancia del margen superior, hasta la que se visualizar el contenido
de la capa.
El cuarto valor ha de ser la distancia del margen izquierdo, hasta la que se visualizar el
contenido de la capa.
Tambin es posible incluir auto como valor de alguna de estas distancias, lo que indica que la
distancia se corresponder con los bordes de la capa.
Tabla Resumen propiedades CSS
Propiedad Valores Ejemplos
FUENTES - FONT
valor RGB o nombre de color: #009900;

color
color color: red;
Sirve para indicar el color del texto. Lo admiten casi todas las etiquetas de HTML. No todos
los nombres de colores son admitidos en el estndar, es aconsejable entonces utilizar el valor
RGB.
xx-small | x-small | small |

medium | large | x-large | font-size:1em;
font-size
xx-large font-size: x-large;
Unidades de CSS
Sirve para indicar el tamao de las fuentes de manera ms rgida y con mayor exactitud.
serif | sans-serif | cursive |

fantasy | monospace font-family:arial,helvetica;
font-family
Todas las fuentes font-size: fantasy;
habituales
Con este atributo indicamos la familia de tipografa del texto. Los primeros valores son
genricos, es decir, los exploradores las comprenden y utilizan las fuentes que el usuario
tenga en su sistema.
Tambin se pueden definir con tipografas normales, como ocurra en HTML. Si el nombre de
una fuente tiene espacios se utilizan comillas para que se entienda bien.
111
normal | bold | bolder |

lighter | 100 | 200 | 300 | font-weight:bold;
font-weight
400 | 500 | 600 | 700 | 800 | font-weight: 200;
900
Sirve para definir la anchura de los caracteres, o dicho de otra manera, para poner negrillas
con total libertad.
Normal y 400 son el mismo valor, as como bold y 700.
font-style:normal;
font-style normal | italic | oblique
font-style: italic;
Es el estilo de la fuente, que puede ser normal, itlica u oblicua. El estilo oblique es similar al
itlica.
PRRAFOS - TEXT
line-height: 12px;
line-height normal y unidades CSS
line-height: normal;
El alto de una lnea, y por tanto, el espaciado entre lneas. Es una de esas caractersticas que
no se puede modificar utilizando HTML.
none | [ underline || overline text-decoration: none;

text-decoration
|| line-through ] text-decoration: underline;
Para establecer la decoracin de un texto, es decir, si est subrayado, sobrerayado o tachado.
text-align: right;
text-align left | right | center | justify
text-align: center;
Sirve para indicar la alineacin del texto. Es interesante destacar que las hojas de estilo
permiten el justificado de texto, aunque recuerda que no tiene por qu funcionar en todos los
sistemas.
text-indent: 10px;
text-indent Unidades CSS
text-indent: 2in;
Una propiedad que sirve para hacer sangrado o mrgenes en las pginas. Muy til y
novedosa.
capitalize | uppercase | text-transform: none;

text-transform
lowercase | none text-transform: capitalize;
Nos permite transformar el texto, haciendo que tenga la primera letra en maysculas de todas
112
las palabras, todo en maysculas o minsculas.
FONDO - BACKGROUND
Un color, con su nombre o background-color: green;

background-color
su valor RGB background-color: #000055;
Sirve para indicar el color de fondo de un elemento de la pgina.
El nombre de la imagen con background-image: url(mrmol.gif) ;

background-image su camino relativo o background-image:
absoluto url(http://www.x.com/fondo.gif)
Colocamos con este atributo una imagen de fondo en cualquier elemento de la pgina, se
puede ver una
BOX - CAJA
margin-left: 1cm;
margin-left Unidades CSS
margin-left: 0,5in;
Indicamos con este atributo el tamao del margen a la izquierda
margin-right: 5%;
margin-right Unidades CSS
margin-right: 1in;
Se utiliza para definir el tamao del margen a la derecha
margin-top: 0px;
margin-top Unidades CSS
margin-top: 10px;
Indicamos con este atributo el tamao del margen arriba de la pgina
margin-bottom: 0pt;
margin-bottom Unidades CSS
margin-top: 1px;
Con l se indica el tamao del margen en la parte de abajo de la pgina
padding-left: 0.5in;
padding-left Unidades CSS
padding-left: 1px;
Indica el espacio insertado, por la izquierda, entre el borde del elemento-continente y el

contenido de este. Es parecido a el atributo cellpadding de las tablas.
El espacio insertado tiene el mismo fondo que el fondo del elemento-continente.
padding-right Unidades CSS padding-right: 0.5cm;
113
padding-right: 1pt;
Indica el espacio insertado, en este caso por la derecha, entre el borde del elemento-
continente y el contenido de este. Es parecido a el atributo cellpadding de las tablas.
El espacio insertado tiene el mismo fondo que el fondo del elemento-continente.
padding-top: 10pt;
padding-top Unidades CSS
padding-top: 5px;
Indica el espacio insertado, por arriba, entre el borde del elemento-continente y el contenido
de este.
padding-right: 0.5cm;
padding-bottom Unidades CSS
padding-right: 1pt;
Indica el espacio insertado, en este caso por abajo, entre el borde del elemento-continente y
el contenido de este.
color RGB y nombre de border-color: red;

border-color
color border-color: #ffccff;
Para indicar el color del borde del elemento de la pgina al que se lo aplicamos. Se puede
poner colores por separado con los atributos border-top-color, border-right-color, border-
bottom-color, border-left-color.
none | dotted | solid | double

border-style: solid;
border-style | groove | ridge | inset |
border-style: double;
outset
El estilo del borde, los valores significan: none=ningun borde, dotted=punteado (no parece
funcionar), solid=solido, double=doble borde, y desde groove hasta outset son bordes con
varios efectos 3D.
border-width: 10px;
border-width Unidades CSS
border-width: 0.5in;
El tamao del borde del elemento al que lo aplicamos.

Para ver otros ejemplos de Box
float none | left | right float: right;
Sirve para alinear un elemento a la izquierda o la derecha haciendo que el texto se agrupe
alrededor de dicho elemento. Igual que el atributo align en imgenes en sus valores right y
left.
114
clear none | right | left clear: right;
Si este elemento tiene a su altura imgenes u otros elementos alineados a la derecha o la

izquierda, con el atributo clear hacemos que se coloque en un lugar donde ya no tenga esos
elementos al lado que indiquemos.
Para ver una pgina que utiliza float y clear
115
17.- JavaScript
Las pretensiones de este curso es realizar una corta introduccin para aprender nociones de cmo
funciona Javascript.
JavaScript es un lenguaje de programacin basado en objetos que se utiliza principalmente para crear
pginas web dinmicas, a travs de lenguaje script u orientado a documento.
Una pgina web dinmica es aquella que incorpora efectos como texto que aparece y desaparece,
animaciones, acciones que se activan al pulsar botones, permite variar dinmicamente el contenido del
documento, validar formularios y ventanas con mensajes de aviso al usuario.
Tcnicamente, no se puede desarrollar un programa con JavaScript que se ejecute fuera de un

Navegador, es un lenguaje de programacin interpretado que se embebe en una pgina Web, por lo que
no es necesario compilar los programas para ejecutarlos. En otras palabras, los programas escritos con
JavaScript se pueden probar directamente en cualquier navegador sin necesidad de procesos
intermedios.
A pesar de su nombre, JavaScript no guarda ninguna relacin directa con el lenguaje de programacin
Java.
JavaScript en el mismo documento
Para insertar funciones JavaScript en una pgina web, se utiliza la etiqueta <script> y </script> entre
las etiquetas <head> </head> o dentro del cuerpo <body> </body> de la pgina.
A travs del atributo language hay que especificar el lenguaje de script, que en este caso ser
JavaScript.
<script language="JavaScript" type="text/JavaScript">
Entre las etiquetas <script> y </script> habr que insertar las funciones JavaScript.
Ejemplo:
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Ejemplo de cdigo JavaScript en el propio documento</title>
<script type="text/javascript">
function Muestramensaje() {
alert("Un mensaje de prueba");
}
</script>
</head>
La funcin que hemos insertado es una funcin muy sencilla, que muestra un mensaje de alerta.
Dentro del documento insertramos el siguiente cdigo que sirva de llamada a la funcin al realizar la
accin que la activa.
116
<img src="imagenes/logo_animales.gif" onClick="Muestramensaje">
La funcin Muestramensaje controla el evento de onClick de la etiqueta <img> mostrando el mensaje

cuando pulsemos el ratn sobre la objeto imagen que muestra la pagina, que al ser pulsada llamara a la
funcin.
Podemos utilizar muchos otros eventos para llamar a funciones, como pueden ser onDblClick (al hacer
doble clic), onMouseOver (mientras el cursor este encima) o onMouseOut (cuando el cursor deje de
estar encima).
Este mtodo se emplea cuando se define un bloque pequeo de cdigo o cuando se quieren incluir
instrucciones especficas en un determinado documento HTML que completen las instrucciones y
funciones que se incluyen por defecto en todos los documentos del sitio web.
El principal inconveniente es que si se quiere hacer una modificacin en el bloque de cdigo, es

necesario modificar todas las pginas que incluyen ese mismo bloque de cdigo JavaScript.
JavaScript con archivo externo
Las instrucciones JavaScript se pueden incluir en un archivo de texto normales que ponemos crear con
el block de notas, con extensin .js enlazando mediante la etiqueta <script>. Se pueden crear todos los
archivos JavaScript que sean necesarios y cada pgina Web puede enlazar tantos archivos JavaScript
como necesite.
<script type="text/javascript" src="codigo.js"></script>
Donde src es la ubicacin o url del archivo que se desea enlazar.
Anterior ejemplo seria
Archivo texto codigo.js

}
La pgina seria.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type="text/javascript" src="codigo.js"></script>
</head>
<body>
117
</body>
</html>
JavaScript etiquetas HTML
Este ltimo mtodo es el menos utilizado, ya que consiste en incluir trozos de JavaScript dentro de las
etiquetas HTML de la pgina, mayor inconveniente de este mtodo es que ensucia innecesariamente el
cdigo HTML de la pgina y complica el mantenimiento del cdigo JavaScript
Ejemplo anterior.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
</head>
<body>
<p onclick="alert('Un mensaje de prueba')">Un prrafo de texto.</p>
</body>
</html>
Funciones
En vez de escribir el cdigo JavaScript directamente en el evento que se quiere controlar, nos
resultar ms til definir una funcin.
Una funcin sera como asignar un nombre a un conjunto de instrucciones, al que luego se puede
llamar con ese nombre desde otra parte de la pgina. Estas instrucciones, realizaran una accin, y/o
nos devolver un valor con la palabra reservada return.
Ejemplo:
function devolverValor(){
var x=5;
return x;
// en este function ejemplo devuelve valor 5
}
Por ejemplo, en nuestro ejemplo, vamos a crear las siguientes funciones, que colocamos en una
etiqueta <script> dentro del <head>:
}
Y llamamos a esas funciones desde el evento o accin de la etiqueta. en

<body>
</body>
Sintaxis
118
Las funciones tienen los siguientes elementos.

Function nombreFuncion ( parametro1, parametro2,) {
cdigo Javascript;
cdigo Javascript;
cdigo Javascript;
}
function es una palabra reservada, que indica que a continuacin vamos a definir la funcin.
nombreDeLaFuncin, es el nombre que le queramos dar, sin espacios. Se suele escribir en

minsculas, y el inicio de cada palabra (excepto la primera) en maysculas.
(param1, param2,..., paramn). Entre parntesis ( ), y separados por comas, le podemos pasar a
la funcin tantos parmetros como queramos. Los parmetros son valores que damos a la
funcin para que los utilice. Aunque la funcin no necesite parmetros, siempre pondremos los
parntesis.
Function nombreFuncion (parametro1, parametro2,..)
Entre llaves { }, estn las instrucciones de la funcin, cada una terminada en punto y coma (;).
En cdigo podemos introducir comentarios. Si son de una lnea, basta con escribir // para que
comience el comentario. Si lo queremos ms extenso, podemos utilizar /* para abrir el
comentario y */ para cerrarlo.
Function nombreFuncion (parametro1, parametro2,..){

var nombre=Pedro;
// Comentario
/* Doble comentario de
dos lneas */
}
Variables, son contenedor de informacin que puede contener varios tipos de datos nmeros y
texto (cadenas), Booleanos, array, objetos para ser utilizado a lo largo de la funcin.
Para declarar una variable se utiliza la palabra reservada var.
Es una buena prctica declarar todas las variables que se necesitan, en un solo lugar, al
principio de su cdigo.
Cuando se asigna un valor de texto, hay que poner dobles comillas en torno al valor, al
asignar un valor numrico, no ponga comillas alrededor del valor. Si coloca comillas lo tratara
como un texto.
var pi=3.14;
var nombre="Manolo";
var tama=123;
Cuando se declarara un variable se puede declarar el tipo, se crea un nuevo objeto con la palabra
reservada new.
119
Ejemplo : var nombre = new String;

var nmero= new Number;
var bolea= new Boolean;
var coches= new Array;
var personas= new Object
Propiedades y mtodos
Propiedades son los posibles valores asociados a los objetos.
Mtodos son las acciones que los objetos pueden realizar.
Ejemplo vida real. Objeto Tren
Tren.nombre = AVE;
Tren.peso = 390;
Tren.color = blanco;
Todos los trenes tienen las mismas propiedades pero con valores distintos.
Propiedades nombre, peso, color
Mtodos = frenar (), arranque ().
Todos los trenes tienen estos mtodos, sino que se llevan a cabo en diferentes momentos.
Para saber ms http://www.w3schools.com/js/default.asp
120

Manual Creación Paginas Web - 2

Transféré par

Informations du document

Titre original

Copyright

Formats disponibles

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Droits d'auteur :

Formats disponibles

Manual Creación Paginas Web - 2

Transféré par

Droits d'auteur :

Formats disponibles

Creacin de Pginas Web

CREACIN DE PGINAS WEB

Editores de texto .................................................................................................................................... 8

Editores de HTML .................................................................................................................................. 8

Editores WYSIWYG ............................................................................................................................... 8

Servidores y direcciones URL .......................................................................................................... 10

A que llamamos un sitio web? ....................................................................................................... 11

Alojamiento Web (Web Hosting) ...................................................................................................... 12

Tipos de alojamientos Web .................................................................................................................. 12

2.- Qu es una pgina web? .......................................................................................................... 15

Elementos en un documento HTML................................................................................................. 15

Elementos llenos .................................................................................................................................. 15

Elementos vacos ................................................................................................................................. 16

Elementos con atributos ....................................................................................................................... 16

3.- Estructura HTML .......................................................................................................................... 17

Cabecera de documento HTML ....................................................................................................... 18

Cuerpo de documento HTML ........................................................................................................... 20

Cierre del documento HTML ............................................................................................................ 20

4.- Formato del texto ......................................................................................................................... 20

Apariencia del Texto......................................................................................................................... 20

Estilos de tipo lgico ............................................................................................................................. 20

Tipos de letra ........................................................................................................................................ 21

Tamao de la letra ............................................................................................................................... 22

Etiqueta P (prrafo) .......................................................................................................................... 23

Lnea de Comentarios ...................................................................................................................... 24

Comando quiebre o salto de lnea ................................................................................................... 24

HR (lnea horizontal) ........................................................................................................................ 24

Caracteres Especiales ..................................................................................................................... 25

Otros caracteres ............................................................................................................................... 26

Alineado central de texto y objetos .................................................................................................. 27

5.- Listas ............................................................................................................................................ 28

Listas desordenadas ........................................................................................................................ 29

Listas ordenadas .............................................................................................................................. 29

Listas definicin ................................................................................................................................ 30

Anidamiento de listas ....................................................................................................................... 30

6.- Enlaces o hipervnculo ................................................................................................................. 31

Formato de enlace ........................................................................................................................... 31

Enlaces a otras pginas ................................................................................................................... 32

Referencia absoluta ............................................................................................................................. 32

Referencia relativa al sitio .................................................................................................................... 33

Enlaces dentro de la pgina o locales ............................................................................................. 33

Enlace en un punto de otra pgina .................................................................................................. 34

Enlaces con una direccin de email................................................................................................. 35

Vnculo a ficheros para descarga ..................................................................................................... 35

7.- Imgenes ...................................................................................................................................... 35

Formato GIF. .................................................................................................................................... 36

Formato JPEG .................................................................................................................................. 36

Insertar imgenes ............................................................................................................................. 36

Uso de imgenes como enlaces ...................................................................................................... 39

8.- Tablas ........................................................................................................................................... 39

Bordes de la tabla ............................................................................................................................ 40

Espacio dentro de las celdas. .......................................................................................................... 41

Columna o Celdas ............................................................................................................................ 42

Tamao Columna o Celdas ............................................................................................................. 42

Combinar Celdas o celdas expandidas............................................................................................ 43

Alineacin texto de celdas ............................................................................................................... 43

Anidamiento tablas ........................................................................................................................... 44

9.- Formularios .................................................................................................................................. 44

10.- Elementos de Multimedia ........................................................................................................... 49

Sonido de fondo ............................................................................................................................... 50

Video y Audio ................................................................................................................................... 51

Video Flash ...................................................................................................................................... 52

11.- Gua de Diseo .......................................................................................................................... 54