Unleash the Joy of Pet Ownership: Discover Pet's House

Introduction

We embark on a journey to create a welcoming online space for pet lovers. Our scene, Pet Paradise, features a character, Alex the Innovator, who dreams of connecting pet owners through a vibrant and informative website. Alex's goal is to showcase pet services, share stories, and build a community. This scenario is designed to be engaging, guiding students through the process of transforming Alex's vision into a digital reality.

We will begin by covering the basics of HTML with a small project, emphasizing 3 labs that will guide you through the process of creating a simple webpage.

In this Lab, you'll create the header section and the home page layout for "Pet's House". This section is crucial for making a strong first impression. The header will contain the navigation menu, and the home layout will introduce visitors to the website.

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/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`") subgraph Lab Skills html/basic_elems -.-> lab-271712{{"`Header and Home Layout`"}} html/charset -.-> lab-271712{{"`Header and Home Layout`"}} html/lang_decl -.-> lab-271712{{"`Header and Home Layout`"}} html/head_elems -.-> lab-271712{{"`Header and Home Layout`"}} html/text_head -.-> lab-271712{{"`Header and Home Layout`"}} html/para_br -.-> lab-271712{{"`Header and Home Layout`"}} html/lists_desc -.-> lab-271712{{"`Header and Home Layout`"}} html/layout -.-> lab-271712{{"`Header and Home Layout`"}} html/nav_links -.-> lab-271712{{"`Header and Home Layout`"}} html/doc_flow -.-> lab-271712{{"`Header and Home Layout`"}} html/multimedia -.-> lab-271712{{"`Header and Home Layout`"}} end

HTML Document Structure

When users browse the web through the Internet, they encounter various forms of content including text, links, charts, images, and more.

Have you ever wondered how a browser displays this page content? We can press F12 to view the source code of the page, as shown in the figure below.

From the figure above, we can see that all the character content is enclosed within angle brackets < and >. Such content is known as tags, where <> represents the opening tag, and </> represents the closing tag.

HTML is a language made up of elements, which are represented by tags.

HTML (HyperText Markup Language) is the code that is used to structure a web page and its content.

Hyper: "Hyper" contrasts with "Linear." Prior computer programs were mostly linear, meaning they had to be executed in order from top to bottom. Web pages created with HTML, however, allow for navigation through hyperlinks from one page to another.
Text: Unlike compiled programming languages such as C, C++, or Java, HTML is a text-based scripting language. Its source code is interpreted and run directly in the browser without the need for compilation.
Markup: The fundamental principle of HTML is using markup (tags composed of paired angle brackets) to describe how web page content should be displayed in a browser.
Language: HTML is a language, but it is interpreted rather than compiled. All its markup tags are translated by the browser into the final displayed outcome.

In this step, you'll begin by setting up the basic structure of your webpage. You'll create a new HTML file named index.html in the directory /home/labex/project using the command touch ~/project/index.html. Open this file with your preferred text editor and add the basic HTML document structure:

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

The <!DOCTYPE html> declaration tells the browser what type of document to expect.
The <html lang="en"> element is the root element of the HTML document.
The <head> element contains metadata (data about the document) such as the title and character set.
The <title> element specifies the title of the webpage.
The <meta charset="UTF-8"> element specifies the character encoding for the webpage.
The <body> element contains the visible content of the webpage.

Click Go Live in the bottom right-hand corner of the Environment to open port 8080, and click Web 8080 in the top left-hand corner of the Environment to view the page results.

Note: The current page has no effect because the body is currently empty, we can see the effect of the page when we learn more tags.

Semantic Elements

A webpage layout typically consists of several key parts, each serving a distinct purpose to ensure the user interface is both clean and functional:

Header: This is the top area of the webpage, often containing the site's logo, navigation menu, login/register links, etc. The header is one of the first things a user notices, so it's usually designed to be prominent, providing easy navigation access.
Navigation Bar: Although the navigation bar can be part of the header, in some designs, it might also be a separate section located at the top, side, or bottom of the page. The navigation bar offers quick access to internal links within the website, helping users easily find the content they're interested in.
Main Content: This is the core part of the webpage, containing the primary information or content the user visited the page to see. The main content can be further divided into several sections, such as articles, blog posts, product displays, etc., varying based on the purpose and layout of the website.
Sidebar: The sidebar usually resides alongside the main content (either on the left or right side) and provides additional information or functionalities, like related links, advertisements, search boxes, social media links, etc.
Footer: Located at the bottom of the webpage, the footer typically contains copyright information, contact details, links to site maps, privacy policies, social media icons, etc. The footer is the last part seen by users when they scroll to the bottom, offering basic site information and additional navigation options.

Add semantic elements (header, main, footer) to organize the content logically.

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

 is a comment in HTML that is used to add notes or descriptions to the code. It does not affect the functionality of the code and is ignored by the browser.
The <header> HTML element represents introductory content, typically a group of introductory or navigational aids.
The <main> HTML element represents the dominant content of the <body> of a document. The main content area consists of content that is directly related to or expands upon the central topic of a document, or the central functionality of an application.
The <footer> HTML element represents a footer for its nearest ancestor sectioning content or sectioning root element. A footer typically contains information about the author of the section, copyright data or links to related documents.

The home section should include the following components:

Next we need to implement the layout of the header section, which contains the logo image and the navigation.

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

Divide the logo and navigation into two areas using <div> and <nav> tags.
The <img> HTML element embeds an image into the document.
The src attribute in the <img> tag is used to specify the path to the image.
The alt attribute in the <img>tag is used to describe the image, and when the image cannot be displayed properly on the page, the content in the alt will be shown
class in the tag is a global attribute, and the content after the equal sign is equivalent to the name given to the element, which is used by CSS to identify a particular element and set the style for the specified element.
The <ul> HTML element represents an unordered list of items, typically rendered as a bulleted list.
The <li> HTML element represents an item in a list.
The <a> HTML element is used to define a hyperlink, creating a link between different pages.

Note: HTML is used for putting content on a web page, while CSS is essential for creating a visually appealing layout. In this experiment, we focus on learning HTML content. For achieving a better page design, I am also providing you with the complete style.css file.

Layout of Home Section

Next, complete the layout of the Home, which consists of three parts: title, text and image.

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

The <section> HTML element represents a generic standalone section of a document
The <h1> HTML element represents a heading for the content in a <section> element.
The <p> HTML element represents a paragraph.

Summary

This lab, you learned to structure and style the header and home page layout, focusing on creating a welcoming and navigable interface for "Pet's House. This lab emphasized the importance of first impressions and set the foundation for a user-friendly website.

Header and Home Layout