Autor Tema: Colores CSS y HTML notación nombre, hexadecimal, rgb Ejercicio resuelto CU01019D  (Leído 3718 veces)

mariobeitia

  • Sin experiencia
  • *
  • APR2.COM
  • Mensajes: 12
    • Ver Perfil
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.

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


Código: [Seleccionar]
<!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.
« Última modificación: 15 de Agosto 2015, 18:38 por Alex Rodríguez »

Alex Rodríguez

  • Moderador Global
  • Experto
  • *******
  • Mensajes: 2050
    • Ver Perfil
Re:Ejercicio CU01019D Colores CSS
« Respuesta #1 en: 15 de Agosto 2015, 18:38 »
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

mariobeitia

  • Sin experiencia
  • *
  • APR2.COM
  • Mensajes: 12
    • Ver Perfil
Muchas gracias! Interpreté mál la solicitud.

Gracias por la corrección.

Saludos

keivin53

  • Sin experiencia
  • *
  • APR2.COM
  • Mensajes: 1
    • Ver Perfil
Yo apliqué este código:

HTML

Código: [Seleccionar]
<!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:

Código: [Seleccionar]
/*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;}
« Última modificación: 10 de Mayo 2016, 10:50 por Alex Rodríguez »

 

Sobre la educación, sólo puedo decir que es el tema más importante en el que nosotros, como pueblo, debemos involucrarnos.

Abraham Lincoln (1808-1865) Presidente estadounidense.

aprenderaprogramar.com: Desde 2006 comprometidos con la didáctica y divulgación de la programación

Preguntas y respuestas

¿Cómo establecer o cambiar la imagen asociada (avatar) de usuario?
  1. Inicia sesión con tu nombre de usuario y contraseña.
  2. Pulsa en perfil --> perfil del foro
  3. Elige la imagen personalizada que quieras usar. Puedes escogerla de una galería de imágenes o subirla desde tu ordenador.
  4. En la parte final de la página pulsa el botón "cambiar perfil".