Maquetacion de pagina web
-
Upload
brigitt-lopez -
Category
Documents
-
view
258 -
download
0
Transcript of Maquetacion de pagina web
![Page 1: Maquetacion de pagina web](https://reader038.fdocuments.net/reader038/viewer/2022103018/559008ef1a28ab0d5c8b47df/html5/thumbnails/1.jpg)
Maquetación De Una Pagina Web.
nombre: Brigitt Michelle lopez Rendón profesor: Ignacio RealpeGrado: 11-computacion
![Page 2: Maquetacion de pagina web](https://reader038.fdocuments.net/reader038/viewer/2022103018/559008ef1a28ab0d5c8b47df/html5/thumbnails/2.jpg)
Ejecutamos el programa Notepad C++.
![Page 3: Maquetacion de pagina web](https://reader038.fdocuments.net/reader038/viewer/2022103018/559008ef1a28ab0d5c8b47df/html5/thumbnails/3.jpg)
Este es el código HTML de la pagina que vamos a maquetar.
![Page 4: Maquetacion de pagina web](https://reader038.fdocuments.net/reader038/viewer/2022103018/559008ef1a28ab0d5c8b47df/html5/thumbnails/4.jpg)
Colocamos un formulario en el aside de derecha
![Page 5: Maquetacion de pagina web](https://reader038.fdocuments.net/reader038/viewer/2022103018/559008ef1a28ab0d5c8b47df/html5/thumbnails/5.jpg)
Después de escribir table para nuestro formulario colocamos filas escribiendo
<tr> y lo cerramos.
![Page 6: Maquetacion de pagina web](https://reader038.fdocuments.net/reader038/viewer/2022103018/559008ef1a28ab0d5c8b47df/html5/thumbnails/6.jpg)
Una de las casillas tendrá como opción iniciar sesión.
![Page 7: Maquetacion de pagina web](https://reader038.fdocuments.net/reader038/viewer/2022103018/559008ef1a28ab0d5c8b47df/html5/thumbnails/7.jpg)
Al ejecutarlo con un navegador aparecerá
una casilla que diga iniciar sesión.
![Page 8: Maquetacion de pagina web](https://reader038.fdocuments.net/reader038/viewer/2022103018/559008ef1a28ab0d5c8b47df/html5/thumbnails/8.jpg)
Agregamos otra casilla con la opción de usuario mediante <label>.
![Page 9: Maquetacion de pagina web](https://reader038.fdocuments.net/reader038/viewer/2022103018/559008ef1a28ab0d5c8b47df/html5/thumbnails/9.jpg)
Ahí esta la casilla debajo de iniciar sesión.
![Page 10: Maquetacion de pagina web](https://reader038.fdocuments.net/reader038/viewer/2022103018/559008ef1a28ab0d5c8b47df/html5/thumbnails/10.jpg)
Agregamos propiedades a la fila
![Page 11: Maquetacion de pagina web](https://reader038.fdocuments.net/reader038/viewer/2022103018/559008ef1a28ab0d5c8b47df/html5/thumbnails/11.jpg)
Nos aparece otro cajoncito en blanco al frente de usuario
![Page 12: Maquetacion de pagina web](https://reader038.fdocuments.net/reader038/viewer/2022103018/559008ef1a28ab0d5c8b47df/html5/thumbnails/12.jpg)
Le escribimos la etiqueta para contraseña.
![Page 13: Maquetacion de pagina web](https://reader038.fdocuments.net/reader038/viewer/2022103018/559008ef1a28ab0d5c8b47df/html5/thumbnails/13.jpg)
Aparece la opción de contraseña
![Page 14: Maquetacion de pagina web](https://reader038.fdocuments.net/reader038/viewer/2022103018/559008ef1a28ab0d5c8b47df/html5/thumbnails/14.jpg)
agregamos una opción para que aparezca frente a contraseña.
![Page 15: Maquetacion de pagina web](https://reader038.fdocuments.net/reader038/viewer/2022103018/559008ef1a28ab0d5c8b47df/html5/thumbnails/15.jpg)
Aparece la opción para ingresar la contraseña
![Page 16: Maquetacion de pagina web](https://reader038.fdocuments.net/reader038/viewer/2022103018/559008ef1a28ab0d5c8b47df/html5/thumbnails/16.jpg)
Colspan nos permite que un texto ocupe 2 columnas.
![Page 17: Maquetacion de pagina web](https://reader038.fdocuments.net/reader038/viewer/2022103018/559008ef1a28ab0d5c8b47df/html5/thumbnails/17.jpg)
Aparece en el centro iniciar sesión.
![Page 18: Maquetacion de pagina web](https://reader038.fdocuments.net/reader038/viewer/2022103018/559008ef1a28ab0d5c8b47df/html5/thumbnails/18.jpg)
También podemos agregar un vinculo en este caso esta una fecha.
![Page 19: Maquetacion de pagina web](https://reader038.fdocuments.net/reader038/viewer/2022103018/559008ef1a28ab0d5c8b47df/html5/thumbnails/19.jpg)
Debajo de nuestra tabla esta el vinculo que dice articulo 1 acompañado de una fecha.
![Page 20: Maquetacion de pagina web](https://reader038.fdocuments.net/reader038/viewer/2022103018/559008ef1a28ab0d5c8b47df/html5/thumbnails/20.jpg)
Si queremos otros vínculos no es mas que copiemos
la estructura y le cambiamos el texto.
![Page 21: Maquetacion de pagina web](https://reader038.fdocuments.net/reader038/viewer/2022103018/559008ef1a28ab0d5c8b47df/html5/thumbnails/21.jpg)
Ahí tenemos los otros vínculos.
![Page 22: Maquetacion de pagina web](https://reader038.fdocuments.net/reader038/viewer/2022103018/559008ef1a28ab0d5c8b47df/html5/thumbnails/22.jpg)
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](https://reader038.fdocuments.net/reader038/viewer/2022103018/559008ef1a28ab0d5c8b47df/html5/thumbnails/23.jpg)
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](https://reader038.fdocuments.net/reader038/viewer/2022103018/559008ef1a28ab0d5c8b47df/html5/thumbnails/24.jpg)
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](https://reader038.fdocuments.net/reader038/viewer/2022103018/559008ef1a28ab0d5c8b47df/html5/thumbnails/25.jpg)
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](https://reader038.fdocuments.net/reader038/viewer/2022103018/559008ef1a28ab0d5c8b47df/html5/thumbnails/26.jpg)
Toda la pagina aparece centrada
![Page 27: Maquetacion de pagina web](https://reader038.fdocuments.net/reader038/viewer/2022103018/559008ef1a28ab0d5c8b47df/html5/thumbnails/27.jpg)
También podemos agregarle una margen al encabezado declarando header.
![Page 28: Maquetacion de pagina web](https://reader038.fdocuments.net/reader038/viewer/2022103018/559008ef1a28ab0d5c8b47df/html5/thumbnails/28.jpg)
![Page 29: Maquetacion de pagina web](https://reader038.fdocuments.net/reader038/viewer/2022103018/559008ef1a28ab0d5c8b47df/html5/thumbnails/29.jpg)
Gracias Por Su
Atención!