HTML 8º Grado IDETP

Manual HTML 4.
0 y
CSS.
Autor: Gorka Calleja Urraca.

Curso de HTML 4.0 y CSS
INDICE
1-INTRODUCCIÓN........................................................................................5
2-EL LENGUAJE HTML.....................................................................................5
2.1- CARACTERES ESPECIALES ......................................................................................5

2.1.1- LOS MÁS 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> MÁS COMUNES.......................................................................................6
3.3.3- REDIRECCIONAMIENTOS A OTRAS PÁGINAS...........................................................................7
3.4- DIRECTIVA <BASE>..............................................................................................7
4-FORMATO DE PÁRRAFOS................................................................................8
4.1- ATRIBUTOS Y JUSTIFICADO DE PÁRRAFOS....................................................................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, TAMAÑO Y TIPO DE LETRA............................................................................13
6-LISTAS...............................................................................................14
6.1- LISTAS DESORDENADAS.......................................................................................14
6.2- LISTAS ORDENADAS............................................................................................15
6.3- LISTAS DE DEFINICIÓN.........................................................................................16
6.4- ANIDAR LISTAS..................................................................................................17
7-ENLACES.............................................................................................18
7.1- DIRECCIÓN URL.................................................................................................18
7.2- ENLACES INTERNOS.............................................................................................18
7.3- ENLACES LOCALES..............................................................................................19
8-IMÁGENES............................................................................................19
8.1- ELECCIÓN DE FORMATO GRÁFICO............................................................................20
8.2- IMÁGENES 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 VALIDACIÓN.......................................................................................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- JERARQUÍA.....................................................................................................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-INTRODUCCIÓN 2-EL LENGUAJE HTML

Hyper Text Markup Language, más conocido como La sintaxis del lenguaje HTML se basa en la
HTML es el lenguaje usado por los navegadores para denominada etiqueta. La etiqueta tiene dos partes: una
mostrar las páginas webs al usuario. apertura y un cierre.
Con HTML podemos utilizar textos, sonidos, imágenes, <etiqueta> texto afectado </etiqueta>
y lo más importante, enlaces a otras páginas.
La etiqueta del principio activa la orden y la última (que
Este lenguaje surge en principio con fines divulgativos será la del principio precedida del signo /) la desactiva.
y no se tuvo en cuenta que la web llegara a ser un área No todas las etiquetas tienen principio y final pero esto lo
de ocio con carácter multimedia, debido a esto, el HTML veremos más adelante.
ha ido necesitando actualizaciones con el paso del tiempo
y la introducción de otras tecnologías complementarias Es importante resaltar que las mayúsculas o
como es el caso de CSS y JavaScript. minúsculas son indiferentes a la hora de escribir las
etiquetas. De todas formas, resulta aconsejable el
Otro problema al que se enfrenta HTML son los distintos acostumbrarse a escribirlas en minúsculas debido a que
navegadores, los cuales, no interpretan un mismo código otras tecnologías que pueden utilizar nuestro HTML
de manera unificada. Por lo tanto el creador de una necesitan caracteres en minúsculas.
página web (webmáster) ha de verse obligado a
comprobar que su página es interpretada correctamente Ejemplo:
por todos los navegadores (en especial Internet
Explorer y Netscape). Las etiquetas <b> y </b> muestran un texto en negrita.
Una página web es un archivo que contiene código El código sería:
HTML en forma de texto. Estos archivos tienen la
<b>Texto en negrita</b>
extensión “.html” o “.htm”.
Para la creación de un archivo HTML tan sólo Resultado:
necesitamos un sencillo editor de textos como puede ser
el Bloc de notas (notepad) de Windows, o el Vi de Texto en negrita
Linux.
También disponemos de herramientas más
especializadas como HTML Builder y Macromedia
2.1- CARACTERES ESPECIALES
Dreamweaver, los cuales nos permiten aumentar
HTML dispone de un mecanismo que permite que una
considerablemente nuestra eficiencia debido a las
serie de caracteres raros o exclusivos de un país se vean
muchas facilidades que nos ofrecen.
correctamente en todos los ordenadores del mundo.
Cuando queramos poner alguno de estos caracteres en
una pagina, tenemos que sustituirlo por su
correspondiente código.
Nota del autor:
2.1.1- LOS MÁS USADOS
Todos los ejemplos del manual que aparezcan
numerados están disponibles en archivo HTML. Puedes Significado Código
conseguirlos descargándolos de nuestra página web: < signo menor que <
http://www.quarkinside.com
> signo mayor que >
& signo ampersand &

“ comillas "
espacio en blanco

ñ “ñ” minúscula ñ
Ñ “ñ” mayúscula Ñ
á “a” minúscula acentuada á

Á “a” mayúscula acentuada Á
é “e” minúscula acentuada é

copyright
© ©
marca registrada
® ®
Observamos que para acentuar un carácter

tenemos que escribir el signo ampersand (&) seguido
del carácter en cuestión (en mayúsculas o
minúsculas según corresponda) y terminando con
acute;.
Colección FAST LEARNING - Quark Inside S.L. - Gorka Calleja Urraca (Departamento Técnico) 5 de 48
3-ESTRUCTURA nada del texto del documento.
3.<body>: Encierra el resto del documento, el contenido.

3.1- DOCTYPE
El estándar HTML 4.0 exige que todos los ficheros que ejemplo01:
quieran considerarse documentos HTML, deban tener, al
menos, dos elementos: un comentario especial <HTML>
SGML que describe el lenguaje y versión utilizado, <HEAD>
y un título. <TITLE>Ejemplo01</TITLE>
</HEAD>
El primer componente (DOCTYPE) indica la versión de
<BODY>
HTML en la que está codificado el documento y no es
Hola mundo
más que una referencia al DTD que describe el lenguaje
(HTML 4.0, versión de transición). Aunque es ignorado </BODY>
por la mayoría de los browsers (navegadores), se </HTML>
recomienda su utilización, ya que permite a todo tipo de
Guardamos este texto como ejemplo01.html y para
agentes conocer la versión concreta del lenguaje y poder
poder abrirlo simplemente hacemos doble clic sobre el
así sacar el máximo partido de las funcionalidades
archivo y se lanzará el navegador que tengamos por
disponibles.
defecto:
El DOCTYPE es lo primero que se escribe en un
documento HTML.
Tenemos tres versiones distintas:
• HTML 4.0 Strict DTD: incluye todos los componentes
excepto los frames. La declaración es la siguiente:
<!DOCTYPE HTML PUBLIC !-//W3C//DTD HTML
4.0//EN”>
• HTML Transitional DTD: incluye todos los

componentes de HTML 4.0 Strict más aquellos
desaconsejados de versiones anteriores, sin incluir
los frames. Es la versión más 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 más los frames.
<!DOCTYPE HTML PUBLIC !-//W3C//DTD HTML 4.0

Frameset//EN”>
Debido a la gran difusión de las nuevas versiones de

navegadores cuyo soporte es bastante completo, se 3.3- DIRECTIVA <META>
recomienda utilizar la versión Strict de HTML 4.0.
Sólo se debería usar las otras dos versiones en el caso Tiene dos usos: contenedor de metainformación
de que utilicemos frames, o bien, nos enfrentemos a sobre el documento, e información adicional, incluidos
navegadores antiguos. comandos, relacionada con el protocolo HTTP.
El otro elemento que no puede faltar en un documento Por norma general, se añaden directivas META para
HTML es el título. Este componente es el que dejar en ellas información que pueda identificar al
habitualmente emplean los navegadores para encabezar documento y su contenido, información que utilizan
la ventana en la que se muestra el documento, y que se aplicaciones externas como buscadores e índices (Yahoo,
utiliza para identificar el documento en bookmarks, Google,...).
índices,... El título lo veremos en el siguiente apartado.
Todos los <META> son insertados entre las secciones
<head> y </head>. El orden no es importante.
3.2- ESTRUCTURA
Tres son la etiquetas que describen la estructura
3.3.1- ATRIBUTOS
general de un documento y dan una información sencilla • name: identifica la información que se va a exportar.
sobre él. Estas etiquetas no afectan a la apariencia del
documento y sólo interpretan y filtran los archivos HTML. • content: contenido de la información.
1.<html>: Limitan el documento e indica que se • http-equiv: es el nombre de un comando HTTP.

encuentra escrito en este lenguaje.
2.<head>: Especifica el prólogo del resto del archivo. Son 3.3.2- ETIQUETAS <META> MÁS COMUNES
pocas las etiquetas que van dentro de ella, destacando la Las vamos a clasificar según su atributo name:
de <title> (título) que será utilizado por los
marcadores del navegador e identificará el contenido de • AUTHOR: Para definir quién construyó la página web:
la página. Sólo puede haber un título por documento, <META NAME="AUTHOR" CONTENT="Su nombre aquí">
preferiblemente corto aunque significativo, y no caben
otras etiquetas dentro de él. En head no hay que colocar • COPYRIGHT: Para el copyright:
<META NAME="COPYRIGHT" CONTENT="Ingrese aquí <META NAME="robots" CONTENT="INDEX,FOLLOW">

el nombre de su compañía">
<META NAME="revisit-after" CONTENT="7 Days">
• CONTACT_ADDR: Para definir la dirección de correo <META NAME="email"
electrónico que la gente debería usar para hacer CONTENT="olivawdaneel@msn.com">
contacto con usted:
<META NAME="author" CONTENT="Gorka">
<META NAME="CONTACT_ADDR" CONTENT="Aquí su
dirección email"> </head>
• RATING: Para indicar hacia qué tipo de audiencia está

3.3.3- REDIRECCIONAMIENTOS A OTRAS
orientado su sitio web disponemos de cuatro posibles
valores: PÁGINAS
? general: para todas las edades. Puedes enviar a los visitantes a una página
específica, diferente, al incluir este marcador:
? 14 years: para mayores de 14 años.
<META HTTP-EQUIV="REFRESH" CONTENT=
? mature: para adultos. “2”;URL=http://www.sudominio.com/otra_pagina.h
? restricted: para adultos con restricciones. tml">
La etiqueta sería: En content, el atributo de valor numérico (“2 ”) indica

la cantidad de segundos de pausa antes de cargar el
<META NAME="RATING" CONTENT="El Rating aquí"> destino, que se encuentra especificado a continuación.
• ROBOT: Cuando un motor de búsqueda visite su De esta manera al cargarse esta página se
página tratará de seguir sus links e indexará cada presentará al visitante durante 2 segundos, dirigiéndose
página que encuentre. luego a otra_página.html.
Posibles valores:
? all: dirá al robot del motor de búsqueda que 3.4- DIRECTIVA <BASE>
siga todos los links sobre su página web, e
Sirve para especificar un directorio base para todas las
indexe todos los que encuentre.
referencias (direcciones URL ) relativas del documento.
? noindex: para que el robot no indexe esa Esta directiva se ha de situar en la cabecera (head) del
página. Pero puede seguir los links sobre ella. documento.
? nofollow: que indexe esta página pero que no Mediante el atributo href especificamos la ruta o
siga los links sobre ella. dirección donde se ha de buscar cualquier página o
archivo referido en el documento.
? none: que no indexe esta página ni siga los
links sobre ella. Sólo afecta al documento en el que aparece.
La etiqueta sería: Por ejemplo, si se apunta a la imagen

../imagenes/dibujo.gif, se la buscará en el directorio
<META NAME="ROBOT" CONTENT="Ingrese el valor anterior (superior o previo) al tomado como referencia,
aquí"> es decir, el que contiene el documento.
• REVISIT-AFTER: Para indicar a un robot cuando debe Usando por ejemplo:

regresar e indexar el sítio de nuevo. <base href=
Los posibles valores pueden ser la cantidad de tiempo “http://www.ejemplo.es/dirpag/index.html”>
que usted quiera: “10 days”, “2 months”, “1 week”,...
hacemos que, con independencia de donde
La etiqueta sería: almacenemos el documento html, el directorio donde va
a buscar cualquier referencia relativa va a ser, en
<META NAME="REVISIT-AFTER" CONTENT="Ingrese el nuestro caso, siempre el directorio dirpag. Es decir, a la
valor aquí"> hora de buscar el archivo dibujo.gif lo buscará en esta
ruta:
Ejemplo:
http://www.ejemplo.es/dirpag/imagenes/dibujo.g
<head> if
<TITLE>Concentración Motera
Acelerados</TITLE>
<META NAME="keywords" CONTENT="acelerados,
concentración, motos, moteros">
<META NAME="description" CONTENT="Información,
programa, rutas, fotos... de la Concentración
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">
4-FORMATO DE PÁRRAFOS <p align="right">Texto alineado a la

derecha.</p>
Formatear un texto consiste en definir los <p align= "center">Texto centrado.</p>

párrafos, justificarlos, poner en negrita, en </body>
itálica...
</html>
Para definir los párrafos nos servimos de la etiqueta
<p> que introduce un salto y deja una línea en
blanco antes de continuar con el resto del documento.
Con la etiqueta <br> podemos realizar un salto de
linea, puede poner tantas como desee y realizará un
salto de línea 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 línea no empieza y acaba más adelante
sino que sólo tiene presencia en un lugar puntual.
Por medio de:

podemos insertar comentarios en nuestro código que

nos servirán de recordatorios en futuras revisiones del
documento. Estos comentarios no se mostrarán a través
del navegador.
4.1- ATRIBUTOS Y JUSTIFICADO DE

PÁRRAFOS
Para justificar un párrafo utilizamos el atributo align.
Un atributo es un parámetro incluido en el interior
de la etiqueta que ayuda a definir el 4.2- CONTENEDORES O LAYERS
funcionamiento de la etiqueta de una forma más
personal. Los atributos tienen sus valores indicados Para cuando tengamos un texto largo y queramos que
entre comillas (“) pero si no los indicamos entre comillas todos los párrafos estén justificados de alguna manera lo
también funcionará en la mayoría de los casos. Eso si, ideal es utilizar la etiqueta <div> denominada
en caso de que el valor del atributo contenga contenedor, o comunmente “layer” (capa). Todo lo
espacios las comillas son obligatorias. De todas que esté incluido dentro de esta etiqueta será alineado
maneras, para evitar posibles errores es mejor tal y como hayamos especificado en el atributo align.
acostumbrarse a ponerlas siempre. Con la versión 4.0 de HTML disponemos también de un
El atributo align puede tener 3 valores: nuevo valor para el atributo align, que es “justify”.
Este valor nos permite justificar el texto a ambos
1. left: texto alineado a la izquierda. márgenes del navegador.
2. right: alineado a la derecha.
ejemplo02:
3. center: alineado al centro.
<html>
Para centrar el texto también podemos utilizar la
etiqueta <center> seguida del texto que queremos <head>
centrar y posteriormente el cierre correspondiente:
</center>. <title>Ejemplo02</title>
</head>
ejemplo01:
<body>
<html> <p>Para simplificar el código a la hora de
<head><title>Ejemplo01</title></head> justificar utilizamos la
<body> etiqueta <div>.</p>
<p>Esto es un párrafo, se introduce un salto <div align="right">

y deja una línea en blanco antes de continuar <p>centrado a la derecha</p>
con el resto del documento.</p>
<p>insisto en que está centrado a la
Vemos que ha dejado un espacio en derecha</p>
blanco.<br><br>
</div>
A través de la etiqueta <br> <br>
hacemos un salto de carro. <div align="center">
 centrado</p>
<p><center>Texto centrado utilizando la <p>insisto en que está

etiqueta center.</center></p> centrado</p>
<p align="left">Texto alineado a la </div>

izquierda.</p>
<div align="justify">
<p>Con el valor "justify" hacemos un
justificado a ambos márgenes. A
partir de HTML 4.0</p>
</div>
</body>
</html>
4.4- ETIQUETAS VARIAS

Disponemos de etiquetas muy útiles como las
siguientes:
• <blockquote> : nos permite indentar un

texto.
ejemplo04:
<blockquote>Esto está indentado<br>como bien

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

formatean un texto como un titular asignando un tamaño
de letra y texto en negrita. Hay seis tipos de
encabezados.
ejemplo03:
<head>
<title>Ejemplo03</title>
</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
<h3>Encabezado de nivel 3</h3> autor.
ejemplo05:
<cite>Tanto va el cantaro a la fuente<br>que
al final aprende a ir sólo.<br>Pedro
</p> Reyes.</cite>
</body>
</html>
• <var>: para representar variables de un código.
ejemplo08:
La variable <var>x</var>
• <code>: para representar código.
ejemplo06:
<p>Para cuando queramos mostrar código

utilizamos este formato<br>a través 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 versión 4.0 de HTML.
ejemplo10:
una abreviarura como <abbr>http</abbr> o

<abbr>www</abbr>
• <pre>: permite respetar la forma escrita en el • <address>: para escribir direcciones

código html, a la hora de mostrar la página en el correspondientes a calles...
navegador.
ejemplo13:
ejemplo11:
Ejemplo:
<pre>La etiqueta <pre> <address>C/Sierpe Nº1 <br> 47002
permite Valladolid<br>
respetar la forma </address>
en la que
se edito
el documento html.</pre>
4.5- LINEA HORIZONTAL Y EL

COLOR EN HTML
Para insertar una línea horizontal tenemos que utilizar
la etiqueta <hr>. El resultado final difiere respecto a
grosor entre verlo en Netscape y verlo en Internet
• <tt>: para escribir con tipo de letra de paso fijo Explorer.
(estilo teletipo). La etiqueta <hr> presenta los siguientes atributos:
ejemplo12: 1. color: para establecer el color de la línea. Los
valores para los colores más frecuentes se pueden
Ejemplo: <tt>Tipo de letra de paso fijo asignar a través de su nombre en inglés:
(estilo teletipo) utilizando la etiqueta
<tt>.</tt>
Nombre Color
aqua
black
blue
fuchsia
gray
green
lime
maroon
navy
olive
purple
red
silver
teal
white
5-FORMATO DE TEXTO
yellow
Y en el caso de querer otra combinación de color Vamos a ver de que etiquetas disponemos para poder
debemos utilizar valores RGB. RGB son las abreviaruras poner el texto en negrita, itálica...
de Red (rojo), Green (verde) y Blue (azul), es decir, que • <strong>: por medio de esta etiqueta resaltamos
para conseguir otro color debemos mezclar cantidades
el texto incluido en ella. No es lo mismo que poner
de verde, rojo y azul.
en negrita, aunque el resultado sea muy similar en
Esas cantidades se han de indicar en numeración algunos navegadores.
hexadecimal:
ejemplo01:
1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F.
Los valores los daremos en este formato: Ejemplo: <strong>Texto resaltado
utilizando la etiqueta
#RRGGBB <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: número entero de pixels o tanto por ciento

para asignar el grosor de la línea.
3. width: número de pixels o tanto por ciento para
asignar la anchura, es decir, la longitud de lado a
lado del navegador.
• <b>: para poner el texto en negrita.
ejemplo14:
ejemplo02:
<p>Podemos modificar su color, tamaño y
anchura: Ejemplo: <b>Texto en negrita utilizando
<hr color="red"> la etiqueta <b></b>
<hr size=6>
<hr width=50%>
<hr noshade>
</p>
• <em>: texto enfatizado.

• <u>: texto subrayado.
ejemplo03:
• <i>: texto tachado.
Ejemplo: <em>Texto enfatizado utilizando • <blink>: sólo funciona en el navegador Netscape.
la etiqueta <em></em> 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 itálica.
ejemplo04:
Ejemplo: <i>Texto en italic utilizando la

etiqueta <i></i>
• <sup>: para hacer superíndices.

• <sub>: para hacer subíndices.
• <big>: para aumentar el tamaño de la letra.
• <small>: para disminuir el tamaño de la letra.
ejemplo06:
<p>Letra superíndice utilizando <sup>: E

= mc<sup>2</sup></p>
<p>Letra subíndice utilizando <sub>:
a<sub>i, j</sub> =
b<sub>i, j</sub>+ 1</p> mediante valores RGB.
<big>Aumentamos el tamaño de la letra por ejemplo07:

medio de <big>.</big><br>
<small>Disminuimos el tamaño utilizando Ejemplo: <font face="Comic Sans
<small>.</small><br> MS,arial,verdana">Este texto tiene otra
tipografía</font><br>
<font size="+1">Aumentamos 1 nivel mediante
+1</font><br>
<font size="5">Este texto es más
grande</font><br>
<font color ="red">Color en rojo</font><br>
<font color ="#339966">Color en verde
turquesa</font>
5.1- COLOR, TAMAÑO Y TIPO DE

LETRA
Este tipo de formatos son controlados actualmente
mediante hojas de estilo, las cuales veremos más
adelante.
La forma clásica de definir el color, tamaño y tipo del
letra de un texto determinado es a través de la etiqueta
<font> y su cierre correspondiente. Dentro de esta
etiqueta especificaremos los atributos correspondientes a
cada uno de los parámetros 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 tamaño de letra. El tamaño se
puede asignar de manera absoluta (número entero de
1 a 7 como máximo) o de manera relativa con
respecto al texto mostrado precedentemente
(estableciendo el número 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 tamaño de letra, es decir, si anteriormente estábamos
escribiendo en un nivel 3, pasaremos ahora a un nivel 5.
El tamaño que veremos en pantalla dependerá de la
definición y del tamaño de fuente elegido por el usuario
en el navegador. Debido a esto se suelen emplear las
hojas de estilo en cascada (las cuales veremos más
adelante) para llevar a cabo una prefijación.
• color: este atributo define el color del texto. Su valor
puede ser asignado utilizando el nombre del color en
inglés para los colores más frecuentes, o bien,
6-LISTAS <li type="square">"square"</li>

</ul>
Las listas sirven para citar, numerar y definir
elementos. También son utilizadas para desplazar el
comienzo de línea hacia la derecha. <ul compact type="square">
Tenemos tres tipos de listas: <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
través 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 viñeta de las listas desordenadas se
sustituye por ordenaciones (alfabéticas o numéricas).
La numeración se establece automáticamente.
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>,
<li>Tercer elemento.</li>
podemos utilizar el atributo type para cambiar el tipo de
viñeta de todos los elementos de la lista. En el caso de </ol>
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 viñeta es un círculo negro.
• disc: la viñeta es una circunferencia negra.

• square: la viñeta es un cuadrado.
También disponemos del atributo compact, el cual nos

permite compactar el espacio existente entre el texto y
la viñeta. Este atributo no requiere valores.
ejemplo02:
<ul>
<li type="disc">"disc"</li>
<li type="circle">"circle"</li>
Utilizando el atributo type podemos especificar el tipo

de numeración empleado eligiendo entre números (1, 2,
3...), letras (a, b, c...) y sus mayúsculas (A, B, C...) y
números romanos en mayúsculas (I, II, III...) y
minúsculas (i, ii, iii...). Los valores son:
• 1: para ordenar por números.
ejemplo04:
<ol type= "1">

</ol>
• i: por números romanos.

• I: por números romanos en mayúsculas.
ejemplo06:
<ol type= "i">

</ol>
<ol type= "I">
• a: por letras. <li>Segundo elemento.</li>
• A: por letras mayúsculas. <li>Tercer elemento.</li>
ejemplo05: </ol>
<ol type= "a">

</ol>
<ol type= "A">
</ol>
Para indicar el número 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
número entero tanto para los números como para las
letras o los números romanos, ya que el navegador se
encarga de hacer la traducción del número al carácter
correspondiente. Por defecto el valor es 1.
ejemplo07:
<ol start="8" type="I"> elementos seguido de su definición correspondiente. La

etiqueta principal es <dl> (definition list), y las etiquetas
<li>He puesto que start sea igual a 8.</li> de elemento y su definición son <dt> (definition term) y
<li>vemos que luego continua por sí <dd> (definition definition) respectivamente.
sólo.</li> La etiqueta <dd> desplaza la línea hacia la izquierda,
<li>demostrado.</li> 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 numeración de la lista a partir de un

ítem, utilizamos el atributo value de la etiqueta del
elemento en cuestión, 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>
</ol> 6.4- ANIDAR LISTAS
Podemos crear listas dentro de otras listas, es decir,
anidar listas.
ejemplo10:
<dl>
<dt>España:<dd>Equipos españoles de
fútbol.
<ul>
<li>Real Madrid</li>
<ol>
<li value="7">
Raúl</li>
<li>Figo</li>
</ol>
<li>Valladolid</li>
</ul>
<dt>Alemania:<dd>Equipo
6.3- LISTAS DE DEFINICIÓN. s alemanes de
En este tipo de lista se muestra cada uno de los
ol.
fútb
7-ENLACES
<ul> HTML es un lenguaje para hipertexto, es decir,
<li>Bayer de Munich</li> enlaces. Un enlace o link es una zona de texto o
imagen que si son seleccionados nos trasladan a otro
<li>Borusia Dortmund</li> documento de hipertexto o a otra posición dentro del
</ul> documento actual.
Para crear un enlace hay que utilizar la etiqueta <a>.
</dl>
Todo lo que encerremos entre <a> y </a>, ya sea texto
o imágenes, 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 imágenes estarán rodeadas por un borde del
mismo color que el del texto del enlace. Este color
dependerá de la configuración que tenga el
usuario en su navegador.
2. Al pulsar sobre el enlace, seremos enviados hacia
donde apunte el enlace.
El enlace en la página normalmente aparecerá
subrayado y en color azul, y al deslizar el puntero del
ratón sobre él cambiará su forma original
transformándose por regla general en una mano con el
dedo índice extendido.
Para indicarle la dirección utilizamos el atributo href y
le asignamos la dirección entre comillas dobles (“). La
dirección estará en formato URL (Uniform Resource
Locator).
La sintaxis general de un enlace es:
<a href= “dirección”>contenido</a>
Siendo el contenido un texto o imagen que será la
parte activa de la página donde deberemos pulsar para
acceder al enlace.
7.1- DIRECCIÓN URL

A través de una URL podemos indicar tanto una
dirección de Internet como un servicio que tenga el
servidor al que corresponde la dirección.
El formato es:
servicio://maquina:puerto/ruta/fichero/fi
chero@usuario
El servicio puede ser:
• http: para páginas web.
• https: es una innovación sobre el anterior, que

nos deja acceder a servidores que nos ofrecen el
uso de técnicas de encriptación para proteger
los datos que intercambiemos con él de terceras
personas.
• ftp: para transmitir ficheros desde servidores de
ftp anónimo, y utilizando la @ podemos acceder a
servidores privados.
• mailto: para poder mandar un mensaje e-mail.
• news: para acceder a foros de discusión. 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 dirección de la máquina puede ser indicada
también a través de su dirección IP.
La ruta es una serie de directorios separados por la
barra “/” donde indicamos el camino hacia el archivo
que vamos a utilizar. Cuando queremos acceder a un 

fichero situado en la misma máquina que la página 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 dirección e-mail:
<a
href="MAILTO:gorka@usuarios.retecal.es">gorka@
usuarios.retecal.es</a><br>
Enlace con news:
También podemos acceder a anclas situadas en
<a
documentos remotos. Para ello añadimos el nombre del
href="news://news.ibernet.es/es.comp.demos">ne
ancla al URL:
ws</a><br>
<a href="Enlaces.html#abajo">Ir abajo</a>
7.3- ENLACES LOCALES

A través de estos enlaces relacionamos los
distintos documentos html que componen nuestro
sitio web.
Para ello en la dirección 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 podría 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 página web:
7.2- ENLACES INTERNOS <a href="ejemplo01.html">Ir al Ejemplo

10</a><br>
Son los enlaces que apuntan a un lugar diferente Enlace con un archivo comprimido (archivo
dentro de la misma página. Para crearlos
zip):
necesitamos, aparte del enlace origen, un segundo
enlace que será colocado en el destino y que <a href="archivos/ejemplo.zip">archivo.zip</a>
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 name="abajo"></a>
Este ancla lo situaremos dentro del código 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> 

height=100 width=160 alt="Ordenador

saltando"><br>
<img src="../imagenes/happysmclr.gif"
border="5">
hspace="75" vspace="50">
8-IMÁGENES
Para hacer que aparezcan imágenes 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 descripción 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. • align
Una vez cargada la imagen si colocamos el puntero Mediante este atributo alineamos la imagen con
del ratón sobre ella también se nos mostrará la respecto al texto. Este atributo puede tener estos
descripción escrita en este atributo. valores:
• height y width ? top: coloca el punto más alto de la imagen

coincidiendo con el más alto de la línea de
Definen la altura (height) y anchura (width) en texto actual.
pixels de la imagen.
? middle: alinea el punto medio (en altura)
• border de la imagen con la base del texto.
Define el tamaño en pixels del cuadro que rodea a la ? bottom: alinea el punto más bajo de la
imagen. imagen con la base del texto.
En caso de que no queramos que aparezca el ? left: coloca la imagen a la izquierda del
borde, damos el valor cero (“0”).
texto.
• atributos vspace y hspace
? right: a la derecha del texto.
Sirven para indicar el espacio libre vertical (vspace)
Si se quiere interrumpir el proceso de rellenado
y horizontal (hspace), en pixeles, que tiene que del texto a los lados de la imagen, para que salte
colocarse entre la imagen y los otros elementos que la hasta debajo de ella, es decir, dejar un espacio en
rodean, como texto, imágenes... blanco parcialmente, se pueden emplear las siguientes
extensiones de la etiqueta <br>:
• lowsrc
? <br clear =left> Busca el primer
Con este atributo indicamos un archivo de la imagen
que está en baja resolución, de tal forma que cuando margen libre (clear) a la izquierda.
el navegador detecta este atributo primero descarga y
? <br clear = right> Busca el primer
muestra la imagen de baja resolución y luego descarga
la imagen con la resolución correcta. margen libre a la derecha.
ejemplo01: ? <br clear =all> Busca el primer

margen libre a ambos lados.
alt="Ordenador saltando"><br> ejemplo02:
<img src="../imagenes/happysmclr.gif" <dl>
<dt><VAR>TOP</VAR><dd> Lo mejor es utilizar como regla general

siempre imágenes GIF, salvo cuando necesitemos
<img src="../imagenes/happysmclr.gif" dar mayor calidad a nuestras imágenes, en cuyo
alt="Ordenador" align="top" caso utilizaremos JPEG.
border="3">
8.2- IMÁGENES 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
<img src="../imagenes/happysmclr.gif" cualquier tipo de enlace.
ejemplo03:
alt="Ordenador" align="middle"
<u>Ejemplo:</u>
border="3">
<a
Texto. href="mailto:gorka@usuarios.retecal.es"><img
<dt><VAR>BOTTOM</VAR><dd> 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- ELECCIÓN DE FORMATO

GRÁFICO
Normalmente se opta entre imágenes GIF o
JPEG. Las imágenes en JPEG presentan más calidad
y su tamaño es menor, lo que se traduce en menor
tiempo de transmisión , si bien el mecanismo de
descompresión ralentiza la parte final de la transferencia.
Las GIF son reconocidas por todos los
navegadores y presentan ventajas como
transparencias y movimiento.
9-TABLAS La etiqueta
atributos:
principal dispone de los siguientes
• border: Donde se establece el valor en pixels del

Una tabla es un conjunto de celdas organizadas
borde de la tabla. Si le asignamos el valor cero
dentro de las cuales podemos alojar distintos tipos de
no habrá borde.
contenidos.
• bordercolor: color del borde.
Para crearlas utilizamos la etiqueta principal <table>
junto con su cierre correspondediente </table>. Dentro • background: permite colocar un fondo para la
de esta etiqueta vamos creando las distintas filas por tabla a partir de un enlace a una imagen.
medio de la etiqueta <tr> y </tr>, y en cada fila las
celdas a través de la etiqueta <td> y </td>. Las celdas • bgcolor: color del fondo de la tabla.
de cada fila se ordenan automáticamente de
• cellspacing: número de pixels entre celdas.
izquierda a derecha. Dentro de estas etiquetas de
celda es donde colocaremos nuestro contenido. • cellpadding: pixels entre el borde de la celda
Si queremos poner un título a la tabla utilizamos la y su contenido.
etiqueta <caption> inmediatamente después de la
• align: alinea la tabla. Sus valores son: center,
etiqueta principal <table>.
right o left.
ejemplo01: • width: anchura de la tabla en pixels o en
porcentaje (el 100% es el máximo del que dispone
<table border="1"> el navegador).
<caption><font size="4" • height: altura de la tabla en pixels o en
color="red">Título de la tabla</font>
porcentaje.
</caption>
ejemplo02:
<tr>
<td>celda 1,1</td> <table border="4" bordercolor= "blue"
background="../imagenes/fondos/fondo.jpg"
<td>celda 1,2</td> align="center" width="650" cellspacing="15"
<td>celda 1,3</td> height="400" cellpadding="15">
</tr> <tr>
<tr> <td>celda 1,1</td>
<td>celda 2,1</td> <td>celda 1,2</td>
<td>celda 2,3</td> </tr>
</tr> <tr>
<tr> <td>celda 2,1</td>
</tr> <tr>
</table> <td>celda 3,1</td>

<td>celda 3,2</td>
<td>celda 3,3</td>
</tr>
</table>
9.1- ATRIBUTOS DE <TABLE>
9.2- ATRIBUTOS DE <tr> • bgcolor: color del fondo de la tabla.

Los utilizamos para que los cambios afecten a toda
las celdas de la fila. • background: permite colocar un fondo para la
• align: alineación que afecta a todas las celdas celda a partir de un enlace a una imagen.
de la fila. Sus valores son: center, right o • height: altura de la celda en pixels o en
left. porcentaje.
• valign: alinea el contenido de las celdas • width: anchura de la celda en pixels o en
verticalmente arriba (top), abajo (bottom) o porcentaje.
centro (middle).
• colspan: expande una celda horizontalmente
• bgcolor: color del interior de la línea de celdas. (con la celda de la derecha).
• bordercolor: color del borde de la línea de • rowspan: expande una celda verticalmente
celdas. (con la celda inferior).
ejemplo03: ejemplo04:
<table border="1" width="500" <table border="1" width="500"

cellpadding="15"> cellpadding="15">
<tr align="right" valign="top" <tr>
bgcolor="green" bordercolor="pink">
<td align="right"
<td>celda 1,1</td> bgcolor="red">celda
1,1</td>
<td>celda 1,2</td>
<td align="center"
<td>celda 1,3</td>
bgcolor="blue">celda
</tr> 1,2</td>
<tr align="center" valign="middle" <td align="left"
bgcolor="blue" bgcolor="green">celda
1,3</td>
bordercolor ="green">
</tr>
<td>celda 2,1</td>
<tr>
<td>celda 2,2</td>
<td background=
<td>celda 2,3</td>
"imagenes/penguin_type_md_wht.gif"
</tr> width="60" height="70">
<tr align="left" valign="bottom" <font color="red" size="4">celda
bgcolor="red" bordercolor="yellow"> 2,1</font></td>
</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> </tr>
Nos permite cambiar características a una celda en </table>

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).
9.4- ANIDAR TABLAS

Las tablas al igual que otros objetos de html permiten
10-FORMULARIOS
la anidación.
Los formularios nos sirven para poder
ejemplo05: intercambiar información con nuestro visitante o
usuario. Los datos que el usuario introduce en el
<table border="2" cellpadding="10" formulario son enviados por correo electrónico al
cellspacint="10"> administrador del formulario o bien a un
programa que se encarga de procesarlo
<caption>TABLAS ANIDADAS</CAPTION> automáticamente.
<tr> Para la creación de un formulario utilizamos la
<td>Celda 1,1</td> etiqueta <form> y la correspondiente de cierre </form>.
Entre estas dos etiquetas introducimos los
botones y campos que conforman el formulario.
<td>Celda 1,2</td> La etiqueta <form> debe ser contenido en “body”,
</tr> “dd” y “td”. Pero nunca deber ser contenido en
“button”, “dl”, “form” y “table”.
<tr>
La etiqueta <form> tiene los siguientes atributos:
<td>Celda 2,1</td>
<td> • action: para definir qué hacer con el contenido
del formulario (enviarlo por e-mail o enviarlo a
<table border="2" un script o programa que procese su contenido).
background="../imagenes/fondos/416-
sbyellow03.jpg"> • 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: envía los datos como parte de la
entrada estándar.
<tr>
2. get: añade los argumentos del formulario al
<td>Celda 1,1 - tabla 2</td> URL recogido en action (usando como
<td>Celda 1,2 - tabla 2</td> separador ?), lo que da lugar a que el
programa los reciba como parámetros de
</tr> entrada.
<tr> El método get es el utilizado por los navegadores
<td>Celda 2,1 - tabla 2</td> para solicitar una página al servidor. En el momento de
enviar el formulario se compone una URL especial
<td>Celda 2,2 - tabla 2</td> formada por la referencia al programa y los parámetros
</tr> leídos en el formulario precedidos por el carácter
interrogación (?). Los distintos parámetros se presentan
</table> en la forma nombre=valor y se separa cada par por el
</td> carácter ampersand (&).
</tr> En cambio, en el método post el navegador contacta

con el servidor y envía datos al margen de la URL. Por lo
<tr> tanto la llamada es más limpia y lo más importante: no
<td>Celda 3,1</td> tenemos los parámetros a la vista , lo cual es lo
mejor cuando se trata de datos que no queremos que
<td>Celda 3,2</td> sean visibles.
</tr> Salvo que se diga lo contrario por ahora utilizaremos
el valor post.
</table>
• enctype: se ha de utilizar en el caso de que
enviemos el formulario por correo electrónico. El
valor que le damos es “text/plain”.
Ejemplo:
<FORM ACTION="MAILTO:gorkaccu@msn.com"
method="post" enctype="text/plain"></form>
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 contraseñas
(passwords).
10.1.3- TEXTO LARGO

Para obtener una caja de texto con varias líneas se
ha de utilizar la etiqueta <textarea> con su cierre
correspondiente </textarea>, y los atributos name, rows
(para definir el número de líneas) y cols (para definir
el número de columnas).
También 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 también de otros atributos que no son
imprescindibles: <p>Password: <input type="password" name=
"password"></p>
• size: para asignar en pixels el tamaño visible
de la caja de texto. <textarea name="comentario" rows="10"
cols="40">Escribe tu comentario...
• maxlength: para asignar el tamaño máximo de
caracteres que va a admitir la caja de texto. </textarea>
• value: para asignar un valor predefinido, es </form>

decir, para que cuando se cargue el formulario
aparezca ya escrito el valor que hemos asignado a
value.
ejemplo02:
<p>Tamaño cambiado: <input type="text"
name="nombre" size="50"></p>
<p>Sólo deja 5 caracteres: <input type="text"
name="nombre" maxlength="5"></p>
<p>Value: <input type="text" name="nombre"
value="Michael Jordan"></p>
</form>
</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 <option>Zidane</option>
Son los menús desplegables que nos permiten <option selected>Figo</option>
escoger una (o varias) de las opciones que nos
proponen. <option>Roberto Carlos</option>
Para crearlas utilizamos la etiqueta <select> y su </select>

correspondiente cierre. También asignaremos un nombre </p>
al atributo name y cada opción que queramos que
aparezca deberá ser incluida en una línea precedida de </form>
la etiqueta <option>.
También disponemos de los siguientes atributos:
• size: para indicar el número de valores
mostrados o visibles de la lista. El resto se pueden
ver utilizando la barra lateral de desplazamiento
(scrollbar).
• multiple: para permitir seleccionar varios
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 numérico. Dicho valor
será el enviado al programa o correo electrónico si
el usuario selecciona esa opción.
ejemplo04:
<SELECT NAME="jugadores">
<option>Zidane</option>
<option>Figo</option>
<option>Roberto Carlos</option>
</select>
<p><var><b>SIZE="2"</var></b> 10.3- BOTONES DE RADIO
<SELECT NAME="jugadores" size="2" align="top"> Son otra alternativa a la hora de plantear una elección.
Mediante estos botones obligamos al usuario a
seleccionar una sola opción de entre las que se
<option>Zidane</option> proponen.
<option>Figo</option> Presenta la misma sintaxis que las cajas de texto, es

decir, la etiqueta <input> y los atributos type, name y
<option>Roberto Carlos</option> value. La diferencia reside en que el valor de type
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 opción elegida del
resto mediante el atributo value, es decir, cada opción
ha de tener un valor (value) distinto.
Es importante saber que la etiqueta <input

type=”radio”> tan sólo crea una casilla pinchable en la
página pero no crea texto, por lo tanto, tenemos que
encargarnos de crear el texto y los saltos de línea
correspondientes.
Podemos preseleccionar por defecto una de las
opciones utilizando el atributo checked.
ejemplo05:
<input type="radio" name="jugadores"
value="1">Raúl
<br>
value="2">Zidane
<br>
La información que se enviará será:
value="3">Figo valor de name = valor de value
<br> Por ejemplo, si seleccionamos la opción Figo la

información que se enviará por e-mail será:
value="4">Roberto Carlos jugadores = 3
<br><br>
Atributo <var><b>CHECKED</var></b> en la y si seleccionamos la opción Zidane:
segunda opción:<br><br>
jugadores = 2

value="1">Raúl
10.4- CAJAS DE VALIDACIÓN
<br>
<input type="radio" name="jugadores" value="2" Las cajas de validación o checkbox, son cajas que
checked>Zidane pueden ser activadas o desactivadas por el usuario por
medio de un click con el ratón.
<br>
La sintaxis es la misma que la de los botones de radio
<input type="radio" name="jugadores" salvo en el valor del atributo type que ahora es
value="3">Figo “checkbox”.
<br> Podemos activar por defecto la caja utilizando el
atributo checked.
value="4">Roberto Carlos
</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><
br><br> sirve para borrar el formulario por completo en el

caso de que el usuario desee rehacerlo desde el
<input type="checkbox" name="futbol" principio.
checked>Me gusta el fútbol
La sintaxis es lo mismo que en los botones normales
</form> salvo el valor del atributo type que ahora es “submit”
para el botón de envío, y “reset” para el botón de
borrado.
ejemplo08:
<FORM ACTION="MAILTO:pepito@msn.com"
<input type="submit" value="Enviar">
<input type="reset" value="Borrar">
</form>
La información que llegará a nuestro correo o

programa será del tipo:
valor de name = on (u off si está desactivada)
En el ejemplo anterior si activamos la casilla la

información que llegará al correo espacificado será:
futbol = on
10.5- BOTONES NORMALES

Para crearlos utilizamos la etiqueta <input> y los 10.7- DATOS OCULTOS
atributos type = “button” y value.
Además de los datos enviados por el usuario podemos
El atributo value representa el texto que aparecerá enviar datos establecidos por nosotros y que
escrito en el botón. permanecerán ocultos al usuario (a menos que el
usuario solicite en el navegador ver el código fuente).
ejemplo07:
Para ello utilizamos la etiqueta <input> y el atributo
<FORM ACTION="MAILTO:pepito@msn.com" type con valor igual a “hidden” (oculto).
Ejemplo:
<input type="button" value="Texto escrito en
el botón"> <input type=”hidden” name=”sitioweb”
</form> value=”www.google.com”>
Esta etiqueta enviará al correo o programa

especificado la información:
sitioweb = www.google.com
Utilizando lenguajes como JavaScript podemos definir
acciones a tomar cuando un visitante pulse el botón de
una página web.
10.6- BOTONES DE ENVIO Y

BORRADO
El botón de envío es imprescindible porque es el
encargado de dar por terminado el proceso de
relleno del formulario y hacerlo llegar a su
destino.
El botón de borrar, en cambio, no es imprescindible y
11-FRAMES frames"</p></noframes>
</frameset>
Los frames nos sirven para dividir la ventana del </html>
navegador en diferentes áreas, cada una de las
cuales es un archivo html distinto e
independiente .
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
poniéndoles 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 partición en columnas o
el atributo rows si la queremos en filas.
En el atributo cols o rows colocamos entre comillas el

número de particiones que deseamos realizar, indicando
de paso el tamaño que va a asignarse a cada una. Los
formatos de tamaño son los siguientes: ejemplo02
• Porcentajes: porcentaje referido al espacio total <html>
disponible.
<head>
• Absolutos: mediante un número especificando el
<title>ejemplo02</title>
tamaño en pixels.
</head>
• Sobre el espacio sobrante: colocando un
asterisco (*) indicamos que queremos todo el <frameset cols="30%,70%">
espacio sobrante. Si ponemos el asterisco en
<frame src="pagina1.htm">
varios marcos se repartirán el espacio
equitativamente y si queremos que uno de los <frame src= "pagina2.htm">
marcos sea mayor lo hacemos poniendo un
número delante del asterisco, de tal forma que si <noframes><p>No podrás ver esta página si el
ponemos 3* ese marco será tres veces mayor que navegador no soporta frames"</p>
el que tenga tan sólo el asterisco. </noframes>
Estos tres formatos se pueden combinar. </frameset>
Mediante la etiqueta <frame> y el atributo src </html>
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:
<frame src=”frame1.html”>
En este caso estamos indicando que el frame que

estamos definiendo debe mostrar la página 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">
<noframes><p>No podrás ver esta
página si el navegador no soporta
ejemplo03: son páginas html independientes guardadas en el mismo

directorio que el archivo de definición de frames. Si
Vamos a ver otro ejemplo pero esta vez vamos a partir estuvieran guardados en otro directorio diferente
desde el principio, es decir, desde lo que queremos tendríamos que escribir la ruta junto con el nombre del
conseguir: archivo.
11.1- FRAMES ANIDADOS
20%
No se puede hacer una partición 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%,*">
<frameset rows="60%,*">
70 pixels
Para conseguir esta división de marcos editamos el
siguiente código: </frameset>
<html> <frameset rows="80%, *">
<head> <frame src="anidado4.htm">
<title>ejemplo03</title> <frame src="anidado5.htm">

</frameset>
</head> </frameset>
<frameset rows =”20%, *, 70”> </frameset>
<frame src=”pag1.htm”> </html>
<frame src=”pag2.htm”>
<frame src=”pag3.htm”>
</frameset>
</html>
11.2- QUITAR EL BORDE Y EL

ESPACIO ENTRE FRAMES
Los navegadores cuando trabajan con marcos
automáticamente dibujan un borde de separación
entre los marcos. En el caso de que no queramos que
aparezca utilizaremos el atributo frameborder=”0” en la
El título (title) de la definición de frames es el que etiqueta <frameset> (para que afecte a todos los
hereda toda la página web. frames). Aunque eliminemos el borde el navegador deja
también un hueco entre los frames, para eliminarlo
Las páginas “pag1.htm” , “pag2.htm” y “pag3.htm”
utilizamos los atributos framespacing=”0” y 1. Dar un nombre al frame que queremos actualizar
border=”0” en <frameset>. Por ejemplo vamos a mediante el atributo name en la etiqueta <frame>.
eliminar los bordes y el hueco del ejemplo anterior:
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:
En este ejemplo tenemos dos enlaces. El Enlace 1 no lo
<html> hemos redireccionado con lo cual si hacemos clic en él se
<head> cargará la nueva página en el frame donde está situado
el enlace. En cambio, el Enlace 2 sí está redireccionado y
<title>ejemplo05</title> si hacemos clic en él la nueva página se cargará en el
frame principal.
</head>
<frameset rows="20%,*" frameborder="0"
framespacing="0" border="0"> <html>
<frame src="anidado1.htm"> <head>
<frameset cols="20%,*"> <title>ejemplo06</title>
<frameset rows="60%,*"> </head>
<frame <frameset rows="100,*,14%" frameborder="0"
src="anidado2.htm"> framespacing="0" border="0">
<frame <frame src="pag1.htm">
src="anidado3.htm">
<frame src="pag2.htm"
</frameset> name="principal">
<frameset rows="80%, *"> <frame src="pag3.htm">
<frame </frameset>
src="anidado4.htm">
</html>
<frame
src="anidado5.htm">
</frameset> Y en el archivo “pag1.htm” tenemos el siguiente
código:
</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 páginas actualizan solamente el
frame donde está colocada esa página y enlace.
Lo lógico es que al pulsar un enlace de un frame que
sirve de barra de navegación actualicemos el frame que
muestra la página principal. Para ello tenemos que hacer
dos cosas:
11.4- VALORES DEL ATRIBUTO

TARGET
ejemplo07:
Para ver los distintos valores vamos a partir de esta

página:
Si hacemos clic en el Enlace 1 veremos que se carga

la página del enlace en ese mismo marco:
En la parte inferior de esta página 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 código de la página es el siguiente:
<html>
<head>
</head>
<frameset rows="100,*,20%" frameborder="0"
framespacing="0" border="0">
<frame src="pag2b.htm"
name="principal">
• _top: elimina todos los marcos existentes y carga
<frame src="pag3.htm"> la página a pantalla completa.
</frameset>
</html>
Y el código 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>
| • _self: se actualiza el marco donde está situado el
</body> enlace. Es el valor por defecto.
</html>
El atributo target puede tener los siguientes valores:

• _blank: muestra la nueva página en una ventana
nueva.
11.5- ATRIBUTOS DE <FRAMESET>

• _parent: el enlace se actualiza sobre su padre o • cols: distribución de marcos verticalmente.
sobre la ventana que estamos trabajando, si es • rows: distribución de marcos horizontalmente.
que no hay un padre.
• border:tamaño 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: número de pixels de anchura de la

línea de separación de los frames.
11.6- ATRIBUTOS DE <FRAME>

• scr: para indicar el archivo que contiene el marco.
• name: para dar nombre al marco y así puedas

dirigir los enlaces hacia él.
• marginwidth: número de pixels de separación
entre los bordes verticales del marco y su
contenido.
• marginheight: igual que el anterior pero referido
a los márgenes verticales.
• scrolling: para que aparezca o no una barra de
desplazamiento (scrollbar) en el marco. Sus
valores pueden ser:
? yes: siempre aparecerán las barras.
? no: no saldrán nunca.
? auto: sólo saldrán si son necesarias. Es el

valor por defecto.
y en Netscape:
? noresize: atributo sin valores que sirve
para indicar que el marco no se puede
redimensionar. Por defecto los marcos se
pueden redimensionar colocando el ratón
sobre el borde del marco y arrastrando.
• frameborder .
• bordercolor .
Algunos de estos atributos producen resultados

diferentes utilizando un navegador u otro.
ejemplo08:
<html>
<head><title>Ejemplo 14.8</title></head>
<frameset rows="20%,*" border="15"
bordercolor="blue">
A través de estas imágenes podemos ver diferencias
<frameset cols="20%,*">
entre lo que nos muestra un navegador y otro.
<frameset rows="60%,*"> Observamos que en Internet Explorer sí que muestra la
barra de desplazamiento tal y como hemos establecido
<frame src="anidado2.htm" en el código, mientras que en Netscape no la muestra.
scrolling="yes" También vemos diferencias de interpretación con el
bordercolor="red"> atributo bordercolor.
</frameset>
<frameset rows="80%, *">
<frame src="anidado4.htm"
marginwidth="200"
marginheight="100"
noresize>
</frameset>
</frameset>
</frameset>
</html>
En el navegador Interntet Explorer el resultado es el

siguiente:
12-SONIDO document.write('<EMBED
SRC="/sonidos/canyon.mid" WIDTH=1
HEIGHT=1 HIDDEN="true"
Se puede escuchar sonido o música desde el AUTOSTART="true" LOOP="true">');
navegador.
</SCRIPT>
Los formatos de audio estándar de los
navegadores son los archivos WAV y los MID. Para Este código funcionaría de la siguiente forma
poder escuchar otros formatos necesitamos un plug-in. dependiendo del navegador que utilicemos:
• Explorer: el navegador leería la etiqueta
12.1- SONIDO ACTIVADO POR EL <bgsound> y ejecutaría el archivo de
USUARIO sonido. Luego leería el script y no entraría
en el sentencia if porque no es Netscape.
El usuario decide si quiere escuchar el sonido. En caso • Netscape: el navegador no puede
afirmativo tan sólo ha de pulsar en un enlace o link.
interpretar la etiqueta <bgsound>, y pasaría
Para ello utilizamos la etiqueta <a> y el atributo href a leer el script. En el script sí que cumple la
en el que indicaremos la ruta y nombre del archivo de condición de la sentencia if, por lo tanto
audio. ejecutará la etiqueta <embed>.
Podemos utilizar el atributo target= “_blank” para
que al pinchar el usuario en el enlace se abra la 12.3- ATRIBUTOS DE <BGSOUND>
aplicación que el usuario tenga asociada con el tipo de
fichero.
En esta etiqueta utilizamos el atributo src para indicar
ejemplo01: la ruta y nombre del archivo a reproducir, y el atributo
loop mediante el cual indicamos el número de veces que
<html> se ha de repetir el sonido. Si asignamos el valor
“infinite” al atributo loop el sonido se reproducirá
<head> indefinidamente.
</head> 12.4- ATRIBUTOS DE <EMBED>
<body> • src: ruta y nombre del archivo a reproducir.
<a href="../sonidos/SOUND1.WAV">Pulsa para • width y height: para indicar el tamaño del
escuchar</a> reproductor. Son anchura y altura
<br><br> respectivamente.
<p>Con <code><b>target="_blank"</b></code> al • autostart: para indicar si se arranca

pinchar el usuario el enlace, automáticamente la reproducción. Los valores son
“true” (para que arranque automáticamente) o
se lanzará la aplicación que “false” (para que no).
<br>tenga asociada con el tipo de
• loop: para que reproduzca ininterrumpidamente el
fichero:
archivo de sonido (valor “true”), o no (valor
<a href="../sonidos/SOUND1.WAV" “false”).
target="_blank">Pulsa para escuchar</a></p>
• hidden: para ocultar (valor “true”), o no (valor
</body> “false”) el reproductor.
</html>
ejemplo02:
<html>
12.2- SONIDO DE FONDO <head>

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

siguiente:</P>
13-MAPAS
<PRE><BGSOUND SRC="/sonidos/canyon.mid" Consisten en incluir varios enlaces dentro de una
LOOP="infinite"> misma imagen. Para ello los definimos por medio de
<SCRIPT LANGUAGE="Javascript"> figuras geométricas.
if (navigator.appName=="Netscape") Para hacer un mapa de imagen tenemos primero que

incluir la imagen que vamos a utilizar dentro del <body>
document.write('<EMBED de nuestro código a través de la etiqueta <img>.
SRC="/sonidos/canyon.mid" Posteriormente debemos de delimitar la imagen en
WIDTH=20 HEIGHT=30 HIDDEN="true" figuras geométricas dentro de la etiqueta <map>.
AUTOSTART="true" LOOP="true">'); En la etiqueta <map> podemos utilizar el atributo name
</SCRIPT></PRE> para definir el nombre de la definición del mapa. Dentro
de la directiva <map> hemos de introducir cada una de
las areas las cuales se indican a través de la etiqueta
<BGSOUND SRC="../sonidos/canyon.mid" <area>.
LOOP="infinite">
<SCRIPT LANGUAGE="Javascript"> 13.1- ATRIBUTOS DE <AREA>
if (navigator.appName=="Netscape") • alt: para indicar el texto que se mostrará cuando
document.write('<EMBED situemos el ratón en el área. También se mostrará
SRC="../sonidos/canyon.mid" WIDTH=1 ese texto en el caso de que el navegador no
HEIGHT=1 HIDDEN="true" pueda cargar la imagen en cuestión.
AUTOSTART="true" LOOP="true">'); • coords: para definir las coordenadas del área.
</SCRIPT> Cada punto de la imagen se define a través de su
altura (X) y anchura (Y). Siendo la esquina
</body> superior izquierda la posición “0,0”, y la esquina
</html> inferior derecha la posición “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
acción 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:
? rect: área rectangular. Para definirla se

utilizan las coordenadas de los puntos de la
esquina superior izquierda y la esquina
inferior derecha.
<area shape= “rect” coords=
“x1,y1,x2,y2”>
? circle: área circular que se indica con la

coordenada del centro del círculo y el radio.
<area shape= “circle” coods=
“x1,y1,r”>
? poly: es un área poligonal. Para definirlo

hay que indicar todos sus puntos en orden
siguiendo el camino marcado por el
perímetro del polígono.
<area shape= “poly” coords=
“x1,y1,x2,y2,x3,y3,x4,y4>
</td></tr></table>
</body>
</html>
ejemplo01:
En este ejemplo faltaría 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 página 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 imágenes. Pulsa en
cada una de los círculos." border="0"
usemap="#mapa1">
<br>
<font face="Verdana,Arial" size="1">Pulsa en
los círculos para acceder a las
secciones!</font>
14-MARQUESINAS </html>
Son pequeñas ventanas donde vemos un texto

desplazarse.
No todas las versiones de Netscape y Explorer soportan
las marquesinas. Sólo serán implementadas en las
versiones más actuales del Netscape y en la versión 3.0
o superior del Explorer.
La etiqueta básica es <marquee> y su correspondiente
cierre </marquee>. Entre <marquee> y su cierre
escribiremos el texto que queremos que aparezca
desplazándose en la marquesina.
ejemplo01:
<html>
<head>
</head>
<body>
• align: alineamiento respecto al texto que rodea a
<MARQUEE>Texto desplazándose</MARQUEE> la marquesina. Puede ser: arriba (“top”), medio
(“middle”) o abajo (“bottom”).
</body>
</html> • bgcolor: color del fondo de la marquesina. Los
valores son los colores más frecuentes en inglés o
utilizar valores RGB.
ejemplo03:
<MARQUEE BGCOLOR="red">Texto desplazándose 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. • behavior: sirve para indicar el comportamiento el
cual puede ser el que viene por defecto (valor
ejemplo02: “scroll”) con el que el texto vá de un lado a otro
y desaparece, o que el texto se mueva de un lado
<html> a otro y vuelva marcha atrás sin desaparecer
<head> (valor “alternate”).
<title>ejemplo02</title> Con Netscape si aplicamos el valor “alternate” el

texto vá de un lado a otro y vuelve, pero sí que llega a
</head> desaparecer cuando llega a los márgenes.
<body>
ejemplo04:
<MARQUEE WIDTH= “50%” HEIGHT= “80”>Marquesina
con el 50% de la ventana de ancho y 80 píxeles <MARQUEE BEHAVIOR=ALTERNATE>Texto
de alto</MARQUEE> desplazándose alternadamente</MARQUEE>
</body> • direction: dirección del texto. Los valores
pueden ser “left” para que se mueva hacia la

izquierda (valor por defecto) o “right” para que
15-HOJAS DE ESTILO
se mueva hacia la derecha.
Sirven para definir los detalles de visualización
ejemplo05: (tipo y tamaño de letra, márgenes, colores,
aspecto final) de un conjunto de páginas desde un
<MARQUEE DIRECTION="right">Texto desplazándose único fichero. Esto es una gran ventaja en lo que
hacia la derecha</MARQUEE> respecta a tiempo, esfuerzo y reducción de errores.
<MARQUEE DIRECTION="left">Texto desplazándose
hacia la izquierda</MARQUEE> 15.1- <STYLE>
• scrollamount: número de pixels que se Utilizamos un nuevo atributo para las etiquetas de
desplazan en cada avance. Cuanto mayor sea el HTML: style. De esta manera en vez de especificar los
valor mayor será la rapidez de desplazamiento del tradicionales atributos después de la etiqueta, se incluye
texto en la marquesina. un único atributo que comprende todos los elementos
definibles del texto.
ejemplo06:
Este atributo se puede aplicar a cualquier elemento que
<MARQUEE SCROLLAMOUNT="50">Texto avanzando pueda aparecer dentro del cuerpo de un documento
rápido</MARQUEE> (excepto basefont, param y script), y tiene como
posibles valores una lista de declaraciones de estilo,
<MARQUEE SCROLLAMOUNT="3">Texto avanzando separadas por punto y coma.
lento</MARQUEE>
ejemplo01:
• scrolldelay: número de milisegundos que dura
cada movimiento de avance. Cuanto mayor sea <html>
más lento irá.
<head>
ejemplo07:
<MARQUEE SCROLLDELAY="150">Texto avanzando </head>
lento</MARQUEE>
<body>
• loop: número de veces que aparecerá el texto.
<P>Este párrafo es normal</p>
Por defecto es infinito (valor “infinite”).
<P STYLE = "TEXT-INDENT:60"> SANGRÍA DE 60
• hspace: anchura de los márgenes horizontales.
</P>
• vspace: anchura de los márgenes verticales.
<P STYLE = "FONT-FAMILY:SANS-SERIF"> TIPO DE
Ya fuera de la etiqueta <marquee> es posible decidir la LETRA SANS SERIF
fuente o el tipo de letra de la marquesina utilizando la
</P>
etiqueta <font> que ya conocemos.
<H3> CABECERA H3 </H3>
ejemplo08:
<H3 STYLE= "COLOR:GREEN; FONT-SIZE:18PT">
<font face= "impact, arial" color= VERDE Y TAMAÑO = 18
"blue"><MARQUEE SCROLLDELAY="150">Texto </H3>
avanzando lento</MARQUEE>
</body>
<MARQUEE SCROLLDELAY="1">Texto avanzando
rapido</MARQUEE></font> </html>
Pero esto no es muy útil, porque tenemos que
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>
<title>Ejemplo02</title>
<STYLE>/*ESTILO PARA EL PARRAFO*/
P,H6{COLOR:RED; FONT-FAMILY:SANS-SERIF;
FONT-SIZE:18PT}
</STYLE>
</head>
<body>
<P> NUEVO ESTILO PARA EL PÁRRAFO </P> 15.2- ESTILOS MEDIANTE CLASES
<H6>NUEVO ESTILO PARA CABECERA 6</H6> Hay veces que necesitamos que, por ejemplo, un
párrafo (<p>) tenga diferentes estilos. Para cuando
</body>
necesitemos el uso de diferentes versiones de
</html> estilos de un mismo elemento utilizamos las clases.
Para definir una clase se añade un nombre de clase
que queramos al nombre de la etiqueta mediante
En este ejemplo podemos observar: un punto:
• La etiqueta <style> se coloca dentro de la <style>
cabecera del documento.
H4.PRIMERH4{COLOR:BLUE;FONT-SIZE:10PT;TEXT-
• Los comentarios dentro de la etiqueta <style> ALIGN:LEFT}
utilizan la sintaxis:
H4.SEGUNDOH4{COLOR:RED;FONT-SIZE:24PT;TEXT-
/* esto es un comentario */ ALIGN:RIGHT}
• Se pueden aplicar las mismas propiedades a </style>
varias etiquetas distintas. Estas etiquetas han de
Y para aplicarlo utilizamos el atributo class de la
ser separadas por medio de comas (, ). En
etiqueta u elemento:
nuestro ejemplo aplicamos las mismas
propiedades de color, tipo y tamaño de fuente a <H4 CLASS= PRIMERH4> PRIMERA CLASE </H4>
las etiquetas de párrafo (<p>) y a la etiqueta de
encabezado 6 (<h6>), entre las cuales incluímos <H4 CLASS=SEGUNDOH4> SEGUNDA CLASE </H4>
una coma.
ejemplo03:
• Las propiedades se han de escribir entre llaves
({}) y separadas entre sí por medio del <html>
punto y coma (; ). <head>
• Tanto en este ejemplo como en el anterior <title>Ejemplo03</title>
(Ejemplo 17.1 ) podemos ver que para asignar <style>
un valor a una propiedad utilizamos dos
puntos (: ) en lugar de un signo igual. H4.PRIMERH4{COLOR:BLUE;FONT-
SIZE:10PT;TEXT- ALIGN:LEFT}
• Ahora siempre que utilicemos una etiqueta de
H4.SEGUNDOH4{COLOR:RED;FONT-
párrafo o una de encabezado 6 en el <body> del
SIZE:24PT;TEXT- ALIGN:RIGHT}
documento, se aplicarán automáticamente dichas
propiedades de color, tamaño y tipo de fuente. El </style>
resto de propiedades propias de dichas
etiquetas permanecen inmutables: </head>
<body>
<H4 CLASS= PRIMERH4> PRIMERA CLASE </H4>
<br>
<H4 CLASS=SEGUNDOH4> SEGUNDA CLASE </H4>
</body>
</html>
15.3- IDENTIFICADORES
Por medio de identificadores se puede definir el
Y para definir un estilo genérico sin que esté estilo asociado a un elemento concreto.
asociado a ninguna etiqueta en especial
utilizamos la notación punto sin que vaya La sintaxis es igual que con las clases pero en lugar
precedida de ninguna etiqueta : de un punto utilizan # .Tienen la siguiente forma:
<style> <STYLE>
.MIESTILO{BORDER-STYLE:SOLID; BORDER- #MiIdentificador{COLOR:RED;FONT-SIZE:18PT;}
COLOR:RED}
</STYLE>
</style>
Y para aplicarlo hacemos lo mismo que antes:

Y para aplicarlos utilizamos el atributo id del objeto o
<H2 CLASS = MIESTILO> ESTILO SIN ASOCIAR A UNA etiqueta:
ETIQUETA </H2>
<P ID=MiIdentificador> AFECTADO POR EL
ejemplo04: IDENTIFICADOR </P>
<html> ejemplo05:
<head> <html>
<title>ejemplo04</title> <head>
<style> <title>ejemplo05</title>
.MIESTILO{BORDER-STYLE:SOLID; BORDER- <STYLE>
COLOR:RED}
#MiIdentificador{COLOR:RED;FONT-
</style> SIZE:18PT;}
</head> </STYLE>
<body> </HEAD>
<H2 CLASS=MIESTILO> ESTILO SIN ASOCIAR A UNA <BODY>
ETIQUETA </H2>
<P> NO AFECTADO </P>
<H4 CLASS=MIESTILO> ESTILO SIN ASOCIAR A UNA
<P ID=MiIdentificador> AFECTADO POR EL
ETIQUETA </H4>
IDENTIFICADOR </P>
</body>
<H2> NO AFECTADO </P>
</html>
<H2 ID=MiIdentificador> AFECTADO POR EL
IDENTIFICADOR </P>
</BODY>
</html>
<LI> SEGUNDO ELEMENTO

DE LA
SEGUNDA LISTA
<P> PÁRRAFO DENTRO DEL
ELEMENTO</P>
<LI> TERCER ELEMENTO
DE LA SEGUNDA LISTA
</OL>
<LI> SEGUNDO ELEMENTO DE LA PRIMERA
LISTA
<P> PÁRRAFO DENTRO DEL ELEMENTO </P>
<LI> TERCER ELEMENTO DE LA PRIMERA
LISTA
</UL>
<P> TERCER PÁRRAFO, FUERA DE LISTA
Tanto las clases como los identificadores plantean un </P>
problema: un cambio de estilo obliga a modificar </BODY>
en varios sitios y no en uno sólo. Este problema se
resuelve utilizando los archivos “.css”. </HTML>
15.4- JERARQUÍA
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 definición anterior se está asignando un tamaño

de fuente small a todo el texto situado dentro de la
directiva de párrafo (<p>), pero no en todos los casos,
sino sólo en aquellos en los que el párrafo aparezca a su
vez dentro de la directiva <ol> (lista ordenada).
Vemos que la diferencia con lo visto anteriormente

reside en que en la definición del estilo dejamos un
espacio en blanco entre las etiquetas. Mediante
ese espacio en blanco indicamos la jerarquía.
ejemplo06:
<html> 15.5- ARCHIVOS “.CSS”

<head>
Esto es lo más útil porque hace que todas nuestras
<title>ejemplo06</title> páginas tengan el mismo formato, y además para
modificar el formato de todas la páginas tan sólo
<STYLE> deberemos modificar este archivo con extensión
UL{LIST-STYLE-TYPE:SQUARE} “.css”.
UL OL{FONT- Para ello tenemos que crear un archivo con extensión

STYLE:ITALIC;COLOR:RED} “.css” en el cual simplemente escribiremos los nombres
de las etiquetas a las cuales queremos dar estilo y las
UL OL P{FONT-SIZE:20PT} propiedades que queremos aplicar. La sintaxis es la
</STYLE> misma que la realizada en el ejemplo anterior.
</HEAD> Posteriormente desde el archivo HTML y desde la

cabecera (<head>) tenemos que importar dicho archivo.
<BODY><CENTER> EJEMPLO DE JERARQUÍA DE ESTILOS Para importarlo tenemos dos opciones:
</CENTER>
1. Por medio de la directiva <link>. Suponiendo que
<UL> el nombre del fichero fuese “MisEstilos.css”:
<LI> PRIMER ELEMENTO DE LA PRIMERA <head>
LISTA (DESORDENADA)
<link rel= "stylesheet" href=
<OL> "MisEstilos.css">
<LI> PRIMER ELEMENTO
</head>
DE LA SEGUNDA
LISTA (ORDENADA) 2. Por medio de la sentencia @import. La cual
además de estar en la cabecera, tiene que estar
también 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 además del
nombre del archivo.
ejemplo07:
Primeramente creamos un archivo con extensión “.css”

en el directorio css , en el cual escribo por ejemplo:
Body{color:red;Font-family:sans-serif;text-
align:justify}
H2{Border-color:red}
H3{color:red;border:medium double red;font-
weight:bold} Existe un punto muy importante a la hora de aplicar
estilos ya sea por clases, identificadores, archivos css...
P{color:white;background-color:blue;font- y se trata del hecho de que, por ejemplo, aunque
weight:bold} hayamos definido un estilo para un párrafo (<p>) en el
que decimos que el tamaño de la fuente sea de 8, si
Posteriormente creamos el archivo HTML y en su
luego modificamos el tamaño de fuente del párrafo a
cabecera importamos el css:
través de la directiva <font> será este último tamaño el
<html> que tenga validez. Es decir, siempre se aplica el
último estilo que afecte al elemento.
<head>
<title>Ejemplo07</title> 15.6- UNIDADES DE LONGITUD
<link rel= "stylesheet" href=
"css/MisEstilos.css"> Pueden ser unidades absolutas o relativas y se
componen de un signo + ó – (siendo el primero opcional)
y un número seguido de la unidad de medida y sin

• in: pulgadas (inches). Una pulgada equivale a
</head> 2,54 cm.
<body> • cm: centímetros.
EL <BODY> SERÁ ROJO, JUSTIFICADO Y
• mm: milímetros.
FUENTE SANS-SERIF
<P> COLOR BLANCO, FONDO AZUL • pt: puntos. Un punto equivale a 1/72 pulgadas.
FIN DEL PÁRRAFO Y las relativas:
</P> • em: tamaño equivalente a la altura de la fuente

asociada al elemento.
<H2> GGGGG </H2>
• ex: tamaño equivalente a la altura de la letra “x”
<H3> COLOR ROJO CON BORDE </H3>
correspondiente a la fuente asociada al elemento.
</body>
• px: pixels, relativo a la resolución del área de
</html> visualización.
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.
• font-weight: grosor de la fuente: normal, sólo en elementos contenedores para la

bold, bolder, lighter, 100, 200, 300, indentación de la primera línea de texto.
400, 500, 600, 700, 800, 900. • line-height: espacio entre las líneas de texto.
• font-size: tamaño de la fuente. Admite distintos Los valores pueden ser: un número positivo (que
tipos de medida: valores absolutos (xx-small, x- se multiplicará por el tamaño de la fuente de letra
small, small, medium, large, x-large, xx- del elemento), longitudes, porcentajes y la palabra
clave normal (valor por defecto).
large), relativos (larger, smaller), unidades de
longitud o porcentajes.
15.7.4- CAJAS DE TEXTO
15.7.2- COLORES Y FONDOS • margin-top, margin-right, margin-bottom,
• color: color del elemento. margin-left: especifican los márgenes superior,
derecha, inferior e izquierda, respectivamente, de
• background: color de fondo. un elemento. Los valores pueden ser longitudes y
porcentajes.
• background-image: imagen de fondo. Admite
cualquier URL. • margin: permite definir en un sólo sítio todos los
márgenes del texto. Admite uno, dos o cuatro
• background-attachment: para indicar si la valores. En el primer caso representa el tamaño a
imagen de fondo del elemento se mueve (valor aplicar a todos los márgenes. En el segundo caso,
scroll) o permanece fija (fixed) al hacer scroll el primer número indica los márgenes superior e
del texto. inferior, y el segundo los márgenes izquierda y
derecha. El último caso representa los márgenes
• background-repeat: para indicar cómo debe de superior, derecha, inferior e izquierda
repetirse una imagen de fondo: repeat (valor por respectivamente.
defecto), repeat-x (repetir horizontalmente),
repeat-y (repetir verticalmente) y no-repeat (no • padding-top, padding-right, padding-
repetir). bottom, padding-left: especifican
respectivamente el espacio entre el contenido del
• background-position: define la posición inicial elemento y los bordes superior, derecha, inferior e
de la imagen de fondo. Sus valores pueden ser izquierda.
longitudes, porcentajes y las palabras clave:
left, center, right, top y bottom. • padding: para definir en un único sítio todos los
espacios entre el contenido del elemento y los
• background: permite definir en un único lugar bordes. Admite uno, dos o cuatro valores. En el
todas las propiedades asociadas al fondo, primer caso representa el espacio a aplicar a
simplemente incluyendo sus valores separados todos los bordes. En el segundo caso, el primer
por un espacio. número indica los espacios hasta los bordes
superior e inferior, y el segundo los espacios hasta
Ejemplo: los bordes izquierdo y derecho. El último caso
representa los espacios hasta los bordes superior,
background: black url(“imagen.jpg”) fixed derecho, inferior e izquierdo respectivamente.
center)
• border-top-width, border-right-width,
border-bottom-width y border-left-width:
15.7.3- TEXTO especifican respectivamente la anchura de los
• word-spacing: define un espacio adicional a elementos top-border, right-border,
bottom-border y left-border. Los valores
establecer entre las palabras del texto. Valores de
longitud. pueden ser longitudes y las palabras clave: thin,
medium (valor por defecto) y thick.
• letter-spacing: espacio adicional entre las
letras del texto. • border-width: para definir en un único sitio todos
las anchuras de los borders. Su funcionamiento es
• text-decoration: permite aplicar estilos como las propiedades padding y margin.
especiales al texto: none (ninguno, valor por
defecto), underline, overline, line-through • border-color: color de los bordes del elemento.
y blink. Su funcionamiento es como la propiedades
padding, margin y border-width.
• vertical-align: colocación vertical del texto en
• border-style: para los estilos de los bordes.
relación con el elemento contenedor o la línea del
elemento. Sus valores pueden ser porcentajes y Valores: none (valor por defecto), dotted,
las palabras clave: baseline (valor por defecto), dashed, solid, double, groove, ridge, inset y
sub, super,top, text-top, middle, bottom outset, y admite uno, dos o cuatro. Su
y text-bottom. funcionamiento es como las propiedades padding,
margin...
• text-transformation: para realizar
transformaciones en el texto. Valores: none (valor • border-top, border-right, border-bottom,
por defecto), capitalize, uppercase y border-left: permiten definir de una sola vez
lowercase. todas las características (anchura, estilo y color)
de los bordes superior, derecha, inferior e
• text-align: se aplica sólo en elementos izquierda respectivamente. Sus valores son los
contenedores para alinear el texto que contienen. correspondientes a las propiedades border-
Sus valores pueden ser: left, right, center y width, border-style y border-color.
justify.
• border: para asignar de una sola vez todas las
• text-indent: longitud o porcentaje que se aplica características asociadas al borde de un elemento:
anchura, estilo y color. Cualquier asignación que
se haga con border, se aplicará simultáneamente • Enlaces visitados:

a los cuatro bordes del elemento. Los valores son
los correspondientes a border-width, border- A:visited {atributos}
style y border-color.
• Enlaces activos (cuando se hace click sobre ellos):
• width, height: anchura y altura del elemento.
A:active {atributos}
Los valores que toma son longitudes y la palabra
clave auto (valor por defecto). • Enlaces hover (cuando el ratón está encima de
• float: para indicar cómo flota el texto alrededor ellos):
del elemento. Valores: left, right y none (valor A:hover {atributos}
por defecto).
• clear: determina si un elemento quiere o no que
otros elementos floten a su lado. Valores: El atributo para definir enlaces sin subrayado es text-
decoration:none, para mantener el subrayado es
? none: valor por defecto. Obliga a que el
text-decoration:underline, y para darles color es
elemento se coloque debajo de cualquier color:tu_color.
elemento que flote a izquierda o derecha.
? left: el elemento se coloca debajo de ejemplo08:
aquellos elementos que floten a su
izquierda. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0
Transitional//EN">
? right:el elemento se coloca debajo de
<html>
aquellos elementos que floten a su derecha.
<head>
? both: permite que floten elementos a
izquierda y derecha. <title>ejemplos08</title>
<STYLE type="text/css">
15.8- DISCRIMINAR NAVEGADOR A:link {text-
decoration:none;color:#0000FF;}
También existen diferencias a la hora de
interpretar órdenes de css dependiendo del A:visited {text-
navegador que utilicemos. decoration:none;color:red;}
La diferencia más notable es en el tamaño de fuente. A:active {text-
En Netscape la letra es un punto más pequeña. decoration:none;color:#446EA3;}
Para solucionar esto debemos de hacer dos hojas de A:hover {text-
estilo, una para Internet Explorer (ie.css) y otra para decoration:underline;color:blue;font-
Netscape (ns.css ) y discriminar entre una u otra weight:bold}
utilizando un pequeño script:
</STYLE>
</head>
<SCRIPT LANGUAGE="Javascript">
<body>
if (navigator.appName=="Netscape")
document.write('<LINK REL= "STYLESHEET"
<a href="http://www.pepito.com">Enlace
TYPE= "TEXT/CSS" HREF= "css/ns.css">');
normal</a>
else
<br>
document.write('<LINK REL= "STYLESHEET" TYPE=
<br>
"TEXT/CSS" HREF= "css/ie.css">');
Pulsar este enlace para verlo activo,
</SCRIPT>
poner el ratón por encima para que
cambie:<br>
15.9- ESTILO EN LOS ENLACES
<A href="http://www.google.com">Enlace
A través de las hojas de estilo podemos definir el estilo visitado</a>
de los enlaces. Esto nos permite hacer cosas como quitar
</body>
el subrayado o hacer enlaces en la misma página con
distintos colores. </html>
También 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
página se vean de manera distinta.
Para aplicar un estilo a un enlace debemos especificar
el tipo de enlace: normal, visitado, activo...
La sintaxis sería la siguiente:
• Enlaces normales:
A:link {atributos}
16-OBJETOS
16.1- LA ETIQUETA <APPLET>

Permite introducir programas Java (concretamente
applets) dentro de una página web.
Un applet es una aplicación escrita en Java y
desarrollada para ser ejecutada desde un
navegador.
Las utilidades típicas en las que son empleados los
applets son efectos gráficos en páginas 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
excepción de los parámetros <param> que permiten el
paso de parámetros.
Java es compatible con todos los sistemas porque basa
su funcionamiento en los Byte Codes, que no es más
que una precompilación del código fuente de Java.
Estos Byte Codes no son el programa en Java
propiamente dicho, sino un archivo que contiene un
código intermedio que puede manejar la Máquina
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 cuestión.
Los applets tienen la extensión “.class”.
16.1.1- ETIQUETA <PARAM>

Es una directiva para definir parámetros y es utilizada
tanto por applets como por objetos. Sus atributos son:
• name: nombre con el cual será identificado el
parámetro dentro del applet.
• value: valor concreto del parámetro.
• valuetype: tipo de atributo value. Su uso es
optativo.
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 ejecución.
? object: indica que value contiene un
identificador correspondiente a una declaración
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 por todos los
navegadores son los dos primeros.
16.1.2- ATRIBUTOS DE <applet>
• codebase: especifica la URL donde está localizado </html>

tanto el applet como todos los recursos (imágenes,
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 ejemplo02:
ejecución del applet, que son precargados por el
navegador. Al precargar se acelera el proceso de <html>
ejecución de los applets. No es reconocido por <head>
Internet Explorer.
También tenemos atributos que ya hemos visto en
otras ocasiones como: width, height, align, hspace y </head>
vspace.
<body>
ejemplo01: <APPLET codebase="../applets"
CODE="DigClk.class" WIDTH=122 HEIGHT=29>
Lo primero de todo, es necesario tener el programa del
applet. El applet que vamos a utilizar se llama Aquí habría un reloj si tu navegador soportase
SineText.class. Java
Se trata de un applet que hace que un texto (elegido </APPLET>
por el usuario) se desplace formando una onda
</body>
sinusoidal, en dirección reversible con un click del ratón.
Se pueden escoger los colores del fondo y de las letras, </html>
elegir entre algunos tipos de fuentes, su tamaño,
velocidad de desplazamiento, etc.
En este applet existen los siguientes parámetros:
• Text - Texto que se va a ver.
• Rate - Número de imágenes por segundo.
• Font - Fuente: Helvetica (defecto), TimesRoman o 16.2- ETIQUETA <embed>

Courier.
• FontSize - Tamaño de la fuente. Los plugins son programas auxiliares capaces de
manejar formatos especiales de ficheros, que se
• TextStyle - Estilo de la fuente: Plain, Bold (defecto) o incorporan al navegador y se ejecutan dentro de la
Italic. ventana de visualización. Se incluyen en la página a
través de la directiva <embed>, la cual hemos visto en el
• Speed - Velocidad de desplazamiento 1-10 (5 es por apartado de sonido junto con un ejemplo.
defecto)
• Direction - Dirección inicial del desplazamiento. Left 16.2.1- ATRIBUTOS DE <embed>
(defecto) o Right.
• name: nombre del objeto contenido en el plugin.
• Background - Color del fondo. 000000 (negro) es por
• src: localización del fichero a reproducir.
defecto.
• ForeGround - Color del texto. FF0000 (rojo) es por • pluginspage: URL donde el usuario encontrará
defecto. instrucciones sobre cómo instalar el plugin.
El código es el siguiente: • units: unidad de medida para los atributos height y

width. Pueden ser pixels o en.
<html>
Y atributos que ya conocemos como height, width y
<head><title>ejemplo01</title></head> align.
<body>
<p align="center"> 16.3- ETIQUETA <object>
<APPLET codebase="../applets" El Elemento object, sirve de solución genérica para la

CODE="SineText.class" WIDTH=470 HEIGHT=75> incluir "objetos" en los documentos. Estos "objetos"
<PARAM NAME=Text VALUE="Curso de HTML y CSS"> pueden ser: imágenes, applets, otros documentos HTML,
etc...
<PARAM NAME=Rate VALUE="4">
La estructura es muy similar a la de la etiqueta
<PARAM NAME=Font VALUE="Verdana"> <applet>, con la inclusión entre <object> y su cierre de
directivas <param> y contenido alternativo que se
<PARAM NAME=Background VALUE="#000000">
mostrará en navegadores que no soporten el objeto.
<PARAM NAME=ForeGround VALUE="#ffffff">
Lo siento, pero no puedes ver este applet 16.3.1- ATRIBUTOS
funcionando. • classid: Sirve para especificar la localización de los
</APPLET></body> datos del objeto, para su evaluación. Este atributo
puede utilizarse conjuntamente con el atributo data o

como alternativa a éste. Dependerá del tipo de
objeto. Su valor es una dirección 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 localización
de los datos del objeto. Si se utiliza como dirección
relativa, se interpretará en base al atributo codebase.
Se pueden anidar etiquetas <object>. Esto es útil para
• type: Especifica el tipo de contenido especificado por ofrecer objetos alternativos a los navegadores.
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 Ejemplo:
por el navegador.
• archive: Puede utilizarse para relacionar una serie <object data= “musica.mov” width= “200”
de URLs de archivos que contengan recursos relativos height= “150” border= “2”>
al objeto en cuestión. Puede incluir los recursos <object data= “../imagenes/478-alienp3.gif”
especificados en los atributos classid y data. La width= “200” height= “150” border= “2”>
lista debe ir separada por espacios en blanco. Si se
utilizan direcciones relativas, se resolverán en base al 
• declare: Cuando se utiliza este atributo, convierte la Lo siento pero no se puede cargar ni el vídeo,
definición del objeto en una simple "declaración". El ni la imagen.
objeto queda incrustado, pero inactivo. Para activar el
</object>
objeto, deberá utilizarse, con posterioridad, otra
definición de objeto que haga referencia a esta
declaración.
• 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 definición de <map> (la lista de enlaces)
entre <object> y su cierre, cabe la posibilidad de que
un navegador sin imágenes vea, sin embargo, los Fuentes tomadas como referencia:
enlaces del mapa.
Y atributos que ya conocemos como height, width, • El libro “HTML 4” de Alonso Álvarez García y José
border, hspace, vspace y align. Ángel Morales Grela.
ejemplo03: • Página web: http://www.desarrolloweb.com
<html>
<head>
<title></title>
</head>
<body>
<OBJECT WIDTH="200" HEIGHT="100"
DATA="../imagenes/478-alienp3.gif"></OBJECT>
</body>
</html>

HTML 8º Grado IDETP

Hochgeladen von

Dokumentinformationen

Copyright

Verfügbare Formate

Dieses Dokument teilen

Dokument teilen oder einbetten

Freigabeoptionen

Stufen Sie dieses Dokument als nützlich ein?

Sind diese Inhalte unangemessen?

Copyright:

Verfügbare Formate

HTML 8º Grado IDETP

Hochgeladen von

Copyright:

Verfügbare Formate

Manual HTML 4.

Autor: Gorka Calleja Urraca.

2-EL LENGUAJE HTML.....................................................................................5

2.1- CARACTERES ESPECIALES ......................................................................................5

3.3- DIRECTIVA <META>..............................................................................................6

3.4- DIRECTIVA <BASE>..............................................................................................7

4.1- ATRIBUTOS Y JUSTIFICADO DE PÁRRAFOS....................................................................8

4.2- CONTENEDORES O LAYERS......................................................................................8

4.4- ETIQUETAS VARIAS..............................................................................................9

4.5- LINEA HORIZONTAL Y EL COLOR EN HTML....................................................................11

5.1- COLOR, TAMAÑO Y TIPO DE LETRA............................................................................13

6.1- LISTAS DESORDENADAS.......................................................................................14

6.2- LISTAS ORDENADAS............................................................................................15

6.3- LISTAS DE DEFINICIÓN.........................................................................................16

6.4- ANIDAR LISTAS..................................................................................................17

7.1- DIRECCIÓN URL.................................................................................................18

7.2- ENLACES INTERNOS.............................................................................................18

7.3- ENLACES LOCALES..............................................................................................19

8.1- ELECCIÓN DE FORMATO GRÁFICO............................................................................20

8.2- IMÁGENES COMO ENLACES....................................................................................20

9.1- ATRIBUTOS DE <TABLE>.......................................................................................21

9.2- ATRIBUTOS DE <tr>............................................................................................22

9.3- ATRIBUTOS DE <td>............................................................................................22

9.4- ANIDAR TABLAS.................................................................................................23

10.1- CAMPOS DE TEXTO ...........................................................................................24

10.2- LISTAS DE OPCIONES.........................................................................................25

10.3- BOTONES DE RADIO...........................................................................................26

10.4- CAJAS DE VALIDACIÓN.......................................................................................26

10.5- BOTONES NORMALES..........................................................................................27

10.6- BOTONES DE ENVIO Y BORRADO............................................................................27

10.7- DATOS OCULTOS..............................................................................................27

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.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.1- ATRIBUTOS DE <AREA>......................................................................................35

15.2- ESTILOS MEDIANTE CLASES..................................................................................39

15.5- ARCHIVOS “.CSS” .............................................................................................41

15.6- UNIDADES DE LONGITUD .....................................................................................41

15.7- PROPIEDADES DE LAS HOJAS DE ESTILO...................................................................42

15.8- DISCRIMINAR NAVEGADOR...................................................................................43

15.9- ESTILO EN LOS ENLACES......................................................................................43

16.1- LA ETIQUETA <APPLET>.......................................................................................44

16.2- ETIQUETA <EMBED>...........................................................................................45

1-INTRODUCCIÓN 2-EL LENGUAJE HTML

& signo ampersand &amp;

espacio en blanco &nbsp;

á “a” minúscula acentuada &aacute;

é “e” minúscula acentuada &eacute;

Observamos que para acentuar un carácter

3-ESTRUCTURA nada del texto del documento.

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

• HTML Transitional DTD: incluye todos los

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

• HTML Frameset: incluye los componentes del HTML

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

Debido a la gran difusión de las nuevas versiones de

1.<html>: Limitan el documento e indica que se • http-equiv: es el nombre de un comando HTTP.

& signo ampersand &

espacio en blanco

á “a” minúscula acentuada á

é “e” minúscula acentuada é

<body> etiqueta <div>.</p>

Ejemplo: <i>Texto en italic utilizando la

<p>Letra superíndice utilizando <sup>: E