PINs codificados. Tecnología de la Información. HTML. Escribir en el Bloc de Notas lo siguiente:

Transcripción

1 Escribir en el Bloc de Notas lo siguiente: <html> <head> <title> </title> </head> <body> </body> </html> Guardar este archivo como plantilla.htm. Este archivo tiene las etiquetas básicas de todo documento HTML. Por ello, siempre que queramos crear un nuevo documento, abriremos la plantilla y la guardaremos con el nombre que queramos (mediante la opción Guardar como del menú Archivo). Una vez hecho esto podemos abrir el archivo y transformarlo cuanto queramos desde el navegador. EJERCICIO Abrir el archivo plantilla.htm y guardarlo como pagina01.htm. Abrir este último archivo y desde el navegador utilizar la opción Ver código fuente del menú Edición para escribir en este archivo. Escribir entre las etiquetas <body>... </body> el siguiente texto: PINs codificados Cuando el banco me asigna un PIN, simultáneamente lo codifica convirtiéndolo en un PIN cifrado. Yo recibo mi PIN mientras que el banco guarda mi PIN cifrado en su ordenador. Un método de codificar el número muy sencillo (y que, desde luego, no es el que utiliza el banco) es el siguiente: supongamos que el banco me asigna como PIN el número El banco tiene un número clave que aplica a todos sus clientes y a la que solo tiene acceso el presidente y algún otro. Supongamos que este número clave es el El banco suma este número clave a mi PIN (sin llevar): = 6790 Una vez que el banco me ha informado de mi PIN, su ordenador automáticamente lo destruye. Por consiguiente, nadie en el banco conoce mi PIN. Solamente el PIN cifrado es guardado en el banco. Y solamente una persona que conozca la clave puede descubrir mi PIN restando ésta del PIN cifrado (de nuevo sin llevar). Cuando voy a un cajero automático e introduzco mi tarjeta y tecleo mi PIN, el ordenador del banco suma la clave y compara el resultado obtenido con el PIN cifrado que tiene guardado. Si ambos números son iguales el cajero me da el dinero. Guardar el documento y ver el resultado en el navegador pulsando Actualizar. Poner las etiquetas necesarias para la cabecera y para separar los párrafos del documento. Para la cabecera se puede poner la etiqueta <h2> y para separar los párrafos la etiqueta <p>. 1

2 Escribir el siguiente texto y guardarlo como pagina02.htm: SAN MIGUEL Se ven desde la barandas por el monte, monte, monte mulos y sombras de mulos cargados de girasoles. Sus ojos en las umbrías se empañan de inmensa noche. En los recodos del aire cruje la aurora salobre. Un cielo de mulos blancos cierra sus ojos de azogue dando a la quieta penumbra un final de corazones. Y el agua se pone fría para que nadie la toque. Agua loca y descubierta por el monte, monte, monte. Separar los versos con las etiquetas <br> y las estrofas con las etiquetas <p>. El margen adicional puede conseguirse con <blockquote>. 2

