Historia del HTML

Este lenguaje fue desarrollado por la Organización Europea de Investigación Nuclear (CERN) en el
año 1945 con la finalidad de desarrollar un sistema de almacenamiento donde las cosas no se
perdieran, que pudieran ser conectadas a través de hipervínculos. Primeramente crearon un
dispositivo llamado “memex”, el cual era considerado como un suplemento para la memoria.

Posteriormente, Douglas Engelbart, diseñó un entorno de trabajo por computadora que recibiría el
nombre de oNLine System que poseía un catálogo para facilitar la tarea de búsqueda dentro de un
mismo organismo.

Recién en 1965, Ted Nelson acuñó el término hipervínculo, ideando una estructura que se
encontraba conectada de forma electrónica y que más tarde permitiría la creación de la World Wide
Web (1989), un sistema de hipertexto a través del cual era posible compartir una variada
información sirviéndose de Internet (servía para la comunicación entre investigadores nucleares
que formaran parte del CERN).

El norteamericano Tim Berners-Lee fue el primero en proponer una descripción de HTML en un

documento que publicó en 1991. Allí describía veintidós componentes que suponen el diseño más
básico y simple del HTML.

El tipo de codificación que se utilizó para el desarrollo de este sistema de hipervínculos debía ser
comprendido, tanto por ordenadores tontos como por mega-estaciones, por eso fue necesario crear
uno absolutamente simples, tanto en lo que respectaba al lenguaje de intercambio (HTML), como
el que hacía referencia al protocolo de red (HTTP).

Al día de hoy existen los Editores Web que permiten que los diseñadores, a través de herramientas
gráficas que reciben el nombre de WYSIWYG puedan crear páginas web sin conocer el código html,
este se crea de forma automatizada, dándole estructura a la web y permitiendo que sea más allá
del ordenador donde es creada. Entre los recursos que pueden enlazarse al código HTML se
encuentran fotografías, vídeos, archivos de otras webs o incluso de la misma y todo tipo de
contenido que se encuentre subido a la red.

Para aprender HTML en profundidad tenemos un manual en DesarrolloWeb.com. Además se

pueden consultar los enlaces a distintos manuales que tenemos en nuestro buscador en la sección
de HTML.

Si lo que deseamos es tener una idea global de lo que es la publicación en Internet y los pasos a
seguir para colocar nuestras páginas en la web lo más adecuado será consultar el manual de Publicar
en Internet.
Qué es HTML

El lenguaje con el que crean las páginas web.

HTML es el lenguaje con el que se definen las páginas web. Básicamente se trata de un conjunto de
etiquetas que sirven para definir el texto y otros elementos que compondrán una página web.

El HTML se creó en un principio con objetivos divulgativos de información con texto y algunas
imágenes. No se pensó que llegara a ser utilizado para crear área de ocio y consulta con carácter
multimedia (lo que es actualmente la web), 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 utilizarían en un futuro.
Sin embargo, pese a esta deficiente planificación, sí que se han ido incorporando modificaciones
con el tiempo, estos son los estándares del HTML. Numerosos estándares se han presentado. El
HTML 4.01 era el último estándar a febrero de 2001 con actualización a mayo de 2005 donde en
estos momentos se presentó la versión 5 de HTML, que es la que se usa hoy en día.

El HTML es un lenguaje de marcación de elementos para la creación de documentos hipertexto, muy

fácil de aprender, lo que permite que cualquier persona, aunque no haya programado en la vida,
pueda enfrentarse a la tarea de crear una web. HTML es fácil y pronto podremos dominar el
lenguaje. Más adelante se conseguirán los resultados profesionales gracias a nuestras capacidades
para el diseño y nuestra vena artista, así como a la incorporación de otros lenguajes para definir el
formato con el que se tienen que presentar las webs, como CSS.

Una vez conocemos el concepto de HTML vemos la necesidad de escribirlo en algún un editor de
texto. Este lenguaje se escribe en un documento de texto, por eso necesitamos un editor para
escribir una página web. Así pues, el archivo donde está contenido el código HTML es un archivo de
texto, con una peculiaridad, que tiene extensión .html o .htm (se puede guardar con alguna de estas
dos extensiones). De modo que cuando programemos en HTML lo haremos con un editor de textos,
lo más sencillo posible y guardaremos nuestros trabajos con extensión .html, por ejemplo
mipagina.html, en nuestra clase utilizaremos el block de notas como editor de texto HTML.

El lenguaje HTML consta de diferentes y una gran variedad de etiquetas que tienen esta forma <B>
o <P>. Cada etiqueta significa una cosa o se utiliza para algo, por ejemplo <B> significa que se escriba
en negrita (bold) o <P> significa un párrafo, <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 más que una serie de etiquetas que se utilizan para definir el contenido del documento y algún
estilo básico. <B>Esto está en negrita</B>.
 Principales etiquetas HTML

