Manual de HTML

http://desarrolloweb.com/manuales/manual-html.html Pgina 1 de 116

 Manual de HTML

Introduccin: Manual de HTML

El Manual de HTML te ensea a trabajar con el lenguaje de marcacin que sirve para construir
las pginas web. HTML es el primer paso que debera completar cualquier persona que quiera
dedicarse al desarrollo de web en general. Es adems un conocimiento recomendado para
cualquier persona que trabaje en el medio Internet.

Este es un manual con bastante detalle, que empieza en el conocimiento ms bsico y recorre
cada uno de los elementos que se pueden usar para construir todo tipo de contenido en una
web, incluso formularios, tablas, etc.

Hemos actualizado este manual de HTML en 2016, eliminando las partes que ya se han
quedado en desuso, as como para incorporar nuevas informaciones importantes a da de hoy,
buenas prcticas aconsejables, etc.

Encuentras este manual online en:

http://desarrolloweb.com/manuales/manual-html.html

http://desarrolloweb.com/manuales/manual-html.html Pgina 2 de 116

 Manual de HTML

Autores del manual

Las siguientes personas han participado como autores escribiendo artculos de este manual.

Rubn Alvarez

Rubn es doctor en qumica y programador aficionado con experiencia

en PHP.

Miguel Angel Alvarez

Miguel es fundador de DesarrolloWeb.com y la plataforma de

formacin online EscuelaIT. Comenz en el mundo del desarrollo web
en el ao 1997, transformando su hobby en su trabajo.

Christian Santaluca

Christian fue redactor en DesarrolloWeb.com durante los aos 2002 a 2003. Es desarrollador
frontend y aficionado a experimentar con nuevas tecnologas.

http://desarrolloweb.com/manuales/manual-html.html Pgina 3 de 116

 Manual de HTML

Introduccin a HTML

Introduccin al manual de HTML y al lenguaje de modelado de pginas web. Veremos qu es

HTML y las primeras nociones que nos ayudarn a realizar las primeras pruebas de creacin
de una pgina web sencilla.

Prlogo al manual de HTML

Cul es el enfoque y contenido de este Manual de HTML, a quin va dirigido, as
como lecturas y materiales aconsejados para sacarle todo el provecho.

Bienvenidos al Manual de HTML de DesarrolloWeb. A travs de varios captulos

vamos a descubrir el principal lenguaje utilizado para la creacin de pginas web: Hyper Text
Markup Language, ms conocido mediante sus siglas HTML.

Puede que en un principio, el hecho de hablar de un lenguaje informtico pare los pies a ms
de uno. No os asustis, el HTML no deja de ser ms que una forma un tanto peculiar de
especificar el contenido de las pginas, indicando el texto y otros elementos como imgenes,
tablas, listas, etc. Al final es de suma importancia el lenguaje porque es el medio con el cual se
suministra el contenido a los navegadores y por tanto, si queremos comenzar a aprender a
crear pginas web, forzosamente debemos comenzar por aqu.

Este manual queremos que sea lo ms prctico posible. Iremos conociendo el lenguaje a travs
de numerosos ejemplos que te sugerimos realizar por ti mismo para asimilar mejor los
conocimientos. Pero antes de entrar en materia, permtenos recomendarte la lectura de de
nuestro manual Publicar en Internet, en el cual se habla de una manera muy general sobre el
proceso de disear y publicar una pgina web. El mencionado manual tambin os dejara bien
claro lo que aporta HTML dentro del contexto de la creacin de una pgina web, trata sobre
editores, programas para subir archivos al servidor, etc.

El pblico al que va enfocado este manual es a todos aquellos que, con conocimientos mnimos
de informtica, desean hacer mundialmente pblico un mensaje, una idea o una informacin
usando para ello el medio ms prctico, econmico y actual: Internet.

Qu necesitas para aprender HTML

Lo que necesitis como base para llevar a buen trmino el aprendizaje de HTML es lo
siguiente:

Saber escribir con un teclado

Saber manejar un ratn
Tener ganas de aprender

http://desarrolloweb.com/manuales/manual-html.html Pgina 4 de 116

 Manual de HTML

Puede parecer una broma el listado anterior de requisitos, pero realmente queremos remarcar
que cualquier persona que sepa manejar un ordenador tiene los conocimientos bsicos para
aprender HTML.

Obviamente, en lo que respecta al trabajo con un ordenador, debemos saber tambin a abrir
programas, editar un archivo con texto plano, guardar nuestros archivos dentro de alguna
carpeta y ejecutarlos con un doble clic. Estamos seguros que si has llegado a este manual
sabrs realizar todo este tipo de tareas bsicas.

Que aprenders en este manual

Si le pones un poco de ganas y sigues este manual hasta el final, tendrs las siguientes
habilidades o conocimientos:

Identificar qu se debe hacer con HTML y qu no.

Capacidad para crear y publicar vuestro propio sitio web con un mnimo de calidad.
Conocimientos de todo tipo sobre las tecnologas y herramientas empleadas en el
mbito de la Red.

Quizs aqu comience una bonita historia y sirva como primer paso para toda una serie de
experiencias y aprendizajes, no solo de HTML, sino tambin de muchos otros lenguajes y
tecnologas que estn relacionadas con el desarrollo de sitios web. Estamos seguros que para
muchos se convertir en una aficin que puede derivar en pasin y terminar, en algunos casos,
siendo un vicio o un oficio. Pensar que todos los profesionales del desarrollo en Internet han
pasado por aqu y comenzado como vosotros con este, u otro, manual de HTML.

Referencias a otros contenidos que pueden resultar de inters

DesarrolloWeb.com est plagado de manuales tiles para realizar sitios web desde los ms
simples hasta los ms complejos, sin embargo, en el punto en el que ests queremos
recomendar algunas referencias que te pueden resultar de utilidad.

Para quien no sepa nada sobre crear una pgina web, y le gusta que le expliquen las cosas
desde cero y de manera visual, recomendamos ver el vdeo donde mostramos el proceso de
creacin de la primera pgina bsica. Adems, para complementar las explicaciones de este
manual, tambin recomendamos el videotutorial de HTML.

Finalmente, antes de comenzar con el temario, queremos daros una referencia importante a la
seccin HTML a fondo, donde publicamos todos los contenidos que tienen que ver con HTML
y donde encontrars este y otros manuales relacionados con el lenguaje.

Revisin de 2016

Estamos revisando el manual en 2016. El texto original se escribi en 2001 y aunque el HTML
en s no ha sufrido muchas variaciones, es importante revisar el enfoque del texto. Queremos
que las personas que comiencen a leer en el da de hoy tengan una informacin fiel a las
costumbres y buenas prcticas a la hora de usar este lenguaje. En esta revisin estamos
seguros que agregaremos mayor valor al manual, ampliando las informaciones, pero tambin

http://desarrolloweb.com/manuales/manual-html.html Pgina 5 de 116

 Manual de HTML

eliminando algunas cosas que han quedado en desuso. Esperamos que este esfuerzo sea de
provecho todava para muchas personas a lo largo del mundo.

Pasemos pues sin ms prembulos a ver de qu se trata el lenguaje HTML...

Este artculo es obra de Rubn Alvarez

Fue publicado por primera vez en 29/09/2016
Disponible online en http://desarrolloweb.com/articulos/21.php

Introduccin a HTML
Las primeras cosas que debes saber sobre HTML: historia, objetivos y dems
conocimientos donde sentar las bases del manual.

HTML es el lenguaje con el que se escribe el contenido de las pginas web. Las
pginas web pueden ser vistas por el usuario mediante un tipo de aplicacin llamada cliente
web o ms comnmente "navegador". Podemos decir por lo tanto que el HTML es el lenguaje
usado por para especificar el contenido que los navegadores deben representar a la hora de
mostrar una pgina web.

Este lenguaje nos permite aglutinar textos, imgenes, enlaces... y combinarlos a nuestro gusto.
La ventaja del HTML a la hora de representar el contenido en un navegador, con respecto a
otros formatos fsicos como libros o revistas, es justamente la posibilidad de colocar
referencias a otras pginas, por medio de los enlaces hipertexto.

Un poco de historia

El lenguaje HTML se cre en 1991. Tiene una historia realmente corta pero para su poca vida
ha sufrido importantes cambios. Su padre es Tim Berners-Lee que lo dise con objetivos
divulgativos. Inicialmente no se pens que la web llegara a ser un rea de ocio con carcter
multimedia, de modo que, naci sin dar respuesta a todos los posibles usos que se le iba a dar y
a todos los colectivos de gente que lo utilizaran en un futuro. Sin embargo, pese a esta
deficiente planificacin, si que se han ido incorporando modificaciones con el tiempo,
agregando nuevas caractersticas para cubrir las nuevas necesidades.

Como hemos dicho, los programas que leen y presentan las pginas web a los usuarios se
llaman navegadores. stos son los responsables de interpretar el HTML y "pintar" una pgina
tal como ellos entiendan que deben hacer. Sin embargo, esas reglas de representacin no son
subjetivas de cada fabricante del navegador, sino que existe una organizacin llamada W3C
que se encarga de definir el estndar que todos deben seguir a la hora de escribir e interpretar
el HTML. Estos estndares del HTML se conocen como "Especificaciones", las cuales han ido
apareciendo en el tiempo. El HTML5 es el ltimo estndar en la actualidad.

Histricamente los navegadores, adems de la propia comunidad de usuarios, han sido los
mayores impulsores de los cambios ocurridos en el lenguaje. Una vez detectada la necesidad es
el W3C el que crea el estndar y marca una direccin que todos deben seguir.

http://desarrolloweb.com/manuales/manual-html.html Pgina 6 de 116

 Manual de HTML

Los navegadores y sus problemas

El conflicto generado por los navegadores es debido a su diversidad. Existen multitud de

navegadores o clientes web presentes en el mercado los cuales muchas veces no son capaces de
interpretar un mismo cdigo de una manera unificada. Esto obliga al desarrollador a, una vez
creada su pgina, comprobar que esta puede ser leda satisfactoriamente por todos los
navegadores, o al menos, los ms utilizados. Cuando surgen problemas de interpretacin,
queda de parte del desarrollador resolver el problema tirando de tcnicas o conocimientos que
l disponga.

Afortunadamente, en la actualidad las diferencias de interpretacin de los navegadores con

respecto a un mismo cdigo HTML son mnimos, pero en el pasado los desarrolladores tenan
que emplear mucho tiempo en remar contracorriente para solucionarlos. Sin embargo, quedan
todava muchos usuarios que navegan con sistemas anticuados, ya sea por falta de inters para
actualizarse, conocimientos, o por disponer ordenadores muy antiguos.

Pero no todo ha sido malo por parte de los navegadores. Ellos tambin son los responsables de
introducir nuevas etiquetas en el uso comn del da a da, que se han ido incorporando al
estndar HTML en sucesivas versiones. Aunque antes de estandarizarse esas etiquetas era
comn que cada navegador crease su etiqueta propietaria para resolver la misma necesidad, lo
que obligaba a los desarrolladores a repetir cdigo o incluso a hacer versiones de pginas
diferentes para navegadores. Con todo esto no queremos asustar a nadie y volvemos a repetir
que las diferencias en la actualidad son mnimas, pero s deseamos que quede clara la
necesidad de la estandarizacin creada por el W3C, responsable de marcar una pauta que
actualmente cumplen todos los navegadores modernos de manera bastante fiel.

Los lenguajes de la web

HTML no est solo como nico lenguaje para crear la web, aunque en un principio s que era
as. Su evolucin tan anrquica ha supuesto toda una seria de inconvenientes y deficiencias
que han debido ser superados con la introduccin de otras tecnologas accesorias capaces de
organizar, optimizar y automatizar el funcionamiento de las webs. Ejemplos que pueden
sonaros son las CSS, o JavaScript. Veremos ms adelante en qu consisten algunas de ellas.

Lo que es importante para el desarrollador es conocer el enfoque de cada lenguaje, para saber
cul es la manera correcta de utilizarlo y cmo se complementan los unos a los otros. No es
necesario que se sea experto en todos ellos, pero s saber qu cosas se deberan hacer con cada
cual, para no cometer errores que deriven en una mala interpretacin por parte de los
navegadores. As mismo tenemos que pensar que no todas las personas van a acceder a una
web a travs de un ordenador, sino tambin de un telfono o de navegadores especializados
para personas con discapacidades, por ejemplo para ciegos. Es por ello que es importante
escribir correctamente los lenguajes, respetando los estndares y as cada navegador podr
hacer su mejor papel para representar la pagina lo ms correctamente posible.

En este manual queremos incidir mucho en este detalle, la correcta utilizacin del HTML:
escribir el contenido, para que nuestro trabajo sea lo ms adecuado y de elevada calidad.

Los editores de HTML

http://desarrolloweb.com/manuales/manual-html.html Pgina 7 de 116

 Manual de HTML

Adems del navegador necesario para ver los resultados de nuestro trabajo, necesitamos
evidentemente otra herramienta capaz de crear la pgina en si. Un archivo HTML (una pgina)
no es ms que un texto plano al que le colocamos extensin ".html". Es por ello que para
programar en HTML necesitamos un editor de texto.

Nota: En 2001 cuando escribimos este manual por primera vez recomendbamos probar a
comenzar con el Bloc de notas que viene con Windows. El motivo es que es un programa
tan simple que nos permite centrarnos simplemente en el HTML, eliminando todo tipo de
ayudas. Hoy preferimos recomendar otras alternativas, aunque hemos dejado esta nota por
motivos nostlgicos.

Es recomendable usar un editor de textos sencillo, de texto plano. Queremos remarcar que
nunca se debe usar el tipo de editor de textos que se usan para escribir documentos, cartas,
trabajos para el colegio, como Wordpad o Microsoft Word, pues colocan su propio cdigo
especial al guardar los documentos y HTML es nicamente texto plano, con lo que
podremos tener problemas. Otro tipo de editor que tampoco recomendamos es DreamWeaver,
un editor que te escribe el HTML a base de tocar botones, negritas, listas, crear tabla, etc. Para
aprender es extremadamente recomendable que se use un programa que te permita escribir el
cdigo en crudo, as no tendrs problemas en el futuro.

El tipo de editores que recomendamos son aquellos especficos para la edicin de cdigo, los
cuales estn pensados para facilitar los procesos de la programacin y de la escritura de cdigo
plano como el del lenguaje HTML. Existen infinidad de editores de cdigo interesantes, que
nos aportan ms o menos facilidades y que nos permiten aumentar nuestra productividad. No
obstante, es aconsejable en un principio utilizar una herramienta lo ms sencilla posible para
poder prestar la mxima atencin a nuestro cdigo y familiarizarnos lo antes posible con l.
Siempre tendremos tiempo ms delante de pasarnos a editores ms verstiles con la
consiguiente ganancia de tiempo.

No es posible decir a nadie el editor que debe de usar, porque cada uno tendr sus
preferencias. No obstante, en 2016 y para las personas que estn comenzando nosotros
recomendamos:

Atom
Brackets

Igual alguna persona que comience puede pensar que tienen muchas opciones, pero realmente
podemos comenzar con lo bsico, crear nuevos archivos, editar el cdigo, guardarlos en
nuestro disco duro... y punto. Recomendamos estos editores porque estn disponibles para
todas las plataformas, Windows, Mac y Linux y porque son gratuitos para cualquier uso.

A continuacin tienes algunas referencias para ampliar la informacin, aunque con estas
recomendaciones tienes para empezar. Para una referencia ms claro todo el tema de editores
y los tipos que existen, visita los artculos:

Editores de HTML.
Si buscas en DesarrolloWeb, en el buscador por "editores", encontrars muchas otras

http://desarrolloweb.com/manuales/manual-html.html Pgina 8 de 116

 Manual de HTML

alternativas.

HTML es para escribir el contenido

Volveremos sobre este punto, pues es de vital importancia para entender y usar bien HTML.
Graba e tu memoria que HTML es para especificar el contenido de las pginas web y no el
aspecto que van a tener.

Cuando nos referimos al contenido queremos indicar prrafos, imgenes, listas, tablas y todo
aquello que forma parte de "el qu". Nunca debemos usar HTML para definir cmo se debe de
ver un contenido, si el texto debe tener color rojo, con una fuente mayor, o si se debe alinear a
la derecha. Para especificar el aspecto que debe tener una web se usa un lenguaje
complementario, llamado CSS.

Por tanto, HTML sirve para decir qu contenido debe tener una pgina y CSS sirve para decir
cmo se debe representar tal contenido, con qu estilo. Es fcil saltarse esta regla, porque en
HTML existen diversas etiquetas (y atributos, de los que no hemos hablado todava) que
realmente estn pensados para definir la presentacin. Es una herencia de versiones pasadas
del HTML y aunque en este manual se nos pueda saltar alguna vez alguna excepcin, no
debemos caer en la trampa de usar el HTML para definir cmo debe de representarse un
elemento en la pgina.

Conclusin

Como has visto, una pgina es un archivo donde est contenido el cdigo HTML en forma de
texto. Estos archivos tienen extensin .html o .htm (es indiferente cul utilizar). De modo que
cuando programemos en HTML lo haremos con un editor de textos y guardaremos nuestros
trabajos con extensin .html, por ejemplo mipgina.html

Consejo: Utiliza siempre la misma extensin en tus archivos HTML. Eso evitar que te
confundas al escribir los nombres de tus archivos unas veces con .htm y otras con .html.
Cabe remarcar que hoy todo el mundo usa la extensin ".html" y no ".htm"

Este artculo es obra de Rubn Alvarez

Fue publicado por primera vez en 29/09/2016
Disponible online en http://desarrolloweb.com/articulos/21.php

Sintaxis del HTML

Descripcin de la sintaxis con la que se trabaja en el lenguaje HTML, as como la
estructura que tendr el documento bsico HTML.

El HTML es un "lenguaje de marcado". Basa su sintaxis en un elemento base al que llamamos

marca, tag o simplemente etiqueta. A travs de las etiquetas vamos definiendo los elementos
del documento, como enlaces, prrafos, imgenes, etc. As pues, un documento HTML estar
constituido por texto y un conjunto de etiquetas para definir la funcin que juega cada
contenido dentro de la pgina. Todo eso servir al navegador para saber cmo se tendr que

http://desarrolloweb.com/manuales/manual-html.html Pgina 9 de 116

 Manual de HTML

presentar el texto y otros elementos en la pgina.

Existen etiquetas para crear negritas, prrafos, imgenes, tablas, listas, enlaces, etc. As pues,
aprender HTML es bsicamente aprenderse una serie de etiquetas, sus funciones, sus usos y
saber un poco sobre cmo debe de construirse un documento bsico. Es una tarea muy sencilla
de afrontar, al alcance de cualquier personas, puesto que el lenguaje es muy entendible por los
seres humanos.

Anatoma de una etiqueta HTML

La etiqueta presenta frecuentemente dos partes, su apertura y cierre, y se encierran ambas

partes entre smbolos "menor que" y "mayor que". Lo veremos a continuacin.

Apertura

El inicio de una etiqueta se produce de la siguiente manera:

<etiqueta>

Cierre

El final de una etiqueta se produce de manera similar a su apertura, aunque agregando una
barra:

</etiqueta>

Nota: Por razones de formato del texto, en DesarrolloWeb.com, cuando no estamos

escribiendo un cdigo y queremos referirnos a una etiqueta la escribimos con maysculas.
Los cdigos se diferencian fcilmente porque tienen su estilo particular. Donde escribimos
las etiquetas sin los mayores y menores que y con maysculas es en los prrafos del texto.

Todo lo incluido en el interior de esa etiqueta sufrir las modificaciones que caracterizan a esta
etiqueta. As por ejemplo:

La etiqueta B define un texto en negrita. Si en nuestro documento HTML escribimos una frase
con el siguiente cdigo:

<b>Esto esta en negrita</b>

Veremos que las palabras "Esto esta en negrita" aparecen en negrita. Es as de simple.

Otro ejemplo rpido. La etiqueta P define un prrafo. Si en nuestro documento HTML

http://desarrolloweb.com/manuales/manual-html.html Pgina 10 de 116

 Manual de HTML

escribimos:

<p>Hola, estamos en el prrafo 1</p>

<p>Ahora hemos cambiado de prrafo</p>

Como resultado obtendramos dos prrafos con esos textos. En HTML los prrafos estn
separados por un doble salto de lnea. Se veran ms o menos de esta manera:

Partes de un documento HTML

Adems de todo esto, un documento HTML ha de estar delimitado por la etiqueta

HTML. Dentro de este documento, podemos asimismo distinguir dos partes principales:

La cabecera, delimitada por la etiqueta HEAD, donde colocaremos etiquetas de ndole

informativo, como por ejemplo el titulo de nuestra pgina. El contenido de la cabecera no suele
aparecer en el cuerpo de la pgina, pero sirve a los navegadores y otros sistemas para
encontrar informacin til para entender y procesar el documento.

El cuerpo, flanqueado por la etiqueta BODY, que ser donde colocaremos nuestro texto
e imgenes delimitados a su vez por otras etiquetas como las que hemos visto.

El resultado de un documento bsico tiene la siguiente estructura:

<html>

<head>

<title>Mi documento bsico</title>

</head>

<body>

<p>Este es el cuerpo de mi primera pgina HTML</p>

<p>Este segundo prrafo tambin forma parte del cuerpo</p>

</body>

</html>

Nota: A este documento bsico le faltan todava algunas cosas importantes que no
queremos que nunca se te olviden. Sin embargo hablaremos de ellas en el siguiente
artculo, dedicado a la pgina HTML bsica.

http://desarrolloweb.com/manuales/manual-html.html Pgina 11 de 116

 Manual de HTML

Las maysculas o minsculas son indiferentes al escribir etiquetas

En HTML las maysculas y minsculas son indiferentes. Quiere decir que las etiquetas pueden
ser escritas con cualquier tipo de combinacin de maysculas y minsculas. Resulta sin
embargo aconsejable acostumbrarse a escribirlas en minscula ya que otras tecnologas que
pueden convivir con nuestro HTML (XML por ejemplo) no son tan permisivas y nunca viene
mal hacernos a las buenas costumbres desde el principio, para evitar fallos triviales en un
futuro.

Saltos de lnea en HTML

Otra de las cosas importantes de conocer sobre la sintaxis bsica del HTML es que los saltos de
lnea no importan a la hora de interpretar una pgina. Un salto de lnea ser simplemente
interpretado como un separador de palabras, un espacio en blanco. Es por ello que para
separar lneas necesitamos usar la etiqueta de prrafo comentada antes, o la etiqueta BR que
significa un salto de lnea simple.

Esto es una lnea

<br>

Esto es otra lnea

