Autor Tema: Cómo comprobar si una web contiene errores CSS usando W3C validator CU01023D#  (Leído 2029 veces)

EnigmaticNerd

  • Principiante
  • **
  • Mensajes: 65
    • Ver Perfil
Buenas noches. Este es el enunciado del ejercicio CU01023D del tutorial de programación web con CSS desde cero:

Citar
Crea un documento HTML que conste de los siguientes elementos: un título h1 con el texto “Aprendizaje de la programación”. Una división div con id menú que contenga: un título h2 con el texto “Menú” y una lista de elementos ordenados (ol) con los siguientes items: Programación básica, Programación intermedia y Programación avanzada. Finalmente, una división div con id footer con el texto “Curso aprenderaprogramar.com”. Establece diferentes valores de las propiedades color, background-color y font-size para:

a) Los elementos h1

b) Los elementos h2

c) Los elementos ol y partes internas a este (elementos li de listas).

d) El elemento con id footer.

A continuación utiliza el W3C validator y comprueba si no te indica ningún error, o qué errores o warnings te indica y trata de identificar el por qué de ellos y corregirlos.

Acá la aprobación de la página por parte de la W3C validator:



Acá el acceso a la página en el servidor: http://enigmaticnerd.byethost13.com/Ejercicio%20CU01023D%20Documentaci%C3%B3n%20especificaci%C3%B3n%20oficial%20CSS,%20w3c%20validator.html

Acá el código:
Código: [Seleccionar]
<!DOCTYPE html>
<html lang="es">
    <head>
        <title>
            CU01023
        </title>
        <meta charset="utf-8"/>
        <link rel="stylesheet" type="text/css" href="estilosCU01023D.css"/>
    </head>
    <body>
        <h1>Aprendizaje de la programación</h1>
        <div id="menu">
            <h2>Menú</h2>
            <ol>
                <li>Programación básica</li>
                <li>Programación intermedia</li>
                <li>Programación avanzada</li>
            </ol>
        </div>

        <div id="footer">
            <p>Curso aprenderaprogramar.com</p>
        </div>
    </body>
</html>

Estilos CSS:
Código: [Seleccionar]
/*Estilos para el título principal*/
h1{color:white;
    background-color:rgba(0, 0, 0, 0.8);
    font-size: 20px;
    text-align: center;
}

/*Estilos para el título secundario*/
h2{color:silver;
    background-color:black;
    font-size: 20px;
    text-align: center;
}

/*Estilos para la etiqueta ol*/
ol{color:blue;
    background-color: silver;
    text-align: center;
    font-size:20px;
}

/*Estilos para los elementos li*/
ol li:first-child{background-color:beige;
      color:blueviolet;
}

ol li:nth-child(2){background-color:bisque;
      color:crimson;
}
           
ol li:last-child{background-color:salmon;
    color:forestgreen;
}

/*Estilos para el id footer*/
#footer{background-color: aqua;
    color:chocolate;
}

Si tienen correcciones o sugerencias, se las agradeceré enormemente. Gracias.
« Última modificación: 27 de Enero 2018, 21:32 por Alex Rodríguez »

Alex Rodríguez

  • Moderador Global
  • Experto
  • *******
  • Mensajes: 2050
    • Ver Perfil
Re:Cómo comprobar si una web contiene errores CSS usando W3C validator CU01023D
« Respuesta #1 en: 24 de Septiembre 2017, 18:20 »
Hola EnigmaticNerd, ejercicio correcto

Recuerda que debes intentar agrupar las propiedades CSS comunes para evitar repeticiones

Intenta poner título a los temas en los foros siguiendo las indicaciones que se dan en https://www.aprenderaprogramar.com/foros/index.php?topic=1460.0

Saludos

 

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