Manual de HTML

En este Manual de HTML conocers el lenguaje de marcacin de principio a

fin. HTML es el lenguaje utilizado como base para crear las pginas web y
representa el conocimiento bsico inicial que todo desarrollador web debe
tener.

En este manual explicamos en profundidad como desarrollar pginas bsicas

con HTML, desde cero, comenzando por lo ms elemental y llegando a los
temas ms avanzados.

Introduccin a HTML
Introduccin al manual de HTML y al lenguaje de modelado
de pginas web. Veremos qu es HTML y las primeras
nociones que nos ayudarn a realizar las primeras pruebas
de creacin de una pgina web sencilla.
1.- Prlogo al manual de HTML
A quin va dirigido este manual y las lecturas aconsejadas antes de
abordarlo.
2.- Introduccin al HTML
Las primeras cosas que debes saber sobre HTML: historia, objetivos y
dems conocimientos donde sentar las bases del manual.
3.- Sintaxis del HTML
Descripcin de la sintaxis con la que se trabaja en el lenguaje HTML, as
como la estructura que tendr el documento bsico HTML.
4.- Tu primera pgina
Vamos a ver cmo se hace una pgina muy sencilla en HTML, que sirva de
prctica a los debutantes.
Formatos bsicos con HTML
Cmo realizar el formato de textos que se colocan en una
pgina web. Aprende a utilizar tus primeras etiquetas HTML
y atributos para definir los contenidos de la pgina y
aplicar un formato bsico.
5.- Formato de prrafos en HTML
Cmo colocar prrafos y saltos de lnea en pginas web. Tambin vemos los
encabezados como prrafos que sirven de titulo.
6.- Formateando el texto
Vemos como colocar negritas, itlicas, subrayados, subndices y
suprendices.
7.- Color, tamao y tipo de letra
Seguimos aprendiendo etiquetas que nos sirven para formatear el texto.
8.- Los colores y HTML
En este reportaje tratamos de acercarte todos los detalles relativos al buen
uso de colores en HTML. Colores compatibles con todos los sistemas.
9.- Atributos para pginas
Explicamos una serie de atributos que se aplican de manera global a toda la
pgina, como el color de fondo el del texto, de los enlaces, mrgenes, etc.
10.- Caracteres especiales
Una referencia til, y una lista completa de los caracteres especiales del
HTML.
Listas en HTML
A continuacin comenzaremos a explicar las listas de
HTML que implican varias etiquetas para crear su
estructura. Veremos varios tipos de listas que se pueden
utilizar para diversos objetivos.
11.- Listas I - Listas desordenadas
Vemos lo que son las listas y sealamos los tres tipos que hay. Estudiamos
las listas desordenadas.
12.- Listas II - Listas ordenadas
Estudiamos otro tipo de listas: las listas ordenadas.
13.- Listas III - Listas de definicin
Vemos las listas de definicin y aprendemos a anidar listas para crear
estructuras lista ms complejas.
Todo sobre los enlaces en HTML
Los enlaces son los elementos que nos permiten navegar
por las pginas HTML y son tan importantes que la web no
tendra sentido sin ellos. Dedicaremos varios captulos a
explorar los distintos tipos de enlaces, sus usos y diversos
consejos para hacer pginas navegables.
14.- Enlaces en HTML
Vemos qu son los enlaces en HTML y los distintos tipos.
15.- Enlaces internos
Los enlaces HTML que se hacen con otras partes de la misma pgina.
16.- Enlaces locales
Enlaces HTML con otras pginas del mismo sitio web.
17.- Enlaces externos, de correo y hacia archivos
Vemos tres tipos de enlaces. Los dirigidos a otras pginas de otros webs, a
direcciones de correo y a ficheros externos.
18.- Atributo nofollow en los enlaces
El atributo rel=nofollow, de los enlaces, sirve para que los buscadores no
continen reastreando a partir de esos enlaces.
Imgenes, formatos grficos e optimizacin
Veremos todo lo que los creadores de webs deben conocer
sobre las imgenes, no slo cmo incluir imgenes en las
pginas, sino tambin qu formatos grficos son
adecuados en cada caso y cmo podemos optimizar las
imgenes para reducir el tiempo de carga de las webs.
19.- Imgenes en HTML
Vemos cmo colocar una imagen en una pgina web y algunos atributos
bsicos para asignarle estilos a las imgenes en HTML.
20.- Alineacin de imgenes con HTML
Explica la manera de alinear la imagen dentro de la pgina: centrarla,
colocarla a la derecha, a la izquierda, etc.
21.- Formatos grficos para pginas web
Presenta los formatos grficos utilizados en las pginas web, el GIF, el JPG y
PNG. Hace hincapi en los dos primeros, resumiendo sus caractersticas y
enseando a optimizar los ficheros.
22.- Mapas de imgenes con HTML
Explicamos detalladamente el proceso para crear mapas de imgenes, osea,
imgenes que tienes varios enlaces asociados en distintas reas.
Tablas en HTML
Las tablas fueron muy importantes en una poca para
maquetar pginas web. Hoy lo adecuado es utilizarlas slo
para presentar informacin tabulada, es decir, colocada en
una rejilla de filas y columnas. En los siguientes artculos
aprenderemos todo sobre las tablas en HTML.
23.- Tablas en HTML
Vemos lo que son las tablas, para que sirven y en qu casos podemos
utilizarlas. Vemos la tabla ms simple posible.
24.- Tablas en HTML. Atributos de la tabla y
conclusin
Conocemos los atributos principales que le podemos asignar a la tabla de
modo general. Adems vemos varios ejemplos prcticos de construccin de
tablas.
25.- Bordes de tabla en HTML 4
Mostramos algunos atributos de table, vlidos en HTML 4, para definir el
borde de las tablas: especificar bordes de varios tipos, externos e internos.
26.- Agrupar filas o columnas de tablas con HTML 4
En HTML 4.0 podemos agrupar filas de una tabla, o columnas. Sirve para
especificar estilos especficos a esas filas o columnas.
Formularios en HTML
El trabajo con formularios es uno de los principales puntos
que debemos aprender en HTML. Hacen posible muchas de
las utilidades clave de una web, como el contacto de los
creadores de las pginas con los visitantes, as como
ciertos niveles de interaccin bsica y avanzada con el
usuario.
27.- Formularios HTML
Empezamos la explicacin de la creacin de formularios con el lenguaje
HTML.
28.- Elementos de Formularios. Campos de texto
Vemos detenidamente los distintos elementos de formulario que sirven para
introducir texto.
29.- Otros elementos de formulario
Explicamos la sintaxis y el funcionamiento de las cajas y listas de seleccin,
casillas de verificacin y botones de radio.
30.- Envo, borrado y dems en formularios HTML
Enseamos la manera de colocar botones de envo y borrado en formularios
HTML. Tambin conocemos los campos invisibles y los botones normales.
Adems, hacemos un ejemplo prctico.
31.- Etiquetas FIELDSET y LEGEND de formularios
Las etiquetas de HTML FIELDSET y LEGEND sirven para crear bloques de
elementos dentro de formularios.
Frames o marcos en HTML
Los frames en HTML, o marcos si preferimos el trmino en
espaol, son una manera de mantener fijas algunas partes
de la pgina, mientras se navega por las otras. Fueron en el
pasado un componente habitual de las pginas aunque hoy
en da se han quedado en desuso por diversas razones.
Veremos tambin un caso especial de frames, que se crea
con la etiqueta IFRAME, que es importante conocer porque
s se usa bastante actualmente.
32.- Frames en HTML
Introducin a los frames, un poco de historia y sus utilidades.
33.- Frames - Explicacin bsica
Explicamos los detalles generales y los ms bsicos sobre la creacin de
frames. Etiquetas FRAMESET Y FRAME.
34.- Frames - Creacin de una estructura simple
Ejemplo de la creacin de un frame simple para ilustrar lo aprendido hasta
ahora.
35.- Frames - Una pgina en cada marco
Vemos cmo seran las distintas pginas independientes que componen un
sitio creado con frames.
36.- Frames - Dirigir los enlaces
Explicacin sobre cmo dirigir el enlace al frame que deseemos que
actualice, que no tiene porque ser el mismo donde est situado.
37.- Frames - Anidar frames
Explicamos como se crean estructuras con frames ms complejas: anidacin
de frames.
38.- Frames - Atributos avanzados
Lista de atributos de las etiquetas frameset y frame con las que podemos
configurar la apariencia y caractersticas de los marcos.
39.- Ventajas e inconvenientes del uso de frames
Veamos una serie de cosas buenas y malas derivadas del uso de marcos o
frames a la hora de disear y utilizar un sitio web.
40.- Etiqueta Iframe
Explicamos detenidamente la etiqueta IFRAME de HTML y todos sus
atributos, con algn ejemplo de uso.
Lo nuevo en HTML 4.0
El estndar HTML 4.0 trajo consigo diversas etiquetas que
implementan nuevos elementos HTML, que podemos
incorporar en pginas web.
41.- Las nuevas etiquetas de HTML 4.0
En este artculo veremos estas nuevas etiquetas del estandar HTML 4.0.
42.- Las nuevas etiquetas de HTML 4.0 (1)
Veamos una serie de etiquetas para formatear el texto de las pginas HTML,
con una breve descripcin de cada una de ellas.
43.- Las nuevas etiquetas de HTML 4.0 (2)
Explicacin de las nuevas etiquetas de HTML 4.0 para uso en formularios.
Sonido en HTML
Veremos diversos modos de colocar un sonido de fondo en
pginas web y los tipos de archivo sonoro que son
adecuados para pginas web.
44.- Sonido en HTML I, introduccin
Este es el primer captulo de un manul de el sonido en la web.
45.- Sonido en HTML II, caractersticas del sonido
digital
Conceptos bsicos del sonido digital.
46.- Sonido en HTML (III)
Cules son los ficheros que podemos ejecutar desde el navegador y cuales
desde un programa especfico.
47.- Sonido en HTML (IV)
En este captulo veremos la manera de incluir los archivos de msica en el
HTML.
48.- Sonido en HTML (V)
En este captulo veremos el potencil de la etiqueta OBJECT.
Otros asuntos importantes y el futuro del HTML
Acabamos el manual con esta ltima parte en la que
trataremos algunos asuntos de vital importancia a la hora
de hacer pginas web profesionales. Adems veremos el
futuro del HTML, que vendr con la especificacin de HTML
5.
49.- Doctype HTML
Qu es el Doctype en los documentos HTML y XHTML. Vemos distintos tipos
de Doctype disponibles.
50.- Juego de caracteres, charset, del documento
HTML
Cmo y por qu debemos especificar el juego de caracteres, tambin
conocido como charset, en los documentos HTML.
51.- Etiqueta META robots
Explicacin de la etiqueta META robots y diferentes posibilidades de
configuracin.
52.- El futuro del desarrollo web: HTML 5
HTML 5 es una tecnologa creada para modernizar la web y el desarrollo de
aplicaciones web, online y offline, que aun tiene bastante camino por recorrer
para ser una realidad.
53.- Qu es HTML 5
Veremos qu es HTML 5, su previsin de tiempo para convertirse en una
especificacin recomendada y las novedades ms significativas que
proporcionar.
54.- Nuevos elementos de formularios en HTML5
Conociendo algunos de los nuevos elementos con los que podemos contar
en los formularios web a partir de HTML5.
55.- Las mejoras de los elementos INPUT de HTML5
Una breve descripcin de las nuevas caractersticas presentes en los
elementos de formulario INPUT en HTML5.
56.- Etiquetas nuevas de HTML5
Cules son las etiquetas nuevas del lenguaje HTML5, con una breve
descripcin sobre su utilidad y clasificacin.
Prlogo al manual de
HTML

