Foros aprenderaprogramar.com
Aprender a programar => C, C++, C#, Java, Visual Basic, HTML, PHP, CSS, Javascript, Ajax, Joomla, MySql y más => Mensaje iniciado por: jimmorrison en 21 de Abril 2015, 03:49
-
Enunciado ejercicio CU01030D del tutorial de fundamentos de programación web con CSS usando Notepad++ como editor:
Crea un documento HTML con 4 elementos div de 250 píxeles de ancho y 250 píxeles de alto, todos ellos con un margin de 30 píxeles en todas direcciones y un padding de 30 píxeles en todas direcciones. En cada uno de los elementos div coloca una imagen de fondo diferente y un background-color diferente. Para comprobar si tus respuestas son correctas puedes consultar en los foros aprenderaprogramar.com.
Respuesta:
html
<html lang="es">
<head>
<title>border</title>
<meta name="description" content="ejercicio de aprender a programar
con border">
<meta name="keywords" content="border programar css html">
<meta charset="utf-8">
<link rel="stylesheet" href="css/ejercicio_background_image.css">
</head>
<body>
<h1>Portal web aprenderaprogramar.com</h1>
<div id="caja_1" class="cajas">
Caja 1
</div>
<div id="caja_2" class="cajas">
Caja 2
</div>
<div id="caja_3" class="cajas">
Caja 3
</div>
<div id="caja_4" class="cajas">
Caja 4
</div>
<footer id="pie_de_pagina">
Hecho por carlos enrique gil chong
</footer>
</body>
</html>
css
*{
margin: 0px;
padding: 0px;
}
*{font-family: arial;
text-align: center;}
body{
background-color: yellow;}
.cajas{
width: 250px;
height: 250px;
margin: 30px;
padding: 30px;
color: white;
}
#caja_1{
background-color: purple;
background-image: url(https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRIwlR_9cgOX0ZYaPow6HUmnSYBZsaMYFxdrUelCoMcjjFHE7eD);
}
#caja_2{
background-color: silver;
background-image: url(http://k39.kn3.net/taringa/C/C/C/3/9/D/agente867/745.jpg);
}
#caja_3{
background-color: orange;
background-image: url(https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSBHmlrkbC6StIm947mrAwfnqmN0zbg55e3KuwNm3FRx0H_PB02Hw);
}
#caja_4{
background-color: red;
background-image: url(https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcRW7g3sM7R8X7cURFla1HBiGnAX7lqCXiiOsDPWyRQSpKvCBpD9jw)
}
-
EJERCICIO 2
Crea dos páginas web cumpliendo estos requisitos:
a) Una página web debe tener una única imagen de gran tamaño (por ejemplo 1024x768 píxeles) como imagen de fondo, sin repetición de la misma.
b) Una página web debe tener una imagen de pequeño tamaño (por ejemplo 135x135 píxeles) que mediante el uso de la propiedad repeat se expanda como fondo de la página web creando un efecto tapiz.
html
<title>border</title>
<meta name="description" content="ejercicio de aprender a programar
con border">
<meta name="keywords" content="border programar css html">
<meta charset="utf-8">
<link rel="stylesheet" href="css/ejercicio2_1_background_image.css">
</head>
<body>
<h1>Portal web aprenderaprogramar.com</h1>
<div id="caja_1" class="cajas">
Caja 1
</div>
<footer id="pie_de_pagina">
Hecho por carlos enrique gil chong
</footer>
</body>
</html>
css
*{
margin: 0px;
padding: 0px;
}
*{
font-family: arial;
text-align: center;
}
body{
background-image: url(http://www.marketingdirecto.com/wp-content/uploads/2012/09/mundo2.gif);
}
pregunta:
¿estas propiedades sirven con src = img()?
ejemplo
html
src img=(ruta);
css
img{
width: 136px;
height: 136px;
background: repeat;
}
mas o menos a eso me refiero
repeat (repetición horizontal y vertical)
repeat-x (repetición sólo horizontal)
repeat-y (repetición sólo vertical)
no-repeat (la imagen se muestra sólo una vez, sin repeticiones)
-
Hola, ejercicio perfecto. Tener en cuenta que el background-color no se verá al estar delante la imagen, excepto si la imagen no se pudiera cargar, en ese caso sí se vería el color de fondo.
Salu2
-
Hola veo que has puesto dos reglas css *{...} pero lo correcto sería poner una sola y dentro de esa regla poner todas las propiedades que quieras.
El código que has enviado corresponde al apartado b), te faltaría el apartado a).
Sobre la pregunta, a los elementos img le puedes aplicar las mismas reglas que al resto de elementos pero esto no se suele hacer porque a una imagen no se le suele colocar otra imagen de fondo, aunque podrías hacerlo. Puedes hacer pruebas y ver los resultados.
Salu2
-
yo pense que para eso ero fue el ejercicio en caso que la imagen no se pudiera ver con el background color podria tener un color de fondo indicando falla al cargar imagen o error.
-
el ejercicio A lo puse en otro apartado con el mismo nombre
-
ok, no me había dado cuenta
Salu2
-
una pregunta maestros que tengo desde que inicie a estudiar html y css
Si busco una imagen en el buscador (x) por ejemplo imagen.jpg (2206x1519) si quiero que aparesca la imagen completa dentro de una caja por ejemplo de 600 x 600 o viceversa si la imagen es pequeña y quiero colocarla en una caja mas grande.
nota: un compañero me dijo que se distorsiona las imagenes
un ejemplo
<!Doctype hmtl>
<html lang="es">
<head>
<title>border</title>
<meta name="description" content="ejercicio de aprender a programar con
border">
<meta name="keywords" content="border programar css html">
<meta charset="utf-8">
<link rel="stylesheet" href="css/ejercicio_propiedades_background.css">
</head>
<body>
<div id="caja_1" class="cajas">
caja
</div>
<div id="caja_2" class="cajas">
caja
</div>
<div id="caja_3" class="cajas">
caja
</div>
<div id="caja_4" class="cajas">
caja
</div>
<footer id="pie_de_pagina">
Hecho por carlos enrique gil chong
</footer>
</body>
</html>
*{
marigin: 0px;
padding: 0px;
}
body{
text-align: center;
background-color: silver;}
.cajas{
width: 400px;
height: 400px;
margin: 40px;
padding: 40px;
border: solid white 5px;
}
#caja_1{
background-image: url(http://coyotechronicle.net/wp-
content/uploads/2014/05/real-madrid-logos-
0424182101.jpg);}
#caja_2{}
#caja_3{}
#caja_4{}
-
encontre la respuesta en el siguiente modulo disculpen
#caja_1{
background-image: url(http://coyotechronicle.net/wp-content/uploads/2014/05/real-madrid-logos-0424182101.jpg);
background-size: 400px 400px;
background-repeat: no-repeat;
}
-
Ok, ahí diste con la respuesta ;D