Personalized Pet Services and Seamless Shopping Experience

Introduction

This lab will guide you through creating a contact form and the footer section, critical for interaction and providing additional information.

Skills Graph

%%%%{init: {'theme':'neutral'}}%%%% flowchart RL html(("`HTML`")) -.-> html/BasicStructureGroup(["`Basic Structure`"]) html(("`HTML`")) -.-> html/TextContentandFormattingGroup(["`Text Content and Formatting`"]) html(("`HTML`")) -.-> html/LayoutandSectioningGroup(["`Layout and Sectioning`"]) html(("`HTML`")) -.-> html/MultimediaandGraphicsGroup(["`Multimedia and Graphics`"]) html(("`HTML`")) -.-> html/FormsandInputGroup(["`Forms and Input`"]) html/BasicStructureGroup -.-> html/basic_elems("`Basic Elements`") html/BasicStructureGroup -.-> html/charset("`Character Encoding`") html/BasicStructureGroup -.-> html/lang_decl("`Language Declaration`") html/BasicStructureGroup -.-> html/head_elems("`Head Elements`") html/TextContentandFormattingGroup -.-> html/text_head("`Text and Headings`") html/TextContentandFormattingGroup -.-> html/para_br("`Paragraphs and Line Breaks`") html/TextContentandFormattingGroup -.-> html/lists_desc("`Lists and Descriptions`") html/LayoutandSectioningGroup -.-> html/layout("`Layout Elements`") html/LayoutandSectioningGroup -.-> html/nav_links("`Navigation and Links`") html/LayoutandSectioningGroup -.-> html/doc_flow("`Document Flow Understanding`") html/MultimediaandGraphicsGroup -.-> html/multimedia("`Multimedia Elements`") html/MultimediaandGraphicsGroup -.-> html/fig_cap("`Figure and Caption Association`") html/FormsandInputGroup -.-> html/forms("`Form Elements`") html/FormsandInputGroup -.-> html/form_valid("`Form Validation`") subgraph Lab Skills html/basic_elems -.-> lab-271711{{"`Form and Footer Layout`"}} html/charset -.-> lab-271711{{"`Form and Footer Layout`"}} html/lang_decl -.-> lab-271711{{"`Form and Footer Layout`"}} html/head_elems -.-> lab-271711{{"`Form and Footer Layout`"}} html/text_head -.-> lab-271711{{"`Form and Footer Layout`"}} html/para_br -.-> lab-271711{{"`Form and Footer Layout`"}} html/lists_desc -.-> lab-271711{{"`Form and Footer Layout`"}} html/layout -.-> lab-271711{{"`Form and Footer Layout`"}} html/nav_links -.-> lab-271711{{"`Form and Footer Layout`"}} html/doc_flow -.-> lab-271711{{"`Form and Footer Layout`"}} html/multimedia -.-> lab-271711{{"`Form and Footer Layout`"}} html/fig_cap -.-> lab-271711{{"`Form and Footer Layout`"}} html/forms -.-> lab-271711{{"`Form and Footer Layout`"}} html/form_valid -.-> lab-271711{{"`Form and Footer Layout`"}} end

Contact Us Layout

The Contact Us page consists of two parts, the text paragraph and the form content. There are several types of form elements available in HTML, such as text box forms, multiple choice forms, submit button forms, 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>

The <form> HTML element represents a document section containing interactive controls for submitting information.
The <label> HTML element represents a caption for an item in a user interface. To explicitly associate a <label> element with an <input> element, you first need to add the id attribute to the <input> element. Next, you add the for attribute to the <label> element, where the value of for is the same as the id in the <input> element.
The <input> HTML element is used to create interactive controls for web-based forms in order to accept data from the user; a wide variety of types of input data and control widgets are available, depending on the device and user agent.
The <select> HTML element represents a control that provides a menu of options.
Each <option> element should have a value attribute containing the data value to submit to the server when that option is selected. If no value attribute is included, the value defaults to the text contained inside the element.
The type attribute allows you to specify different types of input elements.
- type="text" means this is a text input field.
- type="email" means this is an email input field.
- type="submit" means this is a form element with a submit button.

Anchor Element

Next, we want to make it so that by clicking on Home, About Us, Display and Contact in the nav bar in the header, we can jump to the corresponding content area.

Adding a tag to an ul list item in nav:

<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>

The <a> HTML element (or anchor element), with its href attribute, creates a hyperlink to web pages, files, email addresses, locations in the same page, or anything else a URL can address.
Content within each <a> should indicate the link's destination. If the href attribute is present, pressing the enter key while focused on the <a> element will activate it.Here we add the name of the id attribute of the corresponding layout inside the href attribute.

Finally, the content of the footer section is implemented.

<!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>

The <span> HTML element is a generic inline container for phrasing content, which does not inherently represent anything. It can be used to group elements for styling purposes (using the class or id attributes), or because they share attribute values, such as lang. It should be used only when no other semantic element is appropriate. <span> is very much like a <div> element, but <div> is a block-level element whereas a <span> is an inline-level element.

inline-level element:

block-level element:

The External Resource Link Element

The <link> HTML element specifies relationships between the current document and an external resource. This element is most commonly used to link to stylesheets, but is also used to establish site icons (both "favicon" style icons and icons for the home screen and apps on mobile devices) among other things.

We use a variety of HTML elements to put the content of the page has been complete, if you want to get the effect of the image, we need to use CSS, here to prepare a complete CSS file(style.css), we use the link element to put it in, look at the effect of the page it!

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

Summary

In this lab, you completed the website by adding a contact form and footer, learning about user interaction and information accessibility. This lab reinforced the significance of communication channels and consistent design in web development, rounding off the site's structure.

Congratulations on your introduction to HTML. If you want to know how to style your pages, learn the labs of CSS!

Form and Footer Layout