Autor Tema: Ejercicios HTML CU00716B separadores o elementos hr establecer color grosor css (Leído 6030 veces)

SITOAPRENDIZ · « **en:** 19 de Febrero 2015, 11:26 »

Realizados los ejercicios de dicho módulo, referente al primero(para definir el atributo size.........

Sabiendo que para definir mediante CSS un grosor de 8px y color negro se puede usar la sintaxis style="height:8px; color: black; background-color: black;" aplicada a la etiqueta <hr>, modificar el siguiente código para eliminar las etiquetas deprecated y sustituirlas por CSS), me surge la siguiente duda:

DUDA: Omitiendo la parte del código color: black;, salen las dos lineas perfectamente con su color negro. ¿es entonces prescindible esta parte del código o por el contrario no debe omitirse por ciertas razones? Aqui dejo mi código para que revisen si está correcto:

Código: [Seleccionar]

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<meta charset="utf-8">
<html>
   <head>
      <title>Ejemplo del uso de separadores</title>
   </head>
   <body>
      <p>A continuación insertamos un separador</p>
      <hr style="height:8px; color: black; background-color: black;" />
      <p>A continuación seguimos escribiendo debajo del separador</p>
      <hr style="height:2px; color: black; background-color: black;" />
   </body>
</html>

Y referente al segundo ejercicio de ejemplo(A continuación vamos a generar........75% de ancho:

<hr width="75%" color="black" />sería......deprecated, <hr style="color: black; background-color: black; width: 75%;" />, sería la sintaxis usando CSS. Escribe el código y comprueba los resultados, que serán similares a esto..., con la sintaxis deprecated me sale la linea con el color negro, pero con la sintaxis CSS la linea sale sin color. Y he repetido el código dos veces, una escrito por mí y otra copiado y pegado del ejemplo el módulo. Aquí les dejo el código:

Código: [Seleccionar]

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<meta charset="utf-8">
<html>
   <head>
      <title>Ejemplo del uso de separadores</title>
   </head>
   <body>
      <p>Separador hecho con sintaxis deprecated</p>
      <hr width="75%" color="black" />
      <p>Próximo separador hecho con sintaxis CSS</p>
      <hr style="color: black; background-color: black; width:75%;" />
      <hr style="color: black; background-color: black; width:75%;" />
   </body>
</html>

DUDA: ¿a que se debe que con deprecated salga linea negra y con CSS no salga negra?

Gracias, espero respuesta para despejar estas dudas.

Saludos.

Mastermind · « **Respuesta #1 en:** 19 de Febrero 2015, 21:52 »

Hola sito

Citar

DUDA: Omitiendo la parte del código color: black;, salen las dos lineas perfectamente con su color negro. ¿es entonces prescindible esta parte del código o por el contrario no debe omitirse por ciertas razones?

El color por defecto es negro, por tanto podrías omitirlo, pero para ir sobre seguro, ya que cuando el código es complejo podría haber efectos derivados de otros elementos, por eso si quieres asegurarte de que es negro lo escribirías. Es decir, escríbelo para asegurarte.

Citar

con la sintaxis CSS la linea sale sin color. DUDA: ¿a que se debe que con deprecated salga linea negra y con CSS no salga negra?

En realidad no es que salga sin color, sino que sale con un grosor muy fino (1 px), por eso parece que no tiene color. Para percibir bien el color tendrías que darle un valor de height por ejemplo: <hr style="color: black; background-color: black; width:75%; height:10px;" />

Saludos!!

SITOAPRENDIZ · « **Respuesta #2 en:** 20 de Febrero 2015, 11:16 »

Muchas gracias por tu atención y tus claras respuestas Mastermint. Siguiendo con el mismo módulo hay un tres dudas que me asaltan en estos momentos.

DUDA 1: ¿Tiene importancia en el código, el respetar los espacios?(ejemplo:background-color: red o background-color:red.

DUDA 2: ¿Que diferencia existe entonces entre la altura height y el grosorsize o width?. En una fotografía u otras formas tiene sentido, pero en una linea, me da la sensación de no tener diferencia alguna ya que la altura de la linea, hace de grosor.

DUDA 3: En el Ejemplo2 del mismo módulo CU00716B: A modo de ejercicio, reescribe.........y compara los resultados de visualizar ambas formas de escritura en tu navegador. ¿Por que en el ejemplo2 con sintaxis CSS, la línea no me sale a la derecha como la anterior?. Aquí os dejo el código:

Código: [Seleccionar]

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<meta charset="utf-8">
<html>
   <head>
      <title>Reescribir código obsoleto usando la sintaxis CSS</title>
   </head>
   <body>
      <p>EJEMPLO1: Franja de grosor 5 píxeles, de un ancho del 50% y alineado al centro. Sintaxis deprecated.</p>
      <hr size="5px" width="50%" align="center" color="red" />
      <p>EJEMPLO1: Mismo ejercicio, pero a continuación con sintaxis CSS</p>
      <hr style="height: 5px; width: 50%; text-align: center; background-color: red; color:red;" />
      <p>EJEMPLO2: Franja de grosor 2 píxeles, de un ancho del 80%, sin sombra y alineada a la derecha. Sintaxis deprecated.</p>
      <hr size="2px" width="80%" noshade="noshade" align="right" />
      <p>EJEMPLO2: Mismo ejercicio, pero a continuación con sintaxis CSS</p>
      <hr style="height: 2px; width: 80%; text-align: right;" />
   </body>
</html>

.

Gracias.

Alex Rodríguez · « **Respuesta #3 en:** 20 de Febrero 2015, 22:09 »

Hola te respondo

DUDA 1: ¿Tiene importancia en el código, el respetar los espacios?

No, no tiene importancia.

DUDA 2: ¿Que diferencia existe entonces entre la altura height y el grosor size o width?

Tal y como tú mismo has dicho, la altura hace de grosor, viene siendo lo mismo.

DUDA 3: ¿Por que en el ejemplo2 con sintaxis CSS, la línea no me sale a la derecha como la anterior?

<hr style="height: 2px; width: 80%; text-align: right;" />

Aquí text-align no te sirve para alinear porque text-align sólo aplica a texto (y quizás a otros elementos, pero esto deberías estudiarlo aparte como estudio de CSS). Por tanto ahí text-align no está haciendo nada (lo puedes quitar). Lo que es el alineado debes estudiarlo aparte como CSS.

Saludos

SITOAPRENDIZ · « **Respuesta #4 en:** 22 de Febrero 2015, 18:46 »

Buenas tardes Alex Rodriguez. A tu respuesta sobre el Ejemplo2 de mi pregunta ¿Porque en el Ejemplo2 con sintaxis CSS, la linea no me sale a la derecha, como la anterior?, no la comprendo.
Tu respuesta fue: Aqui text-align no te sirve para alinear porque text-align solo se aplica a texto.....text-align no está haciendo nada......
Entonces, ¿porque text-align si funciona en el Ejemplo1, cuando el codigo centra perfectamente la linea roja con el mismo código en CSS?
Intento, en cada módulo, tener los conceptos de los códigos aclarados antes de pasar al siguiente.
Aqui te vuelvo a dejar el código para ayudarte a entenderme.

Código: [Seleccionar]

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<meta charset="utf-8">
<html>
   <head>
      <title>Reescribir código obsoleto usando la sintaxis CSS</title>
   </head>
   <body>
      <p>EJEMPLO1: Franja de grosor 5 píxeles, de un ancho del 50% y alineado al centro. Sintaxis deprecated.</p>
      <hr size="5px" width="50%" align="center" color="red" />
      <p>EJEMPLO1: Mismo ejercicio, pero a continuación con sintaxis CSS</p>
      <hr style="height: 5px; width: 50%; text-align: center; background-color: red; color:red;" />
      <p>EJEMPLO2: Franja de grosor 2 píxeles, de un ancho del 80%, sin sombra y alineada a la derecha. Sintaxis deprecated.</p>
      <hr size="2px" width="80%" noshade="noshade" align="right" />
      <p>EJEMPLO2: Mismo ejercicio, pero a continuación con sintaxis CSS</p>
      <hr style="height: 2px; width: 80%; text-align: right;" />
   </body>
</html>

Saludos.

Alex Rodríguez · « **Respuesta #5 en:** 22 de Febrero 2015, 22:10 »

Hola, para aclarar el comportamiento es el siguiente:

a) Si estableces un width para un hr, tanto con sintaxis obsoleta como con css, la línea se centra automáticamente. Da igual que pongas text-align o no, el que la línea se centre es el comportamiento por defecto que genera el navegador, no depende de que pongas text-align.

b) text-align no funciona para centrar o alinear hr

