El lenguaje HTML

Enlaces e imágenes

Enlace <a href=http://direccion-URL> texto </a> Imagen <img src=” archivo_de_imagen ” alt=” texto alternativo” >

Para insertar un enlace hacen falta al menos dos datos:

• La dirección URL a donde se dirigirá el enlace al hacer clic en él ( href )

• El texto visible del enlace

Será de fundamental importancia que el enlace comience con las siglas http://, y que el texto visible del enlace identifique el contenido y no sea un texto genérico como “clic aquí”.

<a href ="http://es.wikipedia.org" > Enciclopedia libre </a>

Se verá así:

Enciclopedia libre

En el caso de las imágenes, se debe especificar la URL de una imagen que esté en línea, pero es recomendable utilizar sólo imágenes que estén en sitios propios para evitar el riesgo de que sean eliminadas o cambiadas.

Por otra parte, es de fundamental importancia para los usuarios invidentes o aquellos que utilizan navegadores de sólo texto indicar el contenido de la imagen a través de un texto alternativo:

< img src ="http://www.moodle3.hezkuntza.net/file.php/78/ranas.JPG" alt="ranas" />

Para averiguar la dirección o URL de una imagen que se ha subido a la plataforma, la forma más práctica será insertar la imagen utilizando los métodos habituales (mediante el botón Insertar imagen de la barra de herramientas), y después trabajar sobre el código. Podrás modificar, entre otras cosas:

• El tamaño de la imagen

  • Añade width="50%" para que la imagen ocupe la mitad de la anchura de la pantalla, o width="100%" para que su tamaño se expanda hasta ocuparla por completo:

< img src ="http://www.moodle3.hezkuntza.net/file.php/78/ranas.JPG" alt="ranas" width="50%" />

< img src ="http://www.moodle3.hezkuntza.net/file.php/78/ranas.JPG" alt="ranas" width="100%" />

• Su borde

  • Añade border="1" para que la imagen tenga un borde de 1px de grosor, o border="0" para que la imagen no tenga borde:

< img src ="http://www.moodle3.hezkuntza.net/file.php/78/ranas.JPG" alt="ranas" border="1" />

< img src ="http://www.moodle3.hezkuntza.net/file.php/78/ranas.JPG" alt="ranas" border="0" />

• Su alineación

  • Para que la imagen tenga una alineación hacia la derecha, deberás crear una división (div) que tenga el estilo “alineado a la derecha” e insertar la imagen dentro del DIV:

<div style="text-align: right;"> <img src="….."> </div>

• Para que la imagen tenga una alineación hacia la derecha, y el texto siguiente a la imagen se distribuya a su izquierda, deberás crear un DIV que tenga el estilo “flotando a la derecha”:

<div style="float: right;"> <img src="….."> </div>

<div style="text-align: right;"> <img src="….."> </div>	<div style="float: right;"> <img src="….."> </div>

• Si quieres que la imagen se alinee o flote a la izquierda, utiliza “left”:

  • <div style="text-align: left;"> <img src="….."> </div>

  • <div style="text-align: left;"> <img src="….."> </div>

• Para centrado, escribe: “center”:
  
  
  • <div style="text-align: center;"> <img src="….."> </div>