Exercício: Criar uma página HTML

  • 5 minutos

Neste exercício, você começará a criar a página da Web para seu currículo. Você começará adicionando algumas informações de alto nível, como seu nome e cabeçalhos de seção. Você também adicionará alguns comentários, que usaremos como marcadores de onde adicionar informações em um exercício posterior.

Este exercício usa vscode.dev – uma versão baseada na Web do Visual Studio Code e do CodeSwing. Essas ferramentas ajudam a simplificar o processo de desenvolvimento. Nenhuma instalação local é necessária para concluir os exercícios a seguir.

Criar uma página HTML com CodeSwing

Você começará criando uma pasta, configurando suas ferramentas e criando um "swing" usando o CodeSwing em vscode.dev. Um swing exibe automaticamente os resultados do código que você cria em vscode.dev. Isso permite que você faça modificações rapidamente, e as atualizações ocorrerão em tempo real.

O vídeo a seguir demonstra como instalar o CodeSwing no Visual Studio Code. Essas etapas também fazem parte dos passos do exercício.

  1. Crie uma pasta na área de trabalho nomeada como currículo.
  2. Abra vscode.dev.
  3. Selecione Abrir Pasta.
  4. Navegue até a pasta de currículo que você criou anteriormente e selecione Selecionar Pasta.
  5. Quando solicitado a Permitir que o site visualize arquivos, selecione Exibir Arquivos.
  6. Selecione o botão Extensões .

    Captura de tela do ícone Extensões.

  7. Na caixa de texto Extensões de Pesquisa no Marketplace , digite CodeSwing.
  8. Selecione Instalar para instalar o CodeSwing.
  9. Abra a Paleta de Comandos selecionando Ctl-Shift-P ou Cmd-Shift-P em um Mac.
  10. Digite CodeSwing na Paleta de Comandos e selecione CodeSwing: New Swing in Directory....
  11. Selecione Selecionar Pasta para usar o diretório atual (que é o que você criou em uma etapa anterior).
  12. Selecione Básico: Somente HTML.
  13. Quando solicitado a Salvar alterações para retomar , selecione Salvar alterações.

O Visual Studio Code cria duas janelas lado a lado. A esquerda será seu editor, onde você poderá inserir seu HTML. A direita se comporta como um navegador, exibindo os resultados do código HTML.

Adicionar HTML para criar a estrutura da sua página

Em seguida, você adicionará o HTML para criar a estrutura da sua página. Você criará os três elementos principais de html, head e body. Dentro do body, você adicionará uma seção que conterá informações gerais sobre você, como seu nome e informações de mídia social. Em seguida, você adiciona seções que listam sua educação e experiência.

O vídeo a seguir demonstra como criar HTML no Visual Studio Code e ter a renderização de código no CodeSwing. Essas etapas também fazem parte dos passos do exercício.

Fique à vontade para substituir Seu nome pelo seu nome. Em outros exercícios, você criará listas e links para seu endereço de email, identificadores de mídia social e educação e experiência.

Depois de adicionar o código, você examinará qual código foi adicionado.

  1. Dentro index.html, adicione o seguinte HTML:
<html>
<head>
  <title>Your Name resume</title>
</head>
<body>
  <h1>My Name</h1>
  <!-- email address -->
  <h2>Social Media</h2>
  <!-- social media -->
  <h2>Education</h2>
  <!-- education -->
  <h2>Experience</h2>
  <!-- experience -->
</body>
</html>

Cada um dos elementos no HTML faz coisas específicas. A tabela a seguir descreve as marcas usadas em seu HTML e como o navegador as entende.

Etiqueta Descrição
<html> A marca "contêiner" para todo o documento HTML. Todas as outras tags são escritas dentro do elemento HTML.
<head> O contêiner de cabeçalho. O cabeçalho normalmente inclui referências a outros arquivos de que a página ou o site precisa. Ele também pode incluir dados que os mecanismos de pesquisa e sites de mídia social usam para localizar melhor seu site.
<body> Essa marca cria o contêiner do corpo para a página da web. A maioria dos elementos de exibição vão no elemento corpo.
<div> A tag de divisão cria uma seção em HTML. As seções geralmente têm conteúdo semelhante ou relacionado entre si.
<h1> - <h6> São tags de cabeçalho. Eles dão alguma estrutura ao documento HTML. Eles instruem o navegador para formatar o texto contido entre essas tags de forma específica para mostrar essa hierarquia.
<!-- comment text --> Essas tags são comentários em HTML. Eles não criam saída renderizada. Eles são usadas principalmente por desenvolvedores para facilitar a localização, o compartilhamento e a compreensão do código.
/* CSS comment */ Essas marcas de comentário são usadas em Folhas de Estilo em Cascata.
  1. Conforme você digita, a página é atualizada automaticamente; o resultado final é semelhante à imagem a seguir:

Captura de tela da estrutura do currículo.

Revisando o código

Cada página HTML tem html como elemento principal raiz, com todo o conteúdo contido dentro dela. html normalmente tem dois filhos diretos, head que contêm metadados e body que contêm as informações a serem exibidas.

Observe como você usa apenas um h1 elemento para seu nome e h2 elementos para cabeçalhos para cada uma das seções. Isso é para ajudar a realçar as partes mais importantes da página. Seu nome é a informação mais importante na página; assim, ele obtém destaque superior com h1.

Por fim, há comentários para endereço de email, mídia social, educação e experiência. Eles estão sendo usados como espaços reservados e serão substituídos em um exercício posterior neste módulo.