Escolar Documentos
Profissional Documentos
Cultura Documentos
Lenguaje de Marcas
Tarea LMSGI02 - Resolucin
1 Actividad 1
Enunciado
1. Disear una pgina web para la presentacin de las recetas de cocina de un restaurante
y aplicarlo a la siguiente receta de cocina. Al inicio de la receta se dar al usuario la opcin
de ir directamente a la elaboracin de la receta o pasar por los ingredientes
Hemos utilizado para su realizacin el editor Amaya.
Hemos optado por una solucin sencilla que permita tener todos los contenidos en una
misma pgina, desde la presentacin hasta la receta e ingredientes.
La solucin a la opcin de navegabilidad solicitada se proporciona justo debajo de la foto del
Gazpacho mediante dos enlaces.
Para su relizacin nos hemos basado en la plantilla de estilos Modern Style que incorpora y
que posteriormente hemos editado segn nuestras necesidades.
Mostramos a continuacin una parte del contenido del fichero de estilos
Modern style for Amaya Editor Lite */
/* default rules for the whole document */
body {
font-size: 12pt;
font-family: Helvetica, Arial, sans-serif;
font-weight: normal;
font-style: normal;
color: #E5E5E5;
background-color: #2A2A2A;
line-height: 1.2em;
margin-left: 4em;
margin-right: 2em;
}
/* paragraphs */
p {
padding: 0;
margin-top: 1.5em;
margin-bottom: 1em;
text-align: left;
}
/* headings */
h1 {
font-size: 280%;
font-weight: bold;
font-style: normal;
font-variant: small-caps;
text-align: center;
color: #FFFFFF;
padding: 0.8em;
________________________________________________________________________________________________
Pgina 2 de 9
margin-top: 1em;
margin-bottom: 1em;
background-color: #606060;
border-color:#FFFFFF #C0C0C0 #C0C0C0 #FFFFFF;
border-style:double;
border-width: 1px;
}
h2 {
font-size: 150%;
font-weight: bold;
font-style: normal;
text-align: center;
padding: 0;
margin-top: 1.5em;
margin-bottom: 1.1em;
color: #ecd2fd;
}
h3 {
font-size: 130%;
font-weight: bold;
font-style: normal;
padding: 0;
margin-top: 1.3em;
margin-bottom: 1.1em;
}
.
/* clases */
.bienvenida {
font-size: 220%;
color:#9b39d9;
text-align:center;
border-bottom-with: 2px;
border-bottom-color: #FFFFFF;
}
.menu {
text-align:center;
width:50%;
color:#2b9a28;
}
.centrado {
text-align:center;
}
.
/* anchors */
________________________________________________________________________________________________
Pgina 3 de 9
a[href] {
color: #2b9a28;
text-decoration: underline;
}
/* end */
________________________________________________________________________________________________
Pgina 4 de 9
2 Actividad 2
Enunciado
Disear y codificar cada uno su propia pgina web personal. En ella debe aparecer los
estudios realizados, experiencias, aficiones. Incluir, al menos, una fotografa y algn enlace
a una pgina externa.
________________________________________________________________________________________________
Pgina 5 de 9
3 Actividad 3
Enunciado
Crear un formulario que realice una peticin de reserva de un restaurante con las siguientes
caractersticas:
1. Un campo para introducir cada uno de los siguientes datos: nombre, apellidos, telfono de
contacto, e-mail, nmero de comensales.
2. Dos mens desplegables para recoger la fecha de entrada (da/mes).
3. Un botn de radio para elegir entre comida o cena.
4. Un campo de seleccin mltiple (checkbox) que permita al usuario indicar si van a desear
entrantes, primer plato, segundo plato, postre y/o caf.
5. Una caja de texto donde se puedan dejar comentarios.
6. Un botn para limpiar el formulario y otro para enviarlo por correo a la direccin:
reservas17@mirestaurante.com.
Maquetar el formulario utilizando la tabla siguiente:
________________________________________________________________________________________________
Pgina 6 de 9
Para la realizacin del formulario utilizaremos la plantilla de estilo clsica que incorpora el
editor Amaya. Tambin ahora la modificaremos para conseguir amoldarla a nuestras
necesidades.
________________________________________________________________________________________________
Pgina 7 de 9
/* paragraphs */
p {
padding: 0;
margin-top: 0em;
margin-bottom: 0em;
text-align: justify;
text-indent: 1em;
}
#contenedor {
width: 70%;
margin: 0 auto;
}
#enlinea {
display: inline;
}
form div {
display: inline;
float: left;
width: 50%;
}
.cen {
text-align: center;
}
/* Hago que el elemento label sea de bloque para forzar que el siguiente elemento del formulario
aparezca debajo y alinear los elementos*/
label {
display: block;
margin: .8em .2em .2em .4em;
}
/* Hago que los input tengan aire por debajo */
input {
margin-bottom: .2em;
}
/* headings */
h1 {
background-color: #e8e1e1;
font-size: 280%;
font-weight: bold;
font-style: normal;
________________________________________________________________________________________________
Pgina 8 de 9
font-variant: normal;
text-align: center;
padding: 0.8em;
color: #FFFFFF;
margin-top: .2em;
margin-bottom: .5em;
background-color: #606060;
border-color:#FFFFFF #C0C0C0 #C0C0C0 #FFFFFF;
border-style:double;
border-width: 1px;
}
.
________________________________________________________________________________________________
Pgina 9 de 9