Semana 5 Html
Enviado por Rodrigo Avilés Salas • 18 de Noviembre de 2021 • Tareas • 297 Palabras (2 Páginas) • 380 Visitas
Hojas de estilo en cascada (CSS) II
Rodrigo Aviles
Programación web I
Instituto IACC
02/09/21
Desarrollo
DESARROLLO DE LA TAREA: Un importante autor le solicita que realice el diseño de su nuevo libro, el que se alojará en formato digital. Por lo anterior, le ha pedido una pequeña demostración de cómo se visualizará. Para ello, le entrega el código que realizó otra persona, la que no fue responsable y por tanto, no finalizó el prototipo.
Lo que primero debemos realizar es modificar y ajustar el código para lograr, creamos un archivo .css y lo enlazamos a nuestro código HTML:
Codigo HTML
Cambiamos a links los textos “Capitulo 1” y “Capitulo 3” y le damos el formato correspondiente:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=ISO-8859-1″ />
<title>Libro de ejercicios</title>
<link rel="stylesheet" href="estilo.css">
<style type="text/css" >
.cap1{
text-align: left;
}
.cap3{
text-align: right;
}
</style>
</head>
<body>
<ul>
<a href="#"style="float:left;">« Capítulo 1 </a>
<a href="#"style="float:right;">Capítulo 3 »</a><br>
</ul>
<h2>Capítulo dos</h2>
<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>
</body>
</html>
Codigo CSS
Cambiamos el estilo de la pagina y los colores.
*{
margin-bottom: auto;
}
body{
background-color: #111C0D;
}
ul{
background-color: #EAEAEA;
padding: 10px;
}
.cap1{
color: black; font-family: Arial; font-size: large; border: 1px solid #C5C5C5;
width: 20%; background-color: #EAEAEA;
margin-right: auto;
}
.cap3{
color: black; font-family: Arial; font-size: large; border: 1px solid #C5C5C5;
width: 20%;
margin-left: auto; background-color: #EAEAEA;
}
h2{
color:blue;
}
p{
color: green;
}
[pic 1]
Bibliografía
IACC (2020). A Hojas de estilo en cascada (CSS) II. Programación web I. Semana 5.
Dar estilo a los enlaces - Aprende sobre desarrollo web | MDN. (2021, September 2). Developer Mozilla. https://developer.mozilla.org/es/docs/Learn/CSS/Styling_text/Styling_links
...