Manual de HTML de Alonso Cornejo

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 pginas web. Veremos qu es HTML y las primeras nocio-
nes que nos ayudarn a realizar las primeras pruebas de crea-
cin de una pgina web sencilla.
2
Parte 1
Prlogo al manual de HTML
3
A quin va dirigido este manual y las lecturas
aconsejadas antes de abordarlo.
Bienvenidos al manual de HTML de DesarrolloWeb. A tra-
vs de todos estos captulos vamos a descubrir el lenguaje utili-
zado para la creacin de pginas web: el Hyper Text Markup
Language, ms conocido como HTML.
Puede que en un principio, el hecho de hablar de un lenguaje
informtico pare los pies a ms de uno. No os asustis, el
HTML no deja de ser ms que una forma un tanto peculiar de
dar formato a los textos e imgenes que pretendemos ver por
medio de un navegador.
Antes de entrar en materia, lo cual haremos de una forma di-
recta y practica, os recomendamos fervorosamente la lec-
tura previa de nuestro manual Publicar en Internet. A
partir de esta gua, aprenderis los conceptos ms bsicos ne-
cesarios 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 conoci-
miento aporta con respecto al simple uso de editores de HTML.
Adems, en dicho manual sobre la publicacin en Internet, ex-
plicamos tambin algo tan importante como qu hace falta pa-
ra subir una pgina web realizada que tenemos en nuestro or-
denador a un servidor de Internet. Si lo deseamos, 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 pblico 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 poco de ganas y sigues este manual has-
ta el final, tendrs las siguientes habilidades o conocimientos:
4
Capacidad para crear y publicar vuestro propio sitio web
con un mnimo de calidad.
Conocimientos de todo tipo sobre las tecnologas y herra-
mientas empleadas en el mbito de la Red.
Posiblemente una aficin que puede convertirse en pa-
sin y terminar, 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 comple-
mentar las explicaciones de este manual, tambin recomenda-
mos el videotutorial de HTML.
Finalmente, antes de comenzar con el temario, queremos da-
ros una referencia importante a la seccin HTML a fondo, don-
de 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, objetivos y dems conocimientos donde
sentar las bases del manual.
HTML es el lenguaje con el que se escriben las pginas
web. Las pginas web pueden ser vistas por el usuario median-
te un tipo de aplicacin llamada navegador. Podemos decir por
lo tanto que el HTML es el lenguaje usado por los navegadores
para mostrar las pginas webs al usuario, siendo hoy en da la
interface ms extendida en la red.
Este lenguaje nos permite aglutinar textos, sonidos e imge-
nes y combinarlos a nuestro gusto. Adems, y es aqu donde re-
side su ventaja con respecto a libros o revistas, el HTML nos
permite la introduccin de referencias a otras pginas por me-
dio 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 ca-
rcter multimedia, de modo que, el HTML se cre sin dar resp-
uesta 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 embar-
go, pese a esta deficiente planificacin, si que se han ido incor-
porando modificaciones con el tiempo, estos son los estndares
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 supe-
rados con la introduccin de otras tecnologas accesorias capa-
ces de organizar, optimizar y automatizar el funcionamiento de
las webs. Ejemplos que pueden sonaros son
las CSS, JavaScript u otros. Veremos ms adelante en qu con-
sisten algunas de ellas.
Otros de los problems que han acompaado al HTML es la
diversidad 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 pgi-
na, 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)
7
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 win-
dows, u otro editor de textos sencillo. Hay que tener cuidado
con algunos editores ms complejos como Wordpad o Micro-
soft Word, pues colocan su 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 utilizar una herramienta lo ms
sencilla posible para poder prestar la mxima atencin a nues-
tro 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 cre-
acin de pginas.
As pues, una pgina es un archivo donde est contenido el
cdigo HTML en forma de texto. Estos archivos tienen exten-
sin .html o .htm (es indiferente cul utilizar). De modo que
cuando programemos en HTML lo haremos con un editor de
textos y guardaremos nuestros trabajos con extensin .html,
por ejemplo mipgina.html
Consejo: Utiliza siempre la misma extensin en tus archivos

HTML. Eso evitar que te confundas al escribir los nombres de
tus archivos unas veces con .htm y otras con .html. 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 ten-
dr 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 eti-
quetas vamos definiendo los elementos del documento, como
enlaces, prrafos, imgenes, etc. As pues, un documento
HTML estar constituido por texto y un conjunto de etiquetas
para definir la forma con la que se tendr que presentar el tex-
to 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 mo-
dificaciones que caracterizan a esta etiqueta. As por ejemplo:
Las etiquetas y definen un texto en negrita. Si en
nuestro documento HTML escribimos una frase con el siguien-
te 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
10
imgenes delimitados a su vez por otras etiquetas como las que
hemos visto.
El resultado es un documento con la siguiente estructura:
<html>
<head>
Etiquetas y contenidos del encabezado
Datos que no aparecen en nuestra pgina pero que son impor-
tantes para catalogarla: Titulo, palabras clave,
</head>
<body>
Etiquetas y contenidos del cuerpo
Parte del documento que ser mostrada por el navegador: Tex-
to e imgenes
</body>
</html>
Las maysculas o minsculas son indiferentes al escri-
bir 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 embar-
go 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 co-
ger buenas costumbres desde el principio para evitar fallos tri-
viales en un futuro.
11
Parte 4
Tu primera pgina
12
Vamos a ver cmo se hace una pgina muy senci-
lla en HTML, que sirva de prctica a los
debutantes.
Podemos ya con estos conocimientos, y alguno que otro ms,
crear nuestra primera pgina. Para ello, abre tu editor de tex-
tos y copia y pega el siguiente 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 selecciona-
mos la opcin Guardar como. En la ventana elegimos el direc-
torio donde deseamos guardarlo y colocaremos su nombre, por
ejemplo mi_pagina.html
Consejo: Utiliza nombres en tus archivos que tengan algunas

normas bsicas para ahorrarte disgustos y lios.
Nuestro consejo es que no utilices acentos ni espacios ni
otros caracteres raros. Tambin te ayudar escribir siempre
las letras en minsculas.
Esto no quiere decir que debes hacer nombres de archivos
cortos, es mejor hacerlos descriptivos para que te aclaren lo
que hay dentro. Algn caracter como el guin "-" o el guin ba-
jo "_" te puede ayudar a separar las palabras. Por ejemplo quie-
nes_somos.html
Con el documento HTML creado, podemos ver el resultado
obtenido a partir de un navegador. Es conveniente, llegado a
este punto, hacer hincapi en el hecho de que no todos los na-
vegadores son idnticos. Desgraciadamente, los resultados de
nuestro cdigo pueden cambiar de uno a otro por lo que resul-
ta aconsejable visualizar la pgina en varios. Generalmente se
13
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 pla-
no. Esto no quiere decir que lo debemos dejar totalmente de la-
do 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 act-

ualidad otros productos vienen tomando fuerza como Chrome,
el navegador de Google. Para el que le interese este tema y co-
nocer datos reales sobre los porcentajes de uso de cada nave-
gador, se puede leer uno de los informes que publicamos peri-
dicamente, como el ranking de uso de los navegadores en nov-
iembre de 2010.
Pues bien, volviendo al tema, una vez creado el archivo .html
o .htm, podemos visualizar el resultado de nuestra labor abr-
iendo 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, elegir Archivo y seleccionar Abrir. Una ventana se abri-
r. Pulsamos sobre el botn Examinar y accederemos a una
ventana a partir de la cual podremos movernos por el interior
de nuestro disco duro hasta dar con el archivo que deseamos
abrir.
La cosa no resulta ms difcil para Netscape. En este caso,
nos dirigimos tambin a la barra de men principal y elegimos
File y a continuacin Open File. La misma ventana de bsque-
da 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 como icono el logotipo de Netscape o el de In-
ternet Explorer. Para abrirlo simplemente hacemos un doble
click sobre l.
Una vez abierto el archivo podris ver vuestra primera pgi-
na web. Algo sencillita pero por algo se empieza. Ya veris
14
como en poco tiempo seremos capaces de mejorar
sensiblemente.
Fijaos en la parte superior izquierda de la ventana del nave-
gador. Podris comprobar la presencia del texto delimitado por
la etiqueta <title>. Esta es una de las funciones de esta etique-
ta, cuyo principal cometido es el de servir de referencia en los
motores de bsqueda como 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.
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 accesoria aparece el cdigo de nuestra pgina. Es-
te recurso es de extremada importancia ya que nos permite ver
el tipo de tcnicas empleadas por otros para la confeccin de
sus pginas.
Con todo esto asimilado ya estamos en condiciones de aden-
trarnos un poco ms en la descripcin de algunas de las etique-
tas ms empleadas del HTML.
Posible problema: Al utilizar el Block de Notas en Windows

