HTML

Qu es el HTML?
El HTML ( HiperText Markup Lenguaje ) es el lenguaje utilizado para representar documentos
en la WWW (World Wide Web). Adems de texto normal incluye tambin, elementos
multimedia (grficos, vdeo, audio) y existen enlaces (links) que permiten saltar a otras partes
del documento o a otro sitio cualquiera de Internet.
Otra caracterstica muy importante de este lenguaje es que es portable, es decir, se pueden
visualizar las pginas con cualquier sistema operativo y, por supuesto tambin crearlas.
Las etiquetas constituyen la filosofa de este lenguaje. Por medio de ellas se pueden controlar
los elementos tipogrficos del texto: tipo, color y tamao de las fuentes, el estilo ( negrita,
cursiva, etc ), as como tambin la inclusin de tablas, listas, formularios, la insercin de fotos,
sonidos, fondos, los enlaces mencionados anteriormente. etc.
Las etiquetas se pueden modificar por medio de sus atributos, stos son del tipo
atributo="valor" y se colocan detrs del nombre de la etiqueta
El nombre de la etiqueta y sus atributos se colocan entre los smbolos < y > y normalmente se
usan dos, una de inicio y otra final, para conseguir el efecto deseado.

Por ejemplo si escribimos

<FONT COLOR="#ff0000" size="2">El texto se ver rojo y en tamao un poco menor de

lo normal </font>
Se ver como El texto se ver rojo y en tamao un poco menor de lo normal
El uso de estas etiquetas, y por ende el aprendizaje del HTML, no es difcil. Precisamente el
objetivo de esta pequea gua es servir de introduccin y referencia de las caractersticas ms
usadas del HTML

Cmo empiezo a escribir HTML?

Para comenzar tan slo necesitas un editor de texto para escribir las pginas y un navegador
para visualizarlas.
El editor no debe formatear el texto. Usa el Bloc de notas ( Notepad ) Las etiquetas y sus
atributos se pueden escribir en maysculas o minsculas. El lenguaje ignora, tambin, los
espacios en blanco seguidos, donde slo cuenta uno de ellos.
Una vez que hayas escrito una pgina, gurdala en un fichero con extensin .htm o .html.
Cuando hagas doble click sobre l se abrir el navegador y te mostrar la pgina.
Para ver el contenido de los ficheros anteriores (los acabados en htm o html ) con el Bloc de
notas puedes crear un acceso directo al mismo en la carpeta "SendTo" del directorio
"Windows" y te aparecer como opcin en "Enviar a " cuando hagas click con el botn dereho
del ratn sobre el fichero.
Otro modo es abrir el fichero con el Explorer y luego, con el cursor colocado sobre el texto (no
sobre imgenes) pulsar el botn derecho y elegir "Ver cdigo fuente". En el Comunicator
tambin se puede "Ver el origen" pero en un visor propio que no permite modificar el texto

Ten cuidado con el nombre de los ficheros, pues los servidores donde se alojan las
pginas s distinguen maysculas de minsculas y no es lo mismo Inicio.htm que
inicio.htm

Qu necesito para crear una pgina Web?

Lo primero que debes tener claro es qu contenidos va a tener tu pgina. Por ejemplo, si vas a
hacer una pgina sobre tu Instituto, qu vas a poner?: las enseanzas que se cursan, los
proyectos que estis llevando a cabo, un poco de historia del pueblo o ciudad donde est
enclavado el centro, las actividades extraescolares que realiza el centro, etc.
Una vez decidido esto qu necesitas?. De entrada, el doble de tiempo que calcules para
realizarla. Adems necesitars:
Un navegador. Aunque hay ms, parece que el Explorer y el Netscape son los mejores.
Un editor de Html (que bien puede ser el que viene con los navegadores) o bien escribir
todo el cdigo a mano.
Hacer las fotos que vas a poner y escanearlas ( esto suele llevar bastante tiempo si no se ha
hecho antes) Puedes hacerlo en el CPR.
Un programa grfico para retocar las imgenes, mira en la pgina de imgenes.
Espacio en un servidor que albergue la pgina. Si tienes cuenta en el PNTIC puedes subir
unos 250 KB, que son suficientes para una pgina sencilla
Un programa para subir la pgina al servidor, puede ser el WS_FTP que localizars en

http://www.ipswitch.com
Dar de alta la pgina en algunos buscadores (Alta Vista, Ol, etc) y tambin en el PNTIC si la
pgina est relacionada con la educacin. Si no haces esto, solamente podrn visitar tu pgina
quienes conozcan la direccin exacta.
Y sobretodo bastante tiempo para el mantenimiento de la pgina: comprobar los enlaces,
actualizar las fotos, el contenido, etc.

HTML consta de varios componentes vitales, incluyendo elementos y

sus atributos, tipos de data, y la declaracin de tipo de documento.
Elementos
Los elementos son la estructura bsica de HTML. Los elementos tienen
dos propiedades bsicas: atributos y contenido. Cada atributo y
contenido tiene ciertas restricciones para que se considere vlido al
documento HTML. Un elemento generalmente tiene una etiqueta de
inicio (p.ej. <nombre-de-elemento>) y una etiqueta de cierre (p.ej.
</nombre-de-elemento>). Los atributos del elemento estn contenidos
en la etiqueta de inicio y el contenido est ubicado entre las dos
etiquetas (p.ej. <nombre-deelemento atributo="valor">Contenido</nombre-de-elemento>).

Algunos elementos, tales como <br>, no tienen contenido ni llevan una

etiqueta de cierre. Debajo se listan varios tipos de elementos de
marcado usados en HTML.

Estructura general de una lnea de cdigo en el lenguaje de etiquetas

HTML.
El marcado estructural describe el propsito del texto. Por ejemplo,
<h2>Golf</h2> establece a "Golf" como un encabezamiento de
segundo nivel, el cual se mostrara en un navegador de una manera
similar al ttulo "Marcado HTML" al principio de esta seccin. El
marcado estructural no define cmo se ver el elemento, pero la
mayora de los navegadores web han estandarizado el formato de los
elementos. Un formato especfico puede ser aplicado al texto por
medio de hojas de estilo en cascada.
El marcado presentacional describe la apariencia del texto, sin
importar su funcin. Por ejemplo, <b>negrita</b> indica que los
navegadores web visuales deben mostrar el texto en negrita, pero no
indica qu deben hacer los navegadores web que muestran el
contenido de otra manera (por ejemplo, los que leen el texto en voz
alta). En el caso de <b>negrita</b> e <i>itlica</i>, existen elementos
que se ven de la misma manera pero tienen una naturaleza ms
semntica: <strong>enfsis fuerte</strong> y <em>nfasis</em>. Es
fcil ver cmo un lector de pantalla debera interpretar estos dos
elementos. Sin embargo, son equivalentes a sus correspondientes
elementos presentacionales: un lector de pantalla no debera decir ms
fuerte el nombre de un libro, aunque ste est en itlicas en una
pantalla. La mayora del marcado presentacional ha sido desechada
con HTML 4.0, en favor de Hojas de estilo en cascada.
El marcado hipertextual se utiliza para enlazar partes del documento
con otros documentos o con otras partes del mismo documento. Para
crear un enlace es necesario utilizar la etiqueta de ancla <a> junto con
el atributo href, que establecer la direccin URL a la que apunta el

enlace. Por ejemplo, un enlace a la Wikipedia sera de la forma <a

href=es.wikipedia.org>Wikipedia</a>. Tambin se pueden crear
enlaces sobre otros objetos, tales como imgenes <a
href=enlace><img src=imagen /></a>.
Atributos
La mayora de los atributos de un elemento son pares nombre-valor,
separados por un signo de igual "=" y escritos en la etiqueta de
comienzo de un elemento, despus del nombre de ste. El valor puede
estar rodeado por comillas dobles o simples, aunque ciertos tipos de
valores pueden estar sin comillas en HTML (pero no en XHTML).7 8 De
todas maneras, dejar los valores sin comillas es considerado poco
seguro.9 En contraste con los pares nombre-elemento, hay algunos
atributos que afectan al elemento simplemente por su presencia10 (tal
como el atributo ismap para el elemento img).11
Cuerpo de un documento HTML

Introduccin
El cuerpo de un documento HTML estar delimitado por las etiquetas
<BODY> y </BODY> y en el se incluirn todas las instrucciones HTML y
el texto que forman el documento, es similar al BEGIN { de un
lenguaje de programacin. Al igual que la cabecera (HEAD) es opcional,
pero se recomienda para la buena identificacin de las distintas zonas
del documento. Si un documento no presenta ninguna de las etiquetas
de identificacin de sus distintas partes (<HTML>, <HEAD> <BODY>)
se considerar que todo lo que se defina pertenece al cuerpo del
documento.
Definicin de colores
Antes de especificar los atributos de la etiqueta BODY indicaremos, la
forma de representar los distintos colores. Se usa el siguiente formato:
#rrvvaa

Donde se indica en formato hexadecimal la proporcin de rojo,

verde y azul que forma el color deseado. El smbolo # es opcional. Un
nmero hexadecimal es un nmero en base 16, la base normal
utilizada es base 10 o decimal del 0 al 9. En este caso los nmero

validos sern del 0 al 9 aadiendo desde la a A a la f F. Por tanto el

nmero 0F ser el 15, 0E ser 14.
En la especificacin del color utilizaremos para definir la proporcin
de cada color un nmero del 0 al FF (255), 0 indica nada de ese color y
FF la mayor proporcin del color.
Algunos ejemplos de colores sern:
#000000

Negro(Negro)

#FFFFFF Blanco(Blanco)
#FF0000

Rojo(Rojo)

#00FF00

Verde(Verde)

#0000FF

Azul(Azul)

Algunos colores estn predefinidos y pueden ser referenciados por

su nombre, estos solo sern validos para Netscape e Internet Explorer
de Microsoft, estos colores predefinidos son:

Color Predefinido

Muestra

Color Predefinido Muestra

Black

negro

olive

oliva

Teal

teal

red

rojo

Blue

azul

maroon

marron

Navy

azul marino

gray

gris

Lime

lima

fuchsia

fucsia

White

blanco

green

verde

Purple

purpura

silver

plata

Yellow

amarillo

aqua

agua

El Netscape 2.0 o superior soporta mayor cantidad de colores: paleta

completa del Netscape 2.0.

Atributos de <BODY>
La etiqueta BODY presenta algunos atributos que son de definicin
global para todo el documento, estos definirn los colores y el fondo
del documento HTML.
Los atributos de BODY son:
<BODY BACKGROUND="URL" BGCOLOR=#rrvvaa TEXT=#rrvvaa
LINK=#rrvvaa VLINK=#rrvvaa >

BACKGROUND="URL":

Definir la imagen que se utilizar de fondo del documento HTML, la

URL definida ser el camino a una imagen. Esta se muestra debajo del
texto y las imgenes del documento HTML. En el caso de que la imagen
no rellene todo el fondo del documento esta ser reproducida tantas
veces como sea necesario.

BGCOLOR=#rrvvaa nombre del color:

Indicar el color del fondo del documento HTML, solo se utilizar si

no se ha definido una imagen de fondo, o si esta imagen no puede
obtenerse.

TEXT=#rrvvaa nombre del color:

Especificar el color del texto normal dentro del documento HTML.

Por defecto ser normalmente negro.

LINK=#rrvvaa nombre del color:

Indicar el color que tendrn los hiperenlaces que no han sido

accedidos. Por defecto ser azul.

VLINK=#rrvvaa nombre del color:

Color de los enlaces que ya han sido visitados. Por defecto es un

color azul ms oscuro.
Ejemplos
Algunos ejemplos podran ser:

<body background=
"http://www2.uca.es/fondos1/fondo15.gif">

El documento tendr como fondo la imagen

indicada en la URL

<body bgcolor=blue text=white link=red

vlink=aqua>

En este caso el fondo ser azul, el texto

blanco, los enlaces rojos y los enlaces
visitados color agua

<body bgcolor=0000FF text=FFFFFF

link=FF0000 vlink=008200>

Este caso es similar al anterior pero usando el

formato hexadecimal para definir los colores,
el fondo ser azul, el texto blanco, los enlaces
rojos y los enlaces visitados color verde
oscuro

Formateo bsico de texto

Las etiquetas html no solo indican al navegador la naturaleza del
elemento que contienen (texto, imagen, enlace), sino que tambien
pueden indicar como debe aparecer ese elemento. A continuacin
estudiaremos las etiquetas de estilo ms sencillas, aunque ya
advirtiendo que las posibilidades que ofrece este lenguaje son bastante
limitadas, y que es del todo punto aconsejable usar las CSS para
determinar los detalles de maquetacin y apariencia de la pgina. Pero
nuevamente no nos adelantemos, y veamos estas etiquetas fsicas
bsicas:
<b>esta etiqueta (b de bold) transforma el texto en negrita</b>
<i>esta otra (i de itlica) lo transforma en cursiva</i>
<u>u, de underline, subrayado</u> [en desuso]
Es decir, texto en negrita, en cursiva, o subrayado.
Lamentablemente, como todas ellas son etiquetas fsicas, su uso ha
dejado de ser recomendado, o lo ser prximamente, siendo preferible
el equivalente CSS. De hecho el cdigo de esta pgina no es cdigo
vlido, por el uso que acabamos de hacer de la etiqueta <u></u>. Para
que el cdigo fuera HTML 4.01 vlido tendramos que haber recurrido
a las reglas de estilo: <span style="text-decoration: underline;">.
Quizs un poco mas complicado, pero a cambio mucho mas flexible:

<span style="font-weight:bold">texto en negrita</span>

<span style="font-style:italic;">texto en cursiva</span>

<span style="text-decoration:underline;">texto
subrayado</span>

Es decir, texto en negrita, texto en cursiva, y texto subrayado, pero

esta vez, con estilo.
Hay otras varias etiquetas html formateadoras de texto, esta vez no
fsicas sino lgicas. Hablamos de ellas mas adelante
Alineando el texto
El alineamiento del texto, esto es, que aparezca a la izquierda o derecha
de la pgina, o centrado, se consegua en html con la etiqueta
<center></center> [en desuso], que centraba todos los elementos que
englobaba, o con el atributo align, que defina la alineacin del
elemento a que se aplicaba. Por ejemplo <p align="center"> [en
desuso] defina un prrafo con el texto centrado
La recomendacin actual para alinear el texto segun nos interese, es de
nuevo acudir a las CSS:
<p style="text-align:center;">El texto con este atributo debe aparecer
centrado.</p>
<p style="text-align:left;">El texto con este atributo debe aparecer
alineado a la izquierda y no a la derecha.</p>
<p style="text-align:right">El texto con este atributo debe aparecer
alineado a la derecha.</p>
<p style="text-align:justify">El texto con este atributo debe aparecer
justificado.
Margenes alineados a derecha e izquierda.</p>
Bien, lo vemos de nuevo, este texto esta alineado a la izquierda:
Bana pon evi ahumem quide aliplem est. Nifithius bequoras, ecast
orhascram tho quidimipr milecront. Dravomus in gicuspi lidothant.
Ovobr, ehecus nef todosni olescronis.
y este alineado a la derecha:Bana pon evi ahumem quide aliplem est.
Nifithius bequoras, ecast orhascram tho quidimipr milecront.
Dravomus in gicuspi lidothant.

... texto centrado, similar en su efecto a la propia pareja de etiquetas

center: Bana pon evi ahumem quide aliplem est. Nifithius bequoras,
ecast orhascram tho quidimipr milecront.
Y este otro texto esta justificado (alineado) en sus dos mrgenes: Bana
pon evi ahumem quide aliplem est. Nifithius bequoras, ecast orhascram
tho quidimipr milecront. Dravomus in gicuspi lidothant. Ovobr, ehecus
nef todosni olescronis. Obraprius, icosmem ora cratips apofant.

Que quiere decir eso de que un elemento o atributo est en

desuso?

COLORES EN HTML
Colores
Los colores se forman a partir de tres bsicos, que son el rojo,
verde y azul. La intensidad de cada componente se expresa como un
nmero hexadecimal del 00 al FF (del 0 al 255 en base diez)
Los nmeros hexadecimales, se forman utilizando 16 dgitos (en
lugar de los diez de la numeracin decimal habitual o dos en la
binaria). Estos dgitos son: 0 1 2 3 4 5 6 7 8 9 A B C D E F
As:, por ejemplo, el color rojo se representa como #FF0000,
porque tiene el toda la intensidad de rojo y nada de verde y azul.
Los colores basicos son:
#FF0000 - Rojo
#00FF00 - Verde
#0000FF - Azul
Otros colores son:
#FFFFFF - Blanco
#000000 - Negro
#FFFF00 - Amarillo
Para hacer un color ms oscuro, reduce la intensidad del
componente, dejando los otros dos iguales. As, el rojo (#FF0000) se
hace ms oscuro as: #CC0000, #990000, #660000, #330000 etc

Para hacer que un color ms pastel, simplemente variar los otros

dos colores dejando igual el principal. As, el rojo (#FF0000) se hace
ms claro asi: #FF3333, #FF6666, #FF9999, #FFCCCC etc
Ejemplo 1: <FONT SIZE=+2 COLOR=#FF00FF>Esto esta en color
fucsia</FONT>
Ejemplo 2: Este color es #C1E1F8

16 Colores estandar (4 bits)

BLACK
SILVER
RED

NAVY
GRAY

BLUE
YELLOW

MAROON

TEAL
GREEN

WHITE

AQUA
OLIVE

FUCHSIA

LIME
PURPLE

256 Colores RGB (8 bits)

FF3300
CC3300
FF9999
FFCCCC
990033
FF3333
CC3333
FFCC99
CC0066
993300
RED
MAROON
FF0000
990000
FF0033
CC0033
FF9966
FF6699
660000
000000
CC0000
663333
990066
330000
33FF33
66FF66
99FF99
CCFFCC
00CC00
009900
006600
003300
LIME
OLIVE
GREEN
66FF00
66FF00
00FF00
00CC00
009900
006600
003300
009900
006600
66FF00
009900
00FFFF
3333FF
6666FF
9999FF
33FFFF
66FFFF
99FFFF
CCFFFF
AQUA
TEAL
BLUE
00FFFF
008080
0000FF
CCCCFF
0000CC
000099
000099
CCCCFF
000066
000033
000099
00CCCC
009999
006666
003333
FFFF33
FFFF66
FFFF99
FFFFCC
YELLOW
CCCC00
999900
666600
333300
FF33FF
FF66FF
FF99FF
FFCCFF
FUCHSIA
CC00CC
990099
660066
330033
7D337D
7D667D
7D997D
7DCC7D
TEAL
E100E1
CC00CC
AF00AF
990099
FF3300
FF3333
FF3366
FF3399
FF33CC
FF33FF
FF6600

FF6633

FF6666

FF6699

FF66CC

FF66FF

FF9900

FF9933

FF9966

FF9999

FF99CC

FF99FF

FFCC00

FFCC33

FFCC66

FFCC99

FFCCCC

FFCCFF

FFFF00

FFFF33

FFFF66

FFFF99

FFFFCC

FFFFFF

CC0000

CC0033

CC0066

CC0099

CC00CC

CC00FF

CC3300

CC3333

CC3366

CC3399

CC33CC

CC33FF

CC6600

CC6633

CC6666

CC6699

CC66CC

CC66FF

CC9900

CC9933

CC9966

CC9999

CC99CC

CC99FF

CCCC00

CCCC33

CCCC66

CCCC99

CCCCCC

CCCCFF

CCFF00

CCFF33

CCFF66

CCFF99

CCFFCC

CCFFFF

990000

990033

990066

990099

9900CC

9900FF

993300

993333

993366

993399

9933CC

9933FF

996600

996633

996666

996699

9966CC

9966FF

999900

999933

999966

999999

9999CC

9999FF

99CC00

99CC33

99CC66

99CC99

99CCCC

99CCFF

99FF00

99FF33

99FF66

99FF99

99FFCC

99FFFF

666600

666633

666666

666699

6666CC

6666FF

669900

669933

669966

669999

6699CC

6699FF

66CC00

66CC33

66CC66

66CC99

66CCCC

66CCFF

66FF00

66FF33

66FF66

66FF99

66FFCC

66FFFF

336600

336633

336666

336699

3366CC

3366FF

339900

339933

339966

339999

3399CC

3399FF

006600

006633

006666

006699

0066CC

0066FF

009900

009933

009966

009999

0099CC

0099FF

33CC00

33CC33

33CC66

33CC99

33CCCC

33CCFF

00CC00

00CC33

00CC66

00CC99

00CCCC

00CCFF

33FF00

33FF33

33FF66

33FF99

33FFCC

33FFFF

00FF00

00FF33

00FF66

00FF99

00FFCC

00FFFF

663300

663333

663366

663399

6633CC

6633FF

660000

660033

660066

660099

6600CC

6600FF

333300

333333

333366

333399

3333CC

3333FF

003300

003333

003366

003399

0033CC

0033FF

330000

330033

330066

330099

3300CC

3300FF

000000

000033

000066

000099

0000CC

0000FF

Un elemento o atributo est declarado en desuso (deprecated)

cuando ha caido en desgracia en la ultima formulacin del standard
html. Puede seguir usndose, y se recomienda que los programas lo
sigan reconociendo y procesando correctamente, mas que nada por
compatibilidad con pginas antiguas, pero puede ser declarado
obsoleto en cualquier momento, y en ese momento su uso se
considerar ilegal.

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>
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.
ENLACES EN HTML
Para colocar un enlace, nos serviremos de las etiquetas
<a> y </a>. Dentro de la etiqueta de apertura deberemos
especificar asimismo el destino del enlace. Este destino
ser introducido bajo forma de atributo, el cual lleva por
nombre href.
La sintaxis general de un enlace es por tanto de la forma:
<a href="destino">contenido</a>
Siendo el contenido un texto o una imagen. Es la parte de
la pgina que se colocar activa y donde deberemos pulsar
para acceder al enlace.
Por su parte, destino ser una pgina, un correo electrnico
o un archivo.

En funcin del destino los enlaces son clsicamente

agrupados del siguiente modo:

Enlaces internos: los que se dirigen a otras partes

dentro de la misma pgina.
Enlaces locales: los que se dirigen a otras pginas
del mismo sitio web.
Enlaces remotos: los dirigidos hacia pginas de otros
sitios web.
Enlaces con direcciones de correo: para crear un
mensaje de correo dirigido a una direccin.
Enlaces con archivos: para que los usuarios puedan
hacer download de ficheros.

Imgenes en HTML
En Internet bsicamente se trabaja con 2 formatos de imagen, que son el formato .JPG y el
.GIF (aunque ltimamente y debido a problemas de copyright y de derechos de autor de la
compresin empleada por el formato GIF, entra tambin a formar parte del universo
imaginstico el nuevo formato .PNG).
GIF
GIF es un formato que no soporta imagen de ms de 256 colores, lo que lo hace ideal para
logotipos e imgenes con no demasiado colorido. GIF adems permite realizar las
operaciones especiales, indicadas a continuacin:

Permite crear fondos transparentes, lo que permite sustituir uno de los colores por
una mscara especial que hace que se muestre el fondo sobre el que se apoya la
imagen. A este formato de imagen transparente se le conoce como GIF89a no
entrelazado.

el formato normal GIF, sin reconocimiento de transparencia de fondo, se le conoce

como GIF87.

Permite crear animaciones dentro de una imagen de forma que varias imgenes se
comprimen en el mismo archivo .GIF, y al ser visualizado por el navegador,
muestran la pequea animacin que encierra la imagen. Esto tambin est incluido

en las caractersticas del formato GIF89a.

Permite tambin por otra parte crear un efecto de difusionado de la imagen, que
conforme se va cargando en nuestro navegador, va mostrando la imagen ms
nitidamente, hasta alcanzar la resolucin total de la misma, de forma que hasta que
no est cargada en su totalidad, nos da una idea de la misma, sin tener que esperar
a que toda ella sea cargada. Este formato es el denominado GIF89a entrelazado.
NOTA: Para manipulado de las imgenes GIF para su uso en Internet
(transparencia, animacin y difuminado), se emplean programas de dominio
pblico (shareware) que se hayan en Internet:
Transparencia (PC) Lview Pro
Gif animado (PC)

Gif Construction Set

Difuminado (PC)

Paint Shop Pro

JPEG
JPEG es un formato de almacenamiento de imgenes; es de dominio pblico, as como su
algoritmo de encriptacin y compresin. La ventaja de este aspecto con respecto al GIF87
(es decir GIF normal de todo sin ningn tipo de efecto), es que mientras que el GIF87 slo
permite hasta un mximo de 256 colores (8 bits), JPG permite hasta un mximo de 16
millones de colores (24 bits), lo que la hace ideal para el almacenamiento de fotografas
escaneadas, ya que su algoritmo de compresin supera conmucho a otros formatos de 24
bits, como puede ser .BMP.
El formato .JPG al igual que el GIF89a, tambin permite el disuminado progresivo de la
imagen, mediante el formato JPEG entrelazado, pero no as las animaciones ni las
trasparencias que permita el GIF89a.

IMAGENES EN HTML
<IMG SRC=ruta_de_imagen/imagen.gif o imagen.jpg>
Al igual que con los hiperenlaces, podemos hacer referencias absolutas o relativas a las
imgenes (Ver hiperenlaces).

<IMG SRC=icono.gif>
mostrara la imagen icono.gif que se halla en el mismo directorio que el documento
.html actual.
<IMG SRC=iconos/icono.gif>
muestra la imagen icono.gif que se halla en un directorio llamado iconos que se halla en
el mismo directorio que el documento .html actual.
<IMG SRC=http://lucas.cdf.udc.es/jgorriz/icono.jpg>
muestra la imagen icono.jpg que se halla en la URL del servidor lucas.cdf.udc.es en el
directorio jgorriz del mismo.
La directiva <IMG> posee varios atributos como son:

SRC=imagen
Indica el nombre del fichero grfico a mostrar (GIF o JPEG en principio que es el
reconocido universalmente por todos los navegadores), ya visto anteriormente.

ALT=texto
Muestra un texto alternativo a la imagen que mostramos para las personas que no
tengan navegadores grficos o empleen un navegador en modo texto como puede
ser el Lynx. Tambin es bueno ponerlo en general, ya que muchos de los usuarios,
desactivan la opcin de ver imgenes en el navegador, y este texto alternativo a la
imagen les har tener una idea de la imagen a la que el texto sustituye.

ALIGN=TOP | MIDDLE | BOTTOM

Indica como se ha de alinear el texto que siga o preceda a la imagen que
mostremos. TOP coloca el comienzo de texto en la parte superior de la imagen,
MIDDLE a la altura de la parte central de la misma y BOTTOM alinea el texto en el
pie de imagen. Por defecto la alineacin vara con el tipo de navegador empleado.

BORDER=tamao numrico
Indica un valor numrico para el borde de una imagen que se visualiza como un
marco alrededor de la misma en la pantalla del navegador: Cuando dicha imagen
acte como hiperenlace, si ponemos BORDER=0, no se ver dicho borde, y slo se

sabe que es imagen con hiperenlace si pasamos el ratn por encima de la misma, y
el puntero cambia de forma a una mano con el dedo ndice, indicativa de que es
hiperenlace. Por defecto y la imagen no es enlace, es 0, pero si acta como enlace el
valor por defecto es 1.

HEIGHT=tamao numrico
Indica el alto de la imagen en puntos (pixels) o en porcentaje. Se emplea para variar
el tamao de la imagen original, as como para indicar al navegador el tamao de
pantalla que debe de reservar para dicho grficoen altura.

WIDTH=tamao numrico
Indica el ancho de la imagen en puntos (pixels) o en porcentaje. Se emplea para
variar el tamao de la imagen original, as como para indicar al navegador el tamao
de pantalla que debe de reservar para dicho grfico en anchura.
TRUCO: Un truco para que nuestra pgina cargue antes las imgenes, es indicar al
navegador con estos 2 ltimos atributos el tamao en ancho y alto real de la
imagen, de forma que el navegador les asigne su espacio real a la hora de
visualizarlos, y mientras las va cargando, cargue tambin el resto del documento
HTML. De no hacerlo as, el navegador no sabr exactamente el tamao de la
imagen real, y la ir cargando; mientras no finalice su carga, como no sabe el
tamao real que ocupar la imagen (ya que no se o hemos indicado con los
atributos correspondientes), no seguir bajando el resto de la pgina, hasta que
finalice de bajar las imgenes, lo que retarda la carga de la pgina HTML completa
con texto y grficos.

HSPACE=valor de margen
Indica un margen horizontal que debe existir entre la imagen y el texto que lo
circunde (si lo hubiera). Este valor separa, tanto al texto que precede como al que
sigue a la imagen.

VSPACE=valor de margen
Al igual que el anterio, pero para mrgenes verticales de la imagen.
TRUCO: Hay una forma muy sencilla de crear espacio vaco en nuestras pginas, lo
que puede resultar muy conveniente de cara a construir mrgenes o crear
determinados efectos en a pantalla. Podemos hacerlos de 2 formas: con WIDTH y
HEIGHT definimos el espacio que debe de ocupar la imagen. Si sta es transparente

o de un slo color, el efecto ser el de un cuadro vaco o slido, segn nuestras

necesidades; con HSPACE y VSPACE no cambia el tamao de la imagen, con lo que
podemos definir un gran espacio para ela y visualizarla o no, si optamos por hacer
un fondo transparente.

TABLAS HTML
Una tabla en un conjunto de celdas organizadas dentro de las cuales
podemos alojar distintos contenidos.
Para empezar, nada ms sencillo que por el principio: las tablas son
definidas por las etiquetas <table> y </table>.
Dentro de estas dos etiquetas colocaremos todas las otras etiquetas,
textos e imgenes que darn forma y contenido a la tabla.
Las tablas son descritas por lneas de izquierda a derecha. Cada una de
estas lneas es definida por otra etiqueta y su cierre: <tr> y </tr>
Asimismo, dentro de cada lnea, habr diferentes celdas. Cada una de
estas celdas ser definida por otro par de etiquetas: <td> y </td>. Dentro
de estas etiquetas ser donde coloquemos nuestro contenido.
Aqu tenis un ejemplo de estructura de tabla:
<table>
<tr>
<td>Celda 1, linea 1</td>
<td> Celda 2, linea 1</td>
</tr>
<tr>
<td> Celda 1, linea 2</td>
<td> Celda 2, linea 2</td>
</tr>
</table>
El resultado:
Celda 1, linea 1 Celda 2, linea 1

Celda 1, linea 2 Celda 2, linea 2

Introduccin a los formularios
Un formulario HTML es una seccin de un documento que contiene
contenido normal, cdigo, elementos especiales llamados controles
(casillas de verificacin (checkboxes), radiobotones (radio buttons),
menes, etc.), y rtulos (labels) en esos controles. Los usuarios
normalmente "completan" un formulario modificando sus controles
(introduciendo texto, seleccionando objetos de un men, etc.), antes de
enviar el formulario a un agente para que lo procese (p.ej., a un servidor
web, a un servidor de correo, etc.)
FORMULARIOS HTML
Los formularios son una de las herramientas de que disponemos a la hora
de hacer nuestras pginas web interactivas, en el sentido de que nos
permiten recopilar informacin de la persona que ve la pgina, procesarla
y responder a ella, pudiendo de esta forma responder adecuadamente a
sus acciones o peticiones.
El proceso comienza con la creacin en nuestra pgina de un formulario
de entrada de datos, que va a contener diversos campos diferentes en su
funcionalidad y que nos van a permitir recopilar toda aquella informacin
que deseemos de la persona que ve la pgina. Estos datos, una vez
completado el formulario, sern enviados normalmente al servidor para
su procesamiento o a nosotros directamente, mediante correo
electrnico.
Para poder procesar la informacin recibida mediante un formulario
necesitaremos un programa especial, que normalmente se aloja en el
servidor web, llamado CGI (Common Gateway Interface), que suele estar
escrito en Perl o en C++, de los disponemos de gran cantidad de ellos en
pginas especializadas de Internet. Tambin es posible procesar esa
informacin mediante pginas ASP (Active Server Pages) o JSP (Java Server
Pages), que son pginas que contienen dentro de su cdigo HTML trozos
de cdigo escrito en Visual Basic Script o Java Script recpectivamente.
Mediante alguno de estos mtodos podremos incorporar los datos
recibidos del formulario a una base de datos, crear un registro, enviar un
mensaje automtico de respuesta al usuario, validar un pedido, confirmar
el acceso a un sistema remoto, etc.

Una vez procesada de esta forma la informacin recibida podremos enviar

una pgina de respuesta definida a nuestro visitante, con lo que podremos
personalizar esta respuesta de antemano.
Los formularios estn formados por una serie de controles distintos, cada
uno de los cuales est asociado a un tipo concreto de datos o una accin
predeterminada: botones de envo y borrado de datos, listas de seleccin,
cajas de entrada de texto, etc.
El resultado de cualquier formulario es una lista de variables y valores
asignados a las mismas, que tienen todos ellos un atributo en comn: el
nombre de su variable.
Etiquetas <FORM>...</FORM>
Estas etiquetas son las que delimitan el comienzo y el final de un
formulario. Si queremos mostrar en una pgina un elemento aislado de un
formulario, aunque sea con otra finalidad diferente a la del envo de los
datos que contenga al servidor (por ejemplo para tratar esa informacin
mediante Javascript), es necesario delimitar ese elemento de formulario
mediante las etiquetas <FORM> y </FORM>. Si no lo hacemos as,
I.Explorer s mostrar el elemento, pero Nestcape no.
La pareja de etiquetas se introduce en el cdigo HTML dentro del BODY de
la pgina, en el lugar en que queramos que nos aparezcan los elementos
del formulario.
Sus principales atributos o parmetros son:
* action = "ruta_programa". Indica el programa del servidor que va a
"tratar" las variables que se enven con el formulario o el envo de los
datos mediante correo electrnico mediante el valor "mailto:
direccion_de_correo", en cuyo caso deberemos aadir el parmetro
ENCTYPE="text/plain" para que lo que recibamos resulte legible. Tambin
puede ser una URL usando el mtodo GET (por ejemplo, un botn para ir a
otra pgina).
En el caso de que definamos aqu un programa para el tratamiento de
datos deberemos especificar su ruta relativa respecto al directorio de
carpetas del servidor en dnde tengamos situado nuestra aplicacin web
o bien una URL completa, si el programa est en otra direccin de
Internet.

* method = " POST / GET " . Indica el mtodo segn el que se van a
transferir las variables del formulario. POST enva los datos, normalmente
al programa CGI definido en action o por correo si en action hemos
utilizado mailto. El mtodo GET aade los argumentos del formulario al
URL recogido en action (utilizando como separador de las variables la "?").
El mtodo de uso ms normal es POST, y en el caso de que estemos
mandando el formulario a nuestra direccin de correo electrnico es
obligado usarlo.
Con GET los datos son encadenados al URL especificado en action ,
utilizando el tipo de codificacin especificado en el atributo enctype. Este
mtodo se utiliza cuando los datos no modifican la base de datos, por
ejemplo, al realizar una bsqueda, y los caracteres a enviar tienen que
pertenecer obligariamente al conjunto ASCII.
Con el mtodo POST se realiza una transaccin mediante el protocolo
HTTP, utilizando la codificacin enctype. Se utiliza para aplicaciones que
modifican la base de datos de destino.
* enctype =" tipo ". Indica el tipo de documento en formato MIME. El ms
usado para que lleguen el contenido a travs de un mail con el mtodo
post sera "text/plain". Especifica el tipo de encriptacin que se va a
realizar con los datos que se van a enviar. Este atributo solamente se
aplica si method es POST. Indica como se codificar el formulario si utiliza
el mtodo POST. Por defecto es "application/x-www-form-urlencoded".
Otro posibles valor es "multipart/form-data". Ms adelante veremos en
que caso se utiliza uno u otro tipo.
* accept =" tipo MIME ", que indica al servidor qu tipos de archivo MIME
se van a aceptar en el envo. Normalmente no se usa, pero si nos es
necesario el administrador de nuestro servidor web nos puede indicar
cuales son aceptados.
* accept-charset = "charset ", que especifica la lista de caracteres
permitidos que deben ser interpretados correctamente por el servidor
receptor. Por ejemplo, si el servidor admite como caracteres permitidos
cdigo HTML, en valor de charset ser "text/html".
* target= " nombre ".. Este atributo funciona igual que el homnimo de
las etiquetas <A> y <FRAME>, e indica en qu ventana de una pgina con
frames se debe mostrar el resultado del proceso de datos mediante el
programa CGI.

Ejemplo.<form action="cgi-bin/control.exe" method="post" enctype="text/plain"

name="miform">
...
...elementos del formulario
...
</form>

Campos de texto o contrasea

Los campos de texto sn los ms comunmente utilizados en los
formularios, permiten que nuestros usuarios nos envien un texto de una
sola lnea y una longitud que si queremos podemos limitar.
Si lo que queremos es que nuestro visitante nos enve un texto en el que
se pueda incluir mas de una linea, entonces deberemos usar un
' + s2 + '
'); document.close (); } else history.go(-1)" href="javascript:void(null)">
Maximizar Seleccionar XML
A continuacion vamos a ver los atributos mas comunes que utilizaremos
en nuestros campos de texto y de contrasea:
name - Contiene el nombre que identificar el campo de formulario con su
valor
value - Es el valor por defecto del campo, util para indicar un ejemplo.
disabled - Si indicamos esta propiedad, el campo de texto aparece
bloqueado y no se puede escribir en el.
readOnly - No bloquea el campo pero no permite que su valor por defecto
sea modificado.
length - Indica el nmero de carcteres que se muestran simultneamente
en pantalla.
maxlength - Limita la cantidad de caracteres del campo.
Vamos a ver un ejemplo mas completo de campo de texto:
000 <input type="text" name="nombre" value="Manolo"
001 length="35" maxlength="120"> </CODE< code>

Maximizar

Seleccionar

XML

Este campo llamado nombre mostrar 35 caracteres simultaneamentey

permitir hasta 120, su valor por defecto ser 'Manolo'.
1. Estructura bsica de una pgina web

Para ver el cdogo HTML (la receta) de cualquier documento Web (de este por
ejemplo) basta con elegir en el navegador la opcin "View" o "Ver" y luego "Source" o
"Cdigo Fuente".
Todo documento HTML tiene dos partes infaltables:
1. Cabeza
Delimitado por las etiquetas <HEAD> ..... </HEAD>. Establecenm el comienzo y fin de
la cabecera del documento. En la cabecera se puede guardar informacin acerca del
documento como por ejemplo el titulo, palabras clave para uso de buscadores y, en
general, datos que no se consideran parte del contenido del documento pero aportan
infomacin sobre el mismo. El mas importante y obligatorio, es el ttulo del documento
(elemento TITLE).
<TITLE> ....</TITLE>. El navegador no lo presentara junto al contenido del documento,
pero lo har disponible al usuario. Los navegadores actuales lo muestran en la barra
superior de la ventana del browser y lo utilizan como referencia cuando se agrega la
pagina al listado de sitios favoritos.
Cuerpo
Marcado por las etiquetas <BODY> .... </BODY>. Todo lo que se encuentre entre estas
etiquetas sera lo que el navegador mostrar en pantalla como contenido neto de la
pgina. Puede incluir
gran variedad de elementos, cada uno con sus correspondientes atributos.
Tanto la cabeza como el cuerpo tienen que estar dentro de las etiquetas <HTML> lo
primero que aparece en todo documento y </HTML> la ltima que aparece en todo
documento.

GUA PARA CONSTRUIR UN SITIO WEB

2. Cmo armar el envase de una pgina Web

Para crear archivos en formato HTML (lase pginas web) no es necesario invertir en
caros y dificultosos programas de diseo, basta con disponer de un editor de texto
plano. Todos los sistemas operativos incluyen algun editor de textos plano: Windows
95/98/NT incluye el Notepad o bloc de notas, Macintosh incluye el SimpleText, Unix
incluye Vi y Ed, etc.
Por otro lado, existen procesadores de texto avanzados
Para que los
(Microsoft Word, Lotus Ami Pro, etc) que entre otras mejoras
navegadores
incluyen la opcin de guardar los archivos en formato HTML. Dado reconozcan a un
que lo nico que est al alcance de todos los usuarios es un
archivo HTML
simple editor de textos, en ste tutorial vamos a utilizar esa
como tal, su
alternativa, ya que los resultados sern los mismos (o incluso
extensin debera
mejor), que los que se obtienen con un sofisticado procesador de ser ".htm" o bien
textos.
".html".
Creacion de un archivo HTML en el Bloc de notas de Windows
En Windows un archivo de texto plano se reconoce por su extension ".txt" , las
imagenes por las extensiones ".jpg', ".gif", los documentos de Word ".doc", etc. Del
mismo modo, para que los navegadores reconozcan a un archivo HTML como tal, su
extensin debera ser ".htm" o bien ".html".
A continuacin crearemos nuestro primer archivo ".htm" (o nuestra primera pgina
web) en el Bloc de notas. Los pasos a seguir son los siguientes:
1) Abrir el Bloc de notas (En windows: Inicio - Programas - Accesorios - Bloc de notas)
2) Sin ingresar ningun contenido, vamos a grabar el archivo en formato HTML. Para
asignarle la extension ".htm" de la que hablamos antes (".html" tambien sirve), ser
necesario introducir el nombre del archivo con el siguiente formato:
"nombre.extension". En nuestro caso, el nombre sera "prueba.htm":

Primer paso cumplido, veamos el segundo: cmo agregarle contenido.

GUA PARA CONSTRUIR UN SITIO WEB

3. Cmo insertar contenido en la pgina

Vamos a agregarle las primeras etiquetas necesarias para que el documento diga:
Aprendiendo HTML
En este ejemplo estamos usamos etiquetas para distinguir la cabecera, el cuerpo, el
titulo y los parrafos del documento.
Todo esto lo aprendimos en la primera entega el tutorial de HTML de Terra.
Vamos a transformarlo en un documento Web:
1)Antes de pasar el texto, vamos a insertar el archivo HTML creador y a distinguir sus
dos principales partes: encabezado (HEAD) y cuerpo (BODY).
Siguiendo los pasos que vimos en el artculo Como crear documentos HTML vamos a
crear el archivo. Despues colocaremos las etiquetas correspondientes, asegurandonos
que tenga el siguiente aspecto:

