1.

INTRODUCTION TO WEB

1.1 What is Web

What is www?
The World Wide Web (WWW) is a vast collection of interconnected information that can be
accessed via the internet. It enables users to visit websites, access videos, engage in online
gaming, and moreHere are some key points to understand:

● Websites: A website is a group of connected web pages about a specific topic. Websites
can be about anything—like sports, music, or education.
● Web Pages: A web page is a single document on a website. It’s what you view when you
enter a URL in your browser.

History of WWW:

In 1980, Tim Berners-Lee began researching how computers

could store information with links. In 1989, while working at
the European Particle Physics Laboratory, he proposed the
idea of a global hypertext space where information could be
linked using a single "universal Document Identifier." This
idea grew in 1990 and became known as the World Wide
Web.

Evolution of the Web

The World Wide Web has changed a lot since it started. Let’s look at how it has evolved over
time:

1. Web 1.0 (The Static Web: 1990-2000s)

● Content: Web 1.0 was the first version of the web. It was mainly made up of static web
pages—simple, read-only content. Users could only view information, but they couldn't
interact with it much.
● Technology: Websites were created using basic HTML, which displayed text, images, and
links. There were no dynamic or interactive features.
● User Experience: The user experience was very limited. Websites didn’t have dynamic
content, and there was no way for users to contribute or modify the content.
Example: Early websites like Yahoo! or Ask Jeeves allowed people to find information but not
interact with the content.

2. Web 2.0 (The Social Web: 2000-2010)

● Content: Web 2.0 marked the rise of interactive and social websites. Users were no
longer just passive readers; they could now contribute, share, and engage with content.
● Technology: New technologies like CSS, JavaScript, and AJAX allowed for more dynamic
websites. The introduction of databases and server-side programming languages (like
PHP) made it possible for websites to store and retrieve user data, leading to the growth
of social networks, blogs, and e-commerce sites.
● User Experience: Users could now interact with websites through comments, forms,
videos, and live chats. Social media platforms and e-commerce grew during this time.

Example: Websites like Facebook, YouTube, and Wikipedia allowed users to share content, post
comments, and interact with others.

3. Web 3.0 (The Semantic Web: 2010 onwards)

● Content: Web 3.0 is still evolving and is often called the "Semantic Web." The goal is to
make the internet more intelligent by allowing machines to understand and interpret
data in a way that is meaningful.
● Technology: The use of Artificial Intelligence (AI), Machine Learning (ML), and Natural
Language Processing (NLP) will allow web applications to process and understand
content better. Blockchain technology is also part of Web 3.0, enabling decentralized
platforms where users have more control over their data.
● User Experience: Websites and apps provide personalized content based on user
preferences. Users have more control over their data and privacy.

Example: A music app (e.g., Spotify) that uses AI to suggest songs you might like, or services like
Siri, Google Now, and Wolfram Alpha, which use AI to provide personalized recommendations
and answers.
Key Points:

Web 1.0 - Read-only, static pages.

Web 2.0 - Social, interactive, and dynamic pages.

Web 3.0 - Intelligent, decentralized, and personalized.

Additional Information (Not for Exams):

Web 3.0 is still changing, but people are already talking about Web 4.0 and Web 5.0. These are
ideas about the future of the internet. They are not fully developed yet, but they imagine a web
that understands us better, feels more personal, and connects with how we act. Web 4.0 might
use more AI and virtual reality, while Web 5.0 could make the web understand our emotions.

Key Concepts Related to the Web

It’s important to understand that the internet and the web are not the same:

The Internet:

● The internet is a huge network of connected computers around the world.

● It allows different devices to communicate with each other.
● It’s like the roads that connect different places.

The Web,:
 ● The web, or World Wide Web (WWW), is a system of websites and pages you can
visit using the internet.
● It’s made up of websites with text, images, videos, and links.
● It’s like the places (websites) you can visit on the internet.

In short: Internet is the connection, like roads. Web is the content, like the places you visit on
those roads.

The Importance of the Web

The web has changed how we communicate, share information, and access services. Its
significance includes:

● Information Access: Quickly find information on almost any topic.

● Communication: Connect with people worldwide through social media, emails, and
messaging platforms.
● E-Commerce: Shop online and access services without leaving home.

1.2 How does the Web work?

To understand how we access websites, let’s break it down into three main parts: Web
Browsers, Servers, and URLs.

1. Web Browsers

A web browser is a program that allows us to view web pages. Popular web browsers
include:

○ Google Chrome
○ Mozilla Firefox
○ Safari
○ Microsoft Edge
 When you type a website address (URL) into the browser and press enter, the browser
sends a request to the web server that holds the website’s information.

2. Servers

A server is a powerful computer that stores websites and their files (like text, images,
and videos). When you request a web page, the server sends the information back to
your browser.

Think of the server like a library where websites (books) are kept. When you ask for a
website (book), the server (librarian) sends it to you.

3. URLs (Uniform Resource Locators)

A URL is the address that tells the browser where to find specific web pages. For
example, the URL for Google is https://www.google.com.

A typical URL has three parts:

● Protocol: This tells the browser how to connect. Most websites use HTTP or
HTTPS (the ‘S’ stands for secure).
● Domain Name: The name of the website (e.g., google.com).
● Path: The specific address of a page (e.g., /search).

4. How Information is Transferred

The web uses HTTP (HyperText Transfer Protocol) to send information between the
browser and the server. This allows you to load pages, click on links, and interact with
websites.

Activity 1: Explore Websites

Objective: To help students understand how websites work and explore the evolution of the
Web.

1. Goal: Visit three different websites, each representing a different phase of the Web's
evolution.
○ Visit a basic website (Example: A simple personal blog or old website) – this
represents Web 1.0.
○ Visit a social or interactive website (Example: Facebook or Wikipedia) – this
represents Web 2.0.
 ○ Visit a personalized or AI-driven website (Example: Spotify, Google Now, or
Amazon) – this represents Web 3.0.
2. Questions to Answer:
○ What is the main purpose of each website?
○ How does the website allow you to interact with the content (e.g., can you
comment, share, or personalize your experience)?
○ Which version of the Web do you think the website represents (Web 1.0, 2.0, or
3.0)? Why?

Activity 2: Build a Simple URL Map

Objective: To help students understand how websites work and explore the evolution of the
Web.

1. Goal: Learn how to break down and understand a URL. Take a URL like
https://www.example.com/blog/article.
● Protocol: What type of connection is used (HTTP or HTTPS)?
● Domain Name: What is the name of the website?
● Path: What specific page is being accessed?
2. Task: Write out the parts of the URL for three websites you visit regularly. Share your
findings with a partner.

1.3 Web Development

Web development refers to the creating, building, and maintaining of websites. It includes
aspects such as web design, web publishing, web programming, and database management. It
is the creation of an application that works over the internet i.e. websites.

The word Web Development is made up of two words, that is:

● Web: It refers to websites, web pages or anything that works over the internet.
● Development: It refers to building the application from scratch.

Web development has two main parts:

● Frontend Development: This is the part of the website users see and interact with.
● Backend Development: This is the part that works behind the scenes to make everything
function.
Web development is essential in today’s world because it helps businesses, individuals, and
organizations establish their presence online and connect with people globally.

1.4 Types of Web Development

Frontend Development
Frontend development focuses on creating the visible parts of a website, like its design, layout,
and interactive features. It determines how the website looks and feels to the user.

Key Technologies:

● HTML (HyperText Markup Language): Provides the basic structure of a webpage, like
headings, paragraphs, and images.
● CSS (Cascading Style Sheets): Styles the webpage with colors, fonts, and layouts.
● JavaScript: Adds interactivity, such as buttons that respond to clicks or animations that
bring a page to life.

Backend Development

Backend development manages everything users don’t see but is critical to how a website
works. It handles data storage, user requests, and server responses.
Backend development is about managing the server, database, and application logic that power
the website.

● Role of the Server: Handles requests from users and sends appropriate responses.
● Role of Databases: Stores and retrieves data for the website.
● Server-Side Languages: Examples include PHP, Python, Ruby, and Node.js.

Full-Stack Development
Full-stack development combines frontend and backend skills. Full-stack developers can build a
complete web application, from designing the user interface to managing the server and
database.

1.5 Tools Used in Web Development

Text Editors and IDEs
These tools help developers write, edit, and organize code.

Examples: Visual Studio Code, Sublime Text, Atom.

Web Development Frameworks

Frameworks make web development faster and more organized.
● Frontend Frameworks: React, Angular, Vue.js, Bootstrap.
● Backend Frameworks: Express.js, Django, Ruby on Rails.

Version Control Systems

Helps track changes in code and allows developers to collaborate easily.
Examples: Git and GitHub.

Web Hosting and Domains

Web Hosting: Services like Netlify, AWS, or HostGator make websites accessible online.
Domains: Unique addresses (e.g., www.example.com) help users find websites.

1.6 Types of Websites

Websites are created for different purposes and can be categorized as follows:
Static Websites
Description: Static websites have fixed content that does not change unless manually updated
by a developer. They are created using basic web technologies like HTML and CSS.
Features: Simple, fast to load, and cost-effective to build.
Examples:
● Personal portfolios showcasing work.
● Basic informational pages for businesses or events.

Dynamic Websites
Description: Dynamic websites display content that changes based on user interaction or data
from the server. They use scripting languages like PHP, Python, or JavaScript to manage this
functionality.
Features: Interactive, user-friendly, and data-driven.
Examples:
● Social media platforms like Facebook and Twitter.
● News websites with frequently updated content.

E-commerce Websites
Description: These websites allow businesses to sell products or services online. They include
features like shopping carts, payment gateways, and product catalogs.
Features: Secure transactions, easy navigation, and customer reviews.
Examples:
● Global marketplaces: Amazon, eBay.
● Niche online stores: Websites selling local or handcrafted products.

Content Management Systems (CMS)

Description: CMS-powered websites make it easy for users to add, update, and manage content
without deep technical skills.
Features: Templates for design, user-friendly interfaces, and flexible content organization.
Examples:
● Personal blogs for writers or photographers.
● News portals or online magazines.
Web Applications
Description: These websites function like software applications, offering complex features for
user interaction.
Features: User authentication, real-time collaboration, and advanced functionalities.
Examples:
● Google Docs for document creation and collaboration.
● Online calculators or booking systems.

1.7 Single Page Vs Multi-Page Application

Single-Page Applications (SPAs)

● What are SPAs?

SPAs are websites or web applications where everything happens on one page. Instead
of reloading the whole page when you click something, only the required part of the
page updates.
● How do they work?
SPAs load most of the resources (like code and images) once when you open the
website. After that, the website only sends or receives small pieces of data, which makes
it faster and smoother.
● Advantages of SPAs:
○ Fast performance: Since only parts of the page update, users don’t have to wait
for the whole page to reload.
○ User-friendly experience: Everything feels seamless because the page doesn’t
reload.
○ Simple development: Developers don’t need to write extra code for creating
new pages on the server.
● Examples of SPAs:
○ Gmail: When you open an email or compose a message, the page doesn’t reload.
○ Google Docs: You can type and edit in real-time without leaving the page.

Multi-Page Applications (MPAs)

● What are MPAs?
MPAs are websites or web applications that have multiple pages. Whenever you click on
a link or button, the entire page reloads, even if you are just loading a small part, like an
image or icon.
 ● How do they work?
MPAs follow the traditional way of working. They are designed for large-scale websites
that need to handle a lot of content. These applications usually have several levels,
subsections, and links to other pages.

● Advantages of MPAs:
○ They are good for websites with a lot of content, like online shopping platforms
or educational portals.
○ They are more secure because the frameworks and tools used to build MPAs
have been tested for years.
● Examples of MPAs:
○ E-commerce websites like Amazon or Flipkart.
○ News websites with many articles and categories.

