HTML 8º Grado Idetp

Manual HTML 4.
0 y
CSS.
Autor: Gorka Calleja Urraca.
Curso de HTML 4.0 y CSS
INDICE
1-INTRODUCCIN........................................................................................5
2-EL LENGUAJE HTML.....................................................................................5
2.1- CARACTERES ESPECIALES ......................................................................................5
2.1.1- LOS MS USADOS.................................................................................................................5
3-ESTRUCTURA..........................................................................................6
3.1- DOCTYPE..........................................................................................................6
3.2- ESTRUCTURA......................................................................................................6
3.3- DIRECTIVA <META>..............................................................................................6
3.3.1- ATRIBUTOS..........................................................................................................................6
3.3.2- ETIQUETAS <META> MS COMUNES.......................................................................................6
3.3.3- REDIRECCIONAMIENTOS A OTRAS PGINAS...........................................................................7
3.4- DIRECTIVA <BASE>..............................................................................................7
4-FORMATO DE PRRAFOS................................................................................8
4.1- ATRIBUTOS Y JUSTIFICADO DE PRRAFOS....................................................................8
4.2- CONTENEDORES O LAYERS......................................................................................8
4.3- ENCABEZADOS....................................................................................................9
4.4- ETIQUETAS VARIAS..............................................................................................9
4.5- LINEA HORIZONTAL Y EL COLOR EN HTML....................................................................11
5-FORMATO DE TEXTO..................................................................................12
5.1- COLOR, TAMAO Y TIPO DE LETRA............................................................................13
6-LISTAS...............................................................................................14
6.1- LISTAS DESORDENADAS.......................................................................................14
6.2- LISTAS ORDENADAS............................................................................................15
6.3- LISTAS DE DEFINICIN.........................................................................................16
6.4- ANIDAR LISTAS..................................................................................................17
7-ENLACES.............................................................................................18
7.1- DIRECCIN URL.................................................................................................18
7.2- ENLACES INTERNOS.............................................................................................18
7.3- ENLACES LOCALES..............................................................................................19
8-IMGENES............................................................................................19
8.1- ELECCIN DE FORMATO GRFICO............................................................................20
8.2- IMGENES COMO ENLACES....................................................................................20
9-TABLAS...............................................................................................21
9.1- ATRIBUTOS DE <TABLE>.......................................................................................21
INDICE

9.2- ATRIBUTOS DE <tr>............................................................................................22
9.3- ATRIBUTOS DE <td>............................................................................................22
9.4- ANIDAR TABLAS.................................................................................................23
10-FORMULARIOS.......................................................................................24
10.1- CAMPOS DE TEXTO ...........................................................................................24
10.1.1- TEXTO CORTO...................................................................................................................24
10.1.2- TEXTO OCULTO.................................................................................................................25
10.1.3- TEXTO LARGO...................................................................................................................25
10.2- LISTAS DE OPCIONES.........................................................................................25
10.3- BOTONES DE RADIO...........................................................................................26
10.4- CAJAS DE VALIDACIN.......................................................................................26
10.5- BOTONES NORMALES..........................................................................................27
10.6- BOTONES DE ENVIO Y BORRADO............................................................................27
10.7- DATOS OCULTOS..............................................................................................27
11-FRAMES.............................................................................................28
11.1- FRAMES ANIDADOS............................................................................................29
11.2- QUITAR EL BORDE Y EL ESPACIO ENTRE FRAMES..........................................................29
11.3- DIRIGIR LOS ENLACES........................................................................................30
11.4- VALORES DEL ATRIBUTO TARGET............................................................................31
11.5- ATRIBUTOS DE <FRAMESET>.................................................................................32
11.6- ATRIBUTOS DE <FRAME>.....................................................................................32
12-SONIDO.............................................................................................33
12.1- SONIDO ACTIVADO POR EL USUARIO.......................................................................33
12.2- SONIDO DE FONDO............................................................................................33
12.3- ATRIBUTOS DE <BGSOUND>.................................................................................34
12.4- ATRIBUTOS DE <EMBED>.....................................................................................34
13-MAPAS..............................................................................................35
13.1- ATRIBUTOS DE <AREA>......................................................................................35
14-MARQUESINAS.......................................................................................36
14.1- ATRIBUTOS.....................................................................................................36
15-HOJAS DE ESTILO....................................................................................38
15.1- <STYLE>........................................................................................................38
15.2- ESTILOS MEDIANTE CLASES..................................................................................39
15.3- IDENTIFICADORES.............................................................................................40
15.4- JERARQUA.....................................................................................................40
15.5- ARCHIVOS .CSS .............................................................................................41
15.6- UNIDADES DE LONGITUD .....................................................................................41
INDICE

15.7- PROPIEDADES DE LAS HOJAS DE ESTILO...................................................................42
15.7.1- FUENTES...........................................................................................................................42
15.7.2- COLORES Y FONDOS..........................................................................................................42
15.7.3- TEXTO..............................................................................................................................42
15.7.4- CAJAS DE TEXTO...............................................................................................................42
15.8- DISCRIMINAR NAVEGADOR...................................................................................43
15.9- ESTILO EN LOS ENLACES......................................................................................43
16-OBJETOS............................................................................................44
16.1- LA ETIQUETA <APPLET>.......................................................................................44
16.1.1- ETIQUETA <PARAM>..........................................................................................................44
16.1.2- ATRIBUTOS DE <APPLET>..................................................................................................44
16.2- ETIQUETA <EMBED>...........................................................................................45
16.2.1- ATRIBUTOS DE <EMBED>..................................................................................................45
16.3- ETIQUETA <OBJECT>..........................................................................................45
16.3.1- ATRIBUTOS.......................................................................................................................45
INDICE
1-INTRODUCCIN
2-EL LENGUAJE HTML
Hyper Text Markup Language, ms conocido como

HTML es el lenguaje usado por los navegadores para
mostrar las pginas webs al usuario.
La sintaxis del lenguaje HTML se basa en la

denominada etiqueta. La etiqueta tiene dos partes: una
apertura y un cierre.
Con HTML podemos utilizar textos, sonidos, imgenes,

y lo ms importante, enlaces a otras pginas.
Este lenguaje surge en principio con fines divulgativos
y no se tuvo en cuenta que la web llegara a ser un rea
de ocio con carcter multimedia, debido a esto, el HTML
ha ido necesitando actualizaciones con el paso del tiempo
y la introduccin de otras tecnologas complementarias
como es el caso de CSS y JavaScript.
Otro problema al que se enfrenta HTML son los distintos
navegadores, los cuales, no interpretan un mismo cdigo
de manera unificada. Por lo tanto el creador de una
pgina web (webmster) ha de verse obligado a
comprobar que su pgina es interpretada correctamente
por todos los navegadores (en especial Internet
Explorer y Netscape).
Una pgina web es un archivo que contiene cdigo
HTML en forma de texto. Estos archivos tienen la
extensin .html o .htm.
Para la creacin de un archivo HTML tan slo
necesitamos un sencillo editor de textos como puede ser
el Bloc de notas (notepad) de Windows, o el Vi de
Linux.
Tambin
disponemos
de
herramientas
ms
especializadas como HTML Builder y Macromedia
Dreamweaver, los cuales nos permiten aumentar
considerablemente nuestra eficiencia debido a las
muchas facilidades que nos ofrecen.
<etiqueta> texto afectado </etiqueta>

La etiqueta del principio activa la orden y la ltima (que
ser la del principio precedida del signo /) la desactiva.
No todas las etiquetas tienen principio y final pero esto lo
veremos ms adelante.
Es importante resaltar que las maysculas o
minsculas son indiferentes a la hora de escribir las
etiquetas. De todas formas, resulta aconsejable el
acostumbrarse a escribirlas en minsculas debido a que
otras tecnologas que pueden utilizar nuestro HTML
necesitan caracteres en minsculas.
Ejemplo:
Las etiquetas <b> y </b> muestran un texto en negrita.
El cdigo sera:
<b>Texto en negrita</b>
Resultado:
Texto en negrita
2.1- CARACTERES ESPECIALES

HTML dispone de un mecanismo que permite que una
serie de caracteres raros o exclusivos de un pas se vean
correctamente en todos los ordenadores del mundo.
Cuando queramos poner alguno de estos caracteres en
una
pagina,
tenemos
que
sustituirlo
por
su
correspondiente cdigo.
Nota del autor:
2.1.1- LOS MS USADOS

Todos los ejemplos del manual que aparezcan
numerados estn disponibles en archivo HTML. Puedes
conseguirlos descargndolos de nuestra pgina web:
http://www.quarkinside.com
Significado
Cdigo
<
signo menor que
<
>
signo mayor que
>
&
signo ampersand
&
comillas
"
espacio en blanco

minscula
ñ
mayscula
Ñ
a minscula acentuada
á
a mayscula acentuada
Á
e minscula acentuada
é
copyright
©
marca registrada
®
Observamos que para acentuar un carcter

tenemos que escribir el signo ampersand (&) seguido
del
carcter en
cuestin
(en maysculas
o
minsculas segn corresponda) y terminando con
acute;.
Coleccin FAST LEARNING -
Quark Inside S.L. - Gorka Calleja Urraca (Departamento Tcnico)
5 de 48
3-ESTRUCTURA
nada del texto del documento.
3.<body>: Encierra el resto del documento, el contenido.
3.1- DOCTYPE
El estndar HTML 4.0 exige que todos los ficheros que
quieran considerarse documentos HTML, deban tener, al
menos, dos elementos: un comentario especial
SGML que describe el lenguaje y versin utilizado,
y un ttulo.
El primer componente (DOCTYPE) indica la versin de
HTML en la que est codificado el documento y no es
ms que una referencia al DTD que describe el lenguaje
(HTML 4.0, versin de transicin). Aunque es ignorado
por la mayora de los browsers (navegadores), se
recomienda su utilizacin, ya que permite a todo tipo de
agentes conocer la versin concreta del lenguaje y poder
as sacar el mximo partido de las funcionalidades
disponibles.
El DOCTYPE es lo primero que se escribe en un
documento HTML.
ejemplo01:
<HTML>
<HEAD>
<TITLE>Ejemplo01</TITLE>
</HEAD>
<BODY>
Hola mundo
</BODY>
</HTML>
Guardamos este texto como ejemplo01.html y para
poder abrirlo simplemente hacemos doble clic sobre el
archivo y se lanzar el navegador que tengamos por
defecto:
Tenemos tres versiones distintas:
HTML 4.0 Strict DTD: incluye todos los componentes

excepto los frames. La declaracin es la siguiente:
<!DOCTYPE HTML PUBLIC !-//W3C//DTD HTML

4.0//EN>
HTML Transitional DTD:

incluye todos
los
componentes de HTML 4.0 Strict ms aquellos
desaconsejados de versiones anteriores, sin incluir
los frames. Es la versin ms utilizada aunque no
obtenga todas las ventajas que persigue HTML 4.0,
tiene un soporte mayor por parte de los browsers.
<!DOCTYPE HTML PUBLIC !-//W3C//DTD HTML 4.0

Transitional//EN>
HTML Frameset: incluye los componentes del HTML

Transitional ms los frames.
<!DOCTYPE HTML PUBLIC !-//W3C//DTD HTML 4.0

Frameset//EN>
Debido a la gran difusin de las nuevas versiones de
navegadores cuyo soporte es bastante completo, se
recomienda utilizar la versin Strict de HTML 4.0.
Slo se debera usar las otras dos versiones en el caso
de que utilicemos frames, o bien, nos enfrentemos a
navegadores antiguos.
El otro elemento que no puede faltar en un documento
HTML es el ttulo. Este componente es el que
habitualmente emplean los navegadores para encabezar
la ventana en la que se muestra el documento, y que se
utiliza para identificar el documento en bookmarks,
ndices,... El ttulo lo veremos en el siguiente apartado.
3.2- ESTRUCTURA
Tres son la etiquetas que describen la estructura
general de un documento y dan una informacin sencilla
sobre l. Estas etiquetas no afectan a la apariencia del
documento y slo interpretan y filtran los archivos HTML.
1.<html>: Limitan el documento
indica
que
se
3.3- DIRECTIVA
<META>
Tiene dos usos: contenedor de metainformacin

sobre el documento, e informacin adicional, incluidos
comandos, relacionada con el protocolo HTTP.
Por norma general, se aaden directivas META para
dejar en ellas informacin que pueda identificar al
documento y su contenido, informacin que utilizan
aplicaciones externas como buscadores e ndices (Yahoo,
Google,...).
Todos los <META> son insertados entre las secciones
<head> y </head>. El orden no es importante.
3.3.1- ATRIBUTOS
name: identifica la informacin que se va a exportar.
content: contenido de la informacin.
http-equiv: es el nombre de un comando HTTP.
encuentra escrito en este lenguaje.
2.<head>: Especifica el prlogo del resto del archivo. Son
pocas las etiquetas que van dentro de ella, destacando la

de
<title> (ttulo) que ser utilizado por los
marcadores del navegador e identificar el contenido de
la pgina. Slo puede haber un ttulo por documento,
preferiblemente corto aunque significativo, y no caben
otras etiquetas dentro de l. En head no hay que colocar
3.3.2- ETIQUETAS <META> MS COMUNES

Las vamos a clasificar segn su atributo name:
AUTHOR: Para definir quin construy la pgina web:
<META NAME="AUTHOR" CONTENT="Su nombre aqu">
COPYRIGHT: Para el copyright:
6 de 48
<META NAME="COPYRIGHT" CONTENT="Ingrese aqu

el nombre de su compaa">
CONTACT_ADDR: Para definir la direccin de correo

electrnico que la gente debera usar para hacer
contacto con usted:
<META NAME="robots" CONTENT="INDEX,FOLLOW">

<META NAME="revisit-after" CONTENT="7 Days">
<META NAME="email"
CONTENT="olivawdaneel@msn.com">
<META NAME="author" CONTENT="Gorka">
<META NAME="CONTACT_ADDR" CONTENT="Aqu su

direccin email">
RATING: Para indicar hacia qu tipo de audiencia est

