WDD 130: Fundamentos da Web

S01 Atividade de Aprendizagem: Introdução ao HTML

Visão Geral

Cada vez que você acessa uma página web no navegador, seu computador envia uma solicitação a um servidor na internet. O servidor responde enviando de volta um arquivo que seu computador renderiza ou exibe no navegador. Tecnicamente, o servidor pode enviar qualquer tipo de arquivo, mas o mais comum é o HTML, que é uma ótima maneira de estruturar as informações para que elas possam ser exibidas corretamente no navegador.

Diagrama do ciclo de vida da solicitação e resposta
O usuário solicita uma página web ao servidor, que responde com um documento, provavelmente no formato HTML.

HTML significa Linguagem de Marcação de Hipertexto, ou HyperText Markup Language, em inglês, e é uma das três principais tecnologias da web: HTML, CSS e JavaScript. Neste curso, você aprenderá os fundamentos de HTML e CSS para poder criar sites eficazes e com aparência profissional.

O HTML define a estrutura e o significado de um documento web. Hipertexto se refere à maneira como os links de hipertexto são colocados no documento, permitindo que os usuários naveguem de uma página para outra. Marcação é um conjunto de símbolos ou códigos para exibir conteúdo na Internet. Navegadores da Web, como o Google Chrome, usam marcação e conteúdo HTML para renderizar páginas.

Preparação

Assista aos vídeos a seguir para saber mais sobre HTML:

Vídeo: ▶️ O que é HTML?

Vídeo: ▶️ Elementos e Atributos HTML

Estrutura básica da página

Como mostrado nos vídeos, existem vários elementos HTML. Você começará aprendendo sobre os elementos mais fundamentais e depois aprenderá sobre outros ao longo do curso. Abaixo está um exemplo de um arquivo HTML simples: 


<!DOCTYPE html>
<html lang="pt-br">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Minhas Coisas Favoritas</title>
  </head>
  <body>
    <h1>Coisas Favoritas</h1>
    <p>Veja uma lista de algumas das minhas coisas favoritas.</p>
    <p>Eu amo minha família e o templo. Aqui estão algumas fotos deles:</p>

    <img src="imagens/familia.jpg" alt="Minha Família">
    <img src="imagens/templo-de-salt-lake.jpg" alt="Templo de Salt Lake.">
  </body>
</html>

Conforme mostrado no exemplo, a estrutura básica de uma página web é ter um elemento HTML, ou tag, que define a página inteira e contém duas seções principais, head e body. Observe que os elementos head e body ficam entre as tags HTML de abertura e fechamento: <html> ... </html>. É assim que você define que eles estão contidos no elemento html. Eles também são recuados para facilitar o reconhecimento da estrutura pelas pessoas.

A tag html base deve definir um atributo com o idioma da página, como: <html lang="pt-BR"> ... </html>. (Há um conjunto padrão de abreviações de idiomas, incluindo pt para português ou pt-BR para português brasileiro.)

Seção Head

O elemento head deve conter os seguintes elementos filhos para ajudar a definir propriedades importantes da página:

Seção Body

O elemento body contém todo o conteúdo que você deseja exibir na página. Para algumas páginas, pode ser pequeno e simples, e para outras, pode ser grande e complexo. Tudo depende do conteúdo que você quer que o usuário veja.

Os seguintes elementos do exemplo acima são comuns e frequentemente usados em body:

Instruções da Atividade

Nesta atividade, você revisará os conceitos essenciais de HTML e, em seguida, atualizará uma página HTML.

Revise os Conceitos Essenciais de HTML

