INTRODUCCIÓN AL LENGUAJE HTML... 2 Características del lenguaje HTML... 2 Sintaxis del HTML... 2 Partes de un documento HTML... 2 FORMATO EN HTML...

Transcripción

1 INTRODUCCIÓN AL LENGUAJE HTML... 2 Características del lenguaje HTML... 2 Sintaxis del HTML... 2 Partes de un documento HTML... 2 FORMATO EN HTML... 2 Formato de párrafo... 2 Encabezados... 3 Formateando el texto... 3 Color tamaño y tipo de letra... 4 Atributos para páginas... 4 Listas... 5 Caracteres especiales... 6 ENLACES EN HTML... 6 Internos... 6 Locales... 6 Remotos... 7 Con direcciones de correo... 7 Con archivos... 7 IMÁGENES... 7 Alineación de imágenes... 8 Formatos gráficos para páginas web... 8 ELEMENTOS MULTIMEDIA... 8 Reproducir sonido... 8 Mostrar vídeo... 9 TABLAS EN HTML... 9 Atributos para líneas y celdas... 9 Atributos solo para celdas... 9 Atributos para tablas... 9 Tablas anidadas FORMULARIOS HTML Elementos de formularios FRAMES EN HTML Explicación básica Creación de una estructura simple Dirigir los enlaces Anidar frames Atributos avanzados MAPAS DE IMÁGINES Etiquetas map y area TEXTO EN MOVIMIENTO (MARQUESINAS) EJERCICIOS... 17

2 INTRODUCCIÓN AL LENGUAJE HTML Características del lenguaje HTML Hiper Text Markup Language (HTML) HTML es el lenguaje usado por los navegadores para mostrar páginas web al usuario, permitiendo la introducción de referencias a otras páginas por medio de los enlaces hipertexto. Para programar en HTML necesitamos un editor de texto plano, por ejemplo El bloc de notas de Windows. Para tener el control de las extensiones en Windows Mi PC, menú Ver, Opciones de carpeta, solapa Ver, desmarcar la casilla Ocultar extensiones para tipos de archivos conocidos. Existen editores específicos para la creación de páginas web. Una página web es un archivo con extensión.htm que contiene código HTML en forma de texto plano. Sintaxis del HTML HTML basa su sintaxis en un elemento llamado etiqueta, la cual presenta frecuentemente dos partes: Apertura <etiqueta> Cierre </etiqueta> Partes de un documento HTML Un documento HTML ha de estar delimitado por la etiqueta <html> y </html>, que a su vez está dividido en dos partes principales: Encabezado delimitado por <head> y </head>, donde se colocan etiquetas de índole informativo como el título. Cuerpo <body> </body>, donde se coloca el texto y las imágenes que mostrará el navegador. Las mayúsculas o minúsculas son indiferentes al escribir etiquetas. Resulta aconsejable escribir en minúsculas pues otras tecnologías que conviven con html no son tan permisivas. Se pueden incluir comentarios que permitan una lectura más clara del código fuente con la etiqueta:  (Ejercicio 1) FORMATO EN HTML Formato de párrafo <p> y </p> introduce un salto y deja una línea en blanco con el resto del texto. <br>, no existe cierre realiza un simple retorno de carro sin dejar una línea en blanco. Atributo align para justificar el texto dentro de los párrafos:

3 Un atributo es un parámetro incluido en el interior de la etiqueta que ayuda a definir el funcionamiento de la etiqueta de una forma mas personal, conviene escribirlos entre dobles comillas. Alineación a la izquierda <p align = left > Texto alineado a la izquierda </p> Alineación centrada <p align = center > Texto centrado </p> Alineación a la derecha <p align = right > Texto alineado a la derecha </p> Texto justificado <p align = justify > Texto justificado </p> Etiqueta <hr> sirve para dividir un documento en varias secciones, mostrando una línea horizontal de tamaño determinable (no necesita etiqueta de cierre). Atributos: align indica la forma en que se alineará la regla cuando no ocupe el ancho total de la pantalla (por defecto ocupa todo el ancho). Noshade no muestra la sombra de la barra, evitando el efecto en tres dimensiones. Size = n altura de la regla en pixels. Width = n ó % ancho de la regal en pixels o tanto por ciento. Etiqueta <div> </div> sirve para simplificar código y aplicar el atributo align a un conjunto de párrafos. Etiqueta <center> </center> se utiliza para centrar líneas de texto, imágenes y cualquier elemento HTML (tablas, listas, etc.) Encabezados Párrafos formateados como títulos con un tamaño mayor de letra y el texto en negrita, existen diferentes tipos en función del tamaño, que van del <h1> al <h6>, este tipo de etiquetas soportan el atributo align. Cada navegador puede formatear el texto a su gusto con tal de que parezca un titular. (Ejercicio 2) Formateando el texto Estilos físicos; aquellos que siempre causan el mismo efecto. Negrita <b>texto en negrita (bold)</b> Itálica <i>texto en cursiva (italic) </i> Subrayado <u>texto subrayado (underlined)</u> Texto pequeño <small>se utiliza la fuente de menor tamaño</small> Texto grande <big>se utiliza el mayor tamaño de fuente</big> Subíndices El símbolo del agua es H<sub>2</sub>O Superíndices La superficie de un círculo es πr<sup>2</sup> Espacios en blanco con esta secuencia se puede mostrar mas de un espacio en blanco de separación. Anidar etiquetas <b>texto solo en negrita y <i>texto en negrita y cursiva</i></b> Texto preformateado <pre> </pre>; muestra texto respetando los saltos de línea, tabuladores y espacios en blanco utilizando una fuente de espaciado fijo mas pequeña que el texto normal. Presenta un inconveniente, si la línea es demasiado larga no la corta el navegador. Dentro de esta etiqueta solo se podrá utilizar <b>, <i> y los hiperenlaces.

4 Estilos lógicos; indican un tipo de texto que por sus características tienen un modo de mostrarse propio. Se pueden utilizar ambos estilos para especificar un mismo efecto (una frase resaltada con negrita o con strong). (depende del Navegador) <strong>texto resaltado</strong> <address>dirección de correo electrónico</address> <blockquote>cita textual o texto destacado</blockquote> <cite>título de una película o un libro</cite> <code>código fuente de un lenguaje de programación</code> <def>definición</def> <em>énfasis</em> <kbd>texto introducido desde el teclado</kbd> <samp>mensajes de estado del ordenador</samp> <strike>texto tachado</strike> <var>variable</var> Color tamaño y tipo de letra Etiqueta <font> </font> con los siguientes atributos: Atributo face <font face= Comic Sans MS >Texto con un tipo de letra llamado Comic </font> Atributo size define el tamaño de la letra que en términos absolutos va de los valores 1 al 7, y en términos relativos se puede especificar como + ó el número de unidades con relación al tamaño actual. Atributo color define el color del texto que puede ser un valor en hexadecimal compuesto por la intensidad de rojo, verde y azul, o una constante predefinida de las siguientes: Aqua, Black, Blue, Fucshia, Gray, Green, Lime, Maroon, Navy, Olive, Purple, Red, Silver, Teal, White, Yellow. Etiqueta <basefont size=n> define el tamaño de la fuente que se considera como base para definir los tamaños de fuente relativos (por defecto es 3). (Ejercicio 3) Atributos para páginas Se definen en la etiqueta <body> y son generales a toda la página. bgcolor atributo para el color de fondo. text atributo para el color del texto background = imagendefondo se utiliza para poner una imagen de fondo bgproperties = fixed Atributo sirve para mantener la imagen de fondo fija cuando nos desplazamos por la página con las barras de desplazamiento. Atributos para el color de los enlaces: Enlaces que no han sido visitados link Enlaces visitados vlink Enlaces activos (momento en que se pulsa) alink Atributos para definir los márgenes: Margen de los lados leftmargin (iexplorer), marginwidth (netscape) Margen de arriba y abajo topmargin (iexplorer), marginheight (netscape), conviene poner los dos para asegurarnos que funcione en cualquier navagador.

