Ing.

Edgar Mauricio Ruiz Osuna Centro Industrial y Desarrollo Empresarial Soacha SENA Regional Cundinamarca Gua Taller No. 2 Programa: ADSI
Objetivo: Identificar el uso de los comentarios, marquesinas, las listas y los enlaces (hipervnculos) dentro de un documento web.

COMENTARIOS

<!--

Comentarios no visibles en la pantalla A veces es muy til escribir comentarios en el documento HTML sobre el cdigo que escribimos, que nos pueden servir para recordar posteriormente sobre lo que hicimos, y que no queremos que se vean en pantalla. Esto se consigue encerrando dichos comentarios entre estos dos smbolos: <!-- y -->
Ejemplo:

<!-- Esto es un comentario al cdigo que no se ver en pantalla -->

LISTAS Listas desordenadas (Unordered Lists) Sirven para presentar cosas que, por no tener un orden determinado, no necesitan ir precedidas por un nmero. Su estructura es la siguiente: Lista de tiles <UL> <LI> Cuadernos <LI> Lpices <LI> Esfero <LI> Hojas </UL> Se puede anidar una lista dentro de otra. Por ejemplo: <UL> <LI> Paises Latinoamericanos <UL> <LI> Colombia <UL> Departamentos <LI> Cundinamarca <LI> Meta <LI> Valle </UL> <LI> Brasil </UL> <LI> Paises Europeos <UL> <LI> Espaa <LI> Francia <LI> Alemania <LI> Suiza </UL>

</UL> Parametros que se pueden usar:

type=tipo

Indica que tipo de item se usar. Posibilidades: Circle. Crculo Disk. Disco Square. Cuadrado

Listas ordenadas (ordered lists) Sirven para presentar cosas en un orden determinado. Su estructura es muy similar a la anterior. La diferencia es que en el resultado aparecer automticamente un nmero correlativo para cada cosa. <OL> <LI> Paises Latinoamericanos <OL> <LI> Colombia <OL> Departamentos <LI> Cundinamarca <LI> Meta <LI> Valle </OL> <LI> Brasil </OL> <LI> Paises Europeos <OL> <LI> Espaa <LI> Francia <LI> Alemania <LI> Suiza </OL> </OL> Parametros que se pueden usar start=n Indica al navegador que inicie la lista por el nmero indicado. El nmero debe indicarse en la forma arbiga (1, 2, 3, ...) aunque la lista, por ejemplo, muestre letras. type=tipo Indica que tipo de numeracin se usar. Posibilidades: A. Letras maysculas a. Letras minsculas 1. Nmeros arbigos I. Romanos en maysculas i. Romanos en minsculas

Enlaces (HIPERVINCULOS) La etiqueta <A atributo> se emplea para insertar un enlace en una pgina, mediante el atributo se indica el lugar del enlace. La caracterstica que ms ha influido en el espectacular xito del Web ha sido, aparte la de su carcter multimedia, la posibilidad de unir los distintos documentos repartidos por todo el mundo por medio de enlaces hipertexto.

