Serviços Personalizados para Pets e Experiência de Compra Simplificada

Introdução

Este laboratório irá guiá-lo através da criação de um formulário de contato e da seção de rodapé, elementos cruciais para a interação e fornecimento de informações adicionais.

Exemplo de formulário de contato e rodapé

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 iniciante com uma taxa de conclusão de 88%. Recebeu uma taxa de avaliações positivas de 100% dos estudantes.

Layout de Contato

A seção "Contacte-nos" consiste em duas partes: o parágrafo de texto e o conteúdo do formulário. Existem vários tipos de elementos de formulário disponíveis em HTML, como formulários de caixa de texto, formulários de múltipla escolha, formulários de botão de envio, etc.

<!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>
        <section id="about" class="story-sect">
          <div class="section-text">
            <h2>About Us</h2>
            <p>
              we're about creating a community of happy pets and happier pet
              owners. <br /><br />
              Our exceptional customer service team is dedicated to providing
              you with a seamless shopping experience, offering expert support
              from browsing to delivery and beyond. <br /><br />We understand
              the importance of fast, reliable service, which is why we offer
              expedited shipping options and hassle-free returns.
            </p>
          </div>
          <div class="box-feature circle">
            <img src="images/intro.png" />
          </div>
        </section>
        <section id="display" class="samples">
          <div class="section-text">
            <h2>Display</h2>
          </div>
          <div class="services">
            <div class="service">
              <figure>
                <img src="images/service-1.png" alt="Dog walking services" />
                <figcaption>Provide pet care services.</figcaption>
              </figure>
            </div>

            <div class="service">
              <figure>
                <img src="images/service-2.png" alt="Pet check-up services" />
                <figcaption>Provide pet check-up services.</figcaption>
              </figure>
            </div>

            <div class="service">
              <figure>
                <img src="images/service-3.png" alt="Pet washing services" />
                <figcaption>Provide pet washing services.</figcaption>
              </figure>
            </div>
          </div>
        </section>
        <section id="contact" class="contact-section">
          <div class="section-text">
            <h2>Contact Us</h2>
            <p>
              Welcome to our pet website! We're thrilled to have you here and
              eager to share with you the array of services we offer for you and
              your beloved pets. Whether you're looking for grooming, boarding,
              training, or any other pet-related service, we've got you covered.
              Our team is passionate about animals and committed to providing
              the best care possible. If you're interested in learning more
              about our services or if you're considering joining our community,
              we encourage you to fill out our form. This will allow us to
              understand your needs better and offer tailored solutions for you
              and your pet. Welcome aboard, and we look forward to serving you!
            </p>
          </div>
          <div class="contact-info">
            <div class="form-box">
              <form id="form" class="contact-form">
                <label for="name" class="form-content"
                  >Name <br />
                  <input
                    name="name"
                    id="name"
                    type="text"
                    class="txt-box"
                    required
                  /><br />
                </label>
                <label for="email" class="form-content"
                  >Email <br />
                  <input
                    name="email"
                    id="email"
                    type="email"
                    class="txt-box"
                    required
                  /><br />
                </label>
                <label for="message" class="form-content"
                  >Demand for services<br />
                  <select name="message" id="message" class="txt-box">
                    <option value="">Feeding pets at home</option>
                    <option value="">Pet play service</option>
                    <option value="">Pet bathing service</option>
                    <option value="">Join us</option>
                  </select>
                  <br /> </label
                ><br />
                <input class="btn" id="submit" type="submit" value="Submit" />
              </form>
            </div>
          </div>
        </section>
      </div>
    </main>
    <!--Footer Content-->
    <footer></footer>
  </body>
</html>

O elemento HTML <form> representa uma seção do documento contendo controles interativos para enviar informações.
O elemento HTML <label> representa uma legenda para um item em uma interface de usuário. Para associar explicitamente um elemento <label> com um elemento <input>, você primeiro precisa adicionar o atributo id ao elemento <input>. Em seguida, você adiciona o atributo for ao elemento <label>, onde o valor de for é o mesmo que o id no elemento <input>.
O elemento HTML <input> é usado para criar controles interativos para formulários baseados na web, a fim de aceitar dados do usuário; uma ampla variedade de tipos de dados de entrada e widgets de controle estão disponíveis, dependendo do dispositivo e do agente do usuário.
O elemento HTML <select> representa um controle que fornece um menu de opções.
Cada elemento <option> deve ter um atributo value contendo o valor dos dados a serem enviados ao servidor quando essa opção for selecionada. Se nenhum atributo value for incluído, o valor padrão será o texto contido dentro do elemento.
O atributo type permite que você especifique diferentes tipos de elementos de entrada.
- type="text" significa que este é um campo de entrada de texto.
- type="email" significa que este é um campo de entrada de email.
- type="submit" significa que este é um elemento de formulário com um botão de envio.

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.

Visualização do formulário "Contacte-nos"

Elemento Anchor

Em seguida, queremos fazer com que, ao clicar em Home, About Us, Display e Contact na barra de navegação no cabeçalho, possamos saltar para a área de conteúdo correspondente.

Adicionando a tag a a um item de lista ul na navegação:

<nav class="navigation-section">
  <ul class="navigation">
    <li><a class="nav-link" href="#home">Home</a></li>
    <li><a class="nav-link" href="#about">About Us</a></li>
    <li><a class="nav-link" href="#display">Display</a></li>
    <li><a class="nav-link" href="#contact">Contact</a></li>
  </ul>
</nav>

O elemento HTML <a> (ou elemento âncora), com seu atributo href, cria um hiperlink para páginas da web, arquivos, endereços de e-mail, locais na mesma página ou qualquer outra coisa que uma URL possa endereçar.
O conteúdo dentro de cada <a> deve indicar o destino do link. Se o atributo href estiver presente, pressionar a tecla Enter enquanto focado no elemento <a> irá ativá-lo. Aqui, adicionamos o nome do atributo id do layout correspondente dentro do atributo href.

