maquetacion de pagina web

Post on 28-Jun-2015

258 Views

Category:

Documents

0 Downloads

Preview:

Click to see full reader

TRANSCRIPT

Maquetación De Una Pagina Web.

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

Ejecutamos el programa Notepad C++.

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

Colocamos un formulario en el aside de derecha

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

<tr> y lo cerramos.

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

Al ejecutarlo con un navegador aparecerá

una casilla que diga iniciar sesión.

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

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

Agregamos propiedades a la fila

Nos aparece otro cajoncito en blanco al frente de usuario

Le escribimos la etiqueta para contraseña.

Aparece la opción de contraseña

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

Aparece la opción para ingresar la contraseña

Colspan nos permite que un texto ocupe 2 columnas.

Aparece en el centro iniciar sesión.

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

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

Si queremos otros vínculos no es mas que copiemos

la estructura y le cambiamos el texto.

Ahí tenemos los otros vínculos.

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.

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

un archivo nuevo para escribir las propiedades de nuestra pagina.

Lo guardamos en una carpeta llamada

estilo con el nombre de estilo.css todo

en la misma carpeta donde este nuestra pagina.

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.

Toda la pagina aparece centrada

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

Gracias Por Su

Atención!

top related