Criação de um Website com a HTML5
INTRUÇÕES GERAIS
Esta atividade deve ser realizada individualmente;
Utilize puramente a linguagem HTML5. Não é permitido o uso de tecnologias adicionais
como CSS, JavaScript, Bootstrap, etc. Trabalhos utilizando tais tecnologias serão anulados;
Sintaxe da XHTML como <img/> ou <br/> não é permitida (anulará o trabalho);
Os recursos adequados da linguagem HTML5 devem ser utilizados sempre que possível;
O website deve ser hospedado e disponibilizado online, conforme orientações
disponíveis no final deste documento;
Ao construir o website, utilize dados fictícios (jamais utilize dados pessoais como seu nome,
CPF, endereço, e-mail, etc);
Esteja atento às observações sobre plágio apresentadas no final desde documento;
Trabalhos com implementações utilizando trechos de códigos retirados de sites da
Internet ou de trabalhos de semestres anteriores serão anulados;
As páginas web não devem conter qualquer conteúdo de caráter imoral, desrespeitoso,
pornográfico, discurso de ódio, desacato, etc.;
O website deve ser validado utilizando a ferramenta disponível no endereço
[Link]. Não deve conter nenhum erro ou warning;
O trabalho deve ser entregue até a data/hora definida pelo professor. Não deixe para
enviar o trabalho nos últimos instantes, pois eventuais problemas relacionados à eventos
adversos como instabilidade de conexão, congestionamento de rede, etc., não serão aceitos
como motivos para entrega da atividade por outras formas.
Trabalhos enviados por e-mail ou pelo MS Teams não serão considerados.
Exercício 1
Crie um website utilizando puramente a linguagem HTML5 e o editor Visual Studio Code para exibir
informações fictícias de um currículo vitae. O website deve conter duas páginas:
1. Uma página principal ([Link]) contendo as informações gerais do currículo
2. Uma página complementar ([Link]) para exibir detalhes sobre a experiência
profissional do autor do currículo
A página principal do website deve se apresentar como na figura modelo a seguir. As duas
páginas devem ser construídas seguindo as orientações e restrições descritas na sequência.
Figura 1 – Exercício 1 - Página Principal ([Link])
Requisitos e restrições
1. Apenas os elementos da HTML listados a seguir são permitidos:
a. <html>, <body>, <head>, <title>, <meta>
b. <h1>, <h2>, <p>, <b>, <strong>, <i>, <em>
c. <img>, <a>, <hr>, <br>, <ol>, <ul>, <li>, <address>
2. O website deve ser organizado a partir de uma pasta raiz de nome ex1, a qual deve conter os
arquivos [Link], [Link] e uma subpasta de nome images contendo os
arquivos de imagens necessários;
3. Nas duas páginas, a aba do navegador deve apresentar o texto: “Currículo de Fulano de Tal”;
4. A foto do autor do currículo na página principal deverá aparecer antes do nome, conforme
modelo apresentado acima, no tamanho 120 x 120 pixels. Utilize a foto de um avatar. Não
utilize foto própria;
5. Utilize o elemento <h1> para inserção do nome do autor e elementos <h2> para os títulos
relativos às seções do currículo (Perfil, Principais Competências, Formação Acadêmica, etc.). As
partes devem ser separadas por elementos <hr>.
6. A seção Perfil deve ter pelo menos dois parágrafos;
7. A seção Principais Competências deve ter uma lista não ordenadas com pelo menos 5 itens;
8. A seção Formação Acadêmica deve ter um conteúdo similar ao apresentado na figura,
contendo pelo menos dois links para sites de universidades;
9. A seção Experiência Profissional deve ser organizada como apresentada na figura. Deve
conter listas não ordenadas aninhadas com uma lista ordenada;
10. No final da seção Experiência Profissional deve haver um hiperlink que dê acesso à segunda
página ([Link]), que por sua vez deverá exibir informações detalhadas sobre a
experiência profissional do autor do currículo. A página [Link] pode ser
confeccionada de forma livre, porém não deve conter código CSS nem elementos da HTML
que não estejam na lista indicada acima. Além disso, no final da página deve haver um
hiperlink que permita ao usuário voltar à página principal;
11. A seção Contato deve conter informações de contato do autor do currículo e deve se
apresentar como na figura acima. Utilize os elementos adequados da HTML5. Repare que
há uma imagem antes do endereço, outra antes do telefone e outra antes do e-mail. Tais
imagens devem não precisam ser iguais àquelas do modelo, mas os tamanhos de exibição
devem ser ajustados com os devidos atributos (30 x 30 pixels). O e-mail deve ser
apresentado como um link para e-mail e o telefone como um link para telefone (veja
material de aula);
12. Faça a validação do código HTML utilizando a ferramenta disponível no endereço
[Link].