i) Estructura de los enlaces En general, los enlaces tienen la siguiente estructura: <A HREF="xxx"> yyy </A> donde xxx es el destino del enlace yyy es el texto indicativo en la pantalla del enlace ii) Tipos de enlaces Vamos a distinguir cuatro tipos de enlaces: a) Enlaces dentro de la misma pgina b) Enlaces con otra pgina nuestra c) Enlaces con una pgina fuera de nuestro sistema d) Enlaces con una direccin de e-mail a) Enlaces dentro de la misma pgina A veces, en el caso de documentos (o pginas) muy extensos, nos puede interesar dar un salto desde una posicin a otra determinada. En este caso, lo que antes hemos llamado XXX, es decir, el destino del enlace, en este caso el sitio dentro de la pgina a donde queremos saltar, se sustituye por #marca (la palabra marca puede ser cualquier palabra que queramos). Lo que hemos llamado antes YYY es la palabra (o palabras) que aparecern en la pantalla en color (en forma de hipertexto). Su estructura es, entonces: <A HREF="#marca"> YYY </A> y en el sitio donde queremos saltar, debemos poner la siguiente etiqueta: <A NAME="marca"> </A> Por ejemplo, si quiero saltar desde aqu a la pantalla final, pongo la siguiente etiqueta: <A HREF="#final"> Pulsa para ir al final</A> Y en el final del documento he puesto esta otra etiqueta: <A NAME="final"> </A> b) Enlaces con otra pgina nuestra Puede ser que tengamos una sola pgina. Pero lo ms frecuente es que tengamos varias pginas, una inicial (o principal) y otras conectadas a ella, e incluso entre ellas mismas. Supongamos que queremos enlazar con otra pagina. En este caso, simplemente sustituimos lo que hemos llamado XXX (el destino del enlace) por el nombre del archivo: <A HREF="mipag2.html"> Ejemplo del tema anterior </A> Si queremos que vaya a un sitio concreto de otra pgina nuestra en vez de ir al principio de la pgina, adonde va por defecto, en ese sitio tenemos que colocar una marca y completar el enlace con la referencia a esa marca. <A HREF="mipag2.html#final"> Ejemplo del tema anterior </A> c) Enlaces con una pgina fuera de nuestro sistema Si queremos enlazar con una pgina que est fuera de nuestro sistema (es decir, que est en un servidor distinto al que soporta nuestra pgina), es necesario conocer su direccin completa, o URL (Uniform Resource Locutor - Localizador Uniforme de Recursos). <A HREF="http://www.google.com.ar/"> Pgina inicial de Google </A> d) Enlaces con una direccin de email En este caso, sustituimos lo que se ha llamado antes xxx (el destino del enlace) por mailto: seguido de la direccin de email. La estructura de la etiqueta es: <A HREF="mailto: direccin de email"> Texto del enlace </A> Envo del correo electrnico a varias direcciones a la vez <ahref="mailto:nombre@direccion.com,otro_nombre@direccion.com"> Solicita ms informacin</a> Aadir un "asunto" inicial al correo electrnico <a href="mailto:nombre@direccion.com?subject=Solicitud de ms informacin"> Solicita ms informacin</a> Aadir un texto inicial en el cuerpo del correo electrnico <a href="mailto:nombre@direccion.com?body=Estara interesado en solicitar ms informacin sobre sus productos">Solicita ms informacin</a>

