Tema 1. Introducción a HTML

Transcripción

1

2 Tema 1 Introducción a HTML A lo largo de este tema vamos a conocer los conceptos básicos sobre HTML, y cómo se utiliza para crear páginas web. 1.1 Concepto de HTML El HTML, son las sigla Hyper Text Markup Language (Lenguaje de Marcas de Hipertexto), se trata de un lenguaje para estructurar documentos a partir de texto en World Wide Web, Es por lo cual es considerado un lenguaje de hipertexto, es decir, un lenguaje que permite escribir texto de forma estructurada, y que está compuesto por etiquetas, que marcan el inicio y el fin de cada elemento del documento. World Wide Web es la red mundial formada por todos los documentos (llamados "páginas Web") conectados entre sí por hipervínculos. La Web es un amplio archivo dinámico compuesto de una gran variedad de sitios Web y que permite el acceso a páginas Web que contienen texto formateado, imágenes, sonidos, videos, etc. Un documento hipertexto es algo que contiene datos y posiblemente, enlace a otros documento, esto documento pueden contener una gran cantidad de datos, imágenes, sonido, vídeos, etc., por lo que se considera como un documento multimedia o hipermedia. Para que los documentos HTML puedan ser interpretados por los navegadores deben tener la extensión html o htm. Los navegadores se encargan de interpretar el código HTML de los documentos, y de mostrar a los usuarios las páginas web resultantes del código interpretado. En otras palabras los navegadores permiten vizualizar las páginas web. 1.2 Versiones de HTML HTML 2.0 este estandar fue aprobado para noviembre de El objetivo de este estandar fue de caracter divulgativos, orientado más a la actividad académica, en el cual era más importante el contenido de las páginas que el diseño. Esta versión del HTML carecía de muchas herramientas que permitieran controlar el diseño de las páginas y añadir contenido multimedia. HTML 3.0 fue propuesto por el recién formado W3C (W3C comité encargado de establecer los estandares dentro de Internet) en marzo de Con él se introdujeron muchas nuevas capacidades, tales como facilidades para crear tablas, hacer que el texto fluyese alrededor de las figuras y mostrar elementos matemáticos complejos. Aunque se diseñó para ser compatible con HTML 2.0, era demasiado complejo para ser implementado con la tecnología de la época y, cuando el borrador del estándar expiró en septiembre de 1995, se abandonó debido a la carencia de apoyos de los fabricantes de navegadores web.

3 El HTML 3.1 nunca llegó a ser propuesto oficialmente, y el estándar siguiente fue el HTML 3.2, que abandonaba la mayoría de las nuevas características del HTML 3.0 y, a cambio, adoptaba muchos elementos desarrollados inicialmente por los navegadores web Netscape y Mosaic. HTML 3.2 aprobado en enero de Este nuevo estándar abandonaba la mayoria de las nuevas caracteristicas del HTML 3.0 y a cambio incluía las mejoras proporcionadas por los navegadores Internet Explorer, Mosaic y Netscape Navigator, que ya habían realizado estensiones sobre el estándar HTML 2.0. La posibilidad de trabajar con fórmulas matemáticas que se había propuesto en el HTML 3.0 pasó a quedar integrada en un estándar distinto llamado MathML. El 18 diciembre de 1997 se aprobó el estándar HTML 4.0, creado para estandarizar los marcos (frames), las hojas de estilo y los scripts. Este estandar adoptó muchos de los elementos especificos desarrollado inicialmente para un navegador web concreto pero al mismo tiempo comenzó a limpiar el HTML señalando algunos de ellos como no aprobado. En septiembre de 2001 se aprobó el estándar HTML 4.01, Este es una revision del HTML 4.0 que corrige los errores y haces cambios sucecuentes a la primera version del HTML Los Navegadores. Un navegador web (del inglés, web browser) es una aplicación software que permite al usuario recuperar y visualizar documentos de hipertexto, comúnmente descritos en HTML, desde servidores web de todo el mundo a través de Internet. Cualquier navegador actual permite mostrar o ejecutar gráficos, vídeo, sonido, animaciones y programas además del texto y los hipervínculos o enlaces. Los navegadores tienen ser compatible con las últimas versiones de HTML para poder interpretar el mayor número posible de etiquetas. Si esto no reconocen algunas etiques, esta es ignorada y el efecto que se pretendia alcanzar no se reflejará en la pagina web. Es necesario realizar extensiones de los navegadores para que puedan ser compatibles con esta última versión. Internet Explorer y Netscape Navigator continuamente están realizando extensiones, intentando incluir las nuevas funciones incluidas en los borradores. Para realizar las extensiones de estos navegadores se añaden nuevos atributos a las etiquetas ya existentes, o se añaden nuevas etiquetas. Como resultado a estas extensiones, habrán páginas cuyo código podrá ser interpretado completamente por todos los navegadores, mientras que otras, al incluir nuevos atributos o etiquetas del borrador de la última versión de HTML, solo podrán ser interpretadas en su totalidad en los navegadores más actualizados. En este último caso también puede ocurrir que alguna etiqueta de la página solamente pueda ser interpretada por un navegador concreto, y otra etiqueta por un navegador diferente al anterior, por lo que nunca sería visualizada en su totalidad por ningún navegador.

4 El mayor de los retos de los diseñadores de páginas web es hacer las páginas más atractivas utilizando toda la potencia del lenguaje HTML pero teniendo en cuentas estos problemas de compatibilidades para que el mayor número de internautas vean sus páginas tal como las ha diseñado. 1.4 Editores Un editor es una aplicación diseñada con el fin de facilitar la creación de documentos. Su complejidad puede variar desde la de un simple editor de texto plano, entornos WYSIWYG, hasta editores WYSIWYM. Existe un gran número de editores que permiten crear páginas web sin tener que escribir código HTML. Estos editores disponen de un entorno visual, y generan automáticamente el código de las páginas. Al poder ver en todo momento cómo quedará la página en el navegador, se facilita la creación de las páginas, y el uso de menús permite ganar rapidez. Los editores visuales pueden generar código basura, es decir, código que no sirve para nada, en otras ocasiones puede ser más efectivo corregir directamente el código por lo que resulta necesario saber HTML para poder depurar el código de nuestras páginas. Algunos de los editores visuales con los que podrás crear tus páginas web son KompoZer (antes llamado NVU), Mozilla Composer, Dreamweaver, Amaya, Frontpage, Adobe Pagemill, NetObjects Fusion, CutePage, HotDog Proffesional, Netscape Componer, Arachnophilia, entres otros, algunos tienen la ventaja de ser gratuitos. Es recomendable comenzar utilizando una herramienta lo más sencilla posible, Esto permite familiarizarse con el lenguaje, para poder utilizar algún editor visual posteriormente, y depurar el código cuando fuera necesario. Para crear páginas web escribiendo el código HTML puedes utilizar la herramienta Wordpad o Notepac que proporciona Windows o Kate GNU/Linux. Para crear nuestras páginas a través del código HTML vamos a trabajar con el Notepad o Bloc de notas ya que se trata de un editor de textos muy sencillo de manejar. 1.5 Etiquetas Las etiquetas o marcas delimitan cada uno de los elementos que componen un documento HTML. Existe normalmente una etiqueta de inicio y otra de fin, la de fin contendrá el mismo texto que la de inicio añadiéndole al principio una barra inclinada /. El efecto que define la etiqueta tendrá validez para todo lo que este incluido entre las etiquetas de inicio y fin, ya sea texto plano o otras etiquetas HTML. <ETIQUETA>Elementos Afectados por la Etiqueta</ETIQUETA> La etiqueta de comienzo está delimitada por los caracteres < y >. Está compuesta por el identificador o nombre de la etiqueta, y puede contener una serie de atributos opcionales que permiten añadir ciertas propiedades. Su sintaxis es: <identificador atributo1 atributo2...>

5 Los atributos de la etiqueta de comienzo siguen una sintaxis predefinida y pueden tomar cualquier valor propio del usuario, o valores HTML predefinidos. La etiqueta de final está delimitada por los caracteres </ y >. Está compuesta por el identificador o nombre de la etiqueta, y no contiene atributos. Su sintaxis es: </identificador> Cada elementos de la página se encontrará entre una etiqueta de comienzo y su correspondiente etiqueta de cierre, a excepto algunos elementos que no necesitan etiqueta de cierre. Es posible anidar etique, es decir, insertar etiquetas entre otras etiquetas de comienzo y de cierre. Ejemplo de una etiqueta anidada <font..> anidada dentro de la etiqueta <p..>.: <p align= center ><font color= # size= 4 face= Comic Sans MS, Arial, MS Sans Serif >Mi primera pagina web</font></p> Este código se mostrare como el texto siguiente en el navegador: Es importante anidar bien las etiquetas, las etiquetas no se pueden cruzar, en nuestro ejemplo hemos empezado por la etiqueta <p..>, antes de cerrar esta etiqueta hemos puesto la <font..> por lo que antes de cerrar la etiqueta <p..> debemos cerrar la etiqueta etiqueta <font..>. Para comenzar a practicar e ir tomando una idea de cómo crear una página html a través del Bloc de notas, vamos a crear una página web sencilla, con una línea de texto. 1.6 Ejercicio Mi primera página web 1- Abrir el bloc de Nota Procedimiento: Inicio, Programas, Accesorios, opción Bloc de notas. En el documento en blanco que se muestra al abrir el bloc de nota escribe el texto siguiente: <html> <head> <title>mi PRIMERA PAGINA WEB</title> <body bgcolor= #FFCC99 > <font color= #CC3301 size= 6 >Hola, Amigos estoy practicando HTML.</font>

6 </body> </html> Guarda el documento con la extensión htm, con el nombre practica1.htm. Para guardarlo pulsar Archivo, opción Guardar. Pulsando dos veces sobre el icono del archivo miprimpag.htm, éste debería abrirse automáticamente en el navegador que tengas instalado en tu ordenador. El navegador deberá mostrar una página como la de la derecha. Como puedes ver, la página resultante es una página que solamente tiene una línea de texto. Si observas la barra de título del navegador, verás que el título de la página es MI PRIMERA PAGINA WEB. La linea <title>mi PRIMERA PAGINA WEB</title>. Especifica que este será el titulo de nuestra página. La línea <body bgcolor= #FFCC99 >. Define el color de fondo. El texto Hola, amigos estoy practicando html. se ha insertado a través de línea <font color= #CC3301 size= 6 > Hola, amigos estoy practicando html.</font>.

7 Tema 2 Estructura de una página La estructura básica de una página web es la siguiente: <html> <head> <Title>Título de la página</title> </head> <body> Aquí van todas las etiquetas o instrucciones del documento </body> </html> A continuación explicaremos como funcionan estas etiquetas. <HTML> Identifica el tipo de documento. Siempre que escribimos una página en HTML tienen que tener la extensión html o htm. Todo pagina web debe tener las etiquetas <html> y </html>. Entre esta dos etiquetas <html> y </html> estará comprendido el resto del código HTML de la página. Ejemplo: <html>... </html>

8 2.1 Cabecera de la página <HEAD> Un documento HTML se divide en dos partes fundamentales: el encabezamiento o cabecera y el cuerpo del documento. La Cabecera, head es la primera de las dos partes en que se estructura un documento HTML. Esta se utiliza para agrupar información sobre ella, como puede ser el título. Está compuesta por las etiquetas <head> y </head>. La etiqueta <head> va debajo de la etiqueta <html>. Por ejemplo: <html> <head>... </head>... </html> Entre las etiquetas <head> y </head>, las etiquetas que podemos encontrar y más se utilizan son: <link>, <style>, <script>, <meta> y la etiqueta <title> que te explicamos a continuación. 2.2 Título de página <TITLE> El elemento <TITLE></TITLE> es el más utilizado dentro de la marca <HEAD>, dado que sirve para dar título a la página. El título suele ser visualizado por los navegadores en la cabecera de página. Para asignar un título a una página se debe escribir el texto que queremos que se muestre entre las etiquetas <title> y </title>. Estas etiquetas deben de estar dentro de la cabecera, es decir, entre las etiquetas <head> y </head>. Por ejemplo: <html> <head> <title> Curso de HTML </title> </head>... </html>

9 2.3 La etiqueta <META> Son instrucciones HTML que son utilizadas para la indexación de nuestros sitios Webs en los buscadores y robots de búsqueda (boots) en internet. Los buscadores utilizan la información de la etiqueta <meta> de las páginas, buscando coincidencias con lo que el usuario pretende encontrar. Si queremos que nuestra página web sea visitada con la ayuda de buscadores. Las etiquetas <meta> nos revelan información tales como, su ubicación, título, lugar de origen, idioma, etc. Debemos tener claro que las Meta Tags, son palabras clave que no varía el diseño de nuestra web, La misión de estas, es dar información sobre la descripción y las palabras clave de un sitio Web, estos datos serán requeridos por la mayoría de los motores de búsqueda. Esta etiqueta nos permiten especificar los atributos name y content. El atributo name indica el tipo de información, y el atributo content indica el valor de dicha información. El tipo de información podemos indicarlo utilizando cualquier palabra que deseemos, por ejemplo Autor, Palabras clave, Descripción, etc. Debido a que la mayoría de buscadores están en inglés, es recomendable que el tipo de información se especifique tanto en inglés, como en español. Los tipos de información más utilizados son los siguientes: Tipo Author Classification Description Generator Keywords Significado Autor de la página Palabras que clasifican la página en los buscadores Descripción del contenido de la página Programa utilizado para crear la página Palabras clave La etiqueta <meta> no necesita etiqueta de cierre. Para cada etiqueta <meta> solo es posible indicar un tipo de información y su valor, pero es posible insertar varias etiquetas <meta> en un mismo documento. La etiqueta <meta> deben de ir en la cabecera de una pagiana HTML, es decir, entre las etiquetas <head> y </head>. En el ejemplo a continuación, el código indica que el autor de la página es cursohtml, que la descripción de la página es sobre un curso de HTML, y especifica las palabras clave que los buscadores consultaran: <html> <head>...

