Diseño y elaboracion de paginas web

136
conalep Nuevo León Ing. Adrián Sada Treviño Ing. Reina Liliana López Reyes e Ing. Feliciano Nevárez Raizola Elaboración y Diseño de Páginas Web

Transcript of Diseño y elaboracion de paginas web

Page 1: Diseño y elaboracion de paginas web

c o n a l e p

N u e v o L e ó n

I n g . A d r i á n S a d a T r e v i ñ o

Ing. Reina Liliana López Reyes e

Ing. Feliciano Nevárez Raizola

Elaboración y Diseño de Páginas Web

Page 2: Diseño y elaboracion de paginas web

Contenido

1. Desarrollo de páginas web estáticas. ..................................................................................................... 1

1.1 Determina la estructura del sitio web con base en las necesidades del usuario detectadas. .................. 1

1.1.1 Elabora la justificación y la estructura propuesta del sitio web acorde con los requerimientos del cliente .......................................................................................................................................................... 1

1.2 Elabora páginas web estáticas 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 páginas web dinámicas. .............................................................................................................. 96

2.1 Implementa interactividad a las páginas web, mediante el desarrollo de código de programación en un lenguaje script...................................................................................................................................... 96

2.2 Establece el acceso a bases de datos en páginas web mediante el desarrollo de código en un lenguaje de programación. .................................................................................................................................... 114

Pasos previos I: Instalación del PWS ......................................................................................................... 114

Conexión 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 - Añadir 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

Page 3: Diseño y elaboracion de paginas web

Bases de datos 5 - Buscar registros en la tabla .............................................................................. 130

Comentarios .......................................................................................................................................... 130

Bases de datos 6 - Modificar registros en la tabla .......................................................................... 131

Comentarios .......................................................................................................................................... 131

Page 4: Diseño y elaboracion de paginas web

Ing. Reina Liliana López Reyes e Ing. Feliciano Nevárez Raizola 1

1. Desarrollo de páginas web estáticas.

1.1 Determina la estructura del sitio web con base en las necesidades del usuario

detectadas.

1.1.1 Elabora la justificación y la estructura propuesta del sitio web acorde con los requerimientos

del cliente

A. Identificación de elementos Web.

Internet.

Internet es un conjunto descentralizado de redes de comunicación interconectadas que utilizan la familia de

protocolos TCP/IP, garantizando que las redes físicas heterogéneas que la componen funcionen como una red

lógica única, de alcance mundial. Sus orígenes se remontan a 1969, cuando se estableció la primera conexión

de computadoras, conocida como ARPANET, entre tres universidades en California y una en Utah, Estados

Unidos.

Uno de los servicios que más éxito ha tenido en Internet ha sido la World Wide Web (WWW, o "la Web"), hasta

tal punto que es habitual la confusión entre ambos términos. 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 transmisión.

Existen, por tanto, muchos otros servicios y protocolos en Internet, aparte de la Web: el envío de correo

electrónico (SMTP), la transmisión de archivos (FTP y P2P), las conversaciones en línea (IRC), la mensajería

instantánea y presencia, la transmisión de contenido y comunicación multimedia -telefonía (VoIP), televisión

(IPTV)-, los boletines electrónicos (NNTP), el acceso remoto a otros dispositivos (SSH y Telnet) o los juegos en

línea.

El género de la palabra Internet es ambiguo, según el Diccionario de la Real Academia Española.

World Wide Web.

En informática, la World Wide Web, es un sistema de distribución de información basado en hipertexto o

hipermedios enlazados y accesibles a través de Internet. Con un navegador web, un usuario visualiza sitios web

compuestos de páginas web que pueden contener texto, imágenes, videos u otros contenidos multimedia, y

navega a través de ellas usando hiperenlaces.

La Web fue creada alrededor de 1989 por el inglés 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 estándares Web (como los lenguajes de marcado con los que se crean las

páginas web), y en los últimos años ha abogado por su visión de una Web Semántica.

Page 5: Diseño y elaboracion de paginas web

Ing. Reina Liliana López Reyes e Ing. Feliciano Nevárez Raizola 2

Navegadores Web.

Un navegador o navegador web (del inglés, web browser) es un programa que permite ver la información que

contiene una página web (ya se encuentre ésta alojada en un servidor dentro de la World Wide Web o en un

servidor local).

El navegador interpreta el código, HTML generalmente, en el que está escrita la página web y lo presenta en

pantalla permitiendo al usuario interactuar con su contenido y navegar hacia otros lugares de la red mediante

enlaces o hipervínculos.

La funcionalidad básica de un navegador web es permitir la visualización de documentos de texto,

posiblemente con recursos multimedia incrustados. Los documentos pueden estar ubicados en la computadora

en donde está el usuario, pero también pueden estar en cualquier otro dispositivo que esté conectado a la

computadora del usuario o a través de Internet, y que tenga los recursos necesarios para la transmisión de los

documentos (un software servidor web).

Tales documentos, comúnmente denominados páginas web, poseen hipervínculos que enlazan una porción de

texto o una imagen a otro documento, normalmente relacionado con el texto o la imagen.

El seguimiento de enlaces de una página a otra, ubicada en cualquier computadora conectada a la Internet, se

llama navegación, de donde se origina el nombre navegador (aplicado tanto para el programa como para la

persona que lo utiliza, a la cual también se le llama cibernauta). Por otro lado, hojeador es una traducción

literal del original en inglés, browser, aunque su uso es minoritario.

Ejemplos de navegadores web

Existe una lista detallada de navegadores, motores de renderización y otros temas asociados en la categoría

asociada.

KHTML

Konqueror (basado por defecto en KHTML)

Basado en WebKit (fork KHTML)

Safari

Chromium

Google Chrome

SRWare Iron

Flock (a partir de la versión 3)

Epiphany (a partir de la versión 2.28)

Midori

Arora

Internet Explorer y derivados:

Avant Browser

Maxthon

G-Browser

Page 6: Diseño y elaboracion de paginas web

Ing. Reina Liliana López Reyes e Ing. Feliciano Nevárez Raizola 3

Slim Browser

AOL Explorer

Mozilla (Gecko) y derivados:

Mozilla Firefox

Flock

Iceweasel

Netscape Navigator (a partir de la versión 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 versión 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 están en desarrollo):

Cello

CyberDog

MidasWWW

Mosaic

Page 7: Diseño y elaboracion de paginas web

Ing. Reina Liliana López Reyes e Ing. Feliciano Nevárez Raizola 4

Spyglass Mosaic

ViolaWWW

OHT-Erwise

Protocolo HTTP.

Hypertext Transfer Protocol o HTTP (en español protocolo de transferencia de hipertexto) es el protocolo

usado en cada transacción de la World Wide Web. HTTP fue desarrollado por el World Wide Web Consortium y

la Internet Engineering Task Force, colaboración que culminó en 1999 con la publicación de una serie de RFC, el

más importante de ellos es el RFC 2616 que especifica la versión 1.1. HTTP define la sintaxis y la semántica 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 petición-respuesta entre un cliente y un servidor. Al

cliente que efectúa la petición (un navegador web o un spider) se lo conoce como "user agent" (agente del

usuario). A la información 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 ejecución de un programa, una consulta a

una base de datos, la traducción automática de un documento, etc.

HTTP es un protocolo sin estado, es decir, que no guarda ninguna información sobre conexiones anteriores. El

desarrollo de aplicaciones web necesita frecuentemente mantener estado. Para esto se usan las cookies, que

es información que un servidor puede almacenar en el sistema cliente. Esto le permite a las aplicaciones web

instituir la noción de "sesión", y también permite rastrear usuarios ya que las cookies pueden guardarse en el

cliente por tiempo indeterminado.

Protocolo FTP.

FTP (sigla en inglés de File Transfer Protocol - Protocolo de Transferencia de Archivos) en informática, 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 Aplicación del modelo de capas de red TCP/IP al usuario, utilizando

normalmente el puerto de red 20 y el 21. Un problema básico de FTP es que está pensado para ofrecer la

máxima velocidad en la conexión, pero no la máxima seguridad, ya que todo el intercambio de información,

desde el login y password del usuario en el servidor hasta la transferencia de cualquier archivo, se realiza en

texto plano sin ningún tipo de cifrado, con lo que un posible atacante puede capturar este tráfico, 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 tráfico.

Page 8: Diseño y elaboracion de paginas web

Ing. Reina Liliana López Reyes e Ing. Feliciano Nevárez Raizola 5

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 tecnologías sobre las que se

basa la Web.

Organización de la W3C

Fue creada el 1 de octubre de 1994 por Tim Berners-Lee en el MIT, actual sede central del consorcio.

Uniéndose posteriormente en abril de 1995 INRIA en Francia, reemplazado por el ERCIM en el 2003 como el

huésped europeo del consorcio y Universidad de Keiō (Shonan Fujisawa Campus) en Japón en septiembre de

1996 como huésped asiático. 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, España, Finlandia, Grecia, Hong Kong, Hungría,

India, Israel, Italia, Marruecos, Suecia y Reino Unido e Irlanda (oficina conjunta) (Oficinas W3C.)

La oficina española del W3C, establecida en el 2003, está albergada por la Fundación CTIC en el Parque

Científico Tecnológico de Gijón (Principado de Asturias).

CSS.

Las hojas de estilo en cascada (en inglés Cascading Style Sheets), CSS es un lenguaje usado para definir la

presentación de un documento estructurado escrito en HTML o XML (y por extensión en XHTML). El W3C

(World Wide Web Consortium) es el encargado de formular la especificación de las hojas de estilo que servirán

de estándar para los agentes de usuario o navegadores.

La idea que se encuentra detrás del desarrollo de CSS es separar la estructura de un documento de su

presentación.

Por ejemplo, el elemento de HTML <h1> indica que un bloque de texto es un encabezamiento y que es más

importante que un bloque etiquetado como <H2>. Versiones más antiguas de HTML permitían atributos extra

dentro de la etiqueta abierta para darle formato (como el color o el tamaño de fuente). No obstante, cada

etiqueta <H1> debía disponer de la información si se deseaba un diseño consistente para una página y,

además, una persona que leía esa página con un navegador perdía totalmente el control sobre la visualización

del texto.

Cuando se utiliza CSS, la etiqueta <H1> no debería proporcionar información sobre cómo será visualizado,

solamente marca la estructura del documento. La información de estilo, separada en una hoja de estilo,

Page 9: Diseño y elaboracion de paginas web

Ing. Reina Liliana López Reyes e Ing. Feliciano Nevárez Raizola 6

específica cómo se ha de mostrar <H1>: color, fuente, alineación del texto, tamaño y otras características no

visuales, como definir el volumen de un sintetizador de voz, por ejemplo.

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

En este último caso podrían 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 elaboración de páginas web. Es usado para describir la estructura y el contenido en

forma de texto, así como para complementar el texto con objetos tales como imágenes. HTML se escribe en

forma de "etiquetas", rodeadas por corchetes angulares (<,>). HTML también 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 también es usado para referirse al contenido del tipo de MIME text/html o todavía más ampliamente

como un término genérico 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 programación interpretado, dialecto del estándar ECMAScript. Se define como

orientado a objetos, basado en prototipos, imperativo, débilmente tipado y dinámico.

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 páginas web dinámicas, 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 también

significativo.

JavaScript se diseñó con una sintaxis similar al C, aunque adopta nombres y convenciones del lenguaje de

programación Java. Sin embargo Java y JavaScript no están relacionados y tienen semánticas y propósitos

diferentes.

Todos los navegadores modernos interpretan el código JavaScript integrado en las páginas web. Para

interactuar con una página web se provee al lenguaje JavaScript de una implementación del Document Object

Model (DOM).

Tradicionalmente se venía utilizando en páginas web HTML para realizar operaciones y únicamente en el marco

de la aplicación cliente, sin acceso a funciones del servidor. JavaScript se interpreta en el agente de usuario, al

mismo tiempo que las sentencias van descargándose junto con el código HTML.

Page 10: Diseño y elaboracion de paginas web

Ing. Reina Liliana López Reyes e Ing. Feliciano Nevárez Raizola 7

XHTML

XHTML, acrónimo en inglés de eXtensible Hypertext Markup Language (lenguaje extensible de marcado de

hipertexto), es el lenguaje de marcado pensado para sustituir a HTML como estándar para las páginas web. En

su versión 1.0, XHTML es solamente la versión XML de HTML, por lo que tiene, básicamente, las mismas

funcionalidades, pero cumple las especificaciones, más estrictas, de XML. Su objetivo es avanzar en el proyecto

del World Wide Web Consortium de lograr una web semántica, donde la información, y la forma de presentarla

estén claramente separadas. La versión 1.1 es similar, pero parte a la especificación en módulos. En sucesivas

versiones la W3C planea romper con los tags clásicos traídos de HTML.

XML

XML, siglas en inglés de eXtensible Markup Language (lenguaje de marcas extensible), es un metalenguaje

extensible de etiquetas desarrollado por el World Wide Web Consortium (W3C). Es una simplificación y