Activity 3: Explore Websites

Objective: Help students identify different types of websites based on their features and
purpose.

Instructions:
1. Divide students into small groups.
2. Provide the following scenarios and ask groups to classify each website as Static,
Dynamic, E-commerce, CMS, or Web Application:
a. A blog for sharing travel stories.
b. An online shop selling handmade jewelry.
c. A social media platform for sharing updates and photos.
d. A portal for reading news articles updated daily.
e. A tool for editing and sharing documents online.
3. Ask each group to present their classifications and explain their reasoning.

Activity 4: Explore Websites

Objective: Help students identify Single Page Applications (SPAs) and Multi-Page Applications
(MPAs) by researching examples.

Instructions:
● Divide students into small groups.
● Ask each group to research and list 5 websites that are SPAs and 5 that are MPAs
 ● Have each group present their list of websites and explain why they classified them as
SPAs or MPAs.

Summary:

What is the Web?

The Web (WWW) is a collection of linked information accessed via the Internet, including
websites with text, images, and videos.

History and Evolution:

● Web 1.0: Static websites (1990-2000s).

● Web 2.0: Interactive, social websites (2000-2010).
● Web 3.0: Personalized, AI-driven websites (2010 onwards).

Key Difference:
The Internet connects computers; the Web is the content accessed over it.

How It Works:
Browsers (e.g., Chrome) access websites stored on servers. URLs help browsers find specific
pages.

Web Development:

● Frontend: Design and user interaction (HTML, CSS, JavaScript).

● Backend: Servers, databases, and logic (PHP, Python, Node.js).

Types of Websites:

● SPAs: Dynamic, fast-loading (e.g., Gmail, Google Docs).

● MPAs: Multiple pages, content-heavy (e.g., Amazon, news sites).

Tools: Text editors (VS Code), frameworks (React, Django), version control (Git), hosting (AWS,
Netlify).
 2. Introduction to HTML

2.1 HTML Basics

What is HTML

At its most basic, HTML is nothing more than a collection of markup codes called tags that
specify the structure of your web page.
HTML is a standardised system for tagging text files that creates the structure for just about
every page that we find and use on the web. It’s HTML that adds in page breaks, paragraphs,
bold lettering, italics, and more. HTML works to build this structure by using tags that tell
browsers what to do with text.
For example, take the following line of content:

We are learning HTML.

If we wanted the line to stand by itself, we could specify that it is a paragraph by enclosing it in
paragraph tags:

Code:

<p>We are learning HTML.</p>

We will learn more about this tag.

HTML History
● 1989: Tim Berners-Lee invents HTML as a publishing language for the web. The idea
was to help CERN researchers organise scientific information.
● 1991: Berners-Lee gives the public the first description of HTML in a document called
“HTML Tags”.
● 1993: The first version of HTML, HTML 1.0, is released. It included 18 HTML tags.
● 1995: HTML 2.0 is published, which added new features to HTML 1.0.
● 1997: HTML 3.0 was invented, which improved features and gave webmasters more
powerful tools.
● 1999: HTML 4.0 was released and has become widely used.
 ● 2014: HTML 5.0 is released and used worldwide. It's considered an extended version of
HTML 4.01.

2.2 Introduction to HTML5

HTML5 is the most recent version of HTML. With each version comes new abilities, etc.
However, it is ever-advancing and evolving. HTML5 offers more functionality than previous
iterations of the language. For example;
● It can support audio and video using the relevant tags, <audio> & <video>.
● It is supported by all browsers including Chrome, Safari, Mozilla, and more.
● It is easier to use than older versions.
● It works better on mobile devices.

Requirements for learning HTML

What do I need to start developing with HTML?

There are absolutely no requirements to start learning HTML, but you will need some tools to
help you along the way.

Two tools are essential to becoming an efficient and professional Web Developer.

Firstly, you will need a Text Editor.

Windows users, you can get an awesome text editor from notepad-plusplus.org. As you have
probably guessed from the name of the URL, this text editor is Notepad ++ and includes some
cool syntax highlighting!

Secondly, you will need a browser to render your code. You can use any browser that supports
HTML5- Firefox, Safari, Google’s Chrome and Opera.

Creating the basic structure of an HTML Page

Step 1: Open your Notepad

a. Click the Start Menu (Windows icon) or press the Windows key on your keyboard.
b. Type "Notepad" in the search bar.
c. Click on Notepad from the search results to open it.
Step 2: Write code in HTML
Code:

<!DOCTYPE html>
<p>We are learning HTML.</p>

Step 3: Save the HTML Page

Now save the file as index.html and Save as type should be All files like shown in below image.

Step 4: View the HTML Page in Your Browser

Open the saved HTML file in your favourite browser (double-click on the file, or right-click - and
choose "Open with").

The result will look much like this:

Explanation of the code:

The <!DOCTYPE> Declaration represents the document type and helps browsers display web
pages correctly.
It must only appear once, at the top of the page (before any HTML tags).
The <!DOCTYPE> declaration is not case-sensitive.
 1. The opening tag: This consists of the name of the element (in this case, p), wrapped in
opening and closing angle brackets. This states where the element begins or starts to
take effect — in this case where the paragraph begins.
2. The closing tag: This is the same as the opening tag, except that it includes a forward
slash before the element name. This states where the element ends — in this case
where the paragraph ends. Failing to add a closing tag is one of the standard beginner
errors and can lead to strange results.
3. The content: This is the content of the element, which in this case, is just text.
4. The element: The opening tag, the closing tag, and the content together comprise the
element.

2.3 Marking up text

This section will cover some essential HTML elements you'll use for marking up the text.

