Tablas básicas en HTML

Vamos a dedicar una serie de artículos a explicar cómo construir tablas en HTML, elementos imprescindibles para presentar datos estructurados. Las tablas tienen cierta relevancia histórica, pues se abusaba de ellas para diseñar la estructura de la propia página en sí. La primera edición de “El Club del Autodidacta”, hace más de quince años, empleaba las tablas como principal elemento de diseño.

Hoy día ya no es necesario recurrir a ellas para mostrar una página perfectamente seccionada. La versión actual de “El Club del Autodidacta”, como la gran mayoría de las páginas actuales, consigue diseños infinitamente mejores empleando una tecnología sencilla de la que hablaremos largo y tendido en este blog: CSS, las hojas de estilo “en cascada”.

Pero, aún así, para presentar un conjunto de datos en formato tabular, las tablas HTML siguen siendo la mejor opción. Voy a mostrarte cómo generarlas.

Comienza echando un vistazo a esta página, en la que se muestra una tabla de dos filas por tres columnas presentada con tres tipos de borde diferentes.

El primer paso para crear una tabla es delimitarla en HTML con el par de etiquetas <table> ... </table>.

<table>
...
</table>

Una vez definido el contenedor global nos aproximaremos a su contenido pensando en filas. Emplearemos las etiquetas <tr> ... </tr> (de table row, fila de tabla), para delimitar cada fila. En el ejemplo tenemos dos filas, por los que nos encontraremos dos pares de etiquetas <tr>:

<table>
<tr>
...  
</tr>

<tr>
...  
</tr>
</table>

Entre medias, en el espacio definido por los puntos suspensivos, introduciremos los datos de cada fila propiamente dichos, delimitando cada columna por el par de etiquetas <td> ... </td> (de table data, datos de la tabla).

Observa la tabla completa:

<table>
<tr>
  <td>manzana</td><td>pera</td><td>fresa</td>
</tr>
<tr>
  <td>tomate</td><td>cebolla</td><td>pepino</td>
</tr>
</table>

Este código se corresponde a la primera de las tres tablas del ejemplo, que aparece sin bordes. Si deseamos enmarcarlas podemos recurrir al atributo border, asignándole un valor que hará referencia al grosor del marco. Fíjate cómo he cambiado la etiqueta <table> con el nuevo atributo.

<table border="1">
<tr>
  <td>manzana</td><td>pera</td><td>fresa</td>
</tr>
<tr>
  <td>tomate</td><td>cebolla</td><td>pepino</td>
</tr>
</table>

La segunda tabla del ejemplo se corresponde con el código anterior. Incrementando el valor del atributo border aumentamos, a su vez, su grosor. El tercer ejemplo emplea <table border="5">.

Cuando empecemos con las hojas de estilo veremos maneras mucho más potentes de jugar con el diseño de la tabla. Esta ha sido la evolución general del HTML: se ha ido separando el contenido del diseño y, aunque muchas etiquetas aún mantienen atributos que afectan su aspecto, por lo general, se suele recurrir a las hojas de estilo para todas las consideraciones de diseño.

En el próximo artículo le daremos una pequeña vuelta al concepto de tabla y aprenderemos a crear encabezados que identifiquen las filas o columnas.

Javier Montero


Tablas básicas en HTML


El texto de este artículo se encuentra sometido a una licencia Creative Commons del tipo CC-BY-NC-ND (reconocimiento, no comercial, sin obra derivada, 3.0 unported)


El Club del Autodidacta

Listas anidadas en HTML – 2 de 2

En la primera parte de este artículo combinamos los conocimientos que ya habíamos adquirido sobre las listas para ilustrar el modo de anidarlas.

Lo primero que te propongo es que realices un ejercicio práctico. Observa la siguiente página cuidadósamente y trata de reproducir el código necesario para generarla.

No te dejes intimidar por la profundidad de la lista (hasta cuatro niveles). Recuerda que debes aproximarte de fuera a dentro, comenzando por la más exterior.

