INDICE

Introduccin. ............................................................................................................ 3 Objetivo del Curso ................................................................................................... 4 Unidad I. Lenguaje HTML ....................................................................................... 5 1.1. Introduccin al HTML .................................................................................... 5 Qu es HTML .................................................................................................................... 5 Versiones de HTML ........................................................................................................... 6 Compatibilidad con Navegadores ...................................................................................... 6 Editores de HTML .............................................................................................................. 7 Introduccin al Bloc de Notas ............................................................................................ 8 Compaginar dos sesiones ................................................................................................. 9 Etiquetas (sintaxis y ejemplos) ........................................................................................ 10 Mi primera Pgina............................................................................................................ 11 1.2. Estructura Bsica de un documento HTML ................................................. 12 1.3. Instrucciones de Cabecera .......................................................................... 13 Ttulo de Pgina .............................................................................................................. 13 Meta Tags........................................................................................................................ 13 Cuerpo del Documento .................................................................................................... 14 Color de Texto y Fondo ................................................................................................... 15 Paleta de Colores ............................................................................................................ 16 1.4. El Texto y su Formato ................................................................................. 20 Caracteres Especiales ..................................................................................................... 20 Comentarios .................................................................................................................... 26 Saltos de Lnea ................................................................................................................ 27 Separadores o Saltos de Pgina ..................................................................................... 27 Sangra del Texto ............................................................................................................ 27 Negrita, Cursiva y Subrayado .......................................................................................... 27 Tipo, Tamao y Color de Letra (formato del texto) .......................................................... 27 Prrafos ........................................................................................................................... 28 Alineacin de Prrafo ...................................................................................................... 28 Formateo de Texto .......................................................................................................... 29 Encabezados ................................................................................................................... 30 Marquesinas .................................................................................................................... 31 Listas ............................................................................................................................... 32 1.5. Hipervnculos y Anclas ................................................................................ 35 1.6. Insercin de Imgenes. ............................................................................... 35 1.7. Tablas ......................................................................................................... 36 Atributos de las Tablas (alto, ancho, bordes) .................................................................. 36 Filas y Columnas ............................................................................................................. 37 Compartir Filas y Columnas ............................................................................................ 38 Tablas Anidadas .............................................................................................................. 40 1.8. Marcos ........................................................................................................ 40 1.9. Formularios ................................................................................................. 46 Campos de Areas de Texto ............................................................................................. 48

Diseo de Pginas Web Campos de Entrada de Datos ......................................................................................... 49 Campos de Seleccin ...................................................................................................... 53 Unidad II. Hojas de Estilo Cascada ....................................................................... 54 2.1 Introduccin a las Hojas de Estilo Cascada ................................................. 54 2.2 Aplicacin ..................................................................................................... 54 2.3 Clases .......................................................................................................... 57 Unidad III. Macromedia Flash Player 5.0 .............................................................. 59 3.1. Introduccin a Macromedia Flash ............................................................... 59 Que es Macromedia Flash ............................................................................................... 59 Espacio (entorno) de Trabajo .......................................................................................... 59 Paletas y Ventanas Acoplables ....................................................................................... 61 3.2. Creacin de Objetos Bsicos. ..................................................................... 64 Formas Bsicas ............................................................................................................... 64 Operaciones Bsicas con Dibujos ................................................................................... 65 Nodos, Curvas y contornos ............................................................................................. 65 Alineacin y distribucin .................................................................................................. 65 Importacin y Exportacin ............................................................................................... 65 Efectos Avanzados .......................................................................................................... 66 3.3. Creacin de Animaciones. .......................................................................... 66 Por interpolacin .............................................................................................................. 66 Movimiento de interpolacin a lo largo de un trazado ..................................................... 67 Usando Clips de Pelculas ............................................................................................... 67 3.4. Escenas y Botones...................................................................................... 68 Cdigos ActionScrips bsicos ......................................................................................... 68 Otros botones de Flash ................................................................................................... 70 Multimedia ....................................................................................................................... 71 Publicacin de Archivos................................................................................................... 72 3.5. Culminacin del Portafolio ........................................................................... 72

-2-

Diseo de Pginas Web Introduccin. Aunque se pueda pensar que Internet es algo que ha surgido en estos ltimos tiempos, no es as: Internet ya lleva con nosotros unas cuantas dcadas. Los inicio de Internet nos remontan a los aos 60. En plena guerra fra, Estados Unidos crea una red exclusivamente militar, con el objetivo de que, en el hipottico caso de un ataque ruso, se pudiera tener acceso a la informacin militar desde cualquier punto del pas. Este red se cre en 1969 y se llam ARPANET. En principio, la red contaba con 4 ordenadores distribuidos entre distintas universidades del pas. Dos aos despus, ya contaba con unos 40 ordenadores conectados. Tanto fue el crecimiento de la red que su sistema de comunicacin se qued obsoleto. Entonces dos investigadores crearon el Protocolo TCP/IP, que se convirti en el estndar de comunicaciones dentro de las redes informticas (actualmente seguimos utilizando dicho protocolo) ARPANET sigui creciendo y abrindose al mundo, y cualquier persona con fines acadmicos o de investigacin poda tener acceso a la red. Las funciones militares se desligaron de ARPANET y fueron a parar a MILNET, una nueva red creada por los Estados Unidos. La NSF (National Science Fundation) crea su propia red informtica llamada NSFNET, que ms tarde absorbe a ARPANET, creando as una gran red con propsitos cientficos y acadmicos. El desarrollo de las redes fue abismal, y se crean nuevas redes de libre acceso que ms tarde se unen a NSFNET, formando el embrin de lo que hoy conocemos como INTERNET. El desarrollo de NSFNET fue tal que hacia el ao 1990 ya contaba con alrededor de 100.000 servidores. El CERN (Centro Europeo de Investigacin de Partculas) crea las pginas web, con el objetivo de comunicarse con otros cientficos europeos. En 1993 un estudiante norteamericano escribi el cdigo del primer explorador web, el Mosaic, que se distribua de forma gratuita por la red, y permita tener acceso a grficos y documentos de texto dentro de Internet. Esto supuso una autntica revolucin, y a partir de ese momento, Internet no ha parado de crecer. Actualmente es casi imposible calcular los sitios web que existen y los servidores a los que tenemos acceso. Internet se ha desarrollado en esta ltima dcada mucho, y en parte es debido a los fines comerciales de las empresas. Internet ya no es la red de investigacin ni militar para lo que fue creada, ahora Internet es, ante todo, un negocio, y eso ha sido lo que ha empujado su desarrollo.

-3-

Diseo de Pginas Web Pero, de qu sirve una Gran Red sin programas (navegadores) que permitan tener acceso a ellas?, en realidad no serviran de nada o a nadie ms que las personas que cuenten con estos navegadores capaces de visualizar la informacin contenida en estas redes, para ello se cre un lenguaje estndar que permitiera a todos, o por lo menos a la mayora navegar por estos sitios, siendo ste el HTML (que traducido de sus siglas en Ingls significa: Lenguaje para marcado de hipertexto), es notorio mencionar que ste Lenguaje no es propiamente un Lenguaje de Programacin sino de Marcas, es decir que cualquier error de escritura en las sentencias, no afectan al equipo (computadora), sino que a la forma en que ser visualizada por el Navegador. Por otra arte, dada la poca bibliografa escrita existente acerca de este tema, te recomendamos cuidar bien este documento, que te ser de ayuda a la hora de realizar consultas bibliogrficas. Qu lo Aproveches!

Objetivo del Curso Este Curso tiene por Objetivo dotar al alumno de las herramientas necesarias para la elaboracin, diseo y publicacin de Pginas Web, con un acabado profesional, que les permita competir en el nuevo y creciente Mercado Virtual, para lo cual se ensearn las tcnicas estndares de diseo y cdigos de publicacin.

-4-

Diseo de Pginas Web Unidad I. Lenguaje HTML Objetivo: Disear Pginas Web desde el Block de Notas de Windows, inicialmente, con el fin de que el alumno entienda, interprete y se familiarice con el cdigo html, y posteriormente utilizar Editores Web para que el alumno tenga una ayuda visual, dando un toque profesional y llamativo a sus Pginas Web.

1.1. Introduccin al HTML

Qu es HTML
El HTML (Hyper Text Markup Language) es el lenguaje con el que se escriben las pginas web. Es un lenguaje de hipertexto, es decir, un lenguaje que permite escribir texto de forma estructurada, y que est compuesto por etiquetas, que marcan el inicio y el fin de cada elemento del documento. Un documento hipertexto no slo se compone de texto, puede contener imgenes, sonido, vdeos, etc., por lo que el resultado puede considerarse como un documento multimedia. Los documentos HTML deben tener la extensin html o htm, para que puedan ser visualizados en los navegadores (programas que permiten visualizar las pginas web). Los navegadores se encargan de interpretar el cdigo HTML de los documentos, y de mostrar a los usuarios las pginas web resultantes del cdigo interpretado. Este lenguaje estructura documentos. La mayora de los documentos tienen estructuras comunes (ttulos, prrafos, listas...) que van a ser definidas por este lenguaje mediante etiquetas. Cualquier cosa que no sea una etiqueta es parte del documento mismo. El lenguaje HTML no describe la apariencia del diseo de un documento sino que ofrece a cada plataforma que le de formato segn su capacidad y la de su navegador (tamao de la pantalla, fuentes que tiene instaladas...). Por ello y para no frustrarnos, no debemos disear los documentos basndonos en como lucen en nuestro navegador sino que debemos centrarnos en proporcionar un contenido claro y bien estructurado que resulte fcil de leer y entender. No se desespere por lo que acaba de leer. HTML tiene dos ventajas que lo hacen prcticamente imprescindibles a la hora de disear una presentacin web: Su compatibilidad y su facilidad de aprendizaje debido al reducido nmero de etiquetas que usa.

-5-

Diseo de Pginas Web

Versiones de HTML
En noviembre de 1995 se aprob el estndar HTML 2.0. para la creacin de pginas web. Se cre con objetivos divulgativos, orientado a la actividad acadmica, en el que el contenido de las pginas era ms importante que el diseo. Pero esta versin del HTML careca de muchas herramientas que permitieran controlar el diseo de las pginas y aadir contenido multimedia, por lo que Netscape (cuyos navegadores eran los ms utilizados por aquellos aos) comenz a incluir nuevas etiquetas que no existan en el estndar. El comit encargado de establecer los estndares dentro de Internet, comenz a trabajar en el borrador de una nueva versin de HTML, el borrador de HTML 3.0. Pero este borrador result demasiado extenso, al intentar incluir numerosos nuevos atributos para etiquetas ya existentes, y la creacin de otras muchas etiquetas nuevas. Por ello, no fue bien aceptado por el mercado y varias compaas se unieron para formar un nuevo comit encargado de establecer los estndares del HTML. Este comit pas a llamarse W3C. En enero de 1997 se aprob el estndar HTML 3.2. Este nuevo estndar inclua las mejoras proporcionadas por los navegadores Internet Explorer y Netscape Navigator, que ya haban realizado extensiones sobre el estndar HTML 2.0. En diciembre de 1997 se aprob el estndar HTML 4.0, creado para estandarizar los marcos (frames), las hojas de estilo y los scripts. En septiembre de 2001 se aprob el estndar HTML 4.01.

Compatibilidad con Navegadores

Como hemos dicho, el navegador instalado en el ordenador del usuario es el que interpreta el cdigo HTML de la pgina que visita por lo que a veces puede ocurrir que dos usuarios visualicen la misma pgina de forma distinta porque tienen instalados navegadores distintos o incluso versiones distintas del mismo navegador. Los navegadores de hoy en da pretenden ser compatibles con la ltima versin de HTML. Es necesario realizar extensiones de los navegadores para que puedan ser compatibles con esta ltima versin.

-6-

Diseo de Pginas Web Dos de los navegadores que continuamente estn realizando extensiones son Internet Explorer y Netscape Navigator, que realizan extensiones incluso antes de que se establezcan los estndares, intentando incluir las nuevas funciones incluidas en los borradores. Los navegadores tienen que ser compatibles con la ltima versin HTML para poder interpretar el mayor nmero posible de etiquetas. Si un navegador no reconoce una etiqueta, la ignora y el efecto que pretenda la etiqueta no queda reflejado en la pgina. Para realizar las extensiones de estos navegadores se aaden nuevos atributos a las etiquetas ya existentes, o se aaden nuevas etiquetas. Como resultado a estas extensiones, habrn pginas cuyo cdigo podr ser interpretado completamente por todos los navegadores, mientras que otras, al incluir nuevos atributos o etiquetas del borrador de la ltima versin de HTML, solo podrn ser interpretadas en su totalidad en los navegadores ms actualizados. En este ltimo caso tambin puede ocurrir que alguna etiqueta de la pgina solamente pueda ser interpretada por un navegador concreto, y otra etiqueta por un navegador diferente al anterior, por lo que nunca sera visualizada en su totalidad por ningn navegador. Uno de los retos de los diseadores de pginas web es hacer las pginas ms atractivas utilizando toda la potencia del lenguaje HTML pero teniendo en cuentas estos problemas de compatibilidades para que el mayor nmero de internautas vean sus pginas tal como las ha diseado.

Editores de HTML
Un editor es un programa que nos permiten redactar documentos. Hoy en da existen un gran nmero de editores que permiten crear pginas web sin la necesidad de escribir ni una sola lnea de cdigo HTML. Estos editores disponen de un entorno visual, y generan automticamente el cdigo de las pginas. Al poder ver en todo momento cmo quedar la pgina en el navegador, se facilita la creacin de las pginas, y el uso de mens permite ganar rapidez. Estos editores visuales pueden generar en ocasiones cdigo basura, es decir, cdigo que no sirve para nada, en otras ocasiones puede ser ms efectivo corregir directamente el cdigo por lo que resulta necesario saber HTML para poder depurar el cdigo de nuestra pginas.

-7-

Diseo de Pginas Web Algunos de los editores visuales con los que podrs crear tus pginas web son Macromedia Dreamweaver, Microsoft Frontpage, Adobe Pagemill, NetObjects Fusion, CutePage, HotDog Proffesional, Netscape Composer y Arachnophilia, de los cuales algunos tienen la ventaja de ser gratuitos. Es aconsejable comenzar utilizando una herramienta lo ms sencilla posible, para tener que insertar nosotros mismos el cdigo HTML. Esto permite familiarizarse con el lenguaje, para poder utilizar algn editor visual posteriormente, y depurar el cdigo cuando fuera necesario. Para crear pginas web escribiendo directamente el cdigo HTML puedes utilizar la herramienta Wordpad o el Bloc de notas que proporciona Windows.

Introduccin al Bloc de Notas

Veamos las dos formas bsicas de arrancar el Bloc de notas. Desde el botn Inicio situado, normalmente, en la esquina inferior izquierda de la pantalla. Colocar el cursor y hacer clic sobre el botn Inicio, se despliega un men; al colocar el cursor sobre Programas aparece otra lista con los programas que hay instalados en tu ordenador, buscar Accesorios, seguidamente Bloc de notas, hacer clic sobre l, y se arrancar el programa. Desde el icono del Bloc de notas del escritorio .