A quin va dirigido este manual y las lecturas

aconsejadas antes de abordarlo.
Bienvenidos al manual de HTML de DesarrolloWeb. A travs de todos
estos captulos vamos a descubrir el lenguaje utilizado para la creacin de
pginas web: el Hyper Text Markup Language, ms conocido 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 directa y practica,

os recomendamos fervorosamente la lectura previa de nuestro manual Publicar
en Internet. A partir de esta gua, aprenderis los conceptos ms bsicos
necesarios para creacin de un sitio web. Tambin os permitir acceder a
este manual con unos conocimientos de base sobre HTML imprescindibles y
os dejara bien claro lo que su conocimiento aporta con respecto al simple
uso de editores de HTML. Adems, en dicho manual sobre la publicacin en
 Internet, explicamos tambin algo tan importante como qu hace falta
para subir una pgina web realizada que tenemos en nuestro ordenador 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 hasta el final, tendrs las siguientes habilidades
o conocimientos:
Capacidad para crear y publicar vuestro propio sitio web con un mnimo de
calidad.
Conocimientos de todo tipo sobre las tecnologas y herramientas empleadas en
el mbito de la Red.
Posiblemente una aficin que puede convertirse en pasin 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, enviando discusiones sobre HTML o bien en la lista de
correo de DesarrolloWeb.com.
Para quien no sepa nada sobre crear una pgina web, y le gusta que le
expliquen las cosas desde cero y de manera visual, recomendamos ver
el vdeo donde mostramos el proceso de creacin de la primera pgina
bsica. Adems, para complementar las explicaciones de este manual,
tambin recomendamos el videotutorial de HTML.

