11 July 2012

Mini Tutoriales HTML para blog

Modificar el tamaño de una imagen sin necesidad de re-editarla, util para banners y botones.

1. tenemos que tener la imagen guardada en algun servidor, ya sea: blogger, photobucket, tinypic etc.

yaoijocker
http://i.picasion.com/pic40/8bfd0db15389c8031d64021232d028e2.gif

2. arriba se muestra la imagen en tamaño real, y abajo el link de esta, lo que necesitamos para colocarla en nuestro blog es convertirla a codigo html, no se asusten, no tiene mayor ciencia. solo necesitamos el siguiente codigo.


< img border="0"  src="
http://i.picasion.com/pic40/8bfd0db15389c8031d64021232d028e2.gif"  />

en nuestro codigo, sustituiremos lo que esta en verde por el link de nuesta imagen. asi ya es una propiedad html.

3. para cambiar el tamaño de esta imagen sin tener que reeditarla, cortarla y demas lo unico que haremos rea agregar unas propiedades mas.

< img border="0" high="50" src="url de su imagen" width="80" />
tenemos entonces:
high [altura]
width [ancho]
aquí les muestro el resultado con diferentes tamaños
yaoijocker 
  yaoijocker


Agregar un enlace a una imagen

para que al hacer click sobre la imagen esta nos redireccione a una pagina lo único que tenemos que agregar a el código anterior es lo que esta marcado en rojo
< a href="pagina a la que los llevara">< img  border="0" high="50" src="url de su imagen" width="80" /></a>
La propiedad de color verde es la pagina a la que deseamos que nos envié.


Textarea para que se facilite el copiar el código de tu banner.

para facilitar el hecho de compartir un banner, podemos utilizar la herramienta "textarea" esta nos proporciona el código se un objeto, un texto de saludo y mas, como este que pueden ver en mi barra derecha


afiliame 
 
el codigo es el siguiente


textarea rows="3" cols="15" onclick="this.select();"> aqui su mensaje, codigo etc,< /textarea>

bien los codigos en azul
rows="3" : son los "renglones" con los que contara la textarea
cols="15" : es la cantidad de letras por renglón
estas propiedades pueden ser modificadas a su gusto sin miedo
Lo que se muestra en color verde es lo que dirá la textarea, pueden escribir cuando deseen 


si tienen dudas o sugerencias, no duden en dejarlas como comentario 




    Post a Comment