UNIT 1

WEB 2.0, HTML 5 AND CSS

Web 2.0–RIA–Internet technologies Overview – HTML: Structure-Elements –attributes - List -
forms – frames – tables – HTML 5 Features- CSS –Selectors – Types, CSS 3.

Web 2.0
Web 2.0 refers to the second generation of the internet that focuses on user interaction, collaboration,
and dynamic content instead of static web pages. It allows users to create, share, and modify content,
making the web more interactive and community-driven.
Why Web 2.0?
Web 1.0 was mostly a read-only web where users could only consume information. Web 2.0 emerged to
make the web more engaging, user-driven, and interactive. It introduced social media, wikis, blogs,
and cloud-based applications, enabling collaboration and content sharing.
Advantages of Web 2.0:
• User Interaction & Collaboration: Users can contribute content, comment, and edit
information.
• Dynamic Content: Websites update content in real time without requiring manual refreshing.
• Cloud-Based Services: Web apps like Google Docs enable access from any device with an
internet connection.
• Better Accessibility: Supports multimedia content, making the web more engaging.
Disadvantages of Web 2.0:

Security Risks: User-generated content increases the risk of cyber threats like phishing and data
breaches.
Privacy Issues: Data collection by web apps can lead to misuse of personal information.
Overload of Information: Too much content can lead to misinformation and fake news.
Dependency on the Internet: Most Web 2.0 services require constant internet connectivity.
Examples of Web 2.0 Applications:
• Social Media: Facebook, Twitter, Instagram, LinkedIn
• Video Sharing: YouTube, TikTok, Vimeo
• Wikis & Collaborative Platforms: Wikipedia, Google Docs, Trello
• E-Commerce: Amazon, eBay
Rich Internet Applications (RIA)
Rich Internet Applications (RIA) are web applications that provide an interactive, desktop-like
experience using advanced client-side technologies. They offer smooth animations, multimedia
support, and offline capabilities, enhancing the user experience.
Why RIA?
Traditional web applications required frequent page reloads, making interactions slow. RIAs solve this
by using asynchronous data loading (AJAX), allowing content to update dynamically without
refreshing the page.
Advantages of RIA:
• Faster Performance: Data loads dynamically, reducing page reloads.
• Better User Experience: Advanced graphics and multimedia make interactions smooth.
• Offline Functionality: Some RIAs work even when there’s no internet connection.
• Cross-Platform Compatibility: Can run on various devices and browsers.
Disadvantages of RIA:

Complex Development: Requires advanced technologies like JavaScript frameworks.

Security Concerns: More vulnerable to cyber threats due to client-side execution.
High Resource Usage: Consumes more memory and processing power.
Browser Compatibility Issues: Some RIAs may not work well on all browsers.
Examples of RIAs:
• Google Maps – Provides smooth zooming and navigation.
• YouTube – Allows video streaming while interacting with the interface.
• Google Docs – Supports real-time document editing without reloading the page.
• Spotify Web Player – Enables music streaming with an interactive UI.
Internet Technologies
Internet technologies refer to the underlying protocols, tools, and systems that allow web applications
and online services to function efficiently and securely.
Why Internet Technologies?
Internet technologies provide the foundation for communication, data exchange, security, and web
application performance. They ensure seamless interaction between users and web services.
Advantages of Internet Technologies:
• Improved Communication: Enables real-time messaging, video calls, and cloud collaboration.
• Scalability: Supports high traffic through cloud computing and load balancing
• Security Enhancements: SSL/TLS encryption and authentication protocols protect user data.
• Efficient Data Storage & Retrieval: Databases and cloud storage optimize information
management.
Disadvantages of Internet Technologies:

