Liberte a Alegria de Ter um Animal de Estimação: Descubra a Pet's House

Introdução

Embarcamos numa jornada para criar um espaço online acolhedor para os amantes de animais de estimação. Nossa cena, Pet Paradise, apresenta um personagem, Alex the Innovator, que sonha em conectar os donos de animais através de um website vibrante e informativo. O objetivo de Alex é apresentar serviços para animais de estimação, compartilhar histórias e construir uma comunidade. Este cenário foi projetado para ser envolvente, guiando os alunos através do processo de transformar a visão de Alex em uma realidade digital.

Começaremos cobrindo os fundamentos do HTML com um pequeno projeto, enfatizando 3 laboratórios que o guiarão através do processo de criação de uma página web simples.

header animation example

Neste Lab, você criará a seção de cabeçalho e o layout da página inicial para "Pet's House". Esta seção é crucial para causar uma forte primeira impressão. O cabeçalho conterá o menu de navegação, e o layout inicial apresentará os visitantes ao website.

Este é um Lab Guiado, que fornece instruções passo a passo para ajudá-lo a aprender e praticar. Siga as instruções cuidadosamente para completar cada etapa e ganhar experiência prática. Dados históricos mostram que este é um laboratório de nível intermediário com uma taxa de conclusão de 66%. Recebeu uma taxa de avaliações positivas de 100% dos estudantes.

Estrutura do Documento HTML

Quando os usuários navegam na web através da Internet, eles encontram várias formas de conteúdo, incluindo texto, links, gráficos, imagens e muito mais.

Você já se perguntou como um navegador exibe o conteúdo desta página? Podemos pressionar F12 para visualizar o código-fonte da página, como mostrado na figura abaixo.

Da figura acima, podemos ver que todo o conteúdo do caractere está contido entre colchetes angulares < e >. Tal conteúdo é conhecido como tags, onde <> representa a tag de abertura e </> representa a tag de fechamento.

HTML é uma linguagem composta por elementos, que são representados por tags.

HTML (HyperText Markup Language) é o código que é usado para estruturar uma página web e seu conteúdo.

Hyper: "Hyper" contrasta com "Linear". Programas de computador anteriores eram principalmente lineares, o que significa que tinham que ser executados em ordem, de cima para baixo. Páginas web criadas com HTML, no entanto, permitem a navegação através de hiperlinks de uma página para outra.
Text: Ao contrário de linguagens de programação compiladas como C, C++ ou Java, HTML é uma linguagem de script baseada em texto. Seu código-fonte é interpretado e executado diretamente no navegador sem a necessidade de compilação.
Markup: O princípio fundamental do HTML é usar markup (tags compostas por pares de colchetes angulares) para descrever como o conteúdo da página web deve ser exibido em um navegador.
Language: HTML é uma linguagem, mas é interpretada em vez de compilada. Todas as suas tags de markup são traduzidas pelo navegador no resultado final exibido.

Nesta etapa, você começará configurando a estrutura básica de sua página web. Você criará um novo arquivo HTML chamado index.html no diretório /home/labex/project usando o comando touch ~/project/index.html. Abra este arquivo com seu editor de texto preferido e adicione a estrutura básica do documento HTML:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Pet's House</title>
  </head>
  <body>
    <!-- We'll add content here in the next steps -->
  </body>
</html>

A declaração <!DOCTYPE html> informa ao navegador que tipo de documento esperar.
O elemento <html lang="en"> é o elemento raiz do documento HTML.
O elemento <head> contém metadados (dados sobre o documento), como o título e o conjunto de caracteres.
O elemento <title> especifica o título da página web.
O elemento <meta charset="UTF-8"> especifica a codificação de caracteres para a página web.
O elemento <body> contém o conteúdo visível da página web.

Clique em Go Live no canto inferior direito do Environment para abrir a porta 8080 e clique em Web 8080 no canto superior esquerdo do Environment para visualizar os resultados da página.

Webpage preview in browser

Nota: A página atual não tem efeito porque o corpo está atualmente vazio, podemos ver o efeito da página quando aprendermos mais tags.

Elementos Semânticos

O layout de uma página web normalmente consiste em várias partes-chave, cada uma servindo a um propósito distinto para garantir que a interface do usuário seja limpa e funcional:

Header (Cabeçalho): Esta é a área superior da página web, geralmente contendo o logotipo do site, o menu de navegação, links de login/registro, etc. O cabeçalho é uma das primeiras coisas que um usuário percebe, por isso geralmente é projetado para ser proeminente, fornecendo acesso fácil à navegação.
Navigation Bar (Barra de Navegação): Embora a barra de navegação possa fazer parte do cabeçalho, em alguns designs, ela também pode ser uma seção separada localizada na parte superior, lateral ou inferior da página. A barra de navegação oferece acesso rápido a links internos dentro do site, ajudando os usuários a encontrar facilmente o conteúdo de seu interesse.
Main Content (Conteúdo Principal): Esta é a parte central da página web, contendo as informações ou conteúdo primários que o usuário visitou a página para ver. O conteúdo principal pode ser ainda dividido em várias seções, como artigos, posts de blog, exibições de produtos, etc., variando com base no propósito e layout do site.
Sidebar (Barra Lateral): A barra lateral geralmente reside ao lado do conteúdo principal (no lado esquerdo ou direito) e fornece informações ou funcionalidades adicionais, como links relacionados, anúncios, caixas de pesquisa, links de mídia social, etc.
Footer (Rodapé): Localizado na parte inferior da página web, o rodapé normalmente contém informações de direitos autorais, detalhes de contato, links para mapas do site, políticas de privacidade, ícones de mídia social, etc. O rodapé é a última parte vista pelos usuários quando eles rolam para baixo, oferecendo informações básicas do site e opções de navegação adicionais.

