practica diseÑo web

I.E SAGRADO CORAZON.PRACTICAS DISEÑO WEB. GRADO 11 2011

Esp: GREIDY CECILIA ARCE USMAN

1. Confeccione una página con las marcas mínimas que debe tener y en el cuerpo de

la misma disponga su nombre y apellido.

<html> <head> </head> <body> Rodriguez Pablo </body> </html>

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

<html> <head></head> <body> Diego Rodriguez. <br> Ana - Eduardo </body> </html>

3. Confeccione una página que muestre en un párrafo datos referentes a sus estudios

y en otro párrafo su nombre y mail.

<html> <head> </head> <body> <p> Colegio primario: Enet Nro1.<br> Colegio secundario: General Laprida.<br> Estudios universitarios: Universidad del Cabo. </p> <p> Nombre:Rodriguez pablo.<br> Mail: [email protected] </p>



</body> </html> 4. 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. <html> <head> </head> <body> <h1>Belgrano sale campeón nuevamente.</h1> <h2>Noticias políticas.</h2> <h3>Asumen sus funciones los diputados y senadores.</h3> <p> El próximo lunes asumen sus funciones los nuevos diputados y senadores elegidos por el pueblo el més pasado. Al acto lo presidirá el gobernador junto con todos sus ministros.<br> Se espera que los temas pendientes puedan ser resueltos prontamente. </p> <h3>Destitución del intendente de General Paz.</h3> <p> Luego de varias sesiones del consejo deliberante de General Paz el intendente fue destituido por una incorrecta asignación de partidas presupuestarias.<br> Se espera que el mes próximo se elija nuevo intendente. </p> <h2>Noticias deportivas</h2> <h3>Belgrano nuevamente triunfa.</h3> <p> En un partido vibrante el equipo celeste se queda nuevamente con la copa. El resultado final de 2 a 1 no denota la ventaja real que existió en el campo de juego.<br> Se espera la llegada del equipo al aeropuerto al mediodía. </p> <h3>Convocatoria de nuevos jugadores a la selección.</h3> <p>



El director técnico llamo a nuevos jugadores para que se incorporen a la selección nacional.<br> Se espera que con los dos delanteros nuevos se reviertan los resultados negativos.<br> El mes próximo se enfrentará a un combinado de Europa. </p> <h4>Propiedad:La vanguardia digital.</h4> </body> </html> 5. 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. <html> <head> </head> <body> <p><strong>PHP</strong>: es un lenguaje de programación usado generalmente para la creación de contenido para sitios web. PHP es un acrónimo recurrente que significa <em>"PHP Hypertext Pre-processor"</em></p> <p><strong>JSP</strong>: en el campo de la Informática, es una tecnología para crear aplicaciones web. Es un desarrollo de la compañía Sun Microsystems, y su funcionamiento se basa en <em>scripts</em>, que utilizan una variante del lenguaje <em>java</em>.</p> <p><strong>ASP</strong>: es una tecnología del lado servidor de Microsoft para páginas web generadas dinámicamente, que ha sido comercializada como un anexo a <em>Internet Information Server</em> (IIS).</p> </body> </html> 6. 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 <html> <head> </head> <body>



<h1>Blog de lenguajes de programación.</h1> <a href="pagina2.html">Lenguaje PHP</a> <br> <a href="pagina3.html">Lenguaje JavaScript</a> </body> </html> ______________________________________ <html> <head> </head> <body> <h1>PHP</h1> <a href="pagina1.html">Retornar.</a> </body> </html> ______________________________________ <html> <head> </head> <body> <h1>JavaScript</h1> <a href="pagina1.html">Retornar.</a> </body> </html> 7. 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. <html> <head> </head> <body> <a href="http://www.clarin.com.ar">Diario Argentino Clarín</a> <br> <a href="http://www.clarin.com/shared/v8/ayuda-clarin/index.html">Seccion de ayuda del diario Clarín</a> </body> </html>