Heading Tags
There are six heading tags in all, ranging from <h1>, which uses the largest type size, down to
<h6>, which uses the smallest size. Here’s some web page code that demonstrates the six
heading tags, and the figure shows how they look in a web browser.
Example:
<h1>This is Heading 1</h1>
<h2>This is Heading 2</h2>
<h3>This is Heading 3</h3>
<h4>This is Heading 4</h4>
<h5>This is Heading 5</h5>
<h6>This is Heading 6</h6>

Output:
HTML Paragraphs
HTML paragraphs are defined with the <p> tag:

Example:

<p>This is a paragraph.</p>
<p>This is another paragraph.</p>

HTML COMMENTS
● It is a simple piece of code that is ignored by web browsers i.e., not displayed by the
browser.
● It helps the coder and reader to understand the piece of code used, especially in
complex source code.
● Syntax : <!-- –>

Example:
<!-- Write your comments here -->

2.4 HTML Styles

The HTML style attribute is used to add styles to an element, such as colour, font, size, and
more.
Syntax: <tagname style="property:value;">

Background Color
The CSS background-colour property defines the background colour for an HTML element.
Example:

<body>

<h1 style="background-color:powderblue;">This is a heading</h1>

<p style="background-color:tomato;">This is a paragraph.</p>
</body>
Output:

Text Color
The CSS color property defines the text color for an HTML element:

Example:
<h1 style="color:blue;">This is a heading</h1>
<p style="color:red;">This is a paragraph.</p>

Output:

Fonts
The CSS font-family property defines the font to be used for an HTML element:

Example:
<h1 style="font-family:verdana;">This is a heading</h1>
<p style="font-family:courier;">This is a paragraph.</p>

Output:
Text Size
The CSS font-size property defines the text size for an HTML element:

Example:
<h1 style="font-size:300%;">This is a heading</h1>
<p style="font-size:160%;">This is a paragraph.</p>

Output:

HTML Formatting Elements

Formatting elements were designed to display special types of text:

<b> - Bold text

<strong> - Important text
<i> - Italic text
<em> - Emphasized text
<mark> - Marked text
<small> - Smaller text
<del> - Deleted text
<ins> - Inserted text
<sub> - Subscript text
<sup> - Superscript text

Exercise
1. Create a basic HTML page with a title, a heading, and a paragraph.
2. Change the background color of the page.
3. Style the heading with a different color and font size.
4. Style the paragraph with padding and a different text color.
5. Use a style block (within <style> tags) to write your styles.
2.5 HTML Tables

HTML tables allow web developers to arrange data into rows and columns.

Example:

Here’s a sample table with student data:

Student Name Class Student ID

Aanya Sharma Grade 11 2024A001

Rohan Mehta Grade 12 2024R002

Priya Kapoor Grade 11 2024P003

Arjun Singh Grade 12 2024A004

Nisha Verma Grade 10 2024N005

Karan Malhotra Grade 10 2024K006

Define an HTML Table

Example:
<table>
<tr>
<th>Name</th>
<th>Class</th>
<th>ID</th>
</tr>
<tr>
<td>Aanya Sharma</td>
<td>Grade 11</td>
<td>2024A001</td>
</tr>
</table>

Table Cells
Each table cell is defined by a <td> and a </td> tag.
Example:
<table>
<tr>
<td>Aanya Sharma</td>
<td>Grade 11</td>
<td>2024A001</td>
</tr>
</table>

Table Rows
Each table row starts with a <tr> and ends with a </tr> tag.
Example:
<table>
<!-- Header Row -->
<tr>
<th>Name</th>
<th>Class</th>
<th>ID</th>
</tr>

<!-- Data Row 1 -->

<tr>
<td>Aanya Sharma</td>
<td>Grade 11</td>
<td>2024A001</td>
</tr>
</table>

HTML Table Tags

Here’s a simple table representation of the tags and their descriptions:

Tag Description

<table> Defines a table.

<th> Defines a header cell in a table.

<tr> Defines a row in a table.

 <td> Defines a cell in a table.

<captio Defines a table caption.

n>

<colgro Specifies a group of one or more columns in a table for formatting.

up>

<col> Specifies column properties for each column within a <colgroup>

element.

<thead> Groups the header content in a table.

<tbody> Groups the body content in a table.

<tfoot> Groups the footer content in a table.

Exercise

1. Create a basic HTML page with a table.

2. The table should have two columns: one for "Name" and the other for "Age".
3. The table should have 5 rows with sample data for the names and ages of 5 people.
4. Add a simple heading above the table with the text "People Information".

2.6 Lists of HTML

HTML lists allow web developers to group a set of related items in lists.There are three main
types of list namely <ul> unordered list , <ol> ordered list ,<dl> description list.
Example:

Unordered HTML List

An unordered list starts with the <ul> tag. Each list item starts with the <li> tag.
The list items will be marked with bullets (small black circles) by default:
Example:
<head>
<title>Unordered List Example</title>
</head>
<body>
<h1>My Favorite Fruits</h1>
<ul>
<li>Apple</li>
<li>Banana</li>
<li>Cherry</li>
<li>Grapes</li>
</ul>
</body>

OUTPUT:

The HTML <ul> tag defines an unordered (bulleted) list.The list items will be marked with bullets
(small black circles) by default.

Unordered HTML List - Choose List Item Marker

The CSS list-style-type property is used to define the style of the list item marker. It can have
one of the following values:

Value Description

disc Sets the list item marker to a bullet (default).

circle Sets the list item marker to a circle.

square Sets the list item marker to a square.

none The list items will not be marked.

Example Circle:

<ul style="list-style-type:circle;">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>

Output:

Ordered HTML List

Like bulleted lists, numbered lists use two types of tags.The entire list is surrounded by the
<ol> and </ol> tags. The “ol” here is short for ordered list.
Example:

<head>
<title>Ordered List Example</title>
</head>
<body>
<h1>Steps to Make a Cup of Tea</h1>
<ol>
<li>Boil water</li>
<li>Add tea leaves or a tea bag</li>
<li>Let it brew for a few minutes</li>
<li>Pour into a cup</li>
<li>Add sugar or milk as desired</li>
</ol>
</body>

