My signature
Principia HTML
Solo una barra

HTML en una lección... o menos

El lenguaje de formato HTML (siglas del inglés Hyper Text Markup Language) es el conjunto de reglas con el que se construyen documentos de hiper texto (páginas) para la World Wide Web. Su objetivo es indicar como se deben presentar los archivos HTML cuando sean vistos mediante un navegador (browser) y proporcionar los elementos para: crear documentos independientes de una plataforma de cómputo, crear ligas a otros documentos en la Internet, incluir gráficos y multimedia, y proporcionar enlaces a otros recursos disponibles en la Internet.

Los documentos HTML son fáciles de construir por dos razones: son archivos ASCII (por lo que puede utilizarse cualquier editor) y los elementos de formato son especificados mediante códigos de control llamados etiquetas (tags) indicados también por caracteres ASCII. Adicionalmente, dado que se trata de un lenguaje, su generación puede ser automatizada y de aquí que existan programas de edición y generación de páginas HTML.

Las etiquetas se construyen utilizando como delimitadores los caracteres < y > y colocando entre estos una palabra clave. Algunas etiquetas incluyen adicionalmente parámetros, obligatorios u opcionales, con los que se provee de los datos necesarios para modificar o complementar la acción de la etiqueta, y a los que suele llamárseles atributos. Algunos de estos atributos reciben valores, otros no. Existen etiquetas sencillas cuya acción únicamente aplica al valor indicado mediante un atributo y existen etiquetas que aplican sobre todo lo que se encuentre entre una etiqueta de inicio y otra de fin. A estas últimas se les denomina de bloque. Las etiquetas de fin de bloque se crean antecediendo una diagonal (/) a la palabra clave de la etiqueta con la que se abrió el bloque.

Un documento HTML consta de por lo menos una sección denominada cuerpo, delimitada por las etiquetas de bloque <BODY> y </BODY> y en la que se coloca el contenido del documento. Opcionalmente, puede llevar una sección de encabezado (<HEAD> y </HEAD>) utilizada para especificar características y datos sobre el documento. Ambas secciones deben encontrarse delimitadas por las etiquetas de bloque de indicas que se trata de un documento HTML (<HTML> y </HTML>).

Por ejemplo, usando cualquier editor, proceda a crear un archivo con las siguientes líneas:

<HTML>
  <BODY>
    Hola mundo!!!
  </BODY>
</HTML>

Algunas observaciones importantes sobre el ejemplo anterior. Las etiquetas HTML se presentan en mayúsculas sólo por claridad, pueden ser escritas en minúsculas también. La sangría en el texto es también por claridad, puede ser escrito como una línea continua. Si está utilizando un procesador de palabras no olvide guardar su archivo como texto sin formato y con extensión .HTM o .HTML.

Acto seguido, ábrase el archivo en el navegador de su preferencia. Observará que lo único que se muestra en la página es el mensaje:

Hola mundo!!!

Obviamente el ejemplo carece de mucho atractivo. Para mejorar esto se recurre a etiquetas de bloque que permiten indicar si el texto deberá mostrarse en itálicas o negritas. Por ejemplo si quisiéramos presentar el texto del ejemplo anterior en negritas habríamos escrito:

<HTML>
  <BODY>
    <B>Hola mundo!!!</B>
  </BODY>
</HTML>

Con lo que veríamos:

Hola mundo!!!

La siguiente tabla presenta otras de las etiquetas de bloque para formato de texto más comunes:

Etiqueta Descripción
<I> ... </I> Muestra el texto entre las etiquetas en letra cursiva.
<U> ... </U> Texto subrayado.
<SMALL> ... </SMALL> En relación al tamaño de la letra por defecto, el texto seleccionado se muestra más pequeño.
<BIG> ... </BIG> Se muestra el texto usando un tamaño de letra más grande..
<SUP> ... </SUP> Muestra el texto como superíndice.
<SUB> ... </SUB> Muestra el texto como subíndice.
<CENTER> ... </CENTER>
Centra el texto en el documento.
<CODE> ... </CODE> Muestra el texto indicado con un tipo de letra no proporcional para ilustrar texto impreso, caracteres en pantalla o resaltar código.
<H1> ... </H1> Para crear títulos o encabezados. Existen 6 tamaños predefinidos que van desde <H1> a <H6>, siendo el de letra mayor <H1> (el título de este documento fue creado con la etiqueta <H1>).

Los párrafos de texto son creados usando las etiquetas de bloque <P> y </P>. La justificación del texto se lleva a cabo utilizando el atributo ALIGN con alguno de los tres posible valores CENTER, RIGHT y LEFT (este último es el valor por defecto y puede ser omitido). Por ejemplo, regresando a nuestro ejemplo, si deseamos que el texto se muestre justificado la derecha usaríamos el código:

<HTML>
  <BODY>
    <P ALIGN="RIGHT">Hola mundo!!!</P>
  </BODY>
</HTML>

Obteniendo:

Hola mundo!!!

Como podrá verse, la cadena es presentada identada a la derecha pero también con una separación entre los márgenes de la pantalla y el texto (que no se muestra en el ejemplo). Esta es una de las características de la etiqueta, la de separar automáticamente los párrafos sin necesidad de tener que insertar un salto de línea. De requerirse, el salto de línea puede forzarse con la etiqueta <BR>. Un ejemplo se muestra a continuación.

<HTML>
  <BODY>
    <P>Hola <BR> mundo!!!</P>
  </BODY>
</HTML>

El resultado sería:

Hola
mundo!!!

Los vínculos o enlaces a otras secciones del documento o a otros documentos es lo que se conoce como ligas. Estas pueden ser tanto texto como imágenes a las que se le asocia otro documento o una sección del actual, y al que se llega al realizar una acción sobre la liga (usualmente un click con apuntador del ratón).

Una liga se forma utilizando las etiquetas <A> y </A>. Lo que se coloque entre estas dos etiquetas será lo que el browser muestre como una liga. El archivo, documento o sección al que estará asociada la liga será indicada con el atributo HREF. El atributo se podrá especificar como un nombre de archivo (con una ruta absoluta o relativa, opcionalmente), como un URL o como una referencia a una sección del documento (precediendo el nombre de la sección con un #).

Por ejemplo, el siguiente código muestra una liga la cual nos lleva a la página principal de Principia.

<HTML>
  <BODY>
    <P ALIGN=CENTER><A HREF="http://homepage.mac.com/eravila">Principia</A></P>
  </BODY>
</HTML>

y veríamos aparecer algo como:

Principia

Dependiendo de la configuración de su browser, el texto aparecerá o no subrayado y de un color diferente al resto del texto. Esto le indica al usuario que el texto posee alguna característica especial. Si se acerca el apuntador del ratón a esta palabra veremos que nuestro apuntador cambia de forma indicándonos que se trata de un liga y que basta apretar el botón del ratón para que se active y nos lleve al documento asociado (en este caso la página principal de este sitio).

Es importante señalar que la cantidad de texto a mostrarse como liga es algo arbitrario. En este caso fue una palabra, pero igual pudo haber sido toda una frase o un párrafo; en otras palabras, todo lo que se encuentre entre las etiquetas delimitadoras.

Lo anterior nos lleva a un punto interesante, ya que en realidad no sólo es texto lo que puede ponerse entre las etiquetas para declarar una liga sino todo lo que se declare o coloque entre estas. Por ejemplo, para indicar la aparición de una imagen se utiliza la etiqueta <IMG SRC="archivo">. Obviamente el atributo SRC permite indicar la ubicación y nombre del archivo que contiene la imagen o dibujo a colocar.

Por ejemplo, imaginemos que se cuenta con el archivo firma.gif y deseamos que el dibujo actúe como una liga. Utilizando el ejemplo anterior:

<HTML>
  <BODY>
    <P ALIGN=CENTER><A HREF="http://homepage.mac.com/eravila"><IMG SRC="firma.gif></A></P>
  </BODY>
</HTML>

para así obtener:

Mientras que el texto se subraya y se muestra en otro color, las imágenes se muestran con un borde del mismo color con el que se muestran as ligas. Para este caso en particular se cuenta con el atributo BORDER que con un valor de 0 permite ocultar el borde (cualquier otro valor regula el grosor del borde).

Casi para terminar, hablaremos un poco de una de las facilidades que proporciona HTML para la presentación de texto en forma de listas y tablas. En lo que a las listas se refiere, tenemos listas y listas numeradas. Las primeras se crean con las etiquetas de bloque <UL> y <UL/>, las segundas con <OL> y </OL>. Para ambos casos, en la definición de los elementos que serán enlistados se utiliza <LI> y </LI>. El siguiente código ilustra la descripción anterior.

<HTML>
  <BODY>
    <P>Esta es una lista numerada:</P>
    <OL>
      <LI>Primer elemento</LI>
      <LI>Segundo elemento</LI>
      <LI>Tercer elemento</LI>
    </OL>
    <P>Esta es una lista sin numerar:</P>
    <UL>
      <LI>Primer elemento</LI>
      <LI>Segundo elemento</LI>
      <LI>Tercer elemento</LI>
    </UL>
  </BODY>
</HTML>

Y, esto es lo que este código mostraría:

Esta es una lista numerada:

  1. Primer elemento
  2. Segundo elemento
  3. Tercer elemento

Esta es una lista sin numerar:

Una tercera modalidad de lista son las llamadas listas de definición. Estas se crean con las etiquetas <DL> y </DL> como delimitadoras, <DT> para marcar una nueva entrada, y <DD> para delinear la definición. El siguiente ejemplo muestra el uso de estas etiquetas junto con el uso del atributo COMPACT que permite que la entrada y su definición se muestren en un mismo renglón (Nota: usando el atributo COMPACT la longitud de la entrada no puede ser muy grande o el browser omitirá el efecto del atributo).

<HTML>
  <BODY>
    <DL COMPACT>
      <DT><B>Uno</B> <DD>Aquí se pone una definición.
      <DT><B>Dos</B> <DD>Aquí se pone otra definición.
    </DL>
  </BODY>
</HTML>

La lista se mostrará:

Uno
Aquí se pone una definición.
Dos
Aquí se pone otra definición.

En lo que respecta a las tablas, estas se conforman a través de tres etiquetas, siendo todas de bloque. La primera, <TABLE>, establece el inicio de la tabla y delimita a todos los elementos que ésta tendrá; la segunda,<TR>, delimita los renglones que conforman a la tabla; y ,la tercera, <TD> delimita el contenido de cada celda (una por columna) en cada renglón. A continuación se muestra un ejemplo de una tabla de dos renglones y tres columnas. El código HTML es:

<TABLE BORDER=1 WIDTH=100%>
  <TR>
    <TD>Renglón 1, Columna 1</TD>
    <TD>Renglón 1, Columna 2</TD>
    <TD>Renglón 1, Columna 3</TD>
  </TR>
  <TR>
    <TD>Renglón 2, Columna 1</TD>
    <TD>Renglón 2, Columna 2</TD>
    <TD>Renglón 2, Columna 3</TD>
  </TR>
</TABLE>

y lo que se obtiene:

Renglón 1, Columna 1 Renglón 1, Columna 2 Renglón 1, Columna 3
Renglón 2, Columna 1 Renglón 2, Columna 2 Renglón 2, Columna 3

El atributo BORDER controla el grosor del borde delineador de la tabla. Su omisión (o uso del valor 0) hará que la tabla se dibuje sin borde. WIDTH permite indicar que tanto queremos que se extienda horizontalmente la tabla en el documento y recibe valores tanto en porcentajes como en puntos (su omisión hará que se creen celdas del ancho adecuado para el contenido más largo por columna). Otros atributos interesantes son ALIGN (para alineación horizontal, con los valores que ya conocemos), VALIGN (con valores MIDDLE, TOP y BOTTOM, para alineación vertical). Estos últimos pueden usarse a nivel de <TABLE>, <TR> o <TD>. <TD> cuenta además con los atributos COLSPAN y ROWSPAN que permiten indicar cuantas columnas o renglones una celda debe ser extendida sobre otras columnas o renglones (el valor por defecto es 1); muy útiles para crear tablas de complejo diseño.

En el ejemplo anterior puede verse que se usó "Rengl&oacute;n" para mostrar "Renglón". Por defecto los browsers no muestran palabras acentuadas, esto debe configurarse. Una forma de garantizar que se muestren caracteres acentuados es usar el código &letraacute; (substituyendo letra por a, e, i, o, u; según sea el caso). La letra ñ se crea con &ntilde;.

Todas las etiquetas que conforman HTML pueden ser anidadas, i.e. pueden ser usadas como contenido de otras etiquetas. Para finalizar, se muestra un ejemplo más complejo de código HTML mostrando todas las etiquetas presentadas. En este ejemplo se presenta una tabla que incluye listas, diversos atributos de formato de texto, y otra tabla. El código es:

<TABLE BORDER=1 WIDTH=100%>
  <TR>
    <TD COLSPAN=3 ALIGN=CENTER BGCOLOR=#FFCC66><H3><I>Elementos de HTML</I><H3></TD>
  </TR>
  <TR>
    <TD ALIGN=CENTER><B>Elemento</B></TD>
    <TD COLSPAN=2 ALIGN=CENTER<>B>Ejemplo</B></TD>
  </TR>
  <TR>
    <TD ALIGN=CENTER VALIGN=MIDDLE><I>Listas</I></TD>
    <TD>Numeradas<BR><CENTER><OL><LI>Uno</LI><LI>Dos</LI><LI>...   </LI></OL<>/CENTER<>/TD>
    <TD>Sin numerar<BR><CENTER><UL><LI>Uno</LI<>LI>Dos</LI<>LI>...   </LI></UL></CENTER></TD>
  </TR>
  <TR>
    <TD ROWSPAN=2 ALIGN=CENTER VALIGN=MIDDLE><Caracteres<BR>especiales<I></TD>
    <TD>Acentos <CENTER>&aacute; = &amp;aacute;<BR>é = &amp;eacute;<BR>í = &amp;iacute;<BR>ó = &amp;oacute;<BR>ú = &amp;uacute;</CENTER></TD>
  </TR>
  <TR>
    <TD>
      <TABLE BODER=0>
        <TR>
          <TD VALIGN=MIDDLE WIDTH=40%>Otros</TD>
          <TD VALIGN=MIDDLE>&ntilde; = &amp;ntilde;<BR> &amp; = &amp;amp;<BR> &LT = &amp;LT<BR> > = &GT<BR> &uuml; = &amp;uuml;<BR> &nbsp; = &amp;nbsp; (espacio en blanco no eliminable)</TD>
        </TR>
      </TABLE>
    </TD>
  </TR>
</TABLE>

y el resultado obtenido es:

Elementos de HTML
Elemento Ejemplo
Listas Numeradas
  1. Uno
  2. Dos
  3. ...   
 Sin numerar
  • Uno
  • Dos
  • ...   
Caracteres
especiales		 Acentos
á = &aacute;
é = &eacute;
í = &iacute;
ó = &oacute;
ú = &uacute;
Otros ñ = &ntilde;
& = &amp;
< = &LT
> = &GT
ü = &uuml;
  = &nbsp; (espacio en blanco no eliminable)



Solo una barra

Referencias.

  1. The HTML Reference Library v3.0 & v4.0, Stephen Le Hunte, UK.
  2. HTML definition drafts and documents, W3C - World Wide Web Consortium.
  3. ReferencesReferencias en la World Wide Web.
Este texto puede ser copiado y reproducido libremente mientras su contenido no sea alterado, se cite la fuente y referencias. Las marcas registradas son responsabilidad de sus dueños y el autor de este texto no tiene relación alguna con estos. M. en C. Eduardo René Rodríguez Avila. © Todos los derechos reservados.
Ultima actualización: .