HTML

HTML
HTML
Antes de empezar con <HTML> o en la cabecera se puede poner:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> que indica la

versión HTML.
Para que una página se lea en todo el mundo, existen ciertos códigos para ello:
Acento grave→ Formato & letra grave; P.E. _xxx& agrave; xxx _xxxàxxx
Acento agudo → Formato & letra acute; P.E. _xxxá xxx _ xxxáxxx
Diéresis → Formato & letra uml; P.E. _xxxä xxx _ xxxäxxx
Acento circunflejo → Formato & letra circ; P.E. _xxxâ xxx _ xxxâxxx
̃ → Formato & letra tilde; P.E. _xxxñ xxx _ xxxñxxx
Hay otros caracteres como:

Carácter Representación
€ €
ç ç
Ç Ç
ü ü
Ü Ü
& &
¿ ¿
¡ ¡
" "
· ·
º º
ª ª
¬ ¬
© ©
® ®
CABECERA DE UN DOCUMENTO HTML
TITLE _ Nombre del documento, título de la ventana. No admite parámetros.
1/51
HTML
<TITLE> Mi página </TITLE>

BASE _ Especifica la URL de partida de las referencias relatives. Lleva los
parámetro:
<BASE HREF =”…URL…”>
o un nombre de fichero:
<BASE HREF=”FILE://C:\Html..”>
o un nombre de otra página:
<BASE HREF=http://www....>
ISINDEX _ Se utiliza para poner palabras claves para la búsqueda de
documentos. Se necesita en el servidor una cosa para buscar palabras, por lo que utiliza
poco.
LINK _ Establece relaciones con otras páginas, hojas de estilo…
STYLE _ Da estilos diferentes para la visualización del documento:
<STYLE> H2{TEXT ALIGN=CENTER COLOR =Green} </STYLE>
SCRIPT _ Anuncia o permite la introducción de construcciones ejecutrables.
También se puede poner en el BODY del documento.
META _ Se utiliza para añadir información sobre la página. Esta información
puede ser utilizada por los buscadores.
Los buscadores consultan la información de la etiqueta <meta> de las páginas,
buscando coincidencias con lo que el usuario pretende encontrar.
A través de esta etiqueta pueden especificarse los atributos name y content. El
atributo name indica el tipo de información, y el atributo content indica el valor de
dicha información.. Tienen estructura de pares de nombres, nombre valor, nombre
valor.
Tipo Significado
author Autor de la página
classification Palabras para clasificar la página en los buscadores
description Descripción del contenido de la página
generator Programa utilizado para crear la página
keywords Palabras clave
La etiqueta <meta> no necesita etiqueta de cierre. Para cada etiqueta <meta>

solo es posible indicar un tipo de información y su valor, pero es posible insertar
varias etiquetas <meta> en un mismo documento.
Por ejemplo, el siguiente código indica que el autor de la página es aulaclic, que la
página trata sobre un curso de HTML gratuito, y especifica algunas palabras clave a ser
consultadas por los buscadores:
<html>
<head>
...
<meta name="author" content="aulaclic">
2/51
HTML
<meta name="description" content="Curso de HTML gratuito">

<meta name="keywords" content="código HTML etiqueta página web
gratis curso">
</head>
...
La etiqueta <meta> también se utiliza para indicarle al navegador alguna

información o alguna acción que debe realizar. En este caso se utiliza el atributo
http-equiv, en lugar del atributo name.
Para decir el tipo de caracteres que lleva se pone:

<META http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
Para decirle al navegador cuando expira la página se pone:
<META http-equiv="expires" content="Tue Jun 15 2004 09:06:38 GMT+0200 (CEST)">
Por ejemplo, imaginemos que por algún motivo queremos que nuestra página se
actualice automáticamente cada 30 segundos. En ese caso, deberíamos utilizar la acción
Refresh (actualizar). Podríamos utilizar el siguiente código:
<html>
<head>
...
<meta http-equiv="Refresh" content="30">
</head>
...
Ahora imaginemos que hemos cambiado la dirección en la que se encuentra

nuestra página web, y queremos que cuando algún usuario visite la página en la
dirección antigua, a los 5 segundos el navegador lo redirija automáticamente a la
dirección nueva. En ese caso podríamos insertar el siguiente código en la página que
se encuentra en la dirección antigua:
<html>
<head>
...
<meta http-equiv="Refresh" content="5;
URL=http://www.aulaclic.com/index.htm">
</head>
...
De este modo, el navegador realizaría la función de actualizar la página, pero

