Buscar

lunes, 9 de marzo de 2015

poner imagenes juntas con html

Hola aquí viene otro tutorial que alguien ha pedido para poner imagenes junta, sobre todo para valoración ejemplo de reseñas de libros, yo esto que os voy a explicar lo tenia antes para hacer un menu personalizado con imagenes en vez del menu normal, así que si queréis también podéis hacerlo para este tutoría voy a elegir dos ejemplos:




  • Primero deberéis elegir las imagenes, y que sean de un tamaño adecuado a lo que queréis hacer y sobre todo que sean iguales. subirlas a cualquier web de las que hay de subir  imagenes para conseguir url o hacer como hago yo en mi blog de prueba subo las foto ahí porque se que mientras este el blog o quiera yo estarán las fotos, a parte me viene bien para cuando me haga falta otra vez que es a veces demasiado.
  • yo he elegido estas imagenes que tenia en el ordenador voy ha hacer una posible valoración vosotros podéis cambiarla.


  • Aquí lo veis ahora ya se que :
      url unicornio: http://1.bp.blogspot.com/-IjXJfYFOyM8/VPyvU2BOuXI/AAAAAAAAAb8/zZpnhjF6szM/s1600/CastleCreator_Cheerilee.png.png

     url pingüino: http://1.bp.blogspot.com/-JeLxUAtq5ck/VPyvUkCLczI/AAAAAAAAAb4/jVq9oDDBd90/s1600/tux.png




  • Ahora tenéis que decidir si queréis que las imagenes se enlacen a otra parte sería así, y sobre todo si queréis que este centrado  os recomiendo hacerlo en un bloc de notas, y hacerlo allí y luego hacerlo en el blog.


<center>
<a href="url de enlace"><img alt="#" src="url de imagen"/>
<a href="url de enlace"><img alt="#" src="url de imagen"/>
<a href="url de enlace"><img alt="#" src="url de imagen"/>
<center>

En el primer ejemplo quedaría así

<center>
<a href="http://asociacionblogguer.blogspot.com.es/"><img alt"#" src="http://1.bp.blogspot.com/-IjXJfYFOyM8/VPyvU2BOuXI/AAAAAAAAAb8/zZpnhjF6szM/s1600/CastleCreator_Cheerilee.png.png"/>
<a href=""http://asociacionblogguer.blogspot.com.es/"><img alt"#" src="http://1.bp.blogspot.com/-IjXJfYFOyM8/VPyvU2BOuXI/AAAAAAAAAb8/zZpnhjF6szM/s1600/CastleCreator_Cheerilee.png.png"/>
<a href=""http://asociacionblogguer.blogspot.com.es/"><img alt"#" src="http://1.bp.blogspot.com/-IjXJfYFOyM8/VPyvU2BOuXI/AAAAAAAAAb8/zZpnhjF6szM/s1600/CastleCreator_Cheerilee.png.png"/>
<center>


  • Y se vería así: 


  • Si no quereis que se vea centrado solo teneis que quitar la etiqueta <center>



  •   Bueno ahora os haré como quedaría con el pingüino:


<center>
<a href="http://asociacionblogguer.blogspot.com.es/"><img alt"#" src="http://2.bp.blogspot.com/-ZgckvAqvJjI/VP24Maue6kI/AAAAAAAAAc0/hcTnpHscF0A/s1600/tux.png"/>
<center>
<center>
<a href="http://asociacionblogguer.blogspot.com.es/"><img alt"#" src="http://2.bp.blogspot.com/-ZgckvAqvJjI/VP24Maue6kI/AAAAAAAAAc0/hcTnpHscF0A/s1600/tux.png"/>
<a href=""http://asociacionblogguer.blogspot.com.es/"><img alt"#" src="http://2.bp.blogspot.com/-ZgckvAqvJjI/VP24Maue6kI/AAAAAAAAAc0/hcTnpHscF0A/s1600/tux.png"/>
<center>
<center>
<a href="http://asociacionblogguer.blogspot.com.es/"><img alt"#" src="http://2.bp.blogspot.com/-ZgckvAqvJjI/VP24Maue6kI/AAAAAAAAAc0/hcTnpHscF0A/s1600/tux.png"/>
<a href=""http://asociacionblogguer.blogspot.com.es/"><img alt"#" src="http://2.bp.blogspot.com/-ZgckvAqvJjI/VP24Maue6kI/AAAAAAAAAc0/hcTnpHscF0A/s1600/tux.png"/>
<a href=""http://asociacionblogguer.blogspot.com.es/"><img alt"#" src="http://2.bp.blogspot.com/-ZgckvAqvJjI/VP24Maue6kI/AAAAAAAAAc0/hcTnpHscF0A/s1600/tux.png"/>
<center>
<center>
<a href="http://asociacionblogguer.blogspot.com.es/"><img alt"#" src="http://2.bp.blogspot.com/-ZgckvAqvJjI/VP24Maue6kI/AAAAAAAAAc0/hcTnpHscF0A/s1600/tux.png"/>
<a href=""http://asociacionblogguer.blogspot.com.es/"><img alt"#" src="http://2.bp.blogspot.com/-ZgckvAqvJjI/VP24Maue6kI/AAAAAAAAAc0/hcTnpHscF0A/s1600/tux.png"/>
<a href=""http://asociacionblogguer.blogspot.com.es/"><img alt"#" src="http://2.bp.blogspot.com/-ZgckvAqvJjI/VP24Maue6kI/AAAAAAAAAc0/hcTnpHscF0A/s1600/tux.png"/>
<a href=""http://asociacionblogguer.blogspot.com.es/"><img alt"#" src="http://2.bp.blogspot.com/-ZgckvAqvJjI/VP24Maue6kI/AAAAAAAAAc0/hcTnpHscF0A/s1600/tux.png"/>
<center>
  • Otro ejemplo de este tipo, es ponerlo en un gadget y poner las redes sociales como tengo en  mi blog así: 


FacebookGoogle+TwitterRSS


<center><div id="social"><br /><a href="https://www.facebook.com/AnescrisBlog2" target="_blank"><img alt="Facebook" src="https://lh3.googleusercontent.com/-_4ujPAYWbU8/UeRfaCHu-iI/AAAAAAAAC7M/wjY638xdElI/s64-no/thumbs_097124-3d-glossy-blue-orb-icon-social-media-logos-facebook-logo.png" title="Siguenos en Facebook" / /></a><a href="https://plus.google.com/u/0/112156668487684589310" target="_blank"><img alt="Google+" src="https://lh3.googleusercontent.com/-5C7SzkGX9tc/UeRfaESu1yI/AAAAAAAAC7Q/4eCcybcy8w8/s64-no/thumbs_097137-3d-glossy-blue-orb-icon-social-media-logos-google-g-logo.png" title="Siguenos en Google Plus" / /></a><a href="URL TWITTER" target="_blank"><img alt="Twitter" src="https://lh4.googleusercontent.com/-fOt5yY2ZkCU/UeRfalwBeyI/AAAAAAAAC7Y/JrrKrPMeU7I/s64-no/thumbs_097196-3d-glossy-blue-orb-icon-social-media-logos-twitter.png" title="https://twitter.com/anescris" / /></a><a href="URL RSS FEED" target="_blank"><img alt="RSS" src="https://lh6.googleusercontent.com/-c_XseTDLW0o/UeRfaGKtGXI/AAAAAAAAC7I/d7xquGdcnB8/s64-no/thumbs_097172-3d-glossy-blue-orb-icon-social-media-logos-rss-basic.png" title="http://anescris.blogspot.com.es/rss.xml" / /></a></div><br /><center></center></center>

     Aunque otro día os dire como se hace de otra forma un pelín más complicado, pero que a mi me gusta mas que de esta forma.
     

No hay comentarios:

Gracias por pasarte, comentar y unirte.
Nuestro mail es asociacion.bloguer@gmail.com