1.

IDE AND CODE EDITOR

Friday, February 14, 2025 10:15 AM

1. What is IDE
2. Need of IDE
3. IDE Selection
4. Installation and Setup
5. VsCode Extensions

Level 0 SetUp and Fundamentals Page 1

1.1What is IDE ?
Tuesday, July 23, 2024 6:31 PM

1.1 What is an IDE?

Definition:
An IDE (Integrated Development Environment) is a software application that provides a
comprehensive set of tools to assist developers in writing, testing, debugging, and managing code
efficiently. It acts as a central hub where programmers can develop applications seamlessly.

Key Features of an IDE:

1. Code Editor – A text editor designed specifically for writing and editing source code, often with
syntax highlighting, auto-completion, and error detection.
2. Compiler/Interpreter – Converts source code into machine code or interprets it for execution.
3. Debugger – Helps find and fix errors in the code by allowing step-by-step execution.
4. Build Automation – Automates repetitive tasks like compiling, packaging, and deploying
applications.
5. Version Control Integration – Connects with systems like Git to track code changes and
collaborate.
6. Project Management – Provides tools for organizing files, managing dependencies, and
structuring codebases.
7. Plugin Support – Extensibility to add extra functionality, like database management tools,
testing frameworks, etc.

• Conclusion
An IDE is an essential tool for developers as it integrates all necessary development tools into
a single environment. Whether for web development, software engineering, or data science,
IDEs greatly enhance productivity, making development faster and more efficient.

Level 0 SetUp and Fundamentals Page 2

1.2Need of IDE
Tuesday, July 23, 2024 6:36 PM

• Streamline development
• Increase productivity
• Simplify the complex task
• Offer unified workshop
• Features : code autocomplete
Syntax highlighting
Version control (can work multiple locations)
Error checking

• Why Use an IDE?

• Efficiency & Productivity: Reduces manual coding errors, speeds up development.
• Simplifies Debugging: Integrated tools help detect and fix errors quickly.
• Code Management: Provides organization for large-scale projects.
• Collaboration: Supports version control and team collaboration.
• Reduces Context Switching: Developers can write, test, and debug code in one place.

Level 0 SetUp and Fundamentals Page 3

1.3 IDE selection
Tuesday, July 23, 2024 6:39 PM

Sublime text
Atom
VS code
Git hub

• Popular IDEs for Web Development (HTML, CSS,

JavaScript)
a. Visual Studio Code (VS Code) – Lightweight, fast, supports extensions.
b. Sublime Text – Simple, customizable, with powerful editing features.
c. Atom – Open-source, flexible, and user-friendly.
d. Brackets – Designed for front-end development.
e. Eclipse & IntelliJ IDEA – More suited for Java but also supports web development.

Level 0 SetUp and Fundamentals Page 4

1.4 Installation
Tuesday, July 23, 2024 6:40 PM

VS CODE + Extension

Extension like: Live server

Pitier

Level 0 SetUp and Fundamentals Page 5

2. Website Components and Fundamental
Friday, February 14, 2025 11:08 AM

1. Client Side vs Server Side

2. FrontEnd / BackEnd / FullStack
3. Role of Browser
4. HTML
5. CSS
6. JS

Level 0 SetUp and Fundamentals Page 6

2.1 Client side VS server side
Tuesday, July 23, 2024 6:41 PM

1. Introduction
Web applications are divided into Client-side and Server-side components. Each has a specific role in
processing data, rendering content, and handling user interactions.

Feature Client side Sever side

[Link] Runs on the user's device (browser) Runs on a remote server
Location
[Link] HTML , CSS , Java script PHP , python , Java , [Link] etc..
[Link] job Handles user interactions (UI updates, Processes data, manages databases,
animations, event handling) and serves content

4. Access Level Cannot access server-side data directly Can read, write, and modify data in
a database

[Link] Quicker for UI changes Slower due to database queries and

Response time must be better network latency
Must be fast for better user experience

• Detailed Explanation of Each Concept :

1. Execution Location
• Client-side: Runs in the web browser of the user’s device (computer, tablet, or phone).
• Server-side: Runs on a web server, which processes requests and sends responses to the
client.
Example:
• Clicking a button changes its color without needing to communicate with the server (Client-
side processing).

2. Programming Languages Used

• Client-side: Uses frontend technologies:
○ HTML – Defines webpage structure.
○ CSS – Styles and designs the page.
○ JavaScript – Adds interactivity (e.g., form validation, animations).
• Server-side: Uses backend languages:
○ PHP – Common in web development.
○ Python – Used for backend frameworks (Django, Flask).
○ Java – Used in enterprise applications.
○ [Link] – JavaScript runtime for backend ([Link]).

3. Main Job
• Client-side: Handles UI interactions like button clicks, animations, and real-time feedback.
• Server-side: Manages authentication, business logic, and database operations.
Example:
• Typing in a search bar suggests words dynamically (Client-side).
• Pressing "Enter" fetches results from the database (Server-side).

Level 0 SetUp and Fundamentals Page 7

 • Pressing "Enter" fetches results from the database (Server-side).

4. Access Level
• Client-side: Cannot directly read or modify database content.
• Server-side: Has full access to databases for reading, writing, and deleting records.
Example:
• JavaScript validates user input before submission (Client-side).
• The server verifies login credentials before granting access (Server-side).

5. Speed Considerations
• Client-side: Faster since it does not require a server request for UI updates.
• Server-side: Slower due to database queries and network latency but essential for secure data
handling.
Example:
• Animations and UI transitions happen instantly (Client-side).
• Retrieving purchase history takes longer because it involves database queries (Server-side).

• Conclusion
Both Client-side and Server-side play crucial roles in web development. A well-optimized application
balances these to provide a smooth user experience and secure data handling.

Level 0 SetUp and Fundamentals Page 8

2.2 Fronted and Backend
Tuesday, July 23, 2024 6:50 PM

1. Introduction
• Web development is divided into Frontend and Backend development.
• Each has a specific role in building web applications and ensuring smooth user interaction.

2. Comparison
1. Frontend
○ Handles UI and user interactions.
○ Uses technologies like HTML, CSS, and JavaScript.
○ Displays content, styling, and animations.
○ Uses frameworks/libraries such as React, Angular, and [Link].
○ Communicates with the backend via APIs.
○ Example: Login form UI design.
2. Backend
○ Manages server, database, and logic.
○ Uses technologies like Java, Python, PHP, and [Link].
○ Processes data, authentication, and business logic.
○ Uses frameworks such as [Link], Django, and Spring Boot.
○ Handles requests from the frontend and interacts with the database.
○ Example: Validating login credentials.

3. Detailed Explanation
1. Frontend Development
○ Frontend is the client-side part of a web application that users interact with directly.
○ Technologies Used:
▪ HTML – Defines the webpage structure.
▪ CSS – Styles the webpage (colors, fonts, layouts).
▪ JavaScript – Adds interactivity (buttons, animations, real-time updates).
○ Example: Clicking a "Sign Up" button triggers an animation.
2. Backend Development
○ Backend is the server-side part of an application that processes requests, manages
databases, and implements logic.
○ Technologies Used:
▪ Java – Used in enterprise-level applications.
▪ Python – Common for AI, ML, and web development (Django, Flask).
▪ PHP – Powers many websites (WordPress, Laravel).
▪ [Link] – JavaScript runtime for backend applications.
○ Example: When you log in, the backend verifies your email and password before
granting access.
3. Full Stack Development (MERN Stack)
○ Covers both Frontend and Backend.
○ MERN Stack:
▪ M – MongoDB (Database).
▪ E – [Link] (Backend framework).
▪ R – [Link] (Frontend framework).
▪ N – [Link] (Server-side runtime).
○ Example: A full-stack developer can build both the UI and the database management
system for a website.

4. Conclusion
• Both Frontend and Backend are crucial for web development.
• Full-stack developers manage both, ensuring seamless application performance.

Level 0 SetUp and Fundamentals Page 9

2.3 Role of browser
Tuesday, July 23, 2024 6:51 PM

1. Introduction
• A web browser is an application that retrieves, interprets, and displays content from the
internet.
• It plays a crucial role in rendering web pages and allowing user interaction.

2. Working of a Browser
1. User Request
○ The user enters a URL or clicks on a link.
○ The browser sends a request to the web server for the corresponding web page.
2. Downloading Website Files
○ The server responds with files like HTML, CSS, and JavaScript.
○ The browser downloads these files and resources (images, fonts, etc.).
3. Rendering the Web Page
○ The browser processes and combines HTML (structure), CSS (styles), and JavaScript
(interactivity).
○ The web page is displayed in the browser window.

3. Functions of a Browser
1. Display the Web Page
○ Interprets and renders HTML, CSS, and JavaScript files.
○ Ensures proper formatting and layout based on the styles provided.
2. User Interaction
○ Handles clicks, scrolls, form submissions, and other actions.
○ Executes JavaScript to update the content dynamically.
3. Fetching and Loading Files
○ Retrieves required assets (HTML, CSS, JavaScript, images) from the web server.
○ Loads and arranges content for a smooth user experience.
4. Updating Content Dynamically
○ Allows JavaScript to modify elements without refreshing the page.
○ Enables real-time updates and interactions (e.g., chat messages, notifications).

4. Conclusion
• Browsers are essential for accessing and interacting with web pages.
• They download, interpret, and render website content efficiently.
• Modern browsers optimize performance for faster loading and better user experience.

Level 0 SetUp and Fundamentals Page 10

 2.4 HTML
Tuesday, July 23, 2024 6:59 PM

• HTML: Stands for HyperText Markup Language. It is the standard

language used to create web pages and web applications.
• HTML defines the structure and layout of a web page. It specifies how
content should be organized and displayed in a browser.
• HTML allows you to add content such as text, links, images, videos,
forms, and other media to the webpage.
• To insert these content elements, we use HTML tags (also called
elements). For example:
• <p></p>: Paragraph tag to add text.
• <a></a>: Anchor tag to add links.
• <img>: Image tag to display images.
• <video>: Video tag to embed videos.
• HTML helps to organize and structure the content in a hierarchical way,
using elements such as headings (<h1>, <h2>, etc.), paragraphs (<p>),
and sections (<div>, <section>)

Level 0 SetUp and Fundamentals Page 11

2.5 CSS
Tuesday, July 23, 2024 7:07 PM

• CSS (Cascading Style Sheets)

• CSS: Stands for Cascading Style Sheets. It is used to control the look and feel of a website by
defining how HTML elements should be displayed.
• CSS allows you to style a web page by controlling properties such as colors, fonts, spacing,
layout, and more.
• CSS is used to control the positioning and size of elements on a web page, including setting
margins, padding, width, height, and alignment.

• Selectors:
• In CSS, a selector is used to target specific HTML elements and apply styles to them. Selectors
allow you to identify HTML elements based on attributes like the element type, class, or id,
and then modify their appearance.

Level 0 SetUp and Fundamentals Page 12

2.6 Java Script
Tuesday, July 23, 2024 7:09 PM

• JavaScript

• JavaScript: A programming language used to add interactivity and dynamic behavior to

websites.

• JavaScript allows you to add logic to a webpage, enabling features like calculations,
animations, form validation, and more.

• Updates: JavaScript allows for updating parts of a web page without reloading the entire
page. This can be achieved through techniques like AJAX (Asynchronous JavaScript and XML)
and DOM manipulation.

• Events: JavaScript can respond to user actions such as clicks, mouse movements, keypresses,
and other interactions. These are called events. Event handling allows the page to react to
user inputs.
○ Example: [Link]("button").addEventListener("click", function()
{ alert("Button clicked!"); });

• Data: JavaScript can fetch and send data to and from a server. It is commonly used with AJAX
or Fetch API to send HTTP requests and handle responses without reloading the page.

Level 0 SetUp and Fundamentals Page 13

1. Starting Up
Friday, February 14, 2025 11:13 AM

1. First File using Text Editor

2. File Extension
3. Opening the project in VsCode
4. [Link]

Level 1 HTML Basics Page 14

1.1 First file using text editor
Tuesday, July 23, 2024 7:13 PM

See in the code section

Steps :
1. Create a text file
2. Write the code :
<!DOCTYPE html>

<html lang="en">
<head>

</head>

<body>

<h1>This is mt first website</h1>

</body>

</html>
3. Save as file of name [Link]
4. Run the file

• CODE :

• [Link] :

• Save above file as a [Link] (with html extension)

• Then run that saved file :
• O/P :

Level 1 HTML Basics Page 15

1.2 File Extension
Tuesday, July 23, 2024 7:30 PM

HTML HTM
Most commonly used Less commonly used
Work on all browser Compatibility in old browser
Widely recognize and supported Same as .html
Save as [Link] Save as [Link]

Key Differences:
• Compatibility: .html is widely supported, whereas .htm is mainly used for backward
compatibility.
• Recognition: Both .html and .htm are supported similarly by browsers today, though .html is
the standard.

Level 1 HTML Basics Page 16

1.3 Open project in vs code
Tuesday, July 23, 2024 7:32 PM

• Just go to the file directory and right click on blank space then select open with vs code.

Level 1 HTML Basics Page 17

 1.4 Importance of [Link]
Tuesday, July 23, 2024 7:33 PM

• Default name of a website's homepage: The file [Link] is the default name assigned to the
homepage of a website. This is essential because when a request is made to the server, many files
are fetched. The server uses [Link] to identify which file to serve as the homepage.
• Fallback mechanism: If no specific file is mentioned in the URL (e.g., [Link]), the server
will automatically load [Link]. It acts as a fallback when no file is specified. If the [Link] file
is not present, the server might display an error (e.g., "Cannot GET /[Link]").
• First page users see: It is the first page that users see when they visit a website, making it a critical
part of the user experience.
• Importance for SEO (Search Engine Optimization): Search engines use the content of the homepage
([Link]) to index and rank the website in search results. SEO algorithms match the content of
[Link] with search queries, which can help improve visibility in search engine results.
• Provides a uniform starting point: It provides a consistent starting point across web servers,
ensuring that all visitors to a website access the homepage.
• Avoiding the use of [Link]: While it's technically possible to avoid using [Link], it's not
recommended as it could lead to inconsistent behavior and problems with URL structure.

Level 1 HTML Basics Page 18

2. Basic Of HTML
Friday, February 14, 2025 11:15 AM

1. What are Tags

2. Using Emmet ! to generate code
3. Basic HTML Page
4. MDN Documentation
5. Comments
6. Case Sensitivity

Level 1 HTML Basics Page 19

 2.1 What are tags
Tuesday, July 23, 2024 7:57 PM

• Definition:
• HTML Tags are the fundamental building blocks of an HTML document. They are used to
define the structure and content of a web page.
• Tags typically come in pairs: an opening tag and a closing tag.
○ Example: <h1>Welcome</h1>, where <h1> is the opening tag and </h1> is the closing
tag.
○ Some tags, like <img>, are self-closing and don't require a closing tag.
• Purpose:
• Tags are used to define various types of content on a webpage, such as text, images, links, etc.
• They give structure and meaning to the content.

• Structure:
• Opening Tag: Denotes the beginning of an element. It is enclosed in angle brackets (< >).
○ Example: <p> for a paragraph element.
• Closing Tag: Denotes the end of an element. It is similar to the opening tag but includes a
forward slash before the tag name (</ >).
○ Example: </p> for the end of a paragraph.
• Content: The content placed between the opening and closing tags.
○ Example: <p>This is a paragraph.</p>.

• Nesting of Tags:
• HTML tags can be nested inside other tags, which means you can place one tag inside another
to create more complex structures.
○ Example: <div><h2>Header Inside Div</h2><p>Paragraph Inside Div</p></div>.

• Attributes:
• Tags can also contain attributes, which provide additional information about the element.
• Attributes are added inside the opening tag.
○ Example: <a href="[Link] Example</a>, where href is an
attribute specifying the URL of the link.

Level 1 HTML Basics Page 20

2.2 Using Emmet ! To generate the code
Tuesday, July 23, 2024 8:04 PM

• Type ! and wait for suggestions

Emmet Abbreviation
• To generate the boiler plate code at one click , we can also modify the boiler plate code .
• It is functionality of vs code IDE.

Level 1 HTML Basics Page 21

 2.3 Basic html page
Tuesday, July 23, 2024 9:15 PM

<!DOCTYPE html> Defines the HTML version (html 5 version)

<html lang="en"> parent of all HTML tags / Root element

<head> parent of meta data (head contain meta data (data which not
see in display))
<title> My first webpage </title> title of the web page (for chrome )
</head>

<body> parent of content tag , in this tag all content are visible in web
page
<h1>Hello World</h1>
</body>
</html>

1. Basic Structure:
○ An HTML page consists of several key elements that work together to structure a web page.
Below is a simple example of a basic HTML page:

<!DOCTYPE html>
<html lang="en">
<head>
<title>My first webpage</title>
</head>
<body>
<h1>Hello World</h1>
</body>
</html>