8. 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. <html> <head> </head> <body> <h1>Geometría Generativa (Obra 1)</h1> <img src="foto2.jpg" alt="Cuadrados amarillos"> <h1>Geometría Generativa (Obra 2)</h1> <img src="foto3.jpg" alt="Cuadrados rojos"> </body> </html> 9. 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. <html> <head> </head> <body> <a href="pagina2.html"><img src="/imagenes/foto1.jpg" alt="Pintura Geométrica"> </a> </body> </html> _________________________________________________ <html> <head> </head> <body> <a href="pagina3.html"><img src="/imagenes/foto2.jpg" alt="Pintura Geométrica"> </a> </body>



</html> _____________________________________________ <html> <head> </head> <body> <a href="pagina1.html"><img src="/imagenes/foto3.jpg" alt="Pintura Geométrica"> </a> </body> </html> 10. 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". <html> <head> </head> <body> <h1>Blog de Actualidad.</h1> <h2>Apertura en otra ventana.</h2> <p> <a href="http://www.microsiervos.com" target="_blank">Microsiervos</a> <br> <a href="http://www.mangasverdes.es" target="_blank">Mangas Verdes</a> <br> <a href="http://alt1040.com" target="_blank">Alt1040</a> <br> </p> <h2>Apertura en la misma ventana.</h2> <p> <a href="http://www.microsiervos.com">Microsiervos</a> <br> <a href="http://www.mangasverdes.es">Mangas Verdes</a> <br> <a href="http://alt1040.com">Alt1040</a> <br> </p>



</body> </html> 11. 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. <html> <head> </head> <body> <h1>Pizzas online</h1> <h2>Promoción 1</h1> <p>1 Muzzarella.<br> 1 bebida cola<br> Costo: $5<br> <a href="mailto:[email protected]?subject=Promoción 1&body=Ingrese aquí su dirección y teléfono:">Solicitar.</a> </p> <h2>Promoción 2</h1> <p>2 Muzzarellas.<br> Costo: $6<br> <a href="mailto:[email protected]?subject=Promoción 2&body=Ingrese aquí su dirección y teléfono:">Solicitar.</a> </p> <h2>Promoción 3</h1> <p>3 Muzzarella.<br> Costo: $10<br> <a href="mailto:[email protected]?subject=Promoción 3&body=Ingrese aquí su dirección y teléfono:">Solicitar.</a> </p> </body> </html>



12. 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. <html> <head> </head> <body> <h1>Noticias del día.</h1> <a href="#noticia1">Noticia 1</a><br> <a href="#noticia2">Noticia 2</a><br> <a href="#noticia3">Noticia 3</a><br> <a href="#noticia4">Noticia 4</a><br> <a name="noticia1"></a> <h2>Noticia 1</h2> <p> Noticia 1. Noticia 1. Noticia 1. Noticia 1. Noticia 1. Noticia 1. Noticia 1. Noticia 1. Noticia 1. Noticia 1. Noticia 1. Noticia 1. Noticia 1. Noticia 1. Noticia 1. Noticia 1. Noticia 1. Noticia 1. Noticia 1. Noticia 1. Noticia 1. Noticia 1. Noticia 1. Noticia 1. Noticia 1. Noticia 1. Noticia 1. Noticia 1. Noticia 1. Noticia 1. Noticia 1. Noticia 1. Noticia 1. Noticia 1. Noticia 1. Noticia 1. Noticia 1. Noticia 1. Noticia 1. Noticia 1. Noticia 1. Noticia 1. Noticia 1. Noticia 1. </p> <a name="noticia2"></a> <h2>Noticia 2</h2> <p> Noticia 2. Noticia 2. Noticia 2. Noticia 2. Noticia 2. Noticia 2. Noticia 2. Noticia 2. Noticia 2. Noticia 2. Noticia 2. Noticia 2. Noticia 2. Noticia 2. Noticia 2. Noticia 2. Noticia 2. Noticia 2. Noticia 2. Noticia 2. Noticia 2. Noticia 2. Noticia 2. Noticia 2. Noticia 2. Noticia 2. Noticia 2. Noticia 2. Noticia 2. Noticia 2. Noticia 2. Noticia 2. Noticia 2. Noticia 2. Noticia 2. Noticia 2. Noticia 2. Noticia 2. Noticia 2. Noticia 2. Noticia 2. Noticia 2.



