Manual de Lenguaje HTML

manual de lenguaje HTML
Las pginas que nos encontramos en Internet, las pginas web, estn construidas en
un lenguaje de etiquetas denominado lenguaje html.
Esto quiere ser un sencillo curso para que seas capaz, en relativamente poco tiempo,
de realizar tus primeras pginas web escribiendo el cdigo correspondiente, antes de
pasar a ver algn editor de cdigo concreto (Dreamweaver por ejemplo) que
simplifican enormemente la tarea.
Por qu entonces no empezar directamente con el editor?
Porque es muy importante tener ciertos conocimientos del lenguaje ante posibles
problemas que, sin lugar a dudas, se nos van a presentar al editar nuestras pginas.
La red est llena de cursos sobre el lenguaje HTML. Qu aporta ste que no tengan
los dems? Probablemente no mucho. He pretendido la sencillez y la claridad. Al
principio quera ser de nivel inicial y, conforme lo he ido ampliando, ya est en un
nivel de intermedio. No obstante, los primeros pasos estn pensados para personas con
escasos conocimientos de informtica en general, y de pginas web en particular.
He recopilado aqu alguno de los otros cursos que sobre este tema hay en la red.
El curso puede ser seguido de forma lineal o, a travs de los enlaces a cada uno de los
apartados:
Nota: El curso est creciendo. He introducido unos apartados que los he colocado
bajo la etiqueta de "avanzado". No es necesariamente que lo introducido all sea
especialmente difcil; a veces s. Otras veces es, simplemente, una ampliacin a lo
trabajado en el resto del curso. Se accede, desde contenidos, o desde el icono desde
cada una de las pginas.
1.- Antes de empezar.

Sitate con el puntero del ratn sobre cualquier punto vaco de esta pgina que ests
leyendo en estos momentos. Pulsa el botn derecho de tu ratn. Se abrir el siguiente
men contextual:
Si, en vez del Explorer, ests leyendo esta pgina con el Firefox, el men contextual
ser algo distinto:
A continuacin elige la opcin sealada en cada uno de los casos. Vers algo as:
En el caso de que ests con el Explorer. O algo as:
En el caso del Firefox.

Pues bien, en ambos casos, ests visualizando el cdigo fuente que da origen a la
pgina que ests leyendo en estos momentos. Es decir, es lo que hay que escribir para
que la pgina se muestre tal cual la ests viendo.
Probablemente tanto smbolo extrao y palabras algo raras te sorprendern y te
llevarn a la idea de que "esto es muy difcil" y "no es para m". Tranquilo. Sin ser
fcil, el lenguaje html est al alcance de cualquier persona, y las cosas, paso a paso, se
pueden hacer algo ms sencillas.
2.- Empezando.
El cdigo fuente, se escribe en un procesador de texto. Nosotros lo vamos a hacer con
el Bloc de notas. Para abrir el Bloc de Notas, le damos a Inicio > Todos los programas
> Accesorios > Bloc de notas. Se abrir una ventana como sta:
Dependiendo de cmo est configurado tu ordenador, quiz no encuentres el Bloc de

notas en esta ruta.
A continuacin debes saber que las dos etiquetas fundamentales dentro de las cuales
tiene que ir nuestro cdigo fuente son <html> como etiqueta de apertura y </html>
como etiqueta de cierre. Despus, todo lo que ser visible al visitar la pgina con el
navegador, debe de estar entre las etiquetas <body> cuerpo, en ingls, como etiqueta
de apertura y </body> como etiqueta de cierre.
Nota: Las etiquetas tambin se pueden escribir con letras maysculas: <HTML>
<BODY>...Nosotros vamos a optar por las minsculas por ser lo que se est
imponiendo de acuerdo con las ltimas normas.
Vamos a escribir algo en nuestra pgina. Por ejemplo Bienvenid@. Lo escribiremos
entre <body> y </body>. Nuestro cdigo quedar as:
Ahora tenemos que guardar nuestro documento en alguna parte del ordenador y
muy importante! con un nombre y una extensin especial. El nombre va a ser index
(ya veremos porqu este nombre ms adelante) y su extensin .html
Tambin se podra guardar con la extensin .htm (el resultado es exactamente el

mismo).
El sitio puede ser cualquier parte del ordenador. Para tenerlo accesible, lo vamos a
guardar en el Escritorio: Le damos a Archivo > Guardar
Nos aparecer la ventana de seleccin de directorio:
Elegimos Escritorio y le llamamos index.html

Observa que en Tipo no hemos cambiado nada. No es necesario al haber includo la
extensin .html en el nombre del archivo.
Podemos visualizarlo para ver si la pgina funciona....
3.- Mi primera pgina.
Ya podemos ir al Escritorio para abrir nuestra pgina.
Si el navegador predeterminado es el Explorer, el icono de nuestra pgina se
visualizar as
. Si, en cambio, es el Firefox el navegador predeterminado, el
icono de nuestra pgina ser ste:

. En ambos casos es conveniente que
visualicemos la pgina con los dos navegadores para controlar posibles fallos en la
escritura del cdigo ya que, puede ocurrir, que un navegador sea sensible al fallo y
otro no.
Nota: Estoy dando por hecho que tienes dos navegadores como mnimo instalados en
el ordenador. El Internet Explorer y el Firefox. Es muy importante que tengas otro
navegador, aparte del Explorer. Yo te recomiendo el Firefox. Si no lo tienes instalado,
lo puedes descargar e instalar desde este vnculo.
Como todava la mayora de los usuarios utilizan el Internet Explorer ms que ningn
otro navegador, vamos a tenerlo como navegador predeterminado (de momento). Si no
lo tienes as, lo puedes hacer abriendo el Explorer y en el men superior eliges
Herramientas > Opciones de Internet...
Elegimos la pestaa Programas:
Y pinchamos en el botn Restablecer configuracin Web...
Desactiva la opcin Restablecer tambin la pgina principal y le das al S

Aparecer el mensaje de confirmacin que debers Aceptar:
Observa que el icono de nuestra pgina en el escritorio tiene el del Explorer:

Si haces doble clic sobre l, se te abrir la pgina con este navegador. Para abrirlo con
el Firefox, una posibilidad es hacerlo pinchando con el botn derecho del ratn y, en el
men contextual, elegir la opcin del Firefox
Vamos a ver nuestra pgina: Hacemos doble clic sobre el icono y ...
La verdad no es una pgina muy espectacular pero... los comienzos deben ser
humildes.
4.- El otro navegador.

Hemos quedado que nuestra pgina deba visualizarse, tambin, con el Firefox.
Y ya hemos dicho tambin, que una forma era hacerlo desde el men contextual
pinchando con el botn derecho del ratn sobre el icono del archivo.
Otra forma es hacerlo abriendo el programa y yendo a buscar el archivo a abrir.
Le damos a Inicio > Todos los programas > Mozilla Firefox > Mozilla Firefox
Y, cuando se abra el programa, darle a Archivo > Abrir archivo...
Para elegir el archivo a abrir:
Vemos nuestro trabajo abierto con el Firefox:
A partir de este momento, es conveniente tener los dos navegadores minimizados en la

barra de tareas para actualizar y visualizar rpidamente con cada uno de los
navegadores los cambios efectuados.
5.- Mejorando la pgina.
5.1.- Centrar el texto.

Si queremos que nuestro saludo: Bienvenid@ aparezca en el centro de la pgina,
escribimos delante del saludo la etiqueta <center> y al final del mismo la etiqueta de
cierre </center>
El cdigo quedara as:
Guardamos los cambios:
Minimizamos y comprobamos los resultados con el Explorer (lo recuperamos desde la

barra de tareas):
Si observamos que nuestro mensaje no aparece centrado le damos al botn

ocurrir que no haya puesto al da los cambios:
. Puede
Minimizamos y abrimos el Firefox. Lo mismo. Si observamos que no ha puesto los