adaptación del SGML y permite definir la gramática de lenguajes específicos (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

definición son XHTML, SVG, MathML.

XML no ha nacido sólo para su aplicación en Internet, sino que se propone como un estándar para el

intercambio de información estructurada entre diferentes plataformas. Se puede usar en bases de datos,

editores de texto, hojas de cálculo y casi cualquier cosa imaginable.

XML es una tecnología sencilla que tiene a su alrededor otras que la complementan y la hacen mucho más

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 información de una manera segura, fiable y fácil.

Lenguajes del lado del servidor.1

CGI

Es el sistema más antiguo que existe para la programación de las páginas dinámicas 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 también empleados para construirlos.

PERL

Perl es un lenguaje de programación interpretado, al igual que muchos otros lenguajes de Internet como

JavaScript o ASP. Esto quiere decir que el código 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

Page 11: Diseño y elaboracion de paginas web

Ing. Reina Liliana López Reyes e Ing. Feliciano Nevárez Raizola 8

quiere ejecutar se lee el código y se pone en marcha interpretando lo que hay escrito. Además es extensible a

partir de otros lenguajes, ya que desde Perl podremos hacer llamadas a subprogramas escritos en otros

lenguajes. También desde otros lenguajes podremos ejecutar código Perl.

ASP

ASP (Active Server Pages) es la tecnología desarrollada por Microsoft para la creación de páginas dinámicas del

servidor. ASP se escribe en la misma página web, utilizando el lenguaje Visual Basic Script o Jscript (JavaScript

de Microsoft).

PHP

PHP es el acrónimo de Hipertext Preprocesor. Es un lenguaje de programación del lado del servidor gratuito e

independiente de plataforma, rápido, con una gran librería de funciones y mucha documentación.

JSP

JSP es un acrónimo de Java Server Pages, que en castellano vendría a decir algo como Páginas de Servidor Java.

Es, pues, una tecnología orientada a crear páginas web con programación en Java.

Con JSP podemos crear aplicaciones web que se ejecuten en variados servidores web, de múltiples

plataformas, ya que Java es en esencia un lenguaje multiplataforma. Por tanto, las JSP podremos escribirlas con

nuestro editor HTML/XML habitual.

B. Comprobación de uso de estándares en el código de programación.

Validación de HTML.

Es un sistema basado en Internet y presentado en el propio sitio del W3C2 y que permite detectar errores en la

forma de utilizar el lenguaje HTML y XML en la construcción de un Sitio Web. Lo interesante del programa es

que muestra en detalle los errores del código en la página que se pruebe, con lo cual se puede llegar a una

directa corrección de los problemas que se hayan detectado. La importancia de tener un código correctamente

validado es que se asegura, a partir de esa certificación, que la página web puede ser vista sin problemas,

desde cualquier programa visualizador que cumpla con los estándares internacionales en la materia.

Validación de CSS.

El servicio de Validación de CSS del W3C es un software libre creado por el W3C para ayudar a los diseñadores

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.

2 http://validator.w3.org/

Page 12: Diseño y elaboracion de paginas web

Ing. Reina Liliana López Reyes e Ing. Feliciano Nevárez Raizola 9

Si eres un desarrollador Web o un diseñador Web, esta herramienta será un aliado inestimable. No sólo

comparará tus hojas de estilo con las especificaciones CSS, ayudándote a encontrar errores comunes, errores

tipográficos, o usos incorrectos de CSS, también te dirá cuando tu CSS presenta algún riesgo en cuanto a

usabilidad.

La mayor parte de los documentos de la Web están escritos en un lenguaje informático llamado HTML. Este

lenguaje puede utilizarse para crear páginas con información estructurada, enlaces, y objetos multimedia. Para

colores, texto y posicionamiento HTML utiliza un lenguaje de estilo llamado CSS, acrónimo 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.

Page 13: Diseño y elaboracion de paginas web

Ing. Reina Liliana López Reyes e Ing. Feliciano Nevárez Raizola 10

Ejercicio núm. 1: Definición 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 organización:

Nombre.

Dirección.

Ciudad.

Giro de la empresa.

Describe los objetivos del sitio.

Refleja en una lista el conjunto de objetivos específicos, 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 público.

EJEMPLO:

¿A que vino a la institución?

¿Tiene acceso a Internet?

¿Propio o a través de Cibercafés?

¿Qué tipo de información Internet le habría evitado este viaje?

¿Qué le gustaría ver en el sitio de Internet de esta Institución?

- Entrevista al equipo de desarrollo.

EJEMPLO:

Preguntas al equipo de desarrollo

¿Cuáles 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 Pérez, agricultor de

Maíz, 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 diseñado, encontraría la respuesta a

su pregunta?”

Definición de Contenidos.

Emplea como mínimo:

Ejemplo:

Acerca de la Institución: entregar la información completa referida a Autoridades, Organigrama,

Normativa legal asociada, Oficinas, Horas de Atención, Teléfonos, etc.

Productos / Servicios: destacar las actividades principales que el usuario puede hacer en la institución;

puede incluir una guía de trámites que facilite las acciones de las personas que acudirán a la institución

Page 14: Diseño y elaboracion de paginas web

Ing. Reina Liliana López Reyes e Ing. Feliciano Nevárez Raizola 11

y que considere servicios interactivos para hacerlos desde el Sitio Web.

Novedades de la Institución: ú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 envío de mensajes electrónicos.

Sistema de envío de noticia por mail a un amigo.

Mapa del sitio.

Etc.

Análisis de Sitios Similares.

Define y describe la Estructura del sitio.

Mapas del sitio.

Ejemplo de Árbol Organizacional:

Page 15: Diseño y elaboracion de paginas web

Ing. Reina Liliana López Reyes e Ing. Feliciano Nevárez Raizola 12

Ejemplo de Árbol Funcional:

Describe cada uno de los elementos que integraran los Sistemas de Navegación 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 Página: usualmente ubicado en la parte inferior de cada página, indica el nombre de la

institución, teléfonos, dirección física y de correo electrónico.

Barra Corporativa: ofrece diversas opciones de información respecto del sitio y tal como el anterior, se

muestra en todas las páginas.

Etc., Etc.

Page 16: Diseño y elaboracion de paginas web

Ing. Reina Liliana López Reyes e Ing. Feliciano Nevárez Raizola 13

Diseña la Estructura de las páginas.

EJEMPLO:

Page 17: Diseño y elaboracion de paginas web

Ing. Reina Liliana López Reyes e Ing. Feliciano Nevárez Raizola 14

Genera Bocetos de Diseño.

Ejemplo:

Page 18: Diseño y elaboracion de paginas web

Ing. Reina Liliana López Reyes e Ing. Feliciano Nevárez Raizola 15

1.2 Elabora páginas web estáticas haciendo uso del lenguaje de etiquetas XHTML.

Cabecera de un documento HTML

• Estructura de una página

A lo largo de este tema vamos a aprender a crear una página básica.

La estructura básica de una página es:

<html> <head> ... </head> <body> ... </body> </html>

Ahora veamos cómo funcionan estas etiquetas.

• Identificador del tipo de documento <html>

Todas las páginas WEB escritas en HTML tienen que tener la extensión 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 código HTML de la página.

Por ejemplo:

<html> ... </html>

• Cabecera de la página <head>

La cabecera de la página se utiliza para agrupar información sobre ella, como puede ser el título.

Está formada por las etiquetas <head> y </head>. La etiqueta <head> va justo debajo de la etiqueta <html>.

Por ejemplo:

<html> <head> ... </head> ... </html>

Page 19: Diseño y elaboracion de paginas web

Ing. Reina Liliana López Reyes e Ing. Feliciano Nevárez Raizola 16

Entre las etiquetas <head> y </head>, las etiquetas que podemos encontrar y más se utilizan son: <link>,

<style>, <script> (estas etiquetas las veremos más adelante), <meta> y la etiqueta <title> que te

explicamos a continuación.

- La etiqueta <meta>

La etiqueta <meta> se utiliza para añadir información sobre la página. Esta información puede ser utilizada por

los buscadores.

Los buscadores consultan la información de la etiqueta <meta> de las páginas, buscando coincidencias con lo

que el usuario pretende encontrar.

A través de esta etiqueta pueden especificarse los atributos name y content. El atributo name indica el tipo

de información, y el atributo content indica el valor de dicha información.

Para indicar el tipo de información podemos utilizar cualquier palabra que deseemos, como puede ser "Autor",

"Palabras clave", "Descripción", etc. Pero debido a que la mayoría de buscadores están en inglés, es preferible

que el tipo de información se especifique en inglés.

Los tipos de información más utilizados son los siguientes:

Tipo Significado

Author Autor de la página

classification Palabras para clasificar la página en los buscadores

Description Descripción del contenido de la página

Generador Programa utilizado para crear la página

Keywords Palabras clave

La etiqueta <meta> no necesita etiqueta de cierre. Para cada etiqueta <meta> solo es posible indicar un tipo

de información 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 código indica que el autor de la página es conalep, que la página trata sobre un

Colegio de Educación Profesional Tecnológica, y especifica algunas palabras clave a ser consultadas por los

buscadores:

<html> <head> ... <meta name="author" content="coanlep"> <meta name="description" content=" Colegio de Educación Profesional Tecnológica ">

Page 20: Diseño y elaboracion de paginas web

Ing. Reina Liliana López Reyes e Ing. Feliciano Nevárez Raizola 17

<meta name="keywords" content="conalep colegio tecnológica"> </head> ...

La etiqueta <meta> también se utiliza para indicarle al navegador alguna información o alguna acción que

debe realizar. En este caso se utiliza el atributo http-equiv, en lugar del atributo name.

Por ejemplo, imaginemos que por algún motivo queremos que nuestra página se actualice automáticamente

cada 30 segundos. En ese caso, deberíamos utilizar la acción Refresh (actualizar). Podríamos utilizar el siguiente

código:

<html> <head> ... <meta http-equiv="Refresh" content="30"> </head> ...

Ahora imaginemos que hemos cambiado la dirección en la que se encuentra nuestra página WEB, y queremos

que cuando algún usuario visite la página en la dirección antigua, a los 5 segundos el navegador lo redirija

automáticamente a la dirección nueva. En ese caso podríamos insertar el siguiente código en la página que se

encuentra en la dirección antigua:

<html> <head> ... <meta http-equiv="Refresh" content="5”; URL=”http://www.conalepnl.edu.mx/"> </head> ...

De este modo, el navegador realizaría la función de actualizar la página, pero cargando la que se encontrara en

la nueva dirección (URL=”http://www.conalepnl.edu.mx/”).

• Título de la página <title>

El título de la página es el que aparecerá en la parte superior de la ventana del navegador, cuando la página

esté cargada en él.

Para asignar un título a una página 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>

Page 21: Diseño y elaboracion de paginas web

Ing. Reina Liliana López Reyes e Ing. Feliciano Nevárez Raizola 18

Cuerpo de un Documento HTML.

• Cuerpo del documento <body>

El cuerpo del documento contiene la información propia del documento, es decir lo deseamos que se visualice,

el texto de la página, las imágenes, 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 través de la etiqueta <body> es posible establecer el color o la imagen de fondo de la página.

El color de fondo puede establecerse a través 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 página sea de color azul, tendremos que escribir:

<html> ... <body bgcolor="#0000FF"> ... </body> </html>

Sería equivalente a poner:

<html> ... <body bgcolor="blue"> ... </body> </html>

La imagen de fondo puede establecerse a través del atributo background, indicando la ruta en la que se

encuentra la imagen.

Por ejemplo, para hacer que la imagen de fondo de una página sea la imagen fondo.gif, que se encuentra en

el mismo directorio en el que se encuentra guardada la página, tendremos que escribir:

Page 22: Diseño y elaboracion de paginas web

Ing. Reina Liliana López Reyes e Ing. Feliciano Nevárez Raizola 19

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

En el caso de que la imagen no se encuentre en el mismo directorio que la página, y se encuentre dentro de la

carpeta imágenes, que sí se encuentra en el mismo directorio que la página, tendremos que escribir:

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

A través de la etiqueta <body> también es posible establecer el color del texto de la página a través del

atributo text.

Por ejemplo, para hacer que el color del texto de una página sea de color rojo, tendremos que escribir:

<html> ... <body text="#FF0000"> ... </body> </html>

Entre el borde de la ventana y el contenido de la página existe un margen, cuyo tamaño en píxeles 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 página no tenga margen superior, y tenga un margen izquierdo de 20 píxeles,

tendremos que escribir:

<html> ... <body leftmargin="20" topmargin="0" marginwidth="20" marginheight="0" > ... </body> </html>

• Comentarios

En ocasiones podemos desear añadir comentarios aclaratorios dentro del código, de manera que no sean

visualizados en el navegador, pero sí a la hora de editar el documento.

Para insertar comentarios dentro del código, basta con insertar el texto entre <!-- y //-->.

Page 23: Diseño y elaboracion de paginas web

Ing. Reina Liliana López Reyes e Ing. Feliciano Nevárez Raizola 20

Todo el código que se inserte entre estos símbolos no será visualizado en los navegadores.

Por ejemplo, para insertar el texto siguiente con un comentario:

¡Bienvenidos, esta es mi 1ª página!

Habría que escribir:

<!-- A continuación aparecerá una línea de texto//--> &iexcl;Bienvenidos, esta es mi 1&ordf; p&aacute;gina!

• Tamaño y tipo de letra.

- Formatear el texto <font>

Las propiedades del texto pueden modificarse a través 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 Significado Posibles valores

face fuente nombre de la fuente, o fuentes

color color del texto número hexadecimal o texto predefinido

Size tamaño del texto valores del 1 al 7, siendo por defecto el 3, o desplazamiento respecto al

tamaño por defecto, añadiendo + o - delante del valor

Por ejemplo, para insertar el texto:

Bienvenidos a www.conalep.edu.mx

Habría que escribir:

<font color="#993366" size="4" face="Comic Sans MS, Arial, MS Sans Serif"> Bienvenidos a www.conalep.edu.mx </font>

También es posible definir una fuente para todo el documento. Para ello, hay que insertar la etiqueta

<basefont> después 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:

Page 24: Diseño y elaboracion de paginas web

Ing. Reina Liliana López Reyes e Ing. Feliciano Nevárez Raizola 21

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

Este código haría que la fuente del documento fuera por defecto de color azul, de tamaño 4 y Arial. Si después

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 según vayan asociados al tipo de letra

o a la información 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 continuación se muestran algunas etiquetas asociadas al tipo de letra:

Etiqueta Significado Ejemplo

<b> negrita conalep Monterrey III

<i> cursiva conalep Monterrey III

<u> subrayado conalep Monterrey III

<s> tachado conalep Monterrey III

<tt> teletipo (máquina de escribir) conalep Monterrey III

<big> aumenta el tamaño de la fuente conalep Monterrey III

<small> disminuye el tamaño de la fuente conalep Monterrey III

A continuación se muestran algunas etiquetas asociadas al tipo de información:

Etiqueta Significado Ejemplo

<cite> cita conalep Monterrey III

<code> ejemplo de código conalep Monterrey III

<dfn> definición conalep Monterrey III

<del> eliminado conalep Monterrey III

<em> énfasis conalep Monterrey III

Page 25: Diseño y elaboracion de paginas web

Ing. Reina Liliana López Reyes e Ing. Feliciano Nevárez Raizola 22

<ins> insertado conalep Monterrey III

<kbd> teclado conalep Monterrey III

<samp> muestra conalep Monterrey III

<strong> destacado conalep Monterrey III

<sub> subíndice conalep Monterrey III

<sup> superíndice conalep Monterrey III

<var> variable conalep Monterrey III

Las etiquetas más utilizadas son las asociadas al tipo de letra, ya que son más fáciles 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

información pueden representarse de forma distinta según el navegador.

Por ejemplo, para insertar el texto:

Bienvenidos a www.conalep.edu.mx

Habría que escribir:

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

• Párrafos <p>

El texto de una página puede agruparse en párrafos. Para ello, el texto de cada uno de los párrafos debe

insertarse entre las etiquetas <p> y </p>.

No es necesario insertar la etiqueta <br> para que un nuevo párrafo aparezca debajo del anterior, ya que las

etiquetas <p> y </p> hacen que se cambie de línea automáticamente.

También es posible cambiar la alineación del texto de cada párrafo. Para ello se modifica el valor del atributo

align, cuyos valores pueden ser left (izquierda), right (derecha), center (centrado) o justify

(justificado).

Page 26: Diseño y elaboracion de paginas web

Ing. Reina Liliana López Reyes e Ing. Feliciano Nevárez Raizola 23

Por ejemplo, para insertar el texto:

Bienvenidos a mi página.

Aquí encontraréis cursos de formación muy interesantes.

Habría 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 alineación del texto es mediante las etiquetas <div> y </div>, para las que también

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 separación entre ellos es menor.

Por ejemplo, para insertar el texto:

Bienvenidos a mi página.

Aquí encontraréis cursos de formación muy interesantes.

Habría que escribir:

<div align="center"> Bienvenidos a mi p&aacutegina. </div> <div> Aqu&iacute encontrar&eacuteis cursos de formaci&oacuten muy interesantes. </div>

También es posible insertar el texto entre las etiquetas <center> y </center> para que aparezca centrado.

Por ejemplo, para insertar el texto:

Bienvenidos a mi página.

Habría 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 línea (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.

Page 27: Diseño y elaboracion de paginas web

Ing. Reina Liliana López Reyes e Ing. Feliciano Nevárez Raizola 24

- Salto de Líneas.

En general, cuando trabajamos con un editor de texto se produce un salto de línea al pulsar la tecla Enter .

Si pulsamos Enter en un documento HTML, el salto de línea se producirá en el código, pero no se mostrará

en el navegador. Para que se produzca el salto de línea 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> después de ella,

ya que dicha etiqueta no existe.

Por ejemplo, para insertar el texto:

Queridos usuarios,

tengo el placer de comunicaros que hay una nueva sección.

Habría que escribir:

Queridos usuarios,<br>tengo el placer de comunicaros que hay una nueva secci&oacuten.

- Sangrado de texto <blockquote>

La sangría 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 mayoría 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 línea.

Insertando el texto entre varias etiquetas <blockquote> y </blockquote> se consigue que los márgenes

sean mayores.

Por ejemplo, para insertar el texto:

Queridos usuarios,

tengo el placer de comunicaros que hay una nueva sección.

Habría que escribir:

Queridos usuarios,

<blockquote> <blockquote>

Page 28: Diseño y elaboracion de paginas web

Ing. Reina Liliana López Reyes e Ing. Feliciano Nevárez Raizola 25

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 página 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 Significado Posibles valores

align alineación de la regla dentro de la página left (izquierda)

right (derecha)

center (centro)

width ancho de la regla un número, acompañado de %

cuando se desee que sea en

porcentaje

size alto de la regla un número

noshade eliminar el sombreado de la regla no puede tomar valores

Por ejemplo, para insertar el texto y la regla horizontal siguientes:

Inicio

Bienvenidos a mi página.

Habría que escribir:

Inicio<hr align="left" width="300%" size="5" noshade>Bienvenidos a mi p&aacute;gina.

- Encabezados <h1>

Existen una serie de encabezados que suelen utilizarse para establecer títulos dentro de una página. La

diferencia entre los distintos tipos de encabezado es el tamaño de la letra, el tipo de resaltado, y la separación

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 título se puede visualizar

de forma diferente según el navegador.

Existen seis etiquetas que representan seis tipos de cabeceras distintas. Todas estas etiquetas precisan una

etiqueta de cierre.

Page 29: Diseño y elaboracion de paginas web

Ing. Reina Liliana López Reyes e Ing. Feliciano Nevárez Raizola 26

A continuación se muestran los distintos encabezados existentes:

Etiqueta Ejemplo

<H1> Título 1: HTML

<H2> Título 2: HTML

<H3> Título 3: HTML

<H4> Título 4: HTML

<H5> Título 5: HTML

<H6> Título 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

Habría que escribir:

<H2 align="center"> El lenguaje HTML </H2> <H4> Apartado 1: Las etiquetas </H4>

- Marquesinas <marquee>

Las marquesinas son líneas de texto que pueden desplazarse de un lado a otro de la ventana en forma de línea.

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 varíen.

A través 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).

Page 30: Diseño y elaboracion de paginas web

Ing. Reina Liliana López Reyes e Ing. Feliciano Nevárez Raizola 27

A través del atributo direction puede modificarse la dirección 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).

También es posible establecer un color de fondo, a través del atributo bgcolor.

Por ejemplo, para insertar la siguiente marquesina:

Esto es una marquesina

Habría que escribir:

<marquee bgcolor="#006699" behavior="alternate" direction="right"> <b> <font color="#FFFFCC" size="5"> Esto es una marquesina </font> </b> </marquee>

También es posible insertar imágenes, 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

código, es utilizando las etiquetas <pre> y </pre>.

Utilizando estas etiquetas podemos tener la seguridad de que en el navegador se mostrarán todos los espacios

en blanco que se inserten en el texto, así como todos los saltos de línea 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 PÁGINA WEB

y esto un texto preformateado

Habría que escribir:

<pre> Hola, BIENVENIDOS esta ES MI PÁGINA WEB y esto un texto preformateado </pre>

Page 31: Diseño y elaboracion de paginas web

Ing. Reina Liliana López Reyes e Ing. Feliciano Nevárez Raizola 28

El inconveniente de esta etiqueta es que entre las etiquetas <pre> y </pre> no se pueden incluir las etiquetas

<img> (para incluir imágenes), <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

Habría que escribir:

... <li>Perro</li> <li>Gato</li> <li>Periquito</li> ...

Todos los elementos de la lista deberán encontrarse entre las etiquetas que indiquen si la lista es desordenada

(con viñetas) u ordenada (numerada) como veremos a continuación.

- Lista desordenada <ul>

Para que una lista sea desordenada, sus elementos deberán encontrarse entre las etiquetas <ul> y </ul>.

A través del atributo type es posible elegir el tipo de viñeta, que puede ser circle (círculo), disc (disco) o

square (cuadrado).

Por ejemplo, para insertar la siguiente lista:

o Perro o Gato o Periquito

Habría que escribir:

<ul type="circle"> <li>Perro</li> <li>Gato</li> <li>Periquito</li> </ul>

Page 32: Diseño y elaboracion de paginas web

Ing. Reina Liliana López Reyes e Ing. Feliciano Nevárez Raizola 29

Listas enumeradas

Las listas enumeradas u ordenadas se usarán para agrupar información en un orden específico.

Si el ordenador parece que no funciona:

1. ¿Está conectado a la corriente? 2. ¿Está el interruptor a ON? 3. ¿Está la pantalla encendida? 4. ¿Está la línea de alimentación caída?

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á conectado a la corriente?</LI> <LI>Está el interruptor a ON?</LI> <LI>Está la pantalla encendida?</LI> <LI>Está la línea de alimentación caída?</LI> </OL>

- Lista ordenada <ol>

Para que una lista sea ordenada, sus elementos deberán encontrarse entre las etiquetas <ol> y </ol>.

A través del atributo type es posible elegir el tipo de numeración, que puede ser 1 (números), a (letras

minúsculas), A (letras mayúsculas), i (números romanos en minúsculas) o I (números romanos en

mayúsculas).

Por ejemplo, para insertar la siguiente lista:

i. Perro ii. Gato

iii. Periquito

Habría 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).

Page 33: Diseño y elaboracion de paginas web

Ing. Reina Liliana López Reyes e Ing. Feliciano Nevárez Raizola 30

<I> Cursiva (italic).

Para formatear una lista de descripciones se usarán las directivas <DL>...</DL>. Cada elemento debe

especificarse entre <DT>...</DT>. Cada definición 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

Francés 2. Martes

1. Ingles A. Corrección de ejercicios B. Proponer ejercicios

Habría 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 más 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>.

Page 34: Diseño y elaboracion de paginas web

Ing. Reina Liliana López Reyes e Ing. Feliciano Nevárez Raizola 31

El elemento Martes contiene una lista ordenada de un sólo elemento <li>Ingles</li> elemento que

contiene a su vez una lista desordenada de tipo letras mayúsculas <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 &lt;

Se representa con &gt;

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 habría que escribir el nombre que los representa.

A continuación se muestra una lista con algunos caracteres y el nombre con el que han de ser representados:

Carácter Representación Carácter Representación

< &lt; € &euro;

> &gt; ç &ccedil;

á &aacute; Ç &Ccedil;

Á &Aacute; ü &uuml;

é &eacute; Ü &Uuml;

É &Eacute; & &amp;

í &iacute; ¿ &iquest;

Í &Iacute; ¡ &iexcl;

ó &oacute; " &quot;

Ó &Oacute; · &middot;

ú &uacute; º &ordm;

Ú &Uacute; ª &ordf;

ñ &ntilde; ¬ &not;

Ñ &Ntilde; © &copy;

Page 35: Diseño y elaboracion de paginas web

Ing. Reina Liliana López Reyes e Ing. Feliciano Nevárez Raizola 32

™ &#153; ® &reg;

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 &nbsp;.

Por ejemplo, para insertar el texto:

¡Bienvenidos, esta es mi 1ª página!

Habría que escribir:

&iexcl;Bienvenidos, esta es mi&nbsp;&nbsp;&nbsp;1&ordf;&nbsp;&nbsp;&nbsp;p&aacute;gina!

• Tablas

En este tema vamos a ver cómo trabajar con tablas. Podremos insertar tablas, filas y columnas, y modificar sus

propiedades.

Hoy en día, la mayoría de las páginas WEB se basan en tablas, ya que resultan de gran utilidad al mejorar

notablemente las opciones de diseño.

Todos los objetos se alinean por defecto a la izquierda de las páginas WEB, pero gracias a las tablas es posible

distribuir el texto en columnas, colocar imágenes al lado de un bloque de texto, y otra serie de cosas que sin las

tablas serían imposibles de realizarse.

- Tabla <table>

Las tablas están formadas por celdas, que son los recuadros que se obtienen como resultado de la intersección

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 formarán la tabla.

imagen y texto

COLUMNA

Texto dentro de una celda

FILA CELDA

Page 36: Diseño y elaboracion de paginas web

Ing. Reina Liliana López Reyes e Ing. Feliciano Nevárez Raizola 33

- Fila <tr>

Es necesario insertar las etiquetas <tr> y </tr> por cada una de las filas de la tabla. Estas etiquetas deberán

insertarse entre las etiquetas <table> y </table>.

Por ejemplo, para crear una tabla con cinco filas escribiríamos:

<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 número de filas, es necesario también especificar el número de

columnas.

Una celda es el resultado de la intersección entre una fila y una columna, por lo que podremos especificar el

número de celdas por fila, que equivale a especificar el número 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 Domingo

Curso HTML Curso Dreamweaver

Curso Frontpage Curso Flash

Habría 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>

Page 37: Diseño y elaboracion de paginas web

Ing. Reina Liliana López Reyes e Ing. Feliciano Nevárez Raizola 34

- Formato de la tabla

Es posible modificar los siguientes atributos de una tabla:

Atributo Significado Posibles valores

width ancho de la tabla un número, acompañado de % cuando

se desee que sea en porcentaje

height altura de la tabla un número, acompañado de % cuando

se desee que sea en porcentaje

cellpadding espacio entre el contenido de las celdas

y el borde

un número

cellspacing espacio entre celdas un número

border grosor del borde un número

align alineación de la tabla dentro de la

página

left (izquierda)

right (derecha)

center (centro)

bgcolor color de fondo número hexadecimal

background imagen de fondo número hexadecimal

Bordercolor color del borde número hexadecimal

Por ejemplo, para modificar la tabla de la página anterior para que quedase como la siguiente:

Sabado Domingo

Curso HTML Curso Dreamweaver

Curso Frontpage Curso Flash

Habría 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 verás que el ancho de la tabla varía para

