Diseño y Elaboracion de Paginas Web

Elaboracin y Diseo de Pginas Web
Ing. Reina Liliana Lpez Reyes e Ing. Feliciano Nevrez Raizola
conalep Nuevo Len Ing. Adrin Sada Trevio
Contenido
1. 1.1 Desarrollo de pginas web estticas. ..................................................................................................... 1 Determina la estructura del sitio web con base en las necesidades del usuario detectadas. .................. 1
1.1.1 Elabora la justificacin y la estructura propuesta del sitio web acorde con los requerimientos del cliente .......................................................................................................................................................... 1 1.2 Elabora pginas web estticas haciendo uso del lenguaje de etiquetas XHTML. ........................................ 15 Cabecera de un documento HTML ............................................................................................................... 15 Cuerpo de un Documento HTML. ................................................................................................................. 18 1.3 Construye hojas de estilo en cascada (CSS) de acuerdo con las especificaciones del World Wide Web Consortium (W3C). .............................................................................................................................. 76 2. Desarrollo de pginas web dinmicas. .............................................................................................................. 96 2.1 Implementa interactividad a las pginas web, mediante el desarrollo de cdigo de programacin en un lenguaje script...................................................................................................................................... 96 2.2 Establece el acceso a bases de datos en pginas web mediante el desarrollo de cdigo en un lenguaje de programacin. .................................................................................................................................... 114 Pasos previos I: Instalacin del PWS ......................................................................................................... 114 Conexin a BD ........................................................................................................................................... 116 Ejercicios - Bases de datos 1 ................................................................................................................ 127 Bases de datos 1 - Borrar y crear la base de datos ....................................................................... 127 Comentarios .......................................................................................................................................... 127 Bases de datos 2 - Aadir registros en la tabla ............................................................................... 128 Comentarios .......................................................................................................................................... 128 Bases de datos 3 - Listar los registros en la tabla .......................................................................... 129 Comentarios .......................................................................................................................................... 129 Bases de datos 4 - Borrar individualmente registros en la tabla ................................................. 129 Comentarios .......................................................................................................................................... 129
Bases de datos 5 - Buscar registros en la tabla .............................................................................. 130 Comentarios .......................................................................................................................................... 130 Bases de datos 6 - Modificar registros en la tabla .......................................................................... 131 Comentarios .......................................................................................................................................... 131
1. Desarrollo de pginas web estticas.

