Inic HTML y Css PDF

“INICIAR EN EL MUNDO DE LAS PAGINAS WEB.
HTML, CSS”
Esta información no es de la autoritaria de @TUPAGINAWEB

Esta información fue sacada de www.creatuweb.com y www.espacionlatino.com
Introducción
En este curso pretendemos tan solo que llegues a ser capaz de construir páginas web correctas,
válidas para cualquier explorador, tanto los de la familia de Netscape como los diferentes Explorer
de Microsoft y otros. La idea es por tanto que estas páginas te sirvan como una guía práctica en tu
labor de crear buenas páginas web.
Quizás pienses que con los editores gráficos está todo hecho y no es necesario conocer el HTML.
En parte llevas razón, si no pretendes pasar del nivel de principiante y tan solo quieres crear
páginas impersonales para ti y tus amigos pues no necesitas conocer HTML. Pero si lo que quieres
es llegar a crear y publicar verdaderos sitios web de aspecto profesional y digno de estar en la red,
entonces lo mejor es que conozcas a fondo el lenguaje con el que se construyen esos sitios.
¿Qué es una página web?
Pues eso de entrada podemos preguntarnos qué es una página web. Habrían dos respuestas: para
el internauta y para el diseñador.
Para el internauta una página WEB es una pantalla en su monitor que le muestra la información
que va buscando y enlaces a otros sitios relacionados.
Para el diseñador una página WEB es un documento construido para mostrar información en la
pantalla de un monitor, que contiene además de la información una serie de instrucciones para
indicar como se ha de mostrar esa información. Estas instrucciones se escriben siguiendo un
lenguaje llamado HTML
Como ves el diseñador define la página web como algo más completo y técnico que el simple
internauta. La página web se concreta en un documento con un nombre terminado con la
extensión .htm o .html.
Una serie de páginas web interconectas e interrelacionadas de alguna forma (el mismo tema, el
mismo objetivo...) forman un sitio web, que habitualmente está almacenado en un servidor.
Requisitos
Para seguir el curso los requisitos son mínimos: un ordenador, un navegador y un editor de texto
simple es suficiente. Pero te recomendaría, además, instalar un servidor de internet en tu
ordenador. No te asustes, no es nada del otro mundo. Tanto si usas Windows como si te mueves
en el mundo Linux te recomiendo el servidor Apache (si piensas trabajar con PHP te recomiendo la
versión 1.xx, la 2 sigue siendo desaconsejable), es muy simple de instalar y de configurar. Con este
servidor corriendo en tu equipo tendrás un sitio llamado localhost al que podrás acceder como si
se tratara de un servidor de internet: http://localhost/, pero solo es visible en tu ordenador.
En cuanto al editor de páginas web utiliza un editor tipo texto, o uno gráfico, pero trabajando en
modo texto. Recuerda que la idea es conocer el lenguaje HTML, y los editores gráficos esconden el
código. Mira estas herramientas que te pueden ser útiles, recuerda que de gratis también hay
cosas buenas.
En cuanto al navegador lo mejor es tener uno de cada, de esa manera podrás comprobar que todo
lo que hagas funciona en ambos modelos, aunque hoy por hoy el rey es el Explorer de Microsoft.
El HTML
Antes de entrar de lleno en materia un poquito de historia, nunca viene mal conocer el material
de trabajo a fondo. El HTML o lenguaje de marcas de hipertexto es un derivado de un lenguaje
usado para describir documentos, el SGML. ¿Y esto que significa? Pues muy sencillo: la estructura
de las páginas web se describe en la propia página mediante una serie de etiquetas que le dicen al
navegador como debe mostrar el documento, o sea, la página web: cuando debe cambiar de
párrafo, cuando debe mostrar el texto en negrita o en color, cuando mostrar una imagen, cuando
un enlace a otro documento, etc. Y esto se lo dice al navegador mediante unas marcas o etiquetas
en el documento. El HTML es el lenguaje que explica qué etiquetas se pueden usar en una página
y como se usan.
Como ves todo va mezclado: información y formato, algo que ha comenzado a cambiar con la
aparición de los estilos CSS, un interesante intento de separar la información del formato de
presentación.
Los inicios: HTML 2.0
Cuando internet salió del ámbito universitario y se convirtió en una herramienta de dominio
público la versión de HTML existente era la 2.0, algo limitada pero que cualquier navegador va a
ser capaz de interpretar.
HTML 3.0 y 3.2
A medida que la red se extendía, los documentos que circulaban por ella se hicieron más
complejos y completos, la versión 2.0 pronto se mostró demasiado limitada para cumplir con su
cometido: mostrar las páginas web en los terminales de los usuarios. Así que los exploradores
comenzaron a incluir etiquetas extras no contempladas en el estándar. Por entonces
el IETF (Internet Enginierign Task Force) era el encargado de normalizar todo lo relativo a la recién
nacida red de redes y elaboró la versión 3.0, versión que pretendía incorporar las nuevas
etiquetas y las que estuvieran por llegar.
Este standard no terminó de cumplir lo esperado, además en esas fechas la sección de

estandarización de HTML de este comité cerraba sus puertas, por lo que un grupo de empresas,
entre las que estaban Netscape, Microsoft, IBM y Sun, crearon un nuevo comité para estandarizar
internet, era el W3C, organismo que aún hoy dicta los estándares no solo para HTML, sino
también para las hojas de estilo CSS y otras herramientas de la red. Su primer trabajo consistió en
mejorar la versión 3.0 de HTML, lo que llevó al HTML 3.2, que incluía muchas de las nuevas
etiquetas que los principales navegadores de la época, osea, Netscape y Explorer, ya estaban
utilizando.
HTML 4.0
El HTML 3.2 era una solución temporal que se aprobó en enero de 1997, momento en el que
el W3C comenzaba a elaborar un nuevo estándar con reformas profundas, era la versión 4.0. En
julio de 1997 se presenta el borrador de este nuevo estándar que unifica el manejo de los marcos
(frames e iframes), las hojas de estilo y los scripts. El 17 de diciembre de 1997 dicho borrador
corregido fue finalmente aprobado como HTML 4.01, y es el que aún hoy día viene usándose para
la creación de las páginas web.
Versiones para este manual
En principio cualquier navegador debería ser capaz de interpretar el HTML 3.2, pero si en algún
caso es necesario señalar que algún elemento es solo soportado por una determinada versión o
navegador usaremos los símbolos que veis en esta tablita:
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,
pero todo llegará.</P>
</BODY>
</HTML>
Si quieres ver cómo 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. Algunas etiquetas (como <BR> cambio de línea o <HR> línea
horizontal) no llevan cierre. Fijaros que lo primero que tenemos es la etiqueta <HTML> cerrada 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>. El 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 explicativo
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 qué 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, aun 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.
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
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.
Descripción 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 .
El cuerpo
El cuerpo es el contenido de la página propiamente dicho, o sea, lo que se ve, en él 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 página permanecerá inmóvil aunque utilicemos las
BGPROPERTIES
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 TOPMARGIN Número de pixeles que dejará de margen entre el borde de la ventana y el contenido de la página.
MARGINWIDTH y
Equivalentes a los anteriores, pero éstos funcionan en Netscape.
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 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 desde el aspecto de los caracteres (tipo de letra) hasta el color.
Podemos formatear desde las letras una por una hasta bloques completos de texto.
Estilos de párrafo
Estos estilos o formatos actúan a nivel de párrafo