cargando la que se encontrara en la nueva dirección
(URL=http://www.aulaclic.com/index.htm).
CUERPO DEL DOCUMENTO

Formateo de texto:
Líneas que solamente contien texto y bloques cuando hablamos de
conjunto de líneas.
Atributos: Opciones que incluímos para todo el cuerpo del documento.
Están separados por blancos y solo aparecen una vez en la etiqueta BODY.
3/51
HTML
Para especificar un color de fondo, tenemos el parámetro BGCOLOR de la

directiva <BODY>:
<BODY BGCOLOR="#rrggbb">

</BODY>
dónde rrggbb es un triplete de valores en hexadecimal que nos permite especificar la

intensidad de las componentes roja (red), verde (green) y azul (blue) que tendrá el
documento como color de fondo.
Por ejemplo, FF0000 es rojo, 00FF00 es verde, 0000FF es azul, XXXXXX son
tonos de grises, FFFFFF es blanco, 000000 es negro, FFFF00 es amarillo, FF00FF es
magenta y 00FFFF es cian.
BASEFONT _ El tamaño asociado por omisión al texto normal es el 3, pero esto
no tiene porqué ser así. Se puede presentar toda la página en un tamaño de letra mayor o
menor al habitual.. La etiqueta utilizada es:
<BASEFONT SIZE =i>
Que afecta a todo el texto a partir de ella. No existe ninguna etiqueta de cierre, por
tanto su efecto actúa sobre el texto hasta la siguiente etiqueta <BASEFONT SIZE =j>.
Para definir el color y tipo de fuente utilizamos las etiquetas,
<BASEFONT COLOR =”RED” FACE =”ARIAL”>
Por ejemplo:
<BODY>
<BASEFONT Size=4>
El tamaño base de letra es 4<BR>
<FONT Size=6>
Esta frase tiene un tamaño de letra 6<BR>
</FONT>
<FONT Size=+2>
Esta frase tambien tiene un tamaño de letra 6 (4+2)<BR>
</FONT>
</BASEFONT>
</BODY>
Cambio de color de las fuentes
<FONT COLOR=#RRGGBB>Texto coloreado </FONT>

Formatear el texto <font>
Las propiedades del texto pueden modificarse a través de la etiqueta <font>. Para ello,
podemos insertar el texto entre las etiquetas <font> y </font>, especificando algunos de
los atributos de la etiqueta:
Atributo Significado Posibles valores
face fuente nombre de la fuente, o fuentes
color color del texto número hexadecimal o texto predefinido
4/51
HTML
valores del 1 al 7, siendo por defecto el 3,

size tamaño del texto o desplazamiento respecto al tamaño por defecto,
añadiendo + o - delante del valor
Por ejemplo, para insertar el texto:
Bienvenidos a www.aulaclic.com
Habría que escribir:

<font color="#993366" size="4" face="Comic
Sans MS, Arial, MS Sans Serif">Bienvenidos a www.aulaclic.com</font>
También es posible definir una fuente para todo el documento. Para ello, hay que
insertar la etiqueta <basefont> después de la etiqueta <body>.
La etiqueta <basefont> no necesita una etiqueta de cierre, y permite modificar los
mismos atributos del texto que la etiqueta <font>.
Por ejemplo:
<body>
<basefont color="#006699" size="4" face="Arial">
Si después de indicar la etiqueta <basefont> o <font>, el navegador encuentra otra

etiqueta <font>, la que prevalece es siempre la última que se encuentra.
Resaltado del texto <b>

Existen una serie de etiquetas que permiten aplicar diferentes estilos al texto que
se encuentra entre ellas, y generalmente se utilizan para resaltarlo. Estos estilos
pueden agruparse según vayan asociados al tipo de letra o a la información que
represente el texto. No hay que olvidar que todas estas etiquetas necesitan una
etiqueta de cierre, y que pueden aplicarse varias etiquetas al mismo texto.
A continuación se muestran algunas etiquetas asociadas al tipo de letra:
Etiqueta Significado Ejemplo
<b> negrita curso HTML aulaclic
<i> cursiva curso HTML aulaclic
<u> subrayado curso HTML aulaclic
<s> tachado curso HTML aulaclic
<tt> teletipo (máquina de escribir) curso HTML aulaclic
<big> aumenta el tamaño de la fuente curso HTML aulaclic
<small> disminuye el tamaño de la fuente curso HTML aulaclic
A continuación se muestran algunas etiquetas asociadas al tipo de información:
Etiqueta Significado Ejemplo
5/51
HTML
<cite> cita curso HTML aulaclic
<code> ejemplo de código curso HTML aulaclic
<dfn> definición curso HTML aulaclic
<del> eliminado
<em> énfasis curso HTML aulaclic
<ins> insertado curso HTML aulaclic
<kbd> teclado curso HTML aulaclic
<samp> muestra curso HTML aulaclic
<strong> destacado curso HTML aulaclic
<sub> subíndice curso HTML aulaclic
<sup> superíndice curso HTML aulaclic
<var> variable curso HTML aulaclic
Las etiquetas más utilizadas son las asociadas al tipo de letra, ya que son más
fáciles de recordar, y en muchos casos los resultados son los mismos que los de
aplicar una etiqueta diferente. Por ejemplo, el resultado de aplicar las etiquetas <b>
y <strong> es el mismo. Incluso a veces algunos estilos asociados al tipo de
información pueden representarse de forma distinta según el navegador.
Bienvenidos a www.aulaclic.com

<font color="#993366" size="4" face="Comic Sans MS, Arial, MS Sans
Serif">Bienvenidos a <b><u><tt>www.aulaclic.com</tt></u></b></font>
Tenemos, además, otros parámetros que nos permiten cambiar el color del texto,
que son: Con <BODY
TEXT: Nos permite cambiar el color del texto normal P.E.
<BODY TEXT =c>Documento </BODY>
LINK: Nos permite cambiar el color de los enlaces
ALINK: Nos permite cambiar el color de los enlaces al activarse
VLINK: Nos permite cambiar el color de los enlaces visitados
Podemos usar todos estos parámetros de forma conjunta, por ejemplo, podemos
hacer:
<BODY BACKGROUND="1.gif" BGCOLOR="#F4F4C4" TEXT="#0000FF"
LINK="#FF0000" ALINK="#00FF00" VLINK="#0000FF">

6/51
HTML
</BODY>
Podemos cambiar el tamaño de la fuente de texto mediante la directiva

<FONT> ... </FONT> y el parámetro SIZE, esto sólo afectará al texto que vaya entre
las directivas FONT.
Por ejemplo, podemos poner:
<FONT SIZE=5> Este texto se verá un poco más grande que el original </FONT>
pero este ya no, este ya se verá a su tamaño original.
Cuya salida en el navegador será:
Este texto se verá un poco más grande que el

original pero este ya no, este ya se verá a su tamaño original.
Salto de línea <BR>

Para que se produzca el salto de línea en el navegador, en lugar de pulsar la tecla
INTRO hay que insertar la etiqueta <br> donde se desee que se produzca el salto.
La etiqueta <br> no precisa ninguna etiqueta de cierre. No hay que insertar la
etiqueta </br> después de ella, ya que dicha etiqueta no existe.
Texto preformateado <pre>

Una forma de asegurarnos de que el texto aparezca en el navegador tal cual ha
sido insertado dentro del código, es utilizando las etiquetas <pre> y </pre>.
Utilizando estas etiquetas podemos tener la seguridad de que en el navegador se
mostrarán todos los espacios en blanco que se inserten en el texto, así como todos los
saltos de línea resultantes de pulsar la tecla INTRO, sin la necesidad de utilizar la
etiqueta <br>.
Hola, BIENVENIDOS
esta ES MI PÁGINA WEB
y esto un texto preformateado
<pre>Hola, BIENVENIDOS
esta ES MI PÁGINA WEB
y esto un texto preformateado</pre>
El inconveniente de esta etiqueta es que entre las etiquetas <pre> y </pre> no se

pueden incluir las etiquetas <img> (para incluir imágenes), <object> (para incluir
7/51
HTML
objetos como animaciones), <big>, <small>, <sub> ni <sup>
Separadores <hr>
El elemento que suele utilizarse para separar secciones dentro de una misma
página es la regla horizontal. Para insertar una regla horizontal hay que insertar la
etiqueta <hr>. Dicha etiqueta no precisa ninguna etiqueta de cierre.
Es posible especificar algunos atributos de la regla horizontal:
Atributo Significado Posibles valores
left (izquierda)
alineación de la regla dentro
align right (derecha)
de la página
center (centro)
un número, acompañado de % cuando se desee

width ancho de la regla
que sea en porcentaje
size alto de la regla un número
eliminar el sombreado de la
noshade no puede tomar valores
regla
Por ejemplo, para insertar el texto y la regla horizontal siguientes:

Inicio
Bienvenidos a mi página.
Inicio<hr align="left" width="300%" size="5" noshade>Bienvenidos a mi
página.
8/51
HTML
Sangrado de texto <blockquote>

La sangría es una especie de margen que se establece a ambos lados del texto. Para que un text
aparezca sangrado, se inserta entre las etiquetas <blockquote> y </blockquote>.
Esta etiqueta en un principio se definió para delimitar citas pero que como la mayoría de lo
navegadores resuelven la cita incluyendo un sangrado del texto, su uso para sangrar texto se h
generalizado.
El uso de la etiqueta <blockquote> obliga a que el texto aparezca en una nueva línea.
Insertando el texto entre varias etiquetas <blockquote> y </blockquote> se consigue que lo
márgenes sean mayores.
Queridos usuarios,
tengo el placer de comunicaros que hay una nueva sección.

Queridos usuarios,
<blockquote>
<blockquote>
tengo el placer de comunicaros que hay una nueva sección.
</blockquote>
</blockquote>
Firmas <address>
Se pone justo delante del final del BODY. Se utiliza para firmar. </ADDRESS>
<ADDRESS><CENTER> <U>Módulo HTML </U></CENTER></ADDRESS>
Párrafos <p>
El texto de una página puede agruparse en párrafos. Para ello, el texto de cada
uno de los párrafos debe insertarse entre las etiquetas <p> y </p>.
No es necesario insertar la etiqueta <br> para que un nuevo párrafo aparezca
debajo del anterior, ya que las etiquetas <p> y </p> hacen que se cambie de línea
automáticamente.
También es posible cambiar la alineación del texto de cada párrafo. Para ello se
modifica el valor del atributo align, cuyos valores pueden ser left (izquierda), right
(derecha), center (centrado) o justify (justificado).
Aquí encontraréis cursos de formación muy interesantes.
9/51
HTML

<p align="center">Bienvenidos a mi p&aacutegina.</p>
<p>Aqu&iacute encontrar&eacuteis cursos de formaci&oacuten muy interesantes.</p>
En el caso de que la cantidad de elementos a la que se quiera aplicar cierto tipo de

propiedades sea muy grande, sería muy trabajoso el uso de dichas propiedades para cada
uno de ellos. Surge la necesidad de agrupar elementos, para aplicar con posterioridad a
todos ellos las propiedades que se quieran, entre ellas la de alineamiento.
<DIV ALIGN=LEFT|RIGHT|CENTER|JUSTIFY> Texto de la división incluído formato de

párrafos
</DIV>
Aquí encontraréis cursos de formación muy interesantes.
<div align="center">Bienvenidos a mi p&aacutegina.</div>
<div>Aqu&iacute encontrar&eacuteis cursos de formaci&oacuten muy interesantes.</div>
Marquesinas <marquee>
Las marquesinas son líneas de texto que pueden desplazarse de un lado a otro de
la ventana en forma de línea.
Para insertar una marquesina, es necesario insertar el texto entre las etiquetas
<marquee> y </marquee>.
La marquesina, por defecto, se desplaza de derecha a izquierda indefinidamente,
pero si lo deseas puedes hacer que estas propiedades varíen.
A través del atributo BEHAVIOR puede modificarse el tipo de movimiento.
Puede tomar los valores alternate (de lado a lado de la ventana, como si rebotara en
los extremos), scroll (de un lado a otro, continuamente) o slide (de un lado a otro,
pero una sola vez).
A través del atributo direction puede modificarse la dirección en la que se
moverá el texto. Puede tomar los valores down (de arriba a abajo), up (de abajo a
arriba), left (de derecha a izquierda) o left (de izquierda a derecha).
También es posible establecer un color de fondo, a través del atributo bgcolor.
Por ejemplo, para insertar la siguiente marquesina:
Esto es una marquesina (que se va moviendo)
<marquee bgcolor="#006699" behavior="alternate" direction="right">
<b><font color="#FFFFCC" size="5">Esto es una marquesina </font></b>
</marquee>
También es posible insertar imágenes, tablas y otros elementos entre las etiquetas
<marquee> y </marquee>, no sólamente texto.
10/51
HTML
Listas Ordenadas <OL>

<OL TYPE=I>
<LH> <U> LISTAS ORDENADAS </U>
<LI>UNO
<LI> DOS
</OL>
Que se ve como:
LISTAS ORDENADAS
I. UNO
II. DOS
Propiedades de OL:
La numeración por defecto empieza en 1. Para comenzar la numeración con otro
valor se utiliza:
<OL START=”3”> Aquí empezará en el 3.
Para utilizar una representación diferente a la utilizada por defecto tenemos:
<OL TYPE=”t”>
Donde t puede tomar los valores siguientes:
TYPE= 1 Numeración mediante números arábigos (1,2,3,4,…).
TYPE= A Numeración mediante letras mayúsculas (A,B,C,D,…).
TYPE=a Numeración mediante letras minúsculas (a,b,c,d,…).
TYPE=I Numeración mediante números Romanos (I,II,III,IV,V..).
TYPE=i Numeración mediante números Romanos (i,ii,iii,iv,v..).
Propiedades de LI:
Se permite alterar la secuencia de numeración de una determinada lista. Dicha
propiedad se refiere a la expresión VALUE, que se utiliza así:
<LI VALUE=”n”> Elemento n
Causando que la numeración de la lista desde ese momento continúe desde n.
Listas Desordenadas o No Ordenadas <UL>

<UL>
<LH> <U>LISTAS DESORDENADAS</U>
<LI> PRIMER ELEMENTO
<LI> SEGUNDO ELEMENTO
</UL>
11/51
HTML
Que se ve como:
LISTAS DESORDENADAS
• PRIMER ELEMENTO
• SEGUNDO ELEMENTO
<LH> Define el título de la lista.

Si no se especifica nada la viñeta que aparece por defecto es un círculo relleno.
Para especificar cualquier otro tenemos la propiedad:
<UL TYPE=viñeta>
TYPE=circle Que muestra un círculo hueco

TYPE=square Que utiliza un pequeño cuadrado opaco.
TYPE=disc Que usa un círculo opaco
Listas Descriptivas<DL>
No poseen ningún tipo de de carácter o símbolo a la izquierda de cada elemento,
incluídos los números.
<DL>DEFINE LISTA
<DT>ESTABLECE TERMINO
<DD>DEFINICIONES DEL TERMINO
</DL>
Que se ve como:
• DEFINE LISTA
ESTABLECE TERMINO
DEFINICIONES DEL TERMINO
Anidación de Listas
Ejemplo:
<HTML>
<HEAD>
<TITLE> PÁGINA DE LISTAS</TITLE>
</HEAD>
12/51
HTML
<BODY>
<H1><CENTER> PROGRAMADORA EN JAVA</CENTER></H1>
<UL TYPE>
<LI> MODULO 1 - UBICACIÓN PROFESIONAL
<LI> MODULO 2 - CONCEPTOS DE INTERNET
<UL TYPE=circle>
<LI>PARTE 1- REDES
<LI>PARTE 2 - INTERNET
</UL>
<LI> MODULO 3 - METODOLOGÍA DE PROGRAMACIÓN

<UL TYPE=circle>
<LI>TIPOS DE DATOS
<UL TYPE=square>
<LI>DATOS BÁSICOS
<LI>ESTRUCTURAS BÁSICAS
<LI>ESTRUCTURAS COMPLEJAS
</UL>
<LI>ORGANIGRAMAS
<LI>ORDINOGRAMAS
<LI>PSEUDOCÓDIGO
<OL TYPE=A>
<LI>ESTRUCTURAS
</OL>
</UL>
<LI> MODULO 4 -HTML
</UL>
</BODY>
</HTML>
Que se ve como:
PROGRAMADORA EN JAVA
• MODULO 1 - UBICACIÓN PROFESIONAL
13/51
HTML
• MODULO 2 - CONCEPTOS DE INTERNET

o PARTE 1- REDES
o PARTE 2 - INTERNET
• MODULO 3 - METODOLOGÍA DE PROGRAMACIÓN
o TIPOS DE DATOS
 DATOS BÁSICOS
 ESTRUCTURAS BÁSICAS
 ESTRUCTURAS COMPLEJAS
o ORGANIGRAMAS
o ORDINOGRAMAS
o PSEUDOCÓDIGO
A A ESTRUCTURAS
• MODULO 4 -HTML
Hiperenlaces <A Href..>

Permite saltar entre docuemntos o entre varias zonas del mismo documento. se
construyen con la etiqueta <A> </A>.
<A HREF="http://www.nasa.gov/">Pulse aquí para visitar a la NASA </A>.
<A HREF="/la/ruta/que/sea/fichero.html">pulse aquí</A>.
No permite anidamientos.
▪ Archivos para distribuir por el WEB
Ejemplo con enlace absoluto:
Descarga este <A HREF="http://www.dominio.com/archivo.zip">archivo</A>
Descarga este archivo
Ejemplo con enlace relativo:
Descarta este <A HREF="archivo.zip">archivo</A>
Descarga este archivo
▪ Correo electrónico
Incluir una llamada de correo electrónico es una página es tan sencillo como:
<A HREF=”MAILTO: direccion_internet a la que se quiere mandar> Texto para la

identificación del correo
</A>
14/51
HTML
Esto Provocará que el intérprete genere, en la página de salida un enlace en él, que
al pinchar, se efectuará una llamada al servicio de mail que permitirá enviar un correo
electrónico a la dirección referida.
Por ejemplo:
<A HREF=MAILTO:profesor@maquina.dominio>
Enlaces a Secciones de una Página

Se puede dar el caso que una de las partes de un documento haga referencia a otra
sección del mismo.
En el caso de los enlaces internos de un documento, primero hay que definir el

punto objetivo de la vinculación y a continuación se hace referencia en las partes que
queramos a dicho punto. Por ejemplo
<A NAME="indice">Indice</A>
...
Lo que sale en
... Se puede NO la página
poner pagina.htm
...
... <A HREF="pagina.htm/#indice"> Indice de documentos</A>
En este ejemplo, al pulsar sobre Indice de documentos, saltaremos hacia un lugar

de la página que hemos definido con el nombre de indice a través de la etiqueta A
NAME
Otro ejemplo:
<A NAME="Inicio"> Volver al Inicio </A>

<DL>CABECERA DE UN DOCUMENTO
<DT><A HREF=#TITULO>TITLE</A>
</DL>
<A NAME="TITULO">DESCRIPCION DE TITLE</A><BR><BR>
<BLOCKQUOTE> Da nombre al documento y por tanto da título a la ventana. No
admite parámetros. </BLOCKQUOTE>
<BR><P ALIGN=RIGHT>
<A HREF=#Inicio>Volver al INICIO</U></A></P>
<BR>
NOTA: Ambos identificadores han de ser iguales, coincidiendo mayúsculas y

minúsculas.
15/51
HTML
Imágenes <IMG SRC=”..”>

La etiqueta <IMG> servirá para situar imágenes en una página. Es una etiqueta
que no tiene de cierre:
La etiqueta <IMG> requiere un origen de datos obligatorio dado por el atributo

SRC=. Indica la imagen en cuestión:
<IMG SRC="bander.gif">
Cuando se introduce una imagen como un enlace, dicha imagen aparece

enmarcada en un borde del mismo color que los enlaces de texto. Este enlace se puede
eliminar usando otra propiedad de la etiqueta <IMG> con el nombre BORDER. El
formato es el siguiente:
<IMG SRC nombre_imagen BORDER=O>
Atributos de <IMG> (Los ponemos todos en uno dentro de IMG, no se crean varios
IMG):
Para que salga un texto alternativo cuando no salga la imagen ponemos:

<IMG ALT="Texto alternativo">
Para que salga una ventanita amarilla cuando acerquemos el ratón a la imagen
ponemos:
<IMG TITLE="Texto del tooltip">
Para alinear la imagen hacia arriba con respecto al texto:

<IMG ALIGN="TOP">
Para alinear la imagen hacia abajo con respecto al texto:

<IMG ALIGN="BOTTOM">
Para alinear la imagen centrada con respecto al texto:

<IMG ALIGN="MIDDLE">
Para situar la imagen a la izquierda de la pantalla:

<IMG ALIGN="LEFT">
Para situar la imagen a la derecha de la pantalla:

<IMG ALIGN="RIGHT">
16/51
HTML
Para especificar el ancho de una imagen:

<IMG WIDTH=nº entero>
Para especificar el alto de una imagen:

<IMG HEIGHT=nº entero>
Para indicar el número de pixel que va a tener una imagen:

<IMG BORDER=nº entero>
Para indicar los espacios en blanco a ambos lados de una imagen:

<IMG HSPACE=nº entero>
Para indicar los espacios en blanco que queremos que deje arriba y abjo de una
imagen:
<IMG VSPACE=nº entero>
Para un enlace con imágenes y sin borde alrededor de la imagen:

<A href="intro.htm"><IMG src="bander.gif" border="0"><A>
Para poner una imagen de FONDO utilizamos la etiqueta BACKGROUND dentro

de la etiqueta BODY:
<BODY BACKGROUND="imagen">
Mapas <MAP NAME..>

Existen numerosas imágenes en las que podrían interesar que, dependiendo de la
zona en la que se pinche con el ratón, se pudiera ir a un lugar u otro.
Proceso:
 Definir el mapa que se va a aplicar a la imagen, y asignarle un nombre a
dicho mapa.
 Incluir la imagen mediante la etiqueta <IMG>
 Incluir como parte del elemento <IMG> que contiene la imagen, el atributo
USEMAP=NOMBRE_MAPA.
Definición de un mapa:
<IMG SRC=”nombre_imagen” USEMAP=”#nombre_mapa”>
<MAP NAME=”nombre_mapa”>
<AREA SHAPE=”forma” COORDS=”Coordenadas” HREF=URL_Destino>
…
17/51
HTML
<AREA SHAPE=”forma” COORDS=”Coordenada” HREF=URL_Destino>

</MAP>
Los atributos pueden ser:

• SHAPE=”forma”: Indica que forma tiene el área que se está definiendo. Hay tres
valores:
SHAPE= “rect” _ Área en forma de rectángulo.
SHAPE= “circle” _ Área en forma de círculo.
SHAPE= “poly” _ Área en forma de poliedro.
• COORDS=”Coordenadas”:
Las coordenadas de un rectángulo son “x,y (punto superior
izquierdo),z,w (punto inferior derecho)”.
Las coordenadas de un círculo son “x,y( coordenadas del círculo),z
(radio del mismo)”.
Las coordenadas de un poliedro son punto superior izquierdo, punto
inferior izquierdo, punto inferior derecho y punto superior derecho.
• HREF=”URL_Destino”: Aquí se indica el lugar dónde el interprete deberá ir, en

caso de que el usuario pinche en el área que se está definiendo.
• NOHREF: No salta a ningún lado.
• ALT=”Cuadrito amarillo”: Texto que vemos al acercarnos a una sección en un
cuadrito amarillo.
Por ejemplo:
<IMG SRC=”Imágenes\en construccion.bmp” USEMAP=”#Muñeco”>

<MAP NAME=”Muñeco”
<AREA TEXT=”Pincha aquí par air a nuevo documento” SHAPE=”circle”
COORDS=”48,20,10” HREF=”Documento nuevo.htm”>
<AREA TEXT=”Pincha aquí para ir a las listas” SHAPE=”rect”

COORDS=”60,32,91,40” HREF=”Listas.htm”>
</MAP>
TABLAS
Existe una pareja de etiquetas que delimitan el comienzo y el final de la tabla.
Estos delimitadores son:
<TABLE ROWS=numfilas COLS=numcolumnas> definición de la tabla </TABLE>
18/51
HTML
La definición de una tabla se debe hacer por filas desde la esquina superior
izquierda. Cada fila se identifica por las etiquetas:
<TR> fila </TR>
Cada una de las casillas de la tabla o celda se define mediante las etiquetas:
<TD> comienzo de la celda </TD>
Formato básico:
<TABLE>
<TR>
<TD> Fila1-Columna1 </TD>
<TD> Fila1-Columna2 </TD>
…..
</TR>
<TR>
<TD> Fila2- Columna1 </TD>
<TD> Fila2- Columna2 </TD>
……….
</TR>
</TABLE>
▪ Título de la tabla y primera línea

Se puede poner un título o cabecera a la tabla mediante la etiqueta <CAPTION>.
Este título debe ir a continuación del inicio de la tabla <TABLE> y encerrado entre
<CAPTION> </CAPTION>.
Por otra parte se hablaba de poder distinguir una fila o columna de una tabla. En
concreto, distinguir la primera que suele servir de cabecera o guía. El elemento que
permite modificar el aspecto de los elementos de la cabecera de la tabla es la etiqueta
<TH>. Esta etiqueta es exactamente igual a <TD> salvo en el hecho de que el texto que se
introduzca precedido por <TH>, aparecerá en la tabla final centrado y puesto en negrita.
Este elemento es utilizado en general para poner las celdas de la primera fila y/o de la
primera columna cuando éstas indican el significado del contenido del resto de las
celdas.
▪ Borde de la tabla y tamaño de la celda

La propiedad BORDER, que hace referencia al borde de la tabla, puede
encontrarse de tres formas diferentes:
 BORDER = X Dónde el número “X” indica el número de pixels que tendrá

de ancho el borde de la tala. Es el grosor de la tabla.
 BORDER: Sólo indica que la tabla tendrá borde. El ancho del borde será
asignado por el intérprete con su valor por defecto. Es una propiedad
opcional.
 No aparece. El borde no se mostrará.
19/51
HTML
 Para evitar que el texto quede demasiado próximo al borde de la tabla,

existe la propiedad CELLPADDING. Este atributo permitirá definir la
distancia (en pixels) del borde de la celda al inicio del texto contenido en
dicha celda. Es una propiedad opcional.
 Para cambiar la distancia entre celdas se utiliza la propiedad
CELLSPACING.
 WIDTH = Valor o porcentaje, este atributo se usa para indicar el ancho

deseado para la tabla.
 HEIGHT= Valor o porcentaje, este atributo describe el largo de la tabla.
▪ Coloreado de tablas
Para mejorar la apariencia de las tablas, es posible darle color a todos sus
elementos. Para ello, existen una serie de atributos que se pueden aplicar a la etiqueta
<TABLE>:
 BGCOLOR=color: Permite especificar un color de fondo, de forma similar a
como se hacía con la etiqueta <BODY>. Es posible utilizar el nombre
predefinido del color deseado o su valor en hexadecimal (#rrggbb).
 BACKGROUND: mediante este atributo es posible mostrar una imagen
como fondo de los elementos de una tabla. <BACKGROUND= imagen de
fondo>.
 <BORDERCOLOR=color>
 Los atributos anteriores, además de a la tabla completa, pueden aplicarse a

una fila (etiqueta <TR>), a un título de fila o columna (etiqueta <TH>) o a
una celda (etiqueta <TD>). En caso de estar definidos distintos colores para
la tabla, filas y celdas, prevalecen los colores de las celdas, luego los de las
filas y por último el de la tabla.
▪ Alineamiento en las tablas

Se distinguen dos tipos de alineamiento en las celdas: el alineamiento horizontal y
el vertical.
El alineamiento horizontal es el que se ha visto hasta el momento en otros
elementos HTML, y se especifica de la misma manera que se hacía con el resto de los
elementos (ALIGN= center, right o left).
El alineamiento vertical se refiere a la posición del contenido de la celda
verticalmente respecto a la altura de dicha celda. Este alineamiento se indica mediante
la propiedad VALIGN. Los posibles valores que puede tomar son:
TOP:Contenido de la celda arriba.
BOTTOM: Contenido de la celda abajo.
MIDDLE: Contenido de la celda en el centro.
Las propiedades de alineamiento se pueden combinar de la forma:
<TD ALIGN= XX VALIGN= YY>
20/51
HTML
▪ Ampliación de filas y columnas

A veces es interesante poder unir dos o más filas o clumnas en una sola, mediante
la eliminación de alguna de las divisiones existentes en la tabla.
Estó será muy útil cuando se desea poner el mismo título a varias filas o varias
columnas.
Para unir dos columnas, HTML presenta una propiedad de la etiqueta <TD> que
se denomina COLSPAN. En ésta propiedad se le indica al intérprete cuántas columnas se
desean unir a la celda en la que se está, a partir de ella misma y contándola a ella
también.
El proceso para unir dos filas es muy parecido. La única diferencia es es que el
nombre de la propiedad es ROWSPAN. Esta propiedad indica cuántas filas se desean
añadir a la actual contando a partir de la celda en la que se está.
Estas dos propiedades pueden ser combinadas para unir en una celda, tanto un
número de filas como de columnas, al mismo tiempo.El formato completo de la etiqueta
<TD> queda como sigue:
<TD ALIGN= X VALIGN= Y COLSPAN=Z ROWSPAN=W>
▪ Tablas fantasma
A la técnica de usar tablas sin bordes para organizar datos en la página se le
denomina “tablas fantasmas”.
<TABLE BORDER=0>
O simplemente se consigue el mismo efecto si no se utiliza la propiedad BORDER
de la etiqueta <TABLE>.
Formularios
Los formularios son posiblemente la herramienta más utilizada en Internet para

obtener datos e información acerca de la gente que navega nuestro sitio. La idea de los
formularios es recolectar información online en la interacción con el usuario y luego
ejecutar una determinada acción con la misma, que podría ser por ejemplo, quizás el
caso más utilizado, un formulario de venta que el usuario completa y luego es enviado
vía e-mail al vendedor en forma encriptada.
Este tema a diferencia de los anteriores es bastante más complejo y oscuro,

aparecerán términos como CGI scripts, Perl o bien lenguajes de programación como C,
que seguramente nos desalentarán al principio, pero que con el tiempo asumiremos
como familiares. La idea de esta sintética guía de formularios es brindar al newbie o
novato un pantallazo general de lo que es posible hacer con simples formularios en
nuestro sitio web.
¿Cómo los definimos?
Cinco son solamente las etiquetas que el código HTML posee para definir todos
los elementos interactivos que un formulario puede presentar: <FORM>, <INPUT>,
<SELECT>, <OPTION> y <TEXTAREA>. Estas etiquetas, junto a un número de
21/51
HTML
modificadores o atributos, son suficientes para indicarle al navegador cliente cómo debe
recolectar la información, cómo debe manejarla una vez recolectada y cómo debe
interactuar con el servidor.
Etiqueta <FORM>
Todo formulario debe estar encerrado entre el par de etiquetas <FORM> y

</FORM>, y debe ser ubicado en el cuerpo de cualquier documento HTML, es decir,
entre el par de etiquetas <BODY> y </BODY>. Esta etiqueta <FORM> presenta tres
atributos posibles:
Comando Descripción
el valor de este parámetro es
la URL del programa o guión
ACTION en el Servidor Web utilizado
para procesar la información
recolectada.
puede asumir el valor GET o
el valor POST, y definen la
METHOD
manera en la cual los datos
son transferidos al servidor.
este atributo está reservado
para que la información viaje
ENCTYPE
en forma encriptada a través
de Internet.
Los dos primeros atributos de la tabla son de uso obligatorio para cualquier
formulario que generemos, ya que establecen dónde enviar la información y cómo
enviarla. El atributo o parámetro ENCTYPE es optativo y no es realmente importante.
Etiqueta <INPUT>
La etiqueta <INPUT> es la segunda etiqueta más importante de los formularios.

Se la puede definir como una etiqueta multifunción, ya que con la misma podemos crear
"push buttons", "radio buttons", "check boxes", y simples recuadros para ingresar texto.
Posee ocho posibles parámetros: ALIGN, CHECKED, MAXLENGTH, NAME,
SIZE, SRC, TYPE, y VALUE. Pero no se asusten con tantos parámetros porque
normalmente solo se utilizan a lo sumo solo cinco. Los atributos cruciales para toda
etiqueta <INPUT> son NAME, que asocia un nombre con cada variable ingresada; y
TYPE, que puede asumir los valores TEXT, PASSWORD, CHECKBOX, RADIO,
SUBMIT, RESET, IMAGE, and HIDDEN; de acuerdo al tipo de elemento que
querramos representar. Más adelante todo será más claro con los ejemplos.
Etiqueta <SELECT>
Este par de etiquetas define una lista de elementos de los cuales el usuario debe
seleccionar uno o varios, de acuerdo a los atributos que especifiquemos.
Etiqueta <OPTION>
22/51
HTML
Con esta etiqueta definimos cada elemento de las listas designadas con el par
<SELECT> y </SELECT>.
Etiqueta <TEXTAREA>
Este par de etiquetas nos permiten definir un area de dimensiones arbitrarias que
funciona como una suerte de editor, donde el usuario puede ingresar texto.
¿Cómo se ven?
Abrimos nuestro editor de texto preferido y creamos el siguiente archivo html:
<HTML>
<HEAD>
<TITLE>FORMULARIOS</TITLE>
</HEAD>
<BODY>
<FORM ACTION="mailto:quantum@mundo21.com" METHOD=POST>
<TABLE align="center" border="0">
<td align="left" width="100">Nombre:
</td>
<td align="center" width="150"><INPUT NAME="nombre" MAXLENGTH="25"
TYPE="TEXT" VALUE="">
</td>
<tr>
<td align="left" width="100">Email:
</td>
<td align="center" width="150"><INPUT NAME="mail" MAXLENGTH="25"
</td>
<tr>
<td align="left" width="100">Motivo:
</td>
<td align="center" width="150"><INPUT NAME="motivo" MAXLENGTH="25"
</td>
<tr>
<td align="left" width="100"> Mensaje:
</td>
<td>
<TEXTAREA NAME="mensaje" ROWS=3 COLS=20>
</TEXTAREA>
</td>
<tr>
<td widht="100">
</td>
<td align="right" width="150"><INPUT NAME="boton" TYPE="SUBMIT"
VALUE="Enviar">
</td>
</TABLE>
</FORM>
</BODY>
</HTML>
Lo que se vería de esta forma:
Nombre:
23/51
HTML
Email:
Motivo:
Mensaje:
Enviar
Aunque parezca complicado a primera vista el código anterior, con un poco de

práctica puede resultar muy natural. Analicemoslo paso a paso:
El formulario comienza con esta línea:
<FORM ACTION="mailto:quantum@mundo21.com" METHOD=POST>
Como dijimos anteriormente todo formulario debe comenzar con la etiqueta

<FORM> y finalizar con </FORM>. El parámetro ACTION define qué es lo que
debemos hacer con la información obtenida, en este caso le indicamos al navegador que
nos envié los datos a nuestra dirección de correo electrónico (en el ejemplo la mandan a
mundo21). La mayoría de los formularios en Internet realizan esta tarea, es decir,
recolectan información del usuario y la envían por correo electrónico hacia algún
destino. Para realizar esta tarea existen dos formas de hacerlo, una es la utilizada
anteriormente, y la otra es hacer uso de algún script o guión CGI (Comon Gateway
Interface) que procesa los datos y los reenvía hacia donde le indicamos. Un script CGI
es un pequeño programa escrito en general en lenguaje PERL o C (muy populares en
ambientes Unix) alojado en los servidores web que facilitan el intercambio y la
transferencia de información entre el servidor y el cliente.
¿Cuál es la diferencia entre ambos métodos?, el utilizado en nuestro ejemplo es más
sencillo y no utiliza ningún script, pero a su vez es menos eficaz, ya que en la mayoría
de los casos no funcionará. Mientras que el segundo, si bien un poco más complicado,
nos asegura casi un 100% de efectividad y una gran variedad de opciones para hacerlo,
pues existen miles de scripts para diferentes tipos de formularios. Si quisiéramos utilizar
un script CGI, es necesario averiguar si el servidor web que aloja nuestro sitio posee un
directorio con scripts cgi, comúnmente conocidos como /cgi-bin (pues aloja binarios).
En el caso afirmativo, solo debemos conversar con personal entendido del servidor para
conocer como debemos configurar nuestro formulario, y en caso contrario, no debemos
perder las esperanzas pues existen miles de scripts gratuítos online en diversos
servidores alrededor del mundo esperando ser utilizados.
Supongamos, esto es solo un ejemplo, que nuestro servidor web o ISP (Internet
Service Provider o Proveedor de Internet) cuenta con un script CGI para manejar
formularios de correo electrónico, así sería la configuración del mismo en nuestra
página:
<FORM ACTION="/cgi-bin/mailto.pl" METHOD=POST>

24/51
HTML
<input type=hidden name="to" value="quantum@mundo21.com">

<input type=hidden name="return-url" value="http://www.mundo21.com/gracias.html">

<TABLE align="center" border="0">

<td align="left" width="100">Nombre:
</td>
<td align="center" width="150">
<INPUT NAME="nombre" MAXLENGTH="25" TYPE="TEXT" VALUE=""> </td>
<tr>
<td align="left" width="100">Email:
</td>
<INPUT NAME="mail" MAXLENGTH="25" TYPE="TEXT" VALUE=""> </td>
<tr>
<td align="left" width="100">Motivo:
</td>
<INPUT NAME="motivo" MAXLENGTH="25" TYPE="TEXT" VALUE=""> </td>
<tr>
<td align="left" width="100"> Mensaje:
</td>
<td>
<TEXTAREA NAME="mensaje" ROWS=3 COLS=20>
</TEXTAREA>
</td>
<tr>
<td widht="100">
</td>
<td align="right" width="150">
<INPUT NAME="boton" TYPE="SUBMIT" VALUE="Enviar">
</td>
</TABLE>

</FORM>
Para ver que pinta tiene un script del tipo utilizado en el ejemplo anterior, escrito
en PERL, pueden observar el codigo fuente del archivo mailto.pl.
Como dijimos arriba, si por alguna razón nuestro proveedor de Internet o servidor
web donde alojamos nuestro sitio no posee scripts CGI, no debemos bajar los brazos,
aún nos queda una posibilidad: utilizar guiones gratuítos online. Existen muchas
empresas que ofrecen este servicio y además por algunos billetes nos pueden crear o
generar un script a medida. En las siguientes direcciones se pueden obtener muy buenos
scripts gratis con todas las instrucciones correspondientes:
25/51
HTML
http://www.cgi-
resources.com/Programs_and_Scripts/Remotely_Hosted/Form_Processing/
http://www.sbrady.com/hotsource/cgi/index.html#ffp
Para los más osados y valientes, aún existe una tercera posibilidad: crear nuestros
propios scripts. Si nuestro proveedor o servidor web nos permite el acceso al
directorio /cgi-bin, nos es posible subirlos, compilarlos y luego correrlos. Los mejores
lugares en la red para obtener información, código fuente y ejemplos de cómo hacer esta
hazaña son:
http://www.cgi-resources.com/Programs_and_Scripts/
http://www.artsackett.com/freebies/asform/
Construcción de Formularios
El TYPE más común para la etiqueta <INPUT> de un formulario es TEXT.
<FORM>
<INPUT TYPE="text">
</FORM>
Toda etiqueta <INPUT> necesita un NAME para poder identificar el valor que el
usuario ingresa, es decir, el valor del parámetro NAME es el nombre de la variable que
alojará el valor ingresado por el usuario.
<FORM>
<INPUT TYPE="text" NAME="nombre">
</FORM>
Cuando el usuario ingresa su nombre en la casilla de texto (por ejemplo Morgan

Clay), éste se convertirá en el valor de entrada de la etiqueta INPUT y será relacionado
con "nombre" (NAME="nombre"), de forma que el resultado que será procesado será el
par nombre=Morgan Clay. Es posible, si así lo deseamos, establecer un valor
predetermindado de la siguiente manera:
<FORM>
<INPUT TYPE="text" NAME="nombre" VALUE="J.J. Lopez">
</FORM>
Esto automáticamente generará el par nombre=J.J. Lopez, que sólo será

modificado si el usuario lo cambia. El tamaño de las casillas puede ser especificado
también de la siguiente manera:
<FORM>
<INPUT TYPE="text" NAME="nombre" VALUE="Morgan Clay" SIZE=20>
</FORM>
26/51
HTML
<FORM>
</FORM>
<FORM>
</FORM>
El valor predeterminado para el tamaño de un INPUT es SIZE=20, es decir, que sino

le explicitamos otro tamaño, el navegador asumirá el valor 20 para el parámetro SIZE.
También podemos indicar la cantidad de caracteres a ingresar por el usuario,

aunque no es muy utilizado este parámetro, puede resultar útil en algunas ocasiones. Por
ejemplo, un límite de 15 caracteres lo indicamos de la siguiente manera:
<FORM>
<INPUT TYPE="text" NAME="nombre" SIZE=30 MAXLENGTH=15>
</FORM>
Muy similar al TYPE=TEXT es el TYPE=PASSWORD. Es exactamente igual al tipo

texto, con la diferencia que despliega en pantalla *** en lugar de letras a medida que
tipea el usuario.
<FORM>
<INPUT TYPE="password" NAME="clave">
</FORM>
Acá también cuentan los atributos SIZE, VALUE, y MAXLENGTH.
Radio Buttons y Check Boxes
Los Radio Buttons le permiten al usuario seleccionar una entre varias opciones.
En cambio las Check Boxes le dan la posibilidad de elegir una o más opciones.
Radio Buttons
<FORM>
<INPUT TYPE="radio" NAME="equipos">
</FORM>
Recordemos que toda etiqueta INPUT debe llevar un VALUE y un NAME:
<FORM>
<INPUT TYPE="radio" NAME="equipos" VALUE="cuervo">San Lorenzo
27/51
HTML
<BR><INPUT TYPE="radio" NAME="equipos" VALUE="gallina">River Plate

<BR><INPUT TYPE="radio" NAME="equipos" VALUE="bostero">Boca Juniors
</FORM>
San Lorenzo
River Plate
Boca Juniors
El NAME es el mismo para los tres Radio Buttons, pues son tres opciones para el
mismo campo NAME="equipos". En este caso el VALUE ya está definido, solo debemos
esperar la selección del usuario, por ejemplo si marcase la primera se procesaría la
siguiente información: equipos=cuervo. Con el parámetro CHECKED le indicamos al
navegador cual de todas las opciones debe aparecer marcada por defecto.
Si lo hacemos completo, se vería así:
<FORM>
¿Quién será el campeón del torneo argentino?<BR>
<BR><INPUT TYPE="radio" NAME="equipos" VALUE="cuervo" CHECKED>San
Lorenzo
<BR><INPUT TYPE="radio" NAME="equipos" VALUE="gallina"> River Plate
<BR><INPUT TYPE="radio" NAME="equipos" VALUE="bostero"> Boca Juniors
<BR><INPUT TYPE="radio" NAME="equipos" VALUE="rojos"> Independiente
<BR><INPUT TYPE="radio" NAME="equipos" VALUE="academia"> Racing Club
<BR><INPUT TYPE="radio" NAME="equipos" VALUE="fortineros"> Vélez
Sarsfield
</FORM>
¿Quién será el campeón del torneo argentino?
San Lorenzo
River Plate
Boca Juniors
Independiente
Racing Club
Vélez Sarsfield
Check Boxes
La construcción de Check Boxes es bastante similar:
<FORM>
<INPUT TYPE="checkbox" NAME="cuervo">
</FORM>
A diferencia de los Radio Buttons, los Check Boxes mantienen el mismo valor
para el parámetro VALUE, y cambian el valor de NAME. Por ejemplo:
<FORM>
<INPUT TYPE="checkbox" NAME="cuervo" VALUE="YES">San Lorenzo
28/51
HTML
<BR><INPUT TYPE="checkbox" NAME="gallina" VALUE="YES"> River PLate

<BR><INPUT TYPE="checkbox" NAME="bostero" VALUE="YES"> Boca Juniors
<BR><INPUT TYPE="checkbox" NAME="rojo" VALUE="YES"> Independiente
</FORM>
San Lorenzo
River PLate
Boca Juniors
Independiente
Al igual que con los Radio Buttons podemos hacer uso del parámetro CHECKED
para marcar alguna por defecto, si así lo quisiéramos:
<FORM> ¿Quiénes son amargos?<BR>

<BR><INPUT TYPE="checkbox" NAME="cuervo" VALUE="YES">San Lorenzo
<BR><INPUT TYPE="checkbox" NAME="gallina" VALUE="YES"
CHECKED>River PLate
<BR><INPUT TYPE="checkbox" NAME="bostero" VALUE="YES">Boca Juniors
<BR><INPUT TYPE="checkbox" NAME="rojo" VALUE="YES"
CHECKED>Independiente
</FORM>
¿Quiénes son amargos?
San Lorenzo
River PLate
Boca Juniors
Independiente
Si bien, algunas opciones están marcadas por defecto, el usuario es capaz de

desmarcarlas y marcar otras. Los datos serán recolectados de la siguiente manera:
gallina=YES
rojo=YES
(si es que el usuario no modifica las opciones por defecto... incluso pueden elegir
ninguna, es decir, dejar todas desmarcadas, entonces no habra ningún valor procesado)
Ahora bien, supongamos que quisiéramos hacer tres preguntas con opciones
acerca de un mismo tema, ¿como lo haríamos?, muy simple, lo único que debemos
recordar es que no puede haber NAMES duplicados en un mismo formulario, por tanto el
formulario tendría esta pinta:
<FORM>
<TABLE BORDER="1" ALIGN="center">
<TR>
<TD WIDTH="350">
¿Cuál es la hinchada más original?
</TD>
<TR>
29/51
HTML
<TD WIDTH="350">
<BR><INPUT TYPE="checkbox" NAME="original?..SL" VALUE="YES">San Lorenzo
<BR><INPUT TYPE="checkbox" NAME="original?..RP" VALUE="YES">River Plate
<BR><INPUT TYPE="checkbox" NAME="original?..BJ" VALUE="YES">Boca Juniors
<BR><INPUT TYPE="checkbox" NAME="original?..I" VALUE="YES">Independiente
</TD>
<TR>
<TD WIDTH="350">
¿Cuál es más numerosa?
</TD>
<TR>
<TD WIDTH="350">
<BR><INPUT TYPE="checkbox" NAME="numerosa?..SL" VALUE="YES">San
Lorenzo
<BR><INPUT TYPE="checkbox" NAME="numerosa?..RP" VALUE="YES">River Plate
<BR><INPUT TYPE="checkbox" NAME="numerosa?..BJ" VALUE="YES">Boca
Juniors
<BR><INPUT TYPE="checkbox" NAME="numerosa?..I" VALUE="YES">Independiente
</TD>
<TR>
<TD WIDTH="350">
¿Cuál es más fiestera?
</TD>
<TR>
<TD WIDTH="350">
<BR><INPUT TYPE="checkbox" NAME="fiestera?..SL" VALUE="YES">San Lorenzo
<BR><INPUT TYPE="checkbox" NAME="fiestera?..RP" VALUE="YES">River Plate
<BR><INPUT TYPE="checkbox" NAME="fiestera?..BJ" VALUE="YES">Boca Juniors
<BR><INPUT TYPE="checkbox" NAME="fiestera?..I" VALUE="YES">Independiente
</TD>
</TABLE>
</FORM>
¿Cuál es la hinchada más original?
San Lorenzo
River Plate
Boca Juniors
Independiente
¿Cuál es más numerosa?
San Lorenzo
River Plate
Boca Juniors
Independiente
¿Cuál es más fiestera?
San Lorenzo
River Plate
Boca Juniors
Independiente
30/51
HTML
Supongamos que el usuario marca en la primera pregunta "San Lorenzo", en la

segunda "Boca Juniors" y en la tercera "San Lorenzo" nuevamente, la información
procesada será entonces:
original?..SL=YES
numerosa?..BJ=YES
fiestera?..SL=YES
Listas
Para la creación de listas de elementos utilizamos la etiqueta <SELECT> en lugar

de la utilizada anteriormente <INPUT>, y a diferencia de esta útlima debe ser cerrada con
su para </SELECT>. Es decir:
<FORM>
<SELECT>
elementos de la lista
</SELECT>
</FORM>
Listas Desplegables
Le damos un NAME y agregamos algunos elementos.
<FORM>
<SELECT NAME="equipos">
<OPTION>San Lorenzo
<OPTION>River Plate
<OPTION>Boca Juniors
<OPTION>Independiente
<OPTION>Racing Club
</SELECT>
</FORM>
A cada <OPTION> le otorgamos un valor:
<FORM>
<OPTION VALUE="cuervo">San Lorenzo
<OPTION VALUE="gallina">River Plate
<OPTION VALUE="bostero">Boca Juniors
<OPTION VALUE="rojo">Independiente
<OPTION VALUE="academia">Racing Club
</SELECT>
</FORM>
La opción por defecto de una lista de este tipo es la primera <OPTION>

declarada. Si quisiéramos marcar otra opción por defecto lo hacemos con el parámetro
SELECTED de esta manera:
<FORM>
31/51
HTML
<OPTION VALUE="gallina" SELECTED>River Plate

</SELECT>
</FORM>
Listas Desplegadas
La construcción de una lista desplegada es bastante similar a la de una lista

desplegable, solo difieren en algunos parámetros. Para convertir la lista desplegable de
equipos en una lista ya desplegada utilizamos el parámetro SIZE de la siguiente manera:
<FORM>
<SELECT NAME="equipos" SIZE=5>
</SELECT>
</FORM>
El valor del parámetro SIZE indica exactamente cuántos elementos desplegar

simultáneamente. Si el valor del SIZE es menor al número total de elementos de la lista,
automáticamente aparecerá un barra de desplazamiento sobre el lado derecho de la
misma. Para verlo mejor indiquemos un SIZE=3 para la lista de equipos:
<FORM>
</SELECT>
</FORM>
Al igual que las lista desplegables podemos indicar un elemento seleccionado por
defecto mediante el parámetro SELECTED:
<FORM>
32/51
HTML
<OPTION VALUE="gallina" SELECTED>River Plate

</SELECT>
</FORM>
AREA DE TEXTO
Para generar un area de texto donde el usuario pueda escribir libremente un

mensaje, un comentario o sugerencia, debemos utilizar la etiqueta <TEXTAREA> de la
siguiente manera:
<FORM>
<TEXTAREA NAME="SUGERENCIAS">
</TEXTAREA>
</FORM>
Controlamos el tamaño del area de texto con los parámetros ROWS y COLS,
cuyos valores representan el número de filas y columnas respectivamente que ocupará
en pantalla dicha area. Para entenderlo mejor, ROWS sería la altura y COLS la anchura.
<FORM>
<TEXTAREA NAME="SUGERENCIAS" ROWS=6 COLS=50>
</TEXTAREA>
</FORM>
Un atributo interesante de esta etiqueta <TEXTAREA> es WRAP. Algunos

navegadores no lo interpretan correctamente, lo que significa que directamente lo
ignorarán. Este parámetro WRAP significa que el texto ingresado no puede superar los
márgenes laterales, es decir, cuando el usuario llegue al final del margen derecho
automáticamente desplazará el cursor hacia abajo sin esperar que el usuario presione la
tecla ENTER.
<FORM>
<TEXTAREA NAME="COMMENTS" ROWS=3 COLS=30 WRAP="soft">
</TEXTAREA>
</FORM>
33/51
HTML
WRAP="soft" significa que el texto ingresado en la caja de texto no superará los

margenes laterales, pero será porcesado como una línea larga de caracteres, es decir,
viajará a su destino como una larga cadena de caracteres.
<FORM>
<TEXTAREA NAME="COMMENTS" ROWS=3 COLS=30 WRAP="hard">
</TEXTAREA>
</FORM>
WRAP="hard" significa que el texto es enviado tal cual fue ingresado.
<FORM>
<TEXTAREA NAME="COMMENTS" ROWS=3 COLS=30 WRAP="off">
</TEXTAREA>
</FORM>
Esto es normalmente el valor por defecto de las areas de texto si es que no se

especifica un valor distinto para este parámetro.
Botones SUBMIT y RESET
Son muy simples de declarar:
<FORM>
<INPUT TYPE="submit">
</FORM>
Enviar consulta
Este tipo de boton envía la información. Mientras que el RESET lo que hace es
borrar las modificaciones realizadas por el usuario y regresar todos los valores por
defecto.
<FORM>
<INPUT TYPE="reset">
</FORM>
Restablecer
Es posible cambiar el texto de estos botones con el parámetro VALUE:
34/51
HTML
<FORM>
<INPUT TYPE="submit" VALUE="Enviar Datos">
<INPUT TYPE="reset" VALUE="Borrar Datos">
</FORM>
Enviar Datos Borrar Datos
En caso de ser necesario, no es lo común, podemos asignarle un NAME a los

botones de RESET y SUBMIT. Esto sería necesario en el caso extraordinario de tener dos
botones del mismo tipo en un mismo formulario, algo más que insólito.
Podemos utilizar una imagen como boton SUBMIT:
<FORM>
<INPUT TYPE="image" SRC="enviar.jpg" WIDTH=70 HEIGHT=35 <BORDER=0
ALT="Submit">
</FORM>
Para el caso de botones del tipo RESET no nos es posible asignarle una imagen.
Aquí va un simple truco, un botón que nos transporta a otra página:
<FORM ACTION="indexweb.php3">
<INPUT TYPE="submit" VALUE="Tutorial">
</FORM>
Tutorial
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á.
Esto podría crear una disposición de marcos como la siguiente:
---------------------------------------
| | |
| | |
35/51
HTML
| Marco 1 | |
| | |
| | |
|---------| |
| | Marco 3 |
| | |
| | |
| | |
| Marco 2 | |
| | |
| | |
| | |
| | |
---------------------------------------
Vamos a ver un ejemplo de este tipo de documento:
<HTML>
<HEAD>
<TITLE>Mi primera página con marcos</TITLE>
</HEAD>
<FRAMESET COLS="20%,80%">
<FRAME NAME="indice" SRC="indice.html">
<FRAME NAME="principal" SRC="introduccion.html">
<NOFRAMES>
<P>Lo siento, pero sólo podrás ver esta página
si tu navegador tiene la capacidad de visualizar
marcos.</P>
</NOFRAMES>
</FRAMESET>
</HTML>
Vamos a explicar detalladamente este ejemplo antes de investigar algo más a

fondo cada una de las etiquetas. Vemos que la cabecera de la página es similar a un
documento normal, pero el habitual BODY es sustituido por un FRAMESET. En cada
FRAMESET se divide la ventana actual (sea la general o un marco) en varias ventanas
definidas o por el parámetro COLS o por ROWS. En éste, separado por comas, se
define el número de marcos y el tamaño de cada uno.
Dentro del <FRAMESET> se hacen dos cosas. Primero, definir cada uno de los
marcos poniendoles un nombre y especificando qué fichero HTML le corresponde
mediante la etiqueta <FRAME>. Por último, especificamos lo que verá el usuario en el
supuesto (cada vez más raro) de que su navegador no soporte frames dentro de la
etiqueta <NOFRAMES>. Ahora veremos todos estos elementos en mayor detalle.
Etiqueta <FRAMESET>
Según el estándar, esta etiqueta sólo debería contener el número y tamaño de cada
marco, pero las extensiones de Netscape y Explorer al estándar obligan a estudiar un par
de parámetros más.
En general, los navegadores dibujan un borde de separación entre los marcos. Si

deseas eliminarlo puedes hacerlo de dos maneras: en las etiquetas <FRAME> de cada una
de los marcos contiguos al borde a eliminar o incluyendo el parámetro
FRAMEBORDER=0 en el <FRAMESET>.
36/51
HTML
Cuando eliminas ese borde, podrás ver cómo el navegador deja aún un hueco entre
marcos. Este se elimina añadiendo los parámetros FRAMESPACING=0 BORDER=0.
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:
• Con porcentajes: Al igual que con las tablas, podemos definir el tamaño de un
marco como un porcentaje del espacio total disponible.
• Absolutos: Si ponemos un número a secas, el marco correspondiente tendrá el
tamaño especificado en pixels.
• Sobre el espacio sobrante: Si colocamos un asterisco (*) estaremos indicando
que queremos todo el espacio sobrante para ese marco. Podemos poner este
símbolo en varios marcos, que se repartirán el espacio equitativamente como
buenos hermanos. Si queremos que uno tenga más deberemos ponerle al
asterisco un número delante. Así, un marco con un espacio de 3* será tres veces
más grande que su compañero, que tiene un asterisco sólo, el pobre.
Por ejemplo, el siguiente código es una muestra de cómo combinar los tres métodos:
<FRAMESET COLS="10%,*,200,2*">
Supongamos que el ancho total de la ventana son 640 pixels. El primer marco
ocupará el 10%, es decir, 64 pixels. El tercero necesita 200, luego nos quedan 476 para
los otros dos. Como el cuarto debe tener el doble de espacio que el segundo, tenemos
aproximadamente 158 pixels para este último y 316 para el cuarto marco.
Hay que tener cuidado cuando usamos valores absolutos en la definición de

marcos; debemos asegurarnos de tener al menos un marco con un tamaño relativo si
queremos estar seguros del aspecto final de la página.
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>
El resultado del anidamiento lo podréis contemplar aquí.
Etiqueta <FRAME>
Esta etiqueta define tan sólo las características de un marco determinado, no de un

conjunto de ellos. Estos son los parámetros que admite:
NAME Asigna un nombre a un marco para que después podamos
37/51
HTML
referirnos a él.
SRC Indica la dirección del documento HTML que ocupará el marco.
Decide si se colocan o no barras de desplazamiento al marco para
que podamos movernos por su contenido. Su valor es por defecto
SCROLLING
AUTO, que deja al navegador la decisión. Las otras opciones que
tenemos son YES y NO.
Si lo especificamos el usuario no podrá cambiar de tamaño el
NORESIZE
marco.
Al igual que su homónimo en la etiqueta <FRAMESET>, si lo
FRAMEBORDER igualamos a cero se eliminará el borde con todos los marcos
contiguos que tengan también este valor a cero.
Permite cambiar los márgenes horizontales dentro de un marco. Se
MARGINWIDTH
representa en pixels.
MARGINHEIGHT Igual al anterior pero con márgenes verticales.
Acceso a otros marcos
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 no
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 índice
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
38/51
HTML
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.
Sonido
Existen diversas formas de incluir un fichero de audio en una página, formas que
dependen del tipo de fichero y del navegador usado, y podemos usar diferentes etiquetas
para cada una de ellas.
BGSOUND
La etiqueta bgsound incorpora sonidos de fondo en una página web, sonidos que se
ejecutan automáticamente al cargarse la página. Es una etiqueta propietaria de
Microsoft, por lo que sólo es interpretada por Internet Explorer, admitiendo los
formatos de audio MID y WAV, aunque generalmente también acepta AU y MP3, en
versiones actuales del nevagador o mediante plugins de uso general.
Su sintaxis general, con sus atributos más importantes, es del tipo:
<bgsound src="ruta_fichero" loop="l" balance="b" volume="v"></bgsound>
Donde:
• src="ruta_fichero" fija la ruta en la que se encuentra el fichero de audio a
reproducir. La ruta puede ser relativa a nuestro sistema de carpetas local,
absoluta respecto el sistema de carpetas del servidor web o una URL completa
que localice el fichero en Internet.
• loop="l" determina el número de veces (l) que se debe ejecutar el fichero de

audio. Si le damos el valor infinite, el fichero se reproducirá indefinidamente.
• balance="b" determina el balance del sonido entre los dos altavoces del
equipo, es decir, la potencia o intensidad con que se oirá en cada uno de ellos
(derecho e izquierdo). Sus valores pueden estar entre -10,000 y +10,000,
correspondiendo el valor 0 a un balance equilibrado entre los dos altavoces.
• volume="v" fija el volumen al que se oirá el sonido, y sus valores pueden

variar entre -10,000 (mínimo) y 0 (máximo). No es soportado por los equipos
MAC.
Ejemplo:
<bgsound src="../sonidos/wav.wav" balance=0 volume=0></bgsound>

Que podéis ver funcionando en esta ventana (sólo Internet Explorer).
La etiqueta BGSOUND admite muchas más propiedades (disabled, delay, id, class,
controls, etc.). Asímismo, esta etiqueta es accesible en Internet Explorer mediante
código JavaScript, pudiendo modificar en tiempo real sus propiedades balance, loop,
src, y volume, aunque ésta última sólo es accesible en plataformas PC. Para una
39/51
HTML
información completa sobre todas las propiedades y funcionalidades de este etiqueta

podéis visitar la página correspondiente de Microsoft:
http://msdn.microsoft.com/library/default.asp?
url=/workshop/author/dhtml/reference/objects/bgsound.asp
EMBED
Nestcape Navigator implementó la etiqueta embed para incorporar ficheros de audio. Es

ésta una etiqueta de caracter general, que se usa para la inclusión en las páginas web de
todos aquellos archivos ajenos al navegador y que necesitan por lo tanto la ejecución de
algún plugin para su interpretación.
Paradójicamente, Internet Explorer asumió después el uso de esta etiqueta para la
inclusión de ficheros de audio, para llegar a interpretarla mejor y ampliarla con más
atributos y propiedades, de tal forma que la ejecución de sonidos con embed es
actualmente más cómoda con este navegador, al incorporar la suite de Microsoft sus
propios plugins para la interpretación de los diferentes formatos de audio. En cambio, si
usamos Netscape Navigator nos encontraremos en muchos casos con un fallo en la
reproducción o con un engorroso mensaje de necesidad de algún plugin especial (sobre
todo en las versiones 6x), lo que nos obligará a visitar la página de Netscape para su
descarga e instalación, que muchas veces no será efectiva.
Sea como sea, hay que indicar que esta etiqueta nos va a incluir en la página web
un objeto especial, una especie de consola de mando, denominada Crescendo, que
consta de tres botones, similares al de cualquier reproductor de audio: un botón Play,
para comenzar la reproducción (si no está establecida a automática), un botón Pause,
para detenerla momentáneamente y un botón Stop, para detenerla definitivamente
(puesta a cero). Esta consola es diferente según el navegador usado; en el caso de
Internet Explorer se muestra la típica consola de Windows Media, cuyo tamaño
podemos configurar, mientras que en Netscape se muestra una consola propia, de
tamaño fijo definido.
La sintaxis general de la etiqueta embed es del tipo:
<embed atributo1="valor1" atributo2="valor2"...atributoN="valorN"></embed>
Y en el caso que nos ocupa, de la inclusión de ficheros de audio, los atributos
podemos dividirlos en dos tipos:
1. Atributos referentes al sonido:
• src="ruta_fichero", que fija la ruta en la que se encuentra el fichero de audio
a reproducir. La ruta puede ser relativa a nuestro sistema de carpetas local,
absoluta respecto el sistema de carpetas del servidor web o una URL completa
que localice le fichero en Internet.
• loop="l/true/false", que determina el número de veces que se debe ejecutar

el fichero de audio. Los valores admitidos son l (número entero de veces), true
(infinitas veces) y false (sólo una vez). Sólo es reconocida por Netscape
Navigator.
• playcount="n", que define el número de veces (n) que se debe ejecutar en

fichero de audio en el caso de Internet Explorer.
40/51
HTML
• type="tipo_fichero", atributo importante, que declara el tipo de fichero de

audio que estamos usando, con lo que el navegador web puede ejecutar el
programa o plugin adecuado para la reproducción del fichero. Puede ser
audio/midi, audio/wav, etc.
• autostart="true/false", que determina si el fichero de audio debe empezar a

reproducirse por sí sólo al cargarse la página o si por el contrario será preciso la
actuación del usuario (o de código de script) para que comience la audición.
• pluginspage="URL", que establece, en caso de ser necesario un plugin

especial para reproducir el fichero, la página web donde se puede descargar el
mismo. Sólo se activa en el caso de que el navegador no sea capaz de reproducir
el fichero por sí mismo, y es soportada tan sólo por Netscape Navigator.
• name="nombre", que asigna un nombre identificador (debe ser único en la

página) a una etiqueta embed determinada, con objeto de ser accedida luego por
lenguajes de script.
• volume="v", que determina el volumen de reproducción del sonido, y que

puede variar entre 0 y 100. Es sólo soportada por Netscape Navigator, que en la
consola muestra el valor establecido en su indicador de volumen, siendo su valor
por defecto 50. En en caso de Internet Explorer, el valor del volumen por
defecto es 50 en plataformas PC, y 75 en MAC, siendo necesario actuar sobre el
control de volumen de la consola para modificarlo.
2. Atributos referentes a la consola:

• hidden="true/false", que establece si la consola va a ser visible (false) o no
(true). Es éste un aspecto polémico, ya que si ocultamos la consola obligamos al
usuario a oir nuestro fichero, sin posibilidad de detenerlo ni de modificar el
volumen, y si la mostramos estaremos incrustando en la pantalla un objeto que
muchas veces nos romperá el esquema de diseño de nuestra página. Queda
determinar su uso en cada caso concreto.
• width="w", que determina el ancho visible de la consola, en pixels.

height="h", que determina el alto visible de la consola, en pixels. Estos atributos
son también muy importantes, caso de que hayamos establecido hidden= "false",
ya que de su valor va a depender la correcta visualización de la consola. En el
caso de Internet Explorer, que muestra un logo de Windows Media sobre los
controles, el tamaño mínimo aceptable debe ser de 140x100 pixels, ya que si no
la consola saldrá deformada en exceso o recortada. Y en el caso de Netscape
Navigator, deberemos asignar unos valores de 145x60 pixels, que es lo que
ocupa la consola; si ponemos un tamaño menor, la consola será recortada,
perdiendo funcionalidades, y si asignamos un tamaño mayor, aparecerán
espacios grises alrededor de la consola, afeando el aspecto de la página. Si no
especificamos estos atributos y tampoco hidden, nos aparecerán en la página tan
sólo los mandos de la consola, sin logotipos añadidos (Internet Explorer) o la
consola recortada (Netscape Navigator).
• align="top/bottom/center/baseline/left/right/
texttop/middle/absmiddle/absbotom", análogo al de la etiqueta
41/51
HTML
IMG, define la alineación horizontal o vertical de la consola respecto de los

elementos de la página.
• hspace="hs", que establece la separación horizontal, vspace="vs", que

establece la separación vertical, en pixels, entre la consola y los elementos de la
página que la rodean. Análoga a sus equivalentes de la etiqueta IMG.
Estos son los atributos principales, aunque podemos encontrar referencias de otros
admitidos, aunque no suelen ser operativos en la realidad, ya que no suelen funcionar de
forma correcta o son específicos de Nestcape (como toda la serie de atributos que
configuran los controles de la consola.
Ejemplo sin consola:
<embed src="../sonidos/mid.mid" hidden="true" type="audio/midi"
autostart="true"></embed>
Que podemos ver en funcionamiento en esta ventana.

Ejemplo con consola:
<embed src="../sonidos/mid.mid" hidden="false" type="audio/midi"

autostart="false" width="150" height="100"></embed>
Que tenemos visible (y audible) en esta otra ventana
CSS Hojas de estilo en cascada

Uno de las últimas novedades del HTML 4.0 es la implementación de
las hojas de estilo. Con ellas podremos tener un diseño mucho más prolijo
y ordenado. Además separaremos la tarea del diseñador Web de la de los
encargado de contenidos.
Las hojas de estilo CSS, son una novedad del lenguaje HTML 4.0. Las mismas
permiten definir una serie de estilos para luego aplicarlos a una página o, incluso, a
un grupo determinado.
Con las hojas de estilo CSS se puede, tanto modificar etiquetas (o TAGS) de
HTML, como crear nuevos estilos. Por ejemplo, podríamos hacer que todas las
tablas tengan color de fondo celeste y texto en color blanco, simplemente
redefiniendo la etiqueta <table>.
Los estilos se definen de la siguiente manera:
<style type="text/css">
selector1,selector2{propiedad1:valor1;propiedad2:valor2}
</style>
Por ejemplo:
A:link,A:visited{font-style:bold;color:yellow}
</style>
42/51
HTML
En este ejemplo todos los hipervínculos no visitados (A:link) y los visitados

(A:visited) aparecerán en negrita (bold) y en amarillo (yellow)
Dónde definir las hojas de estilo
Los estilos se pueden definir en el encabezado de la página HTML (entre las

etiquetas <head> y </head>) o en un archivo externo que llevará la extensión
.css.
La ventaja de utilizar un archivo externo nos permitirá el uso de las

definiciones de estilo en todas las páginas de nuestro sitio. De esta forma si
queremos hacer algún cambio en el estilo de nuestras páginas, lo tendríamos que
hacer en un único archivo (el CSS).
Cabe destacar que las hojas de estilo CSS no solo funcionan para dar formato
al texto, sino también a las tablas, listas, párrafos y capas, entre otros.
Formas de definir los estilos
Existen varias maneras de definir estilos CSS ya sea tanto para redefinir las
etiquetas standard, como para crear nuevos estilos.
• Definiéndolos y aplicándolos para determinadas etiquetas en todo el

documento:
H1{color:orange;font-style:italic}
</style>
En este caso H1 es la etiqueta del Titular de mayor tamaño y cada vez

que se lo defina aparecerá en color naranja y en cursiva.
• Estilos "in line", que solo se utilizarán una vez y por esta razón se los
define como valores de la propiedad style.
<p style="color:blue;background:lightblue;font-weight:bold">
Aca va un parrafo en azul, resaltado y en negrita
</p>
En este caso, el estilo se aplica a un párrafo.
• Como clases de estilos: podemos crear clases de estilos propios que

usaremos, a voluntad, en las etiquetas que queramos. Para crear una clase, el
nombre debe comenzar con un punto y no puede contener caracteres como acentos
o eñes.
<stile type="text/css">
.textoarial{font-face:arial;color:#ffffff;fontstyle:
bold;background:#000000}
</style>
Ahora, para aplicarlo, por ejemplo, al cuerpo del documento (etiqueta

<body>), se debe utilizar el atributo class:
43/51
HTML
<body class="textoarial">
<p>Este texto es de clase textoarial</p>
</body>
Una clase se puede aplicar a distintas etiquetas, en este caso se aplicó a todo
el cuerpo del documento. Se puede crear también una clase a partir de una
etiqueta HTML. En este caso, se define de este modo:
P{font-family:arial;color:blue}
P.negrita{font-weight:bold}
Y se utiliza de la siguiente forma:
<P>Parrafo con letra ARIAL y color azul</P>

<BR>
<P class="negrita">Igual que antes pero, además, en negrita</P>
• También se pueden utilizar identificadores cuando se quiere aplicar un estilo

a uno o a varios elementos, los cuales pueden haberse definido con anterioridad o
no por lo que se pueden hacer modificaciones y excepciones. Se los define con el
carácter almohadilla (#)
table{font-family:courier;background:#CCFFFF}
#resaltado{font-size:1.5em;font-weight:bold}
</style>
Para utilizarlo, por ejemplo, en una celda, utilizamos el atributo id:
<td id="resaltado">Ocupación</td> <td>Estudiante de Ingeniería</td>
En esta tabla, se aplicará el formato definido para la etiqueta table, pero en la

primer celda se aplica un identificador para aumentar el tamaño del texto y pasarlo
a negrita.
Vínculos de hojas de estilo externas
Dijimos anteriormente que es posible crear una sola hoja de estilos CSS global
y guardarla en un archivo con extensión CSS para que de este modo se pueda
vincular a un grupo o a todas las páginas de nuestro sitio. Para crear esta hoja de
estilos podemos utilizar cualquier programa que trabaje con texto sin formato,
como el Block de notas o Note Pad de Windows, y al momento de guardar, escribir
el nombre de la siguiente manera: "estilos.css". De esta forma, al poner las
comillas, el archivo se guardará con la extensión css (de otro modo se guardaría
como txt).
En el archivo CSS, no se deben incluir las etiquetas de comienzo y fin

(<style...> </style>) , ya que estas son código HTML y no corresponden a la
definición de estilos.
Para realizar el vínculo debemos colocar el siguiente código en la sección

<head>:
<link rel="stylesheet" type="text/css" href="estilos.css">
44/51
HTML
En el atributo href, debemos colocar la ubicación del archivo css. Ahora, todas las
páginas que lleven el link a la hoja de estilos, utilizarán el mismo formato y si
queremos hacer algún cambio, solo debemos modificar el archivo css.
Aplicándolo a todas las páginas del sitio
Si utilizamos FrontPage 2000 para crear nuestras páginas, encontraremos en

él la posibilidad de vincular, automáticamente, todas las páginas de nuestro sitio a
una hoja de estilos. Para ello hay que ir a [Formato / Vínculos de hojas de
estilo], elegir Todas las páginas y luego presionar en [Agregar] para seleccionar
el archivo css. Automáticamente, se insertará el link a la hoja de estilos en todas
las páginas del sitio.
Un truco
Un truco muy común, visto en muchos sitios, es hacer que los hipervínculos
cambién de color al pasar con el puntero del mouse por encima. Esto se logra ya
que a los hipervínculos se los puede definir de tres maneras:
• a:link: representa el estilo del link común.
• a:hover: representa el estilo que adquiere el link cuando pasamos el mouse

por encima.
• a:active: es el formato que adquiere en el momento justo en que

presionamos sobre el.
• a:visited: es el estilo del link una vez que ya hemos hecho clic sobre el.
Para que experimenten, prueben el siguiente estilo: los links se presentarán

en color celeste, pero sin subrayado (textdecoration: none), cuando pasamos
por encima, cambian de color y se subrayan (text-decoration:underline),
comprueben en el ejemplo lo que sucede al hacer clic.
a:link{color:#3399FF;text-decoration:none}
a:hover{color:orange;text-decoration:underline}
a:active{color:yellow;background:black;textdecoration:
overline} a:visited{color:grey;font-style:italic}
</style>
Para finalizar
Las hojas de estilo en cascada van a facilitarnos mucho la tarea de formatear

el documento, siempre y cuando sepamos organizarnos bien. En una próxima
ocasión veremos cómo manejar estilos sin necesidad de tocar el código de HTML,
todo gracias a la ayuda de los editores visuales de páginas Web como
Dreamweaver o FrontPage.
Cambiar el cursor del Mouse

Las hojas de estilo poseen una propiedad que permite cambiar la
imagen del puntero del mouse.
45/51
HTML
Listas de cursores
Cursores disponibles por defecto:
Nombre Muestra
default
crosshair
pointer
move
nw-resize
ne-resize
n-resize
e-resize
help
text
wait
Definiendo el cursor
Al igual que todas las propiedades del lenguaje CSS, es posible definir el
objeto aplicándolo a todo el documento o solo a una parte del mismo.
A todo el documento
<html>
<title>Cambiar el cursor</title>
<head>

</style>
</head>
<body>
</body>
</html>
A algunos sectores del documento
<html>
<head>
</head>
<body>
<p style="cursor: default">Cursor default</p>
<p style="cursor: crosshair">Cursor crosshair</p>
<p style="cursor: pointer">Cursor pointer</p>
46/51
HTML
<p style="cursor: move">Cursor move</p>

<p style="cursor: nw-resize">Cursor nw-resize</p>
<p style="cursor: ne-resize">Cursor ne-resize</p>
<p style="cursor: n-resize">Cursor move</p>
<p style="cursor: e-resize">Cursor move</p>
<p style="cursor: help">Cursor move</p>
<p style="cursor: text">Cursor move</p>
<p style="cursor: wait">Cursor wait</p>
</body>
</html>
Personalizar cursor
También es posible utilizar un cursor personalizado:
<html>
<head>

</style>
</head>
<body>
</body>
</html>
Mejorando la apariencia de los formularios

Por lo general los formularios son bastante vulgares y lo peor aun
muchas veces no encajan con el diseño que tiene nuestro sitio, entoces
para mejorar el aspecto de estos por que no usar hojas de estilo (CSS), en
este articulo veremos como hacerlo.
Un formulario por lo general se ve asi...
El diseño que el navegador le da a los controles es el mismo que el del

sistema operativo, en el caso del grafico de arriba es Windows, el problema surge
cuando tenemos una web con un diseño muy cuidado y nos toca agregar
formularios los cuales no concuerdan para nada con el diseño del sitio, para ello lo
mejor que podemos hacer es utilizar CSS.
LA CSS
47/51
HTML

</style>
Este bloque de código va entre las etiquetas <HEAD> Y </HEAD> de la

pagina que contendrá el formulario, fijense que "input" viene seguido por todo en
código encerrado entre llaves, bueno, ese es el código es el que le va dando el
formato a los cuadros de texto y a los botones, todo el código que pertenece a
"select" le da el formato a la lista desplegable (Pais).
ASPECTO FINAL
Si se fijan bien es muy facil modificar manualmente los valores, por ejemplo
donde dice "background-color: #6699CC;" pueden modificar el valor hexadecimal
#6699CC por #000099 y les quedaria el fondo de los controles color azul.
Es cuestion de ir investigando de que se trata cada propiedad, igual todos los

editores webs traen incorporado algun editor de CSS asi que tampoco se rompan la
cabeza. Saludos "El Guru".
Cambiando de color las barras de scroll

Aplicando un estilo a nuestras páginas, podemos cambiar de color las
barras de desplazamiento del navegador Internet Explorer, pudiendo
personalizarlo al gusto de cada uno.
Ejemplo de la barra personalizada
48/51
HTML
Lo primero que debemos saber es a que a que parte de la barra corresponde

cada elemento de la hoja de estilo:
ARROW: flecha
BASE: color base
DARK-SHADOW: sombra del primer plano
TRACK: fondo de la barra
FACE: primer plano
SHADOW: sombra del fondo
HIGHLIGHT: luz cuadro de flecha
3D-LIGHT: luz 3d
Código del estilo
Debemos ubicar el siguiente código dentro de la página o dentro de una hoja

de estilo:
body {
scrollbar-arrow-color: white;
scrollbar-base-color: white;
scrollbar-dark-shadow-color: #000080;
scrollbar-track-color: #0080C0;
scrollbar-face-color: #000080;
scrollbar-shadow-color: white;
scrollbar-highlight-color: white;
scrollbar-3d-light-color: a;
}
</style>
Recuerden cambiar los colores para adecuarlos a su página y hacerla más

vistosa.
Efectos en textos e imágenes con CSS

En este artículo veremos como aplicar filtros CSS en textos e
imágenes para lograr determinados efectos.
Sólo debes copiar el código del efecto que quieras utilizar e insertarlo dentro
en tu página web. También puedes cambiar los parámetros del filtro para obtener
un nuevo efecto, o bien, modificarlo a gusto propio.
Efecto borde: Drop Shadow con Glow

Código:
<span
style="color:#FFFFFF;width:100%;filter:dropshadow(color=#000000,offx=1,
offy=1, positive=1), glow(color=#000000, strength=0)">Efecto borde:
Drop Shadow con Glow</span>
Efecto Glow
Código:
<span style="color:#FFFFFF;height:1;
49/51
HTML
filter:glow(color=#000000)">Efecto Glow</span>
Efecto Motion Blur

Código:
<span style="height:1; Filter: Blur(Direction=200,
Strength=4)">Efecto Motion Blur</span>
Efecto Drop Shadow

Código:
<span style="height:1; filter:shadow(color=#666666, direction=230,
enabled=1)">Efecto Drop Shadow</span>
Efecto Drop Shadow 2

Código:
<span style="height:1; Filter: DropShadow(Color=#666666, OffX=2,
OffY=2, Positive=1)">Efecto Drop Shadow 2</span>
Efecto fondo (Mask)

Código:
<span style=" height=1; Filter: Mask(Color=#000000)">Efecto fondo
(Mask)</span>
Efecto Wave
Código:
<span style="height:50; Filter: Wave(Freq=4, Phase=100,
Strength=2)">Efecto Wave</span>
Efecto Alpha
Código:
<span style="width: 357; height: 50; Filter: Alpha(Opacity=100,
FinishOpacity=0, Style=1, StartX=0, StartY=0, FinishX=580,
FinishY=0)"><b>Efecto Alpha</b></span>
Efecto Flip
Código:
<span style="width: 300; height: 50; color: red; Filter:
FlipV">Efecto Flip</span>
Efecto Chaining Filters
50/51
HTML
Código:
<span style="width: 357; height: 20; Filter: Mask(color=#FF0000)
Shadow(Color=red, Direction=225) Chroma(color=#FF0000)">Efecto
Chaining Filters</span>
Todos estos efectos también pueden ser utilizados en imágenes:
Imagen original
Imágenes con efectos
Para aplicar los efectos en imágenes, sólamente hay que agregar el parámetro
style (del efecto de texto) dentro del tag de inserción de la imagen y aplicar el
filtro deseado.
Código (del Efecto Alpha): (Imagen como dentro de una nube)

<img SRC="obelisco.jpg" BORDER="0" style="Filter:
Alpha(Opacity=100, FinishOpacity=0, Style=2, StartX=20, StartY=40,
FinishX=0, FinishY=0)" width="317" height="248">
Código (del Efecto Wave):(Imagen con efecto de ola)

<img SRC="obelisco.jpg" style="Filter: Wave(Freq=5, Phase=2200,
Strength=10)" width="317" height="248">
De esta manera es posible aplicar cualquiera de los efectos nombrados

anteriormente en cualquier imagen además de textos.
51/51

HTML

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

HTML

Uploaded by

Copyright:

Available Formats

HTML

Antes de empezar con <HTML> o en la cabecera se puede poner:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> que indica la

Hay otros caracteres como:

CABECERA DE UN DOCUMENTO HTML

TITLE _ Nombre del documento, título de la ventana. No admite parámetros.

<TITLE> Mi p&aacute;gina </TITLE>

author Autor de la página

classification Palabras para clasificar la página en los buscadores

description Descripción del contenido de la página

generator Programa utilizado para crear la página

keywords Palabras clave

La etiqueta <meta> no necesita etiqueta de cierre. Para cada etiqueta <meta>

<meta name="description" content="Curso de HTML gratuito">

La etiqueta <meta> también se utiliza para indicarle al navegador alguna

Para decir el tipo de caracteres que lleva se pone:

Ahora imaginemos que hemos cambiado la dirección en la que se encuentra

De este modo, el navegador realizaría la función de actualizar la página, pero

CUERPO DEL DOCUMENTO

Para especificar un color de fondo, tenemos el parámetro BGCOLOR de la

dónde rrggbb es un triplete de valores en hexadecimal que nos permite especificar la

Cambio de color de las fuentes

<FONT COLOR=#RRGGBB>Texto coloreado </FONT>

Atributo Significado Posibles valores

face fuente nombre de la fuente, o fuentes

color color del texto número hexadecimal o texto predefinido

valores del 1 al 7, siendo por defecto el 3,

Por ejemplo, para insertar el texto:

Habría que escribir:

Sans MS, Arial, MS Sans Serif">Bienvenidos a www.aulaclic.com</font>

Si después de indicar la etiqueta <basefont> o <font>, el navegador encuentra otra

Resaltado del texto <b>

Etiqueta Significado Ejemplo

<b> negrita curso HTML aulaclic

<i> cursiva curso HTML aulaclic

<u> subrayado curso HTML aulaclic

<s> tachado curso HTML aulaclic

<tt> teletipo (máquina de escribir) curso HTML aulaclic

<big> aumenta el tamaño de la fuente curso HTML aulaclic

<small> disminuye el tamaño de la fuente curso HTML aulaclic

A continuación se muestran algunas etiquetas asociadas al tipo de información:

Etiqueta Significado Ejemplo

<cite> cita curso HTML aulaclic

<code> ejemplo de código curso HTML aulaclic

<dfn> definición curso HTML aulaclic

<em> énfasis curso HTML aulaclic

<ins> insertado curso HTML aulaclic

<kbd> teclado curso HTML aulaclic

<samp> muestra curso HTML aulaclic

<strong> destacado curso HTML aulaclic

<sub> subíndice curso HTML aulaclic

<sup> superíndice curso HTML aulaclic

<var> variable curso HTML aulaclic

Habría que escribir:

Podemos cambiar el tamaño de la fuente de texto mediante la directiva

Cuya salida en el navegador será:

Este texto se verá un poco más grande que el

Salto de línea <BR>

Texto preformateado <pre>

El inconveniente de esta etiqueta es que entre las etiquetas <pre> y </pre> no se

objetos como animaciones), <big>, <small>, <sub> ni <sup>

Atributo Significado Posibles valores

un número, acompañado de % cuando se desee

size alto de la regla un número

<TITLE> Mi página </TITLE>

<LI> MODULO 3 - METODOLOGÍA DE PROGRAMACIÓN