Cybersecurity Threats: Hackers can exploit vulnerabilities in networks and web applications.
High Maintenance Costs: Web infrastructure requires regular updates and monitoring.
Internet Dependency: Most web services cannot function without an active internet connection.
Data Privacy Concerns: Large-scale data collection raises privacy and ethical issues.
Examples of Internet Technologies:
• Communication Protocols: HTTP, HTTPS, WebSockets, REST APIs
• Cloud Computing Platforms: AWS, Google Cloud, Microsoft Azure
• Security Mechanisms: Firewalls, SSL/TLS, OAuth authentication
• Databases: MySQL, PostgreSQL, MongoDB, Firebase

HTML
HTML Structure
HTML (HyperText Markup Language) files are, basically, just simple text files that you could create in
any text editor. But to be displayed correctly on the World Wide Web, an HTML document must be
structured correctly. Any variation from this structure will cause many web browsers to show the content
incorrectly or not at all. Also, all HTML documents must have a suffix of “html” for the HTML code to
be viewed correctly by a web browser.

The rule-making body of the Web, the people who determine what this stucture is, is the World Wide
Web Consortium (W3C). Web browsers are supposed to follow these standards as close as possible. For
the most part they all do well, but some browsers fall quite short of this goal (Internet Explorer being
the worst culprit). Nonetheless, it is best when you are creating a web page to follow the current web
standards. This will ensure your site is viewable in as many browsers as possible. All HTML instruction
on this ETS site follows the W3C standards.

Example

<!DOCTYPE HTML>
<html>
<head>
<meta charset=utf-8">
<title>A Simple HTML Example</title>
<style> p {text-align:center;} </style>
</head>
<body>
<h1>This is a header</h1>
<p>This is a paragraph, centered on the page.</p>
<p>And this is the second paragraph with <strong>bold text</strong>.</p>
</body>
</html>
Web Technologies Unit-I

Unit-I
HTML COMMON TAGS
What is an HTML File?

 HTML stands for Hyper Text Markup Language

 An HTML file is a text file containing small markup tags
 The markup tags tell the Web browser how to display the page
 An HTML file must have an htm or html file extension
 An HTML file can be created using a simple text editor

Type in the following text in “NOTEPAD”:

<html>
<head>
<title>Title of page</title>
</head>
<body>
Hello World! This is my first homepage. <b>This text is bold</b>
</body>
</html>

Save the file as "mypage.html".

Start your Internet browser. Select "Open" (or "Open Page") in the File menu of your
browser. A dialog box will appear. Select "Browse" (or "Choose File") and locate the HTML file
you just created - "mypage.html" - select it and click "Open". Now you should see an address in
the dialog box, for example "C:\MyDocuments\webdesign\mypage.html". Click OK, and the
browser will display the page.

Example Explained

The first tag in your HTML document is <html>. This tag tells your browser that this is
the start of an HTML document. The last tag in your document is </html>. This tag tells your
browser that this is the end of the HTML document.

The text between the <head> tag and the </head> tag is header information. Header
information is not displayed in the browser window. The text between the <title> tags is the title
of your document. The title is displayed in your browser's caption. The text between the <body>
tags is the text that will be displayed in your browser. The text between the <b> and </b> tags
will be displayed in a bold font.

CSE -1-
Web Technologies Unit-I

HTML ELEMENTS
HTML documents are text files made up of HTML elements. HTML elements are
defined using HTML tags.

HTML Tags

 HTML tags are used to mark-up HTML elements

 HTML tags are surrounded by the two characters < and >
 The surrounding characters are called angle brackets
 HTML tags normally come in pairs like <b> and </b>
 The first tag in a pair is the start tag, the second tag is the end tag
 The text between the start and end tags is the element content
 HTML tags are not case sensitive, <b> means the same as <B>

<b>This text is bold</b>

The purpose of the <b> tag is to define an HTML element that should be displayed as bold.

Tag Attributes
Tags can have attributes. Attributes can provide additional information about the HTML
elements on your page.

This tag defines the body element of your HTML page: <body>. With an added bgcolor
attribute, you can tell the browser that the background color of your page should be red, like this:

<body bgcolor="red">

This tag defines an HTML table: <table>. With an added border attribute, you can tell the
browser that the table should have no borders: <table border="0">. Attributes always come in
name/value pairs like this: name="value". Attributes are always added to the start tag of an
HTML element.

1. HEADINGS

Headings are defined with the <h1> to <h6> tags. <h1> defines the largest heading. <h6>
defines the smallest heading.

<h1>This is a heading</h1>
<h2>This is a heading</h2>
<h3>This is a heading</h3>
<h4>This is a heading</h4>
<h5>This is a heading</h5>
<h6>This is a heading</h6>

CSE -2-
Web Technologies Unit-I
HTML automatically adds an extra blank line before and after a heading.

2. PARAGRAPHS

Paragraphs are defined with the <p> tag.

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

HTML automatically adds an extra blank line before and after a paragraph.

3. LINE BREAKS

The <br> tag is used when you want to end a line, but don't want to start a new paragraph. The
<br> tag forces a line break wherever you place it.

<p>This <br> is a para<br>graph with line breaks</p>

The <br> tag is an empty tag. It has no closing tag.

4. Comments in HTML

The comment tag is used to insert a comment in the HTML source code. A comment will be
ignored by the browser. You can use comments to explain your code, which can help you when
you edit the source code at a later date.

<!-- This is a comment -->

Note that you need an exclamation point after the opening bracket, but not before the closing
bracket.

HTML TEXT FORMATTING

HTML defines a lot of elements for formatting output, like bold or italic text. How to View
HTML Source? To find out, click the VIEW option in your browser's toolbar and select
SOURCE or PAGE SOURCE. This will open a window that shows you the HTML code of the
page.
1. Text Formatting Tags
Tag Description
<i> Defines italic text. Recommend using <em>
<b> Defines bold text. Recommend using <strong>
<em> Defines emphasized text. Renders as italic text.
<strong> Defines strong text. Renders as bold text.

CSE -3-
Web Technologies Unit-I

Example
Source Output
<i>Italic text</i><br /> Italic text
<b>Bold text</b><br /> Bold text
<em>Emphasized text</em><br> Emphasized text
<strong>Strong text</strong><br> Strong text

What is the difference between <i> & <em> and <b> & <strong>, <b> and <i> will both
become deprecated tags. Using <strong> and <em> are the tags that will be cross-browser
compatible as browsers move forward to embrace the new standards in HTML (e.g., XHTML)

2. HTML Links
HTML uses a hyperlink to link to another document on the Web. HTML uses the <a>
(anchor) tag to create a link to another document. An anchor can point to any resource on the
Web: an HTML page, an image, a sound file, a movie, etc.

The syntax of creating an anchor:

<a href="url">Text to be displayed</a>

The <a> tag is used to create an anchor to link from, the href attribute is used to address the
document to link to, and the words between the open and close of the anchor tag will be
displayed as a hyperlink.

This anchor defines a link to W3Schools:

<a href="http://www.google.co.in/">Google</a>

The line above will look like this in a browser:

Google

The Target Attribute

With the target attribute, you can define where the linked document will be opened.
The line below will open the document in a new browser window:
<a href="http://www.google.co.in/" target="_blank">Google</a>

The Anchor Tag and the Name Attribute

The name attribute is used to create a named anchor. When using named anchors we can create
links that can jump directly into a specific section on a page, instead of letting the user scroll
around to find what he/she is looking for.
Below is the syntax of a named anchor:

CSE -4-
Web Technologies Unit-I
<a name="label">Text to be displayed</a>
The name attribute is used to create a named anchor. The name of the anchor can be any text you
care to use.
The line below defines a named anchor:
<a name="tips">Useful Tips Section</a>
You should notice that a named anchor is not displayed in a special way. To link directly to the
"tips" section, add a # sign and the name of the anchor to the end of a URL, like this:
<a href="http://www.amyschan.com/mypage.html#tips">
Jump to the Useful Tips Section</a>

