HTML PDF

Escuela de Sistemas
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
 BIOS - Escuela de Sistemas

18 de Julio 1253, esq. Yí • Montevideo
Teléfono 902 92 84 / 9019186
sistemas@bios.edu.uy
http://www.bios.edu.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
EEUU, los temores de la guerra e Internet...
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.
El Departamento de Defensa de los Estados Unidos presentó un proyecto que consistía en

“Comunicaciones digitales en tiempos de guerra”.
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 World Wide Web Consortium
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
Herramientas usadas en este manual
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.
Para averiguar si tenemos instalado IIS5 escribimos http://localhost en el navegador.
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
Figura 3- El administrador de Servicios de Internet (IIS)
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.
Figura 4 – el asistente de componentes de Windows para instalar IIS
9
Crear una Aplicación Web desde Visual Studio .NET
Al crear una aplicación Web se generan 3 copias de la misma.
1. Aplicación Web (copia Master)
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.
Figura 5 –configurando el directorio raíz del servidor Web
2. Proyecto Web (Copia Local)
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
C:\Document and Settings\usuario\Mis Documentos\Proyectos de Visual Studio
Así que en el ejemplo sería:
C:\Document and Settings\usuario\Mis Documentos\Proyectos de Visual Studio\HTML
Figura 6 - Copia local del Proyecto alojada en el

equipo de desarrollo mostrando los archivos de
solución .sln y .suo
Visual Studio .NET implementa

un conjunto de contenedores
denominados soluciones y
proyectos para aprovechar la gran
variedad de herramientas,
diseñadores y plantillas
disponibles en el entorno de
desarrollo integrado (IDE). Una
única solución puede componerse
de varios proyectos.
Figura 7 – Explorador de soluciones mostrando una solución con 2 proyectos: un proyecto Web (HTML0) y una
biblioteca de clases.(ClassLibrary1)
Cuando se crea un proyecto, Visual Studio .NET genera una solución

automáticamente, posteriormente puede incluir mas proyectos a la misma.
El archivo de definición de soluciones (.sln) almacena los metadatos que

definen la solución, el archivo .suo almacena los metadatos que personalizan el IDE, en función de las
opciones seleccionadas.
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
Figura 8- Cuadro de dialogo opciones para

configurar la ubicación de la copia local de los
proyectos de Visual Studio.
3. caché del proyecto

(copia caché)
Una ves creado un proyecto

y en cualquier momento
podemos optar por trabajar
un determinado tiempo sin
conexión con el servidor
web. Para desconectarme lo
hago con la opción Proyecto
- Proyecto Web – Trabajar
sin conexión, en este caso no se guardarán los archivos del proyecto en el servidor, sino se utiliza la copia de
la caché del proyecto del equipo local.
Esta es la tercer copia que por defecto se ubica en:
C:\Documents and Settings\usuario\VSWebCache\
En nuestro caso sería:
C:\Documents and Settings\usuario\VSWebCache\HTML
También podemos configurar su ubicación:
Figura 9- Cuadro de dialogo opciones para

configurar la ubicación de la caché de
proyectos de Visual Studio.
12
Figura 10 – caché del proyecto web
Figura 11 – resultado de mostrar una página desde Visual

Studio estando offline, note que mpuente en este caso es
el nombre del equipo. Note que está tomando la copia
local de la caché de proyectos.
Trabajar desconectado del

Servidor Web
Visual Studio proporciona la

posibilidad de efectuar cambios en las
aplicaciones Web cuando se trabaja
fuera de la red. Esta función es útil
cuando se necesita hacer cambios en
el código fuente en los momentos en
que no se tiene acceso a la red. Por
ejemplo, puede que necesite realizar
cambios mientras viaja con un equipo portátil. Si necesita trabajar en el proyecto cuando no tiene conexión,
podrá ejecutar y depurar el proyecto Web sin disponer de una conexión de red.
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
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.
Figura 12 – cuando estamos desconectados se muestra el icono del proyecto en gris.
Al desconectarse Visual Studio actualizará los archivos almacenados en

el directorio de la caché Web local reemplazándolos por los archivos
actuales que están en el servidor.
Para sincronizar todos los archivos de un proyecto Weben el menú

Proyecto, haga clic en Proyecto Web y, a continuación, seleccione
Sincronizar todas las carpetas.
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.
Actualizar los archivos de un proyecto Web
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.
Creación del Proyecto
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
Figura 13 – Creando un a aplicación Web en el equipo local

de desarrollo llamado WebProyect1
Por defecto se propone como nombre

del servidor web, localhost que hace
referencia al equipo en el que estoy
trabajando y como nombre de
aplicación Web WebProject1 con el
formato:
http://ServidorWeb/AplicacionWeb o
http://IPServidorWeb/AplicacionWeb
Puede ser el nombre o la dirección IP

de un servidor Web en Internet y
trabajar directamente con el mismo, o de un Servidor Web de producción de la intranet, aunque lo común
es conectar a un servidor de Desarrollo y luego copiar la Aplicación Web al servidor Web de producción.
Conocer el nombre del servidor Web de Desarrollo
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.
Figura 14 – Cuadro de diálogo ejecutar de Windows
Una vez que se muestra la consola de DOS escribo el comando

