Alonso Cornejo - Manual de HTML

Manual de HTML
Alonso Cornejo
Publicado: 2012
Categora(s): No Ficcin, Informtica, Programacin, HTML
Etiqueta(s): computacion html lenguaje pagina web
1
Introduccin a HTML
Introduccin al manual de HTML y al lenguaje de modelado de pgi-
nas web. Veremos qu es HTML y las primeras nociones que nos ayuda-
rn a realizar las primeras pruebas de creacin de una pgina web
sencilla.
2
Parte 1
Prlogo al manual de HTML
3
A quin va dirigido este manual y las lecturas aconsejadas an-
tes de abordarlo.
Bienvenidos al manual de HTML de DesarrolloWeb. A travs de todos
estos captulos vamos a descubrir el lenguaje utilizado para la creacin
de pginas web: el Hyper Text Markup Language, ms conocido co-
mo HTML.
Puede que en un principio, el hecho de hablar de un lenguaje inform-
tico pare los pies a ms de uno. No os asustis, el HTML no deja de ser
ms que una forma un tanto peculiar de dar formato a los textos e imge-
nes que pretendemos ver por medio de un navegador.
Antes de entrar en materia, lo cual haremos de una forma directa y
practica, os recomendamos fervorosamente la lectura previa de nuestro
manual Publicar en Internet. A partir de esta gua, aprenderis los con-
ceptos ms bsicos necesarios para creacin de un sitio web. Tambin os
permitir acceder a este manual con unos conocimientos de base sobre
HTML imprescindibles y os dejara bien claro lo que su conocimiento
aporta con respecto al simple uso de editores de HTML. Adems, en di-
cho manual sobre la publicacin en Internet, explicamos tambin algo
tan importante como qu hace falta para subir una pgina web realiza-
da que tenemos en nuestro ordenador a un servidor de Internet. Si lo de-
seamos, lo podemos ver en vdeo en el Videotutorial sobre subir una web
a Internet.
El pblico al que va enfocado este manual es a todos aquellos que, con
conocimientos mnimos de informtica, desean hacer mundialmente p-
blico un mensaje, una idea o una informacin usando para ello el medio
ms prctico, econmico y actual: Internet.
Lo que necesitis como base para llevar a buen trmino el aprendizaje
(aparte de leer el manual Publicar en Internet) es:
Saber escribir con un teclado
Saber manejar un ratn
Tener ganas de aprender
Como podris ver, cualquier persona que sepa manejar un ordenador
tiene los conocimientos bsicos para aprender HTML. Si le pones un po-
co de ganas y sigues este manual hasta el final, tendrs las siguientes ha-
bilidades o conocimientos:
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.
4
Posiblemente una aficin que puede convertirse en pasin y termi-
nar, en algunos casos, siendo un vicio o un oficio.
Podis formular vuestras cuestiones y, esperamos que en un futuro
ayudar a otros compaeros, enviandodiscusiones sobre HTML o bien en
la lista de correo de DesarrolloWeb.com.
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 re-
ferencia 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.
Pasemos pues sin ms prembulos a ver de qu se trata el HTML
5
Parte 2
Introduccin al HTML
6
Las primeras cosas que debes saber sobre HTML: historia, ob-
jetivos y dems conocimientos donde sentar las bases del
manual.
HTML es el lenguaje con el que se escriben las pginas web. Las pgi-
nas web pueden ser vistas por el usuario mediante un tipo de aplicacin
llamada navegador. Podemos decir por lo tanto que el HTML es el leng-
uaje usado por los navegadores para mostrar las pginas webs al usuar-
io, siendo hoy en da la interface ms extendida en la red.
Este lenguaje nos permite aglutinar textos, sonidos e imgenes y com-
binarlos a nuestro gusto. Adems, y es aqu donde reside su ventaja con
respecto a libros o revistas, el HTML nos permite la introduccin de refe-
rencias a otras pginas por medio de los enlaces hipertexto.
El HTML se cre en un principio con objetivos divulgativos. No se
pens que la web llegara a ser un rea de ocio con carcter multimedia,
de modo que, el HTML se cre 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, estos son los estn-
dares del HTML. Numerosos estndares se han presentado ya. El HTML
4.01 es el ltimo estndar a septiembre de 2001.
Esta evolucin tan anrquica del HTML ha supuesto toda una seria de
inconvenientes y deficiencias que han debido ser superados con la intro-
duccin de otras tecnologas accesorias capaces de organizar, optimizar y
automatizar el funcionamiento de las webs. Ejemplos que pueden sona-
ros son las CSS, JavaScript u otros. Veremos ms adelante en qu consis-
ten algunas de ellas.
Otros de los problems que han acompaado al HTML es la diversi-
dad de navegadores presentes en el mercado los cuales no son capaces
de interpretar un mismo cdigo de una manera unificada. Esto obliga al
webmster a, una vez creada su pgina, comprobar que esta puede ser
leda satisfactoriamente por todos los navegadores, o al menos, los ms
utilizados.
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. Es
por ello que para programar en HTML necesitamos un editor de textos.
Es recomendable usar el Bloc de notas que viene con windows, u otro
editor de textos sencillo. Hay que tener cuidado con algunos editores
ms complejos como Wordpad o Microsoft Word, pues colocan su
7
propio cdigo especial al guardar las pginas y HTML es nicamente
texto plano, con lo que podremos tener problemas.
Existen otro tipo de editores especficos para la creacin de pginas
web los cuales ofrecen muchas facilidades que nos permiten aumentar
nuestra productividad. No obstante, es aconsejable en un principio utili-
zar una herramienta lo ms sencilla posible para poder prestar la mxi-
ma atencin a nuestro cdigo y familiarizarnos lo antes posible con l.
Siempre tendremos tiempo ms delante de pasarnos a editores ms ver-
stiles con la consiguiente ganancia de tiempo.
Para tener ms claro todo el tema de editores y los tipos que existen,
visita los artculos:
Editores de HTML.
Bloc de notas.
Tambin puedes acceder a descripciones editores ms complejos
que el Block de Notas, pero ms potentes co-
mo Homesite o UltraEdit.
Es importante tener claro todo ello puesto que en funcin de vuestros
objetivos puede que, ms que aprender HTML, resulte ms interesante
aprender el uso de una aplicacin para la creacin de pginas.
As pues, 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 traba-
jos 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 ve-
ces con .htm y otras con .html. Si trabajas con un equipo en un proyecto
todava ms importante que os pongis todos de acuerdo en la extensin.
8
Parte 3
Sintaxis del HTML
9
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 marcas que basa su sintaxis en un elemento
de base al que llamamos etiqueta. A travs de las etiquetas vamos defin-
iendo 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 forma con la que se tendr que pre-
sentar el texto y otros elementos en la pgina.
La etiqueta presenta frecuentemente dos partes:
Una apertura de forma general <etiqueta>
Un cierre de tipo </etiqueta>
Todo lo incluido en el interior de esa etiqueta sufrir las modificacio-
nes que caracterizan a esta etiqueta. As por ejemplo:
Las etiquetas y definen un texto en negrita. Si en nuestro do-
cumento HTML escribimos una frase con el siguiente cdigo:
Esto esta en negrita
El resultado Ser:
Esto esta en negrita
Las etiquetas y definen un prrafo. Si en nuestro documento
HTML escribiramos:
Hola, estamos en el prrafo 1
Ahora hemos cambiado de prrafo
El resultado sera:
Hola, estamos en el prrafo 1
Ahora hemos cambiado de prrafo
Partes de un documento HTML
Adems de todo esto, un documento HTML ha de estar delimitado
por la etiqueta <html> y </html>. Dentro de este documento, podemos
asimismo distinguir dos partes principales:
El encabezado, delimitado por <head> y </head> donde colocaremos
etiquetas de ndole informativo como por ejemplo el titulo de nuestra
pgina.
El cuerpo, flanqueado por las etiquetas <body> y </body>, que ser
donde colocaremos nuestro texto e imgenes delimitados a su vez por
otras etiquetas como las que hemos visto.
El resultado es un documento con la siguiente estructura:
<html>
10
<head>
Etiquetas y contenidos del encabezado
Datos que no aparecen en nuestra pgina pero que son importantes para
catalogarla: Titulo, palabras clave,
</head>
<body>
Etiquetas y contenidos del cuerpo
Parte del documento que ser mostrada por el navegador: Texto e imge-
nes
</body>
</html>
Las maysculas o minsculas son indiferentes al escribir etiquetas
A notar que las etiquetas pueden ser escritas con cualquier tipo de
combinacin de maysculas y minsculas. <html>, <HTML> o <HtMl>
son la misma etiqueta. 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 coger buenas costumbres desde el principio para evitar fallos
triviales en un futuro.
11
Parte 4
Tu primera pgina
12
Vamos a ver cmo se hace una pgina muy sencilla en HTML,
que sirva de prctica a los debutantes.
Podemos ya con estos conocimientos, y alguno que otro ms, crear nues-
tra primera pgina. Para ello, abre tu editor de textos y copia y pega el si-
guiente texto en un nuevo documento.
<html>
<head>
<title>Cocina Para Todos</title>
</head>
<body>
Bienvenido,
Ests en la pgina Comida para Todos.
Aqu aprenders recetas fciles y deliciosas.
</body>
</html>
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 b-
sicas para ahorrarte disgustos y lios.
Nuestro consejo es que no utilices acentos ni espacios ni otros caracte-
res 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 hin-
capi en el hecho de que no todos los navegadores son idnticos. Desgra-
ciadamente, los resultados de nuestro cdigo pueden cambiar de uno a
otro por lo que resulta aconsejable visualizar la pgina en varios. Gene-
ralmente se usan Internet Explorer y Firefox como referencias ya que son
los ms extendidos.
A decir verdad, en el momento que estas lneas son escritas, Internet
Explorer acapara la inmensa mayora de usuarios (90% ms o menos) y
Firefox esta relegado a un segundo plano. Esto no quiere decir que lo
13
debemos dejar totalmente de lado ya que el 10% de visitas que puede
proporcionarnos puede resultar muy importante para nosotros.
Nota: En la disputa por ser el navegador ms usado, en la actualidad
otros productos vienen tomando fuerza como Chrome, el navegador de
Google. Para el que le interese este tema y conocer datos reales sobre los
porcentajes de uso de cada navegador, se puede leer uno de los informes
que publicamos peridicamente, como el ranking de uso de los navega-
dores en noviembre de 2010.
Pues bien, volviendo al tema, una vez creado el archivo .html o .htm,
podemos visualizar el resultado de nuestra labor abriendo dicha pgina
con un navegador. Para hacerlo, la forma resulta diferente dependiendo
del navegador:
Si estamos empleando el Explorer, hemos de ir al barra de men, ele-
gir Archivo y seleccionar Abrir. Una ventana se abrir. Pulsamos sobre el
botn Examinar y accederemos a una ventana a partir de la cual podre-
mos movernos por el interior de nuestro disco duro hasta dar con el ar-
chivo que deseamos abrir.
La cosa no resulta ms difcil para Netscape. En este caso, nos dirigi-
mos tambin a la barra de men principal y elegimos File y a continua-
cin Open File. La misma ventana de bsqueda nos permitir escudriar
el contenido de nuestro PC hasta dar con el archivo buscado.
Nota: Tambin puedes abrir el archivo si accedes al directorio donde lo
guardaste. En l podrs encontrar tu archivo HTML y vers que tiene co-
mo icono el logotipo de Netscape o el de Internet Explorer. Para abrirlo
simplemente hacemos un doble click sobre l.
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. Po-
dris 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 co-
mo Altavista o Yahoo.
Por otro lado, los elementos que colocamos entre la etiqueta <body> y
</body> se pueden ver en el espacio reservado para el cuerpo de la
pgina.
Se puede ver la pgina del ejemplo en funcionamiento aqu.
14
Si ahora hacis click con el botn derecho sobre la pgina y elegs Ver
cdigo fuente (o View page source) veris como en una ventana accesor-
ia aparece el cdigo de nuestra pgina. Este recurso es de extremada im-
portancia 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.
Posible problema: Al utilizar el Block de Notas en Windows en ocasio-
nes, aunque le digamos que es un archivo .html, el documento se guarda
como si fuera un texto y no una pgina web. Lo que est pasando es que
el Block de Notas tiene predeterminado guardar sus archivos con exten-
sin .txt y en realidad lo que est guardando en el disco duro es
mi_pagina.html.txt
Para conseguir tener el control de las extensiones en el block de notas
y en Windows en general podemos acceder a MI-PC y en el men de Ver
seleccionis "Opciones de carpeta". En la ventana que sale pulsamos en
la solapa "Ver" y nos permite deseleccionar una caja de seleccin que po-
ne algo como "Ocultar extensiones para los tipos de archivos conocidos".
(As se hace en Win98, puede variar un poco en otras versiones de
Windows.)
Con ello conseguiremos que se vea siempre la extensin del archivo
con el que estamos trabajando y que el Block de Notas nos haga caso
cuando le indicamos que grabe el archivo con otra extensin que no sea
.txt
15
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.
16
Parte 5
Formato de prrafos en HTML
17
Cmo colocar prrafos y saltos de lnea en pginas web. Tam-
bin vemos los encabezados como prrafos que sirven de
titulo.
En los captulos anteriores hemos presentado a titulo de ejemplo algunas
etiquetas que permiten dar formato a nuestro texto. En este capitulo ve-
remos con ms detalle las ms ampliamente utilizadas y ejemplificare-
mos algunas de ellas posteriormente.
Formatear un texto pasa por tareas tan evidentes como definir los p-
rrafos, justificarlos, introducir vietas, numeraciones o bien poner en ne-
grita, itlica
Hemos visto que para definir los prrafos nos servimos de la etiqueta
 que introduce un salto y deja una lnea en blanco antes de continuar
con el resto del documento.
Podemos tambin usar la etiqueta , de la cual no existe su cierre
correspondiente (), 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, las veremos ms adelante. Esto ocurre
porque un salto de lnea o una imagen no empiezan y acaban ms ade-
lante 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 intro-
ducir 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 pueden ser fcilmente jus-
tificados 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 per-
sonal. Veremos a lo largo de este manual cantidad de atributos muy ti-
les para todo tipo de etiquetas.
As, si desesemos introducir un texto alineado a la izquier-
da escribiramos:
Texto alineado a la izquierda
El resultado seria:
Texto alineado a la izquierda
18
Para una justificacin al centro:
Texto alineado al centro
que dara:
Texto alineado al centro
Para justificar a la derecha:
Texto alineado a la derecha
cuyo efecto seria:
Texto alineado a la derecha
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. Pa-
ra 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 comi-
llas 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 . Otras etiquetas
muy comunes, que veremos ms adelante, entre las cuales se introducen
texto o imgenes, suelen hacer uso de este atributo de una forma
habitual.
Imaginemos un texto relativamente largo donde todos los prrafos es-
tn alineados a la izquierda (por ejemplo). Una forma de simplificar
nuestro cdigo y de evitar introducir continuamente el atributo align so-
bre cada una de nuestras etiquetas es utilizando la etiqueta <div>.
Esta etiqueta por si sola no sirve para nada. Tiene que estar acompaa-
da del atributo align y lo que nos permite es alinear cualquier elemento
(prrafo o imagen) de la manera que nosotros deseemos.
As, el cdigo:
Parrafo1
 Parrafo3
 Parrafo2