HTML LISTS
HTML supports ordered, unordered and definition lists.

1. Unordered Lists
An unordered list is a list of items. The list items are marked with bullets (typically small
black circles).
An unordered list starts with the <ul> tag. Each list item starts with the <li> tag.
<ul>
<li>Coffee</li>
<li>Milk</li>
</ul>
Here is how it looks in a browser:
 Coffee
 Milk
Inside a list item you can put paragraphs, line breaks, images, links, other lists, etc.

2. Ordered Lists
An ordered list is also a list of items. The list items are marked with numbers.
An ordered list starts with the <ol> tag. Each list item starts with the <li> tag.
<ol>
<li>Coffee</li>
<li>Milk</li>
</ol>
Here is how it looks in a browser:
1. Coffee
2. Milk
Inside a list item you can put paragraphs, line breaks, images, links, other lists, etc.

CSE -5-
Web Technologies Unit-I
HTML TABLE
Tables are defined with the <table> tag.

A table is divided into rows (with the <tr> tag), and each row is divided into data cells (with the
<td> tag). td stands for "table data," and holds the content of a data cell. A <td> tag can contain
text, links, images, lists, forms, other tables, etc.

Table Example

<table border="1">
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>
</table>

How the HTML code above looks in a browser:

row 1, cell 1 row 1, cell 2

row 2, cell 1 row 2, cell 2

HTML Tables and the Border Attribute

If you do not specify a border attribute, the table will be displayed without borders. Sometimes
this can be useful, but most of the time, we want the borders to show.

To display a table with borders, specify the border attribute:

<table border="1">
<tr>
<td>Row 1, cell 1</td>
<td>Row 1, cell 2</td>
</tr>
</table>

CSE -6-
Web Technologies Unit-I

HTML Table Headers

Header information in a table are defined with the <th> tag. All major browsers display the text
in the <th> element as bold and centered.

<table border="1">
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>
</table>

How the HTML code above looks in your browser:

Header 1 Header 2

row 1, cell 1 row 1, cell 2

row 2, cell 1 row 2, cell 2

HTML Table Tags

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
<caption> Defines a table caption
<colgroup> Specifies a group of one or more columns in a table for formatting
<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

CSE -7-
Web Technologies Unit-I

HTML <table> Tag

Definition and Usage
The <table> tag defines an HTML table. An HTML table consists of the <table> element and
one or more <tr>, <th>, and <td> elements. The <tr> element defines a table row, the <th>
element defines a table header, and the <td> element defines a table cell. A more complex
HTML table may also include <caption>, <col>, <colgroup>, <thead>, <tfoot>, and <tbody>
elements.
Attributes
Attribute Value Description
align left Not supported in HTML5. Deprecated in HTML
center 4.01.Specifies the alignment of a table according to
right surrounding text
bgcolor rgb(x,x,x) Not supported in HTML5. Deprecated in HTML
#xxxxxx 4.01.Specifies the background color for a table
colorname
border “1” Specifies whether the table cells should have borders or
not
Cellpadding pixels Not supported in HTML5. Specifies the space between the
cell wall and the cell content
Cellspacing pixels Not supported in HTML5. Specifies the space between cells
frame void Not supported in HTML5. Specifies which parts of the
above outside borders that should be visible
below
hsides
lhs
rhs
vsides
box
border
rules none Not supported in HTML5. Specifies which parts of the inside
groups borders that should be visible
rows
cols
all
summary text Not supported in HTML5. Specifies a summary of the
content of a table
width pixels Not supported in HTML5. Specifies the width of a table
%

Example
<table border="1">
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>

CSE -8-
Web Technologies Unit-I
<td>January</td>
<td>$100</td>
</tr>
</table>
HTML IMAGES
With HTML you can display images in a document.

The Image Tag and the src Attribute