hostname, presiono enter y se muestra el nombre del equipo:
Para saber la dirección IP, desde la consola escribo ipconfig y

presiono enter.
Otra forma de saber el nombre del servidor Web es con botón

derecho sobre el icono MI PC en el escritorio – propiedades,
apareciendo el mismo en la ficha identificación de red.
Figura 15 – Propiedades del sistema mostrando el nombre del equipo.
Una ves seleccionado el servidor en que se alojará la aplicación

Web, y cual será su nombre al pulsar aceptar se creará el
proyecto Web.
En el menú Ver- Explorador de Soluciones mostraremos el

mismo y con botón derecho en la raíz del proyecto podremos
agregar páginas HTML para comenzar a probar, directamente en
15
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.
¿Para que sirven las marcas del lenguaje HTML?:
• Definir la estructura lógica del documento.
• Aplicar estilos al texto.
• Incluir hipervínculos para acceder a otros recursos.
• Incluir imágenes y ficheros multimedia (gráficos, vídeo, audio).
¿Qué necesitamos para crear un documento HTML?
• 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
Figura 17- Ejemplo de página html creada con el bloc de notas y guardada con extensión .htm:
Si la visualizamos por ejemplo en Internet Explorer veremos

el texto formateado a negrita.
Si selecciona Ver-Código Fuente en el browser se abrirá el

bloc de notas y mostrará el código fuente de la página.
Tenga en cuenta esto cuando esté navegando y sienta
curiosidad por saber el código fuente de una página, esto nos
puede enseñar como hacer algo.
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 (/).
<ETIQUETA>Elementos Afectados por la Etiqueta</ETIQUETA>
<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.
En otros casos algunas etiquetas contienen solo la de apertura.

<P>primera línea del párrafo<BR>segunda línea dentro del mismo párrafo</P>
Fuente 2 – etiqueta <BR> indicando un salto de línea dentro del párrafo es un ejemplo de etiqueta que no tiene cierre.
Estructura de un documento HTML
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> .
Por tanto la estructura de un documento HTML será:
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
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2 Final//EN">

Fuente 4 - Cumple el estándar HTML 3.2
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

Fuente 5 - Cumple el estándar HTML 4.0 (es la que agrega automáticamente Visual Studio .NET al agregar una nueva página)
Atributos de las Etiquetas
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.
Se deben tener en cuenta 2 consideraciones sobre atributos:
• Si la etiqueta contiene varios atributos, el orden en que se incluyan es indiferente, no afectando al

resultado.
• 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
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.
Según el browser con que se mire
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.
Figura 18 – cuadro de diálogo Explorar con que se muestra al botón

derecho sobre un documento en el Explorador de Soluciones y
seleccionando Explorar con ....
Agregar un browser a la lista de

browsers
En el cuadro Explorar con pulsamos Agregar

y levantamos del disco el ejecutable del
mismo.
Figura 19- agregando un browser a la lista de exploradores.
Mayúsculas o Minúsculas
El uso de mayúsculas o minúsculas en las

etiquetas es indiferente, se interpretarán del
mismo modo en ambos casos, pero lo normal es expresarlas en mayúsculas para que destaquen con más
nitidez del texto normal., La combinación de mayúsculas y minúsculas en lista que nos sugiere Visual Studio
de etiquetas y sus posibles atributos, que se muestra mientras escribimos es configurable.
20
Figura 20 – configurando el formato automático de

mayúsculas y minúsculas.
Figura 21 – lista de etiquetas sugeridas de acuerdo al área del

documento en la que escribo (HEAD, BODY, etc.) .
La lista de etiquetas sugerida es también

sensible al contenido actual del mismo, por
ejemplo si el documento está vacío solo se
sugeriría <HTML>, si el cursor está en el
<HEAD> muestra solo las etiquetas que van
en el encabezado y si estoy en <BODY>
solo las que van en el cuerpo del documento.
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
Figura 23 – se sugiere para el atributo type una lista acotada de valores

constantes.
Compatibilidad con versión del

browser
La lista de etiquetas y atributos disponibles

varia según la compatibilidad de browser
seleccionada, es decir el explorador Web y la
versión para el que se va a diseñar el documento HTML.
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.
Figura 24 – Configurando la compatibilidad con la versión del

browser del cliente en la pagina de propiedades del documento.
Al modificar esta propiedad aparecerá la

siguiente etiqueta en el encabezado
(HEAD) del documento:
<meta name=vs_targetSchema
content="http://schemas.microsoft.co
m/intellisense/ie5">
Esta propiedad se puede setear también

desde la ventana de propiedades, que se
muestra como una opción del menú Ver
o pulsando F4.
22
Figura 25 – ventana de propiedades mostrando la propiedad targetSchema del documento.
Comentarios HTML
Un comentario es ignorado por el browser y se usa solo a efectos de

