Ciclo Formativo de Grado Superior // ASIR

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.

LENGUAJE DE MARCAS // Tarea LMSGI02

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

LENGUAJE DE MARCAS // Tarea LMSGI02

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

LENGUAJE DE MARCAS // Tarea LMSGI02

a[href] {
color: #2b9a28;
text-decoration: underline;
}
/* end */

________________________________________________________________________________________________
Pgina 4 de 9

LENGUAJE DE MARCAS // Tarea LMSGI02

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

LENGUAJE DE MARCAS // Tarea LMSGI02

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

LENGUAJE DE MARCAS // Tarea LMSGI02

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.

A continuacin mostraremos una parte de la hoja de estilo utilizada.

/* Classic style for Amaya Editor Lite */
/* default rules for the whole document */
body {
font-size: 12pt;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-weight: normal;
font-style: normal;
color: #E5E5E5;
background-color: #2A2A2A;
line-height: 1em;
margin-left: 4em;
margin-right: 2em;
}

________________________________________________________________________________________________
Pgina 7 de 9

LENGUAJE DE MARCAS // Tarea LMSGI02

/* 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

LENGUAJE DE MARCAS // Tarea LMSGI02

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