In HTML, images are defined with the <img> tag. To display an image on a page, you
need to use the src attribute. Src stands for "source". The value of the src attribute is the URL of
the image you want to display on your page.
The syntax of defining an image: <img src="url">

The URL points to the location where the image is stored. An image named "boat.gif"
located in the directory "images" on "www.w3schools.com" has the URL:
http://www.w3schools.com/images/boat.gif. The browser puts the image where the image tag
occurs in the document. If you put an image tag between two paragraphs, the browser shows the
first paragraph, then the image, and then the second paragraph.

The Alt Attribute

The alt attribute is used to define an "alternate text" for an image. The value of the alt attribute is
an author-defined text:

<img src="images/logo.jpg” alt="Google logo">

The "alt" attribute tells the reader what he or she is missing on a page if the browser can't load
images. The browser will then display the alternate text instead of the image. It is a good practice
to include the "alt" attribute for each image on a page, to improve the display and usefulness of
your document for people who have text-only browsers.

HTML BACKGROUNDS
A good background can make a Web site look really great.
Backgrounds

The <body> tag has two attributes where you can specify backgrounds. The background can be a
color or an image.

1. Bgcolor
The bgcolor attribute specifies a background-color for an HTML page. The value of this attribute
can be a hexadecimal number, an RGB value, or a color name:
<body bgcolor="#000000">
<body bgcolor="rgb(0,0,0)">
<body bgcolor="black">

CSE -9-
Web Technologies Unit-I
The lines above all set the background-color to black.
2. Background
The background attribute specifies a background-image for an HTML page. The value of this
attribute is the URL of the image you want to use. If the image is smaller than the browser
window, the image will repeat itself until it fills the entire browser window.
<body background="images/cloudswirl.jpg">
<body background="http://www.amyschan.com/images/cloudswirl.jpg">
FORMS
Forms can be used to collect information. Sophisticated forms may be linked to a
database to store the information, but this is beyond the scope of the article. This article will
show you how to create a form that emails you the information.
Here is a very basic email form:
<form action="mailto:[email protected]" method="post">
Name:<br>
<input type="text" name="name" size="20"><br>
Email:<br>
<input type="text" name="email" size="20"><br>
Comment:<br>
<textarea cols="20" rows="5"></textarea><br>
<input type="submit" value="Submit"> <input type="reset" value="Reset">
</form>
And here's what it looks like:
Name:

Email:

Comment:

Submit Reset

Notice that the "input" tag was used for the text fields as well as the buttons! The "input" tag is
the tag you will use most often in forms. Here are different forms of the input tag:
 type="text"
 type="password" (asterisks when you type)
 type="checkbox"
 type="radio"
Submit Query
 type="submit" (You can change the text on the button.)

CSE - 10 -
Web Technologies Unit-I
Reset
 type="reset" (You can change the text on the button.)
 type="hidden" (You can't see this because it's hidden! This allows you to send additional
variables that your user can't see.)
 type="button" (You can change the text on the button.

Below you will find a table of the various form elements and how you can use them.
FORM – attributes
action This attribute usually has a link to a web page that contains code which
="[url]" processes the form. In our example above, we use "mailto" to tell the form to
send the information as an email.
method This attribute specifies how the information is sent. With the "get" method, all
="get" the information is sent in one long URL string. With the "post" method, all the
="post" information is sent but is "invisible" to the user.
name When creating complex forms and using scripting, you may need to specify the
="[name of name of the form. The name should be unique - that is, you shouldn't have other
form]" forms on the page with the same form name.
INPUT – attributes
type The "type" attribute allows you to specify what type of form element you want
="text" to use. As you can see, the "input" element can have many different forms - see
="password" above for examples.
="checkbox"
="radio"
="submit"
="reset"
="hidden"
="button"
checked This attribute does not have any values. When you put this attribute into the tag
for "radio" or "checkbox," they will be selected.
src Use this attribute when you have an "image" to specify the location of the image.
="[url]"

TEXTAREA - attributes
This form element is the multi-line text box that you often seen for "comments." The opening
and closing tag surround the text that will be initially displayed.
name This attribute must be set to a unique name so you know how to refer to the form
="[referring element.
name]"
rows This attribute allows you to set the number of rows for the text area.
="[number]"
cols This attribute allows you to set the number of columns for the text area.
="[number]"

