Vous êtes sur la page 1sur 254

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. Contenido de la cabecera de la página (<meta>) .............................................. 43
Ejemplo: .................................................................................................................. 44
25. Comentarios dentro de una página <!-- --> ....................................................... 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. Formulario - input type="checkbox" ................................................................. 51
Ejemplo: .................................................................................................................. 51
31. Formulario - input type="radio" ....................................................................... 52
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. Formulario - input type="hidden"..................................................................... 61
Ejemplo: .................................................................................................................. 62
39. Formulario - agrupamiento de controles. ......................................................... 62
Ejemplo: .................................................................................................................. 63
Practica: .................................................................................................................. 63

Página 4
40. Formulario - controles con valores iniciales. ..................................................... 63
Practica: .................................................................................................................. 65
41. Formulario - orden de foco de controles. ......................................................... 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. Formulario - text/password/textarea y readonly .............................................. 69
Practica: .................................................................................................................. 70
45. Formulario - Envío de datos mediante mail. ..................................................... 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
54. Declaración DOCTYPE. HTML Transitional......................................................... 91
Ejemplo: .................................................................................................................. 92
Practica: .................................................................................................................. 92
55. Declaración DOCTYPE. HTML Estricto ............................................................... 92
Ejemplo: .................................................................................................................. 95
Practica: .................................................................................................................. 95
56. Declaración DOCTYPE. para Frames .................................................................. 95
Ejemplo: .................................................................................................................. 97
Practica: .................................................................................................................. 98
57. Validación de la página a través de un enlace. .................................................. 98
Ejemplo: .................................................................................................................. 98
58. Elementos HTML <div> y <span> ...................................................................... 99
Ejemplo: ................................................................................................................ 100
Practica: ................................................................................................................ 101
59. Elementos y propiedades de HTML que no se deben usar .............................. 101
CSS ........................................................................................................................... 103
1. ¿Que son las hojas de estilo (CSS)? .................................................................... 103
Ejemplo: ................................................................................................................ 103
2. Definición de estilos a nivel de marca HTML. ..................................................... 103
Ejemplo: ................................................................................................................ 104
Practica: ................................................................................................................ 104
3. Definición de estilos a nivel de página................................................................ 105
Ejemplo: ................................................................................................................ 105
Practica: ................................................................................................................ 106
4. Propiedades relacionadas a fuentes. .................................................................. 106
Ejemplo: ................................................................................................................ 107
Practica: ................................................................................................................ 108
5. Agrupación de varias marcas HTML con una misma regla de estilo. ................... 108
Ejemplo: ................................................................................................................ 108
Practica: ................................................................................................................ 109
6. Definición de varias reglas para una misma marca HTML. .................................. 109
Ejemplo: ................................................................................................................ 110
Practica: ................................................................................................................ 110
7. Propiedades relacionadas al texto...................................................................... 111
Ejemplo: ................................................................................................................ 112
8. Más propiedades relacionadas al texto. ............................................................. 113
Ejemplo: ................................................................................................................ 114
Practica: ................................................................................................................ 115

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

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

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

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

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

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

Página
12
El Lenguaje Hyper Text
Mark Language
HTML
1. Qué es HTML?
HTML es el lenguaje que se emplea para el desarrollo de páginas de internet.
Este lenguaje está constituido de elementos que el navegador interpreta y las
despliega en la pantalla de acuerdo a su objetivo. Veremos que hay elementos para
disponer imágenes sobre una página, hipervínculos que nos permiten dirigirnos a otra
página, listas, tablas para tabular datos, etc.
Para poder crear una página HTML se requiere un simple editor de texto y un
navegador de internet (IExplorer, FireFox etc.).
Lo más importante es que en cada concepto desarrolle los ejercicios propuestos y
modifique los que se presentan ya resueltos.
Este curso lo que busca es acercar el lenguaje HTML a una persona que nunca antes
trabajó con el mismo. No pretende mostrar todos los elementos HTML en forma
alfabética.
Como veremos, de cada concepto se presenta una parte teórica, en la que se da una
explicación completa, 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. 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).

2. Estructura interna de una página HTML.


Las instrucciones HTML están encerradas entre los caracteres: < y >.
Muchos elementos HTML requieren una marca de comienzo y otra de finalización.
Todo aquello que está fuera de las marcas del lenguaje se imprime en la pantalla
(dentro del navegador).
La estructura básica de una página HTML es:
<html>
<head>
</head>
<body>
Cuerpo de la página.
</body>
</html>
Una página HTML es un archivo que generalmente tiene como extensión los caracteres
html. Por ejemplo podemos llamar a nuestra primer página con el nombre:
pagina1.html

Página
13
Durante este curso no necesitará utilizar otra herramienta más que este sitio. Veremos
que contamos con una ventana donde tipeará la página y en otra verá los resultados
que genera el navegador. No significa que no pueda hacerse una copia de los ejercicios
que desarrolla y almacenarlos en su computadora.
Estos son los elementos básicos que toda página HTML debe llevar.
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, 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.
</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.
Otra cosa importante es que el lenguaje HTML no es sensible a mayúsculas y
minúsculas, es decir podemos escribirlo como más nos guste, 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).
Ahora puede ir a la sección de problema resuelto y ver el ejemplo ejecutándose en el
navegador. Podrá ver la pantalla dividida en tres partes: primero se enuncia el
problema, la segunda parte es el editor donde tipeamos la 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.
Por último deberá resolver un problema, es decir confeccionar una página HTML.
Recomiendo tipear las marcas HTML para aprenderlas de memoria. No es conveniente
copiar y pegar. Cuando recuerde todas las marcas, podrá copiar y pegar trozos de
páginas HTML para agilizar el desarrollo.
Ejemplo: Confeccionar una página que muestre los nombres de 5 lenguajes de
programación separados por un guión.
<html>
<head>
</head>
<body>
PHP - Java - JavaScript - C - C++
</body>
</html>

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.

3. Salto de línea <br>

Página
14
Todo el texto que disponemos en el cuerpo de la página aparece en la misma línea, 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>.
Cuando aparece la marca <br> el navegador continua con el texto en la línea siguiente.
Es uno de los pocos elementos HTML que no tiene marca de cerrado como habíamos
visto hasta ahora.
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. 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, mostrarlos uno por línea.
<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.

4. Párrafo <p>
Un párrafo es una oración o conjunto de oraciones referentes a un mismo tema. Todo
lo que encerremos entre las marcas <p> y </p> aparecerá separado por un espacio con
respecto al próximo párrafo.

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

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

Practica: Confeccione una página que muestre en un párrafo datos referentes a


sus estudios y en otro párrafo su nombre y mail.

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

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

Practica: Confeccionar el titular de un periódico con un título de nivel 1. Luego


definir dos títulos de segundo nivel con los textos (Noticias políticas y Noticias
deportivas), en cada una de estas secciones definir dos titulares de tercer nivel con un
párrafo cada una. Al final de la página mostrar un título de cuarto nivel con el nombre
de la empresa propietaria del periódico.

6. Enfasis (<em> <strong>)


Enfatizar algo significa realzar la importancia de una cosa, por ejemplo una palabra o
conjunto de palabras.
Así como tenemos seis niveles de 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.
Las cadenas se colocan entre comillas simples. Podemos almacenar dígitos
con los que no se realizan operaciones matemáticas, por ejemplo, códigos
de identificación, números de documentos, números telefónicos.
Tenemos los siguientes tipos: varchar, char y text.</p>
<p><em>NUMEROS</em>: Existe variedad de tipos numéricos
para representar enteros, negativos, decimales. Para almacenar valores enteros,
por ejemplo, en campos que hacen referencia a cantidades, precios, etc., usamos
el tipo integer. Para almacenar valores con decimales utilizamos: float o
decimal.</p>
<p><em>FECHAS Y HORAS</em>: para guardar fechas y horas dispone
de varios tipos: date (fecha), datetime (fecha y hora), time (hora), year (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
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, pero seguramente mostrarán los textos enfatizados).
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,h2 etc.)
Para recordar el nombre de estos elementos HTML:
<em> viene de empathize que significa énfasis.
<strong> viene de strong que significa fuerte.

Ejemplo: Crear una página que contenga cuatro párrafos. En el primero enfatizar
con el máximo nivel y en los otros párrafos emplear el elemento de enfatizar de menor
fuerza.
<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. Las cadenas
se colocan entre comillas simples. Podemos almacenar dígitos con los que no se
realizan operaciones matemáticas, por ejemplo, códigos de identificación, números
de documentos, números telefónicos. Tenemos los siguientes tipos: varchar, char y
text.</p>
<p><em>NUMEROS</em>: Existe variedad de tipos numéricos para representar enteros,
negativos, decimales. Para almacenar valores enteros, por ejemplo, en campos que
hacen referencia a cantidades, precios, etc., usamos el tipo integer. Para
almacenar valores con decimales utilizamos: float o decimal.</p>
<p><em>FECHAS Y HORAS</em>: para guardar fechas y horas dispone de varios tipos:
date (fecha), datetime (fecha y hora), time (hora), year (año) y timestamp.</p>
</body>
</html>

Practica: Confeccionar una página que muestre la definición de tres palabras.


Aplicar el elemento strong a cada palabra previo a su definición. Luego agregar el
elemento em a una o a un conjunto de palabras dentro de la definición.

7. 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, estos
nos permiten cargar otra página en el navegador. Esto es lo que hace diferente la
página de un libro con la página de un sitio en internet. Normalmente un libro lo
recorremos en forma secuencial, pero un sitio de internet podemos disponer estos
enlaces entre un conjunto de páginas y luego tener distintas alternativas de recorrido.
Normalmente un navegador al encontrar esta marca muestra un texto subrayado, y al
hacer clic con el mouse sobre éste el navegador carga la página indicada por dicho
hipervínculo.
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).
La marca de hipervínculo a otra página del mismo sitio tiene la siguiente sintaxis:
<a href="pagina2.html">Noticias</a>

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

Página
20
<head>
</head>
<body>
<h1>Noticias.</h1>
<a href="pagina1.html">Salir.</a>
</body>
</html>

Practica: Confeccionar una página principal con dos hipervínculos a las páginas
pagina2.html y pagina3.html
Luego en las dos páginas secundarias disponer hipervínculos a la página principal.

8. 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.google.com">Buscador Google</a>
Ahora la propiedad href la inicializamos con el nombre del dominio del otro sitio.
Algo importante que hay que anteceder al nombre del dominio es el tipo de protocolo
a utilizar. Cuando se trata de una página de internet, el protocolo es el http.
Resumiendo a la propiedad href la inicializamos con el nombre del protocolo (http)
seguida de dos puntos (:) y dos barras (//) luego la cadena (www.) y finalmente el
nombre de dominio del sitio a enlazar.
La siguiente página muestra un hipervínculo al sitio principal del buscador Google:
<html>
<head>
</head>
<body>
<a href="http://www.google.com">Buscador Google</a>
</body>
</html>
Si analizamos un poco y pensamos que esta marca nos permite pedir una página a un
servidor para que la cargue en el navegador: Qué página nos retorna del dominio
www.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).
Podemos enlazar a una página determinada de otro sitio. Veamos un ejemplo, si
queremos disponer un enlace (hipervínculo) a la pagina about.html de google la
sintaxis será la siguiente:
<a href="http://www.google.com/intl/en/about.html">Acerca de Google</a>
Debemos conocer exactamente el nombre de la página (en este caso about.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.
<html>
<head>
</head>
<body>
<a href="http://www.google.com">Buscador Google</a>

Página
21
</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). Disponer además un segundo
hipervínculo a una página determinada de ese periódico.

9. Imágenes dentro de una página <img>


Para insertar una imagen dentro de una página debemos utilizar el elemento HTML
<img>, la misma no tiene una marca de finalización (similar a la marca <br>).
Generalmente, 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, jpg
y png.
La sintaxis de esta marca es:
<img src="foto1.jpg" alt="Pintura geométrica">
Como mínimo, debemos inicializar las propiedades src y alt de la marca HTML img.
En la propiedad src indicamos el nombre del archivo que contiene la imagen (en un
servidor Linux es sensible a mayúsculas y minúsculas por lo que recomiendo que
siempre utilicen minúsculas para los nombres de archivos).
Como la imagen se encuentra en el mismo directorio donde se almacena la página
HTML, con indicar el nombre de archivo basta (no es necesario indicar ninguna ruta de
carpetas).
Otra propiedad obligatoria es alt, donde disponemos un texto que 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). El texto debe describir el
contenido de la imagen.
Confeccionemos una página que muestre una imagen llamada foto1.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.jpg" alt="Pintura geométrica">
</body>
</html>
Si la imagen se encuentra en una subcarpeta llamada imagenes, luego la sintaxis para
recuperarla será:
<img src="imagenes/foto1.jpg" alt="Pintura geométrica">
Es decir, antecedemos al nombre de la imagen el nombre de la carpeta y la barra /
Si la imagen se encuentra en una carpeta padre de donde se encuentra la página HTML
luego la sintaxis será:
<img src="../foto1.jpg" alt="Pintura geométrica">
Es decir, le antecedemos .. y la barra / al nombre de la imagen
Si queremos subir dos carpetas luego escribimos:
<img src="../../foto1.jpg" alt="Pintura geométrica">
Por último, si queremos acceder a una imagen que se encuentra en una carpeta
llamada imagenes pero que está al mismo nivel:

Página
22
<img src="../imagenes/foto1.jpg" alt="Pintura geométrica">
Primero le indicamos que subimos al directorio padre mediante los dos puntos .. y
seguidamente indicamos el nombre de la carpeta y la imagen a mostrar.
<img> viene de image
src viene de source
alt viene de alternative
Ejemplo: Implementar una página que muestre una imagen llamada foto1.jpg que
se encuentra en el mismo servidor y en la misma carpeta donde se localiza el archivo
HTML.
<html>
<head>
</head>
<body>
<img src="foto1.jpg" alt="Pintura geométrica">
</body>
</html>

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

10. 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.
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.jpg y foto2.jpg) como
hipervínculos. Al ser presionados llamar a otra página.
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.</h2>
<a href="pagina2.html"><img src="/imagenes/foto1.jpg"
alt="Pintura Geométrica"></a>
<br>
<a href="pagina2.html"><img src="/imagenes/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. Eso es todo.
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
partimos desde la raiz del sitio) en una carpeta llamada imagenes
(/imagenes/foto1.jpg)
Es bueno practicar con esto ya que cuando implementemos sitios muy grandes
seguramente agruparemos cada módulo en distintas carpetas.
Ejemplo: Confeccionar una página que muestre dos imagenes (foto1.jpg y
foto2.jpg) como hipervínculos. Al ser presionados llamar a otra página.
Las imágenes se encuentran en una carpeta llamada imagenes que depende
directamente de la raiz del sitio.
pagina1.html
<html>
<head>
</head>
<body>
<h2>Presione alguna de las imagenes para conocer más sobre esa obra.</h2>
<a href="pagina2.html"><img src="/imagenes/foto1.jpg" alt="Pintura Geométrica">
</a>
<br>
<a href="pagina3.html"><img src="/imagenes/foto2.jpg" alt="Pintura Geométrica">
</a>
</body>
</html>
pagina2.html
<html>
<head>
</head>
<body>
<p>Esta obra fue desarrollada en el año 2003</p>
<a href="pagina1.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.html">Retornar</p>
</body>
</html>

Practica: Crear tres páginas con una foto cada una (foto1.jpg, foto2.jpg y
foto3.jpg) luego al ser presionada avanzar a la siguiente página, es decir de la
pagina1.html llamar a la pagina2.html, de la pagina2.html pasar a la pagina3.html y de
ésta a la primera.
Las imágenes se encuentran en una carpeta llamada imagenes que depende
directamente de la raiz del sitio.

11. Apertura de un hipervínculo en otra


instancia del navegador.
El elemento "a" tiene una propiedad target que nos permite indicar que la referencia
del recurso sea abierta en otra página.

Página
24
Esta propiedad se llama target y debemos asignarle el valor "_blank" para indicar que
el recurso sea abierto en otra ventana.
Confeccionemos una página que contenga dos hipervínculos, el primero abra el sitio
en el mismo navegador y el segundo en otra instancia del navegador:
<html>
<head>
</head>
<body>
<h1>Apertura de enlaces en el mismo navegador y en otra instancia del
navegador</h1>
<p>
<a href="http://www.lanacion.com.ar">Periódico La Nación</a>
<br>
<a href="http://www.clarin.com.ar" target="_blank">Periódico
Clarin</a>
</p>
</body>
</html>
Podemos ver la diferencia entre el primer hipervínculo:
<a href="http://www.lanacion.com.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.clarin.com.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. Hacer que el hipervínculo del periódico el Clarin sea abierto en
otra ventana del navegador.
<html>
<head>
</head>
<body>
<h1>Apertura de enlaces en el mismo navegador y en otra instancia del
navegador</h1>
<p>
<a href="http://www.lanacion.com.ar">Periódico La Nación</a>
<br>
<a href="http://www.clarin.com.ar" target="_blank">Periódico Clarin</a>
</p>
</body>
</html>

Practica: Confeccionar una página que muestre enlaces a distintos blog.


Agruparlos bajo dos títulos que muestren los mismos enlaces, el primero "Hacer la
apertura en otra ventana" y el segundo "Hacer la apertura en el mismo navegador".

12. 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.
Confeccionaremos una página que disponga un hipervínculo a un cliente de correo de
mail:
<html>
<head>
</head>
<body>

Página
25
<h1>Reclamos</h1>
<a href="mailto:diegoestevanes@gmail.com">Enviar mail.</a>
</body>
</html>
Cuando se presiona el enlace se abre el programa de 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.com?subject=título del mensaje&body=cuerpo del
mensaje">Enviar mail.</a>
Es decir luego de especificar el destinatario del mail disponemos un caracter de
interrogación '?' seguido la palabra subject, un igual y el título por defecto que debe
aparecer en la ventana de envío de mail. 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?
subject=aquí el título&cc=diego2@gmail.com&bcc=diego3@gmail.com&body=Este
es el cuerpo">Enviar mail.</a>
</body>
</html>
En este ejemplo enviamos un mail a diego1@gmail.com, con copia a
diego2@gmail.com y con copia oculta a diego3@gmail.com
Ejemplo: Confeccionar una página que contenga un hipervínculo configurando la
propiedad href de tal manera que abra un cliente de correo.
<html>
<head>
</head>
<body>
<h1>Reclamos</h1>
<a href="mailto:diegoestevanes@gmail.com">Enviar mail.</a>
</body>
</html>

Practica: Una empresa que vende pizzas tiene 3 ofertas. Las mismas son (1- 1
muzzarella y una bebida cola a ¢500, 2- 2 muzzarellas a ¢600 y 3 - 4 muzarrellas a
¢1000). Confeccionar una página que disponga tres hipervínculos a cada una de esas
ofertas. Al ser presionadas abrir el cliente de correo y enviar la promoción
correspondiente. En el título indicar si se trata de la promoción 1, 2 o 3. En el cuerpo
del mensaje pedir que ingrese la dirección y teléfono de la persona que hace el pedido.

13. Anclas llamadas desde la misma página.


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. Se disponen hipervínculos a diferentes anclas.

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

Página
27
<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>
Una tabla es una estructura de datos que organiza los datos en columnas y filas;
cada columna es un campo (o atributo) y cada fila, un registro. La intersección
de una columna con una fila, contiene un dato específico, un solo valor.<br>
Cada registro contiene un dato por cada columna de la tabla.<br>
Cada campo (columna) debe tener un nombre. El nombre del campo hace referencia
a la información que almacenará.<br>
Cada campo (columna) también debe definir el tipo de dato que almacenará.<br>
</p>
<a name="cargarregistros"></a>
<h2>Carga de registros a una tabla y su recuperación</h2>
<p>
Usamos "insert into". Especificamos los nombres de los campos entre
paréntesis y separados por comas y luego los valores para cada campo, también
entre paréntesis y separados por comas.<br>
Es importante ingresar los valores en el mismo orden en que se nombran los campos,
si ingresamos los datos en otro orden, no aparece un mensaje de error y los datos
se guardan de modo incorrecto.<br>
Note que los datos ingresados, como corresponden a campos de cadenas de caracteres
se colocan entre comillas simples. Las comillas simples son OBLIGATORIAS.
</p>
</body>
</html>
Cada 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.
Ejemplo: Confeccionar una página que contenga cuatro anclas, luego definir
cuatro hipervínculos que se enlacen con dichas anclas.
Principio del formulario
pagina1.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, Structure Query Language (Lenguaje de Consulta Estructurado) es un lenguaje de
programacion para trabajar con base de datos relacionales como MySQL, Oracle,
etc.<br>
MySQL es un interpretador de SQL, es un servidor de base de datos.<br>

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

Practica: Disponer una serie de hipervínculos sobre noticias del día. Enlazar los
hipervínculos con anclas que se encuentran más abajo en la misma página.

14. Anclas llamadas desde otra página.


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

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

Ejemplo: Confeccionar una página que contenga cuatro anclas y una segunda
página que defina cuatro hipervínculos que se enlacen con dichas anclas.
Principio del formulario
pagina1.html
<html>
<head>
</head>
<body>
<h1>Tutorial de MySQL</h1>
<a href="pagina2.html#introduccion">Introducción</a><br>
<a href="pagina2.html#mostrarbasedatos">show databases</a><br>
<a href="pagina2.html#creaciontabla">Creación de una tabla y mostrar sus
campos</a><br>
<a href="pagina2.html#cargarregistros">Carga de registros a una tabla y su
recuperación</a><br>
</body>
</html>
pagina2.html
<html>
<head>
</head>
<body>
<a name="introduccion"></a>
<h2>Introducción</h2>
<p>
SQL, Structure Query Language (Lenguaje de Consulta Estructurado) es un lenguaje de
programacion para trabajar con base de datos relacionales como MySQL, Oracle,
etc.<br>
MySQL es un interpretador de SQL, es un servidor de base de datos.<br>

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

Practica: Disponer una serie de hipervínculos sobre noticias del día. Enlazar los
hipervínculos con anclas que se encuentran en otra página.

Página
32
15. Lista ordenada (<ol>)
Este elemento HTML es útil cuando debemos numerar una serie de objetos.
Veamos con un ejemplo una lista ordenada para conocer su sintaxis. Mostraremos el
orden de llegada de tres corredores:
<html>
<head>
</head>
<body>
<ol>
<li>Rodriguez Pablo</li>
<li>Gonzalez Raul</li>
<li>Lopez Hector</li>
</ol>
</body>
</html>
La marca <ol> y su correspondiente marca de cerrado es </ol>
En su interior cada uno de los items se los dispone con el elemento li, que 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, tengamos en cuenta que se numeran porque se trata de una lista ordenada.
Para recordar el nombre de estos elementos HTML:
<ol> viene de ordened list
<li> viene de list item

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


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

Practica: Confeccione una lista ordenada con los tres paises con mayor población
del planeta. Disponer un título de segundo nivel y debajo de la lista la suma de
habitantes de esos tres paises enfatizado.

16. Lista no ordenada (<ul>)


Una lista no ordenada como su nombre lo indica no utiliza un número delante de cada
items sino un pequeño símbolo gráfico.
La forma de implementar este tipo de listas es idéntica a las listas ordenadas.
Veamos un ejemplo donde implementamos una lista no ordenada:
<html>
<head>
</head>
<body>
<h2>Lenguajes de programación.</h2>
<ul>

Página
33
<li>C</li>
<li>C++</li>
<li>Java</li>
<li>C#</li>
</ul>
</body>
</html>
Para recordar los nombres de estas marcas HTML:
<ul> viene de unordered list
<li> viene de list item
Ejemplo: Confeccionar una página HTML que contenga una lista no ordenada con
cuatro lenguajes de programación muy populares. Agregar un título de segundo nivel
indicando el concepto de esta lista.
<html>
<head>
</head>
<body>
<h2>Lenguajes de programación.</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. Agregar tantos item como periódicos conoce.

17. Lista de definiciones (<dl>)


Como su nombre lo indica se utiliza para asociar un término y la definición del mismo.
El navegador se encarga de destacar y separa el término y su definición.
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, por Bjarne Stroustrup, como extensión del lenguaje
de programación C.</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, es decir, que no requiere compilación,
utilizado principalmente en páginas web, con una sintaxis semejante a la
del lenguaje C.</dd>
</dl>
</body>
</html>
Como podemos observar intervienen más marcas que en los otros dos tipos de listas.
Las marcas que encierran a la lista son <dl> (Definition List) y </dl>

Página
34
Ahora debemos poner a pares estos dos elementos <dt> (Definition Term) y <dd>
(Definition Description)
El navegador se encarga de hacer el sangrado del contenido del elemento dt
Para recordar los nombres de estas marcas HTML:
<dl> viene de definition list
<dt> viene de definition term
<dd> viene de definition description
Como su nombre lo indica se utiliza para asociar un término y la definición del mismo.
El navegador se encarga de destacar y separa el término y su definición.
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, por Bjarne Stroustrup, como extensión del lenguaje
de programación C.</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, es decir, que no requiere compilación,
utilizado principalmente en páginas web, con una sintaxis semejante a la
del lenguaje C.</dd>
</dl>
</body>
</html>
Como podemos observar intervienen más marcas que en los otros dos tipos de listas.
Las marcas que encierran a la lista son <dl> (Definition List) y </dl>
Ahora debemos poner a pares estos dos elementos <dt> (Definition Term) y <dd>
(Definition Description)
El navegador se encarga de hacer el sangrado del contenido del elemento dt
Para recordar los nombres de estas marcas HTML:
<dl> viene de definition list
<dt> viene de definition term
<dd> viene de definition description

Ejemplo: Confeccionar una lista de definición indicando en los conceptos distintos


lenguajes de programación. En la definición hacer una breve introducción del mismo.
<html>
<head>
</head>
<body>
<dl>
<dt>C++</dt>
<dd>Es un lenguaje de programación, diseñado a mediados de los años 1980, por
Bjarne Stroustrup, como extensión del lenguaje de programación C.</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, es decir, que no requiere compilación, utilizado
principalmente en páginas web, con una sintaxis semejante a la del lenguaje C.</dd>
</dl>
</body>
</html>

Página
35
Practica: Confeccione una lista de definición de un conjunto de palabras que
utilice en su ámbito laboral.

18. Listas anidadas.


El lenguaje HTML nos permite insertar una lista dentro de otra. Se pueden anidar listas
de distinto tipo, por ejemplo podemos tener una lista no ordenada y uno de los item
puede ser una lista ordenada.
Para el anidamiento de listas solo debemos tener cuidado en la correcta apertura y
cerrado de las marcas
Implementaremos una 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.com">La Nación</a></li>
<li><a href="http://www.aldia.co.cr">Al Dia</a></li>
<li><a href="http://www.diarioextra.com">La Extra</a></li>
</ul>
</li>
<li>España
<ul>
<li><a href="http://www.elpais.es">El País Digital</a></li>
<li><a href="http://www.abc.es">ABC</a></li>
<li><a href="http://www.elmundo.es">El Mundo</a></li>
</ul>
</li>
<li>México
<ul>
<li><a href="http://www.jornada.unam.mx">La Jornada</a></li>
<li><a href="http://www.el-universal.com.mx">El Universal</a></li>
</ul>
</li>
</ol>
</body>
</html>
Se puede insertar en un elemento li una lista como podemos ver:
<li>Argentina
<ul>
<li><a href="http://www.lanacion.com.ar">La Nación</a></li>
<li><a href="http://www.clarin.com.ar">Clarín</a></li>
<li><a href="http://www.pagina12.com.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.
<html>
<head>
</head>
<body>

Página
36
<ol>
<li>Argentina
<ul>
<li><a href="http://www.lanacion.com.ar">La Nación</a></li>
<li><a href="http://www.clarin.com.ar">Clarín</a></li>
<li><a href="http://www.pagina12.com.ar">Página 12</a></li>
</ul>
</li>
<li>España
<ul>
<li><a href="http://www.elpais.es">El País Digital</a></li>
<li><a href="http://www.abc.es">ABC</a></li>
<li><a href="http://www.elmundo.es">El Mundo</a></li>
</ul>
</li>

Practica: Confeccionar una lista no ordenada de lenguajes de programación. Luego


disponer una lista ordenada con hipervínculos a sitios que tratan dichos lenguajes.

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


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

Página
37
Lo primero que aparece es la apertura del elemento table, donde inicializamos la
propiedad border con el valor 1, con esto el contorno de cada celda será visible
(pruebe de asignarle el valor cero y otros valores superiores a 1)
<table border="1">
Seguidamente viene la apertura de la primer fila de la tabla con el elemento tr:
<tr>
Continuamos con la apertura de la primer celda de la primer fila de la tabla:
<td>
Luego el dato propiamente dicho de la celda:
India
Cerramos la celda:
</td>
Abrimos la proxima celda:
<td>
Disponemos el valor de la celda:
1300 millones
Cerramos la celda:
</td>
Ahora cerramos la primer fila de la tabla:
</tr>
El mecanismo de la siguiente fila es similar a la primera.
Ejemplo: Confeccionar una tabla que muestre los nombre de paises en una
columna y su cantidad de habitantes en otra.
<html>
<head>
</head>
<body>
<table border="1">
<tr>
<td>China</td><td>1300 millones</td>
</tr>
<tr>
<td>India</td><td>1080 millones</td>
</tr>
<tr>
<td>Estados Unidos</td><td>295 millones</td>
</tr>
</table>
</body>
</html>

Practica: Confeccionar una tabla que muestre en la primer columna los nombre de
distintos empleados de una compañia y en la segunda el sueldo bruto (la compañía
tiene 4 empleados)

20. Tabla con encabezado (<th>)


La primera característica que le vamos a agregar a una tabla son las celdas de
encabezado. Normalmente la primera fila de una tabla puede representar los títulos
para cada columna.

Página
38
Para indicar que se trata de una celda de encabezado utilizamos el elemento <th> en
lugar de <td>
El navegador representa distinto las celdas de datos y las celdas de encabezamiento.
Confeccionemos el mismo problema del concepto anterior pero agregando un 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>, es decir pertenecen
a una fila.
Para recordar el nombre de este nuevo elemento HTML:
<th> viene de table header cell que significa celda de encabezado de
tabla.
Ejemplo: Confeccionar una tabla que muestre los nombre de paises en una
columna y su cantidad de habitantes en otra. Disponer un título a cada columna
mediante celdas creadas mediante el elemento th.
<html>
<head>
</head>
<body>
<table border="1">
<tr>
<th>Paises</th><th>Cantidad de habitantes</th>
</tr>
<tr>
<td>China</td><td>1300 millones</td>
</tr>
<tr>
<td>India</td><td>1080 millones</td>
</tr>
<tr>
<td>Estados Unidos</td><td>295 millones</td>
</tr>
</table>
</body>
</html>

Página
39
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.

21. 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. El elemento caption requiere la
marca de apertura y cierre.
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.</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.
Ejemplo: Confeccionar una tabla que muestre los nombre de paises en una
columna y su cantidad de habitantes en otra. Disponer un título de los datos que
representa la tabla.
<html>
<head>
</head>
<body>
<table border="1">
<caption>Población de los paises con mayor cantidad de habitantes.</caption>
<tr>
<th>Paises</th><th>Cantidad de habitantes</th>
</tr>
<tr>
<td>China</td><td>1300 millones</td>
</tr>
<tr>
<td>India</td><td>1080 millones</td>

Página
40
</tr>
<tr>
<td>Estados Unidos</td><td>295 millones</td>
</tr>
</table>
</body>
</html>

Practica: Confeccionar una tabla que muestre en la primer columna los nombre de
distintos empleados de una compañía y el la segunda el sueldo bruto (la compañía
tiene 4 empleados) Disponer en la tabla un título representativo.

22. Tabla y combinación de celdas.