10 <meta name= author content= Curso HTML > <meta name= description content= El Mejor Curso de HTML > <meta name= keywords content= código HTML etiqueta página web curso > </head>... La etiqueta <meta> también nos permite indicarle navegador alguna información o alguna acción que debe realizar. Para esto debemos utilizar el atributo http-equiv, en lugar del atributo name. Imaginemos que por alguna razón queremos que nuestra página se actualice automáticamente cada 25 segundos. Para lograrlo deberíamos utilizar la acción Refrescar o actualizar. Pero si utilizamos el siguiente código la pagina se actualizará automáticamente: <html> <head>... <meta http-equiv= Refresh content= 30 > </head>... Otro ejemplo puede ser, supongamos que hemos cambiado la dirección en la que se encuentra nuestra página web, y queremos que cuando alguien visite la página con la dirección antigua, a los 5 segundos el navegador lo redirija automáticamente a la nueva dirección. Con el siguiente código en la página que se encuentra en la dirección antigua podemos hacer esto: <html> <head>... <meta http-equiv= Refresh content= 5; URL= > </head> Cuerpo del documento <BODY> El cuerpo del documento HTML estará delimitado por las etiquetas <BODY> y </BODY> y en el se incluirán todas las instrucciones HTML y el texto que forman el documento, es decir lo que queremos que se visualice, el texto de la página, las imágenes, los formularios, etc. Las etique <body> y </body>, que van debajo de la cabecera. Es decir de bajo de <HEAD> Por ejemplo: <html> <head> <title>

11 Curso de HTML </title> </head> <body>... </body> </html> La etiqueta <body> nos permite establecer el color o la imagen de fondo de la página. El atributo bgcolor nos permite establecerse el color de fondo, a este atributo es posible asignarle un color representado en hexadecimal o por un nombre predefinido. Si queremos que el color de fondo de una página sea de color amarillo, escribiremos el siguiente codigo:... <body bgcolor= #FFFF33 >... </body> </html> O lo que es igual a poner:... <body bgcolor= yellow >... </body> </html> A través del atributo background, podemos establecer la imagen de fondo, indicando la ruta en la que se encuentra la imagen. Para hacer que la imagen de fondo de una página sea la imagen image.gif, que se encuentra en el mismo directorio en el que se encuentra guardada la página, tendremos que escribir:... <body background= image.gif >... </body> </html>

12 Si la imagen no se encuentre en el mismo directorio que la página, y se encuentre dentro de la carpeta Documentos, que sí se encuentra en el mismo directorio que la página, tendremos que escribir:... <body background= Documentos/image.gif >... </body> </html> La etiqueta <body> también nos permite establecer el color del texto de la página usando el atributo text. Para establece el color del texto de una página al colo azul, escribiremos el siguiente codigo:... <body text= #3300FF >... </body> </html> Los atributos leftmargin (margen izquierdo) y topmargin (margen superior): a traves de estos dos atributos podemos modificar el margen que existe entre el borde de la venta y el contenido de la ventana, cuyo tamaño en píxeles puede modificarse mediante estos atributos. Con el navegador Netscape debemos usar el atributos marginwidth (anchura del margen) y marginheight (altura del margen). Estos atributos deben tener un valer cero para eliminar los margenes. Podemos hacer que una página no tenga margen superior, y tenga un margen izquierdo de 15 píxeles, para hacer esto escribiremos el siguiente codigo:... <body leftmargin= 15 topmargin= 0 marginwidth= 15 marginheight= 0 >... </body> </html>

13 2.6 Colores en hexadecimal La representación de los colores HTML se hace mediante numeros hexadecimales. Los números hexadecimales se diferencian de un número decimal en que toman 16 valores distintos, al contrario de los decimales que van del 0 al 9, los hexadecimales, van del 0 al 9, y de la A a la F. Cada color estará representado por un grupo de seis dígitos en hexadecimal, precedidos por una almohadilla, por ejemplo #FFFFFF. Existen 216 colores seguros para web. Éstos son los colores que se muestran de la misma forma en Microsoft Internet Explorer y en Netscape Navigator, tanto en Windows como en Macintosh. Podemos personalizar nuestros propios colores, modificando los valores de cada uno de los dígitos que forman parte del número hexadecimal. A continuación se muestran los 216 colores seguros para web. # # # # #0000CC #0000FF # # # # #0033CC #0033FF # # # # #0066CC #0066FF # # # # #0099CC #0099FF #00CC00 #00CC33 #00CC66 #00CC99 #00CCCC #00CCFF #00FF00 #00FF33 #00FF66 #00FF99 #00FFCC #00FFFF # # # # #3300CC #3300FF # # # # #3333CC #3333FF # # # # #3366CC #3366FF # # # # #3399CC #3399FF #33CC00 #33CC33 #33CC66 #33CC99 #33CCCC #33CCFF #33FF00 #33FF33 #33FF66 #33FF99 #33FFCC #33FFFF # # # # #6600CC #6600FF # # # # #6633CC #6633FF # # # # #6666CC #6666FF # # # # #6699CC #6699FF #66CC00 #66CC33 #66CC66 #66CC99 #66CCCC #66CCFF #66FF00 #66FF33 #66FF66 #66FF99 #66FFCC #66FFFF # # # # #9900CC #9900FF # # # # #9933CC #9933FF # # # # #9966CC #9966FF # # # # #9999CC #9999FF #99CC00 #99CC33 #99CC66 #99CC99 #99CCCC #99CCFF #99FF00 #99FF33 #99FF66 #99FF99 #99FFCC #99FFFF #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

14 #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 Otra forma de representar algunos colores, sin utilizar números hexadecimal, es usando el nombre de cada color. La tabla siguiente muestros los colores que podemos representar por su nombre: Color Hexadecimal Nombre #FFFFFF white # black # navy #0000FF blue # green # teal #00FF00 lime #00FFFF aqua # maroon # purple # olive # gray #C0C0C0 silver #FF0000 red #FF00FF fuchsia #FFFF00 yellow

15 2.6 Practica 1 Como crear una página web básica Si es la primera vez que realizas el ejercicio, haz clic aquí para descargarte la carpeta de ejercicios, deberás extraer los archivos en la carpeta Mis documentos de tu disco duro, ahí se creará una carpeta ejercicios_html. A lo largo del curso vamos a crear tres sitios web, cada sitio lo guardaremos en una carpeta dentro de ejercicios_html. En esa carpeta tenemos: La carpeta animales, donde guardaremos los archivos de un sitio web de una asociación ficticia de veterinarios que iremos creando a lo largo de los ejercicios paso a paso. La carpeta deportes, donde guardaremos los archivos de un sitio web de una cadena de centros deportivos que iremos creando a lo largo de los ejercicios propuestos. La carpeta flores, donde guardaremos los archivos de un sitio web de una floristería que iremos creando a lo largo de los ejercicios propuestos. Cada carpeta contiene a su vez una carpeta imagenes y una carpeta varios donde iremos guardando las imágenes y ficheros varios respectivamente. Una vez tenemos nuestros sitios organizados, podemos empezar a practicar. 1 Si no tienes abierto el Bloc de notas, ábrelo para realizar el primer ejercicio. 2 Escribe el código que aparece a continuación: <html> <head> <title>inicio</title> </head> <body bgcolor= #99CC99 > </body> </html> Con este código estarás creando un documento con el título Inicio, y con el color de fondo verde (#99CC99). 3 Haz clic sobre el menú Archivo. 4 Haz clic sobre la opción Guardar como. Se abrirá el cuadro de diálogo Guardar como. 5 En el recuadro Tipo: elige Todos los archivos. 6 Guarda el documento con el nombre inicio.htm, dentro de la carpeta Mis documentos/ejercicios_html/animales de tu disco duro.

16 7 Abre el documento que acabas de crear en un navegador. Fíjate en el color de fondo de la página y en la barra de título. Practica. Estructura de una página Si no tienes abierto el Bloc de notas, ábrelo para realizar los ejercicios planteados a continuación. Deportes. 1 Abrir el documento quienes.htm, de la carpeta originales/deportes del curso. 2 Guardar la página con el mismo nombre en tu directorio de ejercicios Mis documentos/ejercicios_html/deportes 3 Establecer #0099CC como color de fondo y 40 como tamaño de los márgenes. 4 Guardar los cambios y comprobar el funcionamiento con tu navegador, no te preocupes por el formato del texto, lo arreglarás en el tema siguiente. Practica II: Flores. 1 Copiar la imagen fondo.gif que encontrarás en la carpeta originales/flores/imagenes a tu carpeta Mis documentos/ejercicios_html/flores/imagenes 2 Copiar el documento inicio.htm, de la carpeta originales/flores a tu carpeta Mis documentos/ejercicios_html/flores. 3 Abrir el documento Mis documentos/ejercicios_html/flores/inicio.htm con el Bloc de notas. 4 Establecer como imagen de fondo la imagen fondo.gif de la carpeta ejercicios_html/flores/imagenes. 5 Guardar los cambios y comprobar el funcionamiento en tu navegador.

17 Capitulo 3. Trabajando con texto A lo largo de este tema vamos a aprender a cambiar las propiedades del texto, así como a insertar caracteres especiales o separadores. Caracteres especiales y espacios en blanco Los caracteres < y > son dos caracteres especiales que indican inicio y fin de etiqueta. Si se desea insertar estos caracteres como texto hay que escribir el nombre que los representa: < Se representa con < > Se representa con > Existen otra serie de caracteres que no se visualizan correctamente en algunos navegadores, como es el caso de la ñ y las letras acentuadas, por lo que al igual que ocurre con los caracteres especiales < y >, para insertarlos como texto habría que escribir el nombre que los representa. A continuación se muestra una lista con algunos caracteres y el nombre con el que han de ser representados: Carácter Representación < < > > á á Á é É í Í ó Ó ú Ú ñ Ñ Á é É í Í ó Ó ú Ú ñ Ñ  Carácter Representación ç ç Ç Ç ü ü Ü Ü & & " º º ª ª Siempre que se inserta texto en HTML hay que tener en cuenta que si se escriben varios espacios en blanco seguidos sólamente se mostrará uno en el navegador. Para conseguir que se muestren varios espacios en blanco seguidos puede sustituirse cada uno de ellos por.

18 Por ejemplo, para insertar el texto: Bienvenidos, esta es mi 1ª página! Habría que escribir: Bienvenidos, esta es mi 1ª página! 3.1 Comentarios En ocasiones podemos desear añadir comentarios aclaratorios dentro del código, de manera que no sean visualizados en el navegador, pero sí a la hora de editar el documento. Para insertar comentarios dentro del código, basta con insertar el texto entre  Bienvenidos, esta es mi 1ª página! 3.2 Saltos de línea <br> En general, cuando trabajamos con un editor de texto se produce un salto de línea al pulsar la tecla INTRO. Si pulsamos INTRO en un documento HTML, el salto de línea se producirá en el código, pero no se mostrará en el navegador. Para que se produzca el salto de línea en el navegador, en lugar de pulsar la tecla INTRO hay que insertar la etiqueta <br> donde se desee que se produzca el salto. La etiqueta <br> no precisa ninguna etiqueta de cierre. No hay que insertar la etiqueta </br> después de ella, ya que dicha etiqueta no existe. Por ejemplo, para insertar el texto: Queridos usuarios, tengo el placer de comunicaros que hay una nueva sección. Habría que escribir: Queridos usuarios,<br>tengo el placer de comunicaros que hay una nueva secci&oacuten.

19 3.3 Texto preformateado <pre> Una forma de asegurarnos de que el texto aparezca en el navegador tal cual ha sido insertado dentro del código, es utilizando las etiquetas <pre> y </pre>. Utilizando estas etiquetas podemos tener la seguridad de que en el navegador se mostrarán todos los espacios en blanco que se inserten en el texto, así como todos los saltos de línea resultantes de pulsar la tecla INTRO, sin la necesidad de utilizar la etiqueta <br>. Por ejemplo, para insertar el texto: Hola, BIENVENIDOS esta ES MI PÁGINA WEB y esto un texto preformateado Habría que escribir: <pre>hola, BIENVENIDOS esta ES MI PÁGINA WEB y esto un texto preformateado</pre> El inconveniente de esta etiqueta es que entre las etiquetas <pre> y </pre> no se pueden incluir las etiquetas <img> (para incluir imágenes), <object> (para incluir objetos como animaciones), <big>, <small>, <sub> ni <sup> (las veremos en este tema). 3.4 Separadores <hr> El elemento que suele utilizarse para separar secciones dentro de una misma página es la regla horizontal. Para insertar una regla horizontal hay que insertar la etiqueta <hr>. Dicha etiqueta no precisa ninguna etiqueta de cierre. Es posible especificar algunos atributos de la regla horizontal: Atributo Significado Posibles valores align width alineación de la regla dentro de la página ancho de la regla left (izquierda) right (derecha) center (centro) un número, acompañado de % cuando se desee que sea en porcentaje size alto de la regla un número eliminar el sombreado de noshade no puede tomar valores la regla Por ejemplo, para insertar el texto y la regla horizontal siguientes:

20 Inicio Bienvenidos a mi página. Habría que escribir: Inicio<hr align= left width= 300% size= 5 noshade>bienvenidos a mi página. Sangrado de texto <blockquote> La sangría es una especie de margen que se establece a ambos lados del texto. Para que un texto aparezca sangrado, se inserta entre las etiquetas <blockquote> y </blockquote>. Esta etiqueta en un principio se definió para delimitar citas pero que como la mayoría de los navegadores resuelven la cita incluyendo un sangrado del texto, su uso para sangrar texto se ha generalizado. El uso de la etiqueta <blockquote> obliga a que el texto aparezca en una nueva línea. Insertando el texto entre varias etiquetas <blockquote> y </blockquote> se consigue que los márgenes sean mayores. Por ejemplo, para insertar el texto: Queridos usuarios, tengo el placer de comunicaros que hay una nueva sección. Habría que escribir: Queridos usuarios, <blockquote> <blockquote> tengo el placer de comunicaros que hay una nueva secci&oacuten. </blockquote> </blockquote> 3.5 Formatear el texto <font> Las propiedades del texto pueden modificarse a través de la etiqueta <font>. Para ello, podemos insertar el texto entre las etiquetas <font> y </font>, especificando algunos de los atributos de la etiqueta: Atributo Significado Posibles valores face fuente nombre de la fuente, o fuentes color color del texto número hexadecimal o texto predefinido size tamaño del texto valores del 1 al 7, siendo por defecto el 3, o desplazamiento respecto al tamaño por defecto, añadiendo + o - delante del valor

