Passo 5: Pauta caricaturada da turma

Realização do mini-projeto: "Criação de uma página em HTML com a pauta caricaturada da turma"

Neste projeto de introdução ao HTML, vamos criar uma tabela com a pauta da turma. Nessa pauta vamos inserir uma fotografia pequena de cada aluno que deve ter uma hiperligação para uma fotografia de dimensões maiores. As fotografias devem ser preferencialmente as caricaturas que elaborámos na PT03.

Requisitos para a pauta, ou seja, a pauta deve conter os seguintes elementos:

1. Uma tabela base (elemento <table>) onde vai ser inserido todo o texto e todas as fotografias (uma por aluno).

Possíveis formatações da tabela:

        • Contorno visível ou invisível;
        • Largura fixa ou dinâmica;
        • Cor de fundo;
        • etc.

2. As fotografias de cada aluno (elemento <img>) em formato grande (900 x 1200 pixel) e pequeno (75 x 100 pixel).

Utiliza as seguintes imagens caricaturadas criadas no "PT03 - Caricatura do Eu":

        • Cada aluno deve preparar a sua própria caricatura em formato tipo passe [+ajuda], com a resolução exacta de 900 x 1200 pixel (proporção 3:4, deve ser feito um crop) em formato JPG. O ficheiro da fotografia caricaturada deve ser enviada para este álbum partilhado: photos.app.goo.gl/sywo6cUdqALC1cjT7
        • Se houver caricaturas em falta (alunos que ainda não tenham colocado a sua caricatura no álbum), deves utilizar as fotografias sem caricatura que fizemos durante esta sessão fotográfica: Ver pasta DRIVE (2019/2020)

3. Por baixo de cada fotografia deve aparecer uma legenda com a turma, número e nome do aluno.

4. As cores de cada legenda devem ser diferentes e ao seu gosto.

A formatação deve respeitar as regras do CSS e podem ser inseridas inline ou em ficheiro separado.

Ver como codificar as cores em HTML (CSS): sites.google.com/a/aebenfica.org/apontamentos-tic/programacao/cores

5. Criação de uma hiperligação (elemento <a href= ...>) na fotografia pequena para permitir a visualização de uma versão maior (máximo 1200 pixel na dimensão maior) da mesma fotografia do aluno, que deve abrir em página separada (target="_blank") : <a href="URL" target="_blank"> Texto </a>

6. Respeitar a estrutura de pastas do projeto.

Ver apontamento mais abaixo em "Estrutura de pastas".

7. Verificar o funcionamento do site em modo offline, ou seja a partir do computador utilizando um navegador de Internet ao seu gosto.

Quando estiver tudo a funcionar bem, deve enviar o projeto para o seu repositório github.

Estrutura de pastas

Criar uma pasta no disco do seu computador com o nome PTnn (onde nmn é o numero da PT).

Dentro da pasta PTnn deve criar a seguinte "estrutura de sub-pastas":

PTnn

\imagens\ > Inserir todas as imagens no formato jpg *

\css\ > estilos.css ou vazio (ver ponto 4, mais acima)

\scripts\ > (vazio)

\ index.html (o ficheiro index.html deve ser criado diretamente na pasta PTnn)

* para cada aluno deve haver 2 fotografias, uma grande e uma pequena. Ver ponto 6 das Boas praticas)

No GitHub as pastas vazias não são carregadas, assim, para resolveres esse problema, deves criar um ficheiro dummy com o nome readme.txt (vazio) antes de carregares (upload) as pastas.

Não te esqueças de respeitar as boas práticas, nomeadamente no que diz respeito ao nome dos ficheiros: sem maiúsculas, sem acentos e sem espaços.

Volta a ler e tenta cumprir a lista de Boas práticas.