Html4 0 by Marixa Gloribel de Ochoa

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

Curso de HTML 4.0 y CSS 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

Curso de HTML 4.0 y CSS 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

Curso de HTML 4.0 y CSS

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

&lt;

signo mayor que

&gt;

signo ampersand

&amp;

“

comillas

&quot;

espacio en blanco

&nbsp;

“ñ” minúscula

&ntilde;

“ñ” mayúscula

&Ntilde;

“a” minúscula acentuada

&aacute;

“a” mayúscula acentuada

&Aacute;

“e” minúscula acentuada

&eacute;

&copy;

marca registrada

&reg;

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

Curso de HTML 4.0 y CSS

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

indica

que

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 •

•

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

Colección FAST LEARNING -

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:

•

Quark Inside S.L. - Gorka Calleja Urraca (Departamento Técnico)

6 de 48

Curso de HTML 4.0 y CSS

•

CONTACT_ADDR: Para definir la dirección de correo electrónico que la gente debería usar para hacer contacto con usted:

•

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,

apunta

imagen

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

•

</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&oacute;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">

Colección FAST LEARNING -

Quark Inside S.L. - Gorka Calleja Urraca (Departamento Técnico)

7 de 48

Curso de HTML 4.0 y CSS

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 &lt;div&gt;.</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 &lt;br&gt; <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> Colección FAST LEARNING -

</div>

Quark Inside S.L. - Gorka Calleja Urraca (Departamento Técnico)

8 de 48

Curso de HTML 4.0 y CSS

<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:

•

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> <title>Ejemplo03</title> </head> <body> <p>Vamos a ver los 6 tipos de encabezados:<br> <h1>Encabezado de nivel 1</h1> <h2>Encabezado de nivel 2</h2> <h3>Encabezado de nivel 3</h3> <h4>Encabezado de nivel 4</h4>

•

<cite>: para textos que representen citas de autor.

ejemplo05:

<h5>Encabezado de nivel 5</h5> <h6>Encabezado de nivel 6</h6> </p>

<cite>Tanto va el cantaro a la fuente<br>que al final aprende a ir sólo.<br>Pedro Reyes.</cite>

</body> </html>

Colección FAST LEARNING -

Quark Inside S.L. - Gorka Calleja Urraca (Departamento Técnico)

9 de 48

Curso de HTML 4.0 y CSS

•

<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 &lt;code&gt;:<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>

Colección FAST LEARNING -

Quark Inside S.L. - Gorka Calleja Urraca (Departamento Técnico)

10 de 48

Curso de HTML 4.0 y CSS

•

<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 &lt;pre&gt; 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:&nbsp;<tt>Tipo de letra de paso fijo (estilo teletipo) utilizando la etiqueta &lt;tt&gt;.</tt>

Colección FAST LEARNING -

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:

Quark Inside S.L. - Gorka Calleja Urraca (Departamento Técnico)

11 de 48

Curso de HTML 4.0 y CSS 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:&nbsp;<strong>Texto resaltado utilizando la etiqueta &lt;strong&gt;</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:&nbsp;<b>Texto en negrita utilizando la etiqueta &lt;b&gt;</b>

Colección FAST LEARNING -

Quark Inside S.L. - Gorka Calleja Urraca (Departamento Técnico)

12 de 48

Curso de HTML 4.0 y CSS

•

<em>: texto enfatizado.

ejemplo03: Ejemplo:&nbsp;<em>Texto enfatizado utilizando la etiqueta &lt;em&gt;</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 &lt;u&gt;</u><br> <s>Texto tachado </s> utilizando la etiqueta &lt;s&gt<br>

•

<i>: texto en itálica.

ejemplo04: Ejemplo:&nbsp;<i>Texto en italic utilizando la etiqueta &lt;i&gt;</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 &lt;sup&gt;: E = mc<sup>2</sup></p> <p>Letra subíndice utilizando &lt;sub&gt;: a<sub>i, j</sub> =

Colección FAST LEARNING -

Quark Inside S.L. - Gorka Calleja Urraca (Departamento Técnico)

13 de 48

Curso de HTML 4.0 y CSS mediante valores RGB.

b<sub>i, j</sub>+ 1</p> <big>Aumentamos el tamaño de la letra por medio de &lt;big&gt;.</big><br> <small>Disminuimos el tamaño utilizando &lt;small&gt;.</small><br>

ejemplo07: Ejemplo:&nbsp;<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,

Colección FAST LEARNING -

Quark Inside S.L. - Gorka Calleja Urraca (Departamento Técnico)

14 de 48