comentar un documento o una parte del mismo, sea para recordar por
que algo se hizo así o simplemente para que el browser no interprete
algo momentáneamente sin tener que borrarlo. Los comentarios no se
muestran en el documento HTML y el único modo de verlo es viendo
el código HTML fuente del documento. Para insertar comentarios
dentro de un documento HTML utilizaremos la etiqueta especial 
Figura 26 - como se ve el comentario HTML va fuera de un bloque de <SCRIPT> ya que los

comentarios de unos y otros difieren
La única consideración al respecto es que si el documento

contiene un bloque de script este debe estar fuera de el.
Note que los colores predeterminados para etiquetas son

marrones, para atributos rojo, para valores de atributos azul y
para comentarios verde, sin embargo todos estos valores se pueden configurar a gusto del desarrollador.
23
Cambiar el color de los elementos
Figura 27 – configurando los colores de

los elementos.
24
Capítulo
Cabecera del documento

4
<HEAD>
...encabezado del documento
</HEAD>
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:
Título del documento

<TITLE>Título del documento</TITLE>
Fuente 10 - título del documento
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.
Descripción del contenido del 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
<META name=author CONTENT=”nombre del autor”>
Indica el nombre del autor de la página.

<META name=author content=”Miguel Puente”>
Fuente 13 – etiqueta que define el autor de la página
Caducidad de la información de la página
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
Figura 30 - si al configurar la caché selecciona Ver Archivos puede

ver la caducidad de los archivos temporales
Programa editor HTML

<META NAME=GENERATOR
CONTENT=”editor_HTML”
Indica el programa con el que se ha creado

la página y que se debe abrir para su
edición. La suele generar automáticamente
el editor.
<META NAME=GENERATOR CONTENT=”Microsoft Visual Studio 7.0”>

Fuente 15 – ejemplo de documento creado con Visual Studio.NET 2002.
Indicador de refresco del documento
Sintaxis:
<META http-equiv="refresh" content="segundos;url=URL de refresco">
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.
Indicador de la URL base del documento
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
<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
Cuerpo del documento

5
<BODY>
...contenido del cuerpo del documento
</BODY>
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.
Atributos de la etiqueta BODY:
Márgenes del documento
Define los márgenes del documento.
Sintaxis:
<BODY topmargin=”superior” bottommargin=”inferior” rigthmargin=”derecho”
leftmargin=”izquierdo” >
<BODY topmargin=100 bottommargin=100 rigthmargin=100 leftmargin=100 >

Fuente 18 – definiendo los márgenes del documento
Fondo del documento
Se puede cambiar el fondo de dos maneras distintas:
• Con un color uniforme
• Con una imagen
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
Fuente 20 – documento con color de fondo amarillo usando el valor hexadecimal
Sintaxis para hexadecimal:

<BODY BGCOLOR="#RRGGBB">
donde:
• RR - cantidad de color rojo

• GG - cantidad de color verde
• BB - cantidad de color azul
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.
La numeración hexadecimal se caracteriza por tener 16 dígitos que son:
0123456789ABCDEF
La combinación menor de 2 dígitos hexadecimales es el 00 y el mayor el FF.

Así, por ejemplo, el color rojo es el #FF0000, porque tiene el máximo de rojo y nada de los otro dos
colores
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)
Los colores primarios son:
#FF0000 - Rojo
#00FF00 - Verde
#0000FF - Azul
Otros colores son:
#FFFFFF - Blanco
#000000 - Negro
#FFFF00 - Amarillo
Para hacer un color más oscuro, hay que reducir el número de su

componente, dejando los otros dos invariables.
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.
Colores del texto y de los hipervínculos
Los valores predeterminados son texto=negro y de los enlaces=azul
30
C U E R P O D E L D O C U M E N T O
TEXT - color del texto

LINK - color de los enlaces
VLINK - color de los enlaces visitados
ALINK - color de los enlaces activos (el seleccionado que pulsando enter equivale a hacerle un clic)
La sintaxis de la etiqueta, con todas sus posibilidades, sería:
<BODY bgcolor="#RRGGBB" text="#RRGGBB" link="#RRGGBB" vlink="#RRGGBB"
alink="#RRGGBB">
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.
Figura 32 – configurando no mostrar imágenes mientras se navega con Internet Explorer

(tampoco se muestra la imagen de fondo si el documento la tuviese)
Imagen de fondo fija
Agregando el atributo bgproperties="fixed" podemos fijar

la imagen de fondo de una página de tal forma que al
desplazarnos en ella verticalmente esta quede fija.
<BODY background="nubes.jpg"
bgproperties=fixed>
Fuente 22 – evitando el desplazamiento de la imagen
Esta y varias de las opciones de las opciones que vimos se

encuentran el la pagina de propiedades del documento que
se muestra con botón derecho en el documento.
31
Figura 33 – Cambiar propiedades del documento
Recuerde que para que varias de ellas aparezcan

disponibles debe seleccionar Internet Explorer 5.0. en
esquema de destino en la ficha general, lo que indica
compatibilidad con esta versión del browser.
Párrafo
Sintaxis:
<P align=left/right/center/justify >Texto contenido en el párrafo </P>
<P align=justify>texto justificado</p>

