Lecture Notes Of Class 14 - Building a Basic Web Page Structure

Rashmi Mishra
personRashmi Mishra
December 05, 20244 minute read
0

 

Lecture Notes Of Class 14 

 Building a Basic Web Page Structure

Objective:

Combine various HTML elements to build a simple web page layout.

Outcome:

Students will be able to:

  • Create a basic web page structure.
  • Incorporate headings, paragraphs, images, and lists.
  • Use semantic elements for better organization.

1. Introduction to Basic Web Page Structure

A basic web page structure typically includes:

1.  Headings: To define titles or sections of content.

2.  Paragraphs: For blocks of text.

3.  Images: To visually enhance the page.

4.Lists: For presenting items in an ordered or unordered format.

5.Semantic Elements: To give meaning to different sections of the webpage, such as <header>, <footer>, <main>, and <section>.

A simple web page structure ensures content is easy to read, visually appealing, and accessible.

2. Components of a Basic Web Page

HTML Skeleton

Every HTML document starts with a skeleton structure:

<!DOCTYPE html>

<html>

<head>

    <title>Basic Web Page</title>

</head>

<body>

    <!-- Web Page Content Goes Here -->

</body>

</html>

 

  • <!DOCTYPE html>: Declares the document type and version of HTML.
  • <html>: The root element of the HTML document.
  • <head>: Contains metadata (e.g., title, styles).
  • <body>: Contains the visible content of the web page.

Adding Headings

Headings range from <h1> (largest) to <h6> (smallest). They structure content hierarchically.

<h1>Welcome to My Web Page</h1>

<h2>About Me</h2>

<h3>Hobbies</h3>

 Adding Paragraphs

Use <p> tags for text content.

<p>Hello! I am learning HTML. This is my first web page.</p>

 Inserting Images

Images are added using the <img> tag with attributes like src (source) and alt (alternative text).

<img src="myimage.jpg" alt="A description of the image" />

 Creating Lists

  • Unordered List (<ul>): Items are displayed with bullets.

    <ul>

        <li>HTML</li>

        <li>CSS</li>

        <li>JavaScript</li>

    </ul>

     

  • Ordered List (<ol>): Items are displayed with numbers.

<ol>

    <li>Step 1: Open the editor</li>

    <li>Step 2: Write HTML code</li>

    <li>Step 3: Save and view in the browser</li>

</ol>

 Using Semantic Elements

Semantic elements improve structure and accessibility.

  • <header>: Contains the introductory content like the title or navigation.
  • <main>: The main content of the page.
  • <section>: Groups related content.
  • <footer>: Contains footer information like copyright.

Example:

<header>

    <h1>My Portfolio</h1>

</header>

<main>

    <section>

        <h2>About Me</h2>

        <p>I am passionate about web development.</p>

    </section>

    <section>

        <h2>My Projects</h2>

        <ul>

            <li>Project 1: Portfolio Website</li>

            <li>Project 2: Blog Application</li>

        </ul>

    </section>

</main>

<footer>

    <p>&copy; 2024 My Portfolio</p>

</footer>

 3. Building the Full Web Page

Here’s how all the components come together in a single web page:

<!DOCTYPE html>

<html>

<head>

    <title>My First Web Page</title>

</head>

<body>

    <header>

        <h1>Welcome to My Website</h1>

    </header>

 

    <main>

        <section>

            <h2>About Me</h2>

            <p>I am a student learning how to create websites. I enjoy coding and designing.</p>

        </section>

 

        <section>

            <h2>My Interests</h2>

            <ul>

                <li>Web Development</li>

                <li>Graphic Design</li>

                <li>Gaming</li>

            </ul>

        </section>

 

        <section>

            <h2>My Favorite Image</h2>

            <img src="landscape.jpg" alt="Beautiful Landscape">

        </section>

    </main>

 

    <footer>

        <p>&copy; 2024 My Website. All rights reserved.</p>

    </footer>

</body>

</html>

 4. Practical Activity

1.  Open a text editor (e.g., Notepad or Visual Studio Code).

2.  Write the above code.

3.  Save the file as index.html.

4.  Open the file in a web browser to see the output.

5.  Modify the content to personalize your web page.

5. Summary

  • A well-structured web page includes headings, paragraphs, images, lists, and semantic elements.
  • Semantic elements like <header>, <main>, and <footer> improve the organization and accessibility of a page.
  • Practice combining these elements to build visually appealing and functional web pages.

6. Homework

1.  Create a basic web page about your favorite hobby.

o    Include headings, paragraphs, an image, and a list.

o    Use semantic elements for organization.

2.  Save your work and share it in the next class.


Tags

You Might Like

Show more
Classnotes

Post a Comment

0Comments

Post a Comment (0)
Share to other apps
Copy Post link