Ya es hora de salir un poco del monótono texto y agregarle color a nuestra página con una buena imagen. Y una vez mas el amigo Gregory va a ayudarnos en la tarea.

Para esta “complicada” misión vamos a utilizar la etiqueta ‘<img>’ de la siguiente forma:

<img src=”ruta-al-archivo.extensión” alt=”texto alternativo” width=”ancho” height=”alto” align=”alineación con el texto” />

Por ejemplo:

<img src=”http://www.creosignum.com/images/logo.gif” alt=”antiguo logotipo de creosignum” width=”550” height=”352” align=”right” />

Nuestro ejemplo se vería así:

Ahora estudiemos detenidamente los atributos que utilizamos. En primer lugar esta el atributo ‘src’ y el único que técnicamente es necesario, en el determinaremos la ruta a nuestra imagen. Podemos determinar una ruta absoluta. Por ej:

http://www.algun-sitio.com/carpeta/imagen.png o http://www.otrositio.com/imagen.gif

O una ruta relativa:

imagenes/imagen.jpg o imagen.png

En los primeros casos indicamos directamente la url de la imagen, que deberá estar en un servidor web. En los segundos indicamos la ubicación de la imagen con respecto a nuestra página.

Otros atributos son ‘width’ y ‘height’ que nos permiten determinar el ancho y el alto respectivamente, de la imagen (en pixeles).

El atributo ‘alt’ es el texto alternativo que se mostrara si no se puede cargar la imagen o si el navegador las tiene deshabilitadas. Para el Google también es importante este atributo.

Finalmente el atributo ‘align’ nos permite determinar la alineación de nuestra imagen con respecto al texto (tienen que estar en el mismo párrafo). Puede tomar los valores:

• ‘left’ (izquierda),
• ‘right’ (derecha),
• ‘baseline’ (línea de base),
• ‘top’ (superior),
• ‘middle’ (medio),
• ‘bottom’ (inferior),
• ‘texttop’ (texto superior),
• ‘absmiddle’ (medio absoluta)
• ‘absbottom’ (inferior absoluta).

Que la cantidad de opciones no los desconcierte, en la práctica únicamente utilizaremos ‘left’ y ‘right’ de la siguiente manera:

Así queda una imagen alineada a la izquierda del texto (left):

Así a la derecha (right):

Sino le damos ningún valor, por defecto se alinea como bottom:

Debemos tener cuidado con el atributo ‘align’ ya que no solo alinea el texto alrededor de la imagen, sino también divs, componentes, otras imágenes y mas cosas; pudiendo potencialmente deformar nuestra página.

Formatos de imagen y algunas consideraciones de peso:

Toda imagen que manejamos en forma digital se encuentra comprimida como un archivo, pero a su vez cada archivo puede estar comprimido de una manera diferente; a estas diferentes formas de almacenar y comprimir una imagen los llamamos formatos. Observaran que en estos ejemplos he estado usando las extensiones .gif, .jpg y .png, esos son los tres formatos de imágenes que se utilizan para la web. Cada uno tiene sus pros y sus contras:

El GIF puede tener fondos transparentes y animaciones (sencillas) y también es muy liviano (mas adelante “hablo” de eso). Pero los gif tienen una gran contra, solo soportan 256 colores a la vez, por ende quedan descartados para fotografías, degradados o imágenes con demasiados colores.

Para fotografías una buena elección son los JPG. Este tipo de imágenes pesan un poco más que los gif pero de todas formas su peso puede graduarse con su nivel de compresión, cuanto mas comprimida menos pesa pero mas se degrada su calidad de imagen. Solamente puede tener problemas con grandes zonas de un color plano ya que dependiendo de la compresión las puede llegar a mostrar “granuladas”.

Finalmente nos queda el formato PNG (en lo personal el que mas uso). Tiene un excelente manejo de sombras y degradados; por lo tanto es apto para mostrar todo tipo de gráficos y fotografías. Es liviano y también permite utilizar fondos transparentes (aunque no todos los navegadores lo muestran así). Su principal defecto es que al ser un formato un poco más nuevo que los otros 2, no tiene compatibilidad con versiones viejas de IE (de la 5 para atrás).

Llevo un buen rato hablando de peso de las imágenes. Con esto me refiero a que una imagen (en el formato que sea) no deja de ser un archivo y como tal posee un determinado tamaño en bytes, que va desde unos pocos kb hasta varios megas en una foto de altísima resolución. Ahora tomen en cuenta que antes de mostrarse, una imagen debe ser descargada junto con la página que la contiene. Y también tomen en cuenta que no todo el mundo tiene una conexión de banda ancha de 5 megas. Por lo tanto debemos cuidar de que nuestras imágenes no pesen demasiado o demorarán una eternidad en cargarse.

Eso significa que ni de chiste podemos tomar una fotografía con una cámara de 10 megapíxeles y usarla directamente en un sitio web. Si este es nuestro caso tendremos que primero editarla con algún programa de retoque fotográfico como PhotoShop, Photopaint o el gratuito y opensource, Gimp. En general con 500px de ancho y su correspondiente alto nos va a sobrar para cualquier cosa que queramos hacer con la imagen (en mi sitio las uso de 450px de ancho). Si queremos insertar en nuestra web una imagen que no se encuentra en los formatos permitidos, también podemos abrirlas con los programas antes mencionados y exportarla en el formato que queramos.

Tengan cuidado, insertar una imagen de 5 megapíxeles pero determinar un ancho de 200 píxeles con el atributo ‘width’ no le quita peso solo la hace mas pequeña.

Fotografiando al Doctor House

Si leyeron el post anterior de este tutorial, espero que hayan guardado la página que estuvimos haciendo porque la vamos a usar, sino la guardaron, no la hicieron o recién se enganchan con este tutorial, lean los dos anteriores y hagan la página que proponemos en el anterior. Recuerden que si bien mi página trata sobre House, ustedes pueden hacerla del personaje que prefieran.

El código de mi página de House había quedado así:

<?xml version="1.0"  encoding="UTF-8"?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es" lang="es" >

<head>

<title>Gregory House, un enfermo que cura</title>

</head>

<body>

<!--Titulo de la página-->

<h1>House, un doctor muy peculiar</h1>

<!--Agrego un separador horizontal justo debajo del título de la página-->

<hr />

<!--Agrego indentado a todo el texto y al título de este -->

<blockquote>

<!--Titulo del texto-->

<h2>Introducción</h2>

<p>

Doctor House es una excelente serie transmitida por la cadena Fox, cuyo argumento gira en torno al pabellón de diagnostico de un enorme hospital. Así capitulo tras capitulo el doctor Gregory House (Hug Laurie) y su equipo de expertos deberán luchar contra los villanos de la serie, o sea las enfermedades. Pero no cualquier enfermedad ya que a sus manos solo llegan los casos que todos los demás médicos no han podido diagnosticar y todo se transforma en una permanente carrera contra el tiempo en la que no siempre se gana.

</p>

<p>

<!--Aquí doy énfasis suave a una frase en particular-->

Esta premisa tal vez parece muy simple como para lograr un buen argumento, pero los excelentes guionista, la brillante dirección y sobre todo <em>el carisma y la profundidad de cada uno de los personajes dan fuerza al conjunto al punto de lograr una de las mejores series del mundo (y a mi gusto la mejor).</em>

</p>

<p>

<!--aquí utilizo la etiqueta abbr sobre la palabra house-->

Por supuesto el personaje mejor desarrollado es el mismo <abbr title="Hug Laurie" >House</abbr>. Irreverente, controvertido, egocéntrico, brillante, calculador, impredecible… en fin, House. Según los guionistas el personaje de House esta basado nada mas ni nada menos que en el mítico Sherlock Holmes. No solo en su carácter y en su forma detectivesca de resolver los casos (médicos), sino también en su afición por la música (Sherlock tocaba violín, House piano y guitarra) y su adicción por las drogas (Sherlock fumaba Opio, House abusa del Vicodín, un fuerte calmante que lo ayuda con el dolor que le produce su pierna lisiada). Sherlock y House también comparten un carácter un poco “sobrador” que en la tercera temporada le llega a causar severos problemas.

</p>

<p>

Actualmente la serie se presta a recibir la sexta temporada en los próximos meses. Y cada vez son más los fanáticos a nivel mundial. Parece que con este doctor, todos vamos atener que ser pacientes.

</p>

</blockquote>

</body>

</html>

