Texto, imágenes y bordes - Cómo realizar los ejercicios

Identificar varios párrafos <p> consecutivos

La separación entre líneas de un bloque de texto es menor que la separación entre bloques consecutivos, lo que permite identificar bloques de texto consecutivos.

En el ejemplo siguiente se muestran varios párrafos <p>.

Si comparamos las separaciones entre líneas, es fácil ver que hay líneas más juntas que otras.

Las líneas que están más juntas pertenecen al mismo párrafo <p>, mientras que las líneas más separadas pertenecen a párrafos <p> distintos. El ejemplo anterior contiene por tanto cinco párrafos <p>.

Identificar la etiqueta de salto de línea <br>

En un bloque de texto sin justificar, el texto ocupa todo el espacio disponible en la pantalla, es decir, el texto se extiende del extremo izquierdo al extremo derecho (salvo la última línea del bloque, que termina antes porque tiene menos caracteres).

Pero en algunos casos, las líneas de un bloque no llegan al final de la línea, sino que se produce un salto de línea dentro del bloque. Eso se debe a la etiqueta <br>.

En el ejemplo del apartado anterior (Identificar varios párrafos <p> consecutivos), el último párrafo presenta esa situación: el texto que cabría perfectamente en una sola línea se muestra en tres líneas. Eso delata la presencia de etiquetas <br> al final de la primera y segunda línea.

El código fuente html del ejemplo anterior sería el siguiente:

<p>Félix Lope de Vega y Carpio (Madrid, 25 de noviembre de 1562
- Madrid, 27 de agosto de 1635) fue uno de los más importantes
poetas y dramaturgos del Siglo de Oro español y, por la extensión
de su obra, uno de los más prolíficos autores de la literatura
universal.</p>

<p>Félix Lope de Vega y Carpio</p>

<p>Madrid, 25 de noviembre de 1562</p>

<p>Madrid, 27 de agosto de 1635</p>

<p>Félix Lope de Vega y Carpio<br>
Madrid, 25 de noviembre de 1562<br>
Madrid, 27 de agosto de 1635</p>

Identificar elementos de texto en línea

Los navegadores resaltan gran parte de los elementos de texto en línea utilizando negrita, cursiva o de otras formas, y no resaltan algunos elementos de ninguna manera. Como hay varias etiquetas que se resaltan de la misma manera, para identificarlas hay que fijarse en la información que contiene la etiqueta.

Tamaño de elementos de bloque y de elementos en línea

El tamaño de los elementos de bloque se determina de forma diferente en cada dimensión:

• en horizontal, depende del espacio disponible, es decir, el elemento de bloque ocupa todo el espacio disponible.
• en vertical, depende del contenido del elemento, es decir, el elemento de bloque ocupa el espacio que se necesita para alojar el contenido.

El tamaño de los elementos en línea se determina de la misma manera en ambas dimensiones: el elemento ocupa el espacio necesario para alojar el contenido, primero en horizontal y luego en vertical.

Podemos ver la diferencia en el siguiente ejemplo:

<p class="fondo">Governments of the Industrial World, you weary giants of flesh and steel, I come from Cyberspace, the new home of Mind. On behalf of the future, I ask you of the past to leave us alone. You are not welcome among us. You have no sovereignty where we gather.</p>

<p><span class="fondo">Davos, Switzerland. February 8, 1996</span></p>

.fondo {
  background-color: hwb(180 70% 10%);
}

En el primer párrafo el color de fondo está asignado al elemento de bloque <p>, por eso el color de fondo se extiende de un extremo a otro de la pantalla.

En el segundo párrafo el color de fondo está asignado al elemento en línea <span>, por eso el color de fondo abarca únicamente los caracteres.

Distinguir entre imágenes insertadas y caracteres

Habitualmente, las imágenes que se ven en una página web son realmente imágenes (elementos <img> o <svg>), pero en algunos casos pueden ser en realidad caracteres (más exactamente, entidades de carácter o numéricas), como muestra la página de ejemplo siguiente. En este ejemplo se ven dos ciclones, pero uno de ellos es la entidad numérica &#x1f300; y el otro es una imagen insertada en el texto.

Para distinguirlos, basta situar el cursor sobre la presunta imagen:

• si es una imagen, el cursor seguirá siendo la flecha ()
• si se trata de texto, el cursor se convertirá en el cursor de texto ()

También, si hacemos clic derecho sobre la presunta imagen:

• si es una imagen, el menú contextual mostrará opciones propias de las imágenes (ver imagen, guardar imagen, etc., el texto y la posición en el menú contextual depende del navegador).
• si se trata de texto, el menú contextual no mostrará esas opciones.

Nota: No se debe concluir si la presunta imagen es una entidad numérica o una imagen basándose en la sencillez de la imagen, ya que eso depende de la fuente empleada por el navegador o incluso de la entidad numérica.

Distinguir entre imágenes insertadas e imágenes de fondo

Las imágenes que se ven en una página web pueden ser imágenes insertadas (elementos <img> o <svg>) o pueden tratarse imágenes de fondo, como muestra la página de ejemplo siguiente. En este ejemplo se ven dos ciclones, pero uno de ellos es una imagen insertada en el texto y el otro es una imagen de fondo.

Para distinguirlos, bastaría con desactivar la hoja de estilo. La imagen de fondo dejaría de verse.

También podemos distinguirlas haciendo clic derecho sobre las imágenes:

• si es una imagen insertada, el menú contextual mostrará opciones propias de las imágenes (ver imagen, guardar imagen, etc.), aunque las opciones mostradas y su posición en el menú contextual depende del navegador.
• si es una imagen de fondo, el menú contextual mostrará opciones propias de las imágenes de fondo (con menos opciones que en el caso anterior), aunque las opciones mostradas y su posición en el menú contextual depende del navegador.

Atributo alt de las imágenes <img>

El atributo alt de una imagen <img> es el texto que se muestra cuando la imagen no está disponible. En los ejercicios, el atributo alt contiene una descripción breve de la imagen. Para que el alumno pueda ver el atributo alt de las imágenes en los ejercicios, he añadido a las imágenes un atributo title con el mismo texto que el atributo alt . Así, basta con colocar el ratón encima de la imagen, para averiguar el atributo alt.

Pero en general no se aconseja que esos dos atributos coincidan, puesto que alt se ve cuando la imagen no está disponible mientras que title se ve cuando la imagen sí está disponible (aunque también cuando no está).

background-color en <html> o <body>

• Si se establece la propiedad background-color en <html> y no se establece en<body>, el color de fondo se aplica a todo el espacio disponible en la ventana del navegador.

  <body>
    <p>Diferencia entre aplicar background-color en &lt;html&gt; y en &lt;body&gt;</p>
  </body>
  

  html {
    background-color: lightblue;
  }
  
  body {
  }
  

  
• Si se establece la propiedad background-color en <body> y no se establece en <html>, el color de fondo se aplica a todo el espacio disponible en la ventana del navegador.

  <body>
    <p>Diferencia entre aplicar background-color en &lt;html&gt; y en &lt;body&gt;</p>
  </body>
  

  html {
  }
  
  body {
    background-color: palevioletred;
  }
  

  
• Si se establece la propiedad background-color en <body> y en <html>, el color de fondo de <body> se aplica a el espacio ocupado por el contenido de la página y el color de fondo de <html> se aplica al resto de la ventana del navegador.

  <body>
    <p>Diferencia entre aplicar background-color en &lt;html&gt; y en &lt;body&gt;</p>
  </body>
  

  html {
    background-color: lightblue;
  }
  
  body {
    background-color: palevioletred;
  }
  

  

margin predeterminado en <html> o <body>

La hoja de estilo predeterminada de los navegadores aplica margin a <body>, pero no a <html>.

• El espacio por arriba y a los lados del párrafo del ejemplo podrían deberse a un padding de <html> o a un margin de <body> o a un margin de <p>.

  <body>
    <p>Diferencia entre aplicar background-color en &lt;html&gt; y en &lt;body&gt;</p>
  </body>
  

  html {
    background-color: lightblue;
  }
  
  body {
    background-color: palevioletred;
  }
  

  
• Parte del espacio superior se debe al margin de <p>, lo que se comprueba poniéndolo a cero y observando cómo se reduce ese espacio.

  <body>
    <p>Diferencia entre aplicar background-color en &lt;html&gt; y en &lt;body&gt;</p>
  </body>
  

  html {
    background-color: lightblue;
  }
  
  body {
    background-color: palevioletred;
  }
  
  p {
    margin: 0;
  }
  

  
• Sin embargo, poner a cero el padding de <html> no afecta al resultado.

  <body>
    <p>Diferencia entre aplicar background-color en &lt;html&gt; y en &lt;body&gt;</p>
  </body>
  

  html {
    padding: 0;
    background-color: lightblue;
  }
  
  body {
    background-color: palevioletred;
  }
  
  p {
    margin: 0;
  }
  

  
