Manual de html y flash mx

4,709 views

Published on

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
4,709
On SlideShare
0
From Embeds
0
Number of Embeds
3,465
Actions
Shares
0
Downloads
46
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Manual de html y flash mx

  1. 1. Facultad de IngenieríaUnidad de Servicios de Cómputo Académico Temario HTML Autor: Juan Carlos Cruz Paz Julio César Morales Crispín Abril de 2006
  2. 2. Unidad de Servicios de Cómputo Académico Diseño de Páginas Web con HTML y Flash Temario HTMLI. Introducción♦ Internet♦ Servicios de Internet♦ La Word Wide Web♦ Los Navegadores♦ Como surgió HTML♦ Esquema de funcionamientoII. Página HTML♦ Definición♦ Etiquetas♦ Sintaxis♦ Estructura Básica♦ Elementos de PáginasIII. Formato de una Página♦ Etiquetas básicas♦ Fuentes♦ Caracteres especiales♦ EncabezadosIV. Listas♦ Definición♦ Listas Ordenadas♦ Listas No Ordenadas♦ Listas de Definiciones♦ Listas AnidadasV. Tablas♦ Definición♦ Formato♦ Atributos y Parámetros♦ Ejemplos de TablasVI. Ligas o Vínculos♦ Definición♦ Sintaxis♦ Rutas Absolutas y Relativas♦ Las Ligas♦ Anclas 1 /113
  3. 3. Unidad de Servicios de Cómputo Académico Diseño de Páginas Web con HTML y FlashVII. Imágenes♦ Tipos de Imágenes utilizadas♦ Sintaxis♦ Modificadores de ImagenVIII. Utilerías para la Página.♦ Etiqueta BODY♦ Ligas con Imágenes♦ Código de ColoresIX. Formularios♦ Definición♦ Características♦ Tipos de elementosX. Marcos♦ Definición♦ Tipos♦ No Frames♦ AtributosXI. Texto en Movimiento♦ Marquesinas (Marquees)♦ Atributos 2 /113
  4. 4. Unidad de Servicios de Cómputo Académico Diseño de Páginas Web con HTML y Flash I. Introducción.InternetEl hecho de abrir un navegador Web, teclear una dirección y empezar a navegar por laWWW es tan común y popular en nuestros días que muchas personas no saben que hacetan 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 nuestrotrabajo y en nuestras actividades cotidianas, y los medios de comunicación hablanconstantemente de Internet y del comercio electrónico.Internet fue creada a partir de un proyecto del Departamento de Defensa de los EstadosUnidos llamado DARPANET (Defense Advanced Research Project Network) iniciado en1969 y cuyo propósito principal era la investigación y desarrollo de protocolos decomunicación para redes de área amplia, el objetivo fue ligar redes de transmisión depaquetes de diferentes tipos capaces de resistir las condiciones de operación más difíciles ycontinuar funcionando aún con la pérdida de una parte de la red (por ejemplo en caso deguerra).Estas investigaciones dieron como resultado el protocolo TCP/IP (Transmisión ControlProtocol/Internet Protocol) un sistema de comunicaciones muy sólido y robusto bajo el cualse 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 redeslocales 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 elmanejo de la información y la forma de administrar dichas redes.Internet SocietyEs 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 deinformación global a través de la tecnología en Internet y tiene la responsabilidad de laadministración técnica y dirección de Internet.Internet Architecture Board (IAB)Toma las decisiones acerca de los estándares de comunicaciones entre las diferentesplataformas para que puedan interactuar máquinas de diferentes fabricantes sinproblemas. 3 /113
  5. 5. Unidad de Servicios de Cómputo Académico Diseño de Páginas Web con HTML y FlashNIC (Network Information Center)Este grupo es responsable de cómo se deben asignar las direcciones y otros recursos en lared y es administrado por el departamento de defensa de los Estados Unidos deNorteamérica.Internet Engineering Task Force (IETF)Se encarga de recabar las opiniones de los usuarios, de cómo se deben de implementarsoluciones 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 empleandolíneas telefónicas de alta velocidad, cables de fibra óptica y conexiones por satélite.Servicios de InternetEste servicio puede ser adquirido si se tiene acceso a las organizaciones antes mencionadaso bien contratando el servicio con proveedores de Internet, estos negocios establecen unaconexió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íaModem.Internet ofrece los siguientes servicios: E-Mail FTP Listas de Correo Telnet World Wide WebA 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 permitemandar y recibir cartas, desde cualquier parte del mundo mucho más rápido que el correotradicional. Así pues podemos tener comunicación con una persona, puede escribírsele a unservidor 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 deuna persona en un sistema (conocido como login), hay dos maneras de formar direcciones 4 /113
  6. 6. Unidad de Servicios de Cómputo Académico Diseño de Páginas Web con HTML y Flashde e-mail: utilizando el formato Internet que contiene una @ que significa "en" ó bien elformato 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 primerosservicios que se implementaron junto con Telnet y el Correo Electrónico. Por este medio sepueden obtener archivos y programas de casi cualquier tema, solo hay que saber dondeencontrarlos, existe un gran número de servidores de FTP que admiten a usuariosanónimos, es decir que no necesitan tener cuenta para acceder al sistema, el login esanonymous y el password es nuestra dirección de correo electrónico; obviamente no se daacceso a todos los directorios del servidor, solo a algunas áreas restringidas dedicadas alpúblico.Listas de Correo o Grupos de interésLos grupos de interés son creados con la finalidad de comunicar a las personas que tienenun interés común.Los servidores de listas pueden ser humanos o programas, los últimos son conocidos comolistserv, cuando mandamos mensajes a un administrador humano podemos escribir enlenguaje normal, pero cuando mandamos correo a un listserv hay que comunicarnos con loscomandos 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 hechopara establecer sesiones remotas en otras máquinas tal y como si estuviéramos enfrente deellas. Para que la conexión funcione, como en todos los servicios de Internet, la máquina ala que se accede debe tener un programa especial que reciba y gestione las conexiones Elpuerto que se utiliza generalmente es el 23.Sólo sirve para acceder en modo Terminal, es decir, sin gráficos, pero fue una herramientamuy útil para arreglar fallos a distancia, sin necesidad de estar físicamente en el mismositio que la máquina que los tenía. También se usaba para consultar datos a distancia, comodatos 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ñasnecesarias para entrar en las máquinas viajan por la red como texto plano (cadenas de textosin cifrar). Esto facilita que cualquiera que espíe el tráfico de la red pueda obtener los 5 /113
  7. 7. Unidad de Servicios de Cómputo Académico Diseño de Páginas Web con HTML y Flashnombres de usuario y contraseñas, y así acceder él también a todas esas máquinas. Por estarazón dejó de usarse, casi totalmente, hace unos años, cuando apareció y se popularizó elSSH (Secure Shell), que puede describirse como una versión cifrada de Telnet.La World Wide WebLa WWW es el servicio más nuevo y conocido de la Internet, y el de más repercusión socialen la WEB, servicio de visualización de documentos basados en un lenguaje especial demarcas que nos permite compartir información. El HTML es un protocolo especial para latransferencia de los mismos, y el HTTP es un concepto excepcional de enlaces entrediferentes documentos llamados Hipertexto, y que nos permite presentar nuestros serviciosa 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 proporcionaInternet, 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 nospermite acceder a miles de computadoras del mundo a través de documentos en los cualesde manera gráfica podemos tener acceso fácilmente a la información presionando solopalabras 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 tengay se quiera compartir.Los Navegadores o BrowserLos Browser son también conocidos como Visualizadores o Navegadores, dentro de losNavegadores más utilizados actualmente tenemos a: Internet Explorer y Netscape, que sonlos más populares y los utilizados. Cabe mencionar que estos dos Navegadores puedencorrer 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) 6 /113
  8. 8. Unidad de Servicios de Cómputo Académico Diseño de Páginas Web con HTML y FlashComo funcionan los Navegadores.Los Navegadores envían las solicitudes y reciben los datos necesarios para desplegar laspá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 deacuerdo como se le indica en el archivo HTML y lo despliega.Todos los Navegadores realizan básicamente las mismas funciones tales como enviarcorreo, transferencia de archivos, obtener información de la red (archivos medianteDownload), 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 Navegadordeterminan como será visualizado en texto.Como surgió HTMLAhora bien el Desarrollo de Páginas Web mediante HTML para Internet surgió con lanecesidad de poder compartir información, ya que dentro de este proyecto estaban muchasUniversidades y Oficinas gubernamentales es por ello que se tuvo la necesidad de compartirinformación no solo mediante el uso de correos electrónicos y conexiones remotas, ademásse requería tenerla en el momento es por ello que surgieron los Visualizadores no-gráficoscomo por ejemplo Mosaic y posteriormente hubo la necesidad de compartir archivosgráficos. Para todo esto se creó un lenguaje sencillo pero eficaz que debería de conteneralgunas 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 elLaboratorio Europeo de Física Nuclear en Suiza y la Organización Europea para laInvestigación Nuclear en Francia (CERN), un grupo de científicos reunieron los primerosdocumentos enlazados para así facilitar el compartir información a través de todo el mundocon otras organizaciones. Esta tecnología fue desarrollada por Tim Berners Lee, para ellocombinó dos tecnologías ya existentes (el hipertexto y el protocolo de comunicaciones deInternet), creando un nuevo modelo de acceso a la información intuitivo e igualitario. Lasfamosas tres W han hecho posible que aprender a utilizar la Red sea algo al alcance detodos. 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í comocrean formularios que se emplean para recabar información de los usuarios. 7 /113
  9. 9. Unidad de Servicios de Cómputo Académico Diseño de Páginas Web con HTML y FlashEsquema 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 servidoresremotos de Internet, utilizando direcciones llamadas URL’s (Localizadores Uniformes deRecursos). Cuando llegan los datos a la computadora el Visualizador interpreta las etiquetasde HTML y despliega el texto formateado junto con los gráficos.ModemMediante el modem se realiza la conexión con el proveedor de Internet, el cual nos va hadar la salida, esto se hace mediante una línea telefónica y este dispositivo convierte laspeticiones, que son señales que pueden ser transmitidas y posteriormente al recibirlas lasvuelve a convertir para poder ser interpretadas por la máquina.Proveedor de AccesoEs una organización Gubernamental, Educativa o Privada que nos proporciona el serviciode Internet y generalmente tiene un servidor de Web, que en ruta las solicitudes de sucomputadora a otros servidores de Web y posteriormente transmite los archivos HTMLobtenidos a quien se lo haya solicitado.InternetEs una red mundial de Servidores. Envía la solicitud de un servidor a otro hasta encontrarla 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 encontradodicho archivo.Servidor de WebEl servidor de Web es una Computadora que contiene una serie de programas que sirvenpara atender las solicitudes de los usuarios no importando el Sistema Operativo (UNIX,Windows, MSDOS, Macintosh) con el cual trabaje dicho usuario ni el Visualizadorutilizado. Este Servidor contiene todos los archivos necesarios que están relacionados con elarchivo HTML solicitado, así como programas conocidos como GATEWAY SCRIP paraenviar la solicitud a otro servidor de Web. 8 /113
  10. 10. Unidad de Servicios de Cómputo Académico Diseño de Páginas Web con HTML y Flash 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 9 /113
  11. 11. Unidad de Servicios de Cómputo Académico Diseño de Páginas Web con HTML y Flash II. Página HTMLDefiniciónHiper Text Markup LanguajeHyper Text Markup Language (lenguaje de marcación de hipertexto), es un lenguaje demarcas diseñado para estructurar textos y presentarlos en forma de hipertexto, que es elformato estándar de las páginas Web. Gracias a Internet y a los navegadores del tipoExplorer o Netscape, el HTML se ha convertido en uno de los formatos más populares queexisten para la construcción de documentos.En sus diferentes versiones, el lenguaje HTML ha ido sufriendo modificaciones que han idoadaptándolo a las necesidades y características de Internet de cada momento. De estaforma, 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 implementandoetiquetas y extensiones propias al lenguaje, de tal forma que llegó un momento en el quereinó un caos casi total, resultando muy difícil la creación de páginas Web que sevisualizaran 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 TimBerners-Lee, el World Wide Web Consortium, más conocido como W3C, que hatomado bajo su responsabilidad la evolución de los protocolos y estándares asociados con laWeb.EtiquetasLas etiquetas son las marcas que van a contener el texto, gráfico y en general lainformación que necesitemos darle formato. Las etiquetas, deben estar encerradas entresignos de < y >, además la información deberá llevar una etiqueta al inicio y otra al final, laetiqueta final llevará antes del nombre de la etiqueta una diagonal normal que indica que esla 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 atributospueden contener parámetros. 10 /113
  12. 12. Unidad de Servicios de Cómputo Académico Diseño de Páginas Web con HTML y FlashAtributo = PARAMETRO o VALOR.Nota: El Atributo debe estar escrito con la primer letra mayúscula y el resto enminúsculas, el parámetro o valor debe de ir en mayúsculas y entre comillas.SintaxisComo ya se menciono la sintaxis que se maneja en el Desarrollo de páginas HTML, debellevar 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 enmayú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ásicaComo ya se mencionó el desarrollo de páginas HTML para Internet esta basado enetiquetas (Tags). Una de las características principales de este Lenguaje es: “LaProgramación Estructurada”. Esto quiere decir que tenemos una estructura general quedebemos seguir.Para poder diseñar una Página HTML debemos de tomar en cuenta las siguientesrecomendaciones, para seguir con el estándar ya establecido por WWW Consortium. Lascaracterísticas siguientes están divididas en Formales e Informales, las primerasnecesariamente se deben de cumplir para poder ser visualizadas y las restantes puedenfuncionar o no, pero deben ser respetadas para que se puedan visualizar por cualquierNavegador 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. 11 /113
  13. 13. Unidad de Servicios de Cómputo Académico Diseño de Páginas Web con HTML y FlashConsideraciones: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 quecomo este lenguaje está en constante evolución debemos respetar estas condiciones, parallevar una mejor estructura en el desarrollo de la página y así darle un mantenimientoadecuado.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 algunasconsideraciones:♦ 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 Visualizadoren el Web de su preferencia. 12 /113
  14. 14. Unidad de Servicios de Cómputo Académico Diseño de Páginas Web con HTML y FlashElementos de Páginas HTML.Ahora bien después de tomar en cuenta las recomendaciones anteriores, daremos inicio conel desarrollo de una Página de Internet.Las Páginas para Internet cuentan con una estructura básica, dentro de ellas no se manejanarreglos, 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 lacabecera y la etiqueta <BODY> que es el cuerpo de la misma. Cada una de ellas debe llevaruna etiqueta que indica el cierre de la misma, se debe de cerrar primero la última que seabrió, después la anterior y así sucesivamente.Estructura de una Página HTML. <HTML> <HEAD> </HEAD> <BODY> </BODY> </HTML>Etiquetas de la Cabecera (HEAD)Las etiquetas básicas que son contenidas dentro de la Cabecera de una Página HTML, son eltí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 debecumplir 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. 13 /113
  15. 15. Unidad de Servicios de Cómputo Académico Diseño de Páginas Web con HTML y Flash5. 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, yaque indican alguna consideración que se tomo al ser creada la página. Sin embargo puedenir dentro de cualquier parte de la misma página, ya sea para documentar alguna etiquetay/o información.Sintaxis<!-- Comentarios -->Ejemplo de Título y comentarios <HTML> <!-- Comentarios --> <HEAD><!-- Comentarios --> <TITLE> Título de la página </TITLE> </HEAD> <BODY> <!-- Comentarios --> </BODY> </HTML>Etiquetas del Cuerpo (BODY)Actualmente las etiquetas utilizadas dentro del cuerpo de una página HTML nos permitendarle la presentación al texto de distintas formas, así como a las imágenes, lo que podemoshacer con HTML es lo siguiente. ♦ Dar Formato a un Texto. ♦ Crear listas. ♦ Establecer vínculos hacia otras páginas. 14 /113
  16. 16. Unidad de Servicios de Cómputo Académico Diseño de Páginas Web con HTML y Flash ♦ 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. 15 /113
  17. 17. Unidad de Servicios de Cómputo Académico Diseño de Páginas Web con HTML y Flash 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 puedenser para poner encabezados negritas, cursivas, etc. Pero vamos a describirlas a continuacióne 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> MonoespaciadaEjemplo: Texto Negrita Texto Itálica Texto Subrayada Texto Tachada 16 /113
  18. 18. Unidad de Servicios de Cómputo Académico Diseño de Páginas Web con HTML y Flash♦ 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 sencilloEjemplo: <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>♦ Texto centrado <CENTER><CENTER> Texto </CENTER> Centra el Texto dentro del Navegador<HR> Muestra una delgada línea en el NavegadorEstá etiqueta tiene los siguientesNoshade Indica que la línea se rellena de color grisSize 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: <CENTER> Texto </CENTER> <HR Noshade Size=2 Width=50%>Texto </HR>Ahora realizaremos nuestra primera página con el siguiente ejemplo 17 /113
  19. 19. Unidad de Servicios de Cómputo Académico Diseño de Páginas Web con HTML y FlashEjemplo numero 1: <HTML> <HEAD> <TITLE> Mi primera p&aacute;gina del curso HTML </TITLE> </HEAD> <BODY> <H1> <CENTER> Primera p&aacute;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 estaforma estamos forzando a que nuestro texto se visualice acentuado en cualquiernavegador donde se despliegue nuestra página, como se verá a continuación. 18 /113
  20. 20. Unidad de Servicios de Cómputo Académico Diseño de Páginas Web con HTML y FlashFuentesSe pueden emplear diferentes tipos de fuentes y tamaños dependiendo del navegador con elcual estemos trabajando, además se puede dar color al texto, así como definir el tamaño dela 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 dedos 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 navegadorya que dependemos de éste. Pero también podemos darle color a la letra con el AtributoColor. Sintaxis. 1. <FONT Color = “red”> Texto </FONT> 2. <FONT Color = “#ff000”>Texto </FONT> 3. <FONT Face = "Arial"> Texto </FONT>Caracteres especialesLos caracteres especiales utilizados para páginas HTML son: los acentos, las eñes, losdistintos caracteres pueden ser &, >, <, $, etc.Sintaxis Entidad a utilizarAcentos &"vocal"acute;Eñes &"n"tilde;Ejemplo: • á é í ó ú • generaci&oacute;n generación • ni&ntilde;ez niñez 19 /113
  21. 21. Unidad de Servicios de Cómputo Académico Diseño de Páginas Web con HTML y FlashTabla de Caracteres Especiales.Símbolo Nombre de la Entidad Referencia de CarácterSímbolo < &lt; <Símbolo > &gt; >Símbolo ¢ &cent; ¢Símbolo £ &pound; £Símbolo ¥ &yen; ¥Símbolo © &reg; ©Símbolo ® &reg; ®Símbolo ° &deg; °Símbolo ¼ &frac14; ¼Símbolo ½ &frac12; ½Símbolo ¾ &frac34; ¾Símbolo × &times; ×Encabezados<H# > Texto </H#>Los encabezados dentro de la página los ponemos con la etiqueta <H#> donde los númerosson 1, 2, 3, 4, 5, 6. Siendo 1 el tamaño mayor y 6 el tamaño menor de Encabezado.Ejemplo: Texto 1 Texto 2 Texto 3 Texto 4 Texto 5 Texto 6 ♦ Código de Colores RGBEl 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 comoresultado 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 CODIGO HEXADECIMAL RGB INGLES R G B Rojo Red ff 00 00 Verde Green 00 ff 00 20 /113
  22. 22. Unidad de Servicios de Cómputo Académico Diseño de Páginas Web con HTML y Flash 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 cuandose 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áginaHTML.♦ 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 21 /113
  23. 23. Unidad de Servicios de Cómputo Académico Diseño de Páginas Web con HTML y FlashEjemplo: Texto Superíndice Texto Subíndice Texto Grande Texto Pequeña IV. ListasDefiniciónHay ocasiones en las que debemos presentar en nuestras páginas algún tipo de índice odestacar en breves palabras los puntos fundamentales de algún tema concreto. Y en esasocasiones necesitamos alguna forma de presentación de contenidos especialmenteconcebida para ello. Una forma de presentar la información dentro de páginas HTML esmediante listas y para ello contamos con cuatro tipos de listas.Cualquier tipo de lista debemos definirla antes de utilizarla. Para definir un elemento deuna lista utilizamos la etiqueta <LI>.Descripción: LI : Elementos de una lista OL: Lista ordenada UL: Lista No ordenada DL: Lista de GlosarioListas OrdenadasTodas 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 sonlas que van a definir los diferentes elementos textuales de las listas. OL: Lista ordenada LI: Elementos de una listaLas listas ordenadas tienen las siguientes opciones.<OL TYPE = Opción> l = Números (estándar) 22 /113
  24. 24. Unidad de Servicios de Cómputo Académico Diseño de Páginas Web con HTML y Flash 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 elprimer identificador que va a aparecer. Los valores del parámetro "x" son siempre númerosenteros a partir de 1. Si no se especifica este atributo, la lista empezará siempre por elprimer elementoEjemplos: 23 /113
  25. 25. Unidad de Servicios de Cómputo Académico Diseño de Páginas Web con HTML y FlashListas No ordenadasEste tipo de listas muestran una serie de elementos que no están dispuestos según unpatrón específico de ordenación, es decir; que están definidos los diferentes elementosmediante un signo determinado común a todos ellos, signo que normalmente se denominaviñ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 sonlas que van a definir los diferentes elementos textuales de las listas. UL: Lista no ordenada LI: Elementos de una listaLas listas No ordenadas tienen las siguientes opciones.<UL Type = Opción > disc = disco (estándar) circle = circulo square = cuadradoEjemplo: 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 elementoListas de DefinicionesLas listas de definiciones se caracterizan por presentar los elementos que la formandispuestos según un esquema de tipo glosario, apareciendo una serie de elementos con suscorrespondientes definiciones. 24 /113
  26. 26. Unidad de Servicios de Cómputo Académico Diseño de Páginas Web con HTML y FlashEstas 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 consu correspondiente pareja </DL>. DL = Etiqueta de inicio. DT = Etiqueta de elemento. DD = Etiqueta de Co-elemento.Ejemplo: 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 primeroListas AnidadasAl tener las listas características de bloque es posible anidar unas con otras sin ningún tipode problema, al igual que ocurre con las tablas. Y esta anidación puede tener cuantosniveles queramos, con tan sólo respetar la sintaxis propia y tener cuidado de cerrar bien lasetiquetas 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 correctamentetanto el bloque hijo (con su correspondiente etiqueta </OL> p.e.) como el elemento <LI>padre (con su correspondiente etiqueta </LI>). 25 /113
  27. 27. Unidad de Servicios de Cómputo Académico Diseño de Páginas Web con HTML y FlashEjemplo: El código es: <OL> <LI>primer elemento</LI> <OL type="a"> <LI>sub-elemento 1-1</LI> <LI>sub-elemento 1-2</LI> <LI>sub-elemento 1-3</LI> </OL> <LI>segundo elemento</LI> <OL type="a"> <LI>sub-elemento 2-1</LI> <UL type="disc"> <LI>sub-elemento 2-1-1</LI> <LI>sub-elemento 2-1-2</LI> </UL> <LI>sub-elemento 2-2</LI> </OL> <LI>tercer elemento</LI> </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 26 /113
  28. 28. Unidad de Servicios de Cómputo Académico Diseño de Páginas Web con HTML y FlashAnidando otros elementos: El código es: <UL> <LI>primer elemento</LI> <LI>segundo elemento</LI> <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> <LI>tercer elemento</LI> </UL> El Resultado es: • primer elemento • segundo elemento celda 1-1 celda 1-2 celda 2-1 celda 2-2 • tercer elemento 27 /113
  29. 29. Unidad de Servicios de Cómputo Académico Diseño de Páginas Web con HTML y Flash V. TablasDefiniciónLas 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 locomponen. Las tablas organizan la información en una matriz o cuadricula de columnasverticales y renglones horizontales, cada cuadro se denomina celda, una celda puedecontener texto, listas o gráfico.Las Tablas son utilizadas muy a menudo ya que la mayoría de las Páginas HTML necesitapresentar la información en filas y columnas. Tenemos que tener en cuenta que un espacioen blanco en la página no significa que HTML dejara espacios en blanco o líneas.FormatoLas tablas constan de tres partes básicas: Título, Encabezado y Filas de Celdas. Estánformadas por filas, columnas y celdas. Cada espacio horizontal continuado es una fila y cadaespacio vertical continuado es una columna, definiéndose una celda como el espacioformado por la intersección de una fila y una columna.Empiece por la esquina superior izquierda, hasta llegar a la esquina inferior derecha cadacelda debe contener algo; use espacios en blanco para crear celdas vacías.TítuloEncabezadosFilas de Celdas 28 /113
  30. 30. Unidad de Servicios de Cómputo Académico Diseño de Páginas Web con HTML y FlashA continuación se describen las etiquetas utilizadas en las tablas.Donde:TABLE : Indica que es una TablaCAPTION : Título de la TablaTH : EncabezadosTR : RenglónTD : Datos de la TablaEtiqueta: 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 contenidoEtiqueta: CAPTION Atributo Parámetro VP Descripción Align TOP * Título arriba de la tabla BOTTOM Título abajo de la tabla Align LEFT Izquierda CENTER * Centro RIGHT DerechaNOTA: No acepta los dos Align, sólo sí se toma TOP por defecto.Etiqueta: TR Atributo Parámetro VP Descripción 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 29 /113
  31. 31. Unidad de Servicios de Cómputo Académico Diseño de Páginas Web con HTML y FlashEtiqueta: TH Atributo Parámetro VP Descripción 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 AbajoEtiqueta: TD Atributo Parámetro VP Descripción 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 30 /113
  32. 32. Unidad de Servicios de Cómputo Académico Diseño de Páginas Web con HTML y FlashEjemplos de TablasTabla 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> <TR><TD>Ren2 Dat1</TD><TD>Ren2 Dat2</TD><TD>Ren2 Dat3</TD></TR> <TR><TD>Ren3 Dat1</TD><TD>Ren3 Dat2</TD><TD>Ren3 Dat3</TD></TR> </TABLE><HR>ResultadoCon 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> <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> <TR><TD>Ren2 Dat1</TD><TD>Ren2 Dat2</TD><TD>Ren2 Dat3</TD></TR> <TR><TD>Ren3 Dat1</TD><TD>Ren3 Dat2</TD><TD>Ren3 Dat3</TD></TR> </TABLE><HR> 31 /113
  33. 33. Unidad de Servicios de Cómputo Académico Diseño de Páginas Web con HTML y FlashResultadoAtributo en CAPTION Align Center<H2>Atributo en CAPTION Align Center <H2><TABLE Border=1><CAPTION Align = “Center”>Ejemplo 3</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> <TR><TD>Ren2 Dat1</TD><TD>Ren2 Dat2</TD><TD>Ren2 Dat3</TD></TR> <TR><TD>Ren3 Dat1</TD><TD>Ren3 Dat2</TD><TD>Ren3 Dat3</TD></TR></TABLE><HR> 32 /113
  34. 34. Unidad de Servicios de Cómputo Académico Diseño de Páginas Web con HTML y FlashResultadoAtributos 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> 33 /113
  35. 35. Unidad de Servicios de Cómputo Académico Diseño de Páginas Web con HTML y Flash <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 34 /113
  36. 36. Unidad de Servicios de Cómputo Académico Diseño de Páginas Web con HTML y FlashAtributo 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>ResultadoAtributo 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> 35 /113
  37. 37. Unidad de Servicios de Cómputo Académico Diseño de Páginas Web con HTML y FlashResultadoNota:El atributo Background funciona para cada celda independiente, para cada fila o paratoda la tabla. Solo hay que tomar en cuenta la ruta de donde vamos a tomar la imagen. 36 /113
  38. 38. Unidad de Servicios de Cómputo Académico Diseño de Páginas Web con HTML y Flash VI. Ligas o VínculosDefiniciónLas Ligas también llamadas vínculos o enlaces, nos permiten acceder o brincar a otrosdocumentos del Web, para lo cual utiliza el concepto de Hipertexto, la cual es una palabra ofrase de una página Web que, al hacer clic sobre ella nos envía hacia un documentodiferente 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 deinteré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:HrefEs el atributo que nos permite indicarle al documento hacia donde se va ha realizar elhiperenlace o salto.HipertextoEs una palabra o frase que nos servirá para acceder a otro documento. Simplementehaciendo clic sobre de él. Además de texto podemos poner imágenes que servirán de lamisma manera para realizar los accesos a otros documentos.URL’sLos URL’s ( Universal Resource Locator ) indican la ubicación de un archivo, además sontambién llamados rutas de acceso.Existen dos tipos de Rutas Absolutas y Relativas, A continuación mencionaremos comofuncionan. 37 /113
  39. 39. Unidad de Servicios de Cómputo Académico Diseño de Páginas Web con HTML y FlashRutas Absolutas y RelativasRutas AbsolutasDefinen la ubicación del archivo, empezando desde el nivel más alto y enlistan cadadirectorio necesario para encontrar dicho archivo. Este tipo de ruta tiene la siguienteestructura:Protocolo://Servidor/Directorios/Archivo.htmlDonde:Protocolo:Es el método que se emplea para transferir los datos a través de las líneas de Internet, losprotocolos utilizados en el Web son los servicios que proporciona Internet, como porejemplo 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 quedeseamos 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ónexacta que tiene el documento dentro del servidor. Para lo cual debemos indicar la rutaexacta 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á unmensaje el Navegador de que no encontró el documento y debemos de revisar que el URLeste escrito correctamente. 38 /113
  40. 40. Unidad de Servicios de Cómputo Académico Diseño de Páginas Web con HTML y FlashRutas RelativasDefinen la ubicación de un archivo tomando en cuenta como referencia la posición delarchivo que tiene el vínculo. El Navegador busca el archivo en el mismo directorio en dondese encuentra el documento actual.Cuando utilizamos el nombre de un archivo como URL estamos utilizando una rutarelativa. En este caso el Navegador busca el archivo en el mismo directorio en el que está eldocumento actual, si no esta allí no podrá encontrar el archivo.Ejemplo:<A Href = “archivo.html.” >Hipertexto </>ALas LigasComo ya se menciono las ligas hacia el mismo Web son aquellas que realizamos ya sea enforma relativa o Absoluta, dentro de nuestro mismo servidor de Web.Ejemplo: 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, UNAMLigas a Web remotosLas ligas hacia Web remotos se realizan de la misma forma que hacia nuestro Web solo quela diferencia es que la petición se realiza a otro servidor distinto, recordando el esquema defuncionamiento de las páginas HTML imaginemos como hace la petición de un servidor aotro. 39 /113
  41. 41. Unidad de Servicios de Cómputo Académico Diseño de Páginas Web con HTML y FlashEjemplo: 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.AnclasConocidas como ligas a la misma página, el texto y los gráficos pueden vincularse a lugaresdel mismo documento. Éste tipo de ligas son utilizadas cuando tenemos documentos muygrandes, que nos obligan a acceder rápidamente a los temas importantes del documento.Estas ligas constan de dos partes: ♦ El Ancla ♦ El Vínculo mismoEl AnclaIdentifica el lugar al cual nos queremos mover. Funcionará como una especie de banderaque identifica la posición exacta del lugar al cual queremos llegar, una vez que lleguemos ael ancla esta aparecerá en la parte superior del Visualizador.Sintaxis: <A Name = “#Nombre” >NameEste atributo viene a sustituir a Href para indicarnos que el vínculo se realizará en elmismo documento. 40 /113
  42. 42. Unidad de Servicios de Cómputo Académico Diseño de Páginas Web con HTML y Flash#NombreEs la palabra clave la cual nos indicará el lugar a donde se moverá la página.El Vínculo mismoEl vínculo utiliza el nombre del ancla en lugar del nombre del archivo, de esta manerareconocerá que tenemos que regresar al lugar donde está ese archivo.Sintaxis: <A Href = “#Nombre”> Hipertexto </A>HrefComo se menciono anteriormente la referencia que nos permite indicarle al documentohacia donde se va ha realizar el salto dentro del mismo documento.#NombreEs ancla utilizada para saltar al mismo documento, este nombre debe ser el mismo que sedeclaró anteriormente.Ejemplo: <!-- DECLARO EL NAME DE MI 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> <!-- DECLARO EL CONTENIDOS DE MI ANCLA --> <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> <!-- EMPIEZA EL PRIMER POEMA --> <A NAME="POEMAUNO"> <B> POEMA UNO <B><BR><PRE>Lento, amargo animal... 41 /113
  43. 43. Unidad de Servicios de Cómputo Académico Diseño de Páginas Web con HTML y FlashLento, amargo animalque soy, que he sido,amargo desde el nudo de polvo y agua y vientoque en la primera generación del hombre pedía a Dios.</PRE> <A HREF="#POEMAS"> REGRESA A POEMAS </A><BR> <!-- TERMINA EL PRIMER POEMA --><BR><BR><BR> <!-- EMPIEZA EL SEGUNDO POEMA --> <A NAME="POEMADOS"> <B> POEMA DOS <B><BR><PRE>Amargo como esos minerales amargosque en las noches de exacta soledadmaldita y arruinada soledadsin uno mismo—trepan a la gargantay, costras de silencio,asfixian, matan, resucitan.</PRE> <A HREF="#POEMAS"> REGRESA A POEMAS </A><BR> <!-- TERMINA EL SEGUNDO POEMA --><BR><BR><BR> <!-- EMPIEZA EL TERCER POEMA --> <A NAME="POEMATRES"> <B> POEMA TRES <B><BR><PRE>Amargo como esa voz amargaprenatal, presubstancial, que dijonuestra palabra, que anduvo nuestro camino,que murió nuestra muerte,y que en todo momento descubrimos</PRE> <A HREF="#POEMAS"> REGRESA A POEMAS </A><BR> <!-- TERMINA EL TERCER POEMA --><BR><BR><BR> <!-- EMPIEZA EL CUARTO POEMA --> <A NAME="POEMACUATRO"> <B> POEMA CUATRO <B><BR> 42 /113
  44. 44. Unidad de Servicios de Cómputo Académico Diseño de Páginas Web con HTML y Flash<PRE>Amargo desde dentro,desde lo que no soy—mi piel como mi lengua—,desde el primer viviente,anuncio y profecía.</PRE> <A HREF="#POEMAS"> REGRESA A POEMAS </A><BR> <!-- TERMINA EL CUARTO POEMA --><BR><BR><BR> <!-- EMPIEZA EL QUINTO POEMA --> <A NAME="POEMACINCO"> <B> POEMA CINCO <B><BR><PRE> Lento desde hace siglos,remoto —nada hay detrás—,lejano, lejos, desconocido.Lento, amargo animalque soy, que he sido.</PRE> <A HREF="#POEMAS"> REGRESA A POEMAS </A><BR> <!-- TERMINA EL QUINTO POEMA --> 43 /113
  45. 45. Unidad de Servicios de Cómputo Académico Diseño de Páginas Web con HTML y Flash 1 /113
  46. 46. Unidad de Servicios de Cómputo Académico Diseño de Páginas Web con HTML y Flash VII. ImágenesTipos de ImágenesLos Navegadores pueden desplegar imágenes junto con el texto, lo que hace que losdocumentos se vean mejor. Lo que es más importante, las imágenes comunicaninformación que sería imposible, o muy difícil de transmitir con palabras. Los principalesusos 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 paraInternet, pueden ser del tipo: ♦ GIF ♦ JPG o JPEGGIF (Graphics Interchange File)Este tipo de imágenes no utiliza mucho espacio de memoria y además se cargan en vídeomuy 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 mayornúmero de colores que las GIF, hasta 16 millones de tonos.Sintaxis<IMG Src =”Nombre de la Imagen. su extensión” >Donde:IMGEs la etiqueta que define que será utilizado un archivo de imagen para desplegarlo en eldocumento de nuestra página (Puede ser GIF o JPG). 2 /113
  47. 47. Unidad de Servicios de Cómputo Académico Diseño de Páginas Web con HTML y FlashSrcEste es el atributo que indica el origen de donde se obtendrá el archivo imagen.Nombre de la ImagenEl 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: <IMG Src=”.../IMAGENES/logo.jpg ”>Modificadores de ImagenAtributos 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. 1 /113
  48. 48. Unidad de Servicios de Cómputo Académico Diseño de Páginas Web con HTML y Flash VIII. Utilerías para la Página.Hasta ahora se han mencionado atributos para algunas etiquetas, no se han mencionado losdemás servicios de Internet en las Ligas, comentaremos como se utiliza una imagen comoliga, ya que en el siguiente tema utilizaremos una imagen como mapa de ligas.Etiqueta BODYLa etiqueta BODY también cuenta con muchos atributos y a continuación se describiránalgunos, 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 margenEjemplo:<BODY Background=”C:/IMAGENES/Invierno.jpg” BgColor=”Pink” Text=”Black”Link=”Red” Alink=”Green” Vlink=”White”> 2 /113
  49. 49. Unidad de Servicios de Cómputo Académico Diseño de Páginas Web con HTML y FlashResultadoNota:Todos los atributos mostrados en la tabla son para darle presentación al cuerpo denuestra página, para usar cada uno de ellos debemos de tomar en cuenta el diseño quedeseamos obtener.Ligas con ImágenesYa vimos en capítulos anteriores la forma de crear ligas, ahora vamos a ver como se creanligas con imágenes.SRC="ruta_imagen" que establece la localización de la imagen que queremos insertarmediante la etiqueta IMG, y en donde la ruta puede ser relativa a la estructura de carpetasdel sitio Web o absoluta, en cuyo caso se debe dar la URL completa del fichero gráfico. 3 /113
  50. 50. Unidad de Servicios de Cómputo Académico Diseño de Páginas Web con HTML y FlashEjemplos:<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, comose ve a continuación:Sintaxis <A Href = “URL” > <IMG Src = “Archivo imagen”> </A>Ejemplo <ADDRESS> <A Href="mailto:cesar@cancun.fi-a.unam.mx"> <P> <P> <IMG Src=".../IMAGENES/Unica.jpg" Border=2> <P> <P> </A> </ADDRESS>Resultado 4 /113
  51. 51. Unidad de Servicios de Cómputo Académico Diseño de Páginas Web con HTML y FlashNota:En este ejemplo se vemos la manera de crear una liga o enlace a nuestro correoelectrónico mediante una imagen que nosotros deseemos que aparezca en nuestroNavegador, esto mediante la etiqueta ADRESS.Código de ColoresTablas de Colores Código Color 000000 Negro FF0000 Rojo 00FF00 Verde 0000FF Azul FF00FF Morado FFFF00 Amarillo 00FFFF Cyan 999000 Gris FFFFFF BlancoEjemplo <BODY Background=”#A020A0” BgColor=”#40FF20”> <FONT Size=”5” Color =”#FF2020”>Nota:El código de colores es parte fundamental del diseño de nuestra página, con el podemoshacer millones de combinaciones, podemos empezar a probar los colores para obtener elcolor deseado. 5 /113
  52. 52. Unidad de Servicios de Cómputo Académico Diseño de Páginas Web con HTML y Flash X. FormulariosDefinición.Los formularios son una de las herramientas de que disponemos a la hora de hacer nuestraspaginas Web interactivas, en el sentido de que nos permiten recopilar información de lapersona 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, dedatos que van a contener diversos campos diferentes en su funcionalidad y que nos van apermitir 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 servidorpara su procesamiento o a nosotros directamente, mediante correo electrónico.CaracterísticasLos formularios deben colocarse dentro del cuerpo del documento HTML, esto significa quetodos los formularios tienen las mismas etiquetas requeridas al principio y al final comocualquier documento HTML.Los formularios están formados por una serie de controles distintos, cada uno de los cualesestá asociado a un tipo concreto de datos o una acción predeterminada: botones de envío yborrado 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 queremosmostrar en una página un elemento aislado de un formulario, aunque sea con otra finalidaddiferente a la del envío de los datos que contenga al servidor (por ejemplo para tratar esainformación mediante Javascript), es necesario delimitar ese elemento de formulariomediante las etiquetas <FORM> y</FORM>. Si no lo hacemos así, I.Explorer sí mostrara elelemento, pero Nestcape no.La pareja de etiquetas se introduce en el código HTML dentro del BODY de la página, en ellugar en que queramos que nos aparezcan los elementos del formulario.Sus principales atributos o parámetros son: 6 /113
  53. 53. Unidad de Servicios de Cómputo Académico Diseño de Páginas Web con HTML y FlashPOST / GET:Indica el método según el que se van a transferir las variables del formulario. POST envíalos datos, normalmente al programa CGI definido en action o por correo si en action hemosutilizado mailto.El método de uso más normal es POST, y en el caso de que estemos mandando elformulario 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 (utilizandocomo separador de las variables la "?"). Con el método GET los datos son encadenados alURL especificado en action, utilizando el tipo de codificación especificado en el atributoenctype. 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 através de un mail con el método post sería "text/plain". Especifica el tipo de encriptaciónque se va a realizar con los datos que se van a enviar. Este atributo solamente se aplica simethod es POST.<INPUT>La etiqueta <INPUT> va a definir la mayoría de los diferentes elementos que va a contenerel formulario. Es la etiqueta que define el tipo de contenido de entrada y pueden ser camposde 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. 7 /113
  54. 54. Unidad de Servicios de Cómputo Académico Diseño de Páginas Web con HTML y Flash 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. tabindex="n", especifica el orden de tabulador que tendrá el campo respecto todos los elementos que incluye el formulario.♦ 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. 8 /113
  55. 55. Unidad de Servicios de Cómputo Académico Diseño de Páginas Web con HTML y Flash disabled, desactiva la casilla de verificación, por lo que el usuario no podrá marcarla. tabindex="n", especifica el orden de tabulador que tendrá el campo respecto todos los elementos que incluye el formulario.♦ 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. tabindex="n", especifica el orden de tabulador que tendrá el campo respecto todos los elementos que incluye el formulario.♦ 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. 9 /113
  56. 56. Unidad de Servicios de Cómputo Académico Diseño de Páginas Web con HTML y Flash tabindex="n", especifica el orden de tabulador que tendrá el campo respecto todos los elementos que incluye el formulario.♦ 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ástambién cuenta con la opción de cancelar, para limpiar o reiniciar las opcionespredeterminadas 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 ovarias 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 respecto todos los elementos que incluye el formulario. ♦ 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 laopción que mas tenga. 10 /113

×