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

  • 10 minutos

No momento, seu site tem um arquivo HTML vazio. Vamos adicionar algum código! O objetivo é usar a linguagem de marcação de hipertexto (HTML) para descrever a página da Web que os navegadores de seus clientes devem exibir. Não seria bom ter um modelo inicial? Os editores podem preencher convenientemente algumas das típicas estruturas clichês ou HTML para você.

Nesta unidade, você adiciona conteúdo HTML básico, abre a página HTML em um navegador e dá sua primeira olhada nas ferramentas de desenvolvedor.

Adicionar algum código HTML

Visual Studio Code fornece suporte básico para programação HTML pronto para uso. Há realce de sintaxe, completações inteligentes com 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, escreva html:5e, em seguida, selecione Enter. O código do modelo HTML5 é adicionado ao arquivo.

    Nota

    Se o código do modelo HTML5 não for adicionado ao index.html arquivo, tente fechá-lo e reabri-lo.

  3. Edite o código do modelo para que ele seja semelhante ao seguinte. 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>

Houve diferentes versões do HTML. O doctype<!DOCTYPE html> indica que este documento HTML contém código HTML5.

Embora não nos aprofundemos no significado de todos os elementos HTML, queremos destacar alguns itens importantes. A meta tag indica informações de metadados que normalmente não são visíveis para o visualizador, a menos que ele visualize o código-fonte em seu navegador. Meta elementos ou tags fornecem informações descritivas sobre a página da Web. Por exemplo, eles ajudam os mecanismos de pesquisa a processar quais informações em suas páginas da Web devem retornar nos resultados de 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, isso pode levar a uma segurança comprometida. Há um pouco de história e informações técnicas por trás do atributo charset, mas a conclusão importante deste exercício é que o clichê de código do Visual Studio fornece alguns padrões sensatos.

Editar o cabeçalho

O <head> elemento em seu código HTML contém informações sobre seu site nã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 aspetos. Por exemplo, o título é usado e exibido nos motores de busca. Vamos adicionar um título.

Importante

A partir deste ponto, as reticências (...) indicam que o código previamente declarado precede ou segue. Deve haver código suficiente fornecido como contexto para fazer as alterações necessárias ou atualizar seu trabalho, mas você não deve copiar e colar as reticências em seu código.

  1. No editor, modifique o <title> elemento para que ele se assemelhe 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 de CSS interno. No entanto, é uma prática recomendada separar a estrutura HTML e o estilo CSS. Ter uma página CSS separada é chamado CSS externo. O código tende a ser mais fácil de ler quando é conciso e compartimentado. Você pode usar uma ou mais folhas de estilo externas para fazer a manutenção de 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 de código do Visual Studio, adicione uma linha em branco após o <title> elemento, digite linke selecione Enter. Visual Studio Code deve adicionar a seguinte linha ao seu index.html arquivo.

    <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 <body> elemento agora.

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

  1. Dentro do <body> elemento , adicione um elemento title<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 seu código, ou copie e cole, para que ele se pareça com o exemplo 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 <p> elemento ) para estilizar um elemento, enquanto o atributo class (usado no <li> elemento) é 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 começa com https://, seu navegador aponta para o caminho do arquivo local, que deve ser semelhante ao C:/dev/simple-website/index.html.

  • Para visualizar usando o Visual Studio Code, clique index.html com o botão 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 do item de menu de contexto

    Importante

    Se estiver a ter problemas, certifique-se de que está a clicar diretamente no ícone do nome do ficheiro ou no texto. Se uma caixa de diálogo Código do Visual Studio for exibida, selecione Sim, confio nos autores; este é o recurso Confiança do Espaço de Trabalho que permite decidir se as pastas do projeto devem permitir ou restringir a execução automática de código. Você acabou de criar o arquivo, então é 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 tentar.

  1. Abra as Ferramentas de Desenvolvimento clicando com o botão direito do mouse na página da Web e selecionando Inspecionar, ou tente estes atalhos:

    • Pressione o atalho de teclado para Ferramentas de Desenvolvimento, 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 estiver a utilizar o Safari, consulte as Ferramentas de Desenvolvimento Web. Quando instalado, selecione Preferências do Safari >e, em seguida, selecione Avançado. Na parte inferior do painel, marque a caixa de seleção Mostrar menu Desenvolver na barra de menus . Selecione Desenvolver > e Mostrar o Inspetor da Web. Para obter mais informações, consulte a documentação do Safari Web Inspetor.

    Para saber mais sobre como abrir as Ferramentas de Desenvolvimento 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 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 nas ferramentas de desenvolvedor mostra o DOM (modelo de objeto do documento) conforme renderizado no navegador. Ao depurar, geralmente é importante ver como o navegador interpreta seu 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 visualizar os detalhes do CSS com o inspetor, como verá na próxima seção.