cambios al da le damos al botn
Minimizamos.
Nota: Es conveniente tener los tres programas abiertos: Los dos navegadores y el Bloc
de notas. Si cerramos los programas, podemos recuperar el Bloc de notas a partir del
Explorer. Botn derecho del ratn > Ver cdigo fuente. Se abrir el Bloc de notas.
Puedo hacer los cambios que se sealan en este manual, guardar y minimizar. Abrir
cada navegador y Actualizar o Recargar.

Otra forma de recuperar el Bloc de notas es abrirlo desde Inicio > Todos los
programas > Accesorios > Bloc de notas. Una vez abierto el programa, buscamos
nuestro index.html en el escritorio. Archivo > Abrir y buscamos el escritorio. Tienes
que observar que en Tipo est seleccionado Todos los archivos. En caso contrario no
vers el index.html
5.2.- Aumentar el tamao del texto.

Nuestro mensaje es algo pequeo. Podemos aumentar su tamao empleando las
etiquetas de encabezados. Las etiquetas van desde el <h1> (h de head, en ingls,
cabeza) para la ms grande, al <h6> para la ms pequea.
Vamos a poner el tamao mayor:
Le damos a Archivo > Guardar , minimizamos y comprobamos los cambios con cada
uno de los navegadores
No olvidarse de dar al botn Actualizar en el caso de no ver los cambios a la primera.
5.3.- Poner un color de fondo.

Si deseamos poner un color de fondo a toda la pgina, lo tenemos que hacer dentro de
la etiqueta <body> pues afecta a todo el documento. Esto que se escribe dentro de una
etiqueta se denomina atributo. Los colores deben escribirse mediante el denominado
cdigo hexadecimal que consiste en 6 cifras/letras agrupadas de dos en dos, que nos
indican la cantidad de rojo, verde y azul que contiene ese color, o bien, con la palabra
inglesa que corresponde al color.
Nosotros vamos a poner el color rojo al fondo de la pgina. Lo conseguimos
escribiendo la etiqueta <body> con su atributo como sigue: <body bgcolor="red">
( bg de background ).
Guardamos los cambios y abrimos cada uno de los navegadores para comprobar los
resultados:
Si deseas profundizar en este tema de los colores, pulsa el

botn...
5.4.- Cambiar el color del texto.

Para cambiar el color del texto empleamos la etiqueta <font> con su atributo color.
Vamos a cambiar el color negro del texto, al color blanco.
Podramos emplear el nombre en ingls del color, igual que hemos hecho con el fondo.
La etiqueta quedara <font color="white">. Vamos ahora, a colocar el cdigo
hexadecimal de este color que es el ffffff. La etiqueta quedara as: <font
color="#ffffff">. La etiqueta se debe cerrar sin su atributo.
Guardamos los cambios, minimizamos y abrimos los navegadores actualizando si es

necesario:
5.5.- Saltos de lnea.

A partir de este momento ya no vamos a incluir en este manual la imagen de cada uno
de los navegadores abriendo la pgina. En su lugar vamos a hacer un enlace para que
se abra una ventana nueva de tu navegador al leer estas pginas. Pero el proceso que
se debe seguir para construir las pginas no ha cambiado:
1. Modificar/ampliar el cdigo en el bloc de notas.
2. Guardar los cambios.
3. Abrir el Explorer y Actualizar si es necesario.
4. Abrir el Firefox y Recargar si es necesario.
Vamos, ahora, a incluir una nueva lnea en nuestra pgina: Por ejemplo vamos a
poner: A mi primera pgina web:
Guardamos los cambios y abrimos cada uno de los navegadores para comprobar los
resultados: index.html
Qu ha pasado? Esto no era lo previsto.
Lo que ocurre es que el salto de lnea que hemos hecho en el cdigo no lo reconocen los
navegadores. Para que el salto de lnea se incorpore hay que hacerlo con la etiqueta
<br> del ingls break, romper. Esta etiqueta no tiene cierre.
El cdigo quedara as:
Veamos ahora el resultado: index.html

Ahora s que es lo que queramos.
Nota: Puedes comprobar el cdigo que genera la pgina que visualizas en la ventana
emergente pinchando con el botn derecho del ratn y eligiendo Ver cdigo fuente (si
lo ves con el I. Explorer) o Ver cdigo fuente de la pgina (si lo ves con el Firefox).
5.6.- Prrafos.
Cuando queremos introducir una lnea en blanco, utilizamos la etiqueta <p> de
prrafo. Esta etiqueta admite su correspondiente cierre </p>, aunque no es necesario.

Si queremos separar ms no es suficiente repetir la etiqueta <p>. Hay que unir las dos
etiquetas y repetir ambas:

Existe otra posibilidad: Consiste en combinar la etiqueta de apertura de prrafo con
la de cierre escribiendo dentro un caracter invisible: (non breaking space):

La cadena tambin se puede utilizar para aadir un espacio en blanco extra a
la separacin entre dos palabras, repitindolo cuantas veces haga falta. Aunque, su
definicin inicial, era para aadir un espacio de separacin entre dos palabras "que
no se pueda romper" caiga, por las configuraciones de pantalla diferenciadas, donde
caiga.
6.- La cabecera.
Cmo van las cosas? Espero que, hasta aqu al menos, todo est yendo bien.
Por simplificar un poco no habamos comentado nada de una parte importante que
tienen las pginas web: Es la cabecera. Como has podido comprobar, no es
imprescindible pero s muy importante. La cabecera se coloca entre las etiquetas
<head> y </head> . Va justo despus de la primera etiqueta <html> y antes del
<body>. Constituye la parte no visible del documento:
<html>
<head>
</head>
<body>
Slo se ve este texto
</body>
</html>
resultado
De momento, lo que ms nos interesa poner dentro de la cabecera del documento es el
ttulo de la pgina.
Observa que en la barra de ttulo, la barra superior aparece:
Para arreglar esto, para poner el ttulo al documento, hay que introducir dos nuevas
etiquetas dentro de la cabecera. Son las etiquetas <title> de apertura y </title> de
cierre. Y, entre ellas ponemos la frase que defina nuestro documento:
<html>
<head>
<title>
Ejercicio 1
</title>
</head>
<body>
Slo se ve este texto
</body>
</html>
resultado
Comprueba que, en la barra superior del navegador, barra de ttulo, aparece el ttulo
que acabamos de poner al documento:
Si tienes experiencia en internet, probablemente te hayas encontrado con pginas en

las que aparece Documento sin ttulo o Untitled document. Bien, ya sabes el porqu:
No pusieron nada entre <title> y </title>
Por ejemplo, esto es uno de los enlaces que aparece en la bsqueda con
del trmino Tutorial html:
En la cabecera pueden ir muchas ms cosas pero, de momento, es lo nico que

necesitamos.
7.- Listas.
A menudo hay que hacer listas de objetos, de conceptos, de definiciones...

Las listas pueden ser no numeradas (el orden no importa) y numeradas:
7.1.- Listas no numeradas.

Comienza el listado con la etiqueta <ul> (unordered list) y su final con la etiqueta de
cierre </ul>. Cada objeto que forma la lista va precedido de la etiqueta <li> (list item)
sin etiqueta de cierre.
<html>
<head>
<title>
Listas no numeradas
</title>
</head>
<body>
Mis aficiones:
<ul>
<li> El cine.
<li> La montaa.
<li> La msica.
</ul>
</body>
</html>
resultado
7.2.- Listas numeradas.

Comienza el listado con la etiqueta <ol> (ordered list) y su final con la etiqueta </ol>.
Cada objeto que forma la lista va precedido, igual que en las anteriores de la etiqueta
<li> sin cierre.
<html>
<head>
<title>
Listas numeradas
</title>
</head>
<body>
Mis preferencias:
<ol>
<li> Viajar.
<li> Salir con mis
amigos.
<li> Dormir.
</ol>
</body>
</html>
resultado
7.3.- Listas anidadas.