21 Por ejemplo, para insertar el texto: Bienvenidos a Habría que escribir: <font color= # size= 4 face= Comic Sans MS, Arial, MS Sans Serif >Bienvenidos a También es posible definir una fuente para todo el documento. Para ello, hay que insertar la etiqueta <basefont> después de la etiqueta <body>. La etiqueta <basefont> no necesita una etiqueta de cierre, y permite modificar los mismos atributos del texto que la etiqueta <font>. Por ejemplo: <body> <basefont color= # size= 4 face= Arial >... Este código haría que la fuente del documento fuera por defecto de color azul, de tamaño 4 y Arial. Si después de indicar la etiqueta <basefont> o <font>, el navegador encuentra otra etiqueta <font>, la que prevalece es siempre la última que se encuentra. 3.6 Resaltado del texto <b>... Existen una serie de etiquetas que permiten aplicar diferentes estilos al texto que se encuentra entre ellas, y generalmente se utilizan para resaltarlo. Estos estilos pueden agruparse según vayan asociados al tipo de letra o a la información que represente el texto. No hay que olvidar que todas estas etiquetas necesitan una etiqueta de cierre, y que pueden aplicarse varias etiquetas al mismo texto. A continuación se muestran algunas etiquetas asociadas al tipo de letra: Etiqueta Significado Ejemplo <b> negrita curso HTML curtec <i> cursiva curso HTML curtec <u> subrayado curso HTML curtec <s> tachado curso HTML curtec <tt> teletipo (máquina de escribir) curso HTML curtec <big> aumenta el tamaño de la fuente curso HTML curtec <small> disminuye el tamaño de la fuente curso HTML curtec A continuación se muestran algunas etiquetas asociadas al tipo de información: Etiqueta Significado Ejemplo <cite> cita curso HTML curtec <code> ejemplo de código curso HTML curtec <dfn> definición curso HTML curtec <del> eliminado <em> énfasis curso HTML curtec

22 <ins> insertado curso HTML curtec <kbd> teclado curso HTML curtec <samp> muestra curso HTML curtec <strong> destacado curso HTML curtec <sub> subíndice curso HTML curtec <sup> superíndice curso HTML curtec <var> variable curso HTML curtec Las etiquetas más utilizadas son las asociadas al tipo de letra, ya que son más fáciles de recordar, y en muchos casos los resultados son los mismos que los de aplicar una etiqueta diferente. Por ejemplo, el resultado de aplicar las etiquetas <b> y <strong> es el mismo. Incluso a veces algunos estilos asociados al tipo de información pueden representarse de forma distinta según el navegador. Por ejemplo, para insertar el texto: Bienvenidos a Habría que escribir: <font color= # size= 4 face= Comic Sans MS, Arial, MS Sans Serif >Bienvenidos a <b><u><tt> 3.7 Párrafos <p>... El texto de una página puede agruparse en párrafos. Para ello, el texto de cada uno de los párrafos debe insertarse entre las etiquetas <p> y </p>. No es necesario insertar la etiqueta <br> para que un nuevo párrafo aparezca debajo del anterior, ya que las etiquetas <p> y </p> hacen que se cambie de línea automáticamente. También es posible cambiar la alineación del texto de cada párrafo. Para ello se modifica el valor del atributo align, cuyos valores pueden ser left (izquierda), right (derecha), center (centrado) o justify (justificado). Por ejemplo, para insertar el texto: Bienvenidos a mi página. Aquí encontraréis cursos de formación muy interesantes. Habría que escribir: <p align= center >Bienvenidos a mi p&aacutegina.</p> <p>aqu&iacute encontrar&eacuteis cursos de formaci&oacuten muy interesantes.</p>

23 Otra forma de cambiar la alineación del texto es mediante las etiquetas <div> y </div>, para las que también existe el atributo align. La etiqueta <div>, al igual que la etiqueta <p>, se utiliza para agrupar bloques de texto, pero con la diferencia de que la separación entre ellos es menor. Por ejemplo, para insertar el texto: Bienvenidos a mi página. Aquí encontraréis cursos de formación muy interesantes. Habría que escribir: <div align= center >Bienvenidos a mi p&aacutegina.</div> <div>aqu&iacute encontrar&eacuteis cursos de formaci&oacuten muy interesantes.</div> También es posible insertar el texto entre las etiquetas <center> y </center> para que aparezca centrado. Por ejemplo, para insertar el texto: Bienvenidos a mi página. Habría que escribir: <center>bienvenidos a mi p&aacutegina.</center> Otro par de etiquetas que permiten agrupar bloques de texto, pero que no implican el cambio de línea (como en el caso de <p> y <div>), son las etiquetas <span> y </span> volveremos a hablar de estas etiquetas cuando veamos las hojas de estilo. 3.8 Encabezados <h1>... Existen una serie de encabezados que suelen utilizarse para establecer títulos dentro de una página. La diferencia entre los distintos tipos de encabezado es el tamaño de la letra, el tipo de resaltado, y la separación existente entre el texto y los elementos que tiene encima y debajo de él. Hay que tener en cuanta que el navegador del usuario es el que aplicará el estilo del encabezado por lo que el mismo título se puede visualizar de forma diferente según el navegador. Existen seis etiquetas que representan seis tipos de cabeceras distintas. Todas estas etiquetas precisan una etiqueta de cierre. A continuación se muestran los distintos encabezados existentes: Etiqueta <H1> <H2> <H3> <H4> <H5> <H6> Ejemplo Título 1: HTML Título 2: HTML Título 3: HTML Título 4: HTML Título 5: HTML Título 6: HTML

24 Para todas estas etiquetas es posible especificar el valor del atributo align. Por ejemplo, para insertar el texto: El lenguaje HTML Apartado 1: Las etiquetas Habría que escribir: <H2 align= center >El lenguaje HTML</H2><H4>Apartado 1: Las etiquetas</h4> 3.9 Marquesinas <marquee> Las marquesinas son líneas de texto que pueden desplazarse de un lado a otro de la ventana en forma de línea. Para insertar una marquesina, es necesario insertar el texto entre las etiquetas <marquee> y </marquee>. La marquesina, por defecto, se desplaza de derecha a izquierda indefinidamente, pero si lo deseas puedes hacer que estas propiedades varíen. A través del atributo behavior puede modificarse el tipo de movimiento. Puede tomar los valores alternate (de lado a lado de la ventana, como si rebotara en los extremos), scroll (de un lado a otro, continuamente) o slide (de un lado a otro, pero una sola vez). A través del atributo direction puede modificarse la dirección en la que se moverá el texto. Puede tomar los valores down (de arriba a abajo), up (de abajo a arriba), left (de derecha a izquierda) o left (de izquierda a derecha). También es posible establecer un color de fondo, a través del atributo bgcolor. Por ejemplo, para insertar la siguiente marquesina: ESTO ES UNA MARQUESINA Habría que escribir: <marquee bgcolor= # behavior= alternate direction= right > <b><font color= #FFFFCC size= 5 >Esto es una marquesina </font></b> </marquee> También es posible insertar imágenes, tablas y otros elementos entre las etiquetas <marquee> y </marquee>, no sólamente texto Las listas <li>... Elemento de lista <li>

25 Cada uno de los elementos de una lista ha de insertarse entre las etiquetas <li> y </li>. Por ejemplo, para insertar en una lista los siguientes elementos: Libro Mascota Lapiz Habría que escribir:... <li>libro</li> <li>mascota</li> <li>lapiz</li>... Todos los elementos de la lista deberán encontrarse entre las etiquetas que indiquen si la lista es desordenada (con viñetas) u ordenada (numerada) como veremos a continuación. Lista desordenada <ul> Para que una lista sea desordenada, sus elementos deberán encontrarse entre las etiquetas <ul> y </ul>. A través del atributo type es posible elegir el tipo de viñeta, que puede ser circle (círculo), disc (disco) o square (cuadrado). Por ejemplo, para insertar la siquiente lista: o o o Libro Mascota Lapiz Habría que escribir: <ul type= circle > <li>libro</li> <li>mascota</li> <li>lapiz</li> </ul> Lista ordenada <ol> Para que una lista sea ordenada, sus elementos deberán encontrarse entre las etiquetas <ol> y </ol>. A través del atributo type es posible elegir el tipo de numeración, que puede ser 1 (números), a (letras minúsculas), A (letras mayúsculas), i (numeros romanos en minúsculas) o I (números romanos en mayúsculas).

26 Por ejemplo, para insertar la siquiente lista: i. Libro ii. Mascota iii. Lapiz Habría que escribir: <ol type= i > <li>libro</li> <li>mascota</li> <li>lapiz</li> </ol> Anidar listas Es posible anidar listas dentro de otras. Estas listas pueden ser tanto desordenadas como ordenadas. Por ejemplo, para insertar la siquiente lista: 1. Lunes Html Diseño Web 2. Martes 1. Html A. Practica Laboratorios B. Teoria y asignación de ejercios Habría que escribir: <ol> <li>lunes <ul type= square > <li>html</li> <li>diseño Web</li> </ul> </li> <li>martes <ol> <li>html</li> <ol type= A > <li> Practica Laboratorios </li> <li> Teoria y asignación de ejercios</li> </ol> </li> </ol> </li> </ol> Empezamos por la lista ordenada (la más externa) <ol>, esta lista tiene dos elementos <li>lunes y <li>martes. El elemento Lunes contiene una lista desordenada con tipo cuadrado <ul type= square > que tiene dos elementos <li>html</li> y <li>diseño Web</li>. El elemento Martes contiene una lista ordenada de un sólo elemento <li>htm,l</li> elemento que contiene a su vez una lista desordenada de tipo letras mayúsculas <ol type= A > con los dos elementos <li>practica de laboratorios</li> y <li>teoria y asignación de ejercicios </li>