Output:
The HTML <ol> tag defines an ordered list. An ordered list can be numerical or alphabetical.The
list items will be marked with numbers by default.

Ordered HTML List - The Type Attribute

The type attribute of the <ol> tag, defines the type of the list item marker:

Type Description

type="1" The list items will be numbered with numbers (default).

type="A" The list items will be numbered with uppercase letters.

type="a" The list items will be numbered with lowercase letters.

type="I" The list items will be numbered with uppercase Roman

numbers.

type="i" The list items will be numbered with lowercase Roman

numbers.

Numbers:
Example:

<ol type="1">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
<ol start="50">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
 </ol>

Output:

Control List Counting

By default, an ordered list will start counting from 1. If you want to start counting from a
specified number, you can use the start attribute.
Example:

<ol start="50">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>

<ol type="1" start “50”>

<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>

Output:
HTML Description Lists
A description list is a list of terms, with a description of each term.
The <dl> tag defines the description list, the <dt> tag defines the term (name), and the <dd>
tag describes each term:
Example:

<head>
<title>Description List Example</title>
</head>
<body>
<h1>Drinks</h1>
<dl>
<dt>Coffee</dt>
<dd>- Black hot drink</dd>

<dt>Milk</dt>
<dd>- White cold drink</dd>

<dt>Tea</dt>
<dd>- Brown hot drink</dd>
</dl>
</body>

Output:

Tag Description

<ul> Defines an unordered list.

<ol> Defines an ordered list.

<li> Defines a list item.

 <dl> Defines a description list.

<dt> Defines a term in a description list.

<dd> Describes the term in a description list.

Exercise
To test your knowledge about HTML lists I have a challenge for you. Can you create the list
given below.

2.7 STRUCTURAL TAGS

Div Tag
The <div> defines a division or a section in an HTML document.
The <div> element is often used as a container for other HTML elements.
By default, browsers always place a line break before and after the <div> element. However,
this can be changed with CSS.
Example:

<head>
<title>Div Styling Example</title>
</head>
<body>
 <div style="background-color: blue;">
<p>Welcome to our online learning platform!</p>
</div>

<div style="background-color: green;">

<p>In this class, we will explore HTML and CSS.</p>
</div>

<div style="background-color: orange;">

<p>By the end of this class, you'll be able to create your own web pages.</p>
</div>
</body>
OUTPUT:

Span Tag
The <span> tag is an inline container used to mark up a part of a text, or a part of a document.
Whenever you use this tag, your text remains in the same line instead of going to the second
line. The formatting that remains between this tag just applies to it.

Semantic HTML

Semantic HTML is the use of HTML markup to reinforce the meaning of the information in
web pages and web applications rather than merely to define its presentation or look.This helps
the webpage be more accessible to people and search engines also use this information to look
for appropriate results. The tags shown going forward were introduced in the HTML5 standard
and fall in the semantic category.

Section Tag
The HTML <section> tag is used to define sections in a document. When you put your content
on a web page, it may contains many chapters, headers, footers, or other sections on a web
page
Example:

<head>
<title>Section Example</title>
</head>
<body>

<section>
<h2>Global Warming</h2>
<p>Global warming refers to the long-term rise in Earth's average temperature due to
human activities such as burning fossil fuels, deforestation, and industrial processes. This
phenomenon is a significant contributor to climate change and has led to severe
environmental consequences.</p>
</section>
</body>

Output:

Article Tag

<article> is an independent piece of content. Separate from the main content.

<article> element is content that makes sense on its own.
The key point here is that the content has to make sense independent of its context.
Potential sources for the <article>element:-
● Forum post
● Blog post
● News story
● Comment

Example:
 <head>
<title>Article Example</title>
</head>
<body>

<article>
<h2>Google Chrome</h2>
<p>Google Chrome is a web browser developed by Google. It is known for its speed,
simplicity, and security, and has become the most popular browser globally since its release in
2008.</p>
</article>

</body>

OUTPUT :

Nav Tag
The <nav> tag defines a set of navigation links.
In most cases the navigation is shown below the header. But it can also be used in the sidebar.
Navigation is also displayed on all the pages of your website, just like the header. So that the
user can access important parts like home page, services etc. from any place in the website.
Example:

<nav>
<a href="https://www.homepage.com">HOME PAGE</a>
<a href="https://www.academic.com">ACADEMIC</a>
<a href="https://www.admission.com">ADMISSION</a>
<a href="https://www.contactus.com">CONTACT</a>
</nav>

Output:
Header
The <header> element represents a container for introductory content or a set of navigational
links.
A <header> element typically contains:
● One or more heading element (<h1> to <h6>)
● Logo or icon
● Authorship information

Example:

<header>
<h1>CODING</h1>
<p>Creating web page using HTML and CSS.</p>
<p>HTML stands for Hyper Text Markup Language and CSS stands for Cascading Style
Sheets.</p>
</header>

Output:

Footer Tag

The <footer> tag defines a footer for a document or section.

A <footer> element typically contains:
● Authorship information
● Copyright information
● Contact information
● Sitemap
 ● Back to top links

Example:

<footer>
<p>Created by ABC Tech<br>
<a href="mailto:[email protected]">[email protected]</a></p>
</footer>

Output:

2.8 HTML Form

An HTML form is used to gather input from users on a web page. It allows users to enter data,
such as their name, email, and password, and then submit this data to the server for processing.
Forms are the backbone of many web applications like sign-up pages, search forms, and contact
forms.

Basic Structure of a Form:

Here’s a simple example of a form that collects a user's name and email:

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

<h2>Sign Up Form</h2>

<!-- Form Starts here -->

<form action="/submit" method="POST">
 <!-- Name Field -->
<label for="name">Name:</label>
<input type="text" id="name" name="name" required>
<br><br>

<!-- Email Field -->

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

<!-- Submit Button -->

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