Parametros que se pueden usar en los hipervnculos href=URL Identifica el destino del enlace. La URL puede ser absoluta (http://www.ya.com), relativa (pagina3.html), de salto hacia un marcador interno (#marca1) o una mezcla entre ambas (pagina3.html#marca1) name=nombre Coloca un marcador en la posicin en la que se encuentre la etiqueta A. target=destino Indica en qu parte de la ventana se muestra el enlace. Es indispensable para utilizar con los marcos. Puede ser: _parent. En la ventana padre de la actual _top. En toda la ventana _self. En el marco donde se encuentre el enlace _blank. En una nueva ventana. El nombre de un marco; ponindole hace que el destino del enlace se muestre en el marco indicado (el nombre debe ser el mismo que el que se utiliz en el atributo name de la etiqueta frame, Mas adelante veremos marcos).

Marquesinas (Marquees) Una marquesina (en ingls, marquee) es una ventana en la que se desplaza un texto. La etiqueta bsica es: <MARQUEE> Texto que se desplaza </MARQUEE> Como no hemos aadido ningn atributo dentro de la etiqueta, el comportamiento de la marquesina es el que tiene por defecto: ocupa todo el ancho de la pantalla, tiene la altura de una lnea y el texto se desplaza lentamente de derecha a izquierda. Parametros WIDHT, HEIGHT Ajustan la anchura y altura, respectivamente, de la marquesina. Pueden ser igual a un nmero de pixels, o a un porcentaje de la pantalla. Ejemplo: <MARQUEE WIDTH=50% HEIGHT=60> Esta marquesina ocupa el 50% del ancho de la pantalla y tiene una altura de 60 pixels </MARQUEE> ALIGN Modifica el alineamiento del texto que rodea a la marquesina, que puede ser TOP (arriba), MIDDLE (en medio) o BOTTOM (abajo). Ejemplo: <MARQUEE WIDTH=50% HEIGHT=60 ALIGN=BOTTOM>La palabra "Hola!" estar alineada con la parte inferior de la marquesina </MARQUEE> Hola! BEHAVIOR Este atributo (que quiere decir en ingls comportamiento) sirve para definir de qu manera se va a efectuar el desplazmiento del texto. Si es igual a SCROLL (el valor por defecto), el texto aparece por un lado, se desplaza hasta el otro hasta desaparecer por l, y vuelve a empezar (como los casos que hemos visto anteriormente). Si es igual a SLIDE, aparece por un lado y se

desplaza hasta llegar al otro extremo, y se para ah. Si es igual a ALTERNATE se desplaza alternativamente hacia un lado y otro, siempre dentro de los lmites de la marquesina. Ejemplo: <MARQUEE BEHAVIOR=ALTERNATE> Este texto se mueve a un lado y otro, sin desaparecer </MARQUEE> BGCOLOR Con este atributo se modifica el color de fondo de la marquesina Ejemplo: <MARQUEE BGCOLOR="#FF7070"> Esta marquesina tiene un fondo de color rosa </MARQUEE> DIRECTION Este atributo sirve para modificar la direccin hacia la que se dirije el texto. Por defecto es LEFT (izquierda). Se puede hacer que el texto se dirija hacia la derecha igualando este atributo a RIGHT. Ejemplo: <MARQUEE DIRECTION=RIGHT> Este texto se dirije hacia la derecha </MARQUEE> SCROLLAMOUNT Define la cantidad de desplazamiento del texto en cada movimiento de avance, expresado en pixels. Cuanto mayor es el nmero, ms rpido avanza. Ejemplo: <MARQUEE SCROLLAMOUNT=50> Doy saltos grandes </MARQUEE> SCROLLDELAY Define el tiempo entre cada movimiento de avance, expresado en milisegundos.Cuanto mayor es el nmero ms lento avanza. Ejemplo: <MARQUEE SCROLLDELAY =200> Espero mucho entre cada salto </MARQUEE> LOOP Especifica el nmero de veces que aparecer el texto. Es indefinido por defecto.

TALLER 1

Crear una pagina Web, cuyo titulo de pagina se denomine TallerHTML Crear un titulo de Cuerpo denominado TALLER HTML Establezca una marquesina para el titulo que acaba de crear Cree una Linea de ancho 800, debe dejarla alineada a la izquierda y de color verde. Cree un nuevo titulo denominado PROGRAMACION HTML, establezca para este titulo letra Verdana, tamao 4, color rojo. Deje dos interlineados con espacio y escriba el siguiente texto:

Es una programacin a base de Etiquetas, es declarativo y no estructurado.

Deje dos interlineados sencillos Cree un nuevo titulo denominado ANIMALES, establezca para este ttulo y los elementos de la Lista que sigue a continuacin la letra Tahoma, tamao 5, color amarillo. Cree una lista Desordenada para clasificar ANIMALES DOMESTICOS y ANIMALES SALVAJES, cree una sublista por cada categora de animal y escriba 3 animales que sean domsticos y tres que sean salvajes Cree una lista Ordenada de 5 Departamentos de Colombia, y por cada Departamento cree una sublista con 3 municipios o ciudades correspondientes al departamento. Cree un nuevo ttulo con su nombre y apellido, establezca para este ttulo la letra Arial , tamao 4, color rojo. Establezca marquesina para este ttulo. Establezca el color azul como color de fondo de la pagina, y blanco como color de letra para el texto sin formato.

TALLER 2
1) 2) a) b) c) d) e) Cree una carpeta denominada Taller2 seguido de sus iniciales ejemplo: TALLER2EMRO Cree una pagina denominada index.html que contenga las siguientes caractersticas Titulo de Pagina : Pagina1 Diseo Web Titulo de Cuerpo: Pagina de inicio Taller Contenido del Documento: Texto relacionado sobre Programacin Debe existir un subtitulo denominado Variables Adicionar los siguientes hipervnculos : Un hipervnculo a la pagina http://www.webtaller.com Un hipervnculo a la pagina2.html (el documento que creara ms adelante) Un hipervnculo al tema Variables (el subtitulo que creo en esta pgina) 3) Cree una pagina denominada Pagina2.html que contenga las siguientes caracteristicas: a) Titulo de Pagina : Pagina2 Diseo Web b) Titulo de Cuerpo: Imgenes en Html c) Contenido del Documento: Incorpore 5 Prrafos cualquiera referentes al mbito informtico (monitores, software, computadores,etc) d) El color de fondo de la pagina debe ser azul y el color del texto debe ser blanco.