Programación IV

HTML Básico, Hojas de Estilo y JAVASCRIPT Ingeniería de Sistemas Computacionales Universidad Tecnológica Costarricense

PROGRAMACIÓN WEB BÁSICO
Tomado de varios documentos publicados en la Internet

Contenido
HTML ......................................................................................................................... 13 1. Qué es HTML?...................................................................................................... 13 2. Estructura interna de una página HTML. .............................................................. 13 Ejemplo: .................................................................................................................. 14 Practica: .................................................................................................................. 14 3. Salto de línea <br> ............................................................................................... 14 Ejemplo: .................................................................................................................. 15 Practica: .................................................................................................................. 15 4. Párrafo <p> .......................................................................................................... 15 Ejemplo: .................................................................................................................. 16 Practica: .................................................................................................................. 16 5. Títulos <h1><h2><h3><h4><h5><h6> .................................................................. 17 Ejemplo: .................................................................................................................. 17 Practica: .................................................................................................................. 18 6. Enfasis (<em> <strong>) ....................................................................................... 18 Ejemplo: .................................................................................................................. 19 Practica: .................................................................................................................. 19 7. Hipervínculo a otra página del mismo sitio <a> .................................................... 19 Ejemplo: .................................................................................................................. 20 Practica: .................................................................................................................. 20 8. Hipervínculo a otro sitio de internet <a> .............................................................. 21 Ejemplo: .................................................................................................................. 21 Practica: .................................................................................................................. 22 9. Imágenes dentro de una página <img> ................................................................ 22 Ejemplo: .................................................................................................................. 23 Practica: .................................................................................................................. 23 10. Hipervínculo mediante una imagen <a> e <img> .............................................. 23 Ejemplo: .................................................................................................................. 24 Practica: .................................................................................................................. 24 11. Apertura de un hipervínculo en otra instancia del navegador. .......................... 24 Ejemplo: .................................................................................................................. 25 Practica: .................................................................................................................. 25 12. Hipervínculo a un cliente de correo <a> ........................................................... 25 Ejemplo: .................................................................................................................. 26 Practica: .................................................................................................................. 26 13. Anclas llamadas desde la misma página............................................................ 26 Ejemplo: .................................................................................................................. 28

Página 2

Practica ................................................................................................................... 29 14. Anclas llamadas desde otra página. .................................................................. 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 título (<caption>) .............................................................................. 40 Ejemplo: .................................................................................................................. 40 Practica: .................................................................................................................. 41 22. Tabla y combinación de celdas. ........................................................................ 41 Ejemplo: .................................................................................................................. 42 Practica: .................................................................................................................. 42 23. Contenido de la cabecera de la página (<title>) ................................................ 42 Ejemplo: .................................................................................................................. 43 Practica: .................................................................................................................. 43 24. 25. Contenido de la cabecera de la página (<meta>) .............................................. 43 Comentarios dentro de una página <!-- --> ....................................................... 44 Ejemplo: .................................................................................................................. 44 Ejemplo: .................................................................................................................. 45 Practica: .................................................................................................................. 45 26. Sintaxis para caracteres especiales. .................................................................. 46 Ejemplo: .................................................................................................................. 46

Página 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 selección individual) ......................................... 53 Ejemplo: .................................................................................................................. 54 Practica: .................................................................................................................. 54 33. Formulario - select (cuadro de selección múltiple) ........................................... 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

Página 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 - Envío 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 - Actualización de un frame a partir del enlace de otro frame .............. 75 Ejemplo: .................................................................................................................. 76 Practica: .................................................................................................................. 77 49. Frames - Asignación de medidas en píxeles ...................................................... 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. Declaración DOCTYPE. ...................................................................................... 90

Página 5

.................................................................................... 95 Ejemplo: ...... 101 CSS ............................................................ 104 3.......................... Definición de varias reglas para una misma marca HTML............. Validación de la página a través de un enlace.................................................................................. Declaración DOCTYPE............................................................................................................. ................................................................. 103 2............................................................................................................................................................................................................. 112 Más propiedades relacionadas al texto.......................... 92 55..... 99 Ejemplo: .... 110 7.................... HTML Transitional................ 92 Practica: ............................................................... 98 Elementos HTML <div> y <span> ............................................................................................................................................................... para Frames ..................................................... 103 Ejemplo: .................................................................................................. 91 Ejemplo: ..... Propiedades relacionadas a fuentes........ 98 Ejemplo: .............................. ... ................................... Elementos y propiedades de HTML que no se deben usar .............................. 113 Ejemplo: ........................................................................ ¿Que son las hojas de estilo (CSS)? .............................................. 115 Página 6 ..................... Declaración DOCTYPE............................. 95 56................................ Definición de estilos a nivel de marca HTML.............................. Declaración DOCTYPE..................................................................................................................................................................... 114 Practica: ............................................................................................................................................................................. 58................................................. 103 1........... 105 Practica: . 111 Ejemplo: ............................................................................. ........................... 108 5...................................... 109 6......................... 103 Ejemplo: ................................................................................................................................ 8................................................................................. 107 Practica: ................................... Definición de estilos a nivel de página.................................................................... 108 Practica: ..................................................................................................................................... 95 Practica: .......................................................... ................................................................ 106 Ejemplo: ................ 109 Ejemplo: ............................................................................................................................................................................... 98 57............. Agrupación de varias marcas HTML con una misma regla de estilo............................................................... 105 Ejemplo: .....................................54.............................................................................................................. 101 59................................ HTML Estricto ..... 108 Ejemplo: ............ 104 Practica: .. 106 4............................................................................................................................................... 92 Ejemplo: ............................... . 97 Practica: ..................................................................................................................................................... 110 Practica: ............................................................. 100 Practica: .......................................................................... Propiedades relacionadas al texto................

125 Practica: ........................9............................. 121 Ejemplo: ......................................... 138 Ejemplo ................ 117 10.............. Herencia de propiedades de estilo.................................................................................................................. Definición de un estilo en función del contexto............................ 124 Ejemplo: ................................................................................................................................................ .................................................................................................... .... Propiedades relacionadas al border (FORMATO RESUMIDO) ........................................... Propiedades relacionadas al fondo (background) ................... 137 20............................ ......................................................................................................................... Propiedades relacionadas al margen de una marca HTML.............................. 125 14......................... 135 Ejemplo: ................... 122 Ejemplo: .................................................................................................... 130 Ejemplo: ..................................... ................................ 127 15............... 129 Ejemplo: ..................................................................................................................................................................... 135 19............................................................................................................................................................................................................................................................................................................... 138 Practica: ....... 12................................. ............................. 130 17... 123 Practica 1: ...................... 126 Practica: ....................................................................................................................................................................................................................................... Propiedades relacionadas al padding de una marca HTML........................................................................................................... 132 Ejemplo: ............................................................................... 138 21............................. Propiedades relacionadas a fuentes (FORMATO RESUMIDO) ....... 127 Ejemplo: .... 120 Definición de estilos por medio de clases............................................................................................................................. 130 Practica: ................................. 123 Practica 2: .. ............................................. 136 Practica: .......................................................................................... 119 Practica: ....................................................... 115 Ejemplo: ............................................................................................................................................. 118 Ejemplo: ...... 132 18.......................... 131 Practica: ......................................... 120 11............................................ 125 Ejemplo: . 133 Practica: ........... 139 Página 7 ............................................................. Propiedades relacionadas a listas................ Más propiedades relacionadas al borde de una marca HTML ..... 116 Practica: .............................................................................................................................................................. Definición de estilos por medio de Id................................................................................................................................................. .............. 124 13................................................................................................................ 128 Practica: .......................................... ................................................................................................ Propiedades relacionadas al borde de una marca HTML................................................... Definición de hojas de estilo en un archivo externo.......................... 137 Ejemplo: . 128 16..........

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

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

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

................................... ................................................................................................................. Clase Array ................................................ 231 Eventos onFocus y onBlur........ 214 Ejemplo: ....................................... 226 Ejemplo: ....................................................................................................................................................................................... 218 Ejemplo: ........................................................................................................................................... 219 Ejemplo: ..................................................................................... 230 Practica: ................ Control CHECKBOX .................................................. Control TEXTAREA ................................... 225 Practica: ............................... 215 Ejemplo 1: ................... 212 Clase Date ........... Clase String............................................................................................................................................................................. 31................................................................................................................. 214 21............................. Control RADIO ........ 229 Practica: ....................................................18............................................................................................................................................................................................................................... .................................................................... 225 Ejemplo: ................................................ ................................................................................. 228 28............................................................. 211 19..................................... 223 Ejemplo: ............................. 231 30................................... 20...................................................................................... 226 27........................... Funciones que retornan un valor.......................................................................................... 210 Practica: ............. 217 Practica: ................................................... 213 Ejemplo: ........................................................ 232 Ejemplo: .... 230 29............................................... 224 26........................... Programación orientada a objetos................................................ 215 Ejemplo: .......................................................................... Control SELECT ............. 219 23...... 224 Practica: ............................................................................................................................................................................................................................................... Clase Math .......................................................................................... 218 22............................................................................................................................................................................................................................................................................................................................................................................... 208 Ejemplo: ....... Control PASSWORD .................. 221 24................................ 223 25........................................................................ 219 Ejemplo: ................................................... 223 Practica: .......................... 228 Ejemplo: ................................................................................................................................................................................................................................................................................................... Controles FORM........................ 232 Página 11 .......................... 225 Ejemplo: ........................ 221 Practica: ........................................ 222 Ejemplo: ............................................................................................................................................... BUTTON y TEXT.................... Formularios y Eventos............................................................. 230 Ejemplo: ................................................................................................ 227 Practica: ......................................................................................................

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

Este curso lo que busca es acercar el lenguaje HTML a una persona que nunca antes trabajó con el mismo. luego se pasa a la sección del ejercicio resuelto donde podemos ver el contenido de la página HTML y cómo la visualiza el navegador. Este lenguaje está constituido de elementos que el navegador interpreta y las despliega en la pantalla de acuerdo a su objetivo. en la que se da una explicación completa. Todo aquello que está fuera de las marcas del lenguaje se imprime en la pantalla (dentro del navegador). Por ejemplo podemos llamar a nuestra primer página con el nombre: pagina1.El Lenguaje Hyper Text Mark Language HTML 1. </body> </html> Una página HTML es un archivo que generalmente tiene como extensión los caracteres html. de cada concepto se presenta una parte teórica. FireFox etc. Las instrucciones HTML están encerradas entre los caracteres: < y >. tablas para tabular datos. Estructura interna de una página HTML. Por último y tal vez la sección más importante de este tutorial es donde se propone que usted haga páginas en forma autónoma (donde realmente podrá darse cuenta si el concepto quedó firme). Veremos que hay elementos para disponer imágenes sobre una página.html Página 13 . Como veremos. La estructura básica de una página HTML es: <html> <head> </head> <body> Cuerpo de la página. Qué es HTML? HTML es el lenguaje que se emplea para el desarrollo de páginas de internet. No pretende mostrar todos los elementos HTML en forma alfabética. Muchos elementos HTML requieren una marca de comienzo y otra de finalización. listas. Para poder crear una página HTML se requiere un simple editor de texto y un navegador de internet (IExplorer. 2. hipervínculos que nos permiten dirigirnos a otra página. Lo más importante es que en cada concepto desarrolle los ejercicios propuestos y modifique los que se presentan ya resueltos.). etc.

3. Recomiendo tipear las marcas HTML para aprenderlas de memoria.Durante este curso no necesitará utilizar otra herramienta más que este sitio. podrá copiar y pegar trozos de páginas HTML para agilizar el desarrollo. Ahora puede ir a la sección de problema resuelto y ver el ejemplo ejecutándose en el navegador. <html> <head> </head> <body> PHP .C++ </body> </html> lenguajes de Practica: Confeccione una página con las marcas mínimas que debe tener y en el cuerpo de la misma disponga su nombre y apellido.Java . más el caracter / Una página HTML tiene dos secciones muy bien definidas que son la cabecera: <head> </head> Y el cuerpo de la página: <body> Cuerpo de la página. es decir confeccionar una página HTML. Podrá ver la pantalla dividida en tres partes: primero se enuncia el problema.C . además no requiere que dispongamos cada marca en una línea (podríamos inclusive escribir toda la página en una sola línea! cosa que no conviene ya que somos nosotros quienes tendremos que modificarla en algún momento). Por último deberá resolver un problema. No es conveniente copiar y pegar. Si observamos toda página comienza con la marca:<html> y finaliza con la marca:</html> Los fines de marcas tienen el mismo nombre que el comienzo de marca. Estos son los elementos básicos que toda página HTML debe llevar. Cuando recuerde todas las marcas.JavaScript . Otra cosa importante es que el lenguaje HTML no es sensible a mayúsculas y minúsculas. </body> Todo el texto que dispongamos dentro del <body> aparece dentro del navegador tal cual lo hayamos escrito. Todas las páginas tiene como mínimo esta estructura: cabecera y cuerpo. Salto de línea <br> Página 14 . es decir podemos escribirlo como más nos guste. No significa que no pueda hacerse una copia de los ejercicios que desarrolla y almacenarlos en su computadora. Ejemplo: Confeccionar una página que muestre los nombres de 5 programación separados por un guión. la segunda parte es el editor donde tipeamos la solución al problema (en este caso ya está resuelto por lo que aparece automáticamente) y la última sección de la pantalla muestra la página ejecutándose en el navegador. Veremos que contamos con una ventana donde tipeará la página y en otra verá los resultados que genera el navegador.

Tengamos en cuenta que es indistinto si disponemos la marca en la misma línea 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 página HTML que muestre distintos lenguajes de programación. Párrafo <p> Un párrafo es una oración o conjunto de oraciones referentes a un mismo tema. no importa si cuando tipeamos la página disponemos cada palabra en una línea distinta (es decir un navegador no tiene en cuenta la tecla ENTER). Para indicarle al navegador que queremos que continúe en la próxima línea debemos hacerlo con el elemento HTML <br>. Es uno de los pocos elementos HTML que no tiene marca de cerrado como habíamos visto hasta ahora. 4.Todo el texto que disponemos en el cuerpo de la página aparece en la misma línea. Página 15 . <html> <head> </head> <body> PHP<br> JavaScript<br> Java<br> C<br> C++ </body> </html> Practica: Confeccionar una página HTML que muestre su nombre y apellido y en la siguiente línea los nombres de sus padres separados por un guión. mostrarlos uno por línea. Cuando aparece la marca <br> el navegador continua con el texto en la línea siguiente. Todo lo que encerremos entre las marcas <p> y </p> aparecerá separado por un espacio con respecto al próximo párrafo. Implementemos una página que muestre los nombres de distintos lenguajes de programación uno por línea: <html> <head> </head> <body> PHP<br> JavaScript<br> Java<br> C<br> C++ </body> </html> Como vemos sólo hemos agregado la marca <br> cada vez que queremos comenzar una línea.

Además el primer párrafo contiene varios saltos de línea.Dentro de un párrafo puede haber saltos de línea <br>. etc. </p> <p> Este tutorial tiene por objetivo acercar los conceptos iniciales para introducirse en el mundo de las bases de datos. eliminarlos.<br> MySQL es un interpretador de SQL. Para recordar el nombre de esta marca HTML: <p> viene de paragraph Ejemplo: Confeccione una página que muestre dos párrafos. modificarlos. insertar datos. cuando el navegador interpreta esta página.<br> MySQL es un interpretador de SQL. Página 16 . separa los contenidos de los dos párrafos con un espacio horizontal. Oracle. etc. Structure Query Language (Lenguaje de Consulta Estructurado) es un lenguaje de programacion para trabajar con base de datos relacionales como MySQL. resumiendo: administrar bases de datos. hacer consultas y realizar muchas operaciones. </p> <p> Este tutorial tiene por objetivo acercar los conceptos iniciales para introducirse en el mundo de las bases de datos. es un servidor de base de datos. Cuando modificamos la ventana del navegador los párrafos se acomodan automáticamente de acuerdo al ancho de la ventana. es un servidor de base de datos.<br> MySQL permite crear base de datos y tablas. insertar datos. etc. Veamos con un ejemplo como disponer dos párrafos: <html> <head> </head> <body> <p> SQL. hacer consultas y realizar muchas operaciones. ordenarlos. resumiendo: administrar bases de datos. </p> </body> </html> Tenemos en esta página HTML dos párrafos. Normalmente uno agrupa en párrafos para dar más sentido a nuestro escrito. Structure Query Language (Lenguaje de Consulta Estructurado) es un lenguaje de programacion para trabajar con base de datos relacionales como MySQL. En el primero agregar varios saltos de línea.. </p> </body> </html> Practica: Confeccione una página que muestre en un párrafo datos referentes a sus estudios y en otro párrafo su nombre y mail. modificarlos. Oracle.. eliminarlos. etc. <html> <head> </head> <body> <p> SQL.<br> MySQL permite crear base de datos y tablas. ordenarlos.

<h1> viene de heading heading significa título. no importa si lo tipeamos seguido en el archivo. definimos un campo de tipo varchar(30). 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 título en una línea nueva. más adelante podrá ver que uno puede modificar la fuente. de -2000000000 a 2000000000 aproximadamente. Se coloca entre comillas (simples): 'Hola'. Recordemos que el HTML no tiene la responsabilidad de indicar el tamaño de las fuentes.) Según la importancia del título utilizaremos alguno de estos elementos HTML.<br> Definimos campos de este tipo cuando queremos representar.<br> El tipo "varchar" define una cadena de longitud variable en la cual determinamos el máximo de caracteres. para esto contamos con los elementos: <h1><h2><h3><h4><h5><h6> El título de mayor nivel es <h1>. Ejemplo: Confeccionar una página que contenga un título de primer nivel <h1> y luego dos títulos de nivel <h2>. Puede guardar hasta 255 caracteres. <html> <head> </head> Página 17 . Títulos <h1><h2><h3><h4><h5><h6> Otros elementos HTML muy utilizados son para indicar los títulos. Confeccionaremos una página que contenga un título de primer nivel <h1> y luego dos títulos de nivel <h2>. Una cadena es una secuencia de caracteres. El navegador definirá el tamaño de fuente según el nivel de título que indiquemos. La de tamaño más grande es la de nivel 1 <h1>. </p> </body> </html> Cada título aparece siempre en una línea distinta. por ejemplo. Definir un párrafo para cada título de segundo nivel. es decir el que tienen una fuente mayor (veremos que es el navegador el responsable de definir el tamaño de la fuente. Requiere la marca de cerrado del título con la barra invertida como hemos visto. Definiremos un párrafo para cada título de segundo nivel.5.html <html> <head> </head> <body> <h1>Tipos de datos en MySQL</h1> <h2>varchar</h2> <p> se usa para almacenar cadenas de caracteres. cantidades. color etc. tamaño. pagina1. Para almacenar cadenas de hasta 30 caracteres. </p> <h2>int</h2> <p> Se usa para guardar valores numéricos enteros.

por ejemplo. decimales. por ejemplo una palabra o conjunto de palabras. year (año) y timestamp.</p> </body> </html> Podemos ver que la sintaxis para el elemento strong es: <strong>Típos de datos</strong> Página 18 . Una cadena es una secuencia de caracteres. Se coloca entre comillas (simples): 'Hola'. Luego definir dos títulos de segundo nivel con los textos (Noticias políticas y Noticias deportivas). Puede guardar hasta 255 caracteres.</p> <p><em>FECHAS Y HORAS</em>: para guardar fechas y horas dispone de varios tipos: date (fecha). Al final de la página mostrar un título de cuarto nivel con el nombre de la empresa propietaria del periódico. en cada una de estas secciones definir dos titulares de tercer nivel con un párrafo cada una. precios. datetime (fecha y hora). time (hora). Podemos almacenar dígitos con los que no se realizan operaciones matemáticas. códigos de identificación.<br> El tipo "varchar" define una cadena de longitud variable en la cual determinamos el máximo de caracteres. Así como tenemos seis niveles de títulos 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>Típos de datos</strong> en MySQL</p> <p><em>TEXTO</em>: Para almacenar texto usamos cadenas de caracteres. Para almacenar cadenas de hasta 30 caracteres. por ejemplo. en campos que hacen referencia a cantidades. Para almacenar valores con decimales utilizamos: float o decimal. negativos. </p> </body> </html> Practica: Confeccionar el titular de un periódico con un título de nivel 1.. Tenemos los siguientes tipos: varchar. Para almacenar valores enteros. </p> <h2>int</h2> <p> Se usa para guardar valores numéricos enteros. números de documentos.</p> <p><em>NUMEROS</em>: Existe variedad de tipos numéricos para representar enteros. char y text. etc. usamos el tipo integer. cantidades.<body> <h1>Tipos de datos en MySQL</h1> <h2>varchar</h2> <p> se usa para almacenar cadenas de caracteres. por ejemplo. Enfasis (<em> <strong>) Enfatizar algo significa realzar la importancia de una cosa. 6.<br> Definimos campos de este tipo cuando queremos representar. Las cadenas se colocan entre comillas simples. definimos un campo de tipo varchar(30). de -2000000000 a 2000000000 aproximadamente. números telefónicos.

Para almacenar valores enteros.</p> </body> </html> Practica: Confeccionar una página que muestre la definición de tres palabras. Esto es lo que hace diferente la página de un libro con la página de un sitio en internet. Tenemos los siguientes tipos: varchar.</p> <p><em>FECHAS Y HORAS</em>: para guardar fechas y horas dispone de varios tipos: date (fecha). números de documentos.La mayoría de los navegadores muestran el texto enfatizado con strong con un texto en negrita y para el elemento em utilizan letra itálica (de todos modos esto no es obligatorio. 7.. datetime (fecha y hora). estos nos permiten cargar otra página en el navegador. números telefónicos. pero seguramente mostrarán los textos enfatizados).) Para recordar el nombre de estos elementos HTML: <em> viene de empathize que significa énfasis. time (hora). Las cadenas se colocan entre comillas simples. pero un sitio de internet podemos disponer estos enlaces entre un conjunto de páginas y luego tener distintas alternativas de recorrido.</p> <p><em>NUMEROS</em>: Existe variedad de tipos numéricos para representar enteros. códigos de identificación. Primero veremos cual es la sintaxis para disponer un hipervínculo a una página que se encuentra en el mismo sitio (es decir otra página que hemos desarrollado nosotros). Normalmente un navegador al encontrar esta marca muestra un texto subrayado.html">Noticias</a> Página 19 . etc. Para almacenar valores con decimales utilizamos: float o decimal. Podemos almacenar dígitos con los que no se realizan operaciones matemáticas. Normalmente un libro lo recorremos en forma secuencial. En el primero enfatizar con el máximo nivel y en los otros párrafos emplear el elemento de enfatizar de menor fuerza. Otra cosa importante que podemos hacer notar es que estos elementos HTML no producen un salto de línea como los de título (h1. por ejemplo. Luego agregar el elemento em a una o a un conjunto de palabras dentro de la definición. y al hacer clic con el mouse sobre éste el navegador carga la página indicada por dicho hipervínculo. decimales. year (año) y timestamp.h2 etc. Aplicar el elemento strong a cada palabra previo a su definición. usamos el tipo integer. La marca de hipervínculo a otra página del mismo sitio tiene la siguiente sintaxis: <a href="pagina2. <html> <head> </head> <body> <p><strong>Típos de datos</strong> en MySQL</p> <p><em>TEXTO</em>: Para almacenar texto usamos cadenas de caracteres. por ejemplo. en campos que hacen referencia a cantidades. Hipervínculo a otra página del mismo sitio <a> El elemento más importante que tiene una página de internet es el hipervínculo. char y text. precios. <strong> viene de strong que significa fuerte. Ejemplo: Crear una página que contenga cuatro párrafos. negativos.

html">Salir.html: <a href="pagina2.html (es otro archivo HTML que debe encontrarse en nuestro sitio y en el mismo directorio).html">Noticias</a> Toda propiedad toma el valor que se encuentra seguidamente del caracter = El valor de la propiedad href en este caso es pagina2.html <html> <head> </head> <body> <h1>Página principal.html tiene un hipervínculo a la primer página: <a href="pagina1.html">Noticias</a> </body> </html> pagina2. El valor de la propiedad debe ir entre comillas dobles.html <html> <head> </head> <body> <h1>Noticias.html pagina1. La página secundaria debe tener también un hipervínculo a la página principal.html">Noticias</a> </body> </html> pagina2.html <html> <head> </head> <body> <h1>Página principal.html y pagina2. Una propiedad se incorpora en el comienzo de una marca y tiene un nombre y un valor. pagina1. La propiedad href del elemento "a" hace referencia a la página que debe mostrar el navegador si el visitante hace clic sobre el hipervínculo. Ejemplo: Confeccionar una página principal que tenga un hipervínculo a otra página secundaria. Lo que se encuentra entre el comienzo de marca y el fin de la marca es el texto que aparece en la página (normalmente subrayado).html es el hipervínculo a la pagina2. se trata de otro elemento HTML que tiene comienzo de marca y fin de marca. Implementemos dos páginas que contengan hipervínculos entre si.</h1> <a href="pagina2.</h1> <a href="pagina1.</a> Para recordar el nombre de esta marca HTML: <a> viene de anchor que significa ancla.Como vemos.html <html> Página 20 . los nombres de las páginas HTML serán: pagina1. El segundo archivo pagina2.</h1> <a href="pagina2.html">Salir.</a> </body> </html> Como podemos observar lo nuevo en la pagina1. Lo nuevo que aparece en este elemento es el concepto de una propiedad.

Algo importante que hay que anteceder al nombre del dominio es el tipo de protocolo a utilizar.com/intl/en/about.com">Buscador Google</a> </body> </html> Si analizamos un poco y pensamos que esta marca nos permite pedir una página a un servidor para que la cargue en el navegador: Qué página nos retorna del dominio www.) y finalmente el nombre de dominio del sitio a enlazar. Cuando se trata de una página de internet.google.html y pagina3. Resumiendo a la propiedad href la inicializamos con el nombre del protocolo (http) seguida de dos puntos (:) y dos barras (//) luego la cadena (www. La siguiente página muestra un hipervínculo al sitio principal del buscador Google: <html> <head> </head> <body> <a href="http://www.google.</h1> <a href="pagina1.google.com? La respuesta es que todo servidor cuando recibe una petición de una página sin indicar su nombre (es decir sólo está el nombre de dominio) selecciona y envía una página que tiene configurada el servidor como página por defecto (generalmente esa página es la principal del sitio y a partir de la cual podemos navegar mediante hipervínculos a otras páginas que se encuentran en dicho dominio). si queremos disponer un enlace (hipervínculo) a la pagina about.html">Salir.google.<head> </head> <body> <h1>Noticias.html">Acerca de Google</a> Debemos conocer exactamente el nombre de la página (en este caso about.html de google la sintaxis será la siguiente: <a href="http://www.html) y también si la página no se encuentra en el directorio raiz debemos saber exactamente el camino de directorios (en este caso /intl/en/) Ejemplo: Confeccionar una página que contenga un enlace al sitio de google. Hipervínculo a otro sitio de internet <a> La sintaxis para disponer un hipervínculo a otro sitio de internet es: <a href="http://www. Veamos un ejemplo. 8.html Luego en las dos páginas secundarias disponer hipervínculos a la página principal.com">Buscador Google</a> Ahora la propiedad href la inicializamos con el nombre del dominio del otro sitio.google. el protocolo es el http.com">Buscador Google</a> Página 21 .</a> </body> </html> Practica: Confeccionar una página principal con dos hipervínculos a las páginas pagina2. Podemos enlazar a una página determinada de otro sitio. <html> <head> </head> <body> <a href="http://www.

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 página HTML luego la sintaxis será: <img src=".jpg" alt="Pintura geométrica"> Como mínimo.. la imagen se encuentra en el mismo servidor donde se almacenan nuestras páginas HTML. Los formatos clásicos son los archivos con extensiones gif. luego la sintaxis para recuperarla será: <img src="imagenes/foto1. Generalmente. Confeccionemos una página que muestre una imagen llamada foto1.jpg" alt="Pintura geométrica"> Es decir. La sintaxis de esta marca es: <img src="foto1. Como la imagen se encuentra en el mismo directorio donde se almacena la página HTML. Imágenes dentro de una página <img> Para insertar una imagen dentro de una página debemos utilizar el elemento HTML <img>. si queremos acceder a una imagen que se encuentra en una carpeta llamada imagenes pero que está al mismo nivel: Página 22 . 9. Otra propiedad obligatoria es alt./foto1. le antecedemos .</body> </html> Practica: Confeccionar una página que contenga un hipervínculo a un periódico (indicar sólo el nombre de dominio del periódico)./foto1. la misma no tiene una marca de finalización (similar a la marca <br>).. El texto debe describir el contenido de la imagen. Disponer además un segundo hipervínculo a una página determinada de ese periódico. con indicar el nombre de archivo basta (no es necesario indicar ninguna ruta de carpetas).jpg" alt="Pintura geométrica"> Por último..jpg" alt="Pintura geométrica"> </body> </html> Si la imagen se encuentra en una subcarpeta llamada imagenes. donde disponemos un texto que verán los usuarios que visiten el sitio con un navegador que sólo permite texto (o con un navegador que tenga desactivada la opción de descarga de imágenes). En la propiedad src indicamos el nombre del archivo que contiene la imagen (en un servidor Linux es sensible a mayúsculas y minúsculas por lo que recomiendo que siempre utilicen minúsculas para los nombres de archivos).jpg (La imagen se encuentra almacenada en el servidor en la misma carpeta donde se localiza esta página) <html> <head> </head> <body> <img src="foto1. y la barra / al nombre de la imagen Si queremos subir dos carpetas luego escribimos: <img src=". debemos inicializar las propiedades src y alt de la marca HTML img./.jpg" alt="Pintura geométrica"> Es decir.. jpg y png.

Al ser presionados llamar a otra página./imagenes/foto1..html"><img src="/imagenes/foto1.html"><img src="/imagenes/foto2.jpg" alt="Pintura geométrica"> </body> </html> Practica: Desarrollar una página que muestre dos imagenes llamadas foto2.jpg) como hipervínculos.jpg. Eso es todo.jpg y foto3. <img> viene de image src viene de source alt viene de alternative Ejemplo: Implementar una página que muestre una imagen llamada foto1. 10.. y seguidamente indicamos el nombre de la carpeta y la imagen a mostrar. Las imágenes se encuentran en una carpeta llamada imagenes que depende directamente de la raiz del sitio: <html> <head> </head> <body> <h2>Presione alguna de las imagenes para conocer más sobre esa obra.jpg que se encuentra en el mismo servidor y en la misma carpeta donde se localiza el archivo HTML. La solución es simple y consiste en disponer la marca <img> encerrada entre la marca de comienzo y fin del enlace(<a>) Confeccionemos una página que muestre dos imagenes (foto1.</h2> <a href="pagina2. Disponer un título a cada imagen. Hipervínculo mediante una imagen <a> e <img> Como ya conocemos los hipervínculos y como insertar imágenes en nuestra página. ahora podemos implementar un hipervínculo pero en vez de mostrar un texto mostraremos una imagen. Lo que debe quedar bien en claro es que las imágenes 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 Página 23 .<img src=".jpg" alt="Pintura geométrica"> Primero le indicamos que subimos al directorio padre mediante los dos puntos .jpg y foto2.jpg" alt="Pintura Geométrica"></a> </body> </html> Como podemos observar insertamos la marca HTML img en el lugar donde disponíamos el texto del hipervínculo.jpg" alt="Pintura Geométrica"></a> <br> <a href="pagina2. las mismas se encuetran almacenadas en el servidor en la misma carpeta donde se almacenará la página que usted desarrollará. <html> <head> </head> <body> <img src="foto1.

html"><img src="/imagenes/foto2.html <html> <head> </head> <body> <h2>Presione alguna de las imagenes para conocer más sobre esa obra.html pasar a la pagina3.html llamar a la pagina2. pagina1. El elemento "a" tiene una propiedad target que nos permite indicar que la referencia del recurso sea abierta en otra página. es decir de la pagina1. foto2.html. Las imágenes se encuentran en una carpeta llamada imagenes que depende directamente de la raiz del sitio.partimos desde la raiz del sitio) en una carpeta llamada imagenes (/imagenes/foto1.</h2> <a href="pagina2.jpg. 11.html">Retornar</p> </body> </html> Practica: Crear tres páginas con una foto cada una (foto1.html y de ésta a la primera. de la pagina2.jpg" alt="Pintura Geométrica"> </a> </body> </html> pagina2.jpg) como hipervínculos.html">Retornar</p> </body> </html> pagina3.html <html> <head> </head> <body> <p>Esta obra fue desarrollada en el año 2006</p> <a href="pagina1. Página 24 .jpg) luego al ser presionada avanzar a la siguiente página. Apertura de un hipervínculo en otra instancia del navegador. Las imágenes se encuentran en una carpeta llamada imagenes que depende directamente de la raiz del sitio. Al ser presionados llamar a otra página.jpg" alt="Pintura Geométrica"> </a> <br> <a href="pagina3.jpg y foto2.jpg) Es bueno practicar con esto ya que cuando implementemos sitios muy grandes seguramente agruparemos cada módulo en distintas carpetas. Ejemplo: Confeccionar una página que muestre dos imagenes (foto1.html <html> <head> </head> <body> <p>Esta obra fue desarrollada en el año 2003</p> <a href="pagina1.html"><img src="/imagenes/foto1.jpg y foto3.

ar" target="_blank">Periódico Clarin</a> </p> </body> </html> Practica: Confeccionar una página que muestre enlaces a distintos blog. <html> <head> </head> <body> <h1>Apertura de enlaces en el mismo navegador y en otra instancia del navegador</h1> <p> <a href="http://www.clarin.lanacion.com. Hacer que el hipervínculo del periódico el Clarin sea abierto en otra ventana del navegador.ar" target="_blank">Periódico Clarin</a> Ejemplo: Confeccionar una página que contenga dos hipervínculos a los periódicos La Nación y el Clarin. 12. 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.com.lanacion.com. Agruparlos bajo dos títulos que muestren los mismos enlaces.ar">Periódico La Nación</a> <br> <a href="http://www.com.Esta propiedad se llama target y debemos asignarle el valor "_blank" para indicar que el recurso sea abierto en otra ventana. Hipervínculo a un cliente de correo <a> El elemento "a" permite direccionar un hipervínculo a un programa de envío de correos que tengamos configurado en nuestra computadora.com. Confeccionaremos una página que disponga un hipervínculo a un cliente de correo de mail: <html> <head> </head> <body> Página 25 .com.clarin.ar" target="_blank">Periódico Clarin</a> </p> </body> </html> Podemos ver la diferencia entre el primer hipervínculo: <a href="http://www.clarin. Confeccionemos una página que contenga dos hipervínculos.ar">Periódico La Nación</a> <br> <a href="http://www. el primero "Hacer la apertura en otra ventana" y el segundo "Hacer la apertura en el mismo navegador".lanacion.ar">Periódico La Nación</a> y el segundo hipervínculo que indica que el sitio sea abierto en otra ventana del navegador: <a href="http://www.

com.com? subject=aquí el título&cc=diego2@gmail.</a> Es decir luego de especificar el destinatario del mail disponemos un caracter de interrogación '?' seguido la palabra subject. Se disponen hipervínculos a diferentes anclas. Confeccionar una página que disponga tres hipervínculos a cada una de esas ofertas. Por último separamos con un ampersand '&' la inicialización de subject y el body (es decir el cuerpo del mensaje) Podemos inclusive añadir el envío de mail con copia y con copia oculta a otras direcciones: <html> <head> </head> <body> <h1>Reclamos</h1> <a href="mailto:diego1@gmail.com y con copia oculta a diego3@gmail. Anclas llamadas desde la misma página. Al ser presionadas abrir el cliente de correo y enviar la promoción correspondiente. un igual y el título por defecto que debe aparecer en la ventana de envío de mail. 2 o 3.com propiedad href de tal manera que abra un cliente de correo.4 muzarrellas a ¢1000).com&body=Este es el cuerpo">Enviar mail. Otra posibilidad que nos brinda el HTML es disponer una referencia dentro de la página para poder posteriormente disponer un hipervínculo a dicha marca. Es una práctica común cuando queremos desplazarnos dentro de una página de gran tamaño.com">Enviar mail. 2.</a> </body> </html> Cuando se presiona el enlace se abre el programa de envío de correos que tiene configurado el equipo y dispone como receptor del mensaje la dirección que configuramos en el propio enlace seguido de la palabra mailto: La sintaxis para disponer un título por defecto y un cuerpo de mensaje es: <a href="mailto:diegoestevanes@gmail. En el cuerpo del mensaje pedir que ingrese la dirección y teléfono de la persona que hace el pedido.1 muzzarella y una bebida cola a ¢500. Las mismas son (1.</a> </body> </html> En este ejemplo enviamos un mail a diego1@gmail.com?subject=título del mensaje&body=cuerpo del mensaje">Enviar mail. Página 26 .</a> </body> </html> con copia a Ejemplo: Confeccionar una página que contenga un hipervínculo configurando la Practica: Una empresa que vende pizzas tiene 3 ofertas.2 muzzarellas a ¢600 y 3 . diego2@gmail.com&bcc=diego3@gmail. 13. <html> <head> </head> <body> <h1>Reclamos</h1> <a href="mailto:diegoestevanes@gmail.com">Enviar mail. En el título indicar si se trata de la promoción 1.<h1>Reclamos</h1> <a href="mailto:diegoestevanes@gmail.

<br> Una base de datos tiene un nombre con el cual accederemos a ella.com. insertar datos.<br> Para que el servidor nos muestre las bases de datos existentes. depende del sistema operativo. hacer consultas y realizar muchas operaciones. modificarlos.. se lo solicitamos enviando la instrucción:<br> show databases.<br> </p> Página 27 . si hace diferencia entre ellas. etc. Structure Query Language (Lenguaje de Consulta Estructurado) es un lenguaje de programacion para trabajar con base de datos relacionales como MySQL.).ar está instalado sobre un servidor Linux por lo que todos los ejercicios deberán respetarse mayúsculas y minúsculas. llamada "administracion".<br> Pero Linux interpretará como un error la segunda. pero Linux si. más alla que se utiliza el mismo elemento a. es un servidor de base de datos. Por ejemplo Windows interpreta igualmente las siguientes sentencias:<br> create database administracion. Es más el sitio mysqlya.<br> La sensibilidad a mayúsculas y minúsculas.<br> Se recomienda usar siempre minúsculas. Haremos un ejemplo. etc.La sintaxis para definir un ancla es: <a name="nombreancla"></a> No debemos confundir un ancla con un hipervínculo. Windows no es sensible. resumiendo: administrar bases de datos. Un ancla se la define en una parte de la página que queremos que el operador llegue a partir de un hipervínculo.<br> Create DataBase administracion.<br> Ingresando instrucciones en la linea de comandos o embebidas en un lenguaje como PHP nos comunicamos con el servidor.<br> MySQL es un interpretador de SQL. Para un ancla inicializamos la propiedad name con el nombre del ancla. debe aparecer en este sitio "administracion". Oracle.<br> MySQL permite crear base de datos y tablas. ordenarlos. Cada sentencia debe acabar con punto y coma (.<br> Nos mostrará los nombres de las bases de datos. Ahora la sintaxis para ir a un ancla desde un hipervínculo es la siguiente: <a href="#nombreancla">Introducción</a><br> Vemos que en la propiedad href indicamos el nombre del ancla. donde dispondremos una lista de hipervínculos que llaman a una serie de anclas dispuestas en la misma página: <html> <head> </head> <body> <h1>Tutorial de MySQL</h1> <a href="#introduccion">Introducción</a><br> <a href="#mostrarbasedatos">show databases</a><br> <a href="#creaciontabla">Creación de una tabla y mostrar sus campos</a><br> <a href="#cargarregistros">Carga de registros a una tabla y su recuperación</a><br> <a name="introduccion"></a> <h2>Introducción</h2> <p> SQL. eliminarlos.<br> Vamos a trabajar en una base de datos ya creada en el sitio. es decir. </p> <a name="mostrarbasedatos"></a> <h2>show databases</h2> <p> Una base de datos es un conjunto de tablas.

un registro.<a name="creaciontabla"></a> <h2>Creación de una tabla y mostrar sus campos</h2> <p> Una base de datos almacena sus datos en tablas.<br> Cada campo (columna) también debe definir el tipo de dato que almacenará. no aparece un mensaje de error y los datos se guardan de modo incorrecto. Ejemplo: Confeccionar una página que contenga cuatro anclas.<br> Cada campo (columna) debe tener un nombre. Especificamos los nombres de los campos entre paréntesis y separados por comas y luego los valores para cada campo. Structure Query Language (Lenguaje de Consulta Estructurado) es un lenguaje de programacion para trabajar con base de datos relacionales como MySQL.html <html> <head> </head> <body> <h1>Tutorial de MySQL</h1> <a href="#introduccion">Introducción</a><br> <a href="#mostrarbasedatos">show databases</a><br> <a href="#creaciontabla">Creación de una tabla y mostrar sus campos</a><br> <a href="#cargarregistros">Carga de registros a una tabla y su recuperación</a><br> <a name="#introduccion"></a> <h2>Introducción</h2> <p> SQL.<br> Cada registro contiene un dato por cada columna de la tabla. Las comillas simples son OBLIGATORIAS. luego definir cuatro hipervínculos que se enlacen con dichas anclas. es un servidor de base de datos. Oracle.<br> Note que los datos ingresados. </p> </body> </html> Cada hipervínculo hace referencia a un ancla que se encuentra en la misma página: <a href="#introduccion">Introducción</a><br> <a href="#mostrarbasedatos">show databases</a><br> <a href="#creaciontabla">Creación de una tabla y mostrar sus campos</a><br> <a href="#cargarregistros">Carga de registros a una tabla y su recuperación</a><br> Luego la definición de las anclas son: <a name="introduccion"></a> <h2>Introducción</h2> <p> Como podemos observar la definción del ancla se hace inmediatamente anterior al título donde queremos que el navegador se sitúe. Principio del formulario pagina1. La intersección de una columna con una fila. también entre paréntesis y separados por comas.<br> </p> <a name="cargarregistros"></a> <h2>Carga de registros a una tabla y su recuperación</h2> <p> Usamos "insert into". si ingresamos los datos en otro orden.<br> Una tabla es una estructura de datos que organiza los datos en columnas y filas. como corresponden a campos de cadenas de caracteres se colocan entre comillas simples.<br> Página 28 . contiene un dato específico.<br> MySQL es un interpretador de SQL.<br> Es importante ingresar los valores en el mismo orden en que se nombran los campos. etc. un solo valor. cada columna es un campo (o atributo) y cada fila. El nombre del campo hace referencia a la información que almacenará.

La intersección de una columna con una fila. Windows no es sensible. depende del sistema operativo.<br> La sensibilidad a mayúsculas y minúsculas. llamada "administracion". hacer consultas y realizar muchas operaciones. contiene un dato específico.MySQL permite crear base de datos y tablas. ordenarlos.).. debe aparecer en este sitio "administracion". Las comillas simples son OBLIGATORIAS. modificarlos. Por ejemplo Windows interpreta igualmente las siguientes sentencias :<br> create database administracion. eliminarlos. Especificamos los nombres de los campos entre paréntesis y separados por comas y luego los valores para cada campo. Cada sentencia debe acabar con punto y coma (. si hace diferencia entre ellas. </p> </body> </html> Practica: Disponer una serie de hipervínculos sobre noticias del día.<br> </p> <a name="creaciontabla"></a> <h2>Creación de una tabla y mostrar sus campos</h2> <p> Una base de datos almacena sus datos en tablas. pero Linux si. no aparece un mensaje de error y los datos se guardan de modo incorrecto. </p> <a name="mostrarbasedatos"></a> <h2>show databases</h2> <p> Una base de datos es un conjunto de tablas. También es perfectamente válido la llamada a anclas desde otra página (no importa si se encuentra en el mismo sitio o en otro) Página 29 . insertar datos. es decir.<br> Create DataBase administracion .<br> Una base de datos tiene un nombre con el cual accederemos a ella. si ingresamos los datos en otro orden.<br> Pero Linux interpretará como un error la segunda.<br> </p> <a name="cargarregistros"></a> <h2>Carga de registros a una tabla y su recuperación</h2> <p> Usamos "insert into".<br> Vamos a trabajar en una base de datos ya creada en el sitio. etc.<br> Una tabla es una estructura de datos que organiza los datos en columnas y filas.<br> Note que los datos ingresados. 14. también entre paréntesis y separados por comas.com.<br> Para que el servidor nos muestre las bases de datos existentes.<br> Ingresando instrucciones en la linea de comandos o embebidas en un lenguaje como PHP nos comunicamos con el servidor. Enlazar los hipervínculos con anclas que se encuentran más abajo en la misma página.<br> Se recomienda usar siempre minúsculas.<br> Cada campo (columna) debe tener un nombre. se lo solicitamos enviando la instrucción:<br> show databases.<br> Nos mostrará los nombres de las bases de datos. un solo valor.<br> Cada campo (columna) también debe definir el tipo de dato que almacenará.<br> Es importante ingresar los valores en el mismo orden en que se nombran los campos. resumiendo: administrar bases de datos. Anclas llamadas desde otra página. como corresponden a campos de cadenas de caracteres se colocan entre comillas simples.<br> Cada registro contiene un dato por cada columna de la tabla.ar está instalado sobre un servidor Linux por lo que todos los ejercicios deberán respetarse mayúsculas y minúsculas. El nombre del campo hace referencia a la información que almacenará. cada columna es un campo (o atributo) y cada fila. Es más el sitio mysqlya. un registro.

insertar datos.html <html> <head> </head> <body> <h1>Tutorial de MySQL</h1> <a href="pagina2.<br> La sensibilidad a mayúsculas y minúsculas. Es más el sitio mysqlya..Debemos conocer el nombre de la página a llamar y el nombre del ancla.html#introduccion">Introducción</a> Es decir luego del nombre de la página que llamamos disponemos el caracter # y seguidamente el nombre del ancla.<br> Para que el servidor nos muestre las bases de datos existentes. luego la sintaxis para la llamada al ancla es: <a href="pagina2.html#creaciontabla">Creación de una tabla y mostrar sus campos</a><br> <a href="pagina2. Por ejemplo Windows interpreta igualmente las siguientes sentencias:<br> create database administracion. Structure Query Language (Lenguaje de Consulta Estructurado) es un lenguaje de programacion para trabajar con base de datos relacionales como MySQL.<br> MySQL permite crear base de datos y tablas. etc.<br> Se recomienda usar siempre minúsculas. si hace diferencia entre ellas.). Cada sentencia debe acabar con punto y coma (.html <html> <head> </head> <body> <a name="introduccion"></a> <h2>Introducción</h2> <p> SQL.<br> Vamos a trabajar en una base de datos ya creada en el sitio.<br> Pero Linux interpretará como un error la segunda. hacer consultas y realizar muchas operaciones. llamada "administracion". pero Linux si. Windows no es sensible. ordenarlos.html#mostrarbasedatos">show databases</a><br> <a href="pagina2. modificarlos. es un servidor de base de datos. depende del sistema operativo. Confeccionemos dos página y que la primera llame a diferentes anclas definidas en la segunda: pagina1.html#cargarregistros">Carga de registros a una tabla y su recuperación</a><br> </body> </html> pagina2. resumiendo: administrar bases de datos. se lo solicitamos enviando la instrucción:<br> Página 30 . etc. Oracle.html#introduccion">Introducción</a><br> <a href="pagina2.ar está instalado sobre un servidor Linux por lo que todos los ejercicios deberán respetarse mayúsculas y minúsculas. eliminarlos.<br> Ingresando instrucciones en la linea de comandos o embebidas en un lenguaje como PHP nos comunicamos con el servidor.com.<br> Create DataBase administracion. </p> <a href="pagina1.<br> MySQL es un interpretador de SQL.<br> Una base de datos tiene un nombre con el cual accederemos a ella.html">Retornar</a><br> <a name="mostrarbasedatos"></a> <h2>show databases</h2> <p> Una base de datos es un conjunto de tablas. es decir.

contiene un dato específico.<br> </p> <a href="pagina1.html#introduccion">Introducción</a><br> <a href="pagina2. Especificamos los nombres de los campos entre paréntesis y separados por comas y luego los valores para cada campo. un solo valor.<br> MySQL es un interpretador de SQL. un registro. si ingresamos los datos en otro orden. etc.html <html> <head> </head> <body> <h1>Tutorial de MySQL</h1> <a href="pagina2. Oracle. Las comillas simples son OBLIGATORIAS. El nombre del campo hace referencia a la información que almacenará.html#cargarregistros">Carga de registros a una tabla y su recuperación</a><br> </body> </html> pagina2.html">Retornar</a><br> <a name="creaciontabla"></a> <h2>Creación de una tabla y mostrar sus campos</h2> <p> Una base de datos almacena sus datos en tablas. La intersección de una columna con una fila. debe aparecer en este sitio "administracion".show databases.<br> Cada campo (columna) también debe definir el tipo de dato que almacenará.<br> Una tabla es una estructura de datos que organiza los datos en columnas y filas. es un servidor de base de datos.<br> Cada campo (columna) debe tener un nombre.<br> </p> <a href="pagina1.<br> Nos mostrará los nombres de las bases de datos. Structure Query Language (Lenguaje de Consulta Estructurado) es un lenguaje de programacion para trabajar con base de datos relacionales como MySQL. cada columna es un campo (o atributo) y cada fila.<br> Cada registro contiene un dato por cada columna de la tabla. como corresponden a campos de cadenas de caracteres se colocan entre comillas simples.html#mostrarbasedatos">show databases</a><br> <a href="pagina2. también entre paréntesis y separados por comas.html#creaciontabla">Creación de una tabla y mostrar sus campos</a><br> <a href="pagina2. </p> <a href="pagina1.html">Retornar</a><br> <a name="cargarregistros"></a> <h2>Carga de registros a una tabla y su recuperación</h2> <p> Usamos "insert into".html">Retornar</a><br> </body> </html> Ejemplo: Confeccionar una página que contenga cuatro anclas y una segunda página que defina cuatro hipervínculos que se enlacen con dichas anclas.<br> Note que los datos ingresados.<br> Página 31 .<br> Es importante ingresar los valores en el mismo orden en que se nombran los campos. no aparece un mensaje de error y los datos se guardan de modo incorrecto.html <html> <head> </head> <body> <a name="introduccion"></a> <h2>Introducción</h2> <p> SQL. Principio del formulario pagina1.

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

Luego agregar otros items a la lista.15. Mostraremos el orden de llegada de tres corredores: <html> <head> </head> <body> <ol> <li>Rodriguez Pablo</li> <li>Gonzalez Raul</li> <li>Lopez Hector</li> </ol> </body> </html> La marca <ol> y su correspondiente marca de cerrado es </ol> En su interior cada uno de los items se los dispone con el elemento li. tengamos en cuenta que se numeran porque se trata de una lista ordenada. Para recordar el nombre de estos elementos HTML: <ol> viene de ordened list <li> viene de list item Ejemplo: Mostrar el orden de llegada de tres corredores utilizando el elemento HTML ol. Disponer un título de segundo nivel y debajo de la lista la suma de habitantes de esos tres paises enfatizado. La forma de implementar este tipo de listas es idéntica a las listas ordenadas. 16. Lista ordenada (<ol>) Este elemento HTML es útil cuando debemos numerar una serie de objetos. que también 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. <html> <head> </head> <body> <ol> <li>Rodriguez Pablo</li> <li>Gonzalez Raul</li> <li>Lopez Hector</li> </ol> </body> </html> Practica: Confeccione una lista ordenada con los tres paises con mayor población del planeta. Veamos un ejemplo donde implementamos una lista no ordenada: <html> <head> </head> <body> <h2>Lenguajes de programación. Lista no ordenada (<ul>) Una lista no ordenada como su nombre lo indica no utiliza un número delante de cada items sino un pequeño símbolo gráfico.</h2> <ul> Página 33 . Veamos con un ejemplo una lista ordenada para conocer su sintaxis.

17.<li>C</li> <li>C++</li> <li>Java</li> <li>C#</li> </ul> </body> </html> Para recordar los nombres de estas marcas HTML: <ul> viene de unordered list <li> viene de list item Ejemplo: Confeccionar una página HTML que contenga una lista no ordenada con cuatro lenguajes de programación muy populares. como extensión del lenguaje de programación C. El navegador se encarga de destacar y separa el término y su definición.</dd> </dl> </body> </html> Como podemos observar intervienen más marcas que en los otros dos tipos de listas. es decir.</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 hipervínculos a distintos periódicos que usted conoce. Crearemos una lista con la definición de varios lenguajes de programación: <html> <head> </head> <body> <dl> <dt>C++</dt> <dd>Es un lenguaje de programación. diseñado a mediados de los años 1980. <html> <head> </head> <body> <h2>Lenguajes de programación. utilizado principalmente en páginas web. que no requiere compilación.</dd> <dt>Java</dt> <dd>Es un lenguaje de programación orientado a objetos desarrollado por Sun Microsystems a principios de los 90. Lista de definiciones (<dl>) Como su nombre lo indica se utiliza para asociar un término y la definición del mismo. Las marcas que encierran a la lista son <dl> (Definition List) y </dl> Página 34 . Agregar un título de segundo nivel indicando el concepto de esta lista. Agregar tantos item como periódicos conoce. con una sintaxis semejante a la del lenguaje C. por Bjarne Stroustrup.</dd> <dt>JavaScript</dt> <dd>Es un lenguaje interpretado.

diseñado a mediados de los años 1980. por Bjarne Stroustrup. que no requiere compilación. El navegador se encarga de destacar y separa el término y su definición. <html> <head> </head> <body> <dl> <dt>C++</dt> <dd>Es un lenguaje de programación. En la definición hacer una breve introducción del mismo. utilizado principalmente en páginas web. es decir. Crearemos una lista con la definición de varios lenguajes de programación: <html> <head> </head> <body> <dl> <dt>C++</dt> <dd>Es un lenguaje de programación.</dd> <dt>Java</dt> <dd>Es un lenguaje de programación orientado a objetos desarrollado por Sun Microsystems a principios de los 90.</dd> <dt>JavaScript</dt> <dd>Es un lenguaje interpretado.</dd> </dl> </body> </html> Como podemos observar intervienen más marcas que en los otros dos tipos de listas. utilizado principalmente en páginas web. que no requiere compilación. con una sintaxis semejante a la del lenguaje C. Las marcas que encierran a la lista son <dl> (Definition List) y </dl> Ahora debemos poner a pares estos dos elementos <dt> (Definition Term) y <dd> (Definition Description) El navegador se encarga de hacer el sangrado del contenido del elemento dt Para recordar los nombres de estas marcas HTML: <dl> viene de definition list <dt> viene de definition term <dd> viene de definition description Ejemplo: Confeccionar una lista de definición indicando en los conceptos distintos lenguajes de programación.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 término y la definición del mismo. como extensión del lenguaje de programación C. con una sintaxis semejante a la del lenguaje C. por Bjarne Stroustrup.</dd> <dt>Java</dt> <dd>Es un lenguaje de programación orientado a objetos desarrollado por Sun Microsystems a principios de los 90.</dd> </dl> </body> </html> Página 35 . diseñado a mediados de los años 1980. como extensión del lenguaje de programación C. es decir.</dd> <dt>JavaScript</dt> <dd>Es un lenguaje interpretado.

ar">La Nación</a></li> <li><a href="http://www.cr">Al Dia</a></li> <li><a href="http://www.com">La Extra</a></li> </ul> </li> <li>España <ul> <li><a href="http://www.es">El País Digital</a></li> <li><a href="http://www.elmundo.pagina12.diarioextra.com.com">La Nación</a></li> <li><a href="http://www.clarin. Para el anidamiento de listas solo debemos tener cuidado en la correcta apertura y cerrado de las marcas Implementaremos una página que enumere una serie de paises en una lista ordenada y luego en cada pais dispondremos una lista de hipervínculos de periódicos de dicho pais: <html> <head> </head> <body> <ol> <li>Costa Rica <ul> <li><a href="http://www.nacion.ar">Clarín</a></li> <li><a href="http://www. Listas anidadas. El lenguaje HTML nos permite insertar una lista dentro de otra.el-universal.lanacion. por ejemplo podemos tener una lista no ordenada y uno de los item puede ser una lista ordenada.es">El Mundo</a></li> </ul> </li> <li>México <ul> <li><a href="http://www.ar">Página 12</a></li> </ul> </li> Ejemplo: Implementar una página que enumere una serie de paises en una lista ordenada y luego en cada pais disponer una lista de hipervínculos de periódicos de dicho pais.mx">El Universal</a></li> </ul> </li> </ol> </body> </html> Se puede insertar en un elemento li una lista como podemos ver: <li>Argentina <ul> <li><a href="http://www. 18. <html> <head> </head> <body> Página 36 .com.co.elpais.es">ABC</a></li> <li><a href="http://www.unam.com.com. Se pueden anidar listas de distinto tipo.jornada.abc.Practica: Confeccione una lista de definición de un conjunto de palabras que utilice en su ámbito laboral.aldia.mx">La Jornada</a></li> <li><a href="http://www.

19. Este elemento requiere la marca de cierre.es">El Mundo</a></li> </ul> </li> Practica: Confeccionar una lista no ordenada de lenguajes de programación. organizado en filas y columnas.elmundo.<ol> <li>Argentina <ul> <li><a href="http://www.com. Confeccionemos una tabla que muestre los nombre de paises en una columna y su cantidad de habitantes en otra: <html> <head> </head> <body> <table border="1"> <tr> <td>China</td><td>1300 millones</td> </tr> <tr> <td>India</td><td>1080 millones</td> </tr> <tr> <td>Estados Unidos</td><td>295 millones</td> </tr> </table> </body> </html> Página 37 .lanacion. Tabla (<table><tr><td>) El objetivo fundamental de las tablas es mostrar una serie de datos en forma ordenada.ar">La Nación</a></li> <li><a href="http://www.abc.com. Esta marca debe estar dentro del elemento tr. Luego disponer una lista ordenada con hipervínculos a sitios que tratan dichos lenguajes.clarin. Algo importante es que no utilizaremos las tablas para organizar la página completa (esto se hace en la actualizad mediante CSS.es">ABC</a></li> <li><a href="http://www.) Para la creación de una tabla intervienen una serie de elementos: <table> Es la marca de comienzo de la tabla. Este elemento requiere la marca de cierre.elpais.ar">Página 12</a></li> </ul> </li> <li>España <ul> <li><a href="http://www. <tr> Es la marca de comienzo de una fila.ar">Clarín</a></li> <li><a href="http://www. La mejor forma de entender y dominar este concepto es implementar tablas y ver su resultado dentro del navegador. Esta marca debe estar dentro del elemento table.pagina12. Para recordar el nombre de estos elementos HTML: <table> <tr> viene de table row que significa fila de la tabla. <td> Es la marca de comienzo de una celda. <td> viene de table data que significa dato de la tabla. Este elemento requiere la marca de cierre. es decir hojas de estilo.com.es">El País Digital</a></li> <li><a href="http://www.

Tabla con encabezado (<th>) La primera característica que le vamos a agregar a una tabla son las celdas de encabezado. Página 38 . 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 compañia y en la segunda el sueldo bruto (la compañía tiene 4 empleados) 20.Lo primero que aparece es la apertura del elemento table. Normalmente la primera fila de una tabla puede representar los títulos para cada columna. donde inicializamos la propiedad border con el valor 1. con esto el contorno de cada celda será visible (pruebe de asignarle el valor cero y otros valores superiores a 1) <table border="1"> Seguidamente viene la apertura de la primer fila de la tabla con el elemento tr: <tr> Continuamos con la apertura de la primer celda de la primer fila de la tabla: <td> Luego el dato propiamente dicho de la celda: India Cerramos la celda: </td> Abrimos la proxima celda: <td> Disponemos el valor de la celda: 1300 millones Cerramos la celda: </td> Ahora cerramos la primer fila de la tabla: </tr> El mecanismo de la siguiente fila es similar a la primera.

Disponer un título a cada columna mediante celdas creadas mediante el elemento th. Para recordar el nombre de este nuevo elemento HTML: <th> viene de table header cell que significa celda de encabezado de tabla. Confeccionemos el mismo problema del concepto anterior pero agregando un título 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 código de la página 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>. Ejemplo: Confeccionar una tabla que muestre los nombre de paises en una columna y su cantidad de habitantes en otra.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. es decir pertenecen a una fila. <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> Página 39 .

<html> <head> </head> <body> <table border="1"> <caption>Población de los paises con mayor cantidad de habitantes. Ejemplo: Confeccionar una tabla que muestre los nombre de paises en una columna y su cantidad de habitantes en otra.Practica: Confeccionar una tabla que muestre en la primer columna los nombre de distintos empleados de una compañía y en la segunda el sueldo bruto (la compañía tiene 4 empleados) Mostrar los textos 'Nombre del Empleado' y 'Sueldo Bruto' como primer fila de la tabla. Tabla con título (<caption>) Para disponer un título a una tabla debemos incorporar el elemento caption inmediatamente después que abrimos la marca table. Disponer un título de los datos que representa la tabla.</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> Página 40 . Dispongamos un título a nuestra tabla con la población de distintos paises: <html> <head> </head> <body> <table border="1"> <caption>Población de los paises con mayor cantidad de habitantes. El elemento caption requiere la marca de apertura y cierre.</caption> <tr> <th>Paises</th><th>Cantidad de habitantes</th> </tr> <tr> <td>China</td><td>1300 millones</td> </tr> <tr> <td>India</td><td>1080 millones</td> </tr> <tr> <td>Estados Unidos</td><td>295 millones</td> </tr> </table> </body> </html> Como podemos observar la marca caption está inmediatamente después que se abre la marca de comienzo de la tabla: <table border="1"> <caption>Población de los paises con mayor cantidad de habitantes.</caption> <tr> Para recordar el nombre de este nuevo elemento HTML: <caption> significa título. 21.

para estos casos el elemento td o th dispone de dos propiedades llamadas rowspan y colspan. En algunas situaciones se necesita que una celda ocupe el lugar de dos o más celdas en forma horizonzal o vertical. Si queremos que una celda ocupe tres columnas luego inicializamos la propiedad rowspan con el valor 3: <td colspan="3">Facturación de los últimos tres meses</td> Si por el contrario queremos que una celda se extienda a nivel de filas luego hacemos: <td rowspan="3">Secciones</td> Veamos un ejemplo empleando el concepto de combinación de celdas: <html> <head> </head> <body> <table border="1"> <tr> <th rowspan="4">Recursos</th><th colspan="4">Facturación de los últimos tres meses</th> </tr> <tr> <td>Discos Duros</td><td>23000</td><td>27200</td><td>26000</td> </tr> <tr> <td>CPU</td><td>73000</td><td>67300</td><td>51000</td> </tr> <tr> <td>Monitores</td><td>53000</td><td>72000</td><td>88000</td> </tr> </table> </body> </html> Veamos como definimos la primer fila de la tabla: <tr> <th rowspan="4">Recursos</th><th colspan="4">Facturación de los últimos tres meses</th> </tr> Como podemos observar la primer celda la expandimos hacia abajo 4 casilla y la segunda celda la expandimos hacia la derecha en 4 celdas. 22. Luego el código es: Página 41 . Cuando tenemos que disponer las celdas de la segunda fila debemos tener en cuenta que la primera está ocupada. Tabla y combinación de celdas. A estas propiedades se les asigna un valor entero a partir de 2.</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 compañía y el la segunda el sueldo bruto (la compañía tiene 4 empleados) Disponer en la tabla un título representativo.

'CPU' y 'Monitores'.<tr> <td>Discos Duros</td><td>23000</td><td>27200</td><td>26000</td> </tr> Ejemplo: Confeccionar una tabla que muestre la facturación de los últimos tres meses de los artículos:'Discos Duros'. expandir en fila de acuerdo a la cantidad de diarios de cada pais.html">Ir a la segunda página</a> </body> </html> Página 42 . En la primer columna disponer los nombre de paises. Veamos una simple página que muestre un mensaje y contenga un hipervínculo a una segunda página que muestre otro título: pagina1.html <html> <head> <title>Título de la primer página</title> </head> <body> <h1>Prueba del elemento title</h1> <a href="pagina2. Contenido de la cabecera de la página (<title>) Hasta ahora habíamos dispuesto la cabecera vacía. <html> <head> </head> <body> <table border="1"> <tr> <th rowspan="4">Recursos</th><th colspan="4">Facturación 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 periódicos y su nombre de dominio agrupados por paises. El elemento title nos permite definir el título que aparecerá en la barra del navegador (es decir en la parte más alta de la ventana) Siempre debemos buscar un título lo más significativo en cuanto a lo que muestra la página. La única excepcion corresponde al elemento title. ya que casi toda la información que disponemos en ella no se visualiza en el navegador. La primer columna debe mostrar solo el texto 'recursos' y en la primer fila el texto 'Facturación de los últimos tres meses'. 23.

programación. pagina1. 24. Disponer un hipervínculo en cada página.html">Ir a la primer página</a> </body> </html> Practica: Confeccionar una página que muestre en el elemento title el nombre de dominio del sitio.html">Ir a la primer página</a> </body> </html> Ejemplo: Confeccionar dos páginas que inicialicen el elemento title. No existe ninguna especificación de la W3C que defina los valores posibles para el atributo name.html <html> <head> <title>Título de la segunda página</title> </head> <body> <h1>Prueba del elemento title (segunda página)</h1> <a href="pagina1.pagina2. Si en la página inicializamos la propiedad name del elemento meta con el valor keywords luego buscará en la Página 43 .html <html> <head> <title>Título de la segunda página</title> </head> <body> <h1>Prueba del elemento title (segunda página)</h1> <a href="pagina1. que tiene por objetivo especificar información sobre el propio documento. keywords. Contenido de la cabecera de la página (<meta>) Un elemento que no se visualiza es el meta. si bien existen algunos que son estandares de facto (description.) Veamos las propiedades y valores más comunes <meta name="keywords" content="html. webmaster"> Los buscadores tienen en cuenta los metadatos.html">Ir a la segunda página</a> </body> </html> pagina2.html <html> <head> <title>Título de la primer página</title> </head> <body> <h1>Prueba del elemento title</h1> <a href="pagina2. author etc. Veamos las dos propiedades fundamentales de la marca meta y los valores más comunes con lo que podemos inicializarlos: <meta name="nombre de la propiedad" content="valor de la propiedad"> Name almacena el nombre de la propiedad y content el valor de la propiedad.

Comentarios dentro de una página <!-. Modificar a principios de 2007--> <table border="1"> Página 44 . Además hay que tener en cuenta que puede ser otra persona la que desarrolle en otro momento el mantenimiento de las páginas que desarrollamos nosotros. Cerramos el comentario con dos guiones y el signo de mayor > Confeccionaremos un página donde emplearemos comentarios: <html> <head> </head> <body> <!-. Otro uso muy habitual cuando estamos desarrollando la página si queremos deshabilitar una parte del código podemos encerrarla entre los caracteres de comentarios.Corresponden a datos del año 2006.Aquí va el comentario --> Es obligatorio luego del caracter de menor < disponer el signo de admiración y los dos guiones seguidos.html <html> <head> <title>HTML Ya</title> <meta name="keywords" content="html."> Ejemplo: Confeccionar una página HTML. Es objetivo prioritario respetar los estándares del W3C"> <meta name="author" content="Diego Rodriguez"> <meta name="copyright" content="Interpolacion inc. programación. Es objetivo prioritario respetar los estándares del W3C"> En este caso especificamos una descripción de la página. La sintaxis para definir un comentario es: <!-. Esto es muy útil para posicionar nuestra página según el contenido que provee. <meta name="author" content="Diego Rodriguez"> <meta name="copyright" content="Interpolacion inc. Los comentarios son muy útiles para el desarrollador de la página. palabras claves para buscadores. Uno deja anotaciones para facilitar el mantenimiento del sitio.propiedad content las distintas palabras claves más representativas para dicha página. Lo que para uno puede ser muy obvio a otro desarrollador puede no ser tan obvio. el navegador ignora todo el contenido que se encuentra dentro de esta marca. webmaster. descripción de la página y copyright."> </head> <body> </body> </html> 25. pagina1. Veamos otras inicializaciones del elemento meta: <meta name="description" content="El objetivo de este tutorial es presentar los conceptos básicos de HTML. pudiendo ser del sitio si se trata de la página principal. Definir el elemento title y los metadatos para indicar autor.--> Un comentario es un texto que solo le interesa a la persona que desarrolló la página. tutorial"> <meta name="description" content="El objetivo de este tutorial es presentar los conceptos básicos de HTML.

Corresponden a datos del año 2006.<tr> <th rowspan="4">Recursos</th><th colspan="4">Facturación de los últimos tres meses</th> </tr> <tr> <td>Discos Duros</td><td>23000</td><td>27200</td><td>26000</td> </tr> <tr> <td>CPU</td><td>73000</td><td>67300</td><td>51000</td> </tr> <tr> <td>Monitores</td><td>53000</td><td>72000</td><td>88000</td> </tr> </table> </body> </html> Un comentario puede abarcar varias líneas: <!-comentarios comentarios comentarios comentarios comentarios comentarios comentarios comentarios --> comentarios comentarios comentarios comentarios comentarios comentarios comentarios comentarios comentarios comentarios comentarios comentarios comentarios comentarios comentarios comentarios De todos modos hay que tener en cuenta que cuando un navegador pide la página a un sitio el servidor envía el archivo HTML completo. <html> <head> </head> <body> <!-. Página 45 . Los comentarios consumen ancho de banda del servidor. Ejemplo: Confeccionar una página que contenga una tabla. es decir con los comentarios. Modificar a principios de 2007--> <table border="1"> <tr> <th rowspan="4">Recursos</th><th colspan="4">Facturación 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 página que muestre dos tablas. Luego comentar la segunda y ver el resultado. Almacenar en un comentario datos referentes al contenido de la tabla que solo interesen al desarrollador.

ASP. ASP. 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. Formulario . &gt.26. &quot. JSP etc. &amp.<form> Un formulario permite que el visitante al sitio cargue datos y sean enviados al servidor. El HTML no tiene la responsabilidad de registrar los datos en el servidor. Posiblemente hasta ahora no se a preguntado como disponer dentro de una página los caracteres: < y >. &euro. esta actividad está delegada a un lenguaje que se ejecute en el servidor (PHP.) Página 46 . La solución es utilizar otra sintaxis para dichos caracteres. 12*z </h1> </body> </html> Ejemplo: Mostrar la siguiente ecuación: 10+x*y agregar aquí el símbolo menor 12*z <html> <head> <title>Título de la primer página</title> </head> <body> <h1> 10+x*y remplazar aquí el caracter especial del menor </h1> </body> </html> 12*z Practica: Mostrar una tabla con dos columnas en la primera enumerar una serie de artículos y en la segunda sus precios (agregarle el caracter de Euros a cada precio) 27. solicitar productos. Sintaxis para caracteres especiales. //Espacio en blanco. sacar turnos etc.Net.html <html> <head> <title>Título de la primer página</title> </head> <body> <h1> 10+x*y &lt. Es el medio ideal para registrar comentarios del visitante sobre el sitio. De todos modos veremos que el lenguaje HTML solo tiene el objetivo de crear el formulario. &copy. &nbsp. veamos los más utilizados: < > & " © € &lt. Para ver su funcionamiento mostraremos la siguiente ecuación: 10+x*y < 12*z pagina1. Veremos que no los podemos disponer directamente ya que el navegador los confudiría con los caracteres que se utilizan para las marcas HTML.

Como este curso nos concentramos solamente en el lenguaje HTML no veremos como registrar los datos en el servidor. Veamos la sintaxis básica 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 línea, cuadros de chequeo, radios de selección etc. Confeccionaremos un formulario para el ingreso de nuestro nombre y un botón para el envío 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 página 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 página codificada en PHP que recibe los datos del formulario y los imprime en una nueva página (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 página: "/registrardatos.php" más 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 envía mediante post (los datos se envían con el cuerpo del formulario) En caso de utilizar get los datos se envían en la cabecera de la petición de la página, utilizando el método get estamos limitados en la cantidad de datos a enviar, no asi con el método 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 línea) 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)

Página 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">

También mediante el elemento input definimos un botón para el envío de datos al servidor. Debemos inicializar la propiedad type con el valor submit, con esto ya tenemos un botón para el envío de datos. La propiedad value almacena la etiqueta que debe mostrar el botón. Finalmente cerramos el formulario:
</form>

Ejemplo: Confeccionar un formulario que contenga un cuadro de texto donde el
visitante debe ingresar su nombre y un botón de tipo submit para el envío de los datos ingresados al servidor (tener en cuenta que la página que procesa los datos del formulario en el servidor se encuentra en la raiz del sitio y se llama: registrardatos.php
<html> <head> <title>Prueba de formulario</title> </head> <body> <form action="/registrardatos.php" method="post"> Ingrese su nombre: <input type="text" name="nombre" size="20"> <br> <input type="submit" value="enviar"> </form> </body> </html>

Practica: Confeccionar un formulario que solicite el ingreso del nombre de una
persona y su edad. Luego llamar a la página "/registrardatos.php" para que imprima en pantalla los valores ingresados. Disponer un botón de tipo submit para el envío de los datos.

28. Formulario - input type="text"/ input type="password"
En el concepto anterior vimos como implementar un formulario básico. Veamos ahora con más detenimiento el elemento input. Este elemento hemos visto que nos permite definir cuadros de texto y botón para subir los datos al servidor. Ahora veremos que también podemos definir cuadros para el ingreso de una clave y botones para borrar el contenido de todos los controles del formulario. Confeccionaremos un formulario que solicite el ingreso del nombre de un usuario y su clave:
<html> <head> <title>Prueba de formulario</title> </head> <body> <form action="/registrardatos.php" method="post">

Página 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 botón 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 botón 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 envío de datos al servidor y otro para borrar el contenido de todos los controles (editores de texto) que contiene el formulario.
<html> <head> <title>Prueba de formulario</title> </head> <body> <form action="/registrardatos.php" method="post"> Ingrese su nombre: <input type="text" name="nombre" size="20"> <br> Ingrese su clave: <input type="password" name="clave" size="12"> <br> <input type="submit" value="enviar"> <input type="reset" value="borrar"> </form> </body> </html>

Practica:

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

29. Formulario - textarea

Página 49

El elemento de tipo textarea nos permite el ingreso de varias líneas 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 múltiples líneas es:
<textarea name="comentarios" rows="5" cols="60"></textarea>

Es un elemento que requiere una marca de comienzo y una de finalización. Además 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)

Página 50

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

Veamos la sintaxis para definir controles de formulario de tipo checkbox:
<input type="checkbox" name="java">Java<br>

Como vemos también 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 alfabéticos y los números siempre y cuando no sea el primero.

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

Página 51

Disponer también del botón de tipo submit para el envío de datos al servidor. 31. con esto se logra que cuando seleccionamos uno se deseleccione el actual. Para definir controles de tipo radio también utilizamos el elemento input inicializando la propiedad type con el valor "radio" Veamos un ejemplo del empleo de este control gráfico.input type="radio" Cuando tenemos un conjunto de opciones pero solo una puede ser seleccionada debemos emplear controles visuales de tipo radio.</body> </html> Practica: Confeccione un formulario que solicite el ingreso de un mail. estudios primarios. estudios secundarios o estudios universitarios) Ulitilzar controles de tipo radio para la selección de estudios realizados.php" method="post"> Ingrese su nombre: <input type="text" name="nombre" size="30"><br> Seleccione el máximo nivel de estudios que tiene: <br> <input type="radio" name="estudios" value="1">Sin estudios<br> <input type="radio" name="estudios" value="2">Primario<br> <input type="radio" name="estudios" value="3">Secundario<br> <input type="radio" name="estudios" value="4">Universitario<br> <input type="submit" value="Enviar"> </form> </body> </html> Veamos como se definen los controles de tipo radio: <input type="radio" estudios<br> <input type="radio" <input type="radio" <input type="radio" name="estudios" value="1">Sin name="estudios" value="2">Primario<br> name="estudios" value="3">Secundario<br> name="estudios" value="4">Universitario<br> Como podemos observar todos tienen el mismo valor en la propiedad name. El valor que se rescata en el servidor es el dato almacenado en la propiedad value. Ejemplo: Solicitar el ingreso del nombre de una persona y el máximo nivel en estudios alcanzado (sin estudios. Formulario . Si queremos disponer varios grupos de controles de tipo radio debemos definirles a cada grupo la propiedad name nombres distintos. una clave y luego muestre una serie de títulos de películas con su respectivo checkbox. <html> <head> <title>Prueba de formulario</title> </head> <body> <form action="/registrardatos. supongamos que necesitamos indicar el tipo de estudios que tenemos utilizando controles de tipo radio: <html> <head> <title>Prueba de formulario</title> </head> <body> <form action="/registrardatos.php" method="post"> Página 52 .

select (cuadro de selección individual) El elemento select es un cuadro de selección. Confeccionemos un formulario que solicite cargar el nombre de una persona y el pais donde vive.html es: <html> <head> <title>Prueba de formulario</title> </head> <body> <form action="/registrardatos. Formulario . Veamos con un ejemplo como crear un control de tipo select. Veremos en el concepto próximo que según como la configuramos podemos seleccionar varias opciones. El archivo pagina1. Este elemento HTML nos permite seleccionar una opción entre un conjunto.Ingrese su nombre: <input type="text" name="nombre" size="30"><br> Seleccione el máximo 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 más (linux o window) 32.php" method="post"> Ingrese su nombre: <input type="text" name="nombre" size="30"><br> Seleccione su pais: <select name="pais"> <option value="1">Costa Rica</option> <option value="2">España</option> <option value="3">México</option> <option value="4">Guatemala</option> <option value="5">Honduras</option> <option value="7">El Salvador</option> <option value="8">Venezuela</option> <option value="9">Colombia</option> <option value="10">Cuba</option> <option value="11">Bolivia</option> <option value="13">Perú</option> <option value="14">Ecuador</option> <option value="15">Paraguay</option> <option value="16">Uruguay</option> <option value="17">Chile</option> </select> <br> <input type="submit" value="Enviar"> </form> </body> </html> Página 53 . este último elemento mediante un control de tipo select permitir seleccionar el pais.

Página 54 . este último elemento mediante un control de tipo select permitir seleccionar el pais. Mediante un cuadro de selección el visitante puede elegir entre las siguientes opciones: Excelente.php" method="post"> Ingrese su nombre: <input type="text" name="nombre" size="30"><br> Seleccione su pais: <select name="pais"> <option value="1">Argentina</option> <option value="2">España</option> <option value="3">México</option> <option value="4">Guatemala</option> <option value="5">Honduras</option> <option value="7">El Salvador</option> <option value="8">Venezuela</option> <option value="9">Colombia</option> <option value="10">Cuba</option> <option value="11">Bolivia</option> <option value="13">Perú</option> <option value="14">Ecuador</option> <option value="15">Paraguay</option> <option value="16">Uruguay</option> <option value="17">Chile</option> </select> <br> <input type="submit" value="Enviar"> </form> </body> </html> Practica: Confeccionar un formulario que solicite el ingreso del nombre de una persona y permita votar el sitio. Regular y Malo. 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 selección: <option value="1">Costa Rica</option> <option value="2">España</option> <option value="3">México</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 opción. Ejemplo: Confeccionar un formulario que solicite cargar el nombre de una persona y el pais donde vive. (Agregue la propiedad size al elemento select con el valor 5) <html> <head> <title>Prueba de formulario</title> </head> <body> <form action="/registrardatos. Muy Bueno. con esto creamos un cuadro de selección que muestra simultáneamente varios elementos (de todos modos solo uno se puede elegir) Es decir que con la propiedad size solo logramos un cambio estético del control. Luego de definir todas las opciones de nuestro cuadro de selección cerramos la marca select: </select> Una variante gráfica de este control es inicializar la propiedad size del elemento select con un valor distinto a uno.Veamos la sintaxis para crear un cuadro de selección. Bueno.

Es también común inicializar la propiedad size con un valor mayor a 1 para que sea más fácil la selección. La página que resuelve este problema es: <html> <head> <title>Prueba de formulario</title> </head> <body> <form action="/registrardatos. La mayoría de los navegadores permiten seleccionar opciones que no se encuentran juntas mediante el mouse y presionando simultáneamente la tecla Ctrl. Ejemplo: Confeccionar un cuadro de selección múltiple para elegir colores de una lista.php" method="post"> Seleccione uno o varios colores (Presione Ctrl para seleccionar varios colores)<br> <select name="colores[]" size="4" multiple> <option value="1">Rojo</option> <option value="2">Verde</option> <option value="3">Azul</option> <option value="4">Amarillo</option> <option value="5">Blanco</option> <option value="6">Negro</option> <option value="7">Naranja</option> <option value="8">Violeta</option> </select> <br> <input type="submit" value="Enviar"> </form> </body> </html> Podemos observar la sintaxis para la definición de un cuadro de selección múltiple: <select name="colores[]" size="4" multiple> Definimos una propiedad llamada multiple y no le asignamos valor. Formulario . Supongamos que tenemos un cuadro de selección con una lista de colores y queremos que el visitante pueda elegir varios y no uno solo. Permitir la selección de varios colores. <html> <head> <title>Prueba de formulario</title> </head> <body> <form action="/registrardatos.php" method="post"> Seleccione uno o varios colores (Presione Ctrl para seleccionar varios colores)<br> <select name="colores[]" size="4" multiple> <option value="1">Rojo</option> <option value="2">Verde</option> <option value="3">Azul</option> <option value="4">Amarillo</option> <option value="5">Blanco</option> Página 55 . 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.select (cuadro de selección múltiple) Una variante del cuadro de selección que vimos en el concepto anterior es permitir que el visitante del sitio pueda seleccionar varias opciones.33.

Formulario . Veamos un ejemplo de agrupar una serie de opciones. 34. Ahora veamos que podemos agrupar las opciones que tiene el cuadro de selección. Se cuenta con un nuevo elemento llamado optgroup que agrupa un conjunto de elementos option. esto tiene sentido si el cuadro de selección tiene muchos items.select (agrupamiento de opciones) Hemos visto que podemos crear cuadros de selección individual o de selección múltiple. Luego permitir que el visitante seleccione uno o varios mail del cuadro de selección.<option value="6">Negro</option> <option value="7">Naranja</option> <option value="8">Violeta</option> </select> <br> <input type="submit" value="Enviar"> </form> </body> </html> Practica: Confeccionar un formulario que muestre en un control select un serie de mail.php" method="post"> Seleccione una fruta o verdura: <select name="articulo"> <optgroup label="Frutas"> <option value="1">Naranjas</option> <option value="2">Manzanas</option> <option value="3>Sandia</option> <option value="4">Frutilla</option> <option value="5">Durazno</option> <option value="6">Ciruela</option> </optgroup> <optgroup label="Verduras"> <option value="7">Lechuga</option> <option value="8">Acelga</option> <option value="9">Zapallo</option> <option value="10">Papas</option> <option value="11">Batatas</option> <option value="13">Zanahorias</option> <option value="14">Rabanitos</option> <option value="15">Calabaza</option> </optgroup> </select> <br> <input type="submit" value="Enviar"> </form> </body> </html> Como podemos observar para agrupar una serie de opciones dentro de un select debemos encerrarlas con el elemento optgroup: Página 56 . agruparemos una serie de frutas y verduras: <html> <head> <title>Prueba de formulario</title> </head> <body> <form action="/registrardatos.

La propiedad label del elemento optgroup es el texto que se debe mostrar dentro del select. Ejemplo: Confeccionar una página que muestre un control de tipo select.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 América y Europa. Agrupe los paises por continente. es un título. Formulario . Agrupar las opciones en dos grupos. en uno las frutas y en otro las verduras. Utilizar el elemento optgroup para el agrupamiento. La sintaxis de este elemento es la siguiente: Página 57 .button El elemento button es un control visual que se puede utilizar para sustituir los controles: <input type="submit" value="Enviar"> <input type="reset" value="Borrar"> Entre otras las ventanjas de este elemento es que podemos agregar imágenes dentro del botón. <html> <head> <title>Prueba de formulario</title> </head> <body> <form action="/registrardatos. Se puede hacer agrupamiento de opciones y permitir selecciones múltiples. 35.<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.

php" method="post"> Ingrese su nombre: <input type="text" name="nombre" size="20"> <br> <button type="submit">Enviar<img src="/imagenes/enviar. En cuanto al tercer valor posible de la propiedad type significará que deberemos codificar una función en javascript para procesar el evento. enfatizado de una palabra etc. como por ejemplo una imagen. </button> Todo lo que está contenido entre las marcas de comienzo y fin del elemento button aparece dentro del botón.gif" alt="envio"></button> <button type="reset">Borrar<img src="/htmlya/imagenes/borrar. Disponer un botón para subir los datos al servidor (en el botón escribir el texto: "Ingreso al" y en la línea siguiente "sitio") Página 58 .gif" alt="envio"></button> <button type="reset">Borrar<img src="/imagenes/borrar. La propiedad type se puede inicializar con alguno de estos tres valores: "submit". 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.gif" alt="borrado"></button> </form> </body> </html> Practica: Confeccionar un formulario que solicite el ingreso del nombre de usuario y su clave.php" method="post"> Ingrese su nombre: <input type="text" name="nombre" size="20"> <br> <button type="submit">Enviar<img src="/htmlya/imagenes/enviar. <html> <head> <title>Prueba de formulario</title> </head> <body> <form action="/registrardatos.<button type="submit"> Texto a mostrar dentro del botón.gif" alt="envio"></button> Ejemplo: Confeccionar un formulario que solicite el ingreso del nombre de una persona y dos elementos button para subir el dato al servisor o borrar el dato cargado. un párrafo. "reset" y "button".gif" alt="borrado"></button> </form> </body> </html> Perfectamente podemos definir un texto y cargar una imagen dentro del botón: <button type="submit">Enviar<img src="/imagenes/enviar. Los dos primeros cumplen las funciones que ya conocemos es decir envío de los datos al servidor y borrado del contenido de los controles.

Confeccionaremos una página que muestre el teclado de una calculadora: <html> <head> <title>Prueba de formulario</title> </head> <body> <form action="/registrardatos. Ejemplo: Confeccionar una página que muestre una pregunta y luego tres respuestas posibles. su actividad dependerá de un programa desarrollado generalmente en JavaScript. si podemos implementar una página que muestre este control. Al lado de cada respuesta disponer un botón 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. Si bien no podemos ver su funcionamiento por el momento.php" method="post"> <h1>Resultado:<h1> <input type="button" name="boton7" value=" 7 "> <input type="button" name="boton8" value=" 8 "> <input type="button" name="boton9" value=" 9 "> <input type="button" name="botondiv" value=" / "> <br> <input type="button" name="boton4" value=" 4 "> <input type="button" name="boton5" value=" 5 "> <input type="button" name="boton6" value=" 6 "> <input type="button" name="botondiv" value=" * "> <br> <input type="button" name="boton1" value=" 1 "> <input type="button" name="boton2" value=" 2 "> <input type="button" name="boton3" value=" 3 "> <input type="button" name="botonmas" value=" + "> <br> <input type="button" name="boton0" value=" 0 "> <input type="button" name="botonigual" value=" = "> <input type="button" name="botonmenos" value=" .input type="button" Otro tipo de boton que podemos crear es mediante el elemento input y fijando en la propiedad type el valor "button". Este tipo de botón no se lo puede hacer que actúe como los botones de tipo submit o reset. Esto es así porque no hemos asignado ninguna actividad cuando sea presionado.36. si queremos funcionalidad deberemos definir los eventos para dichos botones.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> Página 59 . Recordemos que HTML solo tiene Contenido."> </form> </body> </html> Como verá cuando se presiona el botón no sucede nada. Formulario .

php" method="post" enctype="multipart/form-data"> Ingrese su nombre: <input type="text" name="nombre" size="30"><br> Seleccione la foto: <input type="file" name="foto"> <br> <input type="submit" value="Enviar"> </form> </body> </html> Recordemos siempre inicializar la propiedad enctype del elemento form: <form action="/registrardatos.input type="file" El control de tipo file nos permite enviar un archivo al servidor. Nuevamente el HTML solo indica al navegador que debe enviar el archivo al servidor pero debe haber en el servidor un programa que lo almacene en una carpeta del servidor. Confeccionemos una página 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. Formulario ."> Practica: Confeccionar una página que muestre una pregunta y luego tres respuestas posibles.php" enctype="multipart/form-data"> Con esto indicamos al navegador que el formulario almacena uno o más archivos que deben ser enviados al servidor. Inicializar la propiedad name también es importante ya que mediante este nombre se lo recupera en el servidor.<input type="button" <input type="button" <input type="button" <input type="button" <br> <input type="button" <input type="button" <input type="button" <input type="button" <br> <input type="button" <input type="button" <input type="button" </form> </body> </html> name="boton4" value=" 4 name="boton5" value=" 5 name="boton6" value=" 6 name="botondiv" value=" name="boton1" value=" 1 name="boton2" value=" 2 name="boton3" value=" 3 name="botonmas" value=" "> "> "> * "> "> "> "> + "> "> name="boton0" value=" 0 "> name="botonigual" value=" = name="botonmenos" value=" . Veamos la sintaxis para disponer un control de tipo file: <input type="file" name="archi"> Nuevamente utilizamos el elemento HTML input para definir este tipo de control. En la propiedad type inicializamos con el valor file. Al lado de cada respuesta disponer un botón creado con el elemento input inicializando la propiedad type con el valor="button" 37. 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" method="post" enctype="multipart/form-data"> Página 60 .

Tenga en cuenta que si no se hace nigún programa en el servidor el archivo no se almacena. 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. Formulario . <html> <head> <title>Prueba de formulario</title> </head> <body> <form action="/registrardatos. 38. Su utilidad real solo podrá ser comprendida cuando estudie un lenguaje de servidor. podríamos almacenar en el campo oculto la primera vez que solicita la página que contiene el Página 61 . Su utilidad se presenta cuando desde el servidor se genera una página dinámica por ejemplo mediante PHP y se almacena en un campo oculto un valor que se rescatará al subir el formulario al servidor. Ejemplo: Confeccionar un formulario que solicite el ingreso del nombre de una persona y permita seleccionar y enviar su foto. Este tipo de control no visualiza nada dentro del formulario.input type="hidden" Un campo hidden se lo denomina campo oculto. pero veamos y conozcamos su sintaxis con un ejemplo.php" method="post" enctype="multipart/form-data"> Ingrese su nombre: <input type="text" name="nombre" size="30"><br> Seleccione la foto: <input type="file" name="foto"> <br> <input type="submit" value="Enviar"> </form> </body> </html> Practica: Confeccionar un formulario que solicite y envíe al servidor dos archivos.php" method="post"> <input type="hidden" value="10:20" name="hora"> Ingrese su nombre: <input type="text" name="nombre" size="30"> <br> <input type="submit" value="Enviar"> </form> </body> </html> Como vemos la sintaxis para definir un campo oculto es: <input type="hidden" value="10:20" name="hora"> En el atributo value almacenamos el valor (este valor no se puede modificar desde el formulario) Podemos imaginar una utilidad. supongamos que queremos que un visitante reenvíe un formulario cargado con todos los datos en un tiempo limitado.

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. El HTML dispone de un elemento llamado fieldset que solo tiene el objetivo de recuadrar y agrupar un conjunto de controles de un formulario. Ejemplo: Confeccionar un formulario que solicite ingresar el nombre de una persona y en un campo oculto almacene una hora cualquiera. cada grupo de datos los dispondremos en un fieldset: <html> <head> <title>Prueba de formulario</title> </head> <body> <form action="/registrardatos.php" method="post"> <fieldset> <legend>Datos personales</legend> Apellido y nombre: <input type="text" name="nombre" size="30"><br> Documento de identidad: <input type="text" name="dni" size="8"><br> Fecha de nacimiento: <input type="text" name="fechanacimiento" size="12"><br> Dirección: <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> Dirección: <input type="text" name="direccionempresa" size="30"><br> </fieldset> <input type="submit" value="Enviar"> </form> </body> Página 62 . Además para agregar un título a este recuadro debemos agregar otro elemento HTML llamado legend. Debemos encerrar todos los controles a agrupar entre las marcas <fieldset> y </fieldset>. <html> <head> <title>Prueba de formulario</title> </head> <body> <form action="/registrardatos. Confeccionemos un formulario que solicite los datos personales de una persona y los datos del lugar donde trabaja. Formulario .formulario donde se resgistrará dicha hora.agrupamiento de controles.php" method="post"> <input type="hidden" value="10:20" name="hora"> Ingrese su nombre: <input type="text" name="nombre" size="30"> <br> <input type="submit" value="Enviar"> </form> </body> </html> 39.

Para inicializar un control de tipo text debemos dar un valor a la propiedad value: <input type="text" value="aqui su nombre" name="nombre" size="20"> Página 63 . 40. <html> <head> <title>Prueba de formulario</title> </head> <body> <form action="/registrardatos. Formulario . Un control puede aparecer cargado con un valor por defecto.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> Dirección: <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> Dirección: <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. cada grupo de datos disponerlos en un fieldset. Agrupar los controles aquellos relacionados con el cliente y los referentes al pedido. Veamos como inicializar con valores por defecto para cada uno de los controles que hemos visto.controles con valores iniciales.</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> Dirección: <input type="text" name="direccionpersona" size="30"><br> </fieldset> Luego el título de cada fieldset lo disponemos con: <legend>Datos personales</legend> Ejemplo: Confeccionar un formulario que solicite los datos personales de una persona y los datos del lugar donde trabaja.

Azul y Blanco aparecen seleccionados desde un comienzo. Para inicializar un control de tipo radio debemos definir la propiedad checked sin valor.El control aparece cargado con la cadena "aqui su nombre". 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>Opción 1<br> Para inicializar un control de tipo select con selección individual debemos definir la propiedad selected de los elementos option: <select name="pais"> <option value="1">Costa Rica</option> <option value="2" selected>España</option> <option value="3">México</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 España. 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). Para inicializar un control de tipo select con selección múltiple 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. más alla que sea el segundo option en la lista. seguidamente el teléfono (cargar por defecto 453) y por último en un textarea solicitar que ingrese comentarios. 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. Página 64 .

regular. se debe solicitar el nombre.<html> <head> <title>Prueba de formulario</title> </head> <body> <form action="/registrardatos. Todos los controles de formulario pueden definir una propiedad llamada tabindex que es un valor entero entre 0 y 32767. valoración del sitio (malo. Este número indica el orden en que los controles toman foco. Formulario . excelente) por defecto debe estar seleccionado "bueno".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.orden de foco de controles. seguidamente el teléfono (cargar por defecto 453) y por último en un textarea solicitar que ingrese comentarios. Luego que seleccione si es mayor de edad o no (por defecto inicializar en si). mail. pais de origen (por defecto la opcion seleccionada debe ser "seleccione pais"). bueno. Cuando se presiona la tecla tab el navegador pasa el foco al siguiente control.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. muy bueno. 41. Página 65 . Por último disponer un textarea donde se puede ingresar los comentarios. <html> <head> <title>Prueba de formulario</title> </head> <body> <form action="/registrardatos.

Todos los controles de formularios pueden definir la propiedad tabindex para indicar el orden de activación o foco del control. es decir primero tomará foco el text de la primera fila y primer columna. es decir primero tomará foco el text de la primer fila y primer columna. Ejemplo: Implementar un formulario que contenga una matriz de tres filas y tres columnas de elementos de tipo text. (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. 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.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"> Página 66 . Pero si vemos los text por columna podremos observar que si van en forma secuencial.Para probar el funcionamiento implementaremos un formulario que contenga una matriz de tres filas y tres columnas de elementos de tipo text. luego el text de la segunda fila y primer columna etc. Hacer que el foco sea por columna. Haremos que el foco sea por columna.

Formulario . Esta propiedad tiene mucha aplicación si se aplica javascript en la página.Inhabilitar controles. Esto lo resolvemos deshabilitando un radio: <html> <head> <title>Prueba de formulario</title> </head> <body> <form action="/registrardatos.php" method="post"> Seleccione la sección donde desea ingresar: <br> <input type="radio" name="seccion" value="1" disabled>Niños<br> <input type="radio" name="seccion" value="2">Adolescentes<br> <input type="radio" name="seccion" value="3">Mayores<br> <input type="submit" value="Enviar"> </form> </body> </html> Para deshabilitar el primer radio añadimos la propiedad disabled sin asignarle valor: <input type="radio" name="seccion" value="1" disabled>Niños Los siguientes elementos pueden inhabilitarse:  button  input  optgroup  option  select  textarea. Mostrar los textos Niños. 42. Luego hacer la carga de todos los elementos del perímetro y finalmente los cuatro elementos centrales. Supongamos que disponemos 3 controles de tipo radio para indicar que sección del sitio deseamos ingresar. Nosotros queremos mostrar que tiene 3 secciones pero una no está disponible. Ejemplo: Confeccionar un formulario que muestre tres controles de tipo radio. habilitando y deshabilitando de acuerdo a los datos que carga el visitante al sitio. Todos los controles que hemos visto podemos hacer que aparezcan inhabilitados.<br> <input type="submit" value="enviar" tabindex="10"> </form> </body> </html> Practica: Definir una matriz de 4 filas y 4 columnas de elementos de tipo text. Deshabilitar el el elemento radio que corresponde a Niños. Mediante javascript podemos luego de haber sido cargado el documento modificar el estado de los controles. <html> <head> <title>Prueba de formulario</title> </head> <body> Página 67 . Adolescentes y Mayores.

Ejemplo: Confeccionar un formulario que solicite el nombre de usuario y su clave. Debemos asignarle un valor entero que indica hasta cuantos caracteres está permitido ingresar. No hay que confundir el objetivo de la propiedad size con maxlength. (Cuando conozca JavaScript podemos habilitarlos por ejemplo si el visitante ingresa una clave correcta. Formulario .text/password y maxlength Los controles de tipo text y password pueden limitar la cantidad de caracteres que puede ingresar el usuario a partir de la propiedad maxlength. solo permitir ingresar en el nombres de usuarios hasta 20 caracteres y la claves hasta 12.php" method="post"> Seleccione la sección donde desea ingresar: <br> <input type="radio" name="seccion" value="1" disabled>Niños<br> <input type="radio" name="seccion" value="2">Adolescentes<br> <input type="radio" name="seccion" value="3">Mayores<br> <input type="submit" value="Enviar"> </form> </body> </html> Practica: Confeccionar un formulario que muestre un control de cada tipo y los muestre todos deshabilitados. Confeccionaremos un formulario que solicite el nombre de usuario y su clave y solo permitiremos ingresar nombres de usuarios de hasta 20 caracteres y claves de hasta 12. el teclado se inhabilita cuando se han ingresado 20 caracteres en el primer control. <html> <head> <title>Prueba de formulario</title> </head> <body> <form action="/registrardatos. <html> <head> <title>Prueba de formulario</title> Página 68 .php" method="post"> Ingrese su nombre: <input type="text" name="nombre" maxlength="20" size="20"> <br> Ingrese su clave: <input type="password" name="clave" maxlength="12" size="12"> <br> <input type="submit" value="enviar"> </form> </body> </html> Cuando ejecute esta página no podremos cargar un nombre de usuario de más de 20 caracteres.<form action="/registrardatos. Con la propiedad size solo indicamos la cantidad máxima de caracteres a mostrar dentro del control antes de hacer scroll de los datos. por ahora vea como queda visualmente el formulario con los controles deshabilitados) 43.

Esta propiedad tiene uso cuando mediante un lenguaje de script (generalmente javascript) modificamos el control cambiandolo de estado ante ciertos eventos.. La diferencia con la propiedad disabled es que con esta no toma foco el control y generalmente aparece con un color que indica que el control está deshabilitado.... Cuando un control tiene la propiedad readonly el control toma foco pero no se puede cambiar su contenido.</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 .. <html> <head> Página 69 ........... Si definimos la propiedad readonly a un control el mismo es de solo lectura y no podemos modificar su contenido. <html> <head> <title>Prueba de formulario</title> </head> <body> <form action="/htmlya/registrardatos... Confeccionemos un formulario que aparezca el nombre de una empresa en un text y el texto de un contrato en un textarea.. su edad (3 caracteres como máximo) y su documento nacional de identidad (hasta 8 caracteres) 44. ambos de solo lectura...text/password/textarea y readonly Otra propiedad que podemos asignarle a los controles que creamos con el elemento input y también el elemento textarea es readonly....php" method="post"> Ingrese su nombre: <input type="text" name="nombre" maxlength="20" size="20"> <br> Ingrese su clave: <input type="password" name="clave" maxlength="12" size="12"> <br> <input type="submit" value="enviar"> </form> </body> </html> Practica: Confeccionar un formulario que solicite el ingreso del nombre y apellido de una persona (hasta 40 caracteres).. </textarea> <br> <input type="submit" value="Enviar"> </form> </body> </html> Ejemplo: Confeccionar un formulario que aparezca el nombre de una empresa en un text y el texto de un contrato en un textarea... Formulario . ambos de solo lectura.

.. Conociendo solo HTML la solución es enviar los datos mediante el programa cliente de mail que esté configurado en la computadora..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 ....php" method="post"> Para poder resolver esto debemos conocer el lenguaje PHP o algún otro lenguaje de servidor. Para probar esta funcionalidad confeccionaremos una página que permita hacer un reclamo de reparaciones y se envíen los datos a una dirección de correo....net" method="post" enctype="text/plain"> Es decir inicializamos la propiedad action con el texto mailto seguido de dos puntos y la dirección 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.. 45. Disponerlos todos de solo lectura.. </textarea> <br> <input type="submit" value="Enviar"> </form> </body> </html> Practica: Crear un controles de tipo text.. Tengamos en cuenta que no podemos enviar archivos adjuntos. Además inicializamos la propiedad enctype con el valor "text/plain" con lo que le indicamos que se trata de un archivo de texto plano...com" method="post" enctype="text/plain"> Ingrese su nombre: <input type="text" name="nombre" size="20"> <br> Página 70 .. password y textarea. Formulario .... La página HTML es: <html> <head> <title>Prueba de formulario</title> </head> <body> <h2>Reclamos</h2> <form action="mailto:reclamos@gmail. Se debe poder ingresar el nombre......... Hasta ahora siempre configuramos la propiedad action de la marca <form> con el nombre de un archivo que procesa los datos en el servidor: <form action="/registrardatos.Envío de datos mediante mail..<title>Prueba de formulario</title> </head> <body> <form action="/registrardatos. Para esto inicializamos la propiedad action de la siguiente forma: <form action="mailto:pizzasya@pizzas.. dirección y un comentario del problema..

Página 71 . Hasta este momento siempre que queríamos disponer un mensaje antes o después de un control de formulario lo escribiamos sin más. Ejemplo: Confeccionar una página que permita hacer un reclamo de reparaciones y se envíen los datos a una dirección de correo.com un mail con el contenido de los datos cargados en el formulario.com" method="post" enctype="text/plain"> Ingrese su nombre: <input type="text" name="nombre" size="20"> <br> Ingrese su dirección: <input type="text" name="dirección" size="30"> <br> Informe del problema: <br> <textarea rows="5" cols="40" name="problema"></textarea> <br> <input type="submit" value="enviar"> </form> </body> </html> Practica: Confeccionar un formulario que permita solicitar pizzas a domicilio.Ingrese su dirección: <input type="text" name="dirección" 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. Enviar el pedido a la dirección de correo pizzashumm@gmail.com La desventaja del envío de datos mediante mail es que la persona no puede hacer el envío del formulario desde una máquina ubicada en un ciberbar donde muy posiblemente no nos dejen configurar un cliente de mail.com 46. <html> <head> <title>Prueba de formulario</title> </head> <body> <h2>Reclamos</h2> <form action="mailto:reclamos@gmail. El mail contiene el nombre del control y el contenido ingresado por el operador. Formulario . Se debe poder ingresar el nombre.label Una última etiqueta relacionada con los formularios es la label. dirección y un comentario del problema. Si queremos que el correo llegue con un título debemos inicializar subject: <form action="mailto:reclamos@gmail.com?subject=pedido de reparación" method="post" enctype="text/plain"> Con esto logramos ubicar perfectamente todos los mail que llegan a nuestra casilla de correos reclamos@gmail.

Existe en HTML un elemento que permite asociar un texto con un control de formulario.</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. Más 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. Esto será muy útil si se accede desde un navegador no gráfico o una persona ciega que utiliza un programa que lee en voz alta el contenido de la página. Página 72 .) se les asigna el mismo nombre.php" method="post"> <fieldset> <legend>Formulario de comentarios. Veamos como lo hacíamos 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. textarea etc. de todos modos no es obligatorio. entre medio se dispone el texto a mostrar. El elemento label tiene su marca de comienzo y fin.  Para vincular esta label con el elemento input debemos inicializar la propiedad for con el nombre asignado a la propiedad id del elemento input.

80%"> <frame src="pagina2.php" method="post"> <fieldset> <legend>Formulario de comentarios.</legend> <label for="nombre">Ingrese su nombre:</label> <input type="text" name="nombre" size="30" id="nombre"><br> <label for="mail">Ingrese su mail:</label> <input type="text" name="mail" size="50" id="mail"><br> <label for="comentarios">Comentarios:</label><br> <textarea name="comentarios" rows="5" cols="60" id="comentarios"></textarea> <br> <input type="submit" value="Enviar"> </fieldset> </form> </body> </html> Practica: Confeccionar una página que permita calificar un sitio. La cabecera tiene una sintaxis similar a todas las páginas que hemos visto. Frames Con los frames se pueden mostrar más de un archivo HTML en la misma ventana del navegador. 47. en su lugar encontramos el elemento frameset.html"> <noframes> <p>El navegador no soporta frames</p> </noframes> </frameset> </html> Esta página es la que define la ubicación de los frames dentro del navegador. pero no existe el body. Podemos hacer que los frames interactuen.html"> <frame src="pagina3. Veamos un ejemplo de implementar dos frames: <html> <head> <title>prueba de frames</title> </head> <frameset cols="20%. <html> <head> <title>Prueba de formulario</title> </head> <body> <form action="/registrardatos. Ejemplo: Confeccionar un formulario que solicite el ingreso del nombre.La propiedad for de la label hace referencia al id del control y no al name. Asociar cada control con un elemento label. hay que tener en cuenta que el uso de frame hace menos accesible el sitio y es mucho más dificil imprimir su contenido. por ejemplo al presionar un enlace en un frame podemos cargar una página en otro frame. esto es importante si inicializamos con valores distintos el id y name de los controles. mail y comentarios de un visitante al sitio. Página 73 . Solo se aconseja emplear frames cuando la situación lo amerita. 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.

html"> <frame src="pagina3.html"> <frame src="pagina3. Principio del formulario pagina1. Así definimos las dos páginas: <frame src="pagina2.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 páginas en forma individual) <noframes> <p>El navegador no soporta frames</p> </noframes> Finalmente cerramos el elemento frame y la página: </frameset> </html> Las otras dos páginas 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 página que contenga dos frames verticales. El elemento frame tiene una propiedad llamada src (source que significa fuente) que la inicializamos con el nombre de la página a mostrar.80%"> <frame src="pagina2.html <html> <head> <title>prueba de frames</title> </head> <frameset cols="20%.html <html> <head> Página 74 .html"> <noframes> <p>El navegador no soporta frames</p> </noframes> </frameset> </html> pagina2.En este ejemplo dividimos la ventana del navegador en dos secciones que mostrarán una página HTML cada una. el primero que ocupe el 20% y el segundo el 80% de la ventana. mediante la propiedad cols indicamos cuanto ocupará cada ventana en porcentaje: <frameset cols="20%.80%"> En el interior del elemento frameset definimos las dos páginas HTML que deben mostrarse mediante el elemento frame.

html"> <frame src="pagina3.html" target="ventanadinamica">Enlace 2</a></li> </ul> </body> </html> Página 75 .html <html> <head> <title>prueba de frames</title> </head> <frameset cols="20%. Para esto definir la propiedad row del elemento frameset con el siguiente valor: rows="20%.Actualización de un frame a partir del enlace de otro frame Una actividad habitual con frames es disponer hipervínculos en uno de los frame y actualizar el contenido de otro frame.html" name="ventanadinamica"> <noframes> <p>El navegador no soporta frames</p> </noframes> </frameset> </html> Podemos observar que para el frame que queremos acceder posteriormente para modificar su contenido debemos inicializar la propiedad name: <frame src="pagina3.</h2> <ul> <li><a href="pagina3. Veamos con un ejemplo la sintaxis para actualizar un frame a partir del enlace de otro: pagina1.20%" 48.60%. Frames .html" name="ventanadinamica"> pagina2.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.html <html> <head> <title>prueba de frames</title> </head> <body> <h2>Enlaces.html" target="ventanadinamica">Enlace 1</a></li> <li><a href="pagina4.<title>prueba de frames</title> </head> <body> <h2>Frame 1</h2> </body> </html> pagina3.80%"> <frame src="pagina2.

Este archivo es el frame de la izquierda, que contiene los hipervínculos a dos páginas. Para indicar que frame debe mostrar las páginas de estos hipervínculos agregamos la propiedad target inicializándola 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 según que hipervínculo 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>Página A</h1> <h2>Este es el contenido de página del archivo:pagina3.html</h2> </body> </html>

pagina4.html
<html> <head> <title>prueba de frames</title> </head> <body> <h1>Página B</h1> <h2>Este es el contenido de página del archivo:pagina4.html</h2> </body> </html>

Ejemplo: Confeccionar una ventana que contenga dos frames verticales. Disponer
dos hipervínculos 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>

Página 76

pagina3.html
<html> <head> <title>prueba de frames</title> </head> <body> <h1>Página A</h1> <h2>Este es el contenido de página del archivo:pagina3.html</h2> </body> </html>

pagina4.html
<html> <head> <title>prueba de frames</title> </head> <body> <h1>Página B</h1> <h2>Este es el contenido de página del archivo:pagina4.html</h2> </body> </html>

Practica: Confeccionar una página que contenga dos frames verticales. En el frame
de la izquierda disponer hipervínculos a periódicos de su país. Cuando se presione el hipervínculo actualizar el frame de la derecha con la página principal de ese periódico (tener en cuenta que los frames pueden mostrar páginas que se encuentran en distintos servidores)

49. Frames - Asignación de medidas en píxeles
En los ejemplos anteriores definimos las medidas de los frames en porcentajes:
<frameset cols="20%,80%">

Cuando lo indicamos en porcentajes al redimensionar la ventana del navegador el tamaño 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 ubicaríamos 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 gráficas tienen distintas resoluciones en píxeles (640x480, 800x600, 1024x768 etc.), con esta sintaxis indicamos que la primer columna ocupe siempre 200 píxeles, lo mismo la tercer columna, pero la segunda tendrá un ancho de los píxeles que restan (es decir el ancho de ventana menos 400) Veamos la solución: pagina1.html
<html> <head> <html> <head> <title>prueba de frames</title> </head>

Página 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>Página A</h1> </body> </html>

pagina3.html
<html> <head> <title>prueba de frames</title> </head> <body> <h1>Página B</h1> </body> </html>

pagina4.html
<html> <head> <title>prueba de frames</title> </head> <body> <h1>Página C</h1> </body> </html>

Veamos algunas variantes para utilizar el asterísco:  La primer columna es de 200 píxeles y los píxeles restantes se destribuyen entre el segundo y tercer frame.
<frameset cols="200,*,*">

Con esta sintaxis los píxeles que restan luego de aplicar los 200 píxeles 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 píxeles al frame de la izquierda y los píxeles restantes se asignan al frame de la derecha.
<frameset cols="200,50%,*;>

Ejemplo: Confeccionar una página que contenga tres frames verticales, el de la
izquierda y el de la derecha deben tener 200 píxeles de ancho, el siguiente ocupa el resto. pagina1.html
<html> <head>

Página 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>Página A</h1> </body> </html>

pagina3.html
<html> <head> <title>prueba de frames</title> </head> <body> <h1>Página B</h1> </body> </html>

pagina4.html
<html> <head> <title>prueba de frames</title> </head> <body> <h1>Página C</h1> </body> </html>

Practica: Confeccionar una ventana que contenga 3 frames horizontales.Hacer que
el frame superior tenga una altura de 80 píxeles, el frame inferior 100 píxeles y el frame central ocupe el resto.

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

Página 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 más 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 algún contenido del frame no se ve. Si definimos el valor "yes" estamos indicando que siempre debe estar visible la barra de navegación y por último si asignamos el valor "no" estaremos indicando que nunca debe aparecer la barra de navegación 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>Página A</h1> <h1>Página A</h1> <h1>Página A</h1> <h1>Página A</h1> <h1>Página A</h1> <h1>Página A</h1> </body> </html>

pagina3.html
<html> <head> <title>prueba de frames</title> </head> <body> <h1>Página B</h1> <h1>Página B</h1> <h1>Página B</h1> <h1>Página B</h1> <h1>Página B</h1> <h1>Página B</h1>

Página 80

<h1>Página <h1>Página <h1>Página <h1>Página <h1>Página <h1>Página <h1>Página <h1>Página <h1>Página <h1>Página <h1>Página <h1>Página <h1>Página <h1>Página <h1>Página <h1>Página <h1>Página <h1>Página <h1>Página <h1>Página <h1>Página <h1>Página <h1>Página <h1>Página <h1>Página <h1>Página <h1>Página <h1>Página <h1>Página <h1>Página <h1>Página <h1>Página <h1>Página <h1>Página <h1>Página <h1>Página <h1>Página <h1>Página <h1>Página <h1>Página <h1>Página <h1>Página <h1>Página <h1>Página <h1>Página <h1>Página <h1>Página <h1>Página <h1>Página <h1>Página <h1>Página <h1>Página <h1>Página <h1>Página <h1>Página <h1>Página <h1>Página <h1>Página <h1>Página <h1>Página <h1>Página <h1>Página <h1>Página <h1>Página <h1>Página B</h1> B</h1> B</h1> B</h1> B</h1> B</h1> B</h1> B</h1> B</h1> B</h1> B</h1> B</h1> B</h1> B</h1> B</h1> B</h1> B</h1> B</h1> B</h1> B</h1> B</h1> B</h1> B</h1> B</h1> B</h1> B</h1> B</h1> B</h1> B</h1> B</h1> B</h1> B</h1> B</h1> B</h1> B</h1> B</h1> B</h1> B</h1> B</h1> B</h1> B</h1> B</h1> B</h1> B</h1> B</h1> B</h1> B</h1> B</h1> B</h1> B</h1> B</h1> B</h1> B</h1> B</h1> B</h1> B</h1> B</h1> B</h1> B</h1> B</h1> B</h1> B</h1> B</h1> B</h1> B</h1> Página 81 .

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. Hacer que el frame de la derecha siempre muestre la barra de desplazamiento.html <html> <head> <title>prueba de frames</title> </head> <body> Página 82 .*"> <frame src="pagina2.html <html> <head> <title>prueba de frames</title> </head> <frameset cols="200.<h1>Página <h1>Página <h1>Página <h1>Página <h1>Página <h1>Página <h1>Página <h1>Página <h1>Página <h1>Página <h1>Página <h1>Página <h1>Página <h1>Página <h1>Página <h1>Página <h1>Página <h1>Página <h1>Página <h1>Página <h1>Página <h1>Página <h1>Página </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. pagina1.html <html> <head> <title>prueba de frames</title> </head> <body> <h1>Página A</h1> <h1>Página A</h1> <h1>Página A</h1> <h1>Página A</h1> <h1>Página A</h1> <h1>Página A</h1> </body> </html> pagina3.

<h1>Página <h1>Página <h1>Página <h1>Página <h1>Página <h1>Página <h1>Página <h1>Página <h1>Página <h1>Página <h1>Página <h1>Página <h1>Página <h1>Página <h1>Página <h1>Página <h1>Página <h1>Página <h1>Página <h1>Página <h1>Página <h1>Página <h1>Página <h1>Página <h1>Página <h1>Página <h1>Página <h1>Página <h1>Página <h1>Página <h1>Página <h1>Página <h1>Página <h1>Página <h1>Página <h1>Página <h1>Página <h1>Página <h1>Página <h1>Página <h1>Página <h1>Página <h1>Página <h1>Página <h1>Página <h1>Página <h1>Página <h1>Página <h1>Página <h1>Página <h1>Página <h1>Página <h1>Página <h1>Página <h1>Página <h1>Página <h1>Página <h1>Página <h1>Página <h1>Página <h1>Página <h1>Página <h1>Página <h1>Página <h1>Página B</h1> B</h1> B</h1> B</h1> B</h1> B</h1> B</h1> B</h1> B</h1> B</h1> B</h1> B</h1> B</h1> B</h1> B</h1> B</h1> B</h1> B</h1> B</h1> B</h1> B</h1> B</h1> B</h1> B</h1> B</h1> B</h1> B</h1> B</h1> B</h1> B</h1> B</h1> B</h1> B</h1> B</h1> B</h1> B</h1> B</h1> B</h1> B</h1> B</h1> B</h1> B</h1> B</h1> B</h1> B</h1> B</h1> B</h1> B</h1> B</h1> B</h1> B</h1> B</h1> B</h1> B</h1> B</h1> B</h1> B</h1> B</h1> B</h1> B</h1> B</h1> B</h1> B</h1> B</h1> B</h1> Página 83 .

<h1>Página <h1>Página <h1>Página <h1>Página <h1>Página <h1>Página <h1>Página <h1>Página <h1>Página <h1>Página <h1>Página <h1>Página <h1>Página <h1>Página <h1>Página <h1>Página <h1>Página <h1>Página <h1>Página <h1>Página <h1>Página <h1>Página <h1>Página <h1>Página <h1>Página <h1>Página <h1>Página <h1>Página <h1>Página </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 página con dos frames horizontales. 51.html <html> <head> <title>prueba de frames</title> Página 84 . Vamos a crear una página que contenga dos columnas.Anidamiento de frameset El lenguaje HTML nos permite definir un frameset en la ubicación de un frame. Frames . Hacer que el mismo no se pueda redimensionar. En la parte superior definir un frame con 100 píxeles de alto. no mustre la barra de scroll y no mustre el borde. La segunda columna la dividimos en dos filas: ------------------------------------------| | | | | | | |-----------------------------------| | | | | | | | | | | | | | | | | | | ------------------------------------------- Para resolver este formato de página tenemos que plantear los frameset de la siguiente manera: pagina1. esto se logra anidando frameset.

la primera de 200 píxeles y la segunda del resto de píxeles.html" noresize> </frameset> <noframes> <p>El navegador no soporta frames</p> </noframes> </frameset> </html> Veamos más detenidamente como hemos creado los frameset.html" noresize> <frame src="pagina4.html <html> <head> <title>prueba de frames</title> </head> <body> <h1>Página C</h1> <h1>Página C</h1> <h1>Página C</h1> <h1>Página C</h1> <h1>Página C</h1> <h1>Página C</h1> <h1>Página C</h1> Página 85 . primero el framset externo define en la propiedad cols dos valores <frameset cols="200.*"> <frame src="pagina3.html <html> <head> <title>prueba de frames</title> </head> <body> <h1>Página A</h1> </body> </html> pagina3.html <html> <head> <title>prueba de frames</title> </head> <body> <h1>Página B</h1> </body> </html> pagina4.*"> El primer frame lo ocupa el archivo pagina2. en su lugar se define otro frameset que inicializa la propiedad rows con los valores 70 y *. Acá esta la diferencia con los otros frames vistos: <frame src="pagina2. Con esto estamos indicando que la segunda columna se divide en dos filas.html" noresize> <frameset rows="70.html" noresize> <frameset rows="70.html. Luego debemos definir los frames de las dos columnas.</head> <frameset cols="200.*"> Con esto sabemos que estamos indicando que tendrá dos columnas. una de 70 píxeles y la otra del resto de píxeles de la ventana.*"> <frame src="pagina2. pero el segundo frame no existe. Las otras tres páginas no tienen nada nuevo: pagina2.

html <html> <head> <title>prueba de frames</title> </head> <body> <h1>Página B</h1> Página 86 .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>Página A</h1> </body> </html> pagina3. pagina1.html" noresize> <frame src="pagina4.*"> <frame src="pagina3.*"> <frame src="pagina2. Utilizar frameset anidados para resolver el problema.<h1>Página <h1>Página <h1>Página <h1>Página <h1>Página <h1>Página <h1>Página <h1>Página <h1>Página <h1>Página <h1>Página <h1>Página <h1>Página <h1>Página <h1>Página <h1>Página <h1>Página <h1>Página <h1>Página <h1>Página <h1>Página <h1>Página <h1>Página <h1>Página </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 página que la primer columna tenga un frame y la segunda columna tenga dos frames.html <html> <head> <title>prueba de frames</title> </head> <frameset cols="200.html" noresize> <frameset rows="70.

</body> </html> pagina4.html <html> <head> <title>prueba de frames</title> </head> <body> <h1>Página C</h1> <h1>Página C</h1> <h1>Página C</h1> <h1>Página C</h1> <h1>Página C</h1> <h1>Página C</h1> <h1>Página C</h1> <h1>Página C</h1> <h1>Página C</h1> <h1>Página C</h1> <h1>Página C</h1> <h1>Página C</h1> <h1>Página C</h1> <h1>Página C</h1> <h1>Página C</h1> <h1>Página C</h1> <h1>Página C</h1> <h1>Página C</h1> <h1>Página C</h1> <h1>Página C</h1> <h1>Página C</h1> <h1>Página C</h1> <h1>Página C</h1> <h1>Página C</h1> <h1>Página C</h1> <h1>Página C</h1> <h1>Página C</h1> <h1>Página C</h1> <h1>Página C</h1> <h1>Página C</h1> <h1>Página C</h1> </body> </html> Practica: Confeccionar una página que contenga dos filas. ------------------------------------------------| | | | | | ------------------------------------------------| | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | Página 87 . Hacer que no se puedan redimensionar. La primera fila muestre un frame de 70 píxeles de alto y la segunda fila dividirla en dos columnas que tengan dos frames. el primero de 200 píxeles y el otro del resto de píxeles sobrantes.

</h2> <h2>Este texto está dentro del iframe.</h2> <h2>Este texto está dentro del iframe.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 ubicación continúa el flujo de la página.</h2> <h2>Este texto está dentro del iframe. La página que muestra el iframe no introduce ningún 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. Veamos un ejemplo como disponer este tipo de frame tan particular: pagina1.</h2> <h2>Este texto está dentro del iframe. similar a disponer una imagen en la página.------------------------------------------------- 52.</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> Página 88 .</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.html <html> <head> <title>prueba de iframes</title> </head> <body> <h1>Esto es una prueba de un iframe</h1> <iframe src="pagina2.</h2> <h2>Este texto está dentro del iframe.</h2> <h2>Este texto está dentro del iframe.</h2> <h2>Este texto está dentro del iframe. iframes El HTML dispone de un elemento llamado iframe que permite disponer un frame con el flujo de la página.</h2> <h2>Este texto está dentro del iframe.</h2> <h2>Este texto está dentro del iframe.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 página disponemos: <iframe src="pagina2.</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. pagina1.</h2> <h2>Este texto está dentro del iframe. Por defecto está inicializada con el valor "auto".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. scrolling Los valores posibles de esta propiedad son: "auto".</h2> <h2>Este texto está dentro del iframe.</h2> <h2>Este texto está dentro del iframe.  Ejemplo: Confeccionar una página que incorpore un iframe de 400 píxeles de ancho por 200 píxeles de alto.</h2> Página 89 . Si vale 0 el borde no se muestra. name Nombre del iframe si queremos acceder desde otra página. frameborder Podemos asignarle los valores 1 o 0.</h2> <h2>Este texto está dentro del iframe.</h2> <h2>Este texto está dentro del iframe.</h2> <h2>Este texto está dentro del iframe.Si definimos el valor "yes" estamos indicando que siempre debe estar visible la barra de navegación y por último si asignamos el valor "no" estaremos indicando que nunca debe aparecer la barra de navegación para dicho iframe.html <html> <head> <title>prueba de iframes</title> </head> <body> <h1>Esto es una prueba de un iframe</h1> <iframe src="pagina2.</h2> <h2>Este texto está dentro del iframe.</h2> <h2>Este texto está dentro del iframe. Por ejemplo si queremos actualizar su contenido desde un enlace ubicado en otra página."yes". El valor auto significa que el navegador decide si se debe mostrar la barra de scroll.Algunas propiedades útiles aplicables a un iframe:      src Archivo a mostrar dentro del iframe.</h2> <h2>Este texto está dentro del iframe.html <html> <head> <title>prueba de iframes</title> </head> <body> <h2>Este texto está dentro del iframe. height Alto en píxeles.</h2> <h2>Este texto está dentro del iframe.</h2> <h2>Este texto está dentro del iframe."no".</h2> <h2>Este texto está dentro del iframe.</h2> <h2>Este texto está dentro del iframe. La mostrará solo si algún contenido del iframe no se ve.</h2> <h2>Este texto está dentro del iframe.</h2> <h2>Este texto está dentro del iframe.</h2> <h2>Este texto está dentro del iframe. width Ancho en píxeles.

org/TR/html4/strict.org Página 90 .dtd"> Declaración estrícta: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.</h2> iframe. font. Para ver si una página cumple el estandar específico podemos acceder a un programa validador que se encuentra en validator.01//EN" Es decir que cuando es HTML estricto no disponemos la palabra Transitional Por último se define la dirección de internet donde se encuentra un archivo que enuncia los elemento y propiedades permitidos en el HTML 4.</h2> Practica: Confeccionar una página que muestre dos iframes de 300*300 píxeles cada uno. Hasta ahora no hemos hablado de un concepto de vital importancia que es la utilización de elementos HTML estándares. esta sección se ubica en la primera línea del archivo HTML.</h2> iframe. luego debe ir la palabra DOCTYPE indicando que se trata de un archivo HTML. Declaración DOCTYPE. center etc. De todos modos no hemos introducido elementos HTML propietarios o desaprobados (ej.org/TR/html4/loose. Más adelante debemos indicar la versión de HTML y si se trata de HTML transitorio o estricto: Si es HTML transitorio disponemos: "-//W3C//DTD HTML 4. si lo más correcto sería utilizar HTML estricto? Puede ser que tengamos muchas páginas desarrolladas en el pasado y nos lleve un tiempo hacerlas compatible con el HTML estricto. Porqué utilizar HTML transitional.</h2> iframe.01.01. Según el rigor de HTML 4.01 Transitional//EN" "http://www. Utilizar en lo posible las directivas de este comite de estándares nos traerá como ventanja que nuestras páginas en un futuro sigan viendose correctamente en las nuevas versiones de navegadores. discriminando entre HTML estricto y transitorio.<h2>Este <h2>Este <h2>Este <h2>Este <h2>Este </body> </html> texto texto texto texto texto está está está está está dentro dentro dentro dentro dentro del del del del del iframe.01 Transitional//EN" Si es HTML estrícto "-//W3C//DTD HTML 4.01 utilizado podemos declararla como: Declaración transitoria: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.w3.01//EN" "http://www.</h2> iframe.w3.w3. Ahora introduciremos una nueva sección de nuestra página que es la declaración del tipo de documento (DTD Document Type Declaration). La versión más actual de HTML es la 4.) La organización que define los estándares para la web es W3C. 53. Hacer que las barras de desplazamiento siempre esten visibles. la primera diferencia con cualquier otro elemento HTML es que el caracter siguiente del < es el signo de admiración (!).dtd"> Veamos la sintaxis para definir la sección del DOCTYPE. es decir antes de la marca html.

mx">El Universal</a></li> </ul> </li> </ol> </body> </html> Pruebe de borrar el elemento title.elmundo. además la ubicación y anidamiento de elementos es más elástico. HTML Transitional Cuando indicamos que una página utiliza HTML Transitional podemos hacer uso de algunos elementos HTML de presentacion (fuentes.org/TR/html4/loose.mx">La Jornada</a></li> <li><a href="http://www.aldia. Página 91 .unam.diarioextra.co. Pruebe de borrar la marca <ol> y valide.w3.nacion. Veamos si nuestra primer página que desarrollamos pasa la validación HTML Transitional (Agregandole la sección del DOCTYPE): <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.w3.JavaScript .com">La Extra</a></li> </ul> </li> <li>España <ul> <li><a href="http://www.C .jornada. colores).Pruebe de copiar la siguiente página y verifique si se valida correctamente en la dirección indicada en la línea anterior (copie al textarea de esta página este documento HTML y presione el botón check): <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.dtd"> <html> <head> </head> <body> PHP . tanto su contenido como las marcas de comienzo y final.es">ABC</a></li> <li><a href="http://www.01 Transitional//EN" "http://www.abc.es">El Mundo</a></li> </ul> </li> <li>México <ul> <li><a href="http://www.com. charset=ISO-8859-1"> <title>Enlaces a periódicos</title> </head> <body> <ol> <li>Costa Rica <ul> <li><a href="http://www. Valide nuevamente. Declaración DOCTYPE. alineamiento.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html.el-universal. Como mínimo deberemos agregar el elemento title. 54.org/TR/html4/strict.es">El País Digital</a></li> <li><a href="http://www.Java .cr">Al Dia</a></li> <li><a href="http://www.com">La Nación</a></li> <li><a href="http://www.elpais.01//EN" "http://www.C++ </body> </html> Como veras después que lo valides dará un error indicando que faltan datos en la marca head.

C .01 Transitional//EN" "http://www. Prácticamente todas las páginas que hemos desarrollado debemos hacerle algunos retoques para que cumplan con la validación de HTML estrícta. Página 92 .org <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 se excluye los elementos y atributos de presentación que el W3C espera que dejen de utilizarse a medida que se extienda por parte de todos los navegadores el soporte de las hojas de estilo.w3.w3. charset=ISO-8859-1"> <title>Mi primer pagina</title> </head> <body> PHP .w3.JavaScript .01 Transitional. modificar para que valide el código HTML 4. Luego copie y pegue el código HTML en el sitio de validación validator.C . Declaración DOCTYPE. Ejemplo: Confeccionar la primer página del tutorial. pero pueden usar el DTD Transicional si es necesario el soporte de elementos y atributos de presentación.Java . Hacer la página que valide con HTML 4.org/TR/html4/loose.JavaScript .dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html.JavaScript .w3.01 transitorio.01 Transitional//EN" "http://www.Luego la página queda: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.org 55. Luego copie y pegue el código HTML en el sitio de validación validator.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html. solo le falta un meta con la descripción de codificación: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.w3.org/TR/html4/loose. charset=ISO-8859-1"> <title>Mi primer pagina</title> </head> <body> PHP .Java .org/TR/html4/loose.01 Transitional//EN" "http://www.dtd"> <html> <head> <title>Mi primer pagina</title> </head> <body> PHP .Java .C++ </body> </html> Ahora prácticamente valida correctamente.C++ </body> </html> Ahora si está totalmente correcta. HTML Estricto En el DTD Estricto de HTML 4.C .C++ </body> </html> Practica: Confeccione una página que contenga una lista anidada y una tabla. Los webmaster deben usar el DTD Estricto siempre que sea posible.

charset=ISO-8859-1"> <title>Página de prueba del DTD</title> </head> <body> <h1>Página principal. charset=UTF-8"> <title>Página de prueba del DTD</title> </head> <body> <p>PHP .w3.w3.org/TR/html4/strict.01 estricto.Java .C++</p> </body> </html> Que modificaciones hemos hecho? 1.</h1> <a href="pagina2.Veremos varias de las páginas desarrolladas y los cambios que debemos hacer para que pasen la validación: Problema 1: Confeccionar una página que muestre los nombres de 5 lenguajes de programación separados por un guión: <html> <head> </head> <body> PHP .org/TR/html4/strict.JavaScript .C .Java .C++ </body> </html> Con los cambios para que valide: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html.01//EN" "http://www. 4.C .Java . Definimos el DOCTYPE <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.C .dtd"> 2.html">Noticias</a> </body> </html> Con los cambios para que valide: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4. charset=ISO-8859-1"> Definimos el elemento title: <title>Página de prueba del DTD</title> Definimos el texto de la página dentro de un párrafo (no puede un texto depender directamente del body): <p>PHP . Agregamos el meta: <meta http-equiv="Content-Type" content="text/html.</h1> Página 93 . <html> <head> </head> <body> <h1>Página principal. Problema 2: Confeccionar una página principal que tenga un hipervínculo a otra página secundaria.JavaScript .dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html.org/TR/html4/strict.01//EN" "http://www.JavaScript .w3.C++</p> Todos estos cambios son obligatorios para que valide como HTML 4. 3.

charset=ISO-8859-1"> Definimos el elemento title: <title>Página de prueba del DTD</title> Definimos el hipervínculo de la página dentro de un párrafo (no puede un hipervínculo depender directamente del body): <p><a href="pagina2.php" method="post"> <p> Ingrese su nombre: <input type="text" name="nombre" size="20"> <br> Ingrese su clave: <input type="password" name="clave" size="12"> <br> <input type="submit" value="enviar"> <input type="reset" value="borrar"> </p> </form> </body> Página 94 . Definimos el DOCTYPE: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4. 3. uno para el envío de datos al servidor y otro para borrar el contenido de todos los controles (editores de texto) que contiene el formulario.w3.01//EN" "http://www.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html.php" method="post"> Ingrese su nombre: <input type="text" name="nombre" size="20"> <br> Ingrese su clave: <input type="password" name="clave" size="12"> <br> <input type="submit" value="enviar"> <input type="reset" value="borrar"> </form> </body> </html> Con los cambios para que valide: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.html">Noticias</a></p> Problema 3: Confeccionar un formulario que solicite el ingreso del nombre de un usuario y su clave.01//EN" "http://www. Disponer dos botones.w3.org/TR/html4/strict. Mostrar asteriscos donde se ingresa la clave.dtd"> 2.org/TR/html4/strict. charset=ISO-8859-1"> <title>Página de prueba del DTD</title> </head> <body> <form action="/registrardatos.<p><a href="pagina2.html">Noticias</a></p> </body> </html> Que modificaciones hemos hecho? 1. <html> <head> <title>Prueba de formulario</title> </head> <body> <form action="/registrardatos. Agregamos el meta: <meta http-equiv="Content-Type" content="text/html. 4.

h1.html <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.Java . pagina1.w3.org/TR/html4/frameset.</html> 1. Hacer la página que valide con HTML 4. img.JavaScript . table. Luego copie y pegue el código HTML en el sitio de validación validator.01//EN" "http://www. Confeccionar una ventana que contenga dos frames verticales. Dispondremos dos hipervínculos en el frame de la izquierda que al ser presionados actualicen el archivo a mostrar por el frame de la derecha. Luego la sección del DOCTYPE para una página que implementa frames debe ser: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4. p.01 Frameset//EN" "http://www.w3.dtd"> <html> Página 95 .dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html. charset=ISO-8859-1"> <title>Mi primer pagina</title> </head> <body> <p>PHP . charset=ISO-8859-1"> Definimos el elemento title: <title>Página de prueba del DTD</title> Definimos todo el contenido del form dentro de un párrafo.org 56.dtd"> Es decir se incorpora la palabra Frameset donde disponíamos la palabra Transitional o estaba vacía si validamos HTML estrícto.C++</p> </body> </html> Practica: Confeccione una página que contenga los siguientes elementos a parte de la estructura mínima de un archivo HTML: a.01 estricto. modificar para que valide el código HTML 4.dtd"> 2. para Frames Cuando empleamos frames debemos utilizar una declaración distinta para el elemento DOCTYPE.org/TR/html4/strict.org/TR/html4/strict.w3. Declaración DOCTYPE. 4.w3. <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. 3. No se puede disponer texto o controles de formulario que dependan directamente del elemento form. Luego copiar y pegar en el programa validador de validator. Ejemplo: Confeccionar la primer página del tutorial. Definimos el DOCTYPE <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.C .01//EN" "http://www.01 Estricto.w3.org <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.w3.01 estricto.org/TR/html4/frameset. Agregamos el meta: <meta http-equiv="Content-Type" content="text/html.

org/TR/html4/loose.html"> <frame src="pagina3.01 Transitional//EN" "http://www.<head> <meta http-equiv="Content-Type" content="text/html.org/TR/html4/loose.w3. charset=ISO-8859-1"> <title>prueba de frames</title> </head> <body> <h1>Página B</h1> <h2>Este es el contenido de página del archivo:pagina4. charset=ISO-8859-1"> <title>prueba de frames</title> </head> <body> <h2>Enlaces.01 Transitional//EN" "http://www.html" name="ventanadinamica"> <noframes> <p>El navegador no soporta frames</p> </noframes> </frameset> </html> pagina2.html <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html. esto se debe a que la propiedad target del elemento "a" no está permitida.org/TR/html4/loose.html" target="ventanadinamica">Enlace 1</a></li> <li><a href="pagina4.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html. Es decir si utilizamos frames deberemos trabajar con HTML Transitional. pagina3. charset=ISO-8859-1"> <title>prueba de frames</title> </head> <frameset cols="20%.</h2> <ul> <li><a href="pagina3.w3.html <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4. charset=ISO-8859-1"> <title>prueba de frames</title> </head> <body> <h1>Página B</h1> <h2>Este es el contenido de página del archivo:pagina4.html <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.html</h2> </body> </html> pagina4.html" target="ventanadinamica">Enlace 2</a></li> </ul> </body> </html> Es importante notar que hemos definido la página HTML Transitional.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html.80%"> <frame src="pagina2.01 Transitional//EN" "http://www.w3.html</h2> </body> </html> Página 96 .

charset=ISO-8859-1"> <title>prueba de frames</title> </head> <body> <h1>Página B</h1> <h2>Este es el contenido de página del archivo:pagina4.html <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.org pagina1.html <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.org/TR/html4/loose.01 Transitional//EN" "http://www. charset=ISO-8859-1"> <title>prueba de frames</title> </head> <body> <h2>Enlaces.html" target="ventanadinamica">Enlace 2</a></li> </ul> </body> </html> pagina3.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html.</h2> <ul> <li><a href="pagina3.html</h2> </body> </html> pagina4.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> <body> <h1>Página A</h1> <h2>Este es el contenido de página del archivo:pagina3.Ejemplo: Confeccionar una ventana que contenga dos frames verticales.org/TR/html4/loose.w3. charset=ISO-8859-1"> <title>prueba de frames</title> </head> <frameset cols="20%. Disponer dos hipervínculos en el frame de la izquierda que al ser presionados actualice el archivo a mostrar por el frame de la derecha.html <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.html" name="ventanadinamica"> <noframes> <p>El navegador no soporta frames</p> </noframes> </frameset> </html> pagina2.w3.html" target="ventanadinamica">Enlace 1</a></li> <li><a href="pagina4. Definir el elemento DOCTYPE para cada página.01 Transitional//EN" "http://www.html <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html.80%"> <frame src="pagina2.01 Transitional//EN" "http://www.01 Frameset//EN" "http://www.w3.w3.html</h2> Página 97 .html"> <frame src="pagina3.org/TR/html4/loose. Luego validar cada página en el sitio de validator.w3.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html.

dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html.org/check?uri=referer"><img src="http://www. La W3C nos permite disponer un ícono como enlace a su validador de páginas HTML: <p> <a href="http://validator. no mustre la barra de scroll y no mustre el borde. Luego validar cada página en el sitio de validator.C .org/TR/html4/strict.org/check?uri=referer"><img src="http://www.01 Strict" height="31" width="88"></a> </p> Confeccionemos una página y probemos el enlace al validador: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.C++</p> <p> <a href="http://validator.w3. pagina1.</body> </html> Practica: Confeccionar una página con dos frame horizontales.JavaScript .01//EN" "http://www.org/Icons/valid-html401" alt="Valid HTML 4.org/Icons/valid-html401" alt="Valid HTML 4. charset=ISO-8859-1"> <title>Mi primer pagina</title> </head> <body> <p>PHP .w3. Validación de la página a través de un enlace.w3.JavaScript . charset=ISO-8859-1"> <title>Mi primer pagina</title> </head> <body> <p>PHP .C++</p> <p> <a href="http://validator.01 Strict" height="31" width="88"></a> </p> </body> </html> Página 98 .w3.org/TR/html4/strict.org 57.w3. Ejemplo: Confeccionar una página que muestre los nombres de 5 lenguajes de programación separados por un guión.01 Strict" height="31" width="88"></a> </p> </body> </html> Solamente agregamos el párrafo que contiene el hipervínculo al sitio que realiza la validación.org/Icons/valid-html401" alt="Valid HTML 4. Agregar un enlace a la página de validación de HTML.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html. Gran cantidad de sitios tienen este ícono o alguno similar para indicar que sus páginas cumplen con el HTML Transitional o estrícto.w3.w3.C .Java .01//EN" "http://www. En la parte superior definir un frame con 100 píxeles de alto.w3. Hacer que el mismo no se pueda redimensionar.org/check?uri=referer"><img src="http://www.Java .html <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.w3.

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

Hacer que algunas palabras del párrafo aparezcan resaltadas en otro color.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html. Página 100 . Aquí comentarios. . Indentar la primer linea de cada párrafo. Aquí comentarios. Aquí comentarios. </p> </div> </body> </html> Veamos como definimos los elementos span: <span style="background-color:#eeee00">comentarios.text-indent:20px"> Aquí <span style="background-color:#eeee00">comentarios.w3. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4. Aquí comentarios. .Aquí comentarios. </p> </div> Ejemplo: Listar una serie de nombres y un bloque de comentarios para cada nombre. 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. Aquí comentarios. Aquí comentarios.</span> Aquí comentarios. es decir el elemento span no produce salto de línea. El resto del párrafo continúa inmediatamente a la derecha. Disponer todos los comentarios con un color gris de fondo. Aquí comentarios. Aquí comentarios.</span> Como podemos ver luego en el resultado de la página el texto "comentarios" aparece con un color amarillo de fondo. Aquí comentarios. . . Aquí comentarios. charset=ISO-8859-1"> <title>título página</title> </head> <body> <div style="background-color:#eeeeee"> <h3>Luis Barrionuevo</h3> <p style="color:#888888. Aquí comentarios. Aquí comentarios.01 Transitional//EN" "http://www.</span> Aquí comentarios. Aquí comentarios. Aquí comentarios.text-indent:20px"> Aquí <span style="background-color:#eeee00">comentarios. El div agrupa todos los títulos y párrafos 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. Aquí comentarios.org/TR/html4/loose.

Aquí comentarios. Aquí comentarios. 59. Aquí comentarios. Aquí comentarios. Aquí comentarios. Aquí comentarios. Aquí comentarios. Aquí comentarios. Aquí comentarios. Aquí comentarios. Aquí comentarios.text-indent:20px"> <span style="background-color:#eeee00">Aquí comentarios. Elementos y propiedades de HTML que no se deben usar Nombraremos los elementos y propiedades de HTML que no se deben usar. En la segunda sección mostrar el mismo texto de la primera sección pero con algunas palabras tachadas. Aquí comentarios. Aquí comentarios. </p> <h3>Ana Rodriguez</h3> <p style="color:#888888. Aquí comentarios. Aquí comentarios. Aquí comentarios.</span> Aquí comentarios. Página 101 . Disponer color de fondo distinto para cada sección. Aquí comentarios. Aquí comentarios. </p> </div> </body> </html> Practica: Confeccionar una página que contenga dos divisiones con una serie de párrafos cada una. 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. de todos modos se las encontrará en muchas páginas antiguas y otras no tanto: Elementos  u Muestra un texto subrayado. Aquí comentarios. ya que sus objetivos actualmente se resuelven utilizando CSS (Hojas de estilo). Aquí comentarios. Aquí comentarios. Aquí comentarios.

velocidad de avance etc. Se aplica al body. Se aplica al body.  background Fija una imagen de fondo a la página. Se aplica al body. centro etc. Tiene muchas propiedades para definir fuente.s Muestra un texto tachado.  isindex Crea un control de entrada de una línea.  alink Fija el color del enlace activo.  i Muestra el texto en itálica. strike Muestra un texto tachado.  hr Muestra una línea horizontal. color.  vlink Fija el color de los enlaces ya visitados. Propiedad del elemento body.         Página 102 . Ya vimos algunos conceptos básicos de CSS que remplazan estos elementos HTML. 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.  bgcolor Fija el color del fondo de texto si se aplica al elemento body. derecha.  big Muestra el texto con fuente grande.  link Fija el color de los enlaces no visitados. Propiedades  text Fija el color de texto para la página si se aplica al elemento body.  align Se lo utiliza para alinear texto a izquierda. tamaño y color  b Muestra el texto en negrita. No daremos ejemplo del empleo de estos elementos y propiedades para evitar cualquier posibilidad de internalizar su funcionamiento y empleo.  font Permite definir mediante una serie de propiedades el tipo de fuente.  small Muestra el texto con fuente pequeña. center Muestra un texto centrado.  basefont Establece el tamaño base de fuente.

text-align:center">Esto es un ejemplo</p> </body> </html> 2. ¿Que son las hojas de estilo (CSS)? CSS son las siglas de Cascade Style Sheet que traducido significa hojas de estilo en cascada. Por último. Las hojas de estilo es una tecnología que nos permite controlar la apariencia de una página web. gran parte de navegadores (es verdad el IExplorer de Microsoft nos puede dar un dolor de cabeza). Definición de estilos a nivel de marca HTML. espaciado entre textos y recuadros así como el lugar donde disponer texto e imagenes en la página. CSS es un gran avance que complementa el HTML y la Web en general. El curso brinda un concepto teórico corto. CSS describe como los elementos dispuestos en la página son presentados al usuario. El lenguaje de las Hojas de Estilo está definido en la Especificaciones CSS1 y CSS2 del World Wide Web Consortium (W3C). o por lo menos. en el head de la página o agrupar las reglas de estilo en un archivo independiente con extensión *. modificar y jugar con el mismo. fuentes. color.font-family:vardana. Podemos visitar W3C Veremos que podemos asociar las reglas de estilo a las marcas HTML de tres maneras: directamente a la marca.html <html> <head> </head> <body> <p style="color:#000000. los sitos web se concentraban más en su contenido que en su presentación. Con CSS podemos especifiar estilos como el tamaño. que es la más adecuada para separar el contenido de la página y la forma como se debe representar la misma por medio de la hoja de estilo.fontsize:25px. un ejercicio propuesto que nos permitirá saber si podemos aplicar el concepto.Las Hojas de Estilo CSS CSS 1. Se define en la propiedad style los estilos a definir para dicha marca.background-color:yellow. pero pondremos énfasis en la tercera forma. luego un problema resuelto que invito a ejecutar. Ejemplo: El objetivo de esta pequeña página es ver cómo afecta el estilo definido a la marca p (párrafo) pagina1. Página 103 . y lo más importante.css En este curso veremos las tres metodologías. es un estándar aceptado por toda la industria relacionada con la Web. HTML no pone mucha atención en la apariencia del documento. Es la forma más fácil pero menos recomendada para aplicación de un estilo a una marca HTML. En un principio.

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. Página 104 .background-color:#ffff00"> Segundo título </h1> Como podemos observar. estamos obligados a definirlos para cada marca HTML. más alla que los dos estilos son exactamente iguales. </h1> </body> </html> Practica: Crear una página HTML y definir tres mensajes entre las marcas h1. si tenemos dos secciones h1. Luego definir un estilo interno a la marca que fije el color de texto en rojo y el fondo en amarillo. En este primer ejemplo inicializamos las propiedades color (define el color del texto) y background-color (define el color de fondo del texto).background-color:#ffff00"> Este mensaje es de color rojo sobre fondo amarillo.background-color:#ffff00"> Este mensaje es de color rojo sobre fondo amarillo. </h1> Veremos más adelante que hay muchas propiedades en CSS. Cada vez que inicializamos una propiedad debemos separarla de la siguiente por punto y coma. tenemos que tener en cuenta que el estilo se aplica únicamente a la marca donde inicializamos la propiedad style. lo que hacemos con la propiedad style es redefinir el estilo por defecto.html <h1 style="color:#ff0000. es decir. todo navegador tiene un estilo definido para cada marca HTML. h2 y h3. pagina1. Cuando definimos estilos directamente en las marcas HTML. deberemos definir la propiedad style para cada marca: <h1 style="color:#ff0000. Ejemplo: Definir <html> <head> </head> <body> un texto dentro de la marca HTML h1. </h1> </body> </html> Por defecto. 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).background-color:#ffff00"> Primer título </h1> <h1 style="color:#ff0000. 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.Es común definir estilos directamente en las marcas HTML cuando estamos diseñando la página y posteriormente trasladar el estilo creado a una hoja de estilos.

Podemos observar que es mucho más eficiente que definir los estilos directamente sobre las marcas HTML. El problema del concepto anterior donde debíamos crear un estilo similar para la marca h1 se puede resolver en forma más adecuada empleando la definición de estilos a nivel de página. Es la definición de estilos en una sección de la cabecera de la página HTML donde podemos definir estilos que se aplican a las distintas marcas HTML de la página.background-color:#ffff00} </style> </head> <body> <h1>Primer título</h1> <h1>Segundo título</h1> </body> </html> Podemos observar que en la cabecera de la página definimos la sección: <style type="text/css"> h1 {color:#ff0000.background-color:#ffff00} </style> </head> <body> <h1>Primer título</h1> <h1>Segundo título</h1> Página 105 . Definición de estilos a nivel de página. pagina1.3.background-color:#ffff00} </style> Debe estar encerrada por la marca style. En este ejemplo indicamos al navegador que en todos los lugares de esta página donde se utilice la marca h1 debe aplicar como estilo de color de texto el rojo y fondo el amarillo.html <html> <head> <title>Problema</title> <style type="text/css"> h1 {color:#ff0000. Problema: Mostrar dos títulos con texto de color rojo sobre fondo amarillo. Podemos definir estilos para muchas marcas en la sección 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 títulos con texto de color rojo sobre fondo amarillo. <html> <head> <title>Problema</title> <style type="text/css"> h1 {color:#ff0000.

font-size:30px. La primera regla definida para la marca h1 es: h1 { font-family:times new roman. Propiedades relacionadas a fuentes. h4. } Recordemos que para definir la regla de estilo debemos indicar el nombre de la marca HTML a la que definiremos el estilo y luego. un ejemplo: <html> <head> <title>Problema</title> <style type="text/css"> h1 { font-family:times new roman. todas las propiedades y sus valores separados por punto y coma. font-size:30px. 4. Mostrar mensajes utilizando estas marcas a las que se le han definido estilos (por ahora sólo conocemos el color de texto y fondo). h2. eso significa que el navegador utilizará esas reglas de fuentes para todas las partes de la página que se utilicen dichas marcas HTML. } h2 { font-family:verdana. h3. La primera propiedad inicializada es font-family. font-weight:bold. font-style:italic. Contamos con una serie de propiedades relacionadas a fuentes: font-family font-size font-style font-weight font-variant Podemos inicializar algunas o todas las propiedades relacionadas a fuentes. h5 y h6. font-style:italic. } </style> </head> <body> <h1>Titulo de nivel 1</h1> <h2>Titulo de nivel 2</h2> </body> </html> Como podemos observar. font-weight:bold. font-size:20px.</body> </html> Practica: Definir un estilo diferente para las marcas h1. hemos definido dos reglas de estilos para las marcas h1 y h2. entre paréntesis. algunas de las fuentes más comunes que puede acceder el navegador son: Arial Arial Black Arial Narrow Página 106 .

La segunda propiedad inicializada es font-size. georgia.Courier New Georgia Impact Tahoma Times New Roman Verdana En caso que la fuente no esté disponible el navegador selecciona el estilo por defecto para esa marca HTML. arial. quien elegirá los valores correspondientes. Podemos definir varias fuentes por si acaso alguna no se encuentra disponible para el navegador. en nuestro caso indicamos en píxeles: font-size:30px. } Las propiedades que no se inicializan quedan como responsabilidad al navegador. Para la marca h2 definir una fuente de tipo 'verdana' y de 20 píxeles de alto. esto lo hacemos separando por coma todas las fuentes (se eligen de izquierda a derecha): font-family: verdana. La segunda regla define sólo dos propiedades relacionadas a la fuente: h2 { font-family:verdana. pudiendo tomar los siguientes valores: normal bold bolder lighter 100 200 300 400 500 600 700 800 900 Esta propiedad indica el peso de la fuente (mientras tenga un valor mayor los caracteres serán más rellenos). font-size:20px. fuente de 30 pixeles. La tercera propiedad es font-style. que puede tener los siguientes valores: normal italic oblique La última propiedad es font-weight. Ejemplo: Definir para la marca h1 una fuente de tipo 'new times roman'. Existe una última propiedad no utilizada en este ejemplo que es font-variant que puede asumir estos dos valores: small-caps normal Define si la fuente se muestra en mayúsculas tipo normal o pequeñas.html Página 107 . pagina1. estilo italic y peso bold. hay varias medidas para indicar el tamaño de la fuente (veremos más adelante otros sistemas de medida).

color:#0000ff. Página 108 .h5 y h6.25. } </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.h3 { font-family:verdana. color:#0000ff.20. } h2 { font-family:verdana.30.h2. Supongamos que queremos la misma fuente y color para las marcas h1. Inicializar la propiedad font-family para las tres primeras marcas con los valores: Arial. separamos por coma todas las marcas a las que se aplicará la misma regla de estilo: h1. font-weight:bold. font-size:20px. Agrupación de varias marcas HTML con una misma regla de estilo.15 y 10 píxeles).h3 { font-family:verdana.h2 y h3.h2. } Ejemplo: Confeccionar una página HTML que defina la misma fuente y color para las marcas h1. Arial Black y Arial Narrow. font-style:italic.h2. Inicializar la propiedad font-size con valores decrecientes para cada una de las marcas (40.<html> <head> <title>Problema</title> <style type="text/css"> h1 { font-family:times new roman. } </style> </head> <body> <h1>Título de nivel 1</h1> <h2>Título de nivel 2</h2> <h3>Título de nivel 3</h3> </body> </html> Es decir. font-size:30px.h2 y h3 luego podemos implementarlo de la siguiente manera: <html> <head> <title>Problema</title> <style type="text/css"> h1.h4.h3. Esta característica nos permite ahorrar la escritura de reglas duplicadas para diferentes marcas HTML. 5.

} </style> </head> <body> <h1>Título de nivel 1</h1> <h2>Título de nivel 2</h2> <h3>Título de nivel 3</h3> </body> </html> Practica: Definir la misma fuente. luego podemos implementarlo de la siguiente manera: <html> <head> <title>Problema</title> <style type="text/css"> h1. Definición de varias reglas para una misma marca HTML.h5. } </style> </head> <body> <h1>Título de nivel 1</h1> Página 109 . } h2 { font-size:30px.h2. } h5 { font-size:15px. Supongamos que queremos todas las cabeceras con la misma fuente pero tamaños de fuente distinta. } h3 { font-size:25px.h3 { font-family:verdana.h3. En algunas circunstancias. color:#0000ff.h4. es necesario desglosar la inicialización de propiedades en distintas reglas.h2.Pagina1. } h4 { font-size:20px. color y tamaño de fuente para las marcas p (párrafo) y h6 (tener en cuenta que cuando vea la página el texto que se encuentra en la marca h6 difiere del texto que se encuentra dentro del párrafo por la propiedad font-weight (ya que la marca h6 es de tipo bold y la marca p tiene por defecto normal) 6. } h1 { font-size:40px.h6 { font-family:Verdana.html <html> <head> <title>Problema</title> <style type="text/css"> h1. } h6 { font-size:10px.

} h2 { font-size:30px. a la marca h1 realmente le hemos definido 2 propiedades: font-family y fontsize.html <html> <head> <title>Problema</title> <style type="text/css"> h1. h6) con la misma fuente (Verdana) pero tamaños de fuente distinta. podemos inicializar un conjunto de marcas HTML con una serie de propiedades de estilo comunes. pagina1. } h5 { font-size:15px.<h2>Título <h3>Título <h4>Título <h5>Título <h6>Título </body> </html> de de de de de nivel nivel nivel nivel nivel 2</h2> 3</h3> 4</h4> 5</h5> 6</h6> Es decir. h5. h3. h4. } h1 { font-size:40px.h3.h6 { font-family:Verdana. } </style> </head> <body> <h1>Título de nivel 1</h1> <h2>Título de nivel 2</h2> <h3>Título de nivel 3</h3> <h4>Título de nivel 4</h4> <h5>Título de nivel 5</h5> <h6>Título de nivel 6</h6> </body> </html> Practica: Definir para la marca <h6> el mismo tamaño de fuente (12px) que la marca <p> (párrafo) pero color azul para el título y gris claro (color:#aaaaaa) para el Página 110 . Luego agregamos en forma individual las propiedades no comunes a dichas marcas: h1.h4.h3.h6 { font-family:Verdana.h4.h5. } h1 { font-size:40px. } h3 { font-size:25px.h5. } h6 { font-size:10px. Ejemplo: Definir todas las marcas de cabecera (h1. } h4 { font-size:20px.h2. } Es decir. h2.h2. Lo mismo para las otras marcas HTML.

tachado o una línea en la parte superior. Si queremos verde puro: color:#00ff00 Si queremos azul puro: color:#0000ff Luego si queremos amarillo debemos mezclar el rojo y el verde: color:#ffff00 Hay muchos programas que nos permiten seleccionar un color y nos descomponen dicho valor en las proporciones de rojo. es por medio de la siguiente sintaxis: color:rgb(255. 7. lo podemos indicar por medio de tres valores hexadecimales que indican la mezcla de rojo. h2 y h3: <head> <title>Problema</title> <style type="text/css"> h1 { color:#ff0000.blue). La tercera propiedad relacionada al texto que podemos emplear es text-decoration que nos permite entre otras cosas que aparezca subrayado el texto. text-align:left. definiremos estilos relacionados al texto para las marcas de cabecera h1. por medio de la función rgb (red. verde y azul. nos permite definir el color del texto. El texto aparecerá centrado. Propiedades relacionadas al texto. que puede tomar alguno de estos cuatro valores: left right center justify Si especificamos: text-align:center. verde y azul en formato decimal. A una de estas propiedades ya la vimos cuando comenzamos con los primeros conceptos: color. Página 111 .0). Otra forma de indicar el color. si tenemos los valores en decimal. Es decir. los valores posibles de esta propiedad son: none underline overline line-through Como ejemplo. Si queremos justificar a derecha.0. text-decoration:underline.green. verde y azul. Por ejemplo si queremos rojo puro debemos indicar: color:#ff0000. La segunda propiedad relacionada al texto es text-align.párrafo. indicamos la cantidad de rojo. Agrupar las dos marcas para la definición de la fuente y posteriormente agregar a cada marca el valor respectivo para el color del texto. emplearemos el valor right y si queremos a la izquierda. el valor será left.

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

Es decir, para los títulos de nivel 1 tenemos la regla:
h1 { color:#ff0000; text-align:left; text-decoration:underline; }

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

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

Para los títulos de nivel tres, el texto es rojo más 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;

Página 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>Título de nivel 1.<h1> <h2>Título de nivel 2.<h2> <h3>Título de nivel 3.<h3> </body> </html>

8.

Más propiedades relacionadas al texto.

Vimos en el concepto anterior las propiedades:
color text-align text-decoration

Ahora veremos el objetivo de las siguientes propiedades que nos faltan:
letter-spacing word-spacing text-indent text-transform

La propiedad letter-spacing y word-spacing permiten indicar el espacio que debe haber entre los caracteres y entre las palabras. La propiedad text-indent, indenta la primera linea de un texto. A partir de la segunda línea, el texto aparece sin indentación. Podemos indicar un valor negativo con lo que la indentación 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 mayúsculas el primer caracter de cada palabra. lowercase: Convierte a minúsculas todas las letras del texto. uppercase: Convierte a mayúsculas todas las letras del texto. none: No provoca cambios en el texto. El siguiente ejemplo define reglas para las marcas h1 y p:
<html>

Página 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 título de nivel 1</h1> <p>Todo el texto siguiente se encuentra encerrada en la marca de párrafo 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 línea del párrafo comience en una columna inferior al de todo el bloque. </p> </body> </html>

La cabecera de nivel uno, tiene la siguiente regla:
h1 { letter-spacing:10px; word-spacing:30px; text-transform:capitalize; }

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

Es decir, la primera línea del párrafo deberá imprimirse 20 píxeles a la derecha donde normalmente debería aparecer.

Ejemplo: Inicializar las marcas h1 y p con los siguientes valores:
h1 { letter-spacing:10px; word-spacing:30px; text-transform:capitalize; } p { text-indent:20px; }

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

Página 114

} </style> </head> <body> <h1>Este es un título de nivel 1</h1> <p>Todo el texto siguiente se encuentra encerrada en la marca de párrafo 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 línea del párrafo 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 mayúsculas.

9.

Herencia de propiedades de estilo.

Ahora veremos que el conjunto de marcas HTML forman en sí un árbol que en su raiz podemos identificar la marca body del cual se desprenden otras marcas contenidas en esta sección, como podrían ser las marcas h1,h2,h3,h4,h5,h6,p,div luego estas en su interior contienen otras marcas HTML como podrían 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 título de nivel 1 y con la marca 'em' la palabra: <em>Hola</em></h1> <p>Todo este párrafo debe ser de color azul ya que lo hereda de la marca body.</p> <a href="pagina2.html">Siguiente ejemplo</a> </body> </html>

En este ejemplo hemos definido la siguiente regla para la marca body:
body { color:#0000ff;

Página 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 recibirán los valores aquí definidos. En este ejemplo la cabecera de primer nivel es decir h1, el párrafo y el hipervínculo tienen como color el azul y la fuente es de tipo verdana. Ahora bien en muchas situaciones podemos redefinir propiedades para marcas contenidas, veamos cómo 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 título de nivel 1 y con la marca 'em' la palabra: <em>Hola</em></h1> <p>Todo este párrafo debe ser de color gris ya que lo redefine la marca p y no lo hereda de la marca body.</p> </html>

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

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

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

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

Ejemplo: Confeccionar una página aplicando el siguiente estilo:
body { color:#0000ff; font-family:verdana; }

Página 116

} pagina1. } em { color:#008800. cada uno con las marcas h1. Por último imprima un párrafo. font-family:verdana. Luego defina reglas de estilo para las marcas h1.html">Siguiente ejemplo</a> </body> </html> pagina2. Ejemplo 2: Definir dos reglas más de estilo al problema uno.Luego imprimir contenido dentro de las marcas h1. que sobrescriban la propiedad color: em { color:#008800. font-family:verdana.html <html> <head> <title>Problema</title> <style type="text/css"> body { color:#0000ff. } p { color:#999999. font-family. } </style> </head> <body> <h1>Este es un título de nivel 1 y con la marca 'em' la palabra: <em>Hola</em></h1> <p>Todo este párrafo debe ser de color azul ya que lo hereda de la marca body. em y p. Página 117 . Imprima tres títulos.h2 y h3 que redefinan la fuente con los valores: Times New Roman.</p> </html> Practica: Confeccione una página que define una regla para la marca body e inicialice las propiedades color.html <html> <head> <title>Problema</title> <style type="text/css"> body { color:#0000ff.h2 y h3. } p { color:#999999. } </style> </head> <body> </body> <h1>Este es un título de nivel 1 y con la marca 'em' la palabra: <em>Hola</em></h1> <p>Todo este párrafo debe ser de color gris ya que lo redefine la marca p y no lo hereda de la marca body. Courier y Arial.</p> <a href="pagina2.

b{ color:#ff0000. Sólo en ese caso el estilo para dicha marca se activará. luego la sintaxis del problema es: <html> <head> <title>Problema</title> <style type="text/css"> p b{ color:#0000ff. activar el color rojo para el contenido encerrado por la marca b. } Estamos diciendo que todas los bloques de la página que contengan la marca b (bold) y que estén contenidas por la marca p (párrafo) se pinten de azul. } Es decir. } Es decir que el texto contenido por las marcas h1 y b deben aparecer de color rojo. solo uno se pinta de color azul. como por ejemplo: div h1 em { Página 118 . Se pueden definir estilos en función del contexto.10. Pero si la marca b está contenida por la marca h1 el color debe ser rojo. luego un bloque con la marca bold debe aparecer <b>así</b></h1> <p> Luego si escribimos un párrafo y encerramos un bloque con la marca bold debe aparecer <b>así</b> </p> </body> </html> Es importante analizar la sintaxis para la definición de estilos en función del contexto. } h1 b{ color:#ff0000. No confundir con la sintaxis para definir reglas de estilo a dos marcas que se hace separando por coma las marcas HTML: h1. con mayor precisión. Definición de un estilo en función del contexto. } </style> </head> <body> <h1>Acá tenemos un título de nivel uno. ya que tenemos: h1 b{ color:#ff0000. siempre y cuando se encuentre contenido por la marca h1. Este otro recurso que provee las css es la definición de un estilo para una marca HTML siempre y cuando la misma esté contenida por otra marca determinada. el otro bloque se pinta de color verde. Si bien hay dos bloques en la página que están encerrados por la marca b. Supongamos que queremos que cuando disponemos un texto encerrado por la marca b (bold) dentro de un párrafo el color de la misma sea verde. Tenemos: p b{ color:#0000ff.

La segunda página muestra un estilo en función del contexto dependiendo de dos marcas que la contengan. } </style> </head> <body> <h1>Acá tenemos un título de nivel uno.html">Siguiente página</a> </body> </html> pagina2. Pinta de rojo un texto contenido por la marca em siempre y cuando este contenido por la marca h1 y div (en ese orden). Página 119 .html <html> <head> <title>Problema</title> <style type="text/css"> div h1 em { color:#ff0000. } </style> </head> <body> <div> <h1>Este es un titulo de nivel 1 dentro de un <em>div</em></h1> </div> <h1>Este es un titulo de nivel 1 fuera de un <em>div</em></h1> </body> </html> Ejemplo: Disponer un texto encerrado por la marca b (bold) dentro de un párrafo.html <html> <head> <title>Problema</title> <style type="text/css"> p b{ color:#0000ff. luego un bloque con la marca bold debe aparecer <b>así</b></h1> <p> Luego si escribimos un párrafo y encerramos un bloque con la marca bold debe aparecer <b>así</b> </p> <a href="pagina2. La página completa queda codificada de la siguiente forma: <html> <head> <title>Problema</title> <style type="text/css"> div h1 em { color:#ff0000.color:#ff0000. } h1 b{ color:#ff0000. el color de la misma será verde. Pero si la marca b está contenida por la marca h1 el color debe ser rojo. } 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. pagina1.

Ahora veremos que la metodología más empleada es la definición de una hoja de estilo en un archivo separado que deberá tener la extensión css.verde. Otra ventaja es que cuando un navegador solicita una página. La ventaja fundamental es que con esto podemos aplicar las mismas reglas de estilo a parte o a todas las páginas del sitio web.html): <html> <head> <title>Problema</title> <link rel="StyleSheet" href="estilos. 11. Definición de hojas de estilo en un archivo externo. ese mismo archivo se rescata de la caché y no requiere que el servidor web se lo reenvíe (ahorrando tiempo de transferencia). se le envía el archivo HTML y el archivo CSS.h5 y h6. en las sucesivas páginas que requieran el mismo archivo de estilos. Dijimos que la primera forma es muy poco recomendada y la segunda es utilizada cuando queremos definir estilos que serán empleados sólo por esa página. El archivo HTML es (pagina1. color:#bbbbbb. con lo cual.h3. color:#cccccc. Veremos que esto será muy provechoso cuando necesitemos hacer cambios de estilo (cambiando las reglas de estilo de este archivo estaremos cambiando la apariencia de múltiples páginas del sitio).} </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. Ahora veremos la primera página HTML que tiene asociada una hoja de estilo en un archivo externo. quedando guardado este último archivo en la caché de la computadora.h2.h4.css" type="text/css"> </head> Página 120 . Una escala de grises que podemos utilizar es: color:#dddddd.azul) estamos en presencia de un gris (salvo el #000000 y el #ffffff). Aparecen los bloques de más claro a más oscuro (cuando los tres valores son iguales (rojo. Tambien tiene como ventaja que al programador le resulta más ordenado tener lo referente a HTML en un archivo y las reglas de estilo en un archivo aparte. Hasta ahora hemos visto la definición de estilos a nivel de marca HTML y la definición de estilos a nivel de página. Este archivo contendrá las reglas de estilo (igual como las hemos visto hasta ahora) pero estarán separadas del archivo HTML. color:#aaaaaa color:#999999 color:#888888.

html <html> <head> <title>Problema</title> <link rel="StyleSheet" href="estilos. pagina1. } p { color:#555555. Definir reglas de estilos para las marcas body. que es en definitiva la forma más común de desarrollar un sitio web aplicando CSS. Ejemplo: Confeccionar una página HTML que incorpore una hoja de estilo desde un archivo externo. indica al navegador cual es el formato de archivo. } Como podemos observar. Ahora veremos que la metodología más empleada es la definición de una hoja de estilo en un archivo separado que deberá tener la extensión css. Sólo queda probar esta página desde la sección de "Problema Resuelto". para indicar el archivo de estilos externo. } h1 { color:#0000cc. Dijimos que la primera forma es muy poco recomendada y la segunda es utilizada cuando queremos definir estilos que serán empleados solo por esa página. font-family:verdana. text-align:center. font-family:times new roman. Ahora veremos que la metodología más empleada es la definición de una hoja de estilo en un archivo separado que deberá tener la extensión css. De ahora en más nos acostumbraremos a trabajar con hojas de estilo definidas en un archivo externo. </p> Página 121 . h1 y p. Dijimos que la primera forma es muy poco recomendada y la segunda es utilizada cuando queremos definir estilos que serán empleados solo por esa página.El atributo rel se usa para definir la relación entre el archivo enlazado y el documento HTML. text-decoration:underline.css" type="text/css"> La propiedad href hace referencia al archivo externo que afectará la presentación de esta página. </p> </body> </html> El archivo que tiene las reglas de estilo es (estilos. En la propiedad type.css): body { background-color:#eafadd. text-align:justify.<body> <h1>Definición de hojas de estilo en un archivo externo. font-size:25px.css" type="text/css"> </head> <body> <h1>Definición de hojas de estilo en un archivo externo. debemos agregar en la cabecera (head) del archivo HTML la siguiente marca: <link rel="StyleSheet" href="estilos.</h1> <p> Hasta ahora hemos visto la definición de estilos a nivel de marca HTML y la definición de estilos a nivel de página.</h1> <p> Hasta ahora hemos visto la definición de estilos a nivel de marca HTML y la definición de estilos a nivel de página.

12. background-color:#ffff00.css) es: body { background-color:#eeeeee. text-decoration:underline.resaltado{ color:#000000. en esos casos conviene plantear una regla de estilo con un nombre genérico que posteriormente se puede aplicar a varias marcas de HTML. } p { color:#555555.resaltado{ color:#000000.h2 y p.</body> </html> estilos. } La sintaxis para definir una clase aplicable a cualquier marca HTML es: . En muchas situaciones una regla de estilo puede ser igual para un conjunto de marcas HTML. text-align:center.css body { background-color:#eafadd.resaltado en la última <span class="resaltado">palabra.css" type="text/css"> </head> <body> <h1 class="resaltado">Titulo de nivel 1</h1> <p> Este parrafo muestra el resultado de aplicar la clase . Para conocer la sintaxis para la definición de clases veamos un ejemplo.</span> </p> </body> </html> La hoja de estilo externa (estilos. } h1 { color:#0000cc. Intentar el planteo de una página que muestre el contenido de la forma más clara posible. font-style:italic. } . luego una cabecera de nivel 2 (h2) y un párrafo. Inicializar propiedades vistas en conceptos anteriores. font-family:times new roman. text-align:justify. la pagina1. } Crear una página web que contenga una cabecera de nivel 1 (h1). font-family:verdana. Página 122 . font-size:25px. Definición de estilos por medio de clases. Definir reglas de estilo para las tres marcas h1.html es: <html> <head> <title>Problema</title> <link rel="StyleSheet" href="estilos.

css body { background-color:#eeeeee. } Aplicar esta regla a las marcas h1 y span. } Es decir.html <html> <head> <title>Problema</title> <link rel="StyleSheet" href="estilos. agregamos la propiedad class y le asignamos el nombre de la clase (sin el punto). Página 123 .subrayado { color:#00aa00. } .resaltado{ color:#000000. Dentro definimos las reglas de estilo como hemos venido trabajando normalmente.css" type="text/css"> </head> <body> <h1 class="resaltado">Titulo de nivel 1</h1> <p> Este parrafo muestra el resultado de aplicar la clase . background-color:#ffff00. El nombre de la clase no puede comenzar con un número. font-style:italic. font-style:italic. pagina1. text-decoration:line-through. Podemos inicializar tantas marcas HTML con esta regla como necesitemos: <p> Este parrafo muestra el resultado de aplicar la clase .tachado { color:#00aa00.resaltado{ color:#000000.background-color:#ffff00. para indicar que una marca sea afectada por esta regla: <h1 class="resaltado">Titulo de nivel 1</h1> Es decir. la inicializamos con el caracter punto y seguidamente un nombre de clase.</span> </p> </body> </html> estilos.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. Luego. } . background-color:#ffff00. Ejemplo: Definir la clase: . text-decoration:underline. } Practica 1: Definir en la hoja de estilo estas dos clases: . font-style:italic.resaltado en la última <span class="resaltado">palabra.

color:#555555. La sintaxis para definir un estilo por medio de Id es: #cabecera { font-family:Times New Roman.respuesta { font-family:verdana. Definición de estilos por medio de Id.css) es: #cabecera { Página 124 .css" type="text/css"> </head> <body> <div id="cabecera"> <h1>Título de la cabecera</h1> </div> </body> </html> Y el archivo de estilos (estilos. font-size:12px. font-style:italic. La diferencia fundamental en la definición de un estilo por medio de Id con respecto a las clases. Luego un párrafo que tenga algunas palabras subrayadas y otras tachadas (utilizar la marca span para asignar estilos a una palabra). utilizamos el caracter numeral (#) para indicar que se trata de un estilo de tipo Id. Practica 2: Definir estas dos reglas en la hoja de estilo externa. } .pregunta y .respuesta . font-style:normal. Luego crear una página HTML que contenga 3 preguntas y 3 respuestas. font-size:14px. en la página html.} Luego. Luego. color:#0000ff. text-align:justify. A cada pregunta y respuesta disponerla en un párrafo distinto. background-color:#bbbbbb. Los dos archivos completos del ejemplo entonces quedan (pagina1. color:#0000aa. } Es decir. es que sólo podremos aplicar dicho estilo a una sola marca dentro de la página HTML. definir un título con nivel h1 (subrayar todo el título).pregunta { font-family:verdana. Asignar los estilos . text-align:center. sólo una marca HTML dentro de una página puede definir un estilo de este tipo: <div id="cabecera"> Hay que tener en cuenta que sólo una marca puede definir la propiedad id con el valor de cabecera.html): <html> <head> <title>Problema</title> <link rel="StyleSheet" href="estilos. } 13. font-size:30px.

Podemos acceder a las propiedades del borde de ese rectángulo mediante las CSS.css #cabecera { font-family:Times New Roman. background-color:#bbbbbb. Debemos ahora hacernos la idea que todo elemento que se crea dentro de una página HTML genera una caja. background-color:#bbbbbb. etc.html <html> <head> <title>Problema</title> <link rel="StyleSheet" href="estilos.h2. font-size:30px. color:#0000ff.html <html> <head> <title>Problema</title> <link rel="StyleSheet" href="estilos.. definir la propiedad id con el nombre del estilo creado. text-align:center.em. pagina1.css" type="text/css"> </head> <body> <p class="pregunta">Quién descubrió América Página 125 .css" type="text/css"> </head> <body> <div id="cabecera"> <h1>Título de la cabecera</h1> </div> </body> </html> estilos. luego definir en el archivo HTML tres areas (div) inicializando el atributo Id con los nombres de estilo creados. text-align:center.font-family:Times New Roman. Propiedades relacionadas al borde de una marca HTML. color:#0000ff. font-size:30px.h3. si fijamos la propiedad background-color veremos que el contenido se encuentra dentro de un rectángulo. 14. } Practica: Definir tres estilos de tipo Id (cabecera. Imaginemos los controles que hemos creado h1. } Ejemplo: Crear un estilo por medio de un Id. luego crear una página con un bloque div.p. cuerpo y pie). las propiedades más importantes a las que tenemos acceso son: border-width border-style border-color Veamos un ejemplo que inicialice estas propiedades: pagina1.

Luego recordar que para indicar que una marca tenga este estilo debemos inicializar la propiedad class de la marca HTML: <p class="pregunta">Quién descubrió América y en que año fue?</p> Al segundo estilo definido lo hemos hecho con la clase .pregunta que inicializa el color de fondo en amarillo y luego define el ancho del borde en un pixel. } Como podemos ver. border-width:1px.html <html> <head> <title>Problema</title> <link rel="StyleSheet" href="estilos. } En ésta hemos cambiado el estilo de borde.respuesta { border-width:1px.respuesta . border-style:dashed. border-style:solid.respuesta { border-width:1px. border-width:1px.pregunta { background-color:#ffff00.css . Inicializar estilos para el borde. } . Disponemos de los siguientes estilos de borde: none hidden dotted dashed solid double groove ridge inset outset Ejemplo: Definir dos párrafos que representen una pregunta y una respuesta. border-color:#000000. border-style:dashed.css . Página 126 .css" type="text/css"> </head> <body> <p class="pregunta">Quién descubrió América y en que año fue?</p> <p class="respuesta">Colón en 1492</p> </body> </html> estilos. hemos definido dos clases . pagina1. el estilo es sólido y el color de la línea de borde es negro.y en que año fue?</p> <p class="respuesta">Colón en 1492</p> </body> </html> estilos.pregunta { background-color:#ffff00. border-color:#000000. border-color:#000000.

css" type="text/css"> </head> <body> <h1 class="titulopagina">El blog del pensador</h1> </body> </html> y el archivo de estilos: . Más propiedades relacionadas al borde de una marca HTML Como vimos en el concepto anterior tenemos propiedades que nos permiten fijar el grosor.respuesta { border-width:1px.titulopagina { background-color:#ffffcc. border-color:#000000.border-style:solid. } . } 15. border-style:dashed. Pero podemos ir un paso más alla. estilo y color del borde de una marca HTML. border-style:solid. } Practica: Inicializar las marcas h1. Página 127 . font-size:40px. border-color:#000000. color azul y diferentes estilos para cada una. las CSS nos permiten modificar independientemente cada uno de los cuatro bordes del rectángulo. border-color:#0000ff. Contamos con las siguientes propiedades: border-top-width border-right-width border-bottom-width border-left-width border-top-style border-right-style border-bottom-style border-left-style border-top-color border-right-color border-bottom-color border-left-color Un ejemplo inicializando estas propiedades: <html> <head> <title>Problema</title> <link rel="StyleSheet" href="estilos.h2 y h3 con bordes de 2 pixeles. Ej: h1 { border-width:2px. text-align:center. Crear una página HTML que los utilice. font-family:verdana.

css . border-left-width:1px. Ejemplo: Crear una clase . } Practica: Crear una clase .titulopagina que inicialice independientemente el grosor. border-bottom-style:solid.titulopagina { background-color:#ffffcc.titulosecundario que inicialice el borde superior e inferior con ancho de 2 pixeles y los bordes laterales con cero pixel. border-bottom-color:#ff0000.border-top-width:1px. font-size:40px. border-top-width:1px. border-top-color:#ffaa00. border-left-color:#ffaa00. border-bottom-width:3px. border-top-style:dotted. text-align:center. border-left-style:dotted. Veremos más adelante que hay otras formas de inicializar los bordes de las marcas que reducen el texto a tipear. A su elección queda el estilo y color. border-right-width:3px. border-bottom-style:solid. border-top-color:#ffaa00. Página 128 . border-right-width:3px. border-right-style:solid. border-right-style:solid. border-left-width:1px. border-bottom-width:3px.css" type="text/css"> </head> <body> <h1 class="titulopagina">El blog del pensador</h1> </body> </html> estilos. estilo y color de la propiedad del borde.html <html> <head> <title>Problema</title> <link rel="StyleSheet" href="estilos. border-top-style:dotted. border-left-style:dotted. estilo o color. border-right-color:#ff0000. border-bottom-color:#ff0000. border-right-color:#ff0000. pero no son las más adecuadas cuando uno está comenzando a estudiar CSS. esta metodología de inicializar el borde de un control HTML. border-left-color:#ffaa00. pagina1. tiene utilidad si los mismos varían en grosor. font-family:verdana. } Es decir.

relleno=false. border-width:1px. } public void rellenar(boolean r){ relleno=r. border-style:dotted. Propiedades relacionadas al padding de una marca HTML. El padding (almohadilla) suma espacio entre el contenido de la marca HTML y el borde (recordar propiedad border) Podemos configurar los 4 en caso que tengan el mismo valor accediendo a la propiedad: padding o podemos configurar en forma independiente cada lado: padding-top padding-right padding-bottom padding-left Veamos un ejemplo. font-size:12px.css" type="text/css"> </head> <body> <pre class="codigofuente"> public class Rectangulo{ //atributos int alto. } public Rectangulo() {// constructor alto=20. //métodos public int devolverArea(){ return alto*ancho.16.codigofuente { font-family:Courier. int ancho. background-color:#ffffcc. alto=al. } public void cambiarTamano(int an. padding:20px. border-color:#ffaa00. boolean relleno. ancho=10. } }//fin clase Rectangulo </pre> </body> </html> El archivo estilos.html: <html> <head> <title>Problema</title> <link rel="StyleSheet" href="estilos. } Página 129 .css es: . int al){ ancho=an. la pagina1.

boolean relleno. se respetan los espacios y retornos de carro que hayamos puesto en el texto fuente.Con la marca HTML pre.css" type="text/css"> </head> <body> <pre class="codigofuente"> public class Rectangulo{ //atributos int alto. int al){ ancho=an. con borde y una separación entre el borde y el contendio de 20 pixeles.codigofuente { font-family:Courier. border-style:dotted. } public Rectangulo() {// constructor alto=20. border-width:1px. background-color:#ffffcc. 17. font-size:12px. Propiedades relacionadas al margen de una marca HTML. padding:20px. Ejemplo: Mostrar con a marca pre de HTML un pequeño programa de Java. } public void rellenar(boolean r){ relleno=r. } public void cambiarTamano(int an. Página 130 . Hacer que el mismo aparezca en un rectangulo amarillo. //métodos public int devolverArea(){ return alto*ancho. Este estilo de texto es muy adecuado cuando queremos mostrar el código fuente de un programa. relleno=false. ancho=10.html <html> <head> <title>Problema</title> <link rel="StyleSheet" href="estilos.css . } Practica: Definir una clase titulo que fije los padding de izquierda y derecha con 20 pixeles y el superior e inferior en 10. border-color:#ffaa00. Escribir un texto dentro de la marca h1. alto=al. pagina1. int ancho. } }//fin clase Rectangulo </pre> </body> </html> estilos.

html <html> <head> <title>Problema</title> <link rel="StyleSheet" href="estilos.Otra serie de propiedades relacionadas al contorno de una marca HTML son: margin margin-top margin-right margin-bottom margin-left El margen está después del borde. la página HTML muestra dos párrafos con cero pixeles de margen: <html> <head> <title>Problema</title> <link rel="StyleSheet" href="estilos. El modelo final de caja se puede resumir con esta imagen: Ejemplo: Mostrar dos párrafos con un margen de cero pixel. Veamos un ejemplo. pagina1.css" type="text/css"> </head> <body> <p>Primer párrafo</p> <p>Segundo párrafo</p> </body> </html> La hoja de estilo: p { background-color:#ffffaa. } Pruebe modificar el valor para la propiedad margin y vea el resultado de la página.css p { background-color:#ffffaa.css" type="text/css"> </head> <body> <p>Primer párrafo</p> <p>Segundo párrafo</p> </body> </html> estilos. margin:0px. Página 131 . margin:0px.

} Practica: Disponer títulos de primer y segundo nivel con un margen de 5 pixeles. Las listas se utilizan para enumerar una serie de elementos. se utiliza la marca HTML ul (Unordered List). y cada item de la lista con la marca HTML li (List Item). Las CSS nos permiten configurar las listas por medio de tres propiedades: list-style-type list-style-position list-style-image A list-style-type puede asignársele alguno de estos valores: none disc circle square decimal decimal-leading-zero lower-roman upper-roman lower-alpha upper-alpha Los valores de list-style-position: inside outside Los valores de list-style-image: none url Veamos un ejemplo que prueba todos los valores posibles que puede tomar la propiedad list-style-type: <html> <head> <title>Problema</title> <link rel="StyleSheet" href="estilos. 18.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"> Página 132 . Propiedades relacionadas a listas.

romanominuscula{ list-style-type:lower-roman.letrasmayusculas{ list-style-type:upper-alpha. } Lo que podemos ver es que cuando definimos las clases.cuadrado{ list-style-type:square. } ul.romanomayuscula{ list-style-type:upper-roman. } ul. le antecedemos al punto. } ul. } ul.circulovacio{ list-style-type:circle.decimal{ list-style-type:decimal. es decir que esta clase sólo tiene sentido aplicarla a dicha marca). } ul. } ul. } ul. el nombre de la marca donde se aplica dicha clase (en este caso ul.<li>Brasil</li> <li>Uruguay</li> <li>Argentina</li> </ul> <ul class="romanominuscula"> <li>Brasil</li> <li>Uruguay</li> <li>Argentina</li> </ul> <ul class="romanomayuscula"> <li>Brasil</li> <li>Uruguay</li> <li>Argentina</li> </ul> <ul class="letrasminusculas"> <li>Brasil</li> <li>Uruguay</li> <li>Argentina</li> </ul> <ul class="letrasmayusculas"> <li>Brasil</li> <li>Uruguay</li> <li>Argentina</li> </ul> </body> </html> Luego la hoja de estilo es: ul.circulorelleno{ list-style-type:disc. Ejemplo: Probar todos los valores posibles que puede tomar la propiedad list-styletype.letrasminusculas{ list-style-type:lower-alpha.vacio{ list-style-type:none. pagina1.html <html> Página 133 . } ul.

} ul. Página 134 .romanominuscula{ list-style-type:lower-roman.vacio{ list-style-type:none.circulorelleno{ list-style-type:disc.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. } ul.<head> <title>Problema</title> <link rel="StyleSheet" href="estilos.css ul.decimal{ list-style-type:decimal. } ul.

/ La imagen se repite en x e y hasta llenar la página por completo.} ul. } Luego con: body { Página 135 . } Practica: Confeccionar una lista con los nombres de países que jugaron el mundial de Alemania 2006 (mostrar sólo los cuatro primeros puestos. } ul. h1.. } ul. p.jpg). Como se encuentra en la carpeta inmediatamente superior debemos indicar con . } La única propiedad que hemos inicializado es background-image indicando el nombre del archivo de imagen a mostrar.). ya que por defecto background-repeat está inicializada con el valor repeat. Las propiedades relacionadas al background y sus valores son: background-color background-image background-repeat background-position background-attachment Veamos un ejemplo de disponer una imagen sobre el fondo de la página: <html> <head> <title>Problema</title> <link rel="StyleSheet" href="estilos. h2..css" type="text/css"> </head> <body> </body> </html> La hoja de estilo queda: body { background-image:url(. } ul. background-repeat:repeat-x. Hay otras propiedades relacionadas al fondo que nos permiten. probar de modificar el estilo primero con: body { background-image:url(. Propiedades relacionadas al fondo (background) Hasta ahora hemos probado y utilizado la propiedad background-color para fijar el color de fondo del contenido de una marca HTML (body.romanomayuscula{ list-style-type:upper-roman./fondo. 19. entre otras cosas. junto con la posición que obtuvieron).cuadrado{ list-style-type:square.letrasminusculas{ list-style-type:lower-alpha.. } ul.jpg).letrasmayusculas{ list-style-type:upper-alpha.circulovacio{ list-style-type:circle. disponer un archivo de imagen. etc./fondo.

h2. background-repeat:no-repeat. h3.jpg)./fondo../fondo.background-image:url(. } Y por último: body { background-image:url(.jpg). p../fondo. La regla: body { background-image:url(. } Dispone la imagen en la parte superior a la derecha. Por ejemplo: body { background-image:url(. } Dispone la imagen 400 pixeles desde la derecha y 10 píxeles desde arriba.. La siguiente regla: body { background-image:url(. background-repeat:repeat-x. background-repeat:no-repeat./fondo. background-position:400px 10px. background-position:20% 50%. } Luego con: body { Página 136 .... } Dispone la imagen 20% avanzando desde la izquierda y 50% avanzando desde arriba. La última propiedad background-position podemos indicar la posición de la imagen según 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. etc./fondo./fondo.jpg). probar de modificar el estilo primero con: body { background-image:url(.jpg).jpg). background-position:top right.jpg). } Tener en cuenta que podemos aplicar una imagen a otras marcas HTML (h1.). background-repeat:no-repeat. background-repeat:repeat-y. background-repeat:no-repeat. Ejemplo: La imagen se repite en x e y hasta llenar la página por completo. ya que por defecto background-repeat está inicializada con el valor repeat.

/fondo./fondo.jpg). font-style. background-repeat:repeat-y.. } Practica: Definir la imagen fondo. Como ejemplo tenemos: <html> <head> <title>Problema</title> <link rel="StyleSheet" href="estilos. font-variant y luego los valores obligatorios font-size y font-family en ese orden. background-repeat:no-repeat. 20./fondo.html <html> <head> <title>Problema</title> <link rel="StyleSheet" href="estilos..css body { background-image:url(.jpg). background-attachment:scroll.. } pagina1.jpg como fondo de la página. background-repeat:no-repeat.jpg). } Y por último: body { background-image:url(.background-image:url(.. Propiedades relacionadas a fuentes (FORMATO RESUMIDO) Vimos anteriormente una serie de propiedades relacionadas a la fuente: font-family font-size font-style font-weight font-variant En situaciones donde necesitemos inicializar varias de estas propiedades CSS nos permite utilizar una propiedad que engloba a todas estas: font Podemos indicar en cualquier orden font-weight. body { background-image:url(.jpg).css" type="text/css"> </head> <body> </body> </html> estilos. luego inicializar y probar la propiedad background-attachment con los dos valores posibles (scroll/fixed)./*luego probar con fixed*/ } Para probar el efecto que produce esta propiedad debe ingresar en el body de la página un texto muy grande que llene toda la página y permita hacer scroll (de no hacer esto no verá la diferencia entre un valor y otro del background-attachemnt)./fondo.css" type="text/css"> </head> <body> Página 137 .

Ejemplo: Definir la propiedad font para la marca p utilizando el formato reducido de inicialización.css p { font:bold italic 25px verdana. 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.h2 y h3. pagina1.<p>Hola Mundo</p> </body> </html> Luego el archivo de estilos: p { font:bold italic 25px verdana. Propiedades relacionadas al border (FORMATO RESUMIDO) Podemos inicializar todos los bordes con una sola propiedad: border Debemos indicar el border-width border-style border-color No debemos separarlas por coma.css" type="text/css"> </head> <body> <p>Hola Mundo</p> </body> </html> estilos. } Practica: Definir formatos reducidos para la propiedad font de las marcas h1. 21. No debemos separar por coma. } Es importante recordar que font-size y font-family deben ser los últimos valores inicializados y en ese orden.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> Página 138 . Luego probar con tres títulos los resultados obtenidos.html <html> <head> <title>Problema</title> <link rel="StyleSheet" href="estilos.

} p. si le sacamos el nombre de la marca HTML funciona igual.css h1.</body> </html> Y la hoja de estilo definida para esta página es: h1. border-left:1px none #0000ff. Inicializar las propiedades border-top y borderbottom para dicho cometido. 22. } Tener en cuenta que cuando le antecedemos el nombre de la marca HTML al nombre de la clase: h1.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.html Veamos las siguientes paginas: <html> <head> <title>Problema</title> <link rel="StyleSheet" href="estilos. } Practica: Confeccionar una página que disponga una línea en la parte inferior y superior de los títulos de nivel 1.comentarios{ border-top:1px solid #ffff00.tituloprincipal{ border:5px solid #ff0000. Página 139 . } p. border-bottom:1px solid #0000ff.comentarios{ border-top:1px solid #0000ff. border-right:1px none #0000ff. border-right:1px none #ffff00. Propiedades relacionadas al padding (FORMATO RESUMIDO) Podemos inicializar el padding de una marca HTML en forma resumida con: padding:padding-top padding-right padding-bottom padding-left si indicamos un único valor se aplica a los cuatro lados: padding: 1px si indicamos dos valores.tituloprincipal estamos indicando que dicha clase sálo se puede aplicar a dichas marcas.tituloprincipal{ border:5px solid #ff0000. De todos modos. Ejemplo: pagina1. el primero se aplica a la parte superior e inferior y el segundo valor a los lados izquierdo y derecho. border-left:1px none #ffff00.2 y 3. border-bottom:1px solid #ffff00.

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.html <html> <head> <title>Problema</title> <link rel="StyleSheet" href="estilos. Ejemplo: pagina1. Esto es una prueba para ver el funcionamiento de la propiedad padding. padding:5px 30px. </p> </body> </html> estilos. y a la izquierda y derecha tiene 30 píxeles. Esto es una prueba para ver el funcionamiento de la propiedad padding. Esto es una prueba para ver el funcionamiento de la propiedad padding. </p> </body> </html> Luego el archivo CSS: p.Veamos un ejemplo: <html> <head> <title>Problema</title> <link rel="StyleSheet" href="estilos. } Con este ejemplo. Aplicar las clases a tres párrafos. Esto es una prueba para ver el funcionamiento de la propiedad padding.comentarios { background-color:#dddddd. el párrafo tiene 5 píxeles de separación con el borde en la parte inferior y superior. Esto es una prueba para ver el funcionamiento de la propiedad padding. Esto es una prueba para ver el funcionamiento de la propiedad padding. 23.comentarios { background-color:#dddddd. Esto es una prueba para ver el funcionamiento de la propiedad padding.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. } Practica: Definir tres clases distintas con formatos diferentes para expresar el padding. Esto es una prueba para ver el funcionamiento de la propiedad padding.css p. padding:5px 30px. Propiedades relacionadas al margin (FORMATO RESUMIDO) Página 140 .

css" type="text/css"> </head> <body> <h1>Titulo Principal</h1> </body> </html> Y la hoja de estilo: h1 { margin:70px 20px. } Practica: Confeccionar una página con títulos de nivel h1.margenizquierdo { margin:0px 0px 0px 50px. } Ejemplo: Esta regla de estilo inicializa los márgenes de la marca h1.h2 y h3. Un ejemplo para ver la sintaxis: <html> <head> <title>Problema</title> <link rel="StyleSheet" href="estilos.css h1 { margin:70px 20px. el primero se aplica a la parte superior e inferior y el segundo valor a los lados izquierdo y derecho. Tener en cuenta que podemos definir el mismo nombre de clase si se aplica a marcas HTML distintas: h1.css" type="text/css"> </head> <body> <h1>Titulo Principal</h1> </body> </html> estilos.margenizquierdo { margin:0px 0px 0px 70px. } h2. Definir distintos márgenes del lado izquierdo. pagina1.html <html> <head> <title>Problema</title> <link rel="StyleSheet" href="estilos. } 24.El funcionamiento y sintaxis es similar al visto para el padding: margin margin-top margin-right margin-bottom margin-left si indicamos un único valor se aplica a los cuatro lados: margin: 1px si indicamos dos valores. Propiedades relacionadas al fondo (background)(FORMATO RESUMIDO) La propiedad background resume las propiedades vistas anteriormente: background background-color background-image background-repeat backgroundattachment Página 141 .

.css body { background: #ffffee url('.html <html> <head> <title>Problema</title> <link rel="StyleSheet" href="estilos.background-position Un ejemplo que inicializa esta propiedad con algunos valores en forma simultánea: <html> <head> <title>Problema</title> <link rel="StyleSheet" href="estilos. 25. pagina1. padding:0px./fondo. } Página 142 .css" type="text/css"> </head> <body> <h1>Título de nivel 1</h1> <h2>Título de nivel 2</h2> <p>Esto esta dentro de un párrafo</p> </body> </html> Luego en la hoja de estilo definimos: * { color:#0000aa. Ejemplo: Inicializar la propiedad background con formato resumido.jpg') repeat-x.css" type="text/css"> </head> <body> </body> </html> estilos. } No es obligatorio inicializar todos los valores. margin:0px. Veamos un ejemplo: <html> <head> <title>Problema</title> <link rel="StyleSheet" href="estilos.jpg') repeat-x. } Practica: Confeccionar una página que inicialice el fondo de la marca h1 con una imagen.css" type="text/css"> </head> <body> </body> </html> La hoja de estilo es: body { background: #ffffee url('.. El selector universal * Si queremos inicializar las propiedades de todas las marcas HTML podemos utilizar el selector universal./fondo.

border-width:1px. Ejemplo: Definir la siguiente regla de estilo: * { color:#0000aa. Imaginemos si definimos h1 { color:#ff0000} significa que tiene prioridad esta regla. border-color:#000000. } Es común inicializar las propiedades margin y padding con cero y luego asignar estos valores para todas las marcas que lo requieran. margin:0px. border-color:#000000. en forma tácita lo hemos estado utilizando. pagina1.css" type="text/css"> </head> <body> <h1>Título de nivel 1</h1> <h2>Título de nivel 2</h2> <p>Esto esta dentro de un párrafo</p> </body> </html> estilos. cuando definimos una regla que sólo se puede utilizar en un sólo tipo de marcas: p. border-width:1px. } Es decir que podemos asignar esta regla a cualquier marca HTML. salvo que otra regla lo cambie.html <html> <head> <title>Problema</title> <link rel="StyleSheet" href="estilos. border-style:solid. border-color:#000000.pregunta { background-color:#ffff00.css * { color:#0000aa. border-style:solid.Esto significa que todas las marcas se imprimen de color verde con cero pixel de margin y padding.pregunta { background-color:#ffff00.pregunta { background-color:#ffff00. esto debido a que cada navegador define márgenes distintos. border-style:solid. cuando definimos una clase sin indicar el tipo de marca HTML donde actuará: . margin:0px. padding:0px. } Podemos expresar la regla anterior perfectamente como: *. Esto nos permite comprender. } Esta regla sólo se puede utilizar en las marcas de párrafo. padding:0px. } Página 143 . En realidad. border-width:1px.

color:#ffff00.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.com">Google</a> <a href="http://www.Enlace presionado hover . las que se utilizan fundamentalmente son las que se aplican a la marca <a> (ancla). color:#fffff.yahoo. 26. } a:hover{ background-color:#ff00ff.Enlace sin ingresar visited . color:#ff0000. } Es decir separamos el nombre de la marca HTML con dos puntos.msn. La sintaxis varía con respecto al concepto de clase visto anteriormente: a:pseudoclase { propiedad: valor.Practica: Defina cuatro propiedades para el selector universal y luego implemente una página HTML que pruebe su funcionamiento.com">Yahoo</a> <a href="http://www. color:#ffffff.Enlace que tiene la flecha del mouse encima active . } Apenas ejecute la página los tres enlaces deben aparecer de color rojo con fondo verde: a:link{ background-color:#00ff00.com">Msn</a> </body> </html> La hoja de estilo es: a:link{ background-color:#00ff00. Página 144 . que se refieren a algunos estados especiales del elemento HTML.google. Pseudoclases Las pseudoclases son unas clases especiales. } a:visited{ background-color:#000000. Para la marca HTML <a> tenemos 4 pseudoclases fundamentales: link . } a:active{ background-color:#ff0000.

yahoo.css a:link{ background-color:#00ff00.com">Msn</a> </body> </html> estilos. } a:hover{ background-color:#ff00ff. } 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:#fffff. no visitado. color:#fffff. Página 145 . pagina1. } a:active{ background-color:#ff0000.com">Yahoo</a> <a href="http://www.google. el mouse está sobre el link o el link tiene foco. } Ejemplo: Mostrar una serie de enlaces con distintos colores según si el link está visitado.html <html> <head> <title>Problema</title> <link rel="StyleSheet" href="estilos.css" type="text/css"> </head> <body> <a href="http://www. color:#ff0000. } Si pasamos la flecha del mouse sobre algún enlace veremos que aparece de color blanco con fondo lila: a:hover{ background-color:#ff00ff. } a:visited{ background-color:#000000. color:#ffff00. color:#ffffff. } Por último todos los enlaces que hayamos hecho click deberán aparecer de color blanco con fondo negro: a:visited{ background-color:#000000.color:#ff0000.com">Google</a> <a href="http://www.msn. } Practica: Definir la propiedad font-size con un valor distinto cuando la flecha del mouse está sobre el link. color:#ffffff. color:#ffff00.

html <html> <head> <title>Problema</title> <link rel="StyleSheet" href="estilos. Eliminar el subrayado a un enlace por medio de las pseudoclases Otra actividad común en algunos sitios es eliminar el subrayado a los enlaces. a:visited { text-decoration: none.com">Msn</a> </body> </html> estilos.yahoo. pagina1.css" type="text/css"> </head> <body> <a href="http://www.css" type="text/css"> </head> <body> <a href="http://www. } a:visited { text-decoration: none. configuramos la propiedad text-decoration con el valor none.yahoo.27. } Ejemplo: Eliminar el subrayado de los enlaces. Tener en cuenta que podemos agrupar la regla de esta forma: a:link. } Es decir. Página 146 . La solución de este problema es: <html> <head> <title>Problema</title> <link rel="StyleSheet" href="estilos.msn. } Practica: Configurar los enlaces que aparezcan con una línea tachada en lugar de subrayado.com">Yahoo</a> <a href="http://www.css a:link { text-decoration: none. A esto lo podemos hacer configurando una propiedad de las pseudoclases.google.msn. por defecto está configurada con el valor underline.com">Google</a> <a href="http://www.google.com">Google</a> <a href="http://www.com">Yahoo</a> <a href="http://www.com">Msn</a> </body> </html> La hoja de estilo es: a:link { text-decoration: none. } a:visited { text-decoration: none.

border-bottom: 1px solid #eeeeee.altavista.28.com">Yahoo</a></p> <p><a href="http://www. } #menu a { display: block. Un recurso muy útil es disponer un menú en una página.msn.com">Msn</a></p> <p><a href="http://www.css" type="text/css"> </head> <body> <div id="menu"> <p><a href="http://www. padding: 3px.com">Altavista</a></p> </div> </body> </html> La hoja de estilo asociada a esta página es: #menu { font-family: Arial. width: 160px. Cuando la flecha del mouse se encuentra sobre el hipervínculo cambiamos el color del fondo y la letra del hipervínculo. } #menu a:hover { background-color: #336699. Definimos una regla para este Id: #menu { font-family: Arial. } Podemos decir que definimos un estilo por medio de un Id llamado menu. } #menu a:link. Página 147 . Creación de un menú vertical configurando las pseudoclases. El problema resuelto es: <html> <head> <title>Problema</title> <link rel="StyleSheet" href="estilos.com">Google</a></p> <p><a href="http://www. #menu a:visited { color: #ff0000. Vamos a implementar uno muy sencillo que requiere agrupar en un div una serie de párrafos que contienen un hipervínculo cada uno.yahoo. background-color: #f7f8e8. si no requerimos uno muy elaborado podemos resolverlo utilizando sólo CSS y HTML (en otros casos se requiere además de JavaScript). text-align:center. padding:0px. text-decoration: none. color: #ffffff. } #menu p { margin:0px.google.

text-decoration: none.} La segunda regla: #menu p { margin:0px. } Estamos definiendo el mismo color de texto para los vínculos seleccionados como aquellos que no han sido seleccionados: #menu a:link. color: #ffffff. Otra propiedad nueva es width. } Estamos indicando que todos los párrafos contenidos en el estilo #menu deben tener cero en margin y padding. Ejemplo: Hacer un menú de hipervínculos que se muestren el forma vertical. } El valor block para la propiedad display permite que el ancla ocupe todo el espacio del párrafo.yahoo. text-align:center.com">Msn</a></p> <p><a href="http://www. width: 160px. esta fija el tamaño máximo que puede tener el hipervínculo antes de provocar un salto de línea. pagina1. indistintamente del largo del hipervínculo.css" type="text/css"> </head> <body> <div id="menu"> <p><a href="http://www. Por último inicializamos las pseudoclases: #menu a:link. Por último cambiamos el color de fondo de la opción que tiene la flecha del mouse encima: #menu a:hover { background-color: #336699. } #menu a:hover { background-color: #336699.html <html> <head> <title>Problema</title> <link rel="StyleSheet" href="estilos.msn.google. Luego las anclas definidas dentro del estilo #menu definen las siguientes características: #menu a { display: block. border-bottom: 1px solid #eeeeee. background-color: #f7f8e8. #menu a:visited { color: #ff0000.com">Yahoo</a></p> <p><a href="http://www. #menu a:visited { color: #ff0000.com">Altavista</a></p> </div> </body> Página 148 .com">Google</a></p> <p><a href="http://www.altavista. padding: 3px. padding:0px.

yahoo. width: 160px. } #menu a:link. padding:0px. text-align:center. text-decoration: none. #menu a:visited { color: #ff0000. Página 149 .msn. Otro estilo de menú muy común es donde las opciones se encuentran una al lado de otra.google.</html> estilos. 29.com">Altavista</a></li> </ul> </body> </html> El archivo de estilos es: #menuhorizontal { float:left. Veamos el código para la implementación de un menú horizontal: <html> <head> <title>Problema</title> <link rel="StyleSheet" href="estilos. padding: 3px.css #menu { font-family: Arial.com">Msn</a></li> <li><a href="http://www. } #menu a { display: block. padding:0px. color: #ffffff. Creación de un menú horizontal con una lista.com">Google</a></li> <li><a href="http://www. margin:0px. background-color: #f7f8e8. border-bottom: 1px solid #eeeeee.com">Yahoo</a></li> <li><a href="http://www.css" type="text/css"> </head> <body> <ul id="menuhorizontal"> <li><a href="http://www. width:100%. } #menu p { margin:0px. } Practica: Modificar la hoja de estilo del menú desarrollado anteriormente para que cada opción aparezca una línea de color negro que la recuadre.altavista. } #menu a:hover { background-color: #336699.

} #menuhorizontal a:hover { background-color:#336699. pagina1. red. color:#ff0000. ya que por defecto este tipo de marca indica que luego de mostrar un item de la lista el siguiente es abajo. estamos fijando una separación de 3 pixeles en la parte superior e inferior y 5 pixeles a izquierda y derecha. Fijamos la propiedad width del id menuhorizontal con el valor de 100% para que ocupe toda la línea. border-right:1px solid white. Otra forma de expresar los colores es utilizar una serie de nombres predefinidos (white. } Luego si en la página HTML imprimimos dos párrafos. background-color:#f7f8e8. los mismos deberían aparecer en la misma línea.) de todos modos. width:100px. es indicando los valores de rojo. Fácilmente esta propiedad la podemos entender si inicializamos la marca p (párrafo) con el siguiente valor: p { display:inline. blue. lo más seguro para que entiendan todos los navegadores.css" type="text/css"> </head> Página 150 . padding:3px 5px. Ejemplo: Implementar un menú horizontal con una lista. } #menuhorizontal a { float:left. Separamos cada opción por una línea blanca de un pixel: border-right:1px solid white. } Indicamos que todos los list item (li) se muestren en la misma línea. El ancho de cada opción es de 100px que lo indicamos en la propiedad width de la marca a.html <html> <head> <title>Problema</title> <link rel="StyleSheet" href="estilos.list-style-type:none.verde y azul como hemos venido trabajando. Cuando inicializamos la propiedad padding con: padding:3px 5px. Luego con: #menuhorizontal li { display:inline. tanto para el id menuhorizontal como para la marca a que se encuentra en el id menuhorizontal. text-align:center. } #menuhorizontal li { display:inline. } Como queremos que se localice a la izquierda inicializamos la propiedad float con el valor left. text-decoration:none. green. etc.

} #menuhorizontal a { float:left.altavista. background-color:#f7f8e8.com">Msn</a></li> <li><a href="http://www.google.com">Yahoo</a></li> <li><a href="http://www. text-align:center. width:100px. color:#ff0000.yahoo. padding:3px 5px.msn. width:100%.com">Google</a></li> <li><a href="http://www. margin:0px. Disponemos de dos propiedades fundamentales que nos permiten fijar el ancho y el alto de una marca HTML. border-right:1px solid white. La hoja de estilo definida: #cabecera { Página 151 . } #menuhorizontal a:hover { background-color:#336699. } #menuhorizontal li { display:inline. padding:0px. width height Veamos un ejemplo: <html> <head> <title>Problema</title> <link rel="StyleSheet" href="estilos.css" type="text/css"> </head> <body> <div id="cabecera"> Blog del Programador </div> </body> </html> Solamente hemos definido un div donde mostramos la cabecera de una página.<body> <ul id="menuhorizontal"> <li><a href="http://www. } Practica: Implemente un menú horizontal y un menú vertical a la izquierda.css #menuhorizontal { float:left.com">Altavista</a></li> </ul> </body> </html> estilos. list-style-type:none. Propiedades relacionadas a la dimensión de un objeto en la página. 30. text-decoration:none.

<p class="margenestrecho">bla bla</p>) 31. text-align:center. color:#0000aa.css #cabecera { width:100%. Esto debido a que la forma más sencilla de imaginar un tamaño. padding.width:100%. height:100px. color:#0000aa. background-color:#ffee00. El resto de propiedades son las ya vistas en conceptos anteriores. } Recordar que para aplicar esta clase a un párrafo debemos inicializar la propiedad class de la marca p (ej.parrafoestrecho { width:200px. Es decir que las propiedades width y height nos permiten dar una dimensión a la marca HTML ya sea con valores absolutos indicados en pixeles o relativos indicados por porcentajes. pagina1. text-align:center.) Hasta ahora siempre que hemos especificado tamaños de letra.html <html> <head> <title>Problema</title> <link rel="StyleSheet" href="estilos. } La propiedad width la inicializamos con el valor 100%. lo que significa que ocupará todo el ancho de la página (podemos inicializarlo en pixeles si lo necesitamos). font-size:50px. mm. em etc. background-color:#ffee00.css" type="text/css"> </head> <body> <div id="cabecera"> Blog del Programador </div> </body> </html> estilos. font-family:Times New Roman. height:100px. font-weight:bold. font-size:50px. lo hemos hecho a través de pixeles. font-family:Times New Roman. margin. Unidades de medida (px. Luego a la propiedad height la inicializamos en 100 píxeles. } Practica: Crear una página HTML que muestre dos párrafos. Ejemplo: Definir un div e inicializar las propiedades width y height. por lo menos para los que estamos trabajando todo el día en Página 152 . font-weight:bold. cm. a uno de ellos aplicarle el siguiente estilo: . border etc. text-align:justify.

1 punto es lo mismo que 1/72 pulgadas) pc (picas.in1{ Página 153 .5ex.ex1{ font-size:1ex.em2{ font-size:1. } .5 pc</p> <p class="porcentaje1">Este texto tiene 150%</p> <p class="porcentaje2">Este texto tiene 200%</p> </body> </html> La hoja de estilo correspondiente es: . } .pixel1 { font-size:12px.5 ex</p> <p class="in1">Este texto tiene 1 in</p> <p class="in2">Este texto tiene 1. 1 pc es lo mismo que 12 puntos) % (porcentaje) Un ejemplo que muestra una serie de párrafos asignando la propiedad font-size con distintos valores y unidades de medida: <html> <head> <title>Problema</title> <link rel="StyleSheet" href="estilos.pixel2 { font-size:15px.5 em</p> <p class="ex1">Este texto tiene 1 ex</p> <p class="ex2">Este texto tiene 1.una computadora. es el tamaño de un pixel del monitor. } . Veremos que hay varias unidades de medida para indicar tamaños y que algunas son más 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 (centímetros) mm (milímetros) pt (puntos.em1{ font-size:1em. } .5 in</p> <p class="cm1">Este texto tiene 1 cm</p> <p class="cm2">Este texto tiene 1. } .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.5em.ex2{ font-size: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. } .

html <html> <head> <title>Problema</title> <link rel="StyleSheet" href="estilos. } .mm1{ font-size:10mm. } . } .5 em</p> <p class="ex1">Este texto tiene 1 ex</p> <p class="ex2">Este texto tiene 1.pc2{ font-size:1. } . } Los especialistas sobre el tema recomiendan utilizar em como medida cuando la salida es el monitor. } .5cm.font-size:1in.porcentaje1{ font-size:150%. Ejemplo: Disponer dos párrafos por cada tipo de unidad de medida y asignar valores distintos. Si utilizamos pixeles hay navegadores que no permiten cambiar el tamaño de texto.5 ex</p> <p class="in1">Este texto tiene 1 in</p> <p class="in2">Este texto tiene 1.in2{ font-size:1.cm2{ font-size:1.cm1{ font-size:1cm.5pc.5 in</p> <p class="cm1">Este texto tiene 1 cm</p> <p class="cm2">Este texto tiene 1.pt2{ font-size:15pt. } . } . } . pagina1.pt1{ font-size:10pt. } . } .pc1{ font-size:1pc.porcentaje2{ font-size:200%.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. } .5in.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ágina 154 .mm2{ font-size:15mm.

} Practica: Cree un div y disponga una serie de párrafos.porcentaje2{ font-size:200%.5pc.pt1{ font-size:10pt.mm1{ font-size:10mm.ex1{ font-size:1ex. } . } . } . } .cm1{ font-size:1cm.pixel1 { font-size:12px. } .cm2{ font-size:1.em2{ font-size:1.<p class="pc2">Este texto tiene 1. } . } .pixel2 { font-size:15px. Luego pruebe distintos tamaños de fuente y vea como varía el padding del div. } .in2{ font-size:1.5em. } .porcentaje1{ font-size:150%.in1{ font-size:1in.pc1{ font-size:1pc. Página 155 .pc2{ font-size:1.pt2{ font-size:15pt. } . } .5cm. } .css .mm2{ font-size:15mm.5in.5 pc</p> <p class="porcentaje1">Este texto tiene 150%</p> <p class="porcentaje2">Este texto tiene 200%</p> </body> </html> estilos. } . } . } . } .5ex.ex2{ font-size:1. Defina como padding 2em.em1{ font-size:1em. } .

utilizar distintas formas para inicializar el color de la propiedad background-color.verde y azul en formato decimal (un valor entre 0 y 255).50%).50%.azul) precedido por el caracter #: background-color:#ff0000. pagina1. Hacer que los párrafos estén sin margen entre sí. } Practica: Utilizando la sintaxis simplificada para indicar las proporciones de rojo.0%) Por último en algunas situaciones podemos utilizar una sintaxis reducida para ciertos valores: background-color:#ffaaff.0. son distintos. Comenzar por el valor #000 hasta el #fff. Utilizando la función rgb pasando como parámetro la cantidad de rojo. } . fa.0).0.css" type="text/css"> </head> <body> <p class="fondo1">Primer párrafo</p> <p class="fondo2">Segundo párrafo</p> <p class="fondo3">Tercer párrafo</p> </body> </html> estilos. Lo podemos indicar con esta otra sintaxis: background-color:#faf. Ahora veremos otras sintaxis para indicar el color: background-color:rgb(255. Hasta ahora hemos visto que para asignar el color utilizamos tres valores hexadecimales (rojo.verde y azul. } . Pintar el fondo de 16 párrafos.css .html <html> <head> <title>Problema</title> <link rel="StyleSheet" href="estilos. Es decir si cada valor hexadecimal está formado por el mismo caracter podemos utilizar esta sintaxis simplificada indicando un caracter solamente.fondo1 { background-color:rgb(255. Ejemplo: Disponer tres párrafos pintando su fondo.32.0%. También con la función rgb podemos indicar un porcentaje entre 0% y 100% para cada componente: background-color:rgb(100%.fondo3 { background-color:#fab. Formas para indicar el color. Página 156 . Es decir a este color no lo podemos representar con la sintaxis indicada: background-color:#ffaafa Ya que los últimos 2 caracteres.fondo2 { background-color:rgb(100%.0).verde.

msn.com</a><br> <a href="http://www.33. Definir un cursor para un control HTML.com">yahoo.html Disponer tres hipervínculos y definir el cursor help para la marca tipo <html> <head> <title>Problema</title> <link rel="StyleSheet" href="estilos.com">yahoo.com">google. pagina1. Disponemos de una propiedad llamada cursor que tiene por objetivo definir el cursor a mostrar cuando la flecha del mouse se encuentra sobre el control HTML.google.com</a><br> <a href="http://www.msn.com">msn.yahoo.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.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.css a { Página 157 . Los valores que podemos asignarle a esta propiedad son: crosshair default pointer move e-resize ne-resize nw-resize n-resize se-resize sw-resize s-resize w-resize text wait help auto Veamos un ejemplo para configurar la propiedad cursor para la marca ancla: <html> <head> <title>Problema</title> <link rel="StyleSheet" href="estilos.com">msn.yahoo.com</a><br> <a href="http://www.com">google. } Ejemplo: ancla.com</a><br> <a href="http://www.com</a> </body> </html> estilos.com</a> </body> </html> La hoja de estilo es: a { cursor:help.google.

Recordemos que la propiedad cursor puede adoptar los siguientes valores: crosshair default pointer move e-resize ne-resize nw-resize n-resize se-resize sw-resize s-resize w-resize text wait help auto default 34. Veamos un ejemplo donde implementamos un formulario y le aplicamos una serie de reglas de estilo a las diferentes marcas HTML que intervienen: <html> <head> <title>Problema</title> <link rel="StyleSheet" href="estilos. Luego definir dicho cursor para cada valor de propiedad. background-color:#ffe. } Practica: Disponer los nombres de los valores que puede adoptar la propiedad cursor. Aplicación de hojas de estilo a un formulario.cursor:help. Página 158 . border:1px solid #CCC. Un formulario es el elemento esencial para el envío de datos al servidor por parte del visitante del sitio. margin-top:10px. padding:10px 0 10px 0. margin-left:20px.css" type="text/css"> </head> <body> <div id="contenedorform"> <form method="post" action="#"> <label>Ingrese nombre:</label> <input type="text" name="nombre" size="30"> <br> <label>Ingrese mail:</label> <input type="text" name="mail" size="45"> <br> <label>Comentarios:</label> <textarea name="comentarios" cols="30" rows="5"></textarea> <br> <input class="botonsubmit" type="submit" value="confirmar"> </form> </div> </body> </html> La hoja de estilo que se aplica es: #contenedorform { width:500px.

margin-left:20px.botonsubmit { color:#f00. border:1px solid #CCC. } . font-size:14px. } #contenedorform form label { width:120px.botonsubmit { color:#f00. Página 159 . border: 1px solid #fff.html <html> <head> <title>Problema</title> <link rel="StyleSheet" href="estilos. por lo que los controles del formulario aparecerán a derecha todos encolumnados. Para que los textos aparezcan a la izquierda.} #contenedorform form label { width:120px. definimos una serie de label que las flotamos a izquieda.css #contenedorform { width:500px. margin-top:10px.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. font-family:verdana. float:left. pagina1. font-size:14px. background-color:#bbb. } Podemos observar que definimos un div contenedor y dentro de este el formulario. float:left. Ejemplo: Crear un formulario que solicite el ingreso del nombre. background-color:#bbb. padding:10px 0 10px 0. background-color:#ffe. font-family:verdana. } . mail y comentarios de un visitante.

font-size:15px.border: 1px solid #fff. <html> <head> <title>Problema</title> <link rel="StyleSheet" href="estilos. Definiendo reglas de estilo a una tabla.css" type="text/css"> </head> <body> <table> <caption> cantidad de lluvia caida en mm. . } Página 160 . } table { border-collapse: collapse. Aplicar el estilo 'campo' a los dos controles de tipo text. margin: 0px. padding:10px. } 35. text-align: center. Veamos con un ejemplo como podemos afectar una tabla HTML con CSS. font-weight: bold. } Practica: Crear un formulario que solicite el ingreso del nombre de una persona y su edad.campo { color:#0a0. </caption> <thead> <tr> <th>Provincia</th><th>Enero</th><th>Febrero</th><th>Marzo</th> </tr> </thead> <tbody> <tr> <th>Córdoba</th> <td>210</td><td>170</td><td>120</td> </tr> <tr> <th>Buenos Aires</th> <td>250</td><td>190</td><td>140</td> </tr> <tr> <th>Santa Fe</th> <td>175</td><td>140</td><td>120</td> </tr> </tbody> </table> </body> </html> La hoja de estilo definida a esta tabla es: caption { font-family:arial. background-color:#ff1.

febrero y marzo. </caption> <thead> <tr> <th>Provincia</th><th>Enero</th><th>Febrero</th><th>Marzo</th> </tr> </thead> <tbody> <tr> <th>Córdoba</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> Página 161 . th dentro de la marca thead y por último td.5em. Separate deja las celdas con unos pixeles de separación. font-weight: normal. Ejemplo: Crear una tabla donde se deben mostrar las precipitaciones de 3 tres provincias durante los meses de enero. } tbody th { font-family:arial. border-bottom: 1px solid #fff.5em. pagina1. background-color:#6495ed. padding: .css" type="text/css"> </head> <body> <table> <caption> cantidad de lluvia caida en mm. background-color: #6495ed. La propiedad border-collapse puede tomar dos valores: collapse o separate. color:#ff0. th dentro de la marca tbody. } thead th { background-color: #6495ed. width:100px. padding: 0. background-color:#ed8f63. text-align:center. El resto es la definición de una serie de reglas para las marcas th.html <html> <head> <title>Problema</title> <link rel="StyleSheet" href="estilos.th { border-right: 1px solid #fff.. } td { border: 1px solid #000. color: #fff. no así collapse. } La marca caption dentro de una tabla es el título que debe aparecer arriba.

font-weight: normal. font-weight: bold. color: #fff. border-bottom: 1px solid #fff. font-size:15px. } table { border-collapse: collapse. background-color:#6495ed. } thead th { background-color: #6495ed. } tbody th { font-family:arial. } Practica: Definir una tabla de varias filas y columnas. } th { border-right: 1px solid #fff. Con el valor por defecto static.. Posicionamiento relativo. padding: 0.css caption { font-family:arial. color:#ff0.5em.<tr> <th>Santa Fe</th> <td>175</td><td>140</td><td>120</td> </tr> </tbody> </table> </body> </html> estilos. Aplicar estilos a las marcas th y td. El segundo valor posible para esta propiedad es relative. text-align: center. En caso de fijar la propiedad position con el valor relative. padding:10px. podemos modificar la posición por defecto del elemento HTML modificando los valores left y top (con valores positivos o inclusive negativos) Página 162 . background-color: #6495ed. Por defecto esta propiedad se inicializa con el valor static. cada elemento HTML se localiza de izquierda a derecha y de arriba hacia abajo. La propiedad position determina el punto de referencia donde se debe localizar cada elemento HTML. 36. margin: 0px.

#caja3 { background-color:#f99. left:15px. Ejemplo: Definir 3 elementos de tipo div. luego mediante la propiedad position desplazar el segundo div 15 píxeles a la derecha y 5 hacia abajo.#caja2 y #caja3 que tienen los mismos valores para las propiedades background-color. top:5px.</p> </div> <div id="caja2"> <p>Esta es la segunda caja.3em. font-size:1. } Luego como debemos inicializar la propiedad position sólo para el Id #caja3 lo hacemos en forma separada: #caja2 { position:relative.Veamos un ejemplo con tres div.</p> <p>No se desplaza.css" type="text/css"> </head> <body> <div id="caja1"> <p>Esta es la primer caja.</p> </div> </body> </html> La hoja de estilo asociada es: #caja1. top:5px.</p> <p>Se desplaza 15 píxeles a la derecha y 5 hacia abajo de su posición por defecto. } Repasemos un poquito.#caja2. 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. font-family:verdana.</p> <p>No se desplaza. esto sucede para los tres Id #caja1. font-family y font-size: #caja1. font-family:verdana.</p> </div> <div id="caja3"> <p>Esta es la tercer caja. font-size:1. Página 163 . } #caja2 { position:relative.3em.#caja2. recordemos que cuando un conjunto de elementos tienen los mismos valores para una serie de propiedades los podemos agrupar separándolos por coma. left:15px. } Acá es donde inicializamos la propiedad position con el valor relative y desplazamos el elemento 15 píxeles a la derecha y 5 píxeles 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.#caja3 { background-color:#f99.

css" type="text/css"> </head> <body> <div id="caja1"> <p>Esta es la primer caja. El valor que debemos asignar a la propiedad position es absolute. font-size:1. El posicionamiento absoluto dispone un elemento HTML completamente fuera del flujo de la página.html <html> <head> <title>Problema</title> <link rel="StyleSheet" href="estilos. 37. top:5px. left:15px.</p> </div> <div id="caja3"> <p>Esta es la tercer caja.</p> <p>No se desplaza. Veamos un ejemplo para ver el funcionamiento del posicionamiento absoluto: <html> <head> <title>Problema</title> <link rel="StyleSheet" href="estilos.css" type="text/css"> </head> <body> <div id="caja1"> <p>Esta es la primer caja. } Practica: Disponer dos párrafos.</p> <p>No se desplaza. Posicionamiento absoluto. Hay que tener en cuenta que no se reserva espacio en el flujo del documento como pasaba con el posicionamiento relativo (recordemos que con este posicionamiento podemos desplazar el elemento a cuarquier parte de la página.pagina1.3em. desplazar el segundo párrafo hasta que quede casi superpuesto al primer párrafo.</p> <p>No se desplaza.</p> <p>Se desplaza 15 píxeles a la derecha y 5 hacia abajo de su posición por defecto. pero el espacio por defecto para dicho elemento queda vacío). El posicionamiento es siempre con respecto a la página.</p> </div> </body> </html> estilos.</p> </div> <div id="caja2"> Página 164 .css #caja1. font-family:verdana. } #caja2 { position:relative.</p> </div> <div id="caja2"> <p>Esta es la segunda caja.#caja3 { background-color:#f99.#caja2.

</p> </div> <div id="caja2"> <p>Esta es la segunda caja. font-family:verdana. } 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 píxeles).</p> <p>Se desplaza a la coordenada de pantalla 40 en columna y 30 en fila (en píxeles). } #caja2 { background-color:#ff0.</p> <p>No se desplaza. } #caja2 { background-color:#ff0. top:30px.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. font-size:1. left:40px.</p> </div> <div id="caja3"> <p>Esta es la tercer caja. position:absolute.3em. font-size:1. font-family:verdana.</p> </div> <div id="caja3"> <p>Esta es la tercer caja.3em. pagina1.3em.</p> <p>Se desplaza a la coordenada de pantalla 40 en columna y 30 en fila (en píxeles).</p> <p>No se desplaza.</p> <p>No se desplaza.</p> </div> </body> </html> La hoja de estilo definida: #caja1.<p>Esta es la segunda caja.#caja3 { background-color:#f99.#caja3 { background-color:#f99. font-size:1. Ejemplo: Disponer tres cajas de texto mediante div.</p> </div> </body> </html> estilos. font-size:1. position:absolute.css #caja1.3em. Página 165 .30 (píxel 40 en columna y 30 en fila) en forma absoluta. Luego posicionar la segundo caja en la coordenada de la página 40.

background-color:#ffff55. top:0px. 38. padding:0px. ya que es ampliamente soportado por navegadores antiguos). width:200px. es decir afecta a todas las marcas HTML. Empezaremos a ver como componer una página sin utilizar las tablas (un medio muy utilizado hasta hace muy poco. } #columna1 { position:absolute. top:30px. top:0px. left:0px. } Practica: Disponer dos div con coordenadas absolutas. padding:0px. Disposición de 2 columnas. Una solución para crear una página con dos columnas es utilizar el posicionamiento absoluto: <html> <head> <title>Problema</title> <link rel="StyleSheet" href="estilos. } La primera regla de disponer el selector universal. margin-top:10px. Página 166 . width:200px. } Ahora la regla definida para la primer columna es: #columna1 { position:absolute. } #columna2 { margin-left:220px. margin-top:10px. background-color:#ffff55. margin-right:20px. background-color:#ffffbb. left:0px. uno que represente la cabecera de la página (50 píxeles de alto) y otro la primer columna de la izquierda. </div> </body> </html> La hoja de estilo para esta página es: * { margin:0px. margin-top:10px.css" type="text/css"> </head> <body> <div id="columna1"> Aca va el contenido de la columna 1. es sacar el margen y padding (generalmente dispondremos esta regla): * { margin:0px.left:40px.

Aca va el contenido de la columna 1.Aca va el contenido de la columna 1. inicializamos la propiedad position con el valor absolute.Aca va el contenido de la columna 1.Aca va el contenido de la columna 1.Aca va el contenido de la columna 1.Aca va el contenido de la columna 1. empieza en la coordenada 0.Aca va el contenido de la columna 1.Aca va el contenido de la columna 1.Aca va el contenido de la columna 1. El resto de propiedades que inicializamos son el margin-top. en esta caso lo posicionamos en la columna 0 y fila 0 y además inicializamos la propiedad width.Aca va el contenido de la columna 1.Aca va el contenido de la columna 1.Aca va el contenido de la columna 1. margin-top:10px.css" type="text/css"> </head> <body> <div id="columna1"> Aca va el contenido de la columna 1.Aca va el contenido de la columna 1.Aca va el contenido de la columna 1. con lo que debemos indicar la posición del div en la página por medio de las propiedades top y left.Aca va el contenido de la columna 1.Aca va el contenido de la columna 1.Aca va el contenido de la columna 1. margin-right:20px.html <html> <head> <title>Problema</title> <link rel="StyleSheet" href="estilos.Aca va el contenido de la columna 1.Aca va el contenido de la columna 1.Aca va el contenido de la columna 1.Aca va el contenido de la columna 1. </div> Página 167 .Aca va el contenido de la columna 1.Aca va el contenido de la columna 1.Aca va el contenido de la columna 1.Aca va el contenido de la columna 1.Aca va el contenido de la columna 1. para que sea igual que la primera columna y el margin-right.Aca va el contenido de la columna 1.Aca va el contenido de la columna 1.} Es decir. background-color:#ffffbb.Aca va el contenido de la columna 1.Aca va el contenido de la columna 1.Aca va el contenido de la columna 1.Aca va el contenido de la columna 1. por lo que el div ocupa la posición que le corresponde por defecto.Aca va el contenido de la columna 1. } Esta regla no inicializa la propiedad position. Ahora veamos cómo inicializamos la segunda columna: #columna2 { margin-left:220px.Aca va el contenido de la columna 1. pagina1. con lo cual le estamos indicando que esta columna tendrá siempre 200 píxeles de ancho.Aca va el contenido de la columna 1.Aca va el contenido de la columna 1.Aca va el contenido de la columna 1. El truco está en inicializar la propiedad margin-left con un valor mayor a 200.Aca va el contenido de la columna 1.0 de la página.Aca va el contenido de la columna 1. Ejemplo: Crear una página con dos columnas.Aca va el contenido de la columna 1.Aca va el contenido de la columna 1.Aca va el contenido de la columna 1. para que no quede el texto pegado a la derecha. es decir. que es el ancho de la columna1.Aca va el contenido de la columna 1.Aca va el contenido de la columna 1.Aca va el contenido de la columna 1.Aca va el contenido de la columna 1. recordemos que todos los elementos tienen margin y padding cero.Aca va el contenido de la columna 1. Además inicializamos la propiedad margin-top con 10 píxeles.Aca va el contenido de la columna 1.Aca va el contenido de la columna 1.Aca va el contenido de la columna 1.

Aca va el contenido de la columna 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. left:0px. background-color:#ffffbb.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. width:200px.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. margin-top:10px.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. top:0px.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.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 id="columna2"> Aca va el contenido de la columna 2. } #columna2 { margin-left:220px.Aca va el contenido de la columna 2.Aca va el contenido de la columna 2. background-color:#ffff55.Aca va el contenido de la columna 2.Aca va el contenido de la columna 2. padding:0px.Aca va el contenido de la columna 2.Aca va el contenido de la columna 2.css * { margin:0px. } #columna1 { position:absolute.Aca va el contenido de la columna 2.Aca va el contenido de la columna 2. margin-top:10px.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. Página 168 . margin-right:20px.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. } Practica: Crear una página con dos columnas y disponer en la primera columna un menú de opciones (como el visto en conceptos anteriores).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.

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.png"> <p>El texto envuelve a la imagen.css" type="text/css"> <link </head> <body> <img src=".El texto envuelve a la imagen. } Es importante hacer notar que si no la flotamos a la imagen solo habrá una línea de texto a la derecha de la imagen. Propiedad float aplicada a una imagen.El texto envuelve a la imagen.El texto envuelve a la imagen..El texto envuelve a la imagen. Veamos un ejemplo: <html> <head> <title>Problema</title> <link rel="StyleSheet" href="estilos.El texto envuelve a la imagen.El texto envuelve a la imagen.css" type="text/css"> <link </head> <body> <img src=".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./imagen1. La propiedad float saca del flujo un elemento HTML.El texto envuelve a la imagen./imagen1.El texto envuelve a la imagen.El texto envuelve a la imagen.El texto envuelve a la imagen.El texto envuelve a la imagen.html <html> <head> <title>Problema</title> <link rel="StyleSheet" href="estilos.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 Página 169 .El texto envuelve a la imagen. Pruebe luego de modificar la propiedad float con los otros dos valores posibles (left.El texto envuelve a la imagen. Ejemplo: Disponer una imagen y flot rla a la derecha.El texto envuelve a la imagen. podemos hacer que el texto envuelva a la imagen. Esta propiedad admite tres valores: left right none Cuando aplicamos esta propiedad a la marca img. El texto envuelve a la imagen.El texto envuelve a la imagen.png"> <p>El texto envuelve a la imagen.El texto envuelve a la imagen.El texto envuelve a la imagen.39.none). </p> </body> </html> La hoja de estilo: img { float:right.El texto envuelve a la imagen. pagina1.

css img { float:right. Al primero lo flotamos hacia la izquierda con un width fijo y el segundo se acomoda inmediatamente a la derecha. Disposición de 2 columnas (propiedad float) Una segunda forma de implementar una página con dos columnas es utilizar la propiedad float.El texto envuelve a la imagen. background-color:#ff5.El texto envuelve a la imagen. 40.css" type="text/css"> </head> <body> <div id="columna1"> Aquí el contenido de la columna 1. Página 170 . Luego para evitar que la columna dos envuelva a la columna uno en caso de ser más larga inicializamos margin-left con 210 pixeles. </div> </body> </html> La hoja de estilo: * { margin:0. } Inicializar la siguiente regla: span { float:left. font-size:300%. Veamos un ejemplo: <html> <head> <title>Problema</title> <link rel="StyleSheet" href="estilos. } #columna1 { float:left.El texto envuelve a la imagen.</p> </body> </html> estilos. } Practica: Confeccionar una página en la que la primera letra de cada oración aparezca con el triple de tamaño y además el texto envuelva a la letra. } La columna1 tiene un ancho de 200 pixeles. border:1px solid #555. width:200px.El texto envuelve a la imagen.El texto envuelve a la imagen.El texto envuelve a la imagen. border:1px solid #555.El texto envuelve a la imagen. </div> <div id="columna2"> Aquí el contenido de la columna 2. Disponemos dos div. } #columna2 { margin-left:210px.envuelve a la imagen. background-color:#ffb. padding:0.

html <html> <head> <title>Problema</title> <link rel="StyleSheet" href="estilos.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 1.Aquí el contenido de la columna 2.Aquí el contenido de la columna 2.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 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 1.Aquí el contenido Página 171 .Aquí el contenido de la columna 2.Aquí el contenido de la columna 1.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 1.Aquí el contenido de la columna 1.Aquí el contenido de la columna 2.Aquí el contenido de la columna 1.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 1.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 1.Aquí el contenido de la columna 2.Aquí el contenido de la columna 2.Aquí el contenido de la columna 1.Aquí el contenido de la columna 1.Aquí el contenido de la columna 2.Aquí el contenido de la columna 2.Aquí el contenido de la columna 1.Aquí el contenido de la columna 1.Aquí el contenido de la columna 2.Aquí el contenido de la columna 1.Aquí el contenido de la columna 2.Aquí el contenido de la columna 1.Aquí el contenido de la columna 1.Aquí el contenido de la columna 2.Aquí el contenido de la columna 1.Aquí el contenido de la columna 2.Aquí el contenido de la columna 1.Aquí el contenido de la columna 2.Aquí el contenido de la columna 2.Aquí el contenido de la columna 1.Aquí el contenido de la columna 2. La primera flotarla a la izquierda con 200 píxeles de ancho.Aquí el contenido de la columna 2.Aquí el contenido de la columna 2.Aquí el contenido de la columna 1.Aquí el contenido de la columna 1.Aquí el contenido de la columna 2.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 1.css" type="text/css"> </head> <body> <div id="columna1"> Aquí el contenido de la columna 1.Aquí el contenido de la columna 2. pagina1.Aquí el contenido de la columna 2.Aquí el contenido de la columna 1.Aquí el contenido de la columna 2.Aquí el contenido de la columna 2.Aquí el contenido de la columna 1.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 1.Aquí el contenido de la columna 2.Aquí el contenido de la columna 1.Aquí el contenido de la columna 2.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 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.Ejemplo: Crear una página con dos columnas.Aquí el contenido de la columna 2.Aquí el contenido de la columna 2.Aquí el contenido de la columna 1.Aquí el contenido de la columna 2.

Aquí el contenido de la columna 2.Aquí el contenido de la columna contenido de la columna 2.Aquí el de la columna 2.Aquí el contenido de la columna contenido de la columna 2.Aquí el contenido de la 2.Aquí el contenido columna 2.Aquí el contenido de la columna contenido de la columna 2.Aquí el contenido de la columna contenido de la columna 2.Aquí el contenido columna 2.Aquí el de la columna 2.Aquí el contenido de la 2.Aquí el contenido de la columna 2.Aquí el contenido de la 2.Aquí el contenido de la columna contenido de la columna 2.Aquí el contenido columna 2.Aquí el contenido de la columna 2.Aquí el contenido columna 2.Aquí el contenido columna 2.Aquí el contenido de la columna contenido de la columna 2.Aquí el contenido de la 2.Aquí el contenido de la columna 2.Aquí el contenido de la columna contenido de la columna 2.Aquí el de la 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 contenido de la columna 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 de la columna 2.Aquí el contenido de la columna contenido de la columna 2.Aquí el contenido de la 2.Aquí el contenido de la columna contenido de la columna 2.de la columna 2.Aquí el contenido columna 2.Aquí el contenido columna 2.Aquí el contenido columna 2.Aquí el contenido de la 2.Aquí el contenido columna 2.Aquí el de la columna 2.Aquí el contenido de la columna 2.Aquí el de la columna 2.Aquí el contenido columna 2.Aquí el contenido de la columna contenido de la columna 2.Aquí el contenido de la columna 2.Aquí el contenido de la columna contenido de la columna 2.Aquí el contenido de la columna contenido de la columna 2.Aquí el contenido columna 2.Aquí el contenido columna 2.Aquí el contenido de la 2.Aquí el de la columna 2.Aquí el de la columna 2.Aquí el contenido columna 2.Aquí el contenido de la columna 2.Aquí el contenido de la 2.Aquí el contenido de la 2.Aquí el de la columna 2.Aquí el contenido de la 2.Aquí el contenido de la columna contenido de la columna 2.Aquí el contenido de la columna contenido de la columna 2.Aquí el contenido de la 2.Aquí el contenido de la 2.Aquí el contenido de la 2.Aquí el contenido columna 2.Aquí el contenido columna 2.Aquí el de la columna 2.Aquí el contenido columna 2.Aquí el contenido de la Página 172 .Aquí el de la columna 2.Aquí el contenido de la columna contenido de la columna 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 columna 2.Aquí el contenido de la columna 2.Aquí el contenido de la 2.Aquí el contenido de la columna contenido de la columna 2.Aquí el contenido de la columna contenido de la columna 2.Aquí el contenido de la 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 contenido de la columna 2.Aquí el contenido columna 2.Aquí el contenido columna 2.Aquí el contenido de la columna contenido de la columna 2.Aquí el contenido de la columna 2.Aquí el contenido de la columna 2.Aquí el contenido de la 2.Aquí el contenido de la 2.Aquí el de la columna 2.Aquí el de la columna 2.Aquí el contenido de la 2.Aquí el contenido de la 2.Aquí el de la columna 2.Aquí el de la columna 2.Aquí el contenido de la 2.Aquí el de la columna 2.Aquí el de la columna 2.Aquí el contenido columna 2.Aquí el contenido 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 2.Aquí el contenido de la 2.Aquí el contenido columna 2.Aquí el contenido de la 2.Aquí el de la columna 2.Aquí el contenido columna 2.Aquí el contenido de la 2.Aquí el contenido columna 2.Aquí el de la columna 2.Aquí el de la columna 2.Aquí el contenido de la columna contenido de la columna 2.Aquí el de la columna 2.Aquí el contenido de la 2.Aquí el contenido de la columna contenido de la columna 2.Aquí el contenido de la columna contenido de la columna 2.Aquí el contenido de la columna 2.Aquí el contenido columna 2.Aquí el de la columna 2.Aquí el contenido de la columna contenido de la columna 2.Aquí el contenido de la 2.Aquí el contenido de la 2.Aquí el de la columna 2.Aquí el de la columna 2.Aquí el contenido de la columna contenido de la columna 2.Aquí el contenido de la 2.Aquí el contenido de la columna contenido de la columna 2.Aquí el contenido de la 2.Aquí el contenido columna 2.Aquí el contenido columna 2.Aquí el contenido de la columna 2.Aquí el contenido de la columna contenido de la columna 2.Aquí el contenido columna 2.Aquí el de la columna 2.Aquí el contenido columna 2.Aquí el de la columna 2.Aquí el contenido de la columna 2.Aquí el contenido de la columna 2.Aquí el de la columna 2.Aquí el contenido columna 2.Aquí el contenido de la columna contenido de la columna 2.Aquí el de la columna 2.

Aquí el contenido de la 2. Página 173 .Aquí el de la columna 2.Aquí el contenido de la columna 2.Aquí el contenido de la 2.Aquí el contenido de la columna contenido de la columna 2.Aquí el contenido de la columna 2.Aquí el contenido columna 2.Aquí el contenido columna 2.Aquí el de la columna 2.Aquí el contenido columna 2.Aquí el contenido columna 2.Aquí el estilos.Aquí el de la columna 2.Aquí el contenido columna 2.columna 2.Aquí el contenido de la columna contenido de la columna 2.Aquí el contenido de la columna contenido de la columna 2.Aquí el contenido de la 2.Aquí el contenido de la columna contenido de la columna 2.Aquí el contenido de la columna contenido de la columna 2.Aquí el de la columna 2.Aquí el contenido de la columna contenido de la columna 2.Aquí el contenido de la 2.Aquí el contenido de la 2.Aquí el contenido de la 2. background-color:#ff5.Aquí el contenido columna 2.Aquí el contenido de la 2.Aquí el contenido de la columna contenido de la columna 2.Aquí el contenido columna 2.Aquí el de la columna 2.Aquí el contenido de la columna 2.Aquí el de la columna 2.Aquí el contenido columna 2.Aquí el contenido de la columna contenido de la columna 2.Aquí el contenido de la columna 2. padding:0.Aquí el contenido columna 2.Aquí el contenido columna 2.Aquí el de la columna 2.Aquí el contenido de la columna 2. </div> </body> </html> columna 2.Aquí el contenido de la 2.Aquí el contenido de la 2.Aquí el contenido columna 2.Aquí el de la columna 2.Aquí el contenido columna 2.Aquí el contenido de la columna contenido de la columna 2.Aquí el de la columna 2.Aquí el de la columna 2.Aquí el contenido de la 2.Aquí el contenido columna 2.Aquí el de la columna 2.Aquí el contenido de la columna 2.Aquí el contenido de la 2.Aquí el contenido columna 2.Aquí el contenido columna 2.Aquí el contenido de la 2.Aquí el contenido de la 2.Aquí el de la columna 2.Aquí el contenido de la columna 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 columna contenido de la columna 2.Aquí el de la columna 2.Aquí el contenido columna 2. } #columna1 { float:left. border:1px solid #555.Aquí el contenido de la columna contenido de la columna 2.Aquí el contenido de la columna 2.Aquí el de la columna 2.Aquí el contenido de la 2.Aquí el contenido de la columna contenido de la columna 2.Aquí el contenido de la columna 2.Aquí el contenido de la 2.Aquí el contenido de la columna contenido de la columna 2.Aquí el contenido de la 2.Aquí el contenido de la 2.Aquí el de la columna 2.Aquí el contenido columna 2.css * { margin:0.Aquí el contenido de la 2. width:200px.Aquí el contenido de la 2.Aquí el contenido de la 2.Aquí el de la columna 2.Aquí el contenido de la columna columna 2.Aquí el contenido de la columna contenido de la columna 2.Aquí el contenido de la columna contenido de la columna 2.Aquí el contenido columna 2.Aquí el de la columna 2.Aquí el contenido de la 2.Aquí el contenido de la columna 2.Aquí el contenido de la 2.Aquí el contenido de la columna 2.Aquí el contenido columna 2.Aquí el contenido de la columna 2.Aquí el contenido columna 2.Aquí el contenido de la columna contenido de la columna 2.Aquí el de la columna 2.Aquí el contenido de la 2.Aquí el contenido de la columna contenido de la columna 2.Aquí el contenido de la columna contenido de la columna 2.Aquí el contenido de la columna contenido de la columna 2.Aquí el contenido de la columna contenido de la columna 2.Aquí el de la columna 2.Aquí el contenido de la 2.Aquí el de la columna 2.Aquí el contenido de la columna contenido de la columna 2.Aquí el contenido de la columna contenido de la columna 2.Aquí el contenido columna 2.Aquí el contenido columna 2.Aquí el contenido de la 2.Aquí el contenido de la 2.Aquí el contenido de la columna contenido de la columna 2.Aquí el contenido columna 2.Aquí el de la columna 2.Aquí el de la columna 2.Aquí el contenido de la columna contenido de la columna 2.Aquí el de la columna 2.

} #columna1 { float:left. columna1. line-height:130%. border:1px solid #555. Disposición de 2 columnas. background-color:#becdfe. border:1px solid #000. seguida de dos columnas y un pie de página. } #contenedor { width:100%. } Practica: resuelto. margin:0px. Disponga un menú horizontal en la segunda columna del problema 41. } #cabecera { padding:10px.css" type="text/css"> </head> <body> <div id="contenedor"> <div id="cabecera"> <h1>Aca el título de la página</h1> </div> <div id="columna1"> <p>columna1. clear:left.</p> </div> <div id="columna2"> <h2>Título de la columna</h2> <p>Contenido de la columna2. padding:0px. Una estructura muy común en la web es la disposición de una cabecera de página. columna1. </p> </div> <div id="pie"> Pié de página. background-color:#ffb.} #columna2 { margin-left:210px. La implementación de esta estructura de página es la siguiente: <html> <head> <title>Problema</title> <link rel="StyleSheet" href="estilos. color:#fff. Página 174 . </div> </div> </body> </html> La hoja de estilo definida para esta página es la siguiente: * { margin:0px. cabecera y pie. background-color:#f2f2f2.

columna1. Contenido columna2. columna1. margin:0. Contenido de la columna2. Contenido de la columna2. Contenido columna2. Contenido columna2. columna1.width:200px.</p> </div> <div id="columna2"> <h2>Título de la columna</h2> <p>Contenido de la columna2. Contenido columna2. border-left:1px solid #aaa. Contenido de la columna2. La propiedad clear hace que un elemento no tenga elementos flotantes a su lado. } #pie { padding:10px. columna1. Contenido de la columna2. columna1. } Hay algunas propiedades claves que debemos analizar en la regla #contenedor: width:100%. background-color:#becdfe. Contenido de la columna2. columna1. Contenido columna2. Contenido de la columna2. Eso es lo que queremos para la cabecera y el pie. columna1. columna1. Contenido de la columna2. Contenido de la columna2. Contenido de la columna2.css" type="text/css"> </head> <body> <div id="contenedor"> <div id="cabecera"> <h1>Aca el título de la página</h1> </div> <div id="columna1"> <p>columna1. columna1. Contenido columna2. padding:1em. columna1. Contenido columna2. Contenido de la columna2. Contenido columna2. Con esto estamos indicando que siempre ocupe todo el espacio en ancho del navegador. Contenido columna2. columna1.html <html> <head> <title>Problema</title> <link rel="StyleSheet" href="estilos. 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 Página 175 . Contenido de la columna2. Contenido de la columna2. Luego. } #columna2 { margin-left:210px. columna1. clear:left. columna1. columna1. luego 2 columnas y finalmente un pie de página. columna1. Contenido columna2. Contenido de la columna2. Contenido de la columna2. tanto para la cabecera como para el pie. color:#fff. columna1. Contenido de la columna2. Contenido de la columna2. columna1. Contenido columna2. Contenido de la columna2. Contenido de la columna2. Contenido de la columna2. Ejemplo: Crear una página que tenga una cabecera. Contenido de la columna2. pagina1. padding:1em. Contenido de la columna2. tenemos: clear:left. columna1. indistintamente de la resolución de pantalla o el tamaño de ventana del navegador. columna1. Contenido de la columna2. Contenido columna2. Contenido de la columna2. columna1. columna1. Contenido de la columna2.

Contenido de la columna2. color:#fff. padding:1em. Contenido de la columna2. Cuál es el resultado? 42. border-left:1px solid #aaa. Luego asigne a la propiedad width. line-height:130%. </div> </div> </body> </html> estilos.css * { margin:0px. cabecera y pie de página.</p> </div> <div id="pie"> Pié de página. border:1px solid #000. } #contenedor { width:100%. } Practica: Codifique el problema visto anteriormente para mostrar dos columnas. margin:0. margin:0px. } #pie { padding:10px. background-color:#f2f2f2. clear:left. Contenido de la columna2. cabecera y pie. background-color:#becdfe. Una modificación al concepto anterior nos permite agregar una tercera columna flotando a derecha. lo único que hay que tener cuidado es que dentro del HTML Página 176 . Disposición de 3 columnas. } #cabecera { padding:10px.columna2. } #columna2 { margin-left:210px. el valor: width:780px. } #columna1 { float:left. de la regla contenedor. width:200px. padding:0px. color:#fff. clear:left. background-color:#becdfe. Contenido de la columna2. padding:1em. Contenido de la columna2.

</p> </div> <div id="columna2"> <h2>Título de la columna</h2> <p>Contenido de la columna2. padding:0px. } #contenedor { width:100%. ya que son los que se flotan. line-height:130%. background-color:#becdfe.css" type="text/css"> </head> <body> <div id="contenedor"> <div id="cabecera"> <h1>Aca el título de la página</h1> </div> <div id="columna1"> <p>columna1. que es la central: <html> <head> <title>Problema</title> <link rel="StyleSheet" href="estilos. clear:left.</p> </div> <div id="pie"> Pié de página. margin:0px. la columna 2. </div> </div> </body> </html> La hoja de estilo es: * { margin:0px.debemos disponer los div de la columna 1 y 3 en primer lugar. color:#fff. width:200px. margin-right:230px. } Página 177 . border-right:1px solid #aaa. padding:1em. border-left:1px solid #aaa. } #columna1 { float:left. y por último. padding:1em. background-color:#f2f2f2. } #columna2 { margin-left:210px. border:1px solid #000. </p> </div> <div id="columna3"> <p>columna3. } #cabecera { padding:10px. margin:0.

columna1. Contenido de la columna2. Contenido de la columna2. columna1. Contenido de la columna2. Contenido de la columna2. columna3. columna3. columna1. columna3. Contenido de la columna2. columna3. Contenido de la columna2. Contenido de la columna2.css" type="text/css"> </head> <body> <div id="contenedor"> <div id="cabecera"> <h1>Aca el título de la página</h1> </div> <div id="columna1"> <p>columna1.css * { margin:0px.#columna3 { float:right. Contenido de la columna2. columna1. columna1. Contenido de la columna2. columna1. Contenido de la columna2. columna3. columna1. Contenido de la columna2. columna1. columna3. Contenido de la columna2. columna3. Contenido de la columna2. Contenido de la columna2. columna3. columna3. Contenido de la columna2. Contenido de la columna2. Contenido de la columna2. columna3. columna1. columna3. columna3. Contenido de la columna2. Contenido de la columna2.html <html> <head> <title>Problema</title> <link rel="StyleSheet" href="estilos. columna1. width:200px. padding:0px. Página 178 . Contenido de la columna2. columna1. Contenido de la columna2. Contenido de la columna2. Contenido de la columna2. columna1. </div> </div> </body> </html> estilos. columna3. columna1. columna1.</p> </div> <div id="columna3"> <p>columna3. columna3. Contenido de la columna2. margin:0. columna1. Contenido de la columna2. pagina1. Contenido de la columna2. columna3. columna3. Contenido de la columna2. Contenido de la columna2. clear:left. columna1.</p> </div> <div id="pie"> Pié de página. columna3. color:#fff. Contenido de la columna2. Contenido de la columna2. columna1. columna3. Contenido de la columna2. columna1. columna3. } #pie { padding:10px. Contenido de la columna2. } Ejemplo: Crear una página con tres columnas. columna1. padding:1em. columna3. columna1. Contenido de la columna2. columna1. </p> </div> <div id="columna2"> <h2>Título de la columna</h2> <p>Contenido de la columna2. background-color:#becdfe. Contenido de la columna2. Contenido de la columna2. columna3. Contenido de la columna2. Contenido de la columna2. cabecera y pie de página.

line-height:130%. border-right:1px solid #aaa. margin:0. } Practica: Codifique nuevamente la sintaxis para disponer tres columnas. cabecera y pie de página. color:#fff.} #contenedor { width:100%. } #columna2 { margin-left:210px. padding:1em. border:1px solid #000. margin-right:230px. } #cabecera { padding:10px. margin:0px. clear:left. background-color:#f2f2f2. } #columna3 { float:right. } #pie { padding:10px. background-color:#becdfe. Luego defina la propiedad width del contenedor con 780px. background-color:#becdfe. clear:left. color:#fff. border-left:1px solid #aaa. padding:1em. Disponga un menú en la columna uno y otro en la columna tres. } #columna1 { float:left. width:200px. margin:0. Página 179 . padding:1em. width:200px.

Programa y Lenguaje de Programación. Algoritmo: Son los pasos a seguir para resolver un problema. es por el momento la más extendida. Programa: Conjunto de instrucciones que entiende un ordenador para realizar una actividad. mostrar datos por pantalla. como pueden ser los lenguajes de macros que tienen muchos procesadores de texto y planillas de cálculo. La actividad fundamental del programador es resolver problemas empleando el ordenador como herramienta fundamental. Es un lenguaje script u orientado a documento. etc. modificar e imprimir textos. Un lenguaje interpretado significa que a las instrucciones las analiza y procesa el navegador en el momento que deben ser ejecutadas. Conceptos de Algoritmo. Todo programa tiene un objetivo bien definido: un procesador de texto es un programa que permite cargar. Nuestro primer programa será el famoso "Hola Mundo". sacar listados por impresora. </script> </body> </html> Página 180 . un programa de ajedrez permite jugar al ajedrez contra el ordenador u otro contrincante humano. <html> <head> </head> <body> <script language="javascript"> document. es decir un programa que muestre en el documento HTML el mensaje "Hola Mundo". No se puede desarrollar un programa con JavaScript que se ejecute fuera de un Navegador.JavaScript JavaScript 1.write('Hola Mundo'). Qué es JavaScript? JavaScript. etc. Nosotros aprenderemos a programar utilizando el lenguaje de programación JavaScript. C++. JavaScript no es un lenguaje de programación propiamente dicho como C. Para la resolución de un problema hay que plantear un algoritmo. es una de las múltiples maneras que han surgido para extender las capacidades del lenguaje HTML (lenguaje para el diseño de páginas de Internet). Visual Basic Script. 2. Lenguaje de programación: Conjunto de instrucciones que son interpretadas por una computadora para realizar operaciones. Delphi. entrar datos por teclado. al igual que Flash. JavaScript es un lenguaje interpretado que se embebe en una página web HTML. Para desarrollar este curso no requerimos ningún conocimiento de otro lenguaje. Al ser la más sencilla.

Variables. Página 181 . La información a imprimirse debe ir entre comillas y encerrada entre paréntesis. etc. Cada vez que escribimos una instrucción finalizamos con el caracter punto y coma.write('<br>') 3. 2.) Valores lógicos (true.24. Consta de un nombre y pertenece a un tipo (númerico.) Cadenas de caracteres ("Juan". si pedimos al navegador que ejecute esta página mostrará el texto 'Hola Mundo'.).90. NO ES LO MISMO ESCRIBIR: document. cadena de caracteres. la segunda forma provoca un error de sintaxis). Tipos de variable: Una variable puede almacenar: Valores Enteros (100. "Listado".html <html> <head> </head> <body> <script language="javascript"> document. Una variable es un depósito donde hay un valor. Tener en cuenta que si queremos que cada dato quede en una fila distinta de la página debemos insertar la marca <br> (salto de linea en HTML). etc.) Valores Reales (1. Emplear el comando write del objeto document para imprimir.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 página debemos llamar al comando 'write' del objeto document. </script> </body> </html> Practica: Realizar un programa que muestre su nombre y su edad en una página HTML.false) Existen otros tipos de variables que veremos más adelante. 260.write que DOCUMENT. "Compras". Ejemplo: pagina1.00. Ya veremos que los nombres de funciones llevan letras en mayúsculas. es decir debemos disponer: document. etc.WRITE (la primera forma es la correcta. 5. etc. Nos acostumbraremos a prestar atención cada vez que escribamos en minúsculas o mayúsculas para no cometer errores sintácticos. Es decir. Todo lo que indicamos entre comillas aparecerá tal cual dentro de la página HTML. ES IMPORTANTISIMO TENER EN CUENTA QUE JavaScript es SENSIBLE A MAYUSCULAS Y MINUSCULAS.write('Hola Mundo').

document.b y c. document.92.write('<br>'). se pueden declarar varias variables en una misma línea: var dia. edad=20. no la debemos disponer entre simples comillas (en caso de hacer esto. m. son cadenas de caracteres) deben ir encerradas entre comillas simples. a una variable se la puede definir e inmediatamente inicializarla con un valor: var edad=20. Una variable se define anteponiéndole la palabra clave var: var dia. document. mes. mes. Los valores de las variables que almacenan nombres (es decir. una mala elección de nombres hubiera sido llamarlas a. Podemos darle otros buenos nombres. por ejemplo d.write(edad). En el ejemplo anterior los nombres dia. aparecerá el nombre de la variable y no su contenido). document. En JavaScript. document. Para mostrar el contenido de una variable en una página utilizamos el objeto document y llamamos a la función write.write(altura). pero pasado un tiempo lo olvidaríamos. document. Cada instrucción finaliza con un punto y coma. El resultado al visualizar la página debe ser 4 líneas similares a éstas: Juan Página 182 . En el siguiente ejemplo definimos una serie de variables y las mostramos en la página: <html> <head> </head> <body> <script language="JavaScript"> var nombre='Juan'.write('<br>'). document. Los valores de las variables enteras (en este ejemplo la variable edad) y reales no deben ir encerradas entre comillas. var casado=false. var edad=10. a. anio. pudiendo haber además dígitos entre los demás caracteres. var altura=1. deben comenzar por una letra o un subrayado (_). anio son lo suficientemente claros para darnos una idea acabada sobre su contenido. Impresión de variables en una página HTML.Las variables son nombres que ponemos a los lugares donde almacenamos la información.write(nombre). Posiblemente cuando estemos resolviendo un problema dicho nombre nos recuerde que almacenamos el dia. Elección del nombre de una variable: Debemos elegir nombres de variables representativos. </script> </body> </html> Cuando imprimimos una variable. o en su defecto en dos pasos: var edad. Otros no son tan representativos. Las variables de tipo boolean pueden almacenar solo dos valores: true o false.write('<br>').write(casado). Una variable no puede tener el mismo nombre de una palabra clave del lenguaje.

Cada vez que necesitamos ingresar un dato con esta función. document.write('<br>'). Una variable es de un tipo determinado cuando le asignamos un valor: var edad=10. pero para el aprendizaje de los conceptos básicos de JavaScript nos resultará más práctica esta función.Write(nombre). document. Es de tipo entera ya que le asignamos un valor entero. aparece una ventana donde cargamos el valor.write(altura).write('<br>').10 1. document. document. var altura=1. Imprimir cada variable en una línea distinta en pantalla.92 False Es decir que se muestran los contenidos de las 4 variables.write(edad). </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. este es un error muy común cuando comenzamos a programar en JavaScript Ejemplo: <html> <head> </head> <body> <script language="JavaScript"> var nombre="Juan".write('<br>'). Para ver su funcionamiento analicemos este ejemplo: <html> Página 183 . document. Esto porque no existe el objeto 'Document' sino el objeto 'document' (con d minúscula). Es de tipo cadena.write(casado). var edad=10. Recordemos que el lenguaje JavaScript es sensible a mayúsculas y minúsculas y no será lo mismo si tipeamos: Document. document. 4.write(nombre). Hay otras formas más sofisticadas para la entrada de datos en una página HTML. var nombre='juan'.92. Para la entrada de datos por teclado tenemos la función prompt. lo mismo no existe la función 'Write' sino 'write'. var casado=false. document. Entrada de datos por teclado. Para mostrar el contenido de una variable en una página debemos utilizar la función 'write' que pertenece al objeto document.

write(' años'). nombre=prompt('Ingrese su nombre:'. </script> </body> </html> Practica: Confeccionar un programa que permita cargar el nombre de un usuario y su mail por teclado. valor1=prompt('Ingrese primer número:'. Ejemplo de otro algoritmo con estructura secuencial: Realizar la carga de dos números por teclado e imprimir su suma y su producto: <html> <head> <script language="JavaScript"> var valor1. edad=prompt('Ingrese su edad:'. var edad.''). document.write('Hola '). 5. donde se ingresa el nombre de una persona y su edad se trata de una estructura secuencial. document.write(edad).write(nombre).write('Hola ').'').<head> </head> <body> <script language="JavaScript"> var nombre.write(edad). La función prompt tiene dos parámetros: uno es el mensaje y el otro el valor incial a mostrar. document. Cuando en un problema sólo participan operaciones.write(nombre). var valor2. document. document. entradas y salidas se la denomina estructura secuencial. Página 184 . document. document. edad=prompt('Ingrese su edad:'.write(' asi que tienes ').'').write(' asi que tienes ').<valor inicial a mostrar en la ventana>). nombre=prompt('Ingrese su nombre:'.''). document. Mostrar posteriormente los datos en la página HTML.''). var edad. document.write(' años'). document. Ejemplo: <html> <head> </head> <body> <script language="JavaScript"> var nombre. </script> </body> </html> La sintaxis de la función prompt es: <variable que recibe el dato>=prompt(<mensaje a mostrar en la ventana>. El problema anterior. Estructuras secuenciales de programación.

document. Si por ejemplo sumamos 1 + 1 sin utilizar la función parseInt el resultado será 11 en lugar de 2. Viendo sólo los problemas resueltos en este curso de estudio no alcanza para convertirse en un programador de aplicaciones.valor2=prompt('Ingrese segundo número'. document. var suma=parseInt(valor1)+parseInt(valor2). document.Realizar la carga del lado de un cuadrado. calcular e informar la Página 185 . Cuando empleamos el operador * para el producto. sume las variables como enteros y no como cadenas de caracteres. var suma=parseInt(valor1)+parseInt(valor2).write('El producto es '). document. document.write(producto). document.'').write(suma). En JavaScript.write('<br>').write('La suma es ').'').write('La suma es '). 2 . document. ya que el operador + concatena las dos cadenas. valor1=prompt('Ingrese primer número:'. mostrar por pantalla el perímetro del mismo (El perímetro de un cuadrado se calcula multiplicando el valor del lado por cuatro).''). Con esto logramos que el operador más. document. var producto=valor1*valor2. </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 numéricos ingresados por teclado.write(producto). debemos llamar a la función parseInt y pasarle como parámetro las variables valor1 y valor2 sucesivamente. como no podemos indicarle de qué tipo es la variable.write('El producto es ').write(suma). document. sólo para el operador + debemos utilizarla).Escribir un programa en el cual se ingresen cuatro números. var producto=valor1*valor2. requiere mucho más cuidado cuando operamos con sus contenidos. Ejemplo: <html> <head> <script language="JavaScript"> var valor1. ya no es obligatorio utilizar la función parseInt (es decir. </script> </head> <body> </body> </html> Practica: Es de fundamental importancia realizar los programas. luego hacemos dos operaciones y por último mostramos los resultados. var valor2. Este problema es secuencial ya que ingresamos dos valores por teclado. document. PROBLEMAS 1 .write('<br>'). valor2=prompt('Ingrese segundo número'.

En una estructura CONDICIONAL SIMPLE por el camino del verdadero hay actividades y por el camino del falso no hay actividades. entradas y salidas. 3 . Si la condición se verifica verdadera se ejecuta todas las instrucciones que se encuentran encerradas entre las llaves de apertura y cerrado seguidas al if. Mostrar lo que debe abonar el comprador. tarde o noche ? Por supuesto que en un problema se combinan estructuras secuenciales y condicionales.suma de los dos primeros y el producto del tercero y el cuarto. Para disponer condiciones en un if podemos utilizar alguno de los siguientes operadores relacionales: > >= < <= != mayor mayor o igual menor menor o igual distinto Página 186 . } </script> </body> </html> Aparece la instrucción if en el lenguaje JavaScript. ¿elijo el camino A o el camino B ? Al cursar una carrera.Realizar un programa que lea cuatro valores numéricos e informar su suma y producto.Se debe desarrollar un programa que pida el ingreso del precio de un artículo y la cantidad que lleva el cliente. 4 . Mostrar un mensaje que aprobó si tiene una nota mayor o igual a 4: <html> <head> </head> <body> <script language="javascript"> var nombre. nombre=prompt('Ingrese nombre:'. ¿Elijo la carrera A o la carrera B ? ¿Me pongo este pantalón ? ¿Entro al sitio A o al sitio B ? Para ir al trabajo. Ejemplo: Realizar la carga de una nota de un alumno. var nota.write(nombre+' esta aprobado con un '+nota). inclusive ya veremos que puede haber otras estructuras condicionales. Estructuras condicionales simples. La condición debe ir entre paréntesis. En nuestra vida diaria se nos presentan situaciones donde debemos decidir.''). No todos los problemas pueden resolverse empleando estructuras secuenciales. 6.''). if (nota>=4) { document. Cuando se presenta la elección tenemos la opción de realizar una actividad o no realizarla. Cuando hay que tomar una decisión aparecen las estructuras condicionales. nota=prompt('Ingrese su nota:'. Por el camino del verdadero pueden existir varias operaciones. ¿elijo el turno mañana.

== igual Siempre debemos tener en cuenta que en la condición del if deben intervenir una variable un operador relacional y otra variable o valor fijo. document. document. Con esto hacemos más corto la cantidad de líneas de nuestro programa. Lo más importante que hay que tener en cuenta es que se realizan las actividades de la rama del verdadero o las del falso. y luego hacer promedio=suma/3. operaciones. Otra cosa que hemos incorporado es el operador + para cadenas de caracteres: document. Tener en cuenta que para obtener el promedio debemos operar suma=nota1+nota2+nota3. if (nota>=4) { document. Es decir tenemos actividades por el verdadero y por el falso de la condición. 2 .'').write(nota). Mostrar un mensaje si son iguales (tener en cuenta que para ver si dos variables tienen el mismo valor almacenado debemos utilizar el operador ==). Ejemplo: Realizar un programa que lea dos números distintos y muestre el mayor de ellos: <html> <head> </head> Página 187 .''). salidas. nombre=prompt('Ingrese nombre:'.Solicitar que se ingrese dos veces una clave.write(nombre+' esta aprobado con un '+nota). Cuando se presenta la elección tenemos la opción de realizar una actividad u otra.write(' esta aprobado con un '). NUNCA se realizan las actividades de las dos ramas. Ejemplo: <html> <head> </head> <body> <script language="javascript"> var nombre. nota=prompt('Ingrese su nota:'. var nota.write(nombre+' esta aprobado con un '+nota). Estructuras condicionales compuestas. En una estructura condicional compuesta tenemos entradas.Se ingresan tres notas de un alumno. tanto por la rama del verdadero como por la rama del falso. si el promedio es mayor o igual a siete mostrar el mensaje 'Promocionado'. recordemos que veníamos haciéndolo de la siguiente forma: document. 7. } </script> </body> </html> Practica: PROBLEMAS 1 .write(nombre).

write('el mayor es '+num1).num2. num1=parseInt(num1). } else { document. if (num1>num2) { document. Más adelante veremos qué sucede cuando preguntamos cuál de dos string es mayor.''). } </script> </body> </html> La función prompt retorna un string por lo que debemos convertirlo a entero cuando queremos saber cual de los dos valores es mayor numéricamente. num2=prompt('Ingrese el segundo número:'.<body> <script language="javascript"> var num1.''). en caso que la condición resulte falsa se ejecuta la instrucción o bloque de instrucciones que indicamos después del else. num2=parseInt(num2). num2=prompt('Ingrese el segundo número:'. Página 188 . Si la condición del if es verdadera se ejecuta el bloque que aparece después de la condición. } else { document. num1=prompt('Ingrese el primer número:'.''). num1=prompt('Ingrese el primer número:'.write('el mayor es '+num2).num2. Ejemplo: <html> <head> </head> <body> <script language="javascript"> var num1. if (num1>num2) { document.''). num1=parseInt(num1).write('el mayor es '+num1). 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 codificación: if (<condición>) { <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. En el lenguaje JavaScript una variable puede ir cambiando el tipo de dato que almacena a lo largo de la ejecución del programa.write('el mayor es '+num2). num2=parseInt(num2).

Estructuras condicionales anidadas.Realizar un programa que lea por teclado dos números. nota:'. if (pro>=7) { document. Si el promedio es >=4 y <7 mostrar "Regular". Solución: <html> <head> </head> <body> <script language="javascript"> var nota1. nota:'.nota3.Tener en cuenta qué condición debe cumplirse para tener dos dígitos. en caso contrario informar el producto y la división del primero respecto al segundo.nota2.''). calcule el promedio e imprima alguno de estos mensajes: Si el promedio es >=7 mostrar "Promocionado".write('promocionado'). nota3=parseInt(nota3). } Página 189 . } else { if (pro>=4) { document. 3 .99) mostrar un mensaje indicando si el número tiene uno o dos dígitos (recordar de convertir a entero con parseInt para preguntar posteriormente por una variable entera). Si el promedio es <4 mostrar "Reprobado".write('regular'). 8. un número entero. } else { document.'').write('reprobado').Se ingresan tres notas de un alumno. nota1=prompt('Ingrese 1ra. nota:'. nota3=prompt('Ingrese 3ra.'').} </script> </body> </html> Practica: PROBLEMAS 1 . si el promedio es mayor o igual a 4 mostrar un mensaje 'regular'. var pro. nota2=parseInt(nota2). //Convertimos los 3 string en enteros nota1=parseInt(nota1).Se ingresa por teclado un número positivo de uno o dos dígitos (1. sino 'reprobado'.. nota2=prompt('Ingrese 2da. 2 . si el primero es mayor al segundo informar su suma y diferencia. Ejemplo: Confeccionar un programa que pida por teclado tres notas de un alumno. Decimos que una estructura condicional es anidada cuando por la rama del verdadero o el falso de una estructura condicional hay otra estructura condicional. pro=(nota1+nota2+nota3)/3.

nota3=parseInt(nota3).} </script> </body> </html> Analicemos el siguiente programa. linea de comentario 2. etc.write('reprobado').''). En caso que la condición nos de falso. Primeramente preguntamos si el promedio es superior o igual a 7. nota:'. pro=(nota1+nota2+nota3)/3.write('regular').nota3. } else { if (pro>=4) { document.'').nota2. nota2=parseInt(nota2). nota1=prompt('Ingrese 1ra.''). se transformas a variables enteras y se obtiene el promedio sumando los tres valores y dividiendo por 3 dicho resultado. nota3=prompt('Ingrese 3ra. Se ingresan tres string por teclado que representan las notas de un alumno. nota2=prompt('Ingrese 2da. nota:'. porque todavía debemos averiguar si el promedio del alumno es superior/ igual a cuatro o inferior a cuatro. */ Es decir encerramos el bloque con los caracteres /* */ Ejemplo: <html> <head> </head> <body> <script language="javascript"> var nota1. } } </script> </body> </html> Página 190 . por la rama del falso aparece otra estructura condicional.write('promocionado'). } else { document. nota:'. 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). if (pro>=7) { document. //Convertimos los 3 string en enteros nota1=parseInt(nota1). Los comentarios en JavaScript los hacemos disponiendo dos barras previas al comentario: //Convertimos los 3 string en enteros Si queremos disponer varias líneas de comentarios tenemos como alternativa: /* linea de comentario 1. var pro.

traducido se lo lee como "Y". Mostrar un mensaje de error si el número de cifras no es 1. Cuando vinculamos dos o más condiciones con el operador "&&" las dos condiciones deben ser verdaderas para que el resultado de la condición compuesta de Verdadero y continúe por la rama del verdadero de la estructura condicional.write('el mayor es el '+num1). num3=prompt('Ingrese tercer número:'. num1=parseInt(num1).Confeccionar un programa que permita cargar un número entero positivo de hasta tres cifras y muestre un mensaje indicando si tiene 1. Nivel regular: Porcentaje>=50% y <75%. plantear algoritmos más cortos y comprensibles.Se ingresa por teclado un valor entero.num2.Se cargan por teclado tres números distintos. El operador &&. Operadores lógicos && (y) en las estructuras condicionales. 2 ó 3. se obtuvo la siguiente información: nombre del postulante.Practica: PROBLEMAS 1 . mostrar una leyenda que indique si el número es positivo. 9. Mostrar por pantalla el mayor de ellos. 4 . 3 . Fuera de nivel: Porcentaje<50%. num2=parseInt(num2). <html> <head> </head> <body> <script language="javascript"> var num1. cero o negativo. cantidad total de preguntas que se le realizaron y cantidad de preguntas que contestó correctamente. num2=prompt('Ingrese segundo número:'. } else { Página 191 . 2. if (num1>num2 && num1>num3) { document. La utilización de operadores lógicos permiten en muchos casos. Se emplea cuando en una estructura condicional se disponen dos condiciones.De un postulante a un empleo. y sabiendo que: Nivel superior: Porcentaje>=90%.''). Se pide confeccionar un programa que lea los datos del postulante e informe el nivel del mismo según el porcentaje de respuestas correctas que ha obtenido. 2 .''). que realizó un test de capacitación. num1=prompt('Ingrese primer número:'. Veamos un ejemplo: Confeccionar un programa que lea por teclado tres números distintos y nos muestre el mayor de ellos. Recordemos que la condición debe ir entre paréntesis en forma obligatoria.num3. Nivel medio: Porcentaje>=75% y <90%. ó 3 cifras. num3=parseInt(num3).'').

num1=prompt('Ingrese primer número:'. Ejemplo: <html> <head> </head> <body> <script language="javascript"> var num1.write('el mayor es el '+num2). Es decir que se mostrará el contenido de num1 si y sólo si num1>num2 y num1>num3. } else { if (num2>num3) { document. la CONDICION COMPUESTA da Falso y continúa por la rama del falso. al haber una condición simple.write('el mayor es el '+num3).''). En caso de ser Falsa la condición de la rama del falso.if (num2>num3) { document. Si una de las condiciones simples da falso. no se requieren operadores lógicos. num2=parseInt(num2). } else { document.num2. } } </script> </body> </html> Página 192 .write('el mayor es el '+num2). num3=prompt('Ingrese tercer número:'. num1=parseInt(num1). num2=prompt('Ingrese segundo número:'. analizamos el contenido de num2 y num3 para ver cual tiene un valor mayor.write('el mayor es el '+num1).'').num3. En esta segunda estructura condicional. } else { document. if (num1>num2 && num1>num3) { document.write('el mayor es el '+num3). num3=parseInt(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.'').

if (mes==1 || mes==2 || mes==3) { document. febrero o marzo). luego verificar si dicha fecha corresponde a Navidad. si todos los valores ingresados son menores a 10. (1º Cuadrante si x > 0 Y y > 0 . Cargar por teclado el valor numérico del día.Realizar un programa que pida cargar una fecha cualquiera. mes y año) por teclado.Se ingresan por teclado tres números. mostrar el sueldo a pagar.''). Traducido se lo lee como "O". imprimir en la página la leyenda ' Todos los números son menores a diez'.Practica: PROBLEMAS 1 . año=prompt('Ingrese año:'.'').De un operario se conoce su sueldo y los años de antigüedad. dia=parseInt(dia). 2 . Posteriormente imprimir en pantalla en qué cuadrante se ubica dicho punto. 10. es decir dos valores enteros x e y.'').'). Operadores lógicos || (o) en las estructuras condicionales. Mostrar un mensaje si corresponde al primer trimestre del año (enero.Se ingresan tres valores por teclado. c) Si el sueldo es mayor o igual a 500 mostrar el sueldo en la página sin cambios. 2º Cuadrante: x < 0 Y y > 0. mes=parseInt(mes). Se pide confeccionar un programa que lea los datos de entrada e informe a) Si el sueldo es inferior a 500 y su antigüedad es igual o superior a 10 años.) 5 . mes y año por separado.mes. 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 . dia=prompt('Ingrese día:'. otorgarle un aumento de 5 %.Escribir un programa que pida ingresar la coordenada de un punto en el plano. Cuando vinculamos dos o más condiciones con el operador "O". luego ejecutar la rama del Verdadero. 4 . b) Si el sueldo es inferior a 500 pero su antigüedad es menor a 10 años.año. } </script> </body> Página 193 . mes=prompt('Ingrese mes:'. <html> <head> </head> <body> <script language="javascript"> var dia. con que una de las dos condiciones sea Verdadera alcanza para que el resultado de la condición compuesta sea Verdadero. año=parseInt(año). Si la condición 1 es Verdadera o la condición 2 es Verdadera.write('corresponde al primer trimestre del año. Ejemplo: Se carga una fecha (día. etc. otorgarle un aumento del 20 %.

imprimir en la página la leyenda 'Todos los números son menores a diez'.'). break. No podemos preguntar por mayor o menor.write('uno'). case 4: document. case 3: document.año. Ejemplo: <html> <head> </head> <body> <script language="javascript"> var dia.mes. <html> <head> </head> <body> <script language="javascript"> var valor. switch (valor) { case 1: document.''). Estructuras switch. break. mes y año. //Convertimos a entero valor=parseInt(valor).write('tres'). case 2: document. si todos los valores ingresados son menores a 10.write('debe ingresar un valor comprendido entre 1 y 5. La instrucción switch es una alternativa para remplazar los if/else if. break. Confeccionar un programa que solicite que ingrese un valor entre 1 y 5.write('corresponde al primer trimestre del año.''). 11. dia=parseInt(dia). case 5: document. año=prompt('Ingrese año:'. mes=parseInt(mes). mes=prompt('Ingrese mes:'. Luego mostrar en castellano el valor ingresado. break. if (mes==1 || mes==2 || mes==3) { document.''). break. dia=prompt('Ingrese día:'. ingresamos las variables dia.''). Página 194 .write('cinco').write('dos').</html> La carga de una fecha se hace por partes. año=parseInt(año).'). Con un ejemplo sencillo veremos cual es su sintaxis. default:document. } </script> </body> </html> Practica: Se ingresan por teclado tres números. De todos modos se puede aplicar en ciertas situaciones donde la condición se verifica si es igual a cierto valor. Mostrar un mensaje de error en caso de haber ingresado un valor que no se encuentre en dicho rango. valor=prompt('Ingrese un valor comprendido entre 1 y 5:'.write('cuatro').

//Convertimos a entero valor=parseInt(valor). break.bgColor='#ff0000'.bgColor='#0000ff'.bgColor='#00ff00'. Ingresar por teclado el nombre de un color (rojo. verde y azul).} </script> <A href="pagina2. Cada valor que se analiza debe ir luego de la palabra clave 'case' y seguido a los dos puntos. en caso de verificar dicho valor la variable que analiza el switch. en este caso al valor de rojo le asignamos ff (255 en decimal) es decir el valor máximo posible.html">Ver segundo problema</a> </body> </html> Debemos tener en cuenta que la variable que analizamos debe ir después de la instrucción switch entre paréntesis.html <html> <head> </head> <body> <script language="javascript"> var valor. verde o azul). verde. luego pintar el fondo de la ventana con dicho color: <html> <head> </head> <body> <script language="javascript"> var col. break. col=prompt('Ingrese el color con que se quiere pintar el fondo de la ventana (rojo. break. } </script> </body> </html> Cuando verificamos cadenas debemos encerrarlas entre comillas el valor a analizar: case 'rojo': document. De todos modos el default es opcional en esta instrucción.''). Ejemplo: Pagina1. valor=prompt('Ingrese un valor comprendido entre 1 y 5:'. luego 00 para verde y azul (podemos utilizar algún software de graficación para que nos genere los tres valores). azul)' . switch (col) { case 'rojo': document.''). las instrucciones a ejecutar.bgColor='#ff0000'. case 'verde': document. 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. case 'azul': document. Plantearemos un segundo problema para ver que podemos utilizar variables de tipo cadena con la instrucción switch. Es importante disponer la palabra clave 'break' al finalizar cada caso. Página 195 . La instrucciones que hay después de la palabra clave 'default' se ejecutan en caso que la variable no se verifique en algún case. break.

Estructura repetitiva (while) Hasta ahora hemos empleado estructuras SECUENCIALES y CONDICIONALES.El test o prueba de condición antes de cada repetición. perro. verde. break. case 'verde': document. . 12. default:document.html <html> <head> </head> <body> <script language="javascript"> var col. case 5: document. Una ejecución repetitiva de sentencias se caracteriza por: .write('dos'). si se ingresa 'casa' debemos mostrar el texto 'house' en la página.bgColor='#ff0000'. break. Una estructura repetitiva permite ejecutar una instrucción o un conjunto de instrucciones varias veces. Existe otro tipo de estructuras tan importantes como las anteriores que son las estructuras REPETITIVAS.''). case 'azul': document. break.switch (valor) { case 1: document.html">Ver segundo problema</a> </body> </html> Pagina2.write('debe ingresar un valor comprendido entre 1 y 5.write('cinco'). case 3: document. break. Funcionamiento del while: En primer lugar se verifica la condición. gato) luego mostrar la palabra traducida en inglés. mesa.bgColor='#00ff00'. break. si la misma resulta verdadera se ejecutan las operaciones que indicamos entre las llaves que le siguen al while. Es decir. break. case 4: document.write('uno'). azul)'. break. col=prompt('Ingrese el color con que se quiere pintar el fondo de la ventana (rojo.La o las sentencias que se repiten. switch (col) { case 'rojo': document. break.write('tres').bgColor='#0000ff'. } </script> </body> </html> Practica: Solicitar el ingreso alguna de estas palabras (casa. } </script> <br> <A href="pagina2. Página 196 .').write('cuatro'). que motivará que se repitan o no las sentencias. case 2: document.

se sale de la estructura repetitiva y continúa el algoritmo. se lee MIENTRAS la variable x sea menor o igual a 100. si x contiene 1 luego de ejecutarse esta operación se almacenará en x un 2. luego imprimimos la variable. <html> <head> </head> <body> <script language="javascript"> var x. x=x+1. Mientras la condición retorne verdadero. al retornar falso la verificación de la condición.write(x). Observar que si. retorna VERDADERO. Dicha situación es un error de programación. se ejecuta el bloque de instrucciones. por ejemplo. incrementamos nuevamente la variable y así sucesivamente. disponemos la condición x >=100 ( si x es mayor o igual a 100) no provoca ningún error sintáctico pero estamos en presencia de un error lógico porque al evaluarse por primera vez la condición retorna falso y no se ejecuta el bloque de instrucciones que queríamos repetir 100 veces. x=1. porque el contenido de x (1) es menor o igual a 100. Se imprime el contenido de x y seguidamente se incrementa la variable x en uno. Es decir. agregamos la marca HTML de <br>. El bloque se repite MIENTRAS la condición sea Verdadera. Ejemplo: Realizar un programa que imprima en pantalla los números del 1 al 100. Al ser la condición verdadera se ejecuta el bloque de instrucciones que contiene la estructura while. finaliza el programa. Importante: Si la condición siempre retorna verdadero estamos en presencia de un ciclo repetitivo infinito. Sin conocer las estructuras repetitivas podemos resolver el problema empleando una estructura secuencial. El bloque de instrucciones contiene dos salidas al documento y una operación. Al finalizar el bloque de instrucciones que contiene la estructura repetitiva. Lo más difícil es la definición de la condición de la estructura while y qué bloque de instrucciones se va a repetir. Página 197 .write('<br>'). Es muy importante analizar este programa: La primera operación inicializa la variable x en 1. se verifica nuevamente la condición de la estructura repetitiva y se repite el proceso explicado anteriormente. uno en cada línea. while (x<=100) { document. Al ejecutarse la condición. nunca finalizará el programa. seguidamente comienza la estructura repetitiva while y disponemos la siguiente condición ( x <= 100).En caso que la condición sea Falsa continua con la instrucción siguiente al bloque de llaves. Inicializamos una variable con el valor 1. document. La operación x = x + 1 se lee como "en la variable x se guarda el contenido de x más 1". } </script> </body> </html> Para que se impriman los números. en este caso.

La variable x recibe el nombre de CONTADOR.Imprimir los números del 50 al 100. 4 . sino que se logra con una práctica continua. 100 101 Cuando x vale 101 la condición de la estructura repetitiva retorna falso.44. Página 198 .Imprimir los números del 2 al 100 pero de 2 en 2 (2.33 .100). Ejemplo: <html> <head> </head> <body> <script language="javascript"> var x. document. Probemos algunas modificaciones de este programa y veamos qué cambios se deberían hacer para: 1 .. solucionando problemas. para ello podemos hacer un seguimiento del flujo del diagrama y los valores que toman las variables a lo largo de la ejecución: x 1 2 3 4 . 3 .Imprimir los números del 1 al 500..22 . x=1. .. Importante: Podemos observar que el bloque repetitivo puede no ejecutarse si la condición retorna falso la primera vez.Realizar un programa que imprima 25 términos de la serie 11 . Una vez planteado el programa debemos verificar si el mismo es una solución válida al problema (en este caso se deben imprimir los números del 1 al 100 en la página).6.Imprimir los números del -50 al 0.8 .write('<br>'). 2 . Un contador es un tipo especial de variable que se incrementa o decrementa con valores constantes durante la ejecución del programa. x=x+1. } </script> </body> </html> Practica: PROBLEMAS 1 . (No se ingresan valores por teclado).4.No existe una RECETA para definir una condición de una estructura repetitiva. while (x<=100) { document. etc. en este caso finaliza el diagrama.write(x). El contador x nos indica en cada momento la cantidad de valores impresos en la página. La variable x debe estar inicializada con algún valor antes que se ejecute la operación x = x + 1.

} document. var suma=0.write("La suma de los valores es "+suma+"<br>"). la variable suma se incrementa con el contenido ingresado en la variable valor. <html> <head> </head> <body> <script language="javascript"> var x=1. var valor. Debe aparecer en pantalla 8 -16 -24. Hemos dado el nombre de suma a nuestro acumulador. valor=parseInt(valor).Mostrar los múltiplos de 8 hasta el valor 500.''). La prueba del diagrama se realiza dándole valores a las variables: valor suma x 0 0 (Antes de entrar a la estructura repetitiva estos son los valores). a semejanza de los anteriores. Ejemplo: <html> <head> Página 199 . Explicaremos el concepto de un acumulador con un ejemplo. suma=suma+valor. Problema: Desarrollar un programa que permita la carga de 5 valores por teclado y nos muestre posteriormente la suma. llevamos un CONTADOR llamado x que nos sirve para contar las vueltas que debe repetir el while. También aparece el concepto de ACUMULADOR (un acumulador es un tipo especial de variable que se incrementa o decrementa con valores variables durante la ejecución del programa). por ello la necesidad de ir almacenando en la variable suma los valores ingresados. x=x+1. 5 5 1 16 21 2 7 28 3 10 38 4 2 40 5 Este es un seguimiento del programa planteado. while (x<=5) { valor=prompt('Ingrese valor:'. el valor anterior 5 se pierde. </script> </body> </html> En este problema. Hay que tener en cuenta que cuando en la variable valor se carga el primer valor (en este ejemplo es el valor 5). Los números que toma la variable valor dependerá de qué cifras cargue el operador durante la ejecución del programa. Cada ciclo que se repita la estructura repetitiva.2 . Concepto de acumulador. etc. al cargarse el segundo valor (16). 13.

} document.20. 'Listas iguales') Tener en cuenta que puede haber dos o más estructuras repetitivas en un algoritmo. porque el resto de dividir 13 en 2 es 1. Por ejemplo: 12 % 2. Debe aparecer en pantalla 10 . 'Lista 2 mayor'.10 .Se ingresan un conjunto de 5 alturas de personas por teclado.'').20 -30 etc. 7 . 13 % 2. Es de vital importancia para llegar a ser un buen PROGRAMADOR poder resolver problemas en forma individual. x=x+1. retorna 0.</head> <body> <script language="javascript"> var x=1. Además el programa deberá informar el importe que gasta la empresa en sueldos al personal. 1 . Página 200 . var suma=0. if (valor%2==0) El operador "%" retorna el resto de la división valor / 2. La experiencia dice que debemos dedicar el 80 % del tiempo a la resolución individual de problemas y el otro 20 % al análisis y codificación de problemas ya resueltos por otras personas. var valor.Mostrar los múltiplos de 10 hasta el valor 1500.Realizar un programa que permita cargar dos listas de 3 valores cada una. (No se ingresan valores por teclado).En una empresa trabajan 5 empleados cuyos sueldos oscilan entre $100 y $500. 3 . valor=parseInt(valor). que es el momento donde uno desarrolla individualmente un algoritmo para la resolución de problemas. etc. 5 . suma=suma+valor. El tiempo a dedicar a esta sección EJERCICIOS PROPUESTOS debe ser mucho mayor que el empleado al ver EJERCICIOS RESUELTOS.Escribir un programa que lea 10 notas de alumnos y nos informe cuántos tienen notas mayores o iguales a 7 y cuántos menores. 4 .Desarrollar un programa que permita cargar 5 números enteros y luego nos informe cuántos valores fueron pares y cuántos impares.write("La suma de los valores es "+suma+"<br>"). while (x<=5) { valor=prompt('Ingrese valor:'. Emplear el operador "%" en la condición de la estructura condicional.Realizar un programa que imprima 20 términos de la serie 5 . 2 . Mostrar la altura promedio de las personas. realizar un programa que lea los sueldos que cobra cada empleado e informe cuántos empleados cobran entre $100 y $300 y cuántos cobran más de $300.15 . 6 . retorna 1. Informar con un mensaje cual de las dos listas tiene un valor acumulado mayor (mensajes 'Lista 1 mayor'. </script> </body> </html> Practica: PROBLEMAS Ha llegado la parte fundamental.

} else { document. Este bloque se repite mientras se ingresa en la variable 'valor' un número distinto a 0. valor=parseInt(valor). Si se carga un valor menor a 10 se trata de un número de una cifra.write('<br>'). document.write('El valor '+valor+' tiene '). a diferencia del while que puede no ejecutar el bloque.write('Tiene 2 digitos').write('Tiene 3 digitos'). do { Página 201 . La condición de la estructura está abajo del bloque a repetir. do { valor=prompt('Ingrese un valor entre 0 y 999:'. Ejemplo: Escribir un programa que solicite la carga de un número entre 0 y 999. <html> <head> </head> <body> <script language="javascript"> var valor. a diferencia del while que está en la parte superior. Esta estructura repetitiva se utiliza cuando conocemos de antemano que por lo menos una vez se ejecutará el bloque repetitivo. } else { if (valor<100) { document. Estructura repetitiva (do/while) La sentencia do/while es otra estructura repetitiva. if (valor<10) { document.'').write('Tiene 1 digitos'). Ejemplo: <html> <head> </head> <body> <script language="javascript"> var valor.14. si es mayor a 10 pero menor a 100 se trata de un valor de dos dígitos. es decir igual que el while. } } document. la cual ejecuta al menos una vez su bloque repetitivo. Finalizar el programa cuando se cargue el valor 0. } while(valor!=0). en caso contrario se trata de un valor de tres dígitos. </script> </body> </html> En este problema por lo menos se carga un valor. y nos muestre un mensaje de cuántos dígitos tiene el mismo. Finaliza la ejecución del bloque repetitivo cuando la condición retorna falso.

15. 3 .'').write('Tiene 3 digitos'). } while(valor!=0). 'Deudor' si el saldo es <0. 2 . </script> </body> </html> Practica: PROBLEMAS 1 .En un banco se procesan datos de las cuentas corrientes de sus clientes. valor=parseInt(valor). Cantidad de varones. Cantidad de varones cuya edad varía entre 16 y 65 años. } else { document.Realizar un programa que acumule (sume) valores ingresados por teclado hasta ingresa el 9999 (no sumar dicho valor. } } document.write('<br>').write('Tiene 2 digitos').write('El valor '+valor+' tiene '). b) La suma total de los saldos acreedores. Imprimir el valor acumulado e informar si dicho valor es cero. De cada una de las personas censadas se tiene la siguiente información: número de documento. 'Nulo' si el saldo es =0. sabiendo que: Estado de la cuenta 'Acreedor' si el saldo es >0. } else { if (valor<100) { document. nombre del cliente y estado de la cuenta según su saldo. 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 número de documento) e informar: a) b) c) d) Cantidad total de personas censadas. nombre del cliente y saldo actual. De cada cuenta corriente se conoce: número de cuenta. if (valor<10) { document. Cantidad de mujeres.write('Tiene 1 digitos').valor=prompt('Ingrese un valor entre 0 y 999:'. Estructura repetitiva (for) Página 202 . solamente indica que ha finalizado la carga). El ingreso de datos debe finalizar al ingresar un valor negativo en el número de cuenta. Se pide confeccionar un programa que lea los datos de las cuentas corrientes e informe: a) De cada cuenta: número de cuenta.Se realizó un censo provincial y se desea procesar la información obtenida en dicho censo. document. mayor a cero o menor a cero.

Sintaxis: for (<Inicialización> .El segundo paso es evaluar la (Condición).Luego se repiten sucesivamente del Segundo al Cuarto Paso.write(f+" "). Conocemos de antemano la cantidad de veces que queremos que el bloque se repita. ingresar 5 notas de alumnos. en caso contrario continúa el programa. Pero hay otra estructura repetitiva cuyo planteo es más sencillo en ciertas situaciones. for(f=1.que decrementa en uno una variable). condición y variable de incremento o decremento.El tercer paso es la ejecución de las instrucciones. .El cuarto paso es ejecutar el tercer argumento (Incremento o Decremento).Primero se ejecuta por única vez el primer argumento . Este tipo de estructura repetitiva se utiliza generalmente cuando sabemos la cantidad de veces que deseamos que se repita el bloque. por lo que el navegador no avisará. Esta estructura se emplea en aquellas situaciones en las cuales CONOCEMOS la cantidad de veces que queremos que se ejecute el bloque de instrucciones. Funcionamiento: . Importante: Tener en cuenta que no lleva punto y coma al final de los tres argumentos del for. 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. Ejemplo: Cargar 10 números. Ejemplo: Mostrar por pantalla los números del 1 al 10. existe otro operador -. hubiera sido lo mismo poner f=f+1 pero este otro operador matemático nos simplifica las cosas. Por último. Como la condición 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). . } </script> </body> </html> Inicialmente f se la inicializa con 1. <Incremento o Decremento>) { <Instrucciones> } Esta estructura repetitiva tiene tres argumentos: variable de inicialización. .f++) { document. etc. hay que decir que la ejecución de la sentencia break dentro de cualquier parte del bucle provoca la salida inmediata del mismo. en caso de ser verdadera se ejecuta el bloque. . El disponer un punto y coma provoca un error lógico y no sintáctico. <Condición> . Página 203 .f<=10. <html> <head> </head> <body> <script language="javascript"> var f.Cualquier problema que requiera una estructura repetitiva se puede resolver empleando la estructura while. Por lo general se inicializa una variable.

tercer y cuarto cuadrante. } </script> </body> </html> Practica: PROBLEMAS 1 .y) que representan puntos en el plano. Se desea conocer: a) La cantidad de valores negativos ingresados. Las edades de 110 estudiantes del turno noche. 5 . segundo.f++) { document. El programa deberá informar: a) De cada triángulo la medida de su base. 2 . a) Obtener el promedio de las edades de cada turno (tres promedios).Realizar un programa que lea los lados de 4 triángulos. b) La cantidad de valores positivos ingresados. qué tipo de triángulo es: equilátero (tres lados iguales). 7 .Desarrollar un programa que solicite la carga de 10 números e imprima la suma de lo últimos 5 valores ingresados.f<=10.Se cuenta con la siguiente información: Las edades de 50 estudiantes del turno mañana. o escaleno (ningún lado igual) b) Cantidad de triángulos de cada tipo. 8 . for(f=1.Escribir un programa que pida ingresar coordenadas (x. Al comenzar el programa se pide que se ingrese la cantidad de puntos a procesar. Las edades de 60 estudiantes del turno tarde. cada par de datos corresponde a la medida de la base y la altura de un triángulo. Página 204 .Confeccionar un programa que lea 3 pares de datos. 9. Informar cuántos puntos se han ingresado en el primer. d) El valor acumulado de los números ingresados que son pares.Ejemplo: <html> <head> </head> <body> <script language="javascript"> var f. c) Tipo de triángulo del que hay menor cantidad. 3. isósceles (dos lados iguales). hasta el 36.write(f+" "). e informar: a) De cada uno de ellos. b) La cantidad de triángulos cuya superficie es mayor a 12. 4 .Desarrollar un programa que muestre la tabla de multiplicar del 5 (del 5 al 50).Confeccionar un programa que permita ingresar un valor del 1 al 10 y nos muestre la tabla de multiplicar del mismo (los primeros 12 términos) Ejemplo: Si ingreso 3 deberá aparecer en pantalla los valores 3. c) La cantidad de múltiplos de 15. 6. 6 . b) Imprimir dichos promedios (promedio de cada turno). su altura y su superficie. Las edades de cada estudiante deben ingresarse por teclado.Se realiza la carga de 10 valores enteros por teclado.

Consta de un nombre y parámetros. Podemos cargar una variable. éste puede constar de pequeños algoritmos. entonces puede estar justificado el aislar estas sentencias formando una función. planteamos un algoritmo. es decir. retornar un valor. . Si un grupo de sentencias realiza una tarea bien definida. La herramienta más potente con que se cuenta para facilitar. Tienen la siguiente estructura: function <nombre de función>(argumento1. lo cual implica que se tenga que escribir tantos grupos de aquellas sentencias como veces aparezca dicho proceso. Funciones En programación es muy frecuente que un determinado procedimiento de cálculo definido por un grupo de sentencias tenga que repetirse varias veces. Incluso los programas más sencillos tienen la necesidad de fragmentarse. Una función es un conjunto de instrucciones que resuelven una parte del problema y que puede ser utilizado (llamado) desde diferentes partes de un programa. etc. ya sea en un mismo programa o en otros programas. Veremos que una función puede variar bastante en su estructura. reducir y dividir el trabajo en programación. argumento2.. Las funciones son los únicos tipos de subprogramas que acepta JavaScript.c) Mostrar por pantalla un mensaje que indique cual de los tres turnos tiene un promedio de edades mayor. aunque resulte que sólo se le llame o use una vez. imprimirla. tal vez deberíamos llamarla centrarTitulo). 16. Frente a un problema. Ejemplo: Mostrar un mensaje que se repita 3 veces en la página con el siguiente texto: 'Cuidado' 'Ingrese su documento correctamente' 'Cuidado' 'Ingrese su documento correctamente' 'Cuidado' 'Ingrese su documento correctamente' Página 205 . Los parámetros son valores que se envían y son indispensables para la resolución del mismo. modificarla. Con el nombre llamamos a la función. La función realizará alguna operación con los parámetros que le enviamos. Hasta ahora hemos visto como resolver un problema planteando un único algoritmo.. etc. puede tener o no parámetros. consultarla.. Con funciones podemos segmentar un programa en varias partes. argumento n) { <código de la función> } Debemos buscar un nombre de función que nos indique cuál es su objetivo (Si la función recibe un string y lo centra. hacemos referencia a la misma. 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 también que sea inteligible para las personas.

write("Cuidado<br>").write("Cuidado<br>").write("Ingrese su documento correctamente<br>").write("Cuidado<br>").write("Ingrese su documento correctamente<br>"). } mostrarMensaje(). Página 206 . mostrarMensaje(). document.write("Ingrese su documento correctamente<br>").write("Ingrese su documento correctamente<br>"). document.write("Cuidado<br>"). A una función la podemos llamar tantas veces como necesitemos. document. Si fijamos como nombre a la función mostrarTitulo (es decir la segunda palabra con mayúscula) debemos respetar este nombre cuando la llamemos a dicha función. </script> </body> </html> Recordemos que JavaScript es sensible a mayúsculas y minúsculas.write("Cuidado<br>"). Las funciones nos ahorran escribir código que se repite con frecuencia y permite que nuestro programa sea más entendible. Cada vez que se llama una función se ejecutan todas las líneas contenidas en la misma. Ejemplo: <html> <head> </head> <body> <script language="javascript"> function mostrarMensaje() { document. Si no se llama a la función. mostrarMensaje(). document. document. las instrucciones de la misma nunca se ejecutarán. Es importante notar que para que una función se ejecute debemos llamarla desde fuera por su nombre (en este ejemplo: mostrarMensaje()). </script> </body> </html> Empleando una función: <html> <head> </head> <body> <script languaje="javascript"> function mostrarMensaje() { document. } mostrarMensaje().La solución sin emplear funciones es: <html> <head> </head> <body> <script language="javascript"> document. mostrarMensaje(). document. document.write("Ingrese su documento correctamente<br>").

inicio<=x2.valor2).mostrarMensaje().valor2.inicio++) { document. Funciones con parámetros.inicio++) { document. Es importante notar que a la función la podemos llamar la cantidad de veces que la necesitemos. Ejemplo: <html> <head> </head> <body> <script language="javascript"> function mostrarComprendidos(x1. Cargar por teclado esos dos valores. } } var valor1.valor2. valor2=parseInt(valor2). una función que tiene datos de entrada.write(inicio+' ').''). Página 207 . } } var valor1. for(inicio=x1. valor1=prompt('Ingrese valor inferior:'. </script> </body> </html> El programa de JavaScript empieza a ejecutarse donde definimos las variables valor1 y valor2 y no donde se define la función. mostrarComprendidos(valor1.write(inicio+' '). Luego de cargar los dos valores por teclado se llama a la función mostrarComprendidos y le enviamos las variables valor1 y valor2. for(inicio=x1.x2) { var inicio. valor1=prompt('Ingrese valor inferior:'. </script> </body> </html> 17.''). Ejemplo: Confeccionar una función que reciba dos números y muestre en la página los valores comprendidos entre ellos de uno en uno. Los parámetors x1 y x2 reciben los contenidos de las variables valor1 y valor 2. valor2=prompt('Ingrese valor superior:'. <html> <head> </head> <body> <script language="javascript"> function mostrarComprendidos(x1.''). valor1=parseInt(valor1).x2) { var inicio. Explicaremos con un ejemplo.inicio<=x2.

18. Página 208 . else return "valor incorrecto".''). Funciones que retornan un valor. Cuando se llama a la función. luego de hacer un proceso. </script> </body> </html> Practica: PROBLEMAS 1 . </script> </body> </html> Podemos ver que el valor retornado por una función lo indicamos por medio de la palabra clave return. Son comunes los casos donde una función. mostrarComprendidos(valor1. valor=prompt("Ingrese un valor entre 1 y 5". document.Confeccionar una función a la cual le envíe tres enteros y los muestre ordenados de menor a mayor. else if (x==5) return "cinco".write(r). } var valor. retorne un valor. Ejemplo 1: Confeccionar una función que reciba un valor entero comprendido entre 1 y 5. valor2=prompt('Ingrese valor superior:'.valor1=parseInt(valor1). var r. ya que la misma retorna un valor. debemos asignar el nombre de la función a una variable.""). r=convertirCastellano(valor). 2 . else if (x==2) return "dos".valor2). <html> <head> </head> <body> <script language="javascript"> function convertirCastellano(x) { if (x==1) return "uno". valor2=parseInt(valor2). else if (x==4) return "cuatro".Elaborar una función a la cual le enviemos tres enteros y muestre el menor. else if (x==3) return "tres". valor=parseInt(valor). Luego retornar en castellano el valor recibido.

case 4:s=s+'abril '. } Página 209 . case 10:s=s+'octubre '. mes y año y retorne un string con un formato similar a: "Hoy es 10 de junio de 2003". case 3:return "tres".Una función puede tener varios parámetros. case 8:s=s+'agosto '. break. break. case 6:s=s+'junio '. break.mes. break.año) { var s='Hoy es '+dia+' de '. case 9:s=s+'septiembre '. switch (mes) { case 1:s=s+'enero '. case 3:s=s+'marzo '. ejecuta el bloque seguido de los 2 puntos hasta que encuentra la instrucción return o break. La instrucción switch analiza el contenido de la variable x con respecto al valor de cada caso. case 2:s=s+'febrero '. case 12:s=s+'diciembre '. case 2:return "dos". pero sólo puede retornar un único valor. La estructura condicional if de este ejemplo puede ser remplazada por la instrucción switch. break. case 5:return "cinco". case 11:s=s+'noviembre '. case 4:return "cuatro". return s. } //fin del switch s=s+'de '+año. } } Esta es una forma más elegante que una serie de if anidados. <html> <head> </head> <body> <script language="javascript"> function formatearFecha(dia. break. la función queda codificada de la siguiente manera: function convertirCastellano(x) { switch (x) { case 1:return "uno". Ejemplo 2: Confeccionar una función que reciba una fecha con el formato de día. break. break. case 5:s=s+'mayo '. case 7:s=s+'julio '. break. break. break. En la situación de ser igual. break. default:return "valor incorrecto".

Ejemplo: Pagina1. si el parámetro mes tiene un uno.2006). </script> </body> </html> Analicemos un poco la función formatearFecha. Observemos como acumulamos lo que tiene 's' más el string 'enero '. document. else if (x==5) return "cinco". else if (x==2) return "dos". Luego le concatenamos o sumamos el mes: s=s+'enero '. r=convertirCastellano(valor). valor=parseInt(valor).2006)). else if (x==4) return "cuatro".write(fec).6. Esto. else return "valor incorrecto". document. En caso de hacer s='enero ' perderíamos el valor previo que tenía la variable s. Definimos e inicializamos una variable con: var s='Hoy es '+dia+' de '.write(formatearFecha(11. else if (x==3) return "tres". Llegan tres parámetros con el día. </script> <br> Página 210 . mes y año. Por último concatenamos el año: s=s+'de '+año. Esto último lo podemos hacer en dos pasos: var fec= formatearFecha(11.write(r). } var valor. valor=prompt("Ingrese un valor entre 1 y 5"."").html <html> <head> </head> <body> <script language="javascript"> function convertirCastellano(x) { if (x==1) return "uno". al valor devuelto se lo enviamos a la función write del objeto document. var r.6. Guardamos en la variable 'fec' el string devuelto por la función. Cuando se llama a la función directamente.document.

break. break. case 10:s=s+'octubre '. case 5:s=s+'mayo '. 2 .2006)).html <html> <head> </head> <body> <script language="javascript"> function formatearFecha(dia. switch (mes) { case 1:s=s+'enero '.Confeccionar una función a la cual le envíe tres enteros y retorne el mayor de ellos. case 6:s=s+'junio '.Elaborar una función a la cual le envíe el valor del lado de un cuadrado y me retorne su perímetro. case 9:s=s+'septiembre '. break.año) { var s='Hoy es '+dia+' de '. break.html">Ver segundo problema</a> </body> </html> Pagina2.Desarrollar una función que retorne la cantidad de dígitos que tiene una variable entera positiva. break. 5 .<A href="pagina2.Confeccionar una función que solicite la carga de 5 valores por teclado y retorne su suma. case 12:s=s+'diciembre '. case 3:s=s+'marzo '. case 11:s=s+'noviembre '. 4 . break.write(formatearFecha(11. break. Página 211 . break. break. break. 3 . return s. } document.6. break.mes.Elaborar una función que reciba tres enteros y retorne el promedio. } //fin del switch s=s+'de '+año. break. case 2:s=s+'febrero '. case 4:s=s+'abril '. case 7:s=s+'julio '. </script> </body> </html> Practica: PROBLEMAS 1 . case 8:s=s+'agosto '.

Página 212 . etc. A partir de esta estructura se ha creado un nuevo modelo de programación (la programación orientada a objetos) que atribuye a los mismos propiedades como herencia o polimorfismo. Un objeto es una estructura que contiene tanto las variables (llamadas propiedades) como las funciones que manipulan dichas variables (llamadas métodos). respuestas a mensajes para satisfacer peticiones. El nombre del método identifica una operación que se ejecuta. Es un algoritmo (conjunto de operaciones) que se ejecuta en respuesta a un mensaje.Ventana: atributos: tamaño. Poseen características (atributos) y tienen responsabilidades (funciones. Propiedades y métodos. etc. precio. El modelo de la programación orientada a objetos normal y corriente separa los mismos en dos: clases e instancias (objetos). responsabilidades: comodidad. Ejemplos de objetos del mundo real: . métodos) que deben cumplir. etc.. Atributos o propiedades Son las características. largo. Son ejemplares (instancias) de una clase y conocen a la clase a la cual pertenecen. Deben ser mínimos para poder realizar todas las operaciones que requiere la aplicación. Las segundas son miembros de una clase.metodo(parametros) Conceptos Básicos. Responsabilidades o Métodos. Como veremos. cualidades distintivas de cada objeto. cerrarse. ancho. responsabilidades: abrirse. responsabilidades: mostrar título.propiedad objeto. JavaScript simplifica en algo este modelo y hace una programación híbrida entre la programación estructurada y la programación orientada a objetos. Ejemplos de objetos del mundo de la programación: . etc. cantidad de habitaciones.. color. Se relacionan entre si. . responsabilidades: contener elementos. . etc. Las primeras son entes más abstractos que definen un conjunto determinado de objetos.Ventana: atributos: tamaño. poseyendo las mismas propiedades que la clase a la cual pertenecen. etc. Son las responsabilidades que debe cumplir la clase.Casa: atributos: tamaño. Un método consiste en el nombre de la operación y sus argumentos. Programación orientada a objetos.19. seguridad. El objetivo de un método es ejecutar las actividades que tiene encomendada la clase.. Objetos Son todas las cosas con identidad propia.Mesa: atributos: altura. etc. achicarse. color.. Para acceder a los métodos y propiedades de un objeto debemos utilizar la siguiente sintaxis: objeto.

Clases Una clase es una agrupación de objetos que comparten las mismas propiedades y comportamientos. Una aplicación es un conjunto de objetos de determinadas clases. como puede ser el manejo de vectores o el de fechas. La interpretación de un mensaje (selección del método ejecutado) depende del receptor y puede variar con distintos receptores.//creación de un objeto de la clase Date fecha = new Date(año. entre otros. Una clase tiene encomendadas actividades que ejecutan los métodos. el año de la fecha. Es un molde para objetos que poseen las mismas características (que pueden recibir los mismos mensajes y responden de la misma manera). Se invoca así: fecha = new Date(). Éste se devuelve como número de 4 dígitos excepto en el caso en que esté entre 1900 y 1999. Si no utilizamos parámetros. Así. en cuyo caso devolverá las dos últimas cifras.Comportamiento (operaciones o métodos) y . Esta clase nos permitirá manejar fechas y horas. por ejemplo: navidad06 = new Date(2006. segundo). getMonth() setMonth(mes) getDate() setDate(dia) getHours() Página 213 . . dia. Unidad que encapsula códigos y datos para los métodos (operaciones). dia).Relaciones con otros objetos. Clase Date JavaScript dispone de varias clases predefinidos para acceder a muchas de las funciones normales de cualquier lenguaje. es decir. todos los objetos de una clase usan el mismo método en respuesta a mensajes similares. fecha = new Date(año. puede variar de una clase a otra. respectivamente. hora. mes. de los siguientes métodos: getYear() setYear(año) Obtiene y coloca. el objeto fecha contendrá la fecha y hora actuales. minuto. 20. En caso contrario hay que tener en cuenta que los meses comienzan por cero. Las clases están definidas por: .Atributos (Propiedades). Todos los ejemplares de una clase se comportan de forma similar (invocan el mismo método) en respuesta a mensajes similares. obtenidas del reloj de nuestra computadora. Una clase es una representación de una idea o concepto. 25) El objeto Date dispone. getFullYear() setFullYear(año) Realizan la misma función que los anteriores. mes. La clase a la cual pertenece un objeto determina el comportamiento del objeto.Un método está determinado por la clase del objeto receptor. ya que siempre devuelven números con todos sus dígitos. pero sin tanta complicación. 11.

Es bueno notar que para llamar a los métodos disponemos: <nombre de objeto>. respectivamente. document.getHours()+':'). minuto y segundo de la fecha.getMinutes()+':').write(fecha.getDate()+'/'). hora. document.write(fecha. Luego llamamos una serie de métodos que nos retornan datos sobre la fecha y hora actual del equipo de computación donde se está ejecutando el navegador.write((fecha.write('<br>'). el mes. } //Llamada a la función mostrarFechaHora(). </SCRIPT> </HEAD> <BODY> </BODY> </HTML> En este problema hemos creado un objeto de la clase Date.write(fecha.write(fecha. document. document. document. document. document. getDay() Devuelve el día de la semana de la fecha en forma de número que va del 0 (domingo) al 6 (sábado) Ejemplo: Mostrar en una página la fecha y la hora actual. document.write(fecha. document. document.write('Hoy es '). document. } //Llamada a la función Página 214 .getMonth()+1)+'/').write(fecha. document.getMinutes()+':').getMonth()+1)+'/').<nombre de método>(parámetros) Ejemplo: <HTML> <HEAD> <SCRIPT LANGUAGE="JavaScript"> function mostrarFechaHora() { var fecha fecha=new Date().getSeconds()).write('Es la hora ').write(fecha.write('Es la hora ').getHours()+':').getYear()). document.write('<br>'). document.write(fecha. document.write(fecha.getDate()+'/').getSeconds()).setHours(horas) getMinutes() setMinutes(minutos) getSeconds() setSeconds(segundos) Obtienen y colocan. document. día. document. document. <HTML> <HEAD> <SCRIPT LANGUAGE="JavaScript"> function mostrarFechaHora() { var fecha fecha=new Date().getYear()).write((fecha.write('Hoy es ').write(fecha.

for(f=0. Página 215 . sueldos=new Array(5). </SCRIPT> </BODY> </HTML> Recordemos que el programa comienza a ejecutarse a partir de las líneas que se encuentran fuera de la funciones: var sueldos.length. Con un único nombre se define un vector y por medio de un subíndice hacemos referencia a cada elemento del mismo (componente).f<sueldos.f<sueldos. for(f=0.length.f++) { total=total+sueldos[f].f++) { document.write('Total de gastos en sueldos:'+total). Clase Array Un vector es una estructura de datos que permite almacenar un CONJUNTO de datos. var f. sueldos=new Array(5). } } function calcularGastos(sueldos) { var total=0.'').mostrarFechaHora(). <HTML> <HEAD> </HEAD> <BODY> <SCRIPT LANGUAGE="JavaScript"> function cargar(sueldos) { var f. } var sueldos. cargar(sueldos). } document. cargar(sueldos). v=prompt('Ingrese sueldo:'. for(f=0. sueldos[f]=parseInt(v). } document. calcularGastos(sueldos).write('Listado de sueldos<br>').f<sueldos.write(sueldos[f]+'<br>').length. 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 función). </SCRIPT> </HEAD> <BODY> </BODY> </HTML> 21.f++) { var v.

meses[6]='Julio'. dias[10]=30. meses[11]='Diciembre'. definimos una variable y posteriormente creamos un objeto de la clase Array. imprimimos en la página los valores y el total de gastos. a través de un ciclo for recorremos las distintas componentes del vector y almacenamos valores enteros que ingresamos por teclado. <HTML> <HEAD></HEAD> <BODY> <SCRIPT LANGUAGE="JavaScript"> function mostrarFecha(meses. dias[0]=31. num=prompt('Ingrese número de mes:'. dias[11]=31. meses[0]='Enero'. Para conocer el tamaño del vector accedemos a la propiedad length de la clase Array. num=parseInt(num).write('<br>'). dias[9]=31. document. dias[6]=31. En la función. dias=new Array(12). En otra función solicitar el ingreso de un número entre 1 y 12. dias[8]=30.''). meses[3]='Abril'. meses[5]='Junio'. meses[8]='Septiembre'.write('Corresponde al mes:'+meses[num-1]). dias[2]=31. dias[4]=31. dias[3]=30. meses[7]='Agosto'. meses[10]='Noviembre'. document. indicándole que queremos almacenar 5 valores. meses[9]='Octubre'.dias) { var num. meses=new Array(12). document. En la segunda función sumamos todas las componentes del vector. var dias.calcularGastos(sueldos).write('Tiene '+dias[num-1]+' días'). } var meses. Almacenar los meses de año. meses[1]='Febrero'. meses[2]='Marzo'. dias[1]=28. dias[7]=31. dias[5]=30. Mostrar a qué mes corresponde y cuántos días tiene dicho mes. Lo primero. Llamamos a la función cargar enviándole el vector. Ejemplo 2: Crear un vector con elementos de tipo string. Página 216 . meses[4]='Mayo'.

mostrarFecha(meses. Decimos que se trata de vectores paralelos porque en la componente cero del vector meses almacenamos el string 'Enero' y en el vector dias. esto debido a que normalmente el operador de nuestro programa carga un valor comprendido entre 1 y 12. sueldos[f]=parseInt(v). la cantidad de días del mes de enero. } var sueldos. cargar(sueldos).write('Total de gastos en sueldos:'+total).length.length. } document.write('Corresponde al mes:'+meses[num-1]).f<sueldos. for(f=0. for(f=0. var f.f++) { var v. document.f<sueldos. Ejemplo: <HTML> <HEAD> </HEAD> <BODY> <SCRIPT LANGUAGE="JavaScript"> function cargar(sueldos) { var f.f++) { total=total+sueldos[f]. } document.write(sueldos[f]+'<br>'). for(f=0. calcularGastos(sueldos). Recordar que los vectores comienzan a numerarse a partir de la componente cero.f++) { document.'').dias). </SCRIPT> <br> <a href="pagina2.length. uno para almacenar los meses y otro los días. </SCRIPT> </BODY> </HTML> En este problema definimos dos vectores. v=prompt('Ingrese sueldo:'.html">Segundo Problema</a> </BODY> </HTML> Página 217 . } } function calcularGastos(sueldos) { var total=0.f<sueldos. disponemos como subíndice el valor ingresado menos 1.write('Listado de sueldos<br>'). sueldos=new Array(5). Es importante notar que cuando imprimimos.

sqrt(25) Math.cos(Math.Desarrollar un programa que permita ingresar un vector de 8 elementos.57 1 -2 -3 -3 2 asin. dicho resultado guardarlo en un tercer vector del mismo tamaño.PI) Math.floor(-2.E y Math. siendo el primer argumento la base y el segundo el exponente Raíz cuadrada Genera un valor aleatorio comprendido entre 0 y 1. cos.round(-2. umar componente a componente.Realizar un programa que pida la carga de dos vectores numéricos. base E Devuelve el entero más pequeño mayor Math.PI) y los siguientes métodos matemáticos: Método abs sin. e informe: El valor acumulado de todos los elementos del vector. Funciones trigonométricas inversas atan exp.asin(1) Math.3) Math.E) Resultado del ejemplo 2 -1 1. sino como un contenedor que tiene diversas constantes (como Math.7) o igual al argumento Devuelve el entero más grande menor o Math.7) Devuelve el menor (o mayor) de sus dos Math. tan Descripción Valor absoluto Funciones trigonométricas. 22.7345 Página 218 .4) argumentos Exponenciación. 0.ceil(-2. Math. El tamaño del vector es a elección. El valor acumulado de los elementos del vector que sean mayores a 36.min(2.7) igual al argumento Devuelve el entero más cercano o igual al argumento Math.pow(2. max Exponenciación y logaritmo.random() pow sqrt random 8 5 Ej.abs(-2) Math. 2 . Obtener la suma de los dos vectores. Cantidad de valores mayores a 50. acos.log(Math. Clase Math Esta clase no está construido para que tengamos nuestras variables Math. reciben el argumento en radianes Expresión de ejemplo Math.Practica: PROBLEMAS 1 . log ceil floor round min.

write('Lo siento se sorteó el valor '+num+' y usted eligió el '+selec). </script> </body> </html> 23. else document. if (num==selec) document. nos genera un valor aleatorio comprendido entre un valor mayor a 0 y menor a 10. Al multiplicar Math.write('Ganó el número que se sorteó es el '+ num). El siguiente fragmento de código concatena tres cadenas para producir su salida: Página 219 . Concatenación de cadenas (+) JavaScript permite concatenar cadenas utilizando el operador +. var num=parseInt(Math. Luego generar un valor aleatorio entre 1 y 10. luego. if (num==selec) document. El valor que cargó el operador se encuentra en: var selec=prompt('Ingrese un valor entre 1 y 10'. mostrar un mensaje con el número sorteado e indicar si ganó o perdió: <body> <script language="JavaScript"> var selec=prompt('Ingrese un valor entre 1 y 10'.random() por 10. Ejemplo: <html> <head> </head> <body> <script language="JavaScript"> var selec=prompt('Ingrese un valor entre 1 y 10'. var num=parseInt(Math.write('Ganó el número que se sorteó es el '+ num). selec=parseInt(selec).''). con la función parseInt.'').random()*10)+1. </script> </body> </html> Para generar un valor aleatorio comprendido entre 1 y 10 debemos plantear lo siguiente: var num=parseInt(Math.random()*10)+1.write('Lo siento se sorteó el valor '+num+' y usted eligió el '+selec). Finalmente sumamos uno. else document. Clase String. Un string consiste en uno o más caracteres encerrados entre comillas simples o dobles.random()*10)+1. selec=parseInt(selec).'').Ejemplo: <html> <head> </head> Confeccionar un programa que permita cargar un valor comprendido entre 1 y 10. obtenemos sólo la parte entera. Con un simple if validamos si coinciden los valores (el generado y el ingresado por teclado).

write('El primer caracter es:'+cadena. document. cadena1 tiene todos los caracteres convertidos a minúsculas.''). Luego de esto. document.write('Los primeros 3 caracteres son:'+cadena.'.write('<br>'). if (cadena. Propiedad length Retorna la cantidad de caracteres de un objeto String. if (pos!=-1) document.write('<br>'). document. o -1 en caso de no estar.5).3)). substring (posinicial. <html> <head> </head> <body> <script language="JavaScript"> var cadena=prompt('Ingrese una cadena:'.indexOf('hola')!=-1) document.length). document. Dos de las cadenas concatenadas son cadenas literales. var nombre='Rodriguez Pablo'. La del medio es un entero que automáticamente se convierte a cadena y luego se concatena con las otras. posfinal) Retorna un String extraída de otro.toUpperCase(). var nombre='juan'. desde el caracter 'posinicial' hasta el 'posfinal'-1: cadena3=cadena1. En este ejemplo. document.charAt(0)).write('Se ingresó la subcadena hola'). cadena1 tiene todos los caracteres convertidos a mayúsculas.write ('Está el nombre Pablo en la variable nombre').var final='La entrada tiene ' + contador + ' caracteres. toLowerCase() Convierte todos los caracteres del String que invoca el método a minúsculas: cadena1=cadena1. document. Comienzan a numerarse de la posición cero.substring(2. var caracterPrimero=nombre.toLowerCase(). //Resultado 4 Métodos charAt(pos) Retorna el caracter del índice especificado.write('<br>'). Tener en cuenta que puede retornar 0 si la subcadena coincide desde el primer caracter. document. var pos=nombre. Ejemplo: Cargar un string por teclado y luego llamar a los distintos métodos de la clase String y la propiedad length. document.indexOf('Pablo'). 3.write(nom.write('La cadena ingresada es:'+cadena).charAt(0). Luego de esto. document. toUpperCase() Convierte todos los caracteres del String que invoca el método a mayúsculas: cadena1=cadena1.write('<br>').write('La cantidad de caracteres son:'+cadena. var nom='Juan'.length). Página 220 . "cadena3" contendrá los caracteres 2.substring(0. 4 sin incluir el 5 de cadena1 (Cuidado que comienza en cero) indexOf (subCadena) Devuelve la posición de la subcadena dentro de la cadena.

write('<br>'). document. </script> </body> </html> Ejemplo: <html> <head> </head> <body> <script language="JavaScript"> var cadena=prompt('Ingrese una cadena:'. document.write('<br>'). document. Fin o FIN. document. pero que termine la aplicación sin contemplar mayúsculas ni minúsculas.write('<br>').write('No se ingresó la subcadena hola').toLowerCase()).write('<br>'). 2 – Igual al anterior. document.write('<br>').toLowerCase()).write('<br>'). En caso de encontrarla.write('Se ingresó la subcadena hola').write('La cadena convertida a minúsculas es:'+cadena. imprimir la posición.write('La cadena convertida a mayúsculas es:'+cadena.write('El primer caracter es:'+cadena.else document. 5 – Realizar un programa que permita cargar una dirección de mail e implementar una función que verifique si el String tiene cargado el caracter @. document.toUpperCase()).indexOf('hola')!=-1) document. y mostrar cuántos nombres se ingresaron.write('<br>'). 4 – Ingresar una palabra o texto por teclado y determinar si es o no una palabra palíndromo. Página 221 . document. Es decir que para salir se pueda teclear fin.write('La cadena ingresada es:'+cadena). Se deberá ingresar una frase o texto (fuente) y luego la clave a buscar. document. document.write('La cadena convertida a minúsculas es:'+cadena. document. b) Imprimir el último caracter.'').write('<br>').write('No se ingresó la subcadena hola').Cargar un String por teclado e implementar los siguientes métodos: a) Imprimir la primera mitad de los caracteres de la cadena. document. document. document.toUpperCase()).write('La cadena convertida a mayúsculas es:'+cadena. else document. </script> </body> </html> Practica: PROBLEMAS 1 – Ingresar una serie de nombres por teclado hasta que se digite la palabra Fin. document.3)). document.charAt(0)). 3 – Realizar la búsqueda de un string clave en un string fuente. que de atrás hacia delante). de lo contrario una leyenda.length). 6 .substring(0.write('Los primeros 3 caracteres son:'+cadena.write('La cantidad de caracteres son:'+cadena. document. document.write('<br>'). document.write('<br>'). if (cadena. (Palabra que se lee de igual manera de adelante hacia atrás.

Debe aparecer: La mañana está fría. e) Imprimir la cantidad de vocales almacenadas.. Vamos a hacer en problema muy sencillo empleando el lenguaje JavaScript. Nosotros podemos acceder posteriormente desde JavaScript a dichos objetos. Esta posibilidad de hacer pequeños programas que se ejecutan en el navegador.. mostraremos un contador: <html> <head> </head> <body> <script language="JavaScript"> var contador=0. etc. </TEXTAREA> button <INPUT TYPE="button"> submit <INPUT TYPE="submit"> reset <INPUT TYPE="reset"> checkbox <INPUT TYPE="checkbox"> radio <INPUT TYPE="radio"> select <SELECT> . Nuestra actividad en JavaScript es procesar los eventos que generan estos controles (un evento es una acción que se dispara.c) Imprimirlo en forma inversa. El uso de JavaScript en los formularios HTML se hace fundamentalmente con el objetivo de validar los datos ingresados.. 7 – Codifique un programa que permita cargar una oración por teclado. d) Imprimir cada caracter del String separado con un guión. Formularios y Eventos. Por ejemplo si cargo: La mañana está fría. por ejemplo si se presiona un botón)... dispondremos un botón y cada vez que se presione.. El objeto principal es el FORM que contendrá todos los otros objetos: TEXT (editor de líneas). </SELECT> hidden <INPUT TYPE="hidden"> El navegador crea un objeto por cada control visual que aparece dentro de la página. Suponemos que conoce las marcas para la creación de formularios en una página web: form <FORM> . Se hace esta actividad en el cliente (navegador) para desligar de esta actividad al servidor que recibirá los datos ingresados por el usuario. alert('El contador ahora vale :' + contador). </FORM> text <INPUT TYPE="text"> password <INPUT TYPE="password"> textarea <TEXTAREA> . Página 222 . evitan intercambios innecesarios entre el cliente y el servidor (navegador y sitio web). luego mostrar cada palabra ingresada en una línea distinta. TEXTAREA (editor de varias líneas). function incrementar() { contador++. 24.

var ed=document. BUTTON y TEXT. Mostrar un mensaje indicando qué botón se presionó.form1. 25.form1.edad. dicha función se ejecuta cuando se dispara el evento respectivo. La función alert crea una ventana que puede mostrar un mensaje. Página 223 . Controles FORM. Hasta ahora hemos visto como crear un formulario con controles de tipo BUTTON. } </script> <form> <input type="button" onClick="incrementar()" value="incrementar"> </form> </body> </html> Practica: Crear un formulario con tres botones con las leyendas "1". function incrementar() { contador++. Agregamos un control de tipo TEXT (permite al operador cargar caracteres por teclado). Con un ejemplo veremos estos controles: Confeccionar un formulario que permita ingresar el nombre y edad de una persona: <html> <head></head> <body> <script language="JavaScript"> function mostrar() { var nom=document. En este caso cada vez que presionamos el botón. en la misma incrementamos la variable contador en uno. Hay que tener en cuenta que a la variable contador la definimos fuera de la función para que no se inicialice cada vez que se dispara el evento.value. alert('El contador ahora vale :' + contador).value.nombre. alert('Ingreso el nombre:' + nom). "2" y "3". Ejemplo: <html> <head> </head> <body> <script language="JavaScript"> var contador=0. se llama a la función incrementar.} </script> <form> <input type="button" onClick="incrementar()" value="incrementar"> </form> </body> </html> A los eventos de los objetos HTML se les asocia una función. Ahora veremos la importancia de definir un NAME a todo control de un formulario.

2 TEXT. alert('Ingreso el nombre:' + nom). } </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.alert('Y la edad:' + ed).form1. } </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 Página 224 . Para hacer más clara la función guardamos en dos variables auxiliares los contenidos de los controles de tipo TEXT. lo accedemos por el NAME que le dimos al formulario. lo accedemos nuevamento por su NAME. luego. en este caso: form1.edad.nombre.value. a cada control que contiene el formulario.edad. es decir: nombre y edad respectivamente. Por último.value. El evento que se dispara al presionar el botón se llama mostrar. Ejemplo: <html> <head></head> <body> <script language="JavaScript"> function mostrar() { var nom=document. luego.form1. var ed=document. La función 'mostrar' accede a los contenidos de los dos controles de tipo TEXT: var nom=document. para acceder a las cadenas cargadas debemos indicar la propiedad value. 1 BUTTON. al formulario que hemos creado.form1.value. Hay que tener en cuenta que a nuestra página la accedemos por medio del objeto: document. alert('Y la edad:' + ed).value.form1.nombre. var ed=document.

Cargar un nombre y un apellido en sendos text.form1. es decir. es fundamental para el ingreso de claves y para que otros usuarios no vean los caracteres que tipeamos.value Normalmente.form1.length<5) { alert("Ingrese al menos 5 caracteres").length<5) Ejemplo: <HTML> Página 225 . pero realmente en memoria se almacenan los caracteres tipeados.form1.text1.1 . Control PASSWORD Esta marca es una variante de la de tipo "TEXT". 3 . Si necesitamos saber la cantidad de caracteres que tiene un string accedemos a la propiedad length que retorna la cantidad de caracteres. 2 . Ejemplo: Codificar una página que permita ingresar una password y luego muestre una ventana de alerta si tiene menos de 5 caracteres. a este valor no lo mostraremos dentro de la página. } } </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 edición sólo vemos asteriscos.form1. if (document.text1. La diferencia fundamental es que cuando se carga un texto en el campo de edición sólo muestra asteriscos en pantalla.Cargar dos números en objetos de tipo text y al presionar un botón.text1.value. document.value. concatenarlos y mostrarlos en un tercer text (Tener en cuenta que podemos modificar la propiedad value de un objeto TEXT cuando ocurre un evento).Crear un programa que permita cargar un entero en un text y al presionar un botón nos muestre dicho valor elevado al cubo (emplear la función alert). por ejemplo. Al presionar un botón.text1. mostrar el mayor. 26. <HTML> <HEAD> <SCRIPT LANGUAGE="JavaScript"> function validar() { if (document. La mayoría de las veces este dato se procesa en el servidor. Si queremos mostrar los caracteres ingresados debemos acceder a: document. sino se perdería el objetivo de este control (ocultar los caracteres tipeados).value="". Pero podemos en el cliente (es decir en el navegador) verificar si ha ingresado una cantidad correcta de caracteres.

form1.Disponer dos campos de texto tipo password. } } </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 .options[document. Tener en cuenta que podemos emplear el operador == para ver si dos string son iguales.text1. Y por último con esta expresión accedemos al valor asociado al string: document.selectedIndex].text Es decir que el objeto select1 tiene otra propiedad llamada options.form1. Cuando se presione un botón mostrar si las dos claves ingresadas son iguales o no (es muy común solicitar al operador el ingreso de dos veces de su clave para validar si la tipeó correctamente.length<5) { alert("Ingrese al menos 5 caracteres"). 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).select1.value.options[document.select1.form1.selectedIndex]. Para determinar la posición del índice seleccionado en la lista: document.form1. document.value="". al string de una determinada posición. Control SELECT Este otro objeto visual que podemos disponer en un FORM permite realizar la selección de un string de una lista y tener asociado al mismo un valor no visible.select1.select1.text1.value Un ejemplo completo que muestra el empleo de un control SELECT es: <html> <head> Página 226 . 27.select1.form1.form1. a la que accedemos por medio de un subíndice. Para determinar el string seleccionado: document. Esto lo hacemos cuando ocurre el evento OnChange. El objetivo fundamental en JavaScript es determinar qué elemento está seleccionado y qué valor tiene asociado.selectedIndex Considerando que el objeto SELECT se llama select1 accedemos a la propiedad selectedIndex (almacena la posición del string seleccionado de la lista. numerando a partir de cero). esto se hace cuando se crea una password para el ingreso a un sitio o para el cambio de una existente).form1.<HEAD> <SCRIPT LANGUAGE="JavaScript"> function validar() { if (document.

document.select1.selectedIndex].select1. } </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> Página 227 .</head> <body> <script language="JavaScript"> function cambiarColor() { document.options [document.form1.select1.value = document.selectedIndex. Por cada opción del objeto SELECT tenemos una línea: Rojo Donde Rojo es el string que se visualiza en el objeto SELECT y value es el valor asociado a dicho string. } </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> Número 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 creación del objeto SELECT en HTML. Es importante para el objeto SELECT definir qué función llamar cuando ocurra un cambio: onChange="cambiarColor()".text.value.selectedIndex].form1.options[document.form1.form1.form1.value = document.text3.text.value = document.text2.options [document.value.options[document.text1. document. document.form1.select1. document.selectedIndex.value = document. Analizando la función cambiarColor() podemos ver cómo obtenemos los valores fundamentales del objeto SELECT.select1.text2.form1.form1. y cómo acceder luego a sus valores desde JavaScript.select1.form1.value = document.form1.form1.form1.select1.form1.form1.select1. Ejemplo: <html> <head> </head> <body> <script language="JavaScript"> function cambiarColor() { document.form1.text3.value = document.select1.selectedIndex].selectedIndex].text1.form1.select1.

Al presionar un botón mostrar la cantidad de respuestas correctas e incorrectas (Disponer 4 preguntas y sus respectivos controles SELECT). Samsung 17' .$350. Utilizar un objeto de la clase SELECT para la selección de la pizza.Confeccionar una página que permita seleccionar una pizza y la cantidad de unidades. <html> <head> </head> <body> <script language="JavaScript"> function contarSeleccionados() { var cant=0. mostrar en un objeto de tipo TEXT el precio de la misma. 800 Gb .Generar un presupuesto de un equipo de computación a partir de tres objetos de tipo SELECT que nos permiten seleccionar: Procesador (Pentium III .Confeccionar una página que muestre un objeto SELECT con distintos tipos de pizzas (Jamón y Queso. Pentium III) y el valor asociado a dicho string (Ej. 28. Para conocer su funcionamiento y ver como podemos acceder a su estado desde JavaScript haremos un pequeña página. 400). Especial: $ 10.Número 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 . Samsung 15' .$250.$550) Disco Duro(80 Gb . 2 .$500) Para cada característica indicamos string a mostrar (Ej. 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. Control CHECKBOX El control CHECKBOX es el cuadradito que puede tener dos estados (seleccionado o no seleccionado).Confeccionar una página que permita tomar un examen múltiple choice.$440. Al presionar un botón "Calcular" mostrar el presupuesto en un objeto de tipo TEXT. Morrones). 240 Gb . Luego mostrar un mensaje indicando la cantidad de lenguajes que ha seleccionado el operador. Ejemplo: Confeccionar una página que muestre 4 lenguajes de programación que el usuario puede seleccionar si los conoce.$300. Monitor (Samsung 14' . pudiendo ser: Queso: $ 4.$400. Luego al presionar un botón calcular el importe a pagar. Pentium IV $500). Página 228 . Al seleccionar una. Se debe mostrar una pregunta y seguidamente un objeto SELECT con las respuestas posibles. 3 . Muzzarella. 4 . Jamón y queso: $ 6.

checked) cant++. } </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. alert('Conoce ' + cant + ' lenguajes').form1.Net Página 229 .checked) cant++.lenguaje3. if (document.lenguaje3.lenguaje2.checked) cant++. Mostramos finalmente el resultado final.lenguaje1. if (document.checked) cant++.if (document.lenguaje4.form1. Disponemos un 'if' para cada checkbox: if (document. alert('Conoce ' + cant + ' lenguajes').checked) cant++.checked) cant++. if (document.lenguaje1. } </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. if (document.form1.checked) cant++. Ejemplo: <html> <head> </head> <body> <script language="JavaScript"> function contarSeleccionados() { var cant=0.form1.Net <br> <input type="button" value="Mostrar" onClick="contarSeleccionados()"> </form> </body> </html> Cuando se presiona el botón se llama a la función JavaScript contarSeleccionados().checked) cant++. if (document. if (document. En la misma verificamos uno a uno cada control checkbox accediendo a la propiedad checked que almacena true o false según esté o no seleccionado el control. if (document.checked) cant++.form1.form1.lenguaje2.form1.lenguaje4.lenguaje1.form1. Al contador 'cant' lo definimos e inicializamos en cero previo a los cuatro if.form1.

<br> <input type="button" value="Mostrar" onClick="contarSeleccionados()"> </form> </body> </html> Practica: Confeccionar una página que muestre tres checkbox que permitan seleccionar los deportes que practica el usuario (Futbol.form1. Sólo uno puede estar seleccionado del conjunto. 29.estudios[0]. Control RADIO Los objetos RADIO tienen sentido cuando disponemos varios elementos. } </script> <form name="form1"> <input type="radio" name="estudios" value="sin estudios">Sin estudios <br> <input type="radio" name="estudios">Primarios <br> <input type="radio" name="estudios">Secundarios <br> <input type="radio" name="estudios">Universitarios <br> <input type="button" value="Mostrar" onClick="mostrarSeleccionado()"> </form> </body> </html> Es importante notar que todos los objetos de tipo RADIO tienen el mismo name.estudios[1]. if (document. Ejemplo: Mostrar cuatro objetos de tipo RADIO que permitan seleccionar los estudios que tiene un usuario: <html> <head> </head> <body> <script language="JavaScript"> function mostrarSeleccionado() { if (document.checked) alert('no tienes estudios').form1. Basket.checked) alert('no tienes estudios').estudios[3].checked) alert('tienes estudios universitarios'). if (document. según esté o no seleccionado el control radio.estudios[0]. Igual que el checkbox.form1. Ejemplo: <html> <head> </head> Página 230 .checked) alert('tienes estudios secundarios').form1.estudios[2].checked) alert('tienes estudios primarios'). la propiedad checked retorna true o false. Tennis) Mostrar al presionar un botón los deportes que a elegido. Luego podemos acceder a cada elemento por medio de un subíndice: if (document. if (document.form1.

form1.form1.estudios[3].checked) alert('no tienes estudios').form1. 30.form1. } </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 página que muestre dos objetos de la clase RADIO solicitando que seleccione si es mayor de 18 años o no./textarea&gt. } </script> <form name="form1"> &lt.form1. else alert('datos correctos').curriculum. rows="10" cols="50" &gt. salvo que permite el ingreso de muchas líneas de texto. if (document.estudios[0]. Control TEXTAREA Este control es similar al control TEXT.length>2000) alert('curriculum muy largo'). Mostrar un mensaje si el curriculum supera los 2000 caracteres.estudios[2].curriculum&quot.&lt. if (document.checked) alert('tienes estudios primarios').<body> <script language="JavaScript"> function mostrarSeleccionado() { if (document. <html> <head> </head> <body> <script language="JavaScript"> function controlarCaracteres() { if (document. Al presionar un botón mostrar que radio está seleccionado. if (document.estudios[1].value. Ejemplo: Solicitar la carga del mail y el curriculum de una persona. <br> <input type="button" value="Mostrar" onClick="controlarCaracteres()"> </form> </body> Página 231 .checked) alert('tienes estudios universitarios').textarea name=&quot.checked) alert('tienes estudios secundarios'). La marca TEXTAREA en HTML tiene dos propiedades: rows y cols que nos permiten indicar la cantidad de filas y columnas a mostrar en pantalla.

value. su mail y los comentarios (TEXTAREA). Cuando el control tome foco borrar el contenido actual.value). } </script> <form name="form1"> Ingrese su nombre: <input type="text" name="nombre" onFocus="vaciar(this)" onBlur="verificarEntrada(this)"><br> Página 232 .value=='') alert('Debe ingresar datos'). Eventos onFocus y onBlur El evento onFocus se dispara cuando el objeto toma foco y el evento onBlur cuando el objeto pierde el foco.length>2000) alert('curriculum muy largo').value.</html> Para saber el largo de la cadena cargada: if (document.form1.curriculum. else alert('datos correctos'). mostrar un mensaje de alerta si el mismo está vacío. solicitar ingresar el nombre de una persona. } </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 página de visitas a un sitio. Ejemplo: <html> <head> </head> <body> <script language="JavaScript"> function controlarCaracteres() { if (document.curriculum.length>2000) accedemos a la propiedad length. } function verificarEntrada(control) { if (control.form1. Mostrar luego llamando a la función alert los datos ingresados. 31. Tener en cuenta que para acceder a las cadenas cargadas haremos: alert(document.comentarios. Ejemplo: Implementar un formulario que solicite la carga del nombre y la edad de una persona.form1. al abandonar el mismo.value=''. <html> <head></head> <body> <script language="JavaScript"> function vaciar(control) { control.

en caso de tener un string vacío procedemos a mostrar una ventana de alerta. accedemos a la propiedad value y borramos su contenido. Eventos onMouseOver y onMouseOut El evento onMouseOver se ejecuta cuando pasamos la flecha del mouse sobre un hipervínculo y el evento onMouseOut cuando la flecha abandona el mismo. Le indicamos. para el evento onBlur llamamos a la función verificarEntrada donde analizamos si se ha ingresado algún valor dentro del control. En la función propiamente dicha. De forma similar. } </script> <form name="form1"> Ingrese su nombre: <input type="text" name="nombre" onFocus="vaciar(this)" onBlur="verificarEntrada(this)"><br> Ingrese su edad: <input type="text" name="edad" onFocus="vaciar(this)" onBlur="verificarEntrada(this)"><br> <input type="button" value="Confirmar"> </form> </body> </html> Practica: Solicitar que se ingrese el nombre y la clave de un usuario. Implementaremos una función que cambie el color con un valor que llegue como parámetro.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. Para probar estos eventos implementaremos una página que cambie el color de fondo del documento. pasando como parámetro la palabra clave this que significa la dirección del objeto que emitió el evento. } function verificarEntrada(control) { if (control. Mostrar una ventana de alerta si en la clave se ingresan menos de 7 caracteres o más de 20. 32.value=='') alert('Debe ingresar datos').value=''. Cuando retiramos la flecha del mouse volvemos a pintar de blanco el fondo del documento: <html> <head></head> Página 233 . Ejemplo: <html> <head></head> <body> <script language="JavaScript"> function vaciar(control) { control. para el evento onFocus la función vaciar.

bgColor=col.'#ffffff')">azul</td> </tr> </table> </body> </html> La lógica es bastante parecida a la del primer problema. pero en éste.'#0000ff')" onMouseOut="pintar(this.html">ver segundo problema</a> </body> </html> Las llamadas a las funciones las hacemos inicializando las propiedades onMouseOver y onMouseOut: <a href="pagina1.'#ffffff')">verde</td> <td onMouseOver="pintar(this. } </script> <table border="1"> <tr> <td onMouseOver="pintar(this. la referencia a la casilla que queremos que se coloree (this): <td onMouseOver="pintar(this.html" onMouseOver="pintar('#ff0000')" onMouseOut="pintar('#ffffff')">Rojo</a> <a href="pagina1.html <html> Página 234 . function pintar(col) { document. le pasamos como parámetro a la función.'#ffffff')">rojo</td> <td onMouseOver="pintar(this. } </script> <a href="pagina1.col) { objeto.html" onMouseOver="pintar('#0000ff')" onMouseOut="pintar('#ffffff')">Azul</a> <br> <br> <br> <a href="pagina2.'#ff0000')" onMouseOut="pintar(this.<body> <script language="JavaScript"> function pintar(col) { document.html" onMouseOver="pintar('#00ff00')" onMouseOut="pintar('#ffffff')">Verde</a> <a href="pagina1. } 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.'#00ff00')" onMouseOut="pintar(this.bgColor=col.'#ffffff')">rojo</td> Ejemplo: Pagina1.bgColor=col.'#ff0000')" onMouseOut="pintar(this.html" onMouseOver="pintar('#ff0000')" onMouseOut="pintar('#ffffff')">Rojo</a> La función 'pintar' recibe el color e inicializa la propiedad bgColor del objeto document.

Evento onLoad El evento onLoad se ejecuta cuando cargamos una página en el navegador. Este evento está asociado a la marca body.'#ffffff')">rojo</td> <td onMouseOver="pintar(this.bgColor=col.col) { objeto.'#0000ff')" onMouseOut="pintar(this. } </script> <a href="pagina1.html" onMouseOver="pintar('#0000ff')" onMouseOut="pintar('#ffffff')">Azul</a> <br> <br> <br> <a href="pagina2. hotmail y yahoo) 33.'#ff0000')" 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 hipervínculos a distintos programas que administran web-mail (gmail.html" onMouseOver="pintar('#ff0000')" onMouseOut="pintar('#ffffff')">Rojo</a> <a href="pagina1.'#ffffff')">verde</td> <td onMouseOver="pintar(this. para que el operador no tenga que activar con el mouse dicho control.html">ver segundo problema</a> </body> </html> Pagina2.'#00ff00')" onMouseOut="pintar(this. } </script> <table border="1"> <tr> <td onMouseOver="pintar(this.html <html> <head></head> <body> <script language="JavaScript"> function pintar(objeto.bgColor=col. Uno de los usos más frecuentes es para fijar el foco en algún control de un formulario.html" onMouseOver="pintar('#00ff00')" onMouseOut="pintar('#ffffff')">Verde</a> <a href="pagina1. La página completa es: <html> <head></head> <body onLoad="activarPrimerControl()"> <script language="JavaScript"> Página 235 .<head></head> <body> <script language="JavaScript"> function pintar(col) { document.

} Ejemplo: <html> <head></head> <body onLoad="activarPrimerControl()"> <script language="JavaScript"> function activarPrimerControl() { document. Podemos especificar el tamaño de la ventana. etc.form1.focus(). } </script> <form name="form1"> Ingrese su nombre: <input type="text" name="nombre"><br> Ingrese su edad: <input type="text" name="edad"><br> <input type="button" value="Confirmar"> </form> </body> </html> Practica: Confeccionar una función que mueva la ventana a la coordenada (20.nombre.function activarPrimerControl() { document. } </script> <form name="form1"> Ingrese su nombre: <input type="text" name="nombre"><br> Ingrese su edad: <input type="text" name="edad"><br> <input type="button" value="Confirmar"> </form> </body> </html> En la marca body inicializamos el evento onLoad con la llamada a la función activarPrimerControl: <body onLoad="activarPrimerControl()"> La función da el foco al control text donde se cargará el nombre: function activarPrimerControl() { document.form1. open y close: abre o cierra una ventana del navegador.nombre. Al objeto window lo hemos estado usando constantemente. su contenido.20) cuando se cargue la página (la función que desplaza la ventana del navegador a una determinada coordenada se llama moveTo y tiene dos parámetros que indican la columna y la fila en pixeles. 34.focus(). El objeto window.focus(). window es un objeto global y tiene los siguienes métodos: alert: Muestra un diálogo de alerta con un mensaje (a esta responsabilidad la hemos utilizado desde los primeros temas) prompt: Muestra un diálogo para la entrada de un valor de tipo string (utilizado desde el primer momento) confirm: Muestra un diálogo de confirmación con los botones Confirmar y Cancelar. Representa la ventana del navegador. Página 236 .form1.nombre.

Para reducir la cantidad de caracteres que se tipean normalmente encontraremos los programas tipeados de la segunda forma. propiedades) Permite crear (y abrir) una nueva ventana.menubar=yes'). sino simplemente invocamos el método: el navegador automáticamente sabrá que pertenece al objeto window. Página 237 .document. ventana. } function mostrarAlerta() { alert("Esta ventana de alerta ya la utilizamos en otros problemas.[Variable=][window. o valor=prompt("Ingrese valor".''. El parámetro URL es una cadena que contendrá la dirección de la ventana que estamos abriendo: si está en blanco. seguida del método o en forma resumida indicando solamente el nombre del método (como lo hemos estado haciendo).write("Estoy escribiendo en la nueva ventana<br>"). ventana.").write("Segunda linea"). la ventana se abrirá con una página en blanco.document. separada por comas. // podemos escribir window. 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 anteponiéndole el nombre del objeto window.width=400.document.""). Las propiedades son una lista. } function abrir() { var ventana=open(). Si queremos tener acceso a ella desde la ventana donde la creamos.close().write("Esto es lo primero que aparece<br>").prompt("Ingrese valor". } function confirmar() { var respuesta=confirm("Presione alguno de los dos botones"). } function abrirParametros() { var ventana=open(''. deberemos asignarle una variable. Ej: valor=window.height=250. ventana. El siguiente programa muestra varios de los métodos disponibles del objeto window: <HTML> <HEAD> <SCRIPT LANGUAGE="JavaScript"> function cerrar() { close().]open(URL. esto es posible ya que el objeto window es el objeto de máximo nivel.""). nombre. if (respuesta==true) alert("presionó aceptar").'status=yes.

alert("Usted ingreso "+cad). } function mostrarAlerta() { alert("Esta ventana de alerta ya la utilizamos en otros problemas.document. if (respuesta==true) Página 238 . ventana. } function abrirParametros() { var ventana=open(''.'status=yes. // podemos escribir window.menubar=yes').<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 parámetros" 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().write("Estoy escribiendo en la nueva ventana<br>").''.write("Esto es lo primero que aparece<br>").else alert("presionó cancelar").close().document.width=400.").document. ventana. } function abrir() { var ventana=open(). } </SCRIPT> </HEAD> <BODY> Este programa permite analizar la llamada a distintas responsabilidades del objeto window. ventana. } function confirmar() { var respuesta=confirm("Presione alguno de los dos botones").height=250.write("Segunda linea"). } function cargarCadena() { var cad=prompt("cargue una cadena:"."").

alert("presionó aceptar").<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 parámetros" 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 página que permita abrir otra ventana cuando se presiona un botón. y debe mostrar el menú y su barra de herramientas. else alert("presionó cancelar"). alert("Usted ingreso "+cad). Propiedad location del objeto window El objeto location colabora directamente con el objeto window: Página 239 .""). } </SCRIPT> </HEAD> <BODY> Este programa permite analizar la llamada a distintas responsabilidades del objeto window. 35. } function cargarCadena() { var cad=prompt("cargue una cadena:". Dicha ventana debe tener como ancho 600 pixeles y alto 300 pixeles.

confirm('Es mayor de edad?')) window. else window. else window. Implementaremos un pequeño ejemplo para ver la utilidad de esta propiedad: Supongamos que tenemos un hipervínculo que al ser presionado muestre una vetana de confirmación. la función confirm retorna true y por lo tanto se ejecuta el verdadero del if: if (window. en caso contrario mostramos un mensaje: <html> <head> </head> <body> <script language="javascript"> function verificarMayorEdad() { if (window. el nombre de la función: <a href="javascript:verificarMayorEdad()"> La función verificarMayorEdad muestra la ventana con los botones confirmar y cancelar (recordar que el método confirm del objeto window hace esto en forma automática). Si se presiona el botón confirmar.location='pagina2. el navegador redirecciona a dicha página. si queremos ingresar a un sitio para mayores.Cuando le asignamos una nueva dirección a la propiedad location del objeto window. Recordar que anteceder la palabra window a estas funciones y propiedades es opcional.html'. } </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 función de javascript desde un hipervínculo debemos anteceder la palabra javascript seguida de dos puntos y por último.html <html> <head> </head> <body> <script language="javascript"> function verificarMayorEdad() Página 240 .confirm('Es mayor de edad?')) window. En caso que el visitante presione el botón afirmativo.html'. Por último la página que se redirecciona es: <html> <head> <title>Problema</title> </head> <body> Bienvenido al sitio para adultos. </body> </html> Ejemplo: Pagina1. redireccionamos a otra página.alert('Cuando sea mayor de edad podrá ingresar').alert('Cuando sea mayor de edad podrá ingresar').location='pagina2.

else window. Si se genera el 0 llamar al webmail de hotmail... .alert('Cuando sea mayor de edad podrá ingresar').html <html> <head> <title>Problema</title> </head> <body> Bienvenido al sitio para adultos. Para generar un valor aleatorio utilizar la función random del objeto Math.random()*3.. //se guarda en num un valor comprendido entre 0. var num. //guardamos solo la parte entera de la variable num if (num==1) window.hotmail.com'. } </script> <a href="javascript:verificarMayorEdad()">Ingresar al sitio para mayores</a> </body> </html> Pagina2..location='http://www. num=Math.00001 y 2.location='pagina2. Cuando se presione dicho hipervínculo generar un valor aleatorio entre 0 y 2. si se genera un 1 llamar a gmail en caso de generarse un 2 llamar a yahoo.99999 num=parseInt(num). </body> </html> Practica: Confeccionar una página que tenga un hipervínculo.confirm('Es mayor de edad?')) window.html'. Propiedad history del objeto window El objeto history colabora directamente con el objeto window: Página 241 . 36.{ if (window.

html">Ir a la página 2</a> <br> <br> <a href="javascript:avanzar()">Extraer del cache la segunda página</a> </body> </html> En esta primera página. window. La segunda página: <html> <head> <title>Problema</title> <script languge="javascript"> function retornar() { window. } </script> </head> <body> <a href="pagina2. retrocedemos a la primera página sin tener la necesidad de recargarla. debemos cargar la segunda página seleccionando el hipervínculo pagina2.go(-1). mediante el método go y pasándole un valor negativo.go(1). tiene el mismo comportamiento que presionar el botón "Atrás" del navegador. //Retrocede a la página anterior window.history. //Avanza a la página siguiente almacenada en la cache de la máquina.history.El objeto history almacena todas las páginas que visitamos.history. Luego. else alert('no hay otra página en la cache hacia adelante'). Ejemplo: Pagina1. } </script> </head> <body> <a href="javascript:retornar()">Retornar</a> </body> </html> En la segunda página. con una serie de funciones. la primera vez.length>0) window.back().html <html> Página 242 .forward().history. //Avanza o retrocede en la lista de páginas visitadas. Llamar a la función back. sin tener que pedirlas nuevamente al servidor. podemos extraer de la memoria de la computadora las páginas ya visitadas. Cuenta con las siguientes funciones: window.go(1).go().history. Ejemplo: El siguiente ejemplo nos permite cargar una segunda página y luego retroceder a la primera página sin tener que solicitarla nuevamente al servidor: <html> <head> <title>Problema</title> <script language="javascript"> function avanzar() { window.history.history. Podemos mejorar el ejemplo accediendo al atributo length (almacena la cantidad de páginas de la lista) del objeto history: if (window.

la tercera página debe retroceder a la primera página mediante el método go del objeto history (pasándole un número negativo como parámetro). Propiedad screen del objeto window El objeto screen colabora directamente con el objeto window: Página 243 .history. } </script> </head> <body> <a href="pagina2.history.go(1).html">Ir a la página 2</a> <br> <br> <a href="javascript:avanzar()">Extraer del cache la segunda página</a> </body> </html> Pagina2.html <html> <head> <title>Problema</title> <script languge="javascript"> function retornar() { window. el hipervínculo de la segunda página debe cargar la tercera página y por último. uno en cada página.<head> <title>Problema</title> <script language="javascript"> function avanzar() { window.go(-1). Disponer tres hipervínculos. } </script> </head> <body> <a href="javascript:retornar()">Retornar</a> </body> </html> Practica: Confeccionar tres páginas. Configurar el primer hipervínculo con la dirección de la segunda página. 37.

height + '<br>').El objeto screen ofrece información acerca del monitor donde se está ejecutando el navegador. 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. Página 244 .availHeight + '<br>'). La propiedades principales del objeto screen son: availHeight : El alto de la pantalla en pixeles disponible para el navegador. Ayuda: Confeccionar una función que se dispare para el evento onLoad de la marca Body: <body onLoad="redimensionar()"> La función redimensionar debe llamar a la función resizeTo del objeto window: window. document. document. document.write('colorDepth :' + screen.write('Valores de las propiedades del objeto screen:<br>'). availWidth : El ancho de la pantalla en pixeles disponible para el navegador.availWidth + '<br>'). height : El alto de la pantalla en pixeles. </script> </body> </html> No olvidar que el objeto screen es una propiedad del objeto window. document.write('height :' + screen. document. por lo que haber dispuesto la sintaxis: window.availWidth + '<br>'). width : El ancho de la pantalla en pixeles.colorDepth).width + '<br>'). es la forma más completa. document.write('width :' + screen. document.screen. document. colorDepth : Representa el número de bits usados para representar los colores.write('height :' + screen. Ejemplo: <html> <head> <title>Problema</title> </head> <body> <script language="javascript"> document. pero más tediosa de escribir (recordar que el objeto window es el principal y lo podemos obviar cuando accedemos a sus propiedades o métodos).resizeTo(640.write('Valores de las propiedades del objeto screen:<br>').write('availWidth :' + screen. </script> </body> </html> Practica: PROBLEMAS 1 .colorDepth).write('colorDepth :' + screen.height + '<br>').availHeight + '<br>').write('availWidth :' + screen. document.write('width :' + screen. document.write('availHeight :' + screen.width etc.width + '<br>').write('availHeight :' + screen.Confeccionar un programa que agrande el tamaño de la ventana del navegador y ocupe toda la pantalla.480).

window. window. document.) Las propiedades comunes a estos navegadores son: appName : almacena el nombre oficial del navegador. izquierda y derecha.? . platform : almacena la plataforma donde el navegador se está ejecutando. Aca también tenemos que utilizar otra función del objeto window llamada moveTo (desplaza la ventana del navegador a una determinada fila y columna de la pantalla): function redimensionar() { window.resizeTo(window.write('Valores de las propiedades del objeto navigator:<br>'). document. document.plugins. </script> </body> </html> Ejemplo: <html> <head> <title>Problema</title> </head> <body> <script language="javascript"> document.appVersion + '<br>'). Este pequeño programa muestra los valores de las propiedades antes anunciadas: <html> <head> <title>Problema</title> </head> <body> <script language="javascript"> document.moveTo(50.Si ejecutamos esto. document.write('appName :' + navigator.write('plugins :' + navigator. abajo.height .appName + '<br>'). 2 .write('plugins :' + navigator.appName + '<br>').cookieEnabled + '<br>').length + '<br>'). document.screen. Opera.write('cookieEnabled :' + navigator. document.length + '<br>'). document.write('appVersion :' + navigator. FireFox.Confeccionar un programa que cuando muestre la página. appVersion : almacena la versión del navegador. redimensione la ventana del navegador y la centre en la pantalla dejando 50 pixeles arriba. document. Propiedad navigator del objeto window Contiene información sobre el navegador web.screen.write('appVersion :' + navigator. cookieEnabled : almacena si las cookies están activas en el navegador.cookieEnabled + '<br>'). } Qué valor debemos disponer en los signos de interrogación ? 38. etc.write('Valores de las propiedades del objeto navigator:<br>').50).?). plugins : almacena un array de los plugin cargados en el navegador. Pintar el fondo del navegador de rojo si el navegador es el Internet Página 245 . </script> </body> </html> Practica: Explorer.width . La implementación de este objeto varía entre navegadores (IExplorer.plugins.write('appName :' + navigator. el tamaño de la ventana del navegador se redimensionará tomando como ancho el valor 640 y como alto 480.appVersion + '<br>').write('cookieEnabled :' + navigator.

.write('<br>').Crear un archivo con extensión *. Esto trae muchos beneficios: .getHours()+':'+fecha.js) El lenguaje JavaScript permite agrupar funciones y disponerlas en un archivo separado a la página HTML.getDate()+'/'+(fecha.Creamos un archivo html que utilizará las funciones contenidas en el archivo *. var cadena=fecha.getMonth()+1)+'/'+fecha. en nuestro ejemplo llamamos a las funciones retornarFecha() y retornarHora().html Página 246 .getYear().bgColor='#ff0000'. Ejemplo: Pagina1. document. a las funciones que contiene el archivo externo *.Para cambiar el color de fondo debemos acceder a la propiedad bgColor del objeto document: document. . return cadena. el archivo html queda mucho más limpio. No tenemos que copiar y pegar sucesivamente las funciones en las páginas en las que necesitamos. Como podemos ver.Facilita el mantenimiento de las funciones al encontrarse en archivos separados.Nos obliga a ser más ordenados.js. var cadena=fecha. } function retornarHora() { var fecha fecha=new Date(). 39. La mecánica para implementar estos archivos externos en JavaScript es: 1 .js: <script language="javascript" type="text/javascript" src="pagina2. document.js"></script> Mediante la propiedad src indicamos el nombre del archivo a importar.Reutilización de funciones en muchos archivos. Luego. } 2 . Archivo JavaScript externo (*.js"></script> </head> <body> <script language="javascript"> document. podemos llamar dentro de la página HTML.write('La fecha de hoy es:'+retornarFecha()).js: <html> <head> <title>Problema</title> <script language="javascript" type="text/javascript" src="pagina2.js y tipear las funciones en la misma: function retornarFecha() { var fecha fecha=new Date().getMinutes()+':'+fecha. return cadena.write('La hora es:'+retornarHora()). </script> </body> </html> Es decir debemos disponer el siguiente código para importar el archivo *.getSeconds().

return cadena.getMinutes()+':'+fecha. Luego. Pero el otro pilar de la programación orientada a objetos.write('La hora es:'+retornarHora()).getHours()+':'+fecha.getMonth()+1)+'/'+fecha. 40. document. Desarrollaremos una clase que represente un cliente de un banco.<html> <head> <title>Problema</title> <script language="javascript" type="text/javascript" src="pagina2. return cadena.write('La fecha de hoy es:'+retornarFecha()). var cadena=fecha. var cadena=fecha.getSeconds().js' que contiene la clase cliente con sus métodos (funciones) y sus atributos (variables): function cliente(nombre.getDate()+'/'+(fecha. La clase cliente tiene como atributos: nombre saldo y las responsabilidades o métodos de la clase son: Constructor (inicializamos los atributos del objeto) depositar extraer Para acostumbrarnos a trabajar en un archivo separado. Veremos la sintaxis para la declaración de una clase y la posterior definición de objetos de la misma. pero permite definir clases con sus atributos y responsabilidades.js function retornarFecha() { var fecha fecha=new Date().js"></script> </head> <body> <script language="javascript"> document.js) que solicite la carga del nombre de un usuario y lo retorne. Finalmente nos permite definir objetos de estas clases.write('<br>'). document.saldo) Página 247 . Programación orientada a objetos en JavaScript. no está implementada en el lenguaje. </script> </body> </html> Pagina2. } Practica: Confeccionar una funcion en un archivo externo (*.getYear(). El lenguaje JavaScript no es un lenguaje orientado a objetos completo. otra función que permita ingresar una clave y la muestre en la página. es decir la herencia. implementamos 'pagina2. } function retornarHora() { var fecha fecha=new Date().

Con la palabra clave 'this' diferenciamos los atributos de los parámetros (los atributos deben llevar la palabra clave this) this.saldo=saldo.depositar=depositar. this. } A esta función llegan como parámetro los valores con que queremos inicializar los atributos.saldo=saldo.depositar=depositar.saldo-dinero. this.nombre=nombre. } function extraer(dinero) { this.nombre=nombre.saldo=this. } El nombre de la clase coincide con el nombre de la función principal que implementamos (también llamado constructor de la clase): function cliente(nombre.extraer=extraer.nombre=nombre. Página 248 . También en el constructor inicializamos la referencia a todos los métodos que contendrá la clase: this.saldo) { this.extraer=extraer. } function extraer(dinero) { this.js" type="text/javascript"> </script> </head> <body> <script language="javascript"> var cliente1. } De nuevo recordemos que diferenciamos los atributos de la clase por la palabra clave this. this. cliente1=new cliente('diego'. this.saldo+dinero. implementamos todos los métodos de la clase: function depositar(dinero) { this.{ this.1200). this. this.saldo-dinero. } function depositar(dinero) { this.depositar=depositar.saldo=saldo.saldo+dinero. 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.saldo=this.saldo=this. Por último. this.extraer=extraer.saldo=this. this.

cliente1=new cliente('diego'.document. document.nombre+'<br>').1200).depositar(120).js" type="text/javascript"> </script> </head> <body> <script language="javascript"> var cliente1. document.write('Saldo actual:'+cliente1.write('Saldo actual:'+cliente1.saldo+'<br>'). </script> </body> </html> Recordemos que lo primero que hacemos.saldo+'<br>').extraer(1000). Página 249 .write('Nombre del cliente:'+cliente1.write('Saldo luego de depositar $120---->'+cliente1.saldo+'<br>'). cliente1.extraer(1000). entendibles y fundamentalmente. cliente1.write('Nombre del cliente:'+cliente1. según lo visto en conceptos anteriores.write('Saldo luego de extraer $1000---->'+cliente1. cliente1.write('Nombre del cliente:'+cliente1.js function cliente(nombre. De ahí en más podemos acceder a los atributos y llamar a los métodos del objeto cliente1 de la clase cliente: document. </script> </body> </html> Pagina2. poder reutilizar clases en distintos proyectos. Con el operador new se crea un objeto de la clase cliente y se llama inmediatamente el constructor de la clase.saldo+'<br>'). document.nombre=nombre.js: <script language="javascript" src="pagina2. document.extraer(1000).saldo+'<br>').write('Saldo luego de depositar $120---->'+cliente1. Similar a conceptos anteriores cuando definiamos objetos de la clase Date o Array. El constructor retorna una referencia del objeto que se almacena en la variable cliente1. document.saldo+'<br>'). document. Ejemplo: Pagina1. la sintaxis para la creación de un objeto de la clase cliente es: var cliente1. document. es importar el archivo *.1200).nombre+'<br>').nombre+'<br>'). Podemos decir que la ventaja que podemos obtener con el planteo de clases es hacer nuestros programas mucho más organizados.saldo+'<br>').write('Saldo actual:'+cliente1.saldo) { this. document.html <html> <head> <title>Problema</title> <script language="javascript" src="pagina2.saldo+'<br>').write('Saldo luego de extraer $1000---->'+cliente1. document.js" type="text/javascript"> Luego. cliente1.write('Saldo luego de extraer $1000---->'+cliente1. cliente1=new cliente('diego'.write('Saldo luego de depositar $120---->'+cliente1.depositar(120). cliente1.depositar(120). cliente1.saldo+'<br>'). document.

s.saldo+dinero. 41.js. } //clase bolillero ************************************************ function bolillero() { this.segundovalor(20).cargarnumero=cargarnumero. Por otra parte crearemos una clase bolillero que sortee un valor aleatorio entre 0 y 9 (que representa el valor extraido del bolillero).extraer=extraer. this.depositar=depositar. } Practica: Confeccionar una clase llamada suma. La definición de un objeto de la clase que deben plantear es: var s=new suma().numero==num) return true."").this.saldo=saldo. En JavaScript podemos definir varias clases en un mismo archivo *. Plantearemos una clase numeroquiniela que representa una persona que elige un número de quiniela y además registra su nombre.primervalor(10). cargarvalor2 y retornarresultado.numero=-1. } function extraer(dinero) { this. document. Vamos a desarrollar un programa que contenga dos clases. this.numero=prompt("Que número de quiniela quiere?". else return false. s. this.write('La suma de los dos valores es:'+s. Implementar la clase suma en un archivo separado.saldo-dinero. } function sortear() { Página 250 . } function verificarsigano(num) { if (this. valor2) y tres métodos: cargarvalor1.retornarresultado()). } function cargarnumero() { this. La codificación de las dos clases es: //clase numeroquiniela ************************************************ function numeroquiniela(nombre) { this. que contenga dos atributos (valor1.saldo=this. } function depositar(dinero) { this.nombre=nombre. la clase tiene por objetivo la carga por el teclado del número deseado.saldo=this. Definición de varias clases.

numeroquiniela1.nombre + ' a ganado <br>'). Por otro lado en la página html definimos dos objetos de la clase numeroquiniela y uno de la clase bolillero: <html> <head> <title>Problema</title> <script language="javascript" src="pagina2. numeroquiniela2=new numeroquiniela("ana").cargarnumero().numero + '<br>').write(numeroquiniela1.write(numeroquiniela1.random()*11.numero==bolillero. Página 251 . numeroquiniela1.nombre + ' a ganado <br>').nombre + ' eligió ' + numeroquiniela1.numero + '<br>'). if (numeroquiniela2.write(numeroquiniela2. var numeroquiniela2.numero) document. bolillero. bolillero=new bolillero(). numeroquiniela2. document.write('Numero sorteado:' + bolillero.numero) document.js" type="text/javascript"> </script> </head> <body> <script language="javascript"> var numeroquiniela1. document.numero +'<br>'). document. document. numeroquiniela2.html <html> <head> <title>Problema</title> <script language="javascript" src="pagina2. var bolillero. numeroquiniela1=new numeroquiniela("juan").numero +'<br>').numero=Math.nombre + ' eligió ' + numeroquiniela2.js" type="text/javascript"> </script> </head> <body> <script language="javascript"> var numeroquiniela1.sortear(). document.numero==bolillero. numeroquiniela2=new numeroquiniela("ana").cargarnumero().write(numeroquiniela2.numero +'<br>').sortear().write('Numero sorteado:' + bolillero. La clase numeroquiniela además tiene otra responsabilidad.cargarnumero().this. var bolillero. } Al constructor de la clase numeroquiniela llega como parámetro el nombre de la persona que la compra (podíamos cargarlo por teclado al nombre también). var numeroquiniela2. numeroquiniela1=new numeroquiniela("juan"). if (numeroquiniela1.write(numeroquiniela1. </script> </body> </html> Ejemplo: Pagina1.cargarnumero(). bolillero. que es avisarnos si a ganado según el número sorteado. Al número que selecciona lo cargamos por teclado. bolillero=new bolillero().nombre + ' eligió ' + numeroquiniela1.

} 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. Mostrar cuántas de esas personas están inhabilidadas para ingresar como trabajadores.numero=-1. this.js //clase numeroquiniela ************************************************ function numeroquiniela(nombre) { this.document.numero==bolillero."").nombre + ' a ganado <br>'). } function cargarnumero() { this. Con un ejemplo veremos la sintaxis para trabajar con los mismos. </script> </body> </html> Pagina2. if (numeroquiniela2. } //clase bolillero ************************************************ function bolillero() { this. } function sortear() { this. this. Vectores con componentes de tipo objeto.nombre=nombre.cargarnumero=cargarnumero.numero) document. Podemos crear vectores con componente de tipo objeto.titulo) { Página 252 . 42.numero) document.write(numeroquiniela2.nombre + ' a ganado <br>').sortear=sortear.numero==bolillero. if (numeroquiniela1. } function verificarsigano(num) { if (this.nombre + ' eligió ' + numeroquiniela2.numero==num) return true.numero +'<br>').numero=prompt("Que número de quiniela quiere?". Desarrollaremos una clase que represente un hipervínculo y luego definiremos un vector con componentes de tipo hipervinculo. else return false.write(numeroquiniela2. La clase hipervínculo es: function hipervinculo(direccion.numero=parseInt(Math.write(numeroquiniela1. Confeccionar en la página HTML un pequeño programa en JavaScript que defina 3 objetos de la clase persona y 1 de la clase empresa.random()*11).

this. vector[1]=new hipervinculo('http://www.f++) { document. vector[0]=new hipervinculo('http://www.write(vector[f].com'.write('<br>').js" type="text/javascript"></script> </head> <body> <script language="javascript"> var vector=new Array().msn.'yahoo').'google').f<vector.js" type="text/javascript"></script> </head> <body> <script language="javascript"> var vector=new Array().google.yahoo. document.retornarhipervinculo()). Ejemplo: Pagina1. vector[1]=new hipervinculo('http://www.com'.titulo) { Página 253 .'yahoo'). for(f=0.com'.write(vector[f]. cadena='<a href=' + this. } </script> </body> </html> Creamos un objeto de la clase Array y luego guardamos en cada componente un objeto de la clase hipervínculo (pasándole como parámetros al constructor.google.f++) { document.length. } function retornarhipervinculo() { var cadena.'msn').yahoo.com'.'msn').retornarhipervinculo=retornarhipervinculo. } Luego el archivo html que hace uso de la clase hipervínculo es: <html> <head> <title>Problema</title> <script language="javascript" src="pagina2.f<vector.js function hipervinculo(direccion. this.retornarhipervinculo()).msn. this.titulo + '</a>'. } </script> </body> </html> Pagina2.'google').direccion + '>' + this.html <html> <head> <title>Problema</title> <script language="javascript" src="pagina2.direccion=direccion. for(f=0.length. return cadena. vector[2]=new hipervinculo('http://www. la dirección del sitio y el texto a mostrar en la página.com'.com'. document. vector[2]=new hipervinculo('http://www.titulo=titulo. vector[0]=new hipervinculo('http://www.write('<br>'). Luego recorremos con un 'for' las componentes del vector e imprimimos en la página cada hipervínculo.

titulo=titulo.titulo + '</a>'. Imprimir el nombre de la persona de mayor edad. } function retornarhipervinculo() { var cadena. decir también si hay más de una persona con la edad mayor. Página 254 .this. return cadena. this. cadena='<a href=' + this.direccion + '>' + this. this.retornarhipervinculo=retornarhipervinculo.direccion=direccion. Luego definir un vector de 4 componentes de tipo persona. } Practica: Confeccionar una clase persona que permita almacenar el nombre y la edad.

Sign up to vote on this title
UsefulNot useful