Se pueden combinar unas listas dentro de otras: No numeradas y/o numeradas. Hay
que tener, simplemente, cuidado en la colocacin de las etiquetas de apertura y cierre.
<html>
<head>
<title>
Listas anidadas
</title>
</head>
<body>
<h3>Animales:<h3>
<ul>
<li> VERTEBRADOS.
<ul>
<li>Anfibios
<li>Peces
<li>Reptiles
<li>Aves
<li>Mamferos
</ul>
<li> INVERTEBRADOS.
<ul>
<li>Insectos
<li>Arcnidos
<li>Crustceos
<li>Miripodos
</ul>
</ul>
</body>
</html>
resultado
Hemos incorporado la etiqueta de encabezado de tercer orden <h3> para resaltar el
concepto que se va a clasificar. (Recuerda que los encabezados van del <h1> el mayor
al <h6> el menor).
7.4.- Listas de definiciones.

Son apropiadas, como su nombre indica, para establecer listados de trminos con sus
definiciones. Las etiquetas de apertura y cierre son <dl> y </dl> (definition list). Los
conceptos a definir van con la etiqueta <dt> (definition term) y las definiciones con la
etiqueta <dd> (definition definition).
<html>
<head>
<title> Listas de
definiciones
</title>
</head>
<body>
<dl>
<dt>Concepto 1
<dd>Definicin del
Concepto 1
<dt>Concepto 2
<dd>Definicin del
concepto 2
</dl>
</body>
</html>
resultado
8.- Sangrados.
Se realizan con la etiqueta <blockquote> de apertura y su correspondiente de cierre.
Aumentan, tambin, el interlineado, por eso se emplean para hacer una cita textual.
<html>
<head>
<title>
Sangrados
</title>
</head>
<body>
Este texto est justificado a la
izquierda.
<blockquote>
ste est sangrado respecto del
anterior
</blockquote>
ste vuelve a estar justificado a la
izquierda.
</body>
</html>
resultado
Se puede utilizar ms de una etiqueta si deseamos un sangrado mayor:
<html>
<head>
<title>
Sangrados mltiples
</title>
</head>
<body>
Este texto est justificado a la
izquierda.
<blockquote>
<blockquote>
<blockquote>
ste est ms sangrado
</blockquote>
</blockquote>
</blockquote>
ste vuelve a estar justificado a la

izquierda.
</body>
</html>
resultado
9.- Negrita, cursiva y subrayado.
Para remarcar una cadena de caracteres empleamos las etiquetas <b> y </b> (bold).
Para hacer que un texto se muestre en cursiva: <i> e </i> (italic).
Para subrayar empleamos <u> y </u> (underlined).
<html>
<head>
<title>
Negrita, cursiva y
subrayado
</title>
</head>
<body>
Los textos
siguientes:<p>
<b>ste est en
negrita</b><br>
<i>ste est en
cursiva</i><br>
<u>ste est
subrayado</u>
</body>
</html>
resultado
10.- Ms formato: Subndices y superndices.
El subndice se consigue con la etiqueta <sub> y su correspondiente de cierre.
El superndice con la etiqueta <sup> y su correspondiente de cierre.
<html>
<head>
<title>
Subndices y superndices
</title>
</head>
<body>
f<sub>(x)</sub>=
X<sup>2</sup> + 5X
</body>
</html>
resultado
Si deseas saber sobre caracteres
especiales ...
11.- Lnea de separacin.
Se consigue con la etiqueta <hr> (horizontal rule) sin etiqueta de cierre.
<html>
<head>
<title>
Barra de separacin
</title>
</head>
<body>
Pongamos una
separacin:
<hr>
</body>
</html>
resultado
Si deseas profundizar en este tema, pulsa
el botn...
12.- Comentarios.
Si queremos introducir texto que sirva de recordatorio de lo que hicimos o dejamos de
hacer o para dar explicaciones a otras personas que pueden acceder al cdigo pero
que no queremos que se visualicen en pantalla empleamos la etiqueta (medio etiqueta)
 para el final del comentario.
<html>
<head>
<title>
Comentarios
</title>
</head>
<body>
Los textos siguientes:<p>

<blockquote>
<b>ste est en
negrita</b><br>
<i>ste est en
cursiva</i><br>
<u>ste est subrayado</u>
</blockquote>
</body>
</html>
resultado
13.- Tablas.
Empezamos con un tema algo complejo.
Una tabla se define entre las etiquetas <table> y </table>
A partir de este momento hay que definir las filas de la tabla que se definen con <tr> y
</tr> (table row). Un par de etiquetas para cada una de las filas.
Dentro de cada fila se definen las celdas que forman esa fila con las etiquetas <td> y
</td> (table data).
Vamos a empezar definiendo una tabla de 3 filas y 3 columnas (para nuestro lenguaje
sern tres filas, cada una de ellas con tres celdas):
<html>
<head>
<title>
Tablas 1
</title>
</head>
<body>
<table>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</table>
</body>
</html>
resultado
Qu ha pasado? No se ve nada. Esto ocurre porque:
1. Dentro de las celdas no hemos puesto nada.
2. La tabla no tiene bordes.
13.1.- Tablas con borde y con casillas vacas.

Vamos a arreglar estos dos temas: Por un lado vamos a indicar que queremos una
tabla con borde. Esto se hace dentro de la etiqueta <table> con el atributo border. As:
<table border>.
Por otro lado, vamos a poner algo dentro de cada celda. Pero, en lugar de poner algo
concreto y visible, vamos a utilizar una cadena de caracteres que ya hemos visto que
se utilizaba para aadir un espacio a la separacin entre palabras:
<html>
<head>
<title>
Tablas 2
</title>
</head>
<body>
<table border>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
</body>
</html>
resultado
13.2.- Otros atributos de la tabla.

Podemos hacer que nuestra tabla est centrada en la pgina con el atributo
align="center". O "left" o "right"
Que ocupe una determinada proporcin del espacio en horizontal con el atributo
width="50%". O "30%" o "70%" o...
Que el borde sea mayor que el establecido por defecto (que es 1): border="3". O ...
Que tenga un color de fondo con el atributo bgcolor="#6699FF" . O cualquier otro
(ver colores html).
<html>
<head>
<title>
Tablas 3
</title>
</head>
<body>
<table border="3" align="center"
width="50%"
bgcolor="#ffcccc">
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
</body>
</html>
resultado
13.3.- Atributos de las filas y las celdas.

De manera similar a los atributos de la tabla, podemos definir todos esos parmetros a
las filas o a las celdas.
Por ejemplo podemos empezar asignando a las celdas de la primera fila un ancho
diferente. Si a este respecto no hago nada ms en las otras celdas, lo que haga afectar
a todas las columnas.
Puedo definir colores diferenciados. En este caso, el color de la fila o de la celda
prevalecer sobre el definido en el conjunto de la tabla
<html>
<head>
<title>
Tablas 4
</title>
</head>
<body>
<table border="3" align="center"
width="50%"
bgcolor="#ffcccc">
<tr>
<td width="10%"> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td bgcolor="#ff00cc"> </td>
<td bgcolor="#ffcc00"> </td>
<td bgcolor="#00cccc"> </td>
</tr>
</table>
</body>
</html>
resultado
13.4.- Tablas con celdas de distinto tamao.

Es bastante habitual tener que disear este tipo de tablas: Una celda puede ocupar dos
columnas, tres,... o dos filas, tres,...
Supongamos que tenemos que disear una tabla como sta:
Para no liarse, lo primero que hay que tener claro es el nmero mximo de columnas
y filas que tiene la tabla: En este caso es 4 columnas y 3 filas. Pues bien, tendremos
que establecer 4 celdas en cada una de las 3 filas. Luego, agruparemos celdas con las
etiquetas correspondientes.
Empezamos con la primera fila. Se extiende ocupando las 4 columnas. La etiqueta que
debemos emplear es un atributo para la primera celda de la primera fila (debe
"extenderse" sobre las cuatro columnas) <td colspan="4">. Lgicamente la primera
fila ya se ha acabado.
Pasamos a la segunda fila. La primera celda se extiende sobre 2 filas. Escribiremos
<td rowspan="2">. Despus de esta celda siguen las otras tres que son normales.
Por ltimo definimos la tercera fila. Como la primera celda ya ha sido definida en la
fila anterior, slo nos queda la segunda celda, que es normal, y la tercera que se
extiende sobre dos columnas <td colspan="2">
Pondremos un para meter algo aunque no se vea y, para asegurarnos de la

