Diseño Web. Profesor: Pedro Juan Expósito Landa

(1)

Diseño Web

Profesor:

Pedro Juan Expósito Landa

(2)

Tema 1: Lenguaje HTML.

Sumario:

• Los hiperenlaces en HTML.

•Imágenes dentro de una página

.

•

Hipervínculo mediante una imagen

.

•

Apertura de un hipervínculo en otra parte del navegado

.

Hipervínculo a un cliente de correo

•

Anclas llamadas desde la misma página. Anclas llamadas desde otra página

• Las listas en HTML.

• Las tablas en HTML.

(3)

Tema 1: Lenguaje HTML.

Objetivos:

• Explicar como se inserta:

• Los hiperenlaces en HTML.

• Las Imágenes dentro de una página

.

• Los h

ipervínculos mediante una imagen

• H

ipervínculos en otra parte del navegador y a un cliente de correo

• Las a

nclas o llamadas desde la misma página y desde otra página

• Las listas en HTML.

• Las tablas en HTML.

(4)

Los hiperenlaces en HTML:

El elemento más importante que tiene una página de internet es el hipervínculo, estos nos permiten cargar otra página en el navegador. Esto es lo que hace diferente la página de un libro con la página de un sitio en internet.

Hiperenlace o hipervínculo:

Es la utilidad básica del hipertexto, permite indicar zonas de texto o imágenes que si son seleccionados por el lector del documento nos traslada a otros documentos HTML o otras zonas del documento actual.

(5)

Los hiperenlaces en HTML:

Formato de los enlaces

Puede ser fácilmente detectado en una página, basta con deslizar el puntero del ratón sobre las imágenes o el texto y ver como cambia de su forma original transformándose por regla general en una mano con un dedo señalador.

En general, si no especificamos lo contrario , estos enlaces de texto estarán subrayados y coloreados en azul. En el caso de las imágenes que sirvan de enlace, están delimitadas por un marco azul por defecto.

(6)

Los hiperenlaces en HTML:

Para definirlo podemos utilizar cualquier elemento HTML, no texto necesariamente, podemos usar, cabeceras (<hn>), cualquiera de los estilos, o una imagen, además podrá definirse dentro de cualquier elemento HTML: listas, párrafos de texto, tablas, formularios.

Normalmente los vínculos de texto cambian de color cuando el enlace ha sido ya pulsado o cuando el puntero del ratón se posiciona sobre él, estos cambios están predefinidos en cada navegador, pero nosotros podemos cambiar esos colores.

(7)

Los hiperenlaces en HTML:

Los

colores

de los vínculos pueden especificarse a través de las propiedades de la página, en la etiqueta <body>. Estos colores se asignan a través de los atributos link (vínculo), alink (vínculo activo), y vlink (vínculo visitado).

link permite determinar el color de los enlaces sin visitar (enlace que no ha sido pulsado ninguna vez).

alink permite determinar el color del enlace activo (enlace que acaba de ser pulsado).

vlink permite determinar el color de los enlaces visitados (enlaces que ya han sido pulsados).

(8)

Los hiperenlaces en HTML:

Por ejemplo, al insertar el siguiente código:

...

<body link="#FF0000" vlink="#FF0099" alink="#FF9900">

...

<a href="http://www.aulaclic.com" target

="_blank">www.aulaclic.com</a>

...- Mientras no se visite la página www.aulaclic.com, el enlace será de color rojo (#FF0000): www.aulaclic.com

-Mientras la página www.aulaclic.com sea la última visitada, el enlace será de color fucsia (#FF0099):

www.aulaclic.com

-Cuando se haya visitado la página www.aulaclic.com, el enlace será de color naranja (#FF9900): www.aulaclic.com

(9)

Hipervínculo a otra página del mismo sitio:

Para colocar un enlace a otra página del mismo sitio, nos serviremos de las etiquetas <a> y </a>.

Dentro de la etiqueta de apertura deberemos especificar asimismo el destino del enlace. Este destino será introducido bajo forma de atributo, el cual lleva por nombre href.

La sintaxis general de un enlace es por tanto de la forma:

<a href="destino">contenido</a>

<a href="URL a la que se accede">Texto del Hiperenlace </a>

(10)

Hipervínculo a otra página del mismo sitio:

El contenido puede ser un texto o una imagen. Es la parte de la página que se colocará activa y donde deberemos pulsar para acceder al enlace.

El destino (URL a la que se accede) será una página, un correo electrónico o un archivo.

Por ejemplo:

Para insertar el enlace: Visita página2.html, con el contenido Noticias

Habría que escribir:

<a href="pagina2.html">Noticias</a>

(11)

Hipervínculo a otra página del mismo sitio:

Implementemos dos páginas que contengan hipervínculos entre si, los nombres de las páginas HTML serán: pagina1.html y pagina2.html

pagina1.html

< html>

<head>

</head>

<body>

<h1>Página principal.</h1>

<a

href="pagina2.html">Noticias

</a>

</body>

</html>

Pagina2.html

<html>

<head>

</head>

<body>

<h1>Noticias.</h1>

Salir.</a> </body>

</html>

(12)

Hipervínculo a otra página a otro sitio de internet:

La sintaxis para disponer un hipervínculo a otro sitio de internet es:

<a href="http://www.google.com">Buscador Google</a>

Ahora la propiedad href la inicializamos con el nombre del dominio del otro sitio.

Algo importante que hay que anteceder al nombre del dominio es el tipo de protocolo a utilizar. Cuando se trata de una página de internet, el protocolo es el http.

(13)

Hipervínculo a otra página a otro sitio de internet:

En resumen: a la propiedad href la inicializamos con el nombre del protocolo (http) seguida de dos puntos (:) y dos barras (//) luego la cadena (www.) y finalmente el nombre de dominio del sitio a enlazar.

Por ejemplo:

Si queremos insertar: Visita www.sld.cu, habría que escribir:

<a href="http://www.sld.cu"> Visita Infomed </a>

(14)

Hipervínculo a otra página a otro sitio de internet:

La siguiente página muestra un hipervínculo al sitio principal del buscador Google:

<html>

<head>

</head>

<body>

<a href="http://www.google.com">Buscador Google</a>

</body>

</html>

(15)

Imágenes dentro de una página <img> :

Para insertar una imagen dentro de una página debemos utilizar el elemento HTML <img>

Esta etiqueta no tiene una marca de finalización.

Generalmente, la imagen se encuentra en el mismo servidor donde se almacenan nuestras páginas HTML. Los formatos clásicos son los archivos con extensiones gif, jpg y png.

La sintaxis de esta etiqueta es:

Como mínimo, debemos inicializar las propiedades src y alt de la marca HTML img.

(16)

Imágenes dentro de una página <img> :

En la propiedad src se indica el nombre del archivo que contiene la imagen

Como la imagen se encuentra en el mismo directorio donde se almacena la página HTML, con indicar el nombre de archivo basta (no es necesario indicar ninguna ruta de carpetas).

Otra propiedad obligatoria es alt, donde dispondremos un texto que verán los usuarios que visiten el sitio con un navegador que sólo permite texto. El texto debe describir el contenido de la imagen.

(17)

Imágenes dentro de una página <img> :

La sintaxis queda entonces de la siguiente forma:

El camino hacia el archivo lo haremos de la misma forma que para los enlaces:

Ejemplo:

<img

scr=/directorio/subdirectorio/nombre_del_fichero:gráf ico>

El valor del atributo scr permite especificar un URL y por tanto es correcto encontrar imágenes definidas como sigue: <img

scr="http://www.aramis.fr/imagenes/flores/rosa.gif">

(18)

Imágenes dentro de una página <img> :

Por ejemplo: si queremos insertar la imagen que tenemos al final, debemos tener en cuenta que la misma se llama logo_animales.gif y que debe estar dentro de la carpeta imágenes, que se encuentra en el mismo directorio que el documento donde la queremos insertar:

Habría que escribir:

<img src="imagenes/logo_animales.gif“>

(19)

Imágenes dentro de una página <img> :

Alineación de una imagen

La etiqueta <img> soporta el atributo align para alinear las imágenes.

Para alinear una imagen horizontalmente podemos hacerlo de la misma forma que el texto, es decir, utilizando el atributo align dentro de una etiqueta <p> o

<div>.

En este caso, lo que incluiremos dentro de esa etiqueta será la imagen en lugar del texto:

Este código mostrará la imagen en el centro:

(20)

Imágenes dentro de una página <img> :

Alineación de una imagen

Por ejemplo si queremos insertar una imagen en la página de volcanes podemos escribir el siguiente código:

<html>

<head>

<title> Web de volcanes </title>

</head>

<p align="center"> <img src="Imágenes/Dibujo2.gif"

align="center">

</body>

</html>

(21)

Hipervínculo mediante una imagen <a> y

<img>

Los hipervínculos se pueden indicar con una imagen como enlace, en este caso entre las etiquetas del hiperenlace indicamos la inclusión de la imagen,

Un ejemplo sería:

<a href="URL a la que se accede"><img src="Imagen"> y también texto</a>

En este caso aparecerá la imagen con el borde resaltado para indicar que es un hiperenlace.

(22)

Hipervínculo mediante una imagen

Por ejemplo, si queremos confeccionar una página que muestre dos imágenes (foto1.jpg y foto2.jpg) como hipervínculos y al ser presionados llamar a otra página, la sintaxis sería:

<html>

<head>

</head>

<body>

<h2>Presione alguna de las imagenes para conocer más sobre esa obra.</h2> <a href="pagina2.html"><img src="/imagenes/foto1.jpg" alt="Pintura Geométrica"></a>

<br> <a href="pagina2.html"><img

src="/imagenes/foto2.jpg" alt="Pintura Geométrica"></a> </

body>

</html>

(23)

Hipervínculo. Destino del enlace

El destino del enlace determina en qué ventana va a ser abierta la página vinculada, se especifica a través del atributo target al que se le puede asignar los siguientes valores:

 _blank: Abre el documento vinculado en una ventana nueva del navegador.

_parent: Abre el documento vinculado en la ventana del marco que contiene el vínculo o en el conjunto de marcos padre.

 _self: Es la opción predeterminada. Abre el documento vinculado en el mismo marco o ventana que el vínculo.

(24)

Hipervínculo. Destino del enlace

_top: Abre el documento vinculado en la ventana completa del navegador.

Nota: los valores que más frecuentemente se utilizan son: _blank y _self.

Por ejemplo:

Para insertar el enlace:

Visita www.aulaclic.com en una ventana nueva Habría que escribir:

<a href="http://www.aulaclic.com" target

="_blank">Visita www.aulaclic.com en una ventana nueva</a>

(25)

Hipervínculo. Destino del enlace

Por ejemplo, con el código que mostramos confeccionamos una página que contiene dos hipervínculos, el primero abrirá el sitio en el mismo navegador y el segundo en otra lugar del navegador:

Podemos ver la diferencia entre ambos hipervínculos, el segundo hipervínculo

<a href="http://www.clarin.com.ar"

target="_blank">Periódico Clarin</a> indica que el sitio sea abierto en otra ventana del navegador:

(26)

Hipervínculo a un cliente de correo :

El elemento <a> permite direccionar un hipervínculo a un programa de envío de correos que tengamos configurado en nuestra computadora.

Por ejemplo para confeccionar un hipervínculo a un cliente de correo de mail utilizamos la sintaxis:

<a href="mailto:[email protected]">Enviar mail.</a>

Cuando se presiona el enlace se abre el programa de envío de correos que tiene configurado el equipo y dispone como receptor del mensaje la dirección que configuramos en el propio enlace seguido de la palabra mailto:

(27)

Hipervínculo a un cliente de correo :

La sintaxis para disponer un título por defecto y un cuerpo de mensaje es:

<a href="mailto:[email protected]?

subject=título del mensaje&body=cuerpo del mensaje">Enviar mail.</a>

Luego de especificar el destinatario del mail disponemos un caracter de interrogación '?' seguido la palabra subject, un igual y el título por defecto que debe aparecer en la ventana de envío de mail. Por último separamos con un ampersand '&' el body (es decir el cuerpo del mensaje)

(28)

Anclas . Llamadas desde la misma página.

Puntos de fijación.

Otra posibilidad que nos brinda el HTML es disponer una referencia dentro de la página para poder posteriormente disponer un hipervínculo a dicha marca.

Es una práctica común cuando queremos desplazarnos dentro de una página de gran tamaño. Se disponen hipervínculos a diferentes anclas.

La sintaxis para definir un ancla es:

<a name="nombreancla"></a>

(29)

Anclas . Llamadas desde la misma página.

No debemos confundir un ancla con un hipervínculo, más allá que se utiliza el mismo elemento a. Para un ancla inicializamos la propiedad name con el nombre del ancla.

Un ancla se la define en una parte de la página que queremos que el operador llegue a partir de un hipervínculo.

Ahora la sintaxis para ir a un ancla desde un hipervínculo es la siguiente:

<a href="#nombreancla">Introducción</a><br>

Vemos que en la propiedad href indicamos el nombre del ancla.

(30)

Anclas . Llamadas desde la misma página.

En el ejemplo, cada hipervínculo hace referencia a un ancla que se encuentra en la misma página:

<a href="#introduccion">Introducción</a><br>

<a href="#mostrarbasedatos">show databases</a><br>

<a href="#creaciontabla">Creación de una tabla y mostrar sus campos</a><br>

<a href="#cargarregistros">Carga de registros a una tabla y su recuperación</a><br>

Luego la definición de las anclas son:

<h2>Introducción</h2>

<p>

(31)

Anclas . Llamadas desde otra página.

También es perfectamente válido la llamada a anclas desde otra página (no importa si se encuentra en el mismo sitio o en otro)

Debemos conocer el nombre de la página a llamar y el nombre del ancla, luego la sintaxis para la llamada al ancla es:

<a href="pagina2.html#introduccion">Introducción</

a>

Es decir luego del nombre de la página que llamamos disponemos el caracter # y seguidamente el nombre del ancla.

(32)

Las listas en HTML:

En las páginas Web, las listas son utilizadas para citar, numerar y definir objetos.

Cada uno de los elementos de una lista ha de insertarse entre las etiquetas <li> y </li>.

Por ejemplo, para insertar en una lista los siguientes elementos:

• Perro

• Gato

• Periquito

Habría que escribir:

...

<li>Perro</li>

<li>Gato</li>

<li>Periquito</li>

(33)

Las listas en HTML

Todos los elementos de la lista deberán encontrarse entre las etiquetas que indiquen si la lista es desordenada (con viñetas) u ordenada (numerada).

Podemos distinguir tres tipos de lista:

1) Listas desordenadas (Unordered Lists) 2) Listas ordenadas (ordered list)

3) Listas de definición (definition list).

(34)

<UL> Listas no ordenadas o desordenadas

Para que una lista sea desordenada, sus elementos deberán encontrarse entre las etiquetas <ul> y

</ul>.

A través del atributo type es posible elegir el tipo de viñeta, que puede ser circle (círculo), disc (disco) o square (cuadrado).

Con los elementos <li> se indicarán cada uno de los componentes de la lista.

Por ejemplo con el código: Se obtiene la lista:

<ul type="circle">

<li>Perro</li>

<li>Gato</li>

<li>Periquito</li>

</ul>

o Perro o Gato

o Periquito

(35)

<UL> Listas no ordenadas o desordenadas

En este ejemplo de lista tenemos tres elementos con un cuadrado de viñeta, y en el último elemento un círculo.

La sintaxis es:

<li>Elemento 1</li>

<li>Elemento 2</li>

<li>Elemento 3 </li>

<li type="circle"> Elemento 4

</li>

</ul>

Queda como resultado:

 Elemento 1

 Elemento 2

 Elemento 3 o Elemento 4

(36)

Títulos de las listas

Con la etiqueta <lh> definiremos el título de la lista, que aparecerá en la parte superior.

Por ejemplo si escribimos el siguiente código:

<ul>

<lh> Países del mundo </lh>

<li>Argentina <li>Perú

<li>Chile

</ul>

El resultado será:

Países del mundo

• Argentina

• Perú

• Chile

(37)

Títulos de las listas

En general el código sería:

< ul type =disc ó circle ó square >

<lh> Titulo de la lista </lh>

<li> Elemento 1 <li> Elemento 2 . . .

<li> Elemento n

</ul>

El resultado será:

Titulo

• Elemento 1

• Elemento 2

• Elemento 3….

• Elemento n

(38)

Listas ordenadas (ordered list) <ol>

En este tipo de lista se usa un número para indicar el orden de cada elemento de la lista. El ser ordenada no significa que ordene los elementos alfabéticamente sino que los elementos guardan un orden que es el número que indexa la lista.

La sintaxis será:

<p>Reglas de comportamiento en el trabajo</p>

<ol>

<li>El jefe siempre tiene la razón

<li>En caso de duda aplicar regla 1

</ol>

(39)

Listas ordenadas (ordered list) <ol>

También puede ser así:

<ol>

<lh>Reglas de comportamiento en el trabajo</lh>

<li>El jefe siempre tiene la razón

<li>En caso de duda aplicar regla 1

</ol>

El resultado es:

Reglas de comportamiento en el trabajo 1. El jefe siempre tiene la razón

2. En caso de duda aplicar regla 1

(40)

Listas ordenadas (ordered list) <ol>

A través del atributo type es posible elegir el tipo de numeración, que puede ser 1 (números) (1, 2, 3...), a (letras minúsculas) (a, b, c...), A (letras mayúsculas) (A, B, C,...) , i (números romanos en minúsculas) (i, ii, iii,...). o I (números romanos en mayúsculas) (I, II, III,...) .

Por ejemplo, para insertar la siguiente lista:

i. Perro ii. Gato

iii. Periquito

<li>Perro</li>

<li>Gato</li>

<li>Periquito</li>

</ol>

(41)

Listas de definición (definition list).

Se utiliza para asociar un término y la definición del mismo. El navegador se encarga de destacar y separa el término y su definición.

Cada elemento es presentado junto con su definición.

La etiqueta principal es <dl> y </dl> (definition list).

La etiquetas del elemento <dt> (definition term) y La etiqueta de su definición o descripción es

<dd> (definition description )

(42)

Listas de definición (definition list).

En general el código será:

<dl>

<lh>Titulo de la lista </lh>

<dt>Termino 1 <dd>Definición 1 <dt>Termino 2 <dd>Definición 2 . . .

<dt>Termino N <dd>Definición N

</dl>

Nota: El titulo de las lista <lh> como en los casos anteriores es opcional.

(43)

Anidar listas:

Es posible anidar listas dentro de otras, es decir listas de varios niveles, listas dentro de listas.

Estas listas pueden ser tanto desordenadas como ordenadas.

Por ejemplo, para insertar la siguiente lista:

1. Lunes

 Inglés

 Francés 2. Martes

1. Inglés

A. Corrección de ejercicios B. Proponer ejercicios

(44)

<ol>

<li>Lunes

<li>Inglés</li>

<li>Francés</li>

</ul>

</li>

<li>Martes

<ol>

<li>Inglés</li>

<li>Corrección de ejercicios</li>

<li>Proponer ejercicios </li>

</ol>

</li>

</ol>

</li>

</ol>

Anidar listas:

(45)

Ejemplo de listas anidadas:

<p>Ciudades del mundo</p>

<ul>

<li>Argentina <ol>

<li>Buenos Aires <li>Bariloche

</ol>

<li>Uruguay <ol>

<li>Montevideo <li>Punta del Este </ol>

</ul>

El resultado es:

Ciudades del mundo

• Argentina

1. Buenos Aires 2. Bariloche

• Uruguay

1. Montevideo 2. Punta del Este

Anidar listas:

(46)

El objetivo fundamental de las tablas es mostrar una serie de datos en forma ordenada, organizado en filas y columnas.

Las tablas están formadas por celdas.

Filas

Columnas

Tabla (<table><tr><td>)

(47)

Tabla (<table><tr><td>)

Para crear una tabla hay que insertar las etiquetas

<table> y </table>.

Dentro de estas dos etiquetas colocaremos todas las otras etiquetas, textos e imágenes que darán forma y

contenido a la tabla.

Para crear una tabla es necesario especificar el número de filas y columnas que formarán la tabla.

Fila <tr>

Para identificar cada una de las filas de la tabla es necesario insertar las etiquetas <tr> y </tr>

(48)

Tabla (<table><tr><td>)

Por ejemplo, para crear una tabla con tres filas escribiríamos:

<table>

</table>

Columna o celda <td>

Dentro de cada fila de la tabla, habrá diferentes celdas. Cada una de estas celdas será definida por el par de etiquetas: <td> y </td>.

Dentro de estas etiquetas será donde coloquemos nuestro contenido.

(49)

Tabla (<table><tr><td>)

Es necesario insertar las etiquetas <td> y </td> por cada una de las celdas que integren cada una de las filas de la tabla. Por lo tanto, las etiquetas <td> y

</td> se insertan entre las etiquetas <tr> y </tr>.

Por ejemplo: para insertar la tabla,

Sábado Domingo

Curso HTML Curso Dreamweaver Curso FrontPage Curso Flash

Habrá que escribir el siguiente código:

(50)

<tr>

<td> Sábado </td>

<td>Domingo</td>

</tr>

<tr>

<td>Curso HTML</td>

<td>Curso Dreamweaver</td>

</tr>

<tr>

<td>Curso Frontpage</td>

<td>Curso Flash</td>

</tr>

</table>

Primera fila.

Segunda fila.

Tercera fila.

Primera celda o columna Segunda celda.

Primera celda.

Segunda celda.

Inicio de la tabla.

Cierre de la tabla.

Bordes de la tabla.

Tabla (<table><tr><td>)

(51)

La etiqueta <th>. Encabezado de columna

Para la etiqueta <th> es posible especificar los mismos atributos que para la etiqueta <td>, pero esta nueva etiqueta hace que el texto de la celda aparezca centrado y en negrita, por lo que se utiliza para definir los encabezados o títulos de las

columnas. .

Por ejemplo, si quisiéramos crear la siguiente tabla

Sábado Domingo

Curso HTML Curso Dreamweaver

Curso FrontPage Curso Flash

Escribiéramos el siguiente código:

(52)

Título de tabla <caption>

Es posible establecer un título para la tabla mediante las etiquetas <caption> y </caption>.

Estas etiquetas han de ir después de la etiqueta

<table>, y puede especificarse el valor de los atributos align (con los valores bottom, center, left, right y top) y valign (con los valores bottom y top).

Por ejemplo, para obtener la siguiente tabla

Debemos escribir el siguiente código:

Titulo de la tabla

Sábado Domingo

Curso HTML Curso Dreamweaver

Curso FrontPage Curso Flash

(53)

Título de tabla <caption>

<table width="50%" border="1" align="center">

<caption align="right" valign="top">Titulo de la tabla <tr>

<tr>

<th>Sábado</td>

...

</tr>

</table>

El título aparece ajustado a la margen derecho de la tabla (align="right") y encima de la tabla (valign="top")

Es posible modificar los siguientes atributos de una tabla:

ancho de la tabla, altura, espacio entre el contenido de las celdas y los bordes, espacio entre celdas, grosor del borde, alineación de la tabla dentro de la página, color de fondo, imagen de fondo, color del borde.

(54)

Tabla y combinación de celdas.

Los atributos que se utilizan para combinar celdas son colspan y rowspan en las etiquetas <td> y

<th>.

A través del atributo colspan se especifica el número de columnas por las que se extenderá la celda, y a través del atributo rowspan se especifica el número de filas por las que se extenderá la celda.

(55)

Tabla y combinación de celdas.

Por ejemplo, para insertar la siguiente tabla:

DIFERENCIAS ENTRE EL PERRO Y EL HOMBRE

DIFERENCIAS PERRO

HOMBRE

PEQUEÑO GRANDE

Duración

crecimiento 10 meses 18 a 24 meses 16 años Tiempo de

gestación 58 a 63 días 9 meses

Duración de vida del

pelo/cabello 1 año 2 a 7 años

Habría que escribir el siguiente código

(56)

<tr>

<td colspan="4" align="center">DIFERENCIAS ENTRE EL PERRO Y EL HOMBRE</td>

</tr>

<td rowspan="2">DIFERENCIAS</td> rowspan: Combinar filas

<td colspan="2">PERRO</td> colspan: Combinar columnas <td rowspan="2">HOMBRE</td>

</tr>

<td>PEQUEÑO</td>

<td>GRANDE</td>

</tr>

<td>Duracion del crecimiento</td>

<td>10 meses</td>

<td>18 a 24 meses</td>

</tr>

<td>Tiempo de gestacion</td>

<td>9 meses</td>

</tr>

<td>Duracion de vida del pelo</td>

</tr>

</table>

(57)

Estudio independiente:

1) Cree dos páginas sobre volcanes, en una de ellas inserte una lista sobre volcanes famosos e inserte la imagen junto al texto, realice un enlace a un documento de Word, a una página externa y a un correo electrónico. En la otra escriba lo que desee sobre el tema.

2) Inserte una tabla en la página Volcanes. html, con los nombres de los volcanes más activos del mundo, con su localización geográfica, y sus últimas erupciones.