Te recomiendo que cada vez que abras una etiqueta la cierres para crearte un contenedor y asegurarte de que no se te olvida por accidente su cierre. Luego prosigue rellenando los espacios entre etiquetas.

Si tienes algún problema, haz clic sobre el enlace con el botón derecho y descárgate el fichero con el código fuente para consultar la solución.

Quiero que te fijes ahora en las listas del ejemplo. Observa que las listas ordenadas anidadas muestran una numeración ascendente con números normales (arábigos) independientemente del nivel en que se encuentren. En cambio, las listas no ordenadas presentan un bolo que dependerá precisamente del nivel de profundidad.

Observa ahora el siguiente ejemplo, en el que he alterado precisamente estos indicadores por defecto, tanto en las listas ordenadas como en las que no lo están.

Fíjate cómo, en las listas ordenadas, además de usar números arábigos para expresar el orden, podemos hacerlo de los siguientes modos:

– Letras mayúsculas
– Letras minúsculas
– Números romanos en mayúsculas
– Números romanos en minúsculas.

Además, disponemos de distintos símbolos para las listas no ordenadas.

Voy a enseñarte cómo hacer esto, pero antes tengo que contarte algo importante relacionado con el modo en que fue evolucionando el lenguaje HTML desde su creación.

En un principio el HTML era caótico. No sé si recordáis la guerra cruenta entre navegadores (sobre todo entre Netscape Navigator y Microsoft Internet Explorer) en la que cada uno añadía nuevas funcionalidades al lenguaje que dificultaban los esfuerzos de estandarización y compatibilidad.

El W3C intentó poner un poco de orden en esta situación y apostó por una versión más estricta del lenguaje inspirada en los rigores de XML, que denominó XHTML.

Además de unas normas sintácticas más severas (como la escritura de las etiquetas en mayúsculas y la necesidad de cerrarlas), introdujo un concepto decisivo: la separación entre contenido y diseño.

Tras la guerra entre navegadores nos encontramos con un buen número de etiquetas y atributos que indicaban cómo se diseñaba el texto: qué tipo de letra, tamaño, color, márgenes, etc…

Con XHTML se desligó la función semántica del lenguaje (dime qué quieres hacer) de los detalles de presentación (cómo quieres verlo). Para eso recurrió a un artilugio denominado hojas de estilo, las cuales se ocupaban de todos los aspectos concretos de visualización.

Como consecuencia XHTML realizó una purga y nombró como obsoletas aquellas etiquetas o atributos que se ocupaban de cuestiones de diseño, pues entendía que todo eso era función de las hojas de estilo. Un ejemplo, entre muchos, es la etiqueta <font>, que se ocupaba de definir el tipo de letra a utilizar.

¿Qué tiene que ver todo esto con las listas anidadas, preguntarás?

Pues bien, antes de que llegase el XHTML escricto, existía un atributo en las etiquetas <ol> y <ul> que permitía definir el tipo de numeración o bolo si no queríamos utilizar los que el navegador proponía por defecto.

XHTML estricto considera que esos atributos están obsoletos, pues insiste en que todos los aspectos de diseño deben realizarse a través de las hojas de estilo.

Pero, a pesar de que estén obsoletos, aún siguen estando activos y te explicaré cómo hacerlo a la antigua usanza hasta que empecemos los artículos de CSS (Cascading Style Sheets), las hojas de estilo con las que resolveremos todas las consideraciones de presentación y diseño de HTML.

¿Recuerdas qué era la famosa etiqueta DOCTYPE que aparece al comienzo de cada página? Compara la del primer ejemplo con la del segundo. Se trata de una DTD (definición de tipo de documento) que indica al navegador, último responsable de la presentación de la página, a qué conjunto de normas se adhiere la página.

El primer ejemplo está usando XHTML estricto con todo lo que eso implica, entre lo que está no usar ni etiquetas ni atributos obsoletos (deprecated).

El segundo usa una versión más relajada denominada Transitional, que en su día se empleó para dar tiempo a los navegadores a que poco a poco fueran migrando a XHTML puro. El XHTML transicional tiene el rigor sintáctico del XHTML, como el cierre de todas las etiquetas y su escritura en minúsculas, pero permite el uso de estas etiquetas obsoletas.

Como he querido usar atributos obsoletos para especificar cómo numeraré las listas ordenadas y qué bolos emplearé en las no ordenadas, en vez de emplear hojas de estilo CSS, he cambiado la DTD del segundo ejemplo a XHTML transicional. Fíjate bien en la primera línea.

Si no lo hubiese puesto podría obtener resultados imprevisibles según el navegador empleado.

Por lo general trabajaremos con XHTML estricto o con HTML5 (la nueva gran revolución) en esta serie, pero resulta interesante también conocer el modo clásico de proceder.

Observa el código fuente del segundo ejemplo y se desvelará el misterio. Con el atributo type dentro de las etiquetas <ol> y <ul> indicamos cómo será la numeración o el bolo:

– orden con letras mayúsculas: type=”A”
– con letras minúsculas: type=”a”
– con números romanos en mayúsculas: type=”I”
– con números romanos en minúsculas: type=”i”
– y, naturalmente, con números arábigos, type=”1″, que no es necesario indicar, pues es el valor por defecto.

Por ejemplo, para una numeración por letras minúsculas, la etiqueta sería:

<ol type="a"> ... </ol>

Con las listas no ordenadas tenemos las siguientes opciones:

– bolo cuadrado: type=”square”
– bolo con punto negro: type=”disc”
– bolo con punto en blanco: type=”circle”

Por ejemplo:

<ul type="disc"> ... </ul>

Es interesante que aprendas esto. Pero pronto te haré desaprenderlo cuando nos metamos en profundidad en el apasionante mundo de las CSS.

Javier Montero


Listas anidadas en HTML – 2 de 2


El texto de este artículo se encuentra sometido a una licencia Creative Commons del tipo CC-BY-NC-ND (reconocimiento, no comercial, sin obra derivada, 3.0 unported)


El Club del Autodidacta

Listas anidadas en HTML – 1 de 2

En los últimos artículos de esta serie mostramos los tres tipos básicos de listas en HTML: ordenadas, no ordenadas y de defición. Comprendidos estos conceptos, anidar listas será una tarea realmente sencilla.

Comencemos observando el aspecto de una lista anidada.

Date cuenta de que, en un primer nivel, nos encontramos con una lista ordenada. En un segundo aparecen distintas listas no ordenadas.

Veamos cómo diseñar el conjunto.

La forma de atacar una anidación de listas es partiendo desde fuera hacia dentro. Comenzamos esquematizando el primer nivel y a él le añadimos las listas de segundo nivel.

Antes de la lista ordenada de primer nivel nos encontramos con un simple encabezado que sirve de título:

<h2>Menú</h2>

Y comienza la fiesta:

Vamos a crear la estructura de la lista ordenada exterior, pero sin rellenar los campos con los distintos elementos. Esto ayudará a que no nos perdamos en las marañas.

<ol>
    <li>...</li>
    <li>...</li>
    <li>...</li>
</ol>

Se trata de una lista con tres elementos.

Como si de un vídeo de cocina se tratase, vamos preparando las listas no ordenadas de segundo nivel para cuando llegue el momento de agregarlas al sofrito:

Esta vez la detallaremos completas, pues no hay ningún nivel inferior:

La primera:

<ul>
    <li>Macarrones</li>
    <li>Gazpacho</li>
    <li>Judías pintas</li>
</ul

Esto no tiene ningún misterio: una simple lista sin ordenar con tres elementos.

La segunda:

<ul>
    <li>Pollo al ajillo</li>
    <li>Merluza frita</li>
</ul>

Y, finalmente, la última:

<ul>
    <li>Fruta</li>
    <li>Yogur</li>
    <li>Café</li>
</ul>

Hasta aquí todo es muy sencillo. Presta atención ahora, pues llega el momento crítico.

Vamos a analizar ahora los distintos elementos que componen la lista numerada de primer nivel.

