Como inserir imagem com html ?
Como inserir imagem com o css?
Como inserir imagem com HTML:
Primeiramente escolhemos a imagem e colocamos na pasta que esta o arquivo html,
no meu caso a imagem se chama teste.jpg para podermos inserir a com o html utilizaremos a tag <img> e seu atributo "src" que indicara o local e o nome da imagem.
...
< img src="teste.jpg">
...
Pronto só precisamos deste minusculo código para poder inserir uma imagem
caso a imagem esteja dentro de uma pasta você só precisara adicionar o nome da pasta e barra antes do nome do arquivo.
...
<img src="imagens/teste.jpg"/>
...
Como inserir imagem com CSS:
Para inserir imagens através do css primeiramente você terá que lincar sua pagina com o arquivo css utilizando a tag <link>, caso já esteja lincado ignore esta etapa :
...
<link rel="stylesheet" type="text/css" href="nomedoarquivo.css">
...
Apos ter lincado você terá que criar uma <div> para poder conter sua imagem então primeiro criamos a <div> e depois definimos uma classe para não a ver conflito nas outras divs.
Arquivo html:
...
<link rel="stylesheet" type="text/css" href="nomedoarquivo.css">
...
<div class="imagem1"></div>
...
Apos ter criado sua <div> abra seu arquivo CSS e digite :
Arquivo CSS:
...
.imagem1{
background-image: url(imagem/teste.jpg); /* Insere a imagem na div */
width: 170px; /* Define a largura da imagem */
height: 120px ; /*Define a altura da imagem */
width: 170px; /* Define a largura da imagem */
height: 120px ; /*Define a altura da imagem */
}
...
Agora é só rodar seu código e ver o resultado .
Bom saber:
para poder chamar a class que criamos no arquivo css antes de colocar o nome da class colocamos ponto "."para podermos identificar que oque queremos chamar é uma class de uma determinada tag
lembre-se de colocar ponto para evitar transtornos.