Fuente 23 – ejemplo de párrafo justificado
Salto de línea
<BR>
Como comentáramos anteriormente es un ejemplo de etiqueta que no tiene su correspondiente de cierre y

nos permite dar un salto a la línea siguiente dentro del mismo párrafo.
<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 src especificaremos el fichero de sonido que se va a reproducir.
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
Si indicamos loop=infinite el sonido se reproducirá de manera indefinida hasta abandonar la página.

<BGSOUND src="splash.wav" loop=infinite>
Fuente 25 – ejecuta el archivo splash.wav indefinidamente mientras el usuario vea la página
Insertar video (sin controles)
Sintaxis
<img dynsrc="video" start="fileopen/mouseover" width="321" height="321" loop=2>
start = fileopen ejecuta el video cuando carga la página
start= mouseover ejecuta el video al pasar el mouse sobre el

<img border="0" dynsrc="clock.avi" start="fileopen" width="321" height="321"
loop=2>
Fuente 26 – ejecuta clock.avi al cargar la página
Insertar video o sonido con controles
Si queremos que el usuario pueda iniciar, pausar o detener el video o el archivo de sonido:
sintaxis
<embed src="video o sonido" autostart="true/false" loop="true/false">
autostart es un valor booleano indica si inicia por defecto al cargar
loop también es un valor booleano que indica si al terminar vuelve a ejecutarse o no

<embed src="clock.avi" width="200" height="200" align="center" autostart="false"
loop="false">
Fuente 27 – carga clock.avi pero no lo ejecuta hasta que el usuario pulse play, una vez ejecutado no se repite
<embed src="canyon.mid" autostart="true" loop="true">

Fuente 28 – ejecuta canyon.mid al cargar y lo repite, es el usuario el que debe detenerlo o pausarlo
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.
Figura 34 – barra de herramientas de 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
<I>texto afectado</I> o también

<EM>texto afectado</EM>
Subrayado
<U>texto afectado</U>
Tachado
<S>texto tachado </S>
Preformateado
<PRE>...</PRE>
35
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
Se consiguen con las etiquetas <SUP> </SUP> y <SUB> </SUB> respectivamente.
m2 se consigue de la siguiente manera:

m<SUP>2</SUP>
H2O se consigue con: H<SUB>2</SUB>O
Citas
<CITE></CITE>
Definiciones
<DFN></DFN>
Direcciones
<ADDRESS></ADDRESS>
Ejemplos de código
<CODE></CODE>
<SAMP></SAMP>
Texto a ser tipeado por el usuario

<KBD></KBD>
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.
<MARQUEE direction=right> Este texto se dirige hacia la derecha </MARQUEE>
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
<MARQUEE scrolldelay=500> moviéndose cada medio segundo </MARQUEE>

loop
Especifica el número de veces que aparecerá el texto. Es indefinido por defecto.

<MARQUEE loop=2>marquesina que aparece solo 2 veces</MARQUEE>
hspace, vspace
Definen, respectivamente, la separación en sentido horizontal o vertical del texto que está fuera de la
marquesina.
Fuentes de las marquesinas
Podemos modificarla con la etiqueta <FONT>

<P align=center>
<FONT size=5 face=arial color=red>
<MARQUEE width=20% bgcolor=blue>marquesina</MARQUEE>
</FONT>
</P>
Fuente 34 – marquesina centrada en el párrafo de fondo azul y fuente roja y Arial
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
Figura 35- generando un estilo a aplicar a la marquesina
<MARQUEE style="BACKGROUND-ATTACHMENT: fixed; BACKGROUND-IMAGE: url(doom.gif)"

width="20%" bgcolor="blue">marquesina</MARQUEE>
Fuente 35 – marquesina con estilo aplicado que indica una imagen de fondo fija.
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)
Empiezan siempre con el signo (& ) y terminan con (; )
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
Ó para la Ó
Ú para la Ú
El resto de los códigos son:

ñ para la ñ
Ñ para la Ñ
ü para la ü
Ü para la Ü
¿ para ¿
¡ para ¡
para dejar un espacio (non-breaking space)
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.
size=n. Indica el alto de la línea en píxeles.
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%).
<HR align="center" width="50%" color="silver" size="40">

Fuente 36 – regla horizontal de 50% de ancho y 40 píxeles de alto color gris
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>
<BODY>
<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
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.
Hay que tener en cuenta que si aplicamos un estilo, en el generador de estilos

podemos definir varias cosas, entre ellas un tamaño en una determinada unidad.
En el siguiente ejemplo se muestran varias posibilidades:
<HTML>
<BODY>
<P>Times New Roman 3</P>

<P>Verdana 5 azul</P>
<FONT size="+1">
</FONT>
<FONT size="-2">
</FONT>
</BASEFONT>
<BASEFONT face="Arial" size="2" color="red">

<P>Arial 2 rojo</P>
<FONT color="green" size="4">

<P>Arial verde 4</P>
</FONT>
</BASEFONT>
<FONT color="red" face="arial" style="FONT-SIZE:30pt; BACKGROUND-

COLOR:yellow">
<P>letra roja Arial 30pt fondo amarillo</P>
</FONT>
<P>Times New Roman 3</P>

</BODY>
</HTML>
Fuente 39- ejemplo que combina la fuente base predeterminada, basefont y fon.
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.
También se puede especificar una lista de fuentes en el orden deseado.

<FONT FACE=”Verdana, Arial, Courier”></FONT>
Fuente 40-si el cliente no tiene instalado Verdana, que use Arial y si no Courier
42
Capítulo
8
Listas
Podemos escoger entre tres tipos distintos:
Listas desordenadas (con viñetas)

Listas ordenadas (numeradas)
Listas de definición.
Listas desordenadas
Son las listas con viñetas.
sintaxis:
<UL type=”tipo de viñeta”>
<LI> elemento 1
<LI> elemento 2
<LI> elemento 3
<LI> elemento n
</UL>
las viñetas disponibles son:
disc: un punto sólido (valor por defecto)

circle: un punto hueco
square: un cuadrado
<UL type=square>
<LI> elemento 1</LI>
<LI> elemento n</LI>
</UL>
Fuente 41 – lista con viñetas square
Imagen como viñeta
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
<LI>tres</LI>
</UL>
Fuente 42 – lista que utiliza como viñeta una imagen
Listas ordenadas
Son las listas numeradas correlativamente desde un valor inicial.

<OL type=”tipo de numeración” start=”valor inicial”>
<LI> elemento 1
<LI> elemento 1
<LI> elemento 1
<LI> elemento n
</OL>
los tipos de numeración disponibles son:
1: numeros(valor por defecto)

A: letras mayúsculas
a: letras minúsculas
i: números romanos en minúsculas
I: números romanos en mayúsculas
start siempre es un número

<OL type="A" start="3">
<LI>uno<LI>
<LI>dos</LI>
<LI>tres</LI>
</OL>
Fuente 43 – lista ordenada con letras mayúsculas comenzando en C
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
Capítulo
9
Hipervínculos
Sintaxis:
<A href="URL destino" title="mensaje emergente" target="marco">Texto o Imagen</A>

<A href="uno.htm" title="primer página" target="principal">Texto o Imagen</A>
Fuente 45 – hipervínculo que muestra la página uno.htm en el marco principal y con un mensaje emergente
<A href="tres.htm"><IMG src=imagen1.jpg></A>

Fuente 46 – imagen actuando como origen de un hipervínculo
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.
Figura 36 – cuadro de diálogo hipervínculo
Se puede pulsar el botón examinar para buscar un

recurso existente en el proyecto.
Figura 37 - seteando la URL destino del hipervínculo viendo el contenido del

proyecto
Por defecto se muestran todo el contenido del

proyecto que podemos filtrar.
tipo de dirección URL:
46
H I P E R V Í N C U L O S
Consideremos el proyecto mostrado en la Figura 38 tomando como equipo localhost
Figura 38 – explorador de soluciones mostrando el proyecto yes
Absoluta: ruta de acceso completa al archivo de destino por ejemplo:

http://localhost/yes/uno/dos/dos.html. Use este tipo de direcciones
solo cuando se refiera a un recurso externo al proyecto no olvide que
al alojar este sitio la dirección cambiará y el hipervínculo dejará de
funcionar.
Relativa a la raíz: ruta de acceso relativa basada en el directorio

primario del documento actual (por ejemplo,
/yes/uno/dos/dos.htm) comienza en la raíz del servidor web.
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
Si el recurso se encuentra por encima con (..) sube un nivel

<A href="../uno.htm">ir a pagina 1</A>
Fuente 48 – hipervínculo que lleva de página dos.htm a uno.htm
<A href="../../tres/tres.htm">ir a pagina 3</A>

Fuente 49 – hipervínculo que lleva de pagina dos.htm a pagina tres.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
Hipervínculos para envío de correo
Al pulsarlos se abre el cliente de correo predeterminado del

usuario.
<a href="mailto:">Enviar Correo</a>
Fuente 50 – hipervínculo para envío de correo a cualquier destinatario
<a href="mailto:sistemas@bios.com.uy">Escuela de Sistemas</a>

Fuente 51 – hipervínculo para enviar correo a un destinatario en particular.
47
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
Figura 40 - resultado de pasar parámetros en el hipervínculo
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
También podemos incluir destinatarios ocultos bcc (blind carbon copy):

<a href="mailto:sistemas@bios.com.uy?subject=voto&body=nacional es el
decano&bcc=pepe@adinet.com.uy;juan@adinet.com.uy">voto por nacional</a>
Fuente 54 – usando el parámetro bcc para incluir una lista de destinatarios oculta
Figura 41 – como se veria pasando varios destinatarios
Figura 42 –como se vería con una lista de destinatarios oculta
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
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.
Figura 43 – definiendo el marcador llamado introduccion
Suponiendo por ejemplo que en la Figura 43 el texto seleccionado