simetra de la tabla, estableceremos el ancho con el atributo width en la tabla (30%
por ejemplo) y una proporcin del espacio total de la tabla en cada columna (25%) y
lo haremos en las celdas que nos parezca (en las "normales" de ancho).
El cdigo podra quedar as:
<html>
<head>
<title>
Tablas 5
</title>
</head>
<body>
<table border align="center" width="30%"
bgcolor="#ffcccc">
<tr>
<td colspan="4"> </td>
</tr>
<tr>
<td rowspan="2"
width="25%"> </td>
</tr>
<tr>
<td> </td>
</tr>
</table>
</body>
</html>
resultado
13.5.- Ttulo de la tabla.

Disponemos de una etiqueta para poner el ttulo de la tabal. Es <caption> con su
correspondiente de cierre. Se coloca despus de la etiqueta de definicin de la tabla y
aade un texto por encima de la tabla y centrado con sta.
<html>
<head>
<title>
Tablas 6
</title>
</head>
<body>
bgcolor="#ffcccc">
<caption>ste es el ttulo de la
tabla</caption>
<tr>
</tr>
<tr>
<td rowspan="2"
width="25%"> </td>
</tr>
<tr>
<td> </td>
</tr>
</table>
</body>
</html>
resultado
13.6.- Celdas de cabecera.

Disponemos de una etiqueta especial para aquellas celdas que son cabecera respecto
de las celdas situadas debajo de ellas. Son las etiquetas <TH> (table header). El texto
situado en ellas queda centrado y en negrita. Lo nico que hay que hacer es sustituir
la etiqueta normal de celda por esta otra.
<html>
<head>
<title>
Tablas 7
</title>
</head>
<body>
bgcolor="#ffcccc">
<caption>Ejemplo de celdas de
cabecera</caption>
<tr>
<th>Nombre</th>
<th>Apellido 1</th>
<th>Apellido 2</th>
</tr>
<tr>
<td width="25%">Jos</td>
<td width="25%">Prez</td>
<td width="25%">Prez</td>
</tr>
<tr>
<td>Luis</td>
<td>Romn</td>
<td>Snchez</td>
</tr>
</table>
</body>
</html>
resultado
13.7.- Alineaciones dentro de las celdas.

Veamos como se pueden alinear los objetos dentro de las celdas de una tabla:
xxx
xxx
xxx
xxx
xxx
xxx
Primera fila (alineacin horizontal):
En la primera celda el texto est alineado a la izquierda. No hay que hacer

nada, es la alineacin que se establece por defecto. (Podra escribirse, de todas
formas: <td align="left">).
En la segunda celda el texto est alineado en el centro: <td align="center">.
En la tercera celda el texto est alineado a la derecha: <td align="right">.
Segunda fila (alineacin vertical):
En la primera celda el texto est alineado en la parte superior: <td

valign="top">.
En la segunda celda el texto est alineado en la parte central. No hay que hacer
nada, es la alineacin vertical establecida por defecto. (Podra escribirse, de
todas formas: <td valign="middle">) .
En la tercera celda el texto est alineado en la parte inferior: <td

valign="bottom">.
Para observar mejor los resultados se ha forzado la altura de las celdas a 50 pxeles.
Basta escribirlo en la primera celda de cada fila: <td height="50"> pero podra
escribirse en todas ellas.
<html>
<head>
<title>
Tablas 8
</title>
</head>
<body>
<table border width="60%" align="center"
bgcolor="#ffffcc">
<caption>Alineaciones de celdas</caption>
<tr>
<td width="33%" height="50">xxx</td>
<td width="34%"
align="center">xxx</td>
<td width="33%"
align="right">xxx</td>
</tr>
<tr>
<td height="50"
valign="top">xxx</td>
<td align="center">xxx</td>
<td align="right"
valign="bottom">xxx</td>
</tr>
</table>
</body>
</html>
resultado
13.8.- Separaciones entre celdas y entre borde y contenidos.

La separacin por defecto entre las celdas es de 2 pxeles. Se puede modificar esta
distancia con el atributo de table cellspacing. Tabla con cellspacing de 15 pxeles:
xxxx
xxxx
xxxx
xxxx
xxxx
xxxx
La separacin entre el borde la tabla y el contenido de las celdas es de 1 pxel. Se

puede modificar con el atributo cellpadding de la etiqueta table. Tabla con cellpadding
de 15 pxeles:
xxxx
xxxx
xxxx
xxxx
xxxx
xxxx
En la segunda tabla se ha aumentado la altura de las celdas a 70 pxeles para observar

la alineacin vertical.
Veamos los cdigos:
<html>
<head>
<title>
Tablas 9
</title>
</head>
<body>
bgcolor="#ffffcc" cellspacing="15">
<caption>
Tabla con espacio entre celdas de 15
pxeles
</caption>
<tr>
<td width="33%"
height="50">xxxx</td>
<td width="34%"
align="center">xxxx</td>
<td width="33%"
align="right">xxxx</td>
</tr>
<tr>
<td height="50"
valign="top">xxxx</td>
<td align="center">xxxx</td>
<td align="right"
valign="bottom">xxxx</td>
</tr>
</table>
</body>
</html>
resultado
<html>
<head>
<title>
Tablas 10
</title>
</head>
<body>
bgcolor="#ffffcc" cellpadding="15">
<caption>
Tabla con "cellpadding" de 15 pxeles
</caption>
<tr>
<td width="33%"
height="70">xxxx</td>
<td width="34%"
align="center">xxxx</td>
<td width="33%"
align="right">xxxx</td>
</tr>
<tr>
<td height="70"
valign="top">xxxx</td>
<td align="center">xxxx</td>
<td align="right"
valign="bottom">xxxx</td>
</tr>
</table>
</body>
</html>
resultado
14.- Imgenes.
La etiqueta para introducir una imagen en nuestra pgina es <img src="nombre.gif">
(src de source en ingls fuente u origen de la imagen) y siendo nombre el nombre que
tiene la imagen y .gif su formato.
La etiqueta funcionar bien siempre y cuando la imagen est en la misma carpeta en
la que se encuentra la pgina web desde la que la llamamos. Es habitual (y
recomendable) colocar todas las imgenes en otra carpeta interna, en ese caso, habr
que darle la ruta en la cual se encuentra nuestra imagen. Supongamos que la imagen
nombre.gif se encuentra en una carpeta denominada imag, pues bien, la etiqueta sera
<img src="imag/nombre.gif">
Veamos un ejemplo:
En este caso el formato de la imagen es .jpg (junto con el .gif y el .png los formatos de
imgenes ms habituales en internet). La imagen se denomina riglos2.jpg
<html>
<head>
<title>
Imgenes 1
</title>
</head>
<body>
<center>
<img
src="imag/riglos2.jpg">
</center>
</body>
</html
resultado
14.1.- Atributos de la imagen width y height.

Es muy importante introducir las medidas de la imagen (las podemos averiguar desde
un programa grfico como PhotoShop) dentro de la etiqueta <img>. De esta manera
cuando el navegador va recorriendo la pgina reserva el espacio justo para la imagen
y, el resto de la pgina se va cargando sin problemas mientra se acaba de cargar la
imagen. En nuestro caso la imagen tiene 150 de ancho y 230 de alto. Escribiramos:
<html>
<head>
<title>
Imgenes 2
</title>
</head>
<body>
<center>
<img src="imag/riglos2.jpg"
width="150"
height="230">
</center>
</body>
</html>
resultado
14.2.- Texto alternativo.

