HTML – Uso de imágenes y elementos gráficos

En este videotutorial, os voy a explicar el uso de imágenes y elementos gráficos dentro del código HTML.

Las imágenes, supongo que todos sabeis lo que són, pero vamos a hacer una pequeña definición de las imágenes… Una imagen es una representación que manifiesta la apariencia de una cosa. Hay muchas formas de imagen, pero nosotros nos vamos a centrar en la imagen visual, ya que no entra cabida en HTML otro tipo de imagen, y si entrara, no es el fin de este tutorial.

Así que vamos a ello.

Para empezar vamos a insertar una imagen en nuestro documento HTML, (como explico en el video, no hace falta seguir por donde ibamos, podeis crear uno nuevo) para ello vamos a utilizar la etiqueta <img> pasandole el parametro src que contendrá la dirección de donde se aloja nuestra imagen. Veamos un ejemplo:

<img src=”tutorial.jpg”>

En este ejemplo, utilizamos la imagen tutorial.jpg para mostrarse en pantalla, vemos como está contenida dentro de la etiqueta img y como lo recibe el parametro src. Esta etiqueta pueda recibir además tres parametros más, como son border, align y alt, borde, alineación y descripción respectivamente. Veamos un ejemplo:

<img src=”http://www.vertutoriales.com/tutorial.jpg” border=”2px” align=”right” alt=”imagen de tutoriales”>

Como podeis en este ejemplo, la imagen la tomamos de una dirección de internet, así no la toma desde la dirección local, además sigue el mismo patrón que otras etiquetas, el borde y la alineación. El parametro Alt es aconsejable ponerlo por varias razones, pero las más destacadas son, 1º por posicionamiento, ya que los buscadores rastrean las descripciones de las imagenes, y 2º por accesibilidad, ya no solo para gente ciega que lea la descripción, sino tambien para oque no acepten imagenes, moviles, etc…

Tened en cuenta que las imagenes que tomeis desde sitios externos, si no es vuestro servidor pueden en algún momento eliminarla y por tanto dejar la página sin esa imagen.

Vamos a continuar, aunque lo comentamos en el tutorial anterior del uso de enlaces, vamos a decirlo tambien en este rapidamente, para usar una imagen para enlazar, el formato de la etiqueta sería así:

<a href=”http://www.vertutoriales.com/”><img src=”tutorial-imagen.jpg”></a>

Fijarse, lo primero que hacemos es utilizar la etiqueta <a> como si fuera un enlace normal, y en el lugar donde debiera de estar el texto del link, ponemos la etiqueta <img> para utilizar la imagen en vez del texto. No tiene más complicación.

Ahora vamos a explicar los mapas dentro de las imagenes. La etiqueta <map> se usa para crear dentro de una imagen, unas areas las cuales podemos darle ciertas funciones, en nuestro ejemplo lo vamos a utilizar como enlaces. De esta manera, si tenemos un mapa de una ciudad, podremos partir la imagen en areas, y cada area enlazar con la página que corresponda. Vamos a ver el código y lo explicamos:

<img src=”tutorial.jpg” usemap=”#objetivo” alt=”Web para aprender con videotutoriales” >

<map name=”objetivo”>
<area shape=circle coords=”35, 35, 20″ href=”http://www.vertutoriales.com” alt=”Objetivo”>
</map>

Lo primero que hacemos es cargar la imagen normalmente, con los parametros que queramos, en este caso solo la descripción, y declaramos usemap con un nombre acompañado por la # en este caso #objetivo, este nombre será para luego designar el mapa al que pertenece esta imagen.

Declaramos el mapa y le pasamos el parametro name, ha de ser igual que el declarado en el usemap de la imagen. Y luego vamos creandole tantas areas como queramos, en nuestro ejemplo solo creamos uno de forma circular. cada área irá declarada con <area> y los atributos que se quieran para dar la forma. Son los siguientes:

• shape= Entre comillas estableceremos el tipo de área a definir. Puede tratarse de rect (rectangular), poly (poligonal) o circle (circular).
• Coords= Entre comillas indicaremos los pares de coordenadas de cada punto del área a activar. En las áreas rectangulares deben especificarse las coordenadas de la esquina superior izquierda y las de la esquina inferior derecha. En las poligonales especificaremos las coordenadas de todos los vértices del área y en las circulares indicaremos las coordenadas del centro del circulo junto con el valor del radio .
• Href: Ya sabeis que indica la dirección de la página web a la que accede si pinchamos en un área determinada.

Para finalizar con las imagenes, comentaros que si vais a utilizar formas muy complejas, os aconsejo que utiliceis algún editor como Dreamweaver o alguno similar, por lo tedioso que puede llegar a ser trazar una forma con muchos vertices.

Vamos con los elementos gráficos. Esto suena enorme, pero en realidad es una línea,vamos a ver el ejemplo y lo comentamos:

<hr size=”1px”>

Esta etiqueta <hr> sin más atributos, nos mostrará una línea horizontal de punta a punta de nuestra página con sombra. En el ejemplo anterior le hemos pasado el parametro size con 1 pixel de amplitud en vertical, a más pixeles más altura tendrá la linea. Además puede recibir 2 parametros más. Vamos a verlo:

<hr size= “5px” width=”80%” noshade>

En este ejemplo, creamos una linea horizontal de 5 pixeles de altura con size y que ocupa un 80% de la anchura de la página con width, además le ponemos el atributo noshade, para que sea un formato plano sin sombra.

Y listo! ya está explicadas las imagenes en html y los elementos gráficos. Comentaros que todo esto es una iniciación, pero que poco a poco iremos complicando. Lo mejor es que os vayais habituando a los parametros más comunes y a las etiquetas más usuales, para luego cuando toque programar css o php no tengais problema y podais entender de lo que se hable.

Nada más, si teneis alguna duda, no os lo penseis y dejar algún comentario y gustosamente os lo explicaré.

Un saludo!