Layout do Rodapé

Finalmente, o conteúdo da seção do rodapé é implementado.

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Pet's House</title>
  </head>
  <body>
    <!--header-section-->
    <header>
      <div class="logo-section">
        <img class="logo" src="images/logo.svg" alt="logo" />
      </div>
      <nav class="navigation-section">
        <ul class="navigation">
          <li><a class="nav-link" href="#home">Home</a></li>
          <li><a class="nav-link" href="#about">About Us</a></li>
          <li><a class="nav-link" href="#display">Display</a></li>
          <li><a class="nav-link" href="#contact">Contact</a></li>
        </ul>
      </nav>
    </header>
    <!--main section-->
    <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>

        <section id="about" class="story-sect">
          <div class="section-text">
            <h2>About Us</h2>
            <p>
              we're about creating a community of happy pets and happier pet
              owners. <br /><br />
              Our exceptional customer service team is dedicated to providing
              you with a seamless shopping experience, offering expert support
              from browsing to delivery and beyond. <br /><br />We understand
              the importance of fast, reliable service, which is why we offer
              expedited shipping options and hassle-free returns.
            </p>
          </div>
          <div class="box-feature circle">
            <img src="images/intro.png" />
          </div>
        </section>

        <!-- display section -->
        <section id="display" class="samples">
          <div class="section-text">
            <h2>Display</h2>
          </div>
          <div class="services">
            <div class="service">
              <figure>
                <img src="images/service-1.png" alt="Dog walking services" />
                <figcaption>Provide pet care services.</figcaption>
              </figure>
            </div>

            <div class="service">
              <figure>
                <img src="images/service-2.png" alt="Pet check-up services" />
                <figcaption>Provide pet check-up services.</figcaption>
              </figure>
            </div>

            <div class="service">
              <figure>
                <img src="images/service-3.png" alt="Pet washing services" />
                <figcaption>Provide pet washing services.</figcaption>
              </figure>
            </div>
          </div>
        </section>
        <!-- contact section -->
        <section id="contact" class="contact-section">
          <div class="section-text">
            <h2>Contact Us</h2>
            <p>
              Welcome to our pet website! We're thrilled to have you here and
              eager to share with you the array of services we offer for you and
              your beloved pets. Whether you're looking for grooming, boarding,
              training, or any other pet-related service, we've got you covered.
              Our team is passionate about animals and committed to providing
              the best care possible. If you're interested in learning more
              about our services or if you're considering joining our community,
              we encourage you to fill out our form. This will allow us to
              understand your needs better and offer tailored solutions for you
              and your pet. Welcome aboard, and we look forward to serving you!
            </p>
          </div>
          <div class="contact-info">
            <div class="form-box">
              <form id="form" class="contact-form">
                <label for="name" class="form-content"
                  >Name <br />
                  <input
                    name="name"
                    id="name"
                    type="text"
                    class="txt-box"
                    required
                  /><br />
                </label>
                <label for="email" class="form-content"
                  >Email <br />
                  <input
                    name="email"
                    id="email"
                    type="email"
                    class="txt-box"
                    required
                  /><br />
                </label>
                <label for="message" class="form-content"
                  >Demand for services<br />
                  <select name="message" id="message" class="txt-box">
                    <option value="">Feeding pets at home</option>
                    <option value="">Pet play service</option>
                    <option value="">Pet bathing service</option>
                    <option value="">Join us</option>
                  </select>
                  <br /> </label
                ><br />
                <input class="btn" id="submit" type="submit" value="Submit" />
              </form>
            </div>
          </div>
        </section>
      </div>
    </main>
    <footer>
      <span class="contact-us">Contact Us</span>
      <span class="company-info">Created by Lotus</span>
      <span>@Copyright 2024</span>
    </footer>
  </body>
</html>

O elemento HTML <span> é um container genérico em linha para conteúdo de fraseado, que não representa inerentemente nada. Ele pode ser usado para agrupar elementos para fins de estilo (usando os atributos class ou id) ou porque eles compartilham valores de atributo, como lang. Ele deve ser usado somente quando nenhum outro elemento semântico for apropriado. <span> é muito parecido com um elemento <div>, mas <div> é um elemento de nível de bloco, enquanto <span> é um elemento de nível em linha.

elemento de nível em linha:

elemento de nível de bloco:

O Elemento de Link para Recursos Externos

O elemento HTML <link> especifica as relações entre o documento atual e um recurso externo. Este elemento é mais comumente usado para vincular a folhas de estilo (stylesheets), mas também é usado para estabelecer ícones do site (tanto ícones do tipo "favicon" quanto ícones para a tela inicial e aplicativos em dispositivos móveis), entre outras coisas.

Usamos uma variedade de elementos HTML para completar o conteúdo da página. Se você deseja obter o efeito da imagem, precisamos usar CSS. Aqui, preparamos um arquivo CSS completo (style.css), e usamos o elemento link para incluí-lo.

<head>
  <meta charset="UTF-8" />
  <title>Pet's House</title>
  <link rel="stylesheet" href="./style.css" />
</head>

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

Exemplo do elemento link HTML

Resumo

Neste laboratório, você completou o site adicionando um formulário de contato e um rodapé, aprendendo sobre interação do usuário e acessibilidade da informação. Este laboratório reforçou a importância dos canais de comunicação e do design consistente no desenvolvimento web, finalizando a estrutura do site.

Parabéns pela sua introdução ao HTML. Se você deseja saber como estilizar suas páginas, aprenda o laboratório de CSS!

Layout do Formulário e Rodapé