Responda às seguintes perguntas sobre HTML e pondere as soluções fornecidas.

  1. Os seguintes elementos HTML são necessários para todas as páginas HTML criadas neste curso.

    Qual é a finalidade de cada um dos seguintes elementos HTML? 
    • <!DOCTYPE html>
      Resposta

      Este é um componente necessário no início da página/documento para informar ao navegador qual versão do HTML está sendo usada.

      Nos primórdios da internet, havia diferentes tipos de documentos que podiam definir as regras exigidas por uma versão específica. Hoje em dia, isso não é tão importante, pois toda página HTML que você criar terá esse elemento, mas é bom incluí-lo sempre para garantir que sua página funcione corretamente.

      ✔ Este é um item da lista de verificação de desenvolvimento. A lista de verificação de desenvolvimento é uma lista de componentes necessários que devem ser incluídos em cada tarefa que você enviar neste curso.

    • <html lang="pt-BR"> ... </html>
      Resposta

      Este elemento envolve todo o conteúdo da página inteira, o que significa que todo o resto deve estar dentro dele. Às vezes é conhecido como elemento raiz, porque é como a raiz de uma árvore de onde tudo cresce. Possui um atributo lang para especificar o idioma principal da página.

      ✔ Este elemento, junto com o atributo de idioma, é um item da lista de verificação de desenvolvimento. 

    • <head> ... </head>
      Resposta

      O elemento head contém informações sobre a página. O conteúdo desta seção não é exibido na página em si, mas feito para ser lido pelo computador para fornecer informações (metadados) sobre o documento, como conjunto de caracteres, tamanho da janela de visualização, título, scripts e folhas de estilo.

      ✔ Este é um item da lista de verificação de desenvolvimento.

    • <meta charset="utf-8">
      Resposta

      Localizado dentro do elemento <head>, o atributo meta charset define a codificação de caracteres do documento, ou seja, a forma como o texto é representado nos dados binários armazenados pelo computador. No passado, várias codificações de caracteres podiam ser usadas para diferentes idiomas, como aquelas com acentos ou caracteres chineses. HTML 5 (o padrão atual) requer "utf-8" para todos os documentos HTML.

      ✔ Este é um item da lista de verificação de desenvolvimento.

    • <meta name="viewport" content="width=device-width,initial-scale=1.0">
      Resposta

      Localizado dentro do elemento <head>, o atributo meta viewpoint garante que a página seja renderizada na largura correta, para evitar que navegadores em dispositivos móveis renderizem a página maior do que o necessário e depois a encolham.

      ✔ Este é um item da lista de verificação de desenvolvimento.

    • <title>...</title>
      Resposta

      Localizado dentro do elemento <head>, o elemento title define o título da sua página, que será exibido na aba do navegador ou quando você adicionar uma página aos favoritos.

      Esse título não aparece diretamente na página em si, mas deve corresponder exatamente ao conteúdo incluído no elemento título 1, <h1>, no elemento <body> do documento.

      ✔ Um elemento title com um título significativo é um item da lista de verificação de desenvolvimento. 

    • <body> ... </body>
      Resposta

      O elemento <body> contém o conteúdo principal do documento HTML. Só pode haver um elemento body em um documento. Ele abriga todo o conteúdo que você deseja mostrar aos usuários quando eles acessam sua página, incluindo texto, imagens, vídeos e qualquer outra coisa que você queira que os usuários vejam.

      ✔ Este é um item da lista de verificação de desenvolvimento.

  2. Qual é a anatomia básica, ou a estrutura das tags básicas, de um documento HTML?
    Resposta 
    <!DOCTYPE html>
<html lang="pt-BR">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>Título do Documento Relevante</title>
  </head>
  <body>
  
  </body>
</html>
  3. Usando o seguinte snippet de HTML de exemplo, quais são as definições de cada uma das partes numeradas listadas abaixo? 
    <p>Um parágrafo contendo um hiperlink para <a href="https://www.byupathway.edu">BYU Pathway</a>.</p>
    1. <p>
    2. </p>
    3. href
    4. "Um parágrafo contendo um hiperlink para BYU Pathway Worldwide".
    5. O snippet completo.
    Respostas
    1. tag de abertura ou início de um elemento de parágrafo.
    2. tag de fechamento ou final de um elemento de parágrafo.
    3. atributo. O valor deste atributo href, https://www.byupathway.edu/pt/, especifica o destino da tag âncora <a> ou o lugar para onde você irá se clicar no link.
    4. O conteúdo do elemento de parágrafo.
    5. Um elemento de parágrafo HTML que contém texto e um hiperlink.
  4. Por que alguns elementos, como <img>, não contêm uma tag de fechamento?
    Resposta

    Essas tags são chamadas de elementos vazios ou tags de fechamento automático. Elas não exigem uma tag de fechamento, pois não se pode incluir nada dentro delas — todas as informações necessárias são fornecidas pelos atributos.

    Antigamente, essas tags de fechamento automático podiam ser escritas com uma barra no final, como: <img />. Mas a recomendação atual na Web é NÃO incluir a barra no final.

    A seguir está um exemplo correto de uma tag de imagem de fechamento automático:

    <img src="imagens/amostra.png" alt="Uma imagem de amostra">

    Nesta aula, seguimos recomendações atuais e NÃO incluímos uma barra de fechamento (/) na tag do elemento vazio, mesmo que isso funcione em todos os navegadores.

Atualize uma Página HTML

Atualize uma página HTML para incluir seu próprio conteúdo.

  1. No seu computador, abra o VS Code.
  2. No VS Code, abra a pasta wdd130 se ela ainda não estiver aberta.
  3. No explorador de arquivos e pastas do VS Code, navegue até semana01/primeira-pagina.html e abra-o. Você deverá ver algo parecido com o seguinte:
    Captura de tela do painel Explorador do VS Code mostrando arquivos e pastas
    Captura de tela do VS Code mostrando o arquivo HTML.
  4. Clique com o botão direito do mouse no arquivo primeira-pagina.html no painel esquerdo e selecione Abrir no Live/Five Server. Isso deve abrir sua página em uma nova aba do navegador.
    Captura de tela do VS Code mostrando a opção Live/Five Server
    Exibição da opção Abrir com Live/Five Server.
  5. Atualize a página adicionando sua cor favorita dentro das tags <p> ... </p> onde indicado.
  6. Adicione outra tag <p> com o texto: Estou aprendendo desenvolvimento web!
  7. Salve sua página e visualize-a novamente no navegador. Certifique-se de que consegue visualizar o próximo texto adicionado.
    Sua página deverá ficar mais ou menos assim:
    Captura de tela da atividade concluída
    Captura de tela da atividade concluída.
  8. Fique à vontade para experimentar e adicionar outras coisas a essa página HTML.

Envio

Para esta atividade de aprendizagem, você ainda não precisa enviar nada. Quando terminar as atividades de aprendizagem restantes desta semana, você precisará voltar ao Canvas para relatar seu progresso.