En algunas situaciones se necesita que una celda ocupe el lugar de dos o más celdas en
forma horizonzal o vertical, para estos casos el elemento td o th dispone de dos
propiedades llamadas rowspan y colspan.
A estas propiedades se les asigna un valor entero a partir de 2.
Si queremos que una celda ocupe tres columnas luego inicializamos la propiedad
rowspan con el valor 3:
<td colspan="3">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.
Cuando tenemos que disponer las celdas de la segunda fila debemos tener en cuenta
que la primera está ocupada. Luego el código es:

Página
41
<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', 'CPU' y 'Monitores'. La primer columna debe
mostrar solo el texto 'recursos' y en la primer fila el texto 'Facturación de los últimos
tres meses'.
<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. En la primer columna disponer los nombre
de paises, expandir en fila de acuerdo a la cantidad de diarios de cada pais.

23. Contenido de la cabecera de la página


(<title>)
Hasta ahora habíamos dispuesto la cabecera vacía, ya que casi toda la información que
disponemos en ella no se visualiza en el navegador. La única excepcion corresponde al
elemento title.
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.
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.html">Ir a la segunda página</a>
</body>
</html>

Página
42
pagina2.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.html">Ir a la primer página</a>
</body>
</html>

Ejemplo: Confeccionar dos páginas que inicialicen el elemento title. Disponer un


hipervínculo en cada página.
pagina1.html
<html>
<head>
<title>Título de la primer página</title>
</head>
<body>
<h1>Prueba del elemento title</h1>
<a href="pagina2.html">Ir a la segunda página</a>
</body>
</html>
pagina2.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.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.

24. Contenido de la cabecera de la página


(<meta>)
Un elemento que no se visualiza es el meta, que tiene por objetivo especificar
información sobre el propio documento.
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.
No existe ninguna especificación de la W3C que defina los valores posibles para el
atributo name, si bien existen algunos que son estandares de facto (description,
keywords, author etc.)
Veamos las propiedades y valores más comunes
<meta name="keywords" content="html, programación, webmaster">
Los buscadores tienen en cuenta los metadatos. Si en la página inicializamos la
propiedad name del elemento meta con el valor keywords luego buscará en la

Página
43
propiedad content las distintas palabras claves más representativas para dicha página.
Esto es muy útil para posicionar nuestra página según el contenido que provee.
Veamos otras inicializaciones del elemento meta:
<meta name="description" content="El objetivo de este tutorial
es presentar los conceptos básicos de HTML. Es objetivo prioritario respetar
los estándares del W3C">
En este caso especificamos una descripción de la página, pudiendo ser del sitio si se
trata de la página principal.
<meta name="author" content="Diego Rodriguez">
<meta name="copyright" content="Interpolacion inc.">

Ejemplo: Confeccionar una página HTML. Definir el elemento title y los metadatos
para indicar autor, palabras claves para buscadores, descripción de la página y
copyright.
pagina1.html
<html>
<head>
<title>HTML Ya</title>
<meta name="keywords" content="html, programación, webmaster, tutorial">
<meta name="description" content="El objetivo de este tutorial
es presentar los conceptos básicos de HTML. Es objetivo prioritario respetar
los estándares del W3C">
<meta name="author" content="Diego Rodriguez">
<meta name="copyright" content="Interpolacion inc.">
</head>
<body>

</body>
</html>

25. Comentarios dentro de una página <!-- -->


Un comentario es un texto que solo le interesa a la persona que desarrolló la página, el
navegador ignora todo el contenido que se encuentra dentro de esta marca.
Los comentarios son muy útiles para el desarrollador de la página. Uno deja
anotaciones para facilitar el mantenimiento del sitio.
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. Lo que para
uno puede ser muy obvio a otro desarrollador puede no ser tan obvio.
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.
La sintaxis para definir un comentario es:
<!-- Aquí va el comentario -->
Es obligatorio luego del caracter de menor < disponer el signo de admiración y los dos
guiones seguidos. Cerramos el comentario con dos guiones y el signo de mayor >
Confeccionaremos un página donde emplearemos comentarios:
<html>
<head>
</head>
<body>
<!-- Corresponden a datos del año 2006. Modificar a principios de 2007-->
<table border="1">

Página
44
<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, es decir con los comentarios. Los
comentarios consumen ancho de banda del servidor.
Ejemplo: Confeccionar una página que contenga una tabla. Almacenar en un
comentario datos referentes al contenido de la tabla que solo interesen al
desarrollador.
<html>
<head>
</head>
<body>
<!-- Corresponden a datos del año 2006. 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.

Página
45
26. Sintaxis para caracteres especiales.
Posiblemente hasta ahora no se a preguntado como disponer dentro de una página los
caracteres: < y >. Veremos que no los podemos disponer directamente ya que el
navegador los confudiría con los caracteres que se utilizan para las marcas HTML.
La solución es utilizar otra sintaxis para dichos caracteres, veamos los más utilizados:
< &lt;
> &gt;
& &amp;
" &quot;
&nbsp; //Espacio en blanco.
© &copy;
€ &euro;
Es decir la sintaxis es disponer un ampersand seguido de un nombre significativo (por
lo menos para los que entienden ingles) y finalmente un punto y coma.
Para ver su funcionamiento mostraremos la siguiente ecuación:
10+x*y < 12*z
pagina1.html
<html>
<head>
<title>Título de la primer página</title>
</head>
<body>
<h1>
10+x*y &lt; 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 12*z
</h1>
</body>
</html>

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. Formulario - <form>


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

Página
46
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
</body>
</html>
Practica: Confeccione un formulario que solicite el ingreso de un mail, una clave y
luego muestre una serie de títulos de películas con su respectivo checkbox. Disponer
también del botón de tipo submit para el envío de datos al servidor.

31. Formulario - input type="radio"


Cuando tenemos un conjunto de opciones pero solo una puede ser seleccionada
debemos emplear controles visuales de tipo radio.
Para definir controles de tipo radio también utilizamos el elemento input inicializando
la propiedad type con el valor "radio"
Veamos un ejemplo del empleo de este control gráfico, supongamos que necesitamos
indicar el tipo de estudios que tenemos utilizando controles de tipo radio:
<html>
<head>
<title>Prueba de formulario</title>
</head>
<body>
<form action="/registrardatos.php" method="post">
Ingrese su nombre:
<input type="text" name="nombre" size="30"><br>
Seleccione el 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" 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>
Como podemos observar todos tienen el mismo valor en la propiedad name, con esto
se logra que cuando seleccionamos uno se deseleccione el actual.
El valor que se rescata en el servidor es el dato almacenado en la propiedad value.
Si queremos disponer varios grupos de controles de tipo radio debemos definirles a
cada grupo la propiedad name nombres distintos.
Ejemplo: Solicitar el ingreso del nombre de una persona y el máximo nivel en
estudios alcanzado (sin estudios, estudios primarios, estudios secundarios o estudios
universitarios)
Ulitilzar controles de tipo radio para la selección de estudios realizados.
<html>
<head>
<title>Prueba de formulario</title>
</head>
<body>
<form action="/registrardatos.php" method="post">

Página
52
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. Formulario - select (cuadro de selección


individual)
El elemento select es un cuadro de selección.
Este elemento HTML nos permite seleccionar una opción entre un conjunto. Veremos
en el concepto próximo que según como la configuramos podemos seleccionar varias
opciones.
Veamos con un ejemplo como crear un control de tipo select. Confeccionemos un
formulario que solicite cargar el nombre de una persona y el pais donde vive, este
último elemento mediante un control de tipo select permitir seleccionar el pais.
El archivo pagina1.html es:
<html>
<head>
<title>Prueba de formulario</title>
</head>
<body>
<form action="/registrardatos.php" method="post">
Ingrese su nombre:
<input type="text" name="nombre" size="30"><br>
Seleccione su pais:
<select name="pais">
<option value="1">Costa Rica</option>
<option value="2">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
Veamos la sintaxis para crear un cuadro de selección, 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.
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, 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.
Ejemplo: Confeccionar un formulario que solicite cargar el nombre de una persona
y el pais donde vive, este último elemento mediante un control de tipo select permitir
seleccionar el pais. (Agregue la propiedad size al elemento select con el valor 5)
<html>
<head>
<title>Prueba de formulario</title>
</head>
<body>
<form action="/registrardatos.php" method="post">
Ingrese su nombre:
<input type="text" name="nombre" size="30"><br>
Seleccione su pais:
<select name="pais">
<option value="1">Argentina</option>
<option value="2">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. Mediante un cuadro de selección el visitante puede
elegir entre las siguientes opciones: Excelente, Muy Bueno, Bueno, Regular y Malo.

Página
54
33. Formulario - 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.
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.
La página que resuelve este problema es:
<html>
<head>
<title>Prueba de formulario</title>
</head>
<body>
<form action="/registrardatos.php" method="post">
Seleccione uno o varios colores (Presione Ctrl para seleccionar varios colores)<br>
<select name="colores[]" size="4" multiple>
<option value="1">Rojo</option>
<option value="2">Verde</option>
<option value="3">Azul</option>
<option value="4">Amarillo</option>
<option value="5">Blanco</option>
<option value="6">Negro</option>
<option value="7">Naranja</option>
<option value="8">Violeta</option>
</select>
<br>
<input type="submit" value="Enviar">
</form>
</body>
</html>
Podemos observar la sintaxis para la 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, por otro lado al
nombre definido en la propiedad name le agregamos al final los caracteres [] para que
desde el servidor podamos identificar que el control retorna posiblemente muchos
valores.
Es 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 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. 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
<option value="6">Negro</option>
<option value="7">Naranja</option>
<option value="8">Violeta</option>
</select>
<br>
<input type="submit" value="Enviar">
</form>
</body>
</html>

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


mail. Luego permitir que el visitante seleccione uno o varios mail del cuadro de
selección.