Curso de HTML 4.0 y CSS

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 &lt;UL&gt; nos permite presentar listas de <br>elementos sin orden alguno.</li> <li>Cada elemento de la lista ir&aacute; normalmente<br>precedido por un c&iacute;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>

Colección FAST LEARNING -

Quark Inside S.L. - Gorka Calleja Urraca (Departamento Técnico)

15 de 48

Curso de HTML 4.0 y CSS 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"> <li>Primer elemento.</li> <li>Segundo elemento.</li> <li>Tercer elemento.</li> </ol>

•

i: por números romanos.

•

I: por números romanos en mayúsculas.

ejemplo06: <ol type= "i"> <li>Primer elemento.</li> <li>Segundo elemento.</li> <li>Tercer elemento.</li> </ol> <ol type= "I"> <li>Primer elemento.</li>

•

a: por letras.

<li>Segundo elemento.</li>

•

A: por letras mayúsculas.

<li>Tercer elemento.</li>

ejemplo05:

</ol>

<ol type= "a"> <li>Primer elemento.</li> <li>Segundo elemento.</li> <li>Tercer elemento.</li> </ol> <ol type= "A"> <li>Primer elemento.</li> <li>Segundo elemento.</li> <li>Tercer elemento.</li> </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:

Colección FAST LEARNING -

Quark Inside S.L. - Gorka Calleja Urraca (Departamento Técnico)

16 de 48

Curso de HTML 4.0 y CSS

<ol start="8" type="I"> <li>He puesto que start sea igual a 8.</li> <li>vemos que luego continua por s&iacute; 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&oacute;n del primer elemento. <dt>Segundo elemento<dd>Esta es la definici&oacute;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>Primer elemento.</li> <li>Segundo elemento.</li> <li value="15"><strong>Utilizamos value="15".</strong></li> <li>Autom&aacute;ticamente contin&uacute;a la numeraci&oacute;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&uacute;tbol. <ul> <li>Real Madrid</li> <ol> <li value="7"> Ra&uacute;l</li> <li>Figo</li> </ol> <li>Valladolid</li> </ul>

6.3- LISTAS DE DEFINICIÓN.

<dt>Alemania:<dd>Equipo alemanes de

En este tipo de lista se muestra cada uno de los Colección FAST LEARNING -

Quark Inside S.L. - Gorka Calleja Urraca (Departamento Técnico)

17 de 48

Curso de HTML 4.0 y CSS

f&uacute;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

•

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 Colección FAST LEARNING -

Quark Inside S.L. - Gorka Calleja Urraca (Departamento Técnico)

18 de 48

Curso de HTML 4.0 y CSS que vamos a utilizar. Cuando queremos acceder a un fichero situado en la misma máquina que la página web que estamos creando podemos utilizar rutas relativas:

<a name="abajo"></a>

ruta_relativa/fichero En la ruta relativa podremos utilizar los dos puntos (..) para acceder al directorio padre o comenzar con la barra diagonal (/) para acceder a una ruta absoluta dentro de nuestro ordenador.

ejemplo01: <a href="http//www.google.com">Ir a Google.com</a><br> Enlace ftp: <a href="FTP://anonymous@ftp.rediris.es">ftp.redi ris.es</a><BR> Enlace con una dirección e-mail: <a href="MAILTO:gorka@usuarios.retecal.es">gorka@ usuarios.retecal.es</a><br> Enlace con news:&nbsp; <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:&nbsp;

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):&nbsp; <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>   Colección FAST LEARNING -

Quark Inside S.L. - Gorka Calleja Urraca (Departamento Técnico)

19 de 48

Curso de HTML 4.0 y CSS

height=100 width=160 alt="Ordenador saltando"><br> <img src="../imagenes/happysmclr.gif" border="5"> <img src="../imagenes/happysmclr.gif" 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.

Colección FAST LEARNING -

<br

<img src="../imagenes/happysmclr.gif"

clear =left> Busca el primer margen libre (clear) a la izquierda.

clear

right> Busca el primer

margen libre a la derecha.

ejemplo01: <img src="../imagenes/happysmclr.gif" alt="Ordenador saltando"><br>

de la

clear =all> Busca el margen libre a ambos lados. <br

primer

ejemplo02: <dl>

Quark Inside S.L. - Gorka Calleja Urraca (Departamento Técnico)

20 de 48

Curso de HTML 4.0 y CSS

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> <img src="../imagenes/happysmclr.gif"

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>&nbsp; border="3"> Texto. <dt><VAR>BOTTOM</VAR><dd>

