Sunteți pe pagina 1din 22

Laboratorio: Desarrollo de Interfaces grficas con HTML5

Renzo Anibal Adame Ovalle

Servicio Nacional de Aprendizaje SENA


Anlisis y Desarrollo de Sistemas Informticos ADSI
GAES 1309991-1
San Jos de Ccuta
2017
Laboratorio: Desarrollo de Interfaces grficas con HTML5

Renzo Anibal Adame Ovalle

* Leidy Yohana Vergel Nio

Servicio Nacional de Aprendizaje SENA


Anlisis y Desarrollo de Sistemas Informticos ADSI
GAES 1309991-1
San Jos de Ccuta
2017
*Docente asesor

2
TABLA DE CONTENIDO

1. Laboratorio: Desarrollo de Interfaces grficas con HTML5 4

3
Laboratorio: Desarrollo de Interfaces grficas con HTML5

SENA

- Servicio Nacional de Aprendizaje

Ejercicios :

1. El Centro Veterinario Caninos y Felinos, busca llegar a ms pblico y por lo tanto atraer ms
clientes por medio de un sitio web, que permita dar a conocer los productos, servicios, costos y
polticas de la guardera, y promociones ofrecidas para el beneficio de los animales. Tambin
piensa incluir secciones de inters general, a manera de tips y consejos para los cuidados que
deben tener los dueos de las mascotas. Como atractivo adicional, quiere ofrecer la
programacin de citas mdicas, incluyendo datos de la mascota y del amo de la misma, adems
de escoger la fecha y hora en la que tendra mayor oportunidad de asistir.El diseo propuesto
(opcional) es el siguiente:

4
2. BanCoop, es una entidad financiera que tiene m ltiples servicios yproductos para sus
clientes y requieren una pgina web que facilite consultas y transacciones a sus clientes. El
diseo (opcional) propuesto es el siguiente:

5
DESARROLLO

1.El Centro Veterinario Caninos y Felinos, busca llegar a ms pblico y por lo tanto atraer ms clientes
por medio de un sitio web, que permita dar a conocer los productos, servicios, costos y polticas de la
guardera, y promociones ofrecidas para el beneficio de los animales. Tambin piensa incluir secciones
de inters general, a manera de tips y consejos para los cuidados que deben tener los dueos de las
mascotas. Como atractivo adicional, quiere ofrecer la programacin de citas mdicas, incluyendo datos
de la mascota y del amo de la misma, adems de escoger la fecha y hora en la que tendra mayor
oportunidad de asistir.El diseo propuesto (opcional) es el siguiente:

f<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"


"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<!-- DW6 -->

<head>

<!-- Copyright 2005 Macromedia, Inc. All rights reserved. -->

<title>LABORATORIO14 - Pgina principal</title>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<link rel="stylesheet" href="mm_restaurant1.css" type="text/css" />

</head>

<body bgcolor="#0066cc">

<table width="100%" border="0" cellspacing="0" cellpadding="0">

<tr bgcolor="#99ccff">

<td width="15" nowrap="nowrap" ><img src="mm_spacer.gif" alt=""


width="15" height="1" border="0" /></td>

<td height="60" colspan="3" class="logo" nowrap="nowrap"><img


src="ENCABEZADO.jpg" width="1325" height="429" /></td>

<td width="40">&nbsp;</td>

<td width="100%">&nbsp;</td>

</tr>

6
<tr bgcolor="#003399">

<td width="15" nowrap="nowrap">&nbsp;</td>

<td height="36" colspan="3" id="navigation" nowrap="nowrap"


class="navText">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <a
href="javascript:;">SERVICIOS</a>&nbsp;&nbsp;

&nbsp;&nbsp;&nbsp; <a href="javascript:;">PRODUCTOS</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;

<a href="javascript:;">GUARDERIA</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a
href="javascript:;">PROMOCIONES </a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</td>

<td width="40">&nbsp;</td>

<td width="100%">&nbsp;</td>

</tr>

<tr bgcolor="#ffffff">

<td colspan="6"><img src="mm_spacer.gif" alt="" width="1" height="1"


border="0" /></td>

</tr>

<tr bgcolor="#ffffff">

<td width="230" colspan="2" valign="top" bgcolor="#ffffcc"><img


src="images (3).jpg" width="746" height="434" />

<table border="0" cellspacing="0" cellpadding="0" width="230">

<tr>

<td width="15">&nbsp;</td>

<td width="200" class="smallText" id="padding"><br />

&nbsp;<img src="images.jpg" width="698" height="329" /><br />