Es otro atributo que se coloca por varios motivos, el principal es que aquellas personas
que visiten nuestra pgina sin descargarse las imgenes (habitual en los que tienen
una mala conexin y no desean eternas descargas) tengan, al menos, una orientacin
del contenido de la misma. Debe ser una descripcin corta del tema de la imagen. Se
introduce con la cadena alt="descripcin de la imagen" y, al ser un atributo, se coloca
como los dos anteriores, dentro de la etiqueta <img>.
<html>
<head>
<title>
Imgenes 3
</title>
</head>
<body>
<center>
<img src="imag/riglos2.jpg"
width="150"
height="230"
alt="Mallos de Riglos
(Huesca)">
</center>
</body>
</html>
resultado
Cuando el visitante (si navega con el Internet Explorer) se acerque con el cursor a la
imagen, aparecer un rectngulo con el texto alternativo:
Nota: El hecho de que aparezca el texto alternativo al acercarnos con el cursor a la
imagen, es una desviacin del Explorer. Existe otro atributo para que esto se produzca
independientemente del navegador que empleemos. Es el atributo title.
Y cuando navegue sin bajarse las imgenes se ver as:
14.3.- Colocar una imagen como fondo de la pgina.

Simplemente tenemos que colocar dentro de la etiqueta <body> el atributo
background con el nombre y/o direccin de la imagen que queremos colocar.
Supongamos que quiero colocar una imagen denominada claro1.gif que est dentro de
la carpeta imag. El cdigo ser el siguiente:
<html>
<head>
<title>
Imagen como fondo de pgina
</title>
</head>
<body
background="imag/claro1.gif">
<center>
<h2>
Esta pgina tiene una imagen
de fondo.
</h2>
</center>
</body>
</html>
resultado
15.- Vnculos.
Es una de las herramientas ms interesantes de los documentos html. La sintaxis para
establecer un enlace es: <a href="destino">texto</a>
Donde destino es el documento con el que se enlaza y texto es la palabra o palabras
que, al pulsar, nos llevan a ese destino (tambin puede ser una imagen).
15.1.- Vnculos a otro documento del mismo sitio.

Nuestro sitio estar formado por varios archivos generadores de varios documentos.
Los documentos tendrn la extensin .html (o .htm). Para establecer el vnculo
escribiremos sencillamente el nombre del documento en el destino y, entre las
etiquetas de apertura y cierre la palabra o palabras que activarn el vnculo.
Como ejemplo vamos a establecer un enlace a la primera pgina de este sitio (primer
documento) cuyo archivo tiene como nombre index.htm
<html>
<head>
<title>
Vnculos 1
</title>
</head>
<body>
<center>
<a href="index.htm">
Ir al inicio de este
curso
</a>
</center>
</body>
</html>
resultado
15.2.- Vnculos a otro documento externo al sitio.

En este caso en destino deberemos escribir toda la direccin URL del sitio.
Vamos a establecer un enlace a la pgina del buscador Google cuya direccin URL es
http://www.google.es
<html>
<head>
<title>
Vnculos 2
</title>
</head>
<body>
<center>
<a
href="http://www.google.es
">
Ir a Google
</a>
</center>
</body>
</html>
resultado
Muchas veces puede resultar interesante escribir la propia direccin URL como
activador del vnculo:
<html>
<head>
<title>
Vnculos 3
</title>
</head>
<body>
<center>
Ir a Google:<br>
<a
href="http://www.goog
le.es">
http://www.google.es<
/a>
</center>
</body>
</html>
resultado
15.3.- Vnculos a otra parte del mismo documento.

A veces cuando el documento es muy extenso conviene establecer formas rpidas para
subir o bajar a una parte determinada del documento.
Para realizar esto, primero hay que establecer un ancla o marca en la/s parte/s del
documento a los que queremos acceder de forma rpida.
La sintaxis del ancla es <a name="ancla1"></a> ponindolo en el punto de destino.
No hace fata que haya nada entre la etiqueta de apertura y cierre.
En el punto activador escribiremos <a href ="#ancla1"> Ir a la parte tal </a>.
Como ejemplo vamos a movernos por las partes anteriores a esta lnea del punto en el
que estamos.
En primer lugar hemos nombrado las anclas con el mismo nombre que tienen los
diferentes apartados (cambiando el punto por un guin bajo) a los que vamos a
desplazarnos:
cdigo
Ir al apartado 15
<a href="#15>Ir al apartado 15</a>
Ir al apartado 15.1
<a href="#15_1>Ir al apartado 15.1</a>
Ir al apartado 15.2
Ir al apartado 15.3
15.4.- Vnculos a una parte concreta de otro documento de nuestro sitio.

Se pueden combinar este ltimo tipo de enlaces con el vnculo a otro documento de
nuestro sitio.
La sintaxis sera <a href="paginax.htm#ancla"> Ir al apartado tal de tal pgina </a>
<html>
<head>
<title>
Vnculos 4
</title>
</head>
<body>
<center>
<a href="diez.htm#13_2">
Ir al apartado 13.2 de
este
curso
</a>
</center>
</body>
</html>
resultado (maximiza la ventana)
15.5.- Vnculos de correo electrnico.

Vamos a ver los enlaces a una direccin de correo electrnico. Cuando el navegante
pinche sobre el activador del vnculo, se abrir el programa de correo con la direccin
del destinatario ya escrita en el mensaje.
La sintaxis es <a href="mailto:login@servidor.es"> Mndame un mensaje </a>
<html>
<head>
<title>
Vnculos 5
</title>
</head>
<body>
<center>
<a
href="mailto:apuente@roble.pntic.mec
.es">
Dime lo que piensas de este curso
</a>
</center>
</body>
</html>
resultado
15.6.- Imagen como vnculo a otro documento.

En lugar de texto podemos utilizar una imagen como vnculo.
En primer lugar deberemos escribir la etiqueta de apertura del vnculo y luego la
etiqueta de inclusin de la imagen cerrando, posteriormente, la etiqueta del vnculo.
Para este tipo de vnculos se suelen emplear pequeas imgenes, aunque, a veces,
tambin se utilizan imgenes de gran formato (sobre todo en los portales de los sitios).
<html>
<head>
<title>
Vnculos 6
</title>
</head>
<body>
<center>
Visita la pgina de
TERRA:<P>
<a
href="http://www.terra.es">
<img
src="imag/logo_terra.gif">
</a>
</center>
</body>
</html>
resultado
Para eliminar este borde tan antiesttico que se coloca alrededor de la imagen tenemos
el atributo border="0"
<html>
<head>
<title>
Vnculos 7
</title>
</head>
<body>
<center>
Visita la pgina de
TERRA:<p>
<a
href="http://www.terr
a.es">
<img
src="imag/logo_terra.
gif"
border="0">
</a>
</center>
</body>
</html>
resultado
Si deseas profundizar en este tema, pulsa el botn...
16.- Marcos.
La estructura de los marcos o frames es un poco compleja.
Empezamos definiendo una estructura de marcos: Consiste en una divisin de la
pantalla en varias zonas de tal forma que, en una de las partes, puede haber un men
de vnculos, por ejemplo, que permanecer constante y, en la otra, parte principal o
main frame, se cargarn las pginas pinchadas desde el frame de vnculos.
Puede haber ms partes, por ejemplo, una parte superior con el ttulo del sitio que
permanecer constante segn vayamos navegando.
Vamos a empezar definiendo una estructura de dos frames: Una columna izquierda,
ms estrecha, y una columna derecha, ms ancha, como frame principal o main
frame.
Para empezar hay que saber que, de entrada, tenemos que generar tres documentos
(tres archivos .html):
El primero, el ms extrao, que definir la estructura de los marcos.
El segundo, que se cargar en el marco izquierdo.
El tercero que se cargar en el marco derecho.
Por otro lado, tenemos que decidir, cunto espacio vamos a asignar a cada marco:
Decidimos que el marco izquierdo ocupar el 15% del espacio y el marco derecho, el
resto (o el 85%).
Veamos la sintaxis del primer archivo, la estructura de los marcos:
<html>
<head>
<title>
Estructura de marcos
</title>
</head>
<frameset cols="15%,*">
<frame src="indice.html">
<frame src="saludo.html"
name="principal">
</frameset>
</html>
Esto lo guardamos con el nombre index.html porque va a ser lo que se abra al