Ahora vamos a insertar una foto justo a la izquierda del texto. Esta foto estará guardada en una subcarpeta llamada images (o como gusten llamarla) dentro de la carpeta donde tenemos nuestro index.html (la página que hicimos en el post anterior). Si quieren utilizar la misma foto que yo es esta:

Para insertarla utilizaremos el siguiente código:

<img src=”images/house-y-globo.jpg” alt=”El doctor Gregory House” width=”168” height=”250” align=”left” />

Y lo insertaremos en nuestro código así:

<?xml version="1.0"  encoding="UTF-8"?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es" lang="es" >

<head>

<title>Gregory House, un enfermo que cura</title>

</head>

<body>

<!--Titulo de la página-->

<h1>House, un doctor muy peculiar</h1>

<!--Agrego un separador horizontal justo debajo del título de la página-->

<hr />

<!--Agrego indentado a todo el texto y al título de este -->

<blockquote>

<!--Titulo del texto-->

<h2>Introducción</h2>

<p>

<img src=”images/house-y-globo.jpg” alt=”El doctor Gregory House” width=”168” height=”250” align=”left” />

Doctor House es una excelente serie transmitida por la cadena Fox, cuyo argumento gira en torno al pabellón de diagnostico de un enorme hospital. Así capitulo tras capitulo el doctor Gregory House (Hug Laurie) y su equipo de expertos deberán luchar contra los villanos de la serie, o sea las enfermedades. Pero no cualquier enfermedad ya que a sus manos solo llegan los casos que todos los demás médicos no han podido diagnosticar y todo se transforma en una permanente carrera contra el tiempo en la que no siempre se gana.

</p>

<p>

<!--Aquí doy énfasis suave a una frase en particular-->

Esta premisa tal vez parece muy simple como para lograr un buen argumento, pero los excelentes guionista, la brillante dirección y sobre todo <em>el carisma y la profundidad de cada uno de los personajes dan fuerza al conjunto al punto de lograr una de las mejores series del mundo (y a mi gusto la mejor).</em>

</p>

<p>

<!--aquí utilizo la etiqueta abbr sobre la palabra house-->

Por supuesto el personaje mejor desarrollado es el mismo <abbr title="Hug Laurie" >House</abbr>. Irreverente, controvertido, egocéntrico, brillante, calculador, impredecible… en fin, House. Según los guionistas el personaje de House esta basado nada mas ni nada menos que en el mítico Sherlock Holmes. No solo en su carácter y en su forma detectivesca de resolver los casos (médicos), sino también en su afición por la música (Sherlock tocaba violín, House piano y guitarra) y su adicción por las drogas (Sherlock fumaba Opio, House abusa del Vicodín, un fuerte calmante que lo ayuda con el dolor que le produce su pierna lisiada). Sherlock y House también comparten un carácter un poco “sobrador” que en la tercera temporada le llega a causar severos problemas.

</p>

<p>

Actualmente la serie se presta a recibir la sexta temporada en los próximos meses. Y cada vez son más los fanáticos a nivel mundial. Parece que con este doctor, todos vamos atener que ser pacientes.

</p>

</blockquote>

</body>

</html>

Así se ve nuestra página ahora:

Noten que si bien la imagen se alineo con el texto a la izquierda, como queríamos, quedo “pegada” al texto y eso no queda muy prolijo. Para separarla debemos hacer uso de css. Si bien faltan varios post para que comencemos con este tema, me voy a adelantar un poco y les voy a decir como corregirlo. Simplemente agreguenle el siguiente atributo a la etiqueta ‘<img>’:

style=”margin: 0px 4px 2px 0px;”

Ahora nuestra etiqueta queda así:

<img src=”images/house-y-globo.jpg” alt=”El doctor Gregory House” width=”168” height=”250” align=”left” style=”margin: 0px 4px 2px 0px;” />

Ahora nuestra imagen posee un elegante margen a derecha y abajo que la separa del texto:

Pero como una sola imagen es muy poco vamos a agregarle dos mas. Las imagenes guardenlas como siempre en la carpeta images (o como le hayan puesto) si quieren usar las mismas que yo, son estas:

Para insertarlas vamos a utilizar el siguiente código:

<img src="images/house-vs-god.png" alt="House vs God" height="150" />

<img src="images/house-guitar-heroe.jpg" alt="House Heroe de la guitarra" height="150" />

