Códigos HTML

                 Versiones del HTML

 

2.1. HTML 2.0

Cuando se produjo la explosión de Internet el estándar de HTML que circulaba era el 2.0 (establecido en noviembre del 95), de modo que cualquier navegador que encontremos será capaz de interpretarlo. Prácticamente todo lo que veamos en los próximos seis capítulos está contemplado por este estándar.



2.2. HTML 3.0 y 3.2

Aunque la versión 2.0 cumplía bien el objetivo para el que se creó, carecía de herramientas para tener un control mínimamente complejo de los documentos. No se consideró necesario que lo tuviera, ya que por aquel entonces Internet era un fenómeno más bien circunscrito a la actividad académica y el contenido primaba sobre el diseño. Debido a ello, Netscape (líder del mercado de navegadores por aquel entonces) empezó a incluir etiquetas nuevas no incluidas en ningún estándar.

Por estos problemas, el IETF (el comité que suele decidir todos los estándares dentro de Internet) comenzó a elaborar el borrador del HTML 3.0, que resultó ser demasiado grande para la época, lo que dificultó su aceptación en el mercado.

Esto llevó a una serie de compañias (entre ellas Netscape, Microsoft, IBM, Sun, etc...) a crear un nuevo comité llamado W3C, que es el que actualmente elabora las nuevas versiones del HTML. Su primer trabajo consistió en crear el borrador del HTML 3.2, que incluía muchas de las mejoras que los principales navegadores (Netscape y Explorer) habían introducido en Internet, como son las tablas, los applets, etc..

Este borrador fue aprobado en enero de 1997 e inmediatamente el W3C se puso a trabajar en la elaboración del siguiente estándar: el 4.0.



2.3. HTML 4.0

En julio de 1997 se presenta el borrador de este estándar. Por fin se estandarizan los marcos (frames), las hojas de estilo y los scripts (entre otras cosas). El 17 de diciembre de 1997 dicho borrador fue finalmente aprobado.



2.4. Estándares en este curso

En principio cualquier navegador debería ser capaz de interpretar el HTML 3.2, pero por si necesitais saber por alguna razón el estándar al que pertenece una etiqueta o parámetro en particular, se incluirá una de las siguientes indicaciones:

Ø  Introducido con la versión 3.2 del HTML

Ø  Introducido con la versión 4.0 del HTML

Ø  Etiqueta o parámetro no estándar soportado sólo por el Netscape

Ø  Etiqueta o parámetro no estándar soportado sólo por el Explorer

 

 

Primera página



3.1. El código

<HTML>

<HEAD>

<TITLE>Mi primera pagina</TITLE>

</HEAD>

 

<BODY>

<CENTER><H1>Mi Primera pagina</H1></CENTER>

<HR>

<P>Esta es mi primera pagina (chispas). Por el

Momento no se que tendrá, pero dentro de poco

Pondré aquí muchas cosas interesantes.

</BODY>

</HTML>

También puedes ver el resultado de este ejemplo.



3.2. La explicación

Lo primero que conviene explicar es en qué consisten todos esos símbolos de mayor y menor que están distribuidos por ahí. El lenguaje HTML se basa en la sintaxis SGML (toma siglas). Esto quiere decir que cualquier cosa que hagamos en HTML estará encerrada entre dos etiquetas de esta manera:

<ETIQUETA parámetros> ... </ETIQUETA>

Hay ocasiones en que no es necesario cerrar la etiqueta. Mirando el código habréis visto un par de ejemplo que ya explicaré más adelante. Pero como lo primero que debemos indicar es que el texto que estamos componiendo es un documento HTML pues lo indicamos así:

<HTML> ... </HTML>

Un documento HTML tiene una estructura que lo separa en dos partes: cuerpo y cabecera. En la primera estará la página en sí, mientras que en la segunda incluiremos algunas cosas que no se ven al principio pero que pueden llegar a ser muy importantes. Lo primero que hay que incluir en el código es la cabecera. La escribimos:

<HEAD>

<TITLE>Primera pagina</TITLE>

</HEAD>

Dentro de la cabecera sólo hay otra etiqueta. Es la única imprescindible: el título de la página. Es lo que veremos como título de la ventana en los navegadores que lo permitan. Es como se conocerá nuestra página en algunos buscadores y en la agenda de direcciones (bookmarks) de los usuarios. Por tanto, parece importante pensarnos bien como llamarla.



El cuerpo del documento

Ahora vamos a indicar el contenido. Lo primero será indicar que estamos en el cuerpo del documento:

<BODY> texto</BODY>

Luego pondremos el título algo recalcado:

<CENTER><H1> texto </H1></CENTER>

Con esto colocaremos el texto centrado (<CENTER>) y en formato <H1> (cabecera 1) que nos asegura que aumentará el tamaño del tipo de letra lo suficiente como para que se vea bastante resaltado. Luego separamos ese título que le hemos puesto a la página del texto por medio de una línea horizontal:

<HR>

La línea horizontal carece de etiqueta de cierre. Esto es normal en etiquetas que no varían los atributos de un texto, sino que insertan un elemento. Por ejemplo, para indicarle que queremos separar el texto de la línea horizontal con un espacio vertical correspondiente a un párrafo nuevo le decimos:

<P>Esta es mi primera pagina (chispas). Por el Momento no sé que tendrá, pero dentro de Poco pondré aquí muchas cosas interesantes.

En el siguiente capítulo veremos muchas etiquetas que nos permitirán cambiar el aspecto de nuestros textos.

 