Etiqueta Significado Resultado
Soy un párrafo: fíjate en los espacios de antes
<P> Sirve para delimitar un párrafo. Inserta una línea en blanco antes del texto.
y de después.
Alineación izquierda
Justificar el texto del párrafo a la izquierda (ALIGN=LEFT), derecha Texto centrado
<p ALIGN=x> ... </p> (RIGHT), al centro (CENTER) o a ambos márgenes (JUSTIFY html4 Alineación derecha
) Texto justificado o sea, alineado a ambos lados
sin dejar, escalones en el margen derecho.
<CENTER> ... Alineación por defecto
Permite centrar todo el bloque de texto encerrado.
</CENTER> Texto centrado
<PRE WIDTH=x> ... Representa el texto encerrado en ella con un tipo de letra de paso fijo. El
parámetro WIDTH especifica el número máximo de caracteres en una Estoy en paso fijo
</PRE> línea.
<BLOCKQUOTE> ... Mete sangrías de párrafo tanto a derecha como a izquierda. Suele usarse Si quieres ver el texto inventado por ambos
</BLOCKQUOTE> como tabulador márgenes usa el Blockquote.
Los encabezados
El HTML nos ofrece seis etiquetas distintas para mostrar cabeceras o títulos.
Etiqueta Resultado
<H1> ... </H1> Cabecera de nivel 1
Actúan a nivel de párrafo, es decir, el texto encerrado en <h1></h1> lleva una línea en blanco por
delante y por detrás. Habitualmente se utilizan para destacar títulos de los diferentes apartados o
secciones de un texto.
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> Pone el texto en negrita. Soy un texto negro como el tizón
<I> ... </I> Representa el texto en cursiva. Estoy ladeado
<U> ... </U> Para subrayar algo. Como soy muy importante estoy subrayado
Para tachar. A mí, en cambio, nadie me quiere

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

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

<SMALL> ... </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> ... </CODE> Código int x=0;
<STRONG> ... </STRONG> Fuerte, negrita. Hay cosas importantes.
<EM> ... </EM> Enfasis. Para poner énfasis
<KBD> ... </KBD> Teclado El usuario debe teclear Multivac es el mejor.
<VAR> ... </VAR> Representar variables de un código. La variable x, definida anteriormente...
<SAMP> ... </SAMP> Para representar una serie de caracteres literalmente. Estoy en un literal
Abreviaturas. La WWW usa el protocolo http

<ABBR> ... </ABBR>
Otros elementos
Estas etiquetas realmente no son formato ni de párrafo ni de texto, pero hay que ponerlas en
algún sitio:
Etiqueta Significado Resultado

<BR> Cambio de línea. Simple salto de línea
<HR> Barra horizontal.
 Comentarios. No se ve el contenido
Formateo de caracteres
Cuando hablamos del formato en un tema anterior te adelantábamos que podrías dar formato al
texto a nivel de carácter, y que la cosa no se iba a quedar solo en poner subrayados o negritas y
cursivas. HTML nos permite un gran control sobre el formato del texto mediante la
etiqueta <FONT>.
El color
Podemos cambiar el color de cualquier carácter mediante el uso del parámetro COLOR. La manera
de especificarle el color es común a todas las etiquetas HTML: o bien indicando el nombre, si es
un color normal, o bien especificando los componentes de rojo, verde y azul (código RGB) del
mismo. Los colores reconocidos son los siguientes:
Black Silver Gray White Maroon Red Purple Fuchsia

Green Lime Olive Yellow Navy Blue Teal Aqua
<FONT color="blue">Soy azul como el mar</FONT>
El modo de indicar el color RGB es el mediante los componentes RGB para lo que se usa un código
de seis dígitos hexadecimales: 00 a FF. Por ejemplo:
<FONT COLOR="#FF0000">Código para rojo es #FF0000D</FONT>
Código para rojo es #FF0000

<FONT COLOR="#00FF00">Código para verde es #00FF00</FONT>
Código para verde es #00FF00

<FONT COLOR="#0000FF">Código para Azul es #0000FF</FONT>
Código para azul es #0000FF
<FONT COLOR="#0000FF">Y ahora mezclemos colores con #10A2FF</FONT>
Y ahora mezclemos colores con #10A2FF
Tamaño del texto
El parámetro utilizado para indicar el tamaño es SIZE. Puede utilizarse para indicar tamaños
absolutos:
SIZE=1 SIZE=2 SIZE=3 SIZE=4
SIZE=5 SIZE=6
SIZE=7
El tamaño por defecto es 3. También se puede utilizar los modificadores + y - para indicar un
incremento (o decremento) relativo del tamaño del tipo de letra. Así, por ejemplo, si indicamos
que queremos un tamaño de -2 estaremos pidiendo al navegador que nos muestre el tipo de letra
dos veces más pequeño.
<FONT SIZE=2><font size="2">Tamaño 2</font><FONT SIZE="+3">
<font size="2"><font size="+3">Tamaño 6</font></font></FONT></FONT>
Tipo de letra
Por último, podemos especificar el nombre del tipo de letra que queremos utilizar gracias al
parámetro FACE. Pero ojo esto no es realmente muy utilizable. El navegador usará el tipo de letra
indicado en este atributo si tiene esa fuente instalada. Si sales de la Times New Roman, Arial,
Helvética, Verdana o Courier corres el riesgo de que el usuario no llegue a ver la página como tú la
has diseñado, sino de una manera que puede llegar a ser desastrosa para el diseño. Si el
navegador no encuentra ninguno de las fuentes indicada en este parámetro utilizará la fuente por
defecto:
<FONT FACE="Helvetica,Arial,Times">
<font face="Helvetica,Arial,Times">
No sé como voy a salir exactamente</font></FONT>
Caracteres especiales
Si habéis estudiado o leído algo acerca del modo de funcionamiento de los ordenadores y la
informática, casi seguro que sabéis que la información que introduces en el ordenador está
codificadas decir, escrita de alguna manera que sea entendible para la máquina. En relación con
esto habréis topado con unas siglas algo extrañas código ASCII, que no es más que una forma de
codificar los caracteres asignando a cada uno un valor numérico. Sin entrar en más detalles
resulta que el código ASCII solo tiene 128 símbolos, pero existe una extensión del código que llega
a los 256 símbolos, aunque sólo están normalizados los 128 primeros, los restantes se usan para
caracteres extraños como nuestra ñ o la ç o el €, o las letras acentuadas.
Es decir que todo lo que no sean caracteres ingleses quedan codificados con códigos ASCII por
encima de 127, como caracteres especiales o extendidos. En base a esto existen muchos juegos de
caracteres para mostrar las páginas, juegos que se adaptan a las particularidades de cada idioma.
Caracteres extendidos en HTML
Cualquier carácter, especial o no, puede mostrarse en una página usando su código ASCII, es
decir, el número que tiene asignado, encerrado entre &# y; Por ejemplo el símbolo @ tiene como
código ASCII el 64, así podemos representarlo como:
@
Si usamos el número 127 obtendremos nuestra tilde ~ . No obstante muchos caracteres especiales
tienen sinónimos que nos facilitan su inserción en las páginas web:
Código Resultado
á, Á, é, É,... á, Á, é, É, í, Í, ó, Ó, ú y Ú
ñ y Ñ ñyñ
¿ ¿
¡ ¡
º º
ª ª
™ ™o™
© ©
® ®
Espacio en blanco
Caracteres reservados
En el HTML existen cuatro caracteres de control, que se usan para formar etiquetas, establecer
parámetros, etc... Para poder emplearlos sin riesgo deberemos escribir los siguientes códigos:
Código Resultado
< <
> >
& &
" "
Aquí tienes una tabla completa de caracteres especiales
Enlaces
Las páginas web no son más que un caso particular de documentos de hipertexto, es decir,
documentos cuyo contenido no es solo el texto simple que podemos leer sino también el
contenido de otras fuentes a las que accedemos desde el documento. En el caso de las páginas
web estas otras fuentes pueden estar situadas en cualquier parte de la red, y a ellos se accede
mediante los enlaces o links: unos elementos interactivos del documento que aparentemente son
solo eso una palabra o un gráfico que habitualmente destacan por su color o su forma. Es
prácticamente imposible que una página web no posea uno de estos enlaces.
Los enlaces que nos encontramos en cualquier página pueden ser de dos tipos: internos a la
propia página o externos a otra página. La forma de construir unos y otros es muy similar como
verás a continuación.
La etiqueta <A>
La etiqueta <A></A> nos sirve para delimitar la zona de la página que constituye el enlace. Lo que
esté encerrado en esta etiqueta será mostrado por el navegador de forma resaltada, bien sea por
el color si es texto o por un borde si es una imagen (a menos que modifiquemos el formato), y si
pulsamos con el cursor del ratón sobre esa zona el navegador se dirigirá al lugar apuntado por ese
enlace. El formato completo de esta etiqueta es el que sigue:
<A HREF="dirección de destino" target="destino">Pulsar para saltar</A>
La dirección de destino será la página web especificada mediante una URL, en formato absoluto o
relativo. En ambos casos el destino puede incluso ser un elemento concreto dentro de la página.
En este caso se ha usado un texto pero igualmente podríamos colocar una imagen.
El atributo target es una manera de decirle al navegador en que ventana debe abrir esa nueva
página. Por ahora veremos dos de sus valores posibles:
_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. Este es el destino por
defecto de cualquier enlace dentro de una página
En el apartado dedicado a los frames veremos algo más de este parámetro.
Las URLs
Cualquier elemento conectado a la red internet se identifica por un conjunto de cuatro números
entre 0 y 255, algo así como 84.234.12.122, cualquier sitio de internet está identificado por esta
dirección. Pero como quiera que recordar esos números no es nada fácil existen unos servidores
de nombre que transforman esas direcciones en nombres más humanos como
www.espaciolatino.com. A estas direcciones se les llama Universal Resource Locator, o URL, es la
forma de localizar cualquier página en internet. En general tiene el siguiente formato:
protocolo://máquina:puerto/ruta/fichero@usuario
Donde protocolo puede ser uno de los siguientes:
Http
Es el protocolo para la transmisión de documentos HTML, es decir, el que habitualmente
usamos para ver las páginas en nuestro navegador.
https
Es similar al anterior pero con la particularidad de que la información viaja codificada
mediante técnicas de encriptación.
ftp
Es un protocolo para la transmisión de ficheros (File Transfer Protocol). Permite
intercambiar ficheros con sitios en los que se ejecuten servidores ftp. Los navegadores
actuales permiten acceder a estos servidores FTP, pero lo más normal es usar unos
programas al efecto denominados clientes de FTP.
mailto
Otro protocolo para la transmisión de datos, pero en este caso a través de servidores de
correo.
news
Mediante este protocolo accedemos a los denominados grupos de noticias, listas de
distribución de mensajes relativos a temas concretos. Habitualmente se accede a estos
servidores mediante el cliente de correo.
telnet
Es un terminal de acceso remoto en modo texto. Es un sistema bastante inseguro por lo que
no es habitual en servidores donde la seguridad esté bien pensada.
Lo más normal en nuestras páginas será acceder a elementos de otros páginas y por tanto lo
habitual será usar URL del estilo http://servidor.dom/página.htm o similar.
En un enlace podremos usar la URL como hemos escrito más arriba, URL absoluta, pero también
podremos usar formatos como /pagina.htm, parece que faltara la primera parte de la dirección
¿verdad? Pues no, en estos casos el navegador completa esa parte con la correspondiente de la
página en la que esté el enlace, son las URL relativas. Por ejemplo si miras la URL de esta página
verás que es
http://www.espaciolatino.com/tutorhtml/tema6.html
Pues bien si en esta página colocara un enlace en la forma
<A href="tema3.htm">Tema 3</A>
Esta dirección realmente apuntaría a
http://www.espaciolatino.com/tutorhtml/tema3.html
Como último detalle a tener en cuenta es el uso de la / como forma de referirse a la raíz del sitio.
Así este enlace
<A href="/index.htm">Portada</A>
Estaría apuntando a http://www.espaciolatino.com/index.htm.
Anclas
Como dijimos, es posible acceder a una posición dentro del documento HTML. Para ello lo
primero que tenemos que hacer es colocar marcas de destino en el documento al que queremos
acceder:
<A NAME="ancla">
A estos elementos se les llama anclas. Su uso es muy simple: en una etiqueta de enlace colocamos
el símbolo # seguido del nombre del ancla de esta manera:
<A HREF="#ancla">Ancla en esta página</A>
Al pulsar sobre este enlace se mostrará en la ventana la parte de la página actual que contiene el
ancla. Si queremos acceder a un ancla en otra página basta indicarlo al final de su URL. Como en
este ejemplo:
<A HREF="enlaces.html#ancla">Ancla en la página enlaces.html</A>
El formato listas
El lenguaje HTML nos permite crear listas en las páginas web de una manera casi tan simple y
efectiva como en un procesador de textos, para ello utiliza las etiquetas de listas, de las que
existen varios tipos. Todas ellas se pueden anidar (meter unas dentro de otras) formando árboles
más o menos complejos. Todos los tipos siguen el mismo formato:
<tipo_lista>
<LI>Primer elemento
<LI>Segundo elemento
</tipo_lista>
Tipo lista puede ser una de las siguientes: UL, OL, DL.
Listas desordenadas
La etiqueta <UL> significa unordered list, lista desordenada, y se corresponde con las viñetas en
los procesadores de texto: son listas donde cada elemento está precedido de un símbolo como un
punto o un disco. EL formato es el que sigue:
<UL>
<LI>Juan Pedro
<LI>Luisa
</UL>
Se verá como
 Juan Pedro
 Luisa
