❮ Previous

Basic HTML Page Creation

  • This lesson teaches how to create a basic HTML page from scratch, including file creation, HTML structure, and viewing the page in a browser.

  • 🧠 What Does “Basic Page Creation” Mean?

    Creating a basic HTML webpage means combining everything you’ve learned so far into one complete file.

    It includes:

     ✅ HTML structure
     ✅ Tags & elements
     ✅ Attributes
     ✅ Best practices

    🧩 Think of it as assembling all lego blocks into one house 🏠

  • 🧱 Basic HTML Page Structure

    Every HTML page follows this standard structure:

Basic HTML Page

This is a simple HTML webpage that displays a heading, a paragraph, an image, and a link, demonstrating the basic structure of an HTML document. 

<!DOCTYPE html>
<html>
  <head>
    <title>My Simple Webpage</title>
  </head>
  <body>

    <h1>Hello Everyone!</h1>

    <p>This is my first webpage using HTML.</p>

    <img src="image.jpg" alt="Sample Image">

    <a href="https://example.com">Visit Example</a>

  </body>
</html>
Lesson image

  • 🔍 Explanation

    ✅ <!DOCTYPE html>

    <!DOCTYPE html>

    📌 Tells the browser:

    “This page is written in HTML5”

     ✅ Always written at the top
     ✅ No closing tag

    ✅ <html> Tag

    <html>

     📌 The root element of the webpage
     📌 Wraps everything

    ✅ <head> Section

    <head>

      <title> My Simple Webpage </title>

    </head>

    🧠 Contains page information (not visible on page)

    ✅ <title> → Text shown on the browser tab

    ✅ <body> Section

    <body>

    📌 Contains everything visible on the webpage:

     ✅ Text
     ✅ Images
     ✅ Links
     ✅ Headings

    ✅ Heading Element

    <h1> Hello Everyone! </h1>

     📌 Main title of the webpage
     📌 Most important heading

    ✅ Paragraph Element

    <p>This is my first webpage using HTML</p>

    📌 Used for normal text content

    ✅ Image Element

    <img src="image.jpg" alt="Sample Image">

     📌 Displays an image
     📌 src → image location
     📌 alt → image description (SEO & accessibility ✅) 

    ✅ Link (Anchor) Element

    <a href="https://example.com"> Visit Example </a>

     📌 Creates a clickable link
     📌 href → destination URL

  • 🌈 What You Have Used in This Page

     ✅ Structure → html, head, body
     ✅ Elements → h1, p, img, a
     ✅ Attributes → src, alt, href
     ✅ Best practices → Proper structure, lowercase tags 

    🧠 Best Practices to Remember

     ✅ Always use <!DOCTYPE html>
     ✅ Use lowercase tags
     ✅ Indent code properly
     ✅ Always add alt for images
     ✅ One <h1> per page (recommended)

    ✨ This is the first milestone in web development
     ✨ Every big website starts with a simple HTML page like this

    🚀 HTML mastered ? CSS & JavaScript become easy!

  • 🧠 What Are HTML Comments?

    HTML comments are notes written inside HTML code that are:

     ✅ Visible to developers
     ❌ Invisible to users (browser does not display them)

    🧱 Syntax of HTML Comments

    <!-- This is a comment -->

     ✅ Starts with <!--
     ✅ Ends with -->
     ✅ Content inside is ignored by the browser

    ✅ Example

    <!-- This is a heading -->

    <h1>Welcome to My Website</h1>

    📌 The browser will show:

    Welcome to My Website

    ✅ The comment is only for developers

    🛑 Comments Are Not Displayed

    <p>Hello World</p>

    <!-- <p>This paragraph is hidden</p> -->

     📌 Output:
     ✅ Only Hello World is shown
     ❌ Second paragraph is hidden because it's commented

    🧩 Multi-Line Comments

    HTML comments can span multiple lines:

    <!--

    This is a multi-line comment

    Used to explain large code blocks

    Very helpful for beginners

    -->

❮ Previous