S7 - Jose Flores Semana 7

PROGRAMACION WEB I
SEMANA 7
Jose Flores
14 de agosto de 2022
Ingeniería en Informática
DESARROLLO
1. Se prepara el ambiente del proyecto según los pasos de la semana 6:
Se descargo Bootstrap se generó la carpeta prototipo, dentro de esta carpeta se colocaron los datos de
Bootstrap, y generamos el index.html
2. Creamos la hoja de estilo general.css: se realizaron alguno peños cambios como:
*{
font-family: Arial, Helvetica, sans-serif;
Para colocar el estilo de letra

3. Se copia el código entregado en el body:
4. A.
Se emplean los siguientes elementos para generar la visualización a la mostrada en referencia:
<h1 class="text-center mt-4 mb-3">Capítulo dos</h1> (se usan las clases de boostrap)
<h4>Este es el contenido del
<b>capítulo 2</b> (para generar la negrita ocupo <b></b>)
de este interesante libro </h4>
<p class="text-right mt-4">Verás que es tan interesante como el primero</p> (se usan las clases de
boostrap), con este generamos el espaciado.
<p class="text-right mt-4">Verás que es tan interesante como el primero</p> (se utiliza text-right y mt
para generar el espaciado)
<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. (se mantetiene el Lorem ipsum)
</p>
b. Se inserta al final de la pagina el código modificado del punto a.
<div class="col-12">
<p><code><p></code>Reflexiona sobre esto <code><i></code><i>"El leer sin pensar

nos hace una mente desordenada. El pensar sin leer nos hace
desequilibrados"</i><code></i></code><code></p></code></p>
</div>
Aquí para que se pueda realizar lo que se pide agrego el <code></code> y talmbien utilizo <i></i>.
c. Se genera el formulario de la siguiente manera:
<form action="" class="mt-4">
<div class="form-group">
<label for="correo"><b>Correo</b></label>
<input type="email" class="form-control" id="correo" placeholder="Introduce tu correo

electrónico">
</div>
<input class="form-control-md" type="checkbox"> Si deseas activar tu suscripción esta casilla
<br>
Se realiza un formulario con <form action=’’’’> y para este caso lo dejo vacío y agrego un mt-4, incluyo el
imput class=”form-control y la agrego md para que el cuadrado no que grande.
5. Se agrega el botón enviar para que se vea activos, para esto agregamos active de la siguiente
manera:
<button class="btn btn-primary mt-2 active">Enviar</button>
Y lo podemos observar de la siguiente manera:
Y aquí incluyo el resultado final del trabajo en código e imagen general:
<!doctype html>
<html lang="en">
<head>

<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/general.css">
<link rel="stylesheet" href="css/tablets.css" media="only screen and (min-device-width : 320px) and

(max-device-width : 768px)"/>
<title>Hello, world!</title>
</head>
<body>
<div>
« Capítulo 1 Capítulo 3 »
</div>
<h1 class="text-center mt-4 mb-3">Capítulo dos</h1>
<h4>Este es el contenido del
<b>capítulo 2</b>
de este interesante libro </h4>
<p class="text-right mt-4">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>
<div class="col-12">
<p><code><p></code>Reflexiona sobre esto <code><i></code><i>"El leer sin pensar

nos hace una mente desordenada. El pensar sin leer nos hace
desequilibrados"</i><code></i></code><code></p></code></p>
</div>
<p class="text-right">Confucio (551 AC-478 AC). Filósofo chino</p>
<form action="" class="mt-4">
<div class="form-group">
<label for="correo"><b>Correo</b></label>
<input type="email" class="form-control" id="correo" placeholder="Introduce tu correo
electrónico">
</div>
<input class="form-control-md" type="checkbox"> Si deseas activar tu suscripción esta casilla
<br>
<button class="btn btn-primary mt-2 active">Enviar</button>
</form>
</body>
</html>


<script src="js/jquery-3.4.1.slim.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>
REFERENCIAS BIBLIOGRÁFICAS
IACC (2020). Diseño adaptable (responsive). Parte I. Programación WEB I. Semana 7.

S7 - Jose Flores Semana 7

Cargado por

Copyright:

Formatos disponibles

S7 - Jose Flores Semana 7

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

S7 - Jose Flores Semana 7

Cargado por

Copyright:

Formatos disponibles

PROGRAMACION WEB I

2. Creamos la hoja de estilo general.css: se realizaron alguno peños cambios como:

font-family: Arial, Helvetica, sans-serif;

Para colocar el estilo de letra

Se emplean los siguientes elementos para generar la visualización a la mostrada en referencia:

<h4>Este es el contenido del

<b>capítulo 2</b> (para generar la negrita ocupo <b></b>)

de este interesante libro </h4>

condimentum justo, ut commodo justo semper in.

placerat, sem eu tristique tempus, ex sem rhoncus lorem,

ac nunc. Donec maximus elit non felis mattis,

et pharetra nunc dapibus.Cras hendrerit lorem vitae dignissim iaculis. Maecenas

ultricies, elit rhoncus dignissim sodales. (se mantetiene el Lorem ipsum)

<p><code>&lt;p&gt;</code>Reflexiona sobre esto <code>&lt;i&gt;</code><i>"El leer sin pensar

c. Se genera el formulario de la siguiente manera:

<form action="" class="mt-4">

<input type="email" class="form-control" id="correo" placeholder="Introduce tu correo

<input class="form-control-md" type="checkbox"> Si deseas activar tu suscripción esta casilla

<button class="btn btn-primary mt-2 active">Enviar</button>

Y lo podemos observar de la siguiente manera:

Y aquí incluyo el resultado final del trabajo en código e imagen general:

<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

<link rel="stylesheet" href="css/bootstrap.min.css">

<link rel="stylesheet" href="css/general.css">

<link rel="stylesheet" href="css/tablets.css" media="only screen and (min-device-width : 320px) and

&laquo; Capítulo 1 &nbsp; Capítulo 3 &raquo;

<h1 class="text-center mt-4 mb-3">Capítulo dos</h1>

<h4>Este es el contenido del

de este interesante libro </h4>

<p class="text-right mt-4">Verás que es tan interesante como el primero</p>

condimentum justo, ut commodo justo semper in.

placerat, sem eu tristique tempus, ex sem rhoncus lorem,

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><code>&lt;p&gt;</code>Reflexiona sobre esto <code>&lt;i&gt;</code><i>"El leer sin pensar

<p class="text-right">Confucio (551 AC-478 AC). Filósofo chino</p>

<form action="" class="mt-4">

<input class="form-control-md" type="checkbox"> Si deseas activar tu suscripción esta casilla

<button class="btn btn-primary mt-2 active">Enviar</button>

También podría gustarte

<p><code><p></code>Reflexiona sobre esto <code><i></code><i>"El leer sin pensar

« Capítulo 1 Capítulo 3 »

<p><code><p></code>Reflexiona sobre esto <code><i></code><i>"El leer sin pensar