Adicione elementos semânticos (header, main, footer) para organizar o conteúdo logicamente.

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Pet's House</title>
  </head>
  <body>
    <!--Header Content-->
    <header></header>
    <!--Main Content-->
    <main></main>
    <!--Footer Content-->
    <footer></footer>
  </body>
</html>

 é um comentário em HTML que é usado para adicionar notas ou descrições ao código. Ele não afeta a funcionalidade do código e é ignorado pelo navegador.
O elemento HTML <header> representa conteúdo introdutório, tipicamente um grupo de auxílios introdutórios ou de navegação.
O elemento HTML <main> representa o conteúdo dominante do <body> de um documento. A área de conteúdo principal consiste em conteúdo que está diretamente relacionado ou expande o tópico central de um documento, ou a funcionalidade central de um aplicativo.
O elemento HTML <footer> representa um rodapé para seu elemento de conteúdo de seção ancestral mais próximo ou elemento raiz de seção. Um rodapé normalmente contém informações sobre o autor da seção, dados de direitos autorais ou links para documentos relacionados.

Seção de Cabeçalho

A seção inicial deve incluir os seguintes componentes:

Home section components layout

Em seguida, precisamos implementar o layout da seção do cabeçalho, que contém a imagem do logotipo e a navegação.

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Pet's House</title>
  </head>
  <body>
    <!--Header Content-->
    <header>
      <div class="logo-section">
        <img class="logo" src="images/logo.svg" alt="logo" />
      </div>
      <nav class="navigation-section">
        <ul class="navigation">
          <li>Home</li>
          <li>About Us</li>
          <li>Display</li>
          <li>Contact</li>
        </ul>
      </nav>
    </header>
    <!--Main Content-->
    <main></main>
    <!--Footer Content-->
    <footer></footer>
  </body>
</html>

Divida o logotipo e a navegação em duas áreas usando as tags <div> e <nav>.
O elemento HTML <img> incorpora uma imagem no documento.
O atributo src na tag <img> é usado para especificar o caminho para a imagem.
O atributo alt na tag <img> é usado para descrever a imagem, e quando a imagem não pode ser exibida corretamente na página, o conteúdo em alt será mostrado.
class na tag é um atributo global, e o conteúdo após o sinal de igual é equivalente ao nome dado ao elemento, que é usado pelo CSS para identificar um elemento específico e definir o estilo para o elemento especificado.
O elemento HTML <ul> representa uma lista não ordenada de itens, normalmente renderizada como uma lista com marcadores.
O elemento HTML <li> representa um item em uma lista.
O elemento HTML <a> é usado para definir um hiperlink, criando um link entre diferentes páginas.

Nota: HTML é usado para colocar conteúdo em uma página web, enquanto CSS é essencial para criar um layout visualmente atraente. Neste experimento, focamos em aprender o conteúdo HTML. Para obter um design de página melhor, também estou fornecendo o arquivo style.css completo.

Layout da Seção Inicial

Em seguida, complete o layout da página inicial, que consiste em três partes: título, texto e imagem.

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Pet's House</title>
  </head>
  <body>
    <!--Header Content-->
    <header>
      <div class="logo-section">
        <img class="logo" src="images/logo.svg" alt="logo" />
      </div>
      <nav class="navigation-section">
        <ul class="navigation">
          <li>Home</li>
          <li>About Us</li>
          <li>Display</li>
          <li>Contact</li>
        </ul>
      </nav>
    </header>
    <!--Main Content-->
    <main>
      <div class="container">
        <section id="home" class="cover-sect">
          <div class="title-text">
            <h1>Welcome</h1>
            <p>~ This website offers personalised services for pets. ~</p>
          </div>
          <div class="box-feature">
            <img class="cover-image" src="images/cat.jpeg" alt="just a cat" />
          </div>
        </section>
      </div>
    </main>
    <!--Footer Content-->
    <footer></footer>
  </body>
</html>

O elemento HTML <section> representa uma seção independente genérica de um documento.
O elemento HTML <h1> representa um cabeçalho para o conteúdo em um elemento <section>.
O elemento HTML <p> representa um parágrafo.

Resumo

Neste laboratório, você aprendeu a estruturar e estilizar o layout do cabeçalho e da página inicial, com foco na criação de uma interface acolhedora e navegável para "Pet's House". Este laboratório enfatizou a importância das primeiras impressões e estabeleceu a base para um website amigável ao usuário.

Layout do Cabeçalho e da Página Inicial