MS - Tutorial - Imagem em html

Como inserir imagens em html

Tutorial desenvolvido por: Rena |www - @|

1º. Uppe a imagem em um servidor de imagens como por exemplo: Imagesack, ImageHost, Photobucket.

Na imagem abaixo, eu utilizei o ImageHost como servidor.

Feito isso, vamos ao segundo passo.

2º. Copie(CTRL + C) o endereço da imagem.

OBS: dependendo do servidor que você utilizar para hospedar a imagem, você pode encontrar o endereço dela na barra de endereços.

3º. Agora vem a parte do código, e aqui eu explicarei algumas tags de html que podem fazer bastante diferença na forma de ver sua imagem em um post por exemplo. Digite o código abaixo no local onde você quer que a imagem apareça

<img src="X" border="0" align="Y">

Substitua os elementos X, 0 e Y.
X = endereço da imagem, esse que você copiou no item anterior.
0 = valor da borda, você pode colar qualquer valor numérico. quanto mais alto o valor, mais grossa será sua borda. e zero significa que a imagem não terá uma borda.
Y = alinhamento em que a imagem apareçara. para essa tag os valores de Y são: left ou right

O código deve ficar assim:

<img src="http://g.imagehost.org/0595/avatarchrnoc_pia.jpg" border="0" align="left">

Ao públicar meu post o código que parecia um monstrinho, mostrou esse resulato.

Fácil não? Agora, se você quer públicar uma imagem como essa:

É só modificar o código e incluir a tag: <center>código da imagem</center> Desse jeito

<center><img src="X" border="0"></center>

Não é tão difícil né? Na verdade é bem fácil colocar a imagem diretamente em html, mas vale lembrar que se sua imagem for de um tamanho muito grande ela ficará do mesmo tamanho no post, e isso pode atrapalhar a leitura, então aconselho a reduzir a imagem em algum editor de imagens e deixá-la do tamanho que você quer que ela apareça, assim a página não demora para carregar e nem ficará ruim para ler.

OBS: existem outras tags que podem ser atribuidas ao código de imagem abaixo colocarei algumas explicando sua função:

width="..." --> Essa tag é útilizada para redimencionar a imagem, são aceitos apenas valores numéricos. Dessa forma, a largura da sua imagem diminuirá ou aumentará (depende do número que você colocar. Ex: width="100px"

height="..." --> da mesma forma que o Width essa tag redimencionará sua imagem, mas ela mudará a altura da sua imagem. Ex: height="100px"

alt="..." --> útilizamos o alt, quando queremos que ao pousar o mouse sobre a imagem apareça alguma frase. Ex: alt="Esse é meu avatar"

hspace="..." -->
Usada para deixar uma margem(espaço) horizontal entre a imagem e o texto. Ex: hspace="2px"
vspace="..." --> Como a hspace porém a margem(espaço) é vertical. Só valores numéricos. Ex: hvspace="2px"

Sobrou alguma dúvida? Entre em contato pelo formulário da área gráfica ou por comentários.