Exercício – Adicionar um HTML básico ao seu aplicativo Web

  • 10 minutos

No momento, seu site tem um arquivo HTML vazio. Vamos adicionar um pouco de código! A meta é usar HTML (linguagem de marcação de hipertexto) para descrever a página da Web que os navegadores dos clientes exibirão. Não seria ótimo ter um modelo inicial? Editores podem convenientemente preencher parte da estrutura HTML ou de texto clichê típica para você.

Nesta unidade, você adicionará o conteúdo HTML básico, abrirá a página HTML em um navegador e terá seu primeiro contato com as ferramentas de desenvolvedor.

Adicionar um código HTML

O Visual Studio Code fornece suporte Básico para programação HTML logo após a instalação. Há realce de sintaxe, conclusões inteligentes com o IntelliSense e formatação personalizável.

  1. Abra o seu site no Visual Studio Code e abra o arquivo index.html selecionando o arquivo index.html na janela do Gerenciador.

  2. Na página index.html, digite html:5 e selecione Enter. O código de modelo HTML5 é adicionado ao arquivo.

    Observação

    Se o código do modelo HTML5 não for adicionado ao arquivo index.html, tente fechar e reabrir o arquivo.

  3. Edite o código de modelo para que ele fique parecido com o mostrado a seguir. Depois, salve o arquivo selecionando Control+S no Windows ou Command+S no macOS.

    <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>

</body>
</html>

Tem havido versões diferentes de HTML. O doctype<!DOCTYPE html> indica que esse documento HTML contém código HTML5.

Não nos aprofundaremos no significado de todos os elementos HTML, mas queremos apontar alguns itens importantes. A marca meta indica informações de metadados que normalmente não ficam visíveis para o visualizador, a menos que ele use o próprio navegador para exibir o código-fonte. Metaelementos ou metamarcas fornecem informações descritivas sobre a página da Web. Por exemplo, ele ajuda os mecanismos de pesquisa a processar quais informações da suas páginas da Web devem ser retornadas nos resultados da pesquisa.

O conjunto de caracteres (charset) para UTF-8 pode parecer insignificante, mas é crucial para estabelecer o modo como os computadores interpretam os caracteres. Se os metadados do conjunto de caracteres estiverem ausentes, a segurança poderá ser comprometida. Há algum histórico e informações técnicas por trás do atributo de conjunto de caracteres, mas a principal conclusão deste exercício é que o clichê do Visual Studio Code fornece alguns padrões pertinentes.

Editar o cabeçalho

O elemento <head> no código HTML contém informações sobre o site que não estão visíveis dentro da guia do navegador.

Os metadados definem dados sobre o documento HTML, como conjunto de caracteres, scripts e em qual navegador a página da Web é aberta.

O título de uma página da Web é exibido na parte superior de uma janela do navegador e é significativo de muitas maneiras. Por exemplo, o título é usado por mecanismos de pesquisa e exibido neles. Vamos adicionar um título.

Importante

Deste ponto em diante, o botão de reticências (...) indica que o código declarado anteriormente precede ou segue. É necessário que uma quantidade suficiente de código seja fornecida como contexto para fazer as alterações ou atualizações necessárias para seu trabalho, mas não copie e cole as reticências em seu código.

  1. No editor, modifique o elemento <title> para que ele seja semelhante ao exemplo a seguir.

    ...
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Simple website</title>
...

Para aplicar estilos aos elementos HTML na página da Web, você pode escrever o código CSS diretamente no cabeçalho da página da Web. O CSS escrito na página HTML é chamado de CSS interno. No entanto, separar a estrutura HTML e o estilo CSS (folhas de estilos em cascata) é uma prática recomendada. Ter uma página de CSS separada é chamado de CSS externo. O código tende a ser mais fácil de ler quando ele é conciso compartimentalizado. Você pode usar uma ou mais folhas de estilos externas para atender a várias páginas da Web. Em vez de atualizar cada página HTML com o código CSS replicado, faça alterações em um único arquivo CSS e aplique essas atualizações a todas as páginas da Web dependentes. Vamos vincular a um arquivo CSS externo.

  1. No editor do Visual Studio Code, adicione uma linha em branco após o elemento <title>, digite link e selecione Enter. O Visual Studio Code deve adicionar a linha a seguir ao seu arquivo index.html.

    <link rel="stylesheet" href="">

  2. Atualize o href= para href="main.css" e salve o arquivo selecionando Control+S no Windows ou Command+S no macOS.

    ...
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Task List</title>
  <link rel="stylesheet" href="main.css">