en ocasiones, 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 pre-
determinado guardar sus archivos con extensin .txt y en reali-
dad 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 de-
seleccionar una caja de seleccin que pone 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
15
nos haga caso cuando le indicamos que grabe el archivo con
otra extensin que no sea .txt
16
Formatos bsicos con HTML
Cmo realizar el formato de textos que se colocan en una p-

gina web. Aprende a utilizar tus primeras etiquetas HTML y
atributos para definir los contenidos de la pgina y aplicar un
formato bsico.
17
Parte 5
Formato de prrafos en HTML
18
Cmo colocar prrafos y saltos de lnea en pgi-
nas web. Tambin vemos los encabezados como
prrafos que sirven de titulo.
En los captulos anteriores hemos presentado a titulo de ejem-
plo algunas etiquetas que permiten dar formato a nuestro tex-
to. En este capitulo veremos con ms detalle las ms amplia-
mente utilizadas y ejemplificaremos algunas de ellas
posteriormente.
Formatear un texto pasa por tareas tan evidentes como defi-
nir los prrafos, justificarlos, introducir vietas, numeraciones
o bien poner en negrita, 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 re-
torno 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 correspondien-

te 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 adelante sino que slo tienen presenc-
ia en un lugar puntual.
Podis comprobar que cambiar de lnea en nuestro documen-
to HTML sin introducir alguna de estas u otras etiquetas no im-
plica en absoluto un cambio de lnea en la pgina visualizada.
En realidad el navegador introducir el texto y no cambiara de
lnea a no ser que esta llegue a su fin o bien lo especifiquemos
con la etiqueta correspondiente.
Los prrafos delimitados por etiquetas pueden ser fcil-
mente justificados a la izquierda, centro o derecha especifican-
do dicha justificacin en el interior de la etiqueta por medio de
un atributo align. Un atributo no es ms que un parmetro incl-
uido en el interior de la etiqueta que ayuda a definir el funcio-
namiento de la etiqueta de una forma ms personal. Veremos a
lo largo de este manual cantidad de atributos muy tiles para
todo tipo de etiquetas.
19
As, si desesemos introducir un texto alineado a la izqu-
ierda escribiramos:
Texto alineado a la izquierda
El resultado seria:
Texto alineado a la izquierda
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 fun-
cionamiento de la etiqueta. En otros casos, el propio navegador
toma un valor definido por defecto. Para el caso de align, el va-
lor por defecto es left.
Nota: Los atributos tienen sus valores indicados entre comillas

