26 abril 2009 in Diseño Web, XHTML/CSS by dacho

votar
Share

Hola gente después de prometer llego con un poco de atraso con la lección de Insertar imágenes y darles formato, para poder ir haciendo cosas mas interesantes en un sitio web.

La inserción de una imagen en un documento HTML es extremadamente sencilla, es una etiqueta mas como las que hemos visto, en este caso el código es:

 
<img src="imagen.jpg" alt="aqui una pequeña descripcion de la imagen"/>

Ya te habrás dado cuenta que en la propiedad src se coloca el nombre de la imagen, con las extensión correspondiente. Internet no soporta cualquier clase de imagenes.

Tipos de imagenes soportadas en la web
Las clases de imagenes soportadas en la web son JPEG (o jpg que es la extensión), los .gif y los .png.

Cual conviene usar? y eso depende para que necesitamos las imágenes y lo explicare en lecciones mas avanzadas porque es un tema a evaluar algo extenso.

Bueno ahora que ya sebemos como insertar una imagen en una pagina lo que haremos es crear un pequeño articulo que contenga 2 o 3 fotos, para que podamos ver como va quedando. Si no tienes algunas imagenes puedes sacarlas de Google, en imagenes de google para probar. Utilizare este articulo para sacar el codigo HTML.

<!-- Archivo: "ejemplo-imagenes.html" -->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es" lang="es">
<head>
       <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<title>Aprendiendo a usar imagenes</title>
</head>
 
<body>
<img src="Images/imagen-1.jpg" alt="Barra de PageRank" class="imagen1"/>
 
<p>En el anterior artículo se explica <a href="http://www.blogdelaweb.com.ar/posicionamiento-web-que-es-el-pagerank/">que es el Pagerank</a>, en este veremos si es necesario tener miles de enlaces hacia su web para obtener un pagerank alto, y si realmente importa tener un pagerank alto.</p>
<p>El Pagerank se transmite de una web a otra por medio de los enlaces. Es decir si yo, por ejemplo, enlazo una web desde acá, google considerara este enlace como un boto hacia esa web. Por lo tanto todos los enlaces que se puedan conseguir hacia su web serán útiles a la hora de incrementar el pagerank, o en caso de ser un link farm simplemente no sumara ni restara.</p>
<p>Google admite que una página no puede controlar los links que apuntan hacia ella, pero sí que puede controlar los enlaces que esta página coloca hacia otras páginas. Por ello, links hacia una página no pueden perjudicarla, pero sí que enlaces que una página coloque hacia sitios penalizados, pueden ser perjudiciales para su PageRankTM.</p>
<p><strong>¿Todos los links valen por igual a la hora de transferir Pagerank?</strong></p>
<p>La respuesta es un completo NO. La trasferencia de pagerank depende de muchas cosas, las mas importantes son:</p>
 
<ul>
	<li>Si el pagerank de una pagina es alto la transferencia sera mas alta, es decir si la web es de calidad entonces la transferencia de pagerank valdrá mucho mas que si la web es de menor calidad.</li>
	<li>Que la web donde se incluye el link que va a tu web (se le llama: &#8220;Back-link&#8221; ) no posea muchísimos links.</li>
	<li>Que la web en donde tengan el backlink sea de la misma temática que tu web o no.</li>
</ul>
 
<img src="Images/imagen-2.jpg" alt="La imagen 2" class="imagen2"/>
 
<p>Algo importante para tener en cuenta es que el PageRank como método de evaluación de posicionamiento de una web ya no es tan relevante. Debido a que mucha gente se dedica solo a aumentar este valor numérico, en vez de mejorar la calidad de contenidos de su pagina.</p>
 
<p>Para tener un buen Pagerank no se necesita miles de links a sus paginas, sino que simplemente se necesita enlaces de calidad que vallan aumentando con el tiempo casi de forma natural y no volverse loco, tener paciencia.</p>
<p>El objetivo de el SEO es posicionar su web con palabras claves relevantes, el Pagerank se actualiza diariamente internamente en Google, pero el Pagerank externo que se ve en las distintas barras es actualizado 3 o 4 veces por año, por lo que es muy inexacto y no creo que sea extremadamente relevante a la hora del intercambio.</p>
 
<img src="Images/imagen-3.jpg" alt="La imagen 3" class="imagen3"/>
 
<p>La mejor forma de saber si el intercambio con otra web sera positiva para conseguir nuevas visitas es evaluar la web, pedirle si es posible ver la cantidad de visitas que recibe su pagina, saber si en la web se incluirá nuevos contenidos, si es un proyecto serio y buscar si la web esta posicionada en los motores de búsqueda con las palabras mas importantes. </p>
<p>Hay que tener en cuenta que una web que hoy tiene Pagerank 0 o 1 en la próxima actualización puede estar con uno 2 o 3 puntos arriba dependiendo de las cosas que hace el webmaster, por lo que ser lo suficientemente inteligente para realizar intercambios con webs que están subiendo y tomar los riesgos que esto conlleva puede ser muy beneficioso.</p>
</body>
 
</html>

Este es nuestro archivo HTML, Al menos acá y para colocar esta clase de imágenes adentro de texto, el código html que coloque es totalmente útil para mover las imágenes a los lugares que queremos por medio de CSS, y organizar los textos como queremos.

Añadí una nueva propiedad que es class, esto nos permite identificar a un grupo de elementos (no tiene que ser imágenes, es valido para textos, links o cualquier otro elemento html) para darle formato en el css.

Pueden probar la pagina web, teniendo en cuenta que para poder ver las imágenes, estas deben existir y debe ser colocadas en un directorio que este en la misma carpeta que nuestro ejemplo, y el directorio se llame “Images”. Las imágenes tienen que tener como nombre “imagen-1.jpg”, “imagen-2.jpg” e “imagen-3.jpg”. o pueden modificar el html con los nombres de imágenes que deseen.

Lo que iremos haciendo ahora es colocar entre las etiquetas y distintos css y veremos como se va cambiando la pagina y comenzaremos a ver la potencia de los utilizar correctamente el CSS.

Si no viste como se ve la pagina podes hacerlo ahora, si ya viste como queda la pagina agrega esto para ver como va cambiando:

 
<style>
 
img{ border: 1px solid silver; } /* Esto es una hoja de estilos y no tiene la misma forma que el html y esto es un comentario en css 
 
border:1px solid silver; significa que le coloque un borde solido a todas las imagenes y silver es un color. Aca recien termina el comentario =*/
 
img.imagen1{ margin: 10px 20px 20px 10px; float: left; } /* margin coloca un margen a la imagen, el primer valor es el valor del margen superior
																			el segundo es el margen derecho el tercero el de abajo y el cuarto el de la izquierda
																			es como un reloj. */ 
img.imagen2{ margin: 20px 10px 20px 20px; float: right; } /* El float: right hace que la imagen se coloque entre el texto a la derecha*/
img.imagen3{ margin: 10px 20px 20px 10px; float: left; } /* El float: left hace que la imagen se coloque entre el texto a la izquierda*/
 
</style>

Podes ver el ejemplo y ver como se acomoda la pagina, el html es el mismo. Ahora si uno varia por ejemplo los float:right y float:left en el css puede colocar la imagen a la izquierda o a la derecha del texto o de otros objetos y todo sin modificar el html, esto es básico pero da la idea de que con una misma estructura html puede mostrar la pagina de distintas maneras, ya que como veremos mas adelante los estilos de css se colocan en archivos diferentes al documento HTML, lo que permite tener los codigos centralizados en distintos archivos de forma que las modificaciones sean muchos mas fáciles, es decir si uno tiene un css que se utiliza para 500 paginas, con cambiar por ejemplo el color del link en el mismo css cambia automáticamente en las 500 paginas sin tener que tocar nada mas y eso creanme ahorra muuuucho tiempo.

Existen mas formas de insertar imágenes, por ejemplo en botoneras, pero eso es un poco mas complicado y lo veremos mas adelante, ya casi se podría decir que tienes los conocimientos básicos de todos los elementos importantes de una pagina web, y si tenes la duda de esto porque las webs no se ven bien, en la próxima lección veremos un par de elementos muy utiles para darle formas a las paginas y crearemos una pagina web ya con forma mas profesional y que sea mas bonita.

Si te estas preguntando ¿como?, es simple, haremos una mezcla de elementos y veremos como organizarlos, y veremos propiedades útiles de css que hagan falta.

Te espero pronto y como siempre digo ante cualquier duda o si ven un error de mi parte, no dudar en postearlo!

Siguiente Lección >>

>> Indice de Contenido <<

Share
Si este post te sirvio/gusto, Entonces considera Enviar un comentario o Suscribirte a nuestro feedRSS para recibir las actualizaciones de nuesdtor sitio.

¿Que Podes seguir leyendo?