34. Formulario - select (agrupamiento de


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

Página
56
<optgroup label="Frutas"> <option value="1">Naranjas</option> <option
value="2">Manzanas</option> <option value="3>Sandia</option> <option
value="4">Frutilla</option> <option value="5">Durazno</option> <option
value="6">Ciruela</option> </optgroup>
La propiedad label del elemento optgroup aparece dentro del control select pero no se
puede seleccionar, es un título.
La propiedad label del elemento optgroup es el texto que se debe mostrar dentro del
select.
Se puede hacer agrupamiento de opciones y permitir selecciones múltiples.
Ejemplo: Confeccionar una página que muestre un control de tipo select. Agrupar
las opciones en dos grupos, en uno las frutas y en otro las verduras. Utilizar el
elemento optgroup para el agrupamiento.
<html>
<head>
<title>Prueba de formulario</title>
</head>
<body>
<form action="/registrardatos.php" method="post">
Seleccione una fruta o verdura:
<select name="articulo">
<optgroup label="Frutas">
<option value="1">Naranjas</option>
<option value="2">Manzanas</option>
<option value="3>Sandia</option>
<option value="4">Frutilla</option>
<option value="5">Durazno</option>
<option value="6">Ciruela</option>
</optgroup>
<optgroup label="Verduras">
<option value="7">Lechuga</option>
<option value="8">Acelga</option>
<option value="9">Zapallo</option>
<option value="10">Papas</option>
<option value="11">Batatas</option>
<option value="13">Zanahorias</option>
<option value="14">Rabanitos</option>
<option value="15">Calabaza</option>
</optgroup>
</select>
<br>
<input type="submit" value="Enviar">
</form>
</body>
</html>

Practica: Confeccione un control de tipo select con los nombres de paises de


América y Europa. Agrupe los paises por continente.

35. Formulario - button


El elemento button es un control visual que se puede utilizar para sustituir los
controles:
<input type="submit" value="Enviar">
<input type="reset" value="Borrar">
Entre otras las ventanjas de este elemento es que podemos agregar imágenes dentro
del botón.
La sintaxis de este elemento es la siguiente:

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

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


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

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


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

Practica: Confeccionar una página que muestre una pregunta y luego tres
respuestas posibles. Al lado de cada respuesta disponer un botón creado con el
elemento input inicializando la propiedad type con el valor="button"

37. Formulario - input type="file"


El control de tipo file nos permite enviar un archivo al servidor. Nuevamente el HTML
solo indica al navegador que debe enviar el archivo al servidor pero debe haber en el
servidor un programa que lo almacene en una carpeta del servidor.
Veamos la sintaxis para disponer un control de tipo file:
<input type="file" name="archi">
Nuevamente utilizamos el elemento HTML input para definir este tipo de control. En la
propiedad type inicializamos con el valor file. Inicializar la propiedad name también es
importante ya que mediante este nombre se lo recupera en el servidor.
Otra cosa muy importante a tener en cuenta cuando hacemos upload de archivos al
servidor es inicializar la propiedad enctype del elemento form:
<form method="post" action="/registrardatos.php" enctype="multipart/form-data">
Con esto indicamos al navegador que el formulario almacena uno o más archivos que
deben ser enviados al 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.php" method="post" enctype="multipart/form-data">
Ingrese su nombre:
<input type="text" name="nombre" size="30"><br>
Seleccione la foto:
<input type="file" name="foto">
<br>
<input type="submit" value="Enviar">
</form>
</body>
</html>
Recordemos siempre inicializar la propiedad enctype del elemento form:
<form action="/registrardatos.php" method="post" enctype="multipart/form-data">

Página
60
Tenga en cuenta que si no se hace nigún programa en el servidor el archivo no se
almacena.
Ejemplo: Confeccionar un formulario que solicite el ingreso del nombre de una
persona y permita seleccionar y enviar su foto.
<html>
<head>
<title>Prueba de formulario</title>
</head>
<body>
<form action="/registrardatos.php" method="post" enctype="multipart/form-data">
Ingrese su nombre:
<input type="text" name="nombre" size="30"><br>
Seleccione la foto:
<input type="file" name="foto">
<br>
<input type="submit" value="Enviar">
</form>
</body>
</html>

Practica: Confeccionar un formulario que solicite y envíe al servidor dos archivos.

38. Formulario - input type="hidden"


Un campo hidden se lo denomina campo oculto. Este tipo de control no visualiza nada
dentro del formulario.
Su utilidad se presenta cuando desde el servidor se genera una 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.
Su utilidad real solo podrá ser comprendida cuando estudie un lenguaje de servidor,
pero veamos y conozcamos su sintaxis con un ejemplo.
Confeccionar un formulario que solicite ingresar el nombre de una persona y en un
campo oculto almacene una hora cualquiera:
<html>
<head>
<title>Prueba de formulario</title>
</head>
<body>
<form action="/registrardatos.php" method="post">
<input type="hidden" value="10:20" name="hora">
Ingrese su nombre:
<input type="text" name="nombre" size="30">
<br>
<input type="submit" value="Enviar">
</form>
</body>
</html>
Como vemos la sintaxis para definir un campo oculto es:
<input type="hidden" value="10:20" name="hora">
En el atributo value almacenamos el valor (este valor no se puede modificar desde el
formulario)
Podemos imaginar una utilidad, supongamos que queremos que un visitante reenvíe
un formulario cargado con todos los datos en un tiempo limitado, podríamos
almacenar en el campo oculto la primera vez que solicita la página que contiene el

Página
61
formulario donde se resgistrará dicha hora. Luego al subir el formulario ya cargado al
servidor controlaremos mediante un lenguaje de servidor si la hora actual y la hora de
pedido del formulario no hacen invalidar los datos.
Ejemplo: Confeccionar un formulario que solicite ingresar el nombre de una
persona y en un campo oculto almacene una hora cualquiera.
<html>
<head>
<title>Prueba de formulario</title>
</head>
<body>
<form action="/registrardatos.php" method="post">
<input type="hidden" value="10:20" name="hora">
Ingrese su nombre:
<input type="text" name="nombre" size="30">
<br>
<input type="submit" value="Enviar">
</form>
</body>
</html>

39. Formulario - agrupamiento de controles.


El HTML dispone de un elemento llamado fieldset que solo tiene el objetivo de
recuadrar y agrupar un conjunto de controles de un formulario.
Debemos encerrar todos los controles a agrupar entre las marcas <fieldset> y
</fieldset>. Además para agregar un título a este recuadro debemos agregar otro
elemento HTML llamado legend.
Confeccionemos un formulario que solicite los datos personales de una persona y los
datos del lugar donde trabaja, cada grupo de datos los dispondremos en un fieldset:
<html>
<head>
<title>Prueba de formulario</title>
</head>
<body>
<form action="/registrardatos.php" method="post">
<fieldset>
<legend>Datos personales</legend>
Apellido y nombre:
<input type="text" name="nombre" size="30"><br>
Documento de identidad:
<input type="text" name="dni" size="8"><br>
Fecha de nacimiento:
<input type="text" name="fechanacimiento" size="12"><br>
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
</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, cada grupo de datos disponerlos en un
fieldset.
<html>
<head>
<title>Prueba de formulario</title>
</head>
<body>
<form action="/registrardatos.php" method="post">
<fieldset>
<legend>Datos personales</legend>
Apellido y nombre:
<input type="text" name="nombre" size="30"><br>
Documento de identidad:
<input type="text" name="dni" size="8"><br>
Fecha de nacimiento:
<input type="text" name="fechanacimiento" size="12"><br>
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.


Agrupar los controles aquellos relacionados con el cliente y los referentes al pedido.

40. Formulario - controles con valores iniciales.


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

Página
63
El control aparece cargado con la cadena "aqui su nombre".
Para inicializar un control de tipo textarea debemos indicar el dato entre el comienzo y
el fin de la marca:
<textarea rows="10" cols="40" name="curriculum">Ingrese
aqui su curriculum</textarea>
El control textarea se inicializa con la cadena "Ingrese aqui su curriculum"
Para inicializar un control de tipo checkbox debemos disponer la propiedad checked sin
asignar valor:
<input type="checkbox" name="java" checked>Opcion 1<br>
Con esto logramos que el checkbox aparezca tildado apenas aparece el formulario.
Para inicializar un control de tipo radio debemos definir la propiedad checked sin valor,
igual que un checkbox, con la salvedad que solo un un control de tipo radio puede
tener definida esta propiedad:
<input type="radio" name="estudios" value="1"
checked>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, más alla que sea el segundo option en la
lista.
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, Azul y Blanco aparecen seleccionados desde un
comienzo.
Confeccionaremos como ejemplo un formulario que solicite el ingreso del nombre de
una persona. Luego que seleccione si es mayor de edad o no (por defecto inicializar en
si), seguidamente el teléfono (cargar por defecto 453) y por último en un textarea
solicitar que ingrese comentarios.

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

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

Practica: Confeccione un formulario de un libro de visitas, se debe solicitar el


nombre, mail, pais de origen (por defecto la opcion seleccionada debe ser "seleccione
pais"), valoración del sitio (malo, regular, bueno, muy bueno, excelente) por defecto
debe estar seleccionado "bueno". Por último disponer un textarea donde se puede
ingresar los comentarios.

41. Formulario - orden de foco de controles.


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

Página
65
Para probar el funcionamiento implementaremos un formulario que contenga una
matriz de tres filas y tres columnas de elementos de tipo text. Haremos que el foco sea
por columna, es decir primero tomará foco el text de la primera fila y primer columna,
luego del text de la segunda fila y primer columna etc (si no definimos la propiedad
tabindex la carga de datos se efectua por fila):
<head>
<title>Prueba de formulario</title>
</head>
<body>
<form action="/registrardatos.php" method="post">
<input type="text" name="text1" size="5" tabindex="1">
<input type="text" name="text2" size="5" tabindex="4">
<input type="text" name="text3" size="5" tabindex="7">
<br>
<input type="text" name="text4" size="5" tabindex="2">
<input type="text" name="text5" size="5" tabindex="5">
<input type="text" name="text6" size="5" tabindex="8">
<br>
<input type="text" name="text7" size="5" tabindex="3">
<input type="text" name="text8" size="5" tabindex="6">
<input type="text" name="text9" size="5" tabindex="9">
<br>
<input type="submit" value="enviar" tabindex="10">
</form>
</body>
</html>
Como podemos observar los valores definidos para la propiedad tabindex para la
primera fila de controles text es:
<input type="text" name="text1" size="5" tabindex="1">
<input type="text" name="text2" size="5" tabindex="4">
<input type="text" name="text3" size="5" tabindex="7">
Podemos observar que la propiedad tabindex no tiene valores consecutivos. Pero si
vemos los text por columna podremos observar que si van en forma secuencial.
Todos los controles de formularios pueden definir la propiedad tabindex para indicar el
orden de activación o foco del control.
Ejemplo: Implementar un formulario que contenga una matriz de tres filas y tres
columnas de elementos de tipo text. Hacer que el foco sea por columna, es decir
primero tomará foco el text de la primer fila y primer columna, luego el text de la
segunda fila y primer columna etc. (si no definimos la propiedad tabindex la carga de
datos se efectua por fila)
<html>
<head>
<title>Prueba de formulario</title>
</head>
<body>
<form action="/registrardatos.php" method="post">
<input type="text" name="text1" size="5" tabindex="1">
<input type="text" name="text2" size="5" tabindex="4">
<input type="text" name="text3" size="5" tabindex="7">
<br>
<input type="text" name="text4" size="5" tabindex="2">
<input type="text" name="text5" size="5" tabindex="5">
<input type="text" name="text6" size="5" tabindex="8">
<br>
<input type="text" name="text7" size="5" tabindex="3">
<input type="text" name="text8" size="5" tabindex="6">
<input type="text" name="text9" size="5" tabindex="9">

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

Practica: Definir una matriz de 4 filas y 4 columnas de elementos de tipo text.


Luego hacer la carga de todos los elementos del perímetro y finalmente los cuatro
elementos centrales.

42. Formulario - Inhabilitar controles.


Todos los controles que hemos visto podemos hacer que aparezcan inhabilitados.
Supongamos que disponemos 3 controles de tipo radio para indicar que sección del
sitio deseamos ingresar. Nosotros queremos mostrar que tiene 3 secciones pero una
no está disponible. Esto lo resolvemos deshabilitando un radio:
<html>
<head>
<title>Prueba de formulario</title>
</head>
<body>
<form action="/registrardatos.php" method="post">
Seleccione la 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.
Esta propiedad tiene mucha aplicación si se aplica javascript en la página. Mediante
javascript podemos luego de haber sido cargado el documento modificar el estado de
los controles, habilitando y deshabilitando de acuerdo a los datos que carga el visitante
al sitio.
Ejemplo: Confeccionar un formulario que muestre tres controles de tipo radio.
Mostrar los textos Niños, Adolescentes y Mayores. Deshabilitar el el elemento radio
que corresponde a Niños.
<html>
<head>
<title>Prueba de formulario</title>
</head>
<body>

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

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


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

43. Formulario - text/password y maxlength


Los controles de tipo text y password pueden limitar la cantidad de caracteres que
puede ingresar el usuario a partir de la propiedad maxlength.
Debemos asignarle un valor entero que indica hasta cuantos caracteres está permitido
ingresar.
No hay que confundir el objetivo de la propiedad size con maxlength. Con la propiedad
size solo indicamos la cantidad máxima de caracteres a mostrar dentro del control
antes de hacer scroll de los datos.
Confeccionaremos un formulario que solicite el nombre de usuario y su clave y solo
permitiremos ingresar nombres de usuarios de hasta 20 caracteres y claves de hasta
12.
<html>
<head>
<title>Prueba de formulario</title>
</head>
<body>
<form action="/registrardatos.php" method="post">
Ingrese su nombre:
<input type="text" name="nombre" maxlength="20"
size="20">
<br>
Ingrese su clave:
<input type="password" name="clave" maxlength="12"
size="12">
<br>
<input type="submit" value="enviar">
</form>
</body>
</html>
Cuando ejecute esta página no podremos cargar un nombre de usuario de más de 20
caracteres, el teclado se inhabilita cuando se han ingresado 20 caracteres en el primer
control.
Ejemplo: Confeccionar un formulario que solicite el nombre de usuario y su clave,
solo permitir ingresar en el nombres de usuarios hasta 20 caracteres y la claves hasta
12.
<html>
<head>
<title>Prueba de formulario</title>

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

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


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

44. Formulario - text/password/textarea y


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

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

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


de solo lectura.

45. Formulario - Envío de datos mediante mail.


Hasta ahora siempre configuramos la propiedad action de la marca <form> con el
nombre de un archivo que procesa los datos en el servidor:
<form action="/registrardatos.php" method="post">
Para poder resolver esto debemos conocer el lenguaje PHP o algún otro lenguaje de
servidor.
Conociendo solo HTML la solución es enviar los datos mediante el programa cliente de
mail que esté configurado en la computadora. Para esto inicializamos la propiedad
action de la siguiente forma:
<form action="mailto:pizzasya@pizzas.net" method="post"
enctype="text/plain">
Es decir inicializamos la propiedad action con el texto mailto seguido de dos puntos y la
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.
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. Tengamos en cuenta que no
podemos enviar archivos adjuntos.
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.
Se debe poder ingresar el nombre, dirección y un comentario del problema.
La página HTML es:
<html>
<head>
<title>Prueba de formulario</title>
</head>
<body>
<h2>Reclamos</h2>
<form action="mailto:reclamos@gmail.com" method="post"
enctype="text/plain">
Ingrese su nombre:
<input type="text" name="nombre" size="20">
<br>

Página
70
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.com un mail con el contenido de los
datos cargados en el formulario. El mail contiene el nombre del control y el contenido
ingresado por el operador.
Si queremos que el correo llegue con un 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.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.
Ejemplo: Confeccionar una página que permita hacer un reclamo de reparaciones
y se envíen los datos a una dirección de correo.
Se debe poder ingresar el nombre, dirección y un comentario del problema.
<html>
<head>
<title>Prueba de formulario</title>
</head>
<body>
<h2>Reclamos</h2>
<form action="mailto:reclamos@gmail.com" method="post" enctype="text/plain">
Ingrese su nombre:
<input type="text" name="nombre" size="20">
<br>
Ingrese su 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.


Enviar el pedido a la dirección de correo pizzashumm@gmail.com

46. Formulario - label


Una última etiqueta relacionada con los formularios es la label.
Hasta este momento siempre que queríamos disponer un mensaje antes o después de
un control de formulario lo escribiamos sin más.

Página
71
Existe en HTML un elemento que permite asociar un texto con un control de
formulario. Esto será muy útil si se accede desde un navegador no gráfico o una
persona ciega que utiliza un programa que lee en voz alta el contenido de la página.
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.
 El elemento label tiene su marca de comienzo y fin, entre medio se dispone el
texto a mostrar.
 Para vincular esta label con el elemento input debemos inicializar la propiedad
for con el nombre asignado a la propiedad id del elemento input. 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.php" method="post">
<fieldset>
<legend>Formulario de comentarios.</legend>
<label for="nombre">Ingrese su nombre:</label>
<input type="text" name="nombre" size="30" id="nombre"><br>
<label for="mail">Ingrese su mail:</label>
<input type="text" name="mail" size="50" id="mail"><br>
<label for="comentarios">Comentarios:</label><br>
<textarea name="comentarios" rows="5" cols="60"
id="comentarios"></textarea>
<br>
<input type="submit" value="Enviar">
</fieldset>
</form>
</body>
</html>
Como podemos ver asociamos cada etiqueta con el correspondiente control de
entrada de datos:
<label for="nombre">Ingrese su nombre:</label>
<input type="text" name="nombre" size="30" id="nombre"><br>

<label for="mail">Ingrese su mail:</label>


<input type="text" name="mail" size="50" id="mail"><br>

<label for="comentarios">Comentarios:</label><br>
<textarea name="comentarios" rows="5" cols="60"
id="comentarios"></textarea>
Normalmente las propiedades id y name de los controles de entrada de datos (input,
textarea etc.) se les asigna el mismo nombre, de todos modos no es obligatorio.

Página
72
La propiedad for de la label hace referencia al id del control y no al name, esto es
importante si inicializamos con valores distintos el id y name de los controles.
Ejemplo: Confeccionar un formulario que solicite el ingreso del nombre, mail y
comentarios de un visitante al sitio. Asociar cada control con un elemento label.
<html>
<head>
<title>Prueba de formulario</title>
</head>
<body>
<form action="/registrardatos.php" method="post">
<fieldset>
<legend>Formulario de comentarios.</legend>
<label for="nombre">Ingrese su nombre:</label>
<input type="text" name="nombre" size="30" id="nombre"><br>
<label for="mail">Ingrese su mail:</label>
<input type="text" name="mail" size="50" id="mail"><br>
<label for="comentarios">Comentarios:</label><br>
<textarea name="comentarios" rows="5" cols="60"
id="comentarios"></textarea>
<br>
<input type="submit" value="Enviar">
</fieldset>
</form>
</body>
</html>

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

47. Frames
Con los frames se pueden mostrar más de un archivo HTML en la misma ventana del
navegador.
Podemos hacer que los frames interactuen, por ejemplo al presionar un enlace en un
frame podemos cargar una página en otro frame.
Solo se aconseja emplear frames cuando la situación lo amerita, hay que tener en
cuenta que el uso de frame hace menos accesible el sitio y es mucho más dificil
imprimir su contenido.
Veamos un ejemplo de implementar dos frames:
<html>
<head>
<title>prueba de frames</title>
</head>
<frameset cols="20%,80%">
<frame src="pagina2.html">
<frame src="pagina3.html">
<noframes>
<p>El navegador no soporta frames</p>
</noframes>
</frameset>
</html>
Esta página es la que define la ubicación de los frames dentro del navegador.
La cabecera tiene una sintaxis similar a todas las páginas que hemos visto, pero no
existe el body, en su lugar encontramos el elemento frameset.

Página
73
En este ejemplo dividimos la ventana del navegador en dos secciones que mostrarán
una página HTML cada una, mediante la propiedad cols indicamos cuanto ocupará
cada ventana en porcentaje:
<frameset cols="20%,80%">
En el interior del elemento frameset definimos las dos páginas HTML que deben
mostrarse mediante el elemento frame.
El elemento frame tiene una propiedad llamada src (source que significa fuente) que la
inicializamos con el nombre de la página a mostrar. Así definimos las dos páginas:
<frame src="pagina2.html">
<frame src="pagina3.html">
Otra elemento importante es el noframes donde indicamos un mensaje en el caso que
el navegador no cuente con la capacidad de mostrar frames (podemos disponer
enlaces a las 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 primero
que ocupe el 20% y el segundo el 80% de la ventana.
Principio del formulario
pagina1.html
<html>
<head>
<title>prueba de frames</title>
</head>
<frameset cols="20%,80%">
<frame src="pagina2.html">
<frame src="pagina3.html">
<noframes>
<p>El navegador no soporta frames</p>
</noframes>
</frameset>
</html>
pagina2.html
<html>
<head>

Página
74
<title>prueba de frames</title>
</head>
<body>
<h2>Frame 1</h2>
</body>
</html>
pagina3.html
<html>
<head>
<title>prueba de frames</title>
</head>
<body>
<h2>Frame 2</h2>
</body>
</html>

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

48. Frames - 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.
Veamos con un ejemplo la sintaxis para actualizar un frame a partir del enlace de otro:
pagina1.html
<html>
<head>
<title>prueba de frames</title>
</head>
<frameset cols="20%,80%">
<frame src="pagina2.html">
<frame src="pagina3.html" name="ventanadinamica">
<noframes>
<p>El navegador no soporta frames</p>
</noframes>
</frameset>
</html>
Podemos observar que para el frame que queremos acceder posteriormente para
modificar su contenido debemos inicializar la propiedad name:
<frame src="pagina3.html" name="ventanadinamica">
pagina2.html
<html>
<head>
<title>prueba de frames</title>
</head>
<body>
<h2>Enlaces.</h2>
<ul>
<li><a href="pagina3.html" target="ventanadinamica">Enlace
1</a></li>
<li><a href="pagina4.html" target="ventanadinamica">Enlace
2</a></li>
</ul>
</body>
</html>

Página
75
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 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>
<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>
<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>
<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>
<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>
<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>
<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>
<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>
<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>
<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>
<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
81
<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>
<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>
<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>
<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>
</body>
</html>

Ejemplo: Confeccionar una ventana con dos frame verticales. No permitir


redimensionarlos y no mostrar el borde de los frames. Hacer que el frame de la
derecha siempre muestre la barra de desplazamiento.
pagina1.html
<html>
<head>
<title>prueba de frames</title>
</head>
<frameset cols="200,*">
<frame src="pagina2.html" frameborder="0" noresize>
<frame src="pagina3.html" frameborder="0" scrolling="yes" noresize>
<noframes>
<p>El navegador no soporta frames</p>
</noframes>
</frameset>
</html>
pagina2.html
<html>
<head>
<title>prueba de frames</title>
</head>
<body>
<h1>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>

Página
82
<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>
<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>
<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>
<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>
<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>
<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>
<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>
<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>
<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>
<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>
<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
83
<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>
<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>
<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>
<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>
<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>
</body>
</html>

Practica: Confeccionar una página con dos frames horizontales. En la parte


superior definir un frame con 100 píxeles de alto. Hacer que el mismo no se pueda
redimensionar, no mustre la barra de scroll y no mustre el borde.

51. Frames - Anidamiento de frameset


El lenguaje HTML nos permite definir un frameset en la ubicación de un frame, esto se
logra anidando frameset.
Vamos a crear una página que contenga dos columnas. 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.html
<html>
<head>
<title>prueba de frames</title>

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

Ejemplo: Confeccionar una página que la primer columna tenga un frame y la


segunda columna tenga dos frames. Utilizar frameset anidados para resolver el
problema.
pagina1.html
<html>
<head>
<title>prueba de frames</title>
</head>
<frameset cols="200,*">
<frame src="pagina2.html" noresize>
<frameset rows="70,*">
<frame src="pagina3.html" noresize>
<frame src="pagina4.html" noresize>
</frameset>
<noframes>
<p>El navegador no soporta frames</p>
</noframes>
</frameset>
</html>
pagina2.html
<html>
<head>
<title>prueba de frames</title>
</head>
<body>
<h1>Página A</h1>
</body>
</html>
pagina3.html
<html>
<head>
<title>prueba de frames</title>
</head>
<body>
<h1>Página B</h1>

Página
86
</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. 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. Hacer
que no se puedan redimensionar.
-------------------------------------------------
| |
| |
| |
-------------------------------------------------
| | |
| | |
| | |
| | |
| | |
| | |
| | |
| | |
| | |
| | |
| | |

Página
87
-------------------------------------------------

52. iframes
El HTML dispone de un elemento llamado iframe que permite disponer un frame con
el flujo de la página, similar a disponer una imagen en la página.
Veamos un ejemplo como disponer este tipo de frame tan particular:
pagina1.html
<html>
<head>
<title>prueba de iframes</title>
</head>
<body>
<h1>Esto es una prueba de un iframe</h1>
<iframe src="pagina2.html" width="400" height="200">
No tiene disponible el navegador la capacidad de iframe
</iframe>
<h2>Esto ya está fuera del iframe</h2>
</body>
</html>
Como podemos ver cuando necesitamos agregar el iframe dentro de la página
disponemos:
<iframe src="pagina2.html" width="400" height="200">
No tiene disponible el navegador la capacidad de iframe
</iframe>
Le indicamos el ancho y alto que debe tomar el iframe, la ubicación continúa el flujo de
la página.
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.</h2>
<h2>Este texto está dentro del iframe.</h2>
<h2>Este texto está dentro del iframe.</h2>
<h2>Este texto está dentro del iframe.</h2>
<h2>Este texto está dentro del iframe.</h2>
<h2>Este texto está dentro del iframe.</h2>
<h2>Este texto está dentro del iframe.</h2>
<h2>Este texto está dentro del iframe.</h2>
<h2>Este texto está dentro del iframe.</h2>
<h2>Este texto está dentro del iframe.</h2>
<h2>Este texto está dentro del iframe.</h2>
<h2>Este texto está dentro del iframe.</h2>
<h2>Este texto está dentro del iframe.</h2>
<h2>Este texto está dentro del iframe.</h2>
<h2>Este texto está dentro del iframe.</h2>
<h2>Este texto está dentro del iframe.</h2>
<h2>Este texto está dentro del iframe.</h2>
<h2>Este texto está dentro del iframe.</h2>
<h2>Este texto está dentro del iframe.</h2>
<h2>Este texto está dentro del iframe.</h2>
<h2>Este texto está dentro del iframe.</h2>
<h2>Este texto está dentro del iframe.</h2>
<h2>Este texto está dentro del iframe.</h2>
</body>
</html>

Página
88
Algunas propiedades útiles aplicables a un iframe:
 src Archivo a mostrar dentro del iframe.
 width Ancho en píxeles.
 height Alto en píxeles.
 frameborder Podemos asignarle los valores 1 o 0. Si vale 0 el borde no se
muestra.
 scrolling Los valores posibles de esta propiedad son: "auto","yes","no". Por
defecto está inicializada con el valor "auto". El valor auto significa que el
navegador decide si se debe mostrar la barra de scroll. La mostrará solo si algún
contenido del iframe 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 iframe.
 name Nombre del iframe si queremos acceder desde otra página. Por ejemplo
si queremos actualizar su contenido desde un enlace ubicado en otra página.

Ejemplo: Confeccionar una página que incorpore un iframe de 400 píxeles de


ancho por 200 píxeles de alto.
pagina1.html
<html>
<head>
<title>prueba de iframes</title>
</head>
<body>
<h1>Esto es una prueba de un iframe</h1>
<iframe src="pagina2.html" width="400" height="200">
No tiene disponible el navegador la capacidad de iframe
</iframe>
<h2>Esto ya está fuera del iframe</h2>
</body>
</html>
pagina2.html
<html>
<head>
<title>prueba de iframes</title>
</head>
<body>
<h2>Este texto está dentro del iframe.</h2>
<h2>Este texto está dentro del iframe.</h2>
<h2>Este texto está dentro del iframe.</h2>
<h2>Este texto está dentro del iframe.</h2>
<h2>Este texto está dentro del iframe.</h2>
<h2>Este texto está dentro del iframe.</h2>
<h2>Este texto está dentro del iframe.</h2>
<h2>Este texto está dentro del iframe.</h2>
<h2>Este texto está dentro del iframe.</h2>
<h2>Este texto está dentro del iframe.</h2>
<h2>Este texto está dentro del iframe.</h2>
<h2>Este texto está dentro del iframe.</h2>
<h2>Este texto está dentro del iframe.</h2>
<h2>Este texto está dentro del iframe.</h2>
<h2>Este texto está dentro del iframe.</h2>
<h2>Este texto está dentro del iframe.</h2>
<h2>Este texto está dentro del iframe.</h2>
<h2>Este texto está dentro del iframe.</h2>
<h2>Este texto está dentro del iframe.</h2>

Página
89
<h2>Este texto está dentro del iframe.</h2>
<h2>Este texto está dentro del iframe.</h2>
<h2>Este texto está dentro del iframe.</h2>
<h2>Este texto está dentro del iframe.</h2>
<h2>Este texto está dentro del iframe.</h2>
</body>
</html>

Practica: Confeccionar una página que muestre dos iframes de 300*300 píxeles
cada uno. Hacer que las barras de desplazamiento siempre esten visibles.

53. Declaración DOCTYPE.


Hasta ahora no hemos hablado de un concepto de vital importancia que es la
utilización de elementos HTML estándares. De todos modos no hemos introducido
elementos HTML propietarios o desaprobados (ej. font, center etc.)
La organización que define los estándares para la web es W3C.
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.
La versión más actual de HTML es la 4.01.
Ahora introduciremos una nueva sección de nuestra página que es la declaración del
tipo de documento (DTD Document Type Declaration), esta sección se ubica en la
primera línea del archivo HTML, es decir antes de la marca html.
Según el rigor de HTML 4.01 utilizado podemos declararla como:
Declaración transitoria:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
Declaración estrícta:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
Veamos la sintaxis para definir la sección del DOCTYPE, la primera diferencia con
cualquier otro elemento HTML es que el caracter siguiente del < es el signo de
admiración (!), luego debe ir la palabra DOCTYPE indicando que se trata de un archivo
HTML. 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.01 Transitional//EN"
Si es HTML estrícto
"-//W3C//DTD HTML 4.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.01, discriminando entre
HTML estricto y transitorio.
Porqué utilizar HTML transitional, 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.
Para ver si una página cumple el estandar específico podemos acceder a un programa
validador que se encuentra en validator.w3.org

Página
90
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.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Enlaces a periódicos</title>
</head>
<body>
<ol>
<li>Costa Rica
<ul>
<li><a href="http://www.nacion.com">La Nación</a></li>
<li><a href="http://www.aldia.co.cr">Al Dia</a></li>
<li><a href="http://www.diarioextra.com">La Extra</a></li>
</ul>
</li>
<li>España
<ul>
<li><a href="http://www.elpais.es">El País Digital</a></li>
<li><a href="http://www.abc.es">ABC</a></li>
<li><a href="http://www.elmundo.es">El Mundo</a></li>
</ul>
</li>
<li>México
<ul>
<li><a href="http://www.jornada.unam.mx">La Jornada</a></li>
<li><a href="http://www.el-universal.com.mx">El Universal</a></li>
</ul>
</li>
</ol>
</body>
</html>
Pruebe de borrar el elemento title, tanto su contenido como las marcas de comienzo y
final. Valide nuevamente.
Pruebe de borrar la marca <ol> y valide.

54. Declaración DOCTYPE. HTML Transitional


Cuando indicamos que una página utiliza HTML Transitional podemos hacer uso de
algunos elementos HTML de presentacion (fuentes, alineamiento, colores), además la
ubicación y anidamiento de elementos es más elástico.
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.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
</head>
<body>
PHP - Java - JavaScript - C - C++
</body>
</html>
Como veras después que lo valides dará un error indicando que faltan datos en la
marca head. Como mínimo deberemos agregar el elemento title.

Página
91
Luego la página queda:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Mi primer pagina</title>
</head>
<body>
PHP - Java - JavaScript - C - C++
</body>
</html>
Ahora prácticamente valida correctamente, solo le falta un meta con la descripción de
codificación:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Mi primer pagina</title>
</head>
<body>
PHP - Java - JavaScript - C - C++
</body>
</html>
Ahora si está totalmente correcta.
Ejemplo: Confeccionar la primer página del tutorial, modificar para que valide el
código HTML 4.01 Transitional. Luego copie y pegue el código HTML en el sitio de
validación validator.w3.org
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Mi primer pagina</title>
</head>
<body>
PHP - Java - JavaScript - C - C++
</body>
</html>

Practica: Confeccione una página que contenga una lista anidada y una tabla.
Hacer la página que valide con HTML 4.01 transitorio. Luego copie y pegue el código
HTML en el sitio de validación validator.w3.org

55. Declaración DOCTYPE. HTML Estricto


En el DTD Estricto de 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.
Los webmaster deben usar el DTD Estricto siempre que sea posible, pero pueden usar
el DTD Transicional si es necesario el soporte de elementos y atributos de
presentación.
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
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 - Java - JavaScript - C - C++
</body>
</html>
Con los cambios para que valide:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Página de prueba del DTD</title>
</head>
<body>
<p>PHP - Java - JavaScript - C - C++</p>
</body>
</html>
Que modificaciones hemos hecho?
1. Definimos el DOCTYPE
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
2. Agregamos el meta:
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
3. Definimos el elemento title:
<title>Página de prueba del DTD</title>
4. Definimos el texto de la página dentro de un párrafo (no puede un texto depender
directamente del body):
<p>PHP - Java - JavaScript - C - C++</p>
Todos estos cambios son obligatorios para que valide como HTML 4.01 estricto.
Problema 2: Confeccionar una página principal que tenga un hipervínculo a otra
página secundaria.
<html>
<head>
</head>
<body>
<h1>Página principal.</h1>
<a href="pagina2.html">Noticias</a>
</body>
</html>
Con los cambios para que valide:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Página de prueba del DTD</title>
</head>
<body>
<h1>Página principal.</h1>

Página
93
<p><a href="pagina2.html">Noticias</a></p>
</body>
</html>
Que modificaciones hemos hecho?
1. Definimos el DOCTYPE:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
2. Agregamos el meta:
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
3. Definimos el elemento title:
<title>Página de prueba del DTD</title>
4. 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.html">Noticias</a></p>
Problema 3: Confeccionar un formulario que solicite el ingreso del nombre de un
usuario y su clave. Mostrar asteriscos donde se ingresa la clave. Disponer dos botones,
uno para el 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>
Con los cambios para que valide:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Página de prueba del DTD</title>
</head>
<body>
<form action="/registrardatos.php" method="post">
<p>
Ingrese su nombre:
<input type="text" name="nombre" size="20">
<br>
Ingrese su clave:
<input type="password" name="clave" size="12">
<br>
<input type="submit" value="enviar">
<input type="reset" value="borrar">
</p>
</form>
</body>

Página
94
</html>
1. Definimos el DOCTYPE
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
2. Agregamos el meta:
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
3. Definimos el elemento title:
<title>Página de prueba del DTD</title>
4. Definimos todo el contenido del form dentro de un párrafo. No se puede
disponer texto o controles de formulario que dependan directamente del
elemento form.
<p> Ingrese su nombre: <input type="text" name="nombre" size="20"> <br>
Ingrese su clave: <input type="password" name="clave" size="12"> <br> <input
type="submit" value="enviar"> <input type="reset" value="borrar"> </p>
Todos estos cambios son obligatorios para que valide como HTML 4.01 estricto.
Ejemplo: Confeccionar la primer página del tutorial, modificar para que valide el
código HTML 4.01 Estricto. Luego copie y pegue el código HTML en el sitio de
validación validator.w3.org
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Mi primer pagina</title>
</head>
<body>
<p>PHP - Java - JavaScript - C - C++</p>
</body>
</html>

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

56. Declaración DOCTYPE. para Frames


Cuando empleamos frames debemos utilizar una declaración distinta para el elemento
DOCTYPE.
Luego la sección del DOCTYPE para una página que implementa frames debe ser:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
"http://www.w3.org/TR/html4/frameset.dtd">
Es decir se incorpora la palabra Frameset donde disponíamos la palabra Transitional o
estaba vacía si validamos HTML estrícto.
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.
pagina1.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
"http://www.w3.org/TR/html4/frameset.dtd">
<html>

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

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

Página
97
</body>
</html>

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

57. Validación de la página a través de un enlace.


La W3C nos permite disponer un ícono como enlace a su validador de páginas HTML:
<p>
<a href="http://validator.w3.org/check?uri=referer"><img
src="http://www.w3.org/Icons/valid-html401"
alt="Valid HTML 4.01 Strict" height="31" width="88"></a>
</p>
Confeccionemos una página y probemos el enlace al validador:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Mi primer pagina</title>
</head>
<body>
<p>PHP - Java - JavaScript - C - C++</p>
<p>
<a href="http://validator.w3.org/check?uri=referer"><img
src="http://www.w3.org/Icons/valid-html401"
alt="Valid HTML 4.01 Strict" height="31" width="88"></a>
</p>
</body>
</html>
Solamente agregamos el párrafo que contiene el hipervínculo al sitio que realiza la
validación. Gran cantidad de sitios tienen este ícono o alguno similar para indicar que
sus páginas cumplen con el HTML Transitional o estrícto.
Ejemplo: Confeccionar una página que muestre los nombres de 5 lenguajes de
programación separados por un guión. Agregar un enlace a la página de validación de
HTML.
pagina1.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Mi primer pagina</title>
</head>
<body>
<p>PHP - Java - JavaScript - C - C++</p>
<p>
<a href="http://validator.w3.org/check?uri=referer"><img
src="http://www.w3.org/Icons/valid-html401"
alt="Valid HTML 4.01 Strict" height="31" width="88"></a>
</p>
</body>
</html>

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

Página
99
Aquí comentarios.
Aquí comentarios.
Aquí comentarios.
Aquí comentarios.
Aquí comentarios.
Aquí comentarios.
Aquí comentarios.
Aquí comentarios.
Aquí comentarios.
Aquí comentarios.
Aquí comentarios.
Aquí comentarios.
</p>
</div>
</body>
</html>
Veamos como definimos los elementos span:
<span style="background-color:#eeee00">comentarios.</span>
Como podemos ver luego en el resultado de la página el texto "comentarios" aparece
con un color amarillo de fondo. El resto del párrafo continúa inmediatamente a la
derecha, es decir el elemento span no produce salto de línea. Para ver la diferencia con
el elemento div pruebe de remplazar la palabra span por div y vea los resultados
(recuerde cambiar tanto la marca de apertura como la de cerrado del span) Como verá
el texto aparece en un bloque independiente.
El div agrupa todos los 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;text-indent:20px">
Aquí <span style="background-color:#eeee00">comentarios.</span>
Aquí comentarios.
.
.
.
.
Aquí comentarios.
Aquí comentarios.
</p>
</div>

Ejemplo: Listar una serie de nombres y un bloque de comentarios para cada


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

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

Practica: Confeccionar una página que contenga dos divisiones con una serie de
párrafos cada una. Disponer color de fondo distinto para cada sección. En la segunda
sección mostrar el mismo texto de la primera sección pero con algunas palabras
tachadas.

59. Elementos y propiedades de HTML que no se


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

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

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

2. Definición de estilos a nivel de marca HTML.


Es la forma más fácil pero menos recomendada para aplicación de un estilo a una
marca HTML. Se define en la propiedad style los estilos a definir para dicha marca.

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

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

</body>
</html>

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

Página
104
3. 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.
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.
Problema: Mostrar dos títulos con texto de color rojo sobre fondo amarillo.
<html>
<head>
<title>Problema</title>
<style type="text/css">
h1 {color:#ff0000;background-color:#ffff00}
</style>
</head>
<body>
<h1>Primer 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>
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. Podemos observar que es mucho
más eficiente que definir los estilos directamente sobre las marcas HTML.
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.
pagina1.html
<html>
<head>
<title>Problema</title>
<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
</body>
</html>

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

4. Propiedades relacionadas a fuentes.


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

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

Página
107
<html>
<head>
<title>Problema</title>

<style type="text/css">
h1 {
font-family:times new roman; font-size:30px;
font-style:italic; font-weight:bold;
}
h2 {
font-family:verdana; font-size:20px;
}
</style>

</head>
<body>
<h1>Titulo de nivel 1</h1>
<h2>Titulo de nivel 2</h2>
</body>
</html>

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

5. Agrupación de varias marcas HTML con una


misma regla de estilo.
Esta característica nos permite ahorrar la escritura de reglas duplicadas para diferentes
marcas HTML.
Supongamos que queremos la misma fuente y color para las marcas h1,h2 y h3 luego
podemos implementarlo de la siguiente manera:
<html>
<head>
<title>Problema</title>
<style type="text/css">
h1,h2,h3 {
font-family:verdana;
color:#0000ff;
}
</style>
</head>
<body>
<h1>Título de nivel 1</h1>
<h2>Título de nivel 2</h2>
<h3>Título de nivel 3</h3>
</body>
</html>
Es decir, separamos por coma todas las marcas a las que se aplicará la misma regla de
estilo:
h1,h2,h3 {
font-family:verdana;
color:#0000ff;
}

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

Página
108
Pagina1.html
<html>
<head>
<title>Problema</title>
<style type="text/css">
h1,h2,h3 {
font-family:verdana;
color:#0000ff;
}
</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, 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. Definición de varias reglas para una misma


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

Página
109
<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>
Es decir, podemos inicializar un conjunto de marcas HTML con una serie de
propiedades de estilo comunes. Luego agregamos en forma individual las propiedades
no comunes a dichas marcas:
h1,h2,h3,h4,h5,h6 {
font-family:Verdana;
}
h1 {
font-size:40px;
}
Es decir, a la marca h1 realmente le hemos definido 2 propiedades: font-family y font-
size. Lo mismo para las otras marcas HTML.
Ejemplo: Definir todas las marcas de cabecera (h1, h2, h3, h4, h5, h6) con la misma
fuente (Verdana) pero tamaños de fuente distinta.
pagina1.html
<html>
<head>
<title>Problema</title>
<style type="text/css">
h1,h2,h3,h4,h5,h6 {
font-family:Verdana;
}
h1 {
font-size:40px;
}
h2 {
font-size:30px;
}
h3 {
font-size:25px;
}
h4 {
font-size:20px;
}
h5 {
font-size:15px;
}
h6 {
font-size:10px;
}
</style>
</head>
<body>
<h1>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
párrafo. 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.

7. Propiedades relacionadas al texto.


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

Página
111
}
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
Luego imprimir contenido dentro de las marcas h1, em y p.
Ejemplo 2:
Definir dos reglas más de estilo al problema uno, que sobrescriban la propiedad color:
em {
color:#008800;
}
p {
color:#999999;
}
pagina1.html
<html>
<head>
<title>Problema</title>
<style type="text/css">
body {
color:#0000ff;
font-family:verdana;
}
</style>
</head>
<body>
<h1>Este es un 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>
pagina2.html
<html>
<head>
<title>Problema</title>
<style type="text/css">
body {
color:#0000ff;
font-family:verdana;
}
em {
color:#008800;
}
p {
color:#999999;
}
</style>
</head>
<body>
</body>
<h1>Este es un 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>

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

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

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

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


el color de la misma será verde. Pero si la marca b está contenida por la marca h1 el
color debe ser rojo.
La segunda página muestra un estilo en función del contexto dependiendo de dos
marcas que la contengan. Pinta de rojo un texto contenido por la marca em siempre y
cuando este contenido por la marca h1 y div (en ese orden).
pagina1.html
<html>
<head>
<title>Problema</title>
<style type="text/css">
p b{
color:#0000ff;
}
h1 b{
color:#ff0000;
}
</style>
</head>
<body>
<h1>Acá tenemos un título de nivel uno, 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.html">Siguiente página</a>
</body>
</html>
pagina2.html
<html>
<head>
<title>Problema</title>
<style type="text/css">
div h1 em {
color:#ff0000;

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

Practica: Definir distintas escalas de grises para los bloques encerrados por la
marca HTML em que se encuentren contenidos por las marcas h1,h2,h3,h4,h5 y h6.
Una escala de grises que podemos utilizar es:
color:#dddddd;
color:#cccccc;
color:#bbbbbb;
color:#aaaaaa
color:#999999
color:#888888;
Aparecen los bloques de más claro a más oscuro (cuando los tres valores son iguales
(rojo,verde,azul) estamos en presencia de un gris (salvo el #000000 y el #ffffff).

11. Definición de hojas de estilo en un archivo


externo.
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. 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.
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.
Este archivo contendrá las reglas de estilo (igual como las hemos visto hasta ahora)
pero estarán separadas del archivo HTML.
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. 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).
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.
Otra ventaja es que cuando un navegador solicita una página, se le envía el archivo
HTML y el archivo CSS, quedando guardado este último archivo en la caché de la
computadora, con lo cual, en las sucesivas páginas que requieran el mismo archivo de
estilos, ese mismo archivo se rescata de la caché y no requiere que el servidor web se
lo reenvíe (ahorrando tiempo de transferencia).
Ahora veremos la primera página HTML que tiene asociada una hoja de estilo en un
archivo externo. El archivo HTML es (pagina1.html):
<html>
<head>
<title>Problema</title>
<link rel="StyleSheet" href="estilos.css" type="text/css">
</head>

Página
120
<body>
<h1>Definición de hojas de estilo en un archivo externo.</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. 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.
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.
</p>
</body>
</html>
El archivo que tiene las reglas de estilo es (estilos.css):
body {
background-color:#eafadd;
}
h1 {
color:#0000cc;
font-family:times new roman;
font-size:25px;
text-align:center;
text-decoration:underline;
}
p {
color:#555555;
font-family:verdana;
text-align:justify;
}
Como podemos observar, para indicar el archivo de estilos externo, debemos agregar
en la cabecera (head) del archivo HTML la siguiente marca:
<link rel="StyleSheet" href="estilos.css" type="text/css">
La propiedad href hace referencia al archivo externo que afectará la presentación de
esta página. En la propiedad type, indica al navegador cual es el formato de archivo.El
atributo rel se usa para definir la relación entre el archivo enlazado y el documento
HTML.
Sólo queda probar esta página desde la sección de "Problema Resuelto".
De ahora en más nos acostumbraremos a trabajar con hojas de estilo definidas en un
archivo externo, 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. Definir reglas de estilos para las marcas body, h1 y p.
pagina1.html
<html>
<head>
<title>Problema</title>
<link rel="StyleSheet" href="estilos.css" type="text/css">
</head>
<body>
<h1>Definición de hojas de estilo en un archivo externo.</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. 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.
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.
</p>

Página
121
</body>
</html>
estilos.css
body {
background-color:#eafadd;
}
h1 {
color:#0000cc;
font-family:times new roman;
font-size:25px;
text-align:center;
text-decoration:underline;
}
p {
color:#555555;
font-family:verdana;
text-align:justify;
}
Crear una página web que contenga una cabecera de nivel 1 (h1), luego una cabecera
de nivel 2 (h2) y un párrafo.
Definir reglas de estilo para las tres marcas h1,h2 y p. Inicializar propiedades vistas en
conceptos anteriores. Intentar el planteo de una página que muestre el contenido de
la forma más clara posible.

12. Definición de estilos por medio de clases.


En muchas situaciones una regla de estilo puede ser igual para un conjunto de marcas
HTML, en esos casos conviene plantear una regla de estilo con un nombre genérico
que posteriormente se puede aplicar a varias marcas de HTML.
Para conocer la sintaxis para la definición de clases veamos un ejemplo, la
pagina1.html es:
<html>
<head>
<title>Problema</title>
<link rel="StyleSheet" href="estilos.css" type="text/css">
</head>
<body>
<h1 class="resaltado">Titulo de nivel 1</h1>
<p>
Este parrafo muestra el resultado de aplicar la clase .resaltado en la última
<span class="resaltado">palabra.</span>
</p>
</body>
</html>
La hoja de estilo externa (estilos.css) es:
body {
background-color:#eeeeee;
}
.resaltado{
color:#000000;
background-color:#ffff00;
font-style:italic;
}
La sintaxis para definir una clase aplicable a cualquier marca HTML es:
.resaltado{
color:#000000;

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

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


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

Página
123
}
Luego, en la página html, definir un título con nivel h1 (subrayar todo el título). Luego
un párrafo que tenga algunas palabras subrayadas y otras tachadas (utilizar la marca
span para asignar estilos a una palabra).
Practica 2: Definir estas dos reglas en la hoja de estilo externa. Luego crear una
página HTML que contenga 3 preguntas y 3 respuestas. A cada pregunta y respuesta
disponerla en un párrafo distinto. Asignar los estilos .pregunta y .respuesta
.pregunta {
font-family:verdana;
font-size:14px;
font-style:italic;
color:#0000aa;
}
.respuesta {
font-family:verdana;
font-size:12px;
font-style:normal;
text-align:justify;
color:#555555;
}

13. Definición de estilos por medio de Id.


La diferencia fundamental en la definición de un estilo por medio de Id con respecto a
las clases, es que sólo podremos aplicar dicho estilo a una sola marca dentro de la
página HTML.
La sintaxis para definir un estilo por medio de Id es:
#cabecera {
font-family:Times New Roman;
font-size:30px;
text-align:center;
color:#0000ff;
background-color:#bbbbbb;
}
Es decir, utilizamos el caracter numeral (#) para indicar que se trata de un estilo de tipo
Id.
Luego, 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.
Los dos archivos completos del ejemplo entonces quedan (pagina1.html):
<html>
<head>
<title>Problema</title>
<link rel="StyleSheet" href="estilos.css" type="text/css">
</head>
<body>
<div id="cabecera">
<h1>Título de la cabecera</h1>
</div>
</body>
</html>
Y el archivo de estilos (estilos.css) es:
#cabecera {

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

Ejemplo: Crear un estilo por medio de un Id, luego crear una página con un bloque
div, definir la propiedad id con el nombre del estilo creado.
pagina1.html
<html>
<head>
<title>Problema</title>
<link rel="StyleSheet" href="estilos.css" type="text/css">
</head>
<body>
<div id="cabecera">
<h1>Título de la cabecera</h1>
</div>
</body>
</html>
estilos.css
#cabecera {
font-family:Times New Roman;
font-size:30px;
text-align:center;
color:#0000ff;
background-color:#bbbbbb;
}

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

14. Propiedades relacionadas al borde de una


marca HTML.
Debemos ahora hacernos la idea que todo elemento que se crea dentro de una página
HTML genera una caja. Imaginemos los controles que hemos creado h1,h2,h3,p,em,
etc.; si fijamos la propiedad background-color veremos que el contenido se encuentra
dentro de un rectángulo.
Podemos acceder a las propiedades del borde de ese rectángulo mediante las CSS; 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.html
<html>
<head>
<title>Problema</title>
<link rel="StyleSheet" href="estilos.css" type="text/css">

</head>
<body>
<p class="pregunta">Quién descubrió América

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

Ejemplo: Definir dos párrafos que representen una pregunta y una respuesta.
Inicializar estilos para el borde.
pagina1.html
<html>
<head>
<title>Problema</title>
<link rel="StyleSheet" href="estilos.css" type="text/css">
</head>
<body>
<p class="pregunta">Quién descubrió América y en que año fue?</p>
<p class="respuesta">Colón en 1492</p>
</body>
</html>
estilos.css
.pregunta {
background-color:#ffff00;
border-width:1px;

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

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

15. Más propiedades relacionadas al borde de


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

border-top-style
border-right-style
border-bottom-style
border-left-style

border-top-color
border-right-color
border-bottom-color
border-left-color
Un ejemplo inicializando estas propiedades:
<html>
<head>
<title>Problema</title>
<link rel="StyleSheet" href="estilos.css" type="text/css">
</head>
<body>
<h1 class="titulopagina">El blog del pensador</h1>
</body>
</html>
y el archivo de estilos:
.titulopagina {
background-color:#ffffcc;
text-align:center;
font-family:verdana;
font-size:40px;

Página
127
border-top-width:1px;
border-right-width:3px;
border-bottom-width:3px;
border-left-width:1px;

border-top-style:dotted;
border-right-style:solid;
border-bottom-style:solid;
border-left-style:dotted;

border-top-color:#ffaa00;
border-right-color:#ff0000;
border-bottom-color:#ff0000;
border-left-color:#ffaa00;
}
Es decir, esta metodología de inicializar el borde de un control HTML, tiene utilidad si
los mismos varían en grosor, estilo o color.
Veremos más adelante que hay otras formas de inicializar los bordes de las marcas que
reducen el texto a tipear, pero no son las más adecuadas cuando uno está
comenzando a estudiar CSS.
Ejemplo: Crear una clase .titulopagina que inicialice independientemente el
grosor, estilo y color de la propiedad del borde.
pagina1.html
<html>
<head>
<title>Problema</title>
<link rel="StyleSheet" href="estilos.css" type="text/css">
</head>
<body>
<h1 class="titulopagina">El blog del pensador</h1>
</body>
</html>
estilos.css
.titulopagina {
background-color:#ffffcc;
text-align:center;
font-family:verdana;
font-size:40px;

border-top-width:1px;
border-right-width:3px;
border-bottom-width:3px;
border-left-width:1px;

border-top-style:dotted;
border-right-style:solid;
border-bottom-style:solid;
border-left-style:dotted;

border-top-color:#ffaa00;
border-right-color:#ff0000;
border-bottom-color:#ff0000;
border-left-color:#ffaa00;
}

Practica: Crear una clase .titulosecundario que inicialice el borde superior e


inferior con ancho de 2 pixeles y los bordes laterales con cero pixel. A su elección
queda el estilo y color.

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

padding:20px;
}

Página
129
Con la marca HTML pre, se respetan los espacios y retornos de carro que hayamos
puesto en el texto fuente. Este estilo de texto es muy adecuado cuando queremos
mostrar el código fuente de un programa.
Ejemplo: Mostrar con a marca pre de HTML un pequeño programa de Java. Hacer
que el mismo aparezca en un rectangulo amarillo, con borde y una separación entre el
borde y el contendio de 20 pixeles.
pagina1.html
<html>
<head>
<title>Problema</title>
<link rel="StyleSheet" href="estilos.css" type="text/css">
</head>
<body>
<pre class="codigofuente">
public class Rectangulo{
//atributos
int alto;
int ancho;
boolean relleno;
//métodos
public int devolverArea(){
return alto*ancho;
}
public void rellenar(boolean r){
relleno=r;
}
public void cambiarTamano(int an, int al){
ancho=an;
alto=al;
}
public Rectangulo() {// constructor
alto=20;
ancho=10;
relleno=false;
}
}//fin clase Rectangulo

</pre>
</body>
</html>
estilos.css
.codigofuente {
font-family:Courier;
font-size:12px;
background-color:#ffffcc;
border-width:1px;
border-style:dotted;
border-color:#ffaa00;

padding:20px;
}

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

17. Propiedades relacionadas al margen de una


marca HTML.

Página
130
Otra serie de propiedades relacionadas al contorno de una marca HTML son:
margin
margin-top
margin-right
margin-bottom
margin-left
El margen está después del borde.
Veamos un ejemplo, la página HTML muestra dos párrafos con cero pixeles de margen:
<html>
<head>
<title>Problema</title>
<link rel="StyleSheet" href="estilos.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;
margin:0px;
}
Pruebe modificar el valor para la propiedad margin y vea el resultado de la página.
El modelo final de caja se puede resumir con esta imagen:

Ejemplo: Mostrar dos párrafos con un margen de cero pixel.


pagina1.html
<html>
<head>
<title>Problema</title>
<link rel="StyleSheet" href="estilos.css" type="text/css">
</head>
<body>
<p>Primer párrafo</p>
<p>Segundo párrafo</p>
</body>
</html>
estilos.css
p {
background-color:#ffffaa;
margin:0px;

Página
131
}

Practica: Disponer títulos de primer y segundo nivel con un margen de 5 pixeles.

18. Propiedades relacionadas a listas.


Las listas se utilizan para enumerar una serie de elementos, se utiliza la marca HTML ul
(Unordered List), y cada item de la lista con la marca HTML li (List Item).
Las CSS nos permiten configurar las listas por medio de tres propiedades:
list-style-type
list-style-position
list-style-image
A list-style-type puede 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.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
<li>Brasil</li>
<li>Uruguay</li>
<li>Argentina</li>
</ul>
<ul class="romanominuscula">
<li>Brasil</li>
<li>Uruguay</li>
<li>Argentina</li>
</ul>
<ul class="romanomayuscula">
<li>Brasil</li>
<li>Uruguay</li>
<li>Argentina</li>
</ul>
<ul class="letrasminusculas">
<li>Brasil</li>
<li>Uruguay</li>
<li>Argentina</li>
</ul>
<ul class="letrasmayusculas">
<li>Brasil</li>
<li>Uruguay</li>
<li>Argentina</li>
</ul>
</body>
</html>
Luego la hoja de estilo es:
ul.vacio{
list-style-type:none;
}
ul.circulorelleno{
list-style-type:disc;
}
ul.decimal{
list-style-type:decimal;
}
ul.romanominuscula{
list-style-type:lower-roman;
}
ul.romanomayuscula{
list-style-type:upper-roman;
}
ul.circulovacio{
list-style-type:circle;
}
ul.cuadrado{
list-style-type:square;
}
ul.letrasminusculas{
list-style-type:lower-alpha;
}
ul.letrasmayusculas{
list-style-type:upper-alpha;
}
Lo que podemos ver es que cuando definimos las clases, le antecedemos al punto, el
nombre de la marca donde se aplica dicha clase (en este caso ul, es decir que esta
clase sólo tiene sentido aplicarla a dicha marca).
Ejemplo: Probar todos los valores posibles que puede tomar la propiedad list-style-
type.
pagina1.html
<html>

Página
133
<head>
<title>Problema</title>
<link rel="StyleSheet" href="estilos.css" type="text/css">
</head>
<body>
<ul class="vacio">
<li>Brasil</li>
<li>Uruguay</li>
<li>Argentina</li>
</ul>
<ul class="circulorelleno">
<li>Brasil</li>
<li>Uruguay</li>
<li>Argentina</li>
</ul>
<ul class="circulovacio">
<li>Brasil</li>
<li>Uruguay</li>
<li>Argentina</li>
</ul>
<ul class="cuadrado">
<li>Brasil</li>
<li>Uruguay</li>
<li>Argentina</li>
</ul>
<ul class="decimal">
<li>Brasil</li>
<li>Uruguay</li>
<li>Argentina</li>
</ul>
<ul class="romanominuscula">
<li>Brasil</li>
<li>Uruguay</li>
<li>Argentina</li>
</ul>
<ul class="romanomayuscula">
<li>Brasil</li>
<li>Uruguay</li>
<li>Argentina</li>
</ul>
<ul class="letrasminusculas">
<li>Brasil</li>
<li>Uruguay</li>
<li>Argentina</li>
</ul>
<ul class="letrasmayusculas">
<li>Brasil</li>
<li>Uruguay</li>
<li>Argentina</li>
</ul>
</body>
</html>
estilos.css
ul.vacio{
list-style-type:none;
}
ul.circulorelleno{
list-style-type:disc;
}
ul.decimal{
list-style-type:decimal;
}
ul.romanominuscula{
list-style-type:lower-roman;

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

Practica: Confeccionar una lista con los nombres de países que jugaron el mundial
de Alemania 2006 (mostrar sólo los cuatro primeros puestos, junto con la posición que
obtuvieron).

19. Propiedades relacionadas al fondo


(background)
Hasta ahora hemos probado y utilizado la propiedad background-color para fijar el
color de fondo del contenido de una marca HTML (body, h1, h2, p, etc.).
Hay otras propiedades relacionadas al fondo que nos permiten, entre otras cosas,
disponer un archivo de imagen. Las propiedades relacionadas al background y sus
valores son:
background-color
background-image
background-repeat
background-position
background-attachment
Veamos un ejemplo de disponer una imagen sobre el fondo de la página:
<html> <head> <title>Problema</title> <link rel="StyleSheet"
href="estilos.css" type="text/css"> </head> <body>
</body> </html>
La hoja de estilo queda:
body {
background-image:url(../fondo.jpg);
}
La única propiedad que hemos inicializado es background-image indicando el nombre
del archivo de imagen a mostrar. Como se encuentra en la carpeta inmediatamente
superior debemos indicar con ../
La imagen se repite en x e y hasta llenar la página por completo, ya que por defecto
background-repeat está inicializada con el valor repeat, probar de modificar el estilo
primero con:
body {
background-image:url(../fondo.jpg);
background-repeat:repeat-x;
}
Luego con:
body {

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

Página
136
background-image:url(../fondo.jpg);
background-repeat:repeat-y;
}
Y por último:
body {
background-image:url(../fondo.jpg);
background-repeat:no-repeat;
}
pagina1.html
<html>
<head>
<title>Problema</title>
<link rel="StyleSheet" href="estilos.css" type="text/css">
</head>
<body>
</body>
</html>
estilos.css
body {
background-image:url(../fondo.jpg);
}

Practica: Definir la imagen fondo.jpg como fondo de la página, luego inicializar y


probar la propiedad background-attachment con los dos valores posibles (scroll/fixed).
body {
background-image:url(../fondo.jpg);
background-repeat:no-repeat;
background-attachment:scroll;/*luego probar con fixed*/
}
Para probar el efecto que produce esta propiedad debe ingresar en el body de la
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).

20. Propiedades relacionadas a fuentes


(FORMATO RESUMIDO)
Vimos anteriormente una serie de propiedades relacionadas a la fuente:
font-family
font-size
font-style
font-weight
font-variant
En situaciones donde necesitemos inicializar varias de estas propiedades CSS nos
permite utilizar una propiedad que engloba a todas estas:
font
Podemos indicar en cualquier orden font-weight, font-style, font-variant y luego los
valores obligatorios font-size y font-family en ese orden.
Como ejemplo tenemos:
<html>
<head>
<title>Problema</title>
<link rel="StyleSheet" href="estilos.css" type="text/css">
</head>
<body>

Página
137
<p>Hola Mundo</p>
</body>
</html>
Luego el archivo de estilos:
p {
font:bold italic 25px verdana;
}
Es importante recordar que font-size y font-family deben ser los últimos valores
inicializados y en ese orden. No debemos separar por coma.
Ejemplo: Definir la propiedad font para la marca p utilizando el formato reducido
de inicialización.
pagina1.html
<html>
<head>
<title>Problema</title>
<link rel="StyleSheet" href="estilos.css" type="text/css">
</head>
<body>
<p>Hola Mundo</p>
</body>
</html>
estilos.css
p {
font:bold italic 25px verdana;
}

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

21. Propiedades relacionadas al border


(FORMATO RESUMIDO)
Podemos inicializar todos los bordes con una sola propiedad:
border
Debemos indicar el border-width border-style border-color
No debemos separarlas por coma.
Por otro lado podemos inicializar cada borde con:
border-top
border-right
border-bottom
border-left
Debemos indicar el border-(top/right/bottom/left)-width border-style border-color
Un ejemplo nos permitirá ver esta otra forma de inicializar los bordes de una marca
HTML:
<html>
<head>
<title>Problema</title>
<link rel="StyleSheet" href="estilos.css" type="text/css">
</head>
<body>
<h1 class="tituloprincipal">Propiedad border</h1>
<p class="comentarios">Debemos indicar el border-width border-style
border-color</p>

Página
138
</body>
</html>
Y la hoja de estilo definida para esta página es:
h1.tituloprincipal{
border:5px solid #ff0000;
}
p.comentarios{
border-top:1px solid #ffff00;
border-right:1px none #ffff00;
border-bottom:1px solid #ffff00;
border-left:1px none #ffff00;
}
Tener en cuenta que cuando le antecedemos el nombre de la marca HTML al nombre
de la clase: h1.tituloprincipal estamos indicando que dicha clase sálo se puede aplicar a
dichas marcas. De todos modos, si le sacamos el nombre de la marca HTML funciona
igual.
Ejemplo: Veamos las siguientes paginas:
pagina1.html
<html>
<head>
<title>Problema</title>
<link rel="StyleSheet" href="estilos.css" type="text/css">
</head>
<body>
<h1 class="tituloprincipal">Propiedad border</h1>
<p class="comentarios">Debemos indicar el border-width border-style border-
color</p>
</body>
</html>
estilos.css
h1.tituloprincipal{
border:5px solid #ff0000;
}
p.comentarios{
border-top:1px solid #0000ff;
border-right:1px none #0000ff;
border-bottom:1px solid #0000ff;
border-left:1px none #0000ff;
}

Practica: Confeccionar una página que disponga una línea en la parte inferior y
superior de los títulos de nivel 1,2 y 3. Inicializar las propiedades border-top y border-
bottom para dicho cometido.

22. Propiedades relacionadas al padding


(FORMATO RESUMIDO)
Podemos inicializar el padding de una marca HTML en forma resumida con:
padding:padding-top padding-right padding-bottom padding-left
si indicamos un único valor se aplica a los cuatro lados:
padding: 1px
si indicamos dos valores, el primero se aplica a la parte superior e inferior y el segundo
valor a los lados izquierdo y derecho.

Página
139
Veamos un ejemplo:
<html>
<head>
<title>Problema</title>
<link rel="StyleSheet" href="estilos.css" type="text/css">
</head>
<body>
<p class="comentarios">Esto es una prueba para ver el funcionamiento
de la propiedad padding.
Esto es una prueba para ver el funcionamiento de la propiedad padding.
Esto es una prueba para ver el funcionamiento de la propiedad padding.
Esto es una prueba para ver el funcionamiento de la propiedad padding.
Esto es una prueba para ver el funcionamiento de la propiedad padding.
Esto es una prueba para ver el funcionamiento de la propiedad padding.
Esto es una prueba para ver el funcionamiento de la propiedad padding.
</p>
</body>
</html>
Luego el archivo CSS:
p.comentarios {
background-color:#dddddd;
padding:5px 30px;
}
Con este ejemplo, el párrafo tiene 5 píxeles de separación con el borde en la parte
inferior y superior, y a la izquierda y derecha tiene 30 píxeles.

Ejemplo:
pagina1.html
<html>
<head>
<title>Problema</title>
<link rel="StyleSheet" href="estilos.css" type="text/css">
</head>
<body>
<p class="comentarios">Esto es una prueba para ver el funcionamiento de la
propiedad padding.
Esto es una prueba para ver el funcionamiento de la propiedad padding.
Esto es una prueba para ver el funcionamiento de la propiedad padding.
Esto es una prueba para ver el funcionamiento de la propiedad padding.
Esto es una prueba para ver el funcionamiento de la propiedad padding.
Esto es una prueba para ver el funcionamiento de la propiedad padding.
Esto es una prueba para ver el funcionamiento de la propiedad padding.
</p>
</body>
</html>
estilos.css
p.comentarios {
background-color:#dddddd;
padding:5px 30px;
}

Practica: Definir tres clases distintas con formatos diferentes para expresar el
padding. Aplicar las clases a tres párrafos.

23. Propiedades relacionadas al margin


(FORMATO RESUMIDO)

Página
140
El funcionamiento y sintaxis es similar al visto para el padding:
margin margin-top margin-right margin-bottom margin-left
si indicamos un único valor se aplica a los cuatro lados: margin: 1px si indicamos dos
valores, el primero se aplica a la parte superior e inferior y el segundo valor a los lados
izquierdo y derecho.
Un ejemplo para ver la sintaxis:
<html>
<head>
<title>Problema</title>
<link rel="StyleSheet" href="estilos.css" type="text/css">
</head>
<body>
<h1>Titulo Principal</h1>
</body>
</html>
Y la hoja de estilo:
h1 {
margin:70px 20px;
}

Ejemplo:
Esta regla de estilo inicializa los márgenes de la marca h1.
pagina1.html
<html>
<head>
<title>Problema</title>
<link rel="StyleSheet" href="estilos.css" type="text/css">
</head>
<body>
<h1>Titulo Principal</h1>
</body>
</html>
estilos.css
h1 {
margin:70px 20px;
}

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

24. Propiedades relacionadas al fondo


(background)(FORMATO RESUMIDO)
La propiedad background resume las propiedades vistas anteriormente:
background background-color background-image background-repeat background-
attachment

Página
141
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.css" type="text/css">
</head>
<body>
</body>
</html>
La hoja de estilo es:
body {
background: #ffffee url('../fondo.jpg') repeat-x;
}
No es obligatorio inicializar todos los valores.
Ejemplo: Inicializar la propiedad background con formato resumido.
pagina1.html
<html>
<head>
<title>Problema</title>
<link rel="StyleSheet" href="estilos.css" type="text/css">
</head>
<body>
</body>
</html>
estilos.css
body {
background: #ffffee url('../fondo.jpg') repeat-x;
}

Practica: Confeccionar una página que inicialice el fondo de la marca h1 con una
imagen.

25. El selector universal *


Si queremos inicializar las propiedades de todas las marcas HTML podemos utilizar el
selector universal. Veamos un ejemplo:
<html>
<head>
<title>Problema</title>
<link rel="StyleSheet" href="estilos.css" type="text/css">
</head>
<body>
<h1>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;
margin:0px;
padding:0px;
}

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

Página
143
Practica: Defina cuatro propiedades para el selector universal y luego implemente
una página HTML que pruebe su funcionamiento.

26. Pseudoclases
Las pseudoclases son unas clases especiales, que se refieren a algunos estados
especiales del elemento HTML, las que se utilizan fundamentalmente son las que se
aplican a la marca <a> (ancla).
La sintaxis varía con respecto al concepto de clase visto anteriormente:
a:pseudoclase {
propiedad: valor;
}
Es decir separamos el nombre de la marca HTML con dos puntos.
Para la marca HTML <a> tenemos 4 pseudoclases fundamentales:
link - Enlace sin ingresar
visited - Enlace presionado
hover - Enlace que tiene la flecha del mouse encima
active - Es la que tiene foco en ese momento (pruebe de tocar la tecla tab)
Es importante hacer notar que el orden en que definimos las pseudoclases es
fundamental para su funcionamiento (debe respetarse el orden: link-visited-hover-
active)
Este ejemplo es muy sencillo para ver el paso en los distintos estados que puede tener
un enlace:
<html>
<head>
<title>Problema</title>
<link rel="StyleSheet" href="estilos.css" type="text/css">
</head>
<body>
<a href="http://www.google.com">Google</a>
<a href="http://www.yahoo.com">Yahoo</a>
<a href="http://www.msn.com">Msn</a>
</body>
</html>
La hoja de estilo es:
a:link{
background-color:#00ff00;
color:#ff0000;
}
a:visited{
background-color:#000000;
color:#ffffff;
}
a:hover{
background-color:#ff00ff;
color:#fffff;
}
a:active{
background-color:#ff0000;
color:#ffff00;
}
Apenas ejecute la página los tres enlaces deben aparecer de color rojo con fondo
verde:
a:link{
background-color:#00ff00;

Página
144
color:#ff0000;
}
Si presionamos la tecla tab podremos ver que el enlace que tiene foco aparece de
color amarillo con fondo rojo:
a:active{
background-color:#ff0000;
color:#ffff00;
}
Si pasamos la flecha del mouse sobre algún enlace veremos que aparece de color
blanco con fondo lila:
a:hover{
background-color:#ff00ff;
color:#fffff;
}
Por último todos los enlaces que hayamos hecho click deberán aparecer de color
blanco con fondo negro:
a:visited{
background-color:#000000;
color:#ffffff;
}

Ejemplo: Mostrar una serie de enlaces con distintos colores según si el link está
visitado, no visitado, el mouse está sobre el link o el link tiene foco.
pagina1.html
<html>
<head>
<title>Problema</title>
<link rel="StyleSheet" href="estilos.css" type="text/css">
</head>
<body>
<a href="http://www.google.com">Google</a>
<a href="http://www.yahoo.com">Yahoo</a>
<a href="http://www.msn.com">Msn</a>
</body>
</html>
estilos.css
a:link{
background-color:#00ff00;
color:#ff0000;
}
a:visited{
background-color:#000000;
color:#ffffff;
}
a:hover{
background-color:#ff00ff;
color:#fffff;
}
a:active{
background-color:#ff0000;
color:#ffff00;
}

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

Página
145
27. 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 esto lo
podemos hacer configurando una propiedad de las pseudoclases.
La solución de este problema es:
<html>
<head>
<title>Problema</title>
<link rel="StyleSheet" href="estilos.css" type="text/css">
</head>
<body>
<a href="http://www.google.com">Google</a>
<a href="http://www.yahoo.com">Yahoo</a>
<a href="http://www.msn.com">Msn</a>
</body>
</html>
La hoja de estilo es:
a:link {
text-decoration: none;
}
a:visited {
text-decoration: none;
}
Es decir, configuramos la propiedad text-decoration con el valor none, por defecto está configurada con el valor
underline.
Tener en cuenta que podemos agrupar la regla de esta forma:
a:link, a:visited {
text-decoration: none;
}

Ejemplo: Eliminar el subrayado de los enlaces.


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

Practica: Configurar los enlaces que aparezcan con una línea tachada en lugar de
subrayado.

Página
146
28. Creación de un menú vertical configurando
las pseudoclases.
Un recurso muy útil es disponer un menú en una página, si no requerimos uno muy
elaborado podemos resolverlo utilizando sólo CSS y HTML (en otros casos se requiere
además de JavaScript).
Vamos a implementar uno muy sencillo que requiere agrupar en un div una serie de
párrafos que contienen un hipervínculo cada uno. Cuando la flecha del mouse se
encuentra sobre el hipervínculo cambiamos el color del fondo y la letra del
hipervínculo.
El problema resuelto es:
<html>
<head>
<title>Problema</title>
<link rel="StyleSheet" href="estilos.css" type="text/css">
</head>
<body>
<div id="menu">
<p><a href="http://www.google.com">Google</a></p>
<p><a href="http://www.yahoo.com">Yahoo</a></p>
<p><a href="http://www.msn.com">Msn</a></p>
<p><a href="http://www.altavista.com">Altavista</a></p>
</div>
</body>
</html>
La hoja de estilo asociada a esta página es:
#menu {
font-family: Arial;
}

#menu p {
margin:0px;
padding:0px;
}