A partir del HTML 3.2 la etiqueta <UL> admite estos parámetros:
Parámetro Significado Resultado

 Primer
elemento
COMPACT Indica al navegador que debe representar la lista de la manera más compacta posible.  Segundo
elemento
 Tipo disc
TYPE="disc", "circle", Indica al navegador el dibujo que precederá a cada elemento de la lista. Para mayor o Tipo circle
"square" flexibilidad se admite también como parámetro de <LI>.  Tipo square
Listas ordenadas
La etiqueta <OL> responde a Ordered List, lista ordenada, y nos permite presentar listas como
esquemas numerados de un solo nivel, o sea, que cada elemento de la lista lleva un número de
orden. Por ejemplo,
<OL>
<LI>Primer elemento
<LI>Segundo elemento
</OL>
Se verá como
1. Primer elemento
2. Segundo elemento
El HTML 3.2 admite estos parámetros para la etiqueta <OL>:
Parámetro Significado Resultado

1. Primer
elemento
COMPACT Indica al navegador que debe representar la lista de la manera más compacta posible. 2. Segundo
elemento
1. Tipo 1
b. Tipo a
TYPE="1", "a", "A", Indica al navegador el tipo de numeración que precederá a cada elemento de la lista. Para mayor C. Tipo A
"i", "I" flexibilidad se admite también como parámetro de <LI>. iv. Tipo i
V. Tipo I
3. Primer
elemento
START="num" Indica al navegador el número por el que se empezará a contar los elementos de la lista. 4. Segundo
elemento
1. Primer
elemento
4. Segundo
VALUE="num" Atributo de <LI>, actúa como START pero a partir de un elemento predeterminado.
elemento
5. Tercer
elemento
Listas de definiciones
Este tipo de lista utiliza las etiquetas <DT>y <DD> en lugar de <LI>. En estas listas cada elemento
tiene una entrada de texto indentada respecto a dicho elemento. Es como si tuviéramos una lista
de conceptos y sus definiciones (el texto indentado). Para entenderlo lo mejor es verlas en
marcha:
<DL>
<DT>HTML<DD>Es un lenguaje de definición de páginas web.
<DT>Java<DD>Es un lenguaje de programación.
</DL>
Se verá como
HTML
Es un lenguaje de definición de páginas web.
Java
Es un lenguaje de programación.
La etiqueta <DL> sólo admite como parámetro el ya conocido COMPACT, que tiene el mismo
comportamiento que con los otros dos tipos de lista anteriores. Un elemento <DT> puede
contener varios elementos <DD>.
Insertar imágenes
Una página web sin alguna imagen es como el mar sin sal. Para incluir gráficos e imágenes en
nuestras páginas utilizaremos la etiqueta
<IMG SRC="fichero_grafico" ALT="descripcion" WIDTH=88 HEIGHT=31 BORDER=0>
El parámetro SRC especifica la URL del fichero que contiene el gráfico. Los formatos estándar en la
red son el GIF, PNG y JPG. Si quieres saber más sobre imágenes e internet debes dirigirte a esta
sección dedicada al tema en la guía de diseño.
El parámetro ALT especifica el texto que se mostrará en lugar del gráfico 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 ratón por encima de la
imagen. Es por eso que, aunque algunos usuarios no lo lleguen a ver nunca, conviene ponerlo
siempre. De hecho, el estándar HTML 4.0 obliga a hacerlo. Su uso es además muy interesante cara
a los robots buscadores que de este atributo pueden sacar información del tema tratado en la
página.
Los atributos WIDTH y HEIGHT indican el ancho y alto del gráfico en pixeles. Su uso no es
obligatorio pero si muy aconsejable para mejorar el tiempo de carga de la imagen: el navegador
sabe el espacio que ocupará la imagen y puede seguir colocando los otros elementos de la página
mientras se termina de descargar la imagen.
Por último vemos el atributo BORDER que como podrás adivinar tan solo coloca el ancho del
borde que rodea la imagen. Por defecto su valor es cero, salvo el caso que vemos en el siguiente
apartado.
Por ejemplo
<img src="/imgs/im_crear/pubcorreo.gif" width="30" height="32" alt="correo">
Imágenes y enlaces
Recordarás que al hablar de los enlaces decíamos que en el contenido de la etiqueta <A> podía ir
texto o una imagen. En este caso el navegador destaca la imagen colocándole un borde del color
que use para señalar los enlaces de texto. Algo bastante lógico pero que en la mayoría de los
casos queda poco estético, afortunadamente podemos eliminar ese borde poniendo a 0 el
atributo BORDER.
<a href="tema1.htm">
<img src="/imgs/im_crear/indice2.png"
alt="Tema 1" width="45" height="30">
</a>
Se ve así:
Sin embargo,
<a href="tema1.htm">
<img src="/imgs/im_crear/indice2.png"
alt="Tema 1" width="45" height="30" BORDER="0">
</a>
Se ve así:
Alineación respecto al texto
HTML nos permite controlar la disposición de las imágenes en la página con relación al texto, para
ello usamos el parámetro ALIGN :
ALIGN= Significado Muestra
TOP Coloca el punto más alto de la imagen coincidiendo con más alto de la línea de texto actual.
Este es el texto
MIDDLE Alinea el punto medio (en altura) de la imagen con la base del texto.
Este es el texto
BOTTOM Alinea el punto más bajo de la imagen con la base del texto.
Este es el texto
Este es el texto y esta
Coloca la imagen a la izquierda del texto. es otra línea
LEFT
Este es el texto y esta

