ASSIGNMENT 1
1. Difference between HTML <div> tag and HTML5
<header>, <section> tags with example programs.
Feature <div> <header>, <section> (HTML5)
Semantic? No yes
Purpose Generic container Descriptive grouping of content
Not helpful for screen
Accessibility Improves accessibility and SEO
readers
HTML Version HTML 4 and HTML5 HTML5 only
1. <div> Tag (Non-Semantic)
• Purpose: Generic container for grouping and styling elements.
• No specific meaning: Used mainly with CSS or JavaScript.
• Non-semantic: Doesn't describe the content it holds.
• <!DOCTYPE html>
• <html>
• <head>
• <title>div Example</title>
• <style>
• .header {
• background-color: #ddd;
• padding: 10px;
• }
• .section {
• margin: 10px 0;
• }
• </style>
• </head>
• <body>
1
•
• <div class="header">
• <h1>Welcome to My Website</h1>
• </div>
•
• <div class="section">
• Example Using <div>:
• <p>This is a paragraph inside a section.</p>
• </div>
•
• </body>
• </html>
2. <header> and <section> Tags (Semantic - HTML5)
• <header>: Represents introductory content or navigation links.
• <section>: Represents a thematic grouping of content, like a chapter or part of a
document.
• Semantic: Helps search engines and developers understand the content's purpose.
Example Using <header> and <section>:
<!DOCTYPE html>
<html>
<head>
<title>Semantic Tags Example</title>
<style>
header {
background-color: #eee;
padding: 10px;
section {
margin-top: 10px;
</style>
2
</head>
<body>
<header>
<h1>Welcome to My Website</h1>
<nav>
<a href="#">Home</a> |
<a href="#">About</a>
</nav>
</header>
<section>
<h2>Introduction</h2>
<p>This section contains the introduction of the site.</p>
</section>
</body>
</html>
2. Write and explain with example program for HTML5 date, email, range, color (form
controls).
1. <input type="date">
• Allows the user to pick a date using a date picker.
• Browser ensures the input is a valid date format.
2. <input type="email">
• Accepts a valid email address.
• If the user enters an invalid email (without @ or .com), the form won’t submit.
3. <input type="range">
• Lets the user choose a value from a range (slider).
• Often used for volume, brightness, rating, etc.
3
4. <input type="color">
• Opens a color picker to select a color.
Returns the selected color’s HEX code (like #ff0000)
<!DOCTYPE html>
<html>
<head>
<title>HTML5 Input Types</title>
</head>
<body>
<h2>HTML5 Form Controls Example</h2>
<form>
<!-- Date Picker -->
<label for="dob">Date of Birth:</label>
<input type="date" id="dob" name="dob"><br><br>
<!-- Email Input -->
<label for="email">Email Address:</label>
<input type="email" id="email" name="email" required><br><br>
<!-- Range Slider -->
<label for="volume">Volume (0 to 100):</label>
<input type="range" id="volume" name="volume" min="0" max="100"><br><br>
<!-- Color Picker -->
<label for="favcolor">Choose your favorite color:</label>
<input type="color" id="favcolor" name="favcolor"><br><br>
<input type="submit" value="Submit">
4
</form>
</body>
</html>
3. Example for HTML5 localStorage, sessionStorage, and IndexedDB.
1. localStorage
<!DOCTYPE html>
<html>
<head>
<title>localStorage Example</title>
</head>
<body>
<h2>localStorage Demo</h2>
<button onclick="saveData()">Save</button>
<button onclick="loadData()">Load</button>
<script>
function saveData() {
[Link]("name", "Chandini");
alert("Data saved in localStorage!");
function loadData() {
let name = [Link]("name");
alert("Stored name: " + name);
</script>
</body>
</html>
5
[Link]
<!DOCTYPE html>
<html>
<head>
<title>sessionStorage Example</title>
</head>
<body>
<h2>sessionStorage Demo</h2>
<button onclick="saveSession()">Save</button>
<button onclick="loadSession()">Load</button>
<script>
function saveSession() {
[Link]("course", "Web Development");
alert("Data saved in sessionStorage!");
function loadSession() {
let course = [Link]("course");
alert("Stored course: " + course);
</script>
</body>
</html>
3. IndexedDB
<!DOCTYPE html>
<html>
<head>
<title>IndexedDB Example</title>
</head>
6
<body>
<h2>IndexedDB Demo</h2>
<button onclick="addData()">Add</button>
<script>
let db;
let request = [Link]("MyDatabase", 1);
[Link] = function(event) {
db = [Link];
let objectStore = [Link]("students", { keyPath: "id" });
[Link]("name", "name", { unique: false });
};
[Link] = function(event) {
db = [Link];
};
function addData() {
let transaction = [Link](["students"], "readwrite");
let objectStore = [Link]("students");
let student = { id: 1, name: "Chandini" };
[Link](student);
alert("Data added to IndexedDB!");
</script>
</body>
</html>
4. How to setup geolocation in HTML5
7
To set up geolocation in HTML5, you use the Geolocation API, which is built into most
modern browsers. This API allows web applications to access the user’s geographical location
(with their permission).
Step-by-step to set up Geolocation in HTML5:
1. Check if Geolocation is supported
if ([Link]) {
// Geolocation is available
} else {
// Not supported
[Link] the Current Position
• [Link](successCallback, errorCallback);
• 3. Full Example in HTML5 + JavaScript
<!DOCTYPE html>
<html>
<head>
<title>Geolocation Example</title>
</head>
<body>
<h2>Find My Location</h2>
<button onclick="getLocation()">Get Location</button>
<p id="output"></p>
<script>
function getLocation() {
8
if ([Link]) {
[Link](showPosition, showError);
} else {
[Link]("output").innerHTML = "Geolocation is not supported by
this browser.";
function showPosition(position) {
[Link]("output").innerHTML =
"Latitude: " + [Link] +
"<br>Longitude: " + [Link];
function showError(error) {
switch([Link]) {
case error.PERMISSION_DENIED:
alert("User denied the request for Geolocation.");
break;
case error.POSITION_UNAVAILABLE:
alert("Location information is unavailable.");
break;
case [Link]:
alert("The request to get user location timed out.");
break;
case error.UNKNOWN_ERROR:
9
alert("An unknown error occurred.");
break;
</script>
</body>
</html>
User permission is required – the browser will prompt the user to allow location access.
Works best with HTTPS – most browsers block geolocation on insecure (HTTP) sites.
Location accuracy may vary depending on the device (GPS, WiFi, IP, etc.).
5. Implement Inline and Internal CSS code.
1. Inline CSS:
• Style is applied directly to an element using the style attribute.
2. Internal CSS:
• Styles are defined inside a <style> tag within the <head> of the HTML document.
• Example with Both Inline and Internal CSS
• <!DOCTYPE html>
• <html>
• <head>
• <title>Inline and Internal CSS Example</title>
•
• <!-- Internal CSS -->
• <style>
• body {
• background-color: #f0f0f0;
• font-family: Arial, sans-serif;
• }
•
• h1 {
10
• color: darkblue;
• text-align: center;
• }
•
• .description {
• color: green;
• font-size: 18px;
• margin: 20px;
• }
• </style>
• </head>
•
• <body>
•
• <!-- Inline CSS applied directly to the element -->
• <h1 style="font-size: 36px;">Welcome to CSS Styling</h1>
•
• <!-- Using class that is styled using internal CSS -->
• <p class="description">
• This paragraph uses internal CSS for styling.
• </p>
•
• <!-- Another element with inline CSS -->
• <p style="color: red; font-weight: bold;">
• This paragraph uses inline CSS.
• </p>
•
• </body>
• </html>
6. Implement External CSS code.
Folder Structure:
project-folder/
├── [Link]
└── [Link]
Example:
[Link]:
<!DOCTYPE html>
<html>
11
<head>
<title>External CSS Example</title>
<!-- Linking External CSS -->
<link rel="stylesheet" type="text/css" href="[Link]">
</head>
<body>
<h1>Welcome to My Website</h1>
<p>This paragraph is styled using external CSS.</p>
</body>
</html>
[Link]
/* External CSS File */
body {
background-color: lightblue;
font-family: Arial, sans-serif;
h1 {
color: darkblue;
text-align: center;
}
p{
color: darkgreen;
font-size: 18px;
}
12