maquetacion de pagina web

29
Maquetación De Una Pagina Web. nombre: Brigitt Michelle lopez Rendón profesor: Ignacio Realpe Grado: 11-computacion

Upload: brigitt-lopez

Post on 28-Jun-2015

258 views

Category:

Documents


0 download

TRANSCRIPT

Page 1: Maquetacion de pagina web

Maquetación De Una Pagina Web.

nombre: Brigitt Michelle lopez Rendón profesor: Ignacio RealpeGrado: 11-computacion

Page 2: Maquetacion de pagina web

Ejecutamos el programa Notepad C++.

Page 3: Maquetacion de pagina web

Este es el código HTML de la pagina que vamos a maquetar.

Page 4: Maquetacion de pagina web

Colocamos un formulario en el aside de derecha

Page 5: Maquetacion de pagina web

Después de escribir table para nuestro formulario colocamos filas escribiendo

<tr> y lo cerramos.

Page 6: Maquetacion de pagina web

Una de las casillas tendrá como opción iniciar sesión.

Page 7: Maquetacion de pagina web

Al ejecutarlo con un navegador aparecerá

una casilla que diga iniciar sesión.

Page 8: Maquetacion de pagina web

Agregamos otra casilla con la opción de usuario mediante <label>.

Page 9: Maquetacion de pagina web

Ahí esta la casilla debajo de iniciar sesión.

Page 10: Maquetacion de pagina web

Agregamos propiedades a la fila

Page 11: Maquetacion de pagina web

Nos aparece otro cajoncito en blanco al frente de usuario

Page 12: Maquetacion de pagina web

Le escribimos la etiqueta para contraseña.

Page 13: Maquetacion de pagina web

Aparece la opción de contraseña

Page 14: Maquetacion de pagina web

agregamos una opción para que aparezca frente a contraseña.

Page 15: Maquetacion de pagina web

Aparece la opción para ingresar la contraseña

Page 16: Maquetacion de pagina web

Colspan nos permite que un texto ocupe 2 columnas.

Page 17: Maquetacion de pagina web

Aparece en el centro iniciar sesión.

Page 18: Maquetacion de pagina web

También podemos agregar un vinculo en este caso esta una fecha.

Page 19: Maquetacion de pagina web

Debajo de nuestra tabla esta el vinculo que dice articulo 1 acompañado de una fecha.

Page 20: Maquetacion de pagina web

Si queremos otros vínculos no es mas que copiemos

la estructura y le cambiamos el texto.

Page 21: Maquetacion de pagina web

Ahí tenemos los otros vínculos.

Page 22: Maquetacion de pagina web

Creando un link de referencia dentro del código de nuestra pagina nos permitirá vincularla a otra documento que crearemos de tipo CSS para maquetar nuestra pagina.

Page 23: Maquetacion de pagina web

Después de crear el link de vinculación creamos

un archivo nuevo para escribir las propiedades de nuestra pagina.

Page 24: Maquetacion de pagina web

Lo guardamos en una carpeta llamada

estilo con el nombre de estilo.css todo

en la misma carpeta donde este nuestra pagina.

Page 25: Maquetacion de pagina web

En la hoja de tipo CSS creada le damos propiedades a

nuestra pagina en este caso tiene que aparecer centrada utilizamos la variable todo

para que esto ocurra.

Page 26: Maquetacion de pagina web

Toda la pagina aparece centrada

Page 27: Maquetacion de pagina web

También podemos agregarle una margen al encabezado declarando header.

Page 28: Maquetacion de pagina web
Page 29: Maquetacion de pagina web

Gracias Por Su

Atención!