</td>

<td width="15">&nbsp;</td>

7
</tr>

</table>

<p class="logo">SALIR DE PASEO CON TU MASCOTA PUEDE RESULTAR


UNA BUENA EXPERIENCIA, DEBES TENER EN CUENTA EL CUIDADO EN EL VIAJE PARA QUE NO LE DE
REBOTE LOS CUIDADOS APROPIADOS CONTACTANOS PARA ASESORARTE Y VENDERTE LAS PASTAS QUE
TU MASCOTA NECESITA</p></td>

<td width="50" valign="top"><img src="mm_spacer.gif" alt=""


width="50" height="1" border="0" /></td>

<td width="440" valign="top"><br />

&nbsp;<br />

<table border="0" cellspacing="0" cellpadding="0" width="440">

<tr>

<td class="pageHeader"><div align="center">

<p>&nbsp;</p>

<p>SOLICITE SU CITA</p>

<p>&nbsp;</p>

<p>&nbsp;</p>

</div></td>

</tr>

<tr>

<td class="bodyText"><form action="" method="post" name="form1"


class="smallText" id="form1">

<h1><strong><span class="logo">MASCOTA. </span>

<label>

<input type="text" name="textfield" id="textfield" />

</label>

8
</strong></h1>

<h1><strong><span class="logo">EDAD ......</span>

<label>

<input type="text" name="textfield2" id="textfield2" />

</label>

</strong></h1>

<h1><strong><span class="logo">RAZA ......</span>

<label>

<input type="text" name="textfield3" id="textfield3" />

</label>

</strong></h1>

<h1><strong><span class="logo">AMO .......</span>

<label>

<input type="text" name="textfield4" id="textfield4" />

</label>

</strong></h1>

<h1><strong><span class="logo">FECHA ....</span>

<label>

<input type="text" name="textfield5" id="textfield5" />

</label>

</strong></h1>

<h1><strong><span class="logo">HORAS.....</span>

<label>

<input type="text" name="textfield6" id="textfield6" />

</label>

9
</strong></h1>

<p>

<label>

<div align="center">

<input name="button" type="submit" class="pageHeader"


id="button" value="VALIDAR CITA" />

</div>

</label>

</p>

</form>

<p>&nbsp;</p>

<br /> </td>

</tr>

</table> </td>

<td width="40">&nbsp;</td>

<td width="100%">&nbsp;</td>

</tr>

<tr bgcolor="#ffffff">

<td colspan="6"><img src="mm_spacer.gif" alt="" width="1" height="1"


border="0" /></td>

</tr>

<tr>

<td colspan="6"><div align="center" class="pageHeader">

10
<p class="logo">CONTACTENOS</p>

<p class="logo">018000987654321</p>

<p class="logo">CORREO :VETERINARIA@LABORATORIO.COM</p>

<p class="logo">AVENIDA SIEMPRE VIVA 18-45</p>

</div></td>

</tr>

<tr bgcolor="#003399">

<td colspan="6"><img src="mm_spacer.gif" alt="" width="1" height="1"


border="0" /></td>

</tr>

<tr>

<td colspan="6"><img src="mm_spacer.gif" alt="" width="1" height="2"


border="0" /></td>

</tr>

<tr bgcolor="#003399">

<td colspan="6"><img src="mm_spacer.gif" alt="" width="1" height="1"


border="0" /></td>

</tr>

<tr>

<td width="15">&nbsp;</td>

<td width="215">&nbsp;</td>

11
<td width="50">&nbsp;</td>

<td width="440">&nbsp;</td>

<td width="40">&nbsp;</td>

<td width="100%">&nbsp;</td>

</tr>

</table>

</body>

</html>

1. BanCoop, es una entidad financiera que tiene mltiples servicios y productos para sus
clientes y requieren una pgina web que facilite consultas y transacciones a sus clientes. El
diseo (opcional) propuesto es el siguiente:

<html xmlns="http://www.w3.org/1999/xhtml">

<!-- DW6 -->

12
<head>

<!-- Copyright 2005 Macromedia, Inc. All rights reserved. -->

<title>Pgina principal</title>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<link rel="stylesheet" href="mm_spa.css" type="text/css" />

<style type="text/css">

<!--

