Html doc. descargado (reparado)

w Mi primera página

El código
Lo mejor para aprender a hacer algo es ... ¡hacerlo!. Así que vamos a la primera página

mipagina.htm

<HTML>
<HEAD>
<TITLE>Mi primera pagina web </TITLE>
</HEAD>
<BODY>
<H1 align="center" >Mi Primera pagina web </H1>
<HR>
<P>Esto tan sencillo es una verdadera página web, aunque le falta el
contenido,

</BODY>
</HTML>

Si quieres ver como queda esto en el explorador solo tienes que pulsar aquí, y tranquilo que
se abrirá en otra ventana

La explicación
Si te fijas en la página que ves con el explorador solo se ve parte de lo que has escrito,
concretamente todo lo que no está encerrado entre los símbolos < y >. Eso es el contenido
de la página, pero ¿y lo que está entre esos paréntesis angulares? pues esas son las etiquetas
que le dicen al explorador como mostrar el contenido: en grande, con colores, centrado, el
título de la página, etc. Si te fijas cada etiqueta tiene un comienzo y un fin:

<ETIQUETA parámetros> ... </ETIQUETA>

Como ves una apertura y un cierre. Algunaas etiquetas (como <BR> cambio de línea o
<HR> linea horizontal) no llevan cierre. Fijaros que lo primero que tenemos es la etiqueta
<HTML> cerrda al final del documento con </HTML>, eso quiere decir que estamos ante
un HTML:

<HTML> ... </HTML>

Dentro de ese documento vemos una parte llamada cabecera, que la reconocerás porque
está limitada con la etiqueta <HEAD> </HEAD>. Él contenido de esta parte no siempre es
visible, y si lo es nunca se muestra en la página en si. Contiene por ejemplo el título que se
ve en la ventana del explorador, arriba a la izquierda. La cabecera queda por tanto :

<HEAD>
<TITLE>Mi página web</TITLE>
</HEAD>

Puede contener muchas otras cosas, pero eso lo dejamos para más adelante.

El cuerpo del documento

La otra parte es el cuerpo o <BODY> </BODY>, es el contenido de la página web. Tiene
una etiqueta con cierre:

<BODY> ... </BODY>

Y ahora el contenido:

<H1 align="center"> Mi primera página web</H1>

Con esto colocaremos el texto en formato <H1> (o cabecera 1) y centrado (align="center"),
o sea, en tamaño grande y centrado en la página, una forma de resaltar la frase. Ahora
separamos esa frase por medio de una línea horizontal:

<HR>

Como ves este es un ejemplo de etiqueta sin cierre. Y por último colocamos un texto
escplicativo en un párrafo (<P></P>), o sea, un bloque de texto con un espacio por delante
y otro por detrás :

<P>Esto tan sencillo es una verdadera página web, aunque
le falta el contenido, pero todo llegará.</P>

Para empezar no está mal, por supuesto existen muchas más etiquetas con misiones
diferentes a la de mostrar texto, pero eso lo iremos viendo poquito a poco.

Estructura del documento

La estructura de un documento HTML se puede resumir así:

tipo de documento
<HTML>
<HEAD>
<TITLE>titulo de la página</TITLE>
cosas que afectan a la página pero no a su contenido
</HEAD>
<BODY parámetros>
contenido de la página
</BODY>
</HTML>

En el tipo de documento deberemos especificar a que estándar del HTML responde nuestra
página entre una de las siguientes opciones:

<!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML 2.0//EN">
Cumple el estándar HTML 2.0
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2 Final//EN">
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"
"http://w3.org/TR/REC-html40/loose.dtd">
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"
"http://w3.org/TR/REC-html40/strict.dtd">
Cumple el estándar HTML 4.0 y no contiene además elementos desaconsejables
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Frameset//EN"
"http://w3.org/TR/REC-html40/frameset.dtd">
Es una definición de marcos que cumple el estándar HTML 4.0

El HTML 4.0 considera desaconsejables aquellos elementos que, aún siendo soportados,
han sido sustituidos por otros más potentes y, por ello, es posible que sean eliminados del
estándar HTML en el futuro.

arriba

La cabecera
Suele ser el lugar más indicado para colocar aquellos elementos de la página que no alteren
el contenido de la misma, aunque si la forma de presentarlo y su comportamiento. Es por
eso que es el lugar más recomendable para colocar los scripts y las hojas de estilo, como
veremos en los capítulos correspondientes.

Hay también otro elemento interesante que podremos incluir en nuestras cabeceras. Cuando
especificamos una URL relativa en un enlace, en principio es para acceder a una página
situada en nuestro mismo servidor. Sin embargo, si especificamos:

<BASE HREF="http://www.misitio.com/">

Ahora todas nuestras URLs relativas se encontrarán dentro del servidor
http://www.misitio.com

arriba

Meta Name

Además del título de la página, uno de los elementos que se pueden incluir aquí son los
META. Entre otras cosas, sirven para indicar propiedades de la página como pueda ser el
nombre de su autor. Por ejemplo,

<META NAME="GENERATOR" CONTENT="Mozilla/4.03 [es] (Win95; I) [Netscape]">

nos indicaría la herramienta con que hemos creado la página (en este caso la versión 4.03
en español para Windows 95 del Composer de Netscape). Como veréis el uso es muy

simple, en NAME colocamos el nombre de la etiqueta y en CONTENT colocamos su valor,
ambos entre comillas y con el signo igual por delante.
Estas son las propiedades más comunes:

