HTML5
•
Presentation
An Overview of Modern Web Development
What is HTML5?
• HTML5 is the latest version of HTML, used for
structuring and presenting content on the web.
It improves over HTML4 with better multimedia
support, enhanced semantics, and mobile-
friendly design.
Why Do We Use HTML5?
• • Better Multimedia Support
• • Enhanced Semantics
• • Improved Form Controls
• • Canvas and SVG for Graphics
• • Better Mobile and Responsive Design
• • Offline Support & Web Storage
Why Was HTML5 Developed?
• Before HTML5:
• • Required third-party plugins for media
• • Lacked consistent structure
• • Was not mobile-friendly
• HTML5 makes the web:
• ✅ More interactive
• ✅ More efficient
• ✅ More mobile-friendly
• ✅ More accessible
Who Developed HTML5?
Who Developed HTML5?
✅ Developed by: WHATWG & W3C
✅ Official Release: 2014
✅ Key Figures: Tim Berners-Lee (Inventor of
the Web) & Ian Hickson (HTML5 Spec Lead)
Basic HTML5 Structure
Basic HTML Structure
1.<!DOCTYPE html> - Declares HTML5 document
2.<html lang="en"> - Defines root & language
3.<head> - Contains meta info & title
•<meta charset="UTF-8"> (Supports special characters)
•<meta name="viewport" content="width=device-width,
initial-scale=1.0"> (Responsive design)
4.<body> - Contains visible content
•<h1> Heading | <p> Paragraph
5.Save as .html index.html
(e.g., )
6.Enhance with CSS & JavaScript
Enhancing with CSS & JavaScript
• CSS for Styling:
• <style>
• body { background-color: lightgray; text-align: center; }
• h1 { color: blue; }
• </style>
• JavaScript for Interactivity:
• <script>
• alert('Welcome to My Website!');
• </script>
HTML5 Local Storage
• • Stores data in the browser
• • Data remains even after closing the browser
• • Does not send data to the server automatically
• • Improves performance & user experience
Example: Storing and Retrieving
User Input
• localStorage.setItem('username', 'John');
• var user = localStorage.getItem('username');
• console.log(user); // Output: John
<!DOCTYPE html>
<html lang="en">
<head>
<title>Local Storage Example</title>
</head>
<body>
<h2>Enter Your Name:</h2>
<input type="text" id="nameInput" placeholder="Your name">
<button onclick="saveName()">Save Name</button>
<h3 id="greeting"></h3>
<script>
// Load stored name when the page loads
window.onload = function () {
let storedName = localStorage.getItem("username");
if (storedName) {
document.getElementById("greeting").innerText = "Welcome back, " + storedName + "!";
}
};
// Function to save the name
function saveName() {
let name = document.getElementById("nameInput").value;
localStorage.setItem("username", name);
document.getElementById("greeting").innerText = "Welcome back, " + name + "!";
}
</script>
</body>
</html>
Thank you!
Do you have any questions?