3 1. Recordemos lo visto hasta ahora: Los archivos se crean con el Bloc de Notas y se guardan con la extensión.htm El formato de la página se expresa mediante etiquetas, atributos y valores. Estas instrucciones tienen la forma: <nombre-etiqueta atributo = valor > Una vez abierto un archivo con el navegador, puede verse el código fuente en el Bloc de Notas abriéndolo desde el propio navegador. Puede modificarse, guardarse, cerrarse y ver la nueva versión de la página en el navegador mediante la herramienta actualizar. Todas las páginas deben tener las siguientes etiquetas <html>, <head> y <body> y las correspondientes etiquetas de cierre. El título de la página (que aparece en la barra de títulos del navegador) se indica con las etiquetas <title>... </title> dentro de la etiqueta <head>. Los cambios de línea se producen automáticamente al llegar la línea al extremo de la ventana del navegador, sea cual sea el tamaño de ésta. El salto de línea puede forzarse con la etiqueta <br>. 2. Cuando la página se divide en varias partes los encabezamientos de la diferentes partes se pueden crear con las etiquetas <h1>, <h2>, <h3>, <h4>, <h5> y <h6> con sus respectivas etiquetas de cierre. El mayor tamaño de letra lo produce <h1> y el menor <h6>. Las cabeceras aparecen siempre en negrita. 3. Para separar los párrafos de un texto se utiliza la etiqueta <p>. El cierre de esta etiqueta es opcional. La etiqueta <p> produce un salto de línea de mayor amplitud que <br>. 1. Crea una página con cabeceras con tu nombre de todos los tamaños. Guárdala como pagina03.htm 2. Escribe el siguiente texto: El lenguaje HTML se basa en el uso de etiquetas también llamadas marcas, directivas, comandos o tags. Estas etiquetas son fragmentos de texto delimitados por los símbolos <, >. Básicamente, estas etiquetas indican al navegador la forma de representar los elementos (texto, gráficos, etc) que contiene el documento. Aquí nos referiremos a estas órdenes con la palabra etiqueta. Existe normalmente una etiqueta de inicio <etiqueta> y una de final </etiqueta>, si bien algunos comandos solo disponen de la inicio, como es el caso del salto de línea <br>. En cualquier caso, todos los elementos situados entre etiquetas o a partir de la de inicio, serán afectados por éstas, ya se trate de texto o de más etiquetas. Las etiquetas mal escritas o desconocidas para un navegador son simplemente ignoradas. Sin embargo, los errores de sintaxis, como por ejemplo, olvidar delimitar una etiqueta, pueden provocar errores en la visualización del documento. Guardar este documento como pagina04.htm. Tener cuidado en separar bien los párrafos y ponerle una cabecera adecuada, por ejemplo El lenguaje HTML 3

4 1. Hasta ahora se han visto las siguientes etiquetas: Etiquetas básicas: <html>, <head>, <title> y <body>, así como sus correspondientes etiquetas de cierre. Etiqueta de cambio de línea <br> Etiqueta de cambio de párrafo <p> 2. Si se quiere que el texto aparezca centrado en la ventana del navegador puede encerrarse entre las etiquetas <center>... <center>. 3. La alineación del texto puede conseguirse poniendo en las etiquetas de párrafo o de cabecera el atributo align. Este atributo puede tomar los valores, right, left, center y en el caso de la etiqueta de párrafo también justify. 4. Puede cambiarse el tipo de letra encerrando el texto entre las siguientes etiquetas: Negrita: <b>... </b> Cursiva: <i>... </i> Subrayado: <u>... </u> Tachado: <strike>... </strike> Pequeña: <small>... </small> Grande: <big>... </big> Subíndice: <sub>... </sub> Superíndice: <sup>... </sup> Parpadeante: <blink>... </blink> (solo en Netscape) 1. Abrir la poesía que se escribió y se guardó como pagina02.htm. Añadirle una cabecera, encerrar todo el texto entre las etiquetas <center>... </center> y guardarlo como pagina05.htm. 2. Escribir el siguiente texto: Esto está en negrita Esto está en cursiva Esto está subrayado Esto está tachado Esto está en letra pequeña Esto está en letra grande Esto es un subíndice Esto es un superíndice Y poner cada frase en el tipo de letra correspondiente. Ponerle como cabecera Tipos de letra y guardarlo como pagina06.htm. 3. Modificar la página anterior añadiéndole un párrafo con la siguiente fórmula x 1 + x 2 = 4 2. Guardar con el mismo nombre. 4

