Que es HTML?

HTML es el lenguaje con el que se definen las pginas web. Bsicamente se trata
de un conjunto de etiquetas que sirven para definir el texto y otros elementos que
compondrn una pgina web.
Este lenguaje se escribe en un documento de texto, por eso necesitamos un editor
de textos para escribir una pgina web. As pues, el archivo donde est contenido
el cdigo HTML es un archivo de texto, con una peculiaridad, que tiene
extensin .html o .htm (es indiferente cul utilizar). De modo que cuando
programemos en HTML lo haremos con un editor de textos, lo ms sencillo posible
y guardaremos nuestros trabajos con extensin .html, por ejemplo mipagina.html
El HTML el lenguaje consta de etiquetas que tienen esta forma <B> o <P>. Cada
etiqueta significa una cosa, por ejemplo <B> significa que se escriba en negrita
(bold) o <P> significa un prrafo, <A> es un enlace, etc. Casi todas las etiquetas
tienen su correspondiente etiqueta de cierre, que indica que a partir de ese punto
no debe de afectar la etiqueta. Por ejemplo </B> se utiliza para indicar que se deje
de escribir en negrita. As que el HTML no es ms que una serie de etiquetas que
se utilizan para definir el contenido del documento y algn estilo bsico.

Historia de HTML
El origen del lenguaje HTML se remonta al fsico Tim Berners-Lee, un trabajador
del CERN (Organizacin Europea para la Investigacin Nuclear) quien a finales de
1989 propuso el lenguaje HTML junto con el protocolo HTTP, cuya finalidad era
crear un medio para poder compartir informacin entre diversos grandes fsicos
de la poca que trabajaban por todo el mundo.
El primer documento que se public de manera formal, sobre la estructura del
HTML se public en el ao de 1991 con el nombre de: HTML Tags, simplemente
texto en donde se explican las etiquetas que se usan en HTML. Este documento
an se encuentra disponible para su consulta en la web: HTML Tags.
Tal y como explica el documento, en HTML se utilizan etiquetas de apertura y de
cierre (solo en algunas excepciones no) en donde se abre con los corchetes
angulares y se cierra de igual manera con los corchetes pero anteponiendo un (/).
Es decir: <Title></Title>
El primero en salir fue el HTML 1, sin embargo no fue considerado un estndar,
por lo que muchas veces se considera al HTML 2 como la primera versin del
HTML.

HTML 2: Presentado en el ao de 1995, el HTML 2 es considerado la primera

versin del HTML, el cual no soportaba tablas y donde la declaracin explcita de
los elementos body, html y head es opcional.
HTML 3.2: Esta versin se lanz en el ao de 1997 gracias al organismo de
estandarizacin llamado W3C (World Wide Web Consortium). El cual incorpor los
ltimos avances de las pginas web como applets de Java y texto que fluye
alrededor de las imgenes.
HTML 4.0: Lanzada en 1998. Entre sus novedades ms destacadas se encuentran
las hojas de estilos CSS, la posibilidad de incluir pequeos programas o scripts en
las pginas web, mejora de la accesibilidad de las pginas diseadas, tablas
complejas y mejoras en los formularios.
HTML 4.01: sali a la luz en 1999 como una revisin y actualizacin de la versin
HTML 4.0, por lo que no incluye novedades significativas.
HTML 5: quinta revisin importante del lenguaje bsico de la World Wide Web, el
cual especifica dos variantes de sintaxis para HTML: el clsico HTML (text/html), y
la variante conocida como HTML5 y una variante XHTML conocida como sintaxis
XHTML5. Este nuevo estndar aun no es tan utilizado pero su potencial es mucho
mayor a las versiones anteriores, el cual incluye interesantes mejoras como
nuevos elementos y etiquetas.

Extensiones de archivo vlidas para la web en HTML