Ahora, aunque estoy escribiendo aparentemente en otra lnea, no se ver el salto de lnea porque no lo he separado por el BR (o P, o cualquier

otra etiqueta que produzca el salto de lnea

Nota: La etiqueta BR no tiene su correspondiente cierre. Es un detalle que quizs te haya

llamado la atencin. Volveremos sobre ello ms adelante.

Es un detalle que choca al principio de usar HTML, pero al que te acabas acostumbrando con
rapidez. Iremos viendo ejemplos a lo largo de todo el Manual de HTML, por lo que no debes
preocuparte por ahora, slo seguir leyendo.

Este artculo es obra de Rubn Alvarez

Fue publicado por primera vez en 29/09/2016
Disponible online en http://desarrolloweb.com/articulos/21.php

Tu primera pgina
Vamos a ver cmo se hace una pgina muy sencilla en HTML, que sirva de
prctica a los debutantes.

Solo hemos comenzado el Manual de HTML, pero ya podemos hacer un primer ejemplo
completo y, sobre todo, correcto. Con lo que sabemos ya casi estamos listos para practicar,
aunque todava tenemos que adquirir algn conocimiento adicional.

http://desarrolloweb.com/manuales/manual-html.html Pgina 12 de 116

 Manual de HTML

No te olvides ahora de practicar, as que usa tu editor de cdigo preferido y crea por tu cuenta
los ejercicios que vamos a ir realizando. Recuerda que la prctica es la mejor va para afianzar
los conocimientos.

En el anterior artculo ya adelantamos la forma de un documento HTML bsico, con sus

etiquetas de cabecera y cuerpo. No obstante, an tenemos que agregar alguna cosa adicional
para que todo funcione de la mejor manera.

Doctype

Reconozco que el "doctype" no es la etiqueta ms intuitiva, pero debemos mencionarla ahora

porque es el inicio de cualquier archivo HTML. Viene heredada del XML, que es un lenguaje
precursor del HTML. En el pasado la etiqueta Doctype era bastante ms compleja, pero
afortunadamente con la llegada de HTML5 se simplific para quedar simplemente como esto:

<!DOCTYPE html>

No pretendas entenderla mucho, piensa en ella como una ceremonia que debes realizar (algo
que debes escribir) al inicio de todo documento HTML.

Juego de caracteres

El juego de caracteres es otro asunto que puede parecer un poco complejo, pero que tenerlo
claro desde el principio te ayudar a no pasar en el futuro por diversos problemas.

Este juego de caracteres, o codificacin, depende del sistema operativo que ests usando para
crear tu archivo HTML. Mientras que unos sistemas como Linux o Mac usan por defecto un
juego de caracteres llamado UTF-8, en Windows se usa de manera predeterminada otro juego
de caracteres llamado ISO-8859-1. Parece una informacin un tanto tcnica y fuera de
necesidad para introducir ahora que estamos comenzando, pero insistimos que nos ahorrar
frustraciones al dar los primeros pasos, pero sobre todo en un futuro.

En HTML5 el juego de caracteres a usar es siempre UTF-8. Por lo que tendremos que tener
especial atencin si somos usuarios de Windows, para asegurarnos que usamos la codificacin
correcta. Es otro de los motivos por los que en pasados artculos recomendbamos Brackets o
Atom como editores de cdigo, ya que stos trabajan siempre en UTF-8, independientemente
del sistema operativo. Si no ests usando uno de esos editores, te recomendamos hacerlo ahora
y si te empeas en trabajar con tu propio editor infrmate sobre el juego de caracteres que
produce y si existe alguna opcin o configuracin que te asegure usar siempre UTF-8.

Para definir qu juego de caracteres estamos usando en un documento HTML se tiene que
escribir una etiqueta en la cabecera de la pgina, en el HEAD, llamada META. Realmente las
etiquetas META las trataremos ms adelante, porque sirven para varias cosas interesantes.
Pero de momento nos aseguraremos que tenemos esta etiqueta en el head.

<meta charset="UTF-8">

http://desarrolloweb.com/manuales/manual-html.html Pgina 13 de 116

 Manual de HTML

Igualmente, no pretendemos hablar mucho de esta etiqueta por el momento, solo que te la
tomes como un contrato a cumplir para tener un documento correcto. Te ampliamos esta
informacin en el artculo Documento bsico HTML5.

Un documento HTML correcto

A continuacin tienes un documento bsico con las etiquetas necesarias para comenzar con
buen pie.

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>Mi primera pgina</title>

</head>

<body>

<p><b>Bienvenido,</b></p>

<p>Ests en la pgina <b>Comida para Todos</b>.</p>

<p>Aqu aprenders recetas fciles y deliciosas.</p>

</body>

</html>

Puedes copiar y pegarlo en tu editor de cdigo. Ahora guarda ese archivo con extensin .html o
.htm en tu disco duro. Para ello accedemos al men Archivo y seleccionamos la opcin Guardar
como. En la ventana elegimos el directorio donde deseamos guardarlo y colocaremos su
nombre, por ejemplo mi_pagina.html

Consejo: Utiliza nombres en tus archivos que tengan algunas normas bsicas para
ahorrarte disgustos y los. Nuestro consejo es que no utilices acentos ni espacios ni otros
caracteres raros. Tambin te ayudar escribir siempre las letras en minsculas. Esto no
quiere decir que debes hacer nombres de archivos cortos, es mejor hacerlos descriptivos
para que te aclaren lo que hay dentro. Algn caracter como el guin "-" o el guin bajo "_"
te puede ayudar a separar las palabras. Por ejemplo quienes_somos.html

Con el documento HTML creado, podemos ver el resultado obtenido a partir de un navegador.
Es conveniente, llegado a este punto, hacer hincapi en el hecho de que no todos los
navegadores son idnticos a la hora de interpretar un documento. Desgraciadamente, los
resultados de nuestro cdigo pueden cambiar de uno a otro por lo que resulta aconsejable
visualizar la pgina en varios clientes web. Generalmente se usan Chrome, Internet Explorer y
Firefox como referencias ya que son los ms extendidos.

A decir verdad, en el momento que estas lneas son escritas, Google Chrome acapara la
mayora de usuarios y Firefox e Internet Explorer/Edge estn relegados a un segundo plano.
Esto no quiere decir que lo debemos dejar totalmente de lado ya que incluso una minora que
puede proporcionarnos puede resultar muy importante para nosotros.

Ten en cuenta que el archivo debe tener codificacin UTF-8, como hemos mencionado antes.

http://desarrolloweb.com/manuales/manual-html.html Pgina 14 de 116

 Manual de HTML

Una vez guardado el fichero con extensin .html, para abrir la pgina en el navegador,
simplemente tienes que acceder a la carpeta donde has guardado el archivo y darle un doble
clic. Se trata de una tarea sencilla que estamos seguros que podrs realizar. Si no lo consigues,
fjate que la mayora de los navegadores tienen un men. En el men de "Archivo" de tu
navegador preferido encontrars una opcin como "Abrir archivo", desde donde tambin
podrs abrir una pgina realizada por ti con tu editor de cdigo.

Una vez abierto el archivo podris ver vuestra primera pgina web. Algo sencillita pero por
algo se empieza. Ya veris como en poco tiempo seremos capaces de mejorar sensiblemente.

Fijaos en la parte superior izquierda de la ventana del navegador. Podris comprobar la

presencia del texto delimitado por la etiqueta TITLE. Esta es una de las funciones de esta
etiqueta, cuyo principal cometido es el de servir de referencia en los motores de bsqueda
como Google.

Por otro lado, los elementos que colocamos entre la etiqueta BODY, y su cierre, se pueden ver
en el espacio reservado para el cuerpo de la pgina.

Si ahora hacis click con el botn derecho sobre la pgina y elegs "Ver cdigo fuente de la
pgina" (o View page source) veris como en una ventana accesoria aparece el cdigo de
nuestro archivo HTML. Este recurso es de extremada importancia, ya que nos permite ver el
tipo de tcnicas empleadas por otros para la confeccin de sus pginas.

Con todo esto asimilado ya estamos en condiciones de adentrarnos un poco ms en la

descripcin de algunas de las etiquetas ms empleadas del HTML, en los prximos captulos
de este manual de HTML.

Este artculo es obra de Rubn Alvarez

Fue publicado por primera vez en 29/09/2016

http://desarrolloweb.com/manuales/manual-html.html Pgina 15 de 116

 Manual de HTML

Disponible online en http://desarrolloweb.com/articulos/21.php

http://desarrolloweb.com/manuales/manual-html.html Pgina 16 de 116

 Manual de HTML

Formatos bsicos con HTML

Cmo realizar el formato de textos que se colocan en una pgina web. Aprende a utilizar tus
primeras etiquetas HTML y atributos para definir los contenidos de la pgina y aplicar un
formato bsico.

Formato de prrafos en HTML

Cmo colocar prrafos y saltos de lnea en pginas web. Tambin vemos los
encabezados como prrafos que sirven de titulo.

En los captulos anteriores hemos presentado a ttulo de ejemplo algunas etiquetas que
permiten dar formato a nuestro texto. En este capitulo veremos con ms detalle las ms
ampliamente utilizadas y ejemplificaremos algunas de ellas posteriormente.

Formatear un texto pasa por tareas tan evidentes como definir los prrafos, justificarlos,
introducir vietas, numeraciones o bien poner en negrita, itlica...

Hemos visto que para definir los prrafos nos servimos de la etiqueta P que introduce un salto
y deja una lnea en blanco antes de continuar con el resto del documento.

Podemos tambin usar la etiqueta BR, de la cual no existe su cierre correspondiente (/BR),
para realizar un simple retorno de carro con lo que no dejamos una lnea en blanco sino que
solo cambiamos de lnea.

Nota: Existen otras etiquetas que no tienen su correspondiente de cierre, como IMG para
las imgenes, que veremos ms adelante. Esto ocurre porque un salto de lnea o una imagen
no empiezan y acaban ms adelante sino que slo tienen presencia en un lugar puntual.

Podis comprobar que cambiar de lnea en nuestro documento HTML sin introducir alguna de
estas u otras etiquetas no implica en absoluto un cambio de lnea en la pgina visualizada. En
realidad el navegador introducir el texto y no cambiara de lnea a no ser que esta llegue a su
fin o bien lo especifiquemos con la etiqueta correspondiente.

Los prrafos delimitados por etiquetas P pueden ser fcilmente justificados a la izquierda,
centro o derecha especificando dicha justificacin en el interior de la etiqueta por medio de un
atributo "align". Un atributo no es ms que un parmetro incluido en el interior de la etiqueta
que ayuda a definir el funcionamiento de la etiqueta de una forma ms personalizada. Veremos
a lo largo de este manual cantidad de atributos muy tiles para todo tipo de etiquetas.

http://desarrolloweb.com/manuales/manual-html.html Pgina 17 de 116

 Manual de HTML

Nota: Ten muy en cuenta lo siguiente, que ya hemos comentado anteriormente. El HTML
se usa para definir el contenido. Por tanto, los atributos align que vamos a conocer a
continuacin se estn metiendo a una parcela que no le corresponde al HTML, porque
estn definiendo la forma con la que un prrafo debe de representarse, su estilo, y no el
contenido. Es importante sealarlo para que aprendas que estas cosas se deben hacer
mediante el lenguaje CSS, que sirve para definir el estilo, la forma. En la revisin de este
texto en 2016 hemos decidido mantener estos ejemplos, a pesar que no es el uso ms
correcto del HTML, porque as nos sirve para introducir los atributos de las etiquetas, que
no hemos visto hasta ahora. No obstante, t lo tendrs en cuenta cuando realices tus
pginas y aprenders CSS para ver cmo se deben de aplicar estos formatos.

As, si desesemos introducir un texto alineado a la izquierda escribiramos:

<p align="left">Texto alineado a la izquierda</p>

Para una justificacin al centro:

<p align="center">Texto alineado al centro</p>

Para alinear a la derecha:

<p align="right">Texto alineado a la derecha</p>

Los anteriores prrafos con sus alineaciones se veran ms o menos as:

Como veis, en cada caso el atributo align toma determinados valores que son escritos 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.

Nota: Los atributos tienen sus valores indicados entre comillas ("), pero si no los
indicamos entre comillas tambin funcionar en la mayora de los casos. Sin embargo, es
aconsejable que pongamos siempre las comillas para acostumbrarnos a utilizarlas, por dar
homogeneidad a nuestros cdigos y para evitar errores futuros en sistemas ms
quisquillosos.

El atributo align no es exclusivo de la etiqueta P. Otras etiquetas muy comunes, que veremos
ms adelante, entre las cuales se introducen texto o imgenes, suelen hacer uso de este

http://desarrolloweb.com/manuales/manual-html.html Pgina 18 de 116

 Manual de HTML

atributo de una forma habitual.

Imaginemos un texto relativamente largo donde todos los prrafos estn alineados a la
izquierda (por ejemplo). Una forma de simplificar nuestro cdigo y de evitar introducir
continuamente el atributo align sobre cada una de nuestras etiquetas es utilizando la etiqueta
DIV.

Esta etiqueta, DIV, por si sola no sirve para nada, salvo producir un salto de lnea simple. Para
que realmente se vea tiene que estar acompaada de algn estilo definido en el CSS o de
atributos del HTML como align y lo que nos permite es alinear cualquier elemento (prrafo o
imagen) de la manera que nosotros deseemos.

As, el cdigo:

<p align="left">Parrafo1</p>

<p align="left"> Parrafo3</p>

<p align="left"> Parrafo2</p>

es equivalente a:

<div align="left">

<p>Parrafo1</p>

<p>Parrafo2</p>

<p>Parrafo3</p>

</div>

Nota: Recuerda que align tampoco sera correcto de usar en una etiqueta DIV, por el
mismo motivo que no sera correcto de usar en un prrafo. Nos sirve para conocer facetas
del HTML, que antes se usaban ms y nos han quedado heredadas en las versiones actuales
del lenguaje.

Como hemos visto, la etiqueta DIV marca divisiones en las que definimos un bloque de
contenido, y a los que podramos aplicar estilo de manera global, aunque lo correcto sera
aplicar ese estilo del lado del CSS.

Ejemplo prctico:

Para practicar un poco lo que acabamos de ver vamos a proponer un ejercicio que podis
resolver en vuestros ordenadores. Simplemente queremos construir una pgina que tenga, por
este orden:

2 Prrafos centrados 3 Prrafos alineados a la derecha Un salto de lnea triple 1 prrafo

alineado a la izquierda

El cdigo fuente del ejercicio, con lo que sabemos hasta ahora, podra tener la siguiente forma:

http://desarrolloweb.com/manuales/manual-html.html Pgina 19 de 116

 Manual de HTML

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>parrafos</title>

</head>

<body>

<p align="center">

Ejemplo de formatear parrafos

</p>

<p align="center">

Esto es el resultado:

</p>

<div align="right">

<p>

Que son los buscadores que no tienen porque mantener un ndice y que tienen robots que constantemente recorren Internet en busca de nuevas

pginas para incluirlas en el buscador.

</p>

<p>

Imaginemos un texto relativamente largo donde todos los prrafos estn alineados a la izquierda (por ejemplo).

</p>

<p>

Que son los buscadores que no tienen porque mantener un ndice y que tienen robots que constantemente recorren Internet en busca de nuevas

pginas para incluirlas en el buscador. Estos buscadores suelen tener un formulario accesible desde la pgina inicial, con el enlace

correspondiente. No hay que navegar las categoras para acceder al formulario.

</p>

</div>

<br>

<br>

<br>

<p>

Esto es que acaba... hasta luego...

</p>

</body>

</html>

Al verlo en un navegador obtendramos un resultado como el que sigue:

http://desarrolloweb.com/manuales/manual-html.html Pgina 20 de 116

 Manual de HTML

Encabezados

Existen otras etiquetas para definir prrafos especiales, que harn las veces de ttulos. Son los
encabezados o headings en ingls. Como decimos, son etiquetas que formatean el texto como
un titular, pero el hecho de que cambien el formato no es lo que nos tiene que preocupar, sino
el significado en s de la etiqueta. Es cierto que los navegadores asignan un tamao mayor de
letra y colocan el texto en negrita, pero lo importante es que sirven para definir la estructura
del contenido de un documento HTML. As los navegadores para ciegos podrn informar a los
invidentes que esta es una divisin nueva de contenido y que su titular es este o aquel.
Tambin motores de bsqueda sabrn interpretar mejor el contenido de una pgina en funcin
de los titulares y subtitulares.

Hay varios tipos de encabezados, que se diferencian visualmente en el tamao de la letra que
utilizan. La etiqueta en concreto es la H1, para los encabezados ms grandes, H2 para los de
segundo nivel y as hasta H6 que es el encabezado ms pequeo. Pero lo importante,
insistimos es la estructura que denotan. Una pgina tendr generalmente un encabezado de
nivel 1 y dentro varios de nivel 2. Luego, dentro de los H2 encontraremos si acaso H3, etc.
Nunca debemos usar los encabezados porque nos formateen el texto de una manera dada, sino
porque nuestro documento lo requiera segn su estructura.

Los encabezados implican tambin una separacin en prrafos, as que todo lo que escribamos
dentro de H1 y su cierre (o cualquier otro encabezado) se colocar en un prrafo
independiente.

Podemos ver cmo se presentan algunos encabezados a continuacin.

<h1>Encabezado de nivel 1</h1>

Los encabezados, como otras etiquetas de HTML, soportan el atributo align. Vemos un
ejemplo de encabezado de nivel 2 alineado al centro, aunque repetimos que esta formatacin
debera hacerse en CSS.

http://desarrolloweb.com/manuales/manual-html.html Pgina 21 de 116

 Manual de HTML

<h2 align="center">Encabezado de nivel 2</h2>

Los encabezados se vern de esta manera en la pgina:

Otro ejercicio interesante es construir una pgina web que contenga todos los encabezados
posibles. Se puede ver a continuacin.

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>headings</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>

</body>

</html>

Este artculo es obra de Rubn Alvarez

Fue publicado por primera vez en 30/09/2016
Disponible online en http://desarrolloweb.com/articulos/21.php

http://desarrolloweb.com/manuales/manual-html.html Pgina 22 de 116

 Manual de HTML

Formateando el texto
Vemos como colocar negritas, itlicas, subrayados, subndices y suprendices.

Adems de todo lo relativo a la organizacin de los prrafos, uno de los aspectos primordiales
del formateo de un texto es el de la propia letra. Resulta muy comn y prctico presentar texto
resaltado en negrita, itlica y otros. Paralelamente el uso de ndices, subndices resulta vital
para la publicacin de textos cientficos. Todo esto y mucho ms es posible por medio del
HTML a partir de multitud de etiquetas entre las cuales vamos a destacar algunas.

Pero antes de comenzar cabe hacer una reflexin sobre por qu son interesantes estas
etiquetas y se siguen usando, a pesar que estn entrando prcticamente en el terreno de CSS,
ya que en la prctica estn directamente formateando el aspecto de las fuentes. Son
importantes porque las etiquetas en si no estn para definir un estilo en concreto, sino una
funcin de ciertas palabras dentro de un contenido. Por ejemplo, las negritas quieren decir que
algo tiene ms fuerza o importancia dentro de un texto y una itlica se puede usar para un
texto que citado o algn nfasis particular. En cuanto a subndices y superndices todava es
ms claro, ya que stos especifican cosas que tiene que ver con el contenido y no con la
presentacin.

Negrita

Podemos escribir texto en negrita incluyndolo dentro de las etiquetas B y su cierre (bold).
Esta misma tarea es desempeada por STRONG y su cierre, siendo ambas equivalentes.
Nosotros nos inclinamos por la primeras por simple razn de esfuerzo.

Escribiendo un cdigo de este tipo:

<b>Texto en negrita</b>

Obtenemos este resultado:

Nota: Qu diferencia hay entre B y STRONG? Aunque las dos etiquetas hacen el mismo
efecto, tienen una peculiaridad que las hace distintas. La etiqueta B indica negrita, mientras
que la etiqueta STRONG indica que se debe escribir con fuerza. El HTML lo interpretan los
navegadores segn su criterio, es por eso que las pginas se pueden ver de distinta manera
en unos browsers y en otros. La etiqueta H1 quiere decir "encabezado de nivel 1", es el
navegador el responsable de formatear el texto de manera que parezca un encabezado de
primer nivel. En la prctica los encabezados de los navegadores habituales son muy
parecidos (tamao de letra grande y en negrita), pero otro navegador podra colocar los
encabezados con subrayado si le pareciese oportuno.

La diferencia entre b y STRONG se podr entender ahora. Mientras que B significa

simplemente negrita y todos los navegadores la interpretarn como negrita, STRONG es
una etiqueta que significa que se tiene que resaltar fuertemente el texto y cada navegador es
el responsable de resaltarlo como desee. En la prctica STRONG coloca el texto en negrita,

http://desarrolloweb.com/manuales/manual-html.html Pgina 23 de 116

 Manual de HTML

pero podra ser que un navegador decidiese resaltar colocando negrilla, subrayado y color
rojo en el texto.

Itlica

Tambin en este caso existen dos posibilidades, una corta: I y su cierre (italic) y otra un poco
ms larga: EM y su cierre. En este manual, y en la mayora de las pginas que veris por ah, os
encontraris con la primera forma sin duda ms sencilla a escribir y a acordarse.

He aqu un ejemplo de texto en itlica:

<i>Texto en itlica</i>

Que da el siguiente efecto:

Subrayado

El HTML nos propone tambin para el subrayado el par de etiquetas: U (underlined). Sin
embargo, el uso de subrayados ha de ser aplicado con mucha precaucin dado que los enlaces
hipertexto van, a no ser que se indique lo contrario, subrayados con lo que podemos confundir
al lector y apartarlo del verdadero inters de nuestro texto.

Adems, cabe decir que la etiqueta U se ha quedado obsoleta, debido a que es algo que
realmente se debe hacer del lado del CSS, al ser bsicamente un estilo.

Subndices y suprandices

Este tipo de formato resulta de extremada utilidad para textos cientficos. Las etiquetas
empleadas son:

^y para los suprandices

_y para los subndices

Aqu tenis un ejemplo:

La ¹³CC₃H₄ClNOS es un heterociclo alergeno enriquecido

El resultado:

http://desarrolloweb.com/manuales/manual-html.html Pgina 24 de 116

 Manual de HTML

Anidar etiquetas

Todas estas etiquetas y por supuesto el resto de las vistas y que veremos ms adelante pueden
ser anidadas unas dentro de otras de manera a conseguir resultados diferentes. As, podemos
sin ningn problema crear texto en negrita e itlica embebiendo una etiqueta dentro de la otra:

<b>Esto slo est en negrita <i>y esto en negrita e itlica</i></b>

Esto nos daria:

Consejo: Cuando anides etiquetas HTML hazlo correctamente. Nos referimos a que si
abres etiquetas dentro de otra ms principal, antes de cerrar la etiqueta principal cierres las
etiquetas que hayas abierto dentro de ella.

Debemos evitar cdigos como el siguiente:

<b>Esto est en negrita e <i>itlica</b></i>

En favor de cdigos con etiquetas correctamente anidadas:

<b>Esto est en negrita e <i>itlica</i></b>

Esto es muy aconsejable, aunque los navegadores entiendan bien las etiquetas mal
anidadas, por dos razones:

1. Sistemas como XML no son tan permisivos con estos errores y puede que en el
futuro nuestras pginas no funcionen correcamente.
2. A los navegadores les cuesta mucho tiempo de procesamiento resolver este tipo de
errores, incluso ms que construir la propia pgina y debemos evitarles que sufran
por una mala codificacin.

Todo lo que se ha visto hasta el momento en el Manual de HTML se puede ver en un vdeo
para aprender visualmente. Si te interesa puedes acceder al Videotutorial de HTML - Parte 1,
documento bsico y formato de texto.

Este artculo es obra de Rubn Alvarez

Fue publicado por primera vez en 11/10/2001
Disponible online en http://desarrolloweb.com/articulos/21.php

Los colores y HTML

http://desarrolloweb.com/manuales/manual-html.html Pgina 25 de 116

 Manual de HTML

En este artculo aprenders a crear colores en notacin RGB con valores en

hexadecimal, la manera ms habitual de expresar un color en el lenguaje HTML.
Explicamos la correcta utilizacin de los colores en el HTML.

En la composicin de webs juegan un papel muy importante los colores. Usar una paleta de
colores definida suele ayudar a la consistencia de un diseo y a transmitir ciertas sensaciones
al usuario. Como parte de nuestro aprendizaje de HTML tenemos que detenernos a
comprender cmo se expresan los colores en el lenguaje.

En HTML se usa una notacin especfica de especificar un color, compuesta por tres valores
"RGB": Red, Green, Blue. Rojo, Verde y Azul. Es decir, que para conseguir un color cualquiera
mezclaremos cantidades de cada uno de esos colores. RGB es el modelo usado para la creacin
de colores de los monitores y televisores, as que es un excelente modo de expresar color en un
medio digital como una web.

Los valores RBG en HTML se indican en numeracin hexadecimal, en base 16. (Los dgitos
pueden crecer hasta 16. Como no hay tantos dgitos numricos, se utilizan las letras de la A a la
F).

Para conseguir un color, mezclaremos valores asignando dos dgitos a cada valor RBG. De esta
manera: "#RRGGBB"

Como has observado, colocamos tambin una almohadilla "#" al principio, para indicar que
esa cadena es un valor de color en hexadecimal.

Ms adelante en el artculo veremos ejemplos en una grande paleta, com sus valores en RGB.
No obstante ejemplos podran ser #000000 para el negro, #FFFFFF para el blanco, #660000
sera un rojo oscuro o #FF0000 un rojo brillante.

Nota: Habrs podido observar en alguna ocasin que los colores tambin se pueden
expresar con algunas palabras, de hecho en el artculo sobre Color y tipo de letra ya lo
comentamos. No obstante, es bastante ms comn escribir en RGB, porque es ms verstil
y podemos conseguir ms fcilmente cualquier tonalidad deseada.

Atributos de color en etiquetas HTML

En HTML existen numerosas etiquetas que soportan atributos de color. Para que tengas una

http://desarrolloweb.com/manuales/manual-html.html Pgina 26 de 116

 Manual de HTML

primera referencia, as se cambiara la fuente para escribir en rojo:

<font color="#FF0000">Rojo</font>

Como ves, al Atributo color le damos un valor RGB en formato hexadecimal. El caracter # se
coloca al principio de la cadena.

Nota: De nuevo tenemos que advertir sobre la necesidad de expresar todo lo que son
estilos mediante CSS. En HTML nos debemos centrar en lo que es escribir el contenido y en
CSS en aplicar el estilo. Por supuesto, el color es ms estilo que contenido, as que debera ir
en el CSS. Es motivo por el cual toda la etiqueta FONT ha quedado en desuso, porque
solamente nos serva para aplicar estilo. Para tu tranquilidad, en CSS los colores se pueden
expresar de la misma manera que en HTML, por lo que no tendrs que aprender nada
nuevo.

Por poner otro ejemplo, la etiqueta TABLE admite que se le exprese el color de fondo de la
tabla. La veremos ms adelante, pero lo consigues con el atributo bgcolor.

<table bgcolor="#ff8030">

Combinar otros colores

Al principio puede parecer difcil crear combinaciones de color con valores hexadecimales,
pero con la prctica nos iremos acostumbrando y hasta seremos capaces de pensar un color y
conseguir de cabeza un valor RGB aproximado. Nos vendr bien tener en mente la rueda de
colores:

Pero al final de lo que resulta ms fcil echar mano es de un programa de diseo grfico, que
tiene selectores de color que nos suelen dar los valores RGB para que los podamos usar en
cualquier programa. Algunos editores vienen con "color pickers" integrados para facilitar esta
tarea, sin tener que cambiar de programa. La mayora de los editores puede instalar de manera
adicional plugins para implementar selectores de color, ya que es una demanda muy habitual
de los desarrolladores.

Por ejemplo, otros colores RGB los puedes combinar as. Aunque al final de este artculo tienes
una tabla de color completa.

http://desarrolloweb.com/manuales/manual-html.html Pgina 27 de 116

 Manual de HTML

Colores seguros

Debemos estar preparados para recibir visitas desde todo tipo de dispositivos y a todos les
debemos ofrecer una adecuada experiencia de usuario. En lo que respecta a los colores, no
podemos saber a priori qu tipo de pantalla va a tener la persona que nos visita y la resolucin
de color. Por eso una buena idea es usar aquellos colores considerados seguros: "Safe colors",
colores compatibles con todos los sistemas.

Nota: Hoy la necesidad de usar colores seguros (aquellos que se vern bien en todos los
monitores, independientemente de su paleta de color), no es tan grande como hace aos,
porque la tecnologa ha evolucionado mucho y es raro encontrar un monitor que solo
soporte 256 colores. No obstante es un conocimiento que resulta interesante por el hecho
de remarcar la naturaleza universal de la web y la necesidad de construir pginas que sean
capaces de adaptarse a cada medio donde va a ser consultada. En este manual de HTML no
vamos a entrar en este tipo de detalles, pero si te interesan deberas leer el Manual de
Responsive Web Design.

La forma de conseguir colores seguros es limitando nuestros colores a los que se pueden
conseguir utilizando los siguientes valores:

00
33
66
99
AA
CC
FF

Es interesante comentar que, cuando usamos colores seguros, podemos resumir la notacin
RGB usando tres caracteres en vez de 6. Por ejemplo, #000 equivale a #000000. O #ABC
equivale a #AABBCC.

Usando todas las combinaciones de "safe colors", conseguimos la siguiente paleta de colores:

http://desarrolloweb.com/manuales/manual-html.html Pgina 28 de 116

 Manual de HTML

Nota para la curiosidad: Este fue el primer artculo publicado en DesarrolloWeb.com.

Aunque revisado en 2016 su publicacin original es de 1999.

Este artculo es obra de Miguel Angel Alvarez

Fue publicado por primera vez en 30/09/2016
Disponible online en http://desarrolloweb.com/articulos/colores-html.html

Atributos para pginas

Explicamos una serie de atributos que se aplican de manera global a toda la
pgina, como el color de fondo el del texto, de los enlaces, mrgenes, etc.

En este artculo nos metemos de nuevo en el terreno del CSS. Veremos todo tipo de estilos que
se pueden aplicar a una pgina, colores o imgenes de fondo, colores para los enlaces, etc.
Todo eso tiene que ir en el CSS. Si ests decidido a aprender CSS a continuacin de aprender
HTML (que deberas), puedes saltarte este texto tranquilamente. Ahora bien, si quieres seguir
aprendiendo cosas del HTML y te apetece empezar con lo que sabes a poner un poco de color a
la pgina, lee a continuacin.

Las pginas HTML pueden construirse con variedad de atributos que le pueden dar un aspecto
a la pgina muy personalizado. Podemos definir atributos como el color de fondo, el color del

http://desarrolloweb.com/manuales/manual-html.html Pgina 29 de 116

 Manual de HTML

texto o de los enlaces. Estos atributos se definen en la etiqueta BODY y, como decamos son
generales a toda la pgina.

Lo mejor para explicar su funcionamiento es verlos uno por uno.

Atributos para fondos

bgcolor: especificamos un color de fondo para la pgina. En el captulo anterior y en el taller

de los colores y HTML hemos aprendido a construir cualquier color, con su nombre o su valor
RGB. El color de fondo que podemos asignar con bgcolor es un color plano, es decir el mismo
para toda la superficie del navegador.

background: sirve para indicar la colocacin de una imagen como fondo de la pgina. La
imagen se coloca haciendo un mosaico, es decir, se repite muchas veces hasta ocupar todo el
espacio del fondo de la pgina. En captulos ms adelante veremos como se insertan imgenes
con HTML y los tipos de imgenes que se pueden utilizar.

Ejemplo de fondo

Vamos a colocar esta imagen como fondo en la pgina.

La imagen se llama fondo.jpg. Puedes guardarla en tu disco duro para practicar t tambin con
ella, mediante un clic con el botn derecho. Para trabajar con esta imagen vamos a colocarla en
la misma carpeta donde est el HTML donde vamos a trabajar. Ms adelante tambin
hablaremos sobre cmo acceder a otros archivos que estn en otras carpetas, mediante la
composicin de rutas un poco ms complejas, pero por el momento suponemos que la imagen
se encuentra en el mismo directorio que la pgina.

Para colocar esta imagen como fondo de mosaico, se escribira la siguiente etiqueta BODY.

<body background="fondo.jpg">

Se puede ver el efecto que dara en la siguiente imagen como fondo.

http://desarrolloweb.com/manuales/manual-html.html Pgina 30 de 116

 Manual de HTML

Consejo: Siempre que coloquemos una imagen de fondo, debemos poner tambin un color
de fondo cercano al color de la imagen.

Esto se debe a que, al colocar una imagen de fondo, el texto de la pgina debemos colocarlo
en un color que contraste suficientemente con dicho fondo. Si el visitante no puede ver el
fondo por cualquier cuestin (Por ejemplo tener desactivada la carga de imgenes) puede
que el texto no contraste lo suficiente con el color de fondo por defecto de la web.

Creo que lo mejor ser poner un ejemplo. Si la imagen de fondo es oscura, tendremos que
poner un texto claro para que se pueda leer. Si el visitante que accede a la pgina no ve la
imagen de fondo, le saldr el fondo por defecto, que generalmente es blanco, de modo que
al tener un texto con color claro sobre un fondo blanco, nos pasar que no podremos leer el
texto convenientemente.

Ocurre parecido cuando se est cargando la pgina. Si todava no ha llegado a nuestro

sistema la imagen de fondo, se ver el fondo que hayamos seleccionado con bgcolor y es
interesante que sea parecido al color de la imagen para que se pueda leer el texto mientras
se carga la imagen de fondo.

Color del texto

text: este atributo sirve para asignar el color del texto de la pgina. Por defecto es el negro.

Adems del color del texto, tenemos tres atributos para asignar el color de los enlaces de la
pgina. Ya debemos saber que los enlaces deben diferenciarse del resto del texto de la pgina
para que los usuarios puedan identificarlos fcilmente. Para ello suelen aparecer subrayados y
con un color ms vivo que el texto. Los tres atributos son los siguientes:

link: el color de los enlaces que no han sido visitados. (por defecto es azul clarito)

vlink: el color de los enlaces visitandos. La "v" viene justamente de la palabra visitado. Es el
color que tendrn los enlaces que ya hemos visitado. Por defecto su color es morado. Este color
debera ser un poco menos vivo que el color de los enlaces normales.

alink: es el color de los enlaces activos. Un enlace est activo en el preciso instante que se
pulsa. A veces es difcil darse cuenta cuando un enlace est activo porque en el momento en el
que se activa es porque lo estamos pulsando y en ese caso el navegador abandonar la pgina
rpidamente y no podremos ver el enlace activo ms que por unos instantes mnimos.

http://desarrolloweb.com/manuales/manual-html.html Pgina 31 de 116

 Manual de HTML

Ejemplo de color del texto

Vamos a ver una pgina donde el color de fondo sea negro, y los colores del texto y los enlaces
sean claros. Pondremos el color de texto balnco y los enlaces amarillos, ms resaltados los que
no estn visitados y menos resaltados lo que ya estn visitados. Para ello escribiramos la
etiqueta BODY as:

<body bgcolor="#000000" text="#ffffff" link="#ffff33" alink="#ffffcc" vlink="ffff00">

El efecto de esta definicin de colores para la pgina se vera de la siguiente manera.

Mrgenes

Con otros atributos de la etiqueta BODY se pueden asignan espacios de margen en las pginas,
lo que es muy til para eliminar los mrgenes en blanco que aparecen a los lados, arriba y
debajo de la pgina. Estos atributos son distintos para Internet Explorer y para otros
navegadores, por lo que debemos utilizarlos todos si queremos que todos los clientes web los
interpreten perfectamente.

leftmargin: para indicar el margen a los lados de la pgina. Vlido para iexplorer.

topmargin: para indicar el margen arriba y debajo de la pgina. Para iexplorer.

marginwidth: la contrapartida de leftmargin para Firefox. (Margen a los lados)

marginheight: igual que topmargin, pero para Firefox. (Margen arriba y abajo)

Tenemos un artculo sobre la utilizacin de estos atributos para hacer diseos avanzados con
tablas en distintas definiciones de pantalla, que puede ser interesante de leer.

Un ejemplo de pgina sin margen es la propia pgina de DesarrolloWeb.com, que ests

visitando actualmente. (Por lo menos a la hora de escribir este artculo) Adems, vamos a ver
otra pgina sin mrgenes, por si alguien necesita ver el ejemplo en estas lneas.

<body topmargin=0 leftmargin=0 marginheight=0 marginwidth=0 bgcolor="ffffff">

<table width=100% bgcolor=ff6666><tr><td>

http://desarrolloweb.com/manuales/manual-html.html Pgina 32 de 116

 Manual de HTML

<h1>Hola amigos</h1>

<br>

<br>

Gracias por visitarme!

</td></tr></table>

</body>

Esta pgina tiene el fondo blanco y dentro una tabla con el fondo rojo. En la pgina podremos
ver que la tabla ocupa el espacio en la pgina sin dejar sitio para ningn tipo de margen.

Todo lo que hemos visto hasta ahora en el Manual de HTML lo podemos encontrar en vdeo y
en concreto las explicaciones de los ltimos artculos se han recogido en el Vdeotutorial de
HTML - Fuentes, colores y estilos de BODY.

Por qu todos estos estilos deberan definirse en CSS

Como hemos dicho, todos estos estilos deberan indicarse en el CSS. Existen muchos motivos
para ello pero uno de ellos seguro que ahora se podr comprender. Imagina un sitio web con
30 pginas distintas (no tiene que ser muy grande para llegar a ese nmero). Imagina que
llegado un da te cansas del color negro de fondo y lo quieres azul, y el color de los enlaces
amarillo y lo quieres verde. Si tienes los estilos en el HTML tendras que ir, pgina a pgina,
cambiando los estilos "n" veces.

CSS, entre otras cosas, te permite tener los estilos definidos en un nico lugar, un archivo con
cdigo en texto plano, y todas las pginas de tu sitio web usaran ese mismo archivo para
definir su presentacin. As, si un da te cansas del color de fondo, el color del texto, el tipo de
letra o su tamao, entonces solo tienes que ir a un nico lugar (el archivo CSS) y cambiarlo una
nica vez.

Todo eso lo veremos con detalle en el Manual de CSS.

Este artculo es obra de Miguel Angel Alvarez

Fue publicado por primera vez en 04/03/2002
Disponible online en http://desarrolloweb.com/articulos/21.php

Caracteres especiales
Una referencia til, y una lista completa de los caracteres especiales del HTML.

En este artculo vamos a ver un tpico de frecuente consulta cuando se est aprendiendo a
construir una pgina web. Son los caracteres especiales, unos cdigos propios del lenguaje
HTML que son capaces de entender los navegadores y que nos sirven para representar ciertos
smbolos.

La necesidad de la existencia de los caracteres especiales responde a dos motivos que

explicaremos a continuacin, remarcando cul de ellos es importante en la actualidad y por

http://desarrolloweb.com/manuales/manual-html.html Pgina 33 de 116

 Manual de HTML

qu (actualizado en octubre de 2016). Al final del artculo tambin encontrars unas tablas con
un amplio conjunto de caracteres especiales y sus cdigos, para que te sirva de referencia.

Luego entraremos en detalles, pero para ir viendo un ejemplo, la "" (a minscula acentuada)
se escribe "" de modo que la palabra pgina se podra escribir en una pgina HTML de este
modo: pgina.

Por qu existen los caracteres especiales

Los motivos por los que debemos usar los caracteres especiales son los siguientes:

1. Una pgina web se ha de ver en pases distintos, que usan conjuntos de caracteres
distintos. El lenguaje HTML nos ofrece un mecanismo por el que podemos estar
seguros que una serie de caracteres "raros" se van a ver bien en todos los ordenadores
del mundo, independientemente de su juego de caracteres local.
2. Por otra parte, ciertos caracteres forman parte de las etiquetas como el "mayor qu" o
"menor qu" que las delimitan. Mediante los caracteres especiales se definen unos
cdigos, que debemos usar cuando queremos poner uno de estos caracteres en una
pgina,

De estos dos motivos, es verdaderamente importante el segundo, que es un asunto derivado

del propio HTML y sus necesidades de codificacin. Pero el primer motivo, aunque fue
importante, hoy no lo es tanto porque la recomendacin es usar UTF-8 y ste juego de
caracteres s que permite representar cualquiera de los smbolos que iremos a necesitar
normalmente (todos los acentos, ee, smbolo del Euro, etc.).

Caracteres especiales bsicos

Estos son los caracteres especiales que se usan en HTML para no confundir un principio o final
de etiqueta, unas comillas o un & con su correspondiente caracter.

Caracteres especiales del HTML 2.0

Ahora vamos a ver caracteres especiales, aunque muchos de ellos estn disponibles en UTF-8,
por lo que, si respetamos las recomendaciones de HTML5 para los juegos de caracteres, no
necesitamos realmente utilizarlos.

http://desarrolloweb.com/manuales/manual-html.html Pgina 34 de 116

 Manual de HTML

Caracteres especiales del HTML 3.2

http://desarrolloweb.com/manuales/manual-html.html Pgina 35 de 116

 Manual de HTML

Otros caracteres especiales

Referencia: Hay un videotutorial en DesarrolloWeb.com que trata sobre enlaces y

caracteres especiales. No son temas muy relacionados entre si, pero seguro que nos sirve
como prctica para aprender todo lo que se ha tratado en este artculo.

Este artculo es obra de Miguel Angel Alvarez

Fue publicado por primera vez en 01/10/2016
Disponible online en http://desarrolloweb.com/articulos/21.php

http://desarrolloweb.com/manuales/manual-html.html Pgina 36 de 116

 Manual de HTML

http://desarrolloweb.com/manuales/manual-html.html Pgina 37 de 116

 Manual de HTML

Listas en HTML

A continuacin comenzaremos a explicar las listas de HTML que implican varias etiquetas
para crear su estructura. Veremos varios tipos de listas que se pueden utilizar para diversos
objetivos.

Listas en HTML: Listas desordenadas

Vemos lo que son las listas y sealamos los tres tipos que hay. Estudiamos las
listas desordenadas.

Las posibilidades que nos ofrece el HTML en cuestin de tratamiento de texto son realmente
notables. No se limitan a lo visto hasta ahora, sino que van ms lejos todava. Varios ejemplos
de ello son las listas, que sirven para enumerar y definir elementos, los textos preformateados
y las cabeceras o ttulos.

Las listas originalmente estn pensadas para citar, numerar y definir cosas a travs de
caractersticas, o al menos as lo hacemos en la escritura de textos. Sin embargo, las listas
finalmente se utilizan para mucho ms que enumerar una serie de puntos, en realidad son un
recurso muy interesante para poder maquetar elementos diversos, como barras de navegacin,
pestaas etc. Pero esto lo veremos ms adelante, cuando apliquemos estilos CSS a las listas.

De momento, en este Manual de HTML, trataremos las listas desde el punto de vista de su
construccin y veremos los diferentes tipos que existen, y que podemos utilizar para resolver
nuestras distintas necesidades a la hora de escribir textos en HTML.

Referencia: Todos los tipos de listas los hemos explicado en vdeo y se pueden revisar en
el Videotutorial de HTML, ms concretamente en la entrega siguiente: Vdeo sobre las
Listas HTML.

Podemos distinguir tres tipos de listas HTML:

Listas desordenadas
Listas ordenadas
Listas de definicin

Las veremos detenidamente una a una.

Listas desordenadas

http://desarrolloweb.com/manuales/manual-html.html Pgina 38 de 116

 Manual de HTML

Son delimitadas por las etiquetas UL y su cierre (unordered list). Cada uno de los elementos de
la lista es citado por medio de una etiqueta LI (La LI tiene su cierre, aunque si no lo colocas el
navegador al ver el siguiente LI interpretar que ests cerrando el anterior). La cosa queda as:

<p>Pases del mundo</p>

<ul>

<li>Argentina</li>

<li>Per</li>

<li>Chile</li>

</ul>

El resultado:

Podemos definir el tipo de vieta empleada para cada elemento. Para ello debemos
especificarlo por medio del atributo type incluido dentro de la etiqueta de apertura UL, si
queremos que el estilo sea vlido para toda la lista,o dentro le la etiqueta LI si queremos
hacerlo especfico de un solo elemento. La sintaxis es del siguiente tipo:

<ul type="tipo de vieta">

donde tipo de vieta puede ser uno de los siguientes:

circle
disc
square

Nota: En algunos navegadores no funciona la opcin de cambiar el tipo de vieta a mostrar

y por mucho que nos empeemos, siempre saldr el redondel negro.

En caso de que no funcione siempre podemos construir la lista a mano con la vieta que
queramos utilizando las tablas de HTML. Veremos ms adelante cmo trabajar con tablas.

Tambin es posible definir el tipo de vieta o bullet por medio de CSS.

Vamos a ver un ejemplo de lista con un cuadrado en lugar de un redondel, y en el ltimo

http://desarrolloweb.com/manuales/manual-html.html Pgina 39 de 116

 Manual de HTML

elemento colocaremos un crculo. 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>Elemento 2

<li>Elemento 3

<li type="circle">Elemento 4

</ul>

Que tiene como resultado:

Este artculo es obra de Rubn Alvarez

Fue publicado por primera vez en 11/10/2001
Disponible online en http://desarrolloweb.com/articulos/21.php

Listas en HTML: Listas ordenadas

Estudiamos otro tipo de listas: las listas ordenadas.

Estamos en el Manual de HTML y continuamos estudiando las listas de HTML, con las que
crear estructuras atractivas para presentar la informacin. En el captulo anterior vimos las
listas desordenadas y ahora estudiaremos las listas ordenadas.

Listas ordenadas

Las listas ordenadas sirven tambin para presentar informacin, en diversos elementos o
items, con la particularidad que stos estarn predecidos de un nmero o una letra para
enumerarlos, siempre por un orden.

Para realizar las listas ordenadas usaremos las etiquetas OL (ordered list) y su cierre. Cada
elemento sera igualmente indicado por la etiqueta LI, que ya vimos en las listas desordenadas.

Pongamos un ejemplo:

<p>Reglas de comportamiento en el trabajo</p>

http://desarrolloweb.com/manuales/manual-html.html Pgina 40 de 116

 Manual de HTML

<ol>

<li>El jefe siempre tiene la razn

<li>En caso de duda aplicar regla 1

</ol>

El resultado es:

Del mismo modo que para las listas desordenadas, las listas ordenadas ofrecen la posibilidad
de modificar el estilo. En concreto nos es posible especificar el tipo de numeracin empleado
eligiendo entre nmeros (1, 2, 3...), letras (a, b, c...) y sus maysculas (A, B, C,...) y nmeros
romanos en sus versiones maysculas (I, II, III,...) y minsculas (i, ii, iii,...).

Para realizar dicha seleccin hemos de utilizar, como para el caso precedente, el atributo type,
el cual ser situado dentro de la etiqueta OL. Los valores que puede tomar el atributo en este
caso son:

Nota: Recordamos que en algunos navegadores no funciona la opcin de cambiar el tipo de

vieta a mostrar.

Puede que en algn caso deseemos comenzar nuestra enumeracin por un nmero o letra que
no tiene por qu ser necesariamente el primero de todos. Para solventar esta situacin,
podemos utilizar un segundo atributo, start, que tendra como valor un nmero. Este nmero,
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 nmeros romanos, el navegador se encarga de hacer la
traduccin del nmero a la letra correspondiente.

Os proponemos un ejemplo usando este tipo de atributos:

<p>Ordenamos por nmeros</p>

<ol type="1">

<li>Elemento 1

http://desarrolloweb.com/manuales/manual-html.html Pgina 41 de 116

 Manual de HTML

<li> Elemento 2

</ol>

<p>Ordenamos por letras</p>

<ol type="a">

<li>Elemento a

<li> Elemento b

</ol>

<p>Ordenamos por nmeros romanos empezando por el 10</p>

<ol type="i" start="10">

<li>Elemento x

<li> Elemento xi

</ol>

El resultado:

Este artculo es obra de Rubn Alvarez

Fue publicado por primera vez en 11/10/2001
Disponible online en http://desarrolloweb.com/articulos/21.php

Listas en HTML: listas de definicin

Vemos las listas de definicin y aprendemos a anidar listas para crear
estructuras lista ms complejas.

Terminamos el tema de listas en el manual de HTML de DesarrolloWeb.com estudiando las

http://desarrolloweb.com/manuales/manual-html.html Pgina 42 de 116

 Manual de HTML

listas de definicin. Veremos tambin la anidacin de listas, que resultar un recurso

interesante para estructurar datos un poco ms complejos o enumerar elementos con una
jerarqua.

Listas de definicin

Las listas de definicin sirven para hacer un conjunto de elementos con pares concepto-
descripcin. Es decir, se especificarn varios trminos por su nombre y se escribir una
definicin para cada uno. Cada elemento es presentado junto con su definicin, uno detrs de
otro.

Nota: Este tipo de listas la verdad es que no se usan mucho. Es un buen recurso, porque
permite aplicar semntica a los items de una lista, que quedan asociados a su definicin,
por lo que usarlas no ser una mala idea, sin embargo casi nadie las usa en la prctica.

Para realizar una lista de definicin, ja etiqueta principal es DL y su cierre (definition list). La
etiquetas del elemento y su definicin son DT (definition term) y DD (definition definition)
respectivamente.

Aqu os proponemos un cdigo que podr aclarar este sistema:

<p>Diccionario de la Real Academia</p>

<dl>

<dt>Brujula

<dd>Serula montada en una escbula

<dt>Oreja

<dd>Sesenta minutejos

</dl>

El efecto producido:

Fijaos en que cada lnea DD est desplazada hacia la izquierda. Este tipo de etiquetas son

http://desarrolloweb.com/manuales/manual-html.html Pgina 43 de 116

 Manual de HTML

usadas a menudo con el propsito de crear textos ms o menos desplazados hacia la izquierda.

El cdigo:

<dl>

<dd>Primer nivel de desplazamiento

<dl>

<dd>Segundo nivel de desplazamiento

<dl>

<dd>Tercer nivel de desplazamiento

</dl>

</dl>

</dl>

El resultado:

Anidando listas

Nada nos impide utilizar todas estas etiquetas de forma anidada como hemos visto en otros
casos. De esta forma, podemos conseguir listas mixtas como por ejemplo:

<p>Ciudades del mundo</p>

<ul>

<li>Argentina

<ol>

<li>Buenos Aires

<li>Bariloche

</ol>

<li>Uruguay

<ol>

<li>Montevideo

<li>Punta del Este

</ol>

</ul>

De esta forma creamos una lista como esta:

http://desarrolloweb.com/manuales/manual-html.html Pgina 44 de 116

 Manual de HTML

Referencia: Con esto hemos acabado el tema sobre Listas HTML, sin embargo, podemos
completar las explicaciones en el Videotutorial de HTML, en el Vdeo sobre las Listas
HTML.

Este artculo es obra de Rubn Alvarez

Fue publicado por primera vez en 11/10/2001
Disponible online en http://desarrolloweb.com/articulos/21.php

http://desarrolloweb.com/manuales/manual-html.html Pgina 45 de 116

 Manual de HTML

Todo sobre los enlaces en HTML

Los enlaces son los elementos que nos permiten navegar por las pginas HTML y son tan
importantes que la web no tendra sentido sin ellos. Dedicaremos varios captulos a explorar
los distintos tipos de enlaces, sus usos y diversos consejos para hacer pginas navegables.

Enlaces en HTML
Vemos qu son los enlaces en HTML y los distintos tipos.

Hasta aqu, hemos podido ver que una pgina web es un archivo HTML en el que podemos
incluir, entre otras cosas, textos formateados a nuestro gusto e imgenes (las veremos con
detalle enseguida). Del mismo modo, un sitio web podr ser considerado como el conjunto de
archivos, principalmente pginas HTML e imgenes, que constituyen el contenido al que el
navegante tiene acceso.

Sin embargo, no podramos hablar de navegante o de navegacin si estos archivos HTML no

estuviesen debidamente conectados entre ellos y con el exterior de nuestro sitio por medio de
enlaces hipertexto. En efecto, el atractivo original del HTML radica en la posible puesta en
relacin de los contenidos de los archivos introduciendo referencias bajo forma de enlaces que
permitan un acceso rpido a la informacin deseada. De poco servira en la red tener pginas
aisladas a las que la gente no puede acceder y desde las que la gente no puede saltar a otras.

Un enlace puede ser fcilmente detectado por el usuario en una pgina. Basta con deslizar el
puntero del ratn sobre las imgenes o el texto y ver como cambia de su forma original
transformndose por regla general en una mano con un dedo sealador. Adicionalmente, estos
enlaces suelen ir, en el caso de los textos, coloreados y subrayados para que el usuario no tenga
dificultad en reconocerlos.

Sintaxis de un enlace

Para colocar un enlace, nos serviremos de las etiquetas A y su cierre. Dentro de la etiqueta de
apertura deberemos especificar asimismo el destino del enlace. Este destino ser introducido
bajo forma de atributo, el cual lleva por nombre "href".

La sintaxis general de un enlace es por tanto de la forma:

<a href="destino">contenido</a>

Siendo el "contenido" un texto o una imagen. Es la parte de la pgina que se colocar activa y
donde deberemos pulsar para acceder al enlace. Por su parte, "destino" ser una pgina, un

http://desarrolloweb.com/manuales/manual-html.html Pgina 46 de 116

 Manual de HTML

correo electrnico o un archivo.

Por ejemplo, un enlace a la home de DesarrolloWeb, tendra esta manera

<a href="http://www.desarrolloweb.com/">Home de Desarrolloweb.com</a>

Ahora, si queremos que el contenido del enlace sea una imagen y no un texto, podremos
colocar la correspondiente etiqueta IMG dentro de la etiqueta A.

<a href="http://www.escuela.it"><img src="logo.jpg"></a>

Nota: Todava no hemos explicado la etiqueta IMG, pero no te preocupes porque ms

adelante encontrars un apartado donde se explica cmo se trabaja con imgenes en
HTML.

El aspecto de los enlaces

Nosotros mediante el HTML, y las hojas de estilo CSS, podemos definir el aspecto que tendrn
los enlaces en una pgina. Sin embargo, ya de manera predeterminada el navegador los
destaca para que los podamos distinguir. Generalmente encontraremos a los enlaces
subrayados y coloreados en azul, aunque esta regla depende del navegador del usuario y de sus
estilos definidos como predeterminados.

En el caso de las imgenes que sirvan de enlace, tradicionalmente aparecan encuadradas en

un marco azul por defecto. Aunque ese estilo predeterminado tambin cambiar dependiendo
del navegador y de hecho, en 2016, la mayora de navegadores ya no ponen ese marco azul, as
que tenemos un ejemplo de cmo los estilos predeterminados pueden cambiar con el tiempo y
con versiones de navegador.

Por ese incierto estilo predeterminado siempre es interesante marcar por nosotros mismos el
estilo que los enlaces deben tener en nuestra pgina. Ese estilo lo correcto es colocarlo en el
cdigo de CSS, pero tambin se puede definir en la etiqueta BODY. Eso es algo que se explic
en el artculo Atributos generales de la pgina.

Tipos de enlaces

Para estudiar en profundidad los enlaces tenemos que clasificarlos por su tipo, porque
dependiendo ese tipo algunas cosas cambiarn a la hora de construirlos.

En funcin del destino los enlaces son clsicamente agrupados del siguiente modo:

Enlaces internos: los que se dirigen a otras partes dentro de la misma pgina.
Enlaces locales: los que se dirigen a otras pginas del mismo sitio web.
Enlaces remotos: los dirigidos hacia pginas de otros sitios web.

http://desarrolloweb.com/manuales/manual-html.html Pgina 47 de 116

 Manual de HTML

Enlaces con direcciones de correo: para crear un mensaje de correo dirigido a una
direccin.
Enlaces con archivos: para que los usuarios puedan hacer download de ficheros.

Todos estos tipos de enlaces los iremos repasando en los prximos artculos del Manual de
HTML.

Referencia: Para complementar las explicaciones sobre los enlaces HTML recomendamos
ver el videotutorial sobre enlaces.

Este artculo es obra de Rubn Alvarez

Fue publicado por primera vez en 02/10/2016
Disponible online en http://desarrolloweb.com/articulos/21.php

Enlaces internos
Los enlaces HTML que se hacen con otras partes de la misma pgina.

Quizs "Enlaces internos" puede ser un poco ambiguo, porque podramos pensar tanto en
enlaces internos dentro del mismo sitio web o enlaces internos dentro de la misma pgina.
Nosotros en este manual nos referimos a los los enlaces que apuntan a un lugar diferente
dentro de la misma pgina. Llamamos "Enlaces locales" a los enlaces que apuntan a otra
pgina dentro de mismo sitio web.

Este tipo de enlaces son esencialmente utilizados en pginas donde el acceso a los contenidos
puede verse dificultado debido al gran tamao del texto. Es un enlace poco habitual en pginas
web como blogs o pginas comerciales, que presentan un producto o un servicio. Se
encuentran ms en pginas de referencia, donde adems el contenido est dividido en diversas
secciones y queremos poder navegar entre esas secciones que se encuentran dentro del mismo
archivo HTML. Otro uso habitual de los enlaces internos es ofrecer al visitante la posibilidad
de ir rpidamente al principio de la pgina, a la parte de arriba.

Enlace y ancla

Para crear un enlace de este tipo es necesario dos componentes, que para aclararnos los vamos
a nombrar de la siguiente forma:

El enlace: Sera el link, lo que aparecer en la pgina para que el usuario haga clic. Sera
el enlace de origen propiamente dicho.
El ancla: Adems se requiere una marca, para saber dnde se dirige el enlace. Es el
destino donde nos llevar el navegador al pulsar el link. Le llamamos ancla porque nos
permite anclar a esa posicin otros enlaces.

Ambos elementos se crean con la misma etiqueta A, tanto el enlace como el ancla. Solo que
usaremos distintos atributos dentro de esa etiqueta.

Sintaxis de los enlaces en la misma pgina

http://desarrolloweb.com/manuales/manual-html.html Pgina 48 de 116

 Manual de HTML

Veamos ms claramente como funcionan estos enlaces con un ejemplo sencillo: Supongamos
que queremos crear un enlace que apunte al final de la pgina. Lo primero ser colocar nuestro
enlace origen. Este enlace de origen es el que el usuario podr hacer clic.

<a href="#abajo">Ir abajo</a>

Como podis ver, el contenido del enlace es el texto "Ir abajo" y el destino, #abajo, es un punto
de la misma pgina que todava no hemos definido. Ojo al smbolo "#": es l quien especifica al
navegador que el enlace apunta a una seccin en particular, a un punto interno dentro de la
misma pgina.

En segundo lugar, hay que generar un enlace en el destino, al que hemos llamado "ancla". Este
enlace no llevar contenido, puesto que no queremos que nadie lo pulse, sino que nos sirva de
ancla. Tampoco llevar el atributo "href", porque no tiene que apuntar a ningn lugar, sino que
le apuntarn a l. Para poder distinguirlo de otros posibles enlaces realizados dentro de la
misma pgina a cada ancla se le asigna un nombre por medio del atributo "name". En este
caso, la etiqueta que escribiremos ser sta:

<a name="abajo"></a>

Para entender cmo crear los enlaces internos nos tenemos que fijar en el name="abajo" del
ancla. Pues bien, si queremos crear un enlace interno a esta ancla, colocaremos en en enlace de
origen el href="#abajo", o sea, el nombre del enlace ms un "#" para que el navegador sepa
que es un enlace interno.

Enlaces tiles pero no tan habituales

A decir verdad, estos enlaces, aunque tiles, no son los ms extendidos de cuantos hay. La
tendencia general es la de crear pginas (archivos) independientes con tamaos ms reducidos
enlazados entre ellos por enlaces locales (los veremos enseguida). De esta forma evitamos el
exceso de tiempo de carga de un archivo y la introduccin de exceso de informacin que pueda
desviar la atencin del usuario.

Una aplicacin corriente de estos enlaces consiste en poner un pequeo ndice al principio de
nuestro documento donde introducimos enlaces origen a las diferentes secciones.
Paralelamente, al final de cada seccin introducimos un enlace que apunta al ndice de manera
que podamos guiar al navegante en la bsqueda de la informacin til para l.

En el siguiente artculo veremos cmo se hacen los enlaces locales, que son mucho ms
comunes en sitios web.

Este artculo es obra de Rubn Alvarez

Fue publicado por primera vez en 02/10/2016
Disponible online en http://desarrolloweb.com/articulos/21.php

http://desarrolloweb.com/manuales/manual-html.html Pgina 49 de 116

 Manual de HTML

Enlaces locales
Cmo construir enlaces en HTML cuyo destino sean otras pginas dentro del
mismo sitio web.

Como hemos dicho, un sitio web esta constituido de pginas interconexas, que se relacionan
mediante enlaces de hipertexto. Para abordar el estudio dividimos la materia por los distintos
tipos de enlaces que nos podemos encontrar, atendiendo al tipo de destino. En el capitulo
anterior vimos cmo enlazar distintas secciones dentro de una misma pgina.

En este artculo nos pondremos con otros tipos de enlaces, a los que hemos llamado "Enlaces
locales". Se trata de un tipo de enlace mucho ms comn en el da a da del desarrollo. De
hecho, es el tipo de enlace que ms se produce en lo general. Estos enlaces locales nos
permiten relacionar distintos documentos HTML que componen un sitio web. Gracias a los
enlaces locales podremos convertir varias pginas sueltas en un sitio web completo, compuesto
de varios documentos.

Para crear este tipo de enlaces, hemos de usar la misma etiqueta A que ya conocemos, de la
siguiente forma:

<a href="archivo.html">contenido</a>

Rutas de los enlaces

Hacer un enlace en si no es para nada complejo. No requiere muchas explicaciones con lo que
ya conocemos del manual de HTML, sin embargo hay que abordar con detalle un tema
importante: las rutas de los enlaces. Como rutas nos referimos al destino del enlace, o sea, lo
que ponemos en el atributo "href" y es importante que nos paremos aqu porque nos puede dar
algunos problemas al desarrollar, sobre todo para las personas que puedan tener menos
experiencia en el trabajo con el ordenador.

Por regla general, para una mejor organizacin, los sitios suelen estar ordenados por
directorios. Estos directorios suelen contener diferentes secciones de la pgina, imgenes,
scripts, estilos... Es por ello que en muchos casos no nos valdr con especificar el nombre del
archivo, sino que tendremos que especificar adems el directorio en el que nuestro
archivo.html esta alojado.

Nota: Si habis trabajado con MS-DOS o Linux por lnea de comandos no tendris ningn
problema para comprender el modo de funcionamiento. Tan solo, para los usuarios de
Windows hay que tener cuidado en usar la barra "/" en lugar de la contrabarra "", pues las
contrabarras usadas en Windows para separar componentes de la ruta no se deben usar
nunca al especificar rutas en HTML.

Para aquellos que no saben como mostrar un camino de un archivo, aqu van una serie de

http://desarrolloweb.com/manuales/manual-html.html Pgina 50 de 116

 Manual de HTML

indicaciones que os ayudaran a comprender la forma de expresarlos. No resulta difcil en

absoluto y con un poco de practica lo haris prcticamente sin pensar.

1. Hay que situarse mentalmente en el directorio en el que se encuentra la pgina donde

vamos a crear el enlace.
2. Si la pgina destino est en el mismo directorio que el archivo desde donde vamos a
enlazar podemos colocar simplemente el nombre del archivo de destino, ya que no hay
necesidad de cambiar de directorio.
3. Si la pgina de destino est en una carpeta o subdirectorio interior al directorio donde
est el archivo de origen, hemos de marcar la ruta enumerando cada uno de los
directorios por los que pasamos hasta llegar al archivo de destino, separndolos por el
smbolo barra "/". Al final obviamente, escribimos el nombre del archivo destino.
4. Si la pgina destino se encuentra en un directorio padre (superior al de la pgina del
enlace), hemos de escribir dos puntos y una barra "../" tantas veces como niveles
subamos en la arborescencia hasta dar con el directorio donde esta emplazado el
archivo destino.
5. Si la pgina se encuentra en otro directorio no incluido ni incluyente del archivo origen,
tendremos que subir como en la regla 3 por medio de ".." hasta encontrar un directorio
que englobe el directorio que contiene a la pgina destino. A continuacin haremos
como en la regla 2. Escribiremos todos los directorios por los que pasamos hasta llegar
al archivo.

Se ver mejor enseguida con unos ejemplos.

Imagina que tienes la siguiente estructura de carpetas y archivos. La que aparece en la

siguiente imagen.

1) Para hacer un enlace desde index.html hacia yyy.html:

<a href="seccion1/paginas/yyy.html">ir a yyy.html</a>

2) Para hacer un enlace desde xxx.html hacia yyy.html:

<a href="../seccion1/paginas/yyy.html">Ir (tambin) a yyy.html</a>

3) Para hacer un enlace desde yyy.html hacia xxx.html:

http://desarrolloweb.com/manuales/manual-html.html Pgina 51 de 116

 Manual de HTML

<a href="../../seccion2/xxx.html">Ir ahora a xxx.html</a>

Enlazar con una pgina diferente, pero en una seccin interna

Los enlaces locales pueden, a su vez, apuntar ya no a la pgina en general sino ms

precisamente a una seccin concreta. Este tipo de enlaces resultan ser un hbrido de interno y
local. La sintaxis es de este tipo:

<a href="archivo.html#seccion">contenido</a>

Como para los enlaces internos, en este caso hemos de marcar la seccin con un ancla:

<a name="seccion"></a>

Hasta aqu todo lo que necesitas saber sobre enlaces dentro del mismo sitio web. Aunque an
nos quedan por ver otros tipos de enlaces. En el siguiente artculo analizaremos los enlaces
externos, los enlaces a direcciones de correo y los que llevan a archivos para descarga.

Este artculo es obra de Rubn Alvarez

Fue publicado por primera vez en 03/10/2016
Disponible online en http://desarrolloweb.com/articulos/21.php

Enlaces externos, de correo y hacia archivos

