diseño y elaboracion de paginas web
Post on 02-Aug-2015
652 Views
Preview:
TRANSCRIPT
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
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
Bases de datos 5 - Buscar registros en la tabla .............................................................................. 130
Comentarios .......................................................................................................................................... 130
Bases de datos 6 - Modificar registros en la tabla .......................................................................... 131
Comentarios .......................................................................................................................................... 131
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.
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
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
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.
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,
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.
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
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/
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.
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
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:
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.
Ing. Reina Liliana López Reyes e Ing. Feliciano Nevárez Raizola 13
Diseña la Estructura de las páginas.
EJEMPLO:
Ing. Reina Liliana López Reyes e Ing. Feliciano Nevárez Raizola 14
Genera Bocetos de Diseño.
Ejemplo:
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>
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 ">
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>
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:
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 //-->.
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//--> ¡Bienvenidos, esta es mi 1ª pá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:
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
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).
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ágina. </p> <p> Aquí encontraréis cursos de formación 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ágina. </div> <div> Aquí encontraréis cursos de formación 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ágina. </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.
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ón.
- 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>
Ing. Reina Liliana López Reyes e Ing. Feliciano Nevárez Raizola 25
tengo el placer de comunicaros que hay una nueva sección. </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á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.
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).
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>
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>
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).
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>.
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 <
Se representa con >
Existen otra serie de caracteres que no se visualizan correctamente en algunos navegadores, como es el caso
de la ñ y las letras acentuadas, por lo que al igual que ocurre con los caracteres especiales < y >, para
insertarlos como texto 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
< < € €
> > ç ç
á á Ç Ç
Á Á ü ü
é é Ü Ü
É É & &
í í ¿ ¿
Í Í ¡ ¡
ó ó " "
Ó Ó · ·
ú ú º º
Ú Ú ª ª
ñ ñ ¬ ¬
Ñ Ñ © ©
Ing. Reina Liliana López Reyes e Ing. Feliciano Nevárez Raizola 32
™ ™ ® ®
Siempre que se inserta texto en HTML hay que tener en cuenta que si se escriben varios espacios en blanco
seguidos solamente se mostrará uno en el navegador. Para conseguir que se muestren varios espacios en
blanco seguidos puede sustituirse cada uno de ellos por .
Por ejemplo, para insertar el texto:
¡Bienvenidos, esta es mi 1ª página!
Habría que escribir:
¡Bienvenidos, esta es mi 1ª pá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
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>
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
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>
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>
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
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ÑO</th> <th>GRANDE</th> </tr> <tr align="center" valign="middle"> <td>Duración crecimiento</td> <td>10 meses</td> <td>18 a 24 meses</td> <td>16 años</td> </tr> <tr align="center" valign="middle"> <td>Tiempo de gestación</td> <td colspan="2">58 a 63 días</td> <td>9 meses</td> </tr> <tr align="center" valign="middle"> <td>Duración de vida del pelo/cabello</td> <td colspan="2">1 año</td> <td>2 a 7 años</td> </tr> </table>
Vamos a explicar un poco 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.
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Ñ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
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
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   espacio
33 21 ! !
signo de cierre de exclamación /
admiración
34 22 " " " comillas dobles
35 23 # # signo de número
36 24 $ $ signo de dólar
37 25 % % signo de porcentaje
38 26 & & & signo "&" / ampersand
39 27 ' ' comilla / apóstrofe
40 28 ( ( paréntesis izquierdo
41 29 ) ) paréntesis derecho
42 2A * * asterisco
43 2B + + signo de más / adición
44 2C , , coma
45 2D - -
signo de menos / sustracción / guión /
raya
46 2E . . punto
47 2F / / barra oblicua - barra de división
48 30 0 0 cero
49 31 1 1 uno
50 32 2 2 dos
51 33 3 3 tres
52 34 4 4 cuatro
53 35 5 5 cinco
54 36 6 6 seis
55 37 7 7 siete
56 38 8 8 ocho
57 39 9 9 nueve
58 3A : : dos puntos
59 3B ; ; punto y coma
60 3C < < < signo de menor que
61 3D = = signo de igual
62 3E > > > signo de mayor que
63 3F ? ? signo de interrogación - cierre
64 40 @ @
símbolo arroba
65 41 A A 66 42 B B 67 43 C C 68 44 D D 69 45 E E 70 46 F F 71 47 G G 72 48 H H
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 I 74 4A J J 75 4B K K 76 4C L L 77 4D M M 78 4E N N 79 4F O O 80 50 P P
81 51 Q Q
82 52 R R
83 53 S S
84 54 T T
85 55 U U
86 56 V V
87 57 W W
88 58 X X
89 59 Y Y
90 5A Z Z
91 5B [ [ corchete izquierdo
92 5C \ \ barra inversa
93 5D ] ] corchete derecho
94 5E ^ ^
signo de intercalación - acento
circunflejo
95 5F _ _ signo de subrayado
96 60 ` `
acento grave
97 61 a a 98 62 b b 99 63 c c 100 64 d d 101 65 e e 102 66 f f 103 67 g g 104 68 h h 105 69 i i 106 6A j j 107 6B k k 108 6C l l 109 6D m m 110 6E n n 111 6F o o 112 70 p p
113 71 q q
114 72 r r
115 73 s s
116 74 t t
117 75 u u
118 76 v v
119 77 w w
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 x
121 79 y y
122 7A z z
123 7B { { llave de apertura - izquierda
124 7C | | barra vertical
125 7D } } llave de cierre - derecho
126 7E ~ ~ 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   espacio sin separación
161 A1 ¡ ¡ ¡
signo de apertura de exclamación /
admiración
162 A2 ¢ ¢ ¢ signo de centavo
163 A3 £ £ £ signo de Libra Esterlina
164 A4 ¤ ¤ ¤ signo de divisa general
165 A5 ¥ ¥ ¥ signo de yen
166 A6 ¦ ¦ ¦ barra vertical partida
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 § § § signo de sección
168 A8 ¨ ¨ ¨ diéresis - umlaut
169 A9 © © © signo de derechos de autor - copyright
170 AA ª ª ª
género feminino - indicador ordinal
feminino
171 AB « « « comillas anguladas de apertura
172 AC ¬ ¬ ¬ Signo de no - símbolo lógico
173 AD ­ ­ guión débil
174 AE ® ® ® signo de marca registrada
175 AF ¯ ¯ ¯ macrón - raya alta
176 B0 ° ° ° signo de grado
177 B1 ± ± ± signo de más o menos
178 B2 ² ² ² superíndice dos - cuadrado
179 B3 ³ ³ ³ superíndice tres - cúbico
180 B4 ´ ´ ´ acento agudo - agudo espaciado
181 B5 µ µ µ signo de micro
182 B6 ¶ ¶ ¶ signo de fin de párrafo
183 B7 · · · punto medio - coma Georgiana
184 B8 ¸ ¸ ¸ cedilla
185 B9 ¹ ¹ ¹ superíndice uno
186 BA º º º
género masculino - indicador ordinal
masculino
187 BB » » » comillas anguladas de cierre
188 BC ¼ ¼ ¼ fracción un cuarto
189 BD ½ ½ ½ fracción medio - mitad
190 BE ¾ ¾ ¾ fracción tres cuartos
191 BF ¿ ¿ ¿ signo de interrogación - apertura
192 C0 À À À A mayúscula con acento grave
193 C1 Á Á Á A mayúscula con acento agudo
194 C2 Â Â Â A mayúscula con acento circunflejo
195 C3 Ã Ã Ã A mayúscula con tilde
196 C4 Ä Ä Ä A mayúscula con diéresis
197 C5 Å Å Å A mayúscula con anillo
198 C6 Æ Æ Æ diptongo AE mayúscula (ligadura)
199 C7 Ç Ç Ç C cedilla mayúscula
200 C8 È È È E mayúscula con acento grave
201 C9 É É É E mayúscula con acento agudo
202 CA Ê Ê Ê E mayúscula con acento circunflejo
203 CB Ë Ë Ë E mayúscula con diéresis
204 CC Ì Ì Ì I mayúscula con acento grave
205 CD Í Í Í I mayúscula con acento agudo
206 CE Î Î Î I mayúscula con acento circunflejo
207 CF Ï Ï Ï I mayúscula con diéresis
208 D0 Ð Ð Ð ETH islandesa mayúscula
209 D1 Ñ Ñ Ñ
N mayúscula con tilde - eñe
mayúscula
210 D2 Ò Ò Ò O mayúscula con acento grave
211 D3 Ó Ó Ó O mayúscula con acento agudo
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 Ô Ô Ô O mayúscula con acento circunflejo
213 D5 Õ Õ Õ O mayúscula con tilde
214 D6 Ö Ö Ö O mayúscula con diéresis
215 D7 × × × signo de multiplicación
216 D8 Ø Ø Ø O mayúscula with slash
217 D9 Ù Ù Ù U mayúscula con acento grave
218 DA Ú Ú Ú U mayúscula con acento agudo
219 DB Û Û Û U mayúscula con acento circunflejo
220 DC Ü Ü Ü U mayúscula con diéresis
221 DD Ý Ý Ý Y mayúscula con acento agudo
222 DE Þ Þ Þ THORN islandesa mayúscula
223 DF ß ß ß s minúscula (alemán) - Beta minúscula
224 E0 à à à a minúscula con acento grave
225 E1 á á á a minúscula con acento agudo
226 E2 â â â a minúscula con acento circunflejo
227 E3 ã ã ã a minúscula con tilde
228 E4 ä ä ä a minúscula con diéresis
229 E5 å å å a minúscula con anillo
230 E6 æ æ æ diptongo ae minúscula (ligadura)
231 E7 ç ç ç c cedilla minúscula
232 E8 è è è e minúscula con acento grave
233 E9 é é é e minúscula con acento agudo
234 EA ê ê ê e minúscula con acento circunflejo
235 EB ë ë ë e minúscula con diéresis
236 EC ì ì ì i minúscula con acento grave
237 ED í í í i minúscula con acento agudo
238 EE î î î i minúscula con acento circunflejo
239 EF ï ï ï i minúscula con diéresis
240 F0 ð ð ð eth islandesa minúscula
241 F1 ñ ñ ñ eñe minúscula - n minúscula con tilde
242 F2 ò ò ò o minúscula con acento grave
243 F3 ó ó ó o minúscula con acento agudo
244 F4 ô ô ô o minúscula con acento circunflejo
245 F5 õ õ õ o minúscula con tilde
246 F6 ö ö ö o minúscula con diéresis
247 F7 ÷ ÷ ÷ signo de división
248 F8 ø ø ø o barrada minúscula
249 F9 ù ù ù u minúscula con acento grave
250 FA ú ú ú u minúscula con acento agudo
251 FB û û û u minúscula con acento circunflejo
252 FC ü ü ü u minúscula con diéresis
253 FD ý ý ý y minúscula con acento agudo
254 FE þ þ þ thorn islandesa minúscula
255 FF ÿ ÿ ÿ y minúscula con diéresis
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".
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).
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
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.
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:plantel254@conalepnl.edu.mx"> 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:plantel254@conalepnl.edu.mx?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.
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í 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>
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" >
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:
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:
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:
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.
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:formularios@conalep.edu.mx" 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.
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.
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:
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.
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>
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
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.
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:
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.
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.
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.
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
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:
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.
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
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.
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.
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.
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.
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.
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.
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.
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ágina</title> <STYLE type="text/css"> <!-- H1 {text-decoration: underline; text-align:center} P {font-Family:arial,verdana; color: white; background-color: black} BODY {color:black;background-color: #cccccc; text-indent:1cm} // --> </STYLE> </head> <body> <h1>Página con estilos</h1> Bienvenidos... <p>Siento ser tan hortera, pero esto es un ejemplo sin más importancia</p> </body> </html>
Como se puede apreciar en el 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
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
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ágina que lee estilos</title> </head> <body> <h1>Página que lee estilos</h1> Esta página tiene en la cabecera la etiqueta necesaria para enlazar con la hoja de estilos. Es muy fácil. <br> <br> <table width="300" cellspacing="2" cellpadding="2" border="0"> <tr> <td>Esto está dentro de un TD, luego tiene estilo propio, declarado en el fichero externo</td> </tr> <tr> <td>La segunda fila del TD</td> </tr> </table> </body> </html>
Reglas de importancia en los estilos
Los estilos se heredan de una etiqueta a otra, como se indicó anteriormente. Por ejemplo, si tenemos
declarado en el <BODY> unos estilos, por lo general, estas declaraciones 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
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.
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
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
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%);
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;
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;
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
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.
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
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.
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:
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ón de clases</title> <STYLE type="text/css">
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árrafo con estilo de letras verdes</p> <p class=fondonegroletrasblancas> Esto es un párrafo con estilo de fondo negro y las letras blancas. Es todo!</p> </body> </html>
Estilo en los enlaces
Una 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.
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ó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>.
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
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.
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:
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.
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 -->
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>
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.
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.
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>
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
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.
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"));
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.
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>");
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.
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
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'
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.
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
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
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.
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.
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.
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.).
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.
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.
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.
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
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
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 :user@dominio.com'>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.
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).
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
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
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.
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
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().
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";
Ing. Reina Liliana López Reyes e Ing. Feliciano Nevárez Raizola 133
top related