.Estilo1 {color: #00FF00}

.Estilo2 {font-size: 18px}

-->

</style>

</head>

<body bgcolor="#990000" background="mm_bg_red.gif">

<table border="0" cellspacing="0" cellpadding="0">

<tr bgcolor="#220103">

<td rowspan="2" colspan="2" nowrap="nowrap">&nbsp;</td>

<td colspan="5" height="55" nowrap="nowrap" id="logo" valign="bottom"><img src="../Sitio sin


nombre 3/bcp_n.jpg" width="880" height="265" /></td>

<td width="212" rowspan="2">&nbsp;</td>

<td width="4" rowspan="2">&nbsp;</td>

</tr>

<tr bgcolor="#220103">

<td height="54" colspan="5" nowrap="nowrap" id="tagline" valign="top">&nbsp;</td>

</tr>

13
<tr bgcolor="#FF9900">

<td colspan="9"><img src="mm_spacer.gif" alt="" width="1" height="1" border="0" /></td>

</tr>

<tr bgcolor="#FF080E">

<td colspan="9"><img src="mm_spacer.gif" alt="" width="1" height="2" border="0" /></td>

</tr>

<tr bgcolor="#FF9900">

<td colspan="9"><img src="mm_spacer.gif" alt="" width="1" height="1" border="0" /></td>

</tr>

<tr bgcolor="#FF080E">

<td colspan="9"><img src="mm_spacer.gif" alt="" width="1" height="18" border="0" /></td>

</tr>

<tr bgcolor="#FF9900">

<td colspan="9"><img src="mm_spacer.gif" alt="" width="1" height="1" border="0" /></td>

</tr>

<tr bgcolor="#FF080E">

<td colspan="9"><img src="mm_spacer.gif" alt="" width="1" height="2" border="0" /></td>

</tr>

<tr bgcolor="#FF9900">

14
<td colspan="9"><img src="mm_spacer.gif" alt="" width="1" height="1" border="0" /></td>

</tr>

<tr>

<td width="160" rowspan="2" valign="top" id="navborder"><br />

<table border="0" cellspacing="0" cellpadding="0" width="160" id="navigation">

<tr>

<td width="160" class="pageName"><a href="javascript:;" class="subHeader">CREDITOS</a></td>

</tr>

<tr>

<td width="160" class="pageName"><a href="javascript:;" class="navText Estilo1


Estilo2">LEASING</a></td>

</tr>

<tr>

<td width="160" class="pageName"><a href="javascript:;" class="navText Estilo1


Estilo2">AHORROS</a></td>

</tr>

<tr>

<td width="160" class="pageName"><a href="javascript:;" class="navText Estilo1


Estilo2">SERVICIO AL CLIENTE</a></td>

</tr>

<tr>

<td width="160" class="pageName"><a href="javascript:;" class="navText Estilo1


Estilo2">CONTACTO</a></td>

</tr>

</table> </td>

15
<td width="50" rowspan="2"><img src="mm_spacer.gif" alt="" width="50" height="1" border="0"
/></td>

<td width="469" valign="top">&nbsp;</td>

<td width="234" valign="top"><div align="left"><img src="mm_spacer.gif" alt="" width="305"


height="1" border="0" /><br />

&nbsp;<br />

&nbsp;<br />

</div>

<table width="855" height="201" border="0" cellpadding="0" cellspacing="0">

<tr>

<td class="pageName"><div align="center">CREDITO VEHICULOS</div></td>

<td class="pageName"><div align="center">TARJETAS DE CREDITO</div></td>

</tr>

<tr>

<td width="438" class="pageName"><div align="center"><img src="../Sitio sin nombre 3/descarga


(2).jpg" width="210" height="232" /></div></td>

<td width="417" class="pageName"><div align="center"><img src="../Sitio sin nombre


3/Three_credit_cards-_Visa,_Mastercard_and_American_Express_(close-up_on_logos).jpg"
width="186" height="212" /></div></td>

</tr>

<tr>

<td class="pageName"><div align="center">

<p>SOLICITA TU CREDITO O LEASING PARA ADQUIRIR TU VEHICULO NUEVO O USADO,


PARTICULARES O PUBLICOS ADQUIRIDOS DIRECTAMENTE ATRAVES DE UN CONSECIONARIO. <a
href="http://www.chevrolet.com/">leer mas</a></p>

<p>&nbsp;</p>

<p>&nbsp;</p>

</div></td>

16
<td class="pageName"><div align="left">CONOCE NUESTRAS TARJETAS DE CREDITO. <a
href="https://www1.masterconsultas.com.ar/socios/context/init_input.action">leer
mas</a></div></td>

</tr>

<tr>

<td class="pageName"><div align="center">CREDITOS PARA VIVIENDA</div></td>

<td width="417" class="pageName"><div align="center">AHORROS INFANTILES</div></td>

</tr>

<tr>

<td class="bodyText"><img src="../Sitio sin nombre 3/vendo-casa-peatonal-economica-en-lomas-


de-comfacauca_1.png" width="363" height="268" /></td>

<td class="bodyText"><div align="center"><img src="../Sitio sin nombre 3/nombres-para-


nios.jpg" width="252" height="277" /></div></td>

</tr>

<tr>

<td class="bodyText">ADQUIERA YA SU CREDITO DE VIVIENDA CON SUBSIDIO DEL GOBIERNO Y A


UNA BAJA TASA DE INTERES. <a href="http://www.minvivienda.gov.co/mi-casa-ya">leer mas.</a></td>

<td class="bodyText"><p>DESDE YA PUEDES EMPEZAR A AHORRAR PARA LA EDUCACION DE TUS


HIJOS, COMPLEMENTANDOLA CON UN SEGURO ESTUDIANTIL Y UNA CANTIDAD DE BECAS ESCOLARES
QUE NO ENCONTRARAS EN OTRO LADO SOLO EN BANCOP.<a
href="https://www.davivienda.com/wps/portal/personas/nuevo/personas/aqui_puedo/respaldar_a_mi
_familia/cuenta_ninos/!ut/p/b1/04_Sj9Q1NLK0tAABY_0I_ai8xLLM9MSSzPy8xBwQP8os3tgi0MTPy8nIN9j
N0tjA0dcg2NnR0t_Q3dEEqCASqMAAB3A0IKTfSz8qMylXrzw5V89Az9jMzNDA3MDAzNzIwszEzFQ_XD8Kb
AAe8_088nNT9XOjciyydR0VAcJWCRA!/dl4/d5/L2dBISEvZ0FBIS9nQSEh/">leer mas</a></p>

</td>

</tr>

</table>

<br />

&nbsp;<br /> </td>

<td width="235" valign="top">&nbsp;</td>

17
<td width="469" rowspan="2" valign="top">&nbsp;</td>

<td width="50" rowspan="2"><img src="mm_spacer.gif" alt="" width="50" height="1" border="0"


/></td>

<td width="212" rowspan="2" valign="top"><br />

<table border="0" cellspacing="0" cellpadding="0" width="211" bgcolor="#FFFFCC">

<tr>

<td colspan="3" class="columnHeader" align="center"><br />

INGRESA A TU CUENTA<br />

<form id="form1" name="form1" method="post" action="">

<label>

<div align="left">

<input type="text" name="textfield" id="textfield" />

CUENTA</div>

</label>

<div align="left"></div>

<p align="left">

<label>

<input type="text" name="textfield2" id="textfield2" />

</label>

TIPO </p>

<p align="left">

<label>

<input type="text" name="textfield3" id="textfield3" />

</label>

CLAVE</p>

</form>

18
<div align="left">

<form id="form2" name="form2" method="post" action="">

<div align="center"></div>

<label>

<div align="center">

<input type="submit" name="button" id="button" value="INGRESAR" />

</div>

</label>

</form>

<br />

</div></td>

</tr>

<tr>

<td width="37"><img src="mm_spacer.gif" alt="" width="20" height="1" border="0" /></td>

<td width="113" class="smallText"><div align="center">

<p><a href="descarga.jpg">TRANSACCIONES</a></p>

<p><a href="15913604-signo-de-d-lar-con-la-reflexi-n-sobre-fondo-blanco-Foto-de-
archivo.jpg">BANCA PERSONAL</a></p>

<p><a href="mm_product_sm.gif">BANCA EMPRESARIAL</a></p>

<p> <a href="mm_spa_photo2.jpg">BANCA SEGUROS</a></p>

<p><a href="simbolo-dolar--644x362.jpg">PAGO DE FACTURAS</a><br />

</p>

</div>

<p><br />

</p>

19
<p><br />

<br /></p>

<br /> </td>

<td width="61">&nbsp;</td>

</tr>

</table> </td>

<td width="4" rowspan="2">&nbsp;</td>

</tr>

<tr>

<td valign="top">&nbsp;</td>

<td colspan="2" valign="top">&nbsp;</td>

</tr>

<tr>

<td width="160">&nbsp;</td>

<td width="50">&nbsp;</td>

<td width="938" colspan="4"><div align="center">DERECHOS RESERVADOS BANCOP ENTIDAD


FINANCIERA COLOMBIA</div></td>

<td width="50">&nbsp;</td>

<td width="212">&nbsp;</td>

<td width="4">&nbsp;</td>

</tr>

</table>

</body>

</html>

20
21
22