Pesquisar na Comunidade
Mostrando resultados para as tags ''inserindo e manipulando imagens''.
Atualmente, o índice de pesquisa está sendo processado. Os resultados atuais podem não estar completos.
Encontrado 1 registro
-
html Inserindo e manipulando imagens em uma página HTML
TheScription2016 postou um tópico no fórum em Desenvolvimento Web
INSERINDO IMAGENS A tag utilizada para se inserir imagens é a tag <img />, que pode ser aberta e fechada no mesmo bloco da tag. Também precisamos informar o endereço da imagem ao navegador então para isso utilizaremos o comando src. Exemplo: <img src="link_da_imagem"/> É importante observarmos que o link da imagem deve sempre terminar com o nome da imagem, ponto (.) a extensão do tipo da imagem. E se a imagem está em uma pasta no mesmo diretório do documento HTML, devemos colocar o nome da pasta seguido de barra (/), antes do nome da imagem. Exemplo: <img src="minha_pasta/minha_imagem.png"/> MANIPULANDO IMAGENS Para manipular imagens a nossa preferência, dispomos de diversos comandos, os quais explicarei logo abaixo. 1- Comandos de redimensionamento Os comandos de redimensionamento de imagem servem para controlar o tamanho da imagem. São eles: width (largura), height (altura). Os valores mais usados para estes comandos são valores em píxel, que já expliquei em postagens anteriores. Devemos tomar muito cuidado na hora de usar estes comandos, pois se aplicarmos um tamanho muito distante ao tamanho real da imagem, teremos uma enorme perda de qualidade da mesma. Exemplo: <img width="300px" height="300px" src="imagens/minha_imagem.png"/> 2- Comando de alinhamento O comando para alinhamento é o align, que tem como seus principais valores: left - alinha a imagem a esquerda; right - alinha a imagem a direita; top - alinha a imagem com o topo do elemento mais alto de sua linha; bottom - alinha a imagem com a base mais baixa dos outros elementos de sua linha; Exemplo: <img align="right" src="imagens/minha_imagem.png"/> Além do comando align podemos utilizar a tag <center> para alinhar uma imagem. A utilização desta tag eu já havia explicado em postagens anteriores. 3- Comandos de ajuste de margens vspace - define o tamanho da margem nas bordas superior e inferior da imagem. hspace - define o tamanho da margem nas bordas esquerda e direita da imagem. Estes dois comandos acima trabalham com valores em píxel. Exemplo <img vspace="35px" hspace="15px" src="imagens/minha_imagem.png"/> 4- Outros comandos alt - insere um texto alternativo. Caso ocorra uma falha no carregamento desta imagem, o texto definido nesta tag será exibido. Isso é muito útil para imagens que são linkadas, cuja as mesmas explicarei em outra postagem. Exemplo: <img alt="Texto alternativo aqui!" src="imagens/minha_imagem.png"/> title - insere um texto que será exibido somente se o usuário mantiver o mouse alguns segundos sobre a imagem. Exemplo: <img title="Está é minha imagem(WebCheats)" src="imagens/minha_imagem.png"/> border - insere uma borda a imagem. Este comando trabalha também com valores em píxel. Exemplo: <img border="15px" src="imagens/minha_imagem.png"/> Veja abaixo como ficou o nosso código de exemplo: <!DOCTYPE html>[/i] [i] <html> <head> <title>Inserindo e manipulando imagens em uma página HTML</title> </head> <body> <img src="imagens/minha_imagem.png" alt="Minha imagem!" title="Imagem que aprendi a inserir em um documento HTML" vspace="10px" hspace="15px" border="10px" align="right"/> </body> </html>
