RECUP PRESENCIAL 1 RESUELTO
Anuncio
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;
}