Para que las imágenes queden centradas las introducimos dentro de un párrafo con el atributo ‘align’ como ‘center’. Y agregamos un separador horizontal justo abajo con la etiqueta ‘<hr />’. Nuestro código queda así:

<!--Agrego una imagen centrada dentro de un parrafo-->

<p align="center" >

<img src="images/house-vs-god.png" alt="House vs God" height="150" />

<img src="images/house-guitar-heroe.jpg" alt="House Heroe de la guitarra" height="150" />

</p>

<!--Agrego otro separador-->

<hr />

Dentro de nuestro código general vamos a insertarlas debajo del separador horizontal que habíamos puesto antes:

<?xml version="1.0"  encoding="UTF-8"?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es" lang="es" >

<head>

<title>Gregory House, un enfermo que cura</title>

</head>

<body>

<!--Titulo de la página-->

<h1>House, un doctor muy peculiar</h1>

<!--Agrego un separador horizontal justo debajo del título de la página-->

<hr />

<!--Agrego una imagen centrada dentro de un parrafo-->

<p align="center" >

<img src="images/house-vs-god.png" alt="House vs God" height="150" />

<img src="images/house-guitar-heroe.jpg" alt="House Heroe de la guitarra" height="150" />

</p>

<!--Agrego otro separador-->

<hr />

<!--Agrego indentado a todo el texto y al título de este -->

<blockquote>

<!--Titulo del texto-->

<h2>Introducción</h2>

<p><img src="images/house-y-globo.jpg" alt="El doctor Gregory House" width="168" height="250" align="left" style="margin: 0px 4px 2px 0px;"/>

Doctor House es una excelente serie transmitida por la cadena Fox, cuyo argumento gira en torno al pabellón de diagnostico de un enorme hospital. Así capitulo tras capitulo el doctor Gregory House (Hug Laurie) y su equipo de expertos deberán luchar contra los villanos de la serie, o sea las enfermedades. Pero no cualquier enfermedad ya que a sus manos solo llegan los casos que todos los demás médicos no han podido diagnosticar y todo se transforma en una permanente carrera contra el tiempo en la que no siempre se gana.

</p>

<p>

<!--Aquí doy énfasis suave a una frase en particular-->

Esta premisa tal vez parece muy simple como para lograr un buen argumento, pero los excelentes guionista, la brillante dirección y sobre todo <em>el carisma y la profundidad de cada uno de los personajes dan fuerza al conjunto al punto de lograr una de las mejores series del mundo (y a mi gusto la mejor).</em>

</p>

<p>

<!--aquí utilizo la etiqueta abbr sobre la palabra house-->

Por supuesto el personaje mejor desarrollado es el mismo <abbr title="Hug Laurie" >House</abbr>. Irreverente, controvertido, egocéntrico, brillante, calculador, impredecible… en fin, House. Según los guionistas el personaje de House esta basado nada mas ni nada menos que en el mítico Sherlock Holmes. No solo en su carácter y en su forma detectivesca de resolver los casos (médicos), sino también en su afición por la música (Sherlock tocaba violín, House piano y guitarra) y su adicción por las drogas (Sherlock fumaba Opio, House abusa del Vicodín, un fuerte calmante que lo ayuda con el dolor que le produce su pierna lisiada). Sherlock y House también comparten un carácter un poco “sobrador” que en la tercera temporada le llega a causar severos problemas.

</p>

<p>

Actualmente la serie se presta a recibir la sexta temporada en los próximos meses. Y cada vez son más los fanáticos a nivel mundial. Parece que con este doctor, todos vamos atener que ser pacientes.

</p>

</blockquote>

</body>

</html>

El resultado debería ser el siguiente:

Nuestro código ya se esta poniendo voluminoso ¿no?. Por eso es importante usar un editor como el notepad++ que les recomendé en el primer post.. Yo desde ahora voy a empezar a usar un plugin para colorear el código y que así se entienda mejor (en lugar de poner todo en verde como vengo haciendo hasta ahora).

La que viene vamos a ver como crear listas, links a otras páginas y puntos de anclaje. Si tienen dudas (soy consiente de que no soy muy didáctico para escribir), o quieren corregir o agregar algo, comenten.

PD: me acabo de inscribir en bitacoras.com así que si les gusto el post vótenme con el botoncito de abajo.

study