Curso de HTML Completo: Aula 08 - Tudo Sobre Imagens

E aí é muito bem pessoal agora que nós vimos é que a questão dos links nosso site já tá ficando Claro Ainda bem feio mas já tá ficando com uma cara um pouco mais de site a gente conseguindo navegar entre páginas agora a gente vai precisar aprender uma tag muito importante aqui no desenvolvimento desenvolvimento de qualquer tipo de site que são as imagens né O que que é um site sem imagens basicamente todo site ele é mais visual do que qualquer outra coisa né É até mais importante que os textos os links a gente usa muitas imagens nos nossos sites eu nós vamos aprender hoje como fazer e como usar a tag de imagem existe várias coisas bem legais relacionadas a essa tag que nós vamos aprender nessa aula certo pessoal então abaixo desse último HR que a gente fez a última aula eu não vou apagar esses links eu vou deixar eles assim a gente vai acrescentar uma tag de imagem a tag de imagem ela é diferente das outras tags ela não tem fechamento bom então você começa assim é a abertura da tag e m Jenna abertura da tag e MG aí nós vamos colocar um atributo chamado src igual e "duplas aqui a gente coloca né então você tá dizendo que você quer uma matéria do tipo imagem aqui esse src quer dizer o caminho que você quer colocar essa imagem aonde você vai encontrar ela que a gente vai ter que passar parecido com aqui o que a gente fazia na garra F do link certo aqui a gente tem que colocar o caminho da Imagem e aí eu fecho a tag só isso basicamente que a gente faz a gente vai passar mais alguns atributos aqui mas primeiro a gente vai entender o funcionamento da tag a tag MG ela não tem fechamento Então você não vai fazer assim há por exemplo barra e m ou até fechou um baile aqui ó/MG assim ó se eu fizesse isso estaria incorreta ali errado a tag MG uma das poucas tags de html que não né tipo de fechamento certo você só da abertura de tag ng-src para passar o caminho aqui da imagem Ok então para a gente poder fazer aqui a nossa aula a gente vai ter que pegar uma imagem e eu vou usar uma imagem do Google mesmo aqui no Google imagens da vou abrir uma nova guia kimono Google imagens e vou digitar aqui carro deixa o maximizar esse aqui para ficar mais fácil da gente enxergar é se eu clicasse nesta imagem clique aqui para abrir uma nova guia vocês vão observar apareceu o caminho absoluto dela um caminho gigantão Se eu der um com trouxe aqui ó nessa nesse caminho de cilinho e voltar lá no meu vs code e colocar aqui ó colar É como se eu tivesse pego essa imagem desse caminho aqui na internet é um caminho absoluto tô pegando essa imagem que tá no site na internet e colocando aqui no meu código certo deixa eu restaurar isso daqui e voltar lá para o nossa página e vou dar um contra o Oeste para vocês ver já salvei o show dar um contraste aqui salvei e a imagem do carro apareceu aqui para nós tá vendo ó ela apareceu aqui ó só que ela é bem grande o pessoal se eu vim aqui para o lado é arrastar ela parece assim completamente certo então eu prefiro Eu precisaria informar que uma altura um tamanho né que seja adequado ao tamanho do meu documento aqui isso a gente pode fazer através de duas dois atributos que se chamam o Edith assim o Edith o w edth o Edith e aí você passa o tamanho por exemplo 300 pixels está a unidade de medidas que a gente usa para medir esse tamanhos de imagens é pixels Imagina assim na vida real a gente tem o centímetros gente tem os metros os quilômetros né para determinar distâncias aqui a nossa tela ela é medida em pixels tá então é a o tamanho da tela por exemplo do seu computador geralmente é 1366 por 768 pixels ou se for full HD 1920 por 1080 pixels é a dimensão da tela ela é medida em pixels Então vou colocar que 300 pixels e vou dar um salvar o que que acontece e eu informei que o tamanho aqui é de 300 pixels por isso ele ficou desse tamanho Edith quer dizer em inglês largura tá e eu tenho também um outro tributo que se chama Rei assim ó rede h e g h t só um detalhe Tweety s t h e o reite é HT tá que quer dizer altura Então você fala que o hate aqui ele também é 300 pixels olha só que que vai acontecer ele ficou um quadrado porque ele tá 300 por 300 vezes ele deu uma distorcida na minha imagem certo mas a gente colocou a imagem aqui então se eu tirar o leite e deixar só o Elite ele vai fazer a altura automática para a imagem ficar ajustada aqui na minha tela certo então esse aqui é um exemplo de você colocar uma imagem com um caminho absoluto quer dizer você pegar o caminho da imagem de um site perder um site aleatório aqui Oi e aí URL lá em cima colei aqui no meu código ele já vai pegar essa imagem só que o que que acontece pessoal quando meu site ele tá sendo renderizado aqui no meu navegador essa imagem que ele tá pegando aqui tá vindo desse caminho que eu específica aqui é só urls caminho absoluto certo se por um acaso o dono desse site aqui que eu não tenho controle né porque é um site de que tem outro servidor Tirar essa imagem do ar por algum motivo deletar esse arquivo alguma coisa assim essa imagem vai aparecer quebrada para o meu usuário por exemplo eu vou adicionar aqui uma letra A no final só para ter um caminho que não existe certo vou dar um controle S Olha o que que acontece ele vai aparecer esse ícone aqui ó quer imagem está quebrada tá vendo Então não é muito legal você pegar imagens assim de outros sites porque isso às vezes pesa na hora de carregar a sua página Porque ele vai ter que fazer uma requisição para um servidor a sua página e também você não tem controle sobre essas imagens né inclusive talvez essas imagens também tem direitos autorais isso pode ser um problema para você certo então eu nunca recomendo você utilizar imagens e sites de terceiros mais usar suas próprias imagens dentro do seu próprio projeto tem ainda um atributo aqui pessoal que eu esqueci de mencionar para vocês que é muito importante tá por a gente trabalha com imagens que é o out assim ó out o que que é esse atributo Alt é para você beber escrever um texto alternativo é alternative text significa isso daqui é utilizado pelos navegadores e programas de síntese de voz para dizer para pessoas que têm deficiência visual O que que tá na imagem então por exemplo uma pessoa que tá usando o site é deficiente visual ele não vai tá vendo que tá na tela mas se você colocar dentro desse atributo Alt por exemplo carro azul no asfalto com céu azul no fundo quando eu coloco esse out aqui a pessoa que tiver vendo esse site e tiver usando um esse sintetizador de voz ele vai saber do que se trata image to a pessoa mesmo com deficiência visual vai poder tirar proveito dele certo isso aqui também essa propriedade out serve para os mecanismos de busca entender e são as imagens estão no seu site então se você descrever de forma correta as imagens isso pode ajudar a indexar no Google imagens e também no ranqueamento do Google então um atributo bem importante de você está utilizando o atributo alt certo principalmente para fazer inclusão na de pessoas com deficiência visual agora como que a gente faz então para colocar imagens pessoal que estejam a partir do nosso próprio projeto imagens sejam salvo no nosso projeto não que esteja pegando uma fonte exterior um caminho relativo né que seja dentro da nossa pastinha aqui na quando eu dou um encontro B da nossa pastinha aqui do nosso projeto como que a gente faz isso bem Primeiro de tudo é importante você saber que você não pode chegar aqui no Google Imagens pegar qualquer imagem né ah eu quero pegar essa imagem aqui e vou usar aqui na minha página não porque porque essas imagens até ser um maximizar aqui ó olha que que menciona aqui no próprio Google e as imagens podem ter direitos autorais Você pode ter um problema de direitos autorais Se você usar imagens de pessoas que não autorizaram você usar né porque ela tá aparecendo aqui no Google imagens que você pode clicar e pegar a imagem que você quiser então existem alguns sites que são bancos de imagens gratuitas que eu vou mostrar aqui para vocês um deles é o pexels você escreve assim pexels as melhores fotos gratuitas pexels se escreve dessa forma como você tá vendo peixes e LS sexos centro nesse site do pectus todas as imagens que tem aqui são gratuitas PSOL tem imagens vídeos também é um banco gratuito Esse é uma opção o pectus você também pode aqui no Google escrever se o banco de imagens grátis Oi e aí ele já vai te dar algumas soluções por exemplo pizza bem é outra opção tem que saber também de imagens gratuitas a free pick também o outro banco de imagens gratuitas certo aqui você também pode encontrar você pode vendo vários que tem aqui de opções deixa eu ver se tem mais alguma aqui aparece aqui o pack seus né que a gente já tinha mostrado então você pode pesquisar mas essas aqui já estão suficiente o pectus ou Fixa bem e a free pick eu sou mais que suficiente então só por exemplo digitar que carro e dá um entre todas as imagens estão aparecendo aqui pessoal são imagens gratuitas tá eu não vou ter nenhum tipo de problema de direito autoral no meu site seu usar uma dessas imagens Ok e aqui em cima você ainda pode fazer ó qual o tipo de orientação que você quer horizontal vertical quadrado eu quero me mais que seja quadrada o clica aqui em quadrado ele já vai mostrar imagens que sejam só quadrados aqui tem tamanho eu quero tamanho pequeno precisa ser uma imagem grande aí ele vai mostrar para mim imagens de tamanho menor certo beleza eu gostei desse carrinho aqui ó e vou clicar aqui para fazer download aqui eu tenho símbolo do download aqui ou posso clicar na imagem e aqui em cima eu vou ter opção baixe grátis vou clicar aqui para baixar e ele já fez o download aqui nessa imagem Eu acho que o meu Google Chrome não está configurado para eu escolher onde que essas imagens elas vão ser salvas deixou até ver aqui ó para mostrar para vocês caso de vocês também já esteja fazendo o download direto né você poder vir aqui e mostrar na pasta achar que a imagem você poderia recortar ela dando um control-x e jogando ela lá no projeto Mas isso não é muito interessante não é muito prático então você pode vir aqui nas configurações eu vou vir aqui nas configurações do Google Chrome e eu vou procurar o lugar aqui onde você pode determinar que você quer que os downloads vão para uma pasta eu posso vir aqui em avançado downloads e aqui ó perguntar onde salvar cada arquivo antes de fazer o download eu vou deixar essa opção aqui ativada ter só e tem essa opção aqui é ativada daí Olha só que que vai acontecer deixa eu fechar esse aqui vou clicar aqui em baixar grátis novamente agora ele vai me pedir aonde que eu quero salvar isso fica bem mais prático né eu vou ir no meus e: vou vir aqui em sites aula HTML e aqui dentro dessa minha pasta do projeto aula HTML eu vou criar uma nova pasta para a gente organizar que o nosso projeto chamada e MG certo basta em MG pede imagem você poderia chamar de imagem o nome que você quiser mais o padrão que a gente normalmente usa e MG igual a pele certo dentro dessa pasta MG eu vou colocar aqui ó carro certo o nome dessa imagem ele é do tipo J perg na jpg dá um time tipo muito comum de imagem na internet um formato muito comum vou clicar aqui para salvar em baixo aqui a minha imagem certo já tá lá dentro do meu projeto agora pessoal deixou só restaurar essa aqui Deixa aqui porque nem voltar aqui para o nosso projeto agora o que que eu vou fazer eu vou referenciar aqui essa imagem que a gente acabou de baixar Lembrando que você a gente abrir aqui com controlei ela vai estar dentro da pasta e MG E aí vai ter carro. Jpg aqui certo então eu vou colocar aqui o caminho ó vou apagar esse que a gente tinha e vou colocar o caminho da pasta primeira pasta e MG caminho relativo em relação à que o nosso arquivo index ponta HTML a gente tem a pasta e MG e aqui carro. Jpg e vou dar um salvar salvei beleza essa imagem que tá aparecendo aqui agora ele tá sendo puxado do nosso projeto da nossa pasta imagens a imagem está no nosso projeto local certo então eu não estou requisitando essa imagem de um servidor externo eu não tô precisando da internet para mostrar essa e ela já está dentro do meu projeto então eu não vou ter perigo de talvez essa imagem quebrar Tem algum problema porque ela já está dentro do meu projeto entendeu é sempre importante você é dar atenção a esse ponto aí de as imagens estarem dentro do seu projeto outra coisa pessoal quando a gente trabalha com imagens deixa eu entrar aqui na pasta do projeto sites aula HTML e vou vir aqui na minha pasta e MG você vê que aqui está escrito sua carro aqui também tá escrito só index sobre né pessoal a gente não tá vendo tipo de extensão que é a nossa imagem o tipo de imagem que a gente está trabalhando porque existem vários tipos de imagens já vai entender isso um pouco agora é para você resolver isso você vem aqui em cima aí exibir Oi e aí Marca essa opção aqui ó esse tensões de nomes de arquivos quando você marcar essa opção ele vai mostrar aqui a ponta HTML né desses arquivos que a gente tá trabalhando e na imagem o carro.

