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.
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 ...
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.
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.
.- 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.
6.1.- Las meta etiquetas.
En la cabecera del documento van también unas importantes etiquetas

denominadas las meta etiquetas o meta tags.
Proporcionan información sobre el documento aunque no son visibles
desde el navegador.
Vamos a colocar las meta etiquetas que contiene este documento y las
comentamos:
<meta name="Title" content="Manual de Lenguaje HTML">

<meta name="Author" content="Ángel Ricardo Puente
Pérez">
<meta name="Subject" content="Elaboracion de paginas
web con el lenguaje HTML">
<meta name="Description" content="Manual de Lenguaje
HTML de nivel inicial, medio y avanzado">
<meta name="Keywords" content="lenguaje html, manual,
tutorial, curso, diseño web">
<meta name="Generator" content="Macromedia
dreamweaver">
<meta name="Language" content="Spanish">
<meta name="Revisit" content="1 day">
<meta name="Distribution" content="Global">
<meta name="Robots" content="All">
He puesto en color rojo las dos meta etiquetas más importantes.
La Description es una descripción del contenido del sitio. Debe ser una
frase corta que resuma de manera, lo más ajustada posible, lo que nos
vamos a encontrar en el sitio.
La segunda etiqueta son las Keywords o palabras clave. Son una lista de
varias palabras o grupos de palabras separadas por comas referidas, de
nuevo, al contenido del sitio.
¿Cuál es el objetivo de estas etiquetas? El fundamental es ayudar a los

buscadores y motores de búsqueda a encontrar las páginas.
Acabo de hacer, en Google, una búsqueda con los términos tutorial

dreamweaver mx. Éste ha sido el primer resultado obtenido:
Que corresponde a mi página: http://www.arp.jazztel.es/
Página Inicial Tutorial Dreamweaver MX Intermedio es lo que puse entre

las etiquetas <title> y </title> es decir, el título de la página encontrada,
que es la primera.
Lo que viene a continuación: Tutorial de Dreamweaver MX para elaborar

paginas web dirigido a personas que conocen ya la herramienta. Es lo
que puse en el content de la etiqueta <meta name="Description" ...>
Lo siguiente: TUTORIAL de NIVEL INTERMEDIO de DREAMWEAVER

MX ... corresponde a las primeras palabras que el buscador ha
encontrado en la página (en la parte visible de la misma).
Por último, la cadena con la que yo busqué tutorial dreamwevaer mx ha

leído en las palabras que coloqué en el content de la etiqueta <meta
name="Keywords" ...>
Así, una correcta escritura de estas etiquetas, hace que nuestra página
sea fácilmente encontrada por los buscadores, aunque para ello, haya
que hacer un esfuerzo de dar de alta nuestra página si nos interesa que
nos encuentren en este mundo de Internet tan inmenso...
El resto, proporciona información adicional: Título, autor, tema del sitio,

editor con el que se ha hecho la página, idioma del sitio, actualización
diaria, contenido interesante a nivel global y dispuesto para todos los
robots de búsqueda.
Estas meta etiquetas hay que colocarlas, fundamentalmente, en la página

inicial del sitio pero no está de más hacerlo en todo los otros documentos
del sitio. A veces un determinado buscador puede encontrar un
documento que no es el inicial. Por eso es importante no dejar ningún
documento sin enganchar con vínculos con la página principal o con otra
página que nos pueda llevar a la principal.
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>
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
10.1.- Caracteres especiales.
Para realizar este manual tengo algunos problemas con determinados

signos. Por ejemplo, cuando quiero explicar cualquier etiqueta, no puedo
escribir la etiqueta tal cual porque el navegador se creería que estoy
comenazando a declararla y no es el caso, yo quería hablar de ella no
implementarla. Lo mismo ocurre con algunos otros signos que pueden
ser confundidos con símbolos del lenguaje HTML.
Por ejemplo, si digo: La primera etiqueta que escribimos es <HTML> en

cualquier documento:
< es el comienzo de la etiqueta. > es el final de la etiqueta.
Otro problema importante son los caracteres propios de un idioma. En el