ocupar siempre la mitad de la ventana), que el borde (border) tiene un grosor de dos píxeles (es más ancho

Page 38: Diseño y elaboracion de paginas web

Ing. Reina Liliana López Reyes e Ing. Feliciano Nevárez Raizola 35

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 Significado Posibles valores

width ancho de la tabla un número, acompañado de % cuando

se desee que sea en porcentaje

height altura de la tabla un número, acompañado de % cuando

se desee que sea en porcentaje

align alineación horizontal del contenido de la

celda

left (izquierda)

right (derecha)

center (centro)

valign alineación vertical del contenido de la celda baseline (línea de base)

bottom (inferior)

middle (medio)

top (superior)

bgcolor color de fondo número hexadecimal

background imagen de fondo número hexadecimal

bordercolor color del borde número hexadecimal

También es posible modificar estos atributos de toda una fila, especificándolos en la etiqueta <tr>, en lugar de

en la etiqueta <td>.

Hay que tener en cuenta que los atributos tienen más prioridad cuando son establecidos para una celda que

cuando son establecidos para una fila completa. Al mismo tiempo, tienen más prioridad los atributos

establecidos para una fila que los establecidos para toda la tabla.

Por ejemplo, si escribiéramos el siguiente código:

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

Page 39: Diseño y elaboracion de paginas web

Ing. Reina Liliana López Reyes e Ing. Feliciano Nevárez Raizola 36

<td>Curso Dreamweaver</td> </tr> <tr> <td>Curso Frontpage</td> <td>Curso Flash</td> </tr> </table>

Obtendríamos la siguiente tabla:

Sabado Domingo

Curso HTML Curso Dreamweaver

Curso Frontpage Curso Flash

Se ha establecido el color naranja como fondo de toda la tabla, pero con la línea de código

<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 través de la línea <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 automática al ancho de la columna sino que el ancho de la celda

se adapta al ancho del contenido para que el contenido ocupe una sólo fila. Este atributo no toma ningún valor,

simplemente se añade 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 títulos de las columnas.

Por ejemplo, si escribiéramos el siguiente código:

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

Page 40: Diseño y elaboracion de paginas web

Ing. Reina Liliana López Reyes e Ing. Feliciano Nevárez Raizola 37

Obtendríamos la siguiente tabla:

Sábado Domingo

Curso HTML Curso Dreamweaver

Curso Frontpage Curso Flash

- Título de tabla <caption>

No solamente es posible establecer títulos para las columnas, también es posible establecer un título para la

tabla mediante las etiquetas <caption> y </caption>.

Estas etiquetas han de ir después 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 escribiéramos el siguiente código:

<table width="50%" border="1" align="center"> <caption align="right" valign="top">Titulo de la tabla<tr> <tr> <th>Sabado</td> ... </tr> </table>

Obtendríamos la siguiente tabla con título:

Titulo de la tabla

Sábado Domingo

Curso HTML Curso Dreamweaver

Curso Frontpage Curso Flash

El título 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 través del atributo colspan se especifica el número de columnas por las que se extenderá la celda, y a

través del atributo rowspan se especifica el número de filas por las que se extenderá la celda.

Para que quede más 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

Page 41: Diseño y elaboracion de paginas web

Ing. Reina Liliana López Reyes e Ing. Feliciano Nevárez Raizola 38

PEQUEÑO GRANDE

Duración crecimiento 10 meses 18 a 24 meses 16 años

Tiempo de gestación 58 a 63 días 9 meses

Duración de vida del pelo/cabello 1 año 2 a 7 años

Habría que escribir el siguiente código:

<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&Ntilde;O</th> <th>GRANDE</th> </tr> <tr align="center" valign="middle"> <td>Duraci&oacute;n crecimiento</td> <td>10 meses</td> <td>18 a 24 meses</td> <td>16 a&ntilde;os</td> </tr> <tr align="center" valign="middle"> <td>Tiempo de gestaci&oacute;n</td> <td colspan="2">58 a 63 d&iacute;as</td> <td>9 meses</td> </tr> <tr align="center" valign="middle"> <td>Duraci&oacute;n de vida del pelo/cabello</td> <td colspan="2">1 a&ntilde;o</td> <td>2 a 7 a&ntilde;os</td> </tr> </table>

Vamos a explicar un poco cómo funciona dicho código, aunque sería conveniente que primero intentaras

entender el código comparándolo con la tabla que de él se obtiene.

En primer lugar, tenemos que ver el número máximo de columnas que ha de tener la tabla. En este caso serían

cuatro columnas. Para saber el número de columnas total de la tabla, tenemos que fijarnos en el número total

de celdas que podemos obtener por fila al trazar las líneas verticales que separan las columnas entre sí.

En la primera fila, la línea <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 más

celdas para esa misma fila.

Page 42: Diseño y elaboracion de paginas web

Ing. Reina Liliana López Reyes e Ing. Feliciano Nevárez Raizola 39

En la segunda fila, la línea <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 línea

<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 línea <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&Ntilde;O</th> y <th>GRANDE</th>.

El uso de los atributos colspan y rowspan puede resultar algo complicado al principio. Es cuestión de

práctica.

• Código de Colores

- Colores en hexadecimal

Los colores en HTML se representan mediante un número hexadecimal.

Un número hexadecimal se diferencia de un número decimal en que no sólo puede tomar valores del 0 al 9,

sino que puede tomar hasta dieciséis valores distintos, que van del 0 al 9, y de la A a la F.

Cada color estará representado por un grupo de seis dígitos 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.

También podemos personalizar nuestros propios colores, modificando los valores de cada uno de los dígitos

que forman parte del número hexadecimal.

A continuación se muestran los 216 colores seguros para WEB, para que puedas consultarlos cuando lo

necesites.

#000000 #000033 #000066 #000099 #0000CC #0000FF #003300 #003333 #003366 #003399 #0033CC #0033FF #006600 #006633 #006666 #006699 #0066CC #0066FF #009900 #009933 #009966 #009999 #0099CC #0099FF #00CC00 #00CC33 #00CC66 #00CC99 #00CCCC #00CCFF #00FF00 #00FF33 #00FF66 #00FF99 #00FFCC #00FFFF #330000 #330033 #330066 #330099 #3300CC #3300FF #333300 #333333 #333366 #333399 #3333CC #3333FF #336600 #336633 #336666 #336699 #3366CC #3366FF

Page 43: Diseño y elaboracion de paginas web

Ing. Reina Liliana López Reyes e Ing. Feliciano Nevárez Raizola 40

#339900 #339933 #339966 #339999 #3399CC #3399FF #33CC00 #33CC33 #33CC66 #33CC99 #33CCCC #33CCFF #33FF00 #33FF33 #33FF66 #33FF99 #33FFCC #33FFFF #660000 #660033 #660066 #660099 #6600CC #6600FF #660033 #663333 #663366 #663399 #6633CC #6633FF #666600 #666633 #666666 #666699 #6666CC #6666FF #669900 #669933 #669966 #669999 #6699CC #6699FF #66CC00 #66CC33 #66CC66 #66CC99 #66CCCC #66CCFF #66FF00 #66FF33 #66FF66 #66FF99 #66FFCC #66FFFF #990000 #990033 #990066 #990099 #9900CC #9900FF #993300 #993333 #993366 #993399 #9933CC #9933FF #996600 #996633 #996666 #996699 #9966CC #9966FF #999900 #999933 #999966 #999999 #9999CC #9999FF #99CC00 #99CC33 #99CC66 #99CC99 #99CCCC #99CCFF #99FF00 #99FF33 #99FF66 #99FF99 #99FFCC #99FFFF #CC0000 #CC0033 #CC0066 #CC0099 #CC00CC #CC00FF #CC3300 #CC3333 #CC3366 #CC3399 #CC33CC #CC33FF #CC6600 #CC6633 #CC6666 #CC6699 #CC66CC #CC66FF #CC9900 #CC9933 #CC9966 #CC9999 #CC99CC #CC99FF #CCCC00 #CCCC33 #CCCC66 #CCCC99 #CCCCCC #CCCCFF #CCFF00 #CCFF33 #CCFF66 #CCFF99 #CCFFCC #CCFFFF #FF0000 #FF0033 #FF0066 #FF0099 #FF00CC #FF00FF #FF3300 #FF3333 #FF3366 #FF3399 #FF33CC #FF33FF #FF6600 #FF6633 #FF6666 #FF6699 #FF66CC #FF66FF #FF9900 #FF9933 #FF9966 #FF9999 #FF99CC #FF99FF #FFCC00 #FFCC33 #FFCC66 #FFCC99 #FFCCCC #FFCCFF #FFFF00 #FFFF33 #FFFF66 #FFFF99 #FFFFCC #FFFFFF

Existe otra forma de representar algunos colores, sin la necesidad de utilizar números en hexadecimal. Estos

colores pueden representarse por su nombre, y son los siguientes:

Color Hexadecimal Nombre

#FFFFFF white

#000000 black

#000080 navy #0000FF blue #008000 green #008080 teal #00FF00 lime #00FFFF aqua #800000 maroon #800080 purple #808000 olive #808080 gray #C0C0C0 silver #FF0000 red #FF00FF fuchsia #FFFF00 yellow

Page 44: Diseño y elaboracion de paginas web

Ing. Reina Liliana López Reyes e Ing. Feliciano Nevárez Raizola 41

• Código de Caracteres

- Tabla de códigos

ASCII HTML HTML

Dec Hex Símbolo Numero Nombre Descripción

32 20 &#32; espacio

33 21 ! &#33;

signo de cierre de exclamación /

admiración

34 22 " &#34; &quot; comillas dobles

35 23 # &#35; signo de número

36 24 $ &#36; signo de dólar

37 25 % &#37; signo de porcentaje

38 26 & &#38; &amp; signo "&" / ampersand

39 27 ' &#39; comilla / apóstrofe

40 28 ( &#40; paréntesis izquierdo

41 29 ) &#41; paréntesis derecho

42 2A * &#42; asterisco

43 2B + &#43; signo de más / adición

44 2C , &#44; coma

45 2D - &#45;

signo de menos / sustracción / guión /

raya

46 2E . &#46; punto

47 2F / &#47; barra oblicua - barra de división

48 30 0 &#48; cero

49 31 1 &#49; uno

50 32 2 &#50; dos

51 33 3 &#51; tres

52 34 4 &#52; cuatro

53 35 5 &#53; cinco

54 36 6 &#54; seis

55 37 7 &#55; siete

56 38 8 &#56; ocho

57 39 9 &#57; nueve

58 3A : &#58; dos puntos

59 3B ; &#59; punto y coma

60 3C < &#60; &lt; signo de menor que

61 3D = &#61; signo de igual

62 3E > &#62; &gt; signo de mayor que

63 3F ? &#63; signo de interrogación - cierre

64 40 @ &#64;

símbolo arroba

65 41 A &#65; 66 42 B &#66; 67 43 C &#67; 68 44 D &#68; 69 45 E &#69; 70 46 F &#70; 71 47 G &#71; 72 48 H &#72;

Page 45: Diseño y elaboracion de paginas web

Ing. Reina Liliana López Reyes e Ing. Feliciano Nevárez Raizola 42

ASCII HTML HTML

Dec Hex Símbolo Numero Nombre Descripción

73 49 I &#73; 74 4A J &#74; 75 4B K &#75; 76 4C L &#76; 77 4D M &#77; 78 4E N &#78; 79 4F O &#79; 80 50 P &#80;

81 51 Q &#81;

82 52 R &#82;

83 53 S &#83;

84 54 T &#84;

85 55 U &#85;

86 56 V &#86;

87 57 W &#87;

88 58 X &#88;

89 59 Y &#89;

90 5A Z &#90;

91 5B [ &#91; corchete izquierdo

92 5C \ &#92; barra inversa

93 5D ] &#93; corchete derecho

94 5E ^ &#94;

signo de intercalación - acento

circunflejo

95 5F _ &#95; signo de subrayado

96 60 ` &#96;

acento grave

97 61 a &#97; 98 62 b &#98; 99 63 c &#99; 100 64 d &#100; 101 65 e &#101; 102 66 f &#102; 103 67 g &#103; 104 68 h &#104; 105 69 i &#105; 106 6A j &#106; 107 6B k &#107; 108 6C l &#108; 109 6D m &#109; 110 6E n &#110; 111 6F o &#111; 112 70 p &#112;

113 71 q &#113;

114 72 r &#114;

115 73 s &#115;

116 74 t &#116;

117 75 u &#117;

118 76 v &#118;

119 77 w &#119;

Page 46: Diseño y elaboracion de paginas web

Ing. Reina Liliana López Reyes e Ing. Feliciano Nevárez Raizola 43

ASCII HTML HTML

Dec Hex Símbolo Numero Nombre Descripción

120 78 x &#120;

121 79 y &#121;

122 7A z &#122;

123 7B { &#123; llave de apertura - izquierda

124 7C | &#124; barra vertical

125 7D } &#125; llave de cierre - derecho

126 7E ~ &#126; signo de equivalencia / tilde

127 7F (no definido en estándar HTML 4)

128 80

(no definido en estándar HTML 4)

129 81 (no definido en estándar HTML 4)

130 82 (no definido en estándar HTML 4)

131 83 (no definido en estándar HTML 4)

132 84 (no definido en estándar HTML 4)

133 85 (no definido en estándar HTML 4)

134 86 (no definido en estándar HTML 4)

135 87 (no definido en estándar HTML 4)

136 88 (no definido en estándar HTML 4)

137 89 (no definido en estándar HTML 4)

138 8A (no definido en estándar HTML 4)

139 8B (no definido en estándar HTML 4)

140 8C (no definido en estándar HTML 4)

141 8D (no definido en estándar HTML 4)

142 8E (no definido en estándar HTML 4)

143 8F (no definido en estándar HTML 4)

144 90

(no definido en estándar HTML 4)

145 91 (no definido en estándar HTML 4)

146 92 (no definido en estándar HTML 4)

147 93 (no definido en estándar HTML 4)

148 94 (no definido en estándar HTML 4)

149 95 (no definido en estándar HTML 4)

150 96 (no definido en estándar HTML 4)

151 97 (no definido en estándar HTML 4)

152 98 (no definido en estándar HTML 4)

153 99 (no definido en estándar HTML 4)

154 9A (no definido en estándar HTML 4)

155 9B (no definido en estándar HTML 4)

156 9C (no definido en estándar HTML 4)

157 9D (no definido en estándar HTML 4)

158 9E (no definido en estándar HTML 4)

159 9F (no definido en estándar HTML 4)

160 A0 &#160; &nbsp; espacio sin separación

161 A1 ¡ &#161; &iexcl;

signo de apertura de exclamación /

admiración

162 A2 ¢ &#162; &cent; signo de centavo

163 A3 £ &#163; &pound; signo de Libra Esterlina

164 A4 ¤ &#164; &curren; signo de divisa general

165 A5 ¥ &#165; &yen; signo de yen

166 A6 ¦ &#166; &brvbar; barra vertical partida

Page 47: Diseño y elaboracion de paginas web

Ing. Reina Liliana López Reyes e Ing. Feliciano Nevárez Raizola 44

ASCII HTML HTML

Dec Hex Símbolo Numero Nombre Descripción

167 A7 § &#167; &sect; signo de sección

168 A8 ¨ &#168; &uml; diéresis - umlaut

169 A9 © &#169; &copy; signo de derechos de autor - copyright

170 AA ª &#170; &ordf;

género feminino - indicador ordinal

feminino

171 AB « &#171; &laquo; comillas anguladas de apertura

172 AC ¬ &#172; &not; Signo de no - símbolo lógico

173 AD &#173; &shy; guión débil

174 AE ® &#174; &reg; signo de marca registrada

175 AF ¯ &#175; &macr; macrón - raya alta

176 B0 ° &#176; &deg; signo de grado

177 B1 ± &#177; &plusmn; signo de más o menos

178 B2 ² &#178; &sup2; superíndice dos - cuadrado

179 B3 ³ &#179; &sup3; superíndice tres - cúbico

180 B4 ´ &#180; &acute; acento agudo - agudo espaciado

181 B5 µ &#181; &micro; signo de micro

182 B6 ¶ &#182; &para; signo de fin de párrafo

183 B7 · &#183; &middot; punto medio - coma Georgiana

184 B8 ¸ &#184; &cedil; cedilla

185 B9 ¹ &#185; &sup1; superíndice uno

186 BA º &#186; &ordm;

género masculino - indicador ordinal

masculino

187 BB » &#187; &raquo; comillas anguladas de cierre

188 BC ¼ &#188; &frac14; fracción un cuarto

189 BD ½ &#189; &frac12; fracción medio - mitad

190 BE ¾ &#190; &frac34; fracción tres cuartos

191 BF ¿ &#191; &iquest; signo de interrogación - apertura

192 C0 À &#192; &Agrave; A mayúscula con acento grave

193 C1 Á &#193; &Aacute; A mayúscula con acento agudo

194 C2 Â &#194; &Acirc; A mayúscula con acento circunflejo

195 C3 Ã &#195; &Atilde; A mayúscula con tilde

196 C4 Ä &#196; &Auml; A mayúscula con diéresis

197 C5 Å &#197; &Aring; A mayúscula con anillo

198 C6 Æ &#198; &AElig; diptongo AE mayúscula (ligadura)

199 C7 Ç &#199; &Ccedil; C cedilla mayúscula

200 C8 È &#200; &Egrave; E mayúscula con acento grave

201 C9 É &#201; &Eacute; E mayúscula con acento agudo

202 CA Ê &#202; &Ecirc; E mayúscula con acento circunflejo

203 CB Ë &#203; &Euml; E mayúscula con diéresis

204 CC Ì &#204; &Igrave; I mayúscula con acento grave

205 CD Í &#205; &Iacute; I mayúscula con acento agudo

206 CE Î &#206; &Icirc; I mayúscula con acento circunflejo

207 CF Ï &#207; &Iuml; I mayúscula con diéresis

208 D0 Ð &#208; &ETH; ETH islandesa mayúscula

209 D1 Ñ &#209; &Ntilde;

N mayúscula con tilde - eñe

mayúscula

210 D2 Ò &#210; &Ograve; O mayúscula con acento grave

211 D3 Ó &#211; &Oacute; O mayúscula con acento agudo

Page 48: Diseño y elaboracion de paginas web

Ing. Reina Liliana López Reyes e Ing. Feliciano Nevárez Raizola 45

ASCII HTML HTML

Dec Hex Símbolo Numero Nombre Descripción

212 D4 Ô &#212; &Ocirc; O mayúscula con acento circunflejo

213 D5 Õ &#213; &Otilde; O mayúscula con tilde

214 D6 Ö &#214; &Ouml; O mayúscula con diéresis

215 D7 × &#215; &times; signo de multiplicación

216 D8 Ø &#216; &Oslash; O mayúscula with slash

217 D9 Ù &#217; &Ugrave; U mayúscula con acento grave

218 DA Ú &#218; &Uacute; U mayúscula con acento agudo

219 DB Û &#219; &Ucirc; U mayúscula con acento circunflejo

220 DC Ü &#220; &Uuml; U mayúscula con diéresis

221 DD Ý &#221; &Yacute; Y mayúscula con acento agudo

222 DE Þ &#222; &THORN; THORN islandesa mayúscula

223 DF ß &#223; &szlig; s minúscula (alemán) - Beta minúscula

224 E0 à &#224; &agrave; a minúscula con acento grave

225 E1 á &#225; &aacute; a minúscula con acento agudo

226 E2 â &#226; &acirc; a minúscula con acento circunflejo

227 E3 ã &#227; &atilde; a minúscula con tilde

228 E4 ä &#228; &auml; a minúscula con diéresis

229 E5 å &#229; &aring; a minúscula con anillo

230 E6 æ &#230; &aelig; diptongo ae minúscula (ligadura)

231 E7 ç &#231; &ccedil; c cedilla minúscula

232 E8 è &#232; &egrave; e minúscula con acento grave

233 E9 é &#233; &eacute; e minúscula con acento agudo

234 EA ê &#234; &ecirc; e minúscula con acento circunflejo

235 EB ë &#235; &euml; e minúscula con diéresis

236 EC ì &#236; &igrave; i minúscula con acento grave

237 ED í &#237; &iacute; i minúscula con acento agudo

238 EE î &#238; &icirc; i minúscula con acento circunflejo

239 EF ï &#239; &iuml; i minúscula con diéresis

240 F0 ð &#240; &eth; eth islandesa minúscula

241 F1 ñ &#241; &ntilde; eñe minúscula - n minúscula con tilde

242 F2 ò &#242; &ograve; o minúscula con acento grave

243 F3 ó &#243; &oacute; o minúscula con acento agudo

244 F4 ô &#244; &ocirc; o minúscula con acento circunflejo

245 F5 õ &#245; &otilde; o minúscula con tilde

246 F6 ö &#246; &ouml; o minúscula con diéresis

247 F7 ÷ &#247; &divide; signo de división

248 F8 ø &#248; &oslash; o barrada minúscula

249 F9 ù &#249; &ugrave; u minúscula con acento grave

250 FA ú &#250; &uacute; u minúscula con acento agudo

251 FB û &#251; &ucirc; u minúscula con acento circunflejo

252 FC ü &#252; &uuml; u minúscula con diéresis

253 FD ý &#253; &yacute; y minúscula con acento agudo

254 FE þ &#254; &thorn; thorn islandesa minúscula

255 FF ÿ &#255; &yuml; y minúscula con diéresis

Page 49: Diseño y elaboracion de paginas web

Ing. Reina Liliana López Reyes e Ing. Feliciano Nevárez Raizola 46

• Creando hiperenlaces (links)

- En HTML

Un hiperenlace, hipervínculo, o vínculo, no es más que un enlace, que al ser pulsado lleva de una página o

archivo.

Aquellos elementos (texto, imágenes, etc.) sobre los que se desee insertar un enlace han de encontrarse entre

las etiquetas <a> y </a>.

A través del atributo href se especifica la página a la que está asociado el enlace, la página que se visualizará

cuando el usuario haga clic en el enlace.

Por ejemplo, para insertar el enlace:

Visita www.conalep.edu.mx

Habría 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 diseño similar o un objetivo común, estando

todos ellos dentro de una misma carpeta, conocida como carpeta raíz del sitio.

Por ejemplo, teniendo en cuenta que el documento t_4_1.htm se encuentra directamente dentro de la

carpeta raíz del sitio, para insertar el enlace:

Enlace a Tema 4: Hiperenlaces

Habría que escribir:

<a href="/t_4_1.htm">Enlace a Tema 4: Hiperenlaces</a>

Observa como aparece el símbolo "/" delante del nombre del documento. Esta barra inclinada indica la carpeta

raíz 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 raíz del sitio, habría 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 vínculo

debe ser "nombre_de_documento#nombre_de_punto".

Page 50: Diseño y elaboracion de paginas web

Ing. Reina Liliana López Reyes e Ing. Feliciano Nevárez Raizola 47

Por ejemplo, para insertar el enlace:

Punto de fijación Tipos de enlaces

Habría 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 fijación se llama tipos.

Al final de este tema verás cómo definir el punto de fijación.

- Destino del enlace

El destino del enlace determina en qué ventana va a ser abierta la página vinculada, se especifica a través 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 vínculo o en el conjunto de marcos padre.

_self: Es la opción predeterminada. Abre el documento vinculado en el mismo marco o ventana que el vínculo.

_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

volverán a ver en el tema de Marcos. De momento sólo te interesa retener la opción _blank y _self.

Para insertar el enlace:

Visita www.conalep.edu.mx en una ventana nueva

Habría 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 opción cuando la página de destino está fuera de nuestro sitio para que cuando el

usuario cierre la ventana del explorador, se encuentre automáticamente en la página desde la que había salido

(que vuelva a nuestro sitio).

Page 51: Diseño y elaboracion de paginas web

Ing. Reina Liliana López Reyes e Ing. Feliciano Nevárez Raizola 48

- Formato de los enlaces

En general, un texto que tiene un vínculo asociado suele aparecer subrayado. Cuando el vínculo está definido

sobre una imagen, en el borde aparecen una serie de puntitos al pulsar sobre ella. Cuando el vínculo está

definido sobre una zona de una imagen (un mapa), aparece el contorno de esa zona.

Aquí tienes dos vínculos similares de ejemplo:

Como puedes ver, la segunda imagen que hace de vínculo contiene un recuadro alrededor. Esto ocurre debido

a que se ha establecido un borde para la imagen, como veremos más adelante.

Tanto si el vínculo se asigna a un texto como a una imagen, el cursor cambia de forma al situarse encima del

vínculo. Suele adquirir la apariencia de una mano señalando.

Normalmente los vínculos de texto cambian de color cuando el enlace ha sido ya pulsado o cuando el puntero

del ratón se posiciona sobre él, estos cambios están predefinidos en cada navegador, pero nosotros podemos

cambiar esos colores.

Los colores de los vínculos pueden especificarse a través de las propiedades de la página, en la etiqueta

<body>. Estos colores se asignan a través de los atributos link (vínculo), alink (vínculo activo), y vlink

(vínculo 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 código:

... <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 página www.conalep.edu.mx, el enlace será de color rojo (#FF0000) [red]:

www.conalep.edu.mx

Page 52: Diseño y elaboracion de paginas web

Ing. Reina Liliana López Reyes e Ing. Feliciano Nevárez Raizola 49

Mientras la página 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 página www.conalep.edu.mx, el enlace será de color naranja (#FF9900)

[orange]:

www.conalep.edu.mx

- Puntos de fijación. 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 fijación, 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 fijación delante del siguiente texto:

Texto con ancla

Habría 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 código 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,

podríamos crear un enlace que nos llevara directamente a la línea de texto en la que se encuentra el ancla. Por

ejemplo:

Enlace al ancla

Habría que escribir:

<a href="t_4_3.htm#miancla">Enlace al ancla</a>

Si pulsas sobre el enlace verás cómo se vuelve a cargar el documento actual, pero en lugar de cargarse desde el

principio, la primera línea de texto será la línea 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 página en el atributo href.

Page 53: Diseño y elaboracion de paginas web

Ing. Reina Liliana López Reyes e Ing. Feliciano Nevárez Raizola 50

En el ejemplo anterior podríamos haber escrito:

<a href="#miancla">Enlace al ancla</a>

- Otros tipos de enlaces

Existen otros tipos de enlaces que no conducen a otra página WEB, los veremos a continuación:

Correo electrónico:

Abre la aplicación Outlook Express para escribir un correo electrónico, cuyo destinatario será el especificado en

el enlace. Para ello la referencia del vínculo debe ser "mailto:direcciondecorreo".

Por ejemplo, para insertar un enlace que permita enviar un correo electrónico a conalep Plantel Ing. Adrián

Sada Treviño (Monterrey III), tal como este:

e-mail para conalep Plantel Ing. Adrián Sada Treviño (Monterrey III)

Habría que escribir:

<a href="mailto:[email protected]"> e-mail para conalep Plantel Ing. Adrián Sada Treviño (Monterrey III) </a>

Después 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 algún campo más como es el asunto. En este caso habría que escribir:

<a href="mailto:[email protected]?subject=el asunto del mensaje"> e-mail para conalep Ing. Adrián Sada Treviño (Monterrey III) </a>

Vínculo a ficheros para descarga:

El valor del atributo href normalmente será una página WEB (con extensión htm, html, asp, php...) pero

también puede ser un fichero comprimido, una hoja de Excel, un documento Word, un documento con

extensión pdf. Cuando el enlace no es a una página Web nos aparecerá el cuadro de diálogo que seguro

habrás visto alguna vez en el que el navegador le pide al usuario permiso para descargar el fichero en su

ordenador.

Page 54: Diseño y elaboracion de paginas web

Ing. Reina Liliana López Reyes e Ing. Feliciano Nevárez Raizola 51

El navegador reconoce algunas extensiones como asociadas a un determinado programa (por ejemplo la

extensión .doc está asociada al programa Word, .pdf al programa Acrobat Reader, .xls al programa Excel...)

en este caso en el cuadro de diálogo aparece una nueva opción, la de abrir el fichero sin descargarlo en el disco

duro del usuario.

Para nombrar el fichero podemos utilizar según 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 página 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&iacute; 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 página.

Vínculo vacío:

Al pulsar sobre un enlace vacío no se abre ninguna página ni archivo, pero el formato es el mismo que el de

cualquier otro enlace. El vínculo debe ser el símbolo almohadilla "#".

Por ejemplo, para insertar el enlace vacío:

vinculo vacio

Habría que escribir:

<a href="#">vinculo vacio</a>

Page 55: Diseño y elaboracion de paginas web

Ing. Reina Liliana López Reyes e Ing. Feliciano Nevárez Raizola 52

Este tipo de enlace resulta útil para trabajar con comportamientos javascript.

• Insertando Imágenes

- Imagen <img>

Todas las páginas WEB acostumbran a tener un cierto número de imágenes, que permiten mejorar su

apariencia, o dotarla de una mayor información 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 través del atributo src.

Por ejemplo, para insertar la siguiente imagen:

Habría 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 imágenes,

que se encuentra en el mismo directorio que el documento actual (referencia relativa al documento).

Para trabajar de una forma más 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 imágenes, 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 código:

<img src="gatito.gif" alt="Imagen gato" >

Page 56: Diseño y elaboracion de paginas web

Ing. Reina Liliana López Reyes e Ing. Feliciano Nevárez Raizola 53

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 imágenes. En lugar de la imagen se mostrará lo siguiente:

Imagen

gato

Si en lugar del código anterior hubiéramos insertado el siguiente código:

<img src="imagenes/gatito.gif" alt="Imagen gato" >

La imagen habría mostrado correctamente:

Imagen

gato

El texto alternativo se muestra también al situar el puntero sobre la imagen. Si sitúas el puntero sobre la

imagen durante unos segundos, verás como aparece el texto Imagen gato.

El texto alternativo es muy útil a la hora de diseñar páginas más 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 página en un navegador las imágenes aparecen sin ningún borde alrededor, pero

es posible establecer uno a través del atributo border.

El atributo border puede tomar valores numéricos, que indican el grosor en píxeles del borde.

Por ejemplo, para insertar la siguiente imagen con borde:

Page 57: Diseño y elaboracion de paginas web

Ing. Reina Liliana López Reyes e Ing. Feliciano Nevárez Raizola 54

Habría 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 vínculos.

Por ejemplo, para insertar la siguiente imagen con borde y con un enlace:

Habría 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 vínculo sobre una imagen y no se desea que se muestre el borde (que por su color

indica que existe dicho vínculo), es necesario establecer border="0".

- Tamaño de una imagen

Cuando insertamos una imagen, esta se muestra en los navegadores con su tamaño original, pero por diversos

motivos puede interesarnos modificar dicho tamaño.

A través de los atributos width (anchura) y height (altura) puede modificarse el tamaño de la imagen. Dicho

cambio de tamaño no se aplica directamente sobre el archivo de imagen, sino que lo que varía es la

visualización de la imagen en el navegador.

El valor que pueden tomar los atributos width y height ha de ser un número, acompañado de % cuando se

desee que sea en porcentaje con respecto a la página.

Por ejemplo, para insertar la siguiente imagen (cuyo tamaño original era de 122 píxeles de anchura y 71 píxeles

de altura) con 200 píxeles de anchura y 80 píxeles de altura:

Page 58: Diseño y elaboracion de paginas web

Ing. Reina Liliana López Reyes e Ing. Feliciano Nevárez Raizola 55

Habría que escribir:

<img src="imagenes/logo_animales.gif" width="200" height="80">

Al modificar el tamaño de la imagen a través de estos atributos es muy probable que la imagen resultante no

sea de buena calidad, en comparación de cómo podría quedar modificándola desde un editor externo, como

Fireworks.

- Alineación de una imagen

La alineación de las imágenes se establece a través del atributo align. Este atributo indica la alineación de las

imágenes con respecto a la línea de texto en la que se encuentran.

Los valores del atributo align pueden ser los siguientes:

Valor Significado

absbottom inferior absoluta

absmiddle medio absoluta

baseline línea de base

bottom Inferior

left izquierda

middle medio

right derecha

texttop texto superior

top 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:

Page 59: Diseño y elaboracion de paginas web

Ing. Reina Liliana López Reyes e Ing. Feliciano Nevárez Raizola 56

PerrosGatos

Una Web de animales

Habría que escribir:

PerrosGatos<img scr="imagenes/logo_animales.gif" align="middle">Una Web de animales

Este tipo de alineación la recomendamos cuando es una imagen pequeña que queremos fundir con la línea de

texto sin que por ello cree una separación demasiado grande entre la línea donde se encuentra la imagen y las

líneas superior y inferior. Por ejemplo para la imagen de un icono de cualquier programa, de un botón, 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).

• Creación 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 través de la red, tienen multitud

de aplicaciones.

Un formulario está formado, entre otras cosas, por

etiquetas, campos de texto, menús desplegables, y

botones.

Es muy recomendable utilizar tablas para organizar

los elementos de los formularios. Utilizando tablas se

consigue una mejor distribución de los elementos del

formulario, lo que facilita su comprensión y mejora su

apariencia.

Los formularios se insertan a través de las etiquetas <form> y </form>. Entre dichas etiquetas habrá que

insertar los diferentes objetos que formarán el formulario, la etiqueta <form> tiene los siguientes atributos:

El atributo action indica una dirección de correo electrónico a la que mandar el formulario, o la dirección del

programa que se encargará de procesar el contenido del formulario.

Page 60: Diseño y elaboracion de paginas web

Ing. Reina Liliana López Reyes e Ing. Feliciano Nevárez Raizola 57

El atributo enctype indica el modo en que será cifrada la información para su envío. Por defecto tiene el valor

application/x-www-form-urlencoded.

El atributo method indica el método mediante el que se transferirán las variables del formulario. Su valor

puede ser get o post.

El valor get se utiliza cuando no se van a producir cambios en ningún 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, podríamos insertar un formulario escribiendo el siguiente código:

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

A continuación 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 líneas 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 algún 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 número de líneas que podrán ser visualizadas en el área de texto por lo que

determina al alto del área de texto.

El atributo cols indica el número de caracteres por línea que podrán 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 más líneas de las especificadas en el atributo rows,

y más caracteres por línea de los especificados en el atributo cols.

Page 61: Diseño y elaboracion de paginas web

Ing. Reina Liliana López Reyes e Ing. Feliciano Nevárez Raizola 58

Por ejemplo, para insertar el área de texto:

Escribe el texto que quieras

Habría 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 número de caracteres que podrán ser visualizados en el campo de texto, determina

el ancho de la caja.

El atributo maxlenght indica el número de caracteres que podrán 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:

Habría que escribir:

<input name="campo" type="text" value="Campo de texto" size="20" maxlength="15">

Campo de contraseña:

Para insertar un campo de contraseña, el atributo type debe tener el valor password.

Page 62: Diseño y elaboracion de paginas web

Ing. Reina Liliana López Reyes e Ing. Feliciano Nevárez Raizola 59

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 contraseña serán visualizadas como asteriscos.

Por ejemplo, para insertar el campo de contraseña:

Habría que escribir:

<input name="contra" type="password" value="contraseña" size="20" maxlength="15">

Botón:

Para insertar un botón, el atributo type debe tener el valor submit, restore o button.

Si el valor es submit, al pulsar sobre el botón se enviará el formulario.

Si el valor es restore, al pulsar sobre el botón se restablecerá el formulario, borrándose todos los campos del

formulario que hayan sido modificados y adquiriendo su valor inicial.

Si el valor es button, al pulsar sobre el botón no se realizará ninguna acción.

El atributo value indica el texto que mostrará el botón.

Por ejemplo, para insertar el botón:

Habría que escribir:

<input name="boton" type="submit" value="Enviar">

Casilla de verificación:

Para insertar una casilla de verificación, el atributo type debe tener el valor checkbox.

El atributo value indica el valor asociado a la casilla de verificación. Es necesario poner este atributo, aunque

el usuario no pueda ver su valor. Es el valor a enviar.

La aparición del atributo checked indica que la casilla aparecerá activada inicialmente. Este atributo no toma

valores.

Por ejemplo, para insertar la casilla:

Habría que escribir:

Page 63: Diseño y elaboracion de paginas web

Ing. Reina Liliana López Reyes e Ing. Feliciano Nevárez Raizola 60

<input name="casilla" type="checkbox" value="acepto" checked>

Botón de opción:

Para insertar un botón de opción, el atributo type debe tener el valor radio.

El atributo value indica el valor asociado al botón de opción. Es necesario poner este atributo, aunque el

usuario no pueda ver su valor. Es el valor a enviar.

La aparición del atributo checked indica que el botón aparecerá activado inicialmente. Este atributo no toma

valores.

Los botones de opción 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 opción 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 envía el formulario, su valor será el que tendrá la variable.

Por ejemplo, para insertar los botones de opción:

Habría que escribir:

<input name="prefiere" type="radio" value="estudiar" checked> <input name="prefiere" type="radio" value="trabajar">

Cuando se envíe el formulario, si el primer botón 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 página es unos datos interno.

<input name="prefiere" type="radio" value="estudiar" checked> <input name="prefiere" type="radio" value="trabajar">

Cuando se envíe el formulario, si el primer botón 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 página 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 habría que incluir el atributo value para que el formulario pase ese valor al programa que recoge

los datos del formulario.

Para que el usuario envíe un fichero suyo a través del formulario tenemos el tipo file, este tipo hay que

utilizarlo con mucho cuidado ya que si permitimos que cualquier internauta nos envíe cualquier tipo de fichero

nos podríamos encontrar con sorpresas no siempre agradables.

Page 64: Diseño y elaboracion de paginas web

Ing. Reina Liliana López Reyes e Ing. Feliciano Nevárez Raizola 61

- Campos de selección <select>

Los campos de selección se utilizan para insertar menús y listas desplegables.

Para insertar uno de estos menús 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 número de elementos de la lista que pueden ser visualizados al mismo tiempo,

determina el alto de la lista.

La aparición del atributo multiple indica que el usuario podrá seleccionar varios elementos de la lista al

mismo tiempo, ayudándose de la tecla Ctrl . Este atributo no toma valores.

La aparición 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 opción, que se encuentra entre las etiquetas <option> y </option>.

La aparición del atributo selected indica que el elemento aparecerá seleccionado. Este atributo no toma

valores.

Por ejemplo, para insertar el menú:

Habría que escribir:

<select name="mascota"> <option selected>--- Elige animal ---</option> <option>Perro</option> <option>Gato</option> </select>

Y para insertar la lista:

Habría que escribir:

<select name="animal" size="3" multiple> <option selected>---Elige animales---</option>

Page 65: Diseño y elaboracion de paginas web

Ing. Reina Liliana López Reyes e Ing. Feliciano Nevárez Raizola 62

<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 páginas, ya que permiten mantener fijas

algunas partes, como pueden ser el logotipo y la

barra de navegación, mientras que otras sí pueden

cambiar. Además de mejorar la funcionalidad,

pueden mejorar también la apariencia.

Cada uno de los marcos de una página, contiene un

documento HTML individual. Por ejemplo, en la

imagen de la derecha puedes ver una página con dos

marcos. El marco izquierdo contiene el documento

menu.htm y el derecho el documento perros.htm.

Para poder visualizar la página 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 básicos y ejemplos sencillos.

Como hemos visto si queremos utilizar marcos debemos crear una página con la definición del conjunto de

marcos (en el ejemplo anterior la página marcos.htm).

Los conjuntos de marcos se definen a través de las etiquetas <frameset> y </frameset>, que van después

de la etiqueta <head>. A través de estas etiquetas se indica el número 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 páginas 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

Page 66: Diseño y elaboracion de paginas web

Ing. Reina Liliana López Reyes e Ing. Feliciano Nevárez Raizola 63

cols tamaño de cada una de las columnas en

que se divide el documento

Un número (acompañado de % cuando se

desee que sea en porcentaje) por cada

columna, separados por comas.

rows tamaño de cada una de las columnas en

que se divide el documento

Un número (acompañado de % cuando se

desee que sea en porcentaje) por cada fila,

separados por comas.

frameborder aparece o no el borde de los marcos yes

no

framespacing separación entre los marcos un número

border grosor del borde un número, acompañado de % cuando se

desee que sea en porcentaje

bordercolor color del borde número hexadecimal

También 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 repartirán de forma equitativa lo que quede de ventana.

Por ejemplo, si insertáramos la siguiente línea de código:

<frameset rows="*" cols="142,*,25%">...</frameset>

Como el atributo rows tiene el valor asterisco, solo habría una fila, que ocuparía todo el alto de la ventana. En

este caso concreto no haría falta poner el atributo rows.

Como el atributo cols tiene tres valores, estaríamos dividiendo el documento en tres columnas. La primera

columna sería de 142 píxeles de ancho, la tercera del 25% de la ventana, y la segunda columna ocuparía lo que

quedará de ventana (el 75% de la ventana menos 142 píxeles).

También es posible anidar marcos. Es decir, es posible dividir marcos en otros marcos.

Por ejemplo, si insertáramos el siguiente código:

<frameset cols="142,*"> <frameset rows="80,*">...</frameset> <frameset cols="25%,*,*">...</frameset> </frameset>

Estaríamos dividiendo el documento en dos columnas. La primera sería de 142 píxeles, y la otra abarcaría el

resto de la ventana.

Page 67: Diseño y elaboracion de paginas web

Ing. Reina Liliana López Reyes e Ing. Feliciano Nevárez Raizola 64

Al mismo tiempo, la primera columna o subventana estaría dividida en dos filas o subventanas horizontales, la

primera de ellas de 80 píxeles.

La segunda columna o subventana de la ventana principal se dividiría a su vez en tres columnas, la primera de

ellas del 25% de la subventana, y las otras dos se repartirían el resto a partes iguales (se repartirían el 75% de la

subventana).

Por último debemos saber que entre las etiquetas <frameset> y </frameset> sólo se pueden encontrar la

etiquetas <head> <noframe> <frameset> <frame> y sus correspondientes etiquetas de cierre.

- Marco <frame>

Ya hemos visto cómo dividir un documento en varias subventanas o marcos, pero no hemos visto cómo hacer

que se carguen las distintas páginas 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 estarán entre las etiquetas <frameset> y

</frameset>, y no necesitan etiqueta de cierre.

Es posible modificar los siguientes atributos de un marco:

Atributo Significado Posibles valores

frameborder aparece o no el borde del marco yes o 1

no o 0

name nombre del marco cualquier valor

noresize si aparece, el usuario no podrá redimensionar

el tamaño de este marco

no puede tomar valores

marginwidth anchura del margen con respecto a los bordes

del marco

un número, acompañado de % cuando

se desee que sea en porcentaje

marginheight altura del margen con respecto a los bordes

del marco

un número, acompañado de % cuando

se desee que sea en porcentaje

scrolling se mostrará o no la barra de desplazamiento

cuando la página del marco no se pueda

visualizar completamente en él

yes

no

auto

src documento que se cargará en el marco ruta y nombre del documento

Por ejemplo, para crear el conjunto de marcos de la página que aparece si pulsas aquí, tendríamos que escribir:

Page 68: Diseño y elaboracion de paginas web

Ing. Reina Liliana López Reyes e Ing. Feliciano Nevárez Raizola 65

<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 página que aparece si pulsas aquí, tendríamos 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 página 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 página queremos que pueda ser visitada por el mayor número 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á ningún documento en ningún marco, por lo que tendremos

que mostrar el cuerpo del documento actual de algún modo. Por ello, han de introducirse las etiquetas <body>

y </body> entre las etiquetas <noframes> y </noframes>.

Por ejemplo, si escribiéramos el siguiente código:

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

Obtendríamos una página con dos marcos, que en el caso de intentar ser visualizada en un navegador que no

soportase marcos, mostraría una página con el texto Este documento tiene marcos y tu navegador no los

soporta.

Una buena solución para que el mayor número de usuarios pueda visitar nuestra página, es crear nuevas

páginas con el contenido de los documentos que deberían mostrarse en los marcos, pero que permitan pasar

de unos a otros dentro de la misma ventana.

Page 69: Diseño y elaboracion de paginas web

Ing. Reina Liliana López Reyes e Ing. Feliciano Nevárez Raizola 66

De este modo, en el caso de que el navegador no soporte los marcos, podemos incluir un enlace a una de estas

páginas. Por ejemplo, si escribiéramos el siguiente código:

... <noframes> <body> Este documento tiene marcos y tu navegador no los soporta. <a href="sinmarcos.htm"> Pulsa aqui para visualizar la página sin marcos.</a> </body> </noframes> </html>

Cuando la página intentara ser visualizada en un navegador que no soportase los marcos, aparecería el enlace

Pulsa aquí para visualizar la página sin marcos, a una ventana sin marcos.

- Destino del enlace

Como recordarás, en el tema de hipervínculos vimos los posibles destinos de los enlaces. Estos destinos podían

ser _blank, _parent, _self, y _top. Vamos a recordar para qué servía cada uno de ellos, ya que ahora que

sabes trabajar con marcos te serán más fáciles 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 vínculo o en el conjunto de marcos

padre.

_self:

Es la opción predeterminada. Abre el documento vinculado en el mismo marco o ventana que el vínculo.

_top:

Abre el documento vinculado en la ventana completa del navegador, lo cual quiere decir que los marcos de la

ventana desaparecerán al abrir el vínculo en ella.

Además de estos destinos para los enlaces, también podrás utilizar los nombres de los distintos marcos de la

página. Por ejemplo, si tuviéramos un marco con el nombre marcoderecho, podríamos insertar el enlace:

<a href="http://www.conalep.edu.mx" target="marcoderecho"> conalep en el marco derecho </a>

Este enlace cargaría la página de conalep en el marco llamado marcoderecho.

Podemos añadir todos estos nuevos destinos a cualquier elemento de la página que contenga algún enlace, ya

sea texto, una imagen, un mapa de imagen, un elemento Flash, etc.

Page 70: Diseño y elaboracion de paginas web

Ing. Reina Liliana López Reyes e Ing. Feliciano Nevárez Raizola 67

Gracias a todo esto podremos hacer que las barras de navegación y el resto de enlaces funcionen a nuestro

antojo, cargando unas u otras páginas 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.

• Páginas con sonido

- Sonido en HTML I

En su corta pero rápida vida, las páginas 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

imágenes, sonidos, videos y elementos de realidad virtual.

Si el primer paso que se dio fue añadir imágenes a las páginas WEB, tanto estáticas como dinámicas 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 aplicación de sonidos a las páginas 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 tamaño “excesivo” de los mismos.

Otra de las limitaciones importantes que encontramos a la hora de incluir ficheros de sonido en nuestras

páginas es diferente la implementación que hacen de ellos los navegadores WEB más usados. En efecto, no

sólo 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 páginas debemos ser

conscientes que muchos de los formatos usados, sobre todo en grabaciones de calidad, precisan un plugin o

programa especial para su reproducción en el navegador cliente. Y si es cierto que actualmente hay ciertos

plugins se han transformado casi en un estándar 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 páginas 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.

Page 71: Diseño y elaboracion de paginas web

Ing. Reina Liliana López Reyes e Ing. Feliciano Nevárez Raizola 68

WAV (Wave form Audio File format): formato típico de la casa Windows, de elevada calidad, usado en las

grabaciones de CDs, que trabaja a 44 KHz y a 16 bits. Consta básicamente de tres bloques: el de identificación,

el que especifica los parámetros 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 reproducción de ruidos o frases

cortas. La extensión 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 extensión .au

MIDI formato de tabla de ondas, que no guardan el sonido a reproducir, sino un código que nuestra tarjeta de

sonido tendrá que interpretar. Por ello, este tipo de ficheros no puede almacenar sonidos reales, como voces o

música real grabada; sólo puede contener sonidos almacenables en tablas de ondas. Como contrapartida, los

ficheros MIDI, que se guardan con extensión .mid, son de pequeño tamaño, lo que los hace idóneos 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 compresión

del sonido y una muy buena calidad basándose en la eliminación de los componentes del sonido que no estén

entre 20 Hz y 16 KHz (los que puede oír el ser humano normal). Tiene en cuenta el sonido envolvente

(surround) y la extensión multilingüe, y guarda los ficheros con la extensión .mp3, y permite configurar el nivel

de compresión, consiguiéndose calidades similares a las del formato WAVE pero con hasta 10 veces menos

tamaño de fichero. Es soportado directamente sólo 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 también sonidos de

instrumentos musicales digitalizados, pudiendo ser interpretados por cualquier tarjeta de sonido de 8 bits. No

es un formato estándar de Windows, por lo que su uso es más indicado para sistemas Mac, Amiga o Linux. La

extensión de los ficheros es .mod

µ-Law Format de calidad similar al formato WAV, es original de las máquinas NeXt, y guarda sus ficheros con la

extensión .au

Real Audio de calidad media, aunque permite ficheros muy comprimidos, que guarda con extensión .rmp o

.ra. Para su reproducción 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 más que en sistemas operativos concretos, y aún así, con

plugins o programas específicos.

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 más compatibles.

En cambio, si lo que deseamos es poder brindar a nuestros visitantes la opción de navegar con música

ejecutable desde un programa externo, lo mejor es usar ficheros en formato MP3, ya que en la actualidad la

mayoría de los navegantes tienen instalado en su equipo algún programa reproductor adecuado, pudiendo

Page 72: Diseño y elaboracion de paginas web

Ing. Reina Liliana López Reyes e Ing. Feliciano Nevárez Raizola 69

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 páginas, apuntando al fichero de sonido.

Como ejemplo, si queremos enlazar en nuestra página un fichero MP3, bastaría con escribir:

<a href="sonidos/mp3.mp3" target="_blank"> Clic aquí para oir la música. </a>

Con esto, al pinchar el usuario el enlace, se lanzará la aplicación que tenga asociada con el tipo de fichero MP3,

que dependerá de la configuración interna de cada navegador y usuario.

Un caso especial es Netscape 6x. Casi no admite directamente ningún tipo de formato de sonido incrustado en

la página, 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

ejecución una serie de pasos para darse de alta en esa compañía como usuario del software.

Resumiendo: cada usuario tendrá configurada su máquina de forma particular, soliendo prevalecer el último

software de sonido instalado, ya que estos programas suelen adueñarse de ciertos tipos de ficheros para su

ejecución automática. Entre las aplicaciones posibles de ejecución 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 página WEB. Lógicamente, para

que un fichero de audio pueda ser reproducido por un navegador es necesario que su máquina tenga incluida

una tarjeta de sonido y un par de altavoces.

Existen diversas formas de incluir un fichero de audio en una página, 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 página WEB, sonidos que se ejecutan

automáticamente al cargarse la página. Es una etiqueta propietaria de Microsoft, por lo que sólo es

interpretada por Internet Explorer, admitiendo los formatos de audio MID y WAV, aunque generalmente

también acepta AU y MP3, en versiones actuales del navegador o mediante plugins de uso general.

Su sintaxis general, con sus atributos más importantes, es del tipo:

<bgsound src="ruta_fichero" loop="l" balance="b" volume="v"></bgsound>

Donde:

Page 73: Diseño y elaboracion de paginas web

Ing. Reina Liliana López Reyes e Ing. Feliciano Nevárez Raizola 70

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 número 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 (mínimo) y 0

(máximo). No es soportado por los equipos MAC.

Ejemplo: **------

<bgsound src="../sonidos/wav.wav" balance=0 volume=0></bgsound>

La etiqueta bgsound admite muchas más propiedades (disabled, delay, id, class, controls, etc.).

Asimismo, esta etiqueta es accesible en Internet Explorer mediante código JavaScript, pudiendo modificar en

tiempo real sus propiedades balance, loop, src, y volume, aunque ésta última sólo es accesible en

plataformas PC.

EMBED

Netscape Navigator implementó la etiqueta embed para incorporar ficheros de audio. Es ésta una etiqueta de

carácter general, que se usa para la inclusión en las páginas WEB de todos aquellos archivos ajenos al

navegador y que necesitan por lo tanto la ejecución de algún plugin para su interpretación.

Paradójicamente, Internet Explorer asumió después el uso de esta etiqueta para la inclusión de ficheros de

audio, para llegar a interpretarla mejor y ampliarla con más atributos y propiedades, de tal forma que la

ejecución de sonidos con embed es actualmente más cómoda con este navegador, al incorporar la suite de

Microsoft sus propios plugins para la interpretación de los diferentes formatos de audio. En cambio, si usamos

Netscape Navigator nos encontraremos en muchos casos con un fallo en la reproducción o con un engorroso

mensaje de necesidad de algún plugin especial (sobre todo en las versiones 6x), lo que nos obligará a visitar la

página de Netscape para su descarga e instalación, que muchas veces no será efectiva.

Sea como sea, hay que indicar que esta etiqueta nos va a incluir en la página 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 botón Play, para comenzar la reproducción (si no está establecida a automática), un

botón Pause, para detenerla momentáneamente y un botón Stop, para detenerla definitivamente (puesta a

cero). Esta consola es diferente según el navegador usado; en el caso de Internet Explorer se muestra la típica

consola de Windows Media, cuyo tamaño podemos configurar, mientras que en Netscape se muestra una

consola propia, de tamaño fijo definido.

Page 74: Diseño y elaboracion de paginas web

Ing. Reina Liliana López Reyes e Ing. Feliciano Nevárez Raizola 71

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 inclusión 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 número de veces que se debe ejecutar el fichero de audio. Los

valores admitidos son l (número entero de veces), true (infinitas veces) y false (sólo una vez). Sólo es

reconocida por Netscape Navigator.

playcount="n", que define el número 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 reproducción 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í sólo al

cargarse la página o si por el contrario será preciso la actuación del usuario (o de código de script) para que

comience la audición.

pluginspage="URL", que establece, en caso de ser necesario un plugin especial para reproducir el fichero, la

página WEB donde se puede descargar el mismo. Sólo se activa en el caso de que el navegador no sea capaz de

reproducir el fichero por sí mismo, y es soportada tan sólo por Netscape Navigator.

name="nombre", que asigna un nombre identificador (debe ser único en la página) a una etiqueta embed

determinada, con objeto de ser accedida luego por lenguajes de script.

volume="v", que determina el volumen de reproducción del sonido, y que puede variar entre 0 y 100. Es sólo

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

polémico, ya que si ocultamos la consola obligamos al usuario a oír nuestro fichero, sin posibilidad de detenerlo

Page 75: Diseño y elaboracion de paginas web

Ing. Reina Liliana López Reyes e Ing. Feliciano Nevárez Raizola 72

ni de modificar el volumen, y si la mostramos estaremos incrustando en la pantalla un objeto que muchas

veces nos romperá el esquema de diseño de nuestra página. 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 también muy importantes, caso de que hayamos

establecido hidden= "false", ya que de su valor va a depender la correcta visualización de la consola. En el

caso de Internet Explorer, que muestra un logo de Windows Media sobre los controles, el tamaño mínimo

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 tamaño menor, la consola será recortada, perdiendo funcionalidades, y si asignamos

un tamaño mayor, aparecerán espacios grises alrededor de la consola, afeando el aspecto de la página. Si no

especificamos estos atributos y tampoco hidden, nos aparecerán en la página tan sólo los mandos de la

consola, sin logotipos añadidos (Internet Explorer) o la consola recortada (Netscape Navigator).

align="top/bottom/center/baseline/left/right/texttop/middle/absmiddle/absbotom",

análogo al de la etiqueta IMG, define la alineación horizontal o vertical de la consola respecto de los elementos

de la página.

hspace="hs", que establece la separación horizontal, vspace="vs", que establece la separación vertical, en

pixels, entre la consola y los elementos de la página que la rodean. Análoga 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 específicos 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 inclusión 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 pertenecían a los

estándares WEB, por una etiqueta general, que fuera capaz de incrustar en el navegador todo tipo de ficheros.

La etiqueta elegida en el estándar 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

también para incluir ficheros de audio de todo tipo en las páginas WEB.

Page 76: Diseño y elaboracion de paginas web

Ing. Reina Liliana López Reyes e Ing. Feliciano Nevárez Raizola 73

Ahora bien, la aceptación e implementación que la misma ha tenido varía según el navegador en particular, así

como en función del objeto a incrustar. De este forma, Internet Explorer a realizado su propia implementación

de la etiqueta object, incluyendo en ella referencias a filtros y componentes ActiveX específicos para los

ficheros de audio. Por su lado, los navegadores Netscape no soportan correctamente esta etiqueta para

ficheros de este tipo.

Restringiéndonos a Internet Explorer, la polémica 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 además han ido adaptándose a las diferentes versiones de Internet

Explorer.

Como regla general, válida no sólo para incrustar ficheros de sonido, sino también para otros tipos, la etiqueta

object va a definir un objeto o componente externo encargado de la reproducción del fichero, que en el caso

de Internet Explorer suele ser algún 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 configuración 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 implementación 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",

análogo al de la etiqueta IMG, define la alineación horizontal o vertical de la consola respecto de los elementos

de la página.

hspace="hs", que establece la separación horizontal, vspace="vs", que establece la separación vertical, en

pixels, entre la consola y los elementos de la página que la rodean. Análoga a sus equivalentes de la etiqueta

IMG.

Page 77: Diseño y elaboracion de paginas web

Ing. Reina Liliana López Reyes e Ing. Feliciano Nevárez Raizola 74

autostart="true/false", que determina si el fichero de audio debe empezar a reproducirse por sí sólo al

cargarse la página o si por el contrario será preciso la actuación del usuario (o de código de script) para que

comience la audición.

standby="mensaje", que presenta en pantalla un mensaje al usuario mientras el fichero se carga.

En cuanto a los elementos param, los más importantes son:

param name="FileName" value="ruta_fichero", determina la ruta o URL del fichero de audio a

reproducir. No es necesario utilizar sólo ficheros WAV o MID, pudiendo reproducirse también 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 automáticamente al cargar la página o si por el contrario será preciso que el usuario pulse el botón Play

para ello.

No son estos todos los atributos y parámetros posibles. Es más, 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 más que suficiente para

presentar un fichero de audio en nuestra página 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>

• Páginas con vídeo

Netscape implementa en la versión 3.0 el vídeo. En principio, puede utilizarse cualquier formato de vídeo,

aunque los más 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 vídeo, es buena idea acompañarlo de los

"codecs" necesarios para el reproductor. Los "codecs" son unos controladores que se instalan en tu máquina y

permiten que tu reproductor multimedia pueda decodificar correctamente los distintos formatos de vídeo que

existen, y que son muchos. Suelen ser imprescindibles sobre todo para los formatos AVI, aunque también

pueden ser necesarios para algunos formatos MPEG, como el MPEG3, MPEG4 y otros.

El que un formato de vídeo se vea en tu máquina sin problemas, no significa que ocurra lo mismo en cualquier

máquina, incluso con formatos de los más habituales. La gente suele tener sus máquinas con mucha "basura", y

es posible que algún programa (sobre todo juegos o enciclopedias) haya eliminado o cambiado algunos

decodificadores por otros. Los formatos pueden cambiar según la cámara o la placa de vídeo con que han sido

generados los ficheros. Cada fabricante suele proporcionar los "codecs" para sus productos.

Page 78: Diseño y elaboracion de paginas web

Ing. Reina Liliana López Reyes e Ing. Feliciano Nevárez Raizola 75

Otro problema de los ficheros digitales de vídeo es el gran tamaño de los mismos, ya que en la práctica unos

pocos segundos de vídeo con sonido puede representar un fichero de varios Mb. (mega bytes). Se deben poner

muestras de pequeño tamaño para que el visitante de nuestra página pueda probar rápidamente si le interesa

el fichero o no, y al lado la versión completa indicando su tamaño y el "codec" que debe utilizarse.

Una alternativa, aunque mucho menos vistosa, es no programar la aparición de las consolas de reproducción

en la página, 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 más 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>

Analicémoslos brevemente:

SRC Indica dónde está el fichero de vídeo. HEIGHT (alto) y WIDTH (ancho) no pueden omitirse, ya que sus

valores por defecto no permiten ver ninguna imagen real.

Los tamaños estándar de los ficheros .AVI son 90x120, 120x160, 180x240, 240x320, 300x400, etc., las medidas

deben conservar las proporciones de la televisión, 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 vídeo arranque nada más cargarse el fichero. Si estableces FALSE, entonces el vídeo

se activa al hacer clic con el ratón sobre él, lo mismo que para repetir el pase una vez finalizado.

Para hacer que el vídeo se repita continuamente o se pare después 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 vídeo, sino

sobre su alineación con el texto de la página.

Page 79: Diseño y elaboracion de paginas web

Ing. Reina Liliana López Reyes e Ing. Feliciano Nevárez Raizola 76

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 (científicos sobre todo), distinto a los actuales, mucho más amplios.

Para solucionar estos problemas los diseñadores han utilizado técnicas tales como la utilización de tablas

imágenes transparentes para ajustarlas, utilización de etiquetas que no son estándares del HTML y otras. Estas

"trampas" han causado a menudo problemas en las páginas a la hora de su visualización en distintas

plataformas.

Además, los diseñadores se han visto frustrados por la dificultad con la que, aun utilizando estos trucos, se

encontraban a la hora de maquetar las páginas, ya que muchos de ellos venían maquetando páginas sobre el

papel, donde el control sobre la forma del documento es absoluto.

Finalmente, otro antecedente que ha hecho necesario el desarrollo de esta tecnología consiste en que las

páginas web tienen mezclado en su código HTML el contenido del documento con las etiquetas necesarias para

darle forma. Esto tiene sus inconvenientes ya que la lectura del código HTML se hace pesada y difícil a la hora

de buscar errores o depurar las páginas. Aunque, desde el punto de vista de la riqueza de la información y la

utilidad de las páginas 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 características del lenguaje, su potencia y sus posibilidades.

El modo de funcionamiento de las CSS consiste en definir, mediante una sintaxis especial, la forma de

presentación 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 página, se puede definir la forma, en un pequeño trozo de código en la cabecera, a

toda la página.

Una porción del documento, aplicando estilos visibles en un trozo de la página.

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 programación. Podemos definir, por ejemplo,

varios tipos de párrafos: en rojo, en azul, con márgenes, sin ellos...

La potencia de la tecnología salta a la vista. Pero no solo se queda aquí, ya que además esta sintaxis CSS

permite aplicar al documento formato de modo mucho más exacto. Si antes el HTML se nos quedaba corto

para maquetar las páginas y teníamos que utilizar trucos para conseguir nuestros efectos, ahora tenemos

muchas más herramientas que nos permiten definir esta forma:

Podemos definir la distancia entre líneas del documento.

Se puede aplicar identado a las primeras líneas del párrafo.

Podemos colocar elementos en la página con mayor precisión, y sin lugar a errores.

Page 80: Diseño y elaboracion de paginas web

Ing. Reina Liliana López Reyes e Ing. Feliciano Nevárez Raizola 77

Y mucho más, como definir la visibilidad de los elementos, margenes, subrayados, tachados...

Y seguimos mostrándonos ventajas, ya que si con el HTML tan sólo podíamos definir atributos en las páginas

con pixeles y porcentajes, ahora podemos definir utilizando muchas más unidades como:

Pixels (px) y porcentaje (%), como antes.

Pulgadas (in)

Puntos (pt)

Centímetros (cm)

Navegadores que lo soportan

Esta tecnología es bastante nueva, por lo que no todos los navegadores la soportan. En concreto, sólo los

navegadores de Netscape versiones de la 4 en adelante y de Microsoft a partir de la versión 3 son capaces de

comprender los estilos en sintaxis CSS. Además 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 tecnología con cuidado, ya que muchos usuarios no podrán ver

los formatos que apliquemos a las páginas 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 páginas 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 específica, para un

pequeño fragmento de una página, hasta los estilos para todo un sitio web completo. Todo esto pasando por

diversos otros niveles que resultarán de mucha utilidad también en nuestro día a día como diseñadores.

Vamos por orden, describiendo los puntos desde el más específico al más general, de manera que también

iremos aumentando la dificultad e importancia de los distintos usos.

Pequeñas partes de la página

Para definir estilos en secciones reducidas de una página se utiliza la etiqueta <SPAN>. Con su atributo style

indicamos en sintaxis CSS las características de estilos. Lo vemos con un ejemplo, pondremos un párrafo en el

que determinadas palabras las vamos a visualizar en color verde.

<p> Esto es un párrafo en varias palabras <SPAN style="color:green">en color verde</SPAN>. resulta muy fácil.

Page 81: Diseño y elaboracion de paginas web

Ing. Reina Liliana López Reyes e Ing. Feliciano Nevárez Raizola 78

</p>

Que tiene como resultado:

Esto es un párrafo 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 párrafo 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 párrafo de color rojo.

</p> <p style="color:#000099"> Esto es un párrafo de color azul. </p>

Que tiene como resultado:

Esto es un párrafo de color rojo.

Esto es un párrafo de color azul.

Estilo definido en una parte de la página

Con la etiqueta <DIV> podemos definir secciones de una página y aplicarle estilos con el atributo style, es decir,

podemos definir estilos de una vez a todo un bloque de la página.

<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 página

Podemos definir, en la cabecera del documento, estilos para que sean aplicados a toda la página. Es una

manera muy cómoda de darle forma al documento y muy potente, ya que estos estilos serán seguidos en toda

la página y nos ahorraremos así muchas etiquetas HTML que apliquen forma al documento. Además, si

deseamos cambiar los estilos de la página lo haremos de una sola vez.

Page 82: Diseño y elaboracion de paginas web

Ing. Reina Liliana López Reyes e Ing. Feliciano Nevárez Raizola 79

Este ejemplo es más complicado, puesto que se utiliza la sintaxis CSS de manera más avanzada. Pero no te

preocupes puesto que con los ejemplos irás aprendiendo su uso y más tarde comentaremos la sintaxis en

profundidad.

En el ejemplo vemos que se utiliza la etiqueta <STYLE> colocada en la cabecera de la página 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 características de estilos.

<html> <head> <title>Ejemplo de estilos para toda una p&aacute;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&aacute;gina con estilos</h1> Bienvenidos... <p>Siento ser tan hortera, pero esto es un ejemplo sin m&aacute;s importancia</p> </body> </html>

Como se puede apreciar en el código, hemos definido que la etiqueta <H1> se presentará

Subrayado

Centrada

También, por ejemplo, hemos definido que el cuerpo entero de la página (etiqueta <BODY>) se les aplique los

estilos siguientes:

Color del texto negro

Color del fondo grisáceo

Margen lateral de 1 centímetro

Caber destacar que si aplicamos estilos a la etiqueta <BODY>, estos serán 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 más 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 más concreta.

Por último, ha de apreciarse los comentarios HTML que engloban toda la declaración de estilos: <!--Declaración

de estilos-->. Estos comentarios se utilizan para que los navegadores antiguos, que no comprenden la sintaxis

Page 83: Diseño y elaboracion de paginas web

Ing. Reina Liliana López Reyes e Ing. Feliciano Nevárez Raizola 80

CSS, no incluyan ese texto en el cuerpo de la página. Si no se pusiera, los navegadores antiguos (por ejemplo

Netscape 3) escribirían ese "feo código" en la página.

Estilo definido para todo un sitio web

Una de las características más potentes de la programación 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 sólo

colocamos las declaraciones de estilos de la página y enlazando todas las páginas del sitio con ese archivo. De

este modo, todas las páginas comparten una misma declaración de estilos y, por tanto, si la cambiamos,

cambiarán todas las páginas. Con las ventajas añadidas de que se ahorra en líneas de código 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 cómo el proceso para incluir estilos con un fichero externo.

1- Creamos el fichero con la declaración de estilos

Es un fichero de texto normal, que puede tener cualquier extensión, aunque le podemos asignar la extensión

.css para aclararnos qué tipo de archivo es. El texto que debemos incluir debe ser escrito exclusivamente en

sintaxis CSS, es decir, sería erróneo incluir código HTML en él: etiquetas y demás. Podemos ver un ejemplo a

continuación.

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 página 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

Page 84: Diseño y elaboracion de paginas web

Ing. Reina Liliana López Reyes e Ing. Feliciano Nevárez Raizola 81

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 página web entera que enlaza con la declaración 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&aacute;gina que lee estilos</title> </head> <body> <h1>P&aacute;gina que lee estilos</h1> Esta p&aacute;gina tiene en la cabecera la etiqueta necesaria para enlazar con la hoja de estilos. Es muy f&aacute;cil. <br> <br> <table width="300" cellspacing="2" cellpadding="2" border="0"> <tr> <td>Esto est&aacute; 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 también afectarán a etiquetas que

estén dentro de esta etiqueta, o lo que es lo mismo, dentro de todo el cuerpo.

En muchas ocasiones más de una declaración de estilos afecta a la misma porción de la página. Siempre se

tiene en cuenta la declaración más particular. Pero las declaraciones de estilos se pueden realizar de múltiples

modos y con varias etiquetas, también entre estos modos hay una jerarquía de importancia para resolver

conflictos entre varias declaraciones de estilos distintas para una misma porción de página. Se puede ver a

continuación esta jerarquía, primero ponemos las formas de declaración más generales, y por tanto menos

respetadas en caso de conflicto:

Declaración de estilos con fichero externo. (Para todo un sitio web)

Declaración de estilos para toda la página. (Con la etiqueta <STYLE> en la cabecera de la página)

Definidos en una etiqueta en concreto. (Utilizando el atributo style en la etiqueta en cuestión)

Declaración de estilo para una porción pequeña del documento. (Con la etiqueta <SPAN>)

Ya vimos cómo incluir estilos en la página, de todas las maneras posibles e hicimos un repaso con la lista

anterior. Ahora estás en condiciones de empezar a usar las hojas de estilo en cascada para mejorar tus páginas

y aumentar la productividad de tu trabajo. Pero estate atento a los siguientes capítulos donde aprenderás las

Page 85: Diseño y elaboracion de paginas web

Ing. Reina Liliana López Reyes e Ing. Feliciano Nevárez Raizola 82

lecciones que te faltan para dominar bien la materia: conocer la sintaxis, los distintos atributos de estilos y

otras cosas que mejorarán tus páginas.

Otra manera de definir estilos en un archivo externo

Veamos ahora otra manera de importar una declaración 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 paréntesis. (Las comillas son opcionales, pero los paréntesis son obligatorios,

por lo menos, en Explorer).

Se debe incluir en la declaración de estilos global a una página, es decir entre las etiquetas <style

type="text/css"> y </style>, que se colocan en la cabecera del documento.

Es importante señalar que la sentencia de importación del archivo CSS se debe escribir en la primera línea de

la declaración de estilos, algo parecido al código siguiente.

<style type="text/css"> @import url ("estilo.css"); body{ background-color:#ffffcc; } </style>

El funcionamiento es el mismo que si escribiésemos todo el fichero a importar dentro de las etiquetas de los

estilos, con la salvedad de que, si redefinimos dentro del código HTML (entre las etiquetas </style>) estilos

que habían quedado definidos en el archivo externo, los que se aplicarán serán los que hayamos redefinido.

Así, en el ejemplo anterior, aunque hubiésemos definido en estilo.css un color de fondo para la página, el

color que prevalecería sería el definido a continuación de la importación: #ffffcc

La diferencia entre este tipo de importación 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 básicas en el trabajo con los

estilos (que se definen en un archivo a importar) y unos estilos específicos para cada página, que se definen

a continuación, dentro del código HTML entre las etiquetas </style>, como es el caso del ejemplo visto

anteriormente.

Sintaxis y unidades CSS

La sintaxis es bastante sencilla y repetitiva. Básicamente se trata de colocar selectores de elementos (por ahora

sólo hemos visto cómo seleccionar etiquetas, para asignarles estilos, pero más adelante conoceremos otros

selectores), seguidos de los valores o atributos de estilo que queramos aplicar a dichos elementos.

Page 86: Diseño y elaboracion de paginas web

Ing. Reina Liliana López Reyes e Ing. Feliciano Nevárez Raizola 83

A lo largo del manual aprenderemos más 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 básicas que debemos saber sobre la sintaxis de CSS, que nos servirán para entender

mejor nuestros ejemplos e ir avanzando en el conocimiento de las hojas de estilo en cascada.

Veamos entonces estas reglas básicas 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

capítulo. Muchos estos valores son unidades de medida (Unidades CSS), por ejemplo, el valor del

tamaño de un margen o el tamaño de la fuente. Las unidades de medida CSS se pueden clasificar en

dos grupos, las relativas y las absolutas. Más 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 página

web, que dependiendo de cada usuario puede ser distinto, puesto que existen muchos dispositivos que pueden

acceder a la web, como ordenadores o teléfonos móviles. En principio las unidades relativas son más

aconsejables, porque se ajustarán 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, según la fuente actual del usuario. La altura de la

letra x generalmente es la mitad de la de la fuente normal.

Píxeles: px

Un pixel es un punto en la pantalla del dispositivo. Dependiendo de la resolución de la

Page 87: Diseño y elaboracion de paginas web

Ing. Reina Liliana López Reyes e Ing. Feliciano Nevárez Raizola 84

pantalla, un píxel puede ser mayor o menor.

Absolutas: Las unidades absolutas son medidas fijas, que deberían verse igual en todos los dispositivos. Como

los centímetros, que son una convención de medida internacional. Pese a que en principio pueden parece más

útiles, puesto que se verían 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 centímetro sea una medida razonable, pero en un móvil 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

Pulgadas in

Centímetros cm

Milímetros mm

Picas pc

Una pica son 12 puntos.

Porcentaje: el porcentaje se utiliza para definir una unidad en función de la que esté definida en un momento

dado. Imaginemos que estamos trabajando en 12pt y definimos una unidad como 150%. Esto sería 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 también con tres números hexadecimales, en lugar de 6,

como era obligatorio en HTML. Por ejemplo #fff equivaldría a #ffffff, o #123 sería #112233. Además, los

colores se pueden especificar también en valores RGB decimales, con la notación rgb(r, g, b), siendo los

valores de r, g, b números entre 0 y 255, por ejemplo rgb(100,0,255). Otra notación 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 sería 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 imágenes a colocar en fondos de elementos. Las URL en

CSS se especifican con la notación 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

Page 88: Diseño y elaboracion de paginas web

Ing. Reina Liliana López Reyes e Ing. Feliciano Nevárez Raizola 85

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

Notación de colores CSS

Con CSS se puede especificar colores para cada elemento HTML de la página, incluso hay elementos que

podrían 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 declaración CSS.

Porque lo más 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 mínimo para poder entender el código CSS cuando lo veamos escrito.

Notación hexadecimal RGB

Esta notación 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;

Notación hexadecimal abreviada

Esta notación es muy parecida a la anterior, pero permite abreviar un poco la declaración del color, indicando

sólo un número para cada valor rojo, verde y azul. Por ejemplo, para especificar el color de antes (#ff8800)

podríamos haber escrito:

background-color: #f80;

Nombre del color

También podemos definir un color por su nombre. Los nombres de colores son en inglés, los mismos que sirven

para especificar colores con HTML.

color: red; border-color: Lime;

Notación de color con porcentajes de RGB

Se puede definir un color por los distintos porcentajes de valores RGB. Si todos los valores están al 100% el

color es blanco. Si todos están al 0% obtendríamos el negro y con combinaciones de distintos porcentajes de

RGB obtendríamos cualquier matiz de color.

color: rgb(33%, 0%, 0%);

Page 89: Diseño y elaboracion de paginas web

Ing. Reina Liliana López Reyes e Ing. Feliciano Nevárez Raizola 86

Notación por valores decimales de RGB, de 0 a 255

De una manera similar a la notación por porcentajes de RGB se puede definir un color directamente con

valores decimales en un rango desde 0 a 255.

color: rgb(200,255,0);

De entre todas estas notaciones podemos utilizar la que más nos interese o con la que nos sintamos más a

gusto. Nosotros en nuestros ejemplos venimos utilizando la notación hexadecimal RGB por habernos

acostumbrado a ella en HTML.

Color transparente

Para finalizar, podemos comentar que también existe el color transparente, que no es ningún color, sino que

específica que el elemento debe tener el mismo color que el fondo donde está. Este valor, transparent,

sustituye al color. Podemos indicarlo en principio sólo para fondos de elementos, es decir, para el atributo

background-color.

background-color: transparent;

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 páginas web.

Aquí puedes ver la tabla de los atributos CSS más fundamentales para aplicar estilos a elementos básicos, que

te vendrá perfectamente para comenzar con las CSS.

Nombre del

atributo Posibles valores Ejemplos

FUENTES - FONT

color valor RGB o nombre de color color: #009900;

color: red;

Sirve para indicar el color del texto. Lo admiten casi todas las etiquetas de HTML. No todos los

nombres de colores son admitidos en el estándar, es aconsejable entonces utilizar el valor RGB.

font-size

xx-small | x-small | small | medium |

large | x-large | xx-large

Unidades de CSS

font-size:12pt;

font-size: x-large;

Page 90: Diseño y elaboracion de paginas web

Ing. Reina Liliana López Reyes e Ing. Feliciano Nevárez Raizola 87

Sirve para indicar el tamaño de las fuentes de manera más rígida y con mayor exactitud.

font-family

serif | sans-serif | cursive | fantasy |

monospace

Todas las fuentes habituales

font-family:arial,helvetica;

font-family: fantasy;

Con este atributo indicamos la familia de tipografía del texto. Los primeros valores son genéricos,

es decir, los exploradores las comprenden y utilizan las fuentes que el usuario tenga en su sistema.

También se pueden definir con tipografías normales, como ocurría en HTML. Si el nombre de una

fuente tiene espacios se utilizan comillas para que se entienda bien.

font-weight

normal | bold | bolder | lighter | 100

| 200 | 300 | 400 | 500 | 600 | 700 |

800 | 900

font-weight:bold;

font-weight: 200;

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, itálica u oblicua. El estilo oblique es similar al italic.

PÁRRAFOS - TEXT

line-height normal y unidades CSS line-height: 12px;

line-height: normal;

El alto de una línea, y por tanto, el espaciado entre líneas. Es una de esas características que no se

podían modificar utilizando HTML.

text-decoration none | [ underline || overline || line-

through ]

text-decoration: none;

text-decoration: underline;

Para establecer la decoración de un texto, es decir, si está subrayado, sobre rayado o tachado.

text-align left | right | center | justify text-align: right;

text-align: center;

Sirve para indicar la alineación 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;

Page 91: Diseño y elaboracion de paginas web

Ing. Reina Liliana López Reyes e Ing. Feliciano Nevárez Raizola 88

text-indent: 2in;

Un atributo que sirve para hacer sangrado o márgenes en las páginas. Muy útil y novedosa.

text-transform capitalize | uppercase | lowercase |

none

text-transform: none;

text-transform: capitalize;

Nos permite transformar el texto, haciendo que tenga la primera letra en mayúsculas de todas las

palabras, todo en mayúsculas o minúsculas.

FONDO - BACKGROUND

Background-

color

Un color, con su nombre o su valor

RGB

background-color: green;

background-color: #000055;

Sirve para indicar el color de fondo de un elemento de la página.

Background-

image

El nombre de la imagen con su camino

relativo o absoluto

background-image: url(mármol.gif) ;

background-image:

url(http://www.x.com/fondo.gif)

Colocamos con este atributo una imagen de fondo en cualquier elemento de la página.

BOX - CAJA

Margin-left Unidades CSS margin-left: 1cm;

margin-left: 0,5in;

Indicamos con este atributo el tamaño del margen a la izquierda

Margin-right Unidades CSS margin-right: 5%;

margin-right: 1in;

Se utiliza para definir el tamaño del margen a la derecha

Margin-top Unidades CSS margin-top: 0px;

margin-top: 10px;

Indicamos con este atributo el tamaño del margen arriba de la página

Margin-bottom Unidades CSS margin-bottom: 0pt;

margin-top: 1px;

Con él se indica el tamaño del margen en la parte de abajo de la página

Page 92: Diseño y elaboracion de paginas web

Ing. Reina Liliana López Reyes e Ing. Feliciano Nevárez Raizola 89

Padding-left Unidades CSS padding-left: 0.5in;

padding-left: 1px;

Indica el espacio insertado, por la izquierda, entre el borde del elemento-continente y el contenido

de este. Es parecido a el atributo cellpadding de las tablas.

El espacio insertado tiene el mismo fondo que el fondo del elemento-continente.

Padding-right Unidades CSS padding-right: 0.5cm;

padding-right: 1pt;

Indica el espacio insertado, en este caso por la derecha, entre el borde del elemento-continente y

el contenido de este. Es parecido a el atributo cellpadding de las tablas.

El espacio insertado tiene el mismo fondo que el fondo del elemento-continente.

Padding-top Unidades CSS padding-top: 10pt;

padding-top: 5px;

Indica el espacio insertado, por arriba, entre el borde del elemento-continente y el contenido de

este.

Padding-bottom Unidades CSS padding-right: 0.5cm;

padding-right: 1pt;

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: red;

border-color: #ffccff;

Para indicar el color del borde del elemento de la página 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 |

groove | ridge | inset | outset

border-style: solid;

border-style: double;

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: 10px;

border-width: 0.5in;

El tamaño del borde del elemento al que lo aplicamos.

Page 93: Diseño y elaboracion de paginas web

Ing. Reina Liliana López Reyes e Ing. Feliciano Nevárez Raizola 90

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 imágenes en sus valores right y left.

clear none | right | left clear: right;

Si este elemento tiene a su altura imágenes 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 especificación de estilos CSS es muy amplia y seguro que se queda en el tintero algún atributo de estilo, pero

creo que la inmensa mayoría están, y por supuesto la selección de los más importantes.

Definición de estilos CSS Shorthand

Vamos a explicar cómo escribir de forma reducida nuestras reglas CSS para que nuestros archivos de estilo

tengan menos peso y sean más entendibles a la hora de una actualización.

Según la W3C hay dos formas de escribir la misma regla de CSS: la estándar 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 márgenes a 5px */ P {margin: 2px 4px} /* márgenes superior e inferior a 2px, márgenes izquierdo y derecho a 4px */ DIV {margin: 1px

Page 94: Diseño y elaboracion de paginas web

Ing. Reina Liliana López Reyes e Ing. Feliciano Nevárez Raizola 91

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 traducción al castellano) sirven para aplicar estilos a

partes más específicas dentro de una etiqueta. Es decir, para el ejemplo concreto de la etiqueta párrafo, con

los pseudo elementos podemos definir el estilo para la primera letra del párrafo y para la primera línea. 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 continuación con ejemplos.

Pseudo-element first-letter

Un efecto habitual de algunas publicaciones, por ejemplo las de cuentos para niños, es hacer más grande la

primera letra de una página y decorarla de alguna manera. Con CSS podemos aplicar estilos específicos y hacer,

por ejemplo, que esa primera letra sea más grande y tenga un color distinto del resto del párrafo.

Page 95: Diseño y elaboracion de paginas web

Ing. Reina Liliana López Reyes e Ing. Feliciano Nevárez Raizola 92

Se utiliza de esta manera:

P:first-letter { font-size: 200%; color: #993333; font-weight: bold; }

Así estamos asignando un tamaño de letra 200% más grande del propio del párrafo. También estamos

cambiando el color de esa primera letra.

De entre todas las propiedades de estilos, sólo algunas se pueden aplicar a los pseudo-elementos first-letter.

Son las siguientes, según la especificación del W3C: font properties, color properties, background properties,

'text-decoration', 'vertical-align' (sólo 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 aplicación de un estilo con first-letter.

Pseudo-element first-line

Como adelantaba, este pseudo-elemento, sirve para asignar un estilo propio a la primera línea del texto. Es

posible que hayamos visto alguna revista o periódico que utilice este estilo para remarcar las primeras líneas

del párrafo. Un ejemplo de su uso sería 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', 'vertical-

align', 'text-transform', 'line-height', 'text-shadow' y 'clear'.

Se puede ver un ejemplo de aplicación 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 pseudo-

elementos, de modo que estos no se apliquen a todas las etiquetas de la página. Por ejemplo, podemos desear

que solamente se modifique el estilo de la primera línea del texto en algunos párrafos y no en todos los de la

página.

Una clase se define con el nombre de la etiqueta seguido de un punto y el nombre de la clase. Si además

deseamos definir un pseudo-elemento, deberíamos indicarlo a continuación, con esta sintaxis:

Page 96: Diseño y elaboracion de paginas web

Ing. Reina Liliana López Reyes e Ing. Feliciano Nevárez Raizola 93

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 después 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 párrafo llamada "note" en la que se indica que antes de la propia nota se debe

incluir el texto indicado, o sea, "Nota: ".

Nota: Atención 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 características 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 página. 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, poniéndole como valor el nombre de la clase, de esta forma:

<ETIQUETA class="nombredelaclase">

Ejemplo de la utilización de clases <html> <head> <title>Ejemplo de la utilizaci&oacute;n de clases</title> <STYLE type="text/css">

Page 97: Diseño y elaboracion de paginas web

Ing. Reina Liliana López Reyes e Ing. Feliciano Nevárez Raizola 94

.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&aacute;rrafo con estilo de letras verdes</p> <p class=fondonegroletrasblancas> Esto es un p&aacute;rrafo con estilo de fondo negro y las letras blancas. Es todo!</p> </body> </html>

Estilo en los enlaces

Una técnica muy habitual, que se puede realizar utilizando las hojas de estilo en cascada y no se podía en

HTML, es la definición de estilos en los enlaces, quitándoles el subrayado o hacer enlaces en la misma página

con distintos colores.

Para aplicar estilo a los enlaces debemos definirlos para los distintos tipos de enlaces que existen (visitados,

activos...). Utilizaremos la siguiente sintaxis, en la declaración de estilos global de la página (<STYLE>) o del sitio

(Definición en un archivo externo):

Enlaces normales

A:link {atributos}

Enlaces visitados

A:visited {atributos}

Enlaces activos (Los enlaces están activos en el preciso momento en que se pincha sobre ellos)

A:active {atributos}

Enlaces hover (Cuando el ratón 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.

Page 98: Diseño y elaboracion de paginas web

Ing. Reina Liliana López Reyes e Ing. Feliciano Nevárez Raizola 95

También 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 página 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&oacute;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 página. 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 imprimirán en la página 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 página, como con cualquier otro texto.

Para evitarlo debemos ocultar con comentarios HTML (<!-- esto es un comentario -->) todo lo que

hay dentro de la etiqueta <STYLE>.

Page 99: Diseño y elaboracion de paginas web

Ing. Reina Liliana López Reyes e Ing. Feliciano Nevárez Raizola 96

2. Desarrollo de páginas web dinámicas.

2.1 Implementa interactividad a las páginas web, mediante el desarrollo de código

de programación en un lenguaje script.

Conceptos básicos

Todos los que hasta ahora hayan seguido el curso de HTML, se habrán dado cuenta de una cosa: crear un

documento HTML es crear algo de carácter estático, inmutable con el paso del tiempo. La página se carga, y ahí

termina la historia. Tenemos ante nosotros la información que buscábamos, pero no podemos INTERACTUAR

con ella.

Así pues, como solución 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 diseñado

específicamente 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 versión 2 y el segundo desde la versión 3.

Navegador Versión de JavaScript Soporte ECMA

Nestcape 2 Javascript 1.0 --

Internet Explorer 2 No soporta JavaScript --

Nestcape 3 Javascript 1.1 --

Internet Explorer 3 Javascript 1.0 --

Nestcape 4 Javascript 1.2 - 1.3 incompleta ECMA-262-compliant hasta la versión 4.5

Internet Explorer 4 Javascript 1.2 ECMA-262-compliant

Nestcape 6 ECMA compliant Javascript 1.4 Full ECMAScript-262

Page 100: Diseño y elaboracion de paginas web

Ing. Reina Liliana López Reyes e Ing. Feliciano Nevárez Raizola 97

Internet Explorer 5 ECMA compliant Javascript 1.3 Full ECMAScript-262

Las diferentes versiones de JavaScript han sido finalmente integradas en un estándar denominado ECMAScript-

262. Dicho estándar ha sido realizado por la organización ECMA dedicada a la estandarización de información y

sistemas de comunicación. Las versiones actuales de los navegadores soportan este estándar, así que

basaremos el curso sobre él.

Dónde y cómo incluir JavaScript

Existen distintos modos de incluir lenguaje JavaScript en una página.

La forma más 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 versión 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 código HTML.

<script language="JavaScript" src ="archivo.js"> </script>

El archivo externo simplemente es un archivo del texto que contiene código JavaScript, y cuyo nombre acaba

con la extensión js.

Puede incluirse también código JavaScript como respuesta a algún evento: <input type="submit" onclick="alert('Acabas de hacer click');return false;" value="Click">

Click

Nota: Los scripts pueden incluirse como comentarios para asegurar que su código no es "visto" por

navegadores viejos que no reconocen JavaScript y así evitar errores.

<script ....> <!- Código JavaScript //--> </script>

Gramática

Si conoce algún otro lenguaje de programación ya estará familiarizado con el uso de variables, operadores,

declaraciones... Lo que se resume en la tabla siguiente son los elementos principales de la gramática de

JavaScript. Cada uno de los elementos se verá en detalle a lo largo del manual.

Page 101: Diseño y elaboracion de paginas web

Ing. Reina Liliana López Reyes e Ing. Feliciano Nevárez Raizola 98

Nota importante: JavaScript es sensible a mayúsculas y minúsculas, todos los elementos de JavaScript deben

referenciarse cómo se definieron, no es lo mismo "Salto" que "salto".

Variables Etiquetas que se refieren a un valor cambiante.

Operadores Pueden usarse para calcular o comparar valores.

Ejemplo: pueden sumarse dos valores, pueden compararse dos valores...

Expresiones Cualquier combinación de variables, operadores, y declaraciones que evalúan a algún

resultado.

Ejemplo: intTotal=100; intTotal > 100

Sentencias Una sentencia puede incluir cualquier elemento de la gramática 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 sólo es obligatorio si las

declaraciones múltiples residen en la misma línea. Aunque es recomendable que se

acostumbre a terminar cada instrucción con un punto y coma, se ahorrará problemas.

Objetos Estructura "contenedora" de valores, procedimientos y funciones, cada valor refleja una

propiedad individual de ese objeto.

Funciones y

Métodos

Una función de JavaScript es bastante similar a un" procedimiento" o" subprograma" en otro

lenguaje de programación. Una función es un conjunto que realizan alguna acción. Puede

aceptar los valores entrantes (los parámetros), y puede devolver un valor saliente. Un método

simplemente es una función contenida en un objeto.

Variables

Las variables almacenan y recuperan datos, también 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 números (0-9), letras mayúsculas o letras minúsculas).

Ejemplos de definiciones erróneas:

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:

Page 102: Diseño y elaboracion de paginas web

Ing. Reina Liliana López Reyes e Ing. Feliciano Nevárez Raizola 99

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 página mientras que una variable local sólo lo es desde la función en la que fue

declarada.

Normalmente, usted crea una nueva variable global asignándole simplemente un valor:

globalVariable=5;

Sin embargo, si usted está codificando dentro de una función y usted quiere crear una variable local que sólo

tenga alcance dentro de esa función, 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: numéricos, lógicos, objetos, cadenas, nulos e indefinidos.

JavaScript tiene la peculiaridad de ser un lenguaje débilmente 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 más adelante una

cadena.

MiVariable=4;

Y después:

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 contendrán, será el propio interprete el que le asignará el tipo apropiado.

(Esto es así para seguir la filosofía de diseño de Javascript que indica que se realizan programas pequeños y que

la idea es lograr que el programador realice los scripts de la manera más rápida posible).

Tipos de Datos:

Números Enteros o coma flotante.

Boléanos True o False.

Cadenas Los tipos de datos cadena deben ir delimitados por comillas simples o dobles.

Page 103: Diseño y elaboracion de paginas web

Ing. Reina Liliana López Reyes e Ing. Feliciano Nevárez Raizola 100

Objetos Obj = new Object();

Nulos 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 más variables o valores (los operando) y devuelve un nuevo valor; por ejemplo el '

+' operador puede agregar dos números para producir un tercero. Los operadores están clasificados en varias

clases dependiendo de la relación que ellos realizan:

Operadores Aritméticos

Los operadores aritméticos toman los valores numéricos (literales o variables) como sus operando y devuelve

un solo valor numérico. Los operadores aritméticos normales son:

Operador Nombre Ejemplo Descripción

+ Suma 5 + 6 Suma dos números

- Substracción 7 - 9 Resta dos números

* Multiplicación 6 * 3 Multiplica dos números

/ División 4 / 8 Divide dos números

% Módulo: el resto después

de la división 7 % 2

Devuelve el resto de dividir ambos números, en

este ejemplo el resultado es 1

++ Incremento. a++ Suma 1 al contenido de una variable.

-- Decremento. a-- Resta 1 al contenido de una variable.

- Invierte el signo de un

operando. -a Invierte el signo de un operando.

<!-- Ejemplo de JavaScript con operadores aritmeticos -->

Page 104: Diseño y elaboracion de paginas web

Ing. Reina Liliana López Reyes e Ing. Feliciano Nevárez Raizola 101

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

Page 105: Diseño y elaboracion de paginas web

Ing. Reina Liliana López Reyes e Ing. Feliciano Nevárez Raizola 102

Operadores de comparación

Un operador de la comparación compara sus operando y devuelve un valor lógico basado en si la comparación

es verdad o no. Los operando pueden ser numéricos o cadenas.

Operador Descripción

== " 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 comparación realizaban 'una conversión de

tipos' si era necesario. Es decir, si un operando era una cadena y el otro era un valor numérico, JavaScript

realizaba la conversión de la cadena a numérico antes de realizar la comparación.

JavaScript 1.2 no realizaba 'conversiones de tipo', por eso si dos operadores eran de tipos distintos no se

realizaba la comparación.

Finalmente, en las últimas versiones de JavaScript se añaden los operadores de 'comparación estricta', los

cuales realizarán la comparación si los dos operandos son del mismo tipo.

Page 106: Diseño y elaboracion de paginas web

Ing. Reina Liliana López Reyes e Ing. Feliciano Nevárez Raizola 103

<!-- Ejemplo de JavaScript con operadores comparacion --> <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 Lógicos

Los operadores Lógicos se utilizan para combinar múltiples comparaciones en una expresión condicional. Un

operador lógico toma dos operandos cada uno de los cuales es un valor true o false y devuelve un valor true o

false.

Page 107: Diseño y elaboracion de paginas web

Ing. Reina Liliana López Reyes e Ing. Feliciano Nevárez Raizola 104

Operador Descripción

&& "Y" Devuelve true si ambos operadores son true.

|| "O" Devuelve true si uno de los operadores es true.

! "No" Devuelve true si la negación del operando es true.

Operadores de Cadena

Los valores cadena pueden compararse usando los operadores de comparación. 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 Asignación

El operador de asignación '=' le permite asignar un valor a una variable.

Operador Descripción

= Asigna el valor del operando de la derecha a la variable de la izquierda.

Ejemplo: inttotal=100;

+=

(también - =, * =, / =)

Añade el valor del operando de la derecha a la variable de la izquierda.

Ejemplo: inttotal +=100

&=

(también |=)

Asigna el resultado de (operando de la izquierda & operando de la derecha) al operando

de la izquierda

<!-- Ejemplo de JavaScript con operador de asignación --> <html> <head> <title>Ejemplo de JavaScript con operador de asignación </title> </head>

Page 108: Diseño y elaboracion de paginas web

Ing. Reina Liliana López Reyes e Ing. Feliciano Nevárez Raizola 105

<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 difícil clasificarlos en una categoría en particular. Estos operadores se

resumen a continuación.

Operador Descripción

(condición) ? trueVal : falseVal Asigna un valor especificado a una variable si la condición es true,

por otra parte asigna un valor alternativo si la condición es false.

New El operador new crea una instancia de un objeto.

This La palabra clave 'this' se refiere al objeto actual.

, El operador ',' evalúa los dos operados.

Delete El operador delete borra un objeto, una propiedad de un objeto, o

un elemento especificado de un vector.

Void El operador Void especifica una expresión que será evaluada sin

Page 109: Diseño y elaboracion de paginas web

Ing. Reina Liliana López Reyes e Ing. Feliciano Nevárez Raizola 106

devolver ningún 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 más

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 numérico que nos indica la longitud en caracteres de la cadena dada.

prototype. Nos permite asignar nuevas propiedades al objeto String.

Métodos

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 carácter situado en la posición 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 válido de color entre comillas. Algunos de estos identificadores son "red", "blue",

"yellow", "purple", "darkgray", "olive", "salmon", "black", "white", ...

fontsize(tamaño). Cambia el tamaño con el que se muestra la cadena. Los tamaños válidos son de

1 (más pequeño) a 7 (más grande). indexOf(cadena_buscada,indice) Devuelve la posición de la

primera ocurrencia de 'cadena_buscada' dentro de la cadena actual, a partir de la posición dada por

'indice'. Este último argumento es opcional y, si se omite, la búsqueda comienza por el primer

carácter de la cadena.

italics(). Muestra la cadena en cursiva.

Page 110: Diseño y elaboracion de paginas web

Ing. Reina Liliana López Reyes e Ing. Feliciano Nevárez Raizola 107

lastIndexOf(cadena_buscada,indice). Devuelve la posición de la última ocurrencia de

'cadena_buscada' dentro de la cadena actual, a partir de la posición dada por 'indice', y buscando

hacia atrás. Este último argumento es opcional y, si se omite, la búsqueda comienza por el último

carácter de la cadena.

link(URL). Convierte la cadena en un vínculo asignando al atributo HREF el valor de URL.

small(). Muestra la cadena con una fuente pequeña.

split(separador). Parte la cadena en un array de caracteres. Si el carácter separador no se

encuentra, devuelve un array con un sólo 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 subíndice.

substring(primer_Indice,segundo_Indice). Devuelve la subcadena que comienza en la

posición 'primer_Indice + 1' y que finaliza en la posición '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 superíndice.

toLowerCase(). Devuelve la cadena en minúsculas.

toUpperCase(). Devuelve la cadena en minúsculas.

<!-- Ejemplo de JavaScript con objetos --> <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("Tamaño 7: "+cad.fontsize(7)+"<BR>"); write("<I>orl</I> esta en la posicion: "+cad.indexOf("orl"));

Page 111: Diseño y elaboracion de paginas web

Ing. Reina Liliana López Reyes e Ing. Feliciano Nevárez Raizola 108

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 pequeño: "+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

básico, y cuya longitud se modificará de forma dinámica siempre que añadamos 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 notación a[i], donde i variará entre 0 y N-1, siendo N el número de elementos

que le pasamos al constructor.

También 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, además, 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 número de elementos del array (y

habrá que asignarles valores posteriormente), y si ponemos más de uno, será la forma de inicializar el array con

tantos elementos como argumentos reciba el constructor.

Podríamos poner como mención especial de esto lo siguiente. Las inicializaciones que vemos a continuación:

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.

Page 112: Diseño y elaboracion de paginas web

Ing. Reina Liliana López Reyes e Ing. Feliciano Nevárez Raizola 109

Lo comentado anteriormente sobre inicialización 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, ¿cómo creamos un array bidimensional? (un array bidimensional es una

construcción bastante frecuente). Creando un array con las filas deseadas y, después, 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 posición (i,j), escribiremos a[i][j];

Propiedades

length. Esta propiedad nos dice en cada momento la longitud del array, es decir, cuántos elementos

tiene.

prototype. Nos permite asignar nuevas propiedades al objeto String.

Métodos

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 lexicográfico.

<!-- Ejemplo de JavaScript de arrays --> <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","Cariño"); 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>");

Page 113: Diseño y elaboracion de paginas web

Ing. Reina Liliana López Reyes e Ing. Feliciano Nevárez Raizola 110

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 cálculos en nuestros scripts. Tiene la peculiaridad de que sus

propiedades no pueden modificarse, sólo consultarse. Estas propiedades son constantes matemáticas de uso

frecuente en algunas tareas, por ello es lógico que sólo pueda consultarse su valor pero no modificarlo.

Propiedades

E. Número '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. Número PI.

SQRT1_2. Raíz cuadrada de 1/2.

SQRT2. Raíz cuadrada de 2.

Métodos

abs(numero). Función valor absoluto.

acos(numero). Función arcocoseno. Devuelve un valor cuyas unidades son radianes o NaN. 'numero'

debe pertenecer al rango [-1,1], en otro caso devuelve NaN.

asin(numero). Función arcoseno. Devuelve un valor cuyas unidades son radianes o NaN. 'numero'

debe pertenecer al rango [-1,1], en otro caso devuelve NaN.

atan(numero). Función 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.

Page 114: Diseño y elaboracion de paginas web

Ing. Reina Liliana López Reyes e Ing. Feliciano Nevárez Raizola 111

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 máximo de 'x' e 'y'.

min(x,y). Devuelve el mínimo de 'x' e 'y'.

pow(base,exp). Devuelve el valor baseexp.

random(). Devuelve un número pseudoaleatorio entre 0 y 1.

round(numero). Redondea 'numero' al entero más cercano.

sin(numero). Devuelve el seno de 'numero' (que debe estar en radianes) o NaN.

sqrt(numero). Devuelve la raíz cuadrada de número.

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 varía entre el 0 y el 11 (es decir, el mes 0 es Enero, el mes 1 es Febrero, y así

sucesivamente), los días de la semana de Domingo a Sábado vienen dados por un entero cuyo rango varía

entre 0 y 6 (el día 0 es el Domingo, el día 1 es el Lunes, ...), los años se ponen tal cual, y las horas se especifican

con el formato HH:MM:SS.

Podemos crear un objeto Date vacío, o podemos créalo dándole 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 dándole un

valor, tenemos estas posibilidades:

var Mi_Fecha = new Date(año, mes); var Mi_Fecha = new Date(año, mes, día); var Mi_Fecha = new Date(año, mes, día, horas); var Mi_Fecha = new Date(año, mes, día, horas, minutos); var Mi_Fecha = new Date(año, mes, día, horas, minutos, segundos);

En día pondremos un número del 1 al máximo de días del mes que toque. Todos los valores que tenemos que

pasar al constructor son enteros. Pasamos a continuación a estudiar los métodos de este objeto.

Métodos

Page 115: Diseño y elaboracion de paginas web

Ing. Reina Liliana López Reyes e Ing. Feliciano Nevárez Raizola 112

getDate(). Devuelve el día del mes actual como un entero entre 1 y 31.

getDay(). Devuelve el día de la semana actual como un entero entre 0 y 6.

getHours(). Devuelve la hora del día 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 año 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 año actual como un entero.

setDate(día_mes). Pone el día del mes actual en el objeto Date que estemos usando.

setDay(día_semana). Pone el día de la semana actual en el objeto Date que estemos usando.

setHours(horas). Pone la hora del día 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 año 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(año). Pone el año 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 = new Boolean(); asigna a 'a' el valor 'false' a = new Boolean(0); asigna a 'a' el valor 'false' a = new Boolean(""); asigna a 'a' el valor 'false' a = new Boolean(false); asigna a 'a' el valor 'false' a = new Boolean(numero_distinto_de_0); asigna a 'a' el valor 'true' a = new Boolean(true); asigna a 'a' el valor 'true'

Page 116: Diseño y elaboracion de paginas web

Ing. Reina Liliana López Reyes e Ing. Feliciano Nevárez Raizola 113

El Objeto Number

Este objeto representa el tipo de dato número con el que JS trabaja. Podemos asignar a una variable un

número, 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

algún valor al constructor, la variable se inicializará con el valor 0.

Propiedades

MAX_VALUE. Valor máximo que se puede manejar con un tipo numérico

MIN_VALUE. Valor mínimo que se puede manejar con un tipo numérico

NaN. Representación de un dato que no es un número

NEGATIVE_INFINITY. Representación del valor a partir del cual hay desbordamiento negativo

(underflow)

POSITIVE_INFINITY. Representación 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.

Page 117: Diseño y elaboracion de paginas web

Ing. Reina Liliana López Reyes e Ing. Feliciano Nevárez Raizola 114

2.2 Establece el acceso a bases de datos en páginas web mediante el desarrollo de

código en un lenguaje de programación.

Pasos previos I: Instalación del PWS

Instalación del Personal Web Server: nuestro servidor personal de web.

Dada la naturaleza de los lenguajes de lado servidor, nos es imposible trabajar offline como hacíamos para el

caso de las páginas HTML que almacenábamos en nuestro disco duro. También esto no es completamente

cierto ya que podemos resolver este eventual problema instalándonos 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 versión 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 Instalación

de IIS en Windows XP profesional.

Existe también 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 versión de FrontPage 98, instalándolo desde la opción pack de W-NT 4.0 o desde el CD de

instalación 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: También existe otra posibilidad para ejecutar páginas 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

instalación. Es recomendable que leáis también las notas de los visitantes al pie de página, porque encontraréis

muchos más 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

páginas ASP.

PWS podría ser considerado como una versión "light" del IIS4. En realidad en PWS no es suficientemente

versátil para ejercer de servidor de un sitio de un tamaño mediano aunque si que podría en un momento dado

hacerse cargo de un sitio de tamaño 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

Page 118: Diseño y elaboracion de paginas web

Ing. Reina Liliana López Reyes e Ing. Feliciano Nevárez Raizola 115

sobre una pequeña modificación introducida. Esto resulta a todas luces práctico sobre todo para principiantes

que necesitan hacer pruebas con una relativa frecuencia permitiendo el ahorro de mucho tiempo.

Dado que la mayoría de los posibles lectores de este manual trabajan en entorno W95 y 98, en este capítulo

nos limitaremos a la descripción del PWS dejando el IIS4 para futuros capítulos. Sin embargo, las explicaciones

que damos pueden ser igualmente útiles para quienes tengan que utilizar este último el cual presenta un

funcionamiento básico análogo. El uso del PWS es extremadamente fácil. Una vez instalado, podemos observar

la introducción de un nuevo icono en la barra de tareas así que en el menú de inicio correspondientes a la

aplicación. A partir de cualquiera de ellos podemos tener acceso a la página principal o gestionario.

El siguiente paso es crear un directorio virtual dentro del cual alojaremos nuestra página. Hablamos de

directorio virtual debido a que nuestra página 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 página. De hecho, la URL que debemos introducir en el

navegador para visualizar nuestra página ASP es del tipo: http://localhost/nombre_del_directorio

virtual/archivo.asp

Como se puede observar, en este tipo de dirección no se especifica el camino en el disco duro donde se

encuentran nuestros archivos.

Volviendo a la creación 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

Page 119: Diseño y elaboracion de paginas web

Ing. Reina Liliana López Reyes e Ing. Feliciano Nevárez Raizola 116

los archivos y carpetas de la página aparecerá.

Como puede verse, la cosa es fácil. Ahora no queda más que introducir en el navegador el tipo de URL

mencionada anteriormente para ejecutar los scripts creados.

Una opción interesante en el menú avanzado es la selección del tipo de archivo que será ejecutado por

defecto. Aquí podríamos poner archivos con nombre index.html o index.asp o bien con el nombre default o

home...

Conexión a BD

Qué es una base de datos y cómo conectarse a partir de los ODBC.

El siguiente paso, una vez instalado el servidor que nos permite trabajar en local, es crear los vínculos con las

bases de datos que explotaremos en nuestros scripts. En efecto, la utilización de páginas dinámicas 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 (artículos

de una tienda virtual, proveedores o clientes de una empresa, películas en cartelera en el cine...). Estos

registros son catalogados en función de distintos parámetros que los caracterizan y que presentan una utilidad

a la hora de clasificarlos. Así, por ejemplo, los artículos de una tienda virtual podrían catalogarse a partir de

distintos campos como puede ser un número de referencia, nombre del artículo, descripción, precio,

proveedor...

Las bases de datos son construidas sirviéndose de aplicaciones tales como el Microsoft Access o el MySQL las

cuales resultan bastante sencillas de utilizar con unos conceptos mínimos.

Nuestro objeto aquí no es explicar la forma de explotarlas sino cómo establecer una conexión entre la base de

datos, almacenada en cualquier lugar del disco duro y nuestra página web alojada también en cualquier parte y

reconocida por nuestro servidor personal a partir del directorio virtual.

Page 120: Diseño y elaboracion de paginas web

Ing. Reina Liliana López Reyes e Ing. Feliciano Nevárez Raizola 117

Para crear este vínculo, 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 conexión es ir al panel de configuración 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 "Añadir".

A continuación se nos pedirá seleccionar los controladores de la aplicación 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

aplicación 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 tendrán por qué encontrarse en el servidor donde trabajemos.

Page 121: Diseño y elaboracion de paginas web

Ing. Reina Liliana López Reyes e Ing. Feliciano Nevárez Raizola 118

Un pequeño 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 específico para MySQL, otro para Oracle, PostgreSQL, etc. Aunque no existe entre

sus librerías ninguna función para acceder específicamente a una base de datos Access. Para ello, disponemos

de las funciones de conexión ODBC con bases de datos.

ODBC es un estándar de conexión 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 programación 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 conexión 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 programación a bases de

datos por ODBC. Esto lo hacemos desde el panel de control de Windows en la opción "Herramientas

administrativas - Orígenes 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 código de conexión.

Si tenemos nuestra página alojada en un proveedor de hosting y queremos conectar Access con PHP, si es que

lo permiten (pues lo típico en esos casos es utilizar una base de datos MySQL), tendríamos que preguntarles

cómo crear el DSN en sus sistemas.

Una vez tengamos el DSN utilizaremos un código de conexión como este:

$conn_access = odbc_connect ("guiarte_access", "", "");

Con la función odbc_connect() se conecta con una base de datos por ODBC, indicando el nombre del DSN en

el primer parámetro y luego el usuario y la contraseña. En Access normal es que no se tenga siquiera usuario y

contraseña, por lo que esos dos parámetros los he pasado con una cadena vacía. Nos devuelve el identificador

de la conexión con la base de datos.

Para ejecutar una sentencia SQL utilizaremos la función 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 conexión obtenido anteriormente y la

sentencia SQL a ejecutar. Devuelve un identificador del conjunto de registros resultado de ejecutar la

sentencia.

Page 122: Diseño y elaboracion de paginas web

Ing. Reina Liliana López Reyes e Ing. Feliciano Nevárez Raizola 119

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 código completo de conexión con una base de datos Access podría 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 conexión con la base de datos"; }

Programación en PHP utilizando la base de datos Access

HP es el paradigma de la programación dinámica en servidor Web en estos momentos. Atrás quedó la posición

de liderazgo ocupada por la programación ASP de Microsoft. Ambas tecnologías de programación orientadas al

servidor tienen en mismo objetivo: construir páginas dinámicas en un servidor Web actualizables mediante una

base de datos que ofrece los contenidos. Las exigencias del tipo de proyecto a realizar hacía que el

programador se tuviera que decantar de forma obligada hacia una tecnología u otra. No cabe duda que la

plataforma más 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 páginas dinámicas en esta plataforma debían hacerlo con

ASP.

Pero el avance de Linux, a traído una serie de ventajas a aquellos programadores que pensaban que no existía

otra alternativa a este tipo de programación. La tecnología PHP está orientada a trabajar en plataformas tipo

unix o linux junto con programas que, aunque no están muy extendidos, si tienen sobrada fama de ser una

solución Web muy estable a las necesidades de construir un web dinámico.

El motivo de este artículo es mostrar la potencia de un lenguaje de programación en servidor como es PHP

junto con su utilidad más 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

máquina que tiene Linux instalado junto con el servidor Web por excelencia en este sistema operativo y al

mismo tiempo el más 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 configuración no suele ser normal pero PHP

tiene una distribución para plataformas Microsoft ya que de hecho es un lenguaje de programación en servidor

que se adapta a muchos de los programas servidores Web (Apache, IIS, etc.).

Page 123: Diseño y elaboracion de paginas web

Ing. Reina Liliana López Reyes e Ing. Feliciano Nevárez Raizola 120

Las funciones que se utilizarán 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, podría valer

cualquier otra a la que se pu-diera conectar a través de un enlace ODBC (Open Data Base Connecty). Utilizando

este tipo de conexión y con el controlador correspondiente, podemos hacer que una base de datos sea

accesible a cualquier aplicación que soporte ODBC. Sin importar qué base de datos se utilice habrá un segundo

nivel entre ésta y la aplicación que es ODBC y que tendrá como finalidad servir de puente entre las dos. De esta

forma la aplicación no tiene que tener un soporte específico para cada base de datos, sino que a través 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 configurarán las conexiones

a una base de datos. Por defecto incluye las más utilizadas (SQL Server, Access, Dbase, etc.) y otras que aún no

siendo específicamente 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

intérprete de páginas PHP, vamos a crear el enlace ODBC que permitirá conectar con la base de datos desde las

páginas PHP.

La base de datos utilizada para este artículo se ha denominado agenda y contiene una tabla con el nombre

“datos”. Los campos que se van a utilizar son: id (autonumérico), nombre (texto), apellidos (texto), dirección

(texto), provincia (texto), cp (numérico), teléfono (numérico) 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

pestaña ODBC Sistema, pulse el botón Agregar y seleccione el tipo de base de datos. A partir de aquí basta con

introducir la información necesaria siendo el primer campo a rellenar el nombre que tendrá la conexión y sobre

la que se hará referencia en las páginas PHP. El nombre que se va a utilizar es “agenda”. Cuando se pulse el

botón Aceptar la conexión ODBC creada a la base de datos estará disponible para cualquier aplicación que lo

requiera.

Las páginas PHP

Una pagina PHP está compuesta por las conocidas etiquetas de HTML más los fragmentos de código propios de

PHP. Si el usuario observa el código comprobará que existen unas etiquetas de apertura (<?) y otras de cierre

(?>) que a su vez contienen el código del lenguaje PHP. Cuando se solicita al servidor Web una página PHP, el

intérprete ejecuta las instrucciones de dicha página (conexiones a bases de datos, funciones, etc.) para

posteriormente mandar el resultado junto con resto del código HTML al navegador del usuario.

Para que una página PHP pueda ser interpretada de forma correcta debe de cumplir dos condiciones: la

primera es que el fichero debe de ser guardado con extensión php3 (si no se ha modificado este parámetro en

la configuración del servidor Web) y la segunda es que debe de estar en el directorio que tenga permiso para

ejecutar este tipo de páginas.

Page 124: Diseño y elaboracion de paginas web

Ing. Reina Liliana López Reyes e Ing. Feliciano Nevárez Raizola 121

Para hacer una primera prueba, puede copiar el código de Listado 1 y acceder a dicha página para ver que todo

funciona correctamente. Si como resultado se obtiene una tabla con información sobre parámetros, la

configuración de las páginas PHP es correcta.

LISTADO 1

<html> <head> <title>PHP y Access</title> </head> <body bgcolor="#ffffff"> <? phpinfo(); ?> </body> </html>

La información que puede ver en ese momento se refiere al estado de las variables de PHP así como otros

datos sobre su funcionamiento e instalación. En este momento ya tenemos todos los elementos necesarios

funcionando para comenzar a desarrollar una aplicación en PHP que va a gestionar una agenda de teléfonos y

direcciones desde un entorno Web, con la ventaja de que tan sólo se necesitará un navegador para consultar o

añadir información.

La aplicación que hemos llamado Agenda, consta de tres secciones que van a permitir realizar las funciones

necesarias para su uso: buscar un número de teléfono, añadir 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 Tipo Id Autonumérico Nombre Texto Apellidos Texto Direccion Texto Provincia Texto Cp Numérico Telefono Numérico fecha_nacimiento Date

La primera página que se crea es la que permite añadir 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 conexión ODBC con páginas PHP se utilizan una serie de funciones que están implementadas en

una de las librerías que la distribución de PHP contiene, por lo que están a disposición del usuario sin que sea

necesario cargar ningún módulo externo. To-das las funciones que están 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 continuación la acción que realiza la

función. Si se estuviera utilizando una base de datos “mySQL”, el nombre de las funciones comenzarían por

“mysql_” o “ora_” en el caso de ser una base de datos Oracle.

Page 125: Diseño y elaboracion de paginas web

Ing. Reina Liliana López Reyes e Ing. Feliciano Nevárez Raizola 122

El primer paso es crear la conexión entre la base de datos, que a partir de este momento será la conexión

ODBC ya creada con la página PHP. Para ello se utiliza la función odbc_connect(). Ésta necesita de tres

parámetros: el nombre de la conexión ODBC y el nombre de usuario y clave si la base de datos lo necesita.

Siguiendo con el ejemplo, la función con sus argumentos sería:

$connect = odbc_connect(‚agenda‛,‛‛,‛‛);

La conexión será identificada a través de la variable connection. Esta conexión se incluirá en todas las páginas

PHP que necesiten acceder a la base de datos. Observe que al final de la línea se añade un punto y coma. La

siguiente línea define la instrucción SQL (Structure Query Language) que incorpora la nueva información en la

base de datos. Suponiendo que cada campo del formulario tenga un nombre que lo identifique, bastará con

añadir la siguiente variable que almacenará la instrucción 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 añadir a la base. Esta línea por

si sola es una variable del tipo cadena (string). Para poder obtener el valor y ejecutar la instrucción se usa

odbc_exec(), que necesita dos argumentos: la sentencia SQL a ejecutar y el nombre de la conexión sobre la

que se va a ejecutar.

$result = odbc_exec $connect,$query);

A partir de esta línea la información que se había asociado a cada uno de los campos (nombre, apellido, etc.) se

ejecutará y la información se almacenará en la base, si no ha habido ningún problema al ejecutar alguna

función. 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é pasaría si no se consigue realizar la conexión con la base de datos porque se ha escrito

incorrectamente el nombre de la conexión ODBC o se nos ha olvidado crearla. En la primera imagen puede ver

el resultado. Observe que al no poder realizarse la conexión con la base de datos ninguna de las funciones de

ODBC podrá funcionar correctamente pues todas necesitan una conexión establecida. Es interesante realizar

una comprobación en caso de que exista un problema para conectar con la base de datos.

if (!$connect) { print (‚Error conexión: ‚.$connect); }

Hasta el momento no ha sido necesario mostrar ninguna información de la base de datos, pues la función de

insertar información en la base no devuelve ningún resultado si se ha realizado con éxito. La segunda página

que se va a crear es la de búsqueda. Mediante ésta se va a poder buscar una de las entradas de la agenda

utilizado como criterios de búsqueda tres de los campos: nombre, provincia y teléfono. De esta forma se puede

introducir el nombre y/o apellidos de una persona y si esta en la agenda, la aplicación devolverá la ficha

completa de esa persona. Si no existe esa persona o no se ha encontrado ninguna entrada bajo ese patrón de

búsqueda también le será notificado al usuario.

Page 126: Diseño y elaboracion de paginas web

Ing. Reina Liliana López Reyes e Ing. Feliciano Nevárez Raizola 123

Tras crear la conexión con la base de datos, hay que construir la consulta a la base de datos a partir de la

información introducida en formulario. Como cada campo del formulario estará identificado por una variable

tan sólo queda utilizar esas variables y hacer todas las combinaciones posibles. Si el usuario realiza una

búsqueda 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 sólo guardará la consulta en la variable $query. Para

ejecutar realmente la consulta se utiliza de nuevo la función odbc_exec():

$result = odbc_exec($query,$result);

Observe los dos parámetros: 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 conexión a la base. En este caso es necesario

mostrar la información que contienen cada uno de los campos del registro que cumplen con el criterio de la

búsqueda. Aquí debemos usar una nueva función: odbc_fetch_row(). Por medio de esta función 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 condición 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 condición

(cuando no existan más filas seleccionadas).

Quizá, esté pensando que otra solución es saber el número de registros resultantes y realizar un bucle for por

las filas hasta llegar a la última. Para ello existe una función que de-vuelve el número de filas afectadas por la

consulta a la base de datos: odbc_num_rows(). Pe-ro hay que señalar que es una función que no siempre se

ejecuta con éxito con algunos controladores ODBC. Si después 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 número de filas. Por lo

que esta será una función 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 información al usuario. Para esto se usa odbc_result(). Esta función necesita

dos parámetros: el identificador de la conexión a la base y el nombre o posición 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 número que ocupa en la consulta realizada. Si

se utiliza el número, el primer campo será el 1 y así sucesivamente. En la consulta realizada el valor 1

correspondería al campo “id”, el 2 al “nombre” y así sucesivamente. Ahora, utilizando la función anterior para

Page 127: Diseño y elaboracion de paginas web

Ing. Reina Liliana López Reyes e Ing. Feliciano Nevárez Raizola 124

recorrer todas las filas y ésta para mostrar el contenido de los campos se puede visualizar el resultado de la

búsqueda:

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>> Dirección: </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>> Teléfono: </b>‛ .odbc_result($result,telefono).‛<br>‛); print(‚<b>> Fecha nacimiento: </b>‛ .odbc_result($result,8).‛<p>‛);}

Fíjese que algunos de los campos están identificados por nombre y otros por posición. De esta forma se

pueden obtener todos los datos que han resultado de la búsqueda. En caso de haber varios registros afectados

aparecerán todos.

Si por el contrario no se ha encontrado ningún registro que cumpla ese patrón, 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 páginas para buscar y añadir nuevas entradas en la agenda, puede incorporar

una tercera que permita borrar entradas no utilizadas o introducidas incorrectamente. La forma de realizar

esta página 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.

Fíjese 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 sólo se

eliminarán 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 más tarde ejecutarla. En este caso no se devolverá ningún valor ni se mostrará ningún mensaje ya

Page 128: Diseño y elaboracion de paginas web

Ing. Reina Liliana López Reyes e Ing. Feliciano Nevárez Raizola 125

que las consultas de eliminación no muestran ningún resultado (si todo ha ido bien). Es interesante poder

mostrar al usuario un mensaje, creado por nosotros, si la operación 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 ejecución de la consulta a la

base de datos, cuando la consulta se realiza de forma correcta esta variable guarda un valor numérico que

corresponde a un identificador de uso interno. Mientras que si la consulta no se ha podio realizar por algún

motivo este valor no existirá.

Este mismo sistema se puede utilizar a la hora de realizar la conexión con la base de datos. Ya que al ejecutar

esta función se devuelve como resultado un valor cuando la conexión se ha completado y ningún valor si ha

habido problemas con la conexión.

if ($connect==‛‛) { print(‚Problemas en conexión<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 conexión 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

más información al usuario a través de nuestras comprobaciones.

Al tratarse de una buena forma de controlar la ejecución de las páginas PHP, es interesante incluso crear una

función que gestione los casos de error y esté disponible en cualquier momento.

<? function errores($funcion,$accion) { switch ($accion) { case (0): $lugarError = ‚conexión‛; 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 :[email protected]'>Admin</a>.</p>‛);} else {print (‚La ‚.$accion.‛ es OK‛);}} ?>

La función creada para informar al usuario de los posibles errores necesita dos parámetros: el primero

($funcion) lee el valor que se ha obtenido como resultado de ejecutar la función contra la base y el segundo

($accion) especifica el tipo de función que se ha pasado a la función, para poder personalizar con más 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 aplicación.

Page 129: Diseño y elaboracion de paginas web

Ing. Reina Liliana López Reyes e Ing. Feliciano Nevárez Raizola 126

Otras funciones

Existen más funciones que permiten realizar otros cometidos con la base de datos. No está de más conocerlas

para saber qué pueden ofrecer en determinados momentos.

Para mejorar el rendimiento del servidor con las páginas 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 están abiertas varias conexiones, puede usar odbc_close_all()

que tiene el mismo efecto pero sobre todas las conexiones abiertas.

Cuando se trabaja con información contenida en bases de datos puede necesitar co-nocer todo lo relacionado

con la misma y más concretamente con el campo en el que se encuentra la información sobre la que se está

realizando la consulta. En algunas ocasiones precisará conocer el nombre del campo que contienen esa

información, en ese caso la función 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 información

extraída 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 numérico muy

probablemente que se tenga algún 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 número de campo que forman una fila de un conjunto de información

seleccionada o extraída de la base de datos. Piense, por ejemplo, que se desea presentar la información 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 mostrarán 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 conexión ODBC para acceder a cualquier fuente de datos

es necesario crear un enlace ODBC. La mayoría de los sistemas Windows incluyen un icono en el Panel de

control denominado “Fuentes de datos ODBC (32 bits)” para realizar este tipo de configuración. Junto a él

Microsoft incluye una serie de controladores para acceder a los sistemas más importantes de información y a

otros más genéricos como ficheros de texto. Además muchos otros fabricantes proporcionan controladores

necesarios para realizar una conexión ODBC a sus base de datos. Este es el caso de Oracle, mySQL,

PostgresSQL, etc.

Para crear la conexión 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 pestaña “DSN de sistema” y pulsar el botón “Agregar”.

3. A continuación seleccionar el controlador necesario: “Microsoft Access Driver (*.mdb)” y pulse el botón

“Finalizar” (fíjese el lector en la variedad de controladores disponibles para realizar un enlace ODBC).

Page 130: Diseño y elaboracion de paginas web

Ing. Reina Liliana López Reyes e Ing. Feliciano Nevárez Raizola 127

4. Ahora tan sólo queda introducir la información 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 conexión desde la aplicación que se esté

desarrollando; la descripción nos ayudará a diferenciar las diferentes conexiones ODBC cuando sea muchas; y

el botón seleccionar nos permite elegir la base de datos que se va a utilizar.

Una vez finalizado el proceso, la conexión ODBC ya estará disponible para cualquier aplicación que necesite

acceder a la base de datos elegida.

Ejercicios - Bases de datos 1

El objetivo final es obtener una aplicación web capaz de gestionar una agenda.

Estos ejercicios van encadenados. Cada ejercicio se puede hacer a partir del ejercicio anterior, añadiendo las páginas necesarias.

En estos ejercicios no se hace ninguna comprobación sobre los datos introducidos por el usuario, por lo que la aplicación 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 página principal incluye un menú con un enlace a la página de borrado y creación de la tabla.

El borrado y creación de tabla se hace en dos páginas, que incluyen un menú con un enlace a la página inicial.

o La primera página contiene un formulario que pide confirmación. Si se contesta "No", se vuelve a la página inicial. Si se contesta "Sí", se llega a la segunda página.

o La segunda página borra y crea la base de datos, que contiene una tabla con dos campos.

Comentarios

En una aplicación real, el borrado y creación de la base de datos estarían 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. Lógicamente, la primera vez que se realice el borrado y creación de la base de datos se obtendrá un mensaje de error en el borrado puesto que la base de datos no existe todavía, pero las veces siguientes no.

Si el usuario intenta acceder directamente a la página que crea la tabla (escribiendo la dirección en el navegador), se le redireccionará directamente a la página inicial.

Esta pueden ser las consultas de creación de tabla para este proyecto:

// Tamaño de los campos en la tabla

$tamNombre = 40; // Tamaño del campo Nombre

$tamApellidos = 60; // Tamaño del campo Apellidos

Page 131: Diseño y elaboracion de paginas web

Ing. Reina Liliana López Reyes e Ing. Feliciano Nevárez Raizola 128

// Consulta de creación 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 creación de tabla en SQLite

$consulta = "CREATE TABLE $dbTabla (

id INTEGER PRIMARY KEY,

nombre VARCHAR($tamNombre),

apellidos VARCHAR($tamApellidos)

)";

Bases de datos 2 - Añadir registros en la tabla

Amplie el ejercicio anterior de manera que permita incluir registros en la base de datos.

El menú inicial incluye una opción de menú con un enlace a la página de creación de un nuevo registro.

La creación del nuevo registro se hace en dos páginas, que incluyen un menú con un enlace a la página inicial.

o La primera página contiene un formulario que pide los datos a registrar. o La segunda página inserta los datos en la base de datos.

Comentarios

Si el usuario intenta acceder directamente a la página que inserta el registro (escribiendo la dirección en el navegador), se le redireccionará directamente a la página inicial.

El dato que introduce el usuario debe recogerse con la función recogeParaConsulta() comentada en los apuntes.

Esta pueden ser las consultas de creación de tabla para este proyecto:

// Añadir un registro

Page 132: Diseño y elaboracion de paginas web

Ing. Reina Liliana López Reyes e Ing. Feliciano Nevárez Raizola 129

$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 opción de menú con un enlace a la página que lista los registros existentes.

El listado se hace en una página, que incluye un menú con un enlace a la página 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 opción de menú con un enlace a la página que permite borrar los registros existentes.

El borrado se hace en dos páginas, que incluyen un menú con un enlace a la página inicial. o La primera página contiene un formulario que muestra los registros existentes y que

permtie marcar los datos a borrar. o La segunda página borra los registros en la base de datos.

Comentarios

Para seleccionar los registros a borrar, se puede utilizar una casilla de verificación cuyo nombre contenga el id del registro. Lo mejor es que los nombres formen una matriz.

Page 133: Diseño y elaboracion de paginas web

Ing. Reina Liliana López Reyes e Ing. Feliciano Nevárez Raizola 130

// Imprime casilla de verificación

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 opción de menú con un enlace a la página que permite buscar en los registros existentes.

El borrado se hace en dos páginas, que incluyen un menú con un enlace a la página inicial. o La primera página contiene un formulario que pide los datos a buscar. o La segunda página muestra los registros encontrados

Comentarios

La primera página es un formulario como el de añadir registros. Para buscar los registros, se puede utilizar la siguiente consulta.

// Imprime casilla de verificación

Page 134: Diseño y elaboracion de paginas web

Ing. Reina Liliana López Reyes e Ing. Feliciano Nevárez Raizola 131

$nombre = recogeParaConsulta($db, 'nombre');

$nombre = quitaComillasExteriores($nombre);

$apellidos = recogeParaConsulta($db, 'apellidos');

$apellidos = quitaComillasExteriores($apellidos);

$consulta = "SELECT * FROM $dbTabla

WHERE nombre LIKE '%$nombre%'

AND apellidos LIKE '%$apellidos%'";

La función RecogeParaConsulta inserta comillas al principio y al final de la cadena y esas comillas darían problemas en la consulta (para que se puedan hacer búsquedas parciales se ha añadido el comodín % al principio y final de la cadena de búsqueda y se han tenido que escribir las comillas). Así que hay que utilizar una función 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 opción de menú con un enlace a la página que permite modificar los registros existentes.

La modificación se hace en tres páginas, que incluyen un menú con un enlace a la página inicial.

o La primera página contiene un formulario que permite seleccionar el registro a modificar.

o La segunda página muestra el registro seleccionado y permite modificarlo. o La tercera página guarda los datos modificados.

Comentarios

La primera página es un formulario como el de borrar, salvo que en vez de una casilla de verificación, se puede utilizar un botón radio cuyo valor contenga el id del registro.

// Imprime botón radio

print " <td align=\"center\"><input type=\"radio\" "

."name=\"id\" value=\"$valor[id]\" /></td>"

En la segunda página, para obtener el registro seleccionado, la consulta puede ser la siguiente (como sólo debe devolver un registro no tiene hacer una bucle foreach y es suficiente con utilizar el método: $result->fetch().

Page 135: Diseño y elaboracion de paginas web

Ing. Reina Liliana López Reyes e Ing. Feliciano Nevárez Raizola 132

// Recoge el registro seleccionado

$id = recogeParaConsulta($db, 'id');

$consulta = "SELECT * FROM $dbTabla WHERE id=$id";

$result = $db->query($consulta);

$valor = $result->fetch();

La segunda página es un formulario como el de añadir, salvo que los campos contienen el valor del registro seleccionado en la primera página:

// Muestra valor

print " <td><input type=\"text\" name=\"nombre\" size=\"$tamNombre\" "

."maxlength=\"$tamNombre\" value=\"$valor[nombre]\" id=\"cursor\" /></td>"

En la segunda página hay que incluir en el formulario un control oculto que contenga el id del registro para pasarselo a la tercera página

// 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 página, 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";

Page 136: Diseño y elaboracion de paginas web

Ing. Reina Liliana López Reyes e Ing. Feliciano Nevárez Raizola 133