</form>
<!-- Form Ends here -->

</body>
</html>

Output:

Explanation of the Example:

1. <form> Tag:
● The <form> tag wraps all the elements in the form.
● It has two important attributes:
○ action: Specifies where to send the form data when the form is submitted. In this
case, the data will be sent to /submit.
○ method: Specifies how the data will be sent. Common methods are:
○ GET: Appends form data to the URL (not suitable for sensitive data).
○ POST: Sends form data in the body of the HTTP request (suitable for sensitive
data).
2. <label> Tag:
● The <label> tag defines a description for the form controls. It makes the form more
accessible.
● The for attribute in the <label> tag is used to link the label to a specific input element by
matching the id of the input. This way, when a user clicks the label, the associated input
field is focused.
3. <input> Tag:
● The <input> tag is used to create various types of form fields.
○ type="text": Creates a single-line text field where the user can input text.
○ type="email": Creates an input field specifically for email addresses. It will
automatically check if the entered text is in the correct email format (e.g.,
[email protected]).
○ required: This attribute ensures that the user cannot submit the form without
filling out this field.
4. <input type="submit"> Tag:
● The <input type="submit"> tag creates a button that submits the form. When clicked, it
sends the form data to the server.
○ value="Submit": The value attribute defines the text displayed on the submit
button.
5. <br> Tag:
● The <br> tag is used to insert a line break. It is commonly used to format the layout of
the form by separating the form fields.

Adding More Fields to the Form

Let’s add more fields such as a radio button for gender, a checkbox for terms and conditions,
and a text area for comments.

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

<h2>Extended Form</h2>
 <!-- Form Starts here -->
<form action="/submit" method="POST">

<!-- Name Field -->

<label for="name">Name:</label>
<input type="text" id="name" name="name" required>
<br><br>

<!-- Email Field -->

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

<!-- Gender Field -->

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

<!-- Terms and Conditions -->

<label>
<input type="checkbox" name="terms" required>
I agree to the Terms and Conditions
</label>
<br><br>

<!-- Comments Section -->

<label for="comments">Comments:</label>
<textarea id="comments" name="comments" rows="4" cols="50"></textarea>
<br><br>

<!-- Submit Button -->

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

</form>
<!-- Form Ends here -->

</body>
</html>
Output:

Explanation of Additional Fields:

1. Radio Buttons:
● Radio buttons allow users to select only one option from a set of options. In this
example, the user can select either "Male" or "Female".
○ name="gender": The name attribute groups these radio buttons together,
meaning only one can be selected at a time.
○ value="Male" and value="Female": These specify the values that will be
submitted when the radio buttons are selected.
2. Checkbox:
● The checkbox allows users to agree to terms and conditions. It’s a boolean input
(checked or unchecked).
○ required: Ensures the user checks the box before submitting the form.
3. Textarea:
● The <textarea> element is used for multi-line input, such as longer comments or
messages.
○ rows="4" and cols="50": These attributes specify the size of the text area (the
number of rows and columns).

Form Submission:
When the user fills out the form and clicks Submit, the data is sent to the server (as specified in
the action attribute of the <form> tag) using the method defined (usually POST for sensitive
data). In this case, the server would handle the form submission by receiving the values of the
name, email, gender, comments, and whether the terms are accepted.

Example of How Data is Sent:

If the user enters:

● Name: Abc Def

● Email: [email protected]
● Gender: Female
● Comments: "Great website!"
● Checked the terms and conditions checkbox

Exercise

1. Create a basic HTML form that includes the following fields:

○ Name (text input)
○ Email (email input)
○ Message (textarea)
○ Submit Button
2. Style:
○ Style the form with padding and margins.
○ Style the input fields and textarea to make them look clean and organized.
○ Style the submit button to make it stand out.
○ Add a background color for the form and give some border-radius to the
elements for a modern look.
 3. Introduction to CSS

3.1 Introduction of CSS

What is CSS?
CSS, or Cascading Style Sheets, is a stylesheet language used to control the presentation and
layout of web pages. It works alongside HTML to define how elements should appear on the
screen, such as their colours, sizes, positions, and overall style.

Key Features of CSS:

1. Styling: CSS defines how HTML elements should look.
● Example: Setting font size, colour, and background.
2. Separation of Content and Design: Using CSS, you can keep your HTML code focused on
content while styling is handled separately.
3. Reusability: One CSS file can style multiple web pages, improving consistency and
reducing redundancy.
4. Flexibility: CSS allows responsive designs that adapt to different devices and screen
sizes.

3.2 CSS syntax

The CSS syntax is simple and consists of selectors, properties, and values. Here's a detailed
breakdown:

selector {
property: value;
}

● Selector: Specifies the HTML element(s) to style.

● Property: The style attribute to change (e.g., colour, font size, margin).
● Value: The setting for the property (e.g., red, 16px, 10px).
Example:
p{
color: blue;
font-size: 16px;
}
 ● This styles all <p> elements with blue text and a font size of 16px.

Components of CSS Syntax

● Selector: Defines which HTML elements the style applies to.
○ Example selectors: h1, .class-name, #id-name.
● Declaration Block: Contains one or more declarations inside curly braces {}.
○ Declarations are written as property: value;.
● Declaration: A single property-value pair ending with a semicolon ;.

Selectors
Target specific elements in the HTML:
1. Type Selector: Targets all elements of a given type.
Example:
h1 { color: red; }
2. Class Selector: Targets elements with a specific class, prefixed with ..
Example:
.example { font-size: 20px; }
3. ID Selector: Targets an element with a specific ID, prefixed with #
Example:
#unique { text-align: center; }
4. Group Selector: Targets multiple elements, separated by a comma.
Example:
h1, p { margin: 10px; }

3.3 Types of CSS

CSS can be applied in three different ways: Inline CSS, Internal CSS, and External CSS. Each type
has its specific use cases, advantages, and limitations. Let’s explore them in detail with
examples.