Jpg porque você tem que sempre indicar aqui ó Qual é o tipo de formato da imagem certo você precisa indicar e se formar por exemplo se eu pegasse aqui eu tirasse esse ponto jpg só deixar esse carro e salvar se ó quebrou a imagem está dando até o texto alternativo o carro azul nas fotos com o céu azul no fundo certo eu preciso dar Qual o formato da imagem para ela funcionar então ponto jpg apareceu mas para poder saber que apontou jpg a posso olhar aqui por dentro do projeto Mas também eu tenho ativar essa opção do exibir extensões de nomes de arquivos para ficar fácil de poder saber a qual o tipo do arquivo que eu tô trabalhando Ok quando a gente passa o mouse encima da imagem olha só ele mostra para nós aqui algumas informações O primeiro é dimensões 2160 por 2160 essa imagem tem um padrão de tamanho bem grande imagina que a tela do notebook full HD é 1920 por 1080 pixels então eu tenho quase que o dobro do tamanho da tela esta imagem uma imagem de alta qualidade tamanho muito grande mais do que H dela é mais que full HD certo era muito grande não necessariamente a gente precisa imagens tão grandes assim ó Porque pensa a gente tem uma imagem de tamanho original 2160 por 2160 sempre aqui no meu código eu tô especificando que eu quero que a largura seja de 300 pixels ela não precisa ser tão grande assim esse é o tamanho que eu vou precisar então ele tá pegando esses 2162 2162 indo para 300 pixels é o tamanho da imagem que eu vou precisar isso por consequência pessoal quanto maior o tamanho da imagem em dia o maior vai ser o tamanho em peso Observe aqui que nós temos 301 KB esse aqui é o peso dela seria assim na vida real a gente tem assim a gente quando sobe numa balança numa farmácia a gente tem o peso em quilos né na na internet nos computadores a gente trabalha com bytes kilobytes megabytes gigabytes terabytes que nem a gente vê aí de hdz tudo mais então tamanho ao peso que isso é arquivo ele vai ter kilobytes é uma unidade de medida baixa tá é antes do megamat mas ainda assim ó 300 kilobytes é um tamanho bastante grande a para um tamanho grande por uma imagem esse tamanho ele vai fazer diferença na hora de carregar o seu site porque ele vai tá renderizando que o teu site quando chegar na parte da imagem ele vai lá buscar imagina paz e dependendo do tamanho da imagem do Peso dela aqui ele vai demorar mais ou menos tempo para carregar sua página então quanto mais leve fora aqui a sua imagem melhor vai ser para o navegador carregar ela vai ser mais rápido para ele carregar então tem uma dica quando você trabalha com imagens no seu site para que elas Fiquem sempre levinhos e que você possa trabalhar com essas imagens do da melhor forma possível quer como você vem aqui no teu Google vai lá no Google e escreve aqui ó com pressa e aí o formato da imagem que você tá trabalhando esse carro que a gente pegou ele é do tipo jpg certo então eu vou dar compresso jpg que eu quero comprimir um arquivo jpg já aparece o primeiro site aqui eu compresso jpg imagens online ele vai pedir para você subir o arquivo você vem aqui em pe load files vai lá na pasta do seu projeto e todo vai ser: sites aula HTML imagem vou pegar que o carro e subir ele tá subindo 302 kilobytes aí ele vai cumprir Miró e ele reduziu e 23 por cento tamanho dessa imagem vou clicar aqui para fazer download e posso inclusive da duplo clique aqui em cima para eu diminuir substituir esse arquivo que eu já tinha vou substituir por essa nova que tem o tamanho reduzido vou dar um sim ele já reduziu e 23 por cento tamanho dessa imagem agora que que eu posso fazer eu volto aqui no Google vou para o segundo site aqui que eu time jpg e vou fazer o mesmo processo mas já com essa imagem que já foi comprimido uma vez eu vou clicar aqui abrir agora ela foi para 236 KB ele diminuiu ó para 119 cabelo e já diminuiu mais Quarenta e nove porcento tamanho dessa imagem eu vou vir aqui em download e vou dar duplo clique aqui de novo para substituir Quer substituir Sync eu já diminuiu bastante a minha imagem certo eu poderia ficar repetindo esse processo até um ponto onde você não tem mais ganha aqui nessa essas páginas chega uma hora que vai dar zero por cento quer dizer que ele não conseguiu mais diminuir o tamanho da imagem e aí você se for lá na pasta vai ver que o tamanho da imagem ficou isso atualizar aqui ó atualizar o tamanho da imagem ficou 117 KB Esse é um recurso que a gente tem tem um outro recurso que a gente pode utilizar que é um site que eu sempre uso esse chama easy-resize a Easy resize se escreve assim ó presta atenção easy-resize quer você redimensionar de maneira fácil diminuir fotos e imagens online qual que é o legal desse site do easy-resize é que você tem a opção aqui de determinar Qual é o tamanho máximo que você quer para imagem em peso Olha que legal e também o tamanho máximo e redimensionamento aqui em tamanho do arquivo ele redimensionar para você então eu poderia colocar aqui ó que o tamanho máximo que eu quero é 50 cabides quero bem pequenininho 50 cabides e que o tamanho da imagem redimensionamento máximo dela vai ser 320 pixels o tamanho máximo dela vai ser esse tamanho que ele vai redimensionar para 320 pixels por quê Porque lá no vs code ó repare que eu tô dando que a minha largura de 300 pixels eu não vou precisar de 2. 160 certo então aqui eu posso determinar esses tamanhos de redimensionamento aqui e vou clicar aqui para escolher imagem do carro e pronto clica aqui em baixar eu vou substituir que eu já tinha a e agora vamos lá na pasta vou dar aqui uma atualizar só para ele mostrar olha só a nossa imagem agora tem 240 por 240 e 35 cabaites ficou bem levinha mesmo certo ele ficou esse tamanho porque o tamanho máximo que eu dei foi de 320 certo mais para ficar até 50 acabares que foi quanto eu falei que ele podia ter Ele percebeu que precisaria deixar nessa dimensão de 240 por 240 então se eu volto aqui ó o show restaurar aqui voltar lá para o nosso projeto Na verdade eu vou fechar essas páginas todas aqui o seu don't control S aqui ó Na verdade ele já tá puxando essa imagem aqui que que é a nossa imagem lá do carro porque a gente não mudou o nome dela né mas você vê que ele continua com 300 por 300 se eu tirasse aqui esse de ti agora como ele tem 240 240 ele ia ficar o tamanho acima dele eu quero 240/240 e você vê que praticamente não mudou nada em sentido visual a qualidade diminuir um pouquinho eu que tô vendo aqui na tela em tempo real ao vivo dá para ver uma leve diferença ficou um pouquinho mais baixa qualidade mas nada que Tiraria aí a qualidade dessa imagem aqui para o usuário que está acessando o site certo então é muito importante pessoal quando você tiver trabalhando com imagens você se preocupar com esse a questão do tamanho da imagem nela essa imagem do tamanho mais reduzido possível que você puder usando o e reside ou esse site de comprimir o tamanho da imagem Ok beleza isso diz respeito à imagem do tipo jpg Mas esse não é o único fôrma a imagem que a gente trabalha quando a gente usa imagens outro formato de imagem que a gente usa muito aqui na web é o formato do tipo png o formato tipo png ele é um formato de imagem que tenha o fundo transparente formato png tem um fundo transparente então eu vou dar um BR aqui para pular uma linha e eu vou colocar uma outra imagem mas para colocar essa outra imagem eu vou criar uma imagem agora eu não vou pegar essa imagem pronta de lugar nenhum eu vou criar uma imagem como que eu posso criar uma imagem existe um site chamado photopia foto Pé ponto com e esse site do foto Pé ela é como se fosse um photoshop mas direto no navegador pessoal é muito legal Photoshop genérico posso fechar esse aqui olha só ele já abre para mim um photoshop genérico direto aqui no navegador deixa eu puxar só essa questão do download e aqui eu posso trabalhar com imagens se você nunca usou um editor de imagens como Photoshop ou algo assim eu recomendo você dá até uma olhada lá no meu canal da genial cursos vou deixar aqui nos links complementares os links úteis tá o mini cursinho que eu tenho lá de Photoshop no meu no meu canal do YouTube e pode te ajudar a entender um pouco como funciona aqui o Photoshop certo mas eu vou fazer o seguinte eu vou criar um novo projeto e eu vou dar o tamanho aqui de largura de 300 pixels por 300 pixels que a gente abriu com o tamanho de imagem razoável que eu quero eu vou deixar o fundo a transparente Olha só fundo transparente e vou dar um a criar aqui ele criou uma imagem tá vendo que tá com esses é como se fosse uns quadriculadinho os assim isso aqui não tá aparecendo na imagem você quer dizer que isso aqui tá transparente isso não vai aparecer se eu pegar qualquer coisa aqui ó e fizer por exemplo assim ó a vamos fazer vou fazer aqui um fazer uma nova camada vou pegar aqui um pincel mesmo vou fazer uma coisa bem tosca tá pessoal mas só para vocês entenderem vou pegar aqui o amarelo e vou fazer o seguinte vou fazer uma estrelinha aqui ó fiz uma estrela vou pintar beleza fiz uma estrelinha coisa mais linda essa minha estrelinha e ela não ficou muito centralizada né vou pegar ela aqui eu vou colocar lá no centro certo e vou salvar essa imagem vou vir aqui em arquivo e vou dar um exportar como o formato que eu escolhi para ter fundo transparente é esse aqui ó png Esse é um tipo de formato onde o fundo sempre fica transparente certo se eu clico aqui em png ó ele vai dar que deu 3. 4 cabelo bem lá vinha mesmo essa nossa imagem vou clicar aqui em salvar e aonde que eu vou salvar eu vou salvar ela aqui a dentro do Nossa pasta e MG mesmo eu vou chamar ela aqui ó de estrela.