caso del nuestro, los acentos, la eñe,... Actualmente los navegadores
interpretan perfectamente casi todos los símbolos más usuales del
castellano. Pero si nuestra página tiene que ser leída en territorios donde
el español no sea el idioma habitual, deberíamos escribir los acentos, las
eñes,... de acuerdo con los códigos que se expresan a continuación:
HTML
< < (less than)
> > (greater than)
" "
& & (ampersand)
Español
á á
é é
í í
...
Á Á
É É
...
ñ ñ
Ñ Ñ
ü ü
Ü Ü
¡ ¡
¿ ¿
Otros signos
© ©
® ®
€ €
” ”
“ “
(non breaking space)
Hay muchísimos más signos pero su interés depende de la materia

específica de que trate la web. No es lo mismo una página de Matemáticas
avanzadas que otra del mundo de los negocios...
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
11.1.- Atributos de la línea de separación:
Con el atributo width definimos la anchura. Podemos hacerlo de forma

relativa (en %) o de forma absoluta en píxeles.
<hr width="50%">
<hr width="550">
Con el atributo size definimos el grosor en píxeles.

<hr size="10">
Con el atributo align definimos su alineación (left, center, right)

<hr align="left" width="70%">
<hr align="center" width="70%">
<hr align="right" width="70%">
Con el atributo noshade definimos el aspecto: Eliminamos el efecto

tridimensional de la línea.
<hr width="70%" noshade>
<hr width="70%" size="5" noshade>
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>
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>
width="30%"
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>
width="50%"
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>
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>
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>
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>
15.7.- Modificar los colores de los vínculos.
La forma más sencilla de modificar el aspecto (sólo el color) de un vínculo

es dentro de la etiqueta <body> con los atributos:
• link podemos elegir el color que tendrá antes de ser visitado.

Sustituir el azul que viene por defecto.
• alink (actived link) es el color que muestra cuando está activado.
• vlink (visited link) es el color que muestra cuando el vínculo ya ha
sido visitado.
Vamos a hacer una prueba en este documento. La sintaxis sería:
<body link="red" alink="blue"

vlink="black">
Hemos puesto unos colores llamativos (y en su código nombre) para que

veas los efectos. Lógicamente, se pueden elegir otros colores y
escribirlos con su código hexadecimal.
Para añadir otros aspectos podemos crear una hoja de estilos CSS.
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>
<a href="enlace.html"
target="principal">
enlace
</body>
</html>
Lo guardamos con el mismo nombre que tenía: indice.html
16.1.- Estructura de marcos con tres frames.
Supongamos que queremos construir una página con tres marcos

diferentes:
• Un marco horizontal superior que ocupe todo el espacio a lo ancho,

donde puede ir el título del sitio, un logotipo,...
• El resto del espacio divido en dos espacios verticales:
o El de la izquierda donde habrá un menú de enlaces.
o El más grande de la derecha donde se cargarán los enlaces
pulsados en la izquierda.
La sintaxis va a consistir en dos frameset anidados, el primero que
definirá las dos filas (la superior y el resto del espacio). El segundo que
dividirá ese resto del espacio entre las dos columnas.
Código del primer frameset:
<html>
<head>
<title>Las dos filas</title>
</head>
<frameset rows="15%,*">
<frame src="titulo.html">
<frame src="resto_espacio">
</frameset>
</html>
Como el segundo frame en realidad son dos, sustituimos su definición

por el código del segundo frameset:
name="principal">
</frameset>
<html>
<head>
<title>Fila superior y dos
columnas</title>
</head>
name="principal">
</frameset>
</frameset>
</html>
Veamos los códigos de todos los archivos:
Primero el documento titulo que se cargará en el marco superior:
<html>
<head>
<title>Marco superior</title>
</head>
<body bgcolor="#0066cc">
<font color="#ffffff">
<center>
<h1>mi sitio web</h1>
</center>
</font>
</body>
</html>
resultado
Lo guardamos como titulo.html
Veamos el documento indice que se cargará en la columna izquierda:
<html>
<head>
<title>Marco de la izquierda con
enlace</title>
</head>
<a href="enlace.html"
target="principal">
enlace
</body>
</html>
resultado
Lo guardamos como indice.html
El documento saludo que se carga inicialmente en el marco principal:
<html>
<head>
<title>Marco de la derecha</title>
</head>
<body bgcolor="#ff9999">
<center>
<h1>
Bienvenido a mi página web
</h1>
</center>
</body>
</html>
resultado
Lo guardamos como saludo.html
Falta el documento enlace que se cargará en el marco principal al ser