es equivalente a:
<div align="left">
Parrafo1
19
Parrafo2
Parrafo3
</div>
Como hemos visto, la etiqueta <div> marca divisiones en las que defi-
nimos un mismo tipo de alineado.
Ejemplo prctico:
Para practicar un poco lo que acabamos de ver vamos a proponer un
ejercicio que podis resolver en vuestros ordenadores. Simplemente que-
remos 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
No vamos a escribir en esta ocasin el cdigo fuente del ejercicio. Po-
demos verlo en funcionamiento en nuestro navegador y en la ventana
podemos obtener el cdigo fuente seleccionando en el men Ver la op-
cin Cdigo fuente.
Ver el ejercicio en marcha.
Encabezados
Existen otras etiquetas para definir prrafos especiales, formateados
como ttulos. Son los encabezados o Header en ingls. Como decimos,
son etiquetas que formatean el texto como un titular, para lo cual asignan
un tamao mayor de letra y colocan el texto en negrita.
Hay varios tipos de encabezados, que se diferencian en el tamao de la
letra que utilizan. La etiqueta en concreto es la <h1>, para los encabeza-
dos ms grandes, <h2> para los de segundo nivel y as hasta <h6> que es
el encabezado ms pequeo.
Los encabezados implican tambin una separacin en prrafos, as que
todo lo que escribamos dentro de <h1> y </h1> (o cualquier otro enca-
bezado) se colocar en un prrafo independiente.
Podemos ver cmo se presentan algunos encabezados a continuacin.
<h1>Encabezado de nivel 1</h1>
Se ver de esta manera en la pgina:
Encabezado de nivel 1
Los encabezados, como otras etiquetas de HTML, soportan el atributo
align. Vemos un ejemplo de encabezado de nivel 2 alineado al centro.
<h2 align="center">Encabezado de nivel 2</h2>
Se ver de esta manera en la pgina:
Encabezado de nivel 2
20
Otro ejercicio interesante es construir una pgina web que contenga to-
dos los encabezados posibles. Se puede ver a continuacin.
<html>
<head>
<title>Todos los encabezados</title>
</head>
<body>
</body>
</html>
Se puede ver el ejercicio en una pgina aparte.
Consejo: No debemos utilizar las etiquetas de encabezado para formate-
ar el texto, es decir, si queremos colocar un tipo de letra ms grande y en
negrita debemos utilizar las etiquetas que existen para ello (que veremos
en seguida). Los encabezados son para colocar titulares en pginas web y
es el navegador el responsable de formatear el texto de manera que pa-
rezca un titular. Cada navegador, pues, puede formatear el texto a su
gusto con tal de que parezca un titular.
21
Parte 6
New Part
22
Vemos como colocar negritas, itlicas, subrayados, subndices y
suprendices.
Por Rubn Alvarez
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, itli-
ca 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.
Negrita
Podemos escribir texto en negrita incluyndolo dentro de las etiquetas
 y (bold). Esta misma tarea es desempeada por y
 siendo ambas equivalentes. Nosotros nos inclinamos por la
