HTML 5

WEB DESIGNING
What is HTML5?

 Definition of HTML5

HTML (Hypertext Markup Language) is the standard language used to create and
structure content on the web. It provides the foundation for web pages, allowing
developers to organize text, images, links, and other multimedia elements in a
coherent and accessible manner. HTML uses a system of tags and attributes to
define the structure and presentation of web content.
Evolution from HTML4 to HTML5
•HTML 1.0 to 4.01: Initial versions provided the basic framework and functionalities.
•XHTML: A stricter version of HTML 4.01, combining HTML and XML.
•HTML5: The latest version, introduced new elements, APIs, and improved support for multimedia,
forms, and overall better user experience.
Overview of HTML and its
importance in web development
HTML5 is the latest iteration of the Hypertext Markup Language, the foundational
technology used for creating and structuring content on the World Wide Web.
Released by the World Wide Web Consortium (W3C) and the Web Hypertext
Application Technology Working Group (WHATWG), HTML5 introduces a host of new
features and improvements that make it easier for developers to create rich,
interactive, and responsive web applications.
Basic HTML Document Structure:
Key Features of HTML5
1) New Semantic Elements

•Purpose: Improve the structure and readability of web content, making it easier for both
developers and search engines to understand.
•Examples:
•<header>: Defines the header section of a document or section.
•<footer>: Defines the footer section of a document or section.
•<article>: Represents a self-contained piece of content.
•<section>: Defines a section in a document.
•<nav>: Defines navigation links.
•<aside>: Represents content that is tangentially related to the content around it.
2) Multimedia Support
•Purpose: Integrate audio and video content directly into web pages without relying on external plugins.
•Elements:
•<audio>: Embeds audio content.
•<video>: Embeds video content.
Example:
3) Graphics and Animation

•Purpose: Enable the creation and manipulation of graphics and animations directly in the browser.
•Elements and Technologies:
•<canvas>: A drawable region defined in HTML code with height and width attributes.
•SVG (Scalable Vector Graphics): XML-based markup for describing two-dimensional vector
graphics.
•Example:
4) Enhanced Form Controls
•Purpose: Simplify the creation of interactive forms and improve user input validation.
•New Input Types: email, url, date, color, range, etc.
•New Attributes: placeholder, required, pattern, etc.
•Example:
5) APIs and Additional Features
• Geolocation API: Allows web applications to access the geographical
location of a user.
• Drag and Drop API: Enables drag-and-drop functionality.
• Web Storage API: Provides local storage for web applications (localStorage
and sessionStorage).
• Web Workers API: Allows background threads for processing to enhance
performance.
• Example of Local Storage
6) Improved Parsing and Error Handling
•Purpose: Ensure consistent behavior across different browsers.
•Features: More forgiving syntax and error handling mechanisms.

7) Accessibility Improvements
•Purpose: Make web content more accessible to people with disabilities.
•Technologies: ARIA (Accessible Rich Internet Applications) support for improved
navigation and usability.
Visual Studio Code
VS CODE
Visual Studio Code (VS Code)
 Visual Studio Code is a free, open-source code editor developed by Microsoft,
designed for building and debugging modern web and cloud applications. It is
lightweight, cross-platform (available on Windows, macOS, and Linux), and offers
powerful features such as:

• IntelliSense: Smart code completion and syntax highlighting.

• Built-in Git integration: Easy version control management.

• Extensibility: A vast marketplace for extensions to enhance functionality.

• Integrated terminal: Run command-line tasks directly within the editor.

• Live Share: Real-time collaboration with other developers.

 VS Code is widely used by developers for its versatility, speed, and robust
ecosystem, making it suitable for various programming languages and frameworks.
How to Install
Visual Studio Code
A STEP-BY-STEP GUIDE
Downloading Visual Studio Code
 Visit the Official Website

• Open your web browser.

• Go to code.visualstudio.com.

• Screenshot of the VS Code homepage.

Selecting the Correct Version
 Choose Your Operating System

• Options: Windows, macOS, Linux.

• Click on the appropriate download button.

• Screenshot of the download page with OS options highlighted.

 Installing on Windows
 Run the Installer
•Locate the downloaded file (e.g., VSCodeSetup.exe).
•Double-click to run the installer.
•Screenshot of the installer file.
 Setup Wizard
•Follow the setup wizard instructions.
•Accept the license agreement.
•Screenshot of the setup wizard steps.
Launching Visual Studio Code
 Open VS CodeWindows:

• Start Menu > Visual Studio Code.

• macOS: Applications folder > Visual Studio Code.

• Linux: Use the terminal or applications menu.

• Screenshot of VS Code welcome screen.

Installing Extensions
 Open Extensions View
•Click the Extensions icon in the Activity Bar on the side of the window.
•Screenshot of the Extensions view.
 Search and Install Extensions
•Search for popular extensions like Python, Prettier, ESLint.
•Click Install.
•Screenshot of installing an extension.
Basic Configuration
 Settings

• Open Settings via File > Preferences > Settings.

• Customize themes, fonts, and other settings.

• Screenshot of the Settings page.

Writing a Simple
HTML5 Program
HELLO, WORLD!
Basic Structure of an HTML5
Document
•<!DOCTYPE html>: Declares the document type.

•<html>: Root element of the HTML document.

•<head>: Contains meta-information about the

document.

•<body>: Contains the visible content of the webpage.

HELLOW WORLD PROGRAM
•<!DOCTYPE html>: Declares the document as an HTML5 document.

•<html lang="en">: The root element that specifies the language (English).

•<head>: Contains meta-information about the document.

•<meta charset="UTF-8">: Sets the character encoding to UTF-8.

•<meta name="viewport" content="width=device-width, initial-scale=1.0">: Ensures proper

rendering on mobile devices.

•<title>Hello World</title>: Sets the title of the webpage (shown in the browser tab).

•<body>: Contains the content of the webpage.

•<h1>Hello, World!</h1>: Displays "Hello, World!" as a heading.