Autor Tema: Ejemplo listas ordenadas y no ordenadas HTML Ejercicio CU00718B del tutorial  (Leído 3105 veces)

Dan_SB

  • Avanzado
  • ****
  • Mensajes: 273
  • *<DanielsCK>*
    • Ver Perfil
Buenas noches

Vengo a resolver el siguiente ejercicio del capitulo 18° del curso, html desde 0, con el siguiente enunciado:

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.

Codigo:

Código: [Seleccionar]
>
<head>
<meta charset="utf-8">
<title>Listas Ordenadas</title>
</head>
<body style = "background-color: red;">
<ol style = "color: white;"><h2 style = "font-size: 24; color: white;">Doctores</h2>
    <li style = "list-style-type: circle;">Juana Perez</li>
<li style = "list-style-type: circle;">Alberto Marquez</li>
<li style = "list-style-type: circle;"> Moreno</li>
</ol>
<hr style = "height: 10px; color: blue; width: 50%;"></hr>
<ol style = "color: white;"><h2 style = "font-size: 24; color: white;">Ayudantes</h2>
    <li style = "list-style-type: disc;">Noelia Suárez</li>
<li style = "list-style-type: disc;">Abel Rebollo</li>
</ol>
<hr style = "height: 10px; color: blue; width: 50%;"></hr>
<ol style = "color: white;"><h2 style = "font-size: 24; color: white;">Auxiliares</h2>
    <li style = "list-style-type: square;">Silvia Estevez</li>
<li style = "list-style-type: square;">Angela Gonzales</li>
<li style = "list-style-type: square;">Cuarthemoc Adamez</li>
</ol>
</body>
</html>

Asi se ve:



Saludos!!
« Última modificación: 07 de Mayo 2015, 21:46 por Alex Rodríguez »
"Luchar por tus sueños y cumplirlos... eso es vivir.."

Alex Rodríguez

  • Moderador Global
  • Experto
  • *******
  • Mensajes: 2050
    • Ver Perfil
Re:Ejercicio (CU00718B), Listas ordenas y no ordenadas
« Respuesta #1 en: 04 de Mayo 2015, 08:56 »
Saludos Dan

Dentro de una lista ol sólo debes poner elementos li, el título para la lista debe estar fuera de la lista:

Ejemplo no es correcto:

<ol style = "color: white;"><h2 style = "font-size: 24; color: white;">Doctores</h2>
    <li style = "list-style-type: circle;">Juana Perez</li>
   <li style = "list-style-type: circle;">Alberto Marquez</li>
   <li style = "list-style-type: circle;"> Moreno</li>
</ol>


Forma correcta:

<h2 style = "font-size: 24; color: white;">Doctores</h2>
<ol style = "color: white;">
    <li style = "list-style-type: circle;">Juana Perez</li>
   <li style = "list-style-type: circle;">Alberto Marquez</li>
   <li style = "list-style-type: circle;"> Moreno</li>
</ol>

Las etiquetas hr no se cierran con /hr

No es correcto:

<hr style = "height: 10px; color: blue; width: 50%;"></hr>

Forma correcta:

<hr style = "height: 10px; color: blue; width: 50%;"/>


¡Corrige lo que tienes mal para que te sirva para memorizar y evitar el error las próximas veces!

Saludos

Dan_SB

  • Avanzado
  • ****
  • Mensajes: 273
  • *<DanielsCK>*
    • Ver Perfil
Lo siento alex, es que el note++ me cierra automaticamente el hr :/

Gracias por tus correcciones, saludos
"Luchar por tus sueños y cumplirlos... eso es vivir.."

 

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