Professional Documents
Culture Documents
El presente manual
plantea una introducción
al lenguaje HTML
mostrando como
construir páginas Web.
Trata la construcción de
aplicaciones Web
estáticas basadas en
HTML para Internet /
intranet utilizando para
ello el entorno de
desarrollo integrado
(IDE) de Visual Studio
.NET y las herramientas
que este brinda para el
tratamiento de este
lenguaje de etiquetas.
Si piensa desarrollar
aplicaciones web ASP
.NET con el entorno de
Visual Studio .NET
encuentra en el presente
HTML
manual un punto de
partida interesante para
familiarizarse con el
entorno. Introducción al
No se requieren
conocimientos previos
de programación,
Lenguaje
solamente conceptos
Versión 1.0
generales de Internet y
operación en entornos
Windows. Miguel Puente
CUALQUIER SUGERENCIA O COMENTARIO
SOBRE ESTE MANUAL A
sistemas@bios.com.uy
i
Tabla de Contenido
TABLA DE CONTENIDO.........................................................................................................................................................................................2
INTRODUCCIÓN A INTERNET .............................................................................................................................................................................4
ORÍGENES DE LA RED DE REDES................................................................................................................................................................................4
EL WORLD WIDE WEB CONSORTIUM ........................................................................................................................................................................5
EL ENTORNO DE TRABAJO..................................................................................................................................................................................7
HERRAMIENTAS USADAS EN ESTE MANUAL ...............................................................................................................................................................7
Instalar IIS 5 .........................................................................................................................................................................................................7
Crear una Aplicación Web desde Visual Studio .NET .........................................................................................................................................10
Trabajar desconectado del Servidor Web............................................................................................................................................................13
Actualizar los archivos de un proyecto Web........................................................................................................................................................14
Creación del Proyecto.........................................................................................................................................................................................14
Conocer el nombre del servidor Web de Desarrollo ...........................................................................................................................................15
INTRODUCCIÓN AL LENGUAJE........................................................................................................................................................................17
¿QUÉ ES HTML? .....................................................................................................................................................................................................17
¿Para que sirven las marcas del lenguaje HTML?: ............................................................................................................................................17
¿Qué necesitamos para crear un documento HTML? .........................................................................................................................................17
Etiquetas HTML ..................................................................................................................................................................................................18
Estructura de un documento HTML ....................................................................................................................................................................18
Tipo de documento ..............................................................................................................................................................................................19
Atributos de las Etiquetas....................................................................................................................................................................................19
Según el browser con que se mire .......................................................................................................................................................................20
Browser Predeterminado ....................................................................................................................................................................................20
Agregar un browser a la lista de browsers..........................................................................................................................................................20
Mayúsculas o Minúsculas ...................................................................................................................................................................................20
Compatibilidad con versión del browser.............................................................................................................................................................22
Comentarios HTML.............................................................................................................................................................................................23
Cambiar el color de los elementos ......................................................................................................................................................................24
CABECERA DEL DOCUMENTO..........................................................................................................................................................................25
Título del documento...........................................................................................................................................................................................25
Descripción del contenido del documento...........................................................................................................................................................25
Palabras clave.....................................................................................................................................................................................................25
Autor de la página...............................................................................................................................................................................................25
Caducidad de la información de la página..........................................................................................................................................................26
Programa editor HTML ......................................................................................................................................................................................27
Indicador de refresco del documento ..................................................................................................................................................................27
Indicador de la URL base del documento............................................................................................................................................................27
CUERPO DEL DOCUMENTO ...............................................................................................................................................................................29
ATRIBUTOS DE LA ETIQUETA BODY: ......................................................................................................................................................................29
Márgenes del documento.....................................................................................................................................................................................29
Fondo del documento ..........................................................................................................................................................................................29
Color de fondo ....................................................................................................................................................................................................29
Colores del texto y de los hipervínculos ..............................................................................................................................................................30
Imagen de fondo..................................................................................................................................................................................................31
Imagen de fondo fija............................................................................................................................................................................................31
Párrafo................................................................................................................................................................................................................32
Salto de línea.......................................................................................................................................................................................................32
Sonido de fondo...................................................................................................................................................................................................32
Insertar video (sin controles) ..............................................................................................................................................................................33
Insertar video o sonido con controles..................................................................................................................................................................33
FORMATO DE TEXTO ..........................................................................................................................................................................................35
Caracteres especiales..........................................................................................................................................................................................39
Regla Horizontal .................................................................................................................................................................................................40
FUENTES..................................................................................................................................................................................................................41
FUENTE BASE...........................................................................................................................................................................................................41
Fuente .................................................................................................................................................................................................................41
ii
LISTAS ......................................................................................................................................................................................................................43
LISTAS DESORDENADAS ..........................................................................................................................................................................................43
Imagen como viñeta ............................................................................................................................................................................................43
LISTAS ORDENADAS ................................................................................................................................................................................................44
LISTAS DE DEFINICIÓN .............................................................................................................................................................................................44
HIPERVÍNCULOS...................................................................................................................................................................................................46
MARCADORES .........................................................................................................................................................................................................49
IMÁGENES...............................................................................................................................................................................................................51
Alineación de las imágenes .................................................................................................................................................................................53
Dimensiones de la imagen...................................................................................................................................................................................53
Formatos de archivos de gráficos .......................................................................................................................................................................53
MAPA DE IMAGEN ....................................................................................................................................................................................................54
Area rectangular .................................................................................................................................................................................................54
Area circular .......................................................................................................................................................................................................55
Area poligonal.....................................................................................................................................................................................................55
TABLAS ....................................................................................................................................................................................................................57
Estructura de una tabla.......................................................................................................................................................................................57
Filas con desigual número de celdas...................................................................................................................................................................59
Titular de la tabla................................................................................................................................................................................................59
Variando el espesor de los bordes.......................................................................................................................................................................60
Celdas de cabecera .............................................................................................................................................................................................60
Contenido de las celdas.......................................................................................................................................................................................61
Dimensiones de la tabla ......................................................................................................................................................................................62
Combinar celdas .................................................................................................................................................................................................63
Color de fondo en las tablas................................................................................................................................................................................64
Imágenes de fondo en las tablas..........................................................................................................................................................................66
Separación entre las celdas de una tabla ............................................................................................................................................................67
Separación entre el borde y el contenido dentro de las celdas ............................................................................................................................68
FRAMES....................................................................................................................................................................................................................69
Navegadores que no soportan frames .................................................................................................................................................................70
Crear Vínculos en Frames...................................................................................................................................................................................71
Atributos de la etiqueta FRAME .........................................................................................................................................................................72
FORMULARIOS ......................................................................................................................................................................................................76
GET.....................................................................................................................................................................................................................77
POST...................................................................................................................................................................................................................77
ASP asociada al formulario ................................................................................................................................................................................77
Campos del formulario........................................................................................................................................................................................77
Procesar el formulario ........................................................................................................................................................................................78
El objeto Request.................................................................................................................................................................................................79
Proceso de formulario enviado mediante GET....................................................................................................................................................79
Otros controles de formulario .............................................................................................................................................................................80
3
Capítulo
1
Introducción a Internet
Orígenes de la Red de Redes
I
nternet, como la conocemos en la actualidad, tiene sus orígenes en la década del sesenta, en los años
de la guerra fría, del temor nuclear y de la crisis de los misiles. Como tantas otras cosas en el ámbito
de las tecnologías de comunicación e información, como la telegrafía o los satélites, Internet surge en
el ámbito militar.
La idea fue crear una red digital de comunicaciones que siempre estuviera en funcionamiento debido a su
permanente temor de que algún ataque cortara sus comunicaciones. De esta manera, si una línea quedaba
fuera de servicio, los paquetes de información tendrían rutas alternativas para llegar a destino. El propósito
principal era desarrollar un conjunto de protocolos de comunicación que utilizasen conmutación de
paquetes y pudiesen utilizarse en redes de area extensa aun en el caso de pérdida de partes de las mismas.
Esta red sería desarrollada por DARPA (The Defense Advanced Research Projects Agency) en lo que se
conoció como “The DARPA Internet Program”.
En el año 1975, DARPA declara el proyecto como un éxito y delega su administración al Departamento de
Comunicaciones de Defensa de los Estados Unidos. En 1980 los protocolos TCP (Transmision Control
Protocol) e IP (Internet Protocol) ya eran una realidad y fueron desarrollados hasta convertirse en el actual
TCP/IP y adoptados por ARPANET, una red compuesta por cientos de computadoras pertenecientes a
universidades, centros de investigación militar y algunas compañías conectadas entre sí.
Las computadoras en ese entonces eran enormes y no eran accesibles al público en general. Se utilizaba
UNIX como sistema operativo y en especial una versión desarrollada por la Universidad de California en
Berkeley llamada BSD UNIX.
Para el año 1985 aparecen las Redes Locales de Computadoras Personales, lo que ayudó a completar la idea
de Internet. En ese momento ya existía la posibilidad de configurar redes y sub-redes, conectar redes de area
ancha (WAN) con redes locales (LAN).
Surge entonces “The Supercomputer Centers Program” iniciado por el NSF (The National Science
Foundation) cuyo propósito era hacer que los recursos llegaran al resto de los mortales.
4
Establecieron cinco grandes centros de computadoras en diferentes áreas de Estados Unidos y
construyeron una red que los unía a todos. La NSF basó sus protocolos de comunicación en los protocolos
de Internet y se originó lo que se conoció como NSFNET, que fue el corazón de Internet hasta el año
1995; en ese momento ya se encontraban disponibles el e-mail, ftp, telnet, gopher y otros servicios que
ofrece actualmente Internet.
En 1989 Tim Berners-Lee, científico del CERN (Conseil Européen pour la Recherche Nucléire – Consejo
Europeo de Investigación Nuclear), desarrolla el lenguaje de enlaces de hipertexto (HTML), que permite
establecer vínculos entre documentos, basado en la tecnología cliente/servidor..
En 1990 pudo montar un servidor local y elaborar un programa lector que le permitió, sólo en texto,
solicitar documentos bajo un nuevo protocolo llamado http (Hyper Text Transport Protocol) y
visualizarlos.
Mientras tanto, en la Universidad de Illinois donde funciona el NCSA (National Center for
Supercomputing Applications) otro grupo de desarrolladores encabezados por Marc Andreessen no se
conformaron con transportar solamente texto a través de este nuevo sistema y crearon un programa que
permitía leer e interpretar gráficos llamado NCSA Mosaic, el primer navegador de la historia, que hizo más
fácil el uso de Internet. Fue entonces cuando comenzó el boom del World Wide Web que atrajo a millones
de personas a la red.
Más tarde el mismo Marc Andreessen junto a Jim Clark, como socio, fundó en 1994 Netscape
Commucations y desarrolló nueva aplicación llamada Navigator, mejorando notablemente Mosaic original.
A partir de alli y en forma permanente se registran nuevas versiones de navegadores con nuevas
prestaciones.
En estas se van mejorando la calidad de las imágenes, se incorporaron animaciones, sonido, video e
interactividad en sorprendentes variantes.
Como podemos ver la comunidad de Internet no es nueva; al principio era dominada principalmente por
militares, científicos, investigadores y universidades; pero en la actualidad personas de diferentes países,
culturas e ideologías tienen un medio de comunicación virtual, accesible y rápido.
El organismo que establece los estándares de la Web como HTML, XML, etc. es el World Wide Web
Consortium (W3C), un organismo internacional de normalización, creado en 1994. Los integran
organizaciones de todo el mundo y profesionales de la informática de diferentes sectores que definen y
normalizan los lenguajes estándar usados en Internet, mediante recomendaciones que se publican
libremente en su sitio web (www.w3.org) y aprobadas por comités de expertos compuestos por integrantes
de la propia W3C y técnicos de compañías de desarrollo de software, distribuidoras y centros de
investigación como Intel, Microsoft, Sun, Netscape, Motorola, Novell, Oracle, Compact, IBM, Lotus, etc.
etc.
Ya sabe entonces que la referencia completa de cualquier versión HTML u otro lenguaje estándar de
Internet no esta en este manual ni en ningún libro sino en el sitio de W3C al cual por supuesto hay que
acudir para saber por ejemplo exactamente que etiqueta está disponible a partir de que versión de HTML,
cuales son sus atributos, etc., no obstante encontrará toda la información necesaria al respecto en la propia
documentación de Visual Studio .NET (Ayuda).
5
Capítulo
El Entorno de Trabajo
2
Como preparar el entorno y algunos conceptos básicos antes de trabajar con HTML desde Visual
Studio .NET
A pesar de no necesitar ningún editor ni herramienta de desarrollo en particular para trabajar con HTML,
usaremos para seguir este manual el entorno de desarrollo integrado (IDE) de Visual Studio .NET. Esto es
así pues el presente manual fue diseñado para desarrolladores .NET, que trabajarán con aplicaciones ASP
.NET. Desde este entorno podremos agregarle a las páginas script de cliente en JavaScript, crear páginas asp
.NET que accedan a bases de datos, trabajar con XML, valernos de la tecnología Intellisense que por
ejemplo sugiere una lista de posibles atributos o valores, etc., que nos facilitará gestionar de una forma
mucho mas sencilla tanto el diseño como la programación de una aplicación web en base a proyectos.
Usaremos entonces las herramientas HTML que este plantea o podremos si preferimos gestionar desde allí
el proyecto y abrir los documentos con otros editores HTML como Dreamweaver, Frontpage, etc.
Asumo entonces que para poder probar los ejemplos instará IIS 5 y Visual Studio .NET en ese orden sobre
Windows 2000 o XP (si es que también quiere trabajar con ASP .NET).
Instalar IIS 5
Como dijimos Internet Information Server 5 (o Services) es la versión necesaria para trabajar con ASP
.NET, que se incluye en todas las versiones de Windows 2000 o Windows XP y que usaremos en el
presente manual para poder crear Aplicaciones Web.
Si está instalado y el servicio de Publicación en World Wide Web e iniciado (se inicia por defecto al inicial el
Sistema Operativo) aparecerá lo siguiente:
7
H T M L - I N T R O D U C C I O N A L L E N G U A J E
Figura 1- página que se muestra al tipear http://localhost si esta instalado e iniciado el servicio de Publicación en WWW.
Figura 2- Se muestra el servicio de publicación en WWW (uno de los servicios de IIS) en Servicios dentro de Herramientas Administrativas del panel de control.
8
E L E N T O R N O D E T R A B A J O
Si observamos que IIS 5.0 no se encuentra instalado en nuestra máquina debemos ir al Panel de Control y
en la opción Agregar o quitar programas, seleccionamos Agregar o quitar componentes de Windows,
marcamos la opción, insertamos el disco de instalación de Windows y botón siguiente.
9
H T M L - I N T R O D U C C I O N A L L E N G U A J E
Al crear una Aplicación Web la copia Master se creará en el servidor Web que como dijimos no tiene por
que ser mi equipo de desarrollo y se ubicará en la raíz Web del mismo que por defecto al instalar IIS se crea
en c:\inetpub\wwwroot
Así que si por ejemplo creo una aplicación web llamada HTML la deberé buscar en
c:\inetpub\wwwroot\HTML
La copia Master u original es por supuesto la que se toma para contemplar la solicitud del usuario.
El directorio raíz o home del Servidor Web es configurable desde el Administrador de Servicios de Internet,
con botón derecho en Sitio Web Predeterminado.
Otra copia, la que corresponde al proyecto se ubica en el equipo de desarrollo y por defecto estará debajo
de la carpeta Proyectos de Visual Studio, que esta dentro de Mis documentos y que por supuesto varía
según el usuario logueado en el equipo, ya que se guarda con el perfil del usuario.
La ruta la encuentra en :
10
E L E N T O R N O D E T R A B A J O
Figura 7 – Explorador de soluciones mostrando una solución con 2 proyectos: un proyecto Web (HTML0) y una
biblioteca de clases.(ClassLibrary1)
Para abrir la solución desde el explorador de Windows basta hacer doble clic al archivo .sln, esto abre Visual
Studio .NET y carga la solución, o si el IDE ya esta abierto elegir abrir y levantar este archivo.
La ubicación donde puedo guardar mis proyectos de Visual Studio es configurable desde Herramientas –
Opciones – Proyectos y Soluciones, pudiendo crear una carpeta y guardarlos allí.
11
H T M L - I N T R O D U C C I O N A L L E N G U A J E
12
E L E N T O R N O D E T R A B A J O
Cuando se restaure la conexión, podrá sincronizar las carpetas. Visual Studio comparará los archivos de
aplicación locales con los almacenados en el servidor. Si Visual Studio encuentra diferencias entre los dos
conjuntos de archivos, solicitará que se corrijan las diferencias. El proceso de sincronización es
bidireccional, lo que significa que los cambios reflejados en los archivos del servidor pueden incorporarse al
directorio local.
13
H T M L - I N T R O D U C C I O N A L L E N G U A J E
Para desconectar un proyecto Web desde el menú Proyecto, haga clic en Proyecto Web y, a continuación,
seleccione Trabajar sin conexión, puede hacer lo mismo para volverse a conectar.
En el caso de encontrar versiones modificadas, por ejemplo por otro usuario que trabajo en el mismo sitio
mientras usted estaba desconectado, se presentara un cuadro de diálogo de conflicto de sincronización
ofreciéndose quedar con la versión local o la versión del servidor (master).
Para examinar las posibles diferencias entre los archivos de proyecto Web con conexión y sin
conexión en el menú Proyecto, haga clic en Proyecto Web y, a continuación, seleccione Comparar con el
Web maestro. El "Web Maestro" son los archivos del servidor.
Conviene tener en cuenta las diferencias existentes entre actualizar y sincronizar. Al actualizar los archivos,
se hace que los archivos del proyecto Web ubicados en el equipo de desarrollo (archivos locales) sean
idénticos a los archivos del servidor (archivos master); para ello, se copian los archivos en el equipo local o
se quitan los archivos que no existen en el servidor.
Al sincronizar, se comparan los archivos locales con los del servidor y se actualizan ambos conjuntos de
archivos con los cambios encontrados durante la comparación.
Para actualizar los archivos de un proyecto Web en la barra de herramientas del Explorador de
soluciones, haga clic en el botón Actualizar.
Ahora que sabe donde quedarán alojados los archivos cuando cree un proyecto Web, crearemos uno con la
opción Archivo-Nuevo proyecto-Proyecto Web Vacío.
Debemos seleccionar el nombre del servidor web (equipo que tiene instalado el servidor web, en nuestro
caso Internet Information Server) de ahora en mas IIS y el nombre que le daremos a nuestra aplicación
web.
14
E L E N T O R N O D E T R A B A J O
http://ServidorWeb/AplicacionWeb o
http://IPServidorWeb/AplicacionWeb
Para conocer el nombre del Servidor Web, por ejemplo en Windows 2000 hago lo siguiente:
Botón de Inicio de Windows– Ejecutar, esto muestra el cuadro de dialogo ejecutar y escribo cmd para
mostrar la consola de DOS.
15
H T M L - I N T R O D U C C I O N A L L E N G U A J E
la raíz o podemos ir pensando en organizar los diferentes elementos del proyecto en carpetas.
Figura 16 – opciones que se muestran con botón derecho- agregar en el explorador de soluciones, para agregar los
elementos mas comunes, nuevos o existentes.
16
Capítulo
Introducción al Lenguaje
3
¿Qué es HTML?
HTML (HyperText Markup Language), es un lenguaje de marcas, tags o etiquetas para la creación de
hipertextos.
Por hipertexto entendemos texto formateado, con inclusión de elementos multimedia (gráficos, video,
audio) y con la presencia de hipervínculos que permiten relacionar otras fuentes de información en
documentos hipertextos. Es el lenguaje utilizado para representar documentos en la WWW (World Wide
Web).
Es un lenguaje de marcas ya que en el las instrucciones son trozos de texto resaltados convenientemente
que definirán la estructura lógica del documento. Por tanto un documento HTML constará de texto que
será el contenido y la información del documento y de instrucciones HTML que resaltarán este contenido y
le darán un formato fácil y agradable de leer y con la posibilidad de relacionar documentos y fuentes de
información mediante hipervínculos.
• Un procesador de textos basado en ASCII para escribir y editar el código HTML. Este podrá ser
cualquiera que no formatee el texto como el bloc de notas y se deberá guardar el documento con
extensión .htm o .html.
• Un navegador Web (browser) como el Internet Explorer, Netscape, Mosaic, etc., el cual se
encargará del interpretar el código HTML formatear y mostrar nuestros documentos.
17
H T M L - I N T R O D U C C I O N A L L E N G U A J E
Figura 17- Ejemplo de página html creada con el bloc de notas y guardada con extensión .htm:
Lo que mostrará será solamente código HTML y SCRIPT de cliente (si es que la misma lo tiene), por
ejemplo en JavaScript, pero nunca podrá saber los códigos de servidor que pueden contener por ejemplo
páginas .PHP, .ASP, .JSP, ya que este se resuelve en el servidor web generando en algunos casos HTML.
Etiquetas HTML
El lenguaje HTML es un lenguaje de marcas, estas marcas serán fragmentos de texto destacado de una
forma especial que permiten la definición de las distintas instrucciones de HTML, tanto los efectos a aplicar
sobre el texto como las distintas estructuras del lenguaje. A estas marcas las denominaremos etiquetas (tags)
y serán la base principal del lenguaje HTML. El documento HTML será un fichero texto con etiquetas que
variarán la forma de su presentación.
Una etiqueta será un texto incluido entre los símbolos menor que (<) y mayor que (>).
Algunas etiquetas tienen etiqueta de inicio y cierre, en ese caso la etiqueta de fin contendrá el mismo texto
que la de inicio añadiéndole al principio una barra inclinada (/).
<P>esto es un párrafo</P>
Fuente 1 – etiqueta que tiene inicio y cierre afectando a lo contenido entre ellas, en este caso indicando la pertenencia al párrafo.
Un documento HTML está definido por una etiqueta de apertura <HTML> y una etiqueta de cierre
</HTML>.
Dentro de este se dividen dos partes fundamentales la cabecera, delimitada por la etiqueta
<HEAD></HEAD> y el cuerpo, delimitado por la etiqueta <BODY></BODY> .
18
I N T R O D U C C I Ó N A L L E N G U A J E
Tipo de documento
<HTML> inicio del documento
<HEAD>
...aquí va la cabecera del documento
</HEAD>
<BODY>
... aquí va el cuerpo del documento
</BODY>
</HTML> fin del documento
Tipo de documento
En el tipo de documento deberemos especificar a que estándar del HTML responde nuestra página.
<!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML 2.0//EN">
Fuente 3 - Cumple el estándar HTML 2.0
Las etiquetas pueden presentar modificadores que llamaremos atributos que permitirán definir diferentes
posibilidades de la etiqueta HTML. Estos atributos se definirán en la etiqueta de inicio y aunque existen
otras posibilidades consistirán normalmente en el nombre del atributo y el valor que se le asigna separados
por un signo de igual. o simplemente aparecen o no.
<HR noshade size="23">
Fuente 6 – muestra la etiqueta <HR > con el atributo noshade y el atributo size al que se le asigna el valor 23.
• Cuando el valor que toma el atributo contiene espacios deberá escribirse entre comillas, en otro
caso no será necesario.
<FONT face=”Times New Roman" size=2>Texto en Times New Roman y tamaño 2</FONT>
Fuente 7 - etiqueta FONT con 2 atributos: face con valor “Times New Roman” y size con valor 2.
Como el valor de face contiene espacios lo encerramos entre comillas y como el valor de size no tiene no es
necesario.
<FONT size=2 face=”Times New Roman">Texto en Times New Roman y tamaño 2</FONT>
Fuente 8 - como el orden de atributos no afecta el resultado final, esto es lo mismo que el fuente 4
19
H T M L - I N T R O D U C C I O N A L L E N G U A J E
El lenguaje HTML es un lenguaje que evoluciona muy rápidamente presentando nuevas versiones y cada
nueva versión de los programas navegadores se adapta con mayores funcionalidades pudiendo presentar
etiquetas que causan efectos más espectaculares o atributos nuevos de las etiquetas ya existentes. Esto causa
que los programas más antiguos no entiendan estas nuevas etiquetas y por tanto las considere erróneas y no
realice la acción que deseábamos. Dándose el caso de etiquetas o atributos que son validos solo para un
único navegador.
<BLINK> este texto parpadea solo en Netscape </BLINK>
Fuente 9 – ejemplo de etiqueta válida solo para Netscape.
Conviene por lo anteriormente mencionado tener mas de un browser instalado en la máquina de desarrollo
y probar como se ven en ellos los documentos, por lo menos Internet Explorer y Netscape.
Browser Predeterminado
La Figura 18 muestra el cuadro explorar con permitiendo seleccionar de una lista de exploradores.
Note que por defecto el browser predeterminado es el interno de Visual Studio pero podemos cambiarlo
por cualquier otro. El browser predeterminado es en el que se muestran los documentos cuando
seleccionamos la opción Ver en el Explorador.
Mayúsculas o Minúsculas
20
I N T R O D U C C I Ó N A L L E N G U A J E
Figura 22 – se sugiere para el atributo color hacer doble clic en los puntos suspensivos para seleccionar el valor del mismo de un cuadro de dialogo.
21
H T M L - I N T R O D U C C I O N A L L E N G U A J E
Por ejemplo para usar estilos CSS, debemos seleccionar un explorador Web compatible con HTML 4.0 o
posterior.. Si quiero la máxima funcionalidad debo elegir una compatibilidad con una versión de browser
mas nueva a costa de algunos usuarios pueden tener un browser mas antiguo que no interprete esas
etiquetas.
Podemos configurar el esquema de destino del documento desde la pagina de propiedades del mismo que
aparece con botón derecho propiedades
sobre un lugar vacío del mismo en la vista
HTML o Diseño.
22
I N T R O D U C C I Ó N A L L E N G U A J E
Comentarios HTML
23
H T M L - I N T R O D U C C I O N A L L E N G U A J E
24
Capítulo
En la cabecera de un documento HTML incluiremos las definiciones generales que afecten a todo el
documento.
A continuación vamos a tratar algunos de los posibles componentes que podemos incluir en la cabecera:
El título de nuestro documento es el texto que aparecerá en la ventana del browser. Lo recomendable es
que el título guarde relación con el contenido de nuestro documento, ya que es utilizado por algunos
motores de búsqueda para poder intuir el contenido de nuestro documento.
Sintaxis:
<META name=description content=”contenido del documento”>
Incluye una breve descripción del contenido del documento. Muchos buscadores usan el contenido de esta
etiqueta para incluir la pagina en sus bases de datos.
<META name=description content=”Dominar C# en 24 horas”>
Fuente 11 – descripción del contenido de la página que supuestamente nos va a decir como hacerlo en un día.
Palabras clave
Sintaxis:
<META name=keywords content=”palabra clave1, palabra clave2, ..>
Incluye una lista de palabras clave que identifican la pagina web en la base de datos de un buscador.
<META name=keywords content=”C#, OOP, programación”>
Fuente 12 – palabras clave de indización.
Autor de la página
Sintaxis:
25
H T M L - I N T R O D U C C I O N A L L E N G U A J E
Sintaxis:
<META HTTP-EQUIV=EXPIRES content="diasemana, día mes año hora (formato 24hs) zona
horaria(relativa a GMT)">
Indica a los exploradores y los motores de búsqueda el momento en que deben volver al sitio para obtener
una versión actualizada de la página.
De lo contrario el valor predeterminado es que la página no expira y el explorador usaría la versión guardada
en la caché del equipo cliente. Por el contrario si quiere que siempre se busque la versión del sitio asígnele
una fecha pasada..
<META http-equiv=expires content=”Wed, 24 Feb 2004 18:00:00 GMT-03:00”>
Fuente 14 – seteando la caducidad de la página.
←Figura 28 -
En Opciones-
del menú
Herramientas
de Internet
Explorer
seleccione
configuración
de Archivos
Temporales de
Internet
Figura 29 →-
Configurando
la caché de
Internet
Explorer
26
C A B E C E R A D E L D O C U M E N T O
Sintaxis:
Indica el número de segundos que deben pasar antes del refresco y el documento HTML que sustituye al
actual.
Si se indica cero segundos la transición será inmediata y si no se indica URL se refrescará el documento
actual.
La utilidad puede ser para documentos que cambien con una gran frecuencia y transcurrido un tiempo se
actualizarían, o documentos que deban ser vistos de forma secuencial, se empieza por un documento
pasando a los siguientes transcurrido un período de tiempo sin necesidad de acción alguna por parte del
lector.
También se suele usar cuando un sitio cambia de URL para su redirección automática.
<META HTTP-EQUIV="REFRESH" CONTENT="3;URL=pagina1.htm">
Fuente 16 – en este ejemplo se redirecciona a pagina1.htm luego de 3 segundos.
Sintaxis:
<BASE href="URL">
Con esta etiqueta indicamos la localización de los ficheros a los que se hace referencia en nuestra página
Web. Si no incluimos esta etiqueta ni indicamos una ruta completa el navegador asumirá que las URL que
figuren nuestra página Web son relativas al documento actual.
27
H T M L - I N T R O D U C C I O N A L L E N G U A J E
<html>
<head>
<base href="http://bios.edu.uy/cursos">
</head>
<body>
<a href=default.htm>cursos</a>
</body>
</html>
Fuente 17 – la URL del hipervínculo es http://bios.edu.uy/cursos/default..htm
28
Capítulo
En el cuerpo de un documento HTML es donde incluiremos las distintas instrucciones del lenguaje junto
con el contenido en sí de nuestra página Web: textos, imágenes, enlaces a otras páginas, etc..
La etiqueta BODY posee una serie de atributos que nos van a permitir definir las características del
documento en su conjunto, como por ejemplo los márgenes, el color del texto, o del color de fondo de
nuestra página web.
Sintaxis:
<BODY topmargin=”superior” bottommargin=”inferior” rigthmargin=”derecho”
leftmargin=”izquierdo” >
Color de fondo
Sintaxis:
<BODY BGCOLOR=”nombre color/valor hexadecimal”>
<BODY BGCOLOR=”yellow”>
Fuente 19 – documento con color de fondo amarillo usando el nombre del color
<BODY BGCOLOR="#FFFF00">
29
H T M L - I N T R O D U C C I O N A L L E N G U A J E
donde:
Los colores son seteados usando códigos de color RGB (red-green-blue) que se representan como valores
hexadecimales. Cada sección de 2 dígitos del código representa la cantidad de rojo, verde y azul, en ese
orden. Por ejemplo un color que comience con 00 indica la ausencia de rojo.
0123456789ABCDEF
Figura 31 – selector de color mostrando como se forma el rojo (ff para rojo que es el máximo, y oo el
mínimo para verde y azul)
#FF0000 - Rojo
#00FF00 - Verde
#0000FF - Azul
Otros colores son:
#FFFFFF - Blanco
#000000 - Negro
#FFFF00 - Amarillo
Así, el rojo #FF0000 se puede hacer más oscuro con #AA0000, o aún más oscuro con #550000.
Para hacer que un color tenga un tono más suave, se deben variar los otros dos colores haciéndolos más
claros (número más alto), en una cantidad igual. Así, podemos convertir el rojo en rosa con #FF7070.
30
C U E R P O D E L D O C U M E N T O
Imagen de fondo
Sintaxis:
<BODY background="imagen">
Hay que prever la posibilidad de que quien acceda a nuestra página haya deshabilitado la carga automática
de imágenes, conviene por lo tanto poner dentro de la etiqueta <BODY> los dos comandos
BACKGROUND y BGCOLOR, teniendo cuidado en escoger un color parecido al de la imagen.
Por ejemplo, supongamos que queremos poner como fondo la imagen nubes.jpg. Escogemos entonces un
color de fondo azul claro, (p. ej. #CCFFFF). La etiqueta quedaría así:
<BODY background="nubes.jpg" bgcolor="#CCFFFF">
Fuente 21 – insertando imagen de fondo y color previendo que el usuario deshabilite mostrar imágenes.
Esto tiene la ventaja adicional de que, incluso aunque no se deshabilite la carga automática de imágenes, al
cargar la página, lo primero que se ve es ese fondo de color uniforme, que luego es reemplazado por el de la
imagen.
31
H T M L - I N T R O D U C C I O N A L L E N G U A J E
Párrafo
Sintaxis:
Salto de línea
<BR>
<P>linea 1<BR>
línea 2 <BR>
</P>
Fuente 24 – etiqueta <BR> indicando un salto de párrafo
Sonido de fondo
Sintaxis:
<BGSOUND src="fichero de sonido" loop= n / infinite>
Con el atributo loop indicaremos el número de veces (n) que se reproducirá el sonido.
32
C U E R P O D E L D O C U M E N T O
Sintaxis
Si queremos que el usuario pueda iniciar, pausar o detener el video o el archivo de sonido:
sintaxis
33
Capítulo
Formato de texto
6
Varios de los formatos a aplicar al texto se encuentran en la barra de herramientas de formato, o en el menú
formato.
Encabezados
El texto puede tener unas cabeceras, comprendidas entre las etiquetas <H1> y </H1>, <H2> y </H2>,
etc. (hasta el número 6), siendo el número indicativo del tamaño. El tamaño mayor es el correspondiente al
número 1.
<H1>encabezado 1</H1>
Fuente 29 – encabezado 1 es el mayor
Negrita
<B>texto afectado</B>
o también
<STRONG>texto afectado</STRONG>
Cursiva
Subrayado
<U>texto afectado</U>
Tachado
<S>texto tachado </S>
Preformateado
<PRE>...</PRE>
35
H T M L - I N T R O D U C C I O N A L L E N G U A J E
Aparecerá como si hubiera sido escrito con una máquina de escribir, con una fuente de espaciado fijo (tipo
Courier). Además se respetarán los espacios en blanco y retornos del carro, tal como estaban en nuestro
documento HTML (lo cual no ocurre normalmente).
Maquina de escribir
<TT>...</TT>
Conseguimos también que el texto tenga un tamaño menor y la apariencia de los caracteres de una máquina
de escribir (typewriter). La diferencia con la anterior es que no preformatea el texto, sino que únicamente
cambia su apariencia.
Sangrias
<BLOCKQUOTE>...</BLOCKQUOTE>
Se utiliza para destacar una cita textual dentro del texto general.
Superíndices y Subíndices
Citas
<CITE></CITE>
Definiciones
<DFN></DFN>
Direcciones
<ADDRESS></ADDRESS>
Ejemplos de código
<CODE></CODE>
<SAMP></SAMP>
Variables o parámetros
<VAR></VAR>
36
F O R M A T O D E T E X T O
Marquesina
<MARQUEE>esto es una marquesina</MARQUEE>
Fuente 30 – marquesina desplazándose por defecto de derecha a izquierda
Los atributos WIDHT, HEIGHT ajustan la anchura y altura, respectivamente, de la marquesina. Pueden
ser iguales a un número de píxeles, o a un porcentaje de la pantalla.
<MARQUEE width=50% height=60> Esta marquesina ocupa el 50% del ancho de la
pantalla y tiene una altura de 60 píxeles </MARQUEE>
Fuente 31
behavior
Este atributo (que quiere decir en inglés comportamiento) sirve para definir de qué manera se va a efectuar
el desplazamiento del texto. Si es igual a SCROLL (el valor por defecto), el texto aparece por un lado, se
desplaza hasta el otro hasta desaparecer por él, y vuelve a empezar (como los casos que hemos visto
anteriormente). Si es igual a SLIDE, aparece por un lado y se desplaza hasta llegar al otro extremo, y se para
ahí. Si es igual a ALTERNATE se desplaza alternativamente hacia un lado y otro, siempre dentro de los
límites de la marquesina.
<MARQUEE behavior=alternate>Este texto se mueve a un lado y otro, sin
desaparecer</MARQUEE>
Fuente 32
bgcolor
Con este atributo se modifica el color de fondo de la marquesina, de acuerdo con el método visto en el
<MARQUEE bgcolor="#99ff33"> Esta marquesina tiene un color de fondo
verde</MARQUEE>
direction
Este atributo modifica hacia que lado va el texto, que por defecto es left , pero puede aceptar valores right,
up, down.
scrollamount
Define la cantidad de desplazamiento del texto en cada movimiento de avance, expresado en píxeles.
Cuanto mayor es el número, más rápido avanza. Ejemplo:
<MARQUEE scrollamount=20> avanzando de a 20 píxeles </MARQUEE>
Fuente 33
scrolldelay
Define el tiempo de espera entre cada movimiento de avance, expresado en milisegundos. Cuanto mayor es
el número más lento avanza.
37
H T M L - I N T R O D U C C I O N A L L E N G U A J E
hspace, vspace
Definen, respectivamente, la separación en sentido horizontal o vertical del texto que está fuera de la
marquesina.
Como a las demás etiquetas a una marquesina se le puede aplicar un estilo mediante el atributo style que
permite ampliar las posibilidades.
Si usted escribe style= se le ofrecerá generar un estilo con el generador de estilos, lo mismo desde la ventana
de propiedades.
38
F O R M A T O D E T E X T O
Caracteres especiales
Existen algunos códigos para poder escribir algunos caracteres y que se interpreten en todos los browsers.
< para < (less than, menor que)
> para > (greater than, mayor que)
& para & (ampersand)
" para " (double quotation)
Existen también códigos para escribir letras específicas de distintos idiomas. Los del castellano son las
vocales acentuadas, la ñ y los signos ¿ y ¡
Los códigos de las vocales acentuadas se forman comenzando con &, seguido de la vocal en cuestión, seguido de la palabra acute y terminando con el
signo ;
á para la á
é para la é
í para la í
ó para la ó
ú para la ú
Á para la Á
É para la É
Í para la Í
39
H T M L - I N T R O D U C C I O N A L L E N G U A J E
Ó para la Ó
Ú para la Ú
Regla Horizontal
<HR>
Nos permite insertar una regla horizontal, cuyo tamaño podremos determinar a través de sus atributos. Si
no especificamos ningún atributo dibujará una línea que ocupe el ancho de la pantalla del navegador. Su
utilidad es la de permitirnos dividir nuestra página en distintas secciones.
Sintaxis:
<HR align= left / right / center color=color noshade size=n width=n >
Noshade : No muestra la sombra de la línea, evitando el efecto de tres dimensiones haciendo la línea sólida.
width=n ó n%. Especificará el largo de la línea, este se podrá especificar en píxeles (n) o en tanto por
ciento del ancho de la ventana (n%).
Si quiere otros efectos por supuesto utilice como siempre style y el generador de estilos.
40
Capítulo
Fuentes
7
Fuente base
<BASEFONT face=Fuente size=tamaño color=color>
...
</BASEFONT>
Define la fuente base del documento o de un bloque dentro del documento. Luego partes del mismo deben
cambiarse con la etiqueta <FONT>.
El tamaño por defecto si no lo cambiamos con <BASEFONT> es 3 y la fuente Times New Roman.
<HTML>
<META name="vs_targetSchema"
content="http://schemas.microsoft.com/intellisense/ie5">
<BODY>
<BASEFONT face="Verdana" size="1" color="blue">
<P>párrafo 1</P>
<P>párrafo 2</P>
</BASEFONT>
</BODY>
</HTML>
Fuente 37 – cambiando la fuente base de todo el documento
<HTML>
<META name="vs_targetSchema"
content="http://schemas.microsoft.com/intellisense/ie5">
<BODY>
<BASEFONT face="Verdana" size="1" color="blue">
<P>párrafo 1</P>
<P>párrafo 2</P>
</BASEFONT>
<BASEFONT face="Arial" size="2" color="red">
<P>párrafo 3</P>
<P>párrafo 4</P>
</BASEFONT>
</BODY>
</HTML>
Fuente 38 – también se puede cambiar la fuente base varias veces en el documento
Fuente
<FONT face=fuente size=tamaño color=color style=estilo>
...
</FONT>
41
H T M L - I N T R O D U C C I O N A L L E N G U A J E
Por supuesto que color puede ser el nombre del color o el valor hexadecimal.
Tamaño puede ser un valor absoluto entre 1 y 7, relativo usando (+ o -) al size definido en <basefont> o
al valor 3 que es el predeterminado.
<HTML>
<META name="vs_targetSchema"
content="http://schemas.microsoft.com/intellisense/ie5">
<BODY>
<P>Times New Roman 3</P>
<FONT size="+1">
<P>Verdana 6 azul</P>
</FONT>
<FONT size="-2">
<P>Verdana 3 azul</P>
</FONT>
</BASEFONT>
</BASEFONT>
En el caso de que el tipo de letra que le hayamos especificado no esté cargada en el equipo que lee la página,
se usará el font por defecto del navegador.
42
Capítulo
8
Listas
Podemos escoger entre tres tipos distintos:
Listas desordenadas
sintaxis:
<UL type=”tipo de viñeta”>
<LI> elemento 1
<LI> elemento 2
<LI> elemento 3
<LI> elemento n
</UL>
Mediante el atributo style y generador de estilos puede por ejemplo definir una imagen como viñeta
<UL style="list-style-image:url(uno.jpg)">
<LI>uno</LI>
<LI>dos</LI>
43
H T M L - I N T R O D U C C I O N A L L E N G U A J E
<LI>tres</LI>
</UL>
Fuente 42 – lista que utiliza como viñeta una imagen
Listas ordenadas
Listas de definición
El tercer tipo lo forman las listas de definición. Como su nombre indica, son apropiadas para glosarios (o
definiciones de términos). Toda la lista debe ir englobada entre las etiquetas <DL> y </DL>. Y a
diferencia de las dos que hemos visto, cada renglón de la lista tiene dos partes: 1) el nombre del elemento a
definir , que se consigue con la etiqueta <DT> (definition term) y 2) la definición del elemento, que se
consigue con la etiqueta <DD> (definition definition). La definición de cada elemento aparece indentada
respecto del termino que define.
<DL>
<DT> elemento 1 a definir</DT>
<DD> definición del elemento 1</DD>
<DT> elemento 2 a definir</DT>
<DD> definición del elemento 2</DD>
<DT> elemento n a definir</DT>
<DD> definición del elemento n</DD>
</DL>
Fuente 44 – lista de definición donde cada definición aparecerá indentado respecto del termino que define.
44
45
H T M L - I N T R O D U C C I O N A L L E N G U A J E
Capítulo
9
Hipervínculos
Sintaxis:
Por supuesto que URL destino puede ser cualquier tipo de recurso, como una página web, una imagen, un
archivo .zip para descargar, un video para ver, etc. Para crear un hipervínculo, seleccione el texto o imagen a
la que va a añadir el hipervínculo. Luego selecciones Insertar | vínculo. Aparecerá un cuadro de dialogo
pidiendo el tipo de vínculo, es decir el protocolo (http,ftp,etc.) y la ubicación del archivo al que se quiere
vincular.
46
H I P E R V Í N C U L O S
Relativa al documento: ruta de acceso relativa basada en la ubicación del documento actual. Si se
especifica solo el nombre del recurso de destino sin especificar una ruta se asume que se encuentra en la
misma carpeta (por ejemplo, un hipervínculo escrito en la página tres.htm para que me lleve a cuatro.htm
seria solo cuatro.htm.
Si el recurso esta en una carpeta por debajo de la actual comience la ruta con el nombre de esa carpeta
<A href="dos/dos.htm">ir a pagina dos</A>
Fuente 47 – hipervínculo que lleva de la página uno.htm a la página dos.htm
Una vez definido el hipervínculo podemos cambiarlo en la vista HTML o con botón derecho propiedades
desde la property page del mismo.
Figura 39 – modificando un hipervínculo
47
H T M L - I N T R O D U C C I O N A L L E N G U A J E
Se pueden pasar varios parámetros y sus valores luego del signo ?, separados por el signo & (ampersand).
El siguiente ejemplo muestra además del destinatario, el asunto y el cuerpo del mensaje.
<a href="mailto:sistemas@bios.com.uy?subject=voto&body=nacional es el decano">voto
por nacional</a>
Fuente 52 – pasando parámetros
48
H I P E R V Í N C U L O S
El siguiente ejemplo muestra como incluir otros destinatarios cc (carbon copy) separados por (;)
<a href="mailto:sistemas@bios.com.uy?subject=voto&body=nacional es el
decano&cc=pepe@adinet.com.uy;juan@adinet.com.uy">voto por nacional</a>
Fuente 53 – usando el parámetro cc para incluir varios destinatarios
Marcadores
<A name="nombre marcador">Texto o imagen</a>
Un marcador es una marca en un texto o imagen del documento (destino), a la cual pueda saltar desde otro
lugar del mismo documento o de otro distinto mediante un hipervínculo (origen). Para ello se crea primero
49
H T M L - I N T R O D U C C I O N A L L E N G U A J E
el marcador y luego desde otro texto o imagen un hipervínculo a ese marcador. Un ejemplo de su uso
puede ser marcar cada capítulo de un manual y luego desde la tabla de contenido al comienzo del mismo
generar hipervínculos que apunten a cada uno de ellos.
Para crear un marcador seleccione el texto y luego Insertar-Marcador, luego dele un nombre al mismo y
aceptar.
Luego seleccione el texto que quiere vincular al marcador e Insertar | vinculo, escriba o seleccione el
nombre de la página en la que se encuentra el marcador y escriba el nombre del mismo precedido del signo
(#).
Si el marcador y el hipervínculo están en la misma página asígnele al atributo href solamente el nombre del
marcador precedido del signo (#)
<a href="#introduccion>introducción al HTML</a>
Fuente 57 – hipervínculo que apunta a un marcador que esta en la misma página
50
Capítulo
Imágenes
10
<IMG src=URLimagen alt=”texto alternativo” width=ancho height=alto>
Para agregar una imagen a un página Web primero agréguela al proyecto. Para ello botón derecho en esta
carpeta en el explorador de proyectos y agregar elemento existente y seleccione la imagen desde su
ubicación, o simplemente cópiela desde el explorador de Windows o desde un documento abierto y péguela
en el explorador de soluciones. Recuerde que también puede copiar y mover elementos en el explorador de
soluciones como lo hace con el explorador de Windows. Una vez agregada al proyecto basta con arrastrar la
misma a la página para agregarla:
<img src="mi mail.gif" width="170" height="64">
Fuente 58 – el tag que inserta la imagen mi mail.gif en la página
Después de insertar una imagen, se pueden cambiar sus propiedades. Para mostrar el cuadro de diálogo
Páginas de propiedades de IMG, seleccione una imagen en la vista Diseño o coloque el punto de inserción
dentro de la etiqueta <IMG> y, a continuación, elija Páginas de propiedades en el menú Ver.
Alineación
51
H T M L - I N T R O D U C C I O N A L L E N G U A J E
Opción Alinea
La base del texto es la línea donde descansan casi todas las letras del alfabeto excepto algunas como la p, la g
o la j.
Para habilitar las propiedades Absmiddle, Baseline, Absbottom y Texttop deberá establecer la propiedad
targetSchema del documento HTML en un explorador Web compatible con HTML 4.0 o superior.
Especifica el espacio horizontal entre los lados izquierdo y derecho de la imagen y el texto circundante. El
valor predeterminado es cero píxeles.
Especifica el espacio vertical entre los lados superior e inferior de la imagen y el texto circundante. El valor
predeterminado es cero píxeles.
52
I M Á G E N E S
Si se quiere interrumpir el proceso de rellenado del texto a los lados de la imagen, para que salte
hasta debajo de ella dejando un espacio en blanco, se pueden usar lo siguiente:
Dimensiones de la imagen
Los programas navegadores cuando cargan un documento HTML y encuentran una etiqueta de
una imagen, interrumpen el proceso de carga y solicitan al servidor que le envíe dicha imagen,
quedando a la espera hasta que se complete el envío, repitiéndose este proceso con cada una de las
imágenes.
Indicando al navegador cuáles son las dimensiones de todas las imágenes en píxeles width (ancho) y
height (alto) , hace que este actúe de una forma más favorable, ya que entonces, como conoce las
dimensiones de las imágenes les reserva un espacio en la pantalla y va colocando el texto de forma
apropiada, sin ninguna interrupción, a la vez que va rellenando esos espacios reservados a las
imágenes.
<IMG src="logo.gif" width=50 height=50>
Fuente 61 – indicando al browser las dimensiones de la imagen logo.gif
Los archivos BMP no suelen comprimirse, son de mucho tamaño y por lo tanto no hay que usarlos
para páginas Web.
53
H T M L - I N T R O D U C C I O N A L L E N G U A J E
GIF es un formato común de las imágenes que aparecen en páginas Web. Los archivos GIF se
usan en imágenes que dibujan líneas, imágenes con bloques de color sólido o con límites definidos
entre colores, por lo tanto no hay que usarlos en escenas naturales. Se comprimen sin perder
infamación.
En un archivo GIF se puede especificar un color como transparente, de forma que la imagen tenga
el color de fondo de cualquier página Web en la que se muestre. Una secuencia de imágenes GIF
puede almacenarse en un único archivo para formar un GIF animado. Los archivos GIF almacenan
como máximo 8 bits por píxel, por lo que se limitan a 256 colores. Podemos también seleccionar
el número de colores a usar y reducir enormemente el tamaño de la imagen.
JPEG es un esquema de compresión que se usa para imágenes que muestren escenas naturales
como fotografías escaneadas. Durante el proceso de compresión se pierde algo de información,
pero la pérdida suele ser imperceptible para el ojo humano. Los archivos JPEG almacenan 24 bits
por píxel, por lo que son capaces de mostrar más de 16 millones de colores.
Los archivos JPEG no admiten transparencia ni animación.
El nivel de compresión de las imágenes JPEG puede configurarse, pero cuanto mayor sea el nivel
de compresión (archivos más pequeños), mayor será la pérdida de información. Una razón de
compresión de 20:1 suele generar una imagen que el ojo humano apenas distingue de la imagen
original.
Los archivos JPEG no hay que usarlos para imágenes que dibujan líneas, bloques de color sólido o
límites definidos pues tienden a difuminarlos, para ello use un GIF.
Mapa de imagen
Un mapa de imágenes es una imagen dividida en regiones rectangulares, circulares o poligonales que actúan
como hipervínculos, de tal forma que cuando el usuario haga clic en una de ellas lo lleve a una URL
diferente de otra página, imagen, etc o a un marcador.
Area rectangular
Si las áreas son rectángulos se le asigna al atributo shape=rect y se requieren cuatro coordenadas x1,y1
para el primer punto y x2,y2 para el segundo, teniendo en cuenta que la coordenada 0,0 correspondería al
vértice superior izquierdo de la imagen.
<map name="FPMap0">
<area href="uno.htm" shape="rect" coords="0, 0, 20, 20">
<area href="dos.htm" shape="rect" coords="40, 0, 60 ,20">
</map>
54
I M Á G E N E S
Area circular
Si las áreas son circulares se le asigna al atributo shape=circ y requiere tres coordenadas centroX, centroY y
Radio
<map name="FPMap0">
<area href="uno.htm" shape="circ" coords="20, 20, 10">
<area href="dos.htm" shape="circ" coords="20, 50, 10">
</map>
<IMG src="Abanicos.bmp" align="textTop" usemap="#FPMap0" width="160" height="160">
Fuente 63 – ejemplo de mapa de imágenes con áreas circulares
Area poligonal
Si las áreas son poligonales requiere tres o mas pares de coordenadas x,y por cada punto
<map name="FPMap0">
<area href="contents.htm" shape="POLY" coords="20,10,70,30,20,90">
</map>
<IMG src="Abanicos.bmp" align="textTop" usemap="#FPMap0" width="200" height="200">
Fuente 64 – ejemplo de mapa de imágenes con áreas circulares
55
Capítulo
Tablas
11
Seleccionar de la página de propiedades del documento Internet Explorer 5.0 para habilitar todas las
opciones de tablas.
Vamos a ver ordenadamente (de fuera hacia dentro) las etiquetas necesarias para confeccionar las tablas.
<TABLE>
<TR>
<TD>nombre</TD>
<TD>apellido</TD>
</TR>
<TR>
<TD>Luis</TD>
<TD>Gomez</TD>
</TR>
<TR>
<TD>marta</TD>
<TD>Sears</TD>
57
H T M L - I N T R O D U C C I O N A L L E N G U A J E
</TR>
</TABLE>
Fuente 65 – ejemplo de tabla
Nombre Apellido
Luis Gómez
Marta Suárez
Con esto se presentarían los datos tabulados, pero faltaría la característica que hace más atractivas a las
tablas, y es que estos datos vayan dentro de bordes. Para esto tenemos que añadir el atributo BORDER a la
etiqueta:
<TABLE border=1>
<TR>
<TD>nombre</TD>
<TD>apellido</TD>
</TR>
<TR>
<TD>Luis</TD>
<TD>Gomez</TD>
</TR>
<TR>
<TD>marta</TD>
<TD>Suarez</TD>
</TR>
</TABLE>
Fuente 66 – tabla con border=1
nombre apellido
Luis Gómez
marta Suárez
58
T A B L A S
En este ejemplo hemos puesto dos filas con igual número de celdas. ¿Qué pasa si ese número es
distinto? Pues el navegador forma el número de filas y columnas que haga falta, dejando espacios en
blanco en las filas que tengan menos celdas.
<TABLE border=1>
<TR>
<TD>nombre</TD>
<TD>apellido</TD>
</TR>
<TR>
<TD>Luis</TD>
<TD>Gomez</TD>
</TR>
<TR>
<TD>marta</TD>
</TR>
</TABLE>
Fuente 67 – tabla con desigual numero de celdas
que mostraría:
nombre apellido
Luis Gómez
marta
Titular de la tabla
Se puede añadir un titular (caption) a la tabla, es decir un texto situado encima de la tabla que indica cuál es
su contenido. Se consigue con la etiqueta <CAPTION> y </CAPTION>.
<TABLE border=1>
<CAPTION> Ejemplo de filas desiguales </CAPTION>
<TR>
<TD>nombre</TD>
<TD>apellido</TD>
</TR>
<TR>
<TD>Luis</TD>
<TD>Gomez</TD>
</TR>
<TR>
<TD>marta</TD>
</TR>
</TABLE>
Fuente 68 – tabla con un titular
que mostraría:
59
H T M L - I N T R O D U C C I O N A L L E N G U A J E
nombre apellido
Luis Gómez
marta
El atributo BORDER (visto más arriba) pone por defecto un borde de espesor igual a la unidad. Pero se
puede hacer que este borde sea tan grueso como queramos, poniendo:
nombre Apellido
Luis Gómez
marta
Celdas de cabecera
Además de las celdas que contienen datos normales, podemos poner, si nos conviene, celdas de cabecera
(header), que se distinguen por estar el texto de dichas celdas en negrita y centrado.
Esto se consigue con la etiqueta <TH> y </TH> (en vez de la normal <TD> y </TD>)
Vamos a añadir, en el ejemplo anterior, una fila de estas celdas de cabecera, antes de las otras dos que ya
existían:
<TABLE border=5>
<CAPTION> Ejemplo de filas desiguales </CAPTION>
<TR>
<TH>nombre</TH>
<TH>apellido</TH>
60
T A B L A S
</TR>
<TR>
<TD>Luis</TD>
<TD>Gomez</TD>
</TR>
<TR>
<TD>marta</TD>
</TR>
</TABLE>
Fuente 69 – tabla con celdas de cabecera
que mostraría:
nombre Apellido
Luis Gómez
marta
Hasta ahora, en todos los ejemplos se ha puesto un texto normal dentro de las distintas celdas. Pero se
puede poner en ellas cualquier otro elemento de los que van en un documento HTML, como imágenes,
enlaces, etc. No hay más que poner dentro de la etiqueta de la celda la etiqueta correspondiente a una
imagen, un enlace, etc.
Normalmente, el contenido de una celda está alineado a la izquierda. Pero se puede cambiar esto
añadiendo dentro de la etiqueta de la celda los siguientes atributos:
<TD ALIGN=CENTER> Al centro </TD>
<TD ALIGN=RIGHT> A la derecha </TD>
<TH ALIGN=LEFT> Cabecera a la izquierda </TH> (Recuérdese que por defecto están centradas)
<TABLE border=5>
<CAPTION> Ejemplo de filas desiguales </CAPTION>
<TR>
<TH>nombre</TH>
<TH>apellido</TH>
</TR>
<TR>
<TD align=left>Luis</TD>
<TD align= right>Gomez</TD>
</TR>
<TR>
<TD align=center>Marta</TD>
61
H T M L - I N T R O D U C C I O N A L L E N G U A J E
</TR>
</TABLE>
Fuente 70 – cambiando la alineación horizontal de algunas celdas
que mostraría:
nombre Apellido
Luis Gómez
marta
El alineamiento por defecto en el sentido vertical es en el medio. También se puede cambiar, añadiendo
dentro de la etiqueta de la celda los siguientes atributos:
<TABLE border=1>
<TR>
<TD valign=top align=left>Arriba izquierda</TD>
<TD valign=bottom align=right>Abajo derecha</TD>
</TR>
</TABLE>
Fuente 71 – definiendo la alineación horizontal y vertical de algunas celdas
se mostraría:
Dimensiones de la tabla
El navegador se encarga normalmente de dimensionar el tamaño total de la tabla de acuerdo con el número
de filas, de columnas, por el contenido de las celdas, espesor de los bordes, etc.
A veces nos puede convenir forzarle para que la tabla tenga unas dimensiones totales mayores que las
que le corresponden, tanto en anchura como en longitud. Esto se consigue añadiendo dentro de la etiqueta
de la tabla los atributos WIDTH y HEIGHT igual a un porcentaje de la dimensión de la pantalla, o a una
cifra que equivale al número de píxeles.
62
T A B L A S
se mostraría:
Combinar celdas
A veces puede interesarnos que una celda se extienda sobre otras varias. Esto se consigue añadiendo
dentro de la etiqueta de la celda los atributos COLSPAN=número para extenderse sobre un número
determinado de columnas, o ROWSPAN=número para extenderse verticalmente sobre un número
determinado de filas.
<TABLE border=1 width=90% height=100>
<TR>
<TD colspan=3></TD>
</TR>
<TR>
<TD></TD>
<TD></TD>
<TD></TD></TR>
<TR>
<TD></TD>
<TD></TD>
<TD></TD></TR>
</TABLE>
Fuente 73-la celda de la primer fila se expande 3 columnas
se mostraría:
63
H T M L - I N T R O D U C C I O N A L L E N G U A J E
<TR>
<TD></TD>
<TD></TD>
</TR>
<TR>
<TD></TD>
<TD></TD>
</TR>
</TABLE>
Fuente 74- una celda que se expande 3 filas
que mostraría:
Se puede conseguir:
Que la totalidad de la tabla tenga un color de fondo. Para ello, colocamos el atributo dentro de la etiqueta
TABLE. Por ejemplo, vamos a hacer que la tabla tenga un fondo verde (#00FF00):
<TABLE BGCOLOR="#00FF00" border=1 width=90% height=100>
<TR>
<TD rowspan=3></TD>
<TD></TD>
<TD></TD>
</TR>
<TR>
<TD></TD>
<TD></TD>
</TR>
<TR>
<TD></TD>
<TD></TD>
</TR>
</TABLE>
Fuente 75 – definiendo el color de fondo de una tabla
Que resulta:
64
T A B L A S
Podemos hacer que solamente una celda determinada tenga un color de fondo . Para ello, colocamos el
atributo dentro de la etiqueta de la celda correspondiente. Por ejemplo, vamos a hacer que sólo la celda 1 de
la fila 1 tenga un color verde:
<TABLE border=1 width=90% height=100>
<TR>
<TD BGCOLOR="#00FF00" rowspan=3></TD>
<TD></TD>
<TD></TD>
</TR>
<TR>
<TD></TD>
<TD></TD>
</TR>
<TR>
<TD></TD>
<TD></TD>
</TR>
</TABLE>
Fuente 76 – color de fondo solo para una celda
Que resulta:
Que la generalidad de las celdas tenga un color, pero que alguna celda tenga uno particular. El atributo del
color general se coloca en la etiqueta TABLE, y el del color particular en la etiqueta de la celda en cuestión
(una combinación de los dos casos anteriores). por ejemplo, vamos a hacer que la generalidad de la tabla
sea de color rojo (#FF0000), pero que la celda 1 de la fila 1 sea de color verde (#00FF00):
<TABLE bgcolor=#FF0000 border=1 width=90% height=100>
<TR>
<TD BGCOLOR="#00FF00" rowspan=3></TD>
<TD></TD>
<TD></TD>
</TR>
<TR>
65
H T M L - I N T R O D U C C I O N A L L E N G U A J E
<TD></TD>
<TD></TD>
</TR>
<TR>
<TD></TD>
<TD></TD>
</TR>
</TABLE>
Fuente 77 – definiendo el color de la tabla y de una celda
Que resulta:
Si se utiliza dentro de la etiqueta <TABLE> la imagen en cuestión se multiplicará detrás de todas las celdas.
Si, por el contrario, sólo se pone este atributo dentro de la etiqueta de una celda concreta (<TD> o <TH>),
entonces la imagen de fondo se verá sólo en esa celda, como por ejemplo:
<TABLE border border=1 width=90% height=100>
<TR>
<TD BACKGROUND ="images/terrasamba1.bmp" rowspan=3></TD>
<TD></TD>
<TD></TD>
</TR>
<TR>
<TD></TD>
66
T A B L A S
<TD></TD>
</TR>
<TR>
<TD></TD>
<TD></TD>
</TR>
</TABLE>
Fuente 79 – imagen de fondo para una celda
Por supuesto que al igual que hicimos con los colores podemos poner una imagen de fondo para toda la
tabla y cambiar para una celda en particular.
Hay que tener en cuenta que al igual que pasa con el documento si el usuario al navegar deshabilita mostrar
imágenes estas no se verán por lo tanto podemos poner para ese caso también un color de fondo.
Por defecto, la separación entre las distintas celdas de una tabla es de dos píxeles. Pero se puede variar esto
con el atributo CELLSPACING, que se pone dentro de la etiqueta TABLE.
Por ejemplo, para obtener una separación de 10 píxeles entre celdas ponemos:
<TABLE cellspacing=10 border=1 width=90% height=100>
<TR>
<TD></TD>
<TD></TD>
<TD></TD>
</TR>
<TR>
<TD></TD>
<TD></TD>
</TR>
<TR>
<TD></TD>
<TD></TD>
</TR>
</TABLE>
Fuente 80 – separación entre las celdas de una tabla
67
H T M L - I N T R O D U C C I O N A L L E N G U A J E
Por defecto, la separación entre el borde y el contenido dentro de las celdas es de un píxel. Se puede
cambiar esto con el atributo CELLPADDING, que se pone dentro de la etiqueta TABLE.
Por ejemplo, para obtener una separación de 20 píxeles entre el contenido y los bordes, dentro de cada
celda:
fila1-celda1 fila1-celda2
fila2-celda1 fila2-celda2
Por ejemplo, una tabla con bordes de 5 de espesor, separación entre celdas de 15 y separación del contenido
con respecto a los bordes de las celdas de 20, lo obtendríamos con:
<TABLE BORDER=5 CELLSPACING=15 CELLPADDING=20>
(Se omite el resto de las etiquetas de la tabla)
fila1-celda1 Fila1-celda2
fila2-celda1 Fila2-celda2
68
Capítulo
12
Frames
Los frames se utilizan para dividir la pantalla en diferentes ventanas. Cada una de estas ventanas se puede
ahora manejar por separado y nos permite mostrar en cada una de ellas un página Web diferente.
Las páginas web que usan frames incluyen dos elementos principales:
Esta página contiene los tags necesarios para implementar cada frame en una página, con referencias a las
páginas html que se visualizarán en cada frame.
Cada frame en una página contiene su propia página source html la cual visualiza.
1. Cree una página HTML source a visualizar en cada frame en la página Web principal. Estas páginas
pueden contener cualquier etiqueta HTML.
2. Crear una página HTML principal que es la que abren los usuarios, que contiene tags <HTML> y
<HEAD> pero no una etiqueta <BODY>
3. En el area de la página que normalmente contiene el tag <BODY> agregue un tag <FRAMESET> por
cada grupo de frames.
4. Por cada frame en la página, agregue un tag <FRAME>, y setee el atributo SRC (Source) al nombre de la
página HTML que debe aparecer en el frame.
el siguiente ejemplo crea en una página llamada default.htm dos frames verticales llamados contenido y
principal, en el primero se muestra la página contenido.htm y en el segundo principal.htm. El primer frame
tendrá la mitad del ancho del segundo:
<frameset cols="*,2*">
<frame name="contenido" src="contenido.htm">
<frame name="principal" src="principal.htm">
</frameset>
Fuente 81- se definen 2 frames llamados contenido y principal en columnas
<frameset rows="*,2*">
69
H T M L - I N T R O D U C C I O N A L L E N G U A J E
El atributo COLS define frames verticales, y ROWS define frames horizontales. En caso de usar rows los
tamaños de los frames se indican de arriba a abajo, es decir el primer valor es asignado al frame superior, el
segundo a la inmediatamente inferior, etc. En caso de usar cols los tamaños se aplican de izquierda a
derecha.
Se puede especificar tamaños de los frames en píxeles, porcentajes o tamaños relativos. En el siguiente
ejemplo se define un frame horizontal, el tamaño del primer frame es de 120 píxeles, el tercero es del 20 %
del total y el segundo frame ocupa el resto del alto (*).
<FRAMESET ROWS="120,*,20%">
En este otro ejemplo "anidamos" dos directivas frameset: la primer directiva divide la ventana principal en
dos frames verticales; la primera ocupa un 15% de la ventana principal y la segunda el resto. La segunda
directiva vuelve a dividir el primer frame creado anteriormente , pero esta vez en dos frames horizontales, la
superior ocupa un 20% del frame y la otra el resto.
<frameset cols="15%,*">
<frameset rows="20%, *">
<frame src="logo.htm" name="logo">
<frame src="contenido.htm" name="contenido">
</frameset>
<frame src="principal.htm" name="principal">
</frameset>
Fuente 83 – anidando conjunto de marcos
<frameset cols="20%,*">
<frame name="contenido" src="contenido.htm">
<frameset rows="15%,*">
<frame name="logo" src="logo.htm">
<frame name="principal" src="principal.htm">
</frameset>
</frameset>
Fuente 84-otro ejemplo de conjunto de marcos anidados
No todos los navegadores soportan frames. Si quiere tener en cuenta a estos usuarios puede incluir el tag
<NOFRAMES>
<HTML>
<HEAD>
</HEAD>
<FRAMESET cols="150,*">
<FRAME name="contents" src="">
<FRAME name="main" src="">
<NOFRAMES>
<P>
<!--solo para aquellos navegadores que no soporten frames-->
70
F R A M E S
Cuando un usuario hace clic en un vínculo que se encuentra en un frame, la página vinculada se carga por
defecto en ese frame.
Cuando usted crea un hipervínculo, puede elegir donde debe ser cargada cada página usando el tag
TARGET del tag <A HREF=></A>.
71
H T M L - I N T R O D U C C I O N A L L E N G U A J E
También se puede especificar una localización por defecto para cargar todos los
vínculos de una página, para eso se usa el tag <BASE>. Por ejemplo la siguiente línea
incluida en la página contenido.htm indica que todos los vínculos incluidos en ella
Si se desea que no haya un borde de separación entre los frames, se deben incluir el atributo
FRAMEBORDER=0 dentro de la etiqueta FRAMESET. No todas las versiones de los navegadores lo
implementan.
Para que también desaparezcan los huecos de separación entre frames hay que añadir otros dos atributos (el
primero es para el Explorer y el segundo para el Netscape): FRAMESPACING=0 y BORDER=0. con lo
que la etiqueta completa quedaría:
Esta etiqueta define las cararacterísticas de un frame concreto, no del conjunto de los frames, como era el
caso con la etiqueta <FRAMESET>. Puede tener los siguientes posibles atributos, que van dentro de la
etiqueta <FRAME>:
SRC="dirección". Esta dirección puede ser la de un documento HTML (tal como hemos utilizado en el
ejemplo), o cualquier otro recurso del Web (o URL). Con este atributo se indica lo que se cargará
inicialmente en el frame.
Si no se le pone este atributo a la etiqueta <FRAME>, entonces dicho frame aparecerá inicialmente vacío,
aunque tendrá las dimensiones asignadas.
72
F R A M E S
SCROLLING="yes|no|auto". Este atributo se utiliza para decidir si el frame tendrá o no una barra
deslizadora. Si se escoge "yes" tendrá siempre una barra deslizadora. Si se escoge "no" no la tendrá nunca, y
si se escoge "auto", será el navegador quien decida si la tendrá o no. Este atributo es opcional. Su valor por
defecto es "auto".
NORESIZE. A este atributo no se le asigna un valor numérico, como a los demás. Es un indicador para
que la ventana no se pueda re-dimensionar (en inglés, resize) por parte del usuario. Se puede comprobar en
el ejemplo con frames que si se coloca el cursor del ratón entre los dos frames, al pulsarlo y arrastrarlo en un
sentido u otro, varían las dimensiones prefijadas de los frames. Este atributo impide que ocurra esto en un
frame. Es un atributo opcional. Por defecto, todos los frames son re-dimensionables.
FRAMEBORDER="no". Este atributo elimina el borde en un frame, pero si se quiere que se elimine
completamente, también hay que ponérselo al frame contiguo. Si se quiere eliminar los bordes de todos los
frames, se debe colocar en la etiqueta FRAMESET, como hemos visto anteriormente.
Los marcos se puedes agregar desde agregar nuevo elemento en el explorador de soluciones:
73
H T M L - I N T R O D U C C I O N A L L E N G U A J E
74
75
Capítulo
Formularios
13
Una de las vías para obtener información de un usuario y enviar esta a un servidor web es usar un
formulario html. Un formulario html contiene controles standard html; estos controles son soportados por
todos los navegadores, incluye cuadros de texto, botones de comando, botones de opción, casillas de
verificación listas y otros.
Los formularios pueden contener cualquier elemento html excepto otro formulario. Usted puede agregar
más de un formulario a una página. Los formularios empaquetan los nombres y valores de cada control y
los envían a la localización especificada, generalmente una página asp para ser procesado.
Las páginas ASP se pueden utilizar para recoger y procesar valores de formularios HTML de varias
maneras:
•Una página .htm puede contener un formulario que envíe sus valores a una
página ASP.
•Una página ASP puede contener un formulario que envíe información a otra página ASP.
•Una página ASP puede contener un formulario que envíe información así misma, es decir, a la página ASP
que contiene el formulario, en cuyo caso comúnmente se le llama página reentrante pues el formulario y el
proceso del mismo están en la misma página.
La etiqueta <FORM> permite la creación de formularios, y posee entre otros dos atributos fundamentales:
method y action:
sintaxis:
<FORM action="URL DE LA ASP QUE LO PROCESA" method="METODO DE ENVIO">
<!--aquí van los controles que forman parte del formulario-->
</FORM>
Método de envío de datos al servidor
El atributo method permite especificar la manera como los datos se envían desde el navegador del cliente al
servidor para ser procesados. Puede tomar dos valores GET y POST.
Una vez enviada la información al servidor debe ser extraída y decodificada a un formato útil para poder ser
tratada, pero esto no supone ningún problema ASP realiza esta tarea a través de sus dos colecciones: Form
y QueryString. Estas dos colecciones contienen la información de los formularios enviados por el usuario a
través de su navegador cliente. La colección Form se utiliza cuando el formulario se envía con el método
POST y la colección QueryString cuando se envía con el método GET.
76
F O R M U L A R I O S
GET
En esta caso se envía la información al servidor al final del URL de la asp que procesa el formulario, como
si la hubiésemos escrito al final del mismo utilizando la siguiente sintaxis:
URLasp?Parámetro1=valor1&Parámetro2=valor2&....ParámetroN=valorN
Cuando los datos lleguen al servidor este examinará el URL y colocará los parámetros que siguen al URL en
una variable de entorno llamada QUERY_STRING.
POST
En este caso la información se envía separadamente al servidor, no incluida en el URL de la página asp.
Este método es el más común y potente, entre otras porque no existe ningún tipo de limitación sobre la
cantidad de información que puede mandarse. Como en el caso de GET la información se almacena en una
variable, puede que no haya lugar para demasiada información ya que el máximo es de 1024K. Sin embargo
la utilización del método GET muchas veces es útil para a través de un enlace pasar parámetros sin la
necesidad de utilizar botones de tipo submit de formularios o incluso ni siquiera utilizar un formulario.
El atributo ACTION contiene el URL de la asp que procesará en el servidor los datos obtenidos desde el
formulario. Por ejemplo si la página que procesa un formulario es procesa.asp y método de envío POST
tendríamos la siguiente definición:
<FORM action=procesa.aspx method=POST>
<!--aquí van los controles que forman parte del formulario-->
</FORM>
Es importante asegurarse que los controles html que forman el formulario estén contenidos entre las
etiquetas <FORM></FORM> de lo contrario no formarían parte del formulario y por lo tanto sus valores
no serían enviados al servidor.
En tal sentido puede escribir todos los tags o arrastrarlos en la vista código o puede optar por seleccionarlos
en la vista código o diseño y elegir la opción formulario del menú html.
Un formulario generalmente incluye un botón submit que envía automáticamente la información al servidor
al hacer clic en el y un botón reset que restaura los campos del formulario a sus valores por defecto
77
<FORM action="procesa.aspx" method=post name=form1>
<p>cedula..:<INPUT name=cedula><BR>
nombre:<INPUT name=nombre>
apellido:<INPUT name=apellido>
</p>
<P><INPUT name=Enviar type=submit value=Enviar>
<INPUT name=restaurar type=reset value=Restaurar></P>
</FORM>
Fuente 88 – formulario con botón submit y reset
Procesar el formulario
Vamos a ver como acceder a la información del formulario del lado del servidor en procesa.aspx con el
objeto Request
También podríamos usar un button en lugar de un submit, y usar luego el método submit() del formulario
para su envío.
ejemplo:
<HTML>
<HEAD>
<script language=javascript>
<!--
function Button1_onclick() {
Form1.submit();
}
//-->
</script>
</HEAD>
<BODY>
78
F O R M U L A R I O S
El objeto Request
Por ejemplo:
Request.Form["nombre"]
sintaxis:
ejemplo:
Request.QueryString["nombre"]
79
Otros controles de formulario
<HTML>
<HEAD>
</HEAD>
<body>
<FORM name="form1" action="procesa.aspx" method="post">
<P>usuario: <INPUT name="usuario"></P>
<P>contraseña: <INPUT type="password" maxLength="10"
name="pass"></P>
<P>deportes de preferencia: (1 o mas)</P>
<P><SELECT id="select1" style="WIDTH: 95px; HEIGHT: 68px"
multiple size="2" name="deportes">
<OPTION value="futbol">futbol</OPTION>
<OPTION value="basketbol">basketbol</OPTION>
<OPTION value="tenis">tenis</OPTION>
</SELECT></P>
<P>sexo</P>
<P>masculino<INPUT name="sexo" type="radio" value="masculino"
ID="Radio1">
femenino <INPUT name="sexo" type="radio" value="femenino"
ID="Radio2"></P>
<P>música de preferencia</P>
<P>rock<INPUT name="musica" type="checkbox" value="rock"
ID="Checkbox1"> pop<INPUT name="musica" type="checkbox" value="pop"
ID="Checkbox2">
jazz<INPUT name="musica" type="checkbox" value="jazz"
ID="Checkbox3"> blues<INPUT name="musica" type="checkbox" value="blues"
ID="Checkbox4"></P>
<P>comentarios</P>
<P><TEXTAREA id="Textarea1" name="comentarios" rows="3"
cols="21">
</TEXTAREA></P>
<P>
<INPUT id="Submit1" type="submit" value="enviar"
name="Submit1"> <INPUT id="Reset1" type="reset" value="restablecer"
name="Reset1"></P>
</FORM>
</body>
</HTML>
Fuente 92 – formulario con varios controles HTML
80