P. 1
HTML

HTML

|Views: 321|Likes:
Publicado porapi-19764218

More info:

Published by: api-19764218 on Nov 28, 2009
Copyright:Attribution Non-commercial

Availability:

Read on Scribd mobile: iPhone, iPad and Android.
download as DOC, PDF, TXT or read online from Scribd
See more
See less

03/18/2014

pdf

text

original

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

:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> que indica la versión HTML.

Para que una página se lea en todo el mundo, existen ciertos códigos para ello: Acento grave→ Formato & letra grave; Acento agudo → Formato & letra acute; Diéresis → Formato & letra uml; Acento circunflejo → Formato & letra circ; ̃ → Formato & letra tilde; Hay otros caracteres como:
Carácter € ç Ç ü Ü & ¿ ¡ " · º ª ¬ © ® Representación &euro; &ccedil; &Ccedil; &uuml; &Uuml; &amp; &iquest; &iexcl; &quot; &middot; &ordm; &ordf; &not; &copy; &reg;

P.E. P.E. P.E. P.E. P.E.

_xxx& agrave; xxx _xxxàxxx

_xxx&aacute; xxx _ xxxáxxx _xxx&auml; xxx _ xxxäxxx _xxx&acirc; xxx _ xxxâxxx _xxx&ntilde; xxx _ xxxñxxx

CABECERA DE UN DOCUMENTO HTML TITLE _ Nombre del documento, título de la ventana. No admite parámetros.

1/51

HTML <TITLE> Mi p&aacute;gina </TITLE> BASE _ Especifica la URL de partida de las referencias relatives. Lleva los parámetro:
<BASE HREF =”…URL…”>

o un nombre de fichero:
<BASE HREF=”FILE://C:\Html..”>

o un nombre de otra página:
<BASE HREF=http://www....>

ISINDEX _ Se utiliza para poner palabras claves para la búsqueda de documentos. Se necesita en el servidor una cosa para buscar palabras, por lo que utiliza poco. LINK _ Establece relaciones con otras páginas, hojas de estilo… STYLE _ Da estilos diferentes para la visualización del documento:
<STYLE> H2{TEXT ALIGN=CENTER COLOR =Green} </STYLE>

SCRIPT _ Anuncia o permite la introducción de construcciones ejecutrables. También se puede poner en el BODY del documento. META _ Se utiliza para añadir información sobre la página. Esta información puede ser utilizada por los buscadores. Los buscadores consultan la información de la etiqueta <meta> de las páginas, buscando coincidencias con lo que el usuario pretende encontrar. A través de esta etiqueta pueden especificarse los atributos name y content. El atributo name indica el tipo de información, y el atributo content indica el valor de dicha información.. Tienen estructura de pares de nombres, nombre valor, nombre valor.
Tipo Significado Autor de la página Palabras para clasificar la página en los buscadores Descripción del contenido de la página Programa utilizado para crear la página Palabras clave

author classification description generator keywords

La etiqueta <meta> no necesita etiqueta de cierre. Para cada etiqueta <meta> solo es posible indicar un tipo de información y su valor, pero es posible insertar varias etiquetas <meta> en un mismo documento.
Por ejemplo, el siguiente código indica que el autor de la página es aulaclic, que la página trata sobre un curso de HTML gratuito, y especifica algunas palabras clave a ser consultadas por los buscadores:

<html> <head> ... <meta name="author" content="aulaclic">

2/51

HTML
<meta name="description" content="Curso de HTML gratuito"> <meta name="keywords" content="código HTML etiqueta página web gratis curso"> </head> ...

La etiqueta <meta> también se utiliza para indicarle al navegador alguna información o alguna acción que debe realizar. En este caso se utiliza el atributo http-equiv, en lugar del atributo name. Para decir el tipo de caracteres que lleva se pone:
<META http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

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

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

