Página principal  |  Contacto  

Correo electrónico:

Contraseña:

Registrarse ahora!

¿Has olvidado tu contraseña?

Andalucia te Abraza
 
Novedades
  Únete ahora
  Panel de mensajes 
  Galería de imágenes 
 Archivos y documentos 
 Encuestas y Test 
  Lista de Participantes
 Andalucia 8 Provincias 
 
 
  Herramientas
 
Tutoriales: Cómo subir imágenes y editarlas usando HTML
Elegir otro panel de mensajes
Tema anterior  Tema siguiente
Respuesta  Mensaje 1 de 2 en el tema 
De: Cordobesa  (Mensaje original) Enviado: 18/07/2009 18:19
Cómo subir imágenes y editarlas usando HTML
Lo primero que debo explicar es que el hosting de imágenes (en particular) es usn servicio que diversas webs como Imageshack, Flickr, Photobucket, etc brindan en el que una imagen (de tu pc u otra página de internet) es subida a sus servidores brindando la ruta consiguiente.

La insercion de imagenes no resulta complejo, en general la sintaxis usada es la siguiente:

url_de_la_imagen">

Donde url_de_la_imagen es la url de la imagen que se encuentra en algun servidor. Una imagen puede ser subida a un servidor si se cuenta con un servicio de webhosting (gratis o pagado), en particular les recomiendo estos sitios:

IMAGES HACK (vinculo de enlace: http://imageshack.us)
IMAGE SHOCK (vinculo de enlace: http://imageshock.eu)

Alli examinan el archivo desde otra url o de su pc yobtienen un LINK, ese es el LINK de la imagen (url_de_la_imagen), por ejemplo si queremos hostear una foto o imagen seguiremos estos pasos:

¿COMO HOSTEAR UNA IMAGEN?

1.- Nos dirijimos a la web de image hosting (en nuestra caso imageshack): 2.- Click en Examinar y/o damos la ruta del archivo en nuestra pc
3.- Damos click en host it!


4.- Esperamos unos segundos a que suba la imagen al servidor (el tiempo de espera depende del servidor, tamaño de imagen, formato de imagen)
5.- Obtenemos la url_de_la_imagen, seleccionamos, copiamos (CTRL+C) y listo. Este servidor nos dara muchas opciones de enlaces, como los aqui mostrados:

Citar:
-Thumbnail for Websites
-Thumbnail for forums (1)
-Thumbnail for forums (2)
-Link back to ImageShack or use the banners and buttons.
-Hotlink for forums (1)
-Hotlink for forums (2)
-Hotlink for Websites
-Show image to friends
-Direct link to image
Nosotros usaremos este ultimo, asi:


Con eso ya tenemos la url de la imagen, pegamos esa url_de_la_imagen en nuestra barra de direcciones del navegador (ENTER) y nos direccionara a la imagen.

Muy bien, ahora para insertar la imagen en nuestro blog bastaría ir a la pestaña de la entrada del blog denominada "Edicion de HTML"


Y copiar el codigo:

url_de_la_imagen">

Por cierto, esto originará una imagen del tamaño original alineada a la derecha del texto y en la misma linea, asi que pueden centrarla:

url_de_la_imagen">

Ahora si quieren escribir a un lado de la imagen y obtener un texto algo asi (ejemplo):


Deben agregarla otros atributos aparte del src, los cuales son:


Atributo Valores Funcion
alt texto cualquiera Texto mostrado al poner el cursor sobre la imagen
align left, right Permite alinear la imagen horizontalmente
valign top, middle, bottom Permite alinear la imagen verticalmente
hspace 1,2,3,4,... Distancia horizontal de la imagen al texto (en pixeles)
vspace 1,2,3,4,... Distancia vertical de la imagen al texto (en pixeles)
border 1,2,3,4,... Dibuja un borde (default:negro, enlace:azul) alrededor de la imagen




El codigo que usa la imagen del ejemplo es este:

Citar:
Saludos. ;D

En estos posts puedes aprender mas:

http://www.forobloggers.com/index.ph....html#msg12080
http://www.forobloggers.com/index.ph....html#msg12178
__________________
Tecnologia - Dota 6.60 - MSN 2009 - msn plus 2009


Primer  Anterior  2 a 2 de 2  Siguiente   Último  
Respuesta  Mensaje 2 de 2 en el tema 
De: Cordobesa Enviado: 18/07/2009 18:52
 
La inserción de la imagenes no resulta complejo, en general la
sintaxis usada es la siguiente:..
<img src="url_de_la_imagen">
 
Muy bien, ahora para insertar la imagen en nuestro blog bastaría ir a la pestaña de la
entrada del blog denominada "Edicion de HTML"

 

Y copiar el codigo:

"url_de_la_imagen">

Por cierto, esto originará una imagen del tamaño original alineada a la derecha del texto
y en la misma linea, asi que pueden centrarla:....
 
< center > < img src="url_de_la_imagen"> < / center>

Ahora si quieren escribir a un lado de la imagen y obtener un texto algo asi (ejemplo):....
 

Deben agregarla otros atributos aparte del src, los cuales son:


Atributo Valores Funcion
alt texto cualquiera Texto mostrado al poner el cursor sobre la imagen
align left, right Permite alinear la imagen horizontalmente
valign top, middle, bottom Permite alinear la imagen verticalmente
hspace 1,2,3,4,... Distancia horizontal de la imagen al texto (en pixeles)
vspace 1,2,3,4,... Distancia vertical de la imagen al texto (en pixeles)
border 1,2,3,4,... Dibuja un borde (default:negro, enlace:azul) alrededor de la imagen

El codigo que usa la imagen del ejemplo es este:

Citar:....
< img src = "url_de_la_imagen" align = "right" hspace="5" vspace ="5" >
 
 
son las letras que faltan, para que lo comprendamos mejor..
besi ...Lola


 
©2024 - Gabitos - Todos los derechos reservados