</p> <a name="noticia3"></a> <h2>Noticia 3</h2> <p> Noticia 3. Noticia 3. Noticia 3. Noticia 3. Noticia 3. Noticia 3. Noticia 3. Noticia 3. Noticia 3. Noticia 3. Noticia 3. Noticia 3. Noticia 3. Noticia 3. Noticia 3. Noticia 3. Noticia 3. Noticia 3. Noticia 3. Noticia 3. Noticia 3. Noticia 3. Noticia 3. Noticia 3. Noticia 3. Noticia 3. Noticia 3. Noticia 3. Noticia 3. Noticia 3. Noticia 3. Noticia 3. Noticia 3. Noticia 3. Noticia 3. Noticia 3. Noticia 3. Noticia 3. Noticia 3. Noticia 3. Noticia 3. Noticia 3. Noticia 3. Noticia 3. Noticia 3. Noticia 3. Noticia 3. Noticia 3. Noticia 3. Noticia 3. Noticia 3. Noticia 3. Noticia 3. Noticia 3. Noticia 3. Noticia 3. Noticia 3. Noticia 3. Noticia 3. Noticia 3. Noticia 3. Noticia 3. Noticia 3. Noticia 3. Noticia 3. Noticia 3. Noticia 3. Noticia 3. Noticia 3. Noticia 3. Noticia 3. Noticia 3. Noticia 3. Noticia 3. Noticia 3. Noticia 3. Noticia 3. Noticia 3. </p> <a name="noticia4"></a> <h2>Noticia 4</h2> <p> Noticia 4. Noticia 4. Noticia 4. Noticia 4. Noticia 4. Noticia 4. Noticia 4. Noticia 4. Noticia 4. Noticia 4. Noticia 4. Noticia 4. Noticia 4. Noticia 4. Noticia 4. Noticia 4. Noticia 4. Noticia 4. Noticia 4. Noticia 4. Noticia 4. Noticia 4. Noticia 4. Noticia 4. Noticia 4. Noticia 4. Noticia 4. Noticia 4. Noticia 4. Noticia 4. Noticia 4. Noticia 4. Noticia 4. Noticia 4. Noticia 4. Noticia 4. Noticia 4. Noticia 4. Noticia 4. Noticia 4. Noticia 4. Noticia 4. Noticia 4. Noticia 4. Noticia 4. Noticia 4. Noticia 4. Noticia 4. Noticia 4. Noticia 4. Noticia 4. Noticia 4. Noticia 4. Noticia 4. Noticia 4. Noticia 4. Noticia 4. Noticia 4. Noticia 4. Noticia 4. Noticia 4. Noticia 4. Noticia 4.



Noticia 4. Noticia 4. Noticia 4. Noticia 4. Noticia 4. Noticia 4. Noticia 4. Noticia 4. Noticia 4. Noticia 4. Noticia 4. Noticia 4. Noticia 4. Noticia 4. Noticia 4. Noticia 4. Noticia 4. Noticia 4. Noticia 4. Noticia 4. Noticia 4. Noticia 4. Noticia 4. Noticia 4. Noticia 4. Noticia 4. Noticia 4. Noticia 4. </p> </body> </html> 13. Disponer una serie de hipervínculos sobre noticias del día. Enlazar los hipervínculos con anclas que se encuentran en otra página. <html> <head> </head> <body> <h1>Noticias del día.</h1> <a href="pagina2.html#noticia1">Noticia 1</a><br> <a href="pagina2.html#noticia2">Noticia 2</a><br> <a href="pagina2.html#noticia3">Noticia 3</a><br> <a href="pagina2.html#noticia4">Noticia 4</a><br> </body> </html> ________________________________________ <html> <head> </head> <body> <a name="noticia1"></a> <h2>Noticia 1</h2> Noticia 1. Noticia 1. Noticia 1. Noticia 1. Noticia 1. Noticia 1. Noticia 1. Noticia 1. Noticia 1. Noticia 1. Noticia 1. Noticia 1. Noticia 1. Noticia 1. Noticia 1. Noticia 1. Noticia 1. Noticia 1. Noticia 1. Noticia 1. Noticia 1. Noticia 1. Noticia 1. Noticia 1. Noticia 1. Noticia 1. Noticia 1. Noticia 1. Noticia 1. Noticia 1. Noticia 1. Noticia 1. Noticia 1. Noticia 1. Noticia 1. Noticia 1. Noticia 1. Noticia 1. Noticia 1. Noticia 1.