2)Identificaremos los prrafos que componen el texto delimitndolos con el par de

etiquietas <P> .... < /P>. stas sirven para delimitar el comienzo, la alineacin y el fin de
los parrafos (la "P" es por paragraph). Dentro del cuerpo del documento insertaremos
el texto delimitado (recuerden que en esta parte de las vamos a definir todo lo que
queramos que se vea en la pantalla):

3) El ltimo paso es grabar el archivo en formato ".htm" para que lo reconozca el

navegador.
4) La pagina debe mostrarse asi en el navegador:

Visualizacion de archivos HTML

La visualizacin de las pginas es una tarea mucho mas sencilla que la de crearlas. De
hecho, cualquier usuario de Internet est familiarizado con el navegador con el cual
vamos a mostrar el contenido de las pginas. Para ver nuestro documento
'prueba.htm', bastar con abrir el navegador, seleccionar la opcin Open del men
File, y elegir el archivo que acabamos de crear.

4. Editores de HTML

Seguramente muchos se estaran preguntando si vale la pena aprender HTML cuando

hay tantas herramientas disponibles para la creacin de pginas Web. Se los conoce
con el nombre de editores WYSIWYG (pronnciese "guisigig") y responde a la siglas

de las palabras "What you see" (lo que ves en el programa) "is what you get" (es lo que
obtens en el navegador).
A pesar del avance de estos programas, para todo aquel que
Nuestra
quiera edificar un buen sitio, vale la pena apredender HTML. Por
recomendacin es
varios motivos:
que, si usan un
Siempre es interesante saber que se est haciendo y, por sobre editor, utilicen uno
todas las cosas, ser capaz de controlar el comportamiento de las
que permita un
pginas.
fcil acceso y
determinada pgina creado con un editor y, en cambio, si una
creada con HTML "puro".