Las pginas estticas generalmente usan la extensin de archivo .htm o .html. Las
pginas dinmicas usan extensiones que generalmente reflejan el lenguaje o
tecnologa que se utiliz para crear el cdigo, como .php (PHP), .jsp (JavaServer),
etc. En estos casos, el servidor debe estar configurado para esperar y entender
estas tecnologas.
Las pginas web generalmente incluyen instrucciones para el color del texto y el
fondo, as como hipervnculos a imgenes y algunas veces otro tipo de archivos
multimedia.
La estructura tipogrfica y el esquema de color es definida por instrucciones de
Hojas de Estilo (CSS-Cascading Style Sheet), que pueden estar adjuntas al HTML
o pueden estar en un archivo por separado, al que se hace referencia desde el
HTML.
Las imgenes son almacenadas en el servidor web como archivos separados.

Multimedia
Otros archivos multimedia como sonido o video pueden ser incluidos tambin en
las pginas web, como parte de la pgina o mediante hipervnculos. Juegos y
animaciones tambin pueden ser adjuntados a la pgina mediante tecnologas
como Adobe Flash y Java. Este tipo de material depende de la habilidad del
navegador para manejarlo y que el usuario permita su visualizacin.
Comportamiento dinmico
Cdigo del lado del cliente como JavaScript o AJAX pueden incluirse adjuntos al
HTML o por separado, ligados con el cdigo especfico en el HTML. Este tipo de
cdigo necesita correr en la computadora cliente, si el usuario lo permite, y puede
proveer de un alto grado de interactividad entre el usuario y la pgina web.
Las pginas web dinmicas son aquellas que pueden acceder a bases de datos
para extraer informacin que pueda ser presentada al visitante dependiendo de
ciertos criterios. Ejemplo de esto son pginas que tienen sistemas de
administracin de contenido o CMS. Estos sistemas permiten cambiar el contenido
de la pgina web sin tener que utilizar un programa de ftp para subir los cambios.
Existen diversos lenguajes de programacin que permiten agregar dinamismo a
una pgina web tal es el caso de ASP, PHP, JSP y varios ms.

Estructura bsica de HTML

Todos los documentos Html tienen la estructura que se muesta a continuacin,
aunque la etiqueta <body> puede ser sustituida por <frameset> para un tipo de
pginas que dividen la ventana del navegador en varios cuadros (frames).

Entre las etiquetas <html> y <head> se suelen colocar otras

opcionales, como por ejemplo:

En este caso las etiquetas le indican a los buscadores el contenido de nuestras

pginas (description) y algunas palabras clave (keywords) para su localizacin.
La cabecera es la seccin comprendida entre <head> y </head>. En ella se
encuentra necesariamente el ttulo (entre las etiquetas <title> y </title>).

<TITLE> Hola </TITLE>

El cuerpo (body) del documento html es normalmente lo ms importante. Es aqu
donde debemos colocar el contenido de nuestra pgina: texto, fotos, etc.
El cuerpo est delimitado por las etiquetas <body> y </body>

Etiquetas bsicas de HTML

Formato de texto:

Salida

Etiquetas requeridas

El texto en negritas.

El <B>texto</B> en negritas.

El texto en itlicas.

El <I>texto</I>

El texto en formato teletipo.

El <TT>texto</TT> en
Formato teletipo.

texto

El
en 2 tamaos ms
grandes y en rojo. El tamao
puede ser un valor absoluto en
el rango 1...7.
Utilizar la direccin de e-mail

Encabezados:

El <FONT SIZE = +2 COLOR = "RED">

texto </FONT> en 2

Utilizar la direccin de e-mail

<ADDRESS>
chamucohawai@hotmail.com
</ADDRESS>

Salida

Etiquetas requeridas

Encabezado H1

<H1>Encabezado H1<\H1>

Encabezado H3

<H3>Encabezado H3<\H3>

Encabezado H6

<H6>Encabezado H6<\H6>

Prrafos, fin de lnea y comentarios:

Salida
ltima oracin del prrafo.
Primera oracin del nuevo prrafo.
Una oracin
sobre otra.

