P0 - Tarea #08: Imágenes en páginas Web

Objetivos

Enlazar una hoja de estilos CSS a una página Web
Utilizar algunas reglas CSS: centrar partes del contenido incluir imágenes de contenido

Crea dos archivos: uno HTML y otro CSS con el editor de código Subline Text
Utiliza las reglas CSS apropiadas para:
- Centrar la página Web en todos los navegadores
- Poner un color de fondo a tu página
- Colocar el texto y las imágenes como en el ejemplo
Crea una carpeta con "estructura básica web" y nómbrala como p0_t8_web4.
- Dentro de ella incluye los tres archivos (index.html, estilos.css)
- Comprime toda la carpeta con 7zip y el mismo nombre
- Guárdala en tu pendrive y además en Drive (más tarde la tendrás que entregar para su corrección)
- Aquí tienes algunas imágenes que puedes utilizar (antes debes descomprimir el archivo)


<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <link rel="stylesheet" href="css/estilos.css">
  <title>Imágenes en la Web</title>
</head>
<body>
  <div id="main">

    <h1 class="logo">Imágenes en páginas Web</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Asperiores saepe illo consequuntur, cumque accusamus maxime non. In, quia molestias asperiores unde vitae consequuntur iste id, molestiae quas nobis quidem. Vel dicta nam provident pariatur sit aliquam maxime tempora nesciunt doloribus id, amet sed, quia, ea odio, iste veniam ex voluptatum.</p>
    <h2 class="centro">Imágenes de contenido</h2>
    <hr>
    
    <img src="img/dado.png" alt="" class="izda">
    <h3 class="izdo">Imagen y texto a la izquierda</h3>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Saepe, iste velit deserunt voluptate maiores reiciendis veritatis illo adipisci quaerat voluptatum quam minus fuga dolores atque. Quibusdam omnis, quaerat soluta est voluptatibus temporibus minus pariatur, quas alias. Porro libero aut, repellat, iusto consequuntur suscipit tempora molestiae vero quaerat, amet autem commodi.</p>
    <hr>

    <img src="img/vaso.png" alt="" class="dcha">
    <h3 class="dcho">Imagen y texto a la derecha</h3>   
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Saepe, iste velit deserunt voluptate maiores reiciendis veritatis illo adipisci quaerat voluptatum quam minus fuga dolores atque. Quibusdam omnis, quaerat soluta est voluptatibus temporibus minus pariatur, quas alias. Porro libero aut, repellat, iusto consequuntur suscipit tempora molestiae vero quaerat, amet autem commodi.</p>
    <hr>

    <h3 class="centro">Imagen y texto en el centro</h3>
    <img src="img/cubo1.png" alt="" class="centra">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Saepe, iste velit deserunt voluptate maiores reiciendis veritatis illo adipisci quaerat voluptatum quam minus fuga dolores atque. Quibusdam omnis, quaerat soluta est voluptatibus temporibus minus pariatur, quas alias. Porro libero aut, repellat, iusto consequuntur suscipit tempora molestiae vero quaerat, amet autem commodi.</p>

    <h3 class="centro">Imagen "responsive" (ancho 100%)</h3>
    <img src="img/coche.jpg" alt="" class="centra">

    <h2>Listas con imágenes</h2>
    <ul>
      <li>ítem 01</li>
      <li>ítem 02</li>
      <li>ítem 03</li>
    </ul>

    <hr>
    <footer>(cc) Nombre del alumn@s</footer>
  </div> <!-- fin de manin -->
</body>
</html>

Código CSS


html {
  font: 16px sans-serif;
  color: #ccc;
  min-height: 100vh;
}
body {
  background: #789;
}
#main {
  max-width: 75%;
  width: 800px;
  margin: 1em auto;
  background: rgba(0,0,0,0.2);
  padding: 1em;
}
#main::after {
  content: "";
  display: table;
  clear: both;
}
.logo {
  background: url(../img/3.jpg) 50% 50%;
  height: 150px;
  line-height: 5;
  text-align: center;
  border-radius: 50%;
}
footer {
  font-size: 0.8em;
  text-align: right;
}

 /* clases para imágenes */
.izda {
  display: block;
  float: left;
  margin-right: 10px;
}
.dcha {
  display: block;
  float: right;
  margin-left: 10px;
}
.centra {
  display: block;
  margin: 0 auto;
}
img {
  max-width: 100%;
  height: auto;
}
 /*clases para texto */
 .izdo    { text-align: left; }
 .dcho    { text-align: right; }
 .centro  { text-align: center; }

 /*clases para listas */
ul {
  list-style-image: url(../img/check-verde_1.png);
  font-size: 2em;
  margin: 0 2em;
}

Etiquetas: 1º BTO - Contenidos, 1º BTO - Prácticas