</head>
...

Editar o corpo

Começaremos preenchendo o elemento <body> agora.

O elemento <body> contém o conteúdo do site que fica visível para os clientes nos navegadores.

  1. Dentro do elemento <body>, adicione um elemento de título<h1>, seguido por um elemento de parágrafo<p> e crie umalista não ordenada<ul> contendo vários elementos de item de lista<li>.

  2. Edite ou copie e cole seu código para que ele fique como no exemplo mostrado a seguir.

    <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Simple website</title>
    <link rel="stylesheet" href="main.css">
  </head>
  <body>
    <h1>Task List</h1>
    <p id="msg">Current tasks:</p>
    <ul>
      <li class="list">Add visual styles</li>
      <li class="list">Add light and dark themes</li>
      <li>Enable switching the theme</li>
    </ul>
  </body>
</html>

Um atributo de ID (usado no elemento <p>) pode ser empregado para estilizar um elemento, enquanto o atributo de classe (usado no elemento <li>) é usado para estilizar todos os elementos da mesma classe.

Antes da próxima etapa, verifique se o seu arquivo está salvo selecionando Control+S ou Command+S.

Abrir no navegador

Você pode visualizar sua página da Web localmente, abrindo o arquivo HTML em um navegador. Em vez de um endereço de site que comece com https://, o navegador apontará para o caminho do arquivo local, que será semelhante a C:/dev/simple-website/index.html.

  • Para visualizar usando o Visual Studio Code, clique com o botão direito do mouse em index.html e selecione Abrir no Navegador Padrão ou selecione o arquivo index.html e use o atalho de teclado Alt+B.

    Screenshot of the Open in Browser context menu item in Visual Studio Code.

    Importante

    Se estiver tendo problemas, verifique se você está clicando diretamente no ícone ou no texto do nome do arquivo com o botão direito do mouse. Se aparecer um diálogo do Visual Studio Code, selecione Sim, eu confio nos autores; esse é o recurso Confiança do Espaço de Trabalho que permite que você decida se suas pastas de projeto deverão permitir ou restringir a execução automática de código. Você acabou de criar o arquivo e, portanto, ele é seguro.

    A página da Web é aberta no navegador padrão.

Exibir a página usando ferramentas de desenvolvedor

Você pode inspecionar uma página da Web usando as ferramentas de desenvolvedor em seu navegador. Vamos experimentar.

  1. Abra Ferramentas para Desenvolvedores clicando com o botão direito do mouse na página da Web e selecionando Inspecionar ou experimente estes atalhos:

    • Pressione o atalho de teclado das Ferramentas para Desenvolvedores, que é F12.

    • Pressione Ctrl+Shift+I no Windows e Linux ou Option+Command+I no Mac.

    Esses atalhos de teclado funcionam no Microsoft Edge, no Chrome e no Firefox. Se você estiver usando o Safari, confira Ferramentas de Desenvolvimento para a Web. Quando instalado, selecione Safari > Preferências e Avançado. Na parte inferior do painel, marque a caixa de seleção Mostrar menu do Desenvolvedor na barra de menus. Selecione Desenvolver > Mostrar Inspetor da Web. Para obter mais informações, confira a documentação do Inspector da Web do Safari.

    Para saber mais sobre como abrir as Ferramentas para Desenvolvedores e sobre os principais recursos disponíveis, confira o artigo Visão geral do DevTools.

  2. Selecione a guia Elementos.

    Screenshot showing a browser window with the website, and the Developer Tools next to it with the Elements tab selected.

  3. Mova o mouse sobre os elementos HTML exibidos na guia Elementos e expanda o conteúdo dos vários elementos.

A guia Elementos das ferramentas para desenvolvedores mostra o DOM (Modelo de Objeto do Documento) como renderizado no navegador. Durante a depuração, geralmente é importante ver como o navegador interpreta o código-fonte.

Inspecionar a página em um navegador fornece todos os tipos de informações úteis e pode ajudá-lo a solucionar problemas. Você também pode exibir detalhes de CSS com o inspetor, como você poderá ver na próxima seção.