edicin del
codigoHTML.

cmo debemos de crearlos para no quedar atados a un navegador en concreto, hemos

de conocer HTML.
Otra pregunta fundamental que puede surgir es si deben utilizarse estas herramientas
o si se debe trabajar con un simple editor de textos. Para esta pregunta existen
respuestas para todos los gustos. Cualquiera que haya trabajado con un editor HTML,
habr comprobado cmo puede ahorrarle buena parte del trabajo ms pesado.
Tambin, probablemente, haya tenido que hacer modificaciones en el cdigo fuente.
Nuestra recomendacin es que, si usan un editor, utilicen uno que permita un fcil
acceso y edicin del codigoHTML.
Existen muchos y excelentes programas comerciales de este tipo, pero si
tu presupuesto es limitado o si tus intenciones no son ambiciosas en
exceso puedes utilizar alguno de los muchos programas shareware o
freeware que se ofrecen por Internet. Lo ms recomendable para aprender el lenguaje
HTML es el uso de editores que permiten trabajar con el cdigo. A continuacin, te
mostramos una tabla con varios programas de edicin:
Programa

Descripcin
Editor de HTML muy popular que soporta los ltimos estndares y
extensiones del web: Microsoft Internet Explorer 4, Netscape
Communicator 4, WebTV, Dynamic HTML, Cascading Style Sheets,
HotDog
HTML 3.2 y HTML 4.0. Incluye asistentes, consejos y tutoriales para un
fcil aprendizaje. Incluye diversos conectores que pueden ser
descargados de la Red y actualizados.
Herramineta para la edicin de pginas web sencilla de usar. Incluye
un asistente para la creacin de pginas, numerosos efectos de diseo
HoTMetaLpro
y herramientas de tratamiento de imgenes. Incluye la posibilidad de
editar el cdigo fuente de las pginas.
Potente editor de HTML que incluye diseadores y previsualizadores
de tablas, formularios, marcos y mapas, y prueba de pginas mediante
Netscape o Explorer. Ofrece la posibilidad de comprobar la ortografa
HTMLLedPro
de los documentos. Permite importar documentos en formato RTF
(Rich Text Format), abrir y guardar documentos remotos, y hacer
bsquedas y reemplazos globales.

Microsoft
FrontPage

Quizas el ms difundido de los editores. Permite ver el codigo fuente

de las paginas, admite previsualizacion de tablas, formularios, marcos
y mapas, y prueba de pginas mediante Netscape o Explorer.
mediante Netscape o el Explorer. Incluye asistente y tutoriales; y
permite abrir y modificar documentos remotos.

CURSO DE HTML
Cmo construir un sitio Web
Construir un sitio es sencillo, basta con conocer los secretos del HTML, el lenguaje
que "hablan" las pginas Web. Con esta entrega iniciamos una gua para aprender a
edificar un sitio o perferccionar uno ya existente, sin gastar un cenatvo.

+ ampliar imagen
Gua prctica de
HTML

Este tutorial esta dirigido a cualquiera que, por trabajo o por

placer, desea iniciarse en el uso activo de este medio de
comunicacin. Aunque resultar til a todos los usuarios, est
gua no est orientada a programadores ni a profesionales del
diseo Web. Es un tutorial hecho por usuarios para aquellos que
quieren o necesitan ir mas all de la navegacin y comenzar a
crear sus propios contenidos o comprender mejor los que otros
ofrecen. Aqu, una breve introduccin al lenguaje, su historia y

su evolucin.
Para poder comunicarnos con otras personas necesitamos hablar el mismo cdigo o
idioma. Qu tiene que ver HTML con esto? La respuesta es simple: HTML es el idioma
comn utilizado para publicar documentos en Internet y para que cualquier
computadora en el mundo pueda interpretarlos. Cualquiera que quiera armar un sitio
Web debe tener conocimientos de HTML, del mismo modo que todo aquel que quiera
escribir una carta debe tener conocimientos del idioma espaol.
HTML es la sigla de Hypertext Markup Language, o Lenguaje de
Marcas de Hipertexto y tiene su origen en el trabajo de Tim
Berners-Lee en 1989. En poco tiempo y gracias a la popularizacin
del navegador Mosaic, este lenguaje ha evolucionado pasando
por varias versiones hasta la actual, HTML 5.
Hoy en da es el mtodo mas utilizado para publicar documentos
en la Web. Como primera aproximacion revisemos los trminos
implicados:
A. Lenguaje
A diferencia de lo que suele ser habitual cuando hablamos de

Cualquiera que
quiera armar un
sitio Web debe
tener
conocimientos de
HTML, del mismo
modo en el que
todo aquel que
quiera escribir una
carta debe tener
conocimientos del
idioma espaol.

lenguajes en informatica, HTML no es estrictamente un lenguaje de programacin.

Con HTML no se crean aplicaciones o programas sino documentos.
B. Marca
Un documento HTML es un archivo de texto cuyo contenido consta de intrucciones por
un lado, y texto por otro. Las instrucciones se realizan mediante marcas a las que nos
referiremos con la expresin etiquetas o, en ingles, tags. Las etiquetas o instrucciones
encierran al texto que debe cumplirlos:
Por ejemplo:
<Title> Bienvenidos a mi pgina Web</Title>
La primera etiqueta "<Title>" quiere decir que todo lo que va despus de la etiqueta es
el ttulo y </Title> (misma etiqueta con "/" adelante) indica que hasta all llegar el
ttulo.
C. Hipertexto
Gracias al HTML es posible definir zonas sensibles en los documentos (los famosos
links o enlaces). Al activarlas desde un programa navegador podremos acceder a otros
documentos HTML, mandar un mail, bajar un archivo o macceder a cualquier recurso
disponible en Internet.
La evolucion de HTML
HTML es una aplicacin SGML (Standard Generalized Markup Language). Podemos
considerar a SGML como un metalenguaje que permite construir lenguajes de
publicacin y distribucin de documentos que satisfacen unas determinadas
carctersticas.
Las caractersticas especiales de SGML lo convierten en un lenguaje independiente de
plataforma y sistema operativo, por esto, una aplicacin de este lenguaje (como es
HTML), fue elegida como lenguaje de publicacion en la Web. Dicho de otra manera: un
documento HTML es legible independientemente del tipo de computadora, sistema
operativo (Windows 95, 98, 2000, Unix, etc), y navegador que el usuario utilice para
acceder a l.
Los documentos HTML no son mas que archivos que contienen texto. Parte de este es
lo que se quiere mostrar; y la otra parte son las etiquetas HTML que funcionan como
palabras claves que indican al navegador que va a interpretar la pagina como ubicar
cada cosa: donde poner determinada imagen, que formato debe tener un texto, la
presentacin de la informacion en tablas, etc.
Ahora que sabemos que se entiende por HTML, pasemos a ver cmo es la estructura
bsica de estos documentos.

PRRAFOS,SALTOS DE LNEA,LINEAS HORIZONTALES.

Cuando nosotros estamos elaborando una pagina WEB, en el editor que sea, cundo la
vomos a correr el browser lo primero que nos damos cuenta es que los espacios que
dimos en el editor no sean respetado. Con este objetivo es que se crearon estas
etiquetas. Veamos como funciona la primera.

&ltPARRAFOS>
Si nosotros queremos escribir un prrafo grande, y no nos importa que los retornos de
carro sean aleatorios (dependiendo del tipo de navegador y de la resolucin de la
pantalla en el que se est visualizando el documento), pero sin embargo queremos
que haya una separacin entre prrafo y prrafo, poseemos una directiva cerrada en
HTML, que nos solucionar el problema: <P>...</P>, estas etiquetas se utilizan para
indicar el inicio y el final de un prrafo
Con este comando forzamos un salto de lnea doble, es decir dejando una linea en
blanco.
CLEAR= indica que la lnea deber saltar hasta encontrar la condicion adecuada.
<P CLEAR=left>
busca una linea que tenga libre el margen izquierdo
<P CLEAR=right>
busca una linea que tenga libre el margen derecho
<P CLEAR=all>
busca una linea que tenga ambos margenes libres
ALIGN= indica que la proxima linea estara alineada. Aqui es posible usar el cierre del
comando para indicar el fin de alineado.
<P ALIGN=center> centra linea entre ambos margenes.
<P ALIGN=right> corre la linea al margen derecho.
<P ALIGN=justify> justifica la linea entre ambos margenes.
<P ALIGN=indent> indenta la linea.
Ademas se pueden usar el parametro ID=nombre un identificador de parrafo en lugar
de usar el comando para hacer enlaces en la misma pagina. Tambien se puede
introducir el parametro NOWRAP=off usado para impedir el salto de linea automatico.

<BR>

Con este comando fuerzas un salto de linea simple, es decir la siguiente linea empieza
en la linea inmediatamente inferior, respetando la misma sangria. Esto es muy usado
para rodear las imagenes flotantes y puedes especificar el parametro CLEAR= para
indicar que la linea debera saltar hasta encontrar la condicion adecuada. Si se coloca
varias veces genera espacios en blanco.
<BR CLEAR=left>
busca una linea que tenga libre el margen izquierdo
<BR CLEAR=right>
busca una linea que tenga libre el margen derecho
<BR CLEAR=all>
busca una linea que tenga ambos margenes libres.
Otros Atributos
STYLE: especifica informacin de estilo sobre un simple elemento del documento. Los
valores se colocan segn el formato "nombre:valor", separados por ";".
TITLE: para titular un documento o una seccin del mismo. Algunos programas visores
pueden colocar el valor de este atributo como texto insertado o audio.
CLASS: para sealar qu tipo de texto contiene. Este atributo solamente es reconocido
por los visores emacs.W3 y Arena; es ignorado por los otros. Su uso identificatorio
dentro del contexto de hojas de estilo, ha ampliado su valor, as como su visualizacin
por todos los browsers que aceptan CSS.
ID:. identifica un prrafo.

<HR>(horizontal rule).
Esta etiqueta es utilizada para insertar una linea horizontal.
ATRIBUTOS
SIZE: La mayora de los browsers despliegan las lneas con un grosor de 3 pxeles. Una
forma de modificar esto es con el atributo SIZE y un valor en pxeles.
EJEMPLO:
Aqu tenemos cuatro lneas. La primera es de tres pxeles porque no tiene ninguna
aclaracin. La segunda es de 15 pxeles, la tercera de 37 y la cuarta de 70.

<HR>
<HR size=15>
<HR size=37>
<HR size=70>
El resultado:
Aqu tenemos cuatro lneas. La primera es de tres pxeles porque no tiene ninguna
aclaracin. La segunda es de 15 pxeles, la tercera de 37 y la cuarta de 70.
WIDTH: La etiqueta <HR> establece una lnea que ocupa todo el ancho de la pantalla.
Para modificar esto es necesario el atributo WIDTH con un valor que puede indicarse
en pxeles o en un porcentaje del ancho de la pantalla.
EJEMPLO:
<HR width=30>
<HR width="50%">

Aqu hay dos lneas: la primera es de 30 pxeles de largo y la segunda ocupa el 50 por
ciento de la pantalla
ALIGN:Esta etiqueta es utilizada para modificar la posicin de la lnea. Se debe indicar
left (izquierda), right (derecha), center (centro), segn corresponda.
EJEMPLO
<HR width="30%" align=right>
<HR width="30%" align=center>
<HR width="30%" align=left> Izquierda

Aqui hay tres lineas: la primera se encuentra alineada a la derecha, la segunda en el

centro, y la tercera a la izquierda.
COLOR:Esta etiqueta es utilizada para ponerle color a la linea.
EJEMPLO
<HR WIDTH=80% SIZE=12 ALIGN=right COLOR=red>
<HR WIDTH=50% SIZE=20 ALIGN=left COLOR=navy>

Comentarios
Es muy til escribir comentarios en el documento HTML sobre el cdigo que
escribimos, que nos pueden servir para recordar posteriormente sobre lo que hicimos,
y que no queremos que se vean en pantalla.
Esto se consigue encerrando dichos comentarios entre estos dos smbolos: <!-- y -->
EJEMPLO:
<!-- Esto es un comentario -->

<PRE>
Como ya les dige anteriormente, cuando nosotros estamos elaborando nuetra WEB, el
editor de texto no respeta los espacios que se dan en el. Para que el texto salga tal cual
como se hizo en el editor se utiliza esta etiqueta.
Esta etiqueta presenta un problema cuando la lnea es demasiado larga, ya que no la
corta el navegador y se mostrara tal y como aparece en el fichero fuente. No se
recomienda como forma rpida de convertir un documento texto a formato visible en
HTML ya que presenta muchas limitaciones y no se obtiene una buena presentacin.
Dentro de la etiqueta PRE no tendrn validez la mayora de las instrucciones HTML,
solo se podrn utilizar <B>, <I> y los hiperenlaces. El resto de las etiquetas HTML son
ignoradas.
EJEMPLO:
<PRE>Esto se vera en el navegador tal cual
como se escribio en el
editor de texto<PRE>.
Esto se vera en el navegador tal cual
como se escribio en el
editor de texto
<SPACER>
Esta etiqueta fue implementada en el Netscape 3.0. Esta etiqueta permite definir
espacios en blanco sin utilizar el elemento <PRE>.Esta etiqueta se puede utilizar en
cualquier zona de una pgina, pero donde ms se aprecia su efecto es en las columnas.
Se escibir asi:
ARIBUTOS:

TYPE:Este atributo a su vez puede ser utilizado con HORIZONTAL y VERTICAL, la

primera deja un espacio en blanco a la izquierda de la primera linea, la segunda deja
un espacio en blanco por arriba de la primera linea. Para ambos tipos el tamao del
espacio se da en puntos (pixels) con el atributo SIZE. El valor por defecto es 0.
<MULTICOL COLS=2>
<SPACER TYPE=HORIZONTAL SIZE=35>
texto texto texto texto texto texto texto texto texto texto texto texto
<P>
<SPACER TYPE=HORIZONTAL SIZE=35>
texto texto texto texto texto texto texto texto texto texto texto texto
<SPACER TYPE=VERTICAL SIZE=35>
texto texto texto texto texto texto texto texto texto texto texto texto
</MULTICOL>
texto texto texto texto texto texto texto texto texto texto texto texto
texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto
texto texto texto texto texto texto texto texto texto
Fjate en que entre las dos instrucciones con tipo horizontal hay un elemento <P>. En
efecto, es necesario indicarle a <SPACER> donde termina el prrafo para que ejecute la
siguiente instruccin del mismo tipo.
&ltMULTICOL>
Con el elemento <MULTICOL> es posible estructurar un documento de forma vertical,
es decir, darle la misma apariencia que tienen, por ejemplo, un peridico o una revista.
ATRIBUTOS:
COLS: Es obligatorio, y determina cuantas laa columnas que apareceran en la pantalla.
GUTTER: Establece el espacio que habr entre columnas el cual se mide en pixels. Si se
omite, el valor por defecto es de 10.
WIDTH Sirve para controlar el ancho de todas las columnas definidas respecto al ancho
de la pantalla. Todas las columnas son siempre del mismo ancho. Este parmetro
tambien se mide en pixels, pero tambien se puede expresar en porcentaje. Si se omite,
por defecto se entiende 100%.
Por supuesto, dentro de las columnas se puede colocar anclas, imagenes, y en general
todas las etiquetas del lenguaje.Las columnas tambien se pueden anidar, es decir,
colocar una dentro de otra.
EJEMPLO:

<MULTICOL COLS=2 GUTTER=10 WIDTH=100%>

texto texto texto texto texto texto texto texto texto texto texto texto
<MULTICOL COLS=2 GUTTER=10 WIDTH=100%>
texto texto texto texto texto texto texto texto texto texto texto texto
</MULTICOL>
</MULTICOL>

Imgenes
Antes de empezar a decirte como se inserta una imgenen en tu pagina WEb primero
te enseare como esta la puedes guardar en tu dsco duro.
1.Hacer click con el botn derecho sobre la imagen.
2.Elija "guardar como..." (save as...) del men archivo
3.Darle la direccin de el directorio donde lo quiere guardar y salve.
Las imgenes son un elemento muy importante para nuestra pagina WEB, ya que la
adornan y la enbellcen, pero hay dos aspectos que debemos tener en cuenta:
La primera es que el tiempo de descarga de una imagen es lento, lo cual quiere decir
que si llenamos nuestra pagina de imgenes va a demorar mucho en descargarse
completamente lo cual puede hacer que la persona si salga sin llegar a ver el contenido
de esta. Es por esto que se dice que las imgenes en la Web son un arma de doble filo.
Una buena imagen puede llamar la atencin y ser de gran utilidad para ilustrar o para
atraer visitantes, pero una imagen mala o muy pesada (es decir, un archivo de muchos
kilobytes de tamao) puede espantar hasta al ms voluntarioso de los navegantes.
La segunda es que el visitante haya deshabilitado la carga automtica de imgenes lo
cual podra ser muy perjudicial si hemos escogido imagenes para explicacion de algo, o
como link,etc.
En cuanto a las imagenes existen dos formatos fundamentales que nos proporcionan el
mejor uso: GIF (llamado as por sus siglas en ingls, Graphic Interchange Format) y
JPEG (iniciales del grupo que lo desarroll, el Joint Photograph Expert Group).
El formato GIF fue creado por la empresa CompuServe, para que sus usuarios pudieran
intercambiar imgenes entre s a travs de la Red. Para almacenar la informacin, el
GIF utiliza 8 bits (unidades de informacin) por cada pixel . Como cada bit tiene dos
estados posibles (uno o cero), la imagen puede desplegar hasta 256 colores. Como la
mayora de los monitores tienen capacidad para representar por lo menos 256 colores
en pantalla , el formato GIF funciona de manera razonable.
Por otro lado, el formato JPG fue creado especialmente para almacenar imgenes con
calidad fotogrfica. Cumple con su tarea sacrificando calidad de imagen a cambio de
una paleta de colores ms extensa. Utiliza 24 bits por pixel, lo que le permite albergar

hasta 16.777.216 colores en cada imagen. A diferencia de lo que se puede llegar a

pensar, el jpg no necesariamente es ms pesados, ya que posee un mecanismo de
compresin que reduce el tamao del archivo mediante cierta prdida en la
informacin.
Como regla general, conviene utilizar archivos con extensin JPG cuando la imagen a
insertar sea una foto. Si, en cambio, nuestra imagen contiene un logo o un dibujo de
pocos colores o con grandes superficies cubiertas por colores parejos, es conveniente
utilizar un GIF.
Insertar una imgen
La etiqueta utilizada para agregar imgenes a una pgina Web es <IMG> y va
acompaada de un atributo fundamental "SCR", que indica la ruta donde se encuentra
el archivo que contiene la imagen a insertar.
Es decir:
<IMG SRC="lugar donde guardo la imagen">
Supongamos que tengo la imagen stopfasc.gif, que est presente en el mismo
directorio donde est la pgina y que la quiero insertar. La etiqueta apropiada sera:
<IMG SRC="stopfasc.gif">
Y el usuario ver en el browser:

EL ATRIBUTO ALT
Otro atributo importante de la etiqueta <IMG> es "ALT". Este atributo permite
complementar la imagen con un texto alternativo, utilizado principalmente para
aquellos browsers que no permiten mostrar imgenes, ya sea porque son navegadores
que slo soportan texto (como Lynx), porque el usuario tiene desactivada esta opcin
o porque se produjo un accidente que impidi la llegada del grfico a la PC del usuario.
El texto aparecer en el espacio correspondiente a la imagen, y tambin cuando el
usuario pase el mouse por arriba de la imagen, incluso si sta baj normalmente a la
computadora del navegante.
Ejemplo:
<IMG SRC="stopfasc.gif" ALT= "contra la intolerancia">
El usuario ver (pasar el mouse arriba del texto):

Imgenes como enlaces

Otra caracterstica interesante de las imgenes insertadas es que permiten ser
utilizadas como hipervnculos. Para esto, es necesario crear un enlace y en vez de
encerrar el texto dentro la etiqueta <A> hay que encerrar una imagen.
Ejemplo:
<A HREF="http://www.mazosoft.net/mazolandia/abandoware.htm"> <img
src="anop.gif" alt="Click aqui para descargarte un videojuego gratis en esta web">
</A>
Resultado:

Tambien podemos enlacer una imagen con nuestra direccion de correo electronico.
Ejemplo:
<A HREF=mailto:canomazo@hotmail.com;img src="buzon12.gif"
alt="Click aqui para mandarme un mail" >
El usuario ver

BORDES:
El atributo utilizado para establecer un borde en una imagen es BORDER= #, dnde #
es un nmero de 0 a 99.
Ejemplo de una imagen sin especificar borde
<img scr="dancer.gif">
HR

<HR> es un elemento vaco por lo que solo tiene marca inicial. Se emplea para separar
bloques de texto representando una lnea horizontal.
Se puede cambiar la apariencia de dicha lnea mediante los siguientes atributos:

NOSHADE: Elimina el efecto de sombra de la lnea.

WIDTH: Permite definir la longitud de la lnea.
SIZE: Permite definir el grosor de la lnea.

Ejemplos:
<HR NOSHADE>
<HR WIDTH=250 SIZE=3>
<HR WIDTH=250 SIZE=6>
<HR NOSHADE WIDTH=400 SIZE=4>

Inicio

DIV
Este elemento se comporta de forma muy parecida al salto de lnea, <BR>, y a su vez
admite los mismos atributos que <P>: ALIGN (LEFT, RIGHT, CENTER); o sea, permite
definir un bloque con los atributos de <P>, pero dejando tan solo un salto de lnea
entre un bloque y otro.
Ejemplo:
<DIV ALIGN=LEFT>
Texto justificado a la izquierda, texto justificado
a la izquierda, texto justificado a la izquierda,
texto justificado a la izquierda.
</DIV>
<DIV ALIGN=RIGHT>
Texto justificado a la derecha, texto justificado
a la derecha, texto justificado a la derecha,
texto justificado a la derecha.
</DIV>
<DIV ALIGN=CENTER>
Texto centrado, texto centrado, texto centrado,
texto centrado, texto centrado, texto centrado.
</DIV>
Esto dar como resultado:

Texto justificado a la izquierda, texto justificado a la izquierda, texto justificado a la

izquierda, texto justificado a la izquierda.
Texto justificado a la derecha, texto justificado a la derecha, texto justificado a la
derecha, texto justificado a la derecha.
Texto centrado, texto centrado, texto centrado, texto centrado, texto centrado, texto
centrado.
Inicio

PRE
El texto insertado entre las marcas <PRE> y </PRE> ser visualizado por el browser,
respetando el formateo tal como haya sido entrado en el fichero fuente HTML, o sea,
respetando los espacios y los saltos de carro.
Ejemplo:
Ejemplo:
<PRE>
Esto es un texto preformateado, por tanto se
respetan los espacios
y los saltos de
carro,
como podrn observar.
</PRE>
El resultado ser:
Esto es un texto preformateado, por tanto se
respetan los espacios
y los saltos de
carro,
como podrn observar.

ADDRESS
El elemento <ADDRESS> se emplea para indicar que un texto representa una direccin
o una firma mostrndolo, generalmente, en letra cursiva. Es muy utilizado para indicar
toda la informacin respecto al autor del documento (direccin, telfono, e-mail,...).
Puede insertarse en cualquier lugar del documento; lo habitual en WWW es incluir
esta zona de direccin al final del documento.
Ejemplo:
<ADDRESS>

Tekin Tontu <BR>

77A Wellington Rd <BR>
Auburn 2144, NSW <BR>
Australia <BR>
e-mail tekin@cis.com <BR>
</ADDRESS>
Esto dar como resultado:
Tekin Tontu
77A Wellington Rd
Auburn 2144, NSW
Australia
e-mail tekin@cis.com
Inicio

CENTER
El elemento <CENTER> no es del HTML 2, sino del Netscape. Centra los elementos
situados entre sus marcas de apertura y cierre. Dichos elementos podrn ser: bloques
de texto, tablas, enlaces, imgenes, formularios, ...
Ejemplos:
<CENTER>
<TABLE BORDER>
<CAPTION ALIGN=bottom>Tabla centrada</CAPTION>
<TR> <TD> Celda 1 <TD> Celda 2 </TR>
<TR> <TD> Celda 3 <TD> Celda 4 </TR>
</TABLE>
</CENTER>
Celda 1 Celda 2
Celda 3 Celda 4
Tabla centrada
<CENTER>
<P>Este ltimo ejemplo es un prrafo de texto centrado
mediante el elemento CENTER. Como pueden observar
cada una de las lneas del prrafo aparecer centrada.<P>
</CENTER>
Este ltimo ejemplo es un prrafo de texto centrado mediante el elemento CENTER.
Como pueden observar cada una de las lneas del prrafo aparecer centrada.

Algunas etiquetas que pueden servir para resaltar texto en HTML, como subrayado,
tachado, encabezamientos y formateos de texto de prrafo, como citas, trozos de
cdigo, etc.
Pues veamos las etiquetas para destacar texto:
<B> o <STRONG>
Las ms conocidas y utilizadas son las negritas, que simplemente ponen el texto con
una anchura mayor, como ms resaltado.
Este es el efecto de una negrita
<I> o <EM>
Las itlicas o cursivas, que sirven para hacer que el texto se incline a un lado.
Este texto est itlica o bien cursiva
<U>
Esta etiqueta sirve para que se subraye el texto, apareciendo una lnea por debajo del
mismo. Aunque en HTML 4 esta etiqueta se ha marcado como obsoleta o no incluida
en las especificaciones, todos los navegadores continan entendindola.
Este texto est subrayado
<STRIKE>
Esta etiqueta no es muy conocida y tampoco muy utilizada. Sirve para que el texto
aparezca tachado, es decir, con una lnea por encima del texto. Esta etiqueta es muy
til cuando actualizamos una informacin que aparece en una pgina y la sustituimos
por otra. En vez de borrar la anterior informacin la podemos tachar, para que los
lectores puedan comprobar que la pgina se encuentra siempre actualizada y en
revisin. Le pasa lo mismo que a la etiqueta <u>, que en la especificacin de HTML 4
no est incluida. Sin enbargo, todos los navegadores la entienden y renderizan
perfectamente.
Este texto est tachado
Encabezamientos <H1> <H6>
Las etiquetas de encabezamientos, o headings en ingls, sirven para destacar un texto,
pero no las podemos utilizar en cualquier caso, porque un encabezamiento siempre
indica un titular o la apertura de una nueva seccin con un ttulo. Las tenemos que

utilizar entonces para estructurar nuestros documentos en secciones y subsecciones y

titular cada una de ellas con un nivel adecuado. <H1> debera haber uno en el
encabezado principal del documento, pero luego podramos tener varios <H2> y
dentro de estos algunos <H3>, si es que los necesitamos. Y as sucesivamente.
Este es un encabezado h3
Formatos de prrafos para destacar textos
Existen algunas etiquetas para destacar prrafos enteros y darles um formato
especfico. Algunos ejemplos son:
<CODE> o <KBD>
Sirve para escribir un cdigo fuente de un lenguaje de programacin. Simplemente
coloca una fuente de un tipo como courier, en el que todas las letras tienen la misma
anchura.
var InstrumentoMusical = new Class({
initialize: function(tipo){
this.tipo = tipo;
}
});
<TT>
Texto de Teletipo. Que crea un estilo como el de las antiguas mquinas de teletipo,
que transmitan informacin con caracteres.
Este texto es tipo teletipo.
Se puede fijar el tipo de letra que se utiliza.
En general con courier.
<CITE>
Sirve para colocar texto de cita, texto dicho por otra persona. Esta etiqueta
generalmente pone el texto en cursiva, pero otros navegadores podran interpretarla
de otras maneras.
Slo s que no s nada!
<BLOCKQUOTE>
Esta etiqueta es bastante til, porque crea un margen tanto a la izquierda como la

derecha, lo que produce un efecto como si fuera un fragmento extrado de otro lugar o
que sirva para comentar la informacin anterior.
Este es un prrafo identado, de manera que se muestra con mrgenes a ambos lados.
Para que se vean los mrgenes tengo que escribir bastante texto. Es una buena utilidad
para destacar un trozo del texto