2. Explanation of Each Element:

○ <!DOCTYPE html>:
▪ This is the Document Type Declaration (Doctype).
▪ It tells the browser that the page is written in HTML5.
▪ This declaration helps ensure that the HTML page is rendered according to the HTML5
specifications.
▪ Example: <!DOCTYPE html> defines the HTML version (HTML5 in this case).
○ <html lang="en">:
▪ The <html> tag is the root element of the HTML page. It encompasses all the content on
the page.
▪ The lang="en" attribute specifies that the language of the content is English.
▪ Example: <html lang="en"> is the parent of all HTML tags and is the root element of the
page.
○ <head>:
▪ The <head> tag contains metadata about the HTML document. This metadata is not
displayed directly on the web page.
▪ It includes things like the title, character encoding, linked stylesheets, and scripts.
▪ Example: The <head> element contains meta data that is not visible to the user on the
page.

<head>
<title>My first webpage</title>
</head>

Level 1 HTML Basics Page 22

 </head>
○ <title>:
▪ The <title> tag defines the title of the web page that appears in the browser's title bar
or tab.
▪ Example: <title>My first webpage</title> specifies the title that will be displayed on the
browser tab.
○ <body>:
▪ The <body> tag contains the content of the webpage that is visible to users.
▪ This is where you place text, images, links, headings, and other content to be displayed
on the page.
▪ Example: <body> is the parent of content tags, and all content placed inside this tag is
visible on the webpage.

html
CopyEdit
<body>
<h1>Hello World</h1>
</body>
○ <h1>:
▪ The <h1> tag defines the main heading of the page. It is a block-level element and the
largest of the heading tags (<h1> to <h6>).
▪ Example: <h1>Hello World</h1> displays "Hello World" as a heading on the webpage.

3. Full HTML Page Example:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My First Webpage</title>
</head>
<body>
<h1>Hello World</h1>
<p>This is my first webpage!</p>
</body>
</html>
○ <meta charset="UTF-8">:
▪ This tag defines the character encoding for the page (UTF-8 in this case) to support a
wide range of characters.
○ <meta name="viewport" content="width=device-width, initial-scale=1.0">:
▪ This tag helps make the page responsive by setting the width of the page to match the
device's width, which is important for mobile devices.

Notes:
• Word Wrap in VS Code:
○ In VS Code, if your lines of code extend beyond the window, you can use the word wrap
feature to automatically break long lines into multiple lines.
○ To enable word wrap, go to the View menu > Toggle Word Wrap, or press Alt + Z to enable it.
This helps in maintaining readability when working with long lines of code.

Level 1 HTML Basics Page 23

2.4 MDN Documentation
Tuesday, July 23, 2024 9:22 PM

• Visit : [Link]
• It is a official resource for html
• Offers comprehensive guidance and tutorials
• Includes example of real world
• Update with latest html features
• Trusted by developers worldwide

Level 1 HTML Basics Page 24

2.5 comments
Tuesday, July 23, 2024 9:25 PM

1. Purpose of Comments:
○ Comments are not shown on the webpage but can be helpful for developers to
understand code or leave notes for others.
○ They assist in code organization, making it easier to manage and modify the code in the
future.
○ Example: You might use comments to explain a complex block of code or provide
instructions for other developers.

2. Syntax:
○ The syntax for adding a comment in HTML is:
<!-- This is a comment -->
○ Comments are enclosed between <!-- (opening) and --> (closing). Anything placed inside
these markers will be treated as a comment.

3. Types of Comments:
○ Single-line Comment:
▪ A single-line comment is used when you only need to comment on one line of
code.
▪ Example:
<!-- This is a single-line comment -->
○ Multi-line Comment:
▪ Multi-line comments are used when you need to comment on multiple lines of
code.
▪ You can span multiple lines with a single comment block.
▪ Example:
<!--
This is a multi-line comment.
It can span multiple lines.
Useful for commenting out large blocks of code.
-->

4. Usage Examples:
○ Single-line Comment:
<!-- This is a comment for a heading -->
<h1>Welcome to My Website</h1>
○ Multi-line Comment:
<!--
This section contains the main navigation menu.
It includes links to different pages of the website.
-->
<nav>
<ul>
<li><a href="[Link]">Home</a></li>
<li><a href="[Link]">About</a></li>
<li><a href="[Link]">Contact</a></li>
</ul>
</nav>
Notes:
• Best Practices:
○ Use comments to explain complex code or remind yourself or others about the purpose
of certain sections.

Level 1 HTML Basics Page 25

 of certain sections.
○ Avoid excessive commenting, as it can clutter the code. Focus on commenting only
where it's necessary for understanding.
○ Comments can also be used to temporarily disable certain parts of code during
debugging or testing.

Level 1 HTML Basics Page 26

2.6 Case Sensitivity
Wednesday, February 12, 2025 9:35 AM

1. HTML is case-insensitive for tag names

2. Attribute names are also be case-insensitive
3. Best practice: use lowercase for consistency

Level 1 HTML Basics Page 27

Projects
Tuesday, July 23, 2024 9:36 PM

• Create [Link]
• Generate boilerplate
• Write "I am learning with prashant sir"
• Use comments
• Also use case sensitive tags

• CODE : level 1->project

• [Link] :

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=
1.0">
<title>Document</title>
</head>
<body>
<!--This is a single line comment-->
<div>
<p>I am learning with prashant sir ...</p>
<P>This is a paragraph that written in capital tags (capitlal P)
</P>
</div>
<!--This is a
multi line comment-->
</body>
</html>

O/P :

Level 1 HTML Basics Page 28

1. HTML Attributes
Friday, February 14, 2025 11:18 AM

1. What are HTML Attributes

2. Id Property

Level 2 HTML Tags Page 29

1.1 what are html attributes
Tuesday, July 23, 2024 9:38 PM

1. Definition:
○ HTML Attributes provide additional information about HTML elements. They are used
to modify or define the behavior and appearance of elements on the webpage.
○ Attributes are placed within the opening tag of an HTML element, providing extra
details about how that element should be rendered or behave.
2. Location:
○ Attributes are always included in the opening tag of an element, after the tag name.
▪ Example: <a href="[Link] Here</a>, where href is an
attribute of the <a> (anchor) tag.
3. Syntax:
○ The syntax for an attribute is always in the form of name=value.
○ The attribute name and value are separated by an equal sign (=).
○ The value is often enclosed in double quotes (" "), although single quotes (' ') can also be
used in some cases.
▪ Example: <img src="[Link]" alt="A beautiful view">
▪ Here, src is the name of the attribute, and "[Link]" is its value.
4. Common HTML Attributes:
○ href: Used with anchor (<a>) tags to specify the URL of the page the link points to.
▪ Example: <a href="[Link] Example</a>
○ src: Used with image (<img>) tags to specify the path of the image file.
▪ Example: <img src="[Link]" alt="A beautiful view">
○ alt: Used with image (<img>) tags to provide an alternative text for the image (important
for accessibility).
▪ Example: <img src="[Link]" alt="A beautiful view">
○ id: Used to assign a unique identifier to an element.
▪ Example: <div id="header">Content</div>
○ class: Used to specify one or more class names for an element, typically for styling or
JavaScript targeting.
▪ Example: <p class="highlight">This is highlighted text.</p>
○ style: Used to apply inline CSS styles directly to an element.
▪ Example: <p style="color: red;">This is red text.</p>
○ type: Used with <input> elements to define the input type (e.g., text, password, radio).
▪ Example: <input type="text" placeholder="Enter your name">
5. Single and Multiple Attributes:
○ An HTML element can have one or more attributes.
▪ Example with multiple attributes:
<a href="[Link] target="_blank" title="Go to Example">Click
Here</a>

In this example, the <a> tag has three attributes: href, target, and title.
○ Each attribute is separated by a space within the opening tag.
6. Types of Attributes:
○ Global Attributes: These can be used with any HTML element (e.g., id, class, style, title).
○ Element-specific Attributes: These are specific to certain elements (e.g., src for <img>,
href for <a>).
Notes:

Level 2 HTML Tags Page 30

Notes:
• Best Practices:
○ When using multiple attributes, ensure that they are clearly separated by a single space.
○ For accessibility purposes, always use the alt attribute for images to provide a text
description.
○ Always use double quotes for attribute values to maintain consistency.

Level 2 HTML Tags Page 31

 1.2 id property
Tuesday, July 23, 2024 9:41 PM

• Unique identifier : Each id should be unique within a page

• When we assign id to the element then , we can identify uniquely to that element
• Anchoring : allow for direct links to sections using the #id syntax in the URLS
• CSS and J.S. : used for selecting the elements for styling or scripting with use of id we can
target specific element.
• Use for the link the page

Ex:

<div id="header" >This Is the header</div>

• Definition:
• The id attribute is used to assign a unique identifier to an HTML element. This allows you to
target and reference that element uniquely on the page.
• Each element on the page should have a unique id. No two elements should share the same id
value.
• Unique Identifier:
• The id attribute ensures that each element can be identified uniquely on the page. This is
important for distinguishing between different elements and allows precise selection and
manipulation of elements.
• Example: <div id="header">This is the header</div> - Here, header is the unique identifier for
this <div> element.
• Anchoring:
• The id attribute allows you to create anchors within a page. By specifying an id for an element,
you can link directly to that section of the page using the #id syntax in the URL.
• Example: [Link] would link directly to the section with
id="header".
• CSS and JavaScript:
▪ CSS: The id can be used to target specific elements for styling purposes. In CSS, an id is
selected using the # symbol.
□ Example:
#header {
background-color: blue;
color: white;
}
□ This CSS rule will style the element with id="header", changing its background to blue
and the text color to white.
▪ JavaScript: Similarly, JavaScript can use the id to target and manipulate elements.
□ Example:
[Link]("header").innerHTML = "New Header Content";
□ This JavaScript code finds the element with id="header" and updates its content.
• Important Points:
○ Uniqueness: Each id should be unique within the page. No two elements can share the same id, as
this can cause conflicts in both styling and JavaScript interactions.
○ Global Accessibility: Since id is unique, it is globally accessible across the page and can be used in
various situations, including styling, linking, and scripting.
○ Example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">

Level 2 HTML Tags Page 32

 <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Using ID Attribute</title>
<style>
#header {
background-color: #4CAF50;
color: white;
padding: 15px;
text-align: center;
}
</style>
</head>
<body>
<div id="header">This is the header</div>
<p>This is a paragraph.</p>
<a href="#header">Go to Header</a>

<script>
// JavaScript example: Change the text of the header
[Link]("header").innerHTML = "Updated Header Content";
</script>
</body>
</html>
○ Explanation:
▪ The <div> with id="header" has a unique identifier.
▪ The CSS applies styles to the element with id="header".
▪ The link (<a href="#header">) allows the user to jump directly to the header section when
clicked.
▪ The JavaScript dynamically updates the content of the element with id="header".

• Notes:
• Best Practices:
○ ID Naming: The id value should be descriptive and meaningful, reflecting the content or purpose of
the element.
○ Avoid Duplicate IDs: Never use the same id for more than one element in a page, as this will cause
issues with both CSS styling and JavaScript functions.
○ Global and Local Use: While id is a global attribute, it is most commonly used within the page,
particularly when creating internal navigation or targeting specific elements for interaction.

Level 2 HTML Tags Page 33

2. HTML Tags
Friday, February 14, 2025 11:19 AM

1. Heading Tag
2. Paragraph Tag
3. <br> tag
4. <hr> tag
[Link] Tag
6. Video Tag
7. Anchor Tag
8. Bold / Italic / Underline / Strikethrough
9. Pre Tag
10. Big / Small Tag
11. Superscript / Subscript

Level 2 HTML Tags Page 34

2.1 Heading tag
Tuesday, July 23, 2024 9:39 PM

1. Definition:
○ The Heading Tag is used to define headings in an HTML document. Headings help
organize and structure the content of a webpage into logical sections, making it easier
for both users and search engines to understand.
2. Heading Levels:
○ HTML provides six levels of headings, ranging from <h1> to <h6>, with each representing
a different level of importance:
▪ <h1>: The most important heading, typically used for the main title of the
webpage or a significant section.
▪ <h2>: Used for subheadings under <h1>.
▪ <h3>: Used for further subheadings under <h2>.
▪ And so on, down to <h6>, which represents the least important heading.
○ Example:
<h1>Main Title</h1>
<h2>Subheading under the Main Title</h2>
<h3>Subheading under the Subheading</h3>
3. SEO Importance:
○ SEO (Search Engine Optimization): The proper use of heading tags plays a crucial role in
SEO.
○ Search engines, like Google, use headings to determine the structure and relevance of
content. They prioritize the text in <h1> as the most important part of the page.
○ Best Practice: Use heading tags for importance and content structure, not just for font
size. This helps ensure that search engines can better rank your content.
▪ Example: If your main topic is about "Web Development," the heading <h1>
should represent this key topic, and subsequent headings like <h2> and <h3>
should be used for subtopics.
○ Consequences of Random Heading Use: If headings are used randomly (e.g., using <h1>
for a subheading), it can negatively affect the page's SEO, as search engines will have
difficulty understanding the content hierarchy.
4. Structuring Content:
○ Headings help in structuring content logically. They break the content into sections,
making it more readable and easier to navigate, both for users and search engines.
○ Proper use of headings enhances the user experience by guiding the reader through the
page and giving them clear expectations about the content in each section.

Notes:
• Best Practices:
○ Use only one <h1> tag per page, as it represents the most important content. This helps
maintain content hierarchy.
○ Follow a logical hierarchy: <h1> for the main topic, <h2> for subtopics, and so on.
○ Avoid skipping levels: Don’t jump directly from <h1> to <h4>, as this can confuse both
users and search engines about the structure of the content.
○ Use headings to create a clear outline of your content, guiding readers through your
page logically.

• CODE :

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">

Level 2 HTML Tags Page 35

 <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=
1.0">
<title>Heading</title>
</head>
<body>
<h1>heading 1</h1>
<h2>heading 2</h2>
<h3>heading 3</h3>
<h4>heading 4</h4>
<h5>heading 5</h5>
<h6>heading 6</h6>
</body>
</html>

Level 2 HTML Tags Page 36

2.2 paragraph tag
Tuesday, July 23, 2024 9:54 PM

1. Definition:
○ The <p> tag is used to define a paragraph in an HTML document. It is one of the most
common tags for displaying text in a readable and organized manner.
2. Usage:
○ A paragraph is enclosed within the <p> and </p> tags:
<p>This is a paragraph.</p>
○ The content inside the <p> tag is treated as a block of text, and the browser
automatically adds spacing before and after each paragraph to separate it from other
content, improving readability.
3. Text Wrapping:
○ Text inside the <p> tag automatically wraps to the next line when it reaches the end of
the container (such as the width of the webpage or its parent container).
○ This makes the <p> tag ideal for text-heavy content, as it allows the content to flow
naturally from one line to the next, creating organized blocks of text.
4. Automatic Spacing:
○ The paragraph tag adds spacing both before and after the paragraph, ensuring that the
text is separated from other elements, such as other paragraphs or images.
▪ Example:
<p>This is the first paragraph.</p>
<p>This is the second paragraph.</p>

In this example, there will be space between the two paragraphs.

5. Common Usage:
○ The <p> tag is frequently used in documents where large amounts of text need to be
displayed, such as articles, blog posts, or informational pages.
6. Example:
<p>This is an example of a paragraph that explains the purpose of the <p> tag in HTML.</p>
7. Notes on Text Formatting:
○ Ignoring Extra Spaces:
▪ When multiple spaces are added between words in a <p> tag, the browser ignores
extra spaces and displays only a single space between words.
▪ Example:
<p>If we pass many spaces between the words then it is ignore and only
one space is display on the webpage</p>
□ Output:
If we pass many spaces between the words then it is ignore and only one
space is display on the webpage
○ Ignoring Line Breaks:
▪ If you press Enter (or use a line break) within the <p> tag, it will be ignored, and
the content will be displayed in a continuous line, wrapping only when the
webpage layout ends.
▪ Example:
<p>If we enter next line in parent tag then it is also ignore by
the tag and print in one line till webpage layout end</p>
□ Output:
If we enter next line in parent tag then it is also ignore by the tag and print
in one line till webpage layout end
8. Using Lorem Ipsum for Placeholder Text:
○ You can use the lorem50 placeholder to generate 50 random words in a paragraph.
▪ Example:
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec nec purus nunc.

Level 2 HTML Tags Page 37

 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec nec purus nunc.