Fíjate en el primer elemento (échale un vistazo nuevamente al fichero de ejemplo) y trata de responder a la siguiente pregunta:

¿De qué está compuesto el primer elemento?

La respuesta debe llegarte de un modo inmediato si comprendes que el primer elemento se compone de todo lo que hay entre el número 1 y el número 2.

Es decir, nos encontramos, en primer lugar, con un encabezado:

<h3>Primer plato</h3>

Puesto que para el título empleamos un h2, parece lógico utilizar aquí otro de menor jerarquía como un h3.

Después del encabezado, nos aparece la primera de las listas no ordenadas de segundo nivel que ya cocinamos hace un rato:

<ul>
    <li>Macarrones</li>
    <li>Gazpacho</li>
    <li>Judías pintas</li>
</ul

Por lo tanto, el primer elemento de la lista de primer nivel es, completo:

<h3>Primer plato</h3>
<ul>
    <li>Macarrones</li>
    <li>Gazpacho</li>
    <li>Judías pintas</li>
</ul>

Razonando del mismo modo, el segundo elemento de la lista de primer nivel se compone de todo lo que hay entre el 2 y el 3. Es decir:

<h3>Segundo plato</h3>
<ul>
    <li>Pollo al ajillo</li>
    <li>Merluza frita</li>
</ul>

Finalmente, el tercer elemento es:

<h3>Postre</h3>
<ul>
    <li>Fruta</li>
    <li>Yogur</li>
    <li>Café</li>
</ul>

Ya sólo falta el toque final. Volvemos al esqueleto de la lista de primer nivel y entre cada <li>…</li> insertamos cada una de las piezas.

He aquí nuestro resultado final:

<h2>Menú</h2>
<ol>
    <li>
        <h3>Primer plato</h3>
        <ul>
            <li>Macarrones</li>
            <li>Gazpacho</li>
            <li>Judías pintas</li>
       </ul>
    </li>
    <li>
        <h3>Segundo plato</h3>
        <ul>
        <li>Pollo al ajillo</li>
        <li>Merluza frita</li>
        </ul>
    </li>
    <li>
        <h3>Postre</h3>
        <ul>
            <li>Fruta</li>
            <li>Yogur</li>
            <li>Café</li>
        </ul>
    </li>
</ol>

Ya sabes que la indentación no es necesaria, pero ayuda a esclarecer la estructura del código.

Descárgate el código fuente haciendo clic con el botón derecho sobre el enlace del comienzo del artículo si quieres ver fichero el fichero completo.

Cuando hayas practicado esto un par de veces podrás escribir directamente el código con agilidad. Tómate, entre tanto, el tiempo que haga falta desglosando cada lista de fuera a dentro, tal como hemos hecho aquí.

En el próximo artículo presentaré un nuevo ejemplo, esta vez anidando listas ordenadas entre sí. Veremos las particularidades que tienen este tipo de estructuras.

Javier Montero


Artículos relacionados:

Creación de listas ordenadas en HTML
Listas no ordenadas en HTML
Listas de definición en HTML


Listas anidadas en HTML – 1 de 2


El texto de este artículo se encuentra sometido a una licencia Creative Commons del tipo CC-BY-NC-ND (reconocimiento, no comercial, sin obra derivada, 3.0 unported)


El Club del Autodidacta

Listas de definición en HTML

Continuamos la serie de artículos dedicadas a las listas en HTML explicando el tercer tipo que aún nos resta: las listas de definición.

Este tipo de listas las utilizamos para dar el formato típico de un diccionario en el que se presenta un término y, a continuación su definición. Con un poco de imaginación, podréis encontrar, sin duda, otros usos creativos.

Pero antes que nada, observad previamente el aspecto que tienen.

En inglés, lista de definición se dice definition list. Con las iniciales, ya tenemos la etiqueta que caracteriza a este tipo de listas: <dl>.

A diferencia de las listas ordenadas y no ordenadas, en las que empleamos la etiqueta <li> para delimitar cada elemento (item), ahora necesitaremos dos, una para el término y otra para su descripción en sí.

