Escolar Documentos
Profissional Documentos
Cultura Documentos
0
Autor: Daniel Rodrguez Herrera
Introduccin al curso
o Requisitos
o Agradecimientos
Versiones del HTML
o HTML 2.0
o HTML 3.0 y 3.2
o HTML 4.0
o Estndares en este curso
Mi primera pgina
o El cdigo
o La explicacin
o El cuerpo del documento
Formateo bsico
o Formato del prrafo
o Las 6 cabeceras
o Cambiando el tipo de letra
o Formato de frase
o Otros elementos
Caracteres especiales
o Caracteres extendidos en HTML
o Caracteres de control
Enlaces
o La etiqueta <A>
o Las URLs
o Anclas
Listas
o Listas desordenadas
o Listas ordenadas
o Listas de definiciones
Imgenes
o Imgenes y enlaces
o Alineacin respecto al texto
Formateo fino
o Cambio de color
o Tamaos del texto
o Tipo de letra
Estructura del documento
o La cabecera
o El cuerpo
Formularios
o Cajas de texto
o Opciones
o Botones del formulario
o Otros elementos
Controles avanzados para formularios
o Botones
o Etiquetas
o
o
Mapas
o
o
Tablas
o
o
o
Agrupacin de elementos
Desactivacin de elementos
Marcos
Etiqueta <FRAMESET>
Etiqueta <FRAME>
Acceso a otros marcos
Hojas de estilo
o Clases
o Etiquetas <SPAN> y <DIV>
Hojas de estilo: referencia
o Propiedades de bloque
o Propiedades de tipo de letra
o Propiedades de formato del texto
o Propiedades de color y fondo
o Propiedades de clasificacin
Lenguajes de script
o Javascript
Capas
o Definicin
o Propiedades
Sonido
o Sonido activado por el usuario
o Sonido de fondo
Gua de estilo
o Contenido
o Navegacin
o Estructura de las pginas
o Accesibilidad
o Diseo
o Mantenimiento y pruebas
Enlaces a otras pginas
o Otros manuales de HTML
o Sobre JavaScript
o Sobre HTML dinmico
o Sobre otras tecnologas relacionadas
FAQ (Preguntas ms frecuentes)
o Para comentarme algo o preguntar otra cosa
o
o
o
o
o
Requisitos
Agradecimientos
Introduccin al curso
Este curso ha nacido con la intencin de complementar los anteriores cursos de
JavaScript y HTML dinmico que tengo en estas pginas. As podrs terminar creando
una pgina de calidad empezando desde cero.
Lo primero que hay que decir es que este curso no explica ningn estndar especfico, ni
examina exaustivamente todos los parmetros de las etiquetas HTML. Intenta ser una
gua prctica, de modo que incluir todas las cosas que yo crea importantes y que me
han provocado algn quebradero de cabeza mientras realizaba mis pginas. El curso y
sus ejemplos los he probado con Explorer 4 y Netscape 4.
Si tu navegador es capaz de manejar ms de una ventana a la vez, las pginas de
ejemplo del curso se vern en otra ventana (slo una). De este modo es posible observar
a la vez el ejemplo y la explicacin y se evita la proliferacin excesiva de ventanas.
Requisitos
Si ests viendo este curso ya tienes en tus manos el requisito ms difcil de cumplir:
tener acceso a Internet y un navegador. El otro requisito es un editor de textos con el que
hacer las pginas. Da lo mismo cual. Para hacer este curso yo utilic el de MS-DOS, por
ejemplo. Sin embargo, es posible entender el curso sin hacer una sola pgina, aunque
siempre es recomendable practicar.
Podis hacer pginas con algn editor especfico de pginas web, pero no es necesario.
Es ms, algunos de esos editores esconden las etiquetas HTML al usuario, de modo que
posiblemente lo que aprendas aqu te sera de poca utilidad.
Tampoco requiere que lo leis conectados, ya que os podis descargar el curso (
chtml.zip).
Agradecimientos
Aparte de dar las gracias a todos aquellos que visitan la web y en especial a los que se
toman la molestia de rellenar el formulario de abajo, quiero agradecer especialmente
desde aqu a todos aquellos que han colaborado en mejorar estas pginas. En especial a
Peter Promenade, por indicarme la nueva manera de justificar el texto en HTML 4.0 y a
Juan Jos Nuevo, por ayudarme con el sonido.
Curso de HTML 4.0
Autor: Daniel Rodrguez Herrera
Versiones del HTML
o HTML 2.0
o HTML 3.0 y 3.2
o HTML 4.0
Mi primera pgina
El cdigo
primera.html
<codigo><HTML>
<HEAD>
<TITLE>Mi primera pagina</TITLE>
</HEAD>
<BODY>
<CENTER><H1>Mi Primera pagina</H1></CENTER>
<HR>
<P>Esta es mi primera pagina (chispas). Por el
momento no se que tendra, pero dentro de poco
pondre aqui muchas cosas interesantes.
</BODY>
</HTML>
Tambin puedes ver el resultado de este ejemplo.
La explicacin
Lo primero que conviene explicar es en qu consisten todos esos smbolos de mayor y
menor que estn distribuidos por ah. El lenguaje HTML se basa en la sintaxis SGML
(toma siglas). Esto quiere decir que cualquier cosa que hagamos en HTML estar
encerrada entre dos etiquetas de esta manera:
<ETIQUETA parmetros> ... </ETIQUETA>
Hay ocasiones en que no es necesario cerrar la etiqueta. Mirando el cdigo habris
visto un par de ejemplo que ya explicar ms adelante. Pero como lo primero que
Formateo bsico
Se pueden establecer varias categoras dentro de las etiquetas usadas para formatear el
texto. Nosotros las dividiremos entre aquellas que sirven para cambiar prrafos enteros
y las que son capaces de formatear tiras de caracteres dentro del prrafo.
Formato del prrafo
Estas son las etiquetas ms importantes (excluyendo algunas que veremos ms
adelante):
Etiqueta
<P>
<CENTER> ...
</CENTER>
Utilidad
Resultado
Sirve para delimitar un prrafo. Inserta
una lnea en blanco antes del texto.
Soy un prrafo
Yo soy normal
Permite centrar todo el texto del prrafo.
Yo estoy centrado
Representa el texto encerrado en ella
con un tipo de letra de paso fijo. Muy
til a la hora de representar cdigo
Estoy en paso fijo
fuente. El parmetro WIDTH especifica
el nmero mximo de caracteres en una
lnea.
Permite justificar el texto del prrafo a Yo estoy a la izquierda
la izquierda (ALIGN=LEFT), derecha
Yo al centro
(RIGHT), al centro (CENTER) o a
Y yo a la derecha
(recuerda a la poltica
ambos mrgenes (JUSTIFY
)
esto, oye)
Yo soy el ms chulo,
porque estoy en todos
los lados.
Daniel Rodrguez
<ADDRESS> ...
Para escribir direcciones (de esas donde Herrera
</ADDRESS>
vive la gente, no electrnicas).
C/Ecuador 9, 1B
28220 Majadahonda
Me gustara
Para citar un texto ajeno. Se suele
reencarnarme en las
<BLOCKQUOTE> ... implementar dejando mrgenes tanto a
yemas de los dedos de
</BLOCKQUOTE>
izquierda como a derecha, razn por la
Warren Beatty (Woody
que se usa habitualmente.
Allen)
Las 6 cabeceras
El HTML nos ofrece seis etiquetas distintas para mostrar cabeceras. Son stas:
Etiqueta
<H1> ... </H1>
<H2> ... </H2>
<H3> ... </H3>
<H4> ... </H4>
Resultado
Cabecera de nivel 1
Cabecera de nivel 2
Cabecera de nivel 3
Cabecera de nivel 4
Utilidad
Resultado
Soy un texto negro
Pone el texto en negrita.
como el tizn
Representa el texto en
Estoy ladeado
cursiva.
Como soy muy
Para subrayar algo.
importante estoy
subrayado
A m, en cambio,
nadie me quiere
Para tachar.
Permite representar el
texto en un tipo de letra
de paso fijo.
Letra superndice.
Letra subndice.
Incrementa el tamao
del tipo de letra.
Disminuye el tamao
del tipo de letra.
Hace parpadear el texto.
Resulta algo irritante.
No soy variable
E=mc2
ai,j=bi,j+1
Soy GRANDE
Cre ver un lindo
gatito
Molesto?
Formato de frase
En estos elementos indicas el tipo de informacin que encierran las etiquetas, pero no
como se representan:
Etiqueta
<CITE> ... </CITE>
<CODE> ...
</CODE>
<STRONG> ...
</STRONG>
Utilidad
Para citar un texto ajeno.
Resultado
Esta frase no es ma
int x=0;
La cosa es importante.
Representar variables de un
cdigo.
Para representar una serie de
caracteres literalmente.
Abreviaturas.
No son muy utilizados, ya que no permiten tener un control exacto de la manera en que
la pgina se representar finalmente.
Otros elementos
Por ltimo, debemos estudiar algunas cosas que no son texto y que podemos incorporar
a nuestra pgina.
Etiqueta
Utilidad
Resultado
<HR>
<BR>
Salto de lnea.
Hay un antes y un
despus de saltar a otra lnea
Esto se escribe y
Caracteres especiales
Si os habeis fijado en los ejemplos habris visto que en los textos de los mismos no hay
acentos, ni ees, ni smbolos de abrir interrogacin o exclamacin. Esto es debido a los
distintos juegos de caracteres que manejan los ordenadores.
Las mquinas manejan la informacin en formato binario (es decir, en unos y ceros).
Estos, a su vez, forman nmeros, los cuales se traducen en letras. Cmo? Mediante
tablas. Podemos asignar el valor 64 a la letra a, el 65 a la b, etc..
El problema est en que cada ordenador es de un fabricante distinto y puede adoptar una
tabla diferente al resto. Para evitarlo existen diversos estndares y el ms extendido es el
ASCII. De hecho, actualmente todos los ordenadores tienen la misma tabla ASCII para
los primeros 127 caracteres. Pero esa tabla no contiene vocales con acento, ni ees, ni
smbolos de abrir interrogacin o exclamacin... Esto nos pasa por dejar que los
norteamericanos sean quienes construyan las computadoras.
El HTML 2.0 eligi como tabla estndar la ISO-Latin-1, que comparte con la ASCII los
127 caracteres e incluye unos cuantos ms hasta el nmero 255.
Caracteres extendidos en HTML
La manera de incluir los caracteres extendidos (cuyo nmero est ms all del 127)
consiste en encerrar el cdigo entre los caracteres &# y ;. As pues, lo siguiente:
½
nos debera dar un medio (). Tambi existe una serie de sinonimos para poder recordar
con ms facilidad estos caracteres. As, por ejemplo, ½ tambin se puede escribir
como ½. Vamos a ver algunos de estos cdigos, los ms tiles a la hora de
escribir en espaol:
Cdigo
á, Á, é,
Resultado
, , , , , , , , y
É,...
y
¿
¡
º
ª
™
©
®
o ™
Caracteres de control
En el HTML existen cuatro caracteres de control, que se usan para formar etiquetas,
establecer parmetros, etc.. Para poder emplearlos sin riesgo deberemos escribir los
siguiente cdigos:
Cdigo
<
>
&
"
Resultado
<
>
&
"
Ahora podremos ver el ejemplo anterior corregido para incluir acentos y dems.
Tambin tenis a vuestra disposicin la tabla completa de caracteres del HTML 2.0.
Curso de HTML 4.0
Autor: Daniel Rodrguez Herrera
Enlaces
o La etiqueta <A>
o Las URLs
o Anclas
Enlaces
Las siglas HTML significan HyperText Markup Language, lo que para nosotros quiere
decir que es un lenguaje para hipertexto. Existen mltiples formatos de hipertexto (por
ejemplo, los ficheros de ayuda de Windows) y lo que tienen en comn es que todos
poseen enlaces.
Un enlace es una zona de texto o grficos que si son seleccionados nos trasladan a otro
documento de hipertexto o a otra posicin dentro del documento actual. Siendo HTML
el lenguaje de Internet, la diferencia que posee con respecto a otros tipos de hipertexto
es que ese otro documento puede estar fsicamente en la otra punta del planeta. Son los
enlaces lo que hacen de la telaraa o World Wide Web lo que es.
La etiqueta <A>
Para incorporar un enlace hay que utilizar esta etiqueta. Todo lo que encerremos entre
<A> y </A>, ya sea texto o imgenes, ser considerado como enlace y sufrir dos
modificaciones:
1. Se visualizar de manera distinta en el navegador. El texto aparecer subrayado
y de un color distinto al habitual, y las imgenes estarn rodeadas por un borde
del mismo color que el del texto del enlace.
2. Al pulsar sobre el enlace, seremos enviados al documento que apuntaba el
enlace.
Para que el enlace sirva para algo debemos especificarle una direccin. Lo haremos de
la siguiente manera:
<A HREF="direccion">Pulsame</A>
La direccin estar en formato URL (Uniform Resource Locator).
Las URLs
Una URL nos indica tanto una direccin de Internet como el servicio que esperamos nos
ofrezca el servidor al que corresponde la direccin. Tiene el siguiente formato:
servicio://mquina:puerto/ruta/fichero@usuario
donde el servicio podr ser uno de los siguientes:
http
Es el servicio invocado para transmitir pginas web y el que usaremos
normalmente en los enlaces.
https
Es una innovacin sobre el anterior, que nos permite acceder a servidores
(generalmente comerciales) que nos ofrecen el uso de tcnicas de enciptacin
para proteger los datos que intercambiemos con l de terceras personas.
ftp
Permite trasmitir ficheros desde servidores de ftp annimo. Si no le pedimos un
fichero sino un directorio, en general el navegador se encargar de mostrarnos el
contenido del mismo para que podamos escogerlo cmodamente. Utilizando la
@ podremos acceder a servidores privados.
mailto
Para poder mandar un mensaje. Por ejemplo, la URL
mailto:multivac@idecnet.com me mandara un mensaje a m.
news
Para poder acceder a foros de discusin (mal traducidos a veces como grupos de
noticias). Se indica el servidor y el grupo. Por ejemplo
Listas
Existen varios tipos de listas en HTML. Todas ellas se pueden meter unas dentro de
otras formando rboles muy bonitos y preciosos. Todos los tipos siguen el siguiente
formato:
<tipo_lista>
<LI>Primer elemento
<LI>Segundo elemento
</tipo_lista>
tipo_lista puede ser una de las siguientes: DIR, DL, MENU, OL y UL.
Listas desordenadas
La etiqueta <UL> nos permite presentar listas de elementos sin orden alguno. Cada
elemento de la lista ir normalmente precedido por un crculo. Por ejemplo,
<UL>
<LI>Primer elemento
<LI>Segundo elemento
</UL>
se ver como
Primer elemento
Segundo elemento
COMPACT
TYPE="disc",
"circle", "square"
Utilidad
Indica al navegador que debe representar la
lista de la manera ms compacta posible.
Resultado
Primer
elemento
Segundo
elemento
Tipo disc
Tipo circle
Tipo square
Tambin son listas desordenadas aquellas que utilizan las etiquetas <DIR> y <MENU>.
En principio tenan como propsito representar una lista estilo directorio
(multicolumna) o tipo men (una sola columna). En la prctica los navegadores lo han
implementado como sinonimos de <UL>, por lo que no los estudiaremos aqu.
Listas ordenadas
COMPACT
Utilidad
Resultado
1. Primer
elemento
2. Segundo
elemento
1. Tipo 1
START="num"
VALUE="num"
a. Tipo a
A. Tipo A
i.
Tipo i
Tipo I
3. Primer
elemento
4. Segundo
elemento
1. Primer
elemento
4. Segundo
elemento
5. Tercer
elemento
Listas de definiciones
Este es el nico tipo de lista que no utiliza la etiqueta <LI>. Al tener como objetivo
presentar una lista de definiciones, de modo que tiene que representar de manera distinta
el objeto definido y la definicin. Esto se hace por medio de las etiquetas <DT> y
<DD>:
<DL>
<DT>Primer elemento<DD>Es un elemento muy bonito.
<DT>Segundo elemento<DD>Este, en cambio, es peor.
</DL>
se ver como
Primer elemento
Es un elemento muy bonito.
Segundo elemento
Este, en cambio, es peor.
La etiqueta <DL> slo admite como parmetro el ya conocido COMPACT, que tiene el
mismo comportamiento que con los otros dos tipos de lista anteriores.
Curso de HTML 4.0
Autor: Daniel Rodrguez Herrera
Imgenes
o Imgenes y enlaces
o Alineacin respecto al texto
Imgenes
Para incluir grficos e imgenes en nuestras pginas utilizaremos la etiqueta
<IMG>
de esta manera:
<IMG SRC="fichero_grafico" ALT="descripcion">
El parmetro SRC especifica el nombre del fichero que contiene el grfico. Los
formatos estndar en la red son el GIF y el JPG. La ltimas versiones de Netscape y
Explorer aceptan tambin el formato PNG.
El parmetro ALT especifica el texto que se mostrar en lugar del grfico en aquellos
navegadores que no sean capaces de mostrarlos (como el Lynx) y en el supuesto de que
el usuario los haya desactivado. Algunos navegadores lo muestran cuando pasamos el
ratn por encima de la imagen. Es por eso que, aunque algunos usuarios no lo lleguen a
ver nunca, conviene ponerlo siempre. De hecho, el estdar HTML 4.0 obliga a hacerlo.
Existen dos atributos que, aunque opcionales, conviene indicar siempre: la altura y la
anchura del grfico en pixels. De este modo, el navegador puede mostrar un recuadro
del tamao de la imagen mientras la va leyendo de la red y as poder mostrar el resto de
la pgina correctamente mientras tanto.
<IMG SRC=graficos/dwnldns.gif" ALT="Netscape 4.0" WIDTH=88 HEIGHT=31>
Se ve as:
Para los menos avezados en ingls, decir que WIDTH es la anchura y HEIGHT la
altura.
Imgenes y enlaces
Suele ser comn incluir enlaces dentro de un grfico. En ese caso, por defecto, los
navegadores le pondrn un borde al grfico para indicar que efectivamente es un enlace.
Prctico, pero la mayora de las veces bastante poco esttico. Por medio del parmetro
BORDER podremos alterar el grosor de ese borde o incluso eliminarlo poniendolo a
cero.
<A HREF="http://www.netscape.com">
<IMG SRC="graficos/dwnldns.gif" ALT="Netscape 4.0" WIDTH=88 HEIGHT=31>
</A>
Se ve as:
Sin embargo,
<A HREF="http://www.netscape.com">
<IMG SRC="graficos/dwnldns.gif" ALT="Netscape 4.0" WIDTH=88 HEIGHT=31
BORDER=0>
</A>
Se ve as:
Utilidad
Coloca el punto ms alto de la imagen
coincidiendo con ms alto de la lnea de texto
actual.
Alinea el punto medio (en altura) de la imagen
con la base del texto.
Resultado
Este es
el texto
Este es
el texto
BOTTOM(Por
defecto)
LEFT
RIGHT
Este es
el texto
Este es
el texto
Este es
el texto
Hay que aclarar que la base del texto es la lnea donde descansan casi todas las letras del
alfabeto excepto algunas como la p, la g o la j.
Curso de HTML 4.0
Autor: Daniel Rodrguez Herrera
Formateo fino
o Cambio de color
o Tamaos del texto
o Tipo de letra
Formateo fino
Lo ideal cuando trabajas con texto sera poder cambiarlo al tamao que te viniese bien,
ponerlo de colorines y cambiar el tipo de letra. Todo esto puedes hacerlo gracias a la
etiqueta <FONT>.
Cambio de color
Para hacerlo vamos a utilizar el parmetro COLOR. La manera de especificarle el color
es comn a todas las etiquetas HTML: o bien indicando el nombre, si es un color
normal, o bien especificando el porcentaje de rojo, verde y azul (cdigo RGB) del
mismo. Los colores reconocidos son los siguientes:
Black Silver Gray White Maroon Red Purple Fuchsia
Green Lime Olive Yellow Navy
<FONT color="red">Estoy en rojo</FONT>
El modo de indicar el color RGB es el siguiente:
<FONT COLOR="#FF0000">D</FONT>
<FONT COLOR="#EF0000">E</FONT>
<FONT COLOR="#DF0000">G</FONT>
<FONT COLOR="#CF0000">R</FONT>
<FONT COLOR="#BF0000">A</FONT>
<FONT COLOR="#AF0000">D</FONT>
<FONT COLOR="#9F0000">A</FONT>
<FONT COLOR="#8F0000">D</FONT>
Blue Teal
Aqua
<FONT COLOR="#7F0000">O</FONT>
Lo que nos mostrara lo siguiente:
DEGRADADO
La primera componente en hexadecimal es el rojo, la segunda el verde y la tercera el
azul (Red Green Blue, RGB).
Tamaos del texto
El parmetro utilizado para indicar el tamao es SIZE. Puede utilizarse para indicar
tamaos absolutos:
SIZE=1 SIZE=2 SIZE=3 SIZE=4 SIZE=5 SIZE=6 SIZE=7
El tamao por defecto es 3. Tambin se puede utilizar los modificadores + y - para
indicar un incremento (o decremento) relativo del tamao del tipo de letra. As, por
ejemplo, si indicamos que queremos un tamao de -2 estaremos pidiendo al navegador
que nos muestre el tipo de letra dos veces ms pequeo.
<FONT SIZE=2><font size="2">Tamao 2</font><FONT SIZE="+3">
<font size="2"><font size="+3">Tamao 6</font></font></FONT></FONT>
Tipo de letra
Por ltimo, podemos especificar el nombre del tipo de letra que queremos utilizar
gracias al parmetro FACE. Como en principio no tenemos manera de saber que tipo de
letra tiene instalado el ordenador del usuario que est viendo nuestras pginas, podemos
indicar ms de uno separado por comas. Si el navegador no encuentra ninguno seguir
utilizando el que tiene por defecto:
<FONT FACE="Helvetica,Arial,Times"><font face="Helvetica,Arial,Times">No
s como voy a salir exactamente</font></FONT>
De todos modos es recomendable no utilizar con fe ciega este atributo en Internet, ya
que impide que todos puedan ver nuestras pginas como nosotros. E Internet, siempre
que nos lo permitan Microsoft y Netscape, debe ser lo ms estndar posible.
Curso de HTML 4.0
Autor: Daniel Rodrguez Herrera
Estructura del documento
o La cabecera
o El cuerpo
nos indicara la herramienta con que hemos creado la pgina (en este caso la versin
4.03 en espaol para Windows 95 del Composer de Netscape). Estas son las
propiedades ms comunes:
Propiedad
AUTHOR
GENERATOR
Utilidad
Autor de la pgina.
Herramienta utilizada para hacer la pgina.
Palabras que permite clasificar la pgina dentro de un buscador
CLASSIFICATION
jerrquico (como Yahoo).
KEYWORDS
Palabras clave por las que encontrarn la pgina en los buscadores.
DESCRIPTION
Descripcin del contenido de la pgina.
Hay tambin otro elemento interesante que podremos incluir en nuestras cabeceras.
Cuando especificamos una URL relativa en un enlace, en principio es para acceder a
una pgina situada en nuestro mismo servidor. Sin embargo, si especificamos:
<BASE HREF="http://www.hornet.org/music">
Ahora todas nuestras URLs relativas se referirn al directorio /music dentro del servidor
http://www.hornet.org.
El cuerpo
Obviamente no voy a explicar lo que entra dentro del cuerpo (prcticamente todos los
captulos del curso intentan hacerlo) sino los parmetros que admite la etiqueta
<BODY>:
BACKGROUND
BGCOLOR
BGPROPERTIES
TEXT
LINK
VLINK
ALINK
LEFTMARGIN y
TOPMARGIN
MARGINWIDTH y
MARGINHEIGHT
No resulta recomendable cambiar los colores del texto y enlaces a no ser que exista
alguna dificultad al leerlos por haber cambiado el fondo, ya que en muchas ocasiones el
usuario ha podido cambiarlos en las opciones de su navegador y estarn ya a su gusto.
Curso de HTML 4.0
Autor: Daniel Rodrguez Herrera
Formularios
o Cajas de texto
o Opciones
o Botones del formulario
o Otros elementos
Formularios
Una de las mayores ventajas de la web es que resulta tremendamente interactiva. Los
usuarios de una pgina no tienen ms que escribir al autor de la misma para comentarle
cualquier cosa de la misma. Sin embargo, si deseamos que nos digan slo unas cosas
concretas (responder a alguna pregunta, seleccionar entre varias opciones, etc..)
deberemos utilizar formularios. Por ejemplo,
<FORM ACTION="" METHOD=POST>
Nombre:<BR><INPUT NAME="nombre" TYPE=TEXT SIZE=32>
<BR>Cuantos son dos y dos?<BR>
<INPUT NAME="Respuesta" TYPE=RADIO VALUE="mal">3<BR>
<INPUT NAME="Respuesta" TYPE=RADIO VALUE="bien">4<BR>
<INPUT NAME="Respuesta" TYPE=RADIO VALUE="mal">5<BR>
<INPUT TYPE="Submit" VALUE="Comprobar">
</FORM>
se ver as:
Nombre:
Cuantos son dos y dos?
3
4
5
Comprobar
El botn no hace nada porque no hemos definido qu debe hacer, as que sed buenos y
no lo pulsis.
Todos los elementos de un formulario deben estar encerrados entre <FORM> y
</FORM>. Como parmetros cabe destacar tres. ACTION define el URL que deber
gestionar el formulario. Puede ser una direccin de correo (precedida del inevitable
<TEXTAREA><br/>Por defecto<br/></TEXTAREA>
Lo que incluyamos entre las dos etiquetas ser lo que se muestre por defecto dentro de
la caja. Admite estos parmetros:
Parmetro
Utilidad
ROWS
Filas que ocupar la caja de texto.
COLS
Columnas que ocupar la caja de texto.
Opciones
Si lo que deseamos es que el usuario decida entre varias opciones podremos hacerlo de
dos modos. El primero es el que vimos en el ejemplo inicial:
3<INPUT NAME="Respuesta" TYPE=RADIO VALUE="mal"><BR> 3
4<INPUT NAME="Respuesta" TYPE=RADIO VALUE="bien"><BR> 4
5<INPUT NAME="Respuesta" TYPE=RADIO VALUE="mal"><BR>
5
Para asociar varios botones de radio a una misma variable les pondremos a todos ellos
el mismo NAME. Aparte de esto acepta los siguientes parmetros:
Parmetro
Utilidad
VALUE
Este es el valor que asignar a la variable.
Si lo indicamos en una de las opciones esta ser la que est activada por
CHECKED
defecto.
Pero tambin tenemos una posibilidad que ocupa bastante menos: las listas
desplegables. Para emplearlas deberemos utilizar dos etiquetas, SELECT y OPTION:
<SELECT NAME="Navegador">
<OPTION>Netscape
<OPTION>Explorer
<OPTION>Opera
<OPTION>Lynx
<OPTION>Otros
</SELECT>
Los parmetros que admite SELECT son las siguientes:
Parmetro
Utilidad
El nmero de opciones que podremos ver. Si es mayor que 1 veremos una
SIZE
lista de seleccin y, si no, veremos una lista desplegable.
MULTIPLE Si lo indicamos podremos elegir ms de una opcin.
Y OPTION estos:
Parmetro
Utilidad
VALUE
Este es el valor que asignar a la variable.
Si lo indicamos en una de las opciones esta ser la seleccionada por
SELECTED
defecto.
Botones del formulario
Existen dos: uno que se utiliza para mandar el formulario y otro que sirve para limpiar
todo lo que haya rellenado el usuario:
<INPUT TYPE=SUBMIT><BR>
<INPUT TYPE=RESET>
Enviar consulta
Restablecer
Podemos cambiar el texto que el navegador pone por defecto en esos botones utilizando
el parmetro VALUE.
Otros elementos
Puede que necesitos que el usuario sencillamente nos confirme o niegue algo. Lo
podremos conseguir por medio de controles de confirmacin:
<INPUT NAME="Belleza" TYPE=CHECKBOX>Me considero
Me considero
guapo/a
guapo/a
Si queremos que el control est activado por defecto le aadiremos el parmetro
CHECKED. El formulario asignar a la variable NAME el valor on u off.
Por ltimo, existe la posibilidad de que necesitemos que, en el formulario, tengamos
alguna variable con un valor previamente asignado. Por ejemplo, en todos los cursos
que tengo el formulario es el mismo. Y de alguna manera tendr que distinguirlos
cuando me lleguen, digo yo. As que incluyo algo como esto:
<INPUT TYPE=HIDDEN NAME="Curso" VALUE="HTML 4.0">
De este modo ya s de que curso me estn hablando.
Curso de HTML 4.0
Autor: Daniel Rodrguez Herrera
Controles avanzados para formularios
o Botones
o Etiquetas
o Agrupacin de elementos
o Desactivacin de elementos
Una de las cosas que ms han mejorado son los botones. Ahora disponen de una etiqueta
propia, de modo que se pueda encerrar con ella todo tipo de elementos HTML, como
grficos o, incluso, tablas enteras.
Como no poda ser de otra manera, la etiqueta en cuestin se llama BUTTON:
<BUTTON TYPE="button">
<table border="1">
<tr><BR/>
<th>Soy una</th><BR/>
<th>tabla</th>
Soy una
tabla
</tr>
<tr>
que est en un botn
<td>que est</td>
<td>en un botn</td>
</tr>
</table>
</BUTTON>
Los parmetros de dicha etiqueta son los normales, TYPE, que podr tomar los valores
SUBMIT (por defecto), RESET y BUTTON, NAME y VALUE.
Por otro lado, ahora podemos declarar un grfico como un elemento ms de entrada.
como un nuevo tipo dentro del elemento INPUT:
Este elemento se comportar de mismo modo que un botn de tipo SUBMIT, pero
aadir como informacin en el formulario las coordenadas x e y donde el usuario lo
puls.
Etiquetas
Hasta hora, el texto que acompaaba a los campos de entrada no estaba asociado a los
mismos de ninguna manera. As, por ejemplo, si pulsbamos en el texto que
acompaaba a un control de confirmacin, no suceda nada. Ahora, en cambio, si
utilizamos la etiqueta LABEL, el control cambiar de estado (slo disponible en
Netscape 5):
<LABEL>
<INPUT NAME="Belleza" TYPE=CHECKBOX>
Me considero guapo/a
</LABEL>
Me considero guapo/a
Lo bueno que tiene es que se puede usar sin peligro, ya que no afectar a los usuarios de
navegadores antiguos.
Agrupacin de elementos
Hasta ahora, no disponamos de ninguna manera de agrupar visualmente varios
controles, si no echbamos mano de elementos que no son del formulario, como tablas o
imgenes.
Ahora, si encerramos una parte de un formulario dentro de la etiqueta FIELDSET se
mostrar un rectngulo alrededor de los mismos. Si adems, le indicamos un ttulo por
medio de la etiqueta LEGEND nuestros formularios quedarn hechos un verdadero
primor:
<FIELDSET>
<LEGEND>Mi hermoso
formulario</LEGEND>
<LABEL>
Mi texto:
<INPUT TYPE="text">
</LABEL>
</FIELDSET>
LEGEND admite como parmetro ALIGN, que indicar en qu lugar se coloca el ttulo.
Por defecto es TOP (arriba), pudiendo estar tambin abajo (BOTTOM), a la izquierda
(LEFT) o a la derecha (RIGHT).
Desactivacin de elementos
Todos los controles de un formulario se pueden desactivar, impidiendo as al usuario
que los utilice. Se seguirn mostrando en pantalla, aunque con un aspecto distinto para
indicar su triste estado. Para ello slo tenemos que indicarle el parmetro DISABLED:
<LABEL DISABLED>Texto:
<INPUT TYPE=TEXT DISABLED> Texto:
</LABEL>
Esto, en principio, no parece de demasiada utilidad. Para qu queremos tener controles
desactivados? Para eso no los ponemos, no? Lo bueno que tiene es que el estado de
activacin de un control es accesible desde JavaScript. Eso nos permitir activar o
desactivar una parte de nuestro formulario dependiendo de lo que el usuario haya
introducido previamente en otros controles del mismo.
Curso de HTML 4.0
Autor: Daniel Rodrguez Herrera
Mapas
o Mapas gestionados por el cliente
o Cmo usar un mapa
Mapas
Hemos visto que podemos hacer enlaces de texto y de grficos. Pero tambin existe otra
posibilidad: que dentro de una sola imagen podamos acceder a varios enlaces. Se hace
declarando zonas dentro de la imagen (rectngulos, crculos, etc..), siendo cada una de
ellas un enlace distinto. Tradicionalmente, siempre han existido dos maneras de hacerlo:
Los segundos fueron los primeros en desarrollarse y estaban incluidos dentro del
estndar HTML 2.0. Sin embargo, nunca hubo una manera comn de gestionar esos
mapas. Debido a ello, Netscape elabor un sistema propio que fue incluido en el
estndar 3.2: los mapas gestionados por el navegador.
Mapas gestionados por el cliente
Para utilizarlos necesitaremos dos cosas: declarar el mapa y asignarlo a una imagen.
Vamos primero a declarar nuestro mapa:
<MAP NAME="mi_mapa">
<AREA SHAPE=... COORDS=... ALT="Enlace a..">
...
</MAP>
Dentro de la etiqueta MAP slo podremos definir el nombre del mapa (algo
imprescindible, por otra parte). Es dentro de cada elemento AREA donde podremos
definir cosas ms interesantes:
Parmetro
Utilidad
SHAPE
Define la forma de la zona, que podr ser rectangular, circular o poligonal.
Coordenadas (separadas por comas) que definen la zona. El nmero y
COORDS
significado de esas coordenadas depender de la zona.
HREF
URL a donde ir el usuario si pulsa sobre esa zona.
NOHREF Especifica que esa zona no tiene asignado enlace alguno.
Texto que se presentar en lugar de la imagen en navegadores no grficos
ALT
para acceder al enlace.
Como podemos ver, para declarar correctamente una zona necesitamos conocer cmo se
definen exactamente las formas y coordenadas:
SHAPE
Rectangular
RECT
Circular
CIRC
Polgono
POLY
COORDS
"x1,y1,x2,y2" siendo (x1,y1) la esquina superior izquierda y
(x2,y2) la inferior derecha.
"x,y,radio" siendo (x,y) el centro del crculo y radio su... eehh..
cmo lo dira yo? Su radio?.
"x1,y1,x2,y2,x3,y3,..." definiendo cada pareja (x,y) una
irregular
Toda la imagen
DEFAU
No se indican.
LT
Hay que tener en cuenta que, cuando dos zonas se solapan, la que est declarada
primero es la que tiene preferencia. Por eso declaramos al final una zona que no
conduce a ningn URL por si el usuario pulsa con el ratn donde no debe.
Curso de HTML 4.0
Autor: Daniel Rodrguez Herrera
Tablas
o Definir las filas
o Definir las celdas
o Ttulo de la tabla
Tablas
Las tablas son posiblemente la manera ms clara de organizar la informacin. Tambin
es el modo ms adecuado de maquetar texto y grficos de una manera algo ms
controlada que con los parmetros ALIGN.
<TD>2,1</TD>
<TD>2,2</TD>
<TD>2,3</TD>
</TR>
</TABLE>
Como podis ver (o mejor no ver) la tabla no tiene mucho aspecto de tabla. Quedara
mejor con unos bordes, no? Puede que tampoco le viniese mal mayor espacio entre
celdas o mayor anchura. Estas son las cosas que podremos cambiar con los atributos de
TABLE:
BORDER
Especifica el grosor del borde que se dibujar alrededor de las celdas. Por
defecto es cero, lo que significa que no dibujar borde alguno.
CELLSPAC
Define el nmero de pixels que separarn las celdas.
ING
CELLPADD Especifica el nmero de pixels que habr entre el borde de una celda y su
ING
contenido.
Especifica la anchura de la tabla. Puede estar tanto en pixels como en
WIDTH
porcentaje de la anchura total disponible para l (pondremos "100%" si
queremos que ocupe todo el ancho de la ventana del navegador).
ALIGN
Alinea la tabla a izquierda (LEFT), derecha (RIGHT) o centro (CENTER).
Si ahora, por ejemplo definimos ahora la tabla anterior como <TABLE BORDER=1
WIDTH="50%" ALIGN=CENTER> veremos lo siguiente:
1,1
1,2
1,3
2,1
2,2
2,3
Ahora que hemos definido la tabla nos toca hacer lo mismo con las filas. Cada fila se
define con una etiqueta TR, que tiene los siguientes atributos:
ALIG
N
VALI
GN
Posiblemente los dos ltimos parmetros no puedan quedar claros sin ejemplos. De
hecho, an entendiendo perfectamente su funcin es habitual que confundamos a uno
con otro. Pero bueno, vamos a ver una tabla de 3x3 con una celda que se une a una de la
derecha y otra que se une a otra de debajo:
<TABLE BORDER=1>
<TR>
<TD COLSPAN=2>1,1 y
1,2</TD>
<TD>1,3</TD>
</TR>
<TR>
<TD ROWSPAN=2>2,1 y
3,1</TD>
<TD>2,2</TD>
<TD>2,3</TD>
</TR>
<TR>
<TD>3,2</TD>
1,1 y 1,2
2,1 y 3,1
1,3
2,2 2,3
3,2 3,3
<TD>3,3</TD>
</TR>
</TABLE>
Como podemos ver, cuando declaramos un celda con ROWSPAN o COLSPAN, no
deberemos declarar las celdas "absorbidas" o la creacin de la tabla se nos complicar
de horrible manera.
Ttulo de la tabla
Por ltimo, vamos a ver como definir un ttulo a la tabla. Esto se hace por medio de la
etiqueta CAPTION. Para ver cmo funciona, vamos a incluirlo en la declaracin de la
tabla anterior:
<TABLE BORDER=1> Ejemplo de tablas
<CAPTION>
1,1 y 1,2
1,3
Ejemplo de tablas
</CAPTION>
2,2 2,3
2,1 y 3,1
...
3,2 3,3
</TABLE>
Esta etiqueta admite slo un parmetro: ALIGN, que es por defecto TOP. Si lo
definimos como BOTTOM el ttulo se colocar al final de la tabla en lugar del
comienzo.
Curso de HTML 4.0
Autor: Daniel Rodrguez Herrera
Marcos
o Etiqueta <FRAMESET>
o Etiqueta <FRAME>
o Acceso a otros marcos
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 pgina se dividir en la prctica en varias pginas independientes.
Para crearlos necesitaremos un documento HTML especfico, que llamaremos
documento de definicin de marcos. En l especificaremos el tamao y posicin de cada
marco y el documento HTML que contendr. Vamos a ver un ejemplo de este tipo de
documento:
<HTML>
<HEAD>
<TITLE>Mi primera pgina 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 slo podrs ver esta pgina
si tu navegador tiene la capacidad de visualizar
marcos.</P>
</NOFRAMES>
</FRAMESET>
</HTML>
Vamos a explicar detalladamente este ejemplo antes de investigar algo ms a fondo cada
una de las etiquetas. Vemos que la cabecera de la pgina 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 parmetro COLS o por ROWS. En ste, separado por comas, se define el nmero
de marcos y el tamao 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 ms raro) de que su navegador no soporte frames dentro de la etiqueta
<NOFRAMES>. Ahora veremos todos estos elementos en mayor detalle.
Etiqueta <FRAMESET>
Segn el estndar, esta etiqueta slo debera contener el nmero y tamao de cada
marco, pero las extensiones de Netscape y Explorer al estndar obligan a estudiar un par
de parmetros ms.
En general, los navegadores dibujan un borde de separacin 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 parmetro
FRAMEBORDER=0 en el <FRAMESET>.
Cuando eliminas ese borde, podrs ver cmo el navegador deja an un hueco entre
marcos. Este se elimina aadiendo los parmetros FRAMESPACING=0 BORDER=0.
Vamos a examinar por ltimo los parmetros COLS y ROWS. Deberemos asignarles
una lista de tamaos separada por comas. Se admiten los siguientes formatos de tamao:
Con porcentajes: Al igual que con las tablas, podemos definir el tamao de un
marco como un porcentaje del espacio total disponible.
Absolutos: Si ponemos un nmero a secas, el marco correspondiente tendr el
tamao 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
smbolo en varios marcos, que se repartirn el espacio equitativamente como
buenos hermanos. Si queremos que uno tenga ms deberemos ponerle al
asterisco un nmero delante. As, un marco con un espacio de 3* ser tres veces
ms grande que su compaero, que tiene un asterisco slo, el pobre.
Por ejemplo, el siguiente cdigo es una muestra de cmo combinar los tres mtodos:
<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 definicin de marcos;
debemos asegurarnos de tener al menos un marco con un tamao relativo si queremos
estar seguros del aspecto final de la pgina.
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 podris contemplar aqu.
Etiqueta <FRAME>
Esta etiqueta define tan slo las caractersticas de un marco determinado, no de un
conjunto de ellos. Estos son los parmetros que admite:
NAME
SRC
Hojas de estilo
Hasta ahora habamos definido estilos para una etiqueta determinada. Pero tambin
podemos hacerlo para una clase determinada. Esto que significa? Pues que si, por
ejemplo, definimos la hoja de estilo de la clase verde de la siguiente manera:
P.verde {color: green; margin-left: 30px;}
slo estarn verdes y con un margen izquierdo de 30 pixels aquellos prrafos definidos
con <P CLASS="verde">. As de sencillo.
Ampliando un poco ms las posibilidades de las clases, se pueden realizar excepciones.
Supongamos que tenemos unos prrafos que queremos que tengan unos mrgenes
determinados y color verde. Y deseamos que uno solo de esos prrafos, con los mismo
mrgenes, sea azul. Podramos definir dos clases distintas, pero hay un mtodo mejor:
usar el parmetro ID. Por ejemplo:
all.verde {color: green; margin-left: 10px;}
#ej1 { color: blue;}
Ahora todos los prrafos de clase verde seran, obviamente, verdes y con un margen de
10 pixels. Sin embargo el prrafo definido por <P CLASS="verde" ID="ej1"> ser azul:
Este prrafo es muy verde.
Y anda que este...
Sin embargo, este no, fjate que curioso.
Etiquetas <SPAN> y <DIV>
Puede que, a veces, no queramos modificar el comportamiento de un elemento sino que
creemos un estilo que queremos acte slo, un estilo completo creado de la nada. Una
etiqueta nueva y propia. Entonces, qu hacemos? Utilizar las etiqueta <SPAN> y
<DIV>.
El mtodo es simple. Definimos una clase rojo que simplemente modifique el color (que
ser rojo). Ahora, si queremos que una seccin de texto est en rojo lo encerraremos
entre las etiquetas <SPAN CLASS="rojo"> y </SPAN> o entre <DIV CLASS="rojo">
y </DIV>.
La diferencia entre ambas es que, mientras SPAN realmente no hace nada por s misma,
DIV convierte a todo lo que encierra en un bloque aparte (poniendo un salto de lnea
tanto al comienzo como al final). Veremos en el siguiente captulo que a las etiquetas
que se comportan como bloques (<P>, <H1>, las que dijimos modifican un prrafo
entero) se les pueden definir atributos propios desde las hojas de estilo. Por ejemplo, si
definimos las siguientes hojas:
all.titulo {
margin-top: -24px;
color: blue;
font-size: 20px;
}
all.sombra {
margin-top: 2px;
margin-left: 2px;
color: black;
font-size: 20px;
}
cuyos atributos explicaremos en la referencia de las hojas de estilo, y ponemos el
siguiente cdigo HTML:
<DIV ALIGN="CENTER" CLASS="sombra">El maravilloso curso de HTML</DIV>
<DIV ALIGN="CENTER" CLASS="titulo">El maravilloso curso de HTML</DIV>
obtendremos este bello efecto:
El maravilloso curso de HTML
El maravilloso curso de HTML
En el siguiente captulo tenis una gua de referencia con todos (o casi todos) los
atributos que se pueden modificar con CSS.
Curso de HTML 4.0
Autor: Daniel Rodrguez Herrera
Hojas de estilo: referencia
o Propiedades de bloque
o Propiedades de tipo de letra
o Propiedades de formato del texto
o Propiedades de color y fondo
o Propiedades de clasificacin
Descripcin
Posibles valores
Distancia mnima entre un bloque y tamao, porcentaje
los dems elementos. Tanto margin o auto. Por defecto
como margins() se utilizan para
es cero.
bottom left
padding-top, padding-right,
padding-bottom, paddingDistancia entre el borde y el
left,<br/> padding: top right
contenido de un bloque.
bottom left
border-top-width, border-rightwidth, border-bottom-width,
Anchura del borde de un bloque.
border-left-width,<br/> borderwidth: top right bottom left
border-style
border-color
width, height
float
clear
tamao, porcentaje
o auto. Por defecto
es cero.
numrico
none, solid o 3D,
por defecto
ninguno (none).
cualquier color
tamao, porcentaje
o auto, automtico
por defecto.
left, right o none,
por defecto
ninguna.
left, right, both o
none, por defecto
ninguno.
Descripcin
Posibles valores
Tipo de letra (que puede ser lista de tipos, ya sean genricos o no,
font-family
genrico) que vamos a usar. separados por comas.
xx-small, x-small, small, medium, large, xfont-size
Tamao del tipo de letra.
large, xx-large, tamao relativo o tamao
absoluto. Por defecto medium.
normal, bold, bolder, lighter o 100-900
Grosor del tipo de letra
font-weight
(donde 900 es la negrita ms gruesa). Por
(negrita).
defecto normal.
normal, italic, italic small-caps, oblique,
Estilo del tipo de letra
font-style
oblique small-caps o small-caps. Por defecto
(cursiva).
normal.
Cabe recordar que los tipos genricos son serif, sans-serif, cursive, fantasy y
monospace. Cada uno de estos tipos sern equivalentes a alguno que pueda tener
instalado el ordenador del usuario. As, por ejemplo, en un PC con Windows instalado
serif puede equivaler a Times New Roman y monospace a Courier.
Propiedades de formato del texto
Nuesto siguiente objetivo van a ser las propiedades de formato del texto que cualquier
procesador de textos nos permite cambiar.
Propiedad
Descripcin
line-height Interlineado.
textdecoration
vertical-align
texttransform
Transforma el texto a
maysculas o
minsculas.
text-align
text-indent
Posibles valores
nmero o porcentaje.
none, underline (subrayado), overline (como
subrayado, pero por encima), line-through
(tachado) o blink (parpadeante); por defecto
ninguno.
baseline (normal), sub (subndice), super
(superndice), top, text-top, middle, bottom, textbottom o un porcentaje. Por defecto baseline
capitalize (pone la primera letra en maysculas),
uppercase (convierte todo a maysculas),
lowecase (a minsculas) o none, por defecto no
hace nada.
left, right, center o justify
Descripcin
Decide si un elemento es interior
(como <I>), un bloque (<P>) o un
elemento de una lista (<LI>).
Estilo de un elemento de una lista,
pudiendo incluir un grfico al
Posibles valores
inline, block, list y none (que 'apaga'
el elemento)
disc, circle, square, decimal, lowerroman, upper-roman, lower-alpha,
Lenguajes de script
Un lenguaje de script es un pequeo lenguaje de programacin cuyo cdigo se inserta
dentro del documento HTML. Este cdigo se ejecuta en el navegador del usuario al
cargar la pgina, o cuando sucede algo especial como puede ser el pulsar sobre un
enlace.
Estos lenguajes permiten variar dinmicamente el contenido del documento, modificar
el comportamiento normal del navegador, validar formularios, realizar pequeos trucos
visuales, etc... Sin embargo, conviene recordar que se ejecutan en el navegador del
usuario y no en la mquina donde estn alojadas, por lo que no podrn realizar cosas
como manejar bases de datos. Esto hace que los contadores (por ejemplo) se deban
realizar de otra manera, utilizando programas CGI.
El primer lenguaje de script que vi la luz fue el JavaScript de Netscape. Nacido con la
versin 2.0 de este navegador y basado en la sintaxis de Java, su utilidad y el casi
absoluto monopolio que entonces ejerca Netscape en el mercado de navegadores
permitieron que se popularizara y extendiera su uso.
El mximo rival del Netscape Navigator, el Internet Explorer de Microsoft, comenz a
soportar este lenguaje en su versin 3.0. Fue tambin entonces cuando introdujo el
nico rival serio que el JavaScript ha tenido en el mercado de los lenguajes de script: el
VBScript. Basado en el lenguaje BASIC, no ha tenido excesiva difusin en Internet
debido a la previa implantacin del JavaScript y a que son de parecida funcionalidad,
pero s es utilizado dentro de Intranets basadas en el Explorer y dentro de otras
aplicaciones de Microsoft, como IIS, Access, Word, etc..
Javascript
Como este curso est orientado a Internet, no vamos a ver nada de VBScript aqu por las
razones comentadas anteriormente. Pero para ilustrar la utilidad de los lenguajes de
script, vamos a realizar una pequea introduccin al Javascript. Si te sientes interesado,
visita mi curso de JavaScript 1.2 para mayor informacin sobre el tema.
Vamos a realizar nuestro primer "programa" en JavaScript. Haremos surgir una ventana
que nos muestre el famoso mensaje "hola, mundo". As podremos ver los elementos
principales del lenguaje. El siguiente cdigo es una pgina Web completa con un botn
que, al pulsarlo, muestra el mensaje.
holamundo.html
<HTML>
<HEAD>
<SCRIPT LANGUAGE="JavaScript">
<!--function HolaMundo() {
alert("Hola, mundo!");
}
// --->
</SCRIPT>
</HEAD>
<BODY>
<FORM>
<INPUT TYPE="button" NAME="Boton" VALUE="Pulsame"
onClick="HolaMundo()">
</FORM>
</BODY>
</HTML>
Y aqu est nuestro ejemplo funcionando:
Ahora vamos a ver, paso por paso, que significa cada uno de los elementos extraos que
tiene la pgina anterior:
<SCRIPT LANGUAGE="JavaScript">
</SCRIPT>
Dentro de estos elementos ser donde se puedan poner funciones en JavaScript. Puedes
poner cuantos quieras a lo largo del documento y en el lugar que ms te guste. Si un
navegador no entiende la etiqueta <SCRIPT> escribir lo que hay entre medias de estos
elementos, as que lo encerramos entre comentarios por si las moscas.
function HolaMundo() {
alert("Hola, mundo!");
}
Esta es nuestra primera funcin en JavaScript. En el cdigo de la misma vemos una
llamada al mtodo alert (que pertenece al objeto window) que es la que se encarga de
mostrar el mensaje en pantalla. Por un fallo del Netscape no se pueden poner las
etiquetas HTML de caracteres especiales en una funcin: no los reconoce. As que
pondremos directamente "" arriesgndonos a que salga de otra manera en ordenadores
con un juego de caracteres distinto al del nuestro.
<FORM>
Capas
Las capas se pueden definir como pginas que se pueden incrustar dentro de otras. Los
atributos de una capa (posicin, visibilidad, etc.), como los de cualquier otro elemento
HTML, pueden definirse dentro de una hoja de estilo. Su contenido, en cambio, siempre
deber ser especificado dentro de la parte principal de la pgina. Como se puede ver, de
nuevo estamos siguiendo la filosofa de separar el contenido y la forma de representarlo.
En realidad, el nombre de capas no es nada oficial: es un invento de Netscape. La
denominacin oficial podra traducirse como "contenido HTML posicionable
dinmicamente". Toma ya. Tampoco se las puede considerar dentro de ningn estndar
HTML sino de los estndares CSS, pero son la base de lo que se ha dado en llamar
HTML dinmico.
Sin duda, lo ms importante de las capas es la posibilidad que presentan de ser movidas
y modificadas desde un lenguaje de script. Desgraciadamente, las implementaciones de
Netscape y Explorer son incompatibles entre s, por lo que resulta complicado escribir
cdigo que funcione en ambas plataformas.
Definicin
La nica manera comn de definir capas en Explorer y Netscape (versiones 4 y
superiores cuandos las haya) es mediante hojas de estilo en sintaxis CSS, por lo que ser
la que usemos de aqu en adelante.
La definicin de una capa sigue la misma estructura que la que usabamos para decidir
las caractersticas de una etiqueta con el parmetro ID:
<STYLE TYPE="text/css">
#micapa {position:absolute; top:100px; left:20px;}
</STYLE>
Esto colocara a la capa que hemos denominado micapa a 20 pixels de la izquierda de la
pgina y a 100 del comienzo de la misma. Muy bien, pero... donde escribimos lo que
queremos que contenga la capa? Utilizaremos para ello la etiqueta <SPAN>:
<DIV ID="micapa">
<H1>El ttulo de la capa</H1>
<P>Aqu es donde ira el texto.
...
</DIV>
Las capas que hemos definido hasta ahora se colocan en una posicin determinada de la
pgina. Pero existe otro tipo de capas llamadas flotantes cuya colocacin depende, en
cambio, de la posicin dentro del cdigo fuente de la pgina donde las hayamos
colocado. Se definen as:
<STYLE TYPE="text/css">
#flotante {position: relative; left: 20px; top: 100px;}
</STYLE>
Puedes ver un ejemplo que te mostrar las diferencias entre capas absolutas y relativas.
Propiedades
Existen varias propiedades de las capas que podemos modificar, como son la posicin,
la visibilidad, el orden en que se ponen en pantalla, etc... Son estos:
Propiedad
left y top
width y height
clip
Descripcin
Posibles valores
Sitan la esquina
superior izquierda de la
capa respecto a la
esquina superior
izquierda de la capa
distancia en pixels,
donde est metida. Hay por defecto cero.
que tener en cuenta que
el documento completo
tambin se considera una
capa.
Determinan la anchura y un tamao en
altura de la capa.
pixels.
Nos permite definir el
un rea.
rea que se podr ver
dentro de la capa. Por
ejemplo, clip:rect(20px
30px 40px 10px);
recortar la capa creando
z-index
visibility
background-image
background-color<imagenenlinea
direccion="graficos/explorer.gif"
descripcion="explorer"/> y layerbackground-color<imagenenlinea
direccion="graficos/netscape.gif"
descripcion="Netscape"/>
Color de fondo de la
capa.
Esto es todo.
Curso de HTML 4.0
Autor: Daniel Rodrguez Herrera
Sonido
o Sonido activado por el usuario
o Sonido de fondo
Sonido
un color.
An cuando les pueda parecer increble a algunos hombres de poca fe, es posible
escuchar sonidos (o msica) desde el propio navegador. Tanto Netscape como Explorer
incorporan desde hace tiempo la capacidad de reproducir sonido. El nico problema es
que los archivos suelen ser grandes y, siendo algo innecesario y superfluo, poca gente
incluye melodas en sus pginas.
Los formatos que se puede asegurar que los navegadores reproducirn son los archivos
WAV y MID. Para poder reproducir otros necesitarn el plug-in o aadido necesario,
como puede ser el Real Audio para los archivos RA o el ModPlug para los MOD y
derivados.
Sonido activado por el usuario
La manera ms sencilla de incluir sonidos es dejando al usuario la decisin de
escucharlos o no. Para hacerlo incluiremos el sonido en el parmetro HREF de un
enlace, como si fuera una pgina HTML:
<A HREF="hola.wav">Si pulsas te saludo<A>
Sonido de fondo
Lo del sonido de fondo ya es ms complicado, ya que Netscape y Explorer ofrecen
soluciones propietarias, distintas e incompatibles de hacer sonar un archivo de fondo.
En Explorer, desde la versin 2.0, se pueden incluir fondos sonoros utilizando la
etiqueta BGSOUND:
<BGSOUND SRC="musica.mid">
El parmetro SRC indicar el archivo a reproducir. Esta etiqueta admite tambien otro
parmetro, LOOP, que indica el nmero de veces consecutivas que sonar el fichero. Si
se indica LOOP="infinite", el archivo se reproducir indefinidamente, mientras estemos
en la pgina.
Netscape utiliza su etiqueta <EMBED>. Tericamente, esta etiqueta debera servir para
unir objetos de varios tipos a la pgina web, pero en la prctica slo se utiliza para esto.
Esta etiqueta tiene los siguiente parmetros:
Parmetro
Utilidad
SRC
Contiene el nombre de archivo de sonido a reproducir
WIDTH y
En Netscape aparece un pequeo reproductor, estos parmetros
HEIGHT
especifican su tamao.
AUTOSTART="tr
Arranca automticamente la reproduccin.
ue"
Reproduce ininterrumpidamente el fichero hasta que salimos de la
LOOP="true"
pgina.
HIDDEN="true" Oculta el reproductor.
Gua de estilo
A lo largo de mi deambular por Internet, he ido desarrollando pequeas manas y visto o
creido ver defectos en las pginas web. Sin embargo, despus de leer un par de cursos
de HTML y alguna que otra gua de estilo, me he dado cuenta de que la mayora de la
gente parece pensar como yo.
As pues, este captulo consiste en una serie de consejos que te pueden servir para hacer
tu pgina ms atractiva y de mayor calidad. Es recomendable leerla aunque luego no la
sigas al pie de la letra: te pueden dar una idea de lo que debe ser una web.
Contenido
Cualquier pgina ser visitada si su contenido es interesante. Casi da lo mismo su
estructura y diseo si la informacin es lo suficientemente interesante. As que quiz sea
conveniente detenernos un poco en qu es lo que debe tener nuestra pgina web.
En Internet uno visita lo que quiere, y la mayora de las veces lo que a la gente le
interesa y lo que a nosotros nos interesa que vean no es lo mismo. As pues, el mejor
modo de conseguir que vean lo que queremos es ofrecerles lo que quieren. Un ejemplo
lo tienes en mi pgina personal. En ella pongo cosas que me interesa poner a m pero
que de por s s que no tendran mucha difusin: mis relatos, mis canciones, etc... Pero
tambin incluyo estos cursos de diseo web, que s que le interesan a mucha gente.
De todas maneras no hay que engaarse: los contenidos que te interesa que la gente
conozca y que no sean "populares" no sern visitados ms que por una pequea parte de
los interesados por los contenidos "populares". Pero siempre lo sern ms que si no lo
hubiramos hecho.
El averiguar qu poner es fcil. Prcticamente todo el mundo tiene algn hobby, alguna
pasin, o domina algn tema bastante por encima de la media. Sobre ese tema deber
estar enfocada su pgina. Porque, para qu engaarnos: a nadie le interesan esas pginas
personales que slo contienen tres fotos del autor, una de su novia y otra de su perro,
junto con la historia de su vida y un curriculum y una serie de enlaces a pginas de sus
amigos.
Conviene tambin, sabiendo que el usuario ha acudido a tu pgina por el inters hacia
un tema especfico, facilitarle enlaces a pginas similares. Te lo agradecer.
Navegacin
Es muy importante que sea sencilla e intuitiva la navegacin por las pginas que
componen tu web. Dependiendo del tamao de la pgina no se debera tardar ms de
tres toques de ratn en ir de una pgina a otra. Sin embargo, esto no se debe conseguir
por medio de una saturacin de enlaces porque el usuario podra perderse.
Hay muchas maneras de conseguirlo. La primera es utilizar un marco como ndice, que
siempre nos permitira acudir a las seciones principales en nuestra web. Tambin resulta
til incluir enlaces a la pgina principal y a la pgina principal de la seccin que el
usuario est consultando.
En definitiva, no hay receta nica, pues el xito de tu sistema de navegacin depende en
buena medida de los contenidos y estructura de tu web. Resulta til ver a alguien ajeno
a su desarrollo navegar por ella sin darle ninguna clase de pistas: en general se pueden
ver con facilidad los mayores problemas que pueda tener.
Sin embargo, hay algo que siempre irrita al usuario: enlaces a pginas vacas o con un
grfico que seale que esa pgina est en construccin. Si te lleva tiempo desarrollar
una seccin pero quieres que los usuarios sepan que estar ah colocala con las dems
en la lista de enlaces, pero que ella no tenga. Que se vea el nombre aunque no lleve a
ninguna parte.
Estructura de las pginas
Es fundamental a la hora de ponerte a crear pginas el pensar en una estructura comn y
consistente, porque facilita la navegacin y le confiere personalidad propia. Esa
estructura puede estar dada por una manera comn de titular las secciones, un fondo, un
logo, una manera comn de colocar grficos y texto, o una combinacin de todo esto.
Hay que cuidar la longitud de las pginas: que no sean ni demasiado cortas ni
demasiado largas (como esta). La pgina debe contener informacin suficiente para
resultar interesante y no tanta como para desanimar al posible lector.
Recuerda que el ttulo que le pones a tu pgina es por lo que se la conocer por el
mundo. Es lo que guarda el navegador en su ndice de marcadores, favoritos o
bookmarks. Por ello, es conveniente que sea significativo y pueda ser entendido fuera
de contexto.
Conviene que el primero prrafo o las primeras frases de todas las pginas contengan un
resumen o idea del contenido del resto de la misma. Eso ayuda al usuario a localizar
ms fcilmente la informacin.
A su vez, resulta bastante til indicar la fecha de la ltima modificacin de la pgina,
aunque es an mejor si esa fecha hace referencia a la ltima modificacin del contenido,
que al fin y al cabo es lo que le interesa el usuario.
Por ltimo, uno de los aspectos ms importantes de Internet como medio es la facilidad
de comunicacin entre creadores y usuarios: facilitala incluyendo tu direccin de correo.
Si crees que puede ser interesante, ayuda y anima al usuario con formularios o libros de
visita.
Accesibilidad
Hay que tener en cuenta que, en general, no sabes con qu navegador visitarn tus
pginas. Ni cmo estar configurado. Ni la resolucin del monitor. Ni la potencia de su
CPU. Ni siquiera si el navegador es capaz de ver grficos. Y como se supone que la red
es algo de lo que debe poder disfrutar todo el mundo conviene hacerla accesible.
Para ello hay que tener en cuenta algunas cosas. Para empezar, que las pginas siempre
se ven distintas dependiendo del navegador que usemos. Conviene no usar elementos
que slo funcionen con un navegador, como puede ser el texto parpadeante o las
marquesinas. Y siempre ser bueno probar con ms de un navegador las pginas: no
siempre representan igual las mismas etiquetas.
Hay gente que viaja por la red con navegadores en modo texto o que, debido a la
lentitud de su conexin, configuran su navegador para que no cargue los grficos. Por
ello, conviene aadir siempre el parmetro ALT a todas nuestras imgenes. Tambin, y
por la misma causa, conviene dar una alternativa en texto de nuestros mapas.
Es aconsejable probar nuestras pginas a la resolucin mnima de 640x480 y comprobar
que se puede ver y navegar con relativa comodidad. Es desgraciadamente frecuente ver
marcos ndice diseados para verse a 800x600 y que impiden cambiarlos de tamao y se
han eliminado las barras de desplazamiento.
Es convieniente no abusar de los applets Java ni hacer de ellos un elemento
imprescindible en nuestra web. A gente con pocos recursos en potencia de CPU o
usuarios de Windows 3.1 no les resulta muy agradable estas aplicaciones.
En definitiva, no hacerles la vida imposible a los minusvlidos de la red. Eliminar
barreras arquitectnicas.
Diseo
Una pgina atractiva, con grficos bonitos y bien escogidos y colocados es algo siempre
recomendable. Pero no si, debido a ello, la pgina tarda dos das y medio en terminar de
cargarse. Hay que tener en cuenta que estamos trabajando en un medio llamado Internet
que, aunque denominado autopista de la informacin, en realidad suele parecerse ms
bien a una carretera comarcal. As pues, a la hora de disear nuestras pginas,
deberemos cuidar el equilibrio entre belleza grfica y tiempo de carga.
Recuerda que el grfico de fondo no debe dificultar la lectura del texto. Si utilizamos
uno oscuro que el color del texto sea claro y viceversa.
Los grficos animados, en general, resultan muy entretenidos para el autor pero poco
tiles para el usuario. No deberan usarse ms que para cosas sobre las que realmente
quieres llamar la atencin (como el uso del texto parpadeante). Si no es as, procura que
su tamao no sea excesivo.
Mientras puedas, evita los grficos meramente ornamentales. Que tengan algo de
utilidad, sea como ttulo o enlace o lo que sea. Luego procura que, adems, sean
bonitos.
Procura evitar el exceso de lneas horizontales: dan la sensacin de una pgina inconexa
y troceada.
Evita la proliferacin de marcos. Si pones muchos es posible que el usuario se pierda y
no sepa en cul est cada cosa. Recuerda que slo puede haber uno con informacin y
todos los dems deben ser auxiliares de este. El marco principal debe destacar sobre los
otros por su mayor tamao.
Mantenimiento y pruebas
Resulta conveniente que el cdigo sea claro y fcilmente comprensible: as evitas los
problemas de no entender cmo hiciste una pgina en un momento dado, o de no
encontrar esa parte que tienes que modificar entre tanto texto.
Resulta conveniente que otras personas prueben tus pginas. Y que cuando las prueben
ya estn en la red, aunque no sean accesibles ms que para los probadores. Hay que
cuidar que estos no conozcan previamente las pginas ni hayan tenido que ver con su
desarrollo.
Y esto es todo. Que ustedes disfruten creando pginas. Hasta otra!
Curso de HTML 4.0
Autor: Daniel Rodrguez Herrera
Enlaces a otras pginas
o Otros manuales de HTML
o Sobre JavaScript
o Sobre HTML dinmico
o Sobre otras tecnologas relacionadas
Sobre JavaScript
Una vez conocido el HTML, puede que te interese mejorar tus pginas con el lenguaje
de script ms extendido por Internet:
Java en castellano
El mejor tutorial de Java
El mundo de Duke, ndice y buscador de recursos Java
Gran directorio de informacin sobre CGI, con CGIs gratuitos incluidos
Interesante pgina pesonal de un gran creador de CGIs gratuitos
Borralo