Manual HTML y Flash

Facultad de Ingeniería
Unidad de Servicios de Cómputo Académico
Temario HTML
Autor:
Juan Carlos Cruz Paz
Julio César Morales Crispín
Abril de 2006

Unidad de Servicios de Cómputo Académico Diseño de Páginas Web
con HTML y Flash
1 /113
Temario HTML
I. Introducción
♦ Internet
♦ Servicios de Internet
♦ La Word Wide Web
♦ Los Navegadores
♦ Como surgió HTML
♦ Esquema de funcionamiento
II. Página HTML
♦ Definición
♦ Etiquetas
♦ Sintaxis
♦ Estructura Básica
♦ Elementos de Páginas
III. Formato de una Página
♦ Etiquetas básicas
♦ Fuentes
♦ Caracteres especiales
♦ Encabezados
IV. Listas
♦ Definición
♦ Listas Ordenadas
♦ Listas No Ordenadas
♦ Listas de Definiciones
♦ Listas Anidadas
V. Tablas
♦ Definición
♦ Formato
♦ Atributos y Parámetros
♦ Ejemplos de Tablas
VI. Ligas o Vínculos
♦ Definición
♦ Sintaxis
♦ Rutas Absolutas y Relativas
♦ Las Ligas
♦ Anclas

con HTML y Flash
2 /113
VII. Imágenes
♦ Tipos de Imágenes utilizadas
♦ Sintaxis
♦ Modificadores de Imagen
VIII. Utilerías para la Página.
♦ Etiqueta BODY
♦ Ligas con Imágenes
♦ Código de Colores
IX. Formularios
♦ Definición
♦ Características
♦ Tipos de elementos
X. Marcos
♦ Definición
♦ Tipos
♦ No Frames
♦ Atributos
XI. Texto en Movimiento
♦ Marquesinas (Marquees)
♦ Atributos

con HTML y Flash
3 /113
I. Introducción.
Internet
El hecho de abrir un navegador Web, teclear una dirección y empezar a navegar por la
WWW es tan común y popular en nuestros días que muchas personas no saben que hace
tan sólo unos pocos años una cosa así era imposible de realizar.
Nos estamos acostumbrando, y cada vez más, a la presencia de las páginas Web en nuestro
trabajo y en nuestras actividades cotidianas, y los medios de comunicación hablan
constantemente de Internet y del comercio electrónico.
Internet fue creada a partir de un proyecto del Departamento de Defensa de los Estados
Unidos llamado DARPANET (Defense Advanced Research Project Network) iniciado en
1969 y cuyo propósito principal era la investigación y desarrollo de protocolos de
comunicación para redes de área amplia, el objetivo fue ligar redes de transmisión de
paquetes de diferentes tipos capaces de resistir las condiciones de operación más difíciles y
continuar funcionando aún con la pérdida de una parte de la red (por ejemplo en caso de
guerra).
Estas investigaciones dieron como resultado el protocolo TCP/IP (Transmisión Control
Protocol/Internet Protocol) un sistema de comunicaciones muy sólido y robusto bajo el cual
se integran todas las redes que conforman lo que se conoce actualmente como Internet.
Durante el desarrollo de este protocolo se incrementó notablemente el número de redes
locales de agencias gubernamentales y de universidades que participaban en el proyecto,
dando origen así a la red de redes más grande del mundo.
Existen grupos de Instituciones que se han formado con el fin de coordinar y controlar el
manejo de la información y la forma de administrar dichas redes.
Internet Society
Es el grupo de mayor autoridad sobre el desarrollo de la red y fue creado en 1990, está
formado por miembros voluntarios, cuyo propósito principal es promover el intercambio de
información global a través de la tecnología en Internet y tiene la responsabilidad de la
administración técnica y dirección de Internet.
Internet Architecture Board (IAB)
Toma las decisiones acerca de los estándares de comunicaciones entre las diferentes
plataformas para que puedan interactuar máquinas de diferentes fabricantes sin
problemas.

con HTML y Flash
4 /113
NIC (Network Information Center)
Este grupo es responsable de cómo se deben asignar las direcciones y otros recursos en la
red y es administrado por el departamento de defensa de los Estados Unidos de
Norteamérica.
Internet Engineering Task Force (IETF)
Se encarga de recabar las opiniones de los usuarios, de cómo se deben de implementar
soluciones para problemas operacionales y cómo deben de cooperar las redes para lograrlo.
El principal objetivo de Internet es interconectar todas las redes en el mundo empleando
líneas telefónicas de alta velocidad, cables de fibra óptica y conexiones por satélite.
Servicios de Internet
Este servicio puede ser adquirido si se tiene acceso a las organizaciones antes mencionadas
o bien contratando el servicio con proveedores de Internet, estos negocios establecen una
conexión con Internet y posteriormente venden el servicio a personas que lo soliciten,
pagando una cuota ya sea por hora, mes o anual. Esta conexión en su mayoría se realiza vía
Modem.
Internet ofrece los siguientes servicios:
E-Mail
FTP
Listas de Correo
Telnet
World Wide Web
A continuación se describe brevemente cada uno de ellos.
E-Mail (Correo Electrónico)
Una de las aplicaciones más utilizadas en la red es el correo electrónico, ya que permite
mandar y recibir cartas, desde cualquier parte del mundo mucho más rápido que el correo
tradicional. Así pues podemos tener comunicación con una persona, puede escribírsele a un
servidor de archivos ó a un grupo de gente al mismo tiempo.
El correo electrónico se basa en los nombres o direcciones de los nodos y en la cuenta de
una persona en un sistema (conocido como login), hay dos maneras de formar direcciones

con HTML y Flash
5 /113
de e-mail: utilizando el formato Internet que contiene una '@' que significa "en" ó bien el
formato UUCP que contiene un '!'; el más utilizado es el formato Internet '@'.
Por ejemplo, para escribirle al usuario Bill Gates que tiene cuenta en la red microsoft.com,
se manda un mensaje a la dirección: billgates@microsoft.com.
FTP (File Transfer Protocol)
FTP es el protocolo utilizado en Internet para transferir archivos, es uno de los primeros
servicios que se implementaron junto con Telnet y el Correo Electrónico. Por este medio se
pueden obtener archivos y programas de casi cualquier tema, solo hay que saber donde
encontrarlos, existe un gran número de servidores de FTP que admiten a usuarios
anónimos, es decir que no necesitan tener cuenta para acceder al sistema, el login es
anonymous y el password es nuestra dirección de correo electrónico; obviamente no se da
acceso a todos los directorios del servidor, solo a algunas áreas restringidas dedicadas al
público.
Listas de Correo o Grupos de interés
Los grupos de interés son creados con la finalidad de comunicar a las personas que tienen
un interés común.
Los servidores de listas pueden ser humanos o programas, los últimos son conocidos como
listserv, cuando mandamos mensajes a un administrador humano podemos escribir en
lenguaje normal, pero cuando mandamos correo a un listserv hay que comunicarnos con los
comandos válidos del sistema con el que nos conectamos.
Telnet (Conexión Remota)
Telnet es la herramienta mas utilizada para acceder a los servicios de Internet, fue hecho
para establecer sesiones remotas en otras máquinas tal y como si estuviéramos enfrente de
ellas. Para que la conexión funcione, como en todos los servicios de Internet, la máquina a
la que se accede debe tener un programa especial que reciba y gestione las conexiones El
puerto que se utiliza generalmente es el 23.
Sólo sirve para acceder en modo Terminal, es decir, sin gráficos, pero fue una herramienta
muy útil para arreglar fallos a distancia, sin necesidad de estar físicamente en el mismo
sitio que la máquina que los tenía. También se usaba para consultar datos a distancia, como
datos personales en máquinas accesibles por red, información bibliográfica, etc.
Su mayor problema es de seguridad, ya que todos los nombres de usuario y contraseñas
necesarias para entrar en las máquinas viajan por la red como texto plano (cadenas de texto
sin cifrar). Esto facilita que cualquiera que espíe el tráfico de la red pueda obtener los

con HTML y Flash
6 /113
nombres de usuario y contraseñas, y así acceder él también a todas esas máquinas. Por esta
razón dejó de usarse, casi totalmente, hace unos años, cuando apareció y se popularizó el
SSH (Secure Shell), que puede describirse como una versión cifrada de Telnet.
La World Wide Web
La WWW es el servicio más nuevo y conocido de la Internet, y el de más repercusión social
en la WEB, servicio de visualización de documentos basados en un lenguaje especial de
marcas que nos permite compartir información. El HTML es un protocolo especial para la
transferencia de los mismos, y el HTTP es un concepto excepcional de enlaces entre
diferentes documentos llamados Hipertexto, y que nos permite presentar nuestros servicios
a todo público en general que tenga acceso a Internet.
¿Qué es la WWW?
El World Wide Web (Telaraña a lo ancho del Mundo) es un servicio que proporciona
Internet, también conocido como Web. Internet es un conjunto de Redes Internacionales,
los dueños de estas redes son usualmente grandes organizaciones como Universidades,
Laboratorios de Investigación de Gobierno y Corporaciones Privadas y de Gobierno.
Cabe mencionar que las Páginas HTML trabajan bajo el World Wide Web. El Web nos
permite acceder a miles de computadoras del mundo a través de documentos en los cuales
de manera gráfica podemos tener acceso fácilmente a la información presionando solo
palabras claves o bien conocidas como ligas las cuales resaltan sobre el resto del texto.
El éxito que tiene se debe a la facilidad con la cual se puede obtener información (texto,
gráficos, sonido, vídeo, etc.) y a su vez también poder presentar la información que se tenga
y se quiera compartir.
Los Navegadores o Browser
Los Browser son también conocidos como Visualizadores o Navegadores, dentro de los
Navegadores más utilizados actualmente tenemos a: Internet Explorer y Netscape, que son
los más populares y los utilizados. Cabe mencionar que estos dos Navegadores pueden
correr bajo Windows y Macintosh.
Otros Navegadores son:
Mozila (Linux)
Mosaic de NSCA (Windows, Macintosh y UNIX)
DOS LYNX (DOS)
MACWEB (Macintosh)
LYNX (UNIX) y WINWEB (Windows)

con HTML y Flash
7 /113
Como funcionan los Navegadores.
Los Navegadores envían las solicitudes y reciben los datos necesarios para desplegar las
páginas HTML en pantalla. Todo lo que sea especificado en este archivo ya sea sonido,
vídeo, gráficos o simplemente texto, recupera todos los datos solicitados y formatea de
acuerdo como se le indica en el archivo HTML y lo despliega.
Todos los Navegadores realizan básicamente las mismas funciones tales como enviar
correo, transferencia de archivos, obtener información de la red (archivos mediante
Download), reproducir videos e imágenes y hacer peticiones a los servidores remotos.
Nota:
Las fuentes instaladas en su computadora y las preferencias de despliegue del Navegador
determinan como será visualizado en texto.
Como surgió HTML
Ahora bien el Desarrollo de Páginas Web mediante HTML para Internet surgió con la
necesidad de poder compartir información, ya que dentro de este proyecto estaban muchas
Universidades y Oficinas gubernamentales es por ello que se tuvo la necesidad de compartir
información no solo mediante el uso de correos electrónicos y conexiones remotas, además
se requería tenerla en el momento es por ello que surgieron los Visualizadores no-gráficos
como por ejemplo Mosaic y posteriormente hubo la necesidad de compartir archivos
gráficos. Para todo esto se creó un lenguaje sencillo pero eficaz que debería de contener
algunas características básicas de un lenguaje formal.
El HTML dio inicio al World Wide Web en Ginebra Suiza en el año de 1992, en el
Laboratorio Europeo de Física Nuclear en Suiza y la Organización Europea para la
Investigación Nuclear en Francia (CERN), un grupo de científicos reunieron los primeros
documentos enlazados para así facilitar el compartir información a través de todo el mundo
con otras organizaciones. Esta tecnología fue desarrollada por Tim Berners Lee, para ello
combinó dos tecnologías ya existentes (el hipertexto y el protocolo de comunicaciones de
Internet), creando un nuevo modelo de acceso a la información intuitivo e igualitario. Las
famosas tres W han hecho posible que aprender a utilizar la Red sea algo al alcance de
todos. Actualmente es el director del World Wide Web Consortium.
Los elementos que se utilizan para crear las Páginas HTML son llamados Etiquetas o Tags,
Las etiquetas dan formato al texto, vinculan archivos insertan gráficos y tablas, así como
crean formularios que se emplean para recabar información de los usuarios.