Noticia 1. Noticia 1. Noticia 1. Noticia 1. Noticia 1. Noticia 1. Noticia 1. Noticia 1. Noticia 1. Noticia 1. Noticia 1. Noticia 1. Noticia 1. Noticia 1. Noticia 1. Noticia 1. Noticia 1. Noticia 1. Noticia 1. Noticia 1. Noticia 1. Noticia 1. Noticia 1. Noticia 1. </p> <a name="noticia2"></a> <h2>Noticia 2</h2> <p> Noticia 2. Noticia 2. Noticia 2. Noticia 2. Noticia 2. Noticia 2. Noticia 2.Noticia 2. Noticia 2. Noticia 2. Noticia 2. Noticia 2. Noticia 2. Noticia 2. Noticia 2. Noticia 2.Noticia 2. Noticia 2. Noticia 2. Noticia 2. Noticia 2. Noticia 2. Noticia 2. Noticia 2. Noticia 2.Noticia 2. Noticia 2. Noticia 2. Noticia 2. Noticia 2. Noticia 2. Noticia 2. Noticia 2. Noticia 2.Noticia 2. Noticia 2. Noticia 2. Noticia 2. Noticia 2. Noticia 2. Noticia 2. Noticia 2. Noticia 2.Noticia 2. Noticia 2. </p> <a name="noticia3"></a> <h2>Noticia 3</h2> <p> Noticia 3. Noticia 3. Noticia 3. Noticia 3. Noticia 3. Noticia 3. Noticia 3. Noticia 3. Noticia 3. Noticia 3. Noticia 3. Noticia 3. Noticia 3. Noticia 3. Noticia 3. Noticia 3. Noticia 3. Noticia 3. Noticia 3. Noticia 3. Noticia 3. Noticia 3. Noticia 3. Noticia 3. Noticia 3. Noticia 3. Noticia 3. Noticia 3. Noticia 3. Noticia 3. Noticia 3. Noticia 3. Noticia 3. Noticia 3. Noticia 3. Noticia 3. Noticia 3. Noticia 3. Noticia 3. Noticia 3. Noticia 3. Noticia 3. Noticia 3. Noticia 3. Noticia 3. Noticia 3. Noticia 3. Noticia 3. Noticia 3. </p> <a name="noticia4"></a> <h2>Noticia 4</h2> <p> Noticia 4. Noticia 4. Noticia 4. Noticia 4. Noticia 4. Noticia 4. Noticia 4. Noticia 4. Noticia 4. Noticia 4. Noticia 4. Noticia 4. Noticia 4. Noticia 4. Noticia 4. Noticia 4. Noticia 4. Noticia 4. Noticia 4. Noticia 4. Noticia 4. Noticia 4. Noticia 4. Noticia 4. Noticia 4. Noticia 4. Noticia 4.