P e não que eu tô fazendo é criar uma imagem Estou criando não tô pegando ela de nenhum lugar eu tô fazendo essa imagem certo vou clicar aqui em salvar isso você pode fazer para fazer montagens e lições caso você queira criar sua própria imagem né Agora eu vou voltar aqui no meu vs code e aqui o show só voltar aqui para o meu projeto restaurar ele aqui deixar no canto eu vou colocar aqui uma tag MG src pasta e MG estrela. Png que é o nome da imagem que eu acabei de fazer e vou dar um salvar olha lá apareceu a minha imagem aqui certo é interessante pessoal que o fundo é transparente então a única coisa que tá aparecendo essa parte amarela aqui que eu acabei de colocar por exemplo se eu pegasse aqui ó no meu Bari você que a gente ainda não viu né que ia colocar um estilo tá estilo CSS aqui vou só para vocês entenderem como fundo tá transparente mesmo colocar que a cor vai ser vermelha do meu site de fundo Olha só repare que o tamanho da imagem total é 300 por 300 pixels mas ele só tá mostrando o miolo da imagem porque ela é transparente certo se essa imagem não fosse do tipo png que é transparente ou se ela fosse por exemplo jpg se eu voltar aqui ó minha a exportar como salvar ela como jpg ou salvar ela aqui ou salvar ó e vou salvar ela como estrela. Jpg certo salvei como jpg perceba que o fundo aqui tá transparente mas salvei ela como jpg se eu for lá no meu projeto Deixa eu voltar aqui E se eu voltar aqui no meu projeto e trocar aqui que o formato png e agora o formato jpg e salvar Olha que que acontece ele não tem o fundo transparente ele sempre precisa ter um fundo no geral ele coloca fundo branco se você tiver um site Branco tranquilo mas eu tenho site tiver uma coisinha de fundo aí já estraga o layout tá entendendo então a gente pode deixar png E aí o fundo vai ficar transparente Então a gente tem formato jpg que esse formato quando você precisa uma imagem completa vamos dizer assim e quando você quiser uma imagem com fundo transparente né Você pode usar esse formato que o formato tipo png vou tirar esse fundo aqui vermelho né porque não tem nada a ver só para vocês entender esse ponto aqui eu voltei ao normal e tem um outro formato de imagem que ele é muito comum que é o formato de imagem animada é o formato do tipo gif tá pessoal formato do tipo gif deixa maximizar aqui eu vou voltar lá no Google e vou colocar aqui no vou vir aqui no Google Imagens e eu vou colocar senhor gif é um GIF a uma imagem animada então eu vou colocar assim ó por exemplo é urso gif tá ó ó se eu clicar aqui olha só como é que é uma imagem animada essa aqui foi boa né é uma imagem que se mexe ó essa daqui ó tá vendo uma imagenzinha que ela se mexe essa aqui tá menos mal criada do que aquele outro não deixa eu ver esse aqui ó imagens que se mexem vamos ver se a primeira aqui a beleza ó e esse aqui para mim tá até bonitinho né vou clicar com ele para abrir uma nova guia e vou pegar aqui o link dele tá o clica aqui contra você para pegar o link dele e vou colocar aqui moto a tag vou dar um BR aqui peguei ng-src e vou colocar e esse meu gif aí olha só que que acontece em show restaurar aqui só para vocês ver hora é uma imagenzinha animada Olha que legal antigamente a internet era repleta de isso aqui tá pessoal é o site estudo usavam só esse tipo de formato de GIF mas dá para fazer muita coisa tá legal com esse tipo de formato você pode usar o Photoshop outros tipos de programa que cria esse tipo de animação aqui mas aí já é necessário você tem um certo conhecimento em animação tá pessoal só para você usar imagens normalmente a gente usa imagens como ícones né porque a gente às vezes causar um ícone para alguma coisa né Então como que a gente faz a gente pode ir num site chamado flat ai com esse site é o melhor site para você usar ícone está PSOL e cursos gratuitos e é no geral ele vai pedir para você fazer login para você poder usar então você pode fazer um login com uma conta sua do Gmail tranquilo para você poder fazer quanto downloads você quiser por exemplo se eu fosse querer pegar o ícone de por exemplo estrela mesmo vou colocar aqui estrela e ele vai me dar sugestão de vários ícones certo ó os que estão com uma coroazinha quer dizer que são pagos Então você pega um que não tenha essa esse ícone Zinho vou pegar essa aqui essa primeira estrelinha e aí aqui a gente tem a opção e fazer o download ó ele pede Qual o formato que você quer Eu quero png com fundo transparente e eu posso pegar o tamanho bem pequeno para o ícone por exemplo 32 pixels certo vou escolher essa opção aqui download gratuito ó e vou salvar aqui como estrela traço ícone certo vou clicar aqui em salvar e fala de atribuir a pessoa aqui atribuição né que é colocar um link embaixo dizendo atribuição que isso aqui foi foi pego no pet societal no pegue seus nomes prático então você pode colocar lá no rodapé do seu site né em algum lugar aí do teu site você pode dizer que você pegou essa imagem através desse site aqui Certo ou você pode modificar ela fazer alguma alteração que daí já não vai ser exatamente isso mas em caso de ícone está pessoal é é difícil você ter problema porque eles não podem dizer que esse ícone foi criação deles mesmo que é uma estrela isso aí você acha em qualquer lugar você mesmo poderia ter desenhado isso daqui e não tem como a pessoa dizer que é uma coisa que você tá usando ali e tal né então os ícones é bem tranquilo para você tá utilizando sem precisar necessariamente colocar uma atribuição já fotos não não é mais complicado porque tem um autor e cada a única né e eu peguei estrela ícone aqui e vou colocar aqui o pessoal só para a gente ver como é que fica essa questão de gente colocar o ícone Zinho eu vou colocar esse ícone aqui em página principal olha só o que que vai acontecer vai ser bem curioso eu vou vir aqui tem página principal aqui dentro eu vou colocar uma tag MG src eu vou colocar aqui a nossa pasta e MG e Estrela ícone certo e vou fechar a minha tag de um controle para salvar Olha lá página principal vou dar um espaço aqui ficou o nosso ícone Zinho aqui ele até ficou grande né pessoal Leia 3272 mas eu poderia colocar aqui atributo eu me irrite e vou colocar 24 Ó ficou um pouquinho menor poderia colocar 20cal ícone Zinho menor a página principal colocamos um ícone Zinho lá beleza então essas são algumas questões sobre como a gente usa a tag MG tá pessoal é a gente veio aqui o formato jpg png GIF para colocar uma imagem você pode colocar um caminho absoluto você pode colocar um caminho relativo dentro da pasta do seu projeto a gente vê a importância da gente comprimir as imagens dá para deixar elas menor o menor possível para o nosso site carregar rápido né É bem a fazer isso ai tem um outro detalhe pessoal que é bem interessante eu também não mostrando aqui para vocês um outro recurso que a gente tem aqui no HTML que se chama image map ou mapa da imagem é deixa eu fazer o seguinte deixa eu vim aqui no pectus deixou maximizar esse aqui acho que eu fechei né vou lá no site do pexels vou pegar aqui computador a imagem de um computador não é top alguma coisa assim ruim que as imagens do pack seu são bem pesadas da pessoa porque ela tem uma qualidade bem alta a gente sempre tem que depois a diminuir o tamanho da qualidade da imagem né diminuto tamanho dela mas eu vou pegar essa daqui ó de exemplo vou fazer o download e vou colocar aqui a computador.

