Class 9 HTML 5 Basics – Powerful & Complete Web Site Design Notes & Examples

Class :9 : Web Site Design :HTML 5

5.1 Introduction to HTML 5

HTML 5 stands for HyperText Markup Language version 5. It is the modern version of HTML used to create and structure web pages and web applications. HTML5 provides many new elements, attributes, APIs, and multimedia features that make websites more interactive, responsive, and user-friendly.

Main features of HTML 5

It provides new semantic elements such as <header>, <nav>, <section>, <article>, <aside>, and <footer>.
It supports audio and video without requiring additional plugins.
It provides the <canvas> element for drawing graphics using JavaScript.
It supports SVG (Scalable Vector Graphics).
It provides built-in drag-and-drop functionality.
It introduces new input types and attributes for HTML forms.
It supports better form validation.
It provides APIs for developing modern web applications.

5.2 New Features in HTML 5

HTML5 introduced many new features that make web development easier, faster, and more interactive. It provides new elements for creating structured web pages, multimedia content, graphics, forms, and interactive applications.

Major New Features of HTML 5

Semantic Elements : HTML5 provides meaningful elements,Common semantic elements include:

<header> – Defines the introductory or header area of a webpage or section. It may contain a logo, title, heading, or navigation links.
<nav> – Defines a section containing the main navigation links of a website.
<section> – Represents a thematic or logical section of related content.
<article> – Represents independent, self-contained content such as a blog post, news article, or forum post.
<aside> – Contains additional or related content, such as a sidebar, advertisements, or related links.
<footer> – Defines the bottom section of a webpage or section. It may contain copyright information, contact details, or useful links.

Question: Write an HTML5 program using semantic elements to create a basic webpage layout. The webpage should include:

A <header> displaying “My Website”
A <nav> section containing Home, About, and Contact links
A <section> containing an <article> with the heading “HTML5” and a short description
An <aside> displaying “Related Links”
A <footer> displaying “© 2026 My Website”

HTML5 Semantic Elements

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My Website</title>
</head>
<body>
<header>
<h1><span class="ez-toc-section" id="My_Website"></span>My Website<span class="ez-toc-section-end"></span></h1>
</header>
<nav>
<a href="#">Home</a>
<a href="#">About</a>
<a href="#">Contact</a>
</nav>
<section>
<article>
<h2><span class="ez-toc-section" id="HTML5"></span>HTML5<span class="ez-toc-section-end"></span></h2>
<p>HTML5 is the latest major version of HTML.</p>
</article>
</section>
<aside>
<h3><span class="ez-toc-section" id="Related_Links"></span>Related Links<span class="ez-toc-section-end"></span></h3>
</aside>
<footer>
<p>© 2026 My Website</p>
</footer>
</body>
</html>

Output:

Advantages of Semantic Elements

Easy to Understand: Make the structure and content of a webpage easier to understand.
Better SEO: Help search engines understand webpage content and improve Search Engine Optimization (SEO).
Improved Accessibility: Help screen readers and other assistive technologies understand the webpage structure.
Easy Maintenance: Make HTML code more organized, readable, and easier to maintain.
Clear Structure: Clearly identify different parts of a webpage, such as the header, navigation, main content, sidebar, and footer.

5.2 HTML 5 Audio and Video

HTML5 provides built-in <audio> and <video> elements for adding sound and video content directly to a webpage without requiring external plugins such as Flash.The <audio> element is used to embed and play audio files such as music, voice recordings, and sound effects on a webpage. Syntax is below:

<audio controls> 
<source src="music.mp3" type="audio/mpeg"> Your browser does not support the audio element.
 </audio>

Important attributes:

controls – Displays play, pause, volume, and other audio controls.
autoplay – Starts playing the audio automatically.
loop – Repeats the audio continuously.
muted – Starts the audio in muted mode.
preload – Specifies how the browser should load the audio file.

HTML5 Video

The <video> element is used to embed video files directly into a webpage. syntax is given below.

<video width="600" controls> 
<source src="video.mp4" type="video/mp4"> Your browser does not support the video element.
 </video>

Important attributes:

controls – Displays video controls such as play, pause, volume, and fullscreen.
width / height – Specifies the dimensions of the video.
autoplay – Automatically starts the video.
loop – Replays the video continuously.
muted – Starts the video without sound.
poster – Specifies an image displayed before the video starts.
preload – Specifies how the browser should load the video.

Multiple Media Formats

The <source> element allows multiple audio or video formats to be provided. The browser selects a format it supports.

<video controls width="600"> 
<source src="video.mp4" type="video/mp4"> 
<source src="video.webm" type="video/webm"> Your browser does not support HTML5 video.
</video>

Advantages of HTML 5 Audio and Video

HTML5 provides built-in <audio> and <video> elements, so users do not need to install additional plugins.
Audio and video files can be easily added to a webpage using simple HTML tags.
HTML5 provides controls such as play, pause, volume, and progress bar.
HTML5 supports several common audio and video formats, allowing multimedia content to be used on different devices and browsers.
HTML5 multimedia elements are supported by modern browsers such as Chrome, Firefox, Edge, and Safari.
It supports features such as autoplay, looping, and muted playback.
Works across modern web browsers.
Supports features such as autoplay, looping, and muted playback.
Improves multimedia integration and user experience.

1. Write HTML code to add an audio file.

HTML5 Audio Example

Output:

Click Run Code to see the output.

2. Write HTML 5 code to add a video file

HTML5 Video Example

Output:

Click Run Code to see the output.

3. Write HTML 5 code for an audio file with autoplay, loop, and muted features.

HTML5 Audio Features

Output:

Click Run Code to see the output.

4. Write HTML 5 code for a video with controls, autoplay, loop, and muted features.

Video Features

Output:

Click Run Code to see the output.

5.3 HTML 5 Canvas

HTML5 Canvas is an HTML5 element used to draw graphics, shapes, lines, text, images, animations, and charts on a webpage using JavaScript.

The <canvas> element creates a rectangular drawing area on a webpage. JavaScript is used to draw inside this area. the syntax is given below:

<canvas id="myCanvas" width="500" height="300"> </canvas>

canvas> – Defines the drawing area.
id – Gives a unique name to the canvas.
width – Specifies the width of the canvas.
height – Specifies the height of the canvas.

Example: Draw a Rectangle by using HTML 5

HTML5 Canvas Example

Output:

Click Run Code to see the output.

Explanation

The <canvas> tag creates a drawing area.
getElementById() accesses the canvas.
getContext("2d") creates a 2D drawing context.
fillStyle specifies the color.
fillRect() draws a filled rectangle.

Example: Draw a Circle by using html 5 circle

HTML5 Canvas Circle

Output:

Click Run Code to see the output.

A circle can be drawn in HTML5 Canvas using the JavaScript arc() method. The arc() method creates a curved path based on a center point, radius, starting angle, and ending angle.

5.4 HTML5 SVG

SVG (Scalable Vector Graphics) is an XML-based markup language used to create two-dimensional graphics on webpages. HTML5 supports SVG directly, so we can create lines, circles, rectangles, polygons, text, and other graphics without using external plugins.The main advantage of SVG is that its graphics can be scaled to any size without losing quality. Syntax is given below.

<svg width="500" height="300">
<!-- SVG elements are written here -->
</svg>

Common SVG Attributes

width – Defines the width of the SVG area.
height – Defines the height of the SVG area.
fill – Specifies the filling color.
stroke – Specifies the outline color.
stroke-width – Specifies the thickness of the outline.

Example 1: Draw a Rectangle

SVG Rectangle Example

Output:

Click Run Code to see the output.

Explanation

rect creates a rectangle.
x and y specify the starting position.
width specifies the width.
height specifies the height.
fill specifies the inside color.
stroke specifies the border color.
stroke-width specifies the border thickness.

Example 2: Draw a Circle by using SVG

SVG Circle Example

Output:

Click Run Code to see the output.

5.2.2 HTML 5 Drag and Drop

HTML 5 Drag and Drop allows users to drag an element from one location and drop it into another location. It is commonly used for moving images, text, files, and other HTML elements.

Important Attributes and Events

Attribute/Event	Purpose
`draggable="true"`	Makes an element draggable
`ondragstart`	Runs when dragging starts
`ondragover`	Runs when an element is dragged over a drop area
`ondrop`	Runs when the element is dropped
`dataTransfer.setData()`	Stores the dragged element’s data
`dataTransfer.getData()`	Retrieves the dragged data
`preventDefault()`	Allows the drop operation

Working: First, the “Drag Me” box is made draggable using draggable="true". When dragging starts, its ID is stored. The ondragover event allows dropping, and ondrop moves the dragged element into the drop area.

Example: Simple Drag and Drop

HTML5 Drag and Drop

<!DOCTYPE html>
<html>
<head>
    <title>HTML5 Drag and Drop</title>

#dropArea {
            width: 300px;
            height: 150px;
            border: 3px dashed green;
            text-align: center;
            padding-top: 50px;
            margin: 20px;
        }
    </style>
</head>

<body>

<h2><span class="ez-toc-section" id="HTML5_Drag_and_Drop_Example"></span>HTML5 Drag and Drop Example<span class="ez-toc-section-end"></span></h2>

function drag(event) {
    event.dataTransfer.setData("text", event.target.id);
}

function drop(event) {
    event.preventDefault();

var data = event.dataTransfer.getData("text");

event.target.appendChild(
        document.getElementById(data)
    );
}
</script>

</body>
</html>

Output:

Click Run Code to see the output.

HTML 5 Forms

HTML5 Forms are used to collect information from users, such as name, email, password, date, phone number, and other data. HTML5 introduced several new input types and validation features that make forms easier to create and use.

Important HTML5 Input Types

Input Type	Purpose
`text`	Enter text
`email`	Enter an email address
`password`	Enter a password
`number`	Enter numbers
`date`	Select a date
`time`	Select a time
`tel`	Enter a telephone number
`url`	Enter a website URL
`search`	Enter search text
`color`	Select a color
`range`	Select a value from a range
`month`	Select a month
`week`	Select a week
`datetime-local`	Select local date and time

Basic HTML 5 Form Example

HTML5 Form

<!DOCTYPE html>
<html>
<head>
    <title>HTML5 Form</title>

form {
            width: 500px;
            padding: 20px;
            border: 2px solid #2196f3;
            border-radius: 10px;
            background-color: #f5faff;
        }

label {
            display: inline-block;
            width: 130px;
            font-weight: bold;
        }

input {
            padding: 7px;
        }

input[type="submit"],
        input[type="reset"] {
            padding: 10px 20px;
            border: none;
            border-radius: 5px;
            color: white;
            cursor: pointer;
        }

input[type="submit"] {
            background-color: green;
        }

input[type="reset"] {
            background-color: red;
        }
    </style>
</head>

<body>

<h2><span class="ez-toc-section" id="Student_Registration_Form"></span>Student Registration Form<span class="ez-toc-section-end"></span></h2>

<form>

<label>Email:</label>
    <input type="email" name="email" required>
    <br><br>

<label>Password:</label>
    <input type="password" name="password" required>
    <br><br>

<label>Date of Birth:</label>
    <input type="date" name="dob">
    <br><br>

<label>Phone:</label>
    <input type="tel" name="phone">
    <br><br>

<label>Gender:</label>
    <input type="radio" name="gender" value="male"> Male
    <input type="radio" name="gender" value="female"> Female
    <br><br>

<label>Favorite Color:</label>
    <input type="color" name="color">
    <br><br>

<label>Website:</label>
    <input type="url" name="website">
    <br><br>

<label>Search:</label>
    <input type="search" name="search">
    <br><br>

</form>

</body>
</html>

Output:

Click Run Code to see the output.

HTML5 Form Validation

HTML5 provides built-in validation without JavaScript.

HTML5 Form Validation

<!DOCTYPE html>
<html>
<head>
    <title>HTML5 Form Validation</title>

body {
            margin: 0;
            padding: 40px 20px;
            font-family: Arial, sans-serif;
            background: #eef4ff;
        }

.form-container {
            width: 100%;
            max-width: 500px;
            margin: auto;
            background: white;
            padding: 30px;
            border-radius: 12px;
            box-shadow: 0 5px 20px rgba(0, 0, 0, 0.15);
        }

h2 {
            text-align: center;
            color: #2563eb;
            margin-bottom: 25px;
        }

label {
            display: block;
            font-weight: bold;
            color: #333;
            margin-bottom: 8px;
        }

input[type="email"],
        input[type="number"],
        input[type="text"] {
            width: 100%;
            padding: 12px;
            border: 1px solid #bbb;
            border-radius: 6px;
            font-size: 16px;
            margin-bottom: 20px;
        }

input:focus {
            outline: none;
            border-color: #2563eb;
            box-shadow: 0 0 5px rgba(37, 99, 235, 0.3);
        }

input:invalid:not(:placeholder-shown) {
            border-color: #dc2626;
        }

input:valid {
            border-color: #16a34a;
        }

input[type="submit"] {
            width: 100%;
            padding: 12px;
            background: #2563eb;
            color: white;
            border: none;
            border-radius: 6px;
            font-size: 17px;
            font-weight: bold;
            cursor: pointer;
        }

input[type="submit"]:hover {
            background: #1d4ed8;
        }

.note {
            margin-top: 18px;
            padding: 12px;
            background: #f0f7ff;
            border-left: 4px solid #2563eb;
            font-size: 14px;
            color: #444;
        }

@media (max-width: 600px) {
            body {
                padding: 20px 10px;
            }

.form-container {
                padding: 20px;
            }
        }
    </style>
</head>

<body>

<h2><span class="ez-toc-section" id="HTML5_Form_Validation-2"></span>HTML5 Form Validation<span class="ez-toc-section-end"></span></h2>

<form>

<label for="email">Email:</label>

<label for="username">Username:</label>

</form>

<strong>Validation Rules:</strong><br>

• Email must be a valid email address.<br>
            • Age must be between 10 and 60.<br>
            • Username must contain 5 to 15 characters.<br>
            • All fields are required.

</div>

</body>
</html>

Output:

Click Run Code to see the output.

How it works: The browser automatically validates the form before submission. For example, entering an age below 10, above 60, or a username shorter than 5 characters will display a validation message.

Compiled By: Er. Basant kumar yadav

Post Views: 187

Class :9 : Web Site Design :HTML 5

5.1 Introduction to HTML 5

Main features of HTML 5

5.2 New Features in HTML 5

Output:

Advantages of Semantic Elements

5.2 HTML 5 Audio and Video

Output:

Output:

Output:

Video Features

Output:

5.3 HTML 5 Canvas

Output:

Output:

5.4 HTML5 SVG

Output:

Output:

Important Attributes and Events

Output:

HTML 5 Forms

Output:

HTML5 Form Validation

Output:

Contact Details

Quick Links

Follows Us

Copyright @ 2024. All rights reserved. basantyadav.com.np