Noticia 4. Noticia 4. Noticia 4. Noticia 4. Noticia 4. Noticia 4. Noticia 4. Noticia 4. Noticia 4. Noticia 4. Noticia 4. Noticia 4. Noticia 4. Noticia 4. Noticia 4. Noticia 4. Noticia 4. Noticia 4. </p> </body> </html> 14. Confeccione una lista ordenada con los tres países 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 países enfatizado. <html> <head> </head> <body> <h2>Paises con mayor población</h2> <ol> <li>China (1300 millones)</li> <li>India (1080 millones)</li> <li>Estados Unidos (295 millones)</li> </ol> <p>Sumando estos tres paises tenemos una población de <strong>2675 millones</strong></p> </body> </html> 15. Confeccionar una lista no ordenada que contenga hipervínculos a distintos periódicos que usted conoce. Agregar tantos item como periódicos conoce. <html> <head> </head> <body> <h2>Periódicos de Argentina.</h2> <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.lavoz.com.ar">La voz del interior</a></li> </ul> </body> </html> 16. Confeccione una lista de definición de un conjunto de palabras que utilice en su ámbito laboral. <html> <head> </head> <body> <dl> <dt>Analista de sistemas</dt> <dd>Un analista, en la disciplina de la ingeniería del software, es aquel individuo que ejerce las tareas de análisis de los sistemas informáticos, con el fin de automatizarlos.</dd> <dt>Programador</dt> <dd>Un programador es un individuo que ejerce la programación, es decir, que escribe programas de ordenador. Los programadores también reciben el nombre de desarrolladores de software.</dd> <dt>Webmaster</dt> <dd>Es la persona responsable de un sitio web.</dd> </body> </html> 17. Confeccionar una lista no ordenada de lenguajes de programación. Luego disponer una lista ordenada con hipervínculos a sitios que tratan dichos lenguajes. <html> <head> </head> <body> <ul> <li>PHP <ol> <li><a href="http://www.vivaphp.com.ar">Viva PHP</a></li> <li><a href="http://www.phpadictos.com">PHP Adictos</a></li> <li><a href="http://www.php-hispano.net">PHP Hispano</a></li>



<li><a href="http://www.php.org.mx">PHP México</a></li> </ol> </li> <li>JavaScript <ol> <li><a href="http://www.gamarod.com.ar">Gamarod</a></li> <li><a href="http://www.htmlpoint.com/javascript/tutorial">HTML Point</a></li> </ol> </li> <li>C++ <ol> <li><a href="http://codigomaldito.blogspot.com">Código Maldito C++</a></li> <li><a href="http://www.arrakis.es/~rporcar">Club Builder</a></li> </ol> </li> </ul> </body> </html> 18. 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) <html> <head> </head> <body> <table border="1"> <tr> <td>Rodriguez Pablo</td><td>1700</td> </tr> <tr> <td>Lopez Ana</td><td>1950</td> </tr> <tr> <td>Gomez Luis</td><td>1473</td> </tr> <tr> <td>Menendez Carlos</td><td>1640</td>



</tr> </table> </body> </html> 19. 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. <html> <head> </head> <body> <table border="1"> <tr> <th>Nombre del Empleado</th><th>Sueldo Bruto</th> </tr> <tr> <td>Rodriguez Pablo</td><td>1700</td> </tr> <tr> <td>Lopez Ana</td><td>1950</td> </tr> <tr> <td>Gomez Luis</td><td>1473</td> </tr> <tr> <td>Menendez Carlos</td><td>1640</td> </tr> </table> </body> </html> 20. 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) Disponer en la tabla un título representativo. <html> <head>



</head> <body> <table border="1"> <caption>Listado de sueldos de la compañía xx</caption> <tr> <th>Nombre del Empleado</th><th>Sueldo Bruto</th> </tr> <tr> <td>Rodriguez Pablo</td><td>1700</td> </tr> <tr> <td>Lopez Ana</td><td>1950</td> </tr> <tr> <td>Gomez Luis</td><td>1473</td> </tr> <tr> <td>Menendez Carlos</td><td>1640</td> </tr> </table> </body> </html> 21. Confeccionar una tabla que muestre los nombres de periódicos y su nombre de dominio agrupados por países. En la primer columna disponer los nombre de países, expandir en fila de acuerdo a la cantidad de diarios de cada país. <html> <head> </head> <body> <table border="1"> <tr> <th rowspan="3">Argentina</th><td>La Nación</td><td><a href="http://www.lanacion.com.ar">www.lanacion.com.ar</a></td> </tr> <tr> <td>Clarín</td><td><a href="http://www.clarin.com.ar">www.clarin.com.ar</a></td> </tr>