principio.
Vamos a comentar un poco la sintaxis empleada:
Lo primero que observamos es que, en vez de la etiqueta <body> hemos

empleado la etiqueta <frameset> en ingls algo as como estructura de marcos.
El atributo cols est definiendo las columnas y el espacio reservado a cada una.
Si, en vez de columnas hubiramos querido establecer dos filas, hubiramos
empleado el atributo rows.
A continuacin decimos que la primera columna va a ocupar el 15% del

espacio. Y, la segunda, el resto. Esto indica el asterisco *. Hubiramos podido,
perfectamente, escribir el tanto por ciento que queda, es decir, el 85%:
<frameset cols="15% , 85%>.
A continuacin viene la etiqueta <frame> (del primer frame, el de la izquierda)

con el atributo src para indicar qu archivo se va a cargar en ese espacio. En
nuestro caso, el archivo se llama indice.html .
Despus viene la etiqueta del segundo marco. En l se cargar el archivo que he

llamado saludo.html .
En este marco principal hay otro atributo que es el nombre que le vamos a dar.
Esto es necesario porque, en este espacio, se van a cargar otros documentos
cuando pulsemos los enlaces y hay que ponerle un nombre para decrselo a los
enlaces. El nombre que yo le he puesto es principal.
Si abrimos, en estos momentos nuestro index.html nos va a salir: resultado

Esto ocurre porque no hemos creado los dos archivos que se tienen que cargar en cada
uno de los dos marcos. Pero ya vemos que el espacio s que se ha diferenciado.
Creo el archivo indice.html que se cargar en el marco de la izquierda:
<html>
<head>
<title>
Marco de la izquierda
</title>
</head>
<body bgcolor="#dfdfdf">
Esto se cargar en la izquierda
</body>
</html>
Y lo guardo como indice.html

Creo el archivo saludo.html que se cargar en el marco de la derecha:
<html>
<head>
<title>
Marco de la derecha
</title>
</head>
<body bgcolor="#ff9999">
<center>
<h1>
Bienvenido a mi pgina web
</h1>
</center>
</body>
</html>
Lo guardamos con el nombre saludo.html
Veamos ahora el resultado

Nos queda por crear un cuarto documento, un cuarto archivo .html para que sirva de
ejemplo en la sintaxis a emplear para que los enlaces se carguen en el frame principal.
Para ello, primero tendremos que crear el documento. Sea algo as:
<html>
<head>
<title>
Documento a cargar en marco
principal
</title>
</head>
<body bgcolor="#ffcccc">
<center>
<h2>
Has pulsado el enlace correctamente
</h2>
</center>
</body>
</html>
Lo guardamos con el nombre enlace.html

Por otro lado, tendremos que modificar el documento indice para poner el vnculo:
<html>
<head>
<title>
Marco de la izquierda con enlace
</title>
</head>
<body bgcolor="#dfdfdf">
<a href="enlace.html"
target="principal">
enlace
</body>
</html>
Lo guardamos con el mismo nombre que tena: indice.html

Veamos el resultado
Si deseas profundizar en este tema, pulsa el botn...
17.- Formularios.
El formulario es una interesante herramienta de toda pgina web. Permite recabar
informacin ordenada de los visitantes, y almacenar esa informacin de alguna
manera.
Nosotros vamos a trabajar un formulario cuyos datos sean enviados a una direccin
de correo electrnico normal y como datos no encriptados.
La otra forma, ms compleja, es ser envado a nuestro servidor a travs de un
programa determinado que deber estar instalado en ese servidor, para almacenar la
informacin y procesarla. Como esto no est al alcance del usuario corriente, vamos a
centrarnos en el primer tipo de formularios.
Los formularios estn dentro de las etiquetas <form> y </form>. Los atributos de la
etiqueta de apertura del formulario indicarn la forma de enviar la informacin:
action="mailto:direcciondecorreo". El formulario ser enviado a la direccin

de correo que pongamos.
method="post". Los datos se enviarn inmediatamente por correo electrnico.
enctype="text/plain". Las respuestas se enviarn sin codificacin.
17.1.- Campo de texto de una lnea.

<html>
<head>
<title>
Formulario 1
</title>
</head>
<body>
<form
action="mailto:login@servidor.es"
method="post" enctype="text/plain">
<table align="center">
<tr>
<td width="50%" align="right">
Escribe tu nombre:
</td>
<td width="50%" alignn="left">
<input type="text" name="Nombre"
size="10"
maxlength="15">
</td>
</tr>
</table>
</form>
</body>
</html>
resultado
Guardamos el formulario con el nombre form1.html
Hemos colocado, dentro del formulario, una tabla con dos columnas para mejorar la
presentacin de los datos: En la columna izquierda, y alineado a la derecha, colocamos
el texto de lo que se pide (en este caso el nombre) y, en la columna de la izquierda y,
alineado a la derecha, el campo de texto:
input type (entrada de tipo) texto.
name es lo que aparecer en el mensaje de correo delante de lo que introduzca

el ususario.
size nos indica el tamao de la caja de texto de una lnea. En este caso 10
caracteres.
maxlenght indica la cantidad mxima de caracteres que puede introducir el

usuario.
De poco sirve el formulario si no tenemos la opcin de enviarlo. As que vamos a

proceder a la introduccin del cdigo necesario. Normalmente, adems del botn de
enviar se suele poner otro para borrar los datos introducidos.
<html>
<head>
<title>
Formulario 2
</title>
</head>
<body>
<form
action="mailto:login@servidor.es"
<tr>
Escribe tu nombre:
</td>
<input type="text" name="Nombre"
size="10"
maxlength="15">
</td>
</tr>
<tr>
<input type="submit" value="Enviar">
</td>
<td width="50%" align="left">
<input type="reset" value="Borrar">
</td>
</tr>
</table>
</form>
</body>
</html>
resultado
Guardamos el archivo con el nombre form2.html
Hemos introducido otra fila en la tabla con:
input type submit (enviar).
value ser lo que aparezca escrito en el botn.
input type reset en ingls borrar.
value ser lo que aparezca escrito en el botn.
Cuando, una vez escrito el dato, el usuario pulse el botn de enviar, aparecer el
siguiente mensaje:
Hay que aceptar para que el formulario sea enviado.

Supongamos que un tal Federico ha rellenado el formulario. En el correo del
destinatario aparecer este mensaje:
Observa como coincide el Nombre con lo que diseamos en el formulario en el campo

name
17.2.- Campo de texto de varias lneas.

Se consigue con la etiqueta <textarea> y su correspondiente de cierre.
Repetimos el formulario anterior eliminando la opcin <text> para simplificar la

lectura del cdigo. Pero, evidentemente, se podran juntar todas las opciones en un
nico formulario.
<html>
<head>
<title>
Formulario 3
</title>
</head>
<body>
<form action="mailto:login@servidor.es"
<tr>
Escribe tus comentarios:
</td>
<textarea name="Comentarios" cols="30"
rows="5">
</textarea>
</td>
</tr>
<tr>
</td>
</td>
</tr>
</table>
</form>
</body>
</html>
resultado
Guardamos el formulario con el nombre de form3.html
Observa las diferencias entre la etiqueta de introduccin de texto en una lnea y la que
acabamos de colocar:
En este caso, la etiqueta tiene apertura y cierre.
El atributo cols indica el ancho del cuadro de texto en nmero de caracteres.
El atributo rows indica el nmero de filas del cuadro de texto. Si el ususario

quiere escribir ms de 5 lneas, el formulario se lo permite.
He hecho una prueba con mi correo. ste es el mensaje recibido:
17.3.- Men de opcin.

Permite elegir entre varias opciones, una nica.
Se introduce de forma similar al cuadro de texto de una lnea <input> pero, ahora el
type es radio el name es el nombre que le damos a ese grupo de opcin, el value lo que
aparecer en el mensaje de correo delante de la opcin elegida. Hay que repetir la
etiqueta tantas veces como opciones de elegir haya.
Si queremos introducir una segunda posibilidad de eleccin deberemos repetir el
proceso pero cambiando el name del grupo de opciones:
<html>
<head>
<title>
Formulario 4
</title>
</head>
<body>
<table border align="center">
<tr>
Elige el grupo de edad en el que te
encuentras:
</td>
<input type="radio" name="Edad"
value="Menor de 18">
Tengo menos de 18 aos.<br>
value="De 18 a 50">
Tengo entre 19 y 50 aos.<br>
value="Ms de 51">
Tengo ms de 51 aos.
</td>
</tr>
<tr>
Valora este curso de HTML:
</td>
<input type="radio" name="Valoracion"
value="Muy bueno">
Me parece muy bueno.<BR>
value="Regular">
Bueno... No est del todo mal.<BR>
value="Malo">
Me parece horroroso
</td>
</tr>
<tr>
</td>
</td>
</tr>
</table>
</form>
</body>
</html>
resultado
Observa como las opciones de cada grupo son excluyentes: Slo podemos elegir una.
Esta es una imagen del resultado del envo de una respuesta:
17.4.- Men de opcin mltiple. Casillas de verificacin.

Es parecido al anterior cambiando el atributo radio por checkbox. Los dems
atributos son similares.
<html>
<head>
<title>
Formulario 5
</title>
</head>
<body>
<form
action="mailto:login@
servidor.es"
method="post"
enctype="text/plain">
<table border
align="center">
<tr>
<td width="50%"
align="right">
Elige tus aficiones:
</td>
<td width="50%"
alignn="left">
<input
type="checkbox"
name="Gustos"
value="Leer">
Me gusta leer.<BR>
<input
type="checkbox"
name="Gustos"
value="Cine">
Ir al cine.<BR>
<input
type="checkbox"
name="Gustos"
value="Gimnasio">
Machacarme en el
gimnasio.<BR>
<input
type="checkbox"
name="Gustos"
value="Botelln">
Hacer botelln con
los amigos.<BR>
<input
type="checkbox"
name="Gustos"
value="Caminar">
Salir al campo a
caminar.
</td>
</tr>
<tr>
<td width="50%"
align="right">
<input type="submit"
value="Enviar">
</td>
<td width="50%"
align="left">
<input type="reset"
value="Borrar">
</td>
</tr>
</table>
</form>
</body>
</html>
resultado
Este es el resultado de un envo:
17.5.- Men desplegable.

Las opciones de eleccin se despliegan en un men para que el visitante elija una.
<html>
<head>
<title>
Formulario 6
</title>
</head>
<body>
<table border align="center">
<tr>
Elige tu mejor da de la semana:
</td>
<select name="Mejor_dia">
<option value=""></option>
<option value="Lunes">Lunes</option>
<option value="Martes">Martes</option>
<option
value="Mircoles">Mircoles</option>
<option value="Jueves">Jueves</option>
<option value="Viernes">Viernes</option>
<option value="Sbado">Sbado</option>
<option value="Domingo">Domingo</option>
</select>
</td>
</tr>
<tr>
</td>
</td>
</tr>
</table>
</form>
</body>
</html>
resultado
Esta la imagen de una respuesta:
17.6.- Campo de contrasea.

Para hacer que un determinado campo de texto no sea visible para las personas que
estn alrededor del usuario (tipo contrasea), empleamos la misma sintaxis que en el
campo de texto de una lnea sustituyendo type="text" por type="password"
<html>
<head>
<title>
Formulario 7
</title>
</head>
<body>
<tr>
Escribe tu contrasea:
</td>
<input type="password" name="Contrasea"
size="8"
maxlength="8">
</td>
</tr>
<tr>
</td>

</td>
</tr>
</table>
</form>
</body>
</html>
resultado
Observa que, aunque al escribir la contrasea aparecen los tpicos asteriscos, en el
mensaje de correo aparece el texto tecleado:
Si deseas continuar con las hojas de estilo...
19.-Redireccionamiento automtico de un documento.

Si queremos que, transcurridos unos segundos, el documento actual se cambie por
otro, debemos incluir, en la cabecera del documento el siguiente cdigo:
<meta http-equiv="refresh"
content="10;URL=uno.htm">
Siendo uno.htm el nombre del documento al que queremos que se cambie el y el
nmero 10 el nmero de segundos de espera antes de producirse el cambio.
Este ejemplo se ha tomado de la pgina inicial de este sitio. Si esperas los 10 segundos
(puede ser que el nmero de segundos sea otro!), la pgina inicial se cambia
automticamente al documento uno.htm. Comprobacin.
Esta misma etiqueta permite cambios de sitio. En este caso hay que escribir la
direccin completa:
<meta http-equiv="refresh"
content="5;URL=http://www.educa.madrid.org/cepa.colmenarv
iejo">
Esta etiqueta es muy interesante cuando, por las razones que sean, decidimos cambiar
nuestra pgina de servidor. La pgina del servidor antiguo se redirecciona
automticamente a la pgina inicial del nuevo sitio. De esta forma, conservamos los
posibles vnculos que tengamos desde otros sitios de internet y los posibles visitantes
podrn llegar a la nueva direccin a partir de los antiguos datos.
La direccin puesta como ejemplo ha sido sacada de un caso real: La pgina del
centro educativo en el que trabajo se ha tenido que trasladar, desde el servidor del
Ministerio de Educacin, al servidor de la Consejera de Educacin de la Comunidad
de Madrid. Gracias a esta herramienta, no se pierden los antiguos vnculos que hay
repartidos por muchas otras pginas. Y, por otro lado, nicamente hay que mantener
al da el sitio colocado en el nuevo servidor.
Ver el ejemplo concreto.
Tanto en un caso como en otro, es interesante colocar un vnculo manual, para
asegurarnos de que, en caso de que el refresh automtico tuviera algn problema, se
pueda ir de todas formas al nuevo sitio.
20.- Publicacin del sitio.

Ya tenemos nuestra pgina creada y, salvo modificaciones y posteriores
actualizaciones, dispuesta para ser publicada. Cmo proceder?
Lo primero es encontrar un servidor que acepte alojar nuestro sitio.
Hay servidores de pago y servidores gratuitos a costa de la pesadsima publicidad.
De estos ltimos, uno de ellos es Geocities. Primero hay que abrirse una cuenta con
Yahoo y, despus, darse de alta para activar el sitio web.
Una vez que tenemos el espacio reservado hay que conocer las caractersticas del
mismo que el propio servidor nos tiene que proporcionar: Por ejemplo cmo se debe
llamar nuestra primera pgina? Normalmente index.htm Hay que alojar nuestra
primera pgina dentro de alguna carpeta especial dentro de nuestro espacio web?
Normalmente no; pero hay algunos servidores como el CNICE del Ministerio de
Educacin espaol que obliga a publicar el sitio dentro de una carpeta que debe
llamarse public_html. Cul es el nombre del servidor? y el del usuario? y la
contrasea? Todos estos datos deben ser proporcionados por el servidor as que no
hay que preocuparse demasiado.
Una vez que tengamos estos datos, hay que hacerse con un programa de transmisin
de ficheros va FTP. Uno de los ms sencillos de utilizar es el WS_FTP. Se descarga
desde la red. No es software libre...
Al abrir el programa, se abre una ventana como sta.
Pincho en el icono de Connect...
Y, ahora en Create Site... Y escribo un nombre para el sitio web. Yo, por ejemplo,
puedo poner Manual HTML este sitio).
Voy avanzando. Elijo FTP como protocolo de transferencia. En la siguiente ventana,

escribo el nombre del servidor:
En la siguiente el nombre de usuario y la contrasea:
Si todo ha ido bien se abre ya la doble ventana anterior con el sitio remoto (el del
servidor) en la derecha:
Ahora me muevo con la flechita en la ventana izquierda para encontrar la carpeta de

mi disco duro en la que tengo los archivos.
Para publicar simplemente elijo el archivo en la ventana de My Computer y pincho en

la flecha
La prxima vez que tenga que conectar ya no necesitar escribir todos los datos.
Bastar dar a Connect, elegir el sitio al que quiera conectar (puedo tener tantos sitios
como sea necesario...) y pulsar Connect
21.- Publicitar el sitio.

En el apartado 6.1.- se explicaba la importancia de las meta etiquetas para que los
buscadores encuentren nuestro sitio.
Para ayudarles en esta labor, hay que dar de alta nuestra pgina en los buscadores
ms importantes (o en todos los que podamos).
Normalmente se produce un efecto multiplicador: En la medida que una determinada
pgina es encontrada por ms buscadores o robots de bsqueda, otros buscadores la
encontrarn de manera ms fcil.
Es una tarea bastante pesada. Hay que rellenar un formulario con los datos de la
pgina: La direccin URL, el ttulo, la descripcin, las palabras clave, la persona
responsable, su direccin de correo, ...
Los resultados, normalmente, no son inmediatos. El buscador se reserva el derecho de
mirar la pgina e incluirla en su base de datos. El proceso, cuando el alta no es de
pago, puede durar un par de meses... pero, al final, y tras perder unas cuntas horas
en este trabajo, el resultado es positivo.
En el apartado 6.1.- ya mencionado pona un ejemplo de bsqueda de una de mis
pginas.
Ahora pongo otro:
Que corresponde a mi pgina Colores

En ninguno de los casos me he gastado un slo euro en promocionarlas. Ahora, eso s,
las meta tags estn muy pensadas y, sobre todo, he dedicado bastante tiempo a dar de
alta cada una de las pginas en todos los buscadores que me han dejado hacerlo de
forma gratuita. En casi todos los casos te van a pedir una cuenta de correo activa,
algunas veces tendrs que contestar el mensaje de correo que te manden. Es
aconsejable crearse una cuenta especfica para este menester. De esta forma evitas ver
tu correo habitual inundado de publicidad y mensajes que no te interesan lo ms
mnimo.
Aqu te pongo unas cuntas pginas que facilitan la tarea de darse de alta en varios
buscadores a la vez:
http://www.losbuscadores.net/alta.html
http://usuarios.lycos.es/altagratis/
http://www.altas-buscadores.com/infogratis.htm
http://www.wguia.com/altaenbuscadores/gratis/
http://www.afiliacion-web.com/
Otro dato importante es que, en la pgina inicial, debes colocar una frase que se
corresponda con el contenido del sitio. Esto suele ser normal, excepto cuando la
primera pgina est ocupada por una imagen o una animacin flash,... En este caso
suele funcionar un truco (ver la nota inmediatamente inferior) que consiste en escribir
en los mrgenes de la imagen, con el mismo color de fondo, el ttulo del sitio. El
navegador no lo visualizar pero s el robot que recoger la informacin y la expondr
en los resultados de la bsqueda. Este truco lo he empleado en la pgina inicial de este
sitio. Pincha con el botn derecho del ratn y selecciona Ver cdigo fuente para
comprobar que antes de la tabla en la que se inserta la imagen, est colocado el ttulo
del sitio: Manual de lenguaje html y alguna descripcin ms del mismo.
Nota muy importante: Google es un buscador muy "refinado" y, el truco que acabo de
explicar no ha funcionado... De hecho me penaliz este sitio por hacer exactamente lo que
he comentado. Entenda, que ocultar la descripcin del sitio escribiendo con el mismo color
que tiene el fondo es una forma de "engaar" o "querer engaar". As, he estado varios
meses sin que este buscador localizase este sitio. Extraado por lo que ocurra, me puse en
contacto con ellos y, sin que me diesen pistas explcitas, descubr que era se el motivo por
el que me haban penalizado el sitio, no mostrando los resultados de la bsqueda. Quit esa
informacin y, al tiempo, mi sitio era encontrado. Tambin de manera espectacular en el
primer puesto, si escribo en la cadena de texto "manual de lenguaje html"
En mi bitcora expliqu en su da estos avatares: http://angelpuente.acelblog.com/misproblemas-con-google.html

Manual de Lenguaje HTML

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Manual de Lenguaje HTML

Uploaded by

Copyright:

Available Formats

manual de lenguaje HTML

1.- Antes de empezar.

En el caso de que ests con el Explorer. O algo as:

En el caso del Firefox.

Dependiendo de cmo est configurado tu ordenador, quiz no encuentres el Bloc de

Tambin se podra guardar con la extensin .htm (el resultado es exactamente el

Nos aparecer la ventana de seleccin de directorio:

Elegimos Escritorio y le llamamos index.html

. Si, en cambio, es el Firefox el navegador predeterminado, el

icono de nuestra pgina ser ste:

Elegimos la pestaa Programas:

Y pinchamos en el botn Restablecer configuracin Web...

Desactiva la opcin Restablecer tambin la pgina principal y le das al S

Observa que el icono de nuestra pgina en el escritorio tiene el del Explorer:

4.- El otro navegador.

Para elegir el archivo a abrir:

Vemos nuestro trabajo abierto con el Firefox:

A partir de este momento, es conveniente tener los dos navegadores minimizados en la

5.- Mejorando la pgina.

5.1.- Centrar el texto.

Guardamos los cambios:

Minimizamos y comprobamos los resultados con el Explorer (lo recuperamos desde la

Si observamos que nuestro mensaje no aparece centrado le damos al botn

Minimizamos y abrimos el Firefox. Lo mismo. Si observamos que no ha puesto los

cada navegador y Actualizar o Recargar.

5.2.- Aumentar el tamao del texto.

No olvidarse de dar al botn Actualizar en el caso de no ver los cambios a la primera.

5.3.- Poner un color de fondo.

Si deseas profundizar en este tema de los colores, pulsa el

5.4.- Cambiar el color del texto.

Guardamos los cambios, minimizamos y abrimos los navegadores actualizando si es

5.5.- Saltos de lnea.

Veamos ahora el resultado: index.html

Veamos ahora el resultado: index.html

Veamos ahora el resultado: index.html

Veamos ahora el resultado: index.html

Si tienes experiencia en internet, probablemente te hayas encontrado con pginas en

En la cabecera pueden ir muchas ms cosas pero, de momento, es lo nico que

A menudo hay que hacer listas de objetos, de conceptos, de definiciones...

7.1.- Listas no numeradas.

7.2.- Listas numeradas.

7.3.- Listas anidadas.

7.4.- Listas de definiciones.

ste vuelve a estar justificado a la

13.1.- Tablas con borde y con casillas vacas.

13.2.- Otros atributos de la tabla.

13.3.- Atributos de las filas y las celdas.

13.4.- Tablas con celdas de distinto tamao.

Pondremos un &nbsp; para meter algo aunque no se vea y, para asegurarnos de la

13.5.- Ttulo de la tabla.

13.6.- Celdas de cabecera.

13.7.- Alineaciones dentro de las celdas.

Primera fila (alineacin horizontal):

En la primera celda el texto est alineado a la izquierda. No hay que hacer

En la segunda celda el texto est alineado en el centro: <td align="center">.

En la tercera celda el texto est alineado a la derecha: <td align="right">.

Segunda fila (alineacin vertical):

En la primera celda el texto est alineado en la parte superior: <td

En la tercera celda el texto est alineado en la parte inferior: <td

13.8.- Separaciones entre celdas y entre borde y contenidos.

La separacin entre el borde la tabla y el contenido de las celdas es de 1 pxel. Se

En la segunda tabla se ha aumentado la altura de las celdas a 70 pxeles para observar

14.1.- Atributos de la imagen width y height.

14.2.- Texto alternativo.

Pondremos un para meter algo aunque no se vea y, para asegurarnos de la