Manual HTML

MANUAL DE HTML
100 % PRÁCTICO
Prof. Angel Terrones Ayala
Manual de HTML
INTRODUCCIÓN A PÁGINAS WEB
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.
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
1
Manual de HTML
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:
2
Manual de HTML
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....
Mejorando la página.
 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í:
3
Manual de HTML
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:
4
Manual de HTML
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
Manual de HTML
 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
6
Manual de HTML
No olvidarse de dar al botón Actualizar en el caso de no ver los cambios a la

primera.
 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:
7
Manual de HTML
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).
8
Manual de HTML
 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):
9
Manual de HTML
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
10
Manual de HTML
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.
a)
11
Manual de HTML
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:
a) 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>
b) 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>
12
Manual de HTML
c) 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).
d) 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>
13
Manual de HTML
<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>
 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>
14
Manual de HTML
<blockquote>
<blockquote>
Éste está más sangrado
</blockquote>
</blockquote>
</blockquote>
Éste vuelve a estar justificado a la
izquierda.
</body>
</html>
 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
 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
15
Manual de HTML
</title>
</head>
<body>
f<sub>(x)</sub>= X<sup>2</sup>
+ 5X
</body>
</html>
resultado
Si deseas saber sobre caracteres

especiales ...
 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...
 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>

16
Manual de HTML
<blockquote>
<b>Éste está en negrita</b><br>
<i>Éste está en cursiva</i><br>
<u>Éste está subrayado</u>
</blockquote>
</body>
</html>
resultado
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>
17
Manual de HTML
</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.
a) 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
18
Manual de HTML
b) 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
c) 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.
19
Manual de HTML
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>
d) 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
20
Manual de HTML
(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
e) 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.
21
Manual de HTML
<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
f) 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>
22
Manual de HTML
</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>
g) 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>
23
Manual de 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
h) 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:
24
Manual de HTML
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>
25
Manual de HTML
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>
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:
26
Manual de HTML
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
a) 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"
27
Manual de HTML
width="150" height="230">
</center>
</body>
</html>
resultado
b) 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.
28
Manual de HTML
Y cuando navegue sin bajarse las imágenes se verá así:
c) 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>
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).
a) 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
29
Manual de HTML
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
b) 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:
30
Manual de HTML
<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
c) 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>
d) 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.
31
Manual de HTML
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)
e) 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
f) Imagen como vínculo a otro documento.
En lugar de texto podemos utilizar una imagen como vínculo.
32
Manual de HTML
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
Si deseas profundizar en este tema, pulsa el botón...
33
Manual de HTML
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:
34
Manual de HTML
 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>
35
Manual de HTML
<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>
36
Manual de 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...
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.
a) 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"
37
Manual de HTML
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>
38
Manual de HTML
<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
b) Campo de texto de varias líneas.
39
Manual de HTML
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.
40
Manual de HTML
He hecho una prueba con mi correo. Éste es el mensaje recibido:
c) 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.
41
Manual de HTML
</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:
d) 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>
42
Manual de 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>
43
Manual de HTML
</table>
</form>
</body>
</html>
resultado
Este es el resultado de un envío:
e) 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>
44
Manual de HTML
</td>
</td>
</tr>
</table>
</form>
</body>
</html>
resultado
Esta la imagen de una respuesta:
 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>
45
Manual de HTML

</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:
46

Manual HTML

Uploaded by

Document Information

Original Description:

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Manual HTML

Uploaded by

Copyright:

Available Formats

MANUAL DE HTML

INTRODUCCIÓN A PÁGINAS WEB

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

El código fuente, se escribe en un procesador de texto. Nosotros lo vamos a hacer

Dependiendo de cómo esté configurado tu ordenador, quizá no encuentres el Bloc

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

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

También se podría guardar con la extensión .htm (el resultado es exactamente el

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

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

Si queremos que nuestro saludo: Bienvenid@ aparezca en el centro de la página,

El código quedaría así:

Guardamos los cambios:

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

Si observamos que nuestro mensaje no aparece centrado le damos al botón .

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

 Aumentar el tamaño del texto.

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

Vamos a poner el tamaño mayor:

Le damos a Archivo > Guardar , minimizamos y comprobamos los cambios con

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

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

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 la

Cuando queremos introducir una línea en

Veamos ahora el resultado: index.html

Si queremos separar más no es suficiente

Veamos ahora el resultado: index.html

Existe otra posibilidad: Consiste en combinar la etiqueta de apertura de párrafo con

Veamos ahora el resultado: index.html

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

Si tienes experiencia en internet, probablemente te hayas encontrado con páginas

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

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

Las listas pueden ser no numeradas (el orden no importa) y numeradas:

Hemos incorporado la etiqueta de encabezado de tercer orden <h3> para resaltar el

Se realizan con la etiqueta <blockquote> de apertura y su correspondiente de cierre.

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

 Negrita, cursiva y subrayado.

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

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

 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

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

Si deseas profundizar en este tema,

Si queremos introducir texto que sirva de recordatorio de lo que hicimos o dejamos

Empezamos con un tema algo complejo.

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

Vamos a empezar definiendo una tabla de 3 filas y 3 columnas (para nuestro

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

1. Dentro de las celdas no hemos puesto nada.

a) Tablas con borde y con casillas vacías.

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