Foros aprenderaprogramar.com
Aprender a programar => Aprender a programar desde cero => Mensaje iniciado por: KOFFERO en 19 de Septiembre 2017, 08:09
-
Hola amigos aquí dejo el ejercicio CU00718B del curso pdf de HTML desde cero.
EJERCICIO
Crea una lista ordenada cuyos elementos sean Doctores, Ayudantes y Auxiliares. Dentro de Doctores define una lista no ordenada cuyos elementos sean: Juana Pérez, Alberto Márquez, Raúl Moreno. Dentro de Ayudantes define una lista no ordenada cuyos elementos sean: Noelia Suárez, Abel Rebollo. Dentro de Auxiliares crea una lista no ordenada cuyos elementos sean Silvia Estévez, Angela González y Cuarthemoc Adanez. Separa cada lista con un elemento hr de color azul, 10 pixeles de grosor y que ocupe el 50% del ancho disponible.
El código HTML:
<!DOCTYPE html>
<html>
<head>
<title>Ejercicio CU00718B - aprenderaprogramar.com</title>
<meta charset="UTF-8" />
</head>
<body>
<ol>
<li>Doctores</li>
<ul>
<li>Juana Pérez</li>
<li>Alberto Márquez</li>
<li>Raúl Moreno</li>
</ul>
<hr style="height: 10px; color: blue; background-color: blue; width: 50%;" />
<li>Ayudantes</li>
<ul>
<li>Noelia Suárez</li>
<li>Abel Rebollo</li>
</ul>
<hr style="height: 10px; color: blue; background-color: blue; width: 50%;" />
<li>Auxiliares</li>
<ul>
<li>Silvia Estévez</li>
<li>Angela González</li>
<li>Cuarthemoc Adanez</li>
</ul>
</ol>
</body>
</html>
EJERCICIO
El siguiente código define una lista no ordenada y hace uso de atributos deprecated para la etiqueta li. Guarda el código como archivo html con un nombre como ejemplo1dep.html. Sustituye estos atributos por CSS y guarda el archivo como ejemplo1css.html. Compara la visualización de ambos documentos HTML en tu navegador.
El segundo código:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Ejemplo del uso de listas - aprenderaprogramar.com</title>
</head>
<body>
<ul>
<li style="list-style-type: circle">Esto es un tipo de punto.</li>
<li style="list-style-type: square">Este es otro.</li>
<li style="list-style-type: disc">Y este es otro diferente.</li>
</ul>
</body>
</html>
Un saludo. :D
-
Uno correción en el primer código, me falto agregar un margin-left: 0;, para que anule el margen en la parte izquierda, y asi la linea se queda junto al borde izquierdo y no centrado.
Dejo el código:
<!DOCTYPE html>
<html>
<head>
<title>Ejercicio CU00718B - aprenderaprogramar.com</title>
<meta charset="UTF-8" />
</head>
<body>
<ol>
<li>Doctores</li>
<ul>
<li>Juana Pérez</li>
<li>Alberto Márquez</li>
<li>Raúl Moreno</li>
</ul>
<hr style="height: 10px; color: blue; background-color: blue; width: 50%; margin-left: 0;" />
<li>Ayudantes</li>
<ul>
<li>Noelia Suárez</li>
<li>Abel Rebollo</li>
</ul>
<hr style="height: 10px; color: blue; background-color: blue; width: 50%; margin-left: 0;" />
<li>Auxiliares</li>
<ul>
<li>Silvia Estévez</li>
<li>Angela González</li>
<li>Cuarthemoc Adanez</li>
</ul>
</ol>
</body>
</html>
-
Hola Jorge,,, ambos ejercicios están correctos; te faltó indicar si habías comparado la visualización de la visualización en el navegador como pedía el último ejercicio.
Saludos
-
Dices por el código que tenia los atributos no recomendados, si yo los supe comparar, y da el mismo resultado en la vizualización en el navegador. Pero no pensé que tenia que poner ese código tambien el post.
Un saludo. :D