5 (Ejercicio 4) Listas Lista desordenadas Delimitadas por las etiquetas <ul> y </ul> (unorder list) y cada uno de sus elementos por la etiqueta <li> sin cierre. Se puede definir el tipo de viñeta con el atributo type y cualquiera de los siguientes valores: circle, square, disc. En cualquiera de las etiquetas. Ejemplo: <ul >Lista desordenada <li> Elemento con viñeta por defecto <li type= square >Elemento con viñeta de tipo cuadrado <li type= disc >Elemento con viñeta de tipo disco <li type= circle >Elemento con viñeta de tipo círculo </ul> Listas ordenadas Delimitadas por las etiquetas <ol> y </ol> (order list) y cada uno de sus elementos por la etiqueta <li> sin cierre Se puede definir el tipo de numeración con el atributo type y cualquiera de los siguientes valores: 1, a, A, i, I. En cualquiera de las etiquetas. Se puede empezar la numeración por un valor concreto utilizando el atributo start en la etiqueta <ol> Ejemplo: Lista ordenada <ol start= 5 > <li> Elemento con numeración por defecto <li type= 1 >Elemento con numeración numérica desde el cinco <li type= a >Elemento con numeración alfabética <li type= A >Elemento con numeración alfabética con mayúsculas <li type= i >Elemento con numeración romana <li type= I >Elemento con numeración romana en mayúsculas </ol> Listas de definición Delimitadas por las etiquetas <dl> y </dl> (definition list) y cada uno de sus elementos por la etiqueta <dt> (definition term) sin cierre; para el término y <dd> (definition definition) sin cierre; para la definición. Ejemplo: Lista de definición <dl> <dt> Primer término <dd>definición del primer término <dt>segundo <dd>definición del segundo término </dl> Anidando listas Se pueden anidar las listas para crear efectos combinados

6 Ejemplo: Lista desordenada con lista ordenada <ul> <li>un elemento <li>otro elemnto<br> Lista ordenada <ol> <li>primer elemento <li>segundo elemento </ol> </ul> Caracteres especiales Algunos caracteres especiales: Euro Copy Right Marca registrada Un medio ½ Un cuarto ¼ Primero 1º Primera 1ª (Ejercicio 5) ENLACES EN HTML La sintaxis general de un enlace es <a href= destino >contenido</a> siendo el contenido un texto o una imagen, y el destino otro lugar de la misma página, otra página, un correo electrónico o un archivo. Internos Son los que se dirigen a otras partes dentro de la misma página, se utilizan cuando las páginas son de gran tamaño para desplazarse rápidamente a los diferentes lugares de la misma. En el mismo documento debe haber dos tipos de enlace: el origen y el destino Origen <a href= #destino >contenido</a> Destino <a name= destino ></a> La tendencia es generar páginas independientes con tamaños mas reducidos enlazadas entre ellas por enlaces locales. (Ejercicio 6) Locales Son los que se dirigen a otras páginas del mismo sitio web de forma que se pueden relacionar los distintos documentos HTML que componen nuestro sitio web. <a href= archivo.htm >contenido</a> Lo normal es que los sitios estén ordenados por directorios que contienen las diferentes secciones de la página, imágenes, sonidos, etc., por lo que habrá que especificar la trayectoria del archivo utilizando la barra / en lugar de \. (Ejercicio 7)

7 Remotos Son los dirigidos hacia páginas de otros sitios web indicando en la referencia la URL o dirección web de la página a enlazar, sabiendo que dichas direcciones comienzan por el tipo de protocolo por el que se accede: http ó ftp <a href= >contenido</a> (Ejercicio 8) Con direcciones de correo Son aquellos que nos abren un nuevo mensaje de correo electrónico dirigido a una dirección determinada, suele ser una vía de contacto del visitante con el propietario de la página. <a href= mailto:direcciondecorreo >contenido</a> Conviene en el contenido escribir la dirección de correo electrónico por si el usuario no tiene configurado un programa de correo poder conocer la dirección (Ejercicio 9) Con archivos Se utiliza para que los usuarios puedan hacer download de ficheros, son iguales que los enlaces locales o remotos, solo que en lugar de ir dirigidos a una página web van dirigidos a otro tipo de archivo. <a href= archivo.zip >Descarga del archivo</a> Conviene que el archivo esté comprimido para obligar al usuario que lo cargue en su disco duro antes de ejecutarlo. (Ejercicio 10) IMÁGENES <img src = trayectoriadearchivografico >; img (image) y src (source), esta etiqueta no posee cierre. Atributo src trayectoria del archivo que contiene la imagen. Si la trayectoria es absoluta se referencia file:///unidad:/directorios/archivoimagen. Atributo alt descripción de la imagen cuando se está cargando o se desactiva la carga. height y width definen la altura y el ancho del gráfico en pixels. No es aconsejable redimensionar la imagen ya que un aumento supone pérdida de calidad, mientas que una reducción supone un gasto de memoria innecesario. (para saber el tamaño de una imagen botón derecho del ratón sobre la misma, propiedades) border tamaño en pixels del cuadro que rodea la imagen. Si deseamos eliminar el borde cuando la imagen sirve de enlace se le asigna valor cero border= 0 Atributos vspace y hspace espacio en píxels entre la imagen y los elementos que la rodean. lowsrc imagen de baja resolución. El navegador cuando detecta este atributo primero descarga esta imagen (atributo lowsrc) que tarda menos y luego descarga la de resolución adecuada (atributo src). Las imágenes también se pueden utilizar como enlaces de la siguiente manera: <a href= archivo.htm ><img src= imagen ></a>

8 (Ejercicio 11) Alineación de imágenes Horizontalmente Atributo align dentro de las etiquetas <div> o <p> con cualquiera de los siguientes valores: left, right, center. <div align= valor ><img src= archivoimagen ></div> Atributo align de la etiqueta <img> con cualquiera de los valores: left o right. <img src= archivoimagen align= valor > Permite distribuir el texto al lado contrario de la alineación. Atributo clear de la etiqueta <br> complementa el anterior permitiendo saltar las líneas que hagan falta para situarse por debajo de la imagen, indicado el tipo de alineación que tiene la imagen, puede tomar cualquiera de estos valores: left, right, all. Verticalmente Atributo align de la etiqueta <img> con cualquiera de los siguientes valores: top permite ajustar la imagen a la parte mas alta de la línea bottom ajusta el bajo de la imagen al texto. absbottom coloca el borde inferior de la imagen al nivel del elemento mas bajo de la línea. middle hace coincidir la base de la línea de texto con el medio vertical de la imagen absmiddle ajusta la imagen al medio absoluto de la línea. (Ejercicio 12) Formatos gráficos para páginas web GIF.Cualidades: Compresión muy buena para imágenes dibujadas o fotos muy pequeñas Transparencia utilizando un programa de diseño gráfico (Photoshop) e indicando que colores del dibujo queremos transparentes. Colores 256 o menos lo que ocasiona que ocupe menos el archivo. JPG.Cualidades: Compresión ideal para fotos, pudiendo definir la calidad para reducir el espacio. Transparencia se consigue haciendo el fondo de la imagen del mismo color que la página. Colores 16 millones de colores. ELEMENTOS MULTIMEDIA Reproducir sonido Se puede incluir: Como fondo que se ejecuta al cargar la página <BGSOUND SRC= fichero sonido [LOOP=n]> Siendo LOOP el número de veces que se repetirá el fichero de sonido: 1 si no se pone LOOP Para que se repita continuamente n=infinite

9 De forma que sea activado por el usuario, por ejemplo, a través de un enlace a un fichero de sonido de forma que al seleccionar el enlace comience a ejecutarse el fichero de sonido <A HREF= fichero sonido > texto o imagen </A> Mostrar vídeo <img dynsrc= fichero de vídeo loop=n ó infinite controls start=fileopen ó mouseover> dynsrc nuevo atributo para la etiqueta IMG que en vez de mostrar una imagen mostrará un vídeo en formato AVI, se pueden utilizar todos los atributos normales de IMG; distintas alineaciones y colocaciones respecto al texto (align), distintos tamaños (width, height). Loop número de veces que se mostrará el vídeo. Controls indica si se mostrarán los botones de control para parar, volver a reproducir, rebobinar,... Start indica si la secuencia de vídeo empieza al abrir el fichero (fileopen) o cuando pase el cursor del ratón por encima (mouseover). De no poder mostrar vídeo por tratarse de otro navegador, se podrá indicar una imagen que se muestre de manera alternativa incluyendo el atributo src. (Ejercicio 13) TABLAS EN HTML Una tabla es un conjunto de celdas organizadas, dentro de las cuales podemos alojar distintos contenidos, vienen definidas por las etiquetas <table> y </table> Las tablas están formadas por líneas cada una de las cuales definidas por las etiquetas <tr> y </tr>. En cada línea habrá diferentes celdas a su vez definidas por las etiquetas <td> y </td> o <th> y </th> si queremos que su contenido aparezca destacado en negrita y centrado. (Ejercicio 14) Atributos para líneas y celdas Align alinea horizontalmente; left, right, center. Valign alinea verticalmente; top, bottom. middle. Bgcolor color de fondo para la línea o celda Bordercolor color del borde Atributos solo para celdas Background fondo para la celda a partir de un enlace a una imagen Height altura de la celda en pixels o porcentaje referido al tamaño total de la tabla. Width ancho de celda en pixels o porcentaje referido al tamaño total de la tabla. Colspan expande una celda horizontalmente. Rowspan expande una celda verticalmente. Atributos para tablas Align alinea horizontalmente la tabla con respecto a su entorno. Background fondo para la tabla a partir de un enlace a una imagen.

10 Bgcolor color de fondo para la tabla Border número de pixels del borde principal, sino se especifica es sin borde Bordercolor color del borde Cellpadding espacio en pixels entre el borde de la celda y su contenido Cellspacing espacio entre los bordes en pixels Height altura de la tabla en pixels o porcentaje referido al tamaño de la página. Width ancho de la tabla en pixels o porcentaje referido al tamaño de la página. Etiqueta <caption align= top bottom >Titulo de la tabla</caption>; se mostrará resaltado en la parte superior o inferior externa de la tabla y centrado horizontalmente. (Ejercicio 15) Tablas anidadas Consiste en incluir una tabla dentro de otra tantas veces como queramos, teniendo en cuenta que al aumentar el grado de anidación en algunos navegadores aumenta el tiempo de carga de la página. (Ejercicio 16) FORMULARIOS HTML Los formularios son esas famosas cajas de texto y botones muy utilizados para realizar búsquedas o para introducir datos personales por ejemplo en sitios de comercio electrónico. Los datos que el usuario introduce en estos campos son enviados al correo electrónico del administrador del formulario o bien a un programa que se encarga de procesarlo automáticamente. Se incluyen en las páginas con el par de etiquetas <form> </form> Atributo action tipo de acción a llevar con el formulario: Enviarlo a una dirección de correo electrónico <form action = mailto:dirección@correo.com > Enviarlo a un programa o script que procese su contenido <form action = dirección del archivo...> Atributo method forma en que es enviado el formulario post o get Atributo enctype forma en que viajará la información si el formulario se envía por correo electrónico debe ser text/plain si queremos que el formulario se procese automáticamente por un programa no utilizaremos este atributo. Ejemplo de envío de un formulario por correo: <form action = malito:dirección@correo.com method = post enctype = text/plain > Ejemplo de envío a un archivo ASP: <form action = > Elementos de formularios Cuando queramos utilizar elementos de formulario debemos escribirlos siempre entre las etiquetas <form> y </form>

11 Texto corto (Caja de texto) <input type = text name = nombre > atributo size tamaño de la caja en número de caracteres. Atributo maxlenght tamaño máximo del texto Atributo value valor inicial del campo Texto oculto Al escribir dentro del campo en lugar del texto se verán asteriscos. <input type = password name = clave > (Ejercicio 17) Texto largo (Caja de texto multilínea) Campo de texto donde se pueda escribir cómodamente sobre un espacio compuesto de varias líneas Atributo rows define el número de líneas Atributo cols define el numero de columnas Ejemplo: <texarea name = comentario rows = 10 cols = 40 > Escribe tu comentario... </textarea> Listas de opciones (Listas y listas desplegables) Listas desplegables que nos permiten elegir una o varias de las múltiples opciones que presentan Ejemplo: <select name = estacion > <option>primvera</option> <option>verano</option> <option>otoño</option> <option>invierno</option> </select> Atributos de <select> Atributo size numero de valores mostrados en la lista, el resto pueden ser vistos por la barra de desplazamiento lateral. Atributo múltiple permite la selección de varios elementos con las tecla ctrl o shift (no recomendable) Ejemplo: <select name = estacion size = 3 múltiple> El resultado se presenta como una lista no desplegable Atributos de <option> Atributo selected la opción que lo presenta está elegida por defecto Ejemplo: <option selected>otoño</option> Atributo value valor del elemento seleccionado, es el valor que será enviado al programa o correo electrónico si el usuario elige esa opción. Ejemplo : <option value = 1 >Primavera</option> Si el usuario elige Primavera lo que llegará al programa o correo será una variable llamada estacion con valor 1 estacion = 1

12 Botones de radio (Botones de opción) <input type = radio > Ejemplo: <input type = radio name = estacion value = 1 >Primavera <input type = radio name = estacion value = 2 >Verano Atributo value valor que recibe el elemento cuando este sea seleccionado por ejemplo, si el usuario elige Verano recibimos en nuestro correo estacion=2 Atributo checked preselecciona por defecto una de las opciones. Cajas de validación (Casilla de verificación) <input type = checkbox name = casado >Casado el tipo de información que llegará a nuestro correo o programa será : casado=on u off dependiendo de que se encuentre activada o no Atributo checked permite que la casilla se presente marcada por defecto. Atributo value pemite asociar un valor distinto de on al elemento cuando este sea seleccionado. Botón envío Finalizado el proceso de relleno del formulario y hacerlo llegar a su gestor, el navegante ha de validarlo por medio de un botón de envío. Indispensable en cualquier formulario <input type = submit value = Enviar Atributo value mensaje del botón Botón de borrado Permite borrar el formulario por completo en caso de que el usuario desee rehacerlo. <input type = reset value = Borrar > Datos ocultos <input type = hidden name = sitio value = Botones normales (Botones de pulsación) <input type = button value = Texto del botón > el uso mas frecuente es en la programación, utilizando lenguajes como VBScript o JavaScript podemos definir acciones a tomar cuando un visitante pulse un botón en una página web. (Ejercicio 18) FRAMES EN HTML Explicación básica Permiten partir la ventana del navegador en diferentes áreas, cada una independiente y codificadas con archivos HTML independientes. Creación de una estructura simple Etiquetas <FRAMESET> y <FRAME>

13 En la etiqueta <frameset> se define el tipo de división horizontal o vertical a través de los atributos rows o cols respectivamente, no se pueden utilizar ambos a la vez. El tamaño de las divisiones se especifica en dichos atributos en porcentaje, pixels o utilizando el comodín * que significa el resto del espacio. En la etiqueta <frame> se especifica el archivo que se visualizará a través de su atributo src. Ejemplo: <html> <head> <title>definición de frames</title> </head> <frameset rows= 100,*,12% > <frame src= pg1.htm > <frame src= pg2.htm > <frame src= pg3.htm > </frameset> </html> El resultado sería una estructura de 3 filas. Las páginas dentro de los marcos heredan el título de la definición de los frames. Dirigir los enlaces Para conseguir que un enlace se visualice en un frame distinto al frame que lo contiene hay que utilizar los siguientes atributos: Atributo name de la etiqueta <frame> para dar un nombre al marco destino del enlace. Atributo target de la etiqueta <a> para dirigir el enlace al marco que se le indique. El atributo target puede tomar otro tipo de valor: _blank ; hace que el enlace se abra en una ventana a parte. _self ; valor por defecto. _parent ; el enlace se actualiza sobre su padre o sobre la ventana que estamos si no hay un padre. _top ; la página se carga en pantalla completa, eliminando todos los frames. Ejemplo: Página principal <html> <head> <title>definición de frames</title> </head> <frameset rows= 100,*,12% > <frame src= pg1.htm > <frame src= pg2.htm name= principal > <frame src= pg3.htm > </frameset> </html> Página 3... <a href= pg4 target= principal >comentario... </a>

14 Anidar frames Se emplea para crear estructuras de frames horizontales y verticales conjuntas. Ejemplo: <html> <head> <title>definición de frames anidados</title> </head> <frameset cols= 20%,* > <frame src= pg0.htm > <frameset rows= 100,*,12% > <frame src= pg1.htm > <frame src= pg2.htm > <frame src= pg3.htm > </frameset> </frameset> </html> El resultado sería una estructura de 2 columnas y la segunda dividida en 3 filas (Ejercicio 19) Atributos avanzados Para la etiqueta <frameset> : Border = número de pixels Bordercolor = #rrggbb Frameborder = yes no 0 Framespacing = número de pixels Para la etiqueta <frame> : Marginwidth = número de pixels MarginHeight = número de pixels Scrolling = yes no auto Noresize ; no tiene valores, si está presente significa que el marco no se puede redimensionar. Frameborder = yes no 0 Bordercolor = #rrggbb MAPAS DE IMÁGINES Consiste en incorporar una serie de enlaces dentro de una misma imagen, definidos por figuras. Por ejemplo en portadas donde se da a conocer cada una de las secciones del sitio por medio de una imagen. Etiquetas map y area <map name= nombre mapa > <area alt= texto aclaratorio shape= figura coords= coordenadas href= enlace >... </map> <img src= archivo imagen usemap= #nombre mapa >

