Diapositivas

CURSO DE H.T.M.L.
Parte 2/4
Autor
Autor
Luis
LuisMarco
MarcoGiménez
Giménez
Agencia
AgenciaTributaria
Tributaria
Dpto.
Dpto.Informática
InformáticaTributaria
Tributariade
deMadrid
Madrid
Colaboradores
Colaboradores
Javier
JavierÁlvarez
Álvarez
Eloy
EloyGarcía
García
Instituto
Institutode
deSalud
SaludCarlos
CarlosIII
IIIde
deMadrid
Madrid
Recomendaciones de diseño web (I)
p
Buscar diseños integrados:
n
Coherentes (estilos de fuentes, tonos, estructura y
elementos de navegación, relaciones de tamaño, ...)
n
Claros (uso de márgenes, espacios en blanco, tipo y
tamaño de texto, ...)
n
Atractivos (imagen corporativa o personal)
n
Útiles (cumplan nuestro propósito: informar,
entretener, dar soporte, servicio, vender, ...)
Recomendaciones de diseño web (II)
p
Facilitar la “usabilidad”
n
La orientación (conocer en todo momento donde nos
encontramos)
n
La navegabilidad (saber cómo ir o volver donde se
desea)
n
La sencillez (limitar las abstracciones)
Editores de imagen (I)
Uso
p
Sirven como herramientas de apoyo para:
n
Maquetación y diseño de las páginas.
n
Tratamiento de las imágenes para su publicación en la
web:
§ Retoque y manipulación de imágenes
§ Creación de efectos y animaciones
§ Obtención de los formatos y tamaños adecuados.
n
Generación de elementos gráficos específicos:
§ fondos, botones, logotipos, barras, sombras...
Editores de imagen (II)
Formatos estándar de imagen web
n
gif, Formato de Intercambio de Gráficos
p
p
p
p
n
jpeg, Joint Photografic Experts Group
p
p
p
n
Es el más utilizado
Utiliza 256 colores y comprensión sin perdida
Admite entrelazado (GIF89)
Orientado a dibujos e imágenes con pocos colores
Utiliza millones de color, comprensión con perdida
(Máxima, Alta, Media y Baja)
Admite progresividad
Orientado a fotografía (alta gama de colores, contrastes)
png, Gráficos de Red Portátil
Imágenes (I)
p
Etiqueta para inclusión de una imagen:
<IMG src=“fichero-imagen”
alt=“descripción-imagen”
align=alineación-imagen
border=número-borde-imagen
width=ancho-imagen-píxeles
height=alto-imagen-píxeles>
p
Sólo es imprescindible el atributo ‘src’
Imágenes (II)
Atributos
p
src; nombre del archivo imagen
p
align; alineación de la imagen respecto al texto (left,
p
alt; texto alternativo identificador de la imagen
p
width; ancho de la imagen en píxeles
p
height; alto de la imagen en píxeles
p
border; ancho del recuadro imagen
right, top, middle, bottom)
Imágenes (III)
Otros
p
hspace; separa el texto horizontalmente
p
vspace; separa el texto verticalmente
p
thumbnails; forzar una imagen para que encaje
en una zona reducida respecto a su tamaño
original (no es efectivo)
p
Carga progresiva/entrelazada; reduce la
sensación de espera
Imágenes (IV)
Enlaces imagen
p
Una imagen puede servir como enlace a otra
página:
<A href=“pagina1.html”><IMG src=“arrow.gif”></A>
<A href=“pagina2.html”>
<IMG src=“imagenes/letter.gif” alt=“Ir a la página 2”
border=0>
</A>
Imágenes (V)
Zonas activas
p
Son zonas sensibles que se definen sobre una
imagen sirviéndonos de enlace.
p
Existen dos técnicas:
n
n
Basada en el cliente
Basada en el servidor
p
Es posible combinar ambas técnicas.
p
Existen diversas herramientas que facilitan la
descripción de la zona activa
Imágenes (VI)
Zonas activas cliente
p
Etiqueta <MAP> ... </MAP>; referencia la
imagen a utilizar y contiene las áreas definidas.
n
Atributo: name; nombre asignado a la imagen de fondo
p
La imagen de fondo se identifica mediante el
atributo #usemap
p
Etiqueta <AREA>; Permite la definición de las
superficies activas
Imágenes (VII)
Zonas activas cliente
p
Es más rápida y estable, pero no esta
plenamente soportada por todos los navegadores
p
Ejemplo:
<IMG src=“españa.gif” usemap=“#espa”>
<MAP name=“espa”>
<AREA shape=circle coords=90,100,2 href=“pagina1.html”>
<AREA shape=“default” nohref>
</MAP>
Imágenes (VIII)
Atributos de <AREA>
p
shape; define la forma de la zona sensible
(circle, rect, poly)
p
coords; coordenadas que definen la zona según
la forma (existen hh. de apoyo)
p
href; URL del recurso enlazado
p
nohref; evita el enlace fuera de las zonas activas
definidas expresamente
Imágenes (IX)
Zonas activas servidor
p
Se utilizan archivos “*.map” donde son descritas
las coordenadas del área, que se sitúan en
alguna carpeta del servidor
p
Existen dos posibles formatos de archivo: NCSA
y CERN
p
La imagen es referenciada mediante el atributo
ismap
Ej.: <A href=“mapas/fichero.map”><IMG src=“españa.gif” ismap></A>
Imágenes (X)
Ejemplo zona activa cliente
Zona Activa 1
Zona Activa 2
SVG
Gráficos Vectoriales eScalables (I)
p
Se basa en XML, permitiendo la representación
gráfica en el navegador mediante vectores,
imágenes y texto.
p
Admite animaciones e interactividad.
p
Actualmente existen múltiples herramientas de
generación automática (Adobe Illustrator 10,
CorelDraw 10, SVG Maker)
SVG
Gráficos Vectoriales eScalables (II)
p
Se recomienda que los ficheros tengan la
extensión .svg (comprimidos gzip, .svgz)
p
Declaración de tipo de documento SVG:
<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE svg PUBLIC “-//W3C//DTD SVG 1.0//EN”
“http://www.w3.org/TR/2001/PR-SVG20010719/DTD/svg10.dtd”>
SVG
Gráficos Vectoriales eScalables (III)
p
p
Documento SVG:
<svg width="" height="" ...>
.....
</svg>
Existen ciertas etiquetas predefinidas:
text,rect,circle,ellipse,line,polyline,polygon,image
,...
SVG
Gráficos Vectoriales eScalables (IV)
p
Ventajas:
n
n
n
p
Menor ocupación, puede comprimirse
Rápido procesamiento-representación
Escalabilidad de imagen sin perdida de calidad
Inconvenientes:
n
Más código en el documento, son etiquetas
SVG
Gráficos Vectoriales eScalables (V)
PDF
Formato de Documento Portable.
p
Es un formato propietario, Adobe
p
Ventajas:
n
n
n
p
Amplio uso del formato en el diseño de
documentos
Gran calidad de impresión
Posible generación de formularios (Forms-PDF)
Inconvenientes:
n
Necesita de un plug-in para su visualización
(Acrobat Reader gratuito)
Multimedia (I)
Recomendaciones previas
p
Permiten proporcionar un mayor impacto a la
página, realzando en muchos casos notablemente
el diseño, pero no deben distraer del propósito
principal.
p
Es recomendable no abusar, limitando el número
de efectos multimedia sobre la página.
Multimedia (II)
Aclaraciones
p
En muchos casos será necesario disponer de
“plug-ins” instalados en el navegador para poder
apreciar algunos de estos efectos multimedia
p
Plug-in: software propietario que se auto instala,
a petición, en el navegador-sistema para
permitirnos la ejecución de diversos formatos o
productos
Multimedia (III)
Formatos más usados
p
Audio
n
n
n
n
p
au, Monoaural de 8 bits, muy usado por su pequeña
ocupación aunque de baja calidad
mp3, La estrella actual, proporciona alta calidad con
reducido tamaño
midi, no esta muy extendido pero de muy alta calidad
Otros: wav, aiff, ...
Vídeo
n
n
avi, Interfaz Audio Video propia de Windows
Otros: mov, mpeg, quicktime , ...
Multimedia (IV)
Etiquetas
p
Marquesinas:<MARQUEE>…</MARQUEE>
(IE) ?
p
Parpadeo: <BLINK> ... </BLINK> (NC) X
p
Sonido: <BGSOUND> (IE)
p
Audio y video: <EMBED> ?
Audio y video: <OBJECT>
Audio y video: <A href= > ... </A>
p
p
Multimedia (V)
Incorporación de sonido
p
Existen dos formas de procesar:
n
n
p
Carga completa del fichero de audio
Audio fluyente, se recibe por UDP
Se añade a las páginas mediante:
n
n
n
Enlaces a documentos de audio,
<A href=“saludo.wav”>Bienvenida</A>
Las etiquetas <EMBED> ? u <OBJECT>
<EMBED src=“*.mp3” >
La etiqueta <BGSOUND> (IE)
<BGSOUND src=“voz.au”>
Multimedia (VI)
Incorporación de video
p
Existen dos formas:
n
n
p
Carga completa del fichero de video
Video fluyente, se recibe por UDP
Se añade a las páginas mediante:
n
n
Enlaces a documentos de video,
<A href=“saludo.mov”>Bienvenida</A>
Las etiquetas <EMBED> ? u <OBJECT>
<EMBED src=“*.*” >
Multimedia (VII)
Atributos de <EMBED> ?
p
p
p
p
p
p
height; altura del reproductor en píxeles
width; anchura del reproductor en píxeles
autoplay; Ejecución inmediata true/false
controller; habilitación o no de los controles de
reproducción
loop; forma de reproducción única, continua
pluginspace; referencia a página donde obtener
el ‘plug-in’ necesario para la reproducción
Multimedia (VIII)
Animación GIF
p
Se construyen en base a dos o mas imágenes GIF
en secuencia, llamadas celdas.
p
Es una de la técnicas usada en la generación de
‘banners’
p
Existen distintas herramientas para su
construcción:
n
GIF Animator de Microsoft, GIF Construction Set,
Animation Shop de Jasc, ...
Multimedia (IX)
Animación Flash
p
Herramienta de dibujo basada en vectores, de
Macromedia
p
Permite obtener diseños espectaculares muy
compactos y reducidos
p
A partir de Windows98 no se necesita ‘plug-in’
para su ejecución en I.E. ya que se incorporo al
s.o., no así con Netscape
Multimedia (X)
Animación Flash.
p
Actualmente se usa en múltiples aplicaciones:
n
n
n
Animaciones de presentación.
Demostraciones – Ayuda de uso
Generación de botones y menús de navegación.
Multimedia (XI)
VRML
p
Lenguaje de Modelado de Realidad Virtual
p
Permite la creación archivos *.wrl de mundos
virtuales en base a ordenes, donde se
especifican: formas, colores, texturas,
iluminaciones, ...
p
Existen herramientas para su creación.
p
Para su visualización necesitan ‘plug-in’
instalados en el navegador.
Práctica 5
Tablas (I)
p
Las tablas se utilizan para:
n mostrar datos organizados.
n
p
controlar el posicionamiento de cualquier objeto sobre
la página, es su principal uso, normalmente sin borde.
Se pueden anidar, aunque no es aconsejable
anidar más de tres niveles por su difícil control,
es mejor apilar distintas tablas.
Tablas (II)
p
La etiqueta general que define una tabla es:
<TABLE> ... </TABLE>
p
Las tablas pueden tener o no tener borde
externo: <TABLE border=n>. Por defecto
border=1 (sencillo).
p
Filas de una tabla <TR> ... </TR>
p
Columnas <TD> ... </TD>
Tablas (III)
Ejemplo de código
p
Ejemplo de una tabla sencilla:
<TABLE border=2>
<TR>
<TD>Cód. Artículo</TD>
<TD>Descripción</TD>
<TD>Precio Vta.</TD>
</TR>
<TR>
<TD>JUG/200302</TD><TD>Anillo X-MEN</TD>
<TD>8.975</TD>
</TR>
</TABLE>
Tablas (IV)
Ejemplo de visualización
Tablas (V)
Cabeceras
p
A una tabla se le puede añadir un titular
<CAPTION> Titular </CAPTION>
p
Además se le puede añadir celdas de cabecera:
<TH> ... </TH>
<TR><TH>Cabecera 1</TH><TH>Cabecera 2</TH></TR>
p
Una celda <TD> puede contener textos, enlaces,
imágenes, elementos de formularios e incluso
otras tablas.
Tablas (VI)
Ejemplos <TD>
p
Celda con imagen:
<td><img src=“logo.gif”></td>
p
Celda con enlace:
<td><a href=“aeatse.html”>Página principal AEAT</a></td>
p
Celda con otra tabla:
<td><table border=0> <tr><td>Mi tabla anidada</td></tr></table></td>
p
Celda con elemento de formulario:
<td><form name=“mi_form”><input type=button name=“mi_boton”
value=“Aceptar”></form></td>
Tablas (VII)
Alineación Horizontal
p
El contenido de las celdas puede posicionarse en
centro, izda. o dcha., con el atributo ALIGN de
<TD> o <TH>.
p
Centro, CENTER:
<td ALIGN=CENTER> ... </td>
p
Izquierda, LEFT:
<td ALIGN=LEFT> ... </td>
p
Derecha, RIGHT:
<td ALIGN=RIGHT> ... </td>
Tablas (VIII)
Alineación Vertical
p
La alineación vertical, VALIGN por defecto es el
centro. No obstante se puede cambiar arriba
(TOP) o abajo (BOTTOM):
n
n
<td valign=TOP> ... </td>
<td valign=BOTTOM> ... </td>
Tablas (IX)
Centrado de la tabla y contenido
p
La tabla se centra con <TABLE align=‘center’> ,
<DIV align=‘center’> o <CENTER>, pero esto no
afecta al contenido de la misma.
p
El contenido centrado se consigue con <TD
align=‘center’>
p
El formato de texto sí queda afectado por las
definiciones externas.
Tablas (X)
Dimensiones
p
Por defecto, una tabla se dimensiona al 100%,
en anchura si no se especifica nada más, aunque
es aconsejable definir los atributos para obtener
mayor control.
p
El atributo que modifica la anchura de una tabla
es: WIDTH=nn, donde nn puede ser un número
en porcentaje o píxeles.
p
Estos atributos son aplicables tanto a <TABLE>
como a <TD>.
Tablas (XI)
Expansión de celdas
p
Una celda <TD> puede expandirse
horizontalmente sobre otras celdas con el
atributo COLSPAN=nn.
p
Verticalmente se expanden con el atributo
ROWSPAN=nn.
p
nn es un número natural entero que indica el
número de celdas sobre las que se expande la
celda TD.
Tablas (XII)
Color de fondo
p
Atributo BGCOLOR, de las etiquetas <TABLE>,
<TR> o <TD>.
p
Ejemplos:
<TABLE BORDER=2 BGCOLOR=red> ... </TABLE>
<TABLE><TR><TD BGCOLOR=blue> ... </TD></TR></TABLE>
<TABLE><TR BGCOLOR=yellow> ... </TR></TABLE>
Tablas (XIII)
Separación entre celdas
p
Atributo CELLSPACING=nn de la etiqueta
<TABLE>.
p
nn es un número entero positivo que indica la
separación entre celdas, expresado en píxeles.
p
La separación por defecto es de dos píxeles.
Tablas (XIV)
Separación con borde de la celda
p
Atributo CELLPADDING=nn de la etiqueta
<TABLE>.
p
nn es un número entero positivo que indica la
separación entre el contenido de la celda y el
borde exterior, expresado en píxeles.
p
La separación por defecto es de un píxel.
Práctica 6
Formularios
p
Los formularios permiten que el cliente envíe
información al servidor web, donde un programa
procesará esta información, la aplicación CGI, y
responderá en consecuencia.
p
Elementos típicos de un formulario son: cajas de
texto, botones, listas de selección, botones de
radio, etc.
Definición de formulario
p
Un formulario se define con las etiquetas
<FORM …> … </FORM>
p
Estructura general de un formulario
<FORM NAME=“mod100” ACTION=“/certificados”
METHOD=“post” ENCTYPE=“text/plain”>
…
</FORM>
Atributos de <FORM> (I)
ACTION
p
ACTION indica la acción que se debe de efectuar
(p.ej. mailto) o la aplicación CGI que tratara los
datos que se envían.
p
Cuando el destino de ACTION es un programa
servidor se debe indicar la localización del mismo
por su camino (path):
Ej.: …ACTION=“/cgi-bin/procesa.pl” ...
Atributos de <FORM> (II)
METHOD
p
Indica la forma en que se envían los datos del
formulario
p
METHOD=“POST” indica que los datos del
formulario serán enviados al servidor a su
entrada de datos estándar.
p
METHOD=“GET” indica que se envían los datos
añadiéndolos a la URL, como un apéndice.
Atributos de <FORM> (III)
ENCTYPE
p
Indica el formato MIME de los datos enviados.
p
Este atributo sólo es aplicable cuando
METHOD=“POST”.
p
ENCTYPE=“text/plain” permite que el formulario
se envíe en formato texto plano.
p
Otros tipos:
video/mpeg, ...
multipart/form-data, text/html, image/gif,
Elementos básicos de un formulario
p
Existen tres formas básicas de introducir datos y
actuar en un formulario:
n
n
n
por medio de texto (campos de entrada, áreas de texto,
...)
por medio de menús. (listas, cajas confirmación, )
por medio de botones (limpiar, tratar datos
introducidos, enviar)
Etiquetas básicas de un formulario
p
<INPUT>, Campo de entrada de datos
p
<TEXTAREA>... <TEXTAREA>, Texto libre
p
<SELECT>..</SELECT>, Lista de valores
p
La estructura de la etiqueta <INPUT>, principal
en la introducción de datos, es:
<INPUT TYPE=xxx NAME=yyy VALUE=“zzz”> , donde:
xxx: Tipo de control (button, text, image, …)
yyy: Nombre del control.
zzz: Valor del control.
Etiqueta <INPUT> (I)
Atributos de TYPE
p
p
p
p
p
p
text; caja de texto (valor por defecto de INPUT)
password; caja de texto enmascarada.
checkbox; caja de confirmación true/false
radio; selección de opciones alternativas
file; selección de fichero
hidden; campo oculto que se envía, aunque no
está visible.
Etiqueta <INPUT> (II)
Atributos de TYPE
p
button; botón asociable a un ‘script’ para
ejecutar un proceso.
p
reset; botón para limpiar los datos de todo el
formulario.
p
submit; botón para envío de los datos
p
image; también permite el envío de datos del
formulario (IE)
Etiqueta <INPUT> (III)
Cajas de Texto
p
El valor que debe tomar el tipo de la etiqueta
<input> es text:
<INPUT TYPE=TEXT NAME=nombre VALUE=“valor”>
p
Por defecto la longitud visible en el formulario es
de 20 caracteres. La longitud visible puede
limitarse con el atributo SIZE=nn.
p
La longitud de los datos a introducir se limita con
el atributo MAXLENGTH=nn.
Etiqueta <INPUT> (IV)
Cajas de Texto
p
El atributo VALUE muestra el valor por defecto
que aparece en la caja de texto, y que se enviaría
sino es cambiado
p
Otros atributos frecuentes se relacionan con los
eventos (onfocus, onblur, onchange,...) que
permiten el tratamiento de los datos mediante un
‘script’
Etiqueta <INPUT> (V)
Ejemplos Cajas de Texto
p
Ejemplo1:
<FORM ACTION=“/certificados” METHOD=“POST”>
Escribe tu nombre:
<INPUT TYPE=text NAME=nombre VALUE=“”>
<br>NIF:
<INPUT TYPE=text NAME=nif VALUE=“00000000A”
onblur=“valida_nif(this);”>
</FORM>
p
Ejemplo 2:
<INPUT TYPE=text NAME=ape1 SIZE=20 MAXLEGNTH=18 >
p
Ejemplo 3:
<INPUT TYPE=text NAME=ape1 SIZE=20 MAXLEGNTH=40>
Etiqueta <INPUT> (VI)
Campos Password
p
Otro tipo, similar a text pero que permite la
entrada de datos no reconocibles, enmascarados,
apareciendo los caracteres como asteriscos, es
password.
p
Ejemplo:
<INPUT TYPE=password NAME=contraseña SIZE=8 MAXLENGTH=8>
Etiqueta <INPUT> (VII)
Campos ocultos: HIDDEN
p
A veces es conveniente tener en un formulario
algunos campos ocultos.
p
El tipo especificado para la etiqueta <INPUT> es
hidden:
<INPUT TYPE=hidden NAME=xxx VALUE=“yyyy”>
p
Estos campos no son visibles, pero se envían
junto con el resto del formulario.
Etiqueta <INPUT> (VIII)
Cajas de confirmación
p
El tipo a definir es checkbox.
p
El formato general es:
<INPUT TYPE=checkbox NAME=nombre [checked]>
p
La información es enviada al seleccionar la caja:
n
n
p
un booleano: nombre=On / Off,
o el valor asignado al atributo VALUE
Si la caja no es seleccionada no se envía la
variable correspondiente (atributo NAME)
Etiqueta <INPUT> (IX)
Cajas de confirmación
p
El atributo checked permite definir ON como
valor por defecto.
n
n
p
Se marca la caja
Envía la variable (valor/on)
Ejemplo:
<INPUT TYPE=checkbox NAME=confirmacion CHECKED> Recibir
información de sus productos.
Etiqueta <INPUT> (X)
Botones de radio
p
Tipo a definir radio
p
Permite seleccionar una única opción entre varias
(excluyentes).
p
Todos deben tener al mismo nombre
p
El formato general es:
<INPUT TYPE=radio NAME=xxx VALUE=yyy CHECKED>,
donde xxx es el grupo de botones de radio,
yyy es el valor que tomará la selección del botón.
Etiqueta <INPUT> (XI)
Botones de radio
p
Se envía el par NAME=VALUE que sea marcado.
p
Para marcar una selección por defecto usa el
atributo checked
p
Ejemplo:
<INPUT TYPE=radio NAME=“grupo1” VALUE=win CHECKED>
Windows9x
<INPUT TYPE=radio NAME=“grupo1” VALUE=linux>Linux
<INPUT TYPE=radio NAME=“grupo1” VALUE=mac>Mac Os
Etiqueta <INPUT> (XII)
Envío de un fichero: FILE
p
Proporciona una caja de texto, que nos permite
introducir directamente el ‘path’ del fichero, y un
botón que nos permite abrir una ventana de
diálogo del sistema para localizar el fichero.
p
El enctype debe ser ‘multipart/form-data‘
p
El atributo VALUE asigna el fichero por defecto
p
Ejemplo:
<input type=file name=fichero size=25>
Etiqueta <INPUT> (XIII)
Botones
p
El tipo es button. Suelen tener asociado un
‘script’ mediante su evento ‘onclick’.
p
Sintaxis general:
<INPUT TYPE=button NAME=xxx VALUE=“Ver lista”
onclick=“javascript:muestra_lista();>
Etiqueta <INPUT> (XIV)
Botón de borrado
p
El tipo para el borrado de datos es reset,
también con apariencia de botón, devuelve el
formulario a su estado inicial de valores por
defecto.
p
El texto que identifica el botón se asigna con la
propiedad value
p
Ejemplo:
<INPUT TYPE=reset VALUE=“Borrar Datos”>
Etiqueta <INPUT> (XV)
Botones de envío
p
El tipo de envío básico es submit con apariencia
de botón.
p
También el tipo image permite el envío de los
datos del formulario (IE)
p
Ejemplos:
p
Las imágenes dentro de un formulario también
pueden actuar como botones de envío mediante
un enlace y JavaScript.
<INPUT TYPE=submit VALUE=“Enviar Datos”>
<INPUT TYPE=image SRC=“enviar.gif”>
Etiqueta <TEXTAREA> (I)
Áreas de Texto
p
Se utilizan cuando el texto a introducir puede
alcanzar una gran longitud con múltiples líneas
de entrada.
p
Las etiquetas que las definen son:
<TEXTAREA …> … </TEXTAREA>
p
El formato general es:
<TEXTAREA NAME=nombre ROWS=rr COLS=cc
[wrap/nowrap]> Texto interior al área </TEXTAREA>
Etiqueta <TEXTAREA> (II)
Atributos
p
name; identificador del control
p
rows; número de filas del área de texto
p
cols; número de columnas del área.
p
wrap; no permitida la ruptura de línea
p
nowrap; permitida la ruptura de línea.
Etiqueta <SELECT> (I)
Listas de selección de valores
p
Cuando se desea que el valor a enviar sea
seleccionado de entre una lista de posibles
valores.
p
Las estructura general es:
<SELECT NAME=miLista>
<OPTION value=1>valor1
<OPTION value=2>valor2
<OPTION value=N>valorN
</SELECT>
p
El valor seleccionado se enviaría como
miLista=valorM.
Etiqueta <SELECT> (II)
Atributos
p
Por defecto el tamaño de la lista es de un
elemento (parte visible).
p
Si se desea aumentar se incluirá en la etiqueta
<SELECT> el atributo SIZE=nn.
p
Se puede permitir la selección de múltiples
elementos con el atributo MULTIPLE
Etiqueta <SELECT> (III)
Etiqueta <OPTION>
p
La etiqueta <OPTION> se utiliza para definir las
opciones seleccionables que aparecen en la lista.
p
Su atributo VALUE es el valor enviado.
p
Para especificar un valor por defecto, se añade el
atributo SELECTED dentro de la etiqueta
<OPTION> deseada.
Práctica 7