Prueba
<HTML><TITLE>Confección y publicación de páginas Web.</TITLE><BR />
<H1 <B>ALIGN=”CENTER”>PRUEBA DE VALIDACIÓN PERSONAL</B><H1>
<P>Fecha: Módulo: MF0950_2 Unidad Formativa: UF1303.2
Nombre: fecha de inicio: Horas empleadas:
</P>
<BODY>
<H2><U>INSTRUCCIONES:</U>Esta prueba de validación se compone de una batería de preguntas tipo test y un ejercicio de código en Jedit<b>ESTA PRUEBA ES PERSONAL </b></H2> El objetivo de esta prueba es validar todos los conocimientos del módulo formativo MF0950_2, y demostrar que se ha asimilado correctamente.
El resultado de la prueba será la media de las dos partes, no pudiendo hacer media si una de las partes esta suspensa.
La batería de preguntas se encuentran más abajo. Pregunta correcta 0,5 puntos, incorrecta o vacia -0,2 puntos.
Respuestas:
1.-
|
2.-
|
3.-
|
4.-
|
5.-
|
6.-
|
7.-
|
8.-
|
9.-
|
10.-
|
11.-
|
12.-
|
13.-
|
14.-
|
15.-
|
16.-
|
17.-
|
18.-
|
19.-
|
20.-
|
Ejercicio de Código:
Contexto: Empresa de Pintura creativa y profesional, realiza trabajos de pinturas de todo tipo para obras mayores y menores. Con carácter de PYME, realiza también proyectos en decoración creativa, todo tipo de técnicas, con necesidad de exponer trabajos realizados como presentación de la empresa.
Realizar un sitio web básico, Index y formulario de contacto como mínimo, utilizando como ayuda de base 11 plantillas proporcionadas para ahorrar trabajo en la elaboración del SITE y las imágenes y textos proporcionados por el cliente.
Imagen corporativa clara y definida en el boceto inicial necesario para empezar a codificar.
Formulario con proceso de validación de datos correcto, NO OPERATIVO.
Se exige pruebas de validación en varios navegadores e informe de accesibilidad y Usabilidad.
Se permite utilizar todas las herramientas aprendidas HTML.
Tiempo de ejecución máxima: 20 horas.
Preguntas del test:
1.- ¿Qué es una ruta relativa?
(a) Señalan la ubicación de un archivo o directorio en un servidor a partir de la posición actual de la carpeta donde se cargan los archivos.
|
(b)Señalan la ubicación de un archivo o directorio con la ruta completa.
|
(c)Señalan la ubicación de una imagen en el servidor.
|
(d)Señalan la ubicación de los archivos en un ordenador en local con las carpetas y unidades.
|
2.- Definición de SEO.
|
|
(c)Es el conjunto de técnicas utilizadas para aumentar el tráfico de calidad hacia un sitio web mediante la mejora del posicionamiento de un site en los buscadores.
|
|
3.- Estructura básica de un html.
(a)<HTML>
<HEAD>
Definiciones de la cabecera
</HEAD>
<BODY>
Instrucciones HTML
</HTML>
</BODY>
|
(b)<HTML>
<HEAD>
Definiciones de la cabecera
</HEAD>
<BODY>
Instrucciones HTML
</BODY>
</HTML>
|
(c)<HTML>
Definiciones de la cabecera
</HEAD>
<BODY>
Instrucciones HTML
<HEAD>
</BODY>
</HTML>
|
(d)
<HEAD>
Definiciones de la cabecera
</HEAD>
<BODY>
Instrucciones HTML
</BODY>
|
4.- Características para que una página sea Usable.
(a)Rapidez en el tiempo de carga, Facilidad en el aprendizaje del sitio, Eficiencia en la navegación, Equilibrio en el diseño, Compatibilidad con navegadores.
|
(b)Qué las personas con diferentes tipos de discapacidad pueden experimentar dificultades para utilizar la web debido a la combinación de barreras en la información de las páginas web
|
(c) Qué espinete y Don Pinpom puedan usar el Site web sin perderse en el contenido.
|
|
5.- Qué es un DIV.
|
|
(c) Una etiqueta HTML que sirve para hacer cajas y nada más.
|
(d) Se usa comunmente para agrupar un bloque de elementos HTML, para luego añadirle un estilo CSS determinado.
|
6.- Para qué PUEDE servir el atributo alt.
(a) para que cuando se posicione el ratón sobre la imagen, salga un texto, generalmente explicando la imagen.
|
|
(c)para meter palabras clave de cara a los buscadores, ya que es uno de los atributos que rastrean dentro de una página html.
|
(d)la utilizan para que las personas con minusvalía en la vista, puedan oir la descripción de la imagen.
|
7.- Formas de aplicar CSS.
|
|
(c)A nivel de línea y de Div.
|
|
8.- Qué utilidad tienen los METAS.
|
|
(c) Se utiliza para añadir información sobre la página para que la utilicen los buscadores. van en el HEAD.
|
|
9.- Porqué es importante para la accesibilidad tener un CSS externo.
(a) Para que el código de la página principal no sea excesivamente largo y solo muestre lo que se visualiza.
|
|
(c)Al separar el código HTML del diseño CSS, el usuario ciego puede fácilmente , escrito en un fichero CSS,modificarlo y no entrar en conflicto con la lectura de la web.
|
|
10.- Qué etiqueta utilizamos para insertar una línea horizontal.
(a)<HB>
|
(b)<HR>
|
(c)<HC>
|
(d)<HD>
|
11.- Cuál de estas opciones de código es la correcta, es de una imagen con enlace.
| |
12.- Cuál es la línea de código correcta que muestra un video que se reproduce al cargar la página.
|
|
(c) <video "video.mp4" width="640" height="360" controls autoplay preload></video>
|
|
13.- Donde se pueden hacer los exámenes de accesibilidad.
|
|
(c) http://www.tawdis.net/
|
|
14.- Cual es el selector correcto para aplicar código CSS solo a la etiqueta Li de este <DIV>.
<div id="header">
<ul class="nav">
<li><a href="">Inicio</a></li>
<li><a href="">Servicios</a></li>
<li><a href="">Acerca de</a></li>
<li><a href="">Contacto</a></li>
</ul>
</div>
|
(b)li { }
|
(c) .nav {}
|
|
15.- Si una plantilla esta hecha de archivos php para que plataforma puede estar diseñada?
|
|
(c) HTML
|
|
16.- Cuál es el atributo que verifica que haya contenido en un <input> de un formulario.
|
|
(c) Submit
|
|
17.- Qué significa el apartado FAQ en un sitio Web.
(a) Se utiliza para referirse a listas de preguntas frecuentes o cualquier listado de preguntas frecuentes
|
|
|
|
18.- Qué tipo de posicionamiento le darías a una imagen de ancla fija?
|
|
(c) Absoluted
|
|
19.- Para qué sirven las nuevas etiquetas de HTML 5. Header, footer, nav, etc...
|
|
(c) Para estandarizar las partes de una web
|
|
20.- Qué línea de código de abajo ejecuta el formulario.
(a)<input type="casa" value="Submit">
|
|
(c)<input type="option" value="Submit">
|
(d) <input type="submit" value="Submit">
|
Escuela Taller Castro Urdiales</HTML>
InformeINFORME DE ACCESIBILIDAD Y USABILIDAD
Encontrándonos ante la página “Todopaint”, procederemos pues a analizarla para comprobar que cumple con los requisitos mínimos para ser aceptable en cuanto a accesibilidad y usabilidad se refiere.
Accesibilidad
Habiendo pasado dicha página por el validador de W3C, gracias al Dreamweaver, y por el Total validator, comenzaremos con el análisis de sus resultados:
Visualización en navegadores
Respecto a los cambios en la visualización de la página en los diferentes navegadores, no difiere mucho en realidad. Chrome y Firefox son los que mantienen mayor similitud, no obstante, el botón de “enviar” que posee el formulario está situado justo debajo de la caja del mensaje, al contrario que en el Chrome, en el cual se puede apreciar un ligero espacio. Respecto a esto, pasa lo mismo con el Internet explorer.
Cabe destacar que ninguno de los elementos se distancian de su posición original, lo que puede llamar más la atención es la ligera diferencia en el ancho y alto de las cajas de texto del formulario en Internet explorer respecto de los otros dos.
A parte de esto, en este ultimo se aprecia todo más ampliado que en los demás y es necesario recurrir al zoom para verlo como en los otros.
Salvo esto, solamente existen diferencias en el estilo de los elementos del formulario, como por ejemplo los mensajes que aparecen cuando un campo requerido no se rellena o el aspecto del bloque destinado al mensaje.
Usabilidad
Finalmente y para dar por concluido dicho informe, hablaremos de los distintos puntos principales a tener en cuenta sobre usabilidad y si dicha página los cumple.
En resumen, es una página que cumple casi todos los requisitos de usabilidad y accesibilidad y la visualización de ésta no varía de forma demasiado notoria dependiendo de los navegadores a usar.
|
Página index
Visualización
Código
<!DOCTYPE html>
<html lang="es">
<head>
<title>Todo Paint</title>
<meta name="Description" content="Index de la PYME Todo Paint">
<meta charset="utf-8" />
<Link rel="stylesheet" href="index.css" type="text/css">
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
<link rel="icon" href="favicon.ico" type="image/x-icon">
</head>
<body>
<div id="contenedor">
<div id="cabecera">
</div>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="17%"><a href="index.html"><img src="boton1.jpg" alt="boton1" height="52" border="0"></a></td>
<td width="14%"><a href="somos.html"><img src="boton2.jpg" alt="boton2" width="209" height="52" border="0"></a></td>
<td width="18%"><a href="productos.html"><img src="boton4.jpg" width="259" height="54" alt="boton4"></td>
<td width="51%"><a href="contacto.html"><img src="boton3.gif" alt="boton3" height="53" border="0"></a></td>
</tr>
</table>
<img class="bote" src="botes-pintura.gif" alt="botes" border="0">
<table class="texto" width="782" height="244" border="0">
<tr>
<td width="531"><h2><img src="img21.jpg" width="510" height="335" alt="pintura"></h2></td>
<td width="241" colspan="3" ><h2>Nuestra empresa</h2>
<p>Marca y símbolo Todo Paint acreditan la total fiabilidad y garantía en todos y cada uno de nuestros productos, lideres en el mercado, para ofrecer una mayor calidad de vida desde 1880.</p>
<p>Con el paso del tiempo, en Todo Paint se ha desarrollado una clara vocación investigadora que nos permite conseguir la más avanzada tecnología en la fabricación de los diferentes productos y en cada una de sus etapas.</p></td>
</tr>
</table>
</div>
<footer>
<p class="fot">PORQUE LA VIDA ESTA LLENA DE COLOR</p>
<map name="mapa1">
<area alt="Pulsa para ir a twitter" shape="CIRCLE" coords="21,23,29" href="https://twitter.com/" target="_blank">
<area alt="Pulsa para ir a facebook" shape="CIRCLE" coords="72,20,29" href="https://es-es.facebook.com/" target="_blank">
<area alt="Pulsa para ir a google plus" shape="circle" coords="120,22,29" href="https://plus.google.com/" target="_blank">
<area alt="Pulsa para ir a youtube" shape="CIRCLE" coords="168,21,29" href="https://www.youtube.com/" target="_blank">
<area alt="Pulsa para ir a feedburner" shape="CIRCLE" coords="214,22,29" href="http://www.feedburner.com/" target="_blank">
</map>
<img class="redes" src="redes.png" alt="redes sociales" border="0" usemap="#mapa1">
</footer>
</body>
</html>
Página quienes somos
Visualización
Código
<!DOCTYPE html>
<html lang="es">
<head>
<title>Página de quienes somos de Todo Paint</title>
<meta name="Description" content="Index de la PYME Todo Paint">
<!meta charset="utf-8" />
<Link rel="stylesheet" href="index.css" type="text/css">
<script type="text/javascript">
function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}
function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}
function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
}
function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
</script>
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
<link rel="icon" href="favicon.ico" type="image/x-icon">
</head>
<body onLoad="MM_preloadImages('imagen1.JPG')">
<div id="contenedor">
<div id="cabecera">
</div>
<td><table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="17%"><a href="index.html"><img src="boton1.jpg" alt="boton1" height="52" border="0"></a></td>
<td width="14%"><a href="somos.html"><img src="boton2.jpg" alt="boton2" width="209" height="52" border="0"></a></td>
<td width="18%"><a href="productos.html"><img src="boton4.jpg" width="259" height="54" alt="boton4"></td>
<td width="69%"><a href="contacto.html"><img src="boton3.gif" alt="boton3" height="53" border="0"></a></td>
</tr>
</table>
<img class="bote" src="botes-pintura.gif" alt="botes" border="0">
<table class="texto2" width="782" height="244" border="0">
<tr>
<td width="531"><h2><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('pinturas','','imagen1.JPG',1)"><img src="imagen3.jpg" alt="pinturas artísticas" width="464" height="438" id="pinturas"></a></h2></td>
<td width="241" colspan="3" bgcolor="#FFFFFF"><h2>Sobre nosotros</h2>
<p>Ofrecemos todo tipo de servicio de pinturas y reformas desde servicios a oficinas, locales comerciales, zonas comunitarias, escaleras y ascensores, fachadas, hasta pisos particulares.
Adicionalmente hacemos reformas, obra pequeña, rehabilitación de fachadas, estudios de diseño y decoración.
</p>
<p>En los apartados específicos puedes encontrar más información sobre los servicios más solicitados. Si tu caso concreto no está descrito, no dudes en ponerte en contacto con nosotros para informarte sobre la solución que podemos dar a tu necesidad en particular.</p></td>
</tr>
</table>
</div>
<footer>
<p class="fot">PORQUE LA VIDA ESTA LLENA DE COLOR</p>
<map name="mapa1">
<area alt="Pulsa para ir a twitter" shape="CIRCLE" coords="21,23,29" href="https://twitter.com/" target="_blank">
<area alt="Pulsa para ir a facebook" shape="CIRCLE" coords="72,20,29" href="https://es-es.facebook.com/" target="_blank">
<area alt="Pulsa para ir a google plus" shape="circle" coords="120,22,29" href="https://plus.google.com/" target="_blank">
<area alt="Pulsa para ir a youtube" shape="CIRCLE" coords="168,21,29" href="https://www.youtube.com/" target="_blank">
<area alt="Pulsa para ir a feedburner" shape="CIRCLE" coords="214,22,29" href="http://www.feedburner.com/" target="_blank">
</map>
<img class="redes" src="redes.png" alt="redes sociales" border="0" usemap="#mapa1">
</footer>
</body>
</html>
Página de productos
Visualización
Código
<!DOCTYPE html>
<html lang="es">
<head>
<title>Página de productos de Todo Paint</title>
<meta name="Description" content="Index de la PYME Todo Paint">
<meta charset="utf-8" />
<Link rel="stylesheet" href="index.css" type="text/css">
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
<link rel="icon" href="favicon.ico" type="image/x-icon">
</head>
<body>
<div id="contenedor3">
<div id="cabecera">
</div>
<td><table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="17%"><a href="index.html"><img src="boton1.jpg" alt="boton1" height="52" border="0"></a></td>
<td width="14%"><a href="somos.html"><img src="boton2.jpg" alt="boton2" width="209" height="52" border="0"></a></td>
<td width="18%"><a href="productos.html"><img src="boton4.jpg" width="259" height="54" alt="boton4"></td>
<td width="69%"><a href="contacto.html"><img src="boton3.gif" alt="boton3" height="53" border="0"></a></td>
</tr>
</table>
<img class="bote" src="botes-pintura.gif" alt="botes" border="0">
<table class="texto" width="782" height="244" border="0">
<tr>
<td width="223"><h2><img src="maxresdefault.jpg" width="199" height="112" alt="uno"></h2></td>
<td width="549" colspan="3" bgcolor="#FFFFFF"><h2>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<!-- @page { margin: 2cm } P { margin-bottom: 0.21cm } -->
<BODY DIR="LTR">
</h2>
<h2>Ferrorite Acqua<BR>
</h2>
<p>Ferrorite Acqua es una revolución en el mercado . Un esmalte antioxidante al agua para metales, directo sobre óxido y sin necesidad de imprimación previa. Todo ello sin peligro de oxidación. tanto durante la aplicación como por la exposición de la pintura en el tiempo, gracias a su especial formulación. Y sobre todo, es efectivo y duradero como los tradicionales esmaltes antioxidantes al disolvente.</p></td>
</tr>
<tr>
<td><img src="microcemento3.jpg" width="199" height="112" alt="dos"></td>
<td colspan="3" bgcolor="#FFFFFF"><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<!-- @page { margin: 2cm } P { margin-bottom: 0.21cm } -->
<BODY DIR="LTR">
<h2>Sistema microcemento</h2>
<p>La última tendencia en decoración e interiorismo es MicroCemento. Se trata de un sistema de productos basados en revestimientos cementosos bicomponentes. La combinación de todos ellos, da como resultado:</p>
<p>- Un revestimiento continuo de altas prestaciones, proporcionando acabados duradaderos, impermeables y de alta resistencia al roce y al desgaste.</p>
<p>- Un acabado decorativo exclusivo, que permite obtener espacios únicos para cada aplicación.</p>
<p><BR>
</p></td>
</tr>
<tr>
<td><img src="descarga.jpg" width="199" height="112" alt="tres"></td>
<td colspan="3" bgcolor="#FFFFFF"><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<!-- @page { margin: 2cm } P { margin-bottom: 0.21cm } -->
<BODY DIR="LTR">
<h2>Pintura plástica</h2>
<p>Pintura plástica mate con certificado ecológico europeo ECOLABEL. De alto rendimiento, cubrición y nivelación. Fabricado con materias primas totalmente respetuosas con el medio ambiente. Sin olor. Lavabilidad Clase 2</p>
<p><BR>
</p></td>
</tr>
<tr>
<td><img src="la-pintura-monocapa-12.jpg" width="199" height="112" alt="cuatro"></td>
<td colspan="3" bgcolor="#FFFFFF"><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<!-- @page { margin: 2cm } P { margin-bottom: 0.21cm } -->
<BODY DIR="LTR">
<h2>Pintura monocapa</h2>
<p>Pintura ecológica certificada, de naturaleza acrílica y acabado mate, monocapa, de excelente cubrición y fácil aplicación. No gotea ni salpica. Sin olor, permite habitar los espacios pintados inmediatamente. Lav: 40.000 d.p.</p></td>
</tr>
</table>
</div>
<footer>
<p class="fot">PORQUE LA VIDA ESTA LLENA DE COLOR</p>
<map name="mapa1">
<area alt="Pulsa para ir a twitter" shape="CIRCLE" coords="21,23,29" href="https://twitter.com/" target="_blank">
<area alt="Pulsa para ir a facebook" shape="CIRCLE" coords="72,20,29" href="https://es-es.facebook.com/" target="_blank">
<area alt="Pulsa para ir a google plus" shape="circle" coords="120,22,29" href="https://plus.google.com/" target="_blank">
<area alt="Pulsa para ir a youtube" shape="CIRCLE" coords="168,21,29" href="https://www.youtube.com/" target="_blank">
<area alt="Pulsa para ir a feedburner" shape="CIRCLE" coords="214,22,29" href="http://www.feedburner.com/" target="_blank">
</map>
<img class="redes" src="redes.png" alt="redes sociales" border="0" usemap="#mapa1">
</footer>
</body>
</html>
Página de contacto
Visualización
Código
| <!DOCTYPE html> | |
| <html lang="es"> | |
| <head> | |
| <title>Página de contacto de Todo Paint</title> | |
| <meta name="Description" content="Index de la PYME Todo Paint"> | |
| <meta charset="utf-8" /> | |
| <Link rel="stylesheet" href="index.css" type="text/css"> | |
| <link rel="shortcut icon" href="favicon.ico" type="image/x-icon"> | |
| <link rel="icon" href="favicon.ico" type="image/x-icon"> | |
| </head> | |
| <body> | |
| <div id="contenedor"> | |
| <div id="cabecera"> | |
| </div> | |
| <table width="100%" border="0" cellspacing="0" cellpadding="0"> | |
| <tr> | |
| <td width="17%"><a href="index.html"><img src="boton1.jpg" alt="boton1" height="52" border="0"></a></td> | |
| <td width="14%"><a href="somos.html"><img src="boton2.jpg" alt="boton2" width="209" height="52" border="0"></a></td> | |
| <td width="18%"><a href="productos.html"><img src="boton4.jpg" width="259" height="54" alt="boton4"></a></td> | |
| <td width="69%"><a href="contacto.html"><img src="boton3.gif" alt="boton3" height="53" border="0"></a></td> | |
| </tr> | |
| </table> | |
| <img class="bote" src="botes-pintura.gif" alt="botes" border="0"> | |
| <table class="texto2" width="782" height="244" border="0"> | |
| <tr> | |
| <td width="531"><h2><iframe id="mapa" src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d1479.2527623413541!2d-0.4016391606994216!3d42.139467883242915!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0%3A0x736f4487376c81bc!2sPinturas+Sorribas!5e0!3m2!1ses!2ses!4v1411645794874" ></iframe> | |
| </h2></td> | |
| <td width="531"> </td> | |
| <td width="241" colspan="3" bgcolor="#FFFFFF"><h2>Contacta con nosotros</h2> | |
| <form action="#" method="get"> | |
| <div class="form"> | |
| <p> | |
| <label for="name"> Nombre </label> | |
| <input class="text" name="name" id="name" type="text" required/> | |
| </p> | |
| <div class="clear2"></div> | |
| <p> | |
| <label for="email"> Email</label> | |
| <input class="text" name="email" id="email" type="email" pattern="[a-zA-Z0-9_]+([.][a-zA-Z0-9_]+)*@[a-zA-Z0-9_]+([.][a-zA-Z0-9_]+)*[.][a-zA-Z]{1,5}" required/> | |
| </p> | |
| <p> </p> | |
| <div class="clear2"></div> | |
| <div class="clear2"></div> | |
| <label for="comment">Mensaje<br> | |
| <br> | |
| </label> | |
| <textarea class="text" name="comment" id="comment" cols="45" rows="5" required></textarea> | |
| <div class="clear2"></div> | |
| <input class="button" name="Submit" type="submit" value="Enviar" /> | |
| </div> | |
| </form> | |
| </td> | |
| </tr> | |
| </table> | |
| </div> | |
| <footer> | |
| <p class="fot">PORQUE LA VIDA ESTA LLENA DE COLOR</p> | |
| <map name="mapa1"> | |
| <area alt="Pulsa para ir a twitter" shape="CIRCLE" coords="21,23,29" href="https://twitter.com/" target="_blank"> | |
| <area alt="Pulsa para ir a facebook" shape="CIRCLE" coords="72,20,29" href="https://es-es.facebook.com/" target="_blank"> | |
| <area alt="Pulsa para ir a google plus" shape="circle" coords="120,22,29" href="https://plus.google.com/" target="_blank"> | |
| <area alt="Pulsa para ir a youtube" shape="CIRCLE" coords="168,21,29" href="https://www.youtube.com/" target="_blank"> | |
| <area alt="Pulsa para ir a feedburner" shape="CIRCLE" coords="214,22,29" href="http://www.feedburner.com/" target="_blank"> | |
| </map> | |
| <img class="redes" src="redes.png" alt="redes sociales" border="0" usemap="#mapa1"> | |
| </footer> | |
| </body></html> | |
CSS
#contenedor{
background-color: white;
border: black 1px solid;
width: 1450px;
height: 900px;
position: relative;
margin-top:100px;
margin-bottom:100px;
margin-left: 50px;
margin-right: 50px;
border-radius:15px;
}
#contenedor3{
background-color: white;
border: black 1px solid;
width: 1450px;
height: 1400px;
position: relative;
margin-top:100px;
margin-bottom:100px;
margin-left: 50px;
margin-right: 50px;
border-radius:15px;
}
#cabecera{
background-image: url("cabecera.jpg");
background-size: cover;
background-repeat: no-repeat;
width: 100%;
height: 300px;
background-repeat: no-repeat;
position: relative;
border-radius:15px;
}
footer{
position: relative;
width: 958px;
height: 100px;
left: 50px;
right: 50px;
background-color: green;
padding-left: 500px;
padding-top: 15px;
padding-bottom: 15px;
border-radius:15px;
}
body{
background-image: url("foondo.jpg");
background-size: cover;
background-repeat: no-repeat;
}
.bote{
opacity: 0.5;
position: relative;
left:1080px;
top: 250px;
}
.texto{
position:relative;
left:150px;
bottom: 180px;
}
.texto2{
position:relative;
left:150px;
bottom: 270px;
}
.manchas{
position: absolute;
left:50px;
top: 710px;
}
.redes{
position: absolute;
left:590px;
bottom: 20px;
}
.fot{
position: absolute;
left:550px;
bottom: 60px;
color:white;
}
h2{
color: green;
}
#contenedor td .texto tr td p {
font-family: Verdana, Geneva, sans-serif;
}
#contenedor td .texto tr td h2 {
font-family: Verdana, Geneva, sans-serif;
color: #063;
}
#mapa{
width:480px;
height: 380px;
border:0px;
}
form{ background-image: url("manchas.png");
}
input {
border: 1px solid #006;
background: #ffc;
}
input:hover {
background: #ff6;
}
.text{
border: 1px solid #006;
background: #ffc;
}
.text:hover{
background: #ff6;
}
|