5 1. El color del texto y del fondo de pantalla se controla con los siguientes atributos de la etiqueta <body>: <body text = x bgcolor = x > text establece el color del texto. Su valor debe expresarse en la forma #rrvvaa donde rr es la cantidad de rojo en hexadecimal, vv la cantidad de verde y aa la cantidad de azul. El color blanco es #FFFFFF y el negro # Los navegadores también entienden numerosos colores expresados mediante palabras inglesas. bgcolor permite poner un color de fondo de la página utilizando el mismo código. 2. Se puede insertar una línea horizontal mediante la etiqueta <hr> (sin etiqueta de cierre). Esta etiqueta puede tener los siguientes atributos: <hr size= x width= x align= x color= x noshade> El significado de estos atributos es el siguiente: size representa el grosor de la línea en pixels. width es la longitud de la línea. Puede expresarse en píxels o en porcentaje sobre la anchura de la pantalla. align controla la posición de la línea. Sus valores pueden ser left, center o right. noshade si se añade este atributo se elimina el efecto de sombra de la barra. color tiene el significado visto anteriormente El lenguaje JavaScript JavaScript es un lenguaje de programación creado por Netscape con el objetivo de integrarse en HTML y facilitar la creación de páginas interactivas. No hay que confundir Java con JavaScript. Java es un lenguaje completo que permite crear aplicaciones independientes, mientras que JavaScript es un lenguaje que funciona como extensión de HTML. Es un lenguaje de programación orientada a objetos, diseñado para el desarrollo de aplicaciones cliente-servidor a través de internet. El código de programa de JavaScript, llamado script se introduce directamente en el documento HTML y no necesita ser compilado, es el propio navegador el que se encarga de traducir dicho código. : 1. Escribir una página con este texto poniendo las etiquetas que sean necesarias. Guardarla como pagina07.htm. 2. Alinear el primer párrafo al centro, el segundo a la izquierda y el tercero a la derecha y ver el efecto. 3. Suprimir los atributos del ejercicio anterior. Encerrar el segundo párrafo entre las etiquetas <blockquote>, </blockquote> y observar lo que sucede. 4. Probar colores de texto y de fondo. Escoge el que más te guste. La lista de colores con nombre la puedes encontrar en internet. 5

6 El tamaño, el color y el tipo de letra de un bloque de texto, puede fijarse mediante las etiquetas <font>... <font>. Los atributos de esta etiqueta son los siguientes: <font size= x >: fija el tamaño de las letras. x puede ser 1, 2, 3, 4, 5, 6 o 7. El tamaño normal es el 3. <font color= x >: determina el color de las letras de la misma manera que se ha visto anteriormente para la etiqueta <body> <font face= x >: para establecer el tipo de letra. Se pueden apilar varios tipos de letra por si el ordenador no soporta alguno de ellos. En windows los tipos de letra son: letras sans-serif: geneva, arial, helvetica y verdana; letras serif: georgia, times new roman y times; letras mono: courier new y courier. Se puede establecer un tipo de letra por defecto para todo el documento por medio de la etiqueta <basefont>... </basefont>. La etiqueta de apertura se sitúa justo después de <body> y la etiqueta de cierre justo antes de </body>. Los atributos de <basefont> son los mismos que los de <font>. 1. Escribir el siguiente texto: Esto es letra de tamaño 1 Esto es letra de tamaño 2 Esto es letra de tamaño 3 Esto es letra de tamaño 4 Esto es letra de tamaño 5 Esto es letra de tamaño 6 Esto es letra de tamaño 7 Ponerle un título y una cabecera (por ejemplo Tamaños de letra) y guardar la página como pagina08.htm. Puedes ponerle también un color de texto y de fondo de pantalla mediante los atributos de la etiqueta <body>. 2. Haz lo mismo que en el apartado anterior pero para tipos de letra. Escribe una frase, por ejemplo Esta letra es del tipo... con varios tipos de letra y obsérvala en la pantalla del navegador. Ponle un título y una cabecera y guarda la página como pagina09.htm. Como antes, puedes ponerle también un color de texto y de fondo de pantalla mediante los atributos de la etiqueta <body>. 6

