Autor Tema: background-image repeat crear una web con una imagen de fondo tapiz CU01030D (Leído 2477 veces)

hymsoft · « **en:** 25 de Agosto 2016, 20:12 »

Buenas buenas!!!

Dejo mis ejercicios de la entrega CU01030D del tutorial de desarrollo web con CSS para beginners.

Para el ejercicio 2, como siempre, tratando de usar todo o parte de lo aprendido, arme un pequeño menu con CSS y quería usar solo una hoja de estilo con las dos paginas, así que hice un class en el body. No se si esto es correcto, pero con lo aprendido hasta acá es lo único que se me ocurrió.

Ejercicio 1:

CU01030Da.html

Código: [Seleccionar]

<!DOCTYPE html>
<html lang="es">
  <head>
    <title>Background-image repeat - Curso aprenderaprogramar.com</title>
    <meta name="author" content="Hugo A. Segura" />
    <meta name="description" content="Background-image repeat CSS. Top, right, botton, left" />
    <meta name="keywords" content="curso, aprender a programar, html, css, background-image,repeat, (CU01030D)" />    
    <meta charset="utf-8" />
    <meta name="robots" content="index, follow" />
    <link rel="stylesheet" type="text/css" href="CU01030Da.css"/>
  </head>
  <body>
    <h1 id="ejercicio">Resolución ejercicio numero 1 (CU01030D)</h1>
    <h2 id="entrega">Entrega número 30</h2>
    <div id="div1"> Marca de vehículo que me gusta.</div>
    <div id="div2"> <P>Cocinando</P><p>con</p><p>Hugo</p></div>
    <div id="div3"><p>Si no lo conoces...</p></div>
    <div id="div4"> Taller Metalúrgico <p><strong>"La soldadora loca"</strong></p></div>
  </body>
</html>

CU01030Da.css

Código: [Seleccionar]

/* Estilos aplicados al ejercicio entrega N1 26
aprenderaprogramar.com (CU01029D)*/

*{
  font-family: Arial, sans-serif;
}

html{
  background-color: beige
}

#ejercicio {
  text-align: center;
  margin: 0;
}

#entrega {
  text-align: center;
}

#div1,#div2,#div3,#div4{
  width: 250px;
  height: 250px;
  float: left;
  text-align:center;
  margin: 30px;
  padding: 30px;
}

#div1{
  background-color: aqua;
  background-image: url(http://i.imgur.com/NAPXgz1.png);
  font-size: 2em;
  font-weight: bold;
}

#div2{
  color: aliceblue;
  background-color: aqua;
  background-image: url(http://i.imgur.com/sPRwb9B.png);
  font-size: 2em;
  font-weight: bold;
}

#div3{
  background-color: black;
  background-image: url(http://i.imgur.com/8TZu9z7.png);
  font-size: 3em;
  font-weight: bold;
  color:black;
  line-height: 2em;
}

#div3 p{background-color: rgba(240,248,255,0.5)}

#div4{
  color:beige;
  background-color: aqua;
  background-image: url(http://i.imgur.com/jVmOGtl.png);
  font-size: 2em;
}

Ejercicio 2:

CU01030Db1.html

Código: [Seleccionar]

<!DOCTYPE html>
<html lang="es">
  <head>
    <title>Background-image repeat - Curso aprenderaprogramar.com</title>
    <meta name="author" content="Hugo A. Segura" />
    <meta name="description" content="Background-image repeat CSS. Top, right, botton, left" />
    <meta name="keywords" content="curso, aprender a programar, html, css, background-image,repeat, (CU01030D)" />    
    <meta charset="utf-8" />
    <meta name="robots" content="index, follow" />
    <link rel="stylesheet" type="text/css" href="CU01030Db.css"/>
  </head>
  <body class="pag1">
    <div class="encabezado">
      <h1>Resolución ejercicio numero 2 (CU01030D)</h1>
      <h2>Entrega número 30 (página 1)</h2>
    </div>
    <div>
      <hr>
      <ul class="menu">
        <li><a href="#" title="Esta página">Página 1</a></li>
        <li><a href="CU01030Db2.html" title="Página 2">Página 2</a></li>
      </ul>
      <hr>
    </div>
  </body>
</html>

CU01030Db2.html

Código: [Seleccionar]