Etiquetas
Apertura Acción Atributos Cierre

<! Comentario. Ninguno -->

<A> Hipervínculo. HREF, NAME, REL, REV, TITLE </A>

Formato para dirección del

<ADDRESS> Ninguno </ADDRESS>
autor.

Url del autor; contexto del

<BASE> HREF </BASE>
documento.

<BASEFONT SIZE> Tamaño de la fuente base. Ninguno NO

<BGSOUND> Sonido de fondo. SRC, LOOP. NO - Internet Explorer

<BIG> Aumenta el tamaño. Ninguno </BIG>

<BLINK> Hace parpadear el texto. Ninguno </BLINK> - Netscape

Da formato con sangría a un

<BLOCKQUOTE> Ninguno </BLOCKQUOTE>
párrafo

BGCOLOR, BACKGROUND, TEXT,

<BODY> Cuerpo del documento. </BODY>
LINK, VLINK, ALINK

CLEAR: Se utiliza en combinación

<BR> Retorno de línea. NO
con ALIGN de IMAGE.

Posición de la leyenda en una ALIGN: TOP/BOTTOM. Internet

<CAPTION> </CAPTION>
tabla. Explorer: LEFT, RIGHT, CENTER

<CENTER> Centrar. Ninguno </CENTER>

Formato para citas en

<CITE> Ninguno </CITE>
itálicas.

<CODE> Formato en tipo código. Ninguno </CODE>

Definiciones marcadas, para

<DD> Ninguno NO
Lista de Definiciones <DL>.

<DFN< Formato en itálica. Internet Explorer </DFN<

 Lista de directorio, con
<DIR> elementos marcados con Ninguno </DIR>
<LI>.

Lista de Definiciones, con

términos marcados con <DT>
<DL> Ninguno </DL>
y definiciones marcadas con
<DD>.

Términos marcados, para

<DT> Ninguno NO
Lista de Definiciones <DL>.

Formato enfatizado en
<EM> Ninguno </EM>
itálica.

SRC, WIDTH, HEIGHT, AUTOSTART,

<EMBED> Sonido de Fondo. NO - Netscape
LOOP.

SIZE, COLOR. Internet Explorer:

<FONT> Definición de la fuente. </FONT>
FACE.

Para ingreso de datos del

<FORM> ACTION, METHOD </FORM>
usuario en un formulario.

<H1 ...H6> Tamaño de letras del 1 al 6. HTML 3.0: LEFT, CENTER, RIGHT </H1 .../H6>

Encabezamiento del BASE, TITLE, ISINDEX, NEXTID,

<HEAD> </HEAD>
documento. META

NOSHADE, SIZE, WIDTH, ALIGN.

<HR> Línea horizontal. NO
Internet Explorer: COLOR

Al principio y al fin de todo

<HTML> HEAD, BODY </HTML>
documento.

<I> Itálica (Cursiva). Ninguno </I>

ALIGN, SRC, ALT, ISMAP, WIDTH,

<IMG> Cargar imágenes. NO
HEIGHT, VSPACE, HSPACE

TYPE, NAME, VALUE, SIZE,

Define un objeto de ingreso
<INPUT> MAXLENGHT, ALIGN, SRC, </INPUT>
en un formulario.
CHECKED

Indica que existe un index en

<ISINDEX> Netscape: PROMPT NO
el server para el documento.

Activa la selección de
<ISMAP> Ninguno NO
imágenes para el usuario.
<KBD> Formato monoespaciado. Ninguno </KBD>

<LI> Ítem de lista. Netscape: VALUE, TYPE NO

<LISTING> Listados Ninguno. Obsoleto. </LISTING>

Literal. Como PRE, pero usa

<LIT> Ninguno </LIT>
letra proporcional.

ALIGN, BEHAVIOR, BGCOLOR,

DIRECTION, HEIGHT, WIDTH, </MARQUEE> - Internet
<MARQUEE> Marquesina.
HSPACE, VSPACE, LOOP, Explorer
SCROLLAMOUNT, SCROLLDELAY.

<MENU> Lista menú. Ninguno </MENU>

Metainformación ubicada en
<META> EQUIV, CONTENT, NAME NO
HEAD.

Es un parámetro que
<NEXTID> NO NO
identifica al documento.

<NOBR> Elimina los saltos de líneas. Ninguno NO

Lista ordenada, con

<OL> elementos marcados con TYPE, START, VALUE. </OL>
<LI>.

Opción de selección dentro

<OPTION> VALUE, SELECTED VALUE NO
de un formulario.

Retorno de línea, con un

<P> Ninguno NO
espacio.

<P ALIGN> Alineación de texto. LEFT, CENTER, RIGHT </P>

<PLAINTEXT> Pasaje de texto plano. Ninguno. Obsoleto. </PLAINTEXT>

Visualiza el texto en su
<PRE> WIDTH </PRE>
formato original.

<S> Texto tachado. Ninguno </S>

<SAMP> Formato tipo ejemplo. Ninguno </SAMP>

Para selección de opciones

<SELECT> NAME, SIZE, MULTIPLE </SELECT>
dentro de un formulario.

<SMALL> Disminuye el tamaño. Ninguno </SMALL>

 Formato enfatizado más
<STRONG> Ninguno </STRONG>
fuerte que <EM>.

<SUB> Subíndice. Ninguno </SUB>

<SUP> Superíndice. Ninguno </SUP>

BORDER, CELLPADDING,
<TABLE> Tabla. CELLSPACING, HEIGTH, WIDTH. </TABLE>
Internet Explorer: COLOR

ALIGN, VALIGN, NOWRAP,

Celdas de una fila en una
<TD> COLSPAN, ROWSPAN, HEIGTH, </TD>
tabla, dentro de <TR>.
WIDTH

Área para ingreso de texto

<TEXTAREA> NAME, ROWS, COLS. </TEXTAREA>
dentro de un formulario.

ROWSPAN, COLSPAN, ALIGN,

<TH> Título de Tabla. VALIGN, NOWRAP, HEIGHT, </TH>
WIDTH

<TITLE> Título dentro de HEAD. Ninguno </TITLE>

<TR> Fila de una Tabla. ALIGN, VALIGN </TR>

<TT> Formato tipo máquina. Ninguno </TT>

Lista no ordenada, con

<UL> elementos marcados con COMPACT, TYPE </UL>
<LI> .

<VAR> Formato tipo variable. Ninguno </VAR>

Se usa con NOBR para una

<WBR> sección que deba ser Ninguno NO
separada.

<XMP> Similar a PRE. Ninguno </XMP>

Atributos
Nombre Etiqueta Acción Valor
Dirección del
HREF URL local o href="www.hp.com"
remoto.
Número de veces que se reproduce el archivo de sonido.
LOOP <BGSOUND> loop=infinite
Para permanente se usa INFINITE o -1.
SRC Nombre del archivo de sonido (Internet Explorer) src="sonido.wav"
Número de veces que se reproduce el archivo de sonido.
LOOP loop=-1
<EMBED> Para permanente se usa INFINITE o -1.
SRC Nombre del archivo de sonido (con Crescendo) src="sonido.mid"
SRC Nombre del gráfico src="imagen.gif"
<IMAGE> Nombre que reemplaza a la imágen cuando ésta no puede
ALT alt="Nombre de Imágen"
ser cargada.
bgcolor="#FFFFFF"
BGCOLOR Color de fondo
(blanco)
BACKGROUND Imágen de fondo background="foto.gif"
TEXT <BODY> Color del texto text="#000000" (negro)
LINK Color de vínculo link="#0000FF" (azul)
VLINK Color de vínculo visitado vlink="#FF0000" (rojo)
ALINK Color de vínculo presionado alink="#00FF00" (verde)
<CAPTION>
ALIGN dentro de Colocar título arriba (TOP) o debajo (BOTTOM) de la tabla. align=top
<TABLE>
<H1..H6>, <P
ALIGN>, <TD>,
ALIGN Alinear el texto: LEFT, RIGHT, CENTER align=center
<TH>, <TR>,
<DIV>,
ALIGN Alinear el texto: LEFT, RIGHT, CENTER align=center
SIZE <HR> Valor de la altura en pixels o porcentaje size=3
WIDTH Valor del ancho en pixels o porcentaje width=50%
SIZE Tamaño de la letra de 1 a 7 size=6
COLOR <FONT> Color de la letra color="#000000" (negro)
FACE Fuente del texto (Internet Explorer) face="helv" (helvética)
HEIGHT <EMBED>, Valor de la altura en pixels o porcentaje heigth=80
<IMAGE>,
WIDTH <MARQUEE>, Valor del ancho en pixels o porcentaje width=50%
<TD>, <TH>
BORDER Borde y ancho del borde en la tabla border=5
CELLPADDING <TABLE> Espacio entre el borde y el texto cellpadding=10
CELLSPACING Espacio entre las líneas interna y externa del borde cellspacing=3
HEIGHT Valor de la altura en pixels o porcentaje heigth=80
WIDTH Valor del ancho en pixels o porcentaje width=50%
COLSPAN <TD> dentro Expandir una celda varias columnas colspan=4
ROWSPAN de <TABLE> Expandir una celda varias filas rowspan=4