Curso HTML introductorio

CURSO DE HTML
I. INTRODUCCION
En este manual aprenderás a crear páginas en Html, desde qué tipo de programas
podemos usar para la creación de nuestra página web, hasta como usar mapas, imágenes,
marcos o frames, introducir música o videos en una página Web, etc.
I.1. ¿Qué programa debo usar?
Para empezar a programar con Html, se necesita un programa en el cual podamos

introducir nuestro código y así, crear nuestra web. Existen varios programas (editores web)
con los cuales puedes ayudarte, entre los más conocidos están DreamWeaver, Frontpage
y HomeSite. Sin embargo, el mejor sigue siendo DreamWeaver por ser tan completo.
Existe también la posibilidad de usar el Bloc de Notas (Notepad ++), el cual recomiendo
para que aprendas las etiquetas y no te las escriba automáticamente el programa.
Desde mi punto de vista (y de muchos otros webmasters, claro) el código Html solo hay
que usarlo para añadir el contenido en la web, pero no para darle formas, colores ni nada
que signifique "adornar" la web. Para eso usaremos los Estilos CSS que veremos
después de terminar este curso de Html. Es por eso que prescindiremos de todo el Html
que se usa para adornos. Repito, Html solo para añadir información, CSS para darle
forma.
I.2. Resumen de Pasos para construir una Web
A continuación como complemento al curso muestro una serie de pasos, escogidos de

diferentes páginas y/o encuestas en el internet, de que pasos se deben seguir para crear
una página web.
0.- Tener claro "qué" quieres hacer. Escoger un tema del que hablar en la web.
1.- Trazar un esquema de apartados y secciones de la web, con todo aquello que se te
ocurra (con papel y lápiz). Luego ordenarlo todo para elaborar el esquema final (aunque
podrá cambiar ir cambiando después).
2.- Hacer un "boceto" de la página que deseas, a lápiz! Usa colores para darle forma y
buen aspecto.
3.- Obtener un espacio para la página web en algún "Servidor", ya sea de pago o gratuito.
4.- Crear una "carpeta" en el disco duro, donde guardar los archivos de la nueva página
web.
5.- "Obtener" un programa de diseño web. (Ejemplo, Dreamweaver, o Html-Kit).
6.- "Instalar" el programa de diseño y "configurar" el sitio web en él.
7.- "Crear" una página web muy muy simple, para comprobar que el espacio web funciona.
8.- Comenzar el diseño de nuestra página web en nuestro ordenador.
9.- Actualizar nuestra página web (subirla al servidor)
10.- Mejorar nuestra página añadiendo foros, libro de visitas, etc.
11.- Ir pensando en comprar un dominio propio (unos 14 a 20 dólares al año).
12.- Promocionar la página web con directorios, etc.
13.- Buscar algún medio para obtener beneficio económico, si nos hace falta para...
14.- Ampliar nuestros conocimientos de código HTML, CSS, Php, Javascript, etc.
I.3. ¿Qué es una página web?
Pues 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.
II. CODIGO HTML
II.1. ¿Qué es Html?
Html es el lenguaje con el que al escribir etiquetas creamos páginas web. Las páginas se
visualizan por medio de un navegador (Internet Explorer, Netscape, Mozilla Firefox...) Con
Html puedes crear tablas, colocar imágenes, reproducir audio y/o video, etc.
El Html no es el único lenguaje que existe, es simplemente el básico, ya que los demás
lenguajes como Php, Asp, Javascript, y otros... también requieren de algunos códigos de
Html para poder funcionar.
Debido a que hay distintos navegadores, a veces se pueden omitir o agregar códigos para
que otros navegadores puedan también visualizar una página. Tal vez te estarás
preguntando ¿Qué extensión es para lo archivos HTML?, bueno pues pueden ser dos tipos
.htm y .html, cualquiera de las dos extensiones nos sirven, ya será su decisión cual poner.
II.2. Estructura y etiquetas
Como hemos mencionado, el Html es un lenguaje (de programación) que contiene

etiquetas, las cuales nos permiten configurar nuestra web. Las etiquetas se escriben entre
< > y (la mayoría) tienen la etiqueta de cierre < / >, que es la misma etiqueta solo que con
la barra / después de <. Lo que está entre las dos etiquetas recibe el efecto.
Toda página web hecha con Html, por complicada que parezca, se divide en dos partes
bien diferentes a las que llamaremos Cabecera (HEAD) y Cuerpo (BODY).
Además, todas las páginas web empiezan con la palabra mágica (o etiqueta) <html> y
terminan con la etiqueta </html>. Cada página web además, solo tiene una sola cabecera
y un solo cuerpo. Dejamos los dobles cuerpos y dobles cabezas para la mitología, ok?
Para tener una idea, esto sería una página web con todas las de la Ley, eso sí, vacía.
<html>
<head>
</head>
<body>
</body>
</html>
Buscando un símil, podríamos decir que todo el código va metido en un armario llamado
html y que a su vez tiene dos compartimentos separados, uno llamado head y otro
llamado body.
El contenido correspondiente a la cabecera (head) tendrá que ir siempre entre la etiqueta

<head> que indica inicio de la cabecera, y la etiqueta </head> que indica el fin de la
cabecera. Estas dos etiquetas se diferencian por la barra que tiene delante la que indica
fin: /.
La que no tiene la barra siempre indica que a partir de ahí el código pertenece a esa
etiqueta (head, body o lo que sea), mientras que la que sí lleva la barra indica siempre que
el código de esa parte ha terminado.
Lo mismo ocurre con el Cuerpo (body), cuyo contenido ha de estar siempre entre la
etiqueta <body> que indica comienzo del Cuerpo, y la etiqueta </body> que indica su final.
¿Para qué una etiqueta de cierre? bueno es para limitar nuestra etiqueta, o sea, como no
queremos que todo este subrayado (por ejemplo) donde ya no queremos que sea así
escribimos el cierre. La etiqueta <u> y su etiqueta de cierre, </u>, indica subrayar un texto.
Ejemplo:
<u> Texto subrayado </u> Texto Normal, el resultado es:
Texto subrayado Texto Normal
Con esto queda claro que la barra "/" indica siempre final de una parte, importante
elemento para q no nos traiga problemas en el siguiente código q escribamos a
continuación, ya q si una etiqueta no se cierra correctamente, podría incluir elementos que
no son parte de su código y entonces nuestra página se vería afectada.
Ilustración de Estructura:
Nota: Existen cosillas que solo podremos colocar dentro del encabezado (head) y otras
cosas que solo funcionarán dentro del cuerpo (body), pero esas cosillas las iremos viendo
conforme avancemos.
A continuación muestro debajo el código de una página web vacía, pero esta ves con
algunas cosillas más. Este código es el que tiene una página de esas que creas con
FrontPage, Dreamweaver, Html-Kit o programas por el estilo, nada más de empezar, es
decir, cuando aún no has metido código alguno en ella.
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<body bgcolor="#FFFFFF">
</body>
</html>
Vemos en este código las palabras mágicas comentadas antes, html, head, body y sus
correspondientes cierres con la barra "/". A estas palabras encerradas con los símbolos <
y > recuerden, las llamaremos etiquetas.
Aparecen algunas cosas nuevas, pero las veremos con detenimiento más adelante. Con
esto que saben hasta ahora, ya pueden mirar el código Html de cualquier página web e
identificar dónde empieza su código html, dónde termina, y dónde empiezan y acaban la
cabecera y el body.
II.3. Mis primeras páginas
Ya tenemos los conceptos para empezar a crear nuestra primera página. Ahora vamos a
crear una página con texto en negritas y con espacio de una línea. La etiqueta <b> indica
texto en negrita, y la etiqueta <p> indica párrafo y salto de línea (deja una línea de
separación).
El código sería el siguiente:
<html>
<head>
<title>Música</title>
</head>
<body>
<p><b>Bienvenido,</b></p>
<p>Estas en la mejor página.</p>
<p>La mejor música solo aquí.</p>
</body>
</html>
Copiemos y peguemos este código en el editor y guardémoslo con un nombre con