#menu a {
display: block;
padding: 3px;
width: 160px;
background-color: #f7f8e8;
border-bottom: 1px solid #eeeeee;
text-align:center;
}

#menu a:link, #menu a:visited {


color: #ff0000;
text-decoration: none;
}

#menu a:hover {
background-color: #336699;
color: #ffffff;
}
Podemos decir que definimos un estilo por medio de un Id llamado menu. Definimos
una regla para este Id:
#menu {
font-family: Arial;

Página
147
}
La segunda regla:
#menu p {
margin:0px;
padding:0px;
}
Estamos indicando que todos los párrafos contenidos en el estilo #menu deben tener
cero en margin y padding.
Luego las anclas definidas dentro del estilo #menu definen las siguientes
características:
#menu a {
display: block;
padding: 3px;
width: 160px;
background-color: #f7f8e8;
border-bottom: 1px solid #eeeeee;
text-align:center;
}
El valor block para la propiedad display permite que el ancla ocupe todo el espacio del
párrafo, indistintamente del largo del hipervínculo.
Otra propiedad nueva es width, esta fija el tamaño máximo que puede tener el
hipervínculo antes de provocar un salto de línea.
Por último inicializamos las pseudoclases:
#menu a:link, #menu a:visited {
color: #ff0000;
text-decoration: none;
}

#menu a:hover {
background-color: #336699;
color: #ffffff;
}
Estamos definiendo el mismo color de texto para los vínculos seleccionados como
aquellos que no han sido seleccionados:
#menu a:link, #menu a:visited {
color: #ff0000;
Por último cambiamos el color de fondo de la opción que tiene la flecha del mouse
encima:
#menu a:hover {
background-color: #336699;

Ejemplo: Hacer un menú de hipervínculos que se muestren el forma vertical.


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

Página
148
</html>
estilos.css
#menu {
font-family: Arial;
}

#menu p {
margin:0px;
padding:0px;
}

#menu a {
display: block;
padding: 3px;
width: 160px;
background-color: #f7f8e8;
border-bottom: 1px solid #eeeeee;
text-align:center;
}

#menu a:link, #menu a:visited {


color: #ff0000;
text-decoration: none;
}

#menu a:hover {
background-color: #336699;
color: #ffffff;
}

Practica: Modificar la hoja de estilo del menú desarrollado anteriormente para


que cada opción aparezca una línea de color negro que la recuadre.

29. Creación de un menú horizontal con una


lista.
Otro estilo de menú muy común es donde las opciones se encuentran una al lado de
otra.
Veamos el código para la implementación de un menú horizontal:
<html>
<head>
<title>Problema</title>
<link rel="StyleSheet" href="estilos.css" type="text/css">
</head>
<body>
<ul id="menuhorizontal">
<li><a href="http://www.google.com">Google</a></li>
<li><a href="http://www.yahoo.com">Yahoo</a></li>
<li><a href="http://www.msn.com">Msn</a></li>
<li><a href="http://www.altavista.com">Altavista</a></li>
</ul>
</body>
</html>
El archivo de estilos es:
#menuhorizontal {
float:left;
width:100%;
padding:0px;
margin:0px;

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

Página
150
<body>
<ul id="menuhorizontal">
<li><a href="http://www.google.com">Google</a></li>
<li><a href="http://www.yahoo.com">Yahoo</a></li>
<li><a href="http://www.msn.com">Msn</a></li>
<li><a href="http://www.altavista.com">Altavista</a></li>
</ul>
</body>
</html>
estilos.css
#menuhorizontal {
float:left;
width:100%;
padding:0px;
margin:0px;
list-style-type:none;
}
#menuhorizontal a {
float:left;
width:100px;
text-decoration:none;
text-align:center;
color:#ff0000;
background-color:#f7f8e8;
padding:3px 5px;
border-right:1px solid white;
}
#menuhorizontal a:hover {
background-color:#336699;
}
#menuhorizontal li {
display:inline;
}

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

30. Propiedades relacionadas a la dimensión de


un objeto en la página.
Disponemos de dos propiedades fundamentales que nos permiten fijar el ancho y el
alto de una marca HTML.
width
height
Veamos un ejemplo:
<html>
<head>
<title>Problema</title>
<link rel="StyleSheet" href="estilos.css" type="text/css">
</head>
<body>
<div id="cabecera">
Blog del Programador
</div>
</body>
</html>
Solamente hemos definido un div donde mostramos la cabecera de una página.
La hoja de estilo definida:
#cabecera {

Página
151
width:100%;
height:100px;
background-color:#ffee00;
color:#0000aa;
text-align:center;
font-family:Times New Roman;
font-size:50px;
font-weight:bold;
}
La propiedad width la inicializamos con el valor 100%, lo que significa que ocupará
todo el ancho de la página (podemos inicializarlo en pixeles si lo necesitamos). Luego a
la propiedad height la inicializamos en 100 píxeles.
El resto de propiedades son las ya vistas en conceptos anteriores.
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.
Ejemplo: Definir un div e inicializar las propiedades width y height.
pagina1.html
<html>
<head>
<title>Problema</title>
<link rel="StyleSheet" href="estilos.css" type="text/css">
</head>
<body>
<div id="cabecera">
Blog del Programador
</div>
</body>
</html>
estilos.css
#cabecera {
width:100%;
height:100px;
background-color:#ffee00;
color:#0000aa;
text-align:center;
font-family:Times New Roman;
font-size:50px;
font-weight:bold;
}

Practica: Crear una página HTML que muestre dos párrafos, a uno de ellos
aplicarle el siguiente estilo:
.parrafoestrecho {
width:200px;
text-align:justify;
}
Recordar que para aplicar esta clase a un párrafo debemos inicializar la propiedad class
de la marca p (ej. <p class="margenestrecho">bla bla</p>)

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


Hasta ahora siempre que hemos especificado tamaños de letra, margin, padding,
border etc. lo hemos hecho a través de pixeles. Esto debido a que la forma más sencilla
de imaginar un tamaño, por lo menos para los que estamos trabajando todo el día en

Página
152
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, 1 punto es lo mismo que 1/72 pulgadas)
pc (picas, 1 pc es lo mismo que 12 puntos)
% (porcentaje)
Un ejemplo que muestra una serie de párrafos asignando la propiedad font-size con
distintos valores y unidades de medida:
<html>
<head>
<title>Problema</title>
<link rel="StyleSheet" href="estilos.css" type="text/css">
</head>
<body>
<p class="pixel1">Este texto tiene 12 px<p>
<p class="pixel2">Este texto tiene 15 px</p>
<p class="em1">Este texto tiene 1 em</p>
<p class="em2">Este texto tiene 1.5 em</p>
<p class="ex1">Este texto tiene 1 ex</p>
<p class="ex2">Este texto tiene 1.5 ex</p>
<p class="in1">Este texto tiene 1 in</p>
<p class="in2">Este texto tiene 1.5 in</p>
<p class="cm1">Este texto tiene 1 cm</p>
<p class="cm2">Este texto tiene 1.5 cm</p>
<p class="mm1">Este texto tiene 10 mm</p>
<p class="mm2">Este texto tiene 15 mm</p>
<p class="pt1">Este texto tiene 10 pt</p>
<p class="pt2">Este texto tiene 15 pt</p>
<p class="pc1">Este texto tiene 1 pc</p>
<p class="pc2">Este texto tiene 1.5 pc</p>
<p class="porcentaje1">Este texto tiene 150%</p>
<p class="porcentaje2">Este texto tiene 200%</p>
</body>
</html>
La hoja de estilo correspondiente es:
.pixel1 {
font-size:12px;
}
.pixel2 {
font-size:15px;
}
.em1{
font-size:1em;
}
.em2{
font-size:1.5em;
}
.ex1{
font-size:1ex;
}
.ex2{
font-size:1.5ex;
}
.in1{

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

Página
154
<p class="pc2">Este texto tiene 1.5 pc</p>
<p class="porcentaje1">Este texto tiene 150%</p>
<p class="porcentaje2">Este texto tiene 200%</p>
</body>
</html>
estilos.css
.pixel1 {
font-size:12px;
}
.pixel2 {
font-size:15px;
}
.em1{
font-size:1em;
}
.em2{
font-size:1.5em;
}
.ex1{
font-size:1ex;
}
.ex2{
font-size:1.5ex;
}
.in1{
font-size:1in;
}
.in2{
font-size:1.5in;
}
.cm1{
font-size:1cm;
}
.cm2{
font-size:1.5cm;
}
.mm1{
font-size:10mm;
}
.mm2{
font-size:15mm;
}
.pt1{
font-size:10pt;
}
.pt2{
font-size:15pt;
}
.pc1{
font-size:1pc;
}
.pc2{
font-size:1.5pc;
}
.porcentaje1{
font-size:150%;
}
.porcentaje2{
font-size:200%;
}

Practica: Cree un div y disponga una serie de párrafos. Defina como padding 2em.
Luego pruebe distintos tamaños de fuente y vea como varía el padding del div.

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

Practica: Utilizando la sintaxis simplificada para indicar las proporciones de


rojo,verde y azul. Pintar el fondo de 16 párrafos. Comenzar por el valor #000 hasta el
#fff.
Hacer que los párrafos estén sin margen entre sí.

Página
156
33. Definir un cursor para un control HTML.
Disponemos de una propiedad llamada cursor que tiene por objetivo definir el cursor a
mostrar cuando la flecha del mouse se encuentra sobre el control HTML.
Los valores que podemos asignarle a esta propiedad son:
crosshair
default
pointer
move
e-resize
ne-resize
nw-resize
n-resize
se-resize
sw-resize
s-resize
w-resize
text
wait
help
auto
Veamos un ejemplo para configurar la propiedad cursor para la marca ancla:
<html>
<head>
<title>Problema</title>
<link rel="StyleSheet" href="estilos.css" type="text/css">
</head>
<body>
<p>Este texto tiene por mostrar las anclas con un cursor distinto al que
está definido por defecto:</p>
<a href="http://www.google.com">google.com</a><br>
<a href="http://www.yahoo.com">yahoo.com</a><br>
<a href="http://www.msn.com">msn.com</a>
</body>
</html>
La hoja de estilo es:
a {
cursor:help;
}

Ejemplo: Disponer tres hipervínculos y definir el cursor help para la marca tipo
ancla.
pagina1.html
<html>
<head>
<title>Problema</title>
<link rel="StyleSheet" href="estilos.css" type="text/css">
</head>
<body>
<p>Este texto tiene por mostrar las anclas con un cursor distinto al que está
definido por defecto:</p>
<a href="http://www.google.com">google.com</a><br>
<a href="http://www.yahoo.com">yahoo.com</a><br>
<a href="http://www.msn.com">msn.com</a>
</body>
</html>
estilos.css
a {

Página
157
cursor:help;
}

Practica: Disponer los nombres de los valores que puede adoptar la propiedad
cursor. Luego definir dicho cursor para cada valor de propiedad.
Recordemos que la propiedad cursor puede adoptar los siguientes valores:
crosshair
default
pointer
move
e-resize
ne-resize
nw-resize
n-resize
se-resize
sw-resize
s-resize
w-resize
text
wait
help
auto
default

34. Aplicación de hojas de estilo a un formulario.


Un formulario es el elemento esencial para el envío de datos al servidor por parte del
visitante del sitio.
Veamos un ejemplo donde implementamos un formulario y le aplicamos una serie de
reglas de estilo a las diferentes marcas HTML que intervienen:
<html>
<head>
<title>Problema</title>
<link rel="StyleSheet" href="estilos.css" type="text/css">
</head>
<body>
<div id="contenedorform">
<form method="post" action="#">
<label>Ingrese nombre:</label>
<input type="text" name="nombre" size="30">
<br>
<label>Ingrese mail:</label>
<input type="text" name="mail" size="45">
<br>
<label>Comentarios:</label>
<textarea name="comentarios" cols="30" rows="5"></textarea>
<br>
<input class="botonsubmit" type="submit" value="confirmar">
</form>
</div>
</body>
</html>
La hoja de estilo que se aplica es:
#contenedorform {
width:500px;
margin-left:20px;
margin-top:10px;
background-color:#ffe;
border:1px solid #CCC;
padding:10px 0 10px 0;

Página
158
}

