Cuaderno de Trabajo HTML
Short Description
Download Cuaderno de Trabajo HTML...
Description
[HTML]
IDSYSTEMS 2013
CUADERNO DE EJERCICIOS HTML
Cuaderno de Trabajo Html se encu encuentra bajo una Licencia Creative Commons Atribución-No Atribución ComercialLicenciamiento Recíproco 3.0 Unported Unported. Mayo 2013 – IDSystems
CUADERNO DE EJERCICIOS Y PRACTICAS
Página 1
[HTML]
IDSYSTEMS 2013
Contenido Ejercicio 1 - Crear una pagina basica .............................................................................................................9 Ejercicio 2 – Estructura interna de una pagina HTML ................................................................................ 10 Ejercicio 3 – Salto de linea .................................................................................................................. 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 .................................................................................................................. 12 Practica 4 – Parrafo .............................................................................................................................. 12 Ejercicio 5 – Insertar texto con diferentes propiedades ............................................................................ 12 Ejercicio 5b.............................................................................................................................................. 14 Ejercicio 6 - Títulos .................................................................................... 16 Ejercicio 7 - Enfasis ( ) .......................................................................................................... 17 Practica 5 – Modificar las propiedades del texto ....................................................................................... 17 Practica 5a: Deportes.............................................................................................................................. 17 Practica 5b: Deportes. ............................................................................................................................ 18 Practica 5c: Deportes. ............................................................................................................................. 18 Practica 5d: Flores. ................................................................................................................................. 19 PRACTICA 6 - Títulos .................................................................................. 19 PRACTICA 7 - Enfasis ( ) ....................................................................................................... 19 Ejercicio 8 – Insertar un hiperenlace .......................................................................................................... 20 Ejercicio 9 - Hipervínculo a otra página del mismo sitio ...................................................................... 21 Ejercicio 10 - Hipervínculo a otro sitio de internet .............................................................................. 22 Ejercicio 11 – Apertura de un hipervinculo en otra instancia del navegador ............................................ 22 Ejercicio 12 - Hipervínculo a un cliente de correo ............................................................................... 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 8a: Deportes.............................................................................................................................. 26 Practica 8b: Deportes. ............................................................................................................................ 26 Practica 8c: Flores. .................................................................................................................................. 26 CUADERNO DE EJERCICIOS Y PRACTICAS
Página 2
[HTML]
IDSYSTEMS 2013
Practica 9 - Hipervínculo a otra página del mismo sitio ...................................................................... 27 Practica 10 - Hipervínculo a otro sitio de internet ............................................................................... 27 Practica 11 - Apertura de un hipervínculo en otra instancia del navegador. ............................................ 27 Practica 12 - Hipervínculo a un cliente de correo ................................................................................ 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 ............................................................................ 31
Ejercicio 17 - Hipervínculo mediante una imagen y .................................................................. 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 ................................................................................. 33 Practica 17 - Hipervínculo mediante una imagen y .................................................................. 34 Ejercicio 18 -
Lista ordenada () ........................................................................................................ 34
Ejercicio 19 -
Lista no ordenada () ................................................................................................... 34
Ejercicio 20 - Lista de definiciones () .................................................................................................. 35 Ejercicio 21 - Listas anidadas. ..................................................................................................................... 36 Practica 18 -
Lista ordenada () ......................................................................................................... 37
Practica 19 -
Lista no ordenada () .................................................................................................... 37
Practica 20 - Lista de definiciones () .................................................................................................... 37 Practica 21 - Listas anidadas. ...................................................................................................................... 37 Ejercicio 22 – Trabajar con tablas ............................................................................................................... 38 Ejercicio 22a. ........................................................................................................................................... 38 Ejercicio 22b............................................................................................................................................ 39 Ejercicio 23 - Tabla () ........................................................................................................ 42 Ejercicio 24 – Tabla con encabezado () ............................................................................................... 43 Ejercicio 25 – Tabla con título () ................................................................................................. 44 Ejercicio 26 - Tabla y combinación de celdas. ............................................................................................ 45 Practica 22 – Trabajar con tablas................................................................................................................ 45 Practica 22a: Deportes............................................................................................................................ 45 CUADERNO DE EJERCICIOS Y PRACTICAS
Página 3
[HTML]
IDSYSTEMS 2013
Practica 22b: Deportes. .......................................................................................................................... 46 Practica 22c: Flores. ................................................................................................................................ 46 Practica 22d: Flores. ............................................................................................................................... 46 Practica 23 - Tabla () ......................................................................................................... 47 Practica 24 – Tabla con encabezado () ................................................................................................ 47 Practica 25 – Tabla con título () .................................................................................................. 47 Practica 26 - Tabla y combinación de celdas. ............................................................................................. 47 Ejercicio 27 - Contenido de la cabecera de la página () ................................................................... 47 Ejercicio 28 - Contenido de la cabecera de la página () ................................................................. 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 () .................................................................... 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 30a: Deportes............................................................................................................................ 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 - .............................................................................................................. 60 Ejercicio 40 - Formulario - input type="text"/ input type="password" ...................................................... 61 Ejercicio 41 - Formulario – textarea ........................................................................................................... 61 Ejercicio 42 - Formulario - input type="checkbox" ..................................................................................... 62 CUADERNO DE EJERCICIOS Y PRACTICAS
Página 4
[HTML]
IDSYSTEMS 2013
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 37a: Deportes............................................................................................................................ 76 Practica 37b: Flores. ............................................................................................................................... 77 Practica 38 - Formulario - ............................................................................................................... 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 CUADERNO DE EJERCICIOS Y PRACTICAS
Página 5
[HTML]
IDSYSTEMS 2013
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 57a: Deportes............................................................................................................................ 81 Practica 57b: Deportes. .......................................................................................................................... 82 Practica 57c: Flores. ................................................................................................................................ 82 Ejercicio 60 – Modificar las propiedades de una capa ............................................................................... 82 Practica 58 – Modificar las propiedades de una capa ................................................................................ 84 Practica 58a: Deportes............................................................................................................................ 84 Practica 58b: Flores. ............................................................................................................................... 84 Ejercicio 61 – Llamadas a javascript ........................................................................................................... 85 Practica 59 – Llamadas a javascript ............................................................................................................ 87 Practica 59a: Deportes............................................................................................................................ 87 Practica 59b: Flores. ............................................................................................................................... 87 Ejercicio 62 – Crear hoja de estilos ............................................................................................................. 88 Ejercicio 63 - Conceptos básicos de hojas de estilo.................................................................................... 89 Ejercicio 64 - Propiedades relacionadas al texto en CSS ............................................................................ 90 Ejercicio 65 - Elementos HTML y .......................................................................................... 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 60a: Deportes............................................................................................................................ 98 Practica 60b: Flores. ............................................................................................................................... 98 Practica 61 - Conceptos básicos de hojas de estilo. ................................................................................... 99 Practica 62 - Propiedades relacionadas al texto en CSS ............................................................................. 99 Practica 63 - Elementos HTML y ........................................................................................... 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 CUADERNO DE EJERCICIOS Y PRACTICAS
Página 6
[HTML]
IDSYSTEMS 2013
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 CUADERNO DE EJERCICIOS Y PRACTICAS
Página 7
[HTML]
IDSYSTEMS 2013
Practica 76 - CANVAS (graficar texto) ....................................................................................................... 131 Practica 77 - CANVAS (graficar imagenes) ................................................................................................ 132 Practica 78 - CANVAS (transparencias) ..................................................................................................... 132 Practica 79 - CANVAS (sombras) ............................................................................................................... 132 Practica 80 - CANVAS (gradiente lineal) ................................................................................................... 132 Practica 81 - CANVAS (patrones de imagenes) ......................................................................................... 132 Practica 82 - CANVAS (otro canvas como patrón) .................................................................................... 132 Practica 83 - CANVAS (rotate)................................................................................................................... 132
CUADERNO DE EJERCICIOS Y PRACTICAS
Página 8
[HTML]
IDSYSTEMS 2013
Ejercicio 1 - Crear una pagina basica 1 Si no tienes abierto el Bloc de notas, ábrelo para realizar el primer ejercicio. 2 Escribe el código que aparece a continuación: Inicio 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.
CUADERNO DE EJERCICIOS Y PRACTICAS
Página 9
[HTML]
IDSYSTEMS 2013
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. PHP - Java - JavaScript - C - C++ RESULTADO:
Ejercicio 3 – Salto de linea Problema de HTML: Confeccionar una página HTML que muestre distintos lenguajes de programación, mostrarlos uno por línea. PHP JavaScript Java C C++ RESULTADO:
CUADERNO DE EJERCICIOS Y PRACTICAS
Página 10
[HTML]
IDSYSTEMS 2013
Ejercicio 4 - Parrafo Problema de HTML: Confeccione una página que muestre dos párrafos. En el primero agregar varios saltos de línea. SQL, Structure Query Language (Lenguaje de Consulta Estructurado) es un lenguaje de programacion para trabajar con base de datos relacionales como MySQL, Oracle, etc. MySQL es un interpretador de SQL, es un servidor de base de datos. 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. Este tutorial tiene por objetivo acercar los conceptos iniciales para introducirse en el mundo de las bases de datos. 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.
CUADERNO DE EJERCICIOS Y PRACTICAS
Página 11
[HTML]
IDSYSTEMS 2013
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 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 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 , y escribe el siguiente código en ella: Con este código estarás estableciendo el color rojo (#FF0000) y tamaño 1 para el texto del documento. CUADERNO DE EJERCICIOS Y PRACTICAS
Página 12
[HTML]
IDSYSTEMS 2013
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 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 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 1 Si no tienes abierto el Bloc de notas, ábrelo para realizar el ejercicio. 2 Abre el documento marcos.htm, de la carpeta originales/animales del curso.
CUADERNO DE EJERCICIOS Y PRACTICAS
Página 50
[HTML]
IDSYSTEMS 2013
3 Guarda la página con el mismo nombre en tu directorio de ejercicios Mis documentos/ejercicios_html/animales 4 Inserta una línea en blanco debajo de la etiqueta , y escribe el siguiente código en ella: 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 , y escribe el siguiente código en ella: Esta página tiene marcos, y tu navegador no los soporta 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 (), con el texto Esta página tiene marcos, y tu navegador no los soporta. 6 Haz clic sobre el menú Archivo. 7 Haz clic sobre la opción Guardar. 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.
CUADERNO DE EJERCICIOS Y PRACTICAS
Página 51
[HTML]
IDSYSTEMS 2013
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. prueba de frames El navegador no soporta frames
CUADERNO DE EJERCICIOS Y PRACTICAS
Página 52
[HTML]
IDSYSTEMS 2013
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. prueba de frames El navegador no soporta frames
CUADERNO DE EJERCICIOS Y PRACTICAS
Página 53
[HTML]
IDSYSTEMS 2013
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. prueba de frames El navegador no soporta frames
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. prueba de frames CUADERNO DE EJERCICIOS Y PRACTICAS
Página 54
[HTML]
IDSYSTEMS 2013
El navegador no soporta frames
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.
prueba de frames El navegador no soporta frames CUADERNO DE EJERCICIOS Y PRACTICAS
Página 55
[HTML]
IDSYSTEMS 2013
Ejercicio 37 - iframes Problema:Confeccionar una página que incorpore un iframe de 400 píxeles de ancho por 200 píxeles de alto. prueba de iframes Esto es una prueba de un iframe No tiene disponible el navegador la capacidad de iframe Esto ya está fuera del iframe
CUADERNO DE EJERCICIOS Y PRACTICAS
Página 56
[HTML]
IDSYSTEMS 2013
Practica 30 – Configurar marcos Practica 30a: Deportes. 1 Abrir el documento marcos.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 Modificar el conjunto de marcos para que se muestre un borde de 2 píxeles de color #CCFF99. 4 Guardar los cambios y comprobar el funcionamiento en un navegador.
Practica 30b: Flores. 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.
CUADERNO DE EJERCICIOS Y PRACTICAS
Página 57
[HTML]
IDSYSTEMS 2013
Practica 31 – Frames Problema:Confeccionar una ventana que contenga 3 frames horizontales. Para esto definir la propiedad row del elemento frameset con el siguiente valor: rows="20%,60%,20%"
Practica 32 - Frames - 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. ------------------------------------------------| | | | | | ------------------------------------------------| | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | -------------------------------------------------
CUADERNO DE EJERCICIOS Y PRACTICAS
Página 58
[HTML]
IDSYSTEMS 2013
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 1 Si no tienes abierto el Bloc de notas, ábrelo para realizar el ejercicio. 2 Abre el documento consultas.htm, de la carpeta originales/animales del curso. 3 Guarda la página con el mismo nombre en tu directorio de ejercicios Mis documentos/ejercicios_html/animales 4 Busca la línea Campo de seleccion, y borra el texto Campo de seleccion. En su lugar, escribe el siguiente código: --- Elige opción --- Perro Gato Otros 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 , y escribe el siguiente código en ella: 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. 6 Haz clic sobre el menú Archivo. 7 Haz clic sobre la opción Guardar. 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
CUADERNO DE EJERCICIOS Y PRACTICAS
Página 59
[HTML]
IDSYSTEMS 2013
Ejercicio 39 - Formulario - 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 Prueba de formulario Ingrese su nombre:
CUADERNO DE EJERCICIOS Y PRACTICAS
Página 60
[HTML]
IDSYSTEMS 2013
Ejercicio 40 - Formulario - input type="text"/ input type="password" Problema de HTML: Confeccionar un formulario que solicite el ingreso del nombre de un usuario y su clave. Mostrar asteriscos donde se ingresa la clave. Disponer dos botones, uno para el envío de datos al servidor y otro para borrar el contenido de todos los controles (editores de texto) que contiene el formulario. Prueba de formulario Ingrese su nombre: Ingrese su clave:
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. Prueba de formulario Ingrese su nombre: Ingrese su mail: CUADERNO DE EJERCICIOS Y PRACTICAS
Página 61
[HTML]
IDSYSTEMS 2013
Comentarios:
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. Prueba de formulario Ingrese su nombre: Seleccione los lenguajes que conoce: Java C++ C C#
CUADERNO DE EJERCICIOS Y PRACTICAS
Página 62
[HTML]
IDSYSTEMS 2013
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. Prueba de formulario Ingrese su nombre: Seleccione el máximo nivel de estudios que tiene: Sin estudios Primario Secundario Universitario
CUADERNO DE EJERCICIOS Y PRACTICAS
Página 63
[HTML]
IDSYSTEMS 2013
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) Prueba de formulario Ingrese su nombre: Seleccione su pais: Argentina España México Guatemala Honduras El Salvador Venezuela Colombia Cuba Bolivia Perú Ecuador Paraguay Uruguay Chile
CUADERNO DE EJERCICIOS Y PRACTICAS
Página 64
[HTML]
Ejercicio 45 -
IDSYSTEMS 2013
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. Prueba de formulario Seleccione uno o varios colores (Presione Ctrl para seleccionar varios colores) Rojo Verde Azul Amarillo Blanco Negro Naranja Violeta
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. Prueba de formulario CUADERNO DE EJERCICIOS Y PRACTICAS
Página 65
[HTML]
IDSYSTEMS 2013
Seleccione una fruta o verdura: Naranjas Manzanas
View more...
Comments
