Laboratorio 14

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
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
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 enti dad fi nanciera que ti ene mlti ples 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:
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">

<head>

<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"> </td>
<td width="100%"> </td>
</tr>
6
<tr bgcolor="#003399">
<td width="15" nowrap="nowrap"> </td>
<td height="36" colspan="3" id="navigation" nowrap="nowrap"

class="navText">           <a
href="javascript:;">SERVICIOS</a>
    <a href="javascript:;">PRODUCTOS</a>
<a href="javascript:;">GUARDERIA</a>     <a
href="javascript:;">PROMOCIONES </a>     </td>
<td width="100%"> </td>
</tr>
<tr bgcolor="#ffffff">
<td colspan="6"><img src="mm_spacer.gif" alt="" width="1" height="1"

border="0" /></td>
</tr>
<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="200" class="smallText" id="padding"><br />
<img src="images.jpg" width="698" height="329" /><br />

</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 />
<br />
<table border="0" cellspacing="0" cellpadding="0" width="440">
<tr>
<td class="pageHeader"><div align="center">
<p> </p>
<p>SOLICITE SU CITA</p>
<p> </p>
<p> </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>
</label>
</strong></h1>
<h1><strong><span class="logo">AMO .......</span>
<label>
</label>
</strong></h1>
<h1><strong><span class="logo">FECHA ....</span>
<label>
</label>
</strong></h1>
<h1><strong><span class="logo">HORAS.....</span>
<label>
</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> </p>
<br /> </td>
</tr>
</table> </td>
<td width="100%"> </td>
</tr>

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 :[email protected]</p>
<p class="logo">AVENIDA SIEMPRE VIVA 18-45</p>
</div></td>
</tr>

border="0" /></td>
</tr>
<tr>

border="0" /></td>
</tr>

border="0" /></td>
</tr>
<tr>
11
<td width="100%"> </td>
</tr>
</table>
</body>
</html>
1. BanCoop, es una enti dad fi nanciera que ti ene mlti ples 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">

12
<head>

<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">

</style>
</head>
<body bgcolor="#990000" background="mm_bg_red.gif">
<table border="0" cellspacing="0" cellpadding="0">
<td rowspan="2" colspan="2" nowrap="nowrap"> </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"> </td>
</tr>
<td height="54" colspan="5" nowrap="nowrap" id="tagline" valign="top"> </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">
</tr>
</tr>
</tr>
</tr>
</tr>
14
</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>

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>

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"> </td>
<td width="234" valign="top"><div align="left"><img src="mm_spacer.gif" alt="" width="305"

height="1" border="0" /><br />
<br />
<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> </p>
<p> </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_ai8xLLM9MSSzPy8xBwQP8os3tgi0MTPy8nIN9jN0tjA0dcg2NnR0t_Q3d
EEqCASqMAAB3A0IKTfSz8qMylXrzw5V89Az9jMzNDA3MDAzNzIwszEzFQ_XD8KbAAe8_088nNT9XOjciyyd
R0VAcJWCRA!/dl4/d5/L2dBISEvZ0FBIS9nQSEh/">leer mas</a></p>
</td>
</tr>
</table>
<br />
<br /> </td>
17
<td width="235" valign="top"> </td>
<td width="469" rowspan="2" valign="top"> </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>
</label>
TIPO </p>
<p align="left">
<label>
</label>
CLAVE</p>
18
</form>
<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 />
19
</p>
<p><br />
<br /></p>
<br /> </td>
</tr>
</table> </td>
</tr>
<tr>
<td valign="top"> </td>
<td colspan="2" valign="top"> </td>
</tr>
<tr>
<td width="938" colspan="4"><div align="center">DERECHOS RESERVADOS BANCOP ENTIDAD

FINANCIERA COLOMBIA</div></td>
</tr>
</table>
</body>
</html>
20
21
22

Laboratorio 14

Cargado por

Copyright:

Formatos disponibles

Laboratorio 14

Cargado por

Información del documento

Descripción original:

Título original

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

Laboratorio 14

Cargado por

Copyright:

Formatos disponibles

Laboratorio: Desarrollo de Interfaces grficas con HTML5

Renzo Anibal Adame Ovalle

Servicio Nacional de Aprendizaje SENA

Renzo Anibal Adame Ovalle

* Leidy Yohana Vergel Nio

Servicio Nacional de Aprendizaje SENA

1. Laboratorio: Desarrollo de Interfaces grficas con HTML5 4

- Servicio Nacional de Aprendizaje

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

<br /> </td>

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

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

<p class="logo">CORREO :[email protected]</p>

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

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

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

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

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

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

.Estilo1 {color: #00FF00}

.Estilo2 {font-size: 18px}

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

<td width="15" nowrap="nowrap"> </td>

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

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

<td rowspan="2" colspan="2" nowrap="nowrap"> </td>

<td width="212" rowspan="2"> </td>

<td width="4" rowspan="2"> </td>

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

<td width="469" valign="top"> </td>

<br /> </td>

<td width="469" rowspan="2" valign="top"> </td>

<td width="4" rowspan="2"> </td>

<td colspan="2" valign="top"> </td>