extensión .htm - .html (pag.html, por ejemplo).
Nota: Se recomienda no usar espacios, mayúsculas o caracteres especiales (# $ % °) en el

nombre de tu archivo, para evitar problemas de lectura con el navegador.
Podrías utilizar guiones ( - ) o guiones bajos ( _ ) para reemplazar a los espacios y nombrar
a tu archivo algo así: pagina_1.html
Ya tenemos una sencilla página creada con texto en negritas y con espacios. Ahora vemos
otro ejemplo:
Mi_2da_pagina.htm
<HTML>
<HEAD>
<TITLE>Mi segunda pagina web </TITLE>
</HEAD>
<BODY>
<H1 align="center" >Mi Segunda pagina web </H1>
<HR>
<P>Esto que ves tan sencillo es una verdadera página web, aunque le falta el contenido,
pero calma, todo llegará</P>
</BODY>
</HTML>
II.4. La explicación
Si nos fijamos en la página que vemos con el explorador solo se ve parte de lo que hemos
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
recordar que 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 se fijan 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. Fijémonos 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>. Él contenido de esta parte no siempre es
visible, y si lo es nunca se muestra en la página en si. Contiene por ejemplo el título que se
ve en la ventana del explorador, arriba a la izquierda. La cabecera queda por tanto:
<HEAD>
<TITLE>Mi segunda página web</TITLE>
</HEAD>
Puede contener muchas otras cosas, pero eso lo dejamos para más adelante.
II.5. 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 segunda 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 que ves tan sencillo es una verdadera página web, aunque le falta el contenido,
pero calma, todo llegará</P>
Para empezar no está mal, no es así?, por supuesto existen muchas más etiquetas con
misiones diferentes a la de mostrar texto, pero eso lo iremos viendo poquito a poco.
Nota: La página principal de tu sitio, o sea la primera página que aparece, debemos
nombrarla index, seguida de un punto y el tipo d extensión (en este caso .htm o .html),
así: index.html o index.htm
II.6. Resumiendo la 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>
III. TIPO DE DOCUMENTO

Aunque he dicho antes que la primera etiqueta con la que ha de empezar el código de una
página web debía ser la etiqueta <html>, realmente la primera línea, antes de esa
etiqueta, debe ser la de definición del tipo de documento.
Lo dicho sigue siendo cierto, pues la línea de la que hablo ahora no es código Html sino
solo un modo de indicar al navegador qué tipo de documento le estamos presentando.
Mediante esa línea por tanto, podemos indicar al navegador que lo que contiene el archivo
que estamos creando es código Html y qué tipo de Html concretamente, pues hay varias
formas de escribirlo en función de la versión de Html que vayamos a usar al escribir el
código.
<!DOCTYPE html>
<html>
<head>
</head>
<body>
</body>
</html>
Ejemplos de Tipos de Documentos:
<!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 desaconsejable
<!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
Nota: El HTML 4.0 considera desaconsejables aquellos elementos que, aún siendo
soportados, han sido sustituidos por otros más potentes y, por ello, es posible que sean
eliminados del estándar HTML en el futuro.
<!DOCTYPE html>
Html5, la última versión de Html por el momento (es bien corta su definición).
Anteriormente, para otras versiones de Html, la línea para definir el tipo de documento era
más larga y liosa, como puedes ver en los ejemplos anteriores pero ahora en Html5 es así
de cortica.
De modo que, una página web vacía, pero con el tipo de documento ya declarado
correctamente, sería así, y si es una versión anterior escoger cualquiera de los ejemplos
vistos arriba según corresponda:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
</body>
</html>
IV. 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 sí 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
IV.1. Titulo o Title
Como he mencionado antes, hay una serie de elementos que no se ven directamente en el
contenido de las páginas, y el title o título definido en la cabecera, es uno de estos y,
además, es importantísimo.
Con las etiquetas <title> y </title> se define el título de cada una de las páginas de una
web. No de la web completa, sino de cada página del sitio web. Por ejemplo, si tienes una
web que habla de cocina, tendrá dentro, una página que hable de una sopa, otra de tarta
de fresa, etc. Pues cada una de esas páginas debe tener un título que represente a esa
página, no uno genérico de la web, sino un <title> concreto para cada una de sus páginas.
Fíjense que tenemos una etiqueta para indicar que empieza el título y otra para indicar que
el título ha terminado, <title> y </title>, ok?
La línea completa de un código de página sería por ejemplo este:
<title>Título de esta página</title>
Quedando el código completo de nuestro ejemplo de este modo:
<!DOCTYPE html>
<html lang="es">
<head>
</head>
<body>
</body>
</html>
Lo que pongamos entre esas etiquetas <title> será lo que va a aparecer en la barrita azul
que hay en la parte superior de los navegadores, pero no aparece dentro de la ventana del
navegador, solo en esa barrita de arriba. Sirven no solo para indicar al visitante qué va a
encontrar en esa página, sino también a los buscadores para saber de qué hablas en esa
página.
Es muy muy importante que el título de cada una de las páginas de tu web sea distinto
de unas a otras. Como tengas dos titles exactamente iguales en varias de las páginas de
tu sitio web, los buscadores (por ejemplo Google) creerán que tienes dos páginas idénticas
(que una es copia de la otra) de modo que solo hará caso a una de ellas, solo indexará
una de las dos. Cuida que todas sean distintas para aumentar la cantidad de páginas que
los buscadores conocen de tu web y conseguir así aumentar las visitas de tu web.
Se recomienda, además de no repetirse en las distintas páginas de tu web, que el

contenido del title no tenga más de 65 letras o caracteres ni más de 15 palabras.
Aprovecha para incluir en los títulos palabras clave de esa página, es decir, algunas de
aquellas palabras por las que crees que podrías ser encontrado si alguien está interesado
en encontrar una página como esa. ¿Qué escribiría un usuario en Google para
encontrarla?. Pues esas son tus palabras clave para esa página concreta.
Nota: Además, no se pueden colocar dos etiquetas title dentro de la cabecera de una
misma página, tan solo una por página.
IV.2. Meta Name
Además del título de la página, uno de los elementos que se pueden incluir aquí es el
META. Entre otras cosas, sirven para indicar propiedades de la página como pueda ser el
nombre de su autor. Por ejemplo,
<meta name="Description" content="descripción de la página">
<META NAME="GENERATOR" CONTENT="Mozilla/4.03 [es] (Win95; I) [Netscape]">
Esto 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 se ve 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.
Actualmente los buscadores (incluido Google) solo hacen caso de las meta etiquetas title
y description. Recordar que el contenido de estas dos etiquetas ha de ser diferente en
cada una de las páginas de tu web, no olvidemos pues es un error muy común, incluso en
página de cierta importancia. Se recomienda que el contenido dentro de la meta etiqueta
description no tenga más de 150 caracteres ni más de 30 palabras. Recordar que es una
descripción, no una ristra de palabras sin sentido. No colocar dos líneas de description
dentro de la cabecera de una misma página, ok? Recordar, igual que con title, que se
coloca solamente un description.
Estas son las propiedades más comunes:
Name Content
AUTHOR Autor de la página.
Palabras que permite clasificar la página dentro de un buscador
CLASSIFICATION
jerárquico (como Yahoo).
Palabras clave por las que encontrarán la página en los buscadores.
KEYWORDS
Google no le hace mucho caso.
GENERATOR Herramienta utilizada para hacer la página.
DESCRIPTION Descripción del contenido de la página. Google le hace algún caso.
IV.3. 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-EQUIV, el resto es igual.
Cuando el contenido conste de más de varios valores, estos se separan con (;). 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 .
IV.4. Tipo de Codificación (META)
Es posible que al escribir el título de tu web del modo que he enseñado antes, veamos que
aparecen caracteres extraños en esa barra superior del navegador. Sobre todo al usar
acentos o "eñes". ¿Por qué ocurre esto? ¿Cómo lo evitamos?
¿Imaginas la cantidad de caracteres extraños que existen? Cosas en hebreo, en chino, o

sino las letras rusas esas tan raras, jeje. Para no volver locos a los navegadores tenemos
que indicarles qué tipo de codificación vamos a usar en nuestras páginas web. Por
ejemplo, para escribir en español o castellano y evitar que aparezcan símbolos raros al
escribir los acentos, tenemos que avisar que estamos tratando de escribir en ese idioma.
Para que se muestren caracteres chinos y no una ristra de cosas sin sentido, tendríamos
que avisarle igualmente al navegador que mostrará los caracteres según esa codificación.
Pues bien, para que se muestren correctamente las tildes o acentos que escribamos en el
contenido de nuestras páginas, tenemos que añadir una línea que indique ese tipo de
codificación. Como eso es algo que no se ve directamente en el navegador, sino que es un
tipo de definición, está claro que esa línea de código ha de ir en la cabecera.
La línea para que los caracteres en castellano aparezcan bien en los navegadores cuando
se escribe código Html5 sería esta:
<meta charset="utf-8" />

Esa línea ha de ir en todas las páginas de nuestras webs, o al menos, en las que no
hablemos en chino. Puede ser que en algunas versiones de navegadores ya no haga falta
esta codificación, pues ya lo traen implícito y lo pueden reconocer sin problemas.
Veremos que esta etiqueta empieza por la palabra meta y que no tiene etiqueta de cierre
(no se pone </meta> al final de la línea). Es un caso un poco especial pues normalmente
casi siempre hay una etiqueta de cierre tras una etiqueta de apertura. En el caso de que
una etiqueta no use la correspondiente etiqueta de cierre, se coloca en su lugar una barra
al final de la línea de apertura. En este caso la puedes ver al final del código que he
colocado antes.
Ahora que tenemos claro que el código Html va a tener una codificiación del tipo UTF-8,
hemos de asegurarnos de que cada vez que guardamos un archivo de código, ha de
guardarse como tal, como UTF-8. Si lo guardamos sin especificar esto y por defecto se
guardara con otra codificación, podríamos tener los problemas comentados atrás, como
que los acentos aparezcan raros, etc.
Y este es el código que llevamos hecho por el momento en este tutorial y que conocemos
ya perfectamente, línea a línea:
<!DOCTYPE html>
<html lang="es">
<head>
</head>
<body>
</body>
</html>
Nota: Antes de seguir añadiendo líneas y líneas de código Html a nuestros ejemplos,
recordar que la línea que especifica el charset="utf-8" tiene que ser la primera línea que
haya justo después de <head>, pq en caso contrario, podría no ser leída por los
navegadores. (Debe estar dentro de los primeros 512 caracteres del archivo).
V. El CUERPO
El cuerpo es el contenido de la página propiamente dicho, o sea, lo que se ve, en el es
donde colocarán prácticamente todos los elementos que vamos a ir viendo por este
manual. Los atributos que admite esta etiqueta <BODY>:
BACKGROUND Coloca una imagen como fondo de la página.

BGCOLOR Define el color de fondo de la página.
Cuando es igual a FIXED el gráfico definido como fondo de la página
BGPROPERTIES
permanecerá inmóvil aunque utilicemos las barras de desplazamiento.
TEXT Color del texto.
LINK Color de un enlace no visitado (por defecto azul).
VLINK Color de un enlace ya visitado (por defecto púrpura).
Color que toma un enlace mientras lo estamos pulsando (por defecto
ALINK
rojo).
LEFTMARGIN y Número de pixels que dejará de margen entre el borde de la ventana y
TOPMARGIN el contenido de la página.
MARGINWIDTH
Equivalentes a los anteriores, pero éstos funcionan en Netscape.
MARGINHEIGHT
Nota: 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.
V.1. Formato a nivel de bloques
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.
V.1.1. Párrafos
Con lo explicado antes seguimos teniendo una página vacía. Explicamos ahora algunos
elementos que podemos usar en nuestras páginas web, y empezaremos por los párrafos.
Lo más básico que podemos insertar en nuestra nueva página aún en blanco, son
palabras. Vamos a ver como se pone en código Html un párrafo.
En primer lugar decir que todos los elementos (o casi todos los elementos) de una web, irá
dentro del body que ya conocen, es decir, entre <body> y </body>.
Existen otras cosas que no son "visibles" y esas irán en el head principalmente. Las
líneas que vimos para especificar el tipo de codificación no es algo visible, mientras un
párrafo que intenta transmitir algo a los visitantes, obviamente si que es visible.
Para escribir un párrafo, lo haremos dentro de la zona visible (el body) encerrando lo que
queremos escribir entre los símbolos <p> y </p> que son las etiquetas para escribir
párrafos. Como ves, la primera etiqueta indica comienzo de párrafo (de ahí la "p" de
párrafo) y la segunda situada al final indica el final del párrafo, y lleva por tanto la barra "/".
Por ejemplo, si queremos que en nuestra web aparezca el siguiente párrafo:
Hola amigos, esta es mi nueva Web
Tendremos que escribir, entre <body> y </body> la siguiente línea:
<p>Hola amigos, esta es mi nueva Web</p>  entonces quedaría asi:
<!DOCTYPE html>
<html lang="es">
<head>
<title>Mi Nueva Web</title>
</head>
<body>
<p>Hola amigos, esta es mi nueva Web</p>
</body>
</html>
Como vemos, en este ejemplo se ha puesto ya el título a la página. En concreto se le ha
llamado "Mi Nueva Web".
Si ahora queremos añadir otro párrafo, simplemente colocamos otra línea más antes o
después de la escrita antes, según quieras que la nueva aparezca encima o debajo del
párrafo antiguo.
Por ejemplo, si quiero que antes del párrafo "Hola amigos...." aparezca la palabra
"BIENVENIDOS" el código HTML debería quedar como sigue:
<!DOCTYPE html>
<html lang="es">
<head>
</head>
<body>
<p>BIENVENIDOS!</p>
</body>
</html>
Aunque a veces funcione sin etiqueta de cierre, no olvides nunca indicar el final del párrafo
con </p>. Te evitará problemas más adelante.
V.1.2. Estilos de párrafos
Resulta común querer hacer espacios entre párrafos. Antes vimos que la etiqueta <p>
dejaba una línea en blanco y después se escribía el texto, pero esta no es la única etiqueta
que puede hacer esto.
Existe también la etiqueta <br> que deja una línea de espacio. Podemos repetir la etiqueta
para dejar dos líneas de espacio.
Ejemplo:
Texto 1<br> Texto 2<br><br>Texto3
Resultado:
Texto 1
Texto 2
Texto 3
También podemos colocar una línea para separar, con la etiqueta <hr> y podemos ponerle
el tamaño con la propiedad size, el ancho con width y el color con color, ejemplo:
<hr size="3" color="purple" width="75%">
Nota: Las etiquetas <br> y <hr> son unas de las etiquetas que no tienen cierre, así que no
es necesario poner la que sería etiqueta de cierre </br> o </hr>.
A continuación muestro una Tabla con algunos de los estilos que pueden tener los párrafos
en HTML:
Estos estilos o formatos actúan a nivel de párrafo:
Etiqueta Significado Resultado

Soy un párrafo: fíjate en los
Sirve para delimitar un párrafo. Inserta una
<P> espacios de antes y de
línea en blanco antes del texto.
después.
Alineación izquierda
Texto centrado
Justificar el texto del párrafo a la izquierda
Alineación derecha
(ALIGN=LEFT), derecha (RIGHT), al centro
<p ALIGN=x> ... </p> Texto justificado o sea,
(CENTER) o a ambos márgenes (JUSTIFY
alineado a ambos lados sin
html4 )
dejar, escalones en el
margen derecho.
<CENTER> ... Permite centrar todo el bloque de texto Alineación por defecto
</CENTER> encerrado. Texto centrado
Representa el texto encerrado en ella con un
<PRE WIDTH=x> ... tipo de letra de paso fijo. El parámetro
Estoy en paso fijo
</PRE> WIDTH especifica el número máximo de
caracteres en una línea.
Mete sangrías de párrafo tanto a derecha Si quieres ver el texto
<BLOCKQUOTE> ...
como a izquierda. Suele usarse como indentado por ambos
</BLOCKQUOTE>
tabulador márgenes usa el Blockquote.
V.2. 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.
Usando esto en los ejemplos:
......
<body>
<h1>BIENVENIDOS!</h1>
.......
Si ahora guardamos el archivo del ejemplo y lo abrimos como página web, se mostrará
este otro resultado.
La apariencia es sin duda alguna distinta, como si de un titular de periódico se tratara.

Existen otras etiquetas de títulos en Html, h2, h3, h4, h5.... y hasta el 6, aunque no creo
que se pase del h2 o h3 normalmente. El aspecto de estos otros tipos de titular es menos
cantoso, menos destacado, conforme mayor es el numerito que sigue a la letra h.
Nota: Como estándar se usa h1 para titulares principales y h2 para titulares secundarios.
Si se diera el caso también los h3 para titulares menores, y así sucesivamente si aparecen
mas elementos de menor jerarquía.
V.3. Resaltar Textos
Con el tag <p> ya sabemos poner un texto simple. Pero quizás en algún momento
queramos escribir texto en negrita, o subrayado, o cursiva, etc. ¿verdad?. Pues también
para esos estilos existe un "tag" o una etiqueta determinada.
V.3.1. Textos en Negrita
Si encerramos un texto entre <b> y </b> éste aparecerá en negrita. El tag <b> representa
a la propiedad "bold" que significa negrita.
Podemos aplicar a la vez los tags <p>, <b> y cualquiera de los que se explican abajo.
Un ejemplo de un párrafo simple con una palabra en negrita, la palabra "negrita":
<p>Este párrafo es normal y esta palabra va en <b>negrita</b>, lo ves? </p>
V.3.2. Textos en Cursiva
Si encerramos un texto entre <i> y </i> éste aparecerá en cursiva. El tag <i> representa a
la propiedad cursiva. Al igual que "b" representa "bold", "i" representa "italic" que significa
cursiva.
Podemos aplicar a la vez los tags <p>, <b>, <i> y cualquiera de los que se explican abajo.
Un ejemplo de un párrafo simple con dos palabras en cursiva, las palabras "cursiva" y
"ves":
<p>Este párrafo es normal y esta palabra va en <i>cursiva</i>, lo <i>ves</i>? </p>
V.3.3. Textos Subrayados
Si encerramos un texto entre <u> y </u> éste aparecerá subrayados. El tag <u>
representa a la propiedad subrayado. Podemos aplicar a la vez los tags <p>, <b>, <i> y
<u>, entre otros.
Un ejemplo de un párrafo simple con un trozo subrayado:
<p>Este párrafo <u>tiene un trozo subrayado</u> ¿Te gusta? </p>

V.3.4. Textos con Varios Estilos a la Vez
Como he dicho antes, podemos combinar todos estos estilos HTML. Eso sí, debemos
respetar una cosilla. A ver... "no podemos cerrar una etiqueta fuera de la etiqueta que la
contiene". Para explicar esto vamos a ver un ejemplo...
Miren esta línea:
<p>Hola amigos y amigas</p>
Todo eso es un párrafo, pues está encerrado entre <p> y </p>. Ahora vamos a poner todo
en negrita:
<p><b>Hola amigos y amigas</b></p>
Ahora todo está en negrita. Esto está bien, pues hemos cerrado la etiqueta "b" dentro de la
que la contiene, es decir, dentro de la etiqueta "p", de párrafo.
Vamos a ver un ejemplo mal hecho:
<p><b>Hola amigos y amigas</p></b>
Esta línea está mal, pues se ha cerrado la etiqueta "b" fuera (detrás) de la etiqueta que la
contiene, es decir, fuera de "p".
Vamos a ver un tercer ejemplo mal hecho:
<p>Este <u>es un <b>ejemplo de etiquetas</u></b> en html</p>
Esa línea está mal hecha, pues hemos cerrado "b" fuera de "u". Como "b" empieza dentro
de "u", debe cerrarse también dentro de "u".
El mismo ejemplo pero bien hecho sería:
<p>Este <u>es un <b>ejemplo de etiquetas</b></u> en html</p>
Espero que se hayan aclarado con esto.
Además quiero que sepan que las etiquetas pueden escribirse en mayúsculas o
minúsculas, da lo mismo.
Otro elemento importante es que todas las etiquetas deben cerrarse siempre. No vale abrir
una etiqueta, por ejemplo <p> y no cerrarla al final con </p>.
Es muy posible que a pesar de no cerrarla, parezca que funciona, pero se recomienda
cerrarlas siempre para evitar problemas a la gente que le visite con otros navegadores
distintos al vuestro.
Nota: También se recomienda, siempre escribir las etiquetas en minúscula.
A continuación una tabla donde se muestran la mayoría de las etiquetas que pueden
afectarme o modificarme un texto.
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

Soy un texto negro como el
<B> ... </B> Pone el texto en negrita.
tizón
<I> ... </I> Representa el texto en cursiva. Estoy ladeado
Como soy muy importante
<U> ... </U> Para subrayar algo.
estoy subrayado
A mí, en cambio, nadie me
Para tachar.
<S> ... </S> quiere
Permite representar el texto en un tipo de
<TT> ... </TT> No soy variable
letra de paso fijo.
2
<SUP> ... </SUP> Letra superíndice. E=mc
<SUB> ... </SUB> Letra subíndice. ai,j=bi,j+1
Incrementa el tamaño del tipo de letra. Soy GRANDE

<BIG> ... </BIG>
<SMALL> ...
Disminuye el tamaño del tipo de letra. Creí ver un lindo gatito
</SMALL>
V.3.5. Estilos de texto
Son formatos predefinidos aplicables a caracteres individuales (y a grupos). 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> ...
Fuerte, negrita. Hay cosas importantes.
</STRONG>
<EM> ... </EM> Enfasis. Para poner énfasis
El usuario debe teclear Multivac
<KBD> ... </KBD> Teclado
es el mejor.
La variable x, definida
<VAR> ... </VAR> Representar variables de un código.
anteriormente...
Para representar una serie de
<SAMP> ... </SAMP> Estoy en un literal
caracteres literalmente.
<ABBR> ...
Abreviaturas. La WWW usa el protocolo http
</ABBR>
V.3.6. 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 linea
<HR> Barra horizontal.
 Comentarios. No se ve el contenido
V.4. Alineación
Ya sabemos como dejar espacio, pero nos falta algo que es la alineación. Si yo quisiera
que después de dejar el espacio en blanco se escriba el texto al centro, o a la derecha,
entonces me tocaría escoger una etiqueta que puede ayudarnos con eso.
Para esto tenemos dos etiquetas <p>, que además de dejar espacio en blanco, puede
alinear o <div>. Usando alguna de estas dos etiquetas y agregando un atributo llamado
align, seguido del signo = y después la posición, escrita en inglés (left, right, center)
entre comillas ( " ).
Veamos un ejemplo para entenderlo mejor:
<p align="center">Texto Centrado</p>,
resultado:
Texto Centrado
También podemos hacerlo con la otra etiqueta, <div>:

<div align="center">Texto centrado</div>,
resultado:
Texto Centrado
Consejo: No olvides de poner las comillas ( " ) al valor del atributo, es decir, si alineas un
texto al centro pon entre comillas center. Esto es porque algunos navegadores no
reconocen el valor, aunque en la mayoría de los casos no es necesario.
Nota: No es necesario agregar el valor left a un atributo de alineación, o sea, nunca

deberías poner por ejemplo: <div align="left">, debido a que predeterminadamente todo se
alinea a la izquierda sin tener que indicarlo.
V.5. Los Comentarios
Para insertar un comentario solo necesitamos encerrarlo entre estos dos símbolos o
etiquetas:
 ( y con esto se termina el comentario)
Por ejemplo, esto que sigue es un comentario:

Otro ejemplo es este, donde vemos que podemos meter más guiones por si queremos
dejarlo más visible:

pero como mínimo debe tener los dos guiones tanto al principio como al final, además del
resto de la etiqueta, .
Los comentarios no aparecen en la página cuando la visita alguien. En realidad no hacen

nada de nada de nada. Solo sirven para que el autor de la web, cuando mire su código,
sepa qué es cada trozo de código.
Es decir, podemos insertar comentarios en alguna parte del código Html de nuestra página
para saber qué hace ese trozo, para dejarnos notas a nosotros mismos. De ese modo, si
pasado el tiempo revisamos la página, es posible que ni nos acordemos de qué es ese
trozo de código tan raro, pero al haber puesto esos comentarios podremos acordarnos
fácilmente.
Podemos poner en una página un comentario para recordar que la parte <head> o
cabecera es donde debemos insertar la "metatags". El día que las insertemos, podemos
quitarlo, pero mientras, nos recordará dónde hay que ponerlas. El código sería el siguiente:
<!DOCTYPE html>
<html lang="es">
<head>

</head>
<body>
<p>BIENVENIDOS!</p>
</body>
</html>
En Dreamweaver o en algunos editores de texto plano es muy fácil identificar esos

comentarios, pues al ver el código de cualquier web con él, los comentarios aparecen en
gris claro.
Otra utilidad que tienen los comentarios es la siguiente. Si deseas anular algún trozo de tu
web, pero no quieres borrar su código, pues no sabes si más adelante te hará falta, o
simplemente, porque quieres ver que tal se ve la web sin cierto elemento, solo tienes que
encerrar todo ese trozo de código entre los símbolos de comentario y ese trozo quedará
anulado, pero no lo borrarás y lo puedes activar (descomentar) después.
Por ejemplo, para evitar que en el ejemplo de aquí arriba (de la ventana de fondo blanco)
aparezca la frase "Bienvenidos", bastaría con poner los símbolos de comentario al inicio y
final de esa línea, así:


<!DOCTYPE html>
<html lang="es">
<head>
</head>
<body>

</body>
</html>
V.6. Formateo de caracteres
Cuando hablamos del formato en un tema anterior adelantábamos que podríamos 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.
V.6.1. Atributos del texto
En este capítulo aprenderemos a darle color a un texto, modificar el tamaño y el tipo de

fuente. La etiqueta que debemos usar es <font> (y su etiqueta de cierre) con los atributos
color, face (tipo de letra) y size (tamaño), sin embargo en próximas versiones de Html
puede ser que esta etiqueta quede sin funcionar, así que es mejor estudiar después de
este manual, el de CSS (mejor conocidas como hojas de estilo cascada), pero por el
momento usaremos esta etiqueta.
V.6.2. Diferentes atributos de esta etiqueta <Font>:
Face: Indica el tipo de letra que se le quiere dar al texto. Hay muchos tipos de fuentes,
entre las más conocidas se encuentran Times New Roman, Arial y Verdana.
A veces, es recomendable poner varias fuentes separadas por comas (,) debido a que
cada navegador dispone de otros tipos de fuentes.
Esto se indica después del signo = y entre comillas (").
Ejemplo:
<font face="Verdana, Comic Sans Ms, Arial">Fuentes Arial - Verdana - Comic Sans
MS</font>
Resultado:
Fuentes Arial - Verdana - Comic Sans MS
Así, el navegador comprobará que está disponible la primera fuente, sino se va a la

segunda, y así… hasta encontrar una fuente que esté disponible, y si ya no hay fuentes
disponibles para este navegador, pone la predeterminada (que es Times New Roman).
Size: Este atributo indica el tamaño del texto. Los valores pueden ser del 1 al 7 y se
escriben como cualquier valor, después del signo = y entre comillas (").
Ejemplo:
<font size="5">Texto con tamaño 5</font>
Resultado:
Texto con tamaño 5
Color: Este atributo indica el color del texto. Hay dos formas de indicar el color que
deseamos poner:
1. Escribiendo el nombre del color que queremos, pero en inglés, si queremos que algo
esté en rojo el valor del atributo color sería red.
2. Indicando el valor de RGB (Red Green Blue - Rojo Verde Azul) con numeración
hexadecimal (del 0 al 9 y de la A a la F) después del signo de número ( # ). Este suele ser
un poco más complicado, pero si queremos indicar colores más exactos debemos usar
este método.
Un valor se conseguiría poniendo los valores RRGGBB. Ejemplo:
<font color="#FF00FF"> Texto rosa</font>
Resultado:
Texto rosa
También podríamos incluir estos 3 atributos:
<font color="#CC0000" size="4" face="Comic Sans MS">Texto con todos los

atributos</font>
Resultado:
Texto con todos los atributos
V.6.3. 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
V.6.4. 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>
V.6.5. 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>
V.6.6. 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 usásemos 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
V.6.7. 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
< <
> >
& &
" "
V.6.8. Atributos de <BODY> FIN Primera Clase ITB

Hay algunos atributos que se añaden a <body> (y también a tablas, filas, celdas...) para
cambiar el color de fondo, poner una imagen como fondo, hacer más grueso el margen,
definir el color de un enlace (mejor conocido como link), definir un color para todo el texto
de la página. Además de estos hay mucho más, pero por el momento solo usaremos
estos.
Los atributos son:
 bgcolor: Sirve para poner un color fijo de la página. Como ya indicamos en el

capítulo anterior se indica con el nombre del color (en inglés) o el valor RGB. <body
bgcolor="#00CCFF">
 background: Coloca una imagen de fondo de la página, esta se repite varias veces
hasta llenar toda la página. Pueden ser fondos con extensión JPG, GIF, BMP o
PNG, solo escribimos el nombre de la imagen y su extensión.
<body background="fondo.jpg">
Nota: Cuando ponemos un fondo en una página, también podemos indicarle otro
atributo, que es el de fijar el fondo (este efecto solo funciona si hay más espacio y
tenemos que usar las barras de desplazamiento).
<body background="fondo.jpg" bgproperties="fixed">
 text: Indica el color para todo el texto de la página, que por defecto es el negro
(black - #000000 ). Además, podemos indicar el color de los enlaces (links) para
diferenciar del resto del texto, por defecto vienen subrayados (esto se puede
mejorar con css).
 link: El color del link normal, es decir, uno que no ha sido visitado (que no se ha
hecho click sobre él). Por defecto es el azul ( #FF0000 ).
 vlink: Es el color de un link visitado (que se ha hecho click).
Por defecto es el morado ( #800080 ).
 alink: Indica el color de un enlace activo, quiere decir, cuando un enlace está
presionado (este casi no se nota). Por defecto es el rojo ( #FF0000 ).
También podemos indicar el margen de la página, quiere decir, desde donde se va a

escribir, los valores deberán ser en pixeles y son 4 propiedades:
 leftmargin: Indica el espacio de los lados de la página (derecha e izquierda).

 topmargin: Indica el espacio del borde superior e inferior.
 marginwidth: Es el equivalente a leftmargin.
 marginheight: Es el equivalente a topmargin.
<body leftmargin="2" topmargin="2" marginwidth="0" marginheight="1">
Importante: Las primeras dos propiedades (leftmargin y topmargin) son válidas solo
para Internet Explorer, y las otras dos (marginwidth y marginheight) son válidas para
Netscape.
Vamos a juntar todas estas propiedades:
<body background="../Images/backy.jpg" bgproperties="fixed" text="#000099"

link="#FF0000" vlink="#009900" alink="#009900" topmargin="8" leftmargin="4"
marginwidth="4" marginheight="8">
<h3>Texto normal</h3>
<a href="http://microsoft.com">Ejemplo de Link</a>
</body>
V.7. Enlaces web
V.7.1. 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, ó

 Externos a otra página.
Un enlace (o link) puede ser para ver otra página, descargar archivos o ir a otro sitio.
Los enlaces se pueden identificar si el texto es de otro color o al pasar el mouse se

produce un efecto (cambia de color, se subraya...).
También podemos enlazar una imagen, es decir, que una imagen nos sirva como enlace y
al presionar sobre esta nos lleve a otra página.
Para hacer un enlace se usa la etiqueta <a> (y la etiqueta de cierre), seguida de la

propiedad href, que su valor será el enlace.
V.7.2. La etiqueta <A>
La etiqueta <A></A> (<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.
Si ya has navegado un poco por internet, te habrás dado cuenta de que al pulsar enlaces
en ocasiones te aparece la página de destino en la misma ventana del navegador (internet
explorer, firefox o el que sea) y en otras ocasiones en una ventana nueva, aparte de la que
estabas mirando, no?
El atributo target es una manera de decirle al navegador en que ventana debe abrir esa
nueva página. Este atributo puede tomar los siguientes valores:
target="_top": Se usa esta opción cuando queremos que el archivo enlazado se muestre
en una pantalla completa de la ventana eliminando los frames o marcos si los hay. Esta
opción se utiliza solo cuando nuestra página web esté hecha con frames o marcos.
target="_parent": Con esta opción la página destino se muestra en marco anterior al

marco o frame en el que está el enlace. Pues no pasa nada, pues es también para usar
cuando tienes marcos y no va a ser el caso.
target="_self": Con esta tercera opción, la página de destino a la que apunta en vínculo se
mostrará en la misma ventana del navegador del visitante, es decir, no se abrirá en una
ventana aparte. Esta opción es la que se toma por defecto, la que se activa si no se
indica ninguna propiedad target y por tanto tampoco la usaremos
target="_blank": Esta es la que mas nos interesa. Con esta opción la página enlazada se
abrirá en una ventana nueva del navegador. Resulta útil cuando queremos enviar a las
visitas a una página externa, fuera de nuestra web. Así se mantendrá nuestra web abierta
en otra ventana y no perdemos esa visita, pues tiene nuestra página a mano. También la
puedes usar cuando quieres mostrar otra página de tu web, pero sin que el visitante pierda
de vista la página en la que estaba.
Resumiendo, si queremos que la página de destino se abra en otra ventana del navegador
usaremos target="_blank" y en caso contrario no colocamos esa propiedad target.
V.7.3. Tipos de Enlaces
Como dijimos anteriormente, existen varios tipos de enlaces:
• Internos: Nos llevan a otras partes dentro de la misma página.

• Locales: Son los enlaces que nos dirigen a otras páginas del mismo sitio.
• Remotos: Nos dirigen a otro sitio o a una página de otro sitio (sitio externo al nuestro).
• E-Mail: Como dice, envía un mensaje a un e-mail.
• Archivos: Sirven para descargar o ver archivos (exe, doc, pdf, mp3...).
Internos: Este tipo de enlaces nos manda a una parte de la página en la que estamos.
Normalmente, se usan cuando una página es muy grande y se necesita ir a una parte
específica. Esto se hace con la etiqueta <a>, la propiedad href, después el signo de
número ( # ) y el nombre que colocaremos en la parte donde queramos que vaya el
visitante.
Ejemplo:
<a href="#texto">Ir al texto</a> y en la parte donde queramos ir <a name="texto"></a>
Locales: Los sitios web están formados de páginas, que muestran diferentes contenidos.
Las propiedades de la etiqueta son las mismas que en los enlaces internos, pero sin el
signo de número (a menos que en la otra página queramos abrirla e ir a una parte
específica). Se tendría que escribir el nombre del archivo seguido de un punto y la
extensión. Entre la etiqueta se deberá escribir el texto que aparecerá.
Ejemplo:
<a href="1.html">Ir al ejemplo de Body</a>, resultado: Ir al ejemplo de Body.

Si hay páginas en otro directorio (o carpeta), deberemos poner el nombre de la carpeta,
después una barra ( / ) y la página.
Ejemplo:
<a href="Images/titulo.png">Ver logo del manual</a>
Resultado:
Ver logo del manual (esto sería un vinculo a la carpeta images y dentro de esta, la imagen
titulo.png)
Si tenemos un archivo (cualquier tipo) en una subcarpeta y queremos enlazar a una

imagen (o cualquier otro tipo de archivo) que está en la carpeta principal u otra subcarpeta,
deberíamos poner en la ruta dos puntos (..), seguida de la carpeta que contiene el archivo
y después el nombre del archivo.
Para enlazar desde indice.html a excavando.gif, pones
<a href="Images/excavando.gif">Enlace</a>
Para enlazar desde body.html a excavando.gif, pones
<a href="../Images/excavando.gif>Enlace</a>
Si existiría una subcarpeta dentro de otra subcarpeta, por ejemplo, dentro de la subcarpeta
Samples, una subcarpeta Archivos, dentro de esta hay un archivo, y enlazamos desde
body.html, ponemos dos puntos, una barra, dos puntos, otra barra y el nombre del archivo.
Ejemplo:
<a href="../../Archivos/imagen.gif>Imagen</a>
Para ir a otra página e ir a una parte en específico, pones el nombre de la página seguido
del signo de número y el nombre de la sección.
Ejemplo:
<a href="indice.html#Ind">Ir al indice</a>
Existe un atributo más, que al pasar el mouse por algún enlace, aparezca un texto.
El atributo es title y el valor es el texto que se quiera mostrar:
<a href="#" title="Texto del enlace">Enlace</a>
Resultado (pon el mouse sobre el texto):
Enlace
Remotos: Este tipo de enlaces son para acceder a páginas que están fuera de nuestros
sitios. Es igual que un enlace local, pero el URL (nombre del sitio) debe empezar por
http://.
Ejemplo:
<a href="http://microsoft.com">Microsoft</a>, resultado: Microsoft.
Pero también tiene 4 propiedades, junto con el atributo target para abrir de distintas
formas un enlace:
 blank: Esta propiedad hace que la ventana se abra en una página por aparte, una
ventana nueva.
 top: Se abre a pantalla completa, sin frames (páginas independientes, que veremos
en los últimos capítulos).
 self: Esta propiedad abre el enlace en la misma página en la que está, es la
propiedad por defecto.
 parent: El enlace se abre sobre su padre, si no hay un padre se abre en la misma
página.
E-mail: Estos enlaces nos dirigen a una dirección de mail. Se coloca el atributo mailto:
después del href, seguido del mail.
Ejemplo:
<a href="mailto:leoj90@gmail.com">leoj90@gmail.com</a>,
resultado: leoj90@gmail.com.
También se puede agregar el asunto y una copia para que se envíe a otro mail, con las
propiedades subject?= y &cc.
Ejemplo:
<a href="mailto:leoj90@gmail.com?subject=Informacion de
producto&ccinfo@microsoft.com">leoj90@gmail.com</a>
el resultado es el mismo aparentemente, pero pon el mouse sobre el siguiente enlace y ve

la barra de estado (abajo donde normalmente dice Listo):
leoj90@gmail.com
Importante: Este método no es muy común para enviar un e-mail, mas adelanta se detalla
más sobre esto.
Archivos: Este tipo de enlace se usa para ver o descargar un archivo. Si es ZIP o EXE, al
hacer click se muestra un cuadro de diálogo para ver o descargar, otros formatos, como de
audio y/o video (mp3, mpg, avi, wav, mov, wmv...) abren el programa predeterminado del
usuario para reproducirlo.
Para evitar esto, podrías poner un mensaje que diga "Haz click con el botón derecho del
mouse y selecciona 'Guardar destino como...' para descargar el archivo".
Vamos a ver cual es el código para descargar el Msn Plus! (por ejemplo):
<a href="http://download.msgplus.net/files/MsgPlus-361.exe">Descargar Msn Plus!</a>,

resultado: Descargar Msn Plus!
V.7.4. 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 usasr 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 miramos la URL de una página que es

http://www.espaciolatino.com/tutorhtml/tema6.html
Pues bien si en esta página se 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.
V.7.5. Anclas
Como dijimos antes, 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="1- 1ra_pag.html#ancla">Ancla en la página 1-1ra_pag.html </A>
Usando las anclas o anclajes puedes hacer que cuando las visitas pulsen sobre ese
enlace, la ventana del navegador corra hacia esa parte concreta de la misma página o
bien, pase a otra página distinta, pero no a su comienzo, sino a la parte media o a la parte
que tú desees de esa otra página.
Para verlo más claro aún, imagina que en una misma página de tu web hablas de películas
de acción, y luego, debajo, de películas de humor, y bajo ésta parte, de películas de
ciencia ficción. Si defines un ancla o un anclaje en cada uno de sus títulos puedes luego
colocar vínculos de modo que al pulsarlos se dirija justo a esa parte de la página.
Si defines un ancla al principio del contenido y colocas un enlace en la parte inferior

indicando "Ir al principio de la página", al pulsarlo se dirigirá automáticamente a la parte
superior, aún siendo la misma página.
Si queremos enviar a las visitas a la parte superior, lo normal es colocar el enlace en la
parte inferior (si el usuario está arriba, para que darle la opción de ir arriba si ya está allí,
no?).
Esto se puede hacer con por ejemplo esta línea de Html:
<a href="#arriba" title="Ir Arriba">Ir arriba</a>
Del mismo modo, podríamos colocar arriba de la página otro enlace que permitiera a las
visitas ir al parte inferior.
<a href="#abajo" title="Ir Abajo">Ir abajo</a>
Si en una página de tu web escribes mucho texto y tiene digamos 3 partes diferenciadas (3
títulos por ejemplo) podrías definir un ancla en cada uno de esos títulos, y luego colocar
un menú en la parte inferior, o en la parte superior, o en ambas, dando la opción a las
visitas a dirigirse, dentro de esa misma página, a la sección que deseen.
En ese caso colocarías al principio (o al final) ese menú, de este modo por ejemplo:
<a href="#titulouno" title="Ir al título uno">Ir al título uno</a>

<a href="#titulodos" title="Ir al título dos">Ir al título dos</a>
<a href="#titulotres" title="Ir al título tres">Ir al título tres</a>
Y ahora solo te faltaría colocar esas 3 anclas justo al lado de esos títulos, líneas de código
como ésta:
<h1>Título Uno</h1><a name="titulouno"></a>

<p>Este es el texto correspondiente al título uno, aunque debería ser más largo para que
se note el efecto.</p>
<h1>Título Dos</h1><a name="titulodos"></a>
<p>Este es el texto correspondiente al título dos, aunque debería ser más largo para que
<h1>Título Tres</h1><a name="titulotres"></a>
<p>Este es el texto correspondiente al título tres, aunque debería ser más largo para que
Si en lugar de querer enviar a las visitas a una parte concreta de esa misma página,
quieres enviarlas a una parte concreta de otra página de tu web, has de definir ese ancla
en la página y lugar que quieres elegir de destino, como en este ejemplo, pero en el enlace
has de colocar además del ancla, la ruta de esa otra página, tal y como aparece aquí
abajo:
<a href="pagina-de-destino.html#nombre-del-ancla">Enlace hacia el ancla</a>
Es decir, si en una página de tu web quieres colocar un enlace hacia el título dos que
hemos visto en el ejemplo de antes, si esa página que contiene los tres títulos se llama
titulares.html, entonces en la otra página tendrías que poner esta línea:
<a href="titulares.html#titulodos">Ir al título dos de la página titulares</a>

FIN 2da Clase ITB (Recordar el tema de los Url)
VI. El FORMATO LISTAS
Muchas veces queremos hacer una lista de nuestros productos, numerar capítulos...
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. Todo esto se puede hacer con distintos tipos
de listas:
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.
VI.1. Listas desordenadas
Para este tipo de listas se usa la etiqueta <ul> (y la etiqueta de cierre). UL proviene de las
palabras en inglés unorder list (lista desordenadas). Cada elemento se pone con la
etiqueta <li>, sin etiqueta de cierre, 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
Ejemplo:
<p>Países distribuidores</p>
<ul>
<li>México
<li>Estados Unidos
<li>Canadá
</ul>
</p>
Resultado:
Países distribuidores
• México
• Estados Unidos
• Canadá
También podemos cambiar el tipo de viñeta (el punto), hay tres tipos:
o circle
 square
• disc
Estos se pueden poner con el atributo type, ya sea en la etiqueta <ul> o <li>:
Ejemplo:
<ul type="square">
<li>México
<li type="circle">Estados Unidos
<li>Canadá
</ul>
Resultado:
 México
o Estados Unidos
 Canadá
A partir del HTML 3.2 la etiqueta <UL> admite estos parámetros:
Parámetro Significado Resultado

 Primer
elemento
Indica al navegador que debe representar la lista de la
COMPACT  Segundo
manera más compacta posible.
elemento
 Tipo disc
Indica al navegador el dibujo que precederá a cada o Tipo circle
TYPE="disc",
elemento de la lista. Para mayor flexibilidad se admite  Tipo square
"circle", "square"
también como parámetro de <LI>.
VI.2. Listas ordenadas
Se usa la etiqueta <OL>. OL proviene de la palabra en inglés 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
Como la otra lista, cada elemento se pone con <li>:
<p>Reglas</p>
<ol>
<li>No fumar
<li>No gritar
<li>Tener paciencia
</ol>
Resultado:
Reglas
1. No fumar
2. No gritar
3. Tener paciencia
Así como para las listas desordenadas se puede cambiar el tipo de viñeta, en listas
ordenadas se puede cambiar el tipo de numeración que se indique en el atributo type y
pueden ser:
1 Ordena con números

a Ordena alfabéticamente en minúsculas
A Ordena alfabéticamente en mayúsculas
i Ordena con números romanos en minúsculas
I Ordena con números romanos en mayúsculas
<p>Ordenamos por números</p>

<ol type="1">
<li>Elemento 1
<li> Elemento 2
</ol>
<p>Ordenamos por letras</p>

<ol type="a">
<li>Elemento a
<li> Elemento b
</ol>
Resultado:
Ordenamos por números

I. Elemento I
II. Elemento II
Ordenamos por letras

A. Elemento A
B. Elemento B
Si queremos que empiece a contar desde otro número, por ejemplo 10 o X en vez de 1 o I,
lo haríamos con el atributo start seguido del número o letra por el que queramos empezar:
<p>Ordenamos por números romanos empezando por el 10</p>

<ol type="i" start="10">
<li>Elemento 10
<li>Elemento 11
</ol>
<p>Ordenamos por números romanos empezando por el 10 (en romano)</p>

<ol type="i" start="10">
<li>Elemento x
<li>Elemento xi
</ol>
Resultado:
Ordenamos por números romanos empezando por el 10

10. Elemento 10
11. Elemento 11
Ordenamos por números romanos empezando por el 10 (en romano)

x. Elemento x
xi. Element xi
Podemos juntar los estilos y hacer una lista mixta:
<p>Países distribuidores</p>
<ul>
<li>Canadá
<ol>
<li>Toronto
<li>Calgary
</ol>
<li>Estados Unidos
<ol>
<li>Nueva York
<li>Los Angeles
<li>Miami
</ol>
</ul>
Resultado:
Países distribuidores
• Canadá
1. Toronto
2. Calgary
• Estados Unidos
1. Nueva York
2. Los Angeles
3. Miami
El HTML 3.2 se admiten estos parámetros para la etiqueta <OL>:
Parámetro Significado Resultado

1. Primer
elemento
Indica al navegador que debe representar la lista de la 2. Segundo
COMPACT
manera más compacta posible. elemento
1. Tipo 1
b. Tipo a
Indica al navegador el tipo de numeración que C. Tipo A
TYPE="1", "a",
precederá a cada elemento de la lista. Para mayor iv. Tipo i
"A", "i", "I"
flexibilidad se admite también como parámetro de <LI>.V. Tipo I
3. Primer
elemento
Indica al navegador el número por el que se empezará 4. Segundo
START="num"
a contar los elementos de la lista. elemento
1. Primer
elemento
Atributo de <LI>, actúa como START pero a partir de un 4. Segundo

VALUE="num"
elemento predeterminado. elemento
5. Tercer
elemento
VI.3. 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>.
VII. IMAGENES
Una página web sin alguna imagen es como el mar sin sal. Sin duda lo mejor de una
página web son las imágenes. Como dijimos hay varios tipos de imágenes: JPG, BMP, GIF
y PNG.
La etiqueta para insertar una imagen es <img> (no tiene etiqueta de cierre) y sus
propiedades son:
 src: El nombre completo (con la extensión) de la imagen.

 border: El tamaño de borde para la imagen.
 alt: El texto que se muestra al pasar el mouse sobre la imagen.
 width: Ancho de la imagen (en píxeles o en porcentaje).
 height: Alto de la imagen (en píxeles o en porcentaje).
 vspace - hspace: Indica el espacio (en píxeles) libre de la imagen y lo que la rodea
(texto, otra imagen...)
Hagamos un ejemplo con todas estas propiedades:
<img src="imagen.jpg" alt="Sistemas" width="47" height="46" vspace="1" hspace="1"

border="0">
Veamos el resultado en un fichero ejemplo en la carpeta (juegue con los atributos).
Consejo: Intenta no agrandar tanto la imagen (especialmente con GIF) de su tamaño

original, esto puede ocasionar que pierda un poco de resolución y calidad (este tipo de
arreglos se hacen en software de diseños como el photoshop)
VII.1. Imágenes y enlaces
Recordar 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.
Se podría colocar una imagen como enlace, poniendo la imagen entre la etiqueta <a>:
<a href="http://microsoft.com" target="blank"><img src="Images/Usa.gif" border="0"></a>
Resultado en la carpeta de ejemplos, clic sobre la imagen:
Consejo: Pon el valor de 0 a la propiedad border, porque si la imagen es un enlace tendrá

el borde de color de los enlaces de la página.
VIII. Alineación respecto al texto
Podemos alinear una imagen agregando un <div> - <p> o la propiedad align dentro de la
imagen, que justifica la imagen del lado que deseamos a la vez que ponemos texto en el
lado opuesto:
<div align="center"><img src=" imagen.jpg " border="0" alt="Sistemas"></div>
<p align="center"><img src=" imagen.jpg " border="0" alt=" Sistemas "></p>
Ejemplo del atributo align en una imagen:
<img src=" imagen.jpg" border="0" alt="Sistemas" align="left"> Texto a la derecha de la

imagen, porque el valor de align es 'left'....... Aquí sigue el texto que se pone después de la
imagen.
Resultado:
(Imagen) Texto a la derecha de la imagen, porque el valor de align es 'left'.......
Aquí sigue el texto que se pone después de la imagen…
Como hemos visto 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
Coloca el punto más alto de la imagen coincidiendo con

TOP
más alto de la línea de texto actual.
Este es el texto
Alinea el punto medio (en altura) de la imagen con la base

MIDDLE
del texto.
Este es el texto
Alinea el punto más bajo de la imagen con la base del

BOTTOM
texto.
Este es el texto
Este es el texto
Coloca la imagen a la izquierda del texto. y esta es otra
LEFT línea
Este es el texto
Coloca la imagen a la derecha del texto. y esta es otra
RIGHT línea
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.
IX. PROPIEDAD REL

La nueva versión de Html5 ha mantenido, modificado y creado algunos valores para la
propiedad rel que nos interesa conocer. Con ellos ayudamos a los navegadores a conocer
qué tipo de enlaces estamos incluyendo realmente en nuestras páginas web. Será
interesante especialmente en dispositivos móviles, y también en las nuevas versiones de
los navegadores habituales. Veamos los más destacados.
IX.1. ¿Dónde se colocan?
Las propiedades rel que vamos a ver se colocan dentro de la etiqueta de apertura del
enlace o vínculo. Puedes colocar varias, una o ninguna.
Veamos un ejemplo de un enlace con dos propiedades rel:
<a href="tema/pagina.html" title="bla bla bla bla" rel="next" rel="prefetch">Anchor Text</a>
IX.2. Propiedad rel="archives"
Cuando a la propiedad rel le colocamos el valor archives estamos indicando al navegador

que la página a la que se está enlazando esta archivada, que ha dejado de tratar un tema
de actualidad, o que ha podido quedar incluso obsoleto. No se ha eliminado la página por
contener aún información interesante, pero se avisa que se desea mantener en estado de
archivo. Podría ser el caso de noticias ya pasadas, páginas con contenidos algo pasados
de moda o sustituidos por versiones más actuales pero que no eliminamos para no perder
el posicionamiento que nos puedan estar generando.
IX.3. Propiedad rel="author"
Se utilizan sobretodo en blogs y páginas de contenido de autor. Se coloca a aquellos

enlaces que se dirigen hacia la web personal del autor del artículo, o a aquellas en las que
se habla de ellos.
IX.4. Propiedad rel="prev", rel="start" y rel="next"
Son idóneas para informar a los navegadores de cuál es la página inicial de una sección,
cuál es la siguiente y cuál la anterior respecto de la página donde se encuentra el visitante.
Son geniales para colocar en las típicas flechitas de adelante y atrás y logran que los
navegadores se puedan hacer una idea del orden de las páginas de una web, si es que
están ordenadas, claro.
IX.5. Propiedad rel="first", rel="last" y rel="up"
Muy similares a las anteriores, salvo que en estos casos se informa al navegador que la
página enlazada es la primera o la última en el orden de la sección a la que pertenece.
Además, tenemos el valor up para indicar que la página vinculada pertenece a un nivel
jerárquico superior al de la página actual..
IX.6. Propiedad rel="prefetch"
Con el valor prefetch se está ordenando al navegador que vaya leyendo y memorizando
una página distinta, que presumimos que será la siguiente que va a leer el visitante. De
ese modo, cuando así sea y el visitante pulse ese enlace, el navegador la tendrá en su
caché preparada para mostrarla en cuanto el enlace sea pulsado, pues ha estado
cargando la información mientras el lector permanecía leyendo en la página anterior. Lo
idóneo sería saber cuáles son las páginas hacia donde se dirigen las visitas, claro. En caso
de que éstas se decidan por visitar otra distinta, no ocurrirá nada malo, pero si acertamos
la velocidad será mucho mayor, claro. Tampoco es cuestión de colocar ese valor a todos
los enlaces de tus páginas.
IX.7. Otros valores para la propiedad rel
Existen un montón de valores posibles que considero menos importantes, pero que quiero
citar por si a alguien le interesa utilizar, como el típico nofollow que indica que el destino
no tiene nada que ver con la temática de la web, sidebar que no está aún muy definido,
search para páginas que muestran resultados de búsquedas, noreferer para que el
navegador haga caso omiso de las posibles variables de referencia añadidas a la url, el
típico pingback de los blogs y alguno que otro más.
Advertencia: No todos los navegadores saben interpretar aún todos estos valores. De
hecho algunos no son reconocidos por ningún navegador todavía, pero la especificación
Html5 existe, de modo que no tardarán mucho en aplicarlos. De cualquier manera en caso
de no ser interpretados, tampoco ocasionan errores, por lo que quizás decidas usarlos
desde ya y no esperar a que los navegadores aprendan esta lección.
X. EJEMPLO HASTA AHORA

Antes de seguir con más código Html, veamos un ejemplo el que aplicamos todo lo que
hemos visto hasta el momento. Revisarlo a fondo y preguntar todo lo que no entiendas
antes de continuar para ir más suelto con el resto de las explicaciones.
El resultado del ejemplo es de lo más sencillo y muy poco vistoso. No preocuparnos por
eso, pues como he mencionado antes, el darle un aspecto más profesional, con márgenes
adecuados, colores de fondo y todo tipo de adornos, lo veremos en el curso de CSS.
Recuerden que los más importante es que estamos colocando Contenido, solo el
contenido, y en el curso de CSS aprenderemos a adornarlo hasta obtener un aspecto
totalmente profesional, sin nada que envidiar a cualquiera otra página web.
<!DOCTYPE html>
<html lang="es">
<head>
</head>
<body>
<a name="arriba"></a>
<img src="imagenes/logotipo.gif" alt="En ComoCrearTuWeb puedes aprender a diseñar
páginas web" width="270px" height="80px" />
<h1>Menú de Contenidos</h1>
<a href="#titulouno" title="Ir al título uno">Ir al título uno</a>
<a href="#titulodos" title="Ir al título dos">Ir al título dos</a>
<a href="#titulotres" title="Ir al título tres">Ir al título tres</a>
<h2>Título Uno</h2>
<a name="titulouno"></a>
<p>Este es el <u>texto correspondiente</u> al título uno, aunque debería ser más
largo para que se note el efecto.</p>
<p>Este es el texto correspondiente al título uno, aunque debería ser más largo para
que se note el efecto.</p>
<p>Este es el texto correspondiente al título uno, aunque debería ser más largo para
<h2>Título Dos</h2>
<a name="titulodos"></a>
<p>Este es el <i>texto correspondiente</i> al título dos, aunque debería ser más
<p>Este es el texto correspondiente al título dos, aunque debería ser más largo para
<p>Este es el texto correspondiente al título dos, aunque debería ser más largo para
<h2>Título Tres</h2>
<a name="titulotres"></a>
<p>Este es el <b>texto correspondiente</b> al título tres, aunque debería ser más
<p>Este es el texto correspondiente al título tres, aunque debería ser más largo para
<p>Este es el texto correspondiente al título tres, aunque debería ser más largo para
<a href="http://www.comocreartuweb.com" target="_blank" title="Todo sobre diseño
de páginas web">ComoCrearTuWeb</a>
<p>Adios <b>Amigos</b>!</p>
<a href="#arriba" title="Ir Arriba">Ir Arriba</a>
</body>
</html>
FIN 3ra Clase ITB
XI. TABLAS
Bueno hemos aprendido un montón de código Html ya, verdad? Sabemos definir
correctamente la cabecera de las páginas, colocar textos, vínculos, imágenes y también
sabemos dónde y cómo colocar nuestras palabras clave de modo que los buscadores nos
posicionen en los primeros lugares para aumentar la cantidad de visitas a nuestra web.
Estudiaremos ahora el uso de las tablas, un buen modo de organizar datos. También
aprenderemos a asignar indicadores (uso de capas o divs) a cada elemento de la web, de
modo que podamos darles color y detalles más tarde con los estilos CSS.
Una tabla en Html no es más que un modo de presentar una serie de datos que guardan
cierto orden y relación entre ellos. Un ejemplo de tabla es la siguiente:
Podemos pensar que las tablas no son necesarias porque no vamos a crear ninguna
agenda, ni listas, ni nada por el estilo. Pero las tablas no solamente hacen esto, nos
permiten colocar en partes de una página o de un espacio, diferentes objetos.
Un ejemplo de esto es un menú, como seguramente has visto en muchas páginas, el menú
está en una tabla.
Todo esto se logra con la etiqueta <table> la etiqueta <tr> (crea filas) y la etiqueta <td>
(crea columnas).
Veamos un ejemplo para entender mejor:
<table>
<tr>
<td> Celda 1, fila 1-</td>
<td>-Celda 2, fila 1</td>
</tr>
<tr>
<td> Celda 1, fila 2-</td>
<td>-Celda 2, fila 2</td>
</tr>
</table>
Resultado:
Celda 1, fila 1- -Celda 2, fila 1

Celda 1, fila 2- -Celda 2, fila 2
Para la creación de una tabla hay varios atributos importantes:
 border: Indica el tamaño (en pixeles) del borde de la tabla (0 es sin borde).
 cellspacing: Indica el espacio entre las celdas y filas (en pixeles)
 cellpadding: El espacio desde el borde de la celda (en pixeles)
 bgcolor: El color de la tabla.
 background: Imagen de fondo de la tabla.
 width: Ancho de la tabla (en pixeles o porcentaje).
 height: Alto de la tabla (en pixeles o porcentaje), no es necesario ponerlo porque la
tabla se hace tan alta como se necesita.
 bordercolor: Color del borde (si se puso un valor mayor o igual a 1 en border).
 align: Alinea el texto de una celda (right o center).
La etiqueta <td>, que sirve para crear columnas, además de las propiedades de la tabla
(bgcolor, background, width, height y align) tiene otras:
 valign: Podemos escoger si queremos que el texto esté alineado arriba (top), en
medio (middle) o abajo (bottom) en la celda (alineación verticalmente).
 colspan: Expande una celda horizontalmente.
 rowspan: Expande una celda verticalmente.
Veamos un ejemplo con todos estos atributos:
<div align="center"><table cellpadding="4" cellspacing="1" border="1"

bordercolor="#999999" width="350">
<tr bgcolor="#DDEEFF"><td align="center" colspan="2">Celda con colspan 2</td></tr>
<tr><td align="center" width="50%">Celda 1</td>
<td align="center" width="50%">Celda 2</td></tr>
</table>
<br>
<table cellpadding="2" cellspacing="3" border="1" bordercolor="#999999" width="350">
<tr><td align="center" valign="top" bgcolor="#DDEEFF" rowspan="2">Celda con
rowspan="2" y valign="top"</td> <td>Fila 1</td></tr>
<tr><td>Fila 2</td<></tr> </table></div>
Podemos crear tablas dentro de otras, dentro de un <td> y que en vez de que las
columnas sean celdas, serán tablas:
<div align="center"><table cellpadding="0" cellspacing="0" border="1" width="500"

bordercolor="#FF0000"><tr bgcolor="#FA5D00">
<td align="center" colspan="2">2 Tablas en dentro de un <b>td</b></td></tr>
<tr><td>
<table cellpadding="1" cellspacing="0" border="0" width="250"><tr
bgcolor="#00CCFF"><td align="center">Fila 1</td></tr>
<tr bgcolor="#00FF00"><td align="center">Fila 2</td></tr>
<tr bgcolor="#00CCFF"><td align="center">Fila 3</td></tr>
<tr bgcolor="#00FF00"><td align="center">Fila 4</td></tr></table></td>
<td valign="top"> <table cellpadding="0" cellspacing="1" border="2" bordercolor="#111111"

width="250"><tr bgcolor="#FFCC00"><td align="center">Fila 1</td></tr>
<tr bgcolor="#0000FF"><td align="center">Fila 2</td></tr>
</table>
</td></tr></table></div>
Como ves, usando tablas puedes organizar los datos de modo que aparezcan ordenados
en filas y columnas. También puedes hacer que aparezca un borde alrededor de cada dato
y, como puedes ver en la imagen de abajo, combinar algunas celdas:
Una vez entendido esto, se pueden imaginar las aplicaciones que se le pueden dar, desde
por ejemplo, colocar datos ordenadamente, como en el ejemplo anterior, hasta usarla para
darle forma a una web, si en lugar de meros datos, lo que colocas en cada celda son
imágenes y conjuntos de datos. Otro ejemplo, se puede colocar una imagen de fondo en la
primera fila con aspecto de borde superior, otra con aspecto de borde inferior en la fila de
abajo, un menú en una celda lateral, y dejar los textos principales de la web para las
celdas de la parte central, tal que así:
El uso de tablas para dar forma a una página web ya no se estila, no se recomienda en
absoluto, aunque funcionar funciona. Para dar forma a una web es mejor usar capas o
DIVs. Desde que salió la versión HTML5 incluso se tiende a no usar ni siquiera capas o
DIVs, sino algunas etiquetas nuevas de HTML5.
Recuerda que en esta sección solo veremos Html, de modo que solo veremos cómo se
usan y definen las tablas. Si luego quieres una anchura concreta para alguna celda o
columna, una altura distinta, un borde más o menos grueso o invisible, imágenes de fondo
para cierta fila etc. debes aprender a definirlas usando los estilos css. En html también se
puede definir, pero no merece la pena, es mucho mejor hacerlo con estilos.
XI.1. Etiquetas de Tablas
Esto es similar a lo que vimos para la construcción de las listas, solo que en este caso se
define el comienzo de una tabla con la etiqueta <table> y su final con la etiqueta de cierre
correspondiente, es decir, con la barrita, </table>. Una vez definida la tabla, hay que
colocar las filas y columnas en su interior. Has de recordar que las tablas de dividen en
filas horizontales y que luego esas filas se dividen a su vez en trocitos, dando lugar a las
columnas. Por lo tanto, en el código Html tendremos que colocar primero tantas etiquetas
de apertura y cierre de filas como filas queramos, y luego, en el interior de cada fila,
colocaremos las celdas en las que queramos dividir cada una de esas filas.
Las etiquetas que indican apertura y cierre de una fila (las filas son las horizontales y las
columnas las verticales) son <tr> y </tr>, mientras que las que definen el inicio y final de
una celda dentro de una fila son <td> y </td>.
XI.2. Estructura de las Tablas
Ya conocemos las tres etiquetas principales que se usan para formar una tabla en código
Html. Veamos ahora de forma práctica cómo colocarlas para obtener las tablas que
queramos. Para empezar veamos cuál es la estructura de una tabla formada tan solo por
una celda. Todas las celdas pertenecen obligatoriamente a una fila, de modo que la
estructura sería esta:
<table>
<tr>
<td>contenido1</td>
</tr>
</table>
Dentro de la única celda, es decir, entre las etiquetas <td> y </td>, he colocado la palabra
contenido1, que es lo que se mostrará dentro de la celda. Todos los contenidos de una
tabla siempre van dentro de celdas, nunca directamente dentro de una fila o una tabla, ok?
El resultado del código anterior sería este:
Realmente no se ve así en el navegador. He colocado algunos bordes y colores de fondo

para que se vea clara la diferencia de lo que es tabla, fila y celda. En la imagen de arriba,
el recuadro rosa o rojo claro corresponde a la tabla. Dentro puede verse un recuadro con
fondo azulado, que corresponde a la fila. Y dentro de esa fila hay otro recuadro con fondo
amarillo que sería finalmente la celda, con la palabra contenido, pues la hemos escrito
dentro de las etiquetas de la celda.
Vamos a ver ahora cómo sería una tabla con dos celdas dentro de esa única fila anterior.
El código Html sería este:
<table>
<tr>
<td>contenido1</td><td>contenido2</td>
</tr>
</table>
En este caso, tenemos dos celdas dentro de la única fila que tiene la tabla. Podemos
colocar todas las que queramos y aparecerán siempre una al lado de la otra, pues todas
están dentro de la misma fila, entre las etiquetas <tr> y </tr>
El siguiente ejemplo lo haremos con dos filas. Una tabla con dos filas y con una celda en
cada fila tendría este código Html:
<table>
<tr>
<td>contenido1</td>
</tr>
<tr>
<td>contenido2</td>
</tr>
</table>
En este caso basta con duplicar el código anterior, es decir, colocar otras líneas de
apertura y cierre para la nueva fila y escribir dentro la celda con el contenido.
El último ejemplo por el momento sería una tabla con dos filas y dos celdas en cada una
de ellas. Tendría este código Html:
<table>
<tr>
</tr>
<tr>
</tr>
</table>
Los recuadros azules son las filas, cada recuadro amarillo es una celda, y el conjunto es la
tabla completa. Además, se pueden combinar celdas, pero eso lo vemos en las páginas
siguientes.
XI.3. Combinación de Celdas
En ocasiones crear una tabla de ese modo tan cuadriculado no se acerca mucho a lo que
queremos. A veces nos viene mejor que una de las celdas sea más larga o más alta que
las otras, es decir, que ocupe varias celdas. Para lograr esto hay que recurrir a combinar
celdas.
El ejemplo más clarito que se me ocurre ahora mismo es la de una tabla con, por ejemplo,
tres columnas (verticales) pero en la que aparezca una sola celda arriba del todo,
ocupando la anchura total de la tabla. Algo como esto:
Para conseguir eso, tenemos que colocar en esa primera fila una sola celda, pero hay que
ponerle una palabra mágica para indicar a cuántas celdas corresponde o lo que es lo
mismo, cuantas celdas hemos de combinar para conseguir esa tan ancha.
Como el resto de filas tiene tres celdas, está claro que la superior ha de combinar también
3.
Primero coloco el código Html completo de una celda de cinco filas (horizontales) y tres
columnas, o tres celdas por fila, que es lo mismo. En la primera fila solo colocaré una
celda, por ahora sin la palabra mágica para ver cómo queda:
<table>
<tr>
<td>Números de Teléfono</td>
</tr>
<tr>
<td>Nombre</td><td>Apellido</td><td>Teléfono</td>
</tr>
<tr>
<td>Pablo</td><td>Garcia</td><td>123456789</td>
</tr>
<tr>
<td>Pedro</td><td>Sanchez</td><td>234567890</td>
</tr>
<tr>
<td>Antonio</td><td>Fernandez</td><td>345678901</td>
</tr>
</table>
Si copias ese código y lo pegamos en un archivo poniéndole la extensión .html podrás ver
el resultado haciendo doble clic sobre ese archivo. Eso si, no verás los bordes pues no los
hemos definido aún. Yo los he puesto en las imágenes para que se vea más clara la tabla,
pero para que aparezcan hay que especificarlo. El resultado con el código de arriba sería
algo así:
Por mucho que queramos, esa celda de arriba nunca podrá ser más ancha que la celda
que tiene debajo, pues la tabla tiende a guardar el espacio de su derecha para otras
celdas, que en este caso no existen. Para conseguir que esa primera celda ocupe todo el
ancho de la tabla es necesario indicar que equivale a tres celdas. De ese modo ocupará
todo el ancho, o el ancho de tres celdas.
El código Html que hay que añadirle a la etiqueta <td> para indicar que equivale a tres
celdas es el siguiente:
<td colspan="3">Números de Teléfono</td>
Añadiendo esa palabra mágica conseguimos lo que decíamos al principio, una celda
superior que ocupa todo el ancho, tres celdas combinadas:
En la página siguiente vemos cómo combinar varias celdas verticales, ok?
XI.3.1. Combinar Verticalmente
Al igual que se pueden combinar celdas horizontales para formar una sola más ancha,
también existe una palabra mágica para conseguir combinar dos o más celdas verticales
para formar una de más altura.
Veamos cómo se hace.
Imaginemos una tabla inicial ahora de tres filas y tres celdas por cada una de ellas, es
decir, de 3x3, tal y como esta:
El código Html de esa tabla sería algo como esto:
<table>
<tr>
<td>imagen</td><td>contenido1</td><td>contenido2</td>
</tr>
<tr>
</tr>
<tr>
</tr>
</table>
Imagina que no es esa la estructura que quiero, sino que prefiero colocar una sola imagen
a la izquierda, ocupando todo el alto de la tabla y no tres huecos para tres imágenes como
hay ahora. La solución es combinar las tres celdas verticales para dejarla de este modo:
La palabra mágica a colocar en este caso de combinaciones de celdas en vertical será:
<td rowspan="3">.
Es decir, colspan para combinar celdas horizontales y rowspan para combinar celdas
verticales, ok?
Hay que colocar la cantidad de celdas que quieres que ocupe la que combinamos. En
nuestro ejemplo queremos combinar las tres celdas en una, por tanto en el código inicial
tendríamos que eliminar el código Html correspondiente a las celdas de imagen de la
segunda y tercera fila y, en la que queda, colocarle <td rowspan="3">, quedando así:
<table>
<tr>
<td rowspan="3">imagen</td><td>contenido1</td><td>contenido2</td> </tr>
<tr>
<td>contenido3</td><td>contenido4</td> </tr>
<tr>
</tr>
</table>
El resultado sería el de la última imagen que pusimos arriba. Como ves, en el código de la
primera fila se colocan las etiquetas td de la celda de la imagen, y las otras dos de su
derecha. En cambio en las otras dos filas solo se colocan las etiquetas td de los contenidos
y nada de la celda de imagen, pues está toda contenida ya en el código de la fila primera.
Con la palabra <td rowspan="3"> se indicaba ya que la celda ocuparía las otras dos de
debajo de esa, por lo que no es necesario colocar nada de código en las filas dos y tres
correspondientes a la celda de imagen.
XI.3.2. Otras Combinaciones
Lamentablemente (o no tanto) solo podemos combinar celdas de una misma fila o de una
misma columna, pero no se pueden combinar grupos de por ejemplo 2x2 celdas (un
rectángulo de dos celdas de ancho por dos de alto no se pueden agrupar en una sola).
Tampoco se pueden agrupar celdas que no estén juntas, ni agrupar celdas en diagonal.
En los ejemplos anteriores hemos visto cómo combinar todas las celdas de esa fila o de
esa columna, pero eso no significa que no se puedan combinar tan solo dos de ellas. El
modo de hacerlo es el mismo pero colocando un 2 en lugar del 2 que aparecía en el
colspan (para combinaciones horizontal) o en el rowspan (para combinar en vertival).
Si en una tabla de 3x3 como la del código de aquí debajo:
<table>
<tr>
<td>contenido1</td><td>contenido2</td><td>contenido3</td>
</tr>
<tr>
</tr>
<tr>
</tr>
</table>
Quisiéramos combinar tan solo las dos celdas de abajo a la derecha, el código Html
correcto sería el siguiente:
<table>
<tr>
</tr>
<tr>
</tr>
<tr>
<td>contenido7</td><td colspan="2">contenido8</td>
</tr>
</table>
¿Se ve claro? Colocamos <td colspan="2"> en la segunda celda de la tercera fila (se
coloca el colspan en la celda en la que empieza la combinación, en este caso en la
segunda celda de la tercera columna que es lo que queríamos en este ejemplo), le
escribimos un 2, pues queremos combinar tan solo dos celdas, y eliminamos el código
correspondiente al contenido 9 (<td>contenido9</td>), pues ya no tiene sentido esa tercera
celda para la tercera fila.
XI.4. Varias Tablas
Ya vimos cómo podemos combinar celdas dentro de una misma tabla para conseguir el
resultado, esquema o organización que queramos conseguir. Pero también hemos visto
que existen ciertas limitaciones, como el no poder combinar grupos de celdas horizontales
y verticales a la vez. Es decir, con una sola tabla no podríamos conseguir esto:
En esa imagen se muestra una tabla de 4 filas por 4 columnas en la que se desean
combinar las celdas del interior, quizás para alojar ahí el contenido principal de la web
dejando las celdas de los alrededores para menús, logotipos, publicidad, o lo que sea. Eso
no se puede conseguir combinando celdas de una tabla, pero... podemos usar varias
tablas para obtener esa estructura!
Se trata pues de dividir esa estructura en varias tablas, hasta conseguir lo que deseamos.
Se me ocurre por ejemplo, separar la primera fila en una sola tabla (de una sola fila y
cuatro celdas), otra tabla más para las filas segunda y tercera (sería una tabla con dos filas
y 3 columnas solo) y finalmente para terminar ese diseño, colocar abajo de las tablas
anteriores otra tabla como la primera, con una sola fila y cuatro celdas. Es decir, la
siguiente división:
De este modo sí que podemos conseguir esa estructura. Bastaría tan solo combinar
verticalmente las filas centrales de la segunda tabla para conseguir lo que deseábamos al
principio.
El código Html completo de con las tres tablas sería este:
<table>
<tr>
<td>a1</td><td>a2</td><td>a3</td><td>a4</td>
</tr>
</table>
<table>
<tr>
<td>b1</td><td rowspan="2">central</td><td>b4</td>
</tr>
<tr>
<td>c1</td><td>c4</td>
</tr>
</table>
<table>
<tr>
<td>d1</td><td>d2</td><td>d3</td><td>d4</td>
</tr>
</table>
Solo tendrías ahora que eliminar los márgenes o separaciones que pudieran existir entre
esas tres tablas para que quedaran totalmente pegadas para conseguir lo que queríamos.
Pero recuerda, todo lo que tenga que ver con márgenes, anchuras, etc, lo dejamos para
los estilos CSS. Por lo que en cuanto a Html ya lo tendríamos terminado. Cualquier otra
combinación seguro que se puede conseguir sin más que darle un poco de rienda suelta a
la imaginación. También podrías colocar una tabla dentro de la celda de otra tabla si fuera
necesario. Son cosas raras ya, pero es posible, claro.
XI.5. Sobre el uso de Tablas
Como ves, una vez comprendidas y dominadas las tablas y su código Html, se te pueden
ocurrir mil utilidades. La primera utilidad es para cuando queramos colocar una serie de
datos ordenados por el índice que le pongamos arriba, como en el caso de la primera
imagen que te puse al principio de estas lecciones sobre tablas. De hecho, es para eso
para lo que se ha inventado este código.
Otro uso bastante utilizado es el de organizar mediante tablas el contenido completo de
una web, como vimos en otro de los ejemplos. Es decir, crear una tabla con tantas celdas
como cachitos de contenido vayamos a colocar en una página web y colocar luego el
código correspondiente dentro de cada celda. Así, se puede maquetar o dar forma a una
página web y conseguir mantener la forma que deseamos para ella. Un logotipo de la fila
de arriba, un pie de página en la de más abajo, menú lateral en una celda de la izquierda,
contenidos a su derecha.... resulta bastante sencillo de este modo.
Una alternativa al uso de las tablas a la hora de maquetar o dar forma al diseño de una
página web es el uso de las capas o Divs. Es un concepto totalmente distinto que veremos
más adelante dentro de este curso de Html y recomiendo que lo aprendan bien, pues
seguramente prefiera esa forma cuando quieras crear tu diseño.
XII. MARQUESINAS
Las marquesinas son palabras o textos que se desplazan de un lado a otro, ya sea
horizontal (izquierda a derecha o viceversa) o vertical (arriba hacia abajo o viceversa).
Lo podemos usar para noticias, imágenes, enlaces...
La etiqueta para esto es <marquee>, pero también podemos agregar diferentes atributos:
direction: Indica la dirección hacia donde se desplazará el texto, up (hacia arriba), down
(abajo), left (izquierda) o right (derecha).
width: Indica el ancho de la marquesina (en pixeles o porcentaje).
height: Indica el alto de la marquesina (en pixeles o porcentaje).
scrollAmount: Velocidad a la que se desplaza el texto.
Ejemplo:
<div align="center"><marquee scrollAmount="3" width="300" height="90"

direction="up">Texto<br>desplazado<br>hacia<br>arriba</marquee></div>
Hay un atributo más, que sirve para mover el texto de derecha a izquierda y de izquierda a
derecha, pero con este el texto no desaparece: alternate=behavior, ejemplo:
<marquee behavior="alternate">Texto de derecha a izquierda y de izquierda a

derecha</marquee>
FIN 4ta Clase ITB
XIII. FORMULARIOS
Realmente, escribir y publicar contenidos en nuestras páginas web seria algo totalmente a
ciegas si no conocemos la opinión de nuestros lectores. Por otro lado, no se me ocurre
cómo podríamos gestionar un pedido de compra sin dar la oportunidad a los visitantes a
comunicarnos qué y cuánto quieren, ¿verdad? Para estas cuestiones y para muchas
aplicaciones más, surgen los formularios.
Los formularios son recuadritos donde las visitas pueden escribir datos, datos que luego
serán procesados para una u otra acción. Ser enviados a una dirección de email que le
indiquemos, o pasados a un departamento de ventas para procesar un pedido, o incluso ir
a parar a un foro en forma de mensaje o respuesta. Es uno de los métodos más básicos y
utilizados para la comunicación entre webmaster y visitantes.
Las etiquetas que abren y cierran un formulario son <form> y </form> (apertura sin barra
y cierre con barra, como siempre). Además, en la etiqueta de apertura se añade qué
queremos que se haga con los datos que se recojan, o mejor dicho, qué archivo va a
procesar esos datos.
Mira este ejemplo de abajo:
......
<form method="post" action="mostrardatosenpagina.php">
......
</form>
.......
Es un formulario vacío, pero se ve cómo se indica a qué archivo se van a enviar los datos
recogidos por el formulario. Otro estudio será cómo crear ese archivo, pero ya escapa del
alcance de este apartado en el que solo veremos puro Html. 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.
Ahora, entre esas dos etiquetas, hemos de colocar los recuadritos que recopilarán la
información del visitante. Existen recuadros de muchos tipos. Unos son para recoger
algunas palabras, otras para grandes textos, también los hay para recoger contraseñas, o
desplegables en los que se muestran varias opciones de las que el visitante ha de recoger
una o varias de ellas, además de casillas de verificación que se pueden activar o
desactivar, etc.
Un ejemplo sencillo de formulario:
Tu nombre:
¿Estás registrado?
Si
No
<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>.
Mediante el envío de formularios se pueden enviar datos de un artículo, de una encuesta o

normalmente para enviar un mensaje a un e-mail.
Para hacer esto deberíamos saber un poco sobre los lenguajes de tipo servidor, ASP o
PHP, pero por el momento seguiremos con html.
La etiqueta para un formulario, como ya sabemos es <form>, y sus atributos son los
siguientes:
method: Indica el método por el que se enviarán los datos. Existen 2:
• POST: Envía datos por la entrada estándar STDIO (utilizado normalmente).

• GET: Envía datos por medio de un URL (enlace).
action: Indica el mail a donde se enviarán los datos o el nombre del archivo .php o .asp –
Ejemplo:
<form action="mail@dominiio.com" method="post"></form> o <form action="form.php"

method="post"></form>
name: es el nombre que identifica al formulario, útil si se usan scripts dentro de la página.
XIII.1. Elementos
Para enviar datos en un formulario se necesitan cuadros de texto.
La etiqueta que se usa es <input> (no tiene etiqueta de cierre) y tiene varios atributos:
 type: Define el tipo de texto que se introduce en el cuadro, sus valores pueden ser:
• text: Cualquier tipo de texto como el nombre, e-mail, dirección...
• password: Se usa para ocultar las claves o datos confidenciales (al escribir en
este, muestra *******.
• hidden: Datos escondidos, asunto, e-mail de destino...
• button: Crea un botón.
• image: Hace que una imagen sea el enlace (la imagen se muestra con el atributo
src).
• submit: Envía el formulario.
• reset: Borra los campos del formulario.
 value: Indica el valor de un atributo o el nombre que se mostrará (en el cuadro).
 name: Nombre del campo.
 maxlength: Indica el número de caracteres máximo para escribir.
 size: Indica el tamaño del cuadro de texto.
Ejemplo:
<form method="post">
Nombre <input type="text" name="nombre" maxlength="10" size="15">
Password <input type="password" name="contraseña" maxlength="10" size="15">
<input type="submit" name="enviar" value="Enviar">
<input type="reset" name="Borrar" value="Borrar Todo">
</form>
Si queremos que una persona envíe algún comentario o sugerencia, ponemos un cuadro
de texto grande, con la etiqueta <textarea>
Sus atributos son:

rows: Filas que tendrá el cuadro.
cols: Columnas que tendrá el cuadro.
Ejemplo:
<textarea cols="30" rows="4" name="comentario"></textarea>
XIV. LISTA DE OPCIONES

Son listas en las que se pueden especificar una o varias opciones.
Podríamos poner países, asuntos... y que el usuario seleccione la adecuada. La etiqueta

para hacer esto es <select>, y cada opción se define por la etiqueta <option>.
Además, deben contener los atributos value y name, ejemplo:
<select name="pais">
<option value="Arg">Argentina</option>
<option value="Br">Brasil</optiont>
<option value="Ch">Chile</option>
<option value="Eu">Estados Unidos</option>
<option value="Mx">México</option>
<option value="Vz">Venezuela</option>
</select>
Se puede seleccionar una opción por defecto, con el atributo selected en la opción que
queramos. Podemos cambiar la lista de opciones, para que se pueda seleccionar más de
una opción. Esto se hace con el atributo multiple y size (indica el número de valores a
mostrar):
<select name="pais" size="3" multiple>

</select>
Nota: Manteniendo presionada la tecla Ctrl o Shift se puede seleccionar más de una opción
de la lista.
XIV.1. Botones de círculo
Si queremos que solo se pueda seleccionar una opción, además de las listas
desplegables, tenemos los botones en forma de círculo. Se usa la etiqueta input, pero con
el valor radio en el atributo type.
Para seleccionar una opción por defecto, es el atributo checked:
<input type="radio" name="pais" value="Arg">Argentina<br>

<input type="radio" name="pais" value="Br">Brasil<br>
<input type="radio" name="pais" value="Ch">Chile<br>
<input type="radio" name="pais" value="Eu">E.U.<br>
<input type="radio" name="pais" value="Mx" checked>México<br>
<input type="radio" name="pais" value="Vz">Venzuela<br>
XIV.2. Cuadros de selección
Además de poner el valor múltiple en las listas desplegables para poder seleccionar más
de una opción, podemos utilizar el valor checkbox en el atributo type, y con el atributo
checked se selecciona una (o varias) opción(es):
<input type="checkbox" name="pais" value="Arg"> Argentina

<input type="checkbox" name="pais" value="Br"> Brasil
<input type="checkbox" name="pais" value="Ch"> Chile
<input type="checkbox" name="pais" value="Eu"> E.U.
<input type="checkbox" name="pais" value="Mx" checked> México
<input type="checkbox" name="pais" value="Vz"> Venezuela
Un ejemplo de un formulario:
<form action="mail@dominio.com" method="post">

Nombre: <input type="text" name="nombre" size="15" maxlength="20"> <br>
E-Mail: <input type="text" name="email" size="15" maxlength="20"> <br>
País: <select name="pais">
</select><br>
Sexo: <input type="radio" name="sexo" value="hombre"> Hombre
<input type="radio" name="sexo" value="mujer"> Mujer<br>
Urgente: <input type="checkbox" name="prioridad" value="si"> Sí
Comentario: <textarea rows="3" cols="40" name="comentario"></textarea><br><br>
<input type="submit" value="Enviar"> <input type="reset" value="Borrar">
</form>
Y en nuestro e-mail recibiríamos algo asi:

nombre: Leo
email: anonimo@dominio.com
pais: Mx
sexo: hombre
prioridad=on
comentario: hola, quiero información.
Nota: Si está activada el cuadro de selección, el valor al recibir el mail será on, si no se
activó el valor será off.
Consejo: Para alinear la descripción de los campos y los campos, podrías crear una tabla
con dos columnas.
Importante: En esta ocasión se abrirá el programa de envíos de mail por defecto de la

computadora del usuario (suele ser Outlook Express).
XV. CAJAS DE TEXTO

Ya vimos algo de esto pero reiteremos, por la importancia de su aprendizaje, 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>:
Comienza a escribir
<TEXTAREA>Comienza a escribir </TEXTAREA>
Si escribimos algún texto dentro de esta etiqueta, ese texto aparecerá por defecto en ese
á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.
XV.1. 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" Si
TYPE=RADIO VALUE="1"><BR>
No<INPUT NAME="Registrado" No
TYPE=RADIO VALUE="0"><BR>
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.
XV.2. 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>
<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.
XV.3. Botones del formulario
Existen dos clases de 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:
<INPUT TYPE=SUBMIT>
<INPUT TYPE=RESET>
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">
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.
XV.3.1. 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.
XV.3.2. 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.
XV.4. 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 estándar
HTML 4.0, características que básicamente mejoran la estética y facilitan el uso de estos
elementos.
XV.4.1. 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"
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.
XV.4.2. 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 Me gusta este curso
</LABEL>
Compara con este otro ejemplo aparentemente igual al anterior.
<INPUT NAME="Curso" TYPE=CHECKBOX> Me gusta este curso

Me gusta este curso/a
En el primer caso el click sobre la etiqueta actúa igual que sobre el control.
XV.4.3. 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) .
XV.4.4. 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:
<INPUT TYPE=TEXT Origen:
DISABLED>
</LABEL>
XVI. Agrupando Elementos (DIV y SPAN)
Ahora que conoces las principales etiquetas Html que vas a poder necesitar para hacer
una página web y tras haberte comentado en ocasiones que en el Html no deberíamos
colocar nada de código que tenga que ver con la estética de sus elementos (anchuras,
colores, fondos, márgenes, etc.) toca el turno de presentaros estas dos maravillosas
etiquetas, <div> y <span> que hemos ido viendo en ejemplos pero no profundizamos en
ellas.
¿Por qué digo esto? Porque esas dos etiquetas son las encargadas de agrupar uno o
varios elementos de una web y de darles un identificador, que usaremos luego en la hoja
de estilos CSS para relacionarlos.
Ejemplo, imagina que quiero crear una lista de elementos como vimos páginas atrás. Pero
queremos que tenga una imagen de fondo que tenemos por ahí guardada, y queremos
darle cierta anchura, y un borde de color marrón que sea un poquito ancho, y ya puestos
que el tamaño de sus textos sea pequeñito y... y muchas cosas más.
Como ves, todo esto son detalles estéticos y según mis recomendaciones no deben
definirse dentro del código Html. ¿Correcto? Pero veámosle ahora en el código.
Todos esos detalles los vamos a definir en un archivo aparte, no en el archivo .html de la
página web sino en lo que llamaremos hoja de estilos, un pequeño archivo con extensión
.css que ya veremos en el curso de estilos más adelante.
Pero cómo podría saber el navegador que nuestra querida lista ha de tomar todos esos
estilos o detalles? Ahí es donde aparecen nuestras nuevas amigas, las etiquetas <div> y
<span>. Con ellas podremos, en el código Html, darle un nombre a esa lista. Así, cuando
el navegador la vea en nuestra web, verá que tiene un nombre y buscará qué estilos han
de tener las listas con ese nombre en la hoja de estilo. El navegador leerá esos estilos o
detalles y se los aplicará a la lista, quedando tal y como la queríamos.
Ahora estamos en el curso de Html, de modo que no profundizaremos mucho en los

estilos. Te sobra con saber que para asignarle nombres a elementos o grupos de
elementos del Html y poder darle estilos, usaremos las etiquetas <div> y <span>.
Veamos cómo se hace en las páginas siguientes.
XVI.1. CON SPAN
La etiqueta <span> se utiliza para asignar un nombre a un trocito de un elemento de

nuestra página web. Como decía en la página anterior, cuando el navegador vea que ese
trozo de elemento tiene asignado un nombre, irá a ver si existen definidos algunos estilos
para él y en caso de encontrar alguno, los aplicará.
Pero veámoslo con un ejemplo, que parece que se entiende mejor, no? Imagina, ahora
que sabes escribir textos en Html, que tenemos una página web con el siguiente párrafo:
<p>Estamos aprendiendo a utilizar la etiqueta span de Html en este tutorial.</p>
Imagina que queremos que aparezcan las palabras "etiqueta span" en negrita y de color
rojo. Tal y como hemos visto hasta ahora, debemos evitar aplicar ese tipo de detalles en el
código Html, verdad? Lo que haremos será darle a esas dos palabras un identificador o
nombre y, más tarde, en la hoja de estilo, definirle a ese nombre la propiedad negrita y
color rojo.
El nombre que vamos a escoger va a ser "resaltado", y para aplicárselo a esas dos
palabras usaremos el siguiente código:
<p>Estamos aprendiendo a utilizar la <span class="resaltado">etiqueta span</span> de

Html en este tutorial </p>
De este modo, el navegador al leer el código Html verá que a esas dos palabras
encerradas ha de aplicarles los estilos que tenga el identificador resaltado" en la hoja de
estilos. Ya ves que no es muy complicado..
Has de saber que se usa la etiqueta <span> cuando quieres encerrar trocitos o parte de
un elemento. Un párrafo entero es un elemento, pero esas dos palabras son "un trocito" de
elemento y por lo tanto hay que seleccionarlas con un <span>. Para seleccionar no partes
sino conjuntos de elementos (como por ejemplo varios párrafos) hay que usar la etiqueta
que veremos en la página siguiente, la etiqueta <div>.
Personalmente, yo solo uso <span> para esto, para dar un estilo diferente a una parte de
un párrafo, como por ejemplo una sola palabra o solo unas pocas del párrafo.
Pensando... quizás otra utilidad podría ser la de enfatizar la primera letra de un párrafo, tal
y como hacen algunos periódicos, es decir, colocar la primera letra en negrita y de un
tamaño bastante mayor que el resto del párrafo. Esto se podría lograr aplicando la etiqueta
<span> tan solo a la primera letra del párrafo, de este modo:
<p><span class="capital">L</span>a primera letra de este párrafo, la "ele", tendrá un estilo

diferente, si es que lo defino en la hoja de estilos, claro.</p>
Debería aparecer más o menos así, si defino en la hoja de estilos que sea negrita, de color
azul y de un tamaño mayor que el resto del párrafo:
La primera letra de este párrafo, la "ele", tendrá un estilo diferente, si es que lo defino en la
hoja de estilos, claro.
XVI.2. CON DIV
Ya comenté en la página anterior que para cachitos de elemento se usa la etiqueta <span>
y para bloques o grupos de elementos la etiqueta <div>. Vamos a verla con más
detenimiento.
La forma de usarla es muy similar al caso anterior. Basta con colocar la etiqueta de
apertura antes de donde empiece el grupo, indicando el nombre dentro de esa etiqueta, y
colocar luego la etiqueta de cierre al final del grupo. Muy sencillo. Para agrupar dos
párrafos podríamos escribir este código de abajo, por ejemplo:
<div class="letra-grande">
<p>Este es el primer párrafo de este grupo.</p>
<p>Que listo eres, si, este es el segundo, je je je.</p>
</div>
Por tanto se usa la etiqueta Html <div> cuando queremos darle un nombre o identificador
no a un trozo de elemento, sino a un elemento entero (el párrafo completo) o más
habitualmente, a un grupo de elementos, varios párrafos, varias imágenes, un bloque
formado por varios párrafos e imágenes, o incluso la página completa. De ese modo,
podemos darle los estilos definidos a ese nombre en la hoja de estilos, a todos los
elementos de ese grupo.
De nuevo, veamos algunos ejemplos concretos para aclarar el concepto. Imagina que
queremos darle un ancho concreto a toda la web. Podríamos crear un estilo en la hoja de
estilos llamado "anchura", darle el valor de 800px de ancho y.... a quién se lo aplico? Pues
por ejemplo, a toda la web, no? Para eso bastaría con colocar la línea:
......
</head>
<body>
<div class="anchura">
......
al principio del contenido de la web, es decir, justo después de la etiqueta <body> y luego,
antes de </body> colocar el cierre de ese div con esta otra línea:
. . . . . .
</div>
</body>
</html>
O imagina que tenemos una lista de elementos construida con las etiquetas que vimos
atrás, las etiquetas <ul> y <li> con las que hemos hecho el menú lateral. Para darle la
forma, anchura y colores que queramos podríamos encerrarla dentro de un div y darle el
nombre de "menu" de este modo:
......
<div class="menu">
<ul>
<li>enlace 1</li>
<li>enlace 2</li>
<li>enlace 3</li>
</ul>
</div>
......
Pasamos ahora a ver un par de propiedades relacionadas con estas dos etiquetas tan
prometedoras. Antes destacar que cualquier elemento o conjunto de elementos encerrados
por la etiqueta <div> es una capa.
Si, las capas no son más que eso, agrupaciones de elementos entre esas etiquetas con el
fin de poder aplicarle estilos a lo que tenga en el interior. Ya sabes entonces q son las
famosas capas, esa tecnología tan moderna para hacer webs profesionales!!
XVI.3. CLASE E ID
En las páginas anteriores, mientras hablábamos de las etiquetas <div> y <span>, pusimos
la propiedad class para indicar el nombre que identificaría a ese grupo o cachito de
elemento, ¿recuerdas? No comenté nada más para no mezclar unas cosas con otras, pero
ahora que sabemos manejar las etiquetas <div> y <span> puedo comentar ya lo siguiente.
Existen dos formas de asignar un nombre a un <div> o a un <span>. Una la hemos visto
en los ejemplos anteriores, la propiedad class, pero existe otra más, la propiedad id.
Vamos a ver cuándo se utiliza una y cuándo la otra.
Podríamos decir que existen dos tipos de estilos. Los que se definen para objetos
concretos, como el menú lateral, la cabecera de la página, el pie de página, etc, y los
estilos que usamos a discreción, como los estilos para resaltar ciertos textos, o para dar
unas propiedades características a ciertos enlaces.
Estilos estos últimos que podemos aplicar a este elemento de aquí o a aquel otro de allá.
Entonces, asignaremos un nombre con la propiedad id cuando pertenezca a un objeto

que solo aparece una vez en cada página web. Es el caso del pie de página (no suele
haber dos), o a la cabecera (suele haber uno solo), o del menú lateral. Son objetos que en
caso de aparecer en una de las páginas de nuestra web, lo hacen una sola vez.
En cambio hay otros estilos que podemos aplicar a discreción y repetidas veces. Si creo un
estilo llamado "resaltado" que puedo aplicar a una palabra de cierto párrafo, y a otro grupo
de palabras de otro párrafo distinto, y a aquel enlace de ahí arriba, etc. es decir, que
vamos a aplicar varias veces en una página de nuestra web, usaremos en lugar de la
propiedad id la propiedad class para asignar el nombre de estilo, ¿ok?
XVII. 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.
XVII.1. 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.
Coordenadas (separadas por comas) que definen la zona. El número y significado de
COORDS
esas coordenadas dependerá de la forma.
HREF URL del enlace corespondiente 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
"x1,y1,x2,y2" siendo (x1,y1) la esquina superior izquierda y (x2,y2) la
Rectangular RECT
inferior derecha.
Circular CIRC "x,y,r" siendo (x,y) el centro del círculo y r el radio.
"x1,y1,x2,y2,x3,y3,..." definiendo cada pareja (x,y) una esquina del
Polígono
POLY polígono. La última pareja de coordenadas se unirá a la primera para
irregular
cerrar el polígono.
Toda la
DEFAULT No se necesitan
imagen
Usando los mapas
Una vez definido como es el mapa lo asignamos a una imagen:
<IMG SRC=... USEMAP="#mapa_enlaces">
Siempre hay 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í:

Nota: 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.
XVIII. FRAMES o 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.
Los frames (páginas independientes) son una manera de partir (o dividir) la página en
distintos espacios (o áreas) independientes unos de los otros, de modo que en cada
espacio se coloca una página distinta que se codifica en un fichero (.html en este caso)
distinto.
Cada frame contiene dentro, la página que le indiquemos, como cada uno es
independiente, tiene sus barras de desplazamiento (flechas de la derecha). Generalmente
se usan los frames para poner el menú y que al presionar en algún enlace, siempre quede
visible (el menú) y no desaparezca ni por unos segundos. Los frames pueden ser en
columnas, en filas o de los dos.
<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>
Fijémonos en 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ámetros 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>).
Para indicar en cuantas partes dividiremos la página, debemos indicar el tamaño de cada
parte separado de una coma ( , ). Por ejemplo, si van a ser solo dos frames, indicaríamos
así: 40%,60%. Así, el primer frame ocupará el 40% de la página, y el segundo el 60% de
la página.
XVIII.1. Etiqueta FRAMESET
Los parámetros COLS y ROWS nos permiten controlar el tamaño de los marcos
presentados en la ventana del navegador. Existen tres formas de establecer estos
tamaños:
 Porcentajes: podemos definir el tamaño de un marco como un porcentaje del

espacio total disponible (el ancho o alto de la ventana del navegador)
 Absolutos: Podemos especificar el ancho o alto del marco en pixels.
 Calculado: Podemos colocar el ancho o alto de un marco y dejar que el tamaño del
otro lo calcule el navegador, usando 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 pixels. El primer marco ocupará el
10%, es decir, 84 pixels. El tercero necesita 300, en total tenemos 384 ocupados luego
quedan 800-384, 416 pixels libres. Los otros se repartirán este espacio en función de los
asteriscos: 416/4 = 104 pixels para el de un asterisco y 312 para el otro. En total tenemos
ocupados los 800 pixels. Lo más recomendable es dejar un marco con tamaño calculado, o
sea, con el asterisco para.
Y bueno si queremos que los marcos se distribuyan de una forma algo más irregular
podemos aprovechar la posibilidad de anidarlos, en otras palabras: un marco puede
contener una página que a su vez contenga 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>
La etiqueta principal es <frameset> y sus atributos son:

 cols: Indica el tamaño de las columnas (en pixeles o porcentaje).
 rows: Indica el tamaño de las filas (en pixeles o porcentaje).
 framespacing: Indica el tamaño (en pixeles) entre cada frame.
 border: Indica el ancho del borde (en pixeles).
 frameborder: Indica si los frames tendrán bordes (Yes - No).
XVIII.2. Etiqueta FRAME
Y la etiqueta donde debemos indicar la página que va a contener el frame es <frame> (no
tiene etiqueta de cierre). Sus atributos son:
 src: Aquí escribimos la página que contiene el frame.

 name: Indicamos el nombre del frame.
 scrollbar: Indicar si el frame contiene las barras de desplazamiento o no (Yes o
No).
 noresize: Bloquea el frame para que no podamos achicarlo o expandirlo
Debemos crear un archivo principal, que es el que contiene frames, y el título que se
ponga en este, será el que se mostrará. Los valores del atributo cols o rows podemos
indicarlos en píxeles o en porcentaje, pero si se indica en píxeles, debido a que existen
varios tipos de resoluciones, como 800x600 - 1024x78 (las más usadas), podemos utilizar
un comodín (*) para cubrir el espacio que sobra.
Veamos unos ejemplos para entender mejor:
Creamos el archivo principal (index.html -por ejemplo), con dos frames que estarán en dos
columnas, la primera ocupará el 20% y la segunda el 80%.
Código index.html:
<html>
<head> <title>Página Principal (Index)</title></head>
<frameset cols="400,*">
<frame src="pagina1.html" scrolling="no" name="frame1" noresize>
<frame src="pagina2.html" scrolling="yes" name="frame_2" noresize>
</frameset>
</html>
Ahora creamos los otros 2 archivos (pagina1.html y pagina2.html) que estarán en la página
principal (index.html). En este caso solo pondremos unas palabras y cambiamos el color
de fondo:
pagina1.html:
<html>
<head> <title>Página 1</title></head>
<body bgcolor="#CC0000">
<font size="4">Texto de la p1</font>
</body>
</html>
pagina2.html:
<html>
<body bgcolor="#0000FF">
<font size="4" color="#FFFF00">Texto de la p2</font>
</body>
</html>
Como se puede ver, en el frame de la izquierda (rojo), no tiene barras de desplazamiento

porque el valor del atributo scrolling (en el archivo principal) fue no.
El de la derecha si tiene, porque el valor fue yes.
Ahora vamos a poner 3 frames, pero en filas y el tamaño lo pondremos en píxeles, también
eliminamos el borde entre frames. La primera fila ocupará 43 píxeles (de alto), la segunda
colocamos un * (comodín) para que ocupe el espacio que sobre, y la tercera fila 200
píxeles.
Creamos el archivo principal (frames.html -en este caso) que contiene las 3 páginas:
frames.html
<html>
<head> <title>Página Principal (Frames.html)</title></head>
<frameset rows="43,*,200" framesborder="no" border="0">
<frame src="frame1.html" scrolling="no" name="frame_1" noresize>
</frameset>
</html>
frame1.html
<html>
<body bgcolor="#00CCFF">
<font size="4" color="#FFFF00">Texto de la p1</font>
</body>
</html>
frame2.html
<html>
<body bgcolor="#00CC00">
<font size="4" color="#000055">Texto de la p2</font>
<a href="body.html" target="frame_2">Ir a la página del ejemplo de BODY</a> </body>
</html>
frame3.html
<html>
<body bgcolor="#111111">
<font size="4" color="#FFFFFF">Texto de la p3</font><br><br>
</body>
</html>
Importante: En el archivo principal (el que contiene los frames) no debe contener la
etiqueta <body>.
Si queremos abrir una página en otro frame, debemos poner el nombre del frame (con el
atributo name) igual que el valor del atributo target del enlace. Ejemplo:
frames.html (archivo principal)
<html>
<head> <title>Página Principal (Frames.html)</title></head>
<frameset rows="43,*,200" framesborder="no" border="0">
</frameset>
</html>
frame2.html
<html>
<body bgcolor="#00CC00">
<font size="4" color="#000055">Texto de la p2</font>
<a href="body.html" target="frame_2">Ir a la página del ejemplo de BODY</a> </body>
</html>
Ahora un ejemplo de como hacer una página con 3 frames, dos de ellos son columnas y
uno es fila. Ponemos 2 <frameset>, en el de la fila, el segundo valor será el comodín ( * ) y
cerraremos los dos hasta el final:
Código:
3frames.html (archivo principal)
<html>
<head> <title>Página Principal (3frames.html)</title></head>
<frameset rows="60,*">
<frame src="pagina1.html">
<frameset cols="20%,80%">
<frame src="pagina2.html">
<frame src="pagina3.html"> </frameset> </frameset>
</html>
XVIII.3. 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 como

NAME
destino de un enlace.
ALIGN Alineación del marco respecto al texto que lo rodea (botton, right, left, middle)
SRC Indica la URL del documento HTML que ocupará el marco.
HEIGHT Altura del marco
WIDTH Anchura del marco
FRAMEBORDER Ssi lo igualamos a cero el borde de este marco desaparece
Coloca o no las barras de scroll. Su valor es por defecto AUTO, 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 pixels.
MARGINHEIGHT Igual al anterior pero con márgenes verticales.
allowtransparency Si es true La página origen puede tener como color de fondo transparent.
La etiqueta es <iframe> y tiene los mismos atributos que un frame. Debemos cerrar la
etiqueta sin poner nada en medio, indicamos si queremos borde y/o barras de
desplazamiento.
Veamos un ejemplo:
Incluiremos el archivo interno.html en la página:
<div align="center"><iframe src="interno.html" name="pag" width="300" height="250"

frameborder="no"></iframe></div>
XVIII.4. Acceso a otros marcos
Si vimos 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 indice tenemos un enlace que queremos se
abra en el marco principal pondremos:
<A HREF="pagina.html" TARGET="principal">
También existen cuatro nombres reservados que podremos utilizar en el parámetro

TARGET:
_top : Elimina todos los marcos existente y muestra la nueva página en la ventana original
sin marcos.
_blank : Muestra la nueva página en una ventana nueva y sin nombre del navegador.
_self : Muestra la nueva página en el marco donde está declarado el enlace.
_parent : Muestra la nueva página en el <FRAMESET> que contiene al marco donde se
declara el enlace. En el ejemplo que pusimos de <FRAMESET> anidados, una enlace
situado en el marco ejemplo cuyo parámetro TARGET fuese igual a _parent eliminaría la
separación entre los marcos ejemplo y principal y mostraría en ese nuevo marco la nueva
página.
XIX. INSERTAR AUDIO Y VIDEO

A veces, es bueno que pongamos música en nuestra página web para que se vea mejor.
También podemos también compartir algún video de nosotros o alguna película. Debemos
colocar el archivo (de audio o video) en el mismo directorio (o carpeta) que está el archivo
de la página (html -en este caso). Los códigos aquí escritos, son para reproducir solo con
el Reproductor de Windows Media y visualizarlos con Internet Explorer.
Debemos tener en cuenta varias cosas:
• No toda la gente tiene internet de banda ancha, para cargar rápido el archivo.
• Al subir un archivo a la web vía FTP (ve el manual de FTP), generalmente tarda unos
minutos, a menos que tengas internet de 512Kbps (o más).
• Si comprimes mucho un archivo (de audio o video), puede ser que al escucharlo (o verlo)
esté con mala calidad.
Existen 2 formas para colocar audio-video en una página web:
bgsound: Con esta etiqueta (y los siguientes atributos) colocamos solamente archivos de
audio, ésta etiqueta se pone entre la etiqueta <HEAD>...</HEAD>. Lo único que tenemos
que hacer es indicar algunos valores. Es importante saber que con esta etiqueta, se
reproduce un sonido y se puede repetir, pero no hay un botón en específico que detenga el
sonido (aunque con Esc se detiene).
Atributos:
→ src: Indica la ruta (donde está el archivo) y el nombre del archivo (por ej: musica.mp3).
→ loop: Indica si se repite o no el sonido, y si se repite indica cuantas veces se repite (el
valor -1 indica reproducir infinitamente).
→ volume: El volúmen que se escuchará el sonido (mínimo -10,000 y máximo 0).
Código:
<head> <bgsound src="Samples/My_Heart_Will_Go_On.mid" loop="-1" volume="0">

</head>
object: Con esta etiqueta se reproduce un tipo de archivo (audio y video). Podemos indicar
que empiece la reproducción automáticamente o manualmente, el tamaño del
"reproductor" que aparece en la página, mostrar u ocultar la barra del reproductor (botones
de reproducir, detener...).
Atributos:
→ classid="identificador del objeto": Indica la ruta del objeto o un componente para
reproducir el archivo.
→ type="tipo de archivo": Indica el tipo de archivo.
→ width: Indica el ancho del reproductor.
→ standby: Muestra un mensaje mientras se carga el archivo.
→ height: Indica la altura del reproductor.
Existen algunos parámetros para indicar el aspecto del reproductor y mostrar u ocultar
objetos (aquí pongo los más importantes). El código de un parámetro es:
<param NAME="Nombre del parámetro" VALUE="Valor (True=Sí / False=No)">
→ autostart: Reproducir automáticamente o no.

→ filename: Indica la ruta y nombre del archivo.
→ ShowStatusBar: Muestra u oculta la barra de estado del reproductor.
Un ejemplo de un archivo de audio:
Código:
<object CLASSID="CLSID:22D6f312-B0F6-11D0-94AB-0080C74C7E95"
CODEBASE="http://activex.microsoft.com/activex/controls/mplayer/en/nsmp2inf.cab#Versi
on=5,1,52,701" standby="Cargando los componentes del Reproductor de Windows Media"
type="application/x-oleobject" NAME="MC1" ID="MC1" height="52" width="300">
<param NAME="FileName" VALUE=" My_Heart_Will_Go_On.mid">

<param NAME="AutoStart" VALUE="True">
<param NAME="ShowStatusBar" VALUE="True">
<param NAME="ShowGotoBar" VALUE="False">
<param NAME="TransparentAtStart" VALUE="False">
<param NAME="Volume" VALUE="-10000">
<param NAME="Loop" VALUE="-1"> </object>
Ahora, un ejemplo de un video (Trailer de Harry Potter y El Cáliz de Fuego).
<object CLASSID="CLSID:22D6f312-B0F6-11D0-94AB-0080C74C7E95"
CODEBASE="http://activex.microsoft.com/activex/controls/mplayer/en/nsmp2inf.cab#Versi
on=5,1,52,701" standby="Cargando los componentes del Reproductor de Windows Media"
type="application/x-oleobject" NAME="MC1" ID="MC1" height="250" width="350">
<param NAME="FileName"
VALUE="http://raincloud.warnerbros.com/harrypotter/us/med/goblet/teaser/teaser_100.asx"
>
<param NAME="AutoStart" VALUE="True">

<param NAME="ShowStatusBar" VALUE="True">
<param NAME="ShowGotoBar" VALUE="False">
<param NAME="TransparentAtStart" VALUE="True">
<param NAME="Volume" VALUE="-10000">
<param NAME="Loop" VALUE="-1"> </object>

Curso HTML introductorio

Diunggah oleh

Informasi Dokumen

Judul Asli

Hak Cipta

Format Tersedia

Bagikan dokumen Ini

Bagikan atau Tanam Dokumen

Opsi Berbagi

Apakah menurut Anda dokumen ini bermanfaat?

Apakah konten ini tidak pantas?

Hak Cipta:

Format Tersedia

Curso HTML introductorio

Diunggah oleh

Hak Cipta:

Format Tersedia

CURSO DE HTML

I.1. ¿Qué programa debo usar?

Para empezar a programar con Html, se necesita un programa en el cual podamos

I.2. Resumen de Pasos para construir una Web

A continuación como complemento al curso muestro una serie de pasos, escogidos de

II. CODIGO HTML

II.1. ¿Qué es Html?

II.2. Estructura y etiquetas

Como hemos mencionado, el Html es un lenguaje (de programación) que contiene

El contenido correspondiente a la cabecera (head) tendrá que ir siempre entre la etiqueta

Texto subrayado Texto Normal

II.3. Mis primeras páginas

El código sería el siguiente:

Copiemos y peguemos este código en el editor y guardémoslo con un nombre con

Nota: Se recomienda no usar espacios, mayúsculas o caracteres especiales (# $ % °) en el

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

<HTML> ... </HTML>

II.5. El cuerpo del documento

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

<BODY> ... </BODY>

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

así: index.html o index.htm

II.6. Resumiendo la Estructura del documento

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

III. TIPO DE DOCUMENTO

Ejemplos de Tipos de Documentos:

<!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML 2.0//EN">

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2 Final//EN">

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Frameset//EN"

Sin embargo, si especificamos:

Ahora todas nuestras URLs relativas se encontrarán dentro del servidor

IV.1. Titulo o Title

La línea completa de un código de página sería por ejemplo este:

<title>Título de esta página</title>

Quedando el código completo de nuestro ejemplo de este modo:

Se recomienda, además de no repetirse en las distintas páginas de tu web, que el

IV.2. Meta Name

<meta name="Description" content="descripción de la página">

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

Estas son las propiedades más comunes:

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

IV.4. Tipo de Codificación (META)

¿Imaginas la cantidad de caracteres extraños que existen? Cosas en hebreo, en chino, o

<meta charset="utf-8" />

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

V.1. Formato a nivel de bloques

Evidentemente en las páginas no todo el contenido es igual y por tanto no todo se ha de

Hola amigos, esta es mi nueva Web

Tendremos que escribir, entre <body> y </body> la siguiente línea:

<p>Hola amigos, esta es mi nueva Web</p>  entonces quedaría asi:

V.1.2. Estilos de párrafos

Texto 1<br> Texto 2<br><br>Texto3

<hr size="3" color="purple" width="75%">

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

Etiqueta Significado Resultado

V.2. Los encabezados

Usando esto en los ejemplos:

La apariencia es sin duda alguna distinta, como si de un titular de periódico se tratara.

V.3. Resaltar Textos

V.3.1. Textos en Negrita

Un ejemplo de un párrafo simple con una palabra en negrita, la palabra "negrita":