WDD 130: Fundamentos da Web

S01 Tarefa: Página Inicial do Estudante

Visão Geral

Nesta tarefa, você usará o que aprendeu para criar sua página inicial básica em HTML.

Instruções

  1. No VS Code, abra sua pasta wdd130 usando Arquivo > Abrir Pasta...
  2. Encontre e abra o arquivo index.html na sua pasta raiz (diretamente na pasta wdd130, não em uma subpasta como semana01). Esta será sua página inicial do curso.
    Por que nomeamos o arquivo index.html?

    index.html (ou index.html) é um nome de página padrão em servidores web que será carregado por padrão, a menos que seja alterado pelo administrador do servidor web. Esta página será carregada se a pasta que contém a página index.html for referenciada em um URL.

    Tente você mesmo. Em uma janela do navegador, acesse ibm.com e depois ibm.com/index.html.
    A mesma página será carregada no seu navegador.

  3. Observe que o arquivo index.html já contém os elementos essenciais de uma página HTML. Sua tarefa é fazer alterações nessa página para que ela contenha suas informações e seja específica para você.
  4. Sua página inicial deve conter os seguintes elementos (eles já foram fornecidos para você nesta primeira tarefa):
    • o tipo de documento;
    • o elemento html com atributo de idioma;
    • o elemento head dentro das tags de abertura e fechamento do elemento html; e
    • o elemento body dentro do elemento html e depois de head.
    • No elemento head, inclua os seguintes itens das informações meta necessárias:
      • Atributo meta charset
      • Elemento meta viewport
      • Elemento title
  5. Defina o conteúdo de title, como [Seu Nome Completo] | WDD 130, em que [Seu Nome Completo] é substituído pelo seu nome completo real e preferido.
    Avalie Seu Conhecimento 
                    <!DOCTYPE html>

<html lang="pt-BR">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>Xavier Rodriquez | WDD 130</title>
  </head>
  <body>

  </body>
</html>
  6. Dentro do elemento body, inclua três elementos filhos:
    • header
    • main
    • footer
    <!DOCTYPE html>
<html lang="pt-BR">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>Xavier Rodriquez | WDD 130</title>
  </head>
  <body>
    <header>

    </header>
    <main>

    </main>
    <footer>
    
    </footer>
  </body>
</html>
  7. Dentro do elemento header, adicione um elemento nav com tag de âncora a, com os seguintes valores de atributo href. O link do site de rafting será usado em uma tarefa futura, então prepare-se agora criando um link para esta página futura, mesmo que isso não funcione ainda.

    O valor # para o link âncora href da Página Inicial se refere à página atual e não recarregará a página. Esse é o comportamento e a estrutura que queremos.

    O vídeo a seguir demonstra como criar a página do zero para revisar as tags HTML essenciais. Seu arquivo index.html já conterá isso e só precisará ser modificado conforme descrito nas instruções.

    Vídeo: ▶️ Criando a Estrutura Básica

  8. Dentro do elemento main:
    • adicione um elemento de título h1 que contenha Seu Nome Completo | WDD 130
    • adicione um elemento img com os seguintes atributos:
      • src: O elemento src especifica o URL do arquivo de imagem. Consiste no caminho e no nome do arquivo com sua extensão. Use o seguinte caminho: src="imagens/perfil.___", em que ___ será sua extensão de arquivo.
      • alt: O atributo alt é necessário como parte da acessibilidade para incluir texto alternativo que será exibido se a imagem não for renderizada pelo navegador. Vá em frente e inclua seu nome no texto alternativo.
      • width: Defina a largura inicial do layout da imagem como 200.
    • adicione um elemento de parágrafo p que contenha informações que você deseja compartilhar sobre si.
    Seu techo de código deve ficar parecido com esse: 
    <main>
  <h1>Xavier Rodriquez | WDD 130</h1>
  <img src="imagens/perfil.jpg" alt="Olá, meu nome é Xavier Rodriquez" width="200">
  <p>Olá! Meu nome é Xavier Rodriquez e sou de Piura, Peru. Eu gosto de... </p>
</main>
  9. Encontre uma foto sua e adicione-a à pasta de imagens. Certifique-se de otimizar essa imagem para a web, conforme descrito nas atividades de aprendizagem.
    1. Os tipos de arquivo de imagem aceitáveis para esta tarefa são:
      • png
      • webp
      • jpg
    2. O tamanho do arquivo da imagem não deve exceder 100 kB. Lembre-se de otimizar a imagem para que ela fique rápida de carregar.
  10. Renomeie o arquivo de imagem para perfil e use a extensão do seu arquivo de imagem (por exemplo, perfil.jpg ou perfil.png).
    Avalie Seu Conhecimento 
    <main>
  <h1>Xavier Rodriquez | WDD 130</h1>
  <img src="imagens/perfil.jpg" alt="Olá, meu nome é Xavier Rodriquez" width="200">
  <p>Olá! Meu nome é Xavier Rodriquez e sou de Piura, Peru. Eu gosto de... </p>