7 El esquema de una lista numerada es el siguiente: <ol> <li> <li> <li> </ol> La etiqueta <ol> admite el atributo <ol type= x >. Los valores de type pueden ser 1, a, A, I o i según se quiera que los items de la lista se representen por números, letras minúsculas, letras mayúsculas, números romanos en mayúsculas o números romanos en minúsculas. Las listas se pueden anidar, esto es, introducir una lista dentro de otra lista. En este caso el esquema sería: <ol> <li> < ol > < li > < li > < /ol > < li > < li > < /ol > Segunda lista En este caso, dentro del primer ítem de la lista principal se ha introducido una lista con dos ítems. Las listas no numeradas o listas de boliches son similares pero cada ítem en lugar de marcarse con un número o una letra se marca con un círculo negro, un círculo hueco o un cuadrado. En este caso la etiqueta es <ul> y los valores del atributo type pueden ser circle, disc o square. Escribir las siguientes listas, ponerle un título, una cabecera y un color de fondo y guardarlo como pagina10.htm: A) Capítulo I a) Apartado 1.1 b) Apartado 1.2 B) Capítulo II a) Apartado 2.1 b) Apartado 2.2 C) Capítulo III a) Apartado 3.1 b) Apartado 3.2 Introducción Breve repaso de HTML HTML y las Hojas de Estilo Introducción Navegadores Explorer Netscape Opera 7

8 Existe un tercer tipo de listas que se llaman listas de definición. Una lista de definición es como un diccionario. Cada ítem consta de un término a definir y de la definición del término. La lista empieza con la etiqueta <dl> y termina con </dl>. Los términos a definir se marcan con <dt> y las definiciones con <dd>. El cierre de estas dos últimas etiquetas es opcional. Escribir la siguiente lista de definición. Ponerle un título, una cabecera y un color de fondo y guardarla como pagina11.htm: Listas numeradas: Son listas en que cada término aparece precedido de un número o letra. Se consiguen con las etiquetas <ol> (ordered list), </ol> y <li> (list item). Cada ítem de la lista debe ir precedido de esta última etiqueta. Listas no numeradas: Aquí cada término está precedido por una viñeta o boliche que puede tomar tres formas, disco, cuadrado o círculo. Como en el caso anterior la lista debe indicarse con las etiquetas <ul> (unordered list) y </ul> y cada ítem se indica con <li>. Listas de definición: Tiene la finalidad de producir un efecto similar a un diccionario. Empieza y termina con las etiquetas <dl> (definition list)y </dl>. Los términos a definir se marcan con <dt> (definition term) y </dt> y sus definiciones con <dd> (definition description) y </dd>. 8

9 FORMATOS DE IMAGEN Los formatos de imagen más comunes son los siguientes: bmp Es el formato de imágenes standard de Windows. No se emplea en Internet ya que generan archivos de un peso descomunal, lo que hace inviable, en la práctica, su transmisión por la red. Incluso con las actuales líneas de banda ancha la transmisión es sensiblemente más lenta que la de los otros formatos de imagen. gif Este formato, desarrollado por la compañía Compuserve, es uno de los más extendidos en Internet. Una de sus características más notorias es que genera ficheros de muy poco peso. Para lograr esto, se basa en imágenes construidas con una paleta de sólo 256 colores. Esto dificulta grabar en este formato fotografías de alta calidad o imágenes con muchos degradados. En cambio es ideal para imágenes con colores planos, como logotipos comerciales, iconos, dibujos, esquemas, etc. Las imágenes gif no tienen por qué ser estáticas. Un gif animado es una de las formas más simples de animación. Se compone de una secuencia de diferentes imágenes gif, que se presentan en secuencia produciendo un efecto de animación. Existen varias aplicaciones para crear gifs animados. Una de las más populares es Ulead Gif Animator. jpeg Este formato está especialmente diseñado para crear imágenes usando la paleta de 24 bits (los famosos 16,7 millones de colores) lo que permite crear fotografías bien acabadas, con los tonos y degradados necesarios. Sin embargo, utiliza algoritmos de compresión que permiten generar ficheros de un peso razonablemente reducido. A cambio de ello, existe una pequeña pérdida de calidad. No obstante se trata de una pérdida ponderada y perfectamente aceptable. Las imágenes de este tipo se graban en archivos con la extensión.jpg (la más habitual) o con la extensión.jpeg. Este formato, a diferencia del anterior no admite animaciones. png Este formato está especialmente diseñado para su uso en Internet. Las letras png son el acrónimo de portable network graphics (gráficos portables para trabajo en red). Se caracteriza por lograr una gran calidad de imagen con un peso de ficheros razonable. Además, permite incorporar filtros y transparencias en distintos grados mediante canales especiales. (tomado de Domine HTML y DHTML de José López Quijado) Escribir una página que reproduzca el texto anterior. No hace falta que coincidan los cambios de línea. Para ello pueden utilizarse las listas de definición vistas anteriormente. Guardarla como pagina12.htm 9