<!DOCTYPE html>
<html lang="es">
  <head>
    <title>Background-image repeat - Curso aprenderaprogramar.com</title>
    <meta name="author" content="Hugo A. Segura" />
    <meta name="description" content="Background-image repeat CSS. Top, right, botton, left" />
    <meta name="keywords" content="curso, aprender a programar, html, css, background-image,repeat, (CU01030D)" />    
    <meta charset="utf-8" />
    <meta name="robots" content="index, follow" />
    <link rel="stylesheet" type="text/css" href="CU01030Db.css"/>
  </head>
  <body class="pag2">
    <div class="encabezado">
      <h1>Resolución ejercicio numero 2 (CU01030D)</h1>
      <h2>Entrega número 30 (página 2)</h2>
    </div>
    <div>
      <hr>
      <ul class="menu">
        <li><a href="CU01030Db1.html" title="Esta página">Página 1</a></li>
        <li><a href="#" title="Página 2">Página 2</a></li>
      </ul>
      <hr>
    </div>
  </body>
</html>

CU01030Db.css

Código: [Seleccionar]

/* Estilos aplicados al ejercicio entrega N1 26
aprenderaprogramar.com (CU01029D)*/

*{
  font-family: Arial, sans-serif;
}

/* estilos para la pagina 1*/

.pag1{
  background:#8ba987 url(http://i.imgur.com/2owFXpH.jpg) no-repeat;
}

.pag1 .encabezado{
  text-align: center;
}

.pag1 .encabezado h1{
  margin: 0px;
}

/* estilos para la pagina 2*/

.pag2{
  background:#8ba987 url(http://i.imgur.com/jVmOGtl.png);
}

.pag2 .encabezado{
  text-align: center;
  color: aliceblue;
}

.pag2 .encabezado h1{
  margin: 0px;
}

/* Mi pequeño menu */

hr {
  background-color: darkgrey;
  margin:0px;
  padding:0px;
  width: 100%;
}

ul.menu {
  float: left;
  width: 100%;
  list-style: none;
  margin: 5px;
  padding: 0;
}

ul.menu li {
   float: left;
}

ul.menu li a {
  padding: .3em;
  display: block;
  text-decoration: none;
  color:black;
  background: rgba(244,244,244,.2);
  border: 1px inset darkgray;
}

/*cambio el color del texto en la pagina 2*/
.pag2 ul.menu li a{
  color:aliceblue;
}

/* Fin mi pequeño menu */

Ogramar · « **Respuesta #1 en:** 31 de Agosto 2016, 19:41 »

Buenas Hugo!

En el ejercicio 1 cumples perfectamente con lo que se pedía. Una cosa en la que me he fijado es que usas id para todo. No está mal, pero ten en cuenta que muchas veces no querrás usar id sino simplemente aplicar estilos directamente que afecten a todos los elementos de un tipo en una web. Por ejemplo imagina que quieres que todos los div sean igual (cosa que podrías haber hecho en este ejercicio, porque todos son iguales).

En lugar de #div1,#div2,#div3,#div4{ ... } podrías escribir simplemente div { ... } lo cual le aplica el mismo estilo a todos los div. La diferencia es que de la primera forma estás diciendo que le aplicas el estilo específicamente a cuatro div, y con la segunda que se lo aplicas a todos. Para practicar en los ejercicios cuando tengas todos los elementos iguales puedes usar esa forma de aplicar estilos.

También sería bueno intentar evitar repeticiones agrupando una regla en un nivel superior. Por ejemplo text-align:center; lo repites en varios sitios, pero parece que sería mejor ponerlo en un nivel superior y evitar tener que repetirlo.

Tienes una cosa extraña en <div id="div2"> <P>Cocinando</P><p>con</p><p>Hugo</p></div> ¿Por qué has escrito P mayúscula?

En el ejercicio 2 la verdad es que te has complicado un poco porque lo más sencillo era crear un html con su css para cada página, y no mezclar en un mismo archivo css los estilos para las dos páginas, pero para practicar te ha servido. Lo de aplicar class al body es poco habitual, normalmente no se hace porque normalmente no interesa diferenciar a ese nivel sino a niveles inferiores.

Salu2

hymsoft · « **Respuesta #2 en:** 05 de Septiembre 2016, 15:34 »

Hola Ogramar, buen dia!!!! medio quedado, porque por suerte, estamos teniendo mucho trabajo en el negocio.

En el ejercicio 1, utilizo los id para poder después cambiarle el color, podría haber utilizado nth-child para el mismo efecto pero no se si esta bien o mal que a mi realmente no me guste esa opción.
lo de <P></P> es un error de tipografia mio :-( y yo uso brackets para el armado del html y css, este programa me cierra solo la sentencia independientemente de lo que escriba, puedo poner <Ogramar> y me lo va a cerrar como </Ogramar>

En el ejercicio 2, pues si, me complique, pero como dices, era para ver si se podía jejejejeje

Saludos!!!!

Foros aprenderaprogramar.com
Didáctica y divulgación de la programación

Noticias: