Oi, hoje vamos falar de imagens.
Há muitas tags em HTML, e a maioria delas são bastante auto-explicativas.
Mas a tag de imagem é aquela em que realmente queremos explorá-la,
para garantir que você a esteja usando para o melhor propósito possível.
Então, neste ponto, você já ouviu falar de um monte de tags diferentes.
Mas imagens é uma onde você realmente precisa entender
quais são os diferentes atributos.
Há muitos tipos de arquivo diferentes que são suportados pelo HTML.
Os mais comuns são: JPEG, GIF e PNG, e você vai vê-los um pouco.
Há também SVG e BMP.
Existem opções adicionais.
O mais importante é que, independentemente do tipo de arquivo que você use,
você precisa incluir as diferentes extensões de arquivo.
Esse é o .jpg, o .gif, o .png.
A coisa adicional a entender é que quando alguém olha para a sua página,
cada imagem que você tem na sua página deve ser baixada, então o
tamanho pode realmente ser um fator.
Se você espera que a maioria das pessoas que visualizam sua página para estar olhando para ela a
partir de um telefone celular,
você pode querer pensar
em usar tamanhos de arquivo menores, porque cada imagem requer uma solicitação HTTP para ser carregada no navegador.
Então, quando pensamos em tamanhos de imagem, a maioria das pessoas pensa
, apenas, no visual como é grande na tela.
Mas na ciência da computação, falamos muito mais sobre tamanhos de pixels.
Por padrão,
o navegador abrirá sua imagem no mesmo tamanho que foi salva.
E é muito, muito raro que esse tamanho fosse o ideal.
Você provavelmente todos foram a um site onde você chegou a ele e
a imagem era muito pequena e você não é capaz de torná-lo maior.
Ou talvez,
o que eu acho ainda mais irritante, é quando a imagem ocupa a tela inteira e
você é forçado a rolar ao redor tentando ver a coisa toda.
Então eu vou mostrar a vocês duas soluções rápidas para alterar o tamanho da imagem.
A primeira é alterar o arquivo real, e a segunda é usar os
atributos width e height para a tag image.
Agora, se você vai usar e editor para alterar seu arquivo,
o que você precisa entender é que os editores mudam essas imagens permanentemente.
Isso só funciona no que chamo de arquivos locais.
Você só pode alterar as imagens que você tem no computador.
Se você estiver tentando usar uma imagem que encontrou em outro lugar na Web e
estiver vinculando a ela, não será possível alterar o tamanho permanentemente.
Portanto, se você estiver usando um Mac,
há um software integrado chamado Visualização que você pode usar para alterar o tamanho.
E se você estiver usando o Windows, há também um programa integrado chamado Paint.
Qualquer uma delas dá-lhe a opção de redimensionar as suas imagens.
No entanto, apenas como uma nota lateral, nenhum deles é a melhor
escolha se você realmente quiser entrar em gráficos de imagem diferentes.
O que a maioria de nós tende a fazer é usar atributos.
Agora, uma das coisas sobre as quais eu falo e
todos falam é a importância de manter o estilo e o conteúdo separados.
E eu realmente tento encorajar as pessoas a não colocar nenhum tipo de
atributos de estilo em seu código.
No entanto, a tag de imagem tende a ser uma exceção,
pois inclui um atributo width e height.
Então vamos em frente e caminhar, e
eu vou te mostrar uma foto do site quando terminarmos.
A primeira opção seria apenas usar o tamanho padrão da imagem.
Eu tenho minha tag de imagem, e eu tenho meus dois atributos necessários.
Fonte, onde você pode encontrar a imagem, eo texto alternativo.
A próxima opção seria usar a largura em pixels, então,
neste caso, adicionei o atributo chamado width e o codifiquei.
Isso é o que você chama quando você dá um tamanho que você quer que ele sempre seja.
E eu codifiquei para 500 pixels.
Você pode notar que eu só defini a largura e eu não defini a altura.
Isso está tudo bem.
O navegador irá descobrir automaticamente o quanto ele deve ajustar a altura para
que permaneça proporcional à largura.
A próxima opção é usar largura e altura.
Faça isso se quiser ter certeza de que sua foto se encaixa dentro de
uma caixa de tamanho exato.
Isso é muito bom para o tamanho, mas nem
sempre parece do jeito que você espera, e veremos isso em apenas um segundo.
A última opção, que pode ser sua melhor opção, é usar porcentagens.
Neste caso, se você notar, eu tenho largura = 50%.
O que isso significa é, pegue o tamanho da imagem, e
reduza-a em 50%.
Agora, à medida que avançamos na programação e CSS, você entenderá que é 50%
do que deveria ser, não significa necessariamente o tamanho original da imagem.
Depende se você estiver dentro de um contêiner.
Então aqui eu tive cada uma das opções, o padrão, a largura, a largura e
a altura, e a porcentagem.
Então vamos em frente e dar uma olhada no que isso parece.
Então o que você pode ver aqui são as quatro opções diferentes que eu tinha para
exibir minha imagem.
Na parte superior, tenho o tamanho de imagem padrão.
Aconteceu de ser o quão grande era a foto quando a tirei.
Um tamanho abaixo, e
você pode ver que foi aqui que eu codifiquei a largura da imagem.
Eu defini a largura para 500 pixels.
Minha casa ainda parece perfeitamente agradável, e tudo é proporcional.
A terceira opção é a imagem distorcida.
Este é o lugar onde eu codifiquei tanto a altura quanto a largura, e
eu realmente não pensei muito em como eles iriam agir proporcionalmente.
Então, fazendo isso, você pode ver que é meio esmagado, e
não a imagem mais bonita.
Este último é um que eu defini proporcionalmente, e
você pode ver que é cerca de metade do tamanho da janela do navegador.
O que eu quero que você olhe agora é o que acontece quando eu redimensionar a janela.
Então, enquanto eu vou aqui, você pode ver que as três primeiras imagens permanecem
exatamente do mesmo tamanho, mas a parte inferior realmente vai crescer ou encolher.
E isso é o mesmo se eu torná-lo menor e recarregar a página.
Então, pensar em coisas diferentes ao longo dessa linha é como você deseja que sua página seja exibida
quando as pessoas podem estar olhando para uma tela grande ou em uma tela móvel.
É algo em que você quer pensar.
A última coisa que quero apontar para você, que vou falar em
um segundo, é essa pequena foto que infelizmente,
é muito difícil de ver e não há uma boa maneira de eu explodi-la.
Mas eu quero falar com vocês sobre adicionar imagens na barra de título.
Então, se você quiser colocar um favicon no título da sua página web,
é um pouco diferente do que usar uma imagem normal.
Em vez disso, este código deve ir para a seção principal do seu código, não para o corpo.
O que você faz é que você vai realmente entrar e
você vai incluir um link dizendo que é um tipo de ícone de link.
Estamos usando uma imagem PNG.
E então você coloca o link para a imagem em si.
Apenas como uma nota lateral, você não pode usar JPEGs ou GIFs para logotipos.
Ele precisa ser uma imagem de ícone especial ou um .png.
Finalmente, vamos voltar a falar sobre texto alternativo,
o atributo que você deseja adicionar a todas as suas imagens.
Qual é o propósito disso, e por que é algo que precisamos?
Bem, o que ele faz é fornecer uma alternativa textual para conteúdo não-texto.
Então, sempre que você tiver uma imagem, você quer ter certeza de
que as pessoas que não podem ver a imagem ainda podem entender o conteúdo por trás dela.
Por isso, pode ser lido por leitores de tela.
Às vezes, ele é exibido no lugar de imagens, portanto, se o arquivo quebrar,
você ainda pode ver uma pequena nota dizendo o que eles deveriam estar vendo.
Finalmente, ele também fornece significado semântico para motores de busca.
Então, se você colocar um texto alternativo realmente bom em sua página,
ele vai ajudar os motores de busca a perceber qual é o conteúdo da sua página.
Então, como criamos um bom texto alternativo?
Há realmente quatro coisas que você quer procurar logo de cara.
Você quer ser extremamente preciso.
Você quer ser sucinta.
Não queremos ser redundantes.
E não queremos incluir títulos como imagem de ou gráfico de.
Então, o primeiro, seja preciso.
É bastante auto-explicativo.
Coloque apenas coisas que definam especificamente a imagem que você está olhando.
Sejam sucintos, isso significa que não continuem e continuem. A
sério, é suposto ser uma ideia rápida do que se trata a imagem.
Quando falamos sobre não ser redundante, o que estamos dizendo é,
não inclua texto alt que já está no conteúdo da página.
Se você tiver a imagem, e em um parágrafo abaixo dela,
você descreve-a em detalhes, não coloque o mesmo conteúdo no texto alternativo.
E, finalmente, o de não incluir imagem de,
gráfico de, que realmente apenas volta a ser apenas sucinto.
Ocasionalmente, é bom deixar o texto alt vazio.
Então, se você tem imagens que são apenas decorativas, logotipos, coisas ao longo dessa linha,
você pode ir em frente e apenas colocar alt igual e, em seguida, as aspas duplas.
Mas é muito importante que você não pule o atributo alt todos juntos.
O problema de seguir esse caminho, é que você realmente não deixa as pessoas saberem se
você estava ou não pensando sobre a acessibilidade.
Eles não sabem se o texto ALT está faltando porque não é informativo ou
porque você simplesmente esqueceu de colocá-lo.
Certo, então vamos rever algumas coisas que sabemos sobre imagens.
Primeiro, as extensões de arquivo são incrivelmente importantes.
Você precisa se certificar de que eles correspondem ao formato do arquivo.
O nome do arquivo para sua imagem é algo que você vai querer
manter muito curto e descritivo para que você possa evitar o uso de erros de digitação.
E, finalmente, os caminhos de arquivo, ou onde toda essa coisa longa
que você coloca na fonte onde você tem imagens/imagens/ramais.
Você quer ter certeza que você está soletrando corretamente também.
Se você conseguir fazer essas três coisas, será mais fácil
para você usar imagens com sucesso.
E por agora, vamos em frente e apenas estilizar a altura e a
largura diretamente no próprio código HTML.
Apesar de eu falar frequentemente sobre separar conteúdo do estilo, é
prática muito comum ir em frente e incorporar esses dois quando você está fazendo imagens.