fuera “introducción al HTML” se generaría el siguiente código
HTML:
<A name="introduccion">introducción al HTML</A>
Fuente 55 – marcador llamado introduccion
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
(#).
Figura 44 – definiendo un hipervínculo que apunta al marcador

introducción que se encuentra en pagina2.htm
<a href="pagina2.htm#introduccion>introducción al HTML</a>

Fuente 56 – hipervínculo que llevará al marcador introducción en página2.htm
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.
Fuente 59 – pagina de propiedades de una imagen
Texto alternativo (alt)
El atributo alt especifica el texto alternativo que mostrará el

explorador si la imagen no está disponible, le da al usuario
una idea de que se mostrará mientras dure la carga de la
imagen. También se muestra como información sobre
herramientas cuando el usuario detiene el cursor del ratón
sobre la imagen.
<IMG alt=Rio en Carnaval src="images/rio.gif" >
Fuente 60 – imagen con texto alternativo
Alineación
Especifica cómo se alinea la imagen con respecto a los elementos circundantes.
51
Opción Alinea
Left la imagen con el margen izquierdo.
Right la imagen con el margen derecho.
Texttop la parte superior de la imagen con la parte superior del

texto en la línea actual.
Absmiddle la parte media de la imagen con el punto medio absoluto

de los elementos de la línea actual.
Baseline la parte inferior de la imagen con la línea base del texto en

la línea actual.
Absbottom la parte inferior de la imagen con el punto inferior absoluto

del texto en la línea actual.
Bottom la parte inferior de la imagen con la parte inferior del texto

en la línea actual.
Middle el punto medio de la imagen con la línea base del texto en

la línea actual.
Top la parte superior de la imagen con la parte superior del

elemento más alto de la línea actual.
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.
Espaciado horizontal (hspace)
Especifica el espacio horizontal entre los lados izquierdo y derecho de la imagen y el texto circundante. El
valor predeterminado es cero píxeles.
Espaciado vertical (vspace)
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
Alineación de las imágenes
Se puede alinear una imagen a la izquierda o a la derecha de la página y el texto la va a rodear

completamente, consiguiéndose así una apariencia similar a la de una revista.
Las líneas, cuando rebasan su parte inferior, continúan normalmente hasta el margen derecho de la
página.
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:
<BR clear=left> Busca el primer margen libre a la izquierda.

<BR clear=right> Busca el primer margen libre a la derecha.
<BR clear=all> Busca el primer margen libre a ambos lados.
<IMG src="isla.gif" align=left> Este texto esta a un lado de la imagen.

<BR> Este también esta a un lado de la imagen, en la línea siguiente.
<BR clear=left> Este texto ha buscado el primer margen libre a la izquierda.
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.
Esto es especialmente molesto cuando, como ocurre frecuentemente, en la cabecera de la página se

encuentra una imagen grande, ya que durante un tiempo relativamente largo no se verá nada en la
pantalla.
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
Formatos de archivos de gráficos
BMP (Bit MaP, mapa de bits)
Los archivos BMP no suelen comprimirse, son de mucho tamaño y por lo tanto no hay que usarlos
para páginas Web.
GIF (Graphics Interchange Format, formato de intercambio de gráficos)
53
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 (Joint Photographic Experts Group, grupo conjunto de expertos en fotografía)
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>
<IMG src="Abanicos.bmp" align="textTop" usemap="#FPMap0" width="160" height="160">

Fuente 62 – ejemplo de mapa de imágenes con áreas rectangulares
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>
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>
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.
Estructura de una tabla
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
</TR>
</TABLE>
Fuente 65 – ejemplo de tabla
que mostraría lo siguiente:
Nombre Apellido
Luis Gómez
Marta Suárez
donde <TABLE></TABLE> marca el comienzo y fin de la tabla,
<TR></TR> el comienzo y fin de cada fila
y <TD></TD> el comienzo y fin de cada celda
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
que mostraría lo siguiente:
nombre apellido
Luis Gómez
marta Suárez
58
T A B L A S
Filas con desigual número de celdas
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
Ejemplo de filas desiguales
nombre apellido
Luis Gómez
marta
Variando el espesor de los bordes
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:
<TABLE BORDER=número deseado>
Si en el ejemplo anterior ponemos:

<TABLE BORDER=5>
Resultará:
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>
<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
Contenido de las celdas
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.
Alineación del contenido de la celda
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>
<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
</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:
<TD VALIGN=TOP> Arriba </TD>

<TD VALIGN=BOTTOM> Abajo </TD>
<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:
Arriba izquierda Abajo derecha
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
<TABLE border=1 WIDTH=90% height=200>

<TR>
<TD valign=top align=left>Arriba izquierda</TD>
<TD valign=bottom align=right>Abajo derecha</TD>
</TR>
</TABLE>
Fuente 72 – definiendo el tamaño de la tabla
se mostraría:
Arriba izquierda Abajo derecha
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:

<TR>
<TD rowspan=3></TD>
<TD></TD>
<TD></TD>
</TR>
63
<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:
Color de fondo en las tablas
Debemos utilizar el atributo BGCOLOR="#XXYYZZ”.
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:
<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
<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:
Imágenes de fondo en las tablas
Si se utiliza dentro de la etiqueta <TABLE> la imagen en cuestión se multiplicará detrás de todas las celdas.
Por ejemplo, si ponemos:

<TABLE BACKGROUND ="images/terrasamba1.bmp" 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 78 – imagen de fondo para la tabla
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.
Separación entre las celdas de una tabla
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
Con lo que se obtiene:
67
Separación entre el borde y el contenido dentro de las celdas
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:
<TABLE border=1 CELLPADDING=20>
fila1-celda1 fila1-celda2
fila2-celda1 fila2-celda2
Se puede combinar este atributo con CELLSPACING visto anteriormente.
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:
Página HTML frame Principal
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.
Páginas html source (src)
Cada frame en una página contiene su propia página source html la cual visualiza.
Para crear una página HTML con frames:
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

</frameset>
Fuente 82 – lo mismo al anterior pero en filas
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%,*">
<frameset rows="15%,*">
<frame name="logo" src="logo.htm">
</frameset>
</frameset>
Fuente 84-otro ejemplo de conjunto de marcos anidados
Navegadores que no soportan frames
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>

70
F R A M E S
Su navegador no soporta frames, debe usar uno compatible con

HTML 4.0 o superior
<A href="SinFrames.htm">PULSE AQUI</A> PARA IR A LA PÁGINA SIN
FRAMES
</P>
</NOFRAMES>
</FRAMESET>
</HTML>
Fuente 85 . definiendo el contenido a ver por usuarios con browser que no soportan frames (no compatibles con HTML 4.0 o superior)
Crear Vínculos en Frames
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>.
Por ejemplo si el siguiente vínculo se encuentra en el frame
contenido, entonces pagina1.htm se cargaría en el marco contenido,
que es donde se encuentra, y esto es así por defecto.

<A href="pagina1.htm">vinculo1</A>
Sin embargo si lo modificamos como sigue:

<A TARGET="principal" href="pagina1.htm">vinculo1</A></P>
se mostraría en cambio en el frame llamado principal.
La siguiente tabla describe los valores posibles del atributo TARGET.
Atributo descripción ejemplo
carga la página en el nombre del <A TARGET="principal"

"nombredelframe"
frame especificado HREF="pagina1.htm"
carga la página en una nueva <A TARGET="_blank"

"_blank"
ventana HREF="pagina1.htm"
es el valor por defecto, muestra la

<A TARGET="_self"
"_self" página en el mismo frame donde
HREF="pagina1.htm"
esta el vinculo.
"_top" suprime los marcos y muestra la <A TARGET="_top"

página a pantalla completa HREF="pagina1.htm"
71
página a pantalla completa HREF="pagina1.htm"
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
se verán en el frame llamado principal.

<base target="principal">
<A href="pagina1.htm">vinculo1</A></P>
<P><A href="pagina2.htm">vinculo2</A></P>
Fuente 86 – definiendo base target para los hipervínculos
produce el mismo efecto que:

<A target="principal" href="pagina1.htm">vinculo1</A></P>
<P><A target="principal" href="pagina2.htm">vinculo2</A></P>
Frames sin bordes
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:
<FRAMESET FRAMEBORDER=0 FRAMESPACING=0 BORDER=0 COLS="xx, yy">
Atributos de la etiqueta FRAME
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.
NAME="nombre_de_la_ventana". Este atributo se usa para asignar un nombre a un frame. De esta

manera se podrá "dar en el blanco" (en inglés, target) en esta página, desde un enlace situado en otra página.
Es decir, que pulsando en otra página un enlace, se cargará precisamente en ésta, tal como hemos visto en el
ejemplo.
El atributo NAME es opcional. Por defecto, todas las ventanas carecen de nombre. Los nombres que se
escojan deben comenzar por un carácter alfanumérico (una letra o un número, pero no otro tipo de
símbolo)
72
F R A M E S
MARGINWIDTH="número". Se utiliza este atributo cuando se quiere controlar la el ancho de los

márgenes dentro de un frame. El número que se ponga representa los píxeles de los márgenes. Este atributo
es opcional.
MARGINHEIGHT="número". Igual que el anterior, pero referido a los márgenes en altura.
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:
y seleccionar una plantilla:
73
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">

</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.
ASP asociada al 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>
</FORM>
si el método de envío es GET tendríamos:

<FORM action=procesa.aspx method=GET>
</FORM>
Campos del formulario
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.
<FORM action="procesa.aspx" method=POST name=form1>

<p>cedula..:<INPUT name=cedula><BR>
nombre:<INPUT id=text2 name=nombre>
</P>
</FORM>
Fuente 87 – formulario con campos cedula y nombre
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
<%@ Page language=c# %>

<html>
<body>
<b>nombre:</b><%=Request["nombre"]%><br>
<b>apellido:</b><%=Request["apellido"]%>
</body>
</html>
Fuente 89 – procesando el formulario con el objeto Request
podría ser así:

<html>
<body>
<%Response.Write("<b>nombre:</b>" + Request["nombre"]);%><br>
<%Response.Write("<b>apellido:</b>" + Request["apellido"]);%>
</body>
</html>
Fuente 90 – otra forma de mostrar los datos enviados
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>

</script>
</HEAD>
<BODY>
78
F O R M U L A R I O S
<form action="procesa.aspx" method="get" ID="Form1">

<input type="text" name="nombre" id="Text1"> <input
type="button" value="enviar" id="Button1" name="Button1" onclick="return
Button1_onclick()">
</form>
</BODY>
</HTML>
Fuente 91-enviar un formulario con el método submit del formulario.
El objeto Request
Se puede usar el objeto Request para obtener información ingresada en un
formulario. En tal caso para obtener el valor de un campo (value) lo hacemos
mediante la propiedad name (nombre) del control.
Proceso de formulario enviado mediante POST

sintaxis:
Request.Form[name del control]
Request[name del control]
Por ejemplo:
Request.Form["nombre"]
recupera la información ingresada en un formulario html
en un cuadro de texto llamado nombre que utilizó el tipo de envío POST.
Proceso de formulario enviado mediante GET
sintaxis:
Request.QueryString[nombre del control]
Request[nombre del control]
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

<HTML>
<body>
<P>usuario:<%=Request["usuario"]%><BR>
contraseña:<%=Request["pass"]%><BR>
deportes:<%=Request["deportes"]%><BR>
sexo:<%=Request["sexo"]%><BR>
musica:<%=Request["musica"]%><br>
comentarios:<%=Request["comentarios"]%></b></P>
</body>
</HTML>
Fuente 93 - Página procesa.aspx que procesa el envío del formulario
80

HTML PDF

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

HTML PDF

Uploaded by

Copyright:

Available Formats

Escuela de Sistemas

 BIOS - Escuela de Sistemas

EEUU, los temores de la guerra e Internet...

El Departamento de Defensa de los Estados Unidos presentó un proyecto que consistía en

El World Wide Web Consortium

Herramientas usadas en este manual

Para averiguar si tenemos instalado IIS5 escribimos http://localhost en el navegador.

Figura 3- El administrador de Servicios de Internet (IIS)

Figura 4 – el asistente de componentes de Windows para instalar IIS

Crear una Aplicación Web desde Visual Studio .NET

Al crear una aplicación Web se generan 3 copias de la misma.

1. Aplicación Web (copia Master)

Figura 5 –configurando el directorio raíz del servidor Web

2. Proyecto Web (Copia Local)

C:\Document and Settings\usuario\Mis Documentos\Proyectos de Visual Studio

Así que en el ejemplo sería:

C:\Document and Settings\usuario\Mis Documentos\Proyectos de Visual Studio\HTML

Figura 6 - Copia local del Proyecto alojada en el

Visual Studio .NET implementa

Cuando se crea un proyecto, Visual Studio .NET genera una solución

El archivo de definición de soluciones (.sln) almacena los metadatos que

Figura 8- Cuadro de dialogo opciones para

3. caché del proyecto

Una ves creado un proyecto

Esta es la tercer copia que por defecto se ubica en:

C:\Documents and Settings\usuario\VSWebCache\

En nuestro caso sería:

C:\Documents and Settings\usuario\VSWebCache\HTML

También podemos configurar su ubicación:

Figura 9- Cuadro de dialogo opciones para

Figura 10 – caché del proyecto web

Figura 11 – resultado de mostrar una página desde Visual

Trabajar desconectado del

Visual Studio proporciona la

Figura 12 – cuando estamos desconectados se muestra el icono del proyecto en gris.

Al desconectarse Visual Studio actualizará los archivos almacenados en

Para sincronizar todos los archivos de un proyecto Weben el menú

Actualizar los archivos de un proyecto Web

Creación del Proyecto

Figura 13 – Creando un a aplicación Web en el equipo local

Por defecto se propone como nombre

Puede ser el nombre o la dirección IP

Conocer el nombre del servidor Web de Desarrollo

Figura 14 – Cuadro de diálogo ejecutar de Windows

Una vez que se muestra la consola de DOS escribo el comando

Para saber la dirección IP, desde la consola escribo ipconfig y

Otra forma de saber el nombre del servidor Web es con botón

Una ves seleccionado el servidor en que se alojará la aplicación

En el menú Ver- Explorador de Soluciones mostraremos el

¿Para que sirven las marcas del lenguaje HTML?:

• Definir la estructura lógica del documento.

• Aplicar estilos al texto.

• Incluir hipervínculos para acceder a otros recursos.

• Incluir imágenes y ficheros multimedia (gráficos, vídeo, audio).

¿Qué necesitamos para crear un documento HTML?

Si la visualizamos por ejemplo en Internet Explorer veremos

Si selecciona Ver-Código Fuente en el browser se abrirá el

<ETIQUETA>Elementos Afectados por la Etiqueta</ETIQUETA>

En otros casos algunas etiquetas contienen solo la de apertura.

Estructura de un documento HTML

Por tanto la estructura de un documento HTML será:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2 Final//EN">

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">