A-) Como colocar uma imagem como plano de fundo do Site ?
B-) Como colocar uma imagem no Site ?
Obs.: Ao final iremos mostrar um exemplo da aula de hoje.
Primeiramente monte a estrutura HTML
Após a estrutura estar pronta, vamos partir pras seguintes perguntas:
A-) Como colocar uma imagem como plano de fundo do Site ?
Para colocar uma imagem como plano de fundo, a primeira coisa que não pode esquecer é fazer o download da sua imagem para a mesma pasta onde esta o seu arquivo HTML.
Neste exemplo,irei usar o tema " Planeta " para elaborar esta aula.
Obs.: No momento em que fizer o download da sua imagem, não se esqueça de nome-a-la.
Imagem retirada do site -> www.folhaestado.com.br
Após baixar sua imagem, vá ao seu arquivo HTML e, no comando " BODY " e acrescente conforme o exemplo abaixo:
Quando, junto ao comando BODY, escrevemos o comando "BACKGROUND" estamos atribuindo algo ao plano de fundo, no corpo do site. O sinal de igual ( = ) e as aspas ( " ) define o que estamos atribuindo ao plano de fundo.
Porém, exite algumas regras quando se trata do nome da sua imagem e o formato, tais como:
1- Ao escrever o nome do comando BACKGROUND, certifique-se de que seja o mesmo que estra descrito na sua imagem.
2- Quando for colocar o formato, para que não haja erros, aperte com o botão direito na imagem e clique na opção "Propriedades" ( ou configurações, dependendo do seu sistema ).
3- Caso você escreva o comando ( tudo certo ) e mesmo assim não chegue no resultado esperado, apague o comando e escreva-o novamente.
Veja o exemplo:
Antes
Depois
Obs.;Caso não consiga ou tenha alguma duvida
deixe seu comentário ou sugestão na opção ao lado.
B-) Como colocar uma imagem no Site ?
Para colocar uma imagem no site, basta ter a imagem escolhida na mesma pasta onde se encontra o arquivo HTML.
Ainda com o tema "Planeta", caso esteja seguindo passo a passo dessa postagem, após ter feito o download da sua imagem, acrescente o comando de acordo com o exemplo abaixo:
Dentro do comando BODY ( no corpo do site ) escrevemos o comando " IMG SRC " usado para atribuir uma imagem no corpo do site. Nessa caso, o sinal de igual ( = ) e as aspas duplas ( " ) servirão para reconhecer o nome da imagem e o seu formato. Caso não os coloquem o HTML não ira reconhecer a imagem e o resultado será um grandessíssimo NADA.
Quando, simplesmente acrescentamos esse comando o resultado fica assim:
Caso não tenha percebido, a imagem ficou muito maior do que o esperado.
Quando acontecer algo assim ou antes mesmo que aconteça juntamente com o comando IMG SRC acrescente os comandos de acordo com a ilustração abaixo:
Os comandos WIDTH ( Largura ) e HEIGTH ( Altura ) irão definir o tamanho da sua imagem de acordo com o layout do seu site.
Obs.: A unica forma de definir um tamanho exato para a
sua imagem é TESTANDO. Vá colocando e mudando os
tamanhos ate ficar no exato ponto que lhe agrade.
Após dimensionar a sua imagem, como citado acima, o resultado é esse:
Quando estamos mexendo com imagens no HTML, a um comando que, quando bem utilizado, tem um resultado bem legal. Veja o exemplo abaixo:
O comando CENTER deixa a imagem ou texto no centro da pagina. Como no exemplo abaixo:
Obs.;Caso não consiga ou tenha alguma duvida
deixe seu comentário ou sugestão na opção ao lado.
Quando acrescentamos os dois comandos na mesmo documento, temos o seguinte resultado:
Perceba que ambas as imagens ficaram nítidas, com a resolução ( qualidade muito alta ). Para que isso não aconteça, para que uma imagem não comece a competir com a outra. Baixe uma imagem com uma qualidade inferior ou, no momento que for baixar, não espere a imagem carregar completamente. Assim o seu site terá um visual bem bacana.