#contenedorform form label {


width:120px;
float:left;
font-family:verdana;
font-size:14px;
}
.botonsubmit {
color:#f00;
background-color:#bbb;
border: 1px solid #fff;
}
Podemos observar que definimos un div contenedor y dentro de este el formulario.
Para que los textos aparezcan a la izquierda, definimos una serie de label que las
flotamos a izquieda, por lo que los controles del formulario aparecerán a derecha
todos encolumnados.
Ejemplo: Crear un formulario que solicite el ingreso del nombre, mail y
comentarios de un visitante.
pagina1.html
<html>
<head>
<title>Problema</title>
<link rel="StyleSheet" href="estilos.css" type="text/css">
</head>
<body>
<div id="contenedorform">
<form method="post" action="#">
<label>Ingrese nombre:</label>
<input type="text" name="nombre" size="30">
<br>
<label>Ingrese mail:</label>
<input type="text" name="mail" size="45">
<br>
<label>Comentarios:</label>
<textarea name="comentarios" cols="30" rows="5"></textarea>
<br>
<input class="botonsubmit" type="submit" value="confirmar">
</form>
</div>
</body>
</html>
estilos.css
#contenedorform {
width:500px;
margin-left:20px;
margin-top:10px;
background-color:#ffe;
border:1px solid #CCC;
padding:10px 0 10px 0;
}

#contenedorform form label {


width:120px;
float:left;
font-family:verdana;
font-size:14px;
}
.botonsubmit {
color:#f00;
background-color:#bbb;

Página
159
border: 1px solid #fff;
}

Practica: Crear un formulario que solicite el ingreso del nombre de una persona y
su edad. Aplicar el estilo 'campo' a los dos controles de tipo text.
.campo {
color:#0a0;
background-color:#ff1;
}

35. Definiendo reglas de estilo a una tabla.


Veamos con un ejemplo como podemos afectar una tabla HTML con CSS.
<html>
<head>
<title>Problema</title>
<link rel="StyleSheet" href="estilos.css" type="text/css">
</head>
<body>
<table>
<caption>
cantidad de lluvia caida en mm.
</caption>
<thead>
<tr>
<th>Provincia</th><th>Enero</th><th>Febrero</th><th>Marzo</th>
</tr>
</thead>
<tbody>
<tr>
<th>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;
font-size:15px;
text-align: center;
margin: 0px;
font-weight: bold;
padding:10px;
}

table
{
border-collapse: collapse;
}

Página
160
th
{
border-right: 1px solid #fff;
border-bottom: 1px solid #fff;
padding: 0.5em;
background-color:#6495ed;;
}

thead th
{
background-color: #6495ed;
color: #fff;
}

tbody th
{
font-family:arial;
font-weight: normal;
background-color: #6495ed;
color:#ff0;
}

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

table
{
border-collapse: collapse;
}

th
{
border-right: 1px solid #fff;
border-bottom: 1px solid #fff;
padding: 0.5em;
background-color:#6495ed;;
}

thead th
{
background-color: #6495ed;
color: #fff;
}

tbody th
{
font-family:arial;
font-weight: normal;
background-color: #6495ed;
color:#ff0;
}

Practica: Definir una tabla de varias filas y columnas. Aplicar estilos a las marcas th
y td.

36. Posicionamiento relativo.


La propiedad position determina el punto de referencia donde se debe localizar cada
elemento HTML. Por defecto esta propiedad se inicializa con el valor static.
Con el valor por defecto static, cada elemento HTML se localiza de izquierda a derecha
y de arriba hacia abajo.
El segundo valor posible para esta propiedad es relative. En caso de fijar la propiedad
position con el valor relative, podemos modificar la posición por defecto del elemento
HTML modificando los valores left y top (con valores positivos o inclusive negativos)

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

Página
163
pagina1.html
<html>
<head>
<title>Problema</title>
<link rel="StyleSheet" href="estilos.css" type="text/css">
</head>
<body>
<div id="caja1">
<p>Esta es la primer caja.</p>
<p>No se desplaza.</p>
</div>
<div id="caja2">
<p>Esta es la segunda caja.</p>
<p>Se desplaza 15 píxeles a la derecha y 5 hacia abajo de su posición por
defecto.</p>
</div>
<div id="caja3">
<p>Esta es la tercer caja.</p>
<p>No se desplaza.</p>
</div>
</body>
</html>
estilos.css
#caja1,#caja2,#caja3 {
background-color:#f99;
font-family:verdana;
font-size:1.3em;
}
#caja2 {
position:relative;
left:15px;
top:5px;
}

Practica: Disponer dos párrafos, desplazar el segundo párrafo hasta que quede
casi superpuesto al primer párrafo.

37. Posicionamiento absoluto.


El posicionamiento absoluto dispone un elemento HTML completamente fuera del
flujo de la página. El valor que debemos asignar a la propiedad position es absolute.
Hay que tener en cuenta que no se reserva espacio en el flujo del documento como
pasaba con el posicionamiento relativo (recordemos que con este posicionamiento
podemos desplazar el elemento a cuarquier parte de la página, pero el espacio por
defecto para dicho elemento queda vacío).
El posicionamiento es siempre con respecto a la página.
Veamos un ejemplo para ver el funcionamiento del posicionamiento absoluto:
<html>
<head>
<title>Problema</title>
<link rel="StyleSheet" href="estilos.css" type="text/css">
</head>
<body>
<div id="caja1">
<p>Esta es la primer caja.</p>
<p>No se desplaza.</p>
</div>
<div id="caja2">

Página
164
<p>Esta es la segunda caja.</p>
<p>Se desplaza a la coordenada de pantalla 40 en columna y 30 en fila (en
píxeles).</p>
</div>
<div id="caja3">
<p>Esta es la tercer caja.</p>
<p>No se desplaza.</p>
</div>
</body>
</html>
La hoja de estilo definida:
#caja1,#caja3 {
background-color:#f99;
font-family:verdana;
font-size:1.3em;
}
#caja2 {
background-color:#ff0;
font-size:1.3em;
position:absolute;
left:40px;
top:30px;
}
Como vemos inicializamos la propiedad position con el valor absolute y fijamos como
coordenada para la caja la columna 40 y la fila 30 (en píxeles).
Ejemplo: Disponer tres cajas de texto mediante div. Luego posicionar la segundo
caja en la coordenada de la página 40,30 (píxel 40 en columna y 30 en fila) en forma
absoluta.
pagina1.html
<html>
<head>
<title>Problema</title>
<link rel="StyleSheet" href="estilos.css" type="text/css">
</head>
<body>
<div id="caja1">
<p>Esta es la primer caja.</p>
<p>No se desplaza.</p>
</div>
<div id="caja2">
<p>Esta es la segunda caja.</p>
<p>Se desplaza a la coordenada de pantalla 40 en columna y 30 en fila (en
píxeles).</p>
</div>
<div id="caja3">
<p>Esta es la tercer caja.</p>
<p>No se desplaza.</p>
</div>
</body>
</html>
estilos.css
#caja1,#caja3 {
background-color:#f99;
font-family:verdana;
font-size:1.3em;
}
#caja2 {
background-color:#ff0;
font-size:1.3em;
position:absolute;

Página
165
left:40px;
top:30px;
}

Practica: Disponer dos div con coordenadas absolutas, uno que represente la
cabecera de la página (50 píxeles de alto) y otro la primer columna de la izquierda.

38. Disposición de 2 columnas.


Empezaremos a ver como componer una página sin utilizar las tablas (un medio muy
utilizado hasta hace muy poco, ya que es ampliamente soportado por navegadores
antiguos).
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.css" type="text/css">
</head>
<body>
<div id="columna1">
Aca va el contenido de la columna 1.
</div>
</body>
</html>
La hoja de estilo para esta página es:
* {
margin:0px;
padding:0px;
}
#columna1 {
position:absolute;
top:0px;
left:0px;
width:200px;
margin-top:10px;
background-color:#ffff55;
}
#columna2 {
margin-left:220px;
margin-right:20px;
margin-top:10px;
background-color:#ffffbb;
}
La primera regla de disponer el selector universal, es decir afecta a todas las marcas
HTML, es sacar el margen y padding (generalmente dispondremos esta regla):
* {
margin:0px;
padding:0px;
}
Ahora la regla definida para la primer columna es:
#columna1 {
position:absolute;
top:0px;
left:0px;
width:200px;
margin-top:10px;
background-color:#ffff55;

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

Página
167
<div id="columna2">
Aca va el contenido de la columna 2. Aca va el contenido de la columna 2.Aca
va el contenido de la columna 2.Aca va el contenido de la columna 2.Aca va el
contenido de la columna 2.Aca va el contenido de la columna 2.Aca va el
contenido de la columna 2.Aca va el contenido de la columna 2.Aca va el
contenido de la columna 2.Aca va el contenido de la columna 2.Aca va el
contenido de la columna 2.Aca va el contenido de la columna 2.Aca va el
contenido de la columna 2.Aca va el contenido de la columna 2.Aca va el
contenido de la columna 2.Aca va el contenido de la columna 2.Aca va el
contenido de la columna 2.Aca va el contenido de la columna 2.Aca va el
contenido de la columna 2.Aca va el contenido de la columna 2.Aca va el
contenido de la columna 2.Aca va el contenido de la columna 2.Aca va el
contenido de la columna 2.Aca va el contenido de la columna 2.Aca va el
contenido de la columna 2.Aca va el contenido de la columna 2.Aca va el
contenido de la columna 2.Aca va el contenido de la columna 2.Aca va el
contenido de la columna 2.Aca va el contenido de la columna 2.Aca va el
contenido de la columna 2.Aca va el contenido de la columna 2.Aca va el
contenido de la columna 2.Aca va el contenido de la columna 2.Aca va el
contenido de la columna 2.Aca va el contenido de la columna 2.Aca va el
contenido de la columna 2.Aca va el contenido de la columna 2.Aca va el
contenido de la columna 2.Aca va el contenido de la columna 2.Aca va el
contenido de la columna 2.Aca va el contenido de la columna 2.Aca va el
contenido de la columna 2.Aca va el contenido de la columna 2.Aca va el
contenido de la columna 2.Aca va el contenido de la columna 2.Aca va el
contenido de la columna 2.Aca va el contenido de la columna 2.Aca va el
contenido de la columna 2.Aca va el contenido de la columna 2.Aca va el
contenido de la columna 2.Aca va el contenido de la columna 2.Aca va el
contenido de la columna 2.Aca va el contenido de la columna 2.Aca va el
contenido de la columna 2.Aca va el contenido de la columna 2.Aca va el
contenido de la columna 2.Aca va el contenido de la columna 2.Aca va el
contenido de la columna 2.Aca va el contenido de la columna 2.Aca va el
contenido de la columna 2.Aca va el contenido de la columna 2.Aca va el
contenido de la columna 2.Aca va el contenido de la columna 2.Aca va el
contenido de la columna 2.Aca va el contenido de la columna 2.Aca va el
contenido de la columna 2.Aca va el contenido de la columna 2.Aca va el
contenido de la columna 2.Aca va el contenido de la columna 2.Aca va el
contenido de la columna 2.Aca va el contenido de la columna 2.Aca va el
contenido de la columna 2.Aca va el contenido de la columna 2.Aca va el
contenido de la columna 2.Aca va el contenido de la columna 2.
</div>
</body>
</html>
estilos.css
* {
margin:0px;
padding:0px;
}
#columna1 {
position:absolute;
top:0px;
left:0px;
width:200px;
margin-top:10px;
background-color:#ffff55;
}
#columna2 {
margin-left:220px;
margin-right:20px;
margin-top:10px;
background-color:#ffffbb;
}

Practica: Crear una página con dos columnas y disponer en la primera columna un
menú de opciones (como el visto en conceptos anteriores).

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

Página
169
envuelve a la imagen.El texto envuelve a la imagen.El texto envuelve a la
imagen.El texto envuelve a la imagen.El texto envuelve a la imagen.El texto
envuelve a la imagen.El texto envuelve a la imagen.El texto envuelve a la
imagen.</p>
</body>
</html>
estilos.css
img {
float:right;
}
Inicializar la siguiente regla:
span {
float:left;
font-size:300%;
}

Practica: Confeccionar una 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.

40. Disposición de 2 columnas (propiedad float)


Una segunda forma de implementar una página con dos columnas es utilizar la
propiedad float. Disponemos dos div. Al primero lo flotamos hacia la izquierda con un
width fijo y el segundo se acomoda inmediatamente a la derecha.
Veamos un ejemplo:
<html>
<head>
<title>Problema</title>
<link rel="StyleSheet" href="estilos.css" type="text/css">
</head>
<body>
<div id="columna1">
Aquí el contenido de la columna 1.
</div>
<div id="columna2">
Aquí el contenido de la columna 2.
</div>
</body>
</html>
La hoja de estilo:
* {
margin:0;
padding:0;
}
#columna1 {
float:left;
width:200px;
background-color:#ff5;
border:1px solid #555;
}
#columna2 {
margin-left:210px;
background-color:#ffb;
border:1px solid #555;
}
La columna1 tiene un ancho de 200 pixeles. Luego para evitar que la columna dos
envuelva a la columna uno en caso de ser más larga inicializamos margin-left con 210
pixeles.

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

Página
171
de la columna 2.Aquí el contenido de la columna 2.Aquí el contenido de la
columna 2.Aquí el contenido de la columna 2.Aquí el contenido de la columna
2.Aquí el contenido de la columna 2.Aquí el contenido de la columna 2.Aquí el
contenido de la columna 2.Aquí el contenido de la columna 2.Aquí el contenido
de la columna 2.Aquí el contenido de la columna 2.Aquí el contenido de la
columna 2.Aquí el contenido de la columna 2.Aquí el contenido de la columna
2.Aquí el contenido de la columna 2.Aquí el contenido de la columna 2.Aquí el
contenido de la columna 2.Aquí el contenido de la columna 2.Aquí el contenido
de la columna 2.Aquí el contenido de la columna 2.Aquí el contenido de la
columna 2.Aquí el contenido de la columna 2.Aquí el contenido de la columna
2.Aquí el contenido de la columna 2.Aquí el contenido de la columna 2.Aquí el
contenido de la columna 2.Aquí el contenido de la columna 2.Aquí el contenido
de la columna 2.Aquí el contenido de la columna 2.Aquí el contenido de la
columna 2.Aquí el contenido de la columna 2.Aquí el contenido de la columna
2.Aquí el contenido de la columna 2.Aquí el contenido de la columna 2.Aquí el
contenido de la columna 2.Aquí el contenido de la columna 2.Aquí el contenido
de la columna 2.Aquí el contenido de la columna 2.Aquí el contenido de la
columna 2.Aquí el contenido de la columna 2.Aquí el contenido de la columna
2.Aquí el contenido de la columna 2.Aquí el contenido de la columna 2.Aquí el
contenido de la columna 2.Aquí el contenido de la columna 2.Aquí el contenido
de la columna 2.Aquí el contenido de la columna 2.Aquí el contenido de la
columna 2.Aquí el contenido de la columna 2.Aquí el contenido de la columna
2.Aquí el contenido de la columna 2.Aquí el contenido de la columna 2.Aquí el
contenido de la columna 2.Aquí el contenido de la columna 2.Aquí el contenido
de la columna 2.Aquí el contenido de la columna 2.Aquí el contenido de la
columna 2.Aquí el contenido de la columna 2.Aquí el contenido de la columna
2.Aquí el contenido de la columna 2.Aquí el contenido de la columna 2.Aquí el
contenido de la columna 2.Aquí el contenido de la columna 2.Aquí el contenido
de la columna 2.Aquí el contenido de la columna 2.Aquí el contenido de la
columna 2.Aquí el contenido de la columna 2.Aquí el contenido de la columna
2.Aquí el contenido de la columna 2.Aquí el contenido de la columna 2.Aquí el
contenido de la columna 2.Aquí el contenido de la columna 2.Aquí el contenido
de la columna 2.Aquí el contenido de la columna 2.Aquí el contenido de la
columna 2.Aquí el contenido de la columna 2.Aquí el contenido de la columna
2.Aquí el contenido de la columna 2.Aquí el contenido de la columna 2.Aquí el
contenido de la columna 2.Aquí el contenido de la columna 2.Aquí el contenido
de la columna 2.Aquí el contenido de la columna 2.Aquí el contenido de la
columna 2.Aquí el contenido de la columna 2.Aquí el contenido de la columna
2.Aquí el contenido de la columna 2.Aquí el contenido de la columna 2.Aquí el
contenido de la columna 2.Aquí el contenido de la columna 2.Aquí el contenido
de la columna 2.Aquí el contenido de la columna 2.Aquí el contenido de la
columna 2.Aquí el contenido de la columna 2.Aquí el contenido de la columna
2.Aquí el contenido de la columna 2.Aquí el contenido de la columna 2.Aquí el
contenido de la columna 2.Aquí el contenido de la columna 2.Aquí el contenido
de la columna 2.Aquí el contenido de la columna 2.Aquí el contenido de la
columna 2.Aquí el contenido de la columna 2.Aquí el contenido de la columna
2.Aquí el contenido de la columna 2.Aquí el contenido de la columna 2.Aquí el
contenido de la columna 2.Aquí el contenido de la columna 2.Aquí el contenido
de la columna 2.Aquí el contenido de la columna 2.Aquí el contenido de la
columna 2.Aquí el contenido de la columna 2.Aquí el contenido de la columna
2.Aquí el contenido de la columna 2.Aquí el contenido de la columna 2.Aquí el
contenido de la columna 2.Aquí el contenido de la columna 2.Aquí el contenido
de la columna 2.Aquí el contenido de la columna 2.Aquí el contenido de la
columna 2.Aquí el contenido de la columna 2.Aquí el contenido de la columna
2.Aquí el contenido de la columna 2.Aquí el contenido de la columna 2.Aquí el
contenido de la columna 2.Aquí el contenido de la columna 2.Aquí el contenido
de la columna 2.Aquí el contenido de la columna 2.Aquí el contenido de la
columna 2.Aquí el contenido de la columna 2.Aquí el contenido de la columna
2.Aquí el contenido de la columna 2.Aquí el contenido de la columna 2.Aquí el
contenido de la columna 2.Aquí el contenido de la columna 2.Aquí el contenido
de la columna 2.Aquí el contenido de la columna 2.Aquí el contenido de la
columna 2.Aquí el contenido de la columna 2.Aquí el contenido de la columna
2.Aquí el contenido de la columna 2.Aquí el contenido de la columna 2.Aquí el
contenido de la columna 2.Aquí el contenido de la columna 2.Aquí el contenido
de la columna 2.Aquí el contenido de la columna 2.Aquí el contenido de la

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

Página
173
}
#columna2 {
margin-left:210px;
background-color:#ffb;
border:1px solid #555;
}

Practica: Disponga un menú horizontal en la segunda columna del problema


resuelto.

41. Disposición de 2 columnas, cabecera y pie.


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

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

Página
175
columna2. Contenido de la columna2. Contenido de la columna2. Contenido de la
columna2. Contenido de la columna2. Contenido de la columna2.</p>
</div>
<div id="pie">
Pié de página.
</div>
</div>
</body>
</html>
estilos.css
* {
margin:0px;
padding:0px;
}
#contenedor
{
width:100%;
margin:0px;
border:1px solid #000;
line-height:130%;
background-color:#f2f2f2;
}
#cabecera
{
padding:10px;
color:#fff;
background-color:#becdfe;
clear:left;
}
#columna1
{
float:left;
width:200px;
margin:0;
padding:1em;
}
#columna2
{
margin-left:210px;
border-left:1px solid #aaa;
padding:1em;
}
#pie {
padding:10px;
color:#fff;
background-color:#becdfe;
clear:left;
}

Practica: Codifique el problema visto anteriormente para mostrar dos columnas,


cabecera y pie de página. Luego asigne a la propiedad width, de la regla contenedor, el
valor:
width:780px;
Cuál es el resultado?

42. Disposición de 3 columnas, cabecera y pie.


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

Página
177
#columna3
{
float:right;
width:200px;
margin:0;
padding:1em;
}
#pie {
padding:10px;
color:#fff;
background-color:#becdfe;
clear:left;
}

Ejemplo: Crear una página con tres columnas, cabecera y pie de página.
pagina1.html
<html>
<head>
<title>Problema</title>
<link rel="StyleSheet" href="estilos.css" type="text/css">
</head>
<body>
<div id="contenedor">
<div id="cabecera">
<h1>Aca el título de la página</h1>
</div>
<div id="columna1">
<p>columna1. columna1. columna1. columna1. columna1. columna1.
columna1. columna1. columna1. columna1. columna1. columna1. columna1.
columna1. columna1. columna1. columna1. columna1. columna1. columna1.
columna1. columna1.</p>
</div>
<div id="columna3">
<p>columna3. columna3. columna3. columna3. columna3. columna3. columna3.
columna3. columna3. columna3. columna3. columna3. columna3. columna3.
columna3. columna3. columna3. columna3. columna3. columna3. columna3.
columna3. </p>
</div>
<div id="columna2">
<h2>Título de la columna</h2>
<p>Contenido de la columna2. Contenido de la columna2. Contenido de la
columna2. Contenido de la columna2. Contenido de la columna2. Contenido de la
columna2. Contenido de la columna2. Contenido de la columna2. Contenido de la
columna2. Contenido de la columna2. Contenido de la columna2. Contenido de la
columna2. Contenido de la columna2. Contenido de la columna2. Contenido de la
columna2. Contenido de la columna2. Contenido de la columna2. Contenido de la
columna2. Contenido de la columna2. Contenido de la columna2. Contenido de la
columna2. Contenido de la columna2. Contenido de la columna2. Contenido de la
columna2. Contenido de la columna2. Contenido de la columna2. Contenido de la
columna2. Contenido de la columna2. Contenido de la columna2. Contenido de la
columna2. Contenido de la columna2. Contenido de la columna2. Contenido de la
columna2. Contenido de la columna2. Contenido de la columna2. Contenido de la
columna2. Contenido de la columna2. Contenido de la columna2.</p>
</div>
<div id="pie">
Pié de página.
</div>
</div>
</body>
</html>
estilos.css
* {
margin:0px;
padding:0px;

Página
178
}
#contenedor
{
width:100%;
margin:0px;
border:1px solid #000;
line-height:130%;
background-color:#f2f2f2;
}
#cabecera
{
padding:10px;
color:#fff;
background-color:#becdfe;
clear:left;
}
#columna1
{
float:left;
width:200px;
margin:0;
padding:1em;
}
#columna2
{
margin-left:210px;
margin-right:230px;
border-left:1px solid #aaa;
border-right:1px solid #aaa;
padding:1em;
}
#columna3
{
float:right;
width:200px;
margin:0;
padding:1em;
}
#pie {
padding:10px;
color:#fff;
background-color:#becdfe;
clear:left;
}

Practica: Codifique nuevamente la sintaxis para disponer tres columnas, cabecera


y pie de página. Luego defina la propiedad width del contenedor con 780px. Disponga
un menú en la columna uno y otro en la columna tres.

Página
179
JavaScript
JavaScript
1. Conceptos de Algoritmo, Programa y
Lenguaje de Programación.
Algoritmo: Son los pasos a seguir para resolver un problema.
Programa: Conjunto de instrucciones que entiende un ordenador para realizar una
actividad. Todo programa tiene un objetivo bien definido: un procesador de texto es
un programa que permite cargar, modificar e imprimir textos, un programa de ajedrez
permite jugar al ajedrez contra el ordenador u otro contrincante humano. La actividad
fundamental del programador es resolver problemas empleando el ordenador como
herramienta fundamental. Para la resolución de un problema hay que plantear un
algoritmo.
Lenguaje de programación: Conjunto de instrucciones que son interpretadas por una
computadora para realizar operaciones, mostrar datos por pantalla, sacar listados por
impresora, entrar datos por teclado, etc. Nosotros aprenderemos a programar
utilizando el lenguaje de programación JavaScript.
Para desarrollar este curso no requerimos ningún conocimiento de otro lenguaje.

2. Qué es JavaScript?
JavaScript, al igual que Flash, Visual Basic Script, 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). Al ser la más sencilla, es por el momento la más extendida.
JavaScript no es un lenguaje de programación propiamente dicho como C, C++, Delphi,
etc. Es un lenguaje script u orientado a documento, como pueden ser los lenguajes de
macros que tienen muchos procesadores de texto y planillas de cálculo. No se puede
desarrollar un programa con JavaScript que se ejecute fuera de un Navegador.
JavaScript es un lenguaje interpretado que se embebe en una página web HTML. Un
lenguaje interpretado significa que a las instrucciones las analiza y procesa el
navegador en el momento que deben ser ejecutadas.
Nuestro primer programa será el famoso "Hola Mundo", es decir un programa que
muestre en el documento HTML el mensaje "Hola Mundo".
<html>
<head>
</head>
<body>
<script language="javascript">
document.write('Hola Mundo');
</script>
</body>
</html>

Página
180
El programa en JavaScript debe ir encerrado entre la marca script e inicializada la
propiedad languaje con la cadena javascript:
<script language="javascript">
</script>
Para imprimir caracteres sobre la página debemos llamar al comando 'write' del objeto
document. La información a imprimirse debe ir entre comillas y encerrada entre
paréntesis. Todo lo que indicamos entre comillas aparecerá tal cual dentro de la página
HTML.
Es decir, si pedimos al navegador que ejecute esta página mostrará el texto 'Hola
Mundo'.
Cada vez que escribimos una instrucción finalizamos con el caracter punto y coma.
ES IMPORTANTISIMO TENER EN CUENTA QUE JavaScript es SENSIBLE A MAYUSCULAS Y
MINUSCULAS. NO ES LO MISMO ESCRIBIR:
document.write que DOCUMENT.WRITE (la primera forma es la correcta, la segunda
forma provoca un error de sintaxis).
Nos acostumbraremos a prestar atención cada vez que escribamos en minúsculas o
mayúsculas para no cometer errores sintácticos. Ya veremos que los nombres de
funciones llevan letras en mayúsculas.

Ejemplo:
pagina1.html
<html>
<head>
</head>
<body>

<script language="javascript">
document.write('Hola Mundo');
</script>

</body>
</html>

Practica: Realizar un programa que muestre su nombre y su edad en una página


HTML. Emplear el comando write del objeto document para imprimir. Tener en
cuenta que si queremos que cada dato quede en una fila distinta de la página debemos
insertar la marca <br> (salto de linea en HTML), es decir debemos disponer:
document.write('<br>')

3. Variables.
Una variable es un depósito donde hay un valor. Consta de un nombre y pertenece a
un tipo (númerico, cadena de caracteres, etc.).
Tipos de variable:
Una variable puede almacenar:
Valores Enteros (100, 260, etc.)
Valores Reales (1.24, 2.90, 5.00, etc.)
Cadenas de caracteres ("Juan", "Compras", "Listado", etc.)
Valores lógicos (true,false)
Existen otros tipos de variables que veremos más adelante.

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

Página
182
10
1.92
False
Es decir que se muestran los contenidos de las 4 variables. Una variable es de un tipo
determinado cuando le asignamos un valor:
var edad=10;
Es de tipo entera ya que le asignamos un valor entero.
var nombre='juan';
Es de tipo cadena.
Para mostrar el contenido de una variable en una página debemos utilizar la función
'write' que pertenece al objeto document. Recordemos que el lenguaje JavaScript es
sensible a mayúsculas y minúsculas y no será lo mismo si tipeamos:
Document.Write(nombre);
Esto porque no existe el objeto 'Document' sino el objeto 'document' (con d
minúscula), lo mismo no existe la función 'Write' sino 'write', este es un error muy
común cuando comenzamos a programar en JavaScript

Ejemplo:
<html>
<head>
</head>
<body>
<script language="JavaScript">
var nombre="Juan";
var edad=10;
var altura=1.92;
var casado=false;
document.write(nombre);
document.write('<br>');
document.write(edad);
document.write('<br>');
document.write(altura);
document.write('<br>');
document.write(casado);
</script>
</body>
</html>

Practica: Confeccionar una programa en JavaScript que defina e inicialice una


variable real donde almacenar el sueldo de un operario y otra de tipo cadena de
caracteres donde almacenaremos el nombre. Imprimir cada variable en una línea
distinta en pantalla.

4. Entrada de datos por teclado.


Para la entrada de datos por teclado tenemos la función prompt. Cada vez que
necesitamos ingresar un dato con esta función, aparece una ventana donde cargamos
el valor. Hay otras formas más sofisticadas para la entrada de datos en una página
HTML, pero para el aprendizaje de los conceptos básicos de JavaScript nos resultará
más práctica esta función.
Para ver su funcionamiento analicemos este ejemplo:
<html>

Página
183
<head>
</head>
<body>
<script language="JavaScript">
var nombre;
var edad;
nombre=prompt('Ingrese su nombre:','');
edad=prompt('Ingrese su edad:','');
document.write('Hola ');
document.write(nombre);
document.write(' asi que tienes ');
document.write(edad);
document.write(' años');
</script>
</body>
</html>
La sintaxis de la función prompt es:
<variable que recibe el dato>=prompt(<mensaje a mostrar en la ventana>,<valor
inicial a mostrar en la ventana>);
La función prompt tiene dos parámetros: uno es el mensaje y el otro el valor incial a
mostrar.

Ejemplo:
<html>
<head>
</head>
<body>
<script language="JavaScript">
var nombre;
var edad;
nombre=prompt('Ingrese su nombre:','');
edad=prompt('Ingrese su edad:','');
document.write('Hola ');
document.write(nombre);
document.write(' asi que tienes ');
document.write(edad);
document.write(' años');
</script>
</body>
</html>
Practica: Confeccionar un programa que permita cargar el nombre de un usuario y
su mail por teclado. Mostrar posteriormente los datos en la página HTML.

5. Estructuras secuenciales de programación.


Cuando en un problema sólo participan operaciones, entradas y salidas se la denomina
estructura secuencial.
El problema anterior, donde se ingresa el nombre de una persona y su edad se trata de
una estructura secuencial.
Ejemplo de otro algoritmo con estructura secuencial: Realizar la carga de dos números
por teclado e imprimir su suma y su producto:
<html>
<head>
<script language="JavaScript">
var valor1;
var valor2;
valor1=prompt('Ingrese primer número:','');

Página
184
valor2=prompt('Ingrese segundo número','');
var suma=parseInt(valor1)+parseInt(valor2);
var producto=valor1*valor2;
document.write('La suma es ');
document.write(suma);
document.write('<br>');
document.write('El producto es ');
document.write(producto);
</script>
</head>
<body>
</body>
</html>
Lo primero que debemos tener en cuenta es que si queremos que el operador + sume
los contenidos de los valores numéricos ingresados por teclado, debemos llamar a la
función parseInt y pasarle como parámetro las variables valor1 y valor2
sucesivamente. Con esto logramos que el operador más, sume las variables como
enteros y no como cadenas de caracteres. Si por ejemplo sumamos 1 + 1 sin utilizar la
función parseInt el resultado será 11 en lugar de 2, ya que el operador + concatena las
dos cadenas.
Cuando empleamos el operador * para el producto, ya no es obligatorio utilizar la
función parseInt (es decir, sólo para el operador + debemos utilizarla).
En JavaScript, como no podemos indicarle de qué tipo es la variable, requiere mucho
más cuidado cuando operamos con sus contenidos.
Este problema es secuencial ya que ingresamos dos valores por teclado, luego
hacemos dos operaciones y por último mostramos los resultados.

Ejemplo:
<html>
<head>
<script language="JavaScript">
var valor1;
var valor2;
valor1=prompt('Ingrese primer número:','');
valor2=prompt('Ingrese segundo número','');
var suma=parseInt(valor1)+parseInt(valor2);
var producto=valor1*valor2;
document.write('La suma es ');
document.write(suma);
document.write('<br>');
document.write('El producto es ');
document.write(producto);
</script>
</head>
<body>
</body>
</html>

Practica: Es de fundamental importancia realizar los programas. Viendo sólo los


problemas resueltos en este curso de estudio no alcanza para convertirse en un
programador de aplicaciones.
PROBLEMAS
1 - Realizar la carga del lado de un cuadrado, mostrar por pantalla el perímetro del
mismo (El perímetro de un cuadrado se calcula multiplicando el valor del lado por
cuatro).
2 - Escribir un programa en el cual se ingresen cuatro números, calcular e informar la

Página
185
suma de los dos primeros y el producto del tercero y el cuarto.
3 - Realizar un programa que lea cuatro valores numéricos e informar su suma y
producto.
4 - Se debe desarrollar un programa que pida el ingreso del precio de un artículo y la
cantidad que lleva el cliente. Mostrar lo que debe abonar el comprador.

6. Estructuras condicionales simples.


No todos los problemas pueden resolverse empleando estructuras secuenciales.
Cuando hay que tomar una decisión aparecen las estructuras condicionales.
En nuestra vida diaria se nos presentan situaciones donde debemos decidir.
¿Elijo la carrera A o la carrera B ?
¿Me pongo este pantalón ?
¿Entro al sitio A o al sitio B ?
Para ir al trabajo, ¿elijo el camino A o el camino B ?
Al cursar una carrera, ¿elijo el turno mañana, tarde o noche ?
Por supuesto que en un problema se combinan estructuras secuenciales y
condicionales.
Cuando se presenta la elección tenemos la opción de realizar una actividad o no
realizarla.
En una estructura CONDICIONAL SIMPLE por el camino del verdadero hay actividades y
por el camino del falso no hay actividades. Por el camino del verdadero pueden existir
varias operaciones, entradas y salidas, inclusive ya veremos que puede haber otras
estructuras condicionales.
Ejemplo: Realizar la carga de una nota de un alumno. Mostrar un mensaje que aprobó
si tiene una nota mayor o igual a 4:
<html>
<head>
</head>
<body>
<script language="javascript">
var nombre;
var nota;
nombre=prompt('Ingrese nombre:','');
nota=prompt('Ingrese su nota:','');
if (nota>=4)
{
document.write(nombre+' esta aprobado con un '+nota);
}
</script>
</body>
</html>
Aparece la instrucción if en el lenguaje JavaScript. La condición debe ir entre
paréntesis. 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.
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
== 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.
Otra cosa que hemos incorporado es el operador + para cadenas de caracteres:
document.write(nombre+' esta aprobado con un '+nota);
Con esto hacemos más corto la cantidad de líneas de nuestro programa, recordemos
que veníamos haciéndolo de la siguiente forma:
document.write(nombre);
document.write(' esta aprobado con un ');
document.write(nota);

Ejemplo:
<html>
<head>
</head>
<body>
<script language="javascript">
var nombre;
var nota;
nombre=prompt('Ingrese nombre:','');
nota=prompt('Ingrese su nota:','');
if (nota>=4)
{
document.write(nombre+' esta aprobado con un '+nota);
}
</script>
</body>
</html>

Practica:
PROBLEMAS
1 - Se ingresan tres notas de un alumno, si el promedio es mayor o igual a siete
mostrar el mensaje 'Promocionado'. Tener en cuenta que para obtener el promedio
debemos operar suma=nota1+nota2+nota3; y luego hacer promedio=suma/3;
2 - Solicitar que se ingrese dos veces una clave. Mostrar un mensaje si son iguales
(tener en cuenta que para ver si dos variables tienen el mismo valor almacenado
debemos utilizar el operador ==).

7. Estructuras condicionales compuestas.


Cuando se presenta la elección tenemos la opción de realizar una actividad u otra. Es
decir tenemos actividades por el verdadero y por el falso de la condición. 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, NUNCA se realizan las actividades de las dos ramas.
En una estructura condicional compuesta tenemos entradas, salidas, operaciones,
tanto por la rama del verdadero como por la rama del falso.
Ejemplo: Realizar un programa que lea dos números distintos y muestre el mayor
de ellos:

<html>
<head>
</head>

Página
187
<body>
<script language="javascript">
var num1,num2;
num1=prompt('Ingrese el primer número:','');
num2=prompt('Ingrese el segundo número:','');
num1=parseInt(num1);
num2=parseInt(num2);
if (num1>num2)
{
document.write('el mayor es '+num1);
}
else
{
document.write('el mayor es '+num2);
}
</script>
</body>
</html>
La 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. En el lenguaje
JavaScript una variable puede ir cambiando el tipo de dato que almacena a lo largo de
la ejecución del programa.
Más adelante veremos qué sucede cuando preguntamos cuál de dos string es mayor.
Estamos en presencia de una ESTRUCTURA CONDICIONAL COMPUESTA ya que
tenemos actividades por la rama del verdadero y del falso.
La estructura condicional compuesta tiene la siguiente 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.
Si la condición del if es verdadera se ejecuta el bloque que aparece después de la
condición, en caso que la condición resulte falsa se ejecuta la instrucción o bloque de
instrucciones que indicamos después del else.

Ejemplo:
<html>
<head>
</head>
<body>
<script language="javascript">
var num1,num2;
num1=prompt('Ingrese el primer número:','');
num2=prompt('Ingrese el segundo número:','');
num1=parseInt(num1);
num2=parseInt(num2);
if (num1>num2)
{
document.write('el mayor es '+num1);
}
else
{
document.write('el mayor es '+num2);

Página
188
}
</script>
</body>
</html>

Practica:
PROBLEMAS
1 - Realizar un programa que lea por teclado dos números, si el primero es mayor al
segundo informar su suma y diferencia, en caso contrario informar el producto y la
división del primero respecto al segundo.
2 - Se ingresan tres notas de un alumno, si el promedio es mayor o igual a 4 mostrar un
mensaje 'regular', sino 'reprobado'.
3 - Se ingresa por teclado un número positivo de uno o dos dígitos (1..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).Tener en cuenta
qué condición debe cumplirse para tener dos dígitos, un número entero.

8. Estructuras condicionales anidadas.


Decimos que una estructura condicional es anidada cuando por la rama del verdadero
o el falso de una estructura condicional hay otra estructura condicional.
Ejemplo: Confeccionar un programa que pida por teclado tres notas de un alumno,
calcule el promedio e imprima alguno de estos mensajes:
Si el promedio es >=7 mostrar "Promocionado".
Si el promedio es >=4 y <7 mostrar "Regular".
Si el promedio es <4 mostrar "Reprobado".
Solución:
<html>
<head>
</head>
<body>
<script language="javascript">
var nota1,nota2,nota3;
nota1=prompt('Ingrese 1ra. nota:','');
nota2=prompt('Ingrese 2da. nota:','');
nota3=prompt('Ingrese 3ra. nota:','');
//Convertimos los 3 string en enteros
nota1=parseInt(nota1);
nota2=parseInt(nota2);
nota3=parseInt(nota3);
var pro;
pro=(nota1+nota2+nota3)/3;
if (pro>=7)
{
document.write('promocionado');
}
else
{
if (pro>=4)
{
document.write('regular');
}
else
{
document.write('reprobado');
}

Página
189
}
</script>
</body>
</html>
Analicemos el siguiente programa. Se ingresan tres string por teclado que representan
las notas de un alumno, se transformas a variables enteras y se obtiene el promedio
sumando los tres valores y dividiendo por 3 dicho resultado. Primeramente
preguntamos si el promedio es superior o igual a 7, en caso afirmativo por la rama del
verdadero de la estructura condicional mostramos un mensaje que indique
'Promocionado' (con comillas indicamos un texto que debe imprimirse en pantalla).
En caso que la condición nos de falso, por la rama del falso aparece otra estructura
condicional, porque todavía debemos averiguar si el promedio del alumno es superior/
igual a cuatro o inferior a cuatro.
Los comentarios en JavaScript los hacemos disponiendo dos barras previas al
comentario:
//Convertimos los 3 string en enteros
Si queremos disponer varias líneas de comentarios tenemos como alternativa:
/*
linea de comentario 1.
linea de comentario 2.
etc.
*/
Es decir encerramos el bloque con los caracteres /* */

Ejemplo:
<html>
<head>
</head>
<body>
<script language="javascript">
var nota1,nota2,nota3;
nota1=prompt('Ingrese 1ra. nota:','');
nota2=prompt('Ingrese 2da. nota:','');
nota3=prompt('Ingrese 3ra. nota:','');
//Convertimos los 3 string en enteros
nota1=parseInt(nota1);
nota2=parseInt(nota2);
nota3=parseInt(nota3);
var pro;
pro=(nota1+nota2+nota3)/3;
if (pro>=7)
{
document.write('promocionado');
}
else
{
if (pro>=4)
{
document.write('regular');
}
else
{
document.write('reprobado');
}
}
</script>
</body>
</html>

Página
190
Practica:
PROBLEMAS
1 - Se cargan por teclado tres números distintos. Mostrar por pantalla el mayor de
ellos.
2 - Se ingresa por teclado un valor entero, mostrar una leyenda que indique si el
número es positivo, cero o negativo.
3 - Confeccionar un programa que permita cargar un número entero positivo de hasta
tres cifras y muestre un mensaje indicando si tiene 1, 2, ó 3 cifras. Mostrar un mensaje
de error si el número de cifras no es 1, 2 ó 3.
4 - De un postulante a un empleo, que realizó un test de capacitación, se obtuvo la
siguiente información: nombre del postulante, cantidad total de preguntas que se le
realizaron y cantidad de preguntas que contestó correctamente. Se pide confeccionar
un programa que lea los datos del postulante e informe el nivel del mismo según el
porcentaje de respuestas correctas que ha obtenido, y sabiendo que:
Nivel superior: Porcentaje>=90%.
Nivel medio: Porcentaje>=75% y <90%.
Nivel regular: Porcentaje>=50% y <75%.
Fuera de nivel: Porcentaje<50%.

9. Operadores lógicos && (y) en las estructuras


condicionales.
El operador &&, traducido se lo lee como "Y". Se emplea cuando en una estructura
condicional se disponen dos condiciones.
Cuando vinculamos dos o 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.
Recordemos que la condición debe ir entre paréntesis en forma obligatoria.
La utilización de operadores lógicos permiten en muchos casos, plantear algoritmos más
cortos y comprensibles.
Veamos un ejemplo: Confeccionar un programa que lea por teclado tres números
distintos y nos muestre el mayor de ellos.

<html>
<head>
</head>
<body>
<script language="javascript">
var num1,num2,num3;
num1=prompt('Ingrese primer número:','');
num2=prompt('Ingrese segundo número:','');
num3=prompt('Ingrese tercer número:','');
num1=parseInt(num1);
num2=parseInt(num2);
num3=parseInt(num3);
if (num1>num2 && num1>num3)
{
document.write('el mayor es el '+num1);
}
else
{

Página
191
if (num2>num3)
{
document.write('el mayor es el '+num2);
}
else
{
document.write('el mayor es el '+num3);
}
}
</script>
</body>
</html>
Podemos leerla de la siguiente forma:
Si el contenido de la variable num1 es mayor al contenido de la variable num2 Y si el
contenido de la variable num1 es mayor al contenido de la variable num3 entonces la
CONDICION COMPUESTA resulta Verdadera.
Si una de las condiciones simples da falso, la CONDICION COMPUESTA da Falso y
continúa por la rama del falso.
Es decir que se mostrará el contenido de num1 si y sólo si num1>num2 y num1>num3.
En caso de ser Falsa la condición de la rama del falso, analizamos el contenido de num2
y num3 para ver cual tiene un valor mayor.
En esta segunda estructura condicional, al haber una condición simple, no se requieren
operadores lógicos.

Ejemplo:
<html>
<head>
</head>
<body>
<script language="javascript">
var num1,num2,num3;
num1=prompt('Ingrese primer número:','');
num2=prompt('Ingrese segundo número:','');
num3=prompt('Ingrese tercer número:','');
num1=parseInt(num1);
num2=parseInt(num2);
num3=parseInt(num3);
if (num1>num2 && num1>num3)
{
document.write('el mayor es el '+num1);
}
else
{
if (num2>num3)
{
document.write('el mayor es el '+num2);
}
else
{
document.write('el mayor es el '+num3);
}
}
</script>
</body>
</html>

Página
192
Practica:
PROBLEMAS
1 - Realizar un programa que pida cargar una fecha cualquiera, luego verificar si dicha
fecha corresponde a Navidad.
2 - Se ingresan tres valores por teclado, si todos son iguales se imprime la suma del
primero con el segundo y a este resultado se lo multiplica por el tercero (tener en
cuenta que puede haber tres condiciones simples)
3 - Se ingresan por teclado tres números, si todos los valores ingresados son menores a
10, imprimir en la página la leyenda ' Todos los números son menores a diez'.
4 - Escribir un programa que pida ingresar la coordenada de un punto en el plano, es
decir dos valores enteros x e y. Posteriormente imprimir en pantalla en qué cuadrante
se ubica dicho punto. (1º Cuadrante si x > 0 Y y > 0 , 2º Cuadrante: x < 0 Y y > 0, etc.)
5 - De un operario se conoce su sueldo y los años de antigüedad. 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, otorgarle un aumento del 20 %, mostrar el sueldo a pagar.
b) Si el sueldo es inferior a 500 pero su antigüedad es menor a 10 años,
otorgarle un aumento de 5 %.
c) Si el sueldo es mayor o igual a 500 mostrar el sueldo en la página sin
cambios.

10. Operadores lógicos || (o) en las estructuras


condicionales.
Traducido se lo lee como "O". Si la condición 1 es Verdadera o la condición 2 es
Verdadera, luego ejecutar la rama del Verdadero.
Cuando vinculamos dos o más condiciones con el operador "O", con que una de las dos
condiciones sea Verdadera alcanza para que el resultado de la condición compuesta
sea Verdadero.
Ejemplo: Se carga una fecha (día, mes y año) por teclado. Mostrar un mensaje si
corresponde al primer trimestre del año (enero, febrero o marzo).
Cargar por teclado el valor numérico del día, mes y año por separado.
<html>
<head>
</head>
<body>
<script language="javascript">
var dia,mes,año;
dia=prompt('Ingrese día:','');
mes=prompt('Ingrese mes:','');
año=prompt('Ingrese año:','');
dia=parseInt(dia);
mes=parseInt(mes);
año=parseInt(año);
if (mes==1 || mes==2 || mes==3)
{
document.write('corresponde al primer trimestre del año.');
}
</script>
</body>

Página
193
</html>
La carga de una fecha se hace por partes, ingresamos las variables dia, mes y año.

Ejemplo:
<html>
<head>
</head>
<body>
<script language="javascript">
var dia,mes,año;
dia=prompt('Ingrese día:','');
mes=prompt('Ingrese mes:','');
año=prompt('Ingrese año:','');
dia=parseInt(dia);
mes=parseInt(mes);
año=parseInt(año);
if (mes==1 || mes==2 || mes==3)
{
document.write('corresponde al primer trimestre del año.');
}
</script>
</body>
</html>

Practica: Se ingresan por teclado tres números, si todos los valores ingresados son
menores a 10, imprimir en la página la leyenda 'Todos los números son menores a
diez'.

11. Estructuras switch.


La instrucción switch es una alternativa para remplazar los if/else if.
De todos modos se puede aplicar en ciertas situaciones donde la condición se verifica
si es igual a cierto valor. No podemos preguntar por mayor o menor.
Con un ejemplo sencillo veremos cual es su sintaxis. Confeccionar un programa que
solicite que ingrese un valor entre 1 y 5. Luego mostrar en castellano el valor
ingresado. Mostrar un mensaje de error en caso de haber ingresado un valor que no se
encuentre en dicho rango.
<html>
<head>
</head>
<body>
<script language="javascript">
var valor;
valor=prompt('Ingrese un valor comprendido entre 1 y 5:','');
//Convertimos a entero
valor=parseInt(valor);
switch (valor) {
case 1: document.write('uno');
break;
case 2: document.write('dos');
break;
case 3: document.write('tres');
break;
case 4: document.write('cuatro');
break;
case 5: document.write('cinco');
break;
default:document.write('debe ingresar un valor comprendido entre 1 y 5.');

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

Ejemplo:
Pagina1.html
<html>
<head>
</head>
<body>
<script language="javascript">
var valor;
valor=prompt('Ingrese un valor comprendido entre 1 y 5:','');
//Convertimos a entero
valor=parseInt(valor);

Página
195
switch (valor) {
case 1: document.write('uno');
break;
case 2: document.write('dos');
break;
case 3: document.write('tres');
break;
case 4: document.write('cuatro');
break;
case 5: document.write('cinco');
break;
default:document.write('debe ingresar un valor comprendido entre 1 y 5.');
}
</script>
<br>
<A href="pagina2.html">Ver segundo problema</a>
</body>
</html>
Pagina2.html
<html>
<head>
</head>
<body>
<script language="javascript">
var col;
col=prompt('Ingrese el color con que se quiere pintar el fondo de la ventana
(rojo, verde, azul)','');
switch (col) {
case 'rojo': document.bgColor='#ff0000';
break;
case 'verde': document.bgColor='#00ff00';
break;
case 'azul': document.bgColor='#0000ff';
break;
}
</script>
</body>
</html>

Practica: Solicitar el ingreso alguna de estas palabras (casa, mesa, perro, gato)
luego mostrar la palabra traducida en inglés. Es decir, si se ingresa 'casa' debemos
mostrar el texto 'house' en la página.

12. Estructura repetitiva (while)


Hasta ahora hemos empleado estructuras SECUENCIALES y CONDICIONALES. Existe
otro tipo de estructuras tan importantes como las anteriores que son las estructuras
REPETITIVAS.
Una estructura repetitiva permite ejecutar una instrucción o un conjunto de
instrucciones varias veces.
Una ejecución repetitiva de sentencias se caracteriza por:
- La o las sentencias que se repiten.
- El test o prueba de condición antes de cada repetición, que motivará que se repitan o
no las sentencias.
Funcionamiento del while: En primer lugar se verifica la condición, si la misma resulta
verdadera se ejecutan las operaciones que indicamos entre las llaves que le siguen al
while.

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

Página
197
No existe una RECETA para definir una condición de una estructura repetitiva, sino que
se logra con una práctica continua, solucionando problemas.
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), 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
.
.
100
101 Cuando x vale 101 la condición de la estructura
repetitiva retorna falso, en este caso finaliza el diagrama.
La variable x recibe el nombre de CONTADOR. Un contador es un tipo especial de
variable que se incrementa o decrementa con valores constantes durante la ejecución del
programa. El contador x nos indica en cada momento la cantidad de valores impresos en
la página.
Importante: Podemos observar que el bloque repetitivo puede no ejecutarse si la
condición retorna falso la primera vez.
La variable x debe estar inicializada con algún valor antes que se ejecute la operación x
= x + 1.
Probemos algunas modificaciones de este programa y veamos qué cambios se deberían
hacer para:
1 - Imprimir los números del 1 al 500.
2 - Imprimir los números del 50 al 100.
3 - Imprimir los números del -50 al 0.
4 - Imprimir los números del 2 al 100 pero de 2 en 2 (2,4,6,8 ....100).

Ejemplo:
<html>
<head>
</head>
<body>
<script language="javascript">
var x;
x=1;
while (x<=100)
{
document.write(x);
document.write('<br>');
x=x+1;
}
</script>
</body>
</html>

Practica:
PROBLEMAS
1 - Realizar un programa que imprima 25 términos de la serie 11 - 22 - 33 - 44, etc. (No
se ingresan valores por teclado).

Página
198
2 - Mostrar los múltiplos de 8 hasta el valor 500. Debe aparecer en pantalla 8 -16 -24,
etc.

13. Concepto de acumulador.


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

Ejemplo:
<html>
<head>

Página
199
</head>
<body>
<script language="javascript">
var x=1;
var suma=0;
var valor;
while (x<=5)
{
valor=prompt('Ingrese valor:','');
valor=parseInt(valor);
suma=suma+valor;
x=x+1;
}
document.write("La suma de los valores es "+suma+"<br>");
</script>
</body>
</html>

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

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

Ejemplo:
<html>
<head>
</head>
<body>
<script language="javascript">
var valor;
do {

Página
201
valor=prompt('Ingrese un valor entre 0 y 999:','');
valor=parseInt(valor);
document.write('El valor '+valor+' tiene ');
if (valor<10)
{
document.write('Tiene 1 digitos');
}
else
{
if (valor<100)
{
document.write('Tiene 2 digitos');
}
else
{
document.write('Tiene 3 digitos');
}
}
document.write('<br>');
} while(valor!=0);
</script>
</body>
</html>

Practica:
PROBLEMAS
1 - Realizar un programa que acumule (sume) valores ingresados por teclado hasta
ingresa el 9999 (no sumar dicho valor, solamente indica que ha finalizado la carga).
Imprimir el valor acumulado e informar si dicho valor es cero, mayor a cero o menor a
cero.
2 - En un banco se procesan datos de las cuentas corrientes de sus clientes. De cada
cuenta corriente se conoce: número de cuenta, nombre del cliente y saldo actual. 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, nombre del cliente y estado de la cuenta
según su saldo, sabiendo que:
Estado de la cuenta 'Acreedor' si el saldo es >0.
'Deudor' si el saldo es <0.
'Nulo' si el saldo es =0.
b) La suma total de los saldos acreedores.
3 - Se realizó un censo provincial y se desea procesar la información obtenida en dicho
censo. De cada una de las personas censadas se tiene la siguiente información: número
de documento, edad y sexo ('femenino' o 'masculino')
Se pide confeccionar un programa que lea los datos de cada persona censada (para
finalizar ingresar el valor cero en el número de documento) e informar:
a) Cantidad total de personas censadas.
b) Cantidad de varones.
c) Cantidad de mujeres.
d) Cantidad de varones cuya edad varía entre 16 y 65 años.

15. Estructura repetitiva (for)

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

Página
203
Ejemplo:
<html>
<head>
</head>
<body>
<script language="javascript">
var f;
for(f=1;f<=10;f++)
{
document.write(f+" ");
}
</script>
</body>
</html>

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

Página
204
c) Mostrar por pantalla un mensaje que indique cual de los tres turnos tiene un
promedio de edades mayor.

16. 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, ya sea en un
mismo programa o en otros programas, lo cual implica que se tenga que escribir tantos
grupos de aquellas sentencias como veces aparezca dicho proceso.
La herramienta más potente con que se cuenta para facilitar, reducir y dividir el trabajo
en programación, 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. Si un grupo de
sentencias realiza una tarea bien definida, entonces puede estar justificado el aislar
estas sentencias formando una función, aunque resulte que sólo se le llame o use una
vez.
Hasta ahora hemos visto como resolver un problema planteando un único algoritmo.
Con funciones podemos segmentar un programa en varias partes.
Frente a un problema, planteamos un algoritmo, éste puede constar de pequeños
algoritmos.
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.
Consta de un nombre y parámetros. Con el nombre llamamos a la función, es decir,
hacemos referencia a la misma. Los parámetros son valores que se envían y son
indispensables para la resolución del mismo. La función realizará alguna operación con
los parámetros que le enviamos. Podemos cargar una variable, consultarla,
modificarla, imprimirla, etc.
Incluso los programas más sencillos tienen la necesidad de fragmentarse. Las funciones
son los únicos tipos de subprogramas que acepta JavaScript. Tienen la siguiente
estructura:
function <nombre de función>(argumento1, argumento2, ..., 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, tal vez deberíamos llamarla centrarTitulo).
Veremos que una función puede variar bastante en su estructura, puede tener o no
parámetros, retornar un valor, etc.
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
La solución sin emplear funciones es:
<html>
<head>
</head>
<body>
<script language="javascript">
document.write("Cuidado<br>");
document.write("Ingrese su documento correctamente<br>");
document.write("Cuidado<br>");
document.write("Ingrese su documento correctamente<br>");
document.write("Cuidado<br>");
document.write("Ingrese su documento correctamente<br>");
</script>
</body>
</html>
Empleando una función:
<html>
<head>
</head>
<body>
<script languaje="javascript">
function mostrarMensaje()
{
document.write("Cuidado<br>");
document.write("Ingrese su documento correctamente<br>");
}

mostrarMensaje();
mostrarMensaje();
mostrarMensaje();

</script>
</body>
</html>
Recordemos que JavaScript es sensible a mayúsculas y minúsculas. 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.
Es importante notar que para que una función se ejecute debemos llamarla desde
fuera por su nombre (en este ejemplo: mostrarMensaje()).
Cada vez que se llama una función se ejecutan todas las líneas contenidas en la misma.
Si no se llama a la función, las instrucciones de la misma nunca se ejecutarán.
A una función la podemos llamar tantas veces como necesitemos.
Las funciones nos ahorran escribir código que se repite con frecuencia y permite que
nuestro programa sea más entendible.

Ejemplo:
<html>
<head>
</head>
<body>
<script language="javascript">
function mostrarMensaje()
{
document.write("Cuidado<br>");
document.write("Ingrese su documento correctamente<br>");
}

mostrarMensaje();
mostrarMensaje();

Página
206
mostrarMensaje();

</script>
</body>
</html>

17. Funciones con parámetros.


Explicaremos con un ejemplo, una función que tiene datos de entrada.
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. Cargar por teclado esos dos valores.
<html>
<head>
</head>
<body>
<script language="javascript">
function mostrarComprendidos(x1,x2)
{
var inicio;
for(inicio=x1;inicio<=x2;inicio++)
{
document.write(inicio+' ');
}
}

var valor1,valor2;
valor1=prompt('Ingrese valor inferior:','');
valor1=parseInt(valor1);
valor2=prompt('Ingrese valor superior:','');
valor2=parseInt(valor2);
mostrarComprendidos(valor1,valor2);

</script>
</body>
</html>
El programa de JavaScript empieza a ejecutarse donde definimos las variables valor1 y
valor2 y no donde se define la función. Luego de cargar los dos valores por teclado se
llama a la función mostrarComprendidos y le enviamos las variables valor1 y valor2.
Los parámetors x1 y x2 reciben los contenidos de las variables valor1 y valor 2.
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,x2)
{
var inicio;
for(inicio=x1;inicio<=x2;inicio++)
{
document.write(inicio+' ');
}
}

var valor1,valor2;
valor1=prompt('Ingrese valor inferior:','');

Página
207
valor1=parseInt(valor1);
valor2=prompt('Ingrese valor superior:','');
valor2=parseInt(valor2);
mostrarComprendidos(valor1,valor2);

</script>
</body>
</html>

Practica:
PROBLEMAS
1 - Elaborar una función a la cual le enviemos tres enteros y muestre el menor.
2 - Confeccionar una función a la cual le envíe tres enteros y los muestre ordenados de
menor a mayor.

18. Funciones que retornan un valor.


Son comunes los casos donde una función, luego de hacer un proceso, retorne un
valor.
Ejemplo 1: Confeccionar una función que reciba un valor entero comprendido entre 1
y 5. Luego retornar en castellano el valor recibido.
<html>
<head>
</head>
<body>
<script language="javascript">
function convertirCastellano(x)
{
if (x==1)
return "uno";
else
if (x==2)
return "dos";
else
if (x==3)
return "tres";
else
if (x==4)
return "cuatro";
else
if (x==5)
return "cinco";
else
return "valor incorrecto";
}

var valor;
valor=prompt("Ingrese un valor entre 1 y 5","");
valor=parseInt(valor);
var r;
r=convertirCastellano(valor);
document.write(r);
</script>
</body>
</html>
Podemos ver que el valor retornado por una función lo indicamos por medio de la
palabra clave return. Cuando se llama a la función, debemos asignar el nombre de la
función a una variable, ya que la misma retorna un valor.

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

function formatearFecha(dia,mes,año)
{
var s='Hoy es '+dia+' de ';
switch (mes) {
case 1:s=s+'enero ';
break;
case 2:s=s+'febrero ';
break;
case 3:s=s+'marzo ';
break;
case 4:s=s+'abril ';
break;
case 5:s=s+'mayo ';
break;
case 6:s=s+'junio ';
break;
case 7:s=s+'julio ';
break;
case 8:s=s+'agosto ';
break;
case 9:s=s+'septiembre ';
break;
case 10:s=s+'octubre ';
break;
case 11:s=s+'noviembre ';
break;
case 12:s=s+'diciembre ';
break;
} //fin del switch
s=s+'de '+año;
return s;
}

Página
209
document.write(formatearFecha(11,6,2006));

</script>
</body>
</html>
Analicemos un poco la función formatearFecha. Llegan tres parámetros con el día, mes
y año. Definimos e inicializamos una variable con:
var s='Hoy es '+dia+' de ';
Luego le concatenamos o sumamos el mes:
s=s+'enero ';
Esto, si el parámetro mes tiene un uno. Observemos como acumulamos lo que tiene 's'
más el string 'enero '. En caso de hacer s='enero ' perderíamos el valor previo que tenía
la variable s.
Por último concatenamos el año:
s=s+'de '+año;
Cuando se llama a la función directamente, al valor devuelto se lo enviamos a la función
write del objeto document. Esto último lo podemos hacer en dos pasos:
var fec= formatearFecha(11,6,2006);
document.write(fec);
Guardamos en la variable 'fec' el string devuelto por la función.

Ejemplo:
Pagina1.html
<html>
<head>
</head>
<body>
<script language="javascript">
function convertirCastellano(x)
{
if (x==1)
return "uno";
else
if (x==2)
return "dos";
else
if (x==3)
return "tres";
else
if (x==4)
return "cuatro";
else
if (x==5)
return "cinco";
else
return "valor incorrecto";
}

var valor;
valor=prompt("Ingrese un valor entre 1 y 5","");
valor=parseInt(valor);
var r;
r=convertirCastellano(valor);
document.write(r);
</script>
<br>

Página
210
<A href="pagina2.html">Ver segundo problema</a>
</body>
</html>
Pagina2.html
<html>
<head>
</head>
<body>
<script language="javascript">

function formatearFecha(dia,mes,año)
{
var s='Hoy es '+dia+' de ';
switch (mes) {
case 1:s=s+'enero ';
break;
case 2:s=s+'febrero ';
break;
case 3:s=s+'marzo ';
break;
case 4:s=s+'abril ';
break;
case 5:s=s+'mayo ';
break;
case 6:s=s+'junio ';
break;
case 7:s=s+'julio ';
break;
case 8:s=s+'agosto ';
break;
case 9:s=s+'septiembre ';
break;
case 10:s=s+'octubre ';
break;
case 11:s=s+'noviembre ';
break;
case 12:s=s+'diciembre ';
break;
} //fin del switch
s=s+'de '+año;
return s;
}

document.write(formatearFecha(11,6,2006));

</script>
</body>
</html>

