Anda di halaman 1dari 8

Construcción de la Interfaz Web para el proyecto de 18/04/2018

formación

Colegio Alemán de Cali Pág. 1 de 8

AP6-AA3-EV2-CONSTRUCCIÓN DE LA INTERFAZ WEB PARA EL


PROYECTO DE FORMACIÓN

LUIS GABRIEL CUBILLOS HOYOS

YESID FERNANDO ESPAÑA

INSTRUCTORES:

DIANA MARIA RICO

LUIS CARLOS OSSA GOMEZ

SERVICIO NACIONAL DE APRENDIZAJE

ANALISIS Y DESARROLLO DE SISTEMAS DE INFORMACIÓN

REGIONAL ANTIOQUÍA

2017

Construcción de la Interfaz Web para el proyecto de formación


Construcción de la Interfaz Web para el proyecto de 18/04/2018
formación

Colegio Alemán de Cali Pág. 2 de 8

Página WEB principal de nuestro proyecto

Construcción de la Interfaz Web para el proyecto de formación


Construcción de la Interfaz Web para el proyecto de 18/04/2018
formación

Colegio Alemán de Cali Pág. 3 de 8

Página Web de ingreso

Construcción de la Interfaz Web para el proyecto de formación


Construcción de la Interfaz Web para el proyecto de 18/04/2018
formación

Colegio Alemán de Cali Pág. 4 de 8

Código en html5 y ccs3

SCRIPTS
<Doctype html>
<html lang= "es">
<link rel="icon" type="image/jpg" href="imagenes/LOGO.jpg"/>
<head>
<title>FORMULARIO DE REGISTRO</title>
<link rel="stylesheet" type="text/css"
href="css/Style1.css"></link>
<link rel="stylesheet" type="text/css" href="css/font-
awesome.css">
<style type="text/css">
body {

background-image: url(imagenes/fondo.bmp);
}
</style>
<meta http-equiv="Content-Type" content="text/html;
charset=utf-8">
</head>

<body>
<p><img src="imagenes/dscali.png" width="970" height="130"
border="0">
</p>
<p>&nbsp;</p>
<p>&nbsp;</p>

Construcción de la Interfaz Web para el proyecto de formación


Construcción de la Interfaz Web para el proyecto de 18/04/2018
formación

Colegio Alemán de Cali Pág. 5 de 8

<blockquote>
<blockquote>
<br>
<div style="position: absolute; top:110">
<h1><em>Bienvenido al Centro de Soporte del Colegio
Aleman de Cali</em></h1></div>
<p>&nbsp;</p>
<div style="position: absolute; top:150">
<p><em>Si usted no esta <b>registrado</b> lo invitamos a
registrarse en el siguiente formulario:</em></p>
</blockquote>
</blockquote>
<div class="container">
<form>
<div class="form-input">
<input type="text" name= "NOMBRE"
placeholder= " Ingrese Nombre" >
</div>

<div class="form-input">
<input type="text" name= "Apellidos"
placeholder= " Ingrese Apellidos" > </div>

<div class="form-input">
<input type="text" name= "Telefono"
placeholder= " Ingrese Telefono" ></div>

<div class="form-input">

Construcción de la Interfaz Web para el proyecto de formación


Construcción de la Interfaz Web para el proyecto de 18/04/2018
formación

Colegio Alemán de Cali Pág. 6 de 8

<input type="text" name= "Correo"


placeholder= " Ingrese Correo" ></div>

<div class="form-input">
<input type= "password" name=
"Contrase&#241a" placeholder= "&#128272; Ingrese Contrase&#241a "
name="clave" >

<div class="form-input">
<input type= "password" name=
"Contrase&#241a" placeholder= "&#128272; Repita Contraseña "
name="clave" >
</div>
<div>

<div>
<input type="submit" value="Enviar" class="btn-enviar"></div>

<p class="form__link"> Ya eres usuario ? <a href="registro


usuario/Ingresa Aqui.html">Ingresa Aqui</a></p>

</div>

</form>
</div>
</body>
</html>

Construcción de la Interfaz Web para el proyecto de formación


Construcción de la Interfaz Web para el proyecto de 18/04/2018
formación

Colegio Alemán de Cali Pág. 7 de 8

SCRIPTS

<Doctype html>
<html lang=es">
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="css/font-
awesome.css">
<style type="text/css">
body {
background-image: url(imagenes/fondo.png);
}
</style>
<meta http-equiv="Content-Type" content="text/html;
charset=utf-8">
</head>
<body>
<p><img src="imagenes/dscali.png" width="970" height="130">
</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<blockquote>
<blockquote>
<div style="position: absolute; top:110">
<h1><em>Bienvenido al Centro de Soporte del Colegio
Aleman de Cali</em></h1>

Construcción de la Interfaz Web para el proyecto de formación


Construcción de la Interfaz Web para el proyecto de 18/04/2018
formación

Colegio Alemán de Cali Pág. 8 de 8

</blockquote>
</blockquote>
<div class="container">
<form>
<div class="form-input">
<input type="text" name= "Usuario"
placeholder= "&#128272; Ingrese Usuario" >
</div>
<div class="form-input">
<input type= "password" name=
"Contrase&#241a" placeholder= "&#128272; Ingrese Contrase&#241a "
name="clave">
</div>
<input type="submit" value= "Ingresar">

</div>

</form>
</div>S
</body>
</html>

Construcción de la Interfaz Web para el proyecto de formación

Anda mungkin juga menyukai