Manual de Lenguaje HTML

manual de lenguaje HTML
Las páginas que nos encontramos en Internet, las páginas web, están 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 páginas web escribiendo el código correspondiente, antes de pasar a ver algún editor de
código 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 páginas.
La red está llena de cursos sobre el lenguaje HTML. ¿Qué aporta éste que no tengan los demás?
Probablemente no mucho. He pretendido la sencillez y la claridad. Al principio quería ser de nivel
inicial y, conforme lo he ido ampliando, ya está en un nivel de intermedio. No obstante, los primeros
pasos están pensados para personas con escasos conocimientos de informática en general, y de
páginas 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 través 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 difícil; a veces sí. Otras
veces es, simplemente, una ampliación a lo trabajado en el resto del curso. Se accede, desde
contenidos, o desde el icono desde cada una de las páginas.
1.- Antes de empezar.
Sitúate con el puntero del ratón sobre cualquier punto vacío de esta página que estás leyendo en estos
momentos. Pulsa el botón derecho de tu ratón. Se abrirá el siguiente menú contextual:
Si, en vez del Explorer, estás leyendo esta página con el Firefox, el menú contextual será algo
distinto:
A continuación elige la opción señalada en cada uno de los casos. Verás algo así:
En el caso de que estés con el Explorer. O algo así:

En el caso del Firefox.
Pues bien, en ambos casos, estás visualizando el código fuente que da origen a la página que estás
leyendo en estos momentos. Es decir, es lo que hay que escribir para que la página se muestre tal
cual la estás viendo.
Probablemente tanto símbolo extraño y palabras algo raras te sorprenderán y te llevarán a la idea de
que "esto es muy difícil" y "no es para mí". Tranquilo. Sin ser fácil, el lenguaje html está al alcance
de cualquier persona, y las cosas, paso a paso, se pueden hacer algo más sencillas.
2.- Empezando.
El código 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 cómo esté configurado tu ordenador, quizá no encuentres el Bloc de notas en esta
ruta.
A continuación debes saber que las dos etiquetas fundamentales dentro de las cuales tiene que ir
nuestro código fuente son <html> como etiqueta de apertura y </html> como etiqueta de cierre.
Después, todo lo que será visible al visitar la página con el navegador, debe de estar entre las
etiquetas <body> cuerpo, en inglés, como etiqueta de apertura y </body> como etiqueta de cierre.
Nota: Las etiquetas también se pueden escribir con letras mayúsculas: <HTML> <BODY>...Nosotros
vamos a optar por las minúsculas por ser lo que se está imponiendo de acuerdo con las últimas
normas.
Vamos a escribir algo en nuestra página. Por ejemplo Bienvenid@. Lo escribiremos entre <body> y
</body>. Nuestro código quedará así:
Ahora tenemos que guardar nuestro documento en alguna parte del ordenador y ¡muy importante!
con un nombre y una extensión especial. El nombre va a ser index (ya veremos porqué este nombre
más adelante) y su extensión .html
También se podría guardar con la extensión .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 selección de directorio:

Elegimos Escritorio y le llamamos index.html
Observa que en Tipo no hemos cambiado nada. No es necesario al haber incluído la extensión .html
en el nombre del archivo.
Podemos visualizarlo para ver si la página funciona....
3.- Mi primera página.
Ya podemos ir al Escritorio para abrir nuestra página.
Si el navegador predeterminado es el Explorer, el icono de nuestra página se visualizará así

. Si, en cambio, es el Firefox el navegador predeterminado, el icono de nuestra página será éste:
. En ambos casos es conveniente que visualicemos la página con los dos navegadores para
controlar posibles fallos en la escritura del código ya que, puede ocurrir, que un navegador sea
sensible al fallo y otro no.
Nota: Estoy dando por hecho que tienes dos navegadores como mínimo 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 vínculo.
Como todavía la mayoría de los usuarios utilizan el Internet Explorer más que ningún 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 pestaña Programas:
Y pinchamos en el botón Restablecer configuración Web...
Desactiva la opción Restablecer también la página principal y le das al Sí
Aparecerá el mensaje de confirmación que deberás Aceptar:

Observa que el icono de nuestra página en el escritorio tiene el del Explorer:
Si haces doble clic sobre él, se te abrirá la página con este navegador. Para abrirlo con el Firefox, una
posibilidad es hacerlo pinchando con el botón derecho del ratón y, en el menú contextual, elegir la
opción del Firefox
Vamos a ver nuestra página: Hacemos doble clic sobre el icono y ...
La verdad no es una página muy espectacular pero... los comienzos deben ser humildes.
4.- El otro navegador.
Hemos quedado que nuestra página debía visualizarse, también, con el Firefox.
Y ya hemos dicho también, que una forma era hacerlo desde el menú contextual pinchando con el
botón derecho del ratón 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 rápidamente con cada uno de los navegadores los cambios
efectuados.
5.- Mejorando la página.
5.1.- Centrar el texto.
Si queremos que nuestro saludo: Bienvenid@ aparezca en el centro de la página, escribimos delante
del saludo la etiqueta <center> y al final del mismo la etiqueta de cierre </center>
El código quedaría 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 botón . Puede ocurrir que no
haya puesto al día los cambios:
Minimizamos y abrimos el Firefox. Lo mismo. Si observamos que no ha puesto los cambios al día le
damos al botón .
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. Botón derecho
del ratón > Ver código fuente. Se abrirá el Bloc de notas. Puedo hacer los cambios que se señalan 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 verás el index.html
5.2.- Aumentar el tamaño del texto.
Nuestro mensaje es algo pequeño. Podemos aumentar su tamaño empleando las etiquetas de
encabezados. Las etiquetas van desde el <h1> (h de head, en inglés, cabeza) para la más grande, al
<h6> para la más pequeña.
Vamos a poner el tamaño mayor:

Le damos a Archivo > Guardar , minimizamos y comprobamos los cambios con cada uno de los
navegadores
No olvidarse de dar al botón 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 página, 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 código 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 página. 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 botón...
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.
Podríamos emplear el nombre en inglés del color, igual que hemos hecho con el fondo. La etiqueta
quedaría <font color="white">. Vamos ahora, a colocar el código hexadecimal de este color que es el
ffffff. La etiqueta quedaría 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 línea.
A partir de este momento ya no vamos a incluir en este manual la imagen de cada uno de los
navegadores abriendo la página. En su lugar vamos a hacer un enlace para que se abra una ventana
nueva de tu navegador al leer estas páginas. Pero el proceso que se debe seguir para construir las
páginas no ha cambiado:
1. Modificar/ampliar el código 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 línea en nuestra página: Por ejemplo vamos a poner: A mi
primera página 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 línea que hemos hecho en el código no lo reconocen los navegadores.
Para que el salto de línea se incorpore hay que hacerlo con la etiqueta <br> del inglés break, romper.
Esta etiqueta no tiene cierre.
El código quedaría así:
Veamos ahora el resultado: index.html
Ahora sí que es lo que queríamos.
Nota: Puedes comprobar el código que genera la página que visualizas en la ventana emergente
pinchando con el botón derecho del ratón y eligiendo Ver código fuente (si lo ves con el I. Explorer) o
Ver código fuente de la página (si lo ves con el Firefox).
5.6.- Párrafos.
Cuando queremos introducir una línea en blanco, utilizamos la etiqueta <p> de párrafo. Esta
etiqueta admite su correspondiente cierre </p>, aunque no es necesario.

Si queremos separar más 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 párrafo con la de cierre
escribiendo dentro un caracter invisible: (non breaking space):

La cadena también se puede utilizar para añadir un espacio en blanco extra a la separación
entre dos palabras, repitiéndolo cuantas veces haga falta. Aunque, su definición inicial, era para
añadir un espacio de separación entre dos palabras "que no se pueda romper" caiga, por las
configuraciones de pantalla diferenciadas, donde caiga.
6.- La cabecera.
¿Cómo van las cosas? Espero que, hasta aquí al menos, todo esté yendo bien.
Por simplificar un poco no habíamos comentado nada de una parte importante que tienen las
páginas 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 después de la
primera etiqueta <html> y antes del <body>. Constituye la parte no visible del documento:
<html>
<head>
</head>
<body>
Sólo se ve este texto
</body>
</html>
resultado
De momento, lo que más nos interesa poner dentro de la cabecera del documento es el título de la
página.
Observa que en la barra de título, la barra superior aparece:
Para arreglar esto, para poner el título 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>
Sólo se ve este texto
</body>
</html>
resultado
Comprueba que, en la barra superior del navegador, barra de título, aparece el título que acabamos
de poner al documento:
Si tienes experiencia en internet, probablemente te hayas encontrado con páginas en las que aparece
Documento sin título 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 búsqueda con del término
Tutorial html:
En la cabecera pueden ir muchas más 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 montaña.
<li> La música.
</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 colocación 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>Mamíferos
</ul>
<li> INVERTEBRADOS.
<ul>
<li>Insectos
<li>Arácnidos
<li>Crustáceos
<li>Miriápodos
</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 términos 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>Definición del
Concepto 1
<dt>Concepto 2
<dd>Definición del
concepto 2
</dl>
</body>
</html>
resultado
8.- Sangrados.
Se realizan con la etiqueta <blockquote> de apertura y su correspondiente de cierre. Aumentan,
también, 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 más de una etiqueta si deseamos un sangrado mayor:
<html>
<head>
<title>
Sangrados múltiples
</title>
</head>
<body>
Este texto está justificado a la
izquierda.
<blockquote>
<blockquote>
<blockquote>
Éste está más 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.- Más formato: Subíndices y superíndices.
El subíndice se consigue con la etiqueta <sub> y su correspondiente de cierre.
El superíndice con la etiqueta <sup> y su correspondiente de cierre.
<html>
<head>
<title>
Subíndices y superíndices
</title>
</head>
<body>
f<sub>(x)</sub>= X<sup>2</sup> +
5X
</body>
</html>
resultado
Si deseas saber sobre caracteres especiales ...
11.- Línea de separación.
Se consigue con la etiqueta <hr> (horizontal rule) sin etiqueta de cierre.
<html>
<head>
<title>
Barra de separación
</title>
</head>
<body>
Pongamos una separación:
<hr>
</body>
</html>
resultado
Si deseas profundizar en este tema, pulsa el

botón...
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 código 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 serán 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 vacías.
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 añadir un
espacio a la separación 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 página con el atributo align="center". O "left"
o "right"
Que ocupe una determinada proporción 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 parámetros 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 más 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 tamaño.
Es bastante habitual tener que diseñar este tipo de tablas: Una celda puede ocupar dos columnas,
tres,... o dos filas, tres,...
Supongamos que tenemos que diseñar una tabla como ésta:
Para no liarse, lo primero que hay que tener claro es el número máximo 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">. Lógicamente la primera fila ya se ha acabado.
Pasamos a la segunda fila. La primera celda se extiende sobre 2 filas. Escribiremos <td
rowspan="2">. Después 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,
sólo 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 simetría de la
tabla, estableceremos el ancho con el atributo width en la tabla (30% por ejemplo) y una proporción
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 código podría 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.- Título de la tabla.

Disponemos de una etiqueta para poner el título de la tabal. Es <caption> con su correspondiente de
cierre. Se coloca después de la etiqueta de definición de la tabla y añade 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 título 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%">Pérez</td>
<td width="25%">Pérez</td>
</tr>
<tr>
<td>Luis</td>
<td>Román</td>
<td>Sánchez</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 (alineación horizontal):
 En la primera celda el texto está alineado a la izquierda. No hay que hacer nada, es la
alineación que se establece por defecto. (Podría 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 (alineación 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
alineación vertical establecida por defecto. (Podría 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 píxeles. Basta escribirlo
en la primera celda de cada fila: <td height="50"> pero podría 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 separación por defecto entre las celdas es de 2 píxeles. Se puede modificar esta distancia con el
atributo de table cellspacing. Tabla con cellspacing de 15 píxeles:
xxxx xxxx xxxx
xxxx
xxxx
xxxx
La separación entre el borde la tabla y el contenido de las celdas es de 1 píxel. Se puede modificar
con el atributo cellpadding de la etiqueta table. Tabla con cellpadding de 15 píxeles:
xxxx xxxx xxxx
xxxx
xxxx
xxxx
En la segunda tabla se ha aumentado la altura de las celdas a 70 píxeles para observar la alineación
vertical.
Veamos los códigos:
<html>
<head>
<title>
Tablas 9
</title>
</head>
<body>
bgcolor="#ffffcc" cellspacing="15">
<caption>
Tabla con espacio entre celdas de 15 píxeles
</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 píxeles
</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.- Imágenes.
La etiqueta para introducir una imagen en nuestra página es <img src="nombre.gif"> (src de source
en inglés 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 página web desde la que la llamamos. Es habitual (y recomendable) colocar todas las
imágenes 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 sería <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 imágenes más
habituales en internet). La imagen se denomina riglos2.jpg
<html>
<head>
<title>
Imágenes 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
gráfico como PhotoShop) dentro de la etiqueta <img>. De esta manera cuando el navegador va
recorriendo la página reserva el espacio justo para la imagen y, el resto de la página 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. Escribiríamos:
<html>
<head>
<title>
Imágenes 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 página sin descargarse las imágenes (habitual en los que tienen una mala conexión y no
desean eternas descargas) tengan, al menos, una orientación del contenido de la misma. Debe ser una
descripción corta del tema de la imagen. Se introduce con la cadena alt="descripción de la imagen"
y, al ser un atributo, se coloca como los dos anteriores, dentro de la etiqueta <img>.
<html>
<head>
<title>
Imágenes 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 rectángulo con el texto alternativo:
Nota: El hecho de que aparezca el texto alternativo al acercarnos con el cursor a la imagen, es una
desviación 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 imágenes se verá así:
14.3.- Colocar una imagen como fondo de la página.
Simplemente tenemos que colocar dentro de la etiqueta <body> el atributo background con el
nombre y/o dirección de la imagen que queremos colocar. Supongamos que quiero colocar una
imagen denominada claro1.gif que está dentro de la carpeta imag. El código será el siguiente:
<html>
<head>
<title>
Imagen como fondo de página
</title>
</head>
<body
background="imag/claro1.gif">
<center>
<h2>
Esta página tiene una imagen de
fondo.
</h2>
</center>
</body>
</html>
resultado
15.- Vínculos.
Es una de las herramientas más 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 (también puede ser una imagen).
15.1.- Vínculos a otro documento del mismo sitio.
Nuestro sitio estará formado por varios archivos generadores de varios documentos. Los documentos
tendrán la extensión .html (o .htm). Para establecer el vínculo escribiremos sencillamente el nombre
del documento en el destino y, entre las etiquetas de apertura y cierre la palabra o palabras que
activarán el vínculo.
Como ejemplo vamos a establecer un enlace a la primera página de este sitio (primer documento)
cuyo archivo tiene como nombre index.htm
<html>
<head>
<title>
Vínculos 1
</title>
</head>
<body>
<center>
<a href="index.htm">
Ir al inicio de este
curso
</a>
</center>
</body>
</html>
resultado
15.2.- Vínculos a otro documento externo al sitio.
En este caso en destino deberemos escribir toda la dirección URL del sitio.
Vamos a establecer un enlace a la página del buscador Google cuya dirección URL es
http://www.google.es
<html>
<head>
<title>
Vínculos 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 dirección URL como activador del
vínculo:
<html>
<head>
<title>
Vínculos 3
</title>
</head>
<body>
<center>
Ir a Google:<br>
<a
href="http://www.google.es">
http://www.google.es</a>
</center>
</body>
</html>
resultado
15.3.- Vínculos a otra parte del mismo documento.
A veces cuando el documento es muy extenso conviene establecer formas rápidas 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 rápida.
La sintaxis del ancla es <a name="ancla1"></a> poniéndolo 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 línea 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 guión bajo) a los que vamos a desplazarnos:
código
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>
15.4.- Vínculos a una parte concreta de otro documento de nuestro sitio.
Se pueden combinar este último tipo de enlaces con el vínculo a otro documento de nuestro sitio.
La sintaxis sería <a href="paginax.htm#ancla"> Ir al apartado tal de tal página </a>
<html>
<head>
<title>
Vínculos 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.- Vínculos de correo electrónico.
Vamos a ver los enlaces a una dirección de correo electrónico. Cuando el navegante pinche sobre el
activador del vínculo, se abrirá el programa de correo con la dirección del destinatario ya escrita en
el mensaje.
La sintaxis es <a href="mailto:login@servidor.es"> Mándame un mensaje </a>
<html>
<head>
<title>
Vínculos 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 vínculo a otro documento.
En lugar de texto podemos utilizar una imagen como vínculo.
En primer lugar deberemos escribir la etiqueta de apertura del vínculo y luego la etiqueta de
inclusión de la imagen cerrando, posteriormente, la etiqueta del vínculo.
Para este tipo de vínculos se suelen emplear pequeñas imágenes, aunque, a veces, también se utilizan
imágenes de gran formato (sobre todo en los portales de los sitios).
<html>
<head>
<title>
Vínculos 6
</title>
</head>
<body>
<center>
Visita la página 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 antiestético que se coloca alrededor de la imagen tenemos el atributo
border="0"
<html>
<head>
<title>
Vínculos 7
</title>
</head>
<body>
<center>
Visita la página de
TERRA:<p>
<a
href="http://www.terra.es">
<img
src="imag/logo_terra.gif"
border="0">
</a>
</center>
</body>
</html>
resultado
16.- Marcos.
La estructura de los marcos o frames es un poco compleja.
Empezamos definiendo una estructura de marcos: Consiste en una división de la pantalla en varias
zonas de tal forma que, en una de las partes, puede haber un menú de vínculos, por ejemplo, que
permanecerá constante y, en la otra, parte principal o main frame, se cargarán las páginas pinchadas
desde el frame de vínculos.
Puede haber más partes, por ejemplo, una parte superior con el título del sitio que permanecerá
constante según vayamos navegando.
Vamos a empezar definiendo una estructura de dos frames: Una columna izquierda, más estrecha, y
una columna derecha, más 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 más extraño, 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, cuánto 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 inglés 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 hubiéramos querido establecer dos filas, hubiéramos empleado el atributo rows.
 A continuación decimos que la primera columna va a ocupar el 15% del espacio. Y, la
segunda, el resto. Esto indica el asterisco *. Hubiéramos podido, perfectamente, escribir el
tanto por ciento que queda, es decir, el 85%: <frameset cols="15% , 85%>.
 A continuación 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 .
 Después 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 decírselo 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 página 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 vínculo:
<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 tenía: indice.html
Veamos el resultado
Si deseas profundizar en este tema, pulsa el botón...
17.- Formularios.
El formulario es una interesante herramienta de toda página web. Permite recabar información
ordenada de los visitantes, y almacenar esa información de alguna manera.
Nosotros vamos a trabajar un formulario cuyos datos sean enviados a una dirección de correo
electrónico normal y como datos no encriptados.
La otra forma, más compleja, es ser envíado a nuestro servidor a través de un programa
determinado que deberá estar instalado en ese servidor, para almacenar la información y procesarla.
Como esto no está al alcance del usuario corriente, vamos a centrarnos en el primer tipo de
formularios.
Los formularios están dentro de las etiquetas <form> y </form>. Los atributos de la etiqueta de
apertura del formulario indicarán la forma de enviar la información:
 action="mailto:direcciondecorreo". El formulario será enviado a la dirección de correo que

pongamos.
 method="post". Los datos se enviarán inmediatamente por correo electrónico.
 enctype="text/plain". Las respuestas se enviarán sin codificación.
17.1.- Campo de texto de una línea.
<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 presentación 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 tamaño de la caja de texto de una línea. En este caso 10 caracteres.
 maxlenght indica la cantidad máxima de caracteres que puede introducir el usuario.
De poco sirve el formulario si no tenemos la opción de enviarlo. Así que vamos a proceder a la
introducción del código necesario. Normalmente, además del botón de enviar se suele poner otro
para borrar los datos introducidos.
<html>
<head>
<title>
Formulario 2
</title>
</head>
<body>
<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 botón.
 input type reset en inglés borrar.
 value será lo que aparezca escrito en el botón.
Cuando, una vez escrito el dato, el usuario pulse el botón 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 diseñamos en el formulario en el campo name
17.2.- Campo de texto de varias líneas.
Se consigue con la etiqueta <textarea> y su correspondiente de cierre.
Repetimos el formulario anterior eliminando la opción <text> para simplificar la lectura del código.
Pero, evidentemente, se podrían juntar todas las opciones en un único formulario.
<html>
<head>
<title>
Formulario 3
</title>
</head>
<body>
<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 introducción de texto en una línea 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 número de caracteres.
 El atributo rows indica el número de filas del cuadro de texto. Si el ususario quiere escribir
más de 5 líneas, el formulario se lo permite.
He hecho una prueba con mi correo. Éste es el mensaje recibido:
17.3.- Menú de opción.
Permite elegir entre varias opciones, una única.
Se introduce de forma similar al cuadro de texto de una línea <input> pero, ahora el type es radio
el name es el nombre que le damos a ese grupo de opción, el value lo que aparecerá en el mensaje
de correo delante de la opción elegida. Hay que repetir la etiqueta tantas veces como opciones de
elegir haya.
Si queremos introducir una segunda posibilidad de elección 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 años.<br>
value="De 18 a 50">
Tengo entre 19 y 50 años.<br>
value="Más de 51">
Tengo más de 51 años.
</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: Sólo podemos elegir una.
Esta es una imagen del resultado del envío de una respuesta:

17.4.- Menú de opción múltiple. Casillas de verificación.
Es parecido al anterior cambiando el atributo radio por checkbox. Los demás atributos son
similares.
<html>
<head>
<title>
Formulario 5
</title>
</head>
<body>
<form
action="mailto:login@servidor.es"
method="post"
enctype="text/plain">
<tr>
Elige tus aficiones:
</td>
<input type="checkbox"
name="Gustos"
value="Leer">
Me gusta leer.<BR>
name="Gustos"
value="Cine">
Ir al cine.<BR>
name="Gustos"
value="Gimnasio">
Machacarme en el gimnasio.<BR>
name="Gustos"
value="Botellón">
Hacer botellón con los
amigos.<BR>
name="Gustos"
value="Caminar">
Salir al campo a caminar.
</td>
</tr>
<tr>
<input type="submit"
value="Enviar">
</td>
<input type="reset"
value="Borrar">
</td>
</tr>
</table>
</form>
</body>
</html>
resultado
Este es el resultado de un envío:
17.5.- Menú desplegable.
Las opciones de elección se despliegan en un menú para que el visitante elija una.
<html>
<head>
<title>
Formulario 6
</title>
</head>
<body>
<tr>
Elige tu mejor día de la semana:
</td>
<select name="Mejor_dia">
<option value=""></option>
<option value="Lunes">Lunes</option>
<option value="Martes">Martes</option>
<option value="Miércoles">Miércoles</option>
<option value="Jueves">Jueves</option>
<option value="Viernes">Viernes</option>
<option value="Sábado">Sábado</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 contraseña.
Para hacer que un determinado campo de texto no sea visible para las personas que estén
alrededor del usuario (tipo contraseña), empleamos la misma sintaxis que en el campo de texto de
una línea sustituyendo type="text" por type="password"
<html>
<head>
<title>
Formulario 7
</title>
</head>
<body>
<tr>
Escribe tu contraseña:
</td>
<input type="password" name="Contraseña"
size="8"
maxlength="8">
</td>
</tr>
<tr>
</td>
</td>
</tr>
</table>
</form>
</body>
</html>
resultado
Observa que, aunque al escribir la contraseña aparecen los típicos asteriscos, en el mensaje de
correo aparece el texto tecleado:
Si deseas continuar con las hojas de estilo...
19.-Redireccionamiento automático 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 código:
<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 número 10 el
número de segundos de espera antes de producirse el cambio.
Este ejemplo se ha tomado de la página inicial de este sitio. Si esperas los 10 segundos (¡puede ser
que el número de segundos sea otro!), la página inicial se cambia automáticamente al documento
uno.htm. Comprobación.
Esta misma etiqueta permite cambios de sitio. En este caso hay que escribir la dirección completa:
<meta http-equiv="refresh"
content="5;URL=http://www.educa.madrid.org/cepa.colmenarviejo">
Esta etiqueta es muy interesante cuando, por las razones que sean, decidimos cambiar nuestra
página de servidor. La página del servidor antiguo se redirecciona automáticamente a la página
inicial del nuevo sitio. De esta forma, conservamos los posibles vínculos que tengamos desde otros
sitios de internet y los posibles visitantes podrán llegar a la nueva dirección a partir de los
antiguos datos.
La dirección puesta como ejemplo ha sido sacada de un caso real: La página del centro educativo
en el que trabajo se ha tenido que trasladar, desde el servidor del Ministerio de Educación, al
servidor de la Consejería de Educación de la Comunidad de Madrid. Gracias a esta herramienta,
no se pierden los antiguos vínculos que hay repartidos por muchas otras páginas. Y, por otro
lado, únicamente hay que mantener al día el sitio colocado en el nuevo servidor.
Ver el ejemplo concreto.
Tanto en un caso como en otro, es interesante colocar un vínculo manual, para asegurarnos de
que, en caso de que el refresh automático tuviera algún problema, se pueda ir de todas formas al
nuevo sitio.
20.- Publicación del sitio.
Ya tenemos nuestra página creada y, salvo modificaciones y posteriores actualizaciones, dispuesta

para ser publicada. ¿Cómo proceder?
Lo primero es encontrar un servidor que acepte alojar nuestro sitio.
Hay servidores de pago y servidores gratuitos a costa de la pesadísima publicidad.
De estos últimos, uno de ellos es Geocities. Primero hay que abrirse una cuenta con Yahoo y,
después, darse de alta para activar el sitio web.
Una vez que tenemos el espacio reservado hay que conocer las características del mismo que el
propio servidor nos tiene que proporcionar: Por ejemplo ¿cómo se debe llamar nuestra primera
página? Normalmente index.htm ¿Hay que alojar nuestra primera página dentro de alguna
carpeta especial dentro de nuestro espacio web? Normalmente no; pero hay algunos servidores
como el CNICE del Ministerio de Educación español que obliga a publicar el sitio dentro de una
carpeta que debe llamarse public_html. ¿Cuál es el nombre del servidor? ¿y el del usuario? ¿y la
contraseña? 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 transmisión de ficheros
vía FTP. Uno de los más 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 contraseña:
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 próxima 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 página en los buscadores más
importantes (o en todos los que podamos).
Normalmente se produce un efecto multiplicador: En la medida que una determinada página es

encontrada por más buscadores o robots de búsqueda, otros buscadores la encontrarán de
manera más fácil.
Es una tarea bastante pesada. Hay que rellenar un formulario con los datos de la página: La
dirección URL, el título, la descripción, las palabras clave, la persona responsable, su dirección de
correo, ...
Los resultados, normalmente, no son inmediatos. El buscador se reserva el derecho de mirar la

página 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 cuántas horas en este trabajo, el resultado es
positivo.
En el apartado 6.1.- ya mencionado ponía un ejemplo de búsqueda de una de mis páginas.
Ahora pongo otro:
Que corresponde a mi página Colores

En ninguno de los casos me he gastado un sólo euro en promocionarlas. Ahora, eso sí, las meta
tags están muy pensadas y, sobre todo, he dedicado bastante tiempo a dar de alta cada una de las
páginas 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 tendrás que contestar el mensaje
de correo que te manden. Es aconsejable crearse una cuenta específica para este menester. De esta
forma evitas ver tu correo habitual inundado de publicidad y mensajes que no te interesan lo más
mínimo.
Aquí te pongo unas cuántas páginas 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 página inicial, debes colocar una frase que se corresponda con
el contenido del sitio. Esto suele ser normal, excepto cuando la primera página está ocupada por
una imagen o una animación flash,... En este caso suele funcionar un truco (ver la nota
inmediatamente inferior) que consiste en escribir en los márgenes de la imagen, con el mismo
color de fondo, el título del sitio. El navegador no lo visualizará pero sí el robot que recogerá la
información y la expondrá en los resultados de la búsqueda. Este truco lo he empleado en la
página inicial de este sitio. Pincha con el botón derecho del ratón y selecciona Ver código fuente
para comprobar que antes de la tabla en la que se inserta la imagen, está colocado el título del
sitio: Manual de lenguaje html y alguna descripción más 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. Entendía,
que ocultar la descripción del sitio escribiendo con el mismo color que tiene el fondo es una forma de
"engañar" o "querer engañar". Así, he estado varios meses sin que este buscador localizase este sitio.
Extrañado por lo que ocurría, me puse en contacto con ellos y, sin que me diesen pistas explícitas,
descubrí que era ése el motivo por el que me habían penalizado el sitio, no mostrando los resultados de
la búsqueda. Quité esa información y, al tiempo, mi sitio era encontrado. También de manera
espectacular en el primer puesto, si escribo en la cadena de texto "manual de lenguaje html"
En mi bitácora expliqué en su día estos avatares: http://angelpuente.acelblog.com/mis-problemas-con-

google.html

Manual de Lenguaje HTML

Cargado por

Información del documento

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

Manual de Lenguaje HTML

Cargado por

Copyright:

Formatos disponibles

manual de lenguaje HTML

¿Por qué entonces no empezar directamente con el editor?

1.- Antes de empezar.

En el caso de que estés con el Explorer. O algo así:

Nos aparecerá la ventana de selección de directorio:

Podemos visualizarlo para ver si la página funciona....

3.- Mi primera página.

Ya podemos ir al Escritorio para abrir nuestra página.

Si el navegador predeterminado es el Explorer, el icono de nuestra página se visualizará así

Y pinchamos en el botón Restablecer configuración Web...

Desactiva la opción Restablecer también la página principal y le das al Sí

Aparecerá el mensaje de confirmación que deberás Aceptar:

4.- El otro navegador.

Otra forma es hacerlo abriendo el programa y yendo a buscar el archivo a abrir.

Y, cuando se abra el programa, darle a Archivo > Abrir archivo...

Para elegir el archivo a abrir:

Vemos nuestro trabajo abierto con el Firefox:

5.- Mejorando la página.

5.1.- Centrar el texto.

El código quedaría así:

Guardamos los cambios:

5.2.- Aumentar el tamaño del texto.

Vamos a poner el tamaño mayor:

No olvidarse de dar al botón 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 botón...

5.4.- Cambiar el color del texto.

5.5.- Saltos de línea.

1. Modificar/ampliar el código en el bloc de notas.

¿Qué ha pasado? Esto no era lo previsto.

El código quedaría así:

Veamos ahora el resultado: index.html

Ahora sí que es lo que queríamos.

Veamos ahora el resultado: index.html

Veamos ahora el resultado: index.html

Veamos ahora el resultado: index.html

Observa que en la barra de título, la barra superior aparece:

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.

7.2.- Listas numeradas.

7.4.- Listas de definiciones.

Se puede utilizar más de una etiqueta si deseamos un sangrado mayor:

9.- Negrita, cursiva y subrayado.

Para hacer que un texto se muestre en cursiva: <i> e </i> (italic).

Para subrayar empleamos <u> y </u> (underlined).

10.- Más formato: Subíndices y superíndices.

El subíndice se consigue con la etiqueta <sub> y su correspondiente de cierre.

El superíndice con la etiqueta <sup> y su correspondiente de cierre.

Si deseas saber sobre caracteres especiales ...

11.- Línea de separación.

Se consigue con la etiqueta <hr> (horizontal rule) sin etiqueta de cierre.

Si deseas profundizar en este tema, pulsa el

Empezamos con un tema algo complejo.

Una tabla se define entre las etiquetas <table> y </table>

¿Qué ha pasado? No se ve nada. Esto ocurre porque:

1. Dentro de las celdas no hemos puesto nada.

13.2.- Otros atributos de la tabla.

13.3.- Atributos de las filas y las celdas.

13.4.- Tablas con celdas de distinto tamaño.

El código podría quedar así:

13.5.- Título de la tabla.

13.6.- Celdas de cabecera.

13.7.- Alineaciones dentro de las celdas.