Cuaderno de Trabajo HTML

[HTML]
IDSYSTEMS 2013
CUADERNO DE EJERCICIOS HTML
Cuaderno de Trabajo Html se encu encuentra bajo una Licencia Creative Commons Atribucin-No Atribucin ComercialLicenciamiento Recproco 3.0 Unported Unported. Mayo 2013 IDSystems
CUADERNO DE EJERCICIOS Y PRACTICAS
Pgina 1
[HTML]
IDSYSTEMS 2013
Contenido
Ejercicio 1 - Crear una pagina basica .............................................................................................................9 Ejercicio 2 Estructura interna de una pagina HTML ................................................................................ 10 Ejercicio 3 Salto de linea <br> .................................................................................................................. 10 Ejercicio 4 - Parrafo..................................................................................................................................... 11 Practica 1 Modificar las propiedades del documento ............................................................................. 11 Practica 1a: Deportes.............................................................................................................................. 11 Practica 1b: Flores. ................................................................................................................................. 12 Practica 2 Estructura interna de una pagina HTML ................................................................................. 12 Practica 3 Salto de linea <br> .................................................................................................................. 12 Practica 4 Parrafo <p>.............................................................................................................................. 12 Ejercicio 5 Insertar texto con diferentes propiedades ............................................................................ 12 Ejercicio 5b.............................................................................................................................................. 14 Ejercicio 6 - Ttulos <h1><h2><h3><h4><h5><h6> .................................................................................... 16 Ejercicio 7 - Enfasis (<em> <strong>) .......................................................................................................... 17 Practica 5 Modificar las propiedades del texto ....................................................................................... 17 Practica 5a: Deportes.............................................................................................................................. 17 Practica 5b: Deportes. ............................................................................................................................ 18 Practica 5c: Deportes. ............................................................................................................................. 18 Practica 5d: Flores. ................................................................................................................................. 19 PRACTICA 6 - Ttulos <h1><h2><h3><h4><h5><h6> .................................................................................. 19 PRACTICA 7 - Enfasis (<em> <strong>) ....................................................................................................... 19 Ejercicio 8 Insertar un hiperenlace .......................................................................................................... 20 Ejercicio 9 - Hipervnculo a otra pgina del mismo sitio <a> ...................................................................... 21 Ejercicio 10 - Hipervnculo a otro sitio de internet <a> .............................................................................. 22 Ejercicio 11 Apertura de un hipervinculo en otra instancia del navegador ............................................ 22 Ejercicio 12 - Hipervnculo a un cliente de correo <a> ............................................................................... 23 Ejercicio 13 - Anclas llamadas desde la misma pgina. .............................................................................. 23 Ejercicio 14 - Anclas llamadas desde otra pgina. ...................................................................................... 25 Practica 8 Insertar hiperenlaces .............................................................................................................. 26 Practica 8a: Deportes.............................................................................................................................. 26 Practica 8b: Deportes. ............................................................................................................................ 26 Practica 8c: Flores. .................................................................................................................................. 26 CUADERNO DE EJERCICIOS Y PRACTICAS Pgina 2
[HTML]
IDSYSTEMS 2013
Practica 9 - Hipervnculo a otra pgina del mismo sitio <a> ...................................................................... 27 Practica 10 - Hipervnculo a otro sitio de internet <a>............................................................................... 27 Practica 11 - Apertura de un hipervnculo en otra instancia del navegador. ............................................ 27 Practica 12 - Hipervnculo a un cliente de correo <a> ................................................................................ 27 Practica 13 - Anclas llamadas desde la misma pgina. ............................................................................... 27 Practica 14 - Anclas llamadas desde otra pgina........................................................................................ 28 Ejercicio 15 Insertar una imagen ............................................................................................................. 28 Ejercicio 15a ............................................................................................................................................ 28 Ejercicio 15b............................................................................................................................................ 29 Ejercicio 15c ............................................................................................................................................ 30 Ejercicio 16 Imgenes dentro de una pgina <img> ............................................................................ 31 Ejercicio 17 - Hipervnculo mediante una imagen <a> y <img>.................................................................. 32 Practica 15 Insertar imagenes ................................................................................................................. 33 Practica 15a: Deportes............................................................................................................................ 33 Practica 15b 2: Deportes. ....................................................................................................................... 33 Practica 15c: Flores. ................................................................................................................................ 33 Practica 16 - Imgenes dentro de una pgina <img> ................................................................................. 33 Practica 17 - Hipervnculo mediante una imagen <a> y <img> .................................................................. 34 Ejercicio 18 Ejercicio 19 Lista ordenada (<ol>) ........................................................................................................ 34 Lista no ordenada (<ul>) ................................................................................................... 34
Ejercicio 20 - Lista de definiciones (<dl>) .................................................................................................. 35 Ejercicio 21 - Listas anidadas. ..................................................................................................................... 36 Practica 18 Practica 19 Lista ordenada (<ol>) ......................................................................................................... 37 Lista no ordenada (<ul>) .................................................................................................... 37
Practica 20 - Lista de definiciones (<dl>) .................................................................................................... 37 Practica 21 - Listas anidadas. ...................................................................................................................... 37 Ejercicio 22 Trabajar con tablas ............................................................................................................... 38 Ejercicio 22a. ........................................................................................................................................... 38 Ejercicio 22b............................................................................................................................................ 39 Ejercicio 23 - Tabla (<table><tr><td>) ........................................................................................................ 42 Ejercicio 24 Tabla con encabezado (<th>) ............................................................................................... 43 Ejercicio 25 Tabla con ttulo (<caption>) ................................................................................................. 44 Ejercicio 26 - Tabla y combinacin de celdas. ............................................................................................ 45 Practica 22 Trabajar con tablas................................................................................................................ 45 Practica 22a: Deportes............................................................................................................................ 45 CUADERNO DE EJERCICIOS Y PRACTICAS Pgina 3
[HTML]
IDSYSTEMS 2013
Practica 22b: Deportes. .......................................................................................................................... 46 Practica 22c: Flores. ................................................................................................................................ 46 Practica 22d: Flores. ............................................................................................................................... 46 Practica 23 - Tabla (<table><tr><td>) ......................................................................................................... 47 Practica 24 Tabla con encabezado (<th>) ................................................................................................ 47 Practica 25 Tabla con ttulo (<caption>) .................................................................................................. 47 Practica 26 - Tabla y combinacin de celdas. ............................................................................................. 47 Ejercicio 27 - Contenido de la cabecera de la pgina (<title>) ................................................................... 47 Ejercicio 28 - Contenido de la cabecera de la pgina (<meta>) ................................................................. 48 Ejercicio 29 - Comentarios dentro de una pgina  .......................................................................... 49 Ejercicio 30 - Sintaxis para caracteres especiales. ...................................................................................... 50 Practica 27 - Contenido de la cabecera de la pgina (<title>) .................................................................... 50 Practica 28 - Comentarios dentro de una pgina  ........................................................................... 50 Practica 29 - Sintaxis para caracteres especiales........................................................................................ 50 Ejercicio 31 Crear conjunto de marcos .................................................................................................... 50 Ejercicio 32 Frames .................................................................................................................................. 52 Ejercicio 33 - Frames - Actualizacin de un frame a partir del enlace de otro frame ................................ 53 Ejercicio 34 - Frames - Asignacin de medidas en pxeles.......................................................................... 54 Ejercicio 35 - Frames - Propiedades del elemento frame........................................................................... 54 Ejercicio 36 - Frames - Anidamiento de frameset ...................................................................................... 55 Ejercicio 37 - iframes .................................................................................................................................. 56 Practica 30 Configurar marcos................................................................................................................. 57 Practica 30a: Deportes............................................................................................................................ 57 Practica 30b: Flores. ............................................................................................................................... 57 Practica 31 Frames................................................................................................................................... 58 Practica 32 - Frames - Actualizacin de un frame a partir del enlace de otro frame ................................. 58 Practica 33 - Frames - Asignacin de medidas en pxeles .......................................................................... 58 Practica 34 - Frames - Propiedades del elemento frame ........................................................................... 58 Practica 35 - Frames - Anidamiento de frameset ....................................................................................... 58 Practica 36 - iframes ................................................................................................................................... 59 Ejercicio 38 Insertar elementos de formulario ........................................................................................ 59 Ejercicio 39 - Formulario - <form> .............................................................................................................. 60 Ejercicio 40 - Formulario - input type="text"/ input type="password" ...................................................... 61 Ejercicio 41 - Formulario textarea ........................................................................................................... 61 Ejercicio 42 - Formulario - input type="checkbox" ..................................................................................... 62 CUADERNO DE EJERCICIOS Y PRACTICAS Pgina 4
[HTML]
IDSYSTEMS 2013
Ejercicio 43 - Formulario - input type="radio"............................................................................................ 63 Ejercicio 44 - Formulario - select (cuadro de seleccin individual) ............................................................ 64 Ejercicio 45 Ejercicio 46 Formulario - select (cuadro de seleccin mltiple)........................................................... 65 Formulario - select (agrupamiento de opciones) .............................................................. 65
Ejercicio 47 - Formulario button .............................................................................................................. 67 Ejercicio 48 - Formulario - input type="button" ......................................................................................... 67 Ejercicio 49 Formulario - input type="file" ........................................................................................... 68 Ejercicio 50 - Formulario - input type="hidden"......................................................................................... 69 Ejercicio 51 - Formulario - agrupamiento de controles. ............................................................................. 69 Ejercicio 52 - Formulario - controles con valores iniciales. ........................................................................ 71 Ejercicio 53 Ejercicio 54 Formulario - orden de foco de controles. ......................................................................... 71 Formulario - Inhabilitar controles. .................................................................................... 72
Ejercicio 55 - Formulario - text/password y maxlength.............................................................................. 73 Ejercicio 56 - Formulario - text/password/textarea y readonly ................................................................. 74 Ejercicio 57 - Formulario - Envo de datos mediante mail. ......................................................................... 74 Ejercicio 58 - Formulario label ................................................................................................................. 75 Practica 37 Insertar elementos de formulario ......................................................................................... 76 Practica 37a: Deportes............................................................................................................................ 76 Practica 37b: Flores. ............................................................................................................................... 77 Practica 38 - Formulario - <form>............................................................................................................... 77 Practica 39 - Formulario - input type="text"/ input type="password" ...................................................... 77 Practica 40 - Formulario textarea ............................................................................................................ 77 Practica 41 - Formulario - input type="checkbox" ..................................................................................... 78 Practica 42 - Formulario - input type="radio" ............................................................................................ 78 Practica 43 - Formulario - select (cuadro de seleccin individual) ............................................................. 78 Practica 44 Practica 45 Formulario - select (cuadro de seleccin mltiple) ........................................................... 78 Formulario - select (agrupamiento de opciones) .............................................................. 78
Practica 46 - Formulario button............................................................................................................... 78 Practica 47 - Formulario - input type="button".......................................................................................... 78 Practica 48 Formulario - input type="file"............................................................................................ 79 Practica 49 - Formulario - agrupamiento de controles. ............................................................................. 79 Practica 50 - Formulario - controles con valores iniciales. ......................................................................... 79 Practica 51 Practica 52 Formulario - orden de foco de controles ........................................................................... 79 Formulario - Inhabilitar controles. ..................................................................................... 79
Practica 53 - Formulario - text/password y maxlength .............................................................................. 79 CUADERNO DE EJERCICIOS Y PRACTICAS Pgina 5
[HTML]
IDSYSTEMS 2013
Practica 54 - Formulario - text/password/textarea y readonly .................................................................. 79 Practica 55 - Formulario - Envo de datos mediante mail. ......................................................................... 79 Practica 56 - Formulario label .................................................................................................................. 80 Ejercicio 59 Insertar sonido de fondo ...................................................................................................... 80 Practica 57 Insertar elementos multimedia ............................................................................................ 81 Practica 57a: Deportes............................................................................................................................ 81 Practica 57b: Deportes. .......................................................................................................................... 82 Practica 57c: Flores. ................................................................................................................................ 82 Ejercicio 60 Modificar las propiedades de una capa ............................................................................... 82 Practica 58 Modificar las propiedades de una capa ................................................................................ 84 Practica 58a: Deportes............................................................................................................................ 84 Practica 58b: Flores. ............................................................................................................................... 84 Ejercicio 61 Llamadas a javascript ........................................................................................................... 85 Practica 59 Llamadas a javascript ............................................................................................................ 87 Practica 59a: Deportes............................................................................................................................ 87 Practica 59b: Flores. ............................................................................................................................... 87 Ejercicio 62 Crear hoja de estilos ............................................................................................................. 88 Ejercicio 63 - Conceptos bsicos de hojas de estilo.................................................................................... 89 Ejercicio 64 - Propiedades relacionadas al texto en CSS ............................................................................ 90 Ejercicio 65 - Elementos HTML <div> y <span> .......................................................................................... 92 Ejercicio 66 - Propiedades relacionadas a las fuentes en CSS .................................................................... 93 Ejercicio 67 - Declaracin DOCTYPE. HTML Transitional ........................................................................... 96 Ejercicio 68 - Declaracin DOCTYPE. HTML Estricto ................................................................................... 97 Ejercicio 69 - Declaracin DOCTYPE. para Frames...................................................................................... 97 Ejercicio 70 - Validacin de la pgina a travs de un enlace. ..................................................................... 97 Practica 60 Aplicar estilos ........................................................................................................................ 98 Practica 60a: Deportes............................................................................................................................ 98 Practica 60b: Flores. ............................................................................................................................... 98 Practica 61 - Conceptos bsicos de hojas de estilo. ................................................................................... 99 Practica 62 - Propiedades relacionadas al texto en CSS ............................................................................. 99 Practica 63 - Elementos HTML <div> y <span> ........................................................................................... 99 Practica 64 - Propiedades relacionadas a las fuentes en CSS ..................................................................... 99 Practica 65 - Declaracin DOCTYPE. HTML Transitional............................................................................. 99 Practica 66 - Declaracin DOCTYPE. HTML Estricto.................................................................................. 100 Practica 67 - Declaracin DOCTYPE. para Frames .................................................................................... 100 CUADERNO DE EJERCICIOS Y PRACTICAS Pgina 6
[HTML]
IDSYSTEMS 2013
HTML 5 ...................................................................................................................................................... 101 Ejercicio 71 - DOCTYPE ............................................................................................................................. 101 Ejercicio 72 CANVAS .............................................................................................................................. 101 Ejercicio 73 - CANVAS (dibujar lneas) ...................................................................................................... 102 Ejercicio 74 - CANVAS (dibujar rectngulo - permetro) ........................................................................... 103 Ejercicio 75 - CANVAS (estilos de lnea) .................................................................................................... 104 Ejercicio 76 - CANVAS (rectngulo relleno) .............................................................................................. 106 Ejercicio 77 - CANVAS (borrar una regin) ............................................................................................... 107 Ejercicio 78 - CANVAS (dibujar varias lneas y rellenar la figura creada).................................................. 108 Ejercicio 79 - CANVAS (arcos rellenos y lineal) ......................................................................................... 109 Ejercicio 80 - CANVAS (curva de bezier) ................................................................................................... 111 Ejercicio 81 - CANVAS (mtodo quadraticCurveTo) ................................................................................. 112 Ejercicio 82 - CANVAS (graficar texto) ...................................................................................................... 113 Ejercicio 83 - CANVAS (graficar imagenes) ............................................................................................... 114 Ejercicio 84 - CANVAS (transparencias) .................................................................................................... 116 Ejercicio 85 - CANVAS (sombras) .............................................................................................................. 117 Ejercicio 86 - CANVAS (gradiente lineal) ................................................................................................... 118 Ejercicio 87 - CANVAS (gradiente radial) .................................................................................................. 119 Ejercicio 88 - CANVAS (patrones de imagenes) ........................................................................................ 120 Ejercicio 89 - CANVAS (otro canvas como patrn) ................................................................................... 122 Ejercicio 90 - CANVAS (grabar y recuper el estado - save(), restore()) ..................................................... 123 Ejercicio 91 - CANVAS (translate) ............................................................................................................. 124 Ejercicio 92 - CANVAS (rotate) .................................................................................................................. 125 Ejercicio 93 - CANVAS (scale) .................................................................................................................... 127 Ejercicio 94 AUDIO ................................................................................................................................. 128 Ejercicio 95 VIDEO.................................................................................................................................. 129 Ejercicio 96 - Elementos HTML semnticos. ............................................................................................. 130 Practica 68 - CANVAS (dibujar lneas) ....................................................................................................... 131 Practica 69 - CANVAS (dibujar rectngulo - permetro) ........................................................................... 131 Practica 70 - CANVAS (estilos de lnea) .................................................................................................... 131 Practica 71 - CANVAS (rectngulo relleno) ............................................................................................... 131 Practica 72 - CANVAS (borrar una regin) ................................................................................................ 131 Practica 73 - CANVAS (dibujar varias lneas y rellenar la figura creada) .................................................. 131 Practica 74 - CANVAS (arcos rellenos y lineal) .......................................................................................... 131 Practica 75 - CANVAS (curva de bezier) .................................................................................................... 131 CUADERNO DE EJERCICIOS Y PRACTICAS Pgina 7
[HTML]
IDSYSTEMS 2013
Practica 76 - CANVAS (graficar texto) ....................................................................................................... 131 Practica 77 - CANVAS (graficar imagenes) ................................................................................................ 132 Practica 78 - CANVAS (transparencias) ..................................................................................................... 132 Practica 79 - CANVAS (sombras) ............................................................................................................... 132 Practica 80 - CANVAS (gradiente lineal) ................................................................................................... 132 Practica 81 - CANVAS (patrones de imagenes) ......................................................................................... 132 Practica 82 - CANVAS (otro canvas como patrn) .................................................................................... 132 Practica 83 - CANVAS (rotate)................................................................................................................... 132
Pgina 8
[HTML]
IDSYSTEMS 2013
Ejercicio 1 - Crear una pagina basica