Coloca la imagen a la derecha del texto. es otra línea
RIGHT
Hay que aclarar que la base del texto es la línea donde descansan casi todas las letras del alfabeto
excepto algunas como la p, la g o la j.
Formularios
Las páginas webs no son solo permiten presentar documentos de forma más o menos atractiva al
destinatario final, sino que también proporcionan elementos para interactuar con él. De esta
manera el usuario final puede enviar su opinión de la página al autor, o realizar una compra en
línea. Estos elementos se conocen como formularios y seguro que todos los habéis visto y
utilizado alguna vez. Por ejemplo este sencillo formulario
Tu nombre:
¿Estás registrado?
Si
No
Enviar Borrar
<FORM ACTION="" METHOD="POST" name="formul">

Tu nombre:<BR>
<INPUT NAME="nombre" TYPE="TEXT" SIZE="32"/><BR>
¿Estás registrado?<br>
<label><input type="radio" name="Si" value="1">Si</label><br>
<label><input type="radio" name="Si" value="0">No</label><br><BR>
<INPUT TYPE="Submit" VALUE="Enviar">
<input name="Reset" type="reset" id="Reset" value="Borrar">
</FORM>
El formulario está formado por una serie de elementos (cajas de texto, casillas de verificación,
botones...) encerrados entre las etiquetas <FORM> </FORM>. Como verás en esta etiqueta
existen varios parámetros como son:
ACTION la acción que se ejecutará al pulsar el botón de enviar. Habitualmente será una URL a un
programa CGI encargado de procesar los datos del formulario. Puede ser también mailto: seguido
de una dirección de correo electrónico, en este caso el formulario se enviará por correo, en cuyo
es recomendable añadir el parámetro ENCTYPE="text/plain" para que el mensaje sea fácil de leer.
METHOD indica cómo se enviarán losa datos del formulario al programa que los procese: POST de
forma interna (oculta) y GET añadido a la dirección URL del programa. Si usas el formulario para
un mailto: debes usar el método POST
NAME es el nombre que identifica al formulario, útil si se usan scripts dentro de la página.
Cajas de texto
Los controles o cajas de texto permiten al usuario escribir texto en el formulario. Pueden ser cajas
de una solo línea o cuadros de texto con varias líneas. Las primeras usan la etiqueta <INPUT> y
pueden ser de texto simple (se ve lo que escribimos) o de tipo password (lo que escribimos es
visto como una serie de asteriscos).
<INPUT TYPE=TEXT>
<INPUT TYPE=PASSWORD>
Ojo, el dato escrito en el segundo campo no se ve pero eso no quiere decir que esté codificado en
ninguna manera. Ambos tipos comparten todos sus atributos que son:
Parámetro Significado
SIZE Tamaño en columnas de la caja de texto.
MAXLENGTH Número máximo de caracteres que se pueden teclear.
VALUE Texto por defecto que aparecerá en el campo.
Pero si necesitamos que el usuario escriba más líneas de texto pues usamos la etiqueta
<TEXTAREA></TEXTAREA>:
<TEXTAREA>Comienza a escribir </TEXTAREA>
Si escribimos algún texto dentro de esta etiqueta, ese texto aparecerá por defecto en esa área de
texto. Admite estos parámetros:
Parámetro Utilidad
ROWS Filas que ocupará la caja de texto.
COLS Columnas que ocupará la caja de texto.
Opciones
Para que el usuario pueda marcar una de entre varias opciones podemos usar un campo INPUT de
tipo RADIO. En nuestro ejemplo lo hemos usado:
Si<INPUT NAME="Registrado" TYPE=RADIO

VALUE="1"><BR> Si
No<INPUT NAME="Registrado" TYPE=RADIO
VALUE="0"><BR> No
Fíjate que ambos INPUT usan el mismo atributo NAME, de esa manera el navegador los reconoce
como un juego de respuestas alternativas.
VALUE Este es el valor que asignará a la variable.
CHECKED Si lo indicamos en una de las opciones esta será la que esté activada por defecto.
Listas de opciones
Hay una alternativa al control de selección de alternativas: las listas desplegables. Mediante este
control el usuario puede seleccionar una opción de entre un grupo que aparece en una lista
desplegable. La lista se encierra en etiquetas <SELECT></SELECT>, y las opciones se ponen en
etiquetas <OPTION></OPTION>:
<SELECT NAME="Idioma">
<OPTION>Español</OPTION> Español
<OPTION>Inglés</OPTION>
<OPTION>Francés</OPTION>
<OPTION>Alemán</OPTION>
</SELECT>
Los parámetros que admite SELECT son las siguientes:
SIZE El número de opciones que podremos ver. Si es mayor que 1 veremos una lista de selección con un scroll y, si no, veremos una lista
desplegable.
MULTIPLE Si lo indicamos podremos elegir más de una opción, para ello el usuario utilizará la tecla CTRL y el botón activo del ratón.
Y OPTION estos:
VALUE Este es el valor que asignará a la variable.
SELECTED La opción con esta propiedad será la que aparezca seleccionada por defecto.
Botones del formulario
Existen dos clases e botones: uno que se utiliza para poner en marcha la operación indicada por
ACTION (botones submit) y otro que sirve para resetear el formulario borrando el contenido de
todos los controles:
Enviar
<INPUT TYPE=SUBMIT>
<INPUT TYPE=RESET> Restablecer
En ambos casos su puede usar el parámetro VALUE para el texto que aparece dentro del botón. El
botón de submit puede ser una imagen, por ejemplo
<input name="imageField" type="image"
src="imgs/botonel.gif"
width="85" height="46" border="0">
Que se vería
Este botón actúa como un botón tipo SUBMIT, pero envía con los datos del formulario las
coordenadas X Y del punto de la imagen donde pulsó el usuario.
Marcas de verificación
Son controles parecidos a los campos de opciones pero que no van agrupados, o sea no son
excluyentes, Sirven para que el usuario coloque una marca de si o no (verdadero o falso, marcado
o no marcado). Lo podremos conseguir por medio de controles de confirmación:
<INPUT NAME="Opina" TYPE=CHECKBOX> ¿Te gusta el curso? ¿Te gusta el curso?
Si queremos que el control esté activado por defecto le añadiremos el parámetro CHECKED.
Campos ocultos
Mediante un formulario podemos también enviar datos al programa encargado de procesarlo.

