HTML: imagens

HTML: imagens

(Elivelto Ebermam)



Imagens são um recurso muito importante para um site, tanto para fins informativos quanto ilustrativos (aparência). Para inseri-las em uma página web utilizamos a tag <img>. Ao contrário de outras tags, ela não tem fechamento.

Atributos da tag <img>

A tag <img> tem alguns atributos importantes. É importante usá-los corretamente para que a imagem apareça na página.
O atributo mais importante da tag <img> é o src. Esse atributo serve pra especificar onde está localizada a imagem que queremos colocar na página web. Há dois tipos de valores que podem ser passados:
·         URL absoluta: caminho completo de uma imagem que está na internet. Por exemplo: https://upload.wikimedia.org/wikipedia/commons/9/9c/CDC_straw.jpg
·         URL relativa: caminho da imagem que está no mesmo local que o documento html, podendo estar na mesma pasta ou em pasta diferente. Por exemplo: imagem.jpg , imagens/imagem.jpg .
Como iremos utilizar um editor online, temos que usar a URL absoluta. Dessa forma temos o seguinte trecho de código para inserir uma imagem:

  <img src=”https://upload.wikimedia.org/wikipedia/commons/9/9c/CDC_straw.jpg”>

Lembrando que o valor do atributo tem que ficar em aspas, por isso a URL é escrita entre aspas. Na imagem abaixo podemos ver o código de uma página web usando o editor do site w3 schools [1] https://www.w3schools.com/html/tryit.asp?filename=tryhtml_default .





Outro atributo importante é o alt. Esse atributo mostra um texto alternativo, caso a imagem não seja carregada na página. O valor do atributo alt, é o texto que queremos que apareça na tela, caso a situação acima aconteça. Veja o exemplo abaixo:

  <img src=”https://upload.wikimedia.org/wikipedia/commons/9/9c/CDC_straw.jpg” alt=”Imagem de morangos”>

Normalmente o texto não aparecerá, pois espera-se que a imagem carregue na página. Vamos então causar um erro proposital para que a imagem não carregue na página. Vamos adicionar o número zero no final da URL para invalidá-la. Veja o resultado:


Como visto, a imagem não apareceu. No lugar dela apareceu o texto que definimos.
Outro atributo que podemos utilizar é o title. Esse atributo define um texto que aparece quando passamos o mouse em cima da imagem. Segue o exemplo:

  <img src=”https://upload.wikimedia.org/wikipedia/commons/9/9c/CDC_straw.jpg” alt=”Imagem de morangos” title=”Morangos”>

Temos outros dois atributos: width e height. O atributo width define a largura da imagem e atributo height define a altura da imagem. As medidas são dadas por padrão em pixels. Segue exemplo de como utilizar os dois atributos:

  <img src=”https://upload.wikimedia.org/wikipedia/commons/9/9c/CDC_straw.jpg” alt=”Imagem de morangos” title=”Morangos” width=”300” height=”200”>

Dessa forma estabelecemos que a imagem na tela vai ter 300 pixels de largura e 200 pixels de altura.

Referências


[1] HTML Tutorial. W3Schools,  2020. Disponível em <https://www.w3schools.com/html/>. Acesso em: 7 de mai. de 2020.

Comentários

Postar um comentário

Postagens mais visitadas deste blog

CSS: margin, padding e border

Imagem
  CSS: margin, padding e border (Elivelto Ebermam)   Na confecção do layout de um site, três elementos são muito importantes: margens, espaçamentos e bordas. As margens (propriedade margin) é espaçamento do elemento em relação ao exterior. A propriedade padding define o espaçamento interno em relação ao conteúdo do elemento. Já a propriedade border define as bordas do elemento. Veja: Note que os espaçamentos ocorrem em quatro direções, e em CSS tem as seguintes nomenclaturas: top (parte superior), bottom (parte inferior), left (lado esquerdo) e right (lado direito). Propriedade margin A propriedade margin é responsável por definir as margens do elemento. Há quatro margens: margin-top, margin-bottom, margin-left e margin-right. Veja na imagem abaixo: Há duas formas de inserir margens usando o CSS: usar a propriedade margin diretamente ou usar suas propriedades derivadas. Para começar, vamos ver um código de ...
Leia mais

HTML: Formulários - caixas de texto

Imagem
HTML: introdução a formulários e caixa de texto (Elivelto Ebermam) Formulários HTML são um dos principais pontos de interação entre um usuário e um web site ou aplicativo. Eles permitem que os usuários enviem dados para o web site. Na maior parte do tempo, os dados são enviados para o servidor da web, mas a página da web também pode interceptar para usá-los por conta própria [1]. A tag <form> é usada para iniciar um formulário. Ela é o recipiente do formulário, ou seja, toda vez que for criar um formulário em HTML, é necessário utilizar essa tag. A tag possui abertura e fechamento, veja: <form> </form> Entre meio a abertura e o fechamento da tag devem ser inseridos os campos do formulário, os quais possuem tags específicas para inseri-los.   Atributos da tag <form> A tag form possui alguns atributos: Atributo action Normalmente os dados dos campos de um formulário são enviados para outra página web, a qual proc...
Leia mais

CSS: Introdução

Imagem
  CSS: introdução (Elivelto Ebermam)   A linguagem de marcação de hipertextos (HTML) é usada na construção da estrutura básica das páginas Web. Já as folhas de estilo em cascata (do inglês: cascading style sheets, abreviado por CSS) são um mecanismo para adicionar estilo (como fontes, cores, espaçamentos) ao documento web [1]. Popularmente falando, a função do CSS é deixar as páginas web bonitas. A sintaxe do CSS é diferente do HTML, ou seja, a forma de escrever é um pouco diferente.   Código CSS No CSS escrevemos regras, e essas regras dizem como que os elementos HTML serão mostrados na página. Veja um exemplo: Agora vamos detalhar um pouco mais: O primeiro elemento de uma regra CSS é o seletor. O seletor é o elemento que queremos aplicar a regra. No exemplo o nome do elemento é p, e p é usado para parágrafo lá no HTML (tag <p> lembra?). Assim a regra será aplicado aos parágrafos da página w...
Leia mais