Semana 1 Programación Web
Enviado por Ludwig9 • 9 de Mayo de 2021 • Informes • 555 Palabras (3 Páginas) • 101 Visitas
Tarea Semana 5
Luis Alfredo Maizo Aleman
Programación Web I
Instituto IACC
03 de Mayo de 2021
Desarrollo
Paso 1: Copio y pego el código en Sublime Text:
[pic 1]
Paso 2: Verifico cómo se ve la página (con la ayuda de XAMPP) sin los estilos y veo los errores que esta pueda tener (como por ejemplo, no se ven los acentos):
[pic 2]
[pic 3]
Para solucionar el problema de los acentos cambié el valor del charset en la etiqueta <meta> a <meta charset="UTF-8">
Paso 3: Ahora para especificar los diferentes estilos, he decidido colocarle clases a las etiquetas de los capítulos, para poder darles estilos por separado y al capítulo 2 lo coloqué dentro de una etiqueta <h2> para darle el estilo diferente.
[pic 4]
[pic 5]
Paso 4: Ahora empiezo con los estilos. En la parte superior deben estar las dos direcciones al capitulo anterior y al capítulo siguiente. Y deben estar situadas en ambas esquinas separadas por un espacio intermedio. Para ello, use el display: flex en la caja superior (cambiaCapitulos) para colocar las cajas inferiores en columnas, y a la caja del medio le di (la caja con el espacio) le di un valor con flex-grow, haciendo que abarque todo el espacio necesario entre las otras dos cajas con los capítulos.
[pic 6]
[pic 7]
Para finalizar los estilos, coloqué un padding de 10 píxeles a la caja superior. Luego el titulo de capítulo 2 lo cambié a color azul, los párrafos a verde y el fondo al color hexadecimal #122229, el cual es muy parecido al solicitado. Con estos estilos la página queda de la siguiente manera:
[pic 8]
[pic 9]
Código:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<title>Libro de ejercicios</title>
<style type="text/css">
body{
background-color: #122229;
}
.cambiaCapitulos {
background-color: #fff1f0;
display: flex;
padding: 10px;
}
.espacioCapitulos{
flex-grow: 1;
}
h2{
color: blue;
}
p {
color: green;
...