Guía de trabajo Práctico N° 1 - Universidad Nacional de Quilmes
Anuncio
Elementos de Programación y Lógica Universidad Nacional de Quilmes ‐ Segundo Semestre 2016 Guía de trabajo Práctico N° 1 Ejercicio N° 1 1) ¿Cómo se hace en los distintos navegadores para ver el código fuente de la página? 2) Hacer una lista con los navegadores más conocidos 3) ¿Qué es la W3c? Ejercicio N° 2 Dado el siguiente código fuente, de mipagina.html: <!DOCTYPE html PUBLIC "­//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1­transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http­equiv="Content­Type" content="text/html; charset=utf­8" /> <title>Mi primer página html</title> </head> <body> <h1><a href="https://wp­themes.com/?p=8" rel="bookmark">HTML</a></h1> <div> Posted on <a href="https://wp­themes.com/?p=8" rel="bookmark">June 21, 2008</a> by <a href="https://wp­themes.com/?author=1">Theme Admin</a></div> <div> <p>What HTML tags would you like to see? Let’s start with an unordered list: One Two Three Four And then move on to a more interesting ordered list: one, two buckle my shoe three, four knock at the door Five, six pick up sticks Seven, eight, lay them straight Nine, ten, a big fat hen …</p> </div> <p>&nbsp;</p> </body> </html> Resaltar en distintos colores las etiquetas vistas, usar el mismo color para la etiqueta de apertura y de cierre. Ejercicio N° 3 Diseñar una página HTML y definir su estructura general. Ejercicio N° 4 Diseñar 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. Ejercicio N° 5 Suponer que la página del periódico anterior debe ser actualizada cada 40 segundos ¿ Qué etiquetas incorporaría? ¿Dónde? Ejercicio N° 6 1 Elementos de Programación y Lógica Universidad Nacional de Quilmes ‐ Segundo Semestre 2016 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, además debe pintar de color rojo (#FF0000) dichas palabras. Ejercicio N° 7 Diseñar una página HTML y definir su estructura general. a) Agregar un título (para la pestaña del navegador) y un título (con su nombre y apellido) b) Poner a toda la página un color de fondo. c) Incluir una foto que permita identificarte (por el momento, posicionarla en cualquier lugar de la pantalla) d) Agregar una tabla como la siguiente y completarla con tu información personal: Nacionalidad: Edad: Localidad: E mail: Estudios cursados: Conocimientos de programación: d) Los textos de la primer columna deben ir en “negrita”, los de la segunda columna en un color a elección. e) El email debe tener definido un link “mailto” f) Guardar el archivo con tu apellido y la extensión .html, ubicarlo en una carpeta que también contenga la imagen, zipearlo y enviarlo adjunto en un mail a la lista de correo de tu comisión. Ejercicio N° 8 Acceder al código fuente del sitio del Departamento de Ciencia y Tecnología de la Universidad de Quilmes (http://www.unq.edu.ar/secciones/15­ciencia­y­tecnolog%C3%ADa/) Guardarse en un archivo local una copia del código, y luego realizarle las siguientes modificaciones: a) Que el visitante de nuestro sitio vea, en la pestaña de su navegador, el siguiente texto: “Departamento de Ciencia y Tecnología de la Universidad de Quilmes”. b) Que al posicionar el cursor en el logo de la UNQ el visitante vea el texto “Conocé la página principal de la Universidad Nacional de Quilmes”. c) Que los dos párrafos de texto explicativo (el primero comienza con “Los Departamentos son unidades académicas…” y el segundo, con “El Departamento de 2 Elementos de Programación y Lógica Universidad Nacional de Quilmes ‐ Segundo Semestre 2016 Ciencia y Tecnología alberga…”) tengan una tipología similar a la de una máquina de escribir. Y que sus links tengan un color magenta. d) Que los links de la sección “Accesos rápidos” también tengan un color magenta. e) Además, que todos los links de los puntos c) y d) proporcionen información de a dónde se dirigen cuando el visitante posiciona el cursor sobre ellos. Ejercicio N° 9 Diseñar 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. Ejercicio N° 10 Diseñar una página que muestre dos imágenes llamadas foto2.jpg y foto3.jpg, las mismas se encuentran almacenadas en el servidor en la misma carpeta donde se almacenará la página que usted desarrollará. Disponer un título a cada imagen. Ejercicio N° 11 Diseñar 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 pestaña" y el segundo "Hacer la apertura en el mismo navegador". Ejercicio N° 12 Diseñe una lista ordenada con los tres países con mayor población del planeta,por ejemplo Argentina ­ 40.000.000. Disponer un título de segundo nivel y debajo de la lista la suma de habitantes de esos tres países enfatizado. Ejercicio N° 13 Diseñar una lista no ordenada de lenguajes de programación. Luego disponer una lista ordenada con hipervínculos a sitios que tratan dichos lenguajes. Por ejemplo: ● PHP 1. PHP 2. PHPeros 3. PHP Adictos 4. PHP Hispano ● JavaScript….. 3 Elementos de Programación y Lógica Universidad Nacional de Quilmes ‐ Segundo Semestre 2016 Ejercicio N° 14 Diseñar 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) Ejercicio N° 15 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) Ejercicio N° 16 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. Ejercicio N° 17 Confeccionar un formulario que permita elegir el sistema operativo que utiliza más (linux o window). No puede seleccionar ambos. Ejercicio N° 18 Confeccionar un formulario que permita solicitar pizzas a domicilio. Agrupar los controles aquellos relacionados con el cliente y los referentes al pedido. 4 Elementos de Programación y Lógica Universidad Nacional de Quilmes ‐ Segundo Semestre 2016 Ejercicio N° 19 Generar un formulario similar al de la imagen: (Fuente: http://www.pcweb.es/manual_html/mostrar.php?opcion=formularios:_ejemplo) El campo “Estado Civil” debe desplegar un menú de unas 4 ó 5 opciones para seleccionar. Ejercicio N° 20 Teniendo en cuenta las nuevas etiquetas de HTML 5, indicar al lado de cada línea cuál es su significado <!DOCTYPE html> <html> <head> <title>Ejercicios y prácticas HTML , aprendoencasa.com</title> <meta charset=”ISO­8859­1”> <meta name=”application­name” content=”Ejercicios y prácticas 1.0”> 5 Elementos de Programación y Lógica Universidad Nacional de Quilmes ‐ Segundo Semestre 2016 <meta name=”author” content=”Lucas Perez”> <meta name=”description” content=”Prácticas y ejercicios de HTML”> <meta name=”keywords” content=”ejercicios, practicas, programación, html, etc.”> <meta http­equiv=”refresh” content=”400”> <meta http­equiv=”content­type” content=”text/html; charset=ISO­8859­1”> <link rel="stylesheet" type="text/css" href="theme.css" hreflang=”es”> <link rel="shortcut icon" href="/favicon.ico"> </head> <body> </body> </html> Ejercicio N° 21 1º Realiza en HTML5 un documento web, en el cual se especifique el tipo de documento, el juego de caracteres, información relativa al autor, descripción, etc. e incluya un pequeño script que visualice el mensaje “Hola, soy un nuevo documento web.” y en caso de no tener JavaScript activado visualice un mensaje advirtiendo del hecho. Ejercicio N° 22 Realizar en HTML5 una página con links a otra parte del documento, a un documento externo y a un e­mail Ejercicio N° 23 Realizar una página similar a la siguiente, que muestre un mapa de Google con la ubicación de la Universidad de Quilmes 6 Elementos de Programación y Lógica Universidad Nacional de Quilmes ‐ Segundo Semestre 2016 Ejercicio N° 24 Realizar un sitio web compuesto de tres páginas, las cuales estén enlazadas entre ellas, en las que se muestren ejemplos de inserción de video, audio, y algún objeto, así como también incluyan etiquetas vistas hasta el momento como pueden ser de estructura o semánticas, imágenes, tablas, listas, etc. Ejercicio N° 25 A partir del código HTML proporcionado, añadir las reglas CSS necesarias para que la página resultante tenga el mismo aspecto que el de la siguiente imagen: Figura 1. Aspecto final de la página A continuación se muestra el código HTML de la página sin estilos: <!DOCTYPE html PUBLIC "­//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1­transitional.dtd"> <html xmlns= "http://www.w3.org/1999/xhtml" > <head> <meta http­equiv= "Content­Type" content= "text/html; charset=utf­8" /> <title> Ejercicio de selectores </title> 7 Elementos de Programación y Lógica Universidad Nacional de Quilmes ‐ Segundo Semestre 2016 </head> <body> <h1 id="titulo" >Lorem ipsum dolor sit amet </h1> <p>Nulla pretium. Sed tempus nunc vitae neque. <strong> Suspendisse gravida </strong> , metus a scelerisque sollicitudin, lacus velit ultricies nisl, nonummy tempus neque diam quis felis. <span class= "destacado" >Etiam sagittis tortor </span> sed arcu sagittis tristique. </p> <h2 id="subtitulo" >Aliquam tincidunt, sem eget volutpat porta </h2> <p>Vivamus velit dui, placerat vel, feugiat in, ornare et, urna. <a href="#">Aenean turpis metus, <em>aliquam non </em>, tristique in </a>, pretium varius, sapien. Proin vitae nisi. Suspendisse <span class= "especial" >porttitor purus ac elit </span> . Suspendisse eleifend odio at dui. In in elit sed metus pretium elementum. </p> <table summary= "Descripción de la tabla y su contenido" > <caption> Título de la tabla </caption> <thead> <tr> <th scope= "col"></th> <th scope= "col" class= "especial" >Título columna 1 </th> <th scope= "col" class= "especial" >Título columna 2 </th> </tr> </thead> <tfoot> <tr> <th scope= "col"></th> <th scope= "col">Título columna 1 </th> <th scope= "col">Título columna 2 </th> </tr> </tfoot> <tbody> <tr> <th scope= "row" class= "especial" >Título fila 1 </th> <td>Donec purus ipsum </td> <td>Curabitur <em>blandit </em></td> </tr> <tr> <th scope= "row">Título fila 2 </th> <td>Donec <strong> purus ipsum </strong></td> <td>Curabitur blandit </td> </tr> 8 Elementos de Programación y Lógica Universidad Nacional de Quilmes ‐ Segundo Semestre 2016 </tbody> </table> <div id="adicional" > <p>Donec purus ipsum, posuere id, venenatis at, <span> placerat ac, lorem </span> . Curabitur blandit, eros sed gravida aliquet, risus justo porta lorem, ut mollis lectus tortor in orci. Pellentesque nec augue. </p> <p>Fusce nec felis eu diam pretium adipiscing. <span id="especial" >Nunc elit elit, vehicula vulputate </span> , venenatis in, posuere id, lorem. Etiam sagittis, tellus in ultrices accumsan, diam nisi feugiat ante, eu congue magna mi non nisl. </p> <p>Vivamus ultrices aliquet augue. <a href="#">Donec arcu pede, pretium vitae </a>, rutrum aliquet, tincidunt blandit, pede. Aliquam in nisi. Suspendisse volutpat. Nulla facilisi. Ut ullamcorper nisi quis mi. </p> </div> </body> </html> En este ejercicio solamente es preciso conocer que la propiedad se llama color y que como valor se puede indicar directamente el nombre del color. Los nombres de los colores también están estandarizados y se corresponden con el nombre en inglés de cada color. En este ejercicio, se deben utilizar los colores: teal, red, blue, orange, purple, olive,fuchsia y green. (fuente: http://librosweb.es/libro/css/capitulo_15/ejercicio_2.html) Ejercicio N° 26 A partir del código HTML proporcionado: <!DOCTYPE html PUBLIC "­//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1­transitional.dtd"> <html xmlns= "http://www.w3.org/1999/xhtml" > <head> <meta http­equiv= "Content­Type" content= "text/html; charset=iso­8859­1" /> <title> Ejercicio posicionamiento float </title> <style type="text/css" > </style> </head> 9 Elementos de Programación y Lógica Universidad Nacional de Quilmes ‐ Segundo Semestre 2016 <body> <div> &laquo; Anterior &nbsp; Siguiente &raquo; </div> </body> </html> Determinar las reglas CSS necesarias para que el resultado sea similar al mostrado en la siguiente imagen: Figura 1. Elementos posicionados mediante float (fuente: http://librosweb.es/libro/css/capitulo_15/ejercicio_6.html) 10