27 3.11 Practica: Insertar texto con diferentes propiedades Practica I. 1 Si no tienes abierto el Bloc de notas, ábrelo para realizar el ejercicio. 2 Abre el archivo inicio.htm, que creaste en el tema anterior y que se encuentra en la carpeta ejercicios_html/animales. 3 Inserta una línea en blanco debajo de la etiqueta <body>, y escribe el siguiente código en ella: <basefont color= red size= 1 > Con este código estarás estableciendo el color rojo (#FF0000) y tamaño 1 para el texto del documento. Si guardas ahora los cambios y visualizas la página, no verás ningún cambio ya que la página no tiene texto. 4 Detrás de la etiqueta <basefont> inserta una línea en blanco, y escribe el siguiente texto: Inicio 5 Guarda el archivo y visualízalo en tu navegador, el texto debe aparecer en rojo y pequeño. Dejaremos la página un poco más discreta y cambiaremos el color del texto a verde oscuro (#003333) y subiremos el tamaño de las letras. 6 Rectifica la etiqueta <basefont para que quede así: <basefont color= # size= 4 > Con este código estarás estableciendo el color verde oscuro (#003333) y tamaño 4 para el texto del documento. 7 Guarda el archivo y visualízalo en tu navegador, observa los cambios. 8 Encierra el texto Inicio entre etiquetas <H1> de la siguiente forma: <h1>inicio</h1> Con este código estarás conviertiendo el texto en un encabezado de primer nivel. 9 Guarda el archivo y visualízalo en tu navegador, observa los cambios, el texto aparece destacado y más grande. 10 Inserta una línea en blanco debajo del código anterior, y escribe la etiqueta <hr>. Con esta etiqueta estarás insertando una regla horizontal.

28 11 Guarda el archivo y visualízalo en tu navegador, observa la regla 12 Inserta una línea en blanco debajo de la etiqueta anterior, y escribe el siguiente código en ella: <blockquote> <blockquote> <p align= left > <em>somos una asociación de veterinarios, estudiantes de veterinaria, o simplemente amantes de los animales. <br> Desde esta página web intentaremos resolver tus dudas acerca de cómo cuidar a tus mascotas. </em> </p> </blockquote> </blockquote> Con este código estarás insertando un párrafo (<p>) dividido en dos líneas (<br>). Este párrafo estará alineado a la izquierda (align= left ), aparecerá en cursiva (<em>) y tendrá doble sangrado (<blockquote>). 13 Guarda el archivo y visualízalo en tu navegador. Para apreciar mejor el efecto del párrafo ves cambiando el tamaño de la ventana de tu navegador y verás como el texto se va escribiendo en más líneas pero siempre alineado a la izquierda y saltando de línea después de la primera frase. Practica III. 1 Abre el documento gatos.htm, de la carpeta originales/animales del curso. 2 Guarda la página con el mismo nombre en tu directorio de ejercicios Mis documentos/ejercicios_html/animales Vamos a modificar la página para que tenga el siguiente aspecto:

29 1 Empezamos por darle a la palabra Gatos un estilo de encabezado 1: <h1>gatos</h1> Si quieres puedes ir observando los cambios según los vayas introduciendo, guardando sin cerrar el bloc de notas y visualizando la página cada vez (la primera vez abres el explorador con la página gatos.htm y después de ver el efecto, en vez de cerrar la ventana del explorador la dejas abierta, así cuando hayas hecho el siguiente cambio en la página podrás volver a la sesión del explorador con la página gatos.htm y después de hacer clic en el botón Actualizar de tu navegador verás mejor el efecto producido por el cambio que has incorporado a la página). 2 Detrás añadimos una regla con la etiqueta <hr>. 3 Añadimos una línea en blanco con <br> 4 La pregunta queda sangrada con respecto al resto del texto, la colocamos dentro de una etiqueta <blockquote> y además le asignamos un estilo de encabezado 3: <blockquote> <h3> COMO PREVENIR LOS PROBLEMAS DENTALES?</h3> </blockquote> 5 Sólo nos queda definir la lista intercalando las siguientes etiquetas: <ul> <li>alimentar al gato con comida seca de buena calidad o darle algo duro para que lo mastique</li> <ul> <li>preferiblemente que coma pienso</li> </ul> <li>cepillarle los dientes una vez a la semana</li>

30 <li>que el veterinario examine la boca del gato por lo menos cada seis meses</li> </ul> 6 Guarda el archivo y visualízalo en tu navegador. Practica. Modificar las propiedades del texto Si no tienes abierto el Bloc de notas, ábrelo para realizar los ejercicios planteados a continuación. Práctica I: Deportes. 1 Abrir el documento quienes, de tu carpeta ejercicios_html/deportes. 2 Añadir el código necesario para que la página quede de la siguiente forma: 3 Guardar los cambios y comprobar el funcionamiento en un navegador. Practica II: Deportes. 1 Abrir el documento donde.htm, de la carpeta originales/deportes del curso. 2 Guardar la página con el mismo nombre en tu directorio de ejercicios Mis documentos/ejercicios_html/deportes 3 Convertir la última frase en una marquesina. 4 Guardar los cambios y comprobar el funcionamiento en un navegador.

31 Practica III: Deportes. 1 Abrir el documento intalaciones.htm, de la carpeta originales/deportes del curso. 2 Guardar la página con el mismo nombre en tu directorio de ejercicios Mis documentos/ejercicios_html/deportes 3 Convertir la lista de actividades que aparece antes de la frase Puedes apuntarte... en una lista con viñetas. 4 Guardar los cambios y comprobar el funcionamiento en un navegador. Practica IV: Flores. 1 Abrir el documento inicio.htm, de la carpeta ejercicio_html/flores. 2 Añadir el código necesario para que la página quede de la siguiente forma: Establecer # como color del texto del documento, y 4 como el tamaño normal. 3 Guardar los cambios y comprobar el funcionamiento en un navegador.

32 Tema IV. Los Hiperenlaces Vamos a ver qué son los hiperenlaces, para qué sirven y cómo crearlos, ya que son un elemento esencial para cualquier página web. 4.1 Hiperenlace <a> Un hiperenlace, hipervínculo, o vínculo, no es más que un enlace, que al ser pulsado lleva de una página o archivo. Aquellos elementos (texto, imágenes, etc.) sobre los que se desee insertar un enlace han de encontrarse entre las etiquetas <a> y </a>. A través del atributo href se especifica la página a la que está asociado el enlace, la página que se visualizará cuando el usuario haga clic en el enlace. Por ejemplo, para insertar el enlace: Visita Habría que escribir: <a href= >Visita Tipos de referencias Existen diferentes formas de expresar una referencia a una página a través del atributo href. Referencia absoluta Conduce a una ubicación externa al sitio en el que se encuentra el documento. La ubicación es en Internet, en este caso hay que empezar la referencia por el nombre del dominio y algunas veces el nombre de la página. Si no se escribe el nombre de la página se cargará la página de inicio asociada al dominio. Por ejemplo, tendrá el mismo efecto que Para insertar el enlace: Visita Habría que escribir: <a href= >Visita

33 Referencia relativa al sitio: Conduce a un documento situado dentro del mismo sitio que el documento actual. Un sitio web es un conjunto de archivos y carpetas, relacionados entre sí, con un diseño similar o un objetivo común, estando todos ellos dentro de una misma carpeta, conocida como carpeta raíz del sitio. Por ejemplo, teniendo en cuenta que el documento t_4_1.htm se encuentra directamente dentro de la carpeta raíz del sitio, para insertar el enlace: Enlace a Tema 4: Hiperenlaces Habría que escribir: <a href= /t_4_1.htm >Enlace a Tema 4: Hiperenlaces</a> Observa como aparece el símbolo / delante del nombre del documento. Esta barra inclinada indica la carpeta raíz del sitio. Si el documento t_4_1.htm se encontrara, por ejemplo, dentro de una carpeta llamada tema4, y esta estuviera dentro de la carpeta raíz del sitio, habría que escribir: <a href= /tema4/t_4_1.htm >Enlace a Tema 4: Hiperenlaces</a> Referencia relativa al documento: Conduce a un documento situado dentro del mismo sitio que el documento actual, pero partiendo del directorio en el que se encuentra el actual. Por ejemplo, teniendo en cuenta que el documento t_4_1.htm se encuentra dentro de la misma carpeta que el documento actual, para insertar el enlace: Enlace a Tema 4: Hiperenlaces Habría que escribir: <a href= t_4_1.htm >Enlace a Tema 4: Hiperenlaces</a> Observa que en este caso no aparece el símbolo / delante del nombre del documento. Si el documento t_4_1.htm se encontrara, por ejemplo, dentro de una carpeta llamada tema4, y esta estuviera dentro de la misma carpeta que el documento actual, habría que escribir: <a href= tema4/t_4_1.htm >Enlace a Tema 4: Hiperenlaces</a>

34 4.3 Los Punto de fijación Conduce a un punto dentro de un documento, ya sea dentro del actual o de otro diferente. Para ello el vínculo debe ser nombre_de_documento#nombre_de_punto. Por ejemplo, para insertar el enlace: Punto de fijacion Tipos de enlaces Habría que escribir: <a href= t_4_1.htm#tipos >Punto de fijacion Tipos de enlaces</a> Teniendo en cuenta que el documento se llama t_4_1.htm y el punto de fijación se llama tipos. Al final de este tema verás cómo definir el punto de fijación. 4.4 Destino del enlace El destino del enlace determina en qué ventana va a ser abierta la página vinculada, se especifica a través del atributo target al que se le puede asignar los siguientes valores: _blank: Abre el documento vinculado en una ventana nueva del navegador. _parent: Abre el documento vinculado en la ventana del marco que contiene el vínculo o en el conjunto de marcos padre. _self: Es la opción predeterminada. Abre el documento vinculado en el mismo marco o ventana que el vínculo. _top: Abre el documento vinculado en la ventana completa del navegador. No te preocupes si no te queda del todo claro para qué sirve cada una de estas opciones de destino, ya que se volverán a ver en el tema de Marcos. De momento sólo te interesa retener la opción _blank y _self. Para insertar el enlace: Visita en una ventana nueva Habría que escribir: <a href= target = _blank >Visita en una ventana nueva</a> Es interesante utilizar esta opción cuando la página de destino está fuera de nuestro sitio para que cuando el usuario cierre la ventana del explorador, se encuentre automáticamente en la página desde la que había salido (que vuelva a nuestro sitio). 4.5 Formato de los enlaces En general, un texto que tiene un vínculo asociado suele aparecer subrayado.

35 Cuando el vínculo está definido sobre una imágen, en el borde aparecen una serie de puntitos al pulsar sobre ella. Cuando el vínculo está definido sobre una zona de una imagen (un mapa), aparece el contorno de esa zona. Aqui tienes dos vínculos similares de ejemplo: Como puedes ver, la segunda imagen que hace de vínculo contiene un recuadro alrededor. Esto ocurre debido a que se ha establecido un borde para la imagen, como veremos más adelante. Tanto si el vínculo se asigna a un texto como a una imagen, el cursor cambia de forma al situarse encima del vínculo. Suele adquirir la apariencia de una mano señalando. Normalmente los vínculos de texto cambian de color cuando el enlace ha sido ya pulsado o cuando el puntero del ratón se posiciona sobre él, estos cambios están predefinidos en cada navegador, pero nosotros podemos cambiar esos colores. Los colores de los vínculos pueden especificarse a través de las propiedades de la página, en la etiqueta <body>. Estos colores se asignan a través de los atributos link (vínculo), alink (vínculo activo), y vlink (vínculo visitado). Link permite determinar el color de los enlaces sin visitar (enlace que no ha sido pulsado ninguna vez). alink permite determinar el color del enlace activo (enlace que acaba de ser pulsado). vlink permite determinar el color de los enlaces visitados (enlaces que ya han sido pulsados). Por ejemplo, al insertar el siguiente código:... <body link= #FF0000 vlink= #FF0099 alink= #FF9900 >... <a href= target = _blank > Mientras no se visite la página el enlace será de color rojo (#FF0000): Mientras la página sea la última visitada, el enlace será de color fucsia (#FF0099): Cuando se haya visitado la página el enlace será de color naranja (#FF9900):

36 4.6 Las Anclas Cuando se tienen documentos extensos, divididos en varios apartados, es preferible poder ir directamente al apartado deseado, en lugar de ir al comienzo del documento. Para ello se utilizan las anclas, o puntos de fijación, muy útiles a la hora de crear índices. Un ancla necesita que se inserten las <a> y </a>, con el atributo name, que puede tomar cualquier valor inventado por el usuario, se recomienda no utilizar caracteres especiales. Por ejemplo, para insertar un punto de fijación delante del siguiente texto: Texto con ancla Habría que escribir: <a name= miancla ></a>texto con ancla Como puedes ver, no es necesario insertar nada entre las etiquetas <a> y </a>, y que sin mirar el código no hay nada que indique que delante del texto haya un ancla. Teniendo en cuenta que el documento actual se llama t_4_3.htm, y que el ancla anterior se llama miancla, podríamos crear un enlace que nos llevara directamente a la línea de texto en la que se encuentra el ancla. Por ejemplo: Enlace al ancla Habría que escribir: <a href= t_4_3.htm#miancla >Enlace al ancla</a> Si pulsas sobre el enlace verás como se vuelve a cargar el documento actual, pero en lugar de cargarse desde el principio, la primera línea de texto será la línea en la que hemos insertado el ancla. Cuando el ancla se encuentra en el mismo documento que el enlace, como ocurre en este caso, podemos prescindir de poner el nombre de la página en el atributo href. En el ejemplo anterior podríamos haber escrito: <a href= #miancla >Enlace al ancla</a> 4.7 Más tipos de enlaces Existen otros tipos de enlaces que no conducen a otra página web, los veremos a continuación: Correo electrónico Abre la aplicación Outlook Express para escribir un correo electrónico, cuyo destinatario será el especificado en el enlace. Para ello la referencia del vínculo debe ser mailto:direcciondecorreo. Por ejemplo, para insertar un enlace que permita enviar un correo electrónico a cursosdehtml.com, tal como este:

37 para cursosdehtml. Habría que escribir: <a href= > para cursos de html</a> Después de hacer clic en el enlace se abrirá el Outlook Express (si el usuario lo tiene instalado) con la pantalla para redactar un nuevo mensaje y con el campo destinatario rellenado con la direcciondecorreo. Podemos hacer que esté rellenado algún campo más como es el asunto. En este caso habría que escribir: <a href= mailto:webmaster@cursosdehtml.com?subject=el asunto del mensaje > para cursos de html</a> Vínculo a ficheros para descarga: El valor del atributo href normalmente será una página web (con extensión htm, html, asp, php...) pero también puede ser un fichero comprimido, una hoja de Excel, un documento Word, un documento con extensión pdf. Cuando el enlace no es a una página Web nos aparecerá el cuadro de diálogo que seguro habrás visto alguna vez en el que el navegador le pide al usuario permiso para descargar el fichero en su ordenador. El navegador reconoce algunas extensiones como asociadas a un determinado programa (por ejemplo la extensión.doc está asociada al programa Word,.pdf al programa Acrobar Reader,.xls al programa Excel...) en este caso en el cuadro de diálogo aparece una nueva opción, la de abrir el fichero sin descargarlo en el disco duro del usuario. Para nombrar el fichero podemos utilizar según el caso, una referencia externa, una referencia relativa al sitio o una referencia relativa al documento. Por ejemplo, en la carpeta donde se encuentra esta página tenemos el fichero Word carta.doc y queremos que nuestros visitantes puedan visualizar e incluso descargar el fichero en su disco duro, en este caso definiremos el enlace: haz clic aquí para descargarte el fichero De la siguiente forma: <a href= carta.doc tarjet=_blank >haz clic aquí para descargarte el fichero</a>

38 En este caso hemos utilizado una referencia relativa al documento ya que la carta se encuentra en la misma carpeta que nuestra página. Vínculo vacío: Al pulsar sobre un enlace vacío no se abre ninguna página ni archivo, pero el formato es el mismo que el de cualquier otro enlace. El vínculo debe ser el símbolo almohadilla #. Por ejemplo, para insertar el enlace vacío: vinculo vacio Habría que escribir: <a href= # >vinculo vacio</a> Este tipo de enlace resulta útil para trabajar con comportamientos javascript. 4.8 Ejercicio. Insertar un hiperenlace 1 Si no tienes abierto el Bloc de notas, ábrelo para realizar el ejercicio. 2 Abre el archivo inicio.htm, que debes tener en la carpeta ejercicios_html/animales. Vamos a añadir un enlace a la página en Internet de curtec. 1 Escribe el siguiente código delante de la etiqueta </body>: <p align= center > c<a href= target= _blank > <b> Cursos de html </b> </a> </p> Con este código estarás insertando un hiperenlace a que será abierto en una nueva ventana (target= _blank ). En este caso hemos utilizado una referencia absoluta. El enlace contendrá el texto visita Cursos de html, que aparecerá en negrita (<b>), y centrado (align= center ). Observa como hemos anidado las etiquetas, siempre se cierra la última abierta. 2 Haz clic sobre el menú Archivo. 3 Haz clic sobre la opción Guardar. 4 Abre con tu navegador el documento inicio.htm que acabas de guardar, y comprueba que si te posicionas sobre el texto visita curtec el puntero del ratón se convierte en una

39 mano y si haces clic (y estás conectado a Internet) se abrirá una nueva ventana con la página de cursos html. Cambiar ahora el color de los enlaces. 1 Si cerraste el archivo inicio.htm, abrelo para seguir con el ejericio: 2 Rectifica la etiqueta <body> para que quede así: <body bgcolor= #99CC99 link= #CC0000 vlink= #CC0000 alink= #CC0000 > Con este código estarás indicando que la página tiene el color de fondo verde (#99CC99), y el color de los enlaces rojo (#CC0000). 3 Haz clic sobre el menú Archivo. 4 Haz clic sobre la opción Guardar. 5 Abre con tu navegador el documento inicio.htm que acabas de guardar. Fíjate que ahora el texto del enlace aparece en rojo. 4.9 Practica IV. Insertar hiperenlaces Si no tienes abierto el Bloc de notas, ábrelo para realizar los ejercicios planteados a continuación. Practica I: Deportes. 1 Abrir el documento menu.htm, de la carpeta originales/deportes del curso. 2 Guardar la página con el mismo nombre en tu directorio de ejercicios Mis documentos/ejercicios_html/deportes 3 Rectificar la página para que la palabra sea un enlace de correo electrónico a tu dirección de correo. 4 Guardar los cambios y comprobar el funcionamiento en un navegador. Practica II: Deportes. 1 Abrir el documento instalaciones.htm, de la carpeta ejercicios_html/deportes. 2 Añadir al texto de cada actividad un enlace al párrafo correspondiente a esa actividad para que el navegante pueda ver directamente la descripción de la actividad sin tener que moverse por toda la página. 3 Guardar los cambios y comprobar el funcionamiento en un navegador.

40 Practica III: Flores. 1 Abrir el documento menu.htm, de la carpeta originales/flores del curso. 2 Guardar la página con el mismo nombre en tu directorio de ejercicios Mis documentos/ejercicios_html/flores 3 Asociar a la palabra Inicio un enlace a la página inicio.htm, a la palabra Productos un enlace a la página productos.htm y a la palabra Pedidos un enlace a la página pedidos.htm, las páginas inicio.htm, productos.htm y pedidos.htm se encontrarán en el mismo directorio que la página menu.htm. Las páginas se abrirán en la misma ventana. 4 Guardar los cambios y comprobar el funcionamiento del enlace a la página Inicio.htm en un navegador (las páginas productos.htm y pedidos.htm se incorporarán más adelante).

41 Tema V. Trabajando con Imágenes Vamos a ver cómo insertar imágenes, y cómo modificar algunas de sus propiedades. 5.1 Imagen <img> Todas las páginas web acostumbran a tener un cierto número de imágenes, que permiten mejorar su apariencia, o dotarla de una mayor información visual. Para insertar una imagen es necesario insertar la etiqueta <img>. Dicha etiqueta no necesita etiqueta de cierre. El nombre de la imagen ha de especificarse a través del atributo src. Por ejemplo, para insertar la siguiente imagen: Habría que escribir: <img src= imagenes/logo_animales.gif > Teniendo en cuentra que la imagen se llama logo_animales.gif y que está dentro de la carpeta imagenes, que se encuentra en el mismo directorio que el documento actual (referencia relativa al documento). Para trabajar de una forma más sencilla y ordenada, es recomendable que todos los documentos html se encuentren en un mismo directorio, y que dentro de este directorio existan diferentes carpetas para agrupar otros objetos, como puede ser una carpeta destinada a almacenar imagenes, o una carpeta destinada a almacenar archivos de audio, etc. 5.2 Los Formatos de imagen Las imágenes pueden ser de muchos formatos diferentes: bmp, gif, jpg, etc. Pero no todos estos formatos son adecuados para una web, debido a que pueden ocupar mucha memoria o a que no son compatibles con algunos navegadores. Los formatos más utilizados son el GIF y el JPG, que a pesar de ser imágenes de menor calidad que las imágenes BMP, son más recomendables debido a que ocupan menos memoria. Vamos a ver un poco más sobre estos formatos:

42 Formato GIF Utilizan un máximo de 256 colores, y son recomendables para imágenes con grandes áreas de un mismo color o de tonos no continuos. Suelen utilizarse con gran frecuencia, ya que permiten definir transparencias y animación. Formato JPG Las imágenes son de mayor calidad que las GIF, al poder contener millones de colores, pero el tamaño de la imagen es mayor y tarda más en descargarse se utilizan más para fotos. Puedes incluir imágenes en otros formatos, que podrán ser visualizadas en algunos navegadores. Este es el caso de las imágenes BMP y PNG. Puedes cambiar el formato de las imágenes mediante la utilización de algún programa de tratamiento de imágenes, como pueden ser Fireworks, Photoshop, Corel Draw, etc. Por ejemplo el Fireworks de Macromedia tiene una opción, exportar a tipo gif que reduce considerablemente la ocupación de la imagen sin perder en calidad (siempre que la imagen se adecue al formato). Dependiendo del programa utilizado existirá una mayor o menor cantidad de opciones a la hora de modificar las imágenes. Para realizar modificaciones sencillas, como la de recortar las imágenes y cambiar los colores, puedes utilizar incluso el programa Paint de Windows. 5.3 Texto alternativo Cuando una imagen no puede ser visualizada en el navegador, cosa que puede ocurrir al especificar mal el valor del atributo src, aparece un recuadro blanco con una X roja en su lugar, junto con el nombre de la imagen. Podemos hacer que en lugar de mostrarse el nombre de la imagen aparezca el texto que nosotros deseemos, gracias al atributo alt. Por ejemplo, imagina que deseamos mostrar una imagen llamada gatito.gif, con el texto alternativo Imagen gato, para ello insertamos el siguiente código: <img src= gatito.gif alt= Imagen gato > Pero hemos cometido un error, ya que dicha imagen no se encuentra en el mismo directorio que el documento actual, sino que se encuentra dentro de la carpeta imagenes. En lugar de la imagen se mostrará lo siguiente: Si en lugar del código anterior hubiéramos insertado el siguiente código: <img src= imagenes/gatito.gif alt= Imagen gato > La imagen habría mostrado correctamente:

43 El texto alternativo se muestra también al situar el puntero sobre la imagen. Si situas el puntero sobre la imagen durante unos segundos, verás como aparece el texto Imagen gato. El texto alternativo es muy útil a la hora de diseñar páginas más asequibles a los invidentes ya que los programas lectores son capaces de leer el texto alternativo. 5.4 Borde de una imagen En general, al visualizar una página en un navegador las imágenes aparecen sin ningún borde alrededor, pero es posible establecer uno a través del atributo border. El atributo border puede tomar valores numéricos, que indican el grosor en píxeles del borde. Por ejemplo, para insertar la siguiente imagen con borde: Habría que escribir: <img src= imagenes/logo_animales.gif border= 4 > Hay que tener en cuenta que el borde de la imagen siempre será de color negro, a no ser que la imagen contenga un enlace, en cuyo caso el color del borde será el color establecido para los vínculos. Por ejemplo, para insertar la siguiente imagen con borde y con un enlace: Habría que escribir: <a href= target = _blank ><img src= imagenes/logo_animales.gif border= 4 ></a>

44 Si se desea establecer un vínculo sobre una imagen y no se desea que se muestre el borde (que por su color indica que existe dicho vínculo), es necesario establecer border= Tamaño de una imagen Cuando insertamos una imagen, esta se muestra en los navegadores con su tamaño original, pero por diversos motivos puede interesarnos modificar dicho tamaño. A través de los atributos width (anchura) y height (altura) puede modificarse el tamaño de la imagen. Dicho cambio de tamaño no se aplica directamente sobre el archivo de imagen, sino que lo que varía es la visualización de la imagen en el navegador. El valor que pueden tomar los atributos width y height ha de ser un número, acompañado de % cuando se desee que sea en porcentaje con respecto a la página. Por ejemplo, para insertar la siguiente imagen (cuyo tamaño original era de 122 píxeles de anchura y 71 píxeles de altura) con 200 píxeles de anchura y 80 píxeles de altura: Habría que escribir: <img src= imagenes/logo_animales.gif width= 200 height= 80 > Al modificar el tamaño de la imagen a través de estos atributos es muy probable que la imagen resultante no sea de buena calidad, en comparación de cómo podría quedar modificándola desde un editor externo, como Fireworks. 5.6 Alineación de una imagen La alineación de las imágenes se establece a través del atributo align. Este atributo indica la alineación de las imágenes con respecto a la línea de texto en la que se encuentran. Los valores del atributo align pueden ser los siguientes: Valor Significado absbottom inferior absoluta absmiddle medio absoluta

45 baseline línea de base boottm inferior left izquierda middle medio right derecha texttop texto superior top superior El resultado de aplicar uno u otro valor puede tener el mismo resultado, como ocurre con los valores baseline y bottom, o con los valores texttop y top. Para insertar el texto y la imagen siguientes: PerrosGatos Una web de animales Habría que escribir: PerrosGatos<img scr= imagenes/logo_animales.gif align= middle >Una web de animales Este tipo de alineación la recomendamos cuando es una imagen pequeña que queremos fundir con la línea de texto sin que por ello cree una separación demasiado grande entre la línea donde se encuentra la imágen y las líneas superior y inferior. Por ejemplo para la imagen de un icono de cualquier programa, de un botón, etc...

46 Si la imagen es muy grande, conviene dejarla aislada del texto (no ajustarla a la derecha ni a la izaquierda sino colocarla en un bloque aparte). 5.7 Ejercicio: Insertar una imagen Si no tienes abierto el Bloc de notas, ábrelo para realizar el ejercicio. Practica I. 1 Abre el archivo inicio.htm, que se encuentra en la carpeta ejercicios_html/animales. 2 Sustituye la línea <b> visita curtec </b> que está incluida dentro de un hiperenlace, por la línea <img src= imagenes/curtec.jpg alt= visita cursos html width= 90 height= 32 border= 4 > Con este código estarás asociando el enlace con la imagen curtec.jpg que se encuentra en la directorio imagenes dentro de la carpeta animales (la carpeta donde se encuentra el archivo inicio.htm. La imagen medirá 90 píxeles de ancho, y 32 píxeles de alto (atributos width y height). Tendrá un borde de 4 píxeles (atributo border), que aparecerá de color rojo, al ser este color el definido para los enlaces de esta página. En el caso de que la imagen no pueda ser visualizada, o se situe el puntero sobre ella, se mostrará el texto visita curtec (atributo alt). 3 Haz clic sobre la opción Guardar del menú Archivo. 4 Abre el documento inicio.htm, que acabas de guardar, en un navegador. Practica II. 1 Abre el documento menu.htm, de la carpeta originales/animales del curso. 2 Guarda la página con el mismo nombre en tu directorio de ejercicios Mis documentos/ejercicios_html/animales 2 Añade delante de la primera etiqueta <p... la siguiente línea:

47 <p align= center ><img src= imagenes/logo_animales.gif width= 122 height= 85 > </p> El párrafo se añade para centrar la imagen. 3 Haz clic sobre la opción Guardar del menú Archivo. 4 Abre el documento menu.htm, que acabas de guardar, en un navegador, y comprueba que obtienes una página como la que aparece si pulsas aquí. Practica III. 1 Abre el archivo gatos.htm, que se encuentra en la carpeta animales. 2 Añade detrás de la etiqueta </ul> la línea: <img src= imagenes/gatito.gif alt= gatito border= 0 > 3 Haz clic sobre la opción Guardar del menú Archivo. 4 Abre el documento menu.htm, que acabas de guardar, en un navegador. No te preocupes por la disposición de la imagen, en el tema de tablas lo arreglaremos. 5.8 Practica. Insertar imágenes Si no tienes abierto el Bloc de notas, ábrelo para realizar los ejercicios planteados a continuación. Práctica I: Deportes. 1 Abrir el documento menu.htm, de la carpeta ejercicios_html/deportes. 2 Sustituir la palabra DEPORTES por la imagen logodeportes.gif que se encuentra en la carpeta imagenes de la carpeta ejercicios_html/deportes, la imagen deberá tener deportes como texto alternativo. 3 Sustituir la palabra por la imagen .gif, sin texto alternativo. 4 Guardar los cambios y comprobar el funcionamiento en un navegador. Práctica II: Deportes. 1 Abrir el documento instalaciones.htm, de la carpeta ejercicios_html/deportes. 2 Sustituir la palabra DEPORTES que aparece al final de la página por la misma imagen logodeportes.gif que en el ejercicio anterior, la imagen deberá tener deportes como texto alternativo.

48 3 Guardar los cambios y comprobar el funcionamiento en un navegador. Práctica III: Flores 1 Abrir el documento menu.htm, de la carpeta flores. 2 Sustituir la palabra FLORES por la imagen logo_flores.gif que se encuentra en la carpeta imagenes de la carpeta flores, la imagen deberá tener flores como texto alternativo y el texto que hay a su derecha debe quedar a media altura de la imagen. 3 Guardar los cambios y comprobar el funcionamiento en un navegador.

49 Temas VI. Trabajando con Tablas En este tema vamos a ver cómo trabajar con tablas. Podremos insertar tablas, filas y columnas, y modificar sus propiedades. Hoy en dia, la mayoría de las páginas web se basan en tablas, ya que resultan de gran utilidad al mejorar notablemente las opciones de diseño. Todos los objetos se alinean por defecto a la izquierda de las páginas web, pero gracias a las tablas es posible distribuir el texto en columnas, colocar imágenes al lado de un bloque de texto, y otra serie de cosas que sin las tablas serían imposibles de realizarse. 6.1 Tabla <table> Las tablas están formadas por celdas, que son los recuadros que se obtienen como resultado de la intersección entre una fila y una columna. imagen y texto Texto dentro de una celda COLUMNA FILA CELDA Para crear una tabla hay que insertar las etiquetas <table> y </table>. Entre dichas etiquetas habrá que especificar las filas y columnas que formarán la tabla. 6.2 Fila <tr> Es necesario insertar las etiquetas <tr> y </tr> por cada una de las filas de la tabla. Estas etiquetas deberán insertarse entre las etiqetas <table> y </table>. Por ejemplo, para crear una tabla con cinco filas escribiríamos: <table> <tr>...</tr> <tr>...</tr> <tr>...</tr> <tr>...</tr> <tr>...</tr> </table>

50 6.3 Columna o celda <td> Para crear una tabla no basta con especificar el número de filas, es necesario también especificar el número de columnas. Una celda es el resultado de la intersección entre una fila y una columna, por lo que podremos especificar el número de celdas por fila, que equivale a especificar el número de columnas por fila. Es necesario insertar las etiquetas <td> y </td> por cada una de las celdas que compongan cada una de las filas de la tabla. Por lo tanto, habrá que insertar esas etiquetas entre las etiquetas <tr> y </tr>. Entre las etiquetas <td> y </td> se podrá especificar el contenido de cada una de las celdas. Por ejemplo, para insertar la siguiente tabla: Habría que escribir: Sabado Curso HTML <table border= 1 > <tr> <td>sabado</td> <td>domingo</td> </tr> <tr> <td>curso HTML</td> <td>curso Dreamweaver</td> </tr> <tr> <td>curso Frontpage</td> <td>curso Flash</td> </tr> </table> Domingo Curso Dreamweaver Curso Frontpage Curso Flash 6.4 Formato de la tabla Es posible modificar los siguientes atributos de una tabla: Atributo Significado Posibles valores width ancho de la tabla un número, acompañado de % cuando se desee que sea en porcentaje height altura de la tabla un número, acompañado de % cuando se desee que sea en porcentaje espacio entre el contenido de las cellpadding un número celdas y el borde cellspacing espacio entre celdas un número

51 border grosor del borde un número align alineación de la tabla dentro de la página left (izquierda) right (derecha) center (centro) bgcolor color de fondo número hexadecimal background imagen de fondo número hexadecimal bordercolor color del borde número hexadecimal Por ejemplo, para modificar la tabla de la página anterior para que quedase como la siguiente: Sabado Curso HTML Curso Frontpage Domingo Curso Dreamweaver Curso Flash Habría que escribir: <table width= 50% border= 2 align= center cellspacing= 0 bordercolor= # bgcolor= #FFCC99 >... </table> Con esto indicamos que el ancho (width) de la tabla debe ocupar el 50% del ancho de la ventana (lo puedes comprobar cambiando el ancho de la ventana de tu navegador y verás que el ancho de la tabla varía para ocupar siempre la mitad de la ventana), que el borde (border) tiene un grosor de dos píxeles (es más ancho que las separaciones internas de la tabla que tienen grosor 1), que la tabla está alineada al centro (center) de la ventana, que no hay espacio entre las celdas (cellspacing= 0 ), que el borde la tabla es negro (#000000) y el fondo naranja (#FFCC99). 6.5 Formato de las celdas Es posible modificar los siguientes atributos de una celda: Atributo Significado Posibles valores width ancho de la tabla un número, acompañado de % cuando se desee que sea en porcentaje height altura de la tabla un número, acompañado de % cuando se desee que sea en porcentaje align left (izquierda) alineación horizontal del right (derecha) contenido de la celda center (centro) valign alineación vertical del contenido de la celda baseline (línea de base) bottom (inferior) middle (medio) top (superior)

52 bgcolor color de fondo número hexadecimal background imagen de fondo bordercolor color del borde número hexadecimal número hexadecimal También es posible modificar estos atributos de toda una fila, especificándolos en la etiqueta <tr>, en lugar de en la etiqueta <td>. Hay que tener en cuenta que los atributos tienen más prioridad cuando son establecidos para una celda que cuando son establecidos para una fila completa. Al mismo tiempo, tienen más prioridad los atributos establecidos para una fila que los establecidos para toda la tabla. Por ejemplo, si escribiéramos el siguiente código: <table width= 50% border= 2 align= center cellspacing= 0 bordercolor= # bgcolor= #FFCC99 > <tr align= center bgcolor= #0099CC > <td>sabado</td> <td bgcolor= #66CC99 >Domingo</td> </tr> <tr> <td>curso HTML</td> <td>curso Dreamweaver</td> </tr> <tr> <td>curso Frontpage</td> <td>curso Flash</td> </tr> </table> Obtendríamos la siguiente tabla: Sabado Curso HTML Curso Frontpage Domingo Curso Dreamweaver Curso Flash Se ha establecido el color naranja como fondo de toda la tabla, pero con la línea de código <tr align= center bgcolor= #0099CC > se ha establecido el color azul como color de fondo de la primera fila, por lo que dicha fila se mostrará de color azul, y no de color naranja. Al mismo tiempo, se ha cambiado el color de la segunda celda de la primera fila por el color verde, a través de la línea <td bgcolor= #66CC99 >Domingo</td> por lo que esta fila en vez de ser azul será verde, los atributos de celda tienen prioridad sobre los de la fila. Existe otro atributo que puede establecerse sobre las celdas. Se trata del atributo nowrap, que hace que el contenido de la celda no se ajuste de manera automática al

53 ancho de la columna sino que el ancho de la celda se adapta al ancho del contenido para que el contenido ocupe una sólo fila. Este atributo no toma ningún valor, simplemente se añade o no a las etiqueta <td>. 6.6 Encabezado de columna <th> Las etiquetas <td> y </td> se utilizan para definir las celdas de cada una de las filas, pero podemos poner en su lugar las etiquetas <th> y </th>. Para la etiqueta <th> es posible especificar los mismos atributos que para la etiqueta <td>, pero esta nueva etiqueta hace que el texto de la celda aparezca centrado y en negrita, por lo que se utiliza para definir los encabezados o títulos de las columnas. Por ejemplo, si escribiéramos el siguiente código: <table width= 50% border= 1 align= center > <tr> <th>sabado</td> <th>domingo</td> </tr> <tr> <td>curso HTML</td> <td>curso Dreamweaver</td> </tr> <tr> <td>curso Frontpage</td> <td>curso Flash</td> </tr> </table> Obtendríamos la siguiente tabla: Sábado Curso HTML Curso Frontpage Domingo Curso Dreamweaver Curso Flash 6.7 Título de tabla <caption> No solamente es posible establecer títulos para las columnas, también es posible establecer un título para la tabla mediante las etiquetas <caption> y </caption>. Estas etiquetas han de ir después de la etiqueta <table>, y puede especificarse el valor de los atributos align (con los valores bottom, center, left, right y top) y valign (con los valores bottom y top).

54 Por ejemplo, si escribiéramos el siguiente código: <table width= 50% border= 1 align= center > <caption align= right valign= top >Titulo de la tabla<tr> <tr> <th>sabado</td>... </tr> </table> Obtendríamos la siguiente tabla con título: Titulo de la tabla Sábado Curso HTML Curso Frontpage Domingo Curso Dreamweaver Curso Flash El título aparece ajustado a la margen derecho de la tabla (align= right ) y encima de la tabla (valign= top ). 6.8 Combinar celdas Para las etiquetas <td> y <th> existen los atributos colspan y rowspan, que se utilizan para combinar celdas. A través del atributo colspan se especifica el número de columnas por las que se extenderá la celda, y a través del atributo rowspan se especifica el número de filas por las que se extenderá la celda. Para que quede más claro, vamos a ver un ejemplo de su uso. Por ejemplo, para insertar la siguiente tabla: DIFERENCIAS ENTRE EL PERRO Y EL HOMBRE DIFERENCIAS PERRO PEQUEÑO GRANDE HOMBRE Duración crecimiento 10 meses 18 a 24 meses 16 años Tiempo de gestación 58 a 63 días 9 meses Duración de vida del pelo/cabello 1 año 2 a 7 años Habría que escribir el siguiente código: <table width= 575 border= 2 cellspacing= 2 > <tr align= center valign= middle > <th colspan= 4 >DIFERENCIAS ENTRE EL PERRO Y EL HOMBRE</th>

55 </tr> <tr align= center valign= middle > <th rowspan= 2 >DIFERENCIAS</th> <th colspan= 2 >PERRO</th> <th rowspan= 2 >HOMBRE</th> </tr> <tr align= center valign= middle > <th>pequeño</th> <th>grande</th> </tr> <tr align= center valign= middle > <td>duración crecimiento</td> <td>10 meses</td> <td>18 a 24 meses</td> <td>16 años</td> </tr> <tr align= center valign= middle > <td>tiempo de gestación</td> <td colspan= 2 >58 a 63 días</td> <td>9 meses</td> </tr> <tr align= center valign= middle > <td>duración de vida del pelo/cabello</td> <td colspan= 2 >1 año</td> <td>2 a 7 años</td> </tr> </table> Vamos a explicar un poco cómo funciona dicho código, aunque sería conveniente que primero intentaras entender el código comparándolo con la tabla que de él se obtiene. En primer lugar, tenemos que ver el número máximo de columnas que ha de tener la tabla. En este caso serían cuatro columnas. Para saber el número de columnas total de la tabla, tenemos que fijarnos en el número total de celdas que podemos obtener por fila al trazar las líneas verticales que separan las columnas entre sí. En la primera fila, la línea <th colspan= 4 >DIFERENCIAS ENTRE EL PERRO Y EL HOMBRE</th> indica que la celda ocupará cuatro columnas de la tabla (la columna actual y las 3 siguientes). Como la tabla tiene como mucho cuatro columnas y el atributo colspan de la celda vale cuatro, no hay que definir más celdas para esa misma fila. En la segunda fila, la línea <th rowspan= 2 >DIFERENCIAS</th> indica que la celda ocupará dos filas de la tabla (la actual y la siguiente). Lo mismo ocurre con la línea <th rowspan= 2 >HOMBRE</th>. Ya hemos definido dos celdas de la segunda fila. Sabemos que la tabla tiene como mucho cuatro columnas, por lo que como en la línea <th colspan= 2 >PERRO</th> el atributo colspan vale dos, ya tenemos las cuatro celdas. En la segunda fila hemos definido dos celdas que se expanden por dos filas, por lo que en la tercera fila habrá que definir solamente dos celdas, y no cuatro, ya que dos de sus celdas se corresponden con las definidas en la fila anterior.

56 Las dos nuevas celdas son <th>pequeño</th> y <th>grande</th>. El uso de los atributos colspan y rowspan puede resultar algo complicado al principio. Es cuestión de práctica. Ejercicio: Trabajar con tablas Practica I. Vamos a insertar en la página gatos.htm una tabla para colocar la imagen del gatito a la izquierda de la lista. Para eso crearemos una tabla de una fila y dos columnas, en la columna de la izquierda colocaremos el texto y en la columna de la derecha la imagen. 1 Si no tienes abierto el Bloc de notas, ábrelo para realizar el ejercicio. 2 Haz clic sobre el menú Archivo. 3 Haz clic sobre la opción Abrir. Se abrirá una nueva ventana. 4 En Tipo, elige Todos los archivos. 5 Selecciona el archivo gatos.htm, que se encuentra en la carpeta animales, y pulsa sobre el botón Aceptar. 6 Detrás de la etiqueta <hr> añade el siguiente código para añadir una línea en blanco, definir la tabla, empezar la definición de la primera fila y primera columna de la tabla. Hacemos la tabla invisible (border= 0 ) y que ocupe todo los ancho de la ventana (width= 100% ), la primera columna ocupará el 70% de la ventana (width= 70% ): <br> <table width= 100% border= 0 > <tr> <td width= 70% > 7 Detrás de la última etiqueta </ul> añade el siguiente código para cerrar la columna y empezar la otra, ahora la segunda columna ocupará el 30% de la ventana (width= 30% ): </td> <td width= 30% > 8 Detrás de la etiqueta <img> añade el siguiente código para cerrar la columna y cerrar la fila y la tabla: </td> </tr> </table> 9 Guarda el archivo y cierra el bloc de notas.

57 10 Abre con tu navegador el archivo gatos.htm, comprueba que ahora la imagen está a la derecha del texto y si haces la ventana más pequeña, el ancho de las columnas cambia. Practica II. 1 Abre el documento perros.htm, de la carpeta originales/animales del curso. 2 Guarda la página con el mismo nombre en tu directorio de ejercicios Mis documentos/ejercicios_html/animales En el documento que has abierto vamos a crear la siguiente tabla: DIFERENCIAS ENTRE EL PERRO Y EL HOMBRE DIFERENCIAS PERRO PEQUEÑO GRANDE HOMBRE Duración crecimiento 10 meses 18 a 24 meses 16 años Tiempo de gestación 58 a 63 días 9 meses Duración de vida del pelo/cabello 1 año 2 a 7 años Empezamos por definir la etiqueta de la tabla: 3 Escribe delante de la etiqueta </body>: <table width= 575 border= 2 align= center cellspacing= 2 bordercolor= # > El atributo width nos permite definir la tabla de un tamaño fijo para que ese tamaño no cambie según el tamaño de la ventana abierta. Con el valor 2 del atributo border hacemos que el borde externo de la tabla aparezca más grueso. El atributo align con el valor center nos permite indicar que la tabla estará centrada con respecto a la ventana. Con el valor 2 del atributo cellspacing hacemos que aparezca un hueco entre las celdas de la tabla. El atributo bordercolor nos permite definir el color del borde la tabla. Para que no se nos olvide cerrar etiquetas es mejor añadir la etiqueta de cierre y después entre la dos etiquetas añadir las otras. 4 Escribe: </table>

58 La tabla tiene seis filas (contamos el número mayor de filas) y el texto contenido en ellas está centrado tanto en horizontal como en vertical: 5 Escribe seis veces: <tr align= center valign= middle > </tr> Ya hemos definido las filas, ahora las vamos a rellenar con las columnas. Miramos cuál es la fila con mayor número de columnas, tiene cuatro columnas. Rellenamos la primera fila, en esta fila aparece una sola columna por lo que hay que indicar que esta se expande sobre cuatro columnas: 6 Escribe después de la primera etiqueta <tr..: <td colspan= 4 >DIFERENCIAS ENTRE EL PERRO Y EL HOMBRE</td> Vamos a rellenar ahora la segunda fila. En esta fila la primera columna se expande sobre dos filas: 7 Escribe después de la segunda etiqueta <tr..: <td rowspan= 2 >DIFERENCIAS</td> La segunda columna se expande sobre dos columnas: 8 Escribe a continuación: <td colspan= 2 >PERRO</td> La tercera columna se expande sobre dos filas: 9 Escribe a continuación: <td rowspan= 2 >HOMBRE</td> Vamos a rellenar ahora la tercera fila. En esta fila sólo tenemos que definir dos columnas ya que la primera y la última están incluidas en el rowspan de la fila anterior. 10 Escribe después de la tercera etiqueta <tr..: <td>pequeño</td> <td>grande</td>

59 Vamos a rellenar ahora la cuarta fila. En esta fila tenemos que definir las cuatro columnas normales 11 Escribe después de la cuarta etiqueta <tr..: <td>duración crecimiento</td> <td>10 meses</td> <td>18 a 24 meses</td> <td>16 años</td> Vamos a rellenar ahora la quinta fila. En esta fila tenemos que indicar que la segunda columna se expande sobre dos columnas. 12 Escribe después de la quinta etiqueta <tr..: <td>tiempo de gestación</td> <td colspan= 2 >58 a 63 días</td> <td>9 meses</td> Por último rellenamos la sexta fila. En esta fila tenemos que indicar también que la segunda columna se expande sobre dos columnas. 13 Escribe después de la sexta etiqueta <tr..: <td>duración de vida del pelo/cabello</td> <td colspan= 2 >1 año</td> <td>2 a 7 años</td> Veamos el resultado. 14 Guarda los cambios y abre la página con tu navegador. Ahora añadiremos los colores de fondo. Si quieres puedes ir observando los cambios según los vayas introduciendo, guardando sin cerrar el bloc de notas y cada vez actualizando la página en tu navegador (como hiciste en el ejercicio paso a paso del tema 3). 15 Añade background= imagenes/fondopatas.gif dentro de la etiqueta <table>. De este modo, la imagen fondopatas.gif pasará a ser la imagen de fondo de la tabla.

60 16 Añade bgcolor= # dentro de la primera etiqueta <tr>. De este modo, la primera fila de la tabla será de color verde oscuro. 17 Añade bgcolor= #FFCC99 dentro de la segunda etiqueta <tr>. De este modo, la segunda fila de la tabla será de color naranja. 18 Añade bgcolor= #FFFF99 dentro de la tercera etiqueta <tr>. De este modo, las celdas de esa fila, que contienen el texto PEQUEÑO y GRANDE, serán de color amarillo. Por último cambiaremos las tres primeras filas para que el texto contenido en ellas tenga formato de cabecera de columna. 19 Sustituye td por th en las líneas que se encuentran entre los tres primeros pares de etiquetas <tr> y </tr>. De este modo, las celdas de las tres primeras filas pasarán a ser títulos de columna, por lo que el texto aparecerá centrado y en negrita. 20 Comprobar los resultados.

61 6.10 Practica. Trabajar con tablas Si no tienes abierto el Bloc de notas, ábrelo para realizar los ejercicios planteados a continuación. Práctica I: Deportes. 1 Abrir el documento donde.htm, de la carpeta deportes. 2 Modificar la página para colocar la lista de centros en una tabla como esta: 3 Rectificar la tabla para que las celdas de la primera fila sean títulos de columna. 4 Guardar los cambios y comprobar el funcionamiento en un navegador. Practica II: Deportes. 1 Abrir el documento instalaciones.htm, de la carpeta deportes. 2 Modificar la tabla que aparece para dejarla así: 3 Guardar los cambios y comprobar el funcionamiento en un navegador. Práctica III: Flores. 1 Abrir el documento productos.htm, de la carpeta originales/flores del curso. 2 Guardar la página con el mismo nombre en tu directorio de ejercicios Mis documentos/ejercicios_html/flores 3 Modificar la tabla para que la celda que contiene el texto 6 se combine con la celda que se encuentra debajo de ella. 4 Guardar los cambios y comprobar el funcionamiento en un navegador.

62 Práctica IV: Flores. 1 Abrir el documento menu.htm, de la carpeta flores. 2 Añadir una tabla para que cada palabra y la imagen ocupen el ancho de la ventana y estén equidistantes. 3 Guardar los cambios y comprobar el funcionamiento en un navegador.

63 Tema VII El Marcos En este tema vamos a ver qué son los marcos, para qué se utilizan, y cómo insertarlos. 7.1 Conjunto de marcos <frameset> Los marcos o frames sirven para distribuir mejor los datos de las páginas, ya que permiten mantener fijas algunas partes, como pueden ser el logotipo y la barra de navegación, mientras que otras sí pueden cambiar. Además de mejorar la funcionalidad, pueden mejorar también la apariencia. Cada uno de los marcos de una página, contiene un documento HTML individual. Por ejemplo, en la imagen de la derecha puedes ver una página con dos marcos. El marco izquierdo contiene el documento menu.htm y el derecho el documento perros.htm. Para poder visualizar la página de este modo, hemos tenido que abrir en el navegador el documento marcos.htm, que es el que en este caso contiene el grupo de marcos. El trabajar con marcos puede resultar una tarea algo complicada, sobretodo al principio, por lo que vemos solamente algunos conceptos básicos y ejemplos sencillos. Como hemos visto si queremos utilizar marcos debemos crear una página con la definición del conjunto de marcos (en el ejemplo anterior la página marcos.htm).

64 Los conjuntos de marcos se definen a través de las etiquetas <frameset> y </frameset>, que van después de la etiqueta <head>. A través de estas etiquetas se indica el número de marcos en que se dividirá la ventana, cada uno de los cuales será una especie de subventana. Cuando se insertan las etiquetas <frameset> y </frameset> no hay que insertar las etiquetas <body> y </body>, ya que el cuerpo del documento será el cuerpo de las páginas que se carguen en cada uno de los marcos del conjunto de marcos. Los atributos que pueden especificarse sobre la etiqueta <frameset> son los siguientes: Atributo Significado Posibles valores cols rows frameborder tamaño de cada una de las columnas en que se divide el documento tamaño de cada una de las columnas en que se divide el documento aparece o no el borde de los marcos framespacing separación entre los marcos border grosor del borde un número (acompañado de % cuando se desee que sea en porcentaje) por cada columna, separados por comas. un número (acompañado de % cuando se desee que sea en porcentaje) por cada fila, separados por comas. yes no un número un número, acompañado de % cuando se desee que sea en porcentaje bordercolor color del borde número hexadecimal También es posible incluir asteriscos como valores para los atributos cols y rows. Este valor indica que dicha fila o columna ocupará todo lo que quede de ventana o subventana. Cuando existan varias columnas o filas con este valor, se repartirán de forma equitativa lo que quede de ventana. Por ejemplo, si insertáramos la siguiente línea de código: <frameset rows= * cols= 142,*,25% >...</frameset> Como el atributo rows tiene el valor asterisco, solo habría una fila, que ocuparía todo el alto de la ventana. En este caso concreto no haría falta poner el atributo rows. Como el atributo cols tiene tres valores, estaríamos dividiendo el documento en tres columnas. La primera columna sería de 142 píxeles de ancho, la tercerá del 25% de la ventana, y la segunda columna ocuparía lo que quedará de ventana (el 75% de la ventana menos 142 píxeles). También es posible anidar marcos. Es decir, es posible dividir marcos en otros marcos. Por ejemplo, si insertáramos el siguiente código: <frameset cols= 142,* > <frameset rows= 80,* >...</frameset> <frameset cols= 25%,*,* >...</frameset> </frameset>

65 Estaríamos dividiendo el documento en dos columnas. La primera sería de 142 píxeles, y la otra abarcaría el resto de la ventana. Al mismo tiempo, la primera columna o subventana estaría dividida en dos filas o subventanas horizontales, la primera de ellas de 80 píxeles. La segunda columna o subventana de la ventana principal se dividiría a su vez en tres columnas, la primera de ellas del 25% de la subventana, y las otras dos se repartirían el resto a partes iguales (se repartirían el 75% de la subventana). Por último debemos saber que entre las etiquetas <frameset> y </frameset> sólo se pueden encontrar la etiquetas <head> <noframe> <frameset> <frame> y sus correspondientes etiquetas de cierre. 7.2 Marco <frame> Ya hemos visto cómo dividir un documento en varias subventanas o marcos, pero no hemos visto cómo hacer que se carguen las distintas páginas en cada uno de los marcos. Para indicar qué documento se cargará en cada uno de los marcos habrá que insertar la etiqueta <frame> por cada uno de los marcos de la ventana. Estas etiquetas estarán entre las etiquetas <frameset> y </frameset>, y no necesitan etiqueta de cierre. Es posible modificar los siguientes atributos de un marco: Atributo Significado Posibles valores frameborder aparece o no el borde del marco yes o 1 no o 0 name nombre del marco cualquier valor noresize si aparece, el usuario no podrá redimensionar el no puede tomar valores tamaño de este marco un número, acompañado de % anchura del margen con respecto a los bordes marginwidth cuando se desee que sea en del marco porcentaje un número, acompañado de % altura del margen con respecto a los bordes del marginheight cuando se desee que sea en marco porcentaje se mostrará o no la barra de desplazamiento yes scrolling cuando la página del marco no se pueda no visualizar completamente en él auto src documento que se cargará en el marco ruta y nombre del documento Por ejemplo, para crear un conjunto de marcos, tendriamos que escribir: <frameset cols= 150,* frameborder= yes framespacing= 3 border= 3 bordercolor= #FF9900 > <frame src= izquierdo.htm name= marcoizquierdo frameborder= no scrolling= no noresize> <frame src= derecho.htm name= marcoderecho frameborder= no

66 scrolling= auto > </frameset> Otro ejemplo de conjuntos de marcos. <frameset rows= 90,* framespacing= 3 frameborder= yes border= 3 bordercolor= #FF9900 > <frame src= superior.htm name= marcosuperior frameborder= yes scrolling= NO noresize> <frameset cols= 150,* framespacing= 3 frameborder= yes border= 3 bordercolor= #FF9900 > <frame src= izquierdo.htm name= marcoizquierdo scrolling= NO noresize> <frame src= derecho.htm name= marcoderecho > </frameset> </frameset> Esta última página está dividida en dos marcos horizontales (rows= 90,* ), estando el inferior de ellos dividido en dos marcos verticales (cols= 150,* ). 7.3 Sin marcos <noframes> Siempre que creamos una página queremos que pueda ser visitada por el mayor número de usuarios, por lo que el hecho de que hayan usuarios cuyos navegadores no soportan los marcos puede resultar un problema. Las etiquetas <noframes> y </noframes> se utilizan para que su contenido sea visualizado en aquellos navegadores que no soportan los marcos. Si un navegador no soporta los marcos, no cargará ningún documento en ningún marco, por lo que tendremos que mostrar el cuerpo del documento actual de algún modo. Por ello, han de introducirse las etiquetas <body> y </body> entre las etiquetas <noframes> y </noframes>. Por ejemplo, si escribiéramos el siguiente código: <html> <head>... </head> <frameset cols= 150,* > <frame src= izquierdo.htm name= marcoizquierdo > <frame src= derecho.htm name= marcoderecho > </frameset> <noframes> <body> Este documento tiene marcos y tu navegador no los soporta.

67 </body> </noframes> </html> Obtendríamos una página con dos marcos, que en el caso de intentar ser visualizada en un navegador que no soportase marcos, mostraría una página con el texto Este documento tiene marcos y tu navegador no los soporta. Una buena solución para que el mayor número de usuarios pueda visitar nuestra página, es crear nuevas páginas con el contenido de los documentos que deberían mostrarse en los marcos, pero que permitan pasar de unos a otros dentro de la misma ventana. De este modo, en el caso de que el navegador no soporte los marcos, podemos incluir un enlace a una de estas páginas. Por ejemplo, si escribiéramos el siguiente código:... <noframes> <body> Este documento tiene marcos y tu navegador no los soporta. <a href= sinmarcos.htm >Pulsa aqui para visualizar la página sin marcos.</a> </body> </noframes> </html> Cuando la página intentara ser visualizada en un navegador que no soportase los marcos, aparecería el enlace Pulsa aqui para visualizar la página sin marcos. a una ventana sin marcos. 7.4 Destino del enlace Como recordarás, en el tema de hipervínculos vimos los posibles destinos de los enlaces. Estos destinos podían ser _blank, _parent, _self, y _top. Vamos a recordar para qué servía cada uno de ellos, ya que ahora que sabes trabajar con marcos te serán más fáciles de entender. _blank: Abre el documento vinculado en una ventana nueva del navegador. _parent: Abre el documento vinculado en la ventana del marco que contiene el vínculo o en el conjunto de marcos padre. _self: Es la opción predeterminada. Abre el documento vinculado en el mismo marco o ventana que el vínculo. _top:

68 Abre el documento vinculado en la ventana completa del navegador, lo cual quiere decir que los marcos de la ventana desaparecerán al abrir el vínculo en ella. Además de estos destinos para los enlaces, también podrás utilizar los nombres de los distintos marcos de la página. Por ejemplo, si tuvieramos un marco con el nombre marcoderecho, podríamos insertar el enlace: <a href= target= marcoderecho >Curtec en el marco derecho</a> Este enlace cargaría la página de curtec en el marco llamado marcoderecho. Podemos añadir todos estos nuevos destinos a cualquier elemento de la página que contenga algún enlace, ya sea texto, una imágen, un mapa de imagen, un elemento Flash, etc. Gracias a todo esto podremos hacer que las barras de navegación y el resto de enlaces funcionen a nuestro antojo, cargando unas u otras páginas en alguno de los marcos, en una ventana nueva, en toda la ventana, etc. Esta tarea puede resultar algo pesada, y al principio complicada, pero da muy buenos resultados finales. 7.5 Ejercicio. Crear conjunto de marcos 1 Si no tienes abierto el Bloc de notas, ábrelo para realizar el ejercicio. 2 Abre el documento marcos.htm, de la carpeta originales/animales del curso. 3 Guarda la página con el mismo nombre en tu directorio de ejercicios Mis documentos/ejercicios_html/animales 4 Inserta una línea en blanco debajo de la etiqueta </head>, y escribe el siguiente código en ella: <frameset rows= * cols= 142,* framespacing= 0 frameborder= NO border= 0 > <frame src= menu.htm name= marcoizquierdo frameborder= no

69 scrolling= NO noresize> <frame src= inicio.htm name= marcoderecho frameborder= no > </frameset> Con la primera línea, estarás creando dos marcos en la página. El primero será de 142 píxeles, y el otro ocupará el resto de la ventana del navegador. Los marcos se distribuirán en forma de columna (cols= 142,* ). No habrá espacio entre los marcos (framespacing= 0 ), ni se mostrarán sus bordes (frameborder= NO border= 0 ). Con la segunda línea, estarás especificando las propiedades del primer marco. Este marco se llamará marcoizquierdo, no se mostrarán sus bordes (frameborder= no ), y el usuario no podrá modifciar su tamaño (noresize). En este marco se cargará el documento menu.htm, y cuando éste no pueda ser mostrado en su totalidad, no aparecerán las barras de desplazamiento (scrolling= NO ). Con la tercera línea, estarás especificando las propiedades del segundo marco. Este marco se llamará marcoderecho, y no se mostrarán sus bordes (frameborder= no ). En este marco se cargará el documento inicio.htm. 5 Inserta una línea en blanco debajo de la etiqueta </frameset>, y escribe el siguiente código en ella: <noframes> <body bgcolor= #99CC99 > Esta página tiene marcos, y tu navegador no los soporta </body> </noframes> Este código será el utilizado por los navegadores que no soportan los marcos. Cuando un navegador no soporte los marcos, mostrará una página de color verde (<body bgcolor= #99CC99 >), con el texto Esta página tiene marcos, y tu navegador no los soporta. 6 Haz clic sobre el menú Archivo. 7 Haz clic sobre la opción Guardar. 8 Abre el documento marcos.htm, que acabas de guardar, en un navegador.

70 7.6 Práctica: Configurar marcos Si no tienes abierto el Bloc de notas, ábrelo para realizar los ejercicios planteados a continuación. Práctica I: Deportes. 1 Abrir el documento marcos.htm, de la carpeta originales/deportes del curso. 2 Guardar la página con el mismo nombre en tu directorio de ejercicios Mis documentos/ejercicios_html/deportes 3 Modificar el conjunto de marcos para que se muestre un borde de 2 píxeles de color #CCFF99. 4 Guardar los cambios y comprobar el funcionamiento en un navegador. Práctica II: Flores. 1 Crear el documento marcos.htm en la carpeta Mis documentos/ejercicios_html/flores. Esta página contendrá un conjunto de marcos para que en la parte superior de la ventana se visualice la página menu.htm y en el resto de la ventana se visualice la página inicio.htm. El marco superior tendrá un alto de 100 píxeles.

71 Capitulo VIII Los Formularios En este tema vamos a ver qué son los formularios, para qué se utilizan, y qué elementos pueden contener. 8.1 Formulario <form> Un formulario es un elemento que permite recoger datos introducidos por el usuario. Los formularios se utilizan para conocer las opiniones, dudas, y otra serie de datos sobre los usuarios, para introducir pedidos a través de la red, tienen multitud de aplicaciones. Un formulario está formado, entre otras cosas, por etiquetas, campos de texto, menús desplegables, y botones. Es muy recomendable utilizar tablas para organizar los elementos de los formularios. Utilizando tablas se consigue una mejor distribución de los elementos del formulario, lo que facilita su comprensión y mejora su apariencia. Los formularios se insertan a través de las etiquetas <form> y </form>. Entre dichas etiquetas habrá que insertar los diferentes objetos que formarán el formulario. La etiqueta <form> tiene los siguientes atributos: El atributo action indica una dirección de correo electrónico a la que mandar el formulario, o la dirección del programa que se encargará de procesar el contenido del formulario.

72 El atributo enctype indica el modo en que será cifrada la información para su envío. Por defecto tiene el valor application/x-www-form-urlencoded. El atributo method indica el metodo mediante el que se transferirán las variables del formulario. Su valor puede ser get o post. El valor get se utiliza cuando no se van a producir cambios en ningún documento o programa que no sea el navegador del usuario que pretende mandar el formulario, como ocurre cuando se realizan consultas sobre una base de datos. El valor post se utiliza cuando sí se van a producir cambios, como ocurre cuando el usuario manda datos que deben ser almacenados en una base de datos. Se recomienda utilizar el valor post. Por ejemplo, podríamos insertar un formulario escribiendo el siguiente código: <form action= mailto:formularios@curtec.com method= post enctype= text/plain >... </form> A continuación veamos los distintos elementos que se pueden incluir en un formulario. 8.2 Áreas de texto <textarea> Las áreas de texto permiten a los usuarios insertar varias líneas de texto. Por ello, suelen utilizarse para que incluyan comentarios. Para insertar un área de texto es necesario incluir las etiquetas <textarea> y </textarea> entre las etiquetas <form> y </form> del formulario. Para que el área de texto tenga algún valor inicial, habrá que insertarlo entre las etiquetas <textarea> y </textarea>. El atributo name indica el nombre del área de texto. Es necesario dar nombres diferentes a cada uno de los elementos de un formulario, para poder identificarlos a la hora de procesarlos. El atributo rows indica el número de líneas que podrán ser visualizadas en el área de texto por lo que determina al alto del área de texto. El atributo cols indica el número de caracteres por línea que podrán ser visualizados en el área de texto por lo que determina al ancho del área de texto. Gracias a las barras de desplazamiento, es posible insertar más líneas de las especificadas en el atributo rows, y más caracteres por línea de los especificados en el atributo cols. Por ejemplo, para insertar el área de texto:

73 Escribe el texto que quieras Habría que escribir: <textarea name= ejemploarea cols= 30 rows= 3 >Escribe el texto que quieras</textarea> 8.3 Elementos de entrada <input> Para insertar un elemento de entrada es necesario incluir la etiqueta <input> entre las etiquetas <form> y </form> del formulario. El atributo name indica el nombre que se desea dar al elemento de entrada, mediante el cual será evaluado, y el atributo type indica el tipo de elemento de entrada. Vamos a ver los diferentes tipos de elementos de entrada, y el resto de atributos que pueden definirse para cada uno de ellos. 8.4 Campo de texto: Para insertar un campo de texto, el atributo type debe tener el valor text. El atributo size indica el número de caracteres que podrán ser visualizados en el campo de texto, determina el ancho de la caja. El atributo maxlenght indica el número de caracteres que podrán ser insertados en el campo de texto. El atributo value indica el valor inicial del campo de texto. Por ejemplo, para insertar el campo de texto: Campo de texto Habría que escribir: <input name= campo type= text value= Campo de texto size= 20 maxlength= 15 > 8.5 Campo de contraseña: Para insertar un campo de contraseña, el atributo type debe tener el valor password.

74 El resto de atributos son los mismos que para un campo de texto normal. La única diferencia es que todas las letras escritas en el campo de contraseña serán visualizadas como asteriscos. Por ejemplo, para insertar el campo de contraseña: ********** Habría que escribir: <input name= contra type= password value= contraseña size= 20 maxlength= 15 > 8.6 Los Botónes: Para insertar un botón, el atributo type debe tener el valor submit, restore o button. Si el valor es submit, al pulsar sobre el botón se enviará el formulario. Si el valor es restore, al pulsar sobre el botón se restablecerá el formulario, borrándose todos los campos del formulario que hayan sido modificados y adquiriendo su valor inicial. Si el valor es button, al pulsar sobre el botón no se realizará ninguna acción. El atributo value indica el texto que mostrará el botón. Por ejemplo, para insertar el botón: Habría que escribir: <input name= boton type= submit value= Enviar > 8.7 Casilla de verificación Para insertar una casilla de verificación, el atributo type debe tener el valor checkbox. El atributo value indica el valor asociado a la casilla de verificación. Es necesario poner este atributo, aunque el usuario no pueda ver su valor. Es el valor a enviar. La aparición del atributo checked indica que la casilla aparecerá activada inicialmente. Este atributo no toma valores. Por ejemplo, para insertar la casilla: Habría que escribir:

75 <input name= casilla type= checkbox value= acepto checked> 8.8 Botón de opción Para insertar un botón de opción, el atributo type debe tener el valor radio. El atributo value indica el valor asociado al botón de opción. Es necesario poner este atributo, aunque el usuario no pueda ver su valor. Es el valor a enviar. La aparición del atributo checked indica que el botón aparecerá activado inicialmente. Este atributo no toma valores. Los botones de opción se utilizan cuando se desea que una variable del formulario pueda tomar un solo valor de entre varios posibles. Para ello, se insertan varios botones de opción con el mismo nombre (que indica la variable) y con distintos valores. Sólamente uno de estos botones podrá estar activado, el que esté activado cuando se envia el formulario, su valor será el que tendrá la variable. Por ejemplo, para insertar los botones de opción: Habría que escribir: <input name= prefiere type= radio value= estudiar checked> <input name= prefiere type= radio value= trabajar > Cuando se envíe el formulario, si el primer botón está activado la variable prefiere será igual a estudiar, si es el segundo el activado, la variable prefiere valdrá trabajar. Observa que lo que ponemos como valor no aparece escrito en la página es un dato interno. Existen otros tipos como el tipo hidden que sirve para definir un campo oculto, campo que no ve el usuario, en este caso habría que incluir el atributo value para que el formulario pase ese valor al programa que recoge los datos del formulario. Para que el usuario envie un fichero suyo a través del formulario tenemos el tipo file, este tipo hay que utilizarlo con mucho cuidado ya que si permitimos que cualquier internauta nos envie cualquier tipo de fichero nos podríamos encontrar con sorpresas no siempre agradables. 8.9 Campos de selección <select>... Los campos de selección se utilizan para insertar menús y listas desplegables. Para insertar uno de estos menús o listas es necesario insertar las etiquetas <select> y </select> en un formulario.

76 El atributo name indica el nombre del menú o lista será el nombre de la variable que contendrá el valor seleccionado. El atributo size indica el número de elementos de la lista que pueden ser visualizados al mismo tiempo, determina el alto de la lista. La aparición del atributo multiple indica que el usuario podrá seleccionar varios elementos de la lista al mismo tiempo, ayudándose de la tecla Ctrl. Este atributo no toma valores. La aparición del atributo disabled indica que la lista estará desactivada, por lo que el usuario no podrá seleccionar sus elementos. Este atributo tampoco toma valores. Cada uno de los elementos de la lista ha de insertarse entre las etiquetas <option> y </option>. El atributo value indica el valor a enviar si se selecciona el elemento. Si no se especifica este atributo, se enviará el texto de la opción, que se encuentra entre las etiquetas <option> y </option>. La aparición del atributo selected indica que el elemento aparecerá seleccionado. Este atributo no toma valores. Por ejemplo, para insertar el menú: --- Elige mascota --- Habría que escribir: <select name= mascota > <option selected>--- Elige animal ---</option> <option>perro</option> <option>gato</option> </select> Y para insertar la lista: ---Elige animales--- Loro Perro Habría que escribir: <select name= animal size= 3 multiple> <option selected>---elige animales---</option> <option value= ave >Loro</option> <option>perro</option> <option>gato</option>

77 <option>pez</option> </select> 8.10 Ejercicio: Insertar objetos de formulario 1 Si no tienes abierto el Bloc de notas, ábrelo para realizar el ejercicio. 2 Abre el documento consultas.htm, de la carpeta originales/animales del curso. 3 Guarda la página con el mismo nombre en tu directorio de ejercicios Mis documentos/ejercicios_html/animales 4 Busca la línea <td>campo de seleccion</td>, y borra el texto Campo de seleccion. En su lugar, escribe el siguiente código: <select name= animal > <option selected>--- Elige opción ---</option> <option>perro</option> <option>gato</option> <option>otros</option> </select> Con este código estarás insertando un menú, llamado animal, que tendrá cuatro opciones (--- Elige opción ---, Perro, Gato, Otros). La opción seleccionada inicialmente será la primera (selected). 5 Inserta una línea en blanco debajo de la línea <input name= restablecer type= reset value= Restablecer >, y escribe el siguiente código en ella: <input name= enviar type= submit value= Enviar > Con este código, estarás insertando un botón para enviar el formulario (type= submit ), cuyo nombre será enviar, y que tendrá el texto Enviar. 6 Haz clic sobre el menú Archivo. 7 Haz clic sobre la opción Guardar. 8 Abre el documento consultas.htm, que acabas de guardar, en un navegador Practica. Insertar elementos de formulario Si no tienes abierto el Bloc de notas, ábrelo para realizar los ejercicios planteados a continuación. Práctica I: Deportes. 1 Abrir el documento reservas.htm, de la carpeta originales/deportes del curso.

78 2 Guardar la página con el mismo nombre en tu directorio de ejercicios Mis documentos/ejercicios_html/deportes En dicho documento hay dos botones de opción. 3 Modificar el primer botón de opción para que tenga el valor si, y esté activado inicialmente. 4 Modificar el segundo botón de opción para que tenga el valor no. 5 Guardar los cambios y comprobar el funcionamiento en un navegador. Practica II: Flores. 1 Abrir el documento pedidos.htm, de la carpeta originales/flores del curso. 2 Guardar la página con el mismo nombre en tu directorio de ejercicios Mis documentos/ejercicios_html/flores 3 Añadir el formulario que aparece a continuación. El elemento de entrada llamado cuenta debe ser un campo de contraseña, que permita escribir y mostrar a la vez 20 caracteres. 4 Guardar los cambios y comprobar el funcionamiento en un navegador.