Manual de HTML

Comentar el manual
Ver comentarios (119)
HTML es el lenguaje utilizado como base para crear las pginas web. En
este manual explicamos en profundidad cmo utilizarlo, desde lo ms
bsico a los temas ms avanzados.
Listado de los captulos
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.
Entrar
2.- Introduccin al HTML
Las primeras cosas que debes saber sobre HTML: historia, objetivos y dems
conocimientos donde sentar las bases del manual.
Entrar
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.
Entrar
4.- Tu primera pgina
Vamos a ver cmo se hace una pgina muy sencilla en HTML, que sirva de prctica a los
debutantes.
Entrar
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.
Entrar
6.- Formateando el texto
Vemos como colocar negritas, itlicas, subrayados, subndices y suprendices.
Entrar
7.- Color, tamao y tipo de letra
Seguimos aprendiendo etiquetas que nos sirven para formatear el texto.
Entrar
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.
Entrar
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.
Entrar
10.- Caracteres especiales
Una referencia til, y una lista completa de los caracteres especiales del HTML.
Entrar
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.
Entrar
12.- Listas II - Listas ordenadas
Estudiamos otro tipo de listas: las listas ordenadas.
Entrar
13.- Listas III - Listas de definicin
Vemos las listas de definicin y aprendemos a anidar listas para crear estructuras lista ms
complejas.
Entrar
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.
Entrar
15.- Enlaces internos
Los enlaces HTML que se hacen con otras partes de la misma pgina.
Entrar
16.- Enlaces locales
Enlaces HTML con otras pginas del mismo sitio web.
Entrar
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.
Entrar
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.
Entrar
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.
Entrar
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.
Entrar
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.
Entrar
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.
Entrar
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.
Entrar
24.- Tablas en HTML. Atributos para filas y celdas
Continuamos con las tablas. Vemos los atributos que podemos colocar en las filas y las
celdas.
Entrar
25.- 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.
Entrar
26.- 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.
Entrar
27.- 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.
Entrar
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.
28.- Formularios HTML
Empezamos la explicacin de la creacin de formularios con el lenguaje HTML.
Entrar
29.- Elementos de Formularios. Campos de texto
Vemos detenidamente los distintos elementos de formulario que sirven para introducir
texto.
Entrar
30.- Otros elementos de formulario
Explicamos la sintaxis y el funcionamiento de las cajas y listas de seleccin, casillas de
verificacin y botones de radio.
Entrar
31.- 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.
Entrar
32.- Etiquetas FIELDSET y LEGEND de formularios
Las etiquetas de HTML FIELDSET y LEGEND sirven para crear bloques de elementos
dentro de formularios.
Entrar
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.
33.- Frames en HTML
Introducin a los frames, un poco de historia y sus utilidades.
Entrar
34.- Frames - Explicacin bsica
Explicamos los detalles generales y los ms bsicos sobre la creacin de frames. Etiquetas
FRAMESET Y FRAME.
Entrar
35.- Frames - Creacin de una estructura simple
Ejemplo de la creacin de un frame simple para ilustrar lo aprendido hasta ahora.
Entrar
36.- Frames - Una pgina en cada marco
Vemos cmo seran las distintas pginas independientes que componen un sitio creado con
frames.
Entrar
37.- 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.
Entrar
38.- Frames - Anidar frames
Explicamos como se crean estructuras con frames ms complejas: anidacin de frames.
Entrar
39.- Frames - Atributos avanzados
Lista de atributos de las etiquetas frameset y frame con las que podemos configurar la
apariencia y caractersticas de los marcos.
Entrar
40.- 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.
Entrar
41.- Etiqueta Iframe
Explicamos detenidamente la etiqueta IFRAME de HTML y todos sus atributos, con algn
ejemplo de uso.
Entrar
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.
42.- Las nuevas etiquetas de HTML 4.0
En este artculo veremos estas nuevas etiquetas del estandar HTML 4.0.
Entrar
43.- 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.
Entrar
44.- Las nuevas etiquetas de HTML 4.0 (2)
Explicacin de las nuevas etiquetas de HTML 4.0 para uso en formularios.
Entrar
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.
45.- Sonido en HTML I, introduccin
Este es el primer captulo de un manul de el sonido en la web.
Entrar
46.- Sonido en HTML II, caractersticas del sonido digital
Conceptos bsicos del sonido digital.
Entrar
47.- Sonido en HTML (III)
Cules son los ficheros que podemos ejecutar desde el navegador y cuales desde un
programa especfico.
Entrar
48.- Sonido en HTML (IV)
En este captulo veremos la manera de incluir los archivos de msica en el HTML.
Entrar
49.- Sonido en HTML (V)
En este captulo veremos el potencil de la etiqueta OBJECT.
Entrar
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.
50.- Doctype HTML
Qu es el Doctype en los documentos HTML y XHTML. Vemos distintos tipos de Doctype
disponibles.
Entrar
51.- 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.
Entrar
52.- Etiqueta META robots
Explicacin de la etiqueta META robots y diferentes posibilidades de configuracin.
Entrar
53.- 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.
Entrar
54.- 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.
Entrar
55.- 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.
Entrar
56.- Las mejoras de los elementos INPUT de HTML5
Una breve descripcin de las nuevas caractersticas presentes en los elementos de
formulario INPUT en HTML5.
Entrar
57.- 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
Por Rubn Alvarez

24 de septiembre de 2001
24 Comentarios
Manuales 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
Por Rubn Alvarez

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

24 de septiembre de 2001
11 Comentarios
HTML, Manuales de 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
Por Rubn Alvarez

24 de septiembre de 2001
40 Comentarios
HTML, Manuales de HTML
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
Por Rubn Alvarez

24 de septiembre de 2001
32 Comentarios
Manuales de 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
Por Rubn Alvarez

11 de octubre de 2001
6 Comentarios
Manuales de HTML
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
13
CC
3
H
4
ClNOS es un heterociclo alergeno enriquecido
Anidar etiquetas
Todas estas etiquetas y por supuesto el resto de las vistas y que veremos ms adelante
pueden ser anidadas unas dentro de otras de manera a conseguir resultados diferentes. As,
podemos sin ningn problema crear texto en negrita e itlica embebiendo una etiqueta
dentro de la otra:
<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.
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.



















Color, tamao y tipo de letra
Por Rubn Alvarez

11 de octubre de 2001
42 Comentarios
Manuales de HTML
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".
Se puede ver una posible solucin del ejercicio en este enlace. (Ver el cdigo fuente de la
pgina para ver cmo lo hemos resuelto)







Los colores y HTML
Por Miguel Angel lvarez


01 de enero de 2001
14 Comentarios
Diseo web, HTML, Guias de diseo, Usabilidad
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 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>
Tabla de
color

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
Se consiguen los colores siguientes:
Por ltimo, te ofrecemos unos archivos con programillas en JavaScript que te pueden ayudar a encontrar
los colores adecuados. Entro otros, podrs encontrar el script que genera la tabla de arriba.

Atributos para pginas
Por Miguel Angel lvarez


04 de marzo de 2002
21 Comentarios
HTML
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>
Esta pgina tiene el fondo blanco y dentro una tabla con el fondo rojo. En la pgina podremos ver que la
tabla ocupa el espacio en la pgina sin dejar sitio para ningn tipo de margen. Puede verse el ejemplo en
una pgina a parte.
Todo lo que hemos visto hasta ahora en el Manual de HTML lo 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.







Caracteres especiales
Por Miguel Angel lvarez


01 de enero de 2001
25 Comentarios
HTML
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;
Para descargar la lista de caracteres especiales: caracteresespeciales.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.























Listas I - Listas desordenadas
Por Rubn Alvarez

11 de octubre de 2001
2 Comentarios
Manuales de HTML
Vemos lo que son las listas y sealamos los tres tipos que hay.
Estudiamos las listas desordenadas.
Las posibilidades que nos ofrece el HTML en cuestin de tratamiento de texto son
realmente notables. No se limitan a lo visto hasta ahora, sino que van ms lejos todava.
Varios ejemplos de ello son las listas, que sirven para enumerar y definir elementos, los
textos preformateados y las cabeceras o ttulos.
Las listas originalmente estn pensadas para citar, numerar y definir cosas a travs de caractersticas, o al
menos as lo hacemos en la escritura de textos. Sin embargo, las listas finalmente se utilizan para mucho
ms que enumerar una serie de puntos, en realidad son un recurso muy interesante para poder maquetar
elementos diversos, como barras de navegacin, pestaas etc. Pero esto lo veremos ms adelante, cuando
apliquemos estilos CSS a las listas.
De momento, en este Manual de HTML, trataremos las listas desde el punto de vista de su construccin
y veremos los diferentes tipos que existen, y que podemos utilizar para resolver nuestras distintas
necesidades a la hora de escribir textos en HTML.
Referencia: Todos los tipos de listas los hemos explicado en vdeo y se pueden revisar en el Videotutorial de
HTML, ms concretamente en la entrega siguiente: Vdeo sobre las Listas HTML.
Podemos distinguir tres tipos de listas HTML:
Listas desordenadas
Listas ordenadas
Listas de definicin
Las veremos detenidamente una a una.
Listas desordenadas
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:
<p>Pases del mundo</p>
< ul>
<li>Argentina
<li>Per
<li>Chile
< /ul>
El resultado:
Pases del mundo
Argentina
Per
Chile
Podemos definir el tipo de vieta empleada para cada elemento. Para ello debemos
especificarlo por medio del atributo type incluido dentro de la etiqueta de apertura <ul>, si
queremos que el estilo sea vlido para toda la lista,o dentro le la etiqueta <li> si queremos
hacerlo especfico de un solo elemento. La sintaxis es del siguiente tipo:
<ul type="tipo de vieta">
donde tipo de vieta puede ser uno de los siguientes:
circle
disc
square
Nota: En algunos navegadores no funciona la opcin de cambiar el tipo de vieta a mostrar y por mucho que nos
empeemos, siempre saldr el redondel negro.

En caso de que no funcione siempre podemos construir la lista a mano con la vieta que queramos utilizando las
tablas de HTML. Veremos ms adelante cmo trabajar con tablas.
Vamos a ver un ejemplo de lista con un cuadrado en lugar de un 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
Elemento 2
Elemento 3
o Elemento 4




Listas II - Listas ordenadas
Por Rubn Alvarez

11 de octubre de 2001
4 Comentarios
Manuales de HTML
Estudiamos otro tipo de listas: las listas ordenadas.
Estamos en el Manual de HTML y continuamos estudiando las listas de HTML, con las que
crear estructuras atractivas para presentar la informacin. En el captulo anterior vimos las
listas desordenadas y ahora estudiaremos las listas ordenadas.
Listas ordenadas
Las listas ordenadas sirven tambin para presentar informacin, en diversos elementos o
items, con la particularidad que stos estarn predecidos de un nmero o una letra para
enumerarlos, siempre por un orden.
Para realizar las listas ordenadas usaremos las etiquetas <ol> (ordered list) y su cierre. Cada elemento
sera igualmente indicado por la etiqueta <li>, que ya vimos en las listas desordenadas.
Pongamos un ejemplo:
<p>Reglas de comportamiento en el trabajo</p>
< ol>
<li>El jefe siempre tiene la razn
<li>En caso de duda aplicar regla 1
< /ol>
El resultado es:
Reglas de comportamiento en el trabajo
1. El jefe siempre tiene la razn
2. En caso de duda aplicar regla 1
Del mismo modo que para las listas desordenadas, las listas ordenadas ofrecen la
posibilidad de modificar el estilo. En concreto nos es posible especificar el tipo de
numeracin empleado eligiendo entre nmeros (1, 2, 3...), letras (a, b, c...) y sus
maysculas (A, B, C,...) y nmeros romanos en sus versiones maysculas (I, II, III,...) y
minsculas (i, ii, iii,...). Para realizar dicha seleccin hemos de utilizar, como para el caso
precedente, el atributo type, el cual ser situado dentro de la etiqueta <ol>. Los valores que
puede tomar el atributo en este caso son:
1 Para ordenar por nmeros
a Por letras del alfabeto
A Por letras maysculas del alfabeto
i Ordenacin por nmeros romanos en minsculas
I Ordenacin por nmeros romanos en maysculas
Nota: Recordamos que en algunos navegadores no funciona la opcin de cambiar el tipo de vieta a mostrar
Puede que en algn caso deseemos comenzar nuestra enumeracin por un nmero o letra que no tiene
por qu ser necesariamente el primero de todos. Para solventar esta situacin, podemos utilizar un
segundo atributo, start, que tendra como valor un nmero. Este nmero, que por defecto es 1,
corresponde al valor a partir del cual comenzamos a definir nuestra lista. Para el caso de las letras o los
nmeros romanos, el navegador se encarga de hacer la traduccin del nmero a la letra correspondiente.
Os proponemos un ejemplo usando este tipo de atributos:
<p>Ordenamos por numeros</p>
< ol type="1">
<li>Elemento 1
<li> Elemento 2
< /ol>

< p>Ordenamos por letras</p>
< ol type="a">
<li>Elemento a
<li> Elemento b
< /ol>
<p>Ordenamos por nmeros romanos empezando por el 10</p>
<ol type="i" start="10">
<li>Elemento x
<li> Elemento xi
< /ol>
El resultado:
Ordenamos por nmeros
1. Elemento 1
2. Elemento 2
Ordenamos por letras
a. Elemento a
b. Elemento b
Ordenamos por numeros romanos empezando por el 10
x. Elemento x
xi. Elemento xi




Listas III - Listas de definicin
Por Rubn Alvarez

11 de octubre de 2001
11 Comentarios
Manuales de HTML
Vemos las listas de definicin y aprendemos a anidar listas para
crear estructuras lista ms complejas.
Terminamos el tema de listas en el manual de HTML de DesarrolloWeb.com estudiando las
listas de definicin. Veremos tambin la anidacin de listas, que resultar un recurso
interesante para estructurar datos un poco ms complejos o enumerar elementos con una
jerarqua.
Listas de definicin
Las listas de definicin sirven para hacer un conjunto de elementos con pares concepto-
descripcin. Es decir, se especificarn varios trminos por su nombre y se escribir una
definicin para cada uno. Cada elemento es presentado junto con su definicin, uno detrs
de otro.
Para realizar una lista de definicin, ja etiqueta principal es <dl> y </dl> (definition list). La etiquetas
del elemento y su definicin son <dt> (definition term) y <dd> (definition definition) respectivamente.
Aqu os proponemos un cdigo que podr aclarar este sistema:
<p>Diccionario de la Real Academia</p>
< dl>
<dt>Brujula
<dd>Serula montada en una escbula
<dt>Oreja
<dd>Sesenta minutejos
< /dl>
El efecto producido:
Diccionario de la Real Academia
Brujula
Serula montada en una escbula
Oreja
Sesenta minutejos
Fijaos en que cada lnea <dd> esta desplazada hacia la izquierda. Este tipo de etiquetas son
usadas a menudo con el propsito de crear textos ms o menos desplazados hacia la
izquierda.
El cdigo:
<dl>
< dd>Primer nivel de desplazamiento
<dl>
<dd>Segundo nivel de desplazamiento
<dl>
<dd>Tercer nivel de desplazamiento
</dl>
</dl>
< /dl>
El resultado:
Primer nivel de desplazamiento
Segundo nivel de desplazamiento
Tercer nivel de desplazamiento
Anidando listas
Nada nos impide utilizar todas estas etiquetas de forma anidada como hemos visto en otros
casos. De esta forma, podemos conseguir listas mixtas como por ejemplo:
<p>Ciudades del mundo</p>
< ul>
<li>Argentina
<ol>
<li>Buenos Aires
<li>Bariloche
</ol>
<li>Uruguay
<ol>
<li>Montevideo
<li>Punta del Este
</ol>
< /ul>
De esta forma creamos una lista como esta:
Ciudades del mundo
Argentina
1. Buenos Aires
2. Bariloche
Uruguay
1. Montevideo
2. Punta del Este
Referencia: Con esto hemos acabado el tema sobre Listas HTML, sin embargo, podemos completar las
explicaciones en el Videotutorial de HTML, en el Vdeo sobre las Listas HTML.