Para cerrar el Bloc de notas, puedes utilizar cualquiera de las siguientes operaciones: Hacer clic en el botn cerrar Pulsar la combinacin de teclas ALT+F4. Hacer clic sobre el men Archivo y elegir la opcin Salir. Si el documento ha sido modificado y no ha sido guardado antes de cerrar, se te pedir confirmacin para guardarlo antes de cerrar el programa. Siempre que se abre el bloc de notas aparece un documento en blanco. A la hora de escribir en l, funciona como cualquier otro editor de texto, basta con situar el cursor en el documento y escribir. Es recomendable insertar una nueva lnea para cada nueva etiqueta HTML, ya que resulta ms fcil trabajar de este modo. Si escribiramos todo el cdigo seguido nos resultara difcil interpretarlo, por ello es -8-

Diseo de Pginas Web preferible programar insertando las etiquetas por separado, en diferentes lneas. A travs del men Formato, opcin Fuente, puedes cambiar la fuente de todo el documento. Si lo deseas, puedes hacer la letra algo ms grande o pequea. Para abrir un documento, puedes utilizar cualquiera de las siguientes operaciones una vez abierto el Bloc de notas. Pulsar la combinacin de teclas Ctrl+A. Hacer clic sobre el men Archivo y elegir la opcin Abrir. Nota: Como el Bloc de notas sirve originalmente para escribir documentos de texto, cuando le decimos Abrir, por defecto nos muestra los documentos con extensin .txt, nuestras pginas tienen la extensin .htm o html, por lo que debemos cambiar en el cuadro de dilogo abrir el tipo de archivo para visualizarlos todos y poder ver as nuestras pginas. Para abrir un documento nuevo, puedes utilizar cualquiera de las siguientes operaciones. Pulsar la combinacin de teclas Ctrl+N. Hacer clic sobre el men Archivo y elegir la opcin Nuevo. Para guardar un documento, puedes utilizar cualquiera de las siguientes operaciones. Pulsar la combinacin de teclas Ctrl+G. Hacer clic sobre el men Archivo y elegir la opcin Guardar. A la hora de guardar un documento no debes olvidar guardarlo con la extensin htm o html. Por ejemplo, puedes guardar un documento con el nombre mipagina.htm.

Compaginar dos sesiones

Compaginar dos sesiones puede resultarte muy til al realizar los ejercicios. Puedes cargar un documento en el Bloc de notas y en un navegador al mismo tiempo. Cada vez que realices algn cambio en el cdigo del Bloc de notas y guardes los cambios, puedes actualizar la pgina cargada en el navegador para ver los cambios que ha sufrido por las modificaciones en el cdigo.

-9-

Diseo de Pginas Web Para compaginar dos sesiones abre el Internet Explorer, no dejes que cargue la pagina principal, da clic en Detener, posteriormente abre el Bloc de Notas (Inicio>Ejecutar>notepad), da clic derecho en la barra de Tareas y selecciona la opcin Mosaico Vertical y listo ya estas trabajando con dos ventanas al mismo tiempo, quizs no te parezca gran cosa, pero a medida que vayamos avanzando te ser de mucha ayuda en las prcticas.

Etiquetas (sintaxis y ejemplos)

Las etiquetas o marcas delimitan cada uno de los elementos que componen un documento HTML. Existen dos tipos de etiquetas, la de comienzo de elemento y la de fin o cierre de elemento. La etiqueta de comienzo est delimitada por los caracteres < y >. Est compuesta por el identificador o nombre de la etiqueta, y puede contener una serie de atributos opcionales que permiten aadir ciertas propiedades. Su sintaxis es: <identificador atributo1 atributo2 ... atributon> Los atributos de la etiqueta de comienzo siguen una sintaxis predefinida y pueden tomar cualquier valor propio del usuario, o valores HTML predefinidos. La etiqueta de final est delimitada por los caracteres </ y >. Est compuesta por el identificador o nombre de la etiqueta, y no contiene atributos. Su sintaxis es: </identificador> Cada uno de los elementos de la pgina se encontrar entre una etiqueta de comienzo y su correspondiente etiqueta de cierre, a excepcin de algunos elementos que no necesitan etiqueta de cierre. Tambin es posible anidar etiquetas, es decir, insertar etiquetas entre otras etiquetas de comienzo y de cierre. A continuacin tenemos un ejemplo en el que tenemos la etiqueta <font..> anidada dentro de la etiqueta <p..>.: <p align="center"><font color="#A7878A" size="4" face="Comic Sans MS, Arial, MS Sans Serif">Bienvenidos a www.compulab.edu.ni </font></p> Este cdigo dara como resultado el siguiente texto: Es importante anidar bien las etiquetas, las etiquetas no se pueden 'cruzar', en nuestro ejemplo hemos empezado por la etiqueta <p..>, antes de cerrar esta etiqueta hemos puesto la <font..> por lo que antes de cerrar la etiqueta <p..> debemos cerrar la etiqueta etiqueta <font..>.

-10-

Diseo de Pginas Web

Mi primera Pgina
Lo primero que tienes que hacer es abrir el Bloc de notas. Para abrirlo, puedes dirigirte al men Inicio, Programas, Accesorios, opcin Bloc de notas. Seguidamente introduce, en el documento en blanco, el texto siguiente: <html> <head> <title>MI PRIMERA PAGINA</title> <body bgcolor="#FFCC99"> <font color="#CC3300" size="5">Hola, estoy haciendo pruebas.</font> </body> </html> Guarda el documento con la extensin htm, con el nombre miprimpag.htm. Puedes guardarlo a travs del men Archivo, opcin Guardar. Pulsando dos veces sobre el icono del archivo miprimpag.htm, ste debera abrirse automticamente en el navegador que tengas instalado en tu ordenador. El navegador deber mostrar una pgina como la de la derecha. Como puedes ver, la pgina resultante es una pgina que solamente tiene una lnea de texto. Si observas la barra de ttulo del navegador, vers que el ttulo de la pgina es MI PRIMERA PAGINA. Este ttulo ha sido establecido por la lnea <title>MI PRIMERA PAGINA</title>. El color de fondo de la pgina ha sido establecido por la lnea <body bgcolor="#FFCC99">. El texto Hola, estoy haciendo pruebas. se ha insertado a travs de lnea <font color="#CC3300" size="5">Hola, estoy haciendo pruebas.</font>.

-11-

Diseo de Pginas Web

1.2. Estructura Bsica de un documento HTML

Una vez entrados en materia, procederemos a conocer la estructura de un documento HTML, esto es de mucha ayuda a la hora de no contar con Editores Web y tener nicamente disponible un Editor de Texto sencillo como por ejemplo: el Block de Notas de Windows, la estructura es la siguiente: <html> <head> <title>Untiled-1</title> </head> <body> Cuerpo del documento </body> </html> Como podrs apreciar Tres son la etiquetas que describen la estructura general de un documento y dan una informacin sencilla sobre l. Estas etiquetas no afectan a la apariencia del documento y solo interpretan y filtran los archivos HTML. 1. <HTML>: Limitan el documento e indica que se encuentra escrito en este lenguaje. 2. <HEAD>: Especifica el prlogo del resto del archivo. Son pocas las etiquetas que van dentro de ella, destacando la del titulo <TITLE> y <Meta>. En head no hay que colocar nada del texto del documento. 3. <BODY>: Encierra el resto del documento, el contenido, es en s, la parte visible del documento, donde colocaremos el resto de etiquetas, imgenes, texto, etc. Como prctica realiza lo siguiente en el Block de Notas: <html> <head> <title>Ejemplo1</title> </head> <body> Hola Mundo, esta pagina no tiene atributos </body> </html>

-12-

Diseo de Pginas Web

1.3. Instrucciones de Cabecera

Llamaremos Instrucciones de Cabecera a todas las Instrucciones que se encuentren entre las Etiquetas <Head>....</Head>, se llaman de cabecera porque son las primeras en cargar de todo el sitio, por esta razn las instrucciones en otros lenguajes como: Java Script y CSS son incrustadas en esta posicin permitiendo que se carguen de manera mas rpida garantizando as, una mejor navegacin.

Ttulo de Pgina
El Ttulo de Pgina es utilizado por los marcadores del navegador e identificar el contenido de la pgina, si se nos olvida colocar un Ttulo de Pgina, por defecto aparecer la leyenda Untiled-1 si usamos un Editor Web como Front Page DreamWeaver, mientras que si usamos el Block de notas aparecer como ttulo la ruta en que se guard el documento junto con su nombre. Solo puede haber un ttulo por documento, preferiblemente corto aunque significativo, y no caben otras etiquetas dentro de l

Meta Tags
Dentro de la etiqueta <Meta> se especifican las caractersticas de la Pgina Web, el contenido, etc. Muy importante si queremos que nuestra pgina sea incorporada a los mejores Motores de bsqueda, esta instruccin es de vital importancia a la hora de generar visitas a nuestra Web, o bien si queremos dar a conocer el nombre de la persona que dise el sitio, entre otras tenemos: Description Da una Explicacin del contenido de nuestro Sitio, pero no va solo, se deber acompaar el contenido con el atributo content para indicar el contenido que queremos dar a conocer, quedando su sintaxis: <Meta name=description content=texto descriptivo del sitio> Keywords Con este valor le damos a conocer al buscador cuales van a ser las palabras con las que nos va a incorporar a su lista de resultados, es recomendable ser lo mas preciso posible, es decir, no ubicar en estas lneas palabras comunes como: MP3, MPG, MPEG, JPG, Musica, MTV, entre otras, ya que las mismas se encuentras regadas en un sinnmero de pginas, lo que ocasionar que no quedemos dentro de los primeros en la lista de resultados, sino dentro de los ltimos. Por su sintaxis quedar as: <Meta name=keywords content=las palabras que vamos a incluir>

-13-

Diseo de Pginas Web Author Este es el valor que daremos al atributo name cuando queramos dar a conocer el nombre del diseador (es) del sitio, en el content escribiremos nuestro(s) nombre(s). Por su sintaxis quedar as: <Meta name=author content=el nombre del autor del sitio> Copyright En independencia que tengamos nuestros nombres dentro de la etiqueta autor, los derechos del sitio pueden ser de un tercero, es decir, si una empresa nos contrata para el diseo de su sitio, son ellos los que tienen los derechos sobre el sitio y no nosotros como diseadores, su sintaxis ser: <meta name=copyright content=El nombre/Slogan/saludo de la Empresa> Existen muchos mas Meta, sin embargo mencionamos los mas comunes y los que en realidad utilizars. Como se puede apreciar la sintaxis general de los Meta es: <meta name=valor content=valor> y no tienen etiqueta de cierre.

Cuerpo del Documento

