A tag img em HTML5 - @Curso em Vídeo HTML5 e CSS3

E chegou a hora que você tanto esperava Vamos colocar uma imagem dentro do nosso site utilizando tags HTML tem comer uma [Aplausos] E aí [Música] o Olá tudo bem com você seja bem-vindo seja bem-vindo a mais uma aula do seu curso de html com CSS agora a gente vai começar a colocar imagens mas eu tenho que te dizer uma coisa muito importante você olhou na sequência das aulas ele falou assim ai direitos autorais formato de imagem tamanho de imagem vou pular isso vou direto para Como colocar imagem você perdeu uma boa parte da experiência profissional de construção de site um bom profissional de construção de sites sabe entender os formatos de imagem sabe onde pode pegar a imagem e sabe qual é o melhor tamanho para imagem isso a gente falou nos últimos vídeos que você provavelmente pulou Então volta lá assistir com calma porque lá eles não muitas dicas e se você viu tudo bonitinho tá tudo certo nós vamos agora fazer um exercício prático então comigo então direto para o computador e vamos ver como se todos a funcionar e o recado dessa vez é mais uma vez da nossa querida patrocinadora hostnet e o que eu vim falar que hoje é um recado muito eu sei que já tá querendo Criar o seu próprio site já um tempão provavelmente pode estar fazendo esse curso na intenção de criar seu próprio site mas tá vendo que aprender a criar só uma coisa da noite para o dia que realmente não é mas saiba que se você tiver precisando de ajuda na construção do seu site você quiser deixar ele nas mãos de profissionais gabaritados a hostnet pode criar esse site para você isso porque ela é uma empresa especializada em hospedagem de sites e também das Ferramentas WordPress WordPress com o come-se e onde parece que o Nordeste não sei se você sabe hoje parece para criar sites o comece para criar lojas e o Nordeste para a criação de plataformas educacionais online E além disso também é especializada no uma ferramenta de automação de marketing que é o malte e se você tiver precisando de qualquer um desses serviços é só entrar em contato com a Rosinete ó nesse link aqui você pode também entrar em contato tem uma área ali para você entrar em contato com um dos nossos representantes e ele é um orçamento para transformar esse seu sonho em realidade tudo por um preço justo feito profissionalmente Obrigado Rosinete pelo apoio e guarde na sua mente essa possibilidade essa oportunidade carros nessa trazendo para você e vamos voltar para aulas vitória só não a passada só para você ter uma ideia a gente gerou uma imagem aqui ó uma imagem de paisagem onde o tamanho normal dela era 1. 8 mega 1800k e ele foi para 122 carro eu te mostrei como a gente fez para poder economizar espaço e também te mostrei o pão importante ter uma imagens de tamanho a zoar vou jogar essa pasta imagens na lixeira não me interessa mais hoje vazia lixeiras só para a gente poder treinar e agora não começar a trabalhar nosso Próximo exercício Então nós vamos em documentos e Estudos HTML CSS exercícios e Vamos criar nosso exercício 3 vamo lá é x003 nós vamos já deixar é aberto aqui no code para a gente poder trabalhar e aqui com Cold aberto aí cuida que não tamanho razoável também Enfim vou deixar ele minimizado aqui ou na verdade eu vou fazer o seguinte no Cold já vou criar o arquivo index. HTML para já ir adiantando o processo aqui nesse endereço eu vou criar código padrão quero falar assim agora agora o que que você fez para aparecer esse se você disse isso meu querido minha querida tá muito perdida porque isso é que eu Já ensinei a bastante tempo então vou mudar aqui para português do Brasil aqui eu vou colocar teste com imagens no Bari vou colocar um h1ac um título né Depois a gente vai ver a parte de título já tá chegando nós vamos colocar aqui testando carga de imagens eu vou querer um parágrafo aqui abaixo você vai ver uma imagem que está na mesma pasta está sem ou tem que colocar junto com esse index HTML uma imagem então tem gente aqui salvo ele já tá salvo que a gente ligou o recurso de auto-serviço você não sabe volta lá que eu também ensinei isso vou Minimizar eles vão Studio code e nós vamos agora procurar uma imagem não abrir Google Chrome Ok Google imagens imagens de ponta google.

