Temos conversado sobre coelhos
todo esse tempo, descrevendo-os com parágrafos e listas,
mas poderíamos colocar uma foto na nossa página
e mostrar como é um coelho de verdade.
Para inserir uma foto na página, usamos a tag img,
que, como pode adivinhar, significa imagem.
se apenas digitarmos img, não vemos nada.
Por que não?
Não falamos para o navegador qual imagem mostrar.
Há milhões de imagens na internet,
e não queremos escolher uma imagem aleatória.
porque pode ser algo grosseiro que não gostamos,
e também não será o que queremos que seja.
Temos que dizer a URL da imagem.
A URL é o que aparece no topo das
barras de endereço dos navegadores,
e é isso que é, um endereço.
É uma forma de encontrar algum recurso na web,
e significa que só podemos inserir uma imagem
se ela já estiver na internet em algum lugar.
Não podemos apenas inserir imagens que estão só no nosso computador.
Há várias formas de encontrar imagens na internet,
mas estamos deixando mais fácil para você aqui
fornecendo um selecionador de imagem em uma coleção de fotos.
Para ele aparecer, precisamos adicionar
um atributo para nossa tag de imagem.
Um atributo é um pedaço de informação
adicional sobre a tag, e este é
o primeiro atributo que vimos.
Para dizer ao navegador a URL, vamos
adicionar um atributo com o nome "source"
e adicionaremos um espaço e digitaremos "src".
Significa "source", mas é muito importante
que digite "src" porque o navegador
irá ignorá-lo se digitarmos errado.
Agora, preciso colocar um sinal de igual
para dizer ao navegador qual é o valor do atributo,
e agora adicionarei aspas, e o editor vai
fechar as aspas automaticamente,
valores de atributos devem sempre estar entre aspas.
Normalmente, agora é quando começaríamos a digitar nossa URL,
mas aqui na Khan Academy, é quando
nosso selecionador de imagem vai aparecer.
Nós vamos escolher uma imagem, e quero uma imagem de um coelho,
então eu clico na aba "animais" e seleciono
o coelho adorável e clico 'OK'.
Viu que tem uma URL entre aspas agora,
e como a URL começa com 'http'?
É assim que sabemos que está apontando
para alguma imagem na internet.
Veja! Tem um coelhinho na minha página!
Mas e se o servidor que hospeda a imagem estivesse falhando, e o
navegador não pudesse carregar a imagem?
Como o visitante saberia qual era minha imagem incrível?
Eles não verão nada e se perguntarão pelo resto
das vidas o que perderam.
É por isso que as img tags têm outro atributo: alt
que usamos pra dizer aos navegadores
qual é o texto alternativo para uma imagem.
Para adicionar outro atributo só colocamos um espaço
depois das aspas finais do último,
depois digitamos alt=" "
e dentro das aspas, o texto será
alguma descrição útil da imagem
como "Coelho com orelhas caídas no celeiro."
Isso também ajuda pessoas que navegam pelas páginas
mas não podem enxergar, como um deficiente visual.
Eles usam um aplicativo chamado leitor de tela
que vai ler a página para eles,
descrevendo cada tag que vê.
Quando ele vê uma tag de imagem, lê o texto do alt
já que deficientes visuais não podem ver imagens,
então sempre use um texto no alt
para que o mundo todo possa ter uma boa experiência na sua página.
De volta para imagem que podemos ver.
Está um pouco grande.
Vamos redimensioná-la.
Podemos fazer isso com mais atributos,
com largura (width) ou altura (height).
Digamos, largura (width) é igual a 100. (width="100")
Agora ela tem 100 pixels de largura.
Está pequena demais.
Vamos colocar o cursor aqui dentro
para aumentar a imagem.
Parece bem melhor.
Vamos tentar adicionar a altura (height).
Vou dizer, altura (height) é igual a 50.
Achatei meu coelhinho, pobrezinho!
É por isso que geralmente você deve especificar apenas
largura ou altura, mas não ambos
porque você pode usar as dimensões erradas
e achatar seus coelhinhos, então vou apenas deixar o navegador
calcular para decidir quais deveriam ser as outras medidas.
Vou apagar o atributo height.
Agora que você sabe usar imagens, comece a pensar em
combinar todas as tags que tem na caixa de ferramentas,
listas com imagens e parágrafos, os 10 animais mais doidos.
Só não coloque muitas imagens na sua página
porque a pessoa acessando sua página
vai ter que carregar todas elas,
mas você ainda pode se divertir muito.
Legendado por [Pablo Vieira] Revisado por [Fernando dos Reis]