10 Para colocar una imagen como fondo de la página se debe utilizar la etiqueta <body> con el atributo background. El valor de este atributo es el nombre del archivo de imagen con su extensión y su dirección relativa si se encuentra en otra carpeta: <body background = archivoimagen > Si el tamaño de la imagen es más pequeño que la ventana del navegador, la imagen se repetirá tantas veces como sea preciso para llenar la ventana. Por esta razón, no suele quedar bien una fotografía como fondo de la página que, dependiendo de la resolución de la pantalla, en un ordenador se vería repetida varias veces y quizá en otro se vería incompleta. En cambio es usual utilizar como fondo de pantalla texturas producidas con un programa de gráficos. El fondo de la página del Departamento de Matemáticas es una textura producida con Fireworks de Macromedia. Si se quiere que el fondo quede inmóvil con las barras de desplazamiento, es preciso añadir el atributo bgproperties = fixed en la misma etiqueta <body> Si se quiere colocar una imagen en la página se hace con la etiqueta: <img src = nombrefichero > Esta etiqueta no tiene cierre. El atributo src (source) hay que ponerlo obligatoriamente. Si el fichero de imagen no se encuentra en la misma carpeta que el archivo de la página, habrá de ponerse su dirección relativa. Para poner una imagen integrada en una línea de texto, la alineación vertical entre la línea y la imagen se determina con el atributo align: <img src = nombrefichero align = x > Los valores de este atributo pueden ser middle, absmiddle, center, bottom, absbottom, baseline, texttop y top. Crear una textura con el programa Paint que va a servir de fondo para el fichero pagina12.htm. Abrir el programa Paint y en el menú Imagen elegir Atributos y elegir un tamaño de 3 3 centímetros. Rellenarlo de color amarillo y pulverizarlo de azul claro con la herramienta Aerógrafo. Guardar esta imagen como textura01.bmp, textura01.jpg y textura01.gif. Comparar el tamaño de los tres ficheros. Utilizar textura01.gif como fondo para la página. Crear con Paint un cuadrado rojo de 5 píxels de lado. Guardarlo como cuadradorojo.gif y ponerlo al comienzo de cada término (bmp, gif, jpeg, png) con la alineación conveniente (o sea centrada). 10

