Autor Tema: HTML. Listas no ordenada(ul) y ordenada(ol) tipos de viñetas o marcas CU00718B (Leído 3871 veces)

KOFFERO · « **en:** 19 de Septiembre 2017, 08:09 »

Hola amigos aquí dejo el ejercicio CU00718B del curso pdf de HTML desde cero.

Citar

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:

Código: [Seleccionar]

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

Citar

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:

Código: [Seleccionar]

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

KOFFERO · « **Respuesta #1 en:** 19 de Septiembre 2017, 19:31 »

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:

Código: [Seleccionar]

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

Alex Rodríguez · « **Respuesta #2 en:** 26 de Octubre 2017, 18:57 »

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

KOFFERO · « **Respuesta #3 en:** 28 de Octubre 2017, 06:25 »

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.

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

Noticias:

Autor Tema: HTML. Listas no ordenada(ul) y ordenada(ol) tipos de viñetas o marcas CU00718B (Leído 3871 veces)

KOFFERO

HTML. Listas no ordenada(ul) y ordenada(ol) tipos de viñetas o marcas CU00718B

KOFFERO

Re:HTML. Listas no ordenada(ul) y ordenada(ol) y definiciones (CU00718B)

Alex Rodríguez

Re:HTML. Listas no ordenada(ul) y ordenada(ol) tipos de viñetas o marcas CU00718B

KOFFERO

Re:HTML. Listas no ordenada(ul) y ordenada(ol) tipos de viñetas o marcas CU00718B

Preguntas y respuestas