Introducción al HTML
Componentes del léxicoCaracteres
Marcas
Nombres
Atributos
Comentarios
Estructura documentosHTML5. Elementos de bloque y de línea
Encabezados o títulos
Definición de bloques
Listas
Marcado lógico de frases
Marcado tipográfico de frases
HTML es un lenguaje de descripción, que sirve para especificar el aspecto que tendrán las páginas web cuando son vistas a través de un navegador.
Una página web es sencillamente un fichero de texto ASCII, con extensión, .HTM o .HTML. En este fichero se escribe el texto que desea mostrarse y, mediante el uso de etiquetas, se marca el aspecto de cada zona de la página.
HTML es un lenguaje interpretado, es decir, la traducción de las instrucciones que contiene una página a un lenguaje que entienda el ordenador se realiza al tiempo de su ejecución. Es el navegador, el programa que se utiliza para desplazarse por la red, el encargado de tener acceso a la información contenida en estas páginas y realizar su interpretación.
El HTML (HyperText Markup Language) no es más que una aplicación del SGML (Standard Generalized Markup Language), un sistema para definir tipos de documentos estructurados y lenguajes de marcas para representar esos mismos documentos. El término HTML se suele referir a ambas cosas, tanto al tipo de documento como al lenguaje de marcas.
Para crear documentos HTML o páginas WEB solo es necesario un editor de textos cualquiera (hay editores especialmente dedicados para la creación de estos documentos) y un visor o navegador (browser) que visualize dichos documentos.
En 1997 se presentó el primer borrador público del HTML 4.0, en el que se incorporaron las especificaciones sobre tablas, frames, scripts, hojas de estilo, accesibilidad por distintos medios, e internacionalización.
Este estándar propuesto representa un gran avance con respecto a los anteriores y una traducción a español de Juan R Pozo se puede ver en conclase.net.
HTML5 fue lanzado como una recomendación oficial del W3C (Consorcio World Wide Web) el 28 de octubre de 2014.
Desde entonces, se ha convertido en el estándar predominante para la creación de contenido web y ha sido ampliamente adoptado por los navegadores web y desarrolladores en todo el mundo.
Cada documento HTML puede emplear un juego de caracteres distinto. De todas formas, todas las marcas se pueden escribir usando el código ISO-646, que es el mismo código utilizado en los lectores de correo electrónico (e-mail).
Cualquier cadena de caracteres que no represente un marcado, se introduce en el documento como una sola línea, sin tener en cuenta los saltos de línea, ni los tabuladores, ni varios espacios seguidos, a no ser que esta se encuentre dentro de una marca de texto preformateado.
En HTML se reducen los documentos a un código ASCII de 7 bits, por lo que habrá que utilizar algunos mecanismos para poder representar todos los caracteres, ya que los caracteres especiales, de control y las tildes no se pueden representar directamente, aunque la mayoría de los editores HTML permiten escribir tildes y las transforman al grabar el documento. Estos mecanismos pueden ser :
Las tildes y otros caracteres propios del castellano pueden escribirse por medio de estos códigos universales de modo que se tenga la seguridad de que serán visibles en navegadores antiguos de otros países.
Las marcas, etiquetas o directivas son palabras clave encargadas de delimitar los elementos de un documento, como cabeceras, párrafos, gráficos, ventanas, tablas, etc. (todos los elementos HTML).
Todas las marcas tienen un nombre, se escriben entre los símbolos <nombre_marca> (menor que y mayor que), y se pueden anidar. Para poder escribir estas marcas como texto hay que recurrir a sus referencias.
La mayoría de las marcas constan de una marca inicial, con el nombre y los atributos del elemento a representar, seguida del contenido, y se cierra con la marca final con los símbolos </nombre_marca>. Algunas marcas (marcas abiertas) no necesitan cerrarse, ya que solo constan de marca inicial.
No es necesario usar mayúsculas para escribir las etiquetas HTML, si bien su empleo ayuda a mejorar la legibilidad del código.
Los nombres indican el tipo de marca que se va a realizar. Un nombre consiste en una letra seguida de letras, dígitos, puntos o guiones. La longitud de un nombre está limitada a 72 caracteres en la definición HTML. Los nombres de elementos y atributos no distinguen entre mayúsculas y minúsculas, pero los nombres de entidades si.
En todas las marcas, el nombre debe comenzar inmediatamente después del símbolo <.
Los atributos son los parámetros que puede recibir la marca. Cuando una marca admite atributos, estos se describen a continuación del nombre del elemento. Generalmente, los atributos tienen la forma: Nombre=valor, aunque en algunos casos solo es necesario el nombre del atributo. Se pueden poner espacios antes y después del signo igual.
El valor de un atributo puede ser bien una cadena de caracteres entre comillas (simples o dobles), o bien un nombre de atributo.
Un comentario consiste en introducir en el documento descripciones explicativas que sirvan de ayuda al programador o a la persona que estudie el código. La forma de introducir un comentario en un documento HTML es muy sencilla. La marca utilizada para los comentarios es <!--descripción_de_comentarios-->. Toda la declaración del comentario se ignora a la hora de presentar el documento, ya que actúa sólo como aclaración para el que estudia el código de la página.
Un documento en HTML es un conjunto de elementos anidados.
<HTML>, y </HTML>, primer y último elemento que debe haber en cualquier documento. Este elemento consta de dos partes: cabecera y cuerpo. Por tanto, toda página a realizar debe contener la siguiente estructura:
<!-- Comentario del tipo de documento -->
<!-- Otros comentarios -->
<HTML>
<HEAD>
<TITLE> titulo </TITLE>
<! Otros elementos de cabecera si son necesarios>
</HEAD>
<BODY>
<! Desarrollo del documento >
<nombre_marca [atributo[=valor]]>[Contenido][</nombre_marca>]
</BODY>
</HTML>
<HEAD> y </HEAD>, cabecera. La cabecera se utiliza para proporcionar o identificar información que sea útil en todo el documento actual (la página WEB a la que se refiera). La cabecera puede contener los siguientes datos, sin importar el orden en el que aparezcan :
<TITLE> y </TITLE>, título. Indica el nombre del documento, que los visores (browsers o navegadores) emplean normalmente como título de la ventana. Es el único elemento obligatorio de la cabecera. El título debe ser breve y descriptivo en su contendido, pues será lo que vean los demás cuando añadan nuestra página a su bookmark (o agenda de direcciones). Esta información no se ve en la pantalla principal.
<BASE>, dirección de base: Indica la dirección de base para interpretar los enlaces relativos cuando el documento se leen fuera de su contexto (por ejemplo, si se lee de un disco duro local y su origen era un servidor Internet).
<META>, metainformación: Este campo sirve para proporcionar información sobre el documento que no pueda ser expresada en los campos anteriores. La información se describe usando pares nombre/valor, que pueden ser empleados para dos propósitos :
Algunas de estas etiquetas más empleadas:
- <META NAME="description" CONTENT="ampliación del título o resumen del contenido de la página">
- <META NAME="keywords" CONTENT="palabras clave para la búsqueda de la página">
Html5 ha definido etiquetas especiales para algunas partes de las páginas web por el contenido que poseen dentro.
<header></header>, indica que lo que contiene es la cabecera de la página. Su contenido pudiera contener un título, un menú de navegación, un formulario de búsqueda, etc.
<hgroup></hgroup>, etiqueta para agrupar titulares.
<nav></nav>, identifica la zona de navegación, formada por enlaces a las zonas principales de la web, o por un menú de navegación, desplegable de enlaces, etc.
<section></section>, se utilizan para encerrar el código correspondiente a una sección genérica dentro de un documento o aplicación. Normalmente, un bloque de texto al que perfectamente le podríamos colocar un título o encabezado, en el que todo el contenido que engloba ha de guardar cierta relación entre sí.
<article></article>, podría considerarse como cada uno de los elementos en que podemos dividir una sección.
<aside></aside>, delimita todo aquel contenido que no es directamente contenido principal del que estamos hablando o del que estamos tratando en esa página en concreto.
<figure></figure>
<footer></footer>, encierra todo aquel código tipico de las partes inferiores de las páginas web, p.e. enlaces a otras webs relacionadas, al mapa de la web, a una página de comentarios, sobre el copyright, una política del portal, quizás algo de publicidad, etc.
<address></address>
Cada elemento HTML tiene un valor de visualización predeterminado, dependiendo del tipo de eemento que sea. Los dos valores de visualización más comunes son bloque y en línea.
Un elemento a nivel de bloque siempre comienza en una nueva línea y los navegadores agregan automáticamente algún espacio (un margen) antes y después del elemento, siempre ocupa todo el ancho disponible (se extiende hacia la izquierda y la derecha tanto como puede).
Dos elementos de bloque comúnmente utilizados son: <p> y <div>.
Elementos a nivel de bloque en HTML:
<address><article><aside><blockquote><canvas><dd><div><dl><dt><fieldset><figcaption><figure><footer><form><h1-h6><header><hr><li><main><nav><noscript><ol><p><pre><section><table><tfoot><ul><video>
Un elemento en línea no comienza en una nueva línea, solo ocupa el ancho necesario.
Un elemento en línea no puede contener un elemento a nivel de bloque.
Elementos en línea en HTML:
<a><abbr><acronym><b><bdo><big><br><button><cite><code><dfn><em><i><img><input><kbd><label><map><object><output><q><samp><script><select><small><span><strong><sub><sup><textarea><time><tt><var>
El elemento <div> es de nivel de bloque y a menudo se utiliza como contenedor para otros elementos HTML.
El elemento <span> es un contenedor en línea que se utiliza para marcar una parte de un texto o una parte de un documento.
<BODY> y </BODY> son las marcas de comienzo y final del que contiene el texto o documento de la página que se va a presentar. Esta marca permite los atributos:
BACKGROUND="imagen" para activar una imagen contenida en un fichero como fondo del documento. Las imágenes que con mayor frecuencia suelen emplearse como fondos son las de colores homogéneos, sobre las que se pueda leer sin dificultad el texto de la página. Normalmente, las imágenes de fondo tendrán un tamaño pequeño y estarán preparadas para que puedan repetirse, llenando todo el fondo de la página, de manera que no se noten los bordes de unión entre ellas. El formato de la imagen pueden ser tanto GIF como JPG.
BGCOLOR="#rrggbb": Color de fondo. Si además de este color se incluye una imagen de fondo previamente, el color especificado por este atributo es el que se encuentra debajo, es decir, si la imagen es transparente, se ve el color de fondo.
TEXT="#rrggbb" : Indica el color del texto
LINK="#rrggbb": Indica el color para los anclajes de los hiperenlaces
VLINK="#rrggbb" : Indica el color para los anclajes de los hiperenlaces que se han visitado recientemente.
ALINK="#rrggbb": color de los enlaces activos (el que adquieren en el momento de ser pulsados)
Atributos para eliminar los márgenes de la página y que las tablas se sitúen ocupando todo el espacio de la página. Los dos primeros atributos son para Internet Explorer, los dos siguientes son para Netscape Navigator
topmargin="0"
leftmargin="0"
marginheight="0"
marginwidth="0"Nota: Los valores "rrggbb" indican la mezcla de colores, siendo rr = rojo, gg = verde y bb = azul (red, green, blue = RGB). Estas iniciales deben ser sustituidas por números hexadecimales entre 00 y FF. El color "#000000" es negro, y el "#FFFFFF" es blanco.
Los elementos que pueden aparecer en el cuerpo se describen a continuación.
<Hx> titulo </Hx>, para los encabezados o títulos, son marcas que se emplean para dividir en texto en secciones, o para expresar títulos destacados, siendo x un número entre 1 y 6. El título más grande es el 1, y el más pequeño el 6. Normalmente, se suelen representar con letra negrita y se alinean a la izquierda. Permiten el atributo:
ALIGN=" LEFT | RIGHT | CENTER ", para alinear a la izquierda, derecha y centro respectivamente. (Por defecto es LEFT).
Para definir y separar bloques de texto se emplean una serie de marcas que definen párrafos, texto preformateado o bloques. También es posible utilizar marcas para saltos de línea y para insertas líneas horizontales. Las marcas de bloque son las siguientes :
<P> párrafo [</P>]: Se utiliza para separar párrafos, ya que en HTML todo el texto es continuo y necesita saber como cortar las líneas. Esta marca acepta opcionalmente el atributo:
ALIGN=" LEFT | RIGHT | CENTER ". Si se omite, por defecto alinea a la izquierda.
<DIV> y </DIV>, agrupa un bloque de elementos. Esta marca acepta opcionalmente el atributo:
ALIGN=" LEFT | RIGHT | CENTER ". Si se omite, por defecto alinea a la izquierda.
<PRE> texto_preformateado </PRE>: Permite introducir en el documento texto preformateado, es decir, el texto que haya dentro de esta marca aparecerá tal y como se haya escrito, respetando los saltos de línea, retornos de carro, tabulaciones, etc. Esta marca acepta opcionalmente el atributo :
WIDTH=numero para indicar el nº máximo de caracteres por línea para que el visor ajuste el tamaño y tabulación del texto.
<BLOCKQUOTE> texto </BLOCKQUOTE>: Indica que el texto es una cita. Actúa como un sangrado, con tabulaciones a la izquierda y a la derecha.
<BR>, break. Este elemento solo tiene marca inicial, y se utiliza para que el visor salte de línea en el punto del documento en el que encuentre este elemento. Opcionalmente permite el atributo:
CLEAR=" LEFT | RIGHT | BOTH", con el objetivo de indicar donde debe comenzar la siguiente línea en el caso de distribuir el texto alrededor de una imagen, es decir indica que la siguiente línea ha de comenzar tan pronto como el margen izquierdo, derecho o ambos estén libres.
<HR>: Este elemento solo tiene marca inicial, y se emplea para dibujar una línea horizontal dentro del documento, usando caracteres o gráfico, dependiendo del visor utilizado. Esta marca permite varios atributos, todos opcionales, que son los siguientes:
SIZE=numero_pixeles para indicar el nº de pixeles de ancho o grosor que se desea que tenga la línea.
WIDTH=numero_o_porcetaje para indicar la longitud de la línea, que por defecto es todo el área de visualización de la página. Si se indica en número, se especifica en pixeles, y si se indica en porcentaje, este porcentaje debe de ir seguido del símbolo %.
ALIGN=" LEFT | RIGHT | ALL. LEFT " para indicar el modo de alineación de la línea, Por defecto es a la izquierda.
NOSHADE para especificar que la barra debe ser sólida, es decir, sin efectos de sombra.
COLOR="#rrggbb", especifica el color./p>
Las listas son en realidad otras marcas que permiten definir bloques, pero con unas características especiales. Las listas se utilizan para presentar de forma ordenada una serie de líneas. Existe varios tipos de listas, que son los siguientes:
<UL> y </UL>, Lista desordenada o Unordered List. Permite el atributo:
TYPE=DISC | CIRCLE | SQUARE, que especifica que tipo de símbolo se quiere utilizar en las líneas independientemente del nivel de anidamiento. Cada línea se marca con
<LI>línea_o_descripción</LI>, para cada elemento de la lista.
<OL> y </OL>, Lista ordenada u Ordered List, delante de cada elemento de la lista ponen un nº de orden.
TYPE=a | A | i | I, para especificar el tipo de marca en listas alfabéticas o romanas.
START=numero, especificar cual ha de ser el primer número de la lista cuando no se desea que empiece por 1.
<LI>línea_o_descripción</LI>, para cada elemento de la lista. Se puede utilizar el atributo
VALUE, con el que se puede modificar el número para esa marca y las siguientes.
<DL> y </DL>, Lista de definición o Definition List. Las listas de definición permiten hacer definiciones especiales de cada uno de los elementos que forman la lista, mostrando la definición con una tabulación más que el elemento de la lista. Para ello solo basta con utilizar
<DT>elemento</DT> (Definition Term) para definir el elemento, y
<DD>descripción</DD> (Definition Data) para especificar su descripción.
Existen varias marcas para indicar que una palabra o frase tiene un significado especial. Estas marcas son las siguientes:
<ABBR>texto </ABBR>: Indica que el texto es una abreviatura
<ACRONYM>texto </ACRONYM>: Indica que el texto representa un acrónimo
<ADDRESS>texto </ADDRESS>: Indica que el texto es una dirección, y generalmente se representa en cursiva y en línea aparte.
<CITE>texto </CITE>: Indica que el texto es una cita, y generalmente se representa en cursiva.
<CODE>texto </CODE>: Lo marcado representa un ejemplo de código dentro del texto. Suele usar el tipo de letra de caja fija.
<DEL>texto </DEL>: Indica que el texto se muestre como si estuviese borrado.
<DFN>texto </DFN>: Marca el texto sobre el que se desea mostrar un texto explicativo cuando se posiciona el puntero sobre él.
TITLE="pista": Texto explicativo a mostrar.
<EM>texto </EM>: Denota énfasis. Generalmente se representa con letra cursiva.
<FN>texto </FN>: Indica que el texto debe ser representado como un pie de página.
<KBD>texto </KBD>: Indica que el texto se introduce desde teclado y se representa usando el tipo de letra de caja fija.
<LISTING>texto </LISTING>: Indica que el texto se define como un tipo definido de texto que representa el listado de una impresora.
<PLAINTEXT>texto </PLAINTEXT>: Indica que el texto es de fuente de ancho fijo. Inhabilita el analizador de léxico (parser) del navegador.
<PRE>texto</PRE>: Define un bloque en el que su contenido se mostrará tal cual fue escrito. Las etiquetas que se encuentren dentro se interpretarán como en el resto del documento. Así mismo la etiqueta debe empezar en una línea nueva.
<SAMP>texto </SAMP>: Significa ejemplo (SAMPle), representa los caracteres escritos de forma literal y utiliza el tipo de letra de caja fija.
<STRONG>texto </STRONG>: Denota énfasis fuerte y generalmente va en negrita.
<VAR>variable </VAR>: Lugar de una variable, por ejemplo la que se le pasa a un programa. Se representa usando el tipo de letra de caja fija.
Se utiliza para indicar el aspecto de una palabra o texto. Los navegadores utilizan por defecto un tipo de fuentes, generalmente Times New Roman, que el usuario puede cambiar por otro tipo en la configuración de su navegador.
Las marcas correspondientes son las siguientes:
<B>texto</B>: Establece el texto en negrita.
<I>texto</I>: Establece el texto en cursiva.
<TT>texto</TT>: Establece el texto de caja fija o Texto de Teletipo.
<BIG>texto</BIG>: Establece un texto grande.
<SMALL>texto</SMALL>: Establece un texto pequeño.
<SUB>texto</SUB>: Establece texto subíndice.
<SUP>texto</SUP>: Establece texto superíndice.
<FONT>texto<FONT>, tipografía, que admite los siguientes atributos:
SIZE=[+|-]número. Los tamaños del texto van, de menor a mayor, del 1 al 7. El tamaño normal (o tamaño base) es el 3. Se puede cambiar relativamente con respecto a este tamaño normal con un + (mas) o un - (menos) delante.
FACE="fuente_tipográfica". Es importante saber que sólo se empleará esa fuente en caso de que esté instalada en el ordenador del visitante de la página. Se pueden emplear varias fuentes separadas por comas.
COLOR="#rrggbb ", especifica el color.
<A HREF="url"> elemento_para_salto </A>, es un caso especial de marcado que se utiliza para indicar que un texto hace referencia a otro, es decir, está anclado mediante un hiperelace. HREF se utiliza para especificar el valor del URL (Uniform Resource Locator) o URI (Uniform Resource Identifier), que es la dirección del nuevo documento. El URL se puede referir a otro documento distinto o incluso al mismo documento, tanto como a cualquier otro tipo de recurso (FTP, Gopher, etc.). Si el sitio web está organizado en subdirectorios el valor de HREF ha de incluir el subdirectorio "subdir/file.html", si se desea un directorio anterior "../file.html". Si iniciamos con "/[subdir/]file" se referencia desde el directorio raíz.
<A ID="destino"></A>: Nombra un anclaje que podrá ser referenciado utilizando el formato <A HREF="#destino"> elemento_para_salto </A>. Suele denominarse identificador de fragmentos.
El atributo href contiene la dirección de la página (URL), el carácter almohadilla (#) y el atributo id del destino (destino). En caso de ser un enlace dentro de la misma página sólo aparece el carácter almohadilla (#) y el atributo id del destino.
Los atributos opcionales son:
TITLE="titulo": Sugiere un título para el enlace destino. Este atributo es solo informativo y puede ser usado para que se visualice al colocarnos sobre el enlace o para nombrar recursos que no incluyen título, como los gráficos.
TARGET="nombre_frame", el documento aparece en un marco (Ver Frames) que tiene el nombre de "nombre_frame". Si el marco no existe, se abre uno nuevo y se le asigna el nombre dado por TARGET. Generalmente el nombre no se ve (se emplea el del recurso obtenido), pero otros anclajes pueden hacer referencia a esa ventana y, al seleccionarlos, el visor los muestra en ella. Los nombres de los marcos deben comenzar por un carácter alfanumérico, si no son ignorados. De todos modos, existen una serie de nombres especiales que empiezan con el caracter subrayado (_).
target="_blank": Con este valor, el enlace siempre se cargará en una nueva ventana (abre otro navegador).
TARGET="_self": Con este valor, el enlace se cargará en el mismo marco en el que se encuentra. Esto es útil para anular el efecto de una asignación global con <BASE TARGET=" ">.
TARGET="_parent": Este valor hace que el enlace se cargue en el FRAMESET inmediatamente superior al del documento actual. Si el documento no tiene nada por encima el efecto es el mismo que con "_self".
TARGET="_top": Este valor hace que el enlace se cargue en el cuerpo de la ventana. Se comporta como "_self" si el documento ocupa toda la página, pero resulta muy útil para salir de un bloque de FRAMES anidados. La utilidad de este atributo está en que podemos hacer que el cliente abra distintas ventanas para cada enlace, sin dejar de tener nuestra página disponible.
<BASE TARGET="marco por defecto">: Permite indicar un nombre por defecto para cada enlace de un documento que no tiene el atributo TARGET.
<IMG SRC="fichero_imagen">, para incluir imágenes en los documentos HTML. El atributo SRC lo que en realidad hace es un enlace con el fichero que contiene la imagen. La localización del fichero imagen sigue las mismás normás que los links. Si se combina con <A HREF="url">, una imagen puede ser el enlace con otros lugares u otros documentos.
Los atributos opcionales que permite son los siguientes:
ALT="descripción": descripción de la imagen, para que en caso de que no se cargue, aparezca como alternativa.
ALIGN="TOP | MIDDLE | BOTTOM | RIGHT | LEFT | TEXTTOP | ABSMIDDLE | BASELINE | ABSBOTTOM": Alinea la imagen respecto al texto, (por defecto, se usa bottom).
TEXTTOP, alinea la imagen con el elemento más alto de la línea, pero sólo contemplando el texto más alto, sin considerar cualquier otro elemento (generalmente este marca tiene el mismo efecto que top, pero no siempre es así).
ABSMIDDLE, alinea el punto medio vertical de la línea de texto con la mitad de la imagen.
BASELINE, es exactamente igual que bottom.
ABSBOTTOM, alinea el inferior de la imagen con el inferior de la línea.
Si lo que se desea es interrumpir el proceso de rellenado del texto a los lados de la imagen se puede emplear la etiqueta br con su atributo clear.
ISMAP : Indica que la imagen es una mapa. Este atributo está detallado en la sección Mapas, descrita más adelante.
WIDTH="anchura" HEIGHT="altura" : Se utilizan para aumentar la velocidad de carga, de forma que si se especifican el visor reserva el espacio de la imagen sin cargarla, continuando con el resto del texto y trayendo la imagen cuando haya terminado. Permiten también dimensionar la imagen con unos valores mucho más pequeños a los que realmente tienen y que sean enlaces a la imagen en su verdadero tamaño.
BORDER="ancho" : Especifica el ancho del borde de las imágenes.
VSPACE="valor" HSPACE="valor" : VSPACE Indica el espacio a reservar por encima y por debajo de una imagen, y HSPACE el espacio a reservar a la izquierda y la derecha de la misma. Es útil para que al alinear texto, no aparezca demasiado pegado a la imagen.
LOWSRC="imagen_baja_resolución", sirve para indicar el nombre del archivo de imagen a mostrar mientras se carga la imagen final.
USEMAP="#nombre_mapa" indica que la imagen es un mapa gestionado por el cliente.
Los mapas de selección o Image Maps son muy utilizados en las páginas WEB. Un mapa de selección consiste en permitir a los usuarios ir a otros documentos (tal y como los anclajes de los hiperenlaces) seleccionando en distintas áreas de una imagen.
El elemento para definir los mapas es MAP, junto con IMG al que se le añade el atributo USEMAP para indicar que se debe usar la descripción para gestionar el mapa. Las regiones de cada imagen se describen usando el elemento MAP.
<MAP NAME="nombre_mapa"><AREA [SHAPE="figura"] COORDS="x,y,...." [HREF="referencia" | NOHREF]></MAP>
NAME indica el nombre del mapa, para poder ser referenciado desde los elementos IMG, es por tanto necesario.
<AREA> sirve para indicar el tipo de figura (SHAPE), las coordenadas de la misma (COORDS) (el nº de ellas depende del tipo de figura) y la referencia a emplear cuando se selecciona un punto del área de la imagen (HREF o NOHREF).
Los tipos de figura (SHAPE) que se pueden utilizar y el formato de sus coordenadas (COORDS) son los siguientes:
RECT: Rectángulo. Indicado por las coordenadas de la esquina superior izquierda y por las de la esquina inferior derecha "x1,y1,x2,y2", siendo x la fila e y la columna.
POLY: Polígono. Las coordenadas se dan por cada punto "x1, y1, x2, y2,x3,y3 ......". El browser cierra el polígono automáticamente.
CIRCLE: Círculo. Las coordenadas de los círculos se definen por un punto central y la longitud del radio "x,y,r".
DEFAULT : Por defecto, rectángulo.
HREF="referencia" indicará a donde ir si se selecciona en su área, mientras que el atributo NOHREF no debe hacer nada si se selecciona su área. Hay que indicar que los anclajes relativos se expandirán tomando como base el URL de la descripción del mapa (si hay una marca BASE en el documento que contiene la descripción, será ese URL el empleado, no el del documento desde el que se referencia).
Si varios elementos AREA intersectan, la que toma precedencia es la que aparece en primer lugar en el mapa.
Existen mapas gestionados por el servidor que incrementa el tráfico y la sobrecarga del mismo. El atributo ISMAP, hace que un browser que no soporte USEMAP acceda al mapa del servidor.
<TABLE> y </TABLE>. Uno de los elementos más importantes de los documentos HTML son las tablas, que permiten presentar la información de manera muy flexible. Las tablas se pueden anidar, es decir, dentro de una fila o una columna se puede definir otra sub-tabla. Además, se pueden meter datos que ocupen las filas o columnas que se deseen sin afectar a todos los demás. Entre estas dos marcas deben definirse las características y los datos que la tabla debe contener. Este elemento acepta los siguientes atributos:
BORDER="numero", Permite especificar el borde (ancho en pixels) de la tabla. Por defecto es 0, es decir, la tabla aparece sin bordes. Si se especifica sólo BORDER (sin "numero"), el valor por defecto será 1, es decir, un borde simple. Con un valor de 2, la tabla tomará un aspecto de borde doble. Este atributo especifica el ancho de los bordes de la tabla.
WIDTH="valor", Este atributo permite indicar el ancho que va a ocupar la tabla dentro de la ventana en la que se muestra el documento. Este valor puede ser exacto en pixels o un porcentaje entre 1 y 100. Si es un porcentaje debe de ir seguido del símbolo %.
HEIGHT="valor", indicación de la longitud.
CELLPADDING="valor", define el espacio en pixels entre el contenido de las celdas y sus bordes.
CELLSPACING="valor", define el espacio entre celdas (el ancho de los bordes) por defecto 2 pixels.
BGCOLOR="#rrggbb", color de fondo de la tabla. Ver nota del apartado 4.
BORDERCOLORDARK="#rrggbb", color oscuro del borde.
BORDERCOLORLIGHT="#rrggbb", color claro del borde.
BACKGROUND="imagen", imagen como fondo de cada celda (solo Explorer).
A continuación pasan a explicarse otros elementos que se utilizan a la hora de definir las tablas:
<TBODY [ALIGN=LEFT | RIGHT | DECIMAL] [VALIGN="TOP|MIDDLE|BOTTOM|BASELINE"]> </TBODY>, define los valores por defecto dentro del cuerpo de la tabla.
<THEAD [ALIGN=LEFT | RIGHT | DECIMAL] [VALIGN="TOP|MIDDLE|BOTTOM|BASELINE"]> </THEAT>, define los valores por defecto de las filas de la tabla.
<TFOOD [ALIGN=LEFT | RIGHT | DECIMAL] [VALIGN="TOP|MIDDLE|BOTTOM|BASELINE"]> </TFOOT>, define los valores por defecto de las celdas del pie de la tabla.
<TR> y </TR> para cada fila de celdas. Su nombre viene de Table Row.
<TD> y </TD>. Su nombre viene de Table Data. Entre estas marcas deben aparecer los datos que aparecerán en la celda correspondiente de la tabla. Permite los siguientes atributos, opcionales:
ROWSPAN="filas": Permite indicar cuantas filas va a ocupar el dato o celda actual.
COLSPAN="columnas": Permite especificar cuantas columnas va a ocupar el dato o celda actual.
ALIGN=LEFT | RIGHT | CENTER, se utiliza para especificar la alineación que tomará el dato dentro de la celda, por defecto centradas.
VALIGN="TOP|MIDDLE|BOTTOM|BASELINE", para alineación vertical, por defecto en el medio.
WIDTH="valor": Permite especificar el ancho que va a tomar la celda actual. Puede ser un valor fijo en pixels o un porcentaje entre 1 y 100. Si se trata de un porcentaje, el valor ha de ir seguido del símbolo %.
HEIGHT="valor", indicación de la longitud.
BGCOLOR="#rrggbb", Color de fondo de la celda. Ver nota del apartado 4.
BACKGROUND="imagen", imagen como fondo la celda (solo Explorer).
<TH> y </TH>. Este elemento se utiliza para celdas de cabeceras o títulos de las tablas. Su nombre viene de Table Head. Admite opcionalmente el atributo ALIGN. Por defecto utiliza un tipo de letra negrita y centrada.
<CAPTION="TOP | BOTTOM">titulo</CAPTION > Este elemento se utiliza para nombrar a la tabla. Dicho nombre se mostrará encima o debajo de la tabla, centrado con respecto a su tamaño, pero nunca dentro.
Los marcos o cuadros permiten dividir las páginas HTML en varias zonas o ventanas independientes unas de otras, incluso con sus barras de desplazamiento, lo que permite presentar la información de manera muy flexible.
HTML5 considera obsoleto el uso de marcos y está desaconsejado su uso.
«El elemento frameset está obsoleto. Utilice el elemento iframe y CSS en su lugar, o utilice inclusiones del lado del servidor.»
Recordar que:
Motivos por los que ya no se utilizan los marcos frames o framesets
Cada marco, vista o región puede tener distintas características:
<FRAMESET> y </FRAMESET>, definen un conjunto de vistas.
FRAMEBORDER="valor", borde entre frames
FRAMESPACING="valor", separación entre frames (Explorer)
BORDER="valor", separación entre frames (Netscape)
ROWS="[[ valor | valor% | [valor]*], [ valor | valor% | [valor]*], ... ]", filas.
COLS="[[ valor | valor% | [valor]*], [ valor | valor% | [valor]*], ... ]", columnas.
Un documento con vistas no tiene cuerpo (BODY) y ninguna de las marcas que normalmente se colocarían en él pueden aparecer antes de la marca FRAMESET o esta última será ignorada. Dentro de ellas sólo se pueden tener otras marcas FRAMESET anidadas, marcas FRAME o marcas NOFRAMES.
Los valores de los atributos ROWS y COLS toman como valor una lista de valores separados por comas. Estos valores pueden ser valores absolutos en pixels, porcentajes entre 1% y 100% o valores de escala relativos.
En el caso del atributo ROWS, el número de filas está implícito en el número de elementos de la lista. Dado que el tamaño total de todas las filas debe coincidir con la altura de la ventana, el alto de las filas debe ser normalizado. Si no se incluye el atributo ROWS, se asume una sola fila de la misma altura que la ventana. El atributo COLS actúa de forma similar.
Una vez definidas las filas y las columnas, la asociación de elementos se hace en función de la forma de declararlas, por ejemplo, si tenemos 4 filas y 2 columnas, tendremos un total de 8 valores, donde los primeros 4 se asignarán a la vistas 1, 2, 3 y 4 de la primera columna mientras que los 4 restantes se asignarán a las mismás vistas de la segunda columna.
La sintaxis de estos valores es la siguiente:
valor : Se asume que un valor numérico simple es un tamaño fijo en pixels. Este es el tipo de valor más crítico, ya que el tamaño de la ventana del cliente variará mucho entre unos y otros. Si se usan valores fijos, será necesario mezclarlos con uno o más valores relativos, ya que en otro caso el visor del usuario probablemente ignorará los valores dados para asegurarse que las proporciones totales de las vistas toman el 100% del alto y ancho de la ventana del usuario.
valor% : Este valor indica un porcentaje simple entre 1% y 100%. Si el total de porcentajes supera dl 100%, todos los porcentajes se escalan hacia abajo. Si el total es menor que el 100% y existen vistas de tamaño relativo, el espacio sobrante se les dará a ellas. Si no hay vistas de tamaño relativo, todos los porcentajes se escalarán hacia arriba para llegar al total del 100%.
valor* : El valor de este campo es opcional, un sólo asterisco implica una vista de "tamaño relativo", lo que se interpreta como una petición de darle a la vista todo el espacio que quede libre. Si hay varias vistas de tamaño relativo, el espacio libre se divide entre ellas. Si hay un valor delante del asterisco, la vista que lo tenga toma más espacio relativo, por ejemplo, "2*, *" daría 2/3 del espacio a la primera vista y 1/3 a la segunda.
La marca FRAMESET puede estar incluida en otras marcas FRAMESET. En ese caso, la subvista completa se coloca en el espacio que hubiera sido empleado para vista si en lugar de una marca FRAMESET se hubiese colocado una marca FRAME.
<FRAME> Define las características de una vista concreta.
SRC="url", el URL del documento que se debe mostrar en su vista en particular. Si no se incluye, se muestra un espacio en blanco del tamaño que debería haber tenido la vista.
NAME="nombre_vista", asignar un nombre a una vista, de manera que pueda ser referenciada por enlaces en otros documentos o desde otras vistas por medio del atributo TARGET (ver tema 5 hiperenlaces).
MARGINWIDTH="valor", márgenes izquierdo y derecho. Si se especifica un valor, será en pixels. Los márgenes no pueden tener un tamaño menor que 1 (los objetos dentro de la vista no pueden tocar los bordes) y no pueden tener un tamaño que no deje sitio para los contenidos del documento. Este atributo es opcional, y por defecto es el browser el que decide el tamaño apropiado.
MARGINHEIGHT="valor" : Es igual que el anterior, pero se refiere a los márgenes superior e inferior.
SCROLLING="yes | no | auto" barras de desplazamiento. Si se le da el valor de "yes" siempre se tendrán las barras en esa vista, si se le da "no" nunca las tendrá, y si se le da el valor de "auto" el browser decidirán cuando son necesarias y las colocará cuando hagan falta. Este atributo es opcional, y su valor por defecto es "auto".
NORESIZE, indicador que dice que la vista no puede ser redimensionada por el usuario. El atributo es opcional, y por defecto todas las vistas son redimensionables.
FRAMEBORDER="no", elimina el borde de un frame.
<NOFRAMES> y </NOFRAMES>, permite incluir información para visores que no soportan múltiples vistas.
Lo más sencillo para incorporar música a una página web es poner un enlace (<A HREF="file_sonido">música>/A>) a un fichero de sonido, de tal manera que al pulsarlo se ejecute el fichero.
Música de fondo:
Para el Explorer <BGSOUND SRC="fondo.wav" LOOP=n> (n=número de veces que se debe ejecutar el fichero. Si se escoje n=-1 o n=infinite, el sonido se ejecutará indefinidamente; si se omite se ejecutará una sola vez)
Para el Nestcape <EMBED SRC="fondo.wav"></EMBED> con las etiquetas opcionales siguientes:
AUTOSTART="true", arranca automáticamente
LOOP="true", se ejecuta ininterrumpidamente
WIDTH=xxx HEIGHT=yy, anchura y altura de la consola que aparece para la ejecución del sonido.
Se pueden combinar los dos tipos para que sean escuchados por ambos navegadores, en este caso cada cual ignorará las etiquetas que no le pertenecen.
Una marquesina es una ventana en la que se desplaza un texto. Sólo son válidas para el Explorer de Microsoft.
No es aconsejable su uso, puesto que si se emplean para destacar, con los demás navegadores pueden pasar desapercibidas.
Un formulario es una plantilla visualizada por el navegador para obtener información que será enviada al servidor (a la URL) a fin de realizar operaciones de proceso de datos.
No tiene sentido utilizar un formulario mientras no podamos manipular la información recibida con otros programas.
Para recibir información, hasta adquirir nuevos conocimientos, nos valdremos del correo electrónico por medio de la etiqueta de enlaces de esta forma:
<A HREF="mailto:nombre@correo.es">Mi_correo_electrónico</A>que abrirá el programa de correo del visitante y le pondrá nombre@correo.es como destinatario.
Para no tener que recurrir al programa de correo, muchos proveedores de alojamiento proporcionan un programa CGI que permite enviar los e-mails directamente desde una página, mediante el código de un sencillo formulario del que facilitan un ejemplo.