Programacin IV

HTML Bsico, Hojas de Estilo y JAVASCRIPT Ingeniera de Sistemas Computacionales Universidad Tecnolgica Costarricense

PROGRAMACIN WEB BSICO

Tomado de varios documentos publicados en la Internet

Contenido
HTML ......................................................................................................................... 13 1. Qu es HTML?...................................................................................................... 13 2. Estructura interna de una pgina HTML. .............................................................. 13 Ejemplo: .................................................................................................................. 14 Practica: .................................................................................................................. 14 3. Salto de lnea <br> ............................................................................................... 14 Ejemplo: .................................................................................................................. 15 Practica: .................................................................................................................. 15 4. Prrafo <p> .......................................................................................................... 15 Ejemplo: .................................................................................................................. 16 Practica: .................................................................................................................. 16 5. Ttulos <h1><h2><h3><h4><h5><h6> .................................................................. 17 Ejemplo: .................................................................................................................. 17 Practica: .................................................................................................................. 18 6. Enfasis (<em> <strong>) ....................................................................................... 18 Ejemplo: .................................................................................................................. 19 Practica: .................................................................................................................. 19 7. Hipervnculo a otra pgina del mismo sitio <a> .................................................... 19 Ejemplo: .................................................................................................................. 20 Practica: .................................................................................................................. 20 8. Hipervnculo a otro sitio de internet <a> .............................................................. 21 Ejemplo: .................................................................................................................. 21 Practica: .................................................................................................................. 22 9. Imgenes dentro de una pgina <img> ................................................................ 22 Ejemplo: .................................................................................................................. 23 Practica: .................................................................................................................. 23 10. Hipervnculo mediante una imagen <a> e <img> .............................................. 23 Ejemplo: .................................................................................................................. 24 Practica: .................................................................................................................. 24 11. Apertura de un hipervnculo en otra instancia del navegador. .......................... 24 Ejemplo: .................................................................................................................. 25 Practica: .................................................................................................................. 25 12. Hipervnculo a un cliente de correo <a> ........................................................... 25 Ejemplo: .................................................................................................................. 26 Practica: .................................................................................................................. 26 13. Anclas llamadas desde la misma pgina............................................................ 26 Ejemplo: .................................................................................................................. 28

Pgina 2

Practica ................................................................................................................... 29 14. Anclas llamadas desde otra pgina. .................................................................. 29 Ejemplo: .................................................................................................................. 31 Practica: .................................................................................................................. 32 15. Lista ordenada (<ol>) ........................................................................................ 33 Ejemplo: .................................................................................................................. 33 Practica: .................................................................................................................. 33 16. Lista no ordenada (<ul>) ................................................................................... 33 Ejemplo: .................................................................................................................. 34 Practica: .................................................................................................................. 34 17. Lista de definiciones (<dl>) ............................................................................... 34 Ejemplo: .................................................................................................................. 35 Practica: .................................................................................................................. 36 18. Listas anidadas. ................................................................................................ 36 Ejemplo: .................................................................................................................. 36 Practica: .................................................................................................................. 37 19. Tabla (<table><tr><td>) .................................................................................... 37 Ejemplo: .................................................................................................................. 38 Practica: .................................................................................................................. 38 20. Tabla con encabezado (<th>) ............................................................................ 38 Ejemplo: .................................................................................................................. 39 Practica: .................................................................................................................. 40 21. Tabla con ttulo (<caption>) .............................................................................. 40 Ejemplo: .................................................................................................................. 40 Practica: .................................................................................................................. 41 22. Tabla y combinacin de celdas. ........................................................................ 41 Ejemplo: .................................................................................................................. 42 Practica: .................................................................................................................. 42 23. Contenido de la cabecera de la pgina (<title>) ................................................ 42 Ejemplo: .................................................................................................................. 43 Practica: .................................................................................................................. 43 24. 25. Contenido de la cabecera de la pgina (<meta>) .............................................. 43 Comentarios dentro de una pgina <!-- --> ....................................................... 44 Ejemplo: .................................................................................................................. 44 Ejemplo: .................................................................................................................. 45 Practica: .................................................................................................................. 45 26. Sintaxis para caracteres especiales. .................................................................. 46 Ejemplo: .................................................................................................................. 46

Pgina 3

Practica: .................................................................................................................. 46 27. Formulario - <form> ......................................................................................... 46 Ejemplo: .................................................................................................................. 48 Practica: .................................................................................................................. 48 28. Formulario - input type="text"/ input type="password" ................................... 48 Ejemplo: .................................................................................................................. 49 Practica: .................................................................................................................. 49 29. Formulario - textarea ....................................................................................... 49 Ejemplo: .................................................................................................................. 50 Practica: .................................................................................................................. 50 30. 31. Formulario - input type="checkbox" ................................................................. 51 Formulario - input type="radio" ....................................................................... 52 Ejemplo: .................................................................................................................. 51 Ejemplo: .................................................................................................................. 52 Practica: .................................................................................................................. 53 32. Formulario - select (cuadro de seleccin individual) ......................................... 53 Ejemplo: .................................................................................................................. 54 Practica: .................................................................................................................. 54 33. Formulario - select (cuadro de seleccin mltiple) ........................................... 55 Ejemplo: .................................................................................................................. 55 Practica: .................................................................................................................. 56 34. Formulario - select (agrupamiento de opciones) .............................................. 56 Ejemplo: .................................................................................................................. 57 Practica: .................................................................................................................. 57 35. Formulario - button .......................................................................................... 57 Ejemplo: .................................................................................................................. 58 Practica: .................................................................................................................. 58 36. Formulario - input type="button" ..................................................................... 59 Ejemplo: .................................................................................................................. 59 Practica: .................................................................................................................. 60 37. Formulario - input type="file" ........................................................................... 60 Ejemplo: .................................................................................................................. 61 Practica: .................................................................................................................. 61 38. 39. Formulario - input type="hidden"..................................................................... 61 Formulario - agrupamiento de controles. ......................................................... 62 Ejemplo: .................................................................................................................. 62 Ejemplo: .................................................................................................................. 63 Practica: .................................................................................................................. 63

Pgina 4

40. 41.

Formulario - controles con valores iniciales. ..................................................... 63 Formulario - orden de foco de controles. ......................................................... 65

Practica: .................................................................................................................. 65 Ejemplo: .................................................................................................................. 66 Practica: .................................................................................................................. 67 42. Formulario - Inhabilitar controles. .................................................................... 67 Ejemplo: .................................................................................................................. 67 Practica: .................................................................................................................. 68 43. Formulario - text/password y maxlength .......................................................... 68 Ejemplo: .................................................................................................................. 68 Practica: .................................................................................................................. 69 44. 45. Formulario - text/password/textarea y readonly .............................................. 69 Formulario - Envo de datos mediante mail. ..................................................... 70 Practica: .................................................................................................................. 70 Ejemplo: .................................................................................................................. 71 Practica: .................................................................................................................. 71 46. Formulario - label ............................................................................................. 71 Ejemplo: .................................................................................................................. 73 Practica: .................................................................................................................. 73 47. Frames ............................................................................................................. 73 Ejemplo: .................................................................................................................. 74 Practica: .................................................................................................................. 75 48. Frames - Actualizacin de un frame a partir del enlace de otro frame .............. 75 Ejemplo: .................................................................................................................. 76 Practica: .................................................................................................................. 77 49. Frames - Asignacin de medidas en pxeles ...................................................... 77 Ejemplo: .................................................................................................................. 78 Practica: .................................................................................................................. 79 50. Frames - Propiedades del elemento frame ....................................................... 79 Ejemplo: .................................................................................................................. 82 Practica: .................................................................................................................. 84 51. Frames - Anidamiento de frameset .................................................................. 84 Ejemplo: .................................................................................................................. 86 Practica: .................................................................................................................. 87 52. iframes ............................................................................................................. 88 Ejemplo: .................................................................................................................. 89 Practica: .................................................................................................................. 90 53. Declaracin DOCTYPE. ...................................................................................... 90

Pgina 5

54.

Declaracin DOCTYPE. HTML Transitional......................................................... 91

Ejemplo: .................................................................................................................. 92 Practica: .................................................................................................................. 92 55. Declaracin DOCTYPE. HTML Estricto ............................................................... 92 Ejemplo: .................................................................................................................. 95 Practica: .................................................................................................................. 95 56. Declaracin DOCTYPE. para Frames .................................................................. 95 Ejemplo: .................................................................................................................. 97 Practica: .................................................................................................................. 98 57. 58. Validacin de la pgina a travs de un enlace. .................................................. 98 Elementos HTML <div> y <span> ...................................................................... 99 Ejemplo: .................................................................................................................. 98 Ejemplo: ................................................................................................................ 100 Practica: ................................................................................................................ 101 59. Elementos y propiedades de HTML que no se deben usar .............................. 101 CSS ........................................................................................................................... 103 1. Que son las hojas de estilo (CSS)? .................................................................... 103 Ejemplo: ................................................................................................................ 103 2. Definicin de estilos a nivel de marca HTML. ..................................................... 103 Ejemplo: ................................................................................................................ 104 Practica: ................................................................................................................ 104 3. Definicin de estilos a nivel de pgina................................................................ 105 Ejemplo: ................................................................................................................ 105 Practica: ................................................................................................................ 106 4. Propiedades relacionadas a fuentes. .................................................................. 106 Ejemplo: ................................................................................................................ 107 Practica: ................................................................................................................ 108 5. Agrupacin de varias marcas HTML con una misma regla de estilo. ................... 108 Ejemplo: ................................................................................................................ 108 Practica: ................................................................................................................ 109 6. Definicin de varias reglas para una misma marca HTML. .................................. 109 Ejemplo: ................................................................................................................ 110 Practica: ................................................................................................................ 110 7. 8. Propiedades relacionadas al texto...................................................................... 111 Ejemplo: ................................................................................................................ 112 Ms propiedades relacionadas al texto. ............................................................. 113 Ejemplo: ................................................................................................................ 114 Practica: ................................................................................................................ 115

Pgina 6

9.

Herencia de propiedades de estilo. .................................................................... 115 Ejemplo: ................................................................................................................ 116 Practica: ................................................................................................................ 117

10.

Definicin de un estilo en funcin del contexto. ............................................. 118

Ejemplo: ................................................................................................................ 119 Practica: ................................................................................................................ 120 11. 12. Definicin de hojas de estilo en un archivo externo. ....................................... 120 Definicin de estilos por medio de clases. ...................................................... 122 Ejemplo: ................................................................................................................ 121 Ejemplo: ................................................................................................................ 123 Practica 1: ............................................................................................................. 123 Practica 2: ............................................................................................................. 124 13. Definicin de estilos por medio de Id.............................................................. 124 Ejemplo: ................................................................................................................ 125 Practica: ................................................................................................................ 125 14. Propiedades relacionadas al borde de una marca HTML. ................................ 125 Ejemplo: ................................................................................................................ 126 Practica: ................................................................................................................ 127 15. Ms propiedades relacionadas al borde de una marca HTML ......................... 127 Ejemplo: ................................................................................................................ 128 Practica: ................................................................................................................ 128 16. Propiedades relacionadas al padding de una marca HTML. ............................ 129 Ejemplo: ................................................................................................................ 130 Practica: ................................................................................................................ 130 17. Propiedades relacionadas al margen de una marca HTML. ............................. 130 Ejemplo: ................................................................................................................ 131 Practica: ................................................................................................................ 132 18. Propiedades relacionadas a listas. .................................................................. 132 Ejemplo: ................................................................................................................ 133 Practica: ................................................................................................................ 135 19. Propiedades relacionadas al fondo (background) ........................................... 135 Ejemplo: ................................................................................................................ 136 Practica: ................................................................................................................ 137 20. Propiedades relacionadas a fuentes (FORMATO RESUMIDO) ......................... 137 Ejemplo: ................................................................................................................ 138 Practica: ................................................................................................................ 138 21. Propiedades relacionadas al border (FORMATO RESUMIDO) .......................... 138 Ejemplo ................................................................................................................. 139

Pgina 7

Practica: ................................................................................................................ 139 22. Propiedades relacionadas al padding (FORMATO RESUMIDO) ........................ 139 Ejemplo: ................................................................................................................ 140 Practica: ................................................................................................................ 140 23. Propiedades relacionadas al margin (FORMATO RESUMIDO) ......................... 140 Ejemplo: ................................................................................................................ 141 Practica: ................................................................................................................ 141 24. Propiedades relacionadas al fondo (background)(FORMATO RESUMIDO) ...... 141 Ejemplo: ................................................................................................................ 142 Practica: ................................................................................................................ 142 25. El selector universal * ..................................................................................... 142 Ejemplo: ................................................................................................................ 143 Practica: ................................................................................................................ 144 26. Pseudoclases .................................................................................................. 144 Ejemplo: ................................................................................................................ 145 Practica: ................................................................................................................ 145 27. Eliminar el subrayado a un enlace por medio de las pseudoclases .................. 146 Ejemplo: ................................................................................................................ 146 Practica: ................................................................................................................ 146 28. Creacin de un men vertical configurando las pseudoclases. ........................ 147 Ejemplo: ................................................................................................................ 148 Practica: ................................................................................................................ 149 29. Creacin de un men horizontal con una lista. ............................................... 149 Ejemplo: ................................................................................................................ 150 Practica: ................................................................................................................ 151 30. Propiedades relacionadas a la dimensin de un objeto en la pgina............... 151 Ejemplo: ................................................................................................................ 152 Practica: ................................................................................................................ 152 31. Unidades de medida (px, cm, mm, em etc.) .................................................... 152 Ejemplo: ................................................................................................................ 154 Practica: ................................................................................................................ 155 32. Formas para indicar el color. .......................................................................... 156 Ejemplo: ................................................................................................................ 156 Practica: ................................................................................................................ 156 33. Definir un cursor para un control HTML.......................................................... 157 Ejemplo: ................................................................................................................ 157 Practica: ................................................................................................................ 158 34. Aplicacin de hojas de estilo a un formulario. ................................................ 158

Pgina 8

Ejemplo: ................................................................................................................ 159 Practica: ................................................................................................................ 160 35. Definiendo reglas de estilo a una tabla. .......................................................... 160 Ejemplo: ................................................................................................................ 161 Practica: ................................................................................................................ 162 36. Posicionamiento relativo. ............................................................................... 162 Ejemplo: ................................................................................................................ 163 Practica: ................................................................................................................ 164 37. Posicionamiento absoluto. ............................................................................. 164 Ejemplo: ................................................................................................................ 165 Practica: ................................................................................................................ 166 38. Disposicin de 2 columnas. ............................................................................ 166 Ejemplo: ................................................................................................................ 167 Practica: ................................................................................................................ 168 39. Propiedad float aplicada a una imagen. .......................................................... 169 Ejemplo: ................................................................................................................ 169 Practica: ................................................................................................................ 170 40. Disposicin de 2 columnas (propiedad float) .................................................. 170 Ejemplo: ................................................................................................................ 171 Practica: ................................................................................................................ 174 41. Disposicin de 2 columnas, cabecera y pie. .................................................... 174 Ejemplo: ................................................................................................................ 175 Practica: ................................................................................................................ 176 42. Disposicin de 3 columnas, cabecera y pie. .................................................... 176 Ejemplo: ................................................................................................................ 178 Practica: ................................................................................................................ 179 JavaScript ................................................................................................................. 180 1. Conceptos de Algoritmo, Programa y Lenguaje de Programacin. ..................... 180 2. Qu es JavaScript? ............................................................................................. 180 Ejemplo: ................................................................................................................ 181 Practica: ................................................................................................................ 181 3. Variables. ........................................................................................................... 181 Ejemplo: ................................................................................................................ 183 Practica: ................................................................................................................ 183 4. Entrada de datos por teclado. ............................................................................ 183 Ejemplo: ................................................................................................................ 184 Practica: ................................................................................................................ 184 5. Estructuras secuenciales de programacin......................................................... 184 Ejemplo: ................................................................................................................ 185

Pgina 9

Practica: ................................................................................................................ 185 6. Estructuras condicionales simples. ..................................................................... 186 Ejemplo: ................................................................................................................ 187 Practica: ................................................................................................................ 187 7. Estructuras condicionales compuestas. .............................................................. 187 Ejemplo: ................................................................................................................ 188 Practica: ................................................................................................................ 189 8. Estructuras condicionales anidadas.................................................................... 189 Ejemplo: ................................................................................................................ 190 Practica: ................................................................................................................ 191 9. Operadores lgicos && (y) en las estructuras condicionales............................... 191 Ejemplo: ................................................................................................................ 192 Practica: ................................................................................................................ 193 10. Operadores lgicos || (o) en las estructuras condicionales. ........................... 193 Ejemplo: ................................................................................................................ 193 Ejemplo: ................................................................................................................ 194 Practica: ................................................................................................................ 194 11. Estructuras switch. ......................................................................................... 194 Ejemplo: ................................................................................................................ 195 Practica: ................................................................................................................ 196 12. Estructura repetitiva (while) ........................................................................... 196 Ejemplo: ................................................................................................................ 197 Ejemplo: ................................................................................................................ 198 Practica: ................................................................................................................ 198 13. Concepto de acumulador. .............................................................................. 199 Ejemplo: ................................................................................................................ 199 Practica: ................................................................................................................ 200 14. Estructura repetitiva (do/while) ..................................................................... 201 Ejemplo: ................................................................................................................ 201 Ejemplo: ................................................................................................................ 201 Practica: ................................................................................................................ 202 15. Estructura repetitiva (for) ............................................................................... 202 Ejemplo: ................................................................................................................ 204 Practica: ................................................................................................................ 204 16. 17. Funciones ....................................................................................................... 205 Funciones con parmetros. ............................................................................ 207 Ejemplo: ................................................................................................................ 206 Ejemplo: ................................................................................................................ 207 Practica: ................................................................................................................ 208

Pgina 10

18.

Funciones que retornan un valor. ................................................................... 208

Ejemplo: ................................................................................................................ 210 Practica: ................................................................................................................ 211 19. 20. Programacin orientada a objetos.................................................................. 212 Clase Date ...................................................................................................... 213

Ejemplo: ................................................................................................................ 214 Ejemplo: ................................................................................................................ 214 21. Clase Array ..................................................................................................... 215 Ejemplo 1: ............................................................................................................. 215 Ejemplo: ................................................................................................................ 217 Practica: ................................................................................................................ 218 22. Clase Math ..................................................................................................... 218 Ejemplo: ................................................................................................................ 219 Ejemplo: ................................................................................................................ 219 23. Clase String..................................................................................................... 219 Ejemplo: ................................................................................................................ 221 Practica: ................................................................................................................ 221 24. Formularios y Eventos. ................................................................................... 222 Ejemplo: ................................................................................................................ 223 Practica: ................................................................................................................ 223 25. Controles FORM, BUTTON y TEXT. .................................................................. 223 Ejemplo: ................................................................................................................ 224 Practica: ................................................................................................................ 224 26. Control PASSWORD ........................................................................................ 225 Ejemplo: ................................................................................................................ 225 Ejemplo: ................................................................................................................ 225 Practica: ................................................................................................................ 226 27. Control SELECT ............................................................................................... 226 Ejemplo: ................................................................................................................ 227 Practica: ................................................................................................................ 228 28. Control CHECKBOX ......................................................................................... 228 Ejemplo: ................................................................................................................ 229 Practica: ................................................................................................................ 230 29. Control RADIO ................................................................................................ 230 Ejemplo: ................................................................................................................ 230 Practica: ................................................................................................................ 231 30. 31. Control TEXTAREA .......................................................................................... 231 Eventos onFocus y onBlur............................................................................... 232 Ejemplo: ................................................................................................................ 232

Pgina 11

Ejemplo: ................................................................................................................ 233 Practica: ................................................................................................................ 233 32. Eventos onMouseOver y onMouseOut ........................................................... 233 Ejemplo: ................................................................................................................ 234 Practica: ................................................................................................................ 235 33. 34. Evento onLoad ............................................................................................... 235 El objeto window............................................................................................ 236 Practica: ................................................................................................................ 236 Ejemplo: ................................................................................................................ 238 Practica: ................................................................................................................ 239 35. 36. Propiedad location del objeto window ........................................................... 239 Propiedad history del objeto window ............................................................. 241 Practica: ................................................................................................................ 241 Ejemplo: ................................................................................................................ 242 Practica: ................................................................................................................ 243 37. Propiedad screen del objeto window ............................................................. 243 Ejemplo: ................................................................................................................ 244 Practica: ................................................................................................................ 244 38. 39. Propiedad navigator del objeto window ......................................................... 245 Archivo JavaScript externo (*.js) ..................................................................... 246 Practica: ................................................................................................................ 245 Ejemplo: ................................................................................................................ 246 Practica: ................................................................................................................ 247 40. Programacin orientada a objetos en JavaScript. ........................................... 247 Ejemplo: ................................................................................................................ 249 Practica: ................................................................................................................ 250 41. Definicin de varias clases. ............................................................................. 250 Ejemplo: ................................................................................................................ 251 Practica: ................................................................................................................ 252 42. Vectores con componentes de tipo objeto. .................................................... 252 Ejemplo: ................................................................................................................ 253 Practica: ................................................................................................................ 254

Pgina 12

El Lenguaje Hyper Text Mark Language HTML

1. Qu es HTML?
HTML es el lenguaje que se emplea para el desarrollo de pginas de internet. Este lenguaje est constituido de elementos que el navegador interpreta y las despliega en la pantalla de acuerdo a su objetivo. Veremos que hay elementos para disponer imgenes sobre una pgina, hipervnculos que nos permiten dirigirnos a otra pgina, listas, tablas para tabular datos, etc. Para poder crear una pgina HTML se requiere un simple editor de texto y un navegador de internet (IExplorer, FireFox etc.). Lo ms importante es que en cada concepto desarrolle los ejercicios propuestos y modifique los que se presentan ya resueltos. Este curso lo que busca es acercar el lenguaje HTML a una persona que nunca antes trabaj con el mismo. No pretende mostrar todos los elementos HTML en forma alfabtica. Como veremos, de cada concepto se presenta una parte terica, en la que se da una explicacin completa, luego se pasa a la seccin del ejercicio resuelto donde podemos ver el contenido de la pgina HTML y cmo la visualiza el navegador. Por ltimo y tal vez la seccin ms importante de este tutorial es donde se propone que usted haga pginas en forma autnoma (donde realmente podr darse cuenta si el concepto qued firme).

2.

Estructura interna de una pgina HTML.

Las instrucciones HTML estn encerradas entre los caracteres: < y >. Muchos elementos HTML requieren una marca de comienzo y otra de finalizacin. Todo aquello que est fuera de las marcas del lenguaje se imprime en la pantalla (dentro del navegador). La estructura bsica de una pgina HTML es:
<html> <head> </head> <body> Cuerpo de la pgina. </body> </html>

Una pgina HTML es un archivo que generalmente tiene como extensin los caracteres html. Por ejemplo podemos llamar a nuestra primer pgina con el nombre: pagina1.html

Pgina 13

Durante este curso no necesitar utilizar otra herramienta ms que este sitio. Veremos que contamos con una ventana donde tipear la pgina y en otra ver los resultados que genera el navegador. No significa que no pueda hacerse una copia de los ejercicios que desarrolla y almacenarlos en su computadora. Estos son los elementos bsicos que toda pgina HTML debe llevar. Si observamos toda pgina comienza con la marca:<html> y finaliza con la marca:</html> Los fines de marcas tienen el mismo nombre que el comienzo de marca, ms el caracter / Una pgina HTML tiene dos secciones muy bien definidas que son la cabecera:
<head> </head>

Y el cuerpo de la pgina:
<body> Cuerpo de la pgina. </body>

Todo el texto que dispongamos dentro del <body> aparece dentro del navegador tal cual lo hayamos escrito. Todas las pginas tiene como mnimo esta estructura: cabecera y cuerpo. Otra cosa importante es que el lenguaje HTML no es sensible a maysculas y minsculas, es decir podemos escribirlo como ms nos guste, adems no requiere que dispongamos cada marca en una lnea (podramos inclusive escribir toda la pgina en una sola lnea! cosa que no conviene ya que somos nosotros quienes tendremos que modificarla en algn momento). Ahora puede ir a la seccin de problema resuelto y ver el ejemplo ejecutndose en el navegador. Podr ver la pantalla dividida en tres partes: primero se enuncia el problema, la segunda parte es el editor donde tipeamos la solucin al problema (en este caso ya est resuelto por lo que aparece automticamente) y la ltima seccin de la pantalla muestra la pgina ejecutndose en el navegador. Por ltimo deber resolver un problema, es decir confeccionar una pgina HTML. Recomiendo tipear las marcas HTML para aprenderlas de memoria. No es conveniente copiar y pegar. Cuando recuerde todas las marcas, podr copiar y pegar trozos de pginas HTML para agilizar el desarrollo.

Ejemplo: Confeccionar una pgina que muestre los nombres de 5

programacin separados por un guin.
<html> <head> </head> <body> PHP - Java - JavaScript - C - C++ </body> </html>

lenguajes de

Practica: Confeccione una pgina con las marcas mnimas que debe tener y en el
cuerpo de la misma disponga su nombre y apellido.

3.

Salto de lnea <br>

Pgina 14

Todo el texto que disponemos en el cuerpo de la pgina aparece en la misma lnea, no importa si cuando tipeamos la pgina disponemos cada palabra en una lnea distinta (es decir un navegador no tiene en cuenta la tecla ENTER). Para indicarle al navegador que queremos que contine en la prxima lnea debemos hacerlo con el elemento HTML <br>. Cuando aparece la marca <br> el navegador continua con el texto en la lnea siguiente. Es uno de los pocos elementos HTML que no tiene marca de cerrado como habamos visto hasta ahora. Implementemos una pgina que muestre los nombres de distintos lenguajes de programacin uno por lnea:
<html> <head> </head> <body> PHP<br> JavaScript<br> Java<br> C<br> C++ </body> </html>

Como vemos slo hemos agregado la marca <br> cada vez que queremos comenzar una lnea. Tengamos en cuenta que es indistinto si disponemos la marca en la misma lnea o en la siguiente:
PHP<br>

es lo mismo:
PHP <br>

Para recordar los nombres de los elementos HTML es bueno ver cual es la palabra completa de la misma:
<br> viene de break

Ejemplo:

Confeccionar una pgina HTML que muestre distintos lenguajes de programacin, mostrarlos uno por lnea.
<html> <head> </head> <body> PHP<br> JavaScript<br> Java<br> C<br> C++ </body> </html>

Practica: Confeccionar una pgina HTML que muestre su nombre y apellido y en la

siguiente lnea los nombres de sus padres separados por un guin.

4.

Prrafo <p>

Un prrafo es una oracin o conjunto de oraciones referentes a un mismo tema. Todo lo que encerremos entre las marcas <p> y </p> aparecer separado por un espacio con respecto al prximo prrafo.

Pgina 15

Dentro de un prrafo puede haber saltos de lnea <br>. Veamos con un ejemplo como disponer dos prrafos:
<html> <head> </head> <body> <p> SQL, Structure Query Language (Lenguaje de Consulta Estructurado) es un lenguaje de programacion para trabajar con base de datos relacionales como MySQL, Oracle, etc.<br> MySQL es un interpretador de SQL, es un servidor de base de datos.<br> MySQL permite crear base de datos y tablas, insertar datos, modificarlos, eliminarlos, ordenarlos, hacer consultas y realizar muchas operaciones, etc., resumiendo: administrar bases de datos. </p> <p> Este tutorial tiene por objetivo acercar los conceptos iniciales para introducirse en el mundo de las bases de datos. </p> </body> </html>

Tenemos en esta pgina HTML dos prrafos, cuando el navegador interpreta esta pgina, separa los contenidos de los dos prrafos con un espacio horizontal. Adems el primer prrafo contiene varios saltos de lnea. Normalmente uno agrupa en prrafos para dar ms sentido a nuestro escrito. Cuando modificamos la ventana del navegador los prrafos se acomodan automticamente de acuerdo al ancho de la ventana. Para recordar el nombre de esta marca HTML:
<p> viene de paragraph

Ejemplo: Confeccione una pgina que muestre dos prrafos. En el primero agregar
varios saltos de lnea.
<html> <head> </head> <body> <p> SQL, Structure Query Language (Lenguaje de Consulta Estructurado) es un lenguaje de programacion para trabajar con base de datos relacionales como MySQL, Oracle, etc.<br> MySQL es un interpretador de SQL, es un servidor de base de datos.<br> MySQL permite crear base de datos y tablas, insertar datos, modificarlos, eliminarlos, ordenarlos, hacer consultas y realizar muchas operaciones, etc., resumiendo: administrar bases de datos. </p> <p> Este tutorial tiene por objetivo acercar los conceptos iniciales para introducirse en el mundo de las bases de datos. </p> </body> </html>

Practica: Confeccione una pgina que muestre en un prrafo datos referentes a

sus estudios y en otro prrafo su nombre y mail.

Pgina 16

5.

Ttulos <h1><h2><h3><h4><h5><h6>

Otros elementos HTML muy utilizados son para indicar los ttulos, para esto contamos con los elementos:
<h1><h2><h3><h4><h5><h6>

El ttulo de mayor nivel es <h1>, es decir el que tienen una fuente mayor (veremos que es el navegador el responsable de definir el tamao de la fuente, ms adelante podr ver que uno puede modificar la fuente, tamao, color etc.) Segn la importancia del ttulo utilizaremos alguno de estos elementos HTML. Requiere la marca de cerrado del ttulo con la barra invertida como hemos visto. Confeccionaremos una pgina que contenga un ttulo de primer nivel <h1> y luego dos ttulos de nivel <h2>. Definiremos un prrafo para cada ttulo de segundo nivel. pagina1.html
<html> <head> </head> <body> <h1>Tipos de datos en MySQL</h1> <h2>varchar</h2> <p> se usa para almacenar cadenas de caracteres. Una cadena es una secuencia de caracteres. Se coloca entre comillas (simples): 'Hola'.<br> El tipo "varchar" define una cadena de longitud variable en la cual determinamos el mximo de caracteres. Puede guardar hasta 255 caracteres. Para almacenar cadenas de hasta 30 caracteres, definimos un campo de tipo varchar(30). </p> <h2>int</h2> <p> Se usa para guardar valores numricos enteros, de -2000000000 a 2000000000 aproximadamente.<br> Definimos campos de este tipo cuando queremos representar, por ejemplo, cantidades. </p> </body> </html>

Cada ttulo aparece siempre en una lnea distinta, no importa si lo tipeamos seguido en el archivo, es decir el resultado ser igual si hacemos:
<h1>Tipos de datos en MySQL</h1> <h2>varchar</h2>

o esto:
<h1>Tipos de datos en MySQL</h1><h2>varchar</h2>

El navegador dispone cada ttulo en una lnea nueva. Recordemos que el HTML no tiene la responsabilidad de indicar el tamao de las fuentes. El navegador definir el tamao de fuente segn el nivel de ttulo que indiquemos. La de tamao ms grande es la de nivel 1 <h1>.
<h1> viene de heading

heading significa ttulo.

Ejemplo: Confeccionar una pgina que contenga un ttulo de primer nivel <h1> y
luego dos ttulos de nivel <h2>. Definir un prrafo para cada ttulo de segundo nivel.
<html> <head> </head>

Pgina 17

<body> <h1>Tipos de datos en MySQL</h1> <h2>varchar</h2> <p> se usa para almacenar cadenas de caracteres. Una cadena es una secuencia de caracteres. Se coloca entre comillas (simples): 'Hola'.<br> El tipo "varchar" define una cadena de longitud variable en la cual determinamos el mximo de caracteres. Puede guardar hasta 255 caracteres. Para almacenar cadenas de hasta 30 caracteres, definimos un campo de tipo varchar(30). </p> <h2>int</h2> <p> Se usa para guardar valores numricos enteros, de -2000000000 a 2000000000 aproximadamente.<br> Definimos campos de este tipo cuando queremos representar, por ejemplo, cantidades. </p> </body> </html>

Practica: Confeccionar el titular de un peridico con un ttulo de nivel 1. Luego

definir dos ttulos de segundo nivel con los textos (Noticias polticas y Noticias deportivas), en cada una de estas secciones definir dos titulares de tercer nivel con un prrafo cada una. Al final de la pgina mostrar un ttulo de cuarto nivel con el nombre de la empresa propietaria del peridico.

6.

Enfasis (<em> <strong>)

Enfatizar algo significa realzar la importancia de una cosa, por ejemplo una palabra o conjunto de palabras. As como tenemos seis niveles de ttulos para enfatizar un bloque contamos con dos elementos que son (<em> <strong>) El elemento de mayor fuerza de nfasis es strong y le sigue em Veamos un ejemplo del empleo de estos dos elementos HTML:
<html> <head> </head> <body> <p><strong>Tpos de datos</strong> en MySQL</p> <p><em>TEXTO</em>: Para almacenar texto usamos cadenas de caracteres. Las cadenas se colocan entre comillas simples. Podemos almacenar dgitos con los que no se realizan operaciones matemticas, por ejemplo, cdigos de identificacin, nmeros de documentos, nmeros telefnicos. Tenemos los siguientes tipos: varchar, char y text.</p> <p><em>NUMEROS</em>: Existe variedad de tipos numricos para representar enteros, negativos, decimales. Para almacenar valores enteros, por ejemplo, en campos que hacen referencia a cantidades, precios, etc., usamos el tipo integer. Para almacenar valores con decimales utilizamos: float o decimal.</p> <p><em>FECHAS Y HORAS</em>: para guardar fechas y horas dispone de varios tipos: date (fecha), datetime (fecha y hora), time (hora), year (ao) y timestamp.</p> </body> </html>

Podemos ver que la sintaxis para el elemento strong es:

<strong>Tpos de datos</strong>

Pgina 18

La mayora de los navegadores muestran el texto enfatizado con strong con un texto en negrita y para el elemento em utilizan letra itlica (de todos modos esto no es obligatorio, pero seguramente mostrarn los textos enfatizados). Otra cosa importante que podemos hacer notar es que estos elementos HTML no producen un salto de lnea como los de ttulo (h1,h2 etc.) Para recordar el nombre de estos elementos HTML:
<em> viene de empathize que significa nfasis. <strong> viene de strong que significa fuerte.

Ejemplo: Crear una pgina que contenga cuatro prrafos. En el primero enfatizar
con el mximo nivel y en los otros prrafos emplear el elemento de enfatizar de menor fuerza.
<html> <head> </head> <body> <p><strong>Tpos de datos</strong> en MySQL</p> <p><em>TEXTO</em>: Para almacenar texto usamos cadenas de caracteres. Las cadenas se colocan entre comillas simples. Podemos almacenar dgitos con los que no se realizan operaciones matemticas, por ejemplo, cdigos de identificacin, nmeros de documentos, nmeros telefnicos. Tenemos los siguientes tipos: varchar, char y text.</p> <p><em>NUMEROS</em>: Existe variedad de tipos numricos para representar enteros, negativos, decimales. Para almacenar valores enteros, por ejemplo, en campos que hacen referencia a cantidades, precios, etc., usamos el tipo integer. Para almacenar valores con decimales utilizamos: float o decimal.</p> <p><em>FECHAS Y HORAS</em>: para guardar fechas y horas dispone de varios tipos: date (fecha), datetime (fecha y hora), time (hora), year (ao) y timestamp.</p> </body> </html>

Practica:

Confeccionar una pgina que muestre la definicin de tres palabras. Aplicar el elemento strong a cada palabra previo a su definicin. Luego agregar el elemento em a una o a un conjunto de palabras dentro de la definicin.

7. Hipervnculo a otra pgina del mismo sitio <a>

El elemento ms importante que tiene una pgina de internet es el hipervnculo, estos nos permiten cargar otra pgina en el navegador. Esto es lo que hace diferente la pgina de un libro con la pgina de un sitio en internet. Normalmente un libro lo recorremos en forma secuencial, pero un sitio de internet podemos disponer estos enlaces entre un conjunto de pginas y luego tener distintas alternativas de recorrido. Normalmente un navegador al encontrar esta marca muestra un texto subrayado, y al hacer clic con el mouse sobre ste el navegador carga la pgina indicada por dicho hipervnculo. Primero veremos cual es la sintaxis para disponer un hipervnculo a una pgina que se encuentra en el mismo sitio (es decir otra pgina que hemos desarrollado nosotros). La marca de hipervnculo a otra pgina del mismo sitio tiene la siguiente sintaxis:
<a href="pagina2.html">Noticias</a>

Pgina 19

Como vemos, se trata de otro elemento HTML que tiene comienzo de marca y fin de marca. Lo que se encuentra entre el comienzo de marca y el fin de la marca es el texto que aparece en la pgina (normalmente subrayado). Lo nuevo que aparece en este elemento es el concepto de una propiedad. Una propiedad se incorpora en el comienzo de una marca y tiene un nombre y un valor. El valor de la propiedad debe ir entre comillas dobles. La propiedad href del elemento "a" hace referencia a la pgina que debe mostrar el navegador si el visitante hace clic sobre el hipervnculo. Implementemos dos pginas que contengan hipervnculos entre si, los nombres de las pginas HTML sern: pagina1.html y pagina2.html pagina1.html
<html> <head> </head> <body> <h1>Pgina principal.</h1> <a href="pagina2.html">Noticias</a> </body> </html>

pagina2.html
<html> <head> </head> <body> <h1>Noticias.</h1> <a href="pagina1.html">Salir.</a> </body> </html>

Como podemos observar lo nuevo en la pagina1.html es el hipervnculo a la pagina2.html:

<a href="pagina2.html">Noticias</a>

Toda propiedad toma el valor que se encuentra seguidamente del caracter = El valor de la propiedad href en este caso es pagina2.html (es otro archivo HTML que debe encontrarse en nuestro sitio y en el mismo directorio). El segundo archivo pagina2.html tiene un hipervnculo a la primer pgina:
<a href="pagina1.html">Salir.</a>

Para recordar el nombre de esta marca HTML:

<a> viene de anchor que significa ancla.

Ejemplo:

Confeccionar una pgina principal que tenga un hipervnculo a otra pgina secundaria. La pgina secundaria debe tener tambin un hipervnculo a la pgina principal. pagina1.html
<html> <head> </head> <body> <h1>Pgina principal.</h1> <a href="pagina2.html">Noticias</a> </body> </html>

pagina2.html
<html>

Pgina 20

<head> </head> <body> <h1>Noticias.</h1> <a href="pagina1.html">Salir.</a> </body> </html>

Practica: Confeccionar una pgina principal con dos hipervnculos a las pginas
pagina2.html y pagina3.html Luego en las dos pginas secundarias disponer hipervnculos a la pgina principal.

8.

Hipervnculo a otro sitio de internet <a>

La sintaxis para disponer un hipervnculo a otro sitio de internet es:

<a href="http://www.google.com">Buscador Google</a>

Ahora la propiedad href la inicializamos con el nombre del dominio del otro sitio. Algo importante que hay que anteceder al nombre del dominio es el tipo de protocolo a utilizar. Cuando se trata de una pgina de internet, el protocolo es el http. Resumiendo a la propiedad href la inicializamos con el nombre del protocolo (http) seguida de dos puntos (:) y dos barras (//) luego la cadena (www.) y finalmente el nombre de dominio del sitio a enlazar. La siguiente pgina muestra un hipervnculo al sitio principal del buscador Google:
<html> <head> </head> <body> <a href="http://www.google.com">Buscador Google</a> </body> </html>

Si analizamos un poco y pensamos que esta marca nos permite pedir una pgina a un servidor para que la cargue en el navegador: Qu pgina nos retorna del dominio www.google.com? La respuesta es que todo servidor cuando recibe una peticin de una pgina sin indicar su nombre (es decir slo est el nombre de dominio) selecciona y enva una pgina que tiene configurada el servidor como pgina por defecto (generalmente esa pgina es la principal del sitio y a partir de la cual podemos navegar mediante hipervnculos a otras pginas que se encuentran en dicho dominio). Podemos enlazar a una pgina determinada de otro sitio. Veamos un ejemplo, si queremos disponer un enlace (hipervnculo) a la pagina about.html de google la sintaxis ser la siguiente:
<a href="http://www.google.com/intl/en/about.html">Acerca de Google</a>

Debemos conocer exactamente el nombre de la pgina (en este caso about.html) y tambin si la pgina no se encuentra en el directorio raiz debemos saber exactamente el camino de directorios (en este caso /intl/en/)

Ejemplo: Confeccionar una pgina que contenga un enlace al sitio de google.

<html> <head> </head> <body> <a href="http://www.google.com">Buscador Google</a>

Pgina 21

</body> </html>

Practica: Confeccionar una pgina que contenga un hipervnculo a un peridico

(indicar slo el nombre de dominio del peridico). Disponer adems un segundo hipervnculo a una pgina determinada de ese peridico.

9.

Imgenes dentro de una pgina <img>

Para insertar una imagen dentro de una pgina debemos utilizar el elemento HTML <img>, la misma no tiene una marca de finalizacin (similar a la marca <br>). Generalmente, la imagen se encuentra en el mismo servidor donde se almacenan nuestras pginas HTML. Los formatos clsicos son los archivos con extensiones gif, jpg y png. La sintaxis de esta marca es:
<img src="foto1.jpg" alt="Pintura geomtrica">

Como mnimo, debemos inicializar las propiedades src y alt de la marca HTML img. En la propiedad src indicamos el nombre del archivo que contiene la imagen (en un servidor Linux es sensible a maysculas y minsculas por lo que recomiendo que siempre utilicen minsculas para los nombres de archivos). Como la imagen se encuentra en el mismo directorio donde se almacena la pgina HTML, con indicar el nombre de archivo basta (no es necesario indicar ninguna ruta de carpetas). Otra propiedad obligatoria es alt, donde disponemos un texto que vern los usuarios que visiten el sitio con un navegador que slo permite texto (o con un navegador que tenga desactivada la opcin de descarga de imgenes). El texto debe describir el contenido de la imagen. Confeccionemos una pgina que muestre una imagen llamada foto1.jpg (La imagen se encuentra almacenada en el servidor en la misma carpeta donde se localiza esta pgina)
<html> <head> </head> <body> <img src="foto1.jpg" alt="Pintura geomtrica"> </body> </html>

Si la imagen se encuentra en una subcarpeta llamada imagenes, luego la sintaxis para recuperarla ser:
<img src="imagenes/foto1.jpg" alt="Pintura geomtrica">

Es decir, antecedemos al nombre de la imagen el nombre de la carpeta y la barra / Si la imagen se encuentra en una carpeta padre de donde se encuentra la pgina HTML luego la sintaxis ser:
<img src="../foto1.jpg" alt="Pintura geomtrica">

Es decir, le antecedemos .. y la barra / al nombre de la imagen Si queremos subir dos carpetas luego escribimos:
<img src="../../foto1.jpg" alt="Pintura geomtrica">

Por ltimo, si queremos acceder a una imagen que se encuentra en una carpeta llamada imagenes pero que est al mismo nivel:

Pgina 22

<img src="../imagenes/foto1.jpg" alt="Pintura geomtrica">

Primero le indicamos que subimos al directorio padre mediante los dos puntos .. y seguidamente indicamos el nombre de la carpeta y la imagen a mostrar.
<img> viene de image src viene de source alt viene de alternative

Ejemplo: Implementar una pgina que muestre una imagen llamada foto1.jpg que
se encuentra en el mismo servidor y en la misma carpeta donde se localiza el archivo HTML.
<html> <head> </head> <body> <img src="foto1.jpg" alt="Pintura geomtrica"> </body> </html>

Practica: Desarrollar una pgina que muestre dos imagenes llamadas foto2.jpg y
foto3.jpg, las mismas se encuetran almacenadas en el servidor en la misma carpeta donde se almacenar la pgina que usted desarrollar. Disponer un ttulo a cada imagen.

10. Hipervnculo mediante una imagen <a> e <img>

Como ya conocemos los hipervnculos y como insertar imgenes en nuestra pgina, ahora podemos implementar un hipervnculo pero en vez de mostrar un texto mostraremos una imagen. La solucin es simple y consiste en disponer la marca <img> encerrada entre la marca de comienzo y fin del enlace(<a>) Confeccionemos una pgina que muestre dos imagenes (foto1.jpg y foto2.jpg) como hipervnculos. Al ser presionados llamar a otra pgina. Las imgenes se encuentran en una carpeta llamada imagenes que depende directamente de la raiz del sitio:
<html> <head> </head> <body> <h2>Presione alguna de las imagenes para conocer ms sobre esa obra.</h2> <a href="pagina2.html"><img src="/imagenes/foto1.jpg" alt="Pintura Geomtrica"></a> <br> <a href="pagina2.html"><img src="/imagenes/foto2.jpg" alt="Pintura Geomtrica"></a> </body> </html>

Como podemos observar insertamos la marca HTML img en el lugar donde disponamos el texto del hipervnculo. Eso es todo. Lo que debe quedar bien en claro es que las imgenes se encuentran en un directorio llamado imagenes en la raiz del sitio (luego para indicar la referencia al archivo lo hacemos antecediendo la barra invertida / con lo que hacemos referencia a que

Pgina 23

partimos desde la raiz del sitio) en una carpeta llamada imagenes (/imagenes/foto1.jpg) Es bueno practicar con esto ya que cuando implementemos sitios muy grandes seguramente agruparemos cada mdulo en distintas carpetas.

Ejemplo:

Confeccionar una pgina que muestre dos imagenes (foto1.jpg y foto2.jpg) como hipervnculos. Al ser presionados llamar a otra pgina. Las imgenes se encuentran en una carpeta llamada imagenes que depende directamente de la raiz del sitio. pagina1.html
<html> <head> </head> <body> <h2>Presione alguna de las imagenes para conocer ms sobre esa obra.</h2> <a href="pagina2.html"><img src="/imagenes/foto1.jpg" alt="Pintura Geomtrica"> </a> <br> <a href="pagina3.html"><img src="/imagenes/foto2.jpg" alt="Pintura Geomtrica"> </a> </body> </html>

pagina2.html
<html> <head> </head> <body> <p>Esta obra fue desarrollada en el ao 2003</p> <a href="pagina1.html">Retornar</p> </body> </html>

pagina3.html
<html> <head> </head> <body> <p>Esta obra fue desarrollada en el ao 2006</p> <a href="pagina1.html">Retornar</p> </body> </html>

Practica:

Crear tres pginas con una foto cada una (foto1.jpg, foto2.jpg y foto3.jpg) luego al ser presionada avanzar a la siguiente pgina, es decir de la pagina1.html llamar a la pagina2.html, de la pagina2.html pasar a la pagina3.html y de sta a la primera. Las imgenes se encuentran en una carpeta llamada imagenes que depende directamente de la raiz del sitio.

11. Apertura de un hipervnculo en otra instancia del navegador.

El elemento "a" tiene una propiedad target que nos permite indicar que la referencia del recurso sea abierta en otra pgina.

Pgina 24

Esta propiedad se llama target y debemos asignarle el valor "_blank" para indicar que el recurso sea abierto en otra ventana. Confeccionemos una pgina que contenga dos hipervnculos, el primero abra el sitio en el mismo navegador y el segundo en otra instancia del navegador:
<html> <head> </head> <body> <h1>Apertura de enlaces en el mismo navegador y en otra instancia del navegador</h1> <p> <a href="http://www.lanacion.com.ar">Peridico La Nacin</a> <br> <a href="http://www.clarin.com.ar" target="_blank">Peridico Clarin</a> </p> </body> </html>

Podemos ver la diferencia entre el primer hipervnculo:

<a href="http://www.lanacion.com.ar">Peridico La Nacin</a>

y el segundo hipervnculo que indica que el sitio sea abierto en otra ventana del navegador:
<a href="http://www.clarin.com.ar" target="_blank">Peridico Clarin</a>

Ejemplo: Confeccionar una pgina que contenga dos hipervnculos a los peridicos
La Nacin y el Clarin. Hacer que el hipervnculo del peridico el Clarin sea abierto en otra ventana del navegador.
<html> <head> </head> <body> <h1>Apertura de enlaces en el mismo navegador y en otra instancia del navegador</h1> <p> <a href="http://www.lanacion.com.ar">Peridico La Nacin</a> <br> <a href="http://www.clarin.com.ar" target="_blank">Peridico Clarin</a> </p> </body> </html>

Practica:

Confeccionar una pgina que muestre enlaces a distintos blog. Agruparlos bajo dos ttulos que muestren los mismos enlaces, el primero "Hacer la apertura en otra ventana" y el segundo "Hacer la apertura en el mismo navegador".

12. Hipervnculo a un cliente de correo <a>

El elemento "a" permite direccionar un hipervnculo a un programa de envo de correos que tengamos configurado en nuestra computadora. Confeccionaremos una pgina que disponga un hipervnculo a un cliente de correo de mail:
<html> <head> </head> <body>

Pgina 25

<h1>Reclamos</h1> <a href="mailto:diegoestevanes@gmail.com">Enviar mail.</a> </body> </html>

Cuando se presiona el enlace se abre el programa de envo de correos que tiene configurado el equipo y dispone como receptor del mensaje la direccin que configuramos en el propio enlace seguido de la palabra mailto: La sintaxis para disponer un ttulo por defecto y un cuerpo de mensaje es:
<a href="mailto:diegoestevanes@gmail.com?subject=ttulo del mensaje&body=cuerpo del mensaje">Enviar mail.</a>

Es decir luego de especificar el destinatario del mail disponemos un caracter de interrogacin '?' seguido la palabra subject, un igual y el ttulo por defecto que debe aparecer en la ventana de envo de mail. Por ltimo separamos con un ampersand '&' la inicializacin de subject y el body (es decir el cuerpo del mensaje) Podemos inclusive aadir el envo de mail con copia y con copia oculta a otras direcciones:
<html> <head> </head> <body> <h1>Reclamos</h1> <a href="mailto:diego1@gmail.com? subject=aqu el ttulo&cc=diego2@gmail.com&bcc=diego3@gmail.com&body=Este es el cuerpo">Enviar mail.</a> </body> </html>

En este ejemplo enviamos un mail a diego1@gmail.com, diego2@gmail.com y con copia oculta a diego3@gmail.com propiedad href de tal manera que abra un cliente de correo.
<html> <head> </head> <body> <h1>Reclamos</h1> <a href="mailto:diegoestevanes@gmail.com">Enviar mail.</a> </body> </html>

con

copia

Ejemplo: Confeccionar una pgina que contenga un hipervnculo configurando la

Practica: Una empresa

que vende pizzas tiene 3 ofertas. Las mismas son (1- 1 muzzarella y una bebida cola a 500, 2- 2 muzzarellas a 600 y 3 - 4 muzarrellas a 1000). Confeccionar una pgina que disponga tres hipervnculos a cada una de esas ofertas. Al ser presionadas abrir el cliente de correo y enviar la promocin correspondiente. En el ttulo indicar si se trata de la promocin 1, 2 o 3. En el cuerpo del mensaje pedir que ingrese la direccin y telfono de la persona que hace el pedido.

13. Anclas llamadas desde la misma pgina.

Otra posibilidad que nos brinda el HTML es disponer una referencia dentro de la pgina para poder posteriormente disponer un hipervnculo a dicha marca. Es una prctica comn cuando queremos desplazarnos dentro de una pgina de gran tamao. Se disponen hipervnculos a diferentes anclas.

Pgina 26

La sintaxis para definir un ancla es:

<a name="nombreancla"></a>

No debemos confundir un ancla con un hipervnculo, ms alla que se utiliza el mismo elemento a. Para un ancla inicializamos la propiedad name con el nombre del ancla. Un ancla se la define en una parte de la pgina que queremos que el operador llegue a partir de un hipervnculo. Ahora la sintaxis para ir a un ancla desde un hipervnculo es la siguiente:
<a href="#nombreancla">Introduccin</a><br>

Vemos que en la propiedad href indicamos el nombre del ancla. Haremos un ejemplo, donde dispondremos una lista de hipervnculos que llaman a una serie de anclas dispuestas en la misma pgina:
<html> <head> </head> <body> <h1>Tutorial de MySQL</h1> <a href="#introduccion">Introduccin</a><br> <a href="#mostrarbasedatos">show databases</a><br> <a href="#creaciontabla">Creacin de una tabla y mostrar sus campos</a><br> <a href="#cargarregistros">Carga de registros a una tabla y su recuperacin</a><br> <a name="introduccion"></a> <h2>Introduccin</h2> <p> SQL, Structure Query Language (Lenguaje de Consulta Estructurado) es un lenguaje de programacion para trabajar con base de datos relacionales como MySQL, Oracle, etc.<br> MySQL es un interpretador de SQL, es un servidor de base de datos.<br> MySQL permite crear base de datos y tablas, insertar datos, modificarlos, eliminarlos, ordenarlos, hacer consultas y realizar muchas operaciones, etc., resumiendo: administrar bases de datos.<br> Ingresando instrucciones en la linea de comandos o embebidas en un lenguaje como PHP nos comunicamos con el servidor. Cada sentencia debe acabar con punto y coma (;).<br> La sensibilidad a maysculas y minsculas, es decir, si hace diferencia entre ellas, depende del sistema operativo, Windows no es sensible, pero Linux si. Por ejemplo Windows interpreta igualmente las siguientes sentencias:<br> create database administracion;<br> Create DataBase administracion;<br> Pero Linux interpretar como un error la segunda.<br> Se recomienda usar siempre minsculas. Es ms el sitio mysqlya.com.ar est instalado sobre un servidor Linux por lo que todos los ejercicios debern respetarse maysculas y minsculas. </p> <a name="mostrarbasedatos"></a> <h2>show databases</h2> <p> Una base de datos es un conjunto de tablas.<br> Una base de datos tiene un nombre con el cual accederemos a ella.<br> Vamos a trabajar en una base de datos ya creada en el sitio, llamada "administracion".<br> Para que el servidor nos muestre las bases de datos existentes, se lo solicitamos enviando la instruccin:<br> show databases;<br> Nos mostrar los nombres de las bases de datos, debe aparecer en este sitio "administracion".<br> </p>

Pgina 27

<a name="creaciontabla"></a> <h2>Creacin de una tabla y mostrar sus campos</h2> <p> Una base de datos almacena sus datos en tablas.<br> Una tabla es una estructura de datos que organiza los datos en columnas y filas; cada columna es un campo (o atributo) y cada fila, un registro. La interseccin de una columna con una fila, contiene un dato especfico, un solo valor.<br> Cada registro contiene un dato por cada columna de la tabla.<br> Cada campo (columna) debe tener un nombre. El nombre del campo hace referencia a la informacin que almacenar.<br> Cada campo (columna) tambin debe definir el tipo de dato que almacenar.<br> </p> <a name="cargarregistros"></a> <h2>Carga de registros a una tabla y su recuperacin</h2> <p> Usamos "insert into". Especificamos los nombres de los campos entre parntesis y separados por comas y luego los valores para cada campo, tambin entre parntesis y separados por comas.<br> Es importante ingresar los valores en el mismo orden en que se nombran los campos, si ingresamos los datos en otro orden, no aparece un mensaje de error y los datos se guardan de modo incorrecto.<br> Note que los datos ingresados, como corresponden a campos de cadenas de caracteres se colocan entre comillas simples. Las comillas simples son OBLIGATORIAS. </p> </body> </html>

Cada hipervnculo hace referencia a un ancla que se encuentra en la misma pgina:

<a href="#introduccion">Introduccin</a><br> <a href="#mostrarbasedatos">show databases</a><br> <a href="#creaciontabla">Creacin de una tabla y mostrar sus campos</a><br> <a href="#cargarregistros">Carga de registros a una tabla y su recuperacin</a><br>

Luego la definicin de las anclas son:

<a name="introduccion"></a> <h2>Introduccin</h2> <p>

Como podemos observar la defincin del ancla se hace inmediatamente anterior al ttulo donde queremos que el navegador se site.

Ejemplo:

Confeccionar una pgina que contenga cuatro anclas, luego definir cuatro hipervnculos que se enlacen con dichas anclas. Principio del formulario pagina1.html
<html> <head> </head> <body> <h1>Tutorial de MySQL</h1> <a href="#introduccion">Introduccin</a><br> <a href="#mostrarbasedatos">show databases</a><br> <a href="#creaciontabla">Creacin de una tabla y mostrar sus campos</a><br> <a href="#cargarregistros">Carga de registros a una tabla y su recuperacin</a><br> <a name="#introduccion"></a> <h2>Introduccin</h2> <p> SQL, Structure Query Language (Lenguaje de Consulta Estructurado) es un lenguaje de programacion para trabajar con base de datos relacionales como MySQL, Oracle, etc.<br> MySQL es un interpretador de SQL, es un servidor de base de datos.<br>

Pgina 28

MySQL permite crear base de datos y tablas, insertar datos, modificarlos, eliminarlos, ordenarlos, hacer consultas y realizar muchas operaciones, etc., resumiendo: administrar bases de datos.<br> Ingresando instrucciones en la linea de comandos o embebidas en un lenguaje como PHP nos comunicamos con el servidor. Cada sentencia debe acabar con punto y coma (;).<br> La sensibilidad a maysculas y minsculas, es decir, si hace diferencia entre ellas, depende del sistema operativo, Windows no es sensible, pero Linux si. Por ejemplo Windows interpreta igualmente las siguientes sentencias :<br> create database administracion;<br> Create DataBase administracion ;<br> Pero Linux interpretar como un error la segunda.<br> Se recomienda usar siempre minsculas. Es ms el sitio mysqlya.com.ar est instalado sobre un servidor Linux por lo que todos los ejercicios debern respetarse maysculas y minsculas. </p> <a name="mostrarbasedatos"></a> <h2>show databases</h2> <p> Una base de datos es un conjunto de tablas.<br> Una base de datos tiene un nombre con el cual accederemos a ella.<br> Vamos a trabajar en una base de datos ya creada en el sitio, llamada "administracion".<br> Para que el servidor nos muestre las bases de datos existentes, se lo solicitamos enviando la instruccin:<br> show databases;<br> Nos mostrar los nombres de las bases de datos, debe aparecer en este sitio "administracion".<br> </p> <a name="creaciontabla"></a> <h2>Creacin de una tabla y mostrar sus campos</h2> <p> Una base de datos almacena sus datos en tablas.<br> Una tabla es una estructura de datos que organiza los datos en columnas y filas; cada columna es un campo (o atributo) y cada fila, un registro. La interseccin de una columna con una fila, contiene un dato especfico, un solo valor.<br> Cada registro contiene un dato por cada columna de la tabla.<br> Cada campo (columna) debe tener un nombre. El nombre del campo hace referencia a la informacin que almacenar.<br> Cada campo (columna) tambin debe definir el tipo de dato que almacenar.<br> </p> <a name="cargarregistros"></a> <h2>Carga de registros a una tabla y su recuperacin</h2> <p> Usamos "insert into". Especificamos los nombres de los campos entre parntesis y separados por comas y luego los valores para cada campo, tambin entre parntesis y separados por comas.<br> Es importante ingresar los valores en el mismo orden en que se nombran los campos, si ingresamos los datos en otro orden, no aparece un mensaje de error y los datos se guardan de modo incorrecto.<br> Note que los datos ingresados, como corresponden a campos de cadenas de caracteres se colocan entre comillas simples. Las comillas simples son OBLIGATORIAS. </p> </body> </html>

Practica: Disponer una serie de hipervnculos sobre noticias del da. Enlazar los
hipervnculos con anclas que se encuentran ms abajo en la misma pgina.

14. Anclas llamadas desde otra pgina.

Tambin es perfectamente vlido la llamada a anclas desde otra pgina (no importa si se encuentra en el mismo sitio o en otro)

Pgina 29

Debemos conocer el nombre de la pgina a llamar y el nombre del ancla, luego la sintaxis para la llamada al ancla es:
<a href="pagina2.html#introduccion">Introduccin</a>

Es decir luego del nombre de la pgina que llamamos disponemos el caracter # y seguidamente el nombre del ancla. Confeccionemos dos pgina y que la primera llame a diferentes anclas definidas en la segunda: pagina1.html
<html> <head> </head> <body> <h1>Tutorial de MySQL</h1> <a href="pagina2.html#introduccion">Introduccin</a><br> <a href="pagina2.html#mostrarbasedatos">show databases</a><br> <a href="pagina2.html#creaciontabla">Creacin de una tabla y mostrar sus campos</a><br> <a href="pagina2.html#cargarregistros">Carga de registros a una tabla y su recuperacin</a><br> </body> </html>

pagina2.html
<html> <head> </head> <body> <a name="introduccion"></a> <h2>Introduccin</h2> <p> SQL, Structure Query Language (Lenguaje de Consulta Estructurado) es un lenguaje de programacion para trabajar con base de datos relacionales como MySQL, Oracle, etc.<br> MySQL es un interpretador de SQL, es un servidor de base de datos.<br> MySQL permite crear base de datos y tablas, insertar datos, modificarlos, eliminarlos, ordenarlos, hacer consultas y realizar muchas operaciones, etc., resumiendo: administrar bases de datos.<br> Ingresando instrucciones en la linea de comandos o embebidas en un lenguaje como PHP nos comunicamos con el servidor. Cada sentencia debe acabar con punto y coma (;).<br> La sensibilidad a maysculas y minsculas, es decir, si hace diferencia entre ellas, depende del sistema operativo, Windows no es sensible, pero Linux si. Por ejemplo Windows interpreta igualmente las siguientes sentencias:<br> create database administracion;<br> Create DataBase administracion;<br> Pero Linux interpretar como un error la segunda.<br> Se recomienda usar siempre minsculas. Es ms el sitio mysqlya.com.ar est instalado sobre un servidor Linux por lo que todos los ejercicios debern respetarse maysculas y minsculas. </p> <a href="pagina1.html">Retornar</a><br> <a name="mostrarbasedatos"></a> <h2>show databases</h2> <p> Una base de datos es un conjunto de tablas.<br> Una base de datos tiene un nombre con el cual accederemos a ella.<br> Vamos a trabajar en una base de datos ya creada en el sitio, llamada "administracion".<br> Para que el servidor nos muestre las bases de datos existentes, se lo solicitamos enviando la instruccin:<br>

Pgina 30

show databases;<br> Nos mostrar los nombres de las bases de datos, debe aparecer en este sitio "administracion".<br> </p> <a href="pagina1.html">Retornar</a><br> <a name="creaciontabla"></a> <h2>Creacin de una tabla y mostrar sus campos</h2> <p> Una base de datos almacena sus datos en tablas.<br> Una tabla es una estructura de datos que organiza los datos en columnas y filas; cada columna es un campo (o atributo) y cada fila, un registro. La interseccin de una columna con una fila, contiene un dato especfico, un solo valor.<br> Cada registro contiene un dato por cada columna de la tabla.<br> Cada campo (columna) debe tener un nombre. El nombre del campo hace referencia a la informacin que almacenar.<br> Cada campo (columna) tambin debe definir el tipo de dato que almacenar.<br> </p> <a href="pagina1.html">Retornar</a><br> <a name="cargarregistros"></a> <h2>Carga de registros a una tabla y su recuperacin</h2> <p> Usamos "insert into". Especificamos los nombres de los campos entre parntesis y separados por comas y luego los valores para cada campo, tambin entre parntesis y separados por comas.<br> Es importante ingresar los valores en el mismo orden en que se nombran los campos, si ingresamos los datos en otro orden, no aparece un mensaje de error y los datos se guardan de modo incorrecto.<br> Note que los datos ingresados, como corresponden a campos de cadenas de caracteres se colocan entre comillas simples. Las comillas simples son OBLIGATORIAS. </p> <a href="pagina1.html">Retornar</a><br> </body> </html>

Ejemplo:

Confeccionar una pgina que contenga cuatro anclas y una segunda pgina que defina cuatro hipervnculos que se enlacen con dichas anclas. Principio del formulario pagina1.html
<html> <head> </head> <body> <h1>Tutorial de MySQL</h1> <a href="pagina2.html#introduccion">Introduccin</a><br> <a href="pagina2.html#mostrarbasedatos">show databases</a><br> <a href="pagina2.html#creaciontabla">Creacin de una tabla y mostrar sus campos</a><br> <a href="pagina2.html#cargarregistros">Carga de registros a una tabla y su recuperacin</a><br> </body> </html>

pagina2.html
<html> <head> </head> <body> <a name="introduccion"></a> <h2>Introduccin</h2> <p> SQL, Structure Query Language (Lenguaje de Consulta Estructurado) es un lenguaje de programacion para trabajar con base de datos relacionales como MySQL, Oracle, etc.<br> MySQL es un interpretador de SQL, es un servidor de base de datos.<br>

Pgina 31

MySQL permite crear base de datos y tablas, insertar datos, modificarlos, eliminarlos, ordenarlos, hacer consultas y realizar muchas operaciones, etc., resumiendo: administrar bases de datos.<br> Ingresando instrucciones en la linea de comandos o embebidas en un lenguaje como PHP nos comunicamos con el servidor. Cada sentencia debe acabar con punto y coma (;).<br> La sensibilidad a maysculas y minsculas, es decir, si hace diferencia entre ellas, depende del sistema operativo, Windows no es sensible, pero Linux si. Por ejemplo Windows interpreta igualmente las siguientes sentencias:<br> create database administracion;<br> Create DataBase administracion;<br> Pero Linux interpretar como un error la segunda.<br> Se recomienda usar siempre minsculas. Es ms el sitio mysqlya.com.ar est instalado sobre un servidor Linux por lo que todos los ejercicios debern respetarse maysculas y minsculas. </p> <a href="pagina1.html">Retornar</a><br> <a name="mostrarbasedatos"></a> <h2>show databases</h2> <p> Una base de datos es un conjunto de tablas.<br> Una base de datos tiene un nombre con el cual accederemos a ella.<br> Vamos a trabajar en una base de datos ya creada en el sitio, llamada "administracion".<br> Para que el servidor nos muestre las bases de datos existentes, se lo solicitamos enviando la instruccin:<br> show databases;<br> Nos mostrar los nombres de las bases de datos, debe aparecer en este sitio "administracion".<br> </p> <a href="pagina1.html">Retornar</a><br> <a name="creaciontabla"></a> <h2>Creacin de una tabla y mostrar sus campos</h2> <p> Una base de datos almacena sus datos en tablas.<br> Una tabla es una estructura de datos que organiza los datos en columnas y filas; cada columna es un campo (o atributo) y cada fila, un registro. La interseccin de una columna con una fila, contiene un dato especfico, un solo valor.<br> Cada registro contiene un dato por cada columna de la tabla.<br> Cada campo (columna) debe tener un nombre. El nombre del campo hace referencia a la informacin que almacenar.<br> Cada campo (columna) tambin debe definir el tipo de dato que almacenar.<br> </p> <a href="pagina1.html">Retornar</a><br> <a name="cargarregistros"></a> <h2>Carga de registros a una tabla y su recuperacin</h2> <p> Usamos "insert into". Especificamos los nombres de los campos entre parntesis y separados por comas y luego los valores para cada campo, tambin entre parntesis y separados por comas.<br> Es importante ingresar los valores en el mismo orden en que se nombran los campos, si ingresamos los datos en otro orden, no aparece un mensaje de error y los datos se guardan de modo incorrecto.<br> Note que los datos ingresados, como corresponden a campos de cadenas de caracteres se colocan entre comillas simples. Las comillas simples son OBLIGATORIAS. </p> <a href="pagina1.html">Retornar</a><br> </body> </html>

Practica: Disponer una serie de hipervnculos sobre noticias del da. Enlazar los
hipervnculos con anclas que se encuentran en otra pgina.

Pgina 32

15. Lista ordenada (<ol>)

Este elemento HTML es til cuando debemos numerar una serie de objetos. Veamos con un ejemplo una lista ordenada para conocer su sintaxis. Mostraremos el orden de llegada de tres corredores:
<html> <head> </head> <body> <ol> <li>Rodriguez Pablo</li> <li>Gonzalez Raul</li> <li>Lopez Hector</li> </ol> </body> </html>

La marca <ol> y su correspondiente marca de cerrado es </ol> En su interior cada uno de los items se los dispone con el elemento li, que tambin tiene la marca de comienzo <li> y la marca de fin de item </li> Luego se encarga el navegador de numerar cada uno de los items contenidos en la lista, tengamos en cuenta que se numeran porque se trata de una lista ordenada. Para recordar el nombre de estos elementos HTML:
<ol> viene de ordened list <li> viene de list item

Ejemplo: Mostrar el orden de llegada de tres corredores utilizando el elemento

HTML ol. Luego agregar otros items a la lista.
<html> <head> </head> <body> <ol> <li>Rodriguez Pablo</li> <li>Gonzalez Raul</li> <li>Lopez Hector</li> </ol> </body> </html>

Practica: Confeccione una lista ordenada con los tres paises con mayor poblacin
del planeta. Disponer un ttulo de segundo nivel y debajo de la lista la suma de habitantes de esos tres paises enfatizado.

16. Lista no ordenada (<ul>)

Una lista no ordenada como su nombre lo indica no utiliza un nmero delante de cada items sino un pequeo smbolo grfico. La forma de implementar este tipo de listas es idntica a las listas ordenadas. Veamos un ejemplo donde implementamos una lista no ordenada:
<html> <head> </head> <body> <h2>Lenguajes de programacin.</h2> <ul>

Pgina 33

<li>C</li> <li>C++</li> <li>Java</li> <li>C#</li> </ul> </body> </html>

Para recordar los nombres de estas marcas HTML: <ul> viene de unordered list <li> viene de list item

Ejemplo: Confeccionar una pgina HTML que contenga una lista no ordenada con
cuatro lenguajes de programacin muy populares. Agregar un ttulo de segundo nivel indicando el concepto de esta lista.
<html> <head> </head> <body> <h2>Lenguajes de programacin.</h2> <ul> <li>C</li> <li>C++</li> <li>Java</li> <li>C#</li> </ul> </body> </html>

Practica:

Confeccionar una lista no ordenada que contenga hipervnculos a distintos peridicos que usted conoce. Agregar tantos item como peridicos conoce.

17. Lista de definiciones (<dl>)

Como su nombre lo indica se utiliza para asociar un trmino y la definicin del mismo. El navegador se encarga de destacar y separa el trmino y su definicin. Crearemos una lista con la definicin de varios lenguajes de programacin:
<html> <head> </head> <body> <dl> <dt>C++</dt> <dd>Es un lenguaje de programacin, diseado a mediados de los aos 1980, por Bjarne Stroustrup, como extensin del lenguaje de programacin C.</dd> <dt>Java</dt> <dd>Es un lenguaje de programacin orientado a objetos desarrollado por Sun Microsystems a principios de los 90.</dd> <dt>JavaScript</dt> <dd>Es un lenguaje interpretado, es decir, que no requiere compilacin, utilizado principalmente en pginas web, con una sintaxis semejante a la del lenguaje C.</dd> </dl> </body> </html>

Como podemos observar intervienen ms marcas que en los otros dos tipos de listas. Las marcas que encierran a la lista son <dl> (Definition List) y </dl>

Pgina 34

Ahora debemos poner a pares estos dos elementos <dt> (Definition Term) y <dd> (Definition Description) El navegador se encarga de hacer el sangrado del contenido del elemento dt Para recordar los nombres de estas marcas HTML:
<dl> viene de definition list <dt> viene de definition term <dd> viene de definition description

Como su nombre lo indica se utiliza para asociar un trmino y la definicin del mismo. El navegador se encarga de destacar y separa el trmino y su definicin. Crearemos una lista con la definicin de varios lenguajes de programacin:
<html> <head> </head> <body> <dl> <dt>C++</dt> <dd>Es un lenguaje de programacin, diseado a mediados de los aos 1980, por Bjarne Stroustrup, como extensin del lenguaje de programacin C.</dd> <dt>Java</dt> <dd>Es un lenguaje de programacin orientado a objetos desarrollado por Sun Microsystems a principios de los 90.</dd> <dt>JavaScript</dt> <dd>Es un lenguaje interpretado, es decir, que no requiere compilacin, utilizado principalmente en pginas web, con una sintaxis semejante a la del lenguaje C.</dd> </dl> </body> </html>

Como podemos observar intervienen ms marcas que en los otros dos tipos de listas. Las marcas que encierran a la lista son <dl> (Definition List) y </dl> Ahora debemos poner a pares estos dos elementos <dt> (Definition Term) y <dd> (Definition Description) El navegador se encarga de hacer el sangrado del contenido del elemento dt Para recordar los nombres de estas marcas HTML:
<dl> viene de definition list <dt> viene de definition term <dd> viene de definition description

Ejemplo: Confeccionar una lista de definicin indicando en los conceptos distintos

lenguajes de programacin. En la definicin hacer una breve introduccin del mismo.
<html> <head> </head> <body> <dl> <dt>C++</dt> <dd>Es un lenguaje de programacin, diseado a mediados de los aos 1980, por Bjarne Stroustrup, como extensin del lenguaje de programacin C.</dd> <dt>Java</dt> <dd>Es un lenguaje de programacin orientado a objetos desarrollado por Sun Microsystems a principios de los 90.</dd> <dt>JavaScript</dt> <dd>Es un lenguaje interpretado, es decir, que no requiere compilacin, utilizado principalmente en pginas web, con una sintaxis semejante a la del lenguaje C.</dd> </dl> </body> </html>

Pgina 35

Practica:

Confeccione una lista de definicin de un conjunto de palabras que utilice en su mbito laboral.

18. Listas anidadas.

El lenguaje HTML nos permite insertar una lista dentro de otra. Se pueden anidar listas de distinto tipo, por ejemplo podemos tener una lista no ordenada y uno de los item puede ser una lista ordenada. Para el anidamiento de listas solo debemos tener cuidado en la correcta apertura y cerrado de las marcas Implementaremos una pgina que enumere una serie de paises en una lista ordenada y luego en cada pais dispondremos una lista de hipervnculos de peridicos de dicho pais:
<html> <head> </head> <body> <ol> <li>Costa Rica <ul> <li><a href="http://www.nacion.com">La Nacin</a></li> <li><a href="http://www.aldia.co.cr">Al Dia</a></li> <li><a href="http://www.diarioextra.com">La Extra</a></li> </ul> </li> <li>Espaa <ul> <li><a href="http://www.elpais.es">El Pas Digital</a></li> <li><a href="http://www.abc.es">ABC</a></li> <li><a href="http://www.elmundo.es">El Mundo</a></li> </ul> </li> <li>Mxico <ul> <li><a href="http://www.jornada.unam.mx">La Jornada</a></li> <li><a href="http://www.el-universal.com.mx">El Universal</a></li> </ul> </li> </ol> </body> </html>

Se puede insertar en un elemento li una lista como podemos ver:

<li>Argentina <ul> <li><a href="http://www.lanacion.com.ar">La Nacin</a></li> <li><a href="http://www.clarin.com.ar">Clarn</a></li> <li><a href="http://www.pagina12.com.ar">Pgina 12</a></li> </ul> </li>

Ejemplo: Implementar una pgina que enumere una serie de paises en una lista
ordenada y luego en cada pais disponer una lista de hipervnculos de peridicos de dicho pais.
<html> <head> </head> <body>

Pgina 36

<ol> <li>Argentina <ul> <li><a href="http://www.lanacion.com.ar">La Nacin</a></li> <li><a href="http://www.clarin.com.ar">Clarn</a></li> <li><a href="http://www.pagina12.com.ar">Pgina 12</a></li> </ul> </li> <li>Espaa <ul> <li><a href="http://www.elpais.es">El Pas Digital</a></li> <li><a href="http://www.abc.es">ABC</a></li> <li><a href="http://www.elmundo.es">El Mundo</a></li> </ul> </li>

Practica: Confeccionar una lista no ordenada de lenguajes de programacin. Luego

disponer una lista ordenada con hipervnculos a sitios que tratan dichos lenguajes.

19. Tabla (<table><tr><td>)

El objetivo fundamental de las tablas es mostrar una serie de datos en forma ordenada, organizado en filas y columnas. Algo importante es que no utilizaremos las tablas para organizar la pgina completa (esto se hace en la actualizad mediante CSS, es decir hojas de estilo.) Para la creacin de una tabla intervienen una serie de elementos: <table> Es la marca de comienzo de la tabla. Este elemento requiere la marca de cierre. <tr> Es la marca de comienzo de una fila. Esta marca debe estar dentro del elemento table. Este elemento requiere la marca de cierre. <td> Es la marca de comienzo de una celda. Esta marca debe estar dentro del elemento tr. Este elemento requiere la marca de cierre. Para recordar el nombre de estos elementos HTML: <table> <tr> viene de table row que significa fila de la tabla. <td> viene de table data que significa dato de la tabla. La mejor forma de entender y dominar este concepto es implementar tablas y ver su resultado dentro del navegador. Confeccionemos una tabla que muestre los nombre de paises en una columna y su cantidad de habitantes en otra:
<html> <head> </head> <body> <table border="1"> <tr> <td>China</td><td>1300 millones</td> </tr> <tr> <td>India</td><td>1080 millones</td> </tr> <tr> <td>Estados Unidos</td><td>295 millones</td> </tr> </table> </body> </html>

Pgina 37

Lo primero que aparece es la apertura del elemento table, donde inicializamos la propiedad border con el valor 1, con esto el contorno de cada celda ser visible (pruebe de asignarle el valor cero y otros valores superiores a 1)
<table border="1">

Seguidamente viene la apertura de la primer fila de la tabla con el elemento tr:

<tr>

Continuamos con la apertura de la primer celda de la primer fila de la tabla:

<td>

Luego el dato propiamente dicho de la celda: India Cerramos la celda:

</td>

Abrimos la proxima celda:

<td>

Disponemos el valor de la celda: 1300 millones Cerramos la celda:

</td>

Ahora cerramos la primer fila de la tabla:

</tr>

El mecanismo de la siguiente fila es similar a la primera.

Ejemplo:

Confeccionar una tabla que muestre los nombre de paises en una columna y su cantidad de habitantes en otra.
<html> <head> </head> <body> <table border="1"> <tr> <td>China</td><td>1300 millones</td> </tr> <tr> <td>India</td><td>1080 millones</td> </tr> <tr> <td>Estados Unidos</td><td>295 millones</td> </tr> </table> </body> </html>

Practica: Confeccionar una tabla que muestre en la primer columna los nombre de
distintos empleados de una compaia y en la segunda el sueldo bruto (la compaa tiene 4 empleados)

20. Tabla con encabezado (<th>)

La primera caracterstica que le vamos a agregar a una tabla son las celdas de encabezado. Normalmente la primera fila de una tabla puede representar los ttulos para cada columna.

Pgina 38

Para indicar que se trata de una celda de encabezado utilizamos el elemento <th> en lugar de <td> El navegador representa distinto las celdas de datos y las celdas de encabezamiento. Confeccionemos el mismo problema del concepto anterior pero agregando un ttulo a cada columna de la tabla mediante celdas de encabezamiento:
<html> <head> </head> <body> <table border="1"> <tr> <th>Paises</th><th>Cantidad de habitantes</th> </tr> <tr> <td>China</td><td>1300 millones</td> </tr> <tr> <td>India</td><td>1080 millones</td> </tr> <tr> <td>Estados Unidos</td><td>295 millones</td> </tr> </table> </body> </html>

Si observamos el cdigo de la pgina para indicar que se trata de una celda de tipo encabezado utilizamos el elemento th:
<tr> <th>Paises</th><th>Cantidad de habitantes</th> </tr>

El elemento th debe estar contenido entre las marcas <tr> y </tr>, es decir pertenecen a una fila. Para recordar el nombre de este nuevo elemento HTML:
<th> viene de table header cell que significa celda de encabezado de tabla.

Ejemplo:

Confeccionar una tabla que muestre los nombre de paises en una columna y su cantidad de habitantes en otra. Disponer un ttulo a cada columna mediante celdas creadas mediante el elemento th.
<html> <head> </head> <body> <table border="1"> <tr> <th>Paises</th><th>Cantidad de habitantes</th> </tr> <tr> <td>China</td><td>1300 millones</td> </tr> <tr> <td>India</td><td>1080 millones</td> </tr> <tr> <td>Estados Unidos</td><td>295 millones</td> </tr> </table> </body> </html>

Pgina 39

Practica: Confeccionar una tabla que muestre en la primer columna los nombre de
distintos empleados de una compaa y en la segunda el sueldo bruto (la compaa tiene 4 empleados) Mostrar los textos 'Nombre del Empleado' y 'Sueldo Bruto' como primer fila de la tabla.

21. Tabla con ttulo (<caption>)

Para disponer un ttulo a una tabla debemos incorporar el elemento caption inmediatamente despus que abrimos la marca table. El elemento caption requiere la marca de apertura y cierre. Dispongamos un ttulo a nuestra tabla con la poblacin de distintos paises:
<html> <head> </head> <body> <table border="1"> <caption>Poblacin de los paises con mayor cantidad de habitantes.</caption> <tr> <th>Paises</th><th>Cantidad de habitantes</th> </tr> <tr> <td>China</td><td>1300 millones</td> </tr> <tr> <td>India</td><td>1080 millones</td> </tr> <tr> <td>Estados Unidos</td><td>295 millones</td> </tr> </table> </body> </html>

Como podemos observar la marca caption est inmediatamente despus que se abre la marca de comienzo de la tabla:
<table border="1"> <caption>Poblacin de los paises con mayor cantidad de habitantes.</caption> <tr>

Para recordar el nombre de este nuevo elemento HTML: <caption> significa ttulo.

Ejemplo:

Confeccionar una tabla que muestre los nombre de paises en una columna y su cantidad de habitantes en otra. Disponer un ttulo de los datos que representa la tabla.
<html> <head> </head> <body> <table border="1"> <caption>Poblacin de los paises con mayor cantidad de habitantes.</caption> <tr> <th>Paises</th><th>Cantidad de habitantes</th> </tr> <tr> <td>China</td><td>1300 millones</td> </tr> <tr> <td>India</td><td>1080 millones</td>

Pgina 40

</tr> <tr> <td>Estados Unidos</td><td>295 millones</td> </tr> </table> </body> </html>

Practica: Confeccionar una tabla que muestre en la primer columna los nombre de
distintos empleados de una compaa y el la segunda el sueldo bruto (la compaa tiene 4 empleados) Disponer en la tabla un ttulo representativo.

22. Tabla y combinacin de celdas.

En algunas situaciones se necesita que una celda ocupe el lugar de dos o ms celdas en forma horizonzal o vertical, para estos casos el elemento td o th dispone de dos propiedades llamadas rowspan y colspan. A estas propiedades se les asigna un valor entero a partir de 2. Si queremos que una celda ocupe tres columnas luego inicializamos la propiedad rowspan con el valor 3:
<td colspan="3">Facturacin de los ltimos tres meses</td>

Si por el contrario queremos que una celda se extienda a nivel de filas luego hacemos:
<td rowspan="3">Secciones</td>

Veamos un ejemplo empleando el concepto de combinacin de celdas:

<html> <head> </head> <body> <table border="1"> <tr> <th rowspan="4">Recursos</th><th colspan="4">Facturacin de los ltimos tres meses</th> </tr> <tr> <td>Discos Duros</td><td>23000</td><td>27200</td><td>26000</td> </tr> <tr> <td>CPU</td><td>73000</td><td>67300</td><td>51000</td> </tr> <tr> <td>Monitores</td><td>53000</td><td>72000</td><td>88000</td> </tr> </table> </body> </html>

Veamos como definimos la primer fila de la tabla:

<tr> <th rowspan="4">Recursos</th><th colspan="4">Facturacin de los ltimos tres meses</th> </tr>

Como podemos observar la primer celda la expandimos hacia abajo 4 casilla y la segunda celda la expandimos hacia la derecha en 4 celdas. Cuando tenemos que disponer las celdas de la segunda fila debemos tener en cuenta que la primera est ocupada. Luego el cdigo es:

Pgina 41

<tr> <td>Discos Duros</td><td>23000</td><td>27200</td><td>26000</td> </tr>

Ejemplo: Confeccionar una tabla que muestre la facturacin de los ltimos tres
meses de los artculos:'Discos Duros', 'CPU' y 'Monitores'. La primer columna debe mostrar solo el texto 'recursos' y en la primer fila el texto 'Facturacin de los ltimos tres meses'.
<html> <head> </head> <body> <table border="1"> <tr> <th rowspan="4">Recursos</th><th colspan="4">Facturacin de los ltimos tres meses</th> </tr> <tr> <td>Discos Duros</td><td>23000</td><td>27200</td><td>26000</td> </tr> <tr> <td>CPU</td><td>73000</td><td>67300</td><td>51000</td> </tr> <tr> <td>Monitores</td><td>53000</td><td>72000</td><td>88000</td> </tr> </table> </body> </html>

Practica:

Confeccionar una tabla que muestre los nombres de peridicos y su nombre de dominio agrupados por paises. En la primer columna disponer los nombre de paises, expandir en fila de acuerdo a la cantidad de diarios de cada pais.

23. Contenido de la cabecera de la pgina (<title>)

Hasta ahora habamos dispuesto la cabecera vaca, ya que casi toda la informacin que disponemos en ella no se visualiza en el navegador. La nica excepcion corresponde al elemento title. El elemento title nos permite definir el ttulo que aparecer en la barra del navegador (es decir en la parte ms alta de la ventana) Siempre debemos buscar un ttulo lo ms significativo en cuanto a lo que muestra la pgina. Veamos una simple pgina que muestre un mensaje y contenga un hipervnculo a una segunda pgina que muestre otro ttulo: pagina1.html
<html> <head> <title>Ttulo de la primer pgina</title> </head> <body> <h1>Prueba del elemento title</h1> <a href="pagina2.html">Ir a la segunda pgina</a> </body> </html>

Pgina 42

pagina2.html <html> <head> <title>Ttulo de la segunda pgina</title> </head> <body> <h1>Prueba del elemento title (segunda pgina)</h1> <a href="pagina1.html">Ir a la primer pgina</a> </body> </html>

Ejemplo: Confeccionar dos pginas que inicialicen el elemento title. Disponer un

hipervnculo en cada pgina. pagina1.html
<html> <head> <title>Ttulo de la primer pgina</title> </head> <body> <h1>Prueba del elemento title</h1> <a href="pagina2.html">Ir a la segunda pgina</a> </body> </html>

pagina2.html
<html> <head> <title>Ttulo de la segunda pgina</title> </head> <body> <h1>Prueba del elemento title (segunda pgina)</h1> <a href="pagina1.html">Ir a la primer pgina</a> </body> </html>

Practica: Confeccionar una pgina que muestre en el elemento title el nombre de

dominio del sitio.

24. Contenido de la cabecera de la pgina (<meta>)

Un elemento que no se visualiza es el meta, que tiene por objetivo especificar informacin sobre el propio documento. Veamos las dos propiedades fundamentales de la marca meta y los valores ms comunes con lo que podemos inicializarlos:
<meta name="nombre de la propiedad" content="valor de la propiedad">

Name almacena el nombre de la propiedad y content el valor de la propiedad. No existe ninguna especificacin de la W3C que defina los valores posibles para el atributo name, si bien existen algunos que son estandares de facto (description, keywords, author etc.) Veamos las propiedades y valores ms comunes
<meta name="keywords" content="html, programacin, webmaster">

Los buscadores tienen en cuenta los metadatos. Si en la pgina inicializamos la propiedad name del elemento meta con el valor keywords luego buscar en la

Pgina 43

propiedad content las distintas palabras claves ms representativas para dicha pgina. Esto es muy til para posicionar nuestra pgina segn el contenido que provee. Veamos otras inicializaciones del elemento meta:
<meta name="description" content="El objetivo de este tutorial es presentar los conceptos bsicos de HTML. Es objetivo prioritario respetar los estndares del W3C">

En este caso especificamos una descripcin de la pgina, pudiendo ser del sitio si se trata de la pgina principal.
<meta name="author" content="Diego Rodriguez"> <meta name="copyright" content="Interpolacion inc.">

Ejemplo: Confeccionar una pgina HTML. Definir el elemento title y los metadatos
para indicar autor, palabras claves para buscadores, descripcin de la pgina y copyright. pagina1.html
<html> <head> <title>HTML Ya</title> <meta name="keywords" content="html, programacin, webmaster, tutorial"> <meta name="description" content="El objetivo de este tutorial es presentar los conceptos bsicos de HTML. Es objetivo prioritario respetar los estndares del W3C"> <meta name="author" content="Diego Rodriguez"> <meta name="copyright" content="Interpolacion inc."> </head> <body> </body> </html>

25. Comentarios dentro de una pgina <!-- -->

Un comentario es un texto que solo le interesa a la persona que desarroll la pgina, el navegador ignora todo el contenido que se encuentra dentro de esta marca. Los comentarios son muy tiles para el desarrollador de la pgina. Uno deja anotaciones para facilitar el mantenimiento del sitio. Adems hay que tener en cuenta que puede ser otra persona la que desarrolle en otro momento el mantenimiento de las pginas que desarrollamos nosotros. Lo que para uno puede ser muy obvio a otro desarrollador puede no ser tan obvio. Otro uso muy habitual cuando estamos desarrollando la pgina si queremos deshabilitar una parte del cdigo podemos encerrarla entre los caracteres de comentarios. La sintaxis para definir un comentario es:
<!-- Aqu va el comentario -->

Es obligatorio luego del caracter de menor < disponer el signo de admiracin y los dos guiones seguidos. Cerramos el comentario con dos guiones y el signo de mayor > Confeccionaremos un pgina donde emplearemos comentarios:
<html> <head> </head> <body> <!-- Corresponden a datos del ao 2006. Modificar a principios de 2007--> <table border="1">

Pgina 44

<tr> <th rowspan="4">Recursos</th><th colspan="4">Facturacin de los ltimos tres meses</th> </tr> <tr> <td>Discos Duros</td><td>23000</td><td>27200</td><td>26000</td> </tr> <tr> <td>CPU</td><td>73000</td><td>67300</td><td>51000</td> </tr> <tr> <td>Monitores</td><td>53000</td><td>72000</td><td>88000</td> </tr> </table> </body> </html>

Un comentario puede abarcar varias lneas:

<!-comentarios comentarios comentarios comentarios comentarios comentarios comentarios comentarios --> comentarios comentarios comentarios comentarios comentarios comentarios comentarios comentarios comentarios comentarios comentarios comentarios comentarios comentarios comentarios comentarios

De todos modos hay que tener en cuenta que cuando un navegador pide la pgina a un sitio el servidor enva el archivo HTML completo, es decir con los comentarios. Los comentarios consumen ancho de banda del servidor.

Ejemplo:

Confeccionar una pgina que contenga una tabla. Almacenar en un comentario datos referentes al contenido de la tabla que solo interesen al desarrollador.
<html> <head> </head> <body> <!-- Corresponden a datos del ao 2006. Modificar a principios de 2007--> <table border="1"> <tr> <th rowspan="4">Recursos</th><th colspan="4">Facturacin de los ltimos tres meses</th> </tr> <tr> <td>Discos Duros</td><td>23000</td><td>27200</td><td>26000</td> </tr> <tr> <td>CPU</td><td>73000</td><td>67300</td><td>51000</td> </tr> <tr> <td>Monitores</td><td>53000</td><td>72000</td><td>88000</td> </tr> </table> </body> </html>

Practica:

Confeccionar un pgina que muestre dos tablas. Luego comentar la segunda y ver el resultado.

Pgina 45

26. Sintaxis para caracteres especiales.

Posiblemente hasta ahora no se a preguntado como disponer dentro de una pgina los caracteres: < y >. Veremos que no los podemos disponer directamente ya que el navegador los confudira con los caracteres que se utilizan para las marcas HTML. La solucin es utilizar otra sintaxis para dichos caracteres, veamos los ms utilizados:
< > & " &lt; &gt; &amp; &quot; &nbsp; &copy; &euro;

//Espacio en blanco.

Es decir la sintaxis es disponer un ampersand seguido de un nombre significativo (por lo menos para los que entienden ingles) y finalmente un punto y coma. Para ver su funcionamiento mostraremos la siguiente ecuacin:
10+x*y < 12*z

pagina1.html
<html> <head> <title>Ttulo de la primer pgina</title> </head> <body> <h1> 10+x*y &lt; 12*z </h1> </body> </html>

Ejemplo: Mostrar la siguiente ecuacin:

10+x*y agregar aqu el smbolo menor 12*z
<html> <head> <title>Ttulo de la primer pgina</title> </head> <body> <h1> 10+x*y remplazar aqu el caracter especial del menor </h1> </body> </html>

12*z

Practica: Mostrar una tabla con dos columnas en la primera enumerar una serie
de artculos y en la segunda sus precios (agregarle el caracter de Euros a cada precio)

27. Formulario - <form>

Un formulario permite que el visitante al sitio cargue datos y sean enviados al servidor. Es el medio ideal para registrar comentarios del visitante sobre el sitio, solicitar productos, sacar turnos etc. De todos modos veremos que el lenguaje HTML solo tiene el objetivo de crear el formulario. El HTML no tiene la responsabilidad de registrar los datos en el servidor, esta actividad est delegada a un lenguaje que se ejecute en el servidor (PHP, ASP, ASP.Net, JSP etc.)

Pgina 46

Como este curso nos concentramos solamente en el lenguaje HTML no veremos como registrar los datos en el servidor. Veamos la sintaxis bsica para crear un formulario donde ingresemos nuestro nombre. Para crear un formulario debemos utilizar el elemento form, que tiene marca de comienzo y fin. Dentro de la marca form veremos otros elementos para crear botones, editores de lnea, cuadros de chequeo, radios de seleccin etc. Confeccionaremos un formulario para el ingreso de nuestro nombre y un botn para el envo del dato ingresado al servidor:
<html> <head> <title>Prueba de formulario</title> </head> <body> <form action="/registrardatos.php" method="post"> Ingrese su nombre: <input type="text" name="nombre" size="20"> <br> <input type="submit" value="enviar"> </form> </body> </html>

Veamos detenidamente la estructura de un formulario elemental, lo primero la apertura de la marca form donde debemos definir dos propiedades (action y method):
<form action="/registrardatos.php" method="post">

La propiedad action se inicializa con el nombre de la pgina que procesar los datos en el servidor. Como no conocemos la sintaxis de un lenguaje de servidor almacen en la raiz de este sitio una pgina codificada en PHP que recibe los datos del formulario y los imprime en una nueva pgina (recordar que en este curso no se ve como programar en el servidor) Todo los formularios que implemento y los que usted implementar como ejercicios deben llamar a esta pgina: "/registrardatos.php" ms adelante cuando conozca un lenguaje de servidor podr almacenarlos en una base de datos, consultar otros datos, modificar datos existentes etc. La segunda propiedad que debemos inicializar es method. Esta propiedad puede almacenar nicamente dos valores (post o get) Normalmente un formulario se enva mediante post (los datos se envan con el cuerpo del formulario) En caso de utilizar get los datos se envan en la cabecera de la peticin de la pgina, utilizando el mtodo get estamos limitados en la cantidad de datos a enviar, no asi con el mtodo post. Ahora veamos el cuadro de texto donde se ingresa el nombre:
Ingrese su nombre: <input type="text" name="nombre" size="20"> <br>

El mensaje "Ingrese su nombre:" es un texto fijo. El elemento input permite definir un cuadro de texto (editor de lnea) si asignamos a la propiedad type el valor "text". Todo cuadro de texto debe inicializar la propiedad name con un nombre para el cuadro de texto. Este es un dato fundamental para poder recuperar el dato ingresado en el servidor (por ejemplo mediante PHP)

Pgina 47

Por ltimo inicializamos la propiedad size con el valor 20, esto significa que el cuadro de texto se dimensiona para permitir mostrar 20 caracteres (no se limita la cantidad de caracteres a ingresar por parte del visitante sino la cantidad de caracteres que se pueden visualizar) Seguidamente:
<input type="submit" value="enviar">

Tambin mediante el elemento input definimos un botn para el envo de datos al servidor. Debemos inicializar la propiedad type con el valor submit, con esto ya tenemos un botn para el envo de datos. La propiedad value almacena la etiqueta que debe mostrar el botn. Finalmente cerramos el formulario:
</form>

Ejemplo: Confeccionar un formulario que contenga un cuadro de texto donde el

visitante debe ingresar su nombre y un botn de tipo submit para el envo de los datos ingresados al servidor (tener en cuenta que la pgina que procesa los datos del formulario en el servidor se encuentra en la raiz del sitio y se llama: registrardatos.php
<html> <head> <title>Prueba de formulario</title> </head> <body> <form action="/registrardatos.php" method="post"> Ingrese su nombre: <input type="text" name="nombre" size="20"> <br> <input type="submit" value="enviar"> </form> </body> </html>

Practica: Confeccionar un formulario que solicite el ingreso del nombre de una

persona y su edad. Luego llamar a la pgina "/registrardatos.php" para que imprima en pantalla los valores ingresados. Disponer un botn de tipo submit para el envo de los datos.

28. Formulario - input type="text"/ input type="password"

En el concepto anterior vimos como implementar un formulario bsico. Veamos ahora con ms detenimiento el elemento input. Este elemento hemos visto que nos permite definir cuadros de texto y botn para subir los datos al servidor. Ahora veremos que tambin podemos definir cuadros para el ingreso de una clave y botones para borrar el contenido de todos los controles del formulario. Confeccionaremos un formulario que solicite el ingreso del nombre de un usuario y su clave:
<html> <head> <title>Prueba de formulario</title> </head> <body> <form action="/registrardatos.php" method="post">

Pgina 48

Ingrese su nombre: <input type="text" name="nombre" size="20"> <br> Ingrese su clave: <input type="password" name="clave" size="12"> <br> <input type="submit" value="enviar"> <input type="reset" value="borrar"> </form> </body> </html>

Veamos la sintaxis nueva para definir un cuadro de texto para el ingreso de una clave:
<input type="password" name="clave" size="12">

Utilizamos el mismo elemento input pero inicializamos la propiedad type con el valor "password", con esto logramos que cuando el visitante ingrese la clave se visualicen asteriscos en lugar de los caracteres que tipeamos. Luego para definir un botn que permita borrar todos los datos ingresados hasta el momento lo hacemos mediante:
<input type="reset" value="borrar">

Es decir inicializamos la propiedad type con el valor "reset", con esto sabe el navegador que cuando dicho botn sea presionado debe borrar todos los controles de ingreso de datos de dicho formulario. Otra cosa que hay que tener en cuenta que la propiedad name de cada elemento input debe tener un nombre distinto (esto debido a que en el servidor se lo rescata a partir de este nombre)

Ejemplo:

Confeccionar un formulario que solicite el ingreso del nombre de un usuario y su clave. Mostrar asteriscos donde se ingresa la clave. Disponer dos botones, uno para el envo de datos al servidor y otro para borrar el contenido de todos los controles (editores de texto) que contiene el formulario.
<html> <head> <title>Prueba de formulario</title> </head> <body> <form action="/registrardatos.php" method="post"> Ingrese su nombre: <input type="text" name="nombre" size="20"> <br> Ingrese su clave: <input type="password" name="clave" size="12"> <br> <input type="submit" value="enviar"> <input type="reset" value="borrar"> </form> </body> </html>

Practica:

Confeccionar un formulario que solicite el ingreso de mail de una persona y luego pida el ingreso de su clave dos veces (recordar inicializar la propiedad name del elemento input con distintos nombres para cada control)

29. Formulario - textarea

Pgina 49

El elemento de tipo textarea nos permite el ingreso de varias lneas a diferencia del cuadro de texto (input/text) Es muy utilizado cuando queremos ingresar un comentario de una longitud de caracteres grande. Confeccionemos un formulario para que un visitante pueda ingresar su nombre, su mail y un comentario del sitio, empleando para este ltimo dato a ingresar un elemento de tipo textarea:
<html> <head> <title>Prueba de formulario</title> </head> <body> <form action="/registrardatos.php" method="post"> Ingrese su nombre: <input type="text" name="nombre" size="30"><br> Ingrese su mail: <input type="text" name="mail" size="50"><br> Comentarios:<br> <textarea name="comentarios" rows="5" cols="60"></textarea> <br> <input type="submit" value="Enviar"> </form> </body> </html>

La sintaxis para definir un rea de texto para el ingreso de mltiples lneas es:
<textarea name="comentarios" rows="5" cols="60"></textarea>

Es un elemento que requiere una marca de comienzo y una de finalizacin. Adems de tener la propiedad name similar a los otros elementos relacionados a formularios tiene dos propiedades llamadas rows y cols. Estas dos propiedades indican la cantidad de filas y columnas que visualiza el rea de texto.

Ejemplo:

Confeccionar un formulario para que un visitante pueda ingresar su nombre, su mail y un comentario del sitio, empleando para este ltimo dato a ingresar un elemento de tipo textarea.
<html> <head> <title>Prueba de formulario</title> </head> <body> <form action="/registrardatos.php" method="post"> Ingrese su nombre: <input type="text" name="nombre" size="30"><br> Ingrese su mail: <input type="text" name="mail" size="50"><br> Comentarios:<br> <textarea name="comentarios" rows="5" cols="60"></textarea> <br> <input type="submit" value="Enviar"> </form> </body> </html>

Practica:

Confeccionar un formulario que permita ingresar el nombre de una persona, su mail, su dni (documento nacional de identidad) y finalmente su curriculum (este ltimo dato hacerlo utilizando un textarea)

Pgina 50

30. Formulario - input type="checkbox"

El elemento checkbox es otro control que se puede insertar en un formulario. Un checkbox es una casilla de seleccin que puede tomar dos valores (seleccionado/no seleccionado) Para ver su funcionamiento implementaremos un formulario que solicite el ingreso del nombre de una persona y 4 elementos de tipo checkbox para que seleccione los lenguajes de programacin que conoce:
<html> <head> <title>Prueba de formulario</title> </head> <body> <form action="/registrardatos.php" method="post"> Ingrese su nombre: <input type="text" name="nombre" size="30"><br> Seleccione los lenguajes que conoce: <br> <input type="checkbox" name="java">Java<br> <input type="checkbox" name="cmasmas">C++<br> <input type="checkbox" name="c">C<br> <input type="checkbox" name="csharp">C#<br> <input type="submit" value="Enviar"> </form> </body> </html>

Veamos la sintaxis para definir controles de formulario de tipo checkbox:

<input type="checkbox" name="java">Java<br>

Como vemos tambin utilizamos el elemento HTML input, donde inicializamos la propiedad type con el valor checkbox. Un control checkbox no muestra texto, solo una casilla que el operador puede tildar o destildar. Si queremos que aparezca un mensaje junto al checkbox solo lo agregamos seguido al elemento input. Es importante hacer notar que los caracteres permitidos de la propiedad name son los caracteres alfabticos y los nmeros siempre y cuando no sea el primero.

Ejemplo: Implementar un formulario que solicite el ingreso del nombre de una

persona y 4 elementos de tipo checkbox para que seleccione los lenguajes de programacin que conoce.
<html> <head> <title>Prueba de formulario</title> </head> <body> <form action="/registrardatos.php" method="post"> Ingrese su nombre: <input type="text" name="nombre" size="30"><br> Seleccione los lenguajes que conoce: <br> <input type="checkbox" name="java">Java<br> <input type="checkbox" name="cmasmas">C++<br> <input type="checkbox" name="c">C<br> <input type="checkbox" name="csharp">C#<br> <input type="submit" value="Enviar"> </form>

Pgina 51

</body> </html>

Practica: Confeccione un formulario que solicite el ingreso de un mail, una clave y luego muestre una serie de ttulos de pelculas con su respectivo checkbox. Disponer tambin del botn de tipo submit para el envo de datos al servidor.

31. Formulario - input type="radio"

Cuando tenemos un conjunto de opciones pero solo una puede ser seleccionada debemos emplear controles visuales de tipo radio. Para definir controles de tipo radio tambin utilizamos el elemento input inicializando la propiedad type con el valor "radio" Veamos un ejemplo del empleo de este control grfico, supongamos que necesitamos indicar el tipo de estudios que tenemos utilizando controles de tipo radio:
<html> <head> <title>Prueba de formulario</title> </head> <body> <form action="/registrardatos.php" method="post"> Ingrese su nombre: <input type="text" name="nombre" size="30"><br> Seleccione el mximo nivel de estudios que tiene: <br> <input type="radio" name="estudios" value="1">Sin estudios<br> <input type="radio" name="estudios" value="2">Primario<br> <input type="radio" name="estudios" value="3">Secundario<br> <input type="radio" name="estudios" value="4">Universitario<br> <input type="submit" value="Enviar"> </form> </body> </html>

Veamos como se definen los controles de tipo radio:

<input type="radio" estudios<br> <input type="radio" <input type="radio" <input type="radio" name="estudios" value="1">Sin name="estudios" value="2">Primario<br> name="estudios" value="3">Secundario<br> name="estudios" value="4">Universitario<br>

Como podemos observar todos tienen el mismo valor en la propiedad name, con esto se logra que cuando seleccionamos uno se deseleccione el actual. El valor que se rescata en el servidor es el dato almacenado en la propiedad value. Si queremos disponer varios grupos de controles de tipo radio debemos definirles a cada grupo la propiedad name nombres distintos.

Ejemplo: Solicitar el

ingreso del nombre de una persona y el mximo nivel en estudios alcanzado (sin estudios, estudios primarios, estudios secundarios o estudios universitarios) Ulitilzar controles de tipo radio para la seleccin de estudios realizados.
<html> <head> <title>Prueba de formulario</title> </head> <body> <form action="/registrardatos.php" method="post">

Pgina 52

Ingrese su nombre: <input type="text" name="nombre" size="30"><br> Seleccione el mximo nivel de estudios que tiene: <br> <input type="radio" name="estudios" value="1">Sin estudios<br> <input type="radio" name="estudios" value="2">Primario<br> <input type="radio" name="estudios" value="3">Secundario<br> <input type="radio" name="estudios" value="4">Universitario<br> <input type="submit" value="Enviar"> </form> </body> </html>

Practica:

Confeccionar un formulario que solicite cual sistema operativo utiliza ms (linux o window)

32. Formulario - select (cuadro de seleccin individual)

El elemento select es un cuadro de seleccin. Este elemento HTML nos permite seleccionar una opcin entre un conjunto. Veremos en el concepto prximo que segn como la configuramos podemos seleccionar varias opciones. Veamos con un ejemplo como crear un control de tipo select. Confeccionemos un formulario que solicite cargar el nombre de una persona y el pais donde vive, este ltimo elemento mediante un control de tipo select permitir seleccionar el pais. El archivo pagina1.html es:
<html> <head> <title>Prueba de formulario</title> </head> <body> <form action="/registrardatos.php" method="post"> Ingrese su nombre: <input type="text" name="nombre" size="30"><br> Seleccione su pais: <select name="pais"> <option value="1">Costa Rica</option> <option value="2">Espaa</option> <option value="3">Mxico</option> <option value="4">Guatemala</option> <option value="5">Honduras</option> <option value="7">El Salvador</option> <option value="8">Venezuela</option> <option value="9">Colombia</option> <option value="10">Cuba</option> <option value="11">Bolivia</option> <option value="13">Per</option> <option value="14">Ecuador</option> <option value="15">Paraguay</option> <option value="16">Uruguay</option> <option value="17">Chile</option> </select> <br> <input type="submit" value="Enviar"> </form> </body> </html>

Pgina 53

Veamos la sintaxis para crear un cuadro de seleccin, primero abrimos la marca select la cual tiene definido la propiedad name:
<select name="pais">

Luego sin cerrar el select definimos tantos elementos de tipo option como opciones tendr el cuadro de seleccin:
<option value="1">Costa Rica</option> <option value="2">Espaa</option> <option value="3">Mxico</option>

El elemento option define el texto a mostrar y en la propiedad value indica el valor a enviar al servidor en caso de estar seleccionada dicha opcin. Luego de definir todas las opciones de nuestro cuadro de seleccin cerramos la marca select:
</select>

Una variante grfica de este control es inicializar la propiedad size del elemento select con un valor distinto a uno, con esto creamos un cuadro de seleccin que muestra simultneamente varios elementos (de todos modos solo uno se puede elegir) Es decir que con la propiedad size solo logramos un cambio esttico del control.

Ejemplo: Confeccionar un formulario que solicite cargar el nombre de una persona

y el pais donde vive, este ltimo elemento mediante un control de tipo select permitir seleccionar el pais. (Agregue la propiedad size al elemento select con el valor 5)
<html> <head> <title>Prueba de formulario</title> </head> <body> <form action="/registrardatos.php" method="post"> Ingrese su nombre: <input type="text" name="nombre" size="30"><br> Seleccione su pais: <select name="pais"> <option value="1">Argentina</option> <option value="2">Espaa</option> <option value="3">Mxico</option> <option value="4">Guatemala</option> <option value="5">Honduras</option> <option value="7">El Salvador</option> <option value="8">Venezuela</option> <option value="9">Colombia</option> <option value="10">Cuba</option> <option value="11">Bolivia</option> <option value="13">Per</option> <option value="14">Ecuador</option> <option value="15">Paraguay</option> <option value="16">Uruguay</option> <option value="17">Chile</option> </select> <br> <input type="submit" value="Enviar"> </form> </body> </html>

Practica: Confeccionar un formulario que solicite el ingreso del nombre de una

persona y permita votar el sitio. Mediante un cuadro de seleccin el visitante puede elegir entre las siguientes opciones: Excelente, Muy Bueno, Bueno, Regular y Malo.

Pgina 54

33. Formulario - select (cuadro de seleccin mltiple)

Una variante del cuadro de seleccin que vimos en el concepto anterior es permitir que el visitante del sitio pueda seleccionar varias opciones. Supongamos que tenemos un cuadro de seleccin con una lista de colores y queremos que el visitante pueda elegir varios y no uno solo. La pgina que resuelve este problema es:
<html> <head> <title>Prueba de formulario</title> </head> <body> <form action="/registrardatos.php" method="post"> Seleccione uno o varios colores (Presione Ctrl para seleccionar varios colores)<br> <select name="colores[]" size="4" multiple> <option value="1">Rojo</option> <option value="2">Verde</option> <option value="3">Azul</option> <option value="4">Amarillo</option> <option value="5">Blanco</option> <option value="6">Negro</option> <option value="7">Naranja</option> <option value="8">Violeta</option> </select> <br> <input type="submit" value="Enviar"> </form> </body> </html>

Podemos observar la sintaxis para la definicin de un cuadro de seleccin mltiple:

<select name="colores[]" size="4" multiple>

Definimos una propiedad llamada multiple y no le asignamos valor, por otro lado al nombre definido en la propiedad name le agregamos al final los caracteres [] para que desde el servidor podamos identificar que el control retorna posiblemente muchos valores. Es tambin comn inicializar la propiedad size con un valor mayor a 1 para que sea ms fcil la seleccin. La mayora de los navegadores permiten seleccionar opciones que no se encuentran juntas mediante el mouse y presionando simultneamente la tecla Ctrl.

Ejemplo: Confeccionar un cuadro de seleccin mltiple para elegir colores de una

lista. Permitir la seleccin de varios colores.
<html> <head> <title>Prueba de formulario</title> </head> <body> <form action="/registrardatos.php" method="post"> Seleccione uno o varios colores (Presione Ctrl para seleccionar varios colores)<br> <select name="colores[]" size="4" multiple> <option value="1">Rojo</option> <option value="2">Verde</option> <option value="3">Azul</option> <option value="4">Amarillo</option> <option value="5">Blanco</option>

Pgina 55

<option value="6">Negro</option> <option value="7">Naranja</option> <option value="8">Violeta</option> </select> <br> <input type="submit" value="Enviar"> </form> </body> </html>

Practica: Confeccionar un formulario que muestre en un control select un serie de

mail. Luego permitir que el visitante seleccione uno o varios mail del cuadro de seleccin.

34. Formulario - select (agrupamiento de opciones)

Hemos visto que podemos crear cuadros de seleccin individual o de seleccin mltiple. Ahora veamos que podemos agrupar las opciones que tiene el cuadro de seleccin, esto tiene sentido si el cuadro de seleccin tiene muchos items. Se cuenta con un nuevo elemento llamado optgroup que agrupa un conjunto de elementos option. Veamos un ejemplo de agrupar una serie de opciones, agruparemos una serie de frutas y verduras:
<html> <head> <title>Prueba de formulario</title> </head> <body> <form action="/registrardatos.php" method="post"> Seleccione una fruta o verdura: <select name="articulo"> <optgroup label="Frutas"> <option value="1">Naranjas</option> <option value="2">Manzanas</option> <option value="3>Sandia</option> <option value="4">Frutilla</option> <option value="5">Durazno</option> <option value="6">Ciruela</option> </optgroup> <optgroup label="Verduras"> <option value="7">Lechuga</option> <option value="8">Acelga</option> <option value="9">Zapallo</option> <option value="10">Papas</option> <option value="11">Batatas</option> <option value="13">Zanahorias</option> <option value="14">Rabanitos</option> <option value="15">Calabaza</option> </optgroup> </select> <br> <input type="submit" value="Enviar"> </form> </body> </html>

Como podemos observar para agrupar una serie de opciones dentro de un select debemos encerrarlas con el elemento optgroup:

Pgina 56

<optgroup label="Frutas"> <option value="1">Naranjas</option> <option value="2">Manzanas</option> <option value="3>Sandia</option> <option value="4">Frutilla</option> <option value="5">Durazno</option> <option value="6">Ciruela</option> </optgroup>

La propiedad label del elemento optgroup aparece dentro del control select pero no se puede seleccionar, es un ttulo. La propiedad label del elemento optgroup es el texto que se debe mostrar dentro del select. Se puede hacer agrupamiento de opciones y permitir selecciones mltiples.

Ejemplo: Confeccionar una pgina que muestre un control de tipo select. Agrupar
las opciones en dos grupos, en uno las frutas y en otro las verduras. Utilizar el elemento optgroup para el agrupamiento.
<html> <head> <title>Prueba de formulario</title> </head> <body> <form action="/registrardatos.php" method="post"> Seleccione una fruta o verdura: <select name="articulo"> <optgroup label="Frutas"> <option value="1">Naranjas</option> <option value="2">Manzanas</option> <option value="3>Sandia</option> <option value="4">Frutilla</option> <option value="5">Durazno</option> <option value="6">Ciruela</option> </optgroup> <optgroup label="Verduras"> <option value="7">Lechuga</option> <option value="8">Acelga</option> <option value="9">Zapallo</option> <option value="10">Papas</option> <option value="11">Batatas</option> <option value="13">Zanahorias</option> <option value="14">Rabanitos</option> <option value="15">Calabaza</option> </optgroup> </select> <br> <input type="submit" value="Enviar"> </form> </body> </html>

Practica:

Confeccione un control de tipo select con los nombres de paises de Amrica y Europa. Agrupe los paises por continente.

35. Formulario - button

El elemento button es un control visual que se puede utilizar para sustituir los controles:
<input type="submit" value="Enviar"> <input type="reset" value="Borrar">

Entre otras las ventanjas de este elemento es que podemos agregar imgenes dentro del botn. La sintaxis de este elemento es la siguiente:

Pgina 57

<button type="submit">

Texto a mostrar dentro del botn.

</button>

Todo lo que est contenido entre las marcas de comienzo y fin del elemento button aparece dentro del botn, como por ejemplo una imagen, un prrafo, enfatizado de una palabra etc. La propiedad type se puede inicializar con alguno de estos tres valores: "submit", "reset" y "button". Los dos primeros cumplen las funciones que ya conocemos es decir envo de los datos al servidor y borrado del contenido de los controles. En cuanto al tercer valor posible de la propiedad type significar que deberemos codificar una funcin en javascript para procesar el evento. Para ver el funcionamiento confeccionaremos un formulario que solicite el ingreso del nombre de una persona y dos elementos button para subir el dato al servidor o borrar el dato cargado:
<html> <head> <title>Prueba de formulario</title> </head> <body> <form action="/htmlya/registrardatos.php" method="post"> Ingrese su nombre: <input type="text" name="nombre" size="20"> <br> <button type="submit">Enviar<img src="/imagenes/enviar.gif" alt="envio"></button> <button type="reset">Borrar<img src="/imagenes/borrar.gif" alt="borrado"></button> </form> </body> </html>

Perfectamente podemos definir un texto y cargar una imagen dentro del botn:
<button type="submit">Enviar<img src="/imagenes/enviar.gif" alt="envio"></button>

Ejemplo: Confeccionar un formulario que solicite el ingreso del nombre de una

persona y dos elementos button para subir el dato al servisor o borrar el dato cargado.
<html> <head> <title>Prueba de formulario</title> </head> <body> <form action="/registrardatos.php" method="post"> Ingrese su nombre: <input type="text" name="nombre" size="20"> <br> <button type="submit">Enviar<img src="/htmlya/imagenes/enviar.gif" alt="envio"></button> <button type="reset">Borrar<img src="/htmlya/imagenes/borrar.gif" alt="borrado"></button> </form> </body> </html>

Practica: Confeccionar un formulario que solicite el ingreso del nombre de usuario

y su clave. Disponer un botn para subir los datos al servidor (en el botn escribir el texto: "Ingreso al" y en la lnea siguiente "sitio")

Pgina 58

36. Formulario - input type="button"

Otro tipo de boton que podemos crear es mediante el elemento input y fijando en la propiedad type el valor "button". Este tipo de botn no se lo puede hacer que acte como los botones de tipo submit o reset, su actividad depender de un programa desarrollado generalmente en JavaScript. Si bien no podemos ver su funcionamiento por el momento, si podemos implementar una pgina que muestre este control. Confeccionaremos una pgina que muestre el teclado de una calculadora:
<html> <head> <title>Prueba de formulario</title> </head> <body> <form action="/registrardatos.php" method="post"> <h1>Resultado:<h1> <input type="button" name="boton7" value=" 7 "> <input type="button" name="boton8" value=" 8 "> <input type="button" name="boton9" value=" 9 "> <input type="button" name="botondiv" value=" / "> <br> <input type="button" name="boton4" value=" 4 "> <input type="button" name="boton5" value=" 5 "> <input type="button" name="boton6" value=" 6 "> <input type="button" name="botondiv" value=" * "> <br> <input type="button" name="boton1" value=" 1 "> <input type="button" name="boton2" value=" 2 "> <input type="button" name="boton3" value=" 3 "> <input type="button" name="botonmas" value=" + "> <br> <input type="button" name="boton0" value=" 0 "> <input type="button" name="botonigual" value=" = "> <input type="button" name="botonmenos" value=" - "> </form> </body> </html>

Como ver cuando se presiona el botn no sucede nada. Esto es as porque no hemos asignado ninguna actividad cuando sea presionado. Recordemos que HTML solo tiene Contenido, si queremos funcionalidad deberemos definir los eventos para dichos botones.

Ejemplo:

Confeccionar una pgina que muestre una pregunta y luego tres respuestas posibles. Al lado de cada respuesta disponer un botn creado con el elemento input inicializando la propiedad type con el valor="button"
<html> <head> <title>Prueba de formulario</title> </head> <body> <form action="/registrardatos.php" method="post"> <h1>Resultado:<h1> <input type="button" name="boton7" value=" 7 "> <input type="button" name="boton8" value=" 8 "> <input type="button" name="boton9" value=" 9 "> <input type="button" name="botondiv" value=" / "> <br>

Pgina 59

<input type="button" <input type="button" <input type="button" <input type="button" <br> <input type="button" <input type="button" <input type="button" <input type="button" <br> <input type="button" <input type="button" <input type="button" </form> </body> </html>

name="boton4" value=" 4 name="boton5" value=" 5 name="boton6" value=" 6 name="botondiv" value=" name="boton1" value=" 1 name="boton2" value=" 2 name="boton3" value=" 3 name="botonmas" value="

"> "> "> * "> "> "> "> + "> ">

name="boton0" value=" 0 "> name="botonigual" value=" = name="botonmenos" value=" - ">

Practica:

Confeccionar una pgina que muestre una pregunta y luego tres respuestas posibles. Al lado de cada respuesta disponer un botn creado con el elemento input inicializando la propiedad type con el valor="button"

37. Formulario - input type="file"

El control de tipo file nos permite enviar un archivo al servidor. Nuevamente el HTML solo indica al navegador que debe enviar el archivo al servidor pero debe haber en el servidor un programa que lo almacene en una carpeta del servidor. Veamos la sintaxis para disponer un control de tipo file:
<input type="file" name="archi">

Nuevamente utilizamos el elemento HTML input para definir este tipo de control. En la propiedad type inicializamos con el valor file. Inicializar la propiedad name tambin es importante ya que mediante este nombre se lo recupera en el servidor. Otra cosa muy importante a tener en cuenta cuando hacemos upload de archivos al servidor es inicializar la propiedad enctype del elemento form:
<form method="post" action="/registrardatos.php" enctype="multipart/form-data">

Con esto indicamos al navegador que el formulario almacena uno o ms archivos que deben ser enviados al servidor. Confeccionemos una pgina que solicite el ingreso de un nombre y la foto de la persona:
<html> <head> <title>Prueba de formulario</title> </head> <body> <form action="/registrardatos.php" method="post" enctype="multipart/form-data"> Ingrese su nombre: <input type="text" name="nombre" size="30"><br> Seleccione la foto: <input type="file" name="foto"> <br> <input type="submit" value="Enviar"> </form> </body> </html>

Recordemos siempre inicializar la propiedad enctype del elemento form:

<form action="/registrardatos.php" method="post" enctype="multipart/form-data">

Pgina 60

Tenga en cuenta que si no se hace nign programa en el servidor el archivo no se almacena.

Ejemplo: Confeccionar un formulario que solicite el ingreso del nombre de una

persona y permita seleccionar y enviar su foto.
<html> <head> <title>Prueba de formulario</title> </head> <body> <form action="/registrardatos.php" method="post" enctype="multipart/form-data"> Ingrese su nombre: <input type="text" name="nombre" size="30"><br> Seleccione la foto: <input type="file" name="foto"> <br> <input type="submit" value="Enviar"> </form> </body> </html>

Practica: Confeccionar un formulario que solicite y enve al servidor dos archivos.

38. Formulario - input type="hidden"

Un campo hidden se lo denomina campo oculto. Este tipo de control no visualiza nada dentro del formulario. Su utilidad se presenta cuando desde el servidor se genera una pgina dinmica por ejemplo mediante PHP y se almacena en un campo oculto un valor que se rescatar al subir el formulario al servidor. Su utilidad real solo podr ser comprendida cuando estudie un lenguaje de servidor, pero veamos y conozcamos su sintaxis con un ejemplo. Confeccionar un formulario que solicite ingresar el nombre de una persona y en un campo oculto almacene una hora cualquiera:
<html> <head> <title>Prueba de formulario</title> </head> <body> <form action="/registrardatos.php" method="post"> <input type="hidden" value="10:20" name="hora"> Ingrese su nombre: <input type="text" name="nombre" size="30"> <br> <input type="submit" value="Enviar"> </form> </body> </html>

Como vemos la sintaxis para definir un campo oculto es:

<input type="hidden" value="10:20" name="hora">

En el atributo value almacenamos el valor (este valor no se puede modificar desde el formulario) Podemos imaginar una utilidad, supongamos que queremos que un visitante reenve un formulario cargado con todos los datos en un tiempo limitado, podramos almacenar en el campo oculto la primera vez que solicita la pgina que contiene el

Pgina 61

formulario donde se resgistrar dicha hora. Luego al subir el formulario ya cargado al servidor controlaremos mediante un lenguaje de servidor si la hora actual y la hora de pedido del formulario no hacen invalidar los datos.

Ejemplo:

Confeccionar un formulario que solicite ingresar el nombre de una persona y en un campo oculto almacene una hora cualquiera.
<html> <head> <title>Prueba de formulario</title> </head> <body> <form action="/registrardatos.php" method="post"> <input type="hidden" value="10:20" name="hora"> Ingrese su nombre: <input type="text" name="nombre" size="30"> <br> <input type="submit" value="Enviar"> </form> </body> </html>

39. Formulario - agrupamiento de controles.

El HTML dispone de un elemento llamado fieldset que solo tiene el objetivo de recuadrar y agrupar un conjunto de controles de un formulario. Debemos encerrar todos los controles a agrupar entre las marcas <fieldset> y </fieldset>. Adems para agregar un ttulo a este recuadro debemos agregar otro elemento HTML llamado legend. Confeccionemos un formulario que solicite los datos personales de una persona y los datos del lugar donde trabaja, cada grupo de datos los dispondremos en un fieldset:
<html> <head> <title>Prueba de formulario</title> </head> <body> <form action="/registrardatos.php" method="post"> <fieldset> <legend>Datos personales</legend> Apellido y nombre: <input type="text" name="nombre" size="30"><br> Documento de identidad: <input type="text" name="dni" size="8"><br> Fecha de nacimiento: <input type="text" name="fechanacimiento" size="12"><br> Direccin: <input type="text" name="direccionpersona" size="30"><br> </fieldset> <fieldset> <legend>Datos Laborales</legend> Nombre de la empresa: <input type="text" name="nombreempresa" size="30"><br> Actividad: <input type="text" name="actividad" size="50"><br> Direccin: <input type="text" name="direccionempresa" size="30"><br> </fieldset> <input type="submit" value="Enviar"> </form> </body>

Pgina 62

</html>

Podemos ver que cada grupo de controles est encerrado con el elemento fieldset:
<fieldset> <legend>Datos personales</legend> Apellido y nombre: <input type="text" name="nombre" size="30"><br> Documento de identidad: <input type="text" name="dni" size="8"><br> Fecha de nacimiento: <input type="text" name="fechanacimiento" size="12"><br> Direccin: <input type="text" name="direccionpersona" size="30"><br> </fieldset>

Luego el ttulo de cada fieldset lo disponemos con:

<legend>Datos personales</legend>

Ejemplo:

Confeccionar un formulario que solicite los datos personales de una persona y los datos del lugar donde trabaja, cada grupo de datos disponerlos en un fieldset.
<html> <head> <title>Prueba de formulario</title> </head> <body> <form action="/registrardatos.php" method="post"> <fieldset> <legend>Datos personales</legend> Apellido y nombre: <input type="text" name="nombre" size="30"><br> Documento de identidad: <input type="text" name="dni" size="8"><br> Fecha de nacimiento: <input type="text" name="fechanacimiento" size="12"><br> Direccin: <input type="text" name="direccionpersona" size="30"><br> </fieldset> <fieldset> <legend>Datos Laborales</legend> Nombre de la empresa: <input type="text" name="nombreempresa" size="30"><br> Actividad: <input type="text" name="actividad" size="50"><br> Direccin: <input type="text" name="direccionempresa" size="30"><br> </fieldset> <input type="submit" value="Enviar"> </form> </body> </html>

Practica:

Confeccionar un formulario que permita solicitar pizzas a domicilio. Agrupar los controles aquellos relacionados con el cliente y los referentes al pedido.

40. Formulario - controles con valores iniciales.

Un control puede aparecer cargado con un valor por defecto. Veamos como inicializar con valores por defecto para cada uno de los controles que hemos visto. Para inicializar un control de tipo text debemos dar un valor a la propiedad value:
<input type="text" value="aqui su nombre" name="nombre" size="20">

Pgina 63

El control aparece cargado con la cadena "aqui su nombre". Para inicializar un control de tipo textarea debemos indicar el dato entre el comienzo y el fin de la marca:
<textarea rows="10" cols="40" name="curriculum">Ingrese aqui su curriculum</textarea>

El control textarea se inicializa con la cadena "Ingrese aqui su curriculum" Para inicializar un control de tipo checkbox debemos disponer la propiedad checked sin asignar valor:
<input type="checkbox" name="java" checked>Opcion 1<br>

Con esto logramos que el checkbox aparezca tildado apenas aparece el formulario. Para inicializar un control de tipo radio debemos definir la propiedad checked sin valor, igual que un checkbox, con la salvedad que solo un un control de tipo radio puede tener definida esta propiedad:
<input type="radio" name="estudios" value="1" checked>Opcin 1<br>

Para inicializar un control de tipo select con seleccin individual debemos definir la propiedad selected de los elementos option:
<select name="pais"> <option value="1">Costa Rica</option> <option value="2" selected>Espaa</option> <option value="3">Mxico</option> <option value="4">Guatemala</option> <option value="5">Honduras</option> <option value="7">El Salvador</option> <option value="8">Venezuela</option> <option value="9">Colombia</option> <option value="10">Cuba</option> <option value="11">Bolivia</option> <option value="13">Per</option> <option value="14">Ecuador</option> <option value="15">Paraguay</option> <option value="16">Uruguay</option> <option value="17">Chile</option> </select>

En este caso aparece seleccionado Espaa, ms alla que sea el segundo option en la lista. Para inicializar un control de tipo select con seleccin mltiple debemos definir la propiedad selected de varios elementos option:
<select name="colores[]" size="4" multiple="multiple"> <option value="1" selected>Rojo</option> <option value="2">Verde</option> <option value="3" selected>Azul</option> <option value="4">Amarillo</option> <option value="5" selected>Blanco</option> <option value="6">Negro</option> <option value="7">Naranja</option> <option value="8">Violeta</option> </select>

En este ejemplo los items Rojo, Azul y Blanco aparecen seleccionados desde un comienzo. Confeccionaremos como ejemplo un formulario que solicite el ingreso del nombre de una persona. Luego que seleccione si es mayor de edad o no (por defecto inicializar en si), seguidamente el telfono (cargar por defecto 453) y por ltimo en un textarea solicitar que ingrese comentarios.

Pgina 64

<html> <head> <title>Prueba de formulario</title> </head> <body> <form action="/registrardatos.php" method="post"> Apellido y nombre: <input type="text" name="nombre" size="30"><br> Es mayor de edad?:<br> <input type="radio" name="radio1" checked value="si">Si<br> <input type="radio" name="radio1" value="no">No<br> Telefono: <input type="text" value="453-" name="telefono" size="15"><br> <textarea name="comentarios" rows="5" cols="40">Ingrese aqui sus comentarios</textarea><br> <input type="submit" value="Enviar"> </form> </body> </html>

Ejemplo: Confeccione un formulario que solicite el ingreso del nombre de una persona. Luego que seleccione si es mayor de edad o no (por defecto inicializar en si), seguidamente el telfono (cargar por defecto 453) y por ltimo en un textarea solicitar que ingrese comentarios.
<html> <head> <title>Prueba de formulario</title> </head> <body> <form action="/registrardatos.php" method="post"> Apellido y nombre: <input type="text" name="nombre" size="30"><br> Es mayor de edad?:<br> <input type="radio" name="radio1" checked value="si">Si<br> <input type="radio" name="radio1" value="no">No<br> Telefono: <input type="text" value="453-" name="telefono" size="15"><br> <textarea name="comentarios" rows="5" cols="40">Ingrese aqui sus comentarios</textarea><br> <input type="submit" value="Enviar"> </form> </body> </html>

Practica:

Confeccione un formulario de un libro de visitas, se debe solicitar el nombre, mail, pais de origen (por defecto la opcion seleccionada debe ser "seleccione pais"), valoracin del sitio (malo, regular, bueno, muy bueno, excelente) por defecto debe estar seleccionado "bueno". Por ltimo disponer un textarea donde se puede ingresar los comentarios.

41. Formulario - orden de foco de controles.

Todos los controles de formulario pueden definir una propiedad llamada tabindex que es un valor entero entre 0 y 32767. Este nmero indica el orden en que los controles toman foco. Cuando se presiona la tecla tab el navegador pasa el foco al siguiente control.

Pgina 65

Para probar el funcionamiento implementaremos un formulario que contenga una matriz de tres filas y tres columnas de elementos de tipo text. Haremos que el foco sea por columna, es decir primero tomar foco el text de la primera fila y primer columna, luego del text de la segunda fila y primer columna etc (si no definimos la propiedad tabindex la carga de datos se efectua por fila):
<head> <title>Prueba de formulario</title> </head> <body> <form action="/registrardatos.php" method="post"> <input type="text" name="text1" size="5" tabindex="1"> <input type="text" name="text2" size="5" tabindex="4"> <input type="text" name="text3" size="5" tabindex="7"> <br> <input type="text" name="text4" size="5" tabindex="2"> <input type="text" name="text5" size="5" tabindex="5"> <input type="text" name="text6" size="5" tabindex="8"> <br> <input type="text" name="text7" size="5" tabindex="3"> <input type="text" name="text8" size="5" tabindex="6"> <input type="text" name="text9" size="5" tabindex="9"> <br> <input type="submit" value="enviar" tabindex="10"> </form> </body> </html>

Como podemos observar los valores definidos para la propiedad tabindex para la primera fila de controles text es:
<input type="text" name="text1" size="5" tabindex="1"> <input type="text" name="text2" size="5" tabindex="4"> <input type="text" name="text3" size="5" tabindex="7">

Podemos observar que la propiedad tabindex no tiene valores consecutivos. Pero si vemos los text por columna podremos observar que si van en forma secuencial. Todos los controles de formularios pueden definir la propiedad tabindex para indicar el orden de activacin o foco del control.

Ejemplo: Implementar un formulario que contenga una matriz de tres filas y tres
columnas de elementos de tipo text. Hacer que el foco sea por columna, es decir primero tomar foco el text de la primer fila y primer columna, luego el text de la segunda fila y primer columna etc. (si no definimos la propiedad tabindex la carga de datos se efectua por fila)
<html> <head> <title>Prueba de formulario</title> </head> <body> <form action="/registrardatos.php" method="post"> <input type="text" name="text1" size="5" tabindex="1"> <input type="text" name="text2" size="5" tabindex="4"> <input type="text" name="text3" size="5" tabindex="7"> <br> <input type="text" name="text4" size="5" tabindex="2"> <input type="text" name="text5" size="5" tabindex="5"> <input type="text" name="text6" size="5" tabindex="8"> <br> <input type="text" name="text7" size="5" tabindex="3"> <input type="text" name="text8" size="5" tabindex="6"> <input type="text" name="text9" size="5" tabindex="9">

Pgina 66

<br> <input type="submit" value="enviar" tabindex="10"> </form> </body> </html>

Practica: Definir una matriz de 4

filas y 4 columnas de elementos de tipo text. Luego hacer la carga de todos los elementos del permetro y finalmente los cuatro elementos centrales.

42. Formulario - Inhabilitar controles.

Todos los controles que hemos visto podemos hacer que aparezcan inhabilitados. Supongamos que disponemos 3 controles de tipo radio para indicar que seccin del sitio deseamos ingresar. Nosotros queremos mostrar que tiene 3 secciones pero una no est disponible. Esto lo resolvemos deshabilitando un radio:
<html> <head> <title>Prueba de formulario</title> </head> <body> <form action="/registrardatos.php" method="post"> Seleccione la seccin donde desea ingresar: <br> <input type="radio" name="seccion" value="1" disabled>Nios<br> <input type="radio" name="seccion" value="2">Adolescentes<br> <input type="radio" name="seccion" value="3">Mayores<br> <input type="submit" value="Enviar"> </form> </body> </html>

Para deshabilitar el primer radio aadimos la propiedad disabled sin asignarle valor:
<input type="radio" name="seccion" value="1" disabled>Nios

Los siguientes elementos pueden inhabilitarse: button input optgroup option select textarea. Esta propiedad tiene mucha aplicacin si se aplica javascript en la pgina. Mediante javascript podemos luego de haber sido cargado el documento modificar el estado de los controles, habilitando y deshabilitando de acuerdo a los datos que carga el visitante al sitio.

Ejemplo: Confeccionar un

formulario que muestre tres controles de tipo radio. Mostrar los textos Nios, Adolescentes y Mayores. Deshabilitar el el elemento radio que corresponde a Nios.
<html> <head> <title>Prueba de formulario</title> </head> <body>

Pgina 67

<form action="/registrardatos.php" method="post"> Seleccione la seccin donde desea ingresar: <br> <input type="radio" name="seccion" value="1" disabled>Nios<br> <input type="radio" name="seccion" value="2">Adolescentes<br> <input type="radio" name="seccion" value="3">Mayores<br> <input type="submit" value="Enviar"> </form> </body> </html>

Practica: Confeccionar un formulario que muestre un control de cada tipo y los

muestre todos deshabilitados. (Cuando conozca JavaScript podemos habilitarlos por ejemplo si el visitante ingresa una clave correcta, por ahora vea como queda visualmente el formulario con los controles deshabilitados)

43. Formulario - text/password y maxlength

Los controles de tipo text y password pueden limitar la cantidad de caracteres que puede ingresar el usuario a partir de la propiedad maxlength. Debemos asignarle un valor entero que indica hasta cuantos caracteres est permitido ingresar. No hay que confundir el objetivo de la propiedad size con maxlength. Con la propiedad size solo indicamos la cantidad mxima de caracteres a mostrar dentro del control antes de hacer scroll de los datos. Confeccionaremos un formulario que solicite el nombre de usuario y su clave y solo permitiremos ingresar nombres de usuarios de hasta 20 caracteres y claves de hasta 12.
<html> <head> <title>Prueba de formulario</title> </head> <body> <form action="/registrardatos.php" method="post"> Ingrese su nombre: <input type="text" name="nombre" maxlength="20" size="20"> <br> Ingrese su clave: <input type="password" name="clave" maxlength="12" size="12"> <br> <input type="submit" value="enviar"> </form> </body> </html>

Cuando ejecute esta pgina no podremos cargar un nombre de usuario de ms de 20 caracteres, el teclado se inhabilita cuando se han ingresado 20 caracteres en el primer control.

Ejemplo: Confeccionar un formulario que solicite el nombre de usuario y su clave,

solo permitir ingresar en el nombres de usuarios hasta 20 caracteres y la claves hasta 12.
<html> <head> <title>Prueba de formulario</title>

Pgina 68

</head> <body> <form action="/registrardatos.php" method="post"> Ingrese su nombre: <input type="text" name="nombre" maxlength="20" size="20"> <br> Ingrese su clave: <input type="password" name="clave" maxlength="12" size="12"> <br> <input type="submit" value="enviar"> </form> </body> </html>

Practica: Confeccionar un formulario que solicite el ingreso del nombre y apellido

de una persona (hasta 40 caracteres), su edad (3 caracteres como mximo) y su documento nacional de identidad (hasta 8 caracteres)

44. Formulario - text/password/textarea y readonly

Otra propiedad que podemos asignarle a los controles que creamos con el elemento input y tambin el elemento textarea es readonly. Si definimos la propiedad readonly a un control el mismo es de solo lectura y no podemos modificar su contenido. Esta propiedad tiene uso cuando mediante un lenguaje de script (generalmente javascript) modificamos el control cambiandolo de estado ante ciertos eventos. Cuando un control tiene la propiedad readonly el control toma foco pero no se puede cambiar su contenido. La diferencia con la propiedad disabled es que con esta no toma foco el control y generalmente aparece con un color que indica que el control est deshabilitado. Confeccionemos un formulario que aparezca el nombre de una empresa en un text y el texto de un contrato en un textarea, ambos de solo lectura.
<html> <head> <title>Prueba de formulario</title> </head> <body> <form action="/htmlya/registrardatos.php" method="post"> Ingrese su nombre: <input type="text" name="nombre" size="30" value="Interpolacion" readonly><br> Contrato:<br> <textarea name="comentarios" rows="5" cols="60" readonly> Por la presente .............................. </textarea> <br> <input type="submit" value="Enviar"> </form> </body> </html>

Ejemplo: Confeccionar un formulario que aparezca el nombre de una empresa en un text y el texto de un contrato en un textarea, ambos de solo lectura.
<html> <head>

Pgina 69

<title>Prueba de formulario</title> </head> <body> <form action="/registrardatos.php" method="post"> Ingrese su nombre: <input type="text" name="nombre" size="30" value="Interpolacion" readonly><br> Contrato:<br> <textarea name="comentarios" rows="5" cols="60" readonly> Por la presente .............................. </textarea> <br> <input type="submit" value="Enviar"> </form> </body> </html>

Practica: Crear un controles de tipo text, password y textarea. Disponerlos todos

de solo lectura.

45. Formulario - Envo de datos mediante mail.

Hasta ahora siempre configuramos la propiedad action de la marca <form> con el nombre de un archivo que procesa los datos en el servidor:
<form action="/registrardatos.php" method="post">

Para poder resolver esto debemos conocer el lenguaje PHP o algn otro lenguaje de servidor. Conociendo solo HTML la solucin es enviar los datos mediante el programa cliente de mail que est configurado en la computadora. Para esto inicializamos la propiedad action de la siguiente forma:
<form action="mailto:pizzasya@pizzas.net" method="post" enctype="text/plain">

Es decir inicializamos la propiedad action con el texto mailto seguido de dos puntos y la direccin de mail a la que queremos enviar los datos del formulario, recordemos siempre que utilizamos mailto el emisor del mail depende como est configurado nuestro software de mail en nuestra computadora. Adems inicializamos la propiedad enctype con el valor "text/plain" con lo que le indicamos que se trata de un archivo de texto plano. Tengamos en cuenta que no podemos enviar archivos adjuntos. Para probar esta funcionalidad confeccionaremos una pgina que permita hacer un reclamo de reparaciones y se enven los datos a una direccin de correo. Se debe poder ingresar el nombre, direccin y un comentario del problema. La pgina HTML es:
<html> <head> <title>Prueba de formulario</title> </head> <body> <h2>Reclamos</h2> <form action="mailto:reclamos@gmail.com" method="post" enctype="text/plain"> Ingrese su nombre: <input type="text" name="nombre" size="20"> <br>

Pgina 70

Ingrese su direccin: <input type="text" name="direccin" size="30"> <br> Informe del problema: <br> <textarea rows="5" cols="40" name="problema"></textarea> <br> <input type="submit" value="enviar"> </form> </body> </html>

Debe llegar a la casilla de correos reclamos@gmail.com un mail con el contenido de los datos cargados en el formulario. El mail contiene el nombre del control y el contenido ingresado por el operador. Si queremos que el correo llegue con un ttulo debemos inicializar subject:
<form action="mailto:reclamos@gmail.com?subject=pedido de reparacin" method="post" enctype="text/plain">

Con esto logramos ubicar perfectamente todos los mail que llegan a nuestra casilla de correos reclamos@gmail.com La desventaja del envo de datos mediante mail es que la persona no puede hacer el envo del formulario desde una mquina ubicada en un ciberbar donde muy posiblemente no nos dejen configurar un cliente de mail.

Ejemplo: Confeccionar una pgina que permita hacer un reclamo de reparaciones

y se enven los datos a una direccin de correo. Se debe poder ingresar el nombre, direccin y un comentario del problema.
<html> <head> <title>Prueba de formulario</title> </head> <body> <h2>Reclamos</h2> <form action="mailto:reclamos@gmail.com" method="post" enctype="text/plain"> Ingrese su nombre: <input type="text" name="nombre" size="20"> <br> Ingrese su direccin: <input type="text" name="direccin" size="30"> <br> Informe del problema: <br> <textarea rows="5" cols="40" name="problema"></textarea> <br> <input type="submit" value="enviar"> </form> </body> </html>

Practica:

Confeccionar un formulario que permita solicitar pizzas a domicilio. Enviar el pedido a la direccin de correo pizzashumm@gmail.com

46. Formulario - label

Una ltima etiqueta relacionada con los formularios es la label. Hasta este momento siempre que queramos disponer un mensaje antes o despus de un control de formulario lo escribiamos sin ms.

Pgina 71

Existe en HTML un elemento que permite asociar un texto con un control de formulario. Esto ser muy til si se accede desde un navegador no grfico o una persona ciega que utiliza un programa que lee en voz alta el contenido de la pgina. Veamos como lo hacamos hasta ahora:
Ingrese su nombre: <input type="text" name="nombre" size="20">

Utilizando el elemento label podemos hacer una referencia entre el texto y el control de entrada de datos:
<label for="nombre">Ingrese su nombre:</label> <input type="text" name="nombre" size="20" id="nombre">

Veamos que hemos agregado: Hemos definido la propiedad id a la marca input. El elemento label tiene su marca de comienzo y fin, entre medio se dispone el texto a mostrar. Para vincular esta label con el elemento input debemos inicializar la propiedad for con el nombre asignado a la propiedad id del elemento input. Ms adelante veremos que la propiedad id la pueden tener todos los elementos HTML y es de vital importancia para CSS (Hojas de Estilo) y JavaScript Confeccionemos un ejemplo completo:
<html> <head> <title>Prueba de formulario</title> </head> <body> <form action="/registrardatos.php" method="post"> <fieldset> <legend>Formulario de comentarios.</legend> <label for="nombre">Ingrese su nombre:</label> <input type="text" name="nombre" size="30" id="nombre"><br> <label for="mail">Ingrese su mail:</label> <input type="text" name="mail" size="50" id="mail"><br> <label for="comentarios">Comentarios:</label><br> <textarea name="comentarios" rows="5" cols="60" id="comentarios"></textarea> <br> <input type="submit" value="Enviar"> </fieldset> </form> </body> </html>

Como podemos ver asociamos cada etiqueta con el correspondiente control de entrada de datos:
<label for="nombre">Ingrese su nombre:</label> <input type="text" name="nombre" size="30" id="nombre"><br> <label for="mail">Ingrese su mail:</label> <input type="text" name="mail" size="50" id="mail"><br> <label for="comentarios">Comentarios:</label><br> <textarea name="comentarios" rows="5" cols="60" id="comentarios"></textarea>

Normalmente las propiedades id y name de los controles de entrada de datos (input, textarea etc.) se les asigna el mismo nombre, de todos modos no es obligatorio.

Pgina 72

La propiedad for de la label hace referencia al id del control y no al name, esto es importante si inicializamos con valores distintos el id y name de los controles.

Ejemplo: Confeccionar un formulario que solicite el ingreso del nombre, mail y

comentarios de un visitante al sitio. Asociar cada control con un elemento label.
<html> <head> <title>Prueba de formulario</title> </head> <body> <form action="/registrardatos.php" method="post"> <fieldset> <legend>Formulario de comentarios.</legend> <label for="nombre">Ingrese su nombre:</label> <input type="text" name="nombre" size="30" id="nombre"><br> <label for="mail">Ingrese su mail:</label> <input type="text" name="mail" size="50" id="mail"><br> <label for="comentarios">Comentarios:</label><br> <textarea name="comentarios" rows="5" cols="60" id="comentarios"></textarea> <br> <input type="submit" value="Enviar"> </fieldset> </form> </body> </html>

Practica: Confeccionar una pgina que permita calificar un sitio. Se debe ingresar
el nombre y mediante un control de tipo select elegir un valor entre 1 y 10. Asociar elementos de tipo label a cada control.

47. Frames
Con los frames se pueden mostrar ms de un archivo HTML en la misma ventana del navegador. Podemos hacer que los frames interactuen, por ejemplo al presionar un enlace en un frame podemos cargar una pgina en otro frame. Solo se aconseja emplear frames cuando la situacin lo amerita, hay que tener en cuenta que el uso de frame hace menos accesible el sitio y es mucho ms dificil imprimir su contenido. Veamos un ejemplo de implementar dos frames:
<html> <head> <title>prueba de frames</title> </head> <frameset cols="20%,80%"> <frame src="pagina2.html"> <frame src="pagina3.html"> <noframes> <p>El navegador no soporta frames</p> </noframes> </frameset> </html>

Esta pgina es la que define la ubicacin de los frames dentro del navegador. La cabecera tiene una sintaxis similar a todas las pginas que hemos visto, pero no existe el body, en su lugar encontramos el elemento frameset.

Pgina 73

En este ejemplo dividimos la ventana del navegador en dos secciones que mostrarn una pgina HTML cada una, mediante la propiedad cols indicamos cuanto ocupar cada ventana en porcentaje:
<frameset cols="20%,80%">

En el interior del elemento frameset definimos las dos pginas HTML que deben mostrarse mediante el elemento frame. El elemento frame tiene una propiedad llamada src (source que significa fuente) que la inicializamos con el nombre de la pgina a mostrar. As definimos las dos pginas:
<frame src="pagina2.html"> <frame src="pagina3.html">

Otra elemento importante es el noframes donde indicamos un mensaje en el caso que el navegador no cuente con la capacidad de mostrar frames (podemos disponer enlaces a las pginas en forma individual)
<noframes> <p>El navegador no soporta frames</p> </noframes>

Finalmente cerramos el elemento frame y la pgina:

</frameset> </html>

Las otras dos pginas son iguales a las que hemos venido haciendo:
<html> <head> <title>prueba de frames</title> </head> <body> <h2>Frame 1</h2> </body> </html> <html> <head> <title>prueba de frames</title> </head> <body> <h2>Frame 2</h2> </body> </html>

Ejemplo: Confeccionar una pgina que contenga dos frames verticales, el primero
que ocupe el 20% y el segundo el 80% de la ventana. Principio del formulario pagina1.html
<html> <head> <title>prueba de frames</title> </head> <frameset cols="20%,80%"> <frame src="pagina2.html"> <frame src="pagina3.html"> <noframes> <p>El navegador no soporta frames</p> </noframes> </frameset> </html>

pagina2.html
<html> <head>

Pgina 74

<title>prueba de frames</title> </head> <body> <h2>Frame 1</h2> </body> </html>

pagina3.html
<html> <head> <title>prueba de frames</title> </head> <body> <h2>Frame 2</h2> </body> </html>

Practica: Confeccionar una ventana que contenga 3 frames horizontales. Para esto
definir la propiedad row del elemento frameset con el siguiente valor: rows="20%,60%,20%"

48. Frames - Actualizacin de un frame a partir del enlace de otro frame

Una actividad habitual con frames es disponer hipervnculos en uno de los frame y actualizar el contenido de otro frame. Veamos con un ejemplo la sintaxis para actualizar un frame a partir del enlace de otro: pagina1.html
<html> <head> <title>prueba de frames</title> </head> <frameset cols="20%,80%"> <frame src="pagina2.html"> <frame src="pagina3.html" name="ventanadinamica"> <noframes> <p>El navegador no soporta frames</p> </noframes> </frameset> </html>

Podemos observar que para el frame que queremos acceder posteriormente para modificar su contenido debemos inicializar la propiedad name:
<frame src="pagina3.html" name="ventanadinamica">

pagina2.html
<html> <head> <title>prueba de frames</title> </head> <body> <h2>Enlaces.</h2> <ul> <li><a href="pagina3.html" target="ventanadinamica">Enlace 1</a></li> <li><a href="pagina4.html" target="ventanadinamica">Enlace 2</a></li> </ul> </body> </html>

Pgina 75

Este archivo es el frame de la izquierda, que contiene los hipervnculos a dos pginas. Para indicar que frame debe mostrar las pginas de estos hipervnculos agregamos la propiedad target inicializndola con el valor del name definido para el frame (en nuestro caso es "ventanadinamica") Tengamos en cuenta que el frame de la derecha comienza mostrando el archivo pagina3.html y luego segn que hipervnculo se seleccione mostrar el archivo: pagina3.html o pagina4.html Los contenidos de los dos archivos pagina3.html y pagina4.html no tienen nada nuevo: pagina3.html
<html> <head> <title>prueba de frames</title> </head> <body> <h1>Pgina A</h1> <h2>Este es el contenido de pgina del archivo:pagina3.html</h2> </body> </html>

pagina4.html
<html> <head> <title>prueba de frames</title> </head> <body> <h1>Pgina B</h1> <h2>Este es el contenido de pgina del archivo:pagina4.html</h2> </body> </html>

Ejemplo: Confeccionar una ventana que contenga dos frames verticales. Disponer
dos hipervnculos en el frame de la izquierda que al ser presionados actualicen el archivo a mostrar por el frame de la derecha. pagina1.html
<html> <head> <title>prueba de frames</title> </head> <frameset cols="20%,80%"> <frame src="pagina2.html"> <frame src="pagina3.html" name="ventanadinamica"> <noframes> <p>El navegador no soporta frames</p> </noframes> </frameset> </html>

pagina2.html
<html> <head> <title>prueba de frames</title> </head> <body> <h2>Enlaces.</h2> <ul> <li><a href="pagina3.html" target="ventanadinamica">Enlace 1</a></li> <li><a href="pagina4.html" target="ventanadinamica">Enlace 2</a></li> </ul> </body> </html>

Pgina 76

pagina3.html
<html> <head> <title>prueba de frames</title> </head> <body> <h1>Pgina A</h1> <h2>Este es el contenido de pgina del archivo:pagina3.html</h2> </body> </html>

pagina4.html
<html> <head> <title>prueba de frames</title> </head> <body> <h1>Pgina B</h1> <h2>Este es el contenido de pgina del archivo:pagina4.html</h2> </body> </html>

Practica: Confeccionar una pgina que contenga dos frames verticales. En el frame
de la izquierda disponer hipervnculos a peridicos de su pas. Cuando se presione el hipervnculo actualizar el frame de la derecha con la pgina principal de ese peridico (tener en cuenta que los frames pueden mostrar pginas que se encuentran en distintos servidores)

49. Frames - Asignacin de medidas en pxeles

En los ejemplos anteriores definimos las medidas de los frames en porcentajes:
<frameset cols="20%,80%">

Cuando lo indicamos en porcentajes al redimensionar la ventana del navegador el tamao de los frame se redimensiona en forma proporcional. Hay situaciones donde queremos que un frame no se redimensione, por ejemplo que el frame de la izquierda donde ubicaramos un men de opciones siempre permanezca inalterable. Esto lo logramos indicando un valor absoluto para dicho frame. Veamos un ejemplo donde definimos 3 frames dividiendo la ventana en tres columna. Luego queremos que el frame de la izquierda y la derecha tengan medidas inalterables, para esto lo definimos de la siguiente forma:
<frameset cols="200,*,200">

Veamos que significa el asterisco para la segunda columna. Como sabemos una ventana puede redimensionarse y las tarjetas grficas tienen distintas resoluciones en pxeles (640x480, 800x600, 1024x768 etc.), con esta sintaxis indicamos que la primer columna ocupe siempre 200 pxeles, lo mismo la tercer columna, pero la segunda tendr un ancho de los pxeles que restan (es decir el ancho de ventana menos 400) Veamos la solucin: pagina1.html
<html> <head> <html> <head> <title>prueba de frames</title> </head>

Pgina 77

<frameset cols="200,*,200"> <frame src="pagina2.html"> <frame src="pagina3.html"> <frame src="pagina4.html"> <noframes> <p>El navegador no soporta frames</p> </noframes> </frameset> </html>

pagina2.html
<html> <head> <title>prueba de frames</title> </head> <body> <h1>Pgina A</h1> </body> </html>

pagina3.html
<html> <head> <title>prueba de frames</title> </head> <body> <h1>Pgina B</h1> </body> </html>

pagina4.html
<html> <head> <title>prueba de frames</title> </head> <body> <h1>Pgina C</h1> </body> </html>

Veamos algunas variantes para utilizar el astersco: La primer columna es de 200 pxeles y los pxeles restantes se destribuyen entre el segundo y tercer frame.
<frameset cols="200,*,*">

Con esta sintaxis los pxeles que restan luego de aplicar los 200 pxeles del primer frame se asignan 2/3 partes al frame central y 1/3 al frame de la derecha.
<frameset cols="200,2*,*">

Podemos mezclar las unidades de medida. Con esta sintaxis el 50% corresponde al frame central, 200 pxeles al frame de la izquierda y los pxeles restantes se asignan al frame de la derecha.
<frameset cols="200,50%,*;>

Ejemplo: Confeccionar una pgina que contenga tres frames verticales, el de la

izquierda y el de la derecha deben tener 200 pxeles de ancho, el siguiente ocupa el resto. pagina1.html
<html> <head>

Pgina 78

<title>prueba de frames</title> </head> <frameset cols="200,*,200"> <frame src="pagina2.html"> <frame src="pagina3.html"> <frame src="pagina4.html"> <noframes> <p>El navegador no soporta frames</p> </noframes> </frameset> </html>

pagina2.html
<html> <head> <title>prueba de frames</title> </head> <body> <h1>Pgina A</h1> </body> </html>

pagina3.html
<html> <head> <title>prueba de frames</title> </head> <body> <h1>Pgina B</h1> </body> </html>

pagina4.html
<html> <head> <title>prueba de frames</title> </head> <body> <h1>Pgina C</h1> </body> </html>

Practica: Confeccionar una ventana que contenga 3 frames horizontales.Hacer que

el frame superior tenga una altura de 80 pxeles, el frame inferior 100 pxeles y el frame central ocupe el resto.

50. Frames - Propiedades del elemento frame

Hasta hora hemos utilizado y definido las propiedades para la marca de inicio del elemento frame: src name Otras propiedades que pasaremos a ver, comprender y probar su funcionamiento son: noresize Esta propiedad no requiere que se le asigne un valor. Si se encuentra presente el frame no podr ser redimensionado con el mouse por el visitante del sitio. Por ejemplo si disponemos un men de enlaces en un frame ubicado a la izquierda es muy probable que definamos la propiedad noresize ya que poca utilidad tiene agrandar o contraer esta regin de pantalla.

Pgina 79

frameborder Esta propiedad puede tomar los valores 1 o 0. Por defecto un frame aparece con borde es decir esta propiedad por defecto tiene el valor 1. Si queremos que el borde no aparezca debemos inicializarla con 0. Hay que tener en cuenta que por ms que los bordes no existan si se puede redimensionar el frame con el mouse. scrolling Los valores posibles de esta propiedad son: "auto","yes","no". Por defecto est inicializada con el valor "auto". El valor auto significa que el navegador decide si se debe mostrar la barra de scroll. La mostrar solo si algn contenido del frame no se ve. Si definimos el valor "yes" estamos indicando que siempre debe estar visible la barra de navegacin y por ltimo si asignamos el valor "no" estaremos indicando que nunca debe aparecer la barra de navegacin para dicho frame. Resolvamos el siguiente problema: Confeccionar una ventana con dos frame verticales. No permitir redimensionarlos y no mostrar el borde de los frames. Hacer que el frame de la derecha siempre muestre la barra de desplazamiento. pagina1.html
<html> <head> <title>prueba de frames</title> </head> <frameset cols="200,*"> <frame src="pagina2.html" frameborder="0" noresize> <frame src="pagina3.html" frameborder="0" scrolling="yes" noresize> <noframes> <p>El navegador no soporta frames</p> </noframes> </frameset> </html>

pagina2.html
<html> <head> <title>prueba de frames</title> </head> <body> <h1>Pgina A</h1> <h1>Pgina A</h1> <h1>Pgina A</h1> <h1>Pgina A</h1> <h1>Pgina A</h1> <h1>Pgina A</h1> </body> </html>

pagina3.html
<html> <head> <title>prueba de frames</title> </head> <body> <h1>Pgina B</h1> <h1>Pgina B</h1> <h1>Pgina B</h1> <h1>Pgina B</h1> <h1>Pgina B</h1> <h1>Pgina B</h1>

Pgina 80

<h1>Pgina <h1>Pgina <h1>Pgina <h1>Pgina <h1>Pgina <h1>Pgina <h1>Pgina <h1>Pgina <h1>Pgina <h1>Pgina <h1>Pgina <h1>Pgina <h1>Pgina <h1>Pgina <h1>Pgina <h1>Pgina <h1>Pgina <h1>Pgina <h1>Pgina <h1>Pgina <h1>Pgina <h1>Pgina <h1>Pgina <h1>Pgina <h1>Pgina <h1>Pgina <h1>Pgina <h1>Pgina <h1>Pgina <h1>Pgina <h1>Pgina <h1>Pgina <h1>Pgina <h1>Pgina <h1>Pgina <h1>Pgina <h1>Pgina <h1>Pgina <h1>Pgina <h1>Pgina <h1>Pgina <h1>Pgina <h1>Pgina <h1>Pgina <h1>Pgina <h1>Pgina <h1>Pgina <h1>Pgina <h1>Pgina <h1>Pgina <h1>Pgina <h1>Pgina <h1>Pgina <h1>Pgina <h1>Pgina <h1>Pgina <h1>Pgina <h1>Pgina <h1>Pgina <h1>Pgina <h1>Pgina <h1>Pgina <h1>Pgina <h1>Pgina <h1>Pgina

B</h1> B</h1> B</h1> B</h1> B</h1> B</h1> B</h1> B</h1> B</h1> B</h1> B</h1> B</h1> B</h1> B</h1> B</h1> B</h1> B</h1> B</h1> B</h1> B</h1> B</h1> B</h1> B</h1> B</h1> B</h1> B</h1> B</h1> B</h1> B</h1> B</h1> B</h1> B</h1> B</h1> B</h1> B</h1> B</h1> B</h1> B</h1> B</h1> B</h1> B</h1> B</h1> B</h1> B</h1> B</h1> B</h1> B</h1> B</h1> B</h1> B</h1> B</h1> B</h1> B</h1> B</h1> B</h1> B</h1> B</h1> B</h1> B</h1> B</h1> B</h1> B</h1> B</h1> B</h1> B</h1>

Pgina 81

<h1>Pgina <h1>Pgina <h1>Pgina <h1>Pgina <h1>Pgina <h1>Pgina <h1>Pgina <h1>Pgina <h1>Pgina <h1>Pgina <h1>Pgina <h1>Pgina <h1>Pgina <h1>Pgina <h1>Pgina <h1>Pgina <h1>Pgina <h1>Pgina <h1>Pgina <h1>Pgina <h1>Pgina <h1>Pgina <h1>Pgina </body> </html>

B</h1> B</h1> B</h1> B</h1> B</h1> B</h1> B</h1> B</h1> B</h1> B</h1> B</h1> B</h1> B</h1> B</h1> B</h1> B</h1> B</h1> B</h1> B</h1> B</h1> B</h1> B</h1> B</h1>

Ejemplo:

Confeccionar una ventana con dos frame verticales. No permitir redimensionarlos y no mostrar el borde de los frames. Hacer que el frame de la derecha siempre muestre la barra de desplazamiento. pagina1.html
<html> <head> <title>prueba de frames</title> </head> <frameset cols="200,*"> <frame src="pagina2.html" frameborder="0" noresize> <frame src="pagina3.html" frameborder="0" scrolling="yes" noresize> <noframes> <p>El navegador no soporta frames</p> </noframes> </frameset> </html>

pagina2.html
<html> <head> <title>prueba de frames</title> </head> <body> <h1>Pgina A</h1> <h1>Pgina A</h1> <h1>Pgina A</h1> <h1>Pgina A</h1> <h1>Pgina A</h1> <h1>Pgina A</h1> </body> </html>

pagina3.html
<html> <head> <title>prueba de frames</title> </head> <body>

Pgina 82

<h1>Pgina <h1>Pgina <h1>Pgina <h1>Pgina <h1>Pgina <h1>Pgina <h1>Pgina <h1>Pgina <h1>Pgina <h1>Pgina <h1>Pgina <h1>Pgina <h1>Pgina <h1>Pgina <h1>Pgina <h1>Pgina <h1>Pgina <h1>Pgina <h1>Pgina <h1>Pgina <h1>Pgina <h1>Pgina <h1>Pgina <h1>Pgina <h1>Pgina <h1>Pgina <h1>Pgina <h1>Pgina <h1>Pgina <h1>Pgina <h1>Pgina <h1>Pgina <h1>Pgina <h1>Pgina <h1>Pgina <h1>Pgina <h1>Pgina <h1>Pgina <h1>Pgina <h1>Pgina <h1>Pgina <h1>Pgina <h1>Pgina <h1>Pgina <h1>Pgina <h1>Pgina <h1>Pgina <h1>Pgina <h1>Pgina <h1>Pgina <h1>Pgina <h1>Pgina <h1>Pgina <h1>Pgina <h1>Pgina <h1>Pgina <h1>Pgina <h1>Pgina <h1>Pgina <h1>Pgina <h1>Pgina <h1>Pgina <h1>Pgina <h1>Pgina <h1>Pgina

B</h1> B</h1> B</h1> B</h1> B</h1> B</h1> B</h1> B</h1> B</h1> B</h1> B</h1> B</h1> B</h1> B</h1> B</h1> B</h1> B</h1> B</h1> B</h1> B</h1> B</h1> B</h1> B</h1> B</h1> B</h1> B</h1> B</h1> B</h1> B</h1> B</h1> B</h1> B</h1> B</h1> B</h1> B</h1> B</h1> B</h1> B</h1> B</h1> B</h1> B</h1> B</h1> B</h1> B</h1> B</h1> B</h1> B</h1> B</h1> B</h1> B</h1> B</h1> B</h1> B</h1> B</h1> B</h1> B</h1> B</h1> B</h1> B</h1> B</h1> B</h1> B</h1> B</h1> B</h1> B</h1>

Pgina 83

<h1>Pgina <h1>Pgina <h1>Pgina <h1>Pgina <h1>Pgina <h1>Pgina <h1>Pgina <h1>Pgina <h1>Pgina <h1>Pgina <h1>Pgina <h1>Pgina <h1>Pgina <h1>Pgina <h1>Pgina <h1>Pgina <h1>Pgina <h1>Pgina <h1>Pgina <h1>Pgina <h1>Pgina <h1>Pgina <h1>Pgina <h1>Pgina <h1>Pgina <h1>Pgina <h1>Pgina <h1>Pgina <h1>Pgina </body> </html>

B</h1> B</h1> B</h1> B</h1> B</h1> B</h1> B</h1> B</h1> B</h1> B</h1> B</h1> B</h1> B</h1> B</h1> B</h1> B</h1> B</h1> B</h1> B</h1> B</h1> B</h1> B</h1> B</h1> B</h1> B</h1> B</h1> B</h1> B</h1> B</h1>

Practica:

Confeccionar una pgina con dos frames horizontales. En la parte superior definir un frame con 100 pxeles de alto. Hacer que el mismo no se pueda redimensionar, no mustre la barra de scroll y no mustre el borde.

51. Frames - Anidamiento de frameset

El lenguaje HTML nos permite definir un frameset en la ubicacin de un frame, esto se logra anidando frameset. Vamos a crear una pgina que contenga dos columnas. La segunda columna la dividimos en dos filas:
------------------------------------------| | | | | | | |-----------------------------------| | | | | | | | | | | | | | | | | | | -------------------------------------------

Para resolver este formato de pgina tenemos que plantear los frameset de la siguiente manera: pagina1.html
<html> <head> <title>prueba de frames</title>

Pgina 84

</head> <frameset cols="200,*"> <frame src="pagina2.html" noresize> <frameset rows="70,*"> <frame src="pagina3.html" noresize> <frame src="pagina4.html" noresize> </frameset> <noframes> <p>El navegador no soporta frames</p> </noframes> </frameset> </html>

Veamos ms detenidamente como hemos creado los frameset, primero el framset externo define en la propiedad cols dos valores
<frameset cols="200,*">

Con esto sabemos que estamos indicando que tendr dos columnas, la primera de 200 pxeles y la segunda del resto de pxeles. Luego debemos definir los frames de las dos columnas. Ac esta la diferencia con los otros frames vistos:
<frame src="pagina2.html" noresize> <frameset rows="70,*">

El primer frame lo ocupa el archivo pagina2.html, pero el segundo frame no existe, en su lugar se define otro frameset que inicializa la propiedad rows con los valores 70 y *. Con esto estamos indicando que la segunda columna se divide en dos filas, una de 70 pxeles y la otra del resto de pxeles de la ventana. Las otras tres pginas no tienen nada nuevo: pagina2.html
<html> <head> <title>prueba de frames</title> </head> <body> <h1>Pgina A</h1> </body> </html>

pagina3.html
<html> <head> <title>prueba de frames</title> </head> <body> <h1>Pgina B</h1> </body> </html>

pagina4.html
<html> <head> <title>prueba de frames</title> </head> <body> <h1>Pgina C</h1> <h1>Pgina C</h1> <h1>Pgina C</h1> <h1>Pgina C</h1> <h1>Pgina C</h1> <h1>Pgina C</h1> <h1>Pgina C</h1>

Pgina 85

<h1>Pgina <h1>Pgina <h1>Pgina <h1>Pgina <h1>Pgina <h1>Pgina <h1>Pgina <h1>Pgina <h1>Pgina <h1>Pgina <h1>Pgina <h1>Pgina <h1>Pgina <h1>Pgina <h1>Pgina <h1>Pgina <h1>Pgina <h1>Pgina <h1>Pgina <h1>Pgina <h1>Pgina <h1>Pgina <h1>Pgina <h1>Pgina </body> </html>

C</h1> C</h1> C</h1> C</h1> C</h1> C</h1> C</h1> C</h1> C</h1> C</h1> C</h1> C</h1> C</h1> C</h1> C</h1> C</h1> C</h1> C</h1> C</h1> C</h1> C</h1> C</h1> C</h1> C</h1>

Ejemplo:

Confeccionar una pgina que la primer columna tenga un frame y la segunda columna tenga dos frames. Utilizar frameset anidados para resolver el problema. pagina1.html
<html> <head> <title>prueba de frames</title> </head> <frameset cols="200,*"> <frame src="pagina2.html" noresize> <frameset rows="70,*"> <frame src="pagina3.html" noresize> <frame src="pagina4.html" noresize> </frameset> <noframes> <p>El navegador no soporta frames</p> </noframes> </frameset> </html>

pagina2.html
<html> <head> <title>prueba de frames</title> </head> <body> <h1>Pgina A</h1> </body> </html>

pagina3.html
<html> <head> <title>prueba de frames</title> </head> <body> <h1>Pgina B</h1>

Pgina 86

</body> </html>

pagina4.html
<html> <head> <title>prueba de frames</title> </head> <body> <h1>Pgina C</h1> <h1>Pgina C</h1> <h1>Pgina C</h1> <h1>Pgina C</h1> <h1>Pgina C</h1> <h1>Pgina C</h1> <h1>Pgina C</h1> <h1>Pgina C</h1> <h1>Pgina C</h1> <h1>Pgina C</h1> <h1>Pgina C</h1> <h1>Pgina C</h1> <h1>Pgina C</h1> <h1>Pgina C</h1> <h1>Pgina C</h1> <h1>Pgina C</h1> <h1>Pgina C</h1> <h1>Pgina C</h1> <h1>Pgina C</h1> <h1>Pgina C</h1> <h1>Pgina C</h1> <h1>Pgina C</h1> <h1>Pgina C</h1> <h1>Pgina C</h1> <h1>Pgina C</h1> <h1>Pgina C</h1> <h1>Pgina C</h1> <h1>Pgina C</h1> <h1>Pgina C</h1> <h1>Pgina C</h1> <h1>Pgina C</h1> </body> </html>

Practica: Confeccionar una pgina que contenga dos filas. La primera fila muestre
un frame de 70 pxeles de alto y la segunda fila dividirla en dos columnas que tengan dos frames, el primero de 200 pxeles y el otro del resto de pxeles sobrantes. Hacer que no se puedan redimensionar.
------------------------------------------------| | | | | | ------------------------------------------------| | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | |

Pgina 87

-------------------------------------------------

52. iframes
El HTML dispone de un elemento llamado iframe que permite disponer un frame con el flujo de la pgina, similar a disponer una imagen en la pgina. Veamos un ejemplo como disponer este tipo de frame tan particular: pagina1.html
<html> <head> <title>prueba de iframes</title> </head> <body> <h1>Esto es una prueba de un iframe</h1> <iframe src="pagina2.html" width="400" height="200"> No tiene disponible el navegador la capacidad de iframe </iframe> <h2>Esto ya est fuera del iframe</h2> </body> </html>

Como podemos ver cuando necesitamos agregar el iframe dentro de la pgina disponemos:
<iframe src="pagina2.html" width="400" height="200"> No tiene disponible el navegador la capacidad de iframe </iframe>

Le indicamos el ancho y alto que debe tomar el iframe, la ubicacin contina el flujo de la pgina. La pgina que muestra el iframe no introduce ningn concepto nuevo:
<html> <head> <title>prueba de iframes</title> </head> <body> <h2>Este texto est dentro del iframe.</h2> <h2>Este texto est dentro del iframe.</h2> <h2>Este texto est dentro del iframe.</h2> <h2>Este texto est dentro del iframe.</h2> <h2>Este texto est dentro del iframe.</h2> <h2>Este texto est dentro del iframe.</h2> <h2>Este texto est dentro del iframe.</h2> <h2>Este texto est dentro del iframe.</h2> <h2>Este texto est dentro del iframe.</h2> <h2>Este texto est dentro del iframe.</h2> <h2>Este texto est dentro del iframe.</h2> <h2>Este texto est dentro del iframe.</h2> <h2>Este texto est dentro del iframe.</h2> <h2>Este texto est dentro del iframe.</h2> <h2>Este texto est dentro del iframe.</h2> <h2>Este texto est dentro del iframe.</h2> <h2>Este texto est dentro del iframe.</h2> <h2>Este texto est dentro del iframe.</h2> <h2>Este texto est dentro del iframe.</h2> <h2>Este texto est dentro del iframe.</h2> <h2>Este texto est dentro del iframe.</h2> <h2>Este texto est dentro del iframe.</h2> <h2>Este texto est dentro del iframe.</h2> <h2>Este texto est dentro del iframe.</h2> </body> </html>

Pgina 88

Algunas propiedades tiles aplicables a un iframe: src Archivo a mostrar dentro del iframe. width Ancho en pxeles. height Alto en pxeles. frameborder Podemos asignarle los valores 1 o 0. Si vale 0 el borde no se muestra. scrolling Los valores posibles de esta propiedad son: "auto","yes","no". Por defecto est inicializada con el valor "auto". El valor auto significa que el navegador decide si se debe mostrar la barra de scroll. La mostrar solo si algn contenido del iframe no se ve.Si definimos el valor "yes" estamos indicando que siempre debe estar visible la barra de navegacin y por ltimo si asignamos el valor "no" estaremos indicando que nunca debe aparecer la barra de navegacin para dicho iframe. name Nombre del iframe si queremos acceder desde otra pgina. Por ejemplo si queremos actualizar su contenido desde un enlace ubicado en otra pgina.

Ejemplo:

Confeccionar una pgina que incorpore un iframe de 400 pxeles de ancho por 200 pxeles de alto. pagina1.html
<html> <head> <title>prueba de iframes</title> </head> <body> <h1>Esto es una prueba de un iframe</h1> <iframe src="pagina2.html" width="400" height="200"> No tiene disponible el navegador la capacidad de iframe </iframe> <h2>Esto ya est fuera del iframe</h2> </body> </html>

pagina2.html
<html> <head> <title>prueba de iframes</title> </head> <body> <h2>Este texto est dentro del iframe.</h2> <h2>Este texto est dentro del iframe.</h2> <h2>Este texto est dentro del iframe.</h2> <h2>Este texto est dentro del iframe.</h2> <h2>Este texto est dentro del iframe.</h2> <h2>Este texto est dentro del iframe.</h2> <h2>Este texto est dentro del iframe.</h2> <h2>Este texto est dentro del iframe.</h2> <h2>Este texto est dentro del iframe.</h2> <h2>Este texto est dentro del iframe.</h2> <h2>Este texto est dentro del iframe.</h2> <h2>Este texto est dentro del iframe.</h2> <h2>Este texto est dentro del iframe.</h2> <h2>Este texto est dentro del iframe.</h2> <h2>Este texto est dentro del iframe.</h2> <h2>Este texto est dentro del iframe.</h2> <h2>Este texto est dentro del iframe.</h2> <h2>Este texto est dentro del iframe.</h2> <h2>Este texto est dentro del iframe.</h2>

Pgina 89

<h2>Este <h2>Este <h2>Este <h2>Este <h2>Este </body> </html>

texto texto texto texto texto

est est est est est

dentro dentro dentro dentro dentro

del del del del del

iframe.</h2> iframe.</h2> iframe.</h2> iframe.</h2> iframe.</h2>

Practica: Confeccionar una pgina que muestre dos iframes de 300*300 pxeles
cada uno. Hacer que las barras de desplazamiento siempre esten visibles.

53. Declaracin DOCTYPE.

Hasta ahora no hemos hablado de un concepto de vital importancia que es la utilizacin de elementos HTML estndares. De todos modos no hemos introducido elementos HTML propietarios o desaprobados (ej. font, center etc.) La organizacin que define los estndares para la web es W3C. Utilizar en lo posible las directivas de este comite de estndares nos traer como ventanja que nuestras pginas en un futuro sigan viendose correctamente en las nuevas versiones de navegadores. La versin ms actual de HTML es la 4.01. Ahora introduciremos una nueva seccin de nuestra pgina que es la declaracin del tipo de documento (DTD Document Type Declaration), esta seccin se ubica en la primera lnea del archivo HTML, es decir antes de la marca html. Segn el rigor de HTML 4.01 utilizado podemos declararla como: Declaracin transitoria:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

Declaracin estrcta:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

Veamos la sintaxis para definir la seccin del DOCTYPE, la primera diferencia con cualquier otro elemento HTML es que el caracter siguiente del < es el signo de admiracin (!), luego debe ir la palabra DOCTYPE indicando que se trata de un archivo HTML. Ms adelante debemos indicar la versin de HTML y si se trata de HTML transitorio o estricto: Si es HTML transitorio disponemos:
"-//W3C//DTD HTML 4.01 Transitional//EN"

Si es HTML estrcto
"-//W3C//DTD HTML 4.01//EN"

Es decir que cuando es HTML estricto no disponemos la palabra Transitional Por ltimo se define la direccin de internet donde se encuentra un archivo que enuncia los elemento y propiedades permitidos en el HTML 4.01, discriminando entre HTML estricto y transitorio. Porqu utilizar HTML transitional, si lo ms correcto sera utilizar HTML estricto? Puede ser que tengamos muchas pginas desarrolladas en el pasado y nos lleve un tiempo hacerlas compatible con el HTML estricto. Para ver si una pgina cumple el estandar especfico podemos acceder a un programa validador que se encuentra en validator.w3.org

Pgina 90

Pruebe de copiar la siguiente pgina y verifique si se valida correctamente en la direccin indicada en la lnea anterior (copie al textarea de esta pgina este documento HTML y presione el botn check):
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"> <title>Enlaces a peridicos</title> </head> <body> <ol> <li>Costa Rica <ul> <li><a href="http://www.nacion.com">La Nacin</a></li> <li><a href="http://www.aldia.co.cr">Al Dia</a></li> <li><a href="http://www.diarioextra.com">La Extra</a></li> </ul> </li> <li>Espaa <ul> <li><a href="http://www.elpais.es">El Pas Digital</a></li> <li><a href="http://www.abc.es">ABC</a></li> <li><a href="http://www.elmundo.es">El Mundo</a></li> </ul> </li> <li>Mxico <ul> <li><a href="http://www.jornada.unam.mx">La Jornada</a></li> <li><a href="http://www.el-universal.com.mx">El Universal</a></li> </ul> </li> </ol> </body> </html>

Pruebe de borrar el elemento title, tanto su contenido como las marcas de comienzo y final. Valide nuevamente. Pruebe de borrar la marca <ol> y valide.

54. Declaracin DOCTYPE. HTML Transitional

Cuando indicamos que una pgina utiliza HTML Transitional podemos hacer uso de algunos elementos HTML de presentacion (fuentes, alineamiento, colores), adems la ubicacin y anidamiento de elementos es ms elstico. Veamos si nuestra primer pgina que desarrollamos pasa la validacin HTML Transitional (Agregandole la seccin del DOCTYPE):
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> </head> <body> PHP - Java - JavaScript - C - C++ </body> </html>

Como veras despus que lo valides dar un error indicando que faltan datos en la marca head. Como mnimo deberemos agregar el elemento title.

Pgina 91

Luego la pgina queda:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>Mi primer pagina</title> </head> <body> PHP - Java - JavaScript - C - C++ </body> </html>

Ahora prcticamente valida correctamente, solo le falta un meta con la descripcin de codificacin:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"> <title>Mi primer pagina</title> </head> <body> PHP - Java - JavaScript - C - C++ </body> </html>

Ahora si est totalmente correcta.

Ejemplo: Confeccionar la primer pgina del tutorial, modificar para que valide el
cdigo HTML 4.01 Transitional. Luego copie y pegue el cdigo HTML en el sitio de validacin validator.w3.org
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"> <title>Mi primer pagina</title> </head> <body> PHP - Java - JavaScript - C - C++ </body> </html>

Practica:

Confeccione una pgina que contenga una lista anidada y una tabla. Hacer la pgina que valide con HTML 4.01 transitorio. Luego copie y pegue el cdigo HTML en el sitio de validacin validator.w3.org

55. Declaracin DOCTYPE. HTML Estricto

En el DTD Estricto de HTML 4.01 se excluye los elementos y atributos de presentacin que el W3C espera que dejen de utilizarse a medida que se extienda por parte de todos los navegadores el soporte de las hojas de estilo. Los webmaster deben usar el DTD Estricto siempre que sea posible, pero pueden usar el DTD Transicional si es necesario el soporte de elementos y atributos de presentacin. Prcticamente todas las pginas que hemos desarrollado debemos hacerle algunos retoques para que cumplan con la validacin de HTML estrcta.

Pgina 92

Veremos varias de las pginas desarrolladas y los cambios que debemos hacer para que pasen la validacin: Problema 1: Confeccionar una pgina que muestre los nombres de 5 lenguajes de programacin separados por un guin:
<html> <head> </head> <body> PHP - Java - JavaScript - C - C++ </body> </html>

Con los cambios para que valide:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Pgina de prueba del DTD</title> </head> <body> <p>PHP - Java - JavaScript - C - C++</p> </body> </html>

Que modificaciones hemos hecho? 1. Definimos el DOCTYPE

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

2. 3. 4.

Agregamos el meta:
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">

Definimos el elemento title:

<title>Pgina de prueba del DTD</title>

Definimos el texto de la pgina dentro de un prrafo (no puede un texto depender directamente del body):
<p>PHP - Java - JavaScript - C - C++</p>

Todos estos cambios son obligatorios para que valide como HTML 4.01 estricto. Problema 2: Confeccionar una pgina principal que tenga un hipervnculo a otra pgina secundaria.
<html> <head> </head> <body> <h1>Pgina principal.</h1> <a href="pagina2.html">Noticias</a> </body> </html>

Con los cambios para que valide:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"> <title>Pgina de prueba del DTD</title> </head> <body> <h1>Pgina principal.</h1>

Pgina 93

<p><a href="pagina2.html">Noticias</a></p> </body> </html>

Que modificaciones hemos hecho? 1. Definimos el DOCTYPE:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

2. 3. 4.

Agregamos el meta:
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">

Definimos el elemento title:

<title>Pgina de prueba del DTD</title>

Definimos el hipervnculo de la pgina dentro de un prrafo (no puede un hipervnculo depender directamente del body):
<p><a href="pagina2.html">Noticias</a></p>

Problema 3: Confeccionar un formulario que solicite el ingreso del nombre de un usuario y su clave. Mostrar asteriscos donde se ingresa la clave. Disponer dos botones, uno para el envo de datos al servidor y otro para borrar el contenido de todos los controles (editores de texto) que contiene el formulario.
<html> <head> <title>Prueba de formulario</title> </head> <body> <form action="/registrardatos.php" method="post"> Ingrese su nombre: <input type="text" name="nombre" size="20"> <br> Ingrese su clave: <input type="password" name="clave" size="12"> <br> <input type="submit" value="enviar"> <input type="reset" value="borrar"> </form> </body> </html>

Con los cambios para que valide:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"> <title>Pgina de prueba del DTD</title> </head> <body> <form action="/registrardatos.php" method="post"> <p> Ingrese su nombre: <input type="text" name="nombre" size="20"> <br> Ingrese su clave: <input type="password" name="clave" size="12"> <br> <input type="submit" value="enviar"> <input type="reset" value="borrar"> </p> </form> </body>

Pgina 94

</html>

1.

Definimos el DOCTYPE
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

2. 3. 4.

Agregamos el meta:
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">

Definimos el elemento title:

<title>Pgina de prueba del DTD</title>

Definimos todo el contenido del form dentro de un prrafo. No se puede disponer texto o controles de formulario que dependan directamente del elemento form.
<p> Ingrese su nombre: <input type="text" name="nombre" size="20"> <br> Ingrese su clave: <input type="password" name="clave" size="12"> <br> <input type="submit" value="enviar"> <input type="reset" value="borrar"> </p>

Todos estos cambios son obligatorios para que valide como HTML 4.01 estricto.

Ejemplo: Confeccionar la primer pgina del tutorial, modificar para que valide el
cdigo HTML 4.01 Estricto. Luego copie y pegue el cdigo HTML en el sitio de validacin validator.w3.org
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"> <title>Mi primer pagina</title> </head> <body> <p>PHP - Java - JavaScript - C - C++</p> </body> </html>

Practica: Confeccione una pgina que contenga los siguientes elementos a parte
de la estructura mnima de un archivo HTML: a, p, h1, table, img. Hacer la pgina que valide con HTML 4.01 estricto. Luego copiar y pegar en el programa validador de validator.w3.org

56. Declaracin DOCTYPE. para Frames

Cuando empleamos frames debemos utilizar una declaracin distinta para el elemento DOCTYPE. Luego la seccin del DOCTYPE para una pgina que implementa frames debe ser:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">

Es decir se incorpora la palabra Frameset donde disponamos la palabra Transitional o estaba vaca si validamos HTML estrcto. Confeccionar una ventana que contenga dos frames verticales. Dispondremos dos hipervnculos en el frame de la izquierda que al ser presionados actualicen el archivo a mostrar por el frame de la derecha. pagina1.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd"> <html>

Pgina 95

<head> <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"> <title>prueba de frames</title> </head> <frameset cols="20%,80%"> <frame src="pagina2.html"> <frame src="pagina3.html" name="ventanadinamica"> <noframes> <p>El navegador no soporta frames</p> </noframes> </frameset> </html>

pagina2.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"> <title>prueba de frames</title> </head> <body> <h2>Enlaces.</h2> <ul> <li><a href="pagina3.html" target="ventanadinamica">Enlace 1</a></li> <li><a href="pagina4.html" target="ventanadinamica">Enlace 2</a></li> </ul> </body> </html>

Es importante notar que hemos definido la pgina HTML Transitional, esto se debe a que la propiedad target del elemento "a" no est permitida. Es decir si utilizamos frames deberemos trabajar con HTML Transitional. pagina3.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"> <title>prueba de frames</title> </head> <body> <h1>Pgina B</h1> <h2>Este es el contenido de pgina del archivo:pagina4.html</h2> </body> </html>

pagina4.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"> <title>prueba de frames</title> </head> <body> <h1>Pgina B</h1> <h2>Este es el contenido de pgina del archivo:pagina4.html</h2> </body> </html>

Pgina 96

Ejemplo: Confeccionar una ventana que contenga dos frames verticales. Disponer
dos hipervnculos en el frame de la izquierda que al ser presionados actualice el archivo a mostrar por el frame de la derecha. Definir el elemento DOCTYPE para cada pgina. Luego validar cada pgina en el sitio de validator.w3.org pagina1.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"> <title>prueba de frames</title> </head> <frameset cols="20%,80%"> <frame src="pagina2.html"> <frame src="pagina3.html" name="ventanadinamica"> <noframes> <p>El navegador no soporta frames</p> </noframes> </frameset> </html>

pagina2.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"> <title>prueba de frames</title> </head> <body> <h2>Enlaces.</h2> <ul> <li><a href="pagina3.html" target="ventanadinamica">Enlace 1</a></li> <li><a href="pagina4.html" target="ventanadinamica">Enlace 2</a></li> </ul> </body> </html>

pagina3.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"> <title>prueba de frames</title> </head> <body> <h1>Pgina A</h1> <h2>Este es el contenido de pgina del archivo:pagina3.html</h2> </body> </html>

pagina4.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"> <title>prueba de frames</title> </head> <body> <h1>Pgina B</h1> <h2>Este es el contenido de pgina del archivo:pagina4.html</h2>

Pgina 97

</body> </html>

Practica: Confeccionar una pgina con dos frame horizontales. En la parte superior
definir un frame con 100 pxeles de alto. Hacer que el mismo no se pueda redimensionar, no mustre la barra de scroll y no mustre el borde. Luego validar cada pgina en el sitio de validator.w3.org

57. Validacin de la pgina a travs de un enlace.

La W3C nos permite disponer un cono como enlace a su validador de pginas HTML:
<p> <a href="http://validator.w3.org/check?uri=referer"><img src="http://www.w3.org/Icons/valid-html401" alt="Valid HTML 4.01 Strict" height="31" width="88"></a> </p>

Confeccionemos una pgina y probemos el enlace al validador:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"> <title>Mi primer pagina</title> </head> <body> <p>PHP - Java - JavaScript - C - C++</p> <p> <a href="http://validator.w3.org/check?uri=referer"><img src="http://www.w3.org/Icons/valid-html401" alt="Valid HTML 4.01 Strict" height="31" width="88"></a> </p> </body> </html>

Solamente agregamos el prrafo que contiene el hipervnculo al sitio que realiza la validacin. Gran cantidad de sitios tienen este cono o alguno similar para indicar que sus pginas cumplen con el HTML Transitional o estrcto.

Ejemplo: Confeccionar una pgina que muestre los nombres de 5

lenguajes de programacin separados por un guin. Agregar un enlace a la pgina de validacin de HTML. pagina1.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"> <title>Mi primer pagina</title> </head> <body> <p>PHP - Java - JavaScript - C - C++</p> <p> <a href="http://validator.w3.org/check?uri=referer"><img src="http://www.w3.org/Icons/valid-html401" alt="Valid HTML 4.01 Strict" height="31" width="88"></a> </p> </body> </html>

Pgina 98

58. Elementos HTML <div> y <span>

Estas marcas se utilizan en conjuncin con las hojas de estilo. Sin estas tiene poco sentido el empleo de estos elementos HTML. Estos elementos "div" y "span" nos permiten agrupar un conjunto de elementos y aplicar reglas de estilo. La diferencia entre estos dos elementos es que cuando utilizamos el elemento div produce un salto de lnea previo y uno al final, es decir es una marca de bloque como lo son h1, h2,p etc. En cambio el elemento span no produce un salto de lnea porque se trata de un elemento en lnea como lo son a, em, strong, input etc. Veamos un ejemplo creando una divisin (div) y la aplicacin de algunas reglas de estilo, como as un elemento span. Listar una serie de nombres y un bloque de comentarios para cada nombre. Indentar la primer linea de cada prrafo. Hacer que algunas palabras del prrafo aparezcan resaltadas en otro color. Disponer todos los comentarios con un color gris de fondo:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"> <title>ttulo pgina</title> </head> <body> <div style="background-color:#eeeeee"> <h3>Luis Barrionuevo</h3> <p style="color:#888888;text-indent:20px"> Aqu <span style="background-color:#eeee00">comentarios.</span> Aqu comentarios. Aqu comentarios. Aqu comentarios. Aqu comentarios. Aqu comentarios. Aqu comentarios. Aqu comentarios. Aqu comentarios. Aqu comentarios. Aqu comentarios. Aqu comentarios. Aqu comentarios. Aqu comentarios. Aqu comentarios. Aqu comentarios. Aqu comentarios. Aqu comentarios. Aqu comentarios. Aqu comentarios. Aqu comentarios. </p> <h3>Ana Rodriguez</h3> <p style="color:#888888;text-indent:20px"> <span style="background-color:#eeee00">Aqu comentarios.</span> Aqu comentarios. Aqu comentarios. Aqu comentarios. Aqu comentarios. Aqu comentarios. Aqu comentarios. Aqu comentarios. Aqu comentarios.

Pgina 99

Aqu comentarios. Aqu comentarios. Aqu comentarios. Aqu comentarios. Aqu comentarios. Aqu comentarios. Aqu comentarios. Aqu comentarios. Aqu comentarios. Aqu comentarios. Aqu comentarios. Aqu comentarios. </p> </div> </body> </html>

Veamos como definimos los elementos span:

<span style="background-color:#eeee00">comentarios.</span>

Como podemos ver luego en el resultado de la pgina el texto "comentarios" aparece con un color amarillo de fondo. El resto del prrafo contina inmediatamente a la derecha, es decir el elemento span no produce salto de lnea. Para ver la diferencia con el elemento div pruebe de remplazar la palabra span por div y vea los resultados (recuerde cambiar tanto la marca de apertura como la de cerrado del span) Como ver el texto aparece en un bloque independiente. El div agrupa todos los ttulos y prrafos y define la propiedad background-color que es heredado por todos los elementos contendidos por el div:
<div style="background-color:#eeeeee"> <h3>Luis Barrionuevo</h3> <p style="color:#888888;text-indent:20px"> Aqu <span style="background-color:#eeee00">comentarios.</span> Aqu comentarios. . . . . Aqu comentarios. Aqu comentarios. </p> </div>

Ejemplo:

Listar una serie de nombres y un bloque de comentarios para cada nombre. Indentar la primer linea de cada prrafo. Hacer que algunas palabras del prrafo aparezcan resaltadas en otro color. Disponer todos los comentarios con un color gris de fondo.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"> <title>ttulo pgina</title> </head> <body> <div style="background-color:#eeeeee"> <h3>Luis Barrionuevo</h3> <p style="color:#888888;text-indent:20px"> Aqu <span style="background-color:#eeee00">comentarios.</span> Aqu comentarios. Aqu comentarios. Aqu comentarios.

Pgina 100

Aqu comentarios. Aqu comentarios. Aqu comentarios. Aqu comentarios. Aqu comentarios. Aqu comentarios. Aqu comentarios. Aqu comentarios. Aqu comentarios. Aqu comentarios. Aqu comentarios. Aqu comentarios. Aqu comentarios. Aqu comentarios. Aqu comentarios. Aqu comentarios. Aqu comentarios. </p> <h3>Ana Rodriguez</h3> <p style="color:#888888;text-indent:20px"> <span style="background-color:#eeee00">Aqu comentarios.</span> Aqu comentarios. Aqu comentarios. Aqu comentarios. Aqu comentarios. Aqu comentarios. Aqu comentarios. Aqu comentarios. Aqu comentarios. Aqu comentarios. Aqu comentarios. Aqu comentarios. Aqu comentarios. Aqu comentarios. Aqu comentarios. Aqu comentarios. Aqu comentarios. Aqu comentarios. Aqu comentarios. Aqu comentarios. Aqu comentarios. </p> </div> </body> </html>

Practica: Confeccionar una pgina que contenga dos divisiones con una serie de
prrafos cada una. Disponer color de fondo distinto para cada seccin. En la segunda seccin mostrar el mismo texto de la primera seccin pero con algunas palabras tachadas.

59. Elementos y propiedades de HTML que no se deben usar

Nombraremos los elementos y propiedades de HTML que no se deben usar, ya que sus objetivos actualmente se resuelven utilizando CSS (Hojas de estilo), de todos modos se las encontrar en muchas pginas antiguas y otras no tanto: Elementos u Muestra un texto subrayado.

Pgina 101

s Muestra un texto tachado. strike Muestra un texto tachado. center Muestra un texto centrado. menu Crea una lista dir Define una lista multicolumna layer (solo Netscape) Agrupa un bloque de elementos HTML (utilizar div) blink Resalta un texto marquee Muestra un texto desplazandose de izquierda a derecha o viceversa. Tiene muchas propiedades para definir fuente, color, velocidad de avance etc. font Permite definir mediante una serie de propiedades el tipo de fuente, tamao y color b Muestra el texto en negrita. i Muestra el texto en itlica. big Muestra el texto con fuente grande. small Muestra el texto con fuente pequea. hr Muestra una lnea horizontal. basefont Establece el tamao base de fuente. isindex Crea un control de entrada de una lnea. Propiedades text Fija el color de texto para la pgina si se aplica al elemento body. bgcolor Fija el color del fondo de texto si se aplica al elemento body. background Fija una imagen de fondo a la pgina. Propiedad del elemento body. link Fija el color de los enlaces no visitados. Se aplica al body. alink Fija el color del enlace activo. Se aplica al body. vlink Fija el color de los enlaces ya visitados. Se aplica al body. align Se lo utiliza para alinear texto a izquierda, derecha, centro etc. No daremos ejemplo del empleo de estos elementos y propiedades para evitar cualquier posibilidad de internalizar su funcionamiento y empleo. Ya vimos algunos conceptos bsicos de CSS que remplazan estos elementos HTML.

Pgina 102

Las Hojas de Estilo CSS CSS

1. Que son las hojas de estilo (CSS)?
CSS son las siglas de Cascade Style Sheet que traducido significa hojas de estilo en cascada. Las hojas de estilo es una tecnologa que nos permite controlar la apariencia de una pgina web. En un principio, los sitos web se concentraban ms en su contenido que en su presentacin. HTML no pone mucha atencin en la apariencia del documento. CSS describe como los elementos dispuestos en la pgina son presentados al usuario. CSS es un gran avance que complementa el HTML y la Web en general. Con CSS podemos especifiar estilos como el tamao, fuentes, color, espaciado entre textos y recuadros as como el lugar donde disponer texto e imagenes en la pgina. El lenguaje de las Hojas de Estilo est definido en la Especificaciones CSS1 y CSS2 del World Wide Web Consortium (W3C), es un estndar aceptado por toda la industria relacionada con la Web, o por lo menos, gran parte de navegadores (es verdad el IExplorer de Microsoft nos puede dar un dolor de cabeza). Podemos visitar W3C Veremos que podemos asociar las reglas de estilo a las marcas HTML de tres maneras: directamente a la marca, en el head de la pgina o agrupar las reglas de estilo en un archivo independiente con extensin *.css En este curso veremos las tres metodologas, pero pondremos nfasis en la tercera forma, que es la ms adecuada para separar el contenido de la pgina y la forma como se debe representar la misma por medio de la hoja de estilo. El curso brinda un concepto terico corto, luego un problema resuelto que invito a ejecutar, modificar y jugar con el mismo. Por ltimo, y lo ms importante, un ejercicio propuesto que nos permitir saber si podemos aplicar el concepto.

Ejemplo: El objetivo de esta pequea pgina es ver cmo afecta el estilo definido a
la marca p (prrafo) pagina1.html
<html> <head> </head> <body> <p style="color:#000000;background-color:yellow;font-family:vardana;fontsize:25px;text-align:center">Esto es un ejemplo</p> </body> </html>

2.

Definicin de estilos a nivel de marca HTML.

Es la forma ms fcil pero menos recomendada para aplicacin de un estilo a una marca HTML. Se define en la propiedad style los estilos a definir para dicha marca.

Pgina 103

Es comn definir estilos directamente en las marcas HTML cuando estamos diseando la pgina y posteriormente trasladar el estilo creado a una hoja de estilos. La sintaxis para definir un estilo a una marca HTML es la siguiente:
<html> <head> </head> <body> <h1 style="color:#ff0000;background-color:#ffff00"> Este mensaje es de color rojo sobre fondo amarillo. </h1> </body> </html>

Por defecto, todo navegador tiene un estilo definido para cada marca HTML, lo que hacemos con la propiedad style es redefinir el estilo por defecto. En este problema definimos que la marca h1 defina como color de texto el rojo y como color de fondo el amarillo:
<h1 style="color:#ff0000;background-color:#ffff00"> Este mensaje es de color rojo sobre fondo amarillo. </h1>

Veremos ms adelante que hay muchas propiedades en CSS. En este primer ejemplo inicializamos las propiedades color (define el color del texto) y background-color (define el color de fondo del texto). Cada vez que inicializamos una propiedad debemos separarla de la siguiente por punto y coma. Cuando definimos estilos directamente en las marcas HTML, tenemos que tener en cuenta que el estilo se aplica nicamente a la marca donde inicializamos la propiedad style, es decir, si tenemos dos secciones h1, deberemos definir la propiedad style para cada marca:
<h1 style="color:#ff0000;background-color:#ffff00"> Primer ttulo </h1> <h1 style="color:#ff0000;background-color:#ffff00"> Segundo ttulo </h1>

Como podemos observar, ms alla que los dos estilos son exactamente iguales, estamos obligados a definirlos para cada marca HTML.

Ejemplo: Definir
<html> <head> </head> <body>

un texto dentro de la marca HTML h1. Luego definir un estilo interno a la marca que fije el color de texto en rojo y el fondo en amarillo. pagina1.html

<h1 style="color:#ff0000;background-color:#ffff00"> Este mensaje es de color rojo sobre fondo amarillo. </h1> </body> </html>

Practica: Crear una pgina HTML y definir tres mensajes entre las marcas h1, h2 y
h3. Definir el mismo color para el texto de cada bloque y colores diferentes para el fondo de los mismos (cada marca HTML debe tener definida la propiedad style).

Pgina 104

3.

Definicin de estilos a nivel de pgina.

Es la definicin de estilos en una seccin de la cabecera de la pgina HTML donde podemos definir estilos que se aplican a las distintas marcas HTML de la pgina. El problema del concepto anterior donde debamos crear un estilo similar para la marca h1 se puede resolver en forma ms adecuada empleando la definicin de estilos a nivel de pgina. Problema: Mostrar dos ttulos con texto de color rojo sobre fondo amarillo.
<html> <head> <title>Problema</title> <style type="text/css"> h1 {color:#ff0000;background-color:#ffff00} </style> </head> <body> <h1>Primer ttulo</h1> <h1>Segundo ttulo</h1> </body> </html>

Podemos observar que en la cabecera de la pgina definimos la seccin:

<style type="text/css"> h1 {color:#ff0000;background-color:#ffff00} </style>

Debe estar encerrada por la marca style. En este ejemplo indicamos al navegador que en todos los lugares de esta pgina donde se utilice la marca h1 debe aplicar como estilo de color de texto el rojo y fondo el amarillo. Podemos observar que es mucho ms eficiente que definir los estilos directamente sobre las marcas HTML. Podemos definir estilos para muchas marcas en la seccin style:
<html> <head> <title>Problema</title> <style type="text/css">> h1 {color:#ff0000} h2 {color:#00ff00} h3 {color:#0000ff} </style> </head> <body> <h1>rojo</h1> <h2>verde</h2> <h3>azul</h3> </body> </html>

Ejemplo: Mostrar dos ttulos con texto de color rojo sobre fondo amarillo.
pagina1.html
<html> <head> <title>Problema</title> <style type="text/css"> h1 {color:#ff0000;background-color:#ffff00} </style> </head> <body> <h1>Primer ttulo</h1> <h1>Segundo ttulo</h1>

Pgina 105

</body> </html>

Practica:

Definir un estilo diferente para las marcas h1, h2, h3, h4, h5 y h6. Mostrar mensajes utilizando estas marcas a las que se le han definido estilos (por ahora slo conocemos el color de texto y fondo).

4.

Propiedades relacionadas a fuentes.

Contamos con una serie de propiedades relacionadas a fuentes:

font-family font-size font-style font-weight font-variant

Podemos inicializar algunas o todas las propiedades relacionadas a fuentes, un ejemplo:

<html> <head> <title>Problema</title> <style type="text/css"> h1 { font-family:times new roman; font-size:30px; font-style:italic; font-weight:bold; } h2 { font-family:verdana; font-size:20px; } </style> </head> <body> <h1>Titulo de nivel 1</h1> <h2>Titulo de nivel 2</h2> </body> </html>

Como podemos observar, hemos definido dos reglas de estilos para las marcas h1 y h2, eso significa que el navegador utilizar esas reglas de fuentes para todas las partes de la pgina que se utilicen dichas marcas HTML. La primera regla definida para la marca h1 es:
h1 { font-family:times new roman; font-size:30px; font-style:italic; font-weight:bold; }

Recordemos que para definir la regla de estilo debemos indicar el nombre de la marca HTML a la que definiremos el estilo y luego, entre parntesis, todas las propiedades y sus valores separados por punto y coma. La primera propiedad inicializada es font-family, algunas de las fuentes ms comunes que puede acceder el navegador son:
Arial Arial Black Arial Narrow

Pgina 106

Courier New Georgia Impact Tahoma Times New Roman Verdana

En caso que la fuente no est disponible el navegador selecciona el estilo por defecto para esa marca HTML. Podemos definir varias fuentes por si acaso alguna no se encuentra disponible para el navegador, esto lo hacemos separando por coma todas las fuentes (se eligen de izquierda a derecha):
font-family: verdana, arial, georgia;

La segunda propiedad inicializada es font-size, hay varias medidas para indicar el tamao de la fuente (veremos ms adelante otros sistemas de medida), en nuestro caso indicamos en pxeles:
font-size:30px;

La tercera propiedad es font-style, que puede tener los siguientes valores:

normal italic oblique

La ltima propiedad es font-weight, pudiendo tomar los siguientes valores:

normal bold bolder lighter 100 200 300 400 500 600 700 800 900

Esta propiedad indica el peso de la fuente (mientras tenga un valor mayor los caracteres sern ms rellenos). La segunda regla define slo dos propiedades relacionadas a la fuente:
h2 { font-family:verdana; font-size:20px; }

Las propiedades que no se inicializan quedan como responsabilidad al navegador, quien elegir los valores correspondientes. Existe una ltima propiedad no utilizada en este ejemplo que es font-variant que puede asumir estos dos valores:
small-caps normal

Define si la fuente se muestra en maysculas tipo normal o pequeas.

Ejemplo: Definir para la marca h1 una fuente de tipo 'new times roman', fuente de
30 pixeles, estilo italic y peso bold. Para la marca h2 definir una fuente de tipo 'verdana' y de 20 pxeles de alto. pagina1.html

Pgina 107

<html> <head> <title>Problema</title> <style type="text/css"> h1 { font-family:times new roman; font-size:30px; font-style:italic; font-weight:bold; } h2 { font-family:verdana; font-size:20px; } </style> </head> <body> <h1>Titulo de nivel 1</h1> <h2>Titulo de nivel 2</h2> </body> </html>

Practica: Definir reglas para las marcas HTML: h1,h2,h3,h4,h5 y h6. Inicializar la
propiedad font-size con valores decrecientes para cada una de las marcas (40,30,25,20,15 y 10 pxeles). Inicializar la propiedad font-family para las tres primeras marcas con los valores: Arial, Arial Black y Arial Narrow.

5. Agrupacin de varias marcas HTML con una misma regla de estilo.

Esta caracterstica nos permite ahorrar la escritura de reglas duplicadas para diferentes marcas HTML. Supongamos que queremos la misma fuente y color para las marcas h1,h2 y h3 luego podemos implementarlo de la siguiente manera:
<html> <head> <title>Problema</title> <style type="text/css"> h1,h2,h3 { font-family:verdana; color:#0000ff; } </style> </head> <body> <h1>Ttulo de nivel 1</h1> <h2>Ttulo de nivel 2</h2> <h3>Ttulo de nivel 3</h3> </body> </html>

Es decir, separamos por coma todas las marcas a las que se aplicar la misma regla de estilo:
h1,h2,h3 { font-family:verdana; color:#0000ff; }

Ejemplo: Confeccionar una pgina HTML que defina la misma fuente y color para
las marcas h1,h2 y h3.

Pgina 108

Pagina1.html
<html> <head> <title>Problema</title> <style type="text/css"> h1,h2,h3 { font-family:verdana; color:#0000ff; } </style> </head> <body> <h1>Ttulo de nivel 1</h1> <h2>Ttulo de nivel 2</h2> <h3>Ttulo de nivel 3</h3> </body> </html>

Practica:

Definir la misma fuente, color y tamao de fuente para las marcas p (prrafo) y h6 (tener en cuenta que cuando vea la pgina el texto que se encuentra en la marca h6 difiere del texto que se encuentra dentro del prrafo por la propiedad font-weight (ya que la marca h6 es de tipo bold y la marca p tiene por defecto normal)

6. Definicin de varias reglas para una misma marca HTML.

En algunas circunstancias, es necesario desglosar la inicializacin de propiedades en distintas reglas. Supongamos que queremos todas las cabeceras con la misma fuente pero tamaos de fuente distinta, luego podemos implementarlo de la siguiente manera:
<html> <head> <title>Problema</title> <style type="text/css"> h1,h2,h3,h4,h5,h6 { font-family:Verdana; } h1 { font-size:40px; } h2 { font-size:30px; } h3 { font-size:25px; } h4 { font-size:20px; } h5 { font-size:15px; } h6 { font-size:10px; } </style> </head> <body> <h1>Ttulo de nivel 1</h1>

Pgina 109

<h2>Ttulo <h3>Ttulo <h4>Ttulo <h5>Ttulo <h6>Ttulo </body> </html>

de de de de de

nivel nivel nivel nivel nivel

2</h2> 3</h3> 4</h4> 5</h5> 6</h6>

Es decir, podemos inicializar un conjunto de marcas HTML con una serie de propiedades de estilo comunes. Luego agregamos en forma individual las propiedades no comunes a dichas marcas:
h1,h2,h3,h4,h5,h6 { font-family:Verdana; } h1 { font-size:40px; }

Es decir, a la marca h1 realmente le hemos definido 2 propiedades: font-family y fontsize. Lo mismo para las otras marcas HTML.

Ejemplo: Definir todas las marcas de cabecera (h1, h2, h3, h4, h5, h6) con la misma
fuente (Verdana) pero tamaos de fuente distinta. pagina1.html
<html> <head> <title>Problema</title> <style type="text/css"> h1,h2,h3,h4,h5,h6 { font-family:Verdana; } h1 { font-size:40px; } h2 { font-size:30px; } h3 { font-size:25px; } h4 { font-size:20px; } h5 { font-size:15px; } h6 { font-size:10px; } </style> </head> <body> <h1>Ttulo de nivel 1</h1> <h2>Ttulo de nivel 2</h2> <h3>Ttulo de nivel 3</h3> <h4>Ttulo de nivel 4</h4> <h5>Ttulo de nivel 5</h5> <h6>Ttulo de nivel 6</h6> </body> </html>

Practica:

Definir para la marca <h6> el mismo tamao de fuente (12px) que la marca <p> (prrafo) pero color azul para el ttulo y gris claro (color:#aaaaaa) para el

Pgina 110

prrafo. Agrupar las dos marcas para la definicin de la fuente y posteriormente agregar a cada marca el valor respectivo para el color del texto.

7.

Propiedades relacionadas al texto.

A una de estas propiedades ya la vimos cuando comenzamos con los primeros conceptos: color, nos permite definir el color del texto, lo podemos indicar por medio de tres valores hexadecimales que indican la mezcla de rojo, verde y azul. Por ejemplo si queremos rojo puro debemos indicar:
color:#ff0000;

Si queremos verde puro:

color:#00ff00

Si queremos azul puro:

color:#0000ff

Luego si queremos amarillo debemos mezclar el rojo y el verde:

color:#ffff00

Hay muchos programas que nos permiten seleccionar un color y nos descomponen dicho valor en las proporciones de rojo, verde y azul. Otra forma de indicar el color, si tenemos los valores en decimal, es por medio de la siguiente sintaxis:
color:rgb(255,0,0);

Es decir, por medio de la funcin rgb (red,green,blue), indicamos la cantidad de rojo, verde y azul en formato decimal. La segunda propiedad relacionada al texto es text-align, que puede tomar alguno de estos cuatro valores:
left right center justify

Si especificamos:
text-align:center;

El texto aparecer centrado. Si queremos justificar a derecha, emplearemos el valor right y si queremos a la izquierda, el valor ser left. La tercera propiedad relacionada al texto que podemos emplear es text-decoration que nos permite entre otras cosas que aparezca subrayado el texto, tachado o una lnea en la parte superior, los valores posibles de esta propiedad son:
none underline overline line-through

Como ejemplo, definiremos estilos relacionados al texto para las marcas de cabecera h1, h2 y h3:
<head> <title>Problema</title> <style type="text/css"> h1 { color:#ff0000; text-align:left; text-decoration:underline;

Pgina 111

} h2 { color:#dd0000; text-align:center; text-decoration:underline; } h3 { color:#aa0000; text-align:right; text-decoration:underline; } </style> </head> <body> <h1>Ttulo de nivel 1.<h1> <h2>Ttulo de nivel 2.<h2> <h3>Ttulo de nivel 3.<h3> </body> </html>

Es decir, para los ttulos de nivel 1 tenemos la regla:

h1 { color:#ff0000; text-align:left; text-decoration:underline; }

Es decir, color de texto rojo intenso, el texto debe aparecer de izquierda a derecha y subrayado. Luego para la marca h2 tenemos:
h2 { color:#dd0000; text-align:center; text-decoration:underline; }

El color sigue siendo rojo pero un poco ms oscuro, el texto debe aparecer centrado y subrayado. Y por ltimo:
h3 { color:#aa0000; text-align:right; text-decoration:underline; }

Para los ttulos de nivel tres, el texto es rojo ms oscuro, alineado a derecha y subrayado.

Ejemplo: Definir estilos relacionados al texto para las marcas de cabecera h1,h2 y
h3, inicializando las propiedades: color, text-align y text-decoration con los siguientes valores:
para la marca h1: color:#ff0000; text-align:left; text-decoration:underline; para la marca h2: color:#dd0000; text-align:center; text-decoration:underline; y para la marca h3: color:#aa0000; text-align:right; text-decoration:underline;

Pgina 112

pagina1.html
Final del formulario <html> <head> <title>Problema</title> <style type="text/css"> h1 { color:#ff0000; text-align:left; text-decoration:underline; } h2 { color:#dd0000; text-align:center; text-decoration:underline; } h3 { color:#aa0000; text-align:right; text-decoration:underline; } </style> </head> <body> <h1>Ttulo de nivel 1.<h1> <h2>Ttulo de nivel 2.<h2> <h3>Ttulo de nivel 3.<h3> </body> </html>

8.

Ms propiedades relacionadas al texto.

Vimos en el concepto anterior las propiedades:

color text-align text-decoration

Ahora veremos el objetivo de las siguientes propiedades que nos faltan:

letter-spacing word-spacing text-indent text-transform

La propiedad letter-spacing y word-spacing permiten indicar el espacio que debe haber entre los caracteres y entre las palabras. La propiedad text-indent, indenta la primera linea de un texto. A partir de la segunda lnea, el texto aparece sin indentacin. Podemos indicar un valor negativo con lo que la indentacin es hacia la izquierda. Por ltimo, la propiedad text-transform puede inicializarse con alguno de los siguientes valores:
none - capitalize - lowercase - uppercase

Cada uno de estos valores transforma el texto como sigue: capitalize: Dispone en maysculas el primer caracter de cada palabra. lowercase: Convierte a minsculas todas las letras del texto. uppercase: Convierte a maysculas todas las letras del texto. none: No provoca cambios en el texto. El siguiente ejemplo define reglas para las marcas h1 y p:
<html>

Pgina 113

<head> <title>Problema</title> <style type="text/css"> h1 { letter-spacing:10px; word-spacing:30px; text-transform:capitalize; } p { text-indent:20px; } </style> </head> <body> <h1>Este es un ttulo de nivel 1</h1> <p>Todo el texto siguiente se encuentra encerrada en la marca de prrafo y con el objetivo de ver el efecto de la propiedad text-indent. La propiedad text-indent podemos inicializarla con un valor positivo, como es el caso actual o podemos inicializarla con un valor negativo lo que provocar que el texto de la primera lnea del prrafo comience en una columna inferior al de todo el bloque. </p> </body> </html>

La cabecera de nivel uno, tiene la siguiente regla:

h1 { letter-spacing:10px; word-spacing:30px; text-transform:capitalize; }

Es decir que las letras deben tener una separacin de 10 pixeles, las palabras deben estar separadas por 30 pixeles y por ltimo deben disponerse en maysculas la primera letra de cada palabra. Para la marca p tenemos la siguiente regla:
p { text-indent:20px; }

Es decir, la primera lnea del prrafo deber imprimirse 20 pxeles a la derecha donde normalmente debera aparecer.

Ejemplo: Inicializar las marcas h1 y p con los siguientes valores:

h1 { letter-spacing:10px; word-spacing:30px; text-transform:capitalize; } p { text-indent:20px; }

pagina1.html
<html> <head> <title>Problema</title> <style type="text/css"> h1 { letter-spacing:10px; word-spacing:30px; text-transform:capitalize; } p { text-indent:20px;

Pgina 114

} </style> </head> <body> <h1>Este es un ttulo de nivel 1</h1> <p>Todo el texto siguiente se encuentra encerrada en la marca de prrafo y con el objetivo de ver el efecto de la propiedad text-indent. La propiedad text-indent podemos inicializarla con un valor positivo, como es el caso actual o podemos inicializarla con un valor negativo lo que provocar que el texto de la primera lnea del prrafo comienze en una columna inferior al de todo el bloque. </p> </body> </html>

Practica: Definir las marcas de cabecera h1,h2 y h3 con valores decrecientes para
las propiedades:
letter-spacing word-spacing

Luego inicializar la propiedad text-transform para que el texto siempre salga en maysculas.

9.

Herencia de propiedades de estilo.

Ahora veremos que el conjunto de marcas HTML forman en s un rbol que en su raiz podemos identificar la marca body del cual se desprenden otras marcas contenidas en esta seccin, como podran ser las marcas h1,h2,h3,h4,h5,h6,p,div luego estas en su interior contienen otras marcas HTML como podran ser em,b,i,pre etc. Ahora veremos con ejemplos que hay muchos estilos que se heredan (todos los vistos hasta el momento se heredan), es decir si definimos la propiedad color para la marca h1, luego si dicha marca incorpora un texto con la marca b (bold) en su interior, la propiedad color de la marca b tendr el mismo valor que la propiedad h1 (es decir la marca b hereda las propiedades de la marca h1) Con un ejemplo veremos el resultado de la herencia de propiedades entre las marchas HTML:
<html> <head> <title>Problema</title> <style type="text/css"> body { color:#0000ff; font-family:verdana; } </style> </head> <body> <h1>Este es un ttulo de nivel 1 y con la marca 'em' la palabra: <em>Hola</em></h1> <p>Todo este prrafo debe ser de color azul ya que lo hereda de la marca body.</p> <a href="pagina2.html">Siguiente ejemplo</a> </body> </html>

En este ejemplo hemos definido la siguiente regla para la marca body:

body { color:#0000ff;

Pgina 115

font-family:verdana; }

Inicializamos la propiedad color con el valor de azul y la fuente de tipo verdana. Con esto todas las marcas contenidas en el body que no redefinan estas dos propiedades recibirn los valores aqu definidos. En este ejemplo la cabecera de primer nivel es decir h1, el prrafo y el hipervnculo tienen como color el azul y la fuente es de tipo verdana. Ahora bien en muchas situaciones podemos redefinir propiedades para marcas contenidas, veamos cmo podemos hacer que el texto contenido en las marcas em y p aparezcan de color distinto:
<html> <head> <title>Problema</title> <style type="text/css"> body { color:#0000ff; font-family:verdana; } em { color:#008800; } p { color:#999999; } </style> </head> <body> </body> <h1>Este es un ttulo de nivel 1 y con la marca 'em' la palabra: <em>Hola</em></h1> <p>Todo este prrafo debe ser de color gris ya que lo redefine la marca p y no lo hereda de la marca body.</p> </html>

Ahora hemos definido tres reglas, la primera igual que el problema anterior, define la propiedad color en azul y la fuente de tipo verdana para la marca body:
body { color:#0000ff; font-family:verdana; }

La segunda regla define la propiedad color en verde para la marca em, con esto no heredar el color azul de la marca body (que es la marca padre):
em { color:#008800; }

Algo similar hacemos con la marca p para indicar que sea de color gris:
p { color:#999999; }

Pero podemos ver que todas las marcas heredan la fuente verdana ya que ninguna marca la sobrescribe.

Ejemplo: Confeccionar una pgina aplicando el siguiente estilo:

body { color:#0000ff; font-family:verdana; }

Pgina 116

Luego imprimir contenido dentro de las marcas h1, em y p. Ejemplo 2: Definir dos reglas ms de estilo al problema uno, que sobrescriban la propiedad color:
em { color:#008800; } p { color:#999999; }

pagina1.html
<html> <head> <title>Problema</title> <style type="text/css"> body { color:#0000ff; font-family:verdana; } </style> </head> <body> <h1>Este es un ttulo de nivel 1 y con la marca 'em' la palabra: <em>Hola</em></h1> <p>Todo este prrafo debe ser de color azul ya que lo hereda de la marca body.</p> <a href="pagina2.html">Siguiente ejemplo</a> </body> </html>

pagina2.html
<html> <head> <title>Problema</title> <style type="text/css"> body { color:#0000ff; font-family:verdana; } em { color:#008800; } p { color:#999999; } </style> </head> <body> </body> <h1>Este es un ttulo de nivel 1 y con la marca 'em' la palabra: <em>Hola</em></h1> <p>Todo este prrafo debe ser de color gris ya que lo redefine la marca p y no lo hereda de la marca body.</p> </html>

Practica:

Confeccione una pgina que define una regla para la marca body e inicialice las propiedades color, font-family. Luego defina reglas de estilo para las marcas h1,h2 y h3 que redefinan la fuente con los valores: Times New Roman, Courier y Arial. Imprima tres ttulos, cada uno con las marcas h1,h2 y h3. Por ltimo imprima un prrafo.

Pgina 117

10. Definicin de un estilo en funcin del contexto.

Este otro recurso que provee las css es la definicin de un estilo para una marca HTML siempre y cuando la misma est contenida por otra marca determinada. Slo en ese caso el estilo para dicha marca se activar. Supongamos que queremos que cuando disponemos un texto encerrado por la marca b (bold) dentro de un prrafo el color de la misma sea verde. Pero si la marca b est contenida por la marca h1 el color debe ser rojo, luego la sintaxis del problema es:
<html> <head> <title>Problema</title> <style type="text/css"> p b{ color:#0000ff; } h1 b{ color:#ff0000; } </style> </head> <body> <h1>Ac tenemos un ttulo de nivel uno, luego un bloque con la marca bold debe aparecer <b>as</b></h1> <p> Luego si escribimos un prrafo y encerramos un bloque con la marca bold debe aparecer <b>as</b> </p> </body> </html>

Es importante analizar la sintaxis para la definicin de estilos en funcin del contexto. Tenemos:
p b{ color:#0000ff; }

Estamos diciendo que todas los bloques de la pgina que contengan la marca b (bold) y que estn contenidas por la marca p (prrafo) se pinten de azul. Si bien hay dos bloques en la pgina que estn encerrados por la marca b, solo uno se pinta de color azul, el otro bloque se pinta de color verde, ya que tenemos:
h1 b{ color:#ff0000; }

Es decir, activar el color rojo para el contenido encerrado por la marca b, siempre y cuando se encuentre contenido por la marca h1. No confundir con la sintaxis para definir reglas de estilo a dos marcas que se hace separando por coma las marcas HTML:
h1,b{ color:#ff0000; }

Es decir que el texto contenido por las marcas h1 y b deben aparecer de color rojo. Se pueden definir estilos en funcin del contexto, con mayor precisin, como por ejemplo:
div h1 em {

Pgina 118

color:#ff0000; }

Con esto estamos diciendo que se debe pintar de color rojo el texto contenido por la marca em siempre y cuando est contenida en un bloque con la marca h1 y esta a su vez dentro de un div. La pgina completa queda codificada de la siguiente forma:
<html> <head> <title>Problema</title> <style type="text/css"> div h1 em { color:#ff0000; } </style> </head> <body> <div> <h1>Este es un titulo de nivel 1 dentro de un <em>div</em></h1> </div> <h1>Este es un titulo de nivel 1 fuera de un <em>div</em></h1> </body> </html>

Ejemplo: Disponer un texto encerrado por la marca b (bold) dentro de un prrafo,

el color de la misma ser verde. Pero si la marca b est contenida por la marca h1 el color debe ser rojo. La segunda pgina muestra un estilo en funcin del contexto dependiendo de dos marcas que la contengan. Pinta de rojo un texto contenido por la marca em siempre y cuando este contenido por la marca h1 y div (en ese orden). pagina1.html
<html> <head> <title>Problema</title> <style type="text/css"> p b{ color:#0000ff; } h1 b{ color:#ff0000; } </style> </head> <body> <h1>Ac tenemos un ttulo de nivel uno, luego un bloque con la marca bold debe aparecer <b>as</b></h1> <p> Luego si escribimos un prrafo y encerramos un bloque con la marca bold debe aparecer <b>as</b> </p> <a href="pagina2.html">Siguiente pgina</a> </body> </html>

pagina2.html
<html> <head> <title>Problema</title> <style type="text/css"> div h1 em { color:#ff0000;

Pgina 119

} </style> </head> <body> <div> <h1>Este es un titulo de nivel 1 dentro de un <em>div</em></h1> </div> <h1>Este es un titulo de nivel 1 fuera de un <em>div</em></h1> </body> </html>

Practica:

Definir distintas escalas de grises para los bloques encerrados por la marca HTML em que se encuentren contenidos por las marcas h1,h2,h3,h4,h5 y h6. Una escala de grises que podemos utilizar es:
color:#dddddd; color:#cccccc; color:#bbbbbb; color:#aaaaaa color:#999999 color:#888888;

Aparecen los bloques de ms claro a ms oscuro (cuando los tres valores son iguales (rojo,verde,azul) estamos en presencia de un gris (salvo el #000000 y el #ffffff).

11. Definicin de hojas de estilo en un archivo externo.

Hasta ahora hemos visto la definicin de estilos a nivel de marca HTML y la definicin de estilos a nivel de pgina. Dijimos que la primera forma es muy poco recomendada y la segunda es utilizada cuando queremos definir estilos que sern empleados slo por esa pgina. Ahora veremos que la metodologa ms empleada es la definicin de una hoja de estilo en un archivo separado que deber tener la extensin css. Este archivo contendr las reglas de estilo (igual como las hemos visto hasta ahora) pero estarn separadas del archivo HTML. La ventaja fundamental es que con esto podemos aplicar las mismas reglas de estilo a parte o a todas las pginas del sitio web. Veremos que esto ser muy provechoso cuando necesitemos hacer cambios de estilo (cambiando las reglas de estilo de este archivo estaremos cambiando la apariencia de mltiples pginas del sitio). Tambien tiene como ventaja que al programador le resulta ms ordenado tener lo referente a HTML en un archivo y las reglas de estilo en un archivo aparte. Otra ventaja es que cuando un navegador solicita una pgina, se le enva el archivo HTML y el archivo CSS, quedando guardado este ltimo archivo en la cach de la computadora, con lo cual, en las sucesivas pginas que requieran el mismo archivo de estilos, ese mismo archivo se rescata de la cach y no requiere que el servidor web se lo reenve (ahorrando tiempo de transferencia). Ahora veremos la primera pgina HTML que tiene asociada una hoja de estilo en un archivo externo. El archivo HTML es (pagina1.html):
<html> <head> <title>Problema</title> <link rel="StyleSheet" href="estilos.css" type="text/css"> </head>

Pgina 120

<body> <h1>Definicin de hojas de estilo en un archivo externo.</h1> <p> Hasta ahora hemos visto la definicin de estilos a nivel de marca HTML y la definicin de estilos a nivel de pgina. Dijimos que la primera forma es muy poco recomendada y la segunda es utilizada cuando queremos definir estilos que sern empleados solo por esa pgina. Ahora veremos que la metodologa ms empleada es la definicin de una hoja de estilo en un archivo separado que deber tener la extensin css. </p> </body> </html>

El archivo que tiene las reglas de estilo es (estilos.css):

body { background-color:#eafadd; } h1 { color:#0000cc; font-family:times new roman; font-size:25px; text-align:center; text-decoration:underline; } p { color:#555555; font-family:verdana; text-align:justify; }

Como podemos observar, para indicar el archivo de estilos externo, debemos agregar en la cabecera (head) del archivo HTML la siguiente marca:
<link rel="StyleSheet" href="estilos.css" type="text/css">

La propiedad href hace referencia al archivo externo que afectar la presentacin de esta pgina. En la propiedad type, indica al navegador cual es el formato de archivo.El atributo rel se usa para definir la relacin entre el archivo enlazado y el documento HTML. Slo queda probar esta pgina desde la seccin de "Problema Resuelto". De ahora en ms nos acostumbraremos a trabajar con hojas de estilo definidas en un archivo externo, que es en definitiva la forma ms comn de desarrollar un sitio web aplicando CSS.

Ejemplo: Confeccionar una pgina HTML que incorpore una hoja de estilo desde
un archivo externo. Definir reglas de estilos para las marcas body, h1 y p. pagina1.html
<html> <head> <title>Problema</title> <link rel="StyleSheet" href="estilos.css" type="text/css"> </head> <body> <h1>Definicin de hojas de estilo en un archivo externo.</h1> <p> Hasta ahora hemos visto la definicin de estilos a nivel de marca HTML y la definicin de estilos a nivel de pgina. Dijimos que la primera forma es muy poco recomendada y la segunda es utilizada cuando queremos definir estilos que sern empleados solo por esa pgina. Ahora veremos que la metodologa ms empleada es la definicin de una hoja de estilo en un archivo separado que deber tener la extensin css. </p>

Pgina 121

</body> </html>

estilos.css
body { background-color:#eafadd; } h1 { color:#0000cc; font-family:times new roman; font-size:25px; text-align:center; text-decoration:underline; } p { color:#555555; font-family:verdana; text-align:justify; }

Crear una pgina web que contenga una cabecera de nivel 1 (h1), luego una cabecera de nivel 2 (h2) y un prrafo. Definir reglas de estilo para las tres marcas h1,h2 y p. Inicializar propiedades vistas en conceptos anteriores. Intentar el planteo de una pgina que muestre el contenido de la forma ms clara posible.

12. Definicin de estilos por medio de clases.

En muchas situaciones una regla de estilo puede ser igual para un conjunto de marcas HTML, en esos casos conviene plantear una regla de estilo con un nombre genrico que posteriormente se puede aplicar a varias marcas de HTML. Para conocer la sintaxis para la definicin de clases veamos un ejemplo, la pagina1.html es:
<html> <head> <title>Problema</title> <link rel="StyleSheet" href="estilos.css" type="text/css"> </head> <body> <h1 class="resaltado">Titulo de nivel 1</h1> <p> Este parrafo muestra el resultado de aplicar la clase .resaltado en la ltima <span class="resaltado">palabra.</span> </p> </body> </html>

La hoja de estilo externa (estilos.css) es:

body { background-color:#eeeeee; } .resaltado{ color:#000000; background-color:#ffff00; font-style:italic; }

La sintaxis para definir una clase aplicable a cualquier marca HTML es:
.resaltado{ color:#000000;

Pgina 122

background-color:#ffff00; font-style:italic; }

Es decir, la inicializamos con el caracter punto y seguidamente un nombre de clase. Dentro definimos las reglas de estilo como hemos venido trabajando normalmente. El nombre de la clase no puede comenzar con un nmero. Luego, para indicar que una marca sea afectada por esta regla:
<h1 class="resaltado">Titulo de nivel 1</h1>

Es decir, agregamos la propiedad class y le asignamos el nombre de la clase (sin el punto). Podemos inicializar tantas marcas HTML con esta regla como necesitemos:
<p> Este parrafo muestra el resultado de aplicar la clase .resaltado en la ltima <span class="resaltado">palabra.</span> </p>

Aca definimos la propiedad class a la marca span y le asignamos la misma clase aplicada anteriormente a la marca h1.

Ejemplo: Definir la clase:

.resaltado{ color:#000000; background-color:#ffff00; font-style:italic; }

Aplicar esta regla a las marcas h1 y span. pagina1.html

<html> <head> <title>Problema</title> <link rel="StyleSheet" href="estilos.css" type="text/css"> </head> <body> <h1 class="resaltado">Titulo de nivel 1</h1> <p> Este parrafo muestra el resultado de aplicar la clase .resaltado en la ltima <span class="resaltado">palabra.</span> </p> </body> </html>

estilos.css
body { background-color:#eeeeee; } .resaltado{ color:#000000; background-color:#ffff00; font-style:italic; }

Practica 1: Definir en la hoja de estilo estas dos clases:

.subrayado { color:#00aa00; text-decoration:underline; } .tachado { color:#00aa00; text-decoration:line-through;

Pgina 123

Luego, en la pgina html, definir un ttulo con nivel h1 (subrayar todo el ttulo). Luego un prrafo que tenga algunas palabras subrayadas y otras tachadas (utilizar la marca span para asignar estilos a una palabra).

Practica 2: Definir estas dos reglas en la hoja de estilo externa. Luego crear una
pgina HTML que contenga 3 preguntas y 3 respuestas. A cada pregunta y respuesta disponerla en un prrafo distinto. Asignar los estilos .pregunta y .respuesta
.pregunta { font-family:verdana; font-size:14px; font-style:italic; color:#0000aa; } .respuesta { font-family:verdana; font-size:12px; font-style:normal; text-align:justify; color:#555555; }

13. Definicin de estilos por medio de Id.

La diferencia fundamental en la definicin de un estilo por medio de Id con respecto a las clases, es que slo podremos aplicar dicho estilo a una sola marca dentro de la pgina HTML. La sintaxis para definir un estilo por medio de Id es:
#cabecera { font-family:Times New Roman; font-size:30px; text-align:center; color:#0000ff; background-color:#bbbbbb; }

Es decir, utilizamos el caracter numeral (#) para indicar que se trata de un estilo de tipo Id. Luego, slo una marca HTML dentro de una pgina puede definir un estilo de este tipo:
<div id="cabecera">

Hay que tener en cuenta que slo una marca puede definir la propiedad id con el valor de cabecera. Los dos archivos completos del ejemplo entonces quedan (pagina1.html):
<html> <head> <title>Problema</title> <link rel="StyleSheet" href="estilos.css" type="text/css"> </head> <body> <div id="cabecera"> <h1>Ttulo de la cabecera</h1> </div> </body> </html>

Y el archivo de estilos (estilos.css) es:

#cabecera {

Pgina 124

font-family:Times New Roman; font-size:30px; text-align:center; color:#0000ff; background-color:#bbbbbb; }

Ejemplo: Crear un estilo por medio de un Id, luego crear una pgina con un bloque
div, definir la propiedad id con el nombre del estilo creado. pagina1.html
<html> <head> <title>Problema</title> <link rel="StyleSheet" href="estilos.css" type="text/css"> </head> <body> <div id="cabecera"> <h1>Ttulo de la cabecera</h1> </div> </body> </html>

estilos.css
#cabecera { font-family:Times New Roman; font-size:30px; text-align:center; color:#0000ff; background-color:#bbbbbb; }

Practica: Definir tres estilos de tipo Id (cabecera, cuerpo y pie), luego definir en el
archivo HTML tres areas (div) inicializando el atributo Id con los nombres de estilo creados.

14. Propiedades relacionadas al borde de una marca HTML.

Debemos ahora hacernos la idea que todo elemento que se crea dentro de una pgina HTML genera una caja. Imaginemos los controles que hemos creado h1,h2,h3,p,em, etc.; si fijamos la propiedad background-color veremos que el contenido se encuentra dentro de un rectngulo. Podemos acceder a las propiedades del borde de ese rectngulo mediante las CSS; las propiedades ms importantes a las que tenemos acceso son:
border-width border-style border-color

Veamos un ejemplo que inicialice estas propiedades: pagina1.html

<html> <head> <title>Problema</title> <link rel="StyleSheet" href="estilos.css" type="text/css"> </head> <body> <p class="pregunta">Quin descubri Amrica

Pgina 125

y en que ao fue?</p> <p class="respuesta">Coln en 1492</p> </body> </html>

estilos.css
.pregunta { background-color:#ffff00; border-width:1px; border-style:solid; border-color:#000000; } .respuesta { border-width:1px; border-style:dashed; border-color:#000000; }

Como podemos ver, hemos definido dos clases .pregunta que inicializa el color de fondo en amarillo y luego define el ancho del borde en un pixel, el estilo es slido y el color de la lnea de borde es negro. Luego recordar que para indicar que una marca tenga este estilo debemos inicializar la propiedad class de la marca HTML:
<p class="pregunta">Quin descubri Amrica y en que ao fue?</p>

Al segundo estilo definido lo hemos hecho con la clase .respuesta

.respuesta { border-width:1px; border-style:dashed; border-color:#000000; } En sta hemos cambiado el estilo de borde. Disponemos de los siguientes estilos de borde: none hidden dotted dashed solid double groove ridge inset outset

Ejemplo:

Definir dos prrafos que representen una pregunta y una respuesta. Inicializar estilos para el borde. pagina1.html
<html> <head> <title>Problema</title> <link rel="StyleSheet" href="estilos.css" type="text/css"> </head> <body> <p class="pregunta">Quin descubri Amrica y en que ao fue?</p> <p class="respuesta">Coln en 1492</p> </body> </html>

estilos.css
.pregunta { background-color:#ffff00; border-width:1px;

Pgina 126

border-style:solid; border-color:#000000; } .respuesta { border-width:1px; border-style:dashed; border-color:#000000; }

Practica:

Inicializar las marcas h1,h2 y h3 con bordes de 2 pixeles, color azul y diferentes estilos para cada una. Crear una pgina HTML que los utilice. Ej:
h1 { border-width:2px; border-style:solid; border-color:#0000ff; }

15. Ms propiedades relacionadas al borde de una marca HTML

Como vimos en el concepto anterior tenemos propiedades que nos permiten fijar el grosor, estilo y color del borde de una marca HTML. Pero podemos ir un paso ms alla, las CSS nos permiten modificar independientemente cada uno de los cuatro bordes del rectngulo. Contamos con las siguientes propiedades:
border-top-width border-right-width border-bottom-width border-left-width border-top-style border-right-style border-bottom-style border-left-style border-top-color border-right-color border-bottom-color border-left-color

Un ejemplo inicializando estas propiedades:

<html> <head> <title>Problema</title> <link rel="StyleSheet" href="estilos.css" type="text/css"> </head> <body> <h1 class="titulopagina">El blog del pensador</h1> </body> </html>

y el archivo de estilos:
.titulopagina { background-color:#ffffcc; text-align:center; font-family:verdana; font-size:40px;

Pgina 127

border-top-width:1px; border-right-width:3px; border-bottom-width:3px; border-left-width:1px; border-top-style:dotted; border-right-style:solid; border-bottom-style:solid; border-left-style:dotted; border-top-color:#ffaa00; border-right-color:#ff0000; border-bottom-color:#ff0000; border-left-color:#ffaa00; }

Es decir, esta metodologa de inicializar el borde de un control HTML, tiene utilidad si los mismos varan en grosor, estilo o color. Veremos ms adelante que hay otras formas de inicializar los bordes de las marcas que reducen el texto a tipear, pero no son las ms adecuadas cuando uno est comenzando a estudiar CSS.

Ejemplo:

Crear una clase .titulopagina que inicialice independientemente el grosor, estilo y color de la propiedad del borde. pagina1.html
<html> <head> <title>Problema</title> <link rel="StyleSheet" href="estilos.css" type="text/css"> </head> <body> <h1 class="titulopagina">El blog del pensador</h1> </body> </html>

estilos.css
.titulopagina { background-color:#ffffcc; text-align:center; font-family:verdana; font-size:40px; border-top-width:1px; border-right-width:3px; border-bottom-width:3px; border-left-width:1px; border-top-style:dotted; border-right-style:solid; border-bottom-style:solid; border-left-style:dotted; border-top-color:#ffaa00; border-right-color:#ff0000; border-bottom-color:#ff0000; border-left-color:#ffaa00; }

Practica:

Crear una clase .titulosecundario que inicialice el borde superior e inferior con ancho de 2 pixeles y los bordes laterales con cero pixel. A su eleccin queda el estilo y color.

Pgina 128

16. Propiedades relacionadas al padding de una marca HTML.

El padding (almohadilla) suma espacio entre el contenido de la marca HTML y el borde (recordar propiedad border) Podemos configurar los 4 en caso que tengan el mismo valor accediendo a la propiedad:
padding

o podemos configurar en forma independiente cada lado:

padding-top padding-right padding-bottom padding-left

Veamos un ejemplo, la pagina1.html:

<html> <head> <title>Problema</title> <link rel="StyleSheet" href="estilos.css" type="text/css"> </head> <body> <pre class="codigofuente"> public class Rectangulo{ //atributos int alto; int ancho; boolean relleno; //mtodos public int devolverArea(){ return alto*ancho; } public void rellenar(boolean r){ relleno=r; } public void cambiarTamano(int an, int al){ ancho=an; alto=al; } public Rectangulo() {// constructor alto=20; ancho=10; relleno=false; } }//fin clase Rectangulo </pre> </body> </html>

El archivo estilos.css es:

.codigofuente { font-family:Courier; font-size:12px; background-color:#ffffcc; border-width:1px; border-style:dotted; border-color:#ffaa00; padding:20px; }

Pgina 129

Con la marca HTML pre, se respetan los espacios y retornos de carro que hayamos puesto en el texto fuente. Este estilo de texto es muy adecuado cuando queremos mostrar el cdigo fuente de un programa.

Ejemplo: Mostrar con

a marca pre de HTML un pequeo programa de Java. Hacer que el mismo aparezca en un rectangulo amarillo, con borde y una separacin entre el borde y el contendio de 20 pixeles. pagina1.html
<html> <head> <title>Problema</title> <link rel="StyleSheet" href="estilos.css" type="text/css"> </head> <body> <pre class="codigofuente"> public class Rectangulo{ //atributos int alto; int ancho; boolean relleno; //mtodos public int devolverArea(){ return alto*ancho; } public void rellenar(boolean r){ relleno=r; } public void cambiarTamano(int an, int al){ ancho=an; alto=al; } public Rectangulo() {// constructor alto=20; ancho=10; relleno=false; } }//fin clase Rectangulo </pre> </body> </html>

estilos.css
.codigofuente { font-family:Courier; font-size:12px; background-color:#ffffcc; border-width:1px; border-style:dotted; border-color:#ffaa00; padding:20px; }

Practica: Definir una clase titulo que fije los padding de izquierda y derecha con 20
pixeles y el superior e inferior en 10. Escribir un texto dentro de la marca h1.

17. Propiedades relacionadas al margen de una marca HTML.

Pgina 130

Otra serie de propiedades relacionadas al contorno de una marca HTML son:

margin margin-top margin-right margin-bottom margin-left

El margen est despus del borde. Veamos un ejemplo, la pgina HTML muestra dos prrafos con cero pixeles de margen:
<html> <head> <title>Problema</title> <link rel="StyleSheet" href="estilos.css" type="text/css"> </head> <body> <p>Primer prrafo</p> <p>Segundo prrafo</p> </body> </html>

La hoja de estilo:
p { background-color:#ffffaa; margin:0px; }

Pruebe modificar el valor para la propiedad margin y vea el resultado de la pgina. El modelo final de caja se puede resumir con esta imagen:

Ejemplo: Mostrar dos prrafos con un margen de cero pixel.

pagina1.html
<html> <head> <title>Problema</title> <link rel="StyleSheet" href="estilos.css" type="text/css"> </head> <body> <p>Primer prrafo</p> <p>Segundo prrafo</p> </body> </html>

estilos.css
p { background-color:#ffffaa; margin:0px;

Pgina 131

Practica: Disponer ttulos de primer y segundo nivel con un margen de 5 pixeles.

18. Propiedades relacionadas a listas.

Las listas se utilizan para enumerar una serie de elementos, se utiliza la marca HTML ul (Unordered List), y cada item de la lista con la marca HTML li (List Item). Las CSS nos permiten configurar las listas por medio de tres propiedades:
list-style-type list-style-position list-style-image

A list-style-type puede asignrsele alguno de estos valores:

none disc circle square decimal decimal-leading-zero lower-roman upper-roman lower-alpha upper-alpha

Los valores de list-style-position:

inside outside

Los valores de list-style-image:

none url

Veamos un ejemplo que prueba todos los valores posibles que puede tomar la propiedad list-style-type:
<html> <head> <title>Problema</title> <link rel="StyleSheet" href="estilos.css" type="text/css"> </head> <body> <ul class="vacio"> <li>Brasil</li> <li>Uruguay</li> <li>Argentina</li> </ul> <ul class="circulorelleno"> <li>Brasil</li> <li>Uruguay</li> <li>Argentina</li> </ul> <ul class="circulovacio"> <li>Brasil</li> <li>Uruguay</li> <li>Argentina</li> </ul> <ul class="cuadrado"> <li>Brasil</li> <li>Uruguay</li> <li>Argentina</li> </ul> <ul class="decimal">

Pgina 132

<li>Brasil</li> <li>Uruguay</li> <li>Argentina</li> </ul> <ul class="romanominuscula"> <li>Brasil</li> <li>Uruguay</li> <li>Argentina</li> </ul> <ul class="romanomayuscula"> <li>Brasil</li> <li>Uruguay</li> <li>Argentina</li> </ul> <ul class="letrasminusculas"> <li>Brasil</li> <li>Uruguay</li> <li>Argentina</li> </ul> <ul class="letrasmayusculas"> <li>Brasil</li> <li>Uruguay</li> <li>Argentina</li> </ul> </body> </html>

Luego la hoja de estilo es:

ul.vacio{ list-style-type:none; } ul.circulorelleno{ list-style-type:disc; } ul.decimal{ list-style-type:decimal; } ul.romanominuscula{ list-style-type:lower-roman; } ul.romanomayuscula{ list-style-type:upper-roman; } ul.circulovacio{ list-style-type:circle; } ul.cuadrado{ list-style-type:square; } ul.letrasminusculas{ list-style-type:lower-alpha; } ul.letrasmayusculas{ list-style-type:upper-alpha; }

Lo que podemos ver es que cuando definimos las clases, le antecedemos al punto, el nombre de la marca donde se aplica dicha clase (en este caso ul, es decir que esta clase slo tiene sentido aplicarla a dicha marca).

Ejemplo: Probar todos los valores posibles que puede tomar la propiedad list-styletype. pagina1.html
<html>

Pgina 133

<head> <title>Problema</title> <link rel="StyleSheet" href="estilos.css" type="text/css"> </head> <body> <ul class="vacio"> <li>Brasil</li> <li>Uruguay</li> <li>Argentina</li> </ul> <ul class="circulorelleno"> <li>Brasil</li> <li>Uruguay</li> <li>Argentina</li> </ul> <ul class="circulovacio"> <li>Brasil</li> <li>Uruguay</li> <li>Argentina</li> </ul> <ul class="cuadrado"> <li>Brasil</li> <li>Uruguay</li> <li>Argentina</li> </ul> <ul class="decimal"> <li>Brasil</li> <li>Uruguay</li> <li>Argentina</li> </ul> <ul class="romanominuscula"> <li>Brasil</li> <li>Uruguay</li> <li>Argentina</li> </ul> <ul class="romanomayuscula"> <li>Brasil</li> <li>Uruguay</li> <li>Argentina</li> </ul> <ul class="letrasminusculas"> <li>Brasil</li> <li>Uruguay</li> <li>Argentina</li> </ul> <ul class="letrasmayusculas"> <li>Brasil</li> <li>Uruguay</li> <li>Argentina</li> </ul> </body> </html>

estilos.css
ul.vacio{ list-style-type:none; } ul.circulorelleno{ list-style-type:disc; } ul.decimal{ list-style-type:decimal; } ul.romanominuscula{ list-style-type:lower-roman;

Pgina 134

} ul.romanomayuscula{ list-style-type:upper-roman; } ul.circulovacio{ list-style-type:circle; } ul.cuadrado{ list-style-type:square; } ul.letrasminusculas{ list-style-type:lower-alpha; } ul.letrasmayusculas{ list-style-type:upper-alpha; }

Practica: Confeccionar una lista con los nombres de pases que jugaron el mundial
de Alemania 2006 (mostrar slo los cuatro primeros puestos, junto con la posicin que obtuvieron).

19. Propiedades relacionadas al fondo (background)

Hasta ahora hemos probado y utilizado la propiedad background-color para fijar el color de fondo del contenido de una marca HTML (body, h1, h2, p, etc.). Hay otras propiedades relacionadas al fondo que nos permiten, entre otras cosas, disponer un archivo de imagen. Las propiedades relacionadas al background y sus valores son:
background-color background-image background-repeat background-position background-attachment

Veamos un ejemplo de disponer una imagen sobre el fondo de la pgina:

<html> <head> <title>Problema</title> <link rel="StyleSheet" href="estilos.css" type="text/css"> </head> <body> </body> </html>

La hoja de estilo queda:

body { background-image:url(../fondo.jpg); }

La nica propiedad que hemos inicializado es background-image indicando el nombre del archivo de imagen a mostrar. Como se encuentra en la carpeta inmediatamente superior debemos indicar con ../ La imagen se repite en x e y hasta llenar la pgina por completo, ya que por defecto background-repeat est inicializada con el valor repeat, probar de modificar el estilo primero con:
body { background-image:url(../fondo.jpg); background-repeat:repeat-x; }

Luego con:
body {

Pgina 135

background-image:url(../fondo.jpg); background-repeat:repeat-y; }

Y por ltimo:
body { background-image:url(../fondo.jpg); background-repeat:no-repeat; }

Tener en cuenta que podemos aplicar una imagen a otras marcas HTML (h1, h2, h3, p, etc.). La ltima propiedad background-position podemos indicar la posicin de la imagen segn los siguientes valores:
top left top center top right center left center center center right bottom left bottom center bottom right x-% y-% x-pos y-pos

Para que tenga sentido esta propiedad debemos inicializar la propiedad backgroundrepeat con el valor no-repeat. Por ejemplo:
body { background-image:url(../fondo.jpg); background-repeat:no-repeat; background-position:20% 50%; }

Dispone la imagen 20% avanzando desde la izquierda y 50% avanzando desde arriba. La siguiente regla:
body { background-image:url(../fondo.jpg); background-repeat:no-repeat; background-position:400px 10px; }

Dispone la imagen 400 pixeles desde la derecha y 10 pxeles desde arriba. La regla:
body { background-image:url(../fondo.jpg); background-repeat:no-repeat; background-position:top right; }

Dispone la imagen en la parte superior a la derecha.

Ejemplo: La imagen se repite en x e y hasta llenar la pgina por completo, ya que

por defecto background-repeat est inicializada con el valor repeat, probar de modificar el estilo primero con:
body { background-image:url(../fondo.jpg); background-repeat:repeat-x; } Luego con: body {

Pgina 136

background-image:url(../fondo.jpg); background-repeat:repeat-y; }

Y por ltimo:
body { background-image:url(../fondo.jpg); background-repeat:no-repeat; }

pagina1.html
<html> <head> <title>Problema</title> <link rel="StyleSheet" href="estilos.css" type="text/css"> </head> <body> </body> </html>

estilos.css
body { background-image:url(../fondo.jpg); }

Practica: Definir la imagen fondo.jpg como fondo de la pgina, luego inicializar y

probar la propiedad background-attachment con los dos valores posibles (scroll/fixed).
body { background-image:url(../fondo.jpg); background-repeat:no-repeat; background-attachment:scroll;/*luego probar con fixed*/ }

Para probar el efecto que produce esta propiedad debe ingresar en el body de la pgina un texto muy grande que llene toda la pgina y permita hacer scroll (de no hacer esto no ver la diferencia entre un valor y otro del background-attachemnt).

20. Propiedades relacionadas a fuentes (FORMATO RESUMIDO)

Vimos anteriormente una serie de propiedades relacionadas a la fuente:
font-family font-size font-style font-weight font-variant

En situaciones donde necesitemos inicializar varias de estas propiedades CSS nos permite utilizar una propiedad que engloba a todas estas:
font

Podemos indicar en cualquier orden font-weight, font-style, font-variant y luego los valores obligatorios font-size y font-family en ese orden. Como ejemplo tenemos:
<html> <head> <title>Problema</title> <link rel="StyleSheet" href="estilos.css" type="text/css"> </head> <body>

Pgina 137

<p>Hola Mundo</p> </body> </html>

Luego el archivo de estilos:

p { font:bold italic 25px verdana; }

Es importante recordar que font-size y font-family deben ser los ltimos valores inicializados y en ese orden. No debemos separar por coma.

Ejemplo: Definir la propiedad font para la marca p utilizando el formato reducido

de inicializacin. pagina1.html
<html> <head> <title>Problema</title> <link rel="StyleSheet" href="estilos.css" type="text/css"> </head> <body> <p>Hola Mundo</p> </body> </html>

estilos.css
p { font:bold italic 25px verdana; }

Practica: Definir formatos reducidos para la propiedad font de las marcas h1,h2 y
h3. Luego probar con tres ttulos los resultados obtenidos.

21. Propiedades relacionadas al border (FORMATO RESUMIDO)

Podemos inicializar todos los bordes con una sola propiedad:
border

Debemos indicar el border-width border-style border-color No debemos separarlas por coma. Por otro lado podemos inicializar cada borde con:
border-top border-right border-bottom border-left

Debemos indicar el border-(top/right/bottom/left)-width border-style border-color Un ejemplo nos permitir ver esta otra forma de inicializar los bordes de una marca HTML:
<html> <head> <title>Problema</title> <link rel="StyleSheet" href="estilos.css" type="text/css"> </head> <body> <h1 class="tituloprincipal">Propiedad border</h1> <p class="comentarios">Debemos indicar el border-width border-style border-color</p>

Pgina 138

</body> </html>

Y la hoja de estilo definida para esta pgina es:

h1.tituloprincipal{ border:5px solid #ff0000; } p.comentarios{ border-top:1px solid #ffff00; border-right:1px none #ffff00; border-bottom:1px solid #ffff00; border-left:1px none #ffff00; }

Tener en cuenta que cuando le antecedemos el nombre de la marca HTML al nombre de la clase: h1.tituloprincipal estamos indicando que dicha clase slo se puede aplicar a dichas marcas. De todos modos, si le sacamos el nombre de la marca HTML funciona igual.

Ejemplo:
pagina1.html

Veamos las siguientes paginas:

<html> <head> <title>Problema</title> <link rel="StyleSheet" href="estilos.css" type="text/css"> </head> <body> <h1 class="tituloprincipal">Propiedad border</h1> <p class="comentarios">Debemos indicar el border-width border-style bordercolor</p> </body> </html>

estilos.css
h1.tituloprincipal{ border:5px solid #ff0000; } p.comentarios{ border-top:1px solid #0000ff; border-right:1px none #0000ff; border-bottom:1px solid #0000ff; border-left:1px none #0000ff; }

Practica:

Confeccionar una pgina que disponga una lnea en la parte inferior y superior de los ttulos de nivel 1,2 y 3. Inicializar las propiedades border-top y borderbottom para dicho cometido.

22. Propiedades relacionadas al padding (FORMATO RESUMIDO)

Podemos inicializar el padding de una marca HTML en forma resumida con:
padding:padding-top padding-right padding-bottom padding-left

si indicamos un nico valor se aplica a los cuatro lados:

padding: 1px

si indicamos dos valores, el primero se aplica a la parte superior e inferior y el segundo valor a los lados izquierdo y derecho.

Pgina 139

Veamos un ejemplo:
<html> <head> <title>Problema</title> <link rel="StyleSheet" href="estilos.css" type="text/css"> </head> <body> <p class="comentarios">Esto es una prueba para ver el funcionamiento de la propiedad padding. Esto es una prueba para ver el funcionamiento de la propiedad padding. Esto es una prueba para ver el funcionamiento de la propiedad padding. Esto es una prueba para ver el funcionamiento de la propiedad padding. Esto es una prueba para ver el funcionamiento de la propiedad padding. Esto es una prueba para ver el funcionamiento de la propiedad padding. Esto es una prueba para ver el funcionamiento de la propiedad padding. </p> </body> </html>

Luego el archivo CSS:

p.comentarios { background-color:#dddddd; padding:5px 30px; }

Con este ejemplo, el prrafo tiene 5 pxeles de separacin con el borde en la parte inferior y superior, y a la izquierda y derecha tiene 30 pxeles.

Ejemplo:
pagina1.html
<html> <head> <title>Problema</title> <link rel="StyleSheet" href="estilos.css" type="text/css"> </head> <body> <p class="comentarios">Esto es una prueba para ver el funcionamiento de la propiedad padding. Esto es una prueba para ver el funcionamiento de la propiedad padding. Esto es una prueba para ver el funcionamiento de la propiedad padding. Esto es una prueba para ver el funcionamiento de la propiedad padding. Esto es una prueba para ver el funcionamiento de la propiedad padding. Esto es una prueba para ver el funcionamiento de la propiedad padding. Esto es una prueba para ver el funcionamiento de la propiedad padding. </p> </body> </html>

estilos.css
p.comentarios { background-color:#dddddd; padding:5px 30px; }

Practica:

Definir tres clases distintas con formatos diferentes para expresar el padding. Aplicar las clases a tres prrafos.

23. Propiedades relacionadas al margin (FORMATO RESUMIDO)

Pgina 140

El funcionamiento y sintaxis es similar al visto para el padding:

margin margin-top margin-right margin-bottom margin-left

si indicamos un nico valor se aplica a los cuatro lados: margin: 1px si indicamos dos valores, el primero se aplica a la parte superior e inferior y el segundo valor a los lados izquierdo y derecho. Un ejemplo para ver la sintaxis:
<html> <head> <title>Problema</title> <link rel="StyleSheet" href="estilos.css" type="text/css"> </head> <body> <h1>Titulo Principal</h1> </body> </html>

Y la hoja de estilo:
h1 { margin:70px 20px; }

Ejemplo:
Esta regla de estilo inicializa los mrgenes de la marca h1. pagina1.html
<html> <head> <title>Problema</title> <link rel="StyleSheet" href="estilos.css" type="text/css"> </head> <body> <h1>Titulo Principal</h1> </body> </html>

estilos.css
h1 { margin:70px 20px; }

Practica: Confeccionar una pgina con ttulos de nivel h1,h2 y h3. Definir distintos
mrgenes del lado izquierdo. Tener en cuenta que podemos definir el mismo nombre de clase si se aplica a marcas HTML distintas:
h1.margenizquierdo { margin:0px 0px 0px 50px; } h2.margenizquierdo { margin:0px 0px 0px 70px; }

24. Propiedades relacionadas al fondo (background)(FORMATO RESUMIDO)

La propiedad background resume las propiedades vistas anteriormente:
background background-color background-image background-repeat backgroundattachment

Pgina 141

background-position

Un ejemplo que inicializa esta propiedad con algunos valores en forma simultnea:
<html> <head> <title>Problema</title> <link rel="StyleSheet" href="estilos.css" type="text/css"> </head> <body> </body> </html>

La hoja de estilo es:

body { background: #ffffee url('../fondo.jpg') repeat-x; }

No es obligatorio inicializar todos los valores.

Ejemplo: Inicializar la propiedad background con formato resumido.

pagina1.html
<html> <head> <title>Problema</title> <link rel="StyleSheet" href="estilos.css" type="text/css"> </head> <body> </body> </html>

estilos.css
body { background: #ffffee url('../fondo.jpg') repeat-x; }

Practica: Confeccionar una pgina que inicialice el fondo de la marca h1 con una
imagen.

25. El selector universal *

Si queremos inicializar las propiedades de todas las marcas HTML podemos utilizar el selector universal. Veamos un ejemplo:
<html> <head> <title>Problema</title> <link rel="StyleSheet" href="estilos.css" type="text/css"> </head> <body> <h1>Ttulo de nivel 1</h1> <h2>Ttulo de nivel 2</h2> <p>Esto esta dentro de un prrafo</p> </body> </html>

Luego en la hoja de estilo definimos:

* { color:#0000aa; margin:0px; padding:0px; }

Pgina 142

Esto significa que todas las marcas se imprimen de color verde con cero pixel de margin y padding, salvo que otra regla lo cambie, Imaginemos si definimos h1 { color:#ff0000} significa que tiene prioridad esta regla. En realidad, en forma tcita lo hemos estado utilizando, cuando definimos una clase sin indicar el tipo de marca HTML donde actuar:
.pregunta { background-color:#ffff00; border-width:1px; border-style:solid; border-color:#000000; }

Podemos expresar la regla anterior perfectamente como:

*.pregunta { background-color:#ffff00; border-width:1px; border-style:solid; border-color:#000000; }

Es decir que podemos asignar esta regla a cualquier marca HTML. Esto nos permite comprender, cuando definimos una regla que slo se puede utilizar en un slo tipo de marcas:
p.pregunta { background-color:#ffff00; border-width:1px; border-style:solid; border-color:#000000; }

Esta regla slo se puede utilizar en las marcas de prrafo.

Ejemplo: Definir la siguiente regla de estilo:

* { color:#0000aa; margin:0px; padding:0px; }

Es comn inicializar las propiedades margin y padding con cero y luego asignar estos valores para todas las marcas que lo requieran, esto debido a que cada navegador define mrgenes distintos. pagina1.html
<html> <head> <title>Problema</title> <link rel="StyleSheet" href="estilos.css" type="text/css"> </head> <body> <h1>Ttulo de nivel 1</h1> <h2>Ttulo de nivel 2</h2> <p>Esto esta dentro de un prrafo</p> </body> </html>

estilos.css
* { color:#0000aa; margin:0px; padding:0px; }

Pgina 143

Practica: Defina cuatro propiedades para el selector universal y luego implemente

una pgina HTML que pruebe su funcionamiento.

26. Pseudoclases
Las pseudoclases son unas clases especiales, que se refieren a algunos estados especiales del elemento HTML, las que se utilizan fundamentalmente son las que se aplican a la marca <a> (ancla). La sintaxis vara con respecto al concepto de clase visto anteriormente:
a:pseudoclase { propiedad: valor; }

Es decir separamos el nombre de la marca HTML con dos puntos. Para la marca HTML <a> tenemos 4 pseudoclases fundamentales:
link - Enlace sin ingresar visited - Enlace presionado hover - Enlace que tiene la flecha del mouse encima active - Es la que tiene foco en ese momento (pruebe de tocar la tecla tab)

Es importante hacer notar que el orden en que definimos las pseudoclases es fundamental para su funcionamiento (debe respetarse el orden: link-visited-hoveractive) Este ejemplo es muy sencillo para ver el paso en los distintos estados que puede tener un enlace:
<html> <head> <title>Problema</title> <link rel="StyleSheet" href="estilos.css" type="text/css"> </head> <body> <a href="http://www.google.com">Google</a> <a href="http://www.yahoo.com">Yahoo</a> <a href="http://www.msn.com">Msn</a> </body> </html>

La hoja de estilo es:

a:link{ background-color:#00ff00; color:#ff0000; } a:visited{ background-color:#000000; color:#ffffff; } a:hover{ background-color:#ff00ff; color:#fffff; } a:active{ background-color:#ff0000; color:#ffff00; }

Apenas ejecute la pgina los tres enlaces deben aparecer de color rojo con fondo verde:
a:link{ background-color:#00ff00;

Pgina 144

color:#ff0000; }

Si presionamos la tecla tab podremos ver que el enlace que tiene foco aparece de color amarillo con fondo rojo:
a:active{ background-color:#ff0000; color:#ffff00; }

Si pasamos la flecha del mouse sobre algn enlace veremos que aparece de color blanco con fondo lila:
a:hover{ background-color:#ff00ff; color:#fffff; }

Por ltimo todos los enlaces que hayamos hecho click debern aparecer de color blanco con fondo negro:
a:visited{ background-color:#000000; color:#ffffff; }

Ejemplo:

Mostrar una serie de enlaces con distintos colores segn si el link est visitado, no visitado, el mouse est sobre el link o el link tiene foco. pagina1.html
<html> <head> <title>Problema</title> <link rel="StyleSheet" href="estilos.css" type="text/css"> </head> <body> <a href="http://www.google.com">Google</a> <a href="http://www.yahoo.com">Yahoo</a> <a href="http://www.msn.com">Msn</a> </body> </html>

estilos.css
a:link{ background-color:#00ff00; color:#ff0000; } a:visited{ background-color:#000000; color:#ffffff; } a:hover{ background-color:#ff00ff; color:#fffff; } a:active{ background-color:#ff0000; color:#ffff00; }

Practica: Definir la propiedad font-size con un valor distinto cuando la flecha del
mouse est sobre el link.

Pgina 145

27. Eliminar el subrayado a un enlace por medio de las pseudoclases

Otra actividad comn en algunos sitios es eliminar el subrayado a los enlaces. A esto lo podemos hacer configurando una propiedad de las pseudoclases. La solucin de este problema es:
<html> <head> <title>Problema</title> <link rel="StyleSheet" href="estilos.css" type="text/css"> </head> <body> <a href="http://www.google.com">Google</a> <a href="http://www.yahoo.com">Yahoo</a> <a href="http://www.msn.com">Msn</a> </body> </html>

La hoja de estilo es:

a:link { text-decoration: none; } a:visited { text-decoration: none; } Es decir, configuramos la propiedad text-decoration con el valor none, por defecto est configurada con el valor underline. Tener en cuenta que podemos agrupar la regla de esta forma: a:link, a:visited { text-decoration: none; }

Ejemplo: Eliminar el subrayado de los enlaces.

pagina1.html
<html> <head> <title>Problema</title> <link rel="StyleSheet" href="estilos.css" type="text/css"> </head> <body> <a href="http://www.google.com">Google</a> <a href="http://www.yahoo.com">Yahoo</a> <a href="http://www.msn.com">Msn</a> </body> </html>

estilos.css
a:link { text-decoration: none; } a:visited { text-decoration: none; }

Practica: Configurar los enlaces que aparezcan con una lnea tachada en lugar de
subrayado.

Pgina 146

28. Creacin de un men vertical configurando las pseudoclases.

Un recurso muy til es disponer un men en una pgina, si no requerimos uno muy elaborado podemos resolverlo utilizando slo CSS y HTML (en otros casos se requiere adems de JavaScript). Vamos a implementar uno muy sencillo que requiere agrupar en un div una serie de prrafos que contienen un hipervnculo cada uno. Cuando la flecha del mouse se encuentra sobre el hipervnculo cambiamos el color del fondo y la letra del hipervnculo. El problema resuelto es:
<html> <head> <title>Problema</title> <link rel="StyleSheet" href="estilos.css" type="text/css"> </head> <body> <div id="menu"> <p><a href="http://www.google.com">Google</a></p> <p><a href="http://www.yahoo.com">Yahoo</a></p> <p><a href="http://www.msn.com">Msn</a></p> <p><a href="http://www.altavista.com">Altavista</a></p> </div> </body> </html>

La hoja de estilo asociada a esta pgina es:

#menu { font-family: Arial; } #menu p { margin:0px; padding:0px; } #menu a { display: block; padding: 3px; width: 160px; background-color: #f7f8e8; border-bottom: 1px solid #eeeeee; text-align:center; } #menu a:link, #menu a:visited { color: #ff0000; text-decoration: none; } #menu a:hover { background-color: #336699; color: #ffffff; }

Podemos decir que definimos un estilo por medio de un Id llamado menu. Definimos una regla para este Id:
#menu { font-family: Arial;

Pgina 147

La segunda regla:
#menu p { margin:0px; padding:0px; }

Estamos indicando que todos los prrafos contenidos en el estilo #menu deben tener cero en margin y padding. Luego las anclas definidas dentro del estilo #menu definen las siguientes caractersticas:
#menu a { display: block; padding: 3px; width: 160px; background-color: #f7f8e8; border-bottom: 1px solid #eeeeee; text-align:center; }

El valor block para la propiedad display permite que el ancla ocupe todo el espacio del prrafo, indistintamente del largo del hipervnculo. Otra propiedad nueva es width, esta fija el tamao mximo que puede tener el hipervnculo antes de provocar un salto de lnea. Por ltimo inicializamos las pseudoclases:
#menu a:link, #menu a:visited { color: #ff0000; text-decoration: none; } #menu a:hover { background-color: #336699; color: #ffffff; }

Estamos definiendo el mismo color de texto para los vnculos seleccionados como aquellos que no han sido seleccionados:
#menu a:link, #menu a:visited { color: #ff0000;

Por ltimo cambiamos el color de fondo de la opcin que tiene la flecha del mouse encima:
#menu a:hover { background-color: #336699;

Ejemplo: Hacer un men de hipervnculos que se muestren el forma vertical.

pagina1.html
<html> <head> <title>Problema</title> <link rel="StyleSheet" href="estilos.css" type="text/css"> </head> <body> <div id="menu"> <p><a href="http://www.google.com">Google</a></p> <p><a href="http://www.yahoo.com">Yahoo</a></p> <p><a href="http://www.msn.com">Msn</a></p> <p><a href="http://www.altavista.com">Altavista</a></p> </div> </body>

Pgina 148

</html>

estilos.css
#menu { font-family: Arial; } #menu p { margin:0px; padding:0px; } #menu a { display: block; padding: 3px; width: 160px; background-color: #f7f8e8; border-bottom: 1px solid #eeeeee; text-align:center; } #menu a:link, #menu a:visited { color: #ff0000; text-decoration: none; } #menu a:hover { background-color: #336699; color: #ffffff; }

Practica:

Modificar la hoja de estilo del men desarrollado anteriormente para que cada opcin aparezca una lnea de color negro que la recuadre.

29. Creacin de un men horizontal con una lista.

Otro estilo de men muy comn es donde las opciones se encuentran una al lado de otra. Veamos el cdigo para la implementacin de un men horizontal:
<html> <head> <title>Problema</title> <link rel="StyleSheet" href="estilos.css" type="text/css"> </head> <body> <ul id="menuhorizontal"> <li><a href="http://www.google.com">Google</a></li> <li><a href="http://www.yahoo.com">Yahoo</a></li> <li><a href="http://www.msn.com">Msn</a></li> <li><a href="http://www.altavista.com">Altavista</a></li> </ul> </body> </html>

El archivo de estilos es:

#menuhorizontal { float:left; width:100%; padding:0px; margin:0px;

Pgina 149

list-style-type:none; } #menuhorizontal a { float:left; width:100px; text-decoration:none; text-align:center; color:#ff0000; background-color:#f7f8e8; padding:3px 5px; border-right:1px solid white; } #menuhorizontal a:hover { background-color:#336699; } #menuhorizontal li { display:inline; }

Como queremos que se localice a la izquierda inicializamos la propiedad float con el valor left, tanto para el id menuhorizontal como para la marca a que se encuentra en el id menuhorizontal. Fijamos la propiedad width del id menuhorizontal con el valor de 100% para que ocupe toda la lnea. El ancho de cada opcin es de 100px que lo indicamos en la propiedad width de la marca a. Cuando inicializamos la propiedad padding con:
padding:3px 5px;

estamos fijando una separacin de 3 pixeles en la parte superior e inferior y 5 pixeles a izquierda y derecha. Separamos cada opcin por una lnea blanca de un pixel:
border-right:1px solid white;

Otra forma de expresar los colores es utilizar una serie de nombres predefinidos (white, red, green, blue, etc.) de todos modos, lo ms seguro para que entiendan todos los navegadores, es indicando los valores de rojo,verde y azul como hemos venido trabajando. Luego con:
#menuhorizontal li { display:inline; }

Indicamos que todos los list item (li) se muestren en la misma lnea, ya que por defecto este tipo de marca indica que luego de mostrar un item de la lista el siguiente es abajo. Fcilmente esta propiedad la podemos entender si inicializamos la marca p (prrafo) con el siguiente valor:
p { display:inline; }

Luego si en la pgina HTML imprimimos dos prrafos, los mismos deberan aparecer en la misma lnea.

Ejemplo: Implementar un men horizontal con una lista.

pagina1.html
<html> <head> <title>Problema</title> <link rel="StyleSheet" href="estilos.css" type="text/css"> </head>

Pgina 150

<body> <ul id="menuhorizontal"> <li><a href="http://www.google.com">Google</a></li> <li><a href="http://www.yahoo.com">Yahoo</a></li> <li><a href="http://www.msn.com">Msn</a></li> <li><a href="http://www.altavista.com">Altavista</a></li> </ul> </body> </html>

estilos.css
#menuhorizontal { float:left; width:100%; padding:0px; margin:0px; list-style-type:none; } #menuhorizontal a { float:left; width:100px; text-decoration:none; text-align:center; color:#ff0000; background-color:#f7f8e8; padding:3px 5px; border-right:1px solid white; } #menuhorizontal a:hover { background-color:#336699; } #menuhorizontal li { display:inline; }

Practica: Implemente un men horizontal y un men vertical a la izquierda.

30. Propiedades relacionadas a la dimensin de un objeto en la pgina.

Disponemos de dos propiedades fundamentales que nos permiten fijar el ancho y el alto de una marca HTML.
width height

Veamos un ejemplo:
<html> <head> <title>Problema</title> <link rel="StyleSheet" href="estilos.css" type="text/css"> </head> <body> <div id="cabecera"> Blog del Programador </div> </body> </html>

Solamente hemos definido un div donde mostramos la cabecera de una pgina. La hoja de estilo definida:
#cabecera {

Pgina 151

width:100%; height:100px; background-color:#ffee00; color:#0000aa; text-align:center; font-family:Times New Roman; font-size:50px; font-weight:bold; }

La propiedad width la inicializamos con el valor 100%, lo que significa que ocupar todo el ancho de la pgina (podemos inicializarlo en pixeles si lo necesitamos). Luego a la propiedad height la inicializamos en 100 pxeles. El resto de propiedades son las ya vistas en conceptos anteriores. Es decir que las propiedades width y height nos permiten dar una dimensin a la marca HTML ya sea con valores absolutos indicados en pixeles o relativos indicados por porcentajes.

Ejemplo: Definir un div e inicializar las propiedades width y height.

pagina1.html
<html> <head> <title>Problema</title> <link rel="StyleSheet" href="estilos.css" type="text/css"> </head> <body> <div id="cabecera"> Blog del Programador </div> </body> </html>

estilos.css
#cabecera { width:100%; height:100px; background-color:#ffee00; color:#0000aa; text-align:center; font-family:Times New Roman; font-size:50px; font-weight:bold; }

Practica:

Crear una pgina HTML que muestre dos prrafos, a uno de ellos aplicarle el siguiente estilo:
.parrafoestrecho { width:200px; text-align:justify; }

Recordar que para aplicar esta clase a un prrafo debemos inicializar la propiedad class de la marca p (ej. <p class="margenestrecho">bla bla</p>)

31. Unidades de medida (px, cm, mm, em etc.)

Hasta ahora siempre que hemos especificado tamaos de letra, margin, padding, border etc. lo hemos hecho a travs de pixeles. Esto debido a que la forma ms sencilla de imaginar un tamao, por lo menos para los que estamos trabajando todo el da en

Pgina 152

una computadora, es el tamao de un pixel del monitor. Veremos que hay varias unidades de medida para indicar tamaos y que algunas son ms indicadas para algunas situaciones que otras. Disponemos de las siguientes unidades de medida:
px (pixeles) em (altura de la fuenta por defecto) ex (altura de la letra x) in (pulgadas) cm (centmetros) mm (milmetros) pt (puntos, 1 punto es lo mismo que 1/72 pulgadas) pc (picas, 1 pc es lo mismo que 12 puntos) % (porcentaje)

Un ejemplo que muestra una serie de prrafos asignando la propiedad font-size con distintos valores y unidades de medida:
<html> <head> <title>Problema</title> <link rel="StyleSheet" href="estilos.css" type="text/css"> </head> <body> <p class="pixel1">Este texto tiene 12 px<p> <p class="pixel2">Este texto tiene 15 px</p> <p class="em1">Este texto tiene 1 em</p> <p class="em2">Este texto tiene 1.5 em</p> <p class="ex1">Este texto tiene 1 ex</p> <p class="ex2">Este texto tiene 1.5 ex</p> <p class="in1">Este texto tiene 1 in</p> <p class="in2">Este texto tiene 1.5 in</p> <p class="cm1">Este texto tiene 1 cm</p> <p class="cm2">Este texto tiene 1.5 cm</p> <p class="mm1">Este texto tiene 10 mm</p> <p class="mm2">Este texto tiene 15 mm</p> <p class="pt1">Este texto tiene 10 pt</p> <p class="pt2">Este texto tiene 15 pt</p> <p class="pc1">Este texto tiene 1 pc</p> <p class="pc2">Este texto tiene 1.5 pc</p> <p class="porcentaje1">Este texto tiene 150%</p> <p class="porcentaje2">Este texto tiene 200%</p> </body> </html>

La hoja de estilo correspondiente es:

.pixel1 { font-size:12px; } .pixel2 { font-size:15px; } .em1{ font-size:1em; } .em2{ font-size:1.5em; } .ex1{ font-size:1ex; } .ex2{ font-size:1.5ex; } .in1{

Pgina 153

font-size:1in; } .in2{ font-size:1.5in; } .cm1{ font-size:1cm; } .cm2{ font-size:1.5cm; } .mm1{ font-size:10mm; } .mm2{ font-size:15mm; } .pt1{ font-size:10pt; } .pt2{ font-size:15pt; } .pc1{ font-size:1pc; } .pc2{ font-size:1.5pc; } .porcentaje1{ font-size:150%; } .porcentaje2{ font-size:200%; }

Los especialistas sobre el tema recomiendan utilizar em como medida cuando la salida es el monitor. Si utilizamos pixeles hay navegadores que no permiten cambiar el tamao de texto.

Ejemplo:

Disponer dos prrafos por cada tipo de unidad de medida y asignar valores distintos. pagina1.html
<html> <head> <title>Problema</title> <link rel="StyleSheet" href="estilos.css" type="text/css"> </head> <body> <p class="pixel1">Este texto tiene 12 px<p> <p class="pixel2">Este texto tiene 15 px</p> <p class="em1">Este texto tiene 1 em</p> <p class="em2">Este texto tiene 1.5 em</p> <p class="ex1">Este texto tiene 1 ex</p> <p class="ex2">Este texto tiene 1.5 ex</p> <p class="in1">Este texto tiene 1 in</p> <p class="in2">Este texto tiene 1.5 in</p> <p class="cm1">Este texto tiene 1 cm</p> <p class="cm2">Este texto tiene 1.5 cm</p> <p class="mm1">Este texto tiene 10 mm</p> <p class="mm2">Este texto tiene 15 mm</p> <p class="pt1">Este texto tiene 10 pt</p> <p class="pt2">Este texto tiene 15 pt</p> <p class="pc1">Este texto tiene 1 pc</p>

Pgina 154

<p class="pc2">Este texto tiene 1.5 pc</p> <p class="porcentaje1">Este texto tiene 150%</p> <p class="porcentaje2">Este texto tiene 200%</p> </body> </html>

estilos.css
.pixel1 { font-size:12px; } .pixel2 { font-size:15px; } .em1{ font-size:1em; } .em2{ font-size:1.5em; } .ex1{ font-size:1ex; } .ex2{ font-size:1.5ex; } .in1{ font-size:1in; } .in2{ font-size:1.5in; } .cm1{ font-size:1cm; } .cm2{ font-size:1.5cm; } .mm1{ font-size:10mm; } .mm2{ font-size:15mm; } .pt1{ font-size:10pt; } .pt2{ font-size:15pt; } .pc1{ font-size:1pc; } .pc2{ font-size:1.5pc; } .porcentaje1{ font-size:150%; } .porcentaje2{ font-size:200%; }

Practica: Cree un div y disponga una serie de prrafos. Defina como padding 2em.
Luego pruebe distintos tamaos de fuente y vea como vara el padding del div.

Pgina 155

32. Formas para indicar el color.

Hasta ahora hemos visto que para asignar el color utilizamos tres valores hexadecimales (rojo,verde,azul) precedido por el caracter #:
background-color:#ff0000;

Ahora veremos otras sintaxis para indicar el color:

background-color:rgb(255,0,0);

Utilizando la funcin rgb pasando como parmetro la cantidad de rojo,verde y azul en formato decimal (un valor entre 0 y 255). Tambin con la funcin rgb podemos indicar un porcentaje entre 0% y 100% para cada componente:
background-color:rgb(100%,0%,0%)

Por ltimo en algunas situaciones podemos utilizar una sintaxis reducida para ciertos valores:
background-color:#ffaaff;

Lo podemos indicar con esta otra sintaxis:

background-color:#faf;

Es decir si cada valor hexadecimal est formado por el mismo caracter podemos utilizar esta sintaxis simplificada indicando un caracter solamente. Es decir a este color no lo podemos representar con la sintaxis indicada:
background-color:#ffaafa

Ya que los ltimos 2 caracteres, fa, son distintos.

Ejemplo: Disponer tres prrafos pintando su fondo, utilizar distintas formas para
inicializar el color de la propiedad background-color. pagina1.html
<html> <head> <title>Problema</title> <link rel="StyleSheet" href="estilos.css" type="text/css"> </head> <body> <p class="fondo1">Primer prrafo</p> <p class="fondo2">Segundo prrafo</p> <p class="fondo3">Tercer prrafo</p> </body> </html>

estilos.css
.fondo1 { background-color:rgb(255,0,0); } .fondo2 { background-color:rgb(100%,50%,50%); } .fondo3 { background-color:#fab; }

Practica:

Utilizando la sintaxis simplificada para indicar las proporciones de rojo,verde y azul. Pintar el fondo de 16 prrafos. Comenzar por el valor #000 hasta el #fff. Hacer que los prrafos estn sin margen entre s.

Pgina 156

33. Definir un cursor para un control HTML.

Disponemos de una propiedad llamada cursor que tiene por objetivo definir el cursor a mostrar cuando la flecha del mouse se encuentra sobre el control HTML. Los valores que podemos asignarle a esta propiedad son:
crosshair default pointer move e-resize ne-resize nw-resize n-resize se-resize sw-resize s-resize w-resize text wait help auto

Veamos un ejemplo para configurar la propiedad cursor para la marca ancla:

<html> <head> <title>Problema</title> <link rel="StyleSheet" href="estilos.css" type="text/css"> </head> <body> <p>Este texto tiene por mostrar las anclas con un cursor distinto al que est definido por defecto:</p> <a href="http://www.google.com">google.com</a><br> <a href="http://www.yahoo.com">yahoo.com</a><br> <a href="http://www.msn.com">msn.com</a> </body> </html>

La hoja de estilo es:

a { cursor:help; }

Ejemplo:
ancla. pagina1.html

Disponer tres hipervnculos y definir el cursor help para la marca tipo

<html> <head> <title>Problema</title> <link rel="StyleSheet" href="estilos.css" type="text/css"> </head> <body> <p>Este texto tiene por mostrar las anclas con un cursor distinto al que est definido por defecto:</p> <a href="http://www.google.com">google.com</a><br> <a href="http://www.yahoo.com">yahoo.com</a><br> <a href="http://www.msn.com">msn.com</a> </body> </html>

estilos.css
a {

Pgina 157

cursor:help; }

Practica:

Disponer los nombres de los valores que puede adoptar la propiedad cursor. Luego definir dicho cursor para cada valor de propiedad. Recordemos que la propiedad cursor puede adoptar los siguientes valores:
crosshair default pointer move e-resize ne-resize nw-resize n-resize se-resize sw-resize s-resize w-resize text wait help auto default

34. Aplicacin de hojas de estilo a un formulario.

Un formulario es el elemento esencial para el envo de datos al servidor por parte del visitante del sitio. Veamos un ejemplo donde implementamos un formulario y le aplicamos una serie de reglas de estilo a las diferentes marcas HTML que intervienen:
<html> <head> <title>Problema</title> <link rel="StyleSheet" href="estilos.css" type="text/css"> </head> <body> <div id="contenedorform"> <form method="post" action="#"> <label>Ingrese nombre:</label> <input type="text" name="nombre" size="30"> <br> <label>Ingrese mail:</label> <input type="text" name="mail" size="45"> <br> <label>Comentarios:</label> <textarea name="comentarios" cols="30" rows="5"></textarea> <br> <input class="botonsubmit" type="submit" value="confirmar"> </form> </div> </body> </html>

La hoja de estilo que se aplica es:

#contenedorform { width:500px; margin-left:20px; margin-top:10px; background-color:#ffe; border:1px solid #CCC; padding:10px 0 10px 0;

Pgina 158

} #contenedorform form label { width:120px; float:left; font-family:verdana; font-size:14px; } .botonsubmit { color:#f00; background-color:#bbb; border: 1px solid #fff; }

Podemos observar que definimos un div contenedor y dentro de este el formulario. Para que los textos aparezcan a la izquierda, definimos una serie de label que las flotamos a izquieda, por lo que los controles del formulario aparecern a derecha todos encolumnados.

Ejemplo:

Crear un formulario que solicite el ingreso del nombre, mail y comentarios de un visitante. pagina1.html
<html> <head> <title>Problema</title> <link rel="StyleSheet" href="estilos.css" type="text/css"> </head> <body> <div id="contenedorform"> <form method="post" action="#"> <label>Ingrese nombre:</label> <input type="text" name="nombre" size="30"> <br> <label>Ingrese mail:</label> <input type="text" name="mail" size="45"> <br> <label>Comentarios:</label> <textarea name="comentarios" cols="30" rows="5"></textarea> <br> <input class="botonsubmit" type="submit" value="confirmar"> </form> </div> </body> </html>

estilos.css
#contenedorform { width:500px; margin-left:20px; margin-top:10px; background-color:#ffe; border:1px solid #CCC; padding:10px 0 10px 0; } #contenedorform form label { width:120px; float:left; font-family:verdana; font-size:14px; } .botonsubmit { color:#f00; background-color:#bbb;

Pgina 159

border: 1px solid #fff; }

Practica: Crear un formulario que solicite el ingreso del nombre de una persona y
su edad. Aplicar el estilo 'campo' a los dos controles de tipo text.
.campo { color:#0a0; background-color:#ff1; }

35. Definiendo reglas de estilo a una tabla.

Veamos con un ejemplo como podemos afectar una tabla HTML con CSS.
<html> <head> <title>Problema</title> <link rel="StyleSheet" href="estilos.css" type="text/css"> </head> <body> <table> <caption> cantidad de lluvia caida en mm. </caption> <thead> <tr> <th>Provincia</th><th>Enero</th><th>Febrero</th><th>Marzo</th> </tr> </thead> <tbody> <tr> <th>Crdoba</th> <td>210</td><td>170</td><td>120</td> </tr> <tr> <th>Buenos Aires</th> <td>250</td><td>190</td><td>140</td> </tr> <tr> <th>Santa Fe</th> <td>175</td><td>140</td><td>120</td> </tr> </tbody> </table> </body> </html>

La hoja de estilo definida a esta tabla es:

caption { font-family:arial; font-size:15px; text-align: center; margin: 0px; font-weight: bold; padding:10px; } table { border-collapse: collapse; }

Pgina 160

th { border-right: 1px solid #fff; border-bottom: 1px solid #fff; padding: 0.5em; background-color:#6495ed;; } thead th { background-color: #6495ed; color: #fff; } tbody th { font-family:arial; font-weight: normal; background-color: #6495ed; color:#ff0; } td { border: 1px solid #000; padding: .5em; background-color:#ed8f63; width:100px; text-align:center; }

La marca caption dentro de una tabla es el ttulo que debe aparecer arriba. La propiedad border-collapse puede tomar dos valores: collapse o separate. Separate deja las celdas con unos pixeles de separacin, no as collapse. El resto es la definicin de una serie de reglas para las marcas th, th dentro de la marca tbody, th dentro de la marca thead y por ltimo td.

Ejemplo:

Crear una tabla donde se deben mostrar las precipitaciones de 3 tres provincias durante los meses de enero, febrero y marzo. pagina1.html
<html> <head> <title>Problema</title> <link rel="StyleSheet" href="estilos.css" type="text/css"> </head> <body> <table> <caption> cantidad de lluvia caida en mm. </caption> <thead> <tr> <th>Provincia</th><th>Enero</th><th>Febrero</th><th>Marzo</th> </tr> </thead> <tbody> <tr> <th>Crdoba</th> <td>210</td><td>170</td><td>120</td> </tr> <tr> <th>Buenos Aires</th> <td>250</td><td>190</td><td>140</td> </tr>

Pgina 161

<tr> <th>Santa Fe</th> <td>175</td><td>140</td><td>120</td> </tr> </tbody> </table> </body> </html>

estilos.css
caption { font-family:arial; font-size:15px; text-align: center; margin: 0px; font-weight: bold; padding:10px; } table { border-collapse: collapse; } th { border-right: 1px solid #fff; border-bottom: 1px solid #fff; padding: 0.5em; background-color:#6495ed;; } thead th { background-color: #6495ed; color: #fff; } tbody th { font-family:arial; font-weight: normal; background-color: #6495ed; color:#ff0; }

Practica: Definir una tabla de varias filas y columnas. Aplicar estilos a las marcas th
y td.

36. Posicionamiento relativo.

La propiedad position determina el punto de referencia donde se debe localizar cada elemento HTML. Por defecto esta propiedad se inicializa con el valor static. Con el valor por defecto static, cada elemento HTML se localiza de izquierda a derecha y de arriba hacia abajo. El segundo valor posible para esta propiedad es relative. En caso de fijar la propiedad position con el valor relative, podemos modificar la posicin por defecto del elemento HTML modificando los valores left y top (con valores positivos o inclusive negativos)

Pgina 162

Veamos un ejemplo con tres div, de los cuales el segundo lo desplazamos 20 pixeles a nivel de columna y 5 pixeles a nivel de fila:
<html> <head> <title>Problema</title> <link rel="StyleSheet" href="estilos.css" type="text/css"> </head> <body> <div id="caja1"> <p>Esta es la primer caja.</p> <p>No se desplaza.</p> </div> <div id="caja2"> <p>Esta es la segunda caja.</p> <p>Se desplaza 15 pxeles a la derecha y 5 hacia abajo de su posicin por defecto.</p> </div> <div id="caja3"> <p>Esta es la tercer caja.</p> <p>No se desplaza.</p> </div> </body> </html>

La hoja de estilo asociada es:

#caja1,#caja2,#caja3 { background-color:#f99; font-family:verdana; font-size:1.3em; } #caja2 { position:relative; left:15px; top:5px; }

Repasemos un poquito, recordemos que cuando un conjunto de elementos tienen los mismos valores para una serie de propiedades los podemos agrupar separndolos por coma, esto sucede para los tres Id #caja1,#caja2 y #caja3 que tienen los mismos valores para las propiedades background-color, font-family y font-size:
#caja1,#caja2,#caja3 { background-color:#f99; font-family:verdana; font-size:1.3em; }

Luego como debemos inicializar la propiedad position slo para el Id #caja3 lo hacemos en forma separada:
#caja2 { position:relative; left:15px; top:5px; }

Ac es donde inicializamos la propiedad position con el valor relative y desplazamos el elemento 15 pxeles a la derecha y 5 pxeles hacia abajo. Tengamos en cuenta que si asigno un valor muy grande a la propiedad top se superpone este elemento con el contenido del tercer div.

Ejemplo:

Definir 3 elementos de tipo div, luego mediante la propiedad position desplazar el segundo div 15 pxeles a la derecha y 5 hacia abajo.

Pgina 163

pagina1.html
<html> <head> <title>Problema</title> <link rel="StyleSheet" href="estilos.css" type="text/css"> </head> <body> <div id="caja1"> <p>Esta es la primer caja.</p> <p>No se desplaza.</p> </div> <div id="caja2"> <p>Esta es la segunda caja.</p> <p>Se desplaza 15 pxeles a la derecha y 5 hacia abajo de su posicin por defecto.</p> </div> <div id="caja3"> <p>Esta es la tercer caja.</p> <p>No se desplaza.</p> </div> </body> </html>

estilos.css
#caja1,#caja2,#caja3 { background-color:#f99; font-family:verdana; font-size:1.3em; } #caja2 { position:relative; left:15px; top:5px; }

Practica:

Disponer dos prrafos, desplazar el segundo prrafo hasta que quede casi superpuesto al primer prrafo.

37. Posicionamiento absoluto.

El posicionamiento absoluto dispone un elemento HTML completamente fuera del flujo de la pgina. El valor que debemos asignar a la propiedad position es absolute. Hay que tener en cuenta que no se reserva espacio en el flujo del documento como pasaba con el posicionamiento relativo (recordemos que con este posicionamiento podemos desplazar el elemento a cuarquier parte de la pgina, pero el espacio por defecto para dicho elemento queda vaco). El posicionamiento es siempre con respecto a la pgina. Veamos un ejemplo para ver el funcionamiento del posicionamiento absoluto:
<html> <head> <title>Problema</title> <link rel="StyleSheet" href="estilos.css" type="text/css"> </head> <body> <div id="caja1"> <p>Esta es la primer caja.</p> <p>No se desplaza.</p> </div> <div id="caja2">

Pgina 164

<p>Esta es la segunda caja.</p> <p>Se desplaza a la coordenada de pantalla 40 en columna y 30 en fila (en pxeles).</p> </div> <div id="caja3"> <p>Esta es la tercer caja.</p> <p>No se desplaza.</p> </div> </body> </html>

La hoja de estilo definida:

#caja1,#caja3 { background-color:#f99; font-family:verdana; font-size:1.3em; } #caja2 { background-color:#ff0; font-size:1.3em; position:absolute; left:40px; top:30px; }

Como vemos inicializamos la propiedad position con el valor absolute y fijamos como coordenada para la caja la columna 40 y la fila 30 (en pxeles).

Ejemplo: Disponer tres cajas de texto mediante div. Luego posicionar la segundo
caja en la coordenada de la pgina 40,30 (pxel 40 en columna y 30 en fila) en forma absoluta. pagina1.html
<html> <head> <title>Problema</title> <link rel="StyleSheet" href="estilos.css" type="text/css"> </head> <body> <div id="caja1"> <p>Esta es la primer caja.</p> <p>No se desplaza.</p> </div> <div id="caja2"> <p>Esta es la segunda caja.</p> <p>Se desplaza a la coordenada de pantalla 40 en columna y 30 en fila (en pxeles).</p> </div> <div id="caja3"> <p>Esta es la tercer caja.</p> <p>No se desplaza.</p> </div> </body> </html>

estilos.css
#caja1,#caja3 { background-color:#f99; font-family:verdana; font-size:1.3em; } #caja2 { background-color:#ff0; font-size:1.3em; position:absolute;

Pgina 165

left:40px; top:30px; }

Practica:

Disponer dos div con coordenadas absolutas, uno que represente la cabecera de la pgina (50 pxeles de alto) y otro la primer columna de la izquierda.

38. Disposicin de 2 columnas.

Empezaremos a ver como componer una pgina sin utilizar las tablas (un medio muy utilizado hasta hace muy poco, ya que es ampliamente soportado por navegadores antiguos). Una solucin para crear una pgina con dos columnas es utilizar el posicionamiento absoluto:
<html> <head> <title>Problema</title> <link rel="StyleSheet" href="estilos.css" type="text/css"> </head> <body> <div id="columna1"> Aca va el contenido de la columna 1. </div> </body> </html>

La hoja de estilo para esta pgina es:

* { margin:0px; padding:0px; } #columna1 { position:absolute; top:0px; left:0px; width:200px; margin-top:10px; background-color:#ffff55; } #columna2 { margin-left:220px; margin-right:20px; margin-top:10px; background-color:#ffffbb; }

La primera regla de disponer el selector universal, es decir afecta a todas las marcas HTML, es sacar el margen y padding (generalmente dispondremos esta regla):
* { margin:0px; padding:0px; }

Ahora la regla definida para la primer columna es:

#columna1 { position:absolute; top:0px; left:0px; width:200px; margin-top:10px; background-color:#ffff55;

Pgina 166

Es decir, inicializamos la propiedad position con el valor absolute, con lo que debemos indicar la posicin del div en la pgina por medio de las propiedades top y left, en esta caso lo posicionamos en la columna 0 y fila 0 y adems inicializamos la propiedad width, con lo cual le estamos indicando que esta columna tendr siempre 200 pxeles de ancho. Adems inicializamos la propiedad margin-top con 10 pxeles, recordemos que todos los elementos tienen margin y padding cero. Ahora veamos cmo inicializamos la segunda columna:
#columna2 { margin-left:220px; margin-right:20px; margin-top:10px; background-color:#ffffbb; }

Esta regla no inicializa la propiedad position, por lo que el div ocupa la posicin que le corresponde por defecto, es decir, empieza en la coordenada 0,0 de la pgina. El truco est en inicializar la propiedad margin-left con un valor mayor a 200, que es el ancho de la columna1. El resto de propiedades que inicializamos son el margin-top, para que sea igual que la primera columna y el margin-right, para que no quede el texto pegado a la derecha.

Ejemplo: Crear una pgina con dos columnas.

pagina1.html
<html> <head> <title>Problema</title> <link rel="StyleSheet" href="estilos.css" type="text/css"> </head> <body> <div id="columna1"> Aca va el contenido de la columna 1.Aca va el contenido de la columna 1.Aca va el contenido de la columna 1.Aca va el contenido de la columna 1.Aca va el contenido de la columna 1.Aca va el contenido de la columna 1.Aca va el contenido de la columna 1.Aca va el contenido de la columna 1.Aca va el contenido de la columna 1.Aca va el contenido de la columna 1.Aca va el contenido de la columna 1.Aca va el contenido de la columna 1.Aca va el contenido de la columna 1.Aca va el contenido de la columna 1.Aca va el contenido de la columna 1.Aca va el contenido de la columna 1.Aca va el contenido de la columna 1.Aca va el contenido de la columna 1.Aca va el contenido de la columna 1.Aca va el contenido de la columna 1.Aca va el contenido de la columna 1.Aca va el contenido de la columna 1.Aca va el contenido de la columna 1.Aca va el contenido de la columna 1.Aca va el contenido de la columna 1.Aca va el contenido de la columna 1.Aca va el contenido de la columna 1.Aca va el contenido de la columna 1.Aca va el contenido de la columna 1.Aca va el contenido de la columna 1.Aca va el contenido de la columna 1.Aca va el contenido de la columna 1.Aca va el contenido de la columna 1.Aca va el contenido de la columna 1.Aca va el contenido de la columna 1.Aca va el contenido de la columna 1.Aca va el contenido de la columna 1.Aca va el contenido de la columna 1.Aca va el contenido de la columna 1.Aca va el contenido de la columna 1.Aca va el contenido de la columna 1.Aca va el contenido de la columna 1.Aca va el contenido de la columna 1.Aca va el contenido de la columna 1.Aca va el contenido de la columna 1.Aca va el contenido de la columna 1.Aca va el contenido de la columna 1.Aca va el contenido de la columna 1.Aca va el contenido de la columna 1.Aca va el contenido de la columna 1.Aca va el contenido de la columna 1. </div>

Pgina 167

<div id="columna2"> Aca va el contenido de la columna 2. Aca va el contenido de la columna 2.Aca va el contenido de la columna 2.Aca va el contenido de la columna 2.Aca va el contenido de la columna 2.Aca va el contenido de la columna 2.Aca va el contenido de la columna 2.Aca va el contenido de la columna 2.Aca va el contenido de la columna 2.Aca va el contenido de la columna 2.Aca va el contenido de la columna 2.Aca va el contenido de la columna 2.Aca va el contenido de la columna 2.Aca va el contenido de la columna 2.Aca va el contenido de la columna 2.Aca va el contenido de la columna 2.Aca va el contenido de la columna 2.Aca va el contenido de la columna 2.Aca va el contenido de la columna 2.Aca va el contenido de la columna 2.Aca va el contenido de la columna 2.Aca va el contenido de la columna 2.Aca va el contenido de la columna 2.Aca va el contenido de la columna 2.Aca va el contenido de la columna 2.Aca va el contenido de la columna 2.Aca va el contenido de la columna 2.Aca va el contenido de la columna 2.Aca va el contenido de la columna 2.Aca va el contenido de la columna 2.Aca va el contenido de la columna 2.Aca va el contenido de la columna 2.Aca va el contenido de la columna 2.Aca va el contenido de la columna 2.Aca va el contenido de la columna 2.Aca va el contenido de la columna 2.Aca va el contenido de la columna 2.Aca va el contenido de la columna 2.Aca va el contenido de la columna 2.Aca va el contenido de la columna 2.Aca va el contenido de la columna 2.Aca va el contenido de la columna 2.Aca va el contenido de la columna 2.Aca va el contenido de la columna 2.Aca va el contenido de la columna 2.Aca va el contenido de la columna 2.Aca va el contenido de la columna 2.Aca va el contenido de la columna 2.Aca va el contenido de la columna 2.Aca va el contenido de la columna 2.Aca va el contenido de la columna 2.Aca va el contenido de la columna 2.Aca va el contenido de la columna 2.Aca va el contenido de la columna 2.Aca va el contenido de la columna 2.Aca va el contenido de la columna 2.Aca va el contenido de la columna 2.Aca va el contenido de la columna 2.Aca va el contenido de la columna 2.Aca va el contenido de la columna 2.Aca va el contenido de la columna 2.Aca va el contenido de la columna 2.Aca va el contenido de la columna 2.Aca va el contenido de la columna 2.Aca va el contenido de la columna 2.Aca va el contenido de la columna 2.Aca va el contenido de la columna 2.Aca va el contenido de la columna 2.Aca va el contenido de la columna 2.Aca va el contenido de la columna 2.Aca va el contenido de la columna 2.Aca va el contenido de la columna 2.Aca va el contenido de la columna 2.Aca va el contenido de la columna 2.Aca va el contenido de la columna 2.Aca va el contenido de la columna 2. </div> </body> </html>

estilos.css
* { margin:0px; padding:0px; } #columna1 { position:absolute; top:0px; left:0px; width:200px; margin-top:10px; background-color:#ffff55; } #columna2 { margin-left:220px; margin-right:20px; margin-top:10px; background-color:#ffffbb; }

Practica: Crear una pgina con dos columnas y disponer en la primera columna un
men de opciones (como el visto en conceptos anteriores).

Pgina 168

39. Propiedad float aplicada a una imagen.

La propiedad float saca del flujo un elemento HTML. Esta propiedad admite tres valores:
left right none

Cuando aplicamos esta propiedad a la marca img, podemos hacer que el texto envuelva a la imagen. Veamos un ejemplo:
<html> <head> <title>Problema</title> <link rel="StyleSheet" href="estilos.css" type="text/css"> <link </head> <body> <img src="../imagen1.png"> <p>El texto envuelve a la imagen. </p> </body> </html>

La hoja de estilo:
img { float:right; }

Es importante hacer notar que si no la flotamos a la imagen solo habr una lnea de texto a la derecha de la imagen.

Ejemplo: Disponer una imagen y flot rla a la derecha. Pruebe luego de modificar la
propiedad float con los otros dos valores posibles (left,none). pagina1.html
<html> <head> <title>Problema</title> <link rel="StyleSheet" href="estilos.css" type="text/css"> <link </head> <body> <img src="../imagen1.png"> <p>El texto envuelve a la imagen. El texto envuelve a la imagen.El texto envuelve a la imagen.El texto envuelve a la imagen.El texto envuelve a la imagen.El texto envuelve a la imagen.El texto envuelve a la imagen.El texto envuelve a la imagen.El texto envuelve a la imagen.El texto envuelve a la imagen.El texto envuelve a la imagen.El texto envuelve a la imagen.El texto envuelve a la imagen.El texto envuelve a la imagen.El texto envuelve a la imagen.El texto envuelve a la imagen.El texto envuelve a la imagen.El texto envuelve a la imagen.El texto envuelve a la imagen.El texto envuelve a la imagen.El texto envuelve a la imagen.El texto envuelve a la imagen.El texto envuelve a la imagen.El texto envuelve a la imagen.El texto envuelve a la imagen.El texto envuelve a la imagen.El texto envuelve a la imagen.El texto envuelve a la imagen.El texto envuelve a la imagen.El texto envuelve a la imagen.El texto envuelve a la imagen.El texto envuelve a la imagen.El texto envuelve a la imagen.El texto envuelve a la imagen.El texto envuelve a la imagen.El texto envuelve a la imagen.El texto envuelve a la imagen.El texto envuelve a la imagen.El texto envuelve a la imagen.El texto envuelve a la imagen.El texto envuelve a la imagen.El texto envuelve a la imagen.El texto envuelve a la imagen.El texto envuelve a la imagen.El texto envuelve a la imagen.El texto envuelve a la imagen.El texto envuelve a la imagen.El texto

Pgina 169

envuelve a la imagen.El texto envuelve a la imagen.El texto envuelve a la imagen.El texto envuelve a la imagen.El texto envuelve a la imagen.El texto envuelve a la imagen.El texto envuelve a la imagen.El texto envuelve a la imagen.</p> </body> </html>

estilos.css
img { float:right; } Inicializar la siguiente regla:

span { float:left; font-size:300%; }

Practica:

Confeccionar una pgina en la que la primera letra de cada oracin aparezca con el triple de tamao y adems el texto envuelva a la letra.

40. Disposicin de 2 columnas (propiedad float)

Una segunda forma de implementar una pgina con dos columnas es utilizar la propiedad float. Disponemos dos div. Al primero lo flotamos hacia la izquierda con un width fijo y el segundo se acomoda inmediatamente a la derecha. Veamos un ejemplo:
<html> <head> <title>Problema</title> <link rel="StyleSheet" href="estilos.css" type="text/css"> </head> <body> <div id="columna1"> Aqu el contenido de la columna 1. </div> <div id="columna2"> Aqu el contenido de la columna 2. </div> </body> </html>

La hoja de estilo:
* { margin:0; padding:0; } #columna1 { float:left; width:200px; background-color:#ff5; border:1px solid #555; } #columna2 { margin-left:210px; background-color:#ffb; border:1px solid #555; }

La columna1 tiene un ancho de 200 pixeles. Luego para evitar que la columna dos envuelva a la columna uno en caso de ser ms larga inicializamos margin-left con 210 pixeles.

Pgina 170

Ejemplo:

Crear una pgina con dos columnas. La primera flotarla a la izquierda con 200 pxeles de ancho. pagina1.html
<html> <head> <title>Problema</title> <link rel="StyleSheet" href="estilos.css" type="text/css"> </head> <body> <div id="columna1"> Aqu el contenido de la columna 1.Aqu el contenido de la columna 1.Aqu el contenido de la columna 1.Aqu el contenido de la columna 1.Aqu el contenido de la columna 1.Aqu el contenido de la columna 1.Aqu el contenido de la columna 1.Aqu el contenido de la columna 1.Aqu el contenido de la columna 1.Aqu el contenido de la columna 1.Aqu el contenido de la columna 1.Aqu el contenido de la columna 1.Aqu el contenido de la columna 1.Aqu el contenido de la columna 1.Aqu el contenido de la columna 1.Aqu el contenido de la columna 1.Aqu el contenido de la columna 1.Aqu el contenido de la columna 1.Aqu el contenido de la columna 1.Aqu el contenido de la columna 1.Aqu el contenido de la columna 1.Aqu el contenido de la columna 1.Aqu el contenido de la columna 1.Aqu el contenido de la columna 1.Aqu el contenido de la columna 1.Aqu el contenido de la columna 1.Aqu el contenido de la columna 1.Aqu el contenido de la columna 1.Aqu el contenido de la columna 1.Aqu el contenido de la columna 1.Aqu el contenido de la columna 1.Aqu el contenido de la columna 1.Aqu el contenido de la columna 1.Aqu el contenido de la columna 1.Aqu el contenido de la columna 1.Aqu el contenido de la columna 1.Aqu el contenido de la columna 1. </div> <div id="columna2"> Aqu el contenido de la columna 2.Aqu el contenido de la columna 2.Aqu el contenido de la columna 2.Aqu el contenido de la columna 2.Aqu el contenido de la columna 2.Aqu el contenido de la columna 2.Aqu el contenido de la columna 2.Aqu el contenido de la columna 2.Aqu el contenido de la columna 2.Aqu el contenido de la columna 2.Aqu el contenido de la columna 2.Aqu el contenido de la columna 2.Aqu el contenido de la columna 2.Aqu el contenido de la columna 2.Aqu el contenido de la columna 2.Aqu el contenido de la columna 2.Aqu el contenido de la columna 2.Aqu el contenido de la columna 2.Aqu el contenido de la columna 2.Aqu el contenido de la columna 2.Aqu el contenido de la columna 2.Aqu el contenido de la columna 2.Aqu el contenido de la columna 2.Aqu el contenido de la columna 2.Aqu el contenido de la columna 2.Aqu el contenido de la columna 2.Aqu el contenido de la columna 2.Aqu el contenido de la columna 2.Aqu el contenido de la columna 2.Aqu el contenido de la columna 2.Aqu el contenido de la columna 2.Aqu el contenido de la columna 2.Aqu el contenido de la columna 2.Aqu el contenido de la columna 2.Aqu el contenido de la columna 2.Aqu el contenido de la columna 2.Aqu el contenido de la columna 2.Aqu el contenido de la columna 2.Aqu el contenido de la columna 2.Aqu el contenido de la columna 2.Aqu el contenido de la columna 2.Aqu el contenido de la columna 2.Aqu el contenido de la columna 2.Aqu el contenido de la columna 2.Aqu el contenido de la columna 2.Aqu el contenido de la columna 2.Aqu el contenido de la columna 2.Aqu el contenido de la columna 2.Aqu el contenido de la columna 2.Aqu el contenido de la columna 2.Aqu el contenido de la columna 2.Aqu el contenido de la columna 2.Aqu el contenido de la columna 2.Aqu el contenido de la columna 2.Aqu el contenido de la columna 2.Aqu el contenido de la columna 2.Aqu el contenido de la columna 2.Aqu el contenido de la columna 2.Aqu el contenido de la columna 2.Aqu el contenido de la columna 2.Aqu el contenido de la columna 2.Aqu el contenido de la columna 2.Aqu el contenido de la columna 2.Aqu el contenido de la columna 2.Aqu el contenido de la columna 2.Aqu el contenido de la columna 2.Aqu el contenido de la columna 2.Aqu el contenido de la columna 2.Aqu el contenido de la columna 2.Aqu el contenido de la columna 2.Aqu el contenido de la columna 2.Aqu el contenido de la columna 2.Aqu el contenido de la columna 2.Aqu el contenido de la columna 2.Aqu el contenido de la columna 2.Aqu el contenido de la columna 2.Aqu el contenido

Pgina 171

de la columna 2.Aqu el contenido columna 2.Aqu el contenido de la 2.Aqu el contenido de la columna contenido de la columna 2.Aqu el de la columna 2.Aqu el contenido columna 2.Aqu el contenido de la 2.Aqu el contenido de la columna contenido de la columna 2.Aqu el de la columna 2.Aqu el contenido columna 2.Aqu el contenido de la 2.Aqu el contenido de la columna contenido de la columna 2.Aqu el de la columna 2.Aqu el contenido columna 2.Aqu el contenido de la 2.Aqu el contenido de la columna contenido de la columna 2.Aqu el de la columna 2.Aqu el contenido columna 2.Aqu el contenido de la 2.Aqu el contenido de la columna contenido de la columna 2.Aqu el de la columna 2.Aqu el contenido columna 2.Aqu el contenido de la 2.Aqu el contenido de la columna contenido de la columna 2.Aqu el de la columna 2.Aqu el contenido columna 2.Aqu el contenido de la 2.Aqu el contenido de la columna contenido de la columna 2.Aqu el de la columna 2.Aqu el contenido columna 2.Aqu el contenido de la 2.Aqu el contenido de la columna contenido de la columna 2.Aqu el de la columna 2.Aqu el contenido columna 2.Aqu el contenido de la 2.Aqu el contenido de la columna contenido de la columna 2.Aqu el de la columna 2.Aqu el contenido columna 2.Aqu el contenido de la 2.Aqu el contenido de la columna contenido de la columna 2.Aqu el de la columna 2.Aqu el contenido columna 2.Aqu el contenido de la 2.Aqu el contenido de la columna contenido de la columna 2.Aqu el de la columna 2.Aqu el contenido columna 2.Aqu el contenido de la 2.Aqu el contenido de la columna contenido de la columna 2.Aqu el de la columna 2.Aqu el contenido columna 2.Aqu el contenido de la 2.Aqu el contenido de la columna contenido de la columna 2.Aqu el de la columna 2.Aqu el contenido columna 2.Aqu el contenido de la 2.Aqu el contenido de la columna contenido de la columna 2.Aqu el de la columna 2.Aqu el contenido columna 2.Aqu el contenido de la 2.Aqu el contenido de la columna contenido de la columna 2.Aqu el de la columna 2.Aqu el contenido columna 2.Aqu el contenido de la 2.Aqu el contenido de la columna contenido de la columna 2.Aqu el de la columna 2.Aqu el contenido

de la columna 2.Aqu el contenido columna 2.Aqu el contenido de la 2.Aqu el contenido de la columna contenido de la columna 2.Aqu el de la columna 2.Aqu el contenido columna 2.Aqu el contenido de la 2.Aqu el contenido de la columna contenido de la columna 2.Aqu el de la columna 2.Aqu el contenido columna 2.Aqu el contenido de la 2.Aqu el contenido de la columna contenido de la columna 2.Aqu el de la columna 2.Aqu el contenido columna 2.Aqu el contenido de la 2.Aqu el contenido de la columna contenido de la columna 2.Aqu el de la columna 2.Aqu el contenido columna 2.Aqu el contenido de la 2.Aqu el contenido de la columna contenido de la columna 2.Aqu el de la columna 2.Aqu el contenido columna 2.Aqu el contenido de la 2.Aqu el contenido de la columna contenido de la columna 2.Aqu el de la columna 2.Aqu el contenido columna 2.Aqu el contenido de la 2.Aqu el contenido de la columna contenido de la columna 2.Aqu el de la columna 2.Aqu el contenido columna 2.Aqu el contenido de la 2.Aqu el contenido de la columna contenido de la columna 2.Aqu el de la columna 2.Aqu el contenido columna 2.Aqu el contenido de la 2.Aqu el contenido de la columna contenido de la columna 2.Aqu el de la columna 2.Aqu el contenido columna 2.Aqu el contenido de la 2.Aqu el contenido de la columna contenido de la columna 2.Aqu el de la columna 2.Aqu el contenido columna 2.Aqu el contenido de la 2.Aqu el contenido de la columna contenido de la columna 2.Aqu el de la columna 2.Aqu el contenido columna 2.Aqu el contenido de la 2.Aqu el contenido de la columna contenido de la columna 2.Aqu el de la columna 2.Aqu el contenido columna 2.Aqu el contenido de la 2.Aqu el contenido de la columna contenido de la columna 2.Aqu el de la columna 2.Aqu el contenido columna 2.Aqu el contenido de la 2.Aqu el contenido de la columna contenido de la columna 2.Aqu el de la columna 2.Aqu el contenido columna 2.Aqu el contenido de la 2.Aqu el contenido de la columna contenido de la columna 2.Aqu el de la columna 2.Aqu el contenido columna 2.Aqu el contenido de la 2.Aqu el contenido de la columna contenido de la columna 2.Aqu el de la columna 2.Aqu el contenido

de la columna 2.Aqu el contenido de la columna 2.Aqu el contenido de la columna 2.Aqu el contenido de la columna 2.Aqu el contenido de la columna 2.Aqu el contenido de la columna 2.Aqu el contenido de la columna 2.Aqu el contenido de la columna 2.Aqu el contenido de la columna 2.Aqu el contenido de la columna 2.Aqu el contenido de la columna 2.Aqu el contenido de la columna 2.Aqu el contenido de la columna 2.Aqu el contenido de la columna 2.Aqu el contenido de la columna 2.Aqu el contenido de la columna 2.Aqu el contenido de la

Pgina 172

columna 2.Aqu el contenido de la 2.Aqu el contenido de la columna contenido de la columna 2.Aqu el de la columna 2.Aqu el contenido columna 2.Aqu el contenido de la 2.Aqu el contenido de la columna contenido de la columna 2.Aqu el de la columna 2.Aqu el contenido columna 2.Aqu el contenido de la 2.Aqu el contenido de la columna contenido de la columna 2.Aqu el de la columna 2.Aqu el contenido columna 2.Aqu el contenido de la 2.Aqu el contenido de la columna contenido de la columna 2.Aqu el de la columna 2.Aqu el contenido columna 2.Aqu el contenido de la 2.Aqu el contenido de la columna contenido de la columna 2.Aqu el de la columna 2.Aqu el contenido columna 2.Aqu el contenido de la 2.Aqu el contenido de la columna contenido de la columna 2.Aqu el de la columna 2.Aqu el contenido columna 2.Aqu el contenido de la 2.Aqu el contenido de la columna contenido de la columna 2.Aqu el de la columna 2.Aqu el contenido columna 2.Aqu el contenido de la 2.Aqu el contenido de la columna contenido de la columna 2.Aqu el de la columna 2.Aqu el contenido columna 2.Aqu el contenido de la 2.Aqu el contenido de la columna contenido de la columna 2.Aqu el de la columna 2.Aqu el contenido columna 2.Aqu el contenido de la 2.Aqu el contenido de la columna contenido de la columna 2.Aqu el de la columna 2.Aqu el contenido columna 2.Aqu el contenido de la 2.Aqu el contenido de la columna contenido de la columna 2.Aqu el de la columna 2.Aqu el contenido columna 2.Aqu el contenido de la 2.Aqu el contenido de la columna contenido de la columna 2.Aqu el de la columna 2.Aqu el contenido columna 2.Aqu el contenido de la 2.Aqu el contenido de la columna contenido de la columna 2. </div> </body> </html>

columna 2.Aqu el contenido de la 2.Aqu el contenido de la columna contenido de la columna 2.Aqu el de la columna 2.Aqu el contenido columna 2.Aqu el contenido de la 2.Aqu el contenido de la columna contenido de la columna 2.Aqu el de la columna 2.Aqu el contenido columna 2.Aqu el contenido de la 2.Aqu el contenido de la columna contenido de la columna 2.Aqu el de la columna 2.Aqu el contenido columna 2.Aqu el contenido de la 2.Aqu el contenido de la columna contenido de la columna 2.Aqu el de la columna 2.Aqu el contenido columna 2.Aqu el contenido de la 2.Aqu el contenido de la columna contenido de la columna 2.Aqu el de la columna 2.Aqu el contenido columna 2.Aqu el contenido de la 2.Aqu el contenido de la columna contenido de la columna 2.Aqu el de la columna 2.Aqu el contenido columna 2.Aqu el contenido de la 2.Aqu el contenido de la columna contenido de la columna 2.Aqu el de la columna 2.Aqu el contenido columna 2.Aqu el contenido de la 2.Aqu el contenido de la columna contenido de la columna 2.Aqu el de la columna 2.Aqu el contenido columna 2.Aqu el contenido de la 2.Aqu el contenido de la columna contenido de la columna 2.Aqu el de la columna 2.Aqu el contenido columna 2.Aqu el contenido de la 2.Aqu el contenido de la columna contenido de la columna 2.Aqu el de la columna 2.Aqu el contenido columna 2.Aqu el contenido de la 2.Aqu el contenido de la columna contenido de la columna 2.Aqu el de la columna 2.Aqu el contenido columna 2.Aqu el contenido de la 2.Aqu el contenido de la columna contenido de la columna 2.Aqu el de la columna 2.Aqu el contenido columna 2.Aqu el contenido de la 2.Aqu el contenido de la columna

columna 2.Aqu el contenido de la columna 2.Aqu el contenido de la columna 2.Aqu el contenido de la columna 2.Aqu el contenido de la columna 2.Aqu el contenido de la columna 2.Aqu el contenido de la columna 2.Aqu el contenido de la columna 2.Aqu el contenido de la columna 2.Aqu el contenido de la columna 2.Aqu el contenido de la columna 2.Aqu el contenido de la columna 2.Aqu el contenido de la columna 2.Aqu el

estilos.css
* { margin:0; padding:0; } #columna1 { float:left; width:200px; background-color:#ff5; border:1px solid #555;

Pgina 173

} #columna2 { margin-left:210px; background-color:#ffb; border:1px solid #555; }

Practica:
resuelto.

Disponga un men horizontal en la segunda columna del problema

41. Disposicin de 2 columnas, cabecera y pie.

Una estructura muy comn en la web es la disposicin de una cabecera de pgina, seguida de dos columnas y un pie de pgina. La implementacin de esta estructura de pgina es la siguiente:
<html> <head> <title>Problema</title> <link rel="StyleSheet" href="estilos.css" type="text/css"> </head> <body> <div id="contenedor"> <div id="cabecera"> <h1>Aca el ttulo de la pgina</h1> </div> <div id="columna1"> <p>columna1. columna1. columna1.</p> </div> <div id="columna2"> <h2>Ttulo de la columna</h2> <p>Contenido de la columna2. </p> </div> <div id="pie"> Pi de pgina. </div> </div> </body> </html>

La hoja de estilo definida para esta pgina es la siguiente:

* { margin:0px; padding:0px; } #contenedor { width:100%; margin:0px; border:1px solid #000; line-height:130%; background-color:#f2f2f2; } #cabecera { padding:10px; color:#fff; background-color:#becdfe; clear:left; } #columna1 { float:left;

Pgina 174

width:200px; margin:0; padding:1em; } #columna2 { margin-left:210px; border-left:1px solid #aaa; padding:1em; } #pie { padding:10px; color:#fff; background-color:#becdfe; clear:left; }

Hay algunas propiedades claves que debemos analizar en la regla #contenedor:

width:100%;

Con esto estamos indicando que siempre ocupe todo el espacio en ancho del navegador, indistintamente de la resolucin de pantalla o el tamao de ventana del navegador. Luego, tanto para la cabecera como para el pie, tenemos:
clear:left;

La propiedad clear hace que un elemento no tenga elementos flotantes a su lado. Eso es lo que queremos para la cabecera y el pie.

Ejemplo:

Crear una pgina que tenga una cabecera, luego 2 columnas y finalmente un pie de pgina. pagina1.html
<html> <head> <title>Problema</title> <link rel="StyleSheet" href="estilos.css" type="text/css"> </head> <body> <div id="contenedor"> <div id="cabecera"> <h1>Aca el ttulo de la pgina</h1> </div> <div id="columna1"> <p>columna1. columna1. columna1. columna1. columna1. columna1. columna1. columna1. columna1. columna1. columna1. columna1. columna1. columna1. columna1. columna1. columna1. columna1. columna1. columna1. columna1. columna1.</p> </div> <div id="columna2"> <h2>Ttulo de la columna</h2> <p>Contenido de la columna2. Contenido de la columna2. Contenido columna2. Contenido de la columna2. Contenido de la columna2. Contenido columna2. Contenido de la columna2. Contenido de la columna2. Contenido columna2. Contenido de la columna2. Contenido de la columna2. Contenido columna2. Contenido de la columna2. Contenido de la columna2. Contenido columna2. Contenido de la columna2. Contenido de la columna2. Contenido columna2. Contenido de la columna2. Contenido de la columna2. Contenido columna2. Contenido de la columna2. Contenido de la columna2. Contenido columna2. Contenido de la columna2. Contenido de la columna2. Contenido columna2. Contenido de la columna2. Contenido de la columna2. Contenido columna2. Contenido de la columna2. Contenido de la columna2. Contenido columna2. Contenido de la columna2. Contenido de la columna2. Contenido columna2. Contenido de la columna2. Contenido de la columna2. Contenido

de de de de de de de de de de de de de

la la la la la la la la la la la la la

Pgina 175

columna2. Contenido de la columna2. Contenido de la columna2. Contenido de la columna2. Contenido de la columna2. Contenido de la columna2.</p> </div> <div id="pie"> Pi de pgina. </div> </div> </body> </html>

estilos.css
* { margin:0px; padding:0px; } #contenedor { width:100%; margin:0px; border:1px solid #000; line-height:130%; background-color:#f2f2f2; } #cabecera { padding:10px; color:#fff; background-color:#becdfe; clear:left; } #columna1 { float:left; width:200px; margin:0; padding:1em; } #columna2 { margin-left:210px; border-left:1px solid #aaa; padding:1em; } #pie { padding:10px; color:#fff; background-color:#becdfe; clear:left; }

Practica: Codifique el problema visto anteriormente para mostrar dos columnas,

cabecera y pie de pgina. Luego asigne a la propiedad width, de la regla contenedor, el valor:
width:780px;

Cul es el resultado?

42. Disposicin de 3 columnas, cabecera y pie.

Una modificacin al concepto anterior nos permite agregar una tercera columna flotando a derecha, lo nico que hay que tener cuidado es que dentro del HTML

Pgina 176

debemos disponer los div de la columna 1 y 3 en primer lugar, ya que son los que se flotan, y por ltimo, la columna 2, que es la central:
<html> <head> <title>Problema</title> <link rel="StyleSheet" href="estilos.css" type="text/css"> </head> <body> <div id="contenedor"> <div id="cabecera"> <h1>Aca el ttulo de la pgina</h1> </div> <div id="columna1"> <p>columna1. </p> </div> <div id="columna3"> <p>columna3.</p> </div> <div id="columna2"> <h2>Ttulo de la columna</h2> <p>Contenido de la columna2.</p> </div> <div id="pie"> Pi de pgina. </div> </div> </body> </html>

La hoja de estilo es:

* { margin:0px; padding:0px; } #contenedor { width:100%; margin:0px; border:1px solid #000; line-height:130%; background-color:#f2f2f2; } #cabecera { padding:10px; color:#fff; background-color:#becdfe; clear:left; } #columna1 { float:left; width:200px; margin:0; padding:1em; } #columna2 { margin-left:210px; margin-right:230px; border-left:1px solid #aaa; border-right:1px solid #aaa; padding:1em; }

Pgina 177

#columna3 { float:right; width:200px; margin:0; padding:1em; } #pie { padding:10px; color:#fff; background-color:#becdfe; clear:left; }

Ejemplo: Crear una pgina con tres columnas, cabecera y pie de pgina.
pagina1.html
<html> <head> <title>Problema</title> <link rel="StyleSheet" href="estilos.css" type="text/css"> </head> <body> <div id="contenedor"> <div id="cabecera"> <h1>Aca el ttulo de la pgina</h1> </div> <div id="columna1"> <p>columna1. columna1. columna1. columna1. columna1. columna1. columna1. columna1. columna1. columna1. columna1. columna1. columna1. columna1. columna1. columna1. columna1. columna1. columna1. columna1. columna1. columna1.</p> </div> <div id="columna3"> <p>columna3. columna3. columna3. columna3. columna3. columna3. columna3. columna3. columna3. columna3. columna3. columna3. columna3. columna3. columna3. columna3. columna3. columna3. columna3. columna3. columna3. columna3. </p> </div> <div id="columna2"> <h2>Ttulo de la columna</h2> <p>Contenido de la columna2. Contenido de la columna2. Contenido de la columna2. Contenido de la columna2. Contenido de la columna2. Contenido de la columna2. Contenido de la columna2. Contenido de la columna2. Contenido de la columna2. Contenido de la columna2. Contenido de la columna2. Contenido de la columna2. Contenido de la columna2. Contenido de la columna2. Contenido de la columna2. Contenido de la columna2. Contenido de la columna2. Contenido de la columna2. Contenido de la columna2. Contenido de la columna2. Contenido de la columna2. Contenido de la columna2. Contenido de la columna2. Contenido de la columna2. Contenido de la columna2. Contenido de la columna2. Contenido de la columna2. Contenido de la columna2. Contenido de la columna2. Contenido de la columna2. Contenido de la columna2. Contenido de la columna2. Contenido de la columna2. Contenido de la columna2. Contenido de la columna2. Contenido de la columna2. Contenido de la columna2. Contenido de la columna2.</p> </div> <div id="pie"> Pi de pgina. </div> </div> </body> </html>

estilos.css
* { margin:0px; padding:0px;

Pgina 178

} #contenedor { width:100%; margin:0px; border:1px solid #000; line-height:130%; background-color:#f2f2f2; } #cabecera { padding:10px; color:#fff; background-color:#becdfe; clear:left; } #columna1 { float:left; width:200px; margin:0; padding:1em; } #columna2 { margin-left:210px; margin-right:230px; border-left:1px solid #aaa; border-right:1px solid #aaa; padding:1em; } #columna3 { float:right; width:200px; margin:0; padding:1em; } #pie { padding:10px; color:#fff; background-color:#becdfe; clear:left; }

Practica: Codifique nuevamente la sintaxis para disponer tres columnas, cabecera

y pie de pgina. Luego defina la propiedad width del contenedor con 780px. Disponga un men en la columna uno y otro en la columna tres.

Pgina 179

JavaScript JavaScript
1. Conceptos de Algoritmo, Programa y Lenguaje de Programacin.
Algoritmo: Son los pasos a seguir para resolver un problema. Programa: Conjunto de instrucciones que entiende un ordenador para realizar una actividad. Todo programa tiene un objetivo bien definido: un procesador de texto es un programa que permite cargar, modificar e imprimir textos, un programa de ajedrez permite jugar al ajedrez contra el ordenador u otro contrincante humano. La actividad fundamental del programador es resolver problemas empleando el ordenador como herramienta fundamental. Para la resolucin de un problema hay que plantear un algoritmo. Lenguaje de programacin: Conjunto de instrucciones que son interpretadas por una computadora para realizar operaciones, mostrar datos por pantalla, sacar listados por impresora, entrar datos por teclado, etc. Nosotros aprenderemos a programar utilizando el lenguaje de programacin JavaScript. Para desarrollar este curso no requerimos ningn conocimiento de otro lenguaje.

2.

Qu es JavaScript?

JavaScript, al igual que Flash, Visual Basic Script, es una de las mltiples maneras que han surgido para extender las capacidades del lenguaje HTML (lenguaje para el diseo de pginas de Internet). Al ser la ms sencilla, es por el momento la ms extendida. JavaScript no es un lenguaje de programacin propiamente dicho como C, C++, Delphi, etc. Es un lenguaje script u orientado a documento, como pueden ser los lenguajes de macros que tienen muchos procesadores de texto y planillas de clculo. No se puede desarrollar un programa con JavaScript que se ejecute fuera de un Navegador. JavaScript es un lenguaje interpretado que se embebe en una pgina web HTML. Un lenguaje interpretado significa que a las instrucciones las analiza y procesa el navegador en el momento que deben ser ejecutadas. Nuestro primer programa ser el famoso "Hola Mundo", es decir un programa que muestre en el documento HTML el mensaje "Hola Mundo".
<html> <head> </head> <body> <script language="javascript"> document.write('Hola Mundo'); </script> </body> </html>

Pgina 180

El programa en JavaScript debe ir encerrado entre la marca script e inicializada la propiedad languaje con la cadena javascript:
<script language="javascript"> </script>

Para imprimir caracteres sobre la pgina debemos llamar al comando 'write' del objeto document. La informacin a imprimirse debe ir entre comillas y encerrada entre parntesis. Todo lo que indicamos entre comillas aparecer tal cual dentro de la pgina HTML. Es decir, si pedimos al navegador que ejecute esta pgina mostrar el texto 'Hola Mundo'. Cada vez que escribimos una instruccin finalizamos con el caracter punto y coma. ES IMPORTANTISIMO TENER EN CUENTA QUE JavaScript es SENSIBLE A MAYUSCULAS Y MINUSCULAS. NO ES LO MISMO ESCRIBIR: document.write que DOCUMENT.WRITE (la primera forma es la correcta, la segunda forma provoca un error de sintaxis). Nos acostumbraremos a prestar atencin cada vez que escribamos en minsculas o maysculas para no cometer errores sintcticos. Ya veremos que los nombres de funciones llevan letras en maysculas.

Ejemplo:
pagina1.html
<html> <head> </head> <body> <script language="javascript"> document.write('Hola Mundo'); </script> </body> </html>

Practica:

Realizar un programa que muestre su nombre y su edad en una pgina HTML. Emplear el comando write del objeto document para imprimir. Tener en cuenta que si queremos que cada dato quede en una fila distinta de la pgina debemos insertar la marca <br> (salto de linea en HTML), es decir debemos disponer: document.write('<br>')

3.

Variables.

Una variable es un depsito donde hay un valor. Consta de un nombre y pertenece a un tipo (nmerico, cadena de caracteres, etc.). Tipos de variable: Una variable puede almacenar: Valores Enteros (100, 260, etc.) Valores Reales (1.24, 2.90, 5.00, etc.) Cadenas de caracteres ("Juan", "Compras", "Listado", etc.) Valores lgicos (true,false) Existen otros tipos de variables que veremos ms adelante.

Pgina 181

Las variables son nombres que ponemos a los lugares donde almacenamos la informacin. En JavaScript, deben comenzar por una letra o un subrayado (_), pudiendo haber adems dgitos entre los dems caracteres. Una variable no puede tener el mismo nombre de una palabra clave del lenguaje. Una variable se define anteponindole la palabra clave var: var dia; se pueden declarar varias variables en una misma lnea: var dia, mes, anio; a una variable se la puede definir e inmediatamente inicializarla con un valor: var edad=20; o en su defecto en dos pasos: var edad; edad=20; Eleccin del nombre de una variable: Debemos elegir nombres de variables representativos. En el ejemplo anterior los nombres dia, mes, anio son lo suficientemente claros para darnos una idea acabada sobre su contenido, una mala eleccin de nombres hubiera sido llamarlas a,b y c. Podemos darle otros buenos nombres. Otros no son tan representativos, por ejemplo d, m, a. Posiblemente cuando estemos resolviendo un problema dicho nombre nos recuerde que almacenamos el dia, pero pasado un tiempo lo olvidaramos. Impresin de variables en una pgina HTML. Para mostrar el contenido de una variable en una pgina utilizamos el objeto document y llamamos a la funcin write. En el siguiente ejemplo definimos una serie de variables y las mostramos en la pgina:
<html> <head> </head> <body> <script language="JavaScript"> var nombre='Juan'; var edad=10; var altura=1.92; var casado=false; document.write(nombre); document.write('<br>'); document.write(edad); document.write('<br>'); document.write(altura); document.write('<br>'); document.write(casado); </script> </body> </html>

Cuando imprimimos una variable, no la debemos disponer entre simples comillas (en caso de hacer esto, aparecer el nombre de la variable y no su contenido). Los valores de las variables que almacenan nombres (es decir, son cadenas de caracteres) deben ir encerradas entre comillas simples. Los valores de las variables enteras (en este ejemplo la variable edad) y reales no deben ir encerradas entre comillas. Cada instruccin finaliza con un punto y coma. Las variables de tipo boolean pueden almacenar solo dos valores: true o false. El resultado al visualizar la pgina debe ser 4 lneas similares a stas: Juan

Pgina 182

10 1.92 False Es decir que se muestran los contenidos de las 4 variables. Una variable es de un tipo determinado cuando le asignamos un valor:
var edad=10;

Es de tipo entera ya que le asignamos un valor entero.

var nombre='juan';

Es de tipo cadena. Para mostrar el contenido de una variable en una pgina debemos utilizar la funcin 'write' que pertenece al objeto document. Recordemos que el lenguaje JavaScript es sensible a maysculas y minsculas y no ser lo mismo si tipeamos: Document.Write(nombre); Esto porque no existe el objeto 'Document' sino el objeto 'document' (con d minscula), lo mismo no existe la funcin 'Write' sino 'write', este es un error muy comn cuando comenzamos a programar en JavaScript

Ejemplo:
<html> <head> </head> <body> <script language="JavaScript"> var nombre="Juan"; var edad=10; var altura=1.92; var casado=false; document.write(nombre); document.write('<br>'); document.write(edad); document.write('<br>'); document.write(altura); document.write('<br>'); document.write(casado); </script> </body> </html>

Practica:

Confeccionar una programa en JavaScript que defina e inicialice una variable real donde almacenar el sueldo de un operario y otra de tipo cadena de caracteres donde almacenaremos el nombre. Imprimir cada variable en una lnea distinta en pantalla.

4.

Entrada de datos por teclado.

Para la entrada de datos por teclado tenemos la funcin prompt. Cada vez que necesitamos ingresar un dato con esta funcin, aparece una ventana donde cargamos el valor. Hay otras formas ms sofisticadas para la entrada de datos en una pgina HTML, pero para el aprendizaje de los conceptos bsicos de JavaScript nos resultar ms prctica esta funcin. Para ver su funcionamiento analicemos este ejemplo:
<html>

Pgina 183

<head> </head> <body> <script language="JavaScript"> var nombre; var edad; nombre=prompt('Ingrese su nombre:',''); edad=prompt('Ingrese su edad:',''); document.write('Hola '); document.write(nombre); document.write(' asi que tienes '); document.write(edad); document.write(' aos'); </script> </body> </html>

La sintaxis de la funcin prompt es:

<variable que recibe el dato>=prompt(<mensaje a mostrar en la ventana>,<valor inicial a mostrar en la ventana>);

La funcin prompt tiene dos parmetros: uno es el mensaje y el otro el valor incial a mostrar.

Ejemplo:
<html> <head> </head> <body> <script language="JavaScript"> var nombre; var edad; nombre=prompt('Ingrese su nombre:',''); edad=prompt('Ingrese su edad:',''); document.write('Hola '); document.write(nombre); document.write(' asi que tienes '); document.write(edad); document.write(' aos'); </script> </body> </html>

Practica: Confeccionar un programa que permita cargar el nombre de un usuario y

su mail por teclado. Mostrar posteriormente los datos en la pgina HTML.

5.

Estructuras secuenciales de programacin.

Cuando en un problema slo participan operaciones, entradas y salidas se la denomina estructura secuencial. El problema anterior, donde se ingresa el nombre de una persona y su edad se trata de una estructura secuencial. Ejemplo de otro algoritmo con estructura secuencial: Realizar la carga de dos nmeros por teclado e imprimir su suma y su producto:
<html> <head> <script language="JavaScript"> var valor1; var valor2; valor1=prompt('Ingrese primer nmero:','');

Pgina 184

valor2=prompt('Ingrese segundo nmero',''); var suma=parseInt(valor1)+parseInt(valor2); var producto=valor1*valor2; document.write('La suma es '); document.write(suma); document.write('<br>'); document.write('El producto es '); document.write(producto); </script> </head> <body> </body> </html>

Lo primero que debemos tener en cuenta es que si queremos que el operador + sume los contenidos de los valores numricos ingresados por teclado, debemos llamar a la funcin parseInt y pasarle como parmetro las variables valor1 y valor2 sucesivamente. Con esto logramos que el operador ms, sume las variables como enteros y no como cadenas de caracteres. Si por ejemplo sumamos 1 + 1 sin utilizar la funcin parseInt el resultado ser 11 en lugar de 2, ya que el operador + concatena las dos cadenas. Cuando empleamos el operador * para el producto, ya no es obligatorio utilizar la funcin parseInt (es decir, slo para el operador + debemos utilizarla). En JavaScript, como no podemos indicarle de qu tipo es la variable, requiere mucho ms cuidado cuando operamos con sus contenidos. Este problema es secuencial ya que ingresamos dos valores por teclado, luego hacemos dos operaciones y por ltimo mostramos los resultados.

Ejemplo:
<html> <head> <script language="JavaScript"> var valor1; var valor2; valor1=prompt('Ingrese primer nmero:',''); valor2=prompt('Ingrese segundo nmero',''); var suma=parseInt(valor1)+parseInt(valor2); var producto=valor1*valor2; document.write('La suma es '); document.write(suma); document.write('<br>'); document.write('El producto es '); document.write(producto); </script> </head> <body> </body> </html>

Practica:

Es de fundamental importancia realizar los programas. Viendo slo los problemas resueltos en este curso de estudio no alcanza para convertirse en un programador de aplicaciones. PROBLEMAS 1 - Realizar la carga del lado de un cuadrado, mostrar por pantalla el permetro del mismo (El permetro de un cuadrado se calcula multiplicando el valor del lado por cuatro). 2 - Escribir un programa en el cual se ingresen cuatro nmeros, calcular e informar la

Pgina 185

suma de los dos primeros y el producto del tercero y el cuarto. 3 - Realizar un programa que lea cuatro valores numricos e informar su suma y producto. 4 - Se debe desarrollar un programa que pida el ingreso del precio de un artculo y la cantidad que lleva el cliente. Mostrar lo que debe abonar el comprador.

6.

Estructuras condicionales simples.

No todos los problemas pueden resolverse empleando estructuras secuenciales. Cuando hay que tomar una decisin aparecen las estructuras condicionales. En nuestra vida diaria se nos presentan situaciones donde debemos decidir. Elijo la carrera A o la carrera B ? Me pongo este pantaln ? Entro al sitio A o al sitio B ? Para ir al trabajo, elijo el camino A o el camino B ? Al cursar una carrera, elijo el turno maana, tarde o noche ? Por supuesto que en un problema se combinan estructuras secuenciales y condicionales. Cuando se presenta la eleccin tenemos la opcin de realizar una actividad o no realizarla. En una estructura CONDICIONAL SIMPLE por el camino del verdadero hay actividades y por el camino del falso no hay actividades. Por el camino del verdadero pueden existir varias operaciones, entradas y salidas, inclusive ya veremos que puede haber otras estructuras condicionales. Ejemplo: Realizar la carga de una nota de un alumno. Mostrar un mensaje que aprob si tiene una nota mayor o igual a 4:
<html> <head> </head> <body> <script language="javascript"> var nombre; var nota; nombre=prompt('Ingrese nombre:',''); nota=prompt('Ingrese su nota:',''); if (nota>=4) { document.write(nombre+' esta aprobado con un '+nota); } </script> </body> </html>

Aparece la instruccin if en el lenguaje JavaScript. La condicin debe ir entre parntesis. Si la condicin se verifica verdadera se ejecuta todas las instrucciones que se encuentran encerradas entre las llaves de apertura y cerrado seguidas al if. Para disponer condiciones en un if podemos utilizar alguno de los siguientes operadores relacionales:
> >= < <= != mayor mayor o igual menor menor o igual distinto

Pgina 186

== igual

Siempre debemos tener en cuenta que en la condicin del if deben intervenir una variable un operador relacional y otra variable o valor fijo. Otra cosa que hemos incorporado es el operador + para cadenas de caracteres:
document.write(nombre+' esta aprobado con un '+nota);

Con esto hacemos ms corto la cantidad de lneas de nuestro programa, recordemos que venamos hacindolo de la siguiente forma:
document.write(nombre); document.write(' esta aprobado con un '); document.write(nota);

Ejemplo:
<html> <head> </head> <body> <script language="javascript"> var nombre; var nota; nombre=prompt('Ingrese nombre:',''); nota=prompt('Ingrese su nota:',''); if (nota>=4) { document.write(nombre+' esta aprobado con un '+nota); } </script> </body> </html>

Practica:
PROBLEMAS 1 - Se ingresan tres notas de un alumno, si el promedio es mayor o igual a siete mostrar el mensaje 'Promocionado'. Tener en cuenta que para obtener el promedio debemos operar suma=nota1+nota2+nota3; y luego hacer promedio=suma/3; 2 - Solicitar que se ingrese dos veces una clave. Mostrar un mensaje si son iguales (tener en cuenta que para ver si dos variables tienen el mismo valor almacenado debemos utilizar el operador ==).

7.

Estructuras condicionales compuestas.

Cuando se presenta la eleccin tenemos la opcin de realizar una actividad u otra. Es decir tenemos actividades por el verdadero y por el falso de la condicin. Lo ms importante que hay que tener en cuenta es que se realizan las actividades de la rama del verdadero o las del falso, NUNCA se realizan las actividades de las dos ramas. En una estructura condicional compuesta tenemos entradas, salidas, operaciones, tanto por la rama del verdadero como por la rama del falso.

Ejemplo: Realizar un programa que lea dos nmeros distintos y muestre el mayor
de ellos:
<html> <head> </head>

Pgina 187

<body> <script language="javascript"> var num1,num2; num1=prompt('Ingrese el primer nmero:',''); num2=prompt('Ingrese el segundo nmero:',''); num1=parseInt(num1); num2=parseInt(num2); if (num1>num2) { document.write('el mayor es '+num1); } else { document.write('el mayor es '+num2); } </script> </body> </html>

La funcin prompt retorna un string por lo que debemos convertirlo a entero cuando queremos saber cual de los dos valores es mayor numricamente. En el lenguaje JavaScript una variable puede ir cambiando el tipo de dato que almacena a lo largo de la ejecucin del programa. Ms adelante veremos qu sucede cuando preguntamos cul de dos string es mayor. Estamos en presencia de una ESTRUCTURA CONDICIONAL COMPUESTA ya que tenemos actividades por la rama del verdadero y del falso. La estructura condicional compuesta tiene la siguiente codificacin:
if (<condicin>) { <Instruccion(es)> } else { <Instruccion(es)> }

Es igual que la estructura condicional simple salvo que aparece la palabra clave else y posteriormente un bloque { } con una o varias instrucciones. Si la condicin del if es verdadera se ejecuta el bloque que aparece despus de la condicin, en caso que la condicin resulte falsa se ejecuta la instruccin o bloque de instrucciones que indicamos despus del else.

Ejemplo:
<html> <head> </head> <body> <script language="javascript"> var num1,num2; num1=prompt('Ingrese el primer nmero:',''); num2=prompt('Ingrese el segundo nmero:',''); num1=parseInt(num1); num2=parseInt(num2); if (num1>num2) { document.write('el mayor es '+num1); } else { document.write('el mayor es '+num2);

Pgina 188

} </script> </body> </html>

Practica:
PROBLEMAS 1 - Realizar un programa que lea por teclado dos nmeros, si el primero es mayor al segundo informar su suma y diferencia, en caso contrario informar el producto y la divisin del primero respecto al segundo. 2 - Se ingresan tres notas de un alumno, si el promedio es mayor o igual a 4 mostrar un mensaje 'regular', sino 'reprobado'. 3 - Se ingresa por teclado un nmero positivo de uno o dos dgitos (1..99) mostrar un mensaje indicando si el nmero tiene uno o dos dgitos (recordar de convertir a entero con parseInt para preguntar posteriormente por una variable entera).Tener en cuenta qu condicin debe cumplirse para tener dos dgitos, un nmero entero.

8.

Estructuras condicionales anidadas.

Decimos que una estructura condicional es anidada cuando por la rama del verdadero o el falso de una estructura condicional hay otra estructura condicional. Ejemplo: Confeccionar un programa que pida por teclado tres notas de un alumno, calcule el promedio e imprima alguno de estos mensajes: Si el promedio es >=7 mostrar "Promocionado". Si el promedio es >=4 y <7 mostrar "Regular". Si el promedio es <4 mostrar "Reprobado". Solucin:
<html> <head> </head> <body> <script language="javascript"> var nota1,nota2,nota3; nota1=prompt('Ingrese 1ra. nota:',''); nota2=prompt('Ingrese 2da. nota:',''); nota3=prompt('Ingrese 3ra. nota:',''); //Convertimos los 3 string en enteros nota1=parseInt(nota1); nota2=parseInt(nota2); nota3=parseInt(nota3); var pro; pro=(nota1+nota2+nota3)/3; if (pro>=7) { document.write('promocionado'); } else { if (pro>=4) { document.write('regular'); } else { document.write('reprobado'); }

Pgina 189

} </script> </body> </html>

Analicemos el siguiente programa. Se ingresan tres string por teclado que representan las notas de un alumno, se transformas a variables enteras y se obtiene el promedio sumando los tres valores y dividiendo por 3 dicho resultado. Primeramente preguntamos si el promedio es superior o igual a 7, en caso afirmativo por la rama del verdadero de la estructura condicional mostramos un mensaje que indique 'Promocionado' (con comillas indicamos un texto que debe imprimirse en pantalla). En caso que la condicin nos de falso, por la rama del falso aparece otra estructura condicional, porque todava debemos averiguar si el promedio del alumno es superior/ igual a cuatro o inferior a cuatro. Los comentarios en JavaScript los hacemos disponiendo dos barras previas al comentario:
//Convertimos los 3 string en enteros

Si queremos disponer varias lneas de comentarios tenemos como alternativa:

/* linea de comentario 1. linea de comentario 2. etc. */

Es decir encerramos el bloque con los caracteres /* */

Ejemplo:
<html> <head> </head> <body> <script language="javascript"> var nota1,nota2,nota3; nota1=prompt('Ingrese 1ra. nota:',''); nota2=prompt('Ingrese 2da. nota:',''); nota3=prompt('Ingrese 3ra. nota:',''); //Convertimos los 3 string en enteros nota1=parseInt(nota1); nota2=parseInt(nota2); nota3=parseInt(nota3); var pro; pro=(nota1+nota2+nota3)/3; if (pro>=7) { document.write('promocionado'); } else { if (pro>=4) { document.write('regular'); } else { document.write('reprobado'); } } </script> </body> </html>

Pgina 190

Practica:
PROBLEMAS 1 - Se cargan por teclado tres nmeros distintos. Mostrar por pantalla el mayor de ellos. 2 - Se ingresa por teclado un valor entero, mostrar una leyenda que indique si el nmero es positivo, cero o negativo. 3 - Confeccionar un programa que permita cargar un nmero entero positivo de hasta tres cifras y muestre un mensaje indicando si tiene 1, 2, 3 cifras. Mostrar un mensaje de error si el nmero de cifras no es 1, 2 3. 4 - De un postulante a un empleo, que realiz un test de capacitacin, se obtuvo la siguiente informacin: nombre del postulante, cantidad total de preguntas que se le realizaron y cantidad de preguntas que contest correctamente. Se pide confeccionar un programa que lea los datos del postulante e informe el nivel del mismo segn el porcentaje de respuestas correctas que ha obtenido, y sabiendo que: Nivel superior: Porcentaje>=90%. Nivel medio: Porcentaje>=75% y <90%. Nivel regular: Porcentaje>=50% y <75%. Fuera de nivel: Porcentaje<50%.

9. Operadores lgicos && (y) en las estructuras condicionales.

El operador &&, traducido se lo lee como "Y". Se emplea cuando en una estructura condicional se disponen dos condiciones. Cuando vinculamos dos o ms condiciones con el operador "&&" las dos condiciones deben ser verdaderas para que el resultado de la condicin compuesta de Verdadero y contine por la rama del verdadero de la estructura condicional. Recordemos que la condicin debe ir entre parntesis en forma obligatoria. La utilizacin de operadores lgicos permiten en muchos casos, plantear algoritmos ms cortos y comprensibles. Veamos un ejemplo: Confeccionar un programa que lea por teclado tres nmeros distintos y nos muestre el mayor de ellos.
<html> <head> </head> <body> <script language="javascript"> var num1,num2,num3; num1=prompt('Ingrese primer nmero:',''); num2=prompt('Ingrese segundo nmero:',''); num3=prompt('Ingrese tercer nmero:',''); num1=parseInt(num1); num2=parseInt(num2); num3=parseInt(num3); if (num1>num2 && num1>num3) { document.write('el mayor es el '+num1); } else {

Pgina 191

if (num2>num3) { document.write('el mayor es el '+num2); } else { document.write('el mayor es el '+num3); } } </script> </body> </html>

Podemos leerla de la siguiente forma: Si el contenido de la variable num1 es mayor al contenido de la variable num2 Y si el contenido de la variable num1 es mayor al contenido de la variable num3 entonces la CONDICION COMPUESTA resulta Verdadera. Si una de las condiciones simples da falso, la CONDICION COMPUESTA da Falso y contina por la rama del falso. Es decir que se mostrar el contenido de num1 si y slo si num1>num2 y num1>num3. En caso de ser Falsa la condicin de la rama del falso, analizamos el contenido de num2 y num3 para ver cual tiene un valor mayor. En esta segunda estructura condicional, al haber una condicin simple, no se requieren operadores lgicos.

Ejemplo:
<html> <head> </head> <body> <script language="javascript"> var num1,num2,num3; num1=prompt('Ingrese primer nmero:',''); num2=prompt('Ingrese segundo nmero:',''); num3=prompt('Ingrese tercer nmero:',''); num1=parseInt(num1); num2=parseInt(num2); num3=parseInt(num3); if (num1>num2 && num1>num3) { document.write('el mayor es el '+num1); } else { if (num2>num3) { document.write('el mayor es el '+num2); } else { document.write('el mayor es el '+num3); } } </script> </body> </html>

Pgina 192

Practica:
PROBLEMAS 1 - Realizar un programa que pida cargar una fecha cualquiera, luego verificar si dicha fecha corresponde a Navidad. 2 - Se ingresan tres valores por teclado, si todos son iguales se imprime la suma del primero con el segundo y a este resultado se lo multiplica por el tercero (tener en cuenta que puede haber tres condiciones simples) 3 - Se ingresan por teclado tres nmeros, si todos los valores ingresados son menores a 10, imprimir en la pgina la leyenda ' Todos los nmeros son menores a diez'. 4 - Escribir un programa que pida ingresar la coordenada de un punto en el plano, es decir dos valores enteros x e y. Posteriormente imprimir en pantalla en qu cuadrante se ubica dicho punto. (1 Cuadrante si x > 0 Y y > 0 , 2 Cuadrante: x < 0 Y y > 0, etc.) 5 - De un operario se conoce su sueldo y los aos de antigedad. Se pide confeccionar un programa que lea los datos de entrada e informe a) Si el sueldo es inferior a 500 y su antigedad es igual o superior a 10 aos, otorgarle un aumento del 20 %, mostrar el sueldo a pagar. b) Si el sueldo es inferior a 500 pero su antigedad es menor a 10 aos, otorgarle un aumento de 5 %. c) Si el sueldo es mayor o igual a 500 mostrar el sueldo en la pgina sin cambios.

10. Operadores lgicos || (o) en las estructuras condicionales.

Traducido se lo lee como "O". Si la condicin 1 es Verdadera o la condicin 2 es Verdadera, luego ejecutar la rama del Verdadero. Cuando vinculamos dos o ms condiciones con el operador "O", con que una de las dos condiciones sea Verdadera alcanza para que el resultado de la condicin compuesta sea Verdadero.

Ejemplo: Se carga una fecha (da, mes y ao) por teclado. Mostrar un mensaje si
corresponde al primer trimestre del ao (enero, febrero o marzo). Cargar por teclado el valor numrico del da, mes y ao por separado.
<html> <head> </head> <body> <script language="javascript"> var dia,mes,ao; dia=prompt('Ingrese da:',''); mes=prompt('Ingrese mes:',''); ao=prompt('Ingrese ao:',''); dia=parseInt(dia); mes=parseInt(mes); ao=parseInt(ao); if (mes==1 || mes==2 || mes==3) { document.write('corresponde al primer trimestre del ao.'); } </script> </body>

Pgina 193

</html>

La carga de una fecha se hace por partes, ingresamos las variables dia, mes y ao.

Ejemplo:
<html> <head> </head> <body> <script language="javascript"> var dia,mes,ao; dia=prompt('Ingrese da:',''); mes=prompt('Ingrese mes:',''); ao=prompt('Ingrese ao:',''); dia=parseInt(dia); mes=parseInt(mes); ao=parseInt(ao); if (mes==1 || mes==2 || mes==3) { document.write('corresponde al primer trimestre del ao.'); } </script> </body> </html>

Practica: Se ingresan por teclado tres nmeros, si todos los valores ingresados son
menores a 10, imprimir en la pgina la leyenda 'Todos los nmeros son menores a diez'.

11. Estructuras switch.

La instruccin switch es una alternativa para remplazar los if/else if. De todos modos se puede aplicar en ciertas situaciones donde la condicin se verifica si es igual a cierto valor. No podemos preguntar por mayor o menor. Con un ejemplo sencillo veremos cual es su sintaxis. Confeccionar un programa que solicite que ingrese un valor entre 1 y 5. Luego mostrar en castellano el valor ingresado. Mostrar un mensaje de error en caso de haber ingresado un valor que no se encuentre en dicho rango.
<html> <head> </head> <body> <script language="javascript"> var valor; valor=prompt('Ingrese un valor comprendido entre 1 y 5:',''); //Convertimos a entero valor=parseInt(valor); switch (valor) { case 1: document.write('uno'); break; case 2: document.write('dos'); break; case 3: document.write('tres'); break; case 4: document.write('cuatro'); break; case 5: document.write('cinco'); break; default:document.write('debe ingresar un valor comprendido entre 1 y 5.');

Pgina 194

} </script> <A href="pagina2.html">Ver segundo problema</a> </body> </html>

Debemos tener en cuenta que la variable que analizamos debe ir despus de la instruccin switch entre parntesis. Cada valor que se analiza debe ir luego de la palabra clave 'case' y seguido a los dos puntos, las instrucciones a ejecutar, en caso de verificar dicho valor la variable que analiza el switch. Es importante disponer la palabra clave 'break' al finalizar cada caso. La instrucciones que hay despus de la palabra clave 'default' se ejecutan en caso que la variable no se verifique en algn case. De todos modos el default es opcional en esta instruccin. Plantearemos un segundo problema para ver que podemos utilizar variables de tipo cadena con la instruccin switch. Ingresar por teclado el nombre de un color (rojo, verde o azul), luego pintar el fondo de la ventana con dicho color:
<html> <head> </head> <body> <script language="javascript"> var col; col=prompt('Ingrese el color con que se quiere pintar el fondo de la ventana (rojo, verde, azul)' ,''); switch (col) { case 'rojo': document.bgColor='#ff0000'; break; case 'verde': document.bgColor='#00ff00'; break; case 'azul': document.bgColor='#0000ff'; break; } </script> </body> </html>

Cuando verificamos cadenas debemos encerrarlas entre comillas el valor a analizar:

case 'rojo': document.bgColor='#ff0000'; break;

Para cambiar el color de fondo de la ventana debemos asignarle a la propiedad bgColor del objeto document el color a asignar (el color est formado por tres valores hexadecimales que representan la cantidad de rojo, verde y azul), en este caso al valor de rojo le asignamos ff (255 en decimal) es decir el valor mximo posible, luego 00 para verde y azul (podemos utilizar algn software de graficacin para que nos genere los tres valores).

Ejemplo:
Pagina1.html
<html> <head> </head> <body> <script language="javascript"> var valor; valor=prompt('Ingrese un valor comprendido entre 1 y 5:',''); //Convertimos a entero valor=parseInt(valor);

Pgina 195

switch (valor) { case 1: document.write('uno'); break; case 2: document.write('dos'); break; case 3: document.write('tres'); break; case 4: document.write('cuatro'); break; case 5: document.write('cinco'); break; default:document.write('debe ingresar un valor comprendido entre 1 y 5.'); } </script> <br> <A href="pagina2.html">Ver segundo problema</a> </body> </html>

Pagina2.html
<html> <head> </head> <body> <script language="javascript"> var col; col=prompt('Ingrese el color con que se quiere pintar el fondo de la ventana (rojo, verde, azul)',''); switch (col) { case 'rojo': document.bgColor='#ff0000'; break; case 'verde': document.bgColor='#00ff00'; break; case 'azul': document.bgColor='#0000ff'; break; } </script> </body> </html>

Practica:

Solicitar el ingreso alguna de estas palabras (casa, mesa, perro, gato) luego mostrar la palabra traducida en ingls. Es decir, si se ingresa 'casa' debemos mostrar el texto 'house' en la pgina.

12. Estructura repetitiva (while)

Hasta ahora hemos empleado estructuras SECUENCIALES y CONDICIONALES. Existe otro tipo de estructuras tan importantes como las anteriores que son las estructuras REPETITIVAS. Una estructura repetitiva permite ejecutar una instruccin o un conjunto de instrucciones varias veces. Una ejecucin repetitiva de sentencias se caracteriza por: - La o las sentencias que se repiten. - El test o prueba de condicin antes de cada repeticin, que motivar que se repitan o no las sentencias. Funcionamiento del while: En primer lugar se verifica la condicin, si la misma resulta verdadera se ejecutan las operaciones que indicamos entre las llaves que le siguen al while.

Pgina 196

En caso que la condicin sea Falsa continua con la instruccin siguiente al bloque de llaves. El bloque se repite MIENTRAS la condicin sea Verdadera. Importante: Si la condicin siempre retorna verdadero estamos en presencia de un ciclo repetitivo infinito. Dicha situacin es un error de programacin, nunca finalizar el programa.

Ejemplo: Realizar un programa que imprima en pantalla los nmeros del 1 al 100.
Sin conocer las estructuras repetitivas podemos resolver el problema empleando una estructura secuencial. Inicializamos una variable con el valor 1, luego imprimimos la variable, incrementamos nuevamente la variable y as sucesivamente.
<html> <head> </head> <body> <script language="javascript"> var x; x=1; while (x<=100) { document.write(x); document.write('<br>'); x=x+1; } </script> </body> </html>

Para que se impriman los nmeros, uno en cada lnea, agregamos la marca HTML de <br>. Es muy importante analizar este programa: La primera operacin inicializa la variable x en 1, seguidamente comienza la estructura repetitiva while y disponemos la siguiente condicin ( x <= 100), se lee MIENTRAS la variable x sea menor o igual a 100. Al ejecutarse la condicin, retorna VERDADERO, porque el contenido de x (1) es menor o igual a 100. Al ser la condicin verdadera se ejecuta el bloque de instrucciones que contiene la estructura while. El bloque de instrucciones contiene dos salidas al documento y una operacin. Se imprime el contenido de x y seguidamente se incrementa la variable x en uno. La operacin x = x + 1 se lee como "en la variable x se guarda el contenido de x ms 1". Es decir, si x contiene 1 luego de ejecutarse esta operacin se almacenar en x un 2. Al finalizar el bloque de instrucciones que contiene la estructura repetitiva, se verifica nuevamente la condicin de la estructura repetitiva y se repite el proceso explicado anteriormente. Mientras la condicin retorne verdadero, se ejecuta el bloque de instrucciones; al retornar falso la verificacin de la condicin, se sale de la estructura repetitiva y contina el algoritmo, en este caso, finaliza el programa. Lo ms difcil es la definicin de la condicin de la estructura while y qu bloque de instrucciones se va a repetir. Observar que si, por ejemplo, disponemos la condicin x >=100 ( si x es mayor o igual a 100) no provoca ningn error sintctico pero estamos en presencia de un error lgico porque al evaluarse por primera vez la condicin retorna falso y no se ejecuta el bloque de instrucciones que queramos repetir 100 veces.

Pgina 197

No existe una RECETA para definir una condicin de una estructura repetitiva, sino que se logra con una prctica continua, solucionando problemas. Una vez planteado el programa debemos verificar si el mismo es una solucin vlida al problema (en este caso se deben imprimir los nmeros del 1 al 100 en la pgina), para ello podemos hacer un seguimiento del flujo del diagrama y los valores que toman las variables a lo largo de la ejecucin:
x 1 2 3 4 . . 100 101

Cuando x vale 101 la condicin de la estructura repetitiva retorna falso, en este caso finaliza el diagrama.

La variable x recibe el nombre de CONTADOR. Un contador es un tipo especial de variable que se incrementa o decrementa con valores constantes durante la ejecucin del programa. El contador x nos indica en cada momento la cantidad de valores impresos en la pgina. Importante: Podemos observar que el bloque repetitivo puede no ejecutarse si la condicin retorna falso la primera vez. La variable x debe estar inicializada con algn valor antes que se ejecute la operacin x = x + 1. Probemos algunas modificaciones de este programa y veamos qu cambios se deberan hacer para: 1 - Imprimir los nmeros del 1 al 500. 2 - Imprimir los nmeros del 50 al 100. 3 - Imprimir los nmeros del -50 al 0. 4 - Imprimir los nmeros del 2 al 100 pero de 2 en 2 (2,4,6,8 ....100).

Ejemplo:
<html> <head> </head> <body> <script language="javascript"> var x; x=1; while (x<=100) { document.write(x); document.write('<br>'); x=x+1; } </script> </body> </html>

Practica:
PROBLEMAS 1 - Realizar un programa que imprima 25 trminos de la serie 11 - 22 - 33 - 44, etc. (No se ingresan valores por teclado).

Pgina 198

2 - Mostrar los mltiplos de 8 hasta el valor 500. Debe aparecer en pantalla 8 -16 -24, etc.

13. Concepto de acumulador.

Explicaremos el concepto de un acumulador con un ejemplo. Problema: Desarrollar un programa que permita la carga de 5 valores por teclado y nos muestre posteriormente la suma.
<html> <head> </head> <body> <script language="javascript"> var x=1; var suma=0; var valor; while (x<=5) { valor=prompt('Ingrese valor:',''); valor=parseInt(valor); suma=suma+valor; x=x+1; } document.write("La suma de los valores es "+suma+"<br>"); </script> </body> </html>

En este problema, a semejanza de los anteriores, llevamos un CONTADOR llamado x que nos sirve para contar las vueltas que debe repetir el while. Tambin aparece el concepto de ACUMULADOR (un acumulador es un tipo especial de variable que se incrementa o decrementa con valores variables durante la ejecucin del programa). Hemos dado el nombre de suma a nuestro acumulador. Cada ciclo que se repita la estructura repetitiva, la variable suma se incrementa con el contenido ingresado en la variable valor. La prueba del diagrama se realiza dndole valores a las variables:
valor suma x 0 0 (Antes de entrar a la estructura repetitiva estos son los valores). 5 5 1 16 21 2 7 28 3 10 38 4 2 40 5

Este es un seguimiento del programa planteado. Los nmeros que toma la variable valor depender de qu cifras cargue el operador durante la ejecucin del programa. Hay que tener en cuenta que cuando en la variable valor se carga el primer valor (en este ejemplo es el valor 5), al cargarse el segundo valor (16), el valor anterior 5 se pierde, por ello la necesidad de ir almacenando en la variable suma los valores ingresados.

Ejemplo:
<html> <head>

Pgina 199

</head> <body> <script language="javascript"> var x=1; var suma=0; var valor; while (x<=5) { valor=prompt('Ingrese valor:',''); valor=parseInt(valor); suma=suma+valor; x=x+1; } document.write("La suma de los valores es "+suma+"<br>"); </script> </body> </html>

Practica:
PROBLEMAS Ha llegado la parte fundamental, que es el momento donde uno desarrolla individualmente un algoritmo para la resolucin de problemas. El tiempo a dedicar a esta seccin EJERCICIOS PROPUESTOS debe ser mucho mayor que el empleado al ver EJERCICIOS RESUELTOS. La experiencia dice que debemos dedicar el 80 % del tiempo a la resolucin individual de problemas y el otro 20 % al anlisis y codificacin de problemas ya resueltos por otras personas. Es de vital importancia para llegar a ser un buen PROGRAMADOR poder resolver problemas en forma individual. 1 - Escribir un programa que lea 10 notas de alumnos y nos informe cuntos tienen notas mayores o iguales a 7 y cuntos menores. 2 - Se ingresan un conjunto de 5 alturas de personas por teclado. Mostrar la altura promedio de las personas. 3 - En una empresa trabajan 5 empleados cuyos sueldos oscilan entre $100 y $500, realizar un programa que lea los sueldos que cobra cada empleado e informe cuntos empleados cobran entre $100 y $300 y cuntos cobran ms de $300. Adems el programa deber informar el importe que gasta la empresa en sueldos al personal. 4 - Realizar un programa que imprima 20 trminos de la serie 5 - 10 - 15 - 20, etc. (No se ingresan valores por teclado). 5 - Mostrar los mltiplos de 10 hasta el valor 1500. Debe aparecer en pantalla 10 - 20 -30 etc. 6 - Realizar un programa que permita cargar dos listas de 3 valores cada una. Informar con un mensaje cual de las dos listas tiene un valor acumulado mayor (mensajes 'Lista 1 mayor', 'Lista 2 mayor', 'Listas iguales') Tener en cuenta que puede haber dos o ms estructuras repetitivas en un algoritmo. 7 - Desarrollar un programa que permita cargar 5 nmeros enteros y luego nos informe cuntos valores fueron pares y cuntos impares. Emplear el operador "%" en la condicin de la estructura condicional. if (valor%2==0) El operador "%" retorna el resto de la divisin valor / 2. Por ejemplo: 12 % 2, retorna 0; 13 % 2, retorna 1, porque el resto de dividir 13 en 2 es 1.

Pgina 200

14. Estructura repetitiva (do/while)

La sentencia do/while es otra estructura repetitiva, la cual ejecuta al menos una vez su bloque repetitivo, a diferencia del while que puede no ejecutar el bloque. Esta estructura repetitiva se utiliza cuando conocemos de antemano que por lo menos una vez se ejecutar el bloque repetitivo. La condicin de la estructura est abajo del bloque a repetir, a diferencia del while que est en la parte superior. Finaliza la ejecucin del bloque repetitivo cuando la condicin retorna falso, es decir igual que el while.

Ejemplo: Escribir un programa que solicite la carga de un nmero entre 0 y 999, y

nos muestre un mensaje de cuntos dgitos tiene el mismo. Finalizar el programa cuando se cargue el valor 0.
<html> <head> </head> <body> <script language="javascript"> var valor; do { valor=prompt('Ingrese un valor entre 0 y 999:',''); valor=parseInt(valor); document.write('El valor '+valor+' tiene '); if (valor<10) { document.write('Tiene 1 digitos'); } else { if (valor<100) { document.write('Tiene 2 digitos'); } else { document.write('Tiene 3 digitos'); } } document.write('<br>'); } while(valor!=0); </script> </body> </html>

En este problema por lo menos se carga un valor. Si se carga un valor menor a 10 se trata de un nmero de una cifra, si es mayor a 10 pero menor a 100 se trata de un valor de dos dgitos, en caso contrario se trata de un valor de tres dgitos. Este bloque se repite mientras se ingresa en la variable 'valor' un nmero distinto a 0.

Ejemplo:
<html> <head> </head> <body> <script language="javascript"> var valor; do {

Pgina 201

valor=prompt('Ingrese un valor entre 0 y 999:',''); valor=parseInt(valor); document.write('El valor '+valor+' tiene '); if (valor<10) { document.write('Tiene 1 digitos'); } else { if (valor<100) { document.write('Tiene 2 digitos'); } else { document.write('Tiene 3 digitos'); } } document.write('<br>'); } while(valor!=0); </script> </body> </html>

Practica:
PROBLEMAS 1 - Realizar un programa que acumule (sume) valores ingresados por teclado hasta ingresa el 9999 (no sumar dicho valor, solamente indica que ha finalizado la carga). Imprimir el valor acumulado e informar si dicho valor es cero, mayor a cero o menor a cero. 2 - En un banco se procesan datos de las cuentas corrientes de sus clientes. De cada cuenta corriente se conoce: nmero de cuenta, nombre del cliente y saldo actual. El ingreso de datos debe finalizar al ingresar un valor negativo en el nmero de cuenta. Se pide confeccionar un programa que lea los datos de las cuentas corrientes e informe: a) De cada cuenta: nmero de cuenta, nombre del cliente y estado de la cuenta segn su saldo, sabiendo que: Estado de la cuenta 'Acreedor' si el saldo es >0. 'Deudor' si el saldo es <0. 'Nulo' si el saldo es =0. b) La suma total de los saldos acreedores. 3 - Se realiz un censo provincial y se desea procesar la informacin obtenida en dicho censo. De cada una de las personas censadas se tiene la siguiente informacin: nmero de documento, edad y sexo ('femenino' o 'masculino') Se pide confeccionar un programa que lea los datos de cada persona censada (para finalizar ingresar el valor cero en el nmero de documento) e informar: a) b) c) d) Cantidad total de personas censadas. Cantidad de varones. Cantidad de mujeres. Cantidad de varones cuya edad vara entre 16 y 65 aos.

15. Estructura repetitiva (for)

Pgina 202

Cualquier problema que requiera una estructura repetitiva se puede resolver empleando la estructura while. Pero hay otra estructura repetitiva cuyo planteo es ms sencillo en ciertas situaciones. Esta estructura se emplea en aquellas situaciones en las cuales CONOCEMOS la cantidad de veces que queremos que se ejecute el bloque de instrucciones. Ejemplo: Cargar 10 nmeros, ingresar 5 notas de alumnos, etc. Conocemos de antemano la cantidad de veces que queremos que el bloque se repita. Por ltimo, hay que decir que la ejecucin de la sentencia break dentro de cualquier parte del bucle provoca la salida inmediata del mismo.
Sintaxis: for (<Inicializacin> ; <Condicin> ; <Incremento o Decremento>) { <Instrucciones> }

Esta estructura repetitiva tiene tres argumentos: variable de inicializacin, condicin y variable de incremento o decremento. Funcionamiento: - Primero se ejecuta por nica vez el primer argumento . Por lo general se inicializa una variable. - El segundo paso es evaluar la (Condicin), en caso de ser verdadera se ejecuta el bloque, en caso contrario contina el programa. - El tercer paso es la ejecucin de las instrucciones. - El cuarto paso es ejecutar el tercer argumento (Incremento o Decremento). - Luego se repiten sucesivamente del Segundo al Cuarto Paso. Este tipo de estructura repetitiva se utiliza generalmente cuando sabemos la cantidad de veces que deseamos que se repita el bloque.

Ejemplo: Mostrar por pantalla los nmeros del 1 al 10.

<html> <head> </head> <body> <script language="javascript"> var f; for(f=1;f<=10;f++) { document.write(f+" "); } </script> </body> </html>

Inicialmente f se la inicializa con 1. Como la condicin se verifica como verdadera se ejecuta el bloque del for (en este caso mostramos el contenido de la variable f y un espacio en blanco). Luego de ejecutar el bloque pasa al tercer argumento del for (en este caso con el operador ++ se incrementa en uno el contenido de la variable f, existe otro operador -- que decrementa en uno una variable), hubiera sido lo mismo poner f=f+1 pero este otro operador matemtico nos simplifica las cosas. Importante: Tener en cuenta que no lleva punto y coma al final de los tres argumentos del for. El disponer un punto y coma provoca un error lgico y no sintctico, por lo que el navegador no avisar.

Pgina 203

Ejemplo:
<html> <head> </head> <body> <script language="javascript"> var f; for(f=1;f<=10;f++) { document.write(f+" "); } </script> </body> </html>

Practica:
PROBLEMAS 1 - Confeccionar un programa que lea 3 pares de datos, cada par de datos corresponde a la medida de la base y la altura de un tringulo. El programa deber informar: a) De cada tringulo la medida de su base, su altura y su superficie. b) La cantidad de tringulos cuya superficie es mayor a 12. 2 - Desarrollar un programa que solicite la carga de 10 nmeros e imprima la suma de lo ltimos 5 valores ingresados. 3- Desarrollar un programa que muestre la tabla de multiplicar del 5 (del 5 al 50). 4 - Confeccionar un programa que permita ingresar un valor del 1 al 10 y nos muestre la tabla de multiplicar del mismo (los primeros 12 trminos) Ejemplo: Si ingreso 3 deber aparecer en pantalla los valores 3, 6, 9, hasta el 36. 5 - Realizar un programa que lea los lados de 4 tringulos, e informar: a) De cada uno de ellos, qu tipo de tringulo es: equiltero (tres lados iguales), issceles (dos lados iguales), o escaleno (ningn lado igual) b) Cantidad de tringulos de cada tipo. c) Tipo de tringulo del que hay menor cantidad. 6 - Escribir un programa que pida ingresar coordenadas (x,y) que representan puntos en el plano. Informar cuntos puntos se han ingresado en el primer, segundo, tercer y cuarto cuadrante. Al comenzar el programa se pide que se ingrese la cantidad de puntos a procesar. 7 - Se realiza la carga de 10 valores enteros por teclado. Se desea conocer: a) La cantidad de valores negativos ingresados. b) La cantidad de valores positivos ingresados. c) La cantidad de mltiplos de 15. d) El valor acumulado de los nmeros ingresados que son pares. 8 - Se cuenta con la siguiente informacin: Las edades de 50 estudiantes del turno maana. Las edades de 60 estudiantes del turno tarde. Las edades de 110 estudiantes del turno noche. Las edades de cada estudiante deben ingresarse por teclado. a) Obtener el promedio de las edades de cada turno (tres promedios). b) Imprimir dichos promedios (promedio de cada turno).

Pgina 204

c) Mostrar por pantalla un mensaje que indique cual de los tres turnos tiene un promedio de edades mayor.

16. Funciones
En programacin es muy frecuente que un determinado procedimiento de clculo definido por un grupo de sentencias tenga que repetirse varias veces, ya sea en un mismo programa o en otros programas, lo cual implica que se tenga que escribir tantos grupos de aquellas sentencias como veces aparezca dicho proceso. La herramienta ms potente con que se cuenta para facilitar, reducir y dividir el trabajo en programacin, es escribir aquellos grupos de sentencias una sola y nica vez bajo la forma de una FUNCION. Un programa es una cosa compleja de realizar y por lo tanto es importante que est bien ESTRUCTURADO y tambin que sea inteligible para las personas. Si un grupo de sentencias realiza una tarea bien definida, entonces puede estar justificado el aislar estas sentencias formando una funcin, aunque resulte que slo se le llame o use una vez. Hasta ahora hemos visto como resolver un problema planteando un nico algoritmo. Con funciones podemos segmentar un programa en varias partes. Frente a un problema, planteamos un algoritmo, ste puede constar de pequeos algoritmos. Una funcin es un conjunto de instrucciones que resuelven una parte del problema y que puede ser utilizado (llamado) desde diferentes partes de un programa. Consta de un nombre y parmetros. Con el nombre llamamos a la funcin, es decir, hacemos referencia a la misma. Los parmetros son valores que se envan y son indispensables para la resolucin del mismo. La funcin realizar alguna operacin con los parmetros que le enviamos. Podemos cargar una variable, consultarla, modificarla, imprimirla, etc. Incluso los programas ms sencillos tienen la necesidad de fragmentarse. Las funciones son los nicos tipos de subprogramas que acepta JavaScript. Tienen la siguiente estructura:
function <nombre de funcin>(argumento1, argumento2, ..., argumento n) { <cdigo de la funcin> }

Debemos buscar un nombre de funcin que nos indique cul es su objetivo (Si la funcin recibe un string y lo centra, tal vez deberamos llamarla centrarTitulo). Veremos que una funcin puede variar bastante en su estructura, puede tener o no parmetros, retornar un valor, etc. Ejemplo: Mostrar un mensaje que se repita 3 veces en la pgina con el siguiente texto: 'Cuidado' 'Ingrese su documento correctamente' 'Cuidado' 'Ingrese su documento correctamente' 'Cuidado' 'Ingrese su documento correctamente'

Pgina 205

La solucin sin emplear funciones es:

<html> <head> </head> <body> <script language="javascript"> document.write("Cuidado<br>"); document.write("Ingrese su documento correctamente<br>"); document.write("Cuidado<br>"); document.write("Ingrese su documento correctamente<br>"); document.write("Cuidado<br>"); document.write("Ingrese su documento correctamente<br>"); </script> </body> </html>

Empleando una funcin:

<html> <head> </head> <body> <script languaje="javascript"> function mostrarMensaje() { document.write("Cuidado<br>"); document.write("Ingrese su documento correctamente<br>"); } mostrarMensaje(); mostrarMensaje(); mostrarMensaje(); </script> </body> </html>

Recordemos que JavaScript es sensible a maysculas y minsculas. Si fijamos como nombre a la funcin mostrarTitulo (es decir la segunda palabra con mayscula) debemos respetar este nombre cuando la llamemos a dicha funcin. Es importante notar que para que una funcin se ejecute debemos llamarla desde fuera por su nombre (en este ejemplo: mostrarMensaje()). Cada vez que se llama una funcin se ejecutan todas las lneas contenidas en la misma. Si no se llama a la funcin, las instrucciones de la misma nunca se ejecutarn. A una funcin la podemos llamar tantas veces como necesitemos. Las funciones nos ahorran escribir cdigo que se repite con frecuencia y permite que nuestro programa sea ms entendible.

Ejemplo:
<html> <head> </head> <body> <script language="javascript"> function mostrarMensaje() { document.write("Cuidado<br>"); document.write("Ingrese su documento correctamente<br>"); } mostrarMensaje(); mostrarMensaje();

Pgina 206

mostrarMensaje(); </script> </body> </html>

17. Funciones con parmetros.

Explicaremos con un ejemplo, una funcin que tiene datos de entrada. Ejemplo: Confeccionar una funcin que reciba dos nmeros y muestre en la pgina los valores comprendidos entre ellos de uno en uno. Cargar por teclado esos dos valores.
<html> <head> </head> <body> <script language="javascript"> function mostrarComprendidos(x1,x2) { var inicio; for(inicio=x1;inicio<=x2;inicio++) { document.write(inicio+' '); } } var valor1,valor2; valor1=prompt('Ingrese valor inferior:',''); valor1=parseInt(valor1); valor2=prompt('Ingrese valor superior:',''); valor2=parseInt(valor2); mostrarComprendidos(valor1,valor2); </script> </body> </html>

El programa de JavaScript empieza a ejecutarse donde definimos las variables valor1 y valor2 y no donde se define la funcin. Luego de cargar los dos valores por teclado se llama a la funcin mostrarComprendidos y le enviamos las variables valor1 y valor2. Los parmetors x1 y x2 reciben los contenidos de las variables valor1 y valor 2. Es importante notar que a la funcin la podemos llamar la cantidad de veces que la necesitemos.

Ejemplo:
<html> <head> </head> <body> <script language="javascript"> function mostrarComprendidos(x1,x2) { var inicio; for(inicio=x1;inicio<=x2;inicio++) { document.write(inicio+' '); } } var valor1,valor2; valor1=prompt('Ingrese valor inferior:','');

Pgina 207

valor1=parseInt(valor1); valor2=prompt('Ingrese valor superior:',''); valor2=parseInt(valor2); mostrarComprendidos(valor1,valor2); </script> </body> </html>

Practica:
PROBLEMAS 1 - Elaborar una funcin a la cual le enviemos tres enteros y muestre el menor. 2 - Confeccionar una funcin a la cual le enve tres enteros y los muestre ordenados de menor a mayor.

18. Funciones que retornan un valor.

Son comunes los casos donde una funcin, luego de hacer un proceso, retorne un valor. Ejemplo 1: Confeccionar una funcin que reciba un valor entero comprendido entre 1 y 5. Luego retornar en castellano el valor recibido.
<html> <head> </head> <body> <script language="javascript"> function convertirCastellano(x) { if (x==1) return "uno"; else if (x==2) return "dos"; else if (x==3) return "tres"; else if (x==4) return "cuatro"; else if (x==5) return "cinco"; else return "valor incorrecto"; } var valor; valor=prompt("Ingrese un valor entre 1 y 5",""); valor=parseInt(valor); var r; r=convertirCastellano(valor); document.write(r); </script> </body> </html>

Podemos ver que el valor retornado por una funcin lo indicamos por medio de la palabra clave return. Cuando se llama a la funcin, debemos asignar el nombre de la funcin a una variable, ya que la misma retorna un valor.

Pgina 208

Una funcin puede tener varios parmetros, pero slo puede retornar un nico valor. La estructura condicional if de este ejemplo puede ser remplazada por la instruccin switch, la funcin queda codificada de la siguiente manera:
function convertirCastellano(x) { switch (x) { case 1:return "uno"; case 2:return "dos"; case 3:return "tres"; case 4:return "cuatro"; case 5:return "cinco"; default:return "valor incorrecto"; } }

Esta es una forma ms elegante que una serie de if anidados. La instruccin switch analiza el contenido de la variable x con respecto al valor de cada caso. En la situacin de ser igual, ejecuta el bloque seguido de los 2 puntos hasta que encuentra la instruccin return o break. Ejemplo 2: Confeccionar una funcin que reciba una fecha con el formato de da, mes y ao y retorne un string con un formato similar a: "Hoy es 10 de junio de 2003".
<html> <head> </head> <body> <script language="javascript"> function formatearFecha(dia,mes,ao) { var s='Hoy es '+dia+' de '; switch (mes) { case 1:s=s+'enero '; break; case 2:s=s+'febrero '; break; case 3:s=s+'marzo '; break; case 4:s=s+'abril '; break; case 5:s=s+'mayo '; break; case 6:s=s+'junio '; break; case 7:s=s+'julio '; break; case 8:s=s+'agosto '; break; case 9:s=s+'septiembre '; break; case 10:s=s+'octubre '; break; case 11:s=s+'noviembre '; break; case 12:s=s+'diciembre '; break; } //fin del switch s=s+'de '+ao; return s; }

Pgina 209

document.write(formatearFecha(11,6,2006)); </script> </body> </html>

Analicemos un poco la funcin formatearFecha. Llegan tres parmetros con el da, mes y ao. Definimos e inicializamos una variable con:
var s='Hoy es '+dia+' de ';

Luego le concatenamos o sumamos el mes:

s=s+'enero ';

Esto, si el parmetro mes tiene un uno. Observemos como acumulamos lo que tiene 's' ms el string 'enero '. En caso de hacer s='enero ' perderamos el valor previo que tena la variable s. Por ltimo concatenamos el ao:
s=s+'de '+ao;

Cuando se llama a la funcin directamente, al valor devuelto se lo enviamos a la funcin write del objeto document. Esto ltimo lo podemos hacer en dos pasos:
var fec= formatearFecha(11,6,2006); document.write(fec);

Guardamos en la variable 'fec' el string devuelto por la funcin.

Ejemplo:
Pagina1.html
<html> <head> </head> <body> <script language="javascript"> function convertirCastellano(x) { if (x==1) return "uno"; else if (x==2) return "dos"; else if (x==3) return "tres"; else if (x==4) return "cuatro"; else if (x==5) return "cinco"; else return "valor incorrecto"; } var valor; valor=prompt("Ingrese un valor entre 1 y 5",""); valor=parseInt(valor); var r; r=convertirCastellano(valor); document.write(r); </script> <br>

Pgina 210

<A href="pagina2.html">Ver segundo problema</a> </body> </html>

Pagina2.html
<html> <head> </head> <body> <script language="javascript"> function formatearFecha(dia,mes,ao) { var s='Hoy es '+dia+' de '; switch (mes) { case 1:s=s+'enero '; break; case 2:s=s+'febrero '; break; case 3:s=s+'marzo '; break; case 4:s=s+'abril '; break; case 5:s=s+'mayo '; break; case 6:s=s+'junio '; break; case 7:s=s+'julio '; break; case 8:s=s+'agosto '; break; case 9:s=s+'septiembre '; break; case 10:s=s+'octubre '; break; case 11:s=s+'noviembre '; break; case 12:s=s+'diciembre '; break; } //fin del switch s=s+'de '+ao; return s; } document.write(formatearFecha(11,6,2006)); </script> </body> </html>

Practica:
PROBLEMAS 1 - Confeccionar una funcin a la cual le enve tres enteros y retorne el mayor de ellos. 2 - Elaborar una funcin a la cual le enve el valor del lado de un cuadrado y me retorne su permetro. 3 - Desarrollar una funcin que retorne la cantidad de dgitos que tiene una variable entera positiva. 4 - Elaborar una funcin que reciba tres enteros y retorne el promedio. 5 - Confeccionar una funcin que solicite la carga de 5 valores por teclado y retorne su suma.

Pgina 211

19. Programacin orientada a objetos.

Un objeto es una estructura que contiene tanto las variables (llamadas propiedades) como las funciones que manipulan dichas variables (llamadas mtodos). A partir de esta estructura se ha creado un nuevo modelo de programacin (la programacin orientada a objetos) que atribuye a los mismos propiedades como herencia o polimorfismo. Como veremos, JavaScript simplifica en algo este modelo y hace una programacin hbrida entre la programacin estructurada y la programacin orientada a objetos. El modelo de la programacin orientada a objetos normal y corriente separa los mismos en dos: clases e instancias (objetos). Las primeras son entes ms abstractos que definen un conjunto determinado de objetos. Las segundas son miembros de una clase, poseyendo las mismas propiedades que la clase a la cual pertenecen. Propiedades y mtodos. Para acceder a los mtodos y propiedades de un objeto debemos utilizar la siguiente sintaxis:
objeto.propiedad objeto.metodo(parametros)

Conceptos Bsicos. Objetos Son todas las cosas con identidad propia. Se relacionan entre si. Poseen caractersticas (atributos) y tienen responsabilidades (funciones, mtodos) que deben cumplir. Son ejemplares (instancias) de una clase y conocen a la clase a la cual pertenecen. Atributos o propiedades Son las caractersticas, cualidades distintivas de cada objeto. Deben ser mnimos para poder realizar todas las operaciones que requiere la aplicacin. Ejemplos de objetos del mundo real: - Casa: atributos: tamao, precio, cantidad de habitaciones, etc.; responsabilidades: comodidad, seguridad, etc. - Mesa: atributos: altura, largo, ancho, etc.; responsabilidades: contener elementos. - Ventana: atributos: tamao, color, etc.; responsabilidades: abrirse, cerrarse, etc. Ejemplos de objetos del mundo de la programacin: - Ventana: atributos: tamao, color, etc.; responsabilidades: mostrar ttulo, achicarse, etc. Responsabilidades o Mtodos. Son las responsabilidades que debe cumplir la clase. El objetivo de un mtodo es ejecutar las actividades que tiene encomendada la clase. Es un algoritmo (conjunto de operaciones) que se ejecuta en respuesta a un mensaje; respuestas a mensajes para satisfacer peticiones. Un mtodo consiste en el nombre de la operacin y sus argumentos. El nombre del mtodo identifica una operacin que se ejecuta.

Pgina 212

Un mtodo est determinado por la clase del objeto receptor, todos los objetos de una clase usan el mismo mtodo en respuesta a mensajes similares. La interpretacin de un mensaje (seleccin del mtodo ejecutado) depende del receptor y puede variar con distintos receptores, es decir, puede variar de una clase a otra. Clases Una clase es una agrupacin de objetos que comparten las mismas propiedades y comportamientos. Es un molde para objetos que poseen las mismas caractersticas (que pueden recibir los mismos mensajes y responden de la misma manera). Una clase es una representacin de una idea o concepto. Unidad que encapsula cdigos y datos para los mtodos (operaciones). Todos los ejemplares de una clase se comportan de forma similar (invocan el mismo mtodo) en respuesta a mensajes similares. La clase a la cual pertenece un objeto determina el comportamiento del objeto. Una clase tiene encomendadas actividades que ejecutan los mtodos. Las clases estn definidas por: - Atributos (Propiedades), - Comportamiento (operaciones o mtodos) y - Relaciones con otros objetos. Una aplicacin es un conjunto de objetos de determinadas clases.

20. Clase Date

JavaScript dispone de varias clases predefinidos para acceder a muchas de las funciones normales de cualquier lenguaje, como puede ser el manejo de vectores o el de fechas. Esta clase nos permitir manejar fechas y horas. Se invoca as:
fecha = new Date();//creacin de un objeto de la clase Date fecha = new Date(ao, mes, dia); fecha = new Date(ao, mes, dia, hora, minuto, segundo);

Si no utilizamos parmetros, el objeto fecha contendr la fecha y hora actuales, obtenidas del reloj de nuestra computadora. En caso contrario hay que tener en cuenta que los meses comienzan por cero. As, por ejemplo:
navidad06 = new Date(2006, 11, 25)

El objeto Date dispone, entre otros, de los siguientes mtodos:

getYear() setYear(ao) Obtiene y coloca, respectivamente, el ao de la fecha. ste se devuelve como nmero de 4 dgitos excepto en el caso en que est entre 1900 y 1999, en cuyo caso devolver las dos ltimas cifras. getFullYear() setFullYear(ao) Realizan la misma funcin que los anteriores, pero sin tanta complicacin, ya que siempre devuelven nmeros con todos sus dgitos. getMonth() setMonth(mes) getDate() setDate(dia) getHours()

Pgina 213

setHours(horas) getMinutes() setMinutes(minutos) getSeconds() setSeconds(segundos) Obtienen y colocan, respectivamente, el mes, da, hora, minuto y segundo de la fecha. getDay() Devuelve el da de la semana de la fecha en forma de nmero que va del 0 (domingo) al 6 (sbado)

Ejemplo: Mostrar en una pgina la fecha y la hora actual.

<HTML> <HEAD> <SCRIPT LANGUAGE="JavaScript"> function mostrarFechaHora() { var fecha fecha=new Date(); document.write('Hoy es '); document.write(fecha.getDate()+'/'); document.write((fecha.getMonth()+1)+'/'); document.write(fecha.getYear()); document.write('<br>'); document.write('Es la hora '); document.write(fecha.getHours()+':'); document.write(fecha.getMinutes()+':'); document.write(fecha.getSeconds()); } //Llamada a la funcin mostrarFechaHora(); </SCRIPT> </HEAD> <BODY> </BODY> </HTML>

En este problema hemos creado un objeto de la clase Date. Luego llamamos una serie de mtodos que nos retornan datos sobre la fecha y hora actual del equipo de computacin donde se est ejecutando el navegador. Es bueno notar que para llamar a los mtodos disponemos:
<nombre de objeto>.<nombre de mtodo>(parmetros)

Ejemplo:
<HTML> <HEAD> <SCRIPT LANGUAGE="JavaScript"> function mostrarFechaHora() { var fecha fecha=new Date(); document.write('Hoy es '); document.write(fecha.getDate()+'/'); document.write((fecha.getMonth()+1)+'/'); document.write(fecha.getYear()); document.write('<br>'); document.write('Es la hora '); document.write(fecha.getHours()+':'); document.write(fecha.getMinutes()+':'); document.write(fecha.getSeconds()); } //Llamada a la funcin

Pgina 214

mostrarFechaHora(); </SCRIPT> </HEAD> <BODY> </BODY> </HTML>

21. Clase Array

Un vector es una estructura de datos que permite almacenar un CONJUNTO de datos. Con un nico nombre se define un vector y por medio de un subndice hacemos referencia a cada elemento del mismo (componente).

Ejemplo 1: Crear un vector para almacenar los cinco sueldos de operarios y luego
mostrar el total de gastos en sueldos (cada actividad en una funcin).
<HTML> <HEAD> </HEAD> <BODY> <SCRIPT LANGUAGE="JavaScript"> function cargar(sueldos) { var f; for(f=0;f<sueldos.length;f++) { var v; v=prompt('Ingrese sueldo:',''); sueldos[f]=parseInt(v); } } function calcularGastos(sueldos) { var total=0; var f; for(f=0;f<sueldos.length;f++) { total=total+sueldos[f]; } document.write('Listado de sueldos<br>'); for(f=0;f<sueldos.length;f++) { document.write(sueldos[f]+'<br>'); } document.write('Total de gastos en sueldos:'+total); } var sueldos; sueldos=new Array(5); cargar(sueldos); calcularGastos(sueldos); </SCRIPT> </BODY> </HTML>

Recordemos que el programa comienza a ejecutarse a partir de las lneas que se encuentran fuera de la funciones:
var sueldos; sueldos=new Array(5); cargar(sueldos);

Pgina 215

calcularGastos(sueldos);

Lo primero, definimos una variable y posteriormente creamos un objeto de la clase Array, indicndole que queremos almacenar 5 valores. Llamamos a la funcin cargar envindole el vector. En la funcin, a travs de un ciclo for recorremos las distintas componentes del vector y almacenamos valores enteros que ingresamos por teclado. Para conocer el tamao del vector accedemos a la propiedad length de la clase Array. En la segunda funcin sumamos todas las componentes del vector, imprimimos en la pgina los valores y el total de gastos.

Ejemplo 2: Crear un vector con elementos de tipo string. Almacenar los meses de
ao. En otra funcin solicitar el ingreso de un nmero entre 1 y 12. Mostrar a qu mes corresponde y cuntos das tiene dicho mes.
<HTML> <HEAD></HEAD> <BODY> <SCRIPT LANGUAGE="JavaScript"> function mostrarFecha(meses,dias) { var num; num=prompt('Ingrese nmero de mes:',''); num=parseInt(num); document.write('Corresponde al mes:'+meses[num-1]); document.write('<br>'); document.write('Tiene '+dias[num-1]+' das'); } var meses; meses=new Array(12); meses[0]='Enero'; meses[1]='Febrero'; meses[2]='Marzo'; meses[3]='Abril'; meses[4]='Mayo'; meses[5]='Junio'; meses[6]='Julio'; meses[7]='Agosto'; meses[8]='Septiembre'; meses[9]='Octubre'; meses[10]='Noviembre'; meses[11]='Diciembre'; var dias; dias=new Array(12); dias[0]=31; dias[1]=28; dias[2]=31; dias[3]=30; dias[4]=31; dias[5]=30; dias[6]=31; dias[7]=31; dias[8]=30; dias[9]=31; dias[10]=30; dias[11]=31;

Pgina 216

mostrarFecha(meses,dias); </SCRIPT> </BODY> </HTML>

En este problema definimos dos vectores, uno para almacenar los meses y otro los das. Decimos que se trata de vectores paralelos porque en la componente cero del vector meses almacenamos el string 'Enero' y en el vector dias, la cantidad de das del mes de enero. Es importante notar que cuando imprimimos, disponemos como subndice el valor ingresado menos 1, esto debido a que normalmente el operador de nuestro programa carga un valor comprendido entre 1 y 12. Recordar que los vectores comienzan a numerarse a partir de la componente cero.
document.write('Corresponde al mes:'+meses[num-1]);

Ejemplo:
<HTML> <HEAD> </HEAD> <BODY> <SCRIPT LANGUAGE="JavaScript"> function cargar(sueldos) { var f; for(f=0;f<sueldos.length;f++) { var v; v=prompt('Ingrese sueldo:',''); sueldos[f]=parseInt(v); } } function calcularGastos(sueldos) { var total=0; var f; for(f=0;f<sueldos.length;f++) { total=total+sueldos[f]; } document.write('Listado de sueldos<br>'); for(f=0;f<sueldos.length;f++) { document.write(sueldos[f]+'<br>'); } document.write('Total de gastos en sueldos:'+total); } var sueldos; sueldos=new Array(5); cargar(sueldos); calcularGastos(sueldos); </SCRIPT> <br> <a href="pagina2.html">Segundo Problema</a> </BODY> </HTML>

Pgina 217

Practica:
PROBLEMAS 1 - Desarrollar un programa que permita ingresar un vector de 8 elementos, e informe: El valor acumulado de todos los elementos del vector. El valor acumulado de los elementos del vector que sean mayores a 36. Cantidad de valores mayores a 50. 2 - Realizar un programa que pida la carga de dos vectores numricos. Obtener la suma de los dos vectores, dicho resultado guardarlo en un tercer vector del mismo tamao. umar componente a componente. El tamao del vector es a eleccin.

22. Clase Math

Esta clase no est construido para que tengamos nuestras variables Math, sino como un contenedor que tiene diversas constantes (como Math.E y Math.PI) y los siguientes mtodos matemticos: Mtodo abs sin, cos, tan Descripcin Valor absoluto Funciones trigonomtricas, reciben el argumento en radianes Expresin de ejemplo Math.abs(-2) Math.cos(Math.PI) Math.asin(1) Math.log(Math.E) Resultado del ejemplo 2 -1 1.57 1 -2 -3 -3 2

asin, acos, Funciones trigonomtricas inversas atan exp, log ceil floor round min, max Exponenciacin y logaritmo, base E

Devuelve el entero ms pequeo mayor Math.ceil(-2.7) o igual al argumento Devuelve el entero ms grande menor o Math.floor(-2.7) igual al argumento Devuelve el entero ms cercano o igual al argumento Math.round(-2.7)

Devuelve el menor (o mayor) de sus dos Math.min(2,4) argumentos Exponenciacin, siendo el primer argumento la base y el segundo el exponente Raz cuadrada Genera un valor aleatorio comprendido entre 0 y 1. Math.pow(2,3) Math.sqrt(25) Math.random()

pow sqrt random

8 5 Ej. 0.7345

Pgina 218

Ejemplo:
<html> <head> </head>

Confeccionar un programa que permita cargar un valor comprendido entre 1 y 10. Luego generar un valor aleatorio entre 1 y 10, mostrar un mensaje con el nmero sorteado e indicar si gan o perdi:

<body> <script language="JavaScript"> var selec=prompt('Ingrese un valor entre 1 y 10',''); selec=parseInt(selec); var num=parseInt(Math.random()*10)+1; if (num==selec) document.write('Gan el nmero que se sorte es el '+ num); else document.write('Lo siento se sorte el valor '+num+' y usted eligi el '+selec); </script> </body> </html>

Para generar un valor aleatorio comprendido entre 1 y 10 debemos plantear lo siguiente:

var num=parseInt(Math.random()*10)+1;

Al multiplicar Math.random() por 10, nos genera un valor aleatorio comprendido entre un valor mayor a 0 y menor a 10, luego, con la funcin parseInt, obtenemos slo la parte entera. Finalmente sumamos uno. El valor que carg el operador se encuentra en:
var selec=prompt('Ingrese un valor entre 1 y 10','');

Con un simple if validamos si coinciden los valores (el generado y el ingresado por teclado).

Ejemplo:
<html> <head> </head> <body> <script language="JavaScript"> var selec=prompt('Ingrese un valor entre 1 y 10',''); selec=parseInt(selec); var num=parseInt(Math.random()*10)+1; if (num==selec) document.write('Gan el nmero que se sorte es el '+ num); else document.write('Lo siento se sorte el valor '+num+' y usted eligi el '+selec); </script> </body> </html>

23. Clase String.

Un string consiste en uno o ms caracteres encerrados entre comillas simples o dobles. Concatenacin de cadenas (+) JavaScript permite concatenar cadenas utilizando el operador +. El siguiente fragmento de cdigo concatena tres cadenas para producir su salida:

Pgina 219

var final='La entrada tiene ' + contador + ' caracteres.';

Dos de las cadenas concatenadas son cadenas literales. La del medio es un entero que automticamente se convierte a cadena y luego se concatena con las otras. Propiedad length Retorna la cantidad de caracteres de un objeto String.
var nom='Juan'; document.write(nom.length); //Resultado 4

Mtodos
charAt(pos) Retorna el caracter del ndice especificado. Comienzan a numerarse de la posicin cero.
var nombre='juan'; var caracterPrimero=nombre.charAt(0);

substring (posinicial, posfinal) Retorna un String extrada de otro, desde el caracter 'posinicial' hasta el 'posfinal'-1:
cadena3=cadena1.substring(2,5);

En este ejemplo, "cadena3" contendr los caracteres 2, 3, 4 sin incluir el 5 de cadena1 (Cuidado que comienza en cero) indexOf (subCadena) Devuelve la posicin de la subcadena dentro de la cadena, o -1 en caso de no estar. Tener en cuenta que puede retornar 0 si la subcadena coincide desde el primer caracter.
var nombre='Rodriguez Pablo'; var pos=nombre.indexOf('Pablo'); if (pos!=-1) document.write ('Est el nombre Pablo en la variable nombre');

toUpperCase() Convierte todos los caracteres del String que invoca el mtodo a maysculas:
cadena1=cadena1.toUpperCase();

Luego de esto, cadena1 tiene todos los caracteres convertidos a maysculas. toLowerCase() Convierte todos los caracteres del String que invoca el mtodo a minsculas:
cadena1=cadena1.toLowerCase();

Luego de esto, cadena1 tiene todos los caracteres convertidos a minsculas.

Ejemplo: Cargar un string por teclado y luego llamar a los distintos mtodos de la
clase String y la propiedad length.
<html> <head> </head> <body> <script language="JavaScript"> var cadena=prompt('Ingrese una cadena:',''); document.write('La cadena ingresada es:'+cadena); document.write('<br>'); document.write('La cantidad de caracteres son:'+cadena.length); document.write('<br>'); document.write('El primer caracter es:'+cadena.charAt(0)); document.write('<br>'); document.write('Los primeros 3 caracteres son:'+cadena.substring(0,3)); document.write('<br>'); if (cadena.indexOf('hola')!=-1) document.write('Se ingres la subcadena hola');

Pgina 220

else document.write('No se ingres la subcadena hola'); document.write('<br>'); document.write('La cadena convertida a maysculas es:'+cadena.toUpperCase()); document.write('<br>'); document.write('La cadena convertida a minsculas es:'+cadena.toLowerCase()); document.write('<br>'); </script> </body> </html>

Ejemplo:
<html> <head> </head> <body> <script language="JavaScript"> var cadena=prompt('Ingrese una cadena:',''); document.write('La cadena ingresada es:'+cadena); document.write('<br>'); document.write('La cantidad de caracteres son:'+cadena.length); document.write('<br>'); document.write('El primer caracter es:'+cadena.charAt(0)); document.write('<br>'); document.write('Los primeros 3 caracteres son:'+cadena.substring(0,3)); document.write('<br>'); if (cadena.indexOf('hola')!=-1) document.write('Se ingres la subcadena hola'); else document.write('No se ingres la subcadena hola'); document.write('<br>'); document.write('La cadena convertida a maysculas es:'+cadena.toUpperCase()); document.write('<br>'); document.write('La cadena convertida a minsculas es:'+cadena.toLowerCase()); document.write('<br>'); </script> </body> </html>

Practica:
PROBLEMAS 1 Ingresar una serie de nombres por teclado hasta que se digite la palabra Fin, y mostrar cuntos nombres se ingresaron. 2 Igual al anterior, pero que termine la aplicacin sin contemplar maysculas ni minsculas. Es decir que para salir se pueda teclear fin, Fin o FIN. 3 Realizar la bsqueda de un string clave en un string fuente. Se deber ingresar una frase o texto (fuente) y luego la clave a buscar. En caso de encontrarla, imprimir la posicin, de lo contrario una leyenda. 4 Ingresar una palabra o texto por teclado y determinar si es o no una palabra palndromo. (Palabra que se lee de igual manera de adelante hacia atrs, que de atrs hacia delante). 5 Realizar un programa que permita cargar una direccin de mail e implementar una funcin que verifique si el String tiene cargado el caracter @. 6 - Cargar un String por teclado e implementar los siguientes mtodos: a) Imprimir la primera mitad de los caracteres de la cadena. b) Imprimir el ltimo caracter.

Pgina 221

c) Imprimirlo en forma inversa. d) Imprimir cada caracter del String separado con un guin. e) Imprimir la cantidad de vocales almacenadas. 7 Codifique un programa que permita cargar una oracin por teclado, luego mostrar cada palabra ingresada en una lnea distinta.
Por ejemplo si cargo: La maana est fra. Debe aparecer: La maana est fra.

24. Formularios y Eventos.

El uso de JavaScript en los formularios HTML se hace fundamentalmente con el objetivo de validar los datos ingresados. Se hace esta actividad en el cliente (navegador) para desligar de esta actividad al servidor que recibir los datos ingresados por el usuario. Esta posibilidad de hacer pequeos programas que se ejecutan en el navegador, evitan intercambios innecesarios entre el cliente y el servidor (navegador y sitio web). Suponemos que conoce las marcas para la creacin de formularios en una pgina web:
form <FORM> ... </FORM> text <INPUT TYPE="text"> password <INPUT TYPE="password"> textarea <TEXTAREA> ... </TEXTAREA> button <INPUT TYPE="button"> submit <INPUT TYPE="submit"> reset <INPUT TYPE="reset"> checkbox <INPUT TYPE="checkbox"> radio <INPUT TYPE="radio"> select <SELECT> ... </SELECT> hidden <INPUT TYPE="hidden">

El navegador crea un objeto por cada control visual que aparece dentro de la pgina. Nosotros podemos acceder posteriormente desde JavaScript a dichos objetos. El objeto principal es el FORM que contendr todos los otros objetos: TEXT (editor de lneas), TEXTAREA (editor de varias lneas), etc. Nuestra actividad en JavaScript es procesar los eventos que generan estos controles (un evento es una accin que se dispara, por ejemplo si se presiona un botn). Vamos a hacer en problema muy sencillo empleando el lenguaje JavaScript; dispondremos un botn y cada vez que se presione, mostraremos un contador:
<html> <head> </head> <body> <script language="JavaScript"> var contador=0; function incrementar() { contador++; alert('El contador ahora vale :' + contador);

Pgina 222

} </script> <form> <input type="button" onClick="incrementar()" value="incrementar"> </form> </body> </html>

A los eventos de los objetos HTML se les asocia una funcin, dicha funcin se ejecuta cuando se dispara el evento respectivo. En este caso cada vez que presionamos el botn, se llama a la funcin incrementar, en la misma incrementamos la variable contador en uno. Hay que tener en cuenta que a la variable contador la definimos fuera de la funcin para que no se inicialice cada vez que se dispara el evento. La funcin alert crea una ventana que puede mostrar un mensaje.

Ejemplo:
<html> <head> </head> <body> <script language="JavaScript"> var contador=0; function incrementar() { contador++; alert('El contador ahora vale :' + contador); } </script> <form> <input type="button" onClick="incrementar()" value="incrementar"> </form> </body> </html>

Practica:

Crear un formulario con tres botones con las leyendas "1", "2" y "3". Mostrar un mensaje indicando qu botn se presion.

25. Controles FORM, BUTTON y TEXT.

Hasta ahora hemos visto como crear un formulario con controles de tipo BUTTON. Agregamos un control de tipo TEXT (permite al operador cargar caracteres por teclado). Ahora veremos la importancia de definir un NAME a todo control de un formulario. Con un ejemplo veremos estos controles: Confeccionar un formulario que permita ingresar el nombre y edad de una persona:
<html> <head></head> <body> <script language="JavaScript"> function mostrar() { var nom=document.form1.nombre.value; var ed=document.form1.edad.value; alert('Ingreso el nombre:' + nom);

Pgina 223

alert('Y la edad:' + ed); } </script> <form name="form1"> Ingrese su nombre: <input type="text" name="nombre"><br> Ingrese su edad: <input type="text" name="edad"><br> <input type="button" value="Confirmar" onClick="mostrar()"> </form> </body> </html>

En este problema tenemos cuatro controles: 1 FORM, 1 BUTTON, 2 TEXT. El evento que se dispara al presionar el botn se llama mostrar. La funcin 'mostrar' accede a los contenidos de los dos controles de tipo TEXT:
var nom=document.form1.nombre.value; var ed=document.form1.edad.value;

Para hacer ms clara la funcin guardamos en dos variables auxiliares los contenidos de los controles de tipo TEXT. Hay que tener en cuenta que a nuestra pgina la accedemos por medio del objeto: document, luego, al formulario que hemos creado, lo accedemos por el NAME que le dimos al formulario, en este caso: form1, luego, a cada control que contiene el formulario, lo accedemos nuevamento por su NAME, es decir: nombre y edad respectivamente. Por ltimo, para acceder a las cadenas cargadas debemos indicar la propiedad value.

Ejemplo:
<html> <head></head> <body> <script language="JavaScript"> function mostrar() { var nom=document.form1.nombre.value; var ed=document.form1.edad.value; alert('Ingreso el nombre:' + nom); alert('Y la edad:' + ed); } </script> <form name="form1"> Ingrese su nombre: <input type="text" name="nombre"><br> Ingrese su edad: <input type="text" name="edad"><br> <input type="button" value="Confirmar" onClick="mostrar()"> </form> </body> </html>

Practica:
PROBLEMAS

Pgina 224

1 - Crear un programa que permita cargar un entero en un text y al presionar un botn nos muestre dicho valor elevado al cubo (emplear la funcin alert). 2 - Cargar dos nmeros en objetos de tipo text y al presionar un botn, mostrar el mayor. 3 - Cargar un nombre y un apellido en sendos text. Al presionar un botn, concatenarlos y mostrarlos en un tercer text (Tener en cuenta que podemos modificar la propiedad value de un objeto TEXT cuando ocurre un evento).

26. Control PASSWORD

Esta marca es una variante de la de tipo "TEXT". La diferencia fundamental es que cuando se carga un texto en el campo de edicin slo muestra asteriscos en pantalla, es decir, es fundamental para el ingreso de claves y para que otros usuarios no vean los caracteres que tipeamos. La mayora de las veces este dato se procesa en el servidor. Pero podemos en el cliente (es decir en el navegador) verificar si ha ingresado una cantidad correcta de caracteres, por ejemplo.

Ejemplo: Codificar una pgina que permita ingresar una password y luego muestre
una ventana de alerta si tiene menos de 5 caracteres.
<HTML> <HEAD> <SCRIPT LANGUAGE="JavaScript"> function validar() { if (document.form1.text1.value.length<5) { alert("Ingrese al menos 5 caracteres"); document.form1.text1.value=""; } } </SCRIPT> </HEAD> <BODY> <FORM NAME="form1"> Ingrese clave(al menos 5 caracteres): <INPUT TYPE="password" NAME="text1"> <INPUT TYPE="button" ONCLICK="validar()" VALUE="Enviar"> </FORM> </BODY> </HTML>

En este problema debemos observar que cuando ingresamos caracteres dentro del campo de edicin slo vemos asteriscos, pero realmente en memoria se almacenan los caracteres tipeados. Si queremos mostrar los caracteres ingresados debemos acceder a:
document.form1.text1.value

Normalmente, a este valor no lo mostraremos dentro de la pgina, sino se perdera el objetivo de este control (ocultar los caracteres tipeados). Si necesitamos saber la cantidad de caracteres que tiene un string accedemos a la propiedad length que retorna la cantidad de caracteres.
if (document.form1.text1.value.length<5)

Ejemplo:
<HTML>

Pgina 225

<HEAD> <SCRIPT LANGUAGE="JavaScript"> function validar() { if (document.form1.text1.value.length<5) { alert("Ingrese al menos 5 caracteres"); document.form1.text1.value=""; } } </SCRIPT> </HEAD> <BODY> <FORM NAME="form1"> Ingrese clave(al menos 5 caracteres): <INPUT TYPE="password" NAME="text1"> <INPUT TYPE="button" ONCLICK="validar()" VALUE="Enviar"> </FORM> </BODY> </HTML>

Practica:
PROBLEMA 1 - Disponer dos campos de texto tipo password. Cuando se presione un botn mostrar si las dos claves ingresadas son iguales o no (es muy comn solicitar al operador el ingreso de dos veces de su clave para validar si la tipe correctamente, esto se hace cuando se crea una password para el ingreso a un sitio o para el cambio de una existente). Tener en cuenta que podemos emplear el operador == para ver si dos string son iguales.

27. Control SELECT

Este otro objeto visual que podemos disponer en un FORM permite realizar la seleccin de un string de una lista y tener asociado al mismo un valor no visible. El objetivo fundamental en JavaScript es determinar qu elemento est seleccionado y qu valor tiene asociado. Esto lo hacemos cuando ocurre el evento OnChange. Para determinar la posicin del ndice seleccionado en la lista:
document.form1.select1.selectedIndex

Considerando que el objeto SELECT se llama select1 accedemos a la propiedad selectedIndex (almacena la posicin del string seleccionado de la lista, numerando a partir de cero). Para determinar el string seleccionado:
document.form1.select1.options[document.form1.select1.selectedIndex].text

Es decir que el objeto select1 tiene otra propiedad llamada options, a la que accedemos por medio de un subndice, al string de una determinada posicin. Hay problemas en los que solamente necesitaremos el string almacenado en el objeto SELECT y no el valor asociado (no es obligatorio asociar un valor a cada string). Y por ltimo con esta expresin accedemos al valor asociado al string:
document.form1.select1.options[document.form1.select1.selectedIndex].value

Un ejemplo completo que muestra el empleo de un control SELECT es:

<html> <head>

Pgina 226

</head> <body> <script language="JavaScript"> function cambiarColor() { document.form1.text1.value = document.form1.select1.selectedIndex; document.form1.text2.value = document.form1.select1.options[document.form1.select1.selectedIndex].text; document.form1.text3.value = document.form1.select1.options [document.form1.select1.selectedIndex].value; } </script> <form name="form1"> <select size="1" name="select1" ONCHANGE="cambiarColor()"> <option value="0xff0000">Rojo</option> <option value="0x00ff00">Verde</option> <option value="0x0000ff">Azul</option> </select></p> <br> Nmero de ndice seleccionado del objeto SELECT:<input type="text" name="text1"><br> Texto seleccionado:<input type="text" name="text2"><br> Valor asociado:<input type="text" name="text3"><br> </form> </body> </html>

Se debe analizar en profundidad este problema para comprender primeramente la creacin del objeto SELECT en HTML, y cmo acceder luego a sus valores desde JavaScript. Es importante para el objeto SELECT definir qu funcin llamar cuando ocurra un cambio: onChange="cambiarColor()". Por cada opcin del objeto SELECT tenemos una lnea:
Rojo

Donde Rojo es el string que se visualiza en el objeto SELECT y value es el valor asociado a dicho string. Analizando la funcin cambiarColor() podemos ver cmo obtenemos los valores fundamentales del objeto SELECT.

Ejemplo:
<html> <head> </head> <body> <script language="JavaScript"> function cambiarColor() { document.form1.text1.value = document.form1.select1.selectedIndex; document.form1.text2.value = document.form1.select1.options[document.form1.select1.selectedIndex].text; document.form1.text3.value = document.form1.select1.options [document.form1.select1.selectedIndex].value; } </script> <form name="form1"> <select size="1" name="select1" onChange="cambiarColor()"> <option value="0xff0000">Rojo</option> <option value="0x00ff00">Verde</option> <option value="0x0000ff">Azul</option> </select></p> <br>

Pgina 227

Nmero de ndice seleccionado del objeto SELECT:<input type="text" name="text1"><br> Texto seleccionado:<input type="text" name="text2"><br> Valor asociado:<input type="text" name="text3"><br> </form> </body> </html>

Practica:
PROBLEMAS 1 - Confeccionar una pgina que muestre un objeto SELECT con distintos tipos de pizzas (Jamn y Queso, Muzzarella, Morrones). Al seleccionar una, mostrar en un objeto de tipo TEXT el precio de la misma. 2 - Generar un presupuesto de un equipo de computacin a partir de tres objetos de tipo SELECT que nos permiten seleccionar: Procesador (Pentium III - $400, Pentium IV $500). Monitor (Samsung 14' - $250, Samsung 15' - $350, Samsung 17' - $550) Disco Duro(80 Gb - $300, 240 Gb - $440, 800 Gb - $500) Para cada caracterstica indicamos string a mostrar (Ej. Pentium III) y el valor asociado a dicho string (Ej. 400). Al presionar un botn "Calcular" mostrar el presupuesto en un objeto de tipo TEXT. 3 - Confeccionar una pgina que permita seleccionar una pizza y la cantidad de unidades. Luego al presionar un botn calcular el importe a pagar. Utilizar un objeto de la clase SELECT para la seleccin de la pizza, pudiendo ser: Queso: $ 4. Jamn y queso: $ 6. Especial: $ 10. A la cantidad de pizzas cargarla en un objeto de la clase TEXT y en otro objeto de la clase TEXT mostrar el importe total a abonar. 4 - Confeccionar una pgina que permita tomar un examen mltiple choice. Se debe mostrar una pregunta y seguidamente un objeto SELECT con las respuestas posibles. Al presionar un botn mostrar la cantidad de respuestas correctas e incorrectas (Disponer 4 preguntas y sus respectivos controles SELECT).

28. Control CHECKBOX

El control CHECKBOX es el cuadradito que puede tener dos estados (seleccionado o no seleccionado). Para conocer su funcionamiento y ver como podemos acceder a su estado desde JavaScript haremos un pequea pgina. Ejemplo: Confeccionar una pgina que muestre 4 lenguajes de programacin que el usuario puede seleccionar si los conoce. Luego mostrar un mensaje indicando la cantidad de lenguajes que ha seleccionado el operador.
<html> <head> </head> <body> <script language="JavaScript"> function contarSeleccionados() { var cant=0;

Pgina 228

if (document.form1.lenguaje1.checked) cant++; if (document.form1.lenguaje2.checked) cant++; if (document.form1.lenguaje3.checked) cant++; if (document.form1.lenguaje4.checked) cant++; alert('Conoce ' + cant + ' lenguajes'); } </script> <form name="form1"> <input type="checkbox" name="lenguaje1">JavaScript <br> <input type="checkbox" name="lenguaje2">PHP <br> <input type="checkbox" name="lenguaje3">JSP <br> <input type="checkbox" name="lenguaje4">VB.Net <br> <input type="button" value="Mostrar" onClick="contarSeleccionados()"> </form> </body> </html>

Cuando se presiona el botn se llama a la funcin JavaScript contarSeleccionados(). En la misma verificamos uno a uno cada control checkbox accediendo a la propiedad checked que almacena true o false segn est o no seleccionado el control. Disponemos un 'if' para cada checkbox:
if (document.form1.lenguaje1.checked) cant++;

Al contador 'cant' lo definimos e inicializamos en cero previo a los cuatro if. Mostramos finalmente el resultado final.

Ejemplo:
<html> <head> </head> <body> <script language="JavaScript"> function contarSeleccionados() { var cant=0; if (document.form1.lenguaje1.checked) cant++; if (document.form1.lenguaje2.checked) cant++; if (document.form1.lenguaje3.checked) cant++; if (document.form1.lenguaje4.checked) cant++; alert('Conoce ' + cant + ' lenguajes'); } </script> <form name="form1"> <input type="checkbox" name="lenguaje1">JavaScript <br> <input type="checkbox" name="lenguaje2">PHP <br> <input type="checkbox" name="lenguaje3">JSP <br> <input type="checkbox" name="lenguaje4">VB.Net

Pgina 229

<br> <input type="button" value="Mostrar" onClick="contarSeleccionados()"> </form> </body> </html>

Practica:

Confeccionar una pgina que muestre tres checkbox que permitan seleccionar los deportes que practica el usuario (Futbol, Basket, Tennis) Mostrar al presionar un botn los deportes que a elegido.

29. Control RADIO

Los objetos RADIO tienen sentido cuando disponemos varios elementos. Slo uno puede estar seleccionado del conjunto. Ejemplo: Mostrar cuatro objetos de tipo RADIO que permitan seleccionar los estudios que tiene un usuario:
<html> <head> </head> <body> <script language="JavaScript"> function mostrarSeleccionado() { if (document.form1.estudios[0].checked) alert('no tienes estudios'); if (document.form1.estudios[1].checked) alert('tienes estudios primarios'); if (document.form1.estudios[2].checked) alert('tienes estudios secundarios'); if (document.form1.estudios[3].checked) alert('tienes estudios universitarios'); } </script> <form name="form1"> <input type="radio" name="estudios" value="sin estudios">Sin estudios <br> <input type="radio" name="estudios">Primarios <br> <input type="radio" name="estudios">Secundarios <br> <input type="radio" name="estudios">Universitarios <br> <input type="button" value="Mostrar" onClick="mostrarSeleccionado()"> </form> </body> </html>

Es importante notar que todos los objetos de tipo RADIO tienen el mismo name. Luego podemos acceder a cada elemento por medio de un subndice:
if (document.form1.estudios[0].checked) alert('no tienes estudios');

Igual que el checkbox, la propiedad checked retorna true o false, segn est o no seleccionado el control radio.

Ejemplo:
<html> <head> </head>

Pgina 230

<body> <script language="JavaScript"> function mostrarSeleccionado() { if (document.form1.estudios[0].checked) alert('no tienes estudios'); if (document.form1.estudios[1].checked) alert('tienes estudios primarios'); if (document.form1.estudios[2].checked) alert('tienes estudios secundarios'); if (document.form1.estudios[3].checked) alert('tienes estudios universitarios'); } </script> <form name="form1"> <input type="radio" name="estudios" value="sin estudios">Sin estudios <br> <input type="radio" name="estudios">Primarios <br> <input type="radio" name="estudios">Secundarios <br> <input type="radio" name="estudios">Universitarios <br> <input type="button" value="Mostrar" onClick="mostrarSeleccionado()"> </form> </body> </html>

Practica:

Confeccionar una pgina que muestre dos objetos de la clase RADIO solicitando que seleccione si es mayor de 18 aos o no. Al presionar un botn mostrar que radio est seleccionado.

30. Control TEXTAREA

Este control es similar al control TEXT, salvo que permite el ingreso de muchas lneas de texto. La marca TEXTAREA en HTML tiene dos propiedades: rows y cols que nos permiten indicar la cantidad de filas y columnas a mostrar en pantalla. Ejemplo: Solicitar la carga del mail y el curriculum de una persona. Mostrar un mensaje si el curriculum supera los 2000 caracteres.
<html> <head> </head> <body> <script language="JavaScript"> function controlarCaracteres() { if (document.form1.curriculum.value.length>2000) alert('curriculum muy largo'); else alert('datos correctos'); } </script> <form name="form1"> &lt;textarea name=&quot;curriculum&quot; rows="10" cols="50" &gt;&lt;/textarea&gt; <br> <input type="button" value="Mostrar" onClick="controlarCaracteres()"> </form> </body>

Pgina 231

</html>

Para saber el largo de la cadena cargada:

if (document.form1.curriculum.value.length>2000)

accedemos a la propiedad length.

Ejemplo:
<html> <head> </head> <body> <script language="JavaScript"> function controlarCaracteres() { if (document.form1.curriculum.value.length>2000) alert('curriculum muy largo'); else alert('datos correctos'); } </script> <form name="form1"> <textarea name="curriculum" rows="10" cols="50" ></textarea> <br> <input type="button" value="Mostrar" onClick="controlarCaracteres()"> </form> </body> </html>

Practica: Confeccionar una pgina de visitas a un sitio, solicitar ingresar el nombre de una persona, su mail y los comentarios (TEXTAREA). Mostrar luego llamando a la funcin alert los datos ingresados. Tener en cuenta que para acceder a las cadenas cargadas haremos:
alert(document.form1.comentarios.value);

31. Eventos onFocus y onBlur

El evento onFocus se dispara cuando el objeto toma foco y el evento onBlur cuando el objeto pierde el foco. Ejemplo: Implementar un formulario que solicite la carga del nombre y la edad de una persona. Cuando el control tome foco borrar el contenido actual, al abandonar el mismo, mostrar un mensaje de alerta si el mismo est vaco.
<html> <head></head> <body> <script language="JavaScript"> function vaciar(control) { control.value=''; } function verificarEntrada(control) { if (control.value=='') alert('Debe ingresar datos'); } </script> <form name="form1"> Ingrese su nombre: <input type="text" name="nombre" onFocus="vaciar(this)" onBlur="verificarEntrada(this)"><br>

Pgina 232

Ingrese su edad: <input type="text" name="edad" onFocus="vaciar(this)" onBlur="verificarEntrada(this)"><br> <input type="button" value="Confirmar"> </form> </body> </html>

A cada control de tipo TEXT le inicializamos los eventos onFocus y onBlur. Le indicamos, para el evento onFocus la funcin vaciar, pasando como parmetro la palabra clave this que significa la direccin del objeto que emiti el evento. En la funcin propiamente dicha, accedemos a la propiedad value y borramos su contenido. De forma similar, para el evento onBlur llamamos a la funcin verificarEntrada donde analizamos si se ha ingresado algn valor dentro del control, en caso de tener un string vaco procedemos a mostrar una ventana de alerta.

Ejemplo:
<html> <head></head> <body> <script language="JavaScript"> function vaciar(control) { control.value=''; } function verificarEntrada(control) { if (control.value=='') alert('Debe ingresar datos'); } </script> <form name="form1"> Ingrese su nombre: <input type="text" name="nombre" onFocus="vaciar(this)" onBlur="verificarEntrada(this)"><br> Ingrese su edad: <input type="text" name="edad" onFocus="vaciar(this)" onBlur="verificarEntrada(this)"><br> <input type="button" value="Confirmar"> </form> </body> </html>

Practica: Solicitar que se ingrese el nombre y la clave de un usuario. Mostrar una

ventana de alerta si en la clave se ingresan menos de 7 caracteres o ms de 20.

32. Eventos onMouseOver y onMouseOut

El evento onMouseOver se ejecuta cuando pasamos la flecha del mouse sobre un hipervnculo y el evento onMouseOut cuando la flecha abandona el mismo. Para probar estos eventos implementaremos una pgina que cambie el color de fondo del documento. Implementaremos una funcin que cambie el color con un valor que llegue como parmetro. Cuando retiramos la flecha del mouse volvemos a pintar de blanco el fondo del documento:
<html> <head></head>

Pgina 233

<body> <script language="JavaScript"> function pintar(col) { document.bgColor=col; } </script> <a href="pagina1.html" onMouseOver="pintar('#ff0000')" onMouseOut="pintar('#ffffff')">Rojo</a> <a href="pagina1.html" onMouseOver="pintar('#00ff00')" onMouseOut="pintar('#ffffff')">Verde</a> <a href="pagina1.html" onMouseOver="pintar('#0000ff')" onMouseOut="pintar('#ffffff')">Azul</a> <br> <br> <br> <a href="pagina2.html">ver segundo problema</a> </body> </html>

Las llamadas a las funciones las hacemos inicializando las propiedades onMouseOver y onMouseOut:
<a href="pagina1.html" onMouseOver="pintar('#ff0000')" onMouseOut="pintar('#ffffff')">Rojo</a>

La funcin 'pintar' recibe el color e inicializa la propiedad bgColor del objeto document.
function pintar(col) { document.bgColor=col; } El segundo problema pinta de color el interior de una casilla de una tabla y lo regresa a su color original cuando salimos de la misma: <html> <head></head> <body> <script language="JavaScript"> function pintar(objeto,col) { objeto.bgColor=col; } </script> <table border="1"> <tr> <td onMouseOver="pintar(this,'#ff0000')" onMouseOut="pintar(this,'#ffffff')">rojo</td> <td onMouseOver="pintar(this,'#00ff00')" onMouseOut="pintar(this,'#ffffff')">verde</td> <td onMouseOver="pintar(this,'#0000ff')" onMouseOut="pintar(this,'#ffffff')">azul</td> </tr> </table> </body> </html>

La lgica es bastante parecida a la del primer problema, pero en ste, le pasamos como parmetro a la funcin, la referencia a la casilla que queremos que se coloree (this):
<td onMouseOver="pintar(this,'#ff0000')" onMouseOut="pintar(this,'#ffffff')">rojo</td>

Ejemplo:
Pagina1.html
<html>

Pgina 234

<head></head> <body> <script language="JavaScript"> function pintar(col) { document.bgColor=col; } </script> <a href="pagina1.html" onMouseOver="pintar('#ff0000')" onMouseOut="pintar('#ffffff')">Rojo</a> <a href="pagina1.html" onMouseOver="pintar('#00ff00')" onMouseOut="pintar('#ffffff')">Verde</a> <a href="pagina1.html" onMouseOver="pintar('#0000ff')" onMouseOut="pintar('#ffffff')">Azul</a> <br> <br> <br> <a href="pagina2.html">ver segundo problema</a> </body> </html>

Pagina2.html
<html> <head></head> <body> <script language="JavaScript"> function pintar(objeto,col) { objeto.bgColor=col; } </script> <table border="1"> <tr> <td onMouseOver="pintar(this,'#ff0000')" onMouseOut="pintar(this,'#ffffff')">rojo</td> <td onMouseOver="pintar(this,'#00ff00')" onMouseOut="pintar(this,'#ffffff')">verde</td> <td onMouseOver="pintar(this,'#0000ff')" onMouseOut="pintar(this,'#ffffff')">azul</td> </tr> </table> </body> </html>

Practica:

Modificar el segundo problema resuelto (las casillas de la tabla que cambian el color cuando ingresamos con el mouse) para permitir llamar mediante hipervnculos a distintos programas que administran web-mail (gmail, hotmail y yahoo)

33. Evento onLoad

El evento onLoad se ejecuta cuando cargamos una pgina en el navegador. Uno de los usos ms frecuentes es para fijar el foco en algn control de un formulario, para que el operador no tenga que activar con el mouse dicho control. Este evento est asociado a la marca body. La pgina completa es:
<html> <head></head> <body onLoad="activarPrimerControl()"> <script language="JavaScript">

Pgina 235

function activarPrimerControl() { document.form1.nombre.focus(); } </script> <form name="form1"> Ingrese su nombre: <input type="text" name="nombre"><br> Ingrese su edad: <input type="text" name="edad"><br> <input type="button" value="Confirmar"> </form> </body> </html>

En la marca body inicializamos el evento onLoad con la llamada a la funcin activarPrimerControl:

<body onLoad="activarPrimerControl()">

La funcin da el foco al control text donde se cargar el nombre:

function activarPrimerControl() { document.form1.nombre.focus(); } Ejemplo: <html> <head></head> <body onLoad="activarPrimerControl()"> <script language="JavaScript"> function activarPrimerControl() { document.form1.nombre.focus(); } </script> <form name="form1"> Ingrese su nombre: <input type="text" name="nombre"><br> Ingrese su edad: <input type="text" name="edad"><br> <input type="button" value="Confirmar"> </form> </body> </html>

Practica: Confeccionar una funcin que mueva la ventana a la coordenada (20,20)

cuando se cargue la pgina (la funcin que desplaza la ventana del navegador a una determinada coordenada se llama moveTo y tiene dos parmetros que indican la columna y la fila en pixeles.

34. El objeto window.

Al objeto window lo hemos estado usando constantemente. Representa la ventana del navegador. window es un objeto global y tiene los siguienes mtodos:
alert: Muestra un dilogo de alerta con un mensaje (a esta responsabilidad la hemos utilizado desde los primeros temas) prompt: Muestra un dilogo para la entrada de un valor de tipo string (utilizado desde el primer momento) confirm: Muestra un dilogo de confirmacin con los botones Confirmar y Cancelar. open y close: abre o cierra una ventana del navegador. Podemos especificar el tamao de la ventana, su contenido, etc.

Pgina 236

[Variable=][window.]open(URL, nombre, propiedades) Permite crear (y abrir) una nueva ventana. Si queremos tener acceso a ella desde la ventana donde la creamos, deberemos asignarle una variable, sino simplemente invocamos el mtodo: el navegador automticamente sabr que pertenece al objeto window. El parmetro URL es una cadena que contendr la direccin de la ventana que estamos abriendo: si est en blanco, la ventana se abrir con una pgina en blanco. Las propiedades son una lista, separada por comas, de algunos de los siguientes elementos: toolbar[=yes|no] location[=yes|no] directories[=yes|no] status[=yes|no] menubar[=yes|no] scrollbars[=yes|no] resizable[=yes|no] width=pixels height=pixels

Es bueno hacer notar que a todas estas funciones las podemos llamar anteponindole el nombre del objeto window, seguida del mtodo o en forma resumida indicando solamente el nombre del mtodo (como lo hemos estado haciendo), esto es posible ya que el objeto window es el objeto de mximo nivel.
Ej:
valor=window.prompt("Ingrese valor","");

o
valor=prompt("Ingrese valor","");

Para reducir la cantidad de caracteres que se tipean normalmente encontraremos los programas tipeados de la segunda forma. El siguiente programa muestra varios de los mtodos disponibles del objeto window:
<HTML> <HEAD> <SCRIPT LANGUAGE="JavaScript"> function cerrar() { close(); // podemos escribir window.close(); } function abrir() { var ventana=open(); ventana.document.write("Estoy escribiendo en la nueva ventana<br>"); ventana.document.write("Segunda linea"); } function abrirParametros() { var ventana=open('','','status=yes,width=400,height=250,menubar=yes'); ventana.document.write("Esto es lo primero que aparece<br>"); } function mostrarAlerta() { alert("Esta ventana de alerta ya la utilizamos en otros problemas."); } function confirmar() { var respuesta=confirm("Presione alguno de los dos botones"); if (respuesta==true) alert("presion aceptar");

Pgina 237

else alert("presion cancelar"); } function cargarCadena() { var cad=prompt("cargue una cadena:",""); alert("Usted ingreso "+cad); } </SCRIPT> </HEAD> <BODY> Este programa permite analizar la llamada a distintas responsabilidades del objeto window.<br> <FORM> <input type="button" value="close()" onClick="cerrar()"> <br><br> <input type="button" value="open()" onClick="abrir()"> <br><br> <input type="button" value="open con parmetros" onClick="abrirParametros()" > <br><br> <input type="button" value="alert" onClick="mostrarAlerta()"> <br><br> <input type="button" value="confirm" onClick="confirmar()"> <br><br> <input type="button" value="prompt" onClick="cargarCadena()"> </FORM> </BODY> </HTML>

Ejemplo:
<HTML> <HEAD> <SCRIPT LANGUAGE="JavaScript"> function cerrar() { close(); // podemos escribir window.close(); } function abrir() { var ventana=open(); ventana.document.write("Estoy escribiendo en la nueva ventana<br>"); ventana.document.write("Segunda linea"); } function abrirParametros() { var ventana=open('','','status=yes,width=400,height=250,menubar=yes'); ventana.document.write("Esto es lo primero que aparece<br>"); } function mostrarAlerta() { alert("Esta ventana de alerta ya la utilizamos en otros problemas."); } function confirmar() { var respuesta=confirm("Presione alguno de los dos botones"); if (respuesta==true)

Pgina 238

alert("presion aceptar"); else alert("presion cancelar"); } function cargarCadena() { var cad=prompt("cargue una cadena:",""); alert("Usted ingreso "+cad); } </SCRIPT> </HEAD> <BODY> Este programa permite analizar la llamada a distintas responsabilidades del objeto window.<br> <FORM> <input type="button" value="close()" onClick="cerrar()"> <br><br> <input type="button" value="open()" onClick="abrir()"> <br><br> <input type="button" value="open con parmetros" onClick="abrirParametros()" > <br><br> <input type="button" value="alert" onClick="mostrarAlerta()"> <br><br> <input type="button" value="confirm" onClick="confirmar()"> <br><br> <input type="button" value="prompt" onClick="cargarCadena()"> </FORM> </BODY> </HTML>

Practica:

Confeccionar una pgina que permita abrir otra ventana cuando se presiona un botn. Dicha ventana debe tener como ancho 600 pixeles y alto 300 pixeles, y debe mostrar el men y su barra de herramientas.

35. Propiedad location del objeto window

El objeto location colabora directamente con el objeto window:

Pgina 239

Cuando le asignamos una nueva direccin a la propiedad location del objeto window, el navegador redirecciona a dicha pgina. Implementaremos un pequeo ejemplo para ver la utilidad de esta propiedad: Supongamos que tenemos un hipervnculo que al ser presionado muestre una vetana de confirmacin, si queremos ingresar a un sitio para mayores. En caso que el visitante presione el botn afirmativo, redireccionamos a otra pgina, en caso contrario mostramos un mensaje:
<html> <head> </head> <body> <script language="javascript"> function verificarMayorEdad() { if (window.confirm('Es mayor de edad?')) window.location='pagina2.html'; else window.alert('Cuando sea mayor de edad podr ingresar'); } </script> <a href="javascript:verificarMayorEdad()">Ingresar al sitio para mayores</a> </body> </html>

Lo primero que tenemos que indicar es que para llamar a una funcin de javascript desde un hipervnculo debemos anteceder la palabra javascript seguida de dos puntos y por ltimo, el nombre de la funcin:
<a href="javascript:verificarMayorEdad()">

La funcin verificarMayorEdad muestra la ventana con los botones confirmar y cancelar (recordar que el mtodo confirm del objeto window hace esto en forma automtica). Si se presiona el botn confirmar, la funcin confirm retorna true y por lo tanto se ejecuta el verdadero del if:
if (window.confirm('Es mayor de edad?')) window.location='pagina2.html'; else window.alert('Cuando sea mayor de edad podr ingresar');

Recordar que anteceder la palabra window a estas funciones y propiedades es opcional. Por ltimo la pgina que se redirecciona es:
<html> <head> <title>Problema</title> </head> <body> Bienvenido al sitio para adultos. </body> </html> Ejemplo: Pagina1.html <html> <head> </head> <body> <script language="javascript"> function verificarMayorEdad()

Pgina 240

{ if (window.confirm('Es mayor de edad?')) window.location='pagina2.html'; else window.alert('Cuando sea mayor de edad podr ingresar'); } </script> <a href="javascript:verificarMayorEdad()">Ingresar al sitio para mayores</a> </body> </html> Pagina2.html <html> <head> <title>Problema</title> </head> <body> Bienvenido al sitio para adultos. </body> </html>

Practica: Confeccionar una pgina que tenga un hipervnculo. Cuando se presione

dicho hipervnculo generar un valor aleatorio entre 0 y 2. Si se genera el 0 llamar al webmail de hotmail, si se genera un 1 llamar a gmail en caso de generarse un 2 llamar a yahoo. Para generar un valor aleatorio utilizar la funcin random del objeto Math.
var num; num=Math.random()*3; //se guarda en num un valor comprendido entre 0.00001 y 2.99999 num=parseInt(num); //guardamos solo la parte entera de la variable num if (num==1) window.location='http://www.hotmail.com'; .....

36. Propiedad history del objeto window

El objeto history colabora directamente con el objeto window:

Pgina 241

El objeto history almacena todas las pginas que visitamos. Luego, con una serie de funciones, podemos extraer de la memoria de la computadora las pginas ya visitadas, sin tener que pedirlas nuevamente al servidor. Cuenta con las siguientes funciones:
window.history.back(); //Retrocede a la pgina anterior window.history.forward(); //Avanza a la pgina siguiente almacenada en la cache de la mquina. window.history.go(); //Avanza o retrocede en la lista de pginas visitadas.

Llamar a la funcin back, tiene el mismo comportamiento que presionar el botn "Atrs" del navegador.

Ejemplo:

El siguiente ejemplo nos permite cargar una segunda pgina y luego retroceder a la primera pgina sin tener que solicitarla nuevamente al servidor:
<html> <head> <title>Problema</title> <script language="javascript"> function avanzar() { window.history.go(1); } </script> </head> <body> <a href="pagina2.html">Ir a la pgina 2</a> <br> <br> <a href="javascript:avanzar()">Extraer del cache la segunda pgina</a> </body> </html>

En esta primera pgina, la primera vez, debemos cargar la segunda pgina seleccionando el hipervnculo pagina2. La segunda pgina:
<html> <head> <title>Problema</title> <script languge="javascript"> function retornar() { window.history.go(-1); } </script> </head> <body> <a href="javascript:retornar()">Retornar</a> </body> </html>

En la segunda pgina, mediante el mtodo go y pasndole un valor negativo, retrocedemos a la primera pgina sin tener la necesidad de recargarla. Podemos mejorar el ejemplo accediendo al atributo length (almacena la cantidad de pginas de la lista) del objeto history:
if (window.history.length>0) window.history.go(1); else alert('no hay otra pgina en la cache hacia adelante'); Ejemplo: Pagina1.html <html>

Pgina 242

<head> <title>Problema</title> <script language="javascript"> function avanzar() { window.history.go(1); } </script> </head> <body> <a href="pagina2.html">Ir a la pgina 2</a> <br> <br> <a href="javascript:avanzar()">Extraer del cache la segunda pgina</a> </body> </html> Pagina2.html <html> <head> <title>Problema</title> <script languge="javascript"> function retornar() { window.history.go(-1); } </script> </head> <body> <a href="javascript:retornar()">Retornar</a> </body> </html>

Practica:

Confeccionar tres pginas. Disponer tres hipervnculos, uno en cada pgina. Configurar el primer hipervnculo con la direccin de la segunda pgina, el hipervnculo de la segunda pgina debe cargar la tercera pgina y por ltimo, la tercera pgina debe retroceder a la primera pgina mediante el mtodo go del objeto history (pasndole un nmero negativo como parmetro).

37. Propiedad screen del objeto window

El objeto screen colabora directamente con el objeto window:

Pgina 243

El objeto screen ofrece informacin acerca del monitor donde se est ejecutando el navegador. La propiedades principales del objeto screen son:
availHeight : El alto de la pantalla en pixeles disponible para el navegador. availWidth : El ancho de la pantalla en pixeles disponible para el navegador. colorDepth : Representa el nmero de bits usados para representar los colores. height : El alto de la pantalla en pixeles. width : El ancho de la pantalla en pixeles.

El siguiente programa muestra el valor almacenado en las cinco propiedades que tiene el objeto screen:
<html> <head> <title>Problema</title> </head> <body> <script language="javascript"> document.write('Valores de las propiedades del objeto screen:<br>'); document.write('availHeight :' + screen.availHeight + '<br>'); document.write('availWidth :' + screen.availWidth + '<br>'); document.write('height :' + screen.height + '<br>'); document.write('width :' + screen.width + '<br>'); document.write('colorDepth :' + screen.colorDepth); </script> </body> </html>

No olvidar que el objeto screen es una propiedad del objeto window, por lo que haber dispuesto la sintaxis: window.screen.width etc. es la forma ms completa, pero ms tediosa de escribir (recordar que el objeto window es el principal y lo podemos obviar cuando accedemos a sus propiedades o mtodos).

Ejemplo:
<html> <head> <title>Problema</title> </head> <body> <script language="javascript"> document.write('Valores de las propiedades del objeto screen:<br>'); document.write('availHeight :' + screen.availHeight + '<br>'); document.write('availWidth :' + screen.availWidth + '<br>'); document.write('height :' + screen.height + '<br>'); document.write('width :' + screen.width + '<br>'); document.write('colorDepth :' + screen.colorDepth); </script> </body> </html>

Practica:
PROBLEMAS 1 - Confeccionar un programa que agrande el tamao de la ventana del navegador y ocupe toda la pantalla. Ayuda: Confeccionar una funcin que se dispare para el evento onLoad de la marca Body:
<body onLoad="redimensionar()">

La funcin redimensionar debe llamar a la funcin resizeTo del objeto window:

window.resizeTo(640,480);

Pgina 244

Si ejecutamos esto, el tamao de la ventana del navegador se redimensionar tomando como ancho el valor 640 y como alto 480. 2 - Confeccionar un programa que cuando muestre la pgina, redimensione la ventana del navegador y la centre en la pantalla dejando 50 pixeles arriba, abajo, izquierda y derecha. Aca tambin tenemos que utilizar otra funcin del objeto window llamada moveTo (desplaza la ventana del navegador a una determinada fila y columna de la pantalla):
function redimensionar() { window.moveTo(50,50); window.resizeTo(window.screen.width - ? ,window.screen.height - ?); }

Qu valor debemos disponer en los signos de interrogacin ?

38. Propiedad navigator del objeto window

Contiene informacin sobre el navegador web. La implementacin de este objeto vara entre navegadores (IExplorer, FireFox, Opera, etc.) Las propiedades comunes a estos navegadores son:
appName : almacena el nombre oficial del navegador. appVersion : almacena la versin del navegador. cookieEnabled : almacena si las cookies estn activas en el navegador. platform : almacena la plataforma donde el navegador se est ejecutando. plugins : almacena un array de los plugin cargados en el navegador.

Este pequeo programa muestra los valores de las propiedades antes anunciadas:
<html> <head> <title>Problema</title> </head> <body> <script language="javascript"> document.write('Valores de las propiedades del objeto navigator:<br>'); document.write('appName :' + navigator.appName + '<br>'); document.write('appVersion :' + navigator.appVersion + '<br>'); document.write('cookieEnabled :' + navigator.cookieEnabled + '<br>'); document.write('plugins :' + navigator.plugins.length + '<br>'); </script> </body> </html> Ejemplo: <html> <head> <title>Problema</title> </head> <body> <script language="javascript"> document.write('Valores de las propiedades del objeto navigator:<br>'); document.write('appName :' + navigator.appName + '<br>'); document.write('appVersion :' + navigator.appVersion + '<br>'); document.write('cookieEnabled :' + navigator.cookieEnabled + '<br>'); document.write('plugins :' + navigator.plugins.length + '<br>'); </script> </body> </html>

Practica:
Explorer.

Pintar el fondo del navegador de rojo si el navegador es el Internet

Pgina 245

Para cambiar el color de fondo debemos acceder a la propiedad bgColor del objeto document:
document.bgColor='#ff0000';

39. Archivo JavaScript externo (*.js)

El lenguaje JavaScript permite agrupar funciones y disponerlas en un archivo separado a la pgina HTML. Esto trae muchos beneficios: - Reutilizacin de funciones en muchos archivos. No tenemos que copiar y pegar sucesivamente las funciones en las pginas en las que necesitamos. - Facilita el mantenimiento de las funciones al encontrarse en archivos separados. - Nos obliga a ser ms ordenados. La mecnica para implementar estos archivos externos en JavaScript es: 1 - Crear un archivo con extensin *.js y tipear las funciones en la misma:
function retornarFecha() { var fecha fecha=new Date(); var cadena=fecha.getDate()+'/'+(fecha.getMonth()+1)+'/'+fecha.getYear(); return cadena; } function retornarHora() { var fecha fecha=new Date(); var cadena=fecha.getHours()+':'+fecha.getMinutes()+':'+fecha.getSeconds(); return cadena; }

2 - Creamos un archivo html que utilizar las funciones contenidas en el archivo *.js:
<html> <head> <title>Problema</title> <script language="javascript" type="text/javascript" src="pagina2.js"></script> </head> <body> <script language="javascript"> document.write('La fecha de hoy es:'+retornarFecha()); document.write('<br>'); document.write('La hora es:'+retornarHora()); </script> </body> </html>

Es decir debemos disponer el siguiente cdigo para importar el archivo *.js:

<script language="javascript" type="text/javascript" src="pagina2.js"></script>

Mediante la propiedad src indicamos el nombre del archivo a importar. Luego, podemos llamar dentro de la pgina HTML, a las funciones que contiene el archivo externo *.js; en nuestro ejemplo llamamos a las funciones retornarFecha() y retornarHora(). Como podemos ver, el archivo html queda mucho ms limpio.

Ejemplo:
Pagina1.html

Pgina 246

<html> <head> <title>Problema</title> <script language="javascript" type="text/javascript" src="pagina2.js"></script> </head> <body> <script language="javascript"> document.write('La fecha de hoy es:'+retornarFecha()); document.write('<br>'); document.write('La hora es:'+retornarHora()); </script> </body> </html>

Pagina2.js
function retornarFecha() { var fecha fecha=new Date(); var cadena=fecha.getDate()+'/'+(fecha.getMonth()+1)+'/'+fecha.getYear(); return cadena; } function retornarHora() { var fecha fecha=new Date(); var cadena=fecha.getHours()+':'+fecha.getMinutes()+':'+fecha.getSeconds(); return cadena; }

Practica:

Confeccionar una funcion en un archivo externo (*.js) que solicite la carga del nombre de un usuario y lo retorne. Luego, otra funcin que permita ingresar una clave y la muestre en la pgina.

40. Programacin orientada a objetos en JavaScript.

El lenguaje JavaScript no es un lenguaje orientado a objetos completo, pero permite definir clases con sus atributos y responsabilidades. Finalmente nos permite definir objetos de estas clases. Pero el otro pilar de la programacin orientada a objetos, es decir la herencia, no est implementada en el lenguaje. Veremos la sintaxis para la declaracin de una clase y la posterior definicin de objetos de la misma. Desarrollaremos una clase que represente un cliente de un banco. La clase cliente tiene como atributos:
nombre saldo

y las responsabilidades o mtodos de la clase son:

Constructor (inicializamos los atributos del objeto) depositar extraer

Para acostumbrarnos a trabajar en un archivo separado, implementamos 'pagina2.js' que contiene la clase cliente con sus mtodos (funciones) y sus atributos (variables):
function cliente(nombre,saldo)

Pgina 247

{ this.nombre=nombre; this.saldo=saldo; this.depositar=depositar; this.extraer=extraer; } function depositar(dinero) { this.saldo=this.saldo+dinero; } function extraer(dinero) { this.saldo=this.saldo-dinero; }

El nombre de la clase coincide con el nombre de la funcin principal que implementamos (tambin llamado constructor de la clase):
function cliente(nombre,saldo) { this.nombre=nombre; this.saldo=saldo; this.depositar=depositar; this.extraer=extraer; }

A esta funcin llegan como parmetro los valores con que queremos inicializar los atributos. Con la palabra clave 'this' diferenciamos los atributos de los parmetros (los atributos deben llevar la palabra clave this)
this.nombre=nombre; this.saldo=saldo;

Tambin en el constructor inicializamos la referencia a todos los mtodos que contendr la clase:
this.depositar=depositar; this.extraer=extraer;

Por ltimo, implementamos todos los mtodos de la clase:

function depositar(dinero) { this.saldo=this.saldo+dinero; } function extraer(dinero) { this.saldo=this.saldo-dinero; }

De nuevo recordemos que diferenciamos los atributos de la clase por la palabra clave this. Ahora veamos el archivo HTML que incorpora el archivo JS y define un objeto de la clase planteada:
<html> <head> <title>Problema</title> <script language="javascript" src="pagina2.js" type="text/javascript"> </script> </head> <body> <script language="javascript"> var cliente1; cliente1=new cliente('diego',1200);

Pgina 248

document.write('Nombre del cliente:'+cliente1.nombre+'<br>'); document.write('Saldo actual:'+cliente1.saldo+'<br>'); cliente1.depositar(120); document.write('Saldo luego de depositar $120---->'+cliente1.saldo+'<br>'); cliente1.extraer(1000); document.write('Saldo luego de extraer $1000---->'+cliente1.saldo+'<br>'); </script> </body> </html>

Recordemos que lo primero que hacemos, segn lo visto en conceptos anteriores, es importar el archivo *.js:
<script language="javascript" src="pagina2.js" type="text/javascript">

Luego, la sintaxis para la creacin de un objeto de la clase cliente es:

var cliente1; cliente1=new cliente('diego',1200);

Similar a conceptos anteriores cuando definiamos objetos de la clase Date o Array. Con el operador new se crea un objeto de la clase cliente y se llama inmediatamente el constructor de la clase. El constructor retorna una referencia del objeto que se almacena en la variable cliente1. De ah en ms podemos acceder a los atributos y llamar a los mtodos del objeto cliente1 de la clase cliente:
document.write('Nombre del cliente:'+cliente1.nombre+'<br>'); document.write('Saldo actual:'+cliente1.saldo+'<br>'); cliente1.depositar(120); document.write('Saldo luego de depositar $120---->'+cliente1.saldo+'<br>'); cliente1.extraer(1000); document.write('Saldo luego de extraer $1000---->'+cliente1.saldo+'<br>');

Podemos decir que la ventaja que podemos obtener con el planteo de clases es hacer nuestros programas mucho ms organizados, entendibles y fundamentalmente, poder reutilizar clases en distintos proyectos.

Ejemplo:
Pagina1.html
<html> <head> <title>Problema</title> <script language="javascript" src="pagina2.js" type="text/javascript"> </script> </head> <body> <script language="javascript"> var cliente1; cliente1=new cliente('diego',1200); document.write('Nombre del cliente:'+cliente1.nombre+'<br>'); document.write('Saldo actual:'+cliente1.saldo+'<br>'); cliente1.depositar(120); document.write('Saldo luego de depositar $120---->'+cliente1.saldo+'<br>'); cliente1.extraer(1000); document.write('Saldo luego de extraer $1000---->'+cliente1.saldo+'<br>'); </script> </body> </html>

Pagina2.js
function cliente(nombre,saldo) { this.nombre=nombre;

Pgina 249

this.saldo=saldo; this.depositar=depositar; this.extraer=extraer; } function depositar(dinero) { this.saldo=this.saldo+dinero; } function extraer(dinero) { this.saldo=this.saldo-dinero; }

Practica: Confeccionar una clase llamada suma, que contenga dos atributos (valor1,
valor2) y tres mtodos: cargarvalor1, cargarvalor2 y retornarresultado. Implementar la clase suma en un archivo separado. La definicin de un objeto de la clase que deben plantear es:
var s=new suma(); s.primervalor(10); s.segundovalor(20); document.write('La suma de los dos valores es:'+s.retornarresultado());

41. Definicin de varias clases.

En JavaScript podemos definir varias clases en un mismo archivo *.js. Vamos a desarrollar un programa que contenga dos clases. Plantearemos una clase numeroquiniela que representa una persona que elige un nmero de quiniela y adems registra su nombre, la clase tiene por objetivo la carga por el teclado del nmero deseado. Por otra parte crearemos una clase bolillero que sortee un valor aleatorio entre 0 y 9 (que representa el valor extraido del bolillero). La codificacin de las dos clases es:
//clase numeroquiniela ************************************************ function numeroquiniela(nombre) { this.nombre=nombre; this.cargarnumero=cargarnumero; } function cargarnumero() { this.numero=prompt("Que nmero de quiniela quiere?",""); } function verificarsigano(num) { if (this.numero==num) return true; else return false; } //clase bolillero ************************************************ function bolillero() { this.numero=-1; } function sortear() {

Pgina 250

this.numero=Math.random()*11; }

Al constructor de la clase numeroquiniela llega como parmetro el nombre de la persona que la compra (podamos cargarlo por teclado al nombre tambin). Al nmero que selecciona lo cargamos por teclado. La clase numeroquiniela adems tiene otra responsabilidad, que es avisarnos si a ganado segn el nmero sorteado. Por otro lado en la pgina html definimos dos objetos de la clase numeroquiniela y uno de la clase bolillero:
<html> <head> <title>Problema</title> <script language="javascript" src="pagina2.js" type="text/javascript"> </script> </head> <body> <script language="javascript"> var numeroquiniela1; numeroquiniela1=new numeroquiniela("juan"); numeroquiniela1.cargarnumero(); var numeroquiniela2; numeroquiniela2=new numeroquiniela("ana"); numeroquiniela2.cargarnumero(); var bolillero; bolillero=new bolillero(); bolillero.sortear(); document.write('Numero sorteado:' + bolillero.numero + '<br>'); document.write(numeroquiniela1.nombre + ' eligi ' + numeroquiniela1.numero +'<br>'); document.write(numeroquiniela2.nombre + ' eligi ' + numeroquiniela2.numero +'<br>'); if (numeroquiniela1.numero==bolillero.numero) document.write(numeroquiniela1.nombre + ' a ganado <br>'); if (numeroquiniela2.numero==bolillero.numero) document.write(numeroquiniela2.nombre + ' a ganado <br>'); </script> </body> </html>

Ejemplo:
Pagina1.html
<html> <head> <title>Problema</title> <script language="javascript" src="pagina2.js" type="text/javascript"> </script> </head> <body> <script language="javascript"> var numeroquiniela1; numeroquiniela1=new numeroquiniela("juan"); numeroquiniela1.cargarnumero(); var numeroquiniela2; numeroquiniela2=new numeroquiniela("ana"); numeroquiniela2.cargarnumero(); var bolillero; bolillero=new bolillero(); bolillero.sortear(); document.write('Numero sorteado:' + bolillero.numero + '<br>'); document.write(numeroquiniela1.nombre + ' eligi ' + numeroquiniela1.numero +'<br>');

Pgina 251

document.write(numeroquiniela2.nombre + ' eligi ' + numeroquiniela2.numero +'<br>'); if (numeroquiniela1.numero==bolillero.numero) document.write(numeroquiniela1.nombre + ' a ganado <br>'); if (numeroquiniela2.numero==bolillero.numero) document.write(numeroquiniela2.nombre + ' a ganado <br>'); </script> </body> </html>

Pagina2.js
//clase numeroquiniela ************************************************ function numeroquiniela(nombre) { this.nombre=nombre; this.cargarnumero=cargarnumero; } function cargarnumero() { this.numero=prompt("Que nmero de quiniela quiere?",""); } function verificarsigano(num) { if (this.numero==num) return true; else return false; } //clase bolillero ************************************************ function bolillero() { this.numero=-1; this.sortear=sortear; } function sortear() { this.numero=parseInt(Math.random()*11); }

Practica: Plantear una clase persona (que permita cargar por teclado su nombre y
edad). Por otro lado crear una clase empresa que tenga como atributos el nombre y la edad tope para que una persona pueda ingresar como trabajador en la misma. Confeccionar en la pgina HTML un pequeo programa en JavaScript que defina 3 objetos de la clase persona y 1 de la clase empresa. Mostrar cuntas de esas personas estn inhabilidadas para ingresar como trabajadores.

42. Vectores con componentes de tipo objeto.

Podemos crear vectores con componente de tipo objeto. Con un ejemplo veremos la sintaxis para trabajar con los mismos. Desarrollaremos una clase que represente un hipervnculo y luego definiremos un vector con componentes de tipo hipervinculo. La clase hipervnculo es:
function hipervinculo(direccion,titulo) {

Pgina 252

this.direccion=direccion; this.titulo=titulo; this.retornarhipervinculo=retornarhipervinculo; } function retornarhipervinculo() { var cadena; cadena='<a href=' + this.direccion + '>' + this.titulo + '</a>'; return cadena; }

Luego el archivo html que hace uso de la clase hipervnculo es:

<html> <head> <title>Problema</title> <script language="javascript" src="pagina2.js" type="text/javascript"></script> </head> <body> <script language="javascript"> var vector=new Array(); vector[0]=new hipervinculo('http://www.google.com','google'); vector[1]=new hipervinculo('http://www.msn.com','msn'); vector[2]=new hipervinculo('http://www.yahoo.com','yahoo'); for(f=0;f<vector.length;f++) { document.write(vector[f].retornarhipervinculo()); document.write('<br>'); } </script> </body> </html>

Creamos un objeto de la clase Array y luego guardamos en cada componente un objeto de la clase hipervnculo (pasndole como parmetros al constructor, la direccin del sitio y el texto a mostrar en la pgina. Luego recorremos con un 'for' las componentes del vector e imprimimos en la pgina cada hipervnculo.

Ejemplo:
Pagina1.html
<html> <head> <title>Problema</title> <script language="javascript" src="pagina2.js" type="text/javascript"></script> </head> <body> <script language="javascript"> var vector=new Array(); vector[0]=new hipervinculo('http://www.google.com','google'); vector[1]=new hipervinculo('http://www.msn.com','msn'); vector[2]=new hipervinculo('http://www.yahoo.com','yahoo'); for(f=0;f<vector.length;f++) { document.write(vector[f].retornarhipervinculo()); document.write('<br>'); } </script> </body> </html>

Pagina2.js
function hipervinculo(direccion,titulo) {

Pgina 253

this.direccion=direccion; this.titulo=titulo; this.retornarhipervinculo=retornarhipervinculo; } function retornarhipervinculo() { var cadena; cadena='<a href=' + this.direccion + '>' + this.titulo + '</a>'; return cadena; }

Practica:

Confeccionar una clase persona que permita almacenar el nombre y la edad. Luego definir un vector de 4 componentes de tipo persona. Imprimir el nombre de la persona de mayor edad; decir tambin si hay ms de una persona con la edad mayor.

Pgina 254