WEB - Lista Prática

1. Crie um projeto (pasta com a estrutura) chamado “IFSP-MSI”.

2. Crie uma página chamada lenny.html e nela insira as informações mostradas logo abaixo.
Você deverá posicionar a imagem ao lado direito juntamente com a legenda da imagem.
Você deverá utilizar um elemento ​<span> para a legenda. Atente-se para os detalhes de
espaçamento e borda do elemento que contém a imagem.

3. Reproduza o mesmo exercício anterior, porém trocando o personagem (escolha qual

preferir) e dessa vez utilize a tag ​<figure> ​e ​<figcaption> para a imagem e sua legenda.
Pesquise sobre as tags.

4. Elabore um arquivo chamado “galeria.html”, nele insira 6 imagens com suas respectivas
legendas. Atente-se para os detalhes:
○ toda a galeria está centralizada na página;
○ existe diferença de bordas nas imagens;
○ todos os nomes possuem links para outras páginas;

5. Utilizando as técnicas de float, crie uma página chamada “estrutura.html” com o ​layout
próximo do mostrado na figura abaixo. Seu ​layout​ deve obrigatoriamente conter:

○ um ​<div> ​com id=”site” que engloba todo o resto do site; o mesmo deve ter
1000px​ de largura e estar centralizado na página;
○ um ​<div>​ com id=”cabecalho” com ​100px​ de altura;
○ um <​ div> com id=”container” que contém dentro dele dois outros ​divs​: um com
id=”conteudo” posicionado à esquerda do site com ​700px de largura, e outro com
id=”barra-lateral” posicionado à direita do site com ​300px​ de largura.
○ um <​ div>​ com id=”rodape” que possui ​100px​ de altura.