De este modo, el navegador realizaría la función de actualizar la página, pero cargando la que se encontrara en la nueva dirección
(URL=http://www.aulaclic.com/index.htm).

CUERPO DEL DOCUMENTO Formateo de texto: Líneas que solamente contien texto y bloques cuando hablamos de conjunto de líneas. Atributos: Opciones que incluímos para todo el cuerpo del documento. Están separados por blancos y solo aparecen una vez en la etiqueta BODY.

3/51

HTML Para especificar un color de fondo, tenemos el parámetro BGCOLOR de la directiva <BODY>:
<BODY BGCOLOR="#rrggbb"> <!-- ... cuerpo del documento --> </BODY>

dónde rrggbb es un triplete de valores en hexadecimal que nos permite especificar la intensidad de las componentes roja (red), verde (green) y azul (blue) que tendrá el documento como color de fondo. Por ejemplo, FF0000 es rojo, 00FF00 es verde, 0000FF es azul, XXXXXX son tonos de grises, FFFFFF es blanco, 000000 es negro, FFFF00 es amarillo, FF00FF es magenta y 00FFFF es cian. BASEFONT _ El tamaño asociado por omisión al texto normal es el 3, pero esto no tiene porqué ser así. Se puede presentar toda la página en un tamaño de letra mayor o menor al habitual.. La etiqueta utilizada es:
<BASEFONT SIZE =i>

Que afecta a todo el texto a partir de ella. No existe ninguna etiqueta de cierre, por tanto su efecto actúa sobre el texto hasta la siguiente etiqueta <BASEFONT SIZE =j>. Para definir el color y tipo de fuente utilizamos las etiquetas,
<BASEFONT COLOR =”RED” FACE =”ARIAL”> Por ejemplo: <BODY> <BASEFONT Size=4> El tamaño base de letra es 4<BR> <FONT Size=6> Esta frase tiene un tamaño de letra 6<BR> </FONT> <FONT Size=+2> Esta frase tambien tiene un tamaño de letra 6 (4+2)<BR> </FONT> </BASEFONT> </BODY>

Cambio de color de las fuentes
<FONT COLOR=#RRGGBB>Texto coloreado </FONT>

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

face color

4/51

HTML

size

tamaño del texto

valores del 1 al 7, siendo por defecto el 3, o desplazamiento respecto al tamaño por defecto, añadiendo + o - delante del valor

Por ejemplo, para insertar el texto:

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

Resaltado del texto <b> Existen una serie de etiquetas que permiten aplicar diferentes estilos al texto que se encuentra entre ellas, y generalmente se utilizan para resaltarlo. Estos estilos pueden agruparse según vayan asociados al tipo de letra o a la información que represente el texto. No hay que olvidar que todas estas etiquetas necesitan una etiqueta de cierre, y que pueden aplicarse varias etiquetas al mismo texto. A continuación se muestran algunas etiquetas asociadas al tipo de letra:
Etiqueta Significado negrita cursiva subrayado tachado teletipo (máquina de escribir) aumenta el tamaño de la fuente disminuye el tamaño de la fuente Ejemplo curso HTML aulaclic curso HTML aulaclic curso HTML aulaclic curso HTML aulaclic

<b> <i> <u> <s> <tt> <big> <small>

curso HTML aulaclic curso HTML aulaclic
curso HTML aulaclic

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

5/51

HTML

<cite> <code> <dfn> <del> <em> <ins> <kbd> <samp> <strong> <sub> <sup> <var>

cita ejemplo de código definición eliminado énfasis insertado teclado muestra destacado subíndice superíndice variable

curso HTML aulaclic

curso HTML aulaclic
curso HTML aulaclic

curso HTML aulaclic curso HTML aulaclic

curso HTML aulaclic
curso HTML aulaclic curso HTML aulaclic curso HTML aulaclic curso HTML aulaclic curso HTML aulaclic

Las etiquetas más utilizadas son las asociadas al tipo de letra, ya que son más fáciles de recordar, y en muchos casos los resultados son los mismos que los de aplicar una etiqueta diferente. Por ejemplo, el resultado de aplicar las etiquetas <b> y <strong> es el mismo. Incluso a veces algunos estilos asociados al tipo de información pueden representarse de forma distinta según el navegador.
Por ejemplo, para insertar el texto:

Bienvenidos a www.aulaclic.com
Habría que escribir:

<font color="#993366" size="4" face="Comic Sans MS, Arial, MS Sans Serif">Bienvenidos a <b><u><tt>www.aulaclic.com</tt></u></b></font>

Tenemos, además, otros parámetros que nos permiten cambiar el color del texto, que son: Con <BODY TEXT: Nos permite cambiar el color del texto normal P.E.
<BODY TEXT =c>Documento </BODY>

LINK: Nos permite cambiar el color de los enlaces ALINK: Nos permite cambiar el color de los enlaces al activarse VLINK: Nos permite cambiar el color de los enlaces visitados Podemos usar todos estos parámetros de forma conjunta, por ejemplo, podemos hacer:
<BODY BACKGROUND="1.gif" BGCOLOR="#F4F4C4" TEXT="#0000FF" LINK="#FF0000" ALINK="#00FF00" VLINK="#0000FF"> <!-- ... cuerpo del documento -->

6/51

HTML
</BODY>

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

Cuya salida en el navegador será:

Este texto se verá un poco más grande que el original pero este ya no, este ya se verá a su tamaño original.
Salto de línea <BR>
Para que se produzca el salto de línea en el navegador, en lugar de pulsar la tecla INTRO hay que insertar la etiqueta <br> donde se desee que se produzca el salto. La etiqueta <br> no precisa ninguna etiqueta de cierre. No hay que insertar la etiqueta </br> después de ella, ya que dicha etiqueta no existe.

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

y esto un texto preformateado

7/51

HTML

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

Separadores <hr>
El elemento que suele utilizarse para separar secciones dentro de una misma página es la regla horizontal. Para insertar una regla horizontal hay que insertar la etiqueta <hr>. Dicha etiqueta no precisa ninguna etiqueta de cierre. Es posible especificar algunos atributos de la regla horizontal:

Atributo

Significado alineación de la regla dentro de la página ancho de la regla alto de la regla eliminar el sombreado de la regla

Posibles valores

align

left (izquierda) right (derecha) center (centro)
un número, acompañado de % cuando se desee que sea en porcentaje un número no puede tomar valores

width size noshade

Por ejemplo, para insertar el texto y la regla horizontal siguientes:

Inicio Bienvenidos a mi página.
Habría que escribir:

Inicio<hr align="left" width="300%" size="5" noshade>Bienvenidos a mi p&aacute;gina.

8/51

HTML

Sangrado de texto <blockquote>

La sangría es una especie de margen que se establece a ambos lados del texto. Para que un text aparezca sangrado, se inserta entre las etiquetas <blockquote> y </blockquote>.

Esta etiqueta en un principio se definió para delimitar citas pero que como la mayoría de lo navegadores resuelven la cita incluyendo un sangrado del texto, su uso para sangrar texto se h generalizado. El uso de la etiqueta <blockquote> obliga a que el texto aparezca en una nueva línea.

Insertando el texto entre varias etiquetas <blockquote> y </blockquote> se consigue que lo márgenes sean mayores. Por ejemplo, para insertar el texto:
Queridos usuarios, tengo el placer de comunicaros que hay una nueva sección.
Habría que escribir:

Queridos usuarios, <blockquote> <blockquote> tengo el placer de comunicaros que hay una nueva secci&oacute;n. </blockquote> </blockquote>

Firmas <address>
Se pone justo delante del final del BODY. Se utiliza para firmar. </ADDRESS>
<ADDRESS><CENTER> <U>Módulo HTML </U></CENTER></ADDRESS>

Párrafos <p>
El texto de una página puede agruparse en párrafos. Para ello, el texto de cada uno de los párrafos debe insertarse entre las etiquetas <p> y </p>. No es necesario insertar la etiqueta <br> para que un nuevo párrafo aparezca debajo del anterior, ya que las etiquetas <p> y </p> hacen que se cambie de línea automáticamente. También es posible cambiar la alineación del texto de cada párrafo. Para ello se modifica el valor del atributo align, cuyos valores pueden ser left (izquierda), right (derecha), center (centrado) o justify (justificado). Por ejemplo, para insertar el texto:
Bienvenidos a mi página. Aquí encontraréis cursos de formación muy interesantes.

9/51

HTML
Habría que escribir: <p align="center">Bienvenidos a mi p&aacutegina.</p> <p>Aqu&iacute encontrar&eacuteis cursos de formaci&oacuten muy interesantes.</p>

En el caso de que la cantidad de elementos a la que se quiera aplicar cierto tipo de propiedades sea muy grande, sería muy trabajoso el uso de dichas propiedades para cada uno de ellos. Surge la necesidad de agrupar elementos, para aplicar con posterioridad a todos ellos las propiedades que se quieran, entre ellas la de alineamiento.
<DIV ALIGN=LEFT|RIGHT|CENTER|JUSTIFY> Texto de la división incluído formato de párrafos </DIV> Por ejemplo, para insertar el texto:

Bienvenidos a mi página. Aquí encontraréis cursos de formación muy interesantes.
Habría que escribir:

<div align="center">Bienvenidos a mi p&aacutegina.</div> <div>Aqu&iacute encontrar&eacuteis cursos de formaci&oacuten muy interesantes.</div>

Marquesinas <marquee> Las marquesinas son líneas de texto que pueden desplazarse de un lado a otro de la ventana en forma de línea. Para insertar una marquesina, es necesario insertar el texto entre las etiquetas <marquee> y </marquee>. La marquesina, por defecto, se desplaza de derecha a izquierda indefinidamente, pero si lo deseas puedes hacer que estas propiedades varíen. A través del atributo BEHAVIOR puede modificarse el tipo de movimiento. Puede tomar los valores alternate (de lado a lado de la ventana, como si rebotara en los extremos), scroll (de un lado a otro, continuamente) o slide (de un lado a otro, pero una sola vez). A través del atributo direction puede modificarse la dirección en la que se moverá el texto. Puede tomar los valores down (de arriba a abajo), up (de abajo a arriba), left (de derecha a izquierda) o left (de izquierda a derecha). También es posible establecer un color de fondo, a través del atributo bgcolor. Por ejemplo, para insertar la siguiente marquesina:
Esto es una marquesina (que se va moviendo)

Habría que escribir:
<marquee bgcolor="#006699" behavior="alternate" direction="right"> <b><font color="#FFFFCC" size="5">Esto es una marquesina </font></b> </marquee> También es posible insertar imágenes, tablas y otros elementos entre las etiquetas <marquee> y </marquee>, no sólamente texto.

10/51

HTML Listas Ordenadas <OL>
<OL TYPE=I> <LH> <U> LISTAS ORDENADAS </U> <LI>UNO <LI> DOS </OL> Que se ve como: LISTAS ORDENADAS I. II. UNO DOS

Propiedades de OL: La numeración por defecto empieza en 1. Para comenzar la numeración con otro valor se utiliza: <OL START=”3”> Aquí empezará en el 3. Para utilizar una representación diferente a la utilizada por defecto tenemos:
<OL TYPE=”t”>

Donde t puede tomar los valores siguientes: TYPE= 1 Numeración mediante números arábigos (1,2,3,4,…). TYPE= A Numeración mediante letras mayúsculas (A,B,C,D,…). TYPE=a Numeración mediante letras minúsculas (a,b,c,d,…). TYPE=I TYPE=i Propiedades de LI: Se permite alterar la secuencia de numeración de una determinada lista. Dicha propiedad se refiere a la expresión VALUE, que se utiliza así: <LI VALUE=”n”> Elemento n Causando que la numeración de la lista desde ese momento continúe desde n. Listas Desordenadas o No Ordenadas <UL>
<UL> <LH> <U>LISTAS DESORDENADAS</U> <LI> PRIMER ELEMENTO <LI> SEGUNDO ELEMENTO </UL>

Numeración mediante números Romanos (I,II,III,IV,V..). Numeración mediante números Romanos (i,ii,iii,iv,v..).

11/51

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

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

TYPE=circle TYPE=square TYPE=disc

Que muestra un círculo hueco Que utiliza un pequeño cuadrado opaco. Que usa un círculo opaco

Listas Descriptivas<DL> No poseen ningún tipo de de carácter o símbolo a la izquierda de cada elemento, incluídos los números.

<DL>DEFINE LISTA <DT>ESTABLECE TERMINO <DD>DEFINICIONES DEL TERMINO </DL> Que se ve como: • DEFINE LISTA ESTABLECE TERMINO DEFINICIONES DEL TERMINO

Anidación de Listas Ejemplo:
<HTML> <HEAD> <TITLE> P&Aacute;GINA DE LISTAS</TITLE> </HEAD>

12/51

HTML
<BODY> <H1><CENTER> PROGRAMADORA EN JAVA</CENTER></H1> <UL TYPE> <LI> MODULO 1 - UBICACI&Oacute;N PROFESIONAL <LI> MODULO 2 - CONCEPTOS DE INTERNET <UL TYPE=circle> <LI>PARTE 1- REDES <LI>PARTE 2 - INTERNET </UL> <LI> MODULO 3 - METODOLOG&Iacute;A DE PROGRAMACI&Oacute;N <UL TYPE=circle> <LI>TIPOS DE DATOS <UL TYPE=square> <LI>DATOS B&Aacute;SICOS <LI>ESTRUCTURAS B&Aacute;SICAS <LI>ESTRUCTURAS COMPLEJAS </UL> <LI>ORGANIGRAMAS <LI>ORDINOGRAMAS <LI>PSEUDOC&Oacute;DIGO <OL TYPE=A> <LI>ESTRUCTURAS </OL> </UL> <LI> MODULO 4 -HTML </UL> </BODY> </HTML>

Que se ve como:
PROGRAMADORA EN JAVA • MODULO 1 - UBICACIÓN PROFESIONAL

13/51

HTML
• MODULO 2 - CONCEPTOS DE INTERNET o o • PARTE 1- REDES PARTE 2 - INTERNET

MODULO 3 - METODOLOGÍA DE PROGRAMACIÓN o TIPOS DE DATOS    o o o DATOS BÁSICOS ESTRUCTURAS BÁSICAS ESTRUCTURAS COMPLEJAS

ORGANIGRAMAS ORDINOGRAMAS PSEUDOCÓDIGO A A ESTRUCTURAS

MODULO 4 -HTML

Hiperenlaces <A Href..> Permite saltar entre docuemntos o entre varias zonas del mismo documento. se construyen con la etiqueta <A> </A>.
<A HREF="http://www.nasa.gov/">Pulse aquí para visitar a la NASA </A>. <A HREF="/la/ruta/que/sea/fichero.html">pulse aquí</A>.

No permite anidamientos.

▪ Archivos para distribuir por el WEB
Ejemplo con enlace absoluto: Descarga este <A HREF="http://www.dominio.com/archivo.zip">archivo</A> Descarga este archivo

Ejemplo con enlace relativo: Descarta este <A HREF="archivo.zip">archivo</A> Descarga este archivo

▪ Correo electrónico Incluir una llamada de correo electrónico es una página es tan sencillo como:
<A HREF=”MAILTO: direccion_internet a la que se quiere mandar> Texto para la identificación del correo </A>

14/51

HTML

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

Enlaces a Secciones de una Página Se puede dar el caso que una de las partes de un documento haga referencia a otra sección del mismo. En el caso de los enlaces internos de un documento, primero hay que definir el punto objetivo de la vinculación y a continuación se hace referencia en las partes que queramos a dicho punto. Por ejemplo
<A NAME="indice">Indice</A> ... ... ...
Se puede NO poner pagina.htm

Lo que sale en la página

... <A HREF="pagina.htm/#indice"> Indice de documentos</A>

En este ejemplo, al pulsar sobre Indice de documentos, saltaremos hacia un lugar de la página que hemos definido con el nombre de indice a través de la etiqueta A NAME Otro ejemplo:
<A NAME="Inicio"> Volver al Inicio </A> <DL>CABECERA DE UN DOCUMENTO <DT><A HREF=#TITULO>TITLE</A> </DL> <A NAME="TITULO">DESCRIPCION DE TITLE</A><BR><BR> <BLOCKQUOTE> Da nombre al documento y por tanto da título a la ventana. No admite parámetros. </BLOCKQUOTE> <BR><P ALIGN=RIGHT> <A HREF=#Inicio>Volver al INICIO</U></A></P> <BR>

NOTA: Ambos identificadores han de ser iguales, coincidiendo mayúsculas y minúsculas.

15/51

HTML

Imágenes <IMG SRC=”..”> La etiqueta <IMG> servirá para situar imágenes en una página. Es una etiqueta que no tiene de cierre: La etiqueta <IMG> requiere un origen de datos obligatorio dado por el atributo SRC=. Indica la imagen en cuestión:
<IMG SRC="bander.gif">

Cuando se introduce una imagen como un enlace, dicha imagen aparece enmarcada en un borde del mismo color que los enlaces de texto. Este enlace se puede eliminar usando otra propiedad de la etiqueta <IMG> con el nombre BORDER. El formato es el siguiente:
<IMG SRC nombre_imagen BORDER=O>

Atributos de <IMG> (Los ponemos todos en uno dentro de IMG, no se crean varios IMG): Para que salga un texto alternativo cuando no salga la imagen ponemos:
<IMG ALT="Texto alternativo">

Para que salga una ventanita amarilla cuando acerquemos el ratón a la imagen ponemos:
<IMG TITLE="Texto del tooltip">

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

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

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

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

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

16/51

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

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

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

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

Para indicar los espacios en blanco que queremos que deje arriba y abjo de una imagen:
<IMG VSPACE=nº entero>

Para un enlace con imágenes y sin borde alrededor de la imagen:
<A href="intro.htm"><IMG src="bander.gif" border="0"><A>

Para poner una imagen de FONDO utilizamos la etiqueta BACKGROUND dentro de la etiqueta BODY:
<BODY BACKGROUND="imagen">

Mapas <MAP NAME..> Existen numerosas imágenes en las que podrían interesar que, dependiendo de la zona en la que se pinche con el ratón, se pudiera ir a un lugar u otro. Proceso:  Definir el mapa que se va a aplicar a la imagen, y asignarle un nombre a dicho mapa.  Incluir la imagen mediante la etiqueta <IMG>  Incluir como parte del elemento <IMG> que contiene la imagen, el atributo
USEMAP=NOMBRE_MAPA.

Definición de un mapa:
<IMG SRC=”nombre_imagen” USEMAP=”#nombre_mapa”> <MAP NAME=”nombre_mapa”> <AREA SHAPE=”forma” COORDS=”Coordenadas” HREF=URL_Destino> …

17/51

HTML
<AREA SHAPE=”forma” COORDS=”Coordenada” HREF=URL_Destino> </MAP>

Los atributos pueden ser: •
SHAPE=”forma”:

Indica que forma tiene el área que se está definiendo. Hay tres

valores:
SHAPE= “rect” _ Área en forma de rectángulo. SHAPE= “circle” _ Área en forma de círculo. SHAPE= “poly” _ Área en forma de poliedro.

COORDS=”Coordenadas”:

Las coordenadas de un rectángulo son “x,y (punto superior izquierdo),z,w (punto inferior derecho)”. Las coordenadas de un círculo son “x,y( coordenadas del círculo),z (radio del mismo)”. Las coordenadas de un poliedro son punto superior izquierdo, punto inferior izquierdo, punto inferior derecho y punto superior derecho. Aquí se indica el lugar dónde el interprete deberá ir, en caso de que el usuario pinche en el área que se está definiendo.
HREF=”URL_Destino”: NOHREF: No

• • •

salta a ningún lado. Texto que vemos al acercarnos a una sección en un

ALT=”Cuadrito amarillo”:

cuadrito amarillo.

Por ejemplo:
<IMG SRC=”Imágenes\en construccion.bmp” USEMAP=”#Muñeco”> <MAP NAME=”Muñeco” <AREA TEXT=”Pincha aquí par air a nuevo documento” SHAPE=”circle” COORDS=”48,20,10” HREF=”Documento nuevo.htm”> <AREA TEXT=”Pincha aquí para ir a las listas” SHAPE=”rect” COORDS=”60,32,91,40” HREF=”Listas.htm”> </MAP>

TABLAS Existe una pareja de etiquetas que delimitan el comienzo y el final de la tabla. Estos delimitadores son:
<TABLE ROWS=numfilas COLS=numcolumnas> definición de la tabla </TABLE>

18/51

HTML La definición de una tabla se debe hacer por filas desde la esquina superior izquierda. Cada fila se identifica por las etiquetas: <TR> fila </TR> Cada una de las casillas de la tabla o celda se define mediante las etiquetas: <TD> comienzo de la celda </TD> Formato básico:
<TABLE> <TR> <TD> Fila1-Columna1 </TD> <TD> Fila1-Columna2 </TD> ….. </TR> <TR> <TD> Fila2- Columna1 </TD> <TD> Fila2- Columna2 </TD> ………. </TR> </TABLE>

▪ Título de la tabla y primera línea Se puede poner un título o cabecera a la tabla mediante la etiqueta <CAPTION>. Este título debe ir a continuación del inicio de la tabla <TABLE> y encerrado entre
<CAPTION> </CAPTION>.

Por otra parte se hablaba de poder distinguir una fila o columna de una tabla. En concreto, distinguir la primera que suele servir de cabecera o guía. El elemento que permite modificar el aspecto de los elementos de la cabecera de la tabla es la etiqueta <TH>. Esta etiqueta es exactamente igual a <TD> salvo en el hecho de que el texto que se introduzca precedido por <TH>, aparecerá en la tabla final centrado y puesto en negrita. Este elemento es utilizado en general para poner las celdas de la primera fila y/o de la primera columna cuando éstas indican el significado del contenido del resto de las celdas. ▪ Borde de la tabla y tamaño de la celda La propiedad BORDER, que hace referencia al borde de la tabla, puede encontrarse de tres formas diferentes:  BORDER = X Dónde el número “X” indica el número de pixels que tendrá de ancho el borde de la tala. Es el grosor de la tabla.  BORDER: Sólo indica que la tabla tendrá borde. El ancho del borde será asignado por el intérprete con su valor por defecto. Es una propiedad opcional.  No aparece. El borde no se mostrará.

19/51

HTML  Para evitar que el texto quede demasiado próximo al borde de la tabla, existe la propiedad CELLPADDING. Este atributo permitirá definir la distancia (en pixels) del borde de la celda al inicio del texto contenido en dicha celda. Es una propiedad opcional.  Para cambiar la distancia entre celdas se utiliza la propiedad
CELLSPACING.

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

 Los atributos anteriores, además de a la tabla completa, pueden aplicarse a una fila (etiqueta <TR>), a un título de fila o columna (etiqueta <TH>) o a una celda (etiqueta <TD>). En caso de estar definidos distintos colores para la tabla, filas y celdas, prevalecen los colores de las celdas, luego los de las filas y por último el de la tabla. ▪ Alineamiento en las tablas Se distinguen dos tipos de alineamiento en las celdas: el alineamiento horizontal y el vertical. El alineamiento horizontal es el que se ha visto hasta el momento en otros elementos HTML, y se especifica de la misma manera que se hacía con el resto de los elementos (ALIGN= center, right o left). El alineamiento vertical se refiere a la posición del contenido de la celda verticalmente respecto a la altura de dicha celda. Este alineamiento se indica mediante la propiedad VALIGN. Los posibles valores que puede tomar son: TOP:Contenido de la celda arriba. BOTTOM: Contenido de la celda abajo. MIDDLE: Contenido de la celda en el centro. Las propiedades de alineamiento se pueden combinar de la forma:
<TD ALIGN= XX VALIGN= YY>

20/51

HTML ▪ Ampliación de filas y columnas A veces es interesante poder unir dos o más filas o clumnas en una sola, mediante la eliminación de alguna de las divisiones existentes en la tabla. Estó será muy útil cuando se desea poner el mismo título a varias filas o varias columnas. Para unir dos columnas, HTML presenta una propiedad de la etiqueta <TD> que se denomina COLSPAN. En ésta propiedad se le indica al intérprete cuántas columnas se desean unir a la celda en la que se está, a partir de ella misma y contándola a ella también. El proceso para unir dos filas es muy parecido. La única diferencia es es que el nombre de la propiedad es ROWSPAN. Esta propiedad indica cuántas filas se desean añadir a la actual contando a partir de la celda en la que se está. Estas dos propiedades pueden ser combinadas para unir en una celda, tanto un número de filas como de columnas, al mismo tiempo.El formato completo de la etiqueta <TD> queda como sigue:
<TD ALIGN= X VALIGN= Y COLSPAN=Z ROWSPAN=W>

▪ Tablas fantasma A la técnica de usar tablas sin bordes para organizar datos en la página se le denomina “tablas fantasmas”.
<TABLE BORDER=0>

O simplemente se consigue el mismo efecto si no se utiliza la propiedad BORDER de la etiqueta <TABLE>. Formularios Los formularios son posiblemente la herramienta más utilizada en Internet para obtener datos e información acerca de la gente que navega nuestro sitio. La idea de los formularios es recolectar información online en la interacción con el usuario y luego ejecutar una determinada acción con la misma, que podría ser por ejemplo, quizás el caso más utilizado, un formulario de venta que el usuario completa y luego es enviado vía e-mail al vendedor en forma encriptada. Este tema a diferencia de los anteriores es bastante más complejo y oscuro, aparecerán términos como CGI scripts, Perl o bien lenguajes de programación como C, que seguramente nos desalentarán al principio, pero que con el tiempo asumiremos como familiares. La idea de esta sintética guía de formularios es brindar al newbie o novato un pantallazo general de lo que es posible hacer con simples formularios en nuestro sitio web.
¿Cómo los definimos?

Cinco son solamente las etiquetas que el código HTML posee para definir todos los elementos interactivos que un formulario puede presentar: <FORM>, <INPUT>, <SELECT>, <OPTION> y <TEXTAREA>. Estas etiquetas, junto a un número de 21/51

HTML modificadores o atributos, son suficientes para indicarle al navegador cliente cómo debe recolectar la información, cómo debe manejarla una vez recolectada y cómo debe interactuar con el servidor.
Etiqueta <FORM>

Todo formulario debe estar encerrado entre el par de etiquetas <FORM> y </FORM>, y debe ser ubicado en el cuerpo de cualquier documento HTML, es decir, entre el par de etiquetas <BODY> y </BODY>. Esta etiqueta <FORM> presenta tres atributos posibles:
Comando Descripción el valor de este parámetro es la URL del programa o guión en el Servidor Web utilizado para procesar la información recolectada. puede asumir el valor GET o el valor POST, y definen la manera en la cual los datos son transferidos al servidor. este atributo está reservado para que la información viaje en forma encriptada a través de Internet.

ACTION

METHOD

ENCTYPE

Los dos primeros atributos de la tabla son de uso obligatorio para cualquier formulario que generemos, ya que establecen dónde enviar la información y cómo enviarla. El atributo o parámetro ENCTYPE es optativo y no es realmente importante.
Etiqueta <INPUT>

La etiqueta <INPUT> es la segunda etiqueta más importante de los formularios. Se la puede definir como una etiqueta multifunción, ya que con la misma podemos crear "push buttons", "radio buttons", "check boxes", y simples recuadros para ingresar texto. Posee ocho posibles parámetros: ALIGN, CHECKED, MAXLENGTH, NAME, SIZE, SRC, TYPE, y VALUE. Pero no se asusten con tantos parámetros porque normalmente solo se utilizan a lo sumo solo cinco. Los atributos cruciales para toda etiqueta <INPUT> son NAME, que asocia un nombre con cada variable ingresada; y TYPE, que puede asumir los valores TEXT, PASSWORD, CHECKBOX, RADIO, SUBMIT, RESET, IMAGE, and HIDDEN; de acuerdo al tipo de elemento que querramos representar. Más adelante todo será más claro con los ejemplos.
Etiqueta <SELECT>

Este par de etiquetas define una lista de elementos de los cuales el usuario debe seleccionar uno o varios, de acuerdo a los atributos que especifiquemos.
Etiqueta <OPTION>

22/51

HTML Con esta etiqueta definimos cada elemento de las listas designadas con el par <SELECT> y </SELECT>.
Etiqueta <TEXTAREA>

Este par de etiquetas nos permiten definir un area de dimensiones arbitrarias que funciona como una suerte de editor, donde el usuario puede ingresar texto.
¿Cómo se ven?

Abrimos nuestro editor de texto preferido y creamos el siguiente archivo html:
<HTML> <HEAD> <TITLE>FORMULARIOS</TITLE> </HEAD> <BODY> <FORM ACTION="mailto:quantum@mundo21.com" METHOD=POST> <TABLE align="center" border="0"> <td align="left" width="100">Nombre: </td> <td align="center" width="150"><INPUT NAME="nombre" MAXLENGTH="25" TYPE="TEXT" VALUE=""> </td> <tr> <td align="left" width="100">Email: </td> <td align="center" width="150"><INPUT NAME="mail" MAXLENGTH="25" TYPE="TEXT" VALUE=""> </td> <tr> <td align="left" width="100">Motivo: </td> <td align="center" width="150"><INPUT NAME="motivo" MAXLENGTH="25" TYPE="TEXT" VALUE=""> </td> <tr> <td align="left" width="100"> Mensaje: </td> <td> <TEXTAREA NAME="mensaje" ROWS=3 COLS=20> </TEXTAREA> </td> <tr> <td widht="100"> </td> <td align="right" width="150"><INPUT NAME="boton" TYPE="SUBMIT" VALUE="Enviar"> </td> </TABLE> </FORM> </BODY> </HTML>

Lo que se vería de esta forma:
Nombre:
þÿ

23/51

HTML
Email: Motivo: Mensaje:
þÿ þÿ

Enviar

Aunque parezca complicado a primera vista el código anterior, con un poco de práctica puede resultar muy natural. Analicemoslo paso a paso: El formulario comienza con esta línea:
<FORM ACTION="mailto:quantum@mundo21.com" METHOD=POST>

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

24/51

HTML
<input type=hidden name="to" value="quantum@mundo21.com"> <input type=hidden name="return-url" value="http://www.mundo21.com/gracias.html"> <!-- estos hidden fields (campos escondidos) pueden ser necesarios para algunos scripts, lo que hacen es comunicar cierta información al servidor acerca de cómo manipular los datos manteniendose ocultos a la vista de los usuarios.En este caso le indicamos la dirección de email a dónde enviar los datos y hacia qué página ir después. --> <TABLE align="center" border="0"> <td align="left" width="100">Nombre: </td> <td align="center" width="150"> <INPUT NAME="nombre" MAXLENGTH="25" TYPE="TEXT" VALUE=""> </td> <tr> <td align="left" width="100">Email: </td> <td align="center" width="150"> <INPUT NAME="mail" MAXLENGTH="25" TYPE="TEXT" VALUE=""> </td> <tr> <td align="left" width="100">Motivo: </td> <td align="center" width="150"> <INPUT NAME="motivo" MAXLENGTH="25" TYPE="TEXT" VALUE=""> </td> <tr> <td align="left" width="100"> Mensaje: </td> <td> <TEXTAREA NAME="mensaje" ROWS=3 COLS=20> </TEXTAREA> </td> <tr> <td widht="100"> </td> <td align="right" width="150"> <INPUT NAME="boton" TYPE="SUBMIT" VALUE="Enviar"> </td> </TABLE> <!-- los campos a utilizar deben ser aceptados por el script, es decir el script esta diseñado para manejar cierto número y tipo de variables, es por eso que debemos configurar nuestro formulario acorde al script o guión que seleccionemos. Esto puede parecer toda una odisea pero es más simple de lo que se piensa. --> </FORM>

Para ver que pinta tiene un script del tipo utilizado en el ejemplo anterior, escrito en PERL, pueden observar el codigo fuente del archivo mailto.pl. Como dijimos arriba, si por alguna razón nuestro proveedor de Internet o servidor web donde alojamos nuestro sitio no posee scripts CGI, no debemos bajar los brazos, aún nos queda una posibilidad: utilizar guiones gratuítos online. Existen muchas empresas que ofrecen este servicio y además por algunos billetes nos pueden crear o generar un script a medida. En las siguientes direcciones se pueden obtener muy buenos scripts gratis con todas las instrucciones correspondientes:

25/51

HTML http://www.cgiresources.com/Programs_and_Scripts/Remotely_Hosted/Form_Processing/ http://www.sbrady.com/hotsource/cgi/index.html#ffp Para los más osados y valientes, aún existe una tercera posibilidad: crear nuestros propios scripts. Si nuestro proveedor o servidor web nos permite el acceso al directorio /cgi-bin, nos es posible subirlos, compilarlos y luego correrlos. Los mejores lugares en la red para obtener información, código fuente y ejemplos de cómo hacer esta hazaña son: http://www.cgi-resources.com/Programs_and_Scripts/ http://www.artsackett.com/freebies/asform/
Construcción de Formularios

El TYPE más común para la etiqueta <INPUT> de un formulario es TEXT.
<FORM> <INPUT TYPE="text"> </FORM>

Toda etiqueta <INPUT> necesita un NAME para poder identificar el valor que el usuario ingresa, es decir, el valor del parámetro NAME es el nombre de la variable que alojará el valor ingresado por el usuario.
<FORM> <INPUT TYPE="text" NAME="nombre"> </FORM>

Cuando el usuario ingresa su nombre en la casilla de texto (por ejemplo Morgan Clay), éste se convertirá en el valor de entrada de la etiqueta INPUT y será relacionado con "nombre" (NAME="nombre"), de forma que el resultado que será procesado será el par nombre=Morgan Clay. Es posible, si así lo deseamos, establecer un valor predetermindado de la siguiente manera:
<FORM> <INPUT TYPE="text" NAME="nombre" VALUE="J.J. Lopez"> </FORM>
þÿ

Esto automáticamente generará el par nombre=J.J. Lopez, que sólo será modificado si el usuario lo cambia. El tamaño de las casillas puede ser especificado también de la siguiente manera:
<FORM> <INPUT TYPE="text" </FORM>
þÿ

NAME="nombre"

VALUE="Morgan

Clay"

SIZE=20>

26/51

HTML
<FORM> <INPUT TYPE="text" NAME="nombre" VALUE="Morgan Clay" SIZE=15> </FORM>
þÿ

<FORM> <INPUT TYPE="text" NAME="nombre" VALUE="Morgan Clay" SIZE=10> </FORM>
þÿ

El valor predeterminado para el tamaño de un INPUT es SIZE=20, es decir, que sino le explicitamos otro tamaño, el navegador asumirá el valor 20 para el parámetro SIZE. También podemos indicar la cantidad de caracteres a ingresar por el usuario, aunque no es muy utilizado este parámetro, puede resultar útil en algunas ocasiones. Por ejemplo, un límite de 15 caracteres lo indicamos de la siguiente manera:
<FORM> <INPUT TYPE="text" NAME="nombre" SIZE=30 MAXLENGTH=15> </FORM>
þÿ

Muy similar al TYPE=TEXT es el TYPE=PASSWORD. Es exactamente igual al tipo texto, con la diferencia que despliega en pantalla *** en lugar de letras a medida que tipea el usuario.
<FORM> <INPUT TYPE="password" NAME="clave"> </FORM>

Acá también cuentan los atributos SIZE, VALUE, y MAXLENGTH.
Radio Buttons y Check Boxes

Los Radio Buttons le permiten al usuario seleccionar una entre varias opciones. En cambio las Check Boxes le dan la posibilidad de elegir una o más opciones.
Radio Buttons <FORM> <INPUT TYPE="radio" NAME="equipos"> </FORM>

Recordemos que toda etiqueta INPUT debe llevar un VALUE y un NAME:
<FORM> <INPUT TYPE="radio" NAME="equipos" VALUE="cuervo">San Lorenzo

27/51

HTML
<BR><INPUT TYPE="radio" NAME="equipos" VALUE="gallina">River Plate <BR><INPUT TYPE="radio" NAME="equipos" VALUE="bostero">Boca Juniors </FORM> San Lorenzo River Plate Boca Juniors

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

La construcción de Check Boxes es bastante similar:
<FORM> <INPUT TYPE="checkbox" NAME="cuervo"> </FORM>

A diferencia de los Radio Buttons, los Check Boxes mantienen el mismo valor para el parámetro VALUE, y cambian el valor de NAME. Por ejemplo:
<FORM> <INPUT TYPE="checkbox" NAME="cuervo" VALUE="YES">San Lorenzo

28/51

HTML
<BR><INPUT TYPE="checkbox" NAME="gallina" VALUE="YES"> River PLate <BR><INPUT TYPE="checkbox" NAME="bostero" VALUE="YES"> Boca Juniors <BR><INPUT TYPE="checkbox" NAME="rojo" VALUE="YES"> Independiente </FORM> San Lorenzo River PLate Boca Juniors Independiente

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

Si bien, algunas opciones están marcadas por defecto, el usuario es capaz de desmarcarlas y marcar otras. Los datos serán recolectados de la siguiente manera: gallina=YES rojo=YES (si es que el usuario no modifica las opciones por defecto... incluso pueden elegir ninguna, es decir, dejar todas desmarcadas, entonces no habra ningún valor procesado) Ahora bien, supongamos que quisiéramos hacer tres preguntas con opciones acerca de un mismo tema, ¿como lo haríamos?, muy simple, lo único que debemos recordar es que no puede haber NAMES duplicados en un mismo formulario, por tanto el formulario tendría esta pinta:
<FORM> <TABLE BORDER="1" ALIGN="center"> <TR> <TD WIDTH="350"> ¿Cuál es la hinchada más original? </TD> <TR>

29/51

HTML
<TD WIDTH="350"> <BR><INPUT TYPE="checkbox" NAME="original?..SL" VALUE="YES">San Lorenzo <BR><INPUT TYPE="checkbox" NAME="original?..RP" VALUE="YES">River Plate <BR><INPUT TYPE="checkbox" NAME="original?..BJ" VALUE="YES">Boca Juniors <BR><INPUT TYPE="checkbox" NAME="original?..I" VALUE="YES">Independiente </TD> <TR> <TD WIDTH="350"> ¿Cuál es más numerosa? </TD> <TR> <TD WIDTH="350"> <BR><INPUT TYPE="checkbox" NAME="numerosa?..SL" VALUE="YES">San Lorenzo <BR><INPUT TYPE="checkbox" NAME="numerosa?..RP" VALUE="YES">River Plate <BR><INPUT TYPE="checkbox" NAME="numerosa?..BJ" VALUE="YES">Boca Juniors <BR><INPUT TYPE="checkbox" NAME="numerosa?..I" VALUE="YES">Independiente </TD> <TR> <TD WIDTH="350"> ¿Cuál es más fiestera? </TD> <TR> <TD WIDTH="350"> <BR><INPUT TYPE="checkbox" NAME="fiestera?..SL" VALUE="YES">San Lorenzo <BR><INPUT TYPE="checkbox" NAME="fiestera?..RP" VALUE="YES">River Plate <BR><INPUT TYPE="checkbox" NAME="fiestera?..BJ" VALUE="YES">Boca Juniors <BR><INPUT TYPE="checkbox" NAME="fiestera?..I" VALUE="YES">Independiente </TD> </TABLE> </FORM> ¿Cuál es la hinchada más original? San Lorenzo River Plate Boca Juniors Independiente ¿Cuál es más numerosa? San Lorenzo River Plate Boca Juniors Independiente ¿Cuál es más fiestera? San Lorenzo River Plate Boca Juniors Independiente

30/51

HTML Supongamos que el usuario marca en la primera pregunta "San Lorenzo", en la segunda "Boca Juniors" y en la tercera "San Lorenzo" nuevamente, la información procesada será entonces:
original?..SL=YES numerosa?..BJ=YES fiestera?..SL=YES Listas

Para la creación de listas de elementos utilizamos la etiqueta <SELECT> en lugar de la utilizada anteriormente <INPUT>, y a diferencia de esta útlima debe ser cerrada con su para </SELECT>. Es decir:
<FORM> <SELECT> elementos de la lista </SELECT> </FORM> Listas Desplegables

Le damos un NAME y agregamos algunos elementos.
<FORM> <SELECT NAME="equipos"> <OPTION>San Lorenzo <OPTION>River Plate <OPTION>Boca Juniors <OPTION>Independiente <OPTION>Racing Club </SELECT> </FORM>

A cada <OPTION> le otorgamos un valor:
<FORM> <SELECT NAME="equipos"> <OPTION VALUE="cuervo">San Lorenzo <OPTION VALUE="gallina">River Plate <OPTION VALUE="bostero">Boca Juniors <OPTION VALUE="rojo">Independiente <OPTION VALUE="academia">Racing Club </SELECT> </FORM>
þÿ

La opción por defecto de una lista de este tipo es la primera <OPTION> declarada. Si quisiéramos marcar otra opción por defecto lo hacemos con el parámetro SELECTED de esta manera:
<FORM> <SELECT NAME="equipos"> <OPTION VALUE="cuervo">San Lorenzo

31/51

HTML
<OPTION VALUE="gallina" SELECTED>River Plate <OPTION VALUE="bostero">Boca Juniors <OPTION VALUE="rojo">Independiente <OPTION VALUE="academia">Racing Club </SELECT> </FORM>
þÿ

Listas Desplegadas

La construcción de una lista desplegada es bastante similar a la de una lista desplegable, solo difieren en algunos parámetros. Para convertir la lista desplegable de equipos en una lista ya desplegada utilizamos el parámetro SIZE de la siguiente manera:
<FORM> <SELECT NAME="equipos" SIZE=5> <OPTION VALUE="cuervo">San Lorenzo <OPTION VALUE="gallina">River Plate <OPTION VALUE="bostero">Boca Juniors <OPTION VALUE="rojo">Independiente <OPTION VALUE="academia">Racing Club </SELECT> </FORM>

þÿ

El valor del parámetro SIZE indica exactamente cuántos elementos desplegar simultáneamente. Si el valor del SIZE es menor al número total de elementos de la lista, automáticamente aparecerá un barra de desplazamiento sobre el lado derecho de la misma. Para verlo mejor indiquemos un SIZE=3 para la lista de equipos:
<FORM> <SELECT NAME="equipos" SIZE=3> <OPTION VALUE="cuervo">San Lorenzo <OPTION VALUE="gallina">River Plate <OPTION VALUE="bostero">Boca Juniors <OPTION VALUE="rojo">Independiente <OPTION VALUE="academia">Racing Club </SELECT> </FORM>

þÿ

Al igual que las lista desplegables podemos indicar un elemento seleccionado por defecto mediante el parámetro SELECTED:
<FORM> <SELECT NAME="equipos" SIZE=3> <OPTION VALUE="cuervo">San Lorenzo

32/51

HTML
<OPTION VALUE="gallina" SELECTED>River Plate <OPTION VALUE="bostero">Boca Juniors <OPTION VALUE="rojo">Independiente <OPTION VALUE="academia">Racing Club </SELECT> </FORM>

þÿ

AREA DE TEXTO

Para generar un area de texto donde el usuario pueda escribir libremente un mensaje, un comentario o sugerencia, debemos utilizar la etiqueta <TEXTAREA> de la siguiente manera:
<FORM> <TEXTAREA NAME="SUGERENCIAS"> </TEXTAREA> </FORM>

Controlamos el tamaño del area de texto con los parámetros ROWS y COLS, cuyos valores representan el número de filas y columnas respectivamente que ocupará en pantalla dicha area. Para entenderlo mejor, ROWS sería la altura y COLS la anchura.
<FORM> <TEXTAREA NAME="SUGERENCIAS" ROWS=6 COLS=50> </TEXTAREA> </FORM>

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

33/51

HTML

significa que el texto ingresado en la caja de texto no superará los margenes laterales, pero será porcesado como una línea larga de caracteres, es decir, viajará a su destino como una larga cadena de caracteres.
WRAP="soft" <FORM> <TEXTAREA NAME="COMMENTS" ROWS=3 COLS=30 WRAP="hard"> </TEXTAREA> </FORM>

WRAP="hard"

significa que el texto es enviado tal cual fue ingresado.

<FORM> <TEXTAREA NAME="COMMENTS" ROWS=3 COLS=30 WRAP="off"> </TEXTAREA> </FORM>

Esto es normalmente el valor por defecto de las areas de texto si es que no se especifica un valor distinto para este parámetro.
Botones SUBMIT y RESET

Son muy simples de declarar:
<FORM> <INPUT TYPE="submit"> </FORM>
Enviar consulta

Este tipo de boton envía la información. Mientras que el RESET lo que hace es borrar las modificaciones realizadas por el usuario y regresar todos los valores por defecto.
<FORM> <INPUT TYPE="reset"> </FORM>
Restablecer

Es posible cambiar el texto de estos botones con el parámetro VALUE:

34/51

HTML
<FORM> <INPUT TYPE="submit" VALUE="Enviar Datos"> <INPUT TYPE="reset" VALUE="Borrar Datos"> </FORM>
Enviar Datos Borrar Datos

En caso de ser necesario, no es lo común, podemos asignarle un NAME a los botones de RESET y SUBMIT. Esto sería necesario en el caso extraordinario de tener dos botones del mismo tipo en un mismo formulario, algo más que insólito. Podemos utilizar una imagen como boton SUBMIT:
<FORM> <INPUT TYPE="image" SRC="enviar.jpg" WIDTH=70 HEIGHT=35 <BORDER=0 ALT="Submit"> </FORM>

Para el caso de botones del tipo RESET no nos es posible asignarle una imagen. Aquí va un simple truco, un botón que nos transporta a otra página:
<FORM ACTION="indexweb.php3"> <INPUT TYPE="submit" VALUE="Tutorial"> </FORM>
Tutorial

Marcos Un marco (o frame) es una ventana independiente dentro de la ventana general del navegador. Cada marco tendrá sus bordes y sus propias barras de desplazamiento. Así cada página se dividirá en la práctica en varias páginas independientes. Para crearlos necesitaremos un documento HTML específico, que llamaremos documento de definición de marcos. En él especificaremos el tamaño y posición de cada marco y el documento HTML que contendrá. Esto podría crear una disposición de marcos como la siguiente:
| | --------------------------------------| | | |

35/51

HTML
| Marco 1 | | | | | | | | |---------| | | | Marco 3 | | | | | | | | | | | Marco 2 | | | | | | | | | | | | | | ---------------------------------------

Vamos a ver un ejemplo de este tipo de documento:
<HTML> <HEAD> <TITLE>Mi primera página con marcos</TITLE> </HEAD> <FRAMESET COLS="20%,80%"> <FRAME NAME="indice" SRC="indice.html"> <FRAME NAME="principal" SRC="introduccion.html"> <NOFRAMES> <P>Lo siento, pero sólo podrás ver esta página si tu navegador tiene la capacidad de visualizar marcos.</P> </NOFRAMES> </FRAMESET> </HTML>

Vamos a explicar detalladamente este ejemplo antes de investigar algo más a fondo cada una de las etiquetas. Vemos que la cabecera de la página es similar a un documento normal, pero el habitual BODY es sustituido por un FRAMESET. En cada FRAMESET se divide la ventana actual (sea la general o un marco) en varias ventanas definidas o por el parámetro COLS o por ROWS. En éste, separado por comas, se define el número de marcos y el tamaño de cada uno. Dentro del <FRAMESET> se hacen dos cosas. Primero, definir cada uno de los marcos poniendoles un nombre y especificando qué fichero HTML le corresponde mediante la etiqueta <FRAME>. Por último, especificamos lo que verá el usuario en el supuesto (cada vez más raro) de que su navegador no soporte frames dentro de la etiqueta <NOFRAMES>. Ahora veremos todos estos elementos en mayor detalle.
Etiqueta <FRAMESET>

Según el estándar, esta etiqueta sólo debería contener el número y tamaño de cada marco, pero las extensiones de Netscape y Explorer al estándar obligan a estudiar un par de parámetros más. En general, los navegadores dibujan un borde de separación entre los marcos. Si deseas eliminarlo puedes hacerlo de dos maneras: en las etiquetas <FRAME> de cada una de los marcos contiguos al borde a eliminar o incluyendo el parámetro FRAMEBORDER=0 en el <FRAMESET>.

36/51

HTML Cuando eliminas ese borde, podrás ver cómo el navegador deja aún un hueco entre marcos. Este se elimina añadiendo los parámetros FRAMESPACING=0 BORDER=0. Vamos a examinar por último los parámetros COLS y ROWS. Deberemos asignarles una lista de tamaños separada por comas. Se admiten los siguientes formatos de tamaño:
• • •

Con porcentajes: Al igual que con las tablas, podemos definir el tamaño de un marco como un porcentaje del espacio total disponible. Absolutos: Si ponemos un número a secas, el marco correspondiente tendrá el tamaño especificado en pixels. Sobre el espacio sobrante: Si colocamos un asterisco (*) estaremos indicando que queremos todo el espacio sobrante para ese marco. Podemos poner este símbolo en varios marcos, que se repartirán el espacio equitativamente como buenos hermanos. Si queremos que uno tenga más deberemos ponerle al asterisco un número delante. Así, un marco con un espacio de 3* será tres veces más grande que su compañero, que tiene un asterisco sólo, el pobre.

Por ejemplo, el siguiente código es una muestra de cómo combinar los tres métodos:
<FRAMESET COLS="10%,*,200,2*">

Supongamos que el ancho total de la ventana son 640 pixels. El primer marco ocupará el 10%, es decir, 64 pixels. El tercero necesita 200, luego nos quedan 476 para los otros dos. Como el cuarto debe tener el doble de espacio que el segundo, tenemos aproximadamente 158 pixels para este último y 316 para el cuarto marco. Hay que tener cuidado cuando usamos valores absolutos en la definición de marcos; debemos asegurarnos de tener al menos un marco con un tamaño relativo si queremos estar seguros del aspecto final de la página. Por último, indicar que las etiquetas <FRAMESET> se pueden anidar. Esto se hace poniendo otro <FRAMESET> donde normalmente colocamos las etiquetas <FRAME> tal que así:
<FRAMESET COLS="20%,80%"> <FRAME NAME="indice" SRC="indice.html"> <FRAMESET ROWS="*,80"> <FRAME NAME="principal" SRC="introduccion.html"> <FRAME NAME="ejemplos" SRC="ejemplo.html"> </FRAMESET> </FRAMESET>

El resultado del anidamiento lo podréis contemplar aquí.
Etiqueta <FRAME>

Esta etiqueta define tan sólo las características de un marco determinado, no de un conjunto de ellos. Estos son los parámetros que admite: NAME Asigna un nombre a un marco para que después podamos

37/51

HTML referirnos a él. SRC Indica la dirección del documento HTML que ocupará el marco. Decide si se colocan o no barras de desplazamiento al marco para que podamos movernos por su contenido. Su valor es por defecto SCROLLING AUTO, que deja al navegador la decisión. Las otras opciones que tenemos son YES y NO. Si lo especificamos el usuario no podrá cambiar de tamaño el NORESIZE marco. Al igual que su homónimo en la etiqueta <FRAMESET>, si lo FRAMEBORDER igualamos a cero se eliminará el borde con todos los marcos contiguos que tengan también este valor a cero. Permite cambiar los márgenes horizontales dentro de un marco. Se MARGINWIDTH representa en pixels. MARGINHEIGHT Igual al anterior pero con márgenes verticales.
Acceso a otros marcos

Por defecto, cuando pulsamos sobre un enlace situado dentro de un marco, la nueva página a la que queremos acceder la veremos encerrada en ese mismo marco. Es posible que deseemos que esto no ocurra. Por ejemplo, si tenemos un marco que no sirve de índice y otro donde mostramos los contenidos sería deseable que los enlaces del marco índice se abrieran en el otro marco. Esto es posible hacerlo gracias al parámetro TARGET. Este parámetro se puede colocar en tres etiquetas: <A>, <AREA> y <BASE>. En las dos primeras sirve para indicar el marco en el que abriremos ese enlace en particular y el último modificaremos el marco en el que por defecto se nos muestran todos los enlaces. Pero para que un parámetro funcione, es habitual que le asignemos un valor, y TARGET no es una excepción. Para indicarle el marco que deseamos le asignaremos el nombre del mismo. Así, en los ejemplos anteriores, si en el marco llamado índice tenemos un enlace que queremos se abra en el marco principal pondremos:
<A HREF="pagina.html" TARGET="principal">

También existen cuatro nombres reservados que podremos utilizar en el parámetro
TARGET: _top

Elimina todos los marcos existente y muestra la nueva página en la ventana original sin marcos.
_blank

Muestra la nueva página en una ventana nueva y sin nombre del navegador.
_self

Muestra la nueva página en el marco donde está declarado el enlace.
_parent

Muestra la nueva página en el <FRAMESET> que contiene al marco donde se declara el enlace. En el ejemplo que pusimos de <FRAMESET> anidados, una 38/51

HTML enlace situado en el marco ejemplo cuyo parámetro TARGET fuese igual a _parent eliminaría la separación entre los marcos ejemplo y principal y mostraría en ese nuevo marco la nueva página. Sonido Existen diversas formas de incluir un fichero de audio en una página, formas que dependen del tipo de fichero y del navegador usado, y podemos usar diferentes etiquetas para cada una de ellas.
BGSOUND

La etiqueta bgsound incorpora sonidos de fondo en una página web, sonidos que se ejecutan automáticamente al cargarse la página. Es una etiqueta propietaria de Microsoft, por lo que sólo es interpretada por Internet Explorer, admitiendo los formatos de audio MID y WAV, aunque generalmente también acepta AU y MP3, en versiones actuales del nevagador o mediante plugins de uso general. Su sintaxis general, con sus atributos más importantes, es del tipo:
<bgsound src="ruta_fichero" loop="l" balance="b" volume="v"></bgsound> Donde: •

fija la ruta en la que se encuentra el fichero de audio a reproducir. La ruta puede ser relativa a nuestro sistema de carpetas local, absoluta respecto el sistema de carpetas del servidor web o una URL completa que localice el fichero en Internet.
src="ruta_fichero"

determina el número de veces (l) que se debe ejecutar el fichero de audio. Si le damos el valor infinite, el fichero se reproducirá indefinidamente.
loop="l"

determina el balance del sonido entre los dos altavoces del equipo, es decir, la potencia o intensidad con que se oirá en cada uno de ellos (derecho e izquierdo). Sus valores pueden estar entre -10,000 y +10,000, correspondiendo el valor 0 a un balance equilibrado entre los dos altavoces.
balance="b"

fija el volumen al que se oirá el sonido, y sus valores pueden variar entre -10,000 (mínimo) y 0 (máximo). No es soportado por los equipos MAC.
volume="v"

Ejemplo:
<bgsound src="../sonidos/wav.wav" balance=0 volume=0></bgsound> Que podéis ver funcionando en esta ventana (sólo Internet Explorer).

La etiqueta BGSOUND admite muchas más propiedades (disabled, delay, id, class, controls, etc.). Asímismo, esta etiqueta es accesible en Internet Explorer mediante código JavaScript, pudiendo modificar en tiempo real sus propiedades balance, loop, src, y volume, aunque ésta última sólo es accesible en plataformas PC. Para una

39/51

HTML información completa sobre todas las propiedades y funcionalidades de este etiqueta podéis visitar la página correspondiente de Microsoft:
http://msdn.microsoft.com/library/default.asp? url=/workshop/author/dhtml/reference/objects/bgsound.asp EMBED

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

que fija la ruta en la que se encuentra el fichero de audio a reproducir. La ruta puede ser relativa a nuestro sistema de carpetas local, absoluta respecto el sistema de carpetas del servidor web o una URL completa que localice le fichero en Internet.
src="ruta_fichero",

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

que define el número de veces (n) que se debe ejecutar en fichero de audio en el caso de Internet Explorer.

40/51

HTML

atributo importante, que declara el tipo de fichero de audio que estamos usando, con lo que el navegador web puede ejecutar el programa o plugin adecuado para la reproducción del fichero. Puede ser audio/midi, audio/wav, etc.
type="tipo_fichero",

que determina si el fichero de audio debe empezar a reproducirse por sí sólo al cargarse la página o si por el contrario será preciso la actuación del usuario (o de código de script) para que comience la audición.
autostart="true/false",

que establece, en caso de ser necesario un plugin especial para reproducir el fichero, la página web donde se puede descargar el mismo. Sólo se activa en el caso de que el navegador no sea capaz de reproducir el fichero por sí mismo, y es soportada tan sólo por Netscape Navigator.
pluginspage="URL",

que asigna un nombre identificador (debe ser único en la página) a una etiqueta embed determinada, con objeto de ser accedida luego por lenguajes de script.
name="nombre", volume="v",

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

2. Atributos referentes a la consola: • hidden="true/false",

que establece si la consola va a ser visible (false) o no (true). Es éste un aspecto polémico, ya que si ocultamos la consola obligamos al usuario a oir nuestro fichero, sin posibilidad de detenerlo ni de modificar el volumen, y si la mostramos estaremos incrustando en la pantalla un objeto que muchas veces nos romperá el esquema de diseño de nuestra página. Queda determinar su uso en cada caso concreto. que determina el ancho visible de la consola, en pixels. height="h", que determina el alto visible de la consola, en pixels. Estos atributos son también muy importantes, caso de que hayamos establecido hidden= "false", ya que de su valor va a depender la correcta visualización de la consola. En el caso de Internet Explorer, que muestra un logo de Windows Media sobre los controles, el tamaño mínimo aceptable debe ser de 140x100 pixels, ya que si no la consola saldrá deformada en exceso o recortada. Y en el caso de Netscape Navigator, deberemos asignar unos valores de 145x60 pixels, que es lo que ocupa la consola; si ponemos un tamaño menor, la consola será recortada, perdiendo funcionalidades, y si asignamos un tamaño mayor, aparecerán espacios grises alrededor de la consola, afeando el aspecto de la página. Si no especificamos estos atributos y tampoco hidden, nos aparecerán en la página tan sólo los mandos de la consola, sin logotipos añadidos (Internet Explorer) o la consola recortada (Netscape Navigator).
width="w", align="top/bottom/center/baseline/left/right/ texttop/middle/absmiddle/absbotom", análogo

al de la etiqueta

41/51

HTML IMG, define la alineación horizontal o vertical de la consola respecto de los elementos de la página.

que establece la separación horizontal, vspace="vs", que establece la separación vertical, en pixels, entre la consola y los elementos de la página que la rodean. Análoga a sus equivalentes de la etiqueta IMG.
hspace="hs",

Estos son los atributos principales, aunque podemos encontrar referencias de otros admitidos, aunque no suelen ser operativos en la realidad, ya que no suelen funcionar de forma correcta o son específicos de Nestcape (como toda la serie de atributos que configuran los controles de la consola. Ejemplo sin consola:
<embed src="../sonidos/mid.mid" hidden="true" type="audio/midi" autostart="true"></embed> Que podemos ver en funcionamiento en esta ventana. Ejemplo con consola: <embed src="../sonidos/mid.mid" hidden="false" type="audio/midi" autostart="false" width="150" height="100"></embed> Que tenemos visible (y audible) en esta otra ventana

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

42/51

HTML
En este ejemplo todos los hipervínculos no visitados (A:link) y los visitados (A:visited) aparecerán en negrita (bold) y en amarillo (yellow)

Dónde definir las hojas de estilo
Los estilos se pueden definir en el encabezado de la página HTML (entre las etiquetas <head> y </head>) o en un archivo externo que llevará la extensión .css. La ventaja de utilizar un archivo externo nos permitirá el uso de las definiciones de estilo en todas las páginas de nuestro sitio. De esta forma si queremos hacer algún cambio en el estilo de nuestras páginas, lo tendríamos que hacer en un único archivo (el CSS). Cabe destacar que las hojas de estilo CSS no solo funcionan para dar formato al texto, sino también a las tablas, listas, párrafos y capas, entre otros.

Formas de definir los estilos
Existen varias maneras de definir estilos CSS ya sea tanto para redefinir las etiquetas standard, como para crear nuevos estilos. • Definiéndolos documento: y aplicándolos para determinadas etiquetas en todo el

<style type="text/css"> H1{color:orange;font-style:italic} </style> En este caso H1 es la etiqueta del Titular de mayor tamaño y cada vez que se lo defina aparecerá en color naranja y en cursiva. • Estilos "in line", que solo se utilizarán una vez y por esta razón se los define como valores de la propiedad style. <p style="color:blue;background:lightblue;font-weight:bold"> Aca va un parrafo en azul, resaltado y en negrita </p> En este caso, el estilo se aplica a un párrafo. • Como clases de estilos: podemos crear clases de estilos propios que usaremos, a voluntad, en las etiquetas que queramos. Para crear una clase, el nombre debe comenzar con un punto y no puede contener caracteres como acentos o eñes. <stile type="text/css"> .textoarial{font-face:arial;color:#ffffff;fontstyle: bold;background:#000000} </style> Ahora, para aplicarlo, por ejemplo, al cuerpo del documento (etiqueta <body>), se debe utilizar el atributo class:

43/51

HTML
<body class="textoarial"> <p>Este texto es de clase textoarial</p> </body> Una clase se puede aplicar a distintas etiquetas, en este caso se aplicó a todo el cuerpo del documento. Se puede crear también una clase a partir de una etiqueta HTML. En este caso, se define de este modo: P{font-family:arial;color:blue} P.negrita{font-weight:bold} Y se utiliza de la siguiente forma: <P>Parrafo con letra ARIAL y color azul</P> <BR> <P class="negrita">Igual que antes pero, además, en negrita</P> • También se pueden utilizar identificadores cuando se quiere aplicar un estilo a uno o a varios elementos, los cuales pueden haberse definido con anterioridad o no por lo que se pueden hacer modificaciones y excepciones. Se los define con el carácter almohadilla (#) <style type="text/css"> table{font-family:courier;background:#CCFFFF} #resaltado{font-size:1.5em;font-weight:bold} </style> Para utilizarlo, por ejemplo, en una celda, utilizamos el atributo id: <td id="resaltado">Ocupación</td> <td>Estudiante de Ingeniería</td> En esta tabla, se aplicará el formato definido para la etiqueta table, pero en la primer celda se aplica un identificador para aumentar el tamaño del texto y pasarlo a negrita.

Vínculos de hojas de estilo externas
Dijimos anteriormente que es posible crear una sola hoja de estilos CSS global y guardarla en un archivo con extensión CSS para que de este modo se pueda vincular a un grupo o a todas las páginas de nuestro sitio. Para crear esta hoja de estilos podemos utilizar cualquier programa que trabaje con texto sin formato, como el Block de notas o Note Pad de Windows, y al momento de guardar, escribir el nombre de la siguiente manera: "estilos.css". De esta forma, al poner las comillas, el archivo se guardará con la extensión css (de otro modo se guardaría como txt). En el archivo CSS, no se deben incluir las etiquetas de comienzo y fin (<style...> </style>) , ya que estas son código HTML y no corresponden a la definición de estilos. Para realizar el vínculo debemos colocar el siguiente código en la sección <head>: <link rel="stylesheet" type="text/css" href="estilos.css">

44/51

HTML
En el atributo href, debemos colocar la ubicación del archivo css. Ahora, todas las páginas que lleven el link a la hoja de estilos, utilizarán el mismo formato y si queremos hacer algún cambio, solo debemos modificar el archivo css.

Aplicándolo a todas las páginas del sitio
Si utilizamos FrontPage 2000 para crear nuestras páginas, encontraremos en él la posibilidad de vincular, automáticamente, todas las páginas de nuestro sitio a una hoja de estilos. Para ello hay que ir a [Formato / Vínculos de hojas de estilo], elegir Todas las páginas y luego presionar en [Agregar] para seleccionar el archivo css. Automáticamente, se insertará el link a la hoja de estilos en todas las páginas del sitio.

Un truco
Un truco muy común, visto en muchos sitios, es hacer que los hipervínculos cambién de color al pasar con el puntero del mouse por encima. Esto se logra ya que a los hipervínculos se los puede definir de tres maneras: • a:link: representa el estilo del link común. • a:hover: representa el estilo que adquiere el link cuando pasamos el mouse por encima. • a:active: es el formato que adquiere en el momento justo en que presionamos sobre el. • a:visited: es el estilo del link una vez que ya hemos hecho clic sobre el. Para que experimenten, prueben el siguiente estilo: los links se presentarán en color celeste, pero sin subrayado (textdecoration: none), cuando pasamos por encima, cambian de color y se subrayan (text-decoration:underline), comprueben en el ejemplo lo que sucede al hacer clic. <style type="text/css"> a:link{color:#3399FF;text-decoration:none} a:hover{color:orange;text-decoration:underline} a:active{color:yellow;background:black;textdecoration: overline} a:visited{color:grey;font-style:italic} </style>

Para finalizar
Las hojas de estilo en cascada van a facilitarnos mucho la tarea de formatear el documento, siempre y cuando sepamos organizarnos bien. En una próxima ocasión veremos cómo manejar estilos sin necesidad de tocar el código de HTML, todo gracias a la ayuda de los editores visuales de páginas Web como Dreamweaver o FrontPage.

Cambiar el cursor del Mouse
Las hojas de estilo poseen una propiedad que permite cambiar la imagen del puntero del mouse.

45/51

HTML Listas de cursores
Cursores disponibles por defecto:
Nombre default crosshair pointer move nw-resize ne-resize n-resize e-resize help text wait Muestra

Definiendo el cursor
Al igual que todas las propiedades del lenguaje CSS, es posible definir el objeto aplicándolo a todo el documento o solo a una parte del mismo. A todo el documento <html> <title>Cambiar el cursor</title> <head> <style type="text/css"> <!-body {cursor: pointer} --> </style> </head> <body> </body> </html> A algunos sectores del documento <html> <title>Cambiar el <head> </head> <body> <p style="cursor: <p style="cursor: <p style="cursor:

cursor</title>

default">Cursor default</p> crosshair">Cursor crosshair</p> pointer">Cursor pointer</p>

46/51

HTML
<p style="cursor: <p style="cursor: <p style="cursor: <p style="cursor: <p style="cursor: <p style="cursor: <p style="cursor: <p style="cursor: </body> </html> move">Cursor move</p> nw-resize">Cursor nw-resize</p> ne-resize">Cursor ne-resize</p> n-resize">Cursor move</p> e-resize">Cursor move</p> help">Cursor move</p> text">Cursor move</p> wait">Cursor wait</p>

Personalizar cursor
También es posible utilizar un cursor personalizado: <html> <title>Cambiar el cursor</title> <head> <style type="text/css"> <!-body {cursor : url("ruta/harrow.cur")} --> </style> </head> <body> </body> </html>

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

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

47/51

HTML
<style type="text/css"> <!-input { font-family: Tahoma, Verdana, Arial; font-size: 11px; color: #FFFFFF; background-color: #6699CC; border: #000099; border-style: solid; border-topwidth: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px} select { font-family: Tahoma, Verdana, Arial; font-size: 11px; color: #FFFFFF; background-color: #6699CC; border: #000099; border-style: solid; border-topwidth: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px} --> </style> Este bloque de código va entre las etiquetas <HEAD> Y </HEAD> de la pagina que contendrá el formulario, fijense que "input" viene seguido por todo en código encerrado entre llaves, bueno, ese es el código es el que le va dando el formato a los cuadros de texto y a los botones, todo el código que pertenece a "select" le da el formato a la lista desplegable (Pais). ASPECTO FINAL

Si se fijan bien es muy facil modificar manualmente los valores, por ejemplo donde dice "background-color: #6699CC;" pueden modificar el valor hexadecimal #6699CC por #000099 y les quedaria el fondo de los controles color azul. Es cuestion de ir investigando de que se trata cada propiedad, igual todos los editores webs traen incorporado algun editor de CSS asi que tampoco se rompan la cabeza. Saludos "El Guru".

Cambiando de color las barras de scroll
Aplicando un estilo a nuestras páginas, podemos cambiar de color las barras de desplazamiento del navegador Internet Explorer, pudiendo personalizarlo al gusto de cada uno.

Ejemplo de la barra personalizada

48/51

HTML
Lo primero que debemos saber es a que a que parte de la barra corresponde cada elemento de la hoja de estilo: ARROW: flecha BASE: color base DARK-SHADOW: sombra del primer plano TRACK: fondo de la barra FACE: primer plano SHADOW: sombra del fondo HIGHLIGHT: luz cuadro de flecha 3D-LIGHT: luz 3d Código del estilo Debemos ubicar el siguiente código dentro de la página o dentro de una hoja de estilo: <style type="text/css"> body { scrollbar-arrow-color: white; scrollbar-base-color: white; scrollbar-dark-shadow-color: #000080; scrollbar-track-color: #0080C0; scrollbar-face-color: #000080; scrollbar-shadow-color: white; scrollbar-highlight-color: white; scrollbar-3d-light-color: a; } </style> Recuerden cambiar los colores para adecuarlos a su página y hacerla más vistosa.

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

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

Efecto Glow
Código: <span style="color:#FFFFFF;height:1;

49/51

HTML

filter:glow(color=#000000)">Efecto Glow</span>

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

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

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

Efecto fondo (Mask)
Código: <span style=" height=1; Filter: Mask(Color=#000000)">Efecto fondo (Mask)</span>

Efecto Wave
Código: <span style="height:50; Filter: Wave(Freq=4, Phase=100, Strength=2)">Efecto Wave</span>

Efecto Alpha
Código: <span style="width: 357; height: 50; Filter: Alpha(Opacity=100, FinishOpacity=0, Style=1, StartX=0, StartY=0, FinishX=580, FinishY=0)"><b>Efecto Alpha</b></span>

Efecto Flip
Código: <span style="width: 300; height: 50; color: red; Filter: FlipV">Efecto Flip</span>

Efecto Chaining Filters

50/51

HTML

Código: <span style="width: 357; height: 20; Filter: Mask(color=#FF0000) Shadow(Color=red, Direction=225) Chroma(color=#FF0000)">Efecto Chaining Filters</span> Todos estos efectos también pueden ser utilizados en imágenes: Imagen original

Imágenes con efectos Para aplicar los efectos en imágenes, sólamente hay que agregar el parámetro style (del efecto de texto) dentro del tag de inserción de la imagen y aplicar el filtro deseado. Código (del Efecto Alpha): (Imagen como dentro de una nube) <img SRC="obelisco.jpg" BORDER="0" style="Filter: Alpha(Opacity=100, FinishOpacity=0, Style=2, StartX=20, StartY=40, FinishX=0, FinishY=0)" width="317" height="248"> Código (del Efecto Wave):(Imagen con efecto de ola) <img SRC="obelisco.jpg" style="Filter: Wave(Freq=5, Phase=2200, Strength=10)" width="317" height="248"> De esta manera es posible aplicar cualquiera de los efectos nombrados anteriormente en cualquier imagen además de textos.

51/51

You're Reading a Free Preview

Descarga
scribd
/*********** DO NOT ALTER ANYTHING BELOW THIS LINE ! ************/ var s_code=s.t();if(s_code)document.write(s_code)//-->