Para el término de la definición usamos la etiqueta <dt>, de definition term.

Para la descripción de la definición disponemos de la etiqueta <dd>, de definition description.

Según esto, la lista de definición del ejemplo anterior no debe suponer ya ningún misterio:

<dl>
  <dt>Ordenadas</dt>
  <dd>Cada elemento va precedido por un número de orden</dd>
  <dt>No ordenadas</dt>
  <dd>Cada elemento se precede por un bolo común que no sugiere ninguna 
ordenación en particular</dd>
  <dt>De definición</dt>
  <dd>Dan formato a una definición de términos al estilo de un diccionario</dd>
</dl>

Recordad que la indentación no es obligatoria; se ha indentado con el único propósito de hacer más legible el código.

Para finalizar, hay algo más que debéis saber de las listas de definición: puede haber listas en las que algún elemento aparezca sin describir. En este caso habría un <dt>, pero no su correspondiente <dd>. Y a la inversa, puede haber términos con dos o más definiciones, es decir, con varios apartados <dd>.

En el próximo artículo aprederemos a anidar listas entre ellas. Entre tanto, practicad esto a vuestras anchas. Si no hacéis páginas web, tal vez escribáis en un blog. La mayoría de los sistemas de blog admiten la inserción de código HTML. Probad las listas, estructurad el texto.

Javier Montero


Listas de definición en HTML


El texto de este artículo se encuentra sometido a una licencia Creative Commons del tipo CC-BY-NC-ND (reconocimiento, no comercial, sin obra derivada, 3.0 unported)


El Club del Autodidacta

Listas no ordenadas en HTML

En Creación de listas ordenadas en HTML explicamos el modo de generar listas cuyos elementos aparecían ordenados automáticamente en una secuencia numérica creciente. El segundo tipo de listas lo constituyen aquellas en las que los items no reflejan una ordenación particular más que la que refleja su escritura. Cada elemento aparece precedido de un bolo o viñeta, un punto, y no por un número.

Observad el aspecto de una lista no ordenada haciendo clic sobre el enlace.

La única diferencia, en lo que se refiere a su creación, respecto a las listas ordenadas, está en la etiqueta que indica el tipo de lista.

En inglés, lista no ordenada se dice unordered list. Si nos quedamos con las iniciales de estas palabras tenemos la etiqueta empleada en su definición: <ul>

La lista no ordenada del ejemplo anterior se crearía, entonces, del siguiente modo:

<ul>
  <li>Listas ordenadas</li>
  <li>Listas no ordenadas (esta que estáis viendo)</li>
  <li>Listas de definición</li>
</ul>

Observad cómo los distintos elementos se siguen referenciando con la etiqueta <li>.

Javier Montero


Listas no ordenadas en HTML


El texto de este artículo se encuentra sometido a una licencia Creative Commons del tipo CC-BY-NC-ND (reconocimiento, no comercial, sin obra derivada, 3.0 unported)


El Club del Autodidacta

Creación de listas ordenadas en HTML

Una de las primeras técnicas que uno aprende cuando estudia HTML y que da lugar a un resultado vistoso es la creación de listas.

Existen tres tipos básicos de listas en HTML: ordenadas, no ordenadas y de definición. En el artículo de hoy explicaremos el modo de crear las primeras.

Una lista ordenada no es más que una en la que los distintos elementos (items) aparecen numerados secuencialmente.

Observad el siguiente ejemplo de lista ordenada para comprender exactamente de qué estamos hablando.

Su creación es sencilla, como veréis a continuación.

Lista ordenada se dice, en inglés, ordered list. Si memorizáis las iniciales de estas dos palabras tendréis la etiqueta HTML responsable de su creación: <ol>.

Con la correspondiente etiqueta de cierre, toda nuestra lista queda entre los pares de etiquetas:

<ol> ... </ol>

Escribimos los distintos elementos incluyéndolos también en un par de etiquetas características. En inglés, elemento de lista se dice list item. Volved a coger las iniciales de estas dos palabras y tendréis la etiqueta que envolverá cada item de la lista: <li>.