• Pero al poner a cero el margin de <body>, el espacio desaparece.

  <body>
    <p>Diferencia entre aplicar background-color en &lt;html&gt; y en &lt;body&gt;</p>
  </body>
  

  html {
    background-color: lightblue;
  }
  
  body {
    margin: 0;
    background-color: palevioletred;
  }
  
  p {
    margin: 0;
  }
  

  

Unidades de tamaños

En los últimos años está aumentando la diversidad de las pantallas, tanto respecto a los tamaños de pantalla, como respecto a las resoluciones y a las densidades. Eso hace más difícil conseguir diseños que se adapten fácilmente a todas las pantallas.

Por otro lado, los navegadores han pasado de ofrecer zooms que ampliaban únicamente el texto a ofrecer zooms que amplian tanto el texto como las imágenes. Eso ha hecho que unidades desaconsejadas hace poco años como px hayan vuelto a ponerse de moda.

En cualquier caso, al resolver un ejercicio, se debe distinguir si se utilizan unidades absolutas o unidades relativas. Para ello, basta con modificar el tamaño de la ventana (en horizontal o vertical).

• Si alguna característica (márgenes, bordes, el tamaño del elemento, etc.) modifica su tamaño, es que se han utilizado unidades relativas (normalmente, porcentajes %).
• Si alguna característica (márgenes, bordes, el tamaño del elemento, etc.) no modifica su tamaño, es que se han utilizado unidades absolutas (normalmente, px).

En el caso de las fuentes, resulta cada vez más difícil distinguir una unidad de otra. En estos apuntes se utiliza normalmente la unidad rem para el tamaño de las fuentes, aunque también se pueden utilizar otras unidades, como %, em o px

Porcentajes en las distancias horizontales

Al expresar las distancias horizontales en porcentajes, hay que tener en cuenta que esos porcentajes se refieren al tamaño del elemento contiene al elemento.

En el ejemplo siguiente los dos párrafos tienen un margin-left y un margin-right de 25%, lo que deja un 50% del espacio para el texto.

• En el caso del párrafo que está fuera de la división se trata del 50% de todo el espacio de izquierda a derecha,
• En el caso de párrafo que está dentro de la división se trata del 50% del espacio dentro de la división.

<div>
  <p>Este párrafo está dentro de la división</p>
</div>

<p>Este párrafo está fuera de la división.</p>

div {
  margin-left: 25%;
  margin-right: 25%;
  padding: 10px;
  border: black 2px solid;
}

p {
  margin-left: 25%;
  margin-right: 25%;
  background-color: lightblue;
}

Unidades de tamaño de letra font-size

Se recomienda expresar los tamaños de letras en unidades rem, aunque también se pueden utilizar otras unidades, como %, em o px

En los ejercicios, los valores de los tamaños suelen ser valores enteros "redondos" (1.5rem, 2rem, 150%, 200%, etc.).

Ajustar el tamaño de letra de todos los elementos

• La hoja de estilo predeterminada modifica el tamaño de algunos elementos, como muestra el ejemplo siguiente:

  <h1>Título principal</h1>
  
  <h2>Título secundario</h2>
  
  <p>Párrafo de texto.</p>
  

• Si se quieren cambiar todos los tamaños simultáneamente manteniendo las proporciones, se debe modificar el tamaño de la fuente en <body> o en <html>:

  <h1>Título principal</h1>
  
  <h2>Título secundario</h2>
  
  <p>Párrafo de texto.</p>
  

  body {
    font-size: 1.2rem;
  }
  

  
• Si se quiere modificar la proporción de tamaños entre unos elementos y otros, hay que hacerlo en cada elemento:

  <h1>Título principal</h1>
  
  <h2>Título secundario</h2>
  
  <p>Párrafo de texto.</p>
  

  h1 {
    font-size: 1.5rem;
  }
  
  h2 {
    font-size: 1.25rem;
  }
  
  p {
    font-size: 1rem;
  }
  

  
• Se pueden combinar ambos procedimientos, modificando la proporción de tamaños entre unos elementos y otros, y redefiniendo el tipo de letra básico en <body> o en <html>:

  <h1>Título principal</h1>
  
  <h2>Título secundario</h2>
  
  <p>Párrafo de texto.</p>
  

  body {
    font-size: 1.2rem;
  }
  
  h1 {
    font-size: 1.5rem;
  }
  
  h2 {
    font-size: 1.25rem;
  }
  
  p {
    font-size: 1rem;
  }