cuaderno de trabajo html

CUADERNO DE EJERCICIOS Y

CUADERNO DE

EJERCICIOS HTML

Cuaderno de Trabajo Html se encuLicenciamiento Recíproco 3.0 Unported

[HTML] IDSYSTEMS 2013

CUADERNO DE EJERCICIOS Y PRACTICAS

CUADERNO DE

EJERCICIOS HTML

Trabajo Html se encuentra bajo una Licencia Creative Commons Atribución

Licenciamiento Recíproco 3.0 Unported. Mayo 2013 – IDSystems

IDSYSTEMS 2013

Página 1

CUADERNO DE

EJERCICIOS HTML

Creative Commons Atribución-No Comercial-


CUADERNO DE EJERCICIOS Y PRACTICAS Página 2

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 - Títulos <h1><h2><h3><h4><h5><h6> .................................................................................... 16

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

Practica 5 – Modificar las propiedades del texto ....................................................................................... 17


Practica 5b: Deportes. ............................................................................................................................ 18

Practica 5c: Deportes. ............................................................................................................................. 18

Practica 5d: Flores. ................................................................................................................................. 19

PRACTICA 6 - Títulos <h1><h2><h3><h4><h5><h6> .................................................................................. 19

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

Ejercicio 8 – Insertar un hiperenlace .......................................................................................................... 20

Ejercicio 9 - Hipervínculo a otra página del mismo sitio <a> ...................................................................... 21

Ejercicio 10 - Hipervínculo a otro sitio de internet <a> .............................................................................. 22

Ejercicio 11 – Apertura de un hipervinculo en otra instancia del navegador ............................................ 22

Ejercicio 12 - Hipervínculo a un cliente de correo <a> ............................................................................... 23

Ejercicio 13 - Anclas llamadas desde la misma página. .............................................................................. 23

Ejercicio 14 - Anclas llamadas desde otra página. ...................................................................................... 25

Practica 8 – Insertar hiperenlaces .............................................................................................................. 26


Practica 8b: Deportes. ............................................................................................................................ 26

Practica 8c: Flores. .................................................................................................................................. 26



Practica 9 - Hipervínculo a otra página del mismo sitio <a> ...................................................................... 27

Practica 10 - Hipervínculo a otro sitio de internet <a> ............................................................................... 27

Practica 11 - Apertura de un hipervínculo en otra instancia del navegador. ............................................ 27

Practica 12 - Hipervínculo a un cliente de correo <a> ................................................................................ 27

Practica 13 - Anclas llamadas desde la misma página. ............................................................................... 27

Practica 14 - Anclas llamadas desde otra página. ....................................................................................... 28

Ejercicio 15 – Insertar una imagen ............................................................................................................. 28

Ejercicio 15a ............................................................................................................................................ 28

Ejercicio 15b............................................................................................................................................ 29

Ejercicio 15c ............................................................................................................................................ 30

Ejercicio 16 – Imágenes dentro de una página <img> ............................................................................ 31

Ejercicio 17 - Hipervínculo 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 - Imágenes dentro de una página <img> ................................................................................. 33

Practica 17 - Hipervínculo mediante una imagen <a> y <img> .................................................................. 34

Ejercicio 18 - Lista ordenada (<ol>) ........................................................................................................ 34

Ejercicio 19 - Lista no ordenada (<ul>) ................................................................................................... 34

Ejercicio 20 - Lista de definiciones (<dl>) .................................................................................................. 35

Ejercicio 21 - Listas anidadas. ..................................................................................................................... 36

Practica 18 - Lista ordenada (<ol>) ......................................................................................................... 37

Practica 19 - 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 título (<caption>) ................................................................................................. 44

Ejercicio 26 - Tabla y combinación de celdas. ............................................................................................ 45

Practica 22 – Trabajar con tablas ................................................................................................................ 45


Practica 22b: Deportes. .......................................................................................................................... 46


Practica 22d: Flores. ............................................................................................................................... 46

Practica 23 - Tabla (<table><tr><td>) ......................................................................................................... 47

Practica 24 – Tabla con encabezado (<th>) ................................................................................................ 47

Practica 25 – Tabla con título (<caption>) .................................................................................................. 47

Practica 26 - Tabla y combinación de celdas. ............................................................................................. 47

Ejercicio 27 - Contenido de la cabecera de la página (<title>) ................................................................... 47

Ejercicio 28 - Contenido de la cabecera de la página (<meta>) ................................................................. 48

Ejercicio 29 - Comentarios dentro de una página  .......................................................................... 49

Ejercicio 30 - Sintaxis para caracteres especiales. ...................................................................................... 50

Practica 27 - Contenido de la cabecera de la página (<title>) .................................................................... 50

Practica 28 - Comentarios dentro de una página  ........................................................................... 50

Practica 29 - Sintaxis para caracteres especiales. ....................................................................................... 50

Ejercicio 31 – Crear conjunto de marcos .................................................................................................... 50

Ejercicio 32 – Frames .................................................................................................................................. 52

Ejercicio 33 - Frames - Actualización de un frame a partir del enlace de otro frame ................................ 53

Ejercicio 34 - Frames - Asignación de medidas en píxeles .......................................................................... 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 30b: Flores. ............................................................................................................................... 57

Practica 31 – Frames ................................................................................................................................... 58

Practica 32 - Frames - Actualización de un frame a partir del enlace de otro frame ................................. 58

Practica 33 - Frames - Asignación de medidas en píxeles .......................................................................... 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



Ejercicio 43 - Formulario - input type="radio"............................................................................................ 63

Ejercicio 44 - Formulario - select (cuadro de selección individual) ............................................................ 64

Ejercicio 45 - Formulario - select (cuadro de selección múltiple) ........................................................... 65

Ejercicio 46 - 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 - Formulario - orden de foco de controles. ......................................................................... 71

Ejercicio 54 - Formulario - Inhabilitar controles. .................................................................................... 72

Ejercicio 55 - Formulario - text/password y maxlength.............................................................................. 73

Ejercicio 56 - Formulario - text/password/textarea y readonly ................................................................. 74

Ejercicio 57 - Formulario - Envío de datos mediante mail. ......................................................................... 74

Ejercicio 58 - Formulario – label ................................................................................................................. 75

Practica 37 – Insertar elementos de formulario ......................................................................................... 76



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 selección individual) ............................................................. 78

Practica 44 - Formulario - select (cuadro de selección múltiple) ........................................................... 78

Practica 45 - 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 - Formulario - orden de foco de controles ........................................................................... 79

Practica 52 - Formulario - Inhabilitar controles. ..................................................................................... 79

Practica 53 - Formulario - text/password y maxlength .............................................................................. 79



Practica 54 - Formulario - text/password/textarea y readonly .................................................................. 79

Practica 55 - Formulario - Envío de datos mediante mail. ......................................................................... 79

Practica 56 - Formulario – label .................................................................................................................. 80

Ejercicio 59 – Insertar sonido de fondo ...................................................................................................... 80

Practica 57 – Insertar elementos multimedia ............................................................................................ 81


Practica 57b: Deportes. .......................................................................................................................... 82


Ejercicio 60 – Modificar las propiedades de una capa ............................................................................... 82

Practica 58 – Modificar las propiedades de una capa ................................................................................ 84



Ejercicio 61 – Llamadas a javascript ........................................................................................................... 85

Practica 59 – Llamadas a javascript ............................................................................................................ 87



Ejercicio 62 – Crear hoja de estilos ............................................................................................................. 88

Ejercicio 63 - Conceptos básicos 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 - Declaración DOCTYPE. HTML Transitional ........................................................................... 96

Ejercicio 68 - Declaración DOCTYPE. HTML Estricto ................................................................................... 97

Ejercicio 69 - Declaración DOCTYPE. para Frames ...................................................................................... 97

Ejercicio 70 - Validación de la página a través de un enlace. ..................................................................... 97

Practica 60 – Aplicar estilos ........................................................................................................................ 98



Practica 61 - Conceptos básicos 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 - Declaración DOCTYPE. HTML Transitional ............................................................................. 99

Practica 66 - Declaración DOCTYPE. HTML Estricto .................................................................................. 100

Practica 67 - Declaración DOCTYPE. para Frames .................................................................................... 100



HTML 5 ...................................................................................................................................................... 101

Ejercicio 71 - DOCTYPE ............................................................................................................................. 101

Ejercicio 72 – CANVAS .............................................................................................................................. 101

Ejercicio 73 - CANVAS (dibujar líneas) ...................................................................................................... 102

Ejercicio 74 - CANVAS (dibujar rectángulo - perímetro) ........................................................................... 103

Ejercicio 75 - CANVAS (estilos de línea) .................................................................................................... 104

Ejercicio 76 - CANVAS (rectángulo relleno) .............................................................................................. 106

Ejercicio 77 - CANVAS (borrar una región) ............................................................................................... 107