No debéis preocuparos por la numeración de cada elemento, aparecerá de modo automático.

Ya tenemos todo lo necesario para confeccionar la lista del ejemplo:

<ol>
  <li>Listas ordenadas (esta que estáis viendo)</li>
  <li>Listas no ordenadas</li>
  <li>Listas de definición</li>
</ol>

La indentación no es necesaria, pero ayuda a ver el esquema con claridad.

Practicadlo un par de veces y esta técnica será definitivamente vuestra.

Javier Montero


Creación de listas ordenadas en HTML


El texto de este artículo se encuentra sometido a una licencia Creative Commons del tipo CC-BY-NC-ND (reconocimiento, no comercial, sin obra derivada, 3.0 unported)


El Club del Autodidacta

HTML: Seis niveles de encabezados

ECDA-HTMLObjetivo: mostrar los seis niveles de encabezados que ofrece HTML.

HTML permite seis niveles de encabezados. Para que te hagas una idea de su aspecto, comienza haciendo clic sobre el enlace que contiene el código del capítulo.

Las etiquetas que nos permiten crear encabezados son <h1>, <h2>, <h3>, <h4>, <h5> y <h6>, ordenadas por nivel decreciente de importancia.

El siguiente ejemplo muestra cómo generar un encabezado de máximo nivel:

<h1>Encabezado de nivel 1</h1>

Gracias a los encabezados podemos estructurar nuestros documentos en secciones sin preocuparnos por su aspecto. Por defecto, los navegadores los muestran escritos en negrita, con un tamaño de fuente adecuado para cada nivel de títulos y separados del texto anterior y posterior por una línea en blanco. Más adelante, cuando tratemos las hojas de estilo CSS veremos cómo personalizar su aspecto, en el caso de que no nos satisfaga el diseño por omisión.

Utiliza los seis niveles de encabezados de un modo coherente: recuerda que el de mayor importancia es H1 y el de menor H6. No queda muy estético, por ejemplo, usar un H2 para el nivel principal y un H1 para los secundarios.

<!DOCTYPE html>
<html>
<head>
<title>Seis niveles de encabezados</title>
</head>
<body>
<h1>Encabezado de nivel 1</h1>
<h2>Encabezado de nivel 2</h2>
<h3>Encabezado de nivel 3</h3>
<h4>Encabezado de nivel 4</h4>
<h5>Encabezado de nivel 5</h5>
<h6>Encabezado de nivel 6</h6>
<p>Y este es el texto normal.</p>
</body>
</html>

Javier Montero Gabarró


Fecha de la última revisión: 23 de diciembre de 2012


HTML: Seis niveles de encabezados


El texto de este artículo se encuentra sometido a una licencia Creative Commons del tipo CC-BY-NC-ND (reconocimiento, no comercial, sin obra derivada, 3.0 unported)


El Club del Autodidacta


Índice completo de artículos relacionados con HTML.

HTML: Saltos de línea y párrafos

Objetivo: aprender a generar saltos de línea y párrafos en HTML.

En el artículo anterior vimos que todo intento de agregar más espacios en blanco o tabuladores para separar las palabras resultaba infructuoso, pues era considerado como un único espacio. Tampoco conseguíamos saltar de línea por mucho que pulsáramos Enter. Hoy explicaremos el modo de hacer esto último.

Existen dos formas básicas para separar los bloques de texto: los saltos de línea y los párrafos.

Para insertar un salto de línea disponemos de la etiqueta <br>. Es un tanto peculiar, pues no encierra texto entre medias.

Si no alberga texto entre medias, ¿cómo la cerramos?

Sobre esto hay que contar algo…

En HTML este tipo de etiquetas no se cierran. Pero, cuando el mundo del HTML apuntaba decididamente hacia XHTML, con las reglas estrictas XML, estas etiquetas debían cerrarse. Ahora que parece que XHTML ha tocado techo y que vamos destinados a HTML5, estas etiquetas pueden dejarse perfectamente sin cerrar. Lo mismo ha sucedido con otras normas estrictas, como la del código rigurosamente en minúsculas. HTML5 es “case insensitive”, no le preocupa lo más mínimo si lo escribes en mayúsculas, minúsculas, o una combinación de ambos.