orientado su sitio web disponemos de cuatro posibles
valores:
general: para todas las edades.
14 years: para mayores de 14 aos.
mature: para adultos.
restricted: para adultos con restricciones.
La etiqueta sera:
<META NAME="RATING" CONTENT="El Rating aqu">
ROBOT: Cuando un motor de bsqueda visite su

pgina tratar de seguir sus links e indexar cada
pgina que encuentre.
Posibles valores:
all: dir al robot del motor de bsqueda que

siga todos los links sobre su pgina web, e
indexe todos los que encuentre.
3.3.3- REDIRECCIONAMIENTOS A OTRAS

PGINAS
Puedes enviar a los visitantes a una
especfica, diferente, al incluir este marcador:
pgina
<META HTTP-EQUIV="REFRESH" CONTENT=

2;URL=http://www.sudominio.com/otra_pagina.h
tml">
En content, el atributo de valor numrico (2 ) indica
la cantidad de segundos de pausa antes de cargar el
destino, que se encuentra especificado a continuacin.
De esta manera al cargarse esta pgina se
presentar al visitante durante 2 segundos, dirigindose
luego a otra_pgina.html.
3.4- DIRECTIVA
<BASE>
Sirve para especificar un directorio base para todas las

referencias (direcciones URL ) relativas del documento.
noindex: para que el robot no indexe esa

pgina. Pero puede seguir los links sobre ella.
Esta directiva se ha de situar en la cabecera (head) del

documento.
nofollow: que indexe esta pgina pero que no

siga los links sobre ella.
none: que no indexe esta pgina ni siga los

links sobre ella.
Mediante el atributo href especificamos la ruta o

direccin donde se ha de buscar cualquier pgina o
archivo referido en el documento.
Slo afecta al documento en el que aparece.
Por
La etiqueta sera:
ejemplo,
si
se
apunta
la
imagen
../imagenes/dibujo.gif, se la buscar en el directorio
<META NAME="ROBOT" CONTENT="Ingrese el valor

aqu">
</head>
REVISIT-AFTER: Para indicar a un robot cuando debe

regresar e indexar el stio de nuevo.
Los posibles valores pueden ser la cantidad de tiempo

que usted quiera: 10 days, 2 months, 1 week,...
La etiqueta sera:
<META NAME="REVISIT-AFTER" CONTENT="Ingrese el
valor aqu">
Ejemplo:
anterior (superior o previo) al tomado como referencia,

es decir, el que contiene el documento.
Usando por ejemplo:
<base href=
http://www.ejemplo.es/dirpag/index.html>
hacemos
que,
con
independencia
de
donde
almacenemos el documento html, el directorio donde va
a buscar cualquier referencia relativa va a ser, en
nuestro caso, siempre el directorio dirpag. Es decir, a la
hora de buscar el archivo dibujo.gif lo buscar en esta
ruta:
http://www.ejemplo.es/dirpag/imagenes/dibujo.g
if
<head>
<TITLE>Concentración Motera
Acelerados</TITLE>
<META NAME="keywords" CONTENT="acelerados,
concentracin, motos, moteros">
<META NAME="description" CONTENT="Informacin,
programa, rutas, fotos... de la Concentracin
Motera Acelerados 2004.">
<META NAME="rating" CONTENT="General">
<META NAME="expires" CONTENT="never">
<META NAME="language" CONTENT="es">
<META NAME="charset" CONTENT="ISO-8859-1">
<META NAME="distribution" CONTENT="Global">
7 de 48
4-FORMATO DE PRRAFOS
Formatear un texto consiste en definir los
prrafos, justificarlos, poner en negrita, en
itlica...
Para definir los prrafos nos servimos de la etiqueta
<p> que introduce un salto y deja una lnea en
blanco antes de continuar con el resto del documento.
<p align="right">Texto alineado a la

derecha.</p>
<p align= "center">Texto centrado.</p>
</body>
</html>
Con la etiqueta <br> podemos realizar un salto de

linea, puede poner tantas como desee y realizar un
salto de lnea por cada una de ellas. En esta etiqueta,
al igual que sucede en otras tantas, no existe su
cierre correspondiente, esto se debe a que un
salto de lnea no empieza y acaba ms adelante
sino que slo tiene presencia en un lugar puntual.
Por medio de:

podemos insertar comentarios en nuestro cdigo que

nos servirn de recordatorios en futuras revisiones del
documento. Estos comentarios no se mostrarn a travs
del navegador.
4.1- ATRIBUTOS Y JUSTIFICADO DE

PRRAFOS
Para justificar un prrafo utilizamos el atributo align.
Un atributo es un parmetro incluido en el interior
de
la
etiqueta
que
ayuda
a
definir
el
funcionamiento de la etiqueta de una forma ms
personal. Los atributos tienen sus valores indicados
entre comillas () pero si no los indicamos entre comillas
tambin funcionar en la mayora de los casos. Eso si,
en caso de que el valor del atributo contenga
espacios las comillas son obligatorias. De todas
maneras, para evitar posibles errores es mejor
acostumbrarse a ponerlas siempre.
El atributo align puede tener 3 valores:
1. left: texto alineado a la izquierda.
2. right: alineado a la derecha.
3. center: alineado al centro.
Para centrar el texto tambin podemos utilizar la
etiqueta <center> seguida del texto que queremos
centrar y posteriormente el cierre correspondiente:
</center>.
4.2- CONTENEDORES O LAYERS

Para cuando tengamos un texto largo y queramos que
todos los prrafos estn justificados de alguna manera lo
ideal es utilizar la etiqueta <div>
denominada
contenedor, o comunmente layer (capa). Todo lo
que est incluido dentro de esta etiqueta ser alineado
tal y como hayamos especificado en el atributo align.
Con la versin 4.0 de HTML disponemos tambin de un
nuevo valor para el atributo align, que es justify.
Este valor nos permite justificar el texto a ambos
mrgenes del navegador.
ejemplo02:
<html>
<head>
<title>Ejemplo02</title>
</head>
ejemplo01:
<body>
<html>
<head><title>Ejemplo01</title></head>
<p>Para simplificar el cdigo a la hora de

justificar utilizamos la
etiqueta <div>.</p>
<body>
<p>Esto es un prrafo, se introduce un salto
y deja una lnea en blanco antes de continuar
con el resto del documento.</p>
Vemos que ha dejado un espacio en
blanco.<br><br>
A travs de la etiqueta <br> <br>
hacemos un salto de carro.

<div align="right">
<p>centrado a la derecha</p>
<p>insisto en que est centrado a la
derecha</p>
</div>
<div align="center">
<p>todo lo incluido dentro estar
centrado</p>
<p>insisto en que est
centrado</p>
<p><center>Texto centrado utilizando la

etiqueta center.</center></p>
<p align="left">Texto alineado a la
izquierda.</p>
</div>
8 de 48
<div align="justify">
<p>Con el valor "justify" hacemos un
justificado a ambos mrgenes. A
partir de HTML 4.0</p>
</div>
</body>
</html>
4.4- ETIQUETAS VARIAS

Disponemos
siguientes:
de
etiquetas
muy
tiles
como
las
<blockquote> : nos permite indentar un
texto.
ejemplo04:
4.3- ENCABEZADOS
<blockquote>Esto est indentado<br>como bien

podemos apreciar.<br></blockquote>y esto no
est indentado.
Los encabezados (headers) son etiquetas que

formatean un texto como un titular asignando un tamao
de letra y texto en negrita. Hay seis tipos de
encabezados.
ejemplo03:
<head>
</head>
<body>
<p>Vamos a ver los 6 tipos de
encabezados:<br>
<h1>Encabezado de nivel 1</h1>
<cite>: para textos que representen citas de

autor.
ejemplo05:

</p>
<cite>Tanto va el cantaro a la fuente<br>que

al final aprende a ir slo.<br>Pedro
Reyes.</cite>
</body>
</html>
9 de 48
<var>: para representar variables de un cdigo.
ejemplo08:
La variable <var>x</var>
<code>: para representar cdigo.
ejemplo06:
<p>Para cuando queramos mostrar cdigo
utilizamos este formato<br>a travs de la
etiqueta
<code>:<code>public int
x=0;</code></p>
<samp>: para representar literales.
ejemplo09:
esto es un <samp>literal</samp>
<kbd>: para representar texto que ha de

teclear el usuario.
ejemplo07:
El usuario debe teclear:
<kbd>supercalifragilisticoespialidoso</kbd>
<abbrr>: para representar abreviaturas. Es una

etiqueta perteneciente a la versin 4.0 de HTML.
ejemplo10:
una abreviarura como <abbr>http</abbr> o
<abbr>www</abbr>
10 de 48
<pre>: permite respetar la forma escrita en el

cdigo html, a la hora de mostrar la pgina en el
navegador.
<address>:
para
escribir
correspondientes a calles...
direcciones
ejemplo13:
ejemplo11:
Ejemplo:
<pre>La etiqueta <pre>
permite
respetar la forma
<address>C/Sierpe N1 <br> 47002

Valladolid<br>
</address>
en la que
se edito
el documento html.</pre>
4.5- LINEA HORIZONTAL Y EL

COLOR EN HTML
<tt>: para escribir con tipo de letra de paso fijo

(estilo teletipo).
ejemplo12:
Ejemplo: <tt>Tipo de letra de paso fijo
(estilo teletipo) utilizando la etiqueta
<tt>.</tt>
Para insertar una lnea horizontal tenemos que utilizar

la etiqueta <hr>. El resultado final difiere respecto a
grosor entre verlo en Netscape y verlo en Internet
Explorer.
La etiqueta <hr> presenta los siguientes atributos:
1. color: para establecer el color de la lnea. Los
valores para los colores ms frecuentes se pueden
asignar a travs de su nombre en ingls:
11 de 48

Nombre
Color
aqua
black
blue
fuchsia
gray
green
lime
maroon
navy
olive
purple
red
silver
teal
5-FORMATO DE TEXTO
white
yellow
Y en el caso de querer otra combinacin de color
debemos utilizar valores RGB. RGB son las abreviaruras
de Red (rojo), Green (verde) y Blue (azul), es decir, que
para conseguir otro color debemos mezclar cantidades
de verde, rojo y azul.
Esas cantidades se han de indicar en numeracin
hexadecimal:
1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F.
Los valores los daremos en este formato:
#RRGGBB
Vamos a ver de que etiquetas disponemos para poder

poner el texto en negrita, itlica...
<strong>: por medio de esta etiqueta resaltamos

el texto incluido en ella. No es lo mismo que poner
en negrita, aunque el resultado sea muy similar en
algunos navegadores.
ejemplo01:
Ejemplo: <strong>Texto resaltado
utilizando la etiqueta
<strong></strong><br>
donde cada valor de color puede crecer desde 00 a

FF.
Ejemplo:
Naranja
#ff8000
Verde turquesa
#339966
Azul oscuro
#000080
2. size: nmero entero de pixels o tanto por ciento

para asignar el grosor de la lnea.
3. width: nmero de pixels o tanto por ciento para
asignar la anchura, es decir, la longitud de lado a
lado del navegador.
ejemplo14:
<p>Podemos modificar su color, tamao y
anchura:
<hr color="red">
<b>: para poner el texto en negrita.
ejemplo02:
Ejemplo: <b>Texto en negrita utilizando
la etiqueta <b></b>
<hr size=6>
<hr width=50%>
<hr noshade>
</p>
12 de 48
<em>: texto enfatizado.
ejemplo03:
Ejemplo: <em>Texto enfatizado utilizando
la etiqueta <em></em>
<u>: texto subrayado.
<i>: texto tachado.
<blink>: slo funciona en el navegador Netscape.

Sirve para hacer que el texto parpadee.
ejemplo05:
<u>Texto subrayado utilizando la etiqueta
<u></u><br>
<s>Texto tachado </s> utilizando la etiqueta
<s&gt<br>
<i>: texto en itlica.
ejemplo04:
Ejemplo: <i>Texto en italic utilizando la
etiqueta <i></i>
<sup>: para hacer superndices.
<sub>: para hacer subndices.
<big>: para aumentar el tamao de la letra.
<small>: para disminuir el tamao de la letra.
ejemplo06:
<p>Letra superndice utilizando <sup>: E
= mc<sup>2</sup></p>
<p>Letra subndice utilizando <sub>:
a<sub>i, j</sub> =
13 de 48

mediante valores RGB.
b<sub>i, j</sub>+ 1</p>

<big>Aumentamos el tamao de la letra por
medio de <big>.</big><br>
<small>Disminuimos el tamao utilizando
<small>.</small><br>
ejemplo07:
Ejemplo: <font face="Comic Sans
MS,arial,verdana">Este texto tiene otra
tipografa</font><br>
<font size="+1">Aumentamos 1 nivel mediante
+1</font><br>
<font size="5">Este texto es ms
grande</font><br>
<font color ="red">Color en rojo</font><br>
<font color ="#339966">Color en verde
turquesa</font>
5.1- COLOR, TAMAO Y TIPO DE

LETRA
Este tipo de formatos son controlados actualmente
mediante hojas de estilo, las cuales veremos ms
adelante.
La forma clsica de definir el color, tamao y tipo del
letra de un texto determinado es a travs de la etiqueta
<font> y su cierre correspondiente. Dentro de esta
etiqueta especificaremos los atributos correspondientes a
cada uno de los parmetros que queramos definir:
face: este atributo define el tipo de letra. Hay que

tener cuidado porque el usuario puede que no
disponga del tipo de letra que nosotros establecemos
con lo que el navegador mostrar la fuente que exista
por defecto. Para subsanar este problema dentro del
atributo pueden seleccionarse varios tipos de letra
separados por comas, de tal manera que si el
navegador no dispone del primer tipo del letra pasar
al segundo y as sucesivamente hasta encontrar un
tipo que posea o bien acabar la lista y poner la fuente
por defecto.
size: define el tamao de letra. El tamao se

puede asignar de manera absoluta (nmero entero de
1 a 7 como mximo) o de manera relativa con
respecto
al
texto
mostrado
precedentemente
(estableciendo el nmero de niveles que queramos
aumentar o disminuir por medio de un signo + o -).
De manera relativa si definimos nuestro atributo como

size= +2 lo que haremos es aumentar en dos niveles
el tamao de letra, es decir, si anteriormente estbamos
escribiendo en un nivel 3, pasaremos ahora a un nivel 5.
El tamao que veremos en pantalla depender de la
definicin y del tamao de fuente elegido por el usuario
en el navegador. Debido a esto se suelen emplear las
hojas de estilo en cascada (las cuales veremos ms
adelante) para llevar a cabo una prefijacin.
color: este atributo define el color del texto. Su valor

puede ser asignado utilizando el nombre del color en
ingls para los colores ms frecuentes, o bien,
14 de 48
6-LISTAS
<li type="square">"square"</li>
</ul>
Las listas sirven para citar, numerar y definir

elementos. Tambin son utilizadas para desplazar el
comienzo de lnea hacia la derecha.
Tenemos tres tipos de listas:
<ul compact type="square">

<li>Elemento 1</li>
<li>Elemento 2</li>
6.1- LISTAS DESORDENADAS
</ul>
Son delimitadas mediante la etiqueta <ul> (unordered

list) y la correspondiente etiqueta de cierre </ul>. Y
cada uno de los elementos de la lista se establece a
travs de una etiqueta <li>, la cual no hace falta cerrar.
ejemplo01:
<ul>
<li>La etiqueta <UL> nos permite
presentar listas de <br>elementos sin orden
alguno.</li>
<li>Cada elemento de la lista irá
normalmente<br>precedido por un
círculo.</li>
</ul>
6.2- LISTAS ORDENADAS.

Son listas en las cuales los elementos aparecen
numerados. La vieta de las listas desordenadas se
sustituye por ordenaciones (alfabticas o numricas).
La numeracin se establece automticamente.
Para ello utilizamos la etiqueta <ol> (ordered list) y su
correspondiente etiqueta de cierre. Y para cada elemento
seguimos utilizando la etiqueta <li>.
ejemplo03:
<ol>
<li>Primer elemento.</li>
<li>Segundo elemento.</li>
Dentro de la etiqueta de apertura de la lista, <ul>,
podemos utilizar el atributo type para cambiar el tipo de
vieta de todos los elementos de la lista. En el caso de
que queramos cambiar solamente el de un elemento en
especial utilizamos el atributo type sobre la etiqueta de
elemento, es decir, sobre <li>. Los valores de type
pueden ser:
circle: la vieta es un crculo negro.
disc: la vieta es una circunferencia negra.
square: la vieta es un cuadrado.
<li>Tercer elemento.</li>
</ol>
Tambin disponemos del atributo compact, el cual nos

permite compactar el espacio existente entre el texto y
la vieta. Este atributo no requiere valores.
ejemplo02:
<ul>
<li type="disc">"disc"</li>
<li type="circle">"circle"</li>
15 de 48

Utilizando el atributo type podemos especificar el tipo
de numeracin empleado eligiendo entre nmeros (1, 2,
3...), letras (a, b, c...) y sus maysculas (A, B, C...) y
nmeros romanos en maysculas (I, II, III...) y
minsculas (i, ii, iii...). Los valores son:
1: para ordenar por nmeros.
ejemplo04:
<ol type= "1">
</ol>
i: por nmeros romanos.
I: por nmeros romanos en maysculas.
ejemplo06:
<ol type= "i">
</ol>
<ol type= "I">
a: por letras.
A: por letras maysculas.
ejemplo05:
</ol>
<ol type= "a">

</ol>
<ol type= "A">
</ol>
Para indicar el nmero a partir del cual queremos

empezar a contar utilizamos el atributo start de la
etiqueta <ol>. El valor que se le ha de asignar es un
nmero entero tanto para los nmeros como para las
letras o los nmeros romanos, ya que el navegador se
encarga de hacer la traduccin del nmero al carcter
correspondiente. Por defecto el valor es 1.
ejemplo07:
16 de 48
<ol start="8" type="I">

<li>He puesto que start sea igual a 8.</li>
<li>vemos que luego continua por sí
slo.</li>
<li>demostrado.</li>
elementos seguido de su definicin correspondiente. La

etiqueta principal es <dl> (definition list), y las etiquetas
de elemento y su definicin son <dt> (definition term) y
<dd> (definition definition) respectivamente.
La etiqueta <dd> desplaza la lnea hacia la izquierda,
por este motivo este tipo de etiqueta es utilizado
para desplazar texto.
</ol>
ejemplo09:
<dl>
<dt>Primer elemento<dd>Esta es la
definición del primer
elemento.
<dt>Segundo elemento<dd>Esta es la
definición del segundo
elemento.
</dl>
Para alterar la numeracin de la lista a partir de un

tem, utilizamos el atributo value de la etiqueta del
elemento en cuestin, la etiqueta <li>.
ejemplo08:
<ol>
<li value="15"><strong>Utilizamos
value="15".</strong></li>
<li>Automáticamente
continúa la
numeración a partir del
nuevo valor.</li>
6.4- ANIDAR LISTAS
</ol>
Podemos crear listas dentro de otras listas, es decir,

anidar listas.
ejemplo10:
<dl>
<dt>Espaa:<dd>Equipos espaoles de
fútbol.
<ul>
<li>Real Madrid</li>
<ol>
<li value="7">
Raúl</li>
<li>Figo</li>
</ol>
<li>Valladolid</li>
</ul>
6.3- LISTAS DE DEFINICIN.
<dt>Alemania:<dd>Equipo
alemanes de
En este tipo de lista se muestra cada uno de los

17 de 48
fútb
ol.
<ul>
<li>Bayer de Munich</li>
<li>Borusia Dortmund</li>
</ul>
</dl>
7-ENLACES
HTML es un lenguaje para hipertexto, es decir,
enlaces. Un enlace o link es una zona de texto o
imagen que si son seleccionados nos trasladan a otro
documento de hipertexto o a otra posicin dentro del
documento actual.
Para crear un enlace hay que utilizar la etiqueta <a>.
Todo lo que encerremos entre <a> y </a>, ya sea texto
o imgenes, ser considerado como enlace y sufrir dos
modificaciones:
1. Se visualizar de manera distinta en el navegador:
el texto aparecer subrayado y de un color distinto
y las imgenes estarn rodeadas por un borde del
mismo color que el del texto del enlace. Este color
depender de la configuracin que tenga el
usuario en su navegador.
2. Al pulsar sobre el enlace, seremos enviados hacia
donde apunte el enlace.
El enlace en la pgina normalmente aparecer
subrayado y en color azul, y al deslizar el puntero del
ratn
sobre
l
cambiar
su
forma
original
transformndose por regla general en una mano con el
dedo ndice extendido.
Para indicarle la direccin utilizamos el atributo href y
le asignamos la direccin entre comillas dobles (). La
direccin estar en formato URL (Uniform Resource
Locator).
La sintaxis general de un enlace es:
<a href= direccin>contenido</a>

Siendo el contenido un texto o imagen que ser la
parte activa de la pgina donde deberemos pulsar para
acceder al enlace.
7.1- DIRECCIN URL

A travs de una URL podemos indicar tanto una
direccin de Internet como un servicio que tenga el
servidor al que corresponde la direccin.
El formato es:
servicio://maquina:puerto/ruta/fichero/fi
chero@usuario
El servicio puede ser:
http: para pginas web.
https: es una innovacin sobre el anterior, que

nos deja acceder a servidores que nos ofrecen el
uso de tcnicas de encriptacin para proteger
los datos que intercambiemos con l de terceras
personas.
ftp: para transmitir ficheros desde servidores de

ftp annimo, y utilizando la
servidores privados.
@ podemos acceder
mailto: para poder mandar un mensaje e-mail.
news: para acceder a foros de discusin. Para ello

se ha de indicar el servidor y el grupo.
telnet: nos permite conectarnos a otro ordenador

y entrar en ellos como si nuestro ordenador fuese
una terminal del mismo.
La direccin de la mquina puede

tambin a travs de su direccin IP.
ser
indicada
La ruta es una serie de directorios separados por la

barra / donde indicamos el camino hacia el archivo
18 de 48

que vamos a utilizar. Cuando queremos acceder a un
fichero situado en la misma mquina que la pgina web
que estamos creando podemos utilizar rutas relativas:


<a name="abajo"></a>
ruta_relativa/fichero
En la ruta relativa podremos utilizar los dos puntos
(..) para acceder al directorio padre o comenzar con la
barra diagonal (/) para acceder a una ruta absoluta
dentro de nuestro ordenador.
ejemplo01:
<a href="http//www.google.com">Ir a
Google.com</a><br>
Enlace ftp: <a
href="FTP://anonymous@ftp.rediris.es">ftp.redi
ris.es</a><BR>
Enlace con una direccin e-mail:
<a
href="MAILTO:gorka@usuarios.retecal.es">gorka@
usuarios.retecal.es</a><br>
Enlace con news:
<a
href="news://news.ibernet.es/es.comp.demos">ne
ws</a><br>
Tambin podemos acceder a anclas situadas en

documentos remotos. Para ello aadimos el nombre del
ancla al URL:
<a href="Enlaces.html#abajo">Ir abajo</a>
7.3- ENLACES LOCALES

A travs de estos enlaces relacionamos los
distintos documentos html que componen nuestro
sitio web.
Para ello en la direccin escribimos la ruta y el
nombre del archivo html al que queremos enlazar.
De la misma manera podemos hacer enlaces a todo
tipo de archivos como podra ser un archivo zip. En este
tipo de enlaces al pinchar en l el navegador descargar
el fichero, no sin antes preguntarnos sobre qu
queremos hacer con el archivo: abrirlo o guardarlo en
disco.
ejemplo03:
Enlace con otra pgina web:
7.2- ENLACES INTERNOS

Son los enlaces que apuntan a un lugar diferente
dentro de
la misma pgina. Para crearlos
necesitamos, aparte del enlace origen, un segundo
enlace que ser colocado en el destino y que
comunmente se denomina ancla. A este enlace destino le
hemos de asignar un nombre que le identifique y que en
nuestro ejemplo es abajo :
<a href="ejemplo01.html">Ir al Ejemplo

10</a><br>
Enlace con un archivo comprimido (archivo
zip):
<a href="archivos/ejemplo.zip">archivo.zip</a>
<a name="abajo"></a>
Este ancla lo situaremos dentro del cdigo justo en el
lugar al que queremos movernos al pulsar en el enlace.
El ancla permanecer invisible para el usuario.
ejemplo02:
Enlace para ir a la parte de abajo de este
documento:
<a href="#abajo">Ir abajo</a> 

19 de 48
height=100 width=160 alt="Ordenador

saltando"><br>
<img src="../imagenes/happysmclr.gif"
border="5">
hspace="75" vspace="50">
8-IMGENES
Para hacer que aparezcan imgenes en nuestro
documento utilizamos la etiqueta <img> (image) y el
atributo src (source) para indicar la ruta. La etiqueta
<img> no tiene cierre. Es decir:
<img src=ruta a la imagen>
Vamos a ver algunos atributos:
alt
Dentro de las comillas de este atributo colocaremos

una breve descripcin de la imagen, de tal forma que
este comentario se mostrar en lugar de la imagen en el
caso de que el navegador no pueda cargar la imagen o
durante el tiempo que tarde en cargarla.
Una vez cargada la imagen si colocamos el puntero
del ratn sobre ella tambin se nos mostrar la
descripcin escrita en este atributo.
align
Mediante este atributo alineamos la imagen con
respecto al texto. Este atributo puede tener estos
valores:
height y width
top: coloca el punto ms alto de la imagen

coincidiendo con el ms alto de la lnea de
texto actual.
middle: alinea el punto medio (en altura)

de la imagen con la base del texto.
Define el tamao en pixels del cuadro que rodea a la

imagen.
bottom: alinea el punto ms bajo

imagen con la base del texto.
En caso de que no queramos que aparezca el

borde, damos el valor cero (0).
left: coloca la imagen a la izquierda del

texto.
right: a la derecha del texto.
Definen la altura (height) y anchura (width) en

pixels de la imagen.
border
atributos vspace y hspace
Sirven para indicar el espacio libre vertical (vspace)

y horizontal (hspace), en pixeles, que tiene que
colocarse entre la imagen y los otros elementos que la
rodean, como texto, imgenes...
lowsrc
Si se quiere interrumpir el proceso de rellenado

del texto a los lados de la imagen, para que salte
hasta debajo de ella, es decir, dejar un espacio en
blanco parcialmente, se pueden emplear las siguientes
extensiones de la etiqueta <br>:
Con este atributo indicamos un archivo de la imagen

que est en baja resolucin, de tal forma que cuando
el navegador detecta este atributo primero descarga y
muestra la imagen de baja resolucin y luego descarga
la imagen con la resolucin correcta.
<br
<br
clear =left> Busca el primer

margen libre (clear) a la izquierda.
clear
right> Busca el primer
margen libre a la derecha.
ejemplo01:
alt="Ordenador saltando"><br>
de la
clear =all> Busca el

margen libre a ambos lados.
<br
primer
ejemplo02:
<dl>
20 de 48
<dt><VAR>TOP</VAR><dd>
alt="Ordenador" align="top"
border="3">
Lo mejor es utilizar como regla general

siempre imgenes GIF, salvo cuando necesitemos
dar mayor calidad a nuestras imgenes, en cuyo
caso utilizaremos JPEG.
8.2- IMGENES COMO ENLACES
Texto.
<dt><VAR>MIDDLE</VAR><dd>
Tal y como hemos mencionado en el apartado de

enlaces, podemos hacer que una imagen sirva para
cualquier tipo de enlace.
ejemplo03:
alt="Ordenador" align="middle"
<u>Ejemplo:</u>
border="3">
Texto.
<dt><VAR>BOTTOM</VAR><dd>
<a
href="mailto:gorka@usuarios.retecal.es"><img
src="../imagenes/e_mail.gif" alt="e-mail"
align="top"> </a>
alt="Ordenador" align="bottom"
border="3">
Texto.
<dt><VAR>LEFT</VAR><dd>
<div><img src="../imagenes/happysmclr.gif"
alt="Ordenador" align="left"
border="3">
Texto.
</div><BR clear="all">
</dl>
Si queremos eliminar el borde que aparece por

