[Curso-Online-Eu-ProgrAmo]-Transcricao-video---v9-Colocando-imagens-no-site

Prévia do material em texto

1 
Módulo 02 
Colocando imagens no site 
 
00:00:00 Voltamos, e agora que a gente já ajustou o nosso site com todas as tags que a gente já 
aprendeu, vamos ver como ele está. 
Ele ficou assim, exatamente, marcamos todos os cabeçalhos, todos os parágrafos, olha só aqui 
como ficou. 
Vamos ver aqui no navegador. Beleza, está ótimo, está lindo o nosso esqueleto, está quase pronto. 
Não temos o estilo ainda, mas o esqueleto tem que estar firme e forte para depois a gente estilizar. 
Então agora o que falta? A gente começou pela parte mais fácil, e a primeira coisa que a gente 
identifica, que são os textos. 
Qual que é a segunda coisa que a gente identifica aqui, só de bater o olho no layout que a designer 
mandou para a gente? 
São as imagens, e é isso o que a gente vai fazer agora. 
Vamos inserir as imagens no site? Se você ainda não baixou as imagens que a gente já deixou 
disponibilizada aí para vocês, é só voltar e fazer o download, para que a gente siga juntas, tudo 
bem? 
Eu já baixei as imagens, e vamos ver onde que elas vão, a gente analisando aqui o layout. 
Então a gente fez um H1, H2, tem o primeiro parágrafo aqui da Ada, depois vem essa imagem que 
é uma bela imagem, uma bela pintura da Ada Lovelace. 
Então vai ser depois desse parágrafo aqui. 
Então lá na nossa estrutura, no nosso código, vai vir aqui, olha, entre esse parágrafo e entre 
“Infância”, vai vir a imagem, a primeira imagem do nosso site. 
Aqui em HTML a gente tem uma tag para imagem, que é a tag <img>, isso mesmo, IMG, vem da 
palavra em inglês “image”, ou em português “imagem”. 
Exatamente isso, abri, coloquei <img> e fechei. 
Eu não tenho a tag de fechamento aqui na imagem, aquela que vem a barra. Por quê? 
Porque a <img> é uma tag autocontida, é uma tag, digamos, autossuficiente. 
Isso porque um parágrafo tem um ponto inicial e tem um ponto final. 
Um cabeçalho também, começa aqui e termina aqui. 
Já uma imagem, não. A imagem é uma imagem por si só, não começa e termina. 
Então a gente só precisa abrir aqui a tag <img>. 
Legal, eu coloquei aqui a tag <img>, salvei aqui no “run” no meu Repl.it, mas olha só, não 
aconteceu nada aqui, não apareceu nenhuma imagem. 
Por que será? Vamos voltar lá para nossa apresentação e entender. 
 
2 
Por que não apareceu ainda nossa imagem lá no nosso site? 
A gente colocou a tag certinha, e não apareceu. 
Lembra lá dos potinhos do meu armário, quando eu te chamei para tomar um café e a gente estava 
estudando HTML lá em casa? 
Fica difícil saber a menos que tenha etiquetas nos meus potes. Agora eu sei onde está o café, 
legal. 
Mas eu posso ser uma pessoa mais organizada ainda, e colocar mais informações nessa etiqueta, 
não só o conteúdo que tem dentro de cada potinho, mas eu posso também colocar o peso de cada 
uma, a validade, olha, para não confundir quando eu coloquei cada alimento aqui, olha, a validade 
desse daqui é até essa data, o do outro até outra data. 
Eu posso ter outras informações nessa etiqueta que vão me ajudar a identificar e a ter mais 
informações sobre o conteúdo que tem dentro desse pote. 
E aqui no HTML é exatamente isso também o que vai acontecer. 
Eu posso ter numa etiqueta outras informações, na tag. 
00:04:00 E essas outras informações complementares, a gente chama de atributo de tag. 
Então como que a gente vai montar essa tag aqui com outras informações, para saber colocar a 
imagem certinha no nosso site? 
Qual é a informação principal que a gente precisa saber para colocar a imagem no nosso site? 
É a origem dessa imagem, onde ela está, de onde eu preciso pegar essa imagem para colocar no 
seu site. 
Origem em inglês é “source”, e um atributo para simplificar aqui, a gente coloca somente “src” de 
source, origem. 
Depois vem o símbolo de igual “=”, abro e fecho aspas, e dentro dessas aspas, eu vou colocar a 
origem da imagem. 
E o que é a origem da imagem nesse caso? É onde a imagem está. 
Só que a gente precisa colocar as imagens que vão ser utilizadas no nosso site aqui, olha, dentro 
da nossa estrutura de arquivos e pastas, dentro aqui do nosso site da Ada no projeto aqui no 
Repl.it. 
Agora que a gente já baixou as nossas imagens, a nossa pasta com as imagens para o nosso site, 
a gente precisa adicionar ela aqui à estrutura dos nossos arquivos. 
Para isso, a gente vem aqui nessas três bolinhas, e vem em “upload folder”, ou seja upload de 
pasta. 
E a gente vai, busca a nossa pasta com as imagens, seleciona ela, fazer upload. 
Aqui no Repl.it, vai perguntar “fazer upload de três arquivos pra este site?” 
 