Sed vitae magna eu ante vehicula dapibus.</p>
9. Example with Text Wrapping and Extra Spaces:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Paragraph Tag Example</title>
</head>
<body>
<p>If we pass many spaces between the words then it is ignore and only one space
is display on the webpage.</p>
<p>If we enter next line in parent tag then it is also ignore by
the tag and print in one line till webpage layout end.</p>
</body>
</html>
Notes:
• Best Practices:
○ Spacing: Don't use extra spaces within the paragraph tags for alignment. Instead, use
CSS for better control over spacing and alignment.
○ Avoid Multiple Paragraphs with Extra Spaces: Using the <p> tag for formatting text with
multiple spaces or line breaks can cause layout issues. Consider using other HTML tags
(such as <pre>) for fixed-width text formatting if you need to preserve multiple spaces or
line breaks.

• CODE :

• No_2_2_paragraphTah :

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=
1.0">
<title>Document</title>
</head>
<body>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Quam,
ducimus? Ducimus aut, voluptates iste, magnam eius corporis tempore
necessitatibus quasi magni in voluptatum ab esse animi et molestias sit
accusamus quidem mollitia, cupiditate earum ut! Quis nemo, officia natus
nostrum earum qui recusandae eligendi velit possimus obcaecati sed
dolorem facilis!</p>
<p>If we pass many spaces between the words then it
is ignore and only one space is display on the webpage </p>
<p>If we enter next line in parent tag then it is also ignore by

the tag and print in one line till webpage layout end </p>
</body>
</html>

O/P:

Level 2 HTML Tags Page 38

Level 2 HTML Tags Page 39
2.3 <br> tag
Tuesday, July 23, 2024 10:03 PM

1. Definition:
○ The <br> tag in HTML is used to add a line break within text. It forces the content
following it to appear on the next line, without starting a new paragraph.
2. Tag Characteristics:
○ Empty Tag: The <br> tag is an empty tag, meaning it doesn't have any content or a
closing tag. It does not require a separate </br> closing tag.
○ Self-closing: Since it doesn't contain any content, it only requires the opening tag: <br>.
However, both <br> and </br> are technically valid in HTML5, but it is recommended to
use just <br> for simplicity and consistency.
3. Line Break:
○ The primary purpose of the <br> tag is to introduce a line break, which moves the
content to the next line within the same block (such as within a paragraph or a div).
4. Example:
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit.
<br>
Ab incidunt provident aspernatur quos similique iure. Doloremque velit eius laboriosam
reiciendis.</p>

Output: Lorem ipsum dolor sit amet consectetur adipisicing elit.

Ab incidunt provident aspernatur quos similique iure. Doloremque velit eius laboriosam
reiciendis.
5. Using <br> for Line Breaks:
○ The <br> tag is especially useful when you want to break text onto a new line without
creating a new paragraph. For example, in addresses, poems, or any other content
where line breaks are needed within a block of text.
6. Incorrect Use of </br>:
○ While the </br> closing tag may appear to work in some browsers, it is not necessary
and should be avoided.
○ HTML5 recommends using only <br>, without the closing tag, to ensure the correct
syntax.
7. Notes on Usage:
○ Spacing: The <br> tag is best used for short line breaks within text content. If you need
to create large gaps or spaces between blocks of content, it's better to use margins and
padding in CSS or wrap content in different elements like paragraphs (<p>), divs (<div>),
or sections (<section>).
○ Multiple Line Breaks: If multiple breaks are needed, you can use multiple <br> tags
consecutively.
▪ Example:
<p>Line 1<br><br>Line 2<br><br>Line 3</p>
▪ This will create extra line spacing between lines 1, 2, and 3.

Best Practices:
• Avoid Excessive Use: Avoid excessive use of <br> tags for structuring the page layout. Instead,
use proper HTML elements like <p>, <div>, and CSS for spacing and layout adjustments.
• Line Breaks in Text: The <br> tag is helpful for adding line breaks in textual content such as
poetry, addresses, or any instance where a paragraph-like structure isn't required.

• CODE :

• No_2_3_brTag :

Level 2 HTML Tags Page 40

• No_2_3_brTag :

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=
1.0">
<title>Document</title>
</head>
<body>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit.
<br>
Ab incidunt provident aspernatur quos similique iure. Doloremque
velit eius laboriosam reiciendis.</p>
<br>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit.
Eum, quibusdam?</p>
</br>
<p>Lorem ipsum dolor sit amet.</p>
</body>
</html>

O/P :

Level 2 HTML Tags Page 41

2.4 <hr> tag
Tuesday, July 23, 2024 10:09 PM

1. Definition:
○ The <hr> tag is used to create a horizontal rule or line that acts as a divider between
sections of content on a webpage.
○ It visually separates content, making the layout clearer and more organized.
2. Tag Characteristics:
○ The <hr> tag is an empty tag, meaning it does not have any content or closing tag. It is
self-closing, and you do not need a </hr> tag.
○ It creates a horizontal line across the width of its container (usually the page or a
section).
3. Appearance:
○ By default, the <hr> tag displays as a thin horizontal line that stretches across the width
of its container. Its appearance can be customized using CSS (e.g., to change color,
thickness, style, etc.).
4. Styling the <hr> Tag:
○ You can customize the appearance of the <hr> tag using CSS to change its thickness,
color, or style.
Example of styling:
<hr style="border: 2px solid black; width: 50%; margin: 20px auto;">

This will create a thicker black horizontal line that is 50% of the container's width,
centered with some spacing around it.
5. Use Cases:
○ The <hr> tag is typically used to separate sections or content blocks on a webpage,
helping to improve the visual organization and flow of the page.
○ It is especially useful when you want to break content into distinct sections, such as
dividing a blog post into different segments or separating content types.
6. Notes:
○ Visual Structure: The <hr> tag is primarily used for visual structuring rather than
functional content. It provides a clear demarcation between different blocks of content,
making it easier for users to understand the layout.
○ Semantic HTML: While <hr> helps visually, consider using semantic elements such as
<section>, <article>, or <div> for better content structure.

Best Practices:
• Use Sparingly: The <hr> tag should be used sparingly to avoid cluttering the page with too
many lines. Overuse can make the page look disorganized.
• CSS Customization: Customize the <hr> tag using CSS to match the design of the webpage and
to make the line blend well with the overall layout.

• CODE :
• No_2_4_hrTag :

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=
1.0">
<title>Document</title>
</head>
<body>

Level 2 HTML Tags Page 42

<body>
<p>This is a testing of hr tag</p>
<hr>
<p>it provides a horizontal line</p>
</body>
</html>

O/P :

Level 2 HTML Tags Page 43

2.5 image tag
Tuesday, July 23, 2024 10:11 PM

1. Definition:
○ The <img> tag is used to embed images in a webpage. It allows you to display pictures,
illustrations, or other visual content within the page's layout.
2. Tag Characteristics:
○ The <img> tag is a self-closing tag, meaning it does not require a closing tag (</img>). It
only needs the opening tag to be used.
○ It typically includes important attributes like src and alt.
3. Key Attributes:
○ src (Source): This attribute specifies the URL or path to the image you want to display. It
is a required attribute.
▪ Example: <img src="[Link]" alt="Description of image">
○ alt (Alternative Text): This attribute provides alternative text that describes the image.
If the image cannot be loaded (e.g., if the URL is broken), the alt text will appear instead.
▪ Additionally, the alt attribute is important for accessibility purposes. Screen
readers use it to describe images to visually impaired users.
▪ Example: <img src="[Link]" alt="A beautiful landscape">
4. Image Resizing:
○ You can resize images by using the width and height attributes. However, modifying
both width and height simultaneously may distort the image if the aspect ratio is not
maintained.
○ It is recommended to modify only one (either width or height) to keep the aspect ratio
intact.
Example:
<img src="[Link]" width="300" alt="A beautiful landscape">

This will resize the image to a width of 300px while maintaining its original height
automatically.
5. Self-Closing Tag:
○ The <img> tag does not require a closing tag (</img>), as it is a self-closing tag.
○ Syntax example:
<img src="[Link]" alt="Description of image">
6. Two Methods to Define the Path in src Attribute:
○ Absolute Path: This specifies the full URL to the image, including the domain name. We
can also paste the image copy link from internet in absolute path src.
▪ Example:
<img src="[Link] alt="Image from website">
○ Relative Path: This specifies the path relative to the location of the HTML file. It is useful
when the image is stored in the same directory or a subdirectory. The location is given
by [Link] file or file in which we are written img tag.
▪ Example (same directory):
<img src="[Link]" alt="Local image">
▪ Example (subdirectory):
<img src="images/[Link]" alt="Image in images folder">
7. Use Cases:
○ The <img> tag is commonly used to display a variety of image formats, such
as .jpg, .png, .gif, .svg, and others, on a webpage.
○ It is essential for adding visual content, such as logos, icons, photographs, diagrams, and
more.
8. Important Notes:
○ Image Accessibility: Always include an alt attribute for better accessibility. This helps
users with visual impairments understand what the image represents.

Level 2 HTML Tags Page 44

 users with visual impairments understand what the image represents.
○ Image Optimization: Ensure images are optimized for web use. Large image files can
slow down page load times. Tools like image compressors can help reduce file size
without significant loss of quality.
○ Image Formats: Choose the appropriate image format for the content. For
photographs, .jpg or .png are often used, while .svg is ideal for vector graphics.

Best Practices:
• Always Use Alt Text: Even if the image is purely decorative, use an empty alt="" to indicate
that the image has no content for screen readers.
• Resize Images Before Embedding: It is better to resize images to the required dimensions
before embedding them into the webpage to save bandwidth and improve performance.
• Use Responsive Images: Consider using the srcset attribute for responsive images that adapt
to different screen sizes.

• CODE :

• No_2_5_imageTag :

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=
1.0">
<title>image tag</title>
</head>
<body>
<h1>relative path :</h1>
<br>
<p>simple image :</p>
<image src="image/[Link]"></image>
<hr>
<p>change height</p>
<image src="image/[Link]"height=40></image>
<p>change width</p>
<image src="image/[Link]"width="40px"></image>
<p>change both / it result into bad aspect ratio :</p>
<image src="image/[Link]"height="40px"width=50></imag>
<hr>
<p>use alt and image note loading :</p>
<image src="[Link]"alt="Google pic"height=60></image>
<hr>

<h1>Absoulute path : iamge via link adress online :</h1>

<image src=""alt="github image"height="50px"></image>
<!--because of long link I don’t provide in noted go to code section
there is a link in this file-->
</body>
</html>

O/P :

Level 2 HTML Tags Page 45

Level 2 HTML Tags Page 46
2.6 Video Tag
Wednesday, July 24, 2024 12:15 PM

1. Definition:
○ The <video> tag is used to embed video files directly into an HTML page. It provides a
way for users to view videos on a webpage without needing third-party plugins or
players (like YouTube).
2. Key Attributes:
○ src (Source): Specifies the URL or path to the video file that you want to embed.
▪ Example:
<video src="video.mp4" controls></video>
○ controls: Adds built-in video controls such as play/pause buttons, volume control,
fullscreen options, and more.
○ autoplay: Specifies that the video should start automatically as soon as it is ready.
However, this is not recommended with sound for user experience reasons.
○ loop: Ensures that the video will play continuously, restarting once it finishes.
○ muted: Mutes the video, which is often used in conjunction with autoplay to prevent
the video from starting with sound automatically.
○ height and width: Set the height and width of the video display.
▪ Example:
<video src="video.mp4" height="300px" width="500px" controls></video>
○ alt: Describes the video content for accessibility or when the video cannot be loaded.
▪ Example:
<video src="video.mp4" alt="description of the video" controls></video>
3. Best Practices:
○ Autoplay and Muted: As of Chrome 70 and later versions, autoplaying a video with
sound is not allowed. This is to avoid poor user experience when videos start playing
unexpectedly with sound. For autoplay to work, the video must be muted:
<video src="video.mp4" autoplay muted controls></video>
○ File Location: For better organization, place video files in the assets folder within the
root or index file hierarchy. Example file structure:
/assets/videos/video.mp4

<video src="assets/videos/video.mp4" controls></video>

4. Multiple Formats:
○ You can provide multiple video formats to ensure browser compatibility. For example,
use both MP4 and WebM formats:
<video controls>
<source src="video.mp4" type="video/mp4">
<source src="[Link]" type="video/webm">
Your browser does not support the video tag.
</video>

This ensures that if one format isn't supported by the browser, the other will play.
5. Example with Video Attributes:
With Closing Tag:
<video src="assets/video/2022-07-30 21-46-35.mp4"
alt="video tag"
height="300px"
controls
loop
autoplay
muted></video>

Level 2 HTML Tags Page 47

 Without Closing Tag (Self-closing tag):
<video src="assets/video/2022-07-30 21-46-35.mp4"
alt="video tag"
height="300px"
controls
loop
autoplay
muted/>

Note:
○ In Chrome 70 and later versions, autoplay without muted will not work because it
negatively affects the user experience.
6. Control Options:
○ The controls attribute adds a variety of controls to the video:
▪ Play/Pause button
▪ Volume control
▪ Fullscreen mode
▪ Playback progress bar
▪ Mute/Unmute button
▪ Picture-in-picture mode
▪ Playback speed controls
7. Why Use the loop Attribute:
○ The loop attribute ensures that the video plays continuously, restarting each time it
finishes. This is useful for background videos or looping promotional content.
<video src="video.mp4" loop autoplay muted controls></video>

Summary:
The <video> tag is a powerful tool for embedding video content directly into a webpage. It allows
you to customize the video playback experience with attributes like autoplay, controls, loop, and
muted. Using multiple video formats ensures compatibility across different browsers, and the use of
loop can create a seamless, continuous video experience. Always ensure good user experience
practices by muting videos when using autoplay and placing video files in well-organized folders
within your project structure.
Let me know if you need more details or have further questions!

• CODE :

• No_2_6_videoTag :

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=
1.0">
<title>Document</title>
</head>
<body>
<h3>video tag : simple</h3>
<video src="assets/video/2022-07-30 21-46-35.mp4"></video>

<hr>
<h3>video tag with height width change :</h3>
<p>change width :</p>
<video src="assets/video/2022-07-30 21-46-35.mp4"width="50px">
</video>
<p>change height :</p>
<video src="assets/video/2022-07-30 21-46-35.mp4"height="50 px">
</video>

Level 2 HTML Tags Page 48

</video>
<p>change height and width :</p>
<video src="assets/video/2022-07-30
21-46-35.mp4"height="50px"width="50px"></video>
<hr>
<h3>alt use :fault video</h3>
<video src="assets/video/2022-07-30
21-46-35.p4"alt="Video"height="160px"></video>
<hr>
<h3>Buit in controls : </h3>
<br>
<p>video tag with Controls :</p>
<video src="assets/video/2022-07-30 21-46-35.mp4"
alt="video tag"
height="150px"
controls
></video>
<br>
<p>video with controls+loop</p>
<video src="assets/video/2022-07-30 21-46-35.mp4"
alt="video tag"
height="300px"
controls
autoplay></video>
<p>video with controls+loop+autoplay :</p>
<video src="assets/video/2022-07-30 21-46-35.mp4"
alt="video tag"
height="300px"
controls
loop
autoplay></video> <!--here auto play not working because in new
update , because of user experience , autoplay not working here-->

<br>
<p>video with controls+loop+autoplay+muted:</p>
<video src="assets/video/2022-07-30 21-46-35.mp4"
alt="video tag"
height="300px"
controls
loop
autoplay
muted/> <!--also valid without closing tag-->
</body>
</html>

O/P :

Level 2 HTML Tags Page 49

Level 2 HTML Tags Page 50
2.7 Anchor Tag (hyper Tag)
Wednesday, July 24, 2024 1:03 PM

1. Definition:
○ The <a> tag is used for creating hyperlinks in HTML. These links can connect to external
websites, internal pages, or even specific sections within the same page.

2. Key Attributes:
○ href (Hypertext Reference): Specifies the URL or the path to the destination. This is a
required attribute for the anchor tag to function as a hyperlink.
▪ Example:
<a href="[Link] Example</a>
○ target: Defines how the link should open. It controls the behavior of the link when
clicked:
▪ _self: Opens the link in the same tab (default behavior).
▪ _blank: Opens the link in a new tab.
▪ _main: Opens the link in a new tab (similar to _blank, but the term is not widely
used, and _blank is more common).
▪ Example:
<a href="[Link] target="_blank">Google</a>

This opens Google in a new tab.

○ title: Provides additional information that appears as a tooltip when hovering over the
link.
▪ Example:
<a href="[Link] title="Click to visit Example website">Visit
Example</a>
○ download: This attribute allows users to download a file when clicking the link, rather
than navigating to it.
▪ Example:
<a href="[Link]" download>Download File</a>
○ rel: Specifies the relationship between the current document and the linked document.
It's useful for SEO and security purposes.
▪ Example:
<a href="[Link] rel="noopener noreferrer" target="_blank">
Example</a>
3. Link Types:
○ External Links: Links to an external site.
▪ Example:
<a href="[Link]
○ Internal Links: Links to a different page or section within the same website.
▪ Example:
<a href="[Link]">About Us</a>
○ Anchor Links: Links to a specific part of the same page using an id.
▪ Example:
<a href="#section1">Go to Section 1</a>
<div id="section1">This is Section 1</div>
○ Telephone Links: Used for dialing phone numbers directly.
▪ Example:
<a href="[Link] Us</a>
○ Email Links: Used for opening the default email client.
▪ Example:
<a href="[Link] Us</a>
4. Anchor Tag Behavior:

Level 2 HTML Tags Page 51

 4. Anchor Tag Behavior:
○ By default, the <a> tag does not introduce a line break. The link appears inline with the
rest of the content.
▪ Example:
<p>Click <a href="[Link] to visit Example.</p>
5. Clickable Image Links:
○ You can make an image clickable by nesting the image tag (<img>) inside the anchor tag.
This allows users to click on the image and be redirected to another page or website.
▪ Example:
<a href="[Link]
<img src="[Link]" alt="Click to visit Example" />
</a>
6. Best Practices:
○ Always use the href attribute in anchor tags for them to function properly.
○ Consider using the target="_blank" attribute carefully. Opening too many links in new
tabs may frustrate users. It's ideal for external links or when the user should not leave
the current page.
○ Use rel="noopener noreferrer" when using target="_blank" to enhance security and
prevent potential performance issues (this prevents the newly opened page from having
access to the [Link] property of the original page).

7. Example with Multiple Attributes:

<a href="[Link] target="_blank" title="Go to Example website"
rel="noopener noreferrer">
Visit Example
</a>

Summary:
The <a> (anchor) tag is a crucial part of web navigation, allowing the creation of hyperlinks that can
point to both external and internal pages. It uses the href attribute for the destination URL, and the
target attribute to control how the link opens. By combining anchor tags with images, you can create
clickable image links. It's essential to use best practices when setting attributes like target="_blank"
to improve user experience and maintain security.

• CODE :
• No_2_7_anchorTag :

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=
1.0">
<title>Document</title>
</head>
<body>
<h3>anchor Tag :</h3>
<a href="[Link] <!--mandatory to write
name Goggle either it is not display-->
<p>Anchor tag with target="_main" :</p>
<a href="[Link] <!--we can
also use _blank in target-->
<hr>
<p>Anchor tag with title :</p>
<a href="[Link] target="_self" title="Google home
page">Google</a>

<hr>

Level 2 HTML Tags Page 52

 <hr>
<p>download: This attribute allows users to download a file when
clicking the link, rather than navigating to it.</p>
<a href="image/[Link]" title="Download image" >Image</a>

<hr>
<p>Telephone Links: Used for dialing phone numbers directly.</p>
<a href="[Link] 8200176230">Call Us</a>
<hr>
<p>Email Links: Used for opening the default email client</p>
<a href="[Link] Us</a>
<hr>
<p>By default, the anchor tag does not introduce a line break. The
link appears inline with the rest of the content.</p>
<p>Click <a href="[Link] to visit
Example.</p>
<h3>Clickable image :</h3>
<a href="[Link]
src="image/[Link]"alt="google image"height="150px"></image></a>
</body>
</html>

O/P :

Level 2 HTML Tags Page 53

2.8 Bold / Italic / Underline / Strikethrough
Wednesday, July 24, 2024 1:18 PM

1. Text Styling Tags:

○ HTML provides several tags to style text, emphasizing it or altering its appearance. These
tags can make text bold, italicized, underlined, or crossed out, allowing you to highlight
important content on a webpage.
2. Tags:
1. <b> - Bold Text:
▪ The <b> tag is used to make text bold.
▪ This tag is used for styling purposes and does not imply any special importance for
the text.
▪ Example:
<b>This is bold text</b>

Output: This is bold text

2. <i> - Italic Text:
▪ The <i> tag is used to make text italicized.
▪ It is commonly used for emphasizing text or displaying certain types of content
(like foreign language words or technical terms).
▪ Example:
<i>This is italic text</i>

Output: This is italic text

3. <u> - Underlined Text:
▪ The <u> tag is used to underline text.
▪ This is primarily used for adding emphasis or distinguishing specific words in the
content.
▪ Example:
<u>This is underlined text</u>

Output: This is underlined text

4. <s> - Strikethrough Text:
▪ The <s> tag is used to create a strikethrough or a line through the text, indicating
that it is no longer valid or is to be ignored.
▪ Example:
<s>This text has a strikethrough</s>

Output: This text has a strikethrough

5. <strike> - Strikethrough Text (Deprecated):
▪ The <strike> tag was originally used for strikethrough text, but it is now
considered deprecated in HTML5 in favor of the <s> tag.
▪ Example:
<strike>This is old or deleted text</strike>

Output: This is old or deleted text

3. Important Notes:
○ No Line Breaks: None of the above tags (except for certain semantic HTML5 tags like
<mark> or <ins>) add a line break by default. These tags are applied inline, meaning they
will not force the text to appear on a new line unless the surrounding context introduces
a line break (e.g., <p>, <br>, etc.).
▪ Example:
<b>Bold text</b><i>italic text</i><u>underlined text</u>

Level 2 HTML Tags Page 54

 Output: Bold textitalic textunderlined text (all on the same line).
○ Semantic Usage: While these tags can visually modify text, they are not considered the
best practice for semantic meaning. For example:
▪ For emphasis, it's better to use the <em> (emphasis) tag instead of <i>, which
provides both visual styling and semantic meaning (i.e., the browser can interpret
the importance of the text).
▪ Similarly, for strong emphasis, use the <strong> tag instead of <b>.
4. Example with All Tags:
<p><b>Bold Text</b>, <i>Italic Text</i>, <u>Underlined Text</u>, <s>Strikethrough Text</s>
</p>

Output: Bold Text, Italic Text, Underlined Text, Strikethrough Text

Summary:
The <b>, <i>, <u>, <s>, and <strike> tags are used to style text with bold, italic, underline, and
strikethrough effects. While they visually alter the text, their usage should be context-specific, and
where possible, use semantically appropriate tags like <em> for emphasis or <strong> for strong
emphasis. All these tags apply inline and do not introduce line breaks by default.

• CODE :
• No_2_8_BoldItalicUndelineStrikeThrough :

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=
1.0">
<title>Document</title>
</head>
<body>
<b>This is an bold tag</b>
<br>
<strong>Strong Emphasis</strong>
<br>
<i>italic text</i>
<br>
<u>undelined text</u>
<br>
<s>strike through</s>
<br>
<em>Emphasis tag</em>

</body>
</html>

O/P :

Level 2 HTML Tags Page 55

2.9 Pre tag
Wednesday, July 24, 2024 1:22 PM

1. Purpose of <pre> Tag:

○ The <pre> tag in HTML is used to preserve the text formatting as it is written in the
HTML code.
○ Unlike the standard paragraph tag <p>, which ignores extra spaces and line breaks, the
<pre> tag preserves all the whitespace and line breaks in the text, making it suitable for
displaying preformatted text, such as code or poetry, where precise formatting is
important.
2. Behavior of <pre> Tag:
○ Whitespace Preservation: The <pre> tag retains all the extra spaces, tabs, and new lines
exactly as they appear in the HTML file.
○ Line Breaks: The tag will honor the line breaks (\n or newlines) that are inserted in the
HTML code, meaning text will be displayed exactly as written in the source code.
○ Text Formatting: Since the <pre> tag preserves spaces and line breaks, it is commonly
used to display code snippets, ASCII art, and other content where formatting is
important.
3. Common Use Cases:
○ Displaying Code: Often used to display source code, especially when you want to keep
the indentation and line breaks intact. This makes the code more readable and visually
consistent with how it appears in the source files.
○ Email Formatting: In some cases, the <pre> tag is used in emails or messages where
maintaining the structure of the content is necessary.
○ ASCII Art: Can be used to display ASCII art where the exact alignment of characters is
essential.
4. How It Works:
○ The text inside the <pre> tag will display exactly as it is written in the HTML source code.
○ Example:
<pre>
This text preserves spaces
and
line breaks
</pre>

Output:
This text preserves spaces
and
line breaks
5. Example (Code Display):
○ When you need to show code or any content that requires specific indentation and line
breaks:
<pre>
function greet() {
[Link]("Hello, World!");
}
greet();
</pre>

Output:
function greet() {
[Link]("Hello, World!");
}
greet();

Level 2 HTML Tags Page 56

 greet();
6. Important Notes:
○ No Need for <br>: Since the <pre> tag already preserves the line breaks, you don't need
to use <br> for new lines inside this tag. It will automatically display text with line breaks
and spaces as they appear in the code.
○ Preformatted Text: The <pre> tag is particularly useful when you need to present data
exactly as it is input, such as when showing preformatted text or output from a program.

Summary:
The <pre> tag is used to preserve the formatting of text, including whitespace and line breaks,
exactly as written in the HTML file. It is particularly useful for displaying code, ASCII art, or any
content where preserving indentation and line breaks is important. This tag removes the need for
using multiple <br> tags to manage line breaks, making it a straightforward way to maintain text
formatting.

• CODE :
• No_2_9_preTag :

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=
1.0">
<title>Document</title>
</head>
<body>
<h3>this is p tag whcih ignore the whitespace and next line</h3>
<p>Dear sir,
Thoo

Thanks you,</p>
<hr>
<h3>this is an pre tag which does not ignore the whitespace and next
line :</h3>
<pre>
Dear sir,
Thoo
Thanks you,
</pre>
</body>
</html>

O/P :

Level 2 HTML Tags Page 57

2.10 Big and Small Tag
Wednesday, July 24, 2024 1:29 PM

1. Purpose of <big> and <small> Tags:

○ The <big> and <small> tags are used to adjust the text size within an HTML document.
○ The <big> tag increases the size of the text, while the <small> tag decreases the size of
the text.
2. Usage of <big>:
○ The <big> tag makes the text larger, which is useful for highlighting or emphasizing
specific parts of the content.
Example:
<big>This text is bigger than the normal text.</big>

Output: This text is bigger than the normal text.

3. Usage of <small>:
○ The <small> tag makes the text smaller, which can be used for footnotes, disclaimers, or
to show less important information.
Example:
<small>This text is smaller than the normal text.</small>

Output: This text is smaller than the normal text.

4. Alternatives with CSS:
○ While the <big> and <small> tags can be used to adjust text size, they are not as flexible
or widely used as CSS, which provides more control over text styling.
○ With CSS, you can specify exact font sizes and apply more styles like font-family, weight,
and color.
Example using CSS:
<p style="font-size: 20px;">This text is styled using CSS.</p>
5. Behavior of the Tags:
○ Neither <big> nor <small> tags automatically cause a new line after the content. If you
want to add a line break, you must use other elements like <br> or wrap the content in a
block-level element like <p>.
6. Important Notes:
○ These tags are relatively less common in modern web development since CSS offers
more robust and flexible ways to control text size and style.
○ While they provide a quick solution for adjusting size, using CSS is preferred for more
complex styling needs.

Summary:
The <big> and <small> tags are simple HTML elements used to adjust the size of the text they
enclose. <big> increases the text size, while <small> decreases it. However, these tags are less
commonly used today because CSS provides greater control and flexibility over text styling. They also
do not introduce new lines by default, so if a line break is

• CODE :
• No_2_10_bigandsmall :

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=
1.0">
<title>Document</title>

Level 2 HTML Tags Page 58

 <title>Document</title>
</head>
<body>
<big>this is a big text</big>
<br>
<small>this is small text</small>
</body>
</html>

O/P :

Level 2 HTML Tags Page 59

2.11 Superscript and Subscript Tag
Wednesday, July 24, 2024 1:32 PM

1. Purpose of <sup> and <sub> Tags:

○ The <sup> and <sub> tags are used to position text above or below the normal text line,
respectively.
○ These tags are commonly used in mathematical equations, footnotes, chemical
formulas, and references.

2. Usage of <sup> (Superscript):

○ The <sup> tag positions the text higher than the normal line. For example, it's used for
representing powers of numbers or footnote markers.
Example:
<p>H₂O is water.</p>
<p>x² + y² = z² (Pythagorean Theorem)</p>

Output:
○ H₂O is water.
○ x² + y² = z² (Pythagorean Theorem)

3. Usage of <sub> (Subscript):

○ The <sub> tag places the text below the normal line. It is typically used for chemical
formulas and indices in mathematical expressions.
Example:
<p>The chemical formula for water is H₂O.</p>
<p>In the equation E = mc², c is the speed of light.</p>

Output:
○ The chemical formula for water is H₂O.
○ In the equation E = mc², c is the speed of light.

4. Not for Changing Font Size:

○ Both <sup> and <sub> tags are not meant for changing the font size of the text. They
simply adjust the position of the text (either up or down) relative to the baseline of the
surrounding text.
○ If you need to change the font size, you should use CSS instead.

5. Common Use Cases:

○ Mathematical Equations
○ Footnotes: Superscript is used to represent footnote numbers, which link to a
corresponding footnote elsewhere on the page.
○ Chemical Formulas

6. Usage within Other Tags:

○ These tags can be used inside other tags, such as <p>, <pre>, and <span>, to maintain
the document's structure while applying superscript or subscript formatting.

7. Example Combining Both:

<p>Einstein's famous equation is E = mc².</p>
<p>The molecular formula for glucose is C₆H₁₂O₆.</p>

Output:
○ Einstein's famous equation is E = mc².
The molecular formula for glucose is C₆H₁₂O₆.

Level 2 HTML Tags Page 60

 ○ The molecular formula for glucose is C₆H₁₂O₆.

Summary:
The <sup> and <sub> tags are used to position text as superscript or subscript, respectively, without
altering the font size. The <sup> tag places the text above the normal text line (useful for exponents
and footnotes), while the <sub> tag places it below the line (used in chemical formulas and indices).
These tags are commonly used in mathematical equations, scientific formulas, and references, and
are typically used within paragraph (<p>) or preformatted (<pre>) tags.

• CODE :
• No_2_11_supandsubTag :

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=
1.0">
<title>Document</title>
</head>
<body>
<pre>
-> (a+b)²=a²+2ab+b²
-> Ch₄ + O₂ -> H₂O + CO₂
</pre>
<hr>
<p>Einstein's famous equation is E = mc².</p>
<p>The molecular formula for glucose is C₆H₁₂
O₆.</p>
</body>
</html>

O/P :

Level 2 HTML Tags Page 61

3. Character Entity Reference
Friday, February 14, 2025 11:21 AM

1. What are Character Entity References

Level 2 HTML Tags Page 62

3.1 character entity reference
Wednesday, July 24, 2024 1:38 PM

