Autor Tema: HTML y CSS equivalencia entre colores en nombre, hexadecimal y rgb CU01019D (Leído 2693 veces)

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:

Citar

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.

Acá el código:

Código: [Seleccionar]

<!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.

Alex Rodríguez · « **Respuesta #1 en:** 03 de Septiembre 2017, 11:46 »

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

EnigmaticNerd · « **Respuesta #2 en:** 03 de Septiembre 2017, 15:11 »

Corrección del ejercicio CU01019D

Acá el código html:

Código: [Seleccionar]

<!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:

Código: [Seleccionar]

/*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.

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

Noticias: