Page 1

INSTITUTO SALESIANO DE FORMACIÓN TÉCNICA LEÓN XIII

INSTITUTO SALESIANO DE FORMACIÓN TÉCNICA LEÓN XIII S05 – Diseño de Paginas Web.doc

Página 1 de 82

DISEÑO DE PAGINAS WEB Ing. Paula Carolina Carrasco García

I. OBJETIVOS 1. Comprender la estructura del lenguaje HTML y los elementos fundamentales de su programación. 2. Utilizar las acciones que se pueden realizar en Javascript para crear efectos dinámicos en Páginas Web. 3. Conocer la estructura lógica de los efectos que se le puedan dar a una pagina Web. 4. Realizar un proyecto que permita aplicar los conceptos de HTML y Javascript en el diseño de una pagina Web con Dreamweaver. II. TEMARIO Diseño de Paginas Web es una asignatura que reúne los conceptos de programación en lenguajes como HTML y Javascript para diseñar paginas Web y, posteriormente implementar un diseño en un entorno grafico utilizando la herramienta Dreamweaver 1. Fundamentos de Páginas Web. En este capitulo se hará un repaso de los temas necesarios para lograr un mayor entendimiento de la finalidad del diseño de paginas Web y su utilidad, se estudiarán muchos de los temas involucrados en el diseño y publicación de una pagina en la Web. 2. Introducción al Lenguaje HTML HTML es un lenguaje muy sencillo que permite describir hipertexto, es decir, texto presentado de forma estructurada y agradable, con enlaces (hipervínculos) que conducen a otros documentos o fuentes de información relacionadas, y con inserciones multimedia (gráficos, sonido...). 3. Introducción al Javascript Javascript es un lenguaje de programación utilizado para crear pequeños programas encargados de realizar acciones dentro del ámbito de una página Web. Con Javascript se pueden crear efectos especiales en las páginas y definir interactividades con el usuario. 4. Manejo de Dreamweaver en Diseño de Paginas Web Se implementará por medio de esta herramienta el diseño de una página Web dinámica utilizando los conceptos mencionados de HTML y Javascript.

INSTIITUTO SALESIANO DE FORMACION TÉCNICA LEON XIII

1


INSTITUTO SALESIANO DE FORMACIÓN TÉCNICA LEÓN XIII

INSTITUTO SALESIANO DE FORMACIÓN TÉCNICA LEÓN XIII S05 – Diseño de Paginas Web.doc

Página 2 de 82

La Tabla 1 relaciona los temas que se van a trabajar en esta asignatura con su respectiva intensidad horaria y cronograma. TEMA I. Fundamentos de Paginas Web 1. Reseña Histórica 2. Servicios de Internet II. Introducción al Lenguaje HTML 1. Comandos Básicos 2. Manejo de Hipervínculos 3. Marcos 4. Tablas 5. Menús III. Introducción al Javascript 1. Comandos Básicos Examen I Presentación Avance de Proyecto 2. Aplicaciones con Javascript 3. Operadores 4. Funciones IV. Dreamweaver 1. Entorno de Programador 2. Entorno de Diseño Examen II Presentación Proyecto 2. Entorno de Diseño TOTAL HORAS

HRS 8 3 5 23 3 5 5 5 5 24 5 3 3 5 5 3 26 10 6 2 3 5 81

SEMANA 1–2 1 2 3-7 3 4 5 6 7 8 - 12 8 9 10 11 12 13 - 18 13-14 15-16 17 18 18

III. METODOLOGÍA Diseño de Páginas Web es una asignatura teórico - práctica, la cual reúne los conceptos básicos de Herramientas como lenguaje HTML, Javascript y Dreamweaver, en cuanto a desarrollo de páginas Web. Se realizarán clases presenciales, dirigidas por el profesor encargado de la asignatura. Antes de cada clase es deber del estudiante haber investigado sobre los temas que se van a trabajar. El profesor desarrollará talleres individuales y grupales al finalizar la exposición de cada tema. A lo largo del semestre se realizarán prácticas de laboratorio para reforzar los conceptos teóricos vistos en clase enfocados al manejo de Internet y de la Herramienta Dreamweaver.

INSTIITUTO SALESIANO DE FORMACION TÉCNICA LEON XIII

2


INSTITUTO SALESIANO DE FORMACIÓN TÉCNICA LEÓN XIII

INSTITUTO SALESIANO DE FORMACIÓN TÉCNICA LEÓN XIII S05 – Diseño de Paginas Web.doc

Página 3 de 82

IV. EVALUACIÓN DESCRIPCIÓN Trabajos, Talleres y Hoja de avance. Quices Examen 1 Examen 2

% 35 15 25 25

SEMANA 1-18 1-18 7 15

FECHA Semana 1-17 Semana 1-17

V. DEFINICION DE TRABAJOS DE INVESTIGACION Y PROYECTO FINAL.

Proyecto Final El estudiante deberá presentar un proyecto final al terminar la asignatura que será evaluado por el docente de la asignatura y un grupo de jurados asignados de acuerdo a los requerimientos exigidos:  El proyecto debe incluir una aplicación Web desarrollada durante el semestre.  El grupo de trabajo es de tres y solo tres personas.  La exposición se realizará en EXPOSISTEMAS ante jurados y estudiantes.  La nota será personalizada de acuerdo al grado de dominio que demuestre cada estudiante en la presentación del proyecto.  El grupo de trabajo debe entregar una carpeta con toda la documentación de desarrollo del proyecto, que tendrá también una calificación dentro de la nota correspondiente al proyecto final.  El grupo de trabajo, deberá entregar un anteproyecto planteando los fundamentos de cada desarrollo. (objetivos, justificación y antecedentes como mínimo) aplicando al documento las normas ICONTEC.  La fecha de presentación del proyecto es el día 28 de Junio de 2006.

VI. GLOSARIO ATTACHMENT: Anexos, Archivos Adjuntos; los anexos representan información que viaja en un mensaje de correo electrónico, pero no tienen el formato de éste. Los anexos típicamente son documentos de Word, Excel, imágenes, aplicaciones, etc, y pueden transmitir virus (a diferencia del correo electrónico normal, que no lo hace). APPLICATIONS: Aplicaciones, Son piezas de software que, usualmente herramientas de trabajo de los usuarios. Ejemplos son los procesadores de palabras, las hojas electrónicas, los browsers, etc. BANDWIDTH: Ancho de banda, Es común denominar ancho de banda digital a la cantidad de datos que se pueden transmitir en una unidad de tiempo. Por ejemplo, una línea ADSL de 256 kbps puede, teóricamente, enviar 256000 bits (no bytes) por segundo. Esto es en realidad la tasa de transferencia máxima permitida por el sistema,

INSTIITUTO SALESIANO DE FORMACION TÉCNICA LEON XIII

3


INSTITUTO SALESIANO DE FORMACIÓN TÉCNICA LEÓN XIII

INSTITUTO SALESIANO DE FORMACIÓN TÉCNICA LEÓN XIII S05 – Diseño de Paginas Web.doc

Página 4 de 82

que depende del ancho de banda analógico, de la potencia de la señal, de la potencia de ruido y de la codificación de canal. Un ejemplo de banda estrecha es la que se realiza por medio de una conexión telefónica, y un ejemplo de banda ancha es la que se realiza por medio de una conexión DSL, microondas, cablemódem o T1. Cada tipo de conexión tiene su propio ancho de banda analógico y su tasa de transferencia máxima. El ancho de banda y la saturación redil son dos factores que influyen directamente sobre la calidad de los enlaces BROWSER: Navegador, Aplicación que sirve para examinar páginas web. Los más utilizados son Netscape Navigator e Internet Explorer. CLIENT: Cliente, Toda aquella aplicación que trabaja en conjunto con un servidor. Generalmente, el cliente reside en la computadora del usuario y responde a los deseos de éste, enviando al servidor la petición de información que sea necesaria e interpretando la respuesta para presentarla al usuario. CHAT: Charla, un programa de software que permite que la gente se escriba, intercambiando mensajes entre sí en tiempo real. CONNECTION: Conexión, una manera de conectar su computadora con la página Inicio de Internet. Los usuarios generalmente tienen un abono para llamar por teléfono a un ISP (Internet Service Provider). Los usuarios de textos (Word) a menudo se conectan a través de líneas del tipo T1 o T3. DATA BASE: Base De Datos, un programa para manejar listas que no sean solamente números, como las direcciones, guías telefónicas, inventarios... Una base de datos está integrada por archivos que contienen registros que a su vez tienen campos. DOMAIN: Dominio, el nombre único para una computadora conectada a Internet. El nombre es un número con el formato nnn.nnn.nnn.nnn, pero la mayoría de los dominios también tienen un alias, como www.microsoft.com. DOWNLOAD: Descargar, Procedimiento mediante el cual un usuario conectado a Internet "baja" a su computadora información contenida en un Server. E-MAIL: Correo Electrónico, Representa uno de los servicios más utilizados de Internet. Permite intercambiar mensajes en modo texto, de forma muy rápida, entre dos o más personas. FREEWARE: Software Libre, software que se ofrece gratis. FTP: File Transfer Protocol, Protocolo de Transferencia de Archivos, es un servicio que facilita la transferencia de archivos de entre computadoras a través de Internet. HOME PAGE: Pagina inicial de un website. Los browsers buscan usualmente una página llamada "index.html". INSTIITUTO SALESIANO DE FORMACION TÉCNICA LEON XIII

4


INSTITUTO SALESIANO DE FORMACIÓN TÉCNICA LEÓN XIII

INSTITUTO SALESIANO DE FORMACIÓN TÉCNICA LEÓN XIII S05 – Diseño de Paginas Web.doc

Página 5 de 82

HTML: HyperText Markup Language, lenguaje de etiquetado de hipertexto, es el lenguaje que se utiliza para crear las páginas Web, un lenguaje muy sencillo que permite combinar gráficos, textos y enlaces. HTTP: HiperText Transfer Protocol, Protocolo de transferencia de hipertexto. Controla el intercambio de documentos de hipertexto entre servidores y clientes. HYPERLINK: Link, vínculo, abreviatura de o hipervínculo. Área activa de una página web que permite, al pulsar sobre ella, que nuestro browser nos presente otra página diferente u otra parte de la misma página. Generalmente (aunque no necesariamente) consisten en texto de color azul subrayado. Los hiperenlaces constituyen el alma del hipertexto y, por tanto, de las páginas web. HYPERTEXT: Hipertexto, Documento que combina el texto con los Hiperlinks. TCP/IP: Protocolo de Control de Transporte / Protocolo Internet: Constituye realmente dos protocolos trabajando en conjunto y representa la base sobre la cual esta construida toda la Internet. Una de las características del TCP/IP es que divide los mensajes en partes más pequeñas denominadas "paquetes" y cada uno de ellos tiene la dirección IP de origen y la de destino, por lo que los paquetes son independientes entre sí, aunque pertenezcan al mismo mensaje. INTERNET: Conjunto de redes interconectadas entre sí mediante el protocolo TCP/IP. Es llamada la "red de redes" debido a su carácter mundial, y su popularidad se basa en la gran cantidad de servicios que ofrece. IP ADDRESS: Dirección Ip: Número que se asigna a cada computadora que está conectada a Internet (o que utiliza el protocolo IP). Consiste en 4 números de 8 bits cada uno (0 al 255), separados por puntos. Ejemplos de direcciones IP son: 10.0.0.1 y 159.90.133.18. MOTOR SEARCH: Motor de búsqueda, software que encuentra documentos a través de Internet, indexa el texto y puede ser a su vez buscado el mismo, para proveer una lista de documentos que coincidan con las palabras claves. NETWORK: Red, un juego de computadoras unidas entre sí, de manera permanente. NEWSGROUP: Grupo de Noticias, un grupo de debates en Internet, donde los mensajes y las respuestas son dadas a conocer para que las lean todos sus miembros. PROTOCOL: Protocolo, reglas sobre como se conducirá una comunicación entre dispositivos electrónicos. REFRESH: Refrescar, hacer que el navegador vuelva a desplegar o cargar la página. SEARCH: Búsqueda, buscar palabra(s) específica(s) o caracter(es) en un documento o en la Internet.

INSTIITUTO SALESIANO DE FORMACION TÉCNICA LEON XIII

5


INSTITUTO SALESIANO DE FORMACIÓN TÉCNICA LEÓN XIII

INSTITUTO SALESIANO DE FORMACIÓN TÉCNICA LEÓN XIII S05 – Diseño de Paginas Web.doc

Página 6 de 82

SERVER: Servidor, Aplicación que se encarga de proveer un servicio. El web es uno de los servicios típicos ofrecidos en Internet, y el servidor web más popular actualmente es el "Apache Web Server". SERVICES: Servicios: Conjunto de facilidades y herramientas ofrecidas por Internet. Para que funcionen, requieren del uso de clientes y servidores. TAG: Etiqueta:. Se denominan de esta manera a las instrucciones del lenguaje HTML. Se caracterizan porque siempre están delimitadas por paréntesis angulares < >. TEMPLATE: Plantilla, Es una página web que únicamente contiene la estructura básica que queremos mantener en nuestro website. Se utiliza como la base a partir de la cual se crea cada página web nueva. URL: Universal Resource Locator: Localizador Universal de Recursos. Es la denominación mediante la cual se tiene acceso a algún servicio de Internet. Los nombres de dominio son URL's. UPLOAD: Cargar, Procedimiento mediante el cual un usuario conectado a Internet "sube" a un servidor la información contenida en su computadora. VIRUS: Virus, es un programa de computadora que realiza tareas sin su consentimiento o permiso. Puede ser inofensivo pero muy molesto o también muy dañino. WEB EDITOR: Editor Web: Aplicación orientada a facilitar la creación de páginas web. WEBSITE: Sitio Web, Conjunto de páginas web estructuradas como un todo coherente. Entre las características que debería tener todo website están facilidad de navegación e interactividad. WWW: WORLD WIDE WEB, El servicio más popular de Internet puesto que permite un fácil acceso a recursos de información como texto, imágenes, sonido y video. Su facilidad de uso proviene del hecho de que la interfaz es gráfica y utiliza intensivamente los hiperenlaces .Red de Ámbito Mundial, Una parte de Internet, dedicada a la presentación de documentos a través de Hipervínculos.

INSTIITUTO SALESIANO DE FORMACION TÉCNICA LEON XIII

6


INSTITUTO SALESIANO DE FORMACIÓN TÉCNICA LEÓN XIII

INSTITUTO SALESIANO DE FORMACIÓN TÉCNICA LEÓN XIII S05 – Diseño de Paginas Web.doc

Página 7 de 82

VII. DESARROLLO DE LA ASIGNATURA Capítulo I. “Fundamentos de Paginas Web” ___________________________________________________ ___________ PRIMERA A TERCERA A CLASE: “¿Qué es Internet?” Lugar: Salón de Clase 1. Desarrollo Teórico 2. Taller ___________________________________________________ ___________

Que es Internet? Internet es una Red de Redes porque está hecha a base de unir muchas redes locales de ordenadores, o sea de unos pocos ordenadores en un mismo edificio o empresa. Además, ésta es "La Red de Redes" porque es la más grande. Prácticamente todos los países del mundo tienen acceso a Internet. En algunos, como los del Tercer Mundo, sólo acceden los multimillonarios y en otros como USA o los países más desarrollados de Europa, no es difícil conectarse. Por la Red Internet circulan constantemente cantidades increíbles de información. Por este motivo se le llama también La Autopista de la Información. Hay 50 millones de "Internautas", es decir, de personas que "navegan" por Internet en todo el Mundo. Se dice "navegar" porque es normal el ver información que proviene de muchas partes distintas del Mundo en una sola sesión. Una de las ventajas de Internet es que posibilita la conexión con todo tipo de ordenadores, desde los INSTIITUTO SALESIANO DE FORMACION TÉCNICA LEON XIII