11 La imagen puede situarse fuera del texto separándola con una etiqueta de párrafo que además permite alinearla a la izquierda, al centro a a la derecha. El esquema de una imagen situada entre sos párrafos sería: <p>párrafo 1 <p align = x ><img src= archivo > <p>párrafo 2 El tamaño de la imagen puede controlarse con los atributos width y height. Los valores de estos atributos son la anchura y altura de la imagen en píxels. Si sólo se pone uno de los dos atributos (esto es lo usual), el otro toma un valor tal que se mantenga la proporción de la imagen. Además puede ponerse un borde a la imagen con el atributo border. El valor de este atributo es la anchura del borde en píxels. Para situar una imagen rodeada de texto (imagen flotante), deben ponerse a la etiqueta de imagen los siguientes atributos: align que puede tomar los valores left o right según se quiera colocar la imagen a la izquierda o a la derecha. hspace: separación horizontal entre la imagen y el texto. Su valor es la distancia entre ambos en píxels. vspace: separación vertical entre la imagen y el texto. Por consiguiente, una imagen flotante necesita la etiqueta: <img src = archivo align = x hspace = x vspace = x > Los atributos hspace y vspace sirven también para separar varias imágenes dentro del mismo párrafo. Sin embargo, como se verá más adelante, en este caso es mejor utilizar tablas para situar las imágenes en la página. : Poner fotos de la reina Amidala entre los párrafos de la página anterior alineadas sucesivamente al centro, a la izquierda y a la derecha. Guardar este fichero como pagina13.htm. Situar las mismas imágenes como flotantes y guardarlo como pagina14.htm. Para encontrar fotos de la reina Amidala utilizar el buscador de imágenes de Google. Recordar que Amidala se llama también Padmé. 11

12 Los vínculos se crean con la etiqueta ancla que tiene la forma: <a href = valor >... </a> Como se ve, la dirección del vínculo se pone en la etiqueta con el atributo href = valor. El texto o la imagen del vínculo se sitúa entre la etiqueta de apertura y la de cierre. La vinculación puede ser absoluta, relativa, interna o de correo. La vinculación absoluta consiste en poner como valor del atributo href una dirección URL. Por ejemplo: < a href = >El país</a> es un vínculo a la página del periódico El País. Ya hemos visto que los colores del fondo, del texto se determinan mediante los atributos de la etiqueta <body>. También pueden ponerse colores a los vínculos. En suma, los atributos de esta etiqueta son: <body text = x >: establece el color del texto <body bgcolor = x >: color del fondo <body background = URL >: para poner una imagen como fondo. URL es la dirección del archivo gráfico que vamos a utilizar <body link = x >: color de los vínculos <body vlink = x >: color de los vínculos ya vistos <body alink = x >: color del vínculo activo En Internet Explorer pueden ponerse atributos para fijar los márgenes de la página: <body topmargin = x > <body bottommargin = x > <body leftmargin = x > <body rightmargin = x > En todos los casos, x es el tamaño del margen en píxels. Escribir una página y ponerle vínculos a las páginas de El País y El Mundo. Poner colores a los vínculos y poner márgenes a la página. Elegir un color de fondo, poner una cabecera y guardarlo como pagina15.htm. 12

13 La vinculación relativa se utiliza para vincular páginas que se encuentran en el mismo sitio web. Para ello se utiliza como referencia la página activa. Las reglas para los vínculos son las siguientes: 1. Si las páginas se encuentran en la misma carpeta basta con poner como valor del atributo href el nombre del archivo donde se encuentra la página. Por ejemplo <a href= pagina2.htm >. 2. Si el archivo que se quiere vincular se encuentra en otra carpeta se recorre el árbol de archivos desde el de la página actual al de la página que se quiere vincular. Si es preciso entrar en una carpeta se pone el nombre de la carpeta y si hay que salir de una carpeta se indica mediante dos puntos... Todos los nombres de archivos, carpetas y puntos se escriben separados por barras de cociente /. Por ejemplo <a href=../carpeta1/pagina2.htm >. Crear una carpeta que se llame vinculos. En ella habrá un archivo principal.htm y dos carpetas carpeta1 y carpeta2. Dentro de carpeta1 habrá un archivo pagina1.htm y dentro de carpeta2 habrá un archivo pagina2.htm y una carpeta carpeta22 con un archivo pagina3.htm. Por el momento, los archivos deben contener solamente las etiquetas básicas <head>, <body>, etc: 1. Hacer un esquema del árbol de archivos y carpetas. 2. Poner títulos y cabeceras a las páginas creadas. 3. Escribir en principal.htm vínculos al resto de los archivos. 4. Escribir en pagina1.htm vínculos al resto de los archivos. 5. Escribir en pagina2.htm vínculos al resto de los archivos. 6. Escribir en pagina3.htm vínculos al resto de los archivos. 13