Ejercicio 78 - CANVAS (dibujar varias líneas y rellenar la figura creada) .................................................. 108

Ejercicio 79 - CANVAS (arcos rellenos y lineal) ......................................................................................... 109

Ejercicio 80 - CANVAS (curva de bezier) ................................................................................................... 111

Ejercicio 81 - CANVAS (método 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 patrón) ................................................................................... 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 semánticos. ............................................................................................. 130

Practica 68 - CANVAS (dibujar líneas) ....................................................................................................... 131

Practica 69 - CANVAS (dibujar rectángulo - perímetro) ........................................................................... 131

Practica 70 - CANVAS (estilos de línea) .................................................................................................... 131

Practica 71 - CANVAS (rectángulo relleno) ............................................................................................... 131

Practica 72 - CANVAS (borrar una región) ................................................................................................ 131

Practica 73 - CANVAS (dibujar varias líneas y rellenar la figura creada) .................................................. 131

Practica 74 - CANVAS (arcos rellenos y lineal) .......................................................................................... 131

Practica 75 - CANVAS (curva de bezier) .................................................................................................... 131



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 patrón) .................................................................................... 132

Practica 83 - CANVAS (rotate)................................................................................................................... 132



Ejercicio 1 - Crear una pagina basica

1 Si no tienes abierto el Bloc de notas, ábrelo para realizar el primer ejercicio.

2 Escribe el código que aparece a continuación:

<html> <head> <title>Inicio</title> </head> <body bgcolor="#99CC99"> </body> </html>

