Skip to content

Latest commit

 

History

History
175 lines (147 loc) · 7.14 KB

README.md

File metadata and controls

175 lines (147 loc) · 7.14 KB
Raw

Piratas e seus Tesouros 👑

Controlando o estoque de tesouros de Barba-Ruiva.

Resultado final da atividade prática

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?

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?
  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()!