Incorporación de Tipografía, Tablas, Formularios y Botones Usando Diseño de Página

Título de la tarea: Incorporación de tipografía, tablas, formularios y botones usando
diseño de página adaptable.
Nombre Alumno:Fabian Gonzalez
Nombre Asignatura: PROGRAMACIÓN WEB I
Instituto IACC
Ponga la fecha aquí: 13/12/2021

DESAROLLO
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:
1. Preparar el ambiente para el proyecto según los pasos 1 al 5 de la tarea de la semana

6.
2. 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.
3. 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,
Quisque 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>
4. Modificar el código entregado para que contemple las siguientes especificaciones:
a) Emplear elementos de tipografía para que la visualización sea como la

mostrada en la imagen de referencia (3 puntos).
b) 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).
c) 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).
d) Agregar el botón de enviar para que se vea activo (1 punto).

La visualización de tu prototipo debería ser la siguiente:
CODIGO HTML
<!DOCTYPE html>
<html lang="en">
<head>


<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>


<link rel="stylesheet" href="css/bootstrap.min.css" >
<link rel="stylesheet" href="css/general.css.css" >
</head>
<body>
<div class="cap">
« Capitulo 1 capitulo 3 »
</div>
<div>
<h2>
<p class="text-center" class="cap2"><em>capitulo dos</em></p>
</h2>
<p>este es el contenido del <strong> capitulo 2</strong>de este interesante libro</p>
<p class="text-right"> veras que es tan interesante como el primero</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Veritatis fuga totam ut,
deleniti ipsam tempora
quisquam incidunt cupiditate quae dolorem voluptatum quis est velit consectetur
vero obcaecati, inventore
error officia suscipit? Quam, possimus voluptatibus. Harum nesciunt facere nam
quae deleniti, fugit
recusandae voluptates earum, corrupti doloribus placeat commodi eaque asperiores?
Totam nemo esse quos
commodi iusto sed quidem molestias. Dolores, consequatur dolorum. Cum voluptas
numquam inventore excepturi
repudiandae tempora commodi ullam, aliquid voluptate ipsum, autem velit sunt,
quaerat modi omnis nobis!
Corporis nihil sapiente beatae suscipit itaque. Reiciendis optio commodi unde
obcaecati, impedit repellat
explicabo officia, natus, rem ea dicta maiores delectus quos deserunt iure dolor
saepe velit dolorem
aspernatur architecto porro! Quisquam modi quos tempora nihil alias consectetur
quas delectus qui? Excepturi
ipsa in voluptatum itaque soluta consequatur sapiente voluptas, suscipit aspernatur
laborum quia possimus
tenetur dicta nesciunt provident, esse consectetur dignissimos officia quo repellat
explicabo minus?
Voluptates vero adipisci pariatur nisi! Voluptate ad, rerum possimus impedit iusto
aliquam molestiae,
dolores expedita debitis tempore temporibus quasi dolore doloribus atque
repudiandae non cum illo quia
perspiciatis asperiores dolor. Corporis in nam possimus debitis architecto magnam
modi impedit, porro culpa
omnis magni dolores doloremque perspiciatis ratione eligendi quidem, itaque
labore! Ut itaque tempora totam
exercitationem praesentium labore earum in quasi illo reiciendis corporis
voluptatem quo odio ullam hic
beatae velit natus laboriosam veniam assumenda accusantium, laborum, minus
facilis. Natus molestias
voluptatum, autem, deserunt dicta, laudantium odio sit expedita voluptas est
delectus cum similique corrupti
exercitationem atque fuga doloribus error repudiandae maiores officia laborum.
Exercitationem quam,
voluptate cum, quae iste in sunt obcaecati, et omnis rerum ab! Atque aut mollitia
ipsum tempora aliquam
</p>
</div>
<br>
<br>
<p>
reflexiona sobre esto <em>"El leer sin pensar hace una mente desordenada. El pensar
sin leer nos hace
desequilibrados"</em>
</p>
<p class="text-right">confucio (551 AC-478 AC). <small>Filosofo chino</small></p>
<p>El elemento <code><elemento></code> ejemplo de como se debera vizualzar
el codigo solicitado en la tarea
</p>
<div class="form.group">
<form name="formulario" method="post">
INTODUCE TU EMAIL AQUI: <input type="email" name="correo" value=""
placeholder="correo_ejemplo@ejemplo.com"><br><br>
</div>
<div class="checkbox">
<label>
<input type="checkbox">si desea activar su suscripcion, active esta casilla</imput>
</label>
</div>
<p>
<button type="button" class="btn btn-primary active">ENVIAR</button>
</p>
<table class="table table-bordered"></table>
<tr>
<td> <b>A continuacion, podemos ver el codigo solicitados</b></td>
</tr>
<div>
<p>
<p >reflexiona sobre esto < em>"El leer sin pensar hace una mente desordenada. El
pensar sin leer nos hace
desequilibrados"</ em></ p>
</p>
</div>



<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"
integrity="sha384-
J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n"
crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"
integrity="sha384-
Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"
integrity="sha384-
wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6"
</body>
</html>
CODIGO CSS
*{
margin: 0%;
padding: 0%;
box-sizing: border-box;
}
body{
background-color:rgb(218, 143, 82) ;
}
h1{
color: black;
font-style: italic;
}
h2{
color: #717171;
}
p{
font: normal 100%/1.5 helvetica, arial, sans-serif;
color: #313131;
}
.cap{
font-family: sans-serif;
font-size: 18px;
font-weight: 600s;
color: black;
background: #fdfdfd;
}
@media screen and (max-width:800px) {
body{
background-color: rgb(228, 175, 2);
}
}
IMAGENES

Incorporación de Tipografía, Tablas, Formularios y Botones Usando Diseño de Página

Cargado por

Información del documento

Descripción original:

Título original

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

Incorporación de Tipografía, Tablas, Formularios y Botones Usando Diseño de Página

Cargado por

Copyright:

Formatos disponibles

Título de la tarea: Incorporación de tipografía, tablas, formularios y botones usando

diseño de página adaptable.

Nombre Alumno:Fabian Gonzalez

Nombre Asignatura: PROGRAMACIÓN WEB I

Ponga la fecha aquí: 13/12/2021

1. Preparar el ambiente para el proyecto según los pasos 1 al 5 de la tarea de la semana

3. Copiar el siguiente código en la sección body de tu página:

a) Emplear elementos de tipografía para que la visualización sea como la

b) Insertar al final de la página el código modificado en el punto a) para mostrar

c) Agregar un formulario vertical para preguntar al usuario su dirección de correo

d) Agregar el botón de enviar para que se vea activo (1 punto).

También podría gustarte