Piratas e seus Tesouros 👑

Controlando o estoque de tesouros de Barba-Ruiva.

Atividade

Crie uma página para ajudar o temido Barba-Ruiva a visualizar o seu estoque de tesouros seguindo os passos descritos a seguir.

Exercício 1: setup e estrutura básica

1. Baixe as imagens e o ícone que serão usados
2. Descompacte o arquivo cefet-front-end-pirates-main.zip na área de trabalho
   • Isto criará uma pasta com o nome cefet-front-end-pirates-main lá
3. Renomeie a pasta criada na área de trabalho para tesouro-piratas
4. Crie um arquivo index.html na mesma pasta e siga os passos:
   • Por que dar o nome de index.html?
     • Veja o FAQ

Agora, você deve (a) criar a estrutura básica do documento HTML (DOCTYPE, tags HTML, HEAD, BODY vazias), (b) colocar um título da página na aba do navegador e (c) colocar a imagem calice.ico como ícone.

Teste a sua página, abrindo-a no navegador.

Exercício 2: título, parágrafo e fundo

Ao fazer este exercício, fique conferindo, no navegador, como a página está ficando.

1. Coloque o título (h1) e o parágrafo, deixando espaço para a tabela
   • Conteúdo do parágrafo (para copiar e colar): "Yarr Harr, marujo! Aqui é o temido Barba-Ruiva e você deve me ajudar a contabilizar os espólios das minhas aventuras!" (sem as áspas)
   • Estilize-os:
     • Remova a margem superior do título h1 (i.e., defina-a como 0)
     • Coloque uma cor legal para o texto (usei gold)
     • Coloque uma sombra no texto (usei uma preta, deslocada 2px para direita e para baixo)
2. Coloque a imagem de fundo no body
   • Deixe-a ancorada no canto esquerdo inferior (left bottom)
     • Motivo: o Barba-Ruiva está nesse mesmo canto, então, se ancorarmos por lá, ele estará sempre visível na página, independente do tamanho da janela do navegador
   • Faça-a cobrir todo o espaço disponível (cover)
   • Por que a imagem de fundo ficou só lá em cima?
     • Veja o slide "Ocupando toda a altura do navegador" da aula
3. Alinhe o texto do corpo da página (i.e., body) de forma centralizada
4. Coloque uma margem na página inteira (i.e., no body), de 0% vertical e 25% horizontal. A propriedade fica assim:

   margin: 0% 25%;
   

   ... que é o mesmo que:

   margin: 0% 25% 0% 25%;
   

   ... ou então:

   margin-top: 0%;
   margin-right: 25%;
   margin-bottom: 0%;
   margin-left: 25%;
   

   • Eu sempre prefiro a forma mais curta (a primeira), quando as margens laterais (esquerda e direita) são iguais e as verticais também (cima e baixo) 😉

Exercício 3: a tabela

1. Crie a estrutura básica da tabela com a tag table e as tags caption, thead, tbody e tfoot vazias
   1. A legenda deve conter: "Estes são os tesouros acumulados do Barba-Ruiva em suas aventuras" (sem as áspas)
2. Crie o cabeçalho, dentro da tag thead
   • O cabeçalho contém apenas 1 linha (tr)
   • Lembre-se que usamos th para definir as colunas/células dentro da tr do thead
   • Coloque 5 colunas, nesta ordem:
     1. Tesouro
     2. Nome
     3. Valor unitário
     4. Quantidade
     5. Valor total
3. Crie o corpo da tabela, linha por linha
   • Dica: assim que fizer a primeira linha, copie e cole-a outras 3 vezes (porque são 4 tesouros ao todo)
   • Os tesouros são:
     1. Moedas:
        • Imagem do baú em: imgs/moedas.png
        • Nome: Moedas de ouro
        • Valor unitário: 10
        • Quantidade: 835
        • Valor total: 8.350
     2. Coroas:
        • Imagem do baú em: imgs/coroa.png
        • Nome: Coroas
        • Valor unitário: 210
        • Quantidade: 4
        • Valor total: 840
     3. Cálices:
        • Imagem do baú em: imgs/calice.png
        • Nome: Cálices de ouro
        • Valor unitário: 4.500
        • Quantidade: 1
        • Valor total: 4.500
     4. Barris:
        • Imagem do baú em: imgs/rum.png
        • Nome: Barris de rum
        • Valor unitário: não tem preço
        • Quantidade: 7
        • Valor total: -
4. Crie o rodapé, contendo 1 linha. Essa linha deve possuir apenas 2 células/colunas, sendo que a primeira deve ocupar 4 colunas (i.e., mescle-as)
5. Centralize a tabela
   • Basta definir as margens laterais como tendo "tamanho automático":

     table {
       margin-left: auto;
       margin-right: auto;
     }

6. Estilize a legenda (caption) de forma a torná-la mais legível
   • Eu usei um fundo branco 70% opaco, tanto nela quanto no parágrafo
     • (Se você quiser...) Para que uma regra se aplique a mais de um elemento, basta, no seletor, separar os elementos por vírgula, e.g.:

       caption, p {
         background-color: rgba(255, 255, 255, .7);
       }

   • Além de torna-la legível, reduza um pouco o tamanho da sua fonte em relação ao restante do texto
     • Eu usei um font-size: 75%
7. Estilize a tabela de forma que ela fique mais bonita, tipo a da imagem fornecida lá em cima
   • Não se esqueça do border-collapse: collapse na table para poder definir as bordas
   • Use um espaçamento interno para dar mais espaço às células da tabela, deixando-as mais "arejadas"
     • Eu usei:

       td, th {
         padding: 3px 10px;        
       }

       ... que é a mesma coisa que:

       td, th {
         padding: 3px 10px 3px 10px;        
       }

       ... e que é a mesma coisa que:

       td, th {
         padding-top: 3px;
         padding-right: 10px;
         padding-bottom: 3px;
         padding-left: 10px;        
       }

   • Usei as cores de fundo lightgreen e lightsteelblue para o cabeçalho e rodapé, respectivamente (mas você pode escolher outras)
   • Coloque bordas finas (i.e., de 1px) no cabeçalho e no rodapé

FAQ

FAQ é uma sigla para Frequently Asked Questions que, em Português, traduz em Perguntas Feitas com Frequência. A seguir, veja algumas questões que podem surgir ao fazer este exercício, bem como as suas respostas.

Por quê devo dar o nome de index.html ao meu arquivo?

Quando temos um website composto por várias páginas, uma delas precisa ser a página inicial. O navegador entende que, se existe um arquivo com o nome index.html, ele é a página inicial do site.

O que significa rgba(...)?

Qualquer cor para o computador é uma combinação ("mistura") de vermelho (red), verde (green) e azul (blue).

Quando usamos rgba(...) podemos especificar uma cor a partir de suas componentes red, green e blue, bem como o seu nível de opacidade, que chamamos de alpha.

Os valores de R, G e B vão de 0 a 255 e o valor de alpha vai de 0 a 1. Experimente descobrir novas cores usando rgba()!