Esto se realiza mediante los llamados campos ocultos, que son campos INPUT de tipo HIDDEN, y
se llaman así porque no se ven en la página web, o sea, el usuario no los ve a menos que se mete
en la vista de código de la página, digo esto porque no vayamos a pensar que con estos campos
podemos pasar información privada mediante los formularios. El código para este tipo de campos
es algo como esto:
<INPUT TYPE=HIDDEN NAME="Curso" VALUE="JavaScript">
De esta manera si en un sitio tengo muchos formularios sabré que estos datos en concreto vienen
de la página de JavaScript. Su uso realmente no lo verás hasta que no escribas o utilices
programas para gestionar los formularios.
Controles avanzados en formularios

Con lo que has visto en la sección anterior de formularios podrás perfectamente incorporar estos
elementos de interacción a tu página web, pero los navegadores modernos (MSIE 5+ y Netscape
6+) permiten el uso de algunas características extras añadidas por el estandard HTML 4.0,
características que básicamente mejoran la estética y facilitan el uso de estos elementos.
Botones
Una importante mejora en el HTML 4 es el nuevo control <BUTTON> que permite enriquecer la
etiqueta de texto que hasta ahora tenían los botones de formulario. Ahora estos elementos
pueden tener cualquier contenido HTML, como por ejemplo imagen con un texto. Por ejemplo el
siguiente código
<BUTTON TYPE="button">
Inicio <img
src="imgs/im_crear/bolamas.gif" Ínicio
width="10" height="10">
</BUTTON>
Los parámetros de dicha etiqueta son TYPE, que podrá tomar los valores SUBMIT (por
defecto), RESET y BUTTON, NAME y VALUE.
Etiquetas
Los controles tipo LABEL permiten asociar etiquetas a los controles de formulario. Es decir ahora
el texto que suele acompañar a los campos que debe rellenar el usuario son solo eso texto, pero
con esta etiqueta ese texto se convierte en un elemento activo que forma parte del campo y
podemos seleccionar éste pulsando sobre la etiqueta. Observa el uso del atributo for usado para
asociar la etiqueta al campo cuyo ID tenga el mismo valor que este for
<INPUT ID="Curso" TYPE=CHECKBOX>

<LABEL for="Curso"> Me gusta este curso
</LABEL> Me gusta este curso
Compara con este otro ejemplo aparentemente igual al anterior.
<INPUT NAME="Curso" TYPE=CHECKBOX>

Me gusta este curso/a Me gusta este curso
En el primer caso el clic sobre la etiqueta actual igual que sobre el control.
Agrupando elementos
HTML 4 nos presenta una forma sencilla de estructurar los formularios sin necesidad de acudir a
las socorridas tablas. Ahora podemos agrupar visualmente varios controles encerrándolos dentro
de la etiqueta FIELDSET, veremos que alrededor de ellos se ve un rectángulo con el título que le
demos mediante la etiqueta LEGEND.
<FIELDSET>
<LEGEND>Tus datos</LEGEND>
<LABEL>
Nombre: Tus datos Nombre:
<INPUT TYPE="text" name="nombre">
<br>Edad: Edad:
<INPUT TYPE="text" name="edad">
</LABEL>
</FIELDSET>
La posición del título (LEGEND) puede controlarse usando el parámetro ALIGN, que por defecto
es TOP (arriba), pero puede ser BOTTOM (abajo) a la LEFT (Izquierda) o RIGHT (derecha) .
Desactivando elementos
Todos los controles de un formulario se pueden desactivar, impidiendo así al usuario que los
sobrescriba. Se seguirán mostrando en pantalla, aunque con un aspecto distinto para indicar que
no son editables. Para ello sólo tenemos que indicarle el parámetro DISABLED:
<LABEL
DISABLED>Origen:
Origen:
<INPUT TYPE=TEXT
DISABLED>
</LABEL>
Mapas
Recordemos que los enlaces en las páginas web podían escribirse con un texto o con una imagen.
Es decir podíamos tener una imagen que al ser pulsada con el ratón nos llevaba a otra página.
Pues bien un mapa de imagen es algo parecido pero en el que l imagen no tienen asociado un solo
enlace sino varios: depende de que parte de la imagen pises para ir a uno u otro destino. Esto se
puede hacer de dos maneras:
 Gestionando el mapa en el navegador.

 Gestionando el mapa en el servidor.
Los más utilizados sin duda actualmente son los primeros, los mapas del lado del cliente, pues no
exigen ningún apoyo del servidor y por tanto los puede usar cualquier webmaster en su propia
página.
Mapas lado cliente
Un mapa no es más que una imagen en la que se definen zonas activas, o sea, zonas que al ser
pulsadas con el ratón actúan como un enlace y nos llevan a otras páginas. Su creación tienen dos
partes: una definir el mapa y otra asociar el mapa con una imagen:
<MAP NAME="mapa_enlaces">
<AREA SHAPE=... COORDS=... ALT="Enlace a..">
...
</MAP>
La descripción del mapa es de lo más simple: le damos nombre (para luego poderle asociar la
imagen) y definimos las zonas activas (formas geométricas como verás a continuación):
SHAPE Define la forma de la zona: rectangular, circular o poligonal.
COORDS Coordenadas (separadas por comas) que definen la zona. El número y significado de esas coordenadas dependerá de la forma.
HREF URL del enlace correspondiente a esta zona.
NOHREF Zona inactiva
ALT Texto alternativo, etiqueta idéntica al ALT de IMG
Como podemos ver, para declarar correctamente una zona necesitamos conocer cómo se definen
exactamente las formas y coordenadas:
SHAPE COORDENADAS
Rectangular RECT "x1,y1,x2,y2" siendo (x1,y1) la esquina superior izquierda y (x2,y2) la inferior derecha.
Circular CIRC "x,y,r" siendo (x,y) el centro del círculo y r el radio.
Polígono "x1,y1,x2,y2,x3,y3,..." definiendo cada pareja (x,y) una esquina del polígono. La última pareja de coordenadas se unirá a la
irregular
POLY primera para cerrar el polígono.
Toda la imagen DEFAULT No se necesitan
Usando los mapas
Una vez definido como es el mapa lo asignamos a una imagen:

<IMG SRC=... USEMAP="#mapa_enlaces">
Siempre tenemos que añadir al comienzo del nombre de nuestro mapa una almohadilla (#).
Vamos a ver un ejemplo:
<MAP NAME="navegadores">
<AREA SHAPE=RECT COORDS="0,0,24,31"
HREF="http://www.apache.org" ALT="Servidor Apache">
<AREA SHAPE=RECT COORDS="26,0,53,31"
HREF="http://www.w3c.org" ALT="la W3C">
<AREA SHAPE=DEFAULT NOHREF ALT="por defecto">
</MAP>
<IMG SRC="mapa.gif" WIDTH=198 HEIGHT=51 BORDER=0 USEMAP="#deinteres">
Se ve tal que así:
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 ningún URL por si el
usuario pulsa fuera de las zonas activas.
Tablas
La organización del texto en una página es posible gracias a las tablas. Muchas páginas web son
como páginas de revistas, y la forma más simple de emular las funciones de maquetación son las
tablas. Una tabla no es más que una colección de listas y columnas a cuyas intersecciones le
vamos a llamar celdas, y es en esas celdas donde podemos colocar textos o imágenes. Las tablas
se pueden incluso anidar y las celdas se pueden agrupar unas con otras para lograr disposiciones
de texto e imagen prácticamente similares a las que se podrían conseguir en páginas de revistas
gracias a los programas de maquetación.
Definir tablas
Para definir una tabla tan solo debemos definir las filas que la componen. Y dentro de estas las
características de las celdas. Por ejemplo la siguiente tabla posee 2 filas (2 <TR></TR>) y 3
columnas (3 pares <TD></TD> en cada fila) así:
<TABLE>
<TR>
<TD>1,1</TD>
<TD>1,2</TD>
<TD>1,3</TD>
</TR> 1,1 1,2 1,3
<TR> 2,1 2,2 2,3
<TD>2,1</TD>
<TD>2,2</TD>
<TD>2,3</TD>
</TR>
</TABLE>
Pero la definición va más allá, podemos poner bordes, colores de fondo a las celdas, definir
márgenes en las celdas, aumentar o disminuir el espaciado entre celdas. Resumimos todo esto en
la siguiente tabla de atributos:
WIDTH Anchura de la tabla. Puede ir en pixeles o en porcentaje de la anchura total disponible.

ALIGN Alinea la tabla a izquierda (LEFT), derecha (RIGHT) o centro (CENTER).
BORDER Especifica el grosor del borde que se dibujará alrededor de las tabla y celdas.
BORDERCOLOR Define el color de los bordes de la tabla
CELLSPACING Espacio entre celdas, en pixeles.
CELLPADDING Borde interior de las celdas, en pixeles.
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
El contenido escrito son las coordenadas de la celda, así 1,2 indica que esa celda es la
correspondiente a la fila 1 y la columna 2.
Definiendo las filas
La definición de cada fila se inicia con la etiquete <TR> y finaliza con </TR>, entre ellas
colocaremos las celdas. Cada etiqueta TR tiene los siguientes atributos:
ALIGN Alinea el contenido de las celdas de la fila horizontalmente a izquierda (LEFT), derecha (RIGHT) o centro (CENTER).
VALIGN Alinea el contenido de las celdas de la fila verticalmente arriba (TOP), abajo (BOTTOM) o centro (MIDDLE).
Definiendo las celdas
Ya sólo nos queda definir cada celda para lo que disponemos de las TD y TH. Esta última es una
celda especial que se verá destacada, como un título para la columna: en negrita y centrado.
Ambas etiquetas admiten los siguientes atributos:
ALIGN Alinea el contenido de la celda horizontalmente a izquierda (LEFT), derecha (RIGHT) o
centro (CENTER).
VALIGN Alinea el contenido de la celda verticalmente arriba (TOP), abajo (BOTTOM) o centro
(MIDDLE).
WIDTH Especifica la anchura de la celda. También se puede especificar tanto en pixeles como
en porcentaje, teniendo en cuenta que, en este último caso, será un porcentaje
respecto al ancho total de la tabla (no de la ventana del navegador).
NOWRAP Impide que, en el interior de la celda, se rompa la línea en varias líneas.
COLSPAN Número de celdas de una fila agrupadas.
ROWSPAN Número de celdas de la columna agrupadas.
Los dos últimos parámetros se usan para fundir celdas de una misma fila o de una misma
columna. Por ejemplo veamos 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>
1,1 y 1,2 1,3
<TD ROWSPAN=2>2,1 y 3,1</TD>
<TD>2,2</TD> 2,2 2,3
<TD>2,3</TD> 2,1 y 3,1
3,2 3,3
</TR>
<TR>
<TD>3,2</TD>
<TD>3,3</TD>
</TR>
</TABLE>
Si te fijas cuando una celda con un colspan = 2 equivale a dos celdas a la hora de calcular el
número de celdas de la fila. Algo similar ocurre con el rowspan pero referido a celdas unidas en
vertical.
Titulares
Ya hemos dicho que hay un tipo de celdas utilizable como encabezamiento o titular, pero la tabla
al completo puede llevar un título, que irá en una zona fuera de cualquier celda o fila. Esta es la
etiqueta CAPTION. Su uso es muy simple como puedes ver en este ejemplo:
<TABLE BORDER=1> Números

<CAPTION> 1,1 y 1,2 1,3
Números</CAPTION>
... 2,2 2,3
</TABLE> 2,1 y 3,1
3,2 3,3
Con el parámetro ALIGN, podemos controlar que el título aparezca arriba (por defecto TOP) o
abajo de la tabla, con el valor BOTTOM.
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 complejo 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 alternativo explicando la situación. Mira el siguiente 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>).
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 pixeles.
 Calculado: Podemos colocar el ancho o alto de un marco y dejar que el tamaño del otro lo
calcule el navegador, usando para 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 colocamos 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 pixeles. El primer marco ocupará el 10%, es
decir, 84 pixeles. El tercero necesita 300, en total tenemos 384 ocupados luego quedan 800-384,
416 pixeles libres. Los otros se repartirán este espacio en función de los asteriscos: 416/4 = 104
pixeles para el de un asterisco y 312 para el otro. En total tenemos ocupados los 800 pixeles. 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 palabras: un marco puede contener una página
que a su vez obtenga 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
Etiqueta FRAME
Esta es la etiqueta que nos permite describir como debe ser cada marco Los parámetros que
soporta son:
Asigna un nombre a un marco, de esta manera luego podemos usarlo como
NAME
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.
Si lo igualamos a cero el borde de este marco desaparece (pero ojo si los
FRAMEBORDER
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.
Permite cambiar los márgenes horizontales dentro de un marco. Se representa
MARGINWIDTH
en pixeles.
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:
Asigna un nombre a un marco, de esta manera luego podemos usarlo

NAME
como destino de un enlace.
Alineación del marco respecto al texto que lo rodea (botton, right, left,
ALIGN
middle)
SRC Indica la URL del documento HTML que ocupará el marco.
HEIGHT Altura del marco
WIDTH Anchura del marco
FRAMEBORDER Si 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.
Permite cambiar los márgenes horizontales dentro de un marco. Se
MARGINWIDTH
representa en pixeles.
MARGINHEIGHT Igual al anterior pero con márgenes verticales.
Si es true La página origen puede tener como color de fondo
allowtransparency
transparent.
Acceso a otros marcos
Si leíste la sección dedicada a los enlaces recordarás que cuando pulsas un enlace en la ventana
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 enlace 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 índice tenemos un enlace que queremos se abra en el marco principal pondremos:
<A HREF="pagina.html" TARGET="principal">
También existen cuatro nombres reservados que podremos utilizar en el parámetro TARGET:
_top
Elimina todos los marcos existentes 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, un 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 una 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 pixeles.
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 comúnmente 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="texto/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 pixeles.
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 a los
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
pixeles. 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.
Actualmente el estandard de hojas de estilo es el CSS3 que permite un enorme control sobre el
contenido, incluyendo animaciones y efectos que pueden sustituir los algunos casos al uso de
scripts. Pues ver una introducción bastante detallada en nuestra introducción al CSS3
Clases
Hasta ahora habíamos definido estilos para una etiqueta determinada. Pero también podemos
hacerlo para una clase determinada. ¿Esto qué 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 pixeles 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 mismos 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
pixeles. 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.
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
describe 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.
Propiedades de bloque
Cuando hablábamos del formato en las páginas HTML diferenciamos entre elementos de bloque y
elementos en línea, 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

margin-top, margin-right, margin- Márgenes dntro del bloque.
tamaño, porcentaje o auto. Por defecto
bottom, margin-left, margin: top Tanto margin como margins() se utilizan para
es cero.
right bottom left cambiar todos estos atributos a la vez.
padding-top, padding-right,
padding-bottom, padding- tamaño, porcentaje o auto. Por defecto
Distancia entre el borde y el contenido del bloque.
left,<br/> padding: top right es cero.
bottom left
border-top-width, border-right-
width, border-bottom-width,
Anchura del borde de un bloque. numérico
border-left-width,<br/> border-
width: top right bottom left
none, ruged, solid, 3D,... por
border-style Tipo de borde de un bloque.
defecto ninguno (none).
border-color Color del borde de un bloque. Código o nombre de color
tamaño, porcentaje o auto, automático
width, height Ancho y alto del bloque.
por defecto.
float Justificación del contenido de un bloque.
left, right o none, por defecto
ninguna.
clear Permiso para que otro elemento se pueda colocar a su left, right, both o none, por
izquierda o derecha. defecto 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 genérico)
lista de tipos, ya sean genéricos o no, separados por comas.
family que vamos a usar.
xx-small, x-small, small, medium, large, x-large, xx-large, tamaño