Si algo no lo comprendes, pon el código de una sola línea hr (solo una, no varias) y dime qué es lo que ves en tu navegador con ese código y qué es lo que no comprendes.

Saludos.

SITOAPRENDIZ · « **Respuesta #6 en:** 23 de Febrero 2015, 08:24 »

Muchas gracias Alex. Al estudiar el código de dicho módulo, he confundido y dado por supuesto que la parte del código text-align: center(o right o left), lo poniamos para este fin(el de alinear). No entendí que el hecho de establecer un( widthque sirve para dar anchura), la linea se centrara automáticamente. No relacionaba que un atributo de anchura, hiciera la acción automática de alineado, por el comportamiento del navegador(ya que son dos cosas distintas).
Comprobado este hecho, paso al siguiente módulo CU00717B.
Saludos.

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

Noticias:

Autor Tema: Ejercicios HTML CU00716B separadores o elementos hr establecer color grosor css (Leído 6030 veces)

SITOAPRENDIZ

Ejercicios HTML CU00716B separadores o elementos hr establecer color grosor css

Mastermind

Re:SOBRE LOS EJERCICIOS DEL MODULO CU00716B CURSO HTML DESDE CERO -SEPARADORES-

SITOAPRENDIZ

Re:SOBRE LOS EJERCICIOS DEL MODULO CU00716B CURSO HTML DESDE CERO -SEPARADORES-

Alex Rodríguez

Re:Ejercicios HTML CU00716B separadores o elementos hr establecer color grosor css

SITOAPRENDIZ

Re:Ejercicios HTML CU00716B separadores o elementos hr establecer color grosor css

Alex Rodríguez

Re:Ejercicios HTML CU00716B separadores o elementos hr establecer color grosor css

SITOAPRENDIZ

Re:Ejercicios HTML CU00716B separadores o elementos hr establecer color grosor css

Preguntas y respuestas