Name Content
AUTHOR Autor de la página.
CLASSIFICATION
Palabras que permite clasificar la página dentro de un buscador
jerárquico (como Yahoo).
KEYWORDS
Palabras clave por las que encontrarán la página en los buscadores.
Google no le hace mucho caso.
GENERATOR Herramienta utilizada para hacer la página.

arriba
DESCRIPTION Descripción del contenido de la página. Google le hace algún caso.

Meta http-equiv

Son etiquetas usadas también para dar información al navegador y complementan las
etiquetas Meta vistas en el apartado anterior. En algunos casos existen etiquetas Meta Name
y http-equiv similares. Su uso es similar a las etiquetas Meta Name, por ejemplo:

<META HTTP-EQUIV="expires" CONTENT="Wed, 26 Feb 1997 08:21:57 GMT">

La única diferencia está en que en lugar de NAME usamos HTTP-EUIV, el resto es igual.
Cuando el contenido conste de más de varios valores, estos se separan con ; (punto y
coma). Veamos algunos tipos:

HTTP-EQUIV CONTENT
Expires Fecha desde la que la página debe ser recargada por los navegadores
pragma El contenido debe ser no-cache y sirve para que el navegador no
guarde la página en el ordenador del internauta.
Content-Language Idioma en el que está escrita la página. Se usan las iniciales como:
es_ES: español España, en_US: ingles americano...
Refresh Indica al navegador el tiempo (en segundos) que debe esperar para
recargar la página automáticamente y la página a la que debe ir. Ambos
datos se separan con un punto y coma.
Content-Type Tipo de documento y juego de caracteres usado. Lo habitual es colocar
el valor:
text/html; charset=iso-8859-1
Si n o se usa los caracteres especiales (letras acentuadas, ñ) pueden
quedar ilegibles .

arriba

El cuerpo
El cuerpo es el contenido de la página propiamente dicho, o sea, lo que se ve, en el es
donde colocarán prácticamente todos los elementos que vamos a ir viendo por este manual.
Los atributos que admite esta etiqueta <BODY>:

BACKGROUND Coloca una imagen como fondo de la página.
BGCOLOR Define el color de fondo de la página.
Cuando es igual a FIXED el gráfico definido como fondo de la
BGPROPERTIES página permanecerá inmóvil aunque utilicemos las barras de
desplazamiento.
TEXT Color del texto.
LINK Color de un enlace no visitado (por defecto azul).
VLINK Color de un enlace ya visitado (por defecto púrpura).
ALINK
Color que toma un enlace mientras lo estamos pulsando (por
defecto rojo).
LEFTMARGIN y Número de pixels que dejará de margen entre el borde de la
TOPMARGIN ventana y el contenido de la página.
MARGINWIDTH y
MARGINHEIGHT Equivalentes a los anteriores, pero éstos funcionan en Netscape.

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 estarán ya a su gusto.

Dando formato
Evidentemente en las páginas no todo el contenido es igual y por tanto no todo se ha de
mostrar en la misma forma, por eso HTML nos permite modificar el aspecto del texto:
podemos darle diferentes formatos, modificando desdel el aspecto de los caracteres (tipo de
letra) hasta el color. Podemos formatear desde las letras una por una hasta bloques
completos de texto.

arriba

Estilos de párrafo
Estos estilos o formatos actúan a nivel de párrafo
Etiqueta Significado Resultado

<P>
Sirve para delimitar un párrafo. Inserta Soy un párrafo: fíjate en
una línea en blanco antes del texto. los espacios de antes y de

después.
Alineación izquierda
Texto centrado
Justificar el texto del párrafo a la
Alineación derecha
<p ALIGN=x> ... izquierda (ALIGN=LEFT), derecha
</p> Texto justificado o sea,
(RIGHT), al centro (CENTER) o a ambos
alineado a ambos lados sin
márgenes (JUSTIFY html4 )
dejar, escalones en el
margen derecho.
<CENTER> ... Permite centrar todo el bloque de texto Alineación por defecto
</CENTER> encerrado. Texto centrado
Representa el texto encerrado en ella con
<PRE WIDTH=x> un tipo de letra de paso fijo. El parámetro Estoy en paso fijo
... </PRE> WIDTH especifica el número máximo de
caracteres en una línea.

arriba
Si quieres ver el texto
Mete sangrías de párrafo tanto a derecha indentado por ambos
<BLOCKQUOTE> ...
</BLOCKQUOTE> como a izquierda. Suele usarse como márgenes usa el
tabulador Blockquote.

Los encabezados
El HTML nos ofrece seis etiquetas distintas para mostrar cabeceras o títulos.

Etiqueta Resultado

<H1> ... </H1>
Cabecera de nivel 1
<H2> ... </H2> Cabecera de nivel 2

Actúan a nivel de párrafo, es decir, el texto encerrado en <h1></h1> lleva una linea
enblanco por delante y por detrás. Habitualmente se utilizan para destacar títulos de los
diferentes apartados o secciones de un texto.

arriba

Cambiando el tipo de letra

Todas estas etiquetas nos permiten cambiar de una manera u otra el aspecto del tipo de letra
que estemos utilizando y se pueden utilizar dentro de un párrafo.

Etiqueta Utilidad Resultado

<B> ... </B>
Soy un texto negro como el
Pone el texto en negrita.
tizón
<I> ... </I> Representa el texto en cursiva. Estoy ladeado

<U> ... </U>
Como soy muy importante
Para subrayar algo.
estoy subrayado
A mí, en cambio, nadie me
<S> ... </S> Para tachar.
quiere

