martes, diciembre 20, 2011

Tutorial de desarrollo web, Parte XI: Contenedores span y div. La instrucción display

Hasta ahora todas las etiquetas que hemos visto durante nuestro curso servían para crear una estructura concreta dentro de nuestra página. La etiqueta "p" crea párrafos, la etiqueta "a" crea enlaces, la etiqueta "img" adjunta imágenes... Sin embargo, ahora vamos a ver unas etiquetas un poco más abstractas, las etiquetas contenedoras <span> y <div>. Estas dos etiquetas, aparentemente no modifican para nada el documento, pero, sin embargo, son bastante útiles.
Ambas etiquetas sirven para agrupar elementos, normalmente dándole un estilo particular y, en muchas ocasiones, separándolo del resto de los elementos. Sin embargo, sobre todo en el caso de la etiqueta "span", es muy difícil verla ya que, por ejemplo, si usamos la etiqueta "span" de esta manera:

<p>Aquí vamos a usar <span>una etiqueta span</span> para ver su resultado.</p>

Será leída de la siguiente manera:
Aquí vamos a usar una etiqueta span para ver su resultado.
Como vemos, aparentemente no hay ningún cambio. En cambio si a la etiqueta "span" le añadimos el siguiente atributo:

<span style="border-style: solid;">

El resultado esta vez será el siguiente:
Aquí vamos a usar una etiqueta span para ver su contenido.
Vemos que el contenido de la etiqueta "span" ha sido rodeado por un borde, indicándonos el contenido de la etiqueta.
La principal diferencia entre las etiquetas "span" y "div" es el hecho de cómo actúan con los elementos que las rodean. Como vemos, la etiqueta "span" acepta tener delante y detrás elementos sin ningún problema, de modo que al no ponerle bordes, ni nos dábamos cuenta de que existía un "span" ahí. Sin embargo, con el "div" no ocurre lo mismo, como veremos al ejecutar el siguiente código:

<p>Aquí vamos a usar <div>una etiqueta div</div> para ver su resultado</p>

Su resultado será:
Aquí vamos a usar
una etiqueta div
para ver su resultado
Como vemos, la etiqueta "div", a diferencia del "span", fuerza un salto de línea, siendo realmente la única diferencia entre ambas etiquetas. Como he dicho antes, estas etiquetas se usan primariamente para poner estilos, usando sobre todo sus atributos "class" o "id" (sobre todo esta última), e incluso usando el atributo "id" para hacer enlaces (como vimos en su correspondiente capítulo). Sin embargo, el uso tanto de "span" como "div" puede hacerse un poco lioso, sobre todo en desarrolladores con poca experiencia en CSS, así que recomiendo mucha paciencia a la hora de usarlos.
Anotar también que dentro de un "div" puede ir cualquier elemento de un "body", lo cual también incluye otros "div" incluso "span", pero dentro de un "span" sólo se recomiendan otros elementos que, como él, no creen saltos de línea al ser introducidos. Y supongo que no hará falta señalar que los "span" y "div" sólo se pueden colocar dentro del "body" de nuestro documento, siendo completamente ilógico cualquier otro intento de uso. Seguiremos trabajando con "span" y "div" en futuras entregas.
Mientras tanto, nos metemos un poco en CSS para controlar una de las características de nuestras etiquetas. Hasta ahora hemos visto que, al igual que el "span" y el "div" se diferencian en su colocación frente a los elementos que la rodean, también etiquetas como "p" se comportan como "div" y etiquetas como "a" se comportan como "span", pero eso podemos cambiarlo. ¿Cómo? Con la instrucción display.
La instrucción "display" indica el modo de visualización de una etiqueta. A pesar de tener muchos posibles valores, vamos a centrarnos en los tres más importantes: inline, block y none.

  • El valor "inline" de "display" hará que la etiqueta a la que se lo apliquemos se ponga en línea con el texto. Es el que tienen por defecto etiquetas como "span" o "a".
  • El valor "block" forzará saltos de línea antes y después de la etiqueta en cuestión. Es el valor por defecto de etiquetas como "div" y "p".
  • Finalmente, el valor "none" hará que no se muestre la etiqueta en cuestión, y por supuesto, tampoco su contenido.
Aunque, teóricamente, seríamos capaces ahora de convertir un "span" en un "div" y viceversa, cambiando los valores de sus "display", lo cierto es que, mientras hacía el artículo, he hecho la prueba, y, aunque "span" se ha convertido en "div" sin problema ninguno, no ha pasado lo mismo con "div", que, aunque con el texto posterior sí se ha comportado como un "span", ha generado un salto de línea justo antes de comenzar. He intentado investigar pero no he encontrado nada sobre esto, así que si alguien encuentra alguna solución (tampoco es algo que vaya a ser especialmente útil, pero por curiosidad).
Y terminamos esta entrega que ha sido más teórica que práctica, pero seguiremos trabajando con estos elementos cada vez más a menudo, así que será mejor trabajar bien con ellos.

EJERCICIO

Esta semana el ejercicio consiste en coger nuestra página ("index.html", "compraventa.html" y "faq.html") y vamos a introducir todos los elementos en etiquetas "div" o "span", dependiendo de si queremos que generen saltos de línea con el resto. Es posible que al lector se le ocurran varias maneras de hacerlo, lo único que se exige es que se usen ambas etiquetas y que, al final, el aspecto de la página sea lo más parecido posible a lo que ya tenía de antes.

Y terminamos esta entrega del tutorial y nos despedimos hasta la semana que viene (una vez más, ¡esto es mentira!). Repito una vez más que los conceptos de esta entrega, aunque parezcan tontos, serán muy útiles en la práctica, así que mejor será que les cojamos el truco.

1 comentario:

curso de diseño web dijo...

Muy buen aporte. Los diseñadores web cuentan con innumerables oportunidades de trabajo a partir de la gran necesidad de las empresas de contar con un sitio para publicitar sus productos o servicios. Por este motivo capacitarse en esta área puede ser muy conveniente.