Escudo UTN - (792 bytes)
 UTN - (1.699 bytes)
  Facultad Regional Córdoba
 

Departamento de Ingeniería en Sistemas de Información

HTML: Referencia rápida

El lenguaje de adición de hipertexto, o como se denomina en inglés HyperText Markup Language (HTML) está compuesto de un conjunto de elementos que definen un documento y guían su presentación. Este documento presenta una guía de referencia rápida a los elementos del Nivel 1 al nivel 3 de HTML, dando una breve descripción de cada uno de ellos.

Este documento incluye modificaciones y proposiciones realizadas para HTML, incluyendo elementos exclusivos del navegador de WWW Netscape, por lo cual este documento está sujeto a continua evolución y cambio. Para información en general acerca de HTML, incluyendo planes para nuevas versiones, consulte http://www.w3.org/hypertext/WWW/MarkUp/MarkUp.html

Un elemento HTML puede incluir un nombre, algunos atributos y algún texto o hipertexto, y aparecerá en un documento HTML como

<nombre_etiqueta> texto </nombre_etiqueta>
<nombre_etiqueta nombre_atributo=argumento> texto </nombre_etiqueta>, o solamente
<nombre_etiqueta>
Por ejemplo:
<title> Mi Documento </title>

y

<a href="argumento"> texto </a>
Un documento HTML está compuesto de un elemento simple:
<html>. . . </html>
Este, a su vez se compone de elementos de encabezado y cuerpo:
<head>. . . </head>
y
<body>. . . </body>
Atributos:
<body background="nombre_de_archivo">
Especifica una imagen para el fondo del documento.
<body bgcolor="#rrggbb">
Especifica un color para el fondo del documento.
<body text="#rrggbb">
Especifica un color para el texto normal del documento.
<body link="#rrggbb" vlink="#rrggbb" alink="#rrggbb">
Establece el color del texto de vínculo, del vínculo visitado y del vínculo activo.
#rrggbb representa el valor hexadecimal del color expresado como rojo-verde-azul.

Para permitir a documentos HTML antiguos permanecer legibles, <html>,<head> y <body> son actualmente opcionales en documentos HTML.

Elementos en el elemento de encabezado

<isindex>
Especifica que el documento describe una base de datos que puede ser buscada usando el método de búsqueda por índice. Por ejemplo, un usuario de Lynx usará el comando "s" del teclado. Atributos:
<isindex prompt="Nuevo mensaje">
Especifica el mensaje que aparecerá antes del campo de entrada de texto a buscar. Si no se especifica ningún mensaje, el mensaje por omisión es:

This is a searchable index. Enter search keywords:

 

<title>. . . </title>
Especifica el título del documento. Note que el título no aparecerá en el documento como se acostumbra en documentos impresos. Generalmente aparece en la barra de la ventana identificando el contenido de la misma. Las etiquetas HTML de encabezados realizan las funciones de títulos.
<base>
Especifica el nombre del archivo en el cual el documento actual es almacenado. Esto es útil cuando las referencias a vínculos en el documento no incluyen nombres de rutas completos, (es decir, están parcialmente calificados.)
<link rev="RELACION" rel="RELACION" href="URL">
La etiqueta de vínculo permite definir relaciones entre el documento conteniendo la etiqueta de vínculo y el documento especificado en el "URL". El atributo rel especifica la relacion entre el archivo HTML y el localizador de recursos uniforme, o por su nombre en inglés, Uniform Resource Locator (URL). El atributo rev (por "reversa") especifica la relacion entre el URL y el archivo HTML. Por ejemplo, <link rev="made" href="URL"> indica que el creador del archivo o propietario está descrito en el documento identificado por el URL. (Note que las etiquetas de vínculos no se muestran en la pantalla como parte del documento. Definen relaciones estáticas, no vínculos de hipertexto.)

Elementos colocados en el elemento del cuerpo

Las siguentes secciones describen elementos que pueden ser usados en el cuerpo del documento.

Elementos de texto

