Académique Documents
Professionnel Documents
Culture Documents
HTML Bsico, Hojas de Estilo y JAVASCRIPT Ingeniera de Sistemas Computacionales Universidad Tecnolgica Costarricense
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.
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.
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.
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
2.
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.
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.
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>
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>
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
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>
6.
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>
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.
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>
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>
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
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.
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/)
Pgina 21
</body> </html>
9.
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
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.
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.
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>
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".
Pgina 25
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
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.
Pgina 26
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>
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.
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
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
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.
Pgina 33
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.
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
Pgina 35
Practica:
Confeccione una lista de definicin de un conjunto de palabras que utilice en su mbito laboral.
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>
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">
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)
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.
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
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.
Si por el contrario queremos que una celda se extienda a nivel de filas luego hacemos:
<td rowspan="3">Secciones</td>
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
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.
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>
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>
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>
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>
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
//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 < 12*z </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)
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>
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)
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
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.
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.
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)
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.
Pgina 54
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.
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>
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.
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">
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>
Pgina 58
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="
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"
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>
Pgina 60
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>
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>
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.
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.
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
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.
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>
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.
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>
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>
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.
Practica:
Confeccionar un formulario que permita solicitar pizzas a domicilio. Enviar el pedido a la direccin de correo pizzashumm@gmail.com
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.
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>
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
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%"
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)
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%,*;>
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>
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.
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
Practica: Confeccionar una pgina que muestre dos iframes de 300*300 pxeles
cada uno. Hacer que las barras de desplazamiento siempre esten visibles.
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.
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
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>
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
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>
2. 3. 4.
Agregamos el meta:
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
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>
Pgina 93
2. 3. 4.
Agregamos el meta:
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
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>
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 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
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
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.
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
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>
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.
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
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.
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.
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>
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.
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
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;
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
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.
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)
Pgina 109
de de de de de
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.
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;
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, 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.
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>
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.
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.
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>
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.
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
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>
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).
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>
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.
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.
estilos.css
body { background-color:#eeeeee; } .resaltado{ color:#000000; background-color:#ffff00; font-style:italic; }
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; }
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>
Pgina 124
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.
Pgina 125
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>
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
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; }
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
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.
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.
Pgina 130
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:
estilos.css
p { background-color:#ffffaa; margin:0px;
Pgina 131
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>
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).
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; }
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); }
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).
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
Es importante recordar que font-size y font-family deben ser los ltimos valores inicializados y en ese orden. No debemos separar por coma.
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.
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>
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
<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.
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>
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.
Pgina 140
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; }
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>
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.
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; }
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; }
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
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>
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
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
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;
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.
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.
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; }
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.
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>)
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>
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
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;
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
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
Ejemplo:
ancla. pagina1.html
<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
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
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; }
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
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.
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>
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.
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>
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.
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; }
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.
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
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:
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.
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
Practica:
resuelto.
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; }
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; }
Cul es el resultado?
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>
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; }
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 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.
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 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>
5.
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.
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.
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
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.
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
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
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%.
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.
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'.
Pgina 194
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>
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.
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.
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
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.
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.
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
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
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
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.
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
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 ';
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);
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
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
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.
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)
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)
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
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
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.
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()
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>
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>
Pgina 219
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();
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.
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
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.
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).
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.
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
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).
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
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.
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.
Pgina 231
</html>
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);
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>
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)
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>
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.
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>
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).
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()">
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 - ?); }
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.
Pgina 245
Para cambiar el color de fondo debemos acceder a la propiedad bgColor del objeto document:
document.bgColor='#ff0000';
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>
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.
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;
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">
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
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());
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.
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; }
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