Foros aprenderaprogramar.com
Aprender a programar => Aprender a programar desde cero => Mensaje iniciado por: mariobeitia en 14 de Agosto 2015, 23:10
-
En la siguiente tabla están mal ordenados los códigos de colores. Ordénalos de forma que en cada fila estén los códigos equivalentes de forma ordenada y crea un documento HTML donde se muestre un cuadrado donde aparezca como texto el color con la notación empleada, y como color de fondo el color. En total deberás tener 15 cuadrados, cada uno con su texto y su color, correspondientes a las 15 celdas de la tabla.
Nombre Hexadecimal RGB
DimGray 1E90FF 178,34,34
IndianRed 696969 205,92,92
FireBrick CD5C5C 30,144,255
DodgerBlue B22222 75,0,130
Indigo 4B0082 105,105,105
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Prueba de colores - aprenderaprogramar.com</title>
<meta charset="utf-8">
<meta name="description" content="Portal web aprenderaprogramar.com">
<meta name=="keywords" content="aprender, programar, cursos, libros">
<style type="text/css">
#dodgerblue{background-color:#1E90FF; height:90px; width:90px;}
#dimgray{background-color:#696969; height:90px; width:90px;}
#indianred{background-color:#CD5C5C; height:90px; width:90px;}
#firebrick{background-color:#B22222; height:90px; width:90px;}
#indigo{background-color:#4B0082; height:90px; width:90px;}
p{color: white}
</style>
</head>
<!-- Contenido de la página-->
<body>
<div>
<div id="dimgray">
<p> DimGray </p>
</div>
<br/>
<div id="indianred">
<p> IndianRed </p>
</div>
<br/>
<div id="firebrick">
<p> FireBrick </p>
</div>
<br/>
<div id="dodgerblue">
<p> DodgerBlue </p>
</div>
<br/>
<div id="indigo">
<p> Indigo </p>
</div>
</div>
</body>
</html>
Todavía no hemos visto height y width pero lei un poco en internet y me parecio la manera más lógica de hacer los cuadrados.
Gracias por mirar y corregir.
-
Hola Mario, haz resuelto correctamente una parte del ejercicio, ya que has creado 5 cuadrados. El ejercicio pide que se creen 15 cuadrados usando las tres notaciones de colores disponibles para cada color. Tú has usado únicamente la notación hexadecimal, te faltaría usar la notación de nombre y la notación rgb.
Saludos
-
Muchas gracias! Interpreté mál la solicitud.
Gracias por la corrección.
Saludos
-
Yo apliqué este código:
HTML
<!DOCTYPE html>
<html>
<head>
<title>Table de colores Hexadecimal, RGB</title>
<link rel="stylesheet" type="text/css" href="Ejercicio13-tabla.css">
</head>
<body>
<!-- Contenido de la página-->
<table border="1px">
<th>Nombre</th>
<th>Hexadecimal</th>
<th>RGB</th>
</tr>
<tr>
<td id="td1">DimGray</td>
<td id="td1">#696969</td>
<td id="td1">105,105,105</td>
</tr>
<tr>
<td id="td2">IndianRed</td>
<td id="td2">#CD5C5C</td>
<td id="td2">205,92,92</td>
</tr>
<tr>
<td id="td3">FireBrick</td>
<td id="td3">#B22222</td>
<td id="td3">178,34,34</td>
</tr>
<tr>
<td id="td4">DodgerBlue</td>
<td id="td4">#1E90FF</td>
<td id="td4">30,144,255</td>
</tr>
<tr>
<td id="td5">Indigo</td>
<td id="td5">#4B0082</td>
<td id="td5">75,0,130</td>
</tr>
</table>
</body>
</html>
CSS:
/*tabla de colores*/
body {font-family: Arial, sans-serif;}
table {
border: gray 6px solid;}
th{background-color: gray;}
#td1{background-color: #696969; color: white;}
#td2{background-color: #CD5C5C; color: white;}
#td3{background-color: #B22222; color: white;}
#td4{background-color: #1E90FF; color: white;}
#td5{background-color: #4B0082; color: white;}