14 Cuando una página es muy extensa, puede ser conveniente poner vínculos o otros puntos de la página. Estos vínculos se llaman internos y se consiguen de la siguiente forma: 1. Se pone una señal en el sitio que se quiere alcanzar con el vínculo. Esto se hace mediante la etiqueta: <a name = x > donde x es el nombre que ponemos a la señal. 2. Donde queramos poner el vínculo, escribiremos las etiquetas ancla y en el atributo href, pondremos como valor el nombre que le hemos dado a la señal precedido del símbolo #: <a href = #x >(texto o imagen del vínculo)</a> Otro tipo de vínculos son los de correo. Tienen la forma: <a href = mailto:juangomez@tontoline.es >Escribir a Juan Gómez</a> El efecto de esta etiqueta es que se abre el programa de correo predeterminado del navegador para escribir a la dirección señalada en el atributo href (en este caso juangomez@tontoline.es). Si la referencia del vínculo no es un archivo con la extensión.htm, se abre la ventana la ventana de descargas y el navegador nos pregunta si queremos descargar el archivo y en qué carpeta. Esto es habitual con archivos del tipo.exe (programas) o archivos comprimidos que normalmente tienen la extensión.zip o.rar. Llamaremos a éstos, vínculos de descarga. 1. Buscar vínculos absolutos, de correo o de descarga en la página del Departamento de Matemáticas. 2. Escribir una página con 50 líneas (por ejemplo escribe tu nombre 50 veces seguido de la etiqueta <br>). Llámala pagina16.htm. 3. Poner vínculos entre el comienzo, la línea 25 y el final. 14

15 Los mapas de imágenes son imágenes que tienen zonas activas que sirven como vínculos. La sintaxis es la siguiente: <map name = nombremapa > <area shape = x coords = x href = archivo1.htm > <area shape = x coords = x href = archivo2.htm >... </map> <img src = imagen.jpg usemap = #nombremapa > Pueden ponerse zonas activas circulares (shape = circle), rectangulares (shape = rect ) o poligonales (shape = polygon ). Las coordenadas están referidas a la esquina superior izquierda de la imagen y tienen la siguiente forma: <area shape = circle coords = cx,cy,r href = archivo1.htm > <area shape = rect coords = v1x,v1y,v2x,v2y href = archivo2.htm > (coordenadas del vértice superior izquierdo y vértice inferior derecho) <area shape = polygon coords = v1x,v1y,v2x,v2y,v3x,v3y,... href = archivo3.htm > (deben indicarse las coordenadas de los vértices del polígono) No es necesario poner juntos la definición del mapa y la etiqueta de imagen. Es un buen hábito poner el mapa al comienzo de la página y la imagen donde queramos que se sitúe. Con ayuda del Paint dibujar en la misma imagen un rectángulo, un círculo y un triángulo y utilizar estas figuras como vínculos a El Mundo, El País y La Razón. Guardar el documento como pagina16bis.htm. 15

16 Las tablas permiten dividir la pantalla en celdas ordenadas en filas y columnas. Las etiquetas que permiten crear una tabla son: 1. Tabla: <table>... </table> 2. Fila: <tr>... </tr> 3. Celda: <td>... </td> La etiqueta <table> puede tener los siguientes atributos: <table align = x >: alineación de la tabla en la pantalla. El valor puede ser left, center o right <table border = x >: x es la anchura de los bordes en píxels <table cellspacing = x >: x es la distancia entre las celdas en píxels <table cellpadding = x >: distancia entre los bordes y el texto o imagen dentro de la celda <table width = x >: anchura de la tabla. Se puede dar en píxels o en porcentaje sobre la anchura de la pantalla. En este último caso tiene la forma x % <table bgcolor = x >: color de la tabla 1. Escribir las etiquetas para una tabla con dos filas y tres columnas. Ponerle como título Ejercicio de tablas y como cabecera Tablas. Guardar como pagina17.htm. 2. Escribir en cada celda su posición, es decir, en la celda que se encuentra en la primera fila y tercera columna, escribir Primera fila Tercera columna 3. Poner a la tabla un tamaño del 80 % de la pantalla y un borde de 5 píxels. 4. Separar las celdas una distancia de 40 píxels. 5. Separar El texto del borde de la celda por una distancia de 50 píxels 6. Cambiar estas distancias y observar el efecto. 7. Poner colores de fondo a la página y a la tabla 16

17 A las etiquetas <tr> y <td> se les pueden poner los siguientes atributos: align = x : alineación horizontal del texto. Los valores pueden ser left, center o right. valign = x : alineación vertical del texto. Los valores pueden ser top, middle o bottom. bgcolor = x : color de la fila o de la celda. height = x : fija la altura de las celdas en píxels. Aparte de estos atributos, la etiqueta <td> puede tener los siguientes: width = x o width = x % : da la anchura de la celda en píxels o en porcentaje. colspan = x : extiende la celda sobre las que se encuentran a su derecha. Para el valor 2 la extiende sobre otra celda, para el valor 3 sobre dos celdas, etc. rowspan = x : lo mismo que el caso anterior pero la celda se extiende sobre las que se encuentran debajo. Construir una tabla que tenga la siguiente forma: fila1 columna234 fila2 columna4 fila1234 columna1 fila23 columna23 fila3 columna4 fila4 columna2 fila4 columna3 fila4 columna4 y guardarla como pagina 18.htm 17

18 Los marcos permiten dividir la página en varias partes, cada una de las cuales está definida en un archivo html. Hace falta asimismo un archivo que regule la división de la página en partes, esto es, en filas o columnas. El archivo principal se caracteriza porque no tiene etiqueta <body>. En su lugar tiene la etiqueta <frameset>... </frameset> y una etiqueta <frame> por cada uno de los marcos en que se divida la página: el esquema del archivo principal sería: <html> <head> <title>... </title> </head> <frameset> <frame> <frame> </frameset> </html> Los atributos de la etiqueta <frameset> son los siguientes: <frameset cols = x > donde x es la anchura de las columnas en píxels separados por comas. Se pueden poner asteriscos, por ejemplo, <frameset cols = 100, * > significa que se crean dos columnas, una de cien píxels de anchura y otra con el resto de la pantalla. <frameset rows = x > igual que el anterior para crear filas. <frameset border = x > donde x representa la anchura del borde que separa los marcos en píxels. Para la etiqueta <frame> se tienen los siguientes atributos: <frame src = x > donde x es la dirección del archivo que se va a cargar en el marco <frame marginheight = x marginwidth = x >, lo mismo para fijar el tamaño de los márgenes en cada marco <frame name = x > para poner un nombre a cada marco y poder indicar en los vínculos donde debe cargarse la página <frame noresize> para impedir cambiar la anchura del marco con el ratón. Crear 4 archivos con extensión htm. El primero se deberá llamar menu.htm. Los otros tres se llamarán pagina1.htm, pagina2.htm y pagina3.htm. Cada página debe llevar el título y una cabecera con su nombre. Guardarlos en una carpeta que se llame marcos Escribir un archivo index.htm para crear dos marcos en columnas. Los dos marcos se llamarán izquierdo y derecho. En el marco izquierdo se cargará el archivo menu.htm y en el marco derecho pagina1.htm. Escribir en menu.htm vínculos a las otras tres páginas que deberán cargarse en el marco derecho. Para ello deberá utilizarse el atributo target en la etiqueta <a> Configurar bordes y márgenes. 18