CSE - 11 -
Web Technologies Unit-I

SELECT - attributes
The SELECT tag allows you to create "select boxes" or "drop down menus." It is the "outer"
element, used with the OPTION tag. (See the example link below)
name This attribute must be set to a unique name so you know how to refer to the form
="[referring element.
name]"
size This attribute allows you to set how many rows are visible.
="[number]"
multiple This attribute does not have any "values." When you set this attribute, it allows
the user to select more than one option.
OPTION - attributes
The OPTION tag is used with the SELECT tag to define the different options in the select
box or dropdown menu. The opening and closing tag surround the text that will be displayed.
value This attribute must be set to a unique name so you know how to refer to the form
="[value]" element. It will probably be an abbreviated version of the text that is displayed.
selected This attribute does not have any "values." When you set this attribute, it marks
this option as being "preselected."
Putting it all together...
Here's a sample page using this code below:

<form>
Enter your Name: <input type="text" width="20" size="20">
<p>Favorite Color:<br>
<input type="checkbox" checked value="red" name="colors"> Red<br>
<input type="checkbox" value="blue" name="colors"> Blue</p>
<p>Gender:<br>
<input type="radio" checked value="male" name="gender">Male<br>
<input type="radio" value="female" name="gender">Female</p>
<p>Address:<br>
<textarea rows="5" cols="20">Please enter your permanent address
here.</textarea></p>
Country:<br>
<select name="country">
<option value="usa" selected>USA</option>
<option value="uk">United Kingdom</option>
<option value="canada">Canada</option>
</select>
</form>

CSE - 12 -
Web Technologies Unit-I
CSS
Introduction to CSS:
CSS stands for Cascading Style Sheets. CSS describes how HTML elements are to be
displayed on screen, paper, or in other media. CSS saves a lot of work. It can control the layout
of multiple web pages all at once. External style sheets are stored in “.css” files. CSS is used to
define styles for your web pages, including the design, layout and variations in display for
different devices and screen sizes.

Types of CSS:
There are three types of CSS available. They are:
1) Inline CSS
2) Internal CSS
3) External CSS
1. Inline CSS:
If the styles are mentioned along with the tag then this type of CSS is known as inline CSS.
Example:
<p style=”text-align: justify; background-color: red”>Hi this is the Inline CSS. </p>
2. Internal CSS:
For internal CSS, we write all the desired “styles” for the “selectors” along with the
properties and values in the “head” section. And in the body section then newly defied
selector tags are used with the actual contents.
Example:
<html>
<head>
<style type= “text/css”>
p
{
text-align: justify;
background-color: red;
}
</style>
</head>
<body>
<p>This is Internal CSS.</p>
</body>
</html>

3. External CSS:
Sometimes we need to apply particular style to more than one web page; in such cases
external CSS can be used. The main idea in this type of CSS is that the desired styles can be
written in one “.css” file. And this file can be called in our web pages to apply the styles.

CSE - 13 -
Web Technologies Unit-I
Example:
<html>
<head>
<link rel = “stylesheet” type = “text/css” href = “external.css”>
</head>
<body>
<p>This is Internal CSS.</p>
</body>
</html>
external.css:
p
{
text-align: justify;
background-color: red;
}

CSS Selectors:
CSS selectors are used to "find" (or select) HTML elements based on their element name,
id, class, attribute, and more.

The element Selector:

The element selector selects elements based on the element name. You can select all <p>
elements on a page like this (in this case, all <p> elements will be center-aligned, with a red text
color):
Example:
p{
text-align: center;
color: red;
}

