HTML 4.0 y CSS.sxw - Grupo Binary Horizon

Transcripción

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
HTML es el lenguaje usado por los navegadores para
mostrar las páginas webs al usuario.
La sintaxis del lenguaje HTML se basa en la
denominada etiqueta. La etiqueta tiene dos partes: una
apertura y un cierre.
Con HTML podemos utilizar textos, sonidos, imágenes,
y lo más importante, enlaces a otras páginas.
Este lenguaje surge en principio con fines divulgativos
y no se tuvo en cuenta que la web llegara a ser un área
de ocio con carácter multimedia, debido a esto, el HTML
ha ido necesitando actualizaciones con el paso del tiempo
y la introducción de otras tecnologías complementarias
como es el caso de CSS y JavaScript.
Otro problema al que se enfrenta HTML son los distintos
navegadores, los cuales, no interpretan un mismo código
de manera unificada. Por lo tanto el creador de una
página web (webmáster) ha de verse obligado a
comprobar que su página es interpretada correctamente
por todos los navegadores (en especial Internet
Explorer y Netscape).
Una página web es un archivo que contiene código
HTML en forma de texto. Estos archivos tienen la
extensión “.html” o “.htm”.
Para la creación de un archivo HTML tan sólo
necesitamos un sencillo editor de textos como puede ser
el Bloc de notas (notepad) de Windows, o el Vi de
Linux.
También
disponemos
de
herramientas
más
especializadas como HTML Builder y Macromedia
Dreamweaver, los cuales nos permiten aumentar
considerablemente nuestra eficiencia debido a las
muchas facilidades que nos ofrecen.
<etiqueta> texto afectado </etiqueta>
La etiqueta del principio activa la orden y la última (que
será la del principio precedida del signo /) la desactiva.
No todas las etiquetas tienen principio y final pero esto lo
veremos más adelante.
Es importante resaltar que las mayúsculas o
minúsculas son indiferentes a la hora de escribir las
etiquetas. De todas formas, resulta aconsejable el
acostumbrarse a escribirlas en minúsculas debido a que
otras tecnologías que pueden utilizar nuestro HTML
necesitan caracteres en minúsculas.
Ejemplo:
Las etiquetas <b> y </b> muestran un texto en negrita.
El código sería:
<b>Texto en negrita</b>
Resultado:
Texto en negrita
2.1- CARACTERES ESPECIALES
HTML dispone de un mecanismo que permite que una
serie de caracteres raros o exclusivos de un país se vean
correctamente en todos los ordenadores del mundo.
Cuando queramos poner alguno de estos caracteres en
una
pagina,
tenemos
que
sustituirlo
por
su
correspondiente 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
conseguirlos descargándolos de nuestra página web:
http://www.quarkinside.com
Significado
Código
<
signo menor que
<
>
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
quieran considerarse documentos HTML, deban tener, al
menos, dos elementos: un comentario especial
SGML que describe el lenguaje y versión utilizado,
y un título.
El primer componente (DOCTYPE) indica la versión de
HTML en la que está codificado el documento y no es
más que una referencia al DTD que describe el lenguaje
(HTML 4.0, versión de transición). Aunque es ignorado
por la mayoría de los browsers (navegadores), se
recomienda su utilización, ya que permite a todo tipo de
agentes conocer la versión concreta del lenguaje y poder
así sacar el máximo partido de las funcionalidades
disponibles.
El DOCTYPE es lo primero que se escribe en un
documento HTML.
ejemplo01:
<HTML>
<HEAD>
<TITLE>Ejemplo01</TITLE>
</HEAD>
<BODY>
Hola mundo
</BODY>
</HTML>
Guardamos este texto como ejemplo01.html y para
poder abrirlo simplemente hacemos doble clic sobre el
archivo y se lanzará el navegador que tengamos por
defecto:
Tenemos tres versiones distintas:
•
HTML 4.0 Strict DTD: incluye todos los componentes
excepto los frames. La 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
recomienda utilizar la versión Strict de HTML 4.0.
Sólo se debería usar las otras dos versiones en el caso
de que utilicemos frames, o bien, nos enfrentemos a
navegadores antiguos.
El otro elemento que no puede faltar en un documento
HTML es el título. Este componente es el que
habitualmente emplean los navegadores para encabezar
la ventana en la que se muestra el documento, y que se
utiliza para identificar el documento en bookmarks,
índices,... El título lo veremos en el siguiente apartado.
3.2- ESTRUCTURA
Tres son la etiquetas que describen la estructura
general de un documento y dan una información sencilla
sobre él. Estas etiquetas no afectan a la apariencia del
documento y sólo interpretan y filtran los archivos HTML.
1.<html>: Limitan el documento
e
indica
que
se
3.3- DIRECTIVA
<META>
Tiene dos usos: contenedor de metainformación
sobre el documento, e información adicional, incluidos
comandos, relacionada con el protocolo HTTP.
Por norma general, se añaden directivas META para
dejar en ellas información que pueda identificar al
documento y su contenido, información que utilizan
aplicaciones externas como buscadores e índices (Yahoo,
Google,...).
Todos los <META> son insertados entre las secciones
<head> y </head>. El orden no es importante.
3.3.1- ATRIBUTOS
•
name: identifica la información que se va a exportar.
•
content: contenido de la información.
•
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
pocas las etiquetas que van dentro de ella, destacando la
de
<title> (título) que será utilizado por los
marcadores del navegador e identificará el contenido de
la página. Sólo puede haber un título por documento,
preferiblemente corto aunque significativo, y no caben
otras etiquetas dentro de él. En head no hay que colocar
3.3.2- ETIQUETAS <META> MÁS COMUNES
Las vamos a clasificar según su atributo name:
•
AUTHOR: Para definir quién construyó la página web:
<META NAME="AUTHOR" CONTENT="Su nombre aquí">
•
COPYRIGHT: Para el copyright:
6 de 48
<META NAME="COPYRIGHT" CONTENT="Ingrese aquí
el nombre de su compañía">
•
CONTACT_ADDR: Para definir la dirección de correo
electrónico que la gente debería usar para hacer
contacto con usted:
<META NAME="robots" CONTENT="INDEX,FOLLOW">
<META NAME="revisit-after" CONTENT="7 Days">
<META NAME="email"
CONTENT="[email protected]">
<META NAME="author" CONTENT="Gorka">
<META NAME="CONTACT_ADDR" CONTENT="Aquí su
dirección email">
•
RATING: Para indicar hacia qué tipo de audiencia está
orientado su sitio web disponemos de cuatro posibles
valores:
?
general: para todas las edades.
?
14 years: para mayores de 14 años.
?
mature: para adultos.
?
restricted: para adultos con restricciones.
La etiqueta sería:
<META NAME="RATING" CONTENT="El Rating aquí">
•
ROBOT: Cuando un motor de búsqueda visite su
página tratará de seguir sus links e indexará cada
página que encuentre.
Posibles valores:
?
all: dirá al robot del motor de búsqueda que
siga todos los links sobre su página web, e
indexe todos los que encuentre.
3.3.3- REDIRECCIONAMIENTOS A OTRAS
PÁGINAS
Puedes enviar a los visitantes a una
específica, diferente, al incluir este marcador:
página
<META HTTP-EQUIV="REFRESH" CONTENT=
“2”;URL=http://www.sudominio.com/otra_pagina.h
tml">
En content, el atributo de valor numérico (“2 ”) indica
la cantidad de segundos de pausa antes de cargar el
destino, que se encuentra especificado a continuación.
De esta manera al cargarse esta página se
presentará al visitante durante 2 segundos, dirigiéndose
luego a otra_página.html.
3.4- DIRECTIVA
<BASE>
Sirve para especificar un directorio base para todas las
referencias (direcciones URL ) relativas del documento.
?
noindex: para que el robot no indexe esa
página. Pero puede seguir los links sobre ella.
Esta directiva se ha de situar en la cabecera (head) del
documento.
?
nofollow: que indexe esta página pero que no
siga los links sobre ella.
?
none: que no indexe esta página ni siga los
links sobre ella.
Mediante el atributo href especificamos la ruta o
dirección donde se ha de buscar cualquier página o
archivo referido en el documento.
Sólo afecta al documento en el que aparece.
Por
La etiqueta sería:
ejemplo,
si
se
apunta
a
la
imagen
../imagenes/dibujo.gif, se la buscará en el directorio
<META NAME="ROBOT" CONTENT="Ingrese el valor
aquí">
•
</head>
REVISIT-AFTER: Para indicar a un robot cuando debe
regresar e indexar el sítio de nuevo.
Los posibles valores pueden ser la cantidad de tiempo
que usted quiera: “10 days”, “2 months”, “1 week”,...
La etiqueta sería:
<META NAME="REVISIT-AFTER" CONTENT="Ingrese el
valor aquí">
Ejemplo:
anterior (superior o previo) al tomado como referencia,
es decir, el que contiene el documento.
Usando por ejemplo:
<base href=
“http://www.ejemplo.es/dirpag/index.html”>
hacemos
que,
con
independencia
de
donde
almacenemos el documento html, el directorio donde va
a buscar cualquier referencia relativa va a ser, en
nuestro caso, siempre el directorio dirpag. Es decir, a la
hora de buscar el archivo dibujo.gif lo buscará en esta
ruta:
http://www.ejemplo.es/dirpag/imagenes/dibujo.g
if
<head>
<TITLE>Concentración Motera
Acelerados</TITLE>
<META NAME="keywords" CONTENT="acelerados,
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">
7 de 48
4-FORMATO DE PÁRRAFOS
Formatear un texto consiste en definir los
párrafos, justificarlos, poner en negrita, en
itálica...
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.
<p align="right">Texto alineado a la
derecha.</p>
<p align= "center">Texto centrado.</p>
</body>
</html>
Con la etiqueta <br> podemos realizar un salto de
linea, puede poner tantas como desee y realizará un
salto de 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
funcionamiento de la etiqueta de una forma más
personal. Los atributos tienen sus valores indicados
entre comillas (“) pero si no los indicamos entre comillas
también funcionará en la mayoría de los casos. Eso si,
en caso de que el valor del atributo contenga
espacios las comillas son obligatorias. De todas
maneras, para evitar posibles errores es mejor
acostumbrarse a ponerlas siempre.
El atributo align puede tener 3 valores:
1. left: texto alineado a la izquierda.
2. right: alineado a la derecha.
3. center: alineado al centro.
Para centrar el texto también podemos utilizar la
etiqueta <center> seguida del texto que queremos
centrar y posteriormente el cierre correspondiente:
</center>.
4.2- CONTENEDORES O LAYERS
Para cuando tengamos un texto largo y queramos que
todos los párrafos estén justificados de alguna manera lo
ideal es utilizar la etiqueta <div>
denominada
contenedor, o comunmente “layer” (capa). Todo lo
que esté incluido dentro de esta etiqueta será alineado
tal y como hayamos especificado en el atributo align.
Con la versión 4.0 de HTML disponemos también de un
nuevo valor para el atributo align, que es “justify”.
Este valor nos permite justificar el texto a ambos
márgenes del navegador.
ejemplo02:
<html>
<head>
<title>Ejemplo02</title>
</head>
ejemplo01:
<body>
<html>
<head><title>Ejemplo01</title></head>
<p>Para simplificar el código a la hora de
justificar utilizamos la
etiqueta <div>.</p>
<body>
<p>Esto es un párrafo, se introduce un salto
y deja una línea en blanco antes de continuar
con el resto del documento.</p>
Vemos que ha dejado un espacio en
blanco.<br><br>
A través de la etiqueta <br> <br>
hacemos un salto de carro.