<img src="../imagenes/happysmclr.gif" 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> &nbsp; <a href="mailto:gorka@usuarios.retecal.es"><img src="../imagenes/e_mail.gif" alt="e-mail" align="top" border="0">

8.1- ELECCIÓN DE FORMATO GRÁFICO Normalmente se opta entre imágenes GIF o JPEG. Las imágenes en JPEG presentan más calidad y su tamaño es menor, lo que se traduce en menor tiempo de transmisión , si bien el mecanismo de descompresión ralentiza la parte final de la transferencia. Las GIF son reconocidas por todos los navegadores y presentan ventajas como transparencias y movimiento.

Colección FAST LEARNING -

Quark Inside S.L. - Gorka Calleja Urraca (Departamento Técnico)

21 de 48

Curso de HTML 4.0 y CSS

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

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&iacute;tulo de la tabla</font>

principal

tabla

pixels

ejemplo02:

<tr> <td>celda 1,1</td> <td>celda 1,2</td> <td>celda 1,3</td>

</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> Colección FAST LEARNING -

Quark Inside S.L. - Gorka Calleja Urraca (Departamento Técnico)

22 de 48

Curso de HTML 4.0 y CSS

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.

•

bordercolor: color del borde.

•

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).

celda

pixels

la celda

pixels o

ejemplo04:

ejemplo03: <table border="1" width="500" cellpadding="15">

<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).

Colección FAST LEARNING -

</tr> </table>

Quark Inside S.L. - Gorka Calleja Urraca (Departamento Técnico)

23 de 48

Curso de HTML 4.0 y CSS

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>

•

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> <td>Celda 1,2 - tabla 2</td> </tr> <tr> <td>Celda 2,1 - tabla 2</td> <td>Celda 2,2 - tabla 2</td> </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:gorkaccu@msn.com" method="post" enctype="text/plain"></form>

Colección FAST LEARNING -

Quark Inside S.L. - Gorka Calleja Urraca (Departamento Técnico)

24 de 48

Curso de HTML 4.0 y CSS

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: <FORM ACTION="MAILTO:gorkaccu@msn.com" 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.

<FORM ACTION="MAILTO:gorkaccu@msn.com" method="post" enctype="text/plain"> <p>Password: <input type="password" name= "password"></p> <textarea name="comentario" rows="10" cols="40">Escribe tu comentario... </textarea> </form>

ejemplo02: <FORM ACTION="MAILTO:gorkaccu@msn.com" method="post" enctype="text/plain"> <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>

Colección FAST LEARNING -

Quark Inside S.L. - Gorka Calleja Urraca (Departamento Técnico)

25 de 48

Curso de HTML 4.0 y CSS

</select> </p> <p><var><b>MULTIPLE</var></b>&nbsp; <SELECT NAME="jugadores" size="4" align="top" multiple> <option>Ra&uacute;l</option> <option>Zidane</option> <option>Figo</option> <option>Roberto Carlos</option> </select> </p> <p><var><b>SELECTED</var></b>&nbsp; <SELECT NAME="jugadores" size="4" align="top" > <option>Ra&uacute;l</option>

10.2- LISTAS DE OPCIONES

<option>Zidane</option>

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> <option>Roberto Carlos</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: <FORM ACTION="MAILTO:gorkaccu@msn.com" method="post" enctype="text/plain"> <SELECT NAME="jugadores"> <option>Ra&uacute;l</option> <option>Zidane</option> <option>Figo</option> <option>Roberto Carlos</option> </select> <p><var><b>SIZE="2"</var></b>&nbsp; <SELECT NAME="jugadores" size="2" align="top"> <option>Ra&uacute;l</option> <option>Zidane</option> <option>Figo</option> <option>Roberto Carlos</option>

Colección FAST LEARNING -

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

Quark Inside S.L. - Gorka Calleja Urraca (Departamento Técnico)

26 de 48

Curso de HTML 4.0 y CSS 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

las

ejemplo05: <FORM ACTION="MAILTO:gorkaccu@msn.com" method="post" enctype="text/plain"> <input type="radio" name="jugadores" value="1">Ra&uacute;l <br> <input type="radio" name="jugadores" value="2">Zidane <br>

La información que se enviará será:

<input type="radio" name="jugadores" 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> <input type="radio" name="jugadores" value="4">Roberto Carlos

Figo

jugadores = 3

<br><br> Atributo <var><b>CHECKED</var></b>&nbsp;en la segunda opción:<br><br>

