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 |
<PRE WIDTH=x> ... </PRE> |
Representa el texto encerrado en élla 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 (LEFT) derecha (RIGHT), al centro (CENTER)o a ambos márgenes (JUSTIFY) |
Yo estoy a la izquierda Y yo a la derecha (recuerda al PP) Para justificar la aparición en muchos sitios. |
<ADDRESS>... </ADDRESS> |
Para escribir direcciones (donde vive la gente). |
Marisol Soto, Calle Desengaño 5 1º |
<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. |
Los productos Microsoft son fuente de graves problemas. |
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 |
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. |
Soy importante, estoy subrayado |
<S>... </S> |
Para tachar. |
|
<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 molesto. |
Etiqueta | Utilidad | Resultado |
<CITE>... </CITE> |
Para citar un texto ajeno. |
Esta frase no es mía |
<CODE>... </CODE> |
Para escribir código fuente. |
|
<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 teclear Multivac 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. |
WWW usa el protocolo http |
Etiqueta | Utilidad | Resultado |
<HR> |
Inserta una barra horizontal. |
|
<BR> |
Salto de línea. |
Hay un antes y un |
<!-- ... --> |
Comentarios. |
Esto se escribe y no se muestra |
Código | Resultado |
á,Á, é, É,... |
á, á, é, É, í, í, ó, Ó,ú y Ú |
Ñ y ñ |
Ñ y ñ |
¿ |
¿ |
¡ |
¡ |
º |
º |
ª |
ª |
™ o ™ |
™ o ™ |
© |
© |
® |
® |
|
(espacio en blanco que no puede ser usado para saltar de línea) |
Código | Resultado |
< |
< |
> |
> |
& |
& |
" |
" |
http
Es el servicio invocado para transmitir páginas web y el que usaremos normalmente en los enlaces.
https
Es una innovación sobre el anterior, que nos permite acceder a servidores seguros, que nos ofrecen el uso de técnicas de enciptación para proteger los datos que intercambiemos con él de terceras personas. Por ejemplo, operaciones con bancos o acceso a SUMA en la universidad de Murcia.
ftp
Permite trasmitir ficheros desde servidores de ftp anónimo. Si no le pedimos un fichero sino un directorio, en general el navegador se encargará de mostrarnos el contenido del mismo para que podamos escogerlo cómodamente. Utilizando la @ podremos acceder a servidores privados, donde es preciso disponer de clave y palabra de paso.
mailto
Para poder mandar un mensaje de correo electrónico.
news
Para poder acceder a foros de discusión (grupos de noticias). Se indica el servidor y el grupo. Por ejemplo news://news.ibernet.es/es.comp.demos nos conectaría con el foro es.comp.demos en el servidor nacional de Telefónica.
telnet
No es implementado generalmente por los navegadores, que suelen invocar un programa externo. Nos permite conectarnos con otros ordenadores y entrar en ellos como si nuestro ordenador fuese una terminal del mismo. Habitualmente se requiere el acceso con claves.
Parámetro | Utilidad | Resultado |
COMPACT | Indica al navegador que debe representar la lista de la manera más compacta posible. |
|
TYPE="disc", "circle", "square" |
Indica al navegador el dibujo que precederá a cada elemento de la lista. Para mayor flexibilidad se admite también como parámetro de <LI>. |
|
Parámetro |
Utilidad |
Resultado |
COMPACT |
Indica al navegador que debe representar la lista de la manera más compacta posible. |
|
TYPE="1", "a", "A", "i", "I" |
Indica al navegador el tipo de numeración que precederá a cada elemento de la lista. Para mayor flexibilidad se admite también como parámetro de <LI>. |
|
START="num" |
Indica al navegador el número por el que se empezará a contar los elementos de la lista. |
|
VALUE="num" |
Atributo de <LI>, actúa como START pero a partir de un elemento predeterminado. |
|
Alineación respecto al texto
Para poder maquetar conjuntamente texto y gráficos, el HTML proporciona, por medio del parámetro ALIGN, las siguientes maneras de alinear una imagen respecto del texto que la acompaña:
Valor de ALIGN | Utilidad | Resultado |
TOP |
Coloca el punto más alto de la imagen coincidiendo con más alto de la línea de texto actual. |
Este es el texto |
MIDDLE |
Alinea el punto medio (en altura) de la imagen con la base del texto. |
Este es el texto |
BOTTOM(Por defecto) |
Alinea el punto más bajo de la imagen con la base del texto. |
Este es el texto |
LEFT |
Coloca la imagen a la izquierda del texto. |
Este es el texto |
RIGHT |
Coloca la imagen a la derecha del texto. |
Este es el texto |
Black |
Silver |
Gray |
White |
Maroon |
Red |
Purple |
Fuchsia |
Green |
beige |
Olive |
Yellow |
Navy |
Blue |
Teal |
Aqua |
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2 Final//ES">
Cumple el estándar HTML 3.2
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//ES"
"http://w3.org/TR/REC-html40/loose.dtd">
Cumple el estándar HTML 4.0
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//ES
"http://w3.org/TR/REC-html40/strict.dtd">
Cumple el estándar HTML 4.0 y no contiene además elementos desaconsejables
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Frameset//ES"
"http://w3.org/TR/REC-html40/frameset.dtd">
Es una definición de marcos que cumple el estándar HTML 4.0
El HTML 4.0 considera desaconsejables aquellos elementos que, aún siendo soportados, han sido sustituidos por otros más potentes y, por ello, es posible que sean eliminados del estándar HTML en el futuro.
La cabecera
Suele ser el lugar más indicado para colocar aquellos elementos de la página que no alteren el contenido de la misma, aunque si la forma de presentarlo y su comportamiento. Es por eso que es el lugar más recomendable para colocar los scripts y las hojas de estilo, como veremos en los capítulos correspondientes.
Además del título de la página, uno de los elementos que se
pueden incluir aquí son los META. Entre otras cosas, sirven para indicar propiedades de la página como pueda ser el nombre de su autor. Por ejemplo,
<META NAME="GENERATOR" CONTENT="Mozilla/4.03 [es] (Linux;)
[Netscape]">
nos indicaría la herramienta con que hemos creado la página (en este caso la versión 4.03 en español para Linux del Composer de Netscape). Estas son las propiedades más
comunes:
Propiedad | Utilidad |
AUTHOR |
Autor de la página. |
GENERATOR |
Herramienta utilizada para hacer la página. |
CLASSIFICATION |
Palabras que permite clasificar la página dentro de un buscador jerárquico (como Yahoo). |
KEYWORDS |
Palabras clave por las que encontrarán la página en los buscadores. |
DESCRIPTION |
Descripción del contenido de la página. |
Hay también otro elemento interesante que podremos incluir en nuestras cabeceras. Cuando especificamos una URL relativa en un enlace, en principio es para acceder a una página situada en nuestro mismo servidor. Sin embargo, si especificamos:
<BASE HREF="https://www.um.es/docencia/barzana/IAGP/">
Ahora todas nuestras URLs relativas se referirán al directorio /IAGP dentro del servidor https://www.um.es/docencia/barzana.
El cuerpo
En este apartado se van a explicar los parámetros que admite la etiqueta <BODY>, ya que el resto de la estructura del cuerpo se explica en otras partes:
BACKGROUND |
Permite definir un gráfico de fondo. |
BGCOLOR |
Permite definir el color de fondo de la página. |
BGPROPERTIES |
Cuando es igual a FIXED el gráfico definido como fondo de la página permanecerá inmóvil aunque utilicemos las barras de desplazamiento. |
TEXT |
Cambia el color del texto. |
|
Cambia el color de un enlace no visitado (por defecto azul). |
VLINK |
Cambia el color de un enlace ya visitado (por defecto púrpura). |
ALINK |
Cambia el color que toma un enlace mientras lo estamos pulsando (por defecto rojo). |
LEFTMARGIN y TOPMARGIN |
Especifican el número de pixels que dejará de margen entre el borde de la ventana y el contenido de la página. Se suelen utilizar para dejarlos a cero. |
MARGINWIDTH y MARGINHEIGHT |
Más o menos equivalentes a los anteriores, pero éstos funcionan en Netscape. |
No resulta recomendable cambiar los colores del texto y enlaces a no ser que exista alguna dificultad al leerlos por haber modificado el fondo, ya que en muchas ocasiones el usuario ha podido cambiarlos en las
opciones de su navegador y estarán ya a su gusto.
Formularios
Una de las mayores ventajas de la web es que resulta interactiva. Los usuarios de una página no tienen más
que escribir al autor de la misma para comentarle cualquier cosa de la misma. Sin embargo, si deseamos que nos digan sólo unas cosas concretas (responder a alguna pregunta, seleccionar entre varias opciones, etc..) deberemos utilizar formularios. Por ejemplo,
<FORM ACTION="" METHOD=POST>
Nombre:<BR><INPUT NAME="nombre" TYPE=TEXT SIZE=32>
<BR>¿Cuántos son dos y dos?<BR>
<INPUT NAME="Respuesta" TYPE=RADIO VALUE="mal">3<BR>
<INPUT NAME="Respuesta" TYPE=RADIO VALUE="bien">4<BR>
<INPUT NAME="Respuesta" TYPE=RADIO VALUE="mal">5<BR>
<INPUT TYPE="Submit" VALUE="Comprobar">
</FORM>
se verá:
Todos los elementos de un formulario deben estar encerrados entre <FORM>y </FORM>. Como parámetros cabe destacar tres. ACTION define el URL que deberá gestionar el formulario. Puede ser una dirección de correo (precedida del inevitable mailto:, en cuyo caso deberemos añadir el parámetro ENCTYPE="text/plain" para que lo que recibamos resulte legible.
Por otro lado, tenemos el parámetro METHOD define la manera en que se enviará el formulario. Es recomendable utilizar POST.
En el caso de que estemos mandando el formulario a nuestra dirección
de correo electrónico es obligado usarlo.
Ahora se va a tratar uno a uno todos los elementos que podemos incluir en
un formulario. Veremos que todos ellos tienen algo en común.
Como el resultado de cualquier formulario es una lista de variables y
valores asignados a las mismas, todos ellos tendrán un
atributo en común: el nombre de su variable. El parámetro
también será común a todos: NAME.
Cajas de texto
Existen tres maneras de conseguir que el usuario introduzca texto en nuestro formulario. Las dos primeras se obtienen por medio de la etiqueta
<INPUT>:
<INPUT TYPE=TEXT> | |
<INPUT TYPE=PASSWORD> |
El primero nos dibujará una caja donde escribir un texto (de una sola línea). El segundo es equivalente, pero no veremos lo que tecleemos en l. Estos son los atributos para modificarlos:
Parámetro | Utilidad |
SIZE |
Tamaño de la caja de texto. |
MAXLENGTH |
Número máximo de caracteres que puede introducir. |
VALUE |
Texto por defecto que contendrá la caja. |
<TEXTAREA><br/>Por defecto<br/></TEXTAREA> |
Lo que incluyamos entre las dos etiquetas será lo que se muestre por defecto dentro de la caja. Admite estos parámetros:
Parámetro | Utilidad |
ROWS |
Filas que ocupará la caja de texto. |
COLS |
Columnas que ocupará la caja de texto. |
Si lo que deseamos es que el usuario decida entre varias opciones podremos hacerlo de dos formas. La primera es la que se vio en el ejemplo inicial:
3<INPUT NAME="Respuesta" TYPE=RADIO VALUE="mal"><BR> 4<INPUT NAME="Respuesta" TYPE=RADIO VALUE="bien"><BR> 5<INPUT NAME="Respuesta" TYPE=RADIO VALUE="mal"><BR> |
Para asociar varios botones de radio a una misma variable les pondremos a todos ellos el mismo NAME.
Aparte de esto acepta los siguientes parámetros:
Parámetro | Utilidad |
VALUE |
Este es el valor que asignará a la variable. |
CHECKED |
Si lo indicamos en una de las opciones esta será la que esté activada por defecto. |
Pero también tenemos una posibilidad que ocupa bastante menos: las listas desplegables. Para emplearlas deberemos utilizar dos etiquetas, SELECTy OPTION:
<SELECT NAME="Navegador"> <OPTION>Mozilla <OPTION>Explorer <OPTION>Opera <OPTION>Lynx <OPTION>Otros </SELECT> |
Los parámetros que admite SELECT son las siguientes:
Parámetro | Utilidad |
SIZE |
El número de opciones que podremos ver. Si es mayor que 1 veremos una lista de selección y, si no, veremos una lista desplegable. |
MULTIPLE |
Si lo indicamos podremos elegir más de una opción. |
Y OPTION estos:
Parámetro | Utilidad |
VALUE |
Este es el valor que asignará a la variable. |
SELECTED |
Si lo indicamos en una de las opciones esta será la seleccionada por defecto. |
Existen dos: uno que se utiliza para mandar el formulario y otro que sirve para limpiar todo lo que haya rellenado el usuario:
<INPUT TYPE=SUBMIT><BR> <INPUT TYPE=RESET> |
Podemos cambiar el texto que el navegador pone por defecto en esos botones
utilizando el parámetro VALUE.
Otros elementos
Puede que necesitemos que el usuario sencillamente nos confirme o niegue algo. Se consigue por medio de controles de confirmación:
<INPUT NAME="Belleza" TYPE=CHECKBOX>Me considero guapo/a |
Una de las cosas que más han mejorado son los botones. Ahora disponen de una etiqueta propia, de modo que se pueda encerrar con ella todo tipo de elementos HTML, como gráficos o, incluso, tablas enteras.
Como no podía ser de otra manera, la etiqueta en cuestión se llama BUTTON:
<BUTTON TYPE="button"> <table border="1"> <tr><BR/> <th>Soy una</th><BR/> <th>tabla</th> </tr> <tr> <td>que está</td> <td>en un botón</td> </tr> </table> </BUTTON> |
Los parámetros de dicha etiqueta son los normales, TYPE, que podrán tomar los valores SUBMIT (por defecto), RESET y BUTTON,NAME y VALUE.
Por otro lado, ahora podemos declarar un gráfico como un elemento más de entrada. como un nuevo tipo dentro del elemento INPUT:
<INPUT TYPE="image" SRC="graficos/nav.gif" alt="Elije navegador"> |
Este elemento se comportará de mismo modo que un botón de tipo SUBMIT, pero añadirá como información en el formulario las coordenadas x e y donde el usuario lo pulsó.
Etiquetas
Hasta hora, el texto que acompañaba a los campos de entrada no estaba asociado a los mismos de ninguna manera. Así, por ejemplo, si pulsábamos en el texto que acompañaba a un control de confirmación, no sucedía nada. Ahora, en cambio, si utilizamos la etiqueta LABEL, el control cambiará de estado (sólo disponible a partir de Netscape 5):
<LABEL> <INPUT NAME="Belleza" TYPE=CHECKBOX> Me considero guapo/a </LABEL> |
Hasta ahora, no disponíamos de ninguna manera de agrupar visualmente varios controles, si no echábamos mano de elementos que no son del formulario, como tablas o imágenes.
Ahora, si encerramos una parte de un formulario dentro de la etiqueta FIELDSET se mostrará un rectángulo alrededor de los mismos. Si además, le indicamos un título por medio de la etiqueta LEGEND nuestros formularios quedarán hechos un verdadero primor:
<FIELDSET> <LEGEND>Mi hermoso formulario</LEGEND> <LABEL> Mi texto: <INPUT TYPE="text"> </LABEL> </FIELDSET> |
Todos los controles de un formulario se pueden desactivar, impidiendo así al usuario que los utilice. Se seguirán mostrando en pantalla, aunque con un aspecto distinto para indicar su triste estado. Para ello sólo tenemos que indicarle el parámetro DISABLED:
<LABEL DISABLED>Texto: <INPUT TYPE=TEXT DISABLED> </LABEL> |
Hemos visto que podemos hacer enlaces de texto y de gráficos. Pero también existe otra posibilidad: que dentro de una sola imagen podamos acceder a varios enlaces. Se hace declarando zonas dentro de la imagen (rectángulos, círculos, etc..), siendo cada una de ellas un enlace distinto. Tradicionalmente, siempre han existido dos maneras de hacerlo:
Los segundos fueron los primeros
en desarrollarse y estaban incluidos dentro del estándar HTML
2.0. Sin embargo, nunca hubo una manera común de gestionar
esos mapas. Debido a ello, Netscape elaboró un sistema propio
que fue incluido en el estándar 3.2: los mapas gestionados por
el navegador.
Mapas gestionados por el cliente
Para utilizarlos necesitaremos dos cosas: declarar el mapa y asignarlo a una imagen. Vamos primero a declarar nuestro mapa:
<MAP NAME="mi_mapa">
<AREA SHAPE=... COORDS=...ALT="Enlace
a..">
...
</MAP>
Dentro de la etiqueta MAP sólo podremos definir el nombre del mapa (algo imprescindible, por otra parte). Es dentro de cada elemento AREA donde podremos definir cosas más interesantes:
Parámetro | Utilidad |
SHAPE |
Define la forma de la zona, que podrá ser rectangular, circular o poligonal. |
COORDS |
Coordenadas (separadas por comas) que definen la zona. El número y significado de esas coordenadas dependerá de la zona. |
HREF |
URL a donde irá el usuario si pulsa sobre esa zona. |
NOHREF |
Especifica que esa zona no tiene asignado enlace alguno. |
ALT |
Texto que se presentará en lugar de la imagen en navegadores no gráficos para acceder al enlace. |
Como podemos ver, para declarar correctamente una zona necesitamos conocer cómo se definen exactamente las formas y coordenadas:
|
SHAPE | COORDS |
Rectangular |
RECT |
"x1,y1,x2,y2" siendo (x1,y1) la esquina superior izquierda y (x2,y2) la inferior derecha. |
Circular |
CIRC |
"x,y,radio" siendo (x,y) el centro del círculo y radio su... eehh.. ¿cómo lo diría yo? ¿Su radio?. |
Polígono irregular |
POLY |
"x1,y1,x2,y2,x3,y3,..." definiendo cada pareja (x,y) una esquina del polígono. La última pareja de coordenadas se unirá a la primera para cerrar el polígono. |
Toda la imagen |
DEFAULT |
No se indican. |
Ahora que hemos definido un mapa, sólo queda asignarlo a una imagen. Esto se hace del siguiente modo:
<IMG SRC=... USEMAP="#mi_mapa">
Siempre tenemos que añadir al comienzo del nombre de nuestro mapa un sostenido(#).
Tablas
Las tablas son posiblemente la manera más clara de organizar la información. También es el modo más adecuado de maquetar texto y gráficos de una manera algo más controlada que con los parámetros ALIGN.
Las tablas se definen de la siguiente manera. Primero, las características de la tabla, luego las de cada fila y dentro de ésta, cada celda. Así pues, una tabla con 2 filas y 3 columnas se declarará así:
<TABLE> <TR> <TD>1,1</TD> <TD>1,2</TD> <TD>1,3</TD> </TR> <TR> <TD>2,1</TD> <TD>2,2</TD> <TD>2,3</TD> </TR> </TABLE> |
|
Como se puede ver la tabla no tiene mucho aspecto de tabla. Quedará mejor con unos bordes, Puede que tampoco le viniese mal mayor espacio entre celdas o mayor anchura. Estas son las cosas que podremos cambiar con los atributos de TABLE:
BORDER |
Especifica el grosor del borde que se dibujará alrededor de las celdas. Por defecto es cero, lo que significa que no dibujará borde alguno. |
CELLSPACING |
Define el número de pixeles que separarán las celdas. |
CELLPADDING |
Especifica el número de pixeles que habrá entre el borde de una celda y su contenido. |
WIDTH |
Especifica la anchura de la tabla. Puede estar tanto en pixeles como en porcentaje de la anchura total disponible para él (pondremos "100%" si queremos que ocupe todo el ancho de la ventana del navegador). |
ALIGN |
Alinea la tabla a izquierda (LEFT), derecha (RIGHT) o centro (CENTER). |
1,1 |
1,2 |
1,3 |
2,1 |
2,2 |
2,3 |
Ahora que hemos definido la tabla nos toca hacer lo mismo con las filas.
Cada fila se define con una etiqueta TR que tiene los siguientes atributos:
ALIGN |
Alinea el contenido de las celdas de la fila horizontalmente a izquierda (LEFT), derecha (RIGHT)o centro (CENTER). |
VALIGN |
Alinea el contenido de las celdas de la fila verticalmente arriba (TOP), abajo (BOTTOM)o centro (MIDDLE). |
Por último, nos queda definir cada celda gracias a la etiquetas TDy TH. Estas etiquetas son equivalentes, pero la última se utiliza para encabezados, de modo que su interior se escribirá por defecto en negrita y centrado. Estos son los atributos de ambas:
ALIGN |
Alinea el contenido de la celda horizontalmente a izquierda (LEFT), derecha (RIGHT) o centro (CENTER). |
VALIGN |
Alinea el contenido de la celda verticalmente arriba (TOP), abajo (BOTTOM)o centro (MIDDLE). |
WIDTH |
Especifica la anchura de la celda. También se puede especificar tanto en pixels como en porcentaje, teniendo en cuenta que, en este último caso, será un porcentaje respecto al ancho total de la tabla (no de la ventana del navegador). |
NOWRAP |
Impide que, en el interior de la celda, se rompa la línea en un espacio. |
COLSPAN |
Especifica el número de celdas de la fila situadas a la derecha de la actual que se unen a ésta (incluyendo la celda en que se declara este parámetro). Es por defecto uno. Si se pone igual a cero, se unirán todas las celdas que queden a la derecha. |
ROWSPAN |
Especifica el número de celdas de la columna situadas debajo de la actual que se unen a ésta. |
Posiblemente los dos últimos parámetros no puedan quedar claros sin ejemplos. De hecho, aún entendiendo perfectamente su función es habitual que confundamos a uno con otro. Pero bueno, vamos a ver una tabla de 3x3 con una celda que se une a una de la derecha y otra que se une a otra de debajo:
<TABLE BORDER=1> <TR> <TD COLSPAN=2>1,1 y 1,2</TD> <TD>1,3</TD> </TR> <TR> <TD ROWSPAN=2>2,1 y 3,1</TD> <TD>2,2</TD> <TD>2,3</TD> </TR> <TR> <TD>3,2</TD> <TD>3,3</TD> </TR> </TABLE> |
|
Como podemos ver, cuando declaramos un celda con ROWSPAN o COLSPAN, no deberemos declarar las celdas "absorbidas" o la creación de la tabla se nos complicará mucho.
Título de la tabla
Por último, vamos a ver como definir un título a la tabla. Esto se hace por medio de la etiqueta CAPTION. Para ver cómo funciona, vamos a incluirlo en la declaración de la tabla anterior:
<TABLE BORDER=1> <CAPTION> Ejemplo de tablas </CAPTION> ... </TABLE> |
|
Esta etiqueta admite sólo un parámetro: ALIGN, que es por defecto TOP. Si lo definimos como BOTTOM el título se colocará al final de la tabla en lugar del comienzo.
Marcos
Un marco (o frame) es una ventana independiente dentro de la ventana general del navegador. Cada marco tendrá sus bordes y sus propias barras de desplazamiento. Así cada página se dividirá en la práctica en varias páginas independientes.
Para crearlos necesitaremos un documento HTML específico, que llamaremos documento de definición de marcos. En él especificaremos el tamaño y posición de cada marco y el documento HTML que contendrá.
Vamos a examinar por último los parámetros COLS y ROWS. Deberemos asignarles una lista de tamaños separada por comas. Se admiten los siguientes formatos de tamaño:
Por último, indicar que las etiquetas <FRAMESET> se pueden anidar. Esto se hace poniendo otro <FRAMESET> donde normalmente colocamos las etiquetas <FRAME> tal que así:
<FRAMESET COLS="20%,80%">
<FRAME NAME="indice" SRC="indice.html">
<FRAMESET ROWS="*,80">
<FRAME NAME="principal" SRC="introduccion.html">
<FRAME NAME="ejemplos" SRC="ejemplo.html">
</FRAMESET> </FRAMESET>
Etiqueta <FRAME>
Esta etiqueta define tan sólo las características de un marco dado, no de un conjunto. Estos son los parámetros que admite:
NAME |
Asigna un nombre a un marco para que después podamos referirnos a él. |
SRC |
Indica la dirección del documento HTML que ocupará el marco. |
SCROLLING |
Decide si se colocan o no barras de desplazamiento al marco para que podamos movernos por su contenido. Su valor es por defecto AUTO, que deja al navegador la decisión. Las otras opciones que tenemos son YES y NO. |
NORESIZE |
Si lo especificamos el usuario no podrá cambiar de tamaño el marco. |
FRAMEBORDER |
Al igual que su homónimo en la etiqueta < FRAMESET>, si lo igualamos a cero se eliminará el borde con todos los marcos contiguos que tengan también este valor a cero. |
MARGINWIDTH |
Permite cambiar los márgenes horizontales dentro de un marco. Se representa en pixeles. |
MARGINHEIGHT |
Igual al anterior pero con márgenes verticales. |
Por defecto, cuando pulsamos sobre un enlace situado dentro de un marco, la nueva página a la que queremos acceder la veremos encerrada en ese mismo marco. Es posible que deseemos que esto no ocurra. Por ejemplo, si tenemos un marco que nos sirve de índice y otro donde mostramos los contenidos sería deseable que los enlaces del marco índice se abrieran en el otro marco. Esto es posible hacerlo gracias al parámetro TARGET.Este parámetro se puede colocar en tres etiquetas: <A>, <AREA> y <BASE>.
En las dos primeras sirve para indicar el marco en el que abriremos ese enlace en particular y el último modificaremos el marco en el que por defecto se nos muestran todos los enlaces.
Pero para que un parámetro funcione, es habitual que le asignemos un valor, y TARGET no es una excepción. Para indicarle el marco que deseamos le asignaremos el nombre del mismo. Así, en los ejemplos anteriores, si en el marco llamado indice tenemos un enlace que queremos se abra en el marco principal pondremos:
<A HREF="pagina.html" TARGET="principal">
También existen cuatro nombres reservados que podremos utilizar en el
parámetro TARGET:
_top
Elimina todos los marcos existente y muestra la nueva página en la ventana original sin marcos.
_blank
Muestra la nueva página en una ventana nueva y sin nombre del navegador.
_self
Muestra la nueva página en el marco donde está declarado el enlace.
_parent
Muestra la nueva página en el <FRAMESET>
que contiene al marco donde se declara el enlace. En el ejemplo que pusimos de <FRAMESET> anidados, una enlace situado en el marco ejemplo cuyo parámetro TARGET fuese igual a _parent eliminaría la separación entre los marcos ejemplo y principal y mostraría en ese nuevo marco la nueva página.
Hojas de estilo
Las hojas de estilo intentan separar el contenido de un página de la forma de presentarlo en pantalla. Esto lo hacen personificando los cambios que las etiquetas de formato HTML realizan en nuestro texto. Por ejemplo, sabemos que usando <P> tendremos una párrafo nuevo con una separación del anterior determinada, etc.. Con las hojas de estilo también podremos decirle a un párrafo que todo su texto sea verde y que además va a tener un margen izquierdo de 30 pixeles.
Vamos a detenernos en todos los elementos. Para empezar, la etiqueta HTML con la que deberemos englobar las hojas de estilo será <STYLE>, que sólo podrá estar situada en la cabecera de la página. Su parámetro TYPE indica la sintaxis que utilizaremos para definirlas. En el caso de las hojas en cascada deberá ser text/css.
Ahora examinemos la hoja de estilo propiamente dicha. Indicaremos primero la etiqueta que deseamos personalizar. Será <P>.
Después, entre llaves, pondremos una lista de las cosas que queremos modificar. En nuestro caso son dos, el color (en el formato habitual) y el margen, que se define en pixels.
Hay que destacar que, aunque muchas veces los navegadores tengan una cierta flexibilidad, la sintaxis CSS (Cascading Style Sheet) es sensible a la diferencia entre maysculas y minsculas. Conviene tener cuidado.
El HTML 4.0 permite declarar fuera de la página las hojas de estilo, llevando de este modo al extremo su filosofa de separar forma y contenido. Si colocamos nuestras hojas de estilo en un fichero llamado estilos.css (solo las hojas, no la etiqueta <STYLE>) no tendremos más que incluir la siguiente línea en la cabecera de nuestro documento HTML para incluirlas en nuestras páginas:
<LINK REL="stylesheet" HREF="estilos.css" TYPE="text/css">
Clases
Hasta ahora habíamos definido estilos para una etiqueta determinada. Pero también podemos hacerlo para una clase determinada. ¿Esto qué significa? Pues que si, por ejemplo, definimos la hoja de estilo de la clase verde de la siguiente manera:
P.verde {color: green; margin-left: 30px;}
sólo estarán verdes y con un margen izquierdo de 30 pixels aquellos párrafos definidos con <P CLASS="verde">.
Así de sencillo.
Ampliando un poco más las posibilidades de las clases, se pueden realizar excepciones. Supongamos que tenemos unos párrafos que queremos que tengan unos márgenes determinados y color verde. Y deseamos que uno solo de esos párrafos, con los mismo márgenes, sea azul. Podríamos definir dos clases distintas, pero hay un método mejor: usar el parámetro ID.
Por ejemplo:
all.verde {color: green; margin-left: 10px;}
#ej1 { color: blue;}
Ahora todos los párrafos de clase verde serían, obviamente, verdes y con un margen de 10 pixeles. Sin embargo el párrafo definido por <P CLASS="verde" ID="ej1"> será azul:
Este párrafo es muy verde.
Y anda que este...
Sin embargo, este no, fíjate que curioso.
Puede que, a veces, no queramos modificar el comportamiento de un elemento sino que creemos un estilo que queremos actúe sólo, un estilo completo creado de la nada. Una etiqueta nueva y propia. Entonces, ¿qué hacemos? Utilizar las etiqueta <SPAN> y <DIV>.
El método es simple. Definimos una clase rojo que simplemente modifique el color (que será rojo). Ahora, si queremos que una sección de texto esté en rojo lo encerraremos entre las etiquetas <SPAN CLASS="rojo">y </SPAN> o entre <DIV CLASS="rojo">y </DIV>.
La diferencia entre ambas es que, mientras SPAN realmente no hace nada por sí misma, DIV convierte a todo lo que encierra en un bloque aparte (poniendo un salto de línea tanto al comienzo como al final). Veremos en otra parte que a las etiquetas que se comportan como bloques (<P>, <H1>, las que dijimos modifican un párrafo entero) se les pueden definir atributos propios desde las hojas de estilo.
Hojas de estilo: referencia
En este apartado vamos a ver casi todas las propiedades que se pueden alterar por medio de las hojas de estilo. Hay que indicar que algunas de ellos no los soporta el Explorer y en cambio otros no las entienden algunos navegadores. Así que es recomendable probarlos en distintos navegadores antes de incorporarlos a nuestras páginas.
Propiedades de bloque
Vamos a empezar con las propiedades de bloque, que definen cosas como los márgenes o la colocación de bloques de contenido HTML:
Propiedad | Descripción | Posibles valores |
margin-top, margin-right, margin-bottom, margin-left,<br/> margin: top right bottom left |
Distancia mínima entre un bloque y los demás elementos. Tanto margin como margins() se utilizan para cambiar todos estos atributos a la vez. |
tamaño, porcentaje o auto. Por defecto es cero. |
padding-top, padding-right, padding-bottom, padding-left,<br/> padding: top right bottom left |
Distancia entre el borde y el contenido de un bloque. |
tamaño, porcentaje o auto. Por defecto es cero. |
border-top-width, border-right-width, border-bottom-width, border-left-width,<br/> border-width: top right bottom left |
Anchura del borde de un bloque. |
numérico |
border-style |
Estilo del borde de un bloque. |
none, solid o MS, 3D, por defecto ninguno (none). |
border-color |
Color del borde de un bloque. |
cualquier color |
width, height |
Tamaño de un bloque. Su mayor utilidad está en su aplicación a un elemento gráfico. |
tamaño, porcentaje o auto, automático por defecto. |
float |
Justificación del contenido de un bloque. |
left, right o none, por defecto ninguna. |
clear |
Permiso para que otro elemento se pueda colocar a su izquierda o derecha. |
left right, both o none, por defecto ninguno. |
Propiedad | Descripción | Posibles valores |
font-family | Tipo de letra (que puede ser genérico) que vamos a usar. | lista de tipos, ya sean genéricos o no, separados por comas. |
font-size | Tamaño del tipo de letra. | xx-small, x-small, small, medium, large, x-large, xx-large, tamaño relativo o tamaño absoluto. Por defecto medium. |
font-weight | Grosor del tipo de letra (negrita). | normal, bold, bolder, lighter o 100-900 (donde 900 es la negrita más gruesa). Por defecto normal. |
font-style | Estilo del tipo de letra (cursiva). | normal, italic, italic small-caps, oblique, oblique small-caps o small-caps. Por defecto normal. |
Propiedad | Descripción | Posibles valores |
line-height | Interlineado. | número o porcentaje. |
text-decoration | Efectos variados sobre el texto. | none, underline (subrayado), overline (como subrayado, pero por encima), line-through (tachado) o blink (parpadeante); por defecto ninguno. |
vertical-align | Posición vertical del texto. | baseline(normal), sub (subíndice), super (superíndice), top, text-top, middle, bottom, text-bottom o un porcentaje. Por defecto baseline |
text-transform | Transforma el texto a mayúsculas o minúsculas. | capitalize (pone la primera letra en mayúsculas), uppercase (convierte todo a mayúsculas), lowecase (a minúsculas) o none, por defecto no hace nada. |
text-align | Justificación del texto. | left, right, center o justify |
text-indent | Tabulación con que aparece la primera línea del texto. | Tamaño o porcentaje, por defecto cero. |
Propiedad | Descripción | Posibles valores |
color | Color del texto. | un color (en el formato habitual). |
background | Modifica tanto el gráfico el color de fondo. | dirección del fichero que contiene la imagen o un color. |
background: url(fondobonito.gif);
Propiedades de clasificación
Hasta ahora habíamos distinguido a la hora de ver las propiedades de un elemento en si estos eran tratados como bloques o no. Pero el ser bloques o no... ¿;no es acaso otra propiedad? Estas y otras formas de clasificar los elementos se pueden cambiar usando las siguientes propiedades:
Propiedad | Descripción | Posibles valores |
display | Decide si un elemento es interior (como), un bloque (<P>) o un elemento de una lista (<LI>). | inline block, list y none (que 'apaga' el elemento) |
list-style | Estilo de un elemento de una lista, pudiendo incluir un gráfico al comienzo del mismo. | disc, circle, square, decimal, lower-roman, upper-roman, lower-alpha, upper-alpha, none o la dirección de un gráfico |
white-space | Decide como se manejan los espacios, si de manera normal o como sucede dentro de la etiqueta <PRE>. | normal y pre |
Un lenguaje de script es un pequeño lenguaje de programación cuyo código se inserta dentro del documento HTML. Este código se ejecuta en el navegador del usuario al cargar la página, o cuando sucede algo especial como puede ser el pulsar sobre un enlace.
Estos lenguajes permiten variar dinámicamente el contenido del documento, modificar el
comportamiento normal del navegador, validar formularios, realizar pequeos trucos visuales, etc... Sin embargo, conviene recordar que se ejecutan en el navegador del usuario y no en la máquina donde están alojadas, por lo que no podrán realizar cosas como manejar bases de datos. Esto hace que los contadores (por
ejemplo) se deban realizar de otra manera, utilizando programas CGI.
El primer lenguaje de script que vio la luz fue el JavaScript de Netscape. Nacido con la versión 2.0 de este navegador y basado en la sintaxis de Java, su utilidad y el casi absoluto monopolio que entonces ejercía Netscape en el mercado de navegadores permitieron que se popularizara y extendiera su uso.
El máximo rival del Netscape Navigator, el Internet Explorer de Microsoft, comenzó a soportar este lenguaje en su versión 3.0. Fue también entonces cuando introdujo el único rival serio que el JavaScript ha tenido en el mercado de los lenguajes de script: el VBScript. Basado en el lenguaje BASIC, no ha tenido excesiva difusión en Internet debido a la previa implantación del JavaScript y a que son de parecida funcionalidad, pero sí es utilizado dentro de Intranets basadas en el Explorer y dentro de otras aplicaciones de Microsoft, como IIS, Access, Word, etc..
Capas
Las capas se pueden definir como páginas que se pueden incrustar dentro de otras. Los atributos de una capa (posición, visibilidad, etc.), como los de cualquier otro elemento HTML, pueden definirse dentro de una hoja de estilo. Su contenido, en cambio, siempre deberá ser especificado dentro de la parte principal de la página. Como se puede ver, de nuevo estamos siguiendo la filosofía de separar el contenido y la forma de representarlo.
En realidad, el nombre de capas no es nada oficial: es un invento de Netscape. La denominación oficial podra traducirse como "contenido HTML posicionable dinámicamente". Tampoco se las puede considerar dentro de ningún estándar HTML sino de los estándares CSS, pero son la base de lo que se ha dado en llamar HTML dinámico.
Sin duda, lo más importante de las capas es la posibilidad que presentan de ser movidas y modificadas desde un lenguaje de script. Desgraciadamente, las implementaciones de Netscape y Explorer son incompatibles entre sí, por lo que resulta complicado escribir código que funcione en ambas plataformas.
Definición
La única manera común de definir capas en Explorer y Netscape (versiones 4 y superiores) es mediante hojas de estilo en sintaxis CSS, por lo que será la que usemos de aquí en adelante.
La definición de una capa sigue la misma estructura que la que usabamos para decidir las características de una etiqueta con el parámetro ID:
<STYLE TYPE="text/css">
#micapa {position:absolute; top:100px; left:20px;}
</STYLE>
Esto colocaría a la capa que hemos denominado micapa a 20 pixels de la izquierda de la página y a 100 del comienzo
de la misma. Muy bien, pero... ¿donde escribimos lo que queremos que contenga la capa? Utilizaremos para ello la etiqueta <SPAN>:
<DIV ID="micapa">
<H1>El ttulo de la capa</H1>
<P>Aquí es donde iría el texto.
...
</DIV>
Las capas que hemos definido hasta ahora se colocan en una posición determinada de la página. Pero existe otro tipo de capas llamadas flotantes cuya colocación depende, en cambio, de la posición dentro del código fuente de la página donde las hayamos colocado. Se definen así:
<STYLE
TYPE="text/css">
#flotante {position: relative; left: 20px; top: 100px;}
</STYLE>
Propiedades
Existen varias propiedades de las capas que podemos modificar, como son la posición, la visibilidad, el orden en que se ponen en pantalla, etc... Son estos:
Propiedad | Descripción | Posibles valores |
left y top | Sitúan la esquina superior izquierda de la capa respecto a la esquina superior izquierda de la capa donde esté metida. Hay que tener en cuenta que el documento completo también se considera una capa. | distancia en pixels, por defecto cero. |
width y height | Determinan la anchura y altura de la capa. | un tamaño en pixeles. |
clip | Nos permite definir el área que se podrá ver dentro de la capa. Por ejemplo, clip:rect(20px 30px 40px 10px); recortará la capa creando un cuadro visible cuya esquina superior izquierda está a 10 pixels por la izquierda y 20 por arriba de la de la capa y cuyo tamaño sería de 30-10 de ancho y 40-20 de alto. | un área. |
z-index | Las capas con un mayor z-index se colocarán más arriba (se dibujarán al final, encima de las otras). Debe ser un valor positivo y único: dos capas no pueden tener el mismo z-index. | número positivo, por defecto las capas definidas en el código HTML más tarde están más arriba. |
visibility | Especifican si la capa debe verse o estar oculta. | visible, hidden (oculta) o inherit (hereda la visibilidad de la capa padre). En aquellas capas que simplemente estén dentro de la página principal, este valor es equivalente a visible. |
background-image | Gráfico de fondo de la capa. | una dirección. |
background-color<imagenenlinea direccion="graficos/explorer.gif" descripcion="explorer"/> y layer-background-color<imagenenlinea direccion="graficos/netscape.gif" descripcion="Netscape"/> | Color de fondo de la capa. | un color. |
Aún cuando les pueda parecer increíble a algunos, es posible escuchar sonidos (o música) desde el propio navegador. Tanto Netscape como Explorer incorporan desde hace tiempo la capacidad de reproducir sonido. El único problema es que los archivos
suelen ser grandes y, siendo algo innecesario y superfluo, poca gente incluye melodías en sus páginas.
Los formatos que se puede asegurar que los navegadores reproducirán son
los archivos WAV y MID. Para poder reproducir otros necesitarn el plug-in o añadido necesario, como puede ser el Real Audio para los archivos RA o el ModPlug para los MOD y derivados.
Sonido activado por el usuario
La manera más sencilla de incluir sonidos es dejando al usuario la decisión de escucharlos o no. Para hacerlo incluiremos el sonido en el parámetro HREF de un enlace, como si fuera una página HTML:
Sonido de fondo
Lo del sonido de fondo ya es más complicado, ya que Netscape y Explorer ofrecen soluciones propietarias, distintas e incompatibles de hacer sonar un archivo de fondo.
En Explorer, desde la versión 2.0, se pueden incluir fondos sonoros utilizando la etiqueta BGSOUND :
<BGSOUND
SRC="musica.mid">
El parámetro SRC indicará el archivo a reproducir. Esta etiqueta admite también otro parámetro, LOOP, que indica el número de veces consecutivas que sonará el fichero. Si se indica LOOP="infinite", el archivo se reproducirá indefinidamente, mientras estemos en la página.
Netscape utiliza su etiqueta <EMBED>.
Teóricamente, esta etiqueta debería servir para unir
objetos de varios tipos a la página web, pero en la práctica
sólo se utiliza para esto. Esta etiqueta tiene los siguiente
parámetros:
Parámetro | Utilidad |
SRC | Contiene el nombre de archivo de sonido a reproducir |
WIDTH y HEIGHT | En Netscape aparece un pequeño reproductor, estos parámetros especifican su tamaño. |
AUTOSTART="true" | Arranca automáticamente la reproducción. |
LOOP="true" | Reproduce ininterrumpidamente el fichero hasta que salimos de la página. |
HIDDEN="true" | Oculta el reproductor. |