Si tu página está en HTML5, escribe:

<br>

Si está en XHTML:

<br />

Hay un espacio en blanco separando br de la barra inclinada.

Puedes insertar tantas etiquetas <br> como saltos de línea necesites.

El concepto de párrafo es muy distinto. Debes pensar en él como en un contenedor.

Englobamos un párrafo dentro de las etiquetas <p> ... </p>. Los navegadores se ocupan de que cada párrafo quede separado entre sí mediante una línea en blanco entre medias.

Este ejemplo básico ilustra el uso de saltos de línea y párrafos. Haz clic sobre el enlace para visualizarlo en el navegador:

<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
Entre esta frase y la siguiente hay un salto de línea.
<br>
Entre esta frase y la anterior hay un salto de línea.
<p>Esto es un párrafo. Los párrafos son contenedores. Se abren al comienzo del texto 
que engloban y se cierran al final.</p>
<p>Esto es otro párrafo. Un párrafo determina un punto y aparte. 
Fíjate también como los párrafos aparecen separados entre sí automáticamente mediante 
una línea en blanco.</p>
</body>
</html>

Javier Montero Gabarró


Fecha de la última revisión: 8 de diciembre de 2012


HTML: Saltos de línea y párrafos


El texto de este artículo se encuentra sometido a una licencia Creative Commons del tipo CC-BY-NC-ND (reconocimiento, no comercial, sin obra derivada, 3.0 unported)


El Club del Autodidacta


Índice completo de artículos relacionados con HTML.

HTML: Espacios en blanco que no sirven para nada

Objetivo: mostrar que HTML sólo considera un único espacio en blanco seguido, por muchos que introduzcamos o por muchas veces que pulsemos Enter.

Vimos que la etiqueta <body>, junto con su terminación </body>, delimitaba el bloque en el que figuraba el contenido visible de la página. Ya hicimos nuestros primeros pinitos escribiendo algo de texto ahí.

Pero hay algo que debes saber en relación a los espacios en blanco: por muchos que insertes entre palabras, sólo contarán como uno para HTML. Incluso si usas tabuladores, sólo figurarán como un único espacio en blanco.

Es más, y esto quizás te sorprenda: aunque utilices la tecla ENTER para tratar de abrir líneas, no van a provocar ningún efecto en el resultado final y sólo serán consideradas como un único espacio en blanco seguido también. Observalo en el siguiente ejemplo haciendo clic sobre el enlace.

Este es el código que genera esa página:

<!DOCTYPE html>
<html>
<head>
<title>Haciendo pruebas</title>
</head>
<body>
La casa        de          la

pradera

era 
una

serie

antológica de años      memorables atrás...

Siempre me he preguntado cuál era mejor, "La casa de la pradera"
o "Mazinger Z".
</body>
</html>

Tanto espacio en blanco no ha servido de nada. Tampoco hemos sido capaces de insertar un solo salto de línea por mucho que lo hemos intentado. Hará falta recurrir a nuevas etiquetas que explicaremos proximamente.

Para terminar por hoy, quiero mostrarte la forma correcta de trabajar a la hora de utilizar un editor de texto para el código y visualizar los resultados en el navegador.

Hay que tener abiertas las dos ventanas: el editor y el navegador. No hace falta que estén visibles simultáneamente si no dispones de espacio suficiente en la pantalla; bastará con minimizar la que no esté activa en ese momento.

Cuando modifiques el código y quieras comprobar su efecto, no es necesario que abandones el editor; guarda el fichero pero no lo cierres. Para visualizar el resultado en la ventana del navegador, simplemente recarga la página haciendo clic en el botón de actualizar.

Javier Montero Gabarró


Fecha de la última revisión: 30 de noviembre de 2012


HTML: Espacios en blanco que no sirven para nada