<p>
El fin de un párrafo que será formateado antes de que se muestre en la pantalla
<pre>. . . </pre>
Identifica texto que ha sido formateado previamente (preformateado) por algún otro sistema y debe ser desplegado tal como es. Texto preformateado puede incluir etiquetas embebidas, pero no todos los tipos de etiquetas están permitidos. La etiqueta <tag> puede ser usada para incluir tablas en documentos.
<listing>. . . </listing>
Ejemplo de listado de computadora; las etiquetas incluídas serán ignorados, pero los espacios de tabulación funcionarán. Esta es una etiqueta arcaica.
<xmp>. . . </xmp>
Similar a <pre> excepto que no se reconocerán etiquetas incluídas.
<plaintext>
Similar a <pre> excepto que no se reconocerán etiquetas incluídas, como no hay etiqueta para finalizar, el resto del documento será traducido como texto simple. Esta es una etiqueta arcaica. Note que algunos navegadores reconocen una etiqueta </plaintext>, aún cuando no está definido por el estándard.
<blockquote>. . . </blockquote>
Incluye una sección de texto citado de cualquier otra fuente.

Vínculos de hipertexto o anclas

<a name="nombre_vinculo">. . . </a>
Define un destino en un documento
<a href="#nombre_vinculo">. . . </a>
Vínculo a un destino en el mismo documento
<a href="URL">. . . </a>
Vínculo a otro archivo o recurso
<a href="URL#nombre_vinculo">. . . </a>
Vínculo a un destino en otro documento
<a href="URL?palabra_a_buscar+palabra_a_buscar">. . . </a>
Manda una cadena a buscar a un servidor. Diferentes servidores pueden interpretar la cadena de manera diferente. En el caso de servicios de búsqueda orientados a palabras, varias palabras a buscar pueden ser especificadas separando palabras individuales por el signo de suma (+)
Un ancla debe incluir un atributo name o href, y puede incluir ambos.

La estructura de un localizador de recursos uniforme, o por su nombre en inglés, Uniform Resource Locator (URL) puede ser expresado como:

 
tipo_de_recurso://dominio.del.host:puerto/ruta
donde los posibles tipos de recursos incluyen: file, http, news, gopher, telnet, ftp, mailto y wais, entre otros, y cada tipo de recurso interpreta la ruta a su manera. (Estrictamente hablando, la información del nombre_vinculo y la palabra_a_buscar incluidos en los atributos name y href en los ejemplos anteriores son parte del URL. Se presentan como entidades separadas por simplicidad.) Note que cada tipo de recurso se relaciona a un tipo específico de servidor. Los dos puntos seguidos por un puerto TCP entero es opcional, y es usado cuando un servidor está escuchando en un puerto no estándar.

Una descripción más completa de los URLs se presenta en http://www.w3.org/hypertext/WWW/Addressing/Addresing.html

Encabezados

<h1> . . . </h1> Encabezado o título más prominente
<h2> . . . </h2>
<h3> . . . </h3>
<h4> . . . </h4>
<h5> . . . </h5>
<h6> . . . </h6> Encabezado o título menos prominente

Estilos lógicos

<em> . . . </em>
Énfasis
<strong> . . . </strong>
Énfasis mayor
<code> . . . </code>
Despliega una directiva HTML
<samp> . . . </samp>
Incluye salida ejemplo
<kbd> . . . </kbd>
Despliega una tecla del teclado
<var> . . . </var>
Define una variable
<dfn> . . . </dfn>
Despliega una definición (no soportado ampliamente)
<cite> . . . </cite>
Despliega una cita

Estilos físicos

<b> . . . </b>
Negritas
<i> . . . </i>
Itálicas
<u> . . . </u>
Subrayado
<tt> . . . </tt>
Tipo de letra de máquina de escribir

Lista de definiciones/glosario: <dl>

<dl>
<dt>Primer término a definir
<dd>Definición del primer término
<dt>Siguiente término a definir
<dd>Siguiente definición </dl>
El atributo compact de la etiqueta <dl> puede ser usado para generar una lista de definiciones requiriendo menos espacio.

 

Presentando una lista sin ordenar: <ul>