3 
A gente clica em “fazer upload”, e olha só, apareceu aqui agora uma pastinha chamada de “img”, 
de imagem. 
É importante que o nome de pasta seja sempre minúsculo, sem acento e sem espaço, tudo junto. 
Isso é um padrão e é uma boa prática de organização de documentos. 
Reparem que tem uma setinha aqui do lado da pasta, e se eu clicar, ela mostra os arquivos que 
tem dentro dessa pasta, clico de novo, ela fecha, clico e abre. 
Então repara que eu tenho dentro, já tem até um recuo aqui da indentação da hierarquia que a 
gente já aprendeu, então tenho três imagens: Ada tabela, Ada pintura, e Ada criança. 
Todas as três com a extensão “.png”, que é uma extensão de arquivo de imagem. 
Então beleza, agora já temos aqui a nossa pastinha com imagens. 
A pastinha “img” é irmã, ela está na mesma hierarquia do index.HTML. 
E vamos lá entender, agora que a gente já organizou os nossos arquivos, como que a gente passa 
a origem da imagem para colocar imagem no site. 
A gente viu que essa estrutura aqui do atributo de tag, então o nome do atributo src, vou pegar 
minha canetinha aqui. 
“Src” é o nome do atributo, seguido por um símbolo de igual “=”, e depois vem aspas, e eu coloco 
aqui a origem da imagem. 
Mas como que eu marco a origem da imagem? 
Primeiro de tudo, a gente organizou as nossas pastas. 
Então essa é a estrutura que a gente tem por enquanto no nosso projeto, uma pasta chamada 
“siteada”, o projeto todo, a gente tem o index.html, que é irmão da pasta “img”, que dentro tem três 
filhas, as três imagens, “adaPintura.png”, “adaCriança.png”, e “adaTabela.png”. 
Então vamos lá. O atributo source a gente vai passar exatamente assim, entre as aspas, vai a 
origem do arquivo. 
Eu preciso indicar para o navegador onde ele precisa buscar esse meu arquivo. 
00:07:59 A primeira imagem é a pintura da Ada, que é essa imagem aqui. Então é “adaPintura”, 
exatamente esse aqui. 
Então vamos lá nossa tag <img>, centralizar aqui, dar um zoom, posso aumentar um pouquinho o 
tamanho aqui, só para ficar mais fácil de ver. A gente vai lá, “img”. 
Qual é o atributo, que tipo de informação extra eu vou precisar colocar aqui? “src” de source. 
Repare que aqui o Reptl.it já deu algumas sugestões, porque ele busca facilitar a vida da 
desenvolvedora. 
Depois a gente põe o símbolo de igual “=”, sem espaço, tudo junto mesmo, e abro aspas. 
 
4 
Abri as aspas, e agora eu coloco o caminho onde está guardada essa minha imagem que eu quero 
utilizar. Primeiro coloco lá, ela está dentro da pasta “img”, depois eu coloco uma barrinha “/”, então 
eu coloco o nome da imagem certinho, que é “adaPintura.png”. 
Eu preciso passar o nome e a extensão certinhos, e tem que ser igualzinho como está aqui dentro 
da nossa pasta, está bem? 
E aí então eu fecho as aspas. Repare que muda de cor. 
E aí agora, eu já tenho aqui um atributo dentro da minha tag <img>. 
Vamos salvar e ver o que aconteceu? Deixa eu tirar o zoom agora. Vamos salvar no “run”. 
Olha só, agora temos a nossa primeira imagem aqui no nosso site. Apareceu a imagem da pintura 
da Ada. 
Então vamos voltar lá, recapitulando. 
A gente tem a etiqueta <img>, que ela é autocontida, então ela é só etiqueta de abertura. 
Depois eu tenho um espaço, eu tenho o nome do atributo, que é “src”, de “source”, origem seguido 
por um símbolo de igual “=”. 
E aí seguido por aspas, que dentro dessas aspas eu vou passar o caminhoonde está a minha 
imagem. 
Está dentro da pasta “img” barra “/” o nome do arquivo completinho com a extensão, 
“/adaPintura.png”. 
Essa barra significa hierarquia. Então significa que esse arquivo está dentro dessa pasta “img”, 
lendo ao contrário, daqui para lá. 
“adaPintura.png” está dentro da pasta imagem. 
Aqui é o nome do atributo, e aqui é o valor do atributo. 
Então agora a gente já aprendeu a como colocar uma imagem no nosso site. 
Colocamos lá a nossa primeira imagem aqui da pintura da Ada, organizamos as nossas imagens 
todas aqui na pasta. 
E tem outras imagens. Ainda falta a imagem da Ada “Infância, da Ada Criança, e a outra imagem 
da Ada Tabela, e agora você já sabe fazer isso.