15 alt indica un texto que se mostrará cuando situemos el ratón en el área. shape indica el tipo de área. coords son las coordenadas que definen el área. Serán un grupo de valores numéricos distintos dependiendo del tipo de área (shape) que estemos definiendo. href indica el destino del enlace correspondiente al área. Las líneas geométricas que delimitan los enlaces, es decir, las áreas de los enlaces, han de ser definidas por medio de coordenadas. Cada imagen es definida por unas dimensiones de ancho (X) y alto (Y) y cada punto de la imagen puede ser definido por tanto diciendo a que altura (x) y anchura (y) nos encontramos. De este modo, la esquina superior izquierda corresponde a la posición 0,0 y la esquina inferior derecha corresponde a las coordenadas X,Y. Si deseamos saber qué coordenadas corresponden a un punto concreto de nuestra imagen, lo mejor es utilizar un programa de diseño grafico como Photoshop o Paint Shop Pro Tipos de áreas: shape distintas. Existen tres tipos de áreas distintas, suficientes para hacer casi cualquier tipo de figura. shape="rect" Crea un área rectangular. Para definirla se utilizan las coordenadas de los puntos de la esquina superior izquierda (X1,Y1) y la esquina inferior derecha (X2,Y2).El área tendría la siguiente etiqueta: <area shape="rect" coords="x1,y1,x2,y2" href="enlace"> shape="circle" Crea un área circular, que se indica con la coordenada del centro del círculo (X1,Y1) y el radio R. La etiqueta de un área circular tendría esta forma: <area shape="circle" coords="x1,y1,r" href="enlace"> shape="poly" Este tipo de área, poligonal, es la más compleja de todas. Un polígono queda definido indicando todos sus puntos, pero atención, los tenemos que indicar en orden, siguiendo el camino marcado por el perímetro del polígono. Suponiendo que los nombres que hemos dado a los puntos del polígono son (X1,Y1), (X2,Y2), (X3,Y3) y (X4,Y4), la etiqueta <area> quedaría de esta forma. <area shape="poly" coords=" X1,Y1, X2,Y2, X3,Y3, X4,Y4" href="enlace"> (Ejercicio 20) TEXTO EN MOVIMIENTO (MARQUESINAS) <MARQUEE> texto en movimiento </MARQUEE> texto La etiqueta marquee acepta los siguientes atributos: WIDTH=%, ancho por el que se desplaza el texto en la página HEIGHT=nºpixels, alto del texto en movimiento ALIGN=[TOP MIDDLE BOTTOM] alineación del texto en movimiento (marquesina) respecto al texto que viene a continuación BEHAVIOR=[SLIDE ALTERNATE SCROLL], para indicar el movimiento del texto: Slide, para que aparezca por un lado y, al llegar al otro se pare

16 Alternate, para aparezca por un lado y, al llegar al otro, cambie el sentido del movimiento Scroll, para que aparezca por un lado y, al llegar al otro lado, aparezca de nuevo por el contrario. Es el valor utilizado por defecto. BGCOLOR= #RRGGBB para indicar el color de fondo del texto DIRECTION=[RIGHT LEFT] para indicar el sentido del movimiento. Por defecto es LEFT, hacia la izquierda. SCROLLAMOUNT=nº pixels, para indicar el número de pixels en cada salto al producirse el movimiento del texto SCROLLDELAY=nº msg, para indicar el tiempo entre saltos en milisegundos. Cuanto menor sea este valor, mayor será la velocidad a la que se mueva el texto. LOOP=nº, para indicar el número de veces que aparecerá el texto. Por defecto, indefinido. HSPACE y VSPACE, para indicar la separación horizontal y vertical, respectivamente, del texto que está fuera de la marquesina respecto a esta. (Ejercicio 21)