<ul>
<li>Primer objeto de la lista
<li>Siguiente objeto de la lista
</ul>
Atributos:
<ul type=disc¦circle¦square>
Especifica el tipo de marca entre los diferentes niveles identados. Las marcas pueden ser discos, círculos o cuadrados.
<li type=disc¦circle¦square>
Se puede especificar el tipo de marca por cada elemento en la lista.

Presentando una lista ordenada: <ol>

<ol>
<li>Primer objeto de la lista
<li>Siguiente objeto de la lista
</ol>
Atributos:
<ol type=A¦a¦I¦i¦1>
Especifica el tipo de numeración a emplear en las listas ordenadas. Los tipos de numeración son: letras mayúsculas, letras minúsculas, numerales romanos grandes, numerales romanos pequeños, y el valor por omisión, números.
<ol start=numero>
Especifica el valor donde comienza la lista ordenada. El valor por omisión es 1.
<li type=A¦a¦i¦1 start=numero>
Se puede especificar el tipo de numeración y el comienzo por cada elemento en la lista.

Presentando un menú interactivo: <menu>

<menu>
<li>Primer objeto de la lista
<li>Siguiente objeto
</menu>

Presentando una lista directorio de objetos: <dir>

<dir>
<li>Primer objeto de la lista
<li>Segundo objeto de la lista
<li>Siguiente objeto de la lista
</dir>
La longitud de los objetos debe ser menor a 20 letras.

 

Entidades

&palabra_clave;
Muestra una letra en particular identificado por una palabra especial. Note que el punto y coma siguiendo a la palabra clave es requerido, y la palabra clave debe ser una de la lista presentada en:
http://www.w3.org/hypertext/WWW/MarkUp/Entities.html
- o -
El conjunto de caracteres ISO LATIN 1
 

Ejemplos:

&aacute; -- á
&eacute; -- é
&iacute; -- í
&oacute; -- ó
&uacute; -- ú
&Aacute; -- Á
&Eacute; -- É
&Eacute; -- Í
&Oacute; -- Ó
&Uacute; -- Ú
&ntilde; -- ñ
&Ntilde; -- Ñ
&amp; -- &
&lt; -- <
&gt; -- >
&reg; -- ®
&copy; -- ©
&#equivalente_ascii;
Usa un caracter literalmente. Note de nuevo que el punto y coma siguiendo al valor numérico ASCII es requerido.

Interface de formas HTML

La interface de formas HTML permite a los creadores de documentos definir documentos HTML conteniendo formas para ser llenadas por los usuarios. Cuando un usuario llena la forma y presiona un botón indicando que la forma debe ser "presentada", la información en la forma es enviada a un servidor para ser procesada. El servidor generalmente preparará un documento HTML usando la información proporcionada por el usuario y la regresará al cliente para ser desplegada.

Las siguentes etiquetas implementa la interface de formas:

  • <form> . . . </form>
  • <input>
  • <select> . . . </select>
  • <option>
  • <textarea> . . . </textarea>
Las últimas cuatro etiquetas solamente pueden ser usadas dentro del elemento <form> . . . </form>.

 

Define una forma

<form> . . . </form>

Define una forma en un documento HTML. Un documento puede contener múltiples elementos <form>, pero elementos <form> no pueden estar anidados. Note que las etiquetas de no-formas pueden ser usados dentro de un elemento <form>. Atributos y sus argumentos:

 

action:
La localización URL del programa que procesará la forma.
method: Uno de get o post
El método escogido para intercambiar datos entre el cliente y el programa iniciado al procesar la forma. post es preferido para la mayoría de las aplicaciones.
Ejemplo:
 
<form action="http://kuhttp.cc.ukans.edu/cgi-bin/register" method=post>...</form>

 

Define un campo de entrada

<input> (No hay etiqueta para finalizar)

Define un campo de entrada donde el usuario puede introducir información en la forma. Cada campo de entrada asigna un valor a una variable que tiene un name especificado y un type de datos especificado. Atributos y sus argumentos:

 

type
Especifica el tipo de datos para la variable.
  • type="text" y type="password" aceptan datos de caracteres
  • type="checkbox" es seleccionado o no
  • type="radio" permite la selecció de uno o varios campos de radio, si todos tienen el mismo nombre de variable
  • type="submit" es un botón de acción que manda la forma completada al servidor
  • type="reset" es un botón que cambia las variables de la forma a sus valores por omisión