Vemos tres tipos de enlaces. Los dirigidos a otras pginas de otros webs, a
direcciones de correo y a ficheros externos.

A lo largo de los artculos anteriores del Manual de HTML hemos visto enlaces internos,
dentro de la misma pgina, y los enlaces locales, que se dan cuando se referencian pginas
dentro del mismo sitio web. Eran tipos de enlaces muy comunes, pero aun hay otros tipos que
debemos de repasar para completar la informacin.

En este artculo abordaremos los ltimos 3 tipos de enlaces que habamos sealado. No tienen
mucho que ver entre si, pero como son sencillos los agrupamos todos en el presente texto. Son
enlaces a pginas externas (otros dominios), enlaces a direcciones de email y enlaces a
archivos de descarga.

Enlaces remotos

Son los enlaces que se dirigen hacia pginas que se encuentran fuera de nuestro sitio web, es
decir, cualquier otro documento que no forma parte de nuestro sitio. Generalmente nuestro
sitio web estar en un dominio determinado, tipo example.com. Los enlaces remotos son los
que van a pginas que estaran en otro dominio diferente.

http://desarrolloweb.com/manuales/manual-html.html Pgina 52 de 116

 Manual de HTML

Este tipo de enlaces es muy comn y no representa ninguna dificultad. Simplemente

colocamos en el atributo HREF de nuestra etiqueta A la URL o direccin de la pgina con la
que queremos enlazar. Ser algo parecido a esto.

<a href="http://www.guiarte.com">ir a guiarte.com</a>

Slo cabe destacar que todos las direcciones web (URLs) empiezan por http://, o https:// en
el caso que la pgina de destino se sirva mediante un servidor seguro. Este tipo de rutas que
comienzan por "http" tambin se conocen como "rutas absolutas". Cuando enlazas con pginas
que estn en otros dominios necesitas usar necesariamente rutas absolutas.