pulsado el enlace:
<html>
<head>
<title>Documento a cargar en
principal</title>
</head>
<body bgcolor="#ffcccc">
<center>
<h2>
Has pulsado el enlace correctamente
</h2>
</center>
</body>
</html>
resultado
Lo guardamos como enlace.html
El documento de la estructura de marcos es el inicial. Lo guardamos

como index.html:
<html>
<head>
<title>Fila superior y dos
columnas</title>
</head>
name="principal">
</frameset>
</frameset>
</html>
16.2.- Marcos en línea.
Es un marco especial que permite incrustar una página dentro de otra.
La sintaxis se consigue con la etiqueta <iframe> con su cierre </iframe>

(frame in line)y sus atributos src para cargar el documento y width y
height para definir el hueco, el frame, en el que se cargará el nuevo
documento. Podemos ponerle un name para referirnos a él y cargar otros
documentos en ese espacio.
Supongamos que queremos cargar en este frame la página anterior cuyo

nombre de archivo es marcos.htm, el código quedaría así:
<center>
<iframe src="marcos.htm"
name="incrustado"
width="500" height="600">
</iframe>
</center>
Podemos también usar este tipo de marcos para cargar documentos

ajenos a nuestro sitio. En ese caso hay que escribir la URL entera en el
atributo src. Vamos a ver, como ejemplo, la carga de la página web del
Aula Mentor del MECD español. Su dirección es
http://www.mentor.mecd.es El código quedaría así:
<center>
<iframe
src="http://www.mentor.mecd.es/"
name="incrustado2"
width="500" height="600">
</iframe>
</center>
Podemos cargar en estos marcos (por eso son marcos y no simples

ventanas incrustadas) los documentos que deseemos empleando el
nombre que les hemos dado:
El código sería:
<a href="http://www.google.com"
target="incrustado">
http://www.google.com
</a>
http://www.google.com (comprueba que se carga en el primer frame, en

incrustado)
Cargamos en el segundo frame: incrustado2 la página inicial de este sitio

index.htm que se encuentra en la carpeta anterior a la carpeta donde está
guardado el archivo de este documento. La ruta es ../index.htm (creo que
es la primera vez en este curso que se menciona este código para indicar
la ruta de un archivo en una carpeta anterior a la que está guardado el
archivo del documento en el que estamos trabajando).
<a href="../index.htm"
target="incrustado2">
Cargar la página inicial de este
sitio
</a>
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>
<form
<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>
<form action="mailto:login@servidor.es"
<tr>
Escribe tus comentarios:
</td>
<textarea name="Comentarios" cols="30"
rows="5">
</textarea>
</td>
</tr>
<tr>
<input type="submit" value="Enviar">
</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
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...
18.- Estilos CSS.

Probablemente queramos que nuestro sitio web tenga una unidad de
estilo que lo haga armonioso y diferenciado de los otros sitios web. Esto
se consigue con una potente herramienta del lenguaje html que se
denomina Estilos CSS o Estilos en cascada y que permite tres niveles de
concreción diferenciados:
1. Estilos para una etiqueta concreta en un punto determinado.

2. Estilos para un documento entero.
3. Estilos para un sitio entero formado por varios documentos. Hoja
de estilo externa.
18.1.- Estilos para una etiqueta concreta en un punto

determinado.
La sintaxis es la siguiente:
<p style="background-
color:orange;">
El párrafo afectado por la etiqueta anterior modificaría el color de fondo y

se pondría en naranja. Estoy colocando este estilo en este párrafo
concreto. Todo él lo estarás leyendo sobre un fondo naranja. Cuando
cambie de párrafo esta implementación de estilo dejará de tener efecto.
Lo que hemos hecho en la etiqueta párrafo lo podríamos haber hecho en

cualquier otra etiqueta. Se pueden, además, añadir más opciones de
estilo:
<p style="margin-left:50px; font-style:italic;

color:gray;">
Lo aplico sobre este párrafo a modo de ejemplo. Estarás viendo un

párrafo sangrado del margen izquierdo 50 píxeles, en cursiva y el
texto de color gris.
Hay que tener especial cuidado en no cometer errores de sintaxis: El = ,
las " al comenzar y al acabar, los : para indicar el valor, el ; separando
cada uno de los parámetros de estilo. Es fácil equivocarse porque
venimos arrastrando la sintaxis de las etiquetas y atributos normales y,
ahora, las cosas son diferentes. Aparte, claro está, del nombre y valores
posibles de cada atributo de estilo de los que, más tarde, haremos un
listado.
18.1.1.- La etiqueta <div> .
Se emplea para implementar un estilo determinado, no en una etiqueta

concreta, sino en un fragmento (en una división) del documento, que
afecte a varias etiquetas: Lo comprendido entre <div> y </div>.
<div style="font-weight:900; text-align:right;

color:#0000ff;">
Vamos a aplicar esta etiqueta a este párrafo.
Y a este otro.
Hasta que cerremos la etiqueta. Lo hago después de este punto.
Ya volvemos a la situación anterior.
Pego aquí una imagen del código concreto:
18.1.2.- La etiqueta <span> .
Se emplea de forma similar a la etiqueta <div> pero para hacer su efecto

en un fragmento pequeño de texto, una palabra o unas cuántas o unas
letras dentro de una palabra...
<span style="background-color:yellow; font-family:sans-

serif;">
Aplico el estilo anterior a las dos letras centrales de la palabra span.
Copio aquí la escritura del código:

18.2.- Estilos para un documento entero.
Si queremos que los estilos definidos afecten a todo el documento,

haremos su declaración en la cabecera del mismo. Dentro de las etiquetas
<head> y </head>.
La sintaxis es un poco diferente:
<html>
<head>
<title>Estilos CSS para un documento</title>
<style type="text/css">
body { margin-left: 50px; margin-top: 20 px; margin-
right: 40 px;
font-weight: bold; color: #996600; }
div { background: url(../imag/claro1.gif)}
</style>
</head>
Observa las llaves de apertura { y cierre } los ; En el caso de la etiqueta

div se ha establecido una imagen de fondo. Observa los paréntesis y,
entre ellos, la ruta en la que se ha guardado la imagen.
18.3.- Estilos para un sitio entero. Hoja de estilos externa.
Si queremos definir de golpe los estilos para todos los documentos de un

sitio, debemos hacerlo desde un documento externo:
Abrimos el bloc de notas y, en él, escribimos el código:
body { margin-left: 50px; margin-top: 20px; margin-

right: 40px;
font-weight: bold; color: #996600; }
div { background: url(../imag/claro1.gif)}
Lo guardamos con el nombre que queramos pero con la extensión .css ,

por ejemplo, estilo.css
Ahora habrá que hacer una llamada desde cada uno de los documentos
que queramos vincular con esa hoja de estilos. La llamada se hace dentro
de <head> con la siguiente sintaxis:
<link href="estilo.css" rel="stylesheet"

type="text/css">
Como puede deducirse, nuestro documento .css está en la misma carpeta

que el resto de los documentos del sitio. Si no es así, habría que indicar la
ruta completa dentro de las comillas de href. Por ejemplo:
href="carpeta2/estilo.css"
Los tres niveles de concreción pueden usarse simultáneamente en los
documentos de un sitio. Para que no haya problemas de entendimiento
entre los tres, existen unas reglas:
1. Prevalecen las definiciones de estilo de la etiqueta puntual.

2. En segundo lugar la definición de estilo del documento.
3. En tercer lugar la hoja de estilos.
18.3.1.- Nombrar a los estilos definidos en la hoja.
Podemos, en la hoja de estilos, hacer declaraciones de estilo no referidas

a una etiqueta concreta sino a un conjunto de parámetros que pueden
afectar a más de una etiqueta. Y nombrar a ese estilo con una palabra
relacionada con la implementación que queremos hacer. Por ejemplo,
este sitio está vinculado con una hoja de estilos en los que, siempre que
aparece una etiqueta en el texto explicativo, está de color azul. El estilo,
dentro de la hoja, se ha denominado .etiquetas (con el punto por delante)
y su declaración se ha hecho de forma similar a la declaración de las
etiquetas. Veamos la hoja de estilos que se está empleando en este sito:
.palabras_clave { color: #CC0000}

.titulo { font-size: 24px; font-
weight: bold}
.etiquetas { color: #0033CC}
.traduccion { font-style: italic}
.texto_codigo { color: #FFFFFF}
.nombre_archivo { color: #999999}
.english { color: #996600}
Se guarda con el nombre que se desee: hoja.css y, ahora, cada vez que
queremos utilizar uno de estos estilos, además de hacer la declaración de
vinculación en la cabecera, tendremos que emplear una etiqueta span con
la siguiente sintaxis:
<span class="nombre_del_estilo">texto
afectado</span>
Veamos un ejemplo:
Esto es una <etiqueta>. Esto estilo.css es el nombre de un archivo. Esto

es una palabra clave y esto es un título.
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

Diunggah oleh

Informasi Dokumen

Hak Cipta

Format Tersedia

Bagikan dokumen Ini

Bagikan atau Tanam Dokumen

Opsi Berbagi

Apakah menurut Anda dokumen ini bermanfaat?

Apakah konten ini tidak pantas?

Hak Cipta:

Format Tersedia

Manual de Lenguaje HTML

Diunggah oleh

Hak Cipta:

Format Tersedia

manual de lenguaje

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

Porque es muy importante tener ciertos conocimientos del lenguaje ante

El curso puede ser seguido de forma lineal o, a través de los enlaces a

Nota: El curso está creciendo. He introducido unos apartados que los he

1.- Antes de empezar.

A continuación elige la opción señalada en cada uno de los casos. Verás

Pues bien, en ambos casos, estás visualizando el código fuente que da

Probablemente tanto símbolo extraño y palabras algo raras te

A continuación debes saber que las dos etiquetas fundamentales dentro

Nota: Las etiquetas también se pueden escribir con letras mayúsculas:

Vamos a escribir algo en nuestra página. Por ejemplo Bienvenid@. Lo

Ahora tenemos que guardar nuestro documento en alguna parte del

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

Elegimos Escritorio y le llamamos index.html

3.- Mi primera 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

Como todavía la mayoría de los usuarios utilizan el Internet Explorer más

Elegimos la pestaña Programas:

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

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

Para elegir el archivo a abrir:

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

Si queremos que nuestro saludo: Bienvenid@ aparezca en el centro de la

El código quedaría así:

Guardamos los cambios:

Minimizamos y comprobamos los resultados con el Explorer (lo

Si observamos que nuestro mensaje no aparece centrado le damos al

Nota: Es conveniente tener los tres programas abiertos: Los dos

Nuestro mensaje es algo pequeño. Podemos aumentar su tamaño

Vamos a poner el tamaño mayor:

No olvidarse de dar al botón Actualizar en el caso de no ver los cambios a

5.3.- Poner un color de fondo.

Si deseamos poner un color de fondo a toda la página, lo tenemos que

Guardamos los cambios y abrimos cada uno de los navegadores para

5.4.- Cambiar el color del texto.

Para cambiar el color del texto empleamos la etiqueta <font> con su

Guardamos los cambios, minimizamos y abrimos los navegadores

A partir de este momento ya no vamos a incluir en este manual la imagen

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

¿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

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

Cuando queremos introducir una línea en blanco, utilizamos la etiqueta

Veamos ahora el resultado: index.html

Si queremos separar más no es suficiente repetir la etiqueta <p>. Hay que

Existe otra posibilidad: Consiste en combinar la etiqueta de apertura de

La cadena &nbsp; también se puede utilizar para añadir un espacio en

Por simplificar un poco no habíamos comentado nada de una parte

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

Comprueba que, en la barra superior del navegador, barra de título,

Si tienes experiencia en internet, probablemente te hayas encontrado con

del término Tutorial html:

En la cabecera pueden ir muchas más cosas pero, de momento, es lo

6.1.- Las meta etiquetas.

En la cabecera del documento van también unas importantes etiquetas

La cadena también se puede utilizar para añadir un espacio en

< es el comienzo de la etiqueta. > es el final de la etiqueta.

Pondremos un para meter algo aunque no se vea y, para