Nesta postagem vamos aprender a inserir imagens em sua página html.
Na aula anterior vimos as tag’s de formatação:
Abra o gedit (ou um editor de texto de sua preferência) e abra também o arquivo da aula anterior:
Para inserir uma imagem vamos utilizar a tag <img>, que possui uma particularidade, ela não possui fechamento. Essas tag’s são conhecidas como tag’s vazias. Ela possui os seguintes atributos:
src: É onde identificamos o caminho onde a imagem se encontra no computador, terminado com o nome da imagem seguida de sua extensão.
width e height: Onde você ajusta a largura e a altura da imagem respectivamente.
border: Define a espessura da borda da imagem.
alt: informação que aparece caso a imagem por algum motivo não carregar.
Criei uma pasta na área de trabalho chamada midias e adicionei uma imagem a ela para colocarmos na página. Vamos ver como fica a estrutura no gedit :
Note que em src, antes do nome e extensão da imagem eu adicionei midias/ pois se trata da pasta onde a imagem se encontra. A imagem será quadrada pois tem o mesmo valor para os atributos width e height. Vamos ver com ficou no navegador:
Veja que a imagem apareceu corretamente. Vou tirar a imagem da pasta e colocar na área de trabalho e atualizar a página:
Note que a imagem não carregou, apenas a borda, pois o caminho especificado em src está incorreto. Entrou em ação o atributo alt com a informação sobre a imagem. Teste com suas imagens.
Veja agora o vídeo do tutorial:
Nenhum comentário:
Postar um comentário