MAQUETACION DE UNA PAGINA WEB

Díaz Jojoa Andrés Felipe 11 COMPUTACION

Para iniciar ejecutamos el programa Notepad C++

En la imagen tenemos en código en lenguaje HTML de la pagina que vamos a maquetear

En el aside de derecha colocaremos un formulario

Despues de escribir table para nuestro formulario colocaremos filas escribiendo <tr>. Podemos mirar el ejemplo en la imagen

Ahora crearemos una casilla que nos de cómo opción INICIAR SESION

Al ejecutar nuestro código con un navegador (en este caso opera) aparecerá una casilla que dice iniciar sesión (podemos mirar en la imagen)

Agregaremos otra casilla. En la cual encontraremos la opción de USUARIO mediante <label>

En la imagen podemos observar la casilla que hemos creado (debajo de iniciar sesión)

Ahora agregaremos propiedades a la fila

Como podemos observar en la imagen. Hemos creado un cajón el cual esta frente de nuestra opción usuario

Le escribimos la etiqueta para crear una nueva opción CONTRASEÑA

Al ejecutar nuestro código miramos como nos aparece una nueva opción CONTRASEÑA

Agregaremos una opción la cual aparecera frente en cajón de contraseña

En este cajón podemos insertar nuestra contraseña para poder acceder

Colocaremos un código COLSPAN el cual nos permite que un texto ocupe 2 columnas

Al ejecutarlo podemos observar como iniciar sesión ocupa dos casillas de nuestra tabla

También podemos agregarle un vinculo a nuestra pagina en este caso agregaremos la fecha

Observamos en la imagen que en la parte inferior de nuestra tabla a aparecido nuestro vinculo con la fecha

Si queremos crear otros vínculos copeamos la estructura y solo cambiamos el texto

Podemos observar en la imagen que hemos creado mas vínculos

Creando un link de referencia dentro del código de nuestra pagina podremos vincularla a otro documento que crearemos en tipo CSS para maquetear nuestra pagina

Después de crear el link de vinculación crearemos un archivo nuevo para escribir las propiedades de nuestra pagina

Lo guardaremos en una carpeta que le pondremos como nombre ESTILO.CSS. Todos los cambiamos los guardaremos en esta misma carpeta

En la hoja creada de tipo CSS le damos propiedades a nuestra pagina. En este caso utilizamos la variable TODO. La cual hará que nuestra pagina salga centrada

Nuestra pagina aparecerá centrada

Ahora le agregaremos una margen al encabezado de nuestra pagina. Para esto declararemos la variable header

Overflow hiddent este nos permitirá que solo aparezca en el encabezado de nuestra pagina. Si quitamos este nos aparecerá toda nuestra pagina

Ahora vamos a maquetear el aside izquierda de nuestra tabla de usuario

Nuestra tabla nos aparecerá a la izquierda

Ahora maquetamos el centro de nuestra pagina mediante section

Al ejecutarlo podemos mirar nuestros cambios

Continuamos maquetando el aside de la parte derecha de nuestra pagina

En la parte central de la pagina nos aparecerán nuestros artículos

Footer nos permitirá ajustar el tamaño de nuestra margen central

Al ejecutar nuestra margen central esta de ajustara entre los vínculos y el formulario

Ahora crearemos un nuevo archivo

Ahora colocaremos el siguiente código para redondear el margen de nuestro encabezado

En la imagen podemos observar el redondeado que le hemos dado a nuestro encabezado

Ahora le colocaremos un sombreado a nuestros titulos y le colocaremos su tamaño en pixeles

Ahora crearemos botones para nuestras opciones y también le colocaremos un sombreado a su margen

NUESTRA PAGINA