Con este código estarás creando un documento con el título "Inicio", y con el color de fondo verde (#99CC99).

3 Haz clic sobre el menú Archivo.

4 Haz clic sobre la opción Guardar como. Se abrirá el cuadro de diálogo 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 página como la que aparece. Fíjate en el color de fondo de la página y en la barra de título.



Ejercicio 2 – Estructura interna de una pagina HTML

Problema de HTML: Confeccionar una página que muestre los nombres de 5 lenguajes de programación separados por un guión. <html> <head> </head> <body> PHP - Java - JavaScript - C - C++ </body> </html> RESULTADO:

Ejercicio 3 – Salto de linea <br>

Problema de HTML: Confeccionar una página HTML que muestre distintos lenguajes de programación, mostrarlos uno por línea. <html> <head> </head> <body> PHP<br> JavaScript<br> Java<br> C<br> C++ </body> </html> RESULTADO:



Ejercicio 4 - Parrafo

Problema de HTML: Confeccione una página que muestre dos párrafos. En el primero agregar varios saltos de línea.

<html> <head> </head> <body> <p> SQL, Structure Query Language (Lenguaje de Consulta Estructurado) es un lenguaje de programacion para trabajar con base de datos relacionales como MySQL, Oracle, etc.<br> MySQL es un interpretador de SQL, es un servidor de base de datos.<br> MySQL permite crear base de datos y tablas, insertar datos, modificarlos, eliminarlos, ordenarlos, hacer consultas y realizar muchas operaciones, etc., resumiendo: administrar bases de datos. </p> <p> Este tutorial tiene por objetivo acercar los conceptos iniciales para introducirse en el mundo de las bases de datos. </p> </body> </html> 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 página con el mismo nombre en tu directorio de ejercicios Mis

documentos/ejercicios_html/deportes

3 Establecer #0099CC como color de fondo y 40 como tamaño de los márgenes.

4 Guardar los cambios y comprobar el funcionamiento con tu navegador, no te preocupes por el formato del texto, lo arreglarás en el tema siguiente.



Practica 1b: Flores.

1 Copiar la imagen fondo.gif que encontrarás 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 página con las marcas mínimas 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 página HTML que muestre su nombre y apellido y en la siguiente línea los nombres de sus padres separados por un guión.

Practica 4 – Parrafo <p> Problema de HTML:Confeccione una página que muestre en un párrafo datos referentes a sus estudios y en otro párrafo 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 línea en blanco debajo de la etiqueta <body>, y escribe el siguiente código en ella:

<basefont color="red" size="1 ">

Con este código estarás estableciendo el color rojo (#FF0000) y tamaño 1 para el texto del documento.



Si guardas ahora los cambios y visualizas la página, no verás ningún cambio ya que la página no tiene texto.

4 Detrás de la etiqueta <basefont> inserta una línea en blanco, y escribe el siguiente texto: Inicio

5 Guarda el archivo y visualízalo en tu navegador, el texto debe aparecer en rojo y pequeño.

Dejaremos la página un poco más discreta y cambiaremos el color del texto a verde oscuro (#003333) y subiremos el tamaño de las letras.

6 Rectifica la etiqueta <basefont para que quede así:

<basefont color="#003333" size="4">

Con este código estarás estableciendo el color verde oscuro (#003333) y tamaño 4 para el texto del documento.

7 Guarda el archivo y visualízalo en tu navegador, observa los cambios.

8 Encierra el texto Inicio entre etiquetas <H1> de la siguiente forma:

<h1>Inicio</h1>

Con este código estarás conviertiendo el texto en un encabezado de primer nivel.

9 Guarda el archivo y visualízalo en tu navegador, observa los cambios, el texto aparece destacado y más grande.

10 Inserta una línea en blanco debajo del código anterior, y escribe la etiqueta <hr>.

Con esta etiqueta estarás insertando una regla horizontal.

11 Guarda el archivo y visualízalo en tu navegador, observa la regla

12 Inserta una línea en blanco debajo de la etiqueta anterior, y escribe el siguiente código 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>



</p> </blockquote> </blockquote>

Con este código estarás insertando un párrafo (<p>) dividido en dos líneas (<br>).

Este párrafo estará alineado a la izquierda (align="left"), aparecerá en cursiva (<em>) y tendrá doble sangrado (<blockquote>).

13 Guarda el archivo y visualízalo en tu navegador, comprueba que obtienes una página como la que aparece en la imagen. Para apreciar mejor el efecto del párrafo ves cambiando el tamaño de la ventana de tu navegador y verás como el texto se va escribiendo en más líneas pero siempre alineado a la izquierda y saltando de línea después de la primera frase.

Ejercicio 5b.

1 Abre el documento gatos.htm, de la carpeta originales/animales del curso.

2 Guarda la página con el mismo nombre en tu directorio de ejercicios Mis

documentos/ejercicios_html/animales

Vamos a modificar la página para que tenga el siguiente aspecto:



1 Empezamos por darle a la palabra Gatos un estilo de encabezado 1: <h1>Gatos</h1>

Si quieres puedes ir observando los cambios según los vayas introduciendo, guardando sin cerrar el bloc de notas y visualizando la página cada vez (la primera vez abres el explorador con la página gatos.htm y después de ver el efecto, en vez de cerrar la ventana del explorador la dejas abierta, así cuando hayas hecho el siguiente cambio en la página podrás volver a la sesión del explorador con la página gatos.htm y después de hacer clic en el botón Actualizar de tu navegador verás mejor el efecto producido por el cambio que has incorporado a la página).

2 Detrás añadimos una regla con la etiqueta <hr>.

3 Añadimos una línea en blanco con <br>

4 La pregunta queda sangrada con respecto al resto del texto, la colocamos dentro de una etiqueta <blockquote> y además le asignamos un estilo de encabezado 3:

<blockquote> <h3>¿COMO PREVENIR LOS PROBLEMAS DENTALES?</h3> </blockquote>

5 Sólo 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>



<li>Que el veterinario examine la boca del gato por lo menos cada seis meses</li> </ul>

6 Guarda el archivo y visualízalo en tu navegador.

Ejercicio 6 - Títulos <h1><h2><h3><h4><h5><h6> Problema de HTML: Confeccionar una página que contenga un título de primer nivel <h1> y luego dos títulos de nivel <h2>. Definir un párrafo para cada título de segundo nivel. <html> <head> </head> <body> <h1>Tipos de datos en MySQL</h1> <h2>varchar</h2> <p> se usa para almacenar cadenas de caracteres. Una cadena es una secuencia de caracteres. Se coloca entre comillas (simples): 'Hola'.<br> El tipo "varchar" define una cadena de longitud variable en la cual determinamos el máximo de caracteres. Puede guardar hasta 255 caracteres. Para almacenar cadenas de hasta 30 caracteres, definimos un campo de tipo varchar(30). </p> <h2>int</h2> <p> Se usa para guardar valores numéricos enteros, de -2000000000 a 2000000000 aproximadamente.<br> Definimos campos de este tipo cuando queremos representar, por ejemplo, cantidades. </p> </body> </html>



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

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

Practica 5 – Modificar las propiedades del texto


1 Abrir el documento quienes, de tu carpeta ejercicios_html/deportes.

2 Añadir el código necesario para que la página quede de la siguiente forma:



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.



3 Convertir la última frase en una marquesina.


Practica 5c: Deportes.

1 Abrir el documento intalaciones.htm, de la carpeta originales/deportes del curso.



3 Convertir la lista de actividades que aparece antes de la frase Puedes apuntarte... en una lista con viñetas.




Practica 5d: Flores.

1 Abrir el documento inicio.htm, de la carpeta ejercicio_html/flores.

2 Añadir el código necesario para que la página quede de la siguiente forma:

Establecer #990033 como color del texto del documento, y 4 como el tamaño normal.


PRACTICA 6 - Títulos <h1><h2><h3><h4><h5><h6>

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

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

Problema de HTML:Confeccionar una página que muestre la definición de tres palabras. Aplicar el elemento strong a cada palabra previo a su definición. Luego agregar el elemento em a una o a un conjunto de palabras dentro de la definición.



Ejercicio 8 – Insertar un hiperenlace


2 Abre el archivo inicio.htm, que debes tener en la carpeta ejercicios_html/animales.

Vamos a añadir un enlace a la página en Internet de aulaClic.

1 Escribe el siguiente código delante de la etiqueta </body>:

<p align="center"> <a href="http://www.aulaclic.com" target="_blank"> <b> visita aulaClic </b> </a> </p>

Con este código estarás 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.


3 Haz clic sobre la opción 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 ratón se convierte en una mano y si haces clic (y estás conectado a Internet) se abrirá una nueva ventana con la página 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 código estarás indicando que la página tiene el color de fondo verde (#99CC99), y el color de los enlaces rojo (#CC0000).





5 Abre con tu navegador el documento inicio.htm que acabas de guardar, y comprueba que obtienes una página como la que aparece en la imagen. Fíjate que ahora el texto del enlace aparece en rojo.

Ejercicio 9 - Hipervínculo a otra página del mismo sitio <a>

Problema:Confeccionar una página principal que tenga un hipervínculo a otra página secundaria. La página secundaria debe tener también un hipervínculo a la página principal. pagina1.html <html> <head> </head> <body> <h1>Página principal.</h1> <a href="pagina2.html">Noticias</a> </body> </html>



Ejercicio 10 - Hipervínculo a otro sitio de internet <a>

Problema:Confeccionar una página 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 página que contenga dos hipervínculos a los periódicos La Nación y el Clarin. Hacer que el hipervínculo del periódico el Clarin sea abierto en otra ventana del navegador. <html> <head> </head> <body> <h1>Apertura de enlaces en el mismo navegador y en otra instancia del navegador</h1> <p> <a href="http://www.lanacion.com.ar">Periódico La Nación</a> <br> <a href="http://www.clarin.com.ar" target="_blank">Periódico Clarin</a>



</p> </body> </html>

Ejercicio 12 - Hipervínculo a un cliente de correo <a> Problema de HTML: Confeccionar una página que contenga un hipervínculo configurando la propiedad href de tal manera que abra un cliente de correo. <html> <head> </head> <body> <h1>Reclamos</h1> <a href="mailto:[email protected]">Enviar mail.</a> </body> </html>

Ejercicio 13 - Anclas llamadas desde la misma página.

Problema:Confeccionar una página que contenga cuatro anclas, luego definir cuatro hipervínculos que se enlacen con dichas anclas. pagina1.html <html> <head> </head> <body> <h1>Tutorial de MySQL</h1> <a href="#introduccion">Introducción</a><br> <a href="#mostrarbasedatos">show databases</a><br> <a href="#creaciontabla">Creación de una tabla y mostrar sus campos</a><br> <a href="#cargarregistros">Carga de registros a una tabla y su recuperación</a><br>



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



Note que los datos ingresados, como corresponden a campos de cadenas de caracteres se colocan entre comillas simples. Las comillas simples son OBLIGATORIAS. </p> </body> </html>

Ejercicio 14 - Anclas llamadas desde otra página.

Problema:Confeccionar una página que contenga cuatro anclas y una segunda página que defina cuatro hipervínculos que se enlacen con dichas anclas. pagina1.html <html> <head> </head> <body> <h1>Tutorial de MySQL</h1> <a href="pagina2.html#introduccion">Introducción</a><br> <a href="pagina2.html#mostrarbasedatos">show databases</a><br> <a href="pagina2.html#creaciontabla">Creación de una tabla y mostrar sus campos</a><br> <a href="pagina2.html#cargarregistros">Carga de registros a una tabla y su recuperación</a><br> </body> </html>



Practica 8 – Insertar hiperenlaces


1 Abrir el documento menu.htm, de la carpeta originales/deportes del curso.



3 Rectificar la página para que la palabra E-MAIL sea un enlace de correo electrónico a tu dirección de correo.



1 Abrir el documento instalaciones.htm, de la carpeta ejercicios_html/deportes.

2 Añadir al texto de cada actividad un enlace al párrafo correspondiente a esa actividad para que el navegante pueda ver directamente la descripción de la actividad sin tener que moverse por toda la página.


Practica 8c: Flores.

1 Abrir el documento menu.htm, de la carpeta originales/flores del curso.




documentos/ejercicios_html/flores

3 Asociar a la palabra Inicio un enlace a la página inicio.htm, a la palabra Productos un enlace a la página productos.htm y a la palabra Pedidos un enlace a la página pedidos.htm, las páginas inicio.htm, productos.htm y pedidos.htm se encontrarán en el mismo directorio que la página menu.htm. Las páginas se abrirán en la misma ventana.

4 Guardar los cambios y comprobar el funcionamiento del enlace a la página Inicio.htm en un navegador (las páginas productos.htm y pedidos.htm se incorporarán más adelante) .

Practica 9 - Hipervínculo a otra página del mismo sitio <a> Problema:Confeccionar una página principal con dos hipervínculos a las páginas pagina2.html y pagina3.html Luego en las dos páginas secundarias disponer hipervínculos a la página principal

Practica 10 - Hipervínculo a otro sitio de internet <a> Problema:Confeccionar una página que contenga un hipervínculo a un periódico (indicar sólo el nombre de dominio del periódico). Disponer además un segundo hipervínculo a una página determinada de ese periódico.

Practica 11 - Apertura de un hipervínculo en otra instancia del navegador. Problema de HTML:Confeccionar una página que muestre enlaces a distintos blog. Agruparlos bajo dos títulos que muestren los mismos enlaces, el primero "Hacer la apertura en otra ventana" y el segundo "Hacer la apertura en el mismo navegador".

Practica 12 - Hipervínculo 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 página que disponga tres hipervínculos a cada una de esas ofertas. Al ser presionadas abrir el cliente de correo y enviar la promoción correspondiente. En el título indicar si se trata de la promoción 1, 2 o 3. En el cuerpo del mensaje pedir que ingrese la dirección y teléfono de la persona que hace el pedido.

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



Practica 14 - Anclas llamadas desde otra página.

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

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 línea

<b> visita aulaclic </b>

que está incluida dentro de un hiperenlace, por la línea

<img src="imagenes/aulaclic.jpg" alt="visita aulaclic" width="90" height="32" border="4">

Con este código estarás 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 píxeles de ancho, y 32 píxeles de alto (atributos width y height).

Tendrá un borde de 4 píxeles (atributo border), que aparecerá de color rojo, al ser este color el definido para los enlaces de esta página.

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 opción Guardar del menú Archivo.

4 Abre el documento inicio.htm, que acabas de guardar, en un navegador, y comprueba que obtienes una página como la que aparece a continuacion



Ejercicio 15b

1 Abre el documento menu.htm, de la carpeta originales/animales del curso.



2 Añade delante de la primera etiqueta <p ... la siguiente línea:

<p align="center"><img src="imagenes/logo_animales.gif" width="122" height="85"> </p>

El párrafo se añade para centrar la imagen.


4 Abre el documento menu.htm, que acabas de guardar, en un navegador, y comprueba que obtienes una página como la que aparece a continuacion



Ejercicio 15c

1 Abre el archivo gatos.htm, que se encuentra en la carpeta animales.

2 Añade detrás de la etiqueta </ul> la línea:

<img src="imagenes/gatito.gif" alt="gatito" border="0">


4 Abre el documento menu.htm, que acabas de guardar, en un navegador, y comprueba que obtienes una página como la que aparece en la imagen



No te preocupes por la disposición de la imagen, en el tema de tablas lo arreglaremos.

Ejercicio 16 – Imágenes dentro de una página <img>

Problema de HTML: Implementar una página que muestre una imagen llamada foto1.jpg que se encuentra en el mismo servidor y en la misma carpeta donde se localiza el archivo HTML.

<html> <head> </head> <body> <img src="foto1.jpg" alt="Pintura geométrica"> </body> </html>



Ejercicio 17 - Hipervínculo mediante una imagen <a> y <img> Problema:Confeccionar una página que muestre dos imagenes (foto1.jpg y foto2.jpg) como hipervínculos. Al ser presionados llamar a otra página. Las imágenes se encuentran en una carpeta llamada imagenes que depende directamente de la raiz del sitio. <html> <head> </head> <body> <h2>Presione alguna de las imagenes para conocer más sobre esa obra.</h2> <a href="pagina2.html"><img src="/imagenes/foto1.jpg" alt="Pintura Geométrica"> </a> <br> <a href="pagina3.html"><img src="/imagenes/foto2.jpg" alt="Pintura Geométrica"> </a> </body> </html>



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.


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 página por la misma imagen logodeportes.gif que en el ejercicio anterior, la imagen deberá tener deportes como texto alternativo.



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.


Practica 16 - Imágenes dentro de una página <img> Problema de HTML:Desarrollar una página que muestre dos imagenes llamadas foto2.jpg y foto3.jpg, las mismas se encuetran almacenadas en el servidor en la misma carpeta donde se almacenará la página que usted desarrollará. Disponer un título a cada imagen.



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

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 página HTML que contenga una lista no ordenada con cuatro lenguajes de programación muy populares. Agregar un título de segundo nivel indicando el concepto de esta lista.

<html> <head> </head> <body> <h2>Lenguajes de programación.</h2> <ul> <li>C</li> <li>C++</li>



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

Ejercicio 20 - Lista de definiciones (<dl>) Problema de HTML: Confeccionar una lista de definición indicando en los conceptos distintos lenguajes de programación. En la definición hacer una breve introducción del mismo. <html> <head> </head> <body> <dl> <dt>C++</dt> <dd>Es un lenguaje de programación, diseñado a mediados de los años 1980, por Bjarne Stroustrup, como extensión del lenguaje de programación C.</dd> <dt>Java</dt> <dd>Es un lenguaje de programación orientado a objetos desarrollado por Sun Microsystems a principios de los 90.</dd> <dt>JavaScript</dt> <dd>Es un lenguaje interpretado, es decir, que no requiere compilación, utilizado principalmente en páginas web, con una sintaxis semejante a la del lenguaje C.</dd> </dl> </body> </html>



Ejercicio 21 - Listas anidadas. Problema de HTML: Implementar una página que enumere una serie de paises en una lista ordenada y luego en cada pais disponer una lista de hipervínculos de periódicos de dicho pais.

<html> <head> </head> <body> <ol> <li>Argentina <ul> <li><a href="http://www.lanacion.com.ar">La Nación</a></li> <li><a href="http://www.clarin.com.ar">Clarín</a></li> <li><a href="http://www.pagina12.com.ar">Página 12</a></li> </ul> </li> <li>España <ul> <li><a href="http://www.elpais.es">El País Digital</a></li> <li><a href="http://www.abc.es">ABC</a></li> <li><a href="http://www.elmundo.es">El Mundo</a></li> </ul> </li> <li>México <ul> <li><a href="http://www.jornada.unam.mx">La Jornada</a></li> <li><a href="http://www.el-universal.com.mx">El Universal</a></li> </ul> </li> </ol> </body> </html>



Practica 18 - Lista ordenada (<ol>) Problema de HTML:Confeccione una lista ordenada con los tres paises con mayor población del planeta. Disponer un título de segundo nivel y debajo de la lista la suma de habitantes de esos tres paises enfatizado.

Practica 19 - Lista no ordenada (<ul>) Problema de HTML:Confeccionar una lista no ordenada que contenga hipervínculos a distintos periódicos que usted conoce. Agregar tantos item como periódicos conoce.

Practica 20 - Lista de definiciones (<dl>) Problema de HTML:Confeccione una lista de definición 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 programación. Luego disponer una lista ordenada con hipervínculos a sitios que tratan dichos lenguajes.



Ejercicio 22 – Trabajar con tablas

Ejercicio 22a.

Vamos a insertar en la página 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.



3 Haz clic sobre la opción 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 botón Aceptar.

6 Detrás de la etiqueta <hr> añade el siguiente código para añadir una línea en blanco, definir la tabla, empezar la definición 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 Detrás de la última etiqueta </ul> añade el siguiente código 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 Detrás de la etiqueta <img> añade el siguiente código 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 más pequeña, el ancho de las columnas cambia.



Ejercicio 22b.

1 Abre el documento perros.htm, de la carpeta originales/animales del curso.



En el documento que has abierto vamos a crear la siguiente tabla:

DIFERENCIAS ENTRE EL PERRO Y EL HOMBRE

DIFERENCIAS PERRO

HOMBRE PEQUEÑO GRANDE

Duración crecimiento 10 meses 18 a 24 meses 16 años

Tiempo de gestación 58 a 63 días 9 meses

Duración de vida del pelo/cabello 1 año 2 a 7 años

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 tamaño fijo para que ese tamaño no cambie según el tamaño de la ventana abierta.

Con el valor 2 del atributo border hacemos que el borde externo de la tabla aparezca más 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 añadir la etiqueta de cierre y después entre la dos etiquetas añadir las otras.

4 Escribe:

</table>



La tabla tiene seis filas (contamos el número 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 cuál es la fila con mayor número 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 después 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 después de la segunda etiqueta <tr..:

<td rowspan="2">DIFERENCIAS</td>

La segunda columna se expande sobre dos columnas:

8 Escribe a continuación:

<td colspan="2">PERRO</td>

La tercera columna se expande sobre dos filas:

9 Escribe a continuación:

<td rowspan="2">HOMBRE</td>

Vamos a rellenar ahora la tercera fila.

En esta fila sólo tenemos que definir dos columnas ya que la primera y la última están incluidas en el rowspan de la fila anterior.



10 Escribe después de la tercera etiqueta <tr..: <td>PEQUEÑO</td> <td>GRANDE</td>

Vamos a rellenar ahora la cuarta fila.

En esta fila tenemos que definir las cuatro columnas normales

11 Escribe después 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 después 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 también que la segunda columna se expande sobre dos columnas.

13 Escribe después 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 página con tu navegador.

Ahora añadiremos los colores de fondo. Si quieres puedes ir observando los cambios según los vayas introduciendo, guardando sin cerrar el bloc de notas y cada vez actualizando la página en tu navegador (como hiciste en el ejercicio paso a paso del tema 3).

15 Añade 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 Añade bgcolor="#669966" dentro de la primera etiqueta <tr>. De este modo, la primera fila de la tabla será de color verde oscuro.



17 Añade bgcolor="#FFCC99" dentro de la segunda etiqueta <tr>. De este modo, la segunda fila de la tabla será de color naranja.

18 Añade bgcolor="#FFFF99" dentro de la tercera etiqueta <tr>. De este modo, las celdas de esa fila, que contienen el texto PEQUEÑO y GRANDE, serán 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 líneas que se encuentran entre los tres primeros pares de etiquetas <tr> y </tr>. De este modo, las celdas de las tres primeras filas pasarán a ser títulos de columna, por lo que el texto aparecerá centrado y en negrita.

20 Comprueba que obtienes una página 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>



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

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 título a cada columna mediante celdas creadas mediante el elemento th. <html> <head> </head> <body> <table border="1"> <tr> <th>Paises</th><th>Cantidad de habitantes</th> </tr> <tr> <td>China</td><td>1300 millones</td> </tr> <tr> <td>India</td><td>1080 millones</td> </tr> <tr> <td>Estados Unidos</td><td>295 millones</td> </tr> </table> </body> </html>



Ejercicio 25 – Tabla con título (<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 título de los datos que representa la tabla. <html> <head> </head> <body> <table border="1"> <caption>Población de los paises con mayor cantidad de habitantes.</caption> <tr> <th>Paises</th><th>Cantidad de habitantes</th> </tr> <tr> <td>China</td><td>1300 millones</td> </tr> <tr> <td>India</td><td>1080 millones</td> </tr> <tr> <td>Estados Unidos</td><td>295 millones</td> </tr> </table> </body> </html>



Ejercicio 26 - Tabla y combinación de celdas. Problema de HTML: Confeccionar una tabla que muestre la facturación de los últimos tres meses de los artículos:'Discos Duros', 'CPU' y 'Monitores'. La primer columna debe mostrar solo el texto 'recursos' y en la primer fila el texto 'Facturación de los últimos tres meses'. <html> <head> </head> <body> <table border="1"> <tr> <th rowspan="4">Recursos</th><th colspan="4">Facturación de los últimos tres meses</th> </tr> <tr> <td>Discos Duros</td><td>23000</td><td>27200</td><td>26000</td> </tr> <tr> <td>CPU</td><td>73000</td><td>67300</td><td>51000</td> </tr> <tr> <td>Monitores</td><td>53000</td><td>72000</td><td>88000</td> </tr> </table> </body> </html>

Practica 22 – Trabajar con tablas


1 Abrir el documento donde.htm, de la carpeta deportes.

2 Modificar la página para colocar la lista de centros en una tabla como esta:



3 Rectificar la tabla para que las celdas de la primera fila sean títulos de columna.



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.



3 Modificar la tabla para que la celda que contiene el texto 6 € se combine con la celda que se encuentra debajo de ella.


Practica 22d: Flores.




2 Añadir una tabla para que cada palabra y la imagen ocupen el ancho de la ventana y estén equidistantes.


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 compañia y en la segunda el sueldo bruto (la compañía 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 compañía y en la segunda el sueldo bruto (la compañía tiene 4 empleados) Mostrar los textos 'Nombre del Empleado' y 'Sueldo Bruto' como primer fila de la tabla.

Practica 25 – Tabla con título (<caption>)

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

Practica 26 - Tabla y combinación de celdas. Problema de HTML:Confeccionar una tabla que muestre los nombres de periódicos y su nombre de dominio agrupados por paises. En la primer columna disponer los nombre de paises, expandir en fila de acuerdo a la cantidad de diarios de cada pais.

Ejercicio 27 - Contenido de la cabecera de la página (<title>) Problema:Confeccionar dos páginas que inicialicen el elemento title. Disponer un hipervínculo en cada página. <html> <head> <title>Título de la primer página</title> </head> <body> <h1>Prueba del elemento title</h1> <a href="pagina2.html">Ir a la segunda página</a> </body> </html>



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

Ejercicio 29 - Comentarios dentro de una página  Problema de HTML: Confeccionar una página que contenga una tabla. Almacenar en un comentario datos referentes al contenido de la tabla que solo interesen al desarrollador. <html> <head> </head> <body>  <table border="1"> <tr> <th rowspan="4">Recursos</th><th colspan="4">Facturación de los últimos tres meses</th> </tr> <tr> <td>Discos Duros</td><td>23000</td><td>27200</td><td>26000</td> </tr> <tr> <td>CPU</td><td>73000</td><td>67300</td><td>51000</td> </tr> <tr> <td>Monitores</td><td>53000</td><td>72000</td><td>88000</td> </tr> </table> </body> </html>

Ejercicio 30 - Sintaxis para caracteres especiales. Problema de HTML: Mostrar las siguiente ecuación: 10+x*y agregar aquí el símbolo menor 12*z <html> <head> <title>Título de la primer página</title> </head> <body> <h1> 10+x*y remplazar aquí el caracter especial del menor 12*z </h1> </body> </html>

Practica 27 - Contenido de la cabecera de la página (<title>) Problema:Confeccionar una página que muestre en el elemento title el nombre de dominio del sitio

Practica 28 - Comentarios dentro de una página  Confeccionar un página 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 artículos y en la segunda sus precios (agregarle el caracter de Euros a cada precio)

Ejercicio 31 – Crear conjunto de marcos


2 Abre el documento marcos.htm, de la carpeta originales/animales del curso.





4 Inserta una línea en blanco debajo de la etiqueta </head>, y escribe el siguiente código 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 línea, estarás creando dos marcos en la página. El primero será de 142 píxeles, y el otro ocupará el resto de la ventana del navegador. Los marcos se distribuirán en forma de columna (cols="142,*"). No habrá espacio entre los marcos (framespacing="0"), ni se mostrarán sus bordes (frameborder="NO" border="0").

Con la segunda línea, estarás especificando las propiedades del primer marco. Este marco se llamará marcoizquierdo, no se mostrarán sus bordes (frameborder="no"), y el usuario no podrá modifciar su tamaño (noresize). En este marco se cargará el documento menu.htm, y cuando éste no pueda ser mostrado en su totalidad, no aparecerán las barras de desplazamiento (scrolling="NO").

Con la tercera línea, estarás especificando las propiedades del segundo marco. Este marco se llamará marcoderecho, y no se mostrarán sus bordes (frameborder="no"). En este marco se cargará el documento inicio.htm.

5 Inserta una línea en blanco debajo de la etiqueta </frameset>, y escribe el siguiente código en ella:

<noframes> <body bgcolor="#99CC99"> Esta página tiene marcos, y tu navegador no los soporta </body> </noframes>

Este código será el utilizado por los navegadores que no soportan los marcos. Cuando un navegador no soporte los marcos, mostrará una página de color verde (<body bgcolor="#99CC99">), con el texto Esta página tiene marcos, y tu navegador no los soporta.



8 Abre el documento marcos.htm, que acabas de guardar, en un navegador, y comprueba que obtienes una página como la que aparece a continuacion.



Ejercicio 32 – Frames

Problema:Confeccionar una página 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>



Ejercicio 33 - Frames - Actualización de un frame a partir del enlace de otro frame Problema:Confeccionar una ventana que contenga dos frames verticales. Disponer dos hipervínculos en el frame de la izquierda que al ser presionados actualicen el archivo a mostrar por el frame de la derecha. <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>



Ejercicio 34 - Frames - Asignación de medidas en píxeles Problema:Confeccionar una página que contenga tres frames verticales, el de la izquierda y el de la derecha deben tener 200 píxeles de ancho, el siguiente ocupa el resto. <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>



<p>El navegador no soporta frames</p> </noframes> </frameset> </html>

Ejercicio 36 - Frames - Anidamiento de frameset Problema:Confeccionar una página que la primer columna tenga un frame y la segunda columna tenga dos frames. Utilizar frameset anidados para resolver el problema.

<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>



Ejercicio 37 - iframes Problema:Confeccionar una página que incorpore un iframe de 400 píxeles de ancho por 200 píxeles 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>



Practica 30 – Configurar marcos


1 Abrir el documento marcos.htm, de la carpeta originales/deportes del curso.



3 Modificar el conjunto de marcos para que se muestre un borde de 2 píxeles de color #CCFF99.



1 Crear el documento marcos.htm en la carpeta Mis documentos/ejercicios_html/flores. Esta página contendrá un conjunto de marcos para que en la parte superior de la ventana se visualice la página menu.htm y en el resto de la ventana se visualice la página inicio.htm. El marco superior tendrá un alto de 100 píxeles.



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 - Actualización de un frame a partir del enlace de otro frame Problema:Confeccionar una página que contenga dos frames verticales. En el frame de la izquierda disponer hipervínculos a periódicos de su país. Cuando se presione el hipervínculo actualizar el frame de la derecha con la página principal de ese periódico (tener en cuenta que los frames pueden mostrar páginas que se encuentran en distintos servidores)

Practica 33 - Frames - Asignación de medidas en píxeles

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

Practica 34 - Frames - Propiedades del elemento frame Problema:Confeccionar una página con dos frames horizontales. En la parte superior definir un frame con 100 píxeles de alto. Hacer que el mismo no se pueda redimensionar, no mustre la barra de scroll y no mustre el borde.

Practica 35 - Frames - Anidamiento de frameset Problema:Confeccionar una página que contenga dos filas. La primera fila muestre un frame de 70 píxeles de alto y la segunda fila dividirla en dos columnas que tengan dos frames, el primero de 200 píxeles y el otro del resto de píxeles sobrantes. Hacer que no se puedan redimensionar. ------------------------------------------------- | | | | | | ------------------------------------------------- | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | -------------------------------------------------



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

Ejercicio 38 – Insertar elementos de formulario


2 Abre el documento consultas.htm, de la carpeta originales/animales del curso.



4 Busca la línea <td>Campo de seleccion</td>, y borra el texto Campo de seleccion. En su lugar, escribe el siguiente código:

<select name="animal"> <option selected>--- Elige opción ---</option> <option>Perro</option> <option>Gato</option> <option>Otros</option> </select>

Con este código estarás insertando un menú, llamado animal, que tendrá cuatro opciones (--- Elige opción ---, Perro, Gato, Otros).

La opción seleccionada inicialmente será la primera (selected).

5 Inserta una línea en blanco debajo de la línea <input name="restablecer" type="reset" value="Restablecer">, y escribe el siguiente código en ella:

<input name="enviar" type="submit" value="Enviar">

Con este código, estarás insertando un botón para enviar el formulario (type="submit"), cuyo nombre será enviar, y que tendrá el texto Enviar.



8 Abre el documento consultas.htm, que acabas de guardar, en un navegador, y comprueba que obtienes una página como la que aparece a continuacion



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



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

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>



Comentarios:<br> <textarea name="comentarios" rows="5" cols="60"></textarea> <br> <input type="submit" value="Enviar"> </form> </body> </html>

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 programación que conoce. <html> <head> <title>Prueba de formulario</title> </head> <body> <form action="/registrardatos.php" method="post"> Ingrese su nombre: <input type="text" name="nombre" size="30"><br> Seleccione los lenguajes que conoce: <br> <input type="checkbox" name="java">Java<br> <input type="checkbox" name="cmasmas">C++<br> <input type="checkbox" name="c">C<br> <input type="checkbox" name="csharp">C#<br> <input type="submit" value="Enviar"> </form> </body> </html>



Ejercicio 43 - Formulario - input type="radio" Problema de HTML: Solicitar el ingreso del nombre de una persona y el máximo nivel en estudios alcanzado (sin estudios, estudios primarios, estudios secundarios o estudios universitarios) Ulitilzar controles de tipo radio para la selección de estudios realizados. <html> <head> <title>Prueba de formulario</title> </head> <body> <form action="/registrardatos.php" method="post"> Ingrese su nombre: <input type="text" name="nombre" size="30"><br> Seleccione el máximo nivel de estudios que tiene: <br> <input type="radio" name="estudios" value="1">Sin estudios<br> <input type="radio" name="estudios" value="2">Primario<br> <input type="radio" name="estudios" value="3">Secundario<br> <input type="radio" name="estudios" value="4">Universitario<br> <input type="submit" value="Enviar"> </form> </body> </html>



Ejercicio 44 - Formulario - select (cuadro de selección 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">España</option> <option value="3">México</option> <option value="4">Guatemala</option> <option value="5">Honduras</option> <option value="7">El Salvador</option> <option value="8">Venezuela</option> <option value="9">Colombia</option> <option value="10">Cuba</option> <option value="11">Bolivia</option> <option value="13">Perú</option> <option value="14">Ecuador</option> <option value="15">Paraguay</option> <option value="16">Uruguay</option> <option value="17">Chile</option> </select> <br> <input type="submit" value="Enviar"> </form> </body> </html>



Ejercicio 45 - Formulario - select (cuadro de selección múltiple) Problema de HTML: Confeccionar un cuadro de selección múltiple para elegir colores de una lista. Permitir la selección de varios colores. <html> <head> <title>Prueba de formulario</title> </head> <body> <form action="/registrardatos.php" method="post"> Seleccione uno o varios colores (Presione Ctrl para seleccionar varios colores)<br> <select name="colores[]" size="4" multiple> <option value="1">Rojo</option> <option value="2">Verde</option> <option value="3">Azul</option> <option value="4">Amarillo</option> <option value="5">Blanco</option> <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 página que muestre un control de tipo select. Agrupar las opciones en dos grupos, en uno las frutas y en otro las verduras. Utilizar el elemento optgroup para el agrupamiento. <html> <head> <title>Prueba de formulario</title> </head>



<body> <form action="/registrardatos.php" method="post"> Seleccione una fruta o verdura: <select name="articulo"> <optgroup label="Frutas"> <option value="1">Naranjas</option> <option value="2">Manzanas</option> <option value="3>Sandia</option> <option value="4">Frutilla</option> <option value="5">Durazno</option> <option value="6">Ciruela</option> </optgroup> <optgroup label="Verduras"> <option value="7">Lechuga</option> <option value="8">Acelga</option> <option value="9">Zapallo</option> <option value="10">Papas</option> <option value="11">Batatas</option> <option value="13">Zanahorias</option> <option value="14">Rabanitos</option> <option value="15">Calabaza</option> </optgroup> </select> <br> <input type="submit" value="Enviar"> </form> </body> </html>



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



<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>

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>



</html>

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">



<fieldset> <legend>Datos personales</legend> Apellido y nombre: <input type="text" name="nombre" size="30"><br> Documento de identidad: <input type="text" name="dni" size="8"><br> Fecha de nacimiento: <input type="text" name="fechanacimiento" size="12"><br> Dirección: <input type="text" name="direccionpersona" size="30"><br> </fieldset> <fieldset> <legend>Datos Laborales</legend> Nombre de la empresa: <input type="text" name="nombreempresa" size="30"><br> Actividad: <input type="text" name="actividad" size="50"><br> Dirección: <input type="text" name="direccionempresa" size="30"><br> </fieldset> <input type="submit" value="Enviar"> </form> </body> </html>



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 teléfono (cargar por defecto 453-) y por último en un textarea solicitar que ingrese comentarios. <html> <head> <title>Prueba de formulario</title> </head> <body> <form action="/registrardatos.php" method="post"> Apellido y nombre: <input type="text" name="nombre" size="30"><br> Es mayor de edad?:<br> <input type="radio" name="radio1" checked value="si">Si<br> <input type="radio" name="radio1" value="no">No<br> Telefono: <input type="text" value="453-" name="telefono" size="15"><br> <textarea name="comentarios" rows="5" cols="40">Ingrese aqui sus comentarios</textarea><br> <input type="submit" value="Enviar"> </form> </body> </html>

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)



<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 Niños, Adolescentes y Mayores. Deshabilitar el el elemento radio que corresponde a Niños. <html> <head> <title>Prueba de formulario</title> </head> <body> <form action="/registrardatos.php" method="post"> Seleccione la sección donde desea ingresar: <br> <input type="radio" name="seccion" value="1" disabled>Niños<br> <input type="radio" name="seccion" value="2">Adolescentes<br>



<input type="radio" name="seccion" value="3">Mayores<br> <input type="submit" value="Enviar"> </form> </body> </html>

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>



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 - Envío de datos mediante mail. Problema de HTML: Confeccionar una página que permita hacer un reclamo de reparaciones y se envíen los datos a una dirección de correo. Se debe poder ingresar el nombre, dirección y un comentario del problema. <html> <head> <title>Prueba de formulario</title>



</head> <body> <h2>Reclamos</h2> <form action="mailto:[email protected]" method="post" enctype="text/plain"> Ingrese su nombre: <input type="text" name="nombre" size="20"> <br> Ingrese su dirección: <input type="text" name="dirección" size="30"> <br> Informe del problema: <br> <textarea rows="5" cols="40" name="problema"></textarea> <br> <input type="submit" value="enviar"> </form> </body> </html>

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">



<fieldset> <legend>Formulario de comentarios.</legend> <label for="nombre">Ingrese su nombre:</label> <input type="text" name="nombre" size="30" id="nombre"><br> <label for="mail">Ingrese su mail:</label> <input type="text" name="mail" size="50" id="mail"><br> <label for="comentarios">Comentarios:</label><br> <textarea name="comentarios" rows="5" cols="60" id="comentarios"></textarea> <br> <input type="submit" value="Enviar"> </fieldset> </form> </body> </html>

Practica 37 – Insertar elementos de formulario


1 Abrir el documento reservas.htm, de la carpeta originales/deportes del curso.



En dicho documento hay dos botones de opción.

3 Modificar el primer botón de opción para que tenga el valor si, y esté activado inicialmente.

4 Modificar el segundo botón de opción para que tenga el valor no.





1 Abrir el documento pedidos.htm, de la carpeta originales/flores del curso.



3 Añadir el formulario que aparece a continuación. El elemento de entrada llamado cuenta debe ser un campo de contraseña, 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 página "/registrardatos.php" para que imprima en pantalla los valores ingresados. Disponer un botón de tipo submit para el envío de los datos.

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)



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 títulos de películas con su respectivo checkbox. Disponer también del botón de tipo submit para el envío de datos al servidor.

Practica 42 - Formulario - input type="radio" Problema de HTML:Confeccionar un formulario que solicite cual sistema operativo utiliza más (linux o window)

Practica 43 - Formulario - select (cuadro de selección 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 selección el visitante puede elegir entre las siguientes opciones: Excelente, Muy Bueno, Bueno, Regular y Malo.

Practica 44 - Formulario - select (cuadro de selección múltiple) 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 selección.

Practica 45 - Formulario - select (agrupamiento de opciones) Problema de HTML:Confeccione un control de tipo select con los nombres de paises de América 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 botón para subir los datos al servidor (en el botón escribir el texto: "Ingreso al" y en la línea siguiente "sitio")

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



Practica 48 - Formulario - input type="file" Problema de HTML:Confeccionar un formulario que solicite y envíe 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"), valoración del sitio (malo,regular,bueno,muy bueno, excelente) por defecto debe estar seleccionado "bueno". Por último disponer un textarea donde se puede ingresar los comentarios.

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 perímetro 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 máximo) 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 - Envío de datos mediante mail. Problema de HTML:Confeccionar un formulario que permita solicitar pizzas a domicilio. Enviar el pedido a la dirección de correo [email protected]



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

Ejercicio 59 – Insertar sonido de fondo

Primero añadiremos una música de fondo a una página.

1 Abre el archivo menu.htm, que se encuentra en la carpeta animales.

2 Inserta una línea en blanco debajo de la etiqueta <basefont>, y escribe el siguiente código en ella:

<bgsound src="varios/audioanimales.MID" loop="-1">

Con este código estarás estableciendo el archivo audioanimales.MID como sonido de fondo de la página, que se reproducirá continuamente en un bucle infinito (loop="-1").


4 Abre el documento menu.htm, que acabas de guardar, en un navegador, y comprueba que obtienes una página con sonido. No olvides encender unos altavoces que estén 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 código:

<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 botón Flash.

3 Sustituye la palabra PERROS por el siguiente código:



2 Después del párrafo Somos una cadena... insertar la animación Flash deportes.swf que se encuentra en la carpeta imagenes de la carpeta deportes, con calidad alta.



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.




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 automáticamente 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.


Ejercicio 60 – Modificar las propiedades de una capa



3 Haz clic sobre la opción 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 botón Aceptar.

6 Añade a la página detrás de la etiqueta </table> el siguiente código:

<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 código define una capa llamada gatosemana, de 320 píxeles de anchura (width:) y altura (height:), situada a 10 píxeles del margen izquierdo (left), y a 69 píxeles del margen superior (top).

La capa se mostrará a la distancia de los márgenes 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 opción Guardar del menú Archivo.

8 Abre el documento gatos.htm, que acabas de guardar, en un navegador, y comprueba que obtienes una página como la siguiente



9 Esta capa no la queremos ver de momento por eso añade visibility: hidden; después de layer-background-color:#FFFF99;.

10 Haz clic en la opción 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 párrafo Este mes... dentro de una capa de 509 por 85 píxeles, que se llame capaoferta, que tenga como color de fondo el color #CCFF99 y que se muestre en la posición en la que ha sido insertada dentro del código.

3 Guardar los cambios y comprobar el funcionamiento en un navegador, te debe quedar algo así.



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 según queramos la oferta o no

sólo tengamos que cambiar el valor del argumento en vez de escribir otra vez el texto de la oferta con sus colores. La página debería quedar así.


Ejercicio 61 – Llamadas a javascript


2 Abre el archivo gatos.htm, que se encuentra en la carpeta animales.

3 Copia el siguiente código delante la etiqueta </head>:

<script language="JavaScript" type="text/JavaScript">  </script>



4 Busca la línea <a href="#"><img src="imagenes/gatito.gif" alt="gatito" border="0"></a>.

Este código hace referencia a la imagen gatito.gif, que tiene borde 0 y el texto alternativo gatito.

Al mismo tiempo, la imagen tiene asociado un vínculo vacío (<a href="#">).

Añade onClick="MM_showHideLayers('gatosemana','','show')" después de border="0".

Con este código, estarás llamando a la función javascript MM_showHideLayers, que se encuentra al principio del documento. Esta función se encarga de cambiar la visibilidad de las capas. En este caso, le estás pasando como parámetros el nombre de la capa que tiene que mostrar gatosemana y lo que tiene que hacer show (mostrar) , por lo que la función cambiará la visibilidad de la capa gatosemana por el valor show (mostrar).

La llamada a la función se realizará cuando hagas clic sobre la imagen (onClick).

5 Añade antes de la etiqueta </td> el siguiente código <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 línea <p align="center"><a href="#"><font color="#000000" size="4">Cerrar</font></a></p>, que se encuentra casi al final del documento.

Este código hace referencia a un vínculo vacío (<a href="#">) con el texto Cerrar.

Añade onClick="MM_showHideLayers('gatosemana','','hide')" después de size="4" dentro de la etiqueta <font.

Al igual que en el punto anterior, con este código, estarás llamando a la función javascript MM_showHideLayers, pero para cambiar la visibilidad de la capa gatosemana por el valor hide (ocultar).

La llamada a la función se realizará cuando hagas clic sobre el texto (onClick). De esta manera cuando hagas clic sobre el texto cerrar se esconderá la capa.



9 Abre el documento gatos.htm, que acabas de guardar, en un navegador, y comprueba que obtienes una página como la que aparece en la imagen. Comprueba cómo al pulsar sobre la imagen del gato se muestra la capa, y cómo al pulsar sobre el texto Cerrar, que se encuentra en la capa, ésta vuelve a ocultarse.



Practica 59 – Llamadas a javascript


1 Abrir el documento menu.htm, de la carpeta deportes.

2 Establecer una llamada a la función mensaje, para que cuando se pulse sobre la imagen email.gif se ejecute dicha función. La función tiene el siguiente código:

function mensaje() { //v1.0 alert('No olvides mandarnos tus sugerencias.'); }

La llamada a la función se deberá escribir en la etiqueta <img de la imagen.



1 Abrir el documento pedidos.htm, de la carpeta flores.

2 Establecer una llamada a la función mensaje, para que cuando se pulse sobre el botón Enviar se ejecute dicha función y aparezca el mensaje Recibirás un aviso cuando se haya realizado la entrega

del pedido.




Ejercicio 62 – Crear hoja de estilos

1 Abre el documento conestilos.htm, de la carpeta originales/animales del curso.



3 Abre el documento conestilos.htm en un navegador.

Comprueba que la página solo muestra una línea de texto, y que el fondo de la página 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 código 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 mayúsculas (uppercase) y que sea de color #FF0000 (rojo).


7 Haz clic sobre la opción 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 página como la que aparece a continuacion.



Ejercicio 63 - Conceptos básicos de hojas de estilo. Problema de HTML: Confeccionar una página que contenga un título de nivel 1 de color azul (#0000ff) y un párrafo 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>título página</title> </head> <body> <h1 style="color:#0000ff">Noticias del día.</h1> <p style="color:#888888;background-color:#ffffdd"> Aquí la descripción de la noticia. Aquí la descripción de la noticia. Aquí la descripción de la noticia. Aquí la descripción de la noticia. Aquí la descripción de la noticia. Aquí la descripción de la noticia. Aquí la descripción de la noticia. Aquí la descripción de la noticia. Aquí la descripción de la noticia. Aquí la descripción de la noticia. Aquí la descripción de la noticia. Aquí la descripción de la noticia. Aquí la descripción de la noticia. Aquí la descripción de la noticia. Aquí la descripción de la noticia. Aquí la descripción de la noticia. Aquí la descripción de la noticia. Aquí la descripción de la noticia.



Aquí la descripción de la noticia. </p> </body> </html>

Ejercicio 64 - Propiedades relacionadas al texto en CSS Problema de HTML: Confeccionar una página que contenga un título de nivel 2 (h2) centrado y luego bloques donde muestre un nombre de una persona subrayado y un párrafo con un color de fondo y de las letras. Indentar la primer linea de cada párrafo.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"> <title>título página</title> </head> <body> <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.



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>



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 párrafo. Hacer que algunas palabras del párrafo aparezcan resaltadas en otro color. Disponer todos los comentarios con un color gris de fondo.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"> <title>título página</title> </head> <body> <div style="background-color:#eeeeee"> <h3>Luis Barrionuevo</h3> <p style="color:#888888;text-indent:20px"> Aquí <span style="background-color:#eeee00">comentarios.</span> Aquí comentarios. Aquí comentarios. Aquí comentarios. Aquí comentarios. Aquí comentarios. Aquí comentarios. Aquí comentarios. Aquí comentarios. Aquí comentarios. Aquí comentarios. Aquí comentarios. Aquí comentarios. Aquí comentarios. Aquí comentarios. Aquí comentarios. Aquí comentarios. Aquí comentarios. Aquí comentarios. Aquí comentarios. Aquí comentarios. </p> <h3>Ana Rodriguez</h3> <p style="color:#888888;text-indent:20px"> <span style="background-color:#eeee00">Aquí comentarios.</span> Aquí comentarios.



Aquí comentarios. Aquí comentarios. Aquí comentarios. Aquí comentarios. Aquí comentarios. Aquí comentarios. Aquí comentarios. 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>

Ejercicio 66 - Propiedades relacionadas a las fuentes en CSS Problema de HTML: Confeccionar una página que contenga un título de nivel 2 con fuente Arial, un párrafo con fuente de tipo Times New Roman de 14 píxeles en negrita y una serie de párrafos agrupados en un div con tamaño de fuente de 12 píxeles 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>título página</title>



</head> <body> <h2 style="font-family:Arial">Título principal</h2> <p style="font-family:Times New Roman;font-size:14px;font-weight:bolder"> Párrafo en negrita. Párrafo en negrita. Párrafo en negrita. Párrafo en negrita. Párrafo en negrita. Párrafo en negrita. Párrafo en negrita. Párrafo en negrita. Párrafo en negrita. Párrafo en negrita. Párrafo en negrita. Párrafo en negrita. Párrafo en negrita. Párrafo en negrita. Párrafo en negrita. Párrafo en negrita. Párrafo en negrita. Párrafo en negrita. Párrafo en negrita. Párrafo en negrita. Párrafo en negrita. Párrafo en negrita. Párrafo en negrita. Párrafo en negrita. Párrafo en negrita. Párrafo en negrita. Párrafo en negrita. Párrafo en negrita. Párrafo en negrita. </p> <div style="font-family:Verdana;font-size:12px"> <p> Primer párrafo. Primer párrafo. Primer párrafo. Primer párrafo. Primer párrafo. Primer párrafo. Primer párrafo. Primer párrafo. Primer párrafo. Primer párrafo.



Primer párrafo. Primer párrafo. Primer párrafo. Primer párrafo. Primer párrafo. Primer párrafo. Primer párrafo. Primer párrafo. Primer párrafo. Primer párrafo. Primer párrafo. Primer párrafo. Primer párrafo. Primer párrafo. Primer párrafo. Primer párrafo. Primer párrafo. Primer párrafo. Primer párrafo. Primer párrafo. Primer párrafo. Primer párrafo. Primer párrafo. Primer párrafo. Primer párrafo. Primer párrafo. Primer párrafo. Primer párrafo. Primer párrafo. </p> <p> Segundo párrafo. Segundo párrafo. Segundo párrafo. Segundo párrafo. Segundo párrafo. Segundo párrafo. Segundo párrafo. Segundo párrafo. Segundo párrafo. Segundo párrafo. Segundo párrafo. Segundo párrafo. Segundo párrafo. Segundo párrafo. Segundo párrafo.



Segundo párrafo. Segundo párrafo. Segundo párrafo. Segundo párrafo. Segundo párrafo. Segundo párrafo. Segundo párrafo. Segundo párrafo. Segundo párrafo. Segundo párrafo. </p> </div> </body> </html>

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



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

Ejercicio 69 - Declaración DOCTYPE. para Frames Problema:Confeccionar una ventana que contenga dos frames verticales. Disponer dos hipervínculos en el frame de la izquierda que al ser presionados actualicen el archivo a mostrar por el frame de la derecha. Definir el elemento DOCTYPE para cada página. Luego validar cada página 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 - Validación de la página a través de un enlace. Problema:Confeccionar una página que muestre los nombres de 5 lenguajes de programación separados por un guión. Agregar un enlace a la página de validación de HTML.



<!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>

Practica 60 – Aplicar estilos


1 Abrir el documento estilosd.txt, de la carpeta originales/deportes del curso.



3 Abrir el documento conestilos.htm, de la carpeta originales/deportes del curso.



5 Aplicar el estilo llamado mitexto al primer párrafo, y el estilo otrotexto al segundo párrafo, los estilos están definidos en la hoja de estilos estilosd.txt.



1 Abrir el documento estilosf.txt, de la carpeta originales/flores del curso.





3 Abrir el documento conestilos.htm, de la carpeta originales/flores del curso.



5 Aplicar el estilo palabra a la palabra fondo, (el estilo se encuentra definido en la hoja de estilos estilosf.txt).


Practica 61 - Conceptos básicos de hojas de estilo. Problema de HTML:Sabemos que hay una propiedad en CSS que define el tamaño de la fuente en píxeles llamada font-size. Luego cree varios párrafos 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 página que muestre el título de una noticia. Seguidamente un párrafo con el resumen de la noticia y finalmente la noticia completa. Utilizar las propiedades relacionadas al texto vistas para realzar la noticia en la página.

Practica 63 - Elementos HTML <div> y <span> Problema de HTML:Confeccionar una página que contenga dos divisiones con una serie de párrafos cada una. Disponer color de fondo distinto para cada sección. En la segunda sección mostrar el mismo texto de la primera sección pero con algunas palabras tachadas.

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

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



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

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



HTML 5

Ejercicio 71 - DOCTYPE Problema: Confeccionar una página que muestre el DOCTYPE propuesto para el HTML5. <!DOCTYPE HTML> <html> <head> </head> <body> <p>Si vemos el código fuente de esta página veremos la forma de declarar el DOCTYPE en HTML5.</p> </body> </html>

Ejercicio 72 – CANVAS Problema: Obtener el contexto gráfico 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");



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>

Ejercicio 73 - CANVAS (dibujar líneas) Problema: Dibujar dos líneas 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() {



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>

Ejercicio 74 - CANVAS (dibujar rectángulo - perímetro) Problema: Dibujar un rectángulo ubicado en la columna 50 y fila 10 con un ancho de 200 píxeles y 100 píxeles de altura <!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(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>

Ejercicio 75 - CANVAS (estilos de línea) Problema: Confeccionar una serie de líneas 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");



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);



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>

Ejercicio 76 - CANVAS (rectángulo relleno) Problema: Dibujar un rectángulo 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() {



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>

Ejercicio 78 - CANVAS (dibujar varias líneas y rellenar la figura creada) Problema: Dibujar un triángulo con el color de perímetro azul y su interior de color rojo. El borde del perímetro debe ser de 5 píxeles. <!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.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>

Ejercicio 79 - CANVAS (arcos rellenos y lineal) Problema: Mostrar una serie de arcos lineales y cerrados. <!DOCTYPE HTML> <html> <head>



Ejercicio 80 - CANVAS (curva de bezier) Problema: Dibujar una curva de bézier. <!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">



Su navegador no permite utilizar canvas. </canvas> </body> </html>

Ejercicio 81 - CANVAS (método quadraticCurveTo) Problema: Confeccionar un programa que muestre el tipo de curva que genera el método 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;



} } 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>

Ejercicio 82 - CANVAS (graficar texto) Problema: Confeccionar un programa que emplee los métodos 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";



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>

Ejercicio 83 - CANVAS (graficar imagenes) Problema: Utilizar las distintas variantes como se puede llamar al método drawImage. <!DOCTYPE HTML> <html> <head> <script type="text/javascript"> function retornarLienzo(x) { var canvas = document.getElementById(x); if (canvas.getContext) {



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>



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>



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)");



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>

Ejercicio 87 - CANVAS (gradiente radial) Problema: Dibujar un círculo utilizando gradiente radial. <!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.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>

Ejercicio 88 - CANVAS (patrones de imagenes) Problema: Dibujar un cuadrado y definir un patrón con una imagen para rellenar el mismo. <!DOCTYPE HTML> <html> <head>



Ejercicio 89 - CANVAS (otro canvas como patrón) Problema: Confeccionar una página que tenga dos CANVAS, en el primero graficar una cruz y en el segundo graficar un cuadrado que cubra todo el canvas utilizando como patrón 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>



<canvas id="lienzo2" width="300" height="300"><br> Su navegador no permite utilizar canvas. </canvas> </body> </html>

Ejercicio 90 - CANVAS (grabar y recuper el estado - save(), restore()) Problema: Confeccionar una función que grafique un rectángulo 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();



} 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>

Ejercicio 91 - CANVAS (translate) Problema: Confeccionar un programa que implemente una función que dibuje un triángulo, la función recibe la coordenada donde debe dibujarla y la base y altura del triángulo. Trasladar el punto de origen a través del método 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; }



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



Ejercicio 93 - CANVAS (scale) Problema: Mostrar una imagen que gire en el lienzo y casa avance muestre la imagen con tamaño 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;



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>

Ejercicio 94 – AUDIO Problema: Utilizar el elemento AUDIO para reproducir sonidos. <!DOCTYPE HTML> <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>

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>



Ejercicio 96 - Elementos HTML semánticos. Problema: Crear una página 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 semánticos del HTML5</title> </head> <body> <header> <h1>Encabezado de la página</h1> </header> <nav> <p>enlaces de navegación</p> </nav> <section> <p>Sección 1</p> </section> <section> <p>Sección 2</p> </section> <aside> <p>Publicidad</p> </aside> <footer> <p>Pié de página</p> </footer> </body> </html>



Practica 68 - CANVAS (dibujar líneas) Problema de HTML:Dibujar una cuadrícula formada por 10 líneas horizontales y 10 líneas verticales.

Practica 69 - CANVAS (dibujar rectángulo - perímetro) Problema de HTML:Dibujar tres cuadrados de color rojo, verde y azul.

Practica 70 - CANVAS (estilos de línea) Problema de HTML:Dibujar un triángulo con líneas de 20 píxeles de ancho y los vértices redondeados.

Practica 71 - CANVAS (rectángulo relleno) Problema de HTML:Dibujar 250 cuadraditos (50 por línea) Los colores de los cuadrados deben empezar en negro y avanzar hasta el rojo.

Practica 72 - CANVAS (borrar una región) Problema de HTML:Dibujar un cuadrado. Luego de 3 segundos hacer que se borre.

Practica 73 - CANVAS (dibujar varias líneas 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 círculo 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 bézier y hacer que los puntos de atracción 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.



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 píxeles, luego la segunda columna y así sucesivamente (la foto tiene un tamaño de 249 píxeles de ancho y 251 de alto)

Practica 78 - CANVAS (transparencias) Problema de HTML:Dibujar 250 cuadrados del rojo al negro. Dibujar un rectángulo negro grande que tape todos los cuadrados. Redibujar y hacer que el rectángulo se vuelva cada vez más 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 triángulo y utilizar un patrón de tipo imagen para pintar su interior.

Practica 81 - CANVAS (patrones de imagenes) Problema de HTML:Dibujar un triángulo y utilizar un patrón de tipo imagen para pintar su interior.

Practica 82 - CANVAS (otro canvas como patrón) Problema de HTML:Crear dos canvas, en el primero dibujar un triángulo y en el segundo canvas dibujar un cuadrado utilizando como patrón el contenido del primer canvas.

Practica 83 - CANVAS (rotate) Problema de HTML:Mostrar una imagen y efectuar su rotación en forma indefinida.

cuaderno de trabajo html

Documents