Incorporación de tipografía, tablas, Formularios y botones usando diseño de página adaptable
Enviado por raul ignacio alarcon hormazabal • 16 de Agosto de 2021 • Tareas • 3.185 Palabras (13 Páginas) • 145 Visitas
Incorporación de tipografía, tablas,
Formularios y botones usando diseño de página adaptable.
Raúl Alarcón H.
Programación Web I
Instituto IACC
12/07/2021
TAREA SEMANA 7:
Un autor de un libro le solicita que realice el diseño de página adaptable de su libro, que alojará en formato digital, por lo que le ha solicitado una pequeña demostración de cómo se visualizará. Para ello, le entrega un código que realizó otra persona que no fue responsable y, por tanto, no finalizó el prototipo. Para ello deberá realizar los siguientes pasos:
- Preparar el ambiente para el proyecto según los pasos 1 al 5 de la tarea de la semana 6.
- Crear una hoja de estilo llamada general.css a partir del código proporcionado en las páginas 21 y 22 del contenido de la semana 6 e incorpórela a su prototipo.
- Copiar el siguiente código en la sección body de tu página:
<body>
<div>
« Capítulo 1 Capítulo 3 »
</div>
<p>Capítulo dos</p>
<p>Este es el contenido del capítulo 2 de este interesante libro </p>
<p >Verás que es tan interesante como el primero</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque blandit
condimentum justo, ut commodo justo semper in.
Suspendisse tincidunt turpis nibh, vel gravida velit consectetur tempus. Aenean
placerat, sem eu tristique tempus, ex sem rhoncus lorem, uisque facilisis, libero sed dapibus suscipit, dolor felis mollis dui, nec luctus odio diam
ac nunc. Donec maximus elit non felis mattis,
et pharetra nunc dapibus.Cras hendrerit lorem vitae dignissim iaculis. Maecenas
ultricies, elit rhoncus dignissim sodales. </p>
<br>
<br>
<p> Reflexiona sobre esto "El leer sin pensar nos hace una mente desordenada. El pensar sin leer nos hace desequilibrados"</p>
<p>Confucio (551 AC-478 AC). Filósofo chino</p>
</body>
- Modificar el código entregado para que contemple las siguientes especificaciones:
- Emplear elementos de tipografía para que la visualización sea como la mostrada en la imagen de referencia (3 puntos).
- Insertar al final de la página el código modificado en el punto a) para mostrar con todas las etiquetas y clases en el navegador la línea:
Reflexiona sobre esto "El leer sin pensar nos hace una mente desordenada. El pensar sin leer nos hace desequilibrados" (1,5 puntos).
- Agregar un formulario vertical para preguntar al usuario su dirección de correo y una casilla que pregunte si desea suscripción a la página (3,5 puntos).
- Agregar el botón de enviar para que se vea activo (1 punto). La visualización de tu prototipo debería ser la siguiente:
La visualización de tu prototipo debería ser la siguiente:
[pic 1]
Deberá entregar el código y, adicionalmente, preparar la evidencia de su implementación, mediante capturas de pantalla con las visualizaciones en el navegador de todos los aspectos solicitados y su correspondiente explicación desarrollada en la plantilla establecida por IACC para la entrega de la tarea de la semana.
DESARROLLO.
- Primero que nada descargamos los archivos correspondientes de la página de BOOTSTRAP.
[pic 2]
Luego creamos la Carpeta Prototipo, donde iran alojados nuestro archivo HTML y la carpeta de CSS que descargamos de la página de bootstrap.
[pic 3]
[pic 4]
- Creamos nuestra hoja de estilo con el nombre de General.css.
[pic 5]
- Ahora tenemos nuestro código HTML sin modificar.
[pic 6]
- Posterior modificamos nuestro código HTML,
En esta parte se emplearon los elementos de tipografía solicitados, donde se usaron, aligen para alinear los textos, center para centrar paginas, right alinear lado derecho, left para alinear lado izquierdo, además para los textos “Capitulo 1 y Capitulo 3” se usaron columnas para que estén en cada extremos de la pagina y además estas sean responsive cuando se use en otro dispositivo con menos tamaño de pantalla, también se uso Strong destacara mas el Titulo (Capitulo 2).
[pic 7]
[pic 8]
Otro punto de acuerdo a lo que se solicitaba es insertar al final de la pagina destacar el código que uso en la frase Reflexiona sobre esto "El leer sin pensar nos hace una mente desordenada. El pensar sin leer nos hace desequilibrados"
[pic 9]
Se uso también un contenedor para alinear y rellenar el contenido dentro de la ventana.
Se uso igual para mostrar el código de la frase la etiqueta <code> además de remplazar los caracteres < > < y > para ayudar a mostrar el código en la pagina.
[pic 10]
Por otro lado debemos agregar un formulario el cual podamos ingresar nuestro correo electrónico, para es usamos las siguientes etiquetas:
Input el cual nos permite crear los controles para el formulario.
Placeholder, muestra el texto donde dice Introduce tu correo electrónico
Type=email para crear el control interactivo del correo electrónico.
Type=checkbox control interactivos para indicar el elemento seleccionado.
[pic 11]
[pic 12]
También agregamos el botón enviar.
La visualización de nuestra página sería la siguiente, eso si en vez dejar un background Blanco se dejo con background Negro.
...