El texto de este artículo se encuentra sometido a una licencia Creative Commons del tipo CC-BY-NC-ND (reconocimiento, no comercial, sin obra derivada, 3.0 unported)


El Club del Autodidacta


Índice completo de artículos relacionados con HTML.

HTML: Estructura básica de una página web

Objetivo: presentar la estructura de una página web.

Revisemos el código del artículo anterior:

<!DOCTYPE html>
<html>
<head>
<title>Mi primerísima página web</title>
</head>
<body>
Entre esto y un sitio web completo, no media más que trabajo...
</body>
</html>

En la primera línea nos encontramos la definición de tipo de documento (DTD).

<!DOCTYPE html>

Quédate con la idea de que sirve para informar al navegador de que el código contenido en la página se rige bajo los estándares del recientemente aparecido HTML5. Muy simple y fácil de recordar, pero hasta hace nada era compleja, larga e imposible de retener en la cabeza. Cuando hablemos de la evolución de la web lo entenderás mejor.

A continuación podemos localizar un bloque delimitado por etiquetas.

<html>
...
...
</html>

El alma del lenguaje HTML son las etiquetas.

Las etiquetas, rodeadas entre los símbolos < y > poseen cada una una significación particular que iremos mostrando en las sucesivas entregas. Arriba vemos, destacada, la etiqueta <html>.

Por lo general, siempre que aparece una etiqueta tiene que existir otra igual más adelante, de modo que entre las dos determinan el bloque sobre el que ejercen su función. Por ejemplo, existe una etiqueta que provoca que el texto se escriba en negrita. Todo el texto que esté comprendido entre la etiqueta de apertura y la de cierre se verá afectado por la etiqueta y, en consecuencia, se mostrará en negrita.

Una etiqueta de cierre presenta una diferencia respecto a la de apertura, y es que después del símbolo < inicial figura una barra inclinada / (la que está sobre el número 7, el slash). Fíjate, en el código de arriba, que la etiqueta <html> se cierra, abajo del todo, con </html>.

Las etiquetas pueden escribirse indistintamente en mayúsculas o minúsculas. No obstante, te recomiendo que lo hagas siempre del segundo modo, como en el ejemplo. Aunque la última especificación de HTML permite el uso de ambas, indistintamente, deberás ser riguroso en el uso de minúsculas si optas por versiones basadas en XML.

La función de la etiqueta <html> es delimitar el principio y el final de todo el código HTML. La abrimos justo al comienzo (después del DTD) y la cerramos al final.

<html>
<head>
...
</head>
<body>
...
</body>
</html>

Dentro del bloque formado por una etiqueta de apertura y otra de cierre pueden existir otros bloques de etiquetas. Observa cómo, dentro de <html></html>, figuran dos bloques independientes, uno determinado por el par de etiquetas <head></head> y otro por el par <body></body>: la cabeza y el cuerpo, respectivamente, de nuestra página HTML.

<head>
<title>Mi primerísima página web</title>
</head>

Una de las funciones de la cabeza es indicar el título de la página. Para hacerlo, insertamos dentro de <head> </head> el par de etiquetas <title></title>. El texto que escribamos entre estas será el título de la página.

<body>
Entre esto y un sitio web completo, no media más que trabajo...
</body>

Dentro del cuerpo de la página aparece el contenido en sí de la misma, como puedes observar.

Hemos presentado la estructura básica de una página web. Fíjate que han sido relativamente muchas líneas para una única que devolverá el navegador. Por eso te dije, en la entrega anterior, que guardases una copia como plantilla. Las páginas que creemos tendrán esa misma estructura básica, y así nos ahorraremos tener que repetir todo el código común.

Javier Montero Gabarró


Fecha de la última revisión: 19 de octubre de 2012


http://elclubdelautodidacta.es/wp/2011/08/html-estructura-basica-de-una-pagina-web/


El texto de este artículo se encuentra sometido a una licencia Creative Commons del tipo CC-BY-NC-ND (reconocimiento, no comercial, sin obra derivada, 3.0 unported)


El Club del Autodidacta


Índice completo de artículos relacionados con HTML.