("), pero si no los indicamos entre comillas tambin funcionar
en la mayora de los casos. Sin embargo, es aconsejable que
pongamos siempre las comillas para acostumbrarnos a utilizar-
las, 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 es-
te atributo de una forma habitual.
Imaginemos un texto relativamente largo donde todos los p-
rrafos estn alineados a la izquierda (por ejemplo). Una forma
de simplificar nuestro cdigo y de evitar introducir continua-
mente el atributo align sobre cada una de nuestras etiquetas es
utilizando la etiqueta <div>.
Esta etiqueta por si sola no sirve para nada. Tiene que estar
acompaada del atributo align y lo que nos permite es alinear
20
cualquier elemento (prrafo o imagen) de la manera que noso-
tros deseemos.
As, el cdigo:
Parrafo1
 Parrafo3
 Parrafo2
es equivalente a:
<div align="left">
Parrafo1
Parrafo2
Parrafo3
</div>
Como hemos visto, la etiqueta <div> marca divisiones en las
que definimos un mismo tipo de alineado.
Ejemplo prctico:
Para practicar un poco lo que acabamos de ver vamos a pro-
poner un ejercicio que podis resolver en vuestros ordenado-
res. Simplemente queremos construir una pgina que tenga,
por este orden:
2 Prrafos centrados
3 Prrafos alineados a la derecha
Un salto de lnea triple
1 prrafo alineado a la izquierda
No vamos a escribir en esta ocasin el cdigo fuente del ejer-
cicio. Podemos verlo en funcionamiento en nuestro navegador
y en la ventana podemos obtener el cdigo fuente seleccionan-
do en el men Ver la opcin Cdigo fuente.
Ver el ejercicio en marcha.
Encabezados
Existen otras etiquetas para definir prrafos especiales, for-
mateados como ttulos. Son los encabezados o Header en in-
gls. Como decimos, son etiquetas que formatean el texto co-
mo 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 ta-
mao de la letra que utilizan. La etiqueta en concreto es la
<h1>, para los encabezados ms grandes, <h2> para los de
segundo nivel y as hasta <h6> que es el encabezado ms
pequeo.
21
Los encabezados implican tambin una separacin en prra-
fos, as que todo lo que escribamos dentro de <h1> y </h1> (o
cualquier otro encabezado) se colocar en un prrafo
independiente.
Podemos ver cmo se presentan algunos encabezados a
continuacin.
<h1>Encabezado de nivel 1</h1>
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 ali-
neado al centro.
<h2 align="center">Encabezado de nivel 2</h2>
Se ver de esta manera en la pgina:
Encabezado de nivel 2
Otro ejercicio interesante es construir una pgina web que
contenga todos 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 pa-

ra formatear 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 encabeza-
dos son para colocar titulares en pginas web y es el navega-
dor el responsable de formatear el texto de manera que
22
parezca un titular. Cada navegador, pues, puede formatear el
texto a su gusto con tal de que parezca un titular.
23
Parte 6
New Part
24
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 tex-
to resaltado en negrita, itlica y otros. Paralelamente el uso de
ndices, subndices resulta vital para la publicacin de textos
cientficos. Todo esto y mucho ms es posible por medio del
HTML a partir de multitud de etiquetas entre las cuales vamos
a destacar algunas.
Negrita
Podemos escribir texto en negrita incluyndolo dentro de las
etiquetas y (bold). Esta misma tarea es desempea-
da por y siendo ambas equivalentes. No-
sotros 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
peculiaridad que las hace distintas. La etiqueta indica ne-
grita, mientras que la etiqueta indica que se debe es-
cribir resaltado. El HTML lo interpretan los navegadores segn
su criterio, es por eso que las pginas se pueden ver de distinta
manera en unos browsers y en otros. La etiqueta <H1> quiere
decir "encabezado de nivel 1", es el navegador el responsable
de formatear el texto de manera que parezca un encabezado
de primer nivel. En la prctica los encabezados de Internet Ex-
plorer y Netscape son muy parecidos (tamao de letra grande
y en negrita), pero otro navegador podra colocar los encabeza-
dos con subrayado si le pareciese oportuno.
La diferencia entre y se podr entender aho-
ra. Mientras que significa simplemente negrita y todos los
navegadores la interpretarn como negrita, es una
etiqueta que significa que se tiene que resaltar fuertemente el
texto y cada navegador es el responsable de resaltarlo como
25
desee. En la prctica coloca el texto en negrita, pero
podra ser que un navegador decidiese resaltar colocando ne-
grilla, subrayado y color rojo en el texto.
Itlica
Tambin en este caso existen dos posibilidades, una corta: 
e (italic) y otra un poco ms larga: y . En es-
te manual, y en la mayora de las pginas que veris por ah, os
encontraris con la primera forma sin duda ms sencilla a es-
cribir 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 eti-
quetas: y (underlined). Sin embargo, el uso de subr-
ayados ha de ser aplicado con mucha precaucin dado que los
enlaces hipertexto van, a no ser que se indique lo contrario, su-
brayados con lo que podemos confundir 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 13CC3H4ClNOS 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, pode-
mos sin ningn problema crear texto en negrita e itlica embe-
biendo una etiqueta dentro de la otra:
Esto slo est en negrita y esto en negrita e itli-
ca
Esto nos daria:
26
Esto slo est en negrita y esto en negrita e itlica
Consejo: Cuando anides etiquetas HTML hazlo correctamente.

Nos referimos a que si abres etiquetas dentro de otra ms prin-
cipal, antes de cerrar la etiqueta principal cierres las etiquetas
que hayas abierto dentro de ella.
Debemos evitar cdigos como el siguiente:

Esto est en negrita e itlica
En favor de cdigos con etiquetas correctamente anidadas:
Esto est en negrita e itlica
Esto es muy aconsejable, aunque los navegadores entiendan

bien las etiquetas mal anidadas, por dos razones:
1. Sistemas como XML no son tan permisivos con estos
errores y puede que en el futuro nuestras pginas no fun-
cionen correcamente.
2. A los navegadores les cuesta mucho tiempo de procesam-
iento resolver este tipo de errores, incluso ms que cons-
truir la propia pgina y debemos evitarles que sufran por
una mala codificacin.
Todo lo que se ha visto hasta el momento en el Manual de
HTML se puede ver en un vdeo para aprender visualmente. Si
te interesa puedes acceder al Videotutorial de HTML - Parte 1,
documento bsico y formato de texto.
27
Parte 7
Color, tamao y tipo de letra
28
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 este 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 co-
rrespondiente. Dentro de esta etiqueta deberemos especificar
los atributos correspondientes a cada uno de estos parmetros
que deseamos definir. A continuacin os comentamos los atri-
butos principales de esta etiqueta:
Atributo face
Define el tipo de letra. Este atributo es interpretado por vers-
iones 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,
dependiendo de la plataforma que utilice, puede no disponer
de los mismos tipos de letra que nosotros con lo que, si noso-
tros 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 atri-
buto suelen seleccionarse varios tipos de letra separados por
comas. En este caso el navegador comprobar que dispone del
primer tipo enumerado y si no es as, pasar al segundo y as
sucesivamente hasta encontrar un tipo que posea o bien aca-
bar la lista y poner la fuente por defecto. Veamos un ejemplo.
Este texto tiene
otra tipografa
Que se visualizara as en una pgina web.
Este texto tiene otra tipografa
Nota: Aqu tenemos un ejemplo de atributo cuyo valor debe es-

tar limitado 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"
29
debemos colocar las comillas para limitarlo. En caso de no te-
ner comillas
face=Comic Sans MS,arial,verdana
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 pala-
bras (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 ta-
mao distintos numerados de 1 a 7 por orden creciente. Elegi-
remos por tanto un valor 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 defi-
nimos nuestro atributo como size="+1" lo que queremos decir
es que aumentamos de un nivel el tamao de la letra. Si esta-
bamos 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 tamao de fuente puede ser definido en el Ex-
plorer yendo al menu superior, 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 cons-
tante para que ste quepa en un determinado espacio. Vere-
mos en su momento que esta prefijacin del tamao puede ser
llevada a cabo por las hojas de estilo en cascada.
Atributo color
30
El color del texto puede ser definido mediante el atributo co-
lor. Cada color es a su vez definido por un nmero hexadecimal
que esta compuesto a su vez de tres partes. Cada una de estas
partes representa la contribucin del rojo, verde y azul al color
en cuestin.
Podis entender cmo funciona esta numeracin y cules son
los colores que resultan ms compatibles a partir de este art-
culo: Los colores y HTML.
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:
Nombre Color
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 capitulos haciendo un ejercicio consistente en una pgina
que tenga las siguientes caractersticas:
Un titular con encabezado de nivel 1, en itlica y color
verde oliva.
31
Un segundo titular con encabezado de nivel 2, tambin
de color verde oliva.
Todo el texto de la pgina deber presentarse con una
fuente distinta de la fuente por defecto. Por ejemplo "Co-
mic 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 enla-
ce. (Ver el cdigo fuente de la pgina para ver cmo lo hemos
resuelto)
32
Parte 8
Los colores y HTML
33
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 rela-
tivos 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 colores. Se indican en valores RGB, es decir, que para con-
seguir 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 tan-
tos dgitos numricos 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 mane-

ra: 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 hexadeci-
mal. El caracter # se coloca al principio de la cadena.
Otros colores
Naranja #FF8000
Verde turquesa #339966
Azul oscuro #000080
Colores compatibles en todos los sistemas
34
Como las pginas web las tienen que ver todos los usuarios,
y los sistemas que utilizan para entrar son distintos, hay que
utilizar colores compatibles 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 adec-
uados. Entro otros, podrs encontrar el script que genera la ta-
bla de arriba.
35
Parte 9
Atributos para pginas
36
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 atribu-
tos que le pueden dar un aspecto a la pgina muy personaliza-
do. Podemos definir atributos como el color de fondo, el color
del texto o de los enlaces. Estos atributos se definen en la etiq-
ueta <body> y, como decamos son generales a toda la pgina.
Lo mejor para explicar su funcionamiento es verlos uno por
uno.
Atributos para fondos
bgcolor: especificamos un color de fondo para la pgina. En el
captulo anterior y en el taller de los colores y HTML hemos
aprendido a construir cualquier color, con su nombre o su va-
lor RGB. El color de fondo que podemos asignar con bgcolor es
un color plano, es decir el mismo para toda la superficie del
navegador.
background: sirve para indicar la colocacin de una imagen
como fondo de la pgina. La imagen se coloca haciendo un mo-
saico, es decir, se repite muchas veces hasta ocupar todo el es-
pacio del fondo de la pgina. En captulos ms adelante vere-
mos como se insertan imgenes con HTML y los tipos de im-
genes 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 mismo directorio que la pgina. En este caso se colocara
la siguiente etiqueta <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, debe-

mos poner tambin un color de fondo cercano al color de la
imagen.
Esto se debe a que, al colocar una imagen de fondo, el texto
de la pgina debemos colocarlo en un color que contraste
37
suficientemente con dicho fondo. Si el visitante no puede ver el
fondo por cualquier cuestin (Por ejemplo tener deshabilitada
la carga de imgenes) puede que el texto no contraste lo sufic-
iente con el color de fondo por defecto de la web.
Creo que lo mejor ser poner un ejemplo. Si la imagen de
fondo es oscura, tendremos que poner un texto claro para que
se pueda leer. Si el visitante que accede a la pgina no ve la
imagen de fondo, le saldr el fondo por defecto, que general-
mente es blanco, de modo que al tener un texto con color claro
sobre un fondo blanco, nos pasar que no podremos leer el tex-
to convenientemente.
Ocurre parecido cuando se est cargando la pgina. Si toda-
va no ha llegado a nuestro sistema la imagen de fondo, se ver
el fondo que hayamos seleccionado con bgcolor y es interesan-
te que sea parecido al color de la imagen para que se pueda le-
er el texto mientras se carga la imagen de fondo.
Color del texto
text: este atributo sirve para asignar el color del texto de la p-
gina. Por defecto es el negro.
Adems del color del texto, tenemos tres atributos para asig-
nar el color de los enlaces de la pgina. Ya debemos saber que
los enlaces deben diferenciarse del resto del texto de la pgina
para que los usuarios puedan identificarlos fcilmente. Para
ello suelen aparecer subrayados y con un color ms vivo que el
texto. Los tres atributos son los siguientes:
link: el color de los enlaces que no han sido visitados. (por
defecto es azul clarito)
vlink: el color de los enlaces visitandos. La "v" viene justa-
mente de la palabra visitado. Es el color que tendrn los enla-
ces que ya hemos visitado. Por defecto su color es morado. Es-
te color debera ser un poco menos vivo que el color de los en-
laces normales.
alink: es el color de los enlaces activos. Un enlace est acti-
vo en el preciso instante que se pulsa. A veces es difcil darse
cuenta cuando un enlace est activo porque en el momento en
el que se activa es porque lo estamos pulsando y en ese caso el
navegador abandonar la pgina rpidamente y no podremos
ver el enlace activo ms que por unos instantes mnimos.
Ejemplo de color del texto
38
Vamos a ver una pgina donde el color de fondo sea negro, y
los colores del texto y los enlaces sean claros. Pondremos el co-
lor de texto balnco y los enlaces amarillos, ms resaltados los
que no estn visitados y menos resaltados lo que ya estn visi-
tados. 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
Con otros atributos de la etiqueta <body> se pueden asignan
espacios de margen en las pginas, lo que es muy til para eli-
minar los mrgenes en blanco que aparecen a los lados, arriba
y debajo de la pgina. Estos atributos son distintos para Inter-
net Explorer y para Netscape Navigator, por lo que debemos
utilizarlos todos si queremos que todos los navegadores los in-
terpreten perfectamente.
leftmargin: para indicar el margen a los lados de la pgina.
Vlido para iexplorer.
topmargin: para indicar el margen arriba y debajo de la p-
gina. Para iexplorer.
marginwidth: la contrapartida de leftmargin para Netscape.
(Margen a los lados)
marginheight: igual que topmargin, pero para Netscape.
(Margen arriba y abajo)
Tenemos un artculo sobre la utilizacin de estos atributos
para hacer diseos avanzados con tablas en distintas definicio-
nes de pantalla, que puede ser interesante de leer.
Un ejemplo de pgina sin margen es la propia pgina de De-
sarrolloWeb.com, que ests visitando actualmente. (Por lo me-
nos a la hora de escribir este artculo) Adems, vamos a ver
otra pgina sin mrgenes, por si alguien necesita ver el ejem-
plo en estas lneas.
<body topmargin=0 leftmargin=0 marginheight=0 margin-
width=0 bgcolor="ffffff">
<table width=100% bgcolor=ff6666><tr><td>
<h1>Hola amigos</h1>
 
 
Gracias por visitarme!
39
</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 es-
pacio 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 podemos encontrar en vdeo y en concreto las explicaciones
de los ltimos artculos se han recogido en el Vdeotutorial de
HTML - Fuentes, colores y estilos de BODY.
40
Parte 10
Caracteres especiales
41
Una referencia til, y una lista completa de los caracteres es-
peciales del HTML.
Una pgina web se ha de ver en paises distintos, que usan con-
juntos 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 sustit-
uirlo 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 confun-
dir un principio o final de etiqueta, unas comillas o un & con su
correspondiente caracter.
< < > >

& & " "
Caracteres especiales del HTML 2.0
Á À
É È
Í Ì
Ó Ò
Ú Ù
á à
é è
í ì
ó ò
ú ù
Ä Â
Ë Ê
Ï Î
Ö Ô
Ü Û
ä â
42
ë ê
ï î
ö ô
ü û
Ã å
Ñ Å
Õ Ç
ã ç
ñ Ý
õ ý
Ø ÿ
ø Þ
Ð þ
ð Æ
ß æ
Caracteres especiales del HTML 3.2
¼
½ ¡
¾ £
© ¥
® §
ª ¤
² ¦
³ «
¹ ¬
¯
µ º
¶ ´
· ¨
° ±
¸ »
¿
Otros caracteres especiales
× ¢
43
÷ €

Para descargar la lista de caracteres especiales: caractere-
sespeciales.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.
44
Listas en HTML
A continuacin comenzaremos a explicar las listas de HTML
que implican varias etiquetas para crear su estructura. Vere-
mos varios tipos de listas que se pueden utilizar para diversos
objetivos.
45
Parte 11
Listas I - Listas desordenadas
46
Vemos lo que son las listas y sealamos los tres tipos que hay.
Estudiamos las listas desordenadas.
Por Rubn Alvarez
Las posibilidades que nos ofrece el HTML en cuestin de trata-
miento de texto son realmente notables. No se limitan a lo vis-
to hasta ahora, sino que van ms lejos todava. Varios ejemplos
de ello son las listas, que sirven para enumerar y definir ele-
mentos, los textos preformateados y las cabeceras o ttulos.
Las listas originalmente estn pensadas para citar, numerar y
definir cosas a travs de caractersticas, o al menos as lo hace-
mos en la escritura de textos. Sin embargo, las listas finalmen-
te se utilizan para mucho ms que enumerar una serie de pun-
tos, en realidad son un recurso muy interesante para poder
maquetar elementos diversos, como barras de navegacin, pes-
taas 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 dife-
rentes tipos que existen, y que podemos utilizar para resolver
nuestras distintas necesidades a la hora de escribir textos en
HTML.
Referencia: Todos los tipos de listas los hemos explicado en

vdeo y se pueden revisar en el Videotutorial de HTML, ms
concretamente en la entrega siguiente: Vdeo sobre las Listas
HTML.
Podemos distinguir tres tipos de listas HTML:
Listas desordenadas
Listas ordenadas
Listas de definicin
Las veremos detenidamente una a una.
Listas desordenadas
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
47
<li>Chile
</ul>
El resultado:
Pases del mundo

Argentina
Per
Chile
Podemos definir el tipo de vieta empleada para cada elemen-
to. 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 camb-

iar el tipo de vieta a mostrar y por mucho que nos empee-
mos, 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 redondel, 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
48
Elemento 2
Elemento 3
Elemento 4
49
Parte 12
New Part
50
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 informacin. En el captulo anterior vimos las lis-
tas desordenadas y ahora estudiaremos las listas ordenadas.
Listas ordenadas
Las listas ordenadas sirven tambin para presentar informa-
cin, en diversos elementos o items, con la particularidad que
stos estarn predecidos de un nmero o una letra para enu-
merarlos, 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 or-
denadas ofrecen la posibilidad de modificar el estilo. En con-
creto nos es posible especificar el tipo de numeracin emplea-
do eligiendo entre nmeros (1, 2, 3 ), letras (a, b, c ) y sus
maysculas (A, B, C, ) y nmeros romanos en sus versiones
maysculas (I, II, III, ) y minsculas (i, ii, iii, ). Para realizar
dicha seleccin hemos de utilizar, como para el caso preceden-
te, 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
51
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
Puede que en algn caso deseemos comenzar nuestra enu-
meracin por un nmero o letra que no tiene por qu ser nece-
sariamente el primero de todos. Para solventar esta situacin,
podemos utilizar un segundo atributo, start, que tendra como
valor un nmero. Este nmero, que por defecto es 1, corres-
ponde al valor a partir del cual comenzamos a definir nuestra
lista. Para el caso de las letras o los nmeros romanos, el nave-
gador 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
52
1. Elemento x
2. Elemento xi
53
Parte 13
Listas III - Listas de definicin
54
Vemos las listas de definicin y aprendemos a anidar listas pa-
ra crear estructuras lista ms complejas.
Por Rubn Alvarez
Terminamos el tema de listas en el manual de HTML de Desa-
rrolloWeb.com estudiando las listas de definicin. Veremos
tambin la anidacin de listas, que resultar un recurso intere-
sante para estructurar datos un poco ms complejos o enume-
rar elementos con una jerarqua.
Listas de definicin
Las listas de definicin sirven para hacer un conjunto de ele-
mentos con pares concepto-descripcin. Es decir, se especifica-
rn varios trminos por su nombre y se escribir una definicin
para cada uno. Cada elemento es presentado junto con su defi-
nicin, 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 defini-
tion) 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 izqu-

ierda. Este tipo de etiquetas son usadas a menudo con el pro-
psito de crear textos ms o menos desplazados hacia la
izquierda.
El cdigo:
55
<dl>
<dd>Primer nivel de desplazamiento
<dl>
<dd>Segundo nivel de desplazamiento
<dl>
<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 anida-
da como hemos visto en otros casos. De esta forma, podemos
conseguir listas mixtas 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
56
Referencia: Con esto hemos acabado el tema sobre Listas
HTML, sin embargo, podemos completar las explicaciones en
el Videotutorial de HTML, en el Vdeo sobre las Listas HTML.
57
Todo sobre los enlaces en HTML
Los enlaces son los elementos que nos permiten navegar por
las pginas HTML y son tan importantes que la web no tendra
sentido sin ellos. Dedicaremos varios captulos a explorar los
distintos tipos de enlaces, sus usos y diversos consejos para ha-
cer pginas navegables.
58
Parte 14
Enlaces en HTML
59
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 archi-
vo HTML en el que podemos incluir, entre otras cosas, textos
formateados a nuestro gusto e imgenes (las veremos ensegui-
da). Del mismo modo, un sitio web podr ser considerado como
el conjunto de archivos, principalmente pginas HTML e im-
genes, que constituyen el contenido al que el navegante tiene
acceso.
Sin embargo, no podramos hablar de navegante o de navega-
cin si estos archivos HTML no estuviesen debidamente conec-
tados entre ellos y con el exterior de nuestro sitio por medio de
enlaces hipertexto. En efecto, el atractivo original del HTLM
radica en la posible puesta en relacin de los contenidos de los
archivos introduciendo referencias bajo forma de enlaces que
permitan un acceso rpido a la informacin deseada. De poco
servira en la red tener pginas aisladas a las que la gente no
puede acceder y desde las que la gente no puede saltar a otras.
Un enlace puede ser fcilmente detectado 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. Adicio-
nalmente, estos enlaces suelen ir, en el caso de los textos, colo-
reados y subrayados para que el usuario no tenga dificultad en
reconocerlos. Si no especificamos lo contrario (ya tendremos
ocasin de explicar como), estos enlaces texto estarn subraya-
dos y coloreados en azul. En el caso de las imgenes que sirvan
de enlace, veremos 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 especifi-
car asimismo el destino del enlace. Este destino ser introduci-
do 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.
60
En funcin del destino los enlaces son clsicamente agrupa-
dos del siguiente modo:
Enlaces internos: los que se dirigen a otras partes den-
tro de la misma pgina.
Enlaces locales: los que se dirigen a otras pginas del
mismo sitio web.
Enlaces remotos: los dirigidos hacia pginas de otros si-
tios web.
Enlaces con direcciones de correo: para crear un
mensaje de correo dirigido a una direccin.
Enlaces con archivos: para que los usuarios puedan ha-
cer download de ficheros.
Referencia: Para complementar las explicaciones sobre los
enlaces HTML recomendamos ver el videotutorial sobre
enlaces.
61
Parte 15
Enlaces internos
62
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 utili-
zados 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 en-
lace de origen propiamente dicho, un segundo enlace que ser
colocado en el destino. Veamos ms claramente como funcio-
nan estos enlaces con un ejemplo sencillo:
Enlace con final de este documento, para que probis su func-

ionamiento:
Ir abajo
Supongamos que queremos crear un enlace que apunte al fi-
nal de la pgina. Lo primero ser colocar nuestro enlace ori-
gen. 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 aba-
jo" y el destino, abajo, es un punto de la misma pgina que to-
dava no hemos definido. Ojo al smbolo #; es l quien especifi-
ca 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 p-
gina. En este caso, la etiqueta que escribiremos ser sta:
<a name="abajo"></a>
A decir verdad, estos enlaces, aunque tiles, no son los ms
extendidos de cuantos hay. La tendencia general es la de crear
pginas (archivos) independientes con tamaos ms reducidos
enlazados entre ellos por enlaces locales (los veremos ensegui-
da). De esta forma evitamos el exceso de tiempo de carga de
63
un archivo y la introduccin de exceso de informacin que pue-
da desviar la atencin del usuario.
Una aplicacin corriente de estos enlaces consiste en poner
un pequeo ndice al principio de nuestro documento donde in-
troducimos enlaces origen a las diferentes secciones. Paralela-
mente, 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.
64
Parte 16
Enlaces locales
65
Enlaces HTML con otras pginas del mismo sitio web.
Por Rubn Alvarez
Como hemos dicho, un sitio web esta constituido de pginas in-
terconexas. En el capitulo anterior hemos visto como enlazar
distintas secciones dentro de una misma pgina. Nos queda
pues estudiar la manera de relacionar los distintos documentos
HTML que componen nuestro sitio web.
Para crear este tipo de enlaces, hemos de crear una etiqueta
de la siguiente forma:
<a href="archivo.html">contenido</a>
Por regla general, para una mejor organizacin, los sitios
suelen estar ordenados por directorios. Estos directorios sue-
len contener diferentes secciones de la pgina, imgenes, soni-
dos Es por ello que en muchos casos no nos valdr con espe-
cificar el nombre del archivo, sino que tendremos que especifi-
car adems el directorio en el que nuestro archivo.html esta
alojado.
Si habis trabajado con MS-DOS no tendris ningn proble-
ma 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 forma de expresarlos. No resulta difcil en abso-
luto y con un poco de practica lo haris prcticamente sin
pensar.
1. Hay que situarse mentalmente en el directorio en el que
se encuentra la pgina con el enlace.
2. Si la pgina destino esta en un directorio incluido dentro
del directorio en el que nos encontramos, hemos de mar-
car el camino enumerando cada uno de los directorios
por los que pasamos hasta llegar al archivo y separndo-
los por el smbolo barra "/". Al final obviamente, escribi-
mos el archivo.
3. Si la pgina destino se encuentra en un directorio que in-
cluye el de la pgina con el enlace, hemos de escribir dos
puntos y una barra "../" tantas veces como niveles suba-
mos en la arborescencia hasta dar con el directorio don-
de esta emplazado el archivo destino.
66
4. Si la pgina se encuentra en otro directorio no incluido ni
incluyente del archivo origen, tendremos que subir como
en la regla 3 por medio de ".." hasta encontrar un directo-
rio que englobe el directorio que contiene a la pgina
destino. A continuacin haremos como en la regla 2. Es-
cribiremos todos los directorios por los que pasamos has-
ta llegar al archivo.
Ejemplo:
Para clarificar este punto podemos hacer un ejemplo a partir

de la estructura 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 pgi-
na en general sino ms precisamente a una seccin concreta.
Este tipo de enlaces resultan ser un hbrido de interno y local.
La sintaxis es de este tipo:
<a href="archivo.html#seccion">contenido</a>
Como para los enlaces internos, en este caso hemos de mar-
car la seccin con otro enlace del tipo:
<a name="seccion"></a>
Como ejemplo, he aqu un enlace que apunta al capitulo an-
terior al final de la pgina.
67
Parte 17
Enlaces externos, de correo y ha-
cia archivos
68
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 encuen-
tran fuera de nuestro sitio web, es decir, cualquier otro docu-
mento 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 parecido a esto.
<a href="http://www.guiarte.com">ir a guiarte.com</a>
Slo cabe destacar que todos las direcciones web (URLs) em-
piezan por http://. Esto indica que el protocolo por el que se
accede es HTTP, el utilizado en la web. No debemos olvidarnos
de colocarlas, porque si no los enlaces sern tratados como en-
laces locales a nuestro sitio.
Otra cosa interesante es que no tenemos que enlazar con una
pgina web con el protocolo HTTP necesariamente. Tambin
podemos acceder a recursos a travs de otros protocolos como
el FTP. En tal caso, las direcciones de los recursos no comenza-
rn por http:// sino por ftp://.
Enlaces a direcciones de correo
Los enlaces a direcciones de correo son aquellos que al pin-
charlos nos abre un nuevo mensaje de correo electrnico diri-
gido a una direccin de mail determinada. Estos enlaces son
muy habituales en las pginas web y resultan la manera ms
rpida de ofrecer al visitante una va para el contacto con el
propietario de la pgina.
Para colocar un enlace dirigido hacia una direccin de correo
colocamos mailto: en el atributo href del enlace, seguido de la
direccin de correo a la que se debe dirigir el enlace.
<a href="mailto:eugim@desarrolloweb.com">eugim@desa-
rrolloweb.com</a>
Este enlace se puede ver en funcionamiento aqu: eugim@de-
sarrolloweb.com
69
Consejo: Cuando coloques enlaces a direcciones de correo
procura indicar 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 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 inte-
rrogante, la palabra subject, un signo igual (=) y el asunto en
concreto.
<a href="malito:eugim@desarrolloweb.com?subject=contac-
to 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 colabora@desarrolloweb.com.
<a href="mailto:eugim@desarrolloweb.com?subject=contac-
to a travs de la pagi-
na&cc=colabo-
ra@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. Lgicamente, si no tiene servicio de correo en el or-
denador 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 con-

tacto con el navegante.
Enlaces con archivos
Este no es un tipo de enlace propiamente dicho, pero lo seala-
mos aqu porque son un tipo de enlaces muy habitual y que
presenta alguna complicacin para el usuario novato.
El mecanismo es el mismo que hemos conocido en los enla-
ces locales y los enlaces remotos, con la nica particularidad
de que en vez de estar dirigidos hacia una pgina web est di-
rigido hacia un archivo de otro tipo.
70
Si queremos enlazar con un archivo mi_fichero.zip que se en-
cuentra 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 des-
cargar el fichero, haciendo la pregunta tpica de "Qu quere-
mos hacer con el archivo. Abrirlo o guardarlo en disco".
Podemos ver un ejemplo de enlace a archivo con su consigu-
iente ventana de descarga de un archivo.
Consejo: No colocar en Internet archivos ejecutables directa-

mente 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. Noso-
tros generalmente desearemos que el usuario lo guarde
en disco y no lo ejecute hasta que lo tenga en su disco du-
ro. Si se decido a abrirlo en vez de guardarlo simplemen-
te lo pondr en marcha y cuando lo pare no se quedar
guardado en su sistema. Si los archivos estn comprimi-
dos obligaremos al usuario a descomprimirlos en su disco
duro antes de ponerlos en marcha, con lo que nos asegu-
ramos 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 reco-
noce el tipo de archivo, es el responsable de abrirlo utilizando
el conector adecuado para ello. As, si por ejemplo enlazamos
con un PDF pondr el programa Acrobat Reader en funcionam-
iento para mostrar los contenidos. Si enlazamos con un mundo
VRML pondr en marcha el plug-in que el usuario tenga insta-
lado 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>
71
Parte 18
Atributo nofollow en los enlaces
72
El atributo rel=nofollow, de los enlaces, sirve para que los bus-
cadores no continen reastreando a partir de esos enlaces.
Dejemos aqu una pequea resea sobre un atributo que se es-
t convirtiendo en esencial en los enlaces y que no habamos
comentado en nuestro 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 para definir o marcar el comportamiento de los buscado-
res cuando rastrean nuestra pgina web en busca de conteni-
dos para indexarlos. Por defecto, cuando un buscador visita
una pgina web va recorriendo todos sus enlaces y va indexan-
do su contenido en su base de datos de pginas. Esto es algo
que hacen automtica y peridicamente. Ocurre tanto con los
enlaces internos a otras pginas de nuestro sitio como con los
enlaces externos a otras pginas web. Los motores que reco-
rren las webs de enlace a enlace, se llaman araas.
Ahora bien, nosotros podemos, a travs del atributo rel="no-
follow", 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 atribu-
to fue creado por iniciativa de Google y Blogger en 2005, como
una idea para detener el spam de enlaces en sitios web que
permiten a los usuarios la participacin.
Una prctica comn de las personas que pretenden promoc-
ionar una pgina web es realizar comentarios o participaciones
en pginas web, en las que insertan enlaces a sus propios sit-
ios. Esto se conoce como spam de enlaces, o con el trmino de
spamdexing.
Con el atributo rel="nofolow" se pretenden mitigar los efec-
tos de ese tipo de spam en los sitios como foros, blogs, o cualq-
uier pgina que permita la interaccin con la comunidad de vi-
sitantes. Algunas pginas como la Wikipedia lo utilizan en to-
dos los enlaces externos.
73
Actualmente el atributo ren=nofollow est bajo patente, aun-
que esta est liberada de royalties, lo que quiere decir que se
puede utilizar sin limitacin y sin tener que pagar nada.
Cmo interpretan los buscadores el Nofollow
El atributo es tenido en cuenta no slo por el motor de indexa-
cin (araa) del buscador Google, sino tambin por otras ara-
as de buscadores tan importantes como Yahoo! o MSN. Aunq-
ue 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 enlazado. 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 ho-
ra de trabajar 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 trabajan en el posicionamiento en buscadores, lo tienen
muy en cuenta en sus tcnicas para su trabajo del da a da.
Existen diversas tcnicas que utilizan este atributo para reali-
zar promocin de webs, como la que explicamos en el artculo
Arriesgada pero excelente tcnica SEO usando rel=nofollow,
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 posicionamiento 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 robots.txt, que ya hemos comentado anterior-
mente en DesarrolloWeb.com.
74
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 pgi-
nas, sino tambin qu formatos grficos son adecuados en cada
caso y cmo podemos optimizar las imgenes para reducir el
tiempo de carga de las webs.
75
Parte 19
Imgenes en HTML
76
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 nues-
tra informacin y darle un aire mucho ms esttico. El abuso
no obstante puede conducirnos a una sobrecarga que se tradu-
ce en una distraccin para el navegante, quien tendr ms difi-
cultad en encontrar la informacin necesaria.
El uso de imgenes tambin tiene que ser realizado con cuida-
do 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 reco-
mendable siempre optimizar las imgenes para Internet, hac-
iendo que su tamao en bytes sea lo mnimo posible, para faci-
litar 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 aplica-
ciones como Paint Shop Pro, Photoshop o Gimp. Tampoco ex-
plicaremos las particularidades de cada tipo de archivo: GIF,
JPG o PNG y la forma de optimizar nuestras imgenes. Un capi-
tulo posterior al respecto ser dedicado a este menester: For-
matos grficos para pginas web.
Las imgenes son almacenadas en forma de archivos, princi-
palmente GIF (para dibujos) o JPG (para fotos). Estos archivos
los podemos obtener desde diversas vas, como por ejemplo
nuestra cmara digital, aunque tambin pueden ser creados
por nosotros mismos con algn editor grfico o pueden ser des-
cargados gratuitamente en sitios web especializados.
As pues, en estos primeros captulos nos limitaremos a expli-
car 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 correspond-
iente y en ella hemos de especificar obligatoriamente el para-
dero de nuestro archivo grfico mediante el atributo src
(source).
77
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 para los enlaces. Las reglas siguen siendo las mismas, lo
nico que cambia es que, en lugar de una pgina destino, el
destino es un archivo grfico.
Aparte de este atributo, indispensable obviamente para la vi-
sualizacin 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 brev-
sima descripcin de la imagen. Esta etiqueta no es indispensa-
ble 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 descripcin, 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 usua-
rios navegan por la red con una opcin del navegador que de-
sactiva el muestreo de imgenes, con lo que tales personas po-
drn siempre saber de qu se trata el grfico y eventualmente
cambiar a modo con imgenes para visualizarla.
Adems, determinadas aplicaciones para discapacitados o te-
lfonos vocales que no muestran imgenes ofrecen la posibili-
dad de leerlas por lo que nunca esta de ms pensar en estos
colectivos.
En general podemos considerar como aconsejable el uso de
este atributo salvo para imgenes de poca importancia y abso-
lutamente indispensable 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 an-
cho y alto. Estas dimensiones pueden obtenerse a partir del
propio diseador grafico o bien haciendo clic con el botn de-
recho sobre la imagen vista por el navegador para luego elegir
propiedades sobre el men que se despliega.
78
El hecho de explicitar en nuestro cdigo las dimensiones de
nuestras imgenes ayuda al navegador a confeccionar la pgi-
na de la forma que nosotros deseamos antes incluso de que las
imgenes hayan sido descargadas.
As, si las dimensiones de las imgenes han sido proporciona-
das, durante el proceso de carga, el navegador reservara el es-
pacio correspondiente a cada imagen creando una maqueta-
cin correcta. El usuario podr comenzar a leer tranquilamen-
te el texto sin que este se mueva de un lado a otro cada vez
que una imagen se cargue.
Adems de esta utilidad, el alterar los valores de estos dos
atributos, es una forma inmediata de redimensionar nuestra
imagen. Este tipo de utilidad no es aconsejable dado que, si lo
que pretendemos es aumentar el tamao, la perdida de calidad
de la imagen ser muy sensible. Inversamente, 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 peq-
ueos redimensionando la imagen por medio de estos atributos
a partir de archivos de tamao descomunal. Hay que pensar
que el tamao de una imagen con unas dimensiones de la mi-
tad no se reduce a la mitad, sino que resulta ser aproximada-
mente 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 dese-
amos. Es particularmente til cuando deseamos eliminar el
borde que aparece cuando la imagen sirve de enlace. En dicho
caso tendremos que especificar 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 resolucin. Cuando el navegador detecta que la imagen
tiene este atributo primero descarga y muestra la imagen de
79
baja resolucin (que ocupa muy poco y que se transfiere muy
rpido). Posteriormente descarga y muestra la imagen de reso-
lucin adecuada (sealada con el atributo src, que se supone
que ocupar ms y ser ms lenta de transferir).
Este atributo est en desuso, aunque supone una ventaja
considerable para que la descarga inicial de la web se realice
ms rpido y que un visitante pueda ver una muestra de la ima-
gen mientras se descarga la imagen real.
Truco: Utilizar imagenes como enlaces

Ni que decir tiene que una imagen, lo mismo que un texto,
puede servir de enlace. Vista la estructura de los enlaces pode-
mos muy fcilmente adivinar el tipo de cdigo necesario:
<a href="archivo.html"><img src="imagen.gif"></a>
Ejemplo prctico
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 tama-
o originar y con un borde de 3 pixeles.
En otra ocasin la imagen aparecer sin borde, con su
misma altura y con una anchura superior a la original
Tambin mostraremos la imagen sin borde, con su misma
anchura y con una altura superior a la original
Por ltimo, mostraremos la imagen con una altura y an-
chura mayores que las originales, pero proporcionalmen-
te igual que antes.
Vamos a utilizar esta imagen para hacer el ejercicio:
Las dimensiones originales de la imagen son 28x21, as que es-

te 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"
80
border="0">
 
 
<img src="img1.gif" width="56" height="42" alt="Doble gran-
de" border="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 mu-
chas otras cosas adicionales sobre las imgenes y la creacin
de webs: Videotutorial HTML: imgenes.
81
Parte 20
Alineacin de imgenes con
HTML
82
Explica la manera de alinear la imagen dentro de la pgina:
centrarla, colocarla a la derecha, a la izquierda, etc.
Por Rubn Alvarez
Vimos en su momento el atributo align que nos permita aline-
ar el texto a derecha, izquierda o centro de nuestra pgina. Di-
jimos que este atributo no era exclusivo de la etiqueta si-
no que poda ser encontrado en otro tipo de etiquetas.
Pues bien, <img> resulta ser una de esas etiquetas que acep-
tan este atributo aunque en este caso el funcionamiento resulta
ser diferente.
Para alinear una imagen horizontalmente podemos hacerlo
de la misma 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 etiqueta 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 rellena-
mos con texto el lado opuesto. De esta forma embebemos nues-
tras 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 po-
niendo 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 izquier-
da de la imagen. Sigo poniendo texto para que se vea el efecto,
Bla bla bla bla bla bla bla
83

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

Quedara as:
da 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 espa-
cio 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:
da.
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 ali-
neacin vertical de la imagen.
Supongamos que escribimos una lnea al lado de nuestra ima-
gen. Esta lnea puede quedar por ejemplo arriba, abajo o al me-
dio de la imagen. Asimismo, puede que en una misma lnea ten-
gamos 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 de-
cir que, si hay una imagen ms alta, ambas imgenes presenta-
ran el borde superior a la misma altura.
84
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.
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 complica-
das, pueden ser ms fcilmente asimiladas a partir con un poco
de practica.
Nos queda explicar como introducir debajo de la imagen un
pie de foto o explicacin. Para ello tendremos que ver antes de
nada las tablas, en el prximos captulos
85
Parte 21
Formatos grficos para pginas
web
86
Presenta los formatos grficos utilizados en las pginas web, el
GIF, el JPG y PNG. Hace hincapi en los dos primeros, resum-
iendo sus caractersticas y enseando a optimizar los ficheros.
El componente grfico de las pginas web tiene mucha impor-
tancia, es el que hace que estas sean vistosas y el que nos per-
mite aplicar nuestra creatividad para hacer del diseo de sitios
una tarea agradable. Es tambin una herramienta para acercar
los sitios al mundo donde vivimos, si embargo, es tambin el
causante de errores graves en las pginas y hacer de estas, en
algunos casos, un martirio para el visitante.
Las nociones bsicas para el uso de archivos grficos son sen-
cillas, conocerlas, aunque sea ligeramente, nos ayudar a crear
sitios agradables y rpidos. No cometer errores en el uso de
las imgenes es fundamental, aunque no seas un diseador y
las imgenes que utilices sean feas, utilzalas bien y as estars
haciendo ms agradable la visita a tus pginas.
Tipos de archivos
En Internet se utilizan principalmente dos tipos de archivos
grficos GIF y JPG, pensados especialmente para optimizar el
tamao que ocupan en disco, ya que los archivos pequeos se
transmiten ms rpidamente por la Red.
El formato de archivo GIF se usa para las imgenes que ten-
gan dibujos, mientras que el formato JPG se usa para las foto-
grafas. Los dos comprimen las imgenes para guardarlas. La
forma de comprimir la imagen que utiliza cada formato es lo
que los hace ideales para unos u otros propsitos.
Adicionalmente, se puede usar un tercer formato grfico en
las pginas web, el PNG. Este formato no tiene tanta acepta-
cin como el GIF o JPG por varias razones, entre las que desta-
can el desconocimiento del formato por parte de los desarrolla-
dores, que las herramientas habituales para tratar grficos (co-
mo 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 proble-
mas han pasado y ya slo Internet Explorer 6 tiene algunos fa-
llos cuando trata con PNG, pero la aceptacin actual es ms
87
que suficiente para incorporarlo a nuestras posibilidades rea-
les de trabajo con formatos y optimizacin de archivos.
A continuacin se puede ver una tabla comparativa de las
principales caractersticas de los formatos grficos para crear
pginas web:
Formato GIF
Un logotipo es un ejemplo claro de imagen GIF
A parte de ser un archivo ideal para las imgenes que estn di-
bujadas tiene muchas otras caractersticas que son importan-
tes y tiles.
Compresin: Es muy buena para dibujos, como ya hemos di-
cho. Incluso puede ser interesante si la imagen es muy peque-
a, aunque sea una foto.
Parte de esta imagen es transparente
Transparencia: es una utilidad para definir ciertas partes del
dibujo como transparentes. De este modo podemos colocar las
imgenes sobre distintos fondos sin que se vea el cuadrado
donde est inscrito el dibujo, viendose en cambio la silueta del
dibujo en cuestin.
Para crear un gif transparente debemos utilizar un programa
de diseo grfico, con el podemos indicar qu colores del dibu-
jo queremos que sean transparentes. Generalmente, definimos
la transparencia cuando vamos a guardar el grfico.
Colores: Con este formato grfico podemos utilizar paletas,
conjuntos, de 256 colores o menos. Este es un detalle muy im-
portante, puesto que cuantos menos colores utilicemos en la
imagen, por lo general, menos ocupar el archivo. En ocasio-
nes, 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 colo-
res al guardar el archivo, en otros lo hacemos mientras crea-
mos el grfico.
16 8
32 colores
colores colores
Imagen tomada con distintas paletas de colores.
Se puede apreciar como con pocos colores se ve
88
bien el grfico y como 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 algo-
ritmo de compresin hace ideal este formato para guardar fo-
tografas. Adems, con JPG podemos definir la calidad de la
imagen, con calidad baja el fichero ocupar menos, y
viceversa.
Intento de transparencia en JPG. Pulsar para ampliar
Transparencia: Este formato no tiene posibilidad de crear
reas transparentes. Si deseamos colocar una imagen con un
rea que parezca transparente procederemos as: con nuestro
programa de diseo grfico haremos que el fondo de la imagen
sea el mismo que el de la pgina donde queremos colocarla. En
muchos casos los fondos de la imagen y la pgina parecern el
mismo.
Colores: JPG trabaja siempre con 16 millones de colores, ideal
para fotografas.
Optimizar ficheros
Para que las imgenes ocupen lo menos posible y se transfie-
ran rpidamente por la Red debemos aprender a optimizar los
ficheros grficos. Para ello debemos hacer lo siguiente:
Para los archivos GIF: Reduciremos el nmero de colores
de nuestra paleta. Esto se hace con nuestro editor grfico, en
muchos casos podremos hacerlo al guardar el archivo.
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.
89
JPG
calidad 0
3 KB
JPG
calidad 20
5,9 KB
JPG
calidad 50
10 KB
Photoshop es una herramienta excelente para optimizar fiche-

ros. Viendo varias copias podemos elegir la ms adecuada.
Es imprescindible disponer para optimizar la imagen de una
herramienta buena que nos permita configurar estas caracte-
rsticas de la imagen con libertad y fcilmente. Photoshop 5.5 o
6 es un programa bastante recomendable, 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 configura-
bles, 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 per-
miten optimizar estas imgenes de manera sorprendente. Una
vez hemos creado la imagen la pasamos por estos programas y
nos comprimen aun ms el archivo, hacindolo rpido de trans-
ferir y, por tanto, ms optimo para Internet. Al ser estas utili-
dades 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 recomendamos ver el Vdeo sobre Formatos grficos
para pginas web.
90
Parte 22
Mapas de imgenes con HTML
91
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 ele-
mento bsico de navegacin del web: El enlace hipertexto. He-
mos visto que estos enlaces son palabras, textos o imgenes
que, al pinchar sobre ellos, nos envan a otras pginas o zonas.
Los mapas de imgenes es un nuevo planteamiento de navega-
cin que incorpora una serie de enlaces dentro de una misma
imagen. Estos enlaces son definidos por figuras geomtricas y
funcionan exactamente del mismo modo que los otros enlaces.
Podis ver el funcionamiento de uno en este enlace.
En un principio, estos mapas no eran directamente reconoci-
dos por los navegadores y recurran a tecnologas de lado del
servidor para ser visualizados. Hoy en da pueden ser imple-
mentados por medio de cdigo HTML tal y como veremos en
este capitulo.
Podemos utilizar estos mapas, por ejemplo, en portadas don-
de damos a conocer cada una de las secciones del sitio por me-
dio de una imagen. Tambin puede ser muy prctico en mapas
geogrficos donde cada ciudad, provincia o punto cualquiera
representa un enlace a una pgina.
En cualquier caso, el uso de estos mapas ha de estar sistem-
ticamente acompaado de un texto explicativo que d a cono-
cer al usuario la posibilidad de hacer clic sobre los distintos
puntos de la imagen. Frases como "Haz clic sobre tal icono pa-
ra acceder a tal informacin" resultan muy indicativas a la hora
de hacer intuitiva la navegacin por los mapas de imgenes.
Por otro lado, no esta de ms introducir esa misma explicacin
en el atributo alt de la imagen.
As pues, un mapa de imagen esta compuesto de dos partes:
La imagen propiamente dicha que estar situada como de
costumbre dentro de la etiqueta <body> de nuestro do-
cumento HTML.
Un cdigo, situado en el interior de la etiqueta <map>,
que delimitara por medio de lneas geomtricas imaginar-
ias cada una de las reas de los enlaces presentados en la
imagen.
92
Las lneas geomtricas que delimitan los enlaces, es decir, las
reas de los enlaces, han de ser definidas por medio de coorde-
nadas. Cada imagen es definida por unas dimensiones de an-
cho (X) y alto (Y) y cada punto de la imagen puede ser definido
por tanto diciendo a que altura (x) y anchura (y) nos encontra-
mos. De este modo, la esquina superior izquierda corresponde
a la posicin 0,0 y la esquina inferior derecha corresponde a
las coordenadas X,Y. Si deseamos saber qu coordenadas co-
rresponden a un punto concreto de nuestra imagen, lo mejor es
utilizar un programa de diseo grafico como Photoshop o Paint
Shop Pro.
La mejor forma de explicar el funcionamiento de este tipo de
mapas es a partir de un ejemplo prctico. Supongamos que te-
nemos 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

elementos que la componen. Para ello, definiremos nuestros
enlaces como zonas circulares de pequeo tamao que sern
distribuidas a lo largo y ancho de la imagen.
Veamos a continuacin el cdigo que utilizaremos:
<table border=0 width=450><tr><td align="center">
<map name="mapa1">
<area alt="Pulsa para ver la pgina de mis amigos" sha-
pe="CIRCLE" coords="44,36,29" href="#">
<area alt="Pulsa para ver mi novia" shape="CIRCLE" co-
ords="140,35,31" href="#">
<area alt="Pulsa para conocer a mi Familia" shape="circle"
coords="239,37,30" href="#">
<area alt="Pulsa para conocer mi trabajo" shape="CIRCLE"
coords="336,36,31" href="#">
</map>
<img src="images/html/mapa1.gif" width="380" height="72"
alt="Mapa de imgenes. Pulsa en cada una de los crculos."
border="0" usemap="#mapa1">
 
Pulsa en los crculos para acceder a las secciones!
</td></tr></table>
93
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 comple-
to si creasemos todas las pginas donde enlazar las reas y co-
locasemos los href dirigidos hacia dichas pginas. Como no he-
mos hecho las pginas "destino" hemos colocado enlaces que
no llevan a ningn sitio, que, como puedes ver, se indica con el
caracter "#".
Podis observar, tal y como hemos explicado antes, que nues-
tro mapa consta de dos partes principales: la imagen y la etiq-
ueta <map> que define las reas de cada enlace.
Cada rea se indica con una etiqueta <area>, que tiene los
siguientes atributos:
alt
Para indicar un texto que se mostrar cuando situemos el ratn
en el rea.
shape
Indica el tipo de rea.
coords
Las coordenadas que definen el rea. Sern un grupo de valo-
res numricos distintos dependiendo del tipo de rea (shape)
que estemos definiendo.
href
Para indicar el destino del enlace correspondiente al rea.
En este caso hemos utilizado unas reas circulares
(shape="CIRCLE"), que se definen indicando el centro del
crculo -una coordenada (X,Y) y el radio, que es un nmero en-
tero que se corresponde con el nmero de pixels desde el cen-
tro hasta el borde del crculo.
Tipos de reas: shape distintas
Existen tres tipos de reas distintas, suficientes para hacer ca-
si cualquier tipo de figura. En el dibujo que acompaa estas l-
neas se puede ver una representacin de las reas, que detalla-
mos a continuacin.
shape="RECT"
Crea un rea rectangular. Para definirla se utilizan las coorde-
nadas de los puntos de la esquina superior izquierda y la
94
esquina inferior derecha. Tal como estn nombradas dichas co-
ordenadas 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 cen-
tro del crculo y el radio. A la vista de nuestro dibujo, la etique-
ta de un rea circular tendra esta forma:
<area shape="CIRCLE" coords="X1,Y1,R" href="#">
shape="POLY"
Este tipo de rea, poligonal, es la ms compleja de todas. Un
polgono queda definido indicando todos sus puntos, pero aten-
cin, los tenemos que indicar en orden, siguiendo el camino
marcado por el permetro del polgono. A la vista del dibujo y
los nombres que hemos dado a los puntos del polgono, la etiq-
ueta <area> quedara de esta forma.
<area shape="POLY" coords=" X1,Y1, X2,Y2, X3,Y3, X4,Y4"
href="#">
95
Tablas en HTML
Las tablas fueron muy importantes en una poca para maq-
uetar pginas web. Hoy lo adecuado es utilizarlas slo para
presentar informacin tabulada, es decir, colocada en una reji-
lla de filas y columnas. En los siguientes artculos aprendere-
mos todo sobre las tablas en HTML.
96
www.feedbooks.com
Food for the mind
97

Manual de HTML de Alonso Cornejo

Încărcat de

Informații document

Drepturi de autor

Formate disponibile

Partajați acest document

Partajați sau inserați document

Opțiuni de partajare

Vi se pare util acest document?

Este necorespunzător acest conținut?

Drepturi de autor:

Formate disponibile

Manual de HTML de Alonso Cornejo

Încărcat de

Drepturi de autor:

Formate disponibile

Manual de HTML

Introduccin al manual de HTML y al lenguaje de modelado

Consejo: Utiliza siempre la misma extensin en tus archivos

Partes de un documento HTML

Consejo: Utiliza nombres en tus archivos que tengan algunas

Nota: En la disputa por ser el navegador ms usado, en la act-

Nota: Tambin puedes abrir el archivo si accedes al directorio

Por otro lado, los elementos que colocamos entre la etiqueta

Posible problema: Al utilizar el Block de Notas en Windows

Cmo realizar el formato de textos que se colocan en una p-

Nota: Existen otras etiquetas que no tienen su correspondien-

Para una justificacin al centro:

Para justificar a la derecha:

Como veis, en cada caso el atributo align toma determinados

Nota: Los atributos tienen sus valores indicados entre comillas

Consejo: No debemos utilizar las etiquetas de encabezado pa-

Nota: Qu diferencia hay entre <b> y <strong>?

Consejo: Cuando anides etiquetas HTML hazlo correctamente.

Debemos evitar cdigos como el siguiente:

Esto es muy aconsejable, aunque los navegadores entiendan

Nota: Aqu tenemos un ejemplo de atributo cuyo valor debe es-

face=Comic Sans MS,arial,verdana

se entendera que face=Comic, pero no se tendra en cuenta

0=0 4=4 8=8 C=12

Para conseguir un color, mezclaremos valores de esta mane-

Por ltimo, te ofrecemos unos archivos con programillas en

La imagen se llama fondo.jpg y suponemos que se encuentra

Consejo: siempre que coloquemos una imagen de fondo, debe-

&lt; < &gt; >

Caracteres especiales del HTML 3.2

Referencia: Hay un videotutorial en DesarrolloWeb.com que

Referencia: Todos los tipos de listas los hemos explicado en

Pases del mundo

Nota: En algunos navegadores no funciona la opcin de camb-

En caso de que no funcione siempre podemos construir la lista

Reglas de comportamiento en el trabajo

Nota: Recordamos que en algunos navegadores no funciona la

<p>Ordenamos por letras</p>

Diccionario de la Real Academia

Fijaos en que cada lnea <dd> esta desplazada hacia la izqu-

Primer nivel de desplazamiento

Enlace con final de este documento, para que probis su func-

Para clarificar este punto podemos hacer un ejemplo a partir

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

Nota: El visitante de la pgina necesitar tener configurada

Tenemos un artculo en desarrolloweb que habla sobre el con-

Consejo: No colocar en Internet archivos ejecutables directa-

Truco: Utilizar imagenes como enlaces

Las dimensiones originales de la imagen son 28x21, as que es-

Nota: A lo largo de los prximos artculos veremos muchas

GIF 256 colores - 10,8 KB

GIF 32 colores - 5,5 KB

Photoshop es una herramienta excelente para optimizar fiche-

Nota: Si te interesa reforzar todos los conceptos tratados en

Pulsa en los crculos para acceder a las secciones!

Dentro de ella queremos introducir un enlace a cada uno de los

S-ar putea să vă placă și

< < > >