com e aqui eu vou procurar uma longo do HTML5 para botar só assim HTML5 ele já vai procurar várias mas tá vendo aqui tem um fundo e tudo mais e já te ensinei a gente vai buscar aqui por ferramentas uma imagem qualquer tamanho Mas a cor eu quero transparente também já trouxe aqui imagens transparentes para mim eu vou abrir essa daqui a Inclusive eu vou botar aqui também para uso o direito de uso aqui eu quero poder usar essa imagem para lá essa a imagem que eu vou salvar como ela tem transparência Eu já imagino que ela seja no formato png que a gente viu também as aulas anteriores só que ele tá grande Tá vendo minha 24 por 24 muito grande mas eu vou salvar imagem como e vou salvar lá na pasta lá na nossa pasta de trabalho eu vou colocar aqui ó dentro de documentos estudos HTML exercícios exercícios três aqui eu vou fazer o seguinte eu vou salvar logo HTML full a gente pode até apagar essa luva HTML furo aqui outra coisa que eu quero também o jogo da CSS css3 também vou pegar essa essa logo aqui tá vendo ela é meio 24 mas por 726 é porque a outra tem uma borda que a gente já vai entender melhor isso vou salvar essa também salvar imagem como eu vou botar aqui mesmo esquema logo CSS full na mesma pasta tá esse computador documentos estudo HTML exercícios exercícios 3 salvar então tem a logo da hora que eu tenho logo da CSS só que Olha só cara vamos colocar essa imagem Então dentro do exercício eu tenho logo CSS full e logo HTML vamos voltar aqui no visual Studio code e vamos fazer o seguinte Vamos carregar a imagem do HTML carregar imagem cara é muito fácil você vai usar em primeiro lugar a tag i n g é só você digitar as três letras em MG e vai escolher essa primeira opção aqui ou simplesmente dar enter clicou ele já vai carregar src significa source ou origem Aqui é onde está o a origem do arquivo e oauth que é a alternativa é qual é o texto que explica melhor o que que essa imagem é o texto alternativo E aí você vai ter que pegar transar não vou botar exatamente o mesmo nome daqui não precisa cara é isso Você vai clicar aqui no meio das Artes para deixa o cursor piscando Você tá vendo que eu tô pescando aqui ó tá piscando exatamente no meio das "bota ali agora segura a tecla control do seu teclado aperta o espaço a encontrou paz ele já vai aparecer a lista dos arquivos Olha que prático isso eu vou querer alugo do html no texto alternativo eu vou colocar aqui logo HTML5 a multiplicação do que que é isso serve para leitores de tela Isso serve como acessibilidade nessa pessoas deficientes visuais então importantíssimo você coloca aqui com um bom texto alternativo tá explica o que que é a imagem que tá sendo carregada vão abrir esse arquivo Então vou vir aqui vou abrir o arquivo index abrem cara dá uma olhada nisso colar aqui perto da minha cabeça vou botar o código dá uma olhada no tamanho dessa imagem o tamanho que essa imagem ficou ela ficou gigante cara até dar para a gente alterar se você é for lá no CSS mudar e tal mas o fato é vamos ver o tamanho dessa imagem vamos o tamanho do arquivo se você quiser ver o tamanho do arquivo você pode vir aqui em Tá na pasta você manda exibir detalhes ele mostra de html tá com 30 Vá para a gente diminuir bastante a gente falou sobre isso na aula anterior eu mostrei para você como diminuir uma imagem eu vou fazer aqui de novo rapidamente mas a explicação completa tá nos vídeos anteriores eu vim só sobre tamanho de imagem então assistir lá deixa de preguiça um colocar essa aqui no tamanho normal cara tamanho normal aqui eu acho que 250 200 de largura já tá ótimo eu vou fazer o seguinte eu vou selecionar os dois arquivos de imagem tão que eu fiz eu vim aqui fiz uma linha e vou englobar esses dois botão direito vou mandar abrir com não tem abrir com poder abrir um de cada vez você está de brincadeira botão direito CSS o link vou fazer a mesma coisa com HTML vou vir aqui HTML botão direito abrir com gente também perto bem prático negócio então abrir os dois percebem que o seguinte ó O HTML ele tem uma folga aqui do lado CSS não tenha folga nesse lado então eu vou fazer ou eu crio uma folga no CSS ou tira folga no HTML preciso tirar a folga eu tô tirando Beach esse aqui não serve para nada você é transparente Você vai vir nessa ferramenta aqui ó que a ferramenta de cropper meta de guilhotina você vai fazer o seguinte você clica nela Ok E aí eu vou fazer o seguinte aqui ó vou fazer um laço para colocar exatamente do tamanho você pode até arrastar esses quadradinhos aqui ó o cantinho para dimensionar ó feitas alterações é desse tamanho aperto enter já foi e agora eu vou diminuir a largura desse arquivo para ficar com 250 de largura Então vamos lá arquivo imagem redimensionar imagem para 735 de largura vou botar 200 200 200 200 de largura vamos redimensionar redimensionou Vou salvar aqui ó exportar e nós vamos salvar como logo HTML certo pode ser logo HTML 200 mantém as configurações exportar vou vir aqui no CSS também vou diminuir para o mesmo tamanho que foi 200 beleza o dia que em CSS mesmo esquema imagem redimensionar 200 de apertei o tablet para sair da caixa e dimensionar e nós vamos exportar vamos exportar como logo CSS Lobos ess-200 certo exporta vamos exportar Beleza então já estou com as imagens totalmente de mencionadas Com certeza Existem várias maneiras de você apoiar o canal do curso em vídeo mais uma das mais importantes é entrando no site do curso em vídeo pensa que tá aparecendo aqui do lado e clicando na parte de cima do link seja um apoiador você ajuda muito projeto a se manter gratuito e como recompensa a gente oferece alguns vídeos exclusivos alguns vídeos de backstage alguns cursos exclusivos como um curso a programação usando Portugal estúdio algumas aulas adiantadas do curso de html que você tá vendo aqui e de quebra muito em breve também vamos oferecer certificados para quem é apoiador então não perca tempo e você pode ajudar a gente acesso a curso em video. Com e clica no link que está na parte superior do site Seja um apoiador que que eu vou fazer agora fechar alguém para que não vou salvar nada vou vir aqui no meu código em vez de carregar o lobo HTML full eu vou carregar logo HTML 200 se você não quiser digitar você apaga tudo contra o espaço um escolhe com quem que tá eu acho até mais prático que você não erra o formato do arquivo você não erra o nome do arquivo é muito mais prático fazer assim vamos salvar já tá salvo e vamos atualizar aqui olha o tamanho olha como é que ficou mais coerente e vamos olhar o tamanho da imagem Olha isso allowhtml caiu de 30 para 14k CSS caiu de 25 para 14k também então eu tenho duas dois arquivos de 14k se eu carrego esses é de 14 aqui ó eu tenho esse arquivo e 14 esse arquivo de 14 se eu carrego os dois não chega na carga de um arquivo que era 3014 com 14 não dá 3028 então assim carregar esses dois arquivos tem o mesmo peso carregar só esse para a gente economizou muito espaço muito tráfego de banda não espaço antes que caia bem pouquinho mas tráfego de banda para um site de sucesso e isso é muito importante a gente em estabelecer esse nosso projeto Ele é bem simples eu vou selecionar aqui ó esses dois furos vou jogar para lixeira Vou apagar aqui eu não quero não me interessa manter a versão full eu vou manter só logo HTML tirar esse 200 aqui no final logo CSS para tirar esse 200 daqui cuidado porque agora se eu carregar ele fica aqui ó logo HTML5 ele fica só contexto alternativo que fica com uma imagem quebradinha e por acaso acontecer isso na sua casa é sinal de que você errou o nome do arquivo dica tem aqui apaga o nome todo deixar as "contra o espaço escolhe e atualize já tá funcionando perto outra coisa que eu vou te ensinar também nessa aula eu vou fazer o seguinte imagina mais para frente você vai precisar tá Que eu tenha uma casta por criar uma pasta aqui dentro dentro do exercício 003 eu vou criar uma nova pasta eu vou chamar de imagens falta tudo em minúsculas tá e eu vou pegar logo CSS e vou jogar dentro dessa pasta Imagina isso é logo HTML tá na mesma pasta logo CSS não está na mesma partida tá nós vamos fazer o seguinte aqui vou colocar um outro parágrafo vou botar podemos também carregar imagens que estão em subpastas Oi e aí vamos carregar aqui ó em MG se eu botar aqui logo CSS ponto. png botar o texto alternativo aqui logo css3 se eu vier aqui ó já quebrou o quê Porque logo CSS não está aqui dentro ele tá querendo imagens ó tá vendo tá dentro de imagens Como que eu faço isso mesmo o macete apaga tudo contra o espaço aí você vai ver que não tá o CSS aqui mas se você clicar em imagens ele tá aqui ó logo SS aí oração que ele fez imagens bar eu tive que botar o nome da pasta aqui na frente na hora que eu carregar já está carregada olha que maneiro olha que maravilha para finalizar para terminar esse negócio de carregarem mais você não tá querendo carregar a imagem agora a gente vai te mostrar todas as formas de carregar imagem a gente pode carregar a imagem também de outros links eu vou te mostrar como fazer isso assim eu não vou salvar eu quero a logo agora vou botar aqui ó também podemos carregar imagens externas as imagens externas ó aqui vai aparecer uma imagem está eu quero o seguinte eu vou pegar uma logo JavaScript é a outra atacando gente estuda e vou colocar aqui embaixo só que eu vou fazer o seguinte vou tá aqui ó já vai escrever eu quero transparente e eu quero tamanho pequeno tem ícone tem que ele é muito pequena média deixa eu mudar aqui vou botar aqui javscript Mall maluco com menor aqui do javscript essa imagem que vai ficar muito grande ela é 800 por 800 está vendo ver se eu consigo achar uma Menorzinha enfim não tô conseguindo achar uma imagem Pequena deixa eu ver aqui como tem se tem ícone tem uma bem pequenininha aqui eu acho essa aqui ela tá 256 por 256 beleza tá de bom tamanho o que que eu vou fazer aqui eu vou clicar vou abrir ela provavelmente essa imagem aqui clicar com o botão direito nela em vez de salvar imagem o copiar imagem eu vou copiar o endereço da imagem então clique aqui ou na imagem copiar o endereço da imagem para fazer isso com qualquer imagem pode até fazer um teste aqui ó abre uma aba nova e cola da control over no endereço é esse cara aqui ó tá bom E aí aqui ó tá vendo lá.

Tamos. Reddit mídia.