7


INSTITUTO SALESIANO DE FORMACIÓN TÉCNICA LEÓN XIII

INSTITUTO SALESIANO DE FORMACIÓN TÉCNICA LEÓN XIII S05 – Diseño de Paginas Web.doc

Página 8 de 82

personales, hasta los más grandes que ocupan habitaciones enteras. Incluso podemos ver conectados a la Red cámaras de vídeo, robots, y máquinas de refrescos.

Historia de la Red Internet Internet nació en EE.UU. hace unos 30 años. Un proyecto militar llamado ARPANET pretendía poner en contacto una importante cantidad de ordenadores de las instalaciones del ejército de EE.UU. Este proyecto gastó mucho dinero y recursos en construir la red de ordenadores más grande en aquella época. Al cabo del tiempo, a esta red se fueron añadiendo otras empresas. Así se logró que creciera por todo el territorio de EE.UU. Hace unos 10 años se conectaron las instituciones públicas como las Universidades y también algunas personas desde sus casas. Fue entonces cuando se empezó a extender Internet por los demás países del Mundo, abriendo un canal de comunicaciones entre Europa y EE.UU. Internet crece a un ritmo vertiginoso. Constantemente se mejoran los canales de comunicación con el fin de aumentar la rapidez de envío y recepción de datos. Cada día que pasa se publican en la Red miles de documentos nuevos, y se conectan por primera vez miles de personas. Con relativa frecuencia aparecen nuevas posibilidades de uso de Internet, y constantemente se están inventando nuevos términos para poder entenderse en este nuevo mundo que no para de crecer.

INSTIITUTO SALESIANO DE FORMACION TÉCNICA LEON XIII

8


INSTITUTO SALESIANO DE FORMACIÓN TÉCNICA LEÓN XIII

INSTITUTO SALESIANO DE FORMACIÓN TÉCNICA LEÓN XIII S05 – Diseño de Paginas Web.doc

Página 9 de 82

Los países en gris disponen de acceso a Internet en la actualidad EE.UU. es el país que más uso hace de Internet con diferencia. Esto queda claramente reflejado en el siguiente gráfico. Es por esto que casi toda la información que vemos en Internet se encuentra en Inglés.

INSTIITUTO SALESIANO DE FORMACION TÉCNICA LEON XIII

9


INSTITUTO SALESIANO DE FORMACIÓN TÉCNICA LEÓN XIII

INSTITUTO SALESIANO DE FORMACIÓN TÉCNICA LEÓN XIII S05 – Diseño de Paginas Web.doc

Página 10 de 82

Lugares del Mundo donde más se usa Internet

Hoy se conectan a Internet 200 millones de personas. Internet crece exponencialmente, tanto en recursos como en usuarios.

Número de ordenadores con Nombre de Dominio, desde 1989 hasta 1997 Servicios de Internet Las posibilidades que ofrece Internet se denominan servicios. Cada servicio es una manera de sacarle provecho a la Red independiente de las demás. Una persona podría especializarse en el manejo de sólo uno de estos servicios sin necesidad de saber nada de los otros. Sin embargo, es conveniente conocer todo lo que puede ofrecer Internet, para poder trabajar con lo que más nos interese. Los servicios más usados en Internet son: Correo Electrónico, World Wide Web, y FTP El Correo Electrónico nos permite enviar cartas escritas con el ordenador a otras personas que tengan acceso a la Red. Las cartas quedan acumuladas en Internet hasta el momento en que se piden. Es INSTIITUTO SALESIANO DE FORMACION TÉCNICA LEON XIII

10


INSTITUTO SALESIANO DE FORMACIÓN TÉCNICA LEÓN XIII

INSTITUTO SALESIANO DE FORMACIÓN TÉCNICA LEÓN XIII S05 – Diseño de Paginas Web.doc

Página 11 de 82

entonces cuando son enviadas al ordenador del destinatario para que pueda leerlas. El correo electrónico es casi instantáneo, a diferencia del correo normal, y además muy barato. Podemos cartearnos con cualquier persona del Mundo que disponga de conexión a Internet. La World Wide Web, o WWW La WWW convierte el acceso a la Internet en algo sencillo para el público en general lo que da a ésta un crecimiento explosivo. Es relativamente sencillo recorrer la Web y publicar información en ella, las herramientas de la WWW crecieron a lo largo de los últimos tres años hasta ser las más populares. Permite unir información que está en un extremo del planeta con otro en un lugar distante a través de algo que se denomina hipervínculo, al hacer click sobre éste nos comunica con el otro sector del documento o con otro documento en otro servidor de información. Nace en 1989 en un laboratorio Europeo de Física de partículas (CERN), los investigadores querían un método único que realizara la actividad de encontrar cierta información, traerla a la computadora y ver algún papers y/o gráfico a través de una interface única, eliminando la complejidad de diversas herramientas. A finales de 1990 los investigadores ya tenían un browsers en modo texto y uno en modo gráfico para la computadora NEXT. En 1992 se publica para el público en general y a medida que fue avanzando el proyecto, se agregaron interfaces a otros servicios como WAIS, FTP, Telnet y Gopher. La comunidad de Internet adoptó rápidamente ésta herramienta y comenzó a crear sus propios servidores de WWW para publicar información, incluso algunos comenzaron a trabajar en clientes WWW. A finales de 1993 los browsers se habían desarrollado para una gran variedad de computadoras y sistemas operativos y desde allí a la fecha, la WWW es una de las formas más populares de acceder a los recursos de la red. Para acceder a la WWW se debe ejecutar en la computadora cliente un browser, ésta es una aplicación que sabe como interpretar y mostrar documentos hipertextuales. Un documento hipertextual es un texto que contiene vínculos con otros textos, gráficos sonido vídeo y animaciones. Los browser mas conocidos

INSTIITUTO SALESIANO DE FORMACION TÉCNICA LEON XIII

11


INSTITUTO SALESIANO DE FORMACIÓN TÉCNICA LEÓN XIII

INSTITUTO SALESIANO DE FORMACIÓN TÉCNICA LEÓN XIII S05 – Diseño de Paginas Web.doc

Página 12 de 82

son el Mosaic (uno de los primeros) y actualmente Netscape y Explorer de Microsoft. Cuando recuperamos un documento de la WWW, este es con formato y puede ser visto en distintas computadoras, para asegurarnos que este se vea como se debe ver existe un formato o lenguaje llamado HTML, que es un conjunto de instrucciones sencillas que indican como se estructura ese documento, el browser interpreta los comandos HTML y presenta el documento formateado para su visión por el usuario. El FTP (File Transfer Protocol) nos permite enviar ficheros de datos por Internet. Ya no es necesario guardar la información en disquetes para usarla en otro ordenador. Con este servicio, muchas empresas informáticas han podido enviar sus productos a personas de todo el mundo sin necesidad de gastar dinero en miles de disquetes ni envíos. Muchos particulares hacen uso de este servicio para por ejemplo dar a conocer sus creaciones informáticas a nivel mundial.

Redes de Ordenadores La forma que más se usaba para compartir información entre ordenadores hace unos años era grabar los ficheros a disquetes. Estos se podían leer más tarde desde otro ordenador. De esta manera, un documento que una persona creaba en su ordenador podía ser sacado por impresora o corregido desde otro. Se dio un paso adelante cuando aparecieron las primeras redes de ordenadores. Muchos ordenadores podían transferir información entre ellos. Esto agilizaba considerablemente el trabajo en las oficinas o en los centros de investigación. Hoy en día, todas las grandes empresas tienen los ordenadores conectados por Red. De esta forma una sucursal en Barcelona puede acceder a los datos de la sucursal de Madrid, por ejemplo. Los cajeros automáticos consultan la información de una cuenta bancaria a través de una Red de ordenadores que une todos los cajeros del país. Hay los siguientes tipos de redes:

INSTIITUTO SALESIANO DE FORMACION TÉCNICA LEON XIII

12


INSTITUTO SALESIANO DE FORMACIÓN TÉCNICA LEÓN XIII

INSTITUTO SALESIANO DE FORMACIÓN TÉCNICA LEÓN XIII S05 – Diseño de Paginas Web.doc

Página 13 de 82

Redes Locales (LAN: Local Area Network): Son redes que unen ordenadores cercanos, en la misma habitación o edificio. Se caracterizan por su gran rapidez en la transferencia de datos y son relativamente sencillas de instalar.

Redes de Área Amplia (WAN: Wide Area Network): Son cables de comunicaciones que unen redes locales separadas por grandes distancias. Son más lentas que las Redes Locales, y sólo se pueden instalar por empresas especializadas en Telecomunicaciones.

Redes de área metropolitana (MAN: Metropolitan Area Network): comprenden una ubicación geográfica determinada "ciudad, municipio", y su distancia de cobertura es mayor de 4 Km. Es básicamente una gran versión de LAN y usa una tecnología similar.

Para que un ordenador se conecte a una Red Local se necesita que disponga de una "Tarjeta de Red". Sirve para enviar y recibir la información entre el ordenador y la Red. La tarjeta es un circuito electrónico del tamaño de un libro pequeño que va introducido en la caja del ordenador. Un cable de Red se ha de conectar a esta tarjeta para unir físicamente Red y ordenador. Estructura de la Red Internet En los últimos años se han desarrollado grandes redes que unían ordenadores de empresas o de particulares. Estas redes, eran de tipo LAN o WAN. Internet es otra Red que está por encima de éstas y que las une a todas. En resumen: Internet es una red de alcance mundial que une una gran cantidad de redes grandes de ordenadores. Esto afecta al usuario de Internet, puesto que le permite contactar con gente y ordenadores de todo el mundo desde su propia casa. Internet funciona con la estrategia "Cliente/Servidor", lo que significa que en la Red hay ordenadores Servidores que dan una información concreta en el momento que se solicite, y por otro lado están los ordenadores que piden dicha información, los llamados Clientes.

INSTIITUTO SALESIANO DE FORMACION TÉCNICA LEON XIII

13


INSTITUTO SALESIANO DE FORMACIÓN TÉCNICA LEÓN XIII

INSTITUTO SALESIANO DE FORMACIÓN TÉCNICA LEÓN XIII S05 – Diseño de Paginas Web.doc

Página 14 de 82

Existe una gran variedad de "lenguajes" que usan los ordenadores para comunicarse por Internet. Estos "lenguajes" se llaman Protocolos. Se ha establecido que en Internet, toda la información ha de ser transmitida mediante el Protocolo TCP/IP.

Protocolo TCP/IP TCP/IP son las siglas de "Transfer Control Protocol / Internet Protocol". Éste es el lenguaje establecido para la Red Internet. Antes de su creación, este protocolo tuvo mucho éxito en el campo de los grandes ordenadores (máquinas UNIX). El protocolo TCP/IP presenta varias ventajas con respecto a otros protocolos de red, siendo quizá ésta, la razón de que se haya establecido como standard en la red Internet. Estas ventajas se explican a continuación. La principal característica del TCP/IP es que establece la comunicación por medio de paquetes de información. Cuando un ordenador quiere mandar a otro un fichero de datos, lo primero que hace es partirlo en trozos pequeños (alrededor de unos 4 Kb) y posteriormente enviar cada trozo por separado. Cada paquete de información contiene la dirección en la Red donde ha de llegar, y también la dirección de remite, por si hay que recibir respuesta. Los paquetes viajan por la Red de forma independiente. Entre dos puntos de la Red suele haber muchos caminos posibles. Cada paquete escoge uno dependiendo de factores como saturación de las rutas o posibles atascos. De este modo, encontramos normalmente situaciones como que parte de un fichero que se envía desde EE.UU. hasta España pase por cable submarino hasta el Norte de Europa y de allí hasta España, y otra parte venga por satélite directamente a Madrid. Esta importante característica permite que Internet sea la red más estable del Mundo. Al ser una red tan grande y compleja existen cientos de vías alternativas para un destino concreto. Así, aunque fallen algunos ordenadores intermediarios o no funcionen correctamente algunos canales de información, siempre existe comunicación entre dos puntos de la Red. Otra notable y muy positiva consecuencia del uso del TCP/IP es que admite la posibilidad de que algún paquete de información se pierda por INSTIITUTO SALESIANO DE FORMACION TÉCNICA LEON XIII

14


INSTITUTO SALESIANO DE FORMACIÓN TÉCNICA LEÓN XIII

INSTITUTO SALESIANO DE FORMACIÓN TÉCNICA LEÓN XIII S05 – Diseño de Paginas Web.doc

Página 15 de 82

el camino. Puede ocurrir que un ordenador intermediario se apague o se sature justo cuando un trozo de un fichero que estemos enviando o recibiendo pase por dicho ordenador. En algunos servicios de Internet, como el FTP, esto no es un problema, puesto que automáticamente se vuelve a pedir el envío del paquete perdido, para que el fichero solicitado llegue a su destino íntegramente. Sin embargo, en otros servicios como es la Navegación por la World Wide Web, la pérdida de uno de estos paquetes implica que en nuestras pantallas no aparezca una imagen o un texto en el lugar donde debería estar. De todos modos, siempre existe la posibilidad de volver a solicitar dicha información. Este punto, más que una ventaja, podría parecer un inconveniente. Sin embargo, no es así, puesto que es mejor que se pierda un pequeño porcentaje de la información a transferir, a que se pierda toda por un corte de la red. Como el TCP/IP funciona en base a paquetes, siempre queda abierta la posibilidad de volver a solicitar el paquete perdido, y completar la información sin necesidad de volver a transferir todo el conjunto de datos. Direcciones IP y Nombres de Dominio Cada ordenador que se conecta a Internet se identifica por medio de una dirección IP. Ésta se compone de 4 números comprendidos entre el 0 y el 255 ambos inclusive y separados por puntos. Así, por ejemplo una dirección IP podría ser: 155.210.13.45. No está permitido que coexistan en la Red dos ordenadores distintos con la misma dirección, puesto que de ser así, la información solicitada por uno de los ordenadores no sabría a cual de ellos dirigirse. Cada número de la dirección IP indica una sub-red de Internet. Hay 4 números en la dirección, lo que quiere decir que hay 4 niveles de profundidad en la distribución jerárquica de la Red Internet. En el ejemplo anterior, el primer número, 155, indica la sub-red del primer nivel donde se encuentra nuestro ordenador. Dentro de esta sub-red puede haber hasta 256 "sub-subredes". En este caso, nuestro ordenador estaría en la "sub-sub-red" 210. Así sucesivamente hasta el tercer nivel. El cuarto nivel no representa una sub-red, sino que indica un ordenador concreto. Resumiendo, los tres primeros números indican la red a la que pertenece nuestro ordenador, y el último sirve para diferenciar nuestro ordenador de los otros que "cuelguen" de la misma red.

INSTIITUTO SALESIANO DE FORMACION TÉCNICA LEON XIII

15


INSTITUTO SALESIANO DE FORMACIÓN TÉCNICA LEÓN XIII

INSTITUTO SALESIANO DE FORMACIÓN TÉCNICA LEÓN XIII S05 – Diseño de Paginas Web.doc

Página 16 de 82

Esta distribución jerárquica de la Red Internet, permite enviar y recibir rápidamente paquetes de información entre dos ordenadores conectados en cualquier parte del Mundo a Internet, y desde cualquier sub-red a la que pertenezcan. Un usuario de Internet, no necesita conocer ninguna de estas direcciones IP. Las manejan los ordenadores en sus comunicaciones por medio del Protocolo TCP/IP de manera invisible para el usuario. Sin embargo, necesitamos nombrar de alguna manera los ordenadores de Internet, para poder elegir a cual pedir información. Esto se logra por medio de los Nombres de Dominio. Los nombres de dominio, son la traducción para las personas de las direcciones IP, las cuales son útiles sólo para los ordenadores. Así por ejemplo, yahoo.com es un nombre de dominio. Como se puede ver, los nombres de domino son palabras separadas por puntos, en vez de números en el caso de las direcciones IP. Estas palabras pueden darnos idea del ordenador al que nos estamos refiriendo. Cuando sepamos un poco más sobre nombres de dominio, con sólo ver yahoo.com podremos concluir que: "Una empresa de EE.UU. que da cierta información por Internet es Yahoo". No todos los ordenadores conectados a Internet tienen un nombre de dominio. Sólo suelen tenerlo, los ordenadores que reciben numerosas solicitudes de información, o sea, los ordenadores servidor. Por contra, los ordenadores cliente, los que consultan por Internet, no necesitan un nombre de dominio, puesto que ningún usuario de la Red va a pedirles información. El número de palabras en el nombre de dominio no es fijo. Pueden ser dos, tres, cuatro, etc. Normalmente son sólo dos. La última palabra del nombre de dominio representa en EE.UU. que tipo de organización posee el ordenador al que nos referimos:     

com: Empresas (Companies). edu: Instituciones de carácter Educativo, Universidades. org: Organizaciones no Gubernamentales. gov: Entidades del Gobierno. mil: Instalaciones Militares.

INSTIITUTO SALESIANO DE FORMACION TÉCNICA LEON XIII

mayormente

16


INSTITUTO SALESIANO DE FORMACIÓN TÉCNICA LEÓN XIII

INSTITUTO SALESIANO DE FORMACIÓN TÉCNICA LEÓN XIII S05 – Diseño de Paginas Web.doc

Página 17 de 82

En el resto de los países, que se unieron a Internet posteriormente, se ha establecido otra nomenclatura. La última palabra indica el país:         

co: Colombia es: España fr: Francia uk: Reino Unido (United Kingdom) it: Italia jp: Japón au: Australia ch: Suiza ir: Irlanda

Por lo tanto, con sólo ver la última palabra del nombre de dominio, podemos averiguar donde está localizado el ordenador al que nos referimos. Por medio de lo que se llaman, "Servidores de Nombres de Dominio (DNS)", Internet es capaz de averiguar la dirección IP de un ordenador a partir de su nombre de dominio.

¿Qué es una página Web? Una aplicación Web consta de una o más páginas conectadas entre sí. Un buen punto de partida sería decir que una página Web es un archivo de texto que contiene lenguaje de marcas de hipertexto (HTML), etiquetas de formato y vínculos a archivos gráficos y a otras páginas Web. El archivo de texto se almacena en un servidor de Web al que pueden acceder otras computadoras conectadas ese servidor, vía Internet o una LAN. Al archivo se puede acceder utilizando exploradores Web que no hacen otra cosa que efectuar una transferencia de archivos e interpretación de las etiquetas y vínculos HTML, y muestran el resultado en el monitor. Otra definición sería que una pagina Web es un formulario interactivo que utiliza una red de computadoras. Hay dos propiedades de las páginas Web que la hacen únicas: que son INSTIITUTO SALESIANO DE FORMACION TÉCNICA LEON XIII

17


INSTITUTO SALESIANO DE FORMACIÓN TÉCNICA LEÓN XIII

INSTITUTO SALESIANO DE FORMACIÓN TÉCNICA LEÓN XIII S05 – Diseño de Paginas Web.doc

Página 18 de 82

interactivas y que pueden usar objetos multimedia. El término multimedia se utiliza para describir archivos de texto, sonido, animación y vídeo que se combinan para presentar la información, por ejemplo, en una enciclopedia interactiva o juego. Cuando esos mismos tipos de archivo se distribuyen por Internet o una LAN, se puede utilizar el término hipermedia para describirlos. Gracias al World Wide Web ya es posible disponer de multimedia a través de Internet. Cada página Web tiene asociado una dirección o URL (Universal Resource Locator), por ejemplo la página principal de Microsoft es http://www.microsoft.com/ un URL es la ruta a una página determinada dentro de Internet, se utiliza de la misma forma que para localizar un archivo en una computadora, en este caso indica que es la página principal que esta situada en el servidor de Microsoft que esta conectado a la WWW. El nombre de la página principal dentro del servidor es normalmente default.htm o Index.htm, estos son los archivos que se despliegan en el navegador si no se indica cual y solo se indica el nombre base de URL.

Código HTML Los documentos de hipertexto (En este caso, las Páginas Web) están escritos con el lenguaje HTML (HyperText Markup Language), un lenguaje codificado que hace mucho más que crear hipervínculos. El código HTML le pone marcas especiales a un documento de texto para indicarle al programa navegador como mostrar al texto. Por ejemplo <FONT FACE=ARIAL COLOR=#FF0000> significa que use la fuente (tipo de letra) Arial y el color rojo cuando despliegue el texto. Las instrucciones del lenguaje están basadas en el idioma Inglés. Cada nueva versión de las normas del HTML agrega más opciones de formateo y la capacidad de poder hacer otras cosas como reproducir sonidos o ejecutar animaciones. INSTIITUTO SALESIANO DE FORMACION TÉCNICA LEON XIII

18


INSTITUTO SALESIANO DE FORMACIÓN TÉCNICA LEÓN XIII

INSTITUTO SALESIANO DE FORMACIÓN TÉCNICA LEÓN XIII S05 – Diseño de Paginas Web.doc

Página 19 de 82

ELEMENTOS PRINCIPALES Y REGLAS DE CONSTRUCCIÓN DE UNA PÁGINA WEB

El especialista Thomas Powell define una página Web como la unión de textos, e imágenes que forman el documento que aparece en una ventana del navegador cuando el usuario accede a una dirección electrónica.

Consideraciones a tener en cuenta:  El tamaño máximo recomendado de una página no debe superar los 30 kb, actualmente se está trabajando con un estándar de 60 kb.  Algunos expertos consideran que una página debe ocupar máximo el especio de dos pantallazas, sin embargo, todavía no hay un consenso en cuanto a la altura de los documentos.  Se toma como ancho base la resolución que utilicen los monitores. Según www.thecounter.com, el 47% de las personas tiene monitores entre 14 y 15 pulgadas, los cuales cuentan con una resolución de 800*600 pixeles. Además, afirma que el 40% de los computadores usados para navegar tienen una resolución de 1024*768 píxeles. Nota: Para Colombia, son más populares los monitores de 14 y 15 pulgadas, y se trabaja a una resolución generalmente de 800*600.

Si diseña a una resolución mayor sus páginas, aparecerán barras de Scroll para desplazarse por el resto del contenido. 

No utilice letreros que digan al usuario que el sitio que están viendo se verá mejor si utilizan una resolución de 800*600 o que se aconseja tener el navegador tal, lo anterior espantan al visitante.

INSTIITUTO SALESIANO DE FORMACION TÉCNICA LEON XIII

19


INSTITUTO SALESIANO DE FORMACIÓN TÉCNICA LEÓN XIII

INSTITUTO SALESIANO DE FORMACIÓN TÉCNICA LEÓN XIII S05 – Diseño de Paginas Web.doc

Página 20 de 82

El experto Thomas Powell en su libro Diseños de sitos Web, menciona dos tipos de páginas Web: 

 

Principales o de inicio: Páginas de entrada al sitio, son claves para que el usuario regrese y se basa en renovar la información de esta página. Paginas interiores o subpáginas: Se desarrollan los contenidos propuestos de la página principal. Ventanas flotantes que van en las páginas interiores generalmente, su función es mostrar datos relacionados de un enlace y las páginas de búsqueda, que se usan para ofrecer los resultados de una herramienta de búsqueda.

ZONAS DE UNA PÁGINA

INSTIITUTO SALESIANO DE FORMACION TÉCNICA LEON XIII

20


INSTITUTO SALESIANO DE FORMACIÓN TÉCNICA LEÓN XIII

INSTITUTO SALESIANO DE FORMACIÓN TÉCNICA LEÓN XIII S05 – Diseño de Paginas Web.doc

Página 21 de 82

Descripción: 1. Área editorial o de contenido Aquí se desarrolla todo el contenido: noticias, titulares, descripciones y reseña histórica, entre otros. Comprende la parte central de las páginas, algunas empresas la dividen en dos columnas de tamaños diferentes para incluir material gráfico y fotografías de respaldo. En esta área pueden mezclarse varios tipos de contenidos que hablen del mismo tema. Por ejemplo, una página que presenta un cuaderno podría tener su descripción (con características y precios) junto a comentarios de sus usuarios y enlaces a páginas de productos relacionados como esferos o lápices. 2. Textos Hay que tener especial atención en la letra de las páginas Web. Recomiendan usar fuentes planas que carezcan de adornos, tales como: Verdana, Tahoma y Arial. El tamaño más usado es de 2 píxeles, que en Word equivale a una letra de tamaño 11 o 12. El color de letra recomendado es negro sobre un fondo blanco, el uso de fondos negros con letras claras sólo mortifica al lector. Para los enlaces (hipervínculos) a otras páginas Web, el color estándar es el azul y el estilo subrayado. Hacerlo de otra forma confunde al usuario. No haga que todo el texto que quiere mostrar quede en una página, si hay mucha información se recomienda convertir este texto en un archivo para que el usuario lo descargue. 3. Barra de navegación Contiene la lista de vínculos de las secciones y servicios principales del sitio de Internet, se ubica a la izquierda de la página y brinda una visión global de su estructura. Utilice para esta barra nombres cortos, en lo posible de una sola palabra. Que sean directos, es decir permitan deducir que es lo que va a encontrar y no utilizar modismos propios de nuestra región. Por ejemplo, si alguien ve el titular “Deportes” el usuario sabrá que ahí encontrará una sección que habla sobre el tema, por el contrario “cositas ricas” podría significar para alguien: sitios pornográficos, comida, chismes, entre otras. INSTIITUTO SALESIANO DE FORMACION TÉCNICA LEON XIII

21


INSTITUTO SALESIANO DE FORMACIÓN TÉCNICA LEÓN XIII

INSTITUTO SALESIANO DE FORMACIÓN TÉCNICA LEÓN XIII S05 – Diseño de Paginas Web.doc

Página 22 de 82

Según Jacob Nielsen experto en el tema, recomienda que los vínculos de esta barra estén en orden alfabético para que los visitantes tengan una opción lógica de la información a encontrar. Sin embargo, algunos recomiendan priorizar de acuerdo con la importancia de de sus secciones más visitadas. 4. Imágenes Estas son uno de los mayores inconvenientes a la hora de diseñar una página Web, su uso excesivo termina por hacer lenta su carga en los navegadores. Las imágenes se utilizan especialmente en:  Los gráficos del cabezote  Los botones de herramienta de búsqueda  Banners publicitarios  Títulos de las secciones  Fotografías de soporte  Animaciones con flash o gif Actualmente, la mayoría de los sitios Web consideran que el peso máximo de una página Web debe ser de 60 Kb. Una imagen con un tamaño mediano con seguridad duplica esta cifra. Por ello, los sitios de comercio electrónico donde el usuario necesita conocer los productos, se recomienda anexar pequeñas imágenes a la página del artículo, con enlaces a ventanas emergentes que muestran fotos más grandes. Los formatos recomendados para trabajar son GIF y JPEG. Según, Andrés Arboleda, trabajador de la empresa AXESNET menciona que una imagen debe pesar como máximo 20 Kb. 5. Banners Son utilizados para hacer una promoción animada de un producto. Se utiliza para su construcción el software FLASH generalmente o en algunos casos versiones alternativas en formato GIF. Actualmente, se utilizan frases directas con vínculos (en lugar de imágenes) para mejorar la velocidad de la página. Empresas como TERRA fijaron el peso máximo de cada BANNER entre 12 y 15 Kb para un tamaño de 468*60 píxeles y solo permiten hasta dos por cada página.

INSTIITUTO SALESIANO DE FORMACION TÉCNICA LEON XIII

22


INSTITUTO SALESIANO DE FORMACIÓN TÉCNICA LEÓN XIII

INSTITUTO SALESIANO DE FORMACIÓN TÉCNICA LEÓN XIII S05 – Diseño de Paginas Web.doc

Página 23 de 82

6. Barra derecha Se le conoce también como “BARRA DE ENLACES ESPECIALES”, se utiliza para secciones que no son fijas. El uso de esta barra va de acuerdo con las necesidades de cada empresa. Algunas por ejemplo, la utilizan para promocionar sus tiendas en línea y separar su área comercial de la editorial. Empresas de noticias la emplean para poner allí sucesos de última hora, o la utilizan incluso para poner banners publicitarios o herramientas de búsqueda. Nota: Si el área editorial necesita más espacio en las páginas interiores pueden desaparecer. 7. Herramientas de búsqueda Se utilizan para que los usuarios encuentren información o los productos que necesitan, para ello se utilizan palabras claves. Se basan en su sencillez y simplicidad. No utilice nunca nombres que confundan por ejemplo: un usuario entiende más fácil si coloca una casilla para escribir texto con un botón que dice buscar que cuando emplea un letrero que diga “Encuentre su producto haciendo clic aquí”. No restrinja tampoco la búsqueda de la información colocando una lista que contenga buscar por: titulo, autor, editorial… “El éxito de amazon radica en que se puede escribir cualquier cosa para la búsqueda”. Recuerde también que la ortografía es una parte integrante de muchos de nosotros o que sepan la palabra exacta de lo que quieren buscar, una herramienta tan poco flexible, que no permita caracteres especiales sin duda no contribuye a que el usuario la utilice. 8. Cabezote Aquí se ubica el logotipo de la empresa y los elementos permanentes de navegación del usuario. Siempre va en la parte superior de la página y muestra los colores que identifican la compañía. No debe ser un elemento estático de decoración, una parte de él puede tener enlaces a servicios asociados (archivos), a algunas secciones o la sección de ayuda. En las páginas interiores el logotipo siempre debe tener un enlace a la página de inicio, es definitivamente el medio para que un usuario perdido se escape. El tamaño del cabezote no debe ser tan grande que elimine espacio para la información, ni tan pequeño para que no se vea.

INSTIITUTO SALESIANO DE FORMACION TÉCNICA LEON XIII

23


INSTITUTO SALESIANO DE FORMACIÓN TÉCNICA LEÓN XIII

INSTITUTO SALESIANO DE FORMACIÓN TÉCNICA LEÓN XIII S05 – Diseño de Paginas Web.doc

Página 24 de 82

Terra Colombia sugiere que las medidas máximas sean de 476 píxeles de ancho por 70 píxeles de altura. Es un sitio ideal para poner la fecha y el lugar de origen del sitio Web.

Capítulo II. “Introducción al Lenguaje HTML” ___________________________________________________ ___________ CUARTA A SEXTA CLASE: “Lenguaje HTML” Lugar: Sala de Sistemas II 1. Desarrollo Teórico Y Práctico 2. Talleres ___________________________________________________ ___________ Marco Teórico HTML (HyperText Markup Language) es un lenguaje de programación muy sencillo que permite describir hipertexto, es decir, texto presentado de forma estructurada y agradable, con enlaces (hyperlinks) que conducen a otros documentos o fuentes de información relacionadas, y con inserciones multimedia (gráficos, sonido...). Este lenguaje es el que se utiliza para presentar información en forma de páginas en la World Wide Web, por página entenderemos el documento que aparece en el visualizador. HTML se compone de una serie de comandos; se debe especificar en el texto la estructura lógica del contenido (títulos, párrafos de texto normal, enumeraciones, definiciones, citas, etc.), así como los diferentes efectos que se quieren dar (cursiva, negrita, o un gráfico determinado, que son interpretados por el visualizador, o programa que utilizamos para navegar por Internet. En última instancia es el visualizador el que ejecuta todas las órdenes contenidas en el código HTML, de forma que un visualizador puede estar capacitado para unas prestaciones, pero no para otras. Así, podremos especificar que una página tenga una imagen

INSTIITUTO SALESIANO DE FORMACION TÉCNICA LEON XIII

24


INSTITUTO SALESIANO DE FORMACIÓN TÉCNICA LEÓN XIII

INSTITUTO SALESIANO DE FORMACIÓN TÉCNICA LEÓN XIII S05 – Diseño de Paginas Web.doc

Página 25 de 82

de fondo, o un texto parpadeando, pero si nuestro visualizador no está capacitado para esas funciones, no podremos comprobarlas. Para definir esta estructura en el formato de las páginas, con HTML debemos utilizar lo que se denomina Etiquetas o Tags, también se pueden añadir algunas funcionalidades como Hipervínculos que nos permiten saltar de una pagina a otra solo haciendo click con el Mouse. Procesador de texto: los documentos HTML están en formato de texto sencillo (también conocido como ASCII). El procesador de texto se utiliza para escribir el documento en lenguaje HTML, que será posteriormente interpretado por el programa navegador correspondiente. El texto escrito tiene dos partes bien diferenciadas, el contenido de la información y el conjunto de etiquetas del lenguaje HTML, que permiten determinar el estilo y el tipo de letra que tendrá la presentación del documento final y que pueda ser leído por un programa cliente. Para escribir un párrafo sin estilo específico (por defecto) no es necesario poner etiqueta alguna. Lo único que hay que tener en cuenta es que al presentar el documento se hace caso omiso de los espacios, tabulaciones y retornos de carro que se encuentren en el texto fuente. Por esta razón se utilizan una serie de etiquetas que sustituyen a estos elementos. El texto escrito no sufrirá ninguna modificación, exceptuando los acentos, la letra "ñ" y un conjunto de caracteres especiales a los que, más adelante, se dedica un apartado. Un navegador del WWW o programa cliente que permite el acceso a páginas WWW de Internet: El programa cliente permite ver una página antes de introducirla en un servidor. De este modo, se pueden comprobar las modificaciones de las distintas páginas que se diseñan. Con el procesador de textos se crea un fichero con un nombre al que necesariamente hay que añadirle la extensión html. Por ejemplo: prueba.html. Si se añade algo nuevo se deben guardar los cambios antes de visualizar el nuevo documento en el navegador. El documento se abre con el comando Abrir del menú File del programa cliente. Los cambios son reflejados en la pantalla. Si se trabaja con el programa cliente y el procesador de textos al mismo tiempo, activando INSTIITUTO SALESIANO DE FORMACION TÉCNICA LEON XIII

25


INSTITUTO SALESIANO DE FORMACIÓN TÉCNICA LEÓN XIII

INSTITUTO SALESIANO DE FORMACIÓN TÉCNICA LEÓN XIII S05 – Diseño de Paginas Web.doc

Página 26 de 82

simplemente la opción Actualizar se pueden comprobar los cambios efectuados. Existen ciertos programas que nos ayudan a automatizar este proceso (editores de lenguaje HTML), pero es muy conveniente comenzar a hacerlo de manera manual para comprender bien la estructura del lenguaje HTML.

Etiquetas del Lenguaje HTML El lenguaje HTML usa etiquetas o directivas (tags) para indicarle al programa cliente de Web como mostrar el texto. Las etiquetas están formadas por determinados caracteres metidos entre los signos <>, y con la barra </> cuando se trata de la segunda etiqueta de un efecto (la de cierre). Por ejemplo: <title> para abrir y </title> para cerrar.

ESTRUCTURA DE UNA PAGINA (DOCUMENTO HTML) Las etiquetas <HTML> nos indican el comienzo y el final de una pagina, un documento HTML comienza con la etiqueta <html>, y termina con </html>. Dentro de estas etiquetas del documento hay dos zonas bien diferenciadas: el encabezamiento, delimitado por <HEAD> y</HEAD>, que sirve para definir diversos valores válidos en todo el documento, que el usuario común no verá pero que tienen mucha importancia para la descripción de la pagina, palabras claves y definir el programa que generó el HTML, en caso de utilizar un editor como (Dreamweaver o Visual.Net), la función de estas etiquetas se define en el momento de relacionar la pagina con un motor de búsqueda, el cual indexa las paginas de su Base de Datos con base en las etiquetas ubicadas en el <HEAD> ----- </HEAD>, también dentro de estas etiquetas podemos ubicar Scripts de Javascript que aprenderemos mas adelante.

INSTIITUTO SALESIANO DE FORMACION TÉCNICA LEON XIII

26


INSTITUTO SALESIANO DE FORMACIÓN TÉCNICA LEÓN XIII

INSTITUTO SALESIANO DE FORMACIÓN TÉCNICA LEÓN XIII S05 – Diseño de Paginas Web.doc

Página 27 de 82

Otra etiqueta que está dentro del <HTML> es el <BODY> y </BODY>, que traduce Cuerpo y que para nosotros es muy importante ya que lo que ubiquemos dentro de esta es lo que el usuario está observando en el navegador, la información del documento. Veamos el siguiente ejemplo: <HTML> Encabezado <HEAD> <TITLE>Título documento</TITLE>

del

</HEAD> <BODY> Cuerpo

Texto del documento </BODY> </HTML>

El elemento <TITLE> permite especificar el título de un documento HTML. Este título no forma parte del documento en sí: no aparece, por ejemplo, al principio del documento sino que sirve como título de la ventana del programa que la muestra. Existen muchos otros elementos que se engloban dentro del encabezamiento pero para la estructura básica del lenguaje html en su nivel básico no son necesarios. El cuerpo de un documento HTML contiene el texto que, con la presentación y los efectos que se decidan, se presentará ante el usuario. Dentro del cuerpo son aplicables todos los efectos que se van a mencionar en el resto de esta guía. Dichos efectos se especifican exclusivamente a través de "directivas". Estas líneas son permanentes en una página Web. Siempre van a estar presentes no importando qué tan corta o tan larga sea la página y el contenido.

INSTIITUTO SALESIANO DE FORMACION TÉCNICA LEON XIII

27


INSTITUTO SALESIANO DE FORMACIÓN TÉCNICA LEÓN XIII

INSTITUTO SALESIANO DE FORMACIÓN TÉCNICA LEÓN XIII S05 – Diseño de Paginas Web.doc

Página 28 de 82

Guardado del archivo como página Web Cuando se haya escrito el código de la página Web, es necesario guardar el archivo como una página Web. Una página Web tiene la extensión HTML, la cual se debe especificar en el momento de guardar la página. Una vez guardado el archivo con esta extensión, se puede crear un acceso directo para este archivo o se puede abrir directamente desde el sitio en el que se guardó. Ejercicio: Abrir el Bloc de notas y copiar el siguiente código que se muestra. Cuando termine de capturar el código, guárdelo como Index.htm (si existe y pide reemplazar el archivo, responda afirmativamente).

El resultado se muestra a continuación.

Una vez creada nuestra página Web, será necesario modificarla. Para ello, necesitamos abrir el código de la página. Si se abre la página en un procesador de textos como Microsoft Word, sólo veremos el texto, pero el código no es accesible para el usuario.

INSTIITUTO SALESIANO DE FORMACION TÉCNICA LEON XIII

28


INSTITUTO SALESIANO DE FORMACIÓN TÉCNICA LEÓN XIII

INSTITUTO SALESIANO DE FORMACIÓN TÉCNICA LEÓN XIII S05 – Diseño de Paginas Web.doc

Página 29 de 82

Si deseamos obtener el código, será necesario abrir el bloc de notas y abrir la página desde ahí, utilizando la opción Abrir, y en el cuadro de diálogo Abrir, se elige Todos los archivos, en la lista Tipo (esto porque la página tiene una extensión diferente al filtro mostrado). Sin embargo, una manera más cómoda y rápida, es acceder al código desde la página Web abierta. Para ello, se hace lo siguiente:  

Se hace clic con el botón secundario en un área que no sea un objeto (como una imagen, un hipervínculo, etc.) En el menú contextual, se elige la opción Ver código fuente.

Estilos de Título HTML maneja seis estilos de título aplicables al texto. Cuando se aplica un estilo, el programa interpreta el estilo y lo aplica mientras no encuentre un signo de cierre. Los estilos de título se enumeran de H1 a H6, siendo H1 el más grande y H6 el más pequeño. Aunque el programador tiene la opción de utilizar un tamaño diferente mediante la instrucción FontSize. A continuación se muestra el código y el resultado de la utilización de títulos en una página Web.

El resultado de este código se muestra a continuación.

INSTIITUTO SALESIANO DE FORMACION TÉCNICA LEON XIII

29


INSTITUTO SALESIANO DE FORMACIÓN TÉCNICA LEÓN XIII

INSTITUTO SALESIANO DE FORMACIÓN TÉCNICA LEÓN XIII S05 – Diseño de Paginas Web.doc

Página 30 de 82

De aquí en adelante, sólo se mostrará la ventana de resultados en los ejercicios. El alumno tiene la obligación de usar las instrucciones que se van explicando para obtener los resultados requeridos en los ejercicios.

COMANDOS BÁSICOS DE FORMATEO DE TEXTO Negrita, Cursiva, Subrayado Al igual que otros programas, en HTML puede aplicar el efecto Negrita, Cursiva o Subrayado al texto. Para el efecto negrita use <B>, para cursiva use <I>, para subrayado use <U> con su respectivo signo de cierre. Ejemplo: <B> Estilos Negrita</B><BR> <I> Estilo Cursiva</I><BR> <U>Estilo subrayado</U><BR> La instrucción <BR> de las líneas de arriba se utiliza para insertar un retorno de carro. Si no se incluye esta instrucción en cada línea de texto, la página Web juntará las tres líneas de texto en una sola línea. Esto significa que cada vez que deseemos insertar un salto de línea, debemos incluir esta instrucción en el lugar donde se desee generar una nueva línea. El resultado se muestra a continuación.

INSTIITUTO SALESIANO DE FORMACION TÉCNICA LEON XIII

30


INSTITUTO SALESIANO DE FORMACIÓN TÉCNICA LEÓN XIII

INSTITUTO SALESIANO DE FORMACIÓN TÉCNICA LEÓN XIII S05 – Diseño de Paginas Web.doc

Página 31 de 82

Existe una instrucción que permite remarcar partes de un párrafo, esta instrucción es la instrucción STRONG. Por ejemplo, este código: Este es un ejemplo de <strong> instrucciones de formateo de texto </strong> Produce este resultado:

La instrucción <EM> funciona de forma similar a <I>. Cuando se aplica <EM>, el texto afectado aparece siempre en estilo cursiva. Por ejemplo, el siguiente código: Este es un ejemplo de instrucciones de <em>formateo de texto</em> Produce el siguiente resultado:

Se usa el estilo H1 para el título principal, <B> o <STRONG> para el remarcado negrita y <U> para el subrayado. Doble salto de línea <BR> para la separación de un párrafo con otro.

INSTIITUTO SALESIANO DE FORMACION TÉCNICA LEON XIII

31


INSTITUTO SALESIANO DE FORMACIÓN TÉCNICA LEÓN XIII

INSTITUTO SALESIANO DE FORMACIÓN TÉCNICA LEÓN XIII S05 – Diseño de Paginas Web.doc

Página 32 de 82

MARCADOR DE PÁRRAFO Cuando se desee indicar a HTML un inicio de párrafo y utilizar una alineación junto con la instrucción, se debe utilizar <P>. Este comando se usa junto con las instrucciones de alineación <Left>, <Center> o <Right> para modificar la posición del texto en pantalla. Por ejemplo, la siguiente línea de código, centra el texto en la pantalla. <p align=center>Texto centrado en la pantalla </p> El siguiente código:

Produjo el resultado que se muestra a continuación.

Si se desea alinear texto a la derecha, debe introducir una expresión como ésta: <p align=right>Texto justificado a la derecha</p> Para trazar una línea de separación utilice el comando <HR>. Esta instrucción sin modificadores, traza una línea horizontal predeterminada. Si se incluyen modificadores, se podrá personalizar la apariencia de la línea. Ejemplo: <HR> Traza una línea horizontal. INSTIITUTO SALESIANO DE FORMACION TÉCNICA LEON XIII

32


INSTITUTO SALESIANO DE FORMACIÓN TÉCNICA LEÓN XIII

INSTITUTO SALESIANO DE FORMACIÓN TÉCNICA LEÓN XIII S05 – Diseño de Paginas Web.doc

Página 33 de 82

Para modificar la apariencia predeterminada, haga esto: <HR Width=200> Traza una línea de ancho de pantalla (en píxeles) de 200 píxeles. Esta línea de código produciría una línea como ésta:

Si se desea cambiar el color, es necesario incluir el modificador Color=Color. Ejemplo: <HR Color=Blue>

COLOR E IMAGEN DE FONDO DE LA PÁGINA Puedes aplicar color de fondo a la página utilizando el siguiente modificador: bgcolor=Color Por ejemplo: <body bgcolor=cyan> Esta instrucción aplica el color CYAN al fondo de la página. La instrucción bgcolor se debe aplicar dentro de la instrucción <Body>. Para facilitar la utilización de colores de fondo mediante constantes de color, presentamos la siguiente tabla de colores: Color

Constante

Negro

BLACK

Azul

BLUE

INSTIITUTO SALESIANO DE FORMACION TÉCNICA LEON XIII

33


INSTITUTO SALESIANO DE FORMACIÓN TÉCNICA LEÓN XIII

INSTITUTO SALESIANO DE FORMACIÓN TÉCNICA LEÓN XIII S05 – Diseño de Paginas Web.doc

Verde

GREEN

Rojo claro

RED

Rosa intenso

MAGENTA

Marrón

FUCSIA

Gris

GRAY

Rosa claro

PINK

Amarillo

YELLOW

Blanco

WHITE

Verde claro

GREEN+

Rojo intenso

BLUE+

Cián Claro

BLUE/RED

Página 34 de 82

Además de que se pueden aplicar combinaciones con modificadores (con el signo +) a cada constante de color, puede utilizar modificadores con el signo /. Por ejemplo, la combinación MAGENTA/YELLOW, produce un color verde oliva claro. La forma más extensa de obtener colores es utilizando la representación hexadecimal del 0 a la F. Por ejemplo, la siguiente línea de código: <Body Bgcolor="#0FFFFF"> Produce un color azul aguamarina. Imagen de fondo Además de aplicar colores de fondo usando combinaciones como las mencionadas anteriormente, puedes aplicar imágenes como fondo de la página. Para ello, utiliza el modificador Img Background=Imagen. Por ejemplo, la siguiente línea de código aplica una imagen de fondo a la página. <body img background=imagen.bmp>

INSTIITUTO SALESIANO DE FORMACION TÉCNICA LEON XIII

34


INSTITUTO SALESIANO DE FORMACIÓN TÉCNICA LEÓN XIII

INSTITUTO SALESIANO DE FORMACIÓN TÉCNICA LEÓN XIII S05 – Diseño de Paginas Web.doc

Página 35 de 82

Para aplicar una imagen de fondo, debe ubicar la imagen en la misma ruta donde se encuentra la página, en su defecto, deberá especificar la ruta completa en el parámetro IMG BACKGROUND. La imagen de esta página fue retocada con efecto relieve. Sin embargo, puede acceder a la galería de imágenes para encontrar alguna imagen que desee aplicar. También puede utilizar una imagen animada de fondo. Para ello, debe buscar archivos con extensión GIF y verificar que sean animados.

COLOR DE TEXTO E HIPERVÍNCULOS Además de modificar el fondo de la página aplicando color de fondo o imágenes, es posible cambiar el color del texto de toda la página, así como el color de los vínculos. Para cambiar el color del texto de toda la página, use el modificador TEXT=Color. Por ejemplo: <body bgcolor=cyan Text=Blue> Se utiliza para aplicar color de fondo cyan y color de texto azul a toda la página. Si se desea que los hipervínculos no visitados aún tengan un color distinto al color azul predeterminado, debe hacer lo siguiente: <body bgcolor=cyan Text=Blue Link=Yellow Vlink=Gray> Esta instrucción aplica el color amarillo predeterminado para todos los hipervínculos de la página, y el color gris a los hipervínculos visitados.

INSTIITUTO SALESIANO DE FORMACION TÉCNICA LEON XIII

35


INSTITUTO SALESIANO DE FORMACIÓN TÉCNICA LEÓN XIII

INSTITUTO SALESIANO DE FORMACIÓN TÉCNICA LEÓN XIII S05 – Diseño de Paginas Web.doc

Página 36 de 82

MANEJO DE PÁRRAFOS Al igual que otros programas, HTML permite al programador modificar la apariencia predeterminada de los párrafos aplicando sangrías tanto de primera línea como de párrafos, e interlineados. Sangrías Para aplicar sangría de primera línea se usa el modificar text-indent. Para aplicar sangría de párrafo se usa el comando Blockquote. Por ejemplo, la siguiente línea de código, aplica una sangría de 50 píxeles para la primera línea de un párrafo. <p style="text-indent:50">Esta es la primera línea de texto con sangría de cincuenta píxeles de distancia desde el borde izquierdo.</p> El resultado de aplicar esta línea de código, es el siguiente:

Además de la sangría de primera línea que puede ser especificada con un número en píxeles, HTML permite utilizar una sangría automática mediante el comando Blockquote. Por ejemplo, la siguiente instrucción muestra cómo se puede aplicar una sangría automática mediante el comando Blockquote. <Blockquote> Texto y otras instrucciones </Blockquote>

INSTIITUTO SALESIANO DE FORMACION TÉCNICA LEON XIII

36


INSTITUTO SALESIANO DE FORMACIÓN TÉCNICA LEÓN XIII

INSTITUTO SALESIANO DE FORMACIÓN TÉCNICA LEÓN XIII S05 – Diseño de Paginas Web.doc

Página 37 de 82

Interlineados En un procesador de textos los interlineados se utilizan mediante opciones de menús que permiten cambiar el espacio entre líneas de un párrafo. En HTML, el interlineado se controla con el modificador Lineheight. A diferencia de un procesador de textos como Microsoft Word que tiene unos interlineados predeterminados, HTML permite al usuario separar las líneas de un párrafo mediante porcentajes. Por ejemplo, la siguiente instrucción aplica un porcentaje de interlineado de 150%, equivalente a 1.5 líneas. <p align=justify style="line-height=150%"> El resultado se muestra en la siguiente ventana con dos párrafos, el párrafo modificado con interlineado y el párrafo normal.

Cada vez que desee aumentar el interlineado, deberá aumentar el porcentaje. En la línea de código anterior, se incluyó un modificador de alineación, align=justify, esto permite que el párrafo se justifique.

INSTIITUTO SALESIANO DE FORMACION TÉCNICA LEON XIII

37


INSTITUTO SALESIANO DE FORMACIÓN TÉCNICA LEÓN XIII

INSTITUTO SALESIANO DE FORMACIÓN TÉCNICA LEÓN XIII S05 – Diseño de Paginas Web.doc

Página 38 de 82

___________________________________________________ ___________ SÉPTIMA Y OCTAVA CLASE: “Lenguaje HTML” Lugar: Sala de Sistemas II 1. Desarrollo Teórico Y Práctico 2. Talleres ___________________________________________________ ___________ HIPERVÍNCULOS Un hipervínculo es un vínculo de una página Web o un archivo a otra página Web u otro archivo. Cuando un visitante hace clic en el hipervínculo, el destino se mostrará en un explorador Web, se abrirá o se ejecutará, en función del tipo de destino. El destino es con frecuencia otra página Web, pero también puede ser una imagen, un archivo multimedia, un documento de Microsoft Office, una dirección de correo electrónico o un programa. Por ejemplo, un hipervínculo a una página muestra la página en el explorador Web y un hipervínculo a un archivo .avi abre el archivo en un reproductor multimedia. Hipervínculos locales con marcadores Cuando se crea un hipervínculo local, lo que en realidad se hace es desplazarse hacia otro punto de la misma página Web. Para ello, primero debemos hacer referencia al marcador del hipervínculo con la instrucción href="#Marcador", donde Marcador es el marcador del hipervínculo. Posteriormente, cuando se desarrolle el marcador, se deberá anotar el nombre del marcador con la instrucción name="#marcador", donde marcador es el identificador utilizado en la instrucción href. A continuación se muestra un diagrama que ilustra el concepto de un hipervínculo local.

INSTIITUTO SALESIANO DE FORMACION TÉCNICA LEON XIII

38


INSTITUTO SALESIANO DE FORMACIÓN TÉCNICA LEÓN XIII

INSTITUTO SALESIANO DE FORMACIÓN TÉCNICA LEÓN XIII S05 – Diseño de Paginas Web.doc

Página 39 de 82

En la siguiente página encontrará un ejemplo de una página Web que utiliza marcadores de hipervínculos dentro del mismo documento. Observe que los marcadores se inician con las palabras claves <A Name>, para indicar que en esa sección inicia un marcador que podrá ser accedido desde cualquier parte del mismo documento, y las referencias a estos marcadores se aplican con la expresión <A Ref=#marcador>, donde marcador, es el nombre del marcador al que se desee acceder.

INSTIITUTO SALESIANO DE FORMACION TÉCNICA LEON XIII

39


INSTITUTO SALESIANO DE FORMACIÓN TÉCNICA LEÓN XIII

INSTITUTO SALESIANO DE FORMACIÓN TÉCNICA LEÓN XIII S05 – Diseño de Paginas Web.doc

Página 40 de 82

Ambas páginas fueron desarrolladas en la misma ventana, es decir el código fue escrito de arriba hacia abajo. La mecánica de esta página fue aplicar varios espacios (BR) para así poder desplazarse hacia la siguiente página y que ésta se ubique hasta arriba (TOP). En situaciones normales, no sería necesario dejar tantos espacios, bastaría con escribir los temas uno tras otro en el orden deseado. La siguiente figura muestra el código utilizado para obtener ambas páginas mostradas arriba. Por lo tanto, si quiere probar lo mismo, sólo debe copiar este código en el bloc de notas y guardarlo como MARCADORES.HTM, y obtendrá un página Web con dos ventanas iguales a las que se muestran arriba. <html> <head><title>Página Web con marcadores</title></head> <body TextColor="blue"> <a name="#Inicio"><h1>Página principal</h1></A> <hr> <p align="justify" Style="text-indent:50">

INSTIITUTO SALESIANO DE FORMACION TÉCNICA LEON XIII

40


INSTITUTO SALESIANO DE FORMACIÓN TÉCNICA LEÓN XIII

INSTITUTO SALESIANO DE FORMACIÓN TÉCNICA LEÓN XIII S05 – Diseño de Paginas Web.doc

Página 41 de 82

Esta página contiene marcadores o hipervínculos locales que permiten al usuario desplazarse a través del documento mediante estos hipervínculos. El uso de marcadores proporciona una manera práctica y sencilla de seccionar el documento y encontrar información rápidamente. No podían faltar en un curso de páginas Web los enlaces o hipervínculos, que son la esencia misma de la Red. Los también llamados hipertextos son los textos o los objetos sobre los que podemos hacer clic para que nos lleven a otra parte del documento, a otro archivo del mismo sitio de Internet o a otra página de Internet, entre otras funciones. Habíamos dejado nuestra página en la lección anterior diseñada en una tabla que ocupaba todo el documento. En esta lección vamos a insertar todos los hipervínculos que tiene que haber en nuestra página. <br><br> </p> <a "target="_top" href="#Marcadores">Haga clic para obtener más información sobre marcadores</a> <br><br><br><br><br><br><br><br><br><br><br><br><br><br ><br><br><br><br><br><br><br><br> <br><br><br><br><br><br> <A name="#Marcadores"><h1>Qué son los marcadores</h1></A> Los marcadores son hipervínculos o enlaces internos que permiten desplazarse a través del mismo documento. Cuando el usuario hace clic sobre un enlace, la página se desplaza hasta la sección donde se haya definido un marcador. <br> Para definir un marcador, debe empezar con la expresión <b><i>A Name="#Marcador"</i></b> en el sitio donde desee definir un marcador. Para hacer referencia al marcador definido, use la expresión <b><i>A Href="#Marcador"</i></b>, para acceder a dicho marcador. <br> Un hipervínculo con marcador es un enlace entre un hipertexto y una sección de un documento. <br><br><br><br><br><br><br><br><br><br><br><br> <A href="#Inicio">Volver arriba</A> INSTIITUTO SALESIANO DE FORMACION TÉCNICA LEON XIII

41


INSTITUTO SALESIANO DE FORMACIÓN TÉCNICA LEÓN XIII

INSTITUTO SALESIANO DE FORMACIÓN TÉCNICA LEÓN XIII S05 – Diseño de Paginas Web.doc

Página 42 de 82

</body> </html>

Hipervínculos externos A una página Web local Para organizar de forma más inteligente la información de un sitio Web puede manejarse más de una página. En cualquier momento será necesario acceder a dicha página, entonces puede crear un hipervínculo que le permita dirigirse a esa página de la siguiente manera: <a ref="páginaweb.htm">Texto del hipervínculo</a> La siguiente gráfica ilustra el concepto de relacionar páginas en un mismo sitio con acceso mediante hipervínculos.

Cuando accede a una página relacionada, puede controlar la ventana donde se mostrará el contenido de esta. Por ejemplo, puede mostrar la siguiente página en una ventana diferente, en la misma venta o en el mismo marco (en el caso de que se manejen marcos). Para realizar esta operación debe escribir una instrucción como la siguiente: <a target="_blank ref="paginaweb.htm">Texto del hipervínculo</a> Esta instrucción indica a HTML que la siguiente página que se abrirá utilizará una ventana nueva para su contenido. El siguiente ejemplo ilustra el uso de hipervínculos que acceden a otros documentos externos a la página Web actual.

INSTIITUTO SALESIANO DE FORMACION TÉCNICA LEON XIII

42


INSTITUTO SALESIANO DE FORMACIÓN TÉCNICA LEÓN XIII

INSTITUTO SALESIANO DE FORMACIÓN TÉCNICA LEÓN XIII S05 – Diseño de Paginas Web.doc

Página 43 de 82

El código para realizar una página como la que se muestra en el ejemplo anterior, lo tiene a continuación. <html> <head><Title>Página con hipervínculos externos</title></head> <body> <h1>Mi página con hipervínculos externos</h1> <hr> <a href="Primera.htm">Primer hipervínculo</a><br> <a href="Segunda.htm">Segundo hipervínculo</a><br> <a href="tercera.htm">Tercer hipervínculo</a><br> </body> </html> Las páginas a las que acceden los hipervínculos se diseñan de forma independiente de la página actual. Si necesita saber cómo relacionar estas páginas, haga lo siguiente:  Una vez diseñada la página principal, guárdela con el nombre Principal.htm.  En el menú Archivo, elija Nuevo.  Diseñe una nueva página para el primer hipervínculo. Cuando termine guárdela con el nombre Primera.htm.  Repita estos pasos para las siguientes páginas (Segunda.htm, Tercera.htm). Cuando termine con todas las páginas, abra la página principal y pruebe haciendo clic en los hipervínculos de la página.

INSTIITUTO SALESIANO DE FORMACION TÉCNICA LEON XIII

43


INSTITUTO SALESIANO DE FORMACIÓN TÉCNICA LEÓN XIII

INSTITUTO SALESIANO DE FORMACIÓN TÉCNICA LEÓN XIII S05 – Diseño de Paginas Web.doc

Página 44 de 82

A una URL Así como pueden vincularse páginas Web dentro del mismo sitio, también podemos crear un hipervínculo que nos lleve a un sitio Web. Para ello, debemos utilizar la siguiente sintaxis: <a ref="http://www.sitioweb.com">Texto del hipervínculo</a> Por ejemplo, la siguiente página muestra unos hipervínculos a sitios de Internet.

El código para obtener la página mostrada, es el siguiente: <html> <head><title>Uso de URL</title></head> <body> <h1>Uso de URL</h1> <hr> <a href="http://www.todito.com.mx"><h3>Quiero acceder a Todito.com</a> <a href="http://www.mp3.com"><h3>Sitio de música MP3</a> <a href="http://www.1001juegos.com"><h3>Juegue como los mejores</a> </body> </html> Para poder acceder a dichos sitios, deberá estar conectado a Internet. Si prueba estos vínculos con conexión a Internet, verá que el contenido del INSTIITUTO SALESIANO DE FORMACION TÉCNICA LEON XIII

44


INSTITUTO SALESIANO DE FORMACIÓN TÉCNICA LEÓN XIII

INSTITUTO SALESIANO DE FORMACIÓN TÉCNICA LEÓN XIII S05 – Diseño de Paginas Web.doc

Página 45 de 82

sitio visitado, reemplaza el contenido de nuestra página. Para evitar esto, escriba la siguiente sintaxis: <a target="_blank" ref="http://www.sitioweb.com">Texto del hipervínculo</a> En la siguiente gráfica se muestra cómo el hipervínculo visitado muestra el contenido de Todito.com en una nueva ventana.

A un correo electrónico Un tipo de hipervínculo muy utilizado es a una dirección de correo electrónico. Muy a menudo nos topamos en Internet con expresiones que nos permiten pulsar un hipervínculo y nos remiten a un programa administrador de correos. Desde aquí podemos escribir un mensaje al usuario de correo que se especifique. Por ejemplo, observe la siguiente página.

INSTIITUTO SALESIANO DE FORMACION TÉCNICA LEON XIII

45


INSTITUTO SALESIANO DE FORMACIÓN TÉCNICA LEÓN XIII

INSTITUTO SALESIANO DE FORMACIÓN TÉCNICA LEÓN XIII S05 – Diseño de Paginas Web.doc

Página 46 de 82

Esta página hace lo siguiente: Cuando el usuario hace clic en la expresión subrayada para enviar el e-mail, abrirá un programa (en este caso propiamente), Outlook Express. La siguiente figura muestra las dos ventanas después de haber hecho clic en el hipervínculo.

En esta ventana podrá escribir el comentario que desee escribir al propietario del e-mail. El código para obtener el resultado mostrado arriba, lo verá a continuación.

INSERCIÓN DE IMÁGENES En una página Web puede insertar cualquier imagen. Las imágenes deben ser de tipo JPG, BMP o GIF. Para insertar una imagen, debe utilizar la siguiente sintaxis: <img src="imagen.jpg">

INSTIITUTO SALESIANO DE FORMACION TÉCNICA LEON XIII

46


INSTITUTO SALESIANO DE FORMACIÓN TÉCNICA LEÓN XIII

INSTITUTO SALESIANO DE FORMACIÓN TÉCNICA LEÓN XIII S05 – Diseño de Paginas Web.doc

Página 47 de 82

En ésta instrucción se da por defecto que la imagen que se inserta tiene la extensión JPG. Para insertar otro tipo de imagen sólo deberá especificar la extensión correspondiente. Las imágenes pueden ser adquiridas de la galería de imágenes de Microsoft, o de cualquier otra imagen digitalizada. Incluso se pueden crear iconos animados desde algún programa de animación, y usarlos en una página Web.

Tamaño y alineación de una imagen insertada En algún momento será necesario controlar la dimensión de la imagen insertada, sea para aumentarla o para disminuirla. En el ejemplo anterior se usó la instrucción <align=right>, para alinear la imagen a la derecha; además de esta instrucción, puede usar las instrucciones <center> y <align=Left> para ubicar la imagen al centro, o a la izquierda de la pantalla. Para controlar el tamaño de las imágenes, use las instrucciones <height=valor> o <Width=valor> para controlar la altura y la anchura de la imagen. También puede usar la instrucción <Border> con un valor mayor que 0, para aplicar un marco alrededor de la imagen. Por ejemplo, la página anterior fue modificada para mostrar dos imágenes, una a la izquierda y otra a la derecha con tamaños de 100 píxeles cada una.

INSTIITUTO SALESIANO DE FORMACION TÉCNICA LEON XIII

47


INSTITUTO SALESIANO DE FORMACIÓN TÉCNICA LEÓN XIII

INSTITUTO SALESIANO DE FORMACIÓN TÉCNICA LEÓN XIII S05 – Diseño de Paginas Web.doc

Página 48 de 82

Para poder escribir alrededor del texto debe utilizar la instrucción <align=left> para la imagen insertada. No obstante que si no usa dicha instrucción la imagen se alineará a la izquierda, la instrucción <align=left> permite aplicar el efecto que se muestra en la página. El código para aplicar obtener el diseño de la página mostrada arriba, se muestra a continuación.

Aplicación de bordes a imágenes Se dijo anteriormente que a una imagen insertada en una página Web se le puede aplicar un marco o borde. Además, si utiliza el modificador ALT, podrá especificar un mensaje o pista, cuando señale con el Mouse a la imagen. Para hacer esto, debe incluir dentro de la instrucción para insertar una imagen, la siguiente sintaxis: <img src="imagen.jpg" Border=valor Alt="Estudio=Progreso"> Un valor mayor que 0, aplicará un contorno a la imagen insertada. Si utiliza valor 0, será como si omitiera el modificar Border.

INSTIITUTO SALESIANO DE FORMACION TÉCNICA LEON XIII

48


INSTITUTO SALESIANO DE FORMACIÓN TÉCNICA LEÓN XIII

INSTITUTO SALESIANO DE FORMACIÓN TÉCNICA LEÓN XIII S05 – Diseño de Paginas Web.doc

Página 49 de 82

La página anterior fue modifica para aplicar contornos a las dos imágenes insertadas.

Cuando el Mouse se ubica sobre la imagen del estudiante, despliega un mensaje instantáneo aplicado en la instrucción ALT="cadena de mensaje". Si se desea aplicar espaciado horizontal o vertical, debe utilizar los modificadores hspace o vspace, con la instrucción de inserción de imágenes. Cuando se aplica espaciado horizontal, la siguiente imagen o texto se ajusta a la distancia indicada en hspace (en píxeles). Igual sucede cuando se aplica el modificar vspace, la siguiente imagen o párrafo insertado debajo de la imagen, se ajustará a la distancia indicada por hspace. Por ejemplo, observe la página anterior y se dará cuenta que el texto a la derecha de la imagen, está pegada del lado derecho de la misma. Ahora si observa la siguiente pantalla, verá que el texto tiene una separación de 20 píxeles respecto al lado derecho de la imagen. Se debe entender que la separación en orden horizontal aplicado a una imagen, afecta a ambos lados de la misma, es decir, si aplico 20 píxeles de separación, se aplicarán 20 a la izquierda, y 20 a la derecha de la imagen.

INSTIITUTO SALESIANO DE FORMACION TÉCNICA LEON XIII

49


INSTITUTO SALESIANO DE FORMACIÓN TÉCNICA LEÓN XIII

INSTITUTO SALESIANO DE FORMACIÓN TÉCNICA LEÓN XIII S05 – Diseño de Paginas Web.doc

Página 50 de 82

La siguiente pantalla muestra la página de productos de la papelería. Es un mosaico de imágenes insertadas controladas mediante los modificadores Height, Width, hspace y vspace.

El código para obtener esta página, se muestra a continuación. <img Border=1 src="Agenda.gif" Alt="Agenda Escolar $50.00" Height=80 Width=60> <img Border=1 src="Agenda2.jpg" Alt="Agenda Ejecutiva $100.00" Height=80 Width=60 hspace=20> <img Border=1 src="AgendaElectronica.gif" Alt="Agenda Electrónica $800.00" Height=80 Width=60> <img Border=1 src="OrganizaDiscos.jpg" Alt="Organizador de discos $120.00" Height=80 Width=60 hspace=20> <img Border=1 src="OrganizaLapiz.jpg" Alt="Organizador de lápices $50.00" Height=80 Width=60>

INSTIITUTO SALESIANO DE FORMACION TÉCNICA LEON XIII

50


INSTITUTO SALESIANO DE FORMACIÓN TÉCNICA LEÓN XIII

INSTITUTO SALESIANO DE FORMACIÓN TÉCNICA LEÓN XIII S05 – Diseño de Paginas Web.doc

Página 51 de 82

Imágenes como hipervínculos Para utilizar imágenes como hipervínculos, se debe usar la misma instrucción que para los hipervínculos de texto, a excepción de que a continuación de la instrucción se debe incluir la instrucción de inserción de imágenes. La siguiente línea de código muestra el ejemplo de inserción de imágenes como hipervínculos. <a href="carrera.htm"><img border=0 src="carrera.jpg" ></A> La primera instrucción indica el nombre de la página a la que se desee acceder cuando se haga clic en el hipervínculo. La segunda instrucción inserta la imagen en la página Web.

PELÍCULAS De forma parecida a las imágenes, las películas mediante dos formas, con la extensión .AVI o con la ambas maneras, HTML interpretará que se trata buscará reproducir el archivo en el explorador. La siguiente instrucción inserta una película de tipo encuentran en la galería de imágenes de Office.

pueden insertarse extensión .DAT. De de una película y AVI, de las que se

<img border="0" dynsrc="COUNT8.AVI" start="fileopen" > La primera instrucción indica que se insertará una imagen; la instrucción dynsrc, significa dynamic source (origen dinámico) y prepara al explorador para reproducir un archivo de película. La instrucción Start indica en qué momento iniciará la película, si no tiene parámetros, la película se iniciará automáticamente al abrir la página. Puede buscar películas y guardarlas en una carpeta, posteriormente, inserte una línea de código en el sitio que desee. Para reproducir una película al mover el Mouse sobre ella, agregue el parámetro mouseover al modificador start. Si desea que la película se reproduzca de forma infinita, agregue el parámetro loop con la expresión infinite. El ejemplo siguiente muestra la forma como debe usar el parámetro loop.

INSTIITUTO SALESIANO DE FORMACION TÉCNICA LEON XIII

51


INSTITUTO SALESIANO DE FORMACIÓN TÉCNICA LEÓN XIII

INSTITUTO SALESIANO DE FORMACIÓN TÉCNICA LEÓN XIII S05 – Diseño de Paginas Web.doc

Página 52 de 82

<img border="0" dynsrc="COUNT8.AVI" start="fileopen" loop="infinite"> Además de insertar películas con formato .AVI, HTML le permite insertar películas con extensión .DAT. Por ejemplo, la siguiente instrucción reproduce una película con extensión .DAT, llamada MUSIC01. Este archivo es un vídeo clip de Michael Jackson. Para reproducir correctamente el archivo de película, la página deberá estar en la misma ruta que el archivo a reproducir o en su defecto, hacer referencia correctamente al archivo. <img border="0" dynsrc="MUSIC01.DAT" start="fileopen"> Para ajustar el tamaño de la película, deberá usar los modificadores Height y Width, junto con la instrucción de inserción de la película. Por ejemplo: <img border="0" dynsrc="MUSIC01.DAT" start="fileopen" Width="300" Height="200">

INSTIITUTO SALESIANO DE FORMACION TÉCNICA LEON XIII

52


INSTITUTO SALESIANO DE FORMACIÓN TÉCNICA LEÓN XIII

INSTITUTO SALESIANO DE FORMACIÓN TÉCNICA LEÓN XIII S05 – Diseño de Paginas Web.doc

Página 53 de 82

___________________________________________________ ___________ NOVENA Y DECIMA CLASE: “Lenguaje HTML” Lugar: Sala de Sistemas II 1. Desarrollo Teórico Y Práctico 2. Talleres ___________________________________________________ ___________ NUMERACIÓN Y VIÑETAS Al igual que en un procesador de textos u otros programas, el lenguaje HTML permite aplicar viñetas, a excepción de que se cuenta sólo con tres tipos diferentes de viñetas. Viñetas Para aplicar viñetas debe hacerse uso de la instrucción <UL>. Esta instrucción indica al explorador que lo que sigue a continuación es una lista con viñetas. Por cada símbolo utilizado debe usar la instrucción <LI>, la cual se corresponde con cada línea de dato de la lista. Finalmente debe cerrar la lista de viñetas con la instrucción </UL>. Las siguientes líneas de código muestran la forma como debe introducirse cada expresión en la página Web para su correcta ejecución. <ul> <li>Viñeta 1</li> <li>Viñeta 2</li> <li>Viñeta 3</li> <li>Viñeta 4</li> </ul> Si copia estas líneas de código a una página Web, guarde los cambios y actualice la página para ver el resultado, debe mostrarse como la figura siguiente:

INSTIITUTO SALESIANO DE FORMACION TÉCNICA LEON XIII

53


INSTITUTO SALESIANO DE FORMACIÓN TÉCNICA LEÓN XIII

INSTITUTO SALESIANO DE FORMACIÓN TÉCNICA LEÓN XIII S05 – Diseño de Paginas Web.doc

Página 54 de 82

Si se desea cambiar el tipo de viñeta predeterminada, se debe incluir el parámetro TYPE junto con la instrucción <UL>. Por ejemplo, la siguiente línea de código, aplica el estilo círculo a la lista de viñetas. <ul type="circle"> <li>Viñeta 1</li> <li>Viñeta 2</li> <li>Viñeta 3</li> <li>Viñeta 4</li> </ul> El resultado se muestra a continuación:

Otro tipo de viñetas que puede usarse en una lista es el tipo cuadrado. Para ello, utilice el parámetro TYPE con la expresión square. El siguiente ejemplo aplica viñeta de tipo cuadrado a la lista. <ul type="square"> <li>Viñeta 1</li> <li>Viñeta 2</li> <li>Viñeta 3</li> <li>Viñeta 4</li> </ul> El resultado se muestra abajo.

INSTIITUTO SALESIANO DE FORMACION TÉCNICA LEON XIII

54


INSTITUTO SALESIANO DE FORMACIÓN TÉCNICA LEÓN XIII

INSTITUTO SALESIANO DE FORMACIÓN TÉCNICA LEÓN XIII S05 – Diseño de Paginas Web.doc

Página 55 de 82

Si se desea cambiar el color de la lista con viñetas, se debe incluir el parámetro STYLE="Color: nombrecolor". Por ejemplo, la siguiente línea de código aplica una viñeta de tipo cuadrada, con color de texto y viñeta azul. <ul type="square" style="color: blue"> Asimismo puede usar la instrucción <Font Color=Color> para modificar el color del texto.

Numeración Además de aplicar viñetas a una lista, puede sangrar una lista si usa una instrucción <UL> dentro de otra. Asimismo, puede usar numeración automática para genera listas de datos numeradas a partir de un valor. Para usar numeración debe aplicar la instrucción <OL> al principio de la lista y las instrucciones <li> para cada línea de dato; finalmente, debe cerrar la numeración con la instrucción </OL>. El siguiente fragmento de código es un ejemplo de cómo se debe ordenar una lista con numeración. <ol> <li>Primer número</li> <li>Segundo número</li> <li>Tercer número</li> <li>Cuarto número</li> </ol> El resultado de este bloque de código se muestra a continuación.

Para cambiar el tipo de numeración por letras o en representación romana, debe incluir el parámetro type con una expresión siguiente:

INSTIITUTO SALESIANO DE FORMACION TÉCNICA LEON XIII

55


INSTITUTO SALESIANO DE FORMACIÓN TÉCNICA LEÓN XIII

INSTITUTO SALESIANO DE FORMACIÓN TÉCNICA LEÓN XIII S05 – Diseño de Paginas Web.doc

Página 56 de 82

Expresión Resultado I

Números romanos mayúsculas.

con

letras

i

Números romanos minúsculas.

con

letras

A

Literales mayúsculas.

a

Literales minúsculas

El siguiente bloque de código muestra la forma correcta de utilizar las expresiones con el parámetro type, de manera que se puedan obtener diferentes tipos de viñetas. <ol type="A"> <li>Viñeta 1</li> <li>Viñeta 2</li> <li>Viñeta 3</li> <li>Viñeta 4</li> </ol> Resultado:

Si se desea iniciar la numeración desde un número mayor que 1, entonces debe incluir, junto con la instrucción <OL>, el parámetro start, que indica el número donde se desea iniciar la lista. El siguiente bloque de código se usa para ilustrar el tema en cuestión. <ol start="5"> <li>Línea 1</li> <li>Línea 2</li> <li>Línea 3</li> <li>Línea 4</li> </ol> El resultado es el siguiente:

INSTIITUTO SALESIANO DE FORMACION TÉCNICA LEON XIII

56


INSTITUTO SALESIANO DE FORMACIÓN TÉCNICA LEÓN XIII

INSTITUTO SALESIANO DE FORMACIÓN TÉCNICA LEÓN XIII S05 – Diseño de Paginas Web.doc

Página 57 de 82

Para iniciar con literales en un valor mayor que 1, se debe establecer el número correspondiente a la letra en que se desee iniciar. Por ejemplo, el siguiente bloque de texto, enumera una lista de temas iniciando desde la letra F. <ol type="A" start="6"> <li>Computadoras</li> <li>Impresoras</li> <li>Monitores</li> <li>Teclados</li> <li>Cámaras digitales</li> </ol> El resultado se muestra a continuación.

Para que los objetos se realicen correctamente debes ajustar la configuración de la página al tamaño deseado. Por ejemplo, para el título principal, se usó una diapositiva de tamaño horizontal de 20cm y 3 cm. Para el globo se usó una diapositiva de 20 cm. horizontal y 5 cm. vertical. Después de se hayan ajustado las diapositivas, se debe diseñar el contenido. El procedimiento para obtener esta página es el siguiente:  

Se busca una película de tipo GIF la cual se inserta en el lugar donde se encuentra las dos imágenes de personas. El título se diseñó en PowerPoint y se guardó como una imagen JPG. Se inserta en el lugar indicado. Asimismo, la imagen del INSTIITUTO SALESIANO DE FORMACION TÉCNICA LEON XIII

57


INSTITUTO SALESIANO DE FORMACIÓN TÉCNICA LEÓN XIII

INSTITUTO SALESIANO DE FORMACIÓN TÉCNICA LEÓN XIII S05 – Diseño de Paginas Web.doc

Página 58 de 82

globo junto con el texto alrededor suyo se diseñó en PowerPoint y se guardó como imagen JPG. Posteriormente se insertó en el lugar mostrado. Las viñetas se deben utilizar fuera de cualquier instrucción de manejo de imágenes.

TÉRMINOS Y DEFINICIONES Para facilitar el diseño de índices, vocabularios, diccionarios, enciclopedias y temas afines, HTML cuenta con instrucciones que permiten utilizar una palabra como término definido y una sección asociada que es la definición del término. Es ideal para generar vocabularios, tablas de contenido, diccionarios, etc. La instrucción para iniciar la lista de expresiones o términos es DL con su respectivo cierre. La sintaxis es la siguiente: <DL> <DT>Termino</DT> <DD>Definición del término que puede ser tan largo como el usuario desee.</DD> </DL> DL significa Language Dictionary (Diccionario de Lenguaje) e indica la lista de términos que se van a definir. DT significa Terms Dictionary (Diccionario de términos) e indica propiamente el término que se va definir. La definición del término se realiza con la instrucción DD (Dictionary Definition), y en esta instrucción se puede colocar cualquier cantidad de texto. El siguiente ejemplo muestra la forma correcta de utilizar las opciones descritas anteriormente.

INSTIITUTO SALESIANO DE FORMACION TÉCNICA LEON XIII

58


INSTITUTO SALESIANO DE FORMACIÓN TÉCNICA LEÓN XIII

INSTITUTO SALESIANO DE FORMACIÓN TÉCNICA LEÓN XIII S05 – Diseño de Paginas Web.doc

Página 59 de 82

Para el ejercicio anterior se utilizó el estilo "negrita" para remarcar el término definido. Sin embargo, puede utilizar dichos términos sin añadir estilos para realizar un ejercicio natural. El código para obtener el resultado mostrado en la página anterior, se muestra a continuación. <html> <body> <h1>Diccionario de informática</h1> <hr> <dl> <dt><b>Informática</b></dt> <dd>Ciencia que estudia el procesamiento, organización, almacenamiento y transferencia de la información de a través de una computadora. <dt><b>Computadora</b></dt> <dd>Máquina electrónica capaz de realizar cualquier actividad con la ayuda del software. <dt><b>Hardware</b></dt> <dd>Son todos los componentes físicos de una computadora, como el CPU, el Mouse, la impresora, los componentes internos, como la memoria, el microprocesador, etc. INSTIITUTO SALESIANO DE FORMACION TÉCNICA LEON XIII

59


INSTITUTO SALESIANO DE FORMACIÓN TÉCNICA LEÓN XIII

INSTITUTO SALESIANO DE FORMACIÓN TÉCNICA LEÓN XIII S05 – Diseño de Paginas Web.doc

Página 60 de 82

<dt><b>Software</b></dt> <dd>Es la parte inteligente de la computadora. Esta capacidad de la computadora de interpretar, calcular y analizar datos la obtiene mediante los programas diseñados para este fin. Por ejemplo, para cálculos financieros se utiliza Microsoft Excel; para películas Studio 3DMax y para animaciones, Flash, etc. </body> </html> Si omite las cláusulas <b> y </b>, su ejercicio se verá de la siguiente manera.

Esta es la forma predetermina de utilizar las herramientas citadas anteriormente. TABLAS

Una tabla está formada por filas y columnas de celdas en las que se puede insertar texto y gráficos. Se pueden utilizar y personalizar las tablas de varias formas diferentes con el fin de hacerlas más atractivas y fáciles de leer.

INSTIITUTO SALESIANO DE FORMACION TÉCNICA LEON XIII

60


INSTITUTO SALESIANO DE FORMACIÓN TÉCNICA LEÓN XIII

INSTITUTO SALESIANO DE FORMACIÓN TÉCNICA LEÓN XIII S05 – Diseño de Paginas Web.doc

Página 61 de 82

Se debe utilizar una tabla para presentar la información en formato de cuadrícula, por ejemplo horarios, información acerca de productos, tarifas, calificaciones de alumnos, etc. Creación de una tabla Para crear una tabla se debe usar la instrucción Table, seguida de parámetros que indican la anchura, el color o imagen de fondo, etc. Ejemplo: <table> </table> Estas dos instrucciones indican al explorador de Internet que se en este lugar de la página se va a crear una tabla. Uso de encabezados de tabla Después de que se haya indicado al explorador de Internet que se va a crear una tabla, es necesario definir cuántas columnas de tabla se desean utilizar. Para ello se deben utilizar las instrucciones <TH>, las cuales indican los encabezados de tabla. Ejemplo: <Table> <Th>Columna 1</th><TH>Columna 2><TH>Columna 3</TH> </table> Este segmento de código le indica al explorador que usaremos una tabla de tres columnas. Cada identificador TH que utilice indica una columna de dato que desee representar en la tabla. Más adelante se verá cómo no siempre se deben hacer coincidir las columnas con las filas. Definición de filas Para utilizar filas en una tabla, se debe usar la instrucción TR y TD. TR identifica la fila de datos, y TD es la fila de los datos propiamente dicho. El siguiente ejemplo muestra la forma como se debe crear una tabla básica basada en filas y columnas. <html> INSTIITUTO SALESIANO DE FORMACION TÉCNICA LEON XIII

61


INSTITUTO SALESIANO DE FORMACIÓN TÉCNICA LEÓN XIII

INSTITUTO SALESIANO DE FORMACIÓN TÉCNICA LEÓN XIII S05 – Diseño de Paginas Web.doc

Página 62 de 82

<head><Title>Mi primera tabla</title></head> <body> Este es una ejemplo de tablas.<br><br> <Table> <th>Columna 1</th><th>Columna 2</th><th>Columna 3</th> <tr> <td>Dato 1</td><td>Dato 2</td><td>Dato 3</td> </tr> </table> </body> </html> El resultado de este código, se muestra en la siguiente gráfica.

Si se desea mostrar la cuadrícula de la tabla, sólo debe usar el modificar Border, con un valor mayor que 0. Por ejemplo, la siguiente línea código, mostrará la cuadrícula de la tabla. <Table Border=1> El resultado se muestra a continuación.

Control del ancho de la tabla

INSTIITUTO SALESIANO DE FORMACION TÉCNICA LEON XIII

62


INSTITUTO SALESIANO DE FORMACIÓN TÉCNICA LEÓN XIII

INSTITUTO SALESIANO DE FORMACIÓN TÉCNICA LEÓN XIII S05 – Diseño de Paginas Web.doc

Página 63 de 82

Cuando se crea una tabla sin parámetros, ésta se ajusta al ancho de los campos escritos en los encabezados. Si se desea crear una tabla más amplia, se debe usar el modificar Width con un valor de porcentaje. Por ejemplo, para crear una tabla a mitad de pantalla, se debe usar la siguiente instrucción: <Table Border=1 Width=50%> El resultado de esta línea de código se muestra en la siguiente gráfica.

Por lo tanto para crear una tabla que ocupe el ancho de la pantalla, se deberá ajustar el porcentaje al 100%. El siguiente ejemplo, muestra la misma tabla anterior a toda la pantalla.

Para aplicar color de fondo a la tabla use el modificar bgcolor seguido de una constante de color. Por ejemplo, para aplicar color de fondo cyan a la tabla, use la siguiente instrucción: <table Border=1 Width=100% bgcolor=cyan> Para aplicar una imagen de fondo a una tabla, deberá usar la instrucción Img Background que usamos en el fondo de la página. La siguiente línea de código muestra la forma correcta de aplicar una imagen de fondo a una tabla. <table border=1 width=100% img background="imagen.jpg"> La siguiente gráfica muestra una imagen de fondo aplicada a la tabla. INSTIITUTO SALESIANO DE FORMACION TÉCNICA LEON XIII

63


INSTITUTO SALESIANO DE FORMACIÓN TÉCNICA LEÓN XIII

INSTITUTO SALESIANO DE FORMACIÓN TÉCNICA LEÓN XIII S05 – Diseño de Paginas Web.doc

Página 64 de 82

Control de celdas Lo más importante de crear tablas es saber manipular las celdas respecto a la información que se desea mostrar. Esto requiere controlar el ancho, alto color de fondo de forma particular, combinar celdas, etc. Digamos que la celda es en sí, una instrucción TD de la tabla. Es decir cada celda es un campo en particular dentro la tabla. Para ello, si queremos aplicar un color distinto a la celda de los nombres de los alumnos, el código debe ser el siguiente: <td bgcolor="yellow">Ana Mariela Dominguez Vázquez </td> Esta línea de código debe repetirla para cada fila de registro de la tabla. El siguiente ejemplo muestra la misma tabla anterior con los encabezados en color gris oscuro.

INSTIITUTO SALESIANO DE FORMACION TÉCNICA LEON XIII

64


INSTITUTO SALESIANO DE FORMACIÓN TÉCNICA LEÓN XIII

INSTITUTO SALESIANO DE FORMACIÓN TÉCNICA LEÓN XIII S05 – Diseño de Paginas Web.doc

Página 65 de 82

El código completo de la tabla, se lo muestro a continuación. <html> <head><Title>Mi primera tabla</title></head> <body> <h2><center>CAMBRIDGE ENGLISH CENTER</H2> <H3>REPORTE DE CALIFICACIONES</H3></center> <Table Border=1 width=100%> <th bgcolor="gray">No.</th><th bgcolor="gray">Nombre alumno</th> <th bgcolor="gray">Calificación</th> <tr> <td bgcolor="gray">1</td> <td bgcolor="yellow">Ana Mariela Dominguez Vázquez </td> <td bgcolor="cyan">10</td> </tr> <tr> <td bgcolor="gray">2</td> <td bgcolor="yellow">Marisela Cardozo Vega</td> <td bgcolor="cyan">9</td> </tr> <tr> <td bgcolor="gray">3</td> <td bgcolor="yellow">Emmanuel Rodríguez Velasco</td> <td bgcolor="cyan">10</td> </tr> <tr> <td bgcolor="gray">4</td> <td bgcolor="yellow">Jacinto Marin Dominguez</td> <td bgcolor="cyan">8</td> </tr> <tr> <td bgcolor="gray">5</td> <td bgcolor="yellow">Silvia Nayeli Amador Hdez.</td> <td bgcolor="cyan">9</td> </tr>

del

</table>

INSTIITUTO SALESIANO DE FORMACION TÉCNICA LEON XIII

65


INSTITUTO SALESIANO DE FORMACIÓN TÉCNICA LEÓN XIII

INSTITUTO SALESIANO DE FORMACIÓN TÉCNICA LEÓN XIII S05 – Diseño de Paginas Web.doc

Página 66 de 82

</body> </html> Combinación de celdas La combinación de celdas permite obtener diseños de tablas más sofisticados que pueden utilizarse para titulares, marcos de imagen, etc. Para combinar celdas se usa la instrucción Colspan o Rowspan, ya sea que se deseen combinar columnas o filas. Por ejemplo, la siguiente instrucción combina las tres columnas de la primera fila de una tabla. <td width="100%" colspan="3" height="34">Fila combinada</td> Para ilustrar mejor el uso de combinación de celdas, a continuación se muestra la siguiente tabla.

El código para obtener una tabla con este aspecto se muestra a continuación. <html> <head><title>Mi tabla combinada</title></head> <body> <table Border=1 width=100%> <tr> <td width="100%" colspan="4">Primera fila combinada</td> </tr> <tr> <td width="25%">Columna 1</td> <td width="25%">Columna 2</td> <td width="25%">Columna 3</td> INSTIITUTO SALESIANO DE FORMACION TÉCNICA LEON XIII

66


INSTITUTO SALESIANO DE FORMACIÓN TÉCNICA LEÓN XIII

INSTITUTO SALESIANO DE FORMACIÓN TÉCNICA LEÓN XIII S05 – Diseño de Paginas Web.doc

Página 67 de 82

<td width="25%">Columna 4</td> </tr> </table> </body> </html> La expresión ColSpan indica cuántas columnas se van a combinar, en este indican cuatro columnas. Si se desean combinar filas se debe utilizar la expresión RowSpan. Por ejemplo RowSpan="4" indica que se van a combinar 4 filas. La siguiente tabla muestra un ejemplo de combinación de columnas y filas.

El código para esta tabla es el siguiente: <html> <head> <title>Pagina nueva 1</title> </head> <body> <table border="1" width="100%"> <tr> <td width="100%" colspan="4">Fila combinada</td> </tr> <tr> <td width="25%" rowspan="4">Área RowSpan</td> <td width="25%">Celda 1</td> <td width="25%">Celda 2</td> <td width="25%">Celda 3</td> </tr> INSTIITUTO SALESIANO DE FORMACION TÉCNICA LEON XIII

67


INSTITUTO SALESIANO DE FORMACIÓN TÉCNICA LEÓN XIII

INSTITUTO SALESIANO DE FORMACIÓN TÉCNICA LEÓN XIII S05 – Diseño de Paginas Web.doc

<tr> <td width="25%">Celda <td width="25%">Celda <td width="25%">Celda </tr> <tr> <td width="25%">Celda <td width="25%">Celda <td width="25%">Celda </tr> <tr> <td width="25%">Celda <td width="25%">Celda <td width="25%">Celda </tr> </table> </body>

Página 68 de 82

4</td> 5</td> 6</td>

7</td> 8</td> 9</td>

10</td> 11</td> 12</td>

</html>

INSTIITUTO SALESIANO DE FORMACION TÉCNICA LEON XIII

68


INSTITUTO SALESIANO DE FORMACIÓN TÉCNICA LEÓN XIII

INSTITUTO SALESIANO DE FORMACIÓN TÉCNICA LEÓN XIII S05 – Diseño de Paginas Web.doc

Página 69 de 82

___________________________________________________ __________ UNDÉCIMA Y DECIMOSEGUNDA CLASE: “Lenguaje HTML” Lugar: Sala de Sistemas II 1. Desarrollo Teórico Y Práctico 2. Talleres ___________________________________________________ ___________ MARCOS Una página de marcos es un tipo especial de página HTML que divide la ventana del explorador en distintas zonas denominadas marcos, cada una de las cuales puede mostrar una página diferente. Por ejemplo, la siguiente gráfica muestra una página con tres marcos: Titular, Contenido y Marco principal.

Una página de marcos no incluye contenido visible, es sólo un contenedor que especifica el resto de las páginas que se van a mostrar y la forma de mostrarlas. Cuando hace clic en un hipervínculo de una página que aparece en un marco, la página a la que señala dicho hipervínculo aparece normalmente en otro marco, denominado Marco de destino. Por ejemplo, la página de marcos mostrada anteriormente, muestra realmente cuatro páginas al mismo tiempo en el explorador: la página de marcos, que es el contenedor y las tres páginas que aparecen en cada uno de los marcos. Las páginas de marcos normalmente se utilizan para los catálogos, las listas de artículos o cualquier otro tipo INSTIITUTO SALESIANO DE FORMACION TÉCNICA LEON XIII

69


INSTITUTO SALESIANO DE FORMACIÓN TÉCNICA LEÓN XIII

INSTITUTO SALESIANO DE FORMACIÓN TÉCNICA LEÓN XIII S05 – Diseño de Paginas Web.doc

Página 70 de 82

información ordenada en secciones de pantalla. Los autores utilizan páginas de marcos porque incluyen exploración integrada y presentan una interfaz de usuario coherente (es decir, la estructura y el diseño de los marcos). Puede también crear páginas de dos marcos, como muestra la siguiente gráfica.

Para nuestro ejercicio, crearemos una página con dos marcos. El marco izquierdo servirá como contenido, y el marco derecho como marco de destino. Para ello será necesario crear tres páginas: la primera será la que dividirá la ventana del explorador en dos secciones (como lo muestra la gráfica). La segunda será la que se ubique en la sección de contenido, y la tercera, será la que se muestre inicialmente en el marco de destino. Marcos II Para generar marcos en una página Web se debe utilizar la instrucción FRAMESET. El código de la primera página se muestra a continuación.

INSTIITUTO SALESIANO DE FORMACION TÉCNICA LEON XIII

70


INSTITUTO SALESIANO DE FORMACIÓN TÉCNICA LEÓN XIII

INSTITUTO SALESIANO DE FORMACIÓN TÉCNICA LEÓN XIII S05 – Diseño de Paginas Web.doc

Página 71 de 82

La instrucción Frameset indica al explorador que se van a utilizar marcos. Cols, identifica el número de columnas que se van a usar, la primera de 200 píxeles y la segunda con la parte restante de la pantalla. Name es una instrucción que se utilizan en este caso para nombrar las secciones del explorador, para poder hacer referencia posteriormente al manejar hipervínculos. Target, significa destino, y especifica el nombre del marco de destino donde se dirigirá el contenido del hipervínculo. Src significa Source (origen), e identifica la página origen mostrada inicialmente en cada sección. Noframes es una instrucción que se utiliza en caso de que el explorador de Internet no pudiese mostrar una página con marcos. En este caso, el Explorador enviará el mensaje que queda entre las líneas de <Body> y </Body>. Cuando se haya capturado el código, debe guardar el archivo con un nombre que se relacione con la función del código (por ejemplo, marco.htm) Si abre la página, observará algo como esto:

INSTIITUTO SALESIANO DE FORMACION TÉCNICA LEON XIII

71


INSTITUTO SALESIANO DE FORMACIÓN TÉCNICA LEÓN XIII

INSTITUTO SALESIANO DE FORMACIÓN TÉCNICA LEÓN XIII S05 – Diseño de Paginas Web.doc

Página 72 de 82

Izquierda: Contenido. Derecha: Marco de destino. A continuación, se debe crear la página de contenido. Puede ingresar nuevamente al bloc de notas o al programa donde se edita el código y capturar el código que muestra a continuación. Cuando termine de capturar este código, guarde el archivo como Contenido.htm, ya que con este nombre, se hizo referencia en la página anterior, en la instrucción SRC.

INSTIITUTO SALESIANO DE FORMACION TÉCNICA LEON XIII

72


INSTITUTO SALESIANO DE FORMACIÓN TÉCNICA LEÓN XIII

INSTITUTO SALESIANO DE FORMACIÓN TÉCNICA LEÓN XIII S05 – Diseño de Paginas Web.doc

Página 73 de 82

Cuando haya capturado el código y guardado el archivo, abra la página Marco, y observará lo siguiente:

INSTIITUTO SALESIANO DE FORMACION TÉCNICA LEON XIII

73


INSTITUTO SALESIANO DE FORMACIÓN TÉCNICA LEÓN XIII

INSTITUTO SALESIANO DE FORMACIÓN TÉCNICA LEÓN XIII S05 – Diseño de Paginas Web.doc

Página 74 de 82

Marcos III La página tres, es en realidad una página de relleno, es decir esta página se mostrará inicialmente, aunque será remplazada por la página correspondiente a cada hipervínculo del marco de contenido. Para cada hipervínculo se debe crear una página diferente, con la estructura que tiene la página inicial. El código de esta página se muestra a continuación.

Cuando haya capturado el código, guarde el archivo como Inicial.htm, que es el nombre con el que se hizo referencia a la página en el primer código. Posteriormente, abra el archivo marco, y observará lo siguiente:

INSTIITUTO SALESIANO DE FORMACION TÉCNICA LEON XIII

74


INSTITUTO SALESIANO DE FORMACIÓN TÉCNICA LEÓN XIII

INSTITUTO SALESIANO DE FORMACIÓN TÉCNICA LEÓN XIII S05 – Diseño de Paginas Web.doc

Página 75 de 82

Cuando haya hecho esto, habrá comprendido cómo funcionan las páginas Web que manejan marcos.

FORMULARIOS Los formularios permiten que los demás nos envíen la información directamente a nosotros o bien a nuestro servidor, en donde hemos instalado un programa que procese esta información. Por ejemplo, vamos a suponer que queremos crear una lista de correo. Los usuarios pueden introducir sus nombres y direcciones de e-mail y pulsar un botón de envío. Esos datos los podemos recibir "en bruto" en nuestro correo, con los que haríamos manualmente dicha lista de correo, sin necesitar ningún programa para ello. Este proceso es el que vamos a comentar en este capítulo. La otra posibilidad, de la que únicamente se va a hacer esta mención, es que hubiéramos instalado en nuestro servidor un programa especial para procesar esos datos y añadirlos a la lista de correo, y que incluso pudiera devolver automáticamente al usuario algún tipo de información. Para conseguir esto, los formularios necesitan ejecutar programas o scripts por medio del CGI (Common Gateway Interface). El CGI permite a los formularios ser procesados por programas escritos en cualquier lenguaje, aunque los más usados en Internet son el Perl y el C. Estructura de un formulario La estructura general de un formulario es:  Etiqueta de inicio: <FORM ACTION="mailto:dirección_de_email" METHOD="POST" ENCTYPE="TEXT/PLAIN">  Cuerpo del formulario, con los distintos elementos para poder introducir los datos.  Botones de envío y de borrado.  Etiqueta de cierre </FORM> Etiqueta de inicio El atributo ACTION indica la acción que se debe efectuar y que es que los datos sean enviados por e-mail a la dirección indicada. (Si hiciéramos uso del CGI, sería precisamente aquí donde indicaríamos su INSTIITUTO SALESIANO DE FORMACION TÉCNICA LEON XIII

75


INSTITUTO SALESIANO DE FORMACIÓN TÉCNICA LEÓN XIII

INSTITUTO SALESIANO DE FORMACIÓN TÉCNICA LEÓN XIII S05 – Diseño de Paginas Web.doc

Página 76 de 82

localización en el servidor, que habitualmente es el directorio cgi-bin, para que procese los datos). El atributo METHOD=POST indica que los datos sean inmediatamente enviados por correo a la dirección de e-mail, cuando el usuario pulse el botón de envío. Con el atributo ENCTYPE="TEXT/PLAIN" se consigue que las respuestas las recibamos como un fichero de texto, perfectamente legible y sin codificar.

ELEMENTOS PARA INTRODUCIR LOS DATOS Los vamos a dividir en  Introducción por  Introducción por  Introducción por

tres clases: medio de texto. medio de menús. medio de botones.

La introducción de los datos se consigue por medio de la etiqueta: <INPUT TYPE="xxx" NAME="yyy" VALUE="zzz"> En donde: xxx es la palabra que indica el tipo de introducción. yyy es el nombre que le asignamos nosotros a la variable de introducción del dato. zzz es la palabra asociada a un elemento. Ejemplo: <FORM ACTION="mailto:dirección_de_email" METHOD="POST" ENCTYPE="TEXT/PLAIN"> Escribe tu apellido: <BR><INPUT TYPE="text" NAME="Apellido"> </FORM> Este segmento de código permite al usuario escribir su apellido mediante un cuadro de texto. Si el usuario introduce su apellido, recibiremos en nuestro e-mail, algo como esto: Apellido=González La longitud de este campo es por defecto de 20 caracteres. Se puede modificar dicha longitud incluyendo en la etiqueta el atributo SIZE="número". Por otra parte, cualquiera que sea la longitud del formulario, si no se indica nada, el usuario puede introducir el número INSTIITUTO SALESIANO DE FORMACION TÉCNICA LEON XIII

76


INSTITUTO SALESIANO DE FORMACIÓN TÉCNICA LEÓN XIII

INSTITUTO SALESIANO DE FORMACIÓN TÉCNICA LEÓN XIII S05 – Diseño de Paginas Web.doc

Página 77 de 82

de caracteres que desee. Se puede limitar la longitud máxima, incluyendo en la etiqueta el atributo MAXLENGTH="número". Ejemplo: <INPUT TYPE="text" NAME="Apellido" SIZE="10" MAXLENGTH="12"> Esta instrucción limita el campo a 10 caracteres visibles y 12 caracteres de entrada máxima. Puede también convertir el texto introducido a caracteres comodines para simular una contraseña, ello convierte la expresión del cuadro de texto en una serie de asteriscos. Ejemplo: <INPUT TYPE="password" NAME="Apellido" SIZE="10" MAXLENGTH="12"> Áreas de texto Cuando se necesite utilizar grandes áreas de texto como comentarios, explicaciones de registro, contratos, licencias, etc., se debe utilizar un control de área de texto. Esto se consigue con la etiqueta de inicio: <TEXTAREA NAME="yyy" ROWS="número" COLS="número"> ROWS representa el número de filas, y COLS el número de columnas. Se debe finalizar con la etiqueta de cierre </TEXTAREA> Botones de envío y borrado Un elemento muy importante que permiten manipular la información de los formularios son los botones de Envío y Borrado. Para aplica a un formulario un botón de envío, se deberá introducir la siguiente instrucción. <INPUT TYPE="submit" VALUE="Texto del botón"> En donde Texto del botón es el texto que queremos que aparezca en el botón. Sin embargo, además de colocar en nuestro formulario un botón de envío, deberá aplicarse un botón que permita restablecer los cuadros INSTIITUTO SALESIANO DE FORMACION TÉCNICA LEON XIII

77


INSTITUTO SALESIANO DE FORMACIÓN TÉCNICA LEÓN XIII

INSTITUTO SALESIANO DE FORMACIÓN TÉCNICA LEÓN XIII S05 – Diseño de Paginas Web.doc

Página 78 de 82

de texto así como las opciones predeterminadas del formulario. Generalmente esto se consigue con la siguiente instrucción: <INPUT TYPE="reset" VALUE="Texto del botón"> Ejemplo de formulario Para ilustrar lo dicho hasta ahora, haremos un formulario que permita al usuario introducir alguna información mediante cajas de texto, áreas de texto y botones.

El código para obtener el aspecto mostrado del formulario, es el siguiente: <html> <head><title>Formulario de registro</title></head> <body> <center> <h3>Cambridge English Center</h3> <h4>Formulario de Registro</h4> </center> <hr> Sea tan amable de rellenar el siguiente formulario. <br> <FORM ACTION="mailto:dirección_de_email" METHOD="POST" ENCTYPE="TEXT/PLAIN"> INSTIITUTO SALESIANO DE FORMACION TÉCNICA LEON XIII

78


INSTITUTO SALESIANO DE FORMACIÓN TÉCNICA LEÓN XIII

INSTITUTO SALESIANO DE FORMACIÓN TÉCNICA LEÓN XIII S05 – Diseño de Paginas Web.doc

Página 79 de 82

Nombre: <BR> <INPUT TYPE="text" NAME="Apellido"> <br> Dirección: <BR> <INPUT TYPE="text" NAME="Dirección"> <br> Teléfono: <BR> <INPUT TYPE="text" NAME="Telefono"> <br> Comentarios:<br> <TEXTAREA NAME="comentario" ROWS="7" COLS="40"> </TEXTAREA> <INPUT TYPE="submit" VALUE="Enviar datos"> <INPUT TYPE="reset" VALUE="Borrar datos"> </FORM> </body> </html>

OPCIONES DE MENÚS Una forma muy común de seleccionar opciones en un formulario es mediante las opciones de menú (listas desplegables). Para incluir un menú de opciones en un formulario, debemos hacer lo siguiente: <Select Name="Nombre"> <Option>Opción 1 <Option>Opción 2 <Option>Opción 3 </Select> Donde Option indica cada una de las opciones del menú. La siguiente figura muestra una forma real de la utilización de menús.

INSTIITUTO SALESIANO DE FORMACION TÉCNICA LEON XIII

79


INSTITUTO SALESIANO DE FORMACIÓN TÉCNICA LEÓN XIII

INSTITUTO SALESIANO DE FORMACIÓN TÉCNICA LEÓN XIII S05 – Diseño de Paginas Web.doc

Página 80 de 82

El código para obtener un menú como el anterior, se muestra a continuación. Estado civil:<br> <Select Name="EdoCivil"> <option>Casado (a) <option>Soltero (a) </select> <br> Si se desea crear una lista de selección con barras de desplazamiento, se debe introducir una instrucción como la siguiente: <SELECT NAME="Nombre" Multiple Size="nFilas"> Donde nFilas es el número de filas que se muestran en el control y que se podrán seleccionar arrastrando el control sobre ellas. La siguiente figura muestra un ejemplo de ello.

El código que permite obtener este método es el siguiente: Materias de interés:<br> <Select Name="Materias" Multiple Size=4> <option>Office XP <option>Diseño gráfico <option>Bases de datos <option>Redes Lan </select> Cuando la lista de opciones es más larga que la altura predeterminada del control, se muestra automáticamente la barra de desplazamiento. Ejemplo:

INSTIITUTO SALESIANO DE FORMACION TÉCNICA LEON XIII

80


INSTITUTO SALESIANO DE FORMACIÓN TÉCNICA LEÓN XIII

INSTITUTO SALESIANO DE FORMACIÓN TÉCNICA LEÓN XIII S05 – Diseño de Paginas Web.doc

Página 81 de 82

Botones de radio Los botones de radio permiten seleccionar una de varias opciones dentro de un formulario. Por ejemplo, en nuestro ejercicio, hemos incluido una expresión que solicita al usuario indicar su sexo, y muestra dos opciones de las cuales sólo se podrá elegir una.

El usuario podrá seleccionar cualquiera de las dos opciones mostradas. El código para obtener estas opciones, se muestra a continuación. Sexo:<br> <input type="radio" Name="M" Value="Hombre">Hombre <input type="radio" Name="F" Value="Mujer">Mujer <br> Según el número de opciones que se desee aplicar, será el número de veces que debe aparecer la instrucción en el código. Casillas de verificación Permiten al usuario seleccionar varias opciones dentro de un formulario. Por ejemplo, existen páginas en Internet que permiten suscribirse a algún boletín y nos dan la opción de "marcar" qué tipo de información queremos recibir en nuestro correo. La instrucción para aplicar una casilla de verificación es la siguiente: <input type="checkbox" name="Nombre">Texto de la opción La siguiente figura muestra un ejemplo de una situación real donde permitimos al usuario seleccionar las opciones que quiera.

INSTIITUTO SALESIANO DE FORMACION TÉCNICA LEON XIII

81


INSTITUTO SALESIANO DE FORMACIÓN TÉCNICA LEÓN XIII

INSTITUTO SALESIANO DE FORMACIÓN TÉCNICA LEÓN XIII S05 – Diseño de Paginas Web.doc

Página 82 de 82

El código se muestra a continuación. Deseo información sobre:<br> <input type="checkbox" name="IniciosCursos">Inicios de cursos <input type="checkbox" name="Autocad">Diplomado de AutoCad <input type="checkbox" name="Ingles">Cursos de inglés <br> Si se desea que una casilla aparezca seleccionada de forma predeterminada, debemos usar la instrucción CHECKED en la línea donde queramos seleccionar dicha opción. Por ejemplo: <input type="checkbox" name="IniciosCursos">Inicios de cursos Dará un resultado como el que se muestra en la siguiente figura:

INSTIITUTO SALESIANO DE FORMACION TÉCNICA LEON XIII

82

INSTITUTO SALESIANO DE FORMACIÓNTÉCNICA LEÓN XIII  

DISEÑO DE PAGINAS WEB

Read more
Read more
Similar to
Popular now
Just for you