font-size Tamaño del tipo de letra.
relativo o tamaño absoluto. Por defecto medium.
font- normal, bold, bolder, lighter o 100-900 (donde 900 es la negrita más gruesa). Por
Grosor del tipo de letra (negrita).
weight defecto normal.
normal, italic, italic small-caps, oblique, oblique small-
font-style Estilo del tipo de letra (cursiva).
caps o small-caps. Por defecto normal.
Recordemos lo dicho al hablar del tipo de letras: no todos tus tipos tienen que estar en los
ordenadores de tus visitantes.
Propiedades de formato de texto
Nuestro 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.
text- Efectos variados sobre el none, underline (subrayado), overline (como subrayado, pero por encima), line-
decoration texto. through (tachado) o blink (parpadeante); por defecto ninguno.
vertical- baseline (normal), sub (subíndice), super (superíndice), top, text-
Posición vertical del texto.
align top, middle, bottom, text-bottom o un porcentaje. Por defecto baseline
text- Transforma el texto a capitalize (pone la primera letra en mayúsculas), uppercase (convierte todo a
transform mayúsculas o minúsculas. mayúsculas), lowecase (a minúsculas) o none, por defecto no hace nada.
text-align Justificación del texto. left, right, center o justify
text-indent Tabulación con que aparece

la primera línea del texto.
tamaño o porcentaje, por defecto cero.
Propiedades de color y fondo
También es posible cambiar el color o la imagen de fondo de cualquier elemento.

color Color del texto. Un color (en el formato habitual).
background Modifica tanto el gráfico el color de fondo. dirección del fichero que contiene la imagen o un color.
Las direcciones URL (para la imagen de fondo por ejemplo) se expresan del siguiente modo:
background: url(fondobonito.gif);
Otros

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

ejecutado 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.
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 encontrará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 pueden posicionarse de manera dinámica y
organizarles 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 Microsoft y Netscape son

diferentes, ambos usan algunas extensiones propias, aunque ambos admiten los estándares de la
W3C con lo que el uso de estos elementos es bastante universalizarle.
Definición
En realidad las capas no se definen 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, ocultarles y en general manipulables de forma dinámica. Por ejemplo:
<STYLE TYPE="text/css">
.la_capa {position:absolute; top:100px; left:20px; width:300; heigth: 200}
</STYLE>
Con esto hemos definido un tipo de capa, denominada 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 construido 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í:
<STYLE TYPE="text/css">
.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.
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 izquierda de la
left y top capa donde esté metida. Hay que tener en distancia en pixels, por defecto cero.
cuenta que el documento completo también se
considera una capa.
width y height Determinan la anchura y altura de la capa. un tamaño en pixels.
Nos permite definir el área que se podrá ver
dentro de la capa. Por
ejemplo, clip:rect(20px 30px
clip 40px 10px); recortará la capa creando un área.
un cuadro visible cuya 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 más arriba (se dibujarán al final, número positivo, por defecto las capas
z-index encima de las otras). Debe ser un valor positivo definidas en el código HTML más tarde
y único: dos 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 debe verse o estar oculta. la capa padre). 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 capa. una dirección.
background-color<imagenenlinea
direccion="graficos/explorer.gif"
descripcion="explorer"/> y layer-
Color de fondo de la capa. un color.
background-color<imagenenlinea
direccion="graficos/netscape.gif"
descripcion="Netscape"/>
Esta página me suena
Siempre hemos oído que las páginas web y que internet se aprovecha de la tecnología
multimedia, que si puedes oír música y ver vídeos. Pues bien el lenguaje HTML, repetimos, es un
lenguaje para 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 colocar 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ágenes 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 oír música o prefiera escuchar la radio o sus propios CD, 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 correspondiente plugin,
como Real Audio o QuickTime.
Sonido manual
Una forma muy simple de ejecutar un sonido es mediante un enlace que llame al 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.
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 etiqueta 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
melodía debíamos hacer uso de JavaScript.
Los exploradores actuales usan la etiqueta <EMBED>, que tiene los siguientes 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 cómo 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.
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.
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.
Celda como enlace
Una celda de una tabla puede convertirse en un enlace activo de la manera más simple, basta con
un toque de CSS y usando el atributo display. Ejemplo
<td>
<a href="sitio.htm" style="display:block">
Texto del enlace
</a>
</td>
Así de fácil, ahora la celda completa es un enlace. Funciona con los navegadores IExplore (incluido
el 10), Chrome y Mozilla.
Dimensiones exactas
Para lograr que una fila o una columna 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 asígnale 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.
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.
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.
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 archivos comprimidos en formato Zip, de esta manera la descarga es
más rápida y se puede bajar cualquier tipo de archivo (previamente comprimido).
El sitio web
La elaboración de sitios web es una tarea bastante personal, es casi un arte, y al final cada
webmaster se desarrollará su propio estilo, una especie de firma intangible que baña todas sus
páginas. Existen en la red multitud de guías de estilo que ayudan al principiante, y al no tan
principiante, a evitar errores comunes y a lograr páginas de cierta calidad.
Por eso no quiero cerrar este cursillo sin un capítulo dedicado a la forma de hacer buenos sitios
web. Al menos desde el punto de vista de un webmaster que lleva algún tiempo en esto. Ojo, no
es un capítulo de recetas para resolver problemas concretos, es más bien un resumen, que
pretende servir para que quien las lea se plantee las cosas antes de lanzarse alegremente sobre su
editor para crear su magnífico sitio web. En Creatuweb existe toda una sección dedicada este
tema, mucho más detallada y completa, por tanto esto os debe servir tan solo de aperitivo antes
de visitar esas otras páginas.
Contenido
Todos hemos visto páginas horribles en cuanto a diseño y estructura, pero cuyo contenido nos ha
sido lo bastante útil como para obligarnos a detenernos en ellas. Aunque luego apenas hayamos
vuelto a visitarla. Quiero decir que el contenido de una página es básico para que alguien la visite.
No esperemos que por publicar las fotos del botellón del viernes vamos a atraer a millones de
visitas. Cualquier página será visitada si su contenido es interesante. Así que lo primero es pensar
que tenemos que decir, si es que tenemos algo que decir. A la mejor a mí me gusta coleccionar
rabillos de boina, pero ¿crees que eso puede interesar a mucha gente? Sin embargo si he peleado
con Linux desde su nacimiento y lo conozco como el padre que lo parió, seguro que mi página con
el tiempo llegará a tener una gran difusión... y puedo sacarle provecho. El Linux hoy en día es un
producto muy en alza.
Ahora sí que podrías usar esa plataforma para colocar tu página personal, en la que podrías
publicar, por ejemplo, tu curriculum, algo que por sí sólo no atraería a demasiados visitantes.
Y claro ya que el visitante ha llegado a tu página no dejes que se vayan para siempre. Haz que tu
sitio sea un referente, por ejemplo con una página de enlaces a sitios que traten del mismo tema
que la han traído hasta aquí. Para muchos visitantes tu página sería una lista de favoritos. O sea,
ser útil al visitante.
Ah, y nunca, nunca coloques páginas vacías. Eso de página en construcción suele ser bastante
irritante. Ponte en el lugar del visitante, llega a tu sitio convencido de haber encontrado lo que
buscaba y se encuentra con una página con el cartelito de En Construcción. Lo normal es que no
regrese.
Navegación
Si quieres que los visitantes recorran tu sitio y descubran lo bueno que es facilítales la navegación,
procura que lleguen a donde quieran ir en un par de clics. No le hagas volver a la página principal
cada vez que quiera ir a una u otra sección. Esto lo puedes logar con una buena barra de
navegación, un menú sencillo e intuitivo al que pueda acceder esté donde esté.
Una barra o menú de navegación debe contener como mínimo un enlace a la página principal, y
uno a cada sección o subsección del sitio. La barra la puedes construir mediante JavaScript,
mediante un frase índice o colocando en todas las páginas el código HTML de esa barra. Tampoco
está de más disponer de un enlace a una página con el mapa del sitio.
Lo ideal es ver como la gente se mueve por tus páginas, mira como se distribuyen las visitas por tu
sitio y facilita el acceso a las menos visitadas. Si ves que aun así no aumentan las visitas
examínalas porque a lo mejor no interesan. En cuanto a las más visitadas, coloca sus enlaces de
forma muy accesible.
Ah, y ojo con los enlaces rotos. Procura repararlos cuanto antes, es como una casa descuidada.
Estructura
Dale una estructura lógica a tu sitio. Un sitio web no es tan solo la suma de todas sus páginas, es
también el cómo se relacionan entre sí. Una serie de temas secuenciales como este cursillo puede
tener una estructura secuencial: está pensada para que las páginas sean vistas una tras otra, sin
saltos. No está de más un botón de página adelante y página atrás en cada tema, pero sin quitarle
al usuario la posibilidad de saltar a un tema específico en un momento dado.
Ojo con las páginas excesivamente largas. Aunque el aumento de la velocidad en internet ha
permitido superar con creces los hasta hace no mucho recomendados 20 Kb por páginas, si un
usuario tiene que desplazar el botón de scroll hasta el suelo es fácil que se vaya a un sitio más
cómodo. Si lo que ve en la parte superior de la página no le atrae es probable que no pulse en el
scroll vertical, y si este es largo... Procura que en la primera parte de tu página haya información
suficiente sobre el contenido de la misma.
Recuerda que, salvo excepciones, a casi nadie le apetece leer en el monitor. Procura dividir tu sitio
en secciones o zonas con un número suficiente de páginas, no intentes meter una sección
completa en una página.
Ah, y ojo con esas splash pages, esas páginas de acceso que solo contienen un botón de entrar y
una bonita imagen. Puede que en algún caso sea necesaria, pero quien llega a un sitio buscando
una solución quiere ir directo al grano. En muchas ocasiones estas pantallas de presentación se
construyen con Flash y enlentecen innecesariamente la carga, en estos casos siempre se agradece
el botón de saltar la presentación (skip intro).
Accesibilidad
No hagas demasiadas presunciones sobre los medios de acceso a tu página. Puedes presuponer
que usarán un monitor en color, pero poco más. Así que procura que tus páginas puedan verse
bien en cualquier navegador y con cualquier resolución. Además si tú tienes una magnífica ADSL
de 8 Mb/s puede que muchos de tus visitantes se conecten con un modem de 56 Kb/.
Lógicamente acertar con esto es más difícil cuanto más amplia sea tu audiencia.
Puede que para mejorar el acceso algunos visitantes desactiven la presentación de gráficos, prevé
esta situación colocando en todas tus imágenes el parámetro ALT.
No abuses de los plugins, muchos usuarios puede que anden con ordenadores limitados en
recursos y no quieran esperar a la carga de un pesado Apple en Java o una presentación en Flash,
si puedes hacerlo con HTML y algo sumo con JavaScript, hazlo.
Diseño
Al principio decíamos que una página con un buen contenido era imprescindible para atraer
visitas. Pero no cabe duda de que estas visitas estarán más tiempo y regresarán si encuentran un
lugar, no solo cómodo como hemos visto, sino agradable a la vista. Algunos gráficos bien situados,
sin abusar, junto a unos colores nada agresivos pueden hacer que elijan tu página antes que la del
vecino en la lista de enlaces de un buscador. Si usas una imagen de fondo procura que no moleste
la lectura y que no distraiga. Cuidado también con los colores de texto y de fondo, busca el
máximo contraste.
Si tienes que destacar algo puedes usar algún gráfico animado discreto, visualmente pesan mucho
y distraen. Claro que si estas diseñando una página infantil estos elementos son fundamentales.
Evita en lo posible los bordes en las tablas, una página muy fragmentada se ve mal. Si usas bordes
intenta que sean discretos y solo los imprescindibles.
En cuanto a los frames, si no tienes más remedio úsalos pero recuerda que las pantallas de los
monitores tienen una superficie limitada. Procura no colocarles bordes ni las barras de scroll.
Mantenimiento
Si has programado alguna vez sabe que el trabajo no termina cuando el programa está en marcha.
Y si no has programado nunca también deberías saberlo, basta con que te fijes en la versión actual
de tu navegador y la versión del mismo que corría el año pasado. Cualquier producto informático
acaba realmente en un continuo proceso de mantenimiento, comprobar que todo funciona y
mejorar todo lo mejorable y como no hay nada perfecto... todo es mejorable. Comprobar porqué
una sección no es demasiado visitada, o actualizar la lista de enlaces o tantos detalles son algunas
de las tareas que el webmaster no puede olvidar.
En este sentido una buena costumbre es colocar encuestas que permitan a tus visitantes opinar o
calificar algunos aspectos de tu sitio. El visitante siente que cuenta para el autor de las páginas y
te puede ayudar a ver ese error en el que tú no habías caído.
Tampoco está de más mostrar la fecha de la última modificación que hiciste a tu página, el usuario
sabe si la información de tu sitio es actual o ya está superada.
Deja alguna zona de tu portada para publicar las novedades que vayas incorporando a tu sitio o
para publicar las secciones más interesantes, las que quieras difundir más.