<tr> <td>La voz del interior</td><td><a href="http://www.lavoz.com.ar">www.lavoz.com.ar</a></td> </tr> <tr> <th rowspan="3">España</th><td>El País digital</td><td><a href="http://www.elpais.es">www.elpais.es</a></td> </tr> <tr> <td>ABC</td><td><a href="http://www.abc.es">www.abc.es</a></td> </tr> <tr> <td>El Mundo</td><td><a href="http://www.elmundo.es">www.elmundo.es</a></td> </tr> <th rowspan="2">México</th><td>La Jornada</td><td><a href="http://www.jornada.unam.mx">www.jornada.unam.mx</a></td> </tr> <tr> <td>El Universal</td><td><a href="http://www.el-universal.com.mx">http://www.el-universal.com.mx</a></td> </tr> </table> </body> </html> 22. Confeccionar una página que muestre en el elemento title el nombre de dominio del sitio. <html> <head> <title>www.htmlJORGE.com.co</title> </head> <body> <h1>Aprenda a crear páginas HTML fácilmente</h1> </body> </html>

23. Confeccionar un página que muestre dos tablas. Luego comentar la segunda y ver el resultado. <html> <head> </head> <body> <h2>Año 2006</h2> <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> <!-- <h2>Año 2007</h2> <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>43000</td><td>29100</td><td>18000</td> </tr> <tr> <td>CPU</td><td>78000</td><td>53400</td><td>61000</td> </tr> <tr> <td>Monitores</td><td>73000</td><td>92000</td><td>98000</td> </tr>



</table> --> </body> </html> 24. 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. <html> <head> <title>Prueba de formulario</title> </head> <body> <form action="/registrardatos.php" method="post"> Ingrese nombre: <input type="text" name="nombre" size="20"> <br> Ingrese su edad: <input type="text" name="edad" size="3"> <br> <input type="submit" value="enviar"> </form> </body> </html> 25. 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) <html> <head> <title>Prueba de formulario</title> </head> <body> <form action="/registrardatos.php" method="post"> Ingrese su mail: <input type="text" name="nombre" size="50"> <br>



Ingrese su clave: <input type="password" name="clave1" size="12"> <br> Repita el ingreso de su clave: <input type="password" name="clave2" size="12"> <br> <input type="submit" value="enviar"> <input type="reset" value="borrar"> </form> </body> </html> 26. 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) <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> Ingrese su dni: <input type="text" name="dni" size="9"><br> Ingrese su Curriculum:<br> <textarea name="curriculum" rows="7" cols="80"></textarea> <br> <input type="submit" value="Enviar"> </form> </body> </html> 27. 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.



<html> <head> <title>Prueba de formulario</title> </head> <body> <form action="/registrardatos.php" method="post"> Ingrese su mail: <input type="text" name="mail" size="50"><br> Ingrese su clave: <input type="password" name="clave" size="10"><br> <em>Seleccione las películas a pedir:</em> <br> <input type="checkbox" name="pelicula1">Batman y Robin<br> <input type="checkbox" name="pelicula2">Superman regresa<br> <input type="checkbox" name="pelicula3">Una película de miedo<br> <input type="checkbox" name="pelicula4">La historia sin fin<br> <input type="submit" value="Enviar"> </form> </body> </html> 28. Confeccionar un formulario que solicite cual sistema operativo utiliza más (linux o window) <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> Que sistema operativo utiliza más? <br> <input type="radio" name="so" value="1">Windows<br> <input type="radio" name="so" value="2">Linux<br> <input type="submit" value="Enviar"> </form> </body>



</html> 29. 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. <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> Vote este sitio: <select name="voto"> <option value="1">Excelente</option> <option value="2">Muy Bueno</option> <option value="3">Bueno</option> <option value="4">Regular</option> <option value="5">Malo</option> </select> <br> <input type="submit" value="Enviar"> </form> </body> </html> 30. 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. <html> <head> <title>Prueba de formulario</title> </head> <body> <form action="/registrardatos.php" method="post"> Seleccione uno o varios mail (Presione Ctrl para seleccionar varios mail)<br> <select name="mail[]" size="4" multiple>