name
"texto" donde texto es un nombre simbólico (no mostrado) identificando la variable input como en:
<input type="checkbox" name="caja1">
value
"texto" donde la función de texto depende del argumento de type.

 

  • Para type="text" o type="password", texto es el valor por omisión para la variable input.
  • Si type="checkbox" o type="radio", texto es el valor de la variable input cuando esta "marcada".
  • Para type="reset" o type="submit", texto es una etiqueta que aparecerá en el botón de presentació o de reinicio en lugar de las palabras "submit" y "reset.
checked
Sin argumentos. Para type="checkbox" o type="radio", si checked está presente el campo input está marcado por omisión.
size
ancho donde ancho es un valor entero representando el número de caracteres permitidos para los campos de input type="text" o type="password".
maxlength
longitud donde longitud es el número de caracteres aceptados por type="text" o type="password". Este atributo es válido solamente para líneas sencillas de campos "text" o "password".

Define un campo de selección

<select> . . . </select>

Define y despliega un conjunto de objetos opcionales de una lista de la cual el usuario puede seleccionar uno o más objetos. Este elemento requiere de un elemento <option> para cada objeto en la lista. Atributos y sus argumentos:

name
"texto" donde texto es el identificador simbólico para la variable del campo select.
size
El argumento para size es un valor entero representando el número de objetos <option> que serán desplegados al mismo tiempo.
multiple
Sin argumentos. Si está presente, el atributo multiple permite la selección de más de un valor <option>.

Define una opción en un campo de selección

option

Dentro del elemento <select> las etiquetas <option> son usadas para definir los posibles valores para el campo select. Si el atributo selected está presente entonces el valor option es seleccionado por omisión. En el siguiente ejemplo las tres opciones pueden ser escogidas pero los plátanos son escogidos por omisión.

<select multiple>
<option>Manzanas
<option selected>Plátanos
<option>Cerezas
</select>

 

Define un área de texto

<textarea> . . . texto por omisión . . . </textarea>

Define un campo rectangular donde el usuario puede introducir datos en forma de texto. Si el "texto por omisión está presente, será desplegado cuando el campo aparezca. De otra manera el campo estará en blanco. Atributos y sus valores:

name
"texto" donde texto es un nombre simbólico que identifica la variable <textarea>
rows y cols
Ambos atributos toman un valor entero que representa las líneas y número de caracteres por líneas en el <textarea> a ser desplegados.

Misceláneos

<!-- texto -->
Coloca un comentario en el archivo HTML fuente
<address>...</address>
Presenta información de la dirección

 

<img src="URL" alt="texto alternativo">
Introduce una imagen en el documento. Atributos:
src
Especifica la localización de la imagen
alt
Permite que una cadena de texto sea puesta en lugar de la imagen en clientes que no pueden mostrar imágenes
 
<imgalign=left¦right¦top¦texttop¦middle¦absmiddle¦baseline¦bottom¦absbottom>
Especifica una relación con el texto circundante. Los atributos left y right permiten que la imagen se alinea a la izquierda o a la derecha, y el texto siguiente "envuelva" a la imagen.

El atributo top alinea la imagen al tope del más alto objeto en la línea, y es equivalente a texttop, el cual alinea la imagen al tope del más alto texto en la línea.

El atributo middle alinea la base de la línea actual con la parte media de la imagen, y es equivalente a absmiddle, que alinea la parte media de la línea actual con la parte media de la imagen.

Los atributos baseline, bottom son equivalentes, y alinean el tope inferior de la imagen con la base de la línea actual; estos atributos son semejantes a absbottom, que alinea el tope inferior de la imagen con el tope inferior de la línea actual.

 
<img width=numero height=valor>
Determina el tamaño de la imagen a desplegar.
 
<img border=numero>
Permite especificar el ancho del borde que circunda las imágenes desplegadas
 
<img vspace=numero hspace=numero>
Especifican el espacio vertical y horizontal en pixeles entre el texto y las imágenes.
 
