Una vez que empiezas a crear páginas Web, una de las primeras cosas que querrás hacer es añadir gráficos. Las personas somos muy visuales y seguimos al pie de la letra lo de “más vale una imagen que mil palabras”, y por esto, añadir gráficos a nuestra página Web puede cambiar totalmente su carácter. Se pueden usar imágenes de diferentes tamaños, formas o medidas.
Podemos incluso añadir gráficos e imágenes animados. Muchos menús en las Web que visitamos están hechos de gráficos. Lo cierto es que podemos utilizarlas de cientos de formas distintas y como nuestra imaginación quiera.
Hay dos formas de obtener imágenes gráficas: Las puedes bajar o descargar de muchos sitios Web existentes, o las puedes crear tú mismo. En muchos sitios de descarga de imágenes, la bajada de gráficos es gratuita aunque en muchos otros las ponen a la venta. Si hacemos una búsqueda en Google, encontraremos muchos de estos sitios de imágenes gratis y cientos de programas para crearlas o modificarlas.
Digamos que has encontrado uno de estos sitios de imágenes gratuitas y te gusta una de ellas. Si pulsas el botón derecho del ratón sobre la imagen, se mostrará un menú donde una de las opciones es “Guardar imagen como…”. Podrás guardar esa imagen en la carpeta de tu ordenador de tu elección. Cuando creas tus páginas Web, se debería guardar las imágenes en la misma carpeta donde estás guardando tus documentos HTML, o en una carpeta junto a estos documentos Web.
Si quieres crear tus propias imágenes, necesitarás un programa o software que pueda editar archivos GIF y JPG (o cualquier otro formato de imágenes). Un programa muy popular para este tipo de ediciones que tenemos disponible en la Web es el Paint Shop Pro, y puedes obtener una copia pulsando aquí. Con un poco de práctica y un poco de habilidad artística, pronto estarás creando imágenes como un profesional.
Como se ha comentado en anteriores secciones de este tutorial, las imágenes son insertadas en una página Web con la siguiente etiqueta:
- <img src=»nombre del fichero«>
También puedes usar una imagen como un enlace para ir a otra página o elemento. Para hacer esto, simplemente inserta la etiqueta “img src” después del código de enlace habitual. Si nos aparece un borde no deseado en nuestra imagen, le podemos poner el la siguiente etiqueta “border=0”:
- <a href=»http://www. ordenadores-y-portatiles.com»><img src=»images/logo.jpg» border=0></a>
En este ejemplo, si los usuarios pulsan sobre la imagen logo.jpg, serán llevado a la página principal de ordenadores y portátiles.
Una imagen o gráfico también puede ser utilizada como fondo de tu página Web. Para hacerlo, solo tienes que añadir la línea “background=»nombre del archivo» dentro de la etiqueta “body”.
Otra cosa que podemos hacer, aunque no es totalmente necesario, es añadir a tu imagen la etiqueta “alt”. Esta extensión le da a tu imagen una etiqueta con un nombre, que aparece cuando el usuario pasa el ratón sobre el gráfico. También aparece antes de que la imagen aparezca cuando se está cargando la imagen en el navegador, manteniendo el interés del usuario mientras se carga la imagen. Esta etiqueta se puede usar de la siguiente manera:
- <img src=»images/logo.jpg» alt=»Frase que quieres que aparezca«>
Cuando ponemos imágenes en nuestra Web, también tenemos que alinearlas correctamente De esta manera siempre las tendremos posicionadas donde nosotros queremos. Para ellos, usaremos ciertas etiquetas que mostramos a continuación:
- Usa la etiqueta <div align=.»..»> antes de la etiqueta de imagen para centrar o justificarla a la derecha o izquierda.
- Usa la etiqueta </div> después de la imagen para finalizar la justificación.
- Usa la etiqueta <align=.»opciones«> dentro de “img src” para que el texto quede junto a la imagen donde nosotros queramos. Tenemos las opciones “bottom”, “top” y “middle”. Podemos experimentar con estas opciones y ver donde nos queda el texto.
Practica con todas estas etiquetas de imágenes HTML, y verás que es muy sencillo modificarlas y colocarlas en nuestras páginas HTML. En la siguiente sección veremos como podemos poner nuestras páginas online. Haz clic en el enlace para ver el artículo:
Qué tener en cuenta para poner tus páginas online?
