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 18 de Abril 2015, 08:49
-
Enunciado:
Crea un documento HTML donde la ventana del navegador esté dividida en 6 partes, cada una con su borde. En cada división pon como color de fondo lo siguiente:
a) División 1: un color expresado con notación RGB.
b) División 2: un color expresado con notación RGBA.
c) División 3: un color expresado con notación hexadecimal.
d) División 3: un color expresado con notación HSL.
e) División 4: un color expresado con notación HSLA.
f) División 5: un color designado con un nombre.
En cada división incluye un texto con la notación y color empleado. Por ejemplo <<Notación RGB, color 218, 165, 32>>. Para comprobar si tus respuestas son correctas puedes consultar en los foros aprenderaprogramar.com.
Respuesta:
<!Doctype hmtl>
<html lang="es">
<head>
<title>tabla de colores</title>
<meta name="description" content="ejercicio de aprender a programar con colores">
<meta name="keywords" content="tabla colores rgb">
<meta charset="utf-8">
<link rel="stylesheet" href="css/background_color.css">
</head>
<body>
<header>
<h1>Creando divisiones de con background-color tabla</h1>
</header>
<div id="division1" class="cajas">
División 1: un color expresado con notación RGB
rgb(200,0,0)
</div>
<br>
<div id="division2" class="cajas">
2: un color expresado con notación RGBA.
rgba(0,100,50,0.5)
</div>
<br>
<div id="division3" class="cajas">
3: un color expresado con notación hexadecimal.
#F781D8
</div>
<br>
<div id="division4" class="cajas">
4: un color expresado con notación HSL.
hsl(250,10%,80%)
</div>
<br>
<div id="division5" class="cajas">
5: un color expresado con notación HSLA.
hsla(125,10%,80%,0.8)
</div>
<br>
<div id="division6" class="cajas">
6: un color designado con un nombre.
orange
</div>
</body>
</html>
css
.cajas{
text-align: center;
border: 5px solid black;
font-size: 30px;
}
#division1{background-color: rgb(200,0,0);}
#division2{background-color: rgba(0,100,50,0.5);}
#division3{background-color: #F781D8;}
#division4{background-color: hsl(250,10%,80%);}
#division5{background-color: hsla(125,10%,80%,0.8);}
#division6{background-color: orange;}
-
Hola, bien maquetado y bien el código. Además haces un buen uso para aplicar unos estilos comunes usando class y estilos específicos por id. Todo ok!!
Salu2