<TT> ... </TT>
Permite representar el texto en un tipo No soy variable
de letra de paso fijo.
<SUP> ... </SUP> Letra superíndice. E=mc2
<SUB> ... </SUB> Letra subíndice. ai,j=bi,j+1
<BIG> ... </BIG>
Incrementa el tamaño del tipo de letra. Soy GRANDE

arriba
<SMALL> ...
Disminuye el tamaño del tipo de letra. Creí ver un lindo gatito
</SMALL>

Estilos de texto
Son formatos predefinidos aplicables a caracteres individuales (y a grupos por supuesto).
Realmente no se usan demasiado salvo que se controlen mediante los estilos CSS.

Etiqueta Significado Efectos
<CITE> ...
</CITE> Cita, por ejemplo de un texto Esta frase no es mía

<CODE> ...
Código int x=0;
</CODE>
<STRONG> ...
</STRONG> Fuerte, negrita. Hay cosas importantes.
<EM> ... </EM> Enfasis. Para poner énfasis

<KBD> ... </KBD>
El usuario debe teclear Multivac
Teclado
es el mejor.

<VAR> ... </VAR>
Representar variables de un La variable x, definida
código. anteriormente...
<SAMP> ... Para representar una serie de
</SAMP> Estoy en un literal
caracteres literalmente.
<ABBR> ...
Abreviaturas. La WWW usa el protocolo http
</ABBR>

Marcos
Denodados por unos y adorados por otros los marcos o frames son una forma de insertar
varias páginas web en una sola. Mal utilizados pueden arruinar la mejor página web, pues
no hemos de olvidar que la pantalla del monitor está físicamente limitada. Cada marco que
compone la página poseerá sus propios bordes y barras de scroll, comportándose como
ventanas independientes. Su situación en la página es rígida, no podemos colocarlos en las
posiciones que deseemos, si tenemos cuatro marcos se situarán en cada uno de los cuatro
cuadrantes de la pantalla. Si tenemos dos la pantalla se dividiré en dos filas o en dos
columnas para alojarlos. Pueden ser útiles para compartir un cierto contenido por todo el
sitio web, por ejemplo para una barra de navegación.

Su uso puede parecer algo compeljo pero es muy simple. Básicamente se trata de definir
una página contenedora de los marcos y de colocar en cada uno de ellos la página cuyo
contenido mostrarán. Por supuesto también concretaremos el tamaño y posición y otros
atributos de cada marco. Pueden existir navegadores que no puedan manejar los marcos,
por ello colocamos un texto alternativoa explicando la situación. Mira el siguietne código y
ve los resultados en este ejemplo.

<HTML>
<HEAD>
<TITLE>Los frames: páginas multiventana</TITLE>
</HEAD>
<FRAMESET COLS="20%,80%">
<FRAME NAME="indice" SRC="indice.htm">
<FRAME NAME="principal" SRC="principal.htm">
<NOFRAMES>

<P align="center">Al parecer tu navegador
no soporta marcos, actualízate.</P>
</NOFRAMES>
</FRAMESET>
</HTML>

Fíjate las diferencias y coincidencias con una página HTML habitual: en lugar de BODY
ahora tenemos una etiqueta FRAMESET. Cada una de estas FRAMESET son una página o
ventana dentro de la página contenedora que estará compuesta por varias zonas definidas
con los parámetro COLS o ROWS. En el ejemplo se trata de dos marcos uno junto al otro: uno
ocupa el 20% de la ventana del explorador y el otro el 80% restante.

Dentro del <FRAMESET> definimos los marcos que componen el conjunto y la acción
alternativa para navegadores que no soporten marcos. A cada uno de los marcos le
ponemos un nombre y especificamos qué página HTML se mostrará en él (etiqueta
<FRAME>). Sólo queda definir lo que verá el usuario en el supuesto de que su navegador no
soporte frames (etiqueta <NOFRAMES>).

arriba

Etiqueta FRAMESET

Los parámetros COLS y ROWS nos permiten controlar el tamaño de los marcos presentados en
la ventana del navegador. Existen tres formas de establecer estos tamaños:

Porcentajes: podemos definir el tamaño de un marco como un porcentaje del
espacio total disponible (el ancho o alto de la ventana del navegador)
Absolutos: Podemos especificar el ancho o alto del marco en pixels.
Calculado: Podemos colocar el ancho o alto de un marco y dejar que el tamaño del
otro lo calcule el navegador, usando apra ello un asterisco en lugar de un valor o
porcentaje. Por ejemplo si tenemos tres marcos y colocamos cols=" 10%, 30%, *",
el último ocupará el 60% (el espacio sobrante 100 - 10 -30). Si colcoamos el *
varios marcos se repartirán el espacio equitativamente, pero podemos también hacer
que un marco sea doble o triple de otro. Así, un marco con un espacio de 3* será
tres veces más grande que el que contenga un asterisco.

Se pueden combinar los tres métodos. Por ejemplo:

<FRAMESET COLS="10%,*,300,3*">

Supongamos que el ancho total de la ventana son 800 pixels. El primer marco ocupará el
10%, es decir, 84 pixels. El tercero necesita 300, en total tenemos 384 ocupados luego
quedan 800-384, 416 pixels libres. Los otros se repartirán este espacio en función de los
asteriscos: 416/4 = 104 pixels para el de un asterisco y 312 para el otro. En total tenemos
ocupados los 800 pixels. Lo más recomendable es dejar un marco con tamaño calculado, o
sea, con el asterisco para.