The id Selector:
The id selector uses the id attribute of an HTML element to select a specific element. The id of
an element should be unique within a page, so the id selector is used to select one unique
element! To select an element with a specific id, write a hash (#) character, followed by the id of
the element. The style rule below will be applied to the HTML element with id="para1":
Example:
#para1 {
text-align: center;
color: red;
}

CSE - 14 -
Class Selector (.)
The class selector is used to select one or multiple elements that share the same class name. It allows
you to apply styles to a specific group of elements without affecting others.
Syntax:
.class-name {
property: value;
}
Example:
.text-red {
color: red;
font-weight: bold;
}
.box {
width: 100px;
height: 100px;
background-color: lightblue;
}
<p class="text-red">This is a red paragraph.</p>
<p>This is a normal paragraph.</p>
<div class="box">This is a blue box.</div>
• The .text-red class applies red color and bold text to specific paragraphs.
• The .box class makes a <div> 100x100 pixels with a light blue background.
• Any element using .text-red or .box will inherit these styles.
2. Universal Selector (*)
The universal selector (*) applies styles to all elements on a web page, unless overridden by more
specific selectors.
Syntax:
*{ property: value; }
Example:
*{
margin: 0;
padding: 0;
box-sizing: border-box;
 font-family: Arial, sans-serif;
}
<h1>Heading</h1>
<p>Some text in a paragraph.</p>
<div>A div element</div>
• The universal selector (*) removes default margins and paddings from all elements.
• It also sets a consistent box model (box-sizing: border-box) and applies a default font to the
entire page.
Group Selector (,)
The group selector (selector1, selector2, selector3) applies the same style to multiple elements at once,
reducing repetition in CSS.
Syntax:
selector1, selector2, selector3 {
property: value;
}
Example:
h1, h2, h3 {
color: blue;
font-weight: bold;
}
p, div {
font-size: 18px;
line-height: 1.5;
}
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<p>This is a paragraph.</p>
<div>This is a div.</div>
• The styles for <h1>, <h2>, and <h3> apply the same blue color and bold text.
• The styles for <p> and <div> apply the same font size and line height.
• Using the group selector makes the CSS more efficient and readable.
HTML5: The Modern Markup Language
HTML5 (HyperText Markup Language version 5) is the latest version of HTML, used for structuring
and presenting content on the web. It introduces new elements, improved multimedia support, better
form controls, and enhanced APIs to create rich and interactive web applications.
Why HTML5?
HTML5 was developed to address the limitations of previous HTML versions. Earlier, developers relied
on external plugins like Flash for multimedia and animations, which caused compatibility and security
issues. HTML5 introduced built-in multimedia support, making web applications faster, more secure,
and mobile-friendly.
Features of HTML5:
1. New Semantic Elements:
o <header>, <footer>, <article>, <section>, <aside>, <nav> – Improve readability and
SEO.
o Helps browsers and search engines understand the structure of a webpage.

2. Multimedia Support:

o <audio> and <video> elements allow embedding media without plugins like Flash.

o Example:

<video controls>

<source src="video.mp4" type="video/mp4">

Your browser does not support the video tag.

</video>

3. Canvas & SVG for Graphics:

o <canvas> allows drawing graphics using JavaScript for animations and games.

o <svg> (Scalable Vector Graphics) provides resolution-independent graphics.

4. Improved Forms & Input Types:

o New input types: email, date, range, color, tel, number, search, etc.

o Example:

<input type="email" placeholder="Enter your email">

o Built-in validation: No need for JavaScript to validate inputs.

5. Geolocation API:
 o Allows web applications to access a user's location (with permission).

o Example:

navigator.geolocation.getCurrentPosition(function(position) {

console.log("Latitude: " + position.coords.latitude);

console.log("Longitude: " + position.coords.longitude);

});

6. Local Storage & Session Storage:

o Local Storage: Stores data permanently in the browser.