Finalmente, antes de comenzar con el temario, queremos daros una

referencia importante a la seccin HTML a fondo, donde publicamos todos
los contenidos que tienen que ver con HTML y donde encontrars este y
otros manuales relacionados con el lenguaje.

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

Introduccin al HTML

Las primeras cosas que debes saber sobre HTML:

historia, objetivos y dems conocimientos donde sentar
las bases del manual.
HTML es el lenguaje con el que se escriben las pginas web. Las
pginas web pueden ser vistas por el usuario mediante 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 imgenes y combinarlos
a nuestro gusto. Adems, y es aqu donde reside su ventaja con respecto a
libros o revistas, el HTML nos permite la introduccin de referencias a otras
pginas por medio de los enlaces hipertexto.

El HTML se cre en un principio con objetivos divulgativos. No se pens que

la web llegara a ser un rea de ocio con carcter multimedia, de modo que, el
HTML se cre sin dar respuesta a todos los posibles usos que se le iba a dar
y a todos los colectivos de gente que lo utilizaran en un futuro. Sin embargo,
pese a esta deficiente planificacin, si que se han ido incorporando
modificaciones con el tiempo, estos son los 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 superados con la
introduccin de otras tecnologas accesorias capaces de organizar, optimizar
y automatizar el funcionamiento de las webs. Ejemplos que pueden sonaros
son las CSS, JavaScript u otros. Veremos ms adelante en qu consisten
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 pgina, comprobar que esta puede ser leda
satisfactoriamente por todos los navegadores, o al menos, los ms utilizados.

Adems del navegador necesario para ver los resultados de nuestro trabajo,
necesitamos evidentemente otra herramienta capaz de crear la pgina en si.
Un archivo HTML (una pgina) no es ms que un texto. Es por ello que para
programar en HTML necesitamos un editor de textos.
 Es recomendable usar el Bloc de notas que viene con windows, u otro editor
de textos sencillo. Hay que tener cuidado con algunos editores ms
complejos como Wordpad o Microsoft Word, pues colocan su 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
nuestro cdigo y familiarizarnos lo antes posible con l. Siempre tendremos
tiempo ms delante de pasarnos a editores ms verstiles con la
consiguiente ganancia de tiempo.

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 como Homesite oUltraEdit.
Es importante tener claro todo ello puesto que en funcin de vuestros
objetivos puede que, ms que aprender HTML, resulte ms interesante
aprender el uso de una aplicacin para la creacin de pginas.
As pues, una pgina es un archivo donde est contenido el cdigo HTML en
forma de texto. Estos archivos tienen extensin .html o .htm (es indiferente
cul utilizar). De modo que cuando programemos en HTML lo haremos con
un editor de textos y guardaremos nuestros 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.

Sintaxis del HTML

Descripcin de la sintaxis con la que se trabaja en el

lenguaje HTML, as como la estructura que tendr el
documento bsico HTML.
El HTML es un lenguaje de marcas que basa su sintaxis en un elemento de
base al que llamamos etiqueta. A travs de las etiquetas vamos definiendo
los elementos del documento, como enlaces, prrafos, imgenes, etc. As
pues, un documento HTML estar constituido por texto y un conjunto de
etiquetas para definir la forma con la que se tendr que presentar el texto y
otros elementos en la pgina.
La etiqueta presenta frecuentemente dos partes:

Una apertura de forma general <etiqueta>

Un cierre de tipo </etiqueta>
Todo lo incluido en el interior de esa etiqueta sufrir las modificaciones que
caracterizan a esta etiqueta. As por ejemplo:

Las etiquetas <b> y </b> definen un texto en negrita. Si en nuestro

documento HTML escribimos una frase con el siguiente cdigo:
<b>Esto esta en negrita</b>
El resultado Ser:

Esto esta en negrita

Las etiquetas <p> y </p> definen un prrafo. Si en nuestro documento HTML
escribiramos:

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

<p>Ahora hemos cambiado de prrafo</p>
El resultado sera:

Hola, estamos en el prrafo 1

Ahora hemos cambiado de prrafo

Partes de un documento HTML

Adems de todo esto, un documento HTML ha de estar delimitado por la
etiqueta <html> y </html>. Dentro de este documento, podemos asimismo
distinguir dos partes principales:
El encabezado, delimitado por <head> y </head> donde colocaremos etiquetas
de ndole informativo como por ejemplo el titulo de nuestra pgina.
El cuerpo, flanqueado por las etiquetas <body> y </body>, que ser donde
colocaremos nuestro texto e imgenes delimitados a su vez por otras
etiquetas como las que hemos visto.
El resultado es un documento con la siguiente estructura:

<html>
<head>
Etiquetas y contenidos del encabezado
Datos que no aparecen en nuestra pgina pero que son importantes para
catalogarla: Titulo, palabras clave,...
</head>

<body>
Etiquetas y contenidos del cuerpo
Parte del documento que ser mostrada por el navegador: Texto e imgenes
</body>

</html>

Las maysculas o minsculas son

indiferentes al escribir etiquetas
A notar que las etiquetas pueden ser escritas con cualquier tipo de
combinacin de maysculas y minsculas. <html>, <HTML> o <HtMl> son la
misma etiqueta. Resulta sin embargo aconsejable acostumbrarse a
escribirlas en minscula ya que otras tecnologas que pueden convivir con
nuestro HTML (XML por ejemplo) no son tan permisivas y nunca viene mal
coger buenas costumbres desde el principio para evitar fallos triviales en un
futuro.

Tu primera pgina
Vamos a ver cmo se hace una pgina muy sencilla en
HTML, que sirva de prctica a los debutantes.
Podemos ya con estos conocimientos, y alguno que otro ms, crear nuestra
primera pgina. Para ello, abre tu editor de textos y copia y pega el siguiente
texto en un nuevo documento.
<html>
<head>
<title>Cocina Para Todos</title>
</head>

<body>
<p><b>Bienvenido,</b></p>
<p>Ests en la pgina <b>Comida para Todos</b>.</p>
<p>Aqu aprenders recetas fciles y deliciosas.</p>
</body>

</html>

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

Consejo: Utiliza nombres en tus archivos que tengan algunas normas bsicas para ahorrarte

disgustos y 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 bajo "_" te

puede ayudar a separar las palabras. Por ejemplo quienes_somos.html

Con el documento HTML creado, podemos ver el resultado obtenido a partir

de un navegador. Es conveniente, llegado a este punto, hacer hincapi en el
hecho de que no todos los navegadores son idnticos. Desgraciadamente,
los resultados de nuestro cdigo pueden cambiar de uno a otro por lo que
resulta aconsejable visualizar la pgina en varios. Generalmente se usan
Internet Explorer y Firefox como referencias ya que son los ms extendidos.

A decir verdad, en el momento que estas lneas son escritas, Internet

Explorer acapara la inmensa mayora de usuarios (90% ms o menos) y
Firefox esta relegado a un segundo plano. Esto no quiere decir que lo
debemos dejar totalmente de lado ya que el 10% de visitas que puede
proporcionarnos puede resultar muy importante para nosotros.

Nota: En la disputa por ser el navegador ms usado, en la actualidad otros productos vienen

tomando fuerza como Chrome, el navegador de Google. Para el que le interese este tema y

conocer datos reales sobre los porcentajes de uso de cada navegador, se puede leer uno de los

informes que publicamos peridicamente, como el ranking de uso de los navegadores en

noviembre de 2010.

Pues bien, volviendo al tema, una vez creado el archivo .html o .htm,
podemos visualizar el resultado de nuestra labor abriendo dicha pgina con
un navegador. Para hacerlo, la forma resulta diferente dependiendo del
navegador:

Si estamos empleando el Explorer, hemos de ir al barra de men, elegir

Archivo y seleccionar Abrir. Una ventana se abrir. 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 bsqueda nos permitir escudriar el contenido de
nuestro PC hasta dar con el archivo buscado.

Nota: Tambin puedes abrir el archivo si accedes al directorio donde lo guardaste. En l podrs

encontrar tu archivo HTML y vers que tiene como icono el logotipo de Netscape o el de Internet

Explorer. Para abrirlo simplemente hacemos un doble click sobre l.

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

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

comprobar la presencia del texto delimitado por la etiqueta <title>. Esta es
una de las funciones de esta etiqueta, cuyo principal cometido es el de servir
de referencia en los motores de bsqueda como 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. Este recurso es de extremada
importancia ya que nos permite ver el tipo de tcnicas empleadas por otros
para la confeccin de sus pginas.

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

ms en la descripcin de algunas de las etiquetas ms empleadas del HTML.

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 predeterminado guardar sus archivos con

extensin .txt y en realidad lo que est guardando en el disco duro es mi_pagina.html.txt

Para conseguir tener el control de las extensiones en el block de notas y en Windows en general

podemos acceder a MI-PC y en el men de Ver seleccionis "Opciones de carpeta". En la

ventana que sale pulsamos en la solapa "Ver" y nos permite deseleccionar una caja de seleccin

que 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 nos haga caso cuando le indicamos que grabe el archivo con

otra extensin que no sea .txt

Formato de prrafos en
HTML

Cmo colocar prrafos y saltos de lnea en pginas web.

Tambin vemos los encabezados como prrafos que
sirven de titulo.
En los captulos anteriores hemos presentado a titulo de ejemplo algunas
etiquetas que permiten dar formato a nuestro texto. En este capitulo veremos
con ms detalle las ms ampliamente utilizadas y ejemplificaremos algunas
de ellas posteriormente.
Formatear un texto pasa por tareas tan evidentes como definir los prrafos,
justificarlos, introducir vietas, numeraciones o bien poner en negrita, itlica...

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

Podemos tambin usar la etiqueta <br>, de la cual no existe su cierre

correspondiente (</br>), para realizar un simple retorno de carro con lo que
no dejamos una lnea en blanco sino que solo cambiamos de lnea.

Nota: Existen otras etiquetas que no tienen su correspondiente de cierre, como <img> para las

imgenes, las veremos ms adelante. Esto ocurre porque un salto de lnea o una imagen no

empiezan y acaban ms adelante sino que slo tienen presencia en un lugar puntual.

Podis comprobar que cambiar de lnea en nuestro documento HTML sin

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

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

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

<p align="left">Texto alineado a la izquierda</p>
El resultado seria:

Texto alineado a la izquierda

Para una justificacin al centro:

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

Texto alineado al centro

Para justificar a la derecha:

<p align="right">Texto alineado a la derecha</p>
cuyo efecto seria:

Texto alineado a la derecha

Como veis, en cada caso el atributo align toma determinados valores que son
escritos entre comillas. En algunas ocasiones necesitamos especificar
algunos atributos para el correcto funcionamiento de la etiqueta. En otros
casos, el propio navegador toma un valor definido por defecto. Para el caso
de align, el valor por defecto es left.
Nota: Los atributos tienen sus valores indicados entre comillas ("), pero si no los indicamos entre

comillas tambin funcionar en la mayora de los casos. Sin embargo, es aconsejable que

pongamos siempre las comillas para acostumbrarnos a utilizarlas, por dar homogeneidad a

nuestros cdigos y para evitar errores futuros en sistemas ms quisquillosos.

El atributo align no es exclusivo de la etiqueta <p>. Otras etiquetas muy

comunes, que veremos ms adelante, entre las cuales se introducen texto o
imgenes, suelen hacer uso de este atributo de una forma habitual.

Imaginemos un texto relativamente largo donde todos los prrafos estn

alineados a la izquierda (por ejemplo). Una forma de simplificar nuestro
cdigo y de evitar introducir continuamente el atributo align sobre cada una
de nuestras etiquetas es utilizando la etiqueta <div>.

Esta etiqueta por si sola no sirve para nada. Tiene que estar acompaada del
atributo align y lo que nos permite es alinear cualquier elemento (prrafo o
imagen) de la manera que nosotros deseemos.

As, el cdigo:

<p align="left">Parrafo1</p>
<p align="left"> Parrafo3</p>
<p align="left"> Parrafo2</p>
es equivalente a:
<div align="left">
<p>Parrafo1</p>
<p>Parrafo2</p>
<p>Parrafo3</p>
</div>
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 proponer un
ejercicio que podis resolver en vuestros ordenadores. Simplemente
queremos construir una pgina que tenga, por este orden:
2 Prrafos centrados
3 Prrafos alineados a la derecha
Un salto de lnea triple
1 prrafo alineado a la izquierda

No vamos a escribir en esta ocasin el cdigo fuente del ejercicio.

Podemos verlo en funcionamiento en nuestro navegador y en la ventana
podemos obtener el cdigo fuente seleccionando en el men Ver la opcin
Cdigo fuente.

Ver el ejercicio en marcha.

Encabezados
Existen otras etiquetas para definir prrafos especiales, formateados como
ttulos. Son los encabezados o Header en ingls. Como decimos, son
etiquetas que formatean el texto como un titular, para lo cual asignan un
tamao mayor de letra y colocan el texto en negrita.
Hay varios tipos de encabezados, que se diferencian en el tamao de la letra
que utilizan. La etiqueta en concreto es la <h1>, para los encabezados ms
grandes, <h2> para los de segundo nivel y as hasta <h6> que es el
encabezado ms pequeo.

Los encabezados implican tambin una separacin en prrafos, as que todo

lo que escribamos dentro de <h1> y </h1> (o cualquier otro 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 alineado 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>
<h1>Encabezado de nivel 1</h1>
<h2>Encabezado de nivel 2</h2>
<h3>Encabezado de nivel 3</h3>
<h4>Encabezado de nivel 4</h4>
<h5>Encabezado de nivel 5</h5>
<h6>Encabezado de nivel 6</h6>

</body>

</html>

Se puede ver el ejercicio en una pgina aparte.

Consejo: No debemos utilizar las etiquetas de encabezado para 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 encabezados son para colocar titulares en

pginas web y es el navegador el responsable de formatear el texto de manera que parezca un

titular. Cada navegador, pues, puede formatear el texto a su gusto con tal de que parezca un

titular.

Formateando el texto
Vemos como colocar negritas, itlicas, subrayados,
subndices y suprendices.
Adems de todo lo relativo a la organizacin de los prrafos, uno de los
aspectos primordiales del formateo de un texto es el de la propia letra.
Resulta muy comn y prctico presentar texto resaltado en negrita, itlica y
otros. Paralelamente el uso de ndices, subndices resulta vital para la
publicacin de textos cientficos. Todo esto y mucho ms es posible por
medio del HTML a partir de multitud de etiquetas entre las cuales vamos a
destacar algunas.
Negrita
Podemos escribir texto en negrita incluyndolo dentro de las etiquetas <b> y
</b> (bold). Esta misma tarea es desempeada por <strong> y </strong>
siendo ambas equivalentes. Nosotros nos inclinamos por la primeras por
simple razon de esfuerzo.
Escribiendo un cdigo de este tipo:

<b>Texto en negrita</b>
Obtenemos este resultado:

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

Aunque las dos etiquetas hacen el mismo efecto, tienen una peculiaridad que las hace distintas.

La etiqueta <b> indica negrita, mientras que la etiqueta <strong> indica que se debe escribir

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 Explorer y

Netscape son muy parecidos (tamao de letra grande y en negrita), pero otro navegador podra

colocar los encabezados con subrayado si le pareciese oportuno.

La diferencia entre <b> y <strong> se podr entender ahora. Mientras que <b> significa

simplemente negrita y todos los navegadores la interpretarn como negrita, <strong> es una

etiqueta que significa que se tiene que resaltar fuertemente el texto y cada navegador es el

responsable de resaltarlo como desee. En la prctica <strong> coloca el texto en negrita, pero
podra ser que un navegador decidiese resaltar colocando negrilla, subrayado y color rojo en el

texto.

Itlica
Tambin en este caso existen dos posibilidades, una corta: <i> e </i> (italic) y
otra un poco ms larga: <em> y </em>. En este manual, y en la mayora de
las pginas que veris por ah, os encontraris con la primera forma sin duda
ms sencilla a escribir y a acordarse.
He aqu un ejemplo de texto en itlica:

<i>Texto en itlica</i>
Que da el siguiente efecto:

Texto en itlica
Subrayado
El HTML nos propone tambin para el subrayado el par de etiquetas: <u> y
</u> (underlined). Sin embargo, el uso de subrayados ha de ser aplicado con
mucha precaucin dado que los enlaces hipertexto van, a no ser que se
indique lo contrario, subrayados con lo que podemos confundir al lector y
apartarlo del verdadero inters de nuestro texto.
Subndices y suprandices
Este tipo de formato resulta de extremada utilidad para textos cientficos. Las
etiquetas empleadas son:
^y para los suprandices
_y para los subndices
Aqu tenis un ejemplo:

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

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, podemos sin ningn problema crear
texto en negrita e itlica embebiendo una etiqueta dentro de la otra:
<b>Esto slo est en negrita <i>y esto en negrita e itlica</i></b>
Esto nos daria:

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 principal, antes de cerrar la etiqueta principal cierres las etiquetas

que hayas abierto dentro de ella.

Debemos evitar cdigos como el siguiente:

<b>Esto est en negrita e <i>itlica</b></i>
En favor de cdigos con etiquetas correctamente anidadas:
<b>Esto est en negrita e <i>itlica</i></b>

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

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

Seguimos aprendiendo etiquetas que nos sirven para

formatear el texto.
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 <font> y su cierre correspondiente. Dentro
de esta etiqueta deberemos especificar los atributos correspondientes a cada
uno de estos parmetros que deseamos definir. A continuacin os
comentamos los atributos principales de esta etiqueta:

Atributo face
Define el tipo de letra. Este atributo es interpretado por versiones de
Netscape a partir de la 3 y de MSIE 3 o superiores. Otros navegadores las
ignoran completamente y muestran el texto con la fuente que utilizan.
Hay que tener cuidado con este atributo ya que cada usuario, dependiendo
de la plataforma que utilice, puede no disponer de los mismos tipos de letra
que nosotros con lo que, si nosotros elegimos un tipo del que no dispone, el
navegador se ver forzado a mostrar el texto con la fuente que utiliza por
defecto (suele ser Times New Roman). Para evitar esto, dentro del atributo
suelen seleccionarse varios tipos de letra separados por comas. En este
caso el navegador comprobar que dispone del primer tipo enumerado y si
no es as, pasar al segundo y as sucesivamente hasta encontrar un tipo
que posea o bien acabar la lista y poner la fuente por defecto. Veamos un
ejemplo.

<font face="Comic Sans MS,arial,verdana">Este texto tiene otra

tipografa</font>
Que se visualizara as en una pgina web.

Este texto tiene otra tipografa

Nota: Aqu tenemos un ejemplo de atributo cuyo valor debe estar 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"

debemos colocar las comillas para limitarlo. En caso de no tener 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 palabras

(despus del espacio) son otros atributos, pero como no los conoce como atributos simplemente

los desestimar.

Atributo size
Define el tamao de la letra. Este tamao puede ser absoluto o relativo.
Si hablamos en trminos absolutos, existen 7 niveles de tamao distintos
numerados de 1 a 7 por orden creciente. Elegiremos por tanto un valor
size="1" para la letra ms pequea o size="7" para la ms grande.

<font size=4>Este texto es ms grande</font>

Que se visualizara as en una pgina web.
Este texto es ms grande

Podemos asimismo modificar el tamao de nuestra letra con respecto al del

texto mostrado precedentemente definiendo el nmero de niveles que
queremos subir o bajar en esta escala de tamaos por medio de un signo + o
-. De este modo, si definimos nuestro atributo como size="+1" lo que
queremos decir es que aumentamos de un nivel el tamao de la letra. Si
estabamos escribiendo previamente en 3, pasaremos automticamente 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 Explorer 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 constante para que ste
quepa en un determinado espacio. Veremos en su momento que esta
prefijacin del tamao puede ser llevada a cabo por las hojas de estilo en
cascada.

Atributo color
El color del texto puede ser definido mediante el atributo color. Cada color es
a su vez definido por un nmero hexadecimal que esta 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 artculo: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
<font color="red">Este texto est en rojo</font>
Que se visualizara as en una pgina web.

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.

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 "Comic Sans MS" y en caso de que sta no est en el
sistema que se coloque la fuente "Arial".
Los colores y HTML

En este reportaje tratamos de acercarte todos los detalles

relativos al buen uso de colores en HTML. Colores
compatibles con todos los sistemas.
El la composicin de webs juegan un papel muy importante los
colores. Se indican en valores RGB, es decir, que para
conseguir un color cualquiera mezclaremos cantidades de Rojo,
Verde y Azul.
Los valores RBG se indican en numeracin hexadecimal, en Tabla de
color
base 16. (Los dgito pueden crecer hasta 16. Como no hay
tantos 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 manera:

RRGGBB
Donde cada valor puede crecer desde 00 hasta FF.
Ejemplo
Cmo se cambiara la fuente para escribir en rojo:

<font color="#FF0000">Rojo</font>
Al Atributo color le damos un valor RGB en formato hexadecimal. 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
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

Atributos para pginas

Explicamos una serie de atributos que se aplican de

manera global a toda la pgina, como el color de fondo el
del texto, de los enlaces, mrgenes, etc.
Las pginas HTML pueden construirse con variedad de atributos que le
pueden dar un aspecto a la pgina muy personalizado. Podemos definir
atributos como el color de fondo, el color del texto o de los enlaces. Estos
atributos se definen en la etiqueta <body> y, como decamos son generales a
toda la pgina.
Lo mejor para explicar su funcionamiento es verlos uno por uno.

Atributos para fondos

bgcolor: especificamos un color de fondo para la pgina. En el captulo
anterior y en el taller de los colores y HTML hemos aprendido a construir
cualquier color, con su nombre o su valor RGB. El color de fondo que
podemos asignar con bgcolor es un color plano, es decir el mismo para toda
la superficie del navegador.
background: sirve para indicar la colocacin de una imagen como fondo de la
pgina. La imagen se coloca haciendo un mosaico, es decir, se repite
muchas veces hasta ocupar todo el espacio del fondo de la pgina. En
captulos ms adelante veremos como se insertan imgenes con HTML y los
tipos de imgenes que se pueden utilizar.
Ejemplo de fondo
Vamos a colocar esta imagen como fondo en la pgina.

La imagen se llama fondo.jpg 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, debemos poner tambin un color de

fondo cercano al color de la imagen.

Esto se debe a que, al colocar una imagen de fondo, el texto de la pgina debemos colocarlo en

un color que contraste suficientemente con dicho fondo. Si el visitante no puede ver el fondo por

cualquier cuestin (Por ejemplo tener deshabilitada la carga de imgenes) puede que el texto no

contraste lo suficiente con el color de fondo por defecto de la web.

Creo que lo mejor ser poner un ejemplo. Si la imagen de fondo es oscura, tendremos que poner

un texto claro para que se pueda leer. Si el visitante que accede a la pgina no ve la imagen de

fondo, le saldr el fondo por defecto, que generalmente es blanco, de modo que al tener un texto

con color claro sobre un fondo blanco, nos pasar que no podremos leer el texto

convenientemente.

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

imagen de fondo, se ver el fondo que hayamos seleccionado con bgcolor y es interesante que

sea parecido al color de la imagen para que se pueda leer el texto mientras se carga la imagen de

fondo.

Color del texto

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

link: el color de los enlaces que no han sido visitados. (por defecto es azul
clarito)
vlink: el color de los enlaces visitandos. La "v" viene justamente de la palabra
visitado. Es el color que tendrn los enlaces que ya hemos visitado. Por
defecto su color es morado. Este color debera ser un poco menos vivo que
el color de los enlaces normales.
alink: es el color de los enlaces activos. Un enlace est activo en el preciso
instante que se pulsa. A veces es difcil darse cuenta cuando un enlace est
activo porque en el momento en el que se activa es porque lo estamos
pulsando y en ese caso el navegador abandonar la pgina rpidamente y no
podremos ver el enlace activo ms que por unos instantes mnimos.
Ejemplo de color del texto
Vamos a ver una pgina donde el color de fondo sea negro, y los colores del
texto y los enlaces sean claros. Pondremos el color de texto balnco y los
enlaces amarillos, ms resaltados los que no estn visitados y menos
resaltados lo que ya estn visitados. Para ello escribiramos la etiqueta body
as:
<body bgcolor="#000000" text="#ffffff" link="#ffff33"
alink="#ffffcc" vlink="ffff00">
El efecto se puede ver en una pgina a parte.

Mrgenes
Con otros atributos de la etiqueta <body> se pueden asignan espacios de
margen en las pginas, lo que es muy til para eliminar los mrgenes en
blanco que aparecen a los lados, arriba y debajo de la pgina. Estos atributos
son distintos para Internet Explorer y para Netscape Navigator, por lo que
debemos utilizarlos todos si queremos que todos los navegadores los
interpreten perfectamente.
leftmargin: para indicar el margen a los lados de la pgina. Vlido para
iexplorer.
topmargin: para indicar el margen arriba y debajo de la pgina. Para iexplorer.
marginwidth: la contrapartida de leftmargin para 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 definiciones de pantalla, que
puede ser interesante de leer.

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

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

<body topmargin=0 leftmargin=0 marginheight=0 marginwidth=0

bgcolor="ffffff">
<table width=100% bgcolor=ff6666><tr><td>
<h1>Hola amigos</h1>
<br>
<br>
Gracias por visitarme!
</td></tr></table>
</body>

Caracteres especiales
Una referencia til, y una lista completa de los caracteres
especiales del HTML.
Una pgina web se ha de ver en paises distintos, que usan conjuntos de
caracteres distintos. El lenguaje HTML nos ofrece un mecanismo por el que
podemos estar seguros que una serie de caracteres raros se van a ver bien
en todos los ordenadores del mundo, independientemente de su juego de
caracteres.
Este conjunto son los caracteres especiales. Cuando queremos poner uno de
estos caracteres en una pgina, debemos sustituirlo por su cdigo.

Por ejemplo, la "" (a minscula acentuada) se escribe "&aacute;" de modo

que la palabra pgina se escribira en una pgina HTML de este modo:
p&aacute;gina
Caracteres especiales bsicos
En realidad estos caracteres se usan en HTML para no confundir un principio
o final de etiqueta, unas comillas o un & con su correspondiente caracter.
&lt; < &gt; >
&amp; & &quot; "
Caracteres especiales del HTML 2.0
&Aacute; &Agrave;
&Eacute; &Egrave;
&Iacute; &Igrave;
&Oacute; &Ograve;
&Uacute; &Ugrave;
&aacute; &agrave;
&eacute; &egrave;
&iacute; &igrave;
&oacute; &ograve;
&uacute; &ugrave;
&Auml; &Acirc;
&Euml; &Ecirc;
&Iuml; &Icirc;
&Ouml; &Ocirc;
&Uuml; &Ucirc;
&auml; &acirc;
&euml; &ecirc;
&iuml; &icirc;
&ouml; &ocirc;
&uuml; &ucirc;
&Atilde; &aring;
&Ntilde; &Aring;
&Otilde; &Ccedil;
&atilde; &ccedil;
&ntilde; &Yacute;
&otilde; &yacute;
&Oslash; &yuml;
&oslash; &THORN;
&ETH; &thorn;
&eth; &AElig;
&szlig; &aelig;

Caracteres especiales del HTML 3.2

&frac14; &nbsp;
&frac12; &iexcl;
&frac34; &pound;
&copy; &yen;
&reg; &sect;
&ordf; &curren;
&sup2; &brvbar;
&sup3; &laquo;
&sup1; &not;
&macr; &shy;
&micro; &ordm;
&para; &acute;
&middot; &uml;
&deg; &plusmn;
&cedil; &raquo;
&iquest;
Otros caracteres especiales
&times; &cent;
&divide; &euro;
&#147; &#153;
&#148; &#137;
&#140; &#131;
&#135; &#134;