<input type="radio" name="jugadores" value="1">Ra&uacute;l <br> <input type="radio" name="jugadores" value="2" checked>Zidane <br> <input type="radio" name="jugadores" value="3">Figo <br> <input type="radio" name="jugadores" 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:pepito@usuarios.retecal.es" method="post" enctype="text/plain"> <input type="checkbox" name="futbol">Me gusta el f&uacute;tbol <br><br> Podemos activar por defecto la caja utilizando el atributo <var><b>CHECKED</var></b>:<br><u>Ejemplo:</u><

Colección FAST LEARNING -

Quark Inside S.L. - Gorka Calleja Urraca (Departamento Técnico)

27 de 48

Curso de HTML 4.0 y CSS sirve para borrar el formulario por completo en el caso de que el usuario desee rehacerlo desde el principio.

br><br>&nbsp; <input type="checkbox" name="futbol" checked>Me gusta el f&uacute;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: <FORM ACTION="MAILTO:pepito@msn.com" method="post" enctype="text/plain"> <input type="submit" value="Enviar"> <input type="reset" value="Borrar"> </form>

La información que programa será del tipo:

llegará

nuestro

correo

valor de name = on (u off si está desactivada) En el ejemplo anterior si activamos la casilla información que llegará al correo espacificado será:

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: <FORM ACTION="MAILTO:pepito@msn.com" method="post" enctype="text/plain"> <input type="button" value="Texto escrito en el bot&oacute;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:

correo

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 Colección FAST LEARNING -

Quark Inside S.L. - Gorka Calleja Urraca (Departamento Técnico)

28 de 48

Curso de HTML 4.0 y CSS

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> <title>ejemplo01</title> </head> <frameset rows="100,*,14%"> <frame src="pag1.htm"> <frame src="pag2.htm"> <frame src="pag3.htm"> página

<noframes><p>No podrás ver esta si el navegador no soporta

Colección FAST LEARNING -

Quark Inside S.L. - Gorka Calleja Urraca (Departamento Técnico)

29 de 48

Curso de HTML 4.0 y CSS

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> <title>ejemplo04</title> </head> <frameset rows="20%,*"> <frame src="anidado1.htm"> <frameset cols="20%,*"> <frameset rows="60%,*">

70 pixels

Para conseguir esta división de marcos editamos el siguiente código:

</frameset>

<html>

<head>

<title>ejemplo03</title>

</head> <frameset rows =”20%, *, 70”> <frame src=”pag1.htm”>

</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” Colección FAST LEARNING -

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

Quark Inside S.L. - Gorka Calleja Urraca (Departamento Técnico)

30 de 48

Curso de HTML 4.0 y CSS 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.

<html>

<html> <head> <title>ejemplo05</title>

<head> <title>ejemplo06</title> </head>

<frame

<frame

src="anidado2.htm"> src="anidado3.htm"> </frameset>

</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:

Colección FAST LEARNING -

Quark Inside S.L. - Gorka Calleja Urraca (Departamento Técnico)

31 de 48

Curso de HTML 4.0 y CSS

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> <title>ejemplo07</title> </head> <frameset rows="100,*,20%" frameborder="0" framespacing="0" border="0"> <frame src="pag1.htm"> Colección FAST LEARNING -

Quark Inside S.L. - Gorka Calleja Urraca (Departamento Técnico)

32 de 48

Curso de HTML 4.0 y CSS

•

_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.

<frame src="pag3.htm"> </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.

•

bordercolor: color del borde.

•

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> • Colección FAST LEARNING -

scr: para indicar el archivo que contiene el marco.

Quark Inside S.L. - Gorka Calleja Urraca (Departamento Técnico)

33 de 48

Curso de HTML 4.0 y CSS

•

•

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="anidado1.htm"> <frameset cols="20%,*"> <frameset rows="60%,*"> <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.

<frame src="anidado5.htm"> </frameset> </frameset> </frameset> </html> En el navegador Interntet Explorer el resultado es el siguiente:

Colección FAST LEARNING -

Quark Inside S.L. - Gorka Calleja Urraca (Departamento Técnico)

34 de 48

Curso de HTML 4.0 y CSS

12-SONIDO Se puede navegador.

escuchar

sonido

música

desde

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> <title>ejemplo01</title> </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:&nbsp; <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 &lt;EMBED&GT; y Explorer &lt;BGSOUND&gt;. Luego para distinguir un navegador del otro necesitamos un pequeño script.</p>

if (navigator.appName=="Netscape")

Colección FAST LEARNING -

Quark Inside S.L. - Gorka Calleja Urraca (Departamento Técnico)

35 de 48

Curso de HTML 4.0 y CSS

