CI 2011 Web I - A

Leccin N 01
Diseo Web I
HTML
Diseo Web I
Introduccin a HTML.
Objetivo
Al terminar la presente leccin el participante conocer los fundamentos y caractersticas necesarias del lenguaje HTML.
Contenido
Introduccin. Conceptos bsicos. Creacin del documento web. HTML. Requisitos para la codificacin HTML. Estructura bsica de la pgina web. Uso de etiquetas. Definicin y uso de la cabecera. El cuerpo de la pgina: la etiqueta <BODY>. Listas, imgenes, marquesinas. Hipervnculos.
Introduccin al Diseo de Pginas Web
1. Introduccin. La primera descripcin documentada acerca de las interacciones sociales que podran ser propiciadas a travs del networking (trabajo en red) est contenida en una serie de memorndums escritos por J.C.R. Licklider, del Massachusetts Institute of Technology (MIT), en Agosto de 1962, en los cuales Licklider discute sobre su concepto de Galactic Network (Red Galctica). El concibi una red interconectada globalmente a travs de la que cada uno pudiera acceder desde cualquier lugar a datos y programas. En esencia, el concepto era muy parecido a la Internet actual. Licklider fue el principal responsable del programa de investigacin en ordenadores de la DARPA desde Octubre de 1962. Mientras trabaj en DARPA convenci a sus sucesores Ivan Sutherland, Bob Taylor, y el investigador del MIT Lawrence G. Roberts de la importancia del concepto de trabajo en red. En Julio de 1961 Leonard Kleinrock public desde el MIT el primer documento sobre la teora de conmutacin de paquetes. Kleinrock convenci a Roberts de la factibilidad terica de las comunicaciones va paquetes en lugar de circuitos, lo cual result ser un gran avance en el camino hacia el trabajo informtico en red. El otro paso fundamental fue hacer dialogar a los ordenadores entre s. Para explorar este terreno, en 1965, Roberts conect un ordenador TX2 en Massachusetts con un Q-32 en California a travs de una lnea telefnica conmutada de baja velocidad, creando as la primera (aunque reducida) red de ordenadores de rea amplia jams construida. El resultado del experimento fue la constatacin de que los ordenadores de tiempo compartido podan trabajar juntos correctamente, ejecutando programas y recuperando datos a discrecin en la mquina remota, pero que el sistema telefnico de conmutacin de circuitos era totalmente inadecuado para esta labor. La conviccin de Kleinrock acerca de la necesidad de la conmutacin de paquetes qued pues confirmada. A finales de 1966 Roberts se traslad a la DARPA a desarrollar el concepto de red de ordenadores y rpidamente confeccion su plan para ARPANET, publicndolo en 1967. En la conferencia en la que present el documento se expona tambin un trabajo sobre el concepto de red de paquetes a cargo de Donald Davies y Roger Scantlebury del NPL. Scantlebury le habl a Roberts sobre su trabajo en el NPL as como sobre el de Paul Baran y otros en RAND. El grupo RAND haba escrito un documento sobre redes de conmutacin de paquetes para comunicacin vocal segura en el mbito militar, en 1964. Ocurri que los trabajos del MIT (1961-67), RAND (1962-65) y NPL (1964-67) haban discurrido en paralelo sin que los investigadores hubieran conocido el trabajo de los dems. La palabra packet (paquete) fue adoptada a partir del trabajo del NPL y la velocidad de la lnea propuesta para ser usada en el diseo de ARPANET fue aumentada desde 2,4 Kbps hasta 50 Kbps. En Agosto de 1968, DARPA lanz una licitacin para el desarrollo de uno de sus componentes clave: los conmutadores de paquetes llamados interface message processors (IMPs, procesadores de mensajes de interfaz). Fue ganado en Diciembre de 1968 por un grupo encabezado por Frank Heart, de Bolt Beranek y Newman (BBN). As como el equipo de BBN trabaj en IMPs con Bob Kahn tomando un papel principal en el diseo de la arquitectura de la ARPANET global, la topologa de red y el aspecto econmico fueron diseados y optimizados por Roberts trabajando con Howard Frank y su equipo en la Network Analysis Corporation, y el sistema de medida de la red fue preparado por el equipo de Kleinrock de la Universidad de California, en Los Angeles. A causa del temprano desarrollo de la teora de conmutacin de paquetes de Kleinrock y su nfasis en el anlisis, diseo y medicin, su Network Measurement Center (Centro de Medidas de Red) en la UCLA fue seleccionado para ser el primer nodo de ARPANET. Todo ello ocurri en Septiembre de 1969, cuando BBN instal el primer IMP en la UCLA y qued conectado el primer ordenador host. El proyecto de Doug Engelbart denominado Augmentation of Human Intelect (Aumento del Intelecto Humano) que inclua NLS, un primitivo sistema hipertexto en el Instituto de Investigacin de Standford (SRI) proporcion un segundo nodo. El SRI patrocin el Network http://www.istchocano.edu.pe -3Separata de Diseo Web I
Information Center, liderado por Elizabeth (Jake) Feinler, que desarroll funciones tales como mantener tablas de nombres de host para la traduccin de direcciones as como un directorio de RFCs (Request For Comments). Un mes ms tarde, cuando el SRI fue conectado a ARPANET, el primer mensaje de host a host fue enviado desde el laboratorio de Leinrock al SRI. Se aadieron dos nodos en la Universidad de California, Santa Brbara, y en la Universidad de Utah. Estos dos ltimos nodos incorporaron proyectos de visualizacin de aplicaciones, con Glen Culler y Burton Fried en la UCSB investigando mtodos para mostrar funciones matemticas. As, a finales de 1969, cuatro ordenadores host fueron conectados conjuntamente a la ARPANET inicial y se hizo realidad una embrionaria Internet. Incluso en esta primitiva etapa, hay que resear que la investigacin incorpor tanto el trabajo mediante la red ya existente como la mejora de la utilizacin de dicha red. Esta tradicin contina hasta el da de hoy. Se siguieron conectando ordenadores rpidamente a la ARPANET durante los aos siguientes y el trabajo continu para completar un protocolo host a host funcionalmente completo, as como software adicional de red. En Diciembre de 1970, el Network Working Group (NWG) liderado por S.Crocker acab el protocolo host a host inicial para ARPANET, llamado Network Control Protocol (NCP, protocolo de control de red). Cuando en los nodos de ARPANET se complet la implementacin del NCP durante el periodo 1971-72, los usuarios de la red pudieron finalmente comenzar a desarrollar aplicaciones. En Octubre de 1972, Kahn organiz una gran y muy exitosa demostracin de ARPANET en la International Computer Communication Conference. Esta fue la primera demostracin pblica de la nueva tecnologa de red. Fue tambin en 1972 cuando se introdujo la primera aplicacin "estrella": el correo electrnico. En Marzo, Ray Tomlinson, de BBN, escribi el software bsico de envo-recepcin de mensajes de correo electrnico, impulsado por la necesidad que tenan los desarrolladores de ARPANET de un mecanismo sencillo de coordinacin. En Julio, Roberts expandi su valor aadido escribiendo el primer programa de utilidad de correo electrnico para relacionar, leer selectivamente, almacenar, reenviar y responder a mensajes. As, en 1985, Internet estaba firmemente establecida como una tecnologa que ayudaba a una amplia comunidad de investigadores y desarrolladores, y empezaba a ser empleada por otros grupos en sus comunicaciones diarias entre ordenadores. El 24 de agosto de 1995 se lanza al mercado informtico el sistema operativo Windows 95 en el que se incorpora el navegador Internet Explorer; es aqu que aparece por primera vez el trmino de Internet. El 24 de Octubre de 1995, el FNC (Federal Networking Council, Consejo Federal de la Red) acept unnimemente una resolucin definiendo el trmino Internet. La definicin se elabor de acuerdo con personas de las reas de Internet y los derechos de propiedad intelectual. El FNC acuerda que lo siguiente refleja nuestra definicin del trmino Internet. Internet hace referencia a un sistema global de informacin que: Est relacionado lgicamente por un nico espacio de direcciones global basado en el protocolo de Internet (IP) o en sus extensiones. Es capaz de soportar comunicaciones usando el conjunto de protocolos TCP/IP o sus extensiones u otros protocolos compatibles con IP. Emplea, provee, o hace accesible, privada o pblicamente, servicios de alto nivel en capas de comunicaciones y otras infraestructuras relacionadas aqu descritas.
http://www.istchocano.edu.pe
-4-
Separata de Diseo Web I
2. Conceptos bsicos. 2.1. Definicin de Internet. Es un conjunto redes de computadoras que permiten el intercambio de informacin y la comunicacin entre sus usuarios, y estn conectadas entre s a travs del equipo servidor. La comunicacin no requiere que los usuarios tengan el mismo sistema operativo.
Internet
Intercomunication
2.2.
Network
Otros conceptos necesarios. WWW (World Wide Web - Red Ancha Mundial). Es un sistema para explorar Internet mediante hipervnculos. Cuando se utiliza un explorador Web, el Web aparece como una coleccin de texto, imgenes, sonidos y pelculas digitales. URL (Uniform Resource Location). Direccin que identifica de forma nica una ubicacin en Internet. Una direccin URL para un sitio del World Wide Web se escribe precedida de http://, tal como http://www.microsoft.com Una direccin URL puede contener ms detalles, como el nombre de una pgina de hipertexto, que se suele identificar mediante la extensin de nombre de archivo .html o .htm Intranet. Red de una organizacin que utiliza tecnologas y protocolos de Internet, pero que slo est disponible para determinadas personas, por ejemplo para los empleados de una compaa. Una intranet tambin recibe el nombre de red privada. Extranet. Es la interconexin entre redes de diferentes organizaciones que necesitan compartir informacin til entre ellos. Naturalmente, no tienen acceso a todos los directorios o documentos sino slo a partes concretas. Freeware. Es el software que se ofrece en Internet a cero costo por ser un programa de uso libre. No tiene ninguna limitacin de tiempo ni de comandos de men. Shareware. Es el software de uso compartido en Internet y que su uso es por tiempo limitado. Sobretodo son demos de programa til por un perodo de 15 das, al trmino de los cuales si usted desea seguir usndolo entonces tendr que adquirirlo. Download. Es la descarga de cualquier tipo de archivos a travs de Internet. La informacin es de libre uso. Donde usted mire que aparece ste trmino entonces va a poder efectuar la descarga de la informacin asociada. Host. Equipo donde se ejecuta un servicio o programa de servidor que utilizan clientes de red o remotos. En Equilibrio de carga en la red, un clster se compone de varios hosts conectados mediante una red de rea local (LAN). Es el equipo que se utiliza para almacenar los sitios web. LAN (Local Area Network Red de rea Local). Red de comunicaciones que conecta un grupo de equipos, impresoras y otros dispositivos que se encuentran en un rea relativamente limitada (por ejemplo, un edificio). Una LAN permite a los dispositivos conectados interactuar con otros dispositivos de la red. WAN (Wide Area Network Red de rea Extensa). Red de comunicaciones que conecta equipos separados geogrficamente, impresoras y otros dispositivos. Una WAN permite a los dispositivos conectados interactuar entre s en la red. Web Server (Servidor web). Es el software que permite administrar los sitios web que existen en el host. Sitio web. Es el lugar donde se almacena los archivos (HTML, JPG, GIF, SWF, ASP, CSS, JS, etc.) que conforman la pgina web. Pgina web. Es la informacin publicada en el sitio web y est conformada por varios documentos web. Documento web. Es el archivo HTML, ASP, PHP JSP que contiene la informacin publicada y que ser visualizada en el navegador de Internet. -5Separata de Diseo Web I
3. Creacin de documentos web. Los documentos web pueden ser creados de la siguiente manera: 3.1. Creacin lnea a lnea, utilizando cdigo. Creacin en etapa de diseo, utilizando software de diseo web. Creacin lnea a lnea, utilizando cdigo. Para esto se utiliza el cdigo HTML que es el lenguaje estndar para todos los documentos web; todos los navegadores de Internet reconocen el lenguaje HTML. Para la creacin del cdigo web se puede emplear el Bloc de notas. Aparte del lenguaje HTML ahora existen extensiones de cdigo que mejoran la presentacin del documento web, tal es el caso de DHTML, CSS, JavaScript, ASP, PHP, JSP. 3.2. Creacin en etapa de diseo, utilizando software de diseo. Es en la actualidad el mejor medio para la creacin de documentos web porque permiten disear rpidamente las pginas web y con un buen acabado final. Uno de los programas ms utilizados para el diseo web es Macromedia DreamWeaver. 4. HTML. Es el lenguaje de marca de hipertexto (Hyper Text Markup Language) que se utiliza en los documentos web de las pginas web. Adems HTML es reconocido por todos los navegadores de Internet (Internet Explorer, Mozilla, etc.). HTML fue creado para publicar y compartir informacin en el Internet, inicialmente slo reconoca texto, luego fue incrementando sus aplicaciones (imagen, video, sonido) y en la actualidad soporta la publicacin de objetos animados de tipo GIF y SWF. Toda pgina por muy sencilla o sofisticada que parezca contiene la estructura bsica HTML. 4.1. Requisitos para la codificacin HTML. Se recomienda crear un sitio local que viene a ser una carpeta en unidad raz de su unidad de almacenamiento, as:
Esta es la carpeta que ser la raz del sitio web local.
La carpeta tarea ser la carpeta principal (directorio raz) de la aplicacin web, las subcarpetas son para organizar los archivos que conforman la pgina web. http://www.istchocano.edu.pe -6Separata de Diseo Web I
4.2.
Estructura bsica de la pgina web. Todo documento web siempre tiene la siguiente estructura:
<html> <head>
</head> <body>
Aqu se define el ttulo para la ventana, la fuente base para el documento, redireccionamiento, declaracin de variables, rutinas scripts, codigo CSS. Aqu se colocan los datos que necesitamos que aparezcan en el navegador de Internet.
</body> </html>
El documento web est organizado por la etiquetas <HTML> y </HTML> dentro del cul se define la cabecera (etiqueta <HEAD> </HEAD>) y el cuerpo (etiqueta <BODY> </BODY>). Adems el documento web tiene que guardarlo con la extensin navegador de Internet lo reconozca. .html para que el
Ejemplo: En el siguiente cdigo web se muestra el uso de la estructura de la pgina web. dpw01.html <html> <head> <title>Ejemplo de uso de cdigo HTML</title> <basefont face=Times New Roman /> <meta name=author content=Martn Gonzales /> </head> <body> <h1><center>Mi primera vez en la web</center></h1> <hr /> Desde sus inicios Internet fué concebido para publicar información y de esa manera permitir el intercambio de dichos datos entre los usuarios que la visiten. Claro está que inicialmente se aplicó a la publicación de texto. Actualmente Internet tiene varios millones de usuarios que se conectan para buscar no solamente texto sino también imágenes, vídeos y objetos animados Flash. <hr color=red /> Hasta pronto <hr color=darkblue /> </body> </html>
-7-
5. Uso de etiquetas. 5.1. Definicin de etiqueta. Es la instruccin que permite colocar un objeto en la pgina web. Se define por estar encerrado entre smbolos < y >. Las etiquetas. Las etiquetas HTML son cerradas. Ejemplo: <basefont face=arial /> <hr /> <img src=fotos/muestra.jpg /> <h1> </h1> <center> </center> <marquee> </marquee> 6. Definicin y uso de la cabecera: etiqueta <HEAD>. Para definir la cabecera se utiliza la etiqueta <HEAD>; esta etiqueta permite establecer las caractersticas generales del documento web, tal como el ttulo de la pgina.
5.2.
<TITLE> </TITLE>
Permite establecer el texto que aparecer en la barra de ttulo del navegador de Internet.
<BASEFONT FACE=nomfuentebase />

Esta etiqueta establece el tipo de letra que ser la fuente base del documento web. <basefont face="Arial Narrow" /> En este ejemplo se define la fuente Arial Narrow para que aparezca como fuente base de todo el texto que est en el documento web.
<META NAME=nomvariable CONTENTS=valor />

Permite definir variables para el reconocimiento de la pgina web en Internet. Muestras: <meta name="author" contents="Carlos Lescano" /> En este ejemplo se define quien es el autor de la pgina web. <meta name="description" contents="Ejemplos, muestras" /> Asignar una breve descripcin acerca del contenido de la pgina. <meta name="classification" contents="Tutoriales" /> Permite clasificar la pgina. <meta name="keywords" contents="ejemplos, manuales, tutoriales, html" /> Establece las palabras claves que permiten identificar a la pgina web y de esa manera poderla encontrar a travs de los buscadores. http://www.istchocano.edu.pe -8Separata de Diseo Web I
<META HTTP-EQUIV=Refresh CONTENTS=numseg;URL=ruta />

Es de gran utilidad para establecer una recarga de la pgina web o sino redireccionarla hacia otra direccin web. Ejemplos: <meta http-equiv="Refresh" contents="25" /> En este ejemplo podemos establecer que la pgina actual sea recargada automticamente despus de cierta cantidad de segundos. <meta http-equiv="Refresh" contents="25;URL=http://www.google.com.pe" /> En este otro ejemplo usted efectuar la redireccin a otra direccin web despus de transcurrido una cierta cantidad de segundos.
<META HTTP-EQUIV=Expires CONTENTS=valor />

Esta etiqueta nos permite establecer la fecha de expiracin de la pgina web. Muestra: <meta http-equiv="Expires" contents="Tue, 20 Aug 1996 14:25:27 GMT" /> Si se pone una fecha ya pasada, como la que hay en el ejemplo, el navegador elimina inmediatamente de la memoria cach la pgina recibida, lo que provoca que la pgina sea solicitada de nuevo al servidor cada vez, en lugar de cargar la copia que ya existe en la mquina del cliente. <meta http-equiv="Expires" contents="Tue, 29 Sep 2020 20:15:45 GMT" /> En este caso, el navegador eliminar en la fecha indicada la pgina recibida que est almacenada en la memoria cach, lo que provocar que la pgina sea solicitada de nuevo al servidor.
<META HTTP-EQUIV= "Content-Type" CONTENT="text/html;charset=conjunto" />

El atributo CHARSET va a fijar el conjunto de caracteres de la pgina, de tal forma que cuando un usuario solicite al servidor web lo primero que va a recibir su navegador va a ser un cabecero HTTP con esta etiqueta META, con lo que este pedir al sistema operativo que cargue dichos caracteres, para poder as presentar la pgina adecuadamente. Si el usuario no tiene instalado en su sistema dicho conjunto de caracteres, el navegador presentar una ventana de aviso, informando que para ver correctamente la pgina es necesario descargarlo de Internet, y proceder automticamente a su descarga e instalacin, salvo que el usuario no desee que se realice dicha operacin y la anule manualmente. Una vez descargado el paquete, la pgina ser presentada adecuadamente, de acuerdo a como el diseador la construy. Ejemplo: <meta http-equiv="Content-Type" content="text/html;charset=ISO-8859-1" /> Permite establecer el conjunto de caracteres ISO 8859-1 para las pginas en castellano, cataln o vasco. Tambin se denomina Latin1, que comprende las letras acentuadas (, `, etc) y la letra , tanto en maysculas como en minsculas.
-9-
7. El cuerpo de la pgina: etiqueta <BODY>. El <BODY> es el lugar donde se colocan los datos (texto, imgenes, sonidos, videos, hipertexto) que se van a publicar en el documento web. 7.1. Propiedades de BODY. A continuacin la relacin de propiedades que existen en la etiqueta <BODY>. BACKGROUND=ruta, contiene la ruta y nombre del archivo de imagen que se mostrar como fondo del documento web. BGPROPERTIES=FIXED, establece como inamovible la imagen de fondo del documento web. BGCOLOR=color, define el color de fondo del documento web. TEXT=color, define el color del texto. LINK=color, define el color del hipervnculo sin visitar. VLINK=color, define el color del hipervnculo visitado. ALINK=color, define el color del hipervnculo activo. LEFTMARGIN=numpx, establece el margen izquierdo y derecho del documento web. Es vlido nicamente en Internet Explorer. MARGINWIDTH=numpx, establece el margen izquierdo y derecho del documento web. Es vlido nicamente en NetScape. TOPMARGIN=numpx, establece el margen superior e inferior del documento web. Es vlido nicamente en Internet Explorer. MARGINHEIGHT=numpx, establece el margen superior e inferior del documento web. Es vlido nicamente en NetScape.
dpw02.html <html> <head> <title>::Ejemplo de HTML basico</title> <basefont face=Arial> <meta name=author content=Martin Gonzales /> </head> <body bgcolor=gold text=white> <h1><center>Demo de uso de propiedades en el BODY</center></h1> <hr> <hr color=yellow> En esta demostració usted observará el uso de las propiedades de la etiqueta BODY asi como tambien el uso de etiquetas elementales para colocar y resaltar texto y linea horizontal. <hr color=red> <hr color=lightblue> Hasta pronto <hr color=red> </body> </html>
- 10 -
7.2.
Etiquetas de uso frecuente. A continuacin una relacin de las etiquetas ms elementales que se necesitan conocer para empezar a entender la estructura de todo documento web. <hr /> <h1></h1> <h2></h2> <h3></h3> <h4></h4> <h5></h5> <h6></h6> Salto de prrafo Salto de lnea Lnea horizontal Encabezado 1 Encabezado 2 Encabezado 3 Encabezado 4 Encabezado 5 Encabezado 6
7.3.
Cdigos de carcter especial. El texto colocado en el documento web se mostrarn segn el conjunto de caracteres activo y dependiendo del idioma en uso. En este caso los caracteres debern ser escritos utilizando el cdigo de carcter especial que permite forzar la visualizacin del mismo. A continuacin se detalla algunos cdigos de carcter especial. á é í ó ú Á É Í Ó Ú ¼ ½ ¾ ä ë ï ö ü ñ Ñ Letra Letra Letra Letra Letra Letra Letra Letra Letra Letra Fraccin Fraccin Fraccin Letra Letra Letra Letra Letra Letra Letra Espacio de carcter
- 11 -
Ejemplo: En el ejemplo siguiente usted va a observar el tamao que tiene predefinido cada una de las etiquetas de encabezamiento y el uso de los cdigos de carcter especial. Digite el cdigo y gurdelo con el nombre sugerido, despus ejectelo. dpw03.html <html> <head> <title>::Uso de etiquetas y cdigos de caracter especial</title> <basefont face="Comic Sans, Verdana"> <meta name="author" content="Martin Gonzales" /> </head> <body bgcolor="lightgreen" text="darkgreen" leftmargin=100> <hr color="green" /> <hr /> <h1><center>Demo de HTML</center></h1> <h2><center>Etiquetas y Código de caracter especial</center></h2> <h3><center>Ejemplos de uso</center></h3> <hr /> <hr color="yellow" /> En esta demostració mirará el uso de las etiquetas de definición de encabezamientos (las famosas etiquetas H1 a H6) y de salto de línea (BR) y de salto de párrafo (P), también encontrará el uso de códigos de caracter especial para representar las vocales con tilde, uso de dieresis y otros caracteres mas. <hr color="green" /> <h4>Los encabezamientos</h4> - Encabezado 1: <h1>Perú</h1> - Encabezado 2: <h2>Perú</h2> - Encabezado 3: <h3>Perú</h3> - Encabezado 4: <h4>Perú</h4> - Encabezado 5: <h5>Perú</h5> - Encabezado 6: <h6>Perú</h6> <hr color="green" /> <h4>Caracteres especiales</h4> - Pingüino - España - Panamá <hr color="green" /> Hasta pronto <hr color="red" /> </body> </html>
- 12 -
7.4.
Etiquetas para alinear/centrar. Utilice lo siguiente: <center></center> Centrar Alinear a la izquierda Alinear al centro Alinear a la derecha Justificar
7.5.
Etiquetas de formato para el texto. El texto en el documento puede ser resaltado aquellas partes que usted necesite, para esto dispone de varias etiquetas que a continuacin se detallan: Etiqueta para definir el tipo de fuente para todo el documento <basefont face=nombre de la fuente /> Etiquetas para establecer formato al texto Negrita <big></big> Subrayar Cursiva Subndice Superndice Disminuir tamao de fuente Aumentar tamao de fuente
Etiqueta para establecer tipo, tamao y/o color de fuente 
Muestras: Cdigo Viva el Perú Aprenda DreamWeaver. Visite Macchu Picchu y Nazca. 52 52 Visite Tumbes. Visite <big>Tacna</big> Viva el Per Aprenda DreamWeaver. Visite Macchu Picchu y Nazca. 52 5
2
Resultado
Visite Tumbes. Visite Tacna.
- 13 -
8. Listas. En el documento web usted puede colocar listas de datos las cuales pueden ser: 8.1. Listas con vietas. Tambin se dice lista no ordenada. Para crear listas con vietas utilice la etiqueta <UL>, mire la sintaxis de uso: <ul type=tipo> <li> elemento 1 </li> <li> elemento 2 </li> <li> elemento 3 </li> : : </ul> Donde el argumento tipo puede ser: square disc circle Vieta cuadrada Vieta redonda Vieta circular
8.2.
Listas numeradas. Tambin se dice lista ordenada. Para crear listas con vietas utilice la etiqueta <OL>, mire la sintaxis de uso: <ol type=tipo start=inicio> <li> elemento 1 </li> <li> elemento 2 </li> <li> elemento 3 </li> : : </ol> Donde el argumento tipo puede ser: 1 I i A a Lista con orden arbigo (nmeros) Lista con orden romano en mayscula Lista con orden romano en minscula Lista con orden alfabtico en mayscula Lista con orden alfabtico en minscula
8.3.
Listas de definicin. Se utiliza para especificar una lista de glosario y su respectiva definicin. Para crear listas de definicin utilice la etiqueta <DL>, mire la sintaxis de uso: <dl> <dt> trmino de glosario1 </dt> <dd> explicacin del trmino 1 </dd> <dt> trmino de glosario 2 </dt> <dd> explicacin del trmino 2 </dd> : : </dl>
- 14 -
Ejemplos: a continuacin tiene dos (02) casos de uso de listas con vietas y numeracin. dpw04.html <html> <head> <title>Uso de listas con viñetas y números</TITLE> </head> <body> <center> Demo de listas</CENTER> <hr color="red" /> Noticias <ul> <li>África</li> <li>América</li> <li>Asia</li> <li>Europa</li> <li>Oceanía</li> </ul> Tecnología <ol> <li>Comunicaciones</li> <li>Impresoras</li> <li>Monitores</li> </ol> Hasta pronto </body> </html> dpw05.htm <html> <head> <title>Muestra de uso de listas</title> </head> <body> <center>Uso de listas personalizadas y anidadas</center> <hr /> El Perú <ul type="square"> <li>Cultura</li> <li>Educación</li> <li>Geografía</li> </ul> Novedades <ul type="disc"> <li>Deportes</li> <ol type="a"> <li>Fútbol</li> <li>Natación</li> </ol> <li>Impresoras</li> <ol type="a"> <li>Matriz de puntos</li> <li>Inyección de tinta</li> <li>Láser</li> </ol> </ul> </body> </html> http://www.istchocano.edu.pe - 15 Separata de Diseo Web I
9. Imgenes. En HTML usted puede colocar imgenes a travs del uso de la etiqueta <IMG>. 9.1. Sintaxis de la etiqueta <IMG>. La etiqueta <IMG> presenta la sintaxis siguiente: <img propiedades /> 9.2. Propiedades de la etiqueta <IMG>. Son las siguientes: SRC=ruta1 LOWSRC=ruta2 ALT=texto WIDTH=numpx HEIGHT=numpx ALIGN=valor BORDER=n VSPACE=numpx HSPACE=numpx Muestras: Cdigo de imagen <img src=fotos/nazca.jpg width=180 /> <img src=fotos/piura.jpg align=right /> <img src=fotos/trujillo.jpg width=140 align=left /> Comentario Imagen a ancho de 180 px. Imagen alineada a la derecha. Imagen alineada a la izquierda. Asigna archivo de imagen. Asigna archivo de imagen de precarga. Es el texto emergente de la imagen. Ancho de la imagen. Altura de la imagen. Alineacin de la imagen. El valor puede ser left o right. Grosor del borde de la imagen. Espacio vertical desde la imagen. Espacio horizontal desde la imagen.
Ejemplo: En el modelo de pantalla siguiente se utiliza archivos de imagen. Al conocer el uso de las etiquetas, usted va a poder colocar en el documento web la imagen en el lugar que necesite.
- 16 -
dpw06.html <html> <head> <title>:: Demo de uso de webs...</title> <basefont face="Arial, Helvetica, sans-serif" /> <meta name="author" content="Carlos Lescano" /> </head> <body leftmargin=0 topmargin=0 bgcolor="#00CCFF"> <h1><center>Noticias deportivas</center></h1> <hr color="darkblue"> <h2 align="left">Fórmula 1.</h2> <img src="fotos/thef1.jpg" width="218" height="150" hspace="5" align="right"> Michael Schumacher vence en San Marino Se repite la historia de 2005 pero este vez a la inversa; Michael Schumacher se proclama vencedor del Gran Premio de San Marino en la misma manera en que lo hizo Fernando Alonso el año pasado, resistiendo los envites que le procuraba el español y sin, realmente, verse en condición de perder su privilegiada posición. Tras Alonso se ha clasificado Juan Pablo Montoya que ha estado por delante de Massa y de su compañero Raikkonen, hoy algo menos brillante que el piloto colombiano. <h2 align="left">Fútbol.</h2> <img src="fotos/ronaldinho.jpg" width="200" height="167" hspace="5" align="right">Ronaldinho quiere ser campeón en el Mundial de Alemania "Hoy no me imagino en otro lugar que no sea el Barcelona. Sólo puedo imaginarme aquí en el Barcelona durante muchos años. No pienso volver a actuar en Brasil, al menos por ahora", dijo. Ronaldinho, apuntado por la revista "France Football" como el jugador mejor pagado del planeta en la actualidad, afirmó por otra parte que no le importan los pronósticos de expertos, que lo apuntan como la probable gran estrella del próximo Mundial. "Yo ni siquiera pienso en ello, en serio. Sólo pienso en conquistar la Copa Mundial. No pienso en ser el mejor, ni sobre hacer espectáculo. Lo único que quiero es ir a Alemania y ayudar a Brasil a ser campeón", afirmó. Ronaldinho reveló que, sorpresivamente, marcar goles no es lo que más le gusta en el fútbol. "A mí lo que más me gusta hacer es dar el pase para el gol. Si tengo la posibilidad de dar el pase para el gol, marcar y eludir a los marcadores en un mismo partido, entonces es el partido perfecto", afirmó. Según el delantero, el placer que siente en jugar en el fútbol es el gran secreto de su éxito: "Mi pasión es lo que más me motiva. Apenas miro un balón tengo ganas de jugar. Mientras tenga esa alegría y pasión por la pelota, podré disfrutar mucho del fútbol". <hr color="darkblue"> Noticia obtenida del Diario EL COMERCIO - PERÚ </body> </html>
- 17 -
10. Marquesinas. Es un objeto que tiene movimiento. Generalmente la marquesina es un texto pero tambin se puede aplicar con objetos de imagen. La etiqueta a utilizar es <MARQUEE>. A continuacin la sintaxis de la etiqueta: <marquee propiedades> texto u objeto a mover </marquee> Donde las propiedades a utilizar son: WIDTH=numpx Ancho de la marquesina. HEIGHT=numpx LOOP=n DIRECTION=valor Altura del objeto marquesina. Cantidad de repeticin. De manera predeterminada la repeticin es automtica. Direccin en que se mover el contenido de la marquesina. Los valores a utilizar son los siguientes: left para que se mueva hacia la izquierda. right define el movimiento hacia la derecha. up establece el movimiento hacia arriba. down hace que el movimiento sea hacia abajo. Establece el comportamiento del movimiento. Los valores a utilizar son uno de lo siguiente: scroll desplaza. slide desliza. alternate hace que rebote de un lado a otro. Define el grosor del borde de la marquesina. Anexa el archivo de imagen que ser el fondo de la marquesina. Define que el archivo de imagen de fondo no se mueva cuando se efecta el movimiento del contenido de la marquesina. Establece el color de fondo. Tenga presente que puede utilizar el nombre o el cdigo hexadecimal del color. Establece el tiempo de retardo para que se mueva el contenido de la marquesina. Define la distancia del movimiento para el contenido de la marquesina. Espacio horizontal del objeto marquesina respecto a otros objetos o texto. Espacio vertical del objeto marquesina respecto a otros objetos o texto.
BEHAVIOR=valor
BORDER=n BACKGROUND=ruta BGPROPERTIES=fixed BGCOLOR=color SCROLLADELAY=n SCROLLOAMOUNT=n HSPACE=numpx VSPACE=numpx
Muestras: Cdigo de marquesina <marquee> Hola mundo </marquee> <marquee width=50%> My love </marquee> <marquee direction=right> Islas ballestas </marquee> <marquee scrolldelay=150> <img src=fotos/cusco.jpg width=90 height=60> <img src=fotos/puno.jpg width=90 height=60> <img src=fotos/ancash.jpg width=90 height=60> </marquee> Comentario El texto se mueve hacia la izquierda. El texto se mueve hacia la izquierda y el objeto tiene ancho de 50% El texto se mueve hacia la derecha, contiene aspecto negrita y cursiva. La marquesina contiene 3 imgenes (de tamao 90 x 60 pxeles) que se movern hacia la izquierda, con un retardo de tiempo de 150 milisegundos.
- 18 -
Ejemplo: En el cdigo siguiente usted va a reconocer el uso de las marquesinas con sus propiedades y su aplicacin con imgenes. dpw07.html <html> <head> <title>Muestra de uso de marquesinas...</title> </head> <body> <marquee direction="right" scrolldelay="250" behavior="alternate"> Viva el Perú </marquee> <hr size=15 /> <center> <marquee scrolldelay="25" width=48%> Huascarán, Islas Ballestas, Líneas de Nazca </marquee> <marquee direction="right" scrolldelay="25" width=48%> Los Baños del Inca, Lago Titicaca, Catedral de Lima </marquee> </center> <center> <marquee scrolldelay="25" width=48% direction="up"> <img src="fotos/cusco.jpg" /> <img src="fotos/piura.jpg" /> <img src="fotos/ancash.jpg" /> </marquee> </center> <hr size=7 /> Hasta pronto amigos </body> </html>
- 19 -
11. Hipervnculos y marcadores. Permiten enlazar con documentos web, direcciones web y cuentas de correo. 11.1. Hipervnculos. Establece el enlace a direcciones web, documentos web, y cuentas de correo. <a href=ruta target=destino> dato enlazado </a> Donde: ruta destino
Es la direccin web o nombre del documento web Seala donde se mostrar la web visitada, los valores son: _top representa al frame padre de todos los de la ventana del navegador, con lo que el documento solicitado se cargar en la pantalla actual, ocupando toda la ventana y destruyendo la estructura de frames anterior. _self representa al propio frame o ventana en que se encuentra el enlace, y es el valor por defecto. El documento solicitado se cargar en la pgina actual, reemplazando a la que lo ha solicitado. _blank representa a una pantalla en blanco, por lo que el documento se abrir en una nueva ventana del navegador. _parent representa al frame padre del que contiene la pgina con el enlace, es decir, al que se encuentra inmediatamente por encima del actual en la jerarqua de frames de la pgina. nomventana es el valor del atributo name que le hayamos dado en una pgina de frameset a un frame o a una ventana flotante en la que queramos que se abra el documento.
Ejemplo: En el caso siguiente usted va a poder crear documentos web vinculados. dpw08.html <html> <head> <title>Enlaces</title> </head> <body link="red" vlink="red" alink="orange"> <hr> <center> Novedades </center> <hr /> Mis webs favoritas: <ul> <li><a href="http://www.yahoo.es">Yahoo</a></li> <li><a href="http://www.gmail.com">Gmail</a></li> <li><a href="http://www.google.com.pe">Google</a></li> <li><a href="http://www.elcomercioperu.com.pe">El Comercio Peru </a></li> </ul> Mis muestras <a href="dpw08a.html">Paisajes</a> <a href="dpw08b.html">Animales</a> <a href="dpw08c.html">Mapas</a> </body> </html> http://www.istchocano.edu.pe - 20 Separata de Diseo Web I
dpw08a.html <html> <head> <title>Enlaces</title> </head> <body link="red" vlink="red" alink="orange"> <hr /> <center> Paisajes </center> <hr /> <center> <img src="fotos/cusco.jpg" width=180 height=140> <img src="fotos/piura.jpg" width=180 height=140> <img src="fotos/ancash.jpg" width=180 height=140> <img src="fotos/tumbes.jpg" width=180 height=140> <img src="fotos/ica.jpg" width=180 height=140> <img src="fotos/huanuco.jpg" width=180 height=140> </center> <a href="dpw08.html">Volver al principal</a> </body> </html>
dpw08b.html <html> <head> <title>Enlaces</title> </head> <body link="red" vlink="red" alink="orange"> <hr /> <center> Animales </center> <hr /> <center> <img src="fotos/leon.jpg" width=180 height=140 /> <img src="fotos/jirafa.jpg" width=180 height=140 /> <img src="fotos/tigre.jpg" width=180 height=140 /> <img src="fotos/gorila.jpg" width=180 height=140 /> <img src="fotos/avestruz.jpg" width=180 height=140 /> <img src="fotos/lagarto.jpg" width=180 height=140 /> </center> <a href="dpw08.html">Volver al principal</a> </body> </html>
- 21 -
dpw08c.html <html> <head> <title>enlaces</title> </head> <body link="red" vlink="red" alink="orange"> <hr> <center> Mapas </center> <hr> <center> <img src="fotos/peru.jpg" width=180 height=140 /> <img src="fotos/chile.jpg" width=180 height=140 /> <img src="fotos/argentina.jpg" width=180 height=140 /> <img src="fotos/colombia.jpg" width=180 height=140 /> <img src="fotos/ecuador.jpg" width=180 height=140 /> <img src="fotos/bolivia.jpg" width=180 height=140 /> </center> <a href="dpw08.html">Volver al principal</a> </body> </html>
11.2. Marcadores. Utilcelo para sealar el lugar de posicionamiento dentro del documento web. <a name=nombre del marcador> dato con marcador </a> Donde: nombre del marcador
Es un texto que representa al rea con marcador
Ejemplo: El caso siguiente permitir que usted conozca el uso de los marcadores y su aplicacin en los hipervnculos. dpw09.html <html> <head> <title>Uso de marcadores</title> </head> <body leftmargin=20 marginwidth=20> <center>Noticias</center> <hr /> Temas: <ul> <li><a href="#tecno">Tecnología</a></li> <li><a href="dpw09a.html#depo">Deportes</a></li> <li><a href="dpw09a.html#turi">Turismo</a></li> </ul> <center> http://www.istchocano.edu.pe - 22 Separata de Diseo Web I
<img src="fotos/alfa01.jpg" width="80" height="70" /> <img src="fotos/alfa02.jpg" width="80" height="70" /> <img src="fotos/alfa03.jpg" width="80" height="70" /> <img src="fotos/alfa04.jpg" width="80" height="70" /> <img src="fotos/alfa05.jpg" width="80" height="70" /> <img src="fotos/alfa06.jpg" width="80" height="70" /> </center> <hr /> <a name="tecno">TECNOLOGÍA</a> Intel presenta nueva familia de Chip doble núcleo. <img src="fotos/dualcore.jpg" width="225" hspace="4" align="left"> El principal fabricante de procesadores a nivel mundial Intel Corporation presentó esta semana una nueva línea formada por diez chips Intel Core 2 Duo e Intel Core 2 Extreme para PCs, computadoras portátiles y estaciones de trabajo que, según la compañía, consumen 40% menos energía que sus antecesores. Al tener un doble núcleo, estos chips permiten una reducción en el consumo de energía, a comparición de los chips de un solo núcleo. Además, pueden trabajar con múltiples aplicaciones simultáneamente sin perjudicar la velocidad, y sin que la máquina se cuelgue. Durante la presentación, Paul Otellini, presidente de Intel, no dudo es afirmar que estos procesadores eran "los mejores del mundo" y que se trataba del lanzamiento más revolucionario de la compañía desde los chips Pentium. Esta nueva línea de procesadores está formada por cinco Intel Core 2 Duo, para PCs, y cinco Intel Core Extreme diseñadas para portátiles. Ambos modelos ofrecen ventajas tales como optimizar el ancho de banda de su computadora, así como duplicar la velocidad de ejecución que suelen usarse en aplicaciones gráficas y multimedias. Además, los chips para móviles reducen el consumo de energía durante períodos de inactividad logrado que la batería de su portátil dure más tiempo. La novedosa familia de procesadores de doble núcleo de Intel ya está disponible en el mercado. Sin embargo, las computadoras portátiles basadas en estos procesadores recién serán presentadas a fines de agosto. Google le declara la guerra a YouTube La empresa de búsquedas en línea Google Inc. ha decidido competir seriamente en el negocio de videos online, en el que YouTube es el amo indiscutible. La misión es complicada, pero Google ya empezó a aplicar medidas para revertir la situación y tentar el liderazgo en el mercado, convirtiéndose en un servicio gratuito y ofreciéndole a los usuarios la posibilidad de hacer dinero con su material. Este jueves, la empresa de Mountain View (California) eliminó de la barra de herramientas de su portal en inglés las opciones "Groups" y "Froggle" (las que ahora estarán dentro de la opción "More") y colocó el botón "Video", la señal más clara de su intención por competir en este sector. La compañía desea que, cada vez más, los desarrolladores de video cuelguen sus producciones en Google Video, en vez de hacerlo en YouTube. Pero esta medida es solo parte de lo que parece un plan mayor, que la empresa estaría ejecutando desde hace más de un mes. http://www.istchocano.edu.pe - 23 Separata de Diseo Web I
El 9 de agosto, el portal <a href="http://google.dirson.com/noticias.new/2756/">www.dirson.google.com </a>, especializado en todas las noticias y novedades de la compañía, anunció que los usuarios que colgaban material en Google Video habían recibido un correo en el que se les prometía una paga por sus producciones. El correo decía que Google incorporaría su sistema de publicidad AdSense en su portal de videos para beneficiar a los productores de este material. El inicio de este supuesto plan, sin embargo, se remonta a un mes atrás, cuando la compañía anunció que la visualización de los videos que se encontraban en su página sería gratis. En un inicio, Google Video cobraba a los usuarios por ver algunos videos. El monto bordeaba los 99 centavos de dólar. Pocos meses después, esta medida fue suspendida y se permitió ver gratuitamente los videos, con un banner publicitario en la parte superior de la pantalla. El salto ha sido rápido y vertiginoso: de cobrar por ver videos a pagarle a los usuarios por ellos. Solo ocho meses después de ver la luz, Google parece optimista con los resultados y la experiencia alcanzada. Tal vez por eso se animó a correr esta carrera, en desventaja y cuesta arriba, por alcanzar a YouTube, con sus miles de videos nuevos y sus millones de usuarios diarios. El correo también reveló que la compañía tiene planeado rediseñar la interfaz de su servicio, para que tenga las mismas funciones y ventajas que el de su rival. Actualmente, Google Video está disponible en Alemania, Canadá, España, Estados Unidos, Francia, Gran Bretaña, Holanda, Italia y Polonia. Pero uno puede subir un video a cualquiera de estas páginas, no importa el país en el que esté. <hr /> <a href="dpw09.html">Volver al principal</a> </body> </html> Prepare otro documento web con el nombre de dpw09a.html que contenga informacin de Deportes y Turismo. Tenga presente lo siguiente: Para el bloque de informacin de Deportes usted debe considerar: <a name="depo">Deportes</a> Manchester United estaría dispuesto a llevarse a Tevez. : : completar la informacin : <a href="dpw09.html">Volver al principal</a> <hr /> Para el bloque de informacin de Turismo usted debe considerar:
<a name="turi">TURISMO</a> <img src="apurimac.jpg" width="200" height="129" hspace="4" align="right" />Apurímac, en la cordillera de Vilcabamba. : : completar la informacin : <a href="dpw09.html">Volver al principal</a> <hr /> ANEXO: Colores en HTML. http://www.istchocano.edu.pe - 24 Separata de Diseo Web I
En la composicin de webs juegan un papel muy importante los colores. Se indican en valores RGB, es decir, mezclamos cantidades de Rojo, Verde y Azul. Los valores RBG se indican en numeracin hexadecimal, en base 16, (los dgitos pueden crecer hasta 16). Como no hay tantos dgitos numricos se utilizan las letras de la A a la F. a) Tabla de colores en HTML. A continuacin la tabla de cdigo hexadecimal para el uso de colores en HTML.
Cdigo #000000 #000033 #000066 #000099 #0000CC #0000FF #003300 #003333 #003366 #003399 #0033CC #0033FF #006600 #006633 #006666 #006699 #0066CC #0066FF #009900 #009933 #009966 #009999 #0099CC #0099FF #00CC00 #00CC33 #00CC66 #00CC99 #00CCCC #00CCFF #00FF00 #00FF33 #00FF66 #00FF99 #00FFCC #00FFFF
Color Cdigo Color Cdigo Color Cdigo Color Cdigo Color Cdigo Color
#330000 #330033 #330066 #330099 #3300CC #3300FF #333300 #333333 #333366 #333399 #3333CC #3333FF #336600 #336633 #336666 #336699 #3366CC #3366FF #339900 #339933 #339966 #339999 #3399CC #3399FF #33CC00 #33CC33 #33CC66 #33CC99 #33CCCC #33CCFF #33FF00 #33FF33 #33FF66 #33FF99 #33FFCC #33FFFF
#CC0000 #CC0033 #CC0066 #CC0099 #CC00CC #CC00FF #CC3300 #CC3333 #CC3366 #CC3399 #CC33CC #CC33FF #CC6600 #CC6633 #CC6666 #CC6699 #CC66CC #CC66FF #CC9900 #CC9933 #CC9966 #CC9999 #CC99CC #CC99FF #CCCC00 #CCCC33 #CCCC66 #CCCC99 #CCCCCC #CCCCFF #CCFF00 #CCFF33 #CCFF66 #CCFF99 #CCFFCC #CCFFFF
#FF0000 #FF0033 #FF0066 #FF0099 #FF00CC #FF00FF #FF3300 #FF3333 #FF3366 #FF3399 #FF33CC #FF33FF #FF6600 #FF6633 #FF6666 #FF6699 #FF66CC #FF66FF #FF9900 #FF9933 #FF9966 #FF9999 #FF99CC #FF99FF #FFCC00 #FFCC33 #FFCC66 #FFCC99 #FFCCCC #FFCCFF #FFFF00 #FFFF33 #FFFF66 #FFFF99 #FFFFCC #FFFFFF
b) Nombres y cdigos de color. http://www.istchocano.edu.pe - 25 Separata de Diseo Web I
A continuacin la tabla con nombre de color en HTML para que usted lo pueda utilizar sin problemas. Nombre HTML Colores AMARILLOS Gold Yellow LightYellow LemonChiffon LightGoldenrodYellow PapayaWhip Moccasin PeachPuff PaleGoldenrod Khaki DarkKhaki Colores PRPURAS Lavender Thistle Plum Violet Orchid Fuchsia Magenta MediumOrchid MediumPurple BlueViolet DarkViolet DarkOrchid DarkMagenta Purple Indigo SlateBlue DarkSlateBlue FF D7 00 FF FF 00 FF FF E0 FF FA CD FA FA D2 FF EF D5 FF E4 B5 FF DA B9 EE E8 AA F0 E6 8C BD B7 6B E6 E6 FA D8 BF D8 DD A0 DD EE 82 EE DA 70 D6 FC 0F C0 FF 00 FF BA 55 D3 93 70 DB 8A 2B E2 94 00 D3 99 32 CC 8B 00 8B 80 00 80 4B 00 82 6A 5A CD 48 3D 8B Hexadecimal R G B
Nombre HTML Colores VERDES GreenYellow Chartreuse LawnGreen Lime LimeGreen PaleGreen LightGreen MediumSpringGreen SpringGreen http://www.istchocano.edu.pe - 26 -
Hexadecimal R G B AD FF 2F 7F FF 00 7C FC 00 00 FF 00 32 CD 32 98 FB 98 90 EE 90 00 FA 9A 00 FF 7F Separata de Diseo Web I
MediumSeaGreen SeaGreen ForestGreen Green DarkGreen YellowGreen OliveDrab Olive DarkOliveGreen MediumAquamarine DarkSeaGreen LightSeaGreen DarkCyan Teal Colores AZULES Aqua Cyan LightCyan PaleTurquoise Aquamarine Turquoise MediumTurquoise DarkTurquoise CadetBlue SteelBlue LightSteelBlue PowderBlue LightBlue SkyBlue LightSkyBlue DeepSkyBlue DodgerBlue CornflowerBlue MediumSlateBlue RoyalBlue Blue MediumBlue DarkBlue Navy MidnightBlue
3C B3 71 2E 8B 57 22 8B 22 00 80 00 00 64 00 9A CD 32 6B 8E 23 80 80 00 55 6B 2F 66 CD AA 8F BC 8F 20 B2 AA 00 8B 8B 00 80 80 00 FF FF 00 FF FF E0 FF FF AF EE EE 7F FF D4 40 E0 D0 48 D1 CC 00 CE D1 5F 9E A0 46 82 B4 B0 C4 DE B0 E0 E6 AD D8 E6 87 CE EB 87 CE FA 00 BF FF 1E 90 FF 64 95 ED 7B 68 EE 41 69 E1 00 00 FF 00 00 CD 00 00 8B 00 00 80 19 19 70
Nombre HTML Colores MARRONES Cornsilk BlanchedAlmond Bisque http://www.istchocano.edu.pe - 27 -
Hexadecimal R G B FF F8 DC FF EB CD FF E4 C4 Separata de Diseo Web I
NavajoWhite Wheat BurlyWood Tan RosyBrown SandyBrown Goldenrod DarkGoldenrod Peru Chocolate SaddleBrown Sienna Brown Maroon Colores BLANCOS White Snow Honeydew MintCream Azure AliceBlue GhostWhite WhiteSmoke Seashell Beige OldLace FloralWhite Ivory AntiqueWhite Linen LavenderBlush MistyRose Colores GRISES Gainsboro LightGrey Silver DarkGray Gray DimGray LightSlateGray SlateGray DarkSlateGray Black
FF DE AD F5 DE B3 DE B8 87 D2 B4 8C BC 8F 8F F4 A4 60 DA A5 20 B8 86 0B CD 85 3F D2 69 1E 8B 45 13 A0 52 2D A5 2A 2A 80 00 00 FF FF FF FF FA FA F0 FF F0 F5 FF FA F0 FF FF F0 F8 FF F8 F8 FF F5 F5 F5 FF F5 EE F5 F5 DC FD F5 E6 FF FA F0 FF FF F0 FA EB D7 FA F0 E6 FF F0 F5 FF E4 E1 DC DC DC D3 D3 D3 C0 C0 C0 A9 A9 A9 80 80 80 69 69 69 77 88 99 70 80 90 2F 4F 4F 00 00 00
- 28 -

CI 2011 Web I - A

Caricato da

Informazioni sul documento

Titolo originale

Copyright

Formati disponibili

Condividi questo documento

Condividi o incorpora il documento

Opzioni di condivisione

Hai trovato utile questo documento?

Questo contenuto è inappropriato?

Copyright:

Formati disponibili

CI 2011 Web I - A

Caricato da

Copyright:

Formati disponibili

Leccin N 01

Introduccin al Diseo de Pginas Web

Separata de Diseo Web I

Esta es la carpeta que ser la raz del sitio web local.

Separata de Diseo Web I

<BASEFONT FACE=nomfuentebase />

<META NAME=nomvariable CONTENTS=valor />

<META HTTP-EQUIV=Refresh CONTENTS=numseg;URL=ruta />

<META HTTP-EQUIV=Expires CONTENTS=valor />

<META HTTP-EQUIV= "Content-Type" CONTENT="text/html;charset=conjunto" />

Separata de Diseo Web I

Separata de Diseo Web I

Separata de Diseo Web I

Separata de Diseo Web I

Visite Tumbes. Visite Tacna.

Separata de Diseo Web I

Separata de Diseo Web I

Separata de Diseo Web I

Separata de Diseo Web I

BORDER=n BACKGROUND=ruta BGPROPERTIES=fixed BGCOLOR=color SCROLLADELAY=n SCROLLOAMOUNT=n HSPACE=numpx VSPACE=numpx

Separata de Diseo Web I

Separata de Diseo Web I

Separata de Diseo Web I

Es un texto que representa al rea con marcador

b) Nombres y cdigos de color. http://www.istchocano.edu.pe - 25 Separata de Diseo Web I

Hexadecimal R G B AD FF 2F 7F FF 00 7C FC 00 00 FF 00 32 CD 32 98 FB 98 90 EE 90 00 FA 9A 00 FF 7F Separata de Diseo Web I

Nombre HTML Colores MARRONES Cornsilk BlanchedAlmond Bisque http://www.istchocano.edu.pe - 27 -

Hexadecimal R G B FF F8 DC FF EB CD FF E4 C4 Separata de Diseo Web I

Separata de Diseo Web I

Potrebbero piacerti anche