Pag # 1
PROGRAMACION EN LAS PAGINAS WEB CON HTML
Autor. Ing. Oscar Marcelo Yumiceba Asquel Teléfono 09-3-743-345 3 978-900 ext. 2550 Mail: jacutraguta@hotmail.com
Pag # 2
PROGRAMACION EN LAS PAGINAS WEB CON HTML Índice Introducción Sobre la Accesibilidad Conceptos Básicos antes de la programación Organización de una WEB El lenguaje HTML Editores y convertidores Documento HTML Introducción a HTML y las etiquetas de bloque Etiquetas y atributos. Estructura básica Elementos del Cuerpo Encabezados o títulos Definición de bloques Marcado lógico de frases Marcado tipográfico de frases Etiquetas de bloque Formato de párrafos y divisiones Listas Texto preformateado Citas y direcciones Líneas Horizontales Las etiquetas de texto Estilos físicos Estilos lógicos Imágenes Anclas Vínculos internos Uso de gráficos y mapas de imagen Insertar imágenes Alineación y espaciado Uso de los Atributos ALT y LOWSRC Creación de mosaicos de fondo Trabajo con mapas de imagen Creación de imágenes. Uso de tablas para formatear páginas Creación de los efectos de biselado Atributos de fila, celda y encabezados de tabla Formateo de páginas Definición de marcos Control de un marco
Página ………………….. 3 ………………….. 4 ………………….. 5 ………………….. 6 ………………….. 7 ………………….. ………………….. 8 ………………….. 9 ………………….. 9 ………………….. 11 ………………….. 11 ………………….. 11 ………………….. 12 ………………….. 12 ………………….. 13 ………………….. 13 ………………….. 14 ………………….. 15 ………………….. 18 ………………….. 18 ………………….. 18 ………………….. 19 ………………….. 19 ………………….. 19 ………………….. 20 ………………….. 22 ………………….. 24 ………………….. 24 ………………….. 25 ………………….. 25 ………………….. 26 ………………….. 27 ………………….. 27 ………………….. 27 ………………….. 29 ………………….. 32 ………………….. 34 ………………….. 38 ………………….. 39 ………………….. 41
8
Autor. Ing. Oscar Marcelo Yumiceba Asquel Teléfono 09-3-743-345 3 978-900 ext. 2550 Mail: jacutraguta@hotmail.com
Pag # 3
Como controlar dos marcos Cómo lidiar con navegadores sin marcos. Recolección de datos con formularios Etiquetas y atributos de formularios Encabezado del formulario Campos de entrada, Recepción de datos. Atributos de envío y cancelar Atributo de la casilla de verificación. Atributos de botones de opción Atributos ocultos Las opciones <SELECT> y <OPTION> Creación de la página de formulario Colores Comunicación entre el cliente y el servidor
………………….. ………………….. ………………….. ………………….. ………………….. ………………….. ………………….. ………………….. ………………….. ………………….. ………………….. ………………….. ………………….. …………………..
43 44 44 44 45 45 46 46 46 46 47 47 48 51
Autor. Ing. Oscar Marcelo Yumiceba Asquel Teléfono 09-3-743-345 3 978-900 ext. 2550 Mail: jacutraguta@hotmail.com
Pag # 4
PROGRAMACIÓN EN LAS PAGINA WEB
INTRODUCCIÓN El desarrollo tecnológico a ocasionado al ser humano a que se encuentre permanentemente y constante investigaciones en varios campos de la informática para de esta manera brindar al usuario final alternativas modernas y de fácil uso. Este es el caso del Internet que se encuentra en el mercado de todo el mundo revolucionando la sola idea de las comunicaciones es así que cada mes se agregan al Internet cerca de dos mil usuarios, transformándose en una herramienta poderosa y gigante que al ser humano puede llenar de información que en la antigüedad jamás hubiera soñado. Con cada avance tecnológico aparecen muchos especialistas que han aprendido a utilizarla y dominarla. Con Internet, el Webmaster es quien se supone conocer las implicaciones y sus limitaciones. El que se prepare para manejar o programar en la tecnología Web debe tener varios conocimientos adicionales como las interconexiones de redes, focalización de las mismas, tipos, Además de conocer a profundidad sin necesidad de ser un técnico de hardware por lo menos que sepa de las partes constitutivas con las que se cuentan dentro de la configuración de los equipos con los que se van a trabajar y un manejo sino excelente bueno de Internet. Con estas herramientas requerirá de un poco de tiempo y dedicación, puede ser al parecer una tarea difícil pero con esfuerzo y dedicación estoy completamente seguro que alcanzara este objetivo cuando llegue a alcanzar el nivel actual de conocimientos. A partir de aquí es cosa de mantener su ventaja, la mayoría de individuos que tienen éxito en computación reconocen que para lograrlo se debe alcanzar la base actual de conocimientos y luego siempre estar actualizando los conocimientos. Uno de los problemas graves que el programador debe tomar en consideración es el equipo en el que desarrollara su trabajo por la capacidad de información que desplegara en cada uno de sus trabajos o aplicaciones no todos los equipos son aptos para desarrollar las páginas web, Internet y varios componentes adicionales, mas todos los requerimientos propios del hardware de esta temporada y que posiblemente en poco tiempo revolucionen rápidamente y se tenga mejores alternativas de trabajo. En estos momentos la tecnología sufre varias limitaciones. Como la de soportar visiones futuristas que requieren significativos avances. Para superar las limitaciones de los medios y canales de comunicación Incluso algunas de las cosas sencillas que quisiéramos realizar hoy, requieren de soluciones ingeniosas y creativas. Nuestra red, la red de hoy, tiene limitaciones que todos debemos aprender a superar. Yo creo que al igual que en los avances en la tecnología de la computación personal, la de Internet evolucionará para permitirnos hacer cualquier cosa. De la lectura realizada de varios autores de computación sobre este tema me he encontrado que para desarrollarlo incurren en excesiva literatura ocasionando al lector una falta de interés y en varios casos en un abandono de esta herramienta que es de gran ayuda, es este el motivo que me ha llevado a escribir este documento que permita ir en forma concreta y clara al objetivo especifico al que me debo esta vez. Debo señalar que existirán usuarios que no han alcanzado el conocimiento en otras áreas y que por tal motivo deberán acudir a consultar otros temas relacionados o vinculados con la programación de las páginas WEB que en este libro no los voy a tocar.
Autor. Ing. Oscar Marcelo Yumiceba Asquel Teléfono 09-3-743-345 3 978-900 ext. 2550 Mail: jacutraguta@hotmail.com
Pag # 5
SOBRE LA ACCESIBILIDAD Uno de los temas sobre los que más se habla actualmente en la web y en las revistas especializadas es el de la usabilidad, o mejor expresado, LA USABILIDAD, debido al ruido que está produciendo. Resulta que ahora, después de tanto tiempo creando páginas web, se le dice a los diseñadores y desarrolladores que su trabajo no es todo lo correcto que debiera, que no están al día de las fabulosas teorías sobre navegabilidad, accesibilidad y otras tantas cosas que acaban en "bilidad". Y aparecen grandes gurús de la web que anuncian a bombo y platillo sus teorías innovadoras, grandiosas, sobre cómo se debe construir un sitio web perfecto. La verdad es que a mí todo esto me parece un montaje absurdo, un afán de ganar notoriedad y dinero, a costa de redefinir lo que hace mucho tiempo está claro para todos aquellos que se dediquen al diseño web. Y que se puede resumir en dos simples palabras: SENTIDO COMZN. Vamos a analizar a continuación una de las partes constituyentes de la usabilidad, la accesibilidad. A la hora de crear un sitio web (conjunto de páginas unidas lógicamente que persiguen un fin común) nos dicen que debemos diseñar de tal forma que el resultado sea perfectamente presentable para todo tipo de público (adaptando las páginas a las condiciones físicas de cada uno), todo tipo de resoluciones, todo tipo de navegadores (aunque sean de sólo texto), todo tipo de conexiones a Internet, etc., etc. El estado actual de los equipos informáticos es estupendo: procesadores de altas prestaciones, tarjetas gráficas con millones de texels, equipos de sonido de multitud de voces, memorias de muchos Megas, monitores de alta resolución, servidores web capaces de soportar gran número de peticiones simultáneas... Y lo mismo ocurre con el software: sistemas operativos de elevadas prestaciones multimedia, navegadores de 4-5 generación capaces de renderizar casi todo, plugins variados que permiten visualizar y oír casi cualquier cosa, etc., etc., etc. Pero nos dicen que la mayoría de los navegantes no poseen estas tecnologías avanzadas, que no se pueden crear páginas basadas en conceptos demasiado modernos. Y yo me pregunto ¿es que piensan que estamos en los años 80?. Según ellos debemos diseñar una página web con los 256 colores seguros (aunque en realidad, seguros, seguros, sólo hay 16), con poco contenido gráfico y muy simple (feo), sin usar lenguajes de script muy avanzados y sin objetos multimedia que precisen plugin alguno. También deberemos usar fuentes multiplataforma, como Times New (¿para qué están las Hojas de Estilos en Cascada?), de gran tamaño y si es posible, de color negro sobre fondo blanco. Ahora bien, si acudimos a cualquiera de los servidores web que ofrecen estadísticas sobre las visitas recibidas podremos sacar las siguientes conclusiones: - Un 80-90% de los usuarios de Internet poseen como sistema operativo Windows NT, 2000, Millenium o 98 (por mucho que nos pese sistemas Unix-Linux tienen una representación mínima). - El navegador más usado en Internet Explorer 5-5.5 (aproximadamente un 70 % de los usuarios), seguido por Nestcape Navigator 4x (sobre un 25 %). - La resolución estándar en la actualidad es 800 x 600 píxel (sobre un 60%), y después 1024 x 768 (sobre un 25%), siendo casi nulo el número de usuarios con 640x400. - En cuanto a la profundidad de color, aproximadamente un 90% de los sistemas están configurados a 24 bits (color real) e incluso a 32 bits. - Y en lo que toca a las conexiones a Internet, aunque sigue primando el modem de 56 Kbs en el sector de usuarios domésticos es muy cierto que se está produciendo un aumento considerable de las conexiones RDSI, ADSL y cable, tanto en las empresas como en los hogares, debido sobre todo a la disminución de precios de instalación y a las tarifas planas. Y este aumento seguirá imparable. Con estos datos a la vista creo que no tiene ningún sentido extralimitar a los diseñadores web asustándolos con demonios que no son en absoluto reales. Si este es el estado en que se encuentra el mercado en la actualidad, para él debemos trabajar, procurando ofrecer las mejores páginas dentro de este entorno. Esto no quiere decir que no pensemos en aspectos como tiempos de carga, imágenes con atributo ALT para aquellos que no deseen visualizarlas (¿porqué no las desean?) y todas las demás Autor. Ing. Oscar Marcelo Yumiceba Asquel Teléfono 09-3-743-345 3 978-900 ext. 2550 Mail: jacutraguta@hotmail.com
Pag # 6
recomendaciones que nos hace el W3C y que casi todos podemos deducir teniendo un poco de sentido común. En cuanto a la accesibilidad de las páginas de personas con problemas de visión, lo mejor que podemos hacer es crear una alternativa completa del sitio web para ellos. Con esto conseguimos por un lado ofrecerles una opción verdadera de visualización adaptada, y por otro lado no sacrificar el diseño original de las páginas que creemos, sobre todo en los casos de aplicaciones web que deben presentar en pantalla multitud de datos y formularios, en las que el espacio de trabajo debe estar constantemente controlado al píxel. Una de las tecnologías que poco a poco se va abriendo paso cada vez más es la basada en animaciones Flash, que capacitan al diseñador web para incluir contenidos multimedia e interactivos capaces de dar un giro total al concepto que hasta hace poco se tenía de una página web. Particularmente no soy partidario del uso masivo de Flash en una página, pero si que es cierto que, en su justa medida, los resultados obtenidos pueden ser impactantes y bellos. Pero según los "entendidos" no se debe usar, ya que es necesaria la instalación de un plugin particular, aparte de sobrecargar en exceso el peso de la página. Creo que cualquiera que navegue un poco por Internet tiene ya instalado el plugin necesario, y en cuanto al peso, es cierto, pero mientras que el retardo en la carga de la página no sea excesivo (no más de 9-10 segundos), creo que todos estamos dispuestos a esperar un poco si lo que vamos a ver merece la pena. Y lo mismo que ocurre con Flash, ocurre con otras tecnologías. Todo esto no quiere decir que se olvide la verdadera finalidad de un sitio web, supeditándola a una presentación ultramoderna y multimedia. Está claro que si hacemos una tienda on line, la principal característica de nuestra aplicación web debe ser que las transacciones comerciales se efectúen adecuadamente, pero una vez conseguido esto, creo que un diseño original a la vez que serio puede influir mucho en que los navegantes visiten más a menudo la tienda, con lo que las posibilidades de que compren algo aumentan considerablemente. Las páginas web que nadie visita, están muertas. Y lo mismo ocurre con todos los sitios web, sea cuál sea su finalidad. Imaginemos por un momento que a Leonardo Da Vinci le hubieran exigido que no usara en sus pinturas pigmentos nuevos. O que a Severo Ochoa le hubieran eliminado la posibilidad de usar el microscopio en sus investigaciones... Dejemos pues a un lado las normas inquisitoriales y diseñemos nuestros sitios web con BUEN GUSTO y con SENTIDO COMUN, que seguro que lograremos lago bello y funcional, a la vez que contribuimos entre todos al avance de Internet y de la WWW.
Conceptos básicos antes de la programación. •
World Wide Web (WWW): Digamos, simplemente, que es un sistema de información, el sistema de información propio de Internet. Sus características son: • Información por hipertexto: Diversos elementos (texto o imágenes) de la información que se nos muestra en la pantalla están vinculados con otras informaciones que pueden ser de otras fuentes. Para mostrar en pantalla esta otra información bastará con hacer clic sobre ellos. • Gráfico: En la pantalla aparece simultáneamente texto, imágenes e incluso sonidos. • Global: Se puede acceder a él desde cualquier tipo de plataforma, usando cualquier navegador y desde cualquier parte del mundo. • Pública: Toda su información está distribuida en miles de ordenadores que ofrecen su espacio para almacenarla. Toda esta información es pública y toda puede ser obtenida por el usuario. • Dinámica: La información, aunque esta almacenada, puede ser actualizada por el que la publico sin que el usuario deba actualizar su soporte técnico. • Independiente: Dada la inmensa cantidad de fuentes, es independiente y libre. • Navegador: Es el programa que nos ofrece acceso a Internet. Debe ser capaz de comunicarse con un servidor y comprender el lenguaje de todas las herramientas que manejan la Autor. Ing. Oscar Marcelo Yumiceba Asquel Teléfono 09-3-743-345 3 978-900 ext. 2550 Mail: jacutraguta@hotmail.com
Pag # 7
información de Web. Puede decirse que cada casa de software podría tener su navegador propio, aunque los mas populares sean Netscape e Internet Explorer. •
Servidor: Se encarga de proporcionar al navegador los documentos y medios que este solicita. Utiliza un protocolo HTTP para atender las solicitudes de archivos por parte de un navegador.
•
HTTP: Es el protocolo de transferencia de hipertexto, o sea, el protocolo que los servidores de World Wde Web utilizan para mandar documentos HTML a través de Internet.
•
URL: Es el Localizador Uniforme de Recursos, o dicho mas claramente, es la dirección que localiza una información dentro de Internet.
•
HTML: De momento, le basta saber que estas siglas se corresponden con la definición "Lenguaje para marcado de hipertexto". Más claro aún, se trata de un lenguaje para estructurar documentos a partir de texto en World Wide Web. Este lenguaje se basa en etiquetas (instrucciones que le dicen al texto como deben mostrarse) y atributos (parámetros que dan valor a la etiqueta).
Organización de una Web Para hacer una buena presentación Web lo ideal es crearnos un boceto inicial de la estructura. Si hacemos esto, no solo estamos procurando una presentación agradable y facilitando la tarea de navegar sino que también nos facilitamos el mantenimiento de futuras revisiones y modificaciones.
Objetivos Lo primero que debemos hacer el fijarnos los objetivos que queremos alcanzar según la información que vayamos a aportar. Para crear nuestra primera página, estos objetivos deberían no ser muy pretenciosos o tener un sentido únicamente personal. Tener claros los objetivos nos ayudara a no plasmar contenidos confusos o innecesarios.
Contenidos Una vez tenemos los objetivos, hay que organizar el contenido por temas o secciones, que se ajusten a nuestros objetivos, reuniendo las informaciones relacionadas bajo el mismo epígrafe. Es conveniente que los temas sean razonablemente cortos y si fuera necesario divida en subtemas. Si por el contrario tenemos temas muy cortos, lo correcto sería agruparlos bajo un encabezado de tema algo más general. Una presentación Web consiste de una o más páginas Web que contienen texto y gráficos y que están vinculadas entre si creando un cuerpo de información. La página principal o página base es desde donde se comienza a visitar la presentación y su URL será la que figure como dirección de la presentación
Organización Ha llegado la hora de estructurar la información recopilada en un conjunto de páginas Web. Podemos crearnos una estructura propia pero lo más lógico es guiarnos por una estructura clásica.
Secuenciación Consiste en decidir que contenido va en cada página, elaborar la trama de vínculos para navegar entre ellas e incluso, hacernos una idea de que tipo de gráficos vamos a poner y que ubicación van a tener. Para ello puede utilizarse un "Tablero de Secuencia", un esquema gráfico que nos ayudará a recordar en todo momento donde encaja cada página en el global de la presentación. • Un programador de páginas web debe considerar que posiblemente no va a ser el único que va ha trabajar dentro del desarrollo, si no que haya muchas personas dentro de un grupo, por que resulta Autor. Ing. Oscar Marcelo Yumiceba Asquel Teléfono 09-3-743-345 3 978-900 ext. 2550 Mail: jacutraguta@hotmail.com
Pag # 8
de vital importancia administrar diversos aspectos incluyendo el tiempo. Para esto es preciso crear un mapa del sitio, no sólo para la planeación, sino también para su mantenimiento. El mapa del sitio por lo general es un esquema que representa las diversas páginas web. Si le gusta los gráficos quizás quiera hacerlo en programa de dibujo como flow charter. micrographx, postscript, etc. • El lenguaje de programación para las páginas web se llama HTML que significa lenguaje de Marcado de Hipertexto y se basa en “etiquetas” de estilo para definir la forma en que se acomodan el texto, los gráficos y otros elementos de la página web • En los gráficos web. la definición de los colores de la imagen está en función del programa de trama o de pintura que haya usado para crearlos, en los gráficos de mapas de bits incluidos en .las páginas web, el archivo HTML no define en forma directa los colores. Todos los colores inherentes del mapa de bits en si se definieron cuando los creó . Sin embargo con los elementos de texto, los fondos y las líneas horizontales definidos en el código HTML debe trabajar con algo llamado color hexadecimal. El color hexadecimal es un sistema matemático de numeración con base 16 usado para definir y describir los colores en HTML. Cada color esta definido por una cadena de seis dígitos, como FFFFFF y 000000. los valores posibles de cada posición son 0,1,2,3,4,5,6,A,B,C,D,E,F el valor mas bajo es 0 y el mas alto es F Para calcular los valores hexadecimales, necesita dos cosas. Lo primero que tiene que saber es la definición RGB del color que quiera convertir a hexadecimal. Para ello puede usar Photoshop o cualquier software adicional de imágenes y tramas, que muestre los valores RGB de los colores. Lo segundo que necesita es una calculadora científica. Si usted tiene PC y cuenta con ella busque en el grupo de accesorios . Para convertir el valor del color RGB en hexadecimal, haga lo siguiente: 1. Empiece por determinar los valores de rojo, verde y azul del color en el editor de imágenes R: 222, G: 39 y B: 151 2. Ahora abra la calculadora en windows y seleccione modo científico 3. Asegúrese de estar en modo decimal (dec), escriba el valor de rojo en la calculadora 222 4. Ahora haga clic en HEX, lo cual mostrará el valor hexadecimal del valor decimal del rojo ( DE) escriba este valor en un papel. 5. Repita el paso 3 y 4 con los valores del verde 39 y del azul 151 y obtendrá respectivamente 27 y 97 como hexadecimal. 6. Una vez obtenido estos valores escriba los resultados en una sola cadena, este es el valor DE2797 Existe otros medios en internet de ayuda como son: http://www.bga.com/-rlp/dwp/palette/palette.html http://www.echonyc.com/-xixax/Mediarama/hex.html
El lenguaje HTML Como ya se ha dicho, este lenguaje estructura documentos. La mayoría de los documentos tienen estructuras comunes (títulos, parrafos, listas...) que van a ser definidas por este lenguaje mediante etiquetas. Cualquier cosa que no sea una etiqueta es parte del documento mismo. Este lenguaje no describe la apariencia del diseño de un documento sino que ofrece a cada plataforma que le de formato según su capacidad y la de su navegador (tamaño de la pantalla, fuentes que tiene instaladas...). Por ello y para no fustrarnos, no debemos diseñar los documentos basándonos en como lucen en nuestro navegador sino que debemos centrarnos en proporcionar un contenido claro y bien estructurado que resulte fácil de leer y entender. No se desespere por lo que acaba de leer. HTML tiene dos ventajas que lo hacen prácticamente imprescindibles a la hora de diseñar una presentación web: Su compatibilidad y su facilidad de aprendizaje debido al reducido número de etiquetas que usa. Autor. Ing. Oscar Marcelo Yumiceba Asquel Teléfono 09-3-743-345 3 978-900 ext. 2550 Mail: jacutraguta@hotmail.com
Pag # 9
Básicamente, los documentos escritos en HTML constan del texto mismo del documento y las etiquetas que pueden llevar atributos. Esto llevado a la práctica, vendría a ser: <etiqueta> texto afectado </etiqueta> La etiqueta del principio activa la orden y la última (que será la del principio precedida del signo /) la desactiva. No todas las etiquetas tienen principio y final pero esto lo veremos más adelante.
Editores y convertidores Antes de comenzar al trabajar sobre un editor, le recomendaría que visionase el código fuente de nuestra página principal. Todos los navegadores dan la opción de editarla (Menú ver / Código fuente). Si visita otras páginas y visualiza su código fuente encontrará similitudes en la forma en que están organizadas las páginas y en los etiquetas utilizadas. ¿Dónde hay que editar el código fuente? Pues, si usted es usuario de Windows le bastaría con el Bloc de Notas y si utiliza Macintosh con el Simple Text. Si utiliza procesadores de texto más potentes debe guardar sus documentos como "solo texto" ya que HTML ignora todos los espacios en blanco. Una vez guardado convierta la extensión de texto por la extensión html o htm (en los sistemas DOS). Los convertidores se utilizan para tomar los archivos de un procesador de textos y convertirlos a HTML. Pero debido a la propia limitación de este lenguaje, por muy elegante que hagamos un documento en nuestro procesador, un convertidor no obrará milagros y quizá acabe por crear cosas ilegibles en HTML. Además, la mayoría de los convertidores no convierten imágenes y no automatizan los vínculos hacia los documentos en Web debiendo corregir esto de manera manual. A través de Internet o de revistas especializadas, usted podrá hacerse con editores y convertidores gratuitos o de muy reducidos costes. Quizá más adelante, cuando este acostumbrado a trabajar con HTML, puedan resultarle interesantes pero eso se lo dejo a su futura elección. De momento, hágame caso, si quiere aprender HTML use solo un procesador de texto simple.
DOCUMENTO HTML Estructura básica de un documento HTML: Cabecera y cuerpo del documento Tres son la etiquetas que describen la estructura general de un documento y dan una información sencilla sobre él. Estas etiquetas no afectan a la apariencia del documento y solo interpretan y filtran los archivos HTML. • <HTML>: Limitan el documento e indica que se encuentra escrito en este lenguaje. •
<HEAD>: Especifica el prólogo del resto del archivo. Son pocas las etiquetas que van dentro de ella, destacando la del titulo <TITLE> que será utilizado por los marcadores del navegador e identificará el contenido de la página. Solo puede haber un título por documento, preferiblemente corto aunque significativo, y no caben otras etiquetas dentro de él. En head no hay que colocar nada del texto del documento.
• <BODY>: Encierra el resto del documento, el contenido. <HTML> <HEAD> <TITLE>Ejemplo 1</TITLE> </HEAD> <BODY> Hola mundo Autor. Ing. Oscar Marcelo Yumiceba Asquel Teléfono 09-3-743-345 3 978-900 ext. 2550 Mail: jacutraguta@hotmail.com
Pag # 10
</BODY> </HTML>
Introducción a HTML y las etiquetas de bloque HTML es un subconjunto o derivado del lenguaje estándar de marcado generalizado (SGML Standard Generalized Markup Language) que puede ser transferido de una máquina a otra sin tener que abordar cuestiones de hardware y software. Consulte a Web del world wide web consotium en http://www.w3.org Básicamente este lenguaje permite al usuario realizar la programación por medio de etiquetas de código incrustadas, para esto y mas adelante s especificará las más importantes y mas usadas en el lenguaje común de los webmaster. Una de las últimas versiones en estos momentos es 3.2 y si desea consultar los avances más recientes del lenguaje http://www.yahoo.com/computers_and:internet/sofware/Data_formats/HTML o vaya a http://www.w3.org/pub/www/. Para escribir la programación es necesario contar con editores de archivos para sistemas ASCII sencillos, para esto se puede contar con cualquiera de los editores tradicionales no así como los de herramientas tradicionales creados en microsoft word, wordpad, Notepad de windows y Adobe PageMaker. Si se obliga a escribir manualmente el código, aprenderá mucho más de cerca del estilo de programación que si usa una aplicación generadora de HTML
Etiquetas y atributos. Este es uno de los procesos fundamentales que le permitirá llevar a feliz termino la programación, es importante como todo programa conocer que cada una de las etiquetas utilizadas tienen sus propios valores o parámetros a los que se llama atributos y por lo general se presentan encerrados entre paréntesis angulares (< >) aparecen siempre en pares como <HTML>... </HTML> Presentemos a continuación el desarrollo de un pequeño programa para que puede visualizar su desarrollo: <!DOCTYPE “HTML 3.2//EN”> <HTML> <HEAD> <TITLE>ESTA ES UNA TÉCNICA DE GRÁFICOS?</TITLE> </HEAD> <BODY> <H1 ALIGN=LEFT> TÉCNICA DE GRÁFICOS </H1> </BODY> </HTML>
El usuario debe definir la forma de programación en mayúsculas o minúsculas no importa pero debe hacerlo en forma uniforme como el ejemplo, además es necesario mantener la sangría en los mismos para poder visualizar cada una de la etiquetas abiertas y así de esta forma poder mantener un control estricto de etiquetas abiertas y cerradas por que si no sucede esto se podría incurrir en errores a la presentación de la hoja. Es fácil de observar que el atributo ALIGN=LEFT es un valor para la etiqueta <H1> El atributo se inserta dentro de la etiqueta La etiqueta usa los valores predeterminados si usted no incluye atributos. Autor. Ing. Oscar Marcelo Yumiceba Asquel Teléfono 09-3-743-345 3 978-900 ext. 2550 Mail: jacutraguta@hotmail.com
Pag # 11
Las etiquetas son el mismo lenguaje de programación HTML, los atributos son valores o paráremos opcionales de esas etiquetas. Todo programador debe considerar a HTML como un lenguaje similar al Basic, Pascal, FoxPro, motivo principal para que analice todas las etiquetas y atributos necesarios para emprender este corto viaje, Si usted se inserta dentro del HTML podrá observar que existe muchas otras etiquetas de las que veremos en este libro, sin embargo más adelante haremos referencia a otras etiquetas utilizadas en HTML 3.2 <!DOCTYPE “HTML 3.2//EN”> <! -- Creado por Ing. Marcelo Yumiceba 3/15/2000 --- > <HTML> <HEAD> <TITLE> TECNICAS DE APLICACION 217 </ TITLE> </HEAD> <BODY TEXT=·”#000000” bgcolor=‘#FFFFFF” vlink=‘#FF0000” • ALINK=‘#FF0000”> <HR> <IMG src=‘gear.gif? BORDER=0 ALING=RIGHT> <H4> Departamento de Tecnicas Gráficas </H4> <H1> TG 217 Drawing System </H1> <H3> Lab Assignments<H3> <UL> <L1><A HREF=“index.html”>Course Description </A></L1> <L1><a HREF=“217_lay.html”>Weekly layout </A></L1> <L1><A HREF=“217_ske.html”>Sketching </A></L1> </UL> </BODY> </HTML>
Una de las cosas mas frustrantes sea el programar una página y que después salten los errores debido a una equivocación al momento de digitar algún carácter, pero para aquellas personas dedicadas a la programación eso es normal y hay que revisar una y otra vez hasta que se concluya el programa.. Debe asegurarse que cada etiqueta empiece y termine <H1> </H1> correctamente, por lo general la etiqueta que causa problemas es la final, pero de hecho también causan errores los caracteres mal digitados involuntariamente. Cuando la página no aparece correctamente en el navegador, busque los errores de dedo y las etiquetas que dejó abiertas. Comúnmente toda programación requiere de documentación que debe ser escrita como respaldo, HTML cuenta con una etiqueta especial que permite insertar líneas de comentario que pasa por alto la programación, las líneas de comentario empiezan <! y terminan con > en el programa anterior existe un comentario <! -- Creado por Ing. Marcelo Yumiceba 3/15/2000 --- > En el inernet usted puede encontrar otras ayudas para complementar su programación: http://members.aol.com/teachemath/class.htm http://www.woodhill.co.uk/html/html.htm http://www.book.uci.edu/staff/styleguide.html http://www.interlink-2000.com/guide.to-pubñishing-html.html http:// www.emerson.emory.edu/services/html/html.html http:// www.mcp.com/general/workshop/ http:// www.sirius.com/-paulus/html130.html
Estructura básica Autor. Ing. Oscar Marcelo Yumiceba Asquel Teléfono 09-3-743-345 3 978-900 ext. 2550 Mail: jacutraguta@hotmail.com
Pag # 12
Las estructuras de un documento HTML se designan con las etiquetas <DOCTYPE>, <HTML>, <HEAD> Y <BODY>, estas etiquetas se conoce como etiquetas de estructura del documento ya que definen y delimitan las partes y secciones principales del mismo La primera línea que debe ir en cualquier documento es <DOCTYPE> el mismo que especifica la versión de HTML que se esta usando y a que organización rectora y especificaciones se adapta el documento. <!DOCTYPE “HTML 3.2//EN”>
Esta línea indica que el archivo es HTML 3.2 Para que el navegador abra el archivo HTML se debe decir que se trata de este archivo a través del uso de la etiqueta <HTML> señalada al principio del archivo y al final con la etiqueta de cierre </HTML> el resto de etiquetas deben seguir a continuación La sección de encabezado del documento HTML describe las diversas características del mismo al igual que los elementos de la portada de un libro o el encabezado de una carta. Las etiquetas válidas de las etiquetas <HEAD> .... </ HEAD> son TITLE, ISINDEX (búsqueda sencilla de palabras clave), BASE (Define el URL absoluto que se usa para vínculos con URL’s relativos, STYLE (usada con las hojas de estilo), SCRIPT (reservada para el usos del lenguaje scripts), META (suministra información que no puede ponerse en ninguna otra parte del documento)Y LINK (usada para definir relaciones independientes de la página actual con otros documentos de la estructura web. Quizás la etiqueta mas usada es TITLE y se define para una línea breve de titulo la cual se despliega en al barra del titulo de navegador. Debe asegurarse que no exceda de 60 caracteres
Elementos del cuerpo El cuerpo contiene el texto o documento de la página que se va a presentar. Las marcas de comienzo y final de cuerpo son <BODY> y </BODY> respectivamente. Esta marca permite el atributo BACKGROUND="imagen" para activar una imagen contenida en un fichero como fondo del documento. Los elementos que pueden aparecer en el cuerpo se describen a continuación :
Encabezados o títulos Los encabezados o títulos son marcas que se emplean para dividir en texto en secciones, o para expresar títulos destacados. Las marcas empleados por los encabezados son <Hx> titulo </Hx>, siendo x un número entre 1 y 6. El título más grande es el 1, y el más pequeño el 6. Normalmente, se suelen representar con letra negrita y se alinean a la izquieda. Permiten el atributo ALIGN="modo" para alinearlo, con los valores posibles de LEFT, RIGHT y CENTER, para alinear a la izquierda, derecha y centro respectivamente. (Por defecto es LEFT).
Definición de bloques Para definir y separar bloques de texto se emplean una serie de marcas que definen párrafos, texto preformateado o bloques con un significado especial como direcciones o citas. También es posible utilizar marcas para saltos de línea y para insertas líneas horizontales. Las marcas de bloque son las siguientes: • <P> párrafo </P> : Se utiliza para separar párrafos, ya que en HTML todo el texto es contínuo y necesita saber como cortar las líneas. Esta marca acepta opcionalmente el atributo ALIGN="modo", pudiendo tomar modo los valores LEFT, RIGHT y CENTER para alinear a la izquierda, derecha y centro respectivamente. Si se omite, por defecto alinea a la izquierda (LEFT). Autor. Ing. Oscar Marcelo Yumiceba Asquel Teléfono 09-3-743-345 3 978-900 ext. 2550 Mail: jacutraguta@hotmail.com
Pag # 13
•
• • •
•
<PRE> texto_preformateado </PRE> : Permite introducir en el documento texto preformateado, es decir, el texto que haya dentro de esta marca aparecerá tal y como se haya escrito, respetando los saltos de línea, retornos de carro, tabulaciones, etc. Esta marca acepta opcionalmente el atributo : WIDTH=numero para indicar el nº máximo de caracteres po línea para que el visor ajuste el tamaño y tabulación del texto. <ADDRESS> direccion_e-mail </ADDRESS> : Se utiliza para indicar un anclaje a una dirección electrónica o e-mail, y suele representarse en letra cursiva. <BLOCKQUOTE> texto </BLOCKQUOTE> : Indica que el texto es una cita. Actua como un sangrado, con tabulaciones a la izquierda y a la derecha. <BR> : Este elemento solo tiene marca inicial, y se utiliza para que el visor salte de línea en el punto del documento en el que encuentre este elemento. Opcionalmente permite el atributo : CLEAR="modo", con el objetivo de indicar donde debe comenzar la siguiente línea en el caso de distribuir el texto alrededor de una imagen, pudiendo tomar modo los valores LEFT, RIGHT y ALL. LEFT indica que la siguiente línea ha de comenzar tan pronto como el margen izquierdo esté libre. RIGHT hace los mismo pero con respecto al margen derecho. ALL no comienza una línea hasta que los dos márgenes están libres. <HR> : Este elemento solo tiene marca inicial, y se emplea para dibujar una línea horizontal dentro del documento, usando caracteres o gráfico, dependiendo del visor utilizado. Esta marca permite varios atributos, todos opcionales, que son los siguientes: SIZE=numero_pixeles para indicar el nº de pixeles de ancho o grosor que se desea que tenga la línea. WIDHT=numero_o_porcetaje para indicar la longitud de la línea, que por defecto es todo el área de visualización de la página. Si se indica en número, se especifica en pixeles, y si se indica en porcentaje, este porcentaje debe de ir seguido del símbolo %. ALIGN="modo" para indicar el modo de alineación de la línea, pudiendo tomar modo los valores LEFT, RIGHT y CENTER, para alinearse a la izquierda, derecha o centro respectivamente. Por defecto es a la izquierda (LEFT). NOSHADE para especificar que la barra debe ser sólida, es decir, sin efectos de sombra.
Marcado lógico de frases Existen varias marcas para indicar que una palabra o frase tiene un significado especial. Estas marcas son las siguientes : • <CITE> texto </CITE> : Indica que el texto es una cita, y generalmente se representa en cursiva • <CODE> texto </CODE> : Lo marcado representa un ejemplo de código dentro del texto. Suele usar el tipo de letra de caja fija. • <EM> texto </EM> : Denota énfasis. Generalmente se representa con letra cursiva. • <KBD> texto </KBD> : Indica que el texto se introduce desde teclado y se representa usando el tipo de letra de caja fija. • <SAMP> texto </SAMP> : Significa ejemplo (SAMPle), representa los caracteres escritos de forma literal y utiliza el tipo de letra de caja fija. • <STRONG> texto </STRONG> : Denota énfasis fuerte y generalmente va en negrita. • <VAR> variable </VAR> : Lugar de una variable, por ejemplo la que se le pasa a un programa. Se representa usando el tipo de letra de caja fija.
Marcado tipográfico de frases Se utiliza para indicar el aspecto de una palabra o texto. Las marcas correspondientes son las siguientes : • <B> texto </B> : Establece el texto en negrita. • <I> texto </I> : Establece el texto en cursiva. Autor. Ing. Oscar Marcelo Yumiceba Asquel Teléfono 09-3-743-345 3 978-900 ext. 2550 Mail: jacutraguta@hotmail.com
Pag # 14
• <TT> texto </TT> : Establece el texto de caja fija o Texto de Teletipo. • <STRIKE> texto </STRIKE> : Establece el texto tachado. • <U> texto </U> : Establece el texto subrayado. • <BIG> texto </BIG> : Establece un texto grande. • <SMALL> texto </SMALL> : Establece un texto pequeño. • <SUB> texto </SUB> : Establece texto subíndice. <SUP> texto </SUP> : Establece texto superíndice. Esta es la verdadera sustancia del documento HTML que esta contenida dentro de <HTML>... </HTML> e inmediatamente despúes de </HEAD> esta definida por las etiquetas <BODY>..</BODY> Esta sección contiene las instrucciones para diseñar HTML, los gráficos, el texto, los elementos multimedia y otras cosas en la ventana del navegador. Los atributos que pueden usarse dentro la etiqueta <BODY> son las siguientes: BGCOLOR = “color” define el fondo del color del documento Web, color se reemplaza con valor hexadecimal TEXCOLOR= “color” define el fondo del texto normal del documento , color se reemplaza con valor hexadecimal LINKCOLOR=“color” define el color usado en los vínculos que no se han visitado, color se reemplaza con valor hexadecimal VLINK=“color” define el color usado en los vínculos visitados, color se reemplaza con valor hexadecimal ALINK=“color” define el color de realce usado cuando se hace clic en el vínculo, color se reemplaza con valor hexadecimal BACKGROUND=“imagen.gif” define una imagen que se usa como mosaico en el fondo del documento. Una excepción a la estructura básica es cuando se usan marcos en la página Web siempre que use en un documento Web, la etiqueta <FRAMESET> reemplaza a la sección del cuerpo del documento.
Etiquetas de bloque Son aquellas que permiten especificar el formato de disposición de línea o cuerpos de texto o gráficos. Se caracterizan por un espacio o línea en blanco antes y después del bloque. Todas las etiquetas de bloque hacen que el texto o los gráficos se agrupen de determinada manera. Los elementos de bloque producen un salto de línea entre las etiquetas de bloque y el siguiente elemento (por lo general, otro elemento de bloque). <!DOCTYPE “HTML 3.2//EN”> <! - - Creado por Ing. Marcelo Yumiceba 3/15/2000 - - > <HTML> <HEAD> <TITLE> TECNICAS DE APLICACION 217 </ TITLE> </HEAD> <BODY> <HR> <HR4> Departamento Tecnico de Graficacion 217 </HR4> <HR1>TG 217 Sistemas de Trabajo </HR1> <HR3> Sistemas de Laboratorio</HR3> <P><B>Laboratorio asigando semanalmente</B><P> <TABLE BORDER=3> ...... ...... Autor. Ing. Oscar Marcelo Yumiceba Asquel Teléfono 09-3-743-345 3 978-900 ext. 2550 Mail: jacutraguta@hotmail.com
Pag # 15 ...... </TABLE> <P> <HR> <BR><IMG SRC=“jm.gif” BORDER=0 HEIGHT=29 WIDTH=34 ALIGN=RIGHT></P> <P>Para mayor información contactese: <A HREF=“mailto:maryumi@hotmail.com”> • Marcelo Yumiceba. </A></P> </BODY> </HTML>
Hay muchas etiquetas de bloque que se pueda utilizar en un documento, entre las cuales están las siguientes: Encabezados definidos por <H1>... </H1> a <H6>... </H6> 1 párrafos grandes 2 medianos hasta llegar al 6 la mas pequeña Párrafos definidos por <P>.....</P> Divisiones de textos <DIV>..</DIV> 0 <CENTER>.... </CENTER> Líneas con viñetas, definidas por <UL>...</UL> Define el elemento que se muestra en lista y están dentro del UL <LI>....</LI> Listar ordenadas, definidas por <OL>...</OL> Lineas de definición, por <DL>...</DL> Bloques de textos preformateados, definidos por <PRE>... </PRE> Citas, definidas por <BLOCKQUOTE>....</BLOCKQUOTE> Direcciones, definidas por <ADRESS>.... </ADRESS> Líneas Horizontales, definidos por <HR> Saltos de líneas, definidos por <BR> Formularios interactivos, definidos por <FORM>....</FORM> Tablas, definidas por <TABLE> .... </TABLE>
Formato de párrafos y divisiones La etiqueta <P> define un bloque de texto que se despliega como párrafo en el documento. Antes de después del bloque se inserta un espacio en blanco, dentro de esta etiqueta se puede insertar el atributo a ALIGN para establecer la alineación del texto a la izquierda, a la derecha o al centro . <!DOCTYPE “HTML 3.2//EN”> <! -- Creado por Ing. Marcelo Yumiceba 3/15/2000 --- > <HTML> <HEAD> <TITLE> APLICACION PARA UN MODELO ITERACTIVO MULTIMEDIA </ TITLE> </HEAD> <BODY BGCOLOR=#004455 TEXT=”# FFFFFF LINK=#00AAFF VLINK=‘#AAAAAA -->” <BR> <CENTER><B>MODELO INTERACTIVO DE MULTIMEDIA PARA DESARROLLO</B> <BR> MARCELO YUMICEBA <BR> PROCESO UNIVERSITARIO <BR> UNIVERSIDAD ECUATORIANA </CENTER> <BR> <BR> <BR> <CENTER><I><B>EXTRACTO </B></I></CENTER> <P ALIGN=RIGHT> Este es el papel de un discurso elaborado para ................................... </P> <HR> <BR> <CENTER><I><B>INTRODUCCION </B></I></CENTER> <P> Al comienzo relativamente representaba una carga pesada.................. </P> Autor. Ing. Oscar Marcelo Yumiceba Asquel Teléfono 09-3-743-345 3 978-900 ext. 2550 Mail: jacutraguta@hotmail.com
Pag # 16 </BODY> </HTML>
La etiqueta DIV, permite definir bloques o secciones de un documento que deben ser tratados en forma similar, por ejemplo para que todo el texto de un párrafo específico o sección esté alineado a la izquierda o derecha. Puede usar DIV en lugar de P <DIV ALIGN=RIGHT> Este es el papel de un discurso elaborado </DIV> O en forma abreviada se puede hacer lo mismo con la etiqueta <CENTER>
Listas Las listas son en realidad otras marcas que permiten definir bloques, pero con unas características especiales. Las listas se utilizan para presentar de forma ordenada una serie de líneas. Existe varios tipos de listas, que son los siguientes: • Lista desordenada o Unordered List (<UL>) • Lista ordenada u Ordered List (<OL>) • Directorio o Directory (<DIR>) • Menú o Menu (<MENU>) • Lista de definición o Definition List (<DL>) Las listas desordenadas ponen delante de cada elemento de la lista un punto o un cuadro, mientras que las listas ordenadas ponen un nº de orden. Excepto en las listas de definición y en el menú, todos los casos son iguales. Escribiendo <LI> línea_o_descripción delante de cada nuevo elemento de la lista bastará para construir la lista. <LI> no tiene marca de fin. Ejemplo de uso de lista ordenada : <OL> <LI> Este es el elemento 1 <LI> Este es el elemento 2 </OL> Ejemplo de uso de lista desordenada : <UL> <LI> Este es el elemento 1 <LI> Este es el elemento 2 </UL> Las listas de definición permiten hacer definiciones especiales de cada uno de los elementos que forman la lista, mostrando la definición con una tabulación más que el elmento de la lista. Para ello solo basta con utilizar <DT> (Definition Term) para definir el elemento, y <DD> (Definition Data) para especificar su descripción. Estas marcas no tienen marca de fin. Ejemplo de uso de lista de definiciones : <DL> <DT> Término 1 <DL> Definición del término 1 <DT> Término 2 <DL> Definición del término 2 </DL> Existen unos atributos para controlar el aspecto de cada línea de la lista y los números en las listas ordenadas. Estos atributos son los siguientes : Para listas desordenadas (<UL>) • TYPE=simbolo : En las listas desordenadas se utilizan círculos para marcar cada línea. Esta marca va cambiando a medida que la lista se va anidando. Este atributo permite especificar que tipo de símbolo se quiere utilizar en las líneas independientemente del nivel de anidamiento. Esto se hace introduciendo como simbolo los valores disc para disco, circle para círculo o square para cuadrado. Autor. Ing. Oscar Marcelo Yumiceba Asquel Teléfono 09-3-743-345 3 978-900 ext. 2550 Mail: jacutraguta@hotmail.com
Pag # 17
Para listas ordenadas (<OL>) • TYPE=marca : En las listas ordenadas, la numeración es a partir de 1. Se puede especificar el tipo de marca que se desea con los valores a para letras en minúsculas, A para mayúsculas, i para números romanos en minúsculas, I para números romanos en mayúsculas, o 1 para números. • START=numero : Permite especificar cual ha de ser el primer número de la lista cuando no se desea que empieze por 1. Para las demás listas (<LI>) TYPE : Puede tomar los mismos valores que toma en la lista en la que se encuentra la línea. Cuando se especifica, cambia el tipo de lista para esa marca y las siguientes. Además, si la línea pertenece a una lista ordenada se puede utilizar el atributo VALUE, con el que se puede modificar el número para esa marca y las siguientes. El lenguaje de código HTML, soporta tres tipos diferentes de listas que pueden crear en sus documentos. Cada una tiene su propia etiqueta y su propia serie de atributos Lista con viñetas que se usan en las etiquetas <UL>..... </UL> Listas ordenadas que usan las etiquetas <OL>..... </OL> Listas de definición que usan las etiquetas <DL>..... </DL> Cabe señalar que las etiquetas LI se utilizan dentro de las etiquetas UL para definir cada elemento que se muestra en la lista. A estos se les llama elementos de la lista. Una lista puede contener varios elementos como usted quiera, pero con mas de cinco se vuelve poco efectiva. Además, puede cambian la viñeta predeterminada en toda la lista utilizando los atributos TYPE=DISC, TYPE=SQUARE Y TYPE=CIRCLE en la etiqueta <UL> para indicar respectivamente discos, cuadrados o círculos . <!DOCTYPE “HTML 3.2//EN”> <! -- Creado por Ing. Marcelo Yumiceba 3/15/2000 --- > <HTML> <HEAD> <TITLE> LISTADO DE DIFERENTES VIÑETAS </ TITLE> </HEAD> <BODY>” <H3>TECNICAS GRAFICAS</H3> <UL> <L1 TYPE=“CIRCLE”> Ingenieria de diseño gráfico </L1> <L1 TYPE=“SCUARE”> Ilustración </L1> <L1 TYPE=“DISC”> Publicación digital </L1> <UL> </BODY> </HTML>
Las listas ordenadas que utilizan las etiquetas <OL>...</OL> permiten crear listas con vínculos numéricos o alfabéticos. Sin embargo con los elementos de las listas ordenadas puede establecer si quiere una lista numérica o alfabética, con el atributo TYPE, en la lista ordenada existen las siguientes opciones: TYPE “1” Numérico (1,2,3) TYPE “A” Letras mayusculas (A;B;C) TYPE “a” Letras minúsculas (a;b;c) TYPE “I” Números romanos en mayúscula (I,II,III) TYPE “I” Números romanos en minúscula (i,ii,iii) <!DOCTYPE “HTML 3.2//EN”> <! -- Creado por Ing. Marcelo Yumiceba 3/15/2000 --- > Autor. Ing. Oscar Marcelo Yumiceba Asquel Teléfono 09-3-743-345 3 978-900 ext. 2550 Mail: jacutraguta@hotmail.com
Pag # 18 <HTML> <HEAD> <TITLE> EJEMPLO DE LISTADO ORDENADO </ TITLE> </HEAD> <BODY> <H3>TECNICAS GRAFICAS</H3> <OL> <L1> Ingeniería de diseño gráfico </L1> <L1> Ilustración </L1> <L1> Publicación digital </L1> <OL> <HR> <H3>TECNICAS GRÁFICAS</H3> <OL TYPE=“i”> <L1> Ingeniería de diseño gráfico </L1> <L1> Ilustración </L1> <L1> Publicación digital </L1> <OL> </BODY> </HTML>
El resultado es: TÉCNICAS GRÁFICAS</H3> 1. Ingeniería de diseño gráfico 2. Ilustración </L1> 3. Publicación digital </L1> TÉCNICAS GRÁFICAS</H3> i. Ingeniería de diseño gráfico ii. Ilustración </L1> iii. Publicación digital </L1>
Se utiliza las etiquetas <DL> para presentar una lista de definición, en combinación se usan las etiquetas <DT> que sirve para indicar el término que se presenta y <DD> se usa para agregar los comentarios del termino señalado
Texto preformateado Observe que las etiquetas <PRE> .... </PRE> permite que el texto se despliegue en la ventana del navegador tal como aparece en el archivo mismo del código HTML ASCII. El texto se despliega en una fuente monoespaciada, es decir de altura y ancho fijo. <!DOCTYPE “HTML 3.2//EN”> <! -- Creado por Ing. Marcelo Yumiceba 3/15/2000 --- > <HTML> <HEAD> <TITLE> USO DE TEXTO PREFORMATEADO </ TITLE> </HEAD> <BODY> <H3>TECNICAS GRAFICAS DE PROCEDIMIENTOS</H3> <PRE> Las misiones que se han emprendido para el estudio de varios sistemas para la detección de nuevos campos dentro del estudio de la informática han permitido al hombre desarrollar nuevas técnicas de información capaz de conquistar varios métodos Autor. Ing. Oscar Marcelo Yumiceba Asquel Teléfono 09-3-743-345 3 978-900 ext. 2550 Mail: jacutraguta@hotmail.com
Pag # 19 </PRE> </BODY> </HTML>
Citas y direcciones Para el uso de estas etiquetas tenemos dos opciones que son. <BLOCKQUOTE> que le permite formatear citas extensas en el documento. Esta etiqueta sangra automáticamente los márgenes de la cita para diferenciarla del resto del texto. y la etiqueta <ADRESS> que le permite escribir una dirección que automáticamente queda en cursivas.
Líneas Horizontales Una de las cosas que ayudan a organizar la información en su página y dividirla en secciones legibles son las líneas horizontales <HR> y quizás es uno de los elementos mas usados en las páginas Web y que combinados con otros atributos o controles puede usar para definirla. SIZE=y donde y específica el grosor de los pixeles, el valor predeterminado es 2 WITH=x donde x especifica la longitud horizontal o como porcentaje de la pantalla el valor predeterminado es 100% ALIGN=LEFT ALIGN=CENTER ALIGN=RIGHT determina la alineación NOSHADE Desactiva el efecto de biselado de la línea este efecto esta predeterminado.. <BODY> <HR SIZE=1> <HR SIZE=2> <HR SIZE=4> <HR SIZE=8> <HR WITH=200> <HR WITH=200 ALIGN=LEFT> <HR WITH=50%> <HR WITH=50% ALIGN=LEFT> <HR SIZE=8> <HR SIZE=8 NOSHADE> </BODY> </HTML>
Las etiquetas de texto Son aquellas que se emplean para formatear texto y colocar hipervinculos, gráficos y elementos de multimedia. Las etiquetas de texto a diferencia de las etiquetas de bloque no producen un espacio en blanco antes y después de un elemento Las etiquetas de texto pueden definirse en estilos físicos, lógicos y otros, los físicos afectan al formato del texto, mientras que la otra categoría permite insertar gráficos, vínculos y elementos multimedia.
Estilos físicos Estos estilos tratan de cambiar las características de una fuente determinada, como para crear letras negritas, cursivas o subrayadas. Los estilos físicos son directos requieren de una etiqueta de apertura y una de cierre <TT> Crea texto de teletipo o monoespaciado Autor. Ing. Oscar Marcelo Yumiceba Asquel Teléfono 09-3-743-345 3 978-900 ext. 2550 Mail: jacutraguta@hotmail.com
Pag # 20
<I>crea texto en cursivas <B> Crea texto en negrita <U> Crea texto subrayado <STRIKE> Crea texto tachado <BIG> Interpreta el texto mas grande que el que lo rodeo <SMALL> Interpreta el texto mas pequeño que el que lo rodeo <SUB> Trata de colocar el texto como subíndice <SUP> Trata de colocar el texto como superíndices <BODY> <UL> <LI>Este es un ejemplo de: <TT>Texto tipo monoespaciada</TT></LI> <LI> Este es un ejemplo de:<B>Negrilla </B></LI> <LI> Este es un ejemplo de:<I>Texto itálica</I></LI> <LI> Este es un ejemplo de:<u>Texto subrayado</u></LI> <LI> Este es un ejemplo de:<STRIKE>Texto tachado</STRIKE></LI> <LI> Este es un ejemplo de:<BIG>Gran texto</BIG></LI> <LI> Este es un ejemplo de:<SMALL>texto pequeño</SMALL></LI> <LI> Este es un ejemplo de:<SUB>Texto subíndice</SUB></LI> <LI> Este es un ejemplo de:<SUP>Texto superindice</SUP></LI> </UL> </BODY>
Estilos lógicos Usar los estilos lógicos es lo mismo que los estilos físicos, Los siguientes son algunas de las etiquetas de estilo lógico. <EM> Interpreta la fuente con énfasis <STRONG> Interpreta la fuente con énfasis fuerte <DFN> Especifica un ejemplo que define el texto estilizado <CODE> Interpreta la fuente como si representara código extraído <SAMP> Interpreta la fuente como si representara la salida de un programa o aplicación <KBD> Interpreta la fuente como si representara texto que el lector debe escribir <VAR> Interpreta la fuente como si representara variables, argumentos comandos o instrucciones. <CITE> Interpreta la fuente como cita o referencia a otra fuente de información <BODY> <UL> <LI>Este es un ejemplo de: <EM>Texto tipo monoespaciada</EM></LI> <LI> Este es un ejemplo de:<STRONG>Negrilla </STRONG></LI> <LI> Este es un ejemplo de:<DFN>Instante de termino definido</DFN></LI> <LI> Este es un ejemplo de:<CODE>Codigos</CODE></LI> <LI> Este es un ejemplo de:<SAMP>Fuera del programa</SAMP></LI> <LI> Este es un ejemplo de:<KBD>Texto de entrada para el usuario</KBD></LI> <LI> Este es un ejemplo de:<VAR>Argumentos de Variables</VAR></LI> <LI> Este es un ejemplo de:<CITE>Citacion y Referencia</SUB></LI> </UL> </BODY> Cuando utiliza un estilo lógico, éste le indica al navegador que la fuente debe interpretarse con énfasis. La forma en que el navegador interprete realmente la fuente está determinada por la estructura interna Autor. Ing. Oscar Marcelo Yumiceba Asquel Teléfono 09-3-743-345 3 978-900 ext. 2550 Mail: jacutraguta@hotmail.com
Pag # 21
del propio navegador. Cada navegador sabe que para dar énfasis a una cadena de texto determinada, debe cambiar los atributos de la fuente.
Imágenes Con imágenes usted puede pacer casi cualquier cosa que desee en sus páginas Web, sin embargo como aprendió, debe integrar con sumo cuidado los gráficos, para no ser gravoso con el hardware o la apariencia del usuario Las imágenes en línea pueden integrarse dentro del documento o página Web que esté cargada en el navegador, la etiqueta básica para integrar un gráfico en <IMG> es una etiqueta muy importante. Cuando use gráficos se le presentarán muchas opciones, ya lo quiera alineado a la izquierda, con un borde alrededor o con una cantidad de espacio específica alrededor, todas estas alternativas se pueden controlar con los atributos de la etiqueta <IMG> y son los siguientes: SRC
Define el nombre y ruta del archivo de imagen que se incluirá en la página Web. Este atributo es necesario en la etiqueta <IMG> ALT Específica un texto alterno que se despliega en los graficadores . también despliega el texto correspondiente mientras esta bajando el gráfico. Aunque el atributo ALT no es obligatorio, debería ir serlo. ALIGN Controla la alineación de la imagen en relación con el texto que lo rodea. Las opciones válidas son ALIGN=TOP, MIDDLE, BOTTOM, LEFT, RIGHT. WITH Especifica el ancho deseado de la imagen en pixeles. Cuando se usa en combinación con el atributo HEIGHT, el navegador muestra un cuadro en blanco en su ventana, mientras se esta cargando la imagen. Si también se usa el atributo ALT, el texto aparece en el cuadro en blanco. HEIGHT Especifica la altura deseada de la imagen en pixeles. Cuando se usa en combinación con el atributo WITH, el navegador muestra un cuadro en blanco en su ventana, mientras se está cargando la imagen. Si también se usa el atributo ALT, el texto aparece en el cuadro en blanco. BORDER Especifica el ancho del borde de la imagen. El valor predeterminado es BORDER=2 Con BORDER=0 se suprime el borde. HSPACE Específica en pixeles la cantidad exacta de espacio en blanco que habrá de dejarse a la izquierda y a la derecha de la imagen. El valor predeterminado es un número muy pequeño, entre 0 y 1 VSPACE Específica en pixeles la cantidad exacta de espacio en blanco que habrá de dejarse para arriba y por debajo de la imagen. El valor predeterminado es un número muy pequeño, entre 0 y1 USEMAP Especifica que la imagen pueda ser utilizada por una mapa de imagen del lado del cliente. este atributo se usa en combinación con la etiqueta MAP ISMAP Especifica que la imagen es un mapa de imagen. Las regiones de la imagen se definen como vínculos de hipertexto LOWSRC Especifica una imagen de baja resolución que se despliega mientras está bajando la imagen real, de mayor resolución. <TITLE>Uso de Imágenes</TITLE> </HEAD> <BODY> <H3 ALIGN=CENTER>Graficos del desierto de Arizona</H3> <CENTER> <IMG SRC=“cactue.gif WITH 135 HEIGHT=200 BORDER=3 HSPACE=20> <IMG SRC=“figger.gif WITH 135 HEIGHT=200 BORDER=3 HSPACE=20> <IMG SRC=“nonflow.gif WITH 135 HEIGHT=200 BORDER=3 HSPACE=20> </CENTER> </BODY>
Autor. Ing. Oscar Marcelo Yumiceba Asquel Teléfono 09-3-743-345 3 978-900 ext. 2550 Mail: jacutraguta@hotmail.com
Pag # 22
Imágenes, Mapas Los mapas de selección o Image Maps son muy utilizados en las páginas WEB. Un mapa de selección consiste en permitir a los usuarios a otros documentos (tal y como los anclajes de los hiperenlaces seleccionando en distintas áreas de una imagen. El elemento para definir los mapas es <MAP>, junto con <IMG> al que se le añade el atributo USEMAP para indicar que se debe usar la descripción para gestionar el mapa. Las regiones de cada imagen se describen usando el elemento <MAP>. Este eemento describe cada región de la imagen e indica a dónde apunta. El formato básico de este elemento es el siguiente : <MAP NAME="nombre_mapa"> <AREA [SHAPE="figura"] COORDS="x,y,...." [HREF="referencia" | NOHREF]> </MAP> El atributo NAME indica el nombre del mapa, para poder ser referenciado desde los elementos <IMG>, es por tanto necesario. El elemento <AREA> sirve para indicar el tipo de figura (SHAPE), las coordenadas de la misma (COORDS) (el nº de ellas depende del tipo de figura) y la referencia a emplear cuando se selecciona un punto del área de la imagen (HREF o NOHREF). Los tipos de figura (SHAPE) que se pueden utilizar y el formato de sus coordenadas (COORDS) son los siguientes : • RECT : Rectángulo. Las coordenadas se dan de la forma "izquierda, derecha, arriba, abajo. Por ejemplo, para especificar el área total de una imagen de 100 * 100 pixels, las coordenadas serían "0, 0, 99, 99". • POLY : Polígono. Las coordenadas se dan de la forma "x1, y1, x2, y2, ......". El browser cierra el polígono automáticamente. • CIRCLE : Círculo. Las coordenadas de los círculos se definen por un punto central y un radio, en tres valores : coordenadas x, y y el valor del radio. • DEFAULT : Por defecto, rectángulo. NOTA : x = Fila ; y = Columna El atributo HREF="referencia" indicará a donde ir si se selecciona en su área, mientras que el atributo NOHREF no debe hacer nada si se selecciona su área. Hay que indicar que los anclajes relativos se expandirán tomando como base el URL de la descripción del mapa (si hay una marca BASE en el documento que contiene la descripción, será ese URL el empleado, no el del documento desde el que se referencia). Si varios elementos <AREA> intersectan, la que toma precedencia es la que aparece en primer lugar en el mapa. El atributo USEMAP indica que la imagen es un mapa gestionado por el cliente, aunque puede ser usado junto al atributo ISMAP, de manera que un browser que no soporte USEMAP accederá al mapa del servidor. El valor del atributo indica el mapa a emplear con la imagen, en un formato similar al del atributo HREF en los anclajes. Así, una referencia a una mapa que comience con una almoadilla (#) se encontrará en el mismo documento al que hace referencia. Ejemplo : <HTML> <HEAD> <TITLE>Ejemplos de mapas de seleccion</TITLE> </HEAD> <BODY> <!-- Mapa de una imagen de 160 * 160 pixels --> <MAP NAME="MapColores"> <AREA SHAPE="POLY" COORDS="10, 49, 29, 10, 49, 49" HREF="Rojo.html"> <AREA SHAPE="RECT" COORDS="60, 10, 99, 49" HREF="Verde.html"> Autor. Ing. Oscar Marcelo Yumiceba Asquel Teléfono 09-3-743-345 3 978-900 ext. 2550 Mail: jacutraguta@hotmail.com
Pag # 23
<AREA SHAPE="CIRCLE" COORDS="130, 30, 20" HREF="Azul.html"> <AREA SHAPE="RECT" COORDS="0, 0, 159, 159" HREF="Blanco.html"> <!-- El último área hace que todo lo que no estaba marcado por los anteriores vaya a Blaco.html --> </MAP> <H1>Ejemplos de mapas de seleccion. Seleccione un color</H1> <P>Este mapa solo funcionará si su browser soporta el control de mapas</P> <IMG SRC="colores.gif" USEMAP="#MapColores"> <P>Este mapa funcionará independientemente del tipo de visor</P> <A HREF="/cgi-bin/imagemap/colores"> <IMG SRC="colores.gif" USEMAP="#MapColores" ISMAP> </A> <P>Si su browser no soporta mapas de usuario, pulse la imagen para ir a una página con el mismo contenido en tipo texto</P> <A HREF="/colores.html"> <IMG SRC="colores.gif" USEMAP="#MapColores"> </A> </BODY> </HTML>
Anclas La capacidad de hipertexto o hipermedia no sería posible sin la etiqueta de ancla <A> permite que prácticamente cualquier cosa sea un vínculo de activación con el mundo externo o con otra página del mismo sitio. Puede utilizarse con gráficos, texto y elementos multimedia. A esta etiqueta se considera como vínculo externo o interno, esto significa que cuando el usuario hace clic en el vínculo, éste lo lleva a otro sitio o a otra página. Para convertir en Hipervínculo a cualquier elemento, debe utilizar diversos atributos de la etiqueta <A>: NAME Se usa para apuntar hacia un punto específico del documento Web. Las opciones válidas del atributo NAME son cadenas de texto , como parte1, parte2, parte3. HREF Se usa para especificar URL con el cual esta vínculado el elemento. Al hacer clic en el, el navegador se va a la dirección que se especificó con el atributo HREF. REL Define la relación hacia adelante de la página actual. Es decir, la siguiente página dentro de la estructura del sitio. REV Define la relación inversa de la página actual TITLE Se usa como titulo del recurso vinculado. <!DOCTYPE “HTML 3.2//EN”> <! -- Creado por Ing. Marcelo Yumiceba 3/15/2000 --- > <HTML> <HEAD> <TITLE> EJEMPLO DE LISTADO ORDENADO </ TITLE> </HEAD> <BODY> <H3>TECNICAS GRÁFICAS</H3> <UL> <L1> <A HREF=“eg.html”>Ingeniería de diseño gráfico </A></L1> <L1> <A HREF=“ill.html”>Ilustración </A></L1> <L1> <A HREF=“dp.html”>Publicación digital </A></L1> </UL> <BODY> </HTML>
Autor. Ing. Oscar Marcelo Yumiceba Asquel Teléfono 09-3-743-345 3 978-900 ext. 2550 Mail: jacutraguta@hotmail.com
Pag # 24
A continuación veremos una serie de etiquetas <A> para insertar imágenes que son los elementos de navegación. A su vez, las anclas están anidadas dentro de las etiquetas de bloque. <!DOCTYPE “HTML 3.2//EN”> <! -- Creado por Ing. Marcelo Yumiceba 3/15/2000 --- > <HTML> <HEAD> <TITLE>UNAS GRANDES VACACIONES </ TITLE> </HEAD> <BODY>BGCOLOR=“#FFFFFF” TEXT=“#FFFFFF” LINK=“#334557” <CENTER> <IMG SRC=“6a.gif” BORDER=0 WIIDTH=669 HEIGHT=254> </CENTER> <HR SIZE=4> <CENTER> <A HREF=“dine.html”><IMG SRC=“6b.gif” BORDER=0 HSPACE=30></A> <A HREF=“shop.html”> <IMG SRC=“6c.gif” BORDER=0 HSPACE=30></A> <A HREF=“rec.html”> <IMG SRC=“6d.gif” BORDER=0 HSPACE=20></A> <A HREF=“night.html”><IMG SRC=“6e.gif” BORDER=0 HSPACE=20></A> </CENTER> <HR SIZE=4> <CENTER> <A HREF=“dine.html”>[Cenas </A> &nbsp; &nbsp <A HREF=“shop.html”>[Tiendas </A> &nbsp; &nbsp <A HREF=“rec.html”> [Recreacion </A>&nbsp; &nbsp <A HREF=“night.html”>[Vidanocturna </A>&nbsp; &nbsp </CENTER> <BODY> </HTML>
Observe este ejemplo, primero se establece las etiquetas de bloque y, después, las etiquetas de texto necesarias se anidan dentro de las etiquetas de bloque existentes. Por último se anidan las etiquetas de texto dentro de las otras etiquetas de texto. Oblíguese a diseñar de este modo. Le facilitará mucho construir sus páginas. Cuando cree vínculos externos, tenga en mente que puede usar el atributo HREF para vincular con sitios, páginas específicas y con direcciones de correos electrónicos. En ejemplos anteriores vio la etiqueta <A HREF=“xxxx”> usada para vincular con un sitio externo, como el siguiente: <A HREF=“http//www.teach.purdue.edu>Escuela de tecnología</A> Para ingresar la dirección de un correo electrónico en su página, escriba el código como sigue: <A HREF=“mailto:maryumiceba.hotmail,com”>Correo electrónico Marcelo Yumiceba </A>
Vínculos internos Los vínculos internos son aquellos que se dirigen a otra sección del mismo documento. Para crear un vínculo debe crear dos cosas. Primero debe establecer el punto de “destino” en el documento. Esto se hace con la etiqueta <A> y el atributo NAME. por ejemplo: <A NAME=”destino”>Este es el texto que aparece en el punto de destino.</A> El segundo elemento que debe crear es el propio vínculo. Lo mas posible es que, al principio de la página, crea una lista de elementos de vínculo, cada uno de los cuales representa el vínculo hacia el punto de destino. El elemento de la lista que está vinculado con el punto de destino seria: .... <LI><A HREF=“#destino”> Ir al punto de destino,</A> .... Autor. Ing. Oscar Marcelo Yumiceba Asquel Teléfono 09-3-743-345 3 978-900 ext. 2550 Mail: jacutraguta@hotmail.com
Pag # 25
Cuando el documento se visualiza en el navegador, esta lista se como cualquier otro vínculo de hipertexto. Sin embargo, si el usuario hace clic en ella, el vínculo lo lleva hacia abajo del documento. Suponga que un documento tiene cinco secciones principales, que sean en resumen, la introducción, la descripción, las conclusiones y la bibliografía. Podría incrustar vínculos de destino en los encabezados de esos elementos. usando el código como el siguiente: .... <H3><A NAME=“resumen”> Resumen </A></H3> .... <H3><A NAME=“intro”> Introducción </A></H3> .... <H3><A NAME=“descrip”> Descripción </A></H3> .... <H3><A NAME=“concl”> Conclusiones </A></H3> .... <H3><A NAME=“biblio”> Biblioteca </A></H3> .... Después al inicio del documento debe crear una lista de elementos que le permitirá a sus lectores pasar rápidamente a las diversas secciones del documento, el código seria: <DL TYPE=“i”> <LH><B>Tabla de contenido</B><BR> <LI><A> HREF=#”resumen “>Resumen<A></LI> <LI><A> HREF=#”Intro“>Introducción</A></LI> <LI><A> HREF=#”descrip“>Descripción</A></LI> <LI><A> HREF=#”concl“>Conclusiones</A></LI> <LI><A> HREF=#”biblio“>Bibliografia</A></LI> </DL>
Uso de gráficos y mapas de imagen Las imágenes de trama dependen del dispositivo, lo que significa que, cuando usted empieza a crearlas, los dpi están determinados en relación con el tamaño de la imagen desde un principio. Al agrandar una imagen de trama, los puntos se separan y hay menos puntos por pulgada. Si se reduce su tamaño, los puntos se juntan y habrá un numero mas fino de puntos por pulgada. Cuando usted reduce el tamaño de una imagen, en muchos casos se eliminan datos (puntos) lo que va en decrimento de la imagen. Las imágenes de trama que se encuentran en Web no necesitan tener mas de 72 dpi ya que esta es la cantidad máxima que se puede desplegar en el monitor de la computadora. Sin embargo si decide usar un gráfico que haya sido creado para otro propósito, como un medio impreso, lo mas probable es que la imagen una resolución mayor que 72 dpi o que su tamaño sea bastante grande. Para diseñar imágenes para su distribución en Web, debe usar un editor de imágenes con el que pueda reducir el numero de puntos por pulgada. El último atributo de imagen por el cual debe preocuparse es el de la profundidad de bit, es simplemente el número de bits permitidos para describir la imagen. Mientras más bits haya disponibles, más descriptiva es la imagen. Mientras menos bits, menos descriptiva.
Insertar imágenes La parte mas interesante empieza una vez que creó las imágenes y ponerles exactamente como uno desea es la parte que mas agota la paciencia. A pesar de esto se señalaran os puntos mas importantes para que sea más fácil. Autor. Ing. Oscar Marcelo Yumiceba Asquel Teléfono 09-3-743-345 3 978-900 ext. 2550 Mail: jacutraguta@hotmail.com
Pag # 26
Como aprendió la etiqueta <IMG> tiene muchos atributos, los primeros son HEIGHT y WITH y se crearon para ser utilizados en una sola imagen, por ejemplo imagínese una imagen de 100 x 100 pixeles y después usar los atributos HEIGHT y WITH para insertarla a otro tamaño, esto no beneficia al aspecto de la página <CENTER> <IMG SRC=“gear.gif” HEIGHT=90 WITH=100 BORDER=0 HSPACE=30> <IMG SRC=“gear.gif” HEIGHT=180 WITH=200 BORDER=0 HSPACE=30> <IMG SRC=“gear.gif” HEIGHT=270 WITH=300 BORDER=0 HSPACE=30> </CENTER> No use los atributos HEIGHT y WITH para ajustar el tamaño de la imagen ni en la etiqueta <IMG>, haga este ajuste en el editor de gráficos o imágenes e insértele a su verdadero tamaño, usted no despreciará el ancho de banda. Codifique su lenguaje HTML para usar el tamaño exacto y verdadero de las imágenes en sus páginas.
Alineación y espaciado Los atributos que controlan la alineación en la etiqueta <IMG> son ALIGN, VSPACE y HSPACE. Pude utilizar los tres atributos <!DOCTYPE “HTML 3.2//EN”> <! -- Creado por Ing. Marcelo Yumiceba 3/15/2000 --- > <HTML> <HEAD> <TITLE>Alineación de imágenes</ TITLE> </HEAD> <BODY>BGCOLOR=“#FFFFFF” TEXT=“#000000” <HR SIZE=50%> <BR> <H3 ALIGN=CENTER> Técnicas gráficas de alineación</H3> <HR> <BR> <P><IMG SRC=“purdue.gif” ALIGN=LEFT HSPACE=10> <BR> Para el estudio de este tipos de técnicas es necesario que los estudiantes tengan nociones prácticas de como aplicar las imágenes en su computador y es necesario que se dediquen Estoy consciente y reconocemos el esfuerzo puesto para desarrollar la investigación</P> <HR> <DL> <DT>Diseños gráficos</DT> <DD> El estudio de varias técnicas adicionales para el manejo de las imágenes le permitirán al usuario tener mayor ventaja sobre aquellas que inician con el uso de las páginas Web</DD> <DT>Ilustración</DT> <DD> Pienso que el estres visual que se produce al presentar una imagen requiere de varias técnicas en las que concentraremos todos los esfuerzos para encontrar todos los mecanismos para superar estas debilidades</DD> <DT>Publicaciones digitales</DT> <DD>Para enseñar métodos efectivos de información que se puedan imprimir paginas incluyendo imágenes requiere editar publicaciones y métodos de publicaciones computarizadas que estén combinadas con anticipación </DD> </DL> <BODY> </HTML>
Es muy importante que haga un sondeo y descubra cual es la resolución típica de pantalla a la que el público puede ver las páginas. Quizá quiera poner la resolución de pantalla sugerida directamente en la página Web. Tal vez prefiera especificar un parámetro de ajuste , o “indicador de tamaño” para que el público pueda ajustar a su navegador en el tamaño designado Autor. Ing. Oscar Marcelo Yumiceba Asquel Teléfono 09-3-743-345 3 978-900 ext. 2550 Mail: jacutraguta@hotmail.com
Pag # 27
Uso de los Atributos ALT y LOWSRC Estos atributos permiten que la gente con navegadores no gráficos y vínculos lentos puedan ver sus páginas Web en forma eficiente. ALT permite especificar un título para que aparezca en lugar de la imagen en los navegadores no gráficos, o cuando está desactivada la opción de imágenes en línea. LOWSRC que no tiene soporte en todos los navegadores permite desplegar una imagen de baja resolución mientras se transfiere la imagen de alta resolución. Para usar el atributo ALT las líneas de código serían como sigue: <IMG SRC=6b:gif” BORDER=0 HSPACE=30 ALT “Imagen de la Cena”> <IMG SRC=6c:gif” BORDER=0 HSPACE=30 ALT “Imagen de Tiendas”> <IMG SRC=6d:gif” BORDER=0 HSPACE=20 ALT “Imagen de Recreación”> <IMG SRC=6e:gif” BORDER=0 HSPACE=20 ALT “Imagen de vida nocturna”> Para el uso del atributo LOWSRC se agregaría el siguiente atributo: <IMG SRC=6b:gif” BORDER=0 HSPACE=30 ALT “Imagen de la Cena” LOWSRC=“6b_low.gif”> <IMG SRC=6c:gif” BORDER=0 HSPACE=30 ALT “Imagen de Tiendas” LOWSRC=“6c_low.gif”> <IMG SRC=6d:gif” BORDER=0 HSPACE=20 ALT “Imagen de Recreación” LOWSRC=“6d_low.gif”> <IMG SRC=6e:gif” BORDER=0 HSPACE=20 ALT “Imagen de vida nocturna” LOWSRC=“6e_low.gif”>
Tenga presente que el objetivo del atributo LOWSRC es hacer que la página que se transfiere aparezca más rápidamente. Conviene usar este atributo con imágenes muy grandes mayores a 30 Kb. Con imágenes pequeñas deje la carga original.
Creación de mosaicos de fondo Uno de los atributos de la etiqueta <BODY> es BACKGROUND, que permite especificar una imagen que se coloca en mosaico en el fondo de la ventana del navegador. Al igual que el atributo SRC de la etiqueta <IMG>, BACKGROUND simplemente especifica la trayectoria y la imagen que va a utilizarse. Esto puede causarle problemas si es que usted quiere utilizar otras imágenes mezcladas o suaves en el frente, además debe tener cuidado en el fondo del mosaico para que no opaque ni domine el texto y demás elementos desplegados sobre los mosaicos. Si desea utilizar un fondo de mosaico o incluso un color plano de fondo, le conviene aprovechar las características de transparencia del formato GIF y es un imagen especial en la que el color de la misma está asignado como transparente y permite ver los elementos del fondo. Para crear un GIF transparente en Photoshop 3.0 se necesita un plug-in especial para poder guardarlo en formato GIF89a. Puede adquirir este filtro en el sitio Web de Adobe, en http://www.adobe.com. En la versión 4.0 de Photoshop, el formato GIF89a.tiene soporte directo en el software. <!DOCTYPE “HTML 3.2//EN”> <! -- Creado por Ing. Marcelo Yumiceba 3/15/2000 --- > <HTML> <HEAD> <TITLE>Uso de transparncias archivos GIF</ TITLE> </HEAD> <BODY>BGCOLOR=“#FFFFFF” TEXT=“#000000” <CENTER> <IMG SRC=“circle.gif” BORDER=0> </CENTER> Autor. Ing. Oscar Marcelo Yumiceba Asquel Teléfono 09-3-743-345 3 978-900 ext. 2550 Mail: jacutraguta@hotmail.com
Pag # 28 </BODY> </HTML>
Trabajo con mapas de imagen Como se puede observar cuando existen grafitos en las páginas Web y al hacer clic en cierta área, usted llega a una página, si hace clic en otra, llega a otro lugar. Cualquier gráfico que funcione de éste modo se llama mapa de imagen. Se llama mapas de imagen pues el programa UNIX que originalmente permitió esto, era llamado “imagemap” y es muy sencillo de crearlo. La esencia básica de los mapas de imagen es que usted tiene una imagen plana con la que quiere crear múltiples vínculos. Quizá se trate de una sola imagen con iconos que representen las diversas partes del sitio, o de una imagen que represente gráficamente varias páginas del mismo. Para usarla como mapa de imagen debe definir esas regiones, simplemente use los valores de las coordenadas que describan esas regiones. Los valores de coordenadas son pares de coordenadas XY, tomando la esquina superior de la imagen como punto de origen, es decir, 0,0.
Creación de imágenes. Los mapas de imagen tienden a ser bastante grandes. Debido a que contienen mucha información, en muchos casos se transfieren muy lentamente. Probablemente usted se haya topado con un mapa de imagen que haya tardado bastante en su transferencia. El primer paso para crear el mapa de imágenes es desarrollar el gráfico que usted desea utilizar. Cuando lo cree, trate de que el tamaño del archivo sea pequeño. Crear imagines enormes no hará nada más que frustrar a sus usuarios. la mayoría de los mapas de imágenes deberían ser GIB aunque también puede usar imágenes JPEG. La cuestión más importante al utilizar mapas de imagen es el tamaño del archivo. Una vez creada la imagen, instale el programa Mapedir en su computadora. Cuando empieza a usar este software se le presenta el cuadro de dialogo . Para un mapa de imagen del lado del cliente, el software debe saber dónde está el archivo HTML que utiliza la imagen. Utilice el botón Examinar (browse) para localizar el archivo. Para los mapas de imagen del lado del cliente, tendrá que cambiar la opción Map Definition *.MAP por HTM pages *.HTM, en el menú desplegable de la parte inferior del cuadro de diálogo. Con los mapas del lado del cliente, los valores de las coordenadas se incrustan directamente en el archivo HTML. Los mapas del lado del servidor usan un archivo externo de definición del mapa. Una vez que haya seleccionado el archivo HTML, Mapedit le mostrará todas las imágenes usadas en ese archivo. Haga clic en el momento del gráfico que quiera que sea el mapa de imagen, cuando haya seleccionado el archivo HTML y la imagen, haga clic en OK del cuadro de diálogo, Verá dos botones de opción con el rótulo CERN y NCSA, pero con los mapas del lado del cierre, usted no tiene que preocuparse de ellos. Una vez que haya hecho clic en OK, Mapedit abre la imagen para que usted trace encima de ella. Use los botones que están en la parte superior de la pantalla de Mapedit para trazar cuadrados, círculos, rectángulos y líneas. Cuando haya terminado con una, se le presentará un cuadro de diálogo, en el que usted necesita especificar el URL con el que el punto va a estar vinculado, así como el texto alterno que se desplegará en los navegadores no gráficos.
Autor. Ing. Oscar Marcelo Yumiceba Asquel Teléfono 09-3-743-345 3 978-900 ext. 2550 Mail: jacutraguta@hotmail.com
Pag # 29
Observe que usted ha definido los rectángulos en el mapa de imagen, pero ¿Qué pasa si el usuario hace clic en el texto de cada área que está afuera de la definición de la región? Usted puede agregar o eliminar puntos, mediante los botones Agregar Punto (Add Point) y eliminar Punto (Delete Point) Una vez que haya definido las regiones, necesita definir el URL predeterminado. Por ejemplo, si el público hace clic afuera de las regiones definidas, ¿quiere usted que se vaya a otra página? En muchos casos, querrá enviarlos a una página que les haga saber que la región del fondo no está definida. En otras ocasiones, tendrá realmente una página con la cual está vinculada el resto de la imagen. Para definir el URL predeterminado, abra la acción Archivo | URL Predeterminado (File | Default URL) y escriba el URL para el fondo de la imagen. Luego que haya definido todas las regiones y establecido el URL predeterminado, guarde el archivo. La definición de las coordenadas se guardará automáticamente en el archivo HTML <!DOCTYPE “HTML 3.2//EN”> <! -- Creado por Ing. Marcelo Yumiceba 3/15/2000 --- > <HTML> <HEAD> <TITLE>Vacaciones de Joe y su camino </ TITLE> </HEAD> <BODY>BGCOLOR=“#FFFFFF” TEXT=“#FFFFFF” LINK=“#334557”> <HR> <CENTER> <IMG SRC=“joes.gif” BORDER=“0” USEMAP=“#JOES”> </CENTER> <HR> <MAP NAME=“joes”> <AREA SHAPE=“rect” ALT=“Establecimiento de cena” COORDS=“74, 166, 133, 257” href=“dine.html”> <AREA SHAPE=“rect” ALT=“Tiendas de venta” COORDS=“196, 167, 254, 256” href=“shop.html”> <AREA SHAPE=“rect” ALT=“Recreación” COORDS=“323, 167, 383, 257” href=“rec.html”> <AREA SHAPE=“rect” ALT=“Vida nocturna” COORDS=“451, 169, 507, 256” href=“nitelife.html”> <AREA SHAPE=“default” HREF=“nolink.html”> </MAP> </BODY> </HTML>
La etiquetas <MAP> y <AREA> se utiliza para definir los parámetros para un mapa de imagen del lado del cliente. La etiqueta <AREA> se utiliza dentro de las etiquetas <MAP>....</MAP> para definir las zonas activas para el mapa de imagen del lado del cliente. La etiqueta <MAP> por si misma sólo tiene un atributo que es obligatorio. El atributo NAME especifica el nombre del mapa de imagen del lado del cliente sin embargo, la etiqueta <AREA> tiene varios atributos: SHAPE COORDS
Establece la forma de la zona activa que se está definiendo los valores permitidos son RECT, CIRCLE, POLYGON y DEFAULT SI usted usa DEFAULT, debe ser la última área definida en la lista. Define el valor de las coordenadas de cada área, los valores permitidos son x1,y1,x2, y2, x3, y3, x4, y4 y así sucesivamente, las coordenadas de los rectángulos se definen con el ángulo superior izquierdo y el inferior derecho. las del círculo se definen con x,y Autor. Ing. Oscar Marcelo Yumiceba Asquel Teléfono 09-3-743-345 3 978-900 ext. 2550 Mail: jacutraguta@hotmail.com
Pag # 30
HREF ALT NOHREF
(ubicación del centro) y R(radio) las coordenadas de los polígonos se definen con los valores sucesivos de x,y Define el URL que esta vinculado a esa zona activa del mapa de imagen. Define el texto que debe desplegarse en navegadores no gráficos Define una zona activa que no hace nada.
Uso de tablas para formatear páginas Uno de los elementos más importantes de los documentos HTML son las tablas, que permiten presentar la información de manera muy flexible. Las tablas se pueden anidar, es decir, dentro de una fila o una columna se puede definir otra sub-tabla. Además, se pueden meter datos que ocupen las filas o columnas que se deseen sin afectar a todos los demás. En este tema se estudiará el tratamiento de las tablas, que se pasan a describir a continuación. A veces encontrará que es difícil formatear gráficos y texto a su gusto, pero con el uso de tablas encontrará que es fácil formatear páginas Web, las tablas dan un control preciso y consistente sobre los elementos que aparecen en la página Las tablas fueron diseñadas para albergar datos pero si se navega por Web encontrará que en las tablas se integran muchas otras cosas. En las tablas se pueden usar para cosas muy originales, como la presentación de datos tabulares, o ayudar en el formato de gráfico y páginas enteras de información. La etiquetas <TABLE> se utiliza para contener todos los datos de una tabla particular en el código HTML. La etiqueta <TR> se aplica dentro de la etiqueta <TABLE>...</TABLE> para definir las filas de la tabla y la etiqueta <TD> se incluyen dentro de la etiqueta <TR>...</TR> para definir las celdas de cada fila. Las etiquetas <TABLE><TD><TR> son las mínimas requeridas para crear una tabla sencilla. El elemento que permite crear las tablas es <TABLE>, con su marca final </TABLE>. Entre estas dos marcas deben definirse las características y los datos que la tabla debe contener. Este elemento acepta el siguiente atributo, opcional : • BORDER="numero" : Permite especificar el borde (ancho en pixels) de la tabla. Por defecto es 0, es decir, la tabla aparece sin bordes. Si se especifica sólo BORDER (sin "numero"), el valor por defecto será 1, es decir, un borde simple. Con un valor de 2, la tabla tomará un aspecto de borde doble. Este atributo especifica el ancho de los bordes de la tabla. • WIDTH="valor" : Este atributo permite indicar el ancho que va a ocupar la tabla dentro de la ventana en la que se muestra el documento. Este valor puede ser exacto en pixels o un porcentaje entre 1 y 100. Si es un porcentaje debe de ir seguido del símbolo %. • CELLPADDING="valor" : Define el espacio en pixels entre el contenido de las celdas y sus bordes. • CELLSPACING="valor" : Define el espacio entre celdas (el ancho de los bordes). A continuación pasan a explicarse otros elementos que se utilizan a la hora de definir las tablas : <TR> Este elemento sirve para definir columnas. Su nombre viene de Table Row. Entre las marcas <TR> y </TR> se meten las marcas y los datos correspondientes que debe mostrar la tabla. <TD> Este elemento se utiliza para definir los datos de la tabla. Su nombre viene de Table Data. Entre las marcas <TD> y </TD> deben aparecer los datos que aparecerán en la celda correspondiente de la tabla. Permite los siguientes atributos, opcionales : • ROWSPAN="filas" : Permite indicar cuantas filas va a ocupar el dato o celda actual. • COLSPAN="columnas" : Permite especificar cuantas columnas va a ocupar el dato o celda actual. Autor. Ing. Oscar Marcelo Yumiceba Asquel Teléfono 09-3-743-345 3 978-900 ext. 2550 Mail: jacutraguta@hotmail.com
Pag # 31
• •
ALIGN="alineacion" : Se utiliza para especificar la alineación que tomará el dato dentro de la celda. Las posibles alineaciones son las mismas que en los párrafos (LEFT, RIGHT y CENTER). HEIGHT="valor" : Permite especificar el ancho que va a tomar la celda actual. Puede ser un valor fijo en pixels o un porcentaje entre 1 y 100. Si se trata de un porcentaje, el valor ha de ir seguido del símbolo %.
<TH> Este elemento se utiliza para definir las cabeceras o títulos de las tablas. Su nombre viene de Table Head. Su misión es colocar el título escrito entre las marcas <TH> y </TH> en la celda correspondiente al lugar en que se define. Admite opcionalmente el atributo ALIGN. Por defecto utiliza un tipo de letra negrita y su alineación es ALIGN=CENTER. <CAPTION> Este elemento se utiliza para nombrar a la tabla. Dicho nombre se mostrará encima o debajo de la tabla, centrado con respecto a su tamaño, pero nunca dentro. Su formato es <CAPTION="lugar">titulo</CAPTION>, pudiendo tomar "lugar" los valores de "top" para que aparezca en la parte superior de la tabla y "bottom" para que aparezca en la parte inferior. Ejemplos de tablas A continuación se muestran una serie de ejemplos de tablas : 1) Tabla básica de 3 * 2 <TABLE BORDER> <TR> <TD>Fila 1 Col. 1</TD> <TD>Fila 1 Col. 2</TD> <TD>Fila 1 Col. 3</TD> </TR> <TR> <TD>Fila 2 Col. 1</TD> <TD>Fila 2 Col. 2</TD> <TD>Fila 2 Col. 3</TD> </TR> </TABLE> 2) Tabla con su 2ª columna ocupando 2 filas <TABLE BORDER> <TR> <TD>Fila 1 Col. 1</TD> <TD ROWSPAN=2>Filas 1 y 2 Col. 2</TD> <TD>Fila 1 Col. 3</TD> </TR> <TR> <TD>Fila 2 Col. 1</TD> <TD>Fila 2 Col. 3</TD> LIGN="JUSTIFY"></TR> </TABLE> 3) Tabla con su 2ª columna 1ª fila ocupando 2 columnas <TABLE BORDER> <TR> <TD>Fila 1 Col. 1</TD> <TD COLSPAN=2>Fila 1 Col. 2 y 3</TD> </TR> <TR> <TD>Fila 2 Col. 1</TD> <TD>Fila 2 Col. 2</TD> Autor. Ing. Oscar Marcelo Yumiceba Asquel Teléfono 09-3-743-345 3 978-900 ext. 2550 Mail: jacutraguta@hotmail.com
Pag # 32
<TD>Fila 2 Col. 3</TD> </TR> </TABLE> 4) Tabla con 2 cabeceras de 4 elementos cada una <TABLE BORDER> <TR> <TH COLSPAN=2>Cabecera 1</TH> <TH COLSPAN=2>Cabecera 2</TH> </TR> <TR> <TD>Cab. 1 Fil. 1 Col. 1</TD> <TD>Cab. 1 Fil. 1 Col. 2</TD> <TD>Cab. 1 Fil. 2 Col. 1</TD> <TD>Cab. 1 Fil. 2 Col. 2</TD> </TR> <TR> <TD>Cab. 2 Fil. 1 Col. 1</TD> <TD>Cab. 2 Fil. 1 Col. 2</TD> <TD>Cab. 2 Fil. 2 Col. 1</TD> <TD>Cab. 2 Fil. 2 Col. 2</TD> </TR> </TABLE> 5) Tabla con cabeceras en cada fila (no en columnas) y con nombre encima <TABLE BORDER> <CAPTION ALIGN="top">Nombre encima</CAPTION> <TR> <TH>Cabecera fila 1</TH> <TD>Fila 1 Col. 2</TD> <TD>Fila 1 Col. 3</TD> <TD>Fila 1 Col. 4</TD> </TR> <TR> <TH>Cabecera fila 2</TH> <TD>Fila 2 Col. 2</TD> <TD>Fila 2 Col. 3</TD> <TD>Fila 2 Col. 4</TD> </TR> <TR> <TH>Cabecera fila 3</TH> <TD>Fila 3 Col. 2</TD> <TD>Fila 3 Col. 3</TD> <TD>Fila 3 Col. 4</TD> </TR> </TABLE> 6) Tabla con borde ancho y separación entre sus cajas <TABLE BORDER=5 CELLPADING=10 CELLSPACING=10> <TR> <TD>Fila 1 Col. 1</TD> <TD>Fila 1 Col. 2</TD> <TD>Fila 1 Col. 3</TD> </TR> <TR> Autor. Ing. Oscar Marcelo Yumiceba Asquel Teléfono 09-3-743-345 3 978-900 ext. 2550 Mail: jacutraguta@hotmail.com
Pag # 33
<TD>Fila 2 Col. 1</TD> <TD>Fila 2 Col. 2</TD> <TD>Fila 2 Col. 3</TD> </TR> </TABLE>
Creación de los efectos de biselado Uno de los usos mas elementales es la creación de bordes para un gráfico y para esto estudiemos el siguiente ejemplo: <!DOCTYPE “HTML 3.2//EN”> <! -- Creado por Ing. Marcelo Yumiceba 3/15/2000 --- > <HTML> <HEAD> <TITLE>Creación de una imagen</ TITLE> </HEAD> <BODY> <CENTER> <TABLE BORDER=14> <TR> <TD><IMG SRC=“widsurf.gif”></TD> </TR> </TABLE> </CENTER> </BODY> </HTML>
Ahora hagásmolo interesante, agregando a la tabla otra fila que contenga título al gráfico. <!DOCTYPE “HTML 3.2//EN”> <! -- Creado por Ing. Marcelo Yumiceba 3/15/2000 --- > <HTML> <HEAD> <TITLE>Uso de tablas</ TITLE> </HEAD> <BODY> <CENTER> <TABLE BORDER=14> <TR> <TD><IMG SRC=“widsurf.gif”></TD> </TR> <TR> <TD ALIGN=CENTER>Surfiin` USA></TD> </TR> </TABLE> </CENTER> </BODY> </HTML>
Alli vemos como se coloco el título bajo el gráfico y al centro. Y al colocar un TR se agrega una nueva fila a la tabla. Ahora colocaremos una columna adicional agregando otra etiqueta TD a la derecha de la que ya esta <!DOCTYPE “HTML 3.2//EN”> <! -- Creado por Ing. Marcelo Yumiceba 3/15/2000 --- > <HTML> Autor. Ing. Oscar Marcelo Yumiceba Asquel Teléfono 09-3-743-345 3 978-900 ext. 2550 Mail: jacutraguta@hotmail.com
Pag # 34 <HEAD> <TITLE>Uso de tablas</ TITLE> </HEAD> <BODY> <CENTER> <TABLE BORDER=14> <TR> <TD><IMG SRC=“widsurf.gif”></TD> <TD><IMG SRC=“widsur2.gif”></TD> </TR> <TR> <TD ALIGN=CENTER>Surfiin` COLOMBIA></TD> <TD ALIGN=CENTER>Surfiin` ECUADOR 2></TD> </TR> </TABLE> </CENTER> </BODY> </HTML>
Las etiquetas TABLE tienen los siguientes atributos básicos: ALIGN
Permite que el texto fluya alrededor de la tabla, en forma similar o como fluye alrededor de las imágenes. Las opciones válidas del atributo ALIGN son LEFT y RIGHT BORDER Establece el grosor de los límites de la tabla. El valor predeterminado de este atributo es cero 0, así que, si no se indica ningún valor, el borde se hace invisible. CELLSPACING. Define el grosor de los bordes de la celda dentro de la tabla, el valor predeterminado es CELLSPACING=2 CELLPADDING Define el espacio entre el marco de la celda y las orillas del objeto que se encuentran en la celda, valor predeterminado es CELLPADDING=1 WIDTH Trata de especificar el ancho deseado de la tabla, ya sea en pixeles o en porcentaje. Sin embargo, el valor definido en este atributo queda anulado por los valores establecidos en otros atributos HEIGHT Trata de especificar la altura deseada de la tabla, ya sea en pixeles o en porcentaje. Sin embargo, el valor definido en este atributo queda anulado por los valores establecidos en otros atributos
Atributos de fila, celda y encabezados de tabla Además de TD y TR se puede crear una celda para encabezado, el cual se interpreta en letras negritas. TH crea una celda de encabezado para la columna particular de celdas de datos. El texto contenido en esa celda se interpreta en letras negritas. Sus atributos para TD, TR, TH son los siguientes ALIGN
Especifica la alineación del texto o de los elementos dentro de la celda. Los valores permitidos son ALIGN=LEFT ALIGN=RIGHT y ALIGN=CENTER el predeterminado es ALIGN=LEFT VALIGN Especifica la alineación vertical del texto o de los elementos dentro de la celda el valor predeterminado VALIGN=TOP VALIGN=MIDDLE, VALIGN=BOTTON Y VALIGN=BASELINE. Los siguientes atributos sólo se aplican a las etiquetas <TD> y <TH>: WIDTH Especifica el ancho del elemento en pixeles o como porcentaje de la pantalla. Al especificar el ancho se afectan a todas las celdas de esa columna en particular. Por lo tanto si se utiliza el atributo WIDTH en muchas celdas, el que se usara será el valor mas grande. Observe que Autor. Ing. Oscar Marcelo Yumiceba Asquel Teléfono 09-3-743-345 3 978-900 ext. 2550 Mail: jacutraguta@hotmail.com
Pag # 35
si la suma de los valores del ancho de las celdas excede al valor especificado el atributo WIDTH de la etiqueta <TABLE>, el ancho acumulado de las celdas anulará el ancho especificado en la etiqueta <TABLE> HEIGHT Especifica la altura de la celda en pixeles o como porcentaje de la pantalla. Al especificar la altura se afectan todas las celdas de esa fila en particular. Por lo tanto, si se usa el atributo HEIGHT en muchas celdas, el que usará será el valor más grande. Observe que si la suma de los valores de la altura de las celdas excede al valor especificado en el atributo HEIGHT de la etiqueta <TABLE>, la altura cumulada de las celdas de las celdas anulará la altura especificada de la etiqueta <TABLE> COLSPAN Especifica el número de columnas que abarca la celda ROWSPAN Especifica el número de filas que abarca la celda NOWRAP Deshabilita la función de ajuste automático de texto. Ahora que hemos examinado las diversa etiquetas de tablas y atributos, aprenderemos como usarlas, usted formateara una tabla relativa a los animales que se puede cazar en cualquier localidad. <!DOCTYPE “HTML 3.2//EN”> <! -- Creado por Ing. Marcelo Yumiceba 3/15/2000 --- > <HTML> <HEAD> <TITLE>Central de caza de indiana</ TITLE> </HEAD> <BODY> <TABLE BORDER=4> <TR> <TH ALIGN=CENTER>cOUNTIES</TH> </TR> <TR> <TD>Boone</TD> </TR> ...... ...... ...... <TR> <TD>Tipon</TD> </TR> </TABLE> </CENTER> </BODY> </HTML>
Ahora regresamos y aumentemos una segunda columna de datos al ejercicio anterior: <!DOCTYPE “HTML 3.2//EN”> <! -- Creado por Ing. Marcelo Yumiceba 3/15/2000 --- > <HTML> <HEAD> <TITLE>Central de caza de indiana</ TITLE> </HEAD> <BODY> <TABLE BORDER=4> <TR> <TH ALIGN=CENTER>Counties</TH> <TH ALIGN=CENTER>Squirrel</TH> </TR> <TR> <TD>Boone</TD> Autor. Ing. Oscar Marcelo Yumiceba Asquel Teléfono 09-3-743-345 3 978-900 ext. 2550 Mail: jacutraguta@hotmail.com
Pag # 36 <TD ALIGN=CENTER>125</TD> </TR> ...... ...... ...... <TR> <TD>Tipon</TD> <TD ALIGN=CENTER>101</TD> </TR> </TABLE> </CENTER> </BODY> </HTML>
Observe que el borde de todas las celdas está bastante cerca de los datos hay que agregarle espacio entre el texto y el borde mediante el atributo CELLPADDING de la etiqueta TABLE. Además observe que cuando se trabaje con tablas hay dos métodos principales de hacer que se hunda una celda vacía. El primero es usar un espacio de no separación. Para crear este carácter, debe definirlo con su designación de entidad: &nbsp;. La segunda forma de lograrlo esto es con un salto de línea, aplicando la etiqueta <BR>. Adelante y arregle esas celdas vacías. Descubrirá que algunos navegadores no soportan los caracteres especiales. Construir una tabla a partir de cero es sencillo en tanto que agregue las cosas una a la vez. Inicie por definir una sola columna después la siguiente así sucesivamente <!DOCTYPE “HTML 3.2//EN”> <! -- Creado por Ing. Marcelo Yumiceba 3/15/2000 --- > <HTML> <HEAD> <TITLE>Central de caza de indiana</ TITLE> </HEAD> <BODY> <H3 ALIGN=CENTER> Central de Caseria</H3> <CENTER> <TABLE BORDER=4 CELLPADDING=6> <TR> <TH ROWSPN=2>Contador</TH> <TH ALIGN=CENTER COLSPN=4>Pequeño juego</TH> <TH ALIGN=CENTER COLSPN=4>Grande Juego</TH> </TR> <TR> <TH ALIGN=CENTER>Ardilla</TH> <TH ALIGN=CENTER>Conejo</TH> <TH ALIGN=CENTER>Moscas</TH> <TH ALIGN=CENTER>Visón</TH> <TH ALIGN=CENTER>Ratón</TH> <TH ALIGN=CENTER>Zorro</TH> <TH ALIGN=CENTER>Coyote</TH> <TH ALIGN=CENTER>Venado</TH> </TR> <TR> <TD>Quito</TD> <TD ALIGN=CENTER>125</TD> <TD ALIGN=CENTER>113</TD> <TD ALIGN=CENTER>75</TD> <TD ALIGN=CENTER>44</TD> <TD ALIGN=CENTER>98</TD> <TD ALIGN=CENTER>28</TD> <TD ALIGN=CENTER>10</TD> Autor. Ing. Oscar Marcelo Yumiceba Asquel Teléfono 09-3-743-345 3 978-900 ext. 2550 Mail: jacutraguta@hotmail.com
Pag # 37 <TD ALIGN=CENTER>75</TD> </TR> <TR> <TD>Guayaquil</TD> <TD ALIGN=CENTER>154</TD> <TD ALIGN=CENTER>125</TD> <TD ALIGN=CENTER>102</TD> <TD ALIGN=CENTER>59</TD> <TD ALIGN=CENTER>101</TD> <TD ALIGN=CENTER>35</TD> <TD ALIGN=CENTER>22</TD> <TD ALIGN=CENTER>89</TD> </TR> <TR> <TD>Cuenca</TD> <TD ALIGN=CENTER>121</TD> <TD ALIGN=CENTER>145</TD> <TD ALIGN=CENTER>88</TD> <TD ALIGN=CENTER>25</TD> <TD ALIGN=CENTER>89</TD> <TD ALIGN=CENTER><BR></TD> <TD ALIGN=CENTER>10</TD> <TD ALIGN=CENTER>85</TD> </TR> <TR> <TD>Ambato</TD> <TD ALIGN=CENTER>90</TD> <TD ALIGN=CENTER>45</TD> <TD ALIGN=CENTER>65</TD> <TD ALIGN=CENTER>33</TD> <TD ALIGN=CENTER>75</TD> <TD ALIGN=CENTER>35</TD> <TD ALIGN=CENTER>6</TD> <TD ALIGN=CENTER>35</TD> </TR> <TR> <TD>Riobamba</TD> <TD ALIGN=CENTER>98</TD> <TD ALIGN=CENTER>59</TD> <TD ALIGN=CENTER>92</TD> <TD ALIGN=CENTER>13</TD> <TD ALIGN=CENTER>48</TD> <TD ALIGN=CENTER>18</TD> <TD ALIGN=CENTER>15</TD> <TD ALIGN=CENTER><BR></TD> </TR> <TR> <TD>Azogues</TD> <TD ALIGN=CENTER>134</TD> <TD ALIGN=CENTER>155</TD> <TD ALIGN=CENTER>140</TD> <TD ALIGN=CENTER>89</TD> <TD ALIGN=CENTER>78</TD> <TD ALIGN=CENTER>25</TD> <TD ALIGN=CENTER>75</TD> <TD ALIGN=CENTER>88</TD> </TR> <TR> <TD>Guayabamba</TD> <TD ALIGN=CENTER>67</TD> <TD ALIGN=CENTER>76</TD> <TD ALIGN=CENTER>59</TD> Autor. Ing. Oscar Marcelo Yumiceba Asquel Teléfono 09-3-743-345 3 978-900 ext. 2550 Mail: jacutraguta@hotmail.com
Pag # 38 <TD ALIGN=CENTER>71</TD> <TD ALIGN=CENTER>75</TD> <TD ALIGN=CENTER>100</TD> <TD ALIGN=CENTER>89</TD> <TD ALIGN=CENTER>55</TD> </TR> <TR> <TD>Oriente</TD> <TD ALIGN=CENTER>101</TD> <TD ALIGN=CENTER>96</TD> <TD ALIGN=CENTER>90</TD> <TD ALIGN=CENTER>65</TD> <TD ALIGN=CENTER><BR></TD> <TD ALIGN=CENTER>55</TD> <TD ALIGN=CENTER>59</TD> <TD ALIGN=CENTER>78</TD> </TR> </TABLE> </CENTER> </BODY> </HTML>
Una vez que tiene la estructura de la tabla insertar gráficos es relativamente sencillo lo único que tiene que hacer es integrar las etiquetas <IMG> en los encabezados de la tabla <TR>, lo que se modifica es la fila de la celda de datos. También vera en el código que hay saltos de línea para que el gráfico aparezca debajo del texto de la celda ..... <TR> <TH ALIGN=CENTER>Ardilla<BR><IMG SRC=“squirrel.gif”></TH> <TH ALIGN=CENTER>Conejo<BR><IMG SRC=“rabbit.gif”></TH> <TH ALIGN=CENTER>Moscas<BR><IMG SRC=“rat.gif”></TH> <TH ALIGN=CENTER>Visón<BR><IMG SRC=“mink.gif”></TH> <TH ALIGN=CENTER>Ratón<BR><IMG SRC=“racoon.gif”></TH> <TH ALIGN=CENTER>Zorro<BR><IMG SRC=“fox.gif”></TH> <TH ALIGN=CENTER>Coyote<BR><IMG SRC=“coyote.gif”></TH> <TH ALIGN=CENTER>Venado<BR><IMG SRC=“deer.gif”></TH> </TR>
.....
Formateo de páginas A menudo es difícil hacer que el texto y los gráficos se ajusten a la página Web en la formo que uno quiere. Pero se puede usar tablas para obligar al texto y los gráficos a que se ajusten a las celdas Lo que le da un mayor control y capacidad de formato. Examinemos la tabla básica que se usa para desarrollar: Código para el diseño de una página con una tabla <!DOCTYPE “HTML 3.2//EN”> <! -- Creado por Ing. Marcelo Yumiceba 3/15/2000 --- > <HTML> <HEAD> <TITLE>Ejemplo del diseño de una página con tabla</ TITLE> </HEAD> <BODY> <TABLE BORDER=6> <TR> <TD COLSPAN=3 WITH 596 HEIGHT=97><H3 ALIGN=CENTER>--BANNER--</H3></TD> Autor. Ing. Oscar Marcelo Yumiceba Asquel Teléfono 09-3-743-345 3 978-900 ext. 2550 Mail: jacutraguta@hotmail.com
Pag # 39 </TR> <TR> <TD WITH=196 HEIGHT=49><H2 ALIGN=CENTER>Advertencia</H2></TD> <TD COLSPAN=2 WITH=400 HEIGHT=49><H2 ALIGN=CENTER>Area Banner</H2></TD> </TR> <TR> <TD WITH=196 HEIGHT=49><H2 ALIGN=CENTER>Advertencia</H2></TD> <TD ROWSPAN=2 WITH=256 HEIGHT=404<H2 ALIGN=CENTER>Información</H2></TD> <TD ROWSPAN=3 WITH=144 HEIGHT=404<H2 ALIGN=CENTER>Subjetiva</H2></TD> </TR> <TR> <TD WITH=196 HEIGHT=49><H2 ALIGN=CENTER>Advertencia</H2></TD> </TR> <TR> <TD WITH=196 HEIGHT=306><H2 ALIGN=CENTER>Menú</H2></TD> </TR> </TABLE> </BODY> </HTML>0
Definición de marcos La etiqueta básica que se utiliza para crear un documento con marcos es la etiqueta <FRAMESET> cómo ya aprendio anteriormente esta etiqueta reemplaza a las etiquetas normales <BODY>..</BODY>. El documento en el que se utiliza la etiqueta <FRAMESET> sólo contiene información respecto de las ventanas o marcos en sí. El contenido de los esta definido en cualquier numero de archivos HTML, que se almacena en forma externa. Archivo de contenido HTNL
Documento con marcos
Archivo de contenido HTNL
Archivo de contenido HTNL
Una de la características especiales de los documentos con marcos es la capacidad de abrir otra del navegador. Esto hace que corran simultáneamente dos copias del navegador. El uso de esta función mantiene el documento donde esta. Al elegir un nuevo vínculo se reemplazan los elementos mostrados en el área de trabajo del navegador. Al abrir una nueva ventana, la ventana anterior se queda donde estaba y la nueva es la que se va al nuevo URL. Para la etiqueta <FRAMESET> sus atributos son: ROWS que nos indica el numero y tamaño de cada uno de los elementos del marco que habrá de crearse en la ventana del navegador, este atributo divide a la ventana en forma horizontal. Los valores permitidos son absolutos, relativos y porcentajes de pantalla. COLS Indica el tamaño de cada uno de los marcos que habrá de crearse en la ventana del navegador. Este atributo divide a la ventana en forma vertical Los valores permitidos son absolutos, relativos y porcentajes de pantalla. Una vez definida la ventana se puede utilizar otros atributos para controlar su comportamiento: Autor. Ing. Oscar Marcelo Yumiceba Asquel Teléfono 09-3-743-345 3 978-900 ext. 2550 Mail: jacutraguta@hotmail.com
Pag # 40
SRC La página Web que aparecerá en ese marco NAME El nombre del marco particular. Se usa para permitir que un marco controle a otro mediante la especificación TARGET SCROLLING Define si el marco tendrá o no barras de desplazamiento, los valores permitidos son SCROLLING=YES, NO y AUTO el valor predeterminado es AUTO MARGINWIDTH Define los márgenes izquierdo y derecho del marco en pixeles, este atributo no puede ser 0. MARGINHEIGHT Define los márgenes inferior y superior del marco, en pixeles, este atributo no puede ser 0. Para iniciar con el desarrollo de ejemplos es necesario que tome un desarrollo simple de una ventana con dos columnas, cada una ocupa el 50% de la pantalla. <!DOCTYPE “HTML 3.2//EN”> <! -- Creado por Ing. Marcelo Yumiceba 3/15/2000 --- > <HTML> <HEAD> <TITLE>Creación de Marco</ TITLE> </HEAD> <FRAMSET COLS=50%,50%> <FRAME SRC=“UNO.HTM”> <FRAME SRC=“DOS.HTML”> </ FRAMSET> </HTML> <!DOCTYPE “HTML 3.2//EN”> <! -- Creado por Ing. Marcelo Yumiceba 3/15/2000 --- > <HTML> <HEAD> <TITLE>Uso de página A</ TITLE> </HEAD> <BODY> <H3>Marco A</H3> <P> Con columnas al 50%</P> </BODY> </HTML> <!DOCTYPE “HTML 3.2//EN”> <! -- Creado por Ing. Marcelo Yumiceba 3/15/2000 --- > <HTML> <HEAD> <TITLE>Uso de página B</ TITLE> </HEAD> <BODY> <H3>Marco B</H3> <P> Con columnas al 50%</P> </BODY> </HTML>
Ahora dividamos las dos columnas horizontalmente <!DOCTYPE “HTML 3.2//EN”> <! -- Creado por Ing. Marcelo Yumiceba 3/15/2000 --- > <HTML> <HEAD> Autor. Ing. Oscar Marcelo Yumiceba Asquel Teléfono 09-3-743-345 3 978-900 ext. 2550 Mail: jacutraguta@hotmail.com
Pag # 41 <TITLE>Creaación de Marco</ TITLE> </HEAD> <FRAMSET COLS=50%,50%> < FRAMSET ROWS=50%,50%> <FRAME SRC=“UNO.HTM”> <FRAME SRC=“TRES.HTML”> </ FRAMSET> < FRAMSET ROWS=50%,50%> <FRAME SRC=“DOS.HTM”> <FRAME SRC=“CUATRO.HTML”> </ FRAMSET> </ FRAMSET> </HTML>
Si decide utilizar marcos recuerde diseñarlos en papel cuadriculado antes de crear las páginas que van ha ir dentro de los marcos. Los elementos que sean mas grandes que el marco requerirán desplazamientos. Si tiene un vínculo en la página uno, cuando el usuario haga clic se cargará el vínculo en forma automática, si no carga ningún atributo, éste carga la página en forma predeterminada. Para que se abra una nueva venta es necesario que se cargue el atributo TARGET en documentos normales. Se lo usa comúnmente para permitir que un marco actualice el contenido del otro. Sin embargo en el atributo TARGET también hay otros nombres implícitos que puede usar. _self hace que el navegador actualice el marco en el que se encuentra la página. _parent hace que el navegador actualice el marco padre del marco actual, habida cuenta que lo haya. _top hace que el navegador actualice toda el área de trabajo del navegador. _blank hace que el navegador abra una ventana nueva en la que se despliega la página. Analicemos el próximo ejemplo: <!DOCTYPE “HTML 3.2//EN”> <! -- Creado por Ing. Marcelo Yumiceba 3/15/2000 --- > <HTML> <HEAD> <TITLE>Página A</ TITLE> </HEAD> <BODY> <H3>Marco A</H3> <P> Con columnas al 50%, filas al 50% <BR><BR><BR> <A> HREF=“http://www.netscape.com” TARGET=“_blank”>Netscape´s Home page</A></P> </BODY> </HTML>
Cuando el usuario haga clic en el vínculo 1 se abrirá una nueva ventana para el documento. Utilice el atributo TARCET=“_blank” para que se abra una nueva ventana. ¿Qué pasa si una ventana quiere controlar a otra? Por ejemplo, si quiere que al hacer clic en una página se cambie el contenido de otra ventana, O ¿que tal que quiera que un marco controle a otros dos?. Para poder hacer que una página controle a otra se requiere poner nombre a los marcos y especificar el destino. Si cada marco tiene su nombre, entonces puede definirlo como destino de las actualizaciones basadas en vínculos en otros marcos.
Control de un marco Autor. Ing. Oscar Marcelo Yumiceba Asquel Teléfono 09-3-743-345 3 978-900 ext. 2550 Mail: jacutraguta@hotmail.com
Pag # 42
Empecemos con un ejemplo en el que se quiere crear un menú a la izquierda de la pantalla que controle las imágenes que se despliega al lado derecho. También tendrá un titular gráfico en la parte superior, que está congelado, sin barras de desplazamiento y con marcos inmovilizados.
(A)
(B)
Mire que las columnas del ejemplo A se extienden por toda la pantalla. esta columnas se dividen en segmentos mas pequeños, en el ejemplo B las filas se extienden por toda la pantalla y después se subdividen . En el ejercicio A usted primero subdividirá las columnas y después las filas usando la etiqueta <FRAMESET> como se muestra a continuación. .... <FRAMSET COLS=50%,50%> < FRAMSET ROWS=10%,90%> <FRAME SRC=“UNO”> <FRAMSET”> <FRAME SRC=“DOS”> </ FRAMSET>
.... Para el ejercicio B deberíamos digitar de la siguiente forma .... <FRAMSET ROWS=10%,90%> < FRAMSET COLS=50%,50%> <FRAME SRC=“UNO”> <FRAMSET”> <FRAME SRC=“DOS”> </ FRAMSET>
.... En el siguiente ejemplo se definirá primero las filas ya que se extienden por toda el área de la pantalla, la fila de 20% se asignará al archivo HTML llamado BANNER el cual tiene el 100% de ancho. La segunda fila que tiene el 80%, se subdivide en dos columnas, la columna de 25% se asigna al archivo HTML. Llamado MENÚ mientras que la columna de 75% se asigna al archivo HTML llamado SCREEN. Observe que usted quiere poder elegir elementos en el marco del menú y que se actualice en el marco de la pantalla. Para ello debe darle nombre a ese marco. Si le da nombre a un marco, los documentos en otras ventanas tiene la capacidad de tomarle como destino A continuación analicemos el código de MENU:HTM <!DOCTYPE “HTML 3.2//EN”> <! -- Creado por Ing. Marcelo Yumiceba 3/15/2000 --- > <HTML> <HEAD> <TITLE>Menu de pájaros </ TITLE> </HEAD> <BODY BGCOLOR=“#FFFFFF”> <UL> Autor. Ing. Oscar Marcelo Yumiceba Asquel Teléfono 09-3-743-345 3 978-900 ext. 2550 Mail: jacutraguta@hotmail.com
Pag # 43 <LH><H3>MENU DE PAJAROS</H3> <LI><A> HREF=“bird1.htm TARGET=“screen”> Red Headed Woodpecker</A></LI> <LI><A> HREF=“bird2.htm TARGET=“screen”> Sportted Barm Owl</A></LI> <LI><A> HREF=“bird3.htm TARGET=“screen”> Blue Heron </A></LI> <LI><A> HREF=“bird4.htm TARGET=“screen”> Speckled Grouse</A></LI> <LI><A> HREF=“bird5.htm TARGET=“screen”> Sparrow Hawk</A></LI> <LI><A> HREF=“screen.htm TARGET=“screen”> Main Menu </A></LI> <UL> </ BODY> </HTML>
En las etiquetas de ancla de este código, usted especificó el destino. Cuando el usuario haga clic en esos vínculos, el verá el documento respectivo en el marco llamado screen. Así es que se hace que un marco actualice el contenido de otro.
Como controlar dos marcos Ahora necesitamos modificar el código, de modo que el menú controle tanto la pantalla de la imagen como el texto, una vez que entienda verá qué fácil es en realidad. Esto también se llama marco anidado indirectamente. En realidad dentro de un documento de marcos, usted puede hacer referencia a otro documento de marcos. Esto es lo que usted hará para crear un documento que actualice marcos en forma simultánea, veamos a continuación un ejemplo para visualizarlo: <!DOCTYPE “HTML 3.2//EN”> <! -- Creado por Ing. Marcelo Yumiceba 3/15/2000 --- > <HTML> <HEAD> <TITLE>Control de cuadros con otros </ TITLE> </HEAD> <FRAMESET COLS=25%, 75%> < FRAMESET ROWS=20%, 80%> <FRAME SRC=“sm_ban.htm”> <FRAME SRC=“memnu.htm”> < /FRAMESET> <FRAME SRC=“split.htm” NAME=“split”> </ FRAMESET> </HTML>
Observe este ejercicio y compárelo con el anterior, se podrá observar que se ha empezado primero por definir dos columnas, una de 25% y otra de 75%.A su vez la columna de 25% esta subdividida en una fila de 20% y otra de 80% y los archivos HTML asociados con ellos se indican inmediatamente después de la etiqueta <FRAME> ahora observemos la siguiente parte que es muy importante, mire que la columna de 75% esta asignada al archivo SPLIT.HTM. Ahora veamos lo que hay dentro del archivo SPLIT.HTM <!DOCTYPE “HTML 3.2//EN”> <! -- Creado por Ing. Marcelo Yumiceba 3/15/2000 --- > <HTML> <HEAD> <TITLE>Split para Windows </ TITLE> </HEAD> <FRAMESET ROWS=75%, 25%> <FRAME SRC=“s_screen.htm”> <FRAME SRC=“s_text.htm”> </ FRAMESET> </HTML> Autor. Ing. Oscar Marcelo Yumiceba Asquel Teléfono 09-3-743-345 3 978-900 ext. 2550 Mail: jacutraguta@hotmail.com
Pag # 44
Observe que en este archivo se encuentra la definición de las dos filas que vio en la columna de marcos. Mediante este ejemplo, usted puede ver que un documento de marcos de hecho puede incrustarse en otro, Esto significa que, cuando el usuario hace clic en una opción del menú contenido en el documento principal de marcos, la columna del 75% se actualiza con otro documento de marcos, haciendo que ambas ventanas se actualicen simultáneamente
Cómo lidiar con navegadores sin marcos. La etiqueta <NOFRAMES> le permite al desarrollador especificar una sección de cuerpo alterna dentro de un documento de marcos, para los navegadores que no soportan marcos. <!DOCTYPE “HTML 3.2//EN”> <! -- Creado por Ing. Marcelo Yumiceba 3/15/2000 --- > <HTML> <HEAD> <TITLE>Control de dos marcos con otros </ TITLE> </HEAD> <FRAMESET COLS=25%, 75%> < FRAMESET ROWS=20%, 80%> <FRAME SRC=“sm_ban.htm”> <FRAME SRC=“memnu.htm”> < /FRAMSET> <FRAM SRC=“split.htm” NAME=“split”> </ FRAMESET> <NOFRAMES> <BODY> ... inserte la alternativa del contenido del cuerpo aquí desde el despliegue de los no cuadros ... </BODY> </NOFRAMES> </HTML>
Recolección de datos con formularios
¿Tiene necesidad de reunir información acerca de sus usuarios? ¿Quiere ofrecer formularios en línea para que el público los llene, o simplemente quiere darle un medio de comunicarse con usted? Cualesquiera sea su propósito, los formularios interactivos son la mejor forma de recabar esa información. Desde cuadros de texto hasta menús desplegables, botones de opción y otros elementos mucho mas complejos, puede facilitar a sus usuarios que le envíen información y reacciones. Para encontrar información pertinente acerca de las especificidades de un servidor para formularios iterativos, es necesario que revise los siguientes sitios que contienen información acerca de los detalles del servidor y sus scripts: http://ww.lpage.com/cgi/ http://hetamorphix.com/cgi.html http://hoohoo.ncsa.uiuc.edu/cgi/interface.html http://ww.fin.vcu.edu/cgi/interface.html http://ww.worldwidemart.com/scripts/ http://ww.eff,org/-erict/scripts/ http://ww.yahoo.com/computers/internet/world_wide_web/
Etiquetas y atributos de formularios
Autor. Ing. Oscar Marcelo Yumiceba Asquel Teléfono 09-3-743-345 3 978-900 ext. 2550 Mail: jacutraguta@hotmail.com
Pag # 45
-Construir un formulario iteractivo no es muy diferente a crear cualquier otra página HTML, sin embargo estos formularios tienen tres elementos característicos que son. el encabezado, los campos de entrada y uno o mas botones de acción. Cuando se han llenado los campos de entrada de un formulario, el usuario selecciona uno de los botones de acción. El formulario envía los datos a una ubicación, que puede ser un scrip o una dirección de correo electrónico, previamente definidos en el encabezado. Si los datos se envían a un scrip, éste formateara los datos y los enviará a una ubicación apropiada, que puede ser un archivo de texto, una dirección de correo electrónico, o un archivo HTML. La parte mas difícil de todo esto es el establecer el scrip que procesa los datos, debido a la gran variedad de formas en que se puede realizar.
Encabezado del formulario Las principales etiquetas que contienen los elementos del formularios son <FORM> los contenedores de los elementos que conforman el formulario. Un formulario puede contener cualquier cosa, excepto otro formulario y debe tener por lo menos una etiqueta <INPUT>, <SELECT> o <TEXTAREA>. Cuando el usuario envía información a través de un formulario, el navegador empaca los datos y los transfiere a la ubicación señalada en la etiqueta <FORM>.por ejemplo: <FORM ACTION=“mailto:maryumiceba@hotmail.com” METHOD=“post”>...</FORM> Este ejercicio nos muestra dos elementos importantes: la ubicación a la que se envían los datos “mailto:maryumiceba@hotmail.com” y el método de envío “post” Atributos válidos para la etiqueta FORM ACTION Especifica el URL a donde enviar los datos. Sin ella, los datos no tendrían destinatario METHOD Especifica como se envían los datos a la ubicación indicada, los valores permitidos son GET y POST. El valor predeterminado es GET. ENCTYPE Especifica el tipo MIME de los datos que se envían cuando se usa la opción POST. El tipo MIME le indica a la ubicación receptora en que tipo de archivo están contenidos los datos.
Campos de entrada, Recepción de datos. Los elementos de entrada son una gran variedad de elementos interfaz gráfica, como pueden ser campos de texto, botones de envío y cancelar. campos de contraseña, casilla de verificación, botones de opción y elementos ocultos de entrada, la mayoría de estos se crean con la etiqueta INPUT Tipos de elementos de entrada Campo de texto Campo de contraseña Botón de envío Botón de cancelar Casilla de verificación Botón de opción Campo oculto Ventana de texto Menú
Etiqueta y atributos <INPUT TYPE=“text“......> <INPUT TYPE=“password“......> <INPUT TYPE=“submit“......> <INPUT TYPE=“reset“......> <INPUT TYPE=“checkbox “......> <INPUT TYPE=“radio“......> <INPUT TYPE=“hidden“......> <TEXTAREA>......</TEXTAREA> <SELECT>...<OPTION>..</SELECT>
La etiqueta <INPUT> se usa para definir un sólo campo de formulario que generalmente constituye un solo par NAME =VALUE en la salida de datos del formulario. Los atributos del elemento <INPUT> Autor. Ing. Oscar Marcelo Yumiceba Asquel Teléfono 09-3-743-345 3 978-900 ext. 2550 Mail: jacutraguta@hotmail.com
Pag # 46
dependen del tipo de entidad que quiera crear. Los atributos básicos que aparecen sin importar que entidad se esté definiendo son los siguientes: NAME. Define el rótulo que se asocia con los datos asentados en el campo. Cuando se procesan los datos del formulario, este atributo siempre aparecerá en la forma del par NAME=VALUE de cada elemento de entrada debe ser único además de descriptivo. Cada etiqueta <INPUT> debe tener un atributo NAME para que puedan identificarse los datos asentados en ese campo. VALUE Define el valor predeterminado que debe aparecer en ese campo. Los botones de opción deben tener un valor predeterminado, aunque los demás tipos de <INPUT> no lo requieren TYPE Define el tipo de entidad de entrada es el elemento. Los valores predeterminados son: TYPE=“text“, TYPE=“password“, TYPE=“submit“ TYPE=“reset“, TYPE=“checkbox “, TYPE=“radio“, TYPE=“hidden“ Observe que, conforme cambia el atributo TYPE, también cambian los otros atributos válidos para la etiqueta <INPUT>. La opción TYPE=“password“ funciona en forma similar que TYPE=“text“, sólo que los caracteres escritos no se despliegan en la pantalla. En su lugar, los caracteres en el campo de texto son reemplazados por asteriscos. Los siguientes atributos pueden usarse con el tipo INPUT ya sea Text o password MAXLENGTH Define el número máximo de caracteres que puede escribir el usuario SIZE Define el tamaño horizontal del cuadro de texto en número de caracteres.
Atributos de envío y cancelar Se usa TYPE=“submit“ para insertar un botón que envía todos los datos que se introdujeron, al URL especificado en el encabezado del formulario. Si se usa TYPE=“RESET”, al apretar el botón se cancela todo lo escrito en los campos y estos regresan al valor predeterminado. El único atributo especial con este tipo de entrada es VALUE, lo que coloque como valor del atributo VALUE será el rótulo del botón. por ejemplo si pone VALUE=“Ingrese” en el botón aparecerá la palabra “Ingréseme”.
Atributo de la casilla de verificación. El valor de “checkbox “ crea una casilla de verificación en el formulario, la cual el usuario puede seleccionar o deseleccionar. La casilla de verificación no tiene valor, pero si necesita nombre si el usuario selecciona la casilla, el par NAME=VALUE aparecerá como NAME=ON en los datos enviados. Si la casilla de verificación no está seleccionada los datos enviados no contendrán registros de las casillas de verificación. Se puede usar el atributo CHECKED para que el valor predeterminado de una casilla de verificación sea la posición ON
Atributos de botones de opción Si usa el atributo TYPE=“radio“ de la etiqueta INPUT para crear un botón de opción en el formulario. Por lo general cuando se usan botones de opción debe haber por lo menos dos. En forma predeterminada, uno de los botones debe estar seleccionado el momento de la ejecución. Los datos establecidos con los botones de opción se envían en forma de grupo. Los botones de opción agrupados comparten el mismo nombre y se envían como grupo de información en los datos remitidos. Los botones de opción dentro de un mismo grupo se distinguen por su valor exclusivo. Autor. Ing. Oscar Marcelo Yumiceba Asquel Teléfono 09-3-743-345 3 978-900 ext. 2550 Mail: jacutraguta@hotmail.com
Pag # 47
Atributos ocultos Si usa TYPE=“hidden“ para crear un elemento de entrada oculto en la página. Por lo general el usuario no se da cuenta de los elementos ocultos, a menos que examine el contenido del código. El uso más frecuente de los campos ocultos es cuando un sólo script está diseñado para procesar varios formularios. Si éste es el caso , el script debe saber que el formulario está procesando. El campo oculto se usa para transmitir información acerca de qué formulario se está procesando y entonces esa información se vuelve parte de la salida procesada. La etiqueta <TEXTAREA>....</TEXTAREA> permite crear un cuadro de texto ajustable para el usuario escriba en él Cuando define un cuadro de texto que sería inpráctico para la etiqueta <INPUT>, como sería una cadena de texto en extremo larga, hay muchas formas en que puede definir un cuadro de texto con la etiqueta <TEXTAREA>, los siguientes son sus atributos: NAME El rótulo de la porción NAME del par NAME=VALUE del campo. La porción VALUE de <TEXTAREA> es el texto escrito por el usuario. ROWS Define la altura del área de texto y es un atributo obligatorio COLS Define el ancho del área de texto y es un atributo obligatorio WRAP Define si el texto tendrá ajuste automático en el cuadro. Los valores permitidos OFF y PHYSICAL. El predeterminado es OFF. Observe que, cuando usa el valor PHYSICAL, éste genera caracteres de salto de línea en el texto enviado.
Las opciones <SELECT> y <OPTION> Las dos últimas etiquetas de los formularios interactivos se usan en combinación. Estas dos etiquetas permiten crear menús de información, de los cuales el usuario puede elegir un elemento. La mayoría de las veces se presentan en forma de menús desplegables. La etiqueta <SELECT> establece la presencia de un menú desplegable en el formulario intereactivo, La etiqueta <OPTION> crea las opciones definidas por el autor, que aparecen en el menú. Se usan los siguientes atributos para definir las opciones de la etiqueta <SELECT> NAME El rótulo de la porción NAME del par NAME=VALUE del campo. SIZE Define el número de opciones que aparecen en el elemento desplegable, el elemento predeterminado es SIZE=1, sin embargo, se puede poner el tamaño a un número mayor para desplegar mas elementos de dicho campo. Cualquiera que sea el tamaño al que esté especificado, el usuario puede desplazar todas las opciones. MULTIPLE Permite al usuario del formulario seleccionar mas de una elemento del menú. Una vez que haya contenido el menú con la etiqueta <SELECT>.....</SELECT> ya puede definir los elementos que aparecerán en él con la etiqueta <OPTION>, la cual tiene los siguientes atributos: SELECT Controla si el elemento estará seleccionado en forma predeterminada. En un menú en el que se use MULTIPLE puede usar el atributo SELECT en mas de una opción. VALU es usado para definir un valor especial que se usa en el par NAME=VALUE en lugar del valor de la opción.
Creación de la página de formulario Veamos un ejemplo sencillo en donde podamos practicar el uso de las etiquetas estudiadas: <!DOCTYPE “HTML 3.2//EN”> <! -- Creado por Ing. Marcelo Yumiceba 3/15/2000 --- > Autor. Ing. Oscar Marcelo Yumiceba Asquel Teléfono 09-3-743-345 3 978-900 ext. 2550 Mail: jacutraguta@hotmail.com
Pag # 48 <HTML> <HEAD> <TITLE>Ejemplo de un formulario</ TITLE> </HEAD> <BODY BGCOLOR=“·FFFFFF” TEXT=“·000000”> <H3> ALIGN=CENTER>Que es lo que usted piensa acerca de los TG? </H3> <P> Por favor ingrese los datos del siguiente cuestionario; <FORM ACTION=“mailto:maryumiceba@hotmail.com” METHOD=“POST”> Su nombre completo &nbsp; &nbsp; &nbsp; &nbsp; <INPUT TYPE=“TEXT” NAME=“FullName” SIZE=“30” MAXLENGTH=“30”> <BR><BR> Su teléfono: &nbsp; &nbsp; &nbsp, &nbsp; <INPUT TYPE=“TEXT” NAME=“Phone” SIZE=“6” MAXLENGTH=“6”> <BR><BR> Dirección: &nbsp; &nbsp; &nbsp, &nbsp; &nbsp; &nbsp; &nbsp, &nbsp; &nbsp; <INPUT TYPE=“TEXT” NAME=“Adrress1” SIZE=“30” MAXLENGTH=“30”> <BR><BR> Ciudad, Código Zip: &nbsp; &nbsp; <INPUT TYPE=“TEXT” NAME=“Adrress2” SIZE=“30” MAXLENGTH=“30”> <BR><BR> <TEXTAREA NAME=“Comments” Rows 10 COLS=80></TEXTAREA> <BR><BR> <INPUT TYPE=“SUBMIT” VALUE=“ SUBMIT “></P> </BODY> </HTML>
Colores El aspecto del documento es también muy importante. Para este fin se han creado unos atributos que permiten cambiar los colores. En el elemento <BODY> se pueden introducir los siguientes atributos : • BGCOLOR="#rrggbb" : Permite cambiar el color de fondo del documento. Si además de este color se incluye una imagen de fondo, el color especificado por este atributo es el que se encuentra debajo, es decir, si la imagen es transparente, se ve el color de fondo. • TEXT="#rrggbb" : Indica el color del texto • LINK="#rrggbb" : Indica el color para los anclajes de los hiperenlaces • VLINK="#rrggbb" : Indica el color para los anclajes de los hiperenlaces que se han visitado recientemente. Nota : Los valores "rrggbb" indican la mezcla de colores, siendo rr = rojo, gg = verde y bb = azul (red, green, blue = RGB). Estas iniciales deben ser sustituidas por números entre 0 y 255 (00 y FF en hexadecimal). El color "#000000" es negro, y el "#FFFFFF" es blanco. A continuación se muestra una tabla con algunos colores : NOMBRE DE COLOR Verde lima Naranja mandarina Castaño Aguamarina medio Azul medio Verde bosque medio Dorado medio Orquidea medio Verde mar medio
VALOR RGB #32CD32 #E47833 #8E236B #32CD99 #3232CD #6B8E23 #EAEAAE #9370DB #426F42 Autor. Ing. Oscar Marcelo Yumiceba Asquel Teléfono 09-3-743-345 3 978-900 ext. 2550 Mail: jacutraguta@hotmail.com
Pag # 49
Azul pizarra medio Verde manantial medio Turquesa medio Violeta-Rojo medio *Selva medio Azul marino de medianoche Azul marino Azul neón Rosa neón Azul de medianoche nuevo Canela nuevo Oro viejo Naranja Naranja-Rojo Orquidea Verde pálido Rosa Ciruela Cuarzo Azul rico Salmón Escarlata Verde mar Chocolate semi-suave Siena Plata Azul cielo Azul pizarra Rosa vivo Verde fuerte Azul metálico Azul de verano Canela Cardo Turquesa Marrón muy oscuro Gris muy claro Violeta Violeta-Rojo Trigo Blanco Rojo Verde Azul Magneta Cian
#7F00FF #7FFF00 #70DBDB #DB7093 #A68064 #2F2F4F #23238E #4D4DFF #FF6EC7 #00009C #EBC79E #CFB53B #FF7F00 #FF2400 #DB70DB #8FBC8F #BC8F8F #EAADEA #D9D9F3 #5959AB #6F4242 #8C1717 #238E68 #6B4226 #8E6B23 #E6E8FA #3299CC #007FFF #FF1CAE #00FF7F #236B8E #38B0DE #DB9370 #D8BFD8 #ADEAEA #5C4033 #CDCDCD #4F2F4F #CC3299 #D8D8BF #FFFFFF #FF0000 #00FF00 #0000FF #FF00FF #00FFFF Autor. Ing. Oscar Marcelo Yumiceba Asquel Teléfono 09-3-743-345 3 978-900 ext. 2550 Mail: jacutraguta@hotmail.com
Pag # 50
Amarillo Negro Aguamarina Chocolate Azul-Violeta Bronce Oro brillante Marrón Bronce 2 Bronce 3 Azul cadete Cobre fresco Cobre Coral Azul flor-maiz Marrón oscuro Verde oscuro Verde cobrizo oscuro Verde aceituna oscuro Orquidea oscuro Morado oscuro Azul pizarra oscuro Gris pizarra oscuro Canela oscuro Turquesa oscuro Selva oscuro Gris oscuro Rosa polvoriento (Feldspar) Fuego-Ladrillo Verde bosque Oro Dorado Gris Verde cobrizo Verde amarillento Verde caza Rojo indio Kaki Azul claro Gris claro Azul pizarra claro Selva claro
#FFFF00 #000000 #70DB93 #5C3317 #9F5F9F #B5A642 #D9D919 #A62A2A #8C7853 #A67D3D #5F9F9F #D98719 #B87333 #FF7F00 #42462F #5C4033 #2F4F2F #4A766E #4F4F2F #9932CD #871F78 #6B238E #2F4F4F #97694F #7093DB #855E42 #545454 #856363 #D19275 #8E2323 #238E23 #CD7F32 #DBDB70 #C0C0C0 #527F76 #93DB70 #215E21 #4E2F2F #9F9F5F #C0D9D9 #A8A8A8 #8F8FBD #E9C2A6
Comunicación entre el cliente y el servidor Autor. Ing. Oscar Marcelo Yumiceba Asquel Teléfono 09-3-743-345 3 978-900 ext. 2550 Mail: jacutraguta@hotmail.com
Pag # 51
Para poder trabajar con los datos del formulario, la máquina debe empacarlos y enviar al servidor designado. Los datos se envían utilizando el método HTTP prescrito en el encabezado del formulario. Esta transmisión será en la forma de una especificación GET o POST en el encabezado. El método GET es el método predeterminado para transferir solicitudes normales de documentos. Con este método, los datos se adjuntan al URL y se envían al servidor. Sin embargo esto puede ser un problema si las cadenas de texto son bastante largas. El método POST, por su parte es el método HTTP preferido debido a que envía los datos en porciones separadas de información en lugar de adjuntarlos al final del URL. Frecuentemente, con el método GET, las cadenas se vuelven muy largas para que las manejen las scripts o el servidor . El método POST envía al servidor pequeñas porciones en lugar de largas cadenas de información lo que facilita el manejo de los datos.
Autor. Ing. Oscar Marcelo Yumiceba Asquel Teléfono 09-3-743-345 3 978-900 ext. 2550 Mail: jacutraguta@hotmail.com
Pag # 52
Oscar Marcelo Yumiceba Asquel, Nació en la ciudad de Quito el 14 de Diciembre del 1958, estudio en la escuela de religiosos San Pedro Pascual, y sus estudios secundarios los culminó en el Colegio Brasil, para luego ingresar a la Universidad Católica del Ecuador y obtener el título de Ingeniero Civil; continuando con sus estudios ingresó a la Politécnica Nacional del Ecuador para obtener la Maestría en Gerencia Empresarial, es un investigador y ha realizado varias obras en varios campos, como el arte culinario, informática, crucigramas, proyectos, la microempresa, el cálculo actuarial. Mail: jacutraguta@hotmail.com
Autor. Ing. Oscar Marcelo Yumiceba Asquel Teléfono 09-3-743-345 3 978-900 ext. 2550 Mail: jacutraguta@hotmail.com