Inline CSS
Inline CSS applies styles directly to a specific HTML element using the style attribute within the
opening tag.
Advantages
● Quick and easy to apply for small, specific changes.
● No need for additional files or <style> tags.
Disadvantages
● Not reusable across multiple elements or pages.
● Makes the HTML code cluttered and harder to maintain.
Example:
<!DOCTYPE html>
<html>
<head>
<title>Inline CSS Example</title>
</head>
<body>
<h1 style="color: blue; font-size: 24px;">This is a heading styled with Inline CSS</h1>
<p style="background-color: yellow; padding: 10px;">This paragraph has a yellow
background and padding.</p>
</body>
</html>

Output:

Internal CSS
Internal CSS is used when styles are defined within a <style> tag inside the <head> section of
the HTML document. These styles apply only to the page where they are defined.

Advantages
● Centralized styling for the page.
● No need for external files, making it easier to manage single-page projects.
Disadvantages
● Styles cannot be reused across multiple pages.
● Increases the size of the HTML document, potentially slowing page load time.
Example:
<!DOCTYPE html>
<html>
<head>
<title>Internal CSS Example</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: lightgray;
}
h1 {
color: green;
text-align: center;
}
p{
color: black;
font-size: 18px;
}
</style>
</head>
<body>
<h1>This is a heading styled with Internal CSS</h1>
<p>This paragraph is styled using Internal CSS.</p>
</body>
</html>

Output:

External CSS
External CSS is defined in a separate file with a .css extension. The file is linked to the HTML
document using the <link> tag in the <head> section.
Advantages
● Reusable across multiple HTML pages, ensuring consistent design.
● Keeps HTML code clean and focused on structure.
● Easy to update styles for an entire website by modifying a single file.
Disadvantages
● Requires additional HTTP requests to load the CSS file, potentially increasing load time
(can be minimized with caching).
● External files must be correctly linked; otherwise, styles won't be applied.
Example
External styles are defined within the <link> element, inside the <head> section of an HTML
page:
<!DOCTYPE html>
<html>
<head>
<title>External CSS Example</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>This is a heading styled with External CSS</h1>
<p>This paragraph is styled using External CSS.</p>
</body>
</html>

● An external style sheet can be written in any text editor and must be saved with a .css
extension.
● The external .css file should not contain any HTML tags.
● Here is how the "style.css" file looks:

"style.css"

body {
font-family: Verdana, sans-serif;
background-color: #f0f0f0;
}
 h1 {
color: darkblue;
text-align: center;
}
p{
color: gray;
font-size: 16px;
}

Output:

When to Use Each Type?

1. Inline CSS: For quick fixes or unique styles applied to a single element (e.g., testing or temporary
changes).
2. Internal CSS: For single-page projects where styles are specific to that page.
3. External CSS: For larger projects where styles need to be reused across multiple pages.

3.4 CSS Comments

CSS comments are used to explain your code or leave notes for yourself or others. Comments
are ignored by browsers and do not affect the rendered output of the page. They are helpful for
documentation, debugging, or temporarily disabling sections of CSS.

Syntax
CSS comments begin with /* and end with */. Anything between these markers is considered a
comment.

Single-Line Comment
Example:

.CSS
body {
background-color: lightblue; /* Set the background color of the page */
 }

Multi-Line Comment

.CSS
/*
This section styles the header of the webpage.
It sets the font size, color, and text alignment.
*/
h1 {
font-size: 24px;
color: navy;
text-align: center;
}

Best Practices
● Use comments to clarify complex or important code.
● Avoid overusing comments for obvious styles to keep your CSS clean.
● Use multi-line comments for detailed explanations and single-line comments for short
notes.
Comments are a vital part of writing maintainable and collaborative CSS code. They improve
readability and make it easier to update or debug styles in the future.

3.5 CSS Colors

CSS allows you to specify colors for text, backgrounds, borders, and other elements in a variety
of formats. Colors enhance the visual appeal and readability of a webpage.

Ways to Define Colors in CSS

1. Color Names

● CSS supports 140 predefined color names.

color: red;
background-color: lightblue;

2. Hexadecimal Colors
● Represented as #RRGGBB, where RR, GG, and BB are hexadecimal values for red, green,
and blue.

color: #ff0000; /* Red */

color: #00ff00; /* Green */
color: #0000ff; /* Blue */

3. RGB Colors
● Use rgb() to define red, green, and blue values between 0 and 255.

color: rgb(255, 0, 0); /* Red */

color: rgb(0, 255, 0); /* Green */

Text Colour
● You can set the colour of the text.
p{
color: blue; /* Sets text color */
}

Background Color
● You can change the background colour according to you.
body {
background-color: #f0f0f0; /* Light gray background */
}

Border Color
● You can set the colour of the border colour.
div {
border: 2px solid rgb(255, 165, 0); /* Orange border */
 }

Opacity
● To apply transparency to an entire element, use the opacity property (value between 0 and 1).

div {
background-color: blue;
opacity: 0.5; /* 50% transparent */
}

3.6 CSS Aline

CSS alignment properties are used to position text, elements, or blocks within a container
horizontally or vertically. Proper alignment enhances the readability and layout of a webpage.

Types of CSS Alignment

1. Text Alignment
The text-align property aligns text horizontally within its container.

Values:
● left: Aligns text to the left.
● right: Aligns text to the right.
● center: Centers the text.
● justify: Aligns text to both left and right, adding space between words.
Example:
<!DOCTYPE html>
<html>
<head>
<style>
.left {
text-align: left;
}
.center {
text-align: center;
 }
.right {
text-align: right;
}
.justify {
text-align: justify;
}
</style>
</head>
<body>
<p class="left">This text is left-aligned.</p>
<p class="center">This text is center-aligned.</p>
<p class="right">This text is right-aligned.</p>
<p class="justify">This text is justified. It stretches the text so that it aligns with both left
and right margins.</p>
</body>
</html>

Output:

2. Horizontal Alignment
The margin property can align elements horizontally when combined with auto.
Example:
<!DOCTYPE html>
<html>
<head>
<style>
.box {
width: 200px;
height: 100px;
background-color: lightblue;
 margin: 0 auto; /* Horizontally centers the block */
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>

Output:

3. Vertical Alignment
The vertical-align property aligns inline or table-cell elements vertically.
Values:
● top: Aligns to the top.
● middle: Aligns to the middle.
● bottom: Aligns to the bottom.
Example:
<!DOCTYPE html>
<html>
<head>
<style>
.container {
height: 100px;
display: table;
}
.text {
display: table-cell;
vertical-align: middle;
background-color: lightgray;
}
</style>
 </head>
<body>
<div class="container">
<div class="text">Vertically Centered Text</div>
</div>
</body>
</html>

Output:

4. Flexbox Alignment
Using the CSS display: flex; property provides powerful alignment options.
Example:
<!DOCTYPE html>
<html>
<head>
<style>
.container {
display: flex;
justify-content: center; /* Horizontal alignment */
align-items: center; /* Vertical alignment */
height: 100vh;
background-color: lightgreen;
}
.box {
width: 100px;
height: 100px;
background-color: coral;
}
</style>
</head>
 <body>
<div class="container">
<div class="box"></div>
</div>
</body>
</html>

Output:

3.7 CSS Links

CSS allows you to style links on a webpage to make them visually appealing and user-friendly.
Links are represented by the <a> tag in HTML and can be styled using pseudo-classes like :link,
:visited, :hover, :active, and :focus.

CSS Link Pseudo-Classes

● :link - Styles links that have not yet been visited.
● :visited - Styles links that the user has already visited.
● :hover - Styles links when the user hovers over them.
● :active - Styles links when they are being clicked.
● :focus - Styles links when they are focused (e.g., via keyboard navigation).

Example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Links Example</title>
<style>
/* Style for unvisited links */
a:link {
color: blue; /* Blue for unvisited links */
text-decoration: none; /* Removes underline */
font-weight: bold;
}

/* Style for visited links */

a:visited {
color: purple; /* Purple for visited links */
}

/* Style for links on hover */

a:hover {
color: orange; /* Orange when hovered */
text-decoration: underline; /* Adds underline on hover */
}

/* Style for active links */

a:active {
color: red; /* Red when clicked */
}

/* Style for focused links */

a:focus {
outline: 2px solid teal; /* Adds a teal outline for focus */
}
</style>
</head>
<body>
 <h1>CSS Link Styling Example</h1>
<p>
<a href="https://www.example.com">Visit Example.com</a>
</p>
<p>
<a href="https://www.google.com">Visit Google</a>
</p>
</body>
</html>
Output:
Expected Behavior:
1. The links initially appear in blue and bold (unvisited state).
2. After clicking a link, it changes to purple (visited state).
3. When the mouse pointer hovers over a link, it turns orange and gets underlined.
4. Clicking on a link changes its colour to red (active state).
5. Focusing on a link using the keyboard highlights it with a teal outline.

CSS Link Styling Example

Visit Example.com

Visit Google

Explanation

● Unvisited Link (:link): Links that the user hasn't clicked yet are styled in blue and appear
bold without underlines.
● Visited Link (:visited): Links that the user has clicked are styled in purple.
● Hovered Link (:hover): When the mouse pointer hovers over a link, it turns orange and
gets an underline.
● Active Link (:active): While clicking on a link, it temporarily turns red.
● Focused Link (:focus): When the link is focused (e.g., using the Tab key), it shows a teal
outline
3.8 CSS for Images

CSS provides numerous properties to style images, enhancing their appearance, positioning,
and behaviour on a webpage. With CSS, you can control the size, alignment, borders, effects,
and more for images.

Key CSS Properties for Images

1. width and height
● Used to set the size of the image.
Example:
img {
width: 300px;
height: 200px;}
2. border
● Adds a border around the image.
Example:
img {
border: 5px solid black;
}
3. border-radius
● Rounds the corners of the image.
Example:
img {
border-radius: 50%; /* Makes the image circular if it's a square */
}
4. box-shadow
● Adds a shadow around the image.
Example:
img {
box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.5);
}
5. float
● Floats the image to the left or right, allowing text to wrap around it.
Example:
 img {
float: right;
margin: 10px;
}
6. object-fit
● Specifies how the image should fit within its container.
Example:
img {
width: 300px;
height: 200px;
object-fit: cover; /* Ensures the image covers the container without distortion */
}
7. filter
● Adds effects like grayscale, blur, brightness, etc.
Example:
img {
filter: grayscale(100%); /* Makes the image black and white */
}

Example: Styling Images with CSS

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Images Example</title>
<style>
/* Basic Styling */
.image1 {
width: 300px;
height: auto;
border: 5px solid #333;
border-radius: 15px;
box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.5);
}
 /* Circular Image */
.image2 {
width: 150px;
height: 150px;
border-radius: 50%;
border: 3px solid #ff5722;
}

/* Hover Effect */
.image3 {
width: 300px;
height: auto;
transition: transform 0.3s, filter 0.3s;
}

.image3:hover {
transform: scale(1.1);
filter: brightness(1.2);
}
</style>
</head>
<body>
<h1>CSS Images Example</h1>
<p>Styled images using CSS:</p>
<div>
<h3>Basic Styled Image</h3>
<img src="https://via.placeholder.com/300x200" alt="Sample Image" class="image1">
</div>
<div>
<h3>Circular Image</h3>
<img src="https://via.placeholder.com/150" alt="Sample Image" class="image2">
</div>

</body>
</html>
Explanation
1. Basic Styling (.image1):
● The image is resized to a width of 300px with a proportional height.
● It has a solid border, rounded corners, and a shadow for a 3D effect.
2. Circular Image (.image2):
● The image is made circular using border-radius: 50%.
● It has a colored border for emphasis.
Output: