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...

2.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.

3.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.

4.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

5.Cmo colocar prrafos y saltos de lnea en pginas web. Tambin

vemos los encabezados como prrafos que sirven de titulo.
Por Rubn Alvarez
Atencin: Contenido exclusivo de DesarrolloWeb.com. No reproducir. Copyright.

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.

6.-

Vemos como colocar negritas, itlicas, subrayados, subndices y

suprendices.
Por Rubn Alvarez
Atencin: Contenido exclusivo de DesarrolloWeb.com. No reproducir. Copyright.

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

CC3H4ClNOS es un heterociclo alergeno enriquecido

13

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.

7.-

Seguimos aprendiendo etiquetas que nos sirven para formatear el

texto.
Por Rubn Alvarez
Atencin: Contenido exclusivo de DesarrolloWeb.com. No reproducir. Copyright.

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
Aqua
Black
Blue
Fuchsia
Gray
Green
Lime
Maroon
Navy
Olive
Purple
Red
Silver
Teal
White
Yellow

Color

<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)

8.En este reportaje tratamos de acercarte todos los detalles relativos al

buen uso de colores en HTML. Colores compatibles con todos los
sistemas.
Por Miguel Angel Alvarez
Atencin: Contenido exclusivo de DesarrolloWeb.com. No reproducir. Copyright.

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:

Tabla de color

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

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.
Colores.zip 16Kb