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 a pasta do site no Visual Studio Code e, em seguida, abra o index.html arquivo selecionando-o no Explorer.

  2. index.html Na página, digite html:5e 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, experimente fechar e reabrir o arquivo.

  3. Edite o código de modelo para que ele fique parecido com o mostrado a seguir. Em seguida, 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 este 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 meta marca indica informações de metadados que normalmente não são visíveis para o visualizador, a menos que eles exibam o código-fonte no navegador. 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 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 lição deste exercício é que o código 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 aparece na parte superior de uma janela do navegador e é significativo em muitos aspectos. 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. Escrever CSS na página HTML é chamado 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 CSS separada é chamado 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 código CSS replicado, você pode fazer alterações em um único arquivo CSS e aplicar 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 <title> elemento, digite linke selecione Enter. O Visual Studio Code deve adicionar a seguinte linha 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>Simple website</title>
  <link rel="stylesheet" href="main.css">
</head>
...

Editar o corpo

Vamos começar a preencher o elemento <body> agora.

O elemento <body> contém o conteúdo do seu site que está visível para seus clientes em seus navegadores.

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

  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>

Você pode usar um atributo ID (usado no elemento <p>) para estilizar um único elemento, enquanto o atributo classe (usado no elemento <li>) é para estilizar todos os elementos da mesma classe.

Antes da próxima etapa, verifique se o 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 index.html direito do mouse e selecione Abrir no Navegador Padrão ou selecione o index.html arquivo e use o atalho de teclado Alt+B.

    Captura de tela do item de menu de contexto

    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 uma caixa de diálogo do Visual Studio Code for exibida, selecione Sim, confio nos autores; esse é o recurso de Confiança do Workspace que permite que você decida se suas pastas de projeto devem 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 as Ferramentas de Desenvolvedor 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 para Ferramentas de Desenvolvedor, que é F12.

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

    Esses atalhos de teclado funcionam no Microsoft Edge, Chrome e Firefox. Se você estiver usando o Safari, consulte as Ferramentas de Desenvolvimento na Web. Quando instalado, selecione Preferências do Safari >e selecione 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 ferramentas de desenvolvedor e os principais recursos disponíveis, confira o artigo Visão geral do DevTools.

  2. Selecione a guia Elementos .

    Captura de tela mostrando uma janela do navegador com o site e as Ferramentas de Desenvolvedor ao lado dela com a guia Elementos selecionada.

  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.