Nos vamos acercando al final de nuestras entregas sobre HTML para principiantes. Ya repasamos bastante de todos los conceptos principales, las etiquetas, y dimos algunos consejos para comenzar a trabajar. Conociendo la estructura básica de un documento, podemos hacer muchas cosas. En nuestra anterior entrega hablamos sobre la importancia del DOCTYPE, sobre los enlaces, y sobre las anclas. Hoy llega el turno de una de las cosas más “complicadas” de HTML, las tablas, pero además hablaremos sobre las imágenes en los documentos y la creación de listas.
Las imágenes en HTML
Las páginas web no podrían existir sin imágenes. Hoy en día, la importancia de lo visual en las páginas web es obvia. Pero las imágenes tienen que estar subidas de una manera determinada para poder funcionar de forma efectiva. Tenemos dos formas de incluir imágenes, dependiendo del tipo de imágenes que queremos usar. Por eso, vamos a comenzar con la diferenciación entre estos tipos.
Por un lado, tenemos las imágenes de contenido. Estas son imágenes que se incluyen directamente en el código HTML y que deberían servir para proporcionar información adicional. No siempre sucede, pero ese es el espíritu. Por otra parte, tenemos las imágenes de decoración o adorno que se insertan directamente en el código CSS y que no tienen que ver con lo que estamos tratando en este momento. Este tipo de imágenes están insertadas en las hojas de estilo.
Nos dedicaremos, entonces, a las imágenes de contenido. Estas se insertan a través de la etiqueta <img>, que a su vez cuenta con una serie de atributos comunes que podemos usar, como la alineación, bordes, etc. Pero además, la etiqueta <img> cuenta con atributos específicos que es importante que usemos, muchas de las veces. Estos atributos son:
src: se trata de la URL desde donde estaremos “levantando” la imagen. Puede ser un servidor propio o ajeno, pero es importante que la fuente de la imagen esté siempre activa para evitar errores. Por eso es recomendable usar un servidor propio.
alt: este es uno de los atributos más importantes de la imagen, y ya en nuestra guía de buenas prácticas para escribir HTML mencionábamos que tenemos que agregarlo por cuestiones de validación y accesibilidad. Nunca debe ser olvidado.
longdesc: este es uno de los atributos menos usados, pero nos permite acceder a una descripción de la fotografía en una determinada URL.
name: se trata del nombre de la imagen, como pueden haber adivinado, y es el nombre que aparecerá cuando apoyamos el cursor sobre la imagen.
La etiqueta <img> cuenta con dos atributos más que pueden ser usados para “editar” la imagen desde el código. Estos son width y height, pero no es recomendable usarlos dado que casi siempre deforman la imagen. Si necesitamos usar una foto de un ancho de 450 píxeles, no tenemos que determinar esto desde el HTML, sino que tenemos que editar la foto usando un programa alternativo, y luego subirla. Las ediciones de imágenes se tienen que hacer de forma paralela. Además de usar píxeles, también podemos indicar estas medidas en forma de porcentaje.
En definitiva, los atributos “obligatorios” son src y alt. No pueden dejar de estar en todas las imágenes que subimos al servidor. En cuanto al formato en que tiene que estar la imagen, depende de uno, pero tengamos en cuenta que al estar trabajando con web podemos tener limitaciones de peso de subida desde nuestro propio servidor, y también tenemos que hacer que la imagen cargue rápidamente para nuestros usuarios. Por eso, es mejor usar los formatos más livianos para la web, en 72dpi (o píxeles por pulgada) y en formato PNG o JPG.
Las listas
Otra gran forma de usar HTML es a través de las listas. Se trata de agrupar una serie de textos en un conjunto ordenado o desordenado, que se podrá ver de forma diferente en el resultado final. Por este motivo, tenemos dos tipos de listas que se manejan con etiquetas diferentes: se tratan de las listas ordenadas y de las listas desordenadas. También tenemos la opción de sumar un tipo diferente, las listas de definición, pero al no ser tan usado no estaremos viéndolo en profundidad aquí.
Comenzaremos por las listas desordenadas. Este tipo de listas es el más implementado dada su sencillez. La etiqueta con la cual podemos formar listas desordenadas es un elemento de bloque, y sus dos etiquetas principales son <ul> y <li> (etiqueta que comparte con la lista ordenada). En definitiva, una lista desordenada tendrá este aspecto en el código:
<ul>
<li>Elemento 1</li>
<li>Elemento 2</li>
<li>Elemento 3</li>
</ul>
Notemos que cada una de las etiquetas <li> tiene que estar cerrada. Una vez que tengamos todo dentro de este código, este será el resultado:
Elemento 1 Elemento 2 * Elemento 3
Pasaremos ahora a las listas ordenadas. La etiqueta contenedora cambia, dado que será <ol>, pero el mecanismo es básicamente el mismo. Esta es una porción de código para una lista ordenada:
<ol>
<li>Elemento 1</li>
<li>Elemento 2</li>
<li>Elemento 3</li>
</ol>
Y el resultado será:
- Elemento 1
- Elemento 2
- Elemento 3
La diferencia entre las listas ordenadas y desordenadas, además de la obviedad, es que tiene un atributo que nos permite cambiar las viñetas o números que ordenan. Para poder usar a, A, o I en lugar de 1., podemos usar el atributo start.
Las tablas
Finalmente, llegó la hora de uno de los asuntos más “complicados” del HTML. Puede que sea difícil de resolver en un primer momento, pero rápidamente nos acostumbraremos. Las tablas pueden usarse en el sentido tradicional, para organizar información, pero dentro de una página web también pueden usarse para organizar secciones como el header, el footer, el banner, etc. Básicamente nos dicen dónde deberían ir las cosas.
Usar tablas para organizar páginas web es un acercamiento muy 90’s a la cuestión. Hoy en día la práctica utilizada es crear contenedores div en CSS para poder ubicar las partes de la página de forma correcta. Pero las tablas mantienen una cierta utilidad.
Las tablas están incluidas en HTML desde sus primeras versiones para facilitar el manejo de datos. Pero pueden causar que el producto final de nuestro trabajo sea demasiado pesado y tarde demasiado tiempo en cargar en el navegador, más si lo complementamos con imágenes y otros recursos. Cuando creamos una tabla en HTML, básicamente estamos usando los mismos elementos de siempre que nos permiten crear filas y columnas, encabezados, y más.
Tenemos varios tipos de tablas. Comenzaremos con las tablas simples. En este caso, se componen de tres etiquetas, y no tienen demasiada dificultad. Más adelante hablaremos de atributos y otras cuestiones específicas. Las tres etiquetas son:
<table>, para delimitar el comienzo y fin de una tabla <tr>, que delimita el comienzo de cada fila * <td>, que determina el contenido de cada celda.
Puede ser algo confuso, pero pensemos que <tr> es table row, por lo que es la fila, y <td> es table data.
Una tabla en HTML se forma de esta manera:
<table>
<tr>
<td>Celda 1</td>
<td>Celda 2</td>
<td>Celda 3</td>
</tr>
<tr>
<td>Celda 4</td>
<td>Celda 5</td>
<td>Celda 6</td>
</tr>
</table>
El resultado final será este:
Para seguir avanzando, podemos complejizar la tabla usando otras etiquetas y atributos específicos de las tablas. Por ejemplo, la etiqueta <th> se usa dentro de <tr> como reemplazo de <td>, y es una etiqueta de encabezado de tabla. Si la usamos, el texto que ingresemos en esta etiqueta se verá luego destacado. Las propiedades de este destaque se pueden definir a través de CSS.
Esto nos lleva a hablar de los atributos específicos de las tablas. Aunque hay muchos, mencionaremos los más imprescindibles, los que nos permitirán jugar más con las tablas y hasta con la estructura de un sitio web, si es que queremos crear uno para practicar. Estos atributos son muy importantes para la creación de tablas complejas.
colspan: se trata del número de columnas que tiene que ocupar la celda. Si quiero tener una celda más grande, que ocupe 2 columnas mientras el resto ocupa una sola, tengo que usar este atributo seguido por la cantidad de columnas: colspan=”2”.
rowspan: en el mismo sentido que el anterior atributo, tenemos que usar rowspan para fusionar celdas en una fila.
Estos dos atributos nos permiten crear tablas complejas y organizar la información de forma diferente. También se pueden usar otros atributos, pero no son tan comunes.
abbr: es el atributo que describe el contenido de la celda
headers: nos muestran las celdas que actúan como cabeceras.
Con esto ya tenemos suficiente información para practicar y crear nuestras propias tablas. En la próxima entrega, hablaremos exclusivamente de los formularios en HTML, cómo crearlos, cómo se usan hoy en día, y más. Y finalizaremos con algunos consejos extra, más algunos recursos online que se pueden usar si recién estamos arrancando.
