Manual de Lenguaje HTML

Manual de Lenguaje HTML
HTML (HiperText Markup Language) Es un lenguaje muy sencillo que permite describir
hipertexto, quiere decir texto de manera estructurada y agradable con enlaces que conducen
a otros documentos o fuentes de información y con inserciones multimedia (gráficos,
sonido, etc.)
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 > 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í:
1
Ahora tenemos que guardar nuestro documento en alguna parte del ordenador con un
nombre y una extensión especial. El nombre va a ser index 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
Elegimos Escritorio y le llamamos index.html. Podemos visualizarlo para ver si la página
funciona....
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í
Observa que el icono de nuestra página en el escritorio tiene el del Explorer:

Vamos a ver nuestra página: Hacemos doble clic sobre el icono y ...
La verdad no es una página muy espectacular pero... los comienzos deben ser humildes.
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 asi:
3
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:
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.
4
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.
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"> ( de background ).
5
Guardamos los cambios y abrimos cada uno de los navegadores para comprobar los
resultados:
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.
6
Guardamos los cambios, minimizamos y abrimos los navegadores actualizando si es
necesario:
Saltos de línea.
A partir de este momento ya no vamos a incluir en este tutorial 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 Netscape 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
Guardamos los cambios y abrimos cada uno de los navegadores para comprobar los
resultados: index.html
¿Qué ha pasado? . 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 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 origen (si lo ves con el
Netscape).
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.
8
Veamos ahora el resultado: index.html
Si queremos separar más no es suficiente repetir la etiqueta <p>. Hay que unir las dos
etiquetas y repetir ambas:
9
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.
Una parte importante que tienen las páginas web: Es la cabecera. 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>
10
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>
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.
Listas.
A menudo hay hacer listas de objetos, de conceptos, de definiciones... Las listas pueden ser
no numeradas (el orden no importa) y numeradas:
11
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>
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
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>
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).
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
<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>
Sangrias.
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>
Se puede utilizar más de una etiqueta si deseamos un sangrado mayor:
<html>
<head>
<title>
Sangrados múltiples
</title>
</head>
<body>
14
Este texto está justificado a la izquierda.
<blockquote>
<blockquote>
<blockquote>
Éste tiene mas sangria
</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>
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>
15
<body>
f<sub>(x)</sub>=
X<sup>2</sup> + 5X
</body>
</html>
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>
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
16
negrita</b><br>
<i>Éste está en
cursiva</i><br>
<u>Éste está
subrayado</u>
</blockquote>
</body>
</html>
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 tres 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>
17
</body>
</html>
¿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.
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>
Otros atributos de la tabla.
18
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:
<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>
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 las celdas. Por ejemplo podemos empezar asignando a las celdas de la primera fila
un ancho diferente.
Si a este respect no hago nada mas en las otras celdas, lo que haga afectará a todas las
columnas.
Podemos 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.
19
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>
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.
20
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>
Título de la tabla.
21
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>
<table border align="center"
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>
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>
22
<title>
Tablas 7
</title>
</head>
<body>
<table border align="center" 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>
23
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>
24
<td height="50" valign="top">xxx</td>
<td align="center">xxx</td>
<td align="right" valign="bottom">xxx</td>
</tr>
</table>
</body>
</html>
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>
25
<body>
<table border width="60%"
align="center"
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>
--------------------------------------------------------------------------------------------------------------
<html>
<head>
<title>
Tablas 10
</title>
</head>
<body>
<table border width="60%" align="center"
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>
26
</tr>
<tr>
<td height="70" valign="top">xxxx</td>
<td align="cente€r">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:
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">
27
</center>
</body>
</html>
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>
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>
28
<center>
<img
src="imag/riglos2.jpg"
width="150"
height="230"
alt="Mallos de
Riglos (Huesca)">
</center>
</body>
</html>
Cuando el visitante se acerque con el cursor a la imagen, aparecerá un rectángulo con el

texto alternativo:
Y cuando navegue sin bajarse las imágenes se verá así:
Colocar una imagen como fondo de la página.
Simplemente tenemos que colocar dentro de la etiqueta <body> el atributo und 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:
29
<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 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).
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.
30

Manual de Lenguaje HTML

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Manual de Lenguaje HTML

Uploaded by

Copyright:

Available Formats

Manual de Lenguaje HTML

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

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

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

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

Observa que el icono de nuestra página en el escritorio tiene el del Explorer:

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

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

. Puede ocurrir que no haya puesto al día los cambios:

Aumentar el tamaño del texto.

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

Poner un color de fondo.

Nosotros vamos a poner el color rojo al fondo de la página. Lo conseguimos escribiendo la

Cambiar el color del texto.

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

A mi primera página web:

El código quedaría así:

Veamos ahora el resultado: index.html

Veamos ahora el resultado: index.html

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

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.

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

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

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

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

Empezamos con un tema algo complejo.

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

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

1. Dentro de las celdas no hemos puesto nada.

Tablas con borde y con casillas vacías.

Otros atributos de la tabla.

Atributos De Las Filas Y Las Celdas

Podemos definir colores diferenciados. En este caso, el color de la fila o de la celda

Supongamos que tenemos que diseñar una tabla como ésta:

El código podría quedar así:

Xxx xxx Xxx

Primera fila (alineación horizontal):

Segunda fila (alineación vertical):

 En la primera celda el texto está alineado en la parte superior: <td valign="top">.

Separaciones entre celdas y entre borde y contenidos.

Xxxx Xxxx xxxx

La separación entre el borde la tabla y el contenido de las celdas es de 1 píxel. Se puede

Xxxx Xxxx Xxxx

En la segunda tabla se ha aumentado la altura de las celdas a 70 píxeles para observar la

Veamos los códigos:

Atributos de la imagen width y height.

Cuando el visitante se acerque con el cursor a la imagen, aparecerá un rectángulo con el

Y cuando navegue sin bajarse las imágenes se verá así:

Colocar una imagen como fondo de la página.

Vínculos a otro documento del mismo sitio.

You might also like