o Session Storage: Stores data for the session only (deleted when the browser is closed).

7. Offline Web Applications with Cache API:

o Allows users to access web apps without an internet connection.

8. Improved Accessibility:

o ARIA (Accessible Rich Internet Applications) support improves usability for disabled
users.

Advantages of HTML5:

• Cross-Platform Compatibility: Works on desktops, tablets, and mobile devices.

• Better Performance: Reduces dependency on external plugins like Flash.
• SEO-Friendly: Semantic elements improve search engine rankings.
• Mobile-Optimized: Designed for responsive and mobile-first web development.

Disadvantages of HTML5:

Limited Browser Support: Some features do not work in older browsers (e.g., Internet Explorer).
Security Concerns: New APIs (like Geolocation) can be misused if not implemented correctly.

Learning Curve: Developers need to adapt to new tags and APIs.

Examples of HTML5 Applications:

• YouTube – Uses HTML5 <video> instead of Flash for streaming.

• Google Docs – Uses HTML5 for real-time document editing.

• Online Games – Uses HTML5 <canvas> for interactive gaming.

CSS3: Advanced Styling for Web Pages

CSS3 (Cascading Style Sheets version 3) is the latest version of CSS used for styling HTML documents.
It introduces new features such as animations, gradients, flexbox, grid layout, and responsive design to
enhance web page appearance and usability.

Why CSS3?

Earlier versions of CSS had limitations in styling, requiring JavaScript or images for advanced visual
effects. CSS3 simplifies web design with built-in animations, transitions, and flexible layouts,
reducing reliance on JavaScript and external graphics.

Key Features of CSS3:

1. Selectors & Pseudo-Classes:

o Advanced selectors like nth-child(), not(), first-of-type.

o Example:

p:nth-child(odd) {

color: blue;

2. Media Queries (Responsive Design):

o Enables mobile-friendly websites that adjust layouts dynamically.

o Example:

@media (max-width: 600px) {

body {

background-color: lightblue;

3. Flexbox & Grid Layout:

o Flexbox: Aligns and distributes space dynamically for layouts.

o Grid Layout: Allows complex grid-based designs with ease.

 o Example (Flexbox):

.container {

display: flex;

justify-content: space-between;

o Example (Grid):

.grid-container {

display: grid;

grid-template-columns: auto auto auto;

4. Animations & Transitions:

o Adds smooth animations without JavaScript.

o Example (Transition):

button {

transition: background-color 0.5s;

button:hover {

background-color: green;

o Example (Animation):

@keyframes bounce {

0% { transform: translateY(0); }

50% { transform: translateY(-20px); }

100% { transform: translateY(0); }

.animated-box {
 animation: bounce 1s infinite;

5. Box Shadows & Text Effects:

o Example (Shadow):

box-shadow: 10px 10px 5px grey;

text-shadow: 2px 2px 4px red;

6. Gradients & Background Enhancements:

o Supports linear and radial gradients without images.

o Example:

background: linear-gradient(to right, red, yellow);

7. Multiple Background Images:

o Example:

background: url(image1.jpg), url(image2.jpg);

Advantages of CSS3:

• Better Design & Aesthetics: Enables advanced styling and animations.

• Faster Page Loading: Reduces reliance on images and JavaScript.
• Improved Responsiveness: Allows flexible layouts for mobile and desktop.
• Cross-Browser Compatibility: Works well with modern browsers.

Disadvantages of CSS3:

Browser Compatibility Issues: Some features do not work in older browsers.

Complex Debugging: Advanced animations and layouts can be difficult to troubleshoot.

Learning Curve: Requires understanding of new selectors, animations, and layout techniques.

Examples of Websites Using CSS3:

• Apple – Uses CSS3 animations and transitions for smooth UI.

• Netflix – Uses CSS3 for responsive layouts and backgrounds.

• Amazon – Uses CSS3 grids and flexbox for an adaptive design.