Y bueno si queremos que los marcos se distribuyan de una forma algo más irregular
podemos aprovechar la posibilidad de anidarlos, en otras paralbras: un marco puede
contener una página que a su vez ontenga otros marcos. Esto se hace poniendo otro
<FRAMESET> donde normalmente colocamos las etiquetas <FRAME> tal que así:

<FRAMESET COLS="20%,80%">
<FRAME NAME="indice" SRC="indice.htm">
<FRAMESET ROWS="*,80">
<FRAME NAME="principal" SRC="superior.htm">
<FRAME NAME="ejemplos" SRC="principal.htm">
</FRAMESET>
</FRAMESET>

El resultado del anidamiento lo podréis contemplar aquí.

Frameset tiene aún dos parámetros extras: frameborder y framespacing, el primero
permite eliminar los bordes que separan a todos los marcos, mientras que el segundo
permite controlar el ancho del espacio que separa los marcos

arriba

Etiqueta FRAME

Esta es la etiqueta que nos permite describir como debe ser cada marco Los parámetros que
soporta son:

NAME
Asigna un nombre a un marco, de esta manera luego podemos usarlo como
destino de un enlace.
SRC Indica la URL del documento HTML que ocupará el marco.
NORESIZE Evita que el usuario pueda cambiar el tamaño del marco.

FRAMEBORDER
Ssi lo igualamos a cero el borde de este marco desaparece (pero ojo si los
contiguos tienen borde éste se verá).
Coloca o no las barras de scroll. Su valor es por defecto AUTO, aparecerán si
SCROLLING son necesarias. Las otras opciones que tenemos son YES o colocarlas y NO,
no ponerlas.

MARGINWIDTH
Permite cambiar los márgenes horizontales dentro de un marco. Se
representa en pixels.

arriba
MARGINHEIGHT Igual al anterior pero con márgenes verticales.

Marcos flotantes <IFRAME>

Una excelente alternativa a los marcos fijos son los marcos flotantes, actualmente
soportados por todos los navegadores. La idea de este elemento ideado por Explorer, sigue
siendo la misma: incluir una página externa dentro de otra, pero en este caso el marco
puede quedar totalmente integrado en la página contenedora. Es como un include. La
descripción de este elemento es muy parecida a los frames: es necesario decir de donde
viene la página y como se ha de ver el marco (bordes, márgenes scroil...) Esto se hace
mediante los parámetros ya vistos:

NAME
Asigna un nombre a un marco, de esta manera luego podemos usarlo
como destino de un enlace.

ALIGN
Alineación del marco respecto al texto que lo rodea (botton, right,
left, middle)
SRC Indica la URL del documento HTML que ocupará el marco.
HEIGHT Altura del marco
WIDTH Anchura del marco
FRAMEBORDER Ssi lo igualamos a cero el borde de este marco desaparece
Coloca o no las barras de scroll. Su valor es por defecto AUTO,
SCROLLING aparecerán si son necesarias. Las otras opciones que tenemos son YES
o colocarlas y NO, no ponerlas.

MARGINWIDTH
Permite cambiar los márgenes horizontales dentro de un marco. Se
representa en pixels.
MARGINHEIGHT Igual al anterior pero con márgenes verticales.

arriba
allowtransparency
Si es true La página origen puede tener como color de fondo
transparent.

Acceso a otros marcos

Si leístes la sección dedicada a los enlaces recordarás que cuando pulsas un enlace en la
ventanda del navegador aparecerá otra página, pero podíamos colocar el atributo target
para hacer que la nueva página se abriera en otra ventana. Pues bien esta otra ventana puede
ser otro marco. Así en un marco puedo colocar un enalce que abra la página en otro marco
de la misma página.

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.Para
indicarle el marco que deseamos le asignaremos el nombre del mismo. Así, en los ejemplos

anteriores, si en el marco llamado indice 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 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.

Hojas de estilo
Las hojas de estilo intentan separar el contenido de un página de la forma de presentarlo en
pantalla. Esto lo hacen personificando los cambios que las etiquetas de formato HTML
realizan en nuestro texto. Por ejemplo, sabemos que usando <P> tendremos una párrafo
nuevo con una separación del anterior determinada, etc.. Con las hojas de estilo también
podremos decirle a un párrafo que todo su texto sea verde y que además va a tener un
margen izquierdo de 30 pixels. Por ejemplo.

El primer navegador en soportar hojas de estilo fue el Explorer 3.0. Utiliza la llamada
sintaxis en cascada. El Communicator acepta esa sintaxis e introduce una nueva basada en
JavaScript. Sin embargo, como el estándar más comunmente aceptado de sintaxis de hojas
de estilo es el de cascada, será este el único que veamos. Vamos a empezar con un ejemplo:

<STYLE TYPE="text/css">
P {color: green; margin-left: 30;}
</STYLE>

Vamos a detenernos en todos los elementos. Para empezar, la etiqueta HTML con la que
deberemos englobar las hojas de estilo será <STYLE>, que sólo podrá estar situada en la

cabecera de la página. Su parámetro TYPE indica la sintaxis que utilizaremos para
definirlas. En el caso de las hojas en cascada deberá ser text/css.

Ahora examinemos la hoja de estilo propiamente dicha. Indicaremos primero la etiqueta
que deseamos personalizar. Será <P>. Después, entre llaves, pondremos una lista de las
cosas que queremos modificar. En nuestro caso son dos, el color (en el formato habitual) y
el margen, que se define en pixels.

Hay que destacar que, aunque muchas veces los navegadores tengan una cierta manga
ancha, la sintaxis CSS (Cascading Style Sheet) es sensible a la diferencia entre mayásculas
y minúsculas. Conviene tener cuidado.

El HTML 4.0 permite declarar fuera de la página las hojas de estilo, llevando de este modo
al extremos su filosofía de separar forma y contenido. Si colocamos nuestras hojas de estilo
en un fichero llamado estilos.css (solo las hojas, no la etiqueta <STYLE>) no tendremos
más que incluir la siguiente línea en la cabecera de nuestro documento HTML para
incluirlas en nuestras páginas:

<LINK REL="stylesheet" HREF="estilos.css" TYPE="text/css">

Vamos a ver cómo quedaría un párrafo que siguiese la hoja de estilo anterior

Si la cosa va bien, este párrafo estará escrito en verde y con un margen izquierdo de 30
pixels. Precioso, ¿no? embargo, estoy convencido de que los más avispados se habrán
dado cuenta de que les estoy ocultando algo. Por lo que he dicho hasta ahora la
personalización de una etiqueta debería ser general y en esta página sólo este párrafo
está modificado. No os preocupéis demasiado, ahora os cuento como
se hace.
arriba

Clases

Hasta ahora habíamos definido estilos para una etiqueta determinada. Pero también
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;}

sólo estarán verdes y con un margen izquierdo de 30 pixels aquellos párrafos definidos con
<P CLASS="verde">. Así de sencillo.

Ampliando un poco más las posibilidades de las clases, se pueden realizar excepciones.
Supongamos que tenemos unos párrafos que queremos que tengan unos márgenes
determinados y color verde. Y deseamos que uno solo de esos párrafos, con los mismo
márgenes, sea azul. Podríamos definir dos clases distintas, pero hay un método mejor: usar
el parámetro ID. Por ejemplo:

all.verde {color: green; margin-left: 10px;}
#ej1 { color: blue;}

Ahora todos los párrafos de clase verde serían, obviamente, verdes y con un margen de 10
pixels. Sin embargo el párrafo definido por <P CLASS="verde" ID="ej1"> será azul:

Este párrafo es muy verde.

Y anda que este...

Sin embargo, este no, fíjate que curioso.

arriba

Bloques SPAN y DIV
Puede que, a veces, no queramos modificar el comportamiento de un elemento sino que
creemos un estilo que queremos actúe sólo, un estilo completo creado de la nada. Una
etiqueta nueva y propia. Entonces, ¿qué hacemos? Utilizar las etiqueta <SPAN> y <DIV>.

El método es simple. Definimos una clase rojo que simplemente modifique el color (que
será rojo). Ahora, si queremos que una sección 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 línea tanto al
comienzo como al final). Veremos en el siguiente capítulo que a las etiquetas que se
comportan como bloques (<P>, <H1>, las que dijimos modifican un párrafo 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
código 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 típico efecto sombra:

El maravilloso curso de HTML
El maravilloso curso de HTML
En el siguiente capítulo tenéis una guía de referencia con todos (o casi todos) los atributos
que se pueden modificar con CSS.

Estilos CSS
Los estilos CSS son una forma de separar el contenido de la página web de su formato. Es
decir por un lado nos preocupamos de dar contenido a la página y por otro de definir como
se deberá ver. Es una idea magnífica que nos permite, por ejemplo, cambiar el estilo de
diseño de todo un sitio web sin necesidad de reeditar todas sus páginas: solo
modificaríamos el archivo donde se desribe el formato de las páginas, como esquemas de
color, imágenes de fondo, etc. Pero no todo es perfecto: los navegadores Explorer y
Netscape no entienden los estilos exactamente igual por lo que es conveniente probar las
cosas en ambos para asegurarnos que todo se verá como nosotros
queremos. arriba

Propiedades de bloque

Cuando hablabamos del formato en las páginas HTML diferenciamos entre elementos de
bloque y elementos en linea, Los bloques eran elementos como el <p> (párrafo) o las <div>
(capas). Entonces de entrada veamos que propiedades se les puede aplicar a este tipo de
elementos:

Propiedad Significado Valores
Márgenes dntro del bloque.
margin-top, margin-right, Tanto margin como tamaño, porcentaje
margin-bottom, margin-left, margins() se utilizan para o auto. Por
margin: top right bottom left cambiar todos estos atributos a defecto es cero.
la vez.
padding-top, padding-right, tamaño, porcentaje
padding-bottom, padding- Distancia entre el borde y el
left,<br/> padding: top right o auto. Por
contenido del bloque.
bottom left defecto es cero.
border-top-width, border-
right-width, border-bottom- Anchura del borde de un
width, border-left-width,<br/> numérico
bloque.
border-width: top right bottom

left
none, ruged,
solid, 3D,... por
border-style Tipo de borde de un bloque.
defecto ninguno
(none).

border-color
Código o nombre
Color del borde de un bloque.
de color
tamaño, porcentaje
width, height Ancho y alto del bloque. o auto, automático
por defecto.
left, right o
float
Justificación del contenido de
none, por defecto
un bloque.
ninguna.

arriba
Permiso para que otro left, right, both
clear elemento se pueda colocar a su o none, por defecto
izquierda o derecha. ninguno.

Propiedades de tipo de letra

Ahora vamos a examinar las propiedades del tipo de letra que el usuario va a ver. Son las
siguientes:

Propiedad Descripción Posibles valores
font- Tipo de letra (que puede ser lista de tipos, ya sean genéricos o no, separados
family genérico) que vamos a usar. por comas.
xx-small, x-small, small, medium, large, x-
font-size Tamaño del tipo de letra. large, xx-large, tamaño relativo o tamaño
absoluto. Por defecto medium.
normal, bold, bolder, lighter o 100-900
font- Grosor del tipo de letra
weight (donde 900 es la negrita más gruesa). Por defecto
(negrita).
normal.
normal, italic, italic small-caps, oblique,
font- Estilo del tipo de letra
style oblique small-caps o small-caps. Por
(cursiva).
defecto normal.

Recordemos lo dicho al hablar del tipo de letras: no todos tus tipos tienen que estar en los
ordenadores de tus visitantes.

arriba

Propiedades de formato de texto

Nuesto siguiente objetivo van a ser las propiedades de formato del texto que cualquier
procesador de textos nos permite cambiar.

line-height Interlineado. número o porcentaje.
none, underline (subrayado), overline (como
text- Efectos variados sobre subrayado, pero por encima), line-through
decoration el texto. (tachado) o blink (parpadeante); por defecto
ninguno.
baseline (normal), sub (subíndice), super
vertical- Posición vertical del (superíndice), top, text-top, middle, bottom,
align texto. text-bottom o un porcentaje. Por defecto
baseline
capitalize (pone la primera letra en mayúsculas),
Transforma el texto a
text- uppercase (convierte todo a mayúsculas),
transform mayúsculas o
lowecase (a minúsculas) o none, por defecto no
minúsculas.
hace nada.
text-align Justificación del texto. left, right, center o justify

arriba
Tabulación con que
text-indent aparece la primera tamaño o porcentaje, por defecto cero.
línea del texto.

Propiedades de color y fondo

También es posible cambiar el color o la imagen de fondo de cualqueir elemento.

color Color del texto. un color (en el formato habitual).

background
Modifica tanto el gráfico el color dirección del fichero que contiene la
de fondo. imagen o un color.

Las direcciones URL (para la imagen de fondo por ejemplo) se expresan del siguiente
modo:

background: url(fondobonito.gif);
arriba

Otros

Decide si un elemento es interior
inline, block, list y none (que 'apaga'
display (como <I>), un bloque (<P>) o un
el elemento)
elemento de una lista (<LI>).
disc, circle, square, decimal,
Estilo de un elemento de una lista,
list- lower-roman, upper-roman, lower-
style pudiendo incluir un gráfico al
alpha, upper-alpha, none o la
comienzo del mismo.
dirección de un gráfico
Decide como se manejan los
white- espacios, si de manera normal o
space normal y pre
como sucede dentro de la etiqueta
<PRE>.

Y ahora... ya no hay más... ¡por fín acabamos! Dejadme que respire un poco y ahora
continuamos.

Los scripts
Un script es un programa insertado dentro del documento HTML y que es interpretado y
ejcutado por el navegador del usuario. Por tanto estos programas se ejecutan en el
ordenador del usuario bien sea directamente (al leer la página) o cuando se produce un
suceso o evento particular, como puede ser el pulsar sobre un enlace o mover el ratón o
cargar una imagen...

Estos scripts permiten crear páginas dinámicas, modificar el comportamiento normal del
navegador, validar formularios, realizar pequeños efectos visuales, etc... Sin embargo,
conviene recordar que se ejecutan en el navegador del usuario y no en la máquina donde
estén alojadas, por lo que no podrán realizar cosas como manejar bases de datos. Esto hace
que los contadores (por ejemplo) se deban realizar de otra manera, utilizando programas
CGI (escritos en lenguajes como Perl o PHP).

El primer lenguaje usado para crear scripts fue el JavaScript de Netscape. Nacido con la
versión 2.0 de este navegador y basado lejanamente en la sintaxis de Java, su utilidad y el

casi absoluto monopolio que entonces ejercía Netscape en el mercado de navegadores
permitieron que se popularizara y extendiera su uso.

Internet Explorer de Microsoft, comenzó a soportar este lenguaje en su versión 3.0, pero al
mismo tiempo introdujo otro lenguaje con las mismas funciones: el VBScript, una
derivación de BASIC. Pero este intento no llegó muy lejos, y el VBScript ha quedado para
otras aplicaciones de Microsoft, como Access o Word.

arriba

Javascript
Aunque este curso está enfocado a aprender HTML, vamos a detenernos un poco para
mostrar la utilidad de los lenguajes de script. Para ello vamos a realizar una pequeña
introducción al Javascript. Si te sientes interesado, visita Javascript Desde Cero donde
ecnontrarás bastante material para aprender este lenguaje.

Vamos a realizar nuestro primer "programa" en JavaScript. Haremos surgir una ventana
que nos muestre el tradicional mensaje "hola, mundo". Así podremos ver los elementos
principales del lenguaje. El siguiente código es una página Web completa con un botón
que, al pulsarlo, muestra el mensaje.

holamundo.html
<HTML>
<HEAD>
<SCRIPT LANGUAGE="JavaScript">

</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 extraños que
tiene la página 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 más 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 función en JavaScript. En el código de la misma vemos una llamada
al método 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 función: no los reconoce. Así que pondremos directamente "¡"
arriesgándonos a que salga de otra manera en ordenadores con un juego de caracteres
distinto al del nuestro.

<FORM>
<INPUT TYPE="button" NAME="Boton" VALUE="Pulsame"
onClick="HolaMundo()">
</FORM>

Dentro del elemento que usamos para mostrar un botón vemos una cosa nueva: onClick.
Es un evento. Cuando el usuario pulsa el botón, el evento onClick se dispara y ejecuta el
código que tenga entre comillas, en este caso la llamada a la función HolaMundo(), que
tendremos que haber definido con anterioridad.

Este ejemplo muestra una pequeña parte de las funcionalidades del JavaScript. De hecho,
su utilidad es más bien escasa, por eso te recomiendo de nuevo que eches un vistazo a
Javascript Desde Cero.

Capas
Las capas son bloques con contenido HTML que ppueden posicionarse de manera dinámica
y organizables en 3D. Realmente tienen sentido dentro de los estilos CSS, de hecho sus
ventajas solo se pueden aprovechar al cien por cien utilizando estilos CSS. Es la mejor
ilustración de lo que significa separar contenido de presentación.

En realidad, el nombre de capas proviene de Netscape, que estos elementos los
implementaba como <layers>, en castellano capas. Las versiones modernas de Netscape (de
la 6 en adelante) ya no usan esta etiqueta si no que se han decantado por la más standard
<div>

No obstante la manipulación de estos elementos por parte de Micorsoft y Netscape son
diferentes, ambos usan algunas extensiones propias, auqnue ambos admiten los standares
de la W3C con lo que el uso de estos elementos es bastante universalizable.

arriba

Definición
En realidad las capas no se difinen completamente mediante el lenguaje HTML, sino
necesitan del lenguaje de definición de estilos CSS. Entre ambos podemos colocar en
nuestras páginas estos elementos movibles, ocultables y en general manipulables de forma
dinámica. Por ejemplo:

.la_capa {position:absolute; top:100px; left:20px; width:300; heigth:
200}
</STYLE>

Con esto hemos definido un tipo de capa, denominda la_capa, cuya altura es de 200 px y
anchura 300 px. Además está situada a 100 px de la parte superior y a 20 px del margen
izquierdo de la página. Repito que hemos definido una clase capa, pero no hemos contruido
la capa. Para construirla usamos la etiqueta <DIV> y el atributo ID

<DIV ID="micapa">
<H1>Esto es contenido</H1>
<P>Aquí sigue más contenido HTML </p>
...
</DIV>

Cualquier bloque <DIV> con ID="mi_capa" estará en esa posición y con ese tamaño.

Esta capa puede colocarse en cualquier parte de la ventana, su posición es absoluta
(absolute). Pero también podemos definir capas de posicionamiento relativo, es decir, que
más que definir las coordenadas de suposición respecto a la ventana, describimos su
posición respecto al lugar donde aparezca en el texto. En otras palabras: describimos
desplazamiento de la capa respecto de donde la ponemos. Se definen así:

.relativa {position: relative; left: 20px; top: 100px;}
</STYLE>

Este ejemplo te muestra dos capas, una absoluta y otra relativa, esta última está construida
con una etiqueta <span>, para evitar el salto de línea propio de los bloques.

arriba

Propiedades

Existen varias propiedades de las capas que podemos modificar, como son la posición, la
visibilidad, el orden en que se ponen en pantalla, etc... Son estos:

Propiedad Significado Valores

Sitúan la esquina
superior izquierda de la
capa respecto a la
esquina superior
distancia en
left y top
izquierda de la capa
pixels, por
donde esté metida. Hay
defecto cero.
que tener en cuenta que
el documento completo
también se considera una
capa.

width y height
Determinan la anchura y un tamaño en
altura de la capa. pixels.
Nos permite definir el
área que se podrá ver
dentro de la capa. Por
ejemplo,
clip:rect(20px 30px
40px 10px); recortará
la capa creando un
Clip cuadro visible cuya un área.
esquina superior
izquierda está a 10 pixels
por la izquierda y 20 por
arriba de la de la capa y
cuyo tamaño sería de 30-
10 de ancho y 40-20 de
alto.
Las capas con un mayor
z-index se colocarán número positivo,
más arriba (se dibujarán por defecto las
z-index
al final, encima de las capas definidas
otras). Debe ser un valor en el código
positivo y único: dos HTML más tarde
capas no pueden tener el están más arriba.
mismo z-index.
visible, hidden
(oculta) o
inherit (hereda
la visibilidad de
visibility
Especifican si la capa la capa padre).
debe verse o estar oculta. En aquellas
capas que
simplemente
estén dentro de la
página principal,

este valor es
equivalente a
visible.

background-image
Gráfico de fondo de la
una dirección.
capa.
background-color<imagenenlinea
direccion="graficos/explorer.gif"
descripcion="explorer"/> y layer- Color de fondo de la
background-color<imagenenlinea un color.
capa.
direccion="graficos/netscape.gif"
descripcion="Netscape"/>

Esta página me suena

Siempre hemos oido que las páginas web y que internet se aprovecha de la tecnología
multimedia, que si puedes oir música y ver vídeos. Pues bien el elnguaje HTML, repetimos,
es un lenguaje par definir documentos de hipertexto y soporta por tanto elementos
multimedia como puede ser sonido. Los navegadores mayoritarios son capaces de ejecutar
piezas musicales desde una página web, algo de lo que algunos webmaster abusan
despiadadamente. Hasta hace no mucho tiempo el colcoar una pieza de música en una
página se pagaba con tiempos de carga muy elevados (el navegador no solo tenía que subir
la página con sus imágnes y texto, sino también el archivo de sonido). Pero actualmente la
extensión de las redes de alta velocidad ha casi eliminado este problema. Aunque si decides
colocar música en tu página piensa en que el visitante quizás no quiera oir música o prefiera
escuchar la radio o sus propios CD,s, por tanto dale siempre la oportunidad de hacer callar a
la página.

Los formatos de sonido que serán reproducidos por cualquier navegador son los WAV y
MID. Aunque otros formatos también serán reproducidos previa carga del correspoindiente
plugin, como Real Audio o Quicktime.

arriba

Sonido manual
Una forma muy simple de ejecutar un sonido es mediante un enlace que llame alk archivo
de sonido, el sistema operativo llamará a la aplicación asociada y ese sonido se escuchará.
Pero se lanzará la aplicación asociada. Por ejemplo:

<A HREF="ringin.wav">¿El teléfono?<A>

No está mal, al menos el asunto suena. Pero claro con una aplicación asociada de por
medio.

arriba

Sonido de fondo
Pero hay otra manera: el sonido de fondo, un sonido que suena al cargar la página. El
navegador de Microsoft, desde la versión 2.0, utilizaba la etiquea BGSOUND:

<BGSOUND SRC="musica.mid">

Su parámetro SRC indicará el archivo a reproducir. También podemos permitir que se
repita un cierto número de veces mediante el parámetro. Si se indica LOOP="infinite", el
archivo se reproducirá indefinidamente, mientras estemos en la página. Para detener la
música o cambiar de melodia debíamos hacer uso de Javascript.

Los exploradores actuales usan la etiqueta <EMBED>, que tiene los siguiente parámetros:

Parámetro Utilidad
SRC Contiene el nombre de archivo de sonido a reproducir
WIDTH y HEIGHT Tamaño de los controles del reproductor que aparece en la página.
AUTOSTART="true" Arranca automáticamente la reproducción.

LOOP="true"
Reproduce ininterrumpidamente el fichero hasta que salimos de la
página.
HIDDEN="true" Oculta el reproductor.

Pero el problema del plugin vuelve a aparecer también con este método, puede ocurrir que
el ordenador cliente lance su aplicación para hacer sonar el fichero cargado. ¿Y como suena
esto? pues este ejemplo os lo muestra.

Trucos HTML
Aquí pretendemos ofrecerte soluciones para problemas que suelen presentarse a la hora de
crear una página web. Conocer todas las etiquetas del lenguaje HTML no siempre garantiza
un uso óptimo. Esta es la razón de este apartado.
arriba

Flash al fondo de la página
Los objetos flash en las páginas web se empeñan en colocarse en primer plano con lo que
ocultan menús desplegables y otros elementos de la página. Para evitar esto basta con
añadir al objeto flash el argumento:
<param name="WMODE" value="TRANSPARENT">
El objeto flash no ocultará los elementos dinámicos.
arriba

Esconder tu email

Existen robots que se dedican a recorrer las páginas web extrayendo las direcciones de
correo, a las que luego inundarán con mensajes spam.

Existe un truco muy sencillo para evitar esto sin dejar de mostrar nuestra dirección en la
página: crear una imagen gif o jpg con nuestra dirección email. Quien desee enviarnos un
email deberá leer nuestra dirección y escribirla a mano en el mensaje creado con su
programa de correo.

arriba

Celda como enlace

Una celda de una tabla puede convertirse en un enlace activo de la manera más simple,
basta con colocarla dentro de <a href> </a>. Ejemplo

<table><tr><a href="sitio"><td>enlace</td></a>
<td>otra celda</td>
Así de fácil, ahora la celda completa es un enlace.
arriba

Dimensiones exactas

Para lograr que una fila o una columda tenga una altura o anchura exacta, o para separar
dos elementos una distancia fija, utiliza una imagen gif transparente de un sólo pixel. Luego
asignale la anchura o altura que desees. Por ejemplo

<table><tr><td><img src="punto.gif" height="5"></td></tr>

Esa celda poseerá una altura exacta de 5 pixels.

arriba

Caja de esquinas curvas

Puedes crear una caja de esquinas curvas usando el elemento fieldset de los formularios.
Ejemplo

<fieldset>
contenido de la caja con esquinas curvas sin tablas!!!
</fieldset>

Y no es necesario usar tablas.

arriba

Sonido de fondo

Se puede hacer que suene una música mientras los visitantes visitan la Web, o bien colocar
una melodía a modo de presentación. Guarda el sonido en el directorio raíz de tu servidor.
el código HTML es el que sigue:

<BGSOUND SRC="sonido.mid" LOOP=none>
<WIDTH=200 HEIGHT=55 AUTOSTART="true" LOOP="false" HIDDEN="true">

Los sonidos en formato "midi" ocupan menos espacio y por tanto se cargan
antes.
arriba

Archivos para descargar

Si queremos que los visitantes puedan descargar algún archivo solo debemos subir ese
archivo a nuestro servidor e insertar en nuestra Web un enlace al mismo:

<a href="archivo.exe">Descripción del enlace </a>

Ahora cuando el visitante pulse sobre ese enlace el navegador abre el diálogo de abrir o
guardar el archivo. Lo habitual es usar arvhivos comprimidos en formato zip, de esta
manera la descarga es más rápida y se puede bajar cualquier tipo de archivo (previamente
comprimido).

Html doc. descargado (reparado)

Más contenido relacionado

La actualidad más candente

Destacado

Similar a Html doc. descargado (reparado)

Html doc. descargado (reparado)