1.1 Determina la estructura del sitio web con base en las necesidades del usuario detectadas.
1.1.1 Elabora la justificacin y la estructura propuesta del sitio web acorde con los requerimientos del cliente A. Identificacin de elementos Web. Internet. Internet es un conjunto descentralizado de redes de comunicacin interconectadas que utilizan la familia de protocolos TCP/IP, garantizando que las redes fsicas heterogneas que la componen funcionen como una red lgica nica, de alcance mundial. Sus orgenes se remontan a 1969, cuando se estableci la primera conexin de computadoras, conocida como ARPANET, entre tres universidades en California y una en Utah, Estados Unidos. Uno de los servicios que ms xito ha tenido en Internet ha sido la World Wide Web (WWW, o "la Web"), hasta tal punto que es habitual la confusin entre ambos trminos. La WWW es un conjunto de protocolos que permite, de forma sencilla, la consulta remota de archivos de hipertexto. sta fue un desarrollo posterior (1990) y utiliza Internet como medio de transmisin. Existen, por tanto, muchos otros servicios y protocolos en Internet, aparte de la Web: el envo de correo electrnico (SMTP), la transmisin de archivos (FTP y P2P), las conversaciones en lnea (IRC), la mensajera instantnea y presencia, la transmisin de contenido y comunicacin multimedia -telefona (VoIP), televisin (IPTV)-, los boletines electrnicos (NNTP), el acceso remoto a otros dispositivos (SSH y Telnet) o los juegos en lnea. El gnero de la palabra Internet es ambiguo, segn el Diccionario de la Real Academia Espaola. World Wide Web. En informtica, la World Wide Web, es un sistema de distribucin de informacin basado en hipertexto o hipermedios enlazados y accesibles a travs de Internet. Con un navegador web, un usuario visualiza sitios web compuestos de pginas web que pueden contener texto, imgenes, videos u otros contenidos multimedia, y navega a travs de ellas usando hiperenlaces. La Web fue creada alrededor de 1989 por el ingls Tim Berners-Lee y el belga Robert Cailliau mientras trabajaban en el CERN en Ginebra, Suiza, y publicada en 1992. Desde entonces, Berners-Lee ha jugado un papel activo guiando el desarrollo de estndares Web (como los lenguajes de marcado con los que se crean las pginas web), y en los ltimos aos ha abogado por su visin de una Web Semntica.
Navegadores Web. Un navegador o navegador web (del ingls, web browser) es un programa que permite ver la informacin que contiene una pgina web (ya se encuentre sta alojada en un servidor dentro de la World Wide Web o en un servidor local). El navegador interpreta el cdigo, HTML generalmente, en el que est escrita la pgina web y lo presenta en pantalla permitiendo al usuario interactuar con su contenido y navegar hacia otros lugares de la red mediante enlaces o hipervnculos. La funcionalidad bsica de un navegador web es permitir la visualizacin de documentos de texto, posiblemente con recursos multimedia incrustados. Los documentos pueden estar ubicados en la computadora en donde est el usuario, pero tambin pueden estar en cualquier otro dispositivo que est conectado a la computadora del usuario o a travs de Internet, y que tenga los recursos necesarios para la transmisin de los documentos (un software servidor web). Tales documentos, comnmente denominados pginas web, poseen hipervnculos que enlazan una porcin de texto o una imagen a otro documento, normalmente relacionado con el texto o la imagen. El seguimiento de enlaces de una pgina a otra, ubicada en cualquier computadora conectada a la Internet, se llama navegacin, de donde se origina el nombre navegador (aplicado tanto para el programa como para la persona que lo utiliza, a la cual tambin se le llama cibernauta). Por otro lado, hojeador es una traduccin literal del original en ingls, browser, aunque su uso es minoritario. Ejemplos de navegadores web Existe una lista detallada de navegadores, motores de renderizacin y otros temas asociados en la categora asociada. KHTML Konqueror (basado por defecto en KHTML) Basado en WebKit (fork KHTML) Safari Chromium Google Chrome SRWare Iron Flock (a partir de la versin 3) Epiphany (a partir de la versin 2.28) Midori Arora Internet Explorer y derivados: Avant Browser Maxthon G-Browser
Slim Browser AOL Explorer Mozilla (Gecko) y derivados: Mozilla Firefox Flock Iceweasel Netscape Navigator (a partir de la versin 6) Netstep Navigator GNU IceCat Beonex Navegador web IBM para OS/2 Galeon (Proyecto abandonado) Skipstone K-Meleon para Windows Camino para Mac OS X Amaya del W3C Abrowse Netscape Navigator (hasta la versin 4.xx) Opera iCab OmniWeb Dillo IBrowse AWeb Voyager Espial Escape HotJava IEs4Linux SpaceTime
Navegadores web basados en texto: Links Lynx Netrik w3m
Primeros navegadores (que ya no estn en desarrollo): Cello CyberDog MidasWWW Mosaic
Spyglass Mosaic ViolaWWW OHT-Erwise Protocolo HTTP. Hypertext Transfer Protocol o HTTP (en espaol protocolo de transferencia de hipertexto) es el protocolo usado en cada transaccin de la World Wide Web. HTTP fue desarrollado por el World Wide Web Consortium y la Internet Engineering Task Force, colaboracin que culmin en 1999 con la publicacin de una serie de RFC, el ms importante de ellos es el RFC 2616 que especifica la versin 1.1. HTTP define la sintaxis y la semntica que utilizan los elementos de software de la arquitectura web (clientes, servidores, proxies) para comunicarse. Es un protocolo orientado a transacciones y sigue el esquema peticin-respuesta entre un cliente y un servidor. Al cliente que efecta la peticin (un navegador web o un spider) se lo conoce como "user agent" (agente del usuario). A la informacin transmitida se la llama recurso y se la identifica mediante un localizador uniforme de recursos (URL). Los recursos pueden ser archivos, el resultado de la ejecucin de un programa, una consulta a una base de datos, la traduccin automtica de un documento, etc. HTTP es un protocolo sin estado, es decir, que no guarda ninguna informacin sobre conexiones anteriores. El desarrollo de aplicaciones web necesita frecuentemente mantener estado. Para esto se usan las cookies, que es informacin que un servidor puede almacenar en el sistema cliente. Esto le permite a las aplicaciones web instituir la nocin de "sesin", y tambin permite rastrear usuarios ya que las cookies pueden guardarse en el cliente por tiempo indeterminado. Protocolo FTP. FTP (sigla en ingls de File Transfer Protocol - Protocolo de Transferencia de Archivos) en informtica, es un protocolo de red para la transferencia de archivos entre sistemas conectados a una red TCP (Transmission Control Protocol), basado en la arquitectura cliente-servidor. Desde un equipo cliente se puede conectar a un servidor para descargar archivos desde l o para enviarle archivos, independientemente del sistema operativo utilizado en cada equipo. El Servicio FTP es ofrecido por la capa de Aplicacin del modelo de capas de red TCP/IP al usuario, utilizando normalmente el puerto de red 20 y el 21. Un problema bsico de FTP es que est pensado para ofrecer la mxima velocidad en la conexin, pero no la mxima seguridad, ya que todo el intercambio de informacin, desde el login y password del usuario en el servidor hasta la transferencia de cualquier archivo, se realiza en texto plano sin ningn tipo de cifrado, con lo que un posible atacante puede capturar este trfico, acceder al servidor, o apropiarse de los archivos transferidos. Para solucionar este problema son de gran utilidad aplicaciones como scp y sftp, incluidas en el paquete SSH, que permiten transferir archivos pero cifrando todo el trfico.
W3C. El World Wide Web Consortium, abreviado W3C, es un consorcio internacional que produce recomendaciones para la World Wide Web. Est dirigida por Tim Berners-Lee, el creador original de URL (Uniform Resource Locator, Localizador Uniforme de Recursos), HTTP (HyperText Transfer Protocol, Protocolo de Transferencia de HiperTexto) y HTML (Lenguaje de Marcado de HiperTexto) que son las principales tecnologas sobre las que se basa la Web. Organizacin de la W3C Fue creada el 1 de octubre de 1994 por Tim Berners-Lee en el MIT, actual sede central del consorcio. Unindose posteriormente en abril de 1995 INRIA en Francia, reemplazado por el ERCIM en el 2003 como el husped europeo del consorcio y Universidad de Kei (Shonan Fujisawa Campus) en Japn en septiembre de 1996 como husped asitico. Estos organismos administran el consorcio, el cual est integrado por: Miembros del W3C. A abril de 2010 contaba con 330 miembros (lista completa) Equipo W3C (W3C Team) 65 investigadores y expertos de todo el mundo (Directorio) Oficinas W3C (W3C Offices). Centros regionales establecidos en Alemania y Austria (oficina conjunta), Australia, Benelux (oficina conjunta), China, Corea del Sur, Espaa, Finlandia, Grecia, Hong Kong, Hungra, India, Israel, Italia, Marruecos, Suecia y Reino Unido e Irlanda (oficina conjunta) (Oficinas W3C.) La oficina espaola del W3C, establecida en el 2003, est albergada por la Fundacin CTIC en el Parque Cientfico Tecnolgico de Gijn (Principado de Asturias). CSS. Las hojas de estilo en cascada (en ingls Cascading Style Sheets), CSS es un lenguaje usado para definir la presentacin de un documento estructurado escrito en HTML o XML (y por extensin en XHTML). El W3C (World Wide Web Consortium) es el encargado de formular la especificacin de las hojas de estilo que servirn de estndar para los agentes de usuario o navegadores. La idea que se encuentra detrs del desarrollo de CSS es separar la estructura de un documento de su presentacin. Por ejemplo, el elemento de HTML <h1> indica que un bloque de texto es un encabezamiento y que es ms importante que un bloque etiquetado como <H2>. Versiones ms antiguas de HTML permitan atributos extra dentro de la etiqueta abierta para darle formato (como el color o el tamao de fuente). No obstante, cada etiqueta <H1> deba disponer de la informacin si se deseaba un diseo consistente para una pgina y, adems, una persona que lea esa pgina con un navegador perda totalmente el control sobre la visualizacin del texto. Cuando se utiliza CSS, la etiqueta <H1> no debera proporcionar informacin sobre cmo ser visualizado, solamente marca la estructura del documento. La informacin de estilo, separada en una hoja de estilo,
especfica cmo se ha de mostrar <H1>: color, fuente, alineacin del texto, tamao y otras caractersticas no visuales, como definir el volumen de un sintetizador de voz, por ejemplo. La informacin de estilo puede ser adjuntada como un documento separado o en el mismo documento HTML. En este ltimo caso podran definirse estilos generales en la cabecera del documento o en cada etiqueta particular mediante el atributo "style". Lenguajes del lado del cliente. HTML. HTML, siglas de HyperText Markup Language (Lenguaje de Marcado de Hipertexto), es el lenguaje de marcado predominante para la elaboracin de pginas web. Es usado para describir la estructura y el contenido en forma de texto, as como para complementar el texto con objetos tales como imgenes. HTML se escribe en forma de "etiquetas", rodeadas por corchetes angulares (<,>). HTML tambin puede describir, hasta un cierto punto, la apariencia de un documento, y puede incluir un script (por ejemplo JavaScript), el cual puede afectar el comportamiento de navegadores web y otros procesadores de HTML. HTML tambin es usado para referirse al contenido del tipo de MIME text/html o todava ms ampliamente como un trmino genrico para el HTML, ya sea en forma descendida del XML (como XHTML 1.0 y posteriores) o en forma descendida directamente de SGML (como HTML 4.01 y anteriores). Java Script. JavaScript es un lenguaje de programacin interpretado, dialecto del estndar ECMAScript. Se define como orientado a objetos, basado en prototipos, imperativo, dbilmente tipado y dinmico. Se utiliza principalmente en su forma del lado del cliente (client-side), implementado como parte de un navegador web permitiendo mejoras en la interfaz de usuario y pginas web dinmicas, aunque existe una forma de JavaScript del lado del servidor (Server-side JavaScript o SSJS). Su uso en aplicaciones externas a la web, por ejemplo en documentos PDF, aplicaciones de escritorio (mayoritariamente widgets) es tambin significativo. JavaScript se dise con una sintaxis similar al C, aunque adopta nombres y convenciones del lenguaje de programacin Java. Sin embargo Java y JavaScript no estn relacionados y tienen semnticas y propsitos diferentes. Todos los navegadores modernos interpretan el cdigo JavaScript integrado en las pginas web. Para interactuar con una pgina web se provee al lenguaje JavaScript de una implementacin del Document Object Model (DOM). Tradicionalmente se vena utilizando en pginas web HTML para realizar operaciones y nicamente en el marco de la aplicacin cliente, sin acceso a funciones del servidor. JavaScript se interpreta en el agente de usuario, al mismo tiempo que las sentencias van descargndose junto con el cdigo HTML.
XHTML XHTML, acrnimo en ingls de eXtensible Hypertext Markup Language (lenguaje extensible de marcado de hipertexto), es el lenguaje de marcado pensado para sustituir a HTML como estndar para las pginas web. En su versin 1.0, XHTML es solamente la versin XML de HTML, por lo que tiene, bsicamente, las mismas funcionalidades, pero cumple las especificaciones, ms estrictas, de XML. Su objetivo es avanzar en el proyecto del World Wide Web Consortium de lograr una web semntica, donde la informacin, y la forma de presentarla estn claramente separadas. La versin 1.1 es similar, pero parte a la especificacin en mdulos. En sucesivas versiones la W3C planea romper con los tags clsicos trados de HTML. XML XML, siglas en ingls de eXtensible Markup Language (lenguaje de marcas extensible), es un metalenguaje extensible de etiquetas desarrollado por el World Wide Web Consortium (W3C). Es una simplificacin y adaptacin del SGML y permite definir la gramtica de lenguajes especficos (de la misma manera que HTML es a su vez un lenguaje definido por SGML). Por lo tanto XML no es realmente un lenguaje en particular, sino una manera de definir lenguajes para diferentes necesidades. Algunos de estos lenguajes que usan XML para su definicin son XHTML, SVG, MathML. XML no ha nacido slo para su aplicacin en Internet, sino que se propone como un estndar para el intercambio de informacin estructurada entre diferentes plataformas. Se puede usar en bases de datos, editores de texto, hojas de clculo y casi cualquier cosa imaginable. XML es una tecnologa sencilla que tiene a su alrededor otras que la complementan y la hacen mucho ms grande y con unas posibilidades mucho mayores. Tiene un papel muy importante en la actualidad ya que permite la compatibilidad entre sistemas para compartir la informacin de una manera segura, fiable y fcil. Lenguajes del lado del servidor.1 CGI Es el sistema ms antiguo que existe para la programacin de las pginas dinmicas de servidor. Actualmente se encuentra un poco desfasado por diversas razones entre las que destaca la dificultad con la que se desarrollan los programas y la pesada carga que supone para el servidor que los ejecuta. Los CGI se escriben habitualmente en el lenguaje Perl, sin embargo, otros lenguajes como C, C++ o Visual Basic pueden ser tambin empleados para construirlos. PERL Perl es un lenguaje de programacin interpretado, al igual que muchos otros lenguajes de Internet como JavaScript o ASP. Esto quiere decir que el cdigo de los scripts en Perl no se compila sino que cada vez que se
1
http://www.adelat.org/media/docum/nuke_publico/lenguajes_del_lado_servidor_o_cliente.html
quiere ejecutar se lee el cdigo y se pone en marcha interpretando lo que hay escrito. Adems es extensible a partir de otros lenguajes, ya que desde Perl podremos hacer llamadas a subprogramas escritos en otros lenguajes. Tambin desde otros lenguajes podremos ejecutar cdigo Perl. ASP ASP (Active Server Pages) es la tecnologa desarrollada por Microsoft para la creacin de pginas dinmicas del servidor. ASP se escribe en la misma pgina web, utilizando el lenguaje Visual Basic Script o Jscript (JavaScript de Microsoft). PHP PHP es el acrnimo de Hipertext Preprocesor. Es un lenguaje de programacin del lado del servidor gratuito e independiente de plataforma, rpido, con una gran librera de funciones y mucha documentacin. JSP JSP es un acrnimo de Java Server Pages, que en castellano vendra a decir algo como Pginas de Servidor Java. Es, pues, una tecnologa orientada a crear pginas web con programacin en Java. Con JSP podemos crear aplicaciones web que se ejecuten en variados servidores web, de mltiples plataformas, ya que Java es en esencia un lenguaje multiplataforma. Por tanto, las JSP podremos escribirlas con nuestro editor HTML/XML habitual. B. Comprobacin de uso de estndares en el cdigo de programacin. Validacin de HTML. Es un sistema basado en Internet y presentado en el propio sitio del W3C 2 y que permite detectar errores en la forma de utilizar el lenguaje HTML y XML en la construccin de un Sitio Web. Lo interesante del programa es que muestra en detalle los errores del cdigo en la pgina que se pruebe, con lo cual se puede llegar a una directa correccin de los problemas que se hayan detectado. La importancia de tener un cdigo correctamente validado es que se asegura, a partir de esa certificacin, que la pgina web puede ser vista sin problemas, desde cualquier programa visualizador que cumpla con los estndares internacionales en la materia. Validacin de CSS. El servicio de Validacin de CSS del W3C es un software libre creado por el W3C para ayudar a los diseadores y desarrolladores web a validar Hojas de Estilo en Cascada (CSS). Puede utilizarse mediante este servicio gratuito en la web, o puede descargarse y ser usado bien como un programa java, o como un servlet java en un servidor Web.
http://validator.w3.org/
Si eres un desarrollador Web o un diseador Web, esta herramienta ser un aliado inestimable. No slo comparar tus hojas de estilo con las especificaciones CSS, ayudndote a encontrar errores comunes, errores tipogrficos, o usos incorrectos de CSS, tambin te dir cuando tu CSS presenta algn riesgo en cuanto a usabilidad. La mayor parte de los documentos de la Web estn escritos en un lenguaje informtico llamado HTML. Este lenguaje puede utilizarse para crear pginas con informacin estructurada, enlaces, y objetos multimedia. Para colores, texto y posicionamiento HTML utiliza un lenguaje de estilo llamado CSS, acrnimo de "Cascading Style Sheets" (Hojas de Estilo en Cascada). Lo que hace esta herramienta es ayudar a las personas que escriben CSS a comprobar, y corregir si es necesario, sus Hojas de Estilo en Cascada. El W3C mantiene y aloja la herramienta, gracias al trabajo y contribuciones del personal del W3C, desarrolladores y traductores voluntarios.
Ejercicio nm. 1: Definicin del Sitio Web. Tomando como punto de partida el estudio de campo realizado, se requiere obtener una propuesta de la estructura del sitio web, para lo cual: Describe los datos generales del negocio, empresa u organizacin: Nombre. Direccin. Ciudad. Giro de la empresa. Describe los objetivos del sitio. Refleja en una lista el conjunto de objetivos especficos, medibles, alcanzables, realistas, acotados en el tiempo que se deben conseguir para lograr el objetivo global perseguido. Objetivo1 Objetivo2 Objetivo3... Describe la audiencia del sitio mediante: Entrevista a funcionarios que atienden al pblico. EJEMPLO: A que vino a la institucin? Tiene acceso a Internet? Propio o a travs de Cibercafs? Qu tipo de informacin Internet le habra evitado este viaje? Qu le gustara ver en el sitio de Internet de esta Institucin? - Entrevista al equipo de desarrollo. EJEMPLO: Preguntas al equipo de desarrollo Cules son las audiencias previstas? Por qu la gente vendr a su sitio? - Estudio de escenarios de uso que permitan determinar situaciones de uso reales en el sitio web EJEMPLO: Si nuestro sitio Web, se refiere a cotizaciones, se puede aplicar el caso de Juan Prez, agricultor de Maz, quiere saber qu puede hacer para pagar los impuestos por su comunidad. Existe en el sitio una respuesta para l? Si llegara al sitio y viera la portada que se ha diseado, encontrara la respuesta a su pregunta? Definicin de Contenidos. Emplea como mnimo: Ejemplo: Acerca de la Institucin: entregar la informacin completa referida a Autoridades, Organigrama, Normativa legal asociada, Oficinas, Horas de Atencin, Telfonos, etc. Productos / Servicios: destacar las actividades principales que el usuario puede hacer en la institucin; puede incluir una gua de trmites que facilite las acciones de las personas que acudirn a la institucin
10
y que considere servicios interactivos para hacerlos desde el Sitio Web. Novedades de la Institucin: ltimas actividades, noticias, etc. Agrupa y etiqueta el contenido en conjuntos coherentes y les asigna nombres que los identifique. Identifica los requerimientos funcionales. Ejemplo: Formulario de Contacto para envo de mensajes electrnicos. Sistema de envo de noticia por mail a un amigo. Mapa del sitio. Etc. Anlisis de Sitios Similares. Define y describe la Estructura del sitio. Mapas del sitio. Ejemplo de rbol Organizacional:
11
Ejemplo de rbol Funcional:
Describe cada uno de los elementos que integraran los Sistemas de Navegacin del sitio web. Ejemplo: Men General: siempre presente en todo el sitio, permite el acceso a cada una de las reas del sitio. Pi de Pgina: usualmente ubicado en la parte inferior de cada pgina, indica el nombre de la institucin, telfonos, direccin fsica y de correo electrnico. Barra Corporativa: ofrece diversas opciones de informacin respecto del sitio y tal como el anterior, se muestra en todas las pginas. Etc., Etc.
12
Disea la Estructura de las pginas. EJEMPLO:
13
Genera Bocetos de Diseo. Ejemplo:
14
1.2 Elabora pginas web estticas haciendo uso del lenguaje de etiquetas XHTML.
Cabecera de un documento HTML Estructura de una pgina A lo largo de este tema vamos a aprender a crear una pgina bsica. La estructura bsica de una pgina es:
<html> <head> ... </head> <body> ... </body> </html>
Ahora veamos cmo funcionan estas etiquetas. Identificador del tipo de documento <html> Todas las pginas WEB escritas en HTML tienen que tener la extensin html o htm. Al mismo tiempo, tienen que tener las etiquetas <html> y </html>. Entre las etiquetas <html> y </html> estar comprendido el resto del cdigo HTML de la pgina. Por ejemplo:
<html> ... </html>
Cabecera de la pgina <head> La cabecera de la pgina se utiliza para agrupar informacin sobre ella, como puede ser el ttulo. Est formada por las etiquetas <head> y </head>. La etiqueta <head> va justo debajo de la etiqueta <html>. Por ejemplo:
<html> <head> ... </head> ... </html>
15
Entre las etiquetas <head> y </head>, las etiquetas que podemos encontrar y ms se utilizan son: <link>, <style>, <script> (estas etiquetas las veremos ms adelante), <meta> y la etiqueta <title> que te explicamos a continuacin. - La etiqueta <meta> La etiqueta <meta> se utiliza para aadir informacin sobre la pgina. Esta informacin puede ser utilizada por los buscadores. Los buscadores consultan la informacin de la etiqueta <meta> de las pginas, buscando coincidencias con lo que el usuario pretende encontrar. A travs de esta etiqueta pueden especificarse los atributos name y content. El atributo name indica el tipo de informacin, y el atributo content indica el valor de dicha informacin. Para indicar el tipo de informacin podemos utilizar cualquier palabra que deseemos, como puede ser "Autor", "Palabras clave", "Descripcin", etc. Pero debido a que la mayora de buscadores estn en ingls, es preferible que el tipo de informacin se especifique en ingls. Los tipos de informacin ms utilizados son los siguientes: Tipo
Author classification Description Generador Keywords
Significado Autor de la pgina Palabras para clasificar la pgina en los buscadores Descripcin del contenido de la pgina Programa utilizado para crear la pgina Palabras clave
La etiqueta <meta> no necesita etiqueta de cierre. Para cada etiqueta <meta> solo es posible indicar un tipo de informacin y su valor, pero es posible insertar varias etiquetas <meta> en un mismo documento. La etiqueta <meta> ha de estar entre las etiquetas <head> y </head>. Por ejemplo, el siguiente cdigo indica que el autor de la pgina es conalep, que la pgina trata sobre un Colegio de Educacin Profesional Tecnolgica, y especifica algunas palabras clave a ser consultadas por los buscadores:
<html> <head> ... <meta name="author" content="coanlep"> <meta name="description" content=" Colegio de Educacin Profesional Tecnolgica ">
16
<meta name="keywords" content="conalep colegio tecnolgica"> </head> ...
La etiqueta <meta> tambin se utiliza para indicarle al navegador alguna informacin o alguna accin que debe realizar. En este caso se utiliza el atributo http-equiv, en lugar del atributo name. Por ejemplo, imaginemos que por algn motivo queremos que nuestra pgina se actualice automticamente cada 30 segundos. En ese caso, deberamos utilizar la accin Refresh (actualizar). Podramos utilizar el siguiente cdigo:
<html> <head> ... <meta http-equiv="Refresh" content="30"> </head> ...
Ahora imaginemos que hemos cambiado la direccin en la que se encuentra nuestra pgina WEB, y queremos que cuando algn usuario visite la pgina en la direccin antigua, a los 5 segundos el navegador lo redirija automticamente a la direccin nueva. En ese caso podramos insertar el siguiente cdigo en la pgina que se encuentra en la direccin antigua:
<html> <head> ... <meta http-equiv="Refresh" content="5; URL=http://www.conalepnl.edu.mx/"> </head> ...
De este modo, el navegador realizara la funcin de actualizar la pgina, pero cargando la que se encontrara en la nueva direccin (URL=http://www.conalepnl.edu.mx/). Ttulo de la pgina <title> El ttulo de la pgina es el que aparecer en la parte superior de la ventana del navegador, cuando la pgina est cargada en l. Para asignar un ttulo a una pgina es necesario escribir el texto deseado entre las etiquetas <title> y </title>. Estas etiquetas han de estar dentro de la cabecera, es decir, entre las etiquetas <head> y </head>.
Por ejemplo: <html> <head> <title> Curso de HTML </title> </head> ... </html>
17
Cuerpo de un Documento HTML. Cuerpo del documento <body> El cuerpo del documento contiene la informacin propia del documento, es decir lo deseamos que se visualice, el texto de la pgina, las imgenes, los formularios, etc. Todos estos elementos tienen que encontrarse entre las etiquetas <body> y </body>, que van justo debajo de la cabecera. Por ejemplo:
<html> <head> <title> Curso de HTML </title> </head> <body> ... </body> </html>
A travs de la etiqueta <body> es posible establecer el color o la imagen de fondo de la pgina. El color de fondo puede establecerse a travs del atributo bgcolor, al que es posible asignarle un color representado en hexadecimal o por un nombre predefinido. Por ejemplo, para hacer que el color de fondo de una pgina sea de color azul, tendremos que escribir:
<html> ... <body bgcolor="#0000FF"> ... </body> </html>
Sera equivalente a poner:

<html> ... <body bgcolor="blue"> ... </body> </html>
La imagen de fondo puede establecerse a travs del atributo background, indicando la ruta en la que se encuentra la imagen. Por ejemplo, para hacer que la imagen de fondo de una pgina sea la imagen fondo.gif, que se encuentra en el mismo directorio en el que se encuentra guardada la pgina, tendremos que escribir:
18
<html> ... <body background="fondo.gif"> ... </body> </html>
En el caso de que la imagen no se encuentre en el mismo directorio que la pgina, y se encuentre dentro de la carpeta imgenes, que s se encuentra en el mismo directorio que la pgina, tendremos que escribir:
<html> ... <body background="imagenes/fondo.gif"> ... </body> </html>
A travs de la etiqueta <body> tambin es posible establecer el color del texto de la pgina a travs del atributo text. Por ejemplo, para hacer que el color del texto de una pgina sea de color rojo, tendremos que escribir:
<html> ... <body text="#FF0000"> ... </body> </html>
Entre el borde de la ventana y el contenido de la pgina existe un margen, cuyo tamao en pxeles puede modificarse mediante los atributos leftmargin (margen izquierdo) y topmargin (margen superior). Estos atributos no funcionan para el navegador Netscape, pero s los atributos marginwidth (anchura del margen) y marginheight (altura del margen). Estos atributos suelen utilizarse para eliminar el margen, para lo cual deben valer cero. Por ejemplo, para hacer que una pgina no tenga margen superior, y tenga un margen izquierdo de 20 pxeles, tendremos que escribir:
<html> ... <body leftmargin="20" topmargin="0" marginwidth="20" marginheight="0" > ... </body> </html>
Comentarios En ocasiones podemos desear aadir comentarios aclaratorios dentro del cdigo, de manera que no sean visualizados en el navegador, pero s a la hora de editar el documento. Para insertar comentarios dentro del cdigo, basta con insertar el texto entre .
19
Todo el cdigo que se inserte entre estos smbolos no ser visualizado en los navegadores. Por ejemplo, para insertar el texto siguiente con un comentario: Bienvenidos, esta es mi 1 pgina! Habra que escribir:
 ¡Bienvenidos, esta es mi 1ª página!
Tamao y tipo de letra. - Formatear el texto <font> Las propiedades del texto pueden modificarse a travs de la etiqueta <font>. Para ello, podemos insertar el texto entre las etiquetas <font> y </font>, especificando algunos de los atributos de la etiqueta: Atributo
face color Size
Significado fuente color del texto tamao del texto
Posibles valores nombre de la fuente, o fuentes nmero hexadecimal o texto predefinido valores del 1 al 7, siendo por defecto el 3, o desplazamiento respecto al tamao por defecto, aadiendo + o - delante del valor
Por ejemplo, para insertar el texto:
Bienvenidos a www.conalep.edu.mx
Habra que escribir:
<font color="#993366" size="4" face="Comic Sans MS, Arial, MS Sans Serif"> Bienvenidos a www.conalep.edu.mx </font>
Tambin es posible definir una fuente para todo el documento. Para ello, hay que insertar la etiqueta <basefont> despus de la etiqueta <body>. La etiqueta <basefont> no necesita una etiqueta de cierre, y permite modificar los mismos atributos del texto que la etiqueta <font>. Por ejemplo:
20
<body> <basefont color="#006699" size="4" face="Arial"> ...
Este cdigo hara que la fuente del documento fuera por defecto de color azul, de tamao 4 y Arial. Si despus de indicar la etiqueta <basefont> o <font>, el navegador encuentra otra etiqueta <font>, la que prevalece es siempre la ltima que se encuentra. - Resaltado del texto <b> Existen una serie de etiquetas que permiten aplicar diferentes estilos al texto que se encuentra entre ellas, y generalmente se utilizan para resaltarlo. Estos estilos pueden agruparse segn vayan asociados al tipo de letra o a la informacin que represente el texto. No hay que olvidar que todas estas etiquetas necesitan una etiqueta de cierre, y que pueden aplicarse varias etiquetas al mismo texto. A continuacin se muestran algunas etiquetas asociadas al tipo de letra: Etiqueta
<b> <i> <u> <s> <tt> <big> <small>
Significado negrita cursiva subrayado tachado teletipo (mquina de escribir) aumenta el tamao de la fuente disminuye el tamao de la fuente
Ejemplo
conalep Monterrey III conalep Monterrey III conalep Monterrey III conalep Monterrey III conalep Monterrey III
conalep Monterrey III

A continuacin se muestran algunas etiquetas asociadas al tipo de informacin: Etiqueta

<cite> <code> <dfn> <del> <em>
Significado cita ejemplo de cdigo definicin eliminado nfasis
Ejemplo
conalep Monterrey III conalep Monterrey III conalep Monterrey III conalep Monterrey III conalep Monterrey III
21
<ins> <kbd> <samp> <strong> <sub> <sup> <var>
insertado teclado muestra destacado subndice superndice variable
conalep Monterrey III conalep Monterrey III conalep Monterrey III

conalep Monterrey III conalep Monterrey III conalep Monterrey III
Las etiquetas ms utilizadas son las asociadas al tipo de letra, ya que son ms fciles de recordar, y en muchos casos los resultados son los mismos que los de aplicar una etiqueta diferente. Por ejemplo, el resultado de aplicar las etiquetas <b> y <strong> es el mismo. Incluso a veces algunos estilos asociados al tipo de informacin pueden representarse de forma distinta segn el navegador. Por ejemplo, para insertar el texto:
Bienvenidos a
Habra que escribir:
www.conalep.edu.mx
<font color="#993366" size="4" face="Comic Sans MS, Arial, MS Sans Serif"> Bienvenidos a <b> <u> <tt> www.conalep.edu.mx </tt> </u> </b> </font>
Prrafos <p> El texto de una pgina puede agruparse en prrafos. Para ello, el texto de cada uno de los prrafos debe insertarse entre las etiquetas <p> y </p>. No es necesario insertar la etiqueta <br> para que un nuevo prrafo aparezca debajo del anterior, ya que las etiquetas <p> y </p> hacen que se cambie de lnea automticamente. Tambin es posible cambiar la alineacin del texto de cada prrafo. Para ello se modifica el valor del atributo align, cuyos valores pueden ser left (izquierda), right (derecha), center (centrado) o justify (justificado).
22
Por ejemplo, para insertar el texto: Bienvenidos a mi pgina. Aqu encontraris cursos de formacin muy interesantes. Habra que escribir:
<p align="center"> Bienvenidos a mi p&aacutegina. </p> <p> Aqu&iacute encontrar&eacuteis cursos de formaci&oacuten muy interesantes. </p>
Otra forma de cambiar la alineacin del texto es mediante las etiquetas <div> y </div>, para las que tambin existe el atributo align. La etiqueta <div>, al igual que la etiqueta <p>, se utiliza para agrupar bloques de texto, pero con la diferencia de que la separacin entre ellos es menor. Por ejemplo, para insertar el texto: Bienvenidos a mi pgina. Aqu encontraris cursos de formacin muy interesantes. Habra que escribir:
<div align="center"> Bienvenidos a mi p&aacutegina. </div> <div> Aqu&iacute encontrar&eacuteis cursos de formaci&oacuten muy interesantes. </div>
Tambin es posible insertar el texto entre las etiquetas <center> y </center> para que aparezca centrado. Por ejemplo, para insertar el texto: Bienvenidos a mi pgina. Habra que escribir:
<center> Bienvenidos a mi p&aacutegina. </center>
Otro par de etiquetas que permiten agrupar bloques de texto, pero que no implican el cambio de lnea (como en el caso de <p> y <div>), son las etiquetas <span> y </span> volveremos a hablar de estas etiquetas cuando veamos las hojas de estilo.
23
- Salto de Lneas. En general, cuando trabajamos con un editor de texto se produce un salto de lnea al pulsar la tecla Enter . Si pulsamos Enter en un documento HTML, el salto de lnea se producir en el cdigo, pero no se mostrar en el navegador. Para que se produzca el salto de lnea en el navegador, en lugar de pulsar la tecla Enter hay que insertar la etiqueta <br> donde se desee que se produzca el salto. La etiqueta <br> no precisa ninguna etiqueta de cierre. No hay que insertar la etiqueta </br> despus de ella, ya que dicha etiqueta no existe. Por ejemplo, para insertar el texto: Queridos tengo el placer de comunicaros que hay una nueva seccin. Habra que escribir:
Queridos usuarios,<br>tengo el placer de comunicaros que hay una nueva secci&oacuten.
usuarios,
- Sangrado de texto <blockquote> La sangra es una especie de margen que se establece a ambos lados del texto. Para que un texto aparezca sangrado, se inserta entre las etiquetas <blockquote> y </blockquote>. Esta etiqueta en un principio se defini para delimitar citas pero que como la mayora de los navegadores resuelven la cita incluyendo un sangrado del texto, su uso para sangrar texto se ha generalizado. El uso de la etiqueta <blockquote> obliga a que el texto aparezca en una nueva lnea. Insertando el texto entre varias etiquetas <blockquote> y </blockquote> se consigue que los mrgenes sean mayores. Por ejemplo, para insertar el texto: Queridos tengo el placer de comunicaros que hay una nueva seccin. Habra que escribir: Queridos usuarios, <blockquote> <blockquote> usuarios,
24
tengo el placer de comunicaros que hay una nueva secci&oacuten. </blockquote> </blockquote> - Separadores <hr> El elemento que suele utilizarse para separar secciones dentro de una misma pgina es la regla horizontal. Para insertar una regla horizontal hay que insertar la etiqueta <hr>. Dicha etiqueta no precisa ninguna etiqueta de cierre. Es posible especificar algunos atributos de la regla horizontal: Atributo
align
Significado alineacin de la regla dentro de la pgina

left right
Posibles valores (izquierda) (derecha)
center (centro) width
ancho de la regla
un nmero, acompaado de % cuando se desee que sea en porcentaje un nmero no puede tomar valores
size noshade
alto de la regla eliminar el sombreado de la regla
Por ejemplo, para insertar el texto y la regla horizontal siguientes: Inicio Bienvenidos a mi pgina. Habra que escribir:
Inicio<hr align="left" width="300%" size="5" noshade>Bienvenidos a mi página.
- Encabezados <h1> Existen una serie de encabezados que suelen utilizarse para establecer ttulos dentro de una pgina. La diferencia entre los distintos tipos de encabezado es el tamao de la letra, el tipo de resaltado, y la separacin existente entre el texto y los elementos que tiene encima y debajo de l. Hay que tener en cuenta que el navegador del usuario es el que aplicar el estilo del encabezado por lo que el mismo ttulo se puede visualizar de forma diferente segn el navegador. Existen seis etiquetas que representan seis tipos de cabeceras distintas. Todas estas etiquetas precisan una etiqueta de cierre.
25
A continuacin se muestran los distintos encabezados existentes: Etiqueta

<H1> <H2> <H3> <H4> <H5> <H6>
Ejemplo
Ttulo 1: HTML
Ttulo 2: HTML
Ttulo 3: HTML Ttulo 4: HTML
Ttulo 5: HTML
Ttulo 6: HTML
Para todas estas etiquetas es posible especificar el valor del atributo align. Por ejemplo, para insertar el texto:
El lenguaje HTML
Apartado 1: Las etiquetas Habra que escribir:
<H2 align="center"> El lenguaje HTML </H2> <H4> Apartado 1: Las etiquetas </H4>
- Marquesinas <marquee> Las marquesinas son lneas de texto que pueden desplazarse de un lado a otro de la ventana en forma de lnea. Para insertar una marquesina, es necesario insertar el texto entre las etiquetas <marquee> y </marquee>. La marquesina, por defecto, se desplaza de derecha a izquierda indefinidamente, pero si lo deseas puedes hacer que estas propiedades varen. A travs del atributo behavior puede modificarse el tipo de movimiento. Puede tomar los valores alternate (de lado a lado de la ventana, como si rebotara en los extremos), scroll (de un lado a otro, continuamente) o slide (de un lado a otro, pero una sola vez).
26
A travs del atributo direction puede modificarse la direccin en la que se mover el texto. Puede tomar los valores down (de arriba a abajo), up (de abajo a arriba), left (de derecha a izquierda) o left (de izquierda a derecha). Tambin es posible establecer un color de fondo, a travs del atributo bgcolor. Por ejemplo, para insertar la siguiente marquesina: Esto es una marquesina Habra que escribir: <marquee bgcolor="#006699" behavior="alternate" direction="right"> <b> <font color="#FFFFCC" size="5"> Esto es una marquesina </font> </b> </marquee> Tambin es posible insertar imgenes, tablas y otros elementos entre las etiquetas <marquee> y </marquee>, no solamente texto. Texto preformateado <pre> Una forma de asegurarnos de que el texto aparezca en el navegador tal cual ha sido insertado dentro del cdigo, es utilizando las etiquetas <pre> y </pre>. Utilizando estas etiquetas podemos tener la seguridad de que en el navegador se mostrarn todos los espacios en blanco que se inserten en el texto, as como todos los saltos de lnea resultantes de pulsar la tecla Enter , sin la necesidad de utilizar la etiqueta <br>. Por ejemplo, para insertar el texto:
Hola, BIENVENIDOS esta ES MI PGINA WEB y esto un texto preformateado
Habra que escribir:

<pre> Hola, BIENVENIDOS esta ES MI PGINA WEB y esto un texto preformateado </pre>
27
El inconveniente de esta etiqueta es que entre las etiquetas <pre> y </pre> no se pueden incluir las etiquetas <img> (para incluir imgenes), <object> (para incluir objetos como animaciones), <big>, <small>, <sub> ni <sup> (las veremos en este tema). Listas - Elemento de lista <li> Cada uno de los elementos de una lista ha de insertarse entre las etiquetas <li> y </li>. Por ejemplo, para insertar en una lista los siguientes elementos: Perro Gato Periquito Habra que escribir:
... <li>Perro</li> <li>Gato</li> <li>Periquito</li> ...
Todos los elementos de la lista debern encontrarse entre las etiquetas que indiquen si la lista es desordenada (con vietas) u ordenada (numerada) como veremos a continuacin. - Lista desordenada <ul> Para que una lista sea desordenada, sus elementos debern encontrarse entre las etiquetas <ul> y </ul>. A travs del atributo type es posible elegir el tipo de vieta, que puede ser circle (crculo), disc (disco) o square (cuadrado). Por ejemplo, para insertar la siguiente lista: o o o Perro Gato Periquito
Habra que escribir:

<ul type="circle"> <li>Perro</li> <li>Gato</li> <li>Periquito</li> </ul>
28
Listas enumeradas Las listas enumeradas u ordenadas se usarn para agrupar informacin en un orden especfico. Si el ordenador parece que no funciona: 1. 2. 3. 4. Est conectado a la corriente? Est el interruptor a ON? Est la pantalla encendida? Est la lnea de alimentacin cada?
Para hacer una lista enumerada, se deber especificar con la directiva <OL>...</OL>. Cada elemento de la lista estar contenida entre <LI>...</LI>:
<OL> <LI>Est <LI>Est <LI>Est <LI>Est </OL> conectado a la corriente?</LI> el interruptor a ON?</LI> la pantalla encendida?</LI> la lnea de alimentacin cada?</LI>
- Lista ordenada <ol> Para que una lista sea ordenada, sus elementos debern encontrarse entre las etiquetas <ol> y </ol>. A travs del atributo type es posible elegir el tipo de numeracin, que puede ser 1 (nmeros), a (letras minsculas), A (letras maysculas), i (nmeros romanos en minsculas) o I (nmeros romanos en maysculas). Por ejemplo, para insertar la siguiente lista: i. ii. iii. Perro Gato Periquito
Habra que escribir:

<ol type="i"> <li>Perro</li> <li>Gato</li> <li>Periquito</li> </ol>
Listas de definiciones Las listas de de definiciones se usan para formatear un conjunto de palabras con sus correspondientes descripciones.
<B> Negrita (bold).
29
<I> Cursiva (italic).
Para formatear una lista de descripciones se usarn las directivas <DL>...</DL>. Cada elemento debe especificarse entre <DT>...</DT>. Cada definicin debe especificarse entre <DD>...</DD>.
<DL> <DT><B></DT> <DD>Negrita (bold).</DD> <DT><I></DT> <DD>Cursiva (italic).</DD> </DL>
- Anidar listas Es posible anidar listas dentro de otras. Estas listas pueden ser tanto desordenadas como ordenadas. Por ejemplo, para insertar la siguiente lista: 1. Lunes Ingles Francs 2. Martes 1. Ingles A. Correccin de ejercicios B. Proponer ejercicios Habra que escribir:
<ol> <li>Lunes <ul type="square"> <li>Ingles</li> <li>Frances</li> </ul> </li> <li>Martes <ol> <li>Ingles</li> <ol type="A"> <li>Correccion de ejercicios</li> <li>Proponer ejercicios </li> </ol> </li> </ol> </li> </ol>
Empezamos por la lista ordenada (la ms externa) <ol>, esta lista tiene dos elementos <li>Lunes y <li>Martes. El elemento Lunes contiene una lista desordenada con tipo cuadrado <ul type="square"> que tiene dos elementos <li>Ingles</li> y <li>Frances</li>.
30
El elemento Martes contiene una lista ordenada de un slo elemento <li>Ingles</li> elemento que contiene a su vez una lista desordenada de tipo letras maysculas <ol type="A"> con los dos elementos <li>Correccion de ejercicios</li> y <li>Proponer ejercicios </li> Caracteres Especiales Los caracteres < y > son dos caracteres especiales que indican inicio y fin de etiqueta. Si se desea insertar estos caracteres como texto hay que escribir el nombre que los representa: Se representa con < Se representa con > Existen otra serie de caracteres que no se visualizan correctamente en algunos navegadores, como es el caso de la y las letras acentuadas, por lo que al igual que ocurre con los caracteres especiales < y >, para insertarlos como texto habra que escribir el nombre que los representa. A continuacin se muestra una lista con algunos caracteres y el nombre con el que han de ser representados: Carcter
< >
Representacin
< > á Á é É í Í ó Ó ú Ú ñ Ñ
Carcter
& "
Representacin
€ ç Ç ü Ü & ¿ ¡ " · º ª ¬ ©
31

®
Siempre que se inserta texto en HTML hay que tener en cuenta que si se escriben varios espacios en blanco seguidos solamente se mostrar uno en el navegador. Para conseguir que se muestren varios espacios en blanco seguidos puede sustituirse cada uno de ellos por . Por ejemplo, para insertar el texto:
Bienvenidos, esta es mi 1 pgina!
Habra que escribir:

¡Bienvenidos, esta es mi 1ª página !
Tablas En este tema vamos a ver cmo trabajar con tablas. Podremos insertar tablas, filas y columnas, y modificar sus propiedades. Hoy en da, la mayora de las pginas WEB se basan en tablas, ya que resultan de gran utilidad al mejorar notablemente las opciones de diseo. Todos los objetos se alinean por defecto a la izquierda de las pginas WEB, pero gracias a las tablas es posible distribuir el texto en columnas, colocar imgenes al lado de un bloque de texto, y otra serie de cosas que sin las tablas seran imposibles de realizarse. - Tabla <table> Las tablas estn formadas por celdas, que son los recuadros que se obtienen como resultado de la interseccin entre una fila y una columna. Para crear una tabla hay que insertar las etiquetas <table> y </table>. Entre dichas etiquetas habr que especificar las filas y columnas que formarn la tabla.
COLUMNA imagen y texto Texto dentro de una celda
FILA
CELDA
32
- Fila <tr> Es necesario insertar las etiquetas <tr> y </tr> por cada una de las filas de la tabla. Estas etiquetas debern insertarse entre las etiquetas <table> y </table>. Por ejemplo, para crear una tabla con cinco filas escribiramos:
<table> <tr>...</tr> <tr>...</tr> <tr>...</tr> <tr>...</tr> <tr>...</tr> </table>
- Columna o celda <td> Para crear una tabla no basta con especificar el nmero de filas, es necesario tambin especificar el nmero de columnas. Una celda es el resultado de la interseccin entre una fila y una columna, por lo que podremos especificar el nmero de celdas por fila, que equivale a especificar el nmero de columnas por 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. Por ejemplo, para insertar la siguiente tabla:
Sabado Curso HTML Domingo Curso Dreamweaver
Curso Frontpage Curso Flash
Habra que escribir:

<table border="1"> <tr> <td>Sabado</td> <td>Domingo</td> </tr> <tr> <td>Curso HTML</td> <td>Curso Dreamweaver</td> </tr> <tr> <td>Curso Frontpage</td> <td>Curso Flash</td> </tr> </table>
33
- Formato de la tabla Es posible modificar los siguientes atributos de una tabla: Atributo
width
Significado ancho de la tabla
Posibles valores un nmero, acompaado de % cuando se desee que sea en porcentaje un nmero, acompaado de % cuando se desee que sea en porcentaje un nmero
height
altura de la tabla
cellpadding
espacio entre el contenido de las celdas y el borde espacio entre celdas grosor del borde alineacin de la tabla dentro de la pgina
cellspacing border align
un nmero un nmero
left right center (centro)
(izquierda) (derecha)
bgcolor background Bordercolor
color de fondo imagen de fondo color del borde
nmero hexadecimal nmero hexadecimal nmero hexadecimal
Por ejemplo, para modificar la tabla de la pgina anterior para que quedase como la siguiente:
Sabado Curso HTML Curso Frontpage Domingo Curso Dreamweaver Curso Flash
Habra que escribir:

<table width="50%" border="2" align="center" cellspacing="0" bordercolor="#000000" bgcolor="#FFCC99"> ... </table>
Con esto indicamos que el ancho (width) de la tabla debe ocupar el 50% del ancho de la ventana (lo puedes comprobar cambiando el ancho de la ventana de tu navegador y vers que el ancho de la tabla vara para ocupar siempre la mitad de la ventana), que el borde ( border) tiene un grosor de dos pxeles (es ms ancho
34
que las separaciones internas de la tabla que tienen grosor 1), que la tabla est alineada al centro ( center) de la ventana, que no hay espacio entre las celdas (cellspacing="0"), que el borde la tabla es negro (#000000) y el fondo naranja (#FFCC99). - Formato de las celdas Es posible modificar los siguientes atributos de una celda: Atributo
width
Significado ancho de la tabla
Posibles valores un nmero, acompaado de % cuando se desee que sea en porcentaje un nmero, acompaado de % cuando se desee que sea en porcentaje
left right center (centro)
height
altura de la tabla
align
alineacin horizontal del contenido de la celda
(izquierda) (derecha)
valign
alineacin vertical del contenido de la celda
baseline bottom middle top (superior)
(lnea
de
base) (inferior) (medio)
bgcolor background bordercolor
color de fondo imagen de fondo color del borde
nmero hexadecimal nmero hexadecimal nmero hexadecimal
Tambin es posible modificar estos atributos de toda una fila, especificndolos en la etiqueta <tr>, en lugar de en la etiqueta <td>. Hay que tener en cuenta que los atributos tienen ms prioridad cuando son establecidos para una celda que cuando son establecidos para una fila completa. Al mismo tiempo, tienen ms prioridad los atributos establecidos para una fila que los establecidos para toda la tabla. Por ejemplo, si escribiramos el siguiente cdigo:
<table width="50%" border="2" align="center" cellspacing="0" bordercolor="#000000" bgcolor="#FFCC99"> <tr align="center" bgcolor="#0099CC"> <td>Sabado</td> <td bgcolor="#66CC99">Domingo</td> </tr> <tr> <td>Curso HTML</td>
35
<td>Curso Dreamweaver</td> </tr> <tr> <td>Curso Frontpage</td> <td>Curso Flash</td> </tr> </table>
Obtendramos la siguiente tabla:

Sabado Curso HTML Curso Frontpage Curso Flash Domingo Curso Dreamweaver
Se ha establecido el color naranja como fondo de toda la tabla, pero con la lnea de cdigo <tr align="center" bgcolor="#0099CC"> se ha establecido el color azul como color de fondo de la primera fila, por lo que dicha fila se mostrar de color azul, y no de color naranja. Al mismo tiempo, se ha cambiado el color de la segunda celda de la primera fila por el color verde, a travs de la lnea <td bgcolor="#66CC99">Domingo</td> por lo que esta fila en vez de ser azul ser verde, los atributos de celda tienen prioridad sobre los de la fila. 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>. - Encabezado de columna <th> Las etiquetas <td> y </td> se utilizan para definir las celdas de cada una de las filas, pero podemos poner en su lugar las etiquetas <th> y </th>. Para la etiqueta <th> es posible especificar los mismos atributos que para la etiqueta <td>, pero esta nueva etiqueta hace que el texto de la celda aparezca centrado y en negrita, por lo que se utiliza para definir los encabezados o ttulos de las columnas. Por ejemplo, si escribiramos el siguiente cdigo:
<table width="50%" border="1" align="center"> <tr> <th>Sabado</td> <th>Domingo</td> </tr> <tr> <td>Curso HTML</td> <td>Curso Dreamweaver</td> </tr> <tr> <td>Curso Frontpage</td> <td>Curso Flash</td> </tr> </table>
36
Obtendramos la siguiente tabla:

Sbado Curso HTML Curso Frontpage Domingo Curso Dreamweaver Curso Flash
- Ttulo de tabla <caption> No solamente es posible establecer ttulos para las columnas, tambin es posible establecer un ttulo para la tabla mediante las etiquetas <caption> y </caption>. Estas etiquetas han de ir despus de la etiqueta <table>, y puede especificarse el valor de los atributos align (con los valores bottom, center, left, right y top) y valign (con los valores bottom y top). Por ejemplo, si escribiramos el siguiente cdigo:
<table width="50%" border="1" align="center"> <caption align="right" valign="top">Titulo de la tabla<tr> <tr> <th>Sabado</td> ... </tr> </table>
Obtendramos la siguiente tabla con ttulo:

Titulo de la tabla Sbado Curso HTML Curso Frontpage Domingo Curso Dreamweaver Curso Flash
El ttulo aparece ajustado a la margen derecho de la tabla (align="right") y encima de la tabla (valign="top"). - Combinar celdas Para las etiquetas <td> y <th> existen los atributos colspan y rowspan, que se utilizan para combinar celdas. A travs del atributo colspan se especifica el nmero de columnas por las que se extender la celda, y a travs del atributo rowspan se especifica el nmero de filas por las que se extender la celda. Para que quede ms claro, vamos a ver un ejemplo de su uso. Por ejemplo, para insertar la siguiente tabla:
DIFERENCIAS ENTRE EL PERRO Y EL HOMBRE DIFERENCIAS PERRO HOMBRE
37
PEQUEO Duracin crecimiento Tiempo de gestacin Duracin de vida del pelo/cabello 10 meses
GRANDE 18 a 24 meses 58 a 63 das 1 ao 16 aos 9 meses 2 a 7 aos
Habra que escribir el siguiente cdigo:

<table width="575" border="2" cellspacing="2"> <tr align="center" valign="middle"> <th colspan="4">DIFERENCIAS ENTRE EL PERRO Y EL HOMBRE</th> </tr> <tr align="center" valign="middle"> <th rowspan="2">DIFERENCIAS</th> <th colspan="2">PERRO</th> <th rowspan="2">HOMBRE</th> </tr> <tr align="center" valign="middle"> <th>PEQUEÑO</th> <th>GRANDE</th> </tr> <tr align="center" valign="middle"> <td>Duración crecimiento</td> <td>10 meses</td> <td>18 a 24 meses</td> <td>16 años</td> </tr> <tr align="center" valign="middle"> <td>Tiempo de gestación</td> <td colspan="2">58 a 63 días</td> <td>9 meses</td> </tr> <tr align="center" valign="middle"> <td>Duración de vida del pelo/cabello</td> <td colspan="2">1 año</td> <td>2 a 7 años</td> </tr> </table>
Vamos a explicar un poco cmo funciona dicho cdigo, aunque sera conveniente que primero intentaras entender el cdigo comparndolo con la tabla que de l se obtiene. En primer lugar, tenemos que ver el nmero mximo de columnas que ha de tener la tabla. En este caso seran cuatro columnas. Para saber el nmero de columnas total de la tabla, tenemos que fijarnos en el nmero total de celdas que podemos obtener por fila al trazar las lneas verticales que separan las columnas entre s. En la primera fila, la lnea <th colspan="4">DIFERENCIAS ENTRE EL PERRO Y EL HOMBRE</th> indica que la celda ocupar cuatro columnas de la tabla (la columna actual y las 3 siguientes). Como la tabla tiene como mucho cuatro columnas y el atributo colspan de la celda vale cuatro, no hay que definir ms celdas para esa misma fila.
38
En la segunda fila, la lnea <th rowspan="2">DIFERENCIAS</th> indica que la celda ocupar dos filas de la tabla (la actual y la siguiente). Lo mismo ocurre con la lnea <th rowspan="2">HOMBRE</th>. Ya hemos definido dos celdas de la segunda fila. Sabemos que la tabla tiene como mucho cuatro columnas, por lo que como en la lnea <th colspan="2">PERRO</th> el atributo colspan vale dos, ya tenemos las cuatro celdas. En la segunda fila hemos definido dos celdas que se expanden por dos filas, por lo que en la tercera fila habr que definir solamente dos celdas, y no cuatro, ya que dos de sus celdas se corresponden con las definidas en la fila anterior. Las dos nuevas celdas son <th>PEQUEÑO</th> y <th>GRANDE</th>. El uso de los atributos colspan y rowspan puede resultar algo complicado al principio. Es cuestin de prctica. Cdigo de Colores - Colores en hexadecimal Los colores en HTML se representan mediante un nmero hexadecimal. Un nmero hexadecimal se diferencia de un nmero decimal en que no slo puede tomar valores del 0 al 9, sino que puede tomar hasta diecisis valores distintos, que van del 0 al 9, y de la A a la F. Cada color estar representado por un grupo de seis dgitos en hexadecimal, precedidos por una almohadilla, como por ejemplo #FFFFFF. Existen 216 colores seguros para WEB. stos son los colores que se muestran de la misma forma en Microsoft Internet Explorer y en Netscape Navigator, tanto en Windows como en Macintosh. Tambin podemos personalizar nuestros propios colores, modificando los valores de cada uno de los dgitos que forman parte del nmero hexadecimal. A continuacin se muestran los 216 colores seguros para WEB, para que puedas consultarlos cuando lo necesites.
#000000 #003300 #006600 #009900 #00CC00 #00FF00 #330000 #333300 #336600 #000033 #003333 #006633 #009933 #00CC33 #00FF33 #330033 #333333 #336633 #000066 #003366 #006666 #009966 #00CC66 #00FF66 #330066 #333366 #336666 #000099 #003399 #006699 #009999 #00CC99 #00FF99 #330099 #333399 #336699 #0000CC #0033CC #0066CC #0099CC #00CCCC #00FFCC #3300CC #3333CC #3366CC #0000FF #0033FF #0066FF #0099FF #00CCFF #00FFFF #3300FF #3333FF #3366FF
39
#339900 #33CC00 #33FF00 #660000 #660033 #666600 #669900 #66CC00 #66FF00 #990000 #993300 #996600 #999900 #99CC00 #99FF00 #CC0000 #CC3300 #CC6600 #CC9900 #CCCC00 #CCFF00 #FF0000 #FF3300 #FF6600 #FF9900 #FFCC00 #FFFF00
#3399CC #33CCCC #33FFCC #6600CC #6633CC #6666CC #6699CC #66CCCC #66FFCC #9900CC #9933CC #9966CC #9999CC #99CCCC #99FFCC #CC00CC #CC33CC #CC66CC #CC99CC #CCCCCC #CCFFCC #FF00CC #FF33CC #FF66CC #FF99CC #FFCCCC #FFFFCC
#3399FF #33CCFF #33FFFF #6600FF #6633FF #6666FF #6699FF #66CCFF #66FFFF #9900FF #9933FF #9966FF #9999FF #99CCFF #99FFFF #CC00FF #CC33FF #CC66FF #CC99FF #CCCCFF #CCFFFF #FF00FF #FF33FF #FF66FF #FF99FF #FFCCFF #FFFFFF
Existe otra forma de representar algunos colores, sin la necesidad de utilizar nmeros en hexadecimal. Estos colores pueden representarse por su nombre, y son los siguientes: Color Hexadecimal
#FFFFFF #000000 #000080 #0000FF #008000 #008080 #00FF00 #00FFFF #800000 #800080 #808000 #808080 #C0C0C0 #FF0000 #FF00FF #FFFF00
Nombre
white black navy blue green teal lime aqua maroon purple olive gray silver red fuchsia yellow
40
Cdigo de Caracteres - Tabla de cdigos

ASCII Dec 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 Hex 20 21 22 23 24 25 26 27 28 29 2A 2B 2C 2D 2E 2F 30 31 32 33 34 35 36 37 38 39 3A 3B 3C 3D 3E 3F 40 41 42 43 44 45 46 47 48 Smbolo HTML Numero ! " # $ % & ' ( ) * + , . / 0 1 2 3 4 5 6 7 8 9 : ; < = > ? @ A B C D E F G H ! " # $ % & ' ( ) * + , - . / 0 1 2 3 4 5 6 7 8 9 : ; < = > ? @ A B C D E F G H HTML Nombre
"
&
< >
Descripcin espacio signo de cierre de exclamacin / admiracin comillas dobles signo de nmero signo de dlar signo de porcentaje signo "&" / ampersand comilla / apstrofe parntesis izquierdo parntesis derecho asterisco signo de ms / adicin coma signo de menos / sustraccin / guin / raya punto barra oblicua - barra de divisin cero uno dos tres cuatro cinco seis siete ocho nueve dos puntos punto y coma signo de menor que signo de igual signo de mayor que signo de interrogacin - cierre
smbolo arroba
41
ASCII Dec 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 Hex 49 4A 4B 4C 4D 4E 4F 50 51 52 53 54 55 56 57 58 59 5A 5B 5C 5D 5E 5F 60 61 62 63 64 65 66 67 68 69 6A 6B 6C 6D 6E 6F 70 71 72 73 74 75 76 77 Smbolo I J K L M N O P Q R S T U V W X Y Z [ \ ] ^ _ ` a b c d e f g h i j k l m n o p q r s t u v w
HTML Numero I J K L M N O P Q R S T U V W X Y Z [ \ ] ^ _ ` a b c d e f g h i j k l m n o p q r s t u v w
HTML Nombre
Descripcin
corchete izquierdo barra inversa corchete derecho signo de intercalacin circunflejo signo de subrayado
acento
acento grave
42
ASCII Dec 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 Hex 78 79 7A 7B 7C 7D 7E 7F 80 81 82 83 84 85 86 87 88 89 8A 8B 8C 8D 8E 8F 90 91 92 93 94 95 96 97 98 99 9A 9B 9C 9D 9E 9F A0 A1 A2 A3 A4 A5 A6 Smbolo x y z { | } ~
HTML Numero x y z { | } ~
HTML Nombre
Descripcin
¡ ¢ £ ¤ ¥ ¦
¡ ¢ £ ¤ ¥ ¦
llave de apertura - izquierda barra vertical llave de cierre - derecho signo de equivalencia / tilde (no definido en estndar HTML 4) (no definido en estndar HTML 4) (no definido en estndar HTML 4) (no definido en estndar HTML 4) (no definido en estndar HTML 4) (no definido en estndar HTML 4) (no definido en estndar HTML 4) (no definido en estndar HTML 4) (no definido en estndar HTML 4) (no definido en estndar HTML 4) (no definido en estndar HTML 4) (no definido en estndar HTML 4) (no definido en estndar HTML 4) (no definido en estndar HTML 4) (no definido en estndar HTML 4) (no definido en estndar HTML 4) (no definido en estndar HTML 4) (no definido en estndar HTML 4) (no definido en estndar HTML 4) (no definido en estndar HTML 4) (no definido en estndar HTML 4) (no definido en estndar HTML 4) (no definido en estndar HTML 4) (no definido en estndar HTML 4) (no definido en estndar HTML 4) (no definido en estndar HTML 4) (no definido en estndar HTML 4) (no definido en estndar HTML 4) (no definido en estndar HTML 4) (no definido en estndar HTML 4) (no definido en estndar HTML 4) (no definido en estndar HTML 4) (no definido en estndar HTML 4) espacio sin separacin signo de apertura de exclamacin / admiracin signo de centavo signo de Libra Esterlina signo de divisa general signo de yen barra vertical partida
43
ASCII Dec 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 Hex A7 A8 A9 AA AB AC AD AE AF B0 B1 B2 B3 B4 B5 B6 B7 B8 B9 BA BB BC BD BE BF C0 C1 C2 C3 C4 C5 C6 C7 C8 C9 CA CB CC CD CE CF D0 D1 D2 D3 Smbolo
HTML Numero § ¨ © ª « ¬ ® ¯ ° ± ² ³ ´ µ ¶ · ¸ ¹ º » ¼ ½ ¾ ¿ À Á Â Ã Ä Å Æ Ç È É Ê Ë Ì Í Î Ï Ð Ñ Ò Ó
HTML Nombre § ¨ © ª « ¬ ® ¯ ° ± ² ³ ´ µ ¶ · ¸ ¹ º » ¼ ½ ¾ ¿ À Á Â Ã Ä Å Æ Ç È É Ê Ë Ì Í Î Ï Ð Ñ Ò Ó
Descripcin signo de seccin diresis - umlaut signo de derechos de autor - copyright gnero feminino - indicador ordinal feminino comillas anguladas de apertura Signo de no - smbolo lgico guin dbil signo de marca registrada macrn - raya alta signo de grado signo de ms o menos superndice dos - cuadrado superndice tres - cbico acento agudo - agudo espaciado signo de micro signo de fin de prrafo punto medio - coma Georgiana cedilla superndice uno gnero masculino - indicador ordinal masculino comillas anguladas de cierre fraccin un cuarto fraccin medio - mitad fraccin tres cuartos signo de interrogacin - apertura A mayscula con acento grave A mayscula con acento agudo A mayscula con acento circunflejo A mayscula con tilde A mayscula con diresis A mayscula con anillo diptongo AE mayscula (ligadura) C cedilla mayscula E mayscula con acento grave E mayscula con acento agudo E mayscula con acento circunflejo E mayscula con diresis I mayscula con acento grave I mayscula con acento agudo I mayscula con acento circunflejo I mayscula con diresis ETH islandesa mayscula N mayscula con tilde - ee mayscula O mayscula con acento grave O mayscula con acento agudo
44
ASCII Dec 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231 232 233 234 235 236 237 238 239 240 241 242 243 244 245 246 247 248 249 250 251 252 253 254 255 Hex D4 D5 D6 D7 D8 D9 DA DB DC DD DE DF E0 E1 E2 E3 E4 E5 E6 E7 E8 E9 EA EB EC ED EE EF F0 F1 F2 F3 F4 F5 F6 F7 F8 F9 FA FB FC FD FE FF Smbolo
HTML Numero Ô Õ Ö × Ø Ù Ú Û Ü Ý Þ ß à á â ã ä å æ ç è é ê ë ì í î ï ð ñ ò ó ô õ ö ÷ ø ù ú û ü ý þ ÿ
HTML Nombre Ô Õ Ö × Ø Ù Ú Û Ü Ý Þ ß à á â ã ä å æ ç è é ê ë ì í î ï ð ñ ò ó ô õ ö ÷ ø ù ú û ü ý þ ÿ
Descripcin O mayscula con acento circunflejo O mayscula con tilde O mayscula con diresis signo de multiplicacin O mayscula with slash U mayscula con acento grave U mayscula con acento agudo U mayscula con acento circunflejo U mayscula con diresis Y mayscula con acento agudo THORN islandesa mayscula s minscula (alemn) - Beta minscula a minscula con acento grave a minscula con acento agudo a minscula con acento circunflejo a minscula con tilde a minscula con diresis a minscula con anillo diptongo ae minscula (ligadura) c cedilla minscula e minscula con acento grave e minscula con acento agudo e minscula con acento circunflejo e minscula con diresis i minscula con acento grave i minscula con acento agudo i minscula con acento circunflejo i minscula con diresis eth islandesa minscula ee minscula - n minscula con tilde o minscula con acento grave o minscula con acento agudo o minscula con acento circunflejo o minscula con tilde o minscula con diresis signo de divisin o barrada minscula u minscula con acento grave u minscula con acento agudo u minscula con acento circunflejo u minscula con diresis y minscula con acento agudo thorn islandesa minscula y minscula con diresis
45
Creando hiperenlaces (links) - En HTML Un hiperenlace, hipervnculo, o vnculo, no es ms que un enlace, que al ser pulsado lleva de una pgina o archivo. Aquellos elementos (texto, imgenes, etc.) sobre los que se desee insertar un enlace han de encontrarse entre las etiquetas <a> y </a>. A travs del atributo href se especifica la pgina a la que est asociado el enlace, la pgina que se visualizar cuando el usuario haga clic en el enlace. Por ejemplo, para insertar el enlace: Visita www.conalep.edu.mx Habra que escribir: <a href="http:// www.conalep.edu.mx ">Visita www.conalep.edu.mx </a> - Internos Conduce a un documento situado dentro del mismo sitio que el documento 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, teniendo en cuenta que el documento t_4_1.htm se encuentra directamente dentro de la carpeta raz del sitio, para insertar el enlace: Enlace a Tema 4: Hiperenlaces Habra que escribir:
<a href="/t_4_1.htm">Enlace a Tema 4: Hiperenlaces</a>
Observa como aparece el smbolo "/" delante del nombre del documento. Esta barra inclinada indica la carpeta raz del sitio. Si el documento t_4_1.htm se encontrara, por ejemplo, dentro de una carpeta llamada tema4, y esta estuviera dentro de la carpeta raz del sitio, habra que escribir:
<a href="/tema4/t_4_1.htm">Enlace a Tema 4: Hiperenlaces</a>
- locales Conduce a un punto dentro de un documento, ya sea dentro del actual o de otro diferente. Para ello el vnculo debe ser "nombre_de_documento#nombre_de_punto".
46
Por ejemplo, para insertar el enlace: Punto de fijacin Tipos de enlaces Habra que escribir:
<a href="t_4_1.htm#tipos">Punto de fijacion Tipos de enlaces</a>
Teniendo en cuenta que el documento se llama t_4_1.htm y el punto de fijacin se llama tipos. Al final de este tema vers cmo definir el punto de fijacin. - Destino del enlace El destino del enlace determina en qu ventana va a ser abierta la pgina vinculada, se especifica a travs del atributo target al que se le puede asignar los siguientes valores:
_blank: Abre el documento vinculado en una ventana nueva del navegador. _parent: Abre el documento vinculado en la ventana del marco que contiene el vnculo o en el conjunto de marcos padre. _self: Es la opcin predeterminada. Abre el documento vinculado en el mismo marco o ventana que el vnculo. _top: Abre el documento vinculado en la ventana completa del navegador.
No te preocupes si no te queda del todo claro para qu sirve cada una de estas opciones de destino, ya que se volvern a ver en el tema de Marcos. De momento slo te interesa retener la opcin _blank y _self. Para insertar el enlace: Visita www.conalep.edu.mx en una ventana nueva Habra que escribir:
<a href="http://www.conalep.edu.mx" target ="_blank"> Visita www.conalep.edu.mx en una ventana nueva </a>
Es interesante utilizar esta opcin cuando la pgina de destino est fuera de nuestro sitio para que cuando el usuario cierre la ventana del explorador, se encuentre automticamente en la pgina desde la que haba salido (que vuelva a nuestro sitio).
47
- Formato de los enlaces En general, un texto que tiene un vnculo asociado suele aparecer subrayado. Cuando el vnculo est definido sobre una imagen, en el borde aparecen una serie de puntitos al pulsar sobre ella. Cuando el vnculo est definido sobre una zona de una imagen (un mapa), aparece el contorno de esa zona. Aqu tienes dos vnculos similares de ejemplo:
Como puedes ver, la segunda imagen que hace de vnculo contiene un recuadro alrededor. Esto ocurre debido a que se ha establecido un borde para la imagen, como veremos ms adelante. Tanto si el vnculo se asigna a un texto como a una imagen, el cursor cambia de forma al situarse encima del vnculo. Suele adquirir la apariencia de una mano sealando. Normalmente los vnculos de texto cambian de color cuando el enlace ha sido ya pulsado 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>. Estos colores se asignan a travs 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).
Por ejemplo, al insertar el siguiente cdigo:

... <body link="#FF0000" vlink="#FF0099" alink="#FF9900"> ... <a href="http://www.conalep.edu.mx" target ="_blank"> www.conalep.edu.mx </a> ...
Mientras no se visite la pgina www.conalep.edu.mx, el enlace ser de color rojo (#FF0000) [red]: www.conalep.edu.mx
48
Mientras la pgina www.conalep.edu.mx sea la ltima visitada, el enlace ser de color fucsia (#FF0099) (fucsia): www.conalep.edu.mx Cuando se haya visitado la pgina www.conalep.edu.mx, el enlace ser de color naranja (#FF9900) [orange]: www.conalep.edu.mx - Puntos de fijacin. Anclas Cuando se tienen documentos extensos, divididos en varios apartados, es preferible poder ir directamente al apartado deseado, en lugar de ir al comienzo del documento. Para ello se utilizan las anclas, o puntos de fijacin, muy tiles a la hora de crear ndices. Un ancla necesita que se inserten las <a> y </a>, con el atributo name, que puede tomar cualquier valor inventado por el usuario, se recomienda no utilizar caracteres especiales. Por ejemplo, para insertar un punto de fijacin delante del siguiente texto: Texto con ancla Habra que escribir:
<a name="miancla">Texto con ancla</a>
Como puedes ver, no es necesario insertar nada entre las etiquetas <a> y </a>, y que sin mirar el cdigo no hay nada que indique que delante del texto haya un ancla. Teniendo en cuenta que el documento actual se llama t_4_3.htm, y que el ancla anterior se llama miancla, podramos crear un enlace que nos llevara directamente a la lnea de texto en la que se encuentra el ancla. Por ejemplo: Enlace al ancla Habra que escribir:
<a href="t_4_3.htm#miancla">Enlace al ancla</a>
Si pulsas sobre el enlace vers cmo se vuelve a cargar el documento actual, pero en lugar de cargarse desde el principio, la primera lnea de texto ser la lnea en la que hemos insertado el ancla. Cuando el ancla se encuentra en el mismo documento que el enlace, como ocurre en este caso, podemos prescindir de poner el nombre de la pgina en el atributo href.
49
En el ejemplo anterior podramos haber escrito:

<a href="#miancla">Enlace al ancla</a>
- Otros tipos de enlaces Existen otros tipos de enlaces que no conducen a otra pgina WEB, los veremos a continuacin: Correo electrnico: Abre la aplicacin Outlook Express para escribir un correo electrnico, cuyo destinatario ser el especificado en el enlace. Para ello la referencia del vnculo debe ser "mailto:direcciondecorreo". Por ejemplo, para insertar un enlace que permita enviar un correo electrnico a conalep Plantel Ing. Adrin Sada Trevio (Monterrey III), tal como este: e-mail para conalep Plantel Ing. Adrin Sada Trevio (Monterrey III) Habra que escribir: <a href="mailto:plantel254@conalepnl.edu.mx"> e-mail para conalep Plantel Ing. Adrin Sada Trevio (Monterrey III) </a> Despus de hacer clic en el enlace se abrir el Outlook Express (si el usuario lo tiene instalado) con la pantalla para redactar un nuevo mensaje y con el campo destinatario rellenado con la direcciondecorreo. Podemos hacer que est rellenado algn campo ms como es el asunto. En este caso habra que escribir:
<a href="mailto:plantel254@conalepnl.edu.mx?subject=el asunto del mensaje"> e-mail para conalep Ing. Adrin Sada Trevio (Monterrey III) </a>
Vnculo a ficheros para descarga: El valor del atributo href normalmente ser una pgina WEB (con extensin htm, html, asp, php...) pero tambin puede ser un fichero comprimido, una hoja de Excel, un documento Word, un documento 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.
50
El navegador reconoce algunas extensiones como asociadas a un determinado programa (por ejemplo la extensin .doc est asociada al programa Word, .pdf al programa Acrobat Reader, .xls al programa Excel...) en este caso en el cuadro de dilogo aparece una nueva opcin, la de abrir el fichero sin descargarlo en el disco duro del usuario. Para nombrar el fichero podemos utilizar segn el caso, una referencia externa, una referencia relativa al sitio o una referencia relativa al documento. Por ejemplo, en la carpeta donde se encuentra esta pgina tenemos el fichero Word carta.doc y queremos que nuestros visitantes puedan visualizar e incluso descargar el fichero en su disco duro, en este caso definiremos el enlace: haz clic aqu para descargarte el fichero De la siguiente forma:
<a href="carta.doc" tarjet=_blank > haz clic aquí para descargarte el fichero </a>
En este caso hemos utilizado una referencia relativa al documento ya que la carta se encuentra en la misma carpeta que nuestra pgina. Vnculo vaco: Al pulsar sobre un enlace vaco no se abre ninguna pgina ni archivo, pero el formato es el mismo que el de cualquier otro enlace. El vnculo debe ser el smbolo almohadilla "#". Por ejemplo, para insertar el enlace vaco: vinculo vacio Habra que escribir:
<a href="#">vinculo vacio</a>
51
Este tipo de enlace resulta til para trabajar con comportamientos javascript. Insertando Imgenes - Imagen <img> Todas las pginas WEB acostumbran a tener un cierto nmero de imgenes, que permiten mejorar su apariencia, o dotarla de una mayor informacin visual. Para insertar una imagen es necesario insertar la etiqueta <img>. Dicha etiqueta no necesita etiqueta de cierre. El nombre de la imagen ha de especificarse a travs del atributo src. Por ejemplo, para insertar la siguiente imagen:
Habra que escribir:

<img src="imagenes/logo_animales.gif">
Teniendo encuentra que la imagen se llama logo_animales.gif y que est dentro de la carpeta imgenes, que se encuentra en el mismo directorio que el documento actual (referencia relativa al documento). Para trabajar de una forma ms sencilla y ordenada, es recomendable que todos los documentos html se encuentren en un mismo directorio, y que dentro de este directorio existan diferentes carpetas para agrupar otros objetos, como puede ser una carpeta destinada a almacenar imgenes, o una carpeta destinada a almacenar archivos de audio, etc. - Texto alternativo Cuando una imagen no puede ser visualizada en el navegador, cosa que puede ocurrir al especificar mal el valor del atributo src, aparece un recuadro blanco con una X roja en su lugar, junto con el nombre de la imagen. Podemos hacer que en lugar de mostrarse el nombre de la imagen aparezca el texto que nosotros deseemos, gracias al atributo alt. Por ejemplo, imagina que deseamos mostrar una imagen llamada gatito.gif, con el texto alternativo Imagen gato, para ello insertamos el siguiente cdigo:
<img src="gatito.gif" alt="Imagen gato" >
52
Pero hemos cometido un error, ya que dicha imagen no se encuentra en el mismo directorio que el documento actual, sino que se encuentra dentro de la carpeta imgenes. En lugar de la imagen se mostrar lo siguiente:
Imagen gato
Si en lugar del cdigo anterior hubiramos insertado el siguiente cdigo:

<img src="imagenes/gatito.gif" alt="Imagen gato" >
La imagen habra mostrado correctamente:
Imagen gato
El texto alternativo se muestra tambin al situar el puntero sobre la imagen. Si sitas el puntero sobre la imagen durante unos segundos, vers como aparece el texto Imagen gato. El texto alternativo es muy til a la hora de disear pginas ms asequibles a los invidentes ya que los programas lectores son capaces de leer el texto alternativo. - Borde de una imagen En general, al visualizar una pgina en un navegador las imgenes aparecen sin ningn borde alrededor, pero es posible establecer uno a travs del atributo border. El atributo border puede tomar valores numricos, que indican el grosor en pxeles del borde. Por ejemplo, para insertar la siguiente imagen con borde:
53
Habra que escribir:

<img src="imagenes/logo_animales.gif" border="4" >
Hay que tener en cuenta que el borde de la imagen siempre ser de color negro, a no ser que la imagen contenga un enlace, en cuyo caso el color del borde ser el color establecido para los vnculos. Por ejemplo, para insertar la siguiente imagen con borde y con un enlace:
Habra que escribir:

<a href="http://www.conalep.edu.mx" target ="_blank" > <img src="imagenes/logo_animales.gif" border="4" > </a>
Si se desea establecer un vnculo sobre una imagen y no se desea que se muestre el borde (que por su color indica que existe dicho vnculo), es necesario establecer border="0". - Tamao de una imagen Cuando insertamos una imagen, esta se muestra en los navegadores con su tamao original, pero por diversos motivos puede interesarnos modificar dicho tamao. A travs de los atributos width (anchura) y height (altura) puede modificarse el tamao de la imagen. Dicho cambio de tamao no se aplica directamente sobre el archivo de imagen, sino que lo que vara es la visualizacin de la imagen en el navegador. El valor que pueden tomar los atributos width y height ha de ser un nmero, acompaado de % cuando se desee que sea en porcentaje con respecto a la pgina. Por ejemplo, para insertar la siguiente imagen (cuyo tamao original era de 122 pxeles de anchura y 71 pxeles de altura) con 200 pxeles de anchura y 80 pxeles de altura:
54
Habra que escribir:

<img src="imagenes/logo_animales.gif" width="200" height="80">
Al modificar el tamao de la imagen a travs de estos atributos es muy probable que la imagen resultante no sea de buena calidad, en comparacin de cmo podra quedar modificndola desde un editor externo, como Fireworks. - Alineacin de una imagen La alineacin de las imgenes se establece a travs del atributo align. Este atributo indica la alineacin de las imgenes con respecto a la lnea de texto en la que se encuentran. Los valores del atributo align pueden ser los siguientes: Valor
absbottom absmiddle baseline bottom left middle right texttop top
Significado inferior absoluta medio absoluta lnea de base Inferior izquierda medio derecha texto superior superior
El resultado de aplicar uno u otro valor puede tener el mismo resultado, como ocurre con los valores baseline y bottom, o con los valores texttop y top. Para insertar el texto y la imagen siguientes:
55
PerrosGatos
Una Web de animales
Habra que escribir:

PerrosGatos<img scr="imagenes/logo_animales.gif" align="middle">Una Web de animales
Este tipo de alineacin la recomendamos cuando es una imagen pequea que queremos fundir con la lnea de texto sin que por ello cree una separacin demasiado grande entre la lnea donde se encuentra la imagen y las lneas superior y inferior. Por ejemplo para la imagen de un icono de cualquier programa, de un botn, etc. Si la imagen es muy grande, conviene dejarla aislada del texto (no ajustarla a la derecha ni a la izquierda sino colocarla en un bloque aparte). Creacin de Formularios - Formulario <form> Un formulario es un elemento que permite recoger datos introducidos por el usuario. Los formularios se utilizan para conocer las opiniones, dudas, y otra serie de datos sobre los usuarios, para introducir pedidos a travs de la red, tienen multitud de aplicaciones. Un formulario est formado, entre otras cosas, por etiquetas, campos de texto, mens desplegables, y botones. Es muy recomendable utilizar tablas para organizar los elementos de los formularios. Utilizando tablas se consigue una mejor distribucin de los elementos del formulario, lo que facilita su comprensin y mejora su apariencia.
Los formularios se insertan a travs de las etiquetas <form> y </form>. Entre dichas etiquetas habr que insertar los diferentes objetos que formarn el formulario, la etiqueta <form> tiene los siguientes atributos: El atributo action indica una direccin de correo electrnico a la que mandar el formulario, o la direccin del programa que se encargar de procesar el contenido del formulario.
56
El atributo enctype indica el modo en que ser cifrada la informacin para su envo. Por defecto tiene el valor application/x-www-form-urlencoded. El atributo method indica el mtodo mediante el que se transferirn las variables del formulario. Su valor puede ser get o post. El valor get se utiliza cuando no se van a producir cambios en ningn documento o programa que no sea el navegador del usuario que pretende mandar el formulario, como ocurre cuando se realizan consultas sobre una base de datos. El valor post se utiliza cuando s se van a producir cambios, como ocurre cuando el usuario manda datos que deben ser almacenados en una base de datos. Se recomienda utilizar el valor post. Por ejemplo, podramos insertar un formulario escribiendo el siguiente cdigo:
<form action="mailto:formularios@conalep.edu.mx" method="post" enctype="text/plain" > ... </form>
A continuacin veamos los distintos elementos que se pueden incluir en un formulario. - reas de texto <textarea> Las reas de texto permiten a los usuarios insertar varias lneas de texto. Por ello, suelen utilizarse para que incluyan comentarios. Para insertar un rea de texto es necesario incluir las etiquetas <textarea> y </textarea> entre las etiquetas <form> y </form> del formulario. Para que el rea de texto tenga algn valor inicial, habr que insertarlo entre las etiquetas <textarea> y </textarea>. El atributo name indica el nombre del rea de texto. Es necesario dar nombres diferentes a cada uno de los elementos de un formulario, para poder identificarlos a la hora de procesarlos. El atributo rows indica el nmero de lneas que podrn ser visualizadas en el rea de texto por lo que determina al alto del rea de texto. El atributo cols indica el nmero de caracteres por lnea que podrn ser visualizados en el rea de texto por lo que determina al ancho del rea de texto. Gracias a las barras de desplazamiento, es posible insertar ms lneas de las especificadas en el atributo rows, y ms caracteres por lnea de los especificados en el atributo cols.
57
Por
ejemplo,
para
insertar
el
rea
de
texto:
Escribe el texto que quieras Habra que escribir:

<textarea name="ejemploarea" cols="30" rows="3"> Escribe el texto que quieras </textarea>
- Elementos de entrada <input> Para insertar un elemento de entrada es necesario incluir la etiqueta <input> entre las etiquetas <form> y </form> del formulario. El atributo name indica el nombre que se desea dar al elemento de entrada, mediante el cual ser evaluado, y el atributo type indica el tipo de elemento de entrada. Vamos a ver los diferentes tipos de elementos de entrada, y el resto de atributos que pueden definirse para cada uno de ellos. Campo de texto: Para insertar un campo de texto, el atributo type debe tener el valor text. El atributo size indica el nmero de caracteres que podrn ser visualizados en el campo de texto, determina el ancho de la caja. El atributo maxlenght indica el nmero de caracteres que podrn ser insertados en el campo de texto. El atributo value indica el valor inicial del campo de texto. Por ejemplo, para insertar el campo de texto:
Habra que escribir:

<input name="campo" type="text" value="Campo de texto" size="20" maxlength="15">
Campo de contrasea: Para insertar un campo de contrasea, el atributo type debe tener el valor password.
58
El resto de atributos son los mismos que para un campo de texto normal. La nica diferencia es que todas las letras escritas en el campo de contrasea sern visualizadas como asteriscos. Por ejemplo, para insertar el campo de contrasea:
Habra que escribir:

<input name="contra" type="password" value="contrasea" size="20" maxlength="15">
Botn: Para insertar un botn, el atributo type debe tener el valor submit, restore o button. Si el valor es submit, al pulsar sobre el botn se enviar el formulario. Si el valor es restore, al pulsar sobre el botn se restablecer el formulario, borrndose todos los campos del formulario que hayan sido modificados y adquiriendo su valor inicial. Si el valor es button, al pulsar sobre el botn no se realizar ninguna accin. El atributo value indica el texto que mostrar el botn. Por ejemplo, para insertar el botn:
Habra que escribir:

<input name="boton" type="submit" value="Enviar">
Casilla de verificacin: Para insertar una casilla de verificacin, el atributo type debe tener el valor checkbox. El atributo value indica el valor asociado a la casilla de verificacin. Es necesario poner este atributo, aunque el usuario no pueda ver su valor. Es el valor a enviar. La aparicin del atributo checked indica que la casilla aparecer activada inicialmente. Este atributo no toma valores. Por ejemplo, para insertar la casilla:
Habra que escribir:
59
<input name="casilla" type="checkbox" value="acepto" checked>
Botn de opcin: Para insertar un botn de opcin, el atributo type debe tener el valor radio. El atributo value indica el valor asociado al botn de opcin. Es necesario poner este atributo, aunque el usuario no pueda ver su valor. Es el valor a enviar. La aparicin del atributo checked indica que el botn aparecer activado inicialmente. Este atributo no toma valores. Los botones de opcin se utilizan cuando se desea que una variable del formulario pueda tomar un solo valor de entre varios posibles. Para ello, se insertan varios botones de opcin con el mismo nombre (que indica la variable) y con distintos valores. Solamente uno de estos botones podr estar activado, el que est activado cuando se enva el formulario, su valor ser el que tendr la variable. Por ejemplo, para insertar los botones de opcin:
Habra que escribir:

<input name="prefiere" type="radio" value="estudiar" checked> <input name="prefiere" type="radio" value="trabajar">
Cuando se enve el formulario, si el primer botn est activado la variable prefiere ser igual a estudiar, si es el segundo el activado, la variable prefiere valdr trabajar. Observa que lo que ponemos como valor no aparece escrito en la pgina es unos datos interno.
<input name="prefiere" type="radio" value="estudiar" checked> <input name="prefiere" type="radio" value="trabajar">
Cuando se enve el formulario, si el primer botn est activado la variable prefiere ser igual a estudiar, si es el segundo el activado, la variable prefiere valdr trabajar. Observa que lo que ponemos como valor no aparece escrito en la pgina es un dato interno. Existen otros tipos como el tipo hidden que sirve para definir un campo oculto, campo que no ve el usuario, en este caso habra que incluir el atributo value para que el formulario pase ese valor al programa que recoge los datos del formulario. Para que el usuario enve un fichero suyo a travs del formulario tenemos el tipo file, este tipo hay que utilizarlo con mucho cuidado ya que si permitimos que cualquier internauta nos enve cualquier tipo de fichero nos podramos encontrar con sorpresas no siempre agradables.
60
- Campos de seleccin <select> Los campos de seleccin se utilizan para insertar mens y listas desplegables. Para insertar uno de estos mens o listas es necesario insertar las etiquetas <select> y </select> en un formulario. El atributo name indica el nombre del men o lista ser el nombre de la variable que contendr el valor seleccionado. El atributo size indica el nmero de elementos de la lista que pueden ser visualizados al mismo tiempo, determina el alto de la lista. La aparicin del atributo multiple indica que el usuario podr seleccionar varios elementos de la lista al mismo tiempo, ayudndose de la tecla Ctrl . Este atributo no toma valores. La aparicin del atributo disabled indica que la lista estar desactivada, por lo que el usuario no podr seleccionar sus elementos. Este atributo tampoco toma valores. Cada uno de los elementos de la lista ha de insertarse entre las etiquetas <option> y </option>. El atributo value indica el valor a enviar si se selecciona el elemento. Si no se especifica este atributo, se enviar el texto de la opcin, que se encuentra entre las etiquetas <option> y </option>. La aparicin del atributo selected indica que el elemento aparecer seleccionado. Este atributo no toma valores. Por ejemplo, para insertar el men:
Habra que escribir:

<select name="mascota"> <option selected>--- Elige animal ---</option> <option>Perro</option> <option>Gato</option> </select>
para
insertar
la
lista:
Habra que escribir:

<select name="animal" size="3" multiple> <option selected>---Elige animales---</option>
61
<option value="ave">Loro</option> <option>Perro</option> <option>Gato</option> <option>Pez</option> </select>
Frames - Conjunto de marcos <frameset> Los marcos o frames sirven para distribuir mejor los datos de las pginas, ya que permiten mantener fijas algunas partes, como pueden ser el logotipo y la barra de navegacin, mientras que otras s pueden cambiar. Adems de mejorar la funcionalidad, pueden mejorar tambin la apariencia. Cada uno de los marcos de una pgina, contiene un documento HTML individual. Por ejemplo, en la imagen de la derecha puedes ver una pgina con dos marcos. El marco izquierdo contiene el documento menu.htm y el derecho el documento perros.htm. Para poder visualizar la pgina de este modo, hemos tenido que abrir en el navegador el documento marcos.htm, que es el que en este caso contiene el grupo de marcos.
El trabajar con marcos puede resultar una tarea algo complicada, sobre todo al principio, por lo que vemos solamente algunos conceptos bsicos y ejemplos sencillos. Como hemos visto si queremos utilizar marcos debemos crear una pgina con la definicin del conjunto de marcos (en el ejemplo anterior la pgina marcos.htm). Los conjuntos de marcos se definen a travs de las etiquetas <frameset> y </frameset>, que van despus de la etiqueta <head>. A travs de estas etiquetas se indica el nmero de marcos en que se dividir la ventana, cada uno de los cuales ser una especie de subventana. Cuando se insertan las etiquetas <frameset> y </frameset> no hay que insertar las etiquetas <body> y </body>, ya que el cuerpo del documento ser el cuerpo de las pginas que se carguen en cada uno de los marcos del conjunto de marcos. Los atributos que pueden especificarse sobre la etiqueta <frameset> son los siguientes: Atributo Significado Posibles valores
62
cols
tamao de cada una de las columnas en que se divide el documento
Un nmero (acompaado de % cuando se desee que sea en porcentaje) por cada columna, separados por comas. Un nmero (acompaado de % cuando se desee que sea en porcentaje) por cada fila, separados por comas. yes no
rows
tamao de cada una de las columnas en que se divide el documento
frameborder
aparece o no el borde de los marcos
framespacing border
separacin entre los marcos grosor del borde
un nmero un nmero, acompaado de % cuando se desee que sea en porcentaje nmero hexadecimal
bordercolor
color del borde
Tambin es posible incluir asteriscos como valores para los atributos cols y rows. Este valor indica que dicha fila o columna ocupar todo lo que quede de ventana o subventana. Cuando existan varias columnas o filas con este valor, se repartirn de forma equitativa lo que quede de ventana. Por ejemplo, si insertramos la siguiente lnea de cdigo:
<frameset rows="*" cols="142,*,25%">...</frameset>
Como el atributo rows tiene el valor asterisco, solo habra una fila, que ocupara todo el alto de la ventana. En este caso concreto no hara falta poner el atributo rows. Como el atributo cols tiene tres valores, estaramos dividiendo el documento en tres columnas. La primera columna sera de 142 pxeles de ancho, la tercera del 25% de la ventana, y la segunda columna ocupara lo que quedar de ventana (el 75% de la ventana menos 142 pxeles). Tambin es posible anidar marcos. Es decir, es posible dividir marcos en otros marcos. Por ejemplo, si insertramos el siguiente cdigo:
<frameset cols="142,*"> <frameset rows="80,*">...</frameset> <frameset cols="25%,*,*">...</frameset> </frameset>
Estaramos dividiendo el documento en dos columnas. La primera sera de 142 pxeles, y la otra abarcara el resto de la ventana.
63
Al mismo tiempo, la primera columna o subventana estara dividida en dos filas o subventanas horizontales, la primera de ellas de 80 pxeles. La segunda columna o subventana de la ventana principal se dividira a su vez en tres columnas, la primera de ellas del 25% de la subventana, y las otras dos se repartiran el resto a partes iguales (se repartiran el 75% de la subventana). Por ltimo debemos saber que entre las etiquetas <frameset> y </frameset> slo se pueden encontrar la etiquetas <head> <noframe> <frameset> <frame> y sus correspondientes etiquetas de cierre. - Marco <frame> Ya hemos visto cmo dividir un documento en varias subventanas o marcos, pero no hemos visto cmo hacer que se carguen las distintas pginas en cada uno de los marcos. Para indicar qu documento se cargar en cada uno de los marcos habr que insertar la etiqueta <frame> por cada uno de los marcos de la ventana. Estas etiquetas estarn entre las etiquetas <frameset> y </frameset>, y no necesitan etiqueta de cierre. Es posible modificar los siguientes atributos de un marco: Atributo
frameborder
Significado aparece o no el borde del marco yes no o 0
Posibles valores o 1
name noresize
nombre del marco si aparece, el usuario no podr redimensionar el tamao de este marco
cualquier valor no puede tomar valores
marginwidth
anchura del margen con respecto a los bordes un nmero, acompaado de % cuando del marco se desee que sea en porcentaje altura del margen con respecto a los bordes del marco un nmero, acompaado de % cuando se desee que sea en porcentaje
marginheight
scrolling
se mostrar o no la barra de desplazamiento yes cuando la pgina del marco no se pueda no visualizar completamente en l auto documento que se cargar en el marco ruta y nombre del documento
src
Por ejemplo, para crear el conjunto de marcos de la pgina que aparece si pulsas aqu, tendramos que escribir:
64
<frameset cols="150,*" frameborder="yes" framespacing="3" border="3" bordercolor="#FF9900"> <frame src="izquierdo.htm" name="marcoizquierdo" frameborder="no" scrolling="no" noresize> <frame src="derecho.htm" name="marcoderecho" frameborder="no" scrolling="auto"> </frameset>
Y para crear el conjunto de marcos de la pgina que aparece si pulsas aqu, tendramos que escribir:
<frameset rows="90,*" framespacing="3" frameborder="yes" border="3" bordercolor="#FF9900"> <frame src="superior.htm" name="marcosuperior" frameborder="yes" scrolling="NO" noresize> <frameset cols="150,*" framespacing="3" frameborder="yes" border="3" bordercolor="#FF9900"> <frame src="izquierdo.htm" name="marcoizquierdo" scrolling="NO" noresize> <frame src="derecho.htm" name="marcoderecho"> </frameset> </frameset>
Esta ltima pgina est dividida en dos marcos horizontales ( rows="90,*"), estando el inferior de ellos dividido en dos marcos verticales (cols="150,*"). - Sin marcos <noframes> Siempre que creamos una pgina queremos que pueda ser visitada por el mayor nmero de usuarios, por lo que el hecho de que haya usuarios cuyos navegadores no soportan los marcos puede resultar un problema. Las etiquetas <noframes> y </noframes> se utilizan para que su contenido sea visualizado en aquellos navegadores que no soportan los marcos. Si un navegador no soporta los marcos, no cargar ningn documento en ningn marco, por lo que tendremos que mostrar el cuerpo del documento actual de algn modo. Por ello, han de introducirse las etiquetas <body> y </body> entre las etiquetas <noframes> y </noframes>. Por ejemplo, si escribiramos el siguiente cdigo:
<html> <head> ... </head> <frameset cols="150,*"> <frame src="izquierdo.htm" name="marcoizquierdo"> <frame src="derecho.htm" name="marcoderecho"> </frameset> <noframes> <body> Este documento tiene marcos y tu navegador no los soporta. </body> </noframes> </html>
Obtendramos una pgina con dos marcos, que en el caso de intentar ser visualizada en un navegador que no soportase marcos, mostrara una pgina con el texto Este documento tiene marcos y tu navegador no los soporta. Una buena solucin para que el mayor nmero de usuarios pueda visitar nuestra pgina, es crear nuevas pginas con el contenido de los documentos que deberan mostrarse en los marcos, pero que permitan pasar de unos a otros dentro de la misma ventana.
65
De este modo, en el caso de que el navegador no soporte los marcos, podemos incluir un enlace a una de estas pginas. Por ejemplo, si escribiramos el siguiente cdigo:
... <noframes> <body> Este documento tiene marcos y tu navegador no los soporta. <a href="sinmarcos.htm"> Pulsa aqui para visualizar la pgina sin marcos.</a> </body> </noframes> </html>
Cuando la pgina intentara ser visualizada en un navegador que no soportase los marcos, aparecera el enlace Pulsa aqu para visualizar la pgina sin marcos, a una ventana sin marcos. - Destino del enlace Como recordars, en el tema de hipervnculos vimos los posibles destinos de los enlaces. Estos destinos podan ser _blank, _parent, _self, y _top. Vamos a recordar para qu serva cada uno de ellos, ya que ahora que sabes trabajar con marcos te sern ms fciles de entender.
_blank:
Abre el documento vinculado en una ventana nueva del navegador.

_parent:
Abre el documento vinculado en la ventana del marco que contiene el vnculo o en el conjunto de marcos padre.
_self:
Es la opcin predeterminada. Abre el documento vinculado en el mismo marco o ventana que el vnculo.
_top:
Abre el documento vinculado en la ventana completa del navegador, lo cual quiere decir que los marcos de la ventana desaparecern al abrir el vnculo en ella. Adems de estos destinos para los enlaces, tambin podrs utilizar los nombres de los distintos marcos de la pgina. Por ejemplo, si tuviramos un marco con el nombre marcoderecho, podramos insertar el enlace:
<a href="http://www.conalep.edu.mx" target="marcoderecho"> conalep en el marco derecho </a>
Este enlace cargara la pgina de conalep en el marco llamado marcoderecho. Podemos aadir todos estos nuevos destinos a cualquier elemento de la pgina que contenga algn enlace, ya sea texto, una imagen, un mapa de imagen, un elemento Flash, etc.
66
Gracias a todo esto podremos hacer que las barras de navegacin y el resto de enlaces funcionen a nuestro antojo, cargando unas u otras pginas en alguno de los marcos, en una ventana nueva, en toda la ventana, etc. Esta tarea puede resultar algo pesada, y al principio complicada, pero da muy buenos resultados finales. Pginas con sonido - Sonido en HTML I En su corta pero rpida vida, las pginas WEB han pasado a ser no ya unos meros documentos textuales a los que se puede acceder por Internet, sino unas verdaderas presentaciones multimedia, que combinan textos con imgenes, sonidos, videos y elementos de realidad virtual. Si el primer paso que se dio fue aadir imgenes a las pginas WEB, tanto estticas como dinmicas GIF animados), el siguiente paso consisti en introducir sonidos en las mismas, consiguiendo con ellos el apelativo de multimedia. Y nos referiremos en lo sucesivo cuando hablemos de sonido tanto a sonido sintetizado como a verdaderas grabaciones de audio, de calidad muy elevada. Ahora bien, aunque los navegadores han sido capaces de interpretar los ficheros de sonido adecuados desde hace ya algunas versiones, es cierto que la aplicacin de sonidos a las pginas WEB ha estado limitada desde siempre por el ancho de banda necesario en las conexiones a Internet para poder descargar de forma adecuada dichos ficheros, debido al tamao excesivo de los mismos. Otra de las limitaciones importantes que encontramos a la hora de incluir ficheros de sonido en nuestras pginas es diferente la implementacin que hacen de ellos los navegadores WEB ms usados. En efecto, no slo deberemos usar etiquetas HTML distintas para Internet Explorer que para Netscape Navigator, sino que a veces la forma misma de interpretar el sonido puede diferir de uno a otro navegador. Por ltimo, hay que destacar que a la hora de incluir ficheros de audio en nuestras pginas debemos ser conscientes que muchos de los formatos usados, sobre todo en grabaciones de calidad, precisan un plugin o programa especial para su reproduccin en el navegador cliente. Y si es cierto que actualmente hay ciertos plugins se han transformado casi en un estndar en Internet (como el de Real Audio o el de MP3), hay otros posibles que no es normal tener instalados, por lo que si incluimos ficheros de esos tipos obligaremos al usuario a tener que instalarlos, cosa a la que suele ser reacio.
<BGSOUND SRC="../gifs/cantina.wav" LOOP=infinite> <EMBED SRC="../gifs/cantina.wav" WIDTH=200 HEIGHT=55 AUTOSTART="true" LOOP="true" HIDDEN="true">
Formatos de sonido A la hora de incluir ficheros de sonido en nuestras pginas WEB debemos distinguir entre los que pueden ser directamente ejecutados por el navegador y aquellos que deben ser abiertos por un programa propio, que deber tener el usuario instalado en su equipo para poder reproducir el fichero. De forma general, podemos incluir en la WEB los siguientes tipos de ficheros de audio.
67
WAV (Wave form Audio File format): formato tpico de la casa Windows, de elevada calidad, usado en las grabaciones de CDs, que trabaja a 44 KHz y a 16 bits. Consta bsicamente de tres bloques: el de identificacin, el que especifica los parmetros del formato y el que contiene las muestras. Su principal inconveniente es el elevado peso de los ficheros, por lo que su uso queda limitado en Internet a la reproduccin de ruidos o frases cortas. La extensin de estos ficheros es .wav. Es soportado por Internet Explorer y Netscape 4x. AU (Audio File format): formato creado por la casa Apple para plataformas MAC, cuyos ficheros se guardan con la extensin .au MIDI formato de tabla de ondas, que no guardan el sonido a reproducir, sino un cdigo que nuestra tarjeta de sonido tendr que interpretar. Por ello, este tipo de ficheros no puede almacenar sonidos reales, como voces o msica real grabada; slo puede contener sonidos almacenables en tablas de ondas. Como contrapartida, los ficheros MIDI, que se guardan con extensin .mid, son de pequeo tamao, lo que los hace idneos para la WEB. Es soportado por Internet Explorer y Netscape 4x. MP3 (MPEG 1 Layer 3): desarrollado por el MPEG (Moving Picture Expert Group), obtiene una alta compresin del sonido y una muy buena calidad basndose en la eliminacin de los componentes del sonido que no estn entre 20 Hz y 16 KHz (los que puede or el ser humano normal). Tiene en cuenta el sonido envolvente (surround) y la extensin multilinge, y guarda los ficheros con la extensin .mp3, y permite configurar el nivel de compresin, consiguindose calidades similares a las del formato WAVE pero con hasta 10 veces menos tamao de fichero. Es soportado directamente slo por Internet Explorer 5.5 y superiores. MOD especie de mezcla entre el formato MIDI y el formato WAV, ya que por un lado almacena el sonido en forma de instrucciones para la tarjeta de sonido, pero por otro puede almacenar tambin sonidos de instrumentos musicales digitalizados, pudiendo ser interpretados por cualquier tarjeta de sonido de 8 bits. No es un formato estndar de Windows, por lo que su uso es ms indicado para sistemas Mac, Amiga o Linux. La extensin de los ficheros es .mod -Law Format de calidad similar al formato WAV, es original de las mquinas NeXt, y guarda sus ficheros con la extensin .au Real Audio de calidad media, aunque permite ficheros muy comprimidos, que guarda con extensin .rmp o .ra. Para su reproduccin hace falta tener instalado el plugin Real Audio. A la hora de trabajar con estos formatos de sonido, deberemos tener en cuenta las limitaciones en su uso, ya que muchos de ellos no pueden ser reproducidos ms que en sistemas operativos concretos, y an as, con plugins o programas especficos. En busca de la compatibilidad, si usamos Windows como sistema operativo conviene usar para ficheros musicales a reproducir directamente en el navegador los formatos WAV y MIDI, que son los ms compatibles. En cambio, si lo que deseamos es poder brindar a nuestros visitantes la opcin de navegar con msica ejecutable desde un programa externo, lo mejor es usar ficheros en formato MP3, ya que en la actualidad la mayora de los navegantes tienen instalado en su equipo algn programa reproductor adecuado, pudiendo
68
valer desde software incluido en Windows, como Windows Media Player, hasta aplicaciones externas, como Winamp. En este caso, basta colocar un enlace normal en nuestras pginas, apuntando al fichero de sonido. Como ejemplo, si queremos enlazar en nuestra pgina un fichero MP3, bastara con escribir:
<a href="sonidos/mp3.mp3" target="_blank"> Clic aqu para oir la msica. </a>
Con esto, al pinchar el usuario el enlace, se lanzar la aplicacin que tenga asociada con el tipo de fichero MP3, que depender de la configuracin interna de cada navegador y usuario. Un caso especial es Netscape 6x. Casi no admite directamente ningn tipo de formato de sonido incrustado en la pgina, al no venir configuradas por defecto las aplicaciones o plugins necesarios. Y en el caso de ficheros enlazados, Netscape 6x suele lanzar su propio reproductor, que suele ser de la casa AOL, precisando para la ejecucin una serie de pasos para darse de alta en esa compaa como usuario del software. Resumiendo: cada usuario tendr configurada su mquina de forma particular, soliendo prevalecer el ltimo software de sonido instalado, ya que estos programas suelen aduearse de ciertos tipos de ficheros para su ejecucin automtica. Entre las aplicaciones posibles de ejecucin de ficheros de audio, bien de forma directa o en forma de plug-in para los navegadores, destacan Windows Media Player, Real Player, Winamp, Quick time, etc. Incluir sonidos en la WEB. Una vez elegidos nuestros ficheros de sonido, es hora de incluirlos en nuestra pgina WEB. Lgicamente, para que un fichero de audio pueda ser reproducido por un navegador es necesario que su mquina tenga incluida una tarjeta de sonido y un par de altavoces. Existen diversas formas de incluir un fichero de audio en una pgina, formas que dependen del tipo de fichero y del navegador usado, y podemos usar diferentes etiquetas para cada una de ellas. BGSOUND La etiqueta bgsound incorpora sonidos de fondo en una pgina WEB, sonidos que se ejecutan automticamente al cargarse la pgina. Es una etiqueta propietaria de Microsoft, por lo que slo es interpretada por Internet Explorer, admitiendo los formatos de audio MID y WAV, aunque generalmente tambin acepta AU y MP3, en versiones actuales del navegador o mediante plugins de uso general. Su sintaxis general, con sus atributos ms importantes, es del tipo: <bgsound src="ruta_fichero" loop="l" balance="b" volume="v"></bgsound> Donde:
69
src="ruta_fichero" fija la ruta en la que se encuentra el fichero de audio a reproducir. La ruta puede ser
relativa a nuestro sistema de carpetas local, absoluta respecto el sistema de carpetas del servidor WEB o una URL completa que localice el fichero en Internet.
loop="l" determina el nmero de veces (l) que se debe ejecutar el fichero de audio. Si le damos el valor
infinite, el fichero se reproducir indefinidamente.

balance="b" determina el balance del sonido entre los dos altavoces del equipo, es decir, la potencia o
intensidad con que se oir en cada uno de ellos (derecho e izquierdo). Sus valores pueden estar entre -10,000 y +10,000, correspondiendo el valor 0 a un balance equilibrado entre los dos altavoces.
volume="v" fija el volumen al que se oir el sonido, y sus valores pueden variar entre -10,000 (mnimo) y 0
(mximo). No es soportado por los equipos MAC. Ejemplo: **-----<bgsound src="../sonidos/wav.wav" balance=0 volume=0></bgsound>
La etiqueta bgsound admite muchas ms propiedades (disabled, delay, id, class, controls, etc.). Asimismo, esta etiqueta es accesible en Internet Explorer mediante cdigo JavaScript, pudiendo modificar en tiempo real sus propiedades balance, loop, src, y volume, aunque sta ltima slo es accesible en plataformas PC. EMBED Netscape Navigator implement la etiqueta embed para incorporar ficheros de audio. Es sta una etiqueta de carcter general, que se usa para la inclusin en las pginas WEB de todos aquellos archivos ajenos al navegador y que necesitan por lo tanto la ejecucin de algn plugin para su interpretacin. Paradjicamente, Internet Explorer asumi despus el uso de esta etiqueta para la inclusin de ficheros de audio, para llegar a interpretarla mejor y ampliarla con ms atributos y propiedades, de tal forma que la ejecucin de sonidos con embed es actualmente ms cmoda con este navegador, al incorporar la suite de Microsoft sus propios plugins para la interpretacin de los diferentes formatos de audio. En cambio, si usamos Netscape Navigator nos encontraremos en muchos casos con un fallo en la reproduccin o con un engorroso mensaje de necesidad de algn plugin especial (sobre todo en las versiones 6x), lo que nos obligar a visitar la pgina de Netscape para su descarga e instalacin, que muchas veces no ser efectiva. Sea como sea, hay que indicar que esta etiqueta nos va a incluir en la pgina WEB un objeto especial, una especie de consola de mando, denominada Crescendo, que consta de tres botones, similares al de cualquier reproductor de audio: un botn Play, para comenzar la reproduccin (si no est establecida a automtica), un botn Pause, para detenerla momentneamente y un botn Stop, para detenerla definitivamente (puesta a cero). Esta consola es diferente segn el navegador usado; en el caso de Internet Explorer se muestra la tpica consola de Windows Media, cuyo tamao podemos configurar, mientras que en Netscape se muestra una consola propia, de tamao fijo definido.
70
La sintaxis general de la etiqueta embed es del tipo: <embed atributo1="valor1" atributo2="valor2"...atributoN="valorN"></embed> Y en el caso que nos ocupa, de la inclusin de ficheros de audio, los atributos podemos dividirlos en dos tipos: 1. Atributos referentes al sonido:
src="ruta_fichero", que fija la ruta en la que se encuentra el fichero de audio a reproducir. La ruta puede
ser relativa a nuestro sistema de carpetas local, absoluta respecto el sistema de carpetas del servidor WEB o una URL completa que localice le fichero en Internet.
loop="l/true/false", que determina el nmero de veces que se debe ejecutar el fichero de audio. Los
valores admitidos son l (nmero entero de veces), true (infinitas veces) y false (slo una vez). Slo es reconocida por Netscape Navigator.
playcount="n", que define el nmero de veces (n) que se debe ejecutar en fichero de audio en el caso de
Internet Explorer.
type="tipo_fichero", atributo importante, que declara el tipo de fichero de audio que estamos usando,
con lo que el navegador WEB puede ejecutar el programa o plugin adecuado para la reproduccin del fichero. Puede ser audio/midi, audio/wav, etc.
autostart="true/false", que determina si el fichero de audio debe empezar a reproducirse por s slo al
cargarse la pgina o si por el contrario ser preciso la actuacin del usuario (o de cdigo de script) para que comience la audicin.
pluginspage="URL", que establece, en caso de ser necesario un plugin especial para reproducir el fichero, la
pgina WEB donde se puede descargar el mismo. Slo se activa en el caso de que el navegador no sea capaz de reproducir el fichero por s mismo, y es soportada tan slo por Netscape Navigator.
name="nombre", que asigna un nombre identificador (debe ser nico en la pgina) a una etiqueta embed
determinada, con objeto de ser accedida luego por lenguajes de script.

volume="v", que determina el volumen de reproduccin del sonido, y que puede variar entre 0 y 100. Es slo
soportada por Netscape Navigator, que en la consola muestra el valor establecido en su indicador de volumen, siendo su valor por defecto 50. En caso de Internet Explorer, el valor del volumen por defecto es 50 en plataformas PC, y 75 en MAC, siendo necesario actuar sobre el control de volumen de la consola para modificarlo. 2. Atributos referentes a la consola:
hidden="true/false", que establece si la consola va a ser visible ( false) o no (true). Es ste un aspecto
polmico, ya que si ocultamos la consola obligamos al usuario a or nuestro fichero, sin posibilidad de detenerlo
71
ni de modificar el volumen, y si la mostramos estaremos incrustando en la pantalla un objeto que muchas veces nos romper el esquema de diseo de nuestra pgina. Queda determinar su uso en cada caso concreto.
width="w", que determina el ancho visible de la consola, en pixels. height="h", que determina el alto
visible de la consola, en pixels. Estos atributos son tambin muy importantes, caso de que hayamos establecido hidden= "false", ya que de su valor va a depender la correcta visualizacin de la consola. En el caso de Internet Explorer, que muestra un logo de Windows Media sobre los controles, el tamao mnimo aceptable debe ser de 140x100 pixels, ya que si no la consola saldr deformada en exceso o recortada. Y en el caso de Netscape Navigator, deberemos asignar unos valores de 145x60 pixels, que es lo que ocupa la consola; si ponemos un tamao menor, la consola ser recortada, perdiendo funcionalidades, y si asignamos un tamao mayor, aparecern espacios grises alrededor de la consola, afeando el aspecto de la pgina. Si no especificamos estos atributos y tampoco hidden, nos aparecern en la pgina tan slo los mandos de la consola, sin logotipos aadidos (Internet Explorer) o la consola recortada (Netscape Navigator).
align="top/bottom/center/baseline/left/right/texttop/middle/absmiddle/absbotom" ,
anlogo al de la etiqueta IMG, define la alineacin horizontal o vertical de la consola respecto de los elementos de la pgina.
hspace="hs", que establece la separacin horizontal, vspace="vs", que establece la separacin vertical, en pixels, entre la consola y los elementos de la pgina que la rodean. Anloga a sus equivalentes de la etiqueta
IMG. Estos son los atributos principales, aunque podemos encontrar referencias de otros admitidos, aunque no suelen ser operativos en la realidad, ya que no suelen funcionar de forma correcta o son especficos de Netscape (como toda la serie de atributos que configuran los controles de la consola. Ejemplo sin consola:
<embed src="../sonidos/mid.mid" hidden="true" type="audio/midi" autostart="true"> </embed>
Ejemplo con consola:

<embed src="../sonidos/mid.mid" hidden="false" type="audio/midi" autostart="false" width="150" height="100"> </embed>
La etiqueta OBJECT. Con objeto de normalizar la inclusin de ficheros no nativos en los navegadores WEB se decidi sustituir las diferentes etiquetas que realizaban este papel (APPLET, BGSOUND, EMBED, etc.), y que no pertenecan a los estndares WEB, por una etiqueta general, que fuera capaz de incrustar en el navegador todo tipo de ficheros. La etiqueta elegida en el estndar HTML 4.0 fue OBJECT, a la que se dot de suficientes atributos y flexibilidad para poder realizar correctamente su trabajo. Debido a esto, la propuesta ha sido usar la etiqueta object tambin para incluir ficheros de audio de todo tipo en las pginas WEB.
72
Ahora bien, la aceptacin e implementacin que la misma ha tenido vara segn el navegador en particular, as como en funcin del objeto a incrustar. De este forma, Internet Explorer a realizado su propia implementacin de la etiqueta object, incluyendo en ella referencias a filtros y componentes ActiveX especficos para los ficheros de audio. Por su lado, los navegadores Netscape no soportan correctamente esta etiqueta para ficheros de este tipo. Restringindonos a Internet Explorer, la polmica sigue, ya que en diferentes manuales nos encontraremos diferentes formas de incrustar sonidos mediante object, unas que funcionan bien, y otras que no. Por qu sucede esto? Yo creo que porque Microsoft ha ido usando la etiqueta object para implementar todo un gran conjunto de componentes propios, que adems han ido adaptndose a las diferentes versiones de Internet Explorer. Como regla general, vlida no slo para incrustar ficheros de sonido, sino tambin para otros tipos, la etiqueta object va a definir un objeto o componente externo encargado de la reproduccin del fichero, que en el caso de Internet Explorer suele ser algn tipo de control ActiveX. Mediante object se instancia el objeto, se declara su URL y sus principales propiedades generales, y mediante un conjunto de etiquetas especiales, PARAM, se le van pasando los valores que necesita para su correcto funcionamiento o para su configuracin deseada. La sintaxis general de la etiqueta object, para el caso de ficheros de sonido, es del tipo: <object atributo1="valor1" atributo2="valor2" ... atributoN="valorN"> <param name="nombre" value="valor"> <param name="nombre" value="valor"> ... </object> Los principales atributos de object, en referencia a ficheros de audio, son:
classid="identificador_objeto", que fija la URL del objeto o componenteexterno necesario para
reproducir el fichero de audio, y la implementacin CLSID de los controles ActiveX necesarios.

type="tipo_fichero", atributo importante, que declara el tipo de fichero de audio que estamos usando. width="w", que determina el ancho visible de la consola, en pixels. height="h", que determina el alto visible de la consola, en pixels. align="top/bottom/center/baseline/left/right/texttop/middle/absmiddle/absbotom",
anlogo al de la etiqueta IMG, define la alineacin horizontal o vertical de la consola respecto de los elementos de la pgina.
hspace="hs", que establece la separacin horizontal, vspace="vs", que establece la separacin vertical, en pixels, entre la consola y los elementos de la pgina que la rodean. Anloga a sus equivalentes de la etiqueta
IMG.
73
autostart="true/false", que determina si el fichero de audio debe empezar a reproducirse por s slo al
cargarse la pgina o si por el contrario ser preciso la actuacin del usuario (o de cdigo de script) para que comience la audicin.
standby="mensaje", que presenta en pantalla un mensaje al usuario mientras el fichero se carga.
En cuanto a los elementos param, los ms importantes son:

param name="FileName" value="ruta_fichero", determina la ruta o URL del fichero de audio a
reproducir. No es necesario utilizar slo ficheros WAV o MID, pudiendo reproducirse tambin ficheros MP3 o Real Audio. El reproductor del primero lo incluye Explorer en ActiveMovie (componente de Windows Media).
param name="autostart" value="true/false", indica al navegador si se debe empezar a reproducir el
sonido automticamente al cargar la pgina o si por el contrario ser preciso que el usuario pulse el botn Play para ello. No son estos todos los atributos y parmetros posibles. Es ms, en cuanto nos metemos en componentes Microsoft, podemos encontrarnos multitud de configuraciones posibles, que nos van a permitir fijar muchos aspectos de los mismos. Dejo a cada uno la posibilidad de profundizar en el estudio de aquellos componentes y propiedades que necesite, pero sabiendo que con los elementos vistos arriba tenemos ms que suficiente para presentar un fichero de audio en nuestra pgina WEB. Ejemplo:
<object classid="CLSID:05589FA1-C356-11CE-BF01-00AA0055595A" width="150" height="175" type="audio/midi"> <param name="FileName" value="../sonidos/xfiles.mid"> <param name="autostart" value="true"> </object>
Pginas con vdeo Netscape implementa en la versin 3.0 el vdeo. En principio, puede utilizarse cualquier formato de vdeo, aunque los ms habituales suelen ser los AVI y los MPEG, pero dentro de stos, existen muchas versiones diferentes. El que se puedan ver o no, depender de que el formato utilizado sea compatible con nuestro reproductor multimedia. Siempre que se incluyan ficheros de vdeo, es buena idea acompaarlo de los "codecs" necesarios para el reproductor. Los "codecs" son unos controladores que se instalan en tu mquina y permiten que tu reproductor multimedia pueda decodificar correctamente los distintos formatos de vdeo que existen, y que son muchos. Suelen ser imprescindibles sobre todo para los formatos AVI, aunque tambin pueden ser necesarios para algunos formatos MPEG, como el MPEG3, MPEG4 y otros. El que un formato de vdeo se vea en tu mquina sin problemas, no significa que ocurra lo mismo en cualquier mquina, incluso con formatos de los ms habituales. La gente suele tener sus mquinas con mucha "basura", y es posible que algn programa (sobre todo juegos o enciclopedias) haya eliminado o cambiado algunos decodificadores por otros. Los formatos pueden cambiar segn la cmara o la placa de vdeo con que han sido generados los ficheros. Cada fabricante suele proporcionar los "codecs" para sus productos.
74
Otro problema de los ficheros digitales de vdeo es el gran tamao de los mismos, ya que en la prctica unos pocos segundos de vdeo con sonido puede representar un fichero de varios Mb. (mega bytes). Se deben poner muestras de pequeo tamao para que el visitante de nuestra pgina pueda probar rpidamente si le interesa el fichero o no, y al lado la versin completa indicando su tamao y el " codec" que debe utilizarse. Una alternativa, aunque mucho menos vistosa, es no programar la aparicin de las consolas de reproduccin en la pgina, y sencillamente escribir links a los ficheros de video con el elemento <A>. Esto permite al navegador lanzar un mensaje preguntando qu se debe hacer con el fichero, si reproducirlo (si se puede) o guardarlo, lo que permite al usuario buscar el programa necesario ms tarde, y evita los molestos mensajes de error. Al igual que con el sonido, se utiliza el elemento EMBED, aunque con menos atributos: SRC, HEIGHT, WIDTH, AUTOSTART, LOOP y ALIGN; todos ellos funcionan de forma parecida a los del sonido. En este ejemplo se utilizan casi todos: <EMBED SRC="colon.avi" HEIGHT=300 WIDTH=400 AUTOSTART=TRUE LOOP=FALSE> Analicmoslos brevemente:
SRC Indica dnde est el fichero de vdeo. HEIGHT (alto) y WIDTH (ancho) no pueden omitirse, ya que sus
valores por defecto no permiten ver ninguna imagen real. Los tamaos estndar de los ficheros .AVI son 90x120, 120x160, 180x240, 240x320, 300x400, etc., las medidas deben conservar las proporciones de la televisin, es decir 4:3. Hay que tener cuidado a la hora de poner el valor de estos atributos, ya que si no coinciden con los que realmente tiene la imagen, sta ser recortada (no redimensionada) de derecha a izquierda y de abajo a arriba. El siguiente atributo es AUTOSTART, con dos valores posibles: FALSE (por defecto) y TRUE que como puedes suponer, sirve para que el vdeo arranque nada ms cargarse el fichero. Si estableces FALSE, entonces el vdeo se activa al hacer clic con el ratn sobre l, lo mismo que para repetir el pase una vez finalizado. Para hacer que el vdeo se repita continuamente o se pare despus de un pase, tenemos el atributo LOOP con dos valores: FALSE (por defecto) y TRUE. Por ltimo tenemos el atributo ALIGN y sus valores TOP, BOTTOM, CENTER, LEFT, RIGHT, MIDDLE y TEXTTOP que funcionan igual que sus respectivos del elemento IMG, es decir, que no tiene efectos sobre el vdeo, sino sobre su alineacin con el texto de la pgina.
75
1.3 Construye hojas de estilo en cascada (CSS) de acuerdo con las especificaciones del World Wide Web Consortium (W3C).
El lenguaje HTML est limitado a la hora de aplicarle forma a un documento. Esto es as porque fue concebido para otros usos (cientficos sobre todo), distinto a los actuales, mucho ms amplios. Para solucionar estos problemas los diseadores han utilizado tcnicas tales como la utilizacin de tablas imgenes transparentes para ajustarlas, utilizacin de etiquetas que no son estndares del HTML y otras. Estas "trampas" han causado a menudo problemas en las pginas a la hora de su visualizacin en distintas plataformas. Adems, los diseadores se han visto frustrados por la dificultad con la que, aun utilizando estos trucos, se encontraban a la hora de maquetar las pginas, ya que muchos de ellos venan maquetando pginas sobre el papel, donde el control sobre la forma del documento es absoluto. Finalmente, otro antecedente que ha hecho necesario el desarrollo de esta tecnologa consiste en que las pginas web tienen mezclado en su cdigo HTML el contenido del documento con las etiquetas necesarias para darle forma. Esto tiene sus inconvenientes ya que la lectura del cdigo HTML se hace pesada y difcil a la hora de buscar errores o depurar las pginas. Aunque, desde el punto de vista de la riqueza de la informacin y la utilidad de las pginas a la hora de almacenar su contenido, es un gran problema que estos textos est en mezclados con etiquetas incrustadas para dar forma a estos: se degrada su utilidad. Principales caractersticas del lenguaje, su potencia y sus posibilidades. El modo de funcionamiento de las CSS consiste en definir, mediante una sintaxis especial, la forma de presentacin que le aplicaremos a: Un web entero, de modo que se puede definir la forma de todo el web de una sola vez. Un documento HTML o pgina, se puede definir la forma, en un pequeo trozo de cdigo en la cabecera, a toda la pgina. Una porcin del documento, aplicando estilos visibles en un trozo de la pgina. Una etiqueta en concreto, llegando incluso a poder definir varios estilos diferentes para una sola etiqueta. Esto es muy importante ya que ofrece potencia en nuestra programacin. Podemos definir, por ejemplo, varios tipos de prrafos: en rojo, en azul, con mrgenes, sin ellos... La potencia de la tecnologa salta a la vista. Pero no solo se queda aqu, ya que adems esta sintaxis CSS permite aplicar al documento formato de modo mucho ms exacto. Si antes el HTML se nos quedaba corto para maquetar las pginas y tenamos que utilizar trucos para conseguir nuestros efectos, ahora tenemos muchas ms herramientas que nos permiten definir esta forma: Podemos definir la distancia entre lneas del documento. Se puede aplicar identado a las primeras lneas del prrafo. Podemos colocar elementos en la pgina con mayor precisin, y sin lugar a errores.
76
Y mucho ms, como definir la visibilidad de los elementos, margenes, subrayados, tachados... Y seguimos mostrndonos ventajas, ya que si con el HTML tan slo podamos definir atributos en las pginas con pixeles y porcentajes, ahora podemos definir utilizando muchas ms unidades como: Pixels (px) y porcentaje (%), como antes. Pulgadas (in) Puntos (pt) Centmetros (cm) Navegadores que lo soportan
Esta tecnologa es bastante nueva, por lo que no todos los navegadores la soportan. En concreto, slo los navegadores de Netscape versiones de la 4 en adelante y de Microsoft a partir de la versin 3 son capaces de comprender los estilos en sintaxis CSS. Adems cabe destacar que no todos los navegadores implementan las mismas funciones de hojas de estilos, por ejemplo, Microsoft Internet Explorer 3 no soporta todo lo relativo a capas. Esto quiere decir que debemos de usar esta tecnologa con cuidado, ya que muchos usuarios no podrn ver los formatos que apliquemos a las pginas con CSS. As pues, utilizad las hojas de estilos cuando estas no vayan a suponer un problema.
Aplicaciones de las Hojas de Estilo en cascada. CSS sirve para definir el aspecto de las pginas web, eso ya debe haber quedado claro. No obstante, hay diferentes niveles a los que podemos aplicar los estilos y es algo que vamos a describir ahora. Hemos denominado a este apartado los diferentes usos de las CSS y relata justamente eso, los distintos niveles a los que podemos usar las Hojas de Estilo, que van desde definir los estilos de manera especfica, para un pequeo fragmento de una pgina, hasta los estilos para todo un sitio web completo. Todo esto pasando por diversos otros niveles que resultarn de mucha utilidad tambin en nuestro da a da como diseadores. Vamos por orden, describiendo los puntos desde el ms especfico al ms general, de manera que tambin iremos aumentando la dificultad e importancia de los distintos usos. Pequeas partes de la pgina Para definir estilos en secciones reducidas de una pgina se utiliza la etiqueta <SPAN>. Con su atributo style indicamos en sintaxis CSS las caractersticas de estilos. Lo vemos con un ejemplo, pondremos un prrafo en el que determinadas palabras las vamos a visualizar en color verde.
<p> Esto es un prrafo en varias palabras <SPAN style="color:green">en color verde</SPAN>. resulta muy fcil.
77
</p>
Que tiene como resultado: Esto es un prrafo con varias palabras en color verde. Estilo definido para una etiqueta De este modo podemos hacer que toda una etiqueta muestre un estilo determinado. Por ejemplo, podemos definir un prrafo entero en color rojo y otro en color azul. Para ello utilizamos el atributo style, que es admitido por todas las etiquetas del HTML (siempre y cuando dispongamos de un navegador compatible con CSS).
<p style="color:#990000">
Esto es un prrafo de color rojo.

</p> <p style="color:#000099"> Esto es un prrafo de color azul. </p>
Que tiene como resultado: Esto es un prrafo de color rojo. Esto es un prrafo de color azul. Estilo definido en una parte de la pgina Con la etiqueta <DIV> podemos definir secciones de una pgina y aplicarle estilos con el atributo style, es decir, podemos definir estilos de una vez a todo un bloque de la pgina.
<div style="color:#000099; font-weight:bold"> <h3>Estas etiquetas van en <i>azul y negrita</i></h3> <p> Seguimos dentro del DIV, luego permanecen los etilos </p> </div>
Que tiene como resultado: Estas etiquetas van en azul y negrita Estilo definido para toda una pgina Podemos definir, en la cabecera del documento, estilos para que sean aplicados a toda la pgina. Es una manera muy cmoda de darle forma al documento y muy potente, ya que estos estilos sern seguidos en toda la pgina y nos ahorraremos as muchas etiquetas HTML que apliquen forma al documento. Adems, si deseamos cambiar los estilos de la pgina lo haremos de una sola vez.
78
Este ejemplo es ms complicado, puesto que se utiliza la sintaxis CSS de manera ms avanzada. Pero no te preocupes puesto que con los ejemplos irs aprendiendo su uso y ms tarde comentaremos la sintaxis en profundidad. En el ejemplo vemos que se utiliza la etiqueta <STYLE> colocada en la cabecera de la pgina para definir los distintos estilos del documento. A grandes rasgos, entre de <STYLE> y </STYLE>, se coloca el nombre de la etiqueta que queremos definir los estilos y entre llaves -{}- colocamos en sintaxis CSS las caractersticas de estilos.
<html> <head> <title>Ejemplo de estilos para toda una página</title> <STYLE type="text/css"> <!-H1 {text-decoration: underline; text-align:center} P {font-Family:arial,verdana; color: white; background-color: black} BODY {color:black;background-color: #cccccc; text-indent:1cm} // --> </STYLE> </head> <body> <h1>Página con estilos</h1> Bienvenidos... <p>Siento ser tan hortera, pero esto es un ejemplo sin más importancia</p> </body> </html>
Como se puede apreciar en el cdigo, hemos definido que la etiqueta <H1> se presentar Subrayado Centrada Tambin, por ejemplo, hemos definido que el cuerpo entero de la pgina (etiqueta <BODY>) se les aplique los estilos siguientes: Color del texto negro Color del fondo grisceo Margen lateral de 1 centmetro Caber destacar que si aplicamos estilos a la etiqueta <BODY>, estos sern heredados por el resto de las etiquetas del documento. Esto es as siempre y cuando no se vuelvan a definir esos estilos en las siguientes etiquetas, en cuyo caso el estilo de la etiqueta ms concreta ser el que mande. Puede verse este detalle en la etiqueta <P>, que tiene definidos estilos que ya fueron definidos para <BODY>. Los estilos que se tienen en cuenta son los de la etiqueta <P>, que es ms concreta. Por ltimo, ha de apreciarse los comentarios HTML que engloban toda la declaracin de estilos: . Estos comentarios se utilizan para que los navegadores antiguos, que no comprenden la sintaxis
79
CSS, no incluyan ese texto en el cuerpo de la pgina. Si no se pusiera, los navegadores antiguos (por ejemplo Netscape 3) escribiran ese "feo cdigo" en la pgina. Estilo definido para todo un sitio web Una de las caractersticas ms potentes de la programacin con hojas de estilos consiste en que, de una vez, podemos definir los estilos de todo un sitio web. Esto se consigue creando un archivo donde tan slo colocamos las declaraciones de estilos de la pgina y enlazando todas las pginas del sitio con ese archivo. De este modo, todas las pginas comparten una misma declaracin de estilos y, por tanto, si la cambiamos, cambiarn todas las pginas. Con las ventajas aadidas de que se ahorra en lneas de cdigo HTML (lo que reduce el peso del documento) y se evita la molestia de definir una y otra vez los estilos con el HTML, tal como se coment anteriormente. Veamos ahora cmo el proceso para incluir estilos con un fichero externo. 1- Creamos el fichero con la declaracin de estilos Es un fichero de texto normal, que puede tener cualquier extensin, aunque le podemos asignar la extensin .css para aclararnos qu tipo de archivo es. El texto que debemos incluir debe ser escrito exclusivamente en sintaxis CSS, es decir, sera errneo incluir cdigo HTML en l: etiquetas y dems. Podemos ver un ejemplo a continuacin.
P { font-size : 12pt; font-family : arial,helvetica; font-weight : normal; } H1 { font-size : 36pt; font-family : verdana,arial; text-decoration : underline; text-align : center; background-color : Teal; } TD { font-size : 10pt; font-family : verdana,arial; text-align : center; background-color : 666666; } BODY { background-color : #006600; font-family : arial; color : White; }
2- Enlazamos la pgina web con la hoja de estilos Para ello, vamos a colocar la etiqueta <LINK> con los atributos rel="STYLESHEET" indicando que el enlace es con una hoja de estilos
80
type="text/css" porque el archivo es de texto, en sintaxis CSS href="estilos.css" indica el nombre del fichero fuente de los estilos Veamos una pgina web entera que enlaza con la declaracin de estilos anterior:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html> <head> <link rel="STYLESHEET" type="text/css" href="estilos.css"> <title>Página que lee estilos</title> </head> <body> <h1>Página que lee estilos</h1> Esta página tiene en la cabecera la etiqueta necesaria para enlazar con la hoja de estilos. Es muy fácil. <br> <br> <table width="300" cellspacing="2" cellpadding="2" border="0"> <tr> <td>Esto está dentro de un TD, luego tiene estilo propio, declarado en el fichero externo</td> </tr> <tr> <td>La segunda fila del TD</td> </tr> </table> </body> </html>
Reglas de importancia en los estilos Los estilos se heredan de una etiqueta a otra, como se indic anteriormente. Por ejemplo, si tenemos declarado en el <BODY> unos estilos, por lo general, estas declaraciones tambin afectarn a etiquetas que estn dentro de esta etiqueta, o lo que es lo mismo, dentro de todo el cuerpo. En muchas ocasiones ms de una declaracin de estilos afecta a la misma porcin de la pgina. Siempre se tiene en cuenta la declaracin ms particular. Pero las declaraciones de estilos se pueden realizar de mltiples modos y con varias etiquetas, tambin entre estos modos hay una jerarqua de importancia para resolver conflictos entre varias declaraciones de estilos distintas para una misma porcin de pgina. Se puede ver a continuacin esta jerarqua, primero ponemos las formas de declaracin ms generales, y por tanto menos respetadas en caso de conflicto: Declaracin de estilos con fichero externo. (Para todo un sitio web) Declaracin de estilos para toda la pgina. (Con la etiqueta <STYLE> en la cabecera de la pgina) Definidos en una etiqueta en concreto. (Utilizando el atributo style en la etiqueta en cuestin) Declaracin de estilo para una porcin pequea del documento. (Con la etiqueta <SPAN>) Ya vimos cmo incluir estilos en la pgina, de todas las maneras posibles e hicimos un repaso con la lista anterior. Ahora ests en condiciones de empezar a usar las hojas de estilo en cascada para mejorar tus pginas y aumentar la productividad de tu trabajo. Pero estate atento a los siguientes captulos donde aprenders las
81
lecciones que te faltan para dominar bien la materia: conocer la sintaxis, los distintos atributos de estilos y otras cosas que mejorarn tus pginas. Otra manera de definir estilos en un archivo externo
Veamos ahora otra manera de importar una declaracin externa de estilos CSS: @import
url("archivo_a_importar.css"), que se utiliza para importar unas declaraciones de estilos guardadas

en la ruta que se indica entre parntesis. (Las comillas son opcionales, pero los parntesis son obligatorios, por lo menos, en Explorer). Se debe incluir en la declaracin de estilos global a una pgina, es decir entre las etiquetas <style
type="text/css"> y </style>, que se colocan en la cabecera del documento.

Es importante sealar que la sentencia de importacin del archivo CSS se debe escribir en la primera lnea de la declaracin de estilos, algo parecido al cdigo siguiente.
<style type="text/css"> @import url ("estilo.css"); body{ background-color:#ffffcc; } </style>

El funcionamiento es el mismo que si escribisemos todo el fichero a importar dentro de las etiquetas de los estilos, con la salvedad de que, si redefinimos dentro del cdigo HTML (entre las etiquetas </style>) estilos que haban quedado definidos en el archivo externo, los que se aplicarn sern los que hayamos redefinido. As, en el ejemplo anterior, aunque hubisemos definido en estilo.css un color de fondo para la pgina, el color que prevalecera sera el definido a continuacin de la importacin: #ffffcc La diferencia entre este tipo de importacin del tipo y la que hemos visto anteriormente:
<link rel="stylesheet" type="text/css" href="hoja.css">

Es que @import url ("estilo.css") se suele utilizar cuando hay unas pautas bsicas en el trabajo con los estilos (que se definen en un archivo a importar) y unos estilos especficos para cada pgina, que se definen a continuacin, dentro del cdigo HTML entre las etiquetas </style>, como es el caso del ejemplo visto anteriormente.
Sintaxis y unidades CSS La sintaxis es bastante sencilla y repetitiva. Bsicamente se trata de colocar selectores de elementos (por ahora slo hemos visto cmo seleccionar etiquetas, para asignarles estilos, pero ms adelante conoceremos otros selectores), seguidos de los valores o atributos de estilo que queramos aplicar a dichos elementos.
82
A lo largo del manual aprenderemos ms sobre la sintaxis de CSS, as como los distintos atributos disponibles para definir el formato o forma con la que se deben mostrar los contenidos. No obstante, quiero dar en este momento unas reglas bsicas que debemos saber sobre la sintaxis de CSS, que nos servirn para entender mejor nuestros ejemplos e ir avanzando en el conocimiento de las hojas de estilo en cascada. Veamos entonces estas reglas bsicas sobre la sintaxis CSS: Para definir un estilo se utilizan atributos como font-size,text-decoration... seguidos de dos puntos y el valor que le deseemos asignar. Podemos definir un estilo a base de definir muchos atributos separados por punto y coma. Ejemplo:
font-size: 10pt; text-decoration: underline; color: black; (el ltimo punto y coma de la
lista de atributos es opcional) Para definir el estilo de una etiqueta se escribe la etiqueta seguida de la lista de atributos encerrados entre llaves. Ejemplo:
H1{text-align: center; color:black}
Los valores que se pueden asignar a los atributos de estilo se pueden ver en una tabla en el siguiente captulo. Muchos estos valores son unidades de medida (Unidades CSS), por ejemplo, el valor del tamao de un margen o el tamao de la fuente. Las unidades de medida CSS se pueden clasificar en dos grupos, las relativas y las absolutas. Ms la posibilidad de expresar valores en porcentaje. Relativas: Se llaman as porque son unidades relativas al medio o soporte sobre el que se est viendo la pgina web, que dependiendo de cada usuario puede ser distinto, puesto que existen muchos dispositivos que pueden acceder a la web, como ordenadores o telfonos mviles. En principio las unidades relativas son ms aconsejables, porque se ajustarn mejor al medio con el que el usuario est accediendo a nuestra web. Son las siguientes: Fuente actual: em la unidad em es relativa a la fuente actual con la que se est trabajando por defecto en el sistema del usuario. Por ejemplo si un visitante tiene configurada la fuente por defecto en 12 puntos, 1em ser igual a 12 puntos y 2em ser igual a 24 puntos.
Altura de la letra "x": ex 1ex ser igual a la altura de la letra x, segn la fuente actual del usuario. La altura de la letra x generalmente es la mitad de la de la fuente normal. Pxeles: px Un pixel es un punto en la pantalla del dispositivo. Dependiendo de la resolucin de la
83
pantalla, un pxel puede ser mayor o menor.
Absolutas: Las unidades absolutas son medidas fijas, que deberan verse igual en todos los dispositivos. Como los centmetros, que son una convencin de medida internacional. Pese a que en principio pueden parece ms tiles, puesto que se veran en todos los sistemas igual, tienen el problema de adaptarse menos a las distintas particularidades de los dispositivos que pueden acceder a una web y restan accesibilidad a nuestro web. Puede que en tu ordenador 1 centmetro sea una medida razonable, pero en un mvil puede ser un espacio exageradamente grande, puesto que la pantalla es mucho menor. Se aconseja utilizar, por tanto, medidas relativas. Puntos pt Un punto es 1/72 pulgadas in cm mm pc Una pica son 12 puntos.
Pulgadas Centmetros Milmetros Picas
Porcentaje: el porcentaje se utiliza para definir una unidad en funcin de la que est definida en un momento dado. Imaginemos que estamos trabajando en 12pt y definimos una unidad como 150%. Esto sera igual al 150% de los 12pt actuales, que equivale a 18pt. Porcentaje % Por ejemplo 120% es el 120 por cien de la unidad que estuviera anteriormente.
Los colores se expresan con valores RGB, igual que los que conocemos para los colores HTML. Con la salvedad que un color se puede especificar tambin con tres nmeros hexadecimales, en lugar de 6, como era obligatorio en HTML. Por ejemplo #fff equivaldra a #ffffff, o #123 sera #112233. Adems, los colores se pueden especificar tambin en valores RGB decimales, con la notacin rgb(r, g, b), siendo los valores de r, g, b nmeros entre 0 y 255, por ejemplo rgb(100,0,255). Otra notacin posible es rgb(r%,g%,b%), siendo cada uno de los r%, g%, b% un valor entre 0 y 100, por ejemplo rgb(100%,50%,0%), que sera todo de rojo, la mitad de verde y cero de azul. Otro tipo de valores que se pueden utilizar en las hojas de estilo en cascada son las URL, que sirven para especificar rutas hacia elementos como imgenes a colocar en fondos de elementos. Las URL en CSS se especifican con la notacin url(valor), siendo valor la URL a la que queremos dirigirnos, que puede ser absoluta o relativa. Si es relativa, el navegador la interpreta desde el documento CSS donde
84
estamos, si es que es un archivo CSS, o desde el documento HTML donde estamos, si es que los estilos los estamos colocando directamente en el archivo HTML. a URL se puede indicar con comillas dobles, simples o sin comillas. Por ejemplo:
url(http://www.desarrolloweb.com/images/miimagen.gif) url("/images/otraimagen.jpg")
Notacin de colores CSS Con CSS se puede especificar colores para cada elemento HTML de la pgina, incluso hay elementos que podran admitir varios colores, como el color de fondo o el color del borde. Pero bueno, vamos a ver ahora es las distintas maneras de escribir un color en una declaracin CSS. Porque lo ms habitual es que especifiquemos un color con su valor RGB, de una manera similar a como aprendimos a definir colores en HTML. Pero en CSS tenemos otras maneras de declarar colores que pueden interesarnos, como mnimo para poder entender el cdigo CSS cuando lo veamos escrito. Notacin hexadecimal RGB Esta notacin es la que ya conocemos. Se especifican los tres valores de color (rojo, verde y azul) con valores en hexadecimal entre 00 y FF.
background-color: #ff8800;
Notacin hexadecimal abreviada Esta notacin es muy parecida a la anterior, pero permite abreviar un poco la declaracin del color, indicando slo un nmero para cada valor rojo, verde y azul. Por ejemplo, para especificar el color de antes (#ff8800) podramos haber escrito:
background-color: #f80;
Nombre del color Tambin podemos definir un color por su nombre. Los nombres de colores son en ingls, los mismos que sirven para especificar colores con HTML.
color: red; border-color: Lime;
Notacin de color con porcentajes de RGB Se puede definir un color por los distintos porcentajes de valores RGB. Si todos los valores estn al 100% el color es blanco. Si todos estn al 0% obtendramos el negro y con combinaciones de distintos porcentajes de RGB obtendramos cualquier matiz de color.
color: rgb(33%, 0%, 0%);
85
Notacin por valores decimales de RGB, de 0 a 255 De una manera similar a la notacin por porcentajes de RGB se puede definir un color directamente con valores decimales en un rango desde 0 a 255.
color: rgb(200,255,0);
De entre todas estas notaciones podemos utilizar la que ms nos interese o con la que nos sintamos ms a gusto. Nosotros en nuestros ejemplos venimos utilizando la notacin hexadecimal RGB por habernos acostumbrado a ella en HTML. Color transparente Para finalizar, podemos comentar que tambin existe el color transparente, que no es ningn color, sino que especfica que el elemento debe tener el mismo color que el fondo donde est. Este valor, transparent, sustituye al color. Podemos indicarlo en principio slo para fondos de elementos, es decir, para el atributo background-color.
background-color: transparent;
Atributos de las hojas de estilo Tanto para practicar en tu aprendizaje como para trabajar con las CSS lo mejor es disponer de una tabla donde se vean los distintos atributos y valores de estilos que podemos aplicarle a las pginas web. Aqu puedes ver la tabla de los atributos CSS ms fundamentales para aplicar estilos a elementos bsicos, que te vendr perfectamente para comenzar con las CSS. Nombre atributo del Posibles valores Ejemplos
FUENTES - FONT color valor RGB o nombre de color color: color: red; #009900;
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 | font-size:12pt; large | x-large | xx-large font-size: x-large; Unidades de CSS
font-size
86
Sirve para indicar el tamao de las fuentes de manera ms rgida y con mayor exactitud. serif | sans-serif | cursive | fantasy | font-family:arial,helvetica; monospace font-family: fantasy; Todas las fuentes habituales
font-family
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. normal | bold | bolder | lighter | 100 font-weight:bold; | 200 | 300 | 400 | 500 | 600 | 700 | font-weight: 200; 800 | 900
font-weight
Sirve para definir la anchura de los caracteres, o dicho de otra manera, para poner negrillas con total libertad. Normal y 400 es el mismo valor, as como bold y 700. font-style normal | italic | oblique font-style:normal; font-style: italic;
Es el estilo de la fuente, que puede ser normal, itlica u oblicua. El estilo oblique es similar al italic. PRRAFOS - TEXT line-height normal y unidades CSS line-height: line-height: normal; 12px;
El alto de una lnea, y por tanto, el espaciado entre lneas. Es una de esas caractersticas que no se podan modificar utilizando HTML. text-decoration none | [ underline || overline || line- text-decoration: through ] text-decoration: underline; none;
Para establecer la decoracin de un texto, es decir, si est subrayado, sobre rayado o tachado. text-align left | right | center | justify text-align: text-align: center; right;
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 Unidades CSS text-indent: 10px;
87
text-indent: 2in; Un atributo que sirve para hacer sangrado o mrgenes en las pginas. Muy til y novedosa. text-transform capitalize | uppercase | lowercase | text-transform: none text-transform: capitalize; none;
Nos permite transformar el texto, haciendo que tenga la primera letra en maysculas de todas las palabras, todo en maysculas o minsculas. FONDO - BACKGROUND Backgroundcolor Un color, con su nombre o su valor background-color: RGB background-color: #000055; green;
Sirve para indicar el color de fondo de un elemento de la pgina. Backgroundimage background-image: url(mrmol.gif) El nombre de la imagen con su camino background-image: relativo o absoluto url(http://www.x.com/fondo.gif) ;
Colocamos con este atributo una imagen de fondo en cualquier elemento de la pgina. BOX - CAJA Margin-left Unidades CSS margin-left: margin-left: 0,5in; 1cm;
Indicamos con este atributo el tamao del margen a la izquierda Margin-right Unidades CSS margin-right: margin-right: 1in; 5%;
Se utiliza para definir el tamao del margen a la derecha Margin-top Unidades CSS margin-top: margin-top: 10px; 0px;
Indicamos con este atributo el tamao del margen arriba de la pgina Margin-bottom Unidades CSS margin-bottom: margin-top: 1px; 0pt;
Con l se indica el tamao del margen en la parte de abajo de la pgina
88
Padding-left
Unidades CSS
padding-left: padding-left: 1px;
0.5in;
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: padding-right: 1pt; 0.5cm;
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 Unidades CSS padding-top: padding-top: 5px; 10pt;
Indica el espacio insertado, por arriba, entre el borde del elemento-continente y el contenido de este. Padding-bottom Unidades CSS padding-right: padding-right: 1pt; 0.5cm;
Indica el espacio insertado, en este caso por abajo, entre el borde del elemento-continente y el contenido de este. Border-color color RGB y nombre de color border-color: border-color: #ffccff; red;
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. Border-style none | dotted | solid | double | border-style: groove | ridge | inset | outset border-style: double; solid;
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 Unidades CSS border-width: border-width: 0.5in; 10px;
El tamao del borde del elemento al que lo aplicamos.
89
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. 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.
La especificacin de estilos CSS es muy amplia y seguro que se queda en el tintero algn atributo de estilo, pero creo que la inmensa mayora estn, y por supuesto la seleccin de los ms importantes. Definicin de estilos CSS Shorthand Vamos a explicar cmo escribir de forma reducida nuestras reglas CSS para que nuestros archivos de estilo tengan menos peso y sean ms entendibles a la hora de una actualizacin. Segn la W3C hay dos formas de escribir la misma regla de CSS: la estndar y la shorthand. Una es la larga y la otra es la reducida. Propiedad Font (fuente)
font-style || font-variant || font-weight || font-size / line-height || familia de fuente
Ejemplo:
P {font: italic normal bold 12px/14pt Verdana, Tahoma, Arial}
Propiedad Background (fondo)

background-color || background-image || background-repeat || background-attachment || background-position
Ejemplo:
Body {background: #FFF url(../images/ejemplo.gif) no-repeat fixed center}
Margin (Margen)
longitud | porcentaje | auto
Ejemplo:
Body {margin: 5px} /* todos los mrgenes a 5px */ P {margin: 2px 4px} /* mrgenes superior e inferior a 2px, mrgenes izquierdo y derecho a 4px */ DIV {margin: 1px
90
2px 3px 4px} /* margen superior a 1px, right margin a 2px, bottom margin a 3px, left margin a 4px */
Padding (Relleno)
longitud | porcentaje | auto
Ejemplo:
Body {padding: 2em 3em 4em 5em} /* Si definimos cuatro valores estamos aplicando el padding superior, derecho, inferior e izquierdo */ Body {padding: 2em 4em) /* Si definimos dos o tres valores, los valores faltantes se toman del lado opuesto: superior e inferior a 2em, derecho e izquierdo a 4em */ Body {padding: 5em} /* Si definimos un solo valor se aplican a todos los lados */
Border (Borde)
border-width || border-style || color
Ejemplo:
H3 {border: thick dotted blue}
Pseudo-element en CSS (pseudo elementos) Los pseudo-element (pseudo-elementos, si preferimos la traduccin al castellano) sirven para aplicar estilos a partes ms especficas dentro de una etiqueta. Es decir, para el ejemplo concreto de la etiqueta prrafo, con los pseudo elementos podemos definir el estilo para la primera letra del prrafo y para la primera lnea. Es decir, con CSS podemos definir el estilo de una etiqueta, pero con los pseudoelementos no nos limitamos a definir el estilo para todo el contendido de esa etiqueta, sino que indicamos el estilo para una parte restringida de esa etiqueta. Existen diversos tipos de pseudo elementos, con distintas aplicaciones, para definir el estilo de diversas cosas, como veremos a continuacin con ejemplos. Pseudo-element first-letter Un efecto habitual de algunas publicaciones, por ejemplo las de cuentos para nios, es hacer ms grande la primera letra de una pgina y decorarla de alguna manera. Con CSS podemos aplicar estilos especficos y hacer, por ejemplo, que esa primera letra sea ms grande y tenga un color distinto del resto del prrafo.
91
Se utiliza de esta manera:

P:first-letter { font-size: 200%; color: #993333; font-weight: bold; }
As estamos asignando un tamao de letra 200% ms grande del propio del prrafo. Tambin estamos cambiando el color de esa primera letra. De entre todas las propiedades de estilos, slo algunas se pueden aplicar a los pseudo-elementos first-letter. Son las siguientes, segn la especificacin del W3C: font properties, color properties, background properties, 'text-decoration', 'vertical-align' (slo si 'float' est asignado a 'none'), 'text-transform', 'line-height', margin properties, padding properties, border properties, 'float', 'text-shadow' y 'clear' . Se puede ver un ejemplo de aplicacin de un estilo con first-letter. Pseudo-element first-line Como adelantaba, este pseudo-elemento, sirve para asignar un estilo propio a la primera lnea del texto. Es posible que hayamos visto alguna revista o peridico que utilice este estilo para remarcar las primeras lneas del prrafo. Un ejemplo de su uso sera el siguiente:
P:first-line { text-decoration: underline; font-weight: bold; }
Las propiedades de estilos que se pueden aplicar al pseudo-element first-line son las siguientes: font properties, color properties, background properties, 'word-spacing', 'letter-spacing', 'text-decoration', 'verticalalign', 'text-transform', 'line-height', 'text-shadow' y 'clear'. Se puede ver un ejemplo de aplicacin de un estilo con first-line. Uso de clases con los pseudo-elementos En determinadas ocasiones podemos necesitar crear una clase (class) de CSS a la que asignar los pseudoelementos, de modo que estos no se apliquen a todas las etiquetas de la pgina. Por ejemplo, podemos desear que solamente se modifique el estilo de la primera lnea del texto en algunos prrafos y no en todos los de la pgina. Una clase se define con el nombre de la etiqueta seguido de un punto y el nombre de la clase. Si adems deseamos definir un pseudo-elemento, deberamos indicarlo a continuacin, con esta sintaxis:
92
P.nombreclase:first-line { font-weight: bold; }
Pseudo-elementos en CSS2 Aparte de first-line y first-letter, en las especificaciones de CSS 2 existen otros pseudo elementos que voy a nombrar para conocimiento de los lectores, aunque profundizar en su uso. Se tratan de before y after y sirven para insertar "contenidos generados" antes y despus del elemento al que asignemos estos pseudo-element. Un ejemplo de ello es:
P.nota:before { content: "Nota: " }
As se ha definido una clase de prrafo llamada "note" en la que se indica que antes de la propia nota se debe incluir el texto indicado, o sea, "Nota: ". Nota: Atencin a la compatibilidad con CSS2, que, por lo menos para estos elementos, no est soportada en versiones 6 de Internet Explorer. Firefox, en cambio, s que es compatible con estas caractersticas de CSS2. Trucos avanzados con CSS Las hojas de estilos son un tema largo del que se han escrito libros enteros. Definir estilos utilizando clases Las clases nos sirven para crear definiciones de estilos que se pueden utilizar repetidas veces. Una clase se puede definir entre las etiquetas <STYLE> (en la cabecera del documento), o en un archivo externo a la pgina. Para definirlas utilizamos la siguiente sintaxis, un punto seguido del nombre de la clase y entre llaves los atributos de estilos deseados. De esta manera:
.nombredelaclase {atributo: valor;atributo2:valor2; ...}
Una vez tenemos una clase, podemos utilizarla en cualquier etiqueta HTML. Para ello utilizaremos el atributo class, ponindole como valor el nombre de la clase, de esta forma:
<ETIQUETA class="nombredelaclase">
Ejemplo de la utilizacin de clases

<html> <head> <title>Ejemplo de la utilización de clases</title> <STYLE type="text/css">
93
.fondonegroletrasblancas {background-color:black; color:white; font-size:12; font-family:arial} .letrasverdes {color:#009900} </STYLE> </head> <body> <h1 class=letrasverdes>Titulo 1</h1> <h1 class=fondonegroletrasblancas>Titulo 2</h1> <p class=letrasverdes> Esto es un párrafo con estilo de letras verdes</p> <p class=fondonegroletrasblancas> Esto es un párrafo con estilo de fondo negro y las letras blancas. Es todo!</p> </body> </html>
Estilo en los enlaces Una tcnica muy habitual, que se puede realizar utilizando las hojas de estilo en cascada y no se poda en HTML, es la definicin de estilos en los enlaces, quitndoles el subrayado o hacer enlaces en la misma pgina con distintos colores. Para aplicar estilo a los enlaces debemos definirlos para los distintos tipos de enlaces que existen (visitados, activos...). Utilizaremos la siguiente sintaxis, en la declaracin de estilos global de la pgina (<STYLE>) o del sitio (Definicin en un archivo externo): Enlaces normales A:link {atributos} Enlaces visitados A:visited {atributos} Enlaces activos (Los enlaces estn activos en el preciso momento en que se pincha sobre ellos) A:active {atributos} Enlaces hover (Cuando el ratn est encima de ellos, solo funciona en iexplorer) A:hover {atributos} El atributo para definir enlaces sin subrayado es text-decoration:none, y para darles color es color:tu_color.
94
Tambin podemos definir el estilo de cada enlace en la propia etiqueta <A>, con el atributo style. De esta manera podemos hacer que determinados enlaces de la pgina se vean de manera distinta Ejemplo de estilos en enlaces
<html> <head> <title>Ejemplos de estilo en enlaces</title> <STYLE type="text/css"> A:link {text-decoration:none;color:#0000cc;} A:visited {text-decoration:none;color:#ffcc33;} A:active {text-decoration:none;color:#ff0000;} A:hover {text-decoration:underline;color:#999999;font-weight:bold} </STYLE> </head> <body> <a href="http://dominioinexistente.nofunciona.com">Enlace normal</a> <br> <br> <a href="enlaces.html">Enlace visitado</a> Pulsar este enlace para verlo activo, poner el ratón por encima para que cambie. </body> </html>
URL como valor de un atributo: Determinados atributos de estilos, como background-image necesitan una URL como valor, para indicarlas podemos definir tanto caminos relativos como absolutos. As pues, podemos indicar la URL de la imagen de fondo de estas dos maneras:
background-image: url(fondo.gif) En caso de que la imagen est en el mismo directorio que la pgina. background-image: url(http://www.desarrolloweb.com/images/fondo.gif)
Ocultar estilos en navegadores antiguos En caso de definir dentro de la etiqueta <STYLE> unas declaraciones de estilos debemos asegurarnos que estas no se imprimirn en la pgina web con navegadores antiguos. Pensar en un navegador que no reconozca la etiqueta <STYLE>, pensar que corresponde con algo que no entiende y se olvidar de la etiqueta. Lo siguiente que encuentra es texto normal y har que este se vea en la pgina, como con cualquier otro texto. Para evitarlo debemos ocultar con comentarios HTML ( ) todo lo que hay dentro de la etiqueta <STYLE>.
95
2. Desarrollo de pginas web dinmicas.

2.1 Implementa interactividad a las pginas web, mediante el desarrollo de cdigo de programacin en un lenguaje script.
Conceptos bsicos Todos los que hasta ahora hayan seguido el curso de HTML, se habrn dado cuenta de una cosa: crear un documento HTML es crear algo de carcter esttico, inmutable con el paso del tiempo. La pgina se carga, y ah termina la historia. Tenemos ante nosotros la informacin que buscbamos, pero no podemos INTERACTUAR con ella. As pues, como solucin a este problema, nace JavaScript. Y qu es JavaScript? Se trata de un lenguaje de tipo script compacto, basado en objetos y guiado por eventos diseado especficamente para el desarrollo de aplicaciones cliente-servidor dentro del mbito de Internet. Los programas JavaScript van incrustados en los documentos HMTL, y se encargan de realizar acciones en el cliente, como pueden ser pedir datos, confirmaciones, mostrar mensajes, crear animaciones, comprobar campos... Versiones El programa que va a interpretar los programas JavaScript es el propio navegador, lo que significa que si el nuestro no soporta JavaScript, no podremos ejecutar las funciones que programemos. Desde luego, Netscape y Explorer lo soportan, el primero desde la versin 2 y el segundo desde la versin 3. Navegador Nestcape 2 Internet Explorer 2 Nestcape 3 Internet Explorer 3 Nestcape 4 Internet Explorer 4 Nestcape 6 Versin de JavaScript Javascript 1.0 No soporta JavaScript Javascript 1.1 Javascript 1.0 Javascript 1.2 - 1.3 incompleta Javascript 1.2 ECMA compliant Javascript 1.4 Soporte ECMA ----ECMA-262-compliant hasta la versin 4.5 ECMA-262-compliant Full ECMAScript-262
96
Internet Explorer 5
ECMA compliant Javascript 1.3
Full ECMAScript-262
Las diferentes versiones de JavaScript han sido finalmente integradas en un estndar denominado ECMAScript262. Dicho estndar ha sido realizado por la organizacin ECMA dedicada a la estandarizacin de informacin y sistemas de comunicacin. Las versiones actuales de los navegadores soportan este estndar, as que basaremos el curso sobre l. Dnde y cmo incluir JavaScript Existen distintos modos de incluir lenguaje JavaScript en una pgina. La forma ms frecuente de hacerlo es utilizando la directiva <script> en un documento HTML (se pueden incluir tantas directivas <script> como se quiera en un documento). El formato es el siguiente:
<script language="Javascript 1.3">
El atributo lenguaje hace referencia a la versin de JavaScript que se va a utilizar en dicho script. Otro atributo de la directiva script es src, que puede usarse para incluir un archivo externo que contiene JavaScript y que quiere incluirse en el cdigo HTML.
<script language="JavaScript" src ="archivo.js"> </script>
El archivo externo simplemente es un archivo del texto que contiene cdigo JavaScript, y cuyo nombre acaba con la extensin js. Puede incluirse tambin cdigo JavaScript como
de
respuesta
hacer
algn
evento:
false;"
<input type="submit" value="Click">

Click
onclick="alert('Acabas
click');return
Nota: Los scripts pueden incluirse como comentarios para asegurar que su cdigo no es "visto" por navegadores viejos que no reconocen JavaScript y as evitar errores.
<script ....> <!Cdigo JavaScript //--> </script>
Gramtica Si conoce algn otro lenguaje de programacin ya estar familiarizado con el uso de variables, operadores, declaraciones... Lo que se resume en la tabla siguiente son los elementos principales de la gramtica de JavaScript. Cada uno de los elementos se ver en detalle a lo largo del manual.
97
Nota importante: JavaScript es sensible a maysculas y minsculas, todos los elementos de JavaScript deben referenciarse cmo se definieron, no es lo mismo "Salto" que "salto". Variables Operadores Etiquetas que se refieren a un valor cambiante. Pueden usarse para calcular o comparar valores. Ejemplo: pueden sumarse dos valores, pueden compararse dos valores... Cualquier combinacin de variables, operadores, y declaraciones que evalan a algn resultado. Ejemplo: intTotal=100; intTotal > 100 Una sentencia puede incluir cualquier elemento de la gramtica de JavaScript. Las sentencias de JavaScript pueden tomar la forma de condicional, bucle, o manipulaciones del objeto. La forma correcta para separarlas es por punto y coma, esto slo es obligatorio si las declaraciones mltiples residen en la misma lnea. Aunque es recomendable que se acostumbre a terminar cada instruccin con un punto y coma, se ahorrar problemas. Estructura "contenedora" de valores, procedimientos y funciones, cada valor refleja una propiedad individual de ese objeto. y Una funcin de JavaScript es bastante similar a un" procedimiento" o" subprograma" en otro lenguaje de programacin. Una funcin es un conjunto que realizan alguna accin. Puede aceptar los valores entrantes (los parmetros), y puede devolver un valor saliente. Un mtodo simplemente es una funcin contenida en un objeto.
Expresiones
Sentencias
Objetos
Funciones Mtodos
Variables Las variables almacenan y recuperan datos, tambin conocidos como "valores". Una variable puede referirse a un valor que cambia o se cambia. Las variables son referenciadas por su nombre, y el nombre que les es asignado debe ser conforme a ciertas reglas (debe empezar con una letra o ("_"); los caracteres siguientes pueden ser nmeros (0-9), letras maysculas o letras minsculas). Ejemplos de definiciones errneas:
var Mi Variable, 123Probando, $Variable, for, while;
Ejemplos de definiciones correctas:

var _Una_Variable, P123robando, _123, mi_carrooo;
Por supuesto, podemos inicializar una variable al declararla:
98
var Una_Variable="Esta Cadenita de texto";
Las variables en JavaScript pueden ser de alcance global o local. Una variable global es accesible desde cualquier <script> de la pgina mientras que una variable local slo lo es desde la funcin en la que fue declarada. Normalmente, usted crea una nueva variable global asignndole simplemente un valor:
globalVariable=5;
Sin embargo, si usted est codificando dentro de una funcin y usted quiere crear una variable local que slo tenga alcance dentro de esa funcin, debe declarar la nueva variable haciendo uso de var:
function newFunction() { var localVariable=1; globalVariable=0; ... }
Tipos de datos Javascript reconoce seis tipos de valores diferentes: numricos, lgicos, objetos, cadenas, nulos e indefinidos. JavaScript tiene la peculiaridad de ser un lenguaje dbilmente tipado, esto es, una variable puede cambiar de tipo durante su vida, por ejemplo uno puede declarar una variable que ahora sea un entero y ms adelante una cadena.
MiVariable=4;
Y despus:
MiVariable="Una_Cadena";
A diferencia de otros lenguajes y como ya hemos visto, en Javascript no es necesario declarar las variables especificando el tipo de dato que contendrn, ser el propio interprete el que le asignar el tipo apropiado. (Esto es as para seguir la filosofa de diseo de Javascript que indica que se realizan programas pequeos y que la idea es lograr que el programador realice los scripts de la manera ms rpida posible). Tipos de Datos: Nmeros Bolanos Cadenas Enteros o coma flotante. True o False. Los tipos de datos cadena deben ir delimitados por comillas simples o dobles.
99
Objetos Nulos
Obj = new Object(); Null
Indefinidos Un valor indefinido es el que corresponde a una variable que ha sido creada pero no le ha sido asignado un valor.
Operadores Los operadores toman una o ms variables o valores (los operando) y devuelve un nuevo valor; por ejemplo el ' +' operador puede agregar dos nmeros para producir un tercero. Los operadores estn clasificados en varias clases dependiendo de la relacin que ellos realizan: Operadores Aritmticos Los operadores aritmticos toman los valores numricos (literales o variables) como sus operando y devuelve un solo valor numrico. Los operadores aritmticos normales son: Operador + * / % Nombre Suma Substraccin Multiplicacin Divisin Ejemplo Descripcin 5+6 7-9 6*3 4/8 Suma dos nmeros Resta dos nmeros Multiplica dos nmeros Divide dos nmeros Devuelve el resto de dividir ambos nmeros, en este ejemplo el resultado es 1 Suma 1 al contenido de una variable. Resta 1 al contenido de una variable.
Mdulo: el resto despus 7%2 de la divisin Incremento. Decremento. a++ a--
++ --
Invierte el signo de un -a operando.
Invierte el signo de un operando.

100
<html> <head> <title>Ejemplo de JavaScript con operadores aritmeticos </title> </head> <body> <script language="JavaScript"> a = 8; b = 3; document.write(" a "); document.write(" = "); document.write(a); document.write("<br>"); document.write("<br>"); document.write(" b "); document.write(" = "); document.write(b); document.write("<br>"); document.write("<br>"); document.write(a); document.write(" + "); document.write(b); document.write(" = "); document.write(a + b); document.write("<br>"); document.write(a); document.write(" - "); document.write(b); document.write(" = "); document.write(a - b); document.write("<br>"); document.write(a); document.write(" * "); document.write(b); document.write(" = "); document.write( a * b); document.write("<br>"); document.write(a); document.write(" / "); document.write(b); document.write(" = "); document.write(a / b); document.write("<br>"); document.write(a); document.write(" ++ "); document.write(" = "); a++; document.write(a); document.write("<br>"); document.write(b); document.write(" -- "); document.write(" = "); b--; document.write(b); </script> </body> </html>
101
Operadores de comparacin Un operador de la comparacin compara sus operando y devuelve un valor lgico basado en si la comparacin es verdad o no. Los operando pueden ser numricos o cadenas. Operador == === != !== > >= Descripcin " Igual a" devuelve true si los operandos son iguales Estrictamente "igual a" (JavaScript 1.3) " No igual a" devuelve true si los operandos no son iguales Estrictamente " No igual a" (JavaScript 1.3) Mayor que" devuelve true si el operador de la izquierda es mayor que el de la derecha. "Mayor o igual que " devuelve true si el operador de la izquierda es mayor o igual que el de la derecha. "Menor que" devuelve true si el operador de la izquierda es menor que el de la derecha. "Menor o igual que" devuelve true si el operador de la izquierda es menor o igual que el de la derecha.
< <=
Nota: En JavaScript 1.3 y JavaScript 1.1 o anteriores, los operadores de comparacin realizaban 'una conversin de tipos' si era necesario. Es decir, si un operando era una cadena y el otro era un valor numrico, JavaScript realizaba la conversin de la cadena a numrico antes de realizar la comparacin. JavaScript 1.2 no realizaba 'conversiones de tipo', por eso si dos operadores eran de tipos distintos no se realizaba la comparacin. Finalmente, en las ltimas versiones de JavaScript se aaden los operadores de 'comparacin estricta', los cuales realizarn la comparacin si los dos operandos son del mismo tipo.
102
 <html> <head> <title>Ejemplo de JavaScript con operadores comparacion </title> </head> <body> <script language="JavaScript"> a = 8; b = 3; c = 3; document.write(" a "); document.write(" = "); document.write(a); document.write("<br>"); document.write("<br>"); document.write(" b "); document.write(" = "); document.write(b); document.write("<br>"); document.write("<br>"); document.write(" c "); document.write(" = "); document.write(c); document.write("<br>"); document.write("<br>"); document.write(" a == b es "); document.write(a == b);document.write("<br>"); document.write(" a != b es "); document.write(a != b);document.write("<br>"); document.write(" a < b es "); document.write(a < b);document.write("<br>"); document.write(" a > b es "); document.write(a > b);document.write("<br>"); document.write(" a >= b es "); document.write(a >= c);document.write("<br>"); document.write(" a <= b es "); document.write(b <= c);document.write("<br><br>"); document.write(" 3 == '3' es "); document.write(3 == "3");document.write("<br>"); document.write(" 3 === '3' es "); document.write(3 === "3");document.write("<br>"); </script> </body> </html>
Operadores Lgicos Los operadores Lgicos se utilizan para combinar mltiples comparaciones en una expresin condicional. Un operador lgico toma dos operandos cada uno de los cuales es un valor true o false y devuelve un valor true o false.
103
Operador && || !
Descripcin "Y" Devuelve true si ambos operadores son true. "O" Devuelve true si uno de los operadores es true. "No" Devuelve true si la negacin del operando es true.
Operadores de Cadena Los valores cadena pueden compararse usando los operadores de comparacin. Adicionalmente, usted puede concatenar cadenas usando el operador +
<!- Ejemplo de JavaScript con cadenas --> <html> <head> <title>Ejemplo de JavaScript con cadenas </title> </head> <body> <script language="JavaScript"> Nombre = "Jose" document.write( "Hola " + Nombre +"." ); </script> </body> </html>
Operadores de Asignacin El operador de asignacin '=' le permite asignar un valor a una variable. Operador = Descripcin Asigna el valor del operando de la derecha a la variable de la izquierda. Ejemplo: inttotal=100;
+= Aade el valor del operando de la derecha a la variable de la izquierda. (tambin - =, * =, / =) Ejemplo: inttotal +=100 &= (tambin |=) Asigna el resultado de (operando de la izquierda & operando de la derecha) al operando de la izquierda
 <html> <head> <title>Ejemplo de JavaScript con operador de asignacin </title> </head>
104
<body> <script language="JavaScript"> a = 8; b = 3; document.write(" a "); document.write(" = "); document.write(a); document.write("<br><br>"); document.write(" b "); document.write(" = "); document.write(b); document.write("<br><br>"); a += 3; document.write(" a+= 3 es -> "); document.write(a);document.write("<br>"); a -= 2; document.write(" a-= 2 es -> "); document.write(a);document.write("<br>"); document.write(" b*= 2 es -> "); b *= 2; document.write(b); </script> </body> </html>
Operadores especiales Varios operadores de JavaScript, es difcil clasificarlos en una categora en particular. Estos operadores se resumen a continuacin. Operador Descripcin
(condicin) ? trueVal : falseVal Asigna un valor especificado a una variable si la condicin es true,
por otra parte asigna un valor alternativo si la condicin es false.

New This , Delete
El operador new crea una instancia de un objeto. La palabra clave 'this' se refiere al objeto actual. El operador ',' evala los dos operados. El operador delete borra un objeto, una propiedad de un objeto, o un elemento especificado de un vector. El operador Void especifica una expresin que ser evaluada sin
Void
105
devolver ningn valor.

Typeof
Devuelve el tipo de dato de un operando.
Objetos El Objeto String Este objeto nos permite hacer diversas manipulaciones con las cadenas, para que trabajar con ellas sea ms sencillo. Cuando asignamos una cadena a una variable, JS est creando un objeto de tipo String que es el que nos permite hacer las manipulaciones. Propiedades
length. Valor numrico que nos indica la longitud en caracteres de la cadena dada. prototype. Nos permite asignar nuevas propiedades al objeto String.
Mtodos
anchor(nombre). Crea un enlace asignando al atributo NAME el valor de 'nombre'. Este nombre
debe estar entre comillas " "

big(). Muestra la cadena de caracteres con una fuente grande. blink(). Muestra la cadena de texto con un efecto intermitente. charAt(indice). Devuelve el carcter situado en la posicin especificada por 'indice'. fixed(). Muestra la cadena de caracteres con una fuente proporcional. fontcolor(color). Cambia el color con el que se muestra la cadena. La variable color debe ser
especificada entre comillas: " ", o bien siguiendo el estilo de HTML, es decir "#RRGGBB" donde RR, GG, BB son los valores en hexadecimal para los colores rojo, verde y azul, o bien puede ponerse un identificador vlido de color entre comillas. Algunos de estos identificadores son "red", "blue", "yellow", "purple", "darkgray", "olive", "salmon", "black", "white", ...
fontsize(tamao). Cambia el tamao con el que se muestra la cadena. Los tamaos vlidos son de
1 (ms pequeo) a 7 (ms grande). indexOf(cadena_buscada,indice) Devuelve la posicin de la primera ocurrencia de 'cadena_buscada' dentro de la cadena actual, a partir de la posicin dada por 'indice'. Este ltimo argumento es opcional y, si se omite, la bsqueda comienza por el primer carcter de la cadena.
italics(). Muestra la cadena en cursiva.
106
lastIndexOf(cadena_buscada,indice). Devuelve la posicin de la ltima ocurrencia de
'cadena_buscada' dentro de la cadena actual, a partir de la posicin dada por 'indice', y buscando hacia atrs. Este ltimo argumento es opcional y, si se omite, la bsqueda comienza por el ltimo carcter de la cadena.
link(URL). Convierte la cadena en un vnculo asignando al atributo HREF el valor de URL. small(). Muestra la cadena con una fuente pequea. split(separador). Parte la cadena en un array de caracteres. Si el carcter separador no se
encuentra, devuelve un array con un slo elemento que coincide con la cadena original. A partir de NS 3, IE 4 (JS 1.2).
strike(). Muestra la cadena de caracteres tachada. sub(). Muestra la cadena con formato de subndice. substring(primer_Indice,segundo_Indice). Devuelve la subcadena que comienza en la
posicin 'primer_Indice + 1' y que finaliza en la posicin 'segundo_Indice'. Si 'primer_Indice' es mayor que 'segundo_Indice', empieza por 'segundo_Indice + 1' y termina en 'primer_Indice'. Si hacemos las cuentas a partir de 0, entonces es la cadena que comienza en 'primer_Indice' y termina en 'segundo_Indice - 1' (o bien 'segundo_Indice' y 'primer_Indice - 1' si el primero es mayor que el segundo).
sup(). Muestra la cadena con formato de superndice. toLowerCase(). Devuelve la cadena en minsculas. toUpperCase(). Devuelve la cadena en minsculas.  <HTML> <HEAD> <title>Ejemplo de JavaScript con objetos </title> </HEAD> <BODY> <script LANGUAGE="JavaScript"> <!-var cad = "Hello World",i; var ja = new Array(); ja = cad.split("o"); with(document) { write("La cadena es: "+cad+"<BR>"); write("Longitud de la cadena: "+cad.length+"<BR>"); write("Haciendola ancla: "+cad.anchor("b")+"<BR>"); write("En grande: "+cad.big()+"<BR>"); write("Parpadea: "+cad.blink()+"<BR>"); write("Caracter 3 es: "+cad.charAt(3)+"<BR>"); write("Fuente FIXED: "+cad.fixed()+"<BR>"); write("De color: "+cad.fontcolor("#FF0000")+"<BR>"); write("De color: "+cad.fontcolor("salmon")+"<BR>"); write("Tamao 7: "+cad.fontsize(7)+"<BR>"); write("<I>orl</I> esta en la posicion: "+cad.indexOf("orl"));
107
write("<BR>En cursiva: "+cad.italics()+"<BR>"); write("La primera <I>l</I> esta, empezando a contar por detras,"); write(" en la posicion: "+cad.lastIndexOf("l")+"<BR>"); write("Haciendola enlace: "+cad.link("doc.htm")+"<BR>"); write("En pequeo: "+cad.small()+"<BR>"); write("Tachada: "+cad.strike()+"<BR>"); write("Subindice: "+cad.sub()+"<BR>"); write("Superindice: "+cad.sup()+"<BR>"); write(" Minusculas: "+cad.toLowerCase()+"<BR>"); write("Mayusculas: "+cad.toUpperCase()+"<BR>"); write("Subcadena entre los caracteres 3 y 10: "); write(cad.substring(2,10)+"<BR>"); write("Entre los caracteres 10 y 3: "+cad.substring(10,2)+"<BR>"); write("Subcadenas resultantes de separar por las <B>o:</B><BR>"); for(i=0;i<ja.length;i++) write(ja[i]+"<BR>"); } //--> </script> </BODY> </HTML>
El Objeto Array Este objeto nos va a dar la facilidad de construir arrays cuyos elementos pueden contener cualquier tipo bsico, y cuya longitud se modificar de forma dinmica siempre que aadamos un nuevo elemento (y, por tanto, no tendremos que preocuparnos de esa tarea). Para poder tener un objeto array, tendremos que crearlo con su constructor, por ejemplo, si escribimos:
a=new Array(15);
Tendremos creada una variable a que contendr 15 elementos, enumerados del 0 al 14. Para acceder a cada elemento individual usaremos la notacin a[i], donde i variar entre 0 y N-1, siendo N el nmero de elementos que le pasamos al constructor. Tambin podemos inicializar el array a la vez que lo declaramos, pasando los valores que queramos directamente al constructor, por ejemplo:
a=new Array(21,"cadena",true);
Que nos muestra, adems, que los elementos del array no tienen por qu ser del mismo tipo. Por tanto: si ponemos un argumento al llamar al constructor, este ser el nmero de elementos del array (y habr que asignarles valores posteriormente), y si ponemos ms de uno, ser la forma de inicializar el array con tantos elementos como argumentos reciba el constructor. Podramos poner como mencin especial de esto lo siguiente. Las inicializaciones que vemos a continuacin:
a=new Array("cadena"); a=new Array(false);
Inicializan el array a, en el primer caso, con un elemento cuyo contenido es la cadena cadena, y en el segundo caso con un elemento cuyo contenido es false.
108
Lo comentado anteriormente sobre inicializacin de arrays con varios valores, significa que si escribimos
a=new Array(2,3);
NO vamos a tener un array con 2 filas y 3 columnas, sino un array cuyo primer elemento ser el 2 y cuyo segundo elemento ser el 3. Entonces, cmo creamos un array bidimensional? (un array bidimensional es una construccin bastante frecuente). Creando un array con las filas deseadas y, despus, cada elemento del array se inicializar con un array con las columnas deseadas. Por ejemplo, si queremos crear un array con 4 filas y 7 columnas, bastar escribir:
a=new Array(4); for(i=0;i<4;i++) a[i]=new Array(7);
Y para referenciar al elemento que ocupa la posicin (i,j), escribiremos a[i][j]; Propiedades
length. Esta propiedad nos dice en cada momento la longitud del array, es decir, cuntos elementos
tiene.
prototype. Nos permite asignar nuevas propiedades al objeto String.
Mtodos
join(separador). Une los elementos de las cadenas de caracteres de cada elemento de un array en
un string, separando cada cadena por el separador especificado.

reverse(). Invierte el orden de los elementos del array. sort(). Ordena los elementos del array siguiendo el orden lexicogrfico.  <HTML> <HEAD> <title>Ejemplo de JavaScript de arrays </title> </HEAD> <BODY> <script LANGUAGE="JavaScript"> <!-var j=new Array(2),h=new Array(1), i=new Array(1,"Hola",3); var b=new Array("Palabra","Letra","Amor","Color","Cario"); var c=new Array("Otra cadena con palabras"); var d=new Array(false); j[0]=new Array(3); j[1]=new Array(2); j[0][0]=0; j[0][1]=1; j[0][2]=2; j[1][0]=3; j[1][1]=4; j[1][2]=5; document.write("c= "); document.write(c); document.write("<P> d= "+d+"<P>");
109
document.write("j[0][0]="+j[0][0]+"; j[0][1]="+j[0][1]+ "; j[0][2]="+j[0][2]+"<BR>"); document.write("j[1][0]="+j[1][0]+"; j[1][1]="+j[1][1]+ "; j[1][2]="+j[1][2]); document.write("<P>h= "+(h[0]='Hola')+"<P>"); document.write("i[0]="+i[0]+"; i[1]="+i[1]+"; i[2]="+i[2]+"<P>"); document.write("Antes de ordenar: "+b.join(', ')+"<P>"); document.write("Ordenados: "+b.sort()+"<P>"); document.write("Ordenados en orden inverso: "+b.sort().reverse()); //--> </script> </BODY> </HTML>
El Objeto Math Este objeto se utiliza para poder realizar clculos en nuestros scripts. Tiene la peculiaridad de que sus propiedades no pueden modificarse, slo consultarse. Estas propiedades son constantes matemticas de uso frecuente en algunas tareas, por ello es lgico que slo pueda consultarse su valor pero no modificarlo. Propiedades E. Nmero 'e', base de los logaritmos naturales (neperianos). LN2. Logaritmo neperiano de 2. LN10. Logaritmo neperiano de 10. LOG2E. Logaritmo en base 2 de e. LOG10E. Logaritmo en base 10 de e. PI. Nmero PI. SQRT1_2. Raz cuadrada de 1/2. SQRT2. Raz cuadrada de 2. Mtodos
abs(numero). Funcin valor absoluto. acos(numero). Funcin arcocoseno. Devuelve un valor cuyas unidades son radianes o NaN. 'numero'
debe pertenecer al rango [-1,1], en otro caso devuelve NaN.

asin(numero). Funcin arcoseno. Devuelve un valor cuyas unidades son radianes o NaN. 'numero'
debe pertenecer al rango [-1,1], en otro caso devuelve NaN.

atan(numero). Funcin arcotangente. Devuelve un valor cuyas unidades son radianes o NaN. atan2(x,y). Devuelve el ngulo formado por el vector de coordenadas (x,y) con respecto al eje OX.
110
ceil(numero). Devuelve el entero obtenido de redondear 'numero' "por arriba". cos(numero). Devuelve el coseno de 'numero' (que debe estar en radianes) o NaN. exp(numero). Devuelve el valor enumero. floor(numero). Devuelve el entero obtenido de redondear 'numero' "por abajo". log(numero). Devuelve el logaritmo neperiano de 'numero'. max(x,y). Devuelve el mximo de 'x' e 'y'. min(x,y). Devuelve el mnimo de 'x' e 'y'. pow(base,exp). Devuelve el valor baseexp. random(). Devuelve un nmero pseudoaleatorio entre 0 y 1. round(numero). Redondea 'numero' al entero ms cercano. sin(numero). Devuelve el seno de 'numero' (que debe estar en radianes) o NaN. sqrt(numero). Devuelve la raz cuadrada de nmero. tan(numero). Devuelve la tangente de 'numero' (que debe estar en radianes) o NaN.
El Objeto Date Este objeto nos va a permitir hacer manipulaciones con fechas: poner fechas, consultarlas... para ello, debemos saber lo siguiente: JS maneja fechas en milisegundos. Los meses de Enero a Diciembre vienen dados por un entero cuyo rango vara entre el 0 y el 11 (es decir, el mes 0 es Enero, el mes 1 es Febrero, y as sucesivamente), los das de la semana de Domingo a Sbado vienen dados por un entero cuyo rango vara entre 0 y 6 (el da 0 es el Domingo, el da 1 es el Lunes, ...), los aos se ponen tal cual, y las horas se especifican con el formato HH:MM:SS. Podemos crear un objeto Date vaco, o podemos cralo dndole una fecha concreta. Si no le damos una fecha concreta, se crear con la fecha correspondiente al momento actual en el que se crea. Para crearlo dndole un valor, tenemos estas posibilidades:
var var var var var Mi_Fecha Mi_Fecha Mi_Fecha Mi_Fecha Mi_Fecha = = = = = new new new new new Date(ao, Date(ao, Date(ao, Date(ao, Date(ao, mes); mes, da); mes, da, horas); mes, da, horas, minutos); mes, da, horas, minutos, segundos);
En da pondremos un nmero del 1 al mximo de das del mes que toque. Todos los valores que tenemos que pasar al constructor son enteros. Pasamos a continuacin a estudiar los mtodos de este objeto. Mtodos
111
getDate(). Devuelve el da del mes actual como un entero entre 1 y 31. getDay(). Devuelve el da de la semana actual como un entero entre 0 y 6. getHours(). Devuelve la hora del da actual como un entero entre 0 y 23. getMinutes(). Devuelve los minutos de la hora actual como un entero entre 0 y 59. getMonth(). Devuelve el mes del ao actual como un entero entre 0 y 11. getSeconds(). Devuelve los segundos del minuto actual como un entero entre 0 y 59. getTime(). Devuelve el tiempo transcurrido en milisegundos desde el 1 de enero de 1970 hasta el
momento actual.
getYear(). Devuelve el ao actual como un entero. setDate(da_mes). Pone el da del mes actual en el objeto Date que estemos usando. setDay(da_semana). Pone el da de la semana actual en el objeto Date que estemos usando. setHours(horas). Pone la hora del da actual en el objeto Date que estemos usando. setMinutes(minutos). Pone los minutos de la hora actual en el objeto Date que estemos usando. setMonth(mes). Pone el mes del ao actual en el objeto Date que estemos usando. setSeconds(segundos). Pone los segundos del minuto actual en el objeto Date que estemos
usando.
setTime(milisegundos). Pone la fecha que dista los milisegundos que le pasemos del 1 de enero
de 1970 en el objeto Date que estemos usando.

setYear(ao). Pone el ao actual en el objeto Date que estemos usando. toGMTString(). Devuelve una cadena que usa las convenciones de Internet con la zona horaria
GMT. El Objeto Boolean Este objeto nos permite crear booleanos, esto es, un tipo de dato que es cierto o falso, tomando los valores true o false. Podemos crear objetos de este tipo mediante su constructor. Veamos varios ejemplos:
a a a a a a = = = = = = new new new new new new Boolean(); asigna a 'a' el valor 'false' Boolean(0); asigna a 'a' el valor 'false' Boolean(""); asigna a 'a' el valor 'false' Boolean(false); asigna a 'a' el valor 'false' Boolean(numero_distinto_de_0); asigna a 'a' el valor 'true' Boolean(true); asigna a 'a' el valor 'true'
112
El Objeto Number Este objeto representa el tipo de dato nmero con el que JS trabaja. Podemos asignar a una variable un nmero, o podemos darle valor, mediante el constructor Number, de esta forma:
a = new Number(valor);, por ejemplo, a = new Number(3.2); da a a el valor 3.2. Si no pasamos
algn valor al constructor, la variable se inicializar con el valor 0. Propiedades

MAX_VALUE. Valor mximo que se puede manejar con un tipo numrico MIN_VALUE. Valor mnimo que se puede manejar con un tipo numrico NaN. Representacin de un dato que no es un nmero NEGATIVE_INFINITY. Representacin del valor a partir del cual hay desbordamiento negativo
(underflow)
POSITIVE_INFINITY. Representacin del valor a partir del cual hay desbordamiento positivo
(overflow) Para consultar estos valores, no podemos hacer:

a = new Number(); alert(a.MAX_VALUE);
Porque JS nos dir undefined, tenemos que hacerlo directamente sobre Number, es decir, tendremos que consultar los valores que hay en Number.MAX_VALUE, Number.MIN_VALUE, etc.
113
2.2 Establece el acceso a bases de datos en pginas web mediante el desarrollo de cdigo en un lenguaje de programacin.
Pasos previos I: Instalacin del PWS Instalacin del Personal Web Server: nuestro servidor personal de web. Dada la naturaleza de los lenguajes de lado servidor, nos es imposible trabajar offline como hacamos para el caso de las pginas HTML que almacenbamos en nuestro disco duro. Tambin esto no es completamente cierto ya que podemos resolver este eventual problema instalndonos en nuestro PC un servidor propio. Este servidor distribuido por Microsoft tiene dos versiones diferentes que son utilizadas dependiendo del equipo que estemos utilizando. Para los usuarios de W95 o W98, la versin disponible se llama Personal Web Server (PWS). Si trabajamos bajo sistema Windows NT, o las versiones Profesional y Server de Windows 2000 y XP, el servidor a instalar es el Internet Information Server (IIS). En este caso os referimos a nuestro manual sobre la Instalacin de IIS en Windows XP profesional. Existe tambin la posibilidad de trabajar en plataformas UNIX empleando en este caso el ChilisoftASP. Los usuarios de W95 tienen varias posibilidades para hacerse con el PWS: Descargarlo del sitio Microsoft, a partir de una antigua versin de FrontPage 98, instalndolo desde la opcin pack de W-NT 4.0 o desde el CD de instalacin de W98 (directorio add-ons/pws). Los usuarios de Windows ME o XP Home edition, no tienen soporte para PWS, aunque se pueden probar una serie de pasos para lograr utilizarlo en el sistema. Este documento de Microsoft explica mejor este asunto. Nota: Tambin existe otra posibilidad para ejecutar pginas ASP, aparte de los mencionados PWS e IIS, que funciona muy bien con versiones de Windows como ME o XP Home edition. Se trata de un servidor gratuito y muy simple, llamado Baby ASP Web Server. Por otro lado, los usuarios de Windows 2000 y XP Profesional deben utilizar IIS 5.0, que se encuentra en la instalacin. Es recomendable que leis tambin las notas de los visitantes al pie de pgina, porque encontraris muchos ms datos sobre problemas en distintas versiones y compatibilidades con otros sistemas que van apareciendo. Algunas versiones del PWS anteriores a la 4.0 requieren un archivo adicional asp.exe para poder reconocer pginas ASP. PWS podra ser considerado como una versin "light" del IIS4. En realidad en PWS no es suficientemente verstil para ejercer de servidor de un sitio de un tamao mediano aunque si que podra en un momento dado hacerse cargo de un sitio de tamao reducido y no muy concurrido. De todas formas, la utilidad del PWS radica sobre todo en que nos permite realizar las pruebas del sitio que vayamos a desarrollar en "local" sin necesidad de colgar nuestros archivos en el servidor que alberga nuestro sitio cada vez que queramos hacer una prueba
114
sobre una pequea modificacin introducida. Esto resulta a todas luces prctico sobre todo para principiantes que necesitan hacer pruebas con una relativa frecuencia permitiendo el ahorro de mucho tiempo. Dado que la mayora de los posibles lectores de este manual trabajan en entorno W95 y 98, en este captulo nos limitaremos a la descripcin del PWS dejando el IIS4 para futuros captulos. Sin embargo, las explicaciones que damos pueden ser igualmente tiles para quienes tengan que utilizar este ltimo el cual presenta un funcionamiento bsico anlogo. El uso del PWS es extremadamente fcil. Una vez instalado, podemos observar la introduccin de un nuevo icono en la barra de tareas as que en el men de inicio correspondientes a la aplicacin. A partir de cualquiera de ellos podemos tener acceso a la pgina principal o gestionario. El siguiente paso es crear un directorio virtual dentro del cual alojaremos nuestra pgina. Hablamos de directorio virtual debido a que nuestra pgina puede estar alojada en cualquier parte de nuestro disco duro, donde a nosotros nos plazca y con un nombre de directorio que tampoco tiene por qu parecerse al que incluiremos en la URL cuando queramos ejecutar la pgina. De hecho, la URL que debemos introducir en el navegador para visualizar nuestra pgina ASP es del tipo: http://localhost/nombre_del_directorio virtual/archivo.asp Como se puede observar, en este tipo de direccin no se especifica el camino en el disco duro donde se encuentran nuestros archivos. Volviendo a la creacin de nuestro directorio virtual, para hacerlo debemos pinchar sobre el icono "Avanzado" el cual nos da acceso a las opciones avanzadas del PWS.
Una vez ah, el siguiente paso es "Agregar" un directorio virtual. Una ventana en la que tendremos que introducir el nombre de dicho directorio virtual y especificar en qu carpeta del disco duro tenemos guardados
115
los archivos y carpetas de la pgina aparecer.
Como puede verse, la cosa es fcil. Ahora no queda ms que introducir en el navegador el tipo de URL mencionada anteriormente para ejecutar los scripts creados. Una opcin interesante en el men avanzado es la seleccin del tipo de archivo que ser ejecutado por defecto. Aqu podramos poner archivos con nombre index.html o index.asp o bien con el nombre default o home... Conexin a BD Qu es una base de datos y cmo conectarse a partir de los ODBC. El siguiente paso, una vez instalado el servidor que nos permite trabajar en local, es crear los vnculos con las bases de datos que explotaremos en nuestros scripts. En efecto, la utilizacin de pginas dinmicas est muy frecuentemente asociada con el empleo de bases de datos. Una base de datos es sencillamente un conjunto de tablas en las que almacenamos distintos registros (artculos de una tienda virtual, proveedores o clientes de una empresa, pelculas en cartelera en el cine...). Estos registros son catalogados en funcin de distintos parmetros que los caracterizan y que presentan una utilidad a la hora de clasificarlos. As, por ejemplo, los artculos de una tienda virtual podran catalogarse a partir de distintos campos como puede ser un nmero de referencia, nombre del artculo, descripcin, precio, proveedor... Las bases de datos son construidas sirvindose de aplicaciones tales como el Microsoft Access o el MySQL las cuales resultan bastante sencillas de utilizar con unos conceptos mnimos. Nuestro objeto aqu no es explicar la forma de explotarlas sino cmo establecer una conexin entre la base de datos, almacenada en cualquier lugar del disco duro y nuestra pgina web alojada tambin en cualquier parte y reconocida por nuestro servidor personal a partir del directorio virtual.
116
Para crear este vnculo, nos servimos de los conectores ODBC (Open DataBase Connectivity) los cuales establecen el enlace con la base de datos. El primer paso para crear esta conexin es ir al panel de configuracin y abrir el icono ODBC 32bits.
Dentro de l, deberemos crear un DSN (Data Source Name) de tipo sistema o usuario. Para ello nos colocamos en la solapa correspondiente (DSN sistema o DSN usuario) y seleccionamos "Aadir".
A continuacin se nos pedir seleccionar los controladores de la aplicacin que hemos utilizado para crear la base de datos, el nombre que le queremos asignar (aquel que empleemos en nuestros scripts) y el camino para encontrarla en el disco duro.
Esta DSN permite en realidad definir la base de datos que ser interrogada sin necesidad de pasar por la aplicacin que hayamos utilizado para construirla, es decir, con simples llamadas y rdenes desde nuestros archivos ASP podremos obtener los datos que buscamos sin necesidad de ejecutar el Access o el MySQL los cuales, evidentemente, no tendrn por qu encontrarse en el servidor donde trabajemos.
117
Un pequeo ejemplo para mostrar el modo de conectar de una base de datos Access con PHP por medio de ODBC. PHP dispone de diversos juegos de funciones para conectar con distintos tipos de bases de datos. Por ejemplo, existe un juego de funciones especfico para MySQL, otro para Oracle, PostgreSQL, etc. Aunque no existe entre sus libreras ninguna funcin para acceder especficamente a una base de datos Access. Para ello, disponemos de las funciones de conexin ODBC con bases de datos. ODBC es un estndar de conexin con bases de datos que utilizan los sistemas Windows. Con ODBC se puede acceder a cualquier base de datos, siempre que exista el correspondiente driver ODBC para esa base de datos. Las conexiones ODBC son propias de sistemas Microsoft, por lo que podremos utilizarlas desde cualquier lenguaje de programacin en Windows, como PHP, para acceder a cualquier base de datos, incluida Access. Lo primero que tendremos que hacer para conectar con PHP es crear un DSN en nuestro ordenador. Un DSN es un nombre de conexin que utilizaremos para referenciar a una base de datos. Podemos tener tantos DSN en nuestro sistema como necesitemos, para acceder desde aplicaciones o lenguajes de programacin a bases de datos por ODBC. Esto lo hacemos desde el panel de control de Windows en la opcin "Herramientas administrativas - Orgenes de datos ODBC". Tenemos que crear un DNS de sistema o de usuario, en la solapa correspondiente y luego apretando agregar. Habr que seleccionar el driver ODBC que tenemos que utilizar, como se trata de una base de datos de Access, debemos seleccionar el driver ODBC de Access. Luego habr que darle un nombre al DSN y seleccionar el archivo .mdb que contiene nuestra base de datos. Una vez realizado esto, necesitaremos acordarnos del nombre del DSN que hemos creado, porque lo tendremos que utilizar en nuestro cdigo de conexin. Si tenemos nuestra pgina alojada en un proveedor de hosting y queremos conectar Access con PHP, si es que lo permiten (pues lo tpico en esos casos es utilizar una base de datos MySQL), tendramos que preguntarles cmo crear el DSN en sus sistemas. Una vez tengamos el DSN utilizaremos un cdigo de conexin como este:
$conn_access = odbc_connect ("guiarte_access", "", "");
Con la funcin odbc_connect() se conecta con una base de datos por ODBC, indicando el nombre del DSN en el primer parmetro y luego el usuario y la contrasea. En Access normal es que no se tenga siquiera usuario y contrasea, por lo que esos dos parmetros los he pasado con una cadena vaca. Nos devuelve el identificador de la conexin con la base de datos. Para ejecutar una sentencia SQL utilizaremos la funcin odbc_exec(). De este modo:
$rs_access = odbc_exec ($conn_access, "select * from tabla");
Como se puede ver, odbc_exec() recibe el identificador de la conexin obtenido anteriormente y la sentencia SQL a ejecutar. Devuelve un identificador del conjunto de registros resultado de ejecutar la sentencia.
118
Luego utilizaremos funciones como odbc_fetch_array() o odbc_fetch_object() para acceder a cada uno de los registros obtenidos en el conjunto de resultados. Un cdigo completo de conexin con una base de datos Access podra ser el siguiente:
if ($conn_access = odbc_connect ( "guiarte_access", "", "")){ echo "Conectado correctamente"; $ssql = "select * from libros"; if($rs_access = odbc_exec ($conn_access, $ssql)){ echo "La sentencia se ejecut correctamente"; while ($fila = odbc_fetch_object($rs_access)){ echo "<br>" . $fila->titulo; } }else{ echo "Error al ejecutar la sentencia SQL"; } } else{ echo "Error en la conexin con la base de datos"; }
Programacin en PHP utilizando la base de datos Access HP es el paradigma de la programacin dinmica en servidor Web en estos momentos. Atrs qued la posicin de liderazgo ocupada por la programacin ASP de Microsoft. Ambas tecnologas de programacin orientadas al servidor tienen en mismo objetivo: construir pginas dinmicas en un servidor Web actualizables mediante una base de datos que ofrece los contenidos. Las exigencias del tipo de proyecto a realizar haca que el programador se tuviera que decantar de forma obligada hacia una tecnologa u otra. No cabe duda que la plataforma ms extendida es Microsoft y su Windows NT 4.0/2000 es el estandarte de los sistemas operativos de red, por ello aquellos que deseaban programar pginas dinmicas en esta plataforma deban hacerlo con ASP. Pero el avance de Linux, a trado una serie de ventajas a aquellos programadores que pensaban que no exista otra alternativa a este tipo de programacin. La tecnologa PHP est orientada a trabajar en plataformas tipo unix o linux junto con programas que, aunque no estn muy extendidos, si tienen sobrada fama de ser una solucin Web muy estable a las necesidades de construir un web dinmico. El motivo de este artculo es mostrar la potencia de un lenguaje de programacin en servidor como es PHP junto con su utilidad ms potente: el acceso a bases de datos. La plataforma ideal para poder trabajar con el lenguaje PHP es hacerlo en su medio natural, es decir, en una mquina que tiene Linux instalado junto con el servidor Web por excelencia en este sistema operativo y al mismo tiempo el ms utilizado en la Red: Apache Server, y con una de las muchas bases de datos existentes que corren bajo este sistema (mySQL, PostgresSQL, etc.). Esta configuracin no suele ser normal pero PHP tiene una distribucin para plataformas Microsoft ya que de hecho es un lenguaje de programacin en servidor que se adapta a muchos de los programas servidores Web (Apache, IIS, etc.).
119
Las funciones que se utilizarn en este caso son muy similares a las de otras bases de datos, por lo que conocer este proceso puede ayudar en un futuro a entender el funcionamiento cuando se vea en la necesidad de utilizar otras bases de datos. Conectando con ODBC Cuando se habla de utilizar la base de datos Access no se trata de una necesidad obligatoria, podra valer cualquier otra a la que se pu-diera conectar a travs de un enlace ODBC (Open Data Base Connecty). Utilizando este tipo de conexin y con el controlador correspondiente, podemos hacer que una base de datos sea accesible a cualquier aplicacin que soporte ODBC. Sin importar qu base de datos se utilice habr un segundo nivel entre sta y la aplicacin que es ODBC y que tendr como finalidad servir de puente entre las dos. De esta forma la aplicacin no tiene que tener un soporte especfico para cada base de datos, sino que a travs de ODBC puede acceder a cualquiera de ellas. Si el usuario va al Panel de control en su sistema operativo Windows, ver un icono llamado Fuentes de datos ODBC (32 bits), desde el que se configurarn las conexiones a una base de datos. Por defecto incluye las ms utilizadas (SQL Server, Access, Dbase, etc.) y otras que an no siendo especficamente aplicaciones de bases de datos pueden funcionar como tal, como una hoja de Excel o un fichero de texto (TXT). Una vez que el usuario tienen funcionando el servidor Web seleccionado junto al intrprete de pginas PHP, vamos a crear el enlace ODBC que permitir conectar con la base de datos desde las pginas PHP. La base de datos utilizada para este artculo se ha denominado agenda y contiene una tabla con el nombre datos. Los campos que se van a utilizar son: id (autonumrico), nombre (texto), apellidos (texto), direccin (texto), provincia (texto), cp (numrico), telfono (numrico) y fecha_nacimiento (fecha). Una vez creada la base de datos hay que darla de alta en la lista de fuentes ODBC. Para ello seleccione la pestaa ODBC Sistema, pulse el botn Agregar y seleccione el tipo de base de datos. A partir de aqu basta con introducir la informacin necesaria siendo el primer campo a rellenar el nombre que tendr la conexin y sobre la que se har referencia en las pginas PHP. El nombre que se va a utilizar es agenda. Cuando se pulse el botn Aceptar la conexin ODBC creada a la base de datos estar disponible para cualquier aplicacin que lo requiera. Las pginas PHP Una pagina PHP est compuesta por las conocidas etiquetas de HTML ms los fragmentos de cdigo propios de PHP. Si el usuario observa el cdigo comprobar que existen unas etiquetas de apertura (<?) y otras de cierre (?>) que a su vez contienen el cdigo del lenguaje PHP. Cuando se solicita al servidor Web una pgina PHP, el intrprete ejecuta las instrucciones de dicha pgina (conexiones a bases de datos, funciones, etc.) para posteriormente mandar el resultado junto con resto del cdigo HTML al navegador del usuario. Para que una pgina PHP pueda ser interpretada de forma correcta debe de cumplir dos condiciones: la primera es que el fichero debe de ser guardado con extensin php3 (si no se ha modificado este parmetro en la configuracin del servidor Web) y la segunda es que debe de estar en el directorio que tenga permiso para ejecutar este tipo de pginas.
120
Para hacer una primera prueba, puede copiar el cdigo de Listado 1 y acceder a dicha pgina para ver que todo funciona correctamente. Si como resultado se obtiene una tabla con informacin sobre parmetros, la configuracin de las pginas PHP es correcta. LISTADO 1
<html> <head> <title>PHP y Access</title> </head> <body bgcolor="#ffffff"> <? phpinfo(); ?> </body> </html>
La informacin que puede ver en ese momento se refiere al estado de las variables de PHP as como otros datos sobre su funcionamiento e instalacin. En este momento ya tenemos todos los elementos necesarios funcionando para comenzar a desarrollar una aplicacin en PHP que va a gestionar una agenda de telfonos y direcciones desde un entorno Web, con la ventaja de que tan slo se necesitar un navegador para consultar o aadir informacin. La aplicacin que hemos llamado Agenda, consta de tres secciones que van a permitir realizar las funciones necesarias para su uso: buscar un nmero de telfono, aadir una nueva entrada o borrar alguna de las ya existentes. La base de datos construida en Access va a tener una tabla con los siguientes campos:
Nombre del campo Id Nombre Apellidos Direccion Provincia Cp Telefono fecha_nacimiento Tipo Autonumrico Texto Texto Texto Texto Numrico Numrico Date
La primera pgina que se crea es la que permite aadir nuevas entradas a la agenda, para ello lo primero que hay que realizar es un formulario en el que aparezcan los campos que se desean insertar en la base de datos. Para utilizar la conexin ODBC con pginas PHP se utilizan una serie de funciones que estn implementadas en una de las libreras que la distribucin de PHP contiene, por lo que estn a disposicin del usuario sin que sea necesario cargar ningn mdulo externo. To-das las funciones que estn relacionadas con el acceso a base de datos comienzan sus nombres por el nombre de la base de datos que se est utilizando. En este caso, las funciones a utilizar van a comenzar por odbc seguidas por un _ y a continuacin la accin que realiza la funcin. Si se estuviera utilizando una base de datos mySQL, el nombre de las funciones comenzaran por mysql_ o ora_ en el caso de ser una base de datos Oracle.
121
El primer paso es crear la conexin entre la base de datos, que a partir de este momento ser la conexin ODBC ya creada con la pgina PHP. Para ello se utiliza la funcin odbc_connect(). sta necesita de tres parmetros: el nombre de la conexin ODBC y el nombre de usuario y clave si la base de datos lo necesita. Siguiendo con el ejemplo, la funcin con sus argumentos sera:
$connect = odbc_connect(agenda,,);
La conexin ser identificada a travs de la variable connection. Esta conexin se incluir en todas las pginas PHP que necesiten acceder a la base de datos. Observe que al final de la lnea se aade un punto y coma. La siguiente lnea define la instruccin SQL (Structure Query Language) que incorpora la nueva informacin en la base de datos. Suponiendo que cada campo del formulario tenga un nombre que lo identifique, bastar con aadir la siguiente variable que almacenar la instruccin que se realice contra la base.
$query = insert into datos (nombre, apellidos, direccion, provincia, cp, telefono, fecha_nacimiento) values ('$nombre', '$apellidos','$direccion','$provincia', $cp,$telefono,$fecha_nacimiento);
La variable $query almacenar la sentencia SQL junto a los valores que se van a aadir a la base. Esta lnea por si sola es una variable del tipo cadena (string). Para poder obtener el valor y ejecutar la instruccin se usa odbc_exec(), que necesita dos argumentos: la sentencia SQL a ejecutar y el nombre de la conexin sobre la que se va a ejecutar.
$result = odbc_exec $connect,$query);
A partir de esta lnea la informacin que se haba asociado a cada uno de los campos (nombre, apellido, etc.) se ejecutar y la informacin se almacenar en la base, si no ha habido ningn problema al ejecutar alguna funcin. Siempre hay que tener en cuenta que pueden ocurrir errores inesperados, por este motivo es un buen ejercicio controlar las acciones de la base de datos de forma que si alguna de ellas falla se pueda capturar el error y notificarlo de forma comprensible. Por ejemplo, qu pasara si no se consigue realizar la conexin con la base de datos porque se ha escrito incorrectamente el nombre de la conexin ODBC o se nos ha olvidado crearla. En la primera imagen puede ver el resultado. Observe que al no poder realizarse la conexin con la base de datos ninguna de las funciones de ODBC podr funcionar correctamente pues todas necesitan una conexin establecida. Es interesante realizar una comprobacin en caso de que exista un problema para conectar con la base de datos.
if (!$connect) { print (Error conexin: .$connect); }
Hasta el momento no ha sido necesario mostrar ninguna informacin de la base de datos, pues la funcin de insertar informacin en la base no devuelve ningn resultado si se ha realizado con xito. La segunda pgina que se va a crear es la de bsqueda. Mediante sta se va a poder buscar una de las entradas de la agenda utilizado como criterios de bsqueda tres de los campos: nombre, provincia y telfono. De esta forma se puede introducir el nombre y/o apellidos de una persona y si esta en la agenda, la aplicacin devolver la ficha completa de esa persona. Si no existe esa persona o no se ha encontrado ninguna entrada bajo ese patrn de bsqueda tambin le ser notificado al usuario.
122
Tras crear la conexin con la base de datos, hay que construir la consulta a la base de datos a partir de la informacin introducida en formulario. Como cada campo del formulario estar identificado por una variable tan slo queda utilizar esas variables y hacer todas las combinaciones posibles. Si el usuario realiza una bsqueda introduciendo un nombre o parte de l, la consulta que se puede lanzar a la base de datos puede ser:
$query = select id,nombre,apellidos, direccion,provincia,cp,telefono,fecha_nacimiento from datos where nombre like %.$nombre.%;
Se ha utilizado el modificador like para buscar contenidos en los campos que contengan al menos los caracteres introducidos. Esta variable de tipo string tan slo guardar la consulta en la variable $query. Para ejecutar realmente la consulta se utiliza de nuevo la funcin odbc_exec():
$result = odbc_exec($query,$result);
Observe los dos parmetros: el primero de la variable que tiene almacenada la consulta a lanzar contra la base de datos y el segundo es la variable con el identificador de la conexin a la base. En este caso es necesario mostrar la informacin que contienen cada uno de los campos del registro que cumplen con el criterio de la bsqueda. Aqu debemos usar una nueva funcin: odbc_fetch_row(). Por medio de esta funcin se extrae una fila de datos del resultado de realizar la consulta contra la base de datos. Pero como no se conocen cuantos registros puede haber que cumplan esa condicin en necesario recorrer cada una de las filas hasta llegar al final.
while (odbc_fetch_row($result)) { <instrucciones a ejecutar> }
Utilizando un bucle tipo while se van a realizar las acciones internas hasta que deje de cumplirse la condicin (cuando no existan ms filas seleccionadas). Quiz, est pensando que otra solucin es saber el nmero de registros resultantes y realizar un bucle for por las filas hasta llegar a la ltima. Para ello existe una funcin que de-vuelve el nmero de filas afectadas por la consulta a la base de datos: odbc_num_rows(). Pe-ro hay que sealar que es una funcin que no siempre se ejecuta con xito con algunos controladores ODBC. Si despus de haber ejecutado la consulta, el lector intenta hacer la siguiente prueba:
print(odbc_num_rows($result));
Comprobar que le devuelve como resultado 1, es decir, no ha podido establecer el nmero de filas. Por lo que esta ser una funcin que habr que comprobar su funcionamiento antes de hacer uso de ella. Una vez que ya se pueden recorrer todos y cada uno de los registros resultantes de la consulta en la base de datos es el momento de mostrar la informacin al usuario. Para esto se usa odbc_result(). Esta funcin necesita dos parmetros: el identificador de la conexin a la base y el nombre o posicin del campo a mostrar, devuelve un valor de tipo string que ser el contenido de un campo y una fila en concreto en la base de datos. El campo que se desea ver puede ser referenciado por su nombre o por el nmero que ocupa en la consulta realizada. Si se utiliza el nmero, el primer campo ser el 1 y as sucesivamente. En la consulta realizada el valor 1 correspondera al campo id, el 2 al nombre y as sucesivamente. Ahora, utilizando la funcin anterior para
123
recorrer todas las filas y sta para mostrar el contenido de los campos se puede visualizar el resultado de la bsqueda:
while (odbc_fetch_row($result)) { print(<b>> Nombre: </b> .odbc_result($result,nombre).<br>); print(<b>> Apellidos: </b> .odbc_result($result,apellidos).<br>); print(<b>> Direccin: </b> .odbc_result($result,4).<br>); print(<b>> Provincia: </b> .odbc_result($result,provincia).<br>); print(<b>> CP: </b> .odbc_result($result,5).<br>); print(<b>> Telfono: </b> .odbc_result($result,telefono).<br>); print(<b>> Fecha nacimiento: </b> .odbc_result($result,8).<p>);}
Fjese que algunos de los campos estn identificados por nombre y otros por posicin. De esta forma se pueden obtener todos los datos que han resultado de la bsqueda. En caso de haber varios registros afectados aparecern todos. Si por el contrario no se ha encontrado ningn registro que cumpla ese patrn, simplemente bastar con sacar un mensaje que informe al usuario de ello. Para hacerlo:
if (odbc_fetch_rows($result)) { print(<p><b>Ningun registro encontrado.</b></p>) }
Una vez que se han creado las pginas para buscar y aadir nuevas entradas en la agenda, puede incorporar una tercera que permita borrar entradas no utilizadas o introducidas incorrectamente. La forma de realizar esta pgina es similar a las anteriores. En un primer paso ser necesario mostrar los nombres almacenados en la agenda con el fin de seleccionar la que se eliminar; esto se puede realizar utilizando un desplegable dentro de un formulario.
<select name=borrar" size=1> <option value=- selected>Item que desea borrar <? while (odbc_fetch_row($result)) { $valor = odbc_result($result,1); $dato = odbc_result($result,2). .odbc_result($result,3); print ( <option value=.$valor. >.$dato.\n); } ?> </select>
Se ha usado el mismo modo que en el caso de visualizar los datos para construir el desplegable dinamicamente. Fjese que el valor de cada item viene dado por el identificador almacenado en la variable $valor. Una vez seleccionado el elemento, que ser correspondido con su identificador, se pasa a la fase en la que se realiza un consulta a la base de datos, pero en este caso de borrado, donde el condicionante va a ser que slo se eliminarn aquellos registros que tengan como identificador el seleccionado previamente.
$query = delete from datos where id=.$borrar; $result = odbc_exec($connect,$query);
Conocido el valor del identificador de la entrada a borrar, se construye la consulta de borrado para la base de datos, para ms tarde ejecutarla. En este caso no se devolver ningn valor ni se mostrar ningn mensaje ya
124
que las consultas de eliminacin no muestran ningn resultado (si todo ha ido bien). Es interesante poder mostrar al usuario un mensaje, creado por nosotros, si la operacin se ha realizado con xito.
if ($result==) { print(Error al borrar item); } else { print(Exito al borrar item); }
Esto es as, porque como el usuario puede comprobar haciendo una sencilla prueba que consiste en obtener el resultado de la variable $result ( print($result); ), que almacena el resultado de la ejecucin de la consulta a la base de datos, cuando la consulta se realiza de forma correcta esta variable guarda un valor numrico que corresponde a un identificador de uso interno. Mientras que si la consulta no se ha podio realizar por algn motivo este valor no existir. Este mismo sistema se puede utilizar a la hora de realizar la conexin con la base de datos. Ya que al ejecutar esta funcin se devuelve como resultado un valor cuando la conexin se ha completado y ningn valor si ha habido problemas con la conexin.
if ($connect==) { print(Problemas en conexin<p>); } else { print(De momento todo OK<p>); }
A lo largo de las pruebas el lector ha podido comprobar como se obtiene un mensaje de error, ya que el propio controlador de conexin a la base de datos devuelve un mensaje de error intentado explicar el origen del problema. Este mensaje no vamos a poder modificarlo pues forma parte del sistema, pero si se puede ofrecer ms informacin al usuario a travs de nuestras comprobaciones. Al tratarse de una buena forma de controlar la ejecucin de las pginas PHP, es interesante incluso crear una funcin que gestione los casos de error y est disponible en cualquier momento.
<? function errores($funcion,$accion) { switch ($accion) { case (0): $lugarError = conexin; break; case (1): $lugarError = consulta; break; } if ($funcion==) { print(<p>error:<br>EN: .$luga rError. a la base de datos.<br>); print(Llame al <a href= 'mailto :user@dominio.com'>Admin</a>.</p>);} else {print (La .$accion. es OK);}} ?>
La funcin creada para informar al usuario de los posibles errores necesita dos parmetros: el primero ($funcion) lee el valor que se ha obtenido como resultado de ejecutar la funcin contra la base y el segundo ($accion) especifica el tipo de funcin que se ha pasado a la funcin, para poder personalizar con ms detalle el mensaje de error, aunque es el propio usuario quien ver la necesidad de crear nuevas funciones que controlen y aseguren el buen funcionamiento de la aplicacin.
125
Otras funciones Existen ms funciones que permiten realizar otros cometidos con la base de datos. No est de ms conocerlas para saber qu pueden ofrecer en determinados momentos. Para mejorar el rendimiento del servidor con las pginas PHP es importante cerrar las conexiones abiertas con las bases de datos para liberar recursos. Para ello, y cuando se tenga la seguridad de que ya no se va a hacer uso de esas conexiones, se usa odbc_close(). Si estn abiertas varias conexiones, puede usar odbc_close_all() que tiene el mismo efecto pero sobre todas las conexiones abiertas. Cuando se trabaja con informacin contenida en bases de datos puede necesitar co-nocer todo lo relacionado con la misma y ms concretamente con el campo en el que se encuentra la informacin sobre la que se est realizando la consulta. En algunas ocasiones precisar conocer el nombre del campo que contienen esa informacin, en ese caso la funcin odbc_len_name() devuelve este valor. Si desea ver la longitud que tiene el contenido de ese campo debe usar odbc_field_len(). A la hora de realizar operaciones con la informacin extrada o que se va a grabar en la base de datos puede ser necesario saber el tipo de campo con el fin de no cometer errores; si por ejemplo se desea insertar una cadena de texto en un campo numrico muy probablemente que se tenga algn problema. Para evitar esto basta con utilizar odbc_field_type() que devolver a qu tipo pertenece ese campo y evitar esta clase de errores. Igual que se puede llegar a necesitar el nmero de campo que forman una fila de un conjunto de informacin seleccionada o extrada de la base de datos. Piense, por ejemplo, que se desea presentar la informacin en una tabla. Para poder crear esta tabla es necesario conocer cuantas columnas va a tener (campos). As puede crear un bucle finito desde la primera hasta la ltima de ellas que mostrarn cada una de las columnas que conforman esa fila selecciona en la base de datos. Crear un enlace ODBC Para poder utilizar este ejemplo u otros que utilizan la conexin ODBC para acceder a cualquier fuente de datos es necesario crear un enlace ODBC. La mayora de los sistemas Windows incluyen un icono en el Panel de control denominado Fuentes de datos ODBC (32 bits) para realizar este tipo de configuracin. Junto a l Microsoft incluye una serie de controladores para acceder a los sistemas ms importantes de informacin y a otros ms genricos como ficheros de texto. Adems muchos otros fabricantes proporcionan controladores necesarios para realizar una conexin ODBC a sus base de datos. Este es el caso de Oracle, mySQL, PostgresSQL, etc. Para crear la conexin ODBC para este ejemplo, se deben de seguir los siguientes pasos: 1. Hacer doble clic en el programa Fuentes de datos ODBC (32 bits) dentro de Panel de Control. 2. Seleccionar la pestaa DSN de sistema y pulsar el botn Agregar. 3. A continuacin seleccionar el controlador necesario: Microsoft Access Driver (*.mdb) y pulse el botn Finalizar (fjese el lector en la variedad de controladores disponibles para realizar un enlace ODBC).
126
4. Ahora tan slo queda introducir la informacin necesaria sobre el fichero en el que est la base de datos. El campo Nombre de origen de datos ser el utilizado para realizar la conexin desde la aplicacin que se est desarrollando; la descripcin nos ayudar a diferenciar las diferentes conexiones ODBC cuando sea muchas; y el botn seleccionar nos permite elegir la base de datos que se va a utilizar. Una vez finalizado el proceso, la conexin ODBC ya estar disponible para cualquier aplicacin que necesite acceder a la base de datos elegida.
Ejercicios - Bases de datos 1

El objetivo final es obtener una aplicacin web capaz de gestionar una agenda. Estos ejercicios van encadenados. Cada ejercicio se puede hacer a partir del ejercicio anterior, aadiendo las pginas necesarias. En estos ejercicios no se hace ninguna comprobacin sobre los datos introducidos por el usuario, por lo que la aplicacin no puede considerarse segura.
Bases de datos 1 - Borrar y crear la base de datos

Escriba un programa que permita crear una base de datos.
La pgina principal incluye un men con un enlace a la pgina de borrado y creacin de la tabla. El borrado y creacin de tabla se hace en dos pginas, que incluyen un men con un enlace a la pgina inicial. o La primera pgina contiene un formulario que pide confirmacin. Si se contesta "No", se vuelve a la pgina inicial. Si se contesta "S", se llega a la segunda pgina. o La segunda pgina borra y crea la base de datos, que contiene una tabla con dos campos. Comentarios En una aplicacin real, el borrado y creacin de la base de datos estaran disponibles nicamente para el administrador, pero aqu cualquier usuario puede borrar y crear la base de datos. El proceso de borrar y crear la base de datos se realiza uno tras otro. Lgicamente, la primera vez que se realice el borrado y creacin de la base de datos se obtendr un mensaje de error en el borrado puesto que la base de datos no existe todava, pero las veces siguientes no. Si el usuario intenta acceder directamente a la pgina que crea la tabla (escribiendo la direccin en el navegador), se le redireccionar directamente a la pgina inicial. Esta pueden ser las consultas de creacin de tabla para este proyecto:
// Tamao de los campos en la tabla $tamNombre = 40; // Tamao del campo Nombre
$tamApellidos = 60; // Tamao del campo Apellidos
127
// Consulta de creacin de tabla en MySQL $consulta = "CREATE TABLE $dbTabla ( id INTEGER UNSIGNED NOT NULL AUTO_INCREMENT, nombre VARCHAR($tamNombre), apellidos VARCHAR($tamApellidos), PRIMARY KEY(id) )";
// Consulta de creacin de tabla en SQLite $consulta = "CREATE TABLE $dbTabla ( id INTEGER PRIMARY KEY, nombre VARCHAR($tamNombre), apellidos VARCHAR($tamApellidos) )";
Bases de datos 2 - Aadir registros en la tabla

Amplie el ejercicio anterior de manera que permita incluir registros en la base de datos.
El men inicial incluye una opcin de men con un enlace a la pgina de creacin de un nuevo registro. La creacin del nuevo registro se hace en dos pginas, que incluyen un men con un enlace a la pgina inicial. o La primera pgina contiene un formulario que pide los datos a registrar. o La segunda pgina inserta los datos en la base de datos. Comentarios Si el usuario intenta acceder directamente a la pgina que inserta el registro (escribiendo la direccin en el navegador), se le redireccionar directamente a la pgina inicial. El dato que introduce el usuario debe recogerse con la funcin recogeParaConsulta() comentada en los apuntes. Esta pueden ser las consultas de creacin de tabla para este proyecto:
// Aadir un registro
128
$consulta = "INSERT INTO $dbTabla VALUES (NULL, $nombre, $apellidos)";
Bases de datos 3 - Listar los registros en la tabla

Amplie el ejercicio anterior de manera que permita listar los registros de la base de datos.
El men inicial incluye una opcin de men con un enlace a la pgina que lista los registros existentes. El listado se hace en una pgina, que incluye un men con un enlace a la pgina inicial. Comentarios Para listar los registros:
// Seleccionar todos los registros $consulta = "SELECT * FROM $dbTabla"; $result = $db->query($consulta);
foreach ($result as $valor) { print " <tr>
<td>$valor[nombre]</td> <td>$valor[apellidos]</td> </tr>\n";
Bases de datos 4 - Borrar individualmente registros en la tabla

Amplie el ejercicio anterior de manera que permita borrar individualmente los registros de la base de datos.
El men inicial incluye una opcin de men con un enlace a la pgina que permite borrar los registros existentes. El borrado se hace en dos pginas, que incluyen un men con un enlace a la pgina inicial. o La primera pgina contiene un formulario que muestra los registros existentes y que permtie marcar los datos a borrar. o La segunda pgina borra los registros en la base de datos. Comentarios Para seleccionar los registros a borrar, se puede utilizar una casilla de verificacin cuyo nombre contenga el id del registro. Lo mejor es que los nombres formen una matriz.
129
// Imprime casilla de verificacin print " <td align=\"center\"><input type=\"checkbox\"".
" name=\"id[$valor[id]]\" /></td>"
Para borrar los registros:

// Recoge los registros seleccionados $id = recogeMatrizParaConsulta($db, 'id');
foreach ($id as $indice => $valor) { $consulta = "DELETE FROM $dbTabla WHERE id=$indice"; if ($db->query($consulta)) { print "<p>Registro borrado correctamente.</p>\n"; } else { print "<p>Error al borrar el registro.</p>\n"; } }
Bases de datos 5 - Buscar registros en la tabla

Amplie el ejercicio anterior de manera que permita buscar registros de la base de datos.
El men inicial incluye una opcin de men con un enlace a la pgina que permite buscar en los registros existentes. El borrado se hace en dos pginas, que incluyen un men con un enlace a la pgina inicial. o La primera pgina contiene un formulario que pide los datos a buscar. o La segunda pgina muestra los registros encontrados Comentarios La primera pgina es un formulario como el de aadir registros. Para buscar los registros, se puede utilizar la siguiente consulta.
// Imprime casilla de verificacin
130
$nombre $nombre
= recogeParaConsulta($db, 'nombre'); = quitaComillasExteriores($nombre);
$apellidos = recogeParaConsulta($db, 'apellidos'); $apellidos = quitaComillasExteriores($apellidos);
$consulta = "SELECT * FROM $dbTabla WHERE nombre LIKE '%$nombre%' AND apellidos LIKE '%$apellidos%'";
La funcin RecogeParaConsulta inserta comillas al principio y al final de la cadena y esas comillas daran problemas en la consulta (para que se puedan hacer bsquedas parciales se ha aadido el comodn % al principio y final de la cadena de bsqueda y se han tenido que escribir las comillas). As que hay que utilizar una funcin que quite esas comillas, que se encuentra en los apuntes.
Bases de datos 6 - Modificar registros en la tabla

Amplie el ejercicio anterior de manera que permita modificar registros de la base de datos.
El men inicial incluye una opcin de men con un enlace a la pgina que permite modificar los registros existentes. La modificacin se hace en tres pginas, que incluyen un men con un enlace a la pgina inicial. o La primera pgina contiene un formulario que permite seleccionar el registro a modificar. o La segunda pgina muestra el registro seleccionado y permite modificarlo. o La tercera pgina guarda los datos modificados. Comentarios La primera pgina es un formulario como el de borrar, salvo que en vez de una casilla de verificacin, se puede utilizar un botn radio cuyo valor contenga el id del registro.
// Imprime botn radio print " <td align=\"center\"><input type=\"radio\" "
."name=\"id\" value=\"$valor[id]\" /></td>"
En la segunda pgina, para obtener el registro seleccionado, la consulta puede ser la siguiente (como slo debe devolver un registro no tiene hacer una bucle foreach y es suficiente con utilizar el mtodo: $result->fetch().
131
// Recoge el registro seleccionado $id = recogeParaConsulta($db, 'id');
$consulta = "SELECT * FROM $dbTabla WHERE id=$id"; $result = $db->query($consulta); $valor = $result->fetch();
La segunda pgina es un formulario como el de aadir, salvo que los campos contienen el valor del registro seleccionado en la primera pgina:
// Muestra valor print " <td><input type=\"text\" name=\"nombre\" size=\"$tamNombre\" "
."maxlength=\"$tamNombre\" value=\"$valor[nombre]\" id=\"cursor\" /></td>"
En la segunda pgina hay que incluir en el formulario un control oculto que contenga el id del registro para pasarselo a la tercera pgina
// Control oculto con el id del registro modificado <p><input type=\"hidden\" name=\"id\" value=\"$id\" /> <input type=\"submit\" value=\"Actualizar\" /></p>
En la tercera pgina, para modificar el registro seleccionado, la consulta puede ser la siguiente:
// Modifica el registro seleccionado $nombre = recogeParaConsulta($db, 'nombre');
$apellidos = recogeParaConsulta($db, 'apellidos'); $id = recogeParaConsulta($db, 'id');
$consulta = "UPDATE $dbTabla SET nombre=$nombre, apellidos=$apellidos WHERE id=$id";
132
133

Diseño y Elaboracion de Paginas Web

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Diseño y Elaboracion de Paginas Web

Uploaded by

Copyright:

Available Formats

Elaboracin y Diseo de Pginas Web

Ing. Reina Liliana Lpez Reyes e Ing. Feliciano Nevrez Raizola

conalep Nuevo Len Ing. Adrin Sada Trevio

1. Desarrollo de pginas web estticas.

Ing. Reina Liliana Lpez Reyes e Ing. Feliciano Nevrez Raizola

Ing. Reina Liliana Lpez Reyes e Ing. Feliciano Nevrez Raizola

Navegadores web basados en texto: Links Lynx Netrik w3m

Primeros navegadores (que ya no estn en desarrollo): Cello CyberDog MidasWWW Mosaic

Ing. Reina Liliana Lpez Reyes e Ing. Feliciano Nevrez Raizola

Ing. Reina Liliana Lpez Reyes e Ing. Feliciano Nevrez Raizola

Ing. Reina Liliana Lpez Reyes e Ing. Feliciano Nevrez Raizola

Ing. Reina Liliana Lpez Reyes e Ing. Feliciano Nevrez Raizola

Ing. Reina Liliana Lpez Reyes e Ing. Feliciano Nevrez Raizola

Ing. Reina Liliana Lpez Reyes e Ing. Feliciano Nevrez Raizola

Ing. Reina Liliana Lpez Reyes e Ing. Feliciano Nevrez Raizola

Ing. Reina Liliana Lpez Reyes e Ing. Feliciano Nevrez Raizola

Ing. Reina Liliana Lpez Reyes e Ing. Feliciano Nevrez Raizola

Ejemplo de rbol Funcional:

Ing. Reina Liliana Lpez Reyes e Ing. Feliciano Nevrez Raizola

Disea la Estructura de las pginas. EJEMPLO:

Ing. Reina Liliana Lpez Reyes e Ing. Feliciano Nevrez Raizola

Genera Bocetos de Diseo. Ejemplo:

Ing. Reina Liliana Lpez Reyes e Ing. Feliciano Nevrez Raizola

Ing. Reina Liliana Lpez Reyes e Ing. Feliciano Nevrez Raizola

Ing. Reina Liliana Lpez Reyes e Ing. Feliciano Nevrez Raizola

<meta name="keywords" content="conalep colegio tecnolgica"> </head> ...

Ing. Reina Liliana Lpez Reyes e Ing. Feliciano Nevrez Raizola

Sera equivalente a poner:

Ing. Reina Liliana Lpez Reyes e Ing. Feliciano Nevrez Raizola

<html> ... <body background="fondo.gif"> ... </body> </html>

Ing. Reina Liliana Lpez Reyes e Ing. Feliciano Nevrez Raizola

Significado fuente color del texto tamao del texto

Por ejemplo, para insertar el texto:

Ing. Reina Liliana Lpez Reyes e Ing. Feliciano Nevrez Raizola

<body> <basefont color="#006699" size="4" face="Arial"> ...

conalep Monterrey III

A continuacin se muestran algunas etiquetas asociadas al tipo de informacin: Etiqueta

Significado cita ejemplo de cdigo definicin eliminado nfasis

Ing. Reina Liliana Lpez Reyes e Ing. Feliciano Nevrez Raizola

<ins> <kbd> <samp> <strong> <sub> <sup> <var>

insertado teclado muestra destacado subndice superndice variable

conalep Monterrey III conalep Monterrey III conalep Monterrey III

conalep Monterrey III

Ing. Reina Liliana Lpez Reyes e Ing. Feliciano Nevrez Raizola

Ing. Reina Liliana Lpez Reyes e Ing. Feliciano Nevrez Raizola

Ing. Reina Liliana Lpez Reyes e Ing. Feliciano Nevrez Raizola

Significado alineacin de la regla dentro de la pgina

Posibles valores (izquierda) (derecha)

center (centro) width

alto de la regla eliminar el sombreado de la regla

Ing. Reina Liliana Lpez Reyes e Ing. Feliciano Nevrez Raizola

A continuacin se muestran los distintos encabezados existentes: Etiqueta

Ing. Reina Liliana Lpez Reyes e Ing. Feliciano Nevrez Raizola

Habra que escribir:

Ing. Reina Liliana Lpez Reyes e Ing. Feliciano Nevrez Raizola

Habra que escribir:

Ing. Reina Liliana Lpez Reyes e Ing. Feliciano Nevrez Raizola

Habra que escribir:

Ing. Reina Liliana Lpez Reyes e Ing. Feliciano Nevrez Raizola

<I> Cursiva (italic).

Ing. Reina Liliana Lpez Reyes e Ing. Feliciano Nevrez Raizola

Ing. Reina Liliana Lpez Reyes e Ing. Feliciano Nevrez Raizola

Habra que escribir:

HTML Numero x y z { | } ~

¡ ¢ £ ¤ ¥ ¦

¡ ¢ £ ¤ ¥ ¦