<P>El c&oacute;digo utilizado ha sido el siguiente:</P> <PRE>&lt;BGSOUND SRC="/sonidos/canyon.mid" LOOP="infinite"> &lt;SCRIPT LANGUAGE="Javascript"> if (navigator.appName=="Netscape") document.write('&lt;EMBED SRC="/sonidos/canyon.mid" WIDTH=20 HEIGHT=30 HIDDEN="true" AUTOSTART="true" LOOP="true">'); &lt;/SCRIPT></PRE>

<BGSOUND SRC="../sonidos/canyon.mid" LOOP="infinite"> <SCRIPT LANGUAGE="Javascript"> if (navigator.appName=="Netscape") document.write('<EMBED 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>

Colección FAST LEARNING -

Quark Inside S.L. - Gorka Calleja Urraca (Departamento Técnico)

36 de 48

Curso de HTML 4.0 y CSS

</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>

Colección FAST LEARNING -

Quark Inside S.L. - Gorka Calleja Urraca (Departamento Técnico)

37 de 48

Curso de HTML 4.0 y CSS

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> <title>ejemplo01</title> </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> <title>ejemplo02</title> </head> <body>

Colección FAST LEARNING -

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

Quark Inside S.L. - Gorka Calleja Urraca (Departamento Técnico)

texto.

Los

valores 38 de 48

Curso de HTML 4.0 y CSS 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:

<title>ejemplo01</title>

<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 Colección FAST LEARNING -

Quark Inside S.L. - Gorka Calleja Urraca (Departamento Técnico)

39 de 48

Curso de HTML 4.0 y CSS estar escribiendo los estilos una y otra vez. Para solucionar esto lo que hacemos es escribir la etiqueta <style> y su cierre correspondiente dentro de la cabecera del documento (<head>), y entre la etiqueta <style> y su cierre introducimos las especificaciones de los estilos.

ejemplo02: <html> <head> <title>Ejemplo02</title> <STYLE>/*ESTILO PARA EL PARRAFO*/ P,H6{COLOR:RED; FONT-FAMILY:SANS-SERIF; FONT-SIZE:18PT} </STYLE> </head> <body> <P> NUEVO ESTILO PARA EL PÁRRAFO </P> <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> <title>Ejemplo03</title> <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>

Colección FAST LEARNING -

Quark Inside S.L. - Gorka Calleja Urraca (Departamento Técnico)

40 de 48

Curso de HTML 4.0 y CSS

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>

<title>ejemplo04</title> <style>

<head> <title>ejemplo05</title>

.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>

Colección FAST LEARNING -

Quark Inside S.L. - Gorka Calleja Urraca (Departamento Técnico)

41 de 48

Curso de HTML 4.0 y CSS

<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> <title>ejemplo06</title> <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)

Colección FAST LEARNING -

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

Quark Inside S.L. - Gorka Calleja Urraca (Departamento Técnico)

42 de 48

Curso de HTML 4.0 y CSS 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> <title>Ejemplo07</title> <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 &lt;BODY&gt; 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

Colección FAST LEARNING -

•

font-family: fuente de letra a utilizar.

•

font-style: estilo de fuente de letra: normal, italic u oblique.

Quark Inside S.L. - Gorka Calleja Urraca (Departamento Técnico)

43 de 48

Curso de HTML 4.0 y CSS

•

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-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

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

Colección FAST LEARNING -

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)

Quark Inside S.L. - Gorka Calleja Urraca (Departamento Técnico)

44 de 48

Curso de HTML 4.0 y CSS 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

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>

if (navigator.appName=="Netscape") 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&oacute;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}

Colección FAST LEARNING -

Quark Inside S.L. - Gorka Calleja Urraca (Departamento Técnico)

45 de 48

Curso de HTML 4.0 y CSS

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:

•

•

value: valor concreto del parámetro.

•

valuetype: optativo.

tipo

atributo

será

identificado

value. Su

uso

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>

Colección FAST LEARNING -

Quark Inside S.L. - Gorka Calleja Urraca (Departamento Técnico)

46 de 48

Curso de HTML 4.0 y CSS

•

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.

•

•

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> <title>ejemplo02</title> </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> •

•

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

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>

Colección FAST LEARNING -

16.3.1- ATRIBUTOS •

classid: Sirve para especificar la localización de los datos del objeto, para su evaluación. Este atributo

Quark Inside S.L. - Gorka Calleja Urraca (Departamento Técnico)

47 de 48

Curso de HTML 4.0 y CSS 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.

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>

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

Colección FAST LEARNING -

Quark Inside S.L. - Gorka Calleja Urraca (Departamento Técnico)

48 de 48