17 EJERCICIOS 1. Crea tu primera página. El título debe ser Mi primera página y el contenido Hola mundo!. 2. Crea una página divida en dos secciones delimitadas por tres líneas horizontales, la línea del medio mostrarla un 50% del ancho de página, 5 pixels de altura, centrada y sin sombra, la última línea también mostrarla de 5 pixes para apreciar la sombra. - la primera sección servirá para mostrar los distintos tipos de alineación de párrafo como se pide a continuación 3 párrafos centrados 3 párrafos alineados a la derecha un salto de línea triple un párrafo alineado a la izquierda otro párrafo justificado. - En la segunda sección mostrar todos los encabezados posibles centrados 3. Crea una página que contemple lo siguiente: un titular de primer nivel en color azul y en cursiva Un segundo titular de color verde oliva centrado y subrayado El texto de la página deberá ser de tipo Comic Sans MS Al final del documento con una separación de 5 líneas aparecerá una firma con tipo de letra Arial y justificada a la derecha. 4. Crea un fondo para una página, con un color de fondo y de texto acorde con la imagen de fondo. Eliminar los márgenes. 5. Crea una página con las siguientes listas eligiendo el tipo que mejor se adapte: Lista de las últimas películas que he visto y una descripción. Itinerario para llegar al instituto. Países que conozco con las ciudades que he visitado. Algunos caracteres especiales 6. En el ejemplo anterior crea un índice al principio del documento con enlaces origen a las distintas listas del documento y al final de cada lista un enlace que apunte al índice. 7. Con todo lo visto hasta ahora crea una página con información de todos los ejercicios realizados y enlaces a cada uno de ellos que luego vuelvan a retornar a la página principal. 8. En el ejemplo anterior añade un enlace a una página remota que sea de tu interés. 9. En el ejemplo 7 añade un enlace a tu dirección de correo y comprueba su funcionamiento. 10. En el ejemplo 7 añade otro enlace que sirva para descargarte un archivo. 11. Diseñar una página que contenga varias imágenes de distintos tipos, varias veces repetida pero con distintos atributos: Presenta la primera imagen de tipo icono con su tamaño original y ampliada. Presenta la segunda imagen de tipo jpg reducida y con borde de 3 pixels Presenta una tercera imagen de tipo gif con su tamaño original, achatada y alargada. 12. Diseña una página con imágenes acompañadas de texto y distribúyelo de todas las formas posibles.

18 Presenta una imagen acompañada de texto en la parte izquierda de la misma, antes de que se complete todo el espacio izquierdo de la imagen con el texto, provoca un salto que posicione el texto por debajo de la imagen. Presenta una imgen de tipo ico varias veces repetidas acompañando a otra de mayor tamaño en la misma línea, distribuye las imágenes ico verticalente de todas las formas posible. 13. Añade efectos multimedia al ejemplo anterior: Añade un sonido de fondo a la página desde que se abra hasta que se cierre. Introduce un vídeo que se inicie cuando se pase el cursor sobre él. 14. Crea una tabla en una página de dos filas por tres columnas, con el siguiente texto en cada una de sus celdas: celda (1,1), celda (1,2),, celda(2,3). 15. Crea una tabla que contemple el mayor número de atributos, por ejemplo en el ejercicio anterior: Centra la tabla en la página y proporciona la celda (2,2) al 50% de la tabla. Define colores diferentes para el fondo de la tabla, una de sus filas y una de sus celdas, haz lo mismo con el color del borde. Define un tamaño de borde de tabla, entre celdas y entre el borde de la celda y contenido de 5 pixels. Incluye una imagen de tipo.ico como fondo en alguna de las celdas y la misma imagen como contenido de otra celda. En la celda (2,2) incluye una imagen jpg reducida a 200x200 pixels. Pon un título en la parte inferior de la tabla. centra el contenido de las celdas de la primera fila horizontalmente, alinea con la parte superior la celda (2,1) y con la parte inferior la celda (2,3). 16. Crea una tabla de dimensión 1x2 (una fila con dos celdas), incluye una segunda tabla en la segunda celda de dimensión 2x1(dos filas de una celda). Resuelve el mismo diseño con una sola tabla, expandiendo celdas. Crea otra tabla de 2x2 pero en la primera fila expande las dos celdas como si fuese una cabecera. 17. Crea un formulario con una caja de texto para escribir tu nombre y otra para introducir una clave. Envía el formulario a tu dirección de correo y comprueba la información que recibes. 18. Crea una página con un formulario de tipo cuestionario que incluya todos los tipos de elementos que hemos visto. 19. Crea una página dividida en frames que permita recorrer los ejemplos de este tema. 20. Crea una página con una imagen dividida en cuatro áreas rectangulares que apunten a diferentes enlaces. 21. Incluye en la página anterior un título de tipo marquesina, comprueba los efectos de aplicar los diferentes atributos.