Practica:
PROBLEMAS
1 - Confeccionar una función a la cual le envíe tres enteros y retorne el mayor de ellos.
2 - Elaborar una función a la cual le envíe el valor del lado de un cuadrado y me retorne
su perímetro.
3 - Desarrollar una función que retorne la cantidad de dígitos que tiene una variable
entera positiva.
4 - Elaborar una función que reciba tres enteros y retorne el promedio.
5 - Confeccionar una función que solicite la carga de 5 valores por teclado y retorne su
suma.

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

Página
212
Un método está determinado por la clase del objeto receptor, todos los objetos de una
clase usan el mismo método en respuesta a mensajes similares.
La interpretación de un mensaje (selección del método ejecutado) depende del
receptor y puede variar con distintos receptores, es decir, puede variar de una clase a
otra.
Clases
Una clase es una agrupación de objetos que comparten las mismas propiedades y
comportamientos. Es un molde para objetos que poseen las mismas características
(que pueden recibir los mismos mensajes y responden de la misma manera).
Una clase es una representación de una idea o concepto. Unidad que encapsula
códigos y datos para los métodos (operaciones).
Todos los ejemplares de una clase se comportan de forma similar (invocan el mismo
método) en respuesta a mensajes similares.
La clase a la cual pertenece un objeto determina el comportamiento del objeto.
Una clase tiene encomendadas actividades que ejecutan los métodos.
Las clases están definidas por:
- Atributos (Propiedades),
- Comportamiento (operaciones o métodos) y
- Relaciones con otros objetos.
Una aplicación es un conjunto de objetos de determinadas clases.

20. Clase Date


JavaScript dispone de varias clases predefinidos para acceder a muchas de las
funciones normales de cualquier lenguaje, como puede ser el manejo de vectores o el
de fechas.
Esta clase nos permitirá manejar fechas y horas. Se invoca así:
fecha = new Date();//creación de un objeto de la clase Date
fecha = new Date(año, mes, dia);
fecha = new Date(año, mes, dia, hora, minuto, segundo);
Si no utilizamos parámetros, el objeto fecha contendrá la fecha y hora actuales,
obtenidas del reloj de nuestra computadora. En caso contrario hay que tener en
cuenta que los meses comienzan por cero. Así, por ejemplo:
navidad06 = new Date(2006, 11, 25)
El objeto Date dispone, entre otros, de los siguientes métodos:
getYear()
setYear(año)
Obtiene y coloca, respectivamente, el año de la fecha.
Éste se devuelve como número de 4 dígitos excepto en el
caso en que esté entre 1900 y 1999, en cuyo caso
devolverá las dos últimas cifras.
getFullYear()
setFullYear(año)
Realizan la misma función que los anteriores, pero sin
tanta complicación, ya que siempre devuelven números
con todos sus dígitos.
getMonth()
setMonth(mes)
getDate()
setDate(dia)
getHours()

Página
213
setHours(horas)
getMinutes()
setMinutes(minutos)
getSeconds()
setSeconds(segundos)
Obtienen y colocan, respectivamente, el mes, día, hora,
minuto y segundo de la fecha.
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.


<HTML>
<HEAD>
<SCRIPT LANGUAGE="JavaScript">
function mostrarFechaHora()
{
var fecha
fecha=new Date();
document.write('Hoy es ');
document.write(fecha.getDate()+'/');
document.write((fecha.getMonth()+1)+'/');
document.write(fecha.getYear());
document.write('<br>');
document.write('Es la hora ');
document.write(fecha.getHours()+':');
document.write(fecha.getMinutes()+':');
document.write(fecha.getSeconds());
}
//Llamada a la función
mostrarFechaHora();
</SCRIPT>
</HEAD>
<BODY>

</BODY>
</HTML>
En este problema hemos creado un objeto de la clase Date. 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.
Es bueno notar que para llamar a los métodos disponemos:
<nombre de objeto>.<nombre de método>(parámetros)

Ejemplo:
<HTML>
<HEAD>
<SCRIPT LANGUAGE="JavaScript">
function mostrarFechaHora()
{
var fecha
fecha=new Date();
document.write('Hoy es ');
document.write(fecha.getDate()+'/');
document.write((fecha.getMonth()+1)+'/');
document.write(fecha.getYear());
document.write('<br>');
document.write('Es la hora ');
document.write(fecha.getHours()+':');
document.write(fecha.getMinutes()+':');
document.write(fecha.getSeconds());
}
//Llamada a la función

Página
214
mostrarFechaHora();
</SCRIPT>
</HEAD>
<BODY>

</BODY>
</HTML>

21. Clase Array


Un vector es una estructura de datos que permite almacenar un CONJUNTO de datos.
Con un único nombre se define un vector y por medio de un subíndice hacemos
referencia a cada elemento del mismo (componente).
Ejemplo 1: Crear un vector para almacenar los cinco sueldos de operarios y luego
mostrar el total de gastos en sueldos (cada actividad en una función).
<HTML>
<HEAD>
</HEAD>
<BODY>
<SCRIPT LANGUAGE="JavaScript">
function cargar(sueldos)
{
var f;
for(f=0;f<sueldos.length;f++)
{
var v;
v=prompt('Ingrese sueldo:','');
sueldos[f]=parseInt(v);
}
}

function calcularGastos(sueldos)
{
var total=0;
var f;
for(f=0;f<sueldos.length;f++)
{
total=total+sueldos[f];
}
document.write('Listado de sueldos<br>');
for(f=0;f<sueldos.length;f++)
{
document.write(sueldos[f]+'<br>');
}
document.write('Total de gastos en sueldos:'+total);
}

var sueldos;
sueldos=new Array(5);
cargar(sueldos);
calcularGastos(sueldos);

</SCRIPT>
</BODY>
</HTML>
Recordemos que el programa comienza a ejecutarse a partir de las líneas que se
encuentran fuera de la funciones:
var sueldos;
sueldos=new Array(5);
cargar(sueldos);

Página
215
calcularGastos(sueldos);
Lo primero, definimos una variable y posteriormente creamos un objeto de la clase
Array, indicándole que queremos almacenar 5 valores.
Llamamos a la función cargar enviándole el vector. En la función, a través de un ciclo
for recorremos las distintas componentes del vector y almacenamos valores enteros
que ingresamos por teclado.
Para conocer el tamaño del vector accedemos a la propiedad length de la clase Array.
En la segunda función sumamos todas las componentes del vector, imprimimos en la
página los valores y el total de gastos.
Ejemplo 2: Crear un vector con elementos de tipo string. Almacenar los meses de
año. En otra función solicitar el ingreso de un número entre 1 y 12. Mostrar a qué mes
corresponde y cuántos días tiene dicho mes.
<HTML>
<HEAD></HEAD>
<BODY>

<SCRIPT LANGUAGE="JavaScript">

function mostrarFecha(meses,dias)
{
var num;
num=prompt('Ingrese número de mes:','');
num=parseInt(num);
document.write('Corresponde al mes:'+meses[num-1]);
document.write('<br>');
document.write('Tiene '+dias[num-1]+' días');
}

var meses;
meses=new Array(12);
meses[0]='Enero';
meses[1]='Febrero';
meses[2]='Marzo';
meses[3]='Abril';
meses[4]='Mayo';
meses[5]='Junio';
meses[6]='Julio';
meses[7]='Agosto';
meses[8]='Septiembre';
meses[9]='Octubre';
meses[10]='Noviembre';
meses[11]='Diciembre';

var dias;
dias=new Array(12);
dias[0]=31;
dias[1]=28;
dias[2]=31;
dias[3]=30;
dias[4]=31;
dias[5]=30;
dias[6]=31;
dias[7]=31;
dias[8]=30;
dias[9]=31;
dias[10]=30;
dias[11]=31;

Página
216
mostrarFecha(meses,dias);
</SCRIPT>

</BODY>
</HTML>
En este problema definimos dos vectores, uno para almacenar los meses y otro los
días. Decimos que se trata de vectores paralelos porque en la componente cero del
vector meses almacenamos el string 'Enero' y en el vector dias, la cantidad de días del
mes de enero.
Es importante notar que cuando imprimimos, disponemos como subíndice el valor
ingresado menos 1, esto debido a que normalmente el operador de nuestro programa
carga un valor comprendido entre 1 y 12. Recordar que los vectores comienzan a
numerarse a partir de la componente cero.
document.write('Corresponde al mes:'+meses[num-1]);

Ejemplo:
<HTML>
<HEAD>
</HEAD>
<BODY>
<SCRIPT LANGUAGE="JavaScript">
function cargar(sueldos)
{
var f;
for(f=0;f<sueldos.length;f++)
{
var v;
v=prompt('Ingrese sueldo:','');
sueldos[f]=parseInt(v);
}
}
function calcularGastos(sueldos)
{
var total=0;
var f;
for(f=0;f<sueldos.length;f++)
{
total=total+sueldos[f];
}
document.write('Listado de sueldos<br>');
for(f=0;f<sueldos.length;f++)
{
document.write(sueldos[f]+'<br>');
}
document.write('Total de gastos en sueldos:'+total);
}

var sueldos;
sueldos=new Array(5);
cargar(sueldos);
calcularGastos(sueldos);

</SCRIPT>
<br>
<a href="pagina2.html">Segundo Problema</a>
</BODY>
</HTML>

Página
217
Practica:
PROBLEMAS
1 - Desarrollar un programa que permita ingresar un vector de 8 elementos, e informe:
El valor acumulado de todos los elementos del vector.
El valor acumulado de los elementos del vector que sean mayores a 36.
Cantidad de valores mayores a 50.
2 - Realizar un programa que pida la carga de dos vectores numéricos. Obtener la suma
de los dos vectores, dicho resultado guardarlo en un tercer vector del mismo tamaño.
umar componente a componente.
El tamaño del vector es a elección.

22. Clase Math


Esta clase no está construido para que tengamos nuestras variables Math, sino como
un contenedor que tiene diversas constantes (como Math.E y Math.PI) y los siguientes
métodos matemáticos:
Resultado
Expresión de
Método Descripción del
ejemplo
ejemplo
abs Valor absoluto Math.abs(-2) 2
sin, cos, Funciones trigonométricas, reciben el
Math.cos(Math.PI) -1
tan argumento en radianes
asin, acos,
Funciones trigonométricas inversas Math.asin(1) 1.57
atan
exp, log Exponenciación y logaritmo, base E Math.log(Math.E) 1
Devuelve el entero más pequeño mayor
ceil Math.ceil(-2.7) -2
o igual al argumento
Devuelve el entero más grande menor o
floor Math.floor(-2.7) -3
igual al argumento
Devuelve el entero más cercano o igual
round Math.round(-2.7) -3
al argumento
Devuelve el menor (o mayor) de sus dos
min, max Math.min(2,4) 2
argumentos
Exponenciación, siendo el primer
pow argumento la base y el segundo el Math.pow(2,3) 8
exponente
sqrt Raíz cuadrada Math.sqrt(25) 5
Genera un valor aleatorio comprendido
random Math.random() Ej. 0.7345
entre 0 y 1.

Página
218
Ejemplo: Confeccionar un programa que permita cargar un valor comprendido
entre 1 y 10. Luego generar un valor aleatorio entre 1 y 10, mostrar un mensaje con el
número sorteado e indicar si ganó o perdió:
<html>
<head>
</head>

<body>
<script language="JavaScript">
var selec=prompt('Ingrese un valor entre 1 y 10','');
selec=parseInt(selec);
var num=parseInt(Math.random()*10)+1;
if (num==selec)
document.write('Ganó el número que se sorteó es el '+ num);
else
document.write('Lo siento se sorteó el valor '+num+' y usted eligió el
'+selec);
</script>
</body>
</html>
Para generar un valor aleatorio comprendido entre 1 y 10 debemos plantear lo
siguiente:
var num=parseInt(Math.random()*10)+1;
Al multiplicar Math.random() por 10, nos genera un valor aleatorio comprendido entre
un valor mayor a 0 y menor a 10, luego, con la función parseInt, obtenemos sólo la
parte entera. Finalmente sumamos uno.
El valor que cargó el operador se encuentra en:
var selec=prompt('Ingrese un valor entre 1 y 10','');
Con un simple if validamos si coinciden los valores (el generado y el ingresado por
teclado).

Ejemplo:
<html>
<head>
</head>

<body>
<script language="JavaScript">
var selec=prompt('Ingrese un valor entre 1 y 10','');
selec=parseInt(selec);
var num=parseInt(Math.random()*10)+1;
if (num==selec)
document.write('Ganó el número que se sorteó es el '+ num);
else
document.write('Lo siento se sorteó el valor '+num+' y usted eligió el
'+selec);
</script>
</body>
</html>

23. Clase String.


Un string consiste en uno o más caracteres encerrados entre comillas simples o dobles.
Concatenación de cadenas (+)
JavaScript permite concatenar cadenas utilizando el operador +.
El siguiente fragmento de código concatena tres cadenas para producir su salida:

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

<body>
<script language="JavaScript">
var cadena=prompt('Ingrese una cadena:','');
document.write('La cadena ingresada es:'+cadena);
document.write('<br>');
document.write('La cantidad de caracteres son:'+cadena.length);
document.write('<br>');
document.write('El primer caracter es:'+cadena.charAt(0));
document.write('<br>');
document.write('Los primeros 3 caracteres son:'+cadena.substring(0,3));
document.write('<br>');
if (cadena.indexOf('hola')!=-1)
document.write('Se ingresó la subcadena hola');

Página
220
else
document.write('No se ingresó la subcadena hola');
document.write('<br>');
document.write('La cadena convertida a mayúsculas es:'+cadena.toUpperCase());
document.write('<br>');
document.write('La cadena convertida a minúsculas es:'+cadena.toLowerCase());
document.write('<br>');
</script>
</body>
</html>

Ejemplo:
<html>
<head>
</head>

<body>
<script language="JavaScript">
var cadena=prompt('Ingrese una cadena:','');
document.write('La cadena ingresada es:'+cadena);
document.write('<br>');
document.write('La cantidad de caracteres son:'+cadena.length);
document.write('<br>');
document.write('El primer caracter es:'+cadena.charAt(0));
document.write('<br>');
document.write('Los primeros 3 caracteres son:'+cadena.substring(0,3));
document.write('<br>');
if (cadena.indexOf('hola')!=-1)
document.write('Se ingresó la subcadena hola');
else
document.write('No se ingresó la subcadena hola');
document.write('<br>');
document.write('La cadena convertida a mayúsculas es:'+cadena.toUpperCase());
document.write('<br>');
document.write('La cadena convertida a minúsculas es:'+cadena.toLowerCase());
document.write('<br>');
</script>
</body>
</html>

Practica:
PROBLEMAS
1 – Ingresar una serie de nombres por teclado hasta que se digite la palabra Fin, y
mostrar cuántos nombres se ingresaron.
2 – Igual al anterior, pero que termine la aplicación sin contemplar mayúsculas ni
minúsculas. Es decir que para salir se pueda teclear fin, Fin o FIN.
3 – Realizar la búsqueda de un string clave en un string fuente. Se deberá ingresar una
frase o texto (fuente) y luego la clave a buscar. En caso de encontrarla, imprimir la
posición, de lo contrario una leyenda.
4 – Ingresar una palabra o texto por teclado y determinar si es o no una palabra
palíndromo. (Palabra que se lee de igual manera de adelante hacia atrás, que de atrás
hacia delante).
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 @.
6 - Cargar un String por teclado e implementar los siguientes métodos:
a) Imprimir la primera mitad de los caracteres de la cadena.
b) Imprimir el último caracter.

Página
221
c) Imprimirlo en forma inversa.
d) Imprimir cada caracter del String separado con un guión.
e) Imprimir la cantidad de vocales almacenadas.
7 – Codifique un programa que permita cargar una oración por teclado, luego mostrar
cada palabra ingresada en una línea distinta.
Por ejemplo si cargo:
La mañana está fría.
Debe aparecer:
La
mañana
está
fría.

24. Formularios y Eventos.


El uso de JavaScript en los formularios HTML se hace fundamentalmente con el
objetivo de validar los datos ingresados. Se hace esta actividad en el cliente
(navegador) para desligar de esta actividad al servidor que recibirá los datos
ingresados por el usuario.
Esta posibilidad de hacer pequeños programas que se ejecutan en el navegador, evitan
intercambios innecesarios entre el cliente y el servidor (navegador y sitio web).
Suponemos que conoce las marcas para la creación de formularios en una página web:
form <FORM> ... </FORM>
text <INPUT TYPE="text">
password <INPUT TYPE="password">
textarea <TEXTAREA> ... </TEXTAREA>
button <INPUT TYPE="button">
submit <INPUT TYPE="submit">
reset <INPUT TYPE="reset">
checkbox <INPUT TYPE="checkbox">
radio <INPUT TYPE="radio">
select <SELECT> ... </SELECT>
hidden <INPUT TYPE="hidden">
El navegador crea un objeto por cada control visual que aparece dentro de la página.
Nosotros podemos acceder posteriormente desde JavaScript a dichos objetos.
El objeto principal es el FORM que contendrá todos los otros objetos: TEXT (editor de
líneas), TEXTAREA (editor de varias líneas), etc.
Nuestra actividad en JavaScript es procesar los eventos que generan estos controles
(un evento es una acción que se dispara, por ejemplo si se presiona un botón).
Vamos a hacer en problema muy sencillo empleando el lenguaje JavaScript;
dispondremos un botón y cada vez que se presione, mostraremos un contador:
<html>
<head>
</head>
<body>

<script language="JavaScript">
var contador=0;

function incrementar()
{
contador++;
alert('El contador ahora vale :' + contador);

Página
222
}
</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, dicha función se ejecuta
cuando se dispara el evento respectivo. En este caso cada vez que presionamos el
botón, se llama a la función incrementar, en la misma incrementamos la variable
contador en uno. Hay que tener en cuenta que a la variable contador la definimos
fuera de la función para que no se inicialice cada vez que se dispara el evento.
La función alert crea una ventana que puede mostrar un mensaje.

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

<script language="JavaScript">
var contador=0;

function incrementar()
{
contador++;
alert('El contador ahora vale :' + contador);
}
</script>

<form>
<input type="button" onClick="incrementar()" value="incrementar">
</form>
</body>
</html>

Practica: Crear un formulario con tres botones con las leyendas "1", "2" y "3".
Mostrar un mensaje indicando qué botón se presionó.

25. Controles FORM, BUTTON y TEXT.


Hasta ahora hemos visto como crear un formulario con controles de tipo BUTTON.
Agregamos un control de tipo TEXT (permite al operador cargar caracteres por
teclado).
Ahora veremos la importancia de definir un NAME a todo control de un formulario.
Con un ejemplo veremos estos controles: Confeccionar un formulario que permita
ingresar el nombre y edad de una persona:
<html>
<head></head>
<body>

<script language="JavaScript">
function mostrar()
{
var nom=document.form1.nombre.value;
var ed=document.form1.edad.value;
alert('Ingreso el nombre:' + nom);

Página
223
alert('Y la edad:' + ed);
}
</script>

<form name="form1">
Ingrese su nombre:
<input type="text" name="nombre"><br>
Ingrese su edad:
<input type="text" name="edad"><br>
<input type="button" value="Confirmar" onClick="mostrar()">
</form>

</body>
</html>
En este problema tenemos cuatro controles: 1 FORM, 1 BUTTON, 2 TEXT. El evento
que se dispara al presionar el botón se llama mostrar.
La función 'mostrar' accede a los contenidos de los dos controles de tipo TEXT:
var nom=document.form1.nombre.value;
var ed=document.form1.edad.value;
Para hacer más clara la función guardamos en dos variables auxiliares los contenidos
de los controles de tipo TEXT. Hay que tener en cuenta que a nuestra página la
accedemos por medio del objeto: document, luego, al formulario que hemos creado,
lo accedemos por el NAME que le dimos al formulario, en este caso: form1, luego, a
cada control que contiene el formulario, lo accedemos nuevamento por su NAME, es
decir: nombre y edad respectivamente. Por último, para acceder a las cadenas
cargadas debemos indicar la propiedad value.

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

<script language="JavaScript">
function mostrar()
{
var nom=document.form1.nombre.value;
var ed=document.form1.edad.value;
alert('Ingreso el nombre:' + nom);
alert('Y la edad:' + ed);
}
</script>

<form name="form1">
Ingrese su nombre:
<input type="text" name="nombre"><br>
Ingrese su edad:
<input type="text" name="edad"><br>
<input type="button" value="Confirmar" onClick="mostrar()">
</form>

</body>
</html>

Practica:
PROBLEMAS

Página
224
1 - 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).
2 - Cargar dos números en objetos de tipo text y al presionar un botón, mostrar el
mayor.
3 - Cargar un nombre y un apellido en sendos text. Al presionar un botón,
concatenarlos y mostrarlos en un tercer text (Tener en cuenta que podemos modificar
la propiedad value de un objeto TEXT cuando ocurre un evento).

26. Control PASSWORD


Esta marca es una variante de la de tipo "TEXT". La diferencia fundamental es que
cuando se carga un texto en el campo de edición sólo muestra asteriscos en pantalla,
es decir, es fundamental para el ingreso de claves y para que otros usuarios no vean
los caracteres que tipeamos.
La mayoría de las veces este dato se procesa en el servidor. Pero podemos en el cliente
(es decir en el navegador) verificar si ha ingresado una cantidad correcta de caracteres,
por ejemplo.
Ejemplo: Codificar una página que permita ingresar una password y luego muestre
una ventana de alerta si tiene menos de 5 caracteres.
<HTML>
<HEAD>
<SCRIPT LANGUAGE="JavaScript">
function validar()
{
if (document.form1.text1.value.length<5)
{
alert("Ingrese al menos 5 caracteres");
document.form1.text1.value="";
}
}
</SCRIPT>
</HEAD>
<BODY>
<FORM NAME="form1">
Ingrese clave(al menos 5 caracteres): <INPUT TYPE="password" NAME="text1">
<INPUT TYPE="button" ONCLICK="validar()" VALUE="Enviar">
</FORM>
</BODY>
</HTML>
En este problema debemos observar que cuando ingresamos caracteres dentro del
campo de edición sólo vemos asteriscos, pero realmente en memoria se almacenan los
caracteres tipeados. Si queremos mostrar los caracteres ingresados debemos acceder
a:
document.form1.text1.value
Normalmente, a este valor no lo mostraremos dentro de la página, sino se perdería el
objetivo de este control (ocultar los caracteres tipeados).
Si necesitamos saber la cantidad de caracteres que tiene un string accedemos a la
propiedad length que retorna la cantidad de caracteres.
if (document.form1.text1.value.length<5)

Ejemplo:
<HTML>

Página
225
<HEAD>
<SCRIPT LANGUAGE="JavaScript">
function validar()
{
if (document.form1.text1.value.length<5)
{
alert("Ingrese al menos 5 caracteres");
document.form1.text1.value="";
}
}
</SCRIPT>
</HEAD>
<BODY>
<FORM NAME="form1">
Ingrese clave(al menos 5 caracteres): <INPUT TYPE="password" NAME="text1">
<INPUT TYPE="button" ONCLICK="validar()" VALUE="Enviar">
</FORM>
</BODY>
</HTML>

Practica:
PROBLEMA
1 - Disponer dos campos de texto tipo password. Cuando se presione un 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, esto se hace
cuando se crea una password para el ingreso a un sitio o para el cambio de una
existente).
Tener en cuenta que podemos emplear el operador == para ver si dos string son
iguales.

27. Control SELECT


Este otro objeto visual que podemos disponer en un FORM permite realizar la
selección de un string de una lista y tener asociado al mismo un valor no visible. El
objetivo fundamental en JavaScript es determinar qué elemento está seleccionado y
qué valor tiene asociado. Esto lo hacemos cuando ocurre el evento OnChange.
Para determinar la posición del índice seleccionado en la lista:
document.form1.select1.selectedIndex
Considerando que el objeto SELECT se llama select1 accedemos a la propiedad
selectedIndex (almacena la posición del string seleccionado de la lista, numerando a
partir de cero).
Para determinar el string seleccionado:
document.form1.select1.options[document.form1.select1.selectedIndex].text
Es decir que el objeto select1 tiene otra propiedad llamada options, a la que
accedemos por medio de un subíndice, al string de una determinada posición.
Hay problemas en los que solamente necesitaremos el string almacenado en el objeto
SELECT y no el valor asociado (no es obligatorio asociar un valor a cada string).
Y por último con esta expresión accedemos al valor asociado al string:
document.form1.select1.options[document.form1.select1.selectedIndex].value
Un ejemplo completo que muestra el empleo de un control SELECT es:
<html>
<head>

Página
226
</head>
<body>
<script language="JavaScript">
function cambiarColor()
{
document.form1.text1.value = document.form1.select1.selectedIndex;
document.form1.text2.value =
document.form1.select1.options[document.form1.select1.selectedIndex].text;
document.form1.text3.value =
document.form1.select1.options [document.form1.select1.selectedIndex].value;
}
</script>
<form name="form1">
<select size="1" name="select1" ONCHANGE="cambiarColor()">
<option value="0xff0000">Rojo</option>
<option value="0x00ff00">Verde</option>
<option value="0x0000ff">Azul</option>
</select></p>
<br>
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, y cómo acceder luego a sus valores desde
JavaScript.
Es importante para el objeto SELECT definir qué función llamar cuando ocurra un
cambio: onChange="cambiarColor()".
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.
Analizando la función cambiarColor() podemos ver cómo obtenemos los valores
fundamentales del objeto SELECT.

Ejemplo:
<html>
<head>
</head>
<body>
<script language="JavaScript">
function cambiarColor()
{
document.form1.text1.value = document.form1.select1.selectedIndex;
document.form1.text2.value =
document.form1.select1.options[document.form1.select1.selectedIndex].text;
document.form1.text3.value = document.form1.select1.options
[document.form1.select1.selectedIndex].value;
}
</script>
<form name="form1">
<select size="1" name="select1" onChange="cambiarColor()">
<option value="0xff0000">Rojo</option>
<option value="0x00ff00">Verde</option>
<option value="0x0000ff">Azul</option>
</select></p>
<br>

Página
227
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 - Confeccionar una página que muestre un objeto SELECT con distintos tipos de
pizzas (Jamón y Queso, Muzzarella, Morrones). Al seleccionar una, mostrar en un
objeto de tipo TEXT el precio de la misma.
2 - Generar un presupuesto de un equipo de computación a partir de tres objetos de
tipo SELECT que nos permiten seleccionar:
Procesador (Pentium III - $400, Pentium IV $500).
Monitor (Samsung 14' - $250, Samsung 15' - $350, Samsung 17' - $550)
Disco Duro(80 Gb - $300, 240 Gb - $440, 800 Gb - $500)
Para cada característica indicamos string a mostrar (Ej. Pentium III) y el valor asociado
a dicho string (Ej. 400).
Al presionar un botón "Calcular" mostrar el presupuesto en un objeto de tipo TEXT.
3 - Confeccionar una página que permita seleccionar una pizza y la cantidad de
unidades. Luego al presionar un botón calcular el importe a pagar.
Utilizar un objeto de la clase SELECT para la selección de la pizza, pudiendo ser:
Queso: $ 4.
Jamón y queso: $ 6.
Especial: $ 10.
A la cantidad de pizzas cargarla en un objeto de la clase TEXT y en otro objeto de la
clase TEXT mostrar el importe total a abonar.
4 - Confeccionar una página que permita tomar un examen múltiple choice. Se debe
mostrar una pregunta y seguidamente un objeto SELECT con las respuestas posibles. Al
presionar un botón mostrar la cantidad de respuestas correctas e incorrectas
(Disponer 4 preguntas y sus respectivos controles SELECT).

28. Control CHECKBOX


El control CHECKBOX es el cuadradito que puede tener dos estados (seleccionado o no
seleccionado).
Para conocer su funcionamiento y ver como podemos acceder a su estado desde
JavaScript haremos un pequeña página.
Ejemplo: Confeccionar una página que muestre 4 lenguajes de programación que el
usuario puede seleccionar si los conoce. Luego mostrar un mensaje indicando la
cantidad de lenguajes que ha seleccionado el operador.
<html>
<head>
</head>
<body>
<script language="JavaScript">
function contarSeleccionados()
{
var cant=0;

Página
228
if (document.form1.lenguaje1.checked)
cant++;
if (document.form1.lenguaje2.checked)
cant++;
if (document.form1.lenguaje3.checked)
cant++;
if (document.form1.lenguaje4.checked)
cant++;
alert('Conoce ' + cant + ' lenguajes');
}
</script>
<form name="form1">
<input type="checkbox" name="lenguaje1">JavaScript
<br>
<input type="checkbox" name="lenguaje2">PHP
<br>
<input type="checkbox" name="lenguaje3">JSP
<br>
<input type="checkbox" name="lenguaje4">VB.Net
<br>
<input type="button" value="Mostrar" onClick="contarSeleccionados()">
</form>
</body>
</html>
Cuando se presiona el botón se llama a la función JavaScript contarSeleccionados(). 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.
Disponemos un 'if' para cada checkbox:
if (document.form1.lenguaje1.checked)
cant++;
Al contador 'cant' lo definimos e inicializamos en cero previo a los cuatro if. Mostramos
finalmente el resultado final.

Ejemplo:
<html>
<head>
</head>
<body>
<script language="JavaScript">
function contarSeleccionados()
{
var cant=0;
if (document.form1.lenguaje1.checked)
cant++;
if (document.form1.lenguaje2.checked)
cant++;
if (document.form1.lenguaje3.checked)
cant++;
if (document.form1.lenguaje4.checked)
cant++;
alert('Conoce ' + cant + ' lenguajes');
}
</script>
<form name="form1">
<input type="checkbox" name="lenguaje1">JavaScript
<br>
<input type="checkbox" name="lenguaje2">PHP
<br>
<input type="checkbox" name="lenguaje3">JSP
<br>
<input type="checkbox" name="lenguaje4">VB.Net

Página
229
<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, Basket, Tennis) Mostrar al
presionar un botón los deportes que a elegido.

29. Control RADIO


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

Ejemplo:
<html>
<head>
</head>

Página
230
<body>
<script language="JavaScript">
function mostrarSeleccionado()
{
if (document.form1.estudios[0].checked)
alert('no tienes estudios');
if (document.form1.estudios[1].checked)
alert('tienes estudios primarios');
if (document.form1.estudios[2].checked)
alert('tienes estudios secundarios');
if (document.form1.estudios[3].checked)
alert('tienes estudios universitarios');
}
</script>
<form name="form1">
<input type="radio" name="estudios" value="sin estudios">Sin estudios
<br>
<input type="radio" name="estudios">Primarios
<br>
<input type="radio" name="estudios">Secundarios
<br>
<input type="radio" name="estudios">Universitarios
<br>
<input type="button" value="Mostrar" onClick="mostrarSeleccionado()">
</form>
</body>
</html>

Practica: Confeccionar una página que muestre dos objetos de la clase RADIO
solicitando que seleccione si es mayor de 18 años o no. Al presionar un botón mostrar
que radio está seleccionado.

30. Control TEXTAREA


Este control es similar al control TEXT, salvo que permite el ingreso de muchas líneas
de texto.
La marca TEXTAREA en HTML tiene dos propiedades: rows y cols que nos permiten
indicar la cantidad de filas y columnas a mostrar en pantalla.
Ejemplo: Solicitar la carga del mail y el curriculum de una persona. Mostrar un mensaje
si el curriculum supera los 2000 caracteres.
<html>
<head>
</head>
<body>
<script language="JavaScript">
function controlarCaracteres()
{
if (document.form1.curriculum.value.length>2000)
alert('curriculum muy largo');
else
alert('datos correctos');
}
</script>
<form name="form1">
&lt;textarea name=&quot;curriculum&quot; rows="10" cols="50"
&gt;&lt;/textarea&gt;
<br>
<input type="button" value="Mostrar" onClick="controlarCaracteres()">
</form>
</body>