Inic HTML y Css PDF

Enviado por

Dados do documento

Título original

Direitos autorais

Formatos disponíveis

Compartilhar este documento

Compartilhar ou incorporar documento

Opções de compartilhamento

Você considera este documento útil?

Este conteúdo é inapropriado?

Direitos autorais:

Formatos disponíveis

Inic HTML y Css PDF

Enviado por

Direitos autorais:

Formatos disponíveis

“INICIAR EN EL MUNDO DE LAS PAGINAS WEB.

Esta información no es de la autoritaria de @TUPAGINAWEB

¿Qué es una página web?

Los inicios: HTML 2.0

HTML 3.0 y 3.2

Este standard no terminó de cumplir lo esperado, además en esas fechas la sección de

Versiones para este manual

El cuerpo del documento

Estructura del documento

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

BACKGROUND Coloca una imagen como fondo de la página.

Estos estilos o formatos actúan a nivel de párrafo

Cambiando el tipo de letra

Etiqueta Utilidad Resultado

Para tachar. A mí, en cambio, nadie me quiere

Incrementa el tamaño del tipo de letra. Soy GRANDE

Disminuye el tamaño del tipo de letra. Creí ver un lindo gatito

Son formatos predefinidos aplicables a caracteres individuales (y a grupos por supuesto).

Etiqueta Significado Efectos

Abreviaturas. La WWW usa el protocolo http

Etiqueta Significado Resultado

Black Silver Gray White Maroon Red Purple Fuchsia

<FONT color="blue">Soy azul como el mar</FONT>

Código para rojo es #FF0000

Código para verde es #00FF00

Y ahora mezclemos colores con #10A2FF

Tamaño del texto

SIZE=1 SIZE=2 SIZE=3 SIZE=4

Caracteres extendidos en HTML

En el apartado dedicado a los frames veremos algo más de este parámetro.

Donde protocolo puede ser uno de los siguientes:

Esta dirección realmente apuntaría a

Estaría apuntando a http://www.espaciolatino.com/index.htm.

A partir del HTML 3.2 la etiqueta <UL> admite estos parámetros:

Parámetro Significado Resultado

El HTML 3.2 admite estos parámetros para la etiqueta <OL>:

Parámetro Significado Resultado

<img src="/imgs/im_crear/pubcorreo.gif" width="30" height="32" alt="correo">

Alineación respecto al texto

ALIGN= Significado Muestra

Este es el texto y esta

<FORM ACTION="" METHOD="POST" name="formul">

<TEXTAREA>Comienza a escribir </TEXTAREA>

Si<INPUT NAME="Registrado" TYPE=RADIO

Los parámetros que admite SELECT son las siguientes:

Botones del formulario

<INPUT NAME="Opina" TYPE=CHECKBOX> ¿Te gusta el curso? ¿Te gusta el curso?

Mediante un formulario podemos también enviar datos al programa encargado de procesarlo.

Controles avanzados en formularios

<INPUT ID="Curso" TYPE=CHECKBOX>

Compara con este otro ejemplo aparentemente igual al anterior.

<INPUT NAME="Curso" TYPE=CHECKBOX>

 Gestionando el mapa en el navegador.

Mapas lado cliente

Usando los mapas

Una vez definido como es el mapa lo asignamos a una imagen:

Se ve tal que así:

WIDTH Anchura de la tabla. Puede ir en pixeles o en porcentaje de la anchura total disponible.

1,1 1,2 1,3

Definiendo las filas

Definiendo las celdas

<TABLE BORDER=1> Números

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