Etiquetas requeridas
ultima oracin
<P>
Primera oracin
Una oracin
<BR>
Sobre otra.

Etiquetas META por qu utilizar? Ejemplos.

La etiqueta <meta> se utiliza para aadir informacin sobre la pgina. Esta
informacin puede ser utilizada por los buscadores.
Los buscadores consultan la informacin de la etiqueta <meta> de las pginas,
buscando coincidencias con lo que el usuario pretende encontrar.
A travs de esta etiqueta pueden especificarse los atributos name y content. El
atributo name indica el tipo de informacin, y el atributo content indica el valor de
dicha informacin.
Para indicar el tipo de informacin podemos utilizar cualquier palabra que
deseemos, como puede ser "Autor", "Palabras clave", "Descripcin", etc.

<html>
<head>
<meta name="author" content="aulaclic">
<meta name="description" content="Curso de HTML gratuito">
<meta name="keywords" content="cdigo HTML etiqueta pgina web gratis
curso">
</head>

Entidadesds z
Muchas veces necesitamos incluir en nuestros textos, signos que tienen un significado
especial en HTML
(por ej. "<" - menor que).
Para poder mostrarlos, debemos usar su nombre en cdigo.
Los nombres de las entidades estn compuestos por el signo(&), luego el nombre de la
entidad y al final (";" - punto y coma).
Los nmeros de estos caracteres estn compuestos por (&), luego (# - numeral), el
nmero de la entidad y al final (";" - punto y coma).
Por ejemplo para mostrar el signo "<" debemos escribir &lt; o &#60;.
El uso ms comn de los caracteres especiales es el espacio en blanco. Si en un texto
figuran 5 espacios en blanco seguidos, HTML automaticamente borra 4.
Para ingresar espacios en blanco usamos "&nbsp;" y HTML los dejar en su lugar.
Otro uso muy frecuente es el de insertar acentos en el cdigo html por medio de los
nmeros de las entidades

Etiquetas multimedia.

Mediante una serie de etiquetas podemos introducir sonido y video

en nuestras pginas. estas etiquetas llevan una serie de atributos para
indicar el archivo y las caractersticas que queremos incorporar.

Etiqueta bgsound
La etiqueta bgsound sirve para insertar sonido de fondo en las
pginas web. Su principal inconveniente es que slo funciona con
Internet Explorer, por lo que su uso es muy limitado. De todas maneras
vamos a ver cul es su forma y sus principales atributos:
<bgsound src="ruta_fichero" loop="numero" balance="b"
volume="v"></bgsound>
Los valores de los atributos son los siguientes:

src="ruta_fichero" : Indica la ruta donde est el archivo de sonido.

loop="numero" : indica el nmero de veces que debe repetirse el
fichero. si en lugar de un nmero escribimos el valor "infinite" el fichero se
reproducir indefinidamente.

balance="b" : indica el balance del sonido entre los dos altavoces, es

decir, la potencia con que se oir en cada uno de ellos (derecho e izquierdo).
Sus valores pueden estar entre -10,000 y +10,000; siendo el valor 0 un
balance equilibrado entre los dos altavoces.
volume="v" : indica el volumen al que se oir el sonido, sus valores
pueden variar entre -10,000 (mnimo) y 0 (mximo).

Como ya se ha dicho esta etiqueta suele ser muy poco usada ya que
tiene las limitaciones de que slo funciona con Internet Explorer, y
adems el usuario no puede controlar el sonido desde la pgina.

Etiqueta img
La etiqueta <img .../> que se usa normalmente para insertar
imgenes tambin puede servir para insertar videos, sin embargo tiene
sus limitaciones ya que slo funciona con Internet Explorer y no con
todos los tipos de archivo. De hecho slo funciona con videos con
extensin .avi, .mov, y .mpg. los atributos especficos para utilizar esta
etiqueta para video son los siguientes:

dynsrc="ruta_fichero" : Es el atributo usado para localizar el

archivo de video que se quiere visualizar.
loop="n" : Toma como valor un nmero entero que indica el nmero
de veces que se reproducir el video. Si ponemos un valor =-1 el video se
reproducir infinitas veces.
start="fileopen/mouseover" : el valor fileopen es el valor por
defecto e indica que el video empieza a reproducirse al acabar de cargarse la
pgina. El valor mouseover indica que el video no empezar a reproducirse
hasta que el usuario ponga el puntero del ratn encima de l.
Por lo dems se usan los mismos atributos de la etiqueta img es
decir, height y with para
el
alto
y
el
ancho
de
la
consola, hspace y vspace para los mrgenes de la consola. y tambin
podemos usar la etiqueta src="ruta_imagen" para mostrar una imagen en
el caso de que el navegador no pueda cargar el video.
Como ya se ha dicho el principal inconveniente de esta etiqueta es
que slo funciona el video en Internet Explorer, por lo que no es muy
utilizada para este fin.

Etiqueta embed
La etiqueta embed sirve tanto para incrustar archivos de audio como
de video en la pgina web. Esta etiqueta posee varios atributos, que
pueden ser distintos en funcin del objeto que vayamos a mostrar en la
pagina. su sintaxis general sera la siguiente.
<embed src="..." ...(atributos) ...></embed>

la etiqueta de cierre final es conveniente ponerla para que funcione

correctamente, tambin podemos poner una barra inclinada al final de la
etiqueta principal que sustituye a la etiqueta de cierre ( <embed ... />),
en todo caso nunca debemos dejar la etiqueta sin cerrar. A continuacin
vamos a ver cuales son los principales atributos de esta etiqueta y sus
valores.

atributos referentes a vdeo y sonido

src="ruta_fichero"

Indica la ruta para acceder al archivo multimedia que queremos

abrir.
loop="numero/true/false"

Define el nmero de veces que se reproducir el fichero, como valor

podemos poner un numero entero, o las palabras true (infinitas veces)
o false (slo una vez). Este atributo no funciona con todos los
navegadores, especialmente con Internet Explorer en versiones
antiguas. por lo que debemos complementarlo con el siguiente.
playcount="n"

Define el nmero de veces que se reproducir el fichero en Internet

Explorer.
autostart="true/false"

Define si el fichero debe empezar a reproducirse por si solo a la vez

que la pgina (valor true), o debe necesitar la intervencion del usuario
mediante la consola o cdigo javascript para reproducirse

(valor false).Tanto este atributo como los dos anteriores no funcionan

con los archivos flash de video (extensin .swf), los cuales se muestran
siempre al cargar la pgina y en nmero infinito de veces.
type="tipo_fichero"

Atributo importante que declara qu tipo de fichero estamos usando.

El navegador buscar el plugin o programa necesario para abrirlo,
teniendo preferencia el que hayamos indicado. dependiendo del tipo de
fichero puede tomar distintos valores. los ms habituales son:

type="audio/wav" : para archivos de audio con extensin .wav.

type="audio/midi" : para archivos de audio con extensin .mid.
type="application/mpeg" : para archivos de audio o de vdeo del

tipo mpeg. Archivos con extensiones .mp3 .mpg. .mpeg .mp4. Tambin
puede usarse con videos con extensin .avi, ya que tambin lo reproduce, y a
veces el usuario no tiene instalado el plugin para videos avi. Tambin podemos
usar los valores type="audio/mpeg" o type="video/mpeg" segn sea el
archivo de audio o de video.
type="application/mov" :
para
archivos
de
video
con
extensin .mov.
type="application/wmv" :
para
archivos
de
video
con
extensin .wmv.
type="application/x-shockwave-flash" : para archivos flash de
video con extensin .swf.

Esto es lo que se llama el tipo MIME al que pertenece el objeto.

Cada tipo de fichero pertenece a un tipo MIME distinto, hay que tener
cuidado de poner para cada tipo de fichero el tipo que le corresponde o
que sea compatible. En el siguiente enlace hay una lista con todos los
tipos MIME aceptados, aunque la pgina est en ingls, creo que la tabla
con los tipos se entiende bastante bien:
http://www.utoronto.ca/webdocs/HTMLdocs/Book/Book3ed/appb/mimetype.html
pluginspage="URL"

Indica en caso de ser necesario, el plugin que reproducir el fichero,

o la pgina web donde puede descargarse el mismo. Solo se activa en
caso de que el navegador no pueda reproducir el fichero por s mismo.
name="nombre"

Al igual que en otros casos vistos anteriormente, podemos dar un

nombre a la etiqueta, que servir de referencia para trabajar con
enlaces o con cdigo javascript.
volume="v"

para archivos de sonido, indica el volumen al que debe reproducirse

inicialmente el archivo. el valor es un nmero entre 0 y 100, siendo el
valor por defecto 50 en plataformas PC y 75 en MAC.

atributos referentes a la consola.

hidden="true/false"

Este atributo es slo para los archivos de sonido. El

valor true permite no mostrar la consola de sonido. con lo cual si no
hemos puesto el atributo autostar="false" el sonido se reproducir al
cargarse la pgina, sin que haya una consola para modificarlo. El
valor false en principio debe mostrar la consola, pero no funciona bien
en todos los navegadores, por lo que es preferible no usarlo, ya que sta
se muestra por defecto.
width="w" height="h"

Indican el ancho y el alto visible de la consola en pxeles. Debemos

tener en cuenta que algunas consolas son de tamao fijo, y por lo tanto
debemos darle un espacio igual o mayor del que ocupan para que pueda
verse entera.
align="left/center/right/..."

Define la alineacin horizontal o vertical de la consola respecto a los

elementos de la pgina. Funciona igual que con la etiqueta img y tiene
los mismos valores que sta.
hspace="hs" vspace="vs"

Define la separacin vertical y horizontal de la consola respecto a los

otros elementos de la pgina. Funciona igual que en la etiqueta img.
Podemos usar las mismas etiquetas que se usan para las imgenes para
posicionar la consola. Por supuesto tambin podemos posicionarla
mediante cdigo CSS.

Utilizacin de la etiqueta embed

Un ejemplo de etiqueta embed para sonido es el siguiente:
<embed src="sonido.mid" loop="1" playcount="1"
type="audio/midi" autostart="false" width="200"
height="50" />
Un ejemplo de etiqueta embed para video es el siguiente:
<embed src="http://mivideo.mov" type="application/mov"
width="400" height="300" autostart="false" ></embed>
Tambin se puede utilizar la etiqueta embed para mostrar en la pgina
archivos de Adobe Reader (Texto en PDF).
La consola de la etiqueta embed tiene un comportamiento similar a la
etiqueta img en cuanto a posicionamiento, por lo que admite los mismos
atributos.
El problema de la etiqueta embed es que el usuario no siempre tiene
instalado en su equipo los plugins necesarios para ver el archivo, por lo
que se recomienda utilizar los formatos de archivo ms usados. ya que
para estos los plugins suelen instalarse a la vez que los navegadores.
Otra opcin es poner un enlace al archivo para que en caso de no poder
verse, el usuario pueda descargrselo.
La etiqueta embed fue creada por el navegador Netscape, pero
enseguida la fueron incorporando los dems navegadores, por lo que es
posible que versiones antiguas de Internet Explorer no la reconozcan.
La etiqueta no es reconocida por el estndar oficial del HTML 4.01 y
del XHTML 1.0 del W3C (World Wide Web Consortium), con lo cual la
pgina no pasa el proceso de validacin, (en temas posteriores veremos
qu es esto) pero esto no impide que funcione en la mayora de
navegadores, siempre que se tengan los plugins adecuados para ver los
archivos.
Sin embargo el nuevo HTML5 s que reconoce ya la etiqueta embed,
por lo que en HTML5 s que se pasa el proceso de validacin.