JP recompor computador. Jpg beleza coloque o rack no meu projeto eu vou é que eu vou colocar aqui em cima tá pessoal vou colocar assim e MG o src e MG/computador. Jpg e vou colocar o edit dele em 300 pixels também vou colocar um pouquinho maior qualquer 400 pixels tá não tô e redimensionando a imagem nem nada vou deixar ela desse jeito mesmo tá Deixei a imagem aqui desse jeito posso até pular uma linha pulei uma linha só para as outras imagens ficaram aqui embaixo certo esse e Inês Demétrio que eu quero mostrar para vocês É uma opção de por exemplo você quer que a pessoa clique apenas em um determinado item uma imagem Então imagina que a pessoa queira clicar só no computador ou só no mouse ou só no lápis eu tenho como trabalhar esse recurso usando o image map então eu posso vir aqui no Google e digitar se image map generator isso mesmo e meio de Map generator e clica no primeiro link e Aqui ó pode ser esse aqui Maggi e meio de traço né pe.

net clica aí selecionar uma imagem do meu computador ou selecionar aqui selecionei eu mostro a imagem aqui para mim E aí eu posso aqui ó fazer uma área pessoal ó eu posso fazer uma área e eu posso ir colocar no ponto só para determinar uma área então vou ajeitar aqui vou fazer com esse cantinho aqui qual é a área do computador do clique no computador certo e aqui a poderia colocar o link para onde o caro então vou colocar aqui ó https os: babá google. com certo e aqui no título eu posso colocar aqui assim computador certo aí eu vou adicionar uma nova área vou vir aqui ó add New área vou escolher aqui o formato vou querer assim ó um vamo pegar aqui um círculo por exemplo circo formato circo eu vou ativar esse aqui tem que marcar aqui a bolinha do ativo e vou pegar aqui ó que é a vamos pegar essa caixinha aqui ó e aqui e aqui fiz um círculo posso diminuir o tamanho ajeitar beleza aqui nessa caixinha Vou colocar aqui esse link vai para a programação web. com.

br certo e aqui eu vou colocar assim caixinha e você pode ir separando aqui os itens que você quer né Vou colocar aqui uma nova área selecionar aqui a opção Oi Nicole o clique aqui e aqui e aqui e aqui a aí você consegue fazer uma área com vários pontos altos só Mara com vários pontos eu fiz tudo meio errado aqui mas tudo bem e deixar esses vários pontos aqui teria que fechar certinho né Deixa eu ver se eu consigo fazer direito vou vir aqui adicionar nova área selecionar aqui polígono eu vou clicar aqui ou com selecionar essa opção aqui like aqui o primeiro ponto segundo ponto terceiro. É quarto. Cinco ponto e sexto.

Aí ó pegou mais ou menos o lápis ali tamanho certinho esse lápis a gente vai colocar aqui para https://youtube. com certo e aqui eu vou colocar lápis OK aí feito isso target eu posso colocar como Blank para ele abrir uma nova aba E aí eu vou dar aqui show me could Show me The Code ele vai mostrar esse código dá uma olhada aqui ó E olha que show de bola você vai vir aqui vai copiar esse código né controlar control c o pior vou vir aqui no nosso vs code deixou Restaurar Esse aqui ó e vou trocar aqui ó deixou só separar esse para gente ficar bem visível vou trocar aqui a por aquele código que a gente pegou lá control V para colar aqui Tá certo e ele me gerou uma tag chamada nep essa tag map é um mapeamento dessa imagem com as coordenadas dela e os links de área onde vão ser clicáveis certo pessoal única coisa que aqui ele não tá colocando a pasta certa que a nossa pasta e m Jenna e MG computador. Jpg ele tá dando aqui um atributo eo cemep colocando aqui qual que é o tipo do Snap um identificador e aqui ele tá pegando Esse identificador que ele tá vindo aqui de cima que é como um mapeamento das imagens eu dou um controle esse aqui é o tamanho da imagem ficou gigantão né deixou diminuir o tamanho da imagem vou colocar dela de 400 o vídeo Edit de novo e aí olha só que legal conforme passa o mouse ó eu tenho aqui ó computador passe o mouse aqui ó em cima desse aqui já vai ser outro não vai ser computador e se caixinha né então por exemplo só clicar aqui acho que eu não sei se é por causa do tamanho a acho que é por causa do tamanho da imagem que seu tamanho original tá pessoal show deixar que o tamanho original então se não ele vai bagunçar tudo as coordenadas do tamanho da imagem realmente Ó ficou gigantesco demais as imagens teria que ter antes de feito um mapeamento até redimensionado as imagens certo mas enfim Vocês entenderam acho que a lógica só passar agora o mouse aqui em cima caixinha só clicar em cima de caixinha ele vai para programação web certo se eu for clikar lá no lápis ó aquele vai mostrar o lápis cliquei no lá para ele Abrir o YouTube tu tá entendendo só que antes você fazer esse mapeamento a imagem já tem que estar do tamanho certinho do tamanho original tá pessoal porque senão a gente se a gente redimensionar a imagem para um tamanho é diferente vai dar errado mas eu queria mostrar para vocês essa opção do mapeamento também é bem legal né pessoal para que você possa trabalhar com itens separados dentro de uma imagem de forma clicável aí na outra coisa pessoal pra gente concluir essa aula você que ficou um pouquinho longa mas é que imagens tem bastante detalhes ainda para concluir essa aula tenha as imagens elas podem se tornar links certo clicáveis não só com essa questão do mapeamento aqui mas ela pode ser link para qualquer lugar então deixou só apagar essa aqui ó a gente usou agora é só para não ficar gigantona Então imagina que quando eu clicar aqui eu quero que esse esse carro azul eu posso clicar nele para ir para uma página como que eu faço para eles e clicar vou ir para uma página a gente aprendendo uma lá passada como você faz links certo então eu poderia por exemplo fazer aqui a tag a a o HF vou mandar lá para equipe demeter certo fecho aqui há até de ar e o fechamento da tag a tem que ser depois daí mg.