ser un enlace, asignamos al atributo border el valor
de cero:
ejemplo04:
<u>Ejemplo:</u>
<a
href="mailto:gorka@usuarios.retecal.es"><img
src="../imagenes/e_mail.gif" alt="e-mail"
align="top" border="0">
8.1- ELECCIN DE FORMATO

GRFICO
Normalmente se opta entre imgenes GIF o
JPEG. Las imgenes en JPEG presentan ms calidad
y su tamao es menor, lo que se traduce en menor
tiempo de transmisin , si bien el mecanismo de
descompresin ralentiza la parte final de la transferencia.
Las GIF
son reconocidas por todos los
navegadores
y
presentan
ventajas
como
transparencias y movimiento.
21 de 48
9-TABLAS
La etiqueta
atributos:
Una tabla es un conjunto de celdas organizadas

dentro de las cuales podemos alojar distintos tipos de
contenidos.
Para crearlas utilizamos la etiqueta principal <table>
junto con su cierre correspondediente </table>. Dentro
de esta etiqueta vamos creando las distintas filas por
medio de la etiqueta <tr> y </tr>, y en cada fila las
celdas a travs de la etiqueta <td> y </td>. Las celdas
de cada fila se ordenan automticamente de
izquierda a derecha. Dentro de estas etiquetas de
celda es donde colocaremos nuestro contenido.
Si queremos poner un ttulo a la tabla utilizamos la
etiqueta <caption> inmediatamente despus de la
etiqueta principal <table>.
ejemplo01:
</caption>
dispone
de
los
siguientes
border: Donde se establece el valor en pixels del

borde de la tabla. Si le asignamos el valor cero
no habr borde.
bordercolor: color del borde.
background: permite colocar un fondo para la

tabla a partir de un enlace a una imagen.
bgcolor: color del fondo de la tabla.
cellspacing: nmero de pixels entre celdas.
cellpadding: pixels entre el borde de la celda

y su contenido.
align: alinea la tabla. Sus valores son: center,

right o left.
width: anchura de la tabla en pixels o en

porcentaje (el 100% es el mximo del que dispone
el navegador).
height: altura
porcentaje.
<table border="1">
<caption><font size="4"
color="red">Título de la tabla</font>
principal
de
la
tabla
en
pixels
en
ejemplo02:
<tr>
<td>celda 1,1</td>
<td>celda 1,2</td>
<td>celda 1,3</td>
<table border="4" bordercolor= "blue"

background="../imagenes/fondos/fondo.jpg"
align="center" width="650" cellspacing="15"
height="400" cellpadding="15">
<tr>
</tr>
<td>celda 1,1</td>
<tr>
<td>celda 2,1</td>
<td>celda 1,2</td>
<td>celda 2,2</td>
<td>celda 1,3</td>
<td>celda 2,3</td>
</tr>
<tr>
</tr>
<td>celda 2,1</td>
<tr>
<td>celda 2,2</td>
<td>celda 3,1</td>
<td>celda 2,3</td>
<td>celda 3,2</td>
<td>celda 3,3</td>
</tr>
<tr>
</tr>
<td>celda 3,1</td>
</table>
<td>celda 3,2</td>
<td>celda 3,3</td>
</tr>
</table>
9.1- ATRIBUTOS DE <TABLE>

22 de 48
9.2- ATRIBUTOS DE <tr>

Los utilizamos para que los cambios afecten a toda
las celdas de la fila.
align: alineacin que afecta a todas las celdas

de la fila. Sus valores son: center, right o
left.
valign: alinea el contenido de las celdas

verticalmente arriba (top), abajo (bottom) o
centro (middle).
bgcolor: color del interior de la lnea de celdas.
bordercolor: color del borde de la lnea de

celdas.
bgcolor: color del fondo de la tabla.
background: permite colocar un fondo para la

celda a partir de un enlace a una imagen.
height: altura
porcentaje.
width: anchura de
porcentaje.
colspan: expande una celda horizontalmente

(con la celda de la derecha).
rowspan: expande una celda verticalmente

(con la celda inferior).
de
la
celda
en
pixels
en
la celda
en
pixels o
en
ejemplo04:
ejemplo03:
<table border="1" width="500"
cellpadding="15">
<table border="1" width="500"

cellpadding="15">
<tr>
<tr align="right" valign="top"

bgcolor="green" bordercolor="pink">
<td align="right"
bgcolor="red">celda
<td>celda 1,1</td>
<td>celda 1,2</td>
1,1</td>
<td align="center"
bgcolor="blue">celda
1,2</td>
<td>celda 1,3</td>
</tr>
<tr align="center" valign="middle"
bgcolor="blue"
<td align="left"
bgcolor="green">celda
1,3</td>
bordercolor ="green">
<td>celda 2,1</td>
<td>celda 2,2</td>
</tr>
<tr>
<td background=
"imagenes/penguin_type_md_wht.gif"
width="60" height="70">
<td>celda 2,3</td>
</tr>
<tr align="left" valign="bottom"
bgcolor="red" bordercolor="yellow">
<font color="red" size="4">celda

2,1</font></td>
<td>celda 3,1</td>
<td>celda 2,2</td>
<td>celda 3,2</td>
<td>celda 2,3</td>
<td>celda 3,3</td>
</tr>
</tr>
<tr>
</table>
<td bordercolor="yellow">celda
3,1</td>
<td bordercolor="pink">celda
3,2</td>
<td bordercolor="green"
rowspan="2">celda 3,3</td>
</tr>
<tr>
<td colspan="2">celda 4,1</td>
9.3- ATRIBUTOS DE <td>

Nos permite cambiar caractersticas a una celda en
concreto.
align: alinea horizontalmente el contenido de la

celda respecto a sus bordes. Sus valores son:
center, right o left.
valign: alinea el contenido de las celdas

verticalmente arriba (top), abajo (bottom) o
centro (middle).
</tr>
</table>
23 de 48
9.4- ANIDAR TABLAS

Las tablas al igual que otros objetos de html permiten
la anidacin.
ejemplo05:
<table border="2" cellpadding="10"
cellspacint="10">
<caption>TABLAS ANIDADAS</CAPTION>
<tr>
10-FORMULARIOS
Los
formularios
nos
sirven
para
poder
intercambiar informacin con nuestro visitante o
usuario. Los datos que el usuario introduce en el
formulario son enviados por correo electrnico al
administrador del formulario o bien a un
programa
que
se
encarga
de
procesarlo
automticamente.
Para la creacin de un formulario utilizamos la
etiqueta <form> y la correspondiente de cierre </form>.
Entre estas dos etiquetas introducimos los
botones y campos que conforman el formulario.
<td>Celda 1,1</td>
<td>Celda 1,2</td>
La etiqueta <form> debe ser contenido en body,

dd y td. Pero nunca deber ser contenido en
button, dl, form y table.
</tr>
<tr>
La etiqueta <form> tiene los siguientes atributos:
<td>Celda 2,1</td>
<td>
<table border="2"
background="../imagenes/fondos/416sbyellow03.jpg">
action: para definir qu hacer con el contenido

del formulario (enviarlo por e-mail o enviarlo a
un script o programa que procese su contenido).
method: es la forma en que el formulario es

enviado. Dos formas:
<caption><font color="red">Tabla anidada en

celda 2,2</font></caption>
1. post: enva los datos como parte de la

entrada estndar.
<tr>
2. get: aade los argumentos del formulario al

URL recogido en action (usando como
separador ?), lo que da lugar a que el
programa los reciba como parmetros de
entrada.
<td>Celda 1,1 - tabla 2</td>

</tr>
<tr>
</tr>
</table>
</td>
</tr>
<tr>
<td>Celda 3,1</td>
<td>Celda 3,2</td>
</tr>
</table>
El mtodo get es el utilizado por los navegadores

para solicitar una pgina al servidor. En el momento de
enviar el formulario se compone una URL especial
formada por la referencia al programa y los parmetros
ledos en el formulario precedidos por el carcter
interrogacin (?). Los distintos parmetros se presentan
en la forma nombre=valor y se separa cada par por el
carcter ampersand (&).
En cambio, en el mtodo post el navegador contacta
con el servidor y enva datos al margen de la URL. Por lo
tanto la llamada es ms limpia y lo ms importante: no
tenemos los parmetros a la vista , lo cual es lo
mejor cuando se trata de datos que no queremos que
sean visibles.
Salvo que se diga lo contrario por ahora utilizaremos
el valor post.
enctype: se ha de utilizar en el caso de que

enviemos el formulario por correo electrnico. El
valor que le damos es text/plain.
Ejemplo:
<FORM ACTION="MAILTO:gorkaccu@msn.com"
method="post" enctype="text/plain"></form>
24 de 48
10.1- CAMPOS DE TEXTO

10.1.1- TEXTO CORTO.
Para crear una caja de texto utilizamos la etiqueta
<input> y dentro de esta hemos de especificar el valor
de los atributos type y name siendo atributos
imprescindibles.
La etiqueta es de la forma:
<input type="text" name="nombre">
mediante la cual creamos una caja de texto (valor del
atributo type) cuyo contenido ser llamado nombre
(valor del atributo name).
ejemplo01:
method="post" enctype="text/plain">
Nombre: <input type="text" name="nombre">
10.1.2- TEXTO OCULTO
</form>
Para que aparezcan asteriscos en vez de texto

utilizamos el valor password en el atributo type. Esto es
muy til para los campos destinados a contraseas
(passwords).
10.1.3- TEXTO LARGO

Para obtener una caja de texto con varias lneas se
ha de utilizar la etiqueta <textarea> con su cierre
correspondiente </textarea>, y los atributos name, rows
(para definir el nmero de lneas) y cols (para definir
el nmero de columnas).
Tambin podemos predefinir el contenido del rea de
texto escribiendo entre la etiqueta <textarea> y
</textarea> (cierre) el texto que queramos. No se usa
el atributo value.
ejemplo03:
Disponemos tambin de otros atributos que no son

imprescindibles:
size: para asignar en pixels el tamao visible

de la caja de texto.
maxlength: para asignar el tamao mximo de
caracteres que va a admitir la caja de texto.
value: para asignar un valor predefinido, es
decir, para que cuando se cargue el formulario
aparezca ya escrito el valor que hemos asignado a
value.
<p>Password: <input type="password" name=
"password"></p>
<textarea name="comentario" rows="10"
cols="40">Escribe tu comentario...
</textarea>
</form>
ejemplo02:
<p>Tamao cambiado: <input type="text"
name="nombre" size="50"></p>
<p>Slo deja 5 caracteres: <input type="text"
name="nombre" maxlength="5"></p>
<p>Value: <input type="text" name="nombre"
value="Michael Jordan"></p>
</form>
25 de 48
</select>
</p>
<p><var><b>MULTIPLE</var></b>
<SELECT NAME="jugadores" size="4" align="top"
multiple>
<option>Raúl</option>
<option>Zidane</option>
<option>Figo</option>
<option>Roberto Carlos</option>
</select>
</p>
<p><var><b>SELECTED</var></b>
<SELECT NAME="jugadores" size="4" align="top"
>
10.2- LISTAS DE OPCIONES
Son los mens desplegables que nos permiten

escoger
una (o varias) de las opciones que nos
proponen.
Para crearlas utilizamos la etiqueta <select> y su
correspondiente cierre. Tambin asignaremos un nombre
al atributo name y cada opcin que queramos que
aparezca deber ser incluida en una lnea precedida de
la etiqueta <option>.
<option selected>Figo</option>
</select>
</p>
</form>
Tambin disponemos de los siguientes atributos:
size: para indicar el nmero de valores

mostrados o visibles de la lista. El resto se pueden
ver utilizando la barra lateral de desplazamiento
(scrollbar).
multiple: para permitir

elementos de la lista.
selected: atributo de la etiqueta <option>

mediante el cual haremos que el elemento
correspondiente a esa etiqueta <option> sea el
elemento seleccionado por defecto.
value: atributo de la etiqueta <option> al cual

debemos asignar un valor numrico. Dicho valor
ser el enviado al programa o correo electrnico si
el usuario selecciona esa opcin.
seleccionar
varios
ejemplo04:
<SELECT NAME="jugadores">
</select>
<p><var><b>SIZE="2"</var></b>
<SELECT NAME="jugadores" size="2" align="top">
10.3- BOTONES DE RADIO

Son otra alternativa a la hora de plantear una eleccin.
Mediante estos botones obligamos al usuario a
seleccionar una sola opcin de entre las que se
proponen.
Presenta la misma sintaxis que las cajas de texto, es
decir, la etiqueta <input> y los atributos type, name y
value. La diferencia reside en que el valor de type
26 de 48

ahora es radio y que todos los radiobuttons (botones
de radio) que queramos que sean excluyentes han de
tener el mismo valor en el atributo name, es decir, se
han de llamar igual. Distinguiremos la opcin elegida del
resto mediante el atributo value, es decir, cada opcin
ha de tener un valor (value) distinto.
Es importante
saber que la etiqueta <input
type=radio> tan slo crea una casilla pinchable en la
pgina pero no crea texto, por lo tanto, tenemos que
encargarnos de crear el texto y los saltos de lnea
correspondientes.
Podemos preseleccionar por defecto
opciones utilizando el atributo checked.
una
de
las
ejemplo05:
<input type="radio" name="jugadores"
value="1">Raúl
<br>
value="2">Zidane
<br>
La informacin que se enviar ser:

value="3">Figo
valor de name = valor de value

Por ejemplo, si seleccionamos la opcin
informacin que se enviar por e-mail ser:
<br>
value="4">Roberto Carlos
Figo
la
jugadores = 3
<br><br>
Atributo <var><b>CHECKED</var></b> en la
segunda opcin:<br><br>

value="1">Raúl
<br>
<input type="radio" name="jugadores" value="2"
checked>Zidane
<br>
value="3">Figo
<br>
value="4">Roberto Carlos
y si seleccionamos la opcin Zidane:
jugadores = 2
10.4- CAJAS DE VALIDACIN

