Puedes incluir imágenes en otros formatos, que
podrán ser visualizadas en algunos navegadores. Este es el
caso de las imágenes BMP y PNG.
Puedes cambiar el formato de las imágenes
mediante la utilización de algún programa de
tratamiento de imágenes, como pueden ser Fireworks,
Photoshop, Corel Draw, etc. Por ejemplo el Fireworks de
Macromedia tiene una opción, exportar a tipo gif que
reduce considerablemente la ocupación de la imagen sin
perder en calidad (siempre que la imagen se adecue al
formato).
Dependiendo del programa utilizado existirá una
mayor o menor cantidad de opciones a la hora de modificar las
imágenes. Para realizar modificaciones sencillas, como la
de recortar las imágenes y cambiar los colores, puedes
utilizar incluso el programa Paint de Windows.
2. 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:
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 imagenes. En lugar de la
imagen se mostrará lo siguiente:
Si en lugar del código anterior hubiéramos
insertado el siguiente código:
La imagen habría mostrado
correctamente:
El texto alternativo se muestra también al situar
el puntero sobre la imagen. Si situas 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.
3. 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:
Habría que escribir:
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:
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".
4. 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:
Habría que escribir:
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.
5. 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:
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:
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 imágen
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 izaquierda sino
colocarla en un bloque aparte).
Lección VI
Tablas
1. Tabla
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 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.
2. Formato de la
tabla
Es posible modificar los siguientes
atributos de una tabla:
Por ejemplo, para modificar la tabla de la
página anterior para que quedase como la
siguiente:
Habría que escribir:
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 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).
3. Formato de las
celdas
Es posible modificar los siguientes
atributos de una celda:
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:
Obtendríamos la siguiente
tabla:
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
Obtendríamos la siguiente
tabla:
Obtendríamos la siguiente tabla con
título:
Titulo de la tabla
4. Combinar
celdas
Para las etiquetas
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:
Habría que escribir el siguiente
código:
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í.
El uso de los atributos colspan y rowspan
puede resultar algo complicado al principio. Es cuestión
de práctica.
Lección VII
Marcos
1. Conjunto de marcos
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, sobretodo al principio, por lo que vemos solamente
algunos conteptos 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).
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:
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
tercerá 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:
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.
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 ejemplo, para crear el conjunto de
marcos de la página que aparece si pulsas aquí,
tendríamos que escribir:
Por ejemplo, si escribiéramos el siguiente
código:
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.
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:
2. 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 tuvieramos
un marco con el nombre marcoderecho, podríamos insertar el
enlace:
Podemos añadir todos estos nuevos destinos a
cualquier elemento de la página que contenga algún
enlace, ya sea texto, una imágen, un mapa de imagen, un
elemento Flash, etc.
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.
APLICACIÓN DEL
ALUMNO
Lección VIII
Formularios
1. Formulario
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.
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.
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 metodo 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:
A continuación veamos los distintos elementos que
se pueden incluir en un formulario.
2. Áreas de texto
Las áreas de texto permiten a los
usuarios insertar varias líneas de texto. Por ello, suelen
utilizarse para que incluyan comentarios.
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.
Por ejemplo, para insertar el área de
texto:
Habría que escribir:
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:
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:
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:
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. Sólamente uno de estos botones
podrá estar activado, el que esté activado cuando
se envia el formulario, su valor será el que tendrá
la variable.
Por ejemplo, para insertar los botones de
opción:
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
datos 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.
3. Campos de selección
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
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
y .
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
y .
La aparición del atributo selected indica que el
elemento aparecerá seleccionado. Este atributo no toma
valores.
Por ejemplo, para insertar el menú:
Lección IX
Multimedia
1. Sonido de fondo
Añadir una música de fondo a una
página tiene pros y contras, si el sonido es apropiado al
contenido de la página, puede hacerla más atractiva
en contrapartida la descarga del archivo de sonido supone una
carga que puede ralentizar la visualización de la
página y además muchos usuarios suelen estar
escuchando otro tipo de música cuando navega en Internet,
por lo que el escuchar también sonido en cada
página que visita puede resultar algo molesto.
Los formatos de sonido más habituales en Internet
son el WAV, el MP3 y en algunas ocasiones el MIDI, aunque existen
otros formatos diferentes que también pueden utilizarse.
Lo ideal es incluir algún archivo de audio que no ocupe
mucho espacio, y que no por ello sea de mala calidad.
El navegador Internet Explorer puede reconocer la
etiqueta
que se utiliza para incluir sonido de fondo. Esta nueva
etiqueta no necesita etiqueta de cierre.
A través del atributo src hay que especificar la
ruta y el nombre del archivo de audio.
Con el atributo loop indicamos el número de veces
que se tienen que reproducir el sonido. Si se desea que el
archivo de audio se reproduzca continuamente en un bucle,
habrá que asignarle el valor infinite o -1.
Por ejemplo, podríamos insertar un sonido de
fondo escribiendo el siguiente código:
2. Vídeo y audio
En ocasiones puede interesar incluir algún
vídeo en una página web, pero hay que tener en
cuenta que los vídeos suelen ocupar mucho espacio en
disco, y por lo tanto, precisan de mucho tiempo para
descargarse.
Los formatos de vídeo que suelen utilizarse en
Internet son el AVI, el MPEG y el MOV.
A través del atributo src hay que especificar la
ruta y el nombre del archivo de vídeo.
Los videos insertados a través de esta etiqueta
se reproducen automáticamente al cargarse la
página, y se reproducen solamente una vez. Esto puede
cambiarse a través de los atributos autostart y
loop.
El atributo autostart indica si el archivo se
reproducirá automáticamente al cargarse la
página, y puede tomar los valores true o false.
El atributo loop indica si el archivo se
reproducirá continuamente en un bucle, y también
puede tomar los valores true o false.
Los atributos width (anchura) y height (altura) sirven
para especificar el tamaño de la consola de control de
vídeo. Estos atributos pueden tomar como valor un
número, que indica el tamaño en píxeles. Si
no se especifican estos atributos, la consola de control de
vídeo se mostrará con el tamaño más
adecuado al tamaño del vídeo.
A la derecha tienes un ejemplo de un archivo de video,
para el que se muestran los controles de video. Puedes
reproducirlo pulsando sobre los controles.
Para insertar el vídeo anterior, se podría
escribir:
3. Películas Flash
Las películas Flash son animaciones con la
extensión SWF. Suelen incluirse en las páginas
iniciales de los sitios web, y se utilizan a modo de
presentación hacia los usuarios. También pueden
utilizarse como botones de las barras de
navegación.
Estas películas pueden crearse mediante el
programa Flash de Macromedia, y necesitan que el usuario tenga
instalado el plug-in para poder ser visualizadas.
A través del atributo pluginspage se especifica
la página desde la que se podrá descargar el
plug-in necesario para reproducir la animación Flash, para
que si algún usuario no lo tiene aún instalado en
su ordenador pueda descargarlo.
A través del atributo type se especifica el tipo
de fichero, para que el navegador pueda saber qué tipo de
programa necesita ejecutar para reproducir la
animación.
Las animaciones Flash se reproducen de forma
automática al cargarse la página, y su
reproducción es continua.
APLICACIÓN DEL
ALUMNO
Lección X
Capas
1. Capa
Las capas no son más que unos recuadros, que
pueden situarse en cualquier parte de la página, en los
que podemos insertar contenido HTML. Dichas capas pueden
ocultarse y solaparse entre sí, lo que proporciona grandes
posibilidades de diseño.
Podemos insertar una capa a través de las
etiquetas
que como ya vimos, sirven para agrupar bloques
de texto.
A través del atributo id se le da un nombre a la
capa, y a través del atributo style se establecen el resto
de propiedades de la capa.
A través de las propiedades left (izquierda) y
top (superior) se establece la posición de la capa
respecto a los márgenes izquierdo y superior de la
página. Pueden tomar un número como valor,
acompañado de px cuando haga referencia a píxeles,
y acompañado de % cuando haga referencia a un
porcentaje.
Para que la capa aparezca en la posición
establecida, es necesario incluir también la propiedad
position con el valor absolute. Si no se estableciera este valor,
la capa se mostraría pegada al margen izquierdo, en la
posición en la que hubiera sido insertada dentro del
código.
A través de las propiedades width (anchura) y
height (altura) se establece el tamaño de la capa. Pueden
tomar un número como valor, acompañado de px cuando
haga referencia a píxeles, y acompañado de % cuando
haga referencia a un porcentaje.
A través de la propiedad z-index puede
establecerse el índice de la capa dentro de la
página. Una capa podrá ser solapada por aquellas
capas cuyo índice sea mayor. Siempre es un valor
numérico.
A través de la propiedad visibility puede
establecerse la visibilidad de la capa. Puede tomar los valores
inherit (se muestra la capa mientras la capa a la que pertenece
también se esté mostrando), visible (muestra la
capa, aunque la capa a la que pertenece no se esté viendo)
y hidden (la capa está oculta).
A través de las propiedades
layer-background-image y background-image se puede establecer una
imagen de fondo para la capa. La ruta y el nombre de la imagen
han de aparecer entre paréntesis, después de la
palabra url.
A través de las propiedades
layer-background-color y background-color se puede establecer un
color de fondo para la capa. Ha de ser un número
hexadecimal.
A través de la propiedad overflow puede
establecerse si se mostrará o no el contenido de la capa
cuando no pueda ser visualizado en su totalidad, por ser la capa
demasiado pequeña. Puede tomar los valores visible (se
muestra todo el contenido de la capa, aunque esto implique hacer
que la capa sea más grande), hidden (no es posible
visualizar el contenido de la capa que no quepa en ella), scroll
(se muestra la barra de desplazamiento, aunque el contenido de la
capa pueda ser visualizado totalmente) y auto (se muestra la
barra de desplazamiento cuando sea necesario).
A través de la propiedad clip puede establecerse
el área de la capa que podrá ser visualizado. Lo
que hace es recortar la capa, haciendo que partes de ella no sean
visibles. Ha de especificarse la distancia de los márgenes
de la capa entre paréntesis, después de la palabra
url.
El primer valor ha de ser la distancia (se asume que
está en píxeles) del margen superior, hasta la que
no se visualizará el contenido de la capa.
El segundo valor ha de ser la distancia del margen
izquierdo, hasta la que no se visualizará el contenido de
la capa.
El tercer valor ha de ser la distancia del margen
superior, hasta la que se visualizará el contenido de la
capa.
El cuarto valor ha de ser la distancia del margen
izquierdo, hasta la que se visualizará el contenido de la
capa.
También es posible incluir auto como valor de
alguna de estas distancias, lo que indica que la distancia se
corresponderá con los bordes de la capa.
Todas estas propiedades se especifican a través
del atributo style, y deben aparecer entre comillas dobles, con
un punto y coma detrás de cada una. Para asignar los
valores a las propiedades no se utiliza el símbolo =
(igual), sino que se utiliza el símbolo : (dos
puntos).
Por ejemplo, podríamos insertar una capa
escribiendo el siguiente código:
- 2. Marcos Flotantes
Dos ejemplos:
El tag IFRAME en otros browsers distintos a
IE
Bien, el tag IFRAME es genial y todo lo que quiera, pero
recuerde, es solo visible en Internet Explorer 4+.Mientras que
esto es desafortunado, es afortunado sin embargo que este tag
pueda por lo menos advertirse en otros navegadores distintos a
IE4+.
3. Mapas
En HTML se pueden tener imágenes, asociando un
URL a una cierta parte de la misma: imágenes mapeadas o
mapas.
Para confeccionar un mapa es necesario crear la imagen
al tamaño de visualización y delimitir cada una de
las diferentes zonas deseadas. Para delimitar una zona se
realizará en forma de círculo, rectángulo o
polígono. Las coordenadas que forman cualquiera de las
formas mencionadas vendrán expresadas en pixels de imagen:
la parte superior izquierda de la imagen corresponde con el
origen de coordenadas, mientras que la parte inferior-derecha
corresponde con la coordenada más alta de la
imagen.
Existen dos técnicas para confeccionar un
mapa:
Mapas gestionados por el servidor
El servidor se encarga de hacer la correspondencia de
coordenadas del ratón con el URL. Para ello, es necesario
la utilización de un programa CGI que se ejecuta en el
servidor más unos ficheros de definición de zonas.
Es el método más antiguo.
Mapas gestionados por el cliente
En la versión 3 de HTML, se definen los mapas
gestionados por el cliente. Ya no necesitamos un programa CGI
externo, pues las definiciones de las zonas se especifican en la
propia página. El cliente será el encargado de
hacer la correspondencia entre las coordenadas del ratón y
el URL. En este capítulo, mostraremos como especificar un
mapa gestionado por el cliente
Para especificar un mapa deberemos realizar dos tareas:
definición de las zonas e inserción de la
imagen.
Directiva MAP: definición de las zonas.
Para la definición de las zonas del
mapa se utilizará la directiva MAP con el atributo NAME
para indicar el nombre del mapa:
En medio especificaremos cada una de las
zonas de la imagen. Para lo cual se utilizará una
directiva AREA para cada zona. Los atributos a especificar en la
directiva AREA son:
SHAPE
Es la forma de la zona. Los valores que
admite son: RECT, POLYGON, CIRCLE o DEFAULT para el resto de la
imagen que no haya sido incluida dentro de una zona.
COORDS
Indicaremos las coordenadas de la zona;
dependiendo de la forma:
RECT
Las coordenadas de los vértices
superior-izquierda e inferior-derecha ("X0,Y0,X1,Y1").
POLYGON
Las coordenadas de cada uno de los
vértices del polígono
("X0,Y0,X1,Y1,X2,Y2,…,Xn,Yn").
CIRCLE
La coordenada del centro del círculo
y su radio ("X,Y,r").
HREF o NOHREF
Indicaremos el URL (HREF) o nada
(NOHREF).
Atributo USEMAP: Inserción de un mapa
Una vez hemos definido las zonas del mapa,
ya podemos hacer referencia a su nombre. Para ello, utilizaremos
el atributo USEMAP dentro de la directiva IMG:
Ejemplo
Hemos construido una imagen con tres
zonas:
Escudo ETSII: La zona definida
es un círculo y el URL, la página inicial de la
ETSII.Escudo UVA: La zona definida
es el rectángulo que le engloba y el URL, la
página inicial de la Universidad de
Valladolid.Lápiz: La zona definida
es el rectángulo que lo engloba y el URL, el
índice de esta guía.
Lección XI
Java
Script
4. Lenguajes de script
Los lenguajes de script, también conocidos como
lenguajes de macros, son lenguajes que sólo funcionan en
las aplicaciones para las que han sido creados.
Son lenguajes para ser interpretados, no para ser
compilados, por lo que no generan ningún archivo
ejecutable.
Las aplicaciones se encargan de ejecutar los programas
mientras van interpretando el código, por lo que la
ejecución puede resultar más lenta que en el caso
de estar ejecutando un archivo ejecutable.
Los lenguajes de script, al igual que el resto de
lenguajes de programación, disponen de variables,
métodos y objetos predefinidos, pero un menor control
sobre los tipos de variables (enteros, cadenas de caracteres,
etc.), por lo que es posible asignar valores de distintos tipos a
una misma variable, lo que puede producir errores y dificultar la
depuración de los programas.
Los lenguajes de script pretenden ser sencillos a la
hora de programar. Al mismo tiempo, lo normal es que los
programas no sean muy extensos, ni tampoco muy
complicados.
Dos de los lenguajes de script más utilizados hoy
en día son JavaScript y VBScript.
El lenguaje VBScript fue creado por Microsoft, por lo
que puede ser interpretado por todas sus aplicaciones. Pero no es
recomendable utilizar este lenguaje de script en nuestras
páginas, ya que solamente podría ser interpretado
por el navegador Internet Explorer, y hay muchos usuarios que
utilizan navegadores diferentes.
Es más recomendable utilizar el lenguaje
JavaScript, creado por Netscape, ya que puede ser reconocido por
un mayor número de navegadores.
La utilización de JavaScript permite variar
dinámicamente el contenido del documento, validar
formularios, etc.
Por ejemplo, podemos crear funciones que permitan
mostrar y ocultar capas. Situa el puntero sobre la imagen del
gato para ver lo que ocurre.
Si utilizáramos un editor visual, como
Dreamweaver, podríamos insertar algunos comportamientos de
este tipo sin la necesidad de escribir ni una sola línea
de código JavaScript. Esta aplicación permite
insertar comportamientos a través de menús y
paneles, generando automáticamente el código
JavaScript necesario.
Obtendríamos una imagen como la que aparece a
continuación, que al ser pulsada llama a la
función. Pulsa sobre la imagen para ver lo que
ocurre:
A través del atributo onClick hemos definido la
función que será llamada al pulsarse sobre el
objeto.
Podemos utilizar muchos otros atributos para llamar a
funciones, como pueden ser onDblClick (al hacer doble clic),
onMouseOver (mientras el cursor este encima) o onMouseOut (cuando
el cursor deje de estar encima).
Unidad 12
Hojas de Estilo
en Cascada
1. Introducción
Los estilos CSS (Cascading Style Sheets) son hojas de
estilo de actualización automática.
Se usan principalmente para definir estilos que luego se
aplicarán a las páginas de nuestro sitio, incluso a
veces permiten definir características que no permiten
definir los estilos HTML, como el color de fondo para el texto
por ejemplo.
Al estar la definición de los estilos en un
archivo externo a las páginas y común a todas las
páginas del sitio (es recomendable) el aspecto de nuestras
páginas será más homogéneo y
además podremos cambiar ese aspecto de manera segura e
inmediata cambiando únicamente la hoja de
estilos.
Se pueden definir estilos independientes o estilos
asociados a determinadas etiquetas por ejmplo a la
etiqueta (que corresponde a los hiperenlaces). De
este modo, todos los hiperenlaces de la página o del sitio
adquirirían la apariencia definida en ese estilo y con un
sólo cambio en la hoja de estilos podemos cambiar de golpe
el estilo de todos los enlaces en todas las páginas
vinculadas a este estilo.
El inconveniente que tiene trabajar con hojas de estilos
es que algunos navegadores no las soportan y las ignoran, aunque
estos navegadores suelen ser versiones antiguas, por lo que
ocurrirá en pocos casos.
Las hojas de estilo pueden crearse con cualquier editor
de texto, como puede ser el Bloc de notas, y pueden guardarse con
la extensión TXT.
2. Vincular una hoja de
estilo
Para poder incluir las propiedades de una hoja de estilo
en un documento, hay que vincularla a él. Un documento
puede tener varias hojas de estilo vinculadas.
Para vincular una hoja de estilo a un documento es
necesario insertar la etiqueta en el documento, entre las
etiquetas
y . Esta etiqueta no necesita etiqueta
de cierre.
A través del atributo href se especifica la hoja
de estilo que se va a vincular al documento.
A través del atributo rel se tiene que
especificar que se está vinculando una hoja de estilo, por
lo que su valor ha de ser stylesheet.
A través del atributo type se tiene que
especificar que el archivo es de texto, con sintaxis CSS, por lo
que su valor ha de ser text/css.
Por ejemplo, podríamos vincular una hoja de
estilo escribiendo el siguiente código.
3. Sintaxis de las hojas de
estilo
Como recordarás, para especificar las propiedades
de una capa no se utilizan etiquetas normales de HTML. Todas las
propiedades se especifican a través del atributo style, y
aparecen entre comillas dobles, con un punto y coma detrás
de cada una. Para asignar los valores a las propiedades no se
utiliza el símbolo = (igual), sino que se utiliza el
símbolo : (dos puntos).
Esto es debido a que se está especificando un
estilo, pero sin vincular ninguna hoja de estilo a la
página.
Para especificar las propiedades dentro de una hoja de
estilo, la sintaxis es muy similar.
En primer lugar se pone el nombre del estilo, y entre
llaves se especifica la lista de propiedades (en
minúsculas) que se corresponden con dicho estilo. Cada una
de estas propiedades tiene que tener un punto y coma
detrás, y los valores se asignan con el símbolo :
(dos puntos).
El nombre del estilo puede ser un nombre inventado por
nosotros, o el nombre de una etiqueta HTML. Para poder utilizar
un nombre inventado, tiene que estar precedido por un punto, o
por el nombre de una etiqueta seguida de un punto.
Por ejemplo, en una hoja de estilo podríamos
tener lo siguiente:
4. Las propiedades
Vamos a ver algunas propiedades que pueden especificarse
en los estilos, así como los valores que pueden
tomar.
Familia de la fuente:
La propiedad es font-family.
Puede tomar como valor varios nombres de fuentes,
separados por comas, como pueden ser arial, helvetica, etc. La
ventana de definir una familia de fuentes es que si el ordenador
del visitante no tiene instalada la primera fuente, entonces se
aplicará la segunda, así sucesivamente hasta
encontrar una de las fuentes.
Grosor del texto:
La propiedad es font-weight.
Sus valores pueden ser: bold (negrita), bolder (mas
negrita), lighter (ligera) o
un número del 100 al 900.
Tamaño de la fuente:
La propiedad es font-size.
Puede tomar como valor un número.
Espacio entre líneas:
La propiedad es line-height.
Puede tomar como valor un número.
Espacio entre caracteres:
La propiedad es letter-spacing.
Puede tomar como valor un número.
Estilo de la fuente:
La propiedad es font-style.
Puede tomar como valor italic, cuando se desee que el
texto aparezca en cursiva.
Decoración de la fuente:
La propiedad es text-decoration.
Puede tomar como valor none (ninguno), underline
(subrayado), line-through (una línea encima), overline
(tachado) o blink (parpadeo).
Si se aplica none a los hiperenlaces, puede evitarse que
aparezcan subrayados.
Transformar el texto:
La propiedad es text-transform.
Puede tomar como valor capitalize (la inicial de cada
palabra aparecerá en mayúsculas), uppercase (todo
en mayúsculas) o lowercase (todo en
minúsculas).
Alineación del texto:
La propiedad es text-align.
Puede tomar como valor center (centrado), left
(izquierda), right (derecha) o justify (justificado).
Sangrado del texto:
La propiedad es text-indent.
Puede tomar como valor un número.
Color:
La propiedad es color.
Puede tomar como valor un número en
hexadecimal.
Si se aplica esta propiedad a los hiperenlaces,
serán de este color, en lugar de los indicados por los
atributos link (vínculo), vlink (vínculo activo), y
alink (vínculo visitado) de la etiqueta .
Color de fondo:
La propiedad es background-color.
Puede tomar como valor un número en
hexadecimal.
Imagen de fondo:
La propiedad es background-image.
La ruta y el nombre de la imagen han de aparecer entre
paréntesis, después de la palabra url.
Márgenes:
Las propiedades son margin-top (margen superior),
margin-right (margen derecho), margin-bottom (margen inferior),
margin-left (margen izquierdo), o margin (los valores de los
márgenes superior, derecho, inferior e izquierdo,
separados por espacios).
Pueden tomar como valor un número (cuatro
números separados por espacios en el caso de
margin).
Ancho de bordes:
La propiedad es border-width.
Puede tomar como valor un número.
Color del borde:
La propiedad es border-color.
Puede tomar como valor un número en
hexadecimal.
No hay que olvidar, en el caso de los valores
numéricos, especificar la unidad de medida a utilizar: cm
(centímetros), pt (puntos), px (píxeles), o %
(porcentaje).
Existen muchas otras propiedades además de
éstas. En el tema de capas puedes consultar las
propiedades que se pueden definir sobre ellas en las hojas de
estilo (z-index, visibility, etc.).
Unidad 13
Páginas
web Dinámicas
1. HTML dinámico
Una página dinámica es una página
que permite al usuario interactuar con ella, y que contiene
efectos especiales.
Para crear una página de este tipo no basta con
programar en HTML, ya que este lenguaje es muy limitado. Es
necesario combinar HTML con otros lenguajes, como JavaScript,
VBScript, Java, ASP, PHP, etc.
También puede hacerse uso de capas, de
animaciones Flash, de applets java y de hojas de estilo
CSS.
A la combinación de estos elementos se le conoce
como DHTML (HTML dinámico).
Existe una anécdota muy curiosa sobre DHTML
:
Una conocida marca, poseedora de un programa que permite
"dar vida" a las páginas web, pidió explicaciones a
un webmaster tras visitar su página web. Pensaron que el
webmaster estaba utilizando su programa y habían
comprobado que no figuraba como comprador en sus
archivos.
El webmaster respondió que no estaba utilizando
el programa en cuestión, sino HTML dinámico, por lo
que la empresa tuvo que disculparse por la
acusación.
Esto demuestra lo que se puede llegar a hacer con HTML
dinámico.
2. Programación web
En el tema anterior hablamos de JavaScript y VBScript,
dos lenguajes de programación web.
Estos lenguajes son interpretados y ejecutados
directamente por el navegador del usuario que visualiza la
página, pero existen otros lenguajes que son interpretados
por el servidor, como es el caso de ASP, PHP o JSP
(Java).
Cuando un usuario pretende visualizar una página,
el servidor ejecuta los scripts y genera otra página como
resultado. Esta nueva página sólamente contiene
HTML, y es la que visualiza el navegador del usuario.
Esto evita que se puedan producir errores al interpretar
el código, como ocurre con VBScript si intenta ser
interpretado por un navegador que no sea Internet
Explorer.
Otras ventajas que proporciona programar con lenguajes
interpretados por el servidor, es que los usuarios no tienen
acceso al código original, por lo que los programas
estarán protegidos ante plagios.
Al mismo tiempo, se puede acceder a mayor número
de recursos almacenados en el servidor, como pueden ser bases de
datos.
Los lenguajes de este tipo más utilizados hoy en
día son ASP y PHP.
El lenguaje ASP (Active Server Pages), al igual que
VBScript, fue creado por Microsoft. Consiste en incluir
instrucciones Visual Basic Script o Jscript dentro del documento
HTML.
Actualmente se ha presentado, con algunas diferencias en
la sintaxis, una nueva versión llamada ASP.NET, que ofrece
bastantes mejoras en lo que se refiere a posibilidades y rapidez
de ejecución.
ASP tiene un gran inconveniente, ya que precisa que el
servidor funcione sobre Windows NT o 2000.
El lenguaje PHP (Hipertext Preprocesor) permite realizar
muchos tipos de aplicaciones web gracias su gran librería
de funciones y documentación. Ofrece muchas ventajas
frente a ASP, entre ellas, que es más rápido, que
es más seguro, y que es gratuito.
3. XML
El lenguaje HTML ha ido evolucionando
rápidamente, gracias, entre otras cosas, a su sencillez.
Pero este lenguaje es bastante rígido, y no nos permite
hacer en nuestras páginas todo lo que nos gustaría,
al no existir las etiquetas necesarias para ello.
El comité W3C comenzó a desarrollar nuevas
versiones de HTML para permitir nuevas posibilidades a la hora de
programar, y creó el lenguaje XML (Extensible Markup
Language).
Aunque los navegadores aún no soportan toda la
potencia de XML, cada vez está siendo más
utilizado, ya que aporta muchas ventajas.
XML es un lenguaje comprensible para las personas. Los
documentos escritos en este lenguaje pueden leerse, crearse y
modificarse de forma sencilla, utilizando cualquier editor de
texto.
Es capaz de expresar estructuras complejas de datos.
Incluso estructuras de datos tan complicadas como gráficos
pueden representarse en forma de árbol.
Con XML lo que se pretende es etiquetar e identificar el
contenido de las páginas, y no pensar directamente en
cómo se mostrarán los datos. Puede utilizarse para
definir muchas más características referentes al
contenido de los documentos de las que permite la etiqueta de
HTML, y estos datos resultan muy útiles para realizar
búsquedas o filtrar información.
XML también ofrece la posibilidad de gestionar
cualquier conjunto de caracteres internacional. Esta es una
característica muy útil, ya que permite incluir
cualquier carácter que se esté utilizando hoy en
día, como pueden ser caracteres en chino o en
árabe, lo que facilita el comercio internacional a
través de Internet.
En realidad, XML y HTML son lenguajes distintos, basados
en el SGML (Standard Generalized Markup Language).
SGML es el estándar internacional para la
definición de la estructura y el contenido de diferentes
tipos de documentos electrónicos.
Mediante una DTD (Definición de Tipo de
Documento), el SGML define la estructura y el contenido de cada
tipo de documento. Por ejemplo, existe una DTD que define
cómo han de ser los documentos HTML.
Pero no existe ninguna DTD que defina la estructura y el
contenido de un documento XML.
En realidad, XML es una versión resumida del
SGML, que descarta aquellas partes del SGML que raramente se
utilizan. Por ello, XML es más sencillo que SGML, y
permite definir nuestros propios tipos de documentos, con
nuestras propias etiquetas.
Por ejemplo, para insertar esto en una página
web:
NO DOUBT Tragic Kingdom
Publicado en España en 1995
A la venta por solo 16 € (con un descuento del 10%
de su precio original)
Autor:
Ing. Pablo Cesar TTito C.
 Página anterior | Volver al principio del trabajo | Página siguiente  |