<div align="right">
<p>centrado a la derecha</p>
<p>insisto en que está centrado a la
derecha</p>
</div>
<div align="center">
<p>todo lo incluido dentro estará
centrado</p>
<p>insisto en que está
centrado</p>
<p><center>Texto centrado utilizando la
etiqueta center.</center></p>
<p align="left">Texto alineado a la
izquierda.</p>
</div>
8 de 48
<div align="justify">
<p>Con el valor "justify" hacemos un
justificado a ambos márgenes. A
partir de HTML 4.0</p>
</div>
</body>
</html>
4.4- ETIQUETAS VARIAS
Disponemos
siguientes:
•
de
etiquetas
muy
útiles
como
las
<blockquote> : nos permite indentar un
texto.
ejemplo04:
4.3- ENCABEZADOS
<blockquote>Esto está indentado<br>como bien
podemos apreciar.<br></blockquote>y esto no
está indentado.
Los encabezados (headers) son etiquetas que
formatean un texto como un titular asignando un tamaño
de letra y texto en negrita. Hay seis tipos de
encabezados.
ejemplo03:
<head>
</head>
<body>
<p>Vamos a ver los 6 tipos de
encabezados:<br>
<h1>Encabezado de nivel 1</h1>
•
<cite>: para textos que representen citas de
autor.
ejemplo05:
</p>
<cite>Tanto va el cantaro a la fuente<br>que
al final aprende a ir sólo.<br>Pedro
Reyes.</cite>
</body>
</html>
9 de 48
•
<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>
10 de 48
•
<pre>: permite respetar la forma escrita en el
código html, a la hora de mostrar la página en el
navegador.
•
<address>:
para
escribir
correspondientes a calles...
direcciones
ejemplo13:
ejemplo11:
Ejemplo:
<pre>La etiqueta <pre>
permite
respetar la forma
<address>C/Sierpe Nº1 <br> 47002
Valladolid<br>
</address>
en la que
se edito
el documento html.</pre>
4.5- LINEA HORIZONTAL Y EL
COLOR EN HTML
•
<tt>: para escribir con tipo de letra de paso fijo
(estilo teletipo).
ejemplo12:
Ejemplo: <tt>Tipo de letra de paso fijo
(estilo teletipo) utilizando la etiqueta
<tt>.</tt>
Para insertar una línea horizontal tenemos que utilizar
la etiqueta <hr>. El resultado final difiere respecto a
grosor entre verlo en Netscape y verlo en Internet
Explorer.
La etiqueta <hr> presenta los siguientes atributos:
1. color: para establecer el color de la línea. Los
valores para los colores más frecuentes se pueden
asignar a través de su nombre en inglés:
11 de 48
Nombre
Color
aqua
black
blue
fuchsia
gray
green
lime
maroon
navy
olive
purple
red
silver
teal
5-FORMATO DE TEXTO
white
yellow
Y en el caso de querer otra combinación de color
debemos utilizar valores RGB. RGB son las abreviaruras
de Red (rojo), Green (verde) y Blue (azul), es decir, que
para conseguir otro color debemos mezclar cantidades
de verde, rojo y azul.
Esas cantidades se han de indicar en numeración
hexadecimal:
1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F.
Los valores los daremos en este formato:
#RRGGBB
Vamos a ver de que etiquetas disponemos para poder
poner el texto en negrita, itálica...
•
<strong>: por medio de esta etiqueta resaltamos
el texto incluido en ella. No es lo mismo que poner
en negrita, aunque el resultado sea muy similar en
algunos navegadores.
ejemplo01:
Ejemplo: <strong>Texto resaltado
utilizando la etiqueta
<strong></strong><br>
donde cada valor de color puede crecer desde 00 a
FF.
Ejemplo:
Naranja
#ff8000
Verde turquesa
#339966
Azul oscuro
#000080
2. size: 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.
•
ejemplo14:
<p>Podemos modificar su color, tamaño y
anchura:
<hr color="red">
<b>: para poner el texto en negrita.
ejemplo02:
Ejemplo: <b>Texto en negrita utilizando
la etiqueta <b></b>
<hr size=6>
<hr width=50%>
<hr noshade>
</p>
12 de 48
•
<em>: texto enfatizado.
ejemplo03:
Ejemplo: <em>Texto enfatizado utilizando
la etiqueta <em></em>
•
<u>: texto subrayado.
•
<i>: texto tachado.
•
<blink>: sólo funciona en el navegador Netscape.
Sirve para hacer que el texto parpadee.
ejemplo05:
<u>Texto subrayado utilizando la etiqueta
<u></u><br>
<s>Texto tachado </s> utilizando la etiqueta
<s&gt<br>
•
<i>: texto en 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> =
13 de 48
mediante valores RGB.
b<sub>i, j</sub>+ 1</p>
<big>Aumentamos el tamaño de la letra por
medio de <big>.</big><br>
<small>Disminuimos el tamaño utilizando
<small>.</small><br>
ejemplo07:
Ejemplo: <font face="Comic Sans
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,
14 de 48
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.
Tenemos tres tipos de listas:
<ul compact type="square">
<li>Elemento 1</li>
<li>Elemento 2</li>
6.1- LISTAS DESORDENADAS
</ul>
Son delimitadas mediante la etiqueta <ul> (unordered
list) y la correspondiente etiqueta de cierre </ul>. Y
cada uno de los elementos de la lista se establece a
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>,
podemos utilizar el atributo type para cambiar el tipo de
viñeta de todos los elementos de la lista. En el caso de
que queramos cambiar solamente el de un elemento en
especial utilizamos el atributo type sobre la etiqueta de
elemento, es decir, sobre <li>. Los valores de type
pueden ser:
•
circle: la viñeta es un círculo negro.
•
disc: la viñeta es una circunferencia negra.
•
square: la viñeta es un cuadrado.
<li>Tercer elemento.</li>
</ol>
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>
15 de 48
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.
•
A: por letras mayúsculas.
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:
16 de 48
<ol start="8" type="I">
<li>He puesto que start sea igual a 8.</li>
<li>vemos que luego continua por sí
sólo.</li>
<li>demostrado.</li>
elementos seguido de su definición correspondiente. La
etiqueta principal es <dl> (definition list), y las etiquetas
de elemento y su definición son <dt> (definition term) y
<dd> (definition definition) respectivamente.
La etiqueta <dd> desplaza la línea hacia la izquierda,
por este motivo este tipo de etiqueta es utilizado
para desplazar texto.
</ol>
ejemplo09:
<dl>
<dt>Primer elemento<dd>Esta es la
definición del primer
elemento.
<dt>Segundo elemento<dd>Esta es la
definición del segundo
elemento.
</dl>
Para alterar la 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>
6.4- ANIDAR LISTAS
</ol>
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>
6.3- LISTAS DE DEFINICIÓN.
s
<dt>Alemania:<dd>Equipo
alemanes de
En este tipo de lista se muestra cada uno de los
17 de 48
fútb
ol.
<ul>
<li>Bayer de Munich</li>
<li>Borusia Dortmund</li>
</ul>
</dl>
7-ENLACES
HTML es un lenguaje para hipertexto, es decir,
enlaces. Un enlace o link es una zona de texto o
imagen que si son seleccionados nos trasladan a otro
documento de hipertexto o a otra posición dentro del
documento actual.
Para crear un enlace hay que utilizar la etiqueta <a>.
Todo lo que encerremos entre <a> y </a>, ya sea texto
o 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
servidores privados.
@ podemos acceder
a
•
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
también a través de su dirección IP.
ser
indicada
La ruta es una serie de directorios separados por la
barra “/” donde indicamos el camino hacia el archivo
18 de 48
que vamos a utilizar. Cuando queremos acceder a un
fichero situado en la misma 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://[email protected]">ftp.redi
ris.es</a><BR>
Enlace con una dirección e-mail:
<a
href="MAILTO:[email protected]">gorka@
usuarios.retecal.es</a><br>
Enlace con news: 
<a
href="news://news.ibernet.es/es.comp.demos">ne
ws</a><br>
También podemos acceder a anclas situadas en
documentos remotos. Para ello añadimos el nombre del
ancla al URL:
<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
Son los enlaces que apuntan a un lugar diferente
dentro de
la misma página. Para crearlos
necesitamos, aparte del enlace origen, un segundo
enlace que será colocado en el destino y que
comunmente se denomina ancla. A este enlace destino le
hemos de asignar un nombre que le identifique y que en
nuestro ejemplo es “abajo” :
<a href="ejemplo01.html">Ir al Ejemplo
10</a><br>
Enlace con un archivo comprimido (archivo
zip): 
<a href="archivos/ejemplo.zip">archivo.zip</a>
<a name="abajo"></a>
Este ancla lo situaremos dentro del 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> 

19 de 48
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.
Una vez cargada la imagen si colocamos el puntero
del ratón sobre ella también se nos mostrará la
descripción escrita en este atributo.
•
align
Mediante este atributo alineamos la imagen con
respecto al texto. Este atributo puede tener estos
valores:
height y width
?
top: coloca el punto más alto de la imagen
coincidiendo con el más alto de la línea de
texto actual.
?
middle: alinea el punto medio (en altura)
de la imagen con la base del texto.
Define el tamaño en pixels del cuadro que rodea a la
imagen.
?
bottom: alinea el punto más bajo
imagen con la base del texto.
En caso de que no queramos que aparezca el
borde, damos el valor cero (“0”).
?
left: coloca la imagen a la izquierda del
texto.
?
right: a la derecha del texto.
•
Definen la altura (height) y anchura (width) en
pixels de la imagen.
•
•
border
atributos vspace y hspace
Sirven para indicar el espacio libre vertical (vspace)
y horizontal (hspace), en pixeles, que tiene que
colocarse entre la imagen y los otros elementos que la
rodean, como texto, imágenes...
•
lowsrc
Si se quiere interrumpir el proceso de rellenado
del texto a los lados de la imagen, para que salte
hasta debajo de ella, es decir, dejar un espacio en
blanco parcialmente, se pueden emplear las siguientes
extensiones de la etiqueta <br>:
Con este atributo indicamos un archivo de la imagen
que está en baja resolución, de tal forma que cuando
el navegador detecta este atributo primero descarga y
muestra la imagen de baja resolución y luego descarga
la imagen con la resolución correcta.
<br
?
<br
?
clear =left> Busca el primer
margen libre (clear) a la izquierda.
?
clear
=
right> Busca el primer
margen libre a la derecha.
ejemplo01:
alt="Ordenador saltando"><br>
de la
clear =all> Busca el
margen libre a ambos lados.
<br
primer
ejemplo02:
<dl>
20 de 48
<dt><VAR>TOP</VAR><dd>
alt="Ordenador" align="top"
border="3">
Lo mejor es utilizar como regla general
siempre imágenes GIF, salvo cuando necesitemos
dar mayor calidad a nuestras imágenes, en cuyo
caso utilizaremos JPEG.
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
cualquier tipo de enlace.
ejemplo03:
alt="Ordenador" align="middle"
<u>Ejemplo:</u> 
border="3">
Texto.
<dt><VAR>BOTTOM</VAR><dd>
<a
href="mailto:[email protected]"><img
src="../imagenes/e_mail.gif" alt="e-mail"
align="top"> </a>
alt="Ordenador" align="bottom"
border="3">
Texto.
<dt><VAR>LEFT</VAR><dd>
<div><img src="../imagenes/happysmclr.gif"
alt="Ordenador" align="left"
border="3">
Texto.
</div><BR clear="all">
</dl>
Si queremos eliminar el borde que aparece por
ser un enlace, asignamos al atributo border el valor
de cero:
ejemplo04:
<u>Ejemplo:</u>  
<a
href="mailto:[email protected]"><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.
21 de 48
9-TABLAS
La etiqueta
atributos:
Una tabla es un conjunto de celdas organizadas
dentro de las cuales podemos alojar distintos tipos de
contenidos.
Para crearlas utilizamos la etiqueta principal <table>
junto con su cierre correspondediente </table>. Dentro
de esta etiqueta vamos creando las distintas filas por
medio de la etiqueta <tr> y </tr>, y en cada fila las
celdas a través de la etiqueta <td> y </td>. Las celdas
de cada fila se ordenan automáticamente de
izquierda a derecha. Dentro de estas etiquetas de
celda es donde colocaremos nuestro contenido.
Si queremos poner un título a la tabla utilizamos la
etiqueta <caption> inmediatamente después de la
etiqueta principal <table>.
ejemplo01:
</caption>
dispone
de
los
siguientes
•
border: Donde se establece el valor en pixels del
borde de la tabla. Si le asignamos el valor cero
no habrá borde.
•
bordercolor: color del borde.
•
background: permite colocar un fondo para la
tabla a partir de un enlace a una imagen.
•
bgcolor: color del fondo de la tabla.
•
cellspacing: número de pixels entre celdas.
•
cellpadding: pixels entre el borde de la celda
y su contenido.
•
align: alinea la tabla. Sus valores son: center,
right o left.
•
width: anchura de la tabla en pixels o en
porcentaje (el 100% es el máximo del que dispone
el navegador).
•
height: altura
porcentaje.
<table border="1">
<caption><font size="4"
color="red">Título de la tabla</font>
principal
de
la
tabla
en
pixels
o
en
ejemplo02:
<tr>
<td>celda 1,1</td>
<td>celda 1,2</td>
<td>celda 1,3</td>
<table border="4" bordercolor= "blue"
background="../imagenes/fondos/fondo.jpg"
align="center" width="650" cellspacing="15"
height="400" cellpadding="15">
<tr>
</tr>
<td>celda 1,1</td>
<tr>
<td>celda 2,1</td>
<td>celda 1,2</td>
<td>celda 2,2</td>
<td>celda 1,3</td>
<td>celda 2,3</td>
</tr>
<tr>
</tr>
<td>celda 2,1</td>
<tr>
<td>celda 2,2</td>
<td>celda 3,1</td>
<td>celda 2,3</td>
<td>celda 3,2</td>
<td>celda 3,3</td>
</tr>
<tr>
</tr>
<td>celda 3,1</td>
</table>
<td>celda 3,2</td>
<td>celda 3,3</td>
</tr>
</table>
9.1- ATRIBUTOS DE <TABLE>
22 de 48
9.2- ATRIBUTOS DE <tr>
Los utilizamos para que los cambios afecten a toda
las celdas de la fila.
•
align: alineación que afecta a todas las celdas
de la fila. Sus valores son: center, right o
left.
•
valign: alinea el contenido de las celdas
verticalmente arriba (top), abajo (bottom) o
centro (middle).
•
bgcolor: color del interior de la línea de celdas.
•
bordercolor: color del borde de la línea de
celdas.
•
bgcolor: color del fondo de la tabla.
•
•
background: permite colocar un fondo para la
celda a partir de un enlace a una imagen.
•
height: altura
porcentaje.
•
width: anchura de
porcentaje.
•
colspan: expande una celda horizontalmente
(con la celda de la derecha).
•
rowspan: expande una celda verticalmente
(con la celda inferior).
de
la
celda
en
pixels
o
en
la celda
en
pixels o
en
ejemplo04:
ejemplo03:
<table border="1" width="500"
cellpadding="15">
<table border="1" width="500"
cellpadding="15">
<tr>
<tr align="right" valign="top"
bgcolor="green" bordercolor="pink">
<td align="right"
bgcolor="red">celda
<td>celda 1,1</td>
<td>celda 1,2</td>
1,1</td>
<td align="center"
bgcolor="blue">celda
1,2</td>
<td>celda 1,3</td>
</tr>
<tr align="center" valign="middle"
bgcolor="blue"
<td align="left"
bgcolor="green">celda
1,3</td>
bordercolor ="green">
<td>celda 2,1</td>
<td>celda 2,2</td>
</tr>
<tr>
<td background=
"imagenes/penguin_type_md_wht.gif"
width="60" height="70">
<td>celda 2,3</td>
</tr>
<tr align="left" valign="bottom"
bgcolor="red" bordercolor="yellow">
<font color="red" size="4">celda
2,1</font></td>
<td>celda 3,1</td>
<td>celda 2,2</td>
<td>celda 3,2</td>
<td>celda 2,3</td>
<td>celda 3,3</td>
</tr>
</tr>
<tr>
</table>
<td bordercolor="yellow">celda
3,1</td>
<td bordercolor="pink">celda
3,2</td>
<td bordercolor="green"
rowspan="2">celda 3,3</td>
</tr>
<tr>
<td colspan="2">celda 4,1</td>
9.3- ATRIBUTOS DE <td>
Nos permite cambiar características a una celda en
concreto.
•
align: alinea horizontalmente el contenido de la
celda respecto a sus bordes. Sus valores son:
center, right o left.
•
valign: alinea el contenido de las celdas
verticalmente arriba (top), abajo (bottom) o
centro (middle).
</tr>
</table>
23 de 48
9.4- ANIDAR TABLAS
Las tablas al igual que otros objetos de html permiten
la anidación.
ejemplo05:
<table border="2" cellpadding="10"
cellspacint="10">
<caption>TABLAS ANIDADAS</CAPTION>
<tr>
10-FORMULARIOS
Los
formularios
nos
sirven
para
poder
intercambiar información con nuestro visitante o
usuario. Los datos que el usuario introduce en el
formulario son enviados por correo electrónico al
administrador del formulario o bien a un
programa
que
se
encarga
de
procesarlo
automáticamente.
Para la creación de un formulario utilizamos la
etiqueta <form> y la correspondiente de cierre </form>.
Entre estas dos etiquetas introducimos los
botones y campos que conforman el formulario.
<td>Celda 1,1</td>
<td>Celda 1,2</td>
La etiqueta <form> debe ser contenido en “body”,
“dd” y “td”. Pero nunca deber ser contenido en
“button”, “dl”, “form” y “table”.
</tr>
<tr>
La etiqueta <form> tiene los siguientes atributos:
<td>Celda 2,1</td>
<td>
•
<table border="2"
background="../imagenes/fondos/416sbyellow03.jpg">
action: para definir qué hacer con el contenido
del formulario (enviarlo por e-mail o enviarlo a
un script o programa que procese su contenido).
•
method: es la forma en que el formulario es
enviado. Dos formas:
<caption><font color="red">Tabla anidada en
celda 2,2</font></caption>
1. post: envía los datos como parte de la
entrada estándar.
<tr>
2. get: añade los argumentos del formulario al
URL recogido en action (usando como
separador ?), lo que da lugar a que el
programa los reciba como parámetros de
entrada.
<td>Celda 1,1 - tabla 2</td>
</tr>
<tr>
</tr>
</table>
</td>
</tr>
<tr>
<td>Celda 3,1</td>
<td>Celda 3,2</td>
</tr>
</table>
El método get es el utilizado por los navegadores
para solicitar una página al servidor. En el momento de
enviar el formulario se compone una URL especial
formada por la referencia al programa y los parámetros
leídos en el formulario precedidos por el carácter
interrogación (?). Los distintos parámetros se presentan
en la forma nombre=valor y se separa cada par por el
carácter ampersand (&).
En cambio, en el método post el navegador contacta
con el servidor y envía datos al margen de la URL. Por lo
tanto la llamada es más limpia y lo más importante: no
tenemos los parámetros a la vista , lo cual es lo
mejor cuando se trata de datos que no queremos que
sean visibles.
Salvo que se diga lo contrario por ahora utilizaremos
el valor post.
•
enctype: se ha de utilizar en el caso de que
enviemos el formulario por correo electrónico. El
valor que le damos es “text/plain”.
Ejemplo:
<FORM ACTION="MAILTO:[email protected]"
method="post" enctype="text/plain"></form>
24 de 48
10.1- CAMPOS DE TEXTO
10.1.1- TEXTO CORTO.
Para crear una caja de texto utilizamos la etiqueta
<input> y dentro de esta hemos de especificar el valor
de los atributos type y name siendo atributos
imprescindibles.
La etiqueta es de la forma:
<input type="text" name="nombre">
mediante la cual creamos una caja de texto (valor del
atributo type) cuyo contenido será llamado nombre
(valor del atributo name).
ejemplo01:
method="post" enctype="text/plain">
Nombre: <input type="text" name="nombre">
10.1.2- TEXTO OCULTO
</form>
Para que aparezcan asteriscos en vez de texto
utilizamos el valor password en el atributo type. Esto es
muy útil para los campos destinados a 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:
•
•
•
size: para asignar en pixels el tamaño visible
de la caja de texto.
maxlength: para asignar el tamaño máximo de
caracteres que va a admitir la caja de texto.
value: para asignar un valor predefinido, es
decir, para que cuando se cargue el formulario
aparezca ya escrito el valor que hemos asignado a
value.
<p>Password: <input type="password" name=
"password"></p>
<textarea name="comentario" rows="10"
cols="40">Escribe tu comentario...
</textarea>
</form>
ejemplo02:
<p>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>
25 de 48
</select>
</p>
<p><var><b>MULTIPLE</var></b> 
<SELECT NAME="jugadores" size="4" align="top"
multiple>
<option>Raúl</option>
<option>Zidane</option>
<option>Figo</option>
<option>Roberto Carlos</option>
</select>
</p>
<p><var><b>SELECTED</var></b> 
<SELECT NAME="jugadores" size="4" align="top"
>
10.2- LISTAS DE OPCIONES
Son los menús desplegables que nos permiten
escoger
una (o varias) de las opciones que nos
proponen.
Para crearlas utilizamos la etiqueta <select> y su
correspondiente cierre. También asignaremos un nombre
al atributo name y cada opción que queramos que
aparezca deberá ser incluida en una línea precedida de
la etiqueta <option>.
<option selected>Figo</option>
</select>
</p>
</form>
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
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.
seleccionar
varios
ejemplo04:
<SELECT NAME="jugadores">
</select>
<p><var><b>SIZE="2"</var></b> 
<SELECT NAME="jugadores" size="2" align="top">
10.3- BOTONES DE RADIO
Son otra alternativa a la hora de plantear una elección.
Mediante estos botones obligamos al usuario a
seleccionar una sola opción de entre las que se
proponen.
Presenta la misma sintaxis que las cajas de texto, es
decir, la etiqueta <input> y los atributos type, name y
value. La diferencia reside en que el valor de type
26 de 48
ahora es “radio” y que todos los radiobuttons (botones
de radio) que queramos que sean excluyentes han de
tener el mismo valor en el atributo name, es decir, se
han de llamar igual. Distinguiremos la 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
opciones utilizando el atributo checked.
una
de
las
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
Por ejemplo, si seleccionamos la opción
información que se enviará por e-mail será:
<br>
value="4">Roberto Carlos
Figo
la
jugadores = 3
<br><br>
Atributo <var><b>CHECKED</var></b> en la
segunda opción:<br><br>
value="1">Raúl
<br>
<input type="radio" name="jugadores" value="2"
checked>Zidane
<br>
value="3">Figo
<br>
value="4">Roberto Carlos
y si seleccionamos la opción Zidane:
jugadores = 2
10.4- CAJAS DE VALIDACIÓN
Las cajas de validación o checkbox, son cajas que
pueden ser activadas o desactivadas por el usuario por
medio de un click con el ratón.
La sintaxis es la misma que la de los botones de radio
salvo en el valor del atributo type que ahora es
“checkbox”.
Podemos activar por defecto
atributo checked.
la caja utilizando el
</form>
ejemplo06:
<FORM
ACTION="MAILTO:[email protected]"
<input type="checkbox" name="futbol">Me gusta
el fútbol
<br><br>
Podemos activar por defecto la caja utilizando
el
atributo
<var><b>CHECKED</var></b>:<br><u>Ejemplo:</u><
27 de 48
sirve para borrar el formulario por completo en el
caso de que el usuario desee rehacerlo desde el
principio.
br><br> 
<input type="checkbox" name="futbol"
checked>Me gusta el fútbol
La sintaxis es lo mismo que en los botones normales
salvo el valor del atributo type que ahora es “submit”
para el botón de envío, y “reset” para el botón de
borrado.
</form>
ejemplo08:
<input type="submit" value="Enviar">
<input type="reset" value="Borrar">
</form>
La información que
programa será del tipo:
llegará
a
nuestro
correo
o
valor de name = on (u off si está desactivada)
En el ejemplo anterior si activamos la casilla
información que llegará al correo espacificado será:
la
futbol = on
10.5- BOTONES NORMALES
Para crearlos utilizamos la etiqueta <input> y los
atributos type = “button” y value.
El atributo value representa el texto que aparecerá
escrito en el botón.
ejemplo07:
<input type="button" value="Texto escrito en
el botón">
</form>
10.7- DATOS OCULTOS
Además de los datos enviados por el usuario podemos
enviar datos establecidos por nosotros y que
permanecerán ocultos al usuario (a menos que el
usuario solicite en el navegador ver el código fuente).
Para ello utilizamos la etiqueta <input> y el atributo
type con valor igual a “hidden” (oculto).
Ejemplo:
<input type=”hidden” name=”sitioweb”
value=”www.google.com”>
Esta
etiqueta
enviará
especificado la información:
al
correo
o
programa
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
28 de 48
11-FRAMES
frames"</p></noframes>
</frameset>
Los frames nos sirven para dividir la ventana del
navegador en diferentes áreas, cada una de las
cuales
es
un
archivo
html
distinto
e
independiente .
</html>
Cada marco o área tendrá sus propias barras de
desplazamiento, propiedades...
Para crear frames utilizamos la etiqueta <frameset> la
cual vá a sustituir al habitual <body>. Dentro de esta
etiqueta primero definimos cada uno de los marcos
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:
•
Porcentajes: porcentaje referido al espacio total
disponible.
•
Absolutos: mediante un número especificando el
tamaño en pixels.
•
Sobre el espacio sobrante: colocando un
asterisco (*) indicamos que queremos todo el
espacio sobrante. Si ponemos el asterisco en
varios
marcos
se
repartirán
el
espacio
equitativamente y si queremos que uno de los
marcos sea mayor lo hacemos poniendo un
número delante del asterisco, de tal forma que si
ponemos 3* ese marco será tres veces mayor que
el que tenga tan sólo el asterisco.
Estos tres formatos se pueden combinar.
Mediante la etiqueta <frame> y el atributo src
definimos la procedencia de cada una de las filas o
columnas. El valor del atributo src es la ruta y nombre
del archivo html que vá a mostrar el frame:
ejemplo02
<html>
<head>
<title>ejemplo02</title>
</head>
<frameset cols="30%,70%">
<frame src="pagina1.htm">
<frame src= "pagina2.htm">
<noframes><p>No podrás ver esta página si el
navegador no soporta frames"</p>
</noframes>
</frameset>
</html>
<frame src=”frame1.html”>
En este caso estamos indicando que el frame que
estamos definiendo debe mostrar la 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">
página
<noframes><p>No podrás ver esta
si el navegador no soporta
29 de 48
ejemplo03:
Vamos a ver otro ejemplo pero esta vez vamos a partir
desde el principio, es decir, desde lo que queremos
conseguir:
son páginas html independientes guardadas en el mismo
directorio que el archivo de definición de frames. Si
estuvieran guardados en otro directorio diferente
tendríamos que escribir la ruta junto con el nombre del
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%,*">
70 pixels
Para conseguir esta división de marcos editamos el
siguiente código:
</frameset>
<html>
<frameset rows="80%, *">
<head>
</frameset>
</frameset>
</head>
<frameset rows =”20%, *, 70”>
<frame src=”pag1.htm”>
</frameset>
</html>
</frameset>
</html>
11.2- QUITAR EL BORDE Y EL
ESPACIO ENTRE FRAMES
El título (title) de la definición de frames es el que
hereda toda la página web.
Las páginas “pag1.htm” , “pag2.htm” y “pag3.htm”
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
etiqueta <frameset> (para que afecte a todos los
frames). Aunque eliminemos el borde el navegador deja
también un hueco entre los frames, para eliminarlo
30 de 48
utilizamos
los
atributos
framespacing=”0”
y
border=”0” en <frameset>. Por ejemplo vamos a
eliminar los bordes y el hueco del ejemplo anterior:
1. Dar un nombre al frame que queremos actualizar
mediante el atributo name en la etiqueta <frame>.
2. Dirigimos los enlaces hacia ese frame asignando al
atributo target de la etiqueta <a> el nombre del
frame que queremos actualizar al pulsar el enlace.
ejemplo06:
ejemplo05:
</head>
En este ejemplo tenemos dos enlaces. El Enlace 1 no lo
hemos redireccionado con lo cual si hacemos clic en él se
cargará la nueva página en el frame donde está situado
el enlace. En cambio, el Enlace 2 sí está redireccionado y
si hacemos clic en él la nueva página se cargará en el
frame principal.
<frameset rows="20%,*" frameborder="0"
framespacing="0" border="0">
<html>
<html>
<head>
<head>
</head>
<frame
<frameset rows="100,*,14%" frameborder="0"
<frame
src="anidado2.htm">
src="anidado3.htm">
</frameset>
<frame src="pag2.htm"
name="principal">
<frame
src="anidado4.htm">
</frameset>
</html>
<frame
src="anidado5.htm">
Y en el archivo “pag1.htm” tenemos el siguiente
código:
</frameset>
</frameset>
</frameset>
<html>
</html>
<head>
<title>pag 1</title>
</head>
<body><h3>pagina 1</h3>
<a href="pagina1.htm">Enlace 1</a>|
<a href="pagina2.htm"
target="principal">Enlace 2</a>
</body>
</html>
Partimos de la siguiente pantalla:
11.3- DIRIGIR LOS ENLACES
Un aspecto muy importante es que los enlaces que
colocamos en las 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:
31 de 48
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"
32 de 48
<frame src="pag2b.htm"
name="principal">
•
_top: elimina todos los marcos existentes y carga
la página a pantalla completa.
•
_self: se actualiza el marco donde está situado el
enlace. Es el valor por defecto.
</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>
|
</body>
</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
sobre la ventana que estamos trabajando, si es
que no hay un padre.
•
cols: distribución de marcos verticalmente.
•
rows: distribución de marcos horizontalmente.
•
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.
33 de 48
•
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.
?
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
diferentes utilizando un navegador u otro.
y en Netscape:
resultados
ejemplo08:
<html>
<head><title>Ejemplo 14.8</title></head>
<frameset rows="20%,*" border="15"
bordercolor="blue">
<frame src="anidado2.htm"
scrolling="yes"
bordercolor="red">
A través de estas imágenes podemos ver diferencias
entre lo que nos muestra un navegador y otro.
Observamos que en Internet Explorer sí que muestra la
barra de desplazamiento tal y como hemos establecido
en el código, mientras que en Netscape no la muestra.
También vemos diferencias de interpretación con el
atributo bordercolor.
</frameset>
<frame src="anidado4.htm"
marginwidth="200"
marginheight="100"
noresize>
</frameset>
</frameset>
</frameset>
</html>
En el navegador Interntet Explorer el resultado es el
siguiente:
34 de 48
12-SONIDO
Se puede
navegador.
escuchar
sonido
o
música
desde
el
Los formatos de audio estándar de los
navegadores son los archivos WAV y los MID. Para
poder escuchar otros formatos necesitamos un plug-in.
document.write('<EMBED
SRC="/sonidos/canyon.mid" WIDTH=1
HEIGHT=1 HIDDEN="true"
AUTOSTART="true"
LOOP="true">');
</SCRIPT>
Este código funcionaría de la siguiente
dependiendo del navegador que utilicemos:
12.1- SONIDO ACTIVADO POR EL
USUARIO
El usuario decide si quiere escuchar el sonido. En caso
afirmativo tan sólo ha de pulsar en un enlace o link.
Para ello utilizamos la etiqueta <a> y el atributo href
en el que indicaremos la ruta y nombre del archivo de
audio.
Podemos utilizar el atributo target= “_blank” para
que al pinchar el usuario en el enlace se abra la
aplicación que el usuario tenga asociada con el tipo de
fichero.
ejemplo01:
<html>
<head>
</head>
forma
•
Explorer: el navegador leería la etiqueta
<bgsound> y ejecutaría el archivo de
sonido. Luego leería el script y no entraría
en el sentencia if porque no es Netscape.
•
Netscape:
el
navegador
no
puede
interpretar la etiqueta <bgsound>, y pasaría
a leer el script. En el script sí que cumple la
condición de la sentencia if, por lo tanto
ejecutará la etiqueta <embed>.
12.3- ATRIBUTOS DE <BGSOUND>
En esta etiqueta utilizamos el atributo src para indicar
la ruta y nombre del archivo a reproducir, y el atributo
loop mediante el cual indicamos el número de veces que
se ha de repetir el sonido. Si asignamos el valor
“infinite” al atributo loop el sonido se reproducirá
indefinidamente.
12.4- ATRIBUTOS DE <EMBED>
<body>
•
src: ruta y nombre del archivo a reproducir.
<a href="../sonidos/SOUND1.WAV">Pulsa para
escuchar</a>
•
width y height: para indicar el tamaño del
reproductor.
Son
anchura
y
altura
respectivamente.
•
autostart:
para
indicar
si
se
arranca
automáticamente la reproducción. Los valores son
“true” (para que arranque automáticamente) o
“false” (para que no).
•
loop: para que reproduzca ininterrumpidamente el
archivo de sonido (valor “true”), o no (valor
“false”).
•
hidden: para ocultar (valor “true”), o no (valor
“false”) el reproductor.
<br><br>
<p>Con <code><b>target="_blank"</b></code> al
pinchar el usuario el enlace,
se lanzará la aplicación que
<br>tenga asociada con el tipo de
fichero: 
<a href="../sonidos/SOUND1.WAV"
target="_blank">Pulsa para escuchar</a></p>
</body>
</html>
ejemplo02:
<html>
12.2- SONIDO DE FONDO
Existe un problema y es que Netscape y Explorer
utilizan dos etiquetas distintas. Netscape utiliza la
etiqueta <embed> y Explorer <bgsound>. Ambas
etiquetas son incompatibles entre sí, por esto mismo
la solución al problema hasta hace poco era incluir las
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
navegador es capaz de interpretar la etiqueta <embed>
pero no de la misma manera que Netscape. La solución
final consiste en utilizar un pequeño script que se
encargue de averiguar el navegador utilizado y aplique la
etiqueta correspondiente:
<BGSOUND SRC="../sonidos/canyon.mid"
LOOP="infinite">
<SCRIPT LANGUAGE="Javascript">
<head>
<title>Sonido de fondo</title>
</head>
<body>
<h1>SONIDO DE FONDO</H1>
<HR COLOR="RED">
<p>Netscape y Explorer utilizan para el
sonido dos etiquetas distintas.
Netscape utiliza la etiqueta <EMBED&GT; y
Explorer <BGSOUND>. Luego
para distinguir un navegador del otro
necesitamos un pequeño script.</p>
if (navigator.appName=="Netscape")
35 de 48
<P>El código utilizado ha sido el
siguiente:</P>
<PRE><BGSOUND SRC="/sonidos/canyon.mid"
LOOP="infinite">
SRC="/sonidos/canyon.mid"
WIDTH=20 HEIGHT=30 HIDDEN="true"
AUTOSTART="true" LOOP="true">');
</SCRIPT></PRE>
<BGSOUND SRC="../sonidos/canyon.mid"
LOOP="infinite">
SRC="../sonidos/canyon.mid" WIDTH=1
HEIGHT=1 HIDDEN="true"
AUTOSTART="true"
LOOP="true">');
13-MAPAS
Consisten en incluir varios enlaces dentro de una
misma imagen. Para ello los definimos por medio de
figuras geométricas.
Para hacer un mapa de imagen tenemos primero que
incluir la imagen que vamos a utilizar dentro del <body>
de nuestro código a través de la etiqueta <img>.
Posteriormente debemos de delimitar la imagen en
figuras geométricas dentro de la etiqueta <map>.
En la etiqueta <map> podemos utilizar el atributo name
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
<area>.
13.1- ATRIBUTOS DE <AREA>
•
alt: para indicar el texto que se mostrará cuando
situemos el ratón en el área. También se mostrará
ese texto en el caso de que el navegador no
pueda cargar la imagen en cuestión.
•
coords: para definir las coordenadas del área.
Cada punto de la imagen se define a través de su
altura (X) y anchura (Y). Siendo la esquina
superior izquierda la posición “0,0”, y la esquina
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:
</SCRIPT>
</body>
</html>
?
rect: área rectangular. Para definirla se
utilizan las coordenadas de los puntos de la
esquina superior izquierda y la esquina
inferior derecha.
<area
?
circle: área circular que se indica con la
coordenada del centro del círculo y el radio.
<area
?
shape=
“rect”
coords=
“x1,y1,x2,y2”>
shape=
“circle”
“x1,y1,r”>
coods=
poly: es un área poligonal. Para definirlo
hay que indicar todos sus puntos en orden
siguiendo el camino marcado por el
perímetro del polígono.
<area
shape=
“poly”
coords=
“x1,y1,x2,y2,x3,y3,x4,y4>
36 de 48
</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>
37 de 48
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
la marquesina. Puede ser: arriba (“top”), medio
(“middle”) o abajo (“bottom”).
•
bgcolor: color del fondo de la marquesina. Los
valores son los colores más frecuentes en inglés o
utilizar valores RGB.
<MARQUEE>Texto desplazándose</MARQUEE>
</body>
</html>
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.
•
ejemplo02:
<html>
<head>
</head>
<body>
Con Netscape si aplicamos el valor “alternate” el
texto vá de un lado a otro y vuelve, pero sí que llega a
desaparecer cuando llega a los márgenes.
ejemplo04:
<MARQUEE WIDTH= “50%” HEIGHT= “80”>Marquesina
con el 50% de la ventana de ancho y 80 píxeles
de alto</MARQUEE>
</body>
behavior: sirve para indicar el comportamiento el
cual puede ser el que viene por defecto (valor
“scroll”) con el que el texto vá de un lado a otro
y desaparece, o que el texto se mueva de un lado
a otro y vuelva marcha atrás sin desaparecer
(valor “alternate”).
<MARQUEE BEHAVIOR=ALTERNATE>Texto
desplazándose alternadamente</MARQUEE>
•
direction:
dirección
del
texto.
Los
valores
38 de 48
pueden ser “left” para que se mueva hacia la
izquierda (valor por defecto) o “right” para que
se mueva hacia la derecha.
15-HOJAS DE ESTILO
<MARQUEE DIRECTION="right">Texto desplazándose
hacia la derecha</MARQUEE>
Sirven para definir los detalles de visualización
(tipo y tamaño de letra, márgenes, colores,
aspecto final) de un conjunto de páginas desde un
único fichero. Esto es una gran ventaja en lo que
respecta a tiempo, esfuerzo y reducción de errores.
<MARQUEE DIRECTION="left">Texto desplazándose
hacia la izquierda</MARQUEE>
15.1- <STYLE>
ejemplo05:
•
scrollamount: número de pixels que se
desplazan en cada avance. Cuanto mayor sea el
valor mayor será la rapidez de desplazamiento del
texto en la marquesina.
ejemplo06:
<MARQUEE SCROLLAMOUNT="50">Texto avanzando
rápido</MARQUEE>
<MARQUEE SCROLLAMOUNT="3">Texto avanzando
lento</MARQUEE>
•
scrolldelay: número de milisegundos que dura
cada movimiento de avance. Cuanto mayor sea
más lento irá.
Utilizamos un nuevo atributo para las etiquetas de
HTML: style. De esta manera en vez de especificar los
tradicionales atributos después de la etiqueta, se incluye
un único atributo que comprende todos los elementos
definibles del texto.
Este atributo se puede aplicar a cualquier elemento que
pueda aparecer dentro del cuerpo de un documento
(excepto basefont, param y script), y tiene como
posibles valores una lista de declaraciones de estilo,
separadas por punto y coma.
ejemplo01:
<html>
<head>
ejemplo07:
<MARQUEE SCROLLDELAY="150">Texto avanzando
lento</MARQUEE>
•
loop: número de veces que aparecerá el texto.
Por defecto es infinito (valor “infinite”).
•
hspace: anchura de los márgenes horizontales.
•
vspace: anchura de los márgenes verticales.
Ya fuera de la etiqueta <marquee> es posible decidir la
fuente o el tipo de letra de la marquesina utilizando la
etiqueta <font> que ya conocemos.
</head>
<body>
<P>Este párrafo es normal</p>
<P STYLE = "TEXT-INDENT:60"> SANGRÍA DE 60
</P>
<P STYLE = "FONT-FAMILY:SANS-SERIF"> TIPO DE
LETRA SANS SERIF
</P>
<H3> CABECERA H3 </H3>
ejemplo08:
<font face= "impact, arial" color=
"blue"><MARQUEE SCROLLDELAY="150">Texto
avanzando lento</MARQUEE>
<H3 STYLE= "COLOR:GREEN; FONT-SIZE:18PT">
VERDE Y TAMAÑO = 18
</H3>
</body>
<MARQUEE SCROLLDELAY="1">Texto avanzando
rapido</MARQUEE></font>
</html>
Pero esto no es muy útil, porque tenemos que
39 de 48
estar escribiendo los estilos una y otra vez. Para
solucionar esto lo que hacemos es escribir la etiqueta
<style> y su cierre correspondiente dentro de la
cabecera del documento (<head>), y entre la etiqueta
<style> y su cierre introducimos las especificaciones de
los estilos.
ejemplo02:
<html>
<head>
<STYLE>/*ESTILO PARA EL PARRAFO*/
P,H6{COLOR:RED; FONT-FAMILY:SANS-SERIF;
FONT-SIZE:18PT}
</STYLE>
</head>
<body>
<P> NUEVO ESTILO PARA EL PÁRRAFO </P>
<H6>NUEVO ESTILO PARA CABECERA 6</H6>
</body>
</html>
En este ejemplo podemos observar:
•
La etiqueta <style> se coloca dentro de la
cabecera del documento.
•
Los comentarios dentro de la etiqueta <style>
utilizan la sintaxis:
/* esto es un comentario */
•
•
•
•
Se pueden aplicar las mismas propiedades a
varias etiquetas distintas. Estas etiquetas han de
ser separadas por medio de comas (, ). En
nuestro
ejemplo
aplicamos
las
mismas
propiedades de color, tipo y tamaño de fuente a
las etiquetas de párrafo (<p>) y a la etiqueta de
encabezado 6 (<h6>), entre las cuales incluímos
una coma.
Las propiedades se han de escribir entre llaves
({}) y separadas entre sí por medio del
punto y coma (; ).
Tanto en este ejemplo como en el anterior
(Ejemplo 17.1 ) podemos ver que para asignar
un valor a una propiedad utilizamos dos
puntos (: ) en lugar de un signo igual.
Ahora siempre que utilicemos una etiqueta de
párrafo o una de encabezado 6 en el <body> del
documento, se aplicarán automáticamente dichas
propiedades de color, tamaño y tipo de fuente. El
resto de propiedades propias de dichas
etiquetas permanecen inmutables:
15.2- ESTILOS MEDIANTE CLASES
Hay veces que necesitamos que, por ejemplo, un
párrafo (<p>) tenga diferentes estilos. Para cuando
necesitemos el uso de diferentes versiones de
estilos de un mismo elemento utilizamos las clases.
Para definir una clase se añade un nombre de clase
que queramos al nombre de la etiqueta mediante
un punto:
<style>
H4.PRIMERH4{COLOR:BLUE;FONT-SIZE:10PT;TEXTALIGN:LEFT}
H4.SEGUNDOH4{COLOR:RED;FONT-SIZE:24PT;TEXTALIGN:RIGHT}
</style>
Y para aplicarlo utilizamos el atributo class de la
etiqueta u elemento:
<H4 CLASS= PRIMERH4> PRIMERA CLASE </H4>
<H4 CLASS=SEGUNDOH4> SEGUNDA CLASE </H4>
ejemplo03:
<html>
<head>
<style>
H4.PRIMERH4{COLOR:BLUE;FONTSIZE:10PT;TEXTALIGN:LEFT}
H4.SEGUNDOH4{COLOR:RED;FONTSIZE:24PT;TEXTALIGN:RIGHT}
</style>
</head>
<body>
<H4 CLASS= PRIMERH4> PRIMERA CLASE </H4>
<br>
<H4 CLASS=SEGUNDOH4> SEGUNDA CLASE </H4>
</body>
</html>
40 de 48
15.3- IDENTIFICADORES
Y para definir un estilo genérico sin que esté
asociado
a
ninguna
etiqueta
en
especial
utilizamos la notación punto sin que vaya
precedida de ninguna etiqueta :
Por medio de identificadores se puede definir el
estilo asociado a un elemento concreto.
La sintaxis es igual que con las clases pero en lugar
de un punto utilizan # .Tienen la siguiente forma:
<style>
<STYLE>
.MIESTILO{BORDER-STYLE:SOLID; BORDERCOLOR:RED}
#MiIdentificador{COLOR:RED;FONT-SIZE:18PT;}
</STYLE>
</style>
Y para aplicarlo hacemos lo mismo que antes:
<H2 CLASS = MIESTILO> ESTILO SIN ASOCIAR A UNA
ETIQUETA </H2>
Y para aplicarlos utilizamos el atributo id del objeto o
etiqueta:
<P ID=MiIdentificador> AFECTADO POR EL
IDENTIFICADOR </P>
ejemplo04:
ejemplo05:
<html>
<head>
<html>
<style>
<head>
.MIESTILO{BORDER-STYLE:SOLID; BORDERCOLOR:RED}
<STYLE>
#MiIdentificador{COLOR:RED;FONTSIZE:18PT;}
</style>
</head>
</STYLE>
<body>
</HEAD>
<H2 CLASS=MIESTILO> ESTILO SIN ASOCIAR A UNA
ETIQUETA </H2>
<BODY>
<P> NO AFECTADO </P>
<H4 CLASS=MIESTILO> ESTILO SIN ASOCIAR A UNA
ETIQUETA </H4>
<P ID=MiIdentificador> AFECTADO POR EL
IDENTIFICADOR </P>
</body>
<H2> NO AFECTADO </P>
</html>
<H2 ID=MiIdentificador> AFECTADO POR EL
IDENTIFICADOR </P>
</BODY>
</html>
41 de 48
<LI> SEGUNDO ELEMENTO
DE LA
SEGUNDA LISTA
<P> PÁRRAFO DENTRO DEL
ELEMENTO</P>
<LI> TERCER ELEMENTO
SEGUNDA LISTA
DE LA
</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
problema: un cambio de estilo obliga a modificar
en varios sitios y no en uno sólo. Este problema se
resuelve utilizando los archivos “.css”.
</P>
</BODY>
</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:
15.5- ARCHIVOS “.CSS”
<html>
<head>
<STYLE>
UL{LIST-STYLE-TYPE:SQUARE}
UL OL{FONTSTYLE:ITALIC;COLOR:RED}
UL OL P{FONT-SIZE:20PT}
</STYLE>
</HEAD>
<BODY><CENTER> EJEMPLO DE JERARQUÍA DE ESTILOS
</CENTER>
<UL>
<LI> PRIMER ELEMENTO DE LA PRIMERA
LISTA (DESORDENADA)
Para ello tenemos que crear un archivo con extensión
“.css” en el cual simplemente escribiremos los nombres
de las etiquetas a las cuales queremos dar estilo y las
propiedades que queremos aplicar. La sintaxis es la
misma que la realizada en el ejemplo anterior.
Posteriormente desde el archivo HTML y desde la
cabecera (<head>) tenemos que importar dicho archivo.
Para importarlo tenemos dos opciones:
1. Por medio de la directiva <link>. Suponiendo que
el nombre del fichero fuese “MisEstilos.css”:
<head>
<link rel= "stylesheet" href=
"MisEstilos.css">
<OL>
<LI> PRIMER ELEMENTO
DE LA SEGUNDA
LISTA (ORDENADA)
Esto es lo más útil porque hace que todas nuestras
páginas tengan el mismo formato, y además para
modificar el formato de todas la páginas tan sólo
deberemos modificar este archivo con extensión
“.css”.
</head>
2. Por medio de la sentencia @import. La cual
además de estar en la cabecera, tiene que estar
42 de 48
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;textalign:justify}
H2{Border-color:red}
H3{color:red;border:medium double red;fontweight:bold}
P{color:white;background-color:blue;fontweight:bold}
Posteriormente creamos el archivo HTML y en su
cabecera importamos el css:
<html>
<head>
<link rel= "stylesheet" href=
"css/MisEstilos.css">

Existe un punto muy importante a la hora de aplicar
estilos ya sea por clases, identificadores, archivos css...
y se trata del hecho de que, por ejemplo, aunque
hayamos definido un estilo para un párrafo (<p>) en el
que decimos que el tamaño de la fuente sea de 8, si
luego modificamos el tamaño de fuente del párrafo a
través de la directiva <font> será este último tamaño el
que tenga validez. Es decir, siempre se aplica el
último estilo que afecte al elemento.
15.6- UNIDADES DE LONGITUD
Pueden ser unidades absolutas o relativas y se
componen de un signo + ó – (siendo el primero opcional)
y un número seguido de la unidad de medida y sin
ningún espacio entre ellos.
Unidades absolutas disponibles:
•
in: pulgadas (inches). Una pulgada equivale a
2,54 cm.
<body>
•
cm: centímetros.
EL <BODY> SERÁ ROJO, JUSTIFICADO Y
FUENTE SANS-SERIF
•
mm: milímetros.
<P> COLOR BLANCO, FONDO AZUL
•
pt: puntos. Un punto equivale a 1/72 pulgadas.
</head>
Y las relativas:
FIN DEL PÁRRAFO
</P>
•
em: tamaño equivalente a la altura de la fuente
asociada al elemento.
•
ex: tamaño equivalente a la altura de la letra “x”
correspondiente a la fuente asociada al elemento.
•
px: pixels, relativo a la resolución del área de
visualización.
<H2> GGGGG </H2>
<H3> COLOR ROJO CON BORDE </H3>
</body>
</html>
Ejemplo de unidades:
-2em, 3.2em, 2cm...
15.7- PROPIEDADES DE LAS HOJAS
DE ESTILO
Vamos a ver algunas de las propiedades que podemos
utilizar a la hora de definir estilos:
15.7.1- FUENTES
•
font-family: fuente de letra a utilizar.
•
font-style: estilo de fuente de letra: normal,
italic u oblique.
43 de 48
•
font-weight: grosor de la fuente: normal,
bold, bolder, lighter, 100, 200, 300,
400, 500, 600, 700, 800, 900.
•
font-size: tamaño de la fuente. Admite distintos
tipos de medida: valores absolutos (xx-small, xsmall, small, medium, large, x-large, xxlarge), relativos (larger, smaller), unidades de
longitud o porcentajes.
15.7.2- COLORES Y FONDOS
•
color: color del elemento.
•
background: color de fondo.
•
background-image:
cualquier URL.
•
background-attachment: para indicar si la
imagen de fondo del elemento se mueve (valor
scroll) o permanece fija (fixed) al hacer scroll
del texto.
•
background-repeat: para indicar cómo debe de
repetirse una imagen de fondo: repeat (valor por
defecto), repeat-x (repetir horizontalmente),
repeat-y (repetir verticalmente) y no-repeat (no
repetir).
•
•
imagen
de
fondo.
Admite
background-position: define la posición inicial
de la imagen de fondo. Sus valores pueden ser
longitudes, porcentajes y las palabras clave:
left, center, right, top y bottom.
sólo
en
elementos contenedores
para
indentación de la primera línea de texto.
•
•
margin-top, margin-right, margin-bottom,
margin-left: especifican los márgenes superior,
derecha, inferior e izquierda, respectivamente, de
un elemento. Los valores pueden ser longitudes y
porcentajes.
•
margin: permite definir en un sólo sítio todos los
márgenes del texto. Admite uno, dos o cuatro
valores. En el primer caso representa el tamaño a
aplicar a todos los márgenes. En el segundo caso,
el primer número indica los márgenes superior e
inferior, y el segundo los márgenes izquierda y
derecha. El último caso representa los márgenes
superior,
derecha,
inferior
e
izquierda
respectivamente.
•
padding-top,
padding-right,
paddingbottom,
padding-left:
especifican
respectivamente el espacio entre el contenido del
elemento y los bordes superior, derecha, inferior e
izquierda.
•
padding: para definir en un único sítio todos los
espacios entre el contenido del elemento y los
bordes. Admite uno, dos o cuatro valores. En el
primer caso representa el espacio a aplicar a
todos los bordes. En el segundo caso, el primer
número indica los espacios hasta los bordes
superior e inferior, y el segundo los espacios hasta
los bordes izquierdo y derecho. El último caso
representa los espacios hasta los bordes superior,
derecho, inferior e izquierdo respectivamente.
•
border-top-width,
border-right-width,
border-bottom-width y border-left-width:
especifican respectivamente la anchura de los
elementos
top-border,
right-border,
bottom-border y left-border. Los valores
pueden ser longitudes y las palabras clave: thin,
medium (valor por defecto) y thick.
•
border-width: para definir en un único sitio todos
las anchuras de los borders. Su funcionamiento es
como las propiedades padding y margin.
•
border-color: color de los bordes del elemento.
Su funcionamiento es como la propiedades
padding, margin y border-width.
•
border-style: para los estilos de los bordes.
Valores: none (valor por defecto), dotted,
dashed, solid, double, groove, ridge, inset y
outset, y admite uno, dos o cuatro.
Su
funcionamiento es como las propiedades padding,
margin...
•
border-top, border-right, border-bottom,
border-left: permiten definir de una sola vez
todas las características (anchura, estilo y color)
de los bordes superior, derecha, inferior e
izquierda respectivamente. Sus valores son los
correspondientes a las propiedades borderwidth, border-style y border-color.
•
border: para asignar de una sola vez todas las
características asociadas al borde de un elemento:
anchura, estilo y color. Cualquier asignación que
Ejemplo:
15.7.3- TEXTO
•
word-spacing: define un espacio adicional a
establecer entre las palabras del texto. Valores de
longitud.
•
letter-spacing:
letras del texto.
•
text-decoration:
permite
aplicar
estilos
especiales al texto: none (ninguno, valor por
defecto), underline, overline, line-through
y blink.
espacio
adicional
entre
las
•
vertical-align: colocación vertical del texto en
relación con el elemento contenedor o la línea del
elemento. Sus valores pueden ser porcentajes y
las palabras clave: baseline (valor por defecto),
sub, super,top, text-top, middle, bottom
y text-bottom.
•
text-transformation:
para
realizar
transformaciones en el texto. Valores: none (valor
por
defecto),
capitalize,
uppercase
y
lowercase.
•
text-align: se aplica sólo en elementos
contenedores para alinear el texto que contienen.
Sus valores pueden ser: left, right, center y
justify.
•
text-indent: longitud o porcentaje que se aplica
line-height: espacio entre las líneas de texto.
Los valores pueden ser: un número positivo (que
se multiplicará por el tamaño de la fuente de letra
del elemento), longitudes, porcentajes y la palabra
clave normal (valor por defecto).
15.7.4- CAJAS DE TEXTO
background: permite definir en un único lugar
todas las propiedades asociadas al fondo,
simplemente incluyendo sus valores separados
por un espacio.
background: black url(“imagen.jpg”) fixed
center)
la
44 de 48
se haga con border, se aplicará simultáneamente
a los cuatro bordes del elemento. Los valores son
los correspondientes a border-width, borderstyle y border-color.
•
width, height: anchura y altura del elemento.
Los valores que toma son longitudes y la palabra
clave auto (valor por defecto).
•
float: para indicar cómo flota el texto alrededor
del elemento. Valores: left, right y none (valor
por defecto).
•
clear: determina si un elemento quiere o no que
otros elementos floten a su lado. Valores:
?
none: valor por defecto. Obliga a que el
elemento se coloque debajo de cualquier
elemento que flote a izquierda o derecha.
?
left: el elemento se coloca debajo de
aquellos elementos que floten a su
izquierda.
?
right:el elemento se coloca debajo de
aquellos elementos que floten a su derecha.
?
both: permite que
izquierda y derecha.
floten
elementos
a
15.8- DISCRIMINAR NAVEGADOR
También existen diferencias a la hora de
interpretar órdenes de css dependiendo del
navegador que utilicemos.
•
Enlaces visitados:
A:visited {atributos}
•
Enlaces activos (cuando se hace click sobre ellos):
A:active {atributos}
•
Enlaces hover (cuando el ratón está encima de
ellos):
A:hover {atributos}
El atributo para definir enlaces sin subrayado es textdecoration:none, para mantener el subrayado es
text-decoration:underline, y para darles color es
color:tu_color.
ejemplo08:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0
Transitional//EN">
<html>
<head>
<title>ejemplos08</title>
<STYLE type="text/css">
A:link {textdecoration:none;color:#0000FF;}
A:visited {textdecoration:none;color:red;}
La diferencia más notable es en el tamaño de fuente.
En Netscape la letra es un punto más pequeña.
A:active {textdecoration:none;color:#446EA3;}
Para solucionar esto debemos de hacer dos hojas de
estilo, una para Internet Explorer (ie.css) y otra para
Netscape (ns.css ) y discriminar entre una u otra
utilizando un pequeño script:
A:hover {textdecoration:underline;color:blue;fontweight:bold}
</STYLE>
</head>
<body>
document.write('<LINK REL= "STYLESHEET"
TYPE= "TEXT/CSS" HREF= "css/ns.css">');
else
<a href="http://www.pepito.com">Enlace
normal</a>
<br>
document.write('<LINK REL= "STYLESHEET" TYPE=
"TEXT/CSS" HREF= "css/ie.css">');
<br>
Pulsar este enlace para verlo activo,
</SCRIPT>
15.9- ESTILO EN LOS ENLACES
A través de las hojas de estilo podemos definir el estilo
de los enlaces. Esto nos permite hacer cosas como quitar
el subrayado o hacer enlaces en la misma página con
distintos colores.
poner el ratón por encima para que
cambie:<br>
<A href="http://www.google.com">Enlace
visitado</a>
</body>
</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}
45 de 48
16-OBJETOS
16.1- LA ETIQUETA <APPLET>
Permite introducir programas Java
applets) dentro de una página web.
(concretamente
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
parámetro dentro del applet.
•
value: valor concreto del parámetro.
•
valuetype:
optativo.
tipo
de
atributo
será
identificado
value. Su
uso
el
es
Valores:
•
?
data: hace que value se mande al applet u
objeto como un string. Es el valor por defecto.
?
ref: value contiene la URL donde se pueden
localizar los valores en tiempo de 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
navegadores son los dos primeros.
por
todos
los
16.1.2- ATRIBUTOS DE <applet>
46 de 48
•
codebase: especifica la URL donde está localizado
tanto el applet como todos los recursos (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
ejecución del applet, que son precargados por el
navegador. Al precargar se acelera el proceso de
ejecución de los applets. No es reconocido por
Internet Explorer.
También tenemos atributos que ya hemos visto en
otras ocasiones como: width, height, align, hspace y
vspace.
ejemplo01:
Lo primero de todo, es necesario tener el programa del
applet. El applet que vamos a utilizar se llama
SineText.class.
Se trata de un applet que hace que un texto (elegido
por el usuario) se desplace formando una onda
sinusoidal, en dirección reversible con un click del ratón.
Se pueden escoger los colores del fondo y de las letras,
elegir entre algunos tipos de fuentes, su tamaño,
velocidad de desplazamiento, etc.
</html>
ejemplo02:
<html>
<head>
</head>
<body>
<APPLET codebase="../applets"
CODE="DigClk.class" WIDTH=122 HEIGHT=29>
Aquí habría un reloj si tu navegador soportase
Java
</APPLET>
</body>
</html>
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
Courier.
16.2- ETIQUETA
•
FontSize - Tamaño de la fuente.
•
TextStyle - Estilo de la fuente: Plain, Bold (defecto) o
Italic.
•
Speed - Velocidad de desplazamiento 1-10 (5 es por
defecto)
Los plugins son programas auxiliares capaces de
manejar formatos especiales de ficheros, que se
incorporan al navegador y se ejecutan dentro de la
ventana de visualización. Se incluyen en la página a
través de la directiva <embed>, la cual hemos visto en el
apartado de sonido junto con un ejemplo.
•
Direction - Dirección inicial del desplazamiento. Left
(defecto) o Right.
•
Background - Color del fondo. 000000 (negro) es por
defecto.
•
ForeGround - Color del texto. FF0000 (rojo) es por
defecto.
El código es el siguiente:
<html>
<head><title>ejemplo01</title></head>
<embed>
16.2.1- ATRIBUTOS DE <embed>
•
name: nombre del objeto contenido en el plugin.
•
src: localización del fichero a reproducir.
•
pluginspage: URL donde el usuario encontrará
instrucciones sobre cómo instalar el plugin.
•
units: unidad de medida para los atributos height y
width. Pueden ser pixels o en.
Y atributos que ya conocemos como height, width y
align.
<body>
16.3- ETIQUETA
<p align="center">
<APPLET codebase="../applets"
CODE="SineText.class" WIDTH=470 HEIGHT=75>
<PARAM NAME=Text VALUE="Curso de HTML y CSS">
<PARAM NAME=Rate VALUE="4">
<PARAM NAME=Font VALUE="Verdana">
<PARAM NAME=Background VALUE="#000000">
<object>
El Elemento object, sirve de solución genérica para la
incluir "objetos" en los documentos. Estos "objetos"
pueden ser: imágenes, applets, otros documentos HTML,
etc...
La estructura es muy similar a la de la etiqueta
<applet>, con la inclusión entre <object> y su cierre de
directivas <param> y contenido alternativo que se
mostrará en navegadores que no soporten el objeto.
<PARAM NAME=ForeGround VALUE="#ffffff">
Lo siento, pero no puedes ver este applet
funcionando.
</APPLET></body>
16.3.1- ATRIBUTOS
•
classid: Sirve para especificar la localización de los
datos del objeto, para su evaluación. Este atributo
47 de 48
puede utilizarse conjuntamente con el atributo data o
como alternativa a éste. Dependerá del tipo de
objeto. Su valor es una 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.
•
type: Especifica el tipo de contenido especificado por
el atributo data. Es opcional, pero se recomienda su
uso si se va a utilizar el atributo data, ya que evita la
carga de tipos de contenido que no sean soportados
por el navegador.
•
•
Se pueden anidar etiquetas <object>. Esto es útil para
ofrecer objetos alternativos a los navegadores.
Ejemplo:
archive: Puede utilizarse para relacionar una serie
de URLs de archivos que contengan recursos relativos
al objeto en cuestión. Puede incluir los recursos
especificados en los atributos classid y data. La
lista debe ir separada por espacios en blanco. Si se
utilizan direcciones relativas, se resolverán en base al
atributo codebase.
<object data= “musica.mov” width= “200”
height= “150” border= “2”>
declare: Cuando se utiliza este atributo, convierte la
definición del objeto en una simple "declaración". El
objeto queda incrustado, pero inactivo. Para activar el
objeto, deberá utilizarse, con posterioridad, otra
definición de objeto que haga referencia a esta
declaración.
Lo siento pero no se puede cargar ni el vídeo,
ni la imagen.
•
stanby: Este atributo especifica un mensaje que será
mostrado mientras se cargan los datos del objeto.
•
usemap: Asocia un mapa de imagen con un elemento.
La gran ventaja con respecto a <img> es que al
colocar la 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
enlaces del mapa.
Y atributos que ya conocemos como height, width,
border, hspace, vspace y align.
ejemplo03:
<object data= “../imagenes/478-alienp3.gif”
width= “200” height= “150” border= “2”>

</object>
Fuentes tomadas como referencia:
•
El libro “HTML 4” de Alonso Álvarez García y José
Ángel Morales Grela.
•
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>
48 de 48

HTML 4.0 y CSS.sxw - Grupo Binary Horizon

Transcripción

Documentos relacionados

Etiquetas ADR

Un curso especial y diferente para ti

etiquetas para equipos motorola contactos para equipos motorola

FOSCO - Merkal Calzados