<img ismap>
Si ismap está presente y la etiqueta de la imagen se encuentra dentro de un ancla, se podrá hacer "clic" en la imagen. Las coordenadas (por pixel) del cursor se añadirán al URL especificado en el ancla si el usuario hace clic en la imagen ismap. El URL resultante tomará la forma "URL?m,n" donde m y n son coordenadas enteras.

 

<br>
Fuerza un salto de línea inmediatamente y conserva el mismo estilo.
 
<br clear=left¦right¦all>
El salto de línea se realiza hasta que ya no exista una imagen alineada a la izquierda, a la derecha, o en ambos márgenes.
<wbr>
Señala donde puede se permite romper una palabra si se necesita insertar.

 

<hr>
Coloca una regla horizontal o separador entre secciones de texto. Atributos:
 
<hr size=numero>
Permite indicar que tan delgada es la regla horizontal
 
<hr width=numero¦porcentaje>
La regla horizontal es, por omisión, del ancho de la página. Con este atributo se puede especificar un ancho exacto en pixeles, o una anchura relativa medida en porcentaje del ancho del documento.
 
<hr align=left¦right¦center>
Especifica la alineación de la regla. Solamente es útil si se cambia el ancho de la regla con el atributo anterior.
 
<hr noshade>
Barra sólida, sin sombreado.
 
<nobr>...</nobr>
Especifica que un texto no puede tener saltos de línea insertados.
 
<font size=numero>...</font>
Especifica el tamaño del tipo de letra. Los números válidos son del 1 al 7. El tamaño por omisión es de 3.
 
<font size=+¦-numero>...</font>
Especifica un incremento o decremento del tamaño de la letra, relativo al tamaño de la letra por omisión del documento.
 
<basefont size=numero>...</basefont>
Permite cambiar el tamaño de la letra por omisión del documento.
 
<center>...</center>
Especifica el centrado de texto o imágenes.
 
<blink>...</blink>
El texto que se encuentra dentro de esta etiqueta parpadea.

Tablas

<table>...</table>
Especifica una tabla. Las siguientes etiquetas y atributos solamente tienen significado dentro de las etiquetas que especifican la tabla.
<tr>...</tr>
Especifica una fila de la tabla.
<td>...</td>
Especifica los datos que contiene la tabla.
<th>...</th>
Indica el texto que forma el encabezado de la tabla
<caption>...</caption>
Establece el título de la tabla.

 

Atributos:
border=numero
Establece si aparece o no un borde alrededor de las celdas de la tabla, y cual es el grosor del borde.
align=top¦bottom
Dentro de la etiqueta caption, establece la ubicación del título de la etiqueta, ya sea en la parte superior o inferior de la tabla
align=left¦center¦right
Establece la ubicación de los datos dentro de las celdas. Funciona dentro de las etiquetas tr, th y td.
valign=top¦middle¦bottom¦baseline
Especifica la alineación vertical de los datos
nowrap
Establece que las líneas contenidas en las celdas afectadas no se pueden romper para ajustarse al ancho de las celdas.
colspan=numero
Indica cuántas columnas ocupa la celda.
rowspan=numero
Indica cuántas líneas ocupa la celda.
cellspacing=numero
Indica el espacio insertado entre las celdas individuales de una tabla
cellpadding=numero
Establece el espacio entre el borde de la celda y el contenido de la celda.
width=numero¦porcentaje
Establece el ancho de la tabla o de las celdas especificadas en un valor en pixeles o en porcentaje con respecto al ancho del documento.

Referencias

HTML Quick Reference. Michael Grobe, Academic Computing Services, The University of Kansas. grobe@kuhub.cc.ukans.edu
La estructura del documento y todos los aspectos referentes al Nivel 1 de HTML fueron extraídos de esta referencia.

 

Extensions to HTML. Copyright © Netscape Communications Corporation. info@mcom.com
Las extensiones para HTML 2.0 fueron tomadas de este documento.

 

Tables in Netscape 1.1 ebina@netscape.com
Las extensiones para HTML 3.0 referentes a tablas fueron tomadas de este documento.

 

Controlling documents backgrounds. ebina@netscape.com
Las extensiones para HTML 3.0 referentes al fondo del documento fueron tomadas de este documento.