Foros aprenderaprogramar.com
Aprender a programar => Aprender a programar desde cero => Mensaje iniciado por: EnigmaticNerd en 17 de Agosto 2017, 21:26
-
Buenas tardes. Este es el enunciado del ejercicio CU01019D del tutorial de programación web con CSS como si estuviera en primero:
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.
(http://i.imgur.com/BVyOQ5z.png)
Acá el código:
<!DOCTYPE html>
<html lang="es">
<head>
<title>
CU01019D
</title>
<meta charset="utf-8"/>
<style type="text/css">
table, tr, th, td{border: black 1px solid; text-align:center;}
table tr:first-child{background-color:#C9C9C9;}
table tr:nth-child(2){background-color:#696969;}
table tr:nth-child(3){background-color:#CD5C5C;}
table tr:nth-child(4){background-color:#B22222;}
table tr:nth-child(5){background-color:#1E90FF;}
table tr:last-child{background-color:#4B0082;}
</style>
</head>
<body>
<table>
<tr>
<th>Nombre</th>
<th>Hexadecimal</th>
<th>RGB</th>
</tr>
<tr>
<td>DimGray</td>
<td>696969</td>
<td>105,105,105</td>
</tr>
<tr>
<td>IndianRed</td>
<td>CD5C5C</td>
<td>205,92,92</td>
</tr>
<tr>
<td>FireBrick</td>
<td>B22222</td>
<td>178,34,34</td>
</tr>
<tr>
<td>DodgerBlue</td>
<td>1E90FF</td>
<td>30,144,255</td>
</tr>
<tr>
<td>Indigo</td>
<td>4B0082</td>
<td>75,0,130</td>
</tr>
</table>
</body>
</html>
Si tienen correcciones o sugerencias, se las agradeceré enormemente. Gracias.
-
Hola EnigmaticNerd, la idea del ejercicio es usar las tres notaciones de colores, y comprobar que las tres se vean igual (no usar una única notación como tú has hecho). Deberías corregir el ejercicio teniendo esto en cuenta.
En https://www.aprenderaprogramar.com/foros/index.php?topic=3715.0 puede verse un ejemplo.
Por favor para poner el título de los temas guíate por lo que se dice en https://www.aprenderaprogramar.com/foros/index.php?topic=1460.0
Es preferible empezar poniendo una descripción y palabras clave y terminar con el código del ejercicio.
Saludos
-
Corrección del ejercicio CU01019D
Acá el código html:
<!DOCTYPE html>
<html lang="es">
<head>
<title>
CU01019D
</title>
<meta name="author" content="EnigmaticNerd"/>
<meta name="description" content="Colores HTML y CSS - aprenderaprogramar.com"/>
<meta name="keywords" content="rgb, hexadecimal, CSS, cursos, ejemplos, aprenderaprogramar.com, CU01019D"/>
<meta charset="utf-8"/>
<link rel="stylesheet" type="text/css" href="estilos/CU01019.css"/>
</head>
<body>
<table>
<tr>
<th>Nombre</th>
<th>Hexadecimal</th>
<th>RGB</th>
</tr>
<tr>
<td>DimGray</td>
<td>696969</td>
<td>105,105,105</td>
</tr>
<tr>
<td>IndianRed</td>
<td>CD5C5C</td>
<td>205,92,92</td>
</tr>
<tr>
<td>FireBrick</td>
<td>B22222</td>
<td>178,34,34</td>
</tr>
<tr>
<td>DodgerBlue</td>
<td>1E90FF</td>
<td>30,144,255</td>
</tr>
<tr>
<td>Indigo</td>
<td>4B0082</td>
<td>75,0,130</td>
</tr>
</table>
</body>
</html>
Acá los estilos css:
/*Estilos del ejercicio CU1019D*/
/*Estilos para la tabla en general*/
tr,th,td{padding:20px; width:200px;}
table, tr, th, td{border: black 1px solid; text-align:center; margin: 0 auto;}
/*Color de fondo para la primera fila de la tabla*/
table tr:first-child{background-color:#C9C9C9;}
/*Color DimGray en diversas notaciones para la segunda fila de la tabla*/
table tr:nth-child(2) td:first-child{background-color:dimgray;}
table tr:nth-child(2) td:nth-child(even){background-color:#696969;}
table tr:nth-child(2) td:last-child{background-color:rgb(105,105,105);}
/*Color IndianRed en diversas notaciones para la tercera fila de la tabla*/
table tr:nth-child(3) td:first-child{background-color:indianred;}
table tr:nth-child(3) td:nth-child(even){background-color:#CD5C5C;}
table tr:nth-child(3) td:last-child{background-color:rgb(205,92,92);}
/*Color FireBrick en diversas notaciones para la cuarta fila de la tabla*/
table tr:nth-child(4) td:first-child{background-color:firebrick;}
table tr:nth-child(4) td:nth-child(even){background-color:#B22222;}
table tr:nth-child(4) td:last-child{background-color:rgb(178,34,34);}
/*Color DodgerBlue en diversas notaciones para quinta fila de la tabla*/
table tr:nth-child(5) td:first-child{background-color:dodgerblue;}
table tr:nth-child(5) td:nth-child(even){background-color:#1E90FF;}
table tr:nth-child(5) td:last-child{background-color:rgb(30,144,255);}
/*Color Indigo en diversas notaciones para la última fila de la tabla*/
table tr:last-child td:first-child{background-color:indigo;}
table tr:last-child td:nth-child(even){background-color:#4B0082;}
table tr:last-child td:last-child{background-color:rgb(75,0,130);}
Gracias por la corrección y aclaración.