4. Formateo básico
Se pueden establecer varias categorías dentro de las etiquetas usadas para formatear el texto. Nosotros las dividiremos entre aquellas que sirven para cambiar párrafos enteros y las que son capaces de formatear tiras de caracteres dentro del párrafo.


4.1. Formato del párrafo
Estas son las etiquetas más importantes (excluyendo algunas que veremos más adelante):
Etiqueta
Utilidad
Resultado
<P>
Sirve para delimitar un párrafo. Inserta una línea en blanco antes del texto.
Soy un párrafo
<CENTER> ... </CENTER>
Permite centrar todo el texto del párrafo.
Yo soy normal
Yo estoy centrado
<PRE WIDTH=x> ... </PRE>
Representa el texto encerrado en ella con un tipo de letra de paso fijo. Muy útil a la hora de representar código fuente. El parámetro WIDTH especifica el número máximo de caracteres en una línea.
Estoy en paso fijo
<DIV ALIGN=x>. </DIV>
Permite justificar el texto del párrafo a la izquierda (ALIGN=LEFT), derecha (RIGHT), al centro (CENTER) o a ambos márgenes (JUSTIFY )
Yo estoy a la izquierda
Yo al centro
Y yo a la derecha (recuerda a la política esto, oye)
Yo soy el más chulo, porque estoy en todos los lados.
<ADDRESS> ... </ADDRESS>
Para escribir direcciones (de esas donde vive la gente, no electrónicas).
Daniel Tavarez Sto Dgo, Rep. Dom.
<BLOCKQUOTE> ... </BLOCKQUOTE>
Para citar un texto ajeno. Se suele implementar dejando márgenes tanto a izquierda como a derecha, razón por la que se usa habitualmente.
Me gustaría reencarnarme en las yemas de los dedos de Warren Beatty (Woody Allen)


4.2. Las 6 cabeceras
El HTML nos ofrece seis etiquetas distintas para mostrar cabeceras. Son éstas:
Etiqueta
Resultado
<H1> ... </H1>
Cabecera de nivel 1
<H2> ... </H2>
Cabecera de nivel 2
<H3> ... </H3>
Cabecera de nivel 3
<H4> ... </H4>
Cabecera de nivel 4
<H5> ... </H5>
Cabecera de nivel 5
<H6> ... </H6>
Cabecera de nivel 6
Estas etiquetas se pueden definir como de formato de párrafo pero por su importancia he prefirido tratarlas aparte. No resulta recomendable utilizarlas para aumentar o disminuir el tamaño del tipo de letra, ya que cada navegador los muestra de manera diferente. Se usan para dividir correctamente en secciones nuestra página, tal y como se hace en un documento de texto normal.


4.3. Cambiando el tipo de letra
Todas estas etiquetas nos permiten cambiar de una manera u otra el aspecto del tipo de letra que estemos utilizando y se pueden utilizar con tiras de caracteres dentro de un párrafo.
Etiqueta
Utilidad
Resultado
<B> ... </B>
Pone el texto en negrita.
Soy un texto negro como el tizón
<I> ... </I>
Representa el texto en cursiva.
Estoy ladeado
<U> ... </U>
Para subrayar algo.
Como soy muy importante estoy subrayado
<S> ... </S>
Para tachar.
A mí, en cambio, nadie me quiere
<TT> ...</TT>
Permite representar el texto en un tipo de letra de paso fijo.
No soy variable
<SUP> .</SUP>
Letra superíndice.
E=mc2
<SUB> .</SUB>
Letra subíndice.
ai,j=bi,j+1
<BIG> .</BIG>
Incrementa el tamaño del tipo de letra.
Soy GRANDE
<SMALL> </SMALL>
Disminuye el tamaño del tipo de letra.
Creí ver un lindo gatito
<BLINK> ... </BLINK>
Hace parpadear el texto. Resulta algo irritante.
¿Molesto?


4.4. Formato de frase
En estos elementos indicas el tipo de información que encierran las etiquetas, pero no como se representan:
Etiqueta
Utilidad
Resultado
<CITE> ... </CITE>
Para citar un texto ajeno.
Esta frase no es mía
<CODE> ... </CODE>
Para escribir código fuente.
int x=0;
<STRONG> </STRONG>
La cosa es importante.
Hay cosas importantes.
<EM> ... </EM>
Para dar énfasis.
Hay que poner énfasis en algunas cosas.
<KBD> ... </KBD>
Texto tecleado por el usuario.
El usuario debe teclearMultivac es el mejor.
<VAR> ... </VAR>
Representar variables de un código.
La variable x, definida anteriormente...
<SAMP> ... </SAMP>
Para representar una serie de caracteres literalmente.
Estoy en un literal
<ABBR> ... </ABBR>
Abreviaturas.
La WWW usa el protocolo http
No son muy utilizados, ya que no permiten tener un control exacto de la manera en que la página se representará finalmente.


4.5. Otros elementos
Por último, debemos estudiar algunas cosas que no son texto y que podemos incorporar a nuestra página.

Etiqueta
Utilidad
Resultado
<HR>
Inserta una barra horizontal.


<BR>
Salto de línea.
Hay un antes y un
después de saltar a otra línea
<!-- ... -->
Comentarios.
Esto se escribe y <!-- esto no -->







Este Código es para cambiar el color del texto, letra por letra.



Este Código Hace cambiar de color continuamente.



Con este código las palabras caen hasta un párrafo.



Usas este código, proporciona un efecto de movimiento como gelatina.