Podemos decir, por lo tanto, que el HTML es el lenguaje usado por los navegadores para mostrar las páginas web al usuario.

XHTML

¿Qué es el HTML?

HTML es el lenguaje con el que se escriben las páginas web. Las páginas web pueden ser vistas por el usuario mediante un tipo de aplicación llamada navegador.

Podemos decir, por lo tanto, que el HTML es el lenguaje usado por los

navegadores para mostrar las páginas web al usuario.

Un fichero HTML contiene el texto más una serie de códigos que permiten dar formato a la página en el navegador como, por ejemplo, distribuir en columnas, poner caracteres en negrita, asignar colores, rodear una imagen con texto...

Inconvenientes del HTML

Inconveniente del HTML: diversidad de navegadores presentes en el mercado (Internet Explorer, Mozilla Firefox, Google Chrome, Opera, Safari...) los cuales no son capaces de interpretar un mismo código de una manera unificada.

Esto obliga al webmáster a, una vez creada su página, comprobar que ésta puede ser leída satisfactoriamente por todos los navegadores o, al menos, los más utilizados.

¿Qué necesito para programar una web?

HTML es únicamente texto, lo que significa que bastará simplemente con el BLOC DE NOTAS (en Windows) para crear una página web. Existen editores específicos que hacen la tarea más sencilla, pero es de suma importancia asentar unos conocimientos básicos para familiarizarnos lo antes posible con el HTML.

¿Y por qué no usar un editor de HTML como Dreamweaver

o FrontPage, que facilitan mucho más la tarea?

A la pregunta sobre si es necesario hoy en día dominar, o al menos tener una idea de cómo está estructurado el lenguaje html la respuesta es rotundamente SÍ. Francamente, es muy conveniente tener una idea básica.

Igual que cuando conducimos un coche, sin necesidad de ser unos diplomados en mecánica, al menos sabemos qué son los componentes principales del coche y para qué sirven...

Resulta, pues, de suma importancia aprender HTML sin utilizar estas herramientas "más potentes", que lo que hacen es generar código de forma automática. Una vez asentadas las bases sobre el lenguaje procederemos a utilizar estos editores más "avanzados".

Los editores HTML permiten diseñar una página de la misma forma que compondríamos un fichero con Word, pudiendo colocar imágenes, utilizar negritas, cursivas...

Algunas de las diferencias entre programar con un editor de HTML o haciéndolo "de la forma tradicional" son las siguientes:

HTML EDITOR HTML

a.- Se domina con mayor precisión el código y queda mucho más limpio, sin elementos innecesarios. Si se domina bien nunca se tendrán problemas para realizar cualquier

cosa que se nos ocurra. El programador

domina a la máquina.

b.- Su aprendizaje es más complejo, más lento y, a medida que se va avanzando, la complejidad va creciendo.

a.- El código es de peor calidad, incluso llegando a tener errores más o menos visibles. La máquina domina el trabajo y al programador.

b.- Manejo y aprendizaje rápido.

Sin embargo, a medida que se profundiza, llega un punto en que se combinan ambas técnicas hasta acabar dominando las dos.

Características del lenguaje HTML

HTML es un lenguaje de marcas orientado a la publicación de documentos en Internet. La mayoría de las marcas son semánticas. Es un lenguaje extensible, al que se le pueden añadir nuevas características, marcas y funciones, dependiendo de la experiencia y la habilidad del programador.

Los documentos HTML están formados por una serie de bloques de texto (titulares, párrafos, listas...). La interpretación de estas entidades se deja al navegador.

HTML es un lenguaje estructurado

.

HTML utiliza etiquetas o marcas, que consisten en breves instrucciones de comienzo y final, mediante las cuales se determina la forma en la que debe aparecer el texto en el navegador, así como las imágenes y demás elementos.

Anatomía de una página web

Una página web es superficialmente parecida a cualquier otro documento: un texto, unas imágenes, todo compuesto de una determinada manera.

¿Qué sucede con las imágenes y otros añadidos que la página web, aparentemente, "contiene"? Éstos son ficheros adicionales que NO están dentro del fichero html; están enlazados con un código que indica al navegador qué imagen debe mostrarse, dónde está, sus dimensiones, si es o no un enlace...

Viendo el código de una página web

Aunque signifique adelantarse a los acontecimientos, es interesante señalar que con una simple acción podemos ver el código fuente de las páginas, es decir, ver cómo están hechas, ver su "esqueleto". Para ello, bastará con abrir una página en el navegador y tras hacer click con el botón derecho escoger la opción "Ver código fuente". Algo tan sencillo como esto

Archivos HTML

Etiquetas (o tags) HTML

Un lenguaje de etiquetas es un conjunto de palabras o caracteres que se colocan junto al texto de un documento para especificar una propiedad del mismo.

Toda etiqueta se identifica porque está encerrada entre los signos menor

que y mayor que (< >), y algunas tienen atributos que pueden tomar algún

valor

.

Cada etiqueta tiene un significado: <b> significa negrita, <p> significa párrafo, <a> definirá un enlace...

¿Cómo se aplican las etiquetas?

En general las etiquetas se aplicarán de dos formas especiales:

1.- Se abren y se cierran, encerrando entre ellas un contenido. Por ejemplo: <b>Esto sería un texto en negrita</b> que se vería en su navegador web como Esto sería un texto en negrita.

2.- No pueden abrirse y cerrarse, como <hr /> que se vería en el navegador web como una línea horizontal.

Existen otras etiquetas que no tienen su correspondiente de cierre, como <img /> para las imágenes, o <br /> para los saltos de línea; las veremos más adelante. Esto ocurre porque un salto de línea o una imagen no empiezan y acaban más adelante sino que sólo tienen presencia en un lugar puntual.

Cada elemento de un documento HTML consta de una etiqueta de comienzo, un bloque de texto y una etiqueta de fin con el siguiente formato:

<etiqueta> bloque de texto </etiqueta>

Así que la página web, vista con un editor de texto, contiene una mezcla de texto normal y una serie de códigos.

Atributos de los TAGS

Muchos elementos tienen atributos que definen propiedades del elemento: <etiqueta atributo="valor"> bloque de texto </etiqueta>

Un atributo no es más que un parámetro incluido en el interior de la etiqueta que ayuda a definir el funcionamiento de la etiqueta (o TAG) de una forma personalizada.

El valor de los atributos deberá ir entre comillas.

Estructuración e indentación del código

Las etiquetas tienen que seguir un orden piramidal; las primeras que se abren son las últimas que se cierran.

<etiqueta 1> <etiqueta 2> <etiqueta 3> Contenido </etiqueta 3> </etiqueta 2> </etiqueta 1>

Sin embargo, existen reglas estructurales que indican dónde pueden y no pueden ir los elementos. Tenemos el ejemplo de los títulos, que son independientes entre ellos, no pudiendo contenerse unos a otros. El siguiente código sería incorrecto:

<h1>

<h2>

Contenido

</h2>

HTML: Estructura básica de un fichero

Todo documento HTML deberá estar delimitado por las etiquetas <html> y </html>. Además deberá definirse:

1.- Encabezado (<head> </head>): contendrá información de caracter informativo y no se mostrará en el navegador). Entre otros:

• Título (<title> </title>)

• Palabras clave para los buscadores • Referencias a archivos externos

2.- Cuerpo (<body> </body>): será donde colocaremos nuestro texto e imágenes delimitados a su vez por otras etiquetas (como las que hemos visto anteriormente).

El resultado será, pues, un documento que seguirá la siguiente estructura (recordar respetar la indentación del texto: permitirá una mejor comprensión del código y un óptimo mantenimiento posterior):

<html>

<head>

Contenido que no se mostrará: título, información para buscadores... </head>

<body>

Contenido que se mostrará: textos, tablas, listas, imágenes... </body>

Primer archivo HTML

Una vez vistas las características que debe cumplir un fichero HTML y la estructura que debe seguir, ya podemos proceder a crear nuestro primer archivo HTML.

Supongamos que queremos crear una página que deba cumplir los siguientes requisitos: 1.- Título: Bienvenidos al curso de diseño

2.- Contenido: Esta es mi primera página en HTML Realizaremos los siguientes pasos:

1.- Abrir el bloc de notas: Inicio - Todos los programas - Accesorios - Bloc de Notas

2.- Escribir todas las etiquetas necesarias y obligatorias que debe contener todo fichero HTML. Es muy importante anidar los tags para que el código sea legible y siga una estructura ordenada. Lo ideal es, para cada nivel de indentación, un nivel de tabulación.

El resultado de nuestro fichero debería quedar de la siguiente forma:

<html>

<head>

<title>Bienvenidos al curso de diseño</title> </head>

<body>

Esta es mi primera página en HTML </body>

</html>

3.- Guardar el archivo en formato HTML (Archivo - Guardar como...). Bastará con seleccionar dónde almacenar el fichero y guardarlo con el nombre primer-ejemplo.html. 4.- Acceder a la ruta donde se ha almacenado el fichero y abrirlo con el navegador. El resultado será algo así, dependiendo del navegador:

Posibles problemas con la extensión de archivos HTML y

Windows

En ocasiones el Bloc de Notas puede ser que no almacene el contenido en formato HTML y lo guarde como fichero de texto (extensión txt). Para conseguir tener el control de las extensiones de los ficheros procederemos de la siguiente manera:

Mi PC - Ver - Opciones de Carpeta - Ver - deseleccionar la opción "Ocultar extensiones para los tipos de archivos conocidos"

Recomendaciones sobre el nombre de los ficheros HTML

Es aconsejable que cada archivo lleve asociado un nombre que haga referencia al contenido que se quiere mostrar (primer-ejemplo.html). Además, para separar palabras es aconsejable el uso del guión medio (-) y no el guión bajo (_). En capítulos posteriores se explicará el por qué.

Texto

Formato de párrafos en HTML

Formatear un texto pasa por tareas tan evidentes como definir los párrafos, justificarlos, introducir viñetas, numeraciones o bien poner en negrita, itálica...

Párrafos (<p> y </p>) y saltos de línea (<br />)

Cada párrafo va definido entre las etiquetas <p> y </p>.

Para insertar un salto de línea, lo haremos con la etiqueta simple <br />.

La diferencia entre ambos es que br hace un cambio de línea mientras que p inserta una línea en blanco.

Es necesario aclarar que insertar un salto de línea cuando se esté creando el código no querrá decir que el navegador lo muestre como tal. Véase el ejemplo; supongamos que se escribe esto en el Bloc de Notas:

<p>Esto es un simple

ejemplo sin saltos de línea</p>

Se vería en el navegador de la siguiente forma: Esto es un simple ejemplo sin saltos de línea

Si quisiéramos mostrarlo con saltos de línea el código debería ser:

<p>Esto es un <br />simple<br />ejemplo CON saltos de línea</p>

Y el resultado en el navegador, ahora sí: Esto es un

simple

ejemplo con saltos de línea

Justificación de párrafos

Los párrafos pueden justificarse a la izquierda, centro o derecha. Para ello deberemos definir el atributo align dentro de la etiqueta <p> especificando dicha justificación en el

Justificación a la derecha (align="right")

Ejemplo:

<p align="right">Ejemplo de justificación a la derecha</p>. El resultado en el navegador sería:

Ejemplo de justificación a la derecha

Justificación al centro (align="center")

Ejemplo:

<p align="center">Ejemplo de justificación al centro</p>. El resultado en el navegador sería:

Ejemplo de justificación al centro

Justificación a la izquierda (align="left")

Ejemplo:

<p align="left">Ejemplo de justificación a la izquierda</p>. El resultado en el navegador sería:

Ejemplo de justificación a la derecha

El valor de los atributos deberá ir entre comillas. En algunas ocasiones necesitamos especificar algunos atributos para el correcto funcionamiento de la etiqueta. En otros casos, el propio navegador toma un valor definido por defecto. Para el caso de align, el valor por defecto es left.

CASO: Múltiples párrafos con un mismo formato

Supongamos que queremos alinear 5 párrafos seguidos a la derecha. Tendremos dos opciones:

• Alinear cada uno de ellos con su correspondiente atributo (right) <p align="right">Párrafo 1</p>

<p align="right">Párrafo 2</p> <p align="right">Párrafo 3</p> <p align="right">Párrafo 4</p> <p align="right">Párrafo 5</p>

• Utilizar la etiqueta <div>: de esta manera conseguiremos simplificar nuestro código y evitar introducir continuamente el atributo align sobre cada una de nuestros párrafos:

<div align="right"> <p>Párrafo 1</p> <p>Párrafo 2</p> <p>Párrafo 3</p> <p>Párrafo 4</p> <p>Párrafo 5</p> </div>

PRÁCTICA 1: Confeccionar una página que muestre en un párrafo datos referentes a tus estudios y en otro párrafo tu nombre y mail

PRÁCTICA 2: Queremos construir una página que tenga, por este orden: 2 Párrafos centrados

3 Párrafos alineados a la derecha Un salto de línea triple

Encabezados

Las cabeceras fueron creadas para representar con tamaño adecuado los títulos y/o

subtítulos de una página.

Estos encabezados o cabeceras representan mediante una H (de cabecera - header en inglés) más un número del uno al seis dependiendo de la importancia dentro de nuestro contenido. Las cabeceras son, pues, las siguientes: <h1>, <h2>, <h3>, <h4>, <h5> y <h6>, siendo 1 la cabecera más relevante y 6 la que menos.

Las cabeceras toman un rol importante en el posicionamiento web, pues cada header representa una importancia dentro de nuestro contenido.

Según los estándares web, debe definirse únicamente un título H1 por cada

página.

Tal y como se comentó en capítulos anteriores, un encabezado no puede estar incluido dentro de otro; deben ser independientes.

Ejemplos

Un encabezado h1 se definará de la siguiente forma: <h1> Ejemplo de título h1 </h1>

Ejemplo de h1 a h6 | Combinando encabezados y párrafos

El atributo align

El atributo align funciona igual que para los párrafos. De esta manera, si quisiéramos alinear un encabezado h1 en el centro, por ejemplo, el tag quedaría de la siguiente manera:

PRÁCTICA1:

Confeccionar una página que contenga 1 título de primer nivel <h1> y luego 2 títulos de nivel <h2>. Definir un párrafo para cada título de segundo nivel.

PRÁCTICA2:

Confeccionar el titular de un periódico con título de nivel 1 y título "Diario online".

Luego definir dos títulos de segundo nivel con los textos "Noticias políticas" y "Noticias deportivas".

Para la sección de política definir el titular de tercer nivel "resultado elecciones europeas" y para el apartado de deporte el titular "últimos fichajes" (también de nivel 3). Incluir un párrafo para cada una de las secciones de nivel 3.

Formateando textos

En este capítulo aprenderemos las etiquetas básicas para dar estilos negrita, cursiva, subrayado y tachado estandarizado a nuestros textos.

Lamentablemente el estilo de fuente aplicado mediante HTML quedó obsoleto luego de la aparición de CSS, siendo reemplazado por las siguientes propiedades:

<b> </b>, reemplazado por la propiedad CSS font-weight:bold (negrita);

<i> </i>, reemplazado por la propiedad CSS font-style:italic (itálica o cursiva); <u> </u>, reemplazado por la propiedad CSS text-decoration:underline (subrayado); <s> </s>, reemplazado por la propiedad CSS text-decoration:line-through (tachado);

HTML se utilizará para estructurar el contenido mientras que CSS aplicará

formatos (colores, estilos...).

En próximos capítulos profundizaremos sobre las hojas de estilo.

Caso especial, la etiqueta negrita (<b>)

Ésta es la única etiqueta que se sigue utilizando en el lenguaje HTML. El motivo es para informar a los principales buscadores de la importancia de esta palabra en el contenido del documento.

Recuerda que para dar estilos al texto HTML cumpliendo los estándares

usaremos las hojas de estilo (CSS).

Separador de contenido (<hr />)

El separador de contenidos, más que una etiqueta única, es una herramienta útil para ordenar y estructurar contenidos del sitio cuando son muy extensos.

La etiqueta muestra una franja horizontal que imprime una línea divisora. Se representa mediante <hr />.

Supongamos que esto es la primera parte

<hr />

Y ésta es la segunda Se vería así:

Supongamos que esto es la primera parte Y ésta es la segunda

Colores y tipos de fuente

Como hemos comentado en el apartado anterior, para aplicar estilos lo más óptimo es el uso de las hojas de estilo. Sin embargo, daremos una pincelada sobre cómo hacerlo directamente desde HTML.

La etiqueta <font>

<font> es una etiqueta obsoleta reemplazada por las hojas de estilo. Es común encontrarnos páginas cuyo código aún las incluyen. No es erróneo, pero su uso implicará no cumplir los estándares. Dicha etiqueta incluye atributos como "face" (para especificar el tipo de fuente), "size" (para el tamaño) o color.

Como el HTML es un lenguaje sólo para estructurar textos y no para un

estilo visual adecuado, se ha eliminado, al igual que otras etiquetas y/o

atributos que tienen relación con el aspecto visual de una página web.

Véase el siguiente ejemplo:

El resultado sería el siguiente:

TEXTO CON FORMATO

Subíndicies <sub> y superíndices <sup>

El subíndice es una letra, número o signo que se coloca a la derecha y en la parte inferior de un símbolo matemático, químico u otro. El texto irá entre las etiquetas _y. Por otra parte, el superíndice es un número o signo que se coloca en el extremo superior derecho de una palabra o número como indicación de elevación a potencia u otro dato. Se hará mediante las etiquetas ^y.

El agua está formada por H₂O.

En la tierra hay unos 1.360.000.000 km³ de este compuesto químico.

El agua está formada por H2O.

Listas

¿Qué es una lista?

Una lista es un conjunto de datos y/o información ordenados verticalmente. Esta

información puede presentarse de 3 maneras: en listas desordenadas, ordenadas y de

definición.

Las listas son utilizadas para citar, numerar y definir.

Listas desordenadas

Las listas desordenadas son también las más usadas. Se delimitan por las etiquetas <ul> y </ul> (UL = Unordered List), y cada uno de los atributos se citará mediante la etiqueta <li> y </li> (LI = List Item).

Este tipo de listas no siguen ningún orden lógico. Un ejemplo sería el siguiente:

<h1>Países del mundo</h1>

<ul>

<li>Australia</li> <li>España</li> <li>Brasil</li> </ul>

Listas dentro de listas (SUBLISTAS)

Una anidación de listas consiste en crear la misma estructura de una lista (ordenada o desordenada) dentro de un ítem de lista del primer nivel.

Esto quiere decir que integraremos una etiqueta <ul> con sus respectivos ítems de listas dentro de una etiqueta <li>.

Podemos crear tantos niveles como queramos siguiendo bien la estructura lógica de las listas, como en el siguiente ejemplo.

<h1>Países del mundo</h1>

<ul>

<li>Australia</li>

<li>España

<ul>

<li>Zaragoza</li> <li>Sevilla</li> <li>Lleida</li> </ul>

</li>

<li>Brasil</li> </ul>

El atributo TYPE para listas desordenadas

Podemos definir el tipo de viñeta empleada para cada elemento. Para ello debemos

especificarlo por medio del atributo type incluido dentro de la etiqueta de apertura <ul> (<ul type="tipo de viñeta">), si queremos que el estilo sea válido para toda la lista,o dentro le la etiqueta <li> (<li type="tipo de viñeta">) si queremos hacerlo específico de un solo elemento.

A continuación se definen los posibles valores de TYPE para listas desordenadas: circle

disc (es el valor que se toma por defecto)

square

Vamos a ver un ejemplo de lista con un cuadrado en lugar de la clásica viñeta redondeada. Además, en el último elemento colocaremos un círculo. Para ello vamos a colocar el atributo type en la etiqueta <ul>, con lo que afectará a todos los elementos de la lista:

<ul type="square">

<li>Elemento 1</li> <li>Elemento 2</li> <li>Elemento 3</li>

<li type="circle">Elemento 4</li> </ul>

El resultado será el siguiente:

ƒ Elemento 1

ƒ Elemento 2

ƒ Elemento 3

o Elemento 4

PRÁCTICA: Confeccionar una página HTML que contenga una lista no ordenada con cuatro lenguajes de programación populares. Agregar al principio un título de segundo nivel.

Listas ordenadas

Las lista ordenadas se utilizan para seguir un orden lógico. Estas listas se delimitarán por <ol> y </ol> (OL = Ordered List). Los tags para definir los items no variarán de las listas ordenadas (<li> y </li>).

Un ejemplo sería el siguiente:

<h1>Lista de países con más población</h1>

<ol>

<li>China</li> <li>India</li> <li>EE.UU</li> </ol>

El resultado puede verse aquí:

Listas dentro de listas (SUBLISTAS)

El concepto es el mismo que para las listas desordenadas: <h1>Lista de países con más población</h1>

<ol>

<li>China</li>

<li>India

<ol>

<li>Damán</li> <li>Pondicheri</li> <li>Orisa</li>

</ol>

</li>

<li>Brasil</li> </ol>

Combinando listas ordenadas y desordenadas

Es posible combinar listas ordenadas y no ordenadas sin ningún tipo de impedimento: <h1>Lista de la compra</h1>

<ol>

<li>Leche</li>

<li>Frutas

<ul>

<li>Manzana</li> <li>Pera</li> <li>Melocotón</li> </ul>

</li>

<li>Carne y pescado</li> </ol>

Clica aquí para ver el resultado en el navegador:

El atributo TYPE para listas ordenadas

Las listas ordenadas no sólo se pueden ordenar con números. También se pueden utilizar letras y numeración romana tanto en mayúsculas como minúsculas. Para esto se utiliza el atributo TYPE del elemento <ol> con los siguientes valores, entrecomillados:

type="1" : Para listas ordenadas con números (1, 2, 3...). Es el valor que se toma por defecto.

type="A" : Para listas ordenadas con letras mayúsculas (A, B, C...) type="a" : Para listas ordenadas con letras minúsculas (a, b, c...)

type="I" : Para listas ordenadas con numeración romana (I, II, III, IV, V...)

type="i" : Para listas ordenadas con numeración romana minúscula (i, ii, iii, iv, v...) El formato será el siguiente:

<ol type="a">...</ol> <ol type="A">...</ol> <ol type="i">...</ol> <ol type="I">...</ol>

El ejemplo muestra listas con los diferentes valores que puede tomar el atributo TYPE.

El atributo START para listas ordenadas

Puede que en algún caso deseemos comenzar nuestra enumeración por un número o

letra que no tiene por qué ser necesariamente el primero de todos. Para solventar esta

situación, podemos utilizar un segundo atributo, start, que tendrá como valor un número. Este número, que por defecto es 1, corresponde al valor a partir del cual comenzamos a definir nuestra lista. Para el caso de las letras o los números romanos, el navegador se encarga de hacer la traducción del número a la letra correspondiente. Véanse los siguientes ejemplos:

Caso 1:<ol start="4">...</ol>

Caso 2: <ol type="A" start="3">...</ol>

Caso 3: <ol type="i" start="4">...</ol>

Caso 4: <ol type="I" start="9">...</ol>

Caso 1: lista numerada, empezando por 4 (recordar que el atributo type por defecto es la numeracion común).

Caso 2: lista alfabética, empezando por C.

Caso 3: lista románica en minúsculas, empezando por IV.

Caso 4: lista románica en mayúsculas, empezando por IX. El resultado puede verse aquí:

Listas de definición

Cada elemento es presentado junto con su definición, como si de un diccionario se tratase. Estas listas se delimitan por <dl> y </dl> (definition list). La etiquetas del elemento y su definición son <dt> (definition term) y <dd> (definition definition) respectivamente. Véase el ejemplo:

<h1>Diccionario de la RAE</h1>

<dl>

<dt>Animal</dt>

<dd>Ser orgánico que vive, siente y se mueve por su propio impulso</dd> <dt>Persona</dt>

<dd>Perteneciente al hombre, propio de él</dd> </dl>

Así lo mostrará el navegador:

PRÁCTICA: Confeccionar una lista de definición con 3 conceptos relacionados con "programas para Windows" y, para cada uno de ellos, hacer una breve descripción.

Caracteres especiales

Caracteres especiales

Una página web ha de poder verse independientemente del país desde donde se esté recibiendo la visita. Cada región utiliza un conjunto de caracteres distintos y, para solventar este problema, HTML nos ofrece una serie de caracteres para que cualquier contenido pueda verse desde cualquier parte del mundo.

Además, existen ciertos caracteres en HTML que no pueden mostrarse directamente para que no se creen conflictos, como pueden ser '<' o '>', ya que entrarían en conflicto con los TAGS HTML.

Los más habituales son los siguientes:

&amp; se utilizará para imprimir el carácter &

&lt; se utilizará para imprimir el carácter < . (lt = "Less Than" o "menor que") &gt; se utilizará para imprimir el carácter > . (gt = "Greater Than" o "mayor que")

Aunque existen muchos más caracteres no imprimibles (acentos, ñ, letras griegas), los citados anteriormente son los más comunes.

PRÁCTICA: Crea un documento que tenga un resultado como el siguiente:

Me encanta aprender el <HTML> & XHTML estandarizado para todos los navegadores e incluso... teléfonos móviles

Vínculos

Vínculos: ¿qué son?

Un vínculo es una conexión desde un recurso web a otro. Aunque es un concepto simple, el vínculo ha sido una de las principales fuerzas que ha hecho posible el éxito de la Web.

Para colocar un enlace se usarán las etiquetas <a> y </a>.

El atributo href

Dentro de la etiqueta de apertura deberemos especificar el destino del enlace mediante el atributo href.

La sintaxis sería la siguiente:

<a href="destino" atributo="valor" ...> texto o imagen </A>

El texto o imagen Será la parte que deberemos pulsar para acceder al enlace. El destino será a la página o archivo a la que se accederá.

El atributo target

La atributo target especificará en qué ventana se va abrir el enlace. Los valores para “target” pueden ser los siguientes:

target = "_self" : El nuevo documento se abrirá en la misma ventana. Es el valor que se tomará por defecto.

target = "_blank" : Fuerza que el documento referenciado por el enlace sea mostrado en una nueva ventana del navegador.

target = "_parent" : Usado para frames (obsoleto) Este valor provoca que el documento sea mostrado en el FRAMESET padre del frame actual.

target = "_top" : Usado para frames (obsoleto). El documento solicitado se cargará en la pantalla actual, ocupando toda la ventana y destruyendo la estructura de frames anterior.

T ó v E m < < Y C Tal y como óptimo a la valor "_bla El resultad misma pági <a href="p <a href="p Y el resulta Click aquí p o se ha com a hora de ank" (puest do del sigu ina en que pagina-des pagina-des ado sería e para abrir mentado e indexar en to que si n uiente ejem e nos encon tino.html" tino.html" el siguiente en la mism en anterior n buscador no se dice mplo sería ntramos): ">Click aquí " target="_s e: ma página res sesione res. Por lo lo contrari a el mismo í para abrir self">Click aq es, el uso d tanto, ún io se aplica o para amb en la misma quí para abr

de frames nicamente ará "_self" bos casos a página</a rir en la mis está antic deberá re " por defec (abrir el d a> ma página< cuado y no ecordarse cto). destino en /a> es e el la

El atributo title

Antes de continuar y, para no crear confusiones, debe aclararse que este atributo no tiene nada que ver con el tag title que se define en la cabecera (que vimos aquí).

Mediante esta propiedad podrá indicarse un mensaje explicativo sobre el destino del enlace. Este mensaje aparecerá cuando el puntero del ratón se posicione sobre el vínculo.

Supongamos que queramos crear un enlace que cumpla las siguientes condiciones:

1.- Texto para el enlace: "Ir a Google"

2.- Dirección de destino: http://www.google.es

3.- Texto al situar el mouse encima del enlace: "Click para abrir en nueva ventana" 4.- El vínculo deberá abrirse en una nueva página.

La solución sería:

<a href=http://www.google.es title="Click para abrir en nueva ventana"

target="_blank">Ir a Google</a>

Tipos de enlaces

Los vínculos o enlaces pueden clasificarse en función de su destino (clic sobre cada uno de ellos para ver su funcionamiento):

1.- Enlaces internos: se dirigen a otras partes dentro de la misma página (son vínculos

dentro de una misma página).

2.- Enlaces locales: se dirigen a otras páginas del mismo sitio web. 3.- Enlaces remotos: dirigidos hacia páginas de otros sitios web. 4.- Enlaces a archivos.

Enlaces internos

Los enlaces internos son aquellos que apuntan a un lugar dentro de la misma página. De esta forma, el visitante podrá navegar de forma rápida y acceder rápidamente a las diferentes secciones de la misma.

Se utilizan cuando una misma página es tan extensa que es difícil acceder con facilidad a sus contenidos (Wikipedia es un ejemplo).

Para crear un vínculo de este tipo es necesario, aparte del enlace de origen propiamente dicho, un segundo enlace que será colocado en el destino. A modo de ejemplo:

1.- Será necesario fijar el punto de la página al cual va a ir el enlace (destino). Para ello se usará la siguiente etiqueta:

<a name="enlaces-internos"> </a>

2.- Además deberá definirse el punto (origen) que nos lleve a ese destino ya creado: <a href="#enlaces-internos">ir abajo</a>

El corchete (#) indica al navegador que el enlace apunta a una sección/párrafo/parte de la misma página.

Estos vínculos son poco utilizados: es más óptimo mostrar la información justa en cada una de las páginas (mejorando así los tiempos de carga y evitando condensar la información en un solo archivo).

Enlaces locales (a una página del mismo sitio web)

Este tipo de enlaces permiten crear vínculos entre páginas del mismo sitio. La sintaxis no diferirá de lo ya explicado hasta el momento:

<a href="ruta-destino"> texto o imagen </a>

“ruta-destino” será una página/imagen/archivo que estará ubicado en nuestro servidor.

La estructura de todos los archivos que conforman el sitio web estará jerarquizada en una serie de carpetas: una para las páginas HTML, otra para las imágenes, otra para los archivos Javascript, otra con archivos de configuración...

Ejemplo 1

El siguiente ejemplo muestra la estructura de carpetas para el sitio www.luiscanada.com:

Supóngase que nos encontramos en la página:

www.luiscanada.com/cursos/parrafos.html y consideremos los siguientes ejemplos:

1.- Ir a la página 'listas.html': <a href="listas.html"> Click para ir a las listas </a>

2.- Ir a la página 'ejemplo1.html': <a href="ejemplos/ejemplo1.html"> Ver el ejemplo </a>

3.- Ir a la página 'index.html' de la carpeta 'otros': <a href=".../otros/index.html"> Ir a otros </a>

2.- Si la página está en una subcarpeta de la página origen se deberá especificar la ruta completa desde el punto de partida hasta llegar a la página destino.

3.- Si la página destino se encuentra en una carpeta no incluida ni incluyente de la página origen, deberá retrocederse los niveles necesarios mediante “../” hasta llegar a una carpeta que contenga a la página destino y, a partir de ahí, proceder como en el punto 2.

Ejemplo 2

Enlace desde index.html hacia yyy.html: <a href="seccion1/paginas/yyy.html"> Ir de index a yyy </a>

Enlace desde xxx.html hacia yyy.html: <a href="../seccion1/paginas/yyy.html"> Ir de xxx a yyy</a>

Enlace desde yyy.html hacia xxx.html: <a href="../../seccion2/xxx.html"> Ir del yyy a xxx</a>

Enlazando a una sección concreta de otra página del mismo

sitio

Los enlaces locales pueden a su vez apuntar ya no a la página en sí sino más concretamente a una sección específica. Este tipo de enlaces resultan ser un híbrido de interno y local. La sintaxis será del tipo:

<a href="pagina-destino.html#seccion-destino"> contenido </a>

En el código anterior se estaría enlazando a la sección “sección-destino” de la página “página-destino.html”. Dicha página se encontraría en la misma carpeta que la página de origen.

Enlaces externos

Los enlaces externos son aquellos cuyo destino no está incluido en nuestro sitio web. Bastará con indicar la dirección a la que se quiere acceder (URL) mediante el atributo href, como se ha ido haciendo hasta ahora. Además podrán utilizarse otros atributos (title, target...): <a href="http://www.google.com" ... > Ir a Google </a>

http:// indica el protocolo por el cual accede a la página destino. También podría accederse mediante otros protocolos como el FTP (ftp://).

PRÁCTICA: Confeccionar una lista no ordenada con 4 países europeos. Para cada uno de ellos, disponer una lista ordenada de 3 elementos con hipervínculos a sitios que contengan información de éstos.

Enlaces a direcciones de correo

Los enlaces mailto han quedado obsoletos por los inconvenientes que generar, siendo

reemplazados por formularios de contacto. Se definen de la siguiente forma: <a href="mailto:mi-email@gmail.com"> Envíame un email </a>

Algunos de los problemas del uso de este tipo de vínculos son:

1.- Por defecto abren la aplicación de gestor de correo (Outlook en Windows, Mail en Mac o Evolution en Linux), lo que implica que deberá tenerse configurada una cuenta de email en la aplicación, algo que no sucede en la mayoría de los casos.

2.- Existen multitud de bots que rastrean las páginas en busca de este tipo de enlaces para posteriormente hacer spam.

Por lo tanto, se evitarán los enlaces mailto y se reemplazarán por formularios de contacto.

Imágenes

Imágenes

En el diseño de una página muchas veces interesará incluir imágenes. Los formatos más comunes y que interpretan los navegadores son JPG, GIF y PNG, cada uno con sus pros y sus contras.

Inserción de imágenes en HTML

Para insertar una imagen en HTML se hará mediante la etiqueta <img /> (image). Esta etiqueta no posee su cierre correspondiente. Obligatoriamente deberemos especificar el atributo src (source), cuyo valor será la ubicación del archivo de imagen:

<img src="ruta-de-la-imagen" />

La imagen podrá estar ubicada en nuestro servidor o alojada en uno externo. Para indicar la ruta lo haremos de la misma forma que se definió en los enlaces.

Uso y abuso de imágenes

Las imágenes dan estilo y atraen al usuario. Sin embargo, abusar de ellas provocará tiempos de carga elevados, saturación visual, poca accesibilidad y/o usabilidad.

Es aconsejable utilizar las imágenes únicamente como apoyo visual para el usuario.

Recomendaciones para el alojamiento de imágenes

Una página puede incluir una imagen de cualquier otro sitio web. Además, existen servicios gratuitos online (www.tinypic.com) que permiten almacenar nuestras imágenes en servidores externos.

Esto tendrá ventajas e inconvenientes. El espacio en disco de nuestro servidor será bajo pero no tendremos control total sobre las imágenes (pudiéndose dar el caso de "imagen rota", donde se pierde la referencia).

Para evitar esta problemática es aconsejable crear una carpeta con las imágenes que vayamos a utilizar para tener siempre el control.

Formato de imágenes

Los formatos más comunes y que interpretan la mayoría de los navegadores son JPG, GIF y PNG, cada uno con sus pros y sus contras.

¿GIF o JPG?

El formato GIF se empleará para imágenes pequeñas de la web como botones, iconos, etc.

JPEG (o JPG) se utilizará para gráficos de mayor tamaño como imágenes digitalizadas, fotografías, etc.

Las imágenes GIF no se utilizan para mostrar imágenes grandes o que necesiten de una resolución de color muy grande, pues ocupan mucho espacio y además no podrán albergar más de 256 colores.

Tampoco se hace uso de imágenes JPEG para mostrar iconos pequeños ya que el algoritmo de compresión de este formato es degenerativo, y por tanto su resolución en imágenes pequeñas es de menor calidad que si utilizamos un formato GIF.

Ambos sistemas están basados en mapa de bits, lo cual tiene desventajas importantes.

El formato PNG

El formato PNG dispone de un potente algoritmo de compresión, sin pérdidas (la información no se altera), y con una tasa muy alta de compresión.

Sin embargo, y aún teniendo todas estas ventajas, el formato PNG no es práctico (aún) para el uso en páginas web (no es adoptado por todos los navegadores, y aún menos por las versiones antiguas de los mismos).

Imágenes: texto alternativo (atributo ALT)

Existen otros atributos de gran utilidad para las imágenes. El uso de alt no es obligatorio pero sí muy recomendable, pues sus ventajas son varias:

1.- En el caso que la imagen no esté disponible se mostrará el mensaje del atributo alt como alternativa.

2.- Cuando se lleve a cabo el proceso de carga de la página, el navegador mostrará esta descripción, lo que hará que el usuario pueda hacerse una idea de qué se está cargando. 3.- Muchos usuarios pueden tener deshabilitado el muestreo de imágenes. Si se les ofrece la información del gráfico podrán saber de qué trata el gráfico y eventualmente cambiar a modo "con imágenes" para visualizarla.

4.- En el caso de la accesibildad también es importante este atributo, pues determinadas aplicaciones para discapacitados (como lectores vocales) leen el contenido de este atributo

como alternativa.

5.- Y, finalmente, destacar la importancia de "alt" para el posicionamiento de imágenes en los buscadores. El buscador interpretará y asociará el contenido de "alt" a la imagen en sí. (Anécdota Google).

El formato quedará de la siguiente manera:

Imágenes: títulos (atributo TITLE)

Este atributo funciona de la misma manera que para los enlaces. Es la encargada de ofrecer una descripción emergente (tooltip) de la imagen (algunos navegadores utilizan el atributo "alt" en lugar de "title" para mostrar esta información).

El formato quedará de la siguiente manera:

<img src="ruta-de-la-imagen" alt="descripción de la imagen" title="Texto emergente"/>

Diferencias entre ALT y TITLE

En cuanto al uso de ALT y TITLE en imágenes los resultados serán distintos, como se ha dicho anteriormente, dependiendo del navegador que se utilice.

Para cumplir los estándares se definirá OBLIGATORIAMENTE el atributo ALT (para garantizar

así la accesibilidad). TITLE será opcional, pues únicamente se encarga de mostrar

Ejemplo de uso de TITLE y ALT

<img src="imagenes/logo-google.gif" alt="Logo de Google" title="Esto es el mensaje emergente">

El resultado sería el siguiente:

En caso de que no existiera la imagen "logo-google.gif" en la carpeta "imagenes", el resultado sería el siguiente:

Tamaño de imágenes

HTML insertará por defecto la imagen en su tamaño original. Sin embargo, podrá especificarse mediante los atributos width y height una anchura y una altura.

Podremos cambiar el tamaño de la imagen sin distorsionarla especificando únicamente un atributo (width o height).

En caso que quiera distorsionarse deberá definirse una altura o una anchura.

Los valores para estos atributos pueden especificarse en pixeles o en porcentaje. Cuando el tamaño se expresa en porcentaje, el resultado variará dependiendo del navegador:

Ejemplo 1: <img src="ruta-de-la-imagen" width="200px" /> Ejemplo 2: <img src="ruta-de-la-imagen" width="50%" />

Ejemplo 3: <img src="ruta-de-la-imagen" width="200px" height="50px" />

Ejemplo 2: Se forzará a mostrar la imagen incrementada en un 50% de su tamaño real manteniendo las proporciones de altura y anchura.

Ejemplo 3: Se forzará a mostrar la imagen con un tamaño de 200px de anchura y 50px de altura. La imagen quedará distorsionada si las proporciones no se mantienen respecto a las dimensiones del original.

Bordes y alineación de imágenes

A continuación se va a dar una pincelada sobre bordes y tipo de alineación de imágenes. Sin embargo, es necesario aclarar que con la aparición de las hojas de estilo (CSS) estos atributos han quedado desfasados.

Bordes

A las imágenes también se les puede agregar un borde mediante el atributo "BORDER" y especificando el grosor en píxeles.

Por defecto el valor para este atributo es 0, por lo que si no se dice lo contrario no se mostrará ningún tipo de borde.

Ejemplo 1: <img src="ruta-de-la-imagen" border="3px" /> El resultado para el ejemplo anterior sería el siguiente:

Alineación de imágenes

Para alinear las imágenes se empleará el atributo ALIGN (como en el caso de los párrafos). <img src="ruta-de-la-imagen" align="center" />

Otros atributos

Existen otros atributos para la presentación y posición de imágenes respecto a los demás elementos de la página (textos, tablas, listas...):

vspace y hspace, por ejemplo, se utilizan para indicar el espacio libre (en píxeles) que ha de colocarse entre la imagen y los demás objetos.

Sin embargo, es necesario recordar que estos atributos que hacen referencia a aspectos de presentación han quedado en desuso.

Utilizando imágenes como enlaces

Para enlazar una imagen se debe combinar la etiqueta de enlace (<a> y </a>) y la etiqueta de imagen (<img />) dentro de ella.

Deberemos especificar los atributos obligatorios HREF, SRC y ALT. La sintaxis quedará de la siguiente manera.

<a href="destino"> <img src="ruta-de-la-imagen" alt="texto alternativo a la imagen" /> </a>

El destino, al igual que en los enlaces de texto, podrá ser cualquier recurso interno o externo: una página, una imagen o un archivo...

Además de los atributos obligatorios podremos utilizar atributos opcionales como title, target...:

<a href="http://www.google.es" target="_blank"> <img src="logo-google.gif" alt="Logo de Google" title="Abrir Google en nueva ventana" /> </a>

Tablas

HTML ofrece el método más utilizado para la organización y presentación de datos: las tablas.

Las tablas son la mejor opción para organizar datos pero no para organizar

contenidos.

Es un error grave maquetar una web utilizando tablas, pues no fueron creadas para este fin. Para organizar el contenido de una web será más óptimo utilizar las hojas de estilo.

Las tablas de HTML pueden contener elementos simples, agrupaciones de filas y de columnas, cabeceras y pies de tabla, subdivisiones, cabeceras múltiples y otros elementos complejos que se irán viendo en los próximos puntos.

La polémica sobre la estructuración del contenido en tablas o haciendo uso de capas (divs) creó y sigue creando polémica entre los desarrolladores y diseñadores de páginas web.

Aunque algunos malos diseñadores siguen utilizando hoy en día las tablas para definir la estructura completa de las páginas web, se trata de una técnica obsoleta y nada

recomendable. El motivo es que se complica en exceso el código HTML y su mantenimiento

es muy complejo. La solución correcta para definir la estructura de las páginas consiste en la utilización de hojas de estilos CSS.

Tablas: Estructura

Para definir una tabla deberán utilizarse y combinarse 3 etiquetas: <table>, <tr> (table row) y <td> (table data cell).

Como recomendación, es aconsejable analizar en primer lugar las filas de que estará

compuesta y a continuación las columnas. El motivo es que HTML procesa primero las filas y por eso las etiquetas <tr> aparecen antes que las etiquetas <td>.

El tag <table>

La etiqueta <table> define una tabla. En conjunto con las otras dos etiquetas (<tr> y <td>) determinarán el número de celdas en sus filas y/o columnas.

Los tags <tr> y <td>

Esta etiqueta definirá una fila dentro de la tabla. Además, deberá contener al tag <td>, cuya función será la de definir una celda dentro de la fila.

<td> se emplea para definir cada una de las celdas que forman las filas de una tabla. <tr> se emplea para definir cada fila de las tablas de datos.

En el caso de que se quisiera crear una tabla de 3 filas y 4 columnas, visualmente quedaría de la siguiente forma.

El código correcto quedaría de la siguiente manera (una correcta indentación del código permitirá una lectura cómoda y rápida):

<table> <tr>

<td> Datos Fila 1 Columna 1 </td> <td> Datos Fila 1 Columna 2 </td> <td> Datos Fila 1 Columna 3 </td> <td> Datos Fila 1 Columna 4 </td>

</tr> <tr>

<td> Datos Fila 2 Columna 1 </td> <td> Datos Fila 2 Columna 2 </td> <td> Datos Fila 2 Columna 3 </td> <td> Datos Fila 2 Columna 4 </td>

</tr> <tr>

<td> Datos Fila 3 Columna 1 </td> <td> Datos Fila 3 Columna 2 </td> <td> Datos Fila 3 Columna 3 </td> <td> Datos Fila 3 Columna 4 </td>

</tr>

Ejemplo

Imagínese una tabla que registre una serie de productos con sus precios unitarios. Un posible ejemplo sería el que se muestra a continuación:

Producto Cantidad Precio / unidad Bermudas 26 u. 25 euros Camisas 10 u. 20 euros Chanclas 15 u. 10 euros

El código HTML debería ser el siguiente:

<table> <tr> <td> Producto </td> <td> Cantidad </td> <td> Precio / unidad </td> </tr> <tr> <td> Bermudas </td> <td> 26 u. </td> <td> 25 euros </td> </tr> <tr> <td> Camisas </td> <td> 10 u. </td> <td> 20 euros </td> </tr> <tr> <td> Chanclas </td> <td> 15 u. </td> <td> 10 euros </td> </tr> </table>

A continuación se muestran algunas propiedades, tags y atributos interesantes para definir partes de las tablas HTML.

La imagen siguiente muestra de modo gráfico su estructura de una tabla y los elementos utilizados para su construcción:

El atributo summary

El atributo summary puede específicarse dentro del tag table y permite añadir un resumen del contenido de la tabla. Posteriormente será utilizado para informar a navegadores u otros agentes de usuario que facilitan el acceso al contenido a usuarios discapacitados.

<table summary="Clasificación final liga BBVA" > .... </table>

Título para una tabla

Para especificar un título para una tabla se usará la etiqueta <caption> (no confundir con los títulos h1...h6 de los textos).

Este tag deberá escribirse dentro de la etiqueta <table> pero fuera de las etiquetas <tr>, no importando su lugar.

Véase el ejemplo siguiente:

Ingresos del año Septiembre $1.720.000

Octubre $2.140.000

El código para esta tabla es el siguiente:

<table>

<caption>Ingresos del año</caption> <tr> <td>Septiembre</td> <td>$1.720.000</td> </tr> <tr> <td>Octubre</td> <td>$2.140.000</td> </tr> </table>

Celdas de encabezado

Un encabezado en una tabla es importante, pues define y diferencia el significado de las filas y/o columnas presentes en la tabla.

Para representar un encabezado en una tabla, deberá reemplazarse la etiqueta <td> por

<th>. El resultado del contenido de todas las celdas de esa fila se mostrarán en negrita. Sirva el siguiente ejemplo:

Producto Cantidad (kg) Impuestos (euros)

Madera 800 800.000

Vidrio 10 50.000

El código sería el siguiente: <table> <tr> <th>Producto</th> <th>Cantidad (kg)</th> <th>Impuestos (euros)</th> </tr> <tr> <td>Madera</td> <td>800</td> <td>800.000</td> </tr> <tr> <td>Vidrio</td> <td>10</td> <td>50.000</td> </tr> <tr> <td>Pintura</td> <td>5</td> <td>20.000</td> </tr> </table>

En el capítulo siguiente veremos los posibles atributos para las celdas de cabeceras.

Encabezado, cuerpo y pie de una tabla

Existen ciertas etiquetas que permiten estructurar las partes de una tabla

independientemente del orden en que se escriban en el código HTML. El navegador será quien se encargue de mostrar los datos de forma lógica y ordenada.

Para ello se emplearán las etiquetas <thead>, <tbody> y <tfoot>.

<thead> proporciona la información de encabezado de una tabla que se mostrará en la

primera línea de la tabla.

La etiqueta <tbody> recogerá los datos del cuerpo de la tabla y <tfoot> encerrará los datos de pie de la tabla (que generalmente son los resultados expuestos en el cuerpo de la tabla). Deberán especificarse únicamente una vez para cada tabla. Todas las etiquetas <tr> deberán estar englobadas dentro de uno de estos tres tags.

Véase el siguiente ejemplo:

Página Visitas/día Visitas/semana Visitas/mes

Total 97 713 2820

index.php 20 154 652

HTML.php 42 301 1186

CSS.php 35 258 982

El código para la tabla es el que se muestra a continuación: <table> <thead> <tr> <th>Página</th> <th>Visitas/día</th> <th>Visitas/semana</th> <th>Visitas/mes</th> </tr> </thead> <tfoot> <tr> <th>Total</th> <td>97</td> <td>713</td> <td>2820</td> </tr> </tfoot> <tbody> <tr> <td>index.php</td> <td>20</td> <td>154</td> <td>652</td> </tr> <tr> <td>HTML.php</td> <td>42</td> <td>301</td> <td>1186</td> </tr> <tr> <td>CSS.php</td> <td>35</td> <td>258</td> <td>982</td> </tr> </tbody> </table>

Tablas: celdas (<td>), filas (<tr>) y celdas cabecera (<th>)

Mientras que <tr> es utilizado para definir filas, <td> se utilizará para definir cada una de las celdas y <th> para definir las celdas que son cabecera de una fila o columna. A continuación se presentan los atributos para cada una de ellas:

Celdas de tabla: <td>

Los atributos para las celdas son los siguientes:

1.- abbr = "texto": Permite describir el contenido de la celda (se emplea sobretodo con los navegadores de voz utilizados por personas discapacitadas)

2.- scope = "col, row, colgroup, rowgroup": Indica las celdas para las que esta celda será su cabecera.

Ejemplo: scope="col" indicará que esa celda es la cabecera de todas las demás celdas que están en la misma columna.

3.- colspan = "número": Número de columnas que ocupa esta celda. 4.- rowspan = "número": Número de filas que ocupa esta celda.

Los atributos más utilizados son rowspan y colspan y se emplean para construir tablas complejas como las que se ven más adelante.

Celdas cabecera de tabla: <th>

Los atributos para las celdas cabecera de tabla son los mismos que para las celdas comunes (<td>). Sin embargo, el atributo más utilizado para <th> es scope, que permite indicar si la celda es cabecera de la fila o de la columna (<th scope="row"> y <th scope="col"> respectivamente).

<h1>Su pedido</h1> <table>

<tr>

<th scope="col">Nombre producto</th> <th scope="col">Precio unitario</th> <th scope="col">Unidades</th> <th scope="col">Subtotal</th> </tr> <tr> <td>Reproductor MP3 (80 GB)</td> <td>192.02</td> <td>1</td> <td>192.02</td> </tr> <tr> <td>Fundas de colores</td> <td>2.50</td> <td>5</td> <td>12.50</td> </tr> <tr>

<td>Reproductor de radio & control remoto</td> <td>12.99</td> <td>1</td> <td>12.99</td> </tr> <tr> <th scope="row">TOTAL</th> <td>-</td> <td>7</td> <td><b>207.51</b></td> </tr> </table>

Tablas: agrupación de filas / columnas

Las tablas complejas suelen disponer de una estructura irregular que junta varias columnas para formar una columna ancha o une varias filas para formar una fila más alta que las demás.

Para fusionar filas o columnas se utilizan los atributos rowspan y colspan respectivamente.

Fusión simple de columnas

La siguiente imagen muestra una tabla compleja que ha fusionado dos columnas simples para formar una columna más ancha:

El código asociado a la tabla será el siguiente: <table> <tr> <td colspan="2">A</td> </tr> <tr> <td>B</td> <td>C</td> </tr> </table>

Fusión simple de filas

De forma equivalente, el atributo rowspan se empleará de la siguiente manera:

<table> <tr> <td>A</td> <td rowspan="2">B</td> </tr> <tr> <td>C</td> </tr> </table>

Fusión múltiple

Utilizando los atributos rowspan y colspan, es posible diseñar tablas tan complejas como las que se muestran en los siguientes ejemplos:

Fusión de múltiples columnas

Ejemplo de fusión de múltiples columnas:

El código será el siguiente: <table> <tr> <td colspan="3">A</td> <td>B</td> </tr> <tr> <td>C</td> <td colspan="2">D</td> <td>E</td> </tr> <tr> <td colspan="4">F</td> </tr> <tr> <td>G</td> <td>H</td> <td>I</td> <td>J</td> </tr> </table>

Ejemplo de fusión de múltiples filas:

El código para la tabla será el siguiente: <table> <tr> <td>A</td> <td>B</td> <td rowspan="3">C</td> <td>D</td> </tr> <tr> <td rowspan="2">E</td> <td>F</td> <td rowspan="3">G</td> </tr> <tr> <td>H</td> </tr> <tr> <td>I</td> <td>J</td> <td>K</td> </tr> </table>

Tablas: Atributos

A continuación van a analizarse a grandes rasgos algunos de los atributos para las tablas. Sin embargo, es recomendable utilizar las hojas de estilo (CSS).

El atributo BORDER

Dicho atributo se incluye en el tag <table>. Los bordes de una tabla NO afectan a todos los bordes presentes en la tabla; únicamente afectará al borde exterior de la tabla y no al de las celdas.

Este método de presentación de bordes debería estar obsoleto, pues se trata de un atributo de visualización, pero está estandarizado correctamente.

Por defecto la tabla no mostrará ningún borde. Para aplicar un borde de 3 píxeles se procederá de la siguiente manera:

<table border="3px"> ... ... </table>

Ejemplo:

Producto Cantidad Precio / unidad Bermudas 26 u. 25 euros Camisas 10 u. 20 euros Chanclas 15 u. 10 euros

Separación entre celda y celda

Para separar el espacio entre celdas se utilizará el atributo cellspacing en la etiqueta <table>. El valor deberá definirse en píxeles:

<table cellspacing="13px"> ... ... </table>

Producto Cantidad Precio / unidad Bermudas 26 u. 25 euros Camisas 10 u. 20 euros Chanclas 15 u. 10 euros

Separación entre celda y texto

El atributo cellpadding permite separar el texto de la celda por un determinado número de píxeles:

<table cellpadding="13px"> ... ... </table>

Firefox no muestra correctamente este atributo, lo que indica la no estandarización: Producto Cantidad Precio / unidad

Bermudas 26 u. 25 euros

Camisas 10 u. 20 euros

Chanclas 15 u. 10 euros

(Nota: En los ejemplos se ha hecho uso del atributo border para visualizar los efectos de separación producidos).

Formularios

Formularios: introducción

El objetivo de HTML consiste en estructurar los contenidos de una página web. Sin embargo, también pone a disposición una serie de elementos para crear aplicaciones que interactúen con aplicaciones más potentes.

Los formularios se definen con las etiquetas <form> y </form>. Dentro de estos tags incluiremos todos los elementos necesarios (botones, cuadros de texto, listas desplegables...).

El tag <FORM>: Atributos

Los atributos asociados a esta etiqueta son los que se definen a continuación:

action = "url": indica la URL de la aplicación del servidor que se encarga de procesar los datos introducidos por los usuarios. Esta aplicación también se encarga de generar la respuesta que muestra el navegador. Ej: <form action="procesa-datos.php">. Este atributo será obligatorio.

method = "POST o GET": Método HTTP empleado al enviar el formulario. En caso de utilizar el método GET los valores del formulario se agregarán a la URL definida en el atributo action. Ej.: procesa-datos.php?nombre=cecot.

enctype = "application/x-www-form-urlencoded o multipart/form-data": Tipo de codificación empleada al enviar el formulario al servidor (sólo se indica de forma explícita en los formularios que permiten adjuntar archivos). Por defecto el valor es application/x-www-form-urlencoded. En caso de querer enviar archivos adjuntos utilizaríamos <form enctype="multipart/form-data">.

cliente (por ejemplo, solo permitir la subida de archivos de imagen comprimidos, como JPG y GIF). Ej: <form accept="image/gif, image/jpg">.

En la mayoría de ocasiones únicamente se utilizarán los atributos action y method.

method="post" o method="get" ¿cuál es mejor?

Al margen de otras diferencias técnicas, el método POST permite el envío de mucha más información que el método GET. En general, el método GET admite como máximo el envío de unos 500 bytes de información. La otra gran limitación del método GET es que no permite el envío de archivos adjuntos con el formulario. Además, los datos enviados mediante GET se ven en la barra de direcciones del navegador (se añaden al final de la URL de la página), mientras que los datos enviados mediante POST no se pueden ver tan fácilmente.