Las cajas de validacin o checkbox, son cajas que
pueden ser activadas o desactivadas por el usuario por
medio de un click con el ratn.
La sintaxis es la misma que la de los botones de radio
salvo en el valor del atributo type que ahora es
checkbox.
Podemos activar por defecto
atributo checked.
la caja utilizando el
</form>
ejemplo06:
<FORM
ACTION="MAILTO:pepito@usuarios.retecal.es"
<input type="checkbox" name="futbol">Me gusta
el fútbol
<br><br>
Podemos activar por defecto la caja utilizando
el
atributo
<var><b>CHECKED</var></b>:<br><u>Ejemplo:</u><
27 de 48

sirve para borrar el formulario por completo en el
caso de que el usuario desee rehacerlo desde el
principio.
br><br>
<input type="checkbox" name="futbol"
checked>Me gusta el fútbol
La sintaxis es lo mismo que en los botones normales

salvo el valor del atributo type que ahora es submit
para el botn de envo, y reset para el botn de
borrado.
</form>
ejemplo08:
<FORM ACTION="MAILTO:pepito@msn.com"
<input type="submit" value="Enviar">
<input type="reset" value="Borrar">
</form>
La informacin que
programa ser del tipo:
llegar
nuestro
correo
valor de name = on (u off si est desactivada)

En el ejemplo anterior si activamos la casilla
informacin que llegar al correo espacificado ser:
la
futbol = on
10.5- BOTONES NORMALES

Para crearlos utilizamos la etiqueta <input> y los
atributos type = button y value.
El atributo value representa el texto que aparecer
escrito en el botn.
ejemplo07:
<FORM ACTION="MAILTO:pepito@msn.com"
<input type="button" value="Texto escrito en
el botón">
</form>
10.7- DATOS OCULTOS

Adems de los datos enviados por el usuario podemos
enviar datos establecidos por nosotros y que
permanecern ocultos al usuario (a menos que el
usuario solicite en el navegador ver el cdigo fuente).
Para ello utilizamos la etiqueta <input> y el atributo
type con valor igual a hidden (oculto).
Ejemplo:
<input type=hidden name=sitioweb
value=www.google.com>
Esta
etiqueta
enviar
especificado la informacin:
al
correo
programa
sitioweb = www.google.com
Utilizando lenguajes como JavaScript podemos definir
acciones a tomar cuando un visitante pulse el botn de
una pgina web.
10.6- BOTONES DE ENVIO Y

BORRADO
El botn de envo es imprescindible porque es el
encargado de dar por terminado el proceso de
relleno del formulario y hacerlo llegar a su
destino.
El botn de borrar, en cambio, no es imprescindible y
28 de 48
11-FRAMES
frames"</p></noframes>
</frameset>
Los frames nos sirven para dividir la ventana del

navegador en diferentes reas, cada una de las
cuales
es
un
archivo
html
distinto
e
independiente .
</html>
Cada marco o rea tendr sus propias barras de

desplazamiento, propiedades...
Para crear frames utilizamos la etiqueta <frameset> la
cual v a sustituir al habitual <body>. Dentro de esta
etiqueta primero definimos cada uno de los marcos
ponindoles un nombre y especificando qu fichero html
le corresponde mediante la etiqueta <frame>, y por
ltimo indicamos lo que debe de aparecer al usuario en
el caso de
que su navegador no soporte frames
utilizando la etiqueta <noframes>.
Las divisiones que se pueden hacer con un <frameset>
son en filas o en columnas. Para indicarlo utilizamos el
atributo cols si queremos una particin en columnas o
el atributo rows si la queremos en filas.
En el atributo cols o rows colocamos entre comillas el
nmero de particiones que deseamos realizar, indicando
de paso el tamao que va a asignarse a cada una. Los
formatos de tamao son los siguientes:
Porcentajes: porcentaje referido al espacio total

disponible.
Absolutos: mediante un nmero especificando el

tamao en pixels.
Sobre el espacio sobrante: colocando un

asterisco (*) indicamos que queremos todo el
espacio sobrante. Si ponemos el asterisco en
varios
marcos
se
repartirn
el
espacio
equitativamente y si queremos que uno de los
marcos sea mayor lo hacemos poniendo un
nmero delante del asterisco, de tal forma que si
ponemos 3* ese marco ser tres veces mayor que
el que tenga tan slo el asterisco.
Estos tres formatos se pueden combinar.

Mediante la etiqueta <frame> y el atributo src
definimos la procedencia de cada una de las filas o
columnas. El valor del atributo src es la ruta y nombre
del archivo html que v a mostrar el frame:
ejemplo02
<html>
<head>
<title>ejemplo02</title>
</head>
<frameset cols="30%,70%">
<frame src="pagina1.htm">
<frame src= "pagina2.htm">
<noframes><p>No podrs ver esta pgina si el
navegador no soporta frames"</p>
</noframes>
</frameset>
</html>
<frame src=frame1.html>
En este caso estamos indicando que el frame que
estamos definiendo debe mostrar la pgina frame1.html
en su interior.
Habr tantas etiquetas <frame> como particiones
hayamos especificado en el atributo cols o rows.
ejemplo01
<html>
<head>
</head>
<frameset rows="100,*,14%">
<frame src="pag1.htm">
pgina
<noframes><p>No podrs ver esta

si el navegador no soporta
29 de 48
ejemplo03:
Vamos a ver otro ejemplo pero esta vez vamos a partir
desde el principio, es decir, desde lo que queremos
conseguir:
son pginas html independientes guardadas en el mismo

directorio que el archivo de definicin de frames. Si
estuvieran guardados en otro directorio diferente
tendramos que escribir la ruta junto con el nombre del
archivo.
11.1- FRAMES ANIDADOS
20%
No se puede hacer una particin en filas y

columnas a la vez. En el caso de que necesitemos
dividir la ventana en filas y columnas lo haremos
anidando frames.
ejemplo04:
<html>
<head>
</head>
<frameset rows="20%,*">
<frame src="anidado1.htm">
<frameset cols="20%,*">
70 pixels
Para conseguir esta divisin de marcos editamos el

siguiente cdigo:
</frameset>
<html>
<frameset rows="80%, *">
<head>
</frameset>
</frameset>
</head>
<frameset rows =20%, *, 70>
<frame src=pag1.htm>
</frameset>
</html>
</frameset>
</html>
11.2- QUITAR EL BORDE Y EL

ESPACIO ENTRE FRAMES
El ttulo (title) de la definicin de frames es el que

hereda toda la pgina web.
Las pginas pag1.htm , pag2.htm y pag3.htm
Los navegadores cuando trabajan con marcos

automticamente dibujan un borde de separacin
entre los marcos. En el caso de que no queramos que
aparezca utilizaremos el atributo frameborder=0 en la
etiqueta <frameset> (para que afecte a todos los
frames). Aunque eliminemos el borde el navegador deja
tambin un hueco entre los frames, para eliminarlo
30 de 48

utilizamos
los
atributos
framespacing=0
y
border=0 en <frameset>. Por ejemplo vamos a
eliminar los bordes y el hueco del ejemplo anterior:
1. Dar un nombre al frame que queremos actualizar

mediante el atributo name en la etiqueta <frame>.
2. Dirigimos los enlaces hacia ese frame asignando al
atributo target de la etiqueta <a> el nombre del
frame que queremos actualizar al pulsar el enlace.
ejemplo06:
ejemplo05:
</head>
En este ejemplo tenemos dos enlaces. El Enlace 1 no lo

hemos redireccionado con lo cual si hacemos clic en l se
cargar la nueva pgina en el frame donde est situado
el enlace. En cambio, el Enlace 2 s est redireccionado y
si hacemos clic en l la nueva pgina se cargar en el
frame principal.
<frameset rows="20%,*" frameborder="0"

framespacing="0" border="0">
<html>
<html>
<head>
<head>
</head>
<frame
<frameset rows="100,*,14%" frameborder="0"

<frame
src="anidado2.htm">
src="anidado3.htm">
</frameset>
<frame src="pag2.htm"
name="principal">
<frame
src="anidado4.htm">
</frameset>
</html>
<frame
src="anidado5.htm">
Y en el archivo pag1.htm tenemos el siguiente
cdigo:
</frameset>
</frameset>
</frameset>
<html>
</html>
<head>
<title>pag 1</title>
</head>
<body><h3>pagina 1</h3>
<a href="pagina1.htm">Enlace 1</a>|
<a href="pagina2.htm"
target="principal">Enlace 2</a>
</body>
</html>
Partimos de la siguiente pantalla:
11.3- DIRIGIR LOS ENLACES

Un aspecto muy importante es que los enlaces que
colocamos en las pginas actualizan solamente el
frame donde est colocada esa pgina y enlace.
Lo lgico es que al pulsar un enlace de un frame que
sirve de barra de navegacin actualicemos el frame que
muestra la pgina principal. Para ello tenemos que hacer
dos cosas:
31 de 48
11.4- VALORES DEL ATRIBUTO

TARGET
ejemplo07:
Para ver los distintos valores vamos a partir de esta
pgina:
Si hacemos clic en el Enlace 1 veremos que se carga

la pgina del enlace en ese mismo marco:
En la parte inferior de esta pgina disponemos de los

siguientes enlaces:
En cambio si hacemos clic en el Enlace 2 :

cada uno de estos enlaces es un posible valor del
atributo target. Al hacer clic sobre cada uno de ellos
veremos el efecto producido por ese valor.
El cdigo de la pgina es el siguiente:
<html>
<head>
</head>
<frameset rows="100,*,20%" frameborder="0"
32 de 48
<frame src="pag2b.htm"
name="principal">
_top: elimina todos los marcos existentes y carga

la pgina a pantalla completa.
_self: se actualiza el marco donde est situado el

enlace. Es el valor por defecto.
</frameset>
</html>
Y el cdigo del archivo pag3.htm el cual contiene los
enlaces es:
<html>
<head><title>pag 3</title>
</head>
<body>
<h3>pagina 3 - VALORES DE
<var><b>TARGET</b></var></h3>
<a href="p1.htm"
target="_blank">_blank</a> |
<a href="p2.htm" target="_self">_self</a>
|
<a href="p3.htm"
target="_parent">_parent</a> |
<a href="p4.htm" target="_top">_top</a>
|
</body>
</html>
El atributo target puede tener los siguientes valores:
_blank: muestra la nueva pgina en una ventana

nueva.
11.5- ATRIBUTOS DE <FRAMESET>
_parent: el enlace se actualiza sobre su padre o

sobre la ventana que estamos trabajando, si es
que no hay un padre.
cols: distribucin de marcos verticalmente.
rows: distribucin de marcos horizontalmente.
border:tamao en pixels del borde de los marcos.
frameborder: para indicar si se debe de mostrar

el borde o no. Sus valores pueden ser:
yes: para que se vean los bordes.
no: para que no se vean.
0: para que no se vean.
framespacing: nmero de pixels de anchura de la

lnea de separacin de los frames.
11.6- ATRIBUTOS DE <FRAME>
scr: para indicar el archivo que contiene el marco.
33 de 48
name: para dar nombre al marco y as puedas

dirigir los enlaces hacia l.
marginwidth: nmero de pixels de separacin

entre los
bordes verticales del marco y su
contenido.
marginheight: igual que el anterior pero referido

a los mrgenes verticales.
scrolling: para que aparezca o no una barra de

desplazamiento (scrollbar) en el marco. Sus
valores pueden ser:
yes: siempre aparecern las barras.
no: no saldrn nunca.
auto: slo saldrn si son necesarias. Es el

valor por defecto.
noresize: atributo sin valores que sirve

para indicar que el marco no se puede
redimensionar. Por defecto los marcos se
pueden redimensionar colocando el ratn
sobre el borde del marco y arrastrando.
frameborder .
bordercolor .
Algunos de estos atributos producen

diferentes utilizando un navegador u otro.
y en Netscape:
resultados
ejemplo08:
<html>
<head><title>Ejemplo 14.8</title></head>
<frameset rows="20%,*" border="15"
bordercolor="blue">
<frame src="anidado2.htm"
scrolling="yes"
bordercolor="red">
A travs de estas imgenes podemos ver diferencias

entre lo que nos muestra un navegador y otro.
Observamos que en Internet Explorer s que muestra la
barra de desplazamiento tal y como hemos establecido
en el cdigo, mientras que en Netscape no la muestra.
Tambin vemos diferencias de interpretacin con el
atributo bordercolor.
</frameset>
<frame src="anidado4.htm"
marginwidth="200"
marginheight="100"
noresize>
</frameset>
</frameset>
</frameset>
</html>
En el navegador Interntet Explorer el resultado es el
siguiente:
34 de 48
12-SONIDO
Se puede
navegador.
escuchar
sonido
msica
desde
el
Los formatos de audio estndar de los

navegadores son los archivos WAV y los MID. Para
poder escuchar otros formatos necesitamos un plug-in.
document.write('<EMBED
SRC="/sonidos/canyon.mid" WIDTH=1
HEIGHT=1 HIDDEN="true"
AUTOSTART="true"
LOOP="true">');
</SCRIPT>
Este cdigo funcionara de la siguiente
dependiendo del navegador que utilicemos:
12.1- SONIDO ACTIVADO POR EL

USUARIO
El usuario decide si quiere escuchar el sonido. En caso
afirmativo tan slo ha de pulsar en un enlace o link.
Para ello utilizamos la etiqueta <a> y el atributo href
en el que indicaremos la ruta y nombre del archivo de
audio.
Podemos utilizar el atributo target= _blank para
que al pinchar el usuario en el enlace se abra la
aplicacin que el usuario tenga asociada con el tipo de
fichero.
ejemplo01:
<html>
<head>
</head>
forma
Explorer: el navegador leera la etiqueta

<bgsound> y ejecutara el archivo de
sonido. Luego leera el script y no entrara
en el sentencia if porque no es Netscape.
Netscape:
el
navegador
no
puede
interpretar la etiqueta <bgsound>, y pasara
a leer el script. En el script s que cumple la
condicin de la sentencia if, por lo tanto
ejecutar la etiqueta <embed>.
12.3- ATRIBUTOS DE <BGSOUND>

En esta etiqueta utilizamos el atributo src para indicar
la ruta y nombre del archivo a reproducir, y el atributo
loop mediante el cual indicamos el nmero de veces que
se ha de repetir el sonido. Si asignamos el valor
infinite al atributo loop el sonido se reproducir
indefinidamente.
12.4- ATRIBUTOS DE <EMBED>
<body>
src: ruta y nombre del archivo a reproducir.
<a href="../sonidos/SOUND1.WAV">Pulsa para

escuchar</a>
width y height: para indicar el tamao del

reproductor.
Son
anchura
y
altura
respectivamente.
autostart:
para
indicar
si
se
arranca
automticamente la reproduccin. Los valores son
true (para que arranque automticamente) o
false (para que no).
loop: para que reproduzca ininterrumpidamente el

archivo de sonido (valor true), o no (valor
false).
hidden: para ocultar (valor true), o no (valor

false) el reproductor.
<br><br>
<p>Con <code><b>target="_blank"</b></code> al
pinchar el usuario el enlace,
se lanzar la aplicacin que
<br>tenga asociada con el tipo de
fichero:
<a href="../sonidos/SOUND1.WAV"
target="_blank">Pulsa para escuchar</a></p>
</body>
</html>
ejemplo02:
<html>
12.2- SONIDO DE FONDO

Existe un problema y es que Netscape y Explorer
utilizan dos etiquetas distintas. Netscape utiliza la
etiqueta <embed> y Explorer <bgsound>. Ambas
etiquetas son incompatibles entre s, por esto mismo
la solucin al problema hasta hace poco era incluir las
dos etiquetas, ya que cada navegador slo podra leer la
etiqueta que le es propia, la otra no la reconocera. Pero
ahora en la nueva versin de Internet Explorer el
navegador es capaz de interpretar la etiqueta <embed>
pero no de la misma manera que Netscape. La solucin
final consiste en utilizar un pequeo script que se
encargue de averiguar el navegador utilizado y aplique la
etiqueta correspondiente:
<BGSOUND SRC="../sonidos/canyon.mid"
LOOP="infinite">
<SCRIPT LANGUAGE="Javascript">
<head>
<title>Sonido de fondo</title>
</head>
<body>
<h1>SONIDO DE FONDO</H1>
<HR COLOR="RED">
<p>Netscape y Explorer utilizan para el
sonido dos etiquetas distintas.
Netscape utiliza la etiqueta <EMBED&GT; y
Explorer <BGSOUND>. Luego
para distinguir un navegador del otro
necesitamos un pequeo script.</p>
if (navigator.appName=="Netscape")
35 de 48
<P>El código utilizado ha sido el

siguiente:</P>
<PRE><BGSOUND SRC="/sonidos/canyon.mid"
LOOP="infinite">
SRC="/sonidos/canyon.mid"
WIDTH=20 HEIGHT=30 HIDDEN="true"
AUTOSTART="true" LOOP="true">');
</SCRIPT></PRE>
<BGSOUND SRC="../sonidos/canyon.mid"
LOOP="infinite">
SRC="../sonidos/canyon.mid" WIDTH=1
HEIGHT=1 HIDDEN="true"
AUTOSTART="true"
LOOP="true">');
13-MAPAS
Consisten en incluir varios enlaces dentro de una
misma imagen. Para ello los definimos por medio de
figuras geomtricas.
Para hacer un mapa de imagen tenemos primero que
incluir la imagen que vamos a utilizar dentro del <body>
de nuestro cdigo a travs de la etiqueta <img>.
Posteriormente debemos de delimitar la imagen en
figuras geomtricas dentro de la etiqueta <map>.
En la etiqueta <map> podemos utilizar el atributo name
para definir el nombre de la definicin del mapa. Dentro
de la directiva <map> hemos de introducir cada una de
las areas las cuales se indican a travs de la etiqueta
<area>.
13.1- ATRIBUTOS DE <AREA>
alt: para indicar el texto que se mostrar cuando

situemos el ratn en el rea. Tambin se mostrar
ese texto en el caso de que el navegador no
pueda cargar la imagen en cuestin.
coords: para definir las coordenadas del rea.

Cada punto de la imagen se define a travs de su
altura (X) y anchura (Y). Siendo la esquina
superior izquierda la posicin 0,0, y la esquina
inferior derecha la posicin X,Y. Es decir, las
coordenadas del primer pixel son 0,0 y el ltimo
pixel de una imagen, por ejemplo, de 10x10 ser
9,9).
href:
para
indicar el destino
del
enlace
correspondiente
al rea.
nohref:
indica
que
no
se
tomar ninguna
accin cuando se
haga clic sobre
el rea definida.
Por defecto, a
las regiones sin definir se las toma como nohref.
shape: tipo de rea. Pudiendo ser:
</SCRIPT>
</body>
</html>
rect: rea rectangular. Para definirla se

utilizan las coordenadas de los puntos de la
esquina superior izquierda y la esquina
inferior derecha.
<area
circle: rea circular que se indica con la

coordenada del centro del crculo y el radio.
<area
shape=
rect
coords=
x1,y1,x2,y2>
shape=
circle
x1,y1,r>
coods=
poly: es un rea poligonal. Para definirlo

hay que indicar todos sus puntos en orden
siguiendo el camino marcado por el
permetro del polgono.
<area
shape=
poly
coords=
x1,y1,x2,y2,x3,y3,x4,y4>
36 de 48
</td></tr></table>
</body>
</html>
ejemplo01:
En este ejemplo faltara establecer el destino del enlace
en el atributo href de la etiqueta area.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0

Transitional//EN">
<html>
<head>
<title>Ejemplo de mapa</title>
</head>
<body>
<table border=0 width=450><tr><td
align="center">
<map name="mapa1">
<area alt="Pulsa para ver la pgina de mis
amigos" shape="CIRCLE" coords="44,36,29"
href="#">
<area alt="Pulsa para ver mi novia"
shape="CIRCLE" coords="140,35,31" href="#">
<area alt="Pulsa para conocer a mi Familia"
shape="circle" coords="239,37,30" href="#">
<area alt="Pulsa para conocer mi trabajo"
shape="CIRCLE" coords="336,36,31" href="#">
</map>
<img src="../imagenes/mapa1.gif" width="380"
height="72" alt="Mapa de imgenes. Pulsa en
cada una de los crculos." border="0"
usemap="#mapa1">
<br>
<font face="Verdana,Arial" size="1">Pulsa en
los crculos para acceder a las
secciones!</font>
37 de 48
14-MARQUESINAS
</html>
Son pequeas ventanas donde vemos un texto

desplazarse.
No todas las versiones de Netscape y Explorer soportan
las marquesinas. Slo sern implementadas en las
versiones ms actuales del Netscape y en la versin 3.0
o superior del Explorer.
La etiqueta bsica es <marquee> y su correspondiente
cierre </marquee>. Entre <marquee> y su cierre
escribiremos el texto que queremos que aparezca
desplazndose en la marquesina.
ejemplo01:
<html>
<head>
</head>
<body>
align: alineamiento respecto al texto que rodea a

la marquesina. Puede ser: arriba (top), medio
(middle) o abajo (bottom).
bgcolor: color del fondo de la marquesina. Los

valores son los colores ms frecuentes en ingls o
utilizar valores RGB.
<MARQUEE>Texto desplazndose</MARQUEE>
</body>
</html>
ejemplo03:
<MARQUEE BGCOLOR="red">Texto desplazndose con
fondo rojo</MARQUEE>
14.1- ATRIBUTOS
width: anchura en pixels o en porcentaje de

pantalla.
height: altura de la marquesina en pixels o en

porcentaje de pantalla.
ejemplo02:
<html>
<head>
</head>
<body>
Con Netscape si aplicamos el valor alternate el

texto v de un lado a otro y vuelve, pero s que llega a
desaparecer cuando llega a los mrgenes.
ejemplo04:
<MARQUEE WIDTH= 50% HEIGHT= 80>Marquesina

con el 50% de la ventana de ancho y 80 pxeles
de alto</MARQUEE>
</body>
behavior: sirve para indicar el comportamiento el

cual puede ser el que viene por defecto (valor
scroll) con el que el texto v de un lado a otro
y desaparece, o que el texto se mueva de un lado
a otro y vuelva marcha atrs sin desaparecer
(valor alternate).
<MARQUEE BEHAVIOR=ALTERNATE>Texto
desplazndose alternadamente</MARQUEE>
direction:
direccin
del
texto.
Los
valores
38 de 48

pueden ser left para que se mueva hacia la
izquierda (valor por defecto) o right para que
se mueva hacia la derecha.
15-HOJAS DE ESTILO
<MARQUEE DIRECTION="right">Texto desplazndose

hacia la derecha</MARQUEE>
Sirven para definir los detalles de visualizacin

(tipo y tamao de letra, mrgenes, colores,
aspecto final) de un conjunto de pginas desde un
nico fichero. Esto es una gran ventaja en lo que
respecta a tiempo, esfuerzo y reduccin de errores.
<MARQUEE DIRECTION="left">Texto desplazndose

hacia la izquierda</MARQUEE>
15.1- <STYLE>
ejemplo05:
scrollamount: nmero de pixels que se

desplazan en cada avance. Cuanto mayor sea el
valor mayor ser la rapidez de desplazamiento del
texto en la marquesina.
ejemplo06:
<MARQUEE SCROLLAMOUNT="50">Texto avanzando
rpido</MARQUEE>
<MARQUEE SCROLLAMOUNT="3">Texto avanzando
lento</MARQUEE>
scrolldelay: nmero de milisegundos que dura

cada movimiento de avance. Cuanto mayor sea
ms lento ir.
Utilizamos un nuevo atributo para las etiquetas de

HTML: style. De esta manera en vez de especificar los
tradicionales atributos despus de la etiqueta, se incluye
un nico atributo que comprende todos los elementos
definibles del texto.
Este atributo se puede aplicar a cualquier elemento que
pueda aparecer dentro del cuerpo de un documento
(excepto basefont, param y script), y tiene como
posibles valores una lista de declaraciones de estilo,
separadas por punto y coma.
ejemplo01:
<html>
<head>
ejemplo07:
<MARQUEE SCROLLDELAY="150">Texto avanzando

lento</MARQUEE>
loop: nmero de veces que aparecer el texto.

Por defecto es infinito (valor infinite).
hspace: anchura de los mrgenes horizontales.
vspace: anchura de los mrgenes verticales.
Ya fuera de la etiqueta <marquee> es posible decidir la

fuente o el tipo de letra de la marquesina utilizando la
etiqueta <font> que ya conocemos.
</head>
<body>
<P>Este prrafo es normal</p>
<P STYLE = "TEXT-INDENT:60"> SANGRA DE 60
</P>
<P STYLE = "FONT-FAMILY:SANS-SERIF"> TIPO DE
LETRA SANS SERIF
</P>
<H3> CABECERA H3 </H3>
ejemplo08:
<font face= "impact, arial" color=
"blue"><MARQUEE SCROLLDELAY="150">Texto
avanzando lento</MARQUEE>
<H3 STYLE= "COLOR:GREEN; FONT-SIZE:18PT">

VERDE Y TAMAO = 18
</H3>
</body>
<MARQUEE SCROLLDELAY="1">Texto avanzando

rapido</MARQUEE></font>
</html>
Pero esto no es muy til, porque tenemos que

39 de 48

estar escribiendo los estilos una y otra vez. Para
solucionar esto lo que hacemos es escribir la etiqueta
<style> y su cierre correspondiente dentro de la
cabecera del documento (<head>), y entre la etiqueta
<style> y su cierre introducimos las especificaciones de
los estilos.
ejemplo02:
<html>
<head>
<STYLE>/*ESTILO PARA EL PARRAFO*/
P,H6{COLOR:RED; FONT-FAMILY:SANS-SERIF;
FONT-SIZE:18PT}
</STYLE>
</head>
<body>
<P> NUEVO ESTILO PARA EL PRRAFO </P>
<H6>NUEVO ESTILO PARA CABECERA 6</H6>
</body>
</html>
En este ejemplo podemos observar:
La etiqueta <style> se coloca dentro de la

cabecera del documento.
Los comentarios dentro de la etiqueta <style>

utilizan la sintaxis:
/* esto es un comentario */
Se pueden aplicar las mismas propiedades a

varias etiquetas distintas. Estas etiquetas han de
ser separadas por medio de comas (, ). En
nuestro
ejemplo
aplicamos
las
mismas
propiedades de color, tipo y tamao de fuente a
las etiquetas de prrafo (<p>) y a la etiqueta de
encabezado 6 (<h6>), entre las cuales inclumos
una coma.
Las propiedades se han de escribir entre llaves
({}) y separadas entre s por medio del
punto y coma (; ).
Tanto en este ejemplo como en el anterior
(Ejemplo 17.1 ) podemos ver que para asignar
un valor a una propiedad utilizamos dos
puntos (: ) en lugar de un signo igual.
Ahora siempre que utilicemos una etiqueta de
prrafo o una de encabezado 6 en el <body> del
documento, se aplicarn automticamente dichas
propiedades de color, tamao y tipo de fuente. El
resto de propiedades propias de dichas
etiquetas permanecen inmutables:
15.2- ESTILOS MEDIANTE CLASES

Hay veces que necesitamos que, por ejemplo, un
prrafo (<p>) tenga diferentes estilos. Para cuando
necesitemos el uso de diferentes versiones de
estilos de un mismo elemento utilizamos las clases.
Para definir una clase se aade un nombre de clase
que queramos al nombre de la etiqueta mediante
un punto:
<style>
H4.PRIMERH4{COLOR:BLUE;FONT-SIZE:10PT;TEXTALIGN:LEFT}
H4.SEGUNDOH4{COLOR:RED;FONT-SIZE:24PT;TEXTALIGN:RIGHT}
</style>
Y para aplicarlo utilizamos el atributo class de la
etiqueta u elemento:
<H4 CLASS= PRIMERH4> PRIMERA CLASE </H4>
<H4 CLASS=SEGUNDOH4> SEGUNDA CLASE </H4>
ejemplo03:
<html>
<head>
<style>
H4.PRIMERH4{COLOR:BLUE;FONTSIZE:10PT;TEXTALIGN:LEFT}
H4.SEGUNDOH4{COLOR:RED;FONTSIZE:24PT;TEXTALIGN:RIGHT}
</style>
</head>
<body>
<H4 CLASS= PRIMERH4> PRIMERA CLASE </H4>
<br>
<H4 CLASS=SEGUNDOH4> SEGUNDA CLASE </H4>
</body>
</html>
40 de 48
15.3- IDENTIFICADORES
Y para definir un estilo genrico sin que est
asociado
a
ninguna
etiqueta
en
especial
utilizamos la notacin punto sin que vaya
precedida de ninguna etiqueta :
Por medio de identificadores se puede definir el

estilo asociado a un elemento concreto.
La sintaxis es igual que con las clases pero en lugar
de un punto utilizan # .Tienen la siguiente forma:
<style>
<STYLE>
.MIESTILO{BORDER-STYLE:SOLID; BORDERCOLOR:RED}
#MiIdentificador{COLOR:RED;FONT-SIZE:18PT;}
</STYLE>
</style>
Y para aplicarlo hacemos lo mismo que antes:
<H2 CLASS = MIESTILO> ESTILO SIN ASOCIAR A UNA
ETIQUETA </H2>
Y para aplicarlos utilizamos el atributo id del objeto o

etiqueta:
<P ID=MiIdentificador> AFECTADO POR EL
IDENTIFICADOR </P>
ejemplo04:
ejemplo05:
<html>
<head>
<html>
<style>
<head>
.MIESTILO{BORDER-STYLE:SOLID; BORDERCOLOR:RED}
<STYLE>
#MiIdentificador{COLOR:RED;FONTSIZE:18PT;}
</style>
</head>
</STYLE>
<body>
</HEAD>
<H2 CLASS=MIESTILO> ESTILO SIN ASOCIAR A UNA

ETIQUETA </H2>
<BODY>
<P> NO AFECTADO </P>
<H4 CLASS=MIESTILO> ESTILO SIN ASOCIAR A UNA

ETIQUETA </H4>
<P ID=MiIdentificador> AFECTADO POR EL

IDENTIFICADOR </P>
</body>
<H2> NO AFECTADO </P>
</html>
<H2 ID=MiIdentificador> AFECTADO POR EL
IDENTIFICADOR </P>
</BODY>
</html>
41 de 48
<LI> SEGUNDO ELEMENTO

DE LA
SEGUNDA LISTA
<P> PRRAFO DENTRO DEL
ELEMENTO</P>
<LI> TERCER ELEMENTO
SEGUNDA LISTA
DE LA
</OL>
<LI> SEGUNDO ELEMENTO DE LA PRIMERA

LISTA
<P> PRRAFO DENTRO DEL ELEMENTO </P>
<LI> TERCER ELEMENTO DE LA PRIMERA
LISTA
</UL>
<P> TERCER PRRAFO, FUERA DE LISTA
Tanto las clases como los identificadores plantean un
problema: un cambio de estilo obliga a modificar
en varios sitios y no en uno slo. Este problema se
resuelve utilizando los archivos .css.
</P>
</BODY>
</HTML>
15.4- JERARQUA
Una gran posibilidad que ofrecen los estilos es que el
aspecto de un elemento dependa del contexto
(contenedor) en el que se encuentre. Ejemplo:
ol p {font-size:small}
Con la definicin anterior se est asignando un tamao
de fuente small a todo el texto situado dentro de la
directiva de prrafo (<p>), pero no en todos los casos,
sino slo en aquellos en los que el prrafo aparezca a su
vez dentro de la directiva <ol> (lista ordenada).
Vemos que la diferencia con lo visto anteriormente
reside en que en la definicin del estilo dejamos un
espacio en blanco entre las etiquetas. Mediante
ese espacio en blanco indicamos la jerarqua.
ejemplo06:
15.5- ARCHIVOS .CSS
<html>
<head>
<STYLE>
UL{LIST-STYLE-TYPE:SQUARE}
UL OL{FONTSTYLE:ITALIC;COLOR:RED}
UL OL P{FONT-SIZE:20PT}
</STYLE>
</HEAD>
<BODY><CENTER> EJEMPLO DE JERARQUA DE ESTILOS
</CENTER>
<UL>
<LI> PRIMER ELEMENTO DE LA PRIMERA
LISTA (DESORDENADA)
Para ello tenemos que crear un archivo con extensin

.css en el cual simplemente escribiremos los nombres
de las etiquetas a las cuales queremos dar estilo y las
propiedades que queremos aplicar. La sintaxis es la
misma que la realizada en el ejemplo anterior.
Posteriormente desde el archivo HTML y desde la
cabecera (<head>) tenemos que importar dicho archivo.
Para importarlo tenemos dos opciones:
1. Por medio de la directiva <link>. Suponiendo que
el nombre del fichero fuese MisEstilos.css:
<head>
<link rel= "stylesheet" href=
"MisEstilos.css">
<OL>
<LI> PRIMER ELEMENTO
DE LA SEGUNDA
LISTA (ORDENADA)
Esto es lo ms til porque hace que todas nuestras

pginas tengan el mismo formato, y adems para
modificar el formato de todas la pginas tan slo
deberemos modificar este archivo con extensin
.css.
</head>
2. Por medio de la sentencia @import. La cual
adems de estar en la cabecera, tiene que estar
42 de 48

tambin dentro de la etiqueta <style>:
<head>
<STYLE>@IMPORT URL("MisEstilos.css");</STYLE>
</head>
Si el archivo .css no estuviera en el directorio raiz de
nuestro sitio web debemos de escribir la ruta adems del
nombre del archivo.
ejemplo07:
Primeramente creamos un archivo con extensin .css
en el directorio css , en el cual escribo por ejemplo:
Body{color:red;Font-family:sans-serif;textalign:justify}
H2{Border-color:red}
H3{color:red;border:medium double red;fontweight:bold}
P{color:white;background-color:blue;fontweight:bold}
Posteriormente creamos el archivo HTML y en su
cabecera importamos el css:
<html>
<head>
<link rel= "stylesheet" href=
"css/MisEstilos.css">

Existe un punto muy importante a la hora de aplicar

estilos ya sea por clases, identificadores, archivos css...
y se trata del hecho de que, por ejemplo, aunque
hayamos definido un estilo para un prrafo (<p>) en el
que decimos que el tamao de la fuente sea de 8, si
luego modificamos el tamao de fuente del prrafo a
travs de la directiva <font> ser este ltimo tamao el
que tenga validez. Es decir, siempre se aplica el
ltimo estilo que afecte al elemento.
15.6- UNIDADES DE LONGITUD

Pueden ser unidades absolutas o relativas y se
componen de un signo + (siendo el primero opcional)
y un nmero seguido de la unidad de medida y sin
ningn espacio entre ellos.
Unidades absolutas disponibles:
in: pulgadas (inches). Una pulgada equivale a

2,54 cm.
<body>
cm: centmetros.
EL <BODY> SER ROJO, JUSTIFICADO Y

FUENTE SANS-SERIF
mm: milmetros.
<P> COLOR BLANCO, FONDO AZUL
pt: puntos. Un punto equivale a 1/72 pulgadas.
</head>
Y las relativas:
FIN DEL PRRAFO

</P>
em: tamao equivalente a la altura de la fuente

asociada al elemento.
ex: tamao equivalente a la altura de la letra x

correspondiente a la fuente asociada al elemento.
px: pixels, relativo a la resolucin del rea de

visualizacin.
<H2> GGGGG </H2>

<H3> COLOR ROJO CON BORDE </H3>
</body>
</html>
Ejemplo de unidades:
-2em, 3.2em, 2cm...
15.7- PROPIEDADES DE LAS HOJAS

DE ESTILO
Vamos a ver algunas de las propiedades que podemos
utilizar a la hora de definir estilos:
15.7.1- FUENTES
font-family: fuente de letra a utilizar.
font-style: estilo de fuente de letra: normal,

italic u oblique.
43 de 48
font-weight: grosor de la fuente: normal,

bold, bolder, lighter, 100, 200, 300,
400, 500, 600, 700, 800, 900.
font-size: tamao de la fuente. Admite distintos

tipos de medida: valores absolutos (xx-small, xsmall, small, medium, large, x-large, xxlarge), relativos (larger, smaller), unidades de
longitud o porcentajes.
15.7.2- COLORES Y FONDOS
color: color del elemento.
background: color de fondo.
background-image:
cualquier URL.
background-attachment: para indicar si la

imagen de fondo del elemento se mueve (valor
scroll) o permanece fija (fixed) al hacer scroll
del texto.
background-repeat: para indicar cmo debe de

repetirse una imagen de fondo: repeat (valor por
defecto), repeat-x (repetir horizontalmente),
repeat-y (repetir verticalmente) y no-repeat (no
repetir).
imagen
de
fondo.
Admite
background-position: define la posicin inicial

de la imagen de fondo. Sus valores pueden ser
longitudes, porcentajes y las palabras clave:
left, center, right, top y bottom.
slo
en
elementos contenedores
para
indentacin de la primera lnea de texto.
margin-top, margin-right, margin-bottom,

margin-left: especifican los mrgenes superior,
derecha, inferior e izquierda, respectivamente, de
un elemento. Los valores pueden ser longitudes y
porcentajes.
margin: permite definir en un slo stio todos los

mrgenes del texto. Admite uno, dos o cuatro
valores. En el primer caso representa el tamao a
aplicar a todos los mrgenes. En el segundo caso,
el primer nmero indica los mrgenes superior e
inferior, y el segundo los mrgenes izquierda y
derecha. El ltimo caso representa los mrgenes
superior,
derecha,
inferior
e
izquierda
respectivamente.
padding-top,
padding-right,
paddingbottom,
padding-left:
especifican
respectivamente el espacio entre el contenido del
elemento y los bordes superior, derecha, inferior e
izquierda.
padding: para definir en un nico stio todos los

espacios entre el contenido del elemento y los
bordes. Admite uno, dos o cuatro valores. En el
primer caso representa el espacio a aplicar a
todos los bordes. En el segundo caso, el primer
nmero indica los espacios hasta los bordes
superior e inferior, y el segundo los espacios hasta
los bordes izquierdo y derecho. El ltimo caso
representa los espacios hasta los bordes superior,
derecho, inferior e izquierdo respectivamente.
border-top-width,
border-right-width,
border-bottom-width y border-left-width:
especifican respectivamente la anchura de los
elementos
top-border,
right-border,
bottom-border y left-border. Los valores
pueden ser longitudes y las palabras clave: thin,
medium (valor por defecto) y thick.
border-width: para definir en un nico sitio todos

las anchuras de los borders. Su funcionamiento es
como las propiedades padding y margin.
border-color: color de los bordes del elemento.

Su funcionamiento es como la propiedades
padding, margin y border-width.
border-style: para los estilos de los bordes.

Valores: none (valor por defecto), dotted,
dashed, solid, double, groove, ridge, inset y
outset, y admite uno, dos o cuatro.
Su
funcionamiento es como las propiedades padding,
margin...
border-top, border-right, border-bottom,

border-left: permiten definir de una sola vez
todas las caractersticas (anchura, estilo y color)
de los bordes superior, derecha, inferior e
izquierda respectivamente. Sus valores son los
correspondientes a las propiedades borderwidth, border-style y border-color.
border: para asignar de una sola vez todas las

caractersticas asociadas al borde de un elemento:
anchura, estilo y color. Cualquier asignacin que
Ejemplo:
15.7.3- TEXTO
word-spacing: define un espacio adicional a

establecer entre las palabras del texto. Valores de
longitud.
letter-spacing:
letras del texto.
text-decoration:
permite
aplicar
estilos
especiales al texto: none (ninguno, valor por
defecto), underline, overline, line-through
y blink.
espacio
adicional
entre
las
vertical-align: colocacin vertical del texto en

relacin con el elemento contenedor o la lnea del
elemento. Sus valores pueden ser porcentajes y
las palabras clave: baseline (valor por defecto),
sub, super,top, text-top, middle, bottom
y text-bottom.
text-transformation:
para
realizar
transformaciones en el texto. Valores: none (valor
por
defecto),
capitalize,
uppercase
y
lowercase.
text-align: se aplica slo en elementos

contenedores para alinear el texto que contienen.
Sus valores pueden ser: left, right, center y
justify.
text-indent: longitud o porcentaje que se aplica
line-height: espacio entre las lneas de texto.

Los valores pueden ser: un nmero positivo (que
se multiplicar por el tamao de la fuente de letra
del elemento), longitudes, porcentajes y la palabra
clave normal (valor por defecto).
15.7.4- CAJAS DE TEXTO
background: permite definir en un nico lugar

todas las propiedades asociadas al fondo,
simplemente incluyendo sus valores separados
por un espacio.
background: black url(imagen.jpg) fixed

center)
la
44 de 48

se haga con border, se aplicar simultneamente
a los cuatro bordes del elemento. Los valores son
los correspondientes a border-width, borderstyle y border-color.
width, height: anchura y altura del elemento.

Los valores que toma son longitudes y la palabra
clave auto (valor por defecto).
float: para indicar cmo flota el texto alrededor

del elemento. Valores: left, right y none (valor
por defecto).
clear: determina si un elemento quiere o no que

otros elementos floten a su lado. Valores:
none: valor por defecto. Obliga a que el

elemento se coloque debajo de cualquier
elemento que flote a izquierda o derecha.
left: el elemento se coloca debajo de

aquellos elementos que floten a su
izquierda.
right:el elemento se coloca debajo de

aquellos elementos que floten a su derecha.
both: permite que

izquierda y derecha.
floten
elementos
15.8- DISCRIMINAR NAVEGADOR

Tambin existen diferencias a la hora de
interpretar rdenes de css dependiendo del
navegador que utilicemos.
Enlaces visitados:
A:visited {atributos}
Enlaces activos (cuando se hace click sobre ellos):

A:active {atributos}
Enlaces hover (cuando el ratn est encima de

ellos):
A:hover {atributos}
El atributo para definir enlaces sin subrayado es textdecoration:none, para mantener el subrayado es
text-decoration:underline, y para darles color es
color:tu_color.
ejemplo08:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0
Transitional//EN">
<html>
<head>
<title>ejemplos08</title>
<STYLE type="text/css">
A:link {textdecoration:none;color:#0000FF;}
A:visited {textdecoration:none;color:red;}
La diferencia ms notable es en el tamao de fuente.

En Netscape la letra es un punto ms pequea.
A:active {textdecoration:none;color:#446EA3;}
Para solucionar esto debemos de hacer dos hojas de

estilo, una para Internet Explorer (ie.css) y otra para
Netscape (ns.css ) y discriminar entre una u otra
utilizando un pequeo script:
A:hover {textdecoration:underline;color:blue;fontweight:bold}
</STYLE>
</head>
<body>
document.write('<LINK REL= "STYLESHEET"
TYPE= "TEXT/CSS" HREF= "css/ns.css">');
else
<a href="http://www.pepito.com">Enlace
normal</a>
<br>
document.write('<LINK REL= "STYLESHEET" TYPE=

"TEXT/CSS" HREF= "css/ie.css">');
<br>
Pulsar este enlace para verlo activo,
</SCRIPT>
15.9- ESTILO EN LOS ENLACES

A travs de las hojas de estilo podemos definir el estilo
de los enlaces. Esto nos permite hacer cosas como quitar
el subrayado o hacer enlaces en la misma pgina con
distintos colores.
poner el ratón por encima para que

cambie:<br>
<A href="http://www.google.com">Enlace
visitado</a>
</body>
</html>
Tambin podemos definir el estilo de cada enlace en la

propia etiqueta <a>, por medio del atributo style. As
podemos hacer que determinados enlaces de una misma
pgina se vean de manera distinta.
Para aplicar un estilo a un enlace debemos especificar
el tipo de enlace: normal, visitado, activo...
La sintaxis sera la siguiente:
Enlaces normales:
A:link {atributos}
45 de 48
16-OBJETOS
16.1- LA ETIQUETA <APPLET>
Permite introducir programas Java
applets) dentro de una pgina web.
(concretamente
Un applet es una aplicacin escrita en Java y

desarrollada para ser ejecutada desde un
navegador.
Las utilidades tpicas en las que son empleados los
applets son efectos grficos en pginas Web, interfaces
de
usuario
avanzadas, funcionalidad
cliente
en
aplicaciones cliente-servidor y juegos.
La sintaxis es la siguiente:
<applet atributo1=valor1 atributo2=valor2 ...
atributon=valorn>
<param ...>
<param ...>

...
</applet>
Los navegadores que no admitan applets, ignoran todo
lo que aparece entre la directiva <applet> y su cierre, a
excepcin de los parmetros <param> que permiten el
paso de parmetros.
Java es compatible con todos los sistemas porque basa
su funcionamiento en los Byte Codes, que no es ms
que una precompilacin del cdigo fuente de Java.
Estos Byte Codes no son el programa en Java
propiamente dicho, sino un archivo que contiene un
cdigo intermedio que puede manejar la Mquina
Virtual de Java. Cada sistema operativo dispone de
una Maquina Virtual de Java que puede interpretar los
Byte Codes y transformarlos a sentencias ejecutables en
el sistema en cuestin.
Los applets tienen la extensin .class.
16.1.1- ETIQUETA <PARAM>

Es una directiva para definir parmetros y es utilizada
tanto por applets como por objetos. Sus atributos son:
name: nombre con el cual

parmetro dentro del applet.
value: valor concreto del parmetro.
valuetype:
optativo.
tipo
de
atributo
ser
identificado
value. Su
uso
el
es
Valores:
data: hace que value se mande al applet u

objeto como un string. Es el valor por defecto.
ref: value contiene la URL donde se pueden

localizar los valores en tiempo de ejecucin.
object: indica que value contiene un

identificador correspondiente a una declaracin
de <object> en el mismo documento.
type: indica el tipo de contenido del recurso apuntado

por value en el caso de que valuetype sea ref.
Los nicos atributos soportados

navegadores son los dos primeros.
por
todos
los
16.1.2- ATRIBUTOS DE <applet>
46 de 48
codebase: especifica la URL donde est localizado

tanto el applet como todos los recursos (imgenes,
clases Java...) que necesite.
code: especifica el nombre de la clase Java que

contiene el applet.
name: indica un nombre para la instancia concreta del

applet.
archive: lista de archivos separados por coma,

conteniendo clases Java y recursos necesarios para la
ejecucin del applet, que son precargados por el
navegador. Al precargar se acelera el proceso de
ejecucin de los applets. No es reconocido por
Internet Explorer.
Tambin tenemos atributos que ya hemos visto en

otras ocasiones como: width, height, align, hspace y
vspace.
ejemplo01:
Lo primero de todo, es necesario tener el programa del
applet. El applet que vamos a utilizar se llama
SineText.class.
Se trata de un applet que hace que un texto (elegido

por el usuario) se desplace formando una onda
sinusoidal, en direccin reversible con un click del ratn.
Se pueden escoger los colores del fondo y de las letras,
elegir entre algunos tipos de fuentes, su tamao,
velocidad de desplazamiento, etc.
</html>
ejemplo02:
<html>
<head>
</head>
<body>
<APPLET codebase="../applets"
CODE="DigClk.class" WIDTH=122 HEIGHT=29>
Aqu habra un reloj si tu navegador soportase
Java
</APPLET>
</body>
</html>
En este applet existen los siguientes parmetros:
Text - Texto que se va a ver.
Rate - Nmero de imgenes por segundo.
Font - Fuente: Helvetica (defecto), TimesRoman o

Courier.
16.2- ETIQUETA
FontSize - Tamao de la fuente.
TextStyle - Estilo de la fuente: Plain, Bold (defecto) o

Italic.
Speed - Velocidad de desplazamiento 1-10 (5 es por

defecto)
Los plugins son programas auxiliares capaces de

manejar formatos especiales de ficheros, que se
incorporan al navegador y se ejecutan dentro de la
ventana de visualizacin. Se incluyen en la pgina a
travs de la directiva <embed>, la cual hemos visto en el
apartado de sonido junto con un ejemplo.
Direction - Direccin inicial del desplazamiento. Left

(defecto) o Right.
Background - Color del fondo. 000000 (negro) es por

defecto.
ForeGround - Color del texto. FF0000 (rojo) es por

defecto.
El cdigo es el siguiente:
<html>
<head><title>ejemplo01</title></head>
<embed>
16.2.1- ATRIBUTOS DE <embed>
name: nombre del objeto contenido en el plugin.
src: localizacin del fichero a reproducir.
pluginspage: URL donde el usuario encontrar

instrucciones sobre cmo instalar el plugin.
units: unidad de medida para los atributos height y

width. Pueden ser pixels o en.
Y atributos que ya conocemos como height, width y

align.
<body>
16.3- ETIQUETA
<p align="center">
<APPLET codebase="../applets"
CODE="SineText.class" WIDTH=470 HEIGHT=75>
<PARAM NAME=Text VALUE="Curso de HTML y CSS">
<PARAM NAME=Rate VALUE="4">
<PARAM NAME=Font VALUE="Verdana">
<PARAM NAME=Background VALUE="#000000">
<object>
El Elemento object, sirve de solucin genrica para la

incluir "objetos" en los documentos. Estos "objetos"
pueden ser: imgenes, applets, otros documentos HTML,
etc...
La estructura es muy similar a la de la etiqueta
<applet>, con la inclusin entre <object> y su cierre de
directivas <param> y contenido alternativo que se
mostrar en navegadores que no soporten el objeto.
<PARAM NAME=ForeGround VALUE="#ffffff">

Lo siento, pero no puedes ver este applet
funcionando.
</APPLET></body>
16.3.1- ATRIBUTOS
classid: Sirve para especificar la localizacin de los

datos del objeto, para su evaluacin. Este atributo
47 de 48

puede utilizarse conjuntamente con el atributo data o
como alternativa a ste. Depender del tipo de
objeto. Su valor es una direccin URL.
codebase: Especifica el "camino" a utilizar para

resolver los URL relativos especificados en otros
atributos. Si no se especifica, el valor por defecto es
la base del URL del documento activo. Su Valor es un
URL.
codetype: Sirve para especificar el tipo de medio o

datos esperados, cuando se descarga el objeto
especificado por el atributo classid, por ejemplo:
"text/html", "text/css", "image/gif", etc. Si no
se incluye este atributo, se toma por defecto el valor
del atributo type.
data: Puede utilizarse para especificar la localizacin

de los datos del objeto. Si se utiliza como direccin
relativa, se interpretar en base al atributo codebase.
type: Especifica el tipo de contenido especificado por

el atributo data. Es opcional, pero se recomienda su
uso si se va a utilizar el atributo data, ya que evita la
carga de tipos de contenido que no sean soportados
por el navegador.
Se pueden anidar etiquetas <object>. Esto es til para

ofrecer objetos alternativos a los navegadores.
Ejemplo:
archive: Puede utilizarse para relacionar una serie

de URLs de archivos que contengan recursos relativos
al objeto en cuestin. Puede incluir los recursos
especificados en los atributos classid y data. La
lista debe ir separada por espacios en blanco. Si se
utilizan direcciones relativas, se resolvern en base al
atributo codebase.
<object data= musica.mov width= 200

height= 150 border= 2>
declare: Cuando se utiliza este atributo, convierte la

definicin del objeto en una simple "declaracin". El
objeto queda incrustado, pero inactivo. Para activar el
objeto, deber utilizarse, con posterioridad, otra
definicin de objeto que haga referencia a esta
declaracin.
Lo siento pero no se puede cargar ni el vdeo,

ni la imagen.
stanby: Este atributo especifica un mensaje que ser

mostrado mientras se cargan los datos del objeto.
usemap: Asocia un mapa de imagen con un elemento.

La gran ventaja con respecto a <img> es que al
colocar la definicin de <map> (la lista de enlaces)
entre <object> y su cierre, cabe la posibilidad de que
un navegador sin imgenes vea, sin embargo, los
enlaces del mapa.
Y atributos que ya conocemos como height, width,

border, hspace, vspace y align.
ejemplo03:
<object data= ../imagenes/478-alienp3.gif

width= 200 height= 150 border= 2>

</object>
Fuentes tomadas como referencia:
El libro HTML 4 de Alonso lvarez Garca y Jos

ngel Morales Grela.
Pgina web: http://www.desarrolloweb.com
<html>
<head>
<title></title>
</head>
<body>
<OBJECT WIDTH="200" HEIGHT="100"
DATA="../imagenes/478-alienp3.gif"></OBJECT>
</body>
</html>
48 de 48

HTML 8º Grado Idetp

Cargado por

Información del documento

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

HTML 8º Grado Idetp

Cargado por

Copyright:

Formatos disponibles

Manual HTML 4.

Autor: Gorka Calleja Urraca.

Curso de HTML 4.0 y CSS

Curso de HTML 4.0 y CSS

Curso de HTML 4.0 y CSS

Curso de HTML 4.0 y CSS

2-EL LENGUAJE HTML

Hyper Text Markup Language, ms conocido como

La sintaxis del lenguaje HTML se basa en la

Con HTML podemos utilizar textos, sonidos, imgenes,

<etiqueta> texto afectado </etiqueta>

2.1- CARACTERES ESPECIALES

Nota del autor:

2.1.1- LOS MS USADOS

signo menor que

signo mayor que

Observamos que para acentuar un carcter

Coleccin FAST LEARNING -

Quark Inside S.L. - Gorka Calleja Urraca (Departamento Tcnico)

Curso de HTML 4.0 y CSS

nada del texto del documento.

3.<body>: Encierra el resto del documento, el contenido.

Tenemos tres versiones distintas:

HTML 4.0 Strict DTD: incluye todos los componentes

<!DOCTYPE HTML PUBLIC !-//W3C//DTD HTML

HTML Transitional DTD:

<!DOCTYPE HTML PUBLIC !-//W3C//DTD HTML 4.0

HTML Frameset: incluye los componentes del HTML

<!DOCTYPE HTML PUBLIC !-//W3C//DTD HTML 4.0

1.<html>: Limitan el documento

Tiene dos usos: contenedor de metainformacin

name: identifica la informacin que se va a exportar.

content: contenido de la informacin.

http-equiv: es el nombre de un comando HTTP.

encuentra escrito en este lenguaje.

2.<head>: Especifica el prlogo del resto del archivo. Son

pocas las etiquetas que van dentro de ella, destacando la

Coleccin FAST LEARNING -

3.3.2- ETIQUETAS <META> MS COMUNES

AUTHOR: Para definir quin construy la pgina web:

<META NAME="AUTHOR" CONTENT="Su nombre aqu">

COPYRIGHT: Para el copyright:

Quark Inside S.L. - Gorka Calleja Urraca (Departamento Tcnico)

Curso de HTML 4.0 y CSS

<META NAME="COPYRIGHT" CONTENT="Ingrese aqu

CONTACT_ADDR: Para definir la direccin de correo

<META NAME="robots" CONTENT="INDEX,FOLLOW">

<META NAME="CONTACT_ADDR" CONTENT="Aqu su

RATING: Para indicar hacia qu tipo de audiencia est

general: para todas las edades.

14 years: para mayores de 14 aos.

mature: para adultos.

restricted: para adultos con restricciones.

ROBOT: Cuando un motor de bsqueda visite su

all: dir al robot del motor de bsqueda que

3.3.3- REDIRECCIONAMIENTOS A OTRAS

<META HTTP-EQUIV="REFRESH" CONTENT=

Sirve para especificar un directorio base para todas las

noindex: para que el robot no indexe esa

Esta directiva se ha de situar en la cabecera (head) del

nofollow: que indexe esta pgina pero que no

none: que no indexe esta pgina ni siga los

Mediante el atributo href especificamos la ruta o

../imagenes/dibujo.gif, se la buscar en el directorio