<option value="[email protected]">[email protected]</option> <option value="[email protected]">[email protected]</option> <option value="[email protected]">[email protected]</option> <option value="[email protected]">[email protected]</option> <option value="[email protected]">[email protected]</option> </select> <br> <input type="submit" value="Enviar"> </form> </body> </html> 31. Confeccione un control de tipo select con los nombres de paises de América y Europa. Agrupe los paises por continente. <html> <head> <title>Prueba de formulario</title> </head> <body> <form action="/registrardatos.php" method="post"> Seleccione una pais: <select name="paises"> <optgroup label="América"> <option value="1">Argentina</option> <option value="2">Chile</option> <option value="3>Brasil</option> <option value="4">Uruguay</option> <option value="5">Perú</option> <option value="6">Bolivia</option> </optgroup> <optgroup label="Europa"> <option value="7">España</option> <option value="8">Francia</option> <option value="9">Italia</option> <option value="10">Suiza</option> <option value="11">Alemania</option> <option value="13">Holanda</option> <option value="14">Polonia</option>



<option value="15">Grecia</option> </optgroup> </select> <br> <input type="submit" value="Enviar"> </form> </body> </html> 32. 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") <html> <head> <title>Prueba de formulario</title> </head> <body> <form action="/registrardatos.php" method="post"> Nombre de usuario: <input type="text" name="nombre" size="20"> <br> Clave: <input type="password" name="clave" size="20"> <br> <button type="submit">Ingreso al<br>sitio</button> </form> </body> </html> 33. Confeccionar una página que muestre una pregunta y luego tres respuestas posibles. Al lado de cada respuesta disponer un botón creado con el elemento input inicializando la propiedad type con el valor="button" <html> <head> <title>Prueba de formulario</title> </head> <body>



<form action="/registrardatos.php" method="post"> <h1>Cuál es la velocidad de la luz?</h1> 300000 Km por segundo.<input type="button" name="boton1" value="Correcta?"> <br> 200000 Km por segundo.<input type="button" name="boton2" value="Correcta?"> <br> 100000 Km por segundo.<input type="button" name="boton3" value="Correcta?"> </form> </body> </html> 34. Confeccionar un formulario que solicite y envíe al servidor dos archivos. <html> <head> <title>Prueba de formulario</title> </head> <body> <form action="/registrardatos.php" method="post" enctype="multipart/form-data"> Seleccione el archivo 1: <input type="file" name="archi1"> <br> Seleccione el archivo 2: <input type="file" name="archi2"> <br> <input type="submit" value="Enviar"> </form> </body> </html> 35. Confeccionar un formulario que permita solicitar pizzas a domicilio. Agrupar los controles aquellos relacionados con el cliente y los referentes al pedido. <html> <head> <title>Prueba de formulario</title> </head> <body> <form action="/registrardatos.php" method="post">



<fieldset> <legend>Seleccione tipo y cantidad de pizzas</legend> Pizza: <select name="pizza1"> <option value="1">Muzzarella</option> <option value="2">Jamon y Queso</option> <option value="3">Napolitana</option> </select> Cantidad: <select name="cantidad1"> <option value="0">0</option> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> <option value="4">4</option> </select> <br> Pizza: <select name="pizza2"> <option value="1">Muzzarella</option> <option value="2">Jamon y Queso</option> <option value="3">Napolitana</option> </select> Cantidad: <select name="cantidad2"> <option value="0">0</option> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> <option value="4">4</option> </select> <br> Pizza: <select name="pizza3"> <option value="1">Muzzarella</option> <option value="2">Jamon y Queso</option> <option value="3">Napolitana</option> </select> Cantidad:



<select name="cantidad3"> <option value="0">0</option> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> <option value="4">4</option> </select> </fieldset> <fieldset> <legend>Datos</legend> Nombre: <input type="text" name="nombre" size="30"><br> Dirección: <input type="text" name="direccion" size="25"><br> Teléfono: <input type="text" name="telefono" size="10"><br> </fieldset> <input type="submit" value="Enviar"> </form> </body> </html> 36. 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. <html> <head> <title>Prueba de formulario</title> </head> <body> <form action="/registrardatos.php" method="post"> Nombre: <input type="text" name="nombre" size="30"><br> Mail: <input type="text" name="mail" size="30"><br> <select name="pais">



<option value="1" selected>seleccione pais</option> <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> Como calificaría a este sitio: <select name="valoracion"> <option value="malo">Malo</option> <option value="regular">Regular</option> <option value="bueno" selected>Bueno</option> <option value="muy bueno">Muy Bueno</option> <option value="excelente">Excelente</option> </select> <br> <textarea name="comentarios" rows="5" cols="40">Ingrese aqui sus comentarios</textarea><br> <input type="submit" value="Enviar"> </form> </body> </html> 37. 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. <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="2"> <input type="text" name="text3" size="5" tabindex="3"> <input type="text" name="text4" size="5" tabindex="4"> <br> <input type="text" name="text5" size="5" tabindex="12"> <input type="text" name="text6" size="5" tabindex="13"> <input type="text" name="text7" size="5" tabindex="14"> <input type="text" name="text8" size="5" tabindex="5"> <br> <input type="text" name="text9" size="5" tabindex="11"> <input type="text" name="text10" size="5" tabindex="16"> <input type="text" name="text11" size="5" tabindex="15"> <input type="text" name="text12" size="5" tabindex="6"> <br> <input type="text" name="text13" size="5" tabindex="10"> <input type="text" name="text14" size="5" tabindex="9"> <input type="text" name="text15" size="5" tabindex="8"> <input type="text" name="text16" size="5" tabindex="7"> <br> <input type="submit" value="enviar" tabindex="17"> </form> </body> </html> 38. 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) <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" disabled> <br> Ingrese su clave: <input type="password" name="clave" size="12" disabled> <br> Comentarios:<br> <textarea disabled name="comentarios" rows="5" cols="60"> </textarea> <br> <input type="checkbox" name="op1" disabled>Opcion 1<br> <input type="checkbox" name="op2" disabled>Opcion 2<br> <input type="checkbox" name="op3" disabled>Opcion 3<br> <input type="checkbox" name="op4" disabled>Opcion 4<br> <br> <input type="radio" name="op" value="1" disabled>Opcion 1<br> <input type="radio" name="op" value="2" disabled>Opcion 2<br> <input type="radio" name="op" value="3" disabled>Opcion 3<br> <input type="radio" name="op" value="4" disabled>Opcion 4<br> <br> <select name="pais" disabled> <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> <button type="submit" disabled>Ingreso al<br>sitio</button>



<br> <input type="submit" value="enviar" disabled> </form> </body> </html> 39. 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) <html> <head> <title>Prueba de formulario</title> </head> <body> <form action="/registrardatos.php" method="post"> Ingrese su nombre y apellido: <input type="text" name="nombre" maxlength="40" size="20"> <br> Ingrese su edad: <input type="text" name="edad" maxlength="3" size="3"> <br> Ingrese su dni: <input type="text" name="dni" maxlength="8" size="8"> <br> <input type="submit" value="enviar"> </form> </body> </html> 40. 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. <html> <head> <title>Prueba de formulario</title> </head> <body>



<form action="/registrardatos.php" method="post"> <fieldset> <legend>Formulario de calificación.</legend> <label for="nombre">Ingrese su nombre:</label> <input type="text" name="nombre" size="30" id="nombre"><br> <label for="calificacion">Seleccione calificación:</label> <select name="calificacion" id="calificacion"> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> <option value="4">4</option> <option value="5">5</option> <option value="6">6</option> <option value="7">7</option> <option value="8">8</option> <option value="9">9</option> <option value="10">10</option> </select> <br> <input type="submit" value="Enviar"> </fieldset> </form> </body> </html>

practica diseÑo web

Documents