Página
231
</html>
Para saber el largo de la cadena cargada:
if (document.form1.curriculum.value.length>2000)
accedemos a la propiedad length.

Ejemplo:
<html>
<head>
</head>
<body>
<script language="JavaScript">
function controlarCaracteres()
{
if (document.form1.curriculum.value.length>2000)
alert('curriculum muy largo');
else
alert('datos correctos');
}
</script>
<form name="form1">
<textarea name="curriculum" rows="10" cols="50" ></textarea>
<br>
<input type="button" value="Mostrar" onClick="controlarCaracteres()">
</form>
</body>
</html>
Practica: Confeccionar una página de visitas a un sitio, solicitar ingresar el nombre de
una persona, su mail y los comentarios (TEXTAREA). Mostrar luego llamando a la
función alert los datos ingresados.
Tener en cuenta que para acceder a las cadenas cargadas haremos:
alert(document.form1.comentarios.value);

31. Eventos onFocus y onBlur


El evento onFocus se dispara cuando el objeto toma foco y el evento onBlur cuando el
objeto pierde el foco.
Ejemplo: Implementar un formulario que solicite la carga del nombre y la edad de una
persona. Cuando el control tome foco borrar el contenido actual, al abandonar el
mismo, mostrar un mensaje de alerta si el mismo está vacío.
<html>
<head></head>
<body>
<script language="JavaScript">
function vaciar(control)
{
control.value='';
}
function verificarEntrada(control)
{
if (control.value=='')
alert('Debe ingresar datos');
}
</script>
<form name="form1">
Ingrese su nombre:
<input type="text" name="nombre" onFocus="vaciar(this)"
onBlur="verificarEntrada(this)"><br>

Página
232
Ingrese su edad:
<input type="text" name="edad" onFocus="vaciar(this)"
onBlur="verificarEntrada(this)"><br>
<input type="button" value="Confirmar">
</form>
</body>
</html>
A cada control de tipo TEXT le inicializamos los eventos onFocus y onBlur. Le
indicamos, para el evento onFocus la función vaciar, pasando como parámetro la
palabra clave this que significa la dirección del objeto que emitió el evento. En la
función propiamente dicha, accedemos a la propiedad value y borramos su contenido.
De forma similar, para el evento onBlur llamamos a la función verificarEntrada donde
analizamos si se ha ingresado algún valor dentro del control, en caso de tener un string
vacío procedemos a mostrar una ventana de alerta.

Ejemplo:
<html>
<head></head>
<body>
<script language="JavaScript">
function vaciar(control)
{
control.value='';
}
function verificarEntrada(control)
{
if (control.value=='')
alert('Debe ingresar datos');
}
</script>
<form name="form1">
Ingrese su nombre:
<input type="text" name="nombre" onFocus="vaciar(this)"
onBlur="verificarEntrada(this)"><br>
Ingrese su edad:
<input type="text" name="edad" onFocus="vaciar(this)"
onBlur="verificarEntrada(this)"><br>
<input type="button" value="Confirmar">
</form>
</body>
</html>

Practica: Solicitar que se ingrese el nombre y la clave de un usuario. Mostrar una


ventana de alerta si en la clave se ingresan menos de 7 caracteres o más de 20.

32. 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.
Para probar estos eventos implementaremos una página que cambie el color de fondo
del documento.
Implementaremos una función que cambie el color con un valor que llegue como
parámetro. Cuando retiramos la flecha del mouse volvemos a pintar de blanco el fondo
del documento:
<html>
<head></head>

Página
233
<body>
<script language="JavaScript">
function pintar(col)
{
document.bgColor=col;
}
</script>
<a href="pagina1.html" onMouseOver="pintar('#ff0000')"
onMouseOut="pintar('#ffffff')">Rojo</a>
-
<a href="pagina1.html" onMouseOver="pintar('#00ff00')"
onMouseOut="pintar('#ffffff')">Verde</a>
-
<a href="pagina1.html" onMouseOver="pintar('#0000ff')"
onMouseOut="pintar('#ffffff')">Azul</a>
<br>
<br>
<br>
<a href="pagina2.html">ver segundo problema</a>
</body>
</html>
Las llamadas a las funciones las hacemos inicializando las propiedades onMouseOver y
onMouseOut:
<a href="pagina1.html" onMouseOver="pintar('#ff0000')"
onMouseOut="pintar('#ffffff')">Rojo</a>
La función 'pintar' recibe el color e inicializa la propiedad bgColor del objeto document.
function pintar(col)
{
document.bgColor=col;
}
El segundo problema pinta de color el interior de una casilla de una tabla y lo regresa a su color original
cuando salimos de la misma:
<html>
<head></head>
<body>
<script language="JavaScript">
function pintar(objeto,col)
{
objeto.bgColor=col;
}
</script>
<table border="1">
<tr>
<td onMouseOver="pintar(this,'#ff0000')"
onMouseOut="pintar(this,'#ffffff')">rojo</td>
<td onMouseOver="pintar(this,'#00ff00')"
onMouseOut="pintar(this,'#ffffff')">verde</td>
<td onMouseOver="pintar(this,'#0000ff')"
onMouseOut="pintar(this,'#ffffff')">azul</td>
</tr>
</table>
</body>
</html>
La lógica es bastante parecida a la del primer problema, pero en éste, le pasamos como
parámetro a la función, la referencia a la casilla que queremos que se coloree (this):
<td onMouseOver="pintar(this,'#ff0000')"
onMouseOut="pintar(this,'#ffffff')">rojo</td>

Ejemplo:
Pagina1.html
<html>

Página
234
<head></head>
<body>
<script language="JavaScript">
function pintar(col)
{
document.bgColor=col;
}
</script>
<a href="pagina1.html" onMouseOver="pintar('#ff0000')"
onMouseOut="pintar('#ffffff')">Rojo</a>
-
<a href="pagina1.html" onMouseOver="pintar('#00ff00')"
onMouseOut="pintar('#ffffff')">Verde</a>
-
<a href="pagina1.html" onMouseOver="pintar('#0000ff')"
onMouseOut="pintar('#ffffff')">Azul</a>
<br>
<br>
<br>
<a href="pagina2.html">ver segundo problema</a>
</body>
</html>
Pagina2.html
<html>
<head></head>
<body>
<script language="JavaScript">
function pintar(objeto,col)
{
objeto.bgColor=col;
}
</script>
<table border="1">
<tr>
<td onMouseOver="pintar(this,'#ff0000')"
onMouseOut="pintar(this,'#ffffff')">rojo</td>
<td onMouseOver="pintar(this,'#00ff00')"
onMouseOut="pintar(this,'#ffffff')">verde</td>
<td onMouseOver="pintar(this,'#0000ff')"
onMouseOut="pintar(this,'#ffffff')">azul</td>
</tr>
</table>
</body>
</html>

Practica: Modificar el segundo problema resuelto (las casillas de la tabla que


cambian el color cuando ingresamos con el mouse) para permitir llamar mediante
hipervínculos a distintos programas que administran web-mail (gmail, hotmail y yahoo)

33. Evento onLoad


El evento onLoad se ejecuta cuando cargamos una página en el navegador. Uno de los
usos más frecuentes es para fijar el foco en algún control de un formulario, para que el
operador no tenga que activar con el mouse dicho control.
Este evento está asociado a la marca body.
La página completa es:
<html>
<head></head>
<body onLoad="activarPrimerControl()">
<script language="JavaScript">

Página
235
function activarPrimerControl()
{
document.form1.nombre.focus();
}
</script>
<form name="form1">
Ingrese su nombre:
<input type="text" name="nombre"><br>
Ingrese su edad:
<input type="text" name="edad"><br>
<input type="button" value="Confirmar">
</form>
</body>
</html>
En la marca body inicializamos el evento onLoad con la llamada a la función
activarPrimerControl:
<body onLoad="activarPrimerControl()">
La función da el foco al control text donde se cargará el nombre:
function activarPrimerControl()
{
document.form1.nombre.focus();
}
Ejemplo:
<html>
<head></head>
<body onLoad="activarPrimerControl()">
<script language="JavaScript">
function activarPrimerControl()
{
document.form1.nombre.focus();
}
</script>
<form name="form1">
Ingrese su nombre:
<input type="text" name="nombre"><br>
Ingrese su edad:
<input type="text" name="edad"><br>
<input type="button" value="Confirmar">
</form>
</body>
</html>

Practica: Confeccionar una función que mueva la ventana a la coordenada (20,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. El objeto window.


Al objeto window lo hemos estado usando constantemente. Representa la ventana del
navegador.
window es un objeto global y tiene los siguienes 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.
open y close: abre o cierra una ventana del navegador.
Podemos especificar el tamaño de la ventana, su contenido, etc.

Página
236
[Variable=][window.]open(URL, nombre, propiedades)
Permite crear (y abrir) una nueva ventana. Si queremos tener acceso a ella
desde la ventana donde la creamos, deberemos asignarle una variable,
sino simplemente invocamos el método: el navegador automáticamente sabrá
que pertenece al objeto window.
El parámetro URL es una cadena que contendrá la dirección de la ventana
que estamos abriendo: si está en blanco, la ventana se abrirá con una página
en blanco.
Las propiedades son una lista, separada por comas, de algunos de los
siguientes elementos:
• toolbar[=yes|no]
• location[=yes|no]
• directories[=yes|no]
• status[=yes|no]
• menubar[=yes|no]
• scrollbars[=yes|no]
• resizable[=yes|no]
• width=pixels
• height=pixels
Es bueno hacer notar que a todas estas funciones las podemos llamar anteponiéndole
el nombre del objeto window, seguida del método o en forma resumida indicando
solamente el nombre del método (como lo hemos estado haciendo), esto es posible ya
que el objeto window es el objeto de máximo nivel.
Ej:
valor=window.prompt("Ingrese valor","");
o
valor=prompt("Ingrese valor","");
Para reducir la cantidad de caracteres que se tipean normalmente encontraremos los
programas tipeados de la segunda forma.
El siguiente programa muestra varios de los métodos disponibles del objeto window:
<HTML>
<HEAD>
<SCRIPT LANGUAGE="JavaScript">
function cerrar()
{
close(); // podemos escribir window.close();
}

function abrir()
{
var ventana=open();
ventana.document.write("Estoy escribiendo en la nueva ventana<br>");
ventana.document.write("Segunda linea");
}

function abrirParametros()
{
var ventana=open('','','status=yes,width=400,height=250,menubar=yes');
ventana.document.write("Esto es lo primero que aparece<br>");
}

function mostrarAlerta()
{
alert("Esta ventana de alerta ya la utilizamos en otros problemas.");
}

function confirmar()
{
var respuesta=confirm("Presione alguno de los dos botones");
if (respuesta==true)
alert("presionó aceptar");

Página
237
else
alert("presionó cancelar");
}

function cargarCadena()
{
var cad=prompt("cargue una cadena:","");
alert("Usted ingreso "+cad);
}

</SCRIPT>
</HEAD>
<BODY>
Este programa permite analizar la llamada a distintas responsabilidades del
objeto window.<br>
<FORM>
<input type="button" value="close()" onClick="cerrar()">

<br><br>
<input type="button" value="open()" onClick="abrir()">
<br><br>
<input type="button" value="open con 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(); // podemos escribir window.close();
}

function abrir()
{
var ventana=open();
ventana.document.write("Estoy escribiendo en la nueva ventana<br>");
ventana.document.write("Segunda linea");
}

function abrirParametros()
{
var ventana=open('','','status=yes,width=400,height=250,menubar=yes');
ventana.document.write("Esto es lo primero que aparece<br>");
}

function mostrarAlerta()
{
alert("Esta ventana de alerta ya la utilizamos en otros problemas.");
}

function confirmar()
{
var respuesta=confirm("Presione alguno de los dos botones");
if (respuesta==true)

Página
238
alert("presionó aceptar");
else
alert("presionó cancelar");
}

function cargarCadena()
{
var cad=prompt("cargue una cadena:","");
alert("Usted ingreso "+cad);
}

</SCRIPT>
</HEAD>
<BODY>
Este programa permite analizar la llamada a distintas responsabilidades del objeto
window.<br>
<FORM>
<input type="button" value="close()" onClick="cerrar()">
<br><br>
<input type="button" value="open()" onClick="abrir()">
<br><br>
<input type="button" value="open con 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. Dicha ventana debe tener como ancho 600 pixeles y alto 300
pixeles, y debe mostrar el menú y su barra de herramientas.

35. Propiedad location del objeto window


El objeto location colabora directamente con el objeto window:

Página
239
Cuando le asignamos una nueva dirección a la propiedad location del objeto window,
el navegador redirecciona a dicha página.
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, si queremos ingresar a un sitio para mayores. En caso que el visitante
presione el botón afirmativo, redireccionamos a otra página, en caso contrario
mostramos un mensaje:
<html>
<head>
</head>
<body>
<script language="javascript">
function verificarMayorEdad()
{
if (window.confirm('Es mayor de edad?'))
window.location='pagina2.html';
else
window.alert('Cuando sea mayor de edad podrá ingresar');
}
</script>
<a href="javascript:verificarMayorEdad()">Ingresar al sitio para
mayores</a>
</body>
</html>
Lo primero que tenemos que indicar es que para llamar a una función de javascript
desde un hipervínculo debemos anteceder la palabra javascript seguida de dos puntos
y por último, 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, la función confirm retorna true y por lo tanto se
ejecuta el verdadero del if:
if (window.confirm('Es mayor de edad?'))
window.location='pagina2.html';
else
window.alert('Cuando sea mayor de edad podrá ingresar');
Recordar que anteceder la palabra window a estas funciones y propiedades es
opcional.
Por último la página que se redirecciona es:
<html>
<head>
<title>Problema</title>
</head>
<body>
Bienvenido al sitio para adultos.
</body>
</html>
Ejemplo:
Pagina1.html
<html>
<head>
</head>
<body>
<script language="javascript">
function verificarMayorEdad()

Página
240
{
if (window.confirm('Es mayor de edad?'))
window.location='pagina2.html';
else
window.alert('Cuando sea mayor de edad podrá ingresar');
}
</script>
<a href="javascript:verificarMayorEdad()">Ingresar al sitio para mayores</a>
</body>
</html>
Pagina2.html
<html>
<head>
<title>Problema</title>
</head>
<body>
Bienvenido al sitio para adultos.
</body>
</html>

Practica: Confeccionar una página que tenga un hipervínculo. Cuando se presione


dicho hipervínculo generar un valor aleatorio entre 0 y 2. Si se genera el 0 llamar al
webmail de hotmail, si se genera un 1 llamar a gmail en caso de generarse un 2 llamar a
yahoo.
Para generar un valor aleatorio utilizar la función random del objeto Math.
var num;
num=Math.random()*3; //se guarda en num un valor comprendido entre 0.00001 y
2.99999
num=parseInt(num); //guardamos solo la parte entera de la variable num
if (num==1)
window.location='http://www.hotmail.com';
.....

36. Propiedad history del objeto window


El objeto history colabora directamente con el objeto window:

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

Página
242
<head>
<title>Problema</title>
<script language="javascript">
function avanzar()
{
window.history.go(1);
}
</script>
</head>
<body>
<a href="pagina2.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.history.go(-1);
}
</script>
</head>
<body>
<a href="javascript:retornar()">Retornar</a>
</body>
</html>

Practica: Confeccionar tres páginas. Disponer tres hipervínculos, uno en cada


página. Configurar el primer hipervínculo con la dirección de la segunda página, el
hipervínculo de la segunda página debe cargar la tercera página y por último, 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).

37. Propiedad screen del objeto window


El objeto screen colabora directamente con el objeto window:

Página
243
El objeto screen ofrece información acerca del monitor donde se está ejecutando el
navegador.
La propiedades principales del objeto screen son:
availHeight : El alto de la pantalla en pixeles disponible para el navegador.
availWidth : El ancho de la pantalla en pixeles disponible para el navegador.
colorDepth : Representa el número de bits usados para representar los colores.
height : El alto de la pantalla en pixeles.
width : El ancho de la pantalla en pixeles.
El siguiente programa muestra el valor almacenado en las cinco propiedades que tiene
el objeto screen:
<html>
<head>
<title>Problema</title>
</head>
<body>
<script language="javascript">
document.write('Valores de las propiedades del objeto screen:<br>');
document.write('availHeight :' + screen.availHeight + '<br>');
document.write('availWidth :' + screen.availWidth + '<br>');
document.write('height :' + screen.height + '<br>');
document.write('width :' + screen.width + '<br>');
document.write('colorDepth :' + screen.colorDepth);
</script>
</body>
</html>
No olvidar que el objeto screen es una propiedad del objeto window, por lo que haber
dispuesto la sintaxis: window.screen.width etc. es la forma más completa, 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).

Ejemplo:
<html>
<head>
<title>Problema</title>
</head>
<body>
<script language="javascript">
document.write('Valores de las propiedades del objeto screen:<br>');
document.write('availHeight :' + screen.availHeight + '<br>');
document.write('availWidth :' + screen.availWidth + '<br>');
document.write('height :' + screen.height + '<br>');
document.write('width :' + screen.width + '<br>');
document.write('colorDepth :' + screen.colorDepth);
</script>
</body>
</html>

Practica:
PROBLEMAS
1 - Confeccionar un programa que agrande el tamaño de la ventana del navegador y
ocupe toda la pantalla.
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.resizeTo(640,480);

Página
244
Si ejecutamos esto, el tamaño de la ventana del navegador se redimensionará
tomando como ancho el valor 640 y como alto 480.
2 - Confeccionar un programa que cuando muestre la página, redimensione la ventana
del navegador y la centre en la pantalla dejando 50 pixeles arriba, abajo, izquierda y
derecha.
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.moveTo(50,50);
window.resizeTo(window.screen.width - ? ,window.screen.height - ?);
}
Qué valor debemos disponer en los signos de interrogación ?

38. Propiedad navigator del objeto window


Contiene información sobre el navegador web. La implementación de este objeto varía
entre navegadores (IExplorer, FireFox, Opera, etc.)
Las propiedades comunes a estos navegadores son:
appName : almacena el nombre oficial del navegador.
appVersion : almacena la versión del navegador.
cookieEnabled : almacena si las cookies están activas en el navegador.
platform : almacena la plataforma donde el navegador se está ejecutando.
plugins : almacena un array de los plugin cargados en el navegador.
Este pequeño programa muestra los valores de las propiedades antes anunciadas:
<html>
<head>
<title>Problema</title>
</head>
<body>
<script language="javascript">
document.write('Valores de las propiedades del objeto navigator:<br>');
document.write('appName :' + navigator.appName + '<br>');
document.write('appVersion :' + navigator.appVersion + '<br>');
document.write('cookieEnabled :' + navigator.cookieEnabled + '<br>');
document.write('plugins :' + navigator.plugins.length + '<br>');
</script>
</body>
</html>
Ejemplo:
<html>
<head>
<title>Problema</title>
</head>
<body>
<script language="javascript">
document.write('Valores de las propiedades del objeto navigator:<br>');
document.write('appName :' + navigator.appName + '<br>');
document.write('appVersion :' + navigator.appVersion + '<br>');
document.write('cookieEnabled :' + navigator.cookieEnabled + '<br>');
document.write('plugins :' + navigator.plugins.length + '<br>');
</script>
</body>
</html>

Practica: Pintar el fondo del navegador de rojo si el navegador es el Internet


Explorer.

Página
245
Para cambiar el color de fondo debemos acceder a la propiedad bgColor del objeto
document:
document.bgColor='#ff0000';

39. Archivo JavaScript externo (*.js)


El lenguaje JavaScript permite agrupar funciones y disponerlas en un archivo separado
a la página HTML.
Esto trae muchos beneficios:
- Reutilización de funciones en muchos archivos. No tenemos que copiar y pegar
sucesivamente las funciones en las páginas en las que necesitamos.
- Facilita el mantenimiento de las funciones al encontrarse en archivos separados.
- Nos obliga a ser más ordenados.
La mecánica para implementar estos archivos externos en JavaScript es:
1 - Crear un archivo con extensión *.js y tipear las funciones en la misma:
function retornarFecha()
{
var fecha
fecha=new Date();
var cadena=fecha.getDate()+'/'+(fecha.getMonth()+1)+'/'+fecha.getYear();
return cadena;
}

function retornarHora()
{
var fecha
fecha=new Date();
var cadena=fecha.getHours()+':'+fecha.getMinutes()+':'+fecha.getSeconds();
return cadena;
}
2 - Creamos un archivo html que utilizará las funciones contenidas en el archivo *.js:
<html>
<head>
<title>Problema</title>
<script language="javascript" type="text/javascript" src="pagina2.js"></script>
</head>
<body>
<script language="javascript">
document.write('La fecha de hoy es:'+retornarFecha());
document.write('<br>');
document.write('La hora es:'+retornarHora());
</script>
</body>
</html>
Es decir debemos disponer el siguiente código para importar el archivo *.js:
<script language="javascript" type="text/javascript" src="pagina2.js"></script>
Mediante la propiedad src indicamos el nombre del archivo a importar.
Luego, podemos llamar dentro de la página HTML, a las funciones que contiene el
archivo externo *.js; en nuestro ejemplo llamamos a las funciones retornarFecha() y
retornarHora().
Como podemos ver, el archivo html queda mucho más limpio.

Ejemplo:
Pagina1.html

Página
246
<html>
<head>
<title>Problema</title>
<script language="javascript" type="text/javascript" src="pagina2.js"></script>
</head>
<body>
<script language="javascript">
document.write('La fecha de hoy es:'+retornarFecha());
document.write('<br>');
document.write('La hora es:'+retornarHora());
</script>
</body>
</html>
Pagina2.js
function retornarFecha()
{
var fecha
fecha=new Date();
var cadena=fecha.getDate()+'/'+(fecha.getMonth()+1)+'/'+fecha.getYear();
return cadena;
}

function retornarHora()
{
var fecha
fecha=new Date();
var cadena=fecha.getHours()+':'+fecha.getMinutes()+':'+fecha.getSeconds();
return cadena;
}

Practica: Confeccionar una funcion en un archivo externo (*.js) que solicite la


carga del nombre de un usuario y lo retorne.
Luego, otra función que permita ingresar una clave y la muestre en la página.

40. Programación orientada a objetos en


JavaScript.
El lenguaje JavaScript no es un lenguaje orientado a objetos completo, pero permite
definir clases con sus atributos y responsabilidades. Finalmente nos permite definir
objetos de estas clases.
Pero el otro pilar de la programación orientada a objetos, es decir la herencia, no está
implementada en el lenguaje.
Veremos la sintaxis para la declaración de una clase y la posterior definición de objetos
de la misma.
Desarrollaremos una clase que represente un cliente de un banco.
La clase cliente tiene como atributos:
nombre
saldo
y las responsabilidades o métodos de la clase son:
Constructor (inicializamos los atributos del objeto)
depositar
extraer
Para acostumbrarnos a trabajar en un archivo separado, implementamos 'pagina2.js'
que contiene la clase cliente con sus métodos (funciones) y sus atributos (variables):
function cliente(nombre,saldo)

Página
247
{
this.nombre=nombre;
this.saldo=saldo;
this.depositar=depositar;
this.extraer=extraer;
}

function depositar(dinero)
{
this.saldo=this.saldo+dinero;
}

function extraer(dinero)
{
this.saldo=this.saldo-dinero;
}
El nombre de la clase coincide con el nombre de la función principal que
implementamos (también llamado constructor de la clase):
function cliente(nombre,saldo)
{
this.nombre=nombre;
this.saldo=saldo;
this.depositar=depositar;
this.extraer=extraer;
}
A esta función llegan como parámetro los valores con que queremos inicializar los
atributos. Con la palabra clave 'this' diferenciamos los atributos de los parámetros (los
atributos deben llevar la palabra clave this)
this.nombre=nombre;
this.saldo=saldo;
También en el constructor inicializamos la referencia a todos los métodos que
contendrá la clase:
this.depositar=depositar;
this.extraer=extraer;
Por último, implementamos todos los métodos de la clase:
function depositar(dinero)
{
this.saldo=this.saldo+dinero;
}

function extraer(dinero)
{
this.saldo=this.saldo-dinero;
}
De nuevo recordemos que diferenciamos los atributos de la clase por la palabra clave
this.
Ahora veamos el archivo HTML que incorpora el archivo JS y define un objeto de la
clase planteada:
<html>
<head>
<title>Problema</title>
<script language="javascript" src="pagina2.js" type="text/javascript">
</script>
</head>
<body>
<script language="javascript">
var cliente1;
cliente1=new cliente('diego',1200);

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

Ejemplo:
Pagina1.html
<html>
<head>
<title>Problema</title>
<script language="javascript" src="pagina2.js" type="text/javascript">
</script>
</head>
<body>
<script language="javascript">
var cliente1;
cliente1=new cliente('diego',1200);
document.write('Nombre del cliente:'+cliente1.nombre+'<br>');
document.write('Saldo actual:'+cliente1.saldo+'<br>');
cliente1.depositar(120);
document.write('Saldo luego de depositar $120---->'+cliente1.saldo+'<br>');
cliente1.extraer(1000);
document.write('Saldo luego de extraer $1000---->'+cliente1.saldo+'<br>');
</script>
</body>
</html>
Pagina2.js
function cliente(nombre,saldo)
{
this.nombre=nombre;

Página
249
this.saldo=saldo;
this.depositar=depositar;
this.extraer=extraer;
}

function depositar(dinero)
{
this.saldo=this.saldo+dinero;
}

function extraer(dinero)
{
this.saldo=this.saldo-dinero;
}

Practica: Confeccionar una clase llamada suma, que contenga dos atributos (valor1,
valor2) y tres métodos: cargarvalor1, cargarvalor2 y retornarresultado. Implementar la
clase suma en un archivo separado.
La definición de un objeto de la clase que deben plantear es:
var s=new suma();
s.primervalor(10);
s.segundovalor(20);
document.write('La suma de los dos valores es:'+s.retornarresultado());

41. Definición de varias clases.


En JavaScript podemos definir varias clases en un mismo archivo *.js.
Vamos a desarrollar un programa que contenga dos clases. Plantearemos una clase
numeroquiniela que representa una persona que elige un número de quiniela y
además registra su nombre, la clase tiene por objetivo la carga por el teclado del
número deseado.
Por otra parte crearemos una clase bolillero que sortee un valor aleatorio entre 0 y 9
(que representa el valor extraido del bolillero).
La codificación de las dos clases es:
//clase numeroquiniela ************************************************
function numeroquiniela(nombre)
{
this.nombre=nombre;
this.cargarnumero=cargarnumero;
}

function cargarnumero()
{
this.numero=prompt("Que número de quiniela quiere?","");
}
function verificarsigano(num)
{
if (this.numero==num)
return true;
else
return false;
}
//clase bolillero ************************************************
function bolillero()
{
this.numero=-1;
}
function sortear()
{

Página
250
this.numero=Math.random()*11;
}
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).
Al número que selecciona lo cargamos por teclado. La clase numeroquiniela además
tiene otra responsabilidad, que es avisarnos si a ganado según el número sorteado.
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.js" type="text/javascript">
</script>
</head>
<body>
<script language="javascript">
var numeroquiniela1;
numeroquiniela1=new numeroquiniela("juan");
numeroquiniela1.cargarnumero();
var numeroquiniela2;
numeroquiniela2=new numeroquiniela("ana");
numeroquiniela2.cargarnumero();
var bolillero;
bolillero=new bolillero();
bolillero.sortear();
document.write('Numero sorteado:' + bolillero.numero + '<br>');
document.write(numeroquiniela1.nombre + ' eligió ' + numeroquiniela1.numero
+'<br>');
document.write(numeroquiniela2.nombre + ' eligió ' + numeroquiniela2.numero
+'<br>');
if (numeroquiniela1.numero==bolillero.numero)
document.write(numeroquiniela1.nombre + ' a ganado <br>');
if (numeroquiniela2.numero==bolillero.numero)
document.write(numeroquiniela2.nombre + ' a ganado <br>');
</script>
</body>
</html>

Ejemplo:
Pagina1.html
<html>
<head>
<title>Problema</title>
<script language="javascript" src="pagina2.js" type="text/javascript">
</script>
</head>
<body>

<script language="javascript">
var numeroquiniela1;
numeroquiniela1=new numeroquiniela("juan");
numeroquiniela1.cargarnumero();
var numeroquiniela2;
numeroquiniela2=new numeroquiniela("ana");
numeroquiniela2.cargarnumero();
var bolillero;
bolillero=new bolillero();
bolillero.sortear();
document.write('Numero sorteado:' + bolillero.numero + '<br>');
document.write(numeroquiniela1.nombre + ' eligió ' + numeroquiniela1.numero
+'<br>');

Página
251
document.write(numeroquiniela2.nombre + ' eligió ' + numeroquiniela2.numero
+'<br>');
if (numeroquiniela1.numero==bolillero.numero)
document.write(numeroquiniela1.nombre + ' a ganado <br>');
if (numeroquiniela2.numero==bolillero.numero)
document.write(numeroquiniela2.nombre + ' a ganado <br>');
</script>
</body>
</html>
Pagina2.js
//clase numeroquiniela ************************************************
function numeroquiniela(nombre)
{
this.nombre=nombre;
this.cargarnumero=cargarnumero;
}

function cargarnumero()
{
this.numero=prompt("Que número de quiniela quiere?","");
}

function verificarsigano(num)
{
if (this.numero==num)
return true;
else
return false;
}

//clase bolillero ************************************************


function bolillero()
{
this.numero=-1;
this.sortear=sortear;
}

function sortear()
{
this.numero=parseInt(Math.random()*11);
}

Practica: Plantear una clase persona (que permita cargar por teclado su nombre y
edad).
Por otro lado crear una clase empresa que tenga como atributos el nombre y la edad tope
para que una persona pueda ingresar como trabajador en la misma.
Confeccionar en la página HTML un pequeño programa en JavaScript que defina 3
objetos de la clase persona y 1 de la clase empresa. Mostrar cuántas de esas personas
están inhabilidadas para ingresar como trabajadores.

42. Vectores con componentes de tipo objeto.


Podemos crear vectores con componente de tipo objeto.
Con un ejemplo veremos la sintaxis para trabajar con los mismos. Desarrollaremos una
clase que represente un hipervínculo y luego definiremos un vector con componentes
de tipo hipervinculo.
La clase hipervínculo es:
function hipervinculo(direccion,titulo)
{

Página
252
this.direccion=direccion;
this.titulo=titulo;
this.retornarhipervinculo=retornarhipervinculo;
}

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

Ejemplo:
Pagina1.html
<html>
<head>
<title>Problema</title>
<script language="javascript" src="pagina2.js" type="text/javascript"></script>
</head>
<body>
<script language="javascript">
var vector=new Array();
vector[0]=new hipervinculo('http://www.google.com','google');
vector[1]=new hipervinculo('http://www.msn.com','msn');
vector[2]=new hipervinculo('http://www.yahoo.com','yahoo');
for(f=0;f<vector.length;f++)
{
document.write(vector[f].retornarhipervinculo());
document.write('<br>');
}
</script>
</body>
</html>
Pagina2.js
function hipervinculo(direccion,titulo)
{

Página
253
this.direccion=direccion;
this.titulo=titulo;
this.retornarhipervinculo=retornarhipervinculo;
}

function retornarhipervinculo()
{
var cadena;
cadena='<a href=' + this.direccion + '>' + this.titulo + '</a>';
return cadena;
}

Practica: Confeccionar una clase persona que permita almacenar el nombre y la


edad. Luego definir un vector de 4 componentes de tipo persona. Imprimir el nombre de
la persona de mayor edad; decir también si hay más de una persona con la edad mayor.

Página
254