</main>

    O arquivo de imagem não está sendo exibido? Pode haver um problema nos caminhos dos arquivos. Consulte a Atividade de Aprendizagem sobre Arquivos e Pastas para ajudar a resolver o problema.

    Vídeo: ▶️ Adicionando o Conteúdo Principal

  11. Dentro do elemento de rodapé footer, adicione um elemento de parágrafo p. O parágrafo deve conter o seguinte:
    • O símbolo de direitos autorais © e o ano dos direitos autorais.

      Para exibir o símbolo de direitos autorais, use a entidade HTML &copy;
      ou use um emoji integrado.

      Para exibir o menu de emojis, faça o seguinte:

      • Windows/Linux: Segure a tecla 🪟 window no seu teclado e pressione ponto final (.)
      • macOS: Mantenha pressionadas as três teclas a seguir ao mesmo tempo: Command+Control+Barra de Espaço ou pressione a tecla fn.
    • Seu nome.
    • Seu estado ou país.
    Cada um desses itens no rodapé será separado pela sintaxe de sua escolha.
    Seu código deve ficar parecido com esse: 
    <footer>
  <p>©️2025 🌴 Xavier Rodriquez 🌴 Piura, Perú</p>
</footer>
    ou, usando entidades HTML de &copy; (©) e &#10070; (❖): 
    <footer>
  <p>©2025 ❖ Xavier Rodriquez ❖ Piura, Perú</p>
</footer>
  12. Verifique sua página renderizada clicando com o botão direito do mouse no nome do arquivo index.html no painel Explorador e selecionando Abrir com Live/Five Server ou usando o item de menu na parte inferior do VS Code. O Live/Five Server abrirá a página no seu navegador padrão no localhost.
    Atalho para Abrir com Live/Five Server
    Atalho de Menu Abrir com Live/Five Server

    Vídeo: ▶️ Usando o Live Server

    Exemplo Completo

    <!DOCTYPE html>
<html lang="pt-BR">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>Xavier Rodriquez | WDD 130</title>
  </head>
  <body>
    <header>
      <nav>
        <a href="#">Página Inicial</a>
        <a href="wwr/">Site de Rafting</a>
      </nav>
    </header>
    <main>
      <h1>Xavier Rodriquez | WDD 130</h1>
      <img src="imagens/perfil.jpg" alt="Olá, meu nome é Xavier Rodriquez" width="200">
      <p>Olá! Meu nome é Xavier Rodriquez e sou de Piura, Peru. Eu gosto de... </p>
    </main>
    <footer>
      <p>©2025 🌴 Xavier Rodriquez 🌴 Piura, Perú</p>
    </footer>
  </body>
</html>
    Exemplo de Página Inicial do Curso do Estudante
    Captura de Tela do Exemplo de Página Inicial do Curso do Estudante
  13. Confirme (commit) e envie (push) seu código para o repositório no GitHub.
    1. Selecione a aba Controle de Código-Fonte no VS Code.
    2. Insira uma mensagem de commit.
    3. Sincronize as alterações com o GitHub.
  14. Verifique seu trabalho visualizando o site no servidor GitHub. Você pode visualizar o site digitando o seguinte URL em um navegador: https:seu-nomedeusuario.github.io/wdd130 (certifique-se de substituir seu-nomedeusuario pelo seu nome de usuário real).
  15. Certifique-se de executar a ferramenta de Auditoria de Página descrita abaixo e corrigir quaisquer problemas.

Execute a Ferramenta de Auditoria de Página

Cada tarefa neste curso terá uma ferramenta de Auditoria de Página que será usada pelos avaliadores. Você deve sempre executá-la antes de enviar sua tarefa. Se a ferramenta de Auditoria de Página não funcionar ou mostrar erros, você deverá corrigir esses problemas e executá-la novamente antes de enviar a tarefa.

Se a ferramenta de Auditoria de Página não for executada ou mostrar erros, você não receberá o crédito total pela sua tarefa. Você precisa corrigir os erros antes de enviar seu trabalho.

  1. Abra ✔ ferramenta de Auditoria de Página em S01 Tarefa.
  2. Digite seu nome de usuário do GitHub na janela exibida e clique em Executar Relatório.
  3. A Auditoria de Página deve gerar um relatório com símbolos de conferido verdes ✅ e X vermelhos ❌, semelhante à captura de tela a seguir:
    Exemplo de resultado da ferramenta de Auditoria de Página
    Exemplo de resultado da ferramenta de Auditoria de Página.
  4. Revise com atenção cada item no relatório da ferramenta de Auditoria de Página.
    • Se um item tiver um X vermelho ❌ ao lado dele, você precisa corrigir o problema.
    • Se um item tiver o ícone de olhos 👀 ao lado dele, significa que é necessário realizar verificação manual, ou seja, você precisa conferir por conta própria.
  5. Se você fez alterações, salve seus arquivos, confirme (commit) e envie (push) seu código para seu repositório GitHub e execute a Ferramenta de Auditoria de Página novamente para garantir que os problemas tenham sido corrigidos.

Caso encontre algum problema ou não tenha certeza de como corrigir um item indicado como incorreto, peça ajuda no Microsoft Teams, usando o canal Fórum da Semana 01.

Envio

Depois de terminar sua tarefa e executar a ferramenta de Auditoria de Página sem erros, seu trabalho poderá ser enviado.

  1. Volte ao Canvas para enviar o URL da sua página inicial do GitHub Pages.

    Certifique-se de enviar o URL da sua página inicial que é renderizada em um navegador usando o GitHub Pages. Não envie o URL do seu repositório do GitHub nem de uma instância local (localhost).

    • ✅ URL correto para envio: https://seu-nomedeusuario.github.io/wdd130

      Lembre-se de substituir seu-nomedeusuario pelo seu nome de usuário real do GitHub

    • ❌ Envio errado: https://github.com/seu-nomedeusuario/wdd130
    • ❌ Envio errado: http://127.0.0.1:5506/docs/index.html