1. Purpose:
○ Character Entity References are used in HTML to display special characters that are
reserved or have a specific meaning within the HTML code. For example, characters like
<, >, and & are reserved for HTML tags and cannot be used directly in the content. To
display them as regular characters on the webpage, we need to use Character Entity
References.
2. Syntax:
○ The syntax for Character Entity References starts with an ampersand (&) and ends with
a semicolon (;). This helps the browser understand that the characters inside are meant
to represent symbols or characters and not HTML code.
Example:
○ To display the less-than sign (<), we use &lt;.
○ To display the greater-than sign (>), we use &gt;.
3. Why Use Character Entities:
○ When you want to display a special character (like <, >, &, etc.) in your HTML content,
the browser will treat it as part of an HTML tag. This could result in errors in rendering or
even unexpected behavior.
○ By using Character Entity References, we can safely display these characters without
confusing the HTML parser.
4. Commonly Used Character Entity References:
○ &lt;: Less-than sign (<)
○ &gt;: Greater-than sign (>)
○ &amp;: Ampersand (&)
○ &quot;: Double quotation mark (")
○ &apos;: Single quotation mark (')
○ &nbsp;: Non-breaking space (space that won't collapse)
○ &copy;: Copyright symbol (©)
○ &euro;: Euro symbol (€)
5. Example Usage:
○ To display HTML reserved characters on a webpage, use the appropriate character entity
reference.
Example:
<p>Use &lt; and &gt; to define HTML tags.</p>
<p>The price is &euro;50.</p>
<p>&nbsp;Non-breaking spaces can be used for better layout control.</p>

Output:
○ Use < and > to define HTML tags.
○ The price is €50.
○ (A non-breaking space would be shown as an extra space, which is not collapsed).
6. Important Notes:
○ Character Entity References are essential when displaying special symbols that may
have meaning in HTML or could break the code (like <, >, &).
○ It's always a good practice to use these references for characters like <, >, &, " inside
your HTML content to ensure proper rendering.

Summary:
Character Entity References are used in HTML to display characters that are reserved or have special
meaning within HTML, such as <, >, &, and ". They follow the syntax &<entity name or number>;.
These references help prevent confusion between HTML code and content on the webpage. Some

Level 2 HTML Tags Page 63

These references help prevent confusion between HTML code and content on the webpage. Some
commonly used examples include &lt; for less-than, &gt; for greater-than, &nbsp; for non-breaking
space, and &euro; for the Euro symbol.

List :

• CODE :
• No_3_1_CharacterEntityReference :

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=
1.0">
<title>Document</title>
</head>
<body>
<p>Use &lt; and &gt; to define HTML tags.</p>
<p>The price is &euro;50.</p>
<p>&nbsp;Non-breaking spaces can be used for better layout control.</p>
</body>
</html>

O/P :

Level 2 HTML Tags Page 64

Project
Thursday, February 13, 2025 11:45 AM

• Level2Project :

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=
1.0">
<title>Document</title>
</head>
<body>
<header>
<h3>This is a level 2 <b>Project</b></h3>
</header>
<hr>
<p>Here is description of project : 1. Create a page with heading,
paragraph, line breaks and
separators. <br>
2. Use an image with height 300,
which is a link to another page. <br>
3. Use bold, italic, underline and
strike through in one line. <br>
4. Write third equation of motion
using superscript and subscript.</p>
<hr>
<p>Image of height 300px and link to google link :</p>

<a href="[Link] target="_self"><img

src="images/labh [Link]" alt="Labh pic" height="300"></a>
<hr>
<p>Third Equation of motion :</p>
<p>v² = u² + 2as</p>

</body>
</html>

O/P :

Level 2 HTML Tags Page 65

Browser Tools
Wednesday, July 24, 2024 2:52 PM

1. Browser Tools
1. View Page Source:
○ Purpose: The "View Page Source" feature allows you to see the raw HTML code that the
browser has received from the server and rendered on the webpage.
○ How to Use: Right-click on any webpage and select "View Page Source" (or press Ctrl + U
on Windows / Cmd + Option + U on macOS). This opens a new tab displaying the HTML
source code of the page.
○ Use Case: It is useful for developers or learners to inspect how HTML is structured on a
webpage, especially if they are trying to learn from or troubleshoot a website.
○ Page source of [Link]

2. Inspect Element:
○ Purpose: The "Inspect Element" tool provides a more interactive way to view and
manipulate HTML and CSS. It allows you to see and modify the DOM (Document Object
Model) elements and their styles in real-time.
○ How to Use: Right-click on any webpage element and select "Inspect" or "Inspect
Element." This opens the Developer Tools panel in the browser.
○ Use Case: This tool is highly useful for debugging, testing design changes, or
understanding how styles are applied to different HTML elements. It provides immediate
feedback by modifying the page in real-time.

3. HTML without CSS:

○ Purpose: This tool allows you to view how the page would look without any CSS (styling)
applied.
○ How to Use: In most browser developer tools, under the "Elements" panel, you can
disable specific stylesheets or remove the CSS styling temporarily to see how the page’s
structure looks without CSS.

Level 3 Browser Tools Page 66

 structure looks without CSS.
○ Use Case: This helps in understanding the raw layout of the page, especially useful for
debugging layout issues or when you're working on the semantics and structure of
HTML.

2. Responsive Design
1. Different Screen Size:
○ Purpose: Responsive design ensures that websites look and work well on a variety of
devices, from desktops to mobile phones.
○ How to Use: You can simulate different screen sizes using the browser's developer tools.
Most modern browsers, such as Chrome, Firefox, and Edge, allow you to toggle the
device toolbar (usually found in the "Responsive Design Mode" or "Device Mode").
○ Use Case: By adjusting the screen size or choosing a specific device, you can see how a
website adapts to different screen resolutions. This is essential for testing how a site will
appear on mobile, tablet, or desktop devices.

3. Live Edit Code

1. Live Edit HTML:
○ Purpose: Live editing allows you to change the HTML structure directly in the browser’s
developer tools and see the changes immediately on the page.
○ How to Use: In the "Elements" panel, you can modify the HTML code (such as adding,
removing, or editing tags) and see the result instantly on the webpage without
refreshing the page.
○ Use Case: This is helpful for developers to quickly test code changes or troubleshoot
issues with HTML structure.
2. Live Edit CSS:
○ Purpose: Live editing CSS allows you to experiment with and modify the styles of a
webpage directly in the browser, making real-time visual changes to the page.
○ How to Use: In the "Styles" section of the "Inspector" panel, you can edit the CSS
properties of an element. Changes are immediately reflected on the page.
○ Use Case: This feature is useful for designers and front-end developers to fine-tune the
layout, fonts, colors, and other styles in a live setting.
3. Live Edit JS:
○ Purpose: Live editing JavaScript allows you to modify the JavaScript code running on the
page and see the results instantly.
How to Use: The "Console" or "Sources" tab of the developer tools lets you write or

Level 3 Browser Tools Page 67

 ○ How to Use: The "Console" or "Sources" tab of the developer tools lets you write or
modify JavaScript directly in the browser, and any changes are immediately applied to
the page.
○ Use Case: This feature is useful for debugging, testing, or experimenting with JavaScript
functionality in real time.
4. Changes Only Happening at Client:
○ Explanation: Any live edits made to HTML, CSS, or JavaScript in the browser's developer
tools only affect the client-side (the local instance of the webpage in your browser).
These changes are not permanent and do not affect the live website unless the changes
are saved and pushed to the server.
○ Use Case: This is useful for quick testing and experimentation without making
permanent changes to the website.

4. Validating Web Pages

1. Using [Link]:
○ Purpose: The W3C Markup Validation Service ([Link]) is a tool that checks the
syntax of your HTML and ensures it complies with the standards set by the World Wide
Web Consortium (W3C).
○ How to Use: Simply visit the W3C validator website and input your website’s URL or
upload the HTML file to validate your webpage.
○ Use Case: This is important for ensuring that your HTML is error-free, well-structured,
and adheres to best practices. It helps in improving the webpage's performance, SEO,
and accessibility by identifying and correcting HTML errors.

Summary:
• Browser Tools like "View Page Source" and "Inspect Element" are essential for developers to
inspect and manipulate HTML and CSS. "View Page Source" allows you to see raw HTML, while
"Inspect Element" allows you to modify and test elements in real-time.
• Responsive Design ensures websites adapt to different screen sizes and devices, and using
browser tools helps you simulate various screen resolutions.
• Live Editing Code (HTML, CSS, JS) allows developers to make changes directly in the browser
and see the results immediately, providing a quick feedback loop for testing.
• Validating Web Pages using services like W3C Validator ensures your HTML is error-free and
compliant with web standards, improving the quality of your website.

Level 3 Browser Tools Page 68

1. Semantic and non-semantic Tags
Wednesday, July 24, 2024 6:18 PM

• Sematic : for specific task we use proper tags

Sematic tag Non semantic tags
Meaningful: Describe content Generic: No specific
meaning
SEO : Good for search engines For styling : Used for
layout
Accessibility : Useful for screen readers No SEO : Not SEO-friendly
Ex: <header> , <footer> , <article> , <section>, <nav> Ex : <div> , <span> , <i> ,
In website there are many sections are there so that is fetch from <b>
the <nav>

1. Semantic and Non-Semantic Tags in HTML

HTML tags are categorized into semantic and non-semantic tags based on their meaning and
purpose in structuring content.

1.1 Semantic Tags

• Definition: Semantic tags clearly describe the meaning of the content inside them.
• Purpose: They improve readability, SEO, and accessibility.
• SEO Benefits: Semantic tags help search engines understand the webpage’s structure.
• Accessibility: These tags enhance usability for screen readers and assistive technologies.
• Examples:
○ <header> – Defines the page or section header.
○ <footer> – Defines the page or section footer.
○ <article> – Represents self-contained content (like blog posts, news, etc.).
○ <section> – Groups related content together.
○ <nav> – Represents a navigation section that contains links.
○ <aside> – Represents side content like a sidebar.
○ <main> – Contains the main content of the document.
○ <figure> – Groups media elements like images, diagrams, or illustrations.
○ <figcaption> – Provides captions for <figure> elements.

1.2 Non-Semantic Tags

• Definition: Non-semantic tags do not provide meaning about the content inside them.
• Purpose: These are primarily used for styling and layout without conveying content meaning.
• SEO Limitations: They do not help search engines understand the page structure.
• Examples:
○ <div> – A generic container used for grouping content.
○ <span> – Used for inline styling or text grouping.
○ <i> – Italic text (often used for styling, not for emphasis).
○ <b> – Bold text (used for styling, not for strong importance).

1.3 Key Differences Between Semantic and Non-Semantic Tags

Feature Semantic Tags Non-Semantic Tags
Meaningful Clearly defines content No inherent meaning
SEO Friendly Helps search engines index content better Less SEO-friendly
Accessibility Works well with screen readers Not useful for accessibility
Examples <header>, <footer>, <nav> <div>, <span>, <b>

Level 4 HTML and Project Structure Page 69

Examples <header>, <footer>, <nav> <div>, <span>, <b>

1.4 Why Use Semantic Tags?

• Improves SEO ranking and helps search engines understand the content.
• Enhances accessibility for users relying on screen readers.
• Provides a clearer structure for developers and teams working on a project.
• Makes debugging and maintenance easier by clearly identifying sections of a webpage.

1.5 Example of Semantic vs. Non-Semantic HTML Structure

✅ Using Semantic Tags (Recommended):
<header>
<h1>Welcome to My Blog</h1>
</header>
<nav>
<ul>
<li><a href="[Link]">Home</a></li>
<li><a href="[Link]">About</a></li>
</ul>
</nav>
<main>
<section>
<article>
<h2>HTML Basics</h2>
<p>HTML is the foundation of web development...</p>
</article>
</section>
</main>
<footer>
<p>Copyright © 2025</p>
</footer>
❌ Using Non-Semantic Tags (Not Recommended):
<div>
<h1>Welcome to My Blog</h1>
</div>
<div>
<ul>
<li><a href="[Link]">Home</a></li>
<li><a href="[Link]">About</a></li>
</ul>
</div>
<div>
<h2>HTML Basics</h2>
<p>HTML is the foundation of web development...</p>
</div>
<div>
<p>Copyright © 2025</p>
</div>
1.6 Conclusion
• Use semantic tags whenever possible for better structure, SEO, and accessibility.
• Use non-semantic tags only when necessary, such as for styling or layout purposes.
• Browsers treat both semantic and non-semantic tags the same way, but semantic tags
provide more meaning to developers and search engines.

Level 4 HTML and Project Structure Page 70

2. Body Tags
Friday, February 14, 2025 11:31 AM

Level 4 HTML and Project Structure Page 71

2.1 Header Tag
Wednesday, July 24, 2024 6:27 PM

1. Purpose
• The <header> tag is used to define introductory content or navigational elements at the
beginning of a page or section.
• Typically contains logos, headings, navigation menus, introductory text, or relevant
metadata.

2. Semantic Meaning
• <header> is a semantic tag, meaning it provides meaning to the content enclosed inside it.
• It improves SEO, accessibility, and page structure.

3. Location & Usage

• Global Usage: Usually placed at the top of a webpage to define the site's main heading or
navigation.
• Within Sections: Can also be used inside <article> or <section> tags to define sub-headers.
• Multiple Instances: A webpage can have multiple <header> elements (e.g., each section or
article can have its own header).

4. Key Features
✅ Typically contains:
• Page or section title (<h1> to <h6>)
• Navigation menus (<nav>)
• Logo or branding elements (<img>)
• Introductory content like taglines or subheadings
✅ Does not create a default new line.
✅ Does not replace the <head> section of an HTML document.

5. Example Usage
✅ Example 1: Page-Level Header
<header>
<h1>Welcome to My Website</h1>
<nav>
<ul>
<li><a href="[Link]">Home</a></li>
<li><a href="[Link]">About</a></li>
<li><a href="[Link]">Contact</a></li>
</ul>
</nav>
</header>
✅ Example 2: Section-Level Header
<section>
<header>
<h2>About Us</h2>
<p>Learn more about our team and mission.</p>
</header>
<p>We are a company dedicated to providing top-notch services...</p>
</section>
✅ Example 3: Article-Level Header
<article>
<header>
<h2>HTML Basics</h2>

Level 4 HTML and Project Structure Page 72

 <h2>HTML Basics</h2>
<p>Published on: <time datetime="2025-02-13">February 13, 2025</time></p>
</header>
<p>HTML (HyperText Markup Language) is the backbone of web development...</p>
</article>
6. Key Differences Between <header> and <head>
Feature <header> <head>
Purpose Defines page or section introduction Contains metadata and external resources
Location Inside <body> Inside <html> (before <body>)
Content Headings, navigation, branding Title, stylesheets, scripts
SEO Impact Improves readability & accessibility Helps search engines understand the page

7. Conclusion
• Use <header> to structure and organize content on a webpage.
• Improves SEO, readability, and accessibility compared to using a <div>.
• Can be used multiple times within different sections (<article>, <section>).

Level 4 HTML and Project Structure Page 73

 2.2 Main Tag
Wednesday, July 24, 2024 6:33 PM

• Purpose:
• Encloses the primary content of a webpage.
• Contains unique content that is central to the page.
• Excludes repeated elements like navigation menus, sidebars, and footers.
• Semantic Meaning:
• <main> is a semantic tag that improves accessibility and SEO.
• Helps search engines understand the primary focus of a page.
• Aids screen readers, making it easier for visually impaired users to identify key content.
• Key Features:
• Should appear only once per page.
• Does not include elements like <header>, <footer>, or <nav>.
• Improves SEO by prioritizing main content.
• Example:
<main>
<h1>Welcome to Our Website</h1>
<p>This is the main content of the page.</p>
</main>

• CODE :
• No_2_2_MainTag :

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<header>
header
</header>
<main>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Rem
sapiente accusamus cupiditate consequuntur ipsum? Natus temporibus adipisci
itaque culpa voluptatem.</p>
</main>
</body>
</html>

Level 4 HTML and Project Structure Page 74

 2.2.1 Section Tag
Wednesday, July 24, 2024 6:39 PM

• Purpose:
• Groups related content into distinct sections.
• Improves readability and SEO structure.
• Semantic Meaning:
• Each <section> should represent a standalone concept.
• Typically includes a heading <h1> to <h6> to indicate the section topic.
• Nested Usage:
• <section> can be nested inside <main>, <article>, or another <section>.
• Helps organize long pages into smaller, logical parts.
• Example:

<section>
<h2>About Us</h2>
<p>We are a company that provides innovative solutions.</p>
</section>

• CODE :
• No_2_2_1_Sectiontag :

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<header>
<h1>section tag</h1>
</header>
<main>
<section>
<h2>Admission</h2>
<p>Admission will start soon...</p>
</section>
<section>
<h2>placement</h2>
<p>Placement will start soon...</p>
</section>
</main>
</body>
</html>

O/P :

Level 4 HTML and Project Structure Page 75

 2.2.2 Article Tag
Wednesday, July 24, 2024 6:47 PM

• Purpose:
• Encapsulates independent content like blog posts, news articles, or forum posts.
• Semantic Meaning:
• Content within <article> should make sense even outside the webpage context.
• Used when content can be syndicated or shared independently.
• Multiple Instances:
• Can have multiple <article> elements on the same page.
• Example:
<article>
<h2>Understanding HTML5</h2>
<p>HTML5 introduces semantic elements.</p>
</article>

• CODE :
• No_2_2_2_articleTag :

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<header>
header
</header>
<main>
<article>Lorem ipsum dolor sit amet consectetur adipisicing elit. Amet
veniam quas voluptas accusamus saepe officia qui, totam dolorum expedita
voluptate, id in suscipit obcaecati excepturi reiciendis doloribus minima
velit architecto.</article>
<section>
<article>Lorem ipsum dolor sit amet consectetur, adipisicing elit.
Aliquam, tenetur.</article>
</section>
</main>
</body>
</html>

O/P :

Level 4 HTML and Project Structure Page 76

 2.2.3 Aside Tag
Wednesday, July 24, 2024 6:50 PM

• Purpose:
• Contains sidebar or supplementary content.
• Typically used for widgets, quotes, or advertisements.
• Semantic Meaning:
• Content inside <aside> is not essential to understanding the main content.
• Example:
<main>
<article>
<h2>How to Learn JavaScript</h2>
<p>JavaScript is an essential language for web development.</p>
</article>
<aside>
<h3>Related Articles</h3>
<ul>
<li><a href="#">Best JavaScript Frameworks</a></li>
<li><a href="#">Understanding Closures in JavaScript</a></li>
</ul>
</aside>
</main>

Level 4 HTML and Project Structure Page 77

2.3 Footer Tag
Wednesday, July 24, 2024 6:59 PM

1. Purpose:
○ Defines the footer section of a webpage or a specific section.
○ Used for additional information like author details, copyright notices, or navigation links.
2. Semantic Meaning:
○ <footer> is a semantic tag that improves page structure and accessibility.
○ Helps search engines understand footer content separately from the main content.
3. Location:
○ Usually placed at the bottom of a webpage.
○ Can also be used inside <article> or <section> elements.
4. Common Content:
○ Copyright information.
○ Contact details.
○ Social media links.
○ Navigation links.
5. Multiple Instances:
○ Can be used multiple times within a page (e.g., within articles or sections).
6. Example:
<footer>
<p>&copy; 2025 MyWebsite. All rights reserved.</p>
<nav>
<a href="[Link]">Privacy Policy</a> |
<a href="[Link]">Terms of Service</a>
</nav>
</footer>

• CODE :
• No_2_3_FooterTag :

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=
1.0">
<title>Document</title>
</head>
<body>
<header>
header
</header>
<main>
<article>Lorem ipsum dolor sit amet consectetur adipisicing elit.
Amet veniam quas voluptas accusamus saepe officia qui, totam dolorum
expedita voluptate, id in suscipit obcaecati excepturi reiciendis
doloribus minima velit architecto.</article>
<section>
<article>Lorem ipsum dolor sit amet consectetur, adipisicing
elit. Aliquam, tenetur.</article>
</section>
</main>
<hr>

<footer>

Level 4 HTML and Project Structure Page 78

 <footer>
-Mobile number : 8200176230
<br>
-First Link
<br>
-second link
<p>&copy; 2025 MyWebsite. All rights reserved.</p>
<nav>
<a href="[Link]">Privacy Policy</a> |
<a href="[Link]">Terms of Service</a>
</nav>

</footer>
</body>
</html>

O/P :

Level 4 HTML and Project Structure Page 79

3. Folder Structure
Friday, February 14, 2025 11:33 AM

1. Recommended Folder structure

Level 4 HTML and Project Structure Page 80

3.1 Recommended Folder Structure
Wednesday, July 24, 2024 7:03 PM

A well-organized folder structure helps in maintaining a clean and scalable project. Below is a
commonly used structure for web projects.

1. Root Directory (/)

• This is the main directory that contains all website files.
• Typically contains the homepage ([Link]).

2. HTML Files (/)

• Store all main HTML files at the root level for easy access.
• For a multi-page website, organize them in subdirectories if needed.

3. CSS Folder (/css/)

• Contains all stylesheets.
• [Link]
[Link]

4. JavaScript Folder (/js/)

• Contains all JavaScript files.
• Example:
/js/
[Link]
[Link]
5. Assets Folder (/assets/)
• Used to store fonts, images, videos, or large media files.
• Example:
/assets/
/images/
[Link]
[Link]
/videos/
intro.mp4
/fonts/
[Link]
6. Subdirectories for Multi-Page Websites
• Helps organize content for different sections of the site.
• Example:
/about/
[Link]
/services/
[Link]
/contact/
[Link]

Accessing Different Folders at Different Hierarchies

1. Same Directory (./)
• When accessing a file in the same folder:
<link rel="stylesheet" href="./[Link]">
<script src="./[Link]"></script>
2. Subdirectory (folder_name/)
• When accessing a file inside a subfolder:

Level 4 HTML and Project Structure Page 81

 • When accessing a file inside a subfolder:
<link rel="stylesheet" href="css/[Link]">
<img src="assets/images/[Link]">
3. Parent Directory (../)
• When accessing a file from a parent folder:
<link rel="stylesheet" href="../css/[Link]">
<img src="../assets/images/[Link]">
4. Root Directory (/)
• Absolute path relative to the project root:
<link rel="stylesheet" href="/css/[Link]">
<script src="/js/[Link]"></script>
5. External Resources (Full URL)
• Accessing files from a different domain (CDN or another website):
<link rel="stylesheet"
href="[Link]
<script src="[Link]

Level 4 HTML and Project Structure Page 82

4. More Tags
Friday, February 14, 2025 11:34 AM

1. Navigation tags
2. Block / Inline Elements
3. Div tags
4. Span Tags

Level 4 HTML and Project Structure Page 83

4.1 Navigation Tags
Wednesday, July 24, 2024 8:43 PM

• Purpose : Encloses navigation links or menus

Ex:

1. Purpose
• Used to enclose navigation links or menus that help users move between different sections of
a website.

2. Semantic Meaning
• The <nav> tag is a semantic HTML5 element that signals that the enclosed content is meant for
website navigation.
• It improves SEO and accessibility by helping search engines and screen readers understand the
site's structure.
Example Use Case:
• If we want to allow users to navigate to different sections of a webpage or different pages of a
website, we use the <nav> tag.

3. Common Content Inside <nav>

• Typically contains an unordered list (<ul>) or an ordered list (<ol>) with anchor (<a>) links.

4. Accessibility Benefits
• Helps screen readers identify the main navigation menu.
• Useful for visually impaired users who rely on text-to-speech for website navigation.

Example: Basic Navigation Menu

<nav>
<ul>
<li><a href="[Link]">Home</a></li>
<li><a href="[Link]">About</a></li>
<li><a href="[Link]">Services</a></li>
<li><a href="[Link]">Contact</a></li>
</ul>
</nav>
Example: Navigating Within a Webpage
<nav>
<ul>
<li><a href="#section1">Section 1</a></li>
<li><a href="#section2">Section 2</a></li>
<li><a href="#section3">Section 3</a></li>
</ul>
</nav>
<section id="section1">
<h2>Section 1</h2>

Level 4 HTML and Project Structure Page 84

 <h2>Section 1</h2>
<p>Content of Section 1...</p>
</section>
<section id="section2">
<h2>Section 2</h2>
<p>Content of Section 2...</p>
</section>

Level 4 HTML and Project Structure Page 85

4.2 Block and Inline Element
Wednesday, July 24, 2024 8:56 PM

Block element Inline Element

New Line : Start on a new line Flow : Stay in line with text
Full width : Take up all horizontal space Width : Just as wide as the content
Styling : Can have margins and padding No Break : No new line between
Size : Width and height can be set Limited Styling : Cant set easily
Example : <div> ,<p> , <h1> , <ul> , <li> Examples: <span> , <em> , <img> , <strong> , <a>

1. Block Elements
• New Line: Always start on a new line.
• Full Width: Takes up the entire horizontal space available.
• Styling: Can have margins and padding.
• Size: Width and height can be set freely.
• Examples: <div>, <p>, <h1> to <h6>, <ul>, <li>, <table>, <header>, <footer>, <section>,
<article>.
Example of Block Elements:
<div style="background-color: lightblue; padding: 10px;">
This is a block element (div). It takes the full width.
</div>
<p>This is a paragraph. It also behaves as a block element.</p>

2. Inline Elements
• Flow: Stays in line with surrounding text.
• Width: Only as wide as the content inside.
• No Break: Does not start on a new line.
• Limited Styling: Cannot easily have width and height set.
• Examples: <span>, <a>, <em>, <strong>, <img>, <label>.
Example of Inline Elements:
<p>This is <span style="color: red;">inline text</span> inside a paragraph.</p>
<a href="#">This is a link (inline element).</a>

3. Key Differences Between Block and Inline Elements

Feature Block Elements Inline Elements
New Line Starts on a new line Stays inline with text
Width Takes full horizontal width Takes only required width
Margins & Padding Can be applied easily Limited margin & padding support
Size (Width & Height) Can be customized Hard to set width/height
Examples <div>, <p>, <h1>, <ul> <span>, <a>, <strong>, <em>

• Code :
• No_4_2_BlockInlin :

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=
1.0">

Level 4 HTML and Project Structure Page 86

1.0">
<title>Document</title>
</head>
<body>
<p id="p1">Paragraph 1</p><p id="p2">paragraph 2</p> <!--Both
paragraph contain all horizontal line space and they print into diffrent
lines-->
<hr>
<a href="#p1">paragraph 1</a><a href="#p2">paragraph 2</a> <!--both
links are printed into a single line -->
</body>
</html>

O/P :

Level 4 HTML and Project Structure Page 87

4.3 Div tag
Wednesday, July 24, 2024 9:08 PM

1. Purpose:
• Acts as a container for grouping other HTML elements.
• Helps in structuring and organizing webpage content.

2. Characteristics:
• Non-Semantic: Does not provide meaning to its content, unlike <section> or <article>.
• Styling: Used for applying CSS styles, layouts, and positioning.
• Flexibility: Can be styled with classes and IDs for customization.
• Block Element: Takes the full horizontal width available.
Example of a Basic <div> Container:
<div style="background-color: lightgray; padding: 10px;">
<h2>This is a Div Container</h2>
<p>Div helps in grouping elements together.</p>
</div>
3. Using <div> for Layout
• Used in grid systems, flexbox layouts, and containers.
• Helps in making responsive web designs.
Example of a Two-Column Layout Using <div> and CSS:
<style>
.container {
display: flex;
gap: 10px;
}
.box {
width: 50%;
padding: 20px;
background-color: lightblue;
}
</style>
<div class="container">
<div class="box">Column 1</div>
<div class="box">Column 2</div>
</div>
4. Difference Between <div> and Semantic Tags (<section>,
<article>):
Feature <div> (Non-Semantic) <section> / <article> (Semantic)
Purpose General-purpose container Used for meaningful content
SEO Does not improve SEO Helps in SEO & accessibility
Use Case Styling, layouts, grouping Sections of structured content

When to Use <div>?

✔ For styling, layouts, and general grouping of elements.
✔ When no specific meaning is required for the grouped content.

• CODE :
• No_4_3_divTag :

Level 4 HTML and Project Structure Page 88

• No_4_3_divTag :

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=
1.0">
<title>Document</title>
</head>
<body>
<div>
<p>This is a para</p> <!--Both are used for wrape into one
container and it is used to styling similar content-->
<big>This is a big</big>
</div>
</body>
</html>

O/P :

Level 4 HTML and Project Structure Page 89

4.4 Span Tag
Wednesday, July 24, 2024 9:13 PM

1. Purpose:
○ The <span> tag is used to group inline elements or a portion of text for styling or
manipulation.
○ It does not represent anything specific semantically, meaning it has no inherent meaning
by itself.
2. Non-Semantic:
○ The <span> tag is considered a non-semantic element. It does not add any meaning to
the text inside it. Its only purpose is to style or group inline content.
○ Example:
<p>This is <span>important</span> text.</p>
3. Styling:
○ It is commonly used for applying styles to a specific part of text or inline content, such as
changing the color, font, or adding effects via CSS.
○ Example:
<span style="color: red; font-weight: bold;">This text is styled.</span>
4. Inline Nature:
○ The <span> tag is an inline element. This means it does not break the flow of the text or
create a new block-level element.
○ It only affects the portion of the text inside it while preserving the surrounding content's
layout.
○ Example:
<p>This is a sentence with <span style="color: blue;">highlighted text</span> in it.</p>
5. Use Case Example:
○ The <span> tag is widely used when you want to apply specific styles, such as text color,
font size, or other inline styles, to a portion of text within a larger block.
○ Example:
<p><span style="font-size: 18px; color: green;">Green text</span> in a paragraph.</p>
Additional Points:
• Since the <span> tag is a non-semantic tag, it should be used sparingly for styling purposes. It
is not recommended for structural content. If you need to represent content that has semantic
meaning (like a date, a section of a document, etc.), other tags such as <strong>, <em>,
<time>, etc., are preferred over <span>.
• The <span> tag is typically used in conjunction with CSS, JavaScript, or other inline
manipulation tools. It does not have any built-in styling or behavior on its own.

• CODE :
• No_4_4_spanTag :

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=
1.0">
<title>Document</title>
<style>
.highlighted{
font-weight: bolder;
}
</style>
</head>

Level 4 HTML and Project Structure Page 90

</head>
<body>
<p>Lorem ipsum <span class="highlighted">dolor</span> sit
amet consectetur, adipisicing elit. Architecto assumenda dolore culpa
rem ratione maxime corporis, quibusdam quis quo! Nam!</p> <!--Here we
can apply css style to dollor world -->
</body>
</html>

O/P :

Level 4 HTML and Project Structure Page 91

1. List Tag
Friday, February 14, 2025 11:35 AM

1. Ordered Lists
2. Types of Ordered Lists
3. Unordered Lists

Level 5 LIST TABLE FORMS IFRAME Page 92

1.1 Ordered List tag
Thursday, July 25, 2024 7:25 AM

1. Purpose:
○ The <ol> tag is used to create an ordered (numbered) list in HTML, where the list items
follow a specific sequence.
○ The items in the list are automatically numbered by default.

2. Default:
○ By default, the items in an ordered list are numbered in ascending order (1, 2, 3, etc.).
○ Example:
<ol>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ol>
○ The above list will be numbered as:
1. Item 1
2. Item 2
3. Item 3

3. Nesting:
○ Ordered lists can be nested inside other ordered lists or unordered lists to create multi-
level lists.
○ Example of nesting:
<ol>
<li>First item
<ol>
<li>Subitem 1</li>
<li>Subitem 2</li>
</ol>
</li>
<li>Second item</li>
</ol>
○ The nested list will be numbered as:
1. First item
1. Subitem 1
2. Subitem 2
2. Second item

4. Types of Ordered Lists:

○ The <ol> tag allows the numbering style of the list to be customized using the type
attribute. There are several types available:
1. Numeric (Default Type):
▪ This is the default numbering style, where the list items are numbered with digits
(1, 2, 3, …).
▪ Attributes: type="1"
▪ Example:
<ol type="1">
<li>First item</li>
<li>Second item</li>
</ol>

Output:

Level 5 LIST TABLE FORMS IFRAME Page 93

 Output:
1. First item
2. Second item

2. Uppercase Letters:
▪ This style uses uppercase letters (A, B, C, …) for numbering the items.
▪ Attributes: type="A"
▪ Example:
<ol type="A">
<li>First item</li>
<li>Second item</li>
</ol>

Output: A. First item B. Second item

3. Lowercase Letters:
▪ This style uses lowercase letters (a, b, c, …) for numbering the items.
▪ Attributes: type="a"
▪ Example:
<ol type="a">
<li>First item</li>
<li>Second item</li>
</ol>

Output: a. First item b. Second item

4. Uppercase Roman:
▪ This style uses uppercase Roman numerals (I, II, III, …) for numbering the items.
▪ Attributes: type="I"
▪ Example:
<ol type="I">
<li>First item</li>
<li>Second item</li>
</ol>

Output: I. First item II. Second item

5. Lowercase Roman:
▪ This style uses lowercase Roman numerals (i, ii, iii, …) for numbering the items.
▪ Attributes: type="i"
▪ Example:
<ol type="i">
<li>First item</li>
<li>Second item</li>
</ol>

Output: i. First item ii. Second item

Additional Points:
• Start Attribute:
○ The start attribute can be used to specify the starting number for the ordered list.
○ Example:
<ol start="5">
<li>First item</li>
<li>Second item</li>
</ol>

Level 5 LIST TABLE FORMS IFRAME Page 94

 Output: 5. First item 6. Second item
• Reversed Attribute:
○ The reversed attribute reverses the order of the list, starting from the highest number.
○ Example:
<ol reversed>
<li>First item</li>
<li>Second item</li>
</ol>

Output: 2. First item

1. Second item

• CODE :

• No_1_1_OrderList :

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=
1.0">
<title>Document</title>
</head>
<body>
<ol>
<li>HTML</li>
<ol>
<li>LEVEL 1</li>
<li>LEVEL 2</li>
<li>LEVEL 3</li>
</ol>
<li>CSS</li>
<li>JS</li>
<hr>
<h3>Types of ordered list :</h3>
<br>
<h5>[Link] : </h5>
<ol type="1">
<li>labh</li>
<li>sangitaben</li>
<li>shaileshbhai</li>
<li>tanvi</li>
</ol>
<br>
<h5>2. Uppercase Letters : </h5>
<ol type="A">
<li>labh</li>
<li>sangitaben</li>
<li>shaileshbhai</li>
<li>tanvi</li>
</ol>
<br>
<h5>3. Lowercase Letters :</h5>
<ol type="a">
<li>labh</li>
<li>sangitaben</li>
<li>shaileshbhai</li>
<li>tanvi</li>

Level 5 LIST TABLE FORMS IFRAME Page 95

 <li>tanvi</li>
</ol>
<br>
<h5>4. Uppercase Roman :</h5>
<ol type="I">
<li>labh</li>
<li>sangitaben</li>
<li>shaileshbhai</li>
<li>tanvi</li>
</ol>
<br>
<h5>5. Lowecase Roman</h5>
<ol type="i">
<li>labh</li>
<li>sangitaben</li>
<li>shaileshbhai</li>
<li>tanvi</li>
</ol>
</ol>
</body>
</html>

O/P :

Level 5 LIST TABLE FORMS IFRAME Page 96

1.2 Unordered List
Thursday, July 25, 2024 7:42 AM

1. Purpose:
○ The <ul> tag is used to create an unordered (bulleted) list in HTML, where the order of
the list items does not matter.
○ This type of list is useful when the sequence or priority of the items is irrelevant.

2. Default:
○ By default, the items in an unordered list are displayed with bullet points (•).
○ Example:
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>

Output:
▪ Item 1
▪ Item 2
▪ Item 3

3. Nesting:
○ Unordered lists can be nested inside other unordered lists or ordered lists to create
multi-level lists.
○ Example of nesting:
<ul>
<li>First item
<ul>
<li>Subitem 1</li>
<li>Subitem 2</li>
</ul>
</li>
<li>Second item</li>
</ul>

Output:
▪ First item
□ Subitem 1
□ Subitem 2
▪ Second item

4. List Marker (Bullet) Style:

○ The bullet style (default) can be customized using the list-style-type CSS property. Some
common bullet styles include:
▪ Disc (default): A filled circle (•).
▪ Circle: An empty circle (○).
▪ Square: A filled square (▪).
Example of customizing the list marker:
<ul style="list-style-type: square;">
<li>Item 1</li>
<li>Item 2</li>
</ul>

Level 5 LIST TABLE FORMS IFRAME Page 97

 Output: ▪ Item 1
▪ Item 2

5. Additional CSS Customizations:

○ List Style Image: You can use an image as the bullet by setting the list-style-image
property. Example:
<ul style="list-style-image: url('[Link]');">
<li>Item 1</li>
<li>Item 2</li>
</ul>
○ List Style Position: The list-style-position property controls whether the bullets are
inside or outside the list item.
▪ inside: The bullet is placed inside the list item (the text will flow around the bullet).
▪ outside: The default, where the bullet is outside the list item.
Example:
<ul style="list-style-position: inside;">
<li>Item 1</li>
<li>Item 2</li>
</ul>
Additional Points:
• List Item Tags:
○ The <li> tag is used to define each item in the list. It is common to use the <li> tag inside
both ordered (<ol>) and unordered (<ul>) lists to represent individual list elements.
• Accessibility Considerations:
○ When using lists, ensure that you use the appropriate HTML tags (<ol>, <ul>, <li>) for
accessibility purposes. This helps screen readers and other assistive technologies to
properly interpret the structure of the list.

• CODE :
• No_1_2_UnorderedLIst :

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=
1.0">
<title>Document</title>
</head>
<body>
<uL>
<li>labh</li>
<li>sangitaben</li>
<li>shaileshbhai</li>
<li>tanvi</li>
</uL>
</body>
</html>

O/P :

Level 5 LIST TABLE FORMS IFRAME Page 98

2. Table Tag
Friday, February 14, 2025 11:36 AM

1. <tr> , <td> , <th> tags

2. Captions
3. Col spans

Level 5 LIST TABLE FORMS IFRAME Page 99

2.1 <table> , <tr> , <td> , <th> Tags
Thursday, July 25, 2024 7:45 AM

1. <table>:
○ The <table> tag is used to create a table in HTML. It defines the structure of the table
and contains all the rows and cells.
○ Example:
<table>
<!-- Rows and cells go here -->
</table>
2. <tr> (Table Row):
○ The <tr> tag is used to define a row within the table.
○ It groups a set of table cells (<td> or <th>) into a row.
○ Example:
<table>
<tr>
<td>Row 1, Cell 1</td>
<td>Row 1, Cell 2</td>
</tr>
</table>
3. <th> (Table Header):
○ The <th> tag is used to define header cells within a table.
○ By default, text inside a <th> element is bold and centered.
○ Example:
<table>
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
<tr>
<td>Data 1</td>
<td>Data 2</td>
</tr>
</table>
○ Output:
• Header 1 • Header 2
• Data 1 • Data 2
4. <td> (Table Data):
○ The <td> tag is used to hold the actual data in a table. It defines each individual cell in a
table row.
○ Example:
<table>
<tr>
<td>Data 1</td>
<td>Data 2</td>
</tr>
</table>

• CODE :
• No_2_Table :

<!DOCTYPE html>

Level 5 LIST TABLE FORMS IFRAME Page 100

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=
1.0">
<title>Document</title>
</head>
<body>
<table border="1">
<tr>
<th>Languge</th>
<th>Competency</th>
<th>Years</th>
</tr>
<tr>
<td>c</td>
<td>5/10</td>
<td>10 years</td>
</tr>
<tr>
<td>Java</td>
<td>9/10</td>
<td>5 years</td>
</tr>
</table>
</body>
</html>

O/P :

Level 5 LIST TABLE FORMS IFRAME Page 101

2.2 Caption
Thursday, July 25, 2024 7:52 AM

1. Purpose:
○ The <caption> tag provides a title or description for a table, which helps explain the
table's purpose or content.
○ Example:
<table>
<caption>Monthly Sales Report</caption>
<tr>
<th>Product</th>
<th>Sales</th>
</tr>
<tr>
<td>Product A</td>
<td>100</td>
</tr>
</table>
2. Placement:
○ The <caption> tag must be inserted immediately after the opening <table> tag.
○ Example:
<table>
<caption>Annual Report</caption>
<tr>
<th>Year</th>
<th>Revenue</th>
</tr>
<tr>
<td>2023</td>
<td>$10,000</td>
</tr>
</table>
3. Alignment:
○ By default, the caption is centered above the table.
○ Example:
<table>
<caption>Employee List</caption>
<!-- Table rows here -->
</table>
4. Accessibility:
○ The <caption> element helps screen readers understand the table's purpose, making the
table more accessible.
○ It provides a description or title for the table, which can be read out by assistive
technology for better navigation.

• CODE :
• No_2_1_caption :

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=

Level 5 LIST TABLE FORMS IFRAME Page 102

 <meta name="viewport" content="width=device-width, initial-scale=
1.0">
<title>Document</title>
</head>
<body>
<table border="1">
<caption>Technologies</caption>
<tr>
<th></th>
<th colspan="2">Lang. Experience</th>
</tr>
<tr>
<th>Languge</th>
<th>Competency</th>
<th>Years</th>
</tr>
<tr>
<td>c</td>
<td>5/10</td>
<td>10 years</td>
</tr>
<tr>
<td>Java</td>
<td>9/10</td>
<td>5 years</td>
</tr>
</table>
</body>
</html>

O/P :

Level 5 LIST TABLE FORMS IFRAME Page 103

2.3 Col span
Thursday, July 25, 2024 7:56 AM

1. Attribute:
○ The colspan attribute is used in the <td> or <th> tags.
○ It specifies how many columns a cell should span across.
○ Example:
<table>
<tr>
<th colspan="2">Header spanning two columns</th>
</tr>
<tr>
<td>Data 1</td>
<td>Data 2</td>
</tr>
</table>
○ In the example above, the header cell spans across two columns.
2. Purpose:
○ The colspan attribute allows a cell to span multiple columns horizontally, making it
useful for creating more complex layouts within a table.
○ Example:
<table>
<tr>
<td colspan="3">Spanning across 3 columns</td>
</tr>
</table>

In this example, the <td> spans across three columns.

3. Alignment:
○ The colspan attribute takes the space of the specified number of columns, and the
content inside the cell will span across those columns.
○ Example:
<table>
<tr>
<td colspan="2" style="text-align:center;">Centered content spanning 2 columns</td>
</tr>
</table>
4. Layout:
○ The colspan attribute is useful for combining cells in a row to create more complex table
layouts, like creating header rows with multiple sections or merging data cells.
○ Example:
<table>
<tr>
<td colspan="2">Combined cell 1</td>
<td colspan="2">Combined cell 2</td>
</tr>
</table>

• CODE :
• No_2_2_ColSpan :

<!DOCTYPE html>
<html lang="en">

Level 5 LIST TABLE FORMS IFRAME Page 104

<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=
1.0">
<title>Document</title>
</head>
<body>
<table border="1">
<caption>Technologies</caption>
<tr>
<th colspan="2">I am good in Tech</th>
</tr>
<tr>
<th>Languge</th>
<th>Competency</th>
<th>Years</th>
</tr>
<tr>
<td>c</td>
<td>5/10</td>
<td>10 years</td>
</tr>
<tr>
<td>Java</td>
<td>9/10</td>
<td>5 years</td>
</tr>
</table>
</body>
</html>

O/P :

Level 5 LIST TABLE FORMS IFRAME Page 105

3. Forms
Friday, February 14, 2025 11:37 AM

1. Input tag
2. Action Attributes
3. Name and Value Property
4. Label Tag
5. Exploring Types

Level 5 LIST TABLE FORMS IFRAME Page 106

3.1 Input Tag
Thursday, July 25, 2024 8:01 AM

1. Purpose:
○ The <input> tag is used within a <form> element to collect user input. It creates various
types of controls, such as text fields, checkboxes, radio buttons, and more.
○ Example:
<form>
<label for="name">Name:</label>
<input type="text" id="name" name="name">
</form>
2. Self Closing:
○ The <input> tag is self-closing, meaning it does not require a closing tag.
○ Example:
<input type="text" name="username">
3. Attributes:
○ name: Specifies the name of the input element. This name is used to reference the form
data after submission. Example:
<input type="text" name="username">
○ value: Specifies the default value or the value of the input field when submitted. This
attribute is often used with buttons and checkboxes. Example:
<input type="text" name="username" value="John Doe">
○ type: Specifies the type of input field. Common input types include:
▪ text: For single-line text input.
▪ password: For password input, where the entered characters are obscured.
Example:
<input type="text" name="email">
<input type="password" name="password">
○ placeholder: Specifies a short hint or description of the expected value. The placeholder
text appears inside the input field until the user starts typing. Example:
<input type="text" placeholder="Enter your username">
○ required: Specifies that the input field must be filled out before submitting the form. It is
a Boolean attribute, and setting it to true ensures that the user cannot submit the form
without providing a value for the input. Example:
<input type="text" name="username" required="true">
4. Types of <input>:
○ There are many types of input fields available with the <input> tag. Here are a few
common ones:
▪ text: A single-line text input field.
▪ password: A password input field, where the characters typed are hidden.
▪ email: For input that expects an email address.
▪ number: For numerical input.
▪ checkbox: For a checkbox input (allows multiple selections).
▪ radio: For radio button inputs (allows only one selection).
▪ submit: Creates a submit button for forms.
▪ date: For selecting a date.
▪ file: For file uploads.
Example of various input types:
<form>
<input type="text" name="username" placeholder="Username">
<input type="password" name="password" placeholder="Password">
<input type="email" name="email" placeholder="Email">
<input type="submit" value="Submit">
</form>

Level 5 LIST TABLE FORMS IFRAME Page 107

 </form>

• CODE :
• No_3_1_Input :

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=
1.0">
<title>Document</title>
</head>
<body>
<form>
Username:<input type="text"
placeholder="Email/mobilenumber/username" required="true" >
<br>
Password:<input type="password" placeholder="password"
required="true">
</form>
</body>
</html>

O/P :

Level 5 LIST TABLE FORMS IFRAME Page 108

3.2 Action attribute for form
Thursday, July 25, 2024 8:10 AM

1. Purpose:
○ The action attribute specifies the URL to which the form data should be sent when the
form is submitted.
○ It determines where the form data will be sent for processing once the user fills out the
form and clicks submit.
○ Example:
<form action="submit_form.php" method="POST">
<input type="text" name="username" placeholder="Username">
<input type="submit" value="Submit">
</form>

In this example, the form data will be submitted to submit_form.php.

2. Submitting Data:
○ When the user fills in the form and submits it, the data is sent to the server as part of
the HTTP request, either through a URL (for GET method) or as part of the request body
(for POST method).
○ The server-side script specified in the action attribute (e.g., submit_form.php,
process_form.py) will handle the form data.
○ Example (GET method):
<form action="search_results.php" method="GET">
<input type="text" name="query" placeholder="Search">
<input type="submit" value="Search">
</form>

The data entered in the form (query) will be sent to search_results.php in the URL like
search_results.php?query=value.
3. Default Behavior:
○ If the action attribute is not specified, the form will be submitted to the current page’s
URL (the same page the form is on).
○ This is useful when you want to handle the form submission on the same page without
redirecting the user to a different page.
○ Example:
<form method="POST">
<input type="text" name="username" placeholder="Username">
<input type="submit" value="Submit">
</form>

In this case, if the form is submitted, the data will be sent to the same URL as the current
page.
4. Server-Side Processing:
○ The action attribute usually points to a server-side script (e.g., PHP, Python, [Link])
that processes the form data.
○ Example with PHP:
<form action="process_form.php" method="POST">
<input type="text" name="name" placeholder="Enter your name">
<input type="submit" value="Submit">
</form>

Here, the form data is submitted to process_form.php, which handles the processing
and can store, display, or return data based on the form input.
5. Security Considerations:

Level 5 LIST TABLE FORMS IFRAME Page 109

5. Security Considerations:
○ Be mindful of security when specifying the action attribute. Ensure the form sends data
to a secure endpoint (usually over HTTPS) to avoid interception of sensitive information.
○ Example:
<form action="[Link] method="POST">
<input type="password" name="password" placeholder="Password">
<input type="submit" value="Submit">
</form>

• CODE :
• No_3_2_ActionAttribute copy :

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=
1.0">
<title>Document</title>
</head>
<body>
<form action="/[Link]">
Username:<input type="text"
placeholder="Email/mobilenumber/username" required="true">
<br><br>
Password:<input type="password" placeholder="password">
<br><br>
<input type="submit">
</form>
</body>
</html>

O/P :

When we press submit then :

Level 5 LIST TABLE FORMS IFRAME Page 110

3.3 Name and value property
Thursday, July 25, 2024 8:18 AM

1. name Property:
○ Identifies Form Elements:
▪ The name property is used to identify form elements when submitting the form. It
assigns a name to each input element, and this name will be used to send data to
the server.
▪ Example:
<input type="text" name="username" placeholder="Enter your username">

In this case, when the form is submitted, the data will be sent with the username
as the key.
○ Unique:
▪ The name attribute should be unique for each form element to avoid confusion
and ensure clarity. Each form element should have a different name to clearly
identify the data being submitted.
▪ Example:
<input type="text" name="username" placeholder="Username">
<input type="password" name="password" placeholder="Password">
○ Purpose in Form Submission:
▪ When the user submits the form, the form data is sent as a key-value pair where
the key is the name attribute, and the value is the user's input in the
corresponding input field.
▪ Example (GET method submission):
<form action="submit_form.php" method="GET">
<input type="text" name="username" placeholder="Username">
<input type="password" name="password" placeholder="Password">
<input type="submit" value="Submit">
</form>

The form submission would result in a URL like:

submit_form.php?username=johndoe&password=secretpassword
2. value Property:
○ Default Data:
▪ The value property sets the initial value for the input elements. This value is what
appears inside the input field by default when the form is loaded.
▪ Example:
<input type="text" name="username" value="Guest">

In this case, the input field will display "Guest" as the default value when the page
loads.
○ Data Sent to Server:
▪ The value property represents the data that is sent to the server when the form is
submitted. If the user modifies the input, the modified value is sent; if the user
leaves it unchanged, the default value is sent.
▪ Example:
<input type="text" name="username" value="Guest">

If the user submits the form without entering any value, the data sent to the
server will be username=Guest.
○ Handling Empty Input:
▪ If the user doesn't enter any value in a required field and you don’t want the field
to be blank, you can set a default value using the value property. This ensures that

Level 5 LIST TABLE FORMS IFRAME Page 111

 to be blank, you can set a default value using the value property. This ensures that
a non-empty value is always sent to the server, even if the user leaves the field
empty.
▪ Example:
<input type="text" name="username" value="Guest">

If the user doesn't provide a username, the form will submit the value Guest for
the username field. This is particularly useful when you need to ensure that a
default value is stored in a database or used for further processing.
▪ Example with a fallback value:
<input type="text" name="username" value="Guest" placeholder="Enter your
username">
3. Practical Example with Default and Submitted Values:
○ Here’s an example where the user can submit the form with or without filling in the
username field. If no username is entered, "Guest" will be sent as the default.
<form action="process_form.php" method="POST">
<input type="text" name="username" value="Guest" placeholder="Username">
<input type="submit" value="Submit">
</form>
▪ If the user enters "JohnDoe", the data sent to the server will be:
username=JohnDoe
▪ If the user leaves the field empty, the data sent will be:
username=Guest

• CODE :
• No_3_3_NameAndValue :

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=
1.0">
<title>Document</title>
</head>
<body>
<form action="/[Link]">
Username:<input type="text"
placeholder="Email/mobilenumber/username" required="true" name="Username"
value="Guest">
<br><br>
Password:<input type="password" placeholder="password">
<br><br>
<input type="submit">
</form>
</body>
</html>

O/P :

Level 5 LIST TABLE FORMS IFRAME Page 112

3.4 label Tag
Thursday, July 25, 2024 8:27 AM

1. Purpose:
○ The <label> tag is used to add a text description to form elements, helping users
understand what information is required in each input field. It improves the usability of
forms by clearly describing the purpose of each input element.
○ Example:
<label for="username">Username:</label>
<input type="text" id="username" name="username">
2. Semantic Tag:
○ The <label> tag is considered a semantic tag because it provides meaning and context to
the form element it is associated with, helping both users and search engines
understand the form's structure.

3. for Attribute:
○ The <label> tag has a for attribute, which connects the label text to a specific form
element. The for attribute should contain the id of the input element it is labeling.
○ This connection makes it easier for users to click on the label to focus on the associated
input field, improving the overall user experience.
○ Example:
<label for="email">Email Address:</label>
<input type="email" id="email" name="email">
4. Accessibility:
○ The <label> tag plays a significant role in enhancing form accessibility, especially for
people who rely on screen readers. When the label is correctly associated with the input
field using the for attribute, screen readers can clearly announce the input field's
description to users with visual impairments.
○ Example:
<label for="phone">Phone Number:</label>
<input type="tel" id="phone" name="phone">
5. SEO Ranking:
○ Using the <label> tag properly can also improve SEO (Search Engine Optimization). It
provides additional context to search engines about the content of the page, making it
more likely to rank well for relevant queries.
○ Example:
<label for="address">Shipping Address:</label>
<input type="text" id="address" name="address">
6. Readability and Usability:
○ The <label> tag enhances the readability and usability of forms. It makes the form more
intuitive and user-friendly by providing clear descriptions for each input field.
○ When users can easily understand what information is being requested, they are more
likely to complete and submit the form correctly.
○ Example of a complete form with labels:
<form action="submit_form.php" method="POST">
<label for="first_name">First Name:</label>
<input type="text" id="first_name" name="first_name" placeholder="Enter your first
name">

<label for="last_name">Last Name:</label>

<input type="text" id="last_name" name="last_name" placeholder="Enter your last
name">

<input type="submit" value="Submit">

Level 5 LIST TABLE FORMS IFRAME Page 113

 <input type="submit" value="Submit">
</form>
7. Practical Example:
○ When the user clicks on the label text, the corresponding input field is automatically
focused, improving form interaction.
<form>
<label for="email">Email Address:</label>
<input type="email" id="email" name="email" placeholder="Enter your email">
</form>
Summary:
• The <label> tag is essential for creating accessible, user-friendly forms.
• It enhances the form's clarity, SEO, and accessibility, especially for users relying on assistive
technologies.
• Always connect the label to its associated input field using the for attribute and the id of the
input.

• CODE :
• No_3_4_labelTag :

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=
1.0">
<title>Document</title>
</head>
<body>
<form action="/[Link]">
<label for="username"><b>Username :</b></label>
<input type="text" id="username"
placeholder="Email/mobilenumber/username" required="true" >

<br>
<br>
<label for="user_password"><b>Password :</b></label>
<input type="password" id="user_password" placeholder="password">
<br>
<br>
<br>

<input type="submit">
</form>
</body>
</html>

O/P :

Level 5 LIST TABLE FORMS IFRAME Page 114

3.5 Input type data or other form tags
Thursday, July 25, 2024 8:51 AM

1. Input Types:
○ date:
▪ Purpose: Used to create an input field where users can select a date. It provides a
date picker interface in supported browsers.
▪ Example:
<label for="birthdate">Birthdate:</label>
<input type="date" id="birthdate" name="birthdate">
○ file:
▪ Purpose: Used to allow users to upload files through a form. The file input allows
users to browse and select a file from their device.
▪ Example:
<label for="file-upload">Upload File:</label>
<input type="file" id="file-upload" name="file-upload">
○ color:
▪ Purpose: Allows users to choose a color using a color picker. The selected color
will be submitted as a hex color code.
▪ Example:
<label for="color">Pick a Color:</label>
<input type="color" id="color" name="color">
○ range:
▪ Purpose: Used to create an input that allows the user to select a value within a
specified range. It displays a slider that the user can drag.
▪ Example:
<label for="volume">Volume:</label>
<input type="range" id="volume" name="volume" min="0" max="100">
○ button:
▪ Purpose: Creates a clickable button that can trigger JavaScript actions. It doesn't
submit the form by default.
▪ Example:
<button type="button">Click Me</button>
○ submit:
▪ Purpose: Used to submit the form data to the server. It sends the data to the URL
specified in the action attribute of the form.
▪ Example:
<input type="submit" value="Submit Form">
○ radio:
▪ Purpose: Used for creating radio buttons, allowing users to select one option from
a set of options. Radio buttons with the same name attribute are grouped
together.
▪ Example:
<label for="male">Male:</label>
<input type="radio" id="male" name="gender" value="male">

<label for="female">Female:</label>
<input type="radio" id="female" name="gender" value="female">
○ checkbox:
▪ Purpose: Used for creating checkboxes, allowing users to select multiple options
from a list.
▪ Example:
<label for="newsletter">Subscribe to newsletter:</label>
<input type="checkbox" id="newsletter" name="newsletter">

Level 5 LIST TABLE FORMS IFRAME Page 115

 <input type="checkbox" id="newsletter" name="newsletter">
○ select:
▪ Purpose: Creates a dropdown menu, allowing users to select an option from a list
of predefined options.
▪ Example:
<label for="country">Select a Country:</label>
<select id="country" name="country">
<option value="USA">USA</option>
<option value="India">India</option>
<option value="Canada">Canada</option>
</select>

2. <textarea> Tag:
○ Purpose:
▪ The <textarea> tag is used for multi-line text input in forms. It allows users to
enter larger amounts of text, such as comments, messages, or feedback.
▪ Example:
<label for="message">Your Message:</label>
<textarea id="message" name="message"></textarea>
○ rows Property:
▪ Specifies the visible number of lines in the <textarea>. This defines the height of
the textarea in terms of rows of text.
▪ Example:
<textarea rows="4" id="message" name="message"></textarea>
○ cols Property:
▪ Specifies the visible width of the <textarea>, measured in average character
widths. It determines how many characters can fit in one line of the textarea.
▪ Example:
<textarea rows="4" cols="50" id="message" name="message"></textarea>
○ Resizable:
▪ Some browsers allow users to manually resize the <textarea>. This means users
can adjust the size of the input area based on their needs.
▪ Example:
<textarea rows="4" cols="50" id="message" name="message"></textarea>
▪ In some browsers, users can click and drag the bottom-right corner to resize the
text area.

Summary:
• Input Types provide a wide variety of ways to collect data from users in different formats,
such as dates, file uploads, colors, ranges, and more.
• The <textarea> tag allows for multi-line text input, and its rows and cols attributes help
customize its size.
• By using appropriate input types, you can enhance the user experience and ensure that data is
collected efficiently and accurately.

• CODE :
• No_3_5_InputDataFormTags :

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=
1.0">
<title>Document</title>
</head>
<body>

Level 5 LIST TABLE FORMS IFRAME Page 116

<body>
<form action="/[Link]">

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

<input type="text" id="username"
placeholder="Email/mobilenumber/username" required="true" >

<br>
<br>
<label for="user_password"><b>Password :</b></label>
<input type="password" id="user_password" placeholder="password">
<br>
<br>
<label for="date_1"><b>Date : </b></label>
<input type="date" id="date_1">

<br>
<br>
<label for="file">File :</label>
<input type="file" id="file">
<br>
<br>
<label for="color">Color :</label>
<input type="color" id="color">

<br>
<br>
<label for="range">Price Range :</label>
<input type="range" id="range">
<br>
<br>
<label for="button_1"></label>
<input type="button" value="Exit" id="button_1">
<br><br>
<label for="Male">Male</label>
<input type="radio" id="Male" name="gender" value="Male"> <!--
here when we submit the form then in this case in backenf value will
pass-->
<br>
<label for="Female">Female</label>
<input type="radio" id="Female" name="gender" value="Female">
<br>
<label for="Other">Other</label>
<input type="radio" id="Other" name="gender" value="Other">
<!--If we put diffrent name of all radio button then we can
select multiple-->
<!--If we put same name for all radio button in this case we can
select any one radio button at a time-->
<!--If we connect the label and raadio button in this case if you
click on the label (male text) then also button choosen-->

<br><br>
<label for="C">C</label>
<input type="checkbox" id="C" name="Languges" value="c">
<br>
<label for="Java">Java</label>
<input type="checkbox" id="Java" name="Languges" value="Java">
<br>
<label for="Python">Python</label>
<input type="checkbox" id="Python" name="Languges"
value="Python">
<!--If you select c ,java in check box then c,java value pass to
the database-->

Level 5 LIST TABLE FORMS IFRAME Page 117

the database-->
<!--To allign a check boc and name in line write in table-->

<br><br>
<!--select is used for large number of radio sbutton then in this
case we use select input-->
<label for="Country">Select your country :</label>
<select name="Country" id="Country">
<option value="India">India</option>
<option value="Uk">Uk</option>
<option value="Us">Us</option>
<option value="Other">Other</option>

</select>
<br><br>
<textarea name="story" id="story" cols="30" rows="10">Write a
feedback</textarea>
<br>
<br>
<br>
<input type="submit">
</form>
</body>
</html>

O/P :

Level 5 LIST TABLE FORMS IFRAME Page 118

4. iFrame Tag
Friday, February 14, 2025 11:38 AM

1. Using iFrames

Level 5 LIST TABLE FORMS IFRAME Page 119

4.1 Using iFrame
Thursday, February 13, 2025 6:07 PM

1. Embedded Content:
○ The <iframe> tag is used to embed another webpage or multimedia content within the
current webpage. This allows you to display external resources, such as videos, maps, or
entire web pages, directly within your webpage.
○ Example:
<iframe src="[Link]
2. src Attribute:
○ The src attribute specifies the URL of the content that you want to embed inside the
<iframe>. This can be the URL of another webpage, an image, a video, or other types of
multimedia content.
○ Example:
<iframe src="[Link]
3. Dimensions:
○ The dimensions of the <iframe> can be controlled using the width and height attributes.
These attributes allow you to specify the size of the embedded content on your page. By
default, the <iframe> tag has no dimensions, so it's important to set these values to
ensure it fits well within your layout.
○ Example:
<iframe src="[Link] width="600" height="400"></iframe>
4. Embedding YouTube Videos:
○ Many websites, like YouTube, allow you to directly embed their content into your
webpage using an <iframe>. You can simply copy the "Embed" code provided by the
website (e.g., YouTube) and paste it into your HTML.
○ For YouTube, you typically get an iframe with a special URL format that allows you to
embed the video directly.
○ Example:
<iframe width="560" height="315"
src="[Link] frameborder="0"
allowfullscreen></iframe>
○ This approach works because YouTube explicitly allows their videos to be embedded,
and the video is displayed within an iframe on your page.
5. Security and Restrictions on Embedding:
○ Some websites, including Facebook, Twitter, and other platforms, may prevent their
content from being embedded on external sites. This is often done for security reasons,
to protect against malicious activity or misuse of their content.
○ Websites that block embedding typically do so by setting HTTP headers or using
JavaScript to prevent their pages from being loaded inside iframes. This is a security
feature known as X-Frame-Options or Content Security Policy (CSP) headers. These
headers tell browsers to restrict embedding of content from their domain.
○ For example, Facebook may refuse to embed certain pages or content in an iframe due
to privacy concerns or to protect user data.
6. Why Some Websites Restrict Embedding:
○ Security Reasons: To prevent clickjacking attacks where malicious websites trick users
into interacting with their content without their knowledge.
○ Privacy Concerns: To control how their content is used and ensure that sensitive data is
not exposed on external websites.
○ Monetization Control: Some websites want to ensure that users view their content
directly on their platform to benefit from advertising, analytics, or other monetization
models.
7. Bypassing Embedding Restrictions:
You can't easily bypass these restrictions unless the website explicitly allows it. For most

Level 5 LIST TABLE FORMS IFRAME Page 120

 ○ You can't easily bypass these restrictions unless the website explicitly allows it. For most
cases, respect the embedding policy of each website. However, many websites provide
alternative ways to share content (e.g., providing social media sharing buttons or
offering API integrations).

Summary:
• The <iframe> tag is a powerful tool for embedding external content within your webpage, like
other websites, videos, and multimedia.
• The src attribute specifies the URL of the content you want to display inside the iframe.
• You can set the size of the iframe using the width and height attributes to control how the
embedded content appears.
• YouTube and similar platforms often allow content to be embedded using an iframe by
providing an embed code.
• Facebook and other websites may refuse to allow embedding of their content for security,
privacy, and control reasons.
• These restrictions are put in place to protect the content, user data, and ensure the site
maintains control over how their content is shared.

• CODE :
• [Link] :

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=
1.0">
<title>Document</title>
</head>
<body>
<iframe width="560" height="315"
src="[Link]
title="YouTube video player" frameborder="0" allow="accelerometer;
autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-
picture; web-share" referrerpolicy="strict-origin-when-cross-origin"
allowfullscreen></iframe>
<hr>
<br>
<iframe src="[Link] width="300" height="300">
</iframe>
<!--here facebook is not allow to dispay iframe because of security
purpose-->
<!--some other that have opensource that website is useful-->
<hr>
<iframe src="[Link]
width="500" height="300"></iframe>
</body>
</html>

O/P :

Level 5 LIST TABLE FORMS IFRAME Page 121

Level 5 LIST TABLE FORMS IFRAME Page 122
Git and Git Hub
Friday, February 14, 2025 11:40 AM

1. Github
1. What is Version Control
2. What is Git and GitHub
3. Account Creation
4. Creating a Repo
5. Creating a Codespace
6. Creating a Github page
7. Publishing our project

Bonus Level Page 123

1.1 What is a version control
Thursday, February 13, 2025 6:33 PM

1. Definition: A system to track changes in files over time.

2. Types: Centralized (like SVN) and Distributed (like Git).
3. Purpose: Helps in teamwork and fixes mistakes.
4. Snapshots: Each 'commit' saves a file version.
5. Branching: Lets you work on different tasks separately.
6. Merge: Combines changes from different people.
7. Undo: Easy to revert to older file versions.

Bonus Level Page 124

1.2 What is a git and github
Thursday, February 13, 2025 6:34 PM

What is Git?
● Definition: A software tool that tracks changes in code, enabling collaboration and version
control.
● Commit: Records a snapshot of file changes.
● Branch: Allows separate paths of development.
● Merge: Combines changes from different branches.

What is GitHub?
● Definition: A web service for hosting and collaborating on Git repositories.
● Fork: Creates a personal copy of another user's repository.
● Pull Request: A way to propose changes to existing code.
● Issues: Used for tracking bugs and feature ideas.

Bonus Level Page 125

1.3 Steps to follow
Thursday, February 13, 2025 6:35 PM

1. Account Creation
2. Creating a Repo
3. Creating a Codespace
4. Creating a Github page
5. Publishing our project

Bonus Level Page 126

Frame Works
Friday, February 14, 2025 11:42 AM

2. FrameWorks
1. React
2. Angular
3. Vue

Bonus Level Page 127

2.1 Frame Works
Thursday, February 13, 2025 6:36 PM

• [Link] :
1. Definition: A tool for making websites interactive.
2. Components: Reusable pieces for building a webpage.
3. Virtual DOM: Makes websites faster by updating only what's needed.
4. JSX: A special way to write code that looks like HTML.
5. State: Keeps track of changes on the webpage.
6. Props: Shares information between different parts of a webpage.

• AngularJS :
1. Definition: A framework for building web applications, developed by Google.
2. Two-Way Data Binding: Updates both the view and the model simultaneously.
3. Directives: Custom HTML tags for added functionality.
4. Dependency Injection: Automatically manages how parts of the app work together.
5. Controllers: Manages the data for a specific part of the webpage.
6. SPA Support: Good for Single Page Applications where the page doesn't reload.

• VueJS :
1. Definition: A JavaScript framework for creating web interfaces.
2. Components: Small, reusable parts for building a website.
3. Reactivity: Automatically updates the webpage when data changes.
4. Directives: Special tokens in HTML for added functionality.
5. Vuex: Helps manage shared data across the site.
6. Single-File Components: Keeps template, script, and style in one file.

Bonus Level Page 128

Basic structure
Saturday, February 22, 2025 6:01 PM

<!Doctype html> <!-- (Document type declaration)Shows the version of html

here we use html 5-->
<html lang="en"> <!--Root tag of html file , parent of head and body-->
<head> <!--child of html tag , sibling of body tag , cotain meta data
of html page-->
<meta charset="UTF-8"> <!--for support wide varity of character
styling-->
<meta name="viewport" content="width=device-width, initial-scale=
1.0"> <!--make page responsive aacorging to screen width-->
<title>My First Webpage</title>
<title>All in One</title>
</head>
<body> <!--contain actual data , which is display on browser
screen-->
<header> <!--contain the header and navigation links-->

</header>
<main> <!--contain the main contain or almost all contain-->
<section> <!--use for diffrent section , (non semantic) -->
</section>
<article> <!--Use for texual base content , like article ,
blogs , description etc...-->
</article>
<aside> <!--usefull for less important content , generelly
for ads-->
</aside>
</main>
<footer> <!--for about us information , or information that is
not that much important.-->
</footer>
</body>
</html>

All In One Page 129

Actual code
Saturday, February 22, 2025 6:02 PM

All In One Page 130