1 Si no tienes abierto el Bloc de notas, brelo para realizar el primer ejercicio. 2 Escribe el cdigo que aparece a continuacin: <html> <head> <title>Inicio</title> </head> <body bgcolor="#99CC99"> </body> </html> Con este cdigo estars creando un documento con el ttulo "Inicio", y con el color de fondo verde (#99CC99). 3 Haz clic sobre el men Archivo. 4 Haz clic sobre la opcin Guardar como. Se abrir el cuadro de dilogo Guardar como. 5 En el recuadro Tipo: elige Todos los archivos. 6 Guarda el documento con el nombre inicio.htm, dentro de la carpeta Mis documentos/ejercicios_html/animales de tu disco duro. 7 Abre el documento que acabas de crear en un navegador, y comprueba que obtienes una pgina como la que aparece. Fjate en el color de fondo de la pgina y en la barra de ttulo.
Pgina 9
[HTML]
IDSYSTEMS 2013
Ejercicio 2 Estructura interna de una pagina HTML

Problema de HTML: Confeccionar una pgina que muestre los nombres de 5 lenguajes de programacin separados por un guin. <html> <head> </head> <body> PHP - Java - JavaScript - C - C++ </body> </html> RESULTADO:
Ejercicio 3 Salto de linea <br>

Problema de HTML: Confeccionar una pgina HTML que muestre distintos lenguajes de programacin, mostrarlos uno por lnea. <html> <head> </head> <body> PHP<br> JavaScript<br> Java<br> C<br> C++ </body> </html> RESULTADO:
Pgina 10
[HTML]
IDSYSTEMS 2013
Ejercicio 4 - Parrafo
Problema de HTML: Confeccione una pgina que muestre dos prrafos. En el primero agregar varios saltos de lnea. <html> <head> </head> <body> <p> SQL, Structure Query Language (Lenguaje de Consulta Estructurado) es un lenguaje de programacion para trabajar con base de datos relacionales como MySQL, Oracle, etc.<br> MySQL es un interpretador de SQL, es un servidor de base de datos.<br> MySQL permite crear base de datos y tablas, insertar datos, modificarlos, eliminarlos, ordenarlos, hacer consultas y realizar muchas operaciones, etc., resumiendo: administrar bases de datos. </p> <p> Este tutorial tiene por objetivo acercar los conceptos iniciales para introducirse en el mundo de las bases de datos. </p> </body> </html> RESULTADO:
Practica 1 Modificar las propiedades del documento

Practica 1a: Deportes.
1 Abrir el documento quienes.htm, de la carpeta originales/deportes del curso. 2 Guardar la pgina con el mismo nombre en tu directorio de ejercicios Mis documentos/ejercicios_html/deportes 3 Establecer #0099CC como color de fondo y 40 como tamao de los mrgenes. 4 Guardar los cambios y comprobar el funcionamiento con tu navegador, no te preocupes por el formato del texto, lo arreglars en el tema siguiente.
Pgina 11
[HTML]
IDSYSTEMS 2013
Practica 1b: Flores.

1 Copiar la imagen fondo.gif que encontrars en la carpeta originales/flores/imagenes a tu carpeta Mis documentos/ejercicios_html/flores/imagenes 2 Copiar el documento inicio.htm, de la carpeta originales/flores a tu carpeta Mis documentos/ejercicios_html/flores. 3 Abrir el documento Mis documentos/ejercicios_html/flores/inicio.htm con el Bloc de notas. 4 Establecer como imagen de fondo la imagen fondo.gif de la carpeta ejercicios_html/flores/imagenes. 5 Guardar los cambios y comprobar el funcionamiento en tu navegador.
Practica 2 Estructura interna de una pagina HTML

Problema de HTML:Confeccione una pgina con las marcas mnimas que debe tener y en el cuerpo de la misma disponga su nombre y apellido.
Practica 3 Salto de linea <br>

Problema de HTML:Confeccionar una pgina HTML que muestre su nombre y apellido y en la siguiente lnea los nombres de sus padres separados por un guin.
Practica 4 Parrafo <p>

Problema de HTML:Confeccione una pgina que muestre en un prrafo datos referentes a sus estudios y en otro prrafo su nombre y mail.
Ejercicio 5 Insertar texto con diferentes propiedades

1 Si no tienes abierto el Bloc de notas, brelo para realizar el ejercicio. 2 Abre el archivo inicio.htm, que creaste en el tema anterior y que se encuentra en la carpeta ejercicios_html/animales. 3 Inserta una lnea en blanco debajo de la etiqueta <body>, y escribe el siguiente cdigo en ella: <basefont color="red" size="1 "> Con este cdigo estars estableciendo el color rojo (#FF0000) y tamao 1 para el texto del documento.
CUADERNO DE EJERCICIOS Y PRACTICAS Pgina 12
[HTML]
IDSYSTEMS 2013
Si guardas ahora los cambios y visualizas la pgina, no vers ningn cambio ya que la pgina no tiene texto. 4 Detrs de la etiqueta <basefont> inserta una lnea en blanco, y escribe el siguiente texto: Inicio 5 Guarda el archivo y visualzalo en tu navegador, el texto debe aparecer en rojo y pequeo. Dejaremos la pgina un poco ms discreta y cambiaremos el color del texto a verde oscuro (#003333) y subiremos el tamao de las letras. 6 Rectifica la etiqueta <basefont para que quede as: <basefont color="#003333" size="4"> Con este cdigo estars estableciendo el color verde oscuro (#003333) y tamao 4 para el texto del documento. 7 Guarda el archivo y visualzalo en tu navegador, observa los cambios. 8 Encierra el texto Inicio entre etiquetas <H1> de la siguiente forma: <h1>Inicio</h1> Con este cdigo estars conviertiendo el texto en un encabezado de primer nivel. 9 Guarda el archivo y visualzalo en tu navegador, observa los cambios, el texto aparece destacado y ms grande. 10 Inserta una lnea en blanco debajo del cdigo anterior, y escribe la etiqueta <hr>. Con esta etiqueta estars insertando una regla horizontal. 11 Guarda el archivo y visualzalo en tu navegador, observa la regla 12 Inserta una lnea en blanco debajo de la etiqueta anterior, y escribe el siguiente cdigo en ella: <blockquote> <blockquote> <p align="left"> <em> Somos una asociación de veterinarios, estudiantes de veterinaria, o simplemente amantes de los animales. <br> Desde esta página web intentaremos resolver tus dudas acerca de cómo cuidar a tus mascotas. </em>
[HTML] </p> </blockquote> </blockquote> Con este cdigo estars insertando un prrafo (<p>) dividido en dos lneas (<br>).
IDSYSTEMS 2013
Este prrafo estar alineado a la izquierda (align="left"), aparecer en cursiva (<em>) y tendr doble sangrado (<blockquote>). 13 Guarda el archivo y visualzalo en tu navegador, comprueba que obtienes una pgina como la que aparece en la imagen. Para apreciar mejor el efecto del prrafo ves cambiando el tamao de la ventana de tu navegador y vers como el texto se va escribiendo en ms lneas pero siempre alineado a la izquierda y saltando de lnea despus de la primera frase.
Ejercicio 5b.
1 Abre el documento gatos.htm, de la carpeta originales/animales del curso. 2 Guarda la pgina con el mismo nombre en tu directorio de ejercicios Mis documentos/ejercicios_html/animales Vamos a modificar la pgina para que tenga el siguiente aspecto:
Pgina 14
[HTML]
IDSYSTEMS 2013
1 Empezamos por darle a la palabra Gatos un estilo de encabezado 1: <h1>Gatos</h1> Si quieres puedes ir observando los cambios segn los vayas introduciendo, guardando sin cerrar el bloc de notas y visualizando la pgina cada vez (la primera vez abres el explorador con la pgina gatos.htm y despus de ver el efecto, en vez de cerrar la ventana del explorador la dejas abierta, as cuando hayas hecho el siguiente cambio en la pgina podrs volver a la sesin del explorador con la pgina gatos.htm y despus de hacer clic en el botn Actualizar de tu navegador vers mejor el efecto producido por el cambio que has incorporado a la pgina). 2 Detrs aadimos una regla con la etiqueta <hr>. 3 Aadimos una lnea en blanco con <br> 4 La pregunta queda sangrada con respecto al resto del texto, la colocamos dentro de una etiqueta <blockquote> y adems le asignamos un estilo de encabezado 3: <blockquote> <h3>¿COMO PREVENIR LOS PROBLEMAS DENTALES?</h3> </blockquote> 5 Slo nos queda definir la lista intercalando las siguientes etiquetas: <ul> <li>Alimentar al gato con comida seca de buena calidad o darle algo duro para que lo mastique</li> <ul> <li>Preferiblemente que coma pienso</li> </ul> <li>Cepillarle los dientes una vez a la semana</li>
Pgina 15
[HTML]
IDSYSTEMS 2013
<li>Que el veterinario examine la boca del gato por lo menos cada seis meses</li> </ul> 6 Guarda el archivo y visualzalo en tu navegador.
Ejercicio 6 - Ttulos <h1><h2><h3><h4><h5><h6>

Problema de HTML: Confeccionar una pgina que contenga un ttulo de primer nivel <h1> y luego dos ttulos de nivel <h2>. Definir un prrafo para cada ttulo de segundo nivel. <html> <head> </head> <body> <h1>Tipos de datos en MySQL</h1> <h2>varchar</h2> <p> se usa para almacenar cadenas de caracteres. Una cadena es una secuencia de caracteres. Se coloca entre comillas (simples): 'Hola'.<br> El tipo "varchar" define una cadena de longitud variable en la cual determinamos el mximo de caracteres. Puede guardar hasta 255 caracteres. Para almacenar cadenas de hasta 30 caracteres, definimos un campo de tipo varchar(30). </p> <h2>int</h2> <p> Se usa para guardar valores numricos enteros, de -2000000000 a 2000000000 aproximadamente.<br> Definimos campos de este tipo cuando queremos representar, por ejemplo, cantidades. </p> </body> </html>
Pgina 16
[HTML]
IDSYSTEMS 2013
Ejercicio 7 - Enfasis (<em> <strong>)

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

1 Abrir el documento quienes, de tu carpeta ejercicios_html/deportes. 2 Aadir el cdigo necesario para que la pgina quede de la siguiente forma:
Pgina 17
[HTML]
IDSYSTEMS 2013
3 Guardar los cambios y comprobar el funcionamiento en un navegador.
Practica 5b: Deportes.

1 Abrir el documento donde.htm, de la carpeta originales/deportes del curso. 2 Guardar la pgina con el mismo nombre en tu directorio de ejercicios Mis documentos/ejercicios_html/deportes 3 Convertir la ltima frase en una marquesina. 4 Guardar los cambios y comprobar el funcionamiento en un navegador.
Practica 5c: Deportes.

1 Abrir el documento intalaciones.htm, de la carpeta originales/deportes del curso. 2 Guardar la pgina con el mismo nombre en tu directorio de ejercicios Mis documentos/ejercicios_html/deportes 3 Convertir la lista de actividades que aparece antes de la frase Puedes apuntarte... en una lista con vietas. 4 Guardar los cambios y comprobar el funcionamiento en un navegador.
Pgina 18
[HTML]
IDSYSTEMS 2013
Practica 5d: Flores.

1 Abrir el documento inicio.htm, de la carpeta ejercicio_html/flores. 2 Aadir el cdigo necesario para que la pgina quede de la siguiente forma:
Establecer #990033 como color del texto del documento, y 4 como el tamao normal. 3 Guardar los cambios y comprobar el funcionamiento en un navegador.
PRACTICA 6 - Ttulos <h1><h2><h3><h4><h5><h6>

Problema de HTML:Confeccionar el titular de un peridico con un ttulo de nivel 1. Luego definir dos ttulos de segundo nivel con los textos (Noticias polticas y Noticias deportivas), en cada una de estas secciones definir dos titulares de tercer nivel con un prrafo cada una. Al final de la pgina mostrar un ttulo de cuarto nivel con el nombre de la empresa propietaria del peridico.
PRACTICA 7 - Enfasis (<em> <strong>)

Problema de HTML:Confeccionar una pgina que muestre la definicin de tres palabras. Aplicar el elemento strong a cada palabra previo a su definicin. Luego agregar el elemento em a una o a un conjunto de palabras dentro de la definicin.
Pgina 19
[HTML]
IDSYSTEMS 2013
Ejercicio 8 Insertar un hiperenlace

1 Si no tienes abierto el Bloc de notas, brelo para realizar el ejercicio. 2 Abre el archivo inicio.htm, que debes tener en la carpeta ejercicios_html/animales. Vamos a aadir un enlace a la pgina en Internet de aulaClic. 1 Escribe el siguiente cdigo delante de la etiqueta </body>: <p align="center"> <a href="http://www.aulaclic.com" target="_blank"> <b> visita aulaClic </b> </a> </p> Con este cdigo estars insertando un hiperenlace a www.aulaclic.com, que ser abierto en una nueva ventana (target="_blank"). En este caso hemos utilizado una referencia absoluta. El enlace contendr el texto visita aulaClic, que aparecer en negrita (<b>), y centrado (align="center"). Observa como hemos anidado las etiquetas, siempre se cierra la ltima abierta. 2 Haz clic sobre el men Archivo. 3 Haz clic sobre la opcin Guardar. 4 Abre con tu navegador el documento inicio.htm que acabas de guardar, y comprueba que si te posicionas sobre el texto visita aulaClic el puntero del ratn se convierte en una mano y si haces clic (y ests conectado a Internet) se abrir una nueva ventana con la pgina de aulaClic. Vamos a cambiar ahora el color de los enlaces. 1 Si cerraste el archivo inicio.htm, abrelo para seguir con el ejericio: 2 Rectifica la etiqueta <body> para que quede as: <body bgcolor="#99CC99" link="#CC0000" vlink="#CC0000" alink="#CC0000" > Con este cdigo estars indicando que la pgina tiene el color de fondo verde (#99CC99), y el color de los enlaces rojo (#CC0000). 3 Haz clic sobre el men Archivo.
Pgina 20
[HTML] 4 Haz clic sobre la opcin Guardar.
IDSYSTEMS 2013
5 Abre con tu navegador el documento inicio.htm que acabas de guardar, y comprueba que obtienes una pgina como la que aparece en la imagen. Fjate que ahora el texto del enlace aparece en rojo.
Ejercicio 9 - Hipervnculo a otra pgina del mismo sitio <a>

Problema:Confeccionar una pgina principal que tenga un hipervnculo a otra pgina secundaria. La pgina secundaria debe tener tambin un hipervnculo a la pgina principal. pagina1.html
<html> <head> </head> <body> <h1>Pgina principal.</h1> <a href="pagina2.html">Noticias</a> </body> </html>
Pgina 21
[HTML]
IDSYSTEMS 2013
Ejercicio 10 - Hipervnculo a otro sitio de internet <a>

Problema:Confeccionar una pgina que contenga un enlace al sitio de google. pagina1.html
<html> <head> </head> <body> <a href="http://www.google.com">Buscador Google</a> </body> </html>
Ejercicio 11 Apertura de un hipervinculo en otra instancia del navegador

Problema de HTML: Confeccionar una pgina que contenga dos hipervnculos a los peridicos La Nacin y el Clarin. Hacer que el hipervnculo del peridico el Clarin sea abierto en otra ventana del navegador. <html> <head> </head> <body> <h1>Apertura de enlaces en el mismo navegador y en otra instancia del navegador</h1> <p> <a href="http://www.lanacion.com.ar">Peridico La Nacin</a> <br> <a href="http://www.clarin.com.ar" target="_blank">Peridico Clarin</a> CUADERNO DE EJERCICIOS Y PRACTICAS Pgina 22
[HTML]
</p> </body> </html>
IDSYSTEMS 2013
Ejercicio 12 - Hipervnculo a un cliente de correo <a>

Problema de HTML: Confeccionar una pgina que contenga un hipervnculo 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>
Ejercicio 13 - Anclas llamadas desde la misma pgina.

Problema:Confeccionar una pgina que contenga cuatro anclas, luego definir cuatro hipervnculos que se enlacen con dichas anclas. pagina1.html
<html> <head> </head> <body> <h1>Tutorial de MySQL</h1> <a href="#introduccion">Introduccin</a><br> <a href="#mostrarbasedatos">show databases</a><br> <a href="#creaciontabla">Creacin de una tabla y mostrar sus campos</a><br> <a href="#cargarregistros">Carga de registros a una tabla y su recuperacin</a><br> CUADERNO DE EJERCICIOS Y PRACTICAS Pgina 23
[HTML]
IDSYSTEMS 2013
<a name="#introduccion"></a> <h2>Introduccin</h2> <p> SQL, Structure Query Language (Lenguaje de Consulta Estructurado) es un lenguaje de programacion para trabajar con base de datos relacionales como MySQL, Oracle, etc.<br> MySQL es un interpretador de SQL, es un servidor de base de datos.<br> MySQL permite crear base de datos y tablas, insertar datos, modificarlos, eliminarlos, ordenarlos, hacer consultas y realizar muchas operaciones, etc., resumiendo: administrar bases de datos.<br> Ingresando instrucciones en la linea de comandos o embebidas en un lenguaje como PHP nos comunicamos con el servidor. Cada sentencia debe acabar con punto y coma (;).<br> La sensibilidad a maysculas y minsculas, es decir, si hace diferencia entre ellas, depende del sistema operativo, Windows no es sensible, pero Linux si. Por ejemplo Windows interpreta igualmente las siguientes sentencias:<br> create database administracion;<br> Create DataBase administracion;<br> Pero Linux interpretar como un error la segunda.<br> Se recomienda usar siempre minsculas. Es ms el sitio mysqlya.com.ar est instalado sobre un servidor Linux por lo que todos los ejercicios debern respetarse maysculas y minsculas. </p> <a name="mostrarbasedatos"></a> <h2>show databases</h2> <p> Una base de datos es un conjunto de tablas.<br> Una base de datos tiene un nombre con el cual accederemos a ella.<br> Vamos a trabajar en una base de datos ya creada en el sitio, llamada "administracion".<br> Para que el servidor nos muestre las bases de datos existentes, se lo solicitamos enviando la instruccin:<br> show databases;<br> Nos mostrar los nombres de las bases de datos, debe aparecer en este sitio "administracion".<br> </p> <a name="creaciontabla"></a> <h2>Creacin de una tabla y mostrar sus campos</h2> <p> Una base de datos almacena sus datos en tablas.<br> Una tabla es una estructura de datos que organiza los datos en columnas y filas; cada columna es un campo (o atributo) y cada fila, un registro. La interseccin de una columna con una fila, contiene un dato especfico, un solo valor.<br> Cada registro contiene un dato por cada columna de la tabla.<br> Cada campo (columna) debe tener un nombre. El nombre del campo hace referencia a la informacin que almacenar.<br> Cada campo (columna) tambin debe definir el tipo de dato que almacenar.<br> </p> <a name="cargarregistros"></a> <h2>Carga de registros a una tabla y su recuperacin</h2> <p> Usamos "insert into". Especificamos los nombres de los campos entre parntesis y separados por comas y luego los valores para cada campo, tambin entre parntesis y separados por comas.<br> Es importante ingresar los valores en el mismo orden en que se nombran los campos, si ingresamos los datos en otro orden, no aparece un mensaje de error y los datos se guardan de modo incorrecto.<br> CUADERNO DE EJERCICIOS Y PRACTICAS Pgina 24
[HTML]
IDSYSTEMS 2013
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>
Ejercicio 14 - Anclas llamadas desde otra pgina.

Problema:Confeccionar una pgina que contenga cuatro anclas y una segunda pgina que defina cuatro hipervnculos que se enlacen con dichas anclas. pagina1.html
<html> <head> </head> <body> <h1>Tutorial de MySQL</h1> <a href="pagina2.html#introduccion">Introduccin</a><br> <a href="pagina2.html#mostrarbasedatos">show databases</a><br> <a href="pagina2.html#creaciontabla">Creacin de una tabla y mostrar sus campos</a><br> <a href="pagina2.html#cargarregistros">Carga de registros a una tabla y su recuperacin</a><br> </body> </html>
Pgina 25
[HTML]
IDSYSTEMS 2013
Practica 8 Insertar hiperenlaces

1 Abrir el documento menu.htm, de la carpeta originales/deportes del curso. 2 Guardar la pgina con el mismo nombre en tu directorio de ejercicios Mis documentos/ejercicios_html/deportes 3 Rectificar la pgina para que la palabra E-MAIL sea un enlace de correo electrnico a tu direccin de correo. 4 Guardar los cambios y comprobar el funcionamiento en un navegador.

1 Abrir el documento instalaciones.htm, de la carpeta ejercicios_html/deportes. 2 Aadir al texto de cada actividad un enlace al prrafo correspondiente a esa actividad para que el navegante pueda ver directamente la descripcin de la actividad sin tener que moverse por toda la pgina. 3 Guardar los cambios y comprobar el funcionamiento en un navegador.
Practica 8c: Flores.

1 Abrir el documento menu.htm, de la carpeta originales/flores del curso.
[HTML] 2 Guardar la pgina con el mismo nombre en tu directorio de ejercicios Mis documentos/ejercicios_html/flores
IDSYSTEMS 2013
3 Asociar a la palabra Inicio un enlace a la pgina inicio.htm, a la palabra Productos un enlace a la pgina productos.htm y a la palabra Pedidos un enlace a la pgina pedidos.htm, las pginas inicio.htm, productos.htm y pedidos.htm se encontrarn en el mismo directorio que la pgina menu.htm. Las pginas se abrirn en la misma ventana. 4 Guardar los cambios y comprobar el funcionamiento del enlace a la pgina Inicio.htm en un navegador (las pginas productos.htm y pedidos.htm se incorporarn ms adelante) .
Practica 9 - Hipervnculo a otra pgina del mismo sitio <a>

Problema:Confeccionar una pgina principal con dos hipervnculos a las pginas pagina2.html y pagina3.html Luego en las dos pginas secundarias disponer hipervnculos a la pgina principal
Practica 10 - Hipervnculo a otro sitio de internet <a>

Problema:Confeccionar una pgina que contenga un hipervnculo a un peridico (indicar slo el nombre de dominio del peridico). Disponer adems un segundo hipervnculo a una pgina determinada de ese peridico.
Practica 11 - Apertura de un hipervnculo en otra instancia del navegador.

Problema de HTML:Confeccionar una pgina que muestre enlaces a distintos blog. Agruparlos bajo dos ttulos que muestren los mismos enlaces, el primero "Hacer la apertura en otra ventana" y el segundo "Hacer la apertura en el mismo navegador".
Practica 12 - Hipervnculo a un cliente de correo <a>

Problema de HTML:Una empresa que vende pizzas tiene 3 ofertas. Las mismas son ( 1- 1 muzzarella y una bebida cola a 5 pesos, 2- 2 muzzarellas a 6 pesos y 3 - 4 muzarrellas a 10 pesos). Confeccionar una pgina que disponga tres hipervnculos a cada una de esas ofertas. Al ser presionadas abrir el cliente de correo y enviar la promocin correspondiente. En el ttulo indicar si se trata de la promocin 1, 2 o 3. En el cuerpo del mensaje pedir que ingrese la direccin y telfono de la persona que hace el pedido.
Practica 13 - Anclas llamadas desde la misma pgina.

Problema:Disponer una serie de hipervnculos sobre noticias del da. Enlazar los hipervnculos con anclas que se encuentran ms abajo en la misma pgina.
Pgina 27
[HTML]
IDSYSTEMS 2013
Practica 14 - Anclas llamadas desde otra pgina.

Problema:Disponer una serie de hipervnculos sobre noticias del da. Enlazar los hipervnculos con anclas que se encuentran en otra pgina.
Ejercicio 15 Insertar una imagen

Ejercicio 15a
1 Abre el archivo inicio.htm, que se encuentra en la carpeta ejercicios_html/animales. 2 Sustituye la lnea <b> visita aulaclic </b> que est incluida dentro de un hiperenlace, por la lnea <img src="imagenes/aulaclic.jpg" alt="visita aulaclic" width="90" height="32" border="4"> Con este cdigo estars asociando el enlace con la imagen aulaclic.jpg que se encuentra en la directorio imagenes dentro de la carpeta animales (la carpeta donde se encuentra el archivo inicio.htm. La imagen medir 90 pxeles de ancho, y 32 pxeles de alto (atributos width y height). Tendr un borde de 4 pxeles (atributo border), que aparecer de color rojo, al ser este color el definido para los enlaces de esta pgina. En el caso de que la imagen no pueda ser visualizada, o se situe el puntero sobre ella, se mostrar el texto visita aulaclic (atributo alt). 3 Haz clic sobre la opcin Guardar del men Archivo. 4 Abre el documento inicio.htm, que acabas de guardar, en un navegador, y comprueba que obtienes una pgina como la que aparece a continuacion
Pgina 28
[HTML]
IDSYSTEMS 2013
Ejercicio 15b
1 Abre el documento menu.htm, de la carpeta originales/animales del curso. 2 Guarda la pgina con el mismo nombre en tu directorio de ejercicios Mis documentos/ejercicios_html/animales 2 Aade delante de la primera etiqueta <p ... la siguiente lnea: <p align="center"><img src="imagenes/logo_animales.gif" width="122" height="85"> </p> El prrafo se aade para centrar la imagen. 3 Haz clic sobre la opcin Guardar del men Archivo. 4 Abre el documento menu.htm, que acabas de guardar, en un navegador, y comprueba que obtienes una pgina como la que aparece a continuacion
Pgina 29
[HTML]
IDSYSTEMS 2013
Ejercicio 15c
1 Abre el archivo gatos.htm, que se encuentra en la carpeta animales. 2 Aade detrs de la etiqueta </ul> la lnea: <img src="imagenes/gatito.gif" alt="gatito" border="0"> 3 Haz clic sobre la opcin Guardar del men Archivo. 4 Abre el documento menu.htm, que acabas de guardar, en un navegador, y comprueba que obtienes una pgina como la que aparece en la imagen
Pgina 30
[HTML]
IDSYSTEMS 2013
No te preocupes por la disposicin de la imagen, en el tema de tablas lo arreglaremos.
Ejercicio 16
Imgenes dentro de una pgina <img>
Problema de HTML: Implementar una pgina que muestre una imagen llamada foto1.jpg que se encuentra en el mismo servidor y en la misma carpeta donde se localiza el archivo HTML. <html> <head> </head> <body> <img src="foto1.jpg" alt="Pintura geomtrica"> </body> </html>
Pgina 31
[HTML]
IDSYSTEMS 2013
Ejercicio 17 - Hipervnculo mediante una imagen <a> y <img>

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

1 Abrir el documento menu.htm, de la carpeta ejercicios_html/deportes. 2 Sustituir la palabra DEPORTES por la imagen logodeportes.gif que se encuentra en la carpeta imagenes de la carpeta ejercicios_html/deportes, la imagen deber tener deportes como texto alternativo. 3 Sustituir la palabra E-MAIL por la imagen email.gif, sin texto alternativo. 4 Guardar los cambios y comprobar el funcionamiento en un navegador.
Practica 15b 2: Deportes.

1 Abrir el documento instalaciones.htm, de la carpeta ejercicios_html/deportes. 2 Sustituir la palabra DEPORTES que aparece al final de la pgina por la misma imagen logodeportes.gif que en el ejercicio anterior, la imagen deber tener deportes como texto alternativo. 3 Guardar los cambios y comprobar el funcionamiento en un navegador.

1 Abrir el documento menu.htm, de la carpeta flores. 2 Sustituir la palabra FLORES por la imagen logo_flores.gif que se encuentra en la carpeta imagenes de la carpeta flores, la imagen deber tener flores como texto alternativo y el texto que hay a su derecha debe quedar a media altura de la imagen. 3 Guardar los cambios y comprobar el funcionamiento en un navegador.
Practica 16 - Imgenes dentro de una pgina <img>

Problema de HTML:Desarrollar una pgina que muestre dos imagenes llamadas foto2.jpg y foto3.jpg, las mismas se encuetran almacenadas en el servidor en la misma carpeta donde se almacenar la pgina que usted desarrollar. Disponer un ttulo a cada imagen.
Pgina 33
[HTML]
IDSYSTEMS 2013
Practica 17 - Hipervnculo mediante una imagen <a> y <img>

Problema:Crear tres pginas con una foto cada una (foto1.jpg, foto2.jpg y foto3.jpg) luego al ser presionada avanzar a la siguiente pgina, es decir de la pagina1.html llamar a la pagina2.html, de la pagina2.html pasar a la pagina3.html y de sta a la primera. Las imgenes se encuentran en una carpeta llamada imagenes que depende directamente de la raiz del sitio
Ejercicio 18 -
Lista ordenada (<ol>)
Problema de HTML: 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>
Ejercicio 19 -
Lista no ordenada (<ul>)
Problema de HTML: Confeccionar una pgina HTML que contenga una lista no ordenada con cuatro lenguajes de programacin muy populares. Agregar un ttulo de segundo nivel indicando el concepto de esta lista.
<html> <head> </head> <body> <h2>Lenguajes de programacin.</h2> <ul> <li>C</li> <li>C++</li>

[HTML] <li>Java</li> <li>C#</li> </ul> </body> </html>
IDSYSTEMS 2013
Ejercicio 20 - Lista de definiciones (<dl>)

Problema de HTML: Confeccionar una lista de definicin indicando en los conceptos distintos lenguajes de programacin. En la definicin hacer una breve introduccin del mismo. <html> <head> </head> <body> <dl> <dt>C++</dt> <dd>Es un lenguaje de programacin, diseado a mediados de los aos 1980, por Bjarne Stroustrup, como extensin del lenguaje de programacin C.</dd> <dt>Java</dt> <dd>Es un lenguaje de programacin orientado a objetos desarrollado por Sun Microsystems a principios de los 90.</dd> <dt>JavaScript</dt> <dd>Es un lenguaje interpretado, es decir, que no requiere compilacin, utilizado principalmente en pginas web, con una sintaxis semejante a la del lenguaje C.</dd> </dl> </body> </html>
Pgina 35
[HTML]
IDSYSTEMS 2013
Ejercicio 21 - Listas anidadas.

Problema de HTML: Implementar una pgina que enumere una serie de paises en una lista ordenada y luego en cada pais disponer una lista de hipervnculos de peridicos de dicho pais.
<html> <head> </head> <body> <ol> <li>Argentina <ul> <li><a href="http://www.lanacion.com.ar">La Nacin</a></li> <li><a href="http://www.clarin.com.ar">Clarn</a></li> <li><a href="http://www.pagina12.com.ar">Pgina 12</a></li> </ul> </li> <li>Espaa <ul> <li><a href="http://www.elpais.es">El Pas Digital</a></li> <li><a href="http://www.abc.es">ABC</a></li> <li><a href="http://www.elmundo.es">El Mundo</a></li> </ul> </li> <li>Mxico <ul> <li><a href="http://www.jornada.unam.mx">La Jornada</a></li> <li><a href="http://www.el-universal.com.mx">El Universal</a></li> </ul> </li> </ol> </body> </html>
Pgina 36
[HTML]
IDSYSTEMS 2013
Practica 18 -
Lista ordenada (<ol>)
Problema de HTML:Confeccione una lista ordenada con los tres paises con mayor poblacin del planeta. Disponer un ttulo de segundo nivel y debajo de la lista la suma de habitantes de esos tres paises enfatizado.
Practica 19 -
Lista no ordenada (<ul>)
Problema de HTML:Confeccionar una lista no ordenada que contenga hipervnculos a distintos peridicos que usted conoce. Agregar tantos item como peridicos conoce.
Practica 20 - Lista de definiciones (<dl>)

Problema de HTML:Confeccione una lista de definicin de un conjunto de palabras que utilice en su mbito laboral.
Practica 21 - Listas anidadas.

Problema de HTML:Confeccionar una lista no ordenada de lenguajes de programacin. Luego disponer una lista ordenada con hipervnculos a sitios que tratan dichos lenguajes.
Pgina 37
[HTML]
IDSYSTEMS 2013
Ejercicio 22 Trabajar con tablas

Ejercicio 22a.
Vamos a insertar en la pgina gatos.htm una tabla para colocar la imagen del gatito a la izquierda de la lista. Para eso crearemos una tabla de una fila y dos columnas, en la columna de la izquierda colocaremos el texto y en la columna de la derecha la imagen. 1 Si no tienes abierto el Bloc de notas, brelo para realizar el ejercicio. 2 Haz clic sobre el men Archivo. 3 Haz clic sobre la opcin Abrir. Se abrir una nueva ventana. 4 En Tipo:, elige Todos los archivos. 5 Selecciona el archivo gatos.htm, que se encuentra en la carpeta animales, y pulsa sobre el botn Aceptar. 6 Detrs de la etiqueta <hr> aade el siguiente cdigo para aadir una lnea en blanco, definir la tabla, empezar la definicin de la primera fila y primera columna de la tabla. Hacemos la tabla invisible (border="0") y que ocupe todo los ancho de la ventana (width="100%"), la primera columna ocupar el 70% de la ventana (width="70%") : <br> <table width="100%" border="0"> <tr> <td width="70%"> 7 Detrs de la ltima etiqueta </ul> aade el siguiente cdigo para cerrar la columna y empezar la otra, ahora la segunda columna ocupar el 30% de la ventana (width="30%"): </td> <td width="30%"> 8 Detrs de la etiqueta <img> aade el siguiente cdigo para cerrar la columna y cerrar la fila y la tabla: </td> </tr> </table> 9 Guarda el archivo y cierra el bloc de notas. 10 Abre con tu navegador el archivo gatos.htm, comprueba que ahora la imagen est a la derecha del texto y si haces la ventana ms pequea, el ancho de las columnas cambia.
[HTML]
IDSYSTEMS 2013
Ejercicio 22b.
1 Abre el documento perros.htm, de la carpeta originales/animales del curso. 2 Guarda la pgina con el mismo nombre en tu directorio de ejercicios Mis documentos/ejercicios_html/animales En el documento que has abierto vamos a crear la siguiente tabla:
DIFERENCIAS ENTRE EL PERRO Y EL HOMBRE DIFERENCIAS Duracin crecimiento Tiempo de gestacin Duracin de vida del pelo/cabello PERRO PEQUEO 10 meses GRANDE 18 a 24 meses 58 a 63 das 1 ao HOMBRE 16 aos 9 meses 2 a 7 aos
Empezamos por definir la etiqueta de la tabla: 3 Escribe delante de la etiqueta </body>: <table width="575" border="2" align="center" cellspacing="2" bordercolor="#000000" > El atributo width nos permite definir la tabla de un tamao fijo para que ese tamao no cambie segn el tamao de la ventana abierta. Con el valor 2 del atributo border hacemos que el borde externo de la tabla aparezca ms grueso. El atributo align con el valor center nos permite indicar que la tabla estar centrada con respecto a la ventana. Con el valor 2 del atributo cellspacing hacemos que aparezca un hueco entre las celdas de la tabla. El atributo bordercolor nos permite definir el color del borde la tabla. Para que no se nos olvide cerrar etiquetas es mejor aadir la etiqueta de cierre y despus entre la dos etiquetas aadir las otras. 4 Escribe: </table>
Pgina 39
[HTML]
IDSYSTEMS 2013
La tabla tiene seis filas (contamos el nmero mayor de filas) y el texto contenido en ellas est centrado tanto en horizontal como en vertical: 5 Escribe seis veces: <tr align="center" valign="middle"> </tr> Ya hemos definido las filas, ahora las vamos a rellenar con las columnas. Miramos cul es la fila con mayor nmero de columnas, tiene cuatro columnas. Rellenamos la primera fila, en esta fila aparece una sola columna por lo que hay que indicar que esta se expande sobre cuatro columnas: 6 Escribe despus de la primera etiqueta <tr..: <td colspan="4">DIFERENCIAS ENTRE EL PERRO Y EL HOMBRE</td>
Vamos a rellenar ahora la segunda fila. En esta fila la primera columna se expande sobre dos filas: 7 Escribe despus de la segunda etiqueta <tr..: <td rowspan="2">DIFERENCIAS</td> La segunda columna se expande sobre dos columnas: 8 Escribe a continuacin: <td colspan="2">PERRO</td> La tercera columna se expande sobre dos filas: 9 Escribe a continuacin: <td rowspan="2">HOMBRE</td>
Vamos a rellenar ahora la tercera fila. En esta fila slo tenemos que definir dos columnas ya que la primera y la ltima estn incluidas en el rowspan de la fila anterior.
Pgina 40
[HTML] 10 Escribe despus de la tercera etiqueta <tr..: <td>PEQUEÑO</td> <td>GRANDE</td>
IDSYSTEMS 2013
Vamos a rellenar ahora la cuarta fila. En esta fila tenemos que definir las cuatro columnas normales 11 Escribe despus de la cuarta etiqueta <tr..: <td>Duración crecimiento</td> <td>10 meses</td> <td>18 a 24 meses</td> <td>16 años</td>
Vamos a rellenar ahora la quinta fila. En esta fila tenemos que indicar que la segunda columna se expande sobre dos columnas. 12 Escribe despus de la quinta etiqueta <tr..: <td>Tiempo de gestación</td> <td colspan="2">58 a 63 días</td> <td>9 meses</td>
Por ltimo rellenamos la sexta fila. En esta fila tenemos que indicar tambin que la segunda columna se expande sobre dos columnas. 13 Escribe despus de la sexta etiqueta <tr..: <td>Duración de vida del pelo/cabello</td> <td colspan="2">1 año</td> <td>2 a 7 años</td>
Veamos el resultado. 14 Guarda los cambios y abre la pgina con tu navegador. Ahora aadiremos los colores de fondo. Si quieres puedes ir observando los cambios segn los vayas introduciendo, guardando sin cerrar el bloc de notas y cada vez actualizando la pgina en tu navegador (como hiciste en el ejercicio paso a paso del tema 3). 15 Aade background="imagenes/fondopatas.gif" dentro de la etiqueta <table>. De este modo, la imagen fondopatas.gif pasar a ser la imagen de fondo de la tabla. 16 Aade bgcolor="#669966" dentro de la primera etiqueta <tr>. De este modo, la primera fila de la tabla ser de color verde oscuro.
[HTML]
IDSYSTEMS 2013
17 Aade bgcolor="#FFCC99" dentro de la segunda etiqueta <tr>. De este modo, la segunda fila de la tabla ser de color naranja. 18 Aade bgcolor="#FFFF99" dentro de la tercera etiqueta <tr>. De este modo, las celdas de esa fila, que contienen el texto PEQUEO y GRANDE, sern de color amarillo. Por ltimo cambiaremos las tres primeras filas para que el texto contenido en ellas tenga formato de cabecera de columna. 19 Sustituye td por th en las lneas que se encuentran entre los tres primeros pares de etiquetas <tr> y </tr>. De este modo, las celdas de las tres primeras filas pasarn a ser ttulos de columna, por lo que el texto aparecer centrado y en negrita. 20 Comprueba que obtienes una pgina como la siguiente
Ejercicio 23 - Tabla (<table><tr><td>)

Problema de HTML: 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> CUADERNO DE EJERCICIOS Y PRACTICAS Pgina 42
[HTML]
</tr> <tr> <td>India</td><td>1080 millones</td> </tr> <tr> <td>Estados Unidos</td><td>295 millones</td> </tr> </table> </body> </html>
IDSYSTEMS 2013
Ejercicio 24 Tabla con encabezado (<th>)

Problema de HTML: Confeccionar una tabla que muestre los nombre de paises en una columna y su cantidad de habitantes en otra. Disponer un ttulo a cada columna mediante celdas creadas mediante el elemento th. <html> <head> </head> <body> <table border="1"> <tr> <th>Paises</th><th>Cantidad de habitantes</th> </tr> <tr> <td>China</td><td>1300 millones</td> </tr> <tr> <td>India</td><td>1080 millones</td> </tr> <tr> <td>Estados Unidos</td><td>295 millones</td> </tr> </table> </body> </html>
Pgina 43
[HTML]
IDSYSTEMS 2013
Ejercicio 25 Tabla con ttulo (<caption>)

Problema de HTML: Confeccionar una tabla que muestre los nombre de paises en una columna y su cantidad de habitantes en otra. Disponer un ttulo de los datos que representa la tabla. <html> <head> </head> <body> <table border="1"> <caption>Poblacin de los paises con mayor cantidad de habitantes.</caption> <tr> <th>Paises</th><th>Cantidad de habitantes</th> </tr> <tr> <td>China</td><td>1300 millones</td> </tr> <tr> <td>India</td><td>1080 millones</td> </tr> <tr> <td>Estados Unidos</td><td>295 millones</td> </tr> </table> </body> </html>
Pgina 44
[HTML]
IDSYSTEMS 2013
Ejercicio 26 - Tabla y combinacin de celdas.

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

1 Abrir el documento donde.htm, de la carpeta deportes. 2 Modificar la pgina para colocar la lista de centros en una tabla como esta:
Pgina 45
[HTML]
IDSYSTEMS 2013
3 Rectificar la tabla para que las celdas de la primera fila sean ttulos de columna. 4 Guardar los cambios y comprobar el funcionamiento en un navegador.

1 Abrir el documento instalaciones.htm, de la carpeta deportes. 2 Modificar la tabla que aparece para dejarla as:

1 Abrir el documento productos.htm, de la carpeta originales/flores del curso. 2 Guardar la pgina con el mismo nombre en tu directorio de ejercicios Mis documentos/ejercicios_html/flores 3 Modificar la tabla para que la celda que contiene el texto 6 se combine con la celda que se encuentra debajo de ella. 4 Guardar los cambios y comprobar el funcionamiento en un navegador.
Practica 22d: Flores.

1 Abrir el documento menu.htm, de la carpeta flores.
[HTML]
IDSYSTEMS 2013
2 Aadir una tabla para que cada palabra y la imagen ocupen el ancho de la ventana y estn equidistantes. 3 Guardar los cambios y comprobar el funcionamiento en un navegador.
Practica 23 - Tabla (<table><tr><td>)

Problema de HTML:Confeccionar una tabla que muestre en la primer columna los nombre de distintos empleados de una compaia y en la segunda el sueldo bruto (la compaa tiene 4 empleados)
Practica 24 Tabla con encabezado (<th>)

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

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

Problema de HTML:Confeccionar una tabla que muestre los nombres de peridicos y su nombre de dominio agrupados por paises. En la primer columna disponer los nombre de paises, expandir en fila de acuerdo a la cantidad de diarios de cada pais.
Ejercicio 27 - Contenido de la cabecera de la pgina (<title>)

Problema:Confeccionar dos pginas que inicialicen el elemento title. Disponer un hipervnculo en cada pgina. <html> <head> <title>Ttulo de la primer pgina</title> </head> <body> <h1>Prueba del elemento title</h1> <a href="pagina2.html">Ir a la segunda pgina</a> </body> </html>
Pgina 47
[HTML]
IDSYSTEMS 2013
Ejercicio 28 - Contenido de la cabecera de la pgina (<meta>)

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

Problema de HTML: Confeccionar una pgina que contenga una tabla. Almacenar en un comentario datos referentes al contenido de la tabla que solo interesen al desarrollador. <html> <head> </head> <body>  <table border="1"> <tr> <th rowspan="4">Recursos</th><th colspan="4">Facturacin de los ltimos tres meses</th> </tr> <tr> <td>Discos Duros</td><td>23000</td><td>27200</td><td>26000</td> </tr> <tr> <td>CPU</td><td>73000</td><td>67300</td><td>51000</td> </tr> <tr> <td>Monitores</td><td>53000</td><td>72000</td><td>88000</td> </tr> </table> </body> </html> CUADERNO DE EJERCICIOS Y PRACTICAS Pgina 49
[HTML]
IDSYSTEMS 2013
Ejercicio 30 - Sintaxis para caracteres especiales.

Problema de HTML: Mostrar las siguiente ecuacin: 10+x*y agregar aqu el smbolo menor 12*z <html> <head> <title>Ttulo de la primer pgina</title> </head> <body> <h1> 10+x*y remplazar aqu el caracter especial del menor 12*z </h1> </body> </html>
Practica 27 - Contenido de la cabecera de la pgina (<title>)

Problema:Confeccionar una pgina que muestre en el elemento title el nombre de dominio del sitio
Practica 28 - Comentarios dentro de una pgina 

Confeccionar un pgina que muestre dos tablas. Luego comentar la segunda y ver el resultado.
Practica 29 - Sintaxis para caracteres especiales.

Problema de HTML:Mostrar una tabla con dos columnas en la primera enumerar una serie de artculos y en la segunda sus precios (agregarle el caracter de Euros a cada precio)
Ejercicio 31 Crear conjunto de marcos

1 Si no tienes abierto el Bloc de notas, brelo para realizar el ejercicio. 2 Abre el documento marcos.htm, de la carpeta originales/animales del curso.
Pgina 50
[HTML] 3 Guarda la pgina con el mismo nombre en tu directorio de ejercicios Mis documentos/ejercicios_html/animales
IDSYSTEMS 2013
4 Inserta una lnea en blanco debajo de la etiqueta </head>, y escribe el siguiente cdigo en ella: <frameset rows="*" cols="142,*" framespacing="0" frameborder="NO" border="0"> <frame src="menu.htm" name="marcoizquierdo" frameborder="no" scrolling="NO" noresize> <frame src="inicio.htm" name="marcoderecho" frameborder="no"> </frameset> Con la primera lnea, estars creando dos marcos en la pgina. El primero ser de 142 pxeles, y el otro ocupar el resto de la ventana del navegador. Los marcos se distribuirn en forma de columna (cols="142,*"). No habr espacio entre los marcos (framespacing="0"), ni se mostrarn sus bordes (frameborder="NO" border="0"). Con la segunda lnea, estars especificando las propiedades del primer marco. Este marco se llamar marcoizquierdo, no se mostrarn sus bordes (frameborder="no"), y el usuario no podr modifciar su tamao (noresize). En este marco se cargar el documento menu.htm, y cuando ste no pueda ser mostrado en su totalidad, no aparecern las barras de desplazamiento (scrolling="NO"). Con la tercera lnea, estars especificando las propiedades del segundo marco. Este marco se llamar marcoderecho, y no se mostrarn sus bordes (frameborder="no"). En este marco se cargar el documento inicio.htm. 5 Inserta una lnea en blanco debajo de la etiqueta </frameset>, y escribe el siguiente cdigo en ella: <noframes> <body bgcolor="#99CC99"> Esta página tiene marcos, y tu navegador no los soporta </body> </noframes> Este cdigo ser el utilizado por los navegadores que no soportan los marcos. Cuando un navegador no soporte los marcos, mostrar una pgina de color verde (<body bgcolor="#99CC99">), con el texto Esta pgina tiene marcos, y tu navegador no los soporta. 6 Haz clic sobre el men Archivo. 7 Haz clic sobre la opcin Guardar. 8 Abre el documento marcos.htm, que acabas de guardar, en un navegador, y comprueba que obtienes una pgina como la que aparece a continuacion.
Pgina 51
[HTML]
IDSYSTEMS 2013
Ejercicio 32 Frames
Problema:Confeccionar una pgina que contenga dos frames verticales, el primero que ocupe el 20% y el segundo el 80% de la ventana.
<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>
Pgina 52
[HTML]
IDSYSTEMS 2013
Ejercicio 33 - Frames - Actualizacin de un frame a partir del enlace de otro frame

Problema:Confeccionar una ventana que contenga dos frames verticales. Disponer dos hipervnculos en el frame de la izquierda que al ser presionados actualicen el archivo a mostrar por el frame de la derecha. <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>
Pgina 53
[HTML]
IDSYSTEMS 2013
Ejercicio 34 - Frames - Asignacin de medidas en pxeles

Problema:Confeccionar una pgina que contenga tres frames verticales, el de la izquierda y el de la derecha deben tener 200 pxeles de ancho, el siguiente ocupa el resto. <html> <head> <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>
Ejercicio 35 - Frames - Propiedades del elemento frame

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. <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> CUADERNO DE EJERCICIOS Y PRACTICAS Pgina 54
[HTML]
<p>El navegador no soporta frames</p> </noframes> </frameset> </html>
IDSYSTEMS 2013
Ejercicio 36 - Frames - Anidamiento de frameset

Problema:Confeccionar una pgina que la primer columna tenga un frame y la segunda columna tenga dos frames. Utilizar frameset anidados para resolver el problema.
<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>
[HTML]
IDSYSTEMS 2013
Ejercicio 37 - iframes
Problema:Confeccionar una pgina que incorpore un iframe de 400 pxeles de ancho por 200 pxeles de alto. <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>
Pgina 56
[HTML]
IDSYSTEMS 2013
Practica 30 Configurar marcos

1 Abrir el documento marcos.htm, de la carpeta originales/deportes del curso. 2 Guardar la pgina con el mismo nombre en tu directorio de ejercicios Mis documentos/ejercicios_html/deportes 3 Modificar el conjunto de marcos para que se muestre un borde de 2 pxeles de color #CCFF99. 4 Guardar los cambios y comprobar el funcionamiento en un navegador.

1 Crear el documento marcos.htm en la carpeta Mis documentos/ejercicios_html/flores. Esta pgina contendr un conjunto de marcos para que en la parte superior de la ventana se visualice la pgina menu.htm y en el resto de la ventana se visualice la pgina inicio.htm. El marco superior tendr un alto de 100 pxeles.
Pgina 57
[HTML]
IDSYSTEMS 2013
Practica 31 Frames
Problema: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%"
Practica 32 - Frames - Actualizacin de un frame a partir del enlace de otro frame

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

Problema:Confeccionar una ventana que contenga 3 frames horizontales.Hacer que el frame superior tenga una altura de 80 pxeles, el frame inferior 100 pxeles y el frame central ocupe el resto.
Practica 34 - Frames - Propiedades del elemento frame

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

Problema:Confeccionar una pgina que contenga dos filas. La primera fila muestre un frame de 70 pxeles de alto y la segunda fila dividirla en dos columnas que tengan dos frames, el primero de 200 pxeles y el otro del resto de pxeles sobrantes. Hacer que no se puedan redimensionar.
------------------------------------------------| | | | | | ------------------------------------------------| | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | -------------------------------------------------
Pgina 58
[HTML]
IDSYSTEMS 2013
Practica 36 - iframes
Problema:Confeccionar una pgina que muestre dos iframes de 300*300 pxeles cada uno. Hacer que las barras de desplazamiento siempre esten visibles.
Ejercicio 38 Insertar elementos de formulario

1 Si no tienes abierto el Bloc de notas, brelo para realizar el ejercicio. 2 Abre el documento consultas.htm, de la carpeta originales/animales del curso. 3 Guarda la pgina con el mismo nombre en tu directorio de ejercicios Mis documentos/ejercicios_html/animales 4 Busca la lnea <td>Campo de seleccion</td>, y borra el texto Campo de seleccion. En su lugar, escribe el siguiente cdigo: <select name="animal"> <option selected>--- Elige opción ---</option> <option>Perro</option> <option>Gato</option> <option>Otros</option> </select> Con este cdigo estars insertando un men, llamado animal, que tendr cuatro opciones (--- Elige opcin ---, Perro, Gato, Otros). La opcin seleccionada inicialmente ser la primera (selected). 5 Inserta una lnea en blanco debajo de la lnea <input name="restablecer" type="reset" value="Restablecer">, y escribe el siguiente cdigo en ella: <input name="enviar" type="submit" value="Enviar"> Con este cdigo, estars insertando un botn para enviar el formulario (type="submit"), cuyo nombre ser enviar, y que tendr el texto Enviar. 6 Haz clic sobre el men Archivo. 7 Haz clic sobre la opcin Guardar. 8 Abre el documento consultas.htm, que acabas de guardar, en un navegador, y comprueba que obtienes una pgina como la que aparece a continuacion
Pgina 59
[HTML]
IDSYSTEMS 2013
Ejercicio 39 - Formulario - <form>

Problema de HTML: Confeccionar un formulario que contenga un cuadro de texto donde el visitante debe ingresar su nombre y un botn de tipo submit para el envo de los datos ingresados al servidor (tener en cuenta que la pgina que procesa los datos del formulario en el servidor se encuentra en la raiz del sitio y se llama: registrardatos.php <html> <head> <title>Prueba de formulario</title> </head> <body> <form action="/registrardatos.php" method="post"> Ingrese su nombre: <input type="text" name="nombre" size="20"> <br> <input type="submit" value="enviar"> </form> </body> </html>
Pgina 60
[HTML]
IDSYSTEMS 2013
Ejercicio 40 - Formulario - input type="text"/ input type="password"

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

Problema de HTML: 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> CUADERNO DE EJERCICIOS Y PRACTICAS Pgina 61
[HTML]
Comentarios:<br> <textarea name="comentarios" rows="5" cols="60"></textarea> <br> <input type="submit" value="Enviar"> </form> </body> </html>
IDSYSTEMS 2013
Ejercicio 42 - Formulario - input type="checkbox"

Problema de HTML: Implementar un formulario que solicite el ingreso del nombre de una persona y 4 elementos de tipo checkbox para que seleccione los lenguajes de programacin que conoce. <html> <head> <title>Prueba de formulario</title> </head> <body> <form action="/registrardatos.php" method="post"> Ingrese su nombre: <input type="text" name="nombre" size="30"><br> Seleccione los lenguajes que conoce: <br> <input type="checkbox" name="java">Java<br> <input type="checkbox" name="cmasmas">C++<br> <input type="checkbox" name="c">C<br> <input type="checkbox" name="csharp">C#<br> <input type="submit" value="Enviar"> </form> </body> </html>
Pgina 62
[HTML]
IDSYSTEMS 2013
Ejercicio 43 - Formulario - input type="radio"

Problema de HTML: Solicitar el ingreso del nombre de una persona y el mximo nivel en estudios alcanzado (sin estudios, estudios primarios, estudios secundarios o estudios universitarios) Ulitilzar controles de tipo radio para la seleccin de estudios realizados. <html> <head> <title>Prueba de formulario</title> </head> <body> <form action="/registrardatos.php" method="post"> Ingrese su nombre: <input type="text" name="nombre" size="30"><br> Seleccione el mximo nivel de estudios que tiene: <br> <input type="radio" name="estudios" value="1">Sin estudios<br> <input type="radio" name="estudios" value="2">Primario<br> <input type="radio" name="estudios" value="3">Secundario<br> <input type="radio" name="estudios" value="4">Universitario<br> <input type="submit" value="Enviar"> </form> </body> </html>
Pgina 63
[HTML]
IDSYSTEMS 2013
Ejercicio 44 - Formulario - select (cuadro de seleccin individual)

Problema de HTML: Confeccionar un formulario que solicite cargar el nombre de una persona y el pais donde vive, este ltimo elemento mediante un control de tipo select permitir seleccionar el pais. (Agregue la propiedad size al elemento select con el valor 5) <html> <head> <title>Prueba de formulario</title> </head> <body> <form action="/registrardatos.php" method="post"> Ingrese su nombre: <input type="text" name="nombre" size="30"><br> Seleccione su pais: <select name="pais"> <option value="1">Argentina</option> <option value="2">Espaa</option> <option value="3">Mxico</option> <option value="4">Guatemala</option> <option value="5">Honduras</option> <option value="7">El Salvador</option> <option value="8">Venezuela</option> <option value="9">Colombia</option> <option value="10">Cuba</option> <option value="11">Bolivia</option> <option value="13">Per</option> <option value="14">Ecuador</option> <option value="15">Paraguay</option> <option value="16">Uruguay</option> <option value="17">Chile</option> </select> <br> <input type="submit" value="Enviar"> </form> </body> </html>
Pgina 64
[HTML]
IDSYSTEMS 2013
Ejercicio 45 -
Formulario - select (cuadro de seleccin mltiple)
Problema de HTML: Confeccionar un cuadro de seleccin mltiple para elegir colores de una lista. Permitir la seleccin de varios colores. <html> <head> <title>Prueba de formulario</title> </head> <body> <form action="/registrardatos.php" method="post"> Seleccione uno o varios colores (Presione Ctrl para seleccionar varios colores)<br> <select name="colores[]" size="4" multiple> <option value="1">Rojo</option> <option value="2">Verde</option> <option value="3">Azul</option> <option value="4">Amarillo</option> <option value="5">Blanco</option> <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>
Ejercicio 46 -
Formulario - select (agrupamiento de opciones)
Problema de HTML: Confeccionar una pgina que muestre un control de tipo select. Agrupar las opciones en dos grupos, en uno las frutas y en otro las verduras. Utilizar el elemento optgroup para el agrupamiento. <html> <head> <title>Prueba de formulario</title> </head> CUADERNO DE EJERCICIOS Y PRACTICAS Pgina 65
[HTML]
<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>
IDSYSTEMS 2013
Pgina 66
[HTML]
IDSYSTEMS 2013
Ejercicio 47 - Formulario button

Problema de HTML: 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>
Ejercicio 48 - Formulario - input type="button"

Problema de HTML: Confeccionaremos una pgina que muestre el teclado de una calculadora. Utilizar 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> <input type="button" name="boton4" value=" 4 "> <input type="button" name="boton5" value=" 5 "> CUADERNO DE EJERCICIOS Y PRACTICAS Pgina 67
[HTML]
<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>
IDSYSTEMS 2013
Ejercicio 49 -
Formulario - input type="file"
Problema de HTML: 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> CUADERNO DE EJERCICIOS Y PRACTICAS Pgina 68
[HTML]
</html>
IDSYSTEMS 2013
Ejercicio 50 - Formulario - input type="hidden"

Problema de HTML: 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>
Ejercicio 51 - Formulario - agrupamiento de controles.

Problema de HTML: 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"> CUADERNO DE EJERCICIOS Y PRACTICAS Pgina 69
[HTML]
<fieldset> <legend>Datos personales</legend> Apellido y nombre: <input type="text" name="nombre" size="30"><br> Documento de identidad: <input type="text" name="dni" size="8"><br> Fecha de nacimiento: <input type="text" name="fechanacimiento" size="12"><br> Direccin: <input type="text" name="direccionpersona" size="30"><br> </fieldset> <fieldset> <legend>Datos Laborales</legend> Nombre de la empresa: <input type="text" name="nombreempresa" size="30"><br> Actividad: <input type="text" name="actividad" size="50"><br> Direccin: <input type="text" name="direccionempresa" size="30"><br> </fieldset> <input type="submit" value="Enviar"> </form> </body> </html>
IDSYSTEMS 2013
Pgina 70
[HTML]
IDSYSTEMS 2013
Ejercicio 52 - Formulario - controles con valores iniciales.

Problema de HTML: Confeccione un formulario que solicite el ingreso del nombre de una persona. Luego que seleccione si es mayor de edad o no (por defecto inicializar en si),seguidamente el telfono (cargar por defecto 453-) y por ltimo en un textarea solicitar que ingrese comentarios. <html> <head> <title>Prueba de formulario</title> </head> <body> <form action="/registrardatos.php" method="post"> Apellido y nombre: <input type="text" name="nombre" size="30"><br> Es mayor de edad?:<br> <input type="radio" name="radio1" checked value="si">Si<br> <input type="radio" name="radio1" value="no">No<br> Telefono: <input type="text" value="453-" name="telefono" size="15"><br> <textarea name="comentarios" rows="5" cols="40">Ingrese aqui sus comentarios</textarea><br> <input type="submit" value="Enviar"> </form> </body> </html>
Ejercicio 53 -
Formulario - orden de foco de controles.
Problema de HTML: 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) CUADERNO DE EJERCICIOS Y PRACTICAS Pgina 71
[HTML]
IDSYSTEMS 2013
<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"> <br> <input type="submit" value="enviar" tabindex="10"> </form> </body> </html>
Ejercicio 54 -
Formulario - Inhabilitar controles.
Problema de HTML: Confeccionar un formulario que muestre tres controles de tipo radio. Mostrar los textos Nios, Adolescentes y Mayores. Deshabilitar el el elemento radio que corresponde a Nios. <html> <head> <title>Prueba de formulario</title> </head> <body> <form action="/registrardatos.php" method="post"> Seleccione la seccin donde desea ingresar: <br> <input type="radio" name="seccion" value="1" disabled>Nios<br> <input type="radio" name="seccion" value="2">Adolescentes<br> CUADERNO DE EJERCICIOS Y PRACTICAS Pgina 72
[HTML]
<input type="radio" name="seccion" value="3">Mayores<br> <input type="submit" value="Enviar"> </form> </body> </html>
IDSYSTEMS 2013
Ejercicio 55 - Formulario - text/password y maxlength

Problema de HTML: 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> </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>
Pgina 73
[HTML]
IDSYSTEMS 2013
Ejercicio 56 - Formulario - text/password/textarea y readonly

Problema de HTML: 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> <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>
Ejercicio 57 - Formulario - Envo de datos mediante mail.

Problema de HTML: Confeccionar una pgina que permita hacer un reclamo de reparaciones y se enven los datos a una direccin de correo. Se debe poder ingresar el nombre, direccin y un comentario del problema. <html> <head> <title>Prueba de formulario</title> CUADERNO DE EJERCICIOS Y PRACTICAS Pgina 74
[HTML]
</head> <body> <h2>Reclamos</h2> <form action="mailto:reclamos@gmail.com" method="post" enctype="text/plain"> Ingrese su nombre: <input type="text" name="nombre" size="20"> <br> Ingrese su direccin: <input type="text" name="direccin" size="30"> <br> Informe del problema: <br> <textarea rows="5" cols="40" name="problema"></textarea> <br> <input type="submit" value="enviar"> </form> </body> </html>
IDSYSTEMS 2013
Ejercicio 58 - Formulario label

Problema de HTML: 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"> CUADERNO DE EJERCICIOS Y PRACTICAS Pgina 75
[HTML]
<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>
IDSYSTEMS 2013
Practica 37 Insertar elementos de formulario

1 Abrir el documento reservas.htm, de la carpeta originales/deportes del curso. 2 Guardar la pgina con el mismo nombre en tu directorio de ejercicios Mis documentos/ejercicios_html/deportes En dicho documento hay dos botones de opcin. 3 Modificar el primer botn de opcin para que tenga el valor si, y est activado inicialmente. 4 Modificar el segundo botn de opcin para que tenga el valor no.
[HTML] 5 Guardar los cambios y comprobar el funcionamiento en un navegador.
IDSYSTEMS 2013

1 Abrir el documento pedidos.htm, de la carpeta originales/flores del curso. 2 Guardar la pgina con el mismo nombre en tu directorio de ejercicios Mis documentos/ejercicios_html/flores 3 Aadir el formulario que aparece a continuacin. El elemento de entrada llamado cuenta debe ser un campo de contrasea, que permita escribir y mostrar a la vez 20 caracteres.
Practica 38 - Formulario - <form>

Problema de HTML:Confeccionar un formulario que solicite el ingreso del nombre de una persona y su edad. Luego llamar a la pgina "/registrardatos.php" para que imprima en pantalla los valores ingresados. Disponer un botn de tipo submit para el envo de los datos.
Practica 39 - Formulario - input type="text"/ input type="password"

Problema de HTML: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)
Practica 40 - Formulario textarea

Problema de HTML: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) CUADERNO DE EJERCICIOS Y PRACTICAS Pgina 77
[HTML]
IDSYSTEMS 2013
Practica 41 - Formulario - input type="checkbox"

Problema de HTML:Confeccione un formulario que solicite el ingreso de un mail, una clave y luego muestre una serie de ttulos de pelculas con su respectivo checkbox. Disponer tambin del botn de tipo submit para el envo de datos al servidor.
Practica 42 - Formulario - input type="radio"

Problema de HTML:Confeccionar un formulario que solicite cual sistema operativo utiliza ms (linux o window)
Practica 43 - Formulario - select (cuadro de seleccin individual)

Problema de HTML:Confeccionar un formulario que solicite el ingreso del nombre de una persona y permita votar el sitio. Mediante un cuadro de seleccin el visitante puede elegir entre las siguientes opciones: Excelente, Muy Bueno, Bueno, Regular y Malo.
Practica 44 -
Formulario - select (cuadro de seleccin mltiple)
Problema de HTML:Confeccionar un formulario que muestre en un control select un serie de mail. Luego permitir que el visitante seleccione uno o varios mail del cuadro de seleccin.
Practica 45 -
Formulario - select (agrupamiento de opciones)
Problema de HTML:Confeccione un control de tipo select con los nombres de paises de Amrica y Europa. Agrupe los paises por continente.
Practica 46 - Formulario button

Problema de HTML:Confeccionar un formulario que solicite el ingreso del nombre de usuario y su clave. Disponer un botn para subir los datos al servidor (en el botn escribir el texto: "Ingreso al" y en la lnea siguiente "sitio")
Practica 47 - Formulario - input type="button"

Problema de HTML:Confeccionar una pgina que muestre una pregunta y luego tres respuestas posibles. Al lado de cada respuesta disponer un botn creado con el elemento input inicializando la propiedad type con el valor="button"
Pgina 78
[HTML]
IDSYSTEMS 2013
Practica 48 -
Formulario - input type="file"
Problema de HTML:Confeccionar un formulario que solicite y enve al servidor dos archivos.
Practica 49 - Formulario - agrupamiento de controles.

Problema de HTML:Confeccionar un formulario que permita solicitar pizzas a domicilio. Agrupar los controles aquellos relacionados con el cliente y los referentes al pedido.
Practica 50 - Formulario - controles con valores iniciales.

Problema de HTML:Confeccione un formulario de un libro de visitas, se debe solicitar el nombre, mail, pais de origen (por defecto la opcion seleccionada debe ser "seleccione pais"), valoracin del sitio (malo,regular,bueno,muy bueno, excelente) por defecto debe estar seleccionado "bueno". Por ltimo disponer un textarea donde se puede ingresar los comentarios.
Practica 51 -
Formulario - orden de foco de controles
Problema de HTML:Definir una matriz de 4 filas y 4 columnas de elementos de tipo text. Luego hacer la carga de todos los elementos del permetro y finalmente los cuatro elementos centrales.
Practica 52 -
Formulario - Inhabilitar controles.
Problema de HTML: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)
Practica 53 - Formulario - text/password y maxlength

Problema de HTML:Confeccionar un formulario que solicite el ingreso del nombre y apellido de una persona (hasta 40 caracteres), su edad (3 caracteres como mximo) y su documento nacional de identidad (hasta 8 caracteres)
Practica 54 - Formulario - text/password/textarea y readonly

Problema de HTML:Crear un controles de tipo text,password y textarea. Disponerlos todos de solo lectura.
Practica 55 - Formulario - Envo de datos mediante mail.

Problema de HTML:Confeccionar un formulario que permita solicitar pizzas a domicilio. Enviar el pedido a la direccin de correo pizzasya@gmail.com CUADERNO DE EJERCICIOS Y PRACTICAS Pgina 79
[HTML]
IDSYSTEMS 2013
Practica 56 - Formulario label

Problema de HTML:Confeccionar una pgina que permita calificar un sitio. Se debe ingresar el nombre y mediante un control de tipo select elegir un valor entre 1 y 10. Asociar elementos de tipo label a cada control.
Ejercicio 59 Insertar sonido de fondo

Primero aadiremos una msica de fondo a una pgina. 1 Abre el archivo menu.htm, que se encuentra en la carpeta animales. 2 Inserta una lnea en blanco debajo de la etiqueta <basefont>, y escribe el siguiente cdigo en ella: <bgsound src="varios/audioanimales.MID" loop="-1"> Con este cdigo estars estableciendo el archivo audioanimales.MID como sonido de fondo de la pgina, que se reproducir continuamente en un bucle infinito (loop="-1"). 3 Haz clic sobre la opcin Guardar del men Archivo. 4 Abre el documento menu.htm, que acabas de guardar, en un navegador, y comprueba que obtienes una pgina con sonido. No olvides encender unos altavoces que estn conectados a tu ordenador, para comprobar que el archivo de audio se reproduce correctamente. Ahora vamos a sustituir las palabras INICIO PERROS GATOS y CONSULTAS por botones Flash. 1 Abre otra vez el archivo menu.htm, que se encuentra en la carpeta animales. 2 Sustituye la palabra INICIO por el siguiente cdigo: <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0" width="100" height="23"> <param name="movie" value="binicio.swf"> <param name="quality" value="high"> <embed src="binicio.swf" width="100" height="23" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" > </embed> </object> Nota: se ha escrito en el color de los valores del usuario unicamente los valores que cambian al insertar un botn Flash. 3 Sustituye la palabra PERROS por el siguiente cdigo:
[HTML]
IDSYSTEMS 2013
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0" width="100" height="23"> <param name="movie" value="bperros.swf"> <param name="quality" value="high"> <embed src="bperros.swf" width="100" height="23" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" > </embed> </object> 4 Sustituye la palabra GATOS por el siguiente cdigo: <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0" width="100" height="23"> <param name="movie" value="bgatos.swf"> <param name="quality" value="high"> <embed src="bgatos.swf" width="100" height="23" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" base="."> </embed> </object> 5 Sustituye la palabra CONSULTAS por el siguiente cdigo: <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0" width="100" height="23"> <param name="movie" value="bconsultas.swf"> <param name="quality" value="high"> <embed src="bconsultas.swf" width="100" height="23" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" base="."> </embed> </object> 6 Haz clic sobre la opcin Guardar del men Archivo. 7 Abre el documento menu.htm, que acabas de guardar, en un navegador.
Practica 57 Insertar elementos multimedia

1 Abrir el documento quienes.htm, de la carpeta deportes.
[HTML]
IDSYSTEMS 2013
2 Despus del prrafo Somos una cadena... insertar la animacin Flash deportes.swf que se encuentra en la carpeta imagenes de la carpeta deportes, con calidad alta. 3 Guardar los cambios y comprobar el funcionamiento en un navegador.

1 Abrir el documento menu.htm, de la carpeta deportes. 2 Sustituye las palabras QUIENES SOMOS, DONDE ESTAMOS, INSTALACIONES y RESERVAS por los botones respectivos bquienes.swf, bdonde.swf, binstalaciones.swf, breservas.swf con calidad alta, los botones tienen 116 y 32 pixeles de ancho y alto respectivamente. Los botones los tenemos en la carpeta imagenes de la carpeta deportes. 3 Guardar los cambios y comprobar el funcionamiento en un navegador.

1 Abrir el documento menu.htm, de la carpeta flores. 2 Insertar el archivo audioflores.mid, que se encuentra dentro de la carpeta varios, para que sea sonido de fondo del documento, y se reproduzca automticamente una sola vez. 3 Sustituye las palabras INICIO, PRODUCTOS y PEDIDOS por los botones respectivos inicio.swf, productos.swf, pedidos.swf con calidad alta, los botones tienen 100 y 23 pixeles de ancho y alto respectivamente y se encuentran en la carpeta imagenes. 4 Guardar los cambios y comprobar el funcionamiento en un navegador.
Ejercicio 60 Modificar las propiedades de una capa

1 Si no tienes abierto el Bloc de notas, brelo para realizar el ejercicio. 2 Haz clic sobre el men Archivo. 3 Haz clic sobre la opcin Abrir. Se abrir una nueva ventana. 4 En Tipo:, elige Todos los archivos.
Pgina 82
[HTML]
IDSYSTEMS 2013
5 Selecciona el archivo gatos.htm, que se encuentra en la carpeta animales, y pulsa sobre el botn Aceptar. 6 Aade a la pgina detrs de la etiqueta </table> el siguiente cdigo: <div id="gatosemana" style="position:absolute; width:320px; height:320px; z-index:1; left: 10px; top: 69px; background-color:#FFFF99; layer-background-color:#FFFF99;" > <p align="center"> </p> <p align="center"><font size="4">Este es Golfo y es de Valencia</font></p> <p align="center"><img src="imagenes/gato1.gif" ></p> <p align="center"><a href="#"><font color="#000000" size="4">Cerrar</font></a></p> </div> Este cdigo define una capa llamada gatosemana, de 320 pxeles de anchura (width:) y altura (height:), situada a 10 pxeles del margen izquierdo (left), y a 69 pxeles del margen superior (top). La capa se mostrar a la distancia de los mrgenes especificada mediante width y height por el atributo position:absolute. La capa ser de color amarillo (background-color:#FFFF99; layer-background-color:#FFFF99;) 7 Haz clic en la opcin Guardar del men Archivo. 8 Abre el documento gatos.htm, que acabas de guardar, en un navegador, y comprueba que obtienes una pgina como la siguiente
Pgina 83
[HTML]
IDSYSTEMS 2013
9 Esta capa no la queremos ver de momento por eso aade visibility: hidden; despus de layerbackground-color:#FFFF99;. 10 Haz clic en la opcin Guardar del men Archivo. 11 Abre el documento gatos.htm, que acabas de guardar, en un navegador, y comprueba que la capa ya no aparece.
Practica 58 Modificar las propiedades de una capa

1 Abrir el documento quienes.htm, de la carpeta deportes. 2 Insertar el ltimo prrafo Este mes... dentro de una capa de 509 por 85 pxeles, que se llame capaoferta, que tenga como color de fondo el color #CCFF99 y que se muestre en la posicin en la que ha sido insertada dentro del cdigo. 3 Guardar los cambios y comprobar el funcionamiento en un navegador, te debe quedar algo as.

1 Abrir el documento menu.htm, de la carpeta flores. 2 Cambiar el texto de la oferta y colocarlo en una capa de 182px por 62px con un fondo color #FFFF66 y que sea visible. Incluir el argumento visibility para que cada semana segn queramos la oferta o no
[HTML]
IDSYSTEMS 2013
slo tengamos que cambiar el valor del argumento en vez de escribir otra vez el texto de la oferta con sus colores. La pgina debera quedar as.
Ejercicio 61 Llamadas a javascript

1 Si no tienes abierto el Bloc de notas, brelo para realizar el ejercicio. 2 Abre el archivo gatos.htm, que se encuentra en la carpeta animales. 3 Copia el siguiente cdigo delante la etiqueta </head>: <script language="JavaScript" type="text/JavaScript"> <!-function MM_reloadPage(init) { //reloads the window if Nav4 resized if (init==true) with (navigator) {if ((appName=="Netscape")&&(parseInt(appVersion)==4)) { document.MM_pgW=innerWidth; document.MM_pgH=innerHeight; onresize=MM_reloadPage; }} else if (innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH) location.reload(); } MM_reloadPage(true); function MM_findObj(n, d) { //v4.01 var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) { d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);} if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n]; for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document); if(!x && d.getElementById) x=d.getElementById(n); return x; } function MM_showHideLayers() { //v6.0 var i,p,v,obj,args=MM_showHideLayers.arguments; for (i=0; i<(args.length-2); i+=3) if ((obj=MM_findObj(args[i]))!=null) { v=args[i+2]; if (obj.style) { obj=obj.style; v=(v=='show')?'visible':(v=='hide')?'hidden':v; } obj.visibility=v; } } //--> </script>
Pgina 85
[HTML]
IDSYSTEMS 2013
4 Busca la lnea <a href="#"><img src="imagenes/gatito.gif" alt="gatito" border="0"></a>. Este cdigo hace referencia a la imagen gatito.gif, que tiene borde 0 y el texto alternativo gatito. Al mismo tiempo, la imagen tiene asociado un vnculo vaco (<a href="#">). Aade onClick="MM_showHideLayers('gatosemana','','show')" despus de border="0". Con este cdigo, estars llamando a la funcin javascript MM_showHideLayers, que se encuentra al principio del documento. Esta funcin se encarga de cambiar la visibilidad de las capas. En este caso, le ests pasando como parmetros el nombre de la capa que tiene que mostrar gatosemana y lo que tiene que hacer show (mostrar) , por lo que la funcin cambiar la visibilidad de la capa gatosemana por el valor show (mostrar). La llamada a la funcin se realizar cuando hagas clic sobre la imagen (onClick). 5 Aade antes de la etiqueta </td> el siguiente cdigo <p align="center"><font size="2">Pulsa sobre la imagen para ver el gato de la semana</font></p> para que el texto aparezca debajo de la imagen. 6 Busca la lnea <p align="center"><a href="#"><font color="#000000" size="4">Cerrar</font></a></p>, que se encuentra casi al final del documento. Este cdigo hace referencia a un vnculo vaco (<a href="#">) con el texto Cerrar. Aade onClick="MM_showHideLayers('gatosemana','','hide')" despus de size="4" dentro de la etiqueta <font. Al igual que en el punto anterior, con este cdigo, estars llamando a la funcin javascript MM_showHideLayers, pero para cambiar la visibilidad de la capa gatosemana por el valor hide (ocultar). La llamada a la funcin se realizar cuando hagas clic sobre el texto (onClick). De esta manera cuando hagas clic sobre el texto cerrar se esconder la capa. 7 Haz clic sobre el men Archivo. 8 Haz clic sobre la opcin Guardar. 9 Abre el documento gatos.htm, que acabas de guardar, en un navegador, y comprueba que obtienes una pgina como la que aparece en la imagen. Comprueba cmo al pulsar sobre la imagen del gato se muestra la capa, y cmo al pulsar sobre el texto Cerrar, que se encuentra en la capa, sta vuelve a ocultarse.
Pgina 86
[HTML]
IDSYSTEMS 2013
Practica 59 Llamadas a javascript

1 Abrir el documento menu.htm, de la carpeta deportes. 2 Establecer una llamada a la funcin mensaje, para que cuando se pulse sobre la imagen email.gif se ejecute dicha funcin. La funcin tiene el siguiente cdigo: function mensaje() { //v1.0 alert('No olvides mandarnos tus sugerencias.'); } La llamada a la funcin se deber escribir en la etiqueta <img de la imagen. 3 Guardar los cambios y comprobar el funcionamiento en un navegador.

1 Abrir el documento pedidos.htm, de la carpeta flores. 2 Establecer una llamada a la funcin mensaje, para que cuando se pulse sobre el botn Enviar se ejecute dicha funcin y aparezca el mensaje Recibirs un aviso cuando se haya realizado la entrega del pedido.
[HTML] 3 Guardar los cambios y comprobar el funcionamiento en un navegador.
IDSYSTEMS 2013
Ejercicio 62 Crear hoja de estilos

1 Abre el documento conestilos.htm, de la carpeta originales/animales del curso. 2 Guardar la pgina con el mismo nombre en tu directorio de ejercicios Mis documentos/ejercicios_html/animales 3 Abre el documento conestilos.htm en un navegador. Comprueba que la pgina solo muestra una lnea de texto, y que el fondo de la pgina es blanco. Cierra el navegador. 4 Abre el Bloc de notas si no lo tienes abierto o sino, abre un nuevo documento en blanco. 5 Inserta el siguiente cdigo en el documento en blanco: body { background-color: #FFCC00; } .mitexto { text-transform: uppercase; color: #FF0000; } Con este texto se define que el color del documento ser #FFCC00 (calabaza) al estar especificado para la etiqueta body. El estilo mitexto no se corresponde con ninguna etiqueta en concreto. Lo que hace es convertir el texto en maysculas (uppercase) y que sea de color #FF0000 (rojo). 6 Haz clic sobre el men Archivo. 7 Haz clic sobre la opcin Guardar. Guarda el documento con el nombre estilosa.txt, dentro de la carpeta Mis documentos/ejercicios_html/animales. 8 Abre de nuevo el documento conestilos.htm en un navegador, y comprueba que obtienes una pgina como la que aparece a continuacion.
Pgina 88
[HTML]
IDSYSTEMS 2013
Ejercicio 63 - Conceptos bsicos de hojas de estilo.

Problema de HTML: Confeccionar una pgina que contenga un ttulo de nivel 1 de color azul (#0000ff) y un prrafo de color gris oscuro (#888888) y fondo amarillo claro (#ffffdd). <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"> <title>ttulo pgina</title> </head> <body> <h1 style="color:#0000ff">Noticias del da.</h1> <p style="color:#888888;background-color:#ffffdd"> Aqu la descripcin de la noticia. Aqu la descripcin de la noticia. Aqu la descripcin de la noticia. Aqu la descripcin de la noticia. Aqu la descripcin de la noticia. Aqu la descripcin de la noticia. Aqu la descripcin de la noticia. Aqu la descripcin de la noticia. Aqu la descripcin de la noticia. Aqu la descripcin de la noticia. Aqu la descripcin de la noticia. Aqu la descripcin de la noticia. Aqu la descripcin de la noticia. Aqu la descripcin de la noticia. Aqu la descripcin de la noticia. Aqu la descripcin de la noticia. Aqu la descripcin de la noticia. Aqu la descripcin de la noticia. CUADERNO DE EJERCICIOS Y PRACTICAS Pgina 89
[HTML]
Aqu la descripcin de la noticia. </p> </body> </html>
IDSYSTEMS 2013
Ejercicio 64 - Propiedades relacionadas al texto en CSS

Problema de HTML: Confeccionar una pgina que contenga un ttulo de nivel 2 (h2) centrado y luego bloques donde muestre un nombre de una persona subrayado y un prrafo con un color de fondo y de las letras. Indentar la primer linea de cada prrafo.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"> <title>ttulo pgina</title> </head> <body> <h2 style="color:#0000ff;text-align:center">Comentarios</h2> <h3 style="text-decoration:underline">Luis Barrionuevo</h3> <p style="color:#888888;background-color:#ffffdd;text-indent:20px"> 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.
[HTML] Aqu comentarios. Aqu comentarios. Aqu comentarios. Aqu comentarios. </p> <h3 style="text-decoration:underline">Ana Rodriguez</h3> <p style="color:#888888;background-color:#ffffdd;text-indent:20px"> 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. Aqu comentarios. </p> </body> </html>
IDSYSTEMS 2013
Pgina 91
[HTML]
IDSYSTEMS 2013
Ejercicio 65 - Elementos HTML <div> y <span>

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

Problema de HTML: Confeccionar una pgina que contenga un ttulo de nivel 2 con fuente Arial, un prrafo con fuente de tipo Times New Roman de 14 pxeles en negrita y una serie de prrafos agrupados en un div con tamao de fuente de 12 pxeles de tipo Verdana:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"> <title>ttulo pgina</title>
[HTML] </head> <body> <h2 style="font-family:Arial">Ttulo principal</h2> <p style="font-family:Times New Roman;font-size:14px;font-weight:bolder"> Prrafo en negrita. Prrafo en negrita. Prrafo en negrita. Prrafo en negrita. Prrafo en negrita. Prrafo en negrita. Prrafo en negrita. Prrafo en negrita. Prrafo en negrita. Prrafo en negrita. Prrafo en negrita. Prrafo en negrita. Prrafo en negrita. Prrafo en negrita. Prrafo en negrita. Prrafo en negrita. Prrafo en negrita. Prrafo en negrita. Prrafo en negrita. Prrafo en negrita. Prrafo en negrita. Prrafo en negrita. Prrafo en negrita. Prrafo en negrita. Prrafo en negrita. Prrafo en negrita. Prrafo en negrita. Prrafo en negrita. Prrafo en negrita. </p> <div style="font-family:Verdana;font-size:12px"> <p> Primer prrafo. Primer prrafo. Primer prrafo. Primer prrafo. Primer prrafo. Primer prrafo. Primer prrafo. Primer prrafo. Primer prrafo. Primer prrafo.
IDSYSTEMS 2013
Pgina 94
[HTML] Primer prrafo. Primer prrafo. Primer prrafo. Primer prrafo. Primer prrafo. Primer prrafo. Primer prrafo. Primer prrafo. Primer prrafo. Primer prrafo. Primer prrafo. Primer prrafo. Primer prrafo. Primer prrafo. Primer prrafo. Primer prrafo. Primer prrafo. Primer prrafo. Primer prrafo. Primer prrafo. Primer prrafo. Primer prrafo. Primer prrafo. Primer prrafo. Primer prrafo. Primer prrafo. Primer prrafo. Primer prrafo. Primer prrafo. </p> <p> Segundo prrafo. Segundo prrafo. Segundo prrafo. Segundo prrafo. Segundo prrafo. Segundo prrafo. Segundo prrafo. Segundo prrafo. Segundo prrafo. Segundo prrafo. Segundo prrafo. Segundo prrafo. Segundo prrafo. Segundo prrafo. Segundo prrafo.
IDSYSTEMS 2013
Pgina 95
[HTML] Segundo prrafo. Segundo prrafo. Segundo prrafo. Segundo prrafo. Segundo prrafo. Segundo prrafo. Segundo prrafo. Segundo prrafo. Segundo prrafo. Segundo prrafo. </p> </div> </body> </html>
IDSYSTEMS 2013
Ejercicio 67 - Declaracin DOCTYPE. HTML Transitional

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

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

Problema:Confeccionar una ventana que contenga dos frames verticales. Disponer dos hipervnculos en el frame de la izquierda que al ser presionados actualicen el archivo a mostrar por el frame de la derecha. Definir el elemento DOCTYPE para cada pgina. Luego validar cada pgina en el sitio de validator.w3.org
<!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>
Ejercicio 70 - Validacin de la pgina a travs de un enlace.

Problema:Confeccionar una pgina que muestre los nombres de 5 lenguajes de programacin separados por un guin. Agregar un enlace a la pgina de validacin de HTML.
Pgina 97
[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>
IDSYSTEMS 2013
Practica 60 Aplicar estilos

1 Abrir el documento estilosd.txt, de la carpeta originales/deportes del curso. 2 Guardar la pgina con el mismo nombre en tu directorio de ejercicios Mis documentos/ejercicios_html/deportes 3 Abrir el documento conestilos.htm, de la carpeta originales/deportes del curso. 4 Guardar la pgina con el mismo nombre en tu directorio de ejercicios Mis documentos/ejercicios_html/deportes 5 Aplicar el estilo llamado mitexto al primer prrafo, y el estilo otrotexto al segundo prrafo, los estilos estn definidos en la hoja de estilos estilosd.txt. 6 Guardar los cambios y comprobar el funcionamiento en un navegador.

1 Abrir el documento estilosf.txt, de la carpeta originales/flores del curso.
Pgina 98
[HTML] 2 Guardar la pgina con el mismo nombre en tu directorio de ejercicios Mis documentos/ejercicios_html/flores 3 Abrir el documento conestilos.htm, de la carpeta originales/flores del curso. 4 Guardar la pgina con el mismo nombre en tu directorio de ejercicios Mis documentos/ejercicios_html/flores
IDSYSTEMS 2013
5 Aplicar el estilo palabra a la palabra fondo, (el estilo se encuentra definido en la hoja de estilos estilosf.txt). 6 Guardar los cambios y comprobar el funcionamiento en un navegador.
Practica 61 - Conceptos bsicos de hojas de estilo.

Problema de HTML:Sabemos que hay una propiedad en CSS que define el tamao de la fuente en pxeles llamada font-size. Luego cree varios prrafos con fuentes decrecientes, el primero definirlo con el siguente valor: style="font-size:30px"
Practica 62 - Propiedades relacionadas al texto en CSS

Problema de HTML:Confeccionar una pgina que muestre el ttulo de una noticia. Seguidamente un prrafo con el resumen de la noticia y finalmente la noticia completa. Utilizar las propiedades relacionadas al texto vistas para realzar la noticia en la pgina.
Practica 63 - Elementos HTML <div> y <span>

Problema de HTML:Confeccionar una pgina que contenga dos divisiones con una serie de prrafos cada una. Disponer color de fondo distinto para cada seccin. En la segunda seccin mostrar el mismo texto de la primera seccin pero con algunas palabras tachadas.
Practica 64 - Propiedades relacionadas a las fuentes en CSS

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

Problema de HTML:Confeccione una pgina que contenga una lista anidada y una tabla. Hacer la pgina que valide con HTML 4.01 transitorio. Luego copie y pegue el cdigo HTML en el sitio de validacin validator.w3.org CUADERNO DE EJERCICIOS Y PRACTICAS Pgina 99
[HTML]
IDSYSTEMS 2013
Practica 66 - Declaracin DOCTYPE. HTML Estricto

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

Problema:Confeccionar una pgina con dos frame horizontales. En la parte superior definir un frame con 100 pxeles de alto. Hacer que el mismo no se pueda redimensionar, no mustre la barra de scroll y no mustre el borde. Luego validar cada pgina en el sitio de validator.w3.org
Pgina 100
[HTML]
IDSYSTEMS 2013
HTML 5
Ejercicio 71 - DOCTYPE
Problema: Confeccionar una pgina que muestre el DOCTYPE propuesto para el HTML5. <!DOCTYPE HTML> <html> <head> </head> <body> <p>Si vemos el cdigo fuente de esta pgina veremos la forma de declarar el DOCTYPE en HTML5.</p> </body> </html>
Ejercicio 72 CANVAS
Problema: Obtener el contexto grfico del elemento canvas y seguidamente dibujar un cuadrado de color rojo. <!DOCTYPE HTML> <html> <head> <script type="text/javascript"> function retornarLienzo(x) { var canvas = document.getElementById(x); if (canvas.getContext) { var lienzo = canvas.getContext("2d"); return lienzo; } else return false; } function dibujar() { var lienzo=retornarLienzo("lienzo1"); CUADERNO DE EJERCICIOS Y PRACTICAS Pgina 101
[HTML]
if (lienzo) { lienzo.fillStyle = "rgb(200,0,0)"; lienzo.fillRect (10, 10, 100, 100); } } </script> </head> <body onLoad="dibujar()"> <canvas id="lienzo1" width="300" height="200"> Su navegador no permite utilizar canvas. </canvas> </body> </html>
IDSYSTEMS 2013
Ejercicio 73 - CANVAS (dibujar lneas)

Problema: Dibujar dos lneas que formen la letra "V". <!DOCTYPE HTML> <head> <script type="text/javascript"> function retornarLienzo(x) { var canvas = document.getElementById(x); if (canvas.getContext) { var lienzo = canvas.getContext("2d"); return lienzo; } else return false; } function dibujar() { CUADERNO DE EJERCICIOS Y PRACTICAS Pgina 102
[HTML]
var lienzo=retornarLienzo("lienzo1"); if (lienzo) { lienzo.strokeStyle = "rgb(200,0,0)"; //Inicio de camino lienzo.beginPath(); lienzo.moveTo(0,0); lienzo.lineTo(150,300); lienzo.lineTo(300,0); //Trazar linea lienzo.stroke(); } } </script> </head> <body onLoad="dibujar()"> <canvas id="lienzo1" width="300" height="300"> Su navegador no permite utilizar canvas. </canvas> </body> </html>
IDSYSTEMS 2013
Ejercicio 74 - CANVAS (dibujar rectngulo - permetro)

Problema: Dibujar un rectngulo ubicado en la columna 50 y fila 10 con un ancho de 200 pxeles y 100 pxeles de altura <!DOCTYPE HTML> <html> <head> <script type="text/javascript"> function retornarLienzo(x) { var canvas = document.getElementById(x); CUADERNO DE EJERCICIOS Y PRACTICAS Pgina 103
[HTML]
if (canvas.getContext) { var lienzo = canvas.getContext("2d"); return lienzo; } else return false; } function dibujar() { var lienzo=retornarLienzo("lienzo1"); if (lienzo) { lienzo.strokeStyle = "rgb(0,0,255)"; lienzo.strokeRect(50,10,200,100); } } </script> </head> <body onLoad="dibujar()"> <canvas id="lienzo1" width="300" height="300"> Su navegador no permite utilizar canvas. </canvas> </body> </html>
IDSYSTEMS 2013
Ejercicio 75 - CANVAS (estilos de lnea)

Problema: Confeccionar una serie de lneas que muestren como afectan las propiedades lineWidth, lineCap y lineJoin. <!DOCTYPE HTML> <html> <head> <script type="text/javascript"> function retornarLienzo(x) { var canvas = document.getElementById(x); if (canvas.getContext) { var lienzo = canvas.getContext("2d"); CUADERNO DE EJERCICIOS Y PRACTICAS Pgina 104
[HTML]
return lienzo; } else return false; } function dibujar() { var lienzo=retornarLienzo("lienzo1"); if (lienzo) { lienzo.beginPath(); lienzo.strokeStyle="rgb(255,0,0)"; lienzo.lineWidth=7; lienzo.moveTo(10,5); lienzo.lineTo(10,295); lienzo.stroke(); lienzo.beginPath(); lienzo.strokeStyle="rgb(0,255,0)"; lienzo.lineCap="butt"; lienzo.moveTo(30,5); lienzo.lineTo(30,295); lienzo.stroke(); lienzo.lineCap="round"; lienzo.beginPath(); lienzo.moveTo(50,5); lienzo.lineTo(50,295); lienzo.stroke(); lienzo.lineCap="square"; lienzo.beginPath(); lienzo.moveTo(70,5); lienzo.lineTo(70,295); lienzo.stroke(); lienzo.beginPath(); lienzo.strokeStyle="rgb(0,0,255)"; lienzo.lineJoin="bevel"; lienzo.moveTo(100,90); lienzo.lineTo(130,10); lienzo.lineTo(160,90); lienzo.stroke(); lienzo.beginPath(); lienzo.lineJoin="round"; lienzo.moveTo(100,180); lienzo.lineTo(130,100); lienzo.lineTo(160,180); lienzo.stroke(); lienzo.beginPath(); lienzo.lineJoin="miter"; lienzo.moveTo(100,270); lienzo.lineTo(130,190); CUADERNO DE EJERCICIOS Y PRACTICAS
IDSYSTEMS 2013
Pgina 105
[HTML]
lienzo.lineTo(160,270); lienzo.stroke(); } } </script> </head> <body onLoad="dibujar()"> <canvas id="lienzo1" width="300" height="300"> Su navegador no permite utilizar canvas. </canvas> </body> </html>
IDSYSTEMS 2013
Ejercicio 76 - CANVAS (rectngulo relleno)

Problema: Dibujar un rectngulo relleno de color rojo. <!DOCTYPE HTML> <html> <head> <script type="text/javascript"> function retornarLienzo(x) { var canvas = document.getElementById(x); if (canvas.getContext) { var lienzo = canvas.getContext("2d"); return lienzo; } else return false; } function dibujar() { CUADERNO DE EJERCICIOS Y PRACTICAS Pgina 106
[HTML]
var lienzo=retornarLienzo("lienzo1"); if (lienzo) { lienzo.fillStyle="rgb(255,0,0)"; lienzo.fillRect(10,10,200,100); } } </script> </head> <body onLoad="dibujar()"> <canvas id="lienzo1" width="300" height="300"> Su navegador no permite utilizar canvas. </canvas> </body> </html>
IDSYSTEMS 2013
Ejercicio 77 - CANVAS (borrar una regin)

Problema: Confeccionar un programa que dibuje un cuadrado rojo de 300 pxeles de lado y luego borrar tres cuadraditos en la diagonal principal del cuadrado rojo <!DOCTYPE HTML> <html> <head> <script type="text/javascript"> function retornarLienzo(x) { var canvas = document.getElementById(x); if (canvas.getContext) { var lienzo = canvas.getContext("2d"); return lienzo; } else return false; } function dibujar() { var lienzo=retornarLienzo("lienzo1"); if (lienzo) { CUADERNO DE EJERCICIOS Y PRACTICAS Pgina 107
[HTML]
lienzo.fillStyle="rgb(255,0,0)"; lienzo.fillRect(0,0,300,300); lienzo.clearRect(10,10,20,20); lienzo.clearRect(140,140,20,20); lienzo.clearRect(270,270,20,20); } } </script> </head> <body onLoad="dibujar()"> <canvas id="lienzo1" width="300" height="300"> Su navegador no permite utilizar canvas. </canvas> </body> </html>
IDSYSTEMS 2013
Ejercicio 78 - CANVAS (dibujar varias lneas y rellenar la figura creada)

Problema: Dibujar un tringulo con el color de permetro azul y su interior de color rojo. El borde del permetro debe ser de 5 pxeles. <!DOCTYPE HTML> <html> <head> <script type="text/javascript"> function retornarLienzo(x) { var canvas = document.getElementById(x); if (canvas.getContext) { var lienzo = canvas.getContext("2d"); return lienzo; } else CUADERNO DE EJERCICIOS Y PRACTICAS Pgina 108
[HTML]
return false; } function dibujar() { var lienzo=retornarLienzo("lienzo1"); if (lienzo) { lienzo.fillStyle="rgb(255,0,0)"; lienzo.strokeStyle="rgb(0,0,255)"; lienzo.lineWidth=5; lienzo.beginPath(); lienzo.moveTo(150,10); lienzo.lineTo(10,290); lienzo.lineTo(290,290); lienzo.lineTo(150,10); lienzo.fill(); lienzo.stroke(); } } </script> </head> <body onLoad="dibujar()"> <canvas id="lienzo1" width="300" height="300"> Su navegador no permite utilizar canvas. </canvas> </body> </html>
IDSYSTEMS 2013
Ejercicio 79 - CANVAS (arcos rellenos y lineal)

Problema: Mostrar una serie de arcos lineales y cerrados. <!DOCTYPE HTML> <html> <head> CUADERNO DE EJERCICIOS Y PRACTICAS Pgina 109
[HTML]
IDSYSTEMS 2013
<script type="text/javascript"> function retornarLienzo(x) { var canvas = document.getElementById(x); if (canvas.getContext) { var lienzo = canvas.getContext("2d"); return lienzo; } else return false; } function dibujar() { var lienzo=retornarLienzo("lienzo1"); if (lienzo) { lienzo.strokeStyle="rgb(255,0,0)"; lienzo.beginPath(); lienzo.arc(100,100,50,0,Math.PI,true); lienzo.stroke(); lienzo.strokeStyle="rgb(0,255,0)"; lienzo.beginPath(); lienzo.arc(100,200,50,0,Math.PI,false); lienzo.stroke(); lienzo.fillStyle="rgb(0,0,288)"; lienzo.beginPath(); lienzo.arc(200,100,50,0,Math.PI,true); lienzo.fill(); lienzo.fillStyle="rgb(255,255,0)"; lienzo.beginPath(); lienzo.arc(200,200,50,0,Math.PI*2,true); lienzo.fill(); } } </script> </head> <body onLoad="dibujar()"> <canvas id="lienzo1" width="300" height="300"> Su navegador no permite utilizar canvas. </canvas> </body> </html>
Pgina 110
[HTML]
IDSYSTEMS 2013
Ejercicio 80 - CANVAS (curva de bezier)

Problema: Dibujar una curva de bzier. <!DOCTYPE HTML> <html> <head> <script type="text/javascript"> function retornarLienzo(x) { var canvas = document.getElementById(x); if (canvas.getContext) { var lienzo = canvas.getContext("2d"); return lienzo; } else return false; } function dibujar() { var lienzo=retornarLienzo("lienzo1"); if (lienzo) { lienzo.strokeStyle="rgb(255,0,0)"; lienzo.beginPath(); lienzo.moveTo(0,150); lienzo.bezierCurveTo(100,50,200,250,290,150); lienzo.stroke(); } } </script> </head> <body onLoad="dibujar()"> <canvas id="lienzo1" width="300" height="300"> CUADERNO DE EJERCICIOS Y PRACTICAS Pgina 111
[HTML]
Su navegador no permite utilizar canvas. </canvas> </body> </html>
IDSYSTEMS 2013
Ejercicio 81 - CANVAS (mtodo quadraticCurveTo)

Problema: Confeccionar un programa que muestre el tipo de curva que genera el mtodo quadraticCurveTo. <!DOCTYPE HTML> <html> <head> <script type="text/javascript"> function retornarLienzo(x) { var canvas = document.getElementById(x); if (canvas.getContext) { var lienzo = canvas.getContext("2d"); return lienzo; } else return false; } var fila=0; function dibujar() { var lienzo=retornarLienzo("lienzo1"); if (lienzo) { lienzo.clearRect(0,0,300,300); lienzo.strokeStyle="rgb(255,0,0)"; lienzo.beginPath(); lienzo.moveTo(0,150); lienzo.quadraticCurveTo(150,fila,300,150); lienzo.stroke(); fila++; if (fila>300) fila=0; CUADERNO DE EJERCICIOS Y PRACTICAS Pgina 112
[HTML]
} } function iniciar() { setInterval(dibujar,10); } </script> </head> <body onLoad="iniciar()"> <canvas id="lienzo1" width="300" height="300"> Su navegador no permite utilizar canvas. </canvas> </body> </html>
IDSYSTEMS 2013
Ejercicio 82 - CANVAS (graficar texto)

Problema: Confeccionar un programa que emplee los mtodos fillText y strokeText. <!DOCTYPE HTML> <html> <head> <script type="text/javascript"> function retornarLienzo(x) { var canvas = document.getElementById(x); if (canvas.getContext) { var lienzo = canvas.getContext("2d"); return lienzo; } else return false; } function dibujar() { var lienzo=retornarLienzo("lienzo1"); if (lienzo) { lienzo.fillStyle="rgb(255,0,0)"; lienzo.font="bold 25px Arial"; CUADERNO DE EJERCICIOS Y PRACTICAS Pgina 113
[HTML]
lienzo.fillText("Hola Mundo",150,50); lienzo.textAlign="center"; lienzo.fillText("Hola Mundo",150,100); lienzo.textAlign="right"; lienzo.fillText("Hola Mundo",150,150); var anchopx=lienzo.measureText("Hola Mundo"); lienzo.textAlign="start"; lienzo.fillText(anchopx.width,150,200); lienzo.strokeStyle="rgb(0,0,255)"; lienzo.strokeText("Fin",150,250); } } </script> </head> <body onLoad="dibujar()"> <canvas id="lienzo1" width="300" height="300"> Su navegador no permite utilizar canvas. </canvas> </body> </html>
IDSYSTEMS 2013
Ejercicio 83 - CANVAS (graficar imagenes)

Problema: Utilizar las distintas variantes como se puede llamar al mtodo drawImage. <!DOCTYPE HTML> <html> <head> <script type="text/javascript"> function retornarLienzo(x) { var canvas = document.getElementById(x); if (canvas.getContext) { CUADERNO DE EJERCICIOS Y PRACTICAS Pgina 114
[HTML]
var lienzo = canvas.getContext("2d"); return lienzo; } else return false; } function dibujar() { var lienzo=retornarLienzo("lienzo1"); if (lienzo) { lienzo.fillStyle="rgb(0,0,0)"; lienzo.fillRect(0,0,600,600); img1 = new Image(); img1.src = 'http://www.htmlya.com.ar/simulador/foto1.jpg'; img1.onload = function(){ lienzo.drawImage(img1,0,0); lienzo.drawImage(img1,300,0,50,50); lienzo.drawImage(img1,0,0,125,125,0,300,72,72); } } } </script> </head> <body onLoad="dibujar()"> <canvas id="lienzo1" width="600" height="600"> Su navegador no permite utilizar canvas. </canvas> </body> </html>
IDSYSTEMS 2013
Pgina 115
[HTML]
IDSYSTEMS 2013
Ejercicio 84 - CANVAS (transparencias)

Problema: Graficar dos cuadrados. El segundo graficarlo sobre el primero activando transparencias. <!DOCTYPE HTML> <html> <head> <script type="text/javascript"> function retornarLienzo(x) { var canvas = document.getElementById(x); if (canvas.getContext) { var lienzo = canvas.getContext("2d"); return lienzo; } else return false; } function dibujar() { var lienzo=retornarLienzo("lienzo1"); if (lienzo) { lienzo.fillStyle="rgb(255,0,0)"; lienzo.fillRect(10,10,50,50); lienzo.fillStyle="rgba(0,255,0,0.3)"; lienzo.fillRect(40,40,50,50); } } </script> </head> <body onLoad="dibujar()"> <canvas id="lienzo1" width="600" height="600"> Su navegador no permite utilizar canvas. </canvas> </body> </html>
Pgina 116
[HTML]
IDSYSTEMS 2013
Ejercicio 85 - CANVAS (sombras)

Problema: Confeccionar un programa que utilice las propiedades relacionadas a las sombras. <!DOCTYPE HTML> <html> <head> <script type="text/javascript"> function retornarLienzo(x) { var canvas = document.getElementById(x); if (canvas.getContext) { var lienzo = canvas.getContext("2d"); return lienzo; } else return false; } function dibujar() { var lienzo=retornarLienzo("lienzo1"); if (lienzo) { lienzo.shadowOffsetX=10; lienzo.shadowOffsetY=5; lienzo.shadowBlur=10; lienzo.shadowColor="rgba(0, 0, 255, 0.5)"; lienzo.fillStyle="rgb(0,0,255)"; lienzo.fillRect(20,20,150,100); lienzo.shadowOffsetX=5; lienzo.fillRect(250,20,100,100); } } </script> </head> <body onLoad="dibujar()"> <canvas id="lienzo1" width="600" height="300"> Su navegador no permite utilizar canvas. </canvas> </body> </html>
Pgina 117
[HTML]
IDSYSTEMS 2013
Ejercicio 86 - CANVAS (gradiente lineal)

Problema: Dibujar cuatro cuadrados. El primero debe tener una gradiente del color rojo al negro. El segundo del negro al rojo. El tercero el gradiente debe ser diagonal y por ltimo el cuarto debe ser diagonal y tener tres colores (del rojo al negro y luego del negro al rojo). <!DOCTYPE HTML> <html> <head> <script type="text/javascript"> function retornarLienzo(x) { var canvas = document.getElementById(x); if (canvas.getContext) { var lienzo = canvas.getContext("2d"); return lienzo; } else return false; } function dibujar() { var lienzo=retornarLienzo("lienzo1"); if (lienzo) { var gradiente1=lienzo.createLinearGradient(0,0,200,0); gradiente1.addColorStop(0,"rgb(255,0,0)"); gradiente1.addColorStop(1,"rgb(0,0,0)"); lienzo.fillStyle=gradiente1; lienzo.fillRect(0,0,200,200); var gradiente2=lienzo.createLinearGradient(200,300,0,300); gradiente2.addColorStop(0,"rgb(255,0,0)"); gradiente2.addColorStop(1,"rgb(0,0,0)"); lienzo.fillStyle=gradiente2; lienzo.fillRect(0,300,200,200); var gradiente3=lienzo.createLinearGradient(300,0,500,200); gradiente3.addColorStop(0,"rgb(255,0,0)"); CUADERNO DE EJERCICIOS Y PRACTICAS Pgina 118
[HTML]
gradiente3.addColorStop(1,"rgb(0,0,0"); lienzo.fillStyle=gradiente3; lienzo.fillRect(300,0,200,200); var gradiente4=lienzo.createLinearGradient(300,300,500,500); gradiente4.addColorStop(0,"rgb(255,0,0)"); gradiente4.addColorStop(0.5,"rgb(0,0,0)"); gradiente4.addColorStop(1,"rgb(255,0,0)"); lienzo.fillStyle=gradiente4; lienzo.fillRect(300,300,200,200); } } </script> </head> <body onLoad="dibujar()"> <canvas id="lienzo1" width="600" height="600"> Su navegador no permite utilizar canvas. </canvas> </body> </html>
IDSYSTEMS 2013
Ejercicio 87 - CANVAS (gradiente radial)

Problema: Dibujar un crculo utilizando gradiente radial. <!DOCTYPE HTML> <html> <head> <script type="text/javascript"> function retornarLienzo(x) { var canvas = document.getElementById(x); if (canvas.getContext) { CUADERNO DE EJERCICIOS Y PRACTICAS Pgina 119
[HTML]
var lienzo = canvas.getContext("2d"); return lienzo; } else return false; } function dibujar() { var lienzo=retornarLienzo("lienzo1"); if (lienzo) { var gradiente1=lienzo.createRadialGradient(200,200,0,200,200,200); gradiente1.addColorStop(0,"rgb(255,0,0)"); gradiente1.addColorStop(1,"rgb(0,0,255)"); lienzo.fillStyle=gradiente1; lienzo.arc(200,200,100,0,Math.PI*2,true); lienzo.fill(); } } </script> </head> <body onLoad="dibujar()"> <canvas id="lienzo1" width="600" height="600"> Su navegador no permite utilizar canvas. </canvas> </body> </html>
IDSYSTEMS 2013
Ejercicio 88 - CANVAS (patrones de imagenes)

Problema: Dibujar un cuadrado y definir un patrn con una imagen para rellenar el mismo. <!DOCTYPE HTML> <html> <head>
Pgina 120
[HTML]
<script type="text/javascript"> function retornarLienzo(x) { var canvas = document.getElementById(x); if (canvas.getContext) { var lienzo = canvas.getContext("2d"); return lienzo; } else return false; } function dibujar() { var lienzo=retornarLienzo("lienzo1"); if (lienzo) { img1 = new Image(); img1.src = 'http://www.htmlya.com.ar/simulador/foto1.jpg'; img1.onload = function(){ var patron = lienzo.createPattern(img1,'repeat'); lienzo.fillStyle = patron; lienzo.fillRect(0,0,600,600); } } } </script> </head> <body onLoad="dibujar()"> <canvas id="lienzo1" width="600" height="600"> Su navegador no permite utilizar canvas. </canvas> </body> </html>
IDSYSTEMS 2013
Pgina 121
[HTML]
IDSYSTEMS 2013
Ejercicio 89 - CANVAS (otro canvas como patrn)

Problema: Confeccionar una pgina que tenga dos CANVAS, en el primero graficar una cruz y en el segundo graficar un cuadrado que cubra todo el canvas utilizando como patrn el primer canvas. <!DOCTYPE HTML> <html> <head> <script type="text/javascript"> function retornarLienzo(x) { var canvas = document.getElementById(x); if (canvas.getContext) { var lienzo = canvas.getContext("2d"); return lienzo; } else return false; } function dibujar() { var lienzo1=retornarLienzo("lienzo1"); if (lienzo1) { lienzo1.strokeStyle="rgb(0,0,255)"; lienzo1.beginPath(); lienzo1.moveTo(25,0); lienzo1.lineTo(25,50); lienzo1.stroke(); lienzo1.beginPath(); lienzo1.moveTo(0,25); lienzo1.lineTo(50,25); lienzo1.stroke(); var lienzo2=retornarLienzo("lienzo2"); if (lienzo2) { var patron = lienzo2.createPattern(lienzo1.canvas,'repeat'); lienzo2.fillStyle = patron; lienzo2.fillRect(0,0,300,300); } } } </script> </head> <body onLoad="dibujar()"> <canvas id="lienzo1" width="50" height="50"><br> Su navegador no permite utilizar canvas. </canvas> <br> CUADERNO DE EJERCICIOS Y PRACTICAS Pgina 122
[HTML]
<canvas id="lienzo2" width="300" height="300"><br> Su navegador no permite utilizar canvas. </canvas> </body> </html>
IDSYSTEMS 2013
Ejercicio 90 - CANVAS (grabar y recuper el estado - save(), restore())

Problema: Confeccionar una funcin que grafique un rectngulo con gradiente. Previo a graficar grabar el estado actual, luego de graficar restaurar el estado original. <!DOCTYPE HTML> <html> <head> <script type="text/javascript"> function retornarLienzo(x) { var canvas = document.getElementById(x); if (canvas.getContext) { var lienzo = canvas.getContext("2d"); return lienzo; } else return false; } function dibujarCuadradoGradiente(lienzo,x,y,ancho,alto) { lienzo.save(); var gradiente1=lienzo.createLinearGradient(x,y,x+ancho,y+alto); gradiente1.addColorStop(0,"rgb(255,0,0)"); gradiente1.addColorStop(1,"rgb(0,0,255)"); lienzo.fillStyle=gradiente1; lienzo.fillRect(x,y,ancho,alto); lienzo.restore(); CUADERNO DE EJERCICIOS Y PRACTICAS Pgina 123
[HTML]
} function dibujar() { var lienzo=retornarLienzo("lienzo1"); if (lienzo) { lienzo.fillStyle="rgb(255,0,0)"; lienzo.fillRect(10,30,30,30); dibujarCuadradoGradiente(lienzo,70,30,30,30); lienzo.fillRect(130,30,30,30); } } </script> </head> <body onLoad="dibujar()"> <canvas id="lienzo1" width="600" height="600"> Su navegador no permite utilizar canvas. </canvas> </body> </html>
IDSYSTEMS 2013
Ejercicio 91 - CANVAS (translate)

Problema: Confeccionar un programa que implemente una funcin que dibuje un tringulo, la funcin recibe la coordenada donde debe dibujarla y la base y altura del tringulo. Trasladar el punto de origen a travs del mtodo translate. <!DOCTYPE HTML> <html> <head> <script type="text/javascript"> function retornarLienzo(x) { var canvas = document.getElementById(x); if (canvas.getContext) { var lienzo = canvas.getContext("2d"); return lienzo; } else return false; }
Pgina 124
[HTML]
function dibujarTriangulo(lienzo,x,y,base,altura) { lienzo.save(); lienzo.translate(x,y); lienzo.fillStyle="rgb(255,0,0)"; lienzo.beginPath(); lienzo.moveTo(base/2,0); lienzo.lineTo(0,altura); lienzo.lineTo(base,altura); lienzo.lineTo(base/2,0); lienzo.fill(); lienzo.restore(); } function dibujar() { var lienzo=retornarLienzo("lienzo1"); if (lienzo) { for(var col=0;col<550;col+=30) dibujarTriangulo(lienzo,col,10,30,130); } } </script> </head> <body onLoad="dibujar()"> <canvas id="lienzo1" width="600" height="600"> Su navegador no permite utilizar canvas. </canvas> </body> </html>
IDSYSTEMS 2013
Ejercicio 92 - CANVAS (rotate)

Problema: Graficar un cuadrado y rotarlo en forma indefinida. <!DOCTYPE HTML> <html> CUADERNO DE EJERCICIOS Y PRACTICAS Pgina 125
[HTML]
<head> <script type="text/javascript"> function retornarLienzo(x) { var canvas = document.getElementById(x); if (canvas.getContext) { var lienzo = canvas.getContext("2d"); return lienzo; } else return false; }
IDSYSTEMS 2013
function dibujar() { var lienzo=retornarLienzo("lienzo1"); if (lienzo) { lienzo.clearRect(0,0,600,600); lienzo.save(); lienzo.fillStyle="rgb(255,0,0)"; lienzo.translate(300,300); lienzo.rotate(avance); lienzo.fillRect(-100,-100,200,200); lienzo.restore(); avance+=0.05; if (avance>Math.PI*2) avance=0; } } var avance=0; function inicio() { setInterval(dibujar,50); } </script> </head> <body onLoad="inicio()"> <canvas id="lienzo1" width="600" height="600"> Su navegador no permite utilizar canvas. </canvas> </body> </html>
Pgina 126
[HTML]
IDSYSTEMS 2013
Ejercicio 93 - CANVAS (scale)

Problema: Mostrar una imagen que gire en el lienzo y casa avance muestre la imagen con tamao mayor. <!DOCTYPE HTML> <html> <head> <script type="text/javascript"> function retornarLienzo(x) { var canvas = document.getElementById(x); if (canvas.getContext) { var lienzo = canvas.getContext("2d"); return lienzo; } else return false; }
function dibujar() { var lienzo=retornarLienzo("lienzo1"); if (lienzo) { lienzo.clearRect(0,0,600,600); lienzo.save(); lienzo.translate(300,300); lienzo.rotate(avance); lienzo.scale(tamx,tamy); lienzo.drawImage(img1,-125,-125); avance+=0.05; tamx+=0.01; tamy+=0.01; if (avance>Math.PI*2) avance=0; CUADERNO DE EJERCICIOS Y PRACTICAS Pgina 127
[HTML]
if (tamx>=10) { tamx=0.01; tamy=0.01; } lienzo.restore(); } } var avance=0; var img1; var tamx=0.01; var tamy=0.01; function inicio() { img1 = new Image(); img1.src = 'http://www.htmlya.com.ar/simulador/foto1.jpg'; img1.onload = function(){ setInterval(dibujar,50); } } </script> </head> <body onLoad="inicio()"> <canvas id="lienzo1" width="600" height="600"> Su navegador no permite utilizar canvas. </canvas> </body> </html>
IDSYSTEMS 2013
Ejercicio 94 AUDIO
Problema: Utilizar el elemento AUDIO para reproducir sonidos. <!DOCTYPE HTML> <html> CUADERNO DE EJERCICIOS Y PRACTICAS Pgina 128
[HTML]
<head> </head> <body> <audio controls> <source src="http://www.htmlya.com.ar/html5/simulador/gallo.ogg"> <source src="http://www.htmlya.com.ar/html5/simulador/gallo.mp3"> <source src="http://www.htmlya.com.ar/html5/simulador/gallo.wav"> </audio> </body> </html>
IDSYSTEMS 2013
Ejercicio 95 VIDEO
Problema: Probar el elemento HTML video. <!DOCTYPE HTML> <html> <head> </head> <body> <video width="640" height="360" controls> <source src="http://videos.mozilla.org/firefox/3.5/overview/overview.ogv"> </video> </body> </html>
Pgina 129
[HTML]
IDSYSTEMS 2013
Ejercicio 96 - Elementos HTML semnticos.

Problema: Crear una pgina utilizando los elementos : header, footer, section, nav, aside. <!DOCTYPE html> <html lang="es"> <head> <meta http-equiv="content-type" content="text/html; charset=iso-8859-1"> <title>Elementos semnticos del HTML5</title> </head> <body> <header> <h1>Encabezado de la pgina</h1> </header> <nav> <p>enlaces de navegacin</p> </nav> <section> <p>Seccin 1</p> </section> <section> <p>Seccin 2</p> </section> <aside> <p>Publicidad</p> </aside> <footer> <p>Pi de pgina</p> </footer> </body> </html>
Pgina 130
[HTML]
IDSYSTEMS 2013
Practica 68 - CANVAS (dibujar lneas)

Problema de HTML:Dibujar una cuadrcula formada por 10 lneas horizontales y 10 lneas verticales.
Practica 69 - CANVAS (dibujar rectngulo - permetro)

Problema de HTML:Dibujar tres cuadrados de color rojo, verde y azul.
Practica 70 - CANVAS (estilos de lnea)

Problema de HTML:Dibujar un tringulo con lneas de 20 pxeles de ancho y los vrtices redondeados.
Practica 71 - CANVAS (rectngulo relleno)

Problema de HTML:Dibujar 250 cuadraditos (50 por lnea) Los colores de los cuadrados deben empezar en negro y avanzar hasta el rojo.
Practica 72 - CANVAS (borrar una regin)

Problema de HTML:Dibujar un cuadrado. Luego de 3 segundos hacer que se borre.
Practica 73 - CANVAS (dibujar varias lneas y rellenar la figura creada)

Problema de HTML:Dibujar un paralelogramo de color verde.
Practica 74 - CANVAS (arcos rellenos y lineal)

Problema de HTML:Mostrar un crculo que se desplace de izquierda a derecha. Cada vez que llega a la columna 300 hacer que comience nuevamente en la columna 0.
Practica 75 - CANVAS (curva de bezier)

Problema de HTML:Crear una curva de bzier y hacer que los puntos de atraccin cambien de valor. Redibujar la curva cada vez que modificamos dichos valores.
Practica 76 - CANVAS (graficar texto)

Problema de HTML:Mostrar la fecha actual en la parte superior del canvas centrado.
Pgina 131
[HTML]
IDSYSTEMS 2013
Practica 77 - CANVAS (graficar imagenes)

Problema de HTML:Mostrar la foto almacenada en: http://www.htmlya.com.ar/simulador/foto1.jpg de tal forma que aparezca la primer columna de pxeles, luego la segunda columna y as sucesivamente (la foto tiene un tamao de 249 pxeles de ancho y 251 de alto)
Practica 78 - CANVAS (transparencias)

Problema de HTML:Dibujar 250 cuadrados del rojo al negro. Dibujar un rectngulo negro grande que tape todos los cuadrados. Redibujar y hacer que el rectngulo se vuelva cada vez ms transparente.
Practica 79 - CANVAS (sombras)

Problema de HTML:Mostrar un cuadrado y definir una sombra que aumente su difuminado lentamente hasta el valor 100.
Practica 80 - CANVAS (gradiente lineal)

Problema de HTML:Dibujar un tringulo y utilizar un patrn de tipo imagen para pintar su interior.
Practica 81 - CANVAS (patrones de imagenes)

Problema de HTML:Dibujar un tringulo y utilizar un patrn de tipo imagen para pintar su interior.
Practica 82 - CANVAS (otro canvas como patrn)

Problema de HTML:Crear dos canvas, en el primero dibujar un tringulo y en el segundo canvas dibujar un cuadrado utilizando como patrn el contenido del primer canvas.
Practica 83 - CANVAS (rotate)

Problema de HTML:Mostrar una imagen y efectuar su rotacin en forma indefinida.
Pgina 132

Cuaderno de Trabajo HTML

Caricato da

Informazioni sul documento

Copyright

Formati disponibili

Condividi questo documento

Condividi o incorpora il documento

Opzioni di condivisione

Hai trovato utile questo documento?

Questo contenuto è inappropriato?

Copyright:

Formati disponibili

Cuaderno de Trabajo HTML

Caricato da

Copyright:

Formati disponibili

[HTML]

CUADERNO DE EJERCICIOS HTML

CUADERNO DE EJERCICIOS Y PRACTICAS

Practica 53 - Formulario - text/password y maxlength .............................................................................. 79 CUADERNO DE EJERCICIOS Y PRACTICAS Pgina 5

CUADERNO DE EJERCICIOS Y PRACTICAS

Ejercicio 1 - Crear una pagina basica

CUADERNO DE EJERCICIOS Y PRACTICAS

Ejercicio 2 Estructura interna de una pagina HTML

Ejercicio 3 Salto de linea <br>

CUADERNO DE EJERCICIOS Y PRACTICAS

Practica 1 Modificar las propiedades del documento

CUADERNO DE EJERCICIOS Y PRACTICAS

Practica 1b: Flores.

Practica 2 Estructura interna de una pagina HTML

Practica 3 Salto de linea <br>

Practica 4 Parrafo <p>

Ejercicio 5 Insertar texto con diferentes propiedades

CUADERNO DE EJERCICIOS Y PRACTICAS

CUADERNO DE EJERCICIOS Y PRACTICAS

Ejercicio 6 - Ttulos <h1><h2><h3><h4><h5><h6>

CUADERNO DE EJERCICIOS Y PRACTICAS

Ejercicio 7 - Enfasis (<em> <strong>)

Practica 5 Modificar las propiedades del texto

CUADERNO DE EJERCICIOS Y PRACTICAS

3 Guardar los cambios y comprobar el funcionamiento en un navegador.

Practica 5b: Deportes.

Practica 5c: Deportes.

CUADERNO DE EJERCICIOS Y PRACTICAS

Practica 5d: Flores.

PRACTICA 6 - Ttulos <h1><h2><h3><h4><h5><h6>

PRACTICA 7 - Enfasis (<em> <strong>)

CUADERNO DE EJERCICIOS Y PRACTICAS

Ejercicio 8 Insertar un hiperenlace

CUADERNO DE EJERCICIOS Y PRACTICAS

[HTML] 4 Haz clic sobre la opcin Guardar.

Ejercicio 9 - Hipervnculo a otra pgina del mismo sitio <a>

CUADERNO DE EJERCICIOS Y PRACTICAS

Ejercicio 10 - Hipervnculo a otro sitio de internet <a>

Ejercicio 11 Apertura de un hipervinculo en otra instancia del navegador

Ejercicio 12 - Hipervnculo a un cliente de correo <a>

Ejercicio 13 - Anclas llamadas desde la misma pgina.

Ejercicio 14 - Anclas llamadas desde otra pgina.

CUADERNO DE EJERCICIOS Y PRACTICAS

Practica 8 Insertar hiperenlaces

Practica 8b: Deportes.

Practica 8c: Flores.

Practica 9 - Hipervnculo a otra pgina del mismo sitio <a>

Practica 10 - Hipervnculo a otro sitio de internet <a>

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

Practica 12 - Hipervnculo a un cliente de correo <a>

Practica 13 - Anclas llamadas desde la misma pgina.

CUADERNO DE EJERCICIOS Y PRACTICAS

Practica 14 - Anclas llamadas desde otra pgina.

Ejercicio 15 Insertar una imagen

CUADERNO DE EJERCICIOS Y PRACTICAS

CUADERNO DE EJERCICIOS Y PRACTICAS

CUADERNO DE EJERCICIOS Y PRACTICAS

No te preocupes por la disposicin de la imagen, en el tema de tablas lo arreglaremos.

Imgenes dentro de una pgina <img>

CUADERNO DE EJERCICIOS Y PRACTICAS

Ejercicio 17 - Hipervnculo mediante una imagen <a> y <img>

CUADERNO DE EJERCICIOS Y PRACTICAS

Practica 15 Insertar imagenes

Practica 15b 2: Deportes.

[HTML] 10 Escribe despus de la tercera etiqueta <tr..: <td>PEQUEÑO</td> <td>GRANDE</td>