con HTML y Flash
8 /113
Esquema de Funcionamiento.
El acceso a la Web funciona de la siguiente manera:
Computadora Personal.
El Visualizador de la computadora envía la solicitud de archivos HTML a los servidores
remotos de Internet, utilizando direcciones llamadas URL’s (Localizadores Uniformes de
Recursos). Cuando llegan los datos a la computadora el Visualizador interpreta las etiquetas
de HTML y despliega el texto formateado junto con los gráficos.
Modem
Mediante el modem se realiza la conexión con el proveedor de Internet, el cual nos va ha
dar la salida, esto se hace mediante una línea telefónica y este dispositivo convierte las
peticiones, que son señales que pueden ser transmitidas y posteriormente al recibirlas las
vuelve a convertir para poder ser interpretadas por la máquina.
Proveedor de Acceso
Es una organización Gubernamental, Educativa o Privada que nos proporciona el servicio
de Internet y generalmente tiene un servidor de Web, que en ruta las solicitudes de su
computadora a otros servidores de Web y posteriormente transmite los archivos HTML
obtenidos a quien se lo haya solicitado.
Internet
Es una red mundial de Servidores. Envía la solicitud de un servidor a otro hasta encontrar
la dirección URL solicitada por el archivo HTML y posteriormente regresa una respuesta,
ya sea el archivo solicitado o un mensaje en el cual indica porque no ha sido encontrado
dicho archivo.
Servidor de Web
El servidor de Web es una Computadora que contiene una serie de programas que sirven
para atender las solicitudes de los usuarios no importando el Sistema Operativo (UNIX,
Windows, MSDOS, Macintosh) con el cual trabaje dicho usuario ni el Visualizador
utilizado. Este Servidor contiene todos los archivos necesarios que están relacionados con el
archivo HTML solicitado, así como programas conocidos como GATEWAY SCRIP para
enviar la solicitud a otro servidor de Web.

con HTML y Flash
9 /113
Compuadora Proveedor Servidor de Web 1
c/Modem de Internet (Windows NT)
Switch
Servidor de Web 2 Servidor DNS Puerta de Enlace
(UNIX) (GATEWAY)
Servidor de Web 3 Servidor de Web N
( UNIX) (LINUX)
Esquema de funcionamiento

con HTML y Flash
10 /113
II. Página HTML
Definición
Hiper Text Markup Languaje
Hyper Text Markup Language (lenguaje de marcación de hipertexto), es un lenguaje de
marcas diseñado para estructurar textos y presentarlos en forma de hipertexto, que es el
formato estándar de las páginas Web. Gracias a Internet y a los navegadores del tipo
Explorer o Netscape, el HTML se ha convertido en uno de los formatos más populares que
existen para la construcción de documentos.
En sus diferentes versiones, el lenguaje HTML ha ido sufriendo modificaciones que han ido
adaptándolo a las necesidades y características de Internet de cada momento. De esta
forma, etiquetas que inicialmente se implementaron se han ido suprimiendo luego,
mientras que han ido introduciéndose etiquetas nuevas en cada versión.
Y no sólo eso, sino que cada empresa fabricante de navegadores han ido implementando
etiquetas y extensiones propias al lenguaje, de tal forma que llegó un momento en el que
reinó un caos casi total, resultando muy difícil la creación de páginas Web que se
visualizaran igual en los diferentes navegadores.
Para poner un poco de orden es esta situación, diversas empresas del sector (Nestcape,
Microsoft, etc.) y diferentes organismos interesados crearon, en 1996 y a instancias de Tim
Berners-Lee, el World Wide Web Consortium, más conocido como W3C, que ha
tomado bajo su responsabilidad la evolución de los protocolos y estándares asociados con la
Web.
Etiquetas
Las etiquetas son las marcas que van a contener el texto, gráfico y en general la
información que necesitemos darle formato. Las etiquetas, deben estar encerradas entre
signos de < y >, además la información deberá llevar una etiqueta al inicio y otra al final, la
etiqueta final llevará antes del nombre de la etiqueta una diagonal normal que indica que es
la etiqueta cierre.
Etiqueta de inicio <ETIQUETA>
Etiqueta de cierre </ETIQUETA>
Nota: La etiqueta deberá ir escrita en mayúsculas.
Por otro lado las etiquetas contienen atributos propios de ellas, además estos atributos
pueden contener parámetros.

con HTML y Flash
11 /113
Atributo = PARAMETRO o VALOR.
Nota: El Atributo debe estar escrito con la primer letra mayúscula y el resto en
minúsculas, el parámetro o valor debe de ir en mayúsculas y entre comillas.
Sintaxis
Como ya se menciono la sintaxis que se maneja en el Desarrollo de páginas HTML, debe
llevar la etiqueta posteriormente la información y por último la etiqueta cierre.
<ETIQUETA> Contenido o información </ETIQUETA>
La información puede ser Texto, imagen, archivo, etc.
La sintaxis de una etiqueta con atributos y parámetros; en donde la etiqueta va en
mayúsculas y el atributo inicia con mayúscula y el parámetro esta en mayúsculas.
<FONT Size = “5” Color = “GREEN”> Texto a modificar </FONT>
Estructura Básica
Como ya se mencionó el desarrollo de páginas HTML para Internet esta basado en
etiquetas (Tags). Una de las características principales de este Lenguaje es: “La
Programación Estructurada”. Esto quiere decir que tenemos una estructura general que
debemos seguir.
Para poder diseñar una Página HTML debemos de tomar en cuenta las siguientes
recomendaciones, para seguir con el estándar ya establecido por WWW Consortium. Las
características siguientes están divididas en Formales e Informales, las primeras
necesariamente se deben de cumplir para poder ser visualizadas y las restantes pueden
funcionar o no, pero deben ser respetadas para que se puedan visualizar por cualquier
Navegador bajo cualquier Sistema Operativo llámese Windows, UNIX, Macintosh, etc.
Recomendaciones:
1. El contenido de una Página HTML, para poder ser desplegada por un Visualizador
(Netscape o Internet Explorer), debe ser solo texto y llevar la extensión html.
2. El contenido debe ser solo texto.
3. El nombre del archivo debe tener la extensión html.

con HTML y Flash
12 /113
Consideraciones:
4. Los acentos y caracteres especiales deben ser marcados mediante etiquetas.
5. El inicio de una página y el fin debe llevar la etiqueta HTML.
6. Debe contener las etiquetas de cabecera y cuerpo de la página HTML.
7. Cada etiqueta utilizada debe de llevar su respectiva etiqueta de cierre.
8. Las Etiquetas deben ser escritas en mayúsculas.
9. Los Atributos deben ser escritos con la primera letra mayúscula.
10. Los Parámetros deben ser escritos en mayúsculas.
Cabe mencionar que el lenguaje HTML, debe contener las características anteriores, ya que
como este lenguaje está en constante evolución debemos respetar estas condiciones, para
llevar una mejor estructura en el desarrollo de la página y así darle un mantenimiento
adecuado.
Para Desarrollar Páginas HTML, sólo necesitamos contar con:
♦ Un editor de textos (Block de notas, Wordpad, Word, etc.)
♦ Un Navegador (Netscape, Internet Explorer, etc.)
♦ Aprender el lenguaje de Páginas HTML
♦ No necesitamos tener una conexión a Internet.
Para Desarrollar Páginas HTML, debemos de tomar en cuenta algunas
consideraciones:
♦ En que tipo de Navegador será visualizado.
♦ Los tipos de Fuentes que están instalados en la computadora en que será desplegado el
archivo (en el desarrollo se pueden dar alternativas).
♦ Evitar insertar muchas imágenes en la página, ya que esto hará lenta su visualización.
♦ Que las imágenes insertadas en el documento no sean muy grandes (tamaño en bytes).
♦ Realizar un diseño llamativo, novedoso y dinámico (sin caer en la exageración).
♦ Al desarrollar se recomienda iniciar por definir el fondo de la página, ya sea utilizando
un color o bien una imagen. Y a que el contenido debe contrastar con esto.
♦ Respetar la sintaxis, ya que algunas etiquetas funcionan aun con errores pero no es
correcto hacerlo de esa manera.
♦ El más importante de todos. No existe un formato para desplegar la información. Esto
depende únicamente de la creatividad del diseñador y tener bien definido que es lo que
se quiere mostrar.
Nota:
Todas las páginas para el Web deben de llevar al inicio y al final la etiqueta <HTML> y
</HTML>, que indica que será un archivo que podrá ser interpretado por el Visualizador
en el Web de su preferencia.

con HTML y Flash
13 /113
Elementos de Páginas HTML.
Ahora bien después de tomar en cuenta las recomendaciones anteriores, daremos inicio con
el desarrollo de una Página de Internet.
Las Páginas para Internet cuentan con una estructura básica, dentro de ellas no se manejan
arreglos, ni procedimientos, tampoco se declaran variables como se hace en otros lenguajes.
Solamente maneja etiquetas y las más importantes son las siguientes.
La etiqueta <HTML> indica el inicio de una página, la etiqueta <HEAD> indica que es la
cabecera y la etiqueta <BODY> que es el cuerpo de la misma. Cada una de ellas debe llevar
una etiqueta que indica el cierre de la misma, se debe de cerrar primero la última que se
abrió, después la anterior y así sucesivamente.
Estructura de una Página HTML.
Etiquetas de la Cabecera (HEAD)
Las etiquetas básicas que son contenidas dentro de la Cabecera de una Página HTML, son el
título y los comentarios.
• Título <TITLE>
El Título es la etiqueta que nos permite darle nombre al contenido de nuestra página y debe
cumplir con las siguientes características:
1. El mostrado en la parte superior del Navegador (Browser).
2. Es lo que se guarda en el Bookmarks del Visualizador como referencia.
3. Debe describir el contenido de la página.
4. Debe ser corto y no rebasar los 50 caracteres de lo contrario es truncado.
<HTML>
<HEAD>
</HEAD>
<BODY>
</BODY>
</HTML>

con HTML y Flash
14 /113
5. Use títulos que tengan sentido para la gente que lo observe. Ya que generalmente son
llamadas por los Bookmarks.
6. No utilice Títulos vagos, como por ejemplo página 30 ó Html2 u Hoja45a.
Sintaxis
<HEAD>
<TITLE> Título de la página </TITLE>
</HEAD>
• Comentarios .
Los comentarios dentro de una Página HTML generalmente se colocan en la Cabecera, ya
que indican alguna consideración que se tomo al ser creada la página. Sin embargo pueden
ir dentro de cualquier parte de la misma página, ya sea para documentar alguna etiqueta
y/o información.
Sintaxis

Ejemplo de Título y comentarios
Etiquetas del Cuerpo (BODY)
Actualmente las etiquetas utilizadas dentro del cuerpo de una página HTML nos permiten
darle la presentación al texto de distintas formas, así como a las imágenes, lo que podemos
hacer con HTML es lo siguiente.
♦ Dar Formato a un Texto.
♦ Crear listas.
♦ Establecer vínculos hacia otras páginas.
<HTML> 
<HEAD>
<TITLE> Título de la página
</TITLE>
</HEAD>
<BODY>

</BODY>
</HTML>

con HTML y Flash
15 /113
♦ Insertar imágenes.
♦ Crear tablas.
♦ Utilizar imágenes como vínculos hacia otras páginas.
♦ Crear formularios.
♦ Crear Marcos o Frames.
• Dar formato a un texto
Se pueden obtener seis diferentes tipos de tamaño de fuente para título de encabezados.
Se puede dar formato al texto con negritas, cursivas, itálicas, subrayadas, etc.
Se pueden emplear diferentes tipos de fuentes y tamaños dependiendo del Visualizador.
Se puede dar color al texto.
• Crear Listas
Si va a presentar información en la página HTML, podría ser útil desplegar los datos de
manera que tengan sentido y sean fáciles de leer. Nos permite crear listas con viñetas o
viñetas numeradas.
• Establecer Vínculos hacia otras páginas
Nos permite acceder a otros documentos del Web de manera fácil y sin necesidad de que
nosotros demos las direcciones específicas de esos archivos. Además podemos realizar
ligas hacia nuestro mismo Web, un Web distinto o dentro de la misma página.
• Insertar Imágenes
La mayoría de los Visualizadores nos permiten agregar imágenes a nuestra Página
HTML dentro de las cuales acepta formato GIF y JPG, que son las más utilizadas.
• Crear Tablas
Si necesitamos que nuestra información sea presentada en filas y columnas se pueden
insertar tablas. Tenemos que tener en cuenta que un espacio en blanco en la página no
significa que HTML dejara espacios en blanco o líneas.
• Utilizar imágenes como vínculos hacia otras páginas.

con HTML y Flash
16 /113
Dentro de las bondades que tiene HTML, una es utilizar imágenes como vínculos hacia
otras páginas; podemos analizar una imagen con algún programa y obtener los valores
de las coordenadas para así utilizarla como vínculo.
• Utilizar formularios
Una de las características importantes dentro del Web es poder interactuar con las
personas que navegan en Internet mediante formularios.
• Crear Marcos (Frames)
Los Marcos son utilizados para desplegar más de una página HTML a la vez en el
Navegador.
III. Formato de una Página.
Etiquetas Básicas o de Texto.
Las etiquetas básicas son aquellas que se utilizan para darle formato a un texto, y pueden
ser para poner encabezados negritas, cursivas, etc. Pero vamos a describirlas a continuación
e incluir ejemplos ilustrativos para su mayor comprensión.
♦ Etiquetas de Texto más Utilizadas
<B>Texto </B> Negrita
<I>Texto </I> Itálica
<U>Texto </U> Subrayada
<S>Texto </S> Tachada
<BLINK> Texto </BLINK> Intermitente
<TT>Texto </TT> Monoespaciada
Ejemplo:
Texto Negrita Texto Itálica Texto Subrayada Texto Tachada

con HTML y Flash
17 /113
♦ Texto Predeterminado <PRE>
<PRE> Texto </PRE> Texto preformateado, respeta los saltos de línea
Texto <P> Fin de párrafo (Salto de línea doble)
Texto <BR> Salto de línea sencillo
Ejemplo:
♦ Texto centrado <CENTER>
<CENTER> Texto </CENTER> Centra el Texto dentro del Navegador
<HR> Muestra una delgada línea en el Navegador
Está etiqueta tiene los siguientes
Noshade Indica que la línea se rellena de color gris
Size Indica el grueso de la línea en pixeles (1,2,...n)
Width Indica el largo de la línea en caso de no definirlo
toma el 50% del Navegador.
Ejemplo:
Ahora realizaremos nuestra primera página con el siguiente ejemplo
<PRE>
Por debajo de la mesa,
acaricio tu rodilla,
y bebo sorbo a sorbo
Tu mirada angelical.
</PRE>
Vivo en un país libre <BR>
cual solamente puede ser libre <BR>
en esta tierra, en este instante <BR>
Y soy feliz porque soy Gigante <BR>
Amo a una mujer clara, <BR>
Que amo y me ama, <BR>
Sin pedir nada, o casi nada <BR>
Que no es lo mismo pero es igual. <P>
<CENTER> Texto </CENTER>
<HR Noshade Size=2 Width=50%>Texto </HR>

con HTML y Flash
18 /113
Ejemplo numero 1:
<HTML>
<HEAD>
<TITLE> Mi primera página del curso HTML </TITLE>
</HEAD>
<BODY>
<H1> <CENTER> Primera página </CENTER> </H1>
<HR>
Vamos a definir una página Web como aquello que el usuario ve en la ventana
de su navegador, mientras que un documento Web será el código interno que
genera la página, y que por lo tanto contendrá elementos visibles en la página
Web y otros elementos que no serán visibles en ningún momento en la
ventana del navegador.<P>
<HR>
</BODY>
</HTML>
Nota:
Los acentos en lenguaje HTML se ponen mediante caracteres especiales, ya que de esta
forma estamos forzando a que nuestro texto se visualice acentuado en cualquier
navegador donde se despliegue nuestra página, como se verá a continuación.

con HTML y Flash
19 /113
Fuentes
Se pueden emplear diferentes tipos de fuentes y tamaños dependiendo del navegador con el
cual estemos trabajando, además se puede dar color al texto, así como definir el tamaño de
la letra a utilizar.
El tamaño de fuente por defecto es de 3, pero nos permite utilizar los tamaños de 1 al 7.
Partiendo que el tamaño inicial es de 3 y queremos utilizar el tamaño 4 podemos hacerlo de
dos maneras:
Sintaxis.
1. <FONT Size=4 > Texto </FONT>
2. <FONT Size=+1> Texto </FONT>
Si queremos utilizar un tipo de fuente debemos de saber las que acepta nuestro navegador
ya que dependemos de éste. Pero también podemos darle color a la letra con el Atributo
Color.
Sintaxis.
1. <FONT Color = “red”> Texto </FONT>
2. <FONT Color = “#ff000”>Texto </FONT>
3. <FONT Face = "Arial"> Texto </FONT>
Caracteres especiales
Los caracteres especiales utilizados para páginas HTML son: los acentos, las eñes, los
distintos caracteres pueden ser &, >, <, $, etc.
Sintaxis Entidad a utilizar
Acentos &"vocal"acute;
Eñes &"n"tilde;
Ejemplo:
• á é í ó ú
• generación generación
• niñez niñez

con HTML y Flash
20 /113
Tabla de Caracteres Especiales.
Símbolo Nombre de la Entidad Referencia de Carácter
Símbolo < < <
Símbolo > > >
Símbolo ¢ ¢ ¢
Símbolo £ £ £
Símbolo ¥ ¥ ¥
Símbolo © ® ©
Símbolo ® ® ®
Símbolo ° ° °
Símbolo ¼ ¼ ¼
Símbolo ½ ½ ½
Símbolo ¾ ¾ ¾
Símbolo × × ×
Encabezados
<H# > Texto </H#>
Los encabezados dentro de la página los ponemos con la etiqueta <H#> donde los números
son 1, 2, 3, 4, 5, 6. Siendo 1 el tamaño mayor y 6 el tamaño menor de Encabezado.
Ejemplo:
♦ Código de Colores RGB
El código esta definido por la combinación de los colores primarios que son Rojo “Red”,
Verde “Green” y Azul “Blue” - RGB -, la combinación de todos los colores da como
resultado el Blanco y la ausencia total de estos da como resultado el negro.
Estos son algunos colores de los más utilizados, pero existe una gama de 16 millones.
COLORES COLOR EN
INGLES
CODIGO HEXADECIMAL RGB
R G B
Rojo Red ff 00 00
Verde Green 00 ff 00
Texto 1 Texto 2 Texto 3 Texto 4 Texto 5 Texto 6

con HTML y Flash
21 /113
Azul Blue 00 00 ff
Blanco White ff ff ff
Negro Black 00 00 00
Amarillo Yellow ff ff 00
Gris Gray cc cc cc
Rosa Pink ff 00 ff
♦ Más Etiquetas de Texto
<PLAINTEXT> Texto </PLAINTEXT>
Aniquila las etiquetas que estén contenidas dentro de ella. Esta etiqueta es utilizada cuando
se quiere presentar en el Visualizador alguna parte de código HTML como información.
<BLOCKQUOTE> Texto </BLOCKQUOTE>
Esta etiqueta es utilizada para que el texto tenga una sangría de 5 columnas.
<BASEFONT> Texto </BASEFONT>
Define el tipo, tamaño y color de fuente que va ha ser utilizado dentro de toda la página
HTML.
♦ Etiquetas Alternativas
<STRONG> Texto </ STRONG > Negrita
<EM> Texto </EM> Subrayada
<CITE> Texto </CITE> Subrayada
<CODE> Texto </CODE> Monoespaciada
<KBD> Texto </KBD> Monoespaciada
<SAMP> Texto </SAMP> Monoespaciada
<ADDRESS> Texto </ADDRESS> Cursivas
<BIG> Texto </BIG> Grandes
<SMALL> Texto </SMALL> Pequeñas
<SUB> Texto </SUB> Subíndice
<SUP> Texto </SUP> Superíndice

con HTML y Flash
22 /113
Ejemplo:
IV. Listas
Definición
Hay ocasiones en las que debemos presentar en nuestras páginas algún tipo de índice o
destacar en breves palabras los puntos fundamentales de algún tema concreto. Y en esas
ocasiones necesitamos alguna forma de presentación de contenidos especialmente
concebida para ello. Una forma de presentar la información dentro de páginas HTML es
mediante listas y para ello contamos con cuatro tipos de listas.
Cualquier tipo de lista debemos definirla antes de utilizarla. Para definir un elemento de
una lista utilizamos la etiqueta <LI>.
Descripción:
Listas Ordenadas
Todas las listas de este tipo se construyen partiendo de la pareja de etiquetas base
<OL>...</OL> (Ordered List=Lista Ordenada)
Estas etiquetas base forman un bloque por sí mismas, deben siempre ir en parejas apertura-
cierre y contienen en su interior un número variable de etiquetas <LI>...</LI>, que son
las que van a definir los diferentes elementos textuales de las listas.
OL: Lista ordenada
LI: Elementos de una lista
Las listas ordenadas tienen las siguientes opciones.
<OL TYPE = Opción>
l = Números (estándar)
Texto Subíndice
Texto Superíndice
Texto Grande Texto Pequeña
LI : Elementos de una lista
OL: Lista ordenada
UL: Lista No ordenada
DL: Lista de Glosario

con HTML y Flash
23 /113
a = Letras minúsculas
A = Letras mayúsculas
i = Números romanos en minúsculas.
I = Números romanos en mayúsculas.
♦ Atributo start="x":
Define el primer secuenciador de la serie de elementos de la lista, es decir, cuál va a ser el
primer identificador que va a aparecer. Los valores del parámetro "x" son siempre números
enteros a partir de 1. Si no se especifica este atributo, la lista empezará siempre por el
primer elemento
Ejemplos:

con HTML y Flash
24 /113
Listas No ordenadas
Este tipo de listas muestran una serie de elementos que no están dispuestos según un
patrón específico de ordenación, es decir; que están definidos los diferentes elementos
mediante un signo determinado común a todos ellos, signo que normalmente se denomina
viñeta. Todas las listas de este tipo se construyen partiendo de la pareja de etiquetas base
<UL>...</UL> (Unordered List=Lista Sin ordenar).
Estas etiquetas base forman un bloque por sí mismas, deben siempre ir en parejas apertura-
cierre y contienen en su interior un número variable de etiquetas <LI>...</LI>, que son
las que van a definir los diferentes elementos textuales de las listas.
UL: Lista no ordenada
LI: Elementos de una lista
Las listas No ordenadas tienen las siguientes opciones.
<UL Type = Opción >
disc = disco (estándar)
circle = circulo
square = cuadrado
Ejemplo:
Listas de Definiciones
Las listas de definiciones se caracterizan por presentar los elementos que la forman
dispuestos según un esquema de tipo glosario, apareciendo una serie de elementos con sus
correspondientes definiciones.
El código es:
<UL TYPE="disc">
<LI>primer elemento</LI>
<LI>segundo elemento</LI>
<LI>tercer elemento</LI>
</UL>
El resultado es:
• primer elemento
• segundo elemento
• tercer elemento

con HTML y Flash
25 /113
Estas listas se construyen partiendo de la pareja de etiquetas de bloque <DL>...</DL>
(Definitions List), y dentro de ellas se van estableciendo los elementos mediante la etiqueta
<DT>, y su definición correspondiente mediante la etiqueta <DD>. Las etiquetas <DT> y
<DD> no poseen pareja de cierre, pero la etiqueta padre <DL> se debe cerrar siempre con
su correspondiente pareja </DL>.
DL = Etiqueta de inicio.
DT = Etiqueta de elemento.
DD = Etiqueta de Co-elemento.
Ejemplo:
Listas Anidadas
Al tener las listas características de bloque es posible anidar unas con otras sin ningún tipo
de problema, al igual que ocurre con las tablas. Y esta anidación puede tener cuantos
niveles queramos, con tan sólo respetar la sintaxis propia y tener cuidado de cerrar bien las
etiquetas abiertas.
La forma de anidar sucesivamente varias listas es siempre la misma. Dentro de una etiqueta
<LI> se introduce el bloque completo de la lista anidada, cuidando de cerrar correctamente
tanto el bloque hijo (con su correspondiente etiqueta </OL> p.e.) como el elemento <LI>
padre (con su correspondiente etiqueta </LI>).
El Código es:
<DL>
<DT>Primer elemento
<DD>Es el primero de la lista
<DT>Segundo elemento
<DD>Es el que va después del primero
</DL>
El resultado es:
Primer elemento
Es el primero de la lista
Segundo elemento
Es el que va después del primero

con HTML y Flash
26 /113
Ejemplo:
El código es:
<OL>
<OL type="a">
<LI>sub-elemento 1-1</LI>
</OL>
<OL type="a">
<UL type="disc">
<LI>sub-elemento 2-1-1</LI>
<LI>sub-elemento 2-1-2</LI>
</UL>
</OL>
</OL>
El Resultado es:
1. primer elemento
a. sub-elemento 1-1
b. sub-elemento 1-2
c. sub-elemento 1-3
2. segundo elemento
a. sub-elemento 2-1
• sub-elemento 2-1-1
• sub-elemento 2-1-2
b. sub-elemento 2-2
3. tercer elemento

con HTML y Flash
27 /113
Anidando otros elementos:
El código es:
<UL>
<TABLE Border="1">
<TR>
<TD>celda 1-1</TD>
<TD>celda 1-2</TD>
</TR>
<TR>
<TD>celda 2-1</TD>
<TD>celda 2-2</TD>
</TR>
</TABLE>
</LI>
</UL>
El Resultado es:
• primer elemento
• segundo elemento
celda 1-1 celda 1-2
celda 2-1 celda 2-2
• tercer elemento

con HTML y Flash
28 /113
V. Tablas
Definición
Las tablas son una de las herramientas mas útiles de que disponemos en HTML,
ayudándonos a situar dentro de nuestro documento los diferentes elementos que lo
componen. Las tablas organizan la información en una matriz o cuadricula de columnas
verticales y renglones horizontales, cada cuadro se denomina celda, una celda puede
contener texto, listas o gráfico.
Las Tablas son utilizadas muy a menudo ya que la mayoría de las Páginas HTML necesita
presentar la información en filas y columnas. Tenemos que tener en cuenta que un espacio
en blanco en la página no significa que HTML dejara espacios en blanco o líneas.
Formato
Las tablas constan de tres partes básicas: Título, Encabezado y Filas de Celdas. Están
formadas por filas, columnas y celdas. Cada espacio horizontal continuado es una fila y cada
espacio vertical continuado es una columna, definiéndose una celda como el espacio
formado por la intersección de una fila y una columna.
Empiece por la esquina superior izquierda, hasta llegar a la esquina inferior derecha cada
celda debe contener algo; use espacios en blanco para crear celdas vacías.
Título
Encabezados
Filas de Celdas

con HTML y Flash
29 /113
A continuación se describen las etiquetas utilizadas en las tablas.
Donde:
TABLE : Indica que es una Tabla
CAPTION : Título de la Tabla
TH : Encabezados
TR : Renglón
TD : Datos de la Tabla
Etiqueta: TABLE
Atributo Parámetro VP Descripción
Border 0,1,2,..n 0 Ancho del recuadro
Width % ó pixeles 30% Ancho de tabla en Navegador
Cellspacing % ó pixeles 2 Espacio entre celdas
Cellpadding % ó pixeles 0 Espacio interno de celda entre los bordes y su contenido
Etiqueta: CAPTION
Align TOP * Título arriba de la tabla
BOTTOM Título abajo de la tabla
Align LEFT Izquierda
CENTER * Centro
RIGHT Derecha
NOTA: No acepta los dos Align, sólo sí se toma TOP por defecto.
Etiqueta: TR
Bgcolor Color Nulo Define el color de fondo de la celda.
Background Ubicación del
archivo a usar
como fondo.
Align RIGHT Derecha
CENTER * Centro
LEFT Izquierda
Valign TOP Arriba
MIDDLE * En medio
BOTTOM Abajo

con HTML y Flash
30 /113
Etiqueta: TH
Bgcolor Color Nulo Define el color de fondo de la celda.
Background Ubicación del archivo
a usar como fondo.
Colspan 1,2,3, .... 1 Define el número de
columnas que afecta el encabezado
Align RIGHT Derecha
CENTER * Centro
LEFT Izquierda
Valign TOP Arriba
MIDDLE * En medio
BOTTOM Abajo
Etiqueta: TD
Bgcolor Color Nulo Define el color de fondo
de la celda.
Background Ubicación del archivo
a usar como fondo.
Rowspan 1,2,3, .... 1 Define el número de
renglones que afecta la celda.
Align RIGHT Derecha
CENTER * Centro
LEFT Izquierda
Valign TOP Arriba
MIDDLE * En medio
BOTTOM Abajo

con HTML y Flash
31 /113
Ejemplos de Tablas
Tabla Básica sin bordes
<H2>Tabla Básica sin bordes</H2>
<TABLE>
<CAPTION> Ejemplo 1</CAPTION>
<TR><TH>Columna 1</TH><TH>Columna 2</TH><TH>Columna 3</TH></TR>
<TR><TD>Ren1 Dat1</TD><TD>Ren2 Dat2</TD><TD>Ren3 Dat3</TD></TR>
</TABLE>
<HR>
Resultado
Con Border=1, 60% Browser, Espacio entre Celdas 3 y Datos 15
<H2>Con Border=1,60% Browser, Espacio entre Celdas 3 y Datos 15</H2>
<TABLE Border=1 Width=60% Cellspacing=3 Cellpadding=15>
<CAPTION> Ejemplo 2</CAPTION>
</TABLE>
<HR>

con HTML y Flash
32 /113
Resultado
Atributo en CAPTION Align Center
<H2>Atributo en CAPTION Align Center <H2>
<TABLE Border=1>
<CAPTION Align = “Center”>Ejemplo 3</CAPTION>
</TABLE>
<HR>

con HTML y Flash
33 /113
Resultado
Atributos en las Celdas
<H2>Atributos en las Celdas</H2>
<TABLE Border=5 >
<CAPTION> Ejemplo 4 </CAPTION>
<TR>
<TH> </TH>
<TH>Arriba</TH>
<TH>Centrado</TH>
<TH>Abajo</TH></TR>
</TR>
<TR>
<TH Width=100 >Arriba</TH>
<TD Width=100 Height=100 Align = “LEFT” VAlign = “TOP>Ren1 Dat1</TD>
<TD Width=100 Height=100 Align = “CENTER” VAlign = “TOP>Ren1 Dat1</TD>
<TD Width=100 Height=100 Align = “RIGHT” VAlign = “TOP>Ren1 Dat1</TD>
</TR>

con HTML y Flash
34 /113
<TR>
<TH> Centrado</TH>
<TD Width=100 Height=100 Align = “LEFT VAlign = “MIDDLE>Ren1 Dat1</TD>
<TD Width=100 Height=100 Align = “CENTER VAlign = “MIDDLE>Ren1 Dat1</TD>
<TD Width=100 Height=100 Align = “RIGHT VAlign = “MIDDLE>Ren1 Dat1</TD>
</TR>
<TH> Izquierda</TH>
<TD Width=100 Height=100 Align = “LEFT VAlign = “BOTTOM>Ren1 Dat1</TD>
<TD Width=100 Height=100 Align = “CENTER VAlign = “BOTTOM>Ren1 Dat1</TD>
<TD Width=100 Height=100 Align = “RIGHT VAlign = “BOTTOM>Ren1 Dat1</TD>
</TR>
</TABLE>
<HR>
Resultado

con HTML y Flash
35 /113
Atributo BGCOLOR
<H3>Atributo BGCOLOR </H3>
<TABLE BORDER=5 Cellpadding=20>
<TR>
<TH Bgcolor=red > 1 </TH><TH Bgcolor=green > 2 </TH>
<TH Bgcolor=gray> 3 </TH><TH Bgcolor=yellow> 4 </TH>
</TR>
</TABLE>
<HR>
Resultado
Atributo Background
<H3>Atributo Backgroud </H3>
<TABLE BORDER=5 Cellpadding=20>
<TR>
<TD Background="..Mis imágenesuni 1.jpg" Width="200"> Hola </TD>
<TD Background="..Mis imágenesuni 2.jpg" Width=200 > Hola </TD>
<TD Background="..Mis imágenesuni 3.jpg" Width=200> Hola </TD>
<TD Background="..Mis imágeneshadas.jpg" Width=200> Hola </TD>
</TR>
</TABLE>
<HR>

con HTML y Flash
36 /113
Resultado
Nota:
El atributo Background funciona para cada celda independiente, para cada fila o para
toda la tabla. Solo hay que tomar en cuenta la ruta de donde vamos a tomar la imagen.

con HTML y Flash
37 /113
VI. Ligas o Vínculos
Definición
Las Ligas también llamadas vínculos o enlaces, nos permiten acceder o brincar a otros
documentos del Web, para lo cual utiliza el concepto de Hipertexto, la cual es una palabra o
frase de una página Web que, al hacer clic sobre ella nos envía hacia un documento
diferente del Web. Nos podemos encontrar con tres distintos tipos de Ligas.
♦ Hacia otras páginas de nuestro Web
♦ Hacia páginas de un Web diferente
♦ Hacia la misma página.
Las ligas o enlaces son los elementos en los documentos HTML que le dan el toque de
interés a las páginas de Internet.
Sintaxis.
La etiqueta que se utiliza para realizar un vínculo es <A Href >, la sintaxis es la siguiente:
<A Href = “URL”> Hipertexto </A>
de donde:
Href
Es el atributo que nos permite indicarle al documento hacia donde se va ha realizar el
hiperenlace o salto.
Hipertexto
Es una palabra o frase que nos servirá para acceder a otro documento. Simplemente
haciendo clic sobre de él. Además de texto podemos poner imágenes que servirán de la
misma manera para realizar los accesos a otros documentos.
URL’s
Los URL’s ( Universal Resource Locator ) indican la ubicación de un archivo, además son
también llamados rutas de acceso.
Existen dos tipos de Rutas Absolutas y Relativas, A continuación mencionaremos como
funcionan.

con HTML y Flash
38 /113
Rutas Absolutas y Relativas
Rutas Absolutas
Definen la ubicación del archivo, empezando desde el nivel más alto y enlistan cada
directorio necesario para encontrar dicho archivo. Este tipo de ruta tiene la siguiente
estructura:
Protocolo://Servidor/Directorios/Archivo.html
Donde:
Protocolo:
Es el método que se emplea para transferir los datos a través de las líneas de Internet, los
protocolos utilizados en el Web son los servicios que proporciona Internet, como por
ejemplo Ftp, Http, Gopher, Telnet, etc. El más utilizado es Http.
Ejemplo.
<A Href = “http//: www.unam.mx/...” >Hipertexto </A>
Servidor:
El servidor es el nombre de la computadora donde se encuentra el documento que
deseamos acceder.
Ejemplo:
<A Href = “http//:www.ingenieria.unam.mx/ .......” >Hipertexto </A>
Directorios/Archivo.html:
Una vez que tenemos identificado el servidor, el siguiente paso es indicarle la posición
exacta que tiene el documento dentro del servidor. Para lo cual debemos indicar la ruta
exacta en donde se encuentra el archivo.
<A Href = “http//:www.ingenieria.unam.mx/~unica/calendario_cursos.html” >Hipertexto </A>
Nota:
Si alguna de las partes antes mencionadas tiene algún error al indicarlas, nos enviará un
mensaje el Navegador de que no encontró el documento y debemos de revisar que el URL
este escrito correctamente.

con HTML y Flash
39 /113
Rutas Relativas
Definen la ubicación de un archivo tomando en cuenta como referencia la posición del
archivo que tiene el vínculo. El Navegador busca el archivo en el mismo directorio en donde
se encuentra el documento actual.
Cuando utilizamos el nombre de un archivo como URL estamos utilizando una ruta
relativa. En este caso el Navegador busca el archivo en el mismo directorio en el que está el
documento actual, si no esta allí no podrá encontrar el archivo.
Ejemplo:
<A Href = “archivo.html.” >Hipertexto </>A
Las Ligas
Como ya se menciono las ligas hacia el mismo Web son aquellas que realizamos ya sea en
forma relativa o Absoluta, dentro de nuestro mismo servidor de Web.
Ejemplo:
Ligas a Web remotos
Las ligas hacia Web remotos se realizan de la misma forma que hacia nuestro Web solo que
la diferencia es que la petición se realiza a otro servidor distinto, recordando el esquema de
funcionamiento de las páginas HTML imaginemos como hace la petición de un servidor a
otro.
El Código es:
<A Href = “http//:www.ingenieria.unam.mx” > Facultad de Ingeniería</A>
<A Href =”http//:www.derechos.unam.mx” > Facultad de Derecho </A>
<A Href =”http//:www.fca.unam.mx” > Facultad de Contaduría y Administración </A>
El resultado es:
Facultad de Ingeniería Página de Ingeniería, UNAM
Facultad de Derecho Página de Derecho, UNAM
Facultad de Contaduría y Administración Página de contaduría, UNAM

con HTML y Flash
40 /113
Ejemplo:
Anclas
Conocidas como ligas a la misma página, el texto y los gráficos pueden vincularse a lugares
del mismo documento. Éste tipo de ligas son utilizadas cuando tenemos documentos muy
grandes, que nos obligan a acceder rápidamente a los temas importantes del documento.
Estas ligas constan de dos partes:
♦ El Ancla
♦ El Vínculo mismo
El Ancla
Identifica el lugar al cual nos queremos mover. Funcionará como una especie de bandera
que identifica la posición exacta del lugar al cual queremos llegar, una vez que lleguemos a
el ancla esta aparecerá en la parte superior del Visualizador.
Sintaxis:
<A Name = “#Nombre” >
Name
Este atributo viene a sustituir a Href para indicarnos que el vínculo se realizará en el
mismo documento.
El Código es:
<A Href = “http//www.microsoft.com.” >Microsoft</A>
<A Href =”http//www.presidencia.gob.mx” >Presidencia</A>
<A Href =”http//www.acapulco.gob.mx.” >Acapulco</A>
El resultado es:
Microsoft Página de Microsoft Corporation
Presidencia Página de la presidencia de la Republica
Acapulco Página del Puerto de Acapulco Gro.

con HTML y Flash
41 /113
#Nombre
Es la palabra clave la cual nos indicará el lugar a donde se moverá la página.
El Vínculo mismo
El vínculo utiliza el nombre del ancla en lugar del nombre del archivo, de esta manera
reconocerá que tenemos que regresar al lugar donde está ese archivo.
Sintaxis:
<A Href = “#Nombre”> Hipertexto </A>
Href
Como se menciono anteriormente la referencia que nos permite indicarle al documento
hacia donde se va ha realizar el salto dentro del mismo documento.
#Nombre
Es ancla utilizada para saltar al mismo documento, este nombre debe ser el mismo que se
declaró anteriormente.
Ejemplo:

<A NAME="POEMAS">
<BR>
<BR>
<BR>
<B><U>PRIMER EJEMPLO DE ANCLAS</U></B>
<P>
<P>
<FONT COLOR="#ff6040">POEMAS </FONT>
<BR>
<BR>
<BR> 
<A HREF="#POEMAUNO"> POEMA UNO </A><BR>
<A HREF="#POEMADOS"> POEMA DOS </A><BR>
<A HREF="#POEMATRES"> POEMA TRES </A><BR>
<A HREF="#POEMACUATRO"> POEMA CUATRO </A><BR>
<A HREF="#POEMACINCO"> POEMA CINCO </A><BR>
<BR>
<BR>
<BR>

<A NAME="POEMAUNO"> <B> POEMA UNO <B><BR>
<PRE>
Lento, amargo animal...

con HTML y Flash
42 /113
Lento, amargo animal
que soy, que he sido,
amargo desde el nudo de polvo y agua y viento
que en la primera generación del hombre pedía a Dios.
</PRE>
<A HREF="#POEMAS"> REGRESA A POEMAS </A><BR>

<BR>
<BR>
<BR>

<A NAME="POEMADOS"> <B> POEMA DOS <B><BR>
<PRE>
Amargo como esos minerales amargos
que en las noches de exacta soledad
maldita y arruinada soledad
sin uno mismo—
trepan a la garganta
y, costras de silencio,
asfixian, matan, resucitan.
</PRE>

<BR>
<BR>
<BR>

<A NAME="POEMATRES"> <B> POEMA TRES <B><BR>
<PRE>
Amargo como esa voz amarga
prenatal, presubstancial, que dijo
nuestra palabra, que anduvo nuestro camino,
que murió nuestra muerte,
y que en todo momento descubrimos
</PRE>

<BR>
<BR>
<BR>

<A NAME="POEMACUATRO"> <B> POEMA CUATRO <B><BR>

con HTML y Flash
43 /113
<PRE>
Amargo desde dentro,
desde lo que no soy
—mi piel como mi lengua—,
desde el primer viviente,
anuncio y profecía.
</PRE>

<BR>
<BR>
<BR>

<A NAME="POEMACINCO"> <B> POEMA CINCO <B><BR>
<PRE>
Lento desde hace siglos,
remoto —nada hay detrás—,
lejano, lejos, desconocido.
Lento, amargo animal
que soy, que he sido.
</PRE>

con HTML y Flash
1 /113

con HTML y Flash
2 /113
VII. Imágenes
Tipos de Imágenes
Los Navegadores pueden desplegar imágenes junto con el texto, lo que hace que los
documentos se vean mejor. Lo que es más importante, las imágenes comunican
información que sería imposible, o muy difícil de transmitir con palabras. Los principales
usos que se le pueden dar a las imágenes son:
♦ Insertar un Logotipo de una empresa en particular.
♦ Imágenes de anuncios
♦ Fotos panorámicas y personales
♦ Gráficos de Población
♦ Firmas
♦ Iconos o imágenes ya establecidas
♦ Utilizar como liga
♦ Etc.
Ahora bien los tipos de imágenes que pueden ser utilizadas dentro de una página para
Internet, pueden ser del tipo:
♦ GIF
♦ JPG o JPEG
GIF (Graphics Interchange File)
Este tipo de imágenes no utiliza mucho espacio de memoria y además se cargan en vídeo
muy rápido. Maneja un máximo de 256 colores.
JPG o JPEG (Join Photographics Expert Group)
Este tipo de imágenes generalmente son fotografías digitalizadas y manejan un mayor
número de colores que las GIF, hasta 16 millones de tonos.
Sintaxis
<IMG Src =”Nombre de la Imagen. su extensión” >
Donde:
IMG
Es la etiqueta que define que será utilizado un archivo de imagen para desplegarlo en el
documento de nuestra página (Puede ser GIF o JPG).

con HTML y Flash
1 /113
Src
Este es el atributo que indica el origen de donde se obtendrá el archivo imagen.
Nombre de la Imagen
El nombre de la imagen debe de contener la ruta relativa y/o absoluta de donde se obtendrá
el archivo, así como el mismo nombre de la imagen y su extensión correspondiente.
Ejemplo:
Modificadores de Imagen
Atributos de una imagen sin texto.
Atributo Parámetro Acción
Alt Texto El Texto alterno que indica lo que contiene la imagen.
Width % ó Pixeles Modifica el ancho del tamaño de la imagen
Height % ó Pixeles Modifica el alto del tamaño de la imagen
Border 0,1,2, .... Indica el borde de la imagen, el default es cero.
Align Left o Right Alineado en el Browser, por defecto es Left.
Alineado de texto alrededor de la imagen.
Atributo Parámetro Acción
Align Top Texto en la parte superior de la imagen
Align Texttop Texto en la parte superior de la imagen
Align Middle Texto en la parte media de la imagen
Align Bottom Texto en la parte inferior de la imagen
Align AbsMiddle Texto en la parte media absoluta de la imagen
Align AbsBottom Texto en la parte baja absoluta de la imagen
Align Baseline Texto en la línea base de la imagen
Vspace Pixeles Espacio de arriba y abajo entre el texto
y la imagen.
Hspace Pixeles Espacio der e izq entre el texto y la imagen.
<IMG Src=”.../IMAGENES/logo.jpg ”>

con HTML y Flash
2 /113
VIII. Utilerías para la Página.
Hasta ahora se han mencionado atributos para algunas etiquetas, no se han mencionado los
demás servicios de Internet en las Ligas, comentaremos como se utiliza una imagen como
liga, ya que en el siguiente tema utilizaremos una imagen como mapa de ligas.
Etiqueta BODY
La etiqueta BODY también cuenta con muchos atributos y a continuación se describirán
algunos, cabe mencionar que estos son muy importantes dentro de los documentos HTML,
ya que dan una apariencia agradable al visitar dichos documentos.
♦ Background
♦ Código de Colores
♦ Bgcolor, Text, Link, Vlink y Alink
♦ Márgenes del Documento
ATRIBUTO PARÁMETRO ACCIÓN
BgColor Color Da color de fondo a la página.
Background Archivo de imagen Utiliza una imagen como fondo de la página.
Text Color Da color al texto de toda la página
Link Color Da color al hipertexto sin ser activado
Vlink Color Da color al hipertexto cuando ha sido visitado
Alink Color Da color al hipertexto mientras esta activando
Leftmargin Pixeles Sirve para indicar la primer columna de margen
Topmargin Pixeles Sirve para indicar el primer renglón de inicio
MarginWidth Pixeles Indica el ancho del margen
MarginHeight Pixeles Indica el alto del margen
Ejemplo:
<BODY Background=”C:/IMAGENES/Invierno.jpg” BgColor=”Pink” Text=”Black”
Link=”Red” Alink=”Green” Vlink=”White”>

con HTML y Flash
3 /113
Resultado
Nota:
Todos los atributos mostrados en la tabla son para darle presentación al cuerpo de
nuestra página, para usar cada uno de ellos debemos de tomar en cuenta el diseño que
deseamos obtener.
Ligas con Imágenes
Ya vimos en capítulos anteriores la forma de crear ligas, ahora vamos a ver como se crean
ligas con imágenes.
SRC="ruta_imagen" que establece la localización de la imagen que queremos insertar
mediante la etiqueta IMG, y en donde la ruta puede ser relativa a la estructura de carpetas
del sitio Web o absoluta, en cuyo caso se debe dar la URL completa del fichero gráfico.

con HTML y Flash
4 /113
Ejemplos:
<IMG SRC="..IMAGENES/bandera.jpg"> (ruta relativa)
<IMG SRC="http://www.yahoo.com/imagenes/bandera.jpg"> (ruta absoluta)
y con cualquiera de ellas tendremos ya la imagen incluida dentro de nuestra página, como
se ve a continuación:
Sintaxis
<A Href = “URL” > <IMG Src = “Archivo imagen”> </A>
Ejemplo
Resultado
<ADDRESS>
<A Href="mailto:cesar@cancun.fi-a.unam.mx">
<P>
<P>
<IMG Src=".../IMAGENES/Unica.jpg" Border=2>
<P>
<P>
</A>
</ADDRESS>

con HTML y Flash
5 /113
Nota:
En este ejemplo se vemos la manera de crear una liga o enlace a nuestro correo
electrónico mediante una imagen que nosotros deseemos que aparezca en nuestro
Navegador, esto mediante la etiqueta ADRESS.
Código de Colores
Tablas de Colores
Código Color
000000 Negro
FF0000 Rojo
00FF00 Verde
0000FF Azul
FF00FF Morado
FFFF00 Amarillo
00FFFF Cyan
999000 Gris
FFFFFF Blanco
Ejemplo
Nota:
El código de colores es parte fundamental del diseño de nuestra página, con el podemos
hacer millones de combinaciones, podemos empezar a probar los colores para obtener el
color deseado.
<BODY Background=”#A020A0” BgColor=”#40FF20”>
<FONT Size=”5” Color =”#FF2020”>

con HTML y Flash
6 /113
X. Formularios
Definición.
Los formularios son una de las herramientas de que disponemos a la hora de hacer nuestras
paginas Web interactivas, en el sentido de que nos permiten recopilar información de la
persona que ve la pagina, procesarla y responder a ella.
El proceso comienza con la creación en nuestra página, de un formulario de entrada, de
datos que van a contener diversos campos diferentes en su funcionalidad y que nos van a
permitir recopilar toda aquella información que deseemos de la persona que ve la pagina.
Estos datos, una vez completado el formulario serán enviados normalmente al servidor
para su procesamiento o a nosotros directamente, mediante correo electrónico.
Características
Los formularios deben colocarse dentro del cuerpo del documento HTML, esto significa que
todos los formularios tienen las mismas etiquetas requeridas al principio y al final como
cualquier documento HTML.
Los formularios están formados por una serie de controles distintos, cada uno de los cuales
está asociado a un tipo concreto de datos o una acción predeterminada: botones de envío y
borrado de datos, listas de selección, cajas de entrada de texto, etc.
Los formularios constan de tres partes básicas:
♦ La etiqueta de apertura
♦ El tipo de entrada.
♦ El botón de envío o cancelado.
Etiqueta <FORM> … </FORM>
Estas etiquetas son las que delimitan el comienzo y el final de un formulario. Si queremos
mostrar en una página un elemento aislado de un formulario, aunque sea con otra finalidad
diferente a la del envío de los datos que contenga al servidor (por ejemplo para tratar esa
información mediante Javascript), es necesario delimitar ese elemento de formulario
mediante las etiquetas <FORM> y</FORM>. Si no lo hacemos así, I.Explorer sí mostrara el
elemento, pero Nestcape no.
La pareja de etiquetas se introduce en el código HTML dentro del BODY de la página, en el
lugar en que queramos que nos aparezcan los elementos del formulario.
Sus principales atributos o parámetros son:

con HTML y Flash
7 /113
POST / GET:
Indica el método según el que se van a transferir las variables del formulario. POST envía
los datos, normalmente al programa CGI definido en action o por correo si en action hemos
utilizado mailto.
El método de uso más normal es POST, y en el caso de que estemos mandando el
formulario a nuestra dirección de correo electrónico es obligado usarlo.
El método GET añade los argumentos del formulario al URL recogido en action (utilizando
como separador de las variables la "?"). Con el método GET los datos son encadenados al
URL especificado en action, utilizando el tipo de codificación especificado en el atributo
enctype. Este método se utiliza cuando los datos no modifican la base de datos.
Tipos de Elementos:
Enctype ="tipo"
Indica el tipo de documento que utilizaremos, el mas usado para que lleguen el contenido a
través de un mail con el método post sería "text/plain". Especifica el tipo de encriptación
que se va a realizar con los datos que se van a enviar. Este atributo solamente se aplica si
method es POST.
<INPUT>
La etiqueta <INPUT> va a definir la mayoría de los diferentes elementos que va a contener
el formulario. Es la etiqueta que define el tipo de contenido de entrada y pueden ser campos
de textos casillas de verificación, botones de radio, y lista de selección.
Sus atributos y valores son:
TYPE = "tipo"
Donde tipo puede ser uno cualquiera de los elementos que veremos a continuación:
♦ Text, sirve para introducir una caja de texto simple, y admite los parámetros:
name="nombre", asigna de forma unívoca un nombre identificador a la
variable que se introduzca en la caja de texto.
maxlenght="n", fija el número máximo de caracteres que se pueden
introducir en la caja de texto.
size="n", establece el tamaño de la caja de texto en pantalla.
value="texto", establece el valor por defecto del texto que aparecerá
inicialmente en la caja de texto.

con HTML y Flash
8 /113
disabled, desactiva la caja de texto, por lo que el usuario no podrá
escribir nada en ella.
accept="lista de content-type", indica el tipo de contenido que
aceptará el servidor.
Sus posibles valores son:
• text/html
• application/msexcel
• application/msword
• application/pdf
• image/jpg
• image/gif
readonly, establece que el texto no puede ser modificado por el usuario,
será solo de lectura para el usuario.
tabindex="n", especifica el orden de tabulador que tendrá el campo
respecto todos los elementos que incluye el formulario.
alt="texto", asigna una pequeña descripción al elemento.
♦ Radio, define un conjunto de elementos de formulario de tipo circular, en los que el
usuario debe optar por uno solo de ellos, que se marca con el ratón o tabulador.
Admite los parámetros:
name="nombre", asigna un nombre identificador único a la variable
definida por el elemento. Este identificador debe ser el mismo para todos
los elementos radio de un grupo.
value ="valor", define un valor posible de la variable para cada uno de
los radio botones.
checked, marca por defecto uno de los radio botones del grupo.
disabled, desactiva el radio botón, por lo que el usuario no podrá
marcarlo.
♦ Checkbox, que define una o mas casillas de verificación, pudiendo marcar el
usuario las que desee del conjunto total. Si pinchamos una casilla con el ratón o la
activamos con el tabulador y le damos a la barra espaciadora la casilla se marca; si
volvemos a hacerlo, la casilla se desmarca. Sus parámetros complementarios son:
name="nombre", asigna un nombre identificador único a la variable
definida por el elemento. Este identificador debe ser el mismo para todos
los elementos conjunto de casillas.
value="valor", define un valor posible de la variable para cada una de
casillas de verificación.
checked, marca por defecto una o mas de las casillas del grupo.

con HTML y Flash
9 /113
disabled, desactiva la casilla de verificación, por lo que el usuario no
podrá marcarla.
♦ Button, define un botón estándar. Este botón puede ser usado para diferentes
acciones, pero normalmente se le da utilidad mediante JavaScript, mediante el
evento "OnClick". Sus parámetros son:
name="nombre", asigna un nombre al botón, que nos puede servir para
acciones con lenguaje de Script.
value="valor", define el texto que va a figurar en el botón.
disabled, desactiva el botón, de tal forma que no se produce ninguna
acción cuando se pulsa, ya que permanece inactivo.
♦ Password, define una caja de texto para contener una clave o password, por lo que
el texto que introduzca el usuario aparecerá como asteriscos, por motivos de
seguridad. Sus parámetros opcionales son los mismos que los del tipo text.
♦ File, define un archivo que puede ser enviado junto con los datos del formulario. En
este tipo de elemento encontramos asociados una caja de texto y un botón en el que
encontramos escrito bien "examinar..." bien "browser...", dependiendo del lenguaje
de nuestro navegador, que al ser pulsado nos abre la típica ventana de exploración de
nuestras unidades de disco, para que seleccionemos el archivo que queremos enviar
al servidor. Cuando elegimos uno su ruta aparece en la caja de texto. Sus principales
atributos son:
title="titulo" muestra un texto en tipo tip al situar el cursor encima del
botón de examinar (sólo en Internet Explorer).
accept="tipo_archivo" determina el tipo de archivo que se admite
como para enviar.
disabled desactiva tanto el botón como la caja de texto, impidiendo al
usuario seleccionar un archivo (sólo Internet Explorer y Nestcape 6x).
size="numero_entero" fija la anchura de la caja de texto asociada.
♦ Submit, incorpora al formulario un botón de envío de datos. Cuando el usuario
pulsa este botón los datos que ha introducido en los diferentes campos del
formulario son enviados al programa del servidor o a la dirección de correo indicada
en action. Sus atributos son:
value=" valor ", define el texto que va a aparecer en el botón de envío.
disabled, desactiva el botón, de tal forma que no se produce ninguna
acción cuando se pulsa, ya que permanece inactivo.

con HTML y Flash
10 /113
♦ Reset, define un botón que al ser pulsado por el usuario borra todos los datos que
hubiera introducido en cualquiera de los campos del formulario. Sus atributos son
los mismos que los de SUBMIT.
Nota:
El botón de envío se usa para enviar al GATEWAY las opciones del formulario. Y además
también cuenta con la opción de cancelar, para limpiar o reiniciar las opciones
predeterminadas del formulario.
Etiqueta <SELECT>...</SELECT>
Mediante esta etiqueta podemos definir una entrada de datos en forma de lista desplegable,
que presenta varias opciones de elección, de tal forma que el usuario puede elegir una o
varias de ellas, si así se especifica. Sus atributos y valores son:
♦ name="nombre", asigna un nombre identificador al campo, de tal forma
que al enviar los datos del formulario la opción elegida será asociada a este
nombre.
♦ size="n", con n= nº entero, que define el número de opciones visibles. Si n=1
el campo de selección se presenta como una lista desplegable, mientras que si
se indica otro valor se presenta como una caja de lista con barra de
desplazamiento.
♦ multiple, permite elegir varias de las opciones a la vez. Si no se especifica
este atributo solamente se podrá escoger una de las opciones. Para ello hay
♦ que mantener pulsada la tecla CONTROL mientras se seleccionan y/o
deseleccionan las diversas opciones.
♦ disabled, desactiva la lista, de tal forma que no se produce ninguna acción
cuando se pulsa una opción, ya que permanece inactiva.
♦ tabindex="n", especifica el orden de tabulador que tendrá el campo
♦ Para introducir cada una de las diferentes opciones de la lista se utiliza la
etiqueta <OPTION>, que admite como parámetros:
♦ value, fija el valor que será asociado al parámetro name de <SELECT>
cuando se envíe el formulario. Este valor debe ser único para cada opción.
♦ selected, establece la opción por defecto. Si no se especifica este parámetro
en ninguna opción se tomará la primera de ellas por defecto.
Nota:
La anchura de la lista desplegable vendrá determinada por el número de caracteres de la
opción que mas tenga.

con HTML y Flash
11 /113
Etiquetas <TEXTAREA>...</TEXTAREA>
Esta pareja de etiquetas inserta una caja de texto de múltiples líneas, que normalmente se
utiliza para introducir comentarios o datos largos en un formulario. Si no se introduce
ningún texto entre ambas etiquetas la caja de texto aparecerá vacía, para que el usuario lo
introduzca, pero si introducimos algún texto entre ambas éste aparecerá inicialmente en la
caja. Si el texto que contiene supera el espacio disponible en la caja aparecerá una barra de
desplazamiento vertical.
Sus atributos y valores son:
♦ name="nombre", asigna un nombre identificador al campo, que será
asociado en el envío del formulario al texto introducido en la caja de texto.
♦ cols="x", define el número de columnas visibles de la caja de texto.
♦ rows="y", define el número de filas visibles de la caja de texto.
♦ wrap="valor", justifica automáticamente el texto en el interior de la caja.
Este atributo es de uso complicado. Según las recomendaciones si su valor es
VIRTUAL se enviará todo el texto seguido en una línea, mientras que si vale
PHYSICAL el texto se enviará separado en líneas físicas, pero así como se
define no lo admiten los navegadores. Usemos cual usemos de los dos el
resultado es el mismo: justificación por líneas físicas, y así y todo se producen
saltos de línea indeseados.
♦ disabled, desactiva la caja de texto. Su utilidad es escasa.
♦ readonly, impide que el contenido de la caja sea modificado por el usuario.
♦ tabindex="n", especifica el orden de tabulador que tendrá el campo
Etiquetas <BUTTON>...</BUTTON>
A partir de la implementación de los estándares HTML 4.0 contamos con varias etiquetas
nuevas para construir formularios, siendo BUTTON una de ellas, bastante útil por cierto. La
desventaja es que las versiones 4 de Nestcape se lanzaron antes de estas implementaciones,
por lo que estas nuevas etiquetas sólo se pueden visualizar correctamente con
Internet Explorer 4 y superiores.
Esta etiqueta proporciona un método único para la implementación de cualquier tipo de
botón de formulario. Sus principales atributos son:
♦ type="tipo", puede tomar los ya conocidos valores submit (por defecto),
reset y button.
♦ name="nombre", asigna un nombre identificador único al botón.
♦ value="texto", define el texto que va a aparecer en el botón
Nota:
La principal ventaja que aportan estas etiquetas es que vamos a poder introducir dentro
de ellas cualquier elemento de HTML, como imágenes y tablas.

con HTML y Flash
12 /113
X. Marcos (Frames)
Definición.
Los Marcos (Frames en inglés, marcos o cuadros) es un procedimiento del lenguaje HTML
para dividir la pantalla en diferentes zonas, o ventanas, que pueden actuar
independientemente unas de otras, como si se trataran de páginas diferentes, e incluso cada
una de ellas pueden tener sus propias barras de desplazamientos. Los navegadores que lo
implementan son el Netscape 2.0, y el Explorer 2.0 en adelante. Una de sus características
más importantes es que pulsando un enlace situado en un Marco, se puede cargar en otro
Marco una página determinada. Esto se utiliza frecuentemente para tener un Marco
estrecho en la parte lateral (o superior) con un índice del contenido en forma de diferentes
enlaces que, al ser pulsados cargan en la ventana principal las distintas páginas. De esta
manera se facilita la navegación entre las páginas, aunque se vaya pasando de unas a otras,
siempre estará a la vista el índice del conjunto.
Nota:
El uso de los Marcos es útil para cierto tipo de documentos, pero puede llegar a dificultar
la navegación, ya que dentro de un documento con Marcos no tendrán utilidad los
botones de documento previo (back) ni documento siguiente (forward), ya que ambos nos
trasladaran fuera del documento con marcos.
Etiqueta <FRAMESET>
Las etiquetas <FRAMESET>…</FRAMESET> son las que van a decirle al navegador
dónde empiezan y dónde acaban los Marcos, y el tipo y forma de estos. Entre una y otra van
las definiciones de los diferentes Marcos.
Estas etiquetas se deben situar entre <HTML> y </HTML>, pero podemos hacerlo también
entre </HEAD> y <BODY>, recordemos que no podemos utilizar la etiqueta <BODY>…
</BODY>.
♦ COLS="x,y,z,…", para definir el número de columnas o Marcos verticales
que va a tener la ventana, y donde las variables x,y,z… van a definir el tamaño
de cada Marco vertical, pudiendo definirse en píxeles o en porcentajes.
También podemos fijar el tamaño de una columna o columnas como *, y en
este caso el tamaño de esta será todo aquel que quede después de definir
mediante puntos o porcentajes las demás columnas.
♦ ROWS="x,y,z,…", para definir el número de filas o Marcos horizontales que
va a tener la ventana, y donde las variables x,y,z… van a definir el tamaño de
cada Marco horizontal, pudiendo definirse en píxeles o en porcentajes.
También podemos fijar el tamaño de una fila o filas como *, y en este caso el
tamaño de esta será todo aquel que quede después de definir mediante píxeles

con HTML y Flash
13 /113
o porcentajes las demás filas. Las combinaciones posibles son muchas, siendo
su estructura análoga a las vistas para las columnas.
♦ FRAMEBORDER= "0 / 1 / no / yes", nos permite definir si los marcos
creados van a tener borde o no. Los valores 0 y no son equivalentes,
eliminando los bordes, así como 1 y yes, que los muestran. Su valor por
defecto es yes / 1, por lo que si no especificamos nada se verán los bordes de
todos los marcos. Si además queremos que no se vean los huecos que originan
los bordes invisibles hay que añadir el atributo FRAMESPACING=0 para
Internet Explorer y BORDER=0 para Nestcape.
Ejemplo:
<HTML>
<HEAD>
<TITLE> Ejemplo de Marcos</title>
</HEAD>
<FRAMESET rows="20%,*" >
<FRAME name="" src="primera.html" MarginWidth="10" MarginHeight="10"
scrolling="auto">
<FRAME name="" src="segunda.html" MarginWidth="10" MarginHeight="10"
scrolling="auto">
</FRAMESET>
</HTML>
Resultado

con HTML y Flash
14 /113
♦ BORDER="n", con n = número entero o en píxeles. En el caso de que se
haya establecido FRAMEBORDER="1" o no se haya especificado, este
atributo nos permite definir el grosor del borde. Sólo funciona con
Nestcape.
♦ FRAMESPACING= "n", con n = número entero o en píxeles. Nos permite
definir el espacio entre los marcos, y en el caso de que se haya establecido
FRAMEBORDER="1" o no se haya especificado, este atributo nos permite
definir el grosor del borde. Sólo funciona con Explorer.
♦ BORDERCOLOR="color", el color puede venir especificado mediante su
nombre en inglés o mediante su código hexadecimal. Nos permite establecer
el color de los bordes de los marcos.
Tipos de Marcos
Etiqueta <FRAME>
La etiqueta <FRAME> define cada uno de los marcos que va a haber en la ventana. Debe ir
colocada siempre entre <FRAMESET> y </FRAMESET>, y debe haber tantas etiquetas
como marcos hayamos definido con COLS y ROWS.
Estas etiquetas se deben situar entre <HTML> y </HTML>, pero podemos hacerlo también
entre </HEAD> y <BODY>, incluso podemos no utilizar <BODY>…</BODY>.
♦ SRC="ruta pagina html", especifica que página se va a cargar en el marco.
La ruta de la página debe especificar su localización en el sistema de archivos
local del servidor Web o una URL completa.
Ejemplo
<Frame src="principal.html">
<Frame src="http://www.yahoo.com.mx">
♦ NAME="nombre", especifica que página se va a cargar en el Marco. La ruta
de la página debe especificar su localización en el sistema local del servidor
Web o una dirección URL completa.
♦ MARGINWIDTH="x", con x = número, píxeles o porcentaje. Sirve para
definir el margen horizontal que queremos que haya dentro del Marco, entre
los límites de este y su contenido. Que indica al formulario al que se mandan
los datos el Marco de destino del resultado de los mismos.

con HTML y Flash
15 /113
♦ MARGINHEIGHT="x", con x = número, píxeles o porcentaje. Define el
margen vertical que queremos haya dentro del Marco, entre los límites de este
y su contenido.
♦ SCROLLING= "yes / no / auto", nos permite establecer si el marco tendrá
o no barra de desplazamiento cuando el contenido del marco exceda al
tamaño de este. Sus posibles valores son:
•yes: siempre aparecerá la barra deslizamiento.
•no: nunca aparecerá. Por lo tanto si el contenido es mayor que el texto
sólo podremos ver lo que quepa en el Marco.
•auto: sólo aparecerá el scroll si es necesario para poder visualizar el
contenido completo del Marco. Este es el valor por defecto.
♦ NORESIZE. Este atributo impide que el marco pueda ser redimensionado
por el visitante arrastrando su borde. Si no se indica este atributo el Marco
podrá ser redimensionado.
♦ BORDECOLOR= "color", Color = nombre en inglés o en código
hexadecimal. Sirve para definir el color del borde del Marco concreto al que se
aplica.
♦ FRAMEBORDER="1 / 0". Cuando se ha establecido BORDECOLOR, si su
valor es 0 se mostrara el borde sin efecto 3D en el Marco (se percibe mejor en
Explorer), y si su valor es 1 sí se mostrara este efecto. Además, si lo igualamos
a cero se eliminara el borde con todos los Marcos contiguos que tengan
también este valor a cero.
Ejemplo:
<HTML>
<HEAD>
<TITLE> Ejemplo de Marcos </title>
</HEAD>
<FRAMESET rows="40%, *" BorderColor="RED">
<frame src="primera.html" MarginWidth="50" MarginHeight="30" frame
border="1">
<frame src="segunda.html" MarginWidth="10" MarginHeight="0" frameborder="1">
</FRAMESET>
</HTML>

con HTML y Flash
16 /113
Resultado
NO-FRAMES
Este par de etiquetas no son atributos de <FRAME>. Se utilizan para prevenir el caso de
que el navegador del visitante no soporte Marcos. Deben situarse antes de </FRAMESET>,
y dentro de ellas se incluyen <BODY> texto de aviso </BODY>. Si el navegador no reconoce
el Marcos, los ignorará mostrando el mensaje de aviso. Este atributo esta actualmente en
deshuso, ya que todos los modernos navegadores soportan Marcos.
Marcos anidados
Hasta ahora hemos definido Marcos simples, es decir, la forma de dividir una página en una
serie de filas o de columnas que nos facilitan cargar una página HTML independiente
dentro de cada Marco.
Este diseño de página aunque es útil, es muy simple. Podemos ir mas allá anidando Marcos,
es decir introduciendo los Marcos dentro de otros previamente definidos. De esta manera
podemos dividir una fila en columnas, una columna en filas, etc.
Pero este procedimiento es bastante complejo en su código, por lo que es conveniente
ayudarse de alguno de los muchos programas de creación Web que ya existen.
Veamos un ejemplo ilustrativo de ésta técnica en el siguiente código:

con HTML y Flash
17 /113
<HTML>
<HEAD>
<TITLE>Mi página </title>
</HEAD>
<FRAMESET rows="10%,*" frameborder="1" bordercolor="Gray">
<FRAMESET name="top" src="top.html" MarginWidth="10" MarginHeight="10"
scrolling="no" noresize frameborder="0">
<FRAMESET cols="20%,*" >
<frame name="primera" src="a.html" MarginWidth="10" MarginHeight="10"
scrolling="no" noresize frameborder="0">
<frame name="segunda" src="b.html" MarginWidth="10" MarginHeight="10"
scrolling="auto" noresize frameborder="0">
</FRAMESET>
</FRAMESET>
</HTML>
Que se vería de la siguiente manera:

con HTML y Flash
18 /113
XI. Texto en Movimiento
Marquesinas (Marquees)
Una marquesina (en inglés, marquee) es una ventana en la que se desplaza un texto. Sólo
son válidas para el Internet Explorer de Microsoft (en el Netscape se verá como texto fijo).
Sintaxis:
<MARQUEE> Texto que se desplaza </MARQUEE>
Como no se ha añadido ningún atributo dentro de la etiqueta, el comportamiento de la
marquesina es el que tiene por defecto: ocupa todo el ancho de la pantalla, tiene la altura de
una línea y el texto se desplaza lentamente de derecha a izquierda. A continuación se
mostraran los atributos que modifican su apariencia y comportamiento:
ATRIBUTOS
WIDHT, HEIGHT
Ajustan la anchura y altura, respectivamente, de la marquesina. Pueden ser igual a un
número de píxeles, o a un porcentaje de la pantalla.
Ejemplo:
<MARQUEE WIDTH=50% HEIGHT=60> Esta marquesina ocupa el 50% del ancho de la pantalla y
tiene una altura de 60 píxeles </MARQUEE>
ALIGN
Modifica el alineamiento del texto que rodea a la marquesina, que puede ser TOP (arriba),
MIDDLE (en medio) o BOTTOM (abajo).
Ejemplo:
<MARQUEE WIDTH=50% HEIGHT=60 ALIGN=BOTTOM>La palabra "¡Hola!" estará
alineada con la parte inferior de la marquesina</MARQUEE>
BEHAVIOR
Este atributo (del Inglés comportamiento) sirve para definir la manera se va a efectuar el
desplazamiento del texto. Y tiene los siguientes atributos:

con HTML y Flash
19 /113
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
ejemplos anteriormente señalados).
SLIDE, aparece por un lado y se desplaza hasta llegar al otro extremo, y se
detiene.
ALTERNATE se desplaza alternativamente hacia un lado y otro, siempre
dentro de los límites de la marquesina.
Sintaxis:
<MARQUEE BEHAVIOR=ALTERNATE> texto </MARQUEE>
<MARQUEE BEHAVIOR=SCROLL> texto </MARQUEE>
<MARQUEE BEHAVIOR=SLIDE> texto </MARQUEE>
Ejemplo:
<MARQUEE BEHAVIOR=ALTERNATE> Este texto se mueve a un lado y otro, sin desaparecer
</MARQUEE>
BGCOLOR
Con este atributo se modifica el color de fondo de la marquesina.
Ejemplo:
<MARQUEE BGCOLOR="#FF7070"> Esta marquesina tiene un fondo de color rosa
</MARQUEE>
DIRECTION
Este atributo sirve para modificar la dirección hacia la que se dirige el texto. Por defecto es
LEFT (izquierda). Se puede hacer que el texto se dirija hacia la derecha igualando este
atributo a RIGHT.
Ejemplo:
<MARQUEE DIRECTION=RIGHT> Este texto se dirige hacia la derecha </MARQUEE>
SCROLLAMOUNT
Define la velocidad 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=50> Texto en movimiento </MARQUEE>

con HTML y Flash
20 /113
SCROLLDELAY
Define el tiempo entre cada movimiento de avance, expresado en milisegundos. Cuanto
mayor es el número más lento avanza.
Ejemplo:
<MARQUEE SCROLLDELAY =200> Espero mucho entre cada salto </MARQUEE>
LOOP
Especifica el número de veces que aparecerá el texto. Es indefinido por defecto.
HSPACE, VSPACE
Definen, respectivamente, la separación en sentido horizontal o vertical del texto que está
fuera de la marquesina.
Como se mencionó anteriormente, esta etiqueta no es implementada por el Navegador
Netscape. El texto que está dentro de la etiqueta de la marquesina se verá en este navegador
como texto fijo normal. Normalmente, si se hace uso de este recurso es porque se quiere
destacar de una manera particular de un texto, logrando plenamente este objetivo en el
Explorer. Una manera de solucionar este inconveniente, al menos en parte, es introducir la
etiqueta de la marquesina dentro de una tabla. De esta manera, el texto estará en cierta
medida destacado en el Netscape, y en el Explorer la marquesina se verá de una manera
aún más estética.
Ejemplo:
<TABLE BORDER=1>
<TR><TD Width=200 Height=50>
<MARQUEE> Marquesina dentro de una tabla </MARQUEE>
</TD></TR>
</TABLE>
MOVIMIENTO CON JAVA SCRIPT
El Javascript es un lenguaje distinto del HTML. En los dos ejemplos que se mostraran a
continuación, únicamente se mostrará la manera de incluirlos en un documento de HTML,
pero sin pretender explicar su estructura ya que es un tema avanzado para otro curso, por lo
que solo se mencionará, como incluir Javascript en un documento HTML.
Recordemos que la estructura de un documento HTML es:

con HTML y Flash
21 /113
Sintaxis:
<HTML>
<HEAD>
<TITLE>titulo</TITLE>
</HEAD>
<BODY>
</BODY>
</HTML>
El script (documento) en Javascript tenemos que colocarlo dentro de la cabecera, después
del título. Es decir, entre las etiquetas </TITLE> y </HEAD>, contenido dentro de la
etiqueta:
Sintaxis:
<SCRIPT LANGUAGE="JavaScript"> </SCRIPT >
<HTML>
<HEAD>
<TITLE> titulo</TITLE>
<SCRIPT LANGUAGE="JavaScript">
[Aquí debe ir colocado el script]
</SCRIPT >
</HEAD>
<BODY>
</BODY>
</HTML>
Además de esto, se debe añadir algo dentro de la etiqueta <BODY>, como se indicará en
cada caso. Scroll en la barra de estado, el script es el siguiente:
<SCRIPT LANGUAGE="JavaScript">

</SCRIPT>

con HTML y Flash
22 /113
Observación sobre el texto: Se puede escribir el texto en una sola línea, tan larga como se
quiera, siempre que éste quepa en la línea; Pero como no debe de haber ningún salto de
línea, si el texto es demasiado largo, es mejor dividirlo en distintas líneas, tal como está en
el ejemplo. Al final de la última palabra del texto conviene dejar una serie de espacios en
blanco, para que no esté encadenado el comienzo con el final. Dentro de la etiqueta
<BODY> se debe añadir el atributo:
onLoad="scroll();"
quedando así:
<BODY onLoad="scroll();">

con HTML y Flash
23 /113
TABLA DE APENDICES
ETIQUETA EJEMPLO CARACTERISTICA OPCIONES
<B> <B>Texto </B> Negrita
<I> <I>Texto </I> Itálica
<U> <U>Texto </U> Subrayada
<S> <S>Texto </S> Tachada
<BLINK> <BLINK> Texto </BLINK> Intermitente
<TT> <TT>Texto </TT> Monoespaciada
<PLAINTEXT> <PLAINTEXT> Texto </PLAINTEXT> Aniquila etiquetas
<BLOCKQUOTE> <BLOCKQUOTE> Texto </BLOCKQUOTE> Sangría de 5 Col.
<BASEFONT> <BASEFONT> Texto </BASEFONT> Define Tipo, tamaño y
Color dentro de la página.
<STRONG> <STRONG> Texto </ STRONG > Negrita
<EM> <EM> Texto </EM> Itálica
<CITE> <CITE> Texto </CITE> Subrayada
<CODE> <CODE> Texto </CODE> Monoespaciada
<KBD> <KBD> Texto </KBD> Texto tecleado por el usuario.
<SAMP> <SAMP> Texto </SAMP> Caracteres literales
<ABBR> <ABBR>Texto </ABBR> Abreviaturas
<ADDRESS> <ADDRESS> Texto </ADDRESS> Cursivas
<BIG> <BIG> Texto </BIG> Grandes
<SMALL> <SMALL> Texto </SMALL> Pequeñas
<SUB> <SUB> Texto </SUB> Subíndice
<SUP> <SUP> Texto </SUP> Superíndice
<VAR> <VAR>Texto</VAR> Variables de Código
<PRE> <PRE> Texto </PRE> Texto preformateado,
Respeta el párrafo
Width = x número de
caracteres por línea.
<P> Texto <P> Fin de párrafo.
<BR> Texto <BR> Salto de línea.
<CENTER> <CENTER> Texto </CENTER> Centrado
<!-- ........... <!-- Comentario Comentarios
<HR> <HR Noshade Size = “100” Width=”20%”> Traza una línea Noshade :No
sombreado
Size : Altura de línea
Width :Ancho de línea
<H#> <H# > Texto </H#> Encabezados # = Toma valores de 1
al 6.
Align = “CENTER”
Align = “LEFT”
Align = “RIGHT”
<FONT> <FONT Size = “+1” Color =”RED”>texto </FONT> Fuentes de texto, color y
tamaño.
Size = 3 – 1 al 7 (-
/+3)
Color = “Color -
#RGB”
Face = Fuente o Tipo
<DIV> <DIV Align =”CENTER”>Texto </DIV> Justifica el texto del Párrafo. Align = “LEFT”
Align = “RIGHT”
Align = “CENTER” ó
Align = “JUSTIFY”
á &"vocal"acute; Acentos Aa Ee Ii Oo Uu
&ntilde, &"n"tilde; ó &"N"tilde; Ñ ñ

con HTML y Flash
24 /113
Símbolo Nombre de la Entidad Referencia de Carácter
< < <
> > >
¢ ¢ ¢
£ £ £
¥ ¥ ¥
© ® ó © ©
® ® ®
° ° °
¼ ¼ ¼
½ ½ ½
¾ ¾ ¾
× × ×
¿ ¿
¡ ¡
ª ª
º º
TM ™ 
Espacio en blanco  
& &
“ "
Table de Colores
Colores Color en Inglés Código Hexadecimal RGB
ROJO RED FF0000
VERDE GREEN 00FF00
AZUL BLUE 0000FF
BLANCO WHITE FFFFFF
NEGRO BLACK 000000
AMARILLO YELLOW FFFF00
GRIS GRAY CCCCCC
ROSA PINK FF00FF
Colores Color en Inglés Colores Color en Inglés
NARANJA ORANGE CAFÉ BROWN
ORO GOLD BEIGE BEIGE
SILVER PLATA VERDE OBSCURO TEAL
VIOLET VIOLETA VERDE OLIVA OLIVE
PURPURA PURPLE ROJO CLARO FUSHIA
AZUL CLARO CYAN VERDE LIMON LIME
GINDA MAROON AZUL REY NAVY

con HTML y Flash
25 /113
Temario FLASH
XII. Introducción
♦ Flash
♦ Entorno de flash
XIII. Dibujar con Flash
♦ Dibujos
♦ La barra de herramientas
♦ Colores
XIV. Interpolación de Movimiento
♦ Definición
♦ Creación de una interpolación de movimiento
XV. Interpolación de Forma
♦ Definición
♦ Creación de una interpolación de forma
XVI. Interpolación con Capa Guía
♦ Definición
♦ Creación de una interpolación con capa guía
XVII. Importar Imagen
♦ Definición
♦ Importar imágenes
XVIII. Mascaras
♦ Definición
♦ Creación de mascaras
XIX. Efecto Alfa
♦ Definición
♦ Creación de un efecto Alfa
XX. Punto de Registro
♦ Definición
♦ Creación del punto de registro

Manual HTML y Flash

Recomendados

Recomendados

Más contenido relacionado

La actualidad más candente

La actualidad más candente (16)

Destacado

Destacado (16)

Similar a Manual HTML y Flash

Similar a Manual HTML y Flash (20)

Último

Último (7)

Manual HTML y Flash