Nota: La parte por la que inician las direcciones de sitios web (http://) nos indica que el
protocolo por el que se accede es HTTP, el utilizado en la web. No debemos olvidarnos de
colocarlas, porque si no lo hacemos, los enlaces sern tratados como enlaces locales a
nuestro sitio.

Otra cosa interesante es que no tenemos que enlazar con una pgina web con el protocolo
HTTP necesariamente. Tambin podemos acceder a recursos a travs de otros protocolos como
el FTP. En tal caso, las direcciones de los recursos no comenzarn por http:// sino por ftp://.

Enlaces a direcciones de correo

Los enlaces a direcciones de correo son aquellos que al pincharlos nos abre un nuevo mensaje
de correo electrnico dirigido a una direccin de mail determinada. Estos enlaces son muy
habituales en las pginas web y resultan la manera ms rpida de ofrecer al visitante una va
para el contacto con el propietario de la pgina.

Para colocar un enlace dirigido hacia una direccin de correo colocamos mailto: en el atributo
href del enlace, seguido de la direccin de correo a la que se debe dirigir el enlace.

<a href="mailto:[email protected]">[email protected]</a>

Este enlace se puede ver en funcionamiento aqu: [email protected]

Consejo: Cuando coloques enlaces a direcciones de correo procura indicar en el contenido

del enlace (lo que hay entre A y su cierre) la direccin de correo a la que se debe escribir.
Esto es porque si un usuario no tiene configurado un programa de correo en su ordenador
no podr enviar mensajes, pero por lo menos podr copiar la direccin de mail y escribir el
correo a travs de otro ordenador o un sistema web-mail.

Adems de la direccin de correo del destinatario, tambin podemos colocar en el enlace el

asunto del mensaje. Esto se consigue colocando despus de la direccin de correo un

http://desarrolloweb.com/manuales/manual-html.html Pgina 53 de 116

 Manual de HTML

interrogante, la palabra subject, un signo igual (=) y el asunto en concreto.

<a href="malito:[email protected]?subject=contacto a travs de la pagina">[email protected]</a>

Podemos colocar otros atributos del mensaje con una sintaxis parecida. En este caso indicamos
tambin que el correo debe ir con copia a [email protected].

<a href="mailto:[email protected]?subject=contacto a travs de la pagina&[email protected]">[email protected]</a>

Nota: El visitante de la pgina necesitar tener configurada una cuenta de correo

electrnico en su sistema para enviar los mensajes. Lgicamente, si no tiene servicio de
correo en el ordenador no se podrn enviar los mensajes y este sistema de contacto con el
visitante no funcionar. Ms adelante abordaremos el tema de los formularios, mediante
los cuales seremos capaces de implementar una serie de campos donde solicitar
informacin de todo tipo, que luego se pueda enviar por email. Es una manera ms usable
en lo que respecta al contacto con el usuario. Ya fuera de este manual tambin tenemos un
artculo en desarrolloweb que hace un anlisis de las alternativas que existen para contacto
con el navegante.

Enlaces con archivos

Este no es un tipo de enlace propiamente dicho, pero lo sealamos aqu porque son un tipo de
enlaces muy habitual y que presenta alguna complicacin para el usuario novato.

El mecanismo es el mismo que hemos conocido en los enlaces locales y los enlaces remotos,
con la nica particularidad de que en vez de estar dirigidos hacia una pgina web est dirigido
hacia un archivo de otro tipo.

Si queremos enlazar con un archivo mi_fichero.zip que se encuentra en el mismo directorio

que la pgina se escribira un enlace as.

<a href="mi_fichero.zip">Descarga mi_fichero.zip</a>

Si pinchamos un enlace de este tipo nuestro navegador descargar el fichero, haciendo la

pregunta tpica de "Qu queremos hacer con el archivo. Abrirlo o guardarlo en disco".

Consejo: No colocar en Internet archivos ejecutables directamente, sino archivos

comprimidos. Por dos razones:

1. El archivo ocupar menos, con lo que ser ms rpida su transferencia.

2. Al preguntar al usuario lo que desea hacer con el fichero le ofrece la opcin de
abrirlo y guardarlo en disco. Nosotros generalmente desearemos que el usuario lo
guarde en disco y no lo ejecute hasta que lo tenga en su disco duro. Si se decido a
abrirlo en vez de guardarlo simplemente lo pondr en marcha y cuando lo pare no
se quedar guardado en su sistema. Si los archivos estn comprimidos

http://desarrolloweb.com/manuales/manual-html.html Pgina 54 de 116

 Manual de HTML

obligaremos al usuario a descomprimirlos en su disco duro antes de ponerlos en

marcha, con lo que nos aseguramos que el usuario lo guarde en su ordenador
antes de ejecutarlo.

Si queremos enlazar hacia otro tipo de archivo como un PDF o un mundo VRML
(Realidad virtual para Internet) lo seguimos haciendo de la misma manera. El navegador, si
reconoce el tipo de archivo, es el responsable de abrirlo utilizando el conector adecuado para
ello. As, si por ejemplo enlazamos con un PDF pondr el programa Acrobat Reader en
funcionamiento para mostrar los contenidos. Si enlazamos con un mundo VRML pondr en
marcha el plug-in que el usuario tenga instalado para ver los mundos virtuales.

Este sera un ejemplo de enlace a un documento PDF.

<a href="mi_documento.pdf">Descarga el PDF</a>

Este artculo es obra de Miguel Angel Alvarez

Fue publicado por primera vez en 29/10/2001
Disponible online en http://desarrolloweb.com/articulos/21.php

http://desarrolloweb.com/manuales/manual-html.html Pgina 55 de 116

 Manual de HTML

Imgenes, formatos grficos e

optimizacin

Veremos todo lo que los creadores de webs deben conocer sobre las imgenes, no slo cmo
incluir imgenes en las pginas, sino tambin qu formatos grficos son adecuados en cada
caso y cmo podemos optimizar las imgenes para reducir el tiempo de carga de las webs.

Imgenes en HTML
Vemos cmo colocar una imagen en una pgina web y algunos atributos bsicos
para asignarle estilos a las imgenes en HTML.

Sin duda uno de los aspectos ms vistosos y atractivos de las pginas web es el grafismo. La
introduccin en nuestro texto de imgenes puede ayudarnos a explicar ms fcilmente nuestra
informacin y darle un aire mucho ms esttico. El abuso no obstante puede conducirnos a
una sobrecarga que se traduce en una distraccin para el navegante, quien tendr ms
dificultad en encontrar la informacin necesaria.

El uso de imgenes tambin tiene que ser realizado con cuidado porque aumentan el tiempo de
carga de la pgina, lo que puede ser de un efecto nefasto si nuestro visitante no tiene una
buena conexin o si es un poco impaciente. Por ello es recomendable siempre optimizar las
imgenes para Internet, haciendo que su tamao en bytes sea lo mnimo posible, para facilitar
la descarga, pero sin que ello comprometa mucho su calidad.

En este capitulo no explicaremos como crear ni tratar las imgenes, nicamente diremos que
para ello se utilizan aplicaciones como Paint Shop Pro, Photoshop o Gimp. Tampoco
explicaremos las particularidades de cada tipo de archivo: GIF, JPG o PNG y la forma de
optimizar nuestras imgenes. Un capitulo posterior al respecto ser dedicado a este menester:
Formatos grficos para pginas web.

Las imgenes son almacenadas en forma de archivos, principalmente GIF (para dibujos) o JPG
(para fotos). Estos archivos los podemos obtener desde diversas vas, como por ejemplo
nuestra cmara digital, aunque tambin pueden ser creados por nosotros mismos con algn
editor grfico o pueden ser descargados gratuitamente en sitios web especializados.

As pues, en estos primeros captulos nos limitaremos a explicar como insertar y alinear
debidamente en nuestra pgina una imagen ya creada.

La etiqueta que utilizaremos para insertar una imagen es IMG (image). Esta etiqueta no posee
su cierre correspondiente y en ella hemos de especificar obligatoriamente el paradero de
nuestro archivo grfico mediante el atributo src (source).

http://desarrolloweb.com/manuales/manual-html.html Pgina 56 de 116

 Manual de HTML

La sintaxis queda entonces de la siguiente forma:

<img src="camino_hacia_el_archivo.jpg">

Para expresar el camino, lo haremos de la misma forma que vimos para los enlaces. Las reglas
siguen siendo las mismas, lo nico que cambia es que, en lugar de una pgina destino, el
destino es un archivo grfico. En el cdigo anterior estamos enlazando con un archivo con
extensin .jpg, pero podr ser otro tipo de archivo como .gif o .png, tal como se explica en el
mencionado artculo sobre los formatos grficos permitidos en una pgina web.

Aparte de este atributo, indispensable obviamente para la visualizacin de la imagen, la

etiqueta IMG nos propone otra serie de atributos de mayor o menor utilidad, que listamos a
continuacin:

Atributo alt

Dentro de las comillas de este atributo colocaremos una brevsima descripcin de la imagen.
Esta etiqueta no es indispensable pero presenta varias utilidades. La sintaxis te quedara de
esta manera:

<img src="mi_archivo.png" alt="Descripcin de esta maravillosa imagen">

Primeramente, sirve para el posicionamiento de la pgina en buscadores. De los atributos alt el

buscador puede extraer palabras clave y le ayuda a entender qu funcin o contenido tiene la
imagen, y por lo tanto la pgina.

Otra utilidad importante la encontramos en determinadas aplicaciones, usadas por personas

con discapacidad. Navegadores para ciegos, por ejemplo, no muestran las imgenes y por tanto
los alt ofrecen la posibilidad de leerlas. Nunca esta de ms pensar en crear pginas accesibles.

Por ltimo, aunque ya menos importante en 2016, durante el proceso de carga de la pgina y
cuando la imagen no ha sido todava cargada, el navegador podra mostrar esta descripcin,
con lo que el navegante se puede hacer una idea de lo que va en ese lugar. Si hubo problemas
de conexin y no se pudo mostrar la imagen, tambin podra usarse ese alt para mostrar al
menos su descripcin. En el pasado incluso era normal que algunos usuarios navegasen por la
red con una opcin del navegador que desactiva el muestreo de imgenes, con lo que tales
personas podrn siempre saber de qu se trata el grfico y eventualmente cambiar a modo con
imgenes para visualizarla.

En general podemos considerar como aconsejable el uso de este atributo, salvo para imgenes
de poca importancia. Si la imagen es usada como cuerpo de un enlace todava se hace ms
indispensable.

Atributos height y width

Estos atributos definen la altura y anchura respectivamente de la imagen en pxeles. Aunque

http://desarrolloweb.com/manuales/manual-html.html Pgina 57 de 116

 Manual de HTML

estas dimensiones forman parte del estilo de la imagen, y por tanto podran ir en el CSS,
todava puede ser interesante definirlas dentro del HTML. De nuevo, en 2016 ya no es tan
indispensable, puesto que muchos sitios creados con "Responsive Web Design" prefieren que
las imgenes se adapten al tamao de la pantalla donde se va a visualizar.

Todos los archivos grficos poseen unas dimensiones de ancho y alto. Estas dimensiones
pueden obtenerse a partir del propio diseador grafico o bien haciendo clic con el botn
derecho sobre la imagen, vista desde el explorador de archivos de tu ordenador, para luego
elegir "propiedades" o "informacin de la imagen" sobre el men que se despliega.

Un ejemplo de etiqueta IMG con sus valores de anchura y altura declarados te quedara as:

<img src="mi-imagen.gif" width="200" height="300">

Aunque este punto actualmente no tiene tanta importancia, puesto que ahora contamos con
conexiones ms rpidas, el hecho de explicitar en nuestro cdigo las dimensiones de nuestras
imgenes ayuda al navegador a confeccionar la pgina de la forma que nosotros deseamos
antes incluso de que las imgenes hayan sido descargadas. Cuando las dimensiones de las
imgenes han sido proporcionadas, durante el proceso de carga, el navegador reservara el
espacio correspondiente a cada imagen creando una maquetacin correcta. El usuario podr
comenzar a leer tranquilamente el texto sin que este se mueva de un lado a otro cada vez que
una imagen se cargue.

Adems de esta utilidad, el alterar los valores de estos dos atributos, es una forma inmediata
de redimensionar nuestra imagen. Este tipo de utilidad no es siempre aconsejable dado que, si
lo que pretendemos es aumentar el tamao, la perdida de calidad de la imagen ser sensible.
Inversamente, si deseamos disminuir su tamao, estaremos usando un archivo ms pesado en
KB de lo necesario para la imagen que estamos mostrando con lo que aumentamos el tiempo
de descarga de nuestro documento innecesariamente.

Nota: Como ves, muchas cosas han cambiado sobre el tema de las imgenes en 2016. Este
ltimo punto merece una mencin especial, puesto que en los ltimos aos han aparecido
(y cada vez son ms comunes) pantallas de una resolucin de pxeles mayor. Son pantallas
donde un pixel lgico se representa con varios pxeles fsicos. A esto se llama la densidad de
pxeles. Telfonos mviles de alta gama y ordenadores tambin de alta gama suelen tener
este tipo de pantallas para conseguir una mayor nitidez. En esos casos, aunque una imagen
se reduzca y no se vea a su tamao natural (por ejemplo, una imagen de 1000 pxel se
redimensiona para que ocupe solo 400 pxel), todos los puntos de la imagen servirn para
que se vean con mayor nitidez en las pantallas grandes. Si te interesa profundizar sobre este
punto te recomendamos la lectura de los artculos Imgenes responsive o Mejorar la
experiencia de usuario en sitios Responsive.

Es importante hacer hincapi en este punto ya que muchos debutantes tienen esa mala
costumbre de crear grficos pequeos redimensionando la imagen por medio de estos
atributos a partir de archivos de tamao descomunal. Hay que pensar que el tamao de una
imagen con unas dimensiones de la mitad no se reduce a la mitad, sino que resulta ser
aproximadamente 4 veces inferior.

http://desarrolloweb.com/manuales/manual-html.html Pgina 58 de 116

 Manual de HTML

Imgenes que son enlaces y el atributo border

Ni que decir tiene que una imagen, lo mismo que un texto, puede servir de enlace. Vista la
estructura de los enlaces en HTML, podemos muy fcilmente adivinar el tipo de cdigo
necesario:

<a href="archivo.html"><img src="imagen.gif"></a>

El problema de hacer esto en ciertos navegadores es que se crea un borde en la imagen, del
mismo color que el color configurado para los enlaces, lo que suele ser un efecto poco deseado.

Sin embargo, en HTML podemos indicar que una imagen tenga borde. Mediante el atributo
"border" se define el tamao en pxeles del cuadro que rodea la imagen. De esta forma
podemos recuadrar nuestra imagen si lo deseamos. No es algo que se use mucho, pero resulta
particularmente til cuando deseamos eliminar el borde que aparece cuando la imagen sirve
de enlace. En dicho caso tendremos que especificar border="0".

Nota: El atributo border ya no es tan necesario, porque los enlaces que se hacen con
contenido de imgenes ya no colocan ese borde feo en los grficos. Esto en navegadores
modernos, por lo que podra darse el caso que s nos apareciera el borde en algunos casos.
Aunque de cualquier modo, ese borde se puede eliminar igualmente con CSS y ser la
manera correcta de hacerlo, porque no deja de ser un estilo.

Atributos vspace y hspace

Sirven para indicar el espacio libre, en pixeles, que tiene que colocarse entre la imagen y los
otros elementos que la rodean, como texto, otras imgenes, etc. Estos atributos forman parte
tambin de la responsabilidad de las CSS, as que no sera recomendable usarlos.

Atributo lowsrc

Con este atributo podemos indicar un archivo de la imagen de baja resolucin. Cuando el
navegador detecta que la imagen tiene este atributo primero descarga y muestra la imagen de
baja resolucin (que ocupa muy poco y que se transfiere muy rpido). Posteriormente descarga
y muestra la imagen de resolucin adecuada (sealada con el atributo src, que se supone que
ocupar ms y ser ms lenta de transferir).

Este atributo est en desuso, aunque supone una ventaja considerable para que la descarga
inicial de la web se realice ms rpido y que un visitante pueda ver una muestra de la imagen
mientras se descarga la imagen real. Lee el artculo de imgenes con la etiqueta picture para
poder ver una alternativa ms moderna.

Ejemplo prctico

Resultar obvio para los lectores hacer ahora una pgina que contenga una imagen varias

http://desarrolloweb.com/manuales/manual-html.html Pgina 59 de 116

 Manual de HTML

veces repetida pero con distintos atributos.

Una de las veces que salga debe mostrarse con su tamao originar y con un borde de 3
pixeles.
En otra ocasin la imagen aparecer sin borde, con su misma altura y con una anchura
superior a la original
Tambin mostraremos la imagen sin borde, con su misma anchura y con una altura
superior a la original
Por ltimo, mostraremos la imagen con una altura y anchura mayores que las
originales, pero proporcionalmente igual que antes.

| Vamos a utilizar esta imagen para hacer el ejercicio: | | |

Las dimensiones originales de la imagen son 28x21, as que este sera el cdigo fuente:

<img src="img1.gif" width="28" height="21" alt="Tamao original" border="3">

<br>

<br>

<img src="img1.gif" width="68" height="21" alt="Achatada" border="0">

<br>

<br>

<img src="img1.gif" width="28" height="51" alt="Alargada" border="0">

<br>

<br>

<img src="img1.gif" width="56" height="42" alt="Doble grande" border="0">

Se puede ver en la siguiente imagen una muestra sobre cmo quedara ese cdigo al
visualizarse en un navegador. Observa como se produce en algunos casos una deformacin de
las imgenes, debido a por un cambio no proporcional en las dimensiones.

http://desarrolloweb.com/manuales/manual-html.html Pgina 60 de 116

 Manual de HTML

Nota: A lo largo de los prximos artculos veremos muchas otras cosas sobre imgenes,
pero si lo deseas, tambin puedes acceder a un vdeo donde se trata lo visto anteriormente y
muchas otras cosas adicionales sobre las imgenes y la creacin de webs: Videotutorial
HTML: imgenes.

Si quieres aprender a aplicar algunos estilos adicionales a las imgenes, usando solamente
HTML puedes leer el artculo Alineacin de imgenes con HTML. Aunque hay que advertir que
no es lo ms recomendable, ya que sabemos que los estilos deberan indicarse con CSS.
Nosotros continuaremos el Manual de HTML hablando de formatos grficos compatibles con
la web.

Este artculo es obra de Rubn Alvarez

Fue publicado por primera vez en 19/11/2001
Disponible online en http://desarrolloweb.com/articulos/21.php

Formatos grficos para pginas web

Presenta los formatos grficos utilizados en las pginas web, el GIF, el JPG y
PNG. Hace hincapi en los dos primeros, resumiendo sus caractersticas y
enseando a optimizar los ficheros.

El componente grfico de las pginas web tiene mucha importancia, es el que hace que estas
sean vistosas y el que nos permite aplicar nuestra creatividad para hacer del diseo de sitios
una tarea agradable. Es tambin una herramienta para acercar los sitios al mundo donde
vivimos, si embargo, es tambin el causante de errores graves en las pginas y hacer de estas,
en algunos casos, un martirio para el visitante.

Las nociones bsicas para el uso de archivos grficos son sencillas, conocerlas, aunque sea
ligeramente, nos ayudar a crear sitios agradables y rpidos. No cometer errores en el uso de
las imgenes es fundamental, aunque no seas un diseador y las imgenes que utilices sean
feas, utilzalas bien y as estars haciendo ms agradable la visita a tus pginas.

Tipos de archivos

En Internet se utilizan principalmente dos tipos de archivos grficos GIF y JPG, pensados
especialmente para optimizar el tamao que ocupan en disco, ya que los archivos pequeos se
transmiten ms rpidamente por la Red.

El formato de archivo GIF se usa para las imgenes que tengan dibujos, mientras que el
formato JPG se usa para las fotografas. Los dos comprimen las imgenes para guardarlas. La
forma de comprimir la imagen que utiliza cada formato es lo que los hace ideales para unos u
otros propsitos.

Adicionalmente, se puede usar un tercer formato grfico en las pginas web, el PNG. Este
formato no tiene tanta aceptacin como el GIF o JPG por varias razones, entre las que

http://desarrolloweb.com/manuales/manual-html.html Pgina 61 de 116

 Manual de HTML

destacan el desconocimiento del formato por parte de los desarrolladores, que las
herramientas habituales para tratar grficos (como por ejemplo Photoshop) generalmente no
lo soportaban y que los navegadores antiguos tambin tienen problemas para visualizarlas.

Sin embargo, el formato se comporta muy bien en cuanto a compresin y calidad del grfico
conseguido, por lo que resulta muy til en infinidad de casos. Todos estos problemas han
pasado y ya slo Internet Explorer 6 tiene algunos fallos cuando trata con PNG, pero la
aceptacin actual es ms que suficiente para incorporarlo a nuestras posibilidades reales de
trabajo con formatos y optimizacin de archivos.

A continuacin se puede ver una tabla comparativa de las principales caractersticas de los
formatos grficos para crear pginas web:

Formato GIF

Aparte de ser un archivo ideal para las imgenes que estn dibujadas tiene muchas otras
caractersticas que son importantes y tiles.

Compresin: Es muy buena para dibujos, como ya hemos dicho. Incluso puede ser
interesante si la imagen es muy pequea, aunque sea una foto.

Transparencia: es una utilidad para definir ciertas partes del dibujo como transparentes. De
este modo podemos colocar las imgenes sobre distintos fondos sin que se vea el cuadrado
donde est inscrito el dibujo, viendose en cambio la silueta del dibujo en cuestin.

Para crear un gif transparente debemos utilizar un programa de diseo grfico, con el podemos
indicar qu colores del dibujo queremos que sean transparentes. Generalmente, definimos la
transparencia cuando vamos a guardar el grfico.

Colores: Con este formato grfico podemos utilizar paletas, conjuntos, de 256 colores o
menos. Este es un detalle muy importante, puesto que cuantos menos colores utilicemos en la

http://desarrolloweb.com/manuales/manual-html.html Pgina 62 de 116

 Manual de HTML

imagen, por lo general, menos ocupar el archivo. En ocasiones, aunque utilicemos menos
colores en un grfico, este no pierde mucho en calidad, llegando a ser inapreciable a la vista.

En algunos programas podemos modificar la cantidad de colores al guardar el archivo, en otros

lo hacemos mientras creamos el grfico.

En esta imagen, tomada con distintas paletas de colores, se puede apreciar como con pocos
colores se ve bien el grfico y como pierde un poco a medida que le restamos colores.

Formato JPG

Veamos ahora cuales son las caractersticas fundamentales del formato JPG:

Compresin: Tal como hemos dicho anteriormente, su algoritmo de compresin hace ideal
este formato para guardar fotografas. Adems, con JPG podemos definir la calidad de la
imagen, con calidad baja el fichero ocupar menos, y viceversa.

Transparencia: Este formato no tiene posibilidad de crear reas transparentes. Si deseamos

colocar una imagen con un rea que parezca transparente procederemos as: con nuestro
programa de diseo grfico haremos que el fondo de la imagen sea el mismo que el de la
pgina donde queremos colocarla. En muchos casos los fondos de la imagen y la pgina
parecern el mismo.

Colores: JPG trabaja siempre con 16 millones de colores, ideal para fotografas.

Optimizar ficheros:

Para que las imgenes ocupen lo menos posible y se transfieran rpidamente por la Red
debemos aprender a optimizar los ficheros grficos. Para ello debemos hacer lo siguiente:

Para los archivos GIF: Reduciremos el nmero de colores de nuestra paleta. Esto se hace
con nuestro editor grfico, en muchos casos podremos hacerlo al guardar el archivo.

http://desarrolloweb.com/manuales/manual-html.html Pgina 63 de 116

 Manual de HTML

Para los archivos JPG: Ajustaremos la calidad del archivo cuando lo estemos guardando.
Este formato nos permite bajar mucho la calidad de la imagen sin que esta pierda mucho en su
aspecto visual.

Es imprescindible disponer para optimizar la imagen de una herramienta buena que nos
permita configurar estas caractersticas de la imagen con libertad y fcilmente. Photoshop
incorpora una opcin que se llama "Guardar para Web" con la que podemos definir los colores
del gif, calidad del JPG y otras opciones en varias muestras a la vez. As con todas las opciones
configurables, viendo los resultados a la vez que el tamao del archivo podemos optimizar la
imagen de una manera precisa con los resultados que deseamos.

Tambin existen en el mercado otros programas que nos permiten optimizar estas imgenes de
manera sorprendente. Una vez hemos creado la imagen la pasamos por estos programas y nos
comprimen aun ms el archivo, hacindolo rpido de transferir y, por tanto, ms optimo para
Internet. Al ser estas utilidades tan especializadas los resultados suelen ser mejores que con los
programas de edicin grfica.

Ejemplos de optimizadores grficos: WebGraphics Optimizer ProJPG, GIF Imantion Y

con versiones Online: GIF Wizard

http://desarrolloweb.com/manuales/manual-html.html Pgina 64 de 116

 Manual de HTML

Nota: Si te interesa reforzar todos los conceptos tratados en este artculo y ver cmo
optimizamos nosotros imgenes para la web, te recomendamos ver el Vdeo sobre
Formatos grficos para pginas web.

Este artculo es obra de Miguel Angel Alvarez

Fue publicado por primera vez en 01/01/2001
Disponible online en http://desarrolloweb.com/articulos/21.php

Mapas de imgenes con HTML

Explicamos detalladamente el proceso para crear mapas de imgenes, osea,
imgenes que tienes varios enlaces asociados en distintas reas.

En captulos anteriores hemos podido adentrarnos en el elemento bsico de navegacin del

web: El enlace hipertexto. Hemos visto que estos enlaces son palabras, textos o imgenes que,
al pinchar sobre ellos, nos envan a otras pginas o zonas.

Los mapas de imgenes es un nuevo planteamiento de navegacin que incorpora una serie de
enlaces dentro de una misma imagen. Estos enlaces son definidos por figuras geomtricas y
funcionan exactamente del mismo modo que los otros enlaces. Podis ver el funcionamiento de
uno en este enlace.

En un principio, estos mapas no eran directamente reconocidos por los navegadores y

recurran a tecnologas de lado del servidor para ser visualizados. Hoy en da pueden ser
implementados por medio de cdigo HTML tal y como veremos en este capitulo.

Nota: Los mapas de imgenes, aunque populares en otra poca y todava disponibles en el
estndar HTML5, hoy prcticamente no se usan. Si ests leyendo el Manual de HTML para
comenzar a desarrollar pginas web y tienes inters en avanzar rpidamente para luego
introducirte en lenguajes tambin necesarios como CSS, te recomendamos saltarte este
artculo.

Podemos utilizar estos mapas, por ejemplo, en portadas donde damos a conocer cada una de
las secciones del sitio por medio de una imagen. Tambin puede ser muy prctico en mapas
geogrficos donde cada ciudad, provincia o punto cualquiera representa un enlace a una
pgina.

En cualquier caso, el uso de estos mapas ha de estar sistemticamente acompaado de un texto

explicativo que d a conocer al usuario la posibilidad de hacer clic sobre los distintos puntos de
la imagen. Frases como "Haz clic sobre tal icono para acceder a tal informacin" resultan muy
indicativas a la hora de hacer intuitiva la navegacin por los mapas de imgenes. Por otro lado,
no esta de ms introducir esa misma explicacin en el atributo alt de la imagen.

As pues, un mapa de imagen esta compuesto de dos partes:

http://desarrolloweb.com/manuales/manual-html.html Pgina 65 de 116

 Manual de HTML

La imagen propiamente dicha que estar situada como de costumbre dentro de la

etiqueta BODY de nuestro documento HTML.
Un cdigo, situado en el interior de la etiqueta MAP, que delimitara por medio de lneas
geomtricas imaginarias cada una de las reas de los enlaces presentados en la imagen.

Las lneas geomtricas que delimitan los enlaces, es decir, las reas de los enlaces, han de ser
definidas por medio de coordenadas. Cada imagen es definida por unas dimensiones de ancho
(X) y alto (Y) y cada punto de la imagen puede ser definido por tanto diciendo a que altura (x)
y anchura (y) nos encontramos. De este modo, la esquina superior izquierda corresponde a la
posicin 0,0 y la esquina inferior derecha corresponde a las coordenadas X,Y. Si deseamos
saber qu coordenadas corresponden a un punto concreto de nuestra imagen, lo mejor es
utilizar un programa de diseo grafico como Photoshop o Paint Shop Pro.

La mejor forma de explicar el funcionamiento de este tipo de mapas es a partir de un ejemplo

prctico. Supongamos que tenemos una imagen con un mapa como esta:

Dentro de ella queremos introducir un enlace a cada uno de los elementos que la componen.
Para ello, definiremos nuestros enlaces como zonas circulares de pequeo tamao que sern
distribuidas a lo largo y ancho de la imagen.

Veamos a continuacin el cdigo que utilizaremos:

<table border=0 width=450><tr><td align="center">

<map name="mapa1">

<area alt="Pulsa para ver la pgina de mis amigos" shape="CIRCLE" coords="44,36,29" href="#">

<area alt="Pulsa para ver mi novia" shape="CIRCLE" coords="140,35,31" href="#">

<area alt="Pulsa para conocer a mi Familia" shape="circle" coords="239,37,30" href="#">

<area alt="Pulsa para conocer mi trabajo" shape="CIRCLE" coords="336,36,31" href="#">

</map>

http://desarrolloweb.com/manuales/manual-html.html Pgina 66 de 116

 Manual de HTML

<img src="images/html/mapa1.gif" width="380" height="72" alt="Mapa de imgenes. Pulsa en cada una de los crculos." border="0" usemap="#mapa1">

<br>

Pulsa en los crculos para acceder a las secciones!

</td></tr></table>

Nota: Los href de las reas van a # Este es un ejemplo parcial de utilizacin de los mapas,
faltara colocar los href con valores reales y no con la #. Cada uno de los enlaces de las reas
-atributo href de la etiqueta AREA- deberan llevar a una pgina web. El ejemplo quedara
completo si cresemos todas las pginas donde enlazar las reas y colocsemos los href
dirigidos hacia dichas pginas. Como no hemos hecho las pginas "destino" hemos
colocado enlaces que no llevan a ningn sitio, que, como puedes ver, se indica con el
caracter "#".

Podis observar, tal y como hemos explicado antes, que nuestro mapa consta de dos partes
principales: la imagen y la etiqueta MAP que define las reas de cada enlace.

Cada rea se indica con una etiqueta AREA que tiene los siguientes atributos:

alt Para indicar un texto que se mostrar cuando situemos el ratn en el rea.

shape Indica el tipo de rea.

coords Las coordenadas que definen el rea. Sern un grupo de valores numricos distintos
dependiendo del tipo de rea (shape) que estemos definiendo.

href Para indicar el destino del enlace correspondiente al rea.

En este caso hemos utilizado unas reas circulares (shape="CIRCLE"), que se definen
indicando el centro del crculo -una coordenada (X,Y) y el radio, que es un nmero entero que
se corresponde con el nmero de pixels desde el centro hasta el borde del crculo.

Tipos de reas: shape distintas

Existen tres tipos de reas distintas, suficientes para hacer casi cualquier tipo de figura. Las
detallamos a continuacin.

shape="RECT" Crea un rea rectangular. Para definirla se utilizan las coordenadas de los
puntos de la esquina superior izquierda y la esquina inferior derecha. Tal como estn
nombradas dichas coordenadas en nuestro dibujo, el rea tendra la siguiente etiqueta:

<area shape="RECT" coords="X1,Y1,X2,Y2" href="#">

http://desarrolloweb.com/manuales/manual-html.html Pgina 67 de 116

 Manual de HTML

shape="CIRCLE" Crea un rea circular, que se indica con la coordenada del centro del
crculo y el radio. A la vista de nuestro dibujo, la etiqueta de un rea circular tendra esta
forma:

<area shape="CIRCLE" coords="X1,Y1,R" href="#">

shape="POLY" Este tipo de rea, poligonal, es la ms compleja de todas. Un polgono queda

definido indicando todos sus puntos, pero atencin, los tenemos que indicar en orden,
siguiendo el camino marcado por el permetro del polgono. A la vista del dibujo y los nombres
que hemos dado a los puntos del polgono, la etiqueta AREA quedara de esta forma.

<area shape="POLY" coords=" X1,Y1, X2,Y2, X3,Y3, X4,Y4" href="#">

Este artculo es obra de Rubn Alvarez

Fue publicado por primera vez en 18/04/2002
Disponible online en http://desarrolloweb.com/articulos/21.php

http://desarrolloweb.com/manuales/manual-html.html Pgina 68 de 116

 Manual de HTML

Tablas en HTML

Las tablas fueron muy importantes en una poca para maquetar pginas web. Hoy lo adecuado
es utilizarlas slo para presentar informacin tabulada, es decir, colocada en una rejilla de filas
y columnas. En los siguientes artculos aprenderemos todo sobre las tablas en HTML.

Tablas en HTML
Vemos lo que son las tablas, para que sirven y en qu casos podemos utilizarlas.
Vemos la tabla ms simple posible.

Una tabla en un conjunto de celdas organizadas dentro de las cuales podemos

alojar distintos contenidos.

HTML dispone de una gran variedad de etiquetas para crear tablas, con sus atributos, de las
cuales veremos una introduccin en este artculo.

En un principio nos podra parecer que las tablas son raramente tiles y que pueden ser
utilizadas principalmente para listar datos como agendas, resultados y otros datos de una
forma organizada. En general, sirven para representar informacin tabulada, en filas y
columnas. Esto es una realidad en los ltimos aos, desde que las tablas se han descartado
para fines relacionados con la maquetacin.

Nota: Durante un tiempo, gran parte de los diseadores de pginas basaron su

maquetacin en este tipo de artilugios. En efecto, una tabla nos permite organizar y
distribuir los espacios de la manera ms adecuada. Nos puede ayudar a generar texto en
columnas como los peridicos, prefijar los tamaos ocupados por distintas secciones de la
pgina o poner de una manera sencilla un pie de foto a una imagen.

Estamos en la segunda dcada del 2000 y hablar de las tablas como solucin para
maquetacin ha pasado a la historia. Las webs de primera y segunda generacin utilizaban
este recurso intensivamente para maquetar contenidos en pginas web, adems de otras
barbaridades, como los pxeles transparentes, para conseguir efectos como mrgenes o
espacios en blanco. Sin embargo, las webs actuales, a partir de la tercera generacin, han
acabado con todas esas tcnicas que no hacan ms que ensuciar el cdigo fuente de las
pginas web, mezclando presentacin y contenido. Actualmente toda la maquetacin de
una pgina se organiza con CSS, lo que nos da un mayor control de todos los elementos de
la pgina y la posibilidad de separar todos los estilos para definir el aspecto de una web en
un fichero aparte del HTML.

Por ello, en el momento actual las tablas se utilizan mucho menos que en el pasado y
realmente la recomendacin es usarlas solo en los casos en los que necesitemos incluir en
una pgina informacin tabulada, es decir, dispuesta en filas y columnas. Todo uso basado
en tablas para procurar colocar elementos en determinadas posiciones de la pgina sera
incorrecto en las tcnicas actuales de diseo de pginas web.

http://desarrolloweb.com/manuales/manual-html.html Pgina 69 de 116

 Manual de HTML

Como veremos a continuacin, existen diversas etiquetas que se deben utilizar en una forma
determinada para la creacin de tablas. Por ello, puede que en un principio nos resulte un poco
complicado trabajar con estas estructuras pero, con un poco de prctica podremos crear tablas
con absoluta soltura. Si deseamos mostrar datos de una manera sencilla de leer, dispuestos en
filas y columnas, tarde o temprano observaremos que las tablas son la mejor solucin y
apreciaremos las posibilidades nos ofrecen.

Etiquetas bsicas para tablas en HTML

Para empezar, nada ms sencillo que por el principio: las tablas son definidas por las etiquetas
TABLE y su cierre.

Dentro de estas dos etiquetas colocaremos todas las otras etiquetas de las tablas, hasta llegar a
las celdas. Dentro de las celdas ya es permitido colocar textos e imgenes que darn el
contenido a la tabla.

Las tablas son descritas por lneas de arriba a abajo (y luego por columnas de izquierda a
derecha). Cada una de estas lneas, llamada fila, es definida por otra etiqueta y su cierre: TR

Asimismo, dentro de cada lnea, habr diferentes celdas. Cada una de estas celdas ser definida
por otra etiqueta: TD. Dentro de sta y su cierre ser donde coloquemos nuestro contenido, el
contenido de cada celda.

Aqu tenis un ejemplo de estructura de tabla:

<table>

<tr>

<td>Celda 1, linea 1</td>

<td> Celda 2, linea 1</td>

</tr>

<tr>

<td> Celda 1, linea 2</td>

<td> Celda 2, linea 2</td>

</tr>

</table>

El resultado:

Nota: Hasta aqu hemos visto todas las etiquetas que necesitamos conocer para crear
tablas. Existen otras etiquetas, pero lo que podemos conseguir con ellas se puede conseguir
tambin usando las que hemos visto.

http://desarrolloweb.com/manuales/manual-html.html Pgina 70 de 116

 Manual de HTML

Por poner un ejemplo, sealamos la etiqueta TH, que sirve para crear una celda cuyo
contenido est formatedo como un ttulo o cabecera de la tabla. En la prctica, lo que hace
es poner en negrita y centrado el contenido de esa celda, lo que se puede conseguir
aplicando las correspondientes etiquetas dentro de la celda. As:

<td align="center"><b>contenido de la celda</b></td>

Sin embargo, cuando estudies la semntica del HTML te dars cuenta que, aunque la
presentacin sea la misma, la semntica no lo es. Esto es un tema ms avanzado por el que
de momento (si ests comenzando con HTML) no necesitas preocuparte. Puedes encontrar
algo ms de informacin en el artculo de las etiquetas semnticas del HTML5.

Atributos para tablas, filas y celdas

A partir de esta idea simple y sencilla, las tablas adquieren otra magnitud cuando les
incorporamos toda una batera de atributos aplicados sobre cada tipo de etiquetas que las
componen.

En cuanto a atributos para tabla hay unos cuantos. Muchos los conoces ya de otras etiquetas,
como width, height, align, etc. Hay otros que son especialmente creados para las etiquetas
TABLE.

cellspacing: es el espacio entre celdas de la tabla.

cellpadding: es el espacio entre el borde de la celda y su contenido.
border: es el nmero de pxeles que tendr el borde de la tabla.
bordercolor: es el rbg que le vas a asignar al borde de la tabla.

En cuanto a las etiquetas "interiores" de una tabla, nos referimos a TR y TD, ten en cuenta:

Podemos usar prcticamente cualquier tipo de etiqueta dentro de la etiqueta TD para,

de esta forma, escribir su contenido.
Las etiquetas situadas en el interior de la celda no modifican el resto del documento.
Las etiquetas de fuera de la celda no son tenidas en cuenta por sta.

As pues, podemos especificar el formato de nuestras celdas a partir de etiquetas introducidas

en su interior o mediante atributos colocados dentro de la etiqueta de celda TD o bien, en
algunos casos, dentro de la etiqueta TR, si deseamos que el atributo sea valido para toda la
lnea. La forma ms til y actual de dar forma a las celdas es a partir de las hojas de estilo en
cascada que ya tendris la oportunidad de abordar ms adelante.

Veamos a continuacin algunos atributos tiles para la construccin de nuestras tablas.

Empecemos viendo atributos que nos permiten modificar una celda en concreto o toda una
lnea:

align: Justifica el texto de la celda del mismo modo que si fuese el de un prrafo.
valign: Podemos elegir si queremos que el texto aparezca arriba (top), en el centro
(middle) o abajo (bottom) de la celda.
bgcolor: Da color a la celda o lnea elegida.

http://desarrolloweb.com/manuales/manual-html.html Pgina 71 de 116

 Manual de HTML

bordercolor: Define el color del borde.

Otros atributos que pueden ser nicamente asignados a una celda y no al conjunto de celdas de
una lnea son:

background: Nos permite colocar un fondo para la celda a partir de un enlace a una
imagen.
height: Define la altura de la celda en pixels o porcentaje.
width: Define la anchura de la celda en pixels o porcentaje.
colspan: Expande una celda horizontalmente.
rowspan: Expande una celda verticalmente.

Nota: El atributo height no funciona en todos los navegadores, adems, su uso no est muy
extendido. Las celdas por lo general tienen el alto que ncesitan para que quepa todo el
contenido que se le haya insertado, es decir, crecen lo suficiente para que quepa lo que
hemos colocado dentro.

El atributo width si que funciona en todos los navegadores y lo tendris que utilizar
constantemente. Si le asignamos un ancho a la celda, el ancho ser respetado y si dicha
celda tiene mucho texto o cualquier otro contenido, la celda crecer hacia abajo todo lo
necesario para que quepa lo que hemos colocado.

Un matiz al ltimo prafo. Se trata de que si definimos una celda de un ancho 100 por
ejemplo, y colocamos en la celda un contenido como una imagen que mida ms de 100
pixeles, la celda crecer en horizontal todo lo necesario para que la imagen quepa. Si el
elemento, aunque ms ancho, fuera divisible (como un texto) el ancho sera respetado y el
texto crecera hacia abajo o lo que es lo mismo, en altura, como sealbamos en el anterior
prrafo.

Estos ltimos cuatro atributos descritos son de gran utilidad. Concretamente, height y width
nos ayudan a definir las dimensiones de nuestras celdas de una forma absoluta (en pixels o
puntos de pantalla) o de una forma relativa, es decir por porcentajes referidos al tamao total
de la tabla. Podis leer un articulo interesante a propsito de estas dos modalidades de diseo
en nuestro manual de usabilidad.

A titulo de ejemplo:

<td width="80">

Dar una anchura de 80 pixels a la celda. Sin embargo,

<td width="80%">

Dar una anchura a la celda del 80% de la anchura de la tabla.

Hay que tener en cuenta que, definidas las dimensiones de las celdas, el navegador va a hacer
lo que buenamente pueda para satisfacer al programador. Esto quiere decir que puede que en

http://desarrolloweb.com/manuales/manual-html.html Pgina 72 de 116

 Manual de HTML

algunas ocasiones el resultado que obtengamos no sea el esperado. Concretamente, si el texto

presenta una palabra excesivamente larga, puede que la anchura de la celda se vea aumentada
para mantener la palabra en la misma lnea. Por otra parte, si el texto resulta muy largo, la
celda aumentara su altura para poder mostrar todo su contenido.

Anlogamente, si por ejemplo definimos dos anchuras distintas a celdas de una misma
columna, el navegador no sabr a cual hacer caso. Es por ello que resulta conveniente tener
bien claro desde un principio como es la tabla que queremos disear. No esta de ms si la
prediseamos en papel si la complejidad es importante. El HTML resulta en general fcil pero
las tablas pueden convertirse en un verdadero quebradero de cabeza si no llegamos a
comprenderlas debidamente.

Los atributos rowspan y colspan son tambin utilizados frecuentemente. Gracias a ellos es
posible expandir celdas fusionando stas con sus vecinas. El valor que pueden tomar estas
etiquetas es numrico. El nmero representa la cantidad de celdas fusionadas.

As:

<td colspan="2">

Fusionara la celda en cuestin con su vecina derecha.

Del mismo modo,

<td rowspan="2">

Expandir la celda hacia abajo fusionndose con la celda inferior.

El resto de los atributos presentados presentan una utilidad y uso bastante obvios. Los
dejamos a vuestra propia investigacin.

http://desarrolloweb.com/manuales/manual-html.html Pgina 73 de 116

 Manual de HTML

Podemos continuar las explicaciones de tablas en los artculos Atributos de la tabla y

conclusin y Bordes de tabla en HTML 4.

Este artculo es obra de Rubn Alvarez

Fue publicado por primera vez en 19/12/2001
Disponible online en http://desarrolloweb.com/articulos/21.php

Atributos para tablas HTML

Conocemos los atributos principales que le podemos asignar a las tablas en el
lenguaje HTML de modo general. Adems vemos varios ejemplos prcticos de
construccin de tablas.

En este artculo vamos a seguir hablando de tablas, con informacin de diverso tipo. A la parte
de los atributos para tablas puedes prestarle poca atencin porque bsicamente lo que hacen es
aplicar estilo a la propia tabla o a sus celdas y estas definiciones actualmente se recomienda
incluir en el CSS. Luego pasaremos a ver las tablas anidadas y realizar unas unas prcticas de
representacin de informacin tabulada, que s merece la pena estudiar para afianzar el
conocimiento.

A continuacin encuentras los ms importantes de los atributos especficos para tablas,

aunque recuerda que todos estn ya en desuso desde la versin del estndar HTML5.

align: Alinea horizontalmente la tabla con respecto a su entorno. background: Nos permite
colocar un fondo para la tabla a partir de un enlace a una imagen. bgcolor: Da color de fondo
a la tabla. border: Define el nmero de pixels del borde principal. bordercolor: Define el
color del borde. cellpadding: Define, en pixels, el espacio entre los bordes de la celda y el
contenido de la misma. cellspacing: Define el espacio entre los bordes (en pixels). height:
Define la altura de la tabla en pixels o porcentaje. width: Define la anchura de la tabla en
pixels o porcentaje.

Los atributos que definen las dimensiones, height y width, funcionan de una manera anloga a
la de las celdas tal y como hemos visto en el capitulo anterior. Contrariamente, el atributo align
no nos permite justificar el texto de cada una de las celdas que componen la tabla, sino ms
bien, justificar la propia tabla con respecto a su entorno.

Vamos a poner tres ejemplos de alineado de tablas, centradas, alineadas a la derecha y a la

izquierda.

http://desarrolloweb.com/manuales/manual-html.html Pgina 74 de 116

 Manual de HTML

Los atributos cellpading y cellspacing nos ayudaran a dar a nuestra tabla un aspecto ms
esttico. En un principio puede parecernos un poco confuso su uso pero un poco de practica
ser suficiente para hacerse con ellos.

En la siguiente imagen podemos ver grficamente el significado de estos atributos.

Con un poco de prctica podis comprobar vosotros mismos que los atributos definidos para
una celda tienen prioridad con respecto a los definidos para una tabla. Podemos definir, por
ejemplo, una tabla con color de fondo rojo y una de las celdas de color de fondo verde y se ver
toda la tabla de color rojo menos la celda verde. Del mismo modo, podemos definir un color
azul para los bordes de la tabla y hacer que una celda particular sea mostrada con un borde
rojo. (Aunque esto no funcionar en todos los navegadores debido a que algunos no reconocen
el atributo bordercolor).

Tablas anidadas

Muy til tambin es el uso de tablas anidadas. De la misma forma que podamos incluir listas
dentro de otras listas, las tablas pueden ser incluidas dentro de otras. As, podemos incluir una
tabla dentro de la celda de otra. El modo de funcionamiento sigue siendo el mismo aunque la
situacin puede complicarse si el nmero de tablas embebidas dentro de otras es elevado.

Vamos a ver un cdigo de anidacin de tablas. Veamos primero el resultado y luego el cdigo,
as conseguiremos entenderlo mejor.

http://desarrolloweb.com/manuales/manual-html.html Pgina 75 de 116

 Manual de HTML

Este sera el cdigo:

<table cellspacing="10" cellpadding="10" border="3">

<tr>

<td align="center">

Celda de la tabla principal

</td>

<td align="center">

<table cellspacing="2" cellpadding="2" border="1">

<tr>

<td>Tabla anidada, celda 1</td>

<td>Tabla anidada, celda 2</td>

</tr>

<tr>

<td>Tabla anidada, celda 3</td>

<td>Tabla anidada, celda 4</td>

</tr>

</table>

</td>

</tr>

</table>

Ejemplos prcticos

Hasta aqu la informacin que pretendamos transmitiros sobre las tablas en HTML. Sera
importante ahora realizar algn ejemplo de realizacin de una tabla un poco compleja. Por
ejemplo la siguiente:

Se puede ver el cdigo fuente para generar esa tabla. Pero antes intenta realizarla por ti mismo,
que es esencial para poder afianzar el conocimiento. Ten en cuenta tambin que ciertos estilos
colocados en la tabla pueden no funcionar en todos los navegadores. Adems, lo que hemos
repetido ya innumerables veces: los estilos forman parte de la responsabilidad del CSS.

<table align="center" cellspacing="2" cellpadding="2" border="1" bgcolor=dddddd>

http://desarrolloweb.com/manuales/manual-html.html Pgina 76 de 116

 Manual de HTML

<tr>

<td colspan="4" align="center" bgcolor="666666"><font color="#FFFFFF"><strong>Animales en peligro de extincin</strong></font></td>

</tr>

<tr bgcolor="aaaaaa">

<td>Nombre</td>

<td align="center">Cabezas</td>

<td align="center">Previsin 2010</td>

<td align="center">Previsin 2020</td>

</tr>

<tr>

<td>Ballena</td>

<td align="center">6000</td>

<td align="center">4000</td>

<td align="center">1500</td>

</tr>

<tr>

<td>Oso Pardo</td>

<td align="center">50</td>

<td rowspan="2" colspan="2" align="center" bgcolor="red">0</td>

</tr>

<tr>

<td>Lince</td>

<td align="center">10</td>

</tr>

<tr>

<td>Tigre</td>

<td align="center">300</td>

<td colspan="2" align="center">210</td>

</tr>

</table>

Otro ejemplo de tabla con el que podemos practicar. En este caso hemos implementado una
anidacin de tablas, es decir, dentro de un TD hemos colocado un TABLE completo. Es un
buen ejemplo para seguir aprendiendo

http://desarrolloweb.com/manuales/manual-html.html Pgina 77 de 116

 Manual de HTML

Tambin podemos ver su cdigo fuente. Intntalo t antes de revelar la solucin!

<table cellspacing="4" cellpadding="4" border="1" width=400 bgcolor=dddddd>

<tr>

<td colspan="2" bgcolor="666666" align="center"><font color="#FFFFFF"><strong>Climas de Amrica del Sur</strong></font></td>

</tr>

<tr>

<td width="50%">

<table align="right" cellspacing="1" cellpadding="1" border="1">

<tr>

<td bgcolor="#cccccc" align="center">Venezuela</td>

</tr>

<tr>

<td bgcolor="#cccccc" align="center">Colombia</td>

</tr>

<tr>

<td bgcolor="#cccccc" align="center">Ecuador</td>

</tr>

<tr>

<td bgcolor="#cccccc" align="center">Per</td>

</tr>

</table>

Parte de arriba de Amrica del Sur. Pases como:

</td>

<td width="50%">

<table align="right" cellspacing="1" cellpadding="1" border="1">

<tr>

<td bgcolor="#cccccc" align="center">Argentina</td>

</tr>

<tr>

<td bgcolor="#cccccc" align="center">Chile</td>

http://desarrolloweb.com/manuales/manual-html.html Pgina 78 de 116

 Manual de HTML

</tr>

<tr>

<td bgcolor="#cccccc" align="center">Uruguay</td>

</tr>

<tr>

<td bgcolor="#cccccc" align="center">Paraguay</td>

</tr>

</table>

Parte de abajo de Amrica del Sur. Pases como:

</td>

</tr>

<tr>

<td bgcolor="#358391">Bosque tropical, clima de sabana, clima martimo con inviernos secos.</td>

<td bgcolor="#358391">Climas martimos con veranos secos, con inviernos secos, climas frios, clima de estepa, clima desrtico.</td>

</tr>

</table>

No debes maquetar con tablas

En HTML (antes de la popularizacin del lenguaje CSS) se utilizan las tablas para maquetar
pginas, aparte de mostrar informacin tabulada como hemos visto en este artculo. Como
maquetar nos referimos al proceso por el cual se posicionan contenidos atendiendo a una
estructura. Se conoce como maquetacin y a la estructura muchas veces se la conoce como
layout.

Con las tablas podemos generar una serie de columnas, espacios como cabecera o pie donde
podemos mostrar contenidos estructurados que den la sensacin de un diseo bien realizado,
dividido en columnas y filas, como la maquetacin de una revista o un portal. Sin embargo,
usar las tablas NO es una prctica recomendada. La maquetacin por tablas la
comentamos en un taller de HTML. Puedes analizar ese artculo para estudiar cmo se hacan
las cosas antes y para practicar con HTML, pero hoy no se hacen las cosas as.

Lo correcto hoy, en pginas actuales que adems tienen capacidades medianamente avanzadas
y con informacin bien estructurada, se usa el lenguaje CSS y sus mltiples herramientas para
producir un contenido correctamente maquetado. Si te interesa profundizar sobre este tema te
recomendamos la lectura del Manual de Maquetacin CSS, aunque antes debes aprender el
propio CSS.

Este artculo es obra de Rubn Alvarez

Fue publicado por primera vez en 19/12/2001
Disponible online en http://desarrolloweb.com/articulos/21.php

Agrupar filas o columnas de tablas con HTML 4

En HTML 4.0 podemos agrupar filas de una tabla, o columnas. Sirve para
especificar estilos especficos a esas filas o columnas.

http://desarrolloweb.com/manuales/manual-html.html Pgina 79 de 116

 Manual de HTML

Con HTML 4 existen dos etiquetas que nos permiten agrupar filas o columnas de una tabla,
para crear agrupaciones a las que se les puede definir un estilo de una sola vez, y no fila a fila o
celda a celda. No son etiquetas que se usen mucho, adems ahora menos que las tablas han
sido sustituidas por otros tipos de herramientas para presentar la informacin maquetada en
una rejilla, pero siguen estando dentro del estndar.

Son etiquetas para agrupacin de los elementos de una tabla, que se diferencian en el tipo de
elementos que pretenden agrupar.

Para agrupar conjuntos de filas se usa la etiqueta TBODY

<tbody>

Para agrupar conjuntos de columnas se usa la etiqueta COLGROUP.

<colgroup>

Ambas etiquetas tienen soporte a partir de HTML 4, por lo tanto estn disponibles en todos los
navegadores modernos ms comnmente utilizados.

Agrupar filas con TBODY

Hacer grupos de filas nos sirve para especificar estilos a determinadas filas de la tabla, de una
sola vez. El modo de uso es el siguiente:

<table cellspacing="4" cellpadding="4" border="2">

<tr>

<td>1</td>

<td>2</td>

<td>3</td>

</tr>

<tbody align="center" bgcolor="#ff8800" valign="top">

<tr>

<td>4</td>

<td>

Esta es una celda

<br>

</td>

<td>6</td>

</tr>

<tr>

<td>7</td>

<td>8</td>

http://desarrolloweb.com/manuales/manual-html.html Pgina 80 de 116

 Manual de HTML

<td>9</td>

</tr>

</tbody>

</table>

Como se puede ver, se tiene una tabla de 3 filas. Se ha marcado un grupo de dos filas con
TBODY, justamente las dos ltimas. Para esas filas hemos definido, mediante los atributos de
la etiqueta TBODY, un centrado, un color de fondo y una alineacin vertical superior. Los
atributos que podramos utilizar con la etiqueta TBODY son un grupo reducido de los que
podramos asignar a etiquetas TR o TD: align, bgcolor y valing, class, id, adems de
manejadores de eventos.

Podemos ver cmo se mostrara esta tabla:

De manera similar, se pueden asignar atributos de hojas de estilo en cascada, utilizando el

atributo HTML style, como se puede ver a continuacin:

<table cellspacing="2" cellpadding="2" border="2">

<tbody style="font-size:150%;">

<tr>

<td>1</td>

<td>2</td>

<td>3</td>

</tr>

<tr>

<td>4</td>

<td>5</td>

<td>6</td>

</tr>

</tbody>

<tr>

<td>7</td>

<td>8</td>

<td>9</td>

</tr>

</table>

Aunque hay que decir que el grupo de atributos de hojas de estilo que son interpretados,
cuando los colocamos en TBODY, es bastante reducido. Internet Explorer da mejor variedad
de atributos aceptados.

http://desarrolloweb.com/manuales/manual-html.html Pgina 81 de 116

 Manual de HTML

Agrupar columnas con COLGROUP

Veamos ahora cmo se pueden agrupar varias filas con la etiqueta COLGROUP. El objetivo es
bsicamente el mismo que el de agrupar columnas, es decir, definir de una sola vez estilos
especficos para un determinado conjunto de columnas de una tabla. El uso de la etiqueta, no
obstante, es un poco diferente.

<table cellspacing="2" cellpadding="2" border="2">

<colgroup span=2 width="40">

</colgroup>

<tr>

<td>1</td>

<td>2</td>

<td>3</td>

</tr>

<tr>

<td>4</td>

<td>5</td>

<td>6</td>

</tr>

<tr>

<td>7</td>

<td>8</td>

<td>9</td>

</tr>

</table>

Como se puede ver, COLGROUP se utiliza despus de abrir la tabla y antes de empezar a meter
los contenidos de filas y celdas.

El atributo span indica el nmero de columnas que se desean agrupar, empezando por la
primera. En nuestro ejemplo se han agrupado las dos primeras columnas. Los otros atributos
que podemos colocar en COLGROUP son los siguientes: align, id, class, style, valign, width y
manejadores de eventos Javascript. Aunque Internet Explorer acepta otros atributos como
bgcolor.

El ejemplo de colgroup se muestra a continuacin:

Adems, tambin podemos definir estilos CSS para las agrupaciones de columnas. De hecho lo
correcto justamente es aplicar los estilos con CSS

Cuando queremos definir estilos para cada una de las columnas de la tabla, de manera que
toda columna tenga sus estilos propios, tambin utilizamos COLGROUP. En este caso no se

http://desarrolloweb.com/manuales/manual-html.html Pgina 82 de 116

 Manual de HTML

debe utilizar el atributo span, sino que se debe de agregar la etiqueta COL, una por cada
columna a la que pretendemos asignar estilos. De esta manera:

<table cellspacing="2" cellpadding="2" border="2">

<colgroup>

<col>

<col width=100>

<col style="width: 200px;">

</colgroup>

<tr>

<td>1</td>

<td>2</td>

<td>3</td>

</tr>

<tr>

<td>4</td>

<td>5</td>

<td>6</td>

</tr>

<tr>

<td>7</td>

<td>8</td>

<td>9</td>

</tr>

</table>

En nuestra tabla, que tena tres columnas, hemos colocado la etiqueta COLGROUP y dentro de
esta, tres etiquetas COL, cada una con sus estilos propios.

En el primer COL, como se puede ver, no hay ningn atributo. Eso quiere decir que no estoy
asignando ningn estilo a la primera columna de la tabla. El segundo COL ha definido una
anchura de 100 pixels. El tercer COL, tambin hemos definido una anchura, pero esta vez con
CSS mediante el atributo style.

Los atributos CSS que acepta esta etiqueta tambin son bastante reducidos en Firefox, aunque
Internet Explorer acepta bastantes ms.

Para terminar, mostramos la tabla del ltimo ejemplo:

Este artculo es obra de Miguel Angel Alvarez

Fue publicado por primera vez en 24/07/2008
Disponible online en http://desarrolloweb.com/articulos/agrupar-filas-columnas-tabla-
html.html

http://desarrolloweb.com/manuales/manual-html.html Pgina 83 de 116

 Manual de HTML

http://desarrolloweb.com/manuales/manual-html.html Pgina 84 de 116

 Manual de HTML

Formularios en HTML

El trabajo con formularios es uno de los principales puntos que debemos aprender en HTML.
Hacen posible muchas de las utilidades clave de una web, como el contacto de los creadores de
las pginas con los visitantes, as como ciertos niveles de interaccin bsica y avanzada con el
usuario.

Formularios HTML
Empezamos la explicacin de la creacin de formularios con el lenguaje HTML.

Hasta ahora hemos visto la forma en la que el HTML gestiona y muestra la informacin,
esencialmente mediante texto, imgenes y enlaces. Nos queda por ver de qu forma podemos
intercambiar informacin con nuestro visitante. Desde luego, este nuevo aspecto resulta
primordial para gran cantidad de acciones que se pueden llevar a cabo mediante el Web:
Comprar un articulo, rellenar una encuesta, enviar un comentario al autor...

Hemos visto anteriormente que podamos, mediante los enlaces a direcciones de email,
contactar directamente con un correo electrnico. Sin embargo, esta opcin puede resultar en
algunos casos poco verstil, si lo que deseamos es que el navegante nos enve una informacin
bien precisa y adems requiere que el visitante tenga instalado en su ordenador algn correo
electrnico en un programa como Outlook Express. Es por ello que el HTML propone otra
solucin mucho ms amplia: Los formularios.

Los formularios son esas famosas cajas de texto y botones que podemos encontrar en muchas
pginas web. Son muy utilizados para realizar bsquedas o bien para introducir datos
personales por ejemplo en sitios de comercio electrnico. Los datos que el usuario introduce en
estos campos son enviados al correo electrnico del administrador del formulario o bien a un
programa que se encarga de procesarlo automticamente.

Qu se puede hacer con un formulario

Usando HTML podemos nicamente enviar el contenido del formulario a un correo

electrnico, es decir, construir un formulario con diversos campos y, a la hora pulsar el botn
de enviar, generar una ventana de redaccin de un email con los datos que el usuario haya
escrito en cada uno de esos campos.

A menudo desearemos hacer cosas ms complejas con los formularios, como que se enve
automticamente el correo a un email sin necesidad que el contenido pase por ningn
programa de email. Para ello tendremos que procesar el formulario mediante un programa.

La cosa puede resultar un poco ms compleja, ya que tendremos que emplear otros lenguajes
ms sofisticados que el propio HTML. En este caso, la solucin ms sencilla es utilizar los

http://desarrolloweb.com/manuales/manual-html.html Pgina 85 de 116

 Manual de HTML

programs prediseados que nos ofrecen un gran nmero de servidores de alojamiento y que
nos permiten almacenar y procesar los datos en forma de archivos u otros formatos. Si
vuestras pginas estn alojadas en un servidor que no os propone este tipo de ventajas,
siempre podis recurrir a servidores de terceros que ofrecen este u otro tipo de servicios
gratuitos para webs. Por supuesto, existe otra alternativa que es la de aprender lenguajes como
ASP o PHP que nos permitirn, entre otras cosas, el tratamiento de formularios.

As pues, en resumen, con HTML podremos construir los formularios, con diversos tipos de
campos, como cajas de texto, botones de radio, cajas de seleccin, mens desplegables, etc. Sin
embargo, debe quedar claro que desde HTML no se puede enviar directamente el correo, sino
que se generar un email en el ordenador del visitante, que ste tendr que enviar
"manualmente" por medio de su programa de correo. Si queremos que el formulario se enve
automticamente o se procese en el servidor para generar otro tipo de respuesta,
necesitaremos lenguajes de programacin. En este Manual de HTML nos limitaremos a
explicar la creacin de formularios y os proponemos buscar otras formas de proceso de los
mismos a travs de otros artculos en DesarrolloWeb.com.

Cmo hacer un formulario en HTML

Los formularios son definidos por medio de las etiquetas FORM y su cierre. Entre estas dos
etiquetas colocaremos todos los campos y botones que componen el formulario. Dentro de esta
etiqueta FORM debemos especificar algunos atributos:

action: define el tipo de accin a llevar a cabo con el formulario. Como ya hemos dicho,
existen dos posibilidades:

El formulario es enviado a una direccin de correo electrnico

El formulario es enviado a un programa o script que procesa su contenido

En el primer caso, el contenido del formulario es enviado a la direccin de correo electrnico

especificada por medio de una sintaxis de este tipo:

<form action="mailto:[email protected]" ...>

Si lo que queremos es que el formulario sea procesado por un programa, hemos de especificar
la direccin del archivo que contiene dicho programa. La etiqueta quedara en este caso de la
siguiente forma:

<form action="direccin del archivo" ...>

La forma en la que se expresa la localizacin del archivo que contiene el programa es la misma
que la vista para los enlaces.

method: Este atributo se encarga de especificar la forma en la que el formulario es enviado.

Los dos valores posibles que puede tomar esta atributo son post y get. A efectos prcticos y,
salvo que se os diga lo contrario, daremos siempre el valor post.

http://desarrolloweb.com/manuales/manual-html.html Pgina 86 de 116

 Manual de HTML

enctype: Se utiliza para indicar la forma en la que viajar la informacin que se mande por el
formulario. En el caso ms corriente, enviar el formulario por correo electrnico, el valor de
este atributo debe de ser "text/plain". As conseguimos que se enve el contenido del
formulario como texto plano dentro del email.

Si queremos que el formulario se procese automticamente por un programa, generalmente no

utilizaremos este atributo, de modo que tome su valor por defecto, es decir, no incluiremos
enctype dentro de la etiqueta FORM.

Ejemplo de etiqueta FORM completa

As, para el caso ms habitual -el envo del formulario por correo- la etiqueta de creacin del
formulario tendr el siguiente aspecto:

<form action="mailto:[email protected] (o nombre del archivo de proceso)" method="post" enctype="text/plain">

Entre esta etiqueta y su cierre colocaremos el resto de etiquetas que darn forma a nuestro
formulario, las cuales sern vistas en captulos siguientes.

Referencia: Mandar formulario por correo electrnico Los formularios se utilizan

habitualmente para implementar un tipo de contacto con el navegante, que consiste en que
ste pueda mandarnos sus comentarios por correo electrnico a nuestro buzn.

Para este tipo de utilizacin de los formularios hemos publicado hace tiempo en
DesarrolloWeb.com un artculo que puede resultar muy interesante para los que deseen un
referencia extremadamente rpida para construir un formulario que enve los datos por
correo electrnico al desarrollador de la pgina.

El artculo en cuestin se llama contacto con el navegante.

Para continuar, vamos a ver cmo insertar cada uno de los campos posibles en un formulario
HTML, comenzando por los campos de texto.

Referencia: Si deseas la formacin en vdeo, puedes ver este videotutorial sobre

formularios, publicado en DesarrolloWeb.com.

Este artculo es obra de Rubn Alvarez

Fue publicado por primera vez en 12/01/2002
Disponible online en http://desarrolloweb.com/articulos/21.php

Elementos de Formularios. Campos de texto

Vemos detenidamente los distintos elementos de formulario que sirven para
introducir texto.

http://desarrolloweb.com/manuales/manual-html.html Pgina 87 de 116

 Manual de HTML

El lenguaje HTML nos propone una gran diversidad de alternativas a la hora de crear nuestros
formularios, es decir, una gran variedad de elementos para diferentes propsitos. Estas van
desde la clsica caja de texto, hasta la lista de opciones en un men desplegable, pasando por
las cajas de validacin, etc.

En el artculo anterior del Manual de HTML ya vimos cmo iniciar nuestro formulario con la
etiqueta FORM y los distintos atributos que tenemos que utilizar para configurar su
funcionamiento.

En el presente artculo veremos las etiquetas que tenemos que utilizar para crear campos de
texto, que pueden ser de dos tipos. Veamos en qu consiste cada una de estas modalidades y
como podemos implementarlas en nuestro formulario.

Etiqueta INPUT para texto corto

Las cajas de texto son colocadas por medio de la etiqueta INPUT. Dentro de esta etiqueta
hemos de especificar el valor de dos atributos: type y name.

La etiqueta tendr la siguiente forma:

<input type="text" name="nombre">

De este modo expresamos nuestro deseo de crear una caja de texto cuyo contenido ser
llamado "nombre" (por ejemplo, en el caso de la etiqueta anterior, pero podemos poner
distintos nombres a cada uno de los campos de texto que habrn en los formularios). El
aspecto de este tipo de cajas es de sobra conocido, aqu lo podis ver:

El nombre del elemento del formulario es de gran importancia para poder identificarlo en
nuestro programa de procesamiento o en el mail recibido. Por otra parte, es importante indicar
el atributo type, ya que, como veremos, existen otras modalidades de elementos de formulario
que usan esta misma etiqueta INPUT.

El empleo de estas cajas esta fundamentalmente destinado a la toma de datos breves: palabras
o conjuntos de palabras de longitud relativamente corta. Veremos ms adelante que existe otra
forma de tomar textos ms largos a partir de otra etiqueta.

Adems de estos dos atributos, esenciales para el correcto funcionamiento de nuestra etiqueta,
existen otra serie de atributos que pueden resultarnos de utilidad pero que no son
imprescindibles:

size: define el tamao de la caja de texto, en nmero de caracteres visibles. Si al escribir el

usuario llega al final de la caja, el texto que escriba a continuacin tambin cabr dentro del
campo pero ir desfilando, a medida que se escribe, haciendo desaparecer la parte de texto que
queda a la izquierda.

http://desarrolloweb.com/manuales/manual-html.html Pgina 88 de 116

 Manual de HTML

maxlength: indica el tamao mximo del texto, en nmero de caracteres, que puede ser
escrito en el campo. En caso que el campo de texto tenga definido el atributo maxlength, el
navegador no permitir escribir ms caracteres en ese campo que los que hayamos indicado.

Nota: Es importante no confundir el atributo maxlength con el atributo size. Mientras size
define el tamao visible de la caja de texto, maxlength indica el tamao mximo real del
texto que se puede escribir. Podemos tener una caja de texto con un tamao aparente (size)
que es menor que el tamao mximo (maxlength). Lo que ocurrir en este caso es que, al
escribir, si sobrepasamos el espacio marcado por size, el texto ira desfilando dentro de la
caja hasta que lleguemos a su tamao mximo definido por maxlength, momento en el cual
nos ser imposible continuar escribiendo.

value: en algunos casos puede resultarnos interesante asignar un valor definido al campo en
cuestin. Esto puede ayudar al usuario a rellenar ms rpidamente el formulario o darle
alguna idea sobre la naturaleza de datos que se requieren. Este valor inicial del campo puede
ser expresado mediante el atributo value. Veamos su efecto con un ejemplo sencillo:

<input type="text" name="nombre" value="Perico Palotes">

Genera un campo de este estilo:

Veremos posteriormente que este atributo puede resultar bastante relevante en determinadas
situaciones.

Nota: estamos obligados a utilizar la etiqueta FORM

Aunque esperamos que haya quedado claro a medida que se lee en estos captulos sobre
formularios, hemos querido remarcarlo para que quede muy claro: Cuando queremos
utilizar, en cualquier situacin elementos de formulario, debemos escribirlos siempre entre
las etiquetas FORM y su cierre. De lo contrario, los elementos se vern perfectamente en
Explorer pero no en Netscape. (Actualizado: en estos momentos la mayora de los
navegadores pueden interpretar bien los campos de texto sin que estn en una etiqueta
FORM, sin embargo, la etiqueta FORM sigue siendo imprescindible, porque indica qu se
desea hacer con los campos de texto, como el action a realizar, y engloba qu elementos
pertenecen a qu formularios) Dicho de otra forma, en Netscape no se visualizan los
elementos de formulario a no ser que estn colocados entre las correspondientes etiquetas
de inicio y fin de formulario. Es por ello que para mostrar un campo de texto no vale con
poner la etiqueta INPUT, sino que habr que ponerla dentro de un formulario. As:

<form>

<input type="text" name="nombre" value="Perico Palotes">

</form>

Etiqueta INPUT, modalidad de texto oculto

http://desarrolloweb.com/manuales/manual-html.html Pgina 89 de 116

 Manual de HTML

Hay determinados casos en los que podemos desear esconder el texto escrito en el campo
INPUT, por medio asteriscos, de manera que aporte una cierta confidencialidad. Este tipo de
campos son anlogos a los de texto, con una sola diferencia: remplazamos el atributo
type="text" por type="password":

<input type="password" name="nombre">

En este caso, podis comprobar que, al escribir dentro del campo, en lugar de texto veris
asteriscos.

Estos campos son ideales para la introduccin de datos confidenciales, principalmente cdigos
de acceso o claves. Se ve en funcionamiento a continuacin.

Etiqueta TEXTAREA para texto largo

Si deseamos poner a la disposicin de usuario un campo de texto donde pueda escribir

cmodamente sobre un espacio compuesto de varias lneas, hemos de invocar una nueva
etiqueta: TEXTAREA y su cierre correspondiente.

Este tipo de campos son prcticos cuando el contenido a enviar no es un nombre, telfono,
edad o cualquier otro dato breve, sino ms bien, un comentario, opinin, etc. en los que existe
la posibilidad que el visitante desee rellenar varias lneas.

Dentro de la etiqueta textarea deberemos indicar, como para el caso visto anteriormente, el
atributo name para asociar el contenido a un nombre que ser asemejado a una variable en los
programas de proceso. Adems, podemos definir las dimensiones del campo a partir de los
atributos siguientes:

rows: define el nmero de lneas del campo de texto.

cols: define el nmero de columnas del campo de texto.

La etiqueta queda por tanto de esta forma:

<textarea name="comentario" rows="10" cols="40"></textarea>

El resultado es el siguiente:

http://desarrolloweb.com/manuales/manual-html.html Pgina 90 de 116

 Manual de HTML

Asimismo, es posible predefinir el contenido del campo. Para ello, no usaremos el atributo
value, sino que escribiremos dentro de la etiqueta el contenido que deseamos atribuirle.
Vemoslo:

<textarea name="comentario" rows="10" cols="40">Escribe tu comentario....</textarea>

Dar como resultado:

Como se podr imaginar, los campos de texto son de vital importancia para los formularios,
pero no son los nicos tipos de elementos que podemos colocar dentro de stos. En el siguiente
artculo veremos otros tipos de elementos para formularios.

http://desarrolloweb.com/manuales/manual-html.html Pgina 91 de 116

 Manual de HTML

Este artculo es obra de Rubn Alvarez

Fue publicado por primera vez en 12/01/2002
Disponible online en http://desarrolloweb.com/articulos/21.php

Otros elementos de formulario

Explicamos la sintaxis y el funcionamiento de las cajas y listas de seleccin,
casillas de verificacin y botones de radio.

En el Manual de HTML de DesarrolloWeb.com ya hemos publicado artculos sobre la creacin

de formularios y sobre los campos de texto en todas sus modalidades. Seguramente hayamos
percibido que los textos son un manera muy practica de hacernos llegar la informacin del
navegante. No obstante, en muchos casos, permitir al usuario que escriba cualquier texto
permite demasiada libertad y puede que la informacin que ste escriba no sea la que nosotros
estamos necesitando. Por otra parte, para determinados casos, los textos libres son
difcilmente adaptables a programs que puedan procesarlos debidamente. Es por ello que, en
determinados casos, puede resultar ms efectivo proponer una eleccin al navegante a partir
del planteamiento de una serie de opciones disponibles y definidas por nosotros.

Por ejemplo, pensemos que queremos que el usuario indique su pas de residencia. En ese caso
podramos ofrecer una lista de pases para que seleccione el que sea. Este mismo caso se puede
aplicar a gran variedad de informaciones, como el tipo de tarjeta de crdito para un pago, la
puntuacin que da a un recurso, si quiere recibir o no un boletn de novedades, etc...

Este tipo de opciones predefinidas por nosotros pueden ser expresadas por medio de
diferentes campos de formulario. Veamos a continuacin cuales son:

Listas de opciones

Las listas de opciones son ese tipo de mens desplegables que nos permiten elegir una (o
varias) de las mltiples opciones que nos proponen. Para construirlas emplearemos una
etiqueta SELECT, con su respectivo cierre:

Como para los casos ya vistos, dentro de esta etiqueta definiremos su nombre por medio del
atributo name. Cada opcin ser incluida en una lnea precedida de la etiqueta OPTION.

Podemos ver, a partir de estas directivas, la forma ms tpica y sencilla de esta etiqueta:

<select name="estacion">

<option>Primavera</option>

<option>Verano</option>

<option>Otoo</option>

<option>Invierno</option>

</select>

http://desarrolloweb.com/manuales/manual-html.html Pgina 92 de 116

 Manual de HTML

El resultado que obtenemos mediante este cdigo es el que se ilustra en la siguiente imagen:

Esta estructura puede verse modificada principalmente a partir de otros dos atributos:

size: Indica el nmero de valores mostrados a la vez en la lista. Lo tpico es que no se incluya
ningn valor en el atributo size, en ese caso tendremos un campo de opciones desplegable,
pero si indicamos size aparecer un campo donde veremos las opciones definidas por size y el
resto podrn ser vistos por medio de la barra lateral de desplazamiento.

multiple: Permite la seleccin de ms varios elementos de la lista. La eleccin de ms de un

elemento se hace como con el explorador de Windows, a partir de las teclas ctrl o maysculas
(la flecha hacia arriba, tambin llamada shift). Este atributo se expresa sin valor alguno, es
decir, no se utiliza con el igual: simplemente se pone para conseguir el efecto, o no se pone si
queremos una lista desplegable comn.

Consejo: Si es posible, no uses multiple. No recomendamos especialmente la puesta

en practica de esta opcin ya que el manejo de las teclas ctrl o shift para elegir varias
opciones puede ser desconocido para el navegante. Evidentemente, siempre cabe la
posibilidad de explicarle como funciona aunque no dejara de ser una complicacin para
ms para el visitante.

Veamos cual es el efecto producido por estos dos atributos cambiando la lnea:

<select name="estacion">

por:

<select name="estacion" size="3" multiple>

La lista quedara de esta forma:

http://desarrolloweb.com/manuales/manual-html.html Pgina 93 de 116

 Manual de HTML

La etiqueta OPTION puede asimismo ser matizada por medio de otros atributos

selected: Del mismo modo que multiple, este atributo no toma ningn valor sino que
simplemente indica que la opcin que lo presenta esta elegida por defecto.

As, si cambiamos la lnea del cdigo anterior:

<option>Otoo</option>

por:

<option selected>Otoo</option>

El resultado ser:

value: Define el valor de la opcin que ser enviado al programa o correo electrnico si el
usuario elige esa opcin. Este atributo puede resultar muy til si el formulario es enviado a un
programa para su procesamiento, puesto que a cada opcin se le puede asociar un nmero o
letra, lo cual es ms fcilmente manipulable que una palabra o texto. podramos as escribir
lneas del tipo:

<option value="1">Primavera</option>

De este modo, si el usuario elige primavera, lo que le llegara al programa (o correo) es una
variable llamada estacion que tendr con valor 1. En el correo electrnico recibiramos:

estacion=1

Botones de radio

Existe otra alternativa para plantear una eleccin, en este caso, obligamos al internauta a elegir
nicamente una de las opciones que se le proponen.

http://desarrolloweb.com/manuales/manual-html.html Pgina 94 de 116

 Manual de HTML

La etiqueta empleada en este caso es INPUT en la cual tendremos el atributo type ha de tomar
el valor radio. Veamos un ejemplo:

<input type="radio" name="estacion" value="1">Primavera

<br>

<input type="radio" name="estacion" value="2">Verano

<br>

<input type="radio" name="estacion" value="3">Otoo

<br>

<input type="radio" name="estacion" value="4">Invierno

Nota: Hay que fijarse que la etiqueta INPUT type="radio" slo coloca la casilla pinchable
en la pgina. Los textos que aparecen al lado, as como los saltos de lnea los colocamos con
el correspondiente texto en el cdigo de la pgina y las etiquetas HTML que necesitemos.

El resultado es el siguiente:

Como puede verse, a cada una de las opciones se le atribuye una etiqueta input dentro de la
cual asignamos el mismo nombre (name) para todas las opciones y un valor (value) distinto. Si
el usuario elige supuestamente Otoo, recibiremos en nuestro correo una lnea tal que esta:

estacion=3

Cabe sealar que es posible preseleccionar por defecto una de las opciones. Esto puede ser
conseguido por medio del atributo checked:

<input type="radio" name="estacion" value="2" checked>Verano

Veamos el efecto:

Cajas de validacin

Este tipo de elementos pueden ser activados o desactivados por el visitante por un simple clic
sobre la caja en cuestin. La sintaxis utilizada es muy similar a las vistas anteriormente:

<input type="checkbox" name="paella">Me gusta la paella

http://desarrolloweb.com/manuales/manual-html.html Pgina 95 de 116

 Manual de HTML

El efecto:

La nica diferencia fundamental es el valor adoptado por el atributo type.

Del mismo modo que para los botones de radio, podemos activar la caja por medio del atributo
checked.

El tipo de informacin que llegara a nuestro correo (o al programa) ser del tipo:

paella=on (u off dependiendo si ha sido activada o no).

Este artculo es obra de Rubn Alvarez

Fue publicado por primera vez en 12/01/2002
Disponible online en http://desarrolloweb.com/articulos/21.php

Envo, borrado y dems en formularios HTML

Enseamos la manera de colocar botones de envo y borrado en formularios
HTML. Tambin conocemos los campos invisibles y los botones normales.
Adems, hacemos un ejemplo prctico.

Siguiendo con la explicacin de todo lo relativo a formularios que estamos ofreciendo en el

Manual de HTML, ha llegado el momento de explicar cmo podemos hacer un botn para
provocar el envo del formulario, entre otras cosas.

Como podremos imaginarnos, en formularios no solamente habr elementos o campos donde

solicitar informacin del usuario, sino tambin habr que implementar otra serie de funciones.
Concretamente, han de permitirnos su envo mediante un botn. Tambin puede resultar
prctico poder proponer un botn de borrado o bien acompaar el formulario de datos ocultos
que puedan ayudarnos en su procesamiento.

En este capitulo, para terminar la saga de formularios, daremos a conocer los medios de
instalar todas estas funciones y acabaremos mostrando un ejemplo de formulario completo.

botn de envo de formulario (botn de submit)

Para dar por finalizado el proceso de relleno del formulario y hacerlo llegar a su gestor, el
navegante ha de enviarlo por medio de un botn previsto a tal efecto. La construccin de dicho
botn no reviste ninguna dificultad una vez familiarizados con las etiquetas INPUT ya vistas:

<input type="submit" value="Enviar">

http://desarrolloweb.com/manuales/manual-html.html Pgina 96 de 116

 Manual de HTML

Con este cdigo generamos un botn como este:

Como puede verse, tan solo hemos de especificar que se trata de un botn de envo
(type="submit") y hemos de definir el mensaje que queremos que aparezca escrito en el botn
por medio del atributo value. Este tipo de campos INPUT, para envo de formularios, a
menudo se conocen simplemente como "botones de submit".

Nota: Al enviar el formulario se crear un mensaje con tu programa de correo, que se debe
enviar con ese propio programa de correo, para que llegue al destinatario. Este es el
comportamiento tpico de los formularios que se programan con HTML, que requiere que
el usuario tenga un programa de correo instalado y configurado para que funcione.

Una duda tpica es cmo realizar el formulario para que se enve directamente desde la
pgina web, sin que el usuario deba tener un programa de correo, sino que se pulse el botn
de enviar y se genere y enve el mensaje automticamente. Para ello es necesario realizar
algo de programacin, aparte del propio formulario en HTML, en un lenguaje avanzado,
que sea del lado del servidor, como PHP, ASP... En DesarrolloWeb.com tienes todo lo que
necesitas para aprender a conseguir el envo automtico de correos, con explicaciones
detalladas para obtener los resultados por varias vas. Te recomendamos leer el manual
Envo de formularios avanzado.

botn de borrado (botn de reset)

Este botn nos permitir borrar el formulario por completo, en el caso de que el usuario desee
rehacerlo desde el principio. Su estructura sintctica es anloga a la anterior:

<input type="reset" value="Borrar">

A diferencia del botn de envo, indispensable en cualquier formulario, el botn de borrado

resulta meramente optativo y no es utilizado frecuentemente. Hay que tener cuidado de no
ponerlo muy cerca del botn de envo y de distinguir claramente el uno del otro, para que
ningn usuario borre el contenido del formulario que acaba de rellenar por error.

Datos ocultos (campos hidden)

En algunos casos, aparte de los propios datos rellenados por el usuario, puede resultar prctico
enviar datos definidos por nosotros mismos que ayuden al programa en su procesamiento del
formulario. Este tipo de datos, que no se muestran en la pgina pero si pueden ser detectados
solicitando el cdigo fuente, no son frecuentemente utilizados por pginas construidas en
HTML, son ms bien usados por pginas que emplean tecnologas de servidor. No os asustis,
veremos ms adelante qu quiere decir esto. Tan solo queremos dar constancia de su
existencia y de su modo creacin. He aqu un ejemplo:

http://desarrolloweb.com/manuales/manual-html.html Pgina 97 de 116

 Manual de HTML

<input type=hidden name="sitio" value="www.desarrolloweb.com">

Esta etiqueta, incluida dentro de nuestro formulario, enviara un dato adicional al correo o
programa encargado de la gestin del formulario. podramos, a partir de este dato, dar a
conocer al programa el origen del formulario o algn tipo de accin a llevar a cabo (una
redireccin por ejemplo).

Botones normales

Dentro de los formularios tambin podemos colocar botones normales, pulsables como
cualquier otro botn. Igual que ocurre con los campos hidden, estos botones por si solos no
tienen mucha utilidad pero podremos necesitarlos para realizar acciones en el futuro. Su
sintaxis es la siguiente.

<input type=button value="Texto escrito en el botn">

Quedara de esta manera:

El uso ms frecuente de un botn es en la programacin en el cliente. Utilizando lenguajes

como Javascript podemos definir acciones a tomar cuando un visitante pulse el botn de una
pgina web.

Ejemplo completo de formulario

Con este captulo finalizamos el tema de formularios. Pasemos ahora a ejemplificar todo lo
aprendido a partir de la creacin de un formulario que consulta el grado de satisfaccin de los
usuarios de una lnea de autobuses ficticia. El formulario est construido para que enve los
datos por correo electrnico a un buzn determinado.

Vemos el formulario en esta pgina. Vosotros tratar de construirlo para ver si habis entendido
bien los temas sobre formularios.

http://desarrolloweb.com/manuales/manual-html.html Pgina 98 de 116

 Manual de HTML

El cdigo del formulario se puede ver a continuacin. Pero antes de analizarlo te

recomendamos construir el formulario por tu propia cuenta para practicar.

<form action="mailto:[email protected]" method="post" enctype="text/plain">

Nombre <input type="text" name="nombre" size="30" maxlength="100">

<br>

Email <input type="text" name="email" size="25" maxlength="100" value="@">

<br>

Poblacin <input type="text" name="poblacion" size="20" maxlength="60">

<br>

Sexo

<br>

<input type="radio" name="sexo" value="Varon" checked> Hombre

<br>

<input type="radio" name="sexo" value="Hembra"> Mujer

<br>

<br>

Frecuencia de los viajes

<br>

<select name="utilizacion">

<option value="1">Varias veces al dia

<option value="2">Una vez al dia

<option value="3">Varias veces a la semana

<option value="4">varias veces al mes

</select>

<br>

<br>

Comentarios sobre su satisfaccin personal

http://desarrolloweb.com/manuales/manual-html.html Pgina 99 de 116

 Manual de HTML

<br>

<textarea cols="30" rows="7" name="comentarios"></textarea>

<br>

<br>

<input type="checkbox" name="recibir_info" checked> Deseo recibir notificacin de las novedades en las lneas de autobuses.

<br>

<br>

<input type="submit" value="Enviar formulario">

<br>

<br>

<input type="Reset" value="Borrar todo">

</form>

Referencias:

Hemos publicado un taller de HTML con un formulario para valorar la pgina web. Muy
sencillo y prctico. Puede ser interesante para afianzar estos conocimientos: Taller con
formularios.

Adems, tambin te recomendamos ver el videotutorial sobre formularios HTML, donde

repasamos todo lo visto hasta el momento sobre la creacin de formularios en pginas web.

Este artculo es obra de Rubn Alvarez

Fue publicado por primera vez en 12/01/2002
Disponible online en http://desarrolloweb.com/articulos/21.php

Etiquetas FIELDSET y LEGEND de formularios

Las etiquetas de HTML FIELDSET y LEGEND sirven para crear bloques de
elementos dentro de formularios.

En el Manual de HTML de DesarrolloWeb.com ya hemos visto varios artculos para la creacin

de formularios en HTML. Pero nos quedaba por ver un par de etiquetas, que no siendo
imprescindibles para la realizacin de formularios, s nos pueden ayudar a estructurarlos,
mejorando la interfaz de usuario de nuestras pginas.

Los atributos FIELDSET y LEGEND se utilizan en conjunto y sirven respectivamente para

definir y etiquetar grupos lgicos de elementos de formularios. Realmente no afectan a la
operativa del formulario, pero sirven para agrupar elementos en diferentes reas, de modo que
se clarifique la entrada de datos del usuario. Al formar varios grupos de elementos se puede
crear una estructura mucho ms fcil de asimilar por el usuario, sobre todo si se trata de
formularios que tengan muchos elementos.

Etiqueta FIELDSET

La etiqueta FIELDSET sirve para agrupar los elementos. Se utiliza con su respectiva etiqueta
de cierre y lo que hace es crear un recuadro que rodea a los elementos de formulario colocados
dentro de ella.

http://desarrolloweb.com/manuales/manual-html.html Pgina 100 de 116

 Manual de HTML

Por ejemplo, se podra usar de esta manera:

<fieldset>

Elemento de formulario: <input type="text" name="elemento1">

<br>

Otro elemento: <input type="text" name="otro">

</fieldset>

Simplemente crear un cuadrado que agrupar los dos elementos del formulario incluidos
dentro del FIELDSET. Podemos ver el resultado en una pgina aparte.

Etiqueta LEGEND

LEGEND sirve para nombrar o etiquetar un grupo creado con FIELDSET. Aade simplemente
una nota aclaratoria sobre qu tipo de informacin se est agrupando en el recuadro. Tampoco
sirve para nada en especial, de no ser porque queda bonita y porque puede servir para ayudar
al usuario y mejorar la interfaz y la claridad de los formularios.

La etiqueta LEGEND se coloca despus de la etiqueta FIELDSET. Tiene su propia etiqueta de

cierre. Entre LEGEND y su cierre colocamos el texto con el que queremos marcar el recuadro
definido con FIELDSET.

A la etiqueta LEGEND se le puede poner el atributo align para indicar el lugar donde debe
aparecer la leyenda. Por ejemplo podramos indicar align=right para que apareciera en la
parte de la derecha, en lugar de la izquierda, que es donde aparece por defecto.

Veamos ahora un ejemplo sencillo de utilizacin de las etiquetas FIELDSET y LEGEND en

conjunto.

<form>

<fieldset>

<legend align="right">Datos personales</legend>

Nombre: <input type="text" name="nombre">

<br>

Edad: <input type="text" name="edad" size="2">

<br>

Direccin: <input type="text" name="direccion">

</fieldset>

<br>

<fieldset>

<legend align="right">Datos de tu ordenador</legend>

Modelo de ordenador: <input type="text" name="modelo">

<br>

Sistema que te da el problema:

<select>

<option value=cpu>CPU

<option value=impresora>Impresora

</select>

</fieldset>

<br>

http://desarrolloweb.com/manuales/manual-html.html Pgina 101 de 116

 Manual de HTML

<fieldset>

<legend align="right">Descripcin del problema</legend>

<textarea cols="55" rows="8" name="descripcion"></textarea>

</fieldset>

</form>

El ejemplo en marcha tendra este aspecto.

Podremos comprobar como aparecen tres bloques en el formulario, producidos por tres
etiquetas FIELDSET, con varios campos de formulario incluidos en cada una. Adems, cada
uno de los FIELDSET tienen dentro un LEGEND que sirve para nombrar con una leyenda cada
uno de los tres bloques.

Etiqueta LABEL

Aunque no forma parte del objetivo de este artculo, queremos nombrar tambin otra etiqueta
llamada LABEL que s tiene una utilidad especial en la creacin de formularios, adems de la
esttica. Sirve para poner texto al lado de los elementos de formulario y que tal texto est
asociado al propio elemento. Ese texto, que pondremos con el tag LABEL, se asocia a un
elemento concreto con el atributo FOR, colocando como valor del atributo el identificador del
campo que se est asociando.

<label for="edad">Edad</label> <input type="text" name="edad" id="edad">

Como vemos, hemos creado un LABEL y hemos colocado en el atributo FOR el nombre del
campo de formulario que estamos asociando a ese texto. El resultado es que el texto colocado
dentro de LABEL es un elemento interactivo, al que podemos hacer clic y sera como si
hicisemos clic en el propio campo asociado al LABEL.

Para acabar, comentamos que estas etiquetas se hallan relatadas en otro artculo de
DesarrolloWeb.com, con explicaciones escritas por otro autor, que podran complementar y
ampliar la presente informacin. Si te interesa, accede al artculo Las nuevas etiquetas de
HTML 4.0 (2).

Este artculo es obra de Miguel Angel Alvarez

Fue publicado por primera vez en 06/08/2008
Disponible online en http://desarrolloweb.com/articulos/etiquetas-fieldset-legend-
formularios.html

http://desarrolloweb.com/manuales/manual-html.html Pgina 102 de 116

 Manual de HTML

Otras etiquetas y nuevos estndares del

HTML

En los captulos finales de este manual de HTML nos centraremos en ver otras etiquetas que
han ido apareciendo en el estndar. Adems acabamos explicando algunas cosas bsicas de lo
que es el HTML5, la ltima versin de HTML.

Etiqueta Iframe
Explicamos detenidamente la etiqueta IFRAME de HTML y todos sus atributos,
con algn ejemplo de uso.

Los frames (frame en ingls significa marco) son unas herramientas que han tenido una
historia dilatada en el desarrollo de pginas web con HTML. De ser una etiqueta no estndar
ha pasado a ser soportada por todos los navegadores y formar parte de las especificaciones de
HTML, para luego retirarse de nuevo del estndar en HTML5. No obstante, ha permanecido en
uso y dentro del estndar una etiqueta hermana IFRAME que vamos a ver en este artculo, que
todava hoy tiene mucha utilidad.

En concreto iframe sirve para crear un espacio dentro de la pgina donde se puede incrustar
otra web. Es un cuadrado cuyas dimensiones debe especificar el desarrollador en la propia
pgina, incluidas por los atributos width y height en la propia etiqueta IFRAME.

El iframe tiene asociada una pgina web, que se carga en el espacio y operar de manera
totalmente independiente. Esa pgina web tendr sus propios contenidos y estilos. Adems
ser perfectamente funcional: si tiene enlaces se mostrarn en ese mismo espacio y si tiene
scripts o aplicaciones dentro se ejecutarn tambin de manera autnoma en el espacio
reservado al iframe.

Nota: Si andas buscando informacin sobre los frames tradicionales, en

DesarrolloWeb.com ya hemos hablado mucho sobre ellos y aunque ya no estn dentro del
estndar actual del HTML todava los navegadores los interpretan, por compatibilidad con
las pginas antiguas. Puedes comenzar la lectura en el artculo Frames en HTML.

En este artculo vamos a hablar la etiqueta "hermana" que es a da de hoy mucho ms

usada, porque resulta ms til y menos problemtica que los propios frames. IFRAME fue
un tag introducido en las especificaciones de HTML 4.0.

Donde resulta de utilidad el IFRAME

http://desarrolloweb.com/manuales/manual-html.html Pgina 103 de 116

 Manual de HTML

Iframe se utiliza en muchos contextos. Dentro de un iframe podemos mostrar contenidos de

otras pginas, como si estuvieran en la nuestra, por lo que sirven para ejemplos como:

Cdigos de banner, que se invocan por medio de un iframe pidiendo los datos del
banner generalmente a un servidor de banners que puede estar en otra red.
Visualizar contenidos de terceros, como bloques de noticias o novedades que ofrecen en
otras webs.
Interfaces de usuario, en el que ciertas actividades se realizan de forma autnoma y el
procesamiento est en otra pgina web.

Uso de iframe frente a frame

Actualmente la etiqueta iframe se utiliza ms a menudo que la etiqueta frame, porque no da

tantos problemas como esta. La diferencia principal est basada en que la etiqueta iframe no
necesita una declaracin de los espacios de los frames o frameset, porque se incrusta en el
cdigo HTML de la pgina. El iframe, por tanto, no provoca problemas de navegacin, como
los que ocurren con los frames normales si no se entra correctamente a travs del frameset.

Tambin, ya que no existe el frameset en los iframe, no adolece de los problemas del uso de
frames, sobretodo a la hora en que la pgina es indexada en los motores de bsqueda.

Por decirlo de alguna manera, trabajar con iframe o frames flotantes es tan sencillo como hacer
una tabla, que se codifica dentro de la maqueta HTML, con su espacio reservado dentro de la
pgina. As, la nica diferencia con respecto a una tabla es que el contenido del iframe se
extrae de otra pgina web.

Construccin de la etiqueta iframe

Como decimos, el iframe se coloca directamente en el cdigo HTML, en el lugar donde

queremos que aparezca.

Se colocara con un cdigo como este:

<iframe src="pagina_fuente.html" width=290 height=250>Texto para cuando el navegador no conoce la etiqueta iframe</iframe>

Como se ve, los atributos principales de iframe son la pgina web que se va a mostrar en el
espacio y el ancho y alto del recuadro que reservemos para el frame flotante.

Como se puede ver, la etiqueta iframe tiene su correspondiente etiqueta de cierre. Todo el texto
que coloquemos entre la etiqueta de inicio y la de cierre es texto alternativo, que slo se
mostrar en caso que el navegador del visitante no acepte la etiqueta iframe.

Todos los atributos de iframe

Ahora vamos a ver cules seran los atributos disponibles para la etiqueta iframe. No obstante,
cabe ya sealar que algunos de los atributos que vamos a ver se engloban ms en el terreno de
los estilos y por tanto se podran, y sera ms correcto, especificar dentro de las CSS.

http://desarrolloweb.com/manuales/manual-html.html Pgina 104 de 116

 Manual de HTML

src: Para indicar la pgina web que se mostrar en el espacio del frame flotante.

width: Para definir la anchura del recuadro del iframe

height: Para definir la altura del iframe

name: Para especificar el nombre del frame, que podemos utilizar luego para referirnos a l
con el target de los links, o mediante javascript.

id: Para indicar el identificador del iframe, y poder referirnos a l desde javascript.

frameborder: para definir si queremos o no que haya un borde en el frame. Los valores
posibles son 0 | 1. frameborder=0 indicara que no queremos borde y frameborder=1 que s.

scrolling: indica si se quiere que aparezcan barras de desplazamiento para ver los contenidos
del iframe completo, en el caso que no aparezcan en el espacio reservado para el iframe. Los
valores posibles son: yes | no | auto. El valor "yes" es para que aparezcan siempre las barras de
desplazamiento o barras de scroll, "no" sirve para que no aparezcan nunca y "auto" es para que
aparezcan slo cuando son necesarias (es el valor por defecto)

marginwidth: Para definir el margen a izquierda y derechar que debe tener la pgina que va
dentro del iframe, con respecto al borde. Este margen va en pixels, pero prevalecer el margen
que pueda tener asignada la pgina web que mostremos en el frame flotante.

marginheight: lo mismo que marginwidth, pero en este caso para el tamao del margen por
la parte de arriba y abajo.

margin: para especificar alineacin del frame, igual que se especifica para las imgenes.

style y class: los atributos para definir el aspecto del iframe por medio de hojas de estilo css.

Para acabar, aqu vemos otro ejemplo de iframe con unos cuantos atributos ms:

<iframe name=miframeflotante src="colabora.htm" width=400 height=550 frameborder="0" scrolling=yes marginwidth=2 marginheight=4 align=left>Tu

navegador no soporta frames!!</iframe>

Este artculo es obra de Miguel Angel Alvarez

Fue publicado por primera vez en 17/03/2008
Disponible online en http://desarrolloweb.com/articulos/etiqueta-iframe.html

Las nuevas etiquetas de HTML 4.0

En este artculo veremos estas nuevas etiquetas del estandar HTML 4.0.

Cuando Internet empezaba su imparable escalada, la versin del estndar HTML que circulaba
era la 2.0, el cul siguen soportando los navegadores ms actuales. Pero las herramientas de

http://desarrolloweb.com/manuales/manual-html.html Pgina 105 de 116

 Manual de HTML

que se dispona no ofrecan un control preciso de los documentos.

Pero como por aquel entonces el objetivo de Internet estaba fundamentalmente orientado al
mbito acadmico y no al de diseo, no se le dio demasiada importancia a la cuestin de lanzar
una versin mejorada del estndar hasta que Netscape, que por aquel entonces era la empresa
lder en el sector, tom la iniciativa de incluir nuevas etiquetas pensadas para mejorar el
aspecto visual de las pginas web.

Por este motivo el IETF (Internet Engineering Task Force), Grupo de Trabajo en Ingeniera de
Internet, comenz a elaborar nuevos estndares, los cuales dieron como fruto el HTML 3.0,
que result ser demasiado grande para las infraestructuras que haba en ese momento, lo cual
dificult su aceptacin.

As pues, una serie de compaas (entre las que estaban Netscape, Sun Microsystems o
Microsoft, entre otras), se unieron para crear lo que hoy se denomina W3C (o lo que es lo
mismo, Consorcio para la World Wide Web), que fue fundado en octubre de 1.994 para
conducir a la World Wide Web a su mximo potencial, desarrollando protocolos de uso comn,
para normalizar el uso de la web en todo el mundo.

El compromiso del W3C de encaminar a la Web a su mximo potencial incluye promover un

alto grado de accesibilidad para las personas con discapacidades. El grupo de trabajo
permanente Web Accessibility Initiative (WAI, Iniciativa para la Accesibilidad de la Red), en
coordinacin con organizaciones alrededor de todo el mundo, persigue la accesibilidad de la
Web a travs de cinco reas de trabajo principales: Tecnologa, directrices, herramientas,
formacin, difusin, e investigacin y desarrollo.

De esta iniciativa naci el borrador de HTML 3.2 y en su versin definitiva se introdujeron

cambios esenciales para las posibilidades que empezaban a ofrecer los navegadores, estas
inclusiones fueron las tablas, los applets, etc.

En julio de 1.997 nace el borrador del HTML 4.0 y finalmente se aprueba en diciembre de
1.997 este estndar inclua como mejoras los marcos (frames), las hojas de estilo y la inclusin
de scripts en pginas web, entre otras cosas.

Etiquetas para definir bloques de texto

Veamos una serie de etiquetas para englobar el texto cuya funcin indica principalmente la
funcin que desempea ese texto dentro de las pginas HTML. Daremos una breve descripcin
de cada una de ellas.

Entre el estndar del HTML 3.2 al 4.0 se introdujeron ocho nuevas etiquetas de las cuales
daremos una breve explicacin.

La etiqueta Q acta de forma muy parecida a BLOCKQUOTE pero con la particularidad de que
aade un sangrado en prrafos ms pequeos y sin necesidad de romper el prrafo.

http://desarrolloweb.com/manuales/manual-html.html Pgina 106 de 116

 Manual de HTML

Segn el W3C, la etiqueta BLOCKQUOTE es para aadir sangrados largos y Q, para sangrados
ms pequeos, sin necesidad de romper el prrafo.

Nota: En el HTML 4.0 es imprescindible poner la etiqueta de apertura y la de clausura de

Q

ACRONYM

Las etiquetas ACRONYM y su cierre, indican que hay un acrnimo en el texto. Un acrnimo es
un pequeo texto que ayuda a explicar la estructura del texto una frase.

Nota: La etiqueta ACRONYM ha sido retirada del estndar con la versin HTML5.

INS y DEL

Utilice INS para marcar las partes de un documento que se han agregado desde la versin
pasada del documento. DEL marca de manera similar un texto de un documento que se ha
suprimido desde la versin anterior.

COLGROUP

Se utiliza para tener un mejor control sobre un el formato de las tablas especificando las
caractersticas que comparten como: anchura, altura y alineacin. Cada tabla debe tener por lo
menos un COLGROUP sin especificar ninguna caracterstica de COLGROUP. HTML 4.0
asume que una tabla contiene un solo grupo de columnas y que este contiene todas las
columnas de una tabla. Por ejemplo, esto nos servira para crear una tabla con una celda en la
que puede incluirse una descripcin y despus seguido de check boxes para seleccionar las
opciones deseadas.

Podemos ver un ejemplo de Cdigo:

<TABLE> <COLGROUP span="10" width="30"> <COLGROUP span="1" width="0*"> <THEAD> <TR>... </ TABLE>

De esta forma, COLGROUP proporciona un formato ms agradable a las celdas, sin necesidad
de especificar propiedades idnticas para cada una por separado.

Nuevas etiquetas para uso en formularios

En el presente texto vamos a hablaros sobre las etiquetas del HTML 4.0 relacionadas con la
creacin de formularios, que muchas veces son desconocidas, pero no por ello dejan de ser

http://desarrolloweb.com/manuales/manual-html.html Pgina 107 de 116

 Manual de HTML

interesantes. El paseo por esta nueva serie de etiquetas del HTML viene de la mano de Luciano
Moreno y con revisin en 2011 de Miguel Angel Alvarez.

FIELDSET

Hasta ahora, no disponamos de ninguna manera de agrupar visualmente varios controles, si

no echbamos mano de elementos que no son del formulario, como tablas o capas (divisiones o
elementos DIV, como prefieras llamarles). Ahora, si encerramos una parte de un formulario
dentro de la etiqueta FIELDSET, se mostrara un rectngulo alrededor de los campos
englobados por dicha etiqueta.

Adems, podemos indicar un ttulo en el rectngulo creado por FIELDSET y para ello
utilizamos la etiqueta LEGEND, que admite el parmetro align="left / center / right / top /
bottom", lo que nos permite alinear el ttulo horizontal y verticalmente.

Para aclarar el aspecto de la agrupacin de campos con FIELDSET podemos ver el siguiente
efecto obtenido al agrupar un par de elementos de formulario.

Nota: Ten en cuenta que puedes aplicar estilo a esta organizacin de campos de formulario
usando las CSS sobre la etiqueta FIELDSET, en el caso que sepamos usar las Hojas de
Estilo en Cascada.

Ejemplo:

<form action="#" method="post" enctype="text/plain" name="miform">

<fieldset>

<legend align="left">

Caja de texto

</legend>

pon tu nombre:

<input type="text" size="15">

</fieldset>

</form>

http://desarrolloweb.com/manuales/manual-html.html Pgina 108 de 116

 Manual de HTML

Referencia: Para los interesados, cabe sealar que en DesarrolloWeb.com existe un

artculo que explica estas etiquetas desde otro punto de vista y con las palabras de otro
autor, que se puede leer en el link Etiquetas FIELDSET y LEGEND de formularios.

LABEL

Hasta no hace mucho los textos que ponemos al lado de los campos de formulario no estaban
asociados a dichos campos. Es decir, el texto que colocamos al lado de un elemento de
formulario, para especificar qu debe escribir el usuario en el campo, no tiene ninguna relacion
real con el propio elemento de formulario.

Por ejemplo, si tenemos un cdigo como este:

Direccin: <input type="text" name="direccion">

El texto "Direccin" no est asociado para nada con el campo INPUT. Por ello, al pulsar sobre
el texto "Direccin" no ocurre nada. Esto es as tambin con otros campos de formulario, como
las cajas de checkbox o botones de radio.

<input type="checkbox" name="interesado"> Estoy interesado

Si pulsamos sobre el texto que hay al lado del campo de confirmacin "Estoy interesado", no
sucede nada! Pero ahora, con la utilizacin de la etiqueta LABEL podemos conseguir que,
haciendo clic en el texto "Estoy interesado", el control checkbox cambie de estado.

Ejemplo:

<form action="#" method="post" enctype="text/plain" name="un ejemplo ms">

<label>

<input type="checkbox" name="email">

Recibir email

</label>

</form>

Ese ejemplo de LABEL es perfectamente vlido y asocia el texto "Recibir email" al campo
checkbox de formulario, de manera que si pulsamos sobre "Recibir email" cambiar el estado
del campo checkbox asociado. Sin embargo, en la etiqueta LABEL podemos utilizar un atributo
llamado FOR, que sirve para indicar explcitamente a qu campo de formulario se est
asociando ese texto. Para ello colocamos como valor del atributo FOR el identificador del
campo que estamos asociando a ese LABEL. Esto nos permite una mayor versatilidad a la hora
de componer el HTML de nuestra pgina. Veamos el siguiente ejemplo:

<form>

<label for="hombre">Hombre</label>

http://desarrolloweb.com/manuales/manual-html.html Pgina 109 de 116

 Manual de HTML

<input type="radio" name="sexo" id="hombre" value="hombre">

<br>

<label for="mujer">Mujer</label>

<input type="radio" name="sexo" id="mujer" value="mujer">

</form>

Si ponemos este ejemplo en marcha, veremos que pulsando en el texto "Hombre" se activa el
botn de radio "hombre". Del mismo modo, si pulsamos sobre el texto "Mujer" se activar la
opcin del radio button "mujer". Podemos ver como quedara ese cdigo en marcha a
continuacin, aunque es una imagen, no podrs hacerlo funcionar:

BUTTON

A partir de la implementacin de los estndares HTML 4.0 contamos con varias etiquetas
nuevas para construir formularios, siendo BUTTON una de ellas, bastante til por cierto.
BUTTON se encuentra ampliamente soportada en la actualidad.

Esta etiqueta proporciona un mtodo nico para la implementacin de cualquier tipo de botn
de formulario. Sus principales atributos son:

type="tipo", que puede tomar los ya conocidos valores submit (por defecto), reset y
button.
name="nombre", que asigna un nombre identificador nico al botn.
value="texto", que define el texto que va a aparecer en el botn.

La principal ventaja que aporta estas etiquetas es que ahora vamos a poder introducir dentro
de ellas cualquier elemento de HTML, como imgenes y tablas.

Podemos ver un ejemplo a continuacin.

<form action="#" method="post" enctype="text/plain" name="miform">

http://desarrolloweb.com/manuales/manual-html.html Pgina 110 de 116

 Manual de HTML

<button name="boton_1" type="button">

<table width="10" cellspacing="0" cellpadding="2" border="1">

<tr>

<td>uno</td>

<td>dos</td>

</tr>

<tr>

<td>tres</td>

<td>cuatro</td>

</tr>

</table>

</button>

</form>

Referencia: Si deseas aprender algo ms sobre la etiqueta BUTTON te recomendamos

leer el artculo Botones HTML con la etiqueta BUTTON.

Este artculo es obra de Christian Santaluca

Fue publicado por primera vez en 03/02/2003
Disponible online en http://desarrolloweb.com/articulos/21.php

Etiqueta META robots

Explicacin de la etiqueta META robots y diferentes posibilidades de
configuracin.

Mediante las diferentes etiquetas META que podemos colocar en un sitio web disponemos de
una variedad amplia de metainformaciones para comunicar a cualquier sistema que lea
nuestra pgina web. En este artculo vamos a presentar una etiqueta interesante para definir
cmo se tienen que comportar los motores de bsqueda a la hora de visitar nuestra pgina y
mostrarla entre los resultados de bsquedas realizados en el buscador. Se trata la etiqueta
meta de robots.

La etiqueta META de Robots sirve para personalizar el comportamiento de robots de

indexacin, tipo Google, a la hora de procesar nuestra pgina web. Cada una de las pginas de
nuestro sitio puede tener una declaracin de la etiqueta meta de robots distinta, con lo que
podemos incluso definir de manera independiente cmo deseamos que se trate cada una de las
pginas que componen el web.

En DesarrolloWeb.com hemos publicado anteriormente informaciones acerca de distintas

etiquetas META en artculos dispersos. Adems, tenemos un Generador de Etiquetas Meta que
tambin puede resultar de inters para los lectores.

Etiqueta ROBOTS de META Tags

Como hemos dicho, la etiqueta robots, dentro de las posibles etiquetas con Metainformaciones
acerca de un documento web, sirve para llevar un control exhaustivo de lo que puede o no

http://desarrolloweb.com/manuales/manual-html.html Pgina 111 de 116

 Manual de HTML

puede hacer un robot de indexacin cuando visita nuestro sitio web. Los comportamientos ms
tpicos que podemos definir son permitir o no indexar una pgina y seguir o no sus enlaces.

Nota: Conviene recordar que tambin se puede definir el comportamiento de los robots de
bsqueda con nuestro sitio, a la hora por ejemplo de permitir o no indexar las distintas
pginas, mediante el archivo robots.txt.

Ahora veamos cmo se define esta etiqueta META de robots.

<META name="robots" content="NOINDEX">

Como se puede ver, se define el etiqueta META y se acompaa de dos atributos esenciales:

Name: que para la etiqueta META que controla los comportamientos en motores de
indexacin el valor es "robots".

Content: se indica las directivas que queremos que apliquen los motores de indexacin
cuando visitan la pgina.

Valores posibles de la etiqueta META ROBOTS

En el atributo Content de la etiqueta meta debemos colocar las directrices que deseemos para
buscadores, tantas como deseemos, separadas por comas. Las distintas directrices a aplicar
son las siguientes:

INDEX / NOINDEX Sirve para indicar si se desea o no permitir la indexacin de la pgina

por los motores de bsqueda.

FOLLOW / NOFOLLOW Con esta directriz se indica si se debe o no permitir a los motores
de bsqueda recorrer o seguir recorriendo la web a travs de los enlaces que encuentre en el
cuerpo del documento.

ARCHIVE / NOARCHIVE Esto permite decir si deseamos o no que el motor de bsqueda

archive el contenido del sitio web en su cach interna. Como habremos podido ver, buscadores
como Google tienen una cach y podemos ver las pginas web tal como las tiene cacheadas el
buscador. Para ello, en los resultados de las bsquedas aparece un enlace que pone cach. Si
decimos que no archive la pgina, no debera mostrar ese enlace de cach. Esto en realidad,
segn Google, no evita que se guarde en cach la pgina, sino que no permite verla a los
usuarios del buscador y por lo tanto no muestra el enlace.

SNIPPET / NOSNIPPET Esta directriz en principio no resulta muy til, al menos a primera
vista. Sirve para que el motor de bsqueda no muestre ninguna descripcin de un sitio, slo su
ttulo. Si utilizas NOSNIPPET automticamente defines un NOARCHIVE, por lo que la pgina
tampoco se mostrar en cach.

http://desarrolloweb.com/manuales/manual-html.html Pgina 112 de 116

 Manual de HTML

ODP / NOODP Sirve para decirle al buscador que debe, o no, mostrar el ttulo y descripcin
de la pgina iguales a los que se encuentra en el Open Directory Project. En algunos casos,
algunos buscadores muestran como ttulo y descripcin de una web los que se han publicado
en el ODP (ENLACE A http://www.dmoz.org/).

YDIR / NOYDIR Es bsicamente lo mismo que ODP / NOODP, con la diferencia que es para
que no se pueda, o si, mostrar la descripcin y ttulo que aparece en el directorio de Yahoo.

Cuando no existe esta etiqueta los buscadores interpretan las condiciones ms favorables para
ellos, es decir, que pueden hacer todo lo que suelen hacer con otras pginas a la nuestra, como
indexarla, seguir sus enlaces, archivarla, etc.

Ejemplos de etiquetas META ROBOTS

A la hora de utilizar la META ROBOTS bsicamente lo que podemos hacer es restringir las
posibilidades de los motores de bsqueda, puesto que las posibilidades por defecto son las
menos restrictivas.

Esto quiere decir que una etiqueta como la siguiente es irrelevante, porque el buscador
siempre va a indexar la pgina y seguir sus enlaces de manera predeterminada:

<META name="robots" content="INDEX,FOLLOW">

Podemos definir entonces casos ms restrictivos como estos:

<META name="robots" content="INDEX,NOFOLLOW">

Para indicar que se desea que se indexe la pgina, pero no se sigan los enlaces. Dada que la
opcin INDEX es la que se sobreentiende por defecto, esta etiqueta tendra el mismo valor que
la siguiente:

<META name="robots" content="NOFOLLOW">

Para indicar que no queremos que se sigan los enlaces de la pgina.

<META name="robots" content="NOINDEX,NOFOLLOW">

Para indicar que no queremos que se indexe la pgina ni se sigan los enlaces que pueda
contener.

<META name="robots" content="NOARCHIVE">

Lo nico que indicamos es que no se muestre el enlace para ver la pgina en la cach del

http://desarrolloweb.com/manuales/manual-html.html Pgina 113 de 116

 Manual de HTML

buscador.

<META name="robots" content="NOINDEX,NOFOLLOW,NOARCHIVE,NOODP,NOSNIPPET">

Con esta restrictiva etiqueta forzamos para que no se indexe la pgina, no se sigan los enlaces,
no se muestre el link de cach, no se muestre el ttulo y descipcin del Open Directory Project y
slo se muestre el ttulo de la pgina en los resultados de las bsquedas.

Este artculo es obra de Miguel Angel Alvarez

Fue publicado por primera vez en 19/08/2008
Disponible online en http://desarrolloweb.com/articulos/etiqueta-meta-robots.html

El futuro del desarrollo web: HTML 5

HTML 5 es una tecnologa creada para modernizar la web y el desarrollo de
aplicaciones web, online y offline, que aun tiene bastante camino por recorrer
para ser una realidad.

HTML 5 es el ms nuevo estndar del lenguaje HTML en estos momentos. Durante muchos
aos estuvo en fase de borrador pero ya desde hace tiempo es una realidad. Para las personas
que han estudiado el Manual de HTML de DesarrolloWeb, bsicamente indica que ahora
disponemos de nuevas etiquetas en el lenguaje, as como se han marcado como obsoletas
varias otras. No obstante, con lo que sabes hasta este punto ya tienes la base necesaria para
poder entender de una manera rpida cualquier uso del lenguaje de marcacin.

El Manual de HTML est terminando por aqu, pero no queremos perder la oportunidad de
hablar de HTML5 y motivar a las personas para que continen el estudio de HTML
acercndose a esta nueva versin. Este artculo de DesarrolloWeb.com pretender ofrecer
algunas pistas sobre el lenguaje de marcacin y HTML5 en general, as como resumir el
camino que ha realizado para convertirse en una realidad. Te adelantaremos algunas de las
novedades ms importantes que nos ofrece.

Por qu se crea HTML 5

Los que nos dedicamos a hacer pginas web sabemos que un sitio web es como un puzzle de
tecnologas que operan entre si. Para hacer una pgina, en principio, se necesita simplemente
HTML, pero esta afirmacin hoy tiene poco que ver con la realidad y las necesidades de los
desarrolladores para crear una rica experiencia de usuario.

Es que hoy pocos sitios web se basan nicamente en HTML. Quien ms quien menos utiliza
CSS para definir el aspecto de la pgina, algn tipo de script del lado del cliente, en Javascript,
vdeos en diversos formatos, etc. Para poder beneficiarse e integrar todas estas tecnologas,
existen multitud de etiquetas que se han ido creando al paso, segn se iban necesitando, y las
cuales no han pasado por el filtro de los normalizadores de tecnologas como el W3C.

http://desarrolloweb.com/manuales/manual-html.html Pgina 114 de 116

 Manual de HTML

Por tanto, ms de 10 aos despus que se publicase la ltima especificacin del HTML, resulta
primordial para el futuro de la web la creacin de un nuevo estndar que recoja y solucione de
alguna manera, las necesidades de los desarrolladores que se han ido creando a lo largo de
todo este tiempo.

Esfuerzos en diversas vertientes para la creacin de HTML 5

Sin duda ya hace tiempo que se necesitaba esta nueva especificacin, as que hoy nos
preguntamos por qu ha pasado tanto tiempo sin publicarse esta nueva versin del lenguaje?
La respuesta es que HTML 5 se ha convertido en un proyecto muy ambicioso, donde hay
muchas personas, empresas e instituciones que tienen mucho que opinar. Es de vital
importancia, por tanto, coordinar a todos los implicados para crear un nico frente comn,
que asegure esta vez un xito de la tecnologa como un estndar.

En principio, los encargados de regular los estndares de Internet son los integrantes del W3C,
que han estado trabajando durante bastante tiempo en otros lenguajes como XML. No se
puede decir que hayan dejado de lado HTML, pero de alguna manera estaban creando otros
estndares ms rgidos que sustituyesen al lenguaje. Ante esta falta de inters en HTML y las
necesidades reales de los desarrolladores de webs por parte del W3C, se cre en 2004 una
comunidad de personas interesadas en mejorar y modernizar el lenguaje de marcacin. Este
nuevo grupo, llamado WHATWG (Web Hypertext Application Technology Working Group),
se cre a raz de una conferencia del W3C con personas integrantes de los equipos de
desarrollo de Apple, la Fundacin Mozilla y Opera, a la que se han ido agregando personal de
Microsoft y otras empresas implicadas en el mundo web.

El WHATWG, que funciona de manera independiente del W3C, tiene como objetivo principal
trabajar en la nueva especificacin del HTML 5 y a ellos debemos muchas de los avances que
estn por llegar con relacin al lenguaje. Es una organizacin abierta, donde cualquiera puede
participar libre gratuitamente. De hecho, segn comentan en su web, estn realmente
interesados en las opiniones e intereses de las personas que trabajan con el desarrollo web,
para crear unas especificaciones que respondan a las necesidades reales de los profesionales de
Internet.

Qu es verdaderamente HTML5

Cuando nos referimos a HTML5 en principio podramos pensar que es solo una nueva versin
del HTML, pero realmente con este trmino tambin se engloba a otras tecnologas que estn
estrechamente relacionadas con la plataforma web. Es el caso de CSS y las API de Javascript
que dependen del navegador.

Por lo que respecta al lenguaje de marcacin, HTML en s, se ha procurado eliminar todo

aquello que serva exclusivamente para aplicar estilo, e introducir toda una serie de etiquetas
nuevas que aportan valor semntico al contenido. Si te interesa deberas leer el manual sobre
las novedades de HTML5 como lenguaje de marcas.

Por lo que respecta a CSS, se ha presentado la versin 3 del lenguaje, que puedes aprender en
el Manual de CSS3. Esta versin incluye muchas maneras nuevas de aplicar estilos, que vienen
a resolver las diversas demandas de los diseadores y a evitar que tengamos que hacer trucos

http://desarrolloweb.com/manuales/manual-html.html Pgina 115 de 116

 Manual de HTML

diversos para ir un poco ms all de lo que te permita anteriormente CSS.

Y ya en la parcela de Javascript, HTML5 no entra en el lenguaje en s (que es regulado por otra

organizacin externa al W3C y compaa), sino en todo lo que ofrecen los navegadores para
poder trabajar con Javascript. Nos referimos a una serie de APIs para trabajar con la
plataforma web, osea, lo que la web te ofrece. Todos esos conjuntos de funciones sirven para
cosas tan variadas como geolocalizacin, almacenamiento local, trabajo a pantalla completa y
un innumerable set de funcionalidades.

Enlaces relacionados

Para la documentacin de los lectores, publicamos los enlaces a los borradores de

especificaciones del HTML 5 y las organizaciones que trabajan en ellos:

W3C HTML Working Group: http://www.w3.org/html/

WHATWG http://www.whatwg.org

ltima versin publicada del borrador de HTML 5 http://www.w3.org/TR/html5/

Borrador del HTML 5 por la WHATWG http://www.whatwg.org/specs/web-apps/current-

work/multipage/

Conclusin

Hemos podido comprobar que existen numerosos esfuerzos para la creacin de las nuevas
especificaciones del HTML 5, llevados a cabo por distintas organizaciones, independientes,
pero que trabajan en un frente comn.

En DesarrolloWeb.com encontrars cantidad de artculos que tratan sobre cosas concretas del
HTML5. Usa el buscador interno para localizarlos. No obstante, queremos darte una referencia
para seguir conociendo lo bsico: qu es HTML 5.

Este artculo es obra de Miguel Angel Alvarez

Fue publicado por primera vez en 14/10/2009
Disponible online en http://desarrolloweb.com/articulos/html5-futuro-desarrollo.html

http://desarrolloweb.com/manuales/manual-html.html Pgina 116 de 116