Hora de passar para o próximo exercício.
Neste exercício, vamos lidar com imagens,
como incluir imagens em nossas páginas da web
e como podemos fazer uso do objeto de mídia em nossa página web.
Como o primeiro passo,
vá para suas instruções de exercício e baixe o arquivo image.zip
e salve-o na sua pasta de confusão.
E então descompacte o arquivo para obter uma pasta chamada, img,
e dentro dela você
vai encontrar algumas imagens que vamos fazer uso deste exercício.
Todas as imagens estão no formato png nessa pasta.
Agora vamos trabalhar para adicionar algumas imagens à página.
Primeiro, vamos adicionar o logotipo do nosso restaurante.
Então, indo para a página index.html, no Jumbotron,
você verá a segunda div aqui tem o col-sm.
Então, nós vamos corrigir isso adicionando a esta div,
e alinhar auto centro a esta div.
Agora, a esta div,
vamos adicionar uma imagem.
Então, deixe-me usar a imagem com a fonte, img.
Já colocamos a pasta de imagens que contém as imagens em nosso projeto.
Então, a partir daí, adicionarei o arquivo logo.png como a imagem aqui.
Além disso, vou adicionar a classe como fluido de imagem, para
que esta imagem seja automaticamente responsiva e se adapte ao tamanho da tela.
Vamos salvar as alterações.
Vamos aplicar a mesma alteração para a página aboutus.html
e também a página contactus.html no Jumbotron.
Agora, quando você olhar mais de perto sua página web,
você vai descobrir que no Jumbotron,
logo após este texto,
você vai ver a imagem do nosso restaurante inserido lá dentro.
Em seguida, vamos para a barra de navegação,
e então onde temos isso para a marca navbar,
eu vou substituir essas palavras para o restaurante pelo logotipo correspondente.
Então, essas palavras eu vou substituir isso por img,
e fonte é logo.png.
Além disso, eu vou especificar um atributo de altura de 30,
e um atributo de largura de 41 para este logotipo.
Este tamanho é adequado para a marca navbar lá.
Então, vamos salvar as alterações.
Eu vou fazer a mesma mudança na página aboutus.html,
e também na página contactus.html.
Olhando para a página web agora,
você verá que o nome do restaurante foi
substituído pelo logotipo do restaurante em tamanho pequeno lá.
Agora você vê que quando você navega para a página Sobre,
você verá a imagem que está sendo incluída lá
e, da mesma forma, na página Contato,
você verá que a imagem foi atualizada voltando para a página principal.
Agora, o que vamos fazer,
é usar um objeto de mídia no lugar dessas descrições que temos aqui,
e então usar o objeto de mídia para substituí-los
pela descrição e também uma imagem a ser incluída.
Isso dá uma visão melhor da nossa página web.
Então, vamos em frente e fazer essa mudança.
Para fazer uso do objeto de mídia em nossa página index.html,
vamos para a primeira linha de conteúdo aqui.
E aí mesmo na segunda div,
vou apresentar um novo desenvolvimento com a mídia da classe,
e colocar o conteúdo dentro dessa div lá,
fechando a div.
Agora, dentro desta div,
vou apresentar uma imagem para ser usada lá.
Aqui eu entro e digo classe de imagem,
e para usar uma imagem em um objeto de mídia,
precisamos aplicar algumas classes relacionadas flexão adicionais aqui,
então eu aplico o d-flex, e depois mr-3.
Então, M significa margem direita com o número 3.
Isso dá margem suficiente à direita desta imagem, de
modo que a descrição é ligeiramente separada da imagem na página web.
E então eu usarei miniatura de imagem para esta imagem,
e então também usarei o auto-centro de alinhamento para a imagem,
e então digite a fonte da imagem, que é img,
e você pode procurar
o nome da imagem na pasta img,
e deixe-me dar-lhe uma alternativa lá,
e fechar a imagem.
Isso agora incluirá a imagem no meu objeto midi.
Além disso, eu vou criar o corpo de mídia para esta imagem,
dizendo corpo de mídia div classe,
e, em seguida, fechado este h2 e p que contém a descrição dentro deste div lá.
Então, deixe-me recuar o conteúdo lá,
e depois fechar essa div aqui.
Com isso, minha descrição está dentro do corpo da mídia.
Além deste h2,
vou introduzir uma classe como mt-0.
Com isso, esta classe diz margem superior zero.
Este título será alinhado ao topo deste objeto de mídia específico aqui.
Com essas alterações, vamos salvar as alterações e,
em seguida, ir e dar uma olhada rápida em nossa página web.
Indo para a nossa página web,
você notará imediatamente a mudança na página da web.
Agora você pode ver que há uma posição de imagem aqui,
e então a descrição
que estava anteriormente nesse local foi posicionada corretamente aqui.
Compare isso com as duas linhas restantes,
e agora você começa a ver como o objeto de mídia nos ajuda
a transformar isso em algo mais vibrante.
Eu vou fazer a mesma coisa na terceira fila aqui.
A segunda linha será deixada como um exercício para você na tarefa.
Indo para o terceiro exercício,
vou aplicar uma mudança semelhante a esta terceira linha para introduzir o objeto de mídia aqui.
Deixe-me apresentar o objeto de mídia lá,
e então a esta div,
entrar no objeto de mídia,
e então introduzir a imagem que eu vou usar aqui.
Eu uso a classe como D-flex MR-3.
Se você estiver posicionando a imagem para o lado direito,
então você precisa dar uma margem como ml-3 para ela.
Além disso, eu vou adicionar na classe miniatura de imagem para isso,
e então também dizer, alinhamento auto-centro.
Estas são as aulas que vou adicionar a esta imagem.
E então, vamos especificar a fonte desta imagem,
img e alberto.png, e então eu vou especificar a alternativa.
E depois disso, este H2 e H4 e o P,
vou fechá-los dentro de uma div media-body aqui,
fechando a div do corpo da mídia.
Agora completamos o objeto de mídia na terceira linha.
Vamos salvar as alterações
e, em seguida, dar uma olhada em nossa página da Web em seguida.
Agora, dando uma olhada em nossa página web,
você vai notar que nós temos a descrição prato lá.
Agora, se você mover para a terceira linha,
você verá como a terceira linha também foi redefinida.
Observe o uso da mídia esquerda, o
que significa que a imagem está posicionada no lado esquerdo neste objeto de mídia
e, em seguida, a página do meio da mídia posiciona a imagem no meio da descrição.
Você também pode usar a parte superior da mídia e
a parte inferior da mídia, para alinhar a imagem à parte superior e inferior desta descrição.
Com isso, completamos este exercício.
Neste exercício, analisamos o uso de imagens e objetos de mídia em nossa página web.
Este é um bom momento, novamente,
para fazer um bom comentário,
com a mensagem, imagens e mídia.