I.E.S. Suárez de Figueroa @vanza C.F.G.S. Administración de Sistemas Informáticos en Red Módulo "Lenguajes de Marcas y Sistemas de Gestión de la Información" Primera Evaluación - Recuperación Presencial Junio 6 de junio de 2016 1. Diseñar un documento XML "bien formado" para estructurar de forma lógica, para que sea fácilmente legible y comprensible, con la menor cantidad de código posible, la información de un instituto y sus profesores. Es decir, debe almacenarse el nombre del instituto y el año de inauguración; después se guardan los datos de los profesores, que en este caso serán 2 profesores. De cada profesor debe guardarse nombre y apellidos, fecha de nacimiento (día, mes y año) y los módulos que imparte. El primer profesor imparte un módulo y el segundo profesor imparte 2 módulos. De cada módulo debe guardarse su nombre y la cantidad de alumnos matriculados. Nota: algunos datos deben guardarse en atributos y otros en elementos; los datos deben inventarse. 2 PUNTOS SOLUCIÓN: <?xml version="1.0" encoding="iso-8859-1" standalone="yes"?> <instituto> <nombre>I.E.S. Suárez de Figueroa</nombre> <anio_inaguracion>1970</anio_inaguracion> <lista_profesores> <profesor> <nombre apellidos="Gómez López">José</nombre> <fecha_nac dia="1" mes="1" anio="1966"/> <lista_modulos> <modulo cantidad_alumnos="23"> <nombre>lmsgi</nombre> </modulo> </lista_modulos> </profesor> <profesor> <nombre apellidos="Álvarez Pérez">Juan</nombre> <fecha_nac dia="2" mes="2" anio="1967"/> <lista_modulos> <modulo cantidad_alumnos="25"> <nombre>gbd</nombre> </modulo> <modulo cantidad_alumnos="20"> <nombre>pare</nombre> </modulo> </lista_modulos> </profesor> </lista_profesores> </instituto> Los siguientes ejercicios deben resolverse de la forma más lógica, estructurada, legible y sencilla posible, aprovechando para cada situación las opciones más adecuadas y con la menor cantidad de código posible. Todos los estilos deben indicarse en el CSS y ninguno en el HTML. En el HTML sólo debe escribirse la sección body. Sólo deben utilizarse clases cuando sea estrictamente necesario. 2. Escribir el código HTML (sólo sección body) y CSS para que la página web muestre el siguiente contenido. Deben utilizarse todas las opciones explicadas para las tablas. Al colocar el ratón encima del enlace "Arriba" debe mostrarse esa palabra con mayor tamaño. Además, al pulsar sobre el enlace "Arriba", debe situarse la página al principio. 4 PUNTOS SOLUCIÓN: HTML <body> <a id="Arriba"></a> <table> <caption>DATOS EN TABLA</caption> <colgroup> <col span="4" class="gris"/> <col span="1" class="grisclaro"/> </colgroup> <thead> <tr> <th class="negro">CABEC1</th> <th class="blanco">CABEC2</th> <th class="negro">CABEC3</th> <th class="blanco">CABEC4</th> <th class="negro">CABEC5</th> </tr> </thead> <tfoot> <tr> <td colspan="5">FINALIZA</td> </tr> </tfoot> <tbody> <tr> <td>LMSGI</td> <td>LMSGI</td> <td rowspan="3">LMSGI</td> <td>LMSGI</td> <td>LMSGI</td> </tr> <tr> <td>LMSGI</td> <td>LMSGI</td> <td>LMSGI</td> <td>LMSGI</td> </tr> <tr> <td>LMSGI</td> <td>LMSGI</td> <td>LMSGI</td> <td>LMSGI</td> </tr> </tbody> </table> <br/> <a href="#Arriba">Arriba</a> </body> CSS caption { background-color: gray; font-size: 2em; border-style: solid; border-color: black; border-width: 5px; padding:20px; } col.gris { background-color: gray; } col.grisclaro { background-color: lightgray; } th.blanco { background-color: white; } th.negro { background-color: black; color: white; } td { width: 70px; } tfoot { background-color: lightgray; text-align: center; font-size: 1.5em; } a:hover { font-size: 2em; } 3. Escribir el código HTML (sólo sección body) y CSS para que la página web muestre el siguiente contenido. Al escribir sobre el campo "Nombre" debe mostrarse el fondo negro y el texto que se teclee en blanco. 4 PUNTOS SOLUCIÓN: HTML <body> <h2>EJEMPLO WEB<br/>ESTO ESTÁ A LA <BR/>IZQUIERDA <BR/>DEL RESTO</h2> <form> <fieldset> <legend>ELIJA CON CUIDADO:</legend> <label for="nombre">Nombre:</label><input type="text" name="nombre" id="nombre"><br/><br/> Marque las opciones deseadas:<br/> <input type="checkbox" name="op1" value="op1" checked><span class="grande">Una</span> <input type="checkbox" name="op2" value="op2"><span class="masgrande">Dos</span> <input type="checkbox" name="op3" value="op3"> <span class="masgrande">Tres</span><br/><br/> Marque una opción:<br/> <input type="radio" name="rad" value="ra1" checked><span class="grande">Op1</span> <input type="radio" name="rad" value="ra2"><span class="masgrande">Op2</span> <input type="radio" name="rad" value="ra3"><span class="masgrande">Op3</span><br/><br/> Marque SÍ o NO: <select name="siono"> <option value="SI" selected>SI</option> <option value="NO">NO</option> </select> <br/><br/> <pre> <input type="submit" value="Enviar"> <input type="reset" value="Borrar"></pre> </fieldset> </form> </body> CSS h2 { background-color: gray; width: 300px; text-align: center; float: left; } form { width: 330px; float: left; } legend { font-size: 1.7em; } span.grande { font-size:1.6em; } span.masgrande { font-size:2em; text-shadow: 3px 3px 1px gray; } input:focus { background-color: black; color: white; }