Como dijimos anteriormente la etiqueta <Body> es la que rene todo el universo de instrucciones que harn posible la visualizacin de nuestro documento en Internet, pero esta etiqueta tiene sus propios atributos que a su vez modificarn la forma en que el sitio entero sea visualizado: <body text=valor bgcolor=valor topmargin=valor bottommargin=valor leftmargin=valor rightmargin=valor link=valor alink=valor vlink=valor> Text: Este atributo tiene un valor hexadecimal, por lo tanto afectar el color del texto usado en la pgina, mismo que por defecto es negro, lo podemos cambiar a azul marino navy, ya sea con el color en ingls o su valor, como dijimos al inicio, en notacin hexadecimal. ( para un color navy su valor hexadecimal es: #000080). Es necesario mencionar, que el uso de las comillas, como en cualquier lenguaje de Programacin, est determinado por la cantidad de caracteres usados, es decir, si es una sola palabra la que emplearemos, no es necesario las comillas; si por el contrario es una cadena de caracteres necesitaremos el uso de las comillas dobles. En el caso del color no es necesario el uso de las comillas dobles, pero deberemos anteponer el signo (#) al valor.

-14-

Diseo de Pginas Web bgcolor: Este atributo predetermina o cambia el color de fondo de una pgina, cabe hacer la aclaracin: No es lo mismo el color de fondo de una pgina que el color de fondo de una celda, tabla o fila, ya que las tres ltimas son elementos individuales del Body de la Pgina web. Como el text, la notacin del bgcolor es hexadecimal o bien el color deseado en ingls. Top/bottom/left/rightmargin: Los mrgenes o espacio entre el borde de la pantalla y el texto, marco, tabla de la pgina marco lo podemos predeterminar con las etiquetas topmargin, bottommargin, leftmargin, rightmargin, borde superior, inferior, izquierdo y derecho respectivamente, sus valores son cualquier numero entero positivo. Si no queremos espacio para los bordes, el valor ser 0 (cero). link: Define el color que tendrn por defecto, todos los vnculos que contenga nuestra pgina alink: Define el color que tendrn por defecto, todos los vnculos activos que contenga nuestra pgina vlink: Define el color que tendrn por defecto, todos los vnculos visitados que contenga nuestra pgina.

Color de Texto y Fondo

Por defecto el color de fondo de nuestra pantalla es blanca (#FFFFFF en hexadecimal) y el color de nuestro texto es de color negro (#000000) y el tipo de letra que est predeterminado en nuestro ordenador, lamentablemente con HTML no podemos predeterminar el Tipo de Letra, pero si el color de fondo de la pantalla y el color del texto de nuestro sitio completo, para realizarlo debes agregar dos atributos a la etiqueta BODY, estos atributos son: bgcolor y text, debe quedar as: <body bgcolor=F0F0F0 text=NAVY>

-15-

Diseo de Pginas Web Los colores en HTML los podemos utilizar en cdigo hexadecimal que es una mezcla de letras y nmeros (a-f; 0-9) solo se usan seis, es decir podemos utilizar cualquier numero (000000) o letra (absdef) siempre y cuando sean solamente seis; tambin usamos la escala RGB(0,0,0) esta escala utiliza los nmeros del 0 255 separados por coma para cada color, el primer numero corresponde a Rojo, el segundo a Verde y el tercero al color Azul o bien, si conocemos el nombre del color en ingles, es aceptado. Nosotros utilizaremos la escala Hexadecimal y los colores en Ingls para efectos de este curso.

Paleta de Colores
Ejemplos de Colores en Ingls:
Color Predefinido (ingls) black teal blue navy lime white purple yellow Espaol negro teal azul Color Predefinido (ingls) olive red maroon Espaol oliva rojo marrn gris fucsia verde plata agua

azul marino gray lima blanco Prpura Amarillo fuchsia green silver aqua

Paleta de Colores Estndar (ingls/Hexadecimal) :

Black = "#000000" Silver = "#C0C0C0" Gray = "#808080" White = "#FFFFFF" Maroon = "#800000" Red = "#FF0000" Purple = "#800080" Fuchsia = "#FF00FF" Green = "#008000" Lime = "#00FF00" Olive = "#808000" Yellow = "#FFFF00" Navy = "#000080" Blue = "#0000FF" Teal = "#008080" Aqua = "#00FFFF"

-16-

Diseo de Pginas Web Paleta de Colores Completa (216 colores) :

Muestra del color #HEX.
#000000 #000033 #000066 #000099 #0000CC #0000FF #003300 #003333 #003366 #003399 #0033CC #0033FF #006600 #006633 #006666 #006699 #0066CC #0066FF #009900 #009933 #009966 #009999 #0099CC #0099FF #00CC00 #00CC33 #00CC66 #00CC99 #00CCCC #00CCFF #00FF00 #00FF33 #00FF66 #00FF99 #00FFCC #00FFFF #330000 #330033 #330066 #330099

Muestra del color

#HEX.
#990000 #990033 #990066 #990099 #9900CC #9900FF #993300 #993333 #993366 #993399 #09933CC #9933FF #996600 #996633 #996666 #996699 #9966CC #9966FF #999900 #999933 #999966 #999999 #9999CC #9999FF #99CC00 #99CC33 #99CC66 #99CC99 #99CCCC #99CCFF #99FF00 #99FF33 #99FF66 #99FF99 #99FFCC #99FFFF #CC0000 #CC0033 #CC0066 #CC0099

-17-

Diseo de Pginas Web

#3300CC #3300FF #333300 #333333 #333366 #333399 #3333CC #3333FF #336600 #336633 #336666 #336699 #3366CC #3366FF #339900 #339933 #339966 #339999 #3399CC #3399FF #33CC00 #33CC33 #33CC66 #33CC99 #33CCCC #33CCFF #33FF00 #33FF33 #33FF66 #33FF99 #33FFCC #33FFFF #660000 #660033 #660066 #660099 #6600CC #6600FF #663300 #663333 #663366 #663399 #CC00CC #CC00FF #CC3300 #CC3333 #CC3366 #CC3399 #CC33CC #CC33FF #CC6600 #CC6633 #CC6666 #CC6699 #CC66CC #CC66FF #CC9900 #CC9933 #CC9966 #CC9999 #CC99CC #CC99FF #CCCC00 #CCCC33 #CCCC66 #CCCC99 #CCCCCC #CCCCFF #CCFF00 #CCFF33 #CCFF66 #CCFF99 #CCFFCC #CCFFFF #FF0000 #FF0033 #FF0066 #FF0099 #FF00CC #FF00FF #FF3300 #FF3333 #FF3366 #FF3399

-18-

Diseo de Pginas Web

#6633CC #6633FF #666600 #666633 #666666 #666699 #6666CC #6666FF #669900 #669933 #669966 #669999 #6699CC #6699FF #66CC00 #66CC33 #66CC66 #66CC99 #66CCCC #66CCFF #66FF00 #66FF33 #66FF66 #66FF99 #66FFCC #66FFFF #FF33CC #FF33FF #FF6600 #FF6633 #FF6666 #FF6699 #FF66CC #FF66FF #FF9900 #FF9933 #FF9966 #FF9999 #FF99CC #FF99FF #FFCC00 #FFCC33 #FFCC66 #FFCC99 #FFCCCC #FFCCFF #FFFF00 #FFFF33 #FFFF66 #FFFF99 #FFFFCC #FFFFFF

[extrado del Manual de HTML y CSS; Alvarez,Walter]

-19-

Diseo de Pginas Web

1.4. El Texto y su Formato

Caracteres Especiales
Suele suceder que el teclado no presenta algunas funciones, por ejemplo no aparece el signo de numero, o el signo igual o no sabemos como ingresar el corido para que se nos presente el signo de marca registrada, ien, para ello haremos uso de la siguiente tabla:

Tabla de ASCII estndar, nombres de entidades HTML, ISO 10646, ISO 8879, ISO 8859-1 alfabeto romano numero 1 Soporte para browsers: todos los browsers
ASCII Dec Hex 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 20 21 22 23 24 25 26 27 28 29 2A 2B 2C 2D 2E 2F Smbolo HTML Numero &#32; &#33; &#34; &#35; &#36; &#37; &#38; &#39; &#40; &#41; &#42; &#43; &#44; &#45; &#46; &#47; HTML Numero &#48; &#49; &#50; &#51; &#52; &#53; &#54; &#55; &#56; &#57; &#58; &#59; &#60; HTML Nombre Descripcin espacio signo de cierre de exclamacin / admiracin comillas dobles signo de nmero signo de dlar signo de porcentaje signo "&" / ampersand comilla / apstrofe parntesis izquierdo parntesis derecho asterisco signo de ms / adicin coma signo de menos / sustraccin / guon / raya punto barra oblicua - barra de divisin

! " # $ % & ' ( ) * + , . /

&quot;

&amp;

ASCII Dec Hex 48 49 50 51 52 53 54 55 56 57 58 59 60 30 31 32 33 34 35 36 37 38 39 3A 3B 3C

Smbolo 0 1 2 3 4 5 6 7 8 9 : ; <

HTML Nombre

Descripcin cero uno dos tres cuatro cinco seis siete ocho nueve dos puntos punto y coma signo de menor que

&lt;

-20-

Diseo de Pginas Web

61 62 63

3D 3E 3F

= > ?

&#61; &#62; &#63; HTML Numero &#64; &#65; &#66; &#67; &#68; &#69; &#70; &#71; &#72; &#73; &#74; &#75; &#76; &#77; &#78; &#79; HTML Numero &#80; &#81; &#82; &#83; &#84; &#85; &#86; &#87; &#88; &#89; &#90; &#91; &#92; &#93; &#94; &#95; HTML Numero &#96; &#97; &#98; &#99; &#100;

&gt;

signo de igual signo de mayor que signo de interrogacin - cierre

ASCII Dec Hex 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 40 41 42 43 44 45 46 47 48 49 4A 4B 4C 4D 4E 4F

Smbolo @ A B C D E F G H I J K L M N O

HTML Nombre

Descripcin smbolo arroba

ASCII Dec Hex 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 50 51 52 53 54 55 56 57 58 59 5A 5B 5C 5D 5E 5F

Smbolo P Q R S T U V W X Y Z [ \ ] ^ _

HTML Nombre

Descripcin

corchete izquierdo barra inversa corchete derecho signo de intercalacin - acento circunflejo signo de subrayado HTML Nombre

ASCII Dec Hex 96 97 98 99 100 60 61 62 63 64

Smbolo ` a b c d

Descripcin acento grave

-21-

Diseo de Pginas Web

101 102 103 104 105 106 107 108 109 110 111

65 66 67 68 69 6A 6B 6C 6D 6E 6F

e f g h i j k l m n o

&#101; &#102; &#103; &#104; &#105; &#106; &#107; &#108; &#109; &#110; &#111; HTML Numero &#112; &#113; &#114; &#115; &#116; &#117; &#118; &#119; &#120; &#121; &#122; &#123; &#124; &#125; &#126; HTML Nombre

ASCII Dec Hex 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 70 71 72 73 74 75 76 77 78 79 7A 7B 7C 7D 7E 7F

Smbolo p q r s t u v w x y z { | } ~

Descripcin

llave de apertura - izquierda barra vertical llave de cierre - derecho signo de equivalencia / tilde (no definido en estndar HTML 4) HTML Nombre

ASCII Dec Hex 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 80 81 82 83 84 85 86 87 88 89 8A 8B 8C 8D 8E 8F

Smbolo

HTML Numero

Descripcin (no definido en estndar HTML 4) (no definido en estndar HTML 4) (no definido en estndar HTML 4) (no definido en estndar HTML 4) (no definido en estndar HTML 4) (no definido en estndar HTML 4) (no definido en estndar HTML 4) (no definido en estndar HTML 4) (no definido en estndar HTML 4) (no definido en estndar HTML 4) (no definido en estndar HTML 4) (no definido en estndar HTML 4) (no definido en estndar HTML 4) (no definido en estndar HTML 4) (no definido en estndar HTML 4) (no definido en estndar HTML 4)

-22-

Diseo de Pginas Web

ASCII Dec Hex 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 90 91 92 93 94 95 96 97 98 99 9A 9B 9C 9D 9E 9F

Smbolo

HTML Numero

HTML Nombre

Descripcin (no definido en estndar HTML 4) (no definido en estndar HTML 4) (no definido en estndar HTML 4) (no definido en estndar HTML 4) (no definido en estndar HTML 4) (no definido en estndar HTML 4) (no definido en estndar HTML 4) (no definido en estndar HTML 4) (no definido en estndar HTML 4) (no definido en estndar HTML 4) (no definido en estndar HTML 4) (no definido en estndar HTML 4) (no definido en estndar HTML 4) (no definido en estndar HTML 4) (no definido en estndar HTML 4) (no definido en estndar HTML 4)

ASCII Dec Hex 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 A0 A1 A2 A3 A4 A5 A6 A7 A8 A9 AA AB AC AD AE AF

Smbolo

HTML Numero &#160; &#161; &#162; &#163; &#164; &#165; &#166; &#167; &#168; &#169; &#170; &#171; &#172; &#173; &#174; &#175; HTML Numero &#176; &#177; &#178; &#179; &#180; &#181; &#182; &#183; &#184;

HTML Nombre &nbsp; &iexcl; &cent; &pound; &curren; &yen; &brvbar; &sect; &uml; &copy; &ordf; &laquo; &not; &shy; &reg; &macr; HTML Nombre &deg; &plusmn; &sup2; &sup3; &acute; &micro; &para; &middot; &cedil;

Descripcin espacio sin separacin signo de apertura de exclamacin / admiracin signo de centavo signo de Libra Esterlina signo de divisa general signo de yen barra vertical partida signo de seccin diresis - umlaut signo de derechos de autor - copyright gnero feminino - indicador ordinal feminino comillas anguladas de apertura signo de no - smbolo lgico guin dbil signo de marca registrada macrn - raya alta

ASCII Dec Hex 176 177 178 179 180 181 182 183 184 B0 B1 B2 B3 B4 B5 B6 B7 B8

Smbolo

Descripcin signo de grado signo de ms o menos superndice dos - cuadrado superndice tres - cbico acento agudo - agudo espaciado signo de micro signo de fin de prrafo punto medio - coma Georgiana cedilla

-23-

Diseo de Pginas Web

185 186 187 188 189 190 191

B9 BA BB BC BD BE BF

&#185; &#186; &#187; &#188; &#189; &#190; &#191; HTML Numero &#192; &#193; &#194; &#195; &#196; &#197; &#198; &#199; &#200; &#201; &#202; &#203; &#204; &#205; &#206; &#207; HTML Numero &#208; &#209; &#210; &#211; &#212; &#213; &#214; &#215; &#216; &#217; &#218; &#219; &#220; &#221; &#222; &#223; HTML Numero &#224;

&sup1; &ordm; &raquo; &frac14; &frac12; &frac34; &iquest; HTML Nombre &Agrave; &Aacute; &Acirc; &Atilde; &Auml; &Aring; &AElig; &Ccedil; &Egrave; &Eacute; &Ecirc; &Euml; &Igrave; &Iacute; &Icirc; &Iuml; HTML Nombre &ETH; &Ntilde; &Ograve; &Oacute; &Ocirc; &Otilde; &Ouml; &times; &Oslash; &Ugrave; &Uacute; &Ucirc; &Uuml; &Yacute; &THORN; &szlig; HTML Nombre &agrave;

superndice uno gnero masculino - indicador ordinal masculino comillas anguladas de cierre fraccin un cuarto fraccin medio - mitad fraccin tres cuartos signo de interrogacin - apertura

ASCII Dec Hex 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 C0 C1 C2 C3 C4 C5 C6 C7 C8 C9 CA CB CC CD CE CF

Smbolo

Descripcin A mayscula con acento grave A mayscula con acento agudo A mayscula con acento circunflejo A mayscula con tilde A mayscula con diresis A mayscula con anillo diptongo AE mayscula (ligadura) C cedilla mayscula E mayscula con acento grave E mayscula con acento agudo E mayscula con acento circunflejo E mayscula con diresis I mayscula con acento grave I mayscula con acento agudo I mayscula con acento circunflejo I mayscula con diresis

ASCII Dec Hex 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 D0 D1 D2 D3 D4 D5 D6 D7 D8 D9 DA DB DC DD DE DF

Smbolo

Descripcin ETH islandesa mayscula N mayscula con tilde - ee mayscula O mayscula con acento grave O mayscula con acento agudo O mayscula con acento circunflejo O mayscula con tilde O mayscula con diresis signo de multiplicacin O mayscula with slash U mayscula con acento grave U mayscula con acento agudo U mayscula con acento circunflejo U mayscula con diresis Y mayscula con acento agudo THORN islandesa mayscula s minscula (alemn) - Beta minscula

ASCII Dec Hex 224 E0

Smbolo

Descripcin a minscula con acento grave

-24-

Diseo de Pginas Web

225 226 227 228 229 230 231 232 233 234 235 236 237 238 239

E1 E2 E3 E4 E5 E6 E7 E8 E9 EA EB EC ED EE EF

&#225; &#226; &#227; &#228; &#229; &#230; &#231; &#232; &#233; &#234; &#235; &#236; &#237; &#238; &#239; HTML Numero &#240; &#241; &#242; &#243; &#244; &#245; &#246; &#247; &#248; &#249; &#250; &#251; &#252; &#253; &#254; &#255;

&aacute; &acirc; &atilde; &auml; &aring; &aelig; &ccedil; &egrave; &eacute; &ecirc; &euml; &igrave; &iacute; &icirc; &iuml; HTML Nombre &eth; &ntilde; &ograve; &oacute; &ocirc; &otilde; &ouml; &divide; &oslash; &ugrave; &uacute; &ucirc; &uuml; &yacute; &thorn; &yuml;

a minscula con acento agudo a minscula con acento circunflejo a minscula con tilde a minscula con diresis a minscula con anillo diptongo ae minscula (ligadura) c cedilla minscula e minscula con acento grave e minscula con acento agudo e minscula con acento circunflejo e minscula con diresis i minscula con acento grave i minscula con acento agudo i minscula con acento circunflejo i minscula con diresis

ASCII Dec Hex 240 241 242 243 244 245 246 247 248 249 250 251 252 253 254 255 F0 F1 F2 F3 F4 F5 F6 F7 F8 F9 FA FB FC FD FE FF

Smbolo

Descripcin eth islandesa minscula ee minscula - n minscula con tilde o minscula con acento grave o minscula con acento agudo o minscula con acento circunflejo o minscula con tilde o minscula con diresis signo de divisin o barrada minscula u minscula con acento grave u minscula con acento agudo u minscula con acento circunflejo u minscula con diresis y minscula con acento agudo thorn islandesa minscula y minscula con diresis

HTML 4.01, ISO 10646, ISO 8879, alfabeto romano extendido A y B, Soporte para browsers: Internet Explorer > 4, Netscape > 4

-25-

Diseo de Pginas Web

Dec 338 339 352 353 376 402

Hex 152 153 160 161 178 192

Smbolo

HTML Numero &#338; &#339; &#352; &#353; &#376; &#402; HTML Numero &#8211; &#8212; &#8216; &#8217; &#8218; &#8220; &#8221; &#8222; &#8224; &#8225; &#8226; &#8230; &#8240; &#8364; &#8482;

HTML Nombre

Descripcin OE mayscula (ligadura) oe minscula (ligadura) S mayscula con caron s minscula con caron - acento hacek Y mayscula con diresis f minscula itlica - signo de funcin

Dec 8211 8212 8216 8217 8218 8220 8221 8222 8224 8225 8226 8230 8240 8364 8482

Hex 2013 2014 2018 2019 201A 201C 201D 201E 2020 2021 2022 2026 2030 20AC 2122

Smbolo

HTML Nombre

Descripcin raya corta raya larga comilla izquierda - citacin comilla derecha - citacin comilla de citacin - baja comillas de citacin - arriba izquierda comillas de citacin - arriba derecha comillas de citacin - abajo cruz doble cruz vieta - bullet puntos suspensivos signo de pro mil signo de euro signo de marca registrada - trade mark

&euro;

[extrado de la pgina http://ascii.cl/es/codigos-html.htm]

Comentarios
Para insertar comentarios dentro de un documento HTML utilizaremos la etiqueta especial, definindose un comentario de la forma: <!-- /--> <!-- Esto es un comentario /--> Los comentarios son tiles para identificar el documento, pudiendo indicar al comienzo del documento su titulo, autor y la fecha en el que fue realizado, esto se hace en cualquier lugar del documento. Tambin aunque ya con menos utilidad para comentar cualquier instruccin o circunstancia del documento. Estos comentarios no afectan la estructura del documento, ya que su nica funcin es, precisamente, comentar un evento; por lo mismo no sern visualizados en el navegador, nicamente en el Cdigo Fuente.

-26-

Diseo de Pginas Web

Saltos de Lnea
Los Saltos de lnea son muy tiles dentro del prrafo, ya que permite mostrar un solo prrafo como si fueran dos o tres, se utilizan para unir dos o ms prrafos para efectos de compartir sus atributos (alineacin), su etiqueta es <br> y no tiene etiqueta de cierre.

Separadores o Saltos de Pgina

No son propiamente unos Saltos de Pgina sino mas bien separadores, la etiqueta es <hr> y solamente tiene dos atributos: width y size, el primero define el ancho de la pantalla su valor ser en pixeles o en porcentaje y el segundo define el alto que tendr su valor es un numero natural positivo. Ejemplo <hr width="300" size="2" noshade> Lo que hace es presentarnos una raya (a manera de division de contenido) que abarca 300 pixeles extendidos de manera horizontal de la pantalla del navegador con un alto de 2 puntos y el atributo noshade indica que no tendr el aspecto tridimensional que por defecto presenta.

Sangra del Texto

Por Defecto los prrafos se encuentran alineados a la izquierda de la pantalla y no comparten espacios (no tienen sangra) entre el margen izquierdo y el inicio del prrafo, para tal fin utilizamos la etiqueta: <blockquote> texto a aplicar sangra</blockquote> El resultado ser un prrafo con una Sangra Francesa.

Negrita, Cursiva y Subrayado

<b>texto</b> Negrita <u>texto</u> Subrayado <i>texto</i> Cursiva Estas Etiquetas nos permiten aplicar formato al texto como si estiuviramos trabajando un documento de Word.

Tipo, Tamao y Color de Letra (formato del texto)

En el apartado anterior se vio el modo de definir los distintos ttulos de documento, mediante cabeceras. Estas son poco flexibles y predeterminadas.

-27-

Diseo de Pginas Web Existe otra etiqueta HTML que permite una ms sencilla adaptacin del tamao de las fuentes y permite adems modificar su color. La etiqueta que permite esto se llama FONT y presenta atributos que nos permiten modificar el tamao y color del texto incluido entre la etiqueta de inicio y fin, su representacin es <font>. Pero tambien hablamos de sus atributos, los que nos permiten modificar el tamao, tipo y color, de esta forma la sintaxis queda as: <font size=2 color=navy face=arial>Texto a modificar</font> Size: Color: Face: Especifica el tamao de la letra a usar, en HTML los tamaos van de -7 hasta +7 (lgicamente para valores positivos el signo + est de mas). Como su nombre lo indica, nos permite modificar el color de la letra, recordemos que los colores que usamos estn en escala Hexadecimal el nombre del color en Ingls. Especifica el tipo de letra a usar, sin embargo hay que tener en cuenta que si usamos un tipo de letra descargada de Internet o bien trada de otro ordenador, no se visualizar correctamente, por lo que deberemos acompaar al tipo de letra que colocamos como principal de una o dos fuentes secundarias que permitan al navegador buscar dentro del ordenador visitante el tipo de letra secundaria en caso de no encontrar la principal.

Prrafos
El prrafo es toda estructura lingstica ..., inicia con letra mayscula, finaliza con punto y Final. Eso es lo que dice la Real Academia Espaola y lo que nos han enseado desde la primaria, pus en HTML es lo mismo, es una estructura que como hemos aprendido desde la infancia, tiene oraciones, usamos palabras acentuadas, signos de puntuacin, etc. La Etiqueta de Prrafo es <p> y se cierra </p>, es necesario indicarle al navegador que iniciamos un prrafo y es indispensable para nosotros hacerlo, puesto que la alineacin se aplica al prrafo, de manera tal que si tenemos varios prrafos hay que aplicar alineacin a cada uno de ellos.

Alineacin de Prrafo
El prrafo lo podemos alinear a la izquierda, al centro, a la derecha y si es muy extenso lo justificamos para que se vea bonito, en html lo hacemos de la siguiente manera:

-28-

Diseo de Pginas Web <p align=left/center/right/justify> El atributo align es el que define la alineacin que tendr nuestro prrafo y sus posibles valores son : Left: Center: Right: Justify: Alinea el Prrafo a la izquierda Alinea el Prrafo al Centro de la pantalla. Alinea el Prrafo a la Derecha de la Pantalla. Alinea nuestro Prrafo de manera que los mrgenes tanto izquierdo como derecho sean los mismos en todas las lneas del prrafo.

Formateo de Texto
Cuando hablamos de Formateo de Texto nos referimos en realidad a la forma o estilos que afectan a palabras o caracteres dentro de otras entidades de HTML modificando el aspecto de ese texto para que sea diferente del texto que lo rodea. Existen dos tipos de estilos: Estilos lgicos: Indican como se va a emplear el texto que realzamos, no el como se va a formatear. <em>.....</em>: Indica que los caracteres estarn enfatizados de alguna manera, generalmente en cursiva aunque depender del navegador. <strong>.....</strong>: Los caracteres tendrn mayor nfasis, generalmente en negrita. <code>.....</code>: Muestra como una fuente monoespaciada, generalmente Courier. <samp>.....</samp>: Muy similar a code. <kdb>.....</kdb>: Texto que el usuario debe escribir. <var>.....</var>:Nombre de una variable que deba ser reemplazada por su valor real. Generalmente en cursiva o subrayada. <dfn>.....</dfn>:Se usa para resaltar una palabra que se va a definir. <cite>.....</cite>: Se usa para citas cortas.

Estilos fsicos: Modifican la presentacin real del texto. <b>.....</b>: Pone el texto en negrita. <i>.....</i>: Pone el texto en cursiva. <tt>.....</tt>: Pone el texto en fuente monoespaciada. <u>.....</u>: Subraya el texto afectado.

-29-

Diseo de Pginas Web Ejemplo 2. Formateo de Texto Realiza el siguiente ejemplo: <HTML> <HEAD> <TITLE>Formateo de Texto</TITLE> </HEAD> <BODY> <p align="center">Estilos de caracter<br><br> Estilos Lgicos</p> <p align="justify"> Un ejemplo de texto de <EM>EM</EM>.<br> Un ejemplo de texto de <STRONG>STRONG</STRONG>.<br> Un ejemplo de texto de <CODE>CODE</CODE>.<br> Un ejemplo de texto de <SAMP>SAMP</SAMP>.<br> Un ejemplo de texto de <KDB>KDB</KDB>.<br> Un ejemplo de texto de <VAR>VAR</VAR>.<br> Un ejemplo de texto de <DFN>DFN</DFN>.<br> Un ejemplo de texto de <CITE>CITE</CITE>.<br> </p> <p align=center>Estilos Fsicos</p> <p align=justify> Un ejemplo de texto de <B>B</B>.<br> Un ejemplo de texto de <I>I</I>.<br> Un ejemplo de texto de <U>U</U>.<br> Un ejemplo de texto de <TT>TT</TT>.<br> </p> </BODY> </HTML>
Algunos de los estilos lgicos son muy similares y otros aparentemente no hacen nada, sin embargo recuerda que la forma en que se visualicen las cosas dependen del Navegador en que te encuentres y no de ti. Para que veas los resultados modifica el Ejemplo 2. utilizando la etiqueta Font con sus respectivos atributos.

Encabezados
Existen una serie de encabezados que suelen utilizarse para establecer ttulos dentro de una pgina. La diferencia entre los distintos tipos de encabezado es el tamao de la letra, el tipo de resaltado, y la separacin existente entre el

-30-

Diseo de Pginas Web texto y los elementos que tiene encima y debajo de l. Hay que tener en cuanta que el navegador del usuario es el que aplicar el estilo del encabezado por lo que el mismo ttulo se puede visualizar de forma diferente segn el navegador. Existen seis etiquetas que representan seis tipos de cabeceras distintas. Todas estas etiquetas precisan una etiqueta de cierre. Son un total de (6) los encabezados de HTML, los cuales denotaremos por: <h1>, <h2>, <h3>, <h4>, <h5>, <h6>. Entre Mayor sea el nmero que acompae a la letra H menor ser el tamao de la letra, denotando sta que es un SubEncabezado. As mismo al utilizar estos encabezados nos encontramos con la dificultad, de que si deseamos incluir un encabezado nmero siete, no lo podremos hacer, para tal efecto es recomendable utilizar el tamao de Fuente, sus etiquetas de cierre seran: </h1>, </h2>, </h3>, </h4>, </h5>, </h6>. Realiza prcticas de Encabezado en el Bloc de Notas para que veas los resultados

Marquesinas
Las marquesinas son una fraccin de texto que se desplaza a lo largo de la pantalla. No es conveniente abusar de su uso, ya que pueden resultar algo "pesadas". Veamos como definirlas: <MARQUEE> texto en movimiento </MARQUEE> Las marquesinas poseen una serie de parmetros que nos permiten modificar la marquesina predeterminada. Slo necesitamos incluir dichos parmetros dentro de la etiqueta < MARQUEE ...> : WIDTH= Nos permite determinar el ancho de pantalla que ocupar. Podemos expresarlo en puntos o en %. Ej: < MARQUEE WIDTH=50%>

HEIGHT= Igual que el caso anterior, pero refirindose a la altura de la marquesina. ALIGN= Al igual que una imagen o una tabla, las marquesinas se pueden alinear mediante: TOP, MIDDLE , BOTTOM, pero no con LEFT, RIGHT. Nos permite cambiar el color de fondo de la

BGCOLOR=#xxyyzz: marquesina.

DIRECTION= Direccin hacia la cual se mueve la marquesina. Puede ser LEFT (por defecto ) o RIGHT.

-31-

Diseo de Pginas Web BEHAVIOR=ALTERNATE: Si introducimos este parmetro, la marquesina "rebotar" de un lado a otro de la pantalla. SROLLAMOUNT = X : Nos permite determinar la cantidad de puntos que se desplazar el texto en cada "salto". Cuanto ms pequea sea la cantidad, mayor ser la sensacin de "scroll". SCROLLDELAY = X : Indica el tiempo que transcurrir entre cada salto del texto, expresado en milisegundos LOOP= Indica el nmero de veces que se repetir la accin de la marquesina, que por defecto ser infinito.

HSPACE= Permite definir la separacin horizontal del texto que est fuera de la marquesina, con respecto a ella. VSPACE= Igual que hspace, pero en referencia a la separacin vertical. El tamao, color, y tipo de fuente de la marquesina los determinaremos mediante las etiquetas tradicionales, como si fuese una parte del texto "comn" del documento.

Listas
El lenguaje HTML proporciona un modo sencillo de representar elementos en forma de lista. Dentro de una lista de puede incluir cualquiera de los elementos HTML, e igualmente una lista puede incluirse dentro de formularios, tablas, etc. Existen cinco tipos de listas, pero mencionaremos solamente tres, puesto que dos de ellas se encuentran actualmente en desuso, las tres listas que estudiaremos sern : las listas no ordenadas, las listas ordenadas y las listas de definiciones, sin embargo es necesario conocer, al menos para efectos didcticos: las listas de directorios y listas de Men.

a) Listas Ordenadas o Numeradas Estas listas sern similares a las Listas Numeradas usadas en Word o cualquier paquete del MSOffice, se usa un nmero para indicar el orden de cada elemento de la lista. El ser ordenada no significa que ordene los elementos

-32-

Diseo de Pginas Web alfabticamente sino que los elementos guardan un orden que es el nmero que indexa la lista. <OL START = n TYPE = A a I i 0 > <LH> Titulo de la lista </LH> <LI> Elemento 1 <LI> Elemento 2 ... <LI> Elemento n </OL> El punto de comienzo (por defecto), siempre ser el 1 si no se indica en START con otro valor de comienzo y el tipo de numeracin puede seleccionar con el atributo TYPE, los valores de ste ltimo son: A : Letras maysculas. a : Letras minsculas. I : Nmero romanos en maysculas. i : Nmero romanos en minsculas. 0 : Nmeros (es por defecto por tanto no hay que indicarlo). b) Listas Desordenadas o Vietas Este tipo de lista se usan para enumerar elementos que no tengan un orden definido. Se especificar con el elemento <UL>, todo lo que se incluya dentro de esta etiqueta y la de cierre formar la lista. Con los elementos <LI> se indicarn cada uno de los componentes de la lista. El formato es el siguiente: <UL TYPE = DISK CIRCLE SQUARE > <LH> Titulo de la lista </LH> <LI> Elemento 1 <LI> Elemento 2 ... <LI> Elemento n </UL>

y se vera as: Titulo de la lista

-33-

Diseo de Pginas Web Elemento 1 Elemento 2 ... Elemento N Podemos cambiar el tipo de vieta que deseemos con el atributo TYPE cuyos valores sern disk (por defecto), circle square. c) Listas de Definicin En esta lista existirn dos elementos: la definicin y el trmino, se usar principalmente para listas en las que se incluirn una palabra o frase y su definicin (diccionario). El termino aparecer pegado en el borde izquierdo y la Definicin aparecer ligeramente tabulada a partir del borde izquierdo. Se puede usar de forma separada la definicin y el termino, pudiendo por tanto incluir solo definiciones o solo trminos. El incluir solo trminos podra usarse para sangrar el comienzo de un prrafo. <DL> <LH>Titulo de la lista </LH> <DT>Termino 1 <DD>Definicin 1 <DT>Termino 2 <DD>Definicin 2 ... <DD>Termino N <DT>Definicin N </DL> Se visualizara as: Ttulo de la lista Termino 1 Definicin 1 Termino 2 Definicin 2 ... Termino N Definicin N

-34-

Diseo de Pginas Web

1.5. Hipervnculos y Anclas

Los enlaces son sin duda alguna imprescindibles para dar a una serie de pginas sueltas la sensacin de "conjunto", de Website. En este captulo conoceremos los diferentes tipos de enlaces que existen: de tipo ancla, a otra pgina y al e-mail. Sin embargo es necesario diferenciar el Ancla, Punto de Anclaje y el Hipervnculo tambin conocido como Link, enlace, hiperenlace y otros nombres que nosotros mismos le damos. Primero: Segundo: Tercero: El Ancla es un enlace a una pgina web dentro de mi sitio. El Punto de Anclaje es el punto as que se dirigir el Enlace al Ancla. El Hiperenlace es el enlace o lnk, o como lo quieras llamar, hacia una pagina dentro de nuestro sitio, a un correo electrnico o a otro sitio en Internet.

La Etiqueta para nombrar un Ancla (punto de Anclaje) , Enlace o Enlace a Ancla es la misma <a ...> es lo que sigue posterior a esta letra la que determina lo que se va a realizar. El a name define un Punto de Anclaje. <a name=ancla1>texto</a> El a href. indica enlace, pero no es todo ya que el valor que se le de va a determinar si es un enlace a correo electrnico, pagina, sitio o un enlace a ancla: <a href=malito:correo@correo.com> texto enlazado</a> <a href=pagina.htm>texto enlazado</a> <a href=pagina.htm#ancla1>texto enlazado</a> Anclas: # top : va a la parte superior de la pgina. # bottom: va a la parte inferior de la pgina. #name: Define un Ancla para llamarla posteriormente. # ancla: se dirige al ancla, previamente establecida.

1.6. Insercin de Imgenes.

La Etiqueta para insertar una imagen es: <img src=directorio/imagen.jpg>

-35-

Diseo de Pginas Web Las imgenes a llamar deben estar de previo dentro de nuestro directorio, para este curso definiremos el nombre de la carpeta que contendr nuestras imgenes con el nombre de images de manera que el directorio ser reemplazado por images, la imagen.jpg no tiene que ser necesariamente de extensin jpg, puede ser gif, png bmp pero todo estar en dependencia de nuestro gusto particular y sobre todo del peso de la imagen en el ordenador, recordemos que estas imgenes sern publicadas en Internet y las mismas deben ser descargadas por el ordenador del visitante antes de poder ser visualizadas, de manera tal que estas imgenes deben ser lo mas livianas posibles sin que pierdan calidad grfica. Esta etiqueta no tiene cierre. Sus atributos son: border, width, height, align. Border: Width: Height: Align: Define el grosor de la imagen y sus valores son cualquier numero natural positivo. Define el ancho de la imagen su valor ser cualquier nmero natural positivo. Define el alto de la imagen, si valor ser cualquier nmero natural positivo. Define la alineacin horizontal de la imagen, sus valores son: left (izquierda), right (derecha), center (centro), absmiddle (al centro absoluto del texto.

1.7. Tablas
Dentro de lo que podramos llamar la Evolucin del HTML, se encuentran las Tablas, estas dieron una nueva perspectiva a la creacin de sitios, puesto que la ubicacin de textos, imgenes y/o animaciones se colocan en posiciones que de otra forma no cabran, es decir, podemos ahora con las Tablas disear un sitio que contenga 3 columnas, la del centro destinada a los contenidos y las columnas de los costados podran perfectamente mostrar mens o bien propaganda publicitaria. Ahora conozcamos su sintaxis y veamos algunos ejemplos, pero primero conozcamos cada una de las etiquetas y sus respectivos atributos: <table> Indica el inicio de una Tabla, pero no va sola, la acompaan los atributos:

Atributos de las Tablas (alto, ancho, bordes)

Align: Como hemos visto anteriormente, es el atributo que define la alineacin horizontal, y sus valores sern left center right. Border: Con este atributo definimos el grosor del borde, sus valores sern cualquier nmero entero positivo. Si no deseamos ningn borde, su valor ser 0 (cero). Este Borde se aplica a los bordes externos de la Tabla.

-36-

Diseo de Pginas Web Cellspacing: Este atributo define el espacio que habr entre celdas, su valor sern un nmero entero positivo no decimal. Cellpadding: Define el espacio que habr entre cada uno de los bordes y los bordes del texto. Sus valores son nmeros enteros positivos no decimales. width: El atributo width define el ancho que tendr nuestra tabla en la pantalla, su valor estar representado en nmeros enteros (para un ancho fijo), o bien en porcentaje (para un ancho proporcional a la pantalla). height: El atributo height define el alto que tendr nuestra tabla en la pantalla, su valor estar representado en nmeros enteros (para un ancho fijo), su uso es opcional, puesto que al momento de disear nuestra tabla no sabemos a ciencia cierta el alto que esta tendr, por lo que podemos omitir este atributo.

Filas y Columnas
Para que una Tabla sea Tabla, debe almenos tener una Fila y una Columna, los encabezados son opcionales. <th>...</th> Ser un encabezado de Columna, ocupar el espacio de una columna, es decir, en lugar de indicar inicio de columna, introduciremos esta etiqueta. El texto se mostrar en negrita por defecto. <tr>...</tr> Esta etiqueta define el inicio de una Columna. <td>...</td> Esta etiqueta define el inicio de una Fila, sus atributos son: Bgcolor: Para color de fondo de la celda. Background: Para incluir una imagen de fondo en la celda.
Los formatos aplicados son individuales para cada Celda (no fila o columna).

-37-

Diseo de Pginas Web Sintaxis <table border=0 cellspacing=0 cellpadding=2 align=center width=300> <tr> <td> texto </td> </tr> </table>

Una Tabla, debe tener al menos una fila y una columna, las filas las denotaremos por las letras TR y cerraremos la fila </TR>, las columnas con las letras <TD> y cerraremos la columna con </TD>. Dentro de una fila podemos incluir la cantidad de columnas que queramos, pero recordemos que nuestra pgina se ver en todo el mundo, por lo tanto siempre cuidemos la Esttica. El color de cada celda es individual, por lo que si queremos que todas tengan el mismo color de fondo (<bgcolor>) y el mismo color, tamao y tipo de letra, debemos dar el <font> en cada una de las celdas que creemos.

Compartir Filas y Columnas

De la misma manera que podemos compartir filas y columnas en los editores como Microsoft Word Excell, podemos compartir filas o columnas en HTML. Las instrucciones que realizan esta funcin son: Colspan: Rowspan: Para compartir Columnas. Para compartir Filas

Estas instrucciones se agregarn como atributos de la etiqueta <TD> y sus valores sern la cantidad de filas o columnas que se deseen compartir, segn sea el caso.

-38-

Diseo de Pginas Web Ejemplo: <table width="300 border="1" cellspacing="0" cellpadding="2"> <tr> <td rowspan="2">Compartiendo 2 Filas</td> <td>Fila 1.2</td> </tr> <tr> <td>Fila 2.2</td> </tr> </table> Se visualizara as: Fila 2.1 Compartiendo 2 Filas Fila 2.2 En el ejemplo anterior compartimos 2 filas, el Explorador nos presentar por defecto el texto de las celdas compartidas centrado verticalmente. Ejemplo. <table width="300" border="1" cellspacing="0" cellpadding="2"> <tr> <td colspan="2">Compartiendo 2 columnas</td> </tr> <tr> <td>fila 2.1</td> <td>fila 2.2</td> </tr> </table> Se visualizara as: Compartiendo 2 Columnas Fila 2.1 Fila 2.2 En el ejemplo anterior compartimos 2 columnas, el Explorador nos presentar por defecto el texto de las celdas compartidas alineado a la izquierda.

-39-

Diseo de Pginas Web

Tablas Anidadas
Se llama Tabla Anidada a una Tabla dentro de otra Tabla, primeramente debemos agregar la etiqueta <TBODY> inmediatamente despus de <TABLE>, como se muestra a continuacin: <table border=0 cellspacing=1 cellpadding=0 align=center bgcolor=f0f0f0> <tbody> <tr> <td>aca puedes colocar texto o imagen, pero no se cierra el TD <table border=0 cellspacing=1 cellpadding=0 align=center bgcolor=d0d0d0> <tbody> <tr> <td> esta es otra tabla </td> </tr> </table> </td> </tr> </table>

Se visualizar as: aca puedes colocar texto o imagen, pero no se cierra el TD esta es otra tabla

Recuerda que las instrucciones van siempre dentro de TD, con las Tablas anidadas puedes, sin dificultad, dividir el documento en Columnas.

1.8. Marcos
Con las frames es posible dividir la ventana del navegador en varias subregiones (frames), permitiendo mostrar una URL distinta en cada una de ellas. En cada frame se nos permite: Mostar su propia URL, diferenciada del resto de las frames de la pantalla, de esta forma un hiperenlace puede tener como destino un documento y la frame en el que se mostrar. Tendrn asociado un nombre, que las distinguirn del resto de las frames de la pantalla y permitir usarlo en los hiperenlaces.

-40-

Diseo de Pginas Web En el caso que se cambie el tamao de la ventana, se podr determinar si la frame se ajusta a este tamao o mantiene su tamao intacto. Esto permite crear nuevos tipos de documentos, en los que, por ejemplo, se mantendr una regin esttica (lista de enlaces, barra de botones, formulario) y otra zona dinmica en la que se mostrar el resultado. De esta forma una de las principales utilidades de las frames es la creacin de pginas con un ndice (por ejemplo un manual) o una cabecera esttica, consiguiendo as una mejora en la navegacin al poder acceder al ndice de una manera ms rpida y efectiva. El uso de las frames es til para cierto tipo de documentos, pero puede llegar a dificultar la navegacin, sobre todo cuando se est iniciando en el mundo de la creacin de sitios web, dentro de un documento con frames no tendrn utilidad los botones de documento previo (back) ni documento siguiente (forward), ya que ambos nos trasladarn fuera del documento con frames, adems estaran de ms, ya que con seleccionar el destino en el Menu, basta para ver el contenido. No todos los navegadores pueden mostrar documentos con frames, solo son interpretables por el Netscape 2+ superior y el Internet Explorer 3+. Por tanto, en este caso, si se quiere que el documento sea accesible por gran cantidad de usuarios se debe crear un documento con frames y otro sin ellas, usando la etiqueta NOFRAMES, dentro de la cual se incorporarn nuevamente los cdigos, pero esta vez como Tabla. Un documento con frames se define de manera diferente a un documento normal, siendo la estructura del documento distinta, en este caso la etiqueta BODY, se desplaza hacia abajo. Su estructura es la siguiente: <HTML> <HEAD> Definiciones de la cabecera (title, metas) </HEAD> <FRAMESET> Definicin de las frames que forman el documento y de los fichero que incluye cada una. <NOFRAMES> <BODY> Instrucciones HTML que se mostrar en los navegadores que no soporten frames. </BODY> </NOFRAMES> </FRAMESET> </HTML>

-41-

Diseo de Pginas Web Dentro de la etiqueta NOFRAMES se podr incluir una explicacin de que el documento solo es visible con el navegadores que soporten frames, o bien incluir una versin del documento que se muestre sin necesidad de frames. Con esta instruccin definiremos las frames que formarn el documento, su sintaxis es similar a la de las tablas, permitiendo definir muy distintos tipos de frames. Su formato es el siguiente: <FRAMESET ROWS=Lista de las Filas COLS=Lista de las Columnas> <FRAME SRC=URL_1 NAME="Nombre de la frame1"> <FRAME SRC=URL_2 NAME="Nombre de la frame1"> ... <FRAME SRC=URL_N NAME="Nombre de la frameN"> </FRAMESET> Se definir solo uno de los atributos, o la lista de filas (ROWS) o la lista de columnas (COLS). ROWS: Se definir separado por comas el tamao de cada una de las frames. De esta forma se dividir la pantalla de forma horizontal, segn la dimensin definida para cada una de las filas horizontales. El tamao de la frame, puede expresarse de las siguientes formas: En valor absoluto, que indicar el tamao en puntos de la pantalla. En este caso si todas las frames se indican de este modo, los valores se ajustarn para que las frames ocupen la totalidad del espacio de la ventana del navegador, guardando siempre la proporcin con la que se definen las frames, con sus valores fijos, es decir, si la pagina est diseada para visualizarse en una resolucin 800 * 600, y el visitante tiene 1024 * 768, por ejemplo, ste ltimo no visualizar correctamente nuestra pgina. En tanto por ciento sobre el tamao de la ventana, en este caso si los porcentajes suman un valor distinto del 100%, se ajustarn para que coincidan con el tamao de la ventana, en independencia de la resolucin de pantalla del visitante. Se podr combinar con el apartado anterior de forma que algunas frames se definan en valor absoluto y otras en porcentaje.

-42-

Diseo de Pginas Web De forma relativa con el smbolo (*) que indica el tamao restante de la ventana. Si se indica una frame como 2* y otra como *, la primera ocupar dos tercios del espacio restante y la segunda un tercio del espacio restante. Se puede combinar con las definiciones anteriores.
Ejemplo Inst. HTML <FRAMESET ROWS="100, 50%, *"> <FRAME SRC="frame1.htm" <FRAME SRC="frame2.htm" <FRAME SRC="frame3.htm" </FRAMESET> Muestra

NAME="frame1"> NAME="frame2"> NAME="frame3">

Se definen tres frames horizontales, la primera (roja) ocupar 100 puntos de la pantalla, la segunda (azul) el 50% del tamao de la ventana del navegador y la tercera (verde) el espacio restante, si se vara el tamao de la ventana del navegador, cambiar el tamao de las dos ltimas.

COLS: Toma los mismos posibles valores que ROWS, pero en este caso para las columnas, se definirn las frames de forma vertical.
Ejemplo Inst. HTML Muestra

<FRAMESET COLS="100, 50%, *"> <FRAME SRC="frame1.htm" <FRAME SRC="frame2.htm" <FRAME SRC="frame3.htm" </FRAMESET>

NAME="frame1"> NAME="frame2"> NAME="frame3">

En este caso se definen las frames de forma vertical, guardando la misma proporcin que en el caso anterior.

-43-

Diseo de Pginas Web Una vez definida el nmero de frames por fila o por columna se definir el contenido de cada una de estas con la etiqueta FRAME, pero igualmente se podra definir frames dentro de frames, de forma que cada una de las definidas anteriormente podra estar divida en varias frames, esto se har incluyendo dentro de la instruccin FRAMESET, nuevas instrucciones FRAMESET que dividirn esta en las frames indicadas, como se muestra a continuacin:
Ejemplo Inst. HTML Muestra

<FRAMESET ROWS="100, 50%, *"> <FRAME SRC="frame1.htm" NAME="frame1"> <FRAMESET COLS="75%,*"> <FRAME SRC="frame2.htm" NAME="frame2"> <FRAME SRC="frame3.htm" NAME="frame3"> </FRAMESET> <FRAMESET COLS="50%, 30%, 20%"> <FRAME SRC="frame4.htm" NAME="frame4"> <FRAME SRC="frame5.htm" NAME="frame5"> <FRAME SRC="frame6.htm" NAME="frame6"> </FRAMESET> </FRAMESET>

Tomando como base las frames que se definieron en un ejemplo anterior, hemos dividido dos de las frames en nuevas frames, formando en este caso un documento con 6 frames, en cada una se muestra un fichero distinto y tienen un nombre distinto. Dentro de las frames definidas se podran definir nuevas frames, pudiendo dividir la ventana, tantas veces como se desee.

Como se ha visto en el apartado anterior con la etiqueta FRAME definiremos el documento que se mostrar en la frame y su nombre. Esta etiqueta presenta adems algunos otros atributos: <FRAME SRC="URL" NAME="Nombre de la frame" MARGINWIDTH="ancho del margen" MARGINHEIGHT="alto del margen" SCROLLING=YES/NO/AUTO NORESIZE> URL: Como su nombre indica, especifica el documento HTML o fichero que se mostrar en la frame definida. Si no se especifica documento alguno se mostrar la frame vaca.

-44-

Diseo de Pginas Web NAME: Indica el nombre de la frame, este nombre es importante ya que se usar en los hiperenlaces (normalmente en los documentos de las otras frames) para indicar la frame de destino del documento. Si no se indica el nombre solo se podr mostrar el documento actual, sin que sea posible cambiarlo mediante hiperenlaces. MARGINWIDTH: Indica el ancho del margen, este atributo es opcional y normalmente el navegador ajusta todos los mrgenes al mismo tamao, si se especifica se valor ser en puntos de la pantalla. MARGINHEIGHT: Igual que en el caso anterior pero para el alto de los mrgenes. Lo normal es no especificar ninguno de estos dos atributos. SCROLLING: Indica si la frame tendr o no una barra de scroll, la barra de scroll se muestra en el lateral y permite desplazarse por el documento, pulsando con el ratn en ella. Si toma el valor YES, siempre se mostrar esta barra, para el valor AUTO solo se mostrar si el documento no cabe en la frame (est en dependencia de la resolucin de pantalla del internauta), si es necesaria. Y por ltimo NO indica que en ningn caso se muestre la barra de scroll. Si no se indica nada se toma por defecto el valor AUTO. NORESIZE: Indica que la frame no debe ser variada de tamao por el usuario, se puede variar el tamao de una frame situando el cursor del ratn encima y arrastrando en la direccin deseada (con el editor que utilicemos, o bien con el atributo correspondiente). Con este atributo el usuario no podr cambiar el tamao de la frame en ningn caso. Por defecto todas las frames pueden variar su tamao.

-45-

Diseo de Pginas Web

1.9. Formularios
Esta es la parte ms tcnica y compleja del HTML. Los formularios o forms en ingls, son unas pginas especiales que se utilizan para realizar transacciones. En una pgina que contenga un formulario pueden adems existir todos los elementos hasta ahora conocidos, incluso el propio formulario puede estar integrado dentro de otros elementos, como por ejemplo una tabla. Los formularios, en algunas impresoras, pueden dar problemas al imprimir las pginas que los contienen. Su sintaxis es: < FORM ACTION="fichero que trata el formulario" METHOD= POST | GET > ... Elementos que forman el formulario ... < /FORM> Dentro de la etiqueta de formulario se definirn los distintos elementos de peticin de datos. Estas instrucciones que se explicarn a continuacin definirn los tipos de botones, cajas de dialogo y ventanas para la introduccin de datos. Y definirn las variables que almacenarn los datos introducidos por el usuario. Estas etiquetas se incluirn entre la de definicin (inicio) del formulario y la etiqueta de final de formulario. Los atributos que presenta la etiqueta FORM son los siguientes: ACTION: Indica el programa que se encargar de tratar los datos del formulario. Este programa debe encontrarse en el servidor y estar escrito en algn lenguaje de programacin. A este programa se pasar como parmetros los datos introducidos en el formulario y retornar un cdigo HTML que se mostrar tras procesar el formulario. A este tipo de programas se les llama cgi-bin. METHOD: Indica el protocolo usado para el envo de los datos. Con POST enva los datos en la entrada estndar del programa que trata el formulario y con GET los datos se pasan por parmetro, en la lnea de comandos, al programa. El usar uno o otro mtodo vendr determinado por como son tratados los parmetros en el formulario en el (CGI-BIN). El mtodo de uso ms normal ser POST.

-46-

Diseo de Pginas Web Ahora bien, los Formularios como dijimos anteriormente se utilizan para el envo de datos, hay un problema, el CGI, si queremos garantizar el envo de la informacin sin usar los CGI (lgicamente no conveniente para comercio electrnico), deberemos agregar a la sintaxis general el atributo ENCTYPE y sus valores sern TEXT/PLAIN, quedando de la siguiente manera: <FORM METHOD="POST" ACTION="mailto:mi-usuario@miservidor-e-mail" ENCTYPE="TEXT/PLAIN"> ...... </FORM> Una vez definidas las caractersticas globales del formulario incluiremos los distintos botones y cajas de dialogo que lo constituyen. Dentro de la instruccin del formulario podrn incluirse cualquier texto o instruccin HTML, siendo recomendado a fin de poder etiquetar las opciones de entrada y especificar cualquier dato importante relacionado con el formulario. Igualmente un formulario puede ser incluido en algunas instrucciones HTML como las listas, tablas, etc ... A los programas que hacen de puente entre el formulario y el servidor, se les llama programas CGI (Common Gateway Interface [Interface de Entrada Comn, por sus siglas en ingls]) y no hay que confundirlos con las pginas dinmicas escritas en ASP o PHP, aunque se parecen mucho. Los programas CGI pueden estar escritos en cualquier lenguaje de programacin que sea soportado por el sistema operativo del servidor, y pueden estar diseados para cualquier funcin: desde una simple captura de datos que sern guardados en un fichero, hasta la ms sofisticada consulta a una base de datos. El formulario no es ms que una pgina escrita en HTML como cualquier otra. Lo que la hace diferente es que permite capturar datos de varias maneras: directamente desde el teclado, escogiendo un valor de una lista desplegable o seleccionando una opcin desde botones fijos o de todas ellas combinadas. Una vez terminada la captura de datos, estos forman un registro que es enviado a un servidor http (web) que lo procesar y devolver una respuesta. Pueden utilizarse tambin para enviar su contenido a una direccin de correo electrnico, o que simplemente abran otra pgina.

-47-

Diseo de Pginas Web Si el formulario se disea para abrir una pgina o para ser enviado por e-mail, todo se reduce a escribir HTML, pero la cosa se complica cuando se trata de transacciones de datos que hay que guardar en un servidor (comercio electrnico). En este caso, en el servidor tiene que haber un programa especial, creado especficamente para ese formulario, que reciba los datos y sepa qu hacer con ellos, procesarlos y confeccionar la respuesta que remitir al navegador. A esa respuesta se le denomina documento virtual ya que esa pgina no est escrita en ninguna parte; es generada, enviada y destruida. La base del formulario es el elemento lleno <FORM>, es el que define una zona de la pgina como formulario. En una pgina puede haber varias zonas definidas como formulario. Dentro de este elemento a su vez se utilizan otros elementos, que son los que realmente dibujan en pantalla los componentes del formulario, siendo estos los siguientes: <INPUT> Campos de entrada por teclado. Botones de seleccin. Casillas de marca. Botones de proceso. Botones de inicializacin (reset). Imgenes sensibles al ratn. <SELECT> Listas desplegables de valores. Listas fijas de valores. <TEXTAREA> Ventanas de escritura libre. Es decir, los Formularios los podemos agrupar en 3 tipos de datos, siendo estos: 1. Campos de reas de Texto 2. Campos de Entrada. 3. Campos de Seleccin.

Campos de Areas de Texto

Las reas de texto permiten a los usuarios insertar varias lneas de texto. Por ello, suelen utilizarse para que incluyan comentarios. Para insertar un rea de texto es necesario incluir las etiquetas <textarea> y </textarea> entre las etiquetas <form> y </form> del formulario. Para que el rea de texto tenga algn valor inicial, habr que insertarlo entre las etiquetas <textarea> y </textarea>.

-48-

Diseo de Pginas Web El atributo name indica el nombre del rea de texto. Es necesario dar nombres diferentes a cada uno de los elementos de un formulario, para poder identificarlos a la hora de procesarlos. El atributo rows indica el nmero de lneas que podrn ser visualizadas en el rea de texto por lo que determina al alto del rea de texto. El atributo cols indica el nmero de caracteres por lnea que podrn ser visualizados en el rea de texto por lo que determina al ancho del rea de texto. Gracias a las barras de desplazamiento, es posible insertar ms lneas de las especificadas en el atributo rows, y ms caracteres por lnea de los especificados en el atributo cols. <textarea name="ejemploarea" cols="30" rows="3" align=center>Escribe el texto que quieras</textarea>
Escribe el texto que quieras

Campos de Entrada de Datos

a) Texto Se utiliza para la entrada de cadenas de texto corto, como por ejemplo nombre de personas, nmeros, fechas o diversos datos que se puedan expresar en una lnea de texto. Se mostrar un recuadro que ocupa una lnea y la que ser posible especificar este texto. El formato de la instruccin es el siguiente: < INPUT TYPE=TEXT NAME="variable" VALUE="valor inicial" SIZE="tamao" MAXLENGTH="longitud mxima" > El tamao de la ventana de introduccin de texto se fija con el atributo SIZE, que indica el tamao de la ventana en caracteres. Aqu solo se define la parte visible, pero el usuario podr introducir ms texto si lo desea.

-49-

Diseo de Pginas Web Para indicar el mximo nmero de caracteres que se permiten en la entrada usaremos: MAXLENGTH. El atributo NAME indica el nombre de la variable que toma el valor de la entrada y VALUE especifica el valor de inicializacin del campo. De todos los atributos solo ser obligatorio NAME, siendo el resto opcionales. En la entrada se podrn usar cualquier tipo de caracteres incluso los acentuados, en su formato normal. b) Contrasea Es similar al anterior pero en este caso no se imprimen los caracteres segn se van introduciendo, se muestra un asterisco en vez de los caracteres. Solo se puede ver el nmero de caracteres, pero no valor. Se usa para la introduccin de claves de acceso (passwords) y datos que no deban ser vistos al introducirlos. Su sintaxis es: < INPUT TYPE=PASSWORD NAME="variable" VALUE="valor inicial" SIZE="tamao" MAXLENGTH="longitud mxima" > c) Casilla de Verificacin Como dijimos anteriormente el atributo checkbox es un botn que puede presentar dos estados activado o desactivado. Su sintaxis es: < INPUT TYPE=CHECKBOX NAME="variable" CHECKED> Se requiere el atributo NAME. Los valores que tomar la variable sern on off, dependiendo de su estado. Si el botn estaba activado cuando se envan los datos del formulario se enviaran el nombre de la variable y el valor que indique su estado. Si se incluye el atributo CHECKED el botn se encontrar activado (on) en la inicializacin. Si se indica el atributo VALUE, cuando se envan los datos con el botn activado se mandar la variable con el valor indicado y en caso contrario no se mandar ningn valor. d) Botn de Opcin Se usa cuando la opcin puede tomar un valor simple de una serie de alternativas. En este caso se presentan unos valores opcionales de los que solo puede tomar un valor. Para especificar cada uno de estos valores se incluir una etiqueta RADIO por cada una de las posibles alternativas, su estructura general ser: < INPUT TYPE=RADIO NAME="variable" VALUE="valor 1" CHECKED > < INPUT TYPE=RADIO NAME="variable" VALUE="valor 2" > ... < INPUT TYPE=RADIO NAME="variable" VALUE="valor n" >

-50-

Diseo de Pginas Web Cada una de las etiquetas RADIO tendr el mismos atributo NAME, y con un distinto atributo VALUE que ser el valor que tome si se selecciona esta opcin. Para inicializarlo se usa el atributo CHECKED que se indicar solo en la opcin que se quiera especificar por defecto. e) Envo Este botn se usa para enviar los datos del formulario, al pulsar el usuario este botn, se acaba la introduccin del formulario y pasa el control al programa indicado en ACTION. En todo formulario debe existir al menos un botn de SUBMIT, si solo incluye un recuadro del tipo TEXT no ser necesario incluirlo. El formato es: < INPUT TYPE=SUBMIT VALUE="mensaje a mostrar" > En este caso en particular el atributo VALUE especifica una etiqueta no editable que se mostrar en el botn de envo. Lo normal es que este botn no enve datos, pero si se indica el atributo NAME con un nombre de variable ser enviada la variable con el valor de VALUE. Esto puede ser til si se incluyen distintos botones de SUBMIT para distinguir cual fue pulsado. f) Envo con Imagen Su funcionalidad es similar al botn de SUBMIT, se usa igualmente para enviar los datos de un formulario, pero en este caso se presenta una imagen como botn. Igualmente al pulsar sobre el botn se enviar el formulario. La sintaxis es la siguiente: < INPUT TYPE=IMAGE NAME="variable" SRC="URL de la Imagen" > El punto de la imagen en el que pulsa el usuario tambin es pasado al programa interprete del formulario, de forma que la imagen igualmente podra ser un mapa sensible. Se pasarn dos parmetros x e y con las coordenadas del punto donde pulso, siendo el programa interprete el encargado de determinar la zona donde se puls, si se desea. g) Restaurar o borrar datos del formulario Este botn se usa para volver a los valores por defecto todos los elementos del formulario, borrando todos los datos introducidos por el usuario. Su formato es el siguiente: < INPUT TYPE=RESET VALUE="Etiqueta a mostrar" > El atributo VALUE especifica la etiqueta que tendr el botn.

-51-

Diseo de Pginas Web h) Campos Ocultos En este caso no se muestra ningn campo para la entrada de datos al usuario, pero el par variable valor especificado es enviado junto con el formulario. Se suele usar para transmitir informacin de estado control para enviar algn tipo de informacin que no debe ser variada en el formulario, pero s debe ser enviada junto a este. El formato es: <INPUT TYPE=HIDDEN NAME="variable" VALUE="valor" > Como estudiamos al inicio, todo atributo tiene un valor y los atributos del Formulario no son la excepcin, sin embargo el valor del atributo est determinado por el atributo en s y, la secuencia del subsiguiente atributo est determinado por el atributo anterior, se deber incluir tanto la variable como el valor. Veamos lo dicho en la prctica con el siguiente cuadro: CASO TYPE
1 2 3 4 5 6 hidden

NAME
env_report recipient redirect subject required missing_fields_redirect

VALUE
REMOTE_ADDR,HTTP_USER_AGENT,REMOTE_HOST, correo@servidor.com url destino inicial Texto Campos obligatorios url error

Caso: 1. En el caso de env_report, dejar el Valor (value) ntegro, pues est en concordancia con el action del form, lo que se le est diciendo al navegador es que los datos que el usuario digit se procesen en esa secuencia, que sera la url que escribimos en el Action. 2. Recipient indica la direccin de correo a la que sern enviados los datos, en el value escribiremos dicha direccin. 3. redirect le indica al navegador, la direccin a la cual se dirigir posterior al envo de los datos, la cual ser nuestro index.html, Cuidado! Hay que escribir la direccin completa. 4. subject es el asunto que tendr el correo que recibamos, es decir, si nuestro formulario es para solicitud de mantenimiento, escribiremos en el value un texto que haga referencia al formulario. 5. required tendr como value (valor), todos los campos que hayamos puestos o designado como Campos Obligatorios, haciendo referencia al NAME que le hayamos dado a dichos campos, los nombres deben coincidir, respetar la ortografa!, es decir, si escribimos una palabra con la letra inicial en maysculas, as debe ser reflejado en este campo.

-52-

Diseo de Pginas Web 6. missing_fields_redirect, sucede ocasionalmente que no hay conexin o bien que el servidor al que estn dirigidos los datos (carpeta CGI) no est disponible por cualquier razn, para ello debemos disear una pgina de error, que contenga un mensaje al publico y dando otra manera de contacto. Ese ser el valor de value: la url_pgina_de_error.htm

Campos de Seleccin
Se usa para mens simple o mltiples. Define mens de tipo pop-up (men de barras) y ofrece una alternativa ms compacta al uso de botones RADIO o CHECKBOX. Su sintaxis es la siguiente: <SELECT NAME="variable"> < OPTION SELECTED VALUE=valor1> Opcin Primera < OPTION VALUE=valor2> Opcin Segunda ... < OPTION VALUE=valorn> Opcin Ensima </SELECT> Si se desea que sea un men mltiple se deber incluir el atributo MULTIPLE en la etiqueta de SELECT, en este caso se mostrarn todas las opciones en forma de tabla, en el otro caso se mostrar la opcin activa y un botn para poder modificar esta opcin. En ambos casos solo podr seleccionarse una de las opciones. Cuando se enva el resultado del formulario la variables NAME tomar el valor de la opcin que este activa. La etiqueta OPTION que contenga el atributo SELECTED ser considerada la opcin por defecto, caso de no especificarse ninguna se considerar la primera de las opciones.

-53-

Diseo de Pginas Web Unidad II. Hojas de Estilo Cascada Objetivo: Mejorar la apariencia de la pginas ya diseadas, para que las mismas tengan mejor calidad grfica (combinacin de colores, fuentes, etc), y su actualizacin sea ms rpida, permitiendo optimizar los tiempos de publicacin y ejecucin de los sitios web.

2.1 Introduccin a las Hojas de Estilo Cascada

Las hojas de estilo vienen a intentar volver a separar en un documento el estilo lgico del estilo fsico, dejando este ltimo en bloques de definicin de estilos separados de la estructura del documento. CSS son las siglas de "Cascade StyleSheet". Se trata de una especificacin sobre los estilos fsicos aplicables a un documento HTML, y trata de dar la separacin definitiva de la lgica (estructura) y el fsico (presentacin) del documento. El estilo lgico se refiere a la lgica del documento: cabeceras, prrafos, ... no se preocupa de la apariencia final, sino de la estructura del documento. Por el contrario, el estilo fsico no se preocupa de la estructura del documento, sino por la apariencia final: prrafos con un cierto tipo de letra, tablas con un determinado color de fondo, etc. La finalidad de las hojas de estilo es crear unos estilos fsicos, separados de las etiquetas HTML (en lugar de como parmetros de las etiquetas), y aplicarlos en los bloques de texto en los que se quieran aplicar. Estos estilos podrn ser modificados en algunas ocasiones desde JavaScript, y esto empieza a darnos un poco ms de interactividad.

2.2 Aplicacin
Tenemos varias posibilidades para definir un estilo: especificarlo directamente en la etiqueta en la que queremos usarlo, definirlo aparte y aplicarlo en las etiquetas que queramos, o definir estilos globales para las etiquetas (que podrn ser cambiados en las que no se desee aplicarlos, lo estilos son: a) Aplicacin Directa Para aplicar un estilo a una etiqueta concreta, usaremos la sintaxis: <etiqueta STYLE="propiedad1:valor;...;propiedadN:valor"> ... </etiqueta> Etiqueta es la etiqueta de HTML en la que queremos dar una apariencia concreta (<P>, <B>, <I>, ...). STYLE es el parmetro que indica que vamos a aplicar el estilo definido a continuacin a la etiqueta en la que se encuentra. La definicin del estilo son pares propiedad:valor separados por punto y coma. Propiedad ser la caracterstica de la etiqueta que queramos modificar (el color, el tamao de la fuente, el tipo de letra, ...) y,

-54-

Diseo de Pginas Web Valor es el valor que queremos darle (color negro, 8 puntos de tamao de letra, etc). Ejemplo: El texto que se ver <B STYLE="font-size:14pt;color:blue">es ms grande y est en azul</B>. b) Redefinicin de Etiquetas Suele ocurrir que queremos definir estilos que se apliquen a todas las etiquetas del documento, es decir, queremos que todo el documento tenga un cierto tipo de letra, que las tablas tengan otro, que las cabeceras tengan un color determinado, para ello, definiremos estilos globales por medio de la etiqueta <STYLE> ... </STYLE> como sigue: <STYLE TYPE="text/css"> <!-Etiqueta1, Etiqueta2 : {propiedad1:valor} Etiqueta3 : {propiedad1:valor;...;propiedadS:valor} Etiqueta4 : {propiedad1:valor;...;propiedadT:valor} .Clase1: {propiedad1:valor;...;propiedadQ:valor} //--> </STYLE> Podemos aplicar el mismo estilo a varias etiquetas, escribindolas separadas por comas y, a continuacin, la especificacin del estilo segn pares propiedad:valor separados por punto y coma y encerrados entre llaves {}. En un bloque de estilo global podremos definir cuantos estilos queramos. Aparece un .Clase1; se refiere a las llamadas clases, que nos permitirn que una etiqueta concreta tenga una apariencia distinta a la definida como global. Es recomendable que definamos estos estilos globales dentro de la cabecera del documento (entre <HEAD> ... </HEAD>) para asegurarnos de que se aplicarn a todas las etiquetas para las que se haya definido un estilo.

-55-

Diseo de Pginas Web c) Separacin del HTML de CSS Para grandes sitios (inclusive para pequeos), suele ser tedioso estar copiando y pegando el cdigo de una pagina a otra, por ejemplo imaginemos que tenemos un sitio cuyo total de paginas internas suman 20, a ultima hora el dueo del sitio quiere reemplazar el tipo de letra de una lista, esta lista tiene un tipo de letra especifico, tamao y color aplicado por las sentencias css en el head de las paginas, tenemos que corregir este detalle y copiarlo tanta cantidad de paginas haya en el sitio pues esa rutina css ser repite en todas las paginas, pues bien, para estos casos es mejor separar el HTML del CSS, para ello incrustamos dentro de las Etiquetas <head>...</head> el llamado al archivo, la sintaxis ser: <link rel=stylesheet type=text/css ref=archivo.css> Aparte construiremos un Archivo de extensin .css el cual solamente contendr como encabezado (sin las etiquetas de encabezado del html): <style type=text/css> Instrucciones css </style> aqu un ejemplo para que lo comprendas mejor: En el Block de Notas [pagina.html] <!Esta es la pgina HTML--> <HTML> <HEAD> <TITLE> Ejemplo 1 de herencia </TITLE> <LINK REL="stylesheet" TYPE="text/css" HREF="archivo.css"> </HEAD> <BODY BGCOLOR=white> Todo el texto tiene definido el estilo Fuente:Verdana, Tamao:12 pixeles, <Font style="color:red">pero este trozo de lnea es de un color distinto, conservando el resto de propiedades</font>, y eso hace interesante la herencia y la posibilidad de cambiar en partes concretas los estilos heredados. </BODY> </HTML>

-56-

Diseo de Pginas Web En el Block de Notas [archivo.css] /*Este sera el documento ejemplo.css, deber realizarse aparte. En el block de notas */ /* Definicin de estilos en un archivo aparte */ /* Estilo para el documento */ BODY {font-family:Verdana,sans-serif;font-size:12pt} /* Estilo para la cabecera de nivel 2 */ H2 {font-family:Verdana,sans-serif; font-size:14pt;color:red} /* Estilos para otras etiquetas */ B, TD {font-family:Verdana,sans-serif;font-size:x-small; color:olive} TH {font-family:Verdana,sans-serif;font-size:x-small; color:white;background-color:#0080C0} PRE, TT, CODE {font-family:Courier New,Courier; font-size:9pt;color:maroon}

2.3 Clases
Es normal querer definir unos estilos globales en hojas externas que homogeneicen el aspecto de nuestras pginas, y luego, en una pgina concreta querer variar el estilo en alguna etiqueta concreta. Como ya sabemos, esto podemos hacerlo definiendo el estilo localmente en esa etiqueta Una clase es una definicin de un estilo que en principio no est asociado a alguna etiqueta HTML, pero que podemos asociar, en el documento, a etiquetas concretas. Para ello, en primer lugar definimos la clase (en el bloque de estilos o en la hoja externa) como un estilo ms, de esta forma: .Nombre_de_la_Clase {propiedad1:valor;...;propiedadN:valor} Ahora, para aplicar el estilo de una clase a una etiqueta concreta, utilizaremos el parmetro CLASS como sigue: <etiqueta CLASS="Nombre_de_la_Clase"> ... </etiqueta> donde Nombre_de_la_Clase es el nombre que le hemos dado a la clase, sin el punto, en este punto debemos respetar la escritura, es decir, si escribimos el nombre de la clase en minscula, el llamado a la misma deber hacerse de la misma forma.

-57-

Diseo de Pginas Web Ejemplo: <HTML> <HEAD> <TITLE> Ejemplo de uso de clases </TITLE> <STYLE TYPE="text/css"> <!-BODY {font-family:Verdana,sans-serif;font-size:12pt} P,A,B {color:#ff0000} .contenido { font-family:verdana;font-size: 10pt;color:#0008bb } //--> </STYLE> </HEAD> <BODY BGCOLOR=white> En este ejemplo vamos a ver cmo se aplican las clases. Por ejemplo, <B>esta negrita</B> utiliza el estilo definido en el bloque, pero <B class="contenido">esta otra negrita</B> tiene un color distinto. Y no slo podemos usar la clase para la negrita. Por ejemplo, <code class="contenido">este trozo de lnea tambin utiliza la clase para su estilo particular</code>. </BODY> </HTML> Utiliza lo aprendido en esta seccin para modificar las paginas que ya creaste.

-58-

Diseo de Pginas Web Unidad III. Macromedia Flash Player 5.0 Objetivo: Dinamizar el aspecto de las Pginas Desarrolladas, dndoles un acabado profesional y atractivo.

3.1. Introduccin a Macromedia Flash

Que es Macromedia Flash
Llegamos a la parte que va a dinamizar nuestras Webs, Macromedia Flash es un Programa que permite crear Pginas Web agradables a la vista y con movimiento que hagan de la experiencia de navegar en un sitio, una experiencia agradable, una experiencia estimulante para nuestros sentidos. Macromedia Flash es el estndar profesional para la creacin de experiencias Web de gran impacto. Tanto si crea logotipos animados, controles de navegacin de sitios Web, animaciones de gran formato, sitios Web completos de Flash o aplicaciones Web, descubrir que la capacidad y flexibilidad de Flash es el medio ideal para desarrollar su propia creatividad.

Espacio (entorno) de Trabajo

Para crear y editar pelculas, lo ms normal es trabajar con las siguientes funciones: El Escenario, rea rectangular en la que se reproduce la pelcula. La Lnea de tiempo, donde se animan los grficos respecto al tiempo. Los smbolos, componentes de los medios reutilizables de la pelcula. La ventana Biblioteca, donde se organizan los smbolos. El Explorador de pelculas, que ofrece una descripcin general de una pelcula y su estructura. Paneles acoplables y flotantes, que permiten modificar los distintos elementos de la pelcula y configurar el entorno de creacin de Flash para adaptarlo a sus necesidades concretas. Al igual que fotogramas. individuales ilustraciones en un largometraje, las pelculas de Flash dividen el tiempo en En el escenario se compone el contenido de los fotogramas de la pelcula, dibujndolos directamente o bien organizando importadas.

En el Escenario se componen los fotogramas individuales de una pelcula.

-59-

Diseo de Pginas Web Cuando abrimos el programa, lo primero que encontramos es la pantalla en blanco, lo que llamamos comnmente "STAGE", el escenario, la pantalla donde vamos a realizar toda la animacin. Por arriba podemos observar, la lnea de tiempo que est compuesta por FRAMES (cuadros) y LAYERS (capas). Automticamente, se nos abren varias ventanas, donde podemos tener al alcance de la mano todas las posibilidades y necesidades para nuestro diseo en flash. La lnea de tiempo nos sirve para darle el tiempo necesario a la animacin que vamos a disear; la sumatoria de frames equivale a los segundos que queremos que dure nuestra animacin. En forma predeterminada, el Flash viene predeterminado con una velocidad de 12 cuadros por segundo. Linea de tiempo

La velocidad de las fps (frames por segundo) deteminan la velocidad con que la animacin se reproducir, esto no quiere decir que va a descargarse en el ordenador mas rpido, el tiempo de descarga ser siempre el mismo, solamente la animacin se reproducir ms rpido o mas lento. El resto del contenido (pestaas y opciones de ventana) son instuitivas, Dimensions (Dimensiones) establecen el tamao tanto en Width como en Height de la Animacin, Match establece las dimensiones de la animacin segn Printer (impresora), en este caso se establecern las medidas que la Impresota tenga establecida como predeterminadas, Contents establece las dimensiones segn el contenido de la Animacin; el Background color establece el color de Fondo de la Pantalla; Ruler Units por su parte despliega las opciones de medida o mejor dicho las unidades de medid a que sern utilizadas en el documento activo, estas son: Pulgadas, Pulgadas (decimal), Centmetros, Milmetros, Pixeles, por defecto aparece Pixeles que ser la unidad de medida que trabajaremos en este Manual, esto porque las dimensiones sern exactamente las mismas que usamos en el HTML al disear nuestra Pgina Web.

-60-

Diseo de Pginas Web El principal factor que debemos tomar en cuenta es el tamao o peso de la animacin creada, pues recordemos que ser publicada en Internet (estas pelculas bajan a la carpeta de temporales del explorador que estemos utilizando para poder ser vistas), por lo que hay que hacerlas lo mas liviana y bonitas posible. En la parte izquierda de la ventana podemos observar la paleta de herramientas que vamos a utilizar para lograr nuestra animacin. Aquellos que ya han utilizado algn programa grfico reconocern todas las herramientas, a aquellos que no, les pido que sin miedo comiencen a "jugar", a interiorizarse ms con estas herramientas, total, ante la duda, comienzan otro nuevo stage y listo. Al utilizar las herramientas Lpiz, Lnea, valo, Rectngulo o Pincel, para dibujar una lnea sobre otra lnea o forma pintada, las lneas que se solapan se dividen en segmentos, en los puntos de interseccin. Puede utilizar la herramienta Flecha para seleccionar, mover y remodelar cada segmento independientemente. Las lneas que se solapan creadas con la herramienta Pluma, no se dividen en segmentos en los puntos de interseccin, sino que permanecen intactas.

Paletas y Ventanas Acoplables

-61-

Diseo de Pginas Web Las paletas y las ventanas acoplables permite configurar diferentes opciones dentro de un fotograma. Los paneles flotantes facilitan la visualizacin, la organizacin y la modificacin de elementos de una pelcula. Las opciones disponibles en los paneles controlan las caractersticas de los elementos seleccionados. Los paneles de Flash permiten trabajar con objetos, colores, textos, instancias, fotogramas, escenas y pelculas completas. Por ejemplo, puede utilizar el panel Caracter para seleccionar los atributos de caracter de los tipos y el panel Fotograma para introducir rtulos de fotogramas, as como para seleccionar opciones de interpolacin. Para ver una lista completa con todos los paneles disponibles en Flash, seleccione Ventana > Paneles. Puede mostrar, ocultar, agrupar y cambiar el tamao de los paneles conforme trabaja. Tambin puede mostrar y ocultar varios paneles, incluidos los paneles Informacin, Mezclador, Instancia, Fotograma y Acciones, utilizando los botones de la barra Lanzador situada en la parte inferior de la ventana de la aplicacin.

Puede agrupar los paneles segn desee organizarlos, as como guardar estos diseos personalizados. Si lo desea, puede volver a disponer los paneles de la manera predeterminada (con los paneles Informacin, Mezclador, Carcter e Instancia situados a la derecha de la ventana de la aplicacin) o bien utilizar un diseo personalizado previamente guardado.

-62-

Diseo de Pginas Web La mayora de los paneles incluyen un men emergente Opciones con opciones adicionales. Un tringulo en la esquina superior derecha del panel indica la existencia de un men Opciones. (Si el tringulo est atenuado, indicar que no hay men Opciones para ese panel). Puede agregar, eliminar, duplicar, cambiar el nombre y cambiar el orden de las escenas, para ello dirjase a Ventana>Paneles>Escenas (recuadro1), en la pantalla que le aparece selecciones la opcin a realizar, estas son Duplicar: duplica la escena (semejante a la accin copiar y pegar), agregar: Inserta una nueva escena, eliminar: elimina la escena seleccionada (recuadro2).

Recuadro 2

Recuadro1

Para detener la pelcula o hacer una pausa despus de cada escena, o bien para permitir que los usuarios contemplen la pelcula de manera no lineal, se utilizan las acciones, para este caso particular daremos doble clic sobre el Frame que tendr la accin stop(), aparece una ventana en la cual nos dirigiremos a Basic Actions, buscamos la accin Stop y le damos doble clic, y listo la accin est aplicada..

-63-

Diseo de Pginas Web Por su parte la biblioteca (Library) de una pelcula de Flash almacena los smbolos, tanto los creados en Flash como los importados, y permite ver y organizar estos archivos conforme trabaja. La ventana Biblioteca muestra una lista desplegable con los nombres de todos los elementos de la biblioteca. Un icono situado junto al nombre de cada elemento de la ventana de la biblioteca indica de qu tipo de archivo se trata. Al seleccionar un elemento en la ventana Biblioteca, aparecer una previsualizacin en miniatura del elemento en la parte superior de la ventana. Si el elemento seleccionado es animado o es un archivo de sonido, utilice el Controlador para previsualizarlo. Puede organizar los elementos de biblioteca en carpetas. Las columnas de la ventana Biblioteca muestran el nombre de un elemento, su tipo, el nmero de veces que se utiliza en el archivo, su estado de vinculacin (si el elemento est asociado con una biblioteca compartida) y la fecha en que se modific por ltima vez. Puede ordenar los elementos de la ventana Biblioteca por cualquier columna. La ventana Biblioteca tambin contiene un men emergente Opciones que permite modificar los elementos de la biblioteca.

3.2. Creacin de Objetos Bsicos.

Formas Bsicas
Las herramientas Lnea, valo y Rectngulo permiten crear fcilmente las formas geomtricas habituales. Las herramientas valo y Rectngulo crean tanto formas rellenas como formas slo definidas por el trazo. Puede utilizar la herramienta Rectngulo para crear rectngulos con esquinas rectas o redondeadas.

-64-

Diseo de Pginas Web

Operaciones Bsicas con Dibujos Nodos, Curvas y contornos

Puede remodelar las lneas y de los contornos de las formas creadas con las herramientas Lpiz, Pincel, Lnea, valo o Rectngulo arrastrndolas con la herramienta Flecha o bien optimizando las curvas. Tambin puede utilizar la herramienta Subseleccin para mostrar los puntos de las lneas y los contornos de las formas, as como modificar las lneas y los contornos ajustando los puntos. Si desea obtener informacin sobre cmo ajustar los puntos de anclaje, Para dibujar trazados precisos como lneas rectas o bien como suaves curvas fluidas, puede utilizar la herramienta Pluma. Puede crear segmentos de lneas rectas o curvas, y ajustar el ngulo y la longitud de los segmentos rectos, as como la pendiente de los segmentos curvos. Al dibujar con la herramienta Pluma, puede hacer clic para crear puntos en los segmentos de las lneas rectas o bien hacer clic y arrastrar para crear puntos en los segmentos de las lneas curvas. Puede ajustar los segmentos de las lneas curvas y rectas ajustando los puntos de las lneas. Puede convertir lneas curvas en lneas rectas y viceversa. Tambin puede mostrar los puntos de las lneas creadas con otras herramientas de dibujo de Flash, como las herramientas Lpiz, Pincel, Lnea, valo o Rectngulo, para ajustar estas lneas.

Alineacin y distribucin
El panel Alineacin permite alinear objetos seleccionados a lo largo de los ejes vertical y horizontal. Puede alinear objetos verticalmente a lo largo del borde derecho, del centro o del borde izquierdo de los objetos seleccionados, o bien, horizontalmente a lo largo del borde superior, del centro o del borde inferior de dichos objetos. Los recuadros de delimitacin que encierran a los objetos seleccionados determinan los bordes. Puede distribuir los objetos seleccionados de manera que sus centros o bordes estn espaciados de forma uniforme. Puede cambiar el tamao de los objetos seleccionados de manera que las dimensiones horizontales o verticales de todos los objetos coincidan con las del objeto seleccionado ms grande. Tambin puede alinearlos con respecto al Escenario. Puede aplicar una o ms opciones de alineacin a los objetos seleccionados.

Importacin y Exportacin
Las pelculas de Flash admiten el empleo de ilustraciones creadas en otras aplicaciones. Puede importar imgenes vectoriales, de mapas de bits y clips de vdeo en diversos formatos de archivos. Si dispone de QuickTime 4 o posterior instalado en el sistema, podr importar formatos de archivo adicionales. El comando Trazar mapa de bits convierte los mapas de bits en imgenes vectoriales con reas de color discretas que pueden editarse. Utilice este comando para manipular la imagen como un grfico vectorial o para reducir el tamao del archivo.

-65-

Diseo de Pginas Web

Si convierte un mapa de bits en una imagen vectorial, sta ya no aparecer vinculada al smbolo de mapa de bits en la ventana Biblioteca. Flash 5 puede importar diferentes formatos de archivos dependiendo de si est instalado QuickTime 4 o posterior. La utilizacin de Flash con QuickTime 4 es especialmente til en los proyectos de colaboracin en los que los creadores trabajan en plataformas Windows y Macintosh. QuickTime 4 ampla la compatibilidad con ciertos formatos de archivos (incluyendo Adobe Photoshop, PICT, QuickTime Movie y otros) para ambas plataformas. Se pueden importar a Flash 5 los siguientes formatos de archivo, sin tener en cuenta si est instalado QuickTime 4:

Efectos Avanzados
Dentro de los efectos avanzados que se tienen en flash esta la utilizacin de loas efectos alfha, brillo y tinte. Los efectos de alfha y brillo permiten que los objetos generen la sensacin de transparencia, as que en dependencia de la habilidad del usuario puede crear efectos de iluminacin como iluminacin, desvanecimientos entre otros efectos que se pueden combinar. El efecto de tinte permite el intercambio de un color a otro pasando por la transicin de colores que exista entre ellos.

3.3. Creacin de Animaciones.

Por interpolacin
a) Con trayectoria Flash puede crear dos tipos de animacin interpolada. En el primero, denominado interpolacin de movimiento, se definen propiedades como la posicin, el tamao y la rotacin de una instancia, un grupo o un bloque de texto en un punto en el tiempo, y estas propiedades se cambian en otro punto. En el segundo, denominado interpolacin de forma, se dibuja una forma en un punto del tiempo y se cambia o se dibuja una nueva en otro punto. Flash interpola los valores o formas de los fotogramas intermedios para crear la animacin. Para interpolar los cambios en las propiedades de instancias, grupos y tipo se utiliza la interpolacin de movimiento. Flash puede interpolar la posicin, el tamao y la rotacin as como sesgar instancias, grupos y tipo. Tambin puede interpolar el color de las instancias y los tipos para crear cambios graduales de color o hacer aparecer o desaparecer instancias de forma paulatina. Para interpolar el color de grupos o tipos, debe convertirlos en smbolos.

-66-

Diseo de Pginas Web

Puede crear una interpolacin de movimiento utilizando uno de los dos mtodos siguientes: Cree los fotogramas de inicio y final para la animacin y utilice la opcin Interpolacin de movimiento en el panel Propiedades de fotograma. Cree el primer fotograma clave para la animacin y luego elija Insertar >Crear interpolacin de movimiento y mueva el objeto a la nueva ubicacin del Escenario. Flash crea el fotograma final automticamente. La interpolacin de posiciones permite mover un objeto a lo largo de un trazado no lineal.

Movimiento de interpolacin a lo largo de un trazado

Las capas de gua de movimiento permiten dibujar trazados a lo largo de los cuales se animan instancias, grupos y bloques de texto interpolados. Puede vincular varias capas a una capa de gua de movimiento para hacer que varios objetos sigan el mismo trazado. Al vincular una capa normal a una capa de gua de movimiento se convierte en un tipo de capa con gua.

a) De forma Al interpolar formas se crea un efecto similar al de transformacin y las formas parecen cambiar en el transcurso del tiempo. Flash tambin puede interpolar la ubicacin, el tamao y el color de las formas. La interpolacin de una forma a la vez suele producir los mejores resultados. Si interpola varias capas de una sola vez, todas las formas deben estar en la misma capa. Flash no puede interpolar la forma de grupos, smbolos, bloques de texto ni imgenes de mapas de bits.

Usando Clips de Pelculas

El uso de los clip de pelculas es la incorporacin de smbolos creados previamentes los cuales son objetos animados <ampliar>

-67-

Diseo de Pginas Web

3.4. Escenas y Botones

Cdigos ActionScrips bsicos
El modo Normal permite crear acciones seleccionndolas de una lista situada en la parte izquierda del panel, denominada lista de la Caja de herramientas. La lista de la Caja de herramientas contiene las siguientes categoras: Acciones bsicas, Acciones, Operadores, Funciones, Propiedades y Objetos. La categora Acciones bsicas contiene las acciones de Flash ms simples y slo est disponible en modo Normal. Las acciones seleccionadas se muestran en la parte derecha del panel, en la lista Acciones. Es posible agregar, eliminar o modificar el orden de las sentencias de acciones; tambin es posible especificar parmetros (argumentos) para las acciones en los campos que se encuentran en la parte inferior del panel. En modo Normal pueden utilizarse los controles del panel Acciones para eliminar o cambiar el orden y los parmetros de las sentencias. Estos controles resultan especialmente tiles para controlar acciones de botn o fotograma que tienen varias sentencias.

-68-

Diseo de Pginas Web Para seleccionar una accin: 1. Haga clic en una categora de acciones de la Caja de herramientas para acceder a las acciones de dicha categora. 2. Haga doble clic en una accin o arrstrela a la ventana de scripts. Las acciones se pueden configurar a los diferentes objetos dentro de una pelcula de flash, principalmente se utilizan para asignarle interactividad a los fotogramas y capas dentro de un pelcula. Algunas de las funciones que se pueden realizar son las siguientes: Desplazamiento entre escenas Interaccin con el reproductor Abrir paginas web Cargar otras pelculas flash Cargar sonidos Etc. Por ejemplo para desplazarse entre las escena se suele asignar a un botn el comando gotoandplay indicndole del cuadro desplegable si se desplazara a la siguiente escena, a la escena anterior u otra escena dentro de la pelcula.

Para controlar el reproductor, Flash Player, exite el comando fscommand el cual permite controlar el menu contextual, el tamao del reproductor, la terminacin del reproductor, la ejecucin de otras aplicaciones, etc. Las opciones del comando fscommand son:

-69-

Diseo de Pginas Web

Comando FullScreen Parmetros True / False Descripcin Para controlar la visualizacin del proyector. En el campo Argumentos, introduzca True (verdadero) para una visualizacin a pantalla completa o False (falso) para una visualizacin normal. Para controlar la escala de la pelcula. En el campo Argumentos, introduzca True (verdadero) para cambiar el tamao de la animacin y ajustarla al reproductor o introduzca False (falso) para mostrar la animacin sin cambio de tamao. Para controlar los elementos del men emergente. En el campo Argumentos, introduzca True (verdadero) para mostrar el juego completo de elementos de men al hacer clic con el botn derecho del ratn o introduzca False (falso) para ocultar la barra de mens. Para ejecutar una aplicacin desde el interior del proyector. En el campoArgumentos, introduzca la ruta de la aplicacin. Cierra el Reproductor

Alloscale

True / False

Showmenu

True / False

Exec Quit

Comando, argumentos

Otros botones de Flash

Flash en la versin 5 trae incluido una biblioteca de botones predefinidos los cuales se pueden incluir dentro de las pelculas que se crean, estos botones se pueden personalizar para nuestro propias necesidades

-70-

Diseo de Pginas Web

Multimedia
a) Incorporacin de sonidos y videos digitales Flash ofrece distintos mtodos para utilizar sonidos. Puede crear sonidos de reproduccin constante, independientes de la Lnea de tiempo, o sincronizar una animacin con una pista sonora. Puede adjuntar sonidos a botones para hacerlos ms interactivos y hacer que aparezcan y desaparezcan de forma paulatina para refinar ms la pista sonora. Tambin puede usar sonidos en bibliotecas compartidas para vincular el sonido de una biblioteca a varias pelculas. Tambin puede usar sonidos en objetos de sonido para controlar la reproduccin del sonido con ActionScript. Existen dos tipos de sonidos en Flash: sonidos de evento y sonidos de flujo. Los primeros deben descargarse por completo para que empiece a reproducirse y continan hacindolo hasta que se detengan de forma explcita. Los segundos empiezan a reproducirse en cuanto se haya descargado informacin suficiente para los primeros fotogramas y sincronizan el sonido con la Lnea de tiempo para reproducirlo en un sitio Web. Usted debe seleccionar opciones de compresin para controlar la calidad y tamao de los sonidos en las pelculas exportadas. Puede seleccionar las opciones de compresin para sonidos individuales con el cuadro de dilogo Propiedades de sonido o definir parmetros para todos los sonidos de la pelcula en el cuadro de dilogo Configuracin de publicacin. Utilice el comando Archivo > Importar para traer sonidos de archivos WAV (slo Windows), AIFF (slo Macintosh) o MP3 (cualquier plataforma) de la misma forma que lo hara con cualquier otro tipo de archivo. Si tiene QuickTime 4 o posterior instalado en su sistema podr importar los siguientes formatos de archivo de sonido: Sound Designer II (slo Macintosh) Pelculas QuickTime slo sonido (Windows o Macintosh) Sun AU (Windows o Macintosh) Sonidos System 7 (slo Macintosh) WAV (Windows o Macintosh)

Flash almacena los sonidos en la biblioteca junto con los mapas de bits y los smbolos. Al igual que con los smbolos grficos, slo es necesaria una copia del archivo de sonido para utilizar ese sonido de varias formas en la pelcula. Si

-71-

Diseo de Pginas Web desea compartir sonidos entre las pelculas Flash, puede incluir sonidos en las bibliotecas compartidas.
Puede crear bibliotecas compartidas para utilizar los componentes de una pelcula en varias pelculas de Flash. Para utilizar bibliotecas compartidas, se definen los componentes de la biblioteca compartida de una pelcula y, a continuacin, se vinculan con los componentes de otras pelculas. Al establecer el vnculo con un componente de una biblioteca compartida, se hace referencia a ese componente como un archivo externo, pero no se agrega a la pelcula el archivo del componente.

Para usar un sonido en una biblioteca compartida, asigne al archivo de sonido una cadena identificadora en el cuadro de dilogo Propiedades de vnculos de smbolos. El identificador tambin se puede usar para acceder al sonido como un objeto en ActionScript. Si desea informacin sobre objetos en ActionScript,

Publicacin de Archivos
Felicidades! Casi ha completado ya la pelcula. Para el toque final, utilizar el comando Publicar para crear una versin compatible con la Web con la extensin SWF. Si utiliza el comando Publicar con las configuraciones predeterminadas, Flash preparar su archivo para la Web. Flash publicar el SWF y un archivo HTML con las etiquetas necesarias para mostrar el SWF. Una vez haya introducido todas las opciones de Configuracin de publicacin necesarias, podr elegir File > Publish para exportar a todos los formatos seleccionados al mismo tiempo. Flash almacena la Configuracin de publicacin especificada en el archivo de la pelcula, de modo que cada archivo puede tener su propia configuracin.

3.5. Culminacin del Portafolio

En este Punto ya debemos tener creado nuestro sitio, deber hacernos falta nicamente darle el acabado con Flash Player, tu sitio debers publicarlo en Internet en un Servidor Gratuito previamente definido por el profesor, que te deber asesorar en cualquier duda que tengas a la hora de la publicacin, este sitio te servir a la hora de presentar tu currculo o presentacin de trabajos publicados a un determinado contratante.

-72-

Diseo de Pginas Web De tu trabajo debers dejar copia en la Direccin de Compulab, respaldado preferiblemente en CD, si no es necesario en disquete de 3 , todo depender de la presentacin que le quieras dar y del peso del sitio construido a lo largo de este curso y que ahora es parte de tu Nota Final.

-73-