primeras por simple razon de esfuerzo.
Escribiendo un cdigo de este tipo:
Texto en negrita
Obtenemos este resultado:
Texto en negrita
Nota: Qu diferencia hay entre y ?
Aunque las dos etiquetas hacen el mismo efecto, tienen una peculiari-
dad que las hace distintas. La etiqueta indica negrita, mientras que
la etiqueta indica que se debe escribir resaltado. El HTML lo in-
terpretan 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 responsa-
ble de formatear el texto de manera que parezca un encabezado de pri-
mer nivel. En la prctica los encabezados de Internet Explorer y Netsca-
pe 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 y se podr entender ahora. Mientras
que significa simplemente negrita y todos los navegadores la inter-
pretarn como negrita, es una etiqueta que significa que se tie-
ne que resaltar fuertemente el texto y cada navegador es el responsable
de resaltarlo como desee. En la prctica coloca el texto en negri-
ta, pero podra ser que un navegador decidiese resaltar colocando negri-
lla, subrayado y color rojo en el texto.
Itlica
23
Tambin en este caso existen dos posibilidades, una corta: e 
(italic) y otra un poco ms larga: y . 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:
Texto en itlica
Que da el siguiente efecto:
Texto en itlica
Subrayado
El HTML nos propone tambin para el subrayado el par de etiquetas:
 y (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 con-
fundir al lector y apartarlo del verdadero inters de nuestro texto.
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 13CC3H4ClNOS es un
heterociclo alergeno enriquecido
El resultado:
La
13
CC
3
H
4
ClNOS es un heterociclo alergeno enriquecido
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:
Esto slo est en negrita y esto en negrita e itlica
Esto nos daria:
Esto slo est en negrita y esto en negrita e itlica
Consejo: Cuando anides etiquetas HTML hazlo correctamente. Nos refe-
rimos a que si abres etiquetas dentro de otra ms principal, antes de ce-
rrar la etiqueta principal cierres las etiquetas que hayas abierto dentro de
ella.
Debemos evitar cdigos como el siguiente:
Esto est en negrita e itlica
24
En favor de cdigos con etiquetas correctamente anidadas:
Esto est en negrita e itlica
Esto es muy aconsejable, aunque los navegadores entiendan bien las eti-
quetas 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 re-
solver este tipo de errores, incluso ms que construir la propia p-
gina 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.
25
Parte 7
Color, tamao y tipo de letra
26
Seguimos aprendiendo etiquetas que nos sirven para formatear el texto.
Por Rubn Alvarez
A pesar de que por razones de homogeneidad y sencillez de codigo es-
te tipo de formatos son controlados actualmente por hojas de estilo en
cascada (de las cuales ya tendremos tiempo de hablar), existe una forma
clsica y directa de definir color tamao y tipo de letra de un texto
determinado.
Esto se hace a partir de la etiqueta y su cierre correspondiente.
Dentro de esta etiqueta deberemos especificar los atributos correspond-
ientes a cada uno de estos parmetros que deseamos definir. A continua-
cin os comentamos los atributos principales de esta etiqueta:
Atributo face
Define el tipo de letra. Este atributo es interpretado por versiones de
Netscape a partir de la 3 y de MSIE 3 o superiores. Otros navegadores las
ignoran completamente y muestran el texto con la fuente que utilizan.
Hay que tener cuidado con este atributo ya que cada usuario, depend-
iendo de la plataforma que utilice, puede no disponer de los mismos ti-
pos de letra que nosotros con lo que, si nosotros elegimos un tipo del que
no dispone, el navegador se ver forzado a mostrar el texto con la fuente
que utiliza por defecto (suele ser Times New Roman). Para evitar esto,
dentro del atributo suelen seleccionarse varios tipos de letra separados
por comas. En este caso el navegador comprobar que dispone del pri-
mer tipo enumerado y si no es as, pasar al segundo y as sucesivamente
hasta encontrar un tipo que posea o bien acabar la lista y poner la fuente
por defecto. Veamos un ejemplo.
Este texto tiene otra tipo-
grafa
Que se visualizara as en una pgina web.
Este texto tiene otra tipografa
Nota: Aqu tenemos un ejemplo de atributo cuyo valor debe estar limita-
do por comillas ("). Habamos dicho que las comillas eran opcionales en
los atributos, sin embargo esto no es as siempre. Si el valor del atributo
contiene espacios, como es el caso de:
face="Comic Sans MS,arial,verdana"
debemos colocar las comillas para limitarlo. En caso de no tener comillas
face=Comic Sans MS,arial,verdana
27
se entendera que face=Comic, pero no se tendra en cuenta todo lo que
sigue, porque HTML no lo asociara al valor del atributo. En este caso
HTML pensara que las siguientes palabras (despus del espacio) son
otros atributos, pero como no los conoce como atributos simplemente los
desestimar.
Atributo size
Define el tamao de la letra. Este tamao puede ser absoluto o relativo.
Si hablamos en trminos absolutos, existen 7 niveles de tamao distin-
tos numerados de 1 a 7 por orden creciente. Elegiremos por tanto un va-
lor size="1" para la letra ms pequea o size="7" para la ms grande.
Este texto es ms grande
Este texto es ms grande
Podemos asimismo modificar el tamao de nuestra letra con respecto
al del texto mostrado precedentemente definiendo el nmero de niveles
que queremos subir o bajar en esta escala de tamaos por medio de un
signo + o -. De este modo, si definimos nuestro atributo como size="+1"
lo que queremos decir es que aumentamos de un nivel el tamao de la
letra. Si estabamos escribiendo previamente en 3, pasaremos automtica-
mente a 4.
Los tamaos reales que veremos en pantalla dependern de la definicin
y del tamao de fuente elegido por el usuario en el navegador. Este ta-
mao de fuente puede ser definido en el Explorer yendo al menu super-
ior, Ver/Tamao de la fuente. En Netscape elegiremos View/Text Size.
Esta flexibilidad puede en ms de una ocasin resultarnos embarazosa
ya que en muchos casos desearemos que el tamao del texto permanezca
constante para que ste quepa en un determinado espacio. Veremos en
su momento que esta prefijacin del tamao puede ser llevada a cabo
por las hojas de estilo en cascada.
Atributo color
El color del texto puede ser definido mediante el atributo color. Cada
color es a su vez definido por un nmero hexadecimal que esta comp-
uesto a su vez de tres partes. Cada una de estas partes representa la con-
tribucin del rojo, verde y azul al color en cuestin.
Podis entender cmo funciona esta numeracin y cules son los colo-
res que resultan ms compatibles a partir de este artculo: Los colores y
HTML.
28
Por otra parte, es posible definir de una manera inmediata algunos de
los colores ms frecuentemente usados para los que se ha creado un
nombre ms memotcnico:
NombreColor
Aqua
Black
Blue
Fuchsia
Gray
Green
Lime
Maroon
Navy
Olive
Purple
Red
Silver
Teal
White
Yellow
Este texto est en rojo
Este texto est en rojo
Con todo esto estamos ya en disposicion de crear un texto formateado
de una forma realmente elaborada.
Pongamos pues en practica todo lo que hemos aprendido en estos ca-
pitulos haciendo un ejercicio consistente en una pgina que tenga las sig-
uientes caractersticas:
Un titular con encabezado de nivel 1, en itlica y color verde oliva.
Un segundo titular con encabezado de nivel 2, tambin de color
verde oliva.
Todo el texto de la pgina deber presentarse con una fuente dis-
tinta de la fuente por defecto. Por ejemplo "Comic Sans MS" y en
caso de que sta no est en el sistema que se coloque la fuente
"Arial".
Se puede ver una posible solucin del ejercicio en este enlace. (Ver el
cdigo fuente de la pgina para ver cmo lo hemos resuelto)
29
Parte 8
Los colores y HTML
30
DesarrolloWeb.com> Manuales > Manual de HTML
Los colores y HTML
01 de enero de 2001
Compartir en redes sociales
Valoracin del artculo:
3 votos
Enviar un comentario
Ver comentarios del artculo (14)
En este reportaje tratamos de acercarte todos los detalles relativos al
buen uso de colores en HTML. Colores compatibles con todos los
sistemas.
Por Miguel Angel Alvarez
Tabla de color
El la composicin de webs juegan un papel muy importante los colo-
res. Se indican en valores RGB, es decir, que para conseguir un color
cualquiera mezclaremos cantidades de Rojo, Verde y Azul.
Los valores RBG se indican en numeracin hexadecimal, en base 16.
(Los dgito pueden crecer hasta 16. Como no hay tantos dgitos numri-
cos se utilizan las letras de la A a la F.
0=0 4=4 8=8 C=12
1=1 5=5 9=9 D=13
2=2 6=6 A=10 E=14
3=3 7=7 B=11 F=15
Para conseguir un color, mezclaremos valores de esta manera:
RRGGBB
Donde cada valor puede crecer desde 00 hasta FF.
Ejemplo
Cmo se cambiara la fuente para escribir en rojo:
Rojo
Al Atributo color le damos un valor RGB en formato hexadecimal. El ca-
racter # se coloca al principio de la cadena.
Otros colores
Naranja #FF8000
Verde turquesa#339966
Azul oscuro #000080
Colores compatibles en todos los sistemas
31
Como las pginas web las tienen que ver todos los usuarios, y los siste-
mas que utilizan para entrar son distintos, hay que utilizar colores com-
patibles con la paleta de todos ellos.
La forma de conseguir esto es limitando nuestros colores alos que se
pueden conseguir utilizando la siguiente norma:
Utilizaremos siempre
estos valores:
00
33
66
99
CC
FF
Ejemplos: #3366FF #FF9900 #666666
Se consiguen los colores siguientes:
Por ltimo, te ofrecemos unos archivos con programillas en JavaScript
que te pueden ayudar a encontrar los colores adecuados. Entro otros, po-
drs encontrar el script que genera la tabla de arriba.
32
Parte 9
Atributos para pginas
33
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.
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 texto o de los enlaces. Estos
atributos se definen en la etiqueta <body> y, como decamos son genera-
les 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 constr-
uir 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 fon-
do 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 y suponemos que se encuentra en el mis-
mo directorio que la pgina. En este caso se colocara la siguiente etique-
ta <body>
<body background="fondo.jpg">
Se puede ver el efecto de colocar ese fondo en una pgina a parte.
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 pgi-
na debemos colocarlo en un color que contraste suficientemente con di-
cho fondo. Si el visitante no puede ver el fondo por cualquier cuestin
(Por ejemplo tener deshabilitada la carga de imgenes) puede que el tex-
to 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 os-
cura, tendremos que poner un texto claro para que se pueda leer. Si el
34
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 haya-
mos 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 dife-
renciarse 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 visita-
do. 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 pre-
ciso instante que se pulsa. A veces es difcil darse cuenta cuando un enla-
ce est activo porque en el momento en el que se activa es porque lo esta-
mos pulsando y en ese caso el navegador abandonar la pgina rpida-
mente y no podremos ver el enlace activo ms que por unos instantes
mnimos.
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 se puede ver en una pgina a parte.
Mrgenes
35
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 atri-
butos son distintos para Internet Explorer y para Netscape Navigator,
por lo que debemos utilizarlos todos si queremos que todos los navega-
dores los interpreten perfectamente.
leftmargin: para indicar el margen a los lados de la pgina. Vlido pa-
ra iexplorer.
topmargin: para indicar el margen arriba y debajo de la pgina. Para
iexplorer.
marginwidth: la contrapartida de leftmargin para Netscape. (Margen
a los lados)
marginheight: igual que topmargin, pero para Netscape. (Margen arri-
ba 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 Desarro-
lloWeb.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 bg-
color="ffffff">
<table width=100% bgcolor=ff6666><tr><td>
<h1>Hola amigos</h1>
 
 
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. Puede verse el ejemplo en una
pgina a parte.
Todo lo que hemos visto hasta ahora en el Manual de HTML lo pode-
mos encontrar en vdeo y en concreto las explicaciones de los ltimos ar-
tculos se han recogido en el Vdeotutorial de HTML - Fuentes, colores y
estilos de BODY.
36
Parte 10
Caracteres especiales
37
Una referencia til, y una lista completa de los caracteres especiales del
HTML.
Una pgina web se ha de ver en paises 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.
Este conjunto son los caracteres especiales. Cuando queremos poner uno
de estos caracteres en una pgina, debemos sustituirlo por su cdigo.
Por ejemplo, la "" (a minscula acentuada) se escribe "á" de
modo que la palabra pgina se escribira en una pgina HTML de este
modo: página
Caracteres especiales bsicos
En realidad estos caracteres se usan en HTML para no confundir un
principio o final de etiqueta, unas comillas o un & con su correspondien-
te caracter.
< < > >
& &" "
Caracteres especiales del HTML 2.0
Á À
É È
Í Ì
Ó Ò
Ú Ù
á à
é è
í ì
ó ò
ú ù
Ä Â
Ë Ê
Ï Î
Ö Ô
Ü Û
ä â
ë ê
38
ï î
ö ô
ü û
Ã å
Ñ Å
Õ Ç
ã ç
ñ Ý
õ ý
Ø ÿ
ø Þ
Ð þ
ð Æ
ß æ
Caracteres especiales del HTML 3.2
¼
½ ¡
¾ £
© ¥
® §
ª ¤
² ¦
³ «
¹ ¬
¯
µ º
¶ ´
· ¨
° ±
¸ »
¿
Otros caracteres especiales
× ¢
÷ €
39

Para descargar la lista de caracteres especiales: caracteresespecia-
les.zip 2Kb
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.
40
Listas en HTML
A continuacin comenzaremos a explicar las listas de HTML que im-
plican varias etiquetas para crear su estructura. Veremos varios tipos de
listas que se pueden utilizar para diversos objetivos.
41
Parte 11
Listas I - Listas desordenadas
42
Vemos lo que son las listas y sealamos los tres tipos que hay. Estudia-
mos las listas desordenadas.
Por Rubn Alvarez
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 sir-
ven para enumerar y definir elementos, los textos preformateados y las
cabeceras o ttulos.
Las listas originalmente estn pensadas para citar, numerar y definir co-
sas 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 inte-
resante para poder maquetar elementos diversos, como barras de nave-
gacin, pestaas etc. Pero esto lo veremos ms adelante, cuando aplique-
mos 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 necesida-
des 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
Son delimitadas por las etiquetas <ul> y </ul> (unordered list). Cada
uno de los elementos de la lista es citado por medio de una etiqueta <li>
(sin cierre, aunque no hay inconveniente en colocarlo). La cosa queda as:
Pases del mundo
<ul>
<li>Argentina
<li>Per
<li>Chile
</ul>
El resultado:
43
Pases del mundo
Argentina
Per
Chile
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.
Vamos a ver un ejemplo de lista con un cuadrado en lugar de un re-
dondel, y en el ltimo 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
Elemento 1
Elemento 2
Elemento 3
Elemento 4
44
Parte 12
New Part
45
Estudiamos otro tipo de listas: las listas ordenadas.
Por Rubn Alvarez
Estamos en el Manual de HTML y continuamos estudiando las listas de
HTML, con las que crear estructuras atractivas para presentar la infor-
macin. En el captulo anterior vimos las listas desordenadas y ahora es-
tudiaremos las listas ordenadas.
Listas ordenadas
Las listas ordenadas sirven tambin para presentar informacin, en di-
versos elementos o items, con la particularidad que stos estarn prede-
cidos 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:
Reglas de comportamiento en el trabajo
<ol>
<li>El jefe siempre tiene la razn
<li>En caso de duda aplicar regla 1
</ol>
El resultado es:
Reglas de comportamiento en el trabajo
1. El jefe siempre tiene la razn
2. En caso de duda aplicar regla 1
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 roma-
nos en sus versiones maysculas (I, II, III, ) y minsculas (i, ii, iii, ).
Para realizar dicha seleccin hemos de utilizar, como para el caso prece-
dente, el atributo type, el cual ser situado dentro de la etiqueta <ol>.
Los valores que puede tomar el atributo en este caso son:
1 Para ordenar por nmeros
a Por letras del alfabeto
A Por letras maysculas del alfabeto
i Ordenacin por nmeros romanos en minsculas
I Ordenacin por nmeros romanos en maysculas
Nota: Recordamos que en algunos navegadores no funciona la opcin de
cambiar el tipo de vieta a mostrar
46
Puede que en algn caso deseemos comenzar nuestra enumeracin
por un nmero o letra que no tiene por qu ser necesariamente el prime-
ro 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 navega-
dor se encarga de hacer la traduccin del nmero a la letra
correspondiente.
Os proponemos un ejemplo usando este tipo de atributos:
Ordenamos por numeros
<ol type="1">
<li>Elemento 1
<li> Elemento 2
</ol>
Ordenamos por letras
<ol type="a">
<li>Elemento a
<li> Elemento b
</ol>
Ordenamos por nmeros romanos empezando por el 10
<ol type="i" start="10">
<li>Elemento x
<li> Elemento xi
</ol>
El resultado:
Ordenamos por nmeros
1. Elemento 1
2. Elemento 2
Ordenamos por letras
1. Elemento a
2. Elemento b
Ordenamos por numeros romanos empezando por el 10
1. Elemento x
2. Elemento xi
47
Parte 13
Listas III - Listas de definicin
48
Vemos las listas de definicin y aprendemos a anidar listas para crear es-
tructuras lista ms complejas.
Por Rubn Alvarez
Terminamos el tema de listas en el manual de HTML de Desarro-
lloWeb.com estudiando las listas de definicin. Veremos tambin la ani-
dacin de listas, que resultar un recurso interesante para estructurar da-
tos 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 elemen-
to es presentado junto con su definicin, uno detrs de otro.
Para realizar una lista de definicin, ja etiqueta principal es <dl> y
</dl> (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:
Diccionario de la Real Academia
<dl>
<dt>Brujula
<dd>Serula montada en una escbula
<dt>Oreja
<dd>Sesenta minutejos
</dl>
El efecto producido:
Diccionario de la Real Academia
Brujula
Serula montada en una escbula
Oreja
Sesenta minutejos
Fijaos en que cada lnea <dd> esta desplazada hacia la izquierda. Este ti-
po de etiquetas son 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>
49
<dd>Tercer nivel de desplazamiento
</dl>
</dl>
</dl>
El resultado:
Primer nivel de desplazamiento
Segundo nivel de desplazamiento
Tercer nivel de desplazamiento
Anidando listas
Nada nos impide utilizar todas estas etiquetas de forma anidada como
hemos visto en otros casos. De esta forma, podemos conseguir listas mix-
tas como por ejemplo:
Ciudades del mundo
<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:
Ciudades del mundo
Argentina
1. Buenos Aires
2. Bariloche
Uruguay
1. Montevideo
2. Punta del Este
Referencia: Con esto hemos acabado el tema sobre Listas HTML, sin em-
bargo, podemos completar las explicaciones en el Videotutorial de
HTML, en el Vdeo sobre las Listas HTML.
50
Todo sobre los enlaces en HTML
Los enlaces son los elementos que nos permiten navegar por las pgi-
nas 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.
51
Parte 14
Enlaces en HTML
52
Vemos qu son los enlaces en HTML y los distintos tipos.
Por Rubn Alvarez
Hasta aqu, hemos podido ver que una pgina web es un archivo HTML
en el que podemos incluir, entre otras cosas, textos formateados a nues-
tro gusto e imgenes (las veremos 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 nave-
gante 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 HTLMradica en la posible puesta en relacin de los
contenidos de los archivos introduciendo referencias bajo forma de enla-
ces 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 acce-
der y desde las que la gente no puede saltar a otras.
Un enlace puede ser fcilmente detectado 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 ten-
ga dificultad en reconocerlos. Si no especificamos lo contrario (ya tendre-
mos ocasin de explicar como), estos enlaces texto estarn subrayados y
coloreados en azul. En el caso de las imgenes que sirvan de enlace, vere-
mos que estn delimitadas por un marco azul por defecto.
Para colocar un enlace, nos serviremos de las etiquetas <a> y </a>.
Dentro de la etiqueta de apertura deberemos especificar asimismo el des-
tino 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 correo electrnico o un
archivo.
En funcin del destino los enlaces son clsicamente agrupados del sig-
uiente modo:
Enlaces internos: los que se dirigen a otras partes dentro de la
misma pgina.
53
Enlaces locales: los que se dirigen a otras pginas del mismo sitio
web.
Enlaces remotos: los dirigidos hacia pginas de otros sitios web.
Enlaces con direcciones de correo: para crear un mensaje de co-
rreo dirigido a una direccin.
Enlaces con archivos: para que los usuarios puedan hacer down-
load de ficheros.
Referencia: Para complementar las explicaciones sobre los enlaces
HTML recomendamos ver el videotutorial sobre enlaces.
54
Parte 15
Enlaces internos
55
Los enlaces HTML que se hacen con otras partes de la misma pgina.
Por Rubn Alvarez
Son los enlaces que apuntan a un lugar diferente dentro de la misma
pgina. Este tipo de enlaces son esencialmente utilizados en pginas
donde el acceso a los contenidos puede verse dificultado debido al gran
tamao de la misma. Mediante estos enlaces podemos ofrecer al visitante
la posibilidad de acceder rpidamente al principio o final de la pgina o
bien a diferentes prrafos o secciones.
Para crear un enlace de este tipo es necesario, aparte del enlace de ori-
gen propiamente dicho, un segundo enlace que ser colocado en el desti-
no. Veamos ms claramente como funcionan estos enlaces con un ejem-
plo sencillo:
Enlace con final de este documento, para que probis su funcionamiento:
Ir abajo
Supongamos que queremos crear un enlace que apunte al final de la
pgina. Lo primero ser colocar nuestro enlace origen. Lo pondremos
aqu mismo y lo escribiremos del siguiente modo:
<a href="#abajo">Ir abajo</a>
Como podis ver, el contenido del enlace es el texto "Ir abajo" y el des-
tino, abajo, es un punto de la misma pgina que todava no hemos defi-
nido. Ojo al smbolo #; es l quien especifica al navegador que el enlace
apunta a una seccin en particular.
En segundo lugar, hay que generar un enlace en el destino. Este enlace
llevara por nombre abajo para poder distinguirlo de los otros posibles
enlaces realizados dentro de la misma pgina. En este caso, la etiqueta
que escribiremos ser sta:
<a name="abajo"></a>
A decir verdad, estos enlaces, aunque tiles, no son los ms extendi-
dos 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 peque-
o 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.
56
Parte 16
Enlaces locales
57
Enlaces HTML con otras pginas del mismo sitio web.
Por Rubn Alvarez
Como hemos dicho, un sitio web esta constituido de pginas intercone-
xas. En el capitulo anterior hemos visto como enlazar distintas secciones
dentro de una misma pgina. Nos queda pues estudiar la manera de re-
lacionar los distintos documentos HTML que componen nuestro sitio
web.
Para crear este tipo de enlaces, hemos de crear una etiqueta de la siguien-
te forma:
<a href="archivo.html">contenido</a>
Por regla general, para una mejor organizacin, los sitios suelen estar
ordenados por directorios. Estos directorios suelen contener diferentes
secciones de la pgina, imgenes, sonidos Es por ello que en muchos
casos no nos valdr con especificar el nombre del archivo, sino que ten-
dremos que especificar adems el directorio en el que nuestro archi-
vo.html esta alojado.
Si habis trabajado con MS-DOS no tendris ningn problema para
comprender el modo de funcionamiento. Tan solo hay que tener cuidado
en usar la barra "/" en lugar de la contrabarra "".
Para aquellos que no saben como mostrar un camino de un archivo,
aqu van una serie de indicaciones que os ayudaran a comprender la for-
ma de expresarlos. No resulta difcil en absoluto y con un poco de practi-
ca lo haris prcticamente sin pensar.
1. Hay que situarse mentalmente en el directorio en el que se enc-
uentra la pgina con el enlace.
2. Si la pgina destino esta en un directorio incluido dentro del direc-
torio en el que nos encontramos, hemos de marcar el camino enu-
merando cada uno de los directorios por los que pasamos hasta
llegar al archivo y separndolos por el smbolo barra "/". Al final
obviamente, escribimos el archivo.
3. Si la pgina destino se encuentra en un directorio que incluye el de
la pgina con el 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.
4. Si la pgina se encuentra en otro directorio no incluido ni inclu-
yente del archivo origen, tendremos que subir como en la regla 3
por medio de ".." hasta encontrar un directorio que englobe el di-
rectorio 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.
58
Ejemplo:
Para clarificar este punto podemos hacer un ejemplo a partir de la estruc-
tura de directorios de la imagen.
Para hacer un enlace desde index.html hacia yyy.html:
<a href="seccion1/paginas/yyy.html">contenido</a>
Para hacer un enlace desde xxx.html hacia yyy.html:
<a href="../seccion1/paginas/yyy.html">contenido</a>
Para hacer un enlace desde yyy.html hacia xxx.html:
<a href="../../seccion2/xxx.html">contenido</a>
Los enlaces locales pueden a su vez apuntar ya no a la pgina en gene-
ral sino ms precisamente a una seccin concreta. Este tipo de enlaces re-
sultan 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 sec-
cin con otro enlace del tipo:
<a name="seccion"></a>
Como ejemplo, he aqu un enlace que apunta al capitulo anterior al fi-
nal de la pgina.
59
Parte 17
Enlaces externos, de correo y hacia
archivos
60
Vemos tres tipos de enlaces. Los dirigidos a otras pginas de otros webs,
a direcciones de correo y a ficheros externos.
Para acabar con los enlaces vamos a ver los ltimos 3 tipos de enlaces
que habamos sealado.
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.
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 pa-
recido 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://. Esto indica que el protocolo por el que se accede es HTTP, el utili-
zado en la web. No debemos olvidarnos de colocarlas, porque si no 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 direcc-
iones 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 coloca-
mos mailto: en el atributo href del enlace, seguido de la direccin de co-
rreo a la que se debe dirigir el enlace.
<a
href="mail-
to:eugim@desarrolloweb.com">eugim@desarrolloweb.com</a>
Este enlace se puede ver en funcionamiento aqu: eu-
gim@desarrolloweb.com
Consejo: Cuando coloques enlaces a direcciones de correo procura indi-
car en el contenido del enlace (lo que hay entre <A> y </A>) la direccin
de correo a la que se debe escribir. Esto es porque si un usuario no tiene
61
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 interrogante, la palabra subject, un
signo igual (=) y el asunto en concreto.
<a href="malito:eugim@desarrolloweb.com?subject=contacto a travs
de la pagina">eugim@desarrolloweb.com</a>
Podemos colocar otros atributos del mensaje con una sintaxis parecida.
En este caso indicamos tambin que el correo debe ir con copia a colabo-
ra@desarrolloweb.com.
<a href="mailto:eugim@desarrolloweb.com?subject=contacto a travs
de la pagi-
na&cc=colabora@desarrolloweb.com">eugim@desarrolloweb.com</a>
Nota: El visitante de la pgina necesitar tener configurada una cuenta
de correo electrnico en su sistema para enviar los mensajes. Lgicamen-
te, 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.
Tenemos un artculo en desarrolloweb que habla sobre el 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 com-
plicacin 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 archi-
vo. Abrirlo o guardarlo en disco".
Podemos ver un ejemplo de enlace a archivo con su consiguiente ven-
tana de descarga de un archivo.
62
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 compri-
midos 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 res-
ponsable 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 mun-
do VRML pondr en marcha el plug-in que el usuario tenga instalado
para ver los mundos virtuales (Cosmo Player por ejemplo).
Este sera un ejemplo de enlace a un documento PDF.
<a href="mi_documento.pdf">Descarga el PDF</a>
63
Parte 18
Atributo nofollow en los enlaces
64
El atributo rel=nofollow, de los enlaces, sirve para que los buscadores no
continen reastreando a partir de esos enlaces.
Dejemos aqu una pequea resea sobre un atributo que se est convirt-
iendo en esencial en los enlaces y que no habamos comentado en nues-
tro manual de HTML, aunque s habamos visto algo en nuestro manual
de posicionamiento en buscadores.
Nofollow es un atributo de los links HTML (etiqueta <A>), que sirve pa-
ra definir o marcar el comportamiento de los buscadores cuando rastrean
nuestra pgina web en busca de contenidos para indexarlos. Por defecto,
cuando un buscador visita una pgina web va recorriendo todos sus en-
laces y va indexando su contenido en su base de datos de pginas. Esto
es algo que hacen automtica y peridicamente. Ocurre tanto con los en-
laces internos a otras pginas de nuestro sitio como con los enlaces exter-
nos a otras pginas web. Los motores que recorren las webs de enlace a
enlace, se llaman araas.
Ahora bien, nosotros podemos, a travs del atributo rel="nofollow",
decirle a un buscador que no contine indexando los contenidos de la
pgina a la que lleva un enlace en particular. Lo haramos as:
<a href="URL_DEL_ENLACE"
rel="nofollow">TEXTO_DEL_ENLACE</a>
Un poco de historia sobre nofollow
Para completar estas notas habra que comentar que el atributo fue crea-
do por iniciativa de Google y Blogger en 2005, como una idea para dete-
ner el spam de enlaces en sitios web que permiten a los usuarios la
participacin.
Una prctica comn de las personas que pretenden promocionar una
pgina web es realizar comentarios o participaciones en pginas web, en
las que insertan enlaces a sus propios sitios. Esto se conoce como spam
de enlaces, o con el trmino de spamdexing.
Con el atributo rel="nofolow" se pretenden mitigar los efectos de ese
tipo de spam en los sitios como foros, blogs, o cualquier pgina que per-
mita la interaccin con la comunidad de visitantes. Algunas pginas co-
mo la Wikipedia lo utilizan en todos los enlaces externos.
Actualmente el atributo ren=nofollow est bajo patente, aunque esta
est liberada de royalties, lo que quiere decir que se puede utilizar sin li-
mitacin y sin tener que pagar nada.
Cmo interpretan los buscadores el Nofollow
El atributo es tenido en cuenta no slo por el motor de indexacin
(araa) del buscador Google, sino tambin por otras araas de
65
buscadores tan importantes como Yahoo! o MSN. Aunque hay que decir
que cada buscador hace un uso particular del atributo.
Habra que aclarar que los buscadores a menudo siguen el enlace que
se ha marcado como nofollow, visitando aquella web que se haba enla-
zado. Lo que ocurre realmente es que no tienen en cuenta el link para
asignarle ranking o directamente no lo indexan.
Promocin de webs y nofollow
Sobra decir que este atributo resulta bastante potente a la hora de traba-
jar con la promocin de una pgina web, puesto que altera directamente
el comportamiento de los buscadores al rastrear las pginas, enlace a
enlace.
As pues, los SEO, promocionadores de pginas o personas que traba-
jan en el posicionamiento en buscadores, lo tienen muy en cuenta en sus
tcnicas para su trabajo del da a da. Existen diversas tcnicas que utili-
zan este atributo para realizar promocin de webs, como la que explica-
mos en el artculo Arriesgada pero excelente tcnica SEO usando rel=no-
follow, pero el uso ms importante es el que se ha comentado ya en este
artculo: ponerlo a los enlaces externos para no transferir ranking o posi-
cionamiento desde nuestra web a otras webs externas.
Otra tcnica relacionada con nofollow, pero ms segura, para que no
se indexe parte del contenido de nuestra pgina, es el uso del archivo ro-
bots.txt, que ya hemos comentado anteriormente en DesarrolloWeb.com.
66
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 opti-
mizar las imgenes para reducir el tiempo de carga de las webs.
67
Parte 19
Imgenes en HTML
68
Vemos cmo colocar una imagen en una pgina web y algunos atributos
bsicos para asignarle estilos a las imgenes en HTML.
Por Rubn Alvarez
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 so-
brecarga que se traduce en una distraccin para el navegante, quien ten-
dr 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 particularida-
des 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 obte-
ner desde diversas vas, como por ejemplo nuestra cmara digital, aunq-
ue 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).
La sintaxis queda entonces de la siguiente forma:
<img src="camino hacia el archivo">
Para expresar el camino, lo haremos de la misma forma que vimos pa-
ra 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.
69
Aparte de este atributo, indispensable obviamente para la visualiza-
cin 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 des-
cripcin de la imagen. Esta etiqueta no es indispensable pero presenta
varias utilidades.
Primeramente, durante el proceso de carga de la pgina, cuando la
imagen no ha sido todava cargada, el navegador mostrara esta descrip-
cin, con lo que el navegante se puede hacer una idea de lo que va en ese
lugar.
Esto no es tan trivial si tenemos en cuenta que algunos usuarios nave-
gan 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.
Adems, determinadas aplicaciones para discapacitados o telfonos
vocales que no muestran imgenes ofrecen la posibilidad de leerlas por
lo que nunca esta de ms pensar en estos colectivos.
En general podemos considerar como aconsejable el uso de este atribu-
to salvo para imgenes de poca importancia y absolutamente indispensa-
ble si la imagen en cuestin sirve de enlace.
Atributos height y width
Definen la altura y anchura respectivamente de la imagen en pxeles.
Todos los archivos grficos poseen unas dimensiones de ancho y alto.
Estas dimensiones pueden obtenerse a partir del propio diseador grafi-
co o bien haciendo clic con el botn derecho sobre la imagen vista por el
navegador para luego elegir propiedades sobre el men que se
despliega.
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.
As, si las dimensiones de las imgenes han sido proporcionadas, du-
rante el proceso de carga, el navegador reservara el espacio correspond-
iente 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
70
utilidad no es aconsejable dado que, si lo que pretendemos es aumentar
el tamao, la perdida de calidad de la imagen ser muy sensible. Inversa-
mente, si deseamos disminuir su tamao, estaremos usando un archivo
ms grande de lo necesario para la imagen que estamos mostrando con
lo que aumentamos el tiempo de descarga de nuestro documento
innecesariamente.
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 di-
mensiones de la mitad no se reduce a la mitad, sino que resulta ser apro-
ximadamente 4 veces inferior.
Atributo border
Definen el tamao en pxeles del cuadro que rodea la imagen.
De esta forma podemos recuadrar nuestra imagen si lo deseamos. Es
particularmente til cuando deseamos eliminar el borde que aparece
cuando la imagen sirve de enlace. En dicho caso tendremos que especifi-
car border="0".
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.
Atributo lowsrc
Con este atributo podemos indicar un archivo de la imagen de baja reso-
lucin. 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 visi-
tante pueda ver una muestra de la imagen mientras se descarga la ima-
gen real.
Truco: Utilizar imagenes como enlaces
Ni que decir tiene que una imagen, lo mismo que un texto, puede ser-
vir de enlace. Vista la estructura de los enlaces podemos muy fcilmente
adivinar el tipo de cdigo necesario:
<a href="archivo.html"><img src="imagen.gif"></a>
Ejemplo prctico
71
Resultar obvio para los lectores hacer ahora una pgina que contenga
una imagen varias 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 altu-
ra 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 ma-
yores 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">
 
 
<img src="img1.gif" width="68" height="21" alt="Achatada" border="0">
 
 
<img src="img1.gif" width="28" height="51" alt="Alargada" border="0">
 
 
<img src="img1.gif" width="56" height="42" alt="Doble grande" bor-
der="0">
Se puede ver el ejemplo en una pgina aparte.
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.
72
Parte 20
Alineacin de imgenes con HTML
73
Explica la manera de alinear la imagen dentro de la pgina: centrarla, co-
locarla a la derecha, a la izquierda, etc.
Por Rubn Alvarez
Vimos en su momento el atributo align que nos permita alinear el texto
a derecha, izquierda o centro de nuestra pgina. Dijimos que este atribu-
to no era exclusivo de la etiqueta sino que poda ser encontrado en
otro tipo de etiquetas.
Pues bien, <img> resulta ser una de esas etiquetas que aceptan este atri-
buto aunque en este caso el funcionamiento resulta ser diferente.
Para alinear una imagen horizontalmente podemos hacerlo de la mis-
ma forma que el texto, es decir, utilizando el atributo align dentro de una
etiqueta o <div>. En este caso, lo que incluiremos dentro de esa etiq-
ueta ser la imagen en lugar del texto:
Este cdigo mostrar la imagen en el centro:
<div align="center"><img src="logo.gif"></div>
Quedara as:
Sin embargo, ya hemos dicho que la etiqueta <img> puede aceptar el
atributo align. En este caso, la utilidad que le damos difiere de la
anterior.
El hecho de utilizar el atributo align dentro de la etiqueta <img> nos
permite, en el caso de darle los valores left o right, justificar la imagen
del lado que deseamos a la vez que rellenamos con texto el lado opuesto.
De esta forma embebemos nuestras imgenes dentro del texto de una
manera sencilla.
Aqu podis ver el tipo de cdigo a crear para obtener dicho efecto:

<img src="imagen.gif" align="right">Texto tan extenso como queramos
que cubrir la parte izquierda de la imagen. Sigo poniendo texto para
que se vea el efecto, Bla bla bla bla bla bla bla

Quedara as:
Texto tan extenso como queramos que cubrir la parte izquierda de la
imagen. Sigo poniendo texto para que se vea el efecto, Bla bla bla bla bla
bla bla

<img src="imagen.gif" align="left">Texto tan extenso como queramos
que cubrir la parte derecha de la imagen. Sigo poniendo texto para que
74
se vea el efecto, Bla bla bla bla bla bla bla

Quedara as:
Texto tan extenso como queramos que cubrir la parte izquierda de la
imagen. Sigo poniendo texto para que se vea el efecto, Bla bla bla bla bla
bla bla
Si en algn momento desesemos dejar de rellenar ese espacio lateral,
podemos pasar a una zona libre introduciendo un salto de lnea 
dentro del cual aadiremos un atributo: clear
As, etiquetas del tipo:
 
Saltara verticalmente hasta encontrar el lateral izquierdo libre.
 
Saltara verticalmente hasta encontrar el lateral derecho libre.
 
Saltar verticalmente hasta encontrar ambos laterales libres.
Ejemplo de clear:
Texto tan extenso como queramos que cubrir la parte izquierda.
Esto est debajo de la imagen.
Existen otro tipo de valores que puede adoptar el atributo align dentro
de la etiqueta <img>. Estos son relativos a la alineacin vertical de la
imagen.
Supongamos que escribimos una lnea al lado de nuestra imagen. Esta l-
nea puede quedar por ejemplo arriba, abajo o al medio de la imagen.
Asimismo, puede que en una misma lnea tengamos varias imgenes de
alturas diferentes que pueden ser alineadas de distintas forms.
Estos valores adicionales del atributo align son:
top
Ajusta la imagen a la parte ms alta de la lnea. Esto quiere decir que, si
hay una imagen ms alta, ambas imgenes presentaran el borde superior
a la misma altura.
bottom
Ajusta el bajo de la imagen al texto.
Absbottom
Colocara el borde inferior de la imagen a nivel del elemento ms bajo de
la lnea.
75
middle
Hace coincidir la base de la lnea de texto con el medio vertical de la
imagen.
absmiddle
Ajusta la imagen al medio absoluto de la lnea.
Estas explicaciones, que pueden resultar un poco complicadas, pueden
ser ms fcilmente asimiladas a partir con un poco de practica.
Nos queda explicar como introducir debajo de la imagen un pie de fo-
to o explicacin. Para ello tendremos que ver antes de nada las tablas, en
el prximos captulos
76
Parte 21
Formatos grficos para pginas web
77
Presenta los formatos grficos utilizados en las pginas web, el GIF, el
JPG y PNG. Hace hincapi en los dos primeros, resumiendo sus caracte-
rsticas 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 cre-
atividad para hacer del diseo de sitios una tarea agradable. Es tambin
una herramienta para acercar los sitios al mundo donde vivimos, si em-
bargo, 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, cono-
cerlas, 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, util-
zalas 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 dibu-
jos, mientras que el formato JPG se usa para las fotografas. Los dos com-
primen 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 pgi-
nas web, el PNG. Este formato no tiene tanta aceptacin como el GIF o
JPG por varias razones, entre las que 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:
78
Formato GIF
Un logotipo es un ejemplo claro de imagen GIF
A parte 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. Inclu-
so puede ser interesante si la imagen es muy pequea, aunque sea una
foto.
Parte de esta imagen es transparente
Transparencia: es una utilidad para definir ciertas partes del dibujo co-
mo 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 se-
an transparentes. Generalmente, definimos la transparencia cuando va-
mos 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 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.
32 colores
16
colores
8
colores
Imagen tomada con distintas paletas de colores. Se puede
apreciar como con pocos colores se ve bien el grfico y co-
mo pierde un poco a medida que le restamos colores.
Formato JPG
Una fotografa con 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 fi-
chero ocupar menos, y viceversa.
79
Intento de transparencia en JPG. Pulsar para ampliar
Transparencia: Este formato no tiene posibilidad de crear reas transpa-
rentes. Si deseamos colocar una imagen con un rea que parezca transpa-
rente procederemos as: con nuestro programa de diseo grfico hare-
mos 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 pgi-
na 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 rpi-
damente 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 podre-
mos hacerlo al guardar el archivo.
GIF 256 colores - 10,8 KB
GIF 32 colores - 5,5 KB
GIF 4 colores - 2 KB
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.
JPG
calidad 0
3 KB
JPG
calidad 20
5,9 KB
JPG
calidad 50
10 KB
Photoshop es una herramienta excelente para optimizar ficheros. Viendo
varias copias podemos elegir la ms adecuada.
Es imprescindible disponer para optimizar la imagen de una herramien-
ta buena que nos permita configurar estas caractersticas de la imagen
80
con libertad y fcilmente. Photoshop 5.5 o 6 es un programa bastante re-
comendable, pues incorpora una opcin que se llama "Guardar para el
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 op-
timizar 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
Nota: Si te interesa reforzar todos los conceptos tratados en este artculo
y ver cmo optimizamos nosotros imgenes para la web, te recomenda-
mos ver el Vdeo sobre Formatos grficos para pginas web.
81
Parte 22
Mapas de imgenes con HTML
82
Explicamos detalladamente el proceso para crear mapas de imgenes,
osea, imgenes que tienes varios enlaces asociados en distintas reas.
Por Rubn Alvarez
En captulos anteriores hemos podido adentrarnos en el elemento bsico
de navegacin del web: El enlace hipertexto. Hemos visto que estos enla-
ces son palabras, textos o imgenes que, al pinchar sobre ellos, nos env-
an 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 enla-
ces 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 vis-
ualizados. Hoy en da pueden ser implementados por medio de cdigo
HTML tal y como veremos en este capitulo.
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 ciu-
dad, 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 posi-
bilidad de hacer clic sobre los distintos puntos de la imagen. Frases como
"Haz clic sobre tal icono para acceder a tal informacin" resultan muy in-
dicativas 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:
La imagen propiamente dicha que estar situada como de costum-
bre dentro de la etiqueta <body> de nuestro documento HTML.
Un cdigo, situado en el interior de la etiqueta <map>, que delimi-
tara 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 corres-
ponde a la posicin 0,0 y la esquina inferior derecha corresponde a las
coordenadas X,Y. Si deseamos saber qu coordenadas corresponden a un
83
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:
Pulsa en los crculos para acceder a las secciones!
Dentro de ella queremos introducir un enlace a cada uno de los elemen-
tos 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" co-
ords="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" co-
ords="239,37,30" href="#">
<area alt="Pulsa para conocer mi trabajo" shape="CIRCLE" co-
ords="336,36,31" href="#">
</map>
<img src="images/html/mapa1.gif" width="380" height="72" alt="Mapa
de imgenes. Pulsa en cada una de los crculos." border="0" use-
map="#mapa1">
 
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 creasemos todas las pginas donde enlazar
las reas y colocasemos 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 "#".
84
Podis observar, tal y como hemos explicado antes, que nuestro mapa
consta de dos partes principales: la imagen y la etiqueta <map> que defi-
ne 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 numri-
cos 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 pi-
xels 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. En el dibujo que acompaa estas lneas se puede ver una
representacin de las reas, que 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="#">
shape="CIRCLE"
Crea un rea circular, que se indica con la coordenada del centro del cr-
culo y el radio. A la vista de nuestro dibujo, la etiqueta de un rea circu-
lar 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
85
polgono. A la vista del dibujo y los nombres que hemos dado a los pun-
tos del polgono, la etiqueta <area> quedara de esta forma.
<area shape="POLY" coords=" X1,Y1, X2,Y2, X3,Y3, X4,Y4" href="#">
86
Tablas en HTML
Las tablas fueron muy importantes en una poca para maquetar pgi-
nas web. Hoy lo adecuado es utilizarlas slo para presentar informacin
tabulada, es decir, colocada en una rejilla de filas y columnas. En los sig-
uientes artculos aprenderemos todo sobre las tablas en HTML.
87
Del mismo autor
Esas maravillosas partculas (2011)
Esta serie est dedicada a estudiar las partculas subatmicas ms
importantes (fundamentales o no), desde su descubrimiento y
otros aspectos histricos (como el origen del nombre), hasta sus
caractersticas ms importantes y su presencia en el Universo.
88
www.feedbooks.com
Food for the mind
89

Alonso Cornejo - Manual de HTML

Transféré par

Informations du document

Copyright

Formats disponibles

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Droits d'auteur :

Formats disponibles

Alonso Cornejo - Manual de HTML

Transféré par

Droits d'auteur :

Formats disponibles

Manual de HTML

Vous aimerez peut-être aussi