Scribd
Upload
57 views163 pages

Web Technologies Overview and HTML Basics

The document provides an overview of web technologies, covering essential topics such as HTTP protocols, HTML common tags, and the structure of web forms. It explains the basic functions of HTTP, including request methods and response codes, as well as the use of HTML for creating web pages with various elements like lists, tables, and forms. Additionally, it introduces JavaScript and Web 2.0 concepts, emphasizing the importance of client-server communication and rich internet applications.

Uploaded by

psridhargeoinformatics
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
57 views163 pages

Web Technologies Overview and HTML Basics

The document provides an overview of web technologies, covering essential topics such as HTTP protocols, HTML common tags, and the structure of web forms. It explains the basic functions of HTTP, including request methods and response codes, as well as the use of HTML for creating web pages with various elements like lists, tables, and forms. Additionally, it introduces JavaScript and Web 2.0 concepts, emphasizing the importance of client-server communication and rich internet applications.

Uploaded by

psridhargeoinformatics
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd

WEB TECHNOLOGIES

UNIT - I:
Introduction to Web Technologies and Web 2.0: Introduction to client server systems,
HTTP protocols, Common tags in HTML: List, Tables, Forms, Frames, Images, Links
and Addressing, Cascading Style Sheet (CSS), XML: Comparative study of XML and
HTML, Document Type Definition, Schema, Parsers (Dom and SAX), Introduction to
JavaScript, JavaScript objects, programming using java script if-else, switch, popup box,
while loop, for loop, event handling, Introduction to Web 2.0, Data and Web 2.0,
Convergence, Web Services: SOAP, JSON, Building Rich Internet Applications with
AJAX, Servlets.
HTTP (Hyper Text Transfer Protocol)
Definition:
• HTTP is a communication protocol used for data transfer between a client
(browser) and a server (web application) over the Internet.
• It defines how requests are sent and how responses are received — like a
digital conversation between your web browser and a server.

Basic Structure of HTTP Communication


• Client sends a request (e.g., browser, Postman, Leaflet, or OpenLayers app).
• Server processes the request (e.g., GeoServer, API, or database).
• Server sends a response (HTML, JSON, XML, or image).
• Client → HTTP Request → Server
• Server → HTTP Response → Client
• Main HTTP Request Methods

Method Description Example Spatial IT Usage


Retrieves data from the Fetching GeoJSON, WMS
GET GET /map/layer1
server map tiles
Uploading shapefiles or
POST Sends data to the server POST /upload form data
PUT Updates existing data PUT /edit/layer1 Modifying map layer info
Deleting map layers or
DELETE Removes data from server DELETE /layer1
records
Similar to GET but only
HEAD HEAD /map Check data availability
headers
HTTP Response Codes
Code Meaning Example Scenario

200 OK Success Layer loaded successfully

201 Created Resource created New dataset uploaded

400 Bad Request Invalid request Wrong parameter sent

401 Unauthorized Authentication required Missing API key

404 Not Found Resource doesn’t exist Wrong URL or layer ID

500 Internal Server Error Server problem GeoServer crash or backend issue
HTML Common tags:-
HTML is the building block for web pages. HTML is a format that tells a
computer how to display a web page. The documents themselves are plain
text files with special "tags" or codes that a web browser uses to interpret and
display information on your computer screen.
• 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.
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 and 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>
•<html>: The root element of an HTML page.
•<head>: Contains meta-information about the document (e.g.,
<title>, <meta>).
•<body>: Contains the visible page content (e.g., headings,
paragraphs, images).
Text Formatting Tags:
•Headings: <h1> to <h6> for defining headings (e.g., <h1> is the
largest).
•Paragraphs: <p> for paragraphs.
•Bold & Italics: <strong> (bold) and <em> (italics).
HTML Tag Syntax Description
<div> <div>...</div> Defines a division or section in an HTML document.
<p> <p>...</p> Defines a paragraph.
<a> <a href="...">...</a> Defines a hyperlink.
<img> <img src="..." alt="..."> Embeds an image.
<ul> <ul><li>...</li></ul> Defines an unordered list.
<ol> <ol><li>...</li></ol> Defines an ordered list.
<li> <li>...</li> Defines a list item.
<table> <table>...</table> Defines a table.
<tr> <tr>...</tr> Defines a table row.
<th> <th>...</th> Defines a table header cell.
<td> <td>...</td> Defines a table data cell.
<form> <form>...</form> Defines an HTML form for user input.
<input> <input type="..."> Defines an input control within a form.
<button> <button>...</button> Defines a clickable button.
<h1>-<h6> <h1>...</h1> Define headings of different levels.
<span> <span>...</span> Defines a generic inline container.
<label> <label for="...">...</label> Defines a label for an input element.
<iframe> <iframe src="..."></iframe> Embeds an inline frame for external content.
• Lists:-HTML offers web authors three ways for specifying lists of
information. All lists must contain one or more list elements. Lists are
of three types
• 1) Un ordered list
• 2)Ordered List
• 3)Definition list
1. Lists

• Useful for showing items in bullets or numbered form.


• <ul>: unordered list (bullets)
• <ol>: ordered list (numbers/letters)
• <li>: list item (goes inside <ul> or <ol>)
<ul>
<li>Apple</li>
<li>Banana</li>
</ul>
• <ol>
• <li>First item</li>
• <li>Second item</li>
• <li>Third item</li>
• </ol>
<!DOCTYPE html>
<html>
<head>
<title>HTML Unordered List</title>
</head>
<body>
<ul> <li>Beetroot</li>
<li>Ginger</li><li>Potato</li>
<li>Radish</li>
</ul>
</body>
</html>
• HTML Definition Lists:- HTML and XHTML supports a list style which is
called definition
• lists where entries are listed like in a dictionary or encyclopedia. The
definition list is the ideal way to present a glossary, list of terms, or
other name/value list. Definition List makes use of following three
tags.
1). <dl> - Defines the start of the list
2). <dt> - A term
3). <dd> - Term definition
4). </dl> - Defines the end of the list
<!DOCTYPE html>
<html>
<head>
<title>HTML Definition List</title>
</head>
<body>
<dl>
<dt><b>HTML</b></dt><dd>This stands for Hyper Text Markup
Language</dd>
<dt><b>HTTP</b></dt><dd>This stands for Hyper Text Transfer Protocol</dd>
</dl>
</body>
</html>
HTML tables
The HTML tables allow web authors to arrange data like text, images,
links, other tables, etc.
into rows and columns of cells. The HTML tables are created using the
<table>tag in which the <tr>tag is used to create table rows and
<td>tag is used to create data cells.
<!DOCTYPE html>
<html>
<head>
<title>HTML Tables</title>
</head>
<body>
<table border="1">
<tr>
<td>Row 1, Column 1</td><td>Row 1, Column 2</td>
</tr>
<tr><td>Row 2, Column 1</td><td>Row 2, Column 2</td>
</tr>
</table>
</body>
Tables
For presenting data in rows and columns.
<table>: defines the table container
<tr>: table row
<th>: table header cell
<td>: table data cell
<table border="1">
<tr><th>Name</th><th>Age</th></tr>
<tr><td>Priya</td><td>24</td></tr>
</table>
Table Heading: Table heading can be defined using <th>tag. This tag will be
put to replace
<td> tag, which is used to represent actual data cell. Normally you will put
your top row as table heading as shown below, otherwise you can use <th>
element in any row.
Tables Backgrounds: set table background using one of the following two
ways:
1)bgcolor attribute - You can set background color for whole table or just for
one cell.
2) background attribute - You can set background image for whole table or
just for one cell. You can also set border color also using border color
attribute.
<!DOCTYPE html>
<html>
<head>
<title>HTML Tables</title></head>
<body>
<table border="1"bordercolor="red" bgcolor="yellow">
<tr><th>Name</th>
<th>Salary</th></tr>
<td>Jayapal </td><td>50,000.00</td>
</tr>
<tr><td>Ravi</td><td>45,000.00</td>
</tr>
</table>
</body>
</html>.
Image Insert
Images are very important to beautify as well as to depict many
complex concepts in simple way on your web page.
Insert Image:
insert any image in the web page by using <img>tag.
<img align="left|right|middle|top|bottom">
<!DOCTYPE html>
<html>
<head>
<title>Using Image in Webpage</title>
</head>
<body><p>Simple Image Insert</p>
<img src="[Link]" alt="Test Image" />
</body>
</html>
Forms
• HTML FORMS:
• HTML Forms are required to collect some data from the site visitor.
For example, during user registration you would like to collect
information such as name, email address, credit card, etc.
• A form will take input from the site visitor and then will post it to a
back-end application such as CGI, ASP Script or PHP script etc.
• The back-end application will perform required processing on the
passed data based on defined business logic inside the application.
• There are various form elements available like text fields, text area
fields, drop-down menus, radio buttons, checkboxes, etc.
Attribute Description / Function Example
action URL or file where the form data is sent for processing. <form action="[Link]">

method HTTP method used to send data. Usually GET or POST. <form method="post">

name Name of the form (used in JavaScript or server-side access). <form name="loginForm">

Specifies where to display the response after submitting. (_blank,


target <form target="_blank">
_self, _parent, _top, or frame name).

Type of encoding used when sending form data. Needed for file <form enctype="multipart/form-
enctype
uploads. data">

autocomplete Enables or disables browser autocomplete for form fields. (on / off) <form autocomplete="off">

novalidate (HTML5) Disables default browser validation on form submission. <form novalidate>

accept-charset Character encoding for the form submission (like UTF-8). <form accept-charset="UTF-8">

<form onsubmit="return
onsubmit JavaScript event triggered before form submission.
validateForm()">
<form onreset="alert('Form
onreset JavaScript event triggered when the form is reset.
cleared!')">
• action → Where to send data (destination file or script).
• method → How to send it (GET = visible in URL, POST = hidden).
• enctype → Important for file uploads.
• autocomplete → Controls if browser fills values automatically.
• novalidate → Skip built-in browser validation (useful when you handle
it with JavaScript).
• target → Where result opens (same tab, new tab, frame).
Attribute Purpose
Turns off HTML5 validation (useful
novalidate for testing).
on / off for full form or specific
autocomplete inputs.
Used in <button> or <input
formnovalidate (for buttons) type="submit"> to skip validation
on that button only.
formenctype, formmethod, Allow overriding parent <form>
formaction, formtarget attributes for specific submit
buttons.
• <form action="[Link]" method="post" enctype="multipart/form-
data" autocomplete="on" target="_blank">
• <label>Name:</label>
• <input type="text" name="username" required><br>

• <label>Upload File:</label>
• <input type="file" name="photo"><br>

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


• <input type="reset" value="Reset">
• </form>
There are different types of form controls that you can use to collect data using
HTML form:
 Text InputControls
Checkboxes Controls
Radio BoxControls
Select BoxControls
 File Selectboxes
 Hidden Controls
 ClickableButtons
 Submit and ResetButton
• Text Input Controls:- There are three types of text input used on forms: 1) Single-line
text input controls - This control is used for items that require only one line of user
input, such as search boxes or names. They are created usingHTML tag.
• <input type="text">defines a one-line input field for text input:
<!DOCTYPE html>
<html>
<head>
<title>Multiple-Line Input Control</title>
</head>
<body>
<form> Description: <br />
<textarea rows="5" cols="50" name="description"> Enter description here... </textarea>
</form>
</body>
</html>
• Checkboxes Controls:- Checkboxes are used when more than one option is required
to be selected. They are also created using HTML tag but type attribute is set to
checkbox. Here is an example HTML code for a form with two checkboxes:
• <!DOCTYPE html>
• <html><head><title>Checkbox Control</title></head>
• <body>
• <form>
• <input type="checkbox" name="C++" value="on"> C++
• <br>
• <input type="checkbox" name="C#" value="on"> C#
• <br>
• <input type="checkbox" name="JAVA" value="on"> JAVA
• </form>
• </body></html>
• Radio Button Control:- Radio buttons are used when out of many
options, just one option is required to be selected. They are also created
using HTML tag but type attribute is set toradio.
<!DOCTYPE html>
<html><head><title>Radio Box Control</title></head>
<body><p>Select a Course</p>
<form>
<input type="radio" name="subject" value="C++"> C++
<br>
<input type="radio" name="subject" value="JAVA"> JAVA
<br>
<input type="radio" name="subject" value="HTML"> HTML
</form> </body></html>
• Select Box Controls :- A select box, also called drop down box which provides option to list down
various options in the form of drop down list, from where a user can select one or more options.
• <!DOCTYPE html>
• <html>
• <head>
• <title>Select Box Control</title>
• </head>
• <body>
• <form>
• <select name="dropdown">
• <option value="C++" selected>C++</option>
• <option value="JAVA">JAVA</option>
• <option value="HTML">HTML</option>
• </select>
• </form>
• </body>
• </html>
• File Select boxes:- If you want to allow a user to upload a file to your web site, you will
need to use a file upload box, also known as a file select box. This is also created using
the element but type attribute is set to file.
<!DOCTYPE html>
<html>
<head>
<title>File Upload Box</title>
</head>
<body>
<p>File Upload Box</p>
<form>
<input type="file" name="fileupload" accept="image/*" />
</form>
</body>
</html>
• Hidden Controls:- Hidden form controls are used to hide data inside
the page which later on can be pushed to the server.
• This control hides inside the code and does not appear on the actual
page. For example, following hidden form is being used to keep
current page number.
• When a user will click next page then the value of hidden control will
be sent to the web server and there it will decide which page will be
displayed next based on the passed current page.
Button Controls:- There are various ways in HTML to create
clickable buttons. You can also create a clickable button
using tag by setting its type attribute to button. The type
attribute can take the following values:
<!DOCTYPE html>
<html>
<head>
<title>File Upload Box</title>
</head>
<body>
<form>
<input type="submit" name="submit" value="Submit" />
<input type="reset" name="reset" value="Reset" />
<input type="button" name="ok" value="OK" />
<input type="image" name="imagebutton" src=“[Link]" />
</form>
</body></html>
• HTML frames: These are used to divide your browser window into
multiple sections where each section can load a separate HTML
document. A collection of frames in the browser window is known as
a frameset. The window is divided into frames in a similar way the
tables are organized: into rows and columns.
• To use frames on a page we use <frameset> tag instead of <body> tag.
The <frameset> tag defines, how to divide the window into frames.
• The rows attribute of <frameset> tag defines horizontal frames and
cols attribute defines vertical frames. Each frame is indicated by
<frame> tag and it defines which HTML document shall open into the
frame.
• <!DOCTYPE html>
• <html>
• <head>
• <title>Three Column Frameset Example</title>
• </head>

• <!-- Divide the browser window into 3 vertical columns -->


• <frameset cols="25%,50%,25%">
• <frame src="frame_a.htm">
• <frame src="frame_b.htm">
• <frame src="frame_c.htm">
• </frameset>

• </html>
Links and Addressing in HTML
1. What is a Link?
A link (hyperlink) connects one web page to another page, a
document, an email address, or even a specific section on the
same page.
The main tag used is the <a> (anchor) tag.
Basic Syntax

<a href="URL">Link Text</a>


<a href="[Link] to Google</a>
Linking to another page in the same website
<a href="[Link]">About Us</a>

c) Linking to a file (PDF, image, etc.)


<a href="documents/[Link]">Download Report</a>

(d) Linking to an email address


<a href="[Link] Email</a>

(e) Linking to a phone number


<a href="[Link] Us</a>
CSS (Cascading Style Sheets)
Introduction
CSS (Cascading Style Sheets) is used to style and design web pages. It controls the
layout, colors, fonts, and overall appearance of HTML elements.
It separates the content (HTML) from the presentation (CSS), making web pages easier
to maintain and faster to load.
Why Use CSS?
Enables consistent design across multiple pages
Reduces code repetition
Makes websites responsive and adaptive
Allows quick global changes (one CSS file affects many pages)
Improves page loading speed
Introduction to Cascading Style
Sheets (CSS)
CSS stands for Cascading Style Sheets.
It controls the style, layout, and design of HTML elements.
CSS separates content (HTML) from presentation (design).
It helps make web pages attractive, responsive, and consistent.
CSS Syntax and Types
• Syntax:
• selector { property: value; }

• Types of CSS:
• 1. Inline CSS – Applied directly inside HTML tags.
• 2. Internal CSS – Defined within <style> tag in the head.
• 3. External CSS – Written in a separate .css file and linked using <link>.
When to Use Inline CSS?

Example of CSS
•Applying Unique Styles: Ideal for styling
individual elements without affecting global styles
<style> •Testing or Debugging: Useful for quick style
adjustments during development.
body { background-color: lightblue; }
•Email Templates: Ensures consistent styling
h1 { color: navy; text-align: center; } across various email clients.
</style> •Dynamic Styling with JavaScript: Allows for
programmatically changing styles based on user
interactions.

Inline CSS applies styles directly to HTML elements using the style attribute, allowing for
quick, unique styling without external stylesheets.
•Quick Application: Ideal for rapid, one-off style adjustments.

•High Specificity: Overrides other CSS rules due to its specificity.

•Limited Reusability: Not suitable for applying the same styles to multiple elements.
Introduction to XML
• • XML stands for eXtensible Markup Language.
• • Designed to store and transport data.
• • Focuses on data structure and meaning, not presentation.
• • User-defined tags make XML flexible and readable by both humans
and machines.
Comparative Study: XML vs HTML
HTML:
Focuses on displaying data.
Has predefined tags.
Not case-sensitive.

• XML:
Focuses on storing and transporting data.
User-defined tags.
Case-sensitive and strict structure.
Document Type Definition (DTD)
• A Document Type Definition (DTD) is a set of rules that defines the structure
and legal elements and attributes for an XML or SGML-family markup
language.
• It acts as a blueprint for a document, specifying how tags should be used and
the relationships between them, and can be used by an application to validate
if a document is well-formed and correct.
• Example:
• <!DOCTYPE note [
• <!ELEMENT note (to,from,heading,body)>
• <!ELEMENT to (#PCDATA)>
• ]>
XML Schema
• • XML Schema (XSD) defines the structure, content, and data types of
XML documents.
• • More powerful and flexible than DTD.

• Example:
• <xs:element name='price' type='xs:decimal'/>
XML Parsers: DOM and SAX
• • Parsers process XML documents and extract data.

• DOM (Document Object Model):


• • Loads entire XML into memory as a tree structure.
• • Easy navigation but memory intensive.

• SAX (Simple API for XML):


• • Parses XML sequentially.
• • Faster and uses less memory; suitable for large XML files.
Introduction to
JavaScript and
JavaScript Objects
Introduction to JavaScript
• • JavaScript (JS) is a scripting language for creating dynamic web
pages.
• • Runs on both client-side (browser) and server-side ([Link]).
• • Works with HTML (structure) and CSS (style).
• • Provides interactivity, animations, and real-time updates.
What is JavaScript?
• JavaScript is the programming language of the web.
• It can calculate, manipulate and validate data.
• It can update and change both HTML and CSS
Key Features of JavaScript
• Lightweight and easy to learn
• Interpreted and object-based
• • Event-driven and platform-independent
• • Supports functional and object-oriented programming
How to Add JavaScript to HTML
• 1. Inline Script → <button onclick="alert('Hello!')">Click Me</button>
• 2. Internal Script → <script>[Link]('Hello');</script>
• 3. External Script → <script src='[Link]'></script>
Basic JavaScript Syntax
• // Display message
• alert('Hello, World!');

• // Variables
• let name = 'Sridhar'; const pi = 3.14;

• // Conditional Statement
• if (pi > 3) { [Link]('Pi is greater than 3'); }
JavaScript Objects
• • Objects store data as key-value pairs.
• • Example:
• let student = {
• name: 'Ravi', age: 24, course: '[Link]',
• displayInfo: function() { return [Link] + ' studies ' + [Link]; }
• };
Creating JavaScript Objects
• 1. Object Literal → let person = {name: 'Sita', age: 22};
• 2. new Object() → let person = new Object();
• 3. Constructor Function → function Car(model, year) { [Link] =
model; [Link] = year; }
Accessing and Modifying Objects
• • Access: [Link] or person['age']
• • Add: [Link] = 'Hyderabad';
• • Delete: delete [Link];
Common Built-in JavaScript Objects
• • Math → [Link](), [Link]()
• • Date → new Date()
• • String → 'hello'.toUpperCase()
• • Array → [1, 2, 3].push(4)
JavaScript Conditional Statements (if-else, switch)
• if-else Example:
let age = 20;
if (age >= 18) {
The if...else statement in
[Link]('Adult'); JavaScript is a decision-making
}
else {
statement used to execute
[Link]('Minor'); different blocks of code based
}
on whether a condition is true
let age = 20;
or false.
if (age >= 18) { a block of code means the group of statements written inside
curly braces { ... }.
[Link]("You are eligible to vote.");
Each block tells the computer what to do when a condition is
} else { true or false.
[Link]("You are not eligible to vote.");
}
• let marks = 75;
• if (marks >= 90) {
• [Link]("Grade: A");
• } else if (marks >= 75) {
• [Link]("Grade: B");
• } else if (marks >= 60) {
• [Link]("Grade: C");
• } else {
• [Link]("Grade: F");
•}
let marks = 95;

if (marks >= 90) {


[Link]("Grade: A");
} else if (marks >= 80) {
[Link]("Grade: B");
} else if (marks >= 70) {
[Link]("Grade: C");
} else if (marks >= 60) {
[Link]("Grade: D");
} else if (marks >= 50) {
[Link]("Grade: E");
} else {
[Link]("Fail");
}
• A switch statement is used to test one variable or expression against
many possible values. It’s an alternative to writing many if...else
if...else statements.
let grade = "B";

switch (grade) {
case "A":
[Link]("Excellent");
break;

case "B":
[Link]("Very Good");
break;

case "C":
[Link]("Good");
break;

default:
[Link]("Invalid grade");
}
JavaScript Popup Boxes
A popup box in JavaScript is a small dialog
window that appears on the screen to
interact with the user — either to display a
message, get input, or ask for confirmation.
• • alert('Welcome!') → Displays a simple alert box.
• • confirm('Are you sure?') → Returns true or false.
• • prompt('Enter your name:') → Accepts user input.
There are 3 types of JavaScript Popup Boxes
Type Function Example Use

alert() Shows an information message “You are eligible to vote.”

prompt() Takes input from user “Enter your age:”

confirm() Asks user to confirm (OK/Cancel) “Are you sure you want to exit?”
• Definition of while loop
• A while loop in JavaScript is used to repeatedly execute a block of
code as long as a given condition is true.
let i = 1;
while (i <= 5) {
[Link]("Value of i is: " + i);
i++; // increasing i by 1
} let i = 3;

while (i <= 20) {


[Link]("Value of i is: " + i);
i = i + 3; // increase by 3 each time
}
A for loop is a control statement in JavaScript that allows you to repeat
a block of code a specific number of times by using an initial value, a
condition, and an increment/decrement.
It runs code again and again until the given condition becomes false.

for (let i = 1; i <= 5; i++) { for (let i = 2; i <= 10; i += 2) {


[Link]("Number is: " + i); [Link](i);
} }

let i = 1; // initialization for (let i = 1; i <= 5; i++) {


while (i <= 5) { // condition [Link](i);
[Link](i); }
i++; // update
}
while loop → runs until condition is true
for loop → runs until condition becomes false, then stops
Both while and for loops work on true/false conditions, but
the difference is where and how we write those parts.

Feature while loop for loop


Initialization written outside the written inside the loop
loop header
Condition checked before each checked before each
iteration iteration
Update (i++) written inside the loop written inside the loop
body header
when condition when condition
When stops becomes false becomes false
JavaScript Event Handling
Event Handling
Event handling in JavaScript means writing code that responds to user
actions or browser events — like clicking a button, moving the mouse,
typing on the keyboard, or loading a webpage.
An event handler is a JavaScript function that executes in response to a
specific event, such as a click or key press.

• Example:
• <button onclick="alert('Button clicked!')">Click Me</button>
• [Link]('btn').addEventListener('click', function() {
• alert('Hello!');
• });
Introduction to Web 2.0
Web 2.0 refers to the second generation of the World Wide Web, focusing on user
interaction, collaboration, and content sharing. Unlike Web 1.0, where users were mostly
passive viewers of information, Web 2.0 enables them to create, modify, and share content
easily. It emphasizes social networking, wikis, blogs, and web-based communities, allowing
a more participatory web experience.
Key characteristics of Web 2.0 include:
• User-generated content (e.g., YouTube, Wikipedia)
• Rich user experience using technologies like AJAX and JavaScript
• Social media interaction
• Cloud-based applications
• TaggingThe term
and “Web 2.0” was
folksonomies first
for introduced
better in 1999
content by Darcy DiNucci, a web
organization
designer.
But it became popular globally in 2004, after the O’Reilly Media Web 2.0
Conference organized by Tim O’Reilly.
.
Web 1.0 (1990s–early 2000s): “Read-Only Web” 🟢 Web 2.0 (2004 onwards): “Read + Write + Interact Web”
Web 1.0 was the early stage of the internet, Web 2.0 changed the internet completely.
where: It gave more facilities for public and humans to learn, share,
•Websites were static and communicate.
Features:
•Users could only read information
•Users can read + write + interact
•No interaction (no comments, no sharing, no •All modern web apps started
login) •Blogs, comments, likes, shares
•Very few features •Social media (Facebook, YouTube, Instagram)
•Mainly used by limited people •E-learning, online payments, live chats
•Information moved one way—from website to •Cloud services and mobile apps
user •Internet became powerful tool for learning anything
Example: Example:
YouTube, Facebook, Wikipedia, Instagram, WhatsApp Web,
Old websites like early Yahoo pages, newspaper
Google Docs, Online Courses.
sites, basic HTML pages.
📌 In short:
Web 1.0 = Less facilities, only read-only websites.
Web 2.0 = More facilities, interactive, user-generated content, learning
for everyone.

⭐ Single Paragraph Explanation (for notes)


Web 1.0 was the first generation of the internet with static, read-only
websites where users only consumed information. It provided very
few facilities for the public. Web 2.0 introduced interactive, dynamic,
and user-generated content, giving more facilities like social media,
online learning, sharing, comments, blogs, and collaboration tools.
Because of Web 2.0, the internet became a powerful tool for humans
to learn anything and participate actively.
Data and Web 2.0

In Web 2.0, data is the key element that drives user interaction and content sharing. Unlike Web 1.0,
where websites only displayed fixed information, Web 2.0 applications collect, process, and share data
dynamically among users.
• Key Points:
• User-Generated Data: Users create and share content such as videos, blogs, comments, and reviews.
• Dynamic Data Exchange: Data changes in real-time through web technologies like AJAX and APIs.
• Data Sharing & Collaboration: Users can collaborate online (e.g., Google Docs, Wikipedia).
• Data as a Service (DaaS): Web 2.0 applications use and provide data through web services and APIs.
• Big Data Emergence: The growth of Web 2.0 led to large amounts of data from social media and
user interactions.
• Examples:
• Facebook and Instagram → user posts and media data
• Google Docs → shared and editable online data
• YouTube → user-uploaded video data
Convergence in Web 2.0
Convergence means coming together of different technologies, media, and
communication platforms into one system.
In Web 2.0, convergence allows people to access and share data, videos, music, and
messages all in one place using the internet.
It connects computers, mobile phones, TV, and social media — so users can do many
things through a single device or app.
Key Points:
Integration of media (text, audio, video) on one platform.
Merging of communication and internet technologies.
Enables social networking, online streaming, and cloud services.
Makes information sharing faster and easier.
Examples:
Watching YouTube or Netflix on mobile phones or smart TVs.
Sharing videos, images, and messages on Facebook or Instagram.
Using smartphones for internet, gaming, and video calls together.
Web Services and Protocols
Web Services: SOAP
SOAP (Simple Object Access Protocol) is a protocol used to exchange
information between two computers or applications over the internet.
It is one of the main technologies used in Web Services for communication.
Key Points:
SOAP is based on XML (Extensible Markup Language).
It helps different applications (written in different languages or running on
different systems) communicate with each other.
Uses HTTP or SMTP to send and receive messages.
Provides a standardized format for data exchange.
Ensures security and reliability in communication.
Structure of a SOAP Message:
[Link] – Defines the start and end of the message.
[Link] – Contains optional information (like authentication).
[Link] – Contains the main data or request.
[Link] – Shows error messages if something goes wrong.

Example:
When a mobile app requests weather data from a web server, it
can use SOAP to send a request and receive an XML-based
response.
SOAP is a standard protocol that uses XML to allow different
systems to communicate securely and reliably over the web.
JSON (JavaScript Object Notation)
JSON stands for JavaScript Object Notation.
It is a lightweight data format used to store and exchange data between a
web server and a web application.
It is easy for both humans to read and computers to understand.

Key Points:
JSON is text-based and uses key–value pairs (like a dictionary).
It is commonly used in Web 2.0 and APIs for data exchange.
Works with many programming languages — not just
JavaScript.
Faster and simpler than XML.
Data is stored in { } (curly braces) and arrays in [ ].
Advantages:
•Simple and easy to use
•Fast data transfer
•Compact (takes less space)
•Language independent

JSON is a simple text format for storing and sharing data


between applications — commonly used in modern web
and mobile apps.
Building Rich Internet Applications with AJAX
AJAX stands for Asynchronous JavaScript and XML.
It is a web development technique used to build Rich Internet
Applications (RIAs) — interactive, fast, and dynamic web pages that
behave like desktop applications.

Key Idea:
AJAX allows a web page to send and receive data from the
server in the background, without reloading the entire
page.
This makes web applications faster and smoother for users.
How AJAX Works:
[Link] user performs an action (like clicking a button).
[Link] sends a request to the web server (using XMLHttpRequest).
[Link] server processes the request and sends data (in JSON or XML format).
[Link] updates part of the webpage without reloading the whole page.
Example:
When typing in Google Search, results appear instantly — that’s AJAX.
Submitting a form without page reload.
Advantages:
Faster data exchange
Improved user experience
Reduces server load
Smooth and dynamic pages
AJAX helps build Rich Internet Applications by allowing real-time data updates
on web pages without refreshing the page.
Servlets
A Servlet is a Java program that runs on a web server and
is used to create dynamic web pages.
It acts as a middle layer between the client (browser) and
the server (database or application logic).
Key Points:
•Servlets are part of Java EE (Enterprise Edition).
•They handle requests and responses between the client and server.
•Run inside a Servlet Container (like Apache Tomcat).
•Used for processing form data, interacting with databases, and
generating dynamic content (like HTML pages).
Servlet Life Cycle:
[Link]() – Called once when the servlet is created.
[Link]() – Handles each client request (GET/POST).
[Link]() – Called when the servlet is removed from memory.

Advantages:
•Platform independent (Java-based)
•Efficient and secure
•Reusable and maintainable
•Better performance than traditional CGI programs
Example:
When a user submits a login form, the request is sent to a Servlet, which checks the
credentials in a database and sends back a response page.

A Servlet is a server-side Java program used to process client requests and generate
dynamic web content.
UNIT - II: HTML5&CSS3: HTML5 Document Structure Changes, Forms, Form
elements, Video and Audio, Semantic elements, Structural elements,
Introduction to CSS3, Style inclusion methods, selectors, properties, fonts,
colors.
HTML5 Document Structure Changes

HTML5 introduced a more meaningful, semantic, and SEO-friendly structure


compared to earlier HTML versions. Instead of using many <div> tags for
layout, HTML5 gives new semantic elements that clearly describe the purpose
of parts of a webpage.
HTML5:
<!DOCTYPE html>
✔ Short
✔ Easy
✔ No DTD required
• 2. New Semantic Structural Elements
• HTML5 added semantic tags to replace meaningless <div> blocks.
Main structural elements:
• <header> – Top section, logo, navigation
• <nav> – Menu, links, navigation
• <section> – Thematic group of content
• <article> – Independent content (blog post, news item)
• <aside> – Side content (ads, sidebars)
• <footer> – Bottom section (copyright, contact info)
• <main> – Main content area
• These tags make your layout more organized and readable.
3. Removed Unnecessary Elements
HTML5 removed some old tags:
<center>
<font>
<big>
<frame> and <frameset>
<acronym>
• These are replaced by CSS styling and more modern layout techniques.
Better Multimedia Integration
HTML5 introduced native support for:
<video>
<audio>
<canvas>
<svg>
No plugins like Flash are needed.
HTML5 changed document structure by:
Introducing semantic elements (header, nav, section, article, footer)
Simplifying DOCTYPE
Removing outdated tags
Adding multimedia tags
Improving metadata
Enhancing mobile responsiveness
• HTML Forms — A form in HTML is used to collect user input and send
it to a server or process it using JavaScript.
Forms are used for:
• Login page
• Signup page
• Search box
• Feedback form
• Payment form
• Any type of data collection
HTML5 Forms
• HTML5 introduced many improvements to web forms to make them more
powerful, user-friendly, interactive, and validated without using JavaScript.
These include new input types, attributes, and form elements.
• New Input Types in HTML5
• HTML5 added many specialized input types to improve data entry and
validation: Input Type Purpose
email Accepts email format only
url Website URLs
number Numeric values with min/max
range Slider control
date Calendar date picker
time Time input
datetime-local Date + time (local)
month Month dropdown
week Week selector
color Color picker
tel Telephone number
search Search box
Important Form Elements
• <label>
• <input>
• <textarea>
• <select> & <option>
• <button>
• <datalist> HTML5 introduced new attributes that improve validation and
user experience
• <fieldset> & <legend>
Input Types
• text, email, password
• number, tel, date, time
• color, range, file
• checkbox, radio, submit, reset
HTML5 Form Attributes
HTML5 introduced new attributes that improve validation and
user experience
• placeholder
• required
• autofocus
• pattern
• min, max, step
• multiple
Advanced Elements
• <datalist> for suggestions
• <progress>
• <meter>
• <output> for calculations
• New Form Elements
• HTML5 includes additional elements that improve structure:
• Based on the context of HTML5, the "new" form elements introduced to
improve user interaction and data handling are distinct from the new input
types (like email, date, etc.).
• Here are the specific new form elements introduced in HTML5:

• 1. The New Elements


• These are the actual new tags added to the HTML syntax to handle specific
form-related functionality.
Element Description Use Case
Creating an "autocomplete"
Specifies a list of pre- feature where users can see a
<datalist> defined options for an dropdown of suggestions but still
<input> element. type their own value.
Displaying the total price instantly
<output> Represents the result of a as a user changes quantity and
calculation or user action. unit price fields.
Represents a scalar Displaying disk usage (e.g., "70%
<meter> measurement within a full") or voting results. Not for
known range (a gauge). progress.
Represents the
<progress> completion progress of a Showing a download bar or a
task. "profile completion" percentage.
Note: While present in HTML4, it
Groups related options in became more semantically
<optgroup> a drop-down list important in HTML5 for
(<select>). structuring long lists.
Distinction: New Elements vs. New Input Types
• It is common to confuse "New Elements" with "New Input Types". The
elements are the tags listed above. The types are new values for the type
attribute of the standard <input> tag.

• New Elements: <datalist>, <output>, <meter>, <progress>


• New Input Types: <input type="email">, <input type="date">, <input
type="search">, <input type="color">, <input type="range">

The new elements (like <datalist>) add entirely new behaviors to forms, while
the new types mainly help with data validation and mobile keyboard layouts
(e.g., showing a numeric keypad for type="number").
Structural Elements are HTML tags that only define the layout or structure of a page but do NOT
convey any meaning about what the content actually is.
• They are generic containers ("empty boxes").
• Their purpose is purely visual or positional.
• Before HTML5, we had to use them for everything because no better tags existed.

Element Purpose Usage

<div> Generic block-level container `<div class="header">`

<span> Generic inline container `<span


class="highlight">text</span>`

<table> for data Whole page layout with tables

<br> Force a line break `<br>` or `<br><br>` for spacing


Element Purpose Usage
<hr> Thematic break (horizontal Visual separator between
rule) sections
<center> Center content `<center>Old
websites</center>`
<font> Change font style/size/color `<font
color="red">text</font>`
<big> Make text bigger `<big>important</big>`
Removed → use CSS `font-
size`
<tt> Teletype/monospace text Old code look, Removed →
use `<code>` or CSS `font-
family`
<strike> Strikethrough `<strike>wrong</strike>`
use `<del>` or CSS `text-
decoration`
Semantic elements in HTML5 are tags that clearly describe their meaning to both the browser and
the developer. They indicate the role or purpose of the content they contain, unlike Structural tags
like <div> and <span>, which have no inherent meaning.
Using semantic HTML elements is considered a best practice for several reasons:
1. Accessibility: Assistive technologies like screen readers can better interpret and navigate the
content, improving the experience for users with disabilities.
2. SEO: Search engines can more accurately understand the content and context of the page,
potentially improving search engine rankings.
3. Readability and Maintainability: Code becomes easier for developers to read, understand, and
maintain because the structure is logical and self-describing.
Key Semantic HTML5 Elements:
HTML5 introduced several new semantic elements to define common
page structures:

Tag Purpose Example Content


<header> Defines introductory Logo, website name or
content of a page or a main heading.
section.
<nav> Defines a section Main menu, Table of
containing navigation links. Contents, or sidebar
navigation.
<main> Primary content of the The core story of a blog
page. post.

<article> Self-contained, reusable A full blog entry or a


content. complete forum post.
<h1>-<h6>, <p> Sections headings and Page titles and Normal text
Paragraph of text. blocks.
Tag Purpose Example Content
<section> Defines a thematic grouping Chapters, topics, or distinct
of content. A document is sub-sections within an
typically divided into article.
sections.

<aside> Defines content that is only Sidebar, related links, or


tangentially related to the advertisements.
content around it.

<footer> Defines a footer for the Copyright information,


document or a section. author contact details, or
related documents links.

<figure> and <figcaption> Defines self-contained An image with a descriptive


content (like an image, caption.
illustration, or diagram).
IMAGE AND VIDEO TAGS
Inserting Photos (Images):
You use the <img> tag, which is an empty element (it doesn't have a
closing tag like </img>).

Basic Code Structure: <img src=“_” alt=“_” height=“_” width=“_”>

Key Attributes:

• src (Source): This is the most essential attribute. It specifies the


URL or file path to the image file.

• alt (Alternative Text): It provides a text description of the image.

• width and height: These attributes define the dimensions of the


image in pixels.
Inserting Videos:
You use the <video> tag, which requires an opening and closing tag.

Basic Code Structure:

<video src=“_" controls></video>


While the above works, the preferred method is to use the <source>
element inside the <video> tag to offer multiple video formats for
wider compatibility:

<video controls>

<source src=“_" type="video/mp4">

<source src=“_" type="video/webm"> </video>


Key Attributes:

• src (Source): Specifies the path to the video file (when used
directly on the <video> tag).

• controls: This attribute adds the standard video controls (play,


pause, volume, fullscreen, etc.).

• autoplay: Makes the video start playing automatically when the


page loads.

• loop: Makes the video repeat when it finishes.

• muted: Silences the video by default. Often used with autoplay.

• poster: Specifies an image to show until the user hits play.


Introduction to CSS3

What is CSS3?
• CSS3 stands for Cascading Style Sheets Level 3 —
it’s the latest major version of CSS used to style and design web
pages.
• It builds upon CSS2, adding new features, modules, and visual effects
that make modern web design more powerful, flexible, and beautiful.
Main Features of CSS3
Feature Description Example
Selectors New selectors for precise styling :nth-child(), :not()
Box Model &
Layouts New layout techniques flexbox, grid, multi-column
Backgrounds
& Borders Multiple backgrounds, rounded corners border-radius, background-image
Colors &
Opacity RGBA, HSLA colors color: rgba(255, 0, 0, 0.5);
Transitions &
Animations Smooth motion effects @keyframes, transition
Media
Queries Responsive design for devices @media (max-width: 600px)
@font-face { font-family:
Web Fonts Custom fonts using @font-face 'Poppins'; }
Transformati
ons Rotate, scale, skew elements transform: rotate(45deg);
• A CSS Selector is a pattern or rule that determines which HTML elements a set
of CSS declarations will apply to.
In other words, selectors define the “target elements” on which styling must
be applied.
• Selectors form the core of the CSS selection API, enabling structured,
hierarchical, and attribute-based querying of DOM elements — similar to how
queries work in XML and XPath.
• Why Selectors Are Important?
• They provide a powerful querying mechanism to navigate the DOM tree.
• They allow styling based on structure, attributes, states, or relationships
between elements.
• They enable modular, scalable, and maintainable styling (important in large
applications).
• They reduce JavaScript dependency by allowing UI state handling
(e.g., :hover, :checked, :focus).
Selectors are the backbone of CSS. They act as queries that tell the
browser which element to style. CSS3 extended the selector mechanism
to allow more complex patterns such as attribute-based selectors,
structural selectors, and UI-state selectors.
This improves the design process, reduces code complexity, and
enhances component-based design in modern web applications.
Important point:
Selectors are used in CSS to choose or target HTML elements. They help
us apply styles to specific tags, classes, and IDs. They also reduce
complex code by avoiding repeated styling and make the CSS cleaner
and more maintainable.
Basic Selectors
These match elements directly.
Type Selector → selects elements by tag
p{}
Class Selector → reusable categorization
.btn { }
ID Selector → unique identification
#header { }
Universal Selector → selects everything
*{}
Description:
Basic selectors provide direct access to elements based on their name
or labels and help enforce consistent styling patterns.
Advantages of CSS3

• Easier to create modern, responsive web pages


Better performance and cleaner code
Richer visual effects without JavaScript
Improved browser compatibility over time
Faster updates due to modular design
• CSS3 = Modern, modular, and powerful version of CSS that makes
web design interactive, responsive, and visually appealing.
CSS Border Property
Definition:
The border property in CSS is used to set the boundary line around an HTML element — like a box or
container.
It defines the width, style, and color of the border.

The CSS border property is used to create an outline around HTML elements, and it has three main
components — border-width, border-style, and border-color — which can be combined into a single
shorthand declaration.

The border-width defines the thickness (like thin, medium, thick, or in pixels), the border-style specifies
the line pattern (such as solid, dotted, dashed, double, groove, ridge, inset, or outset), and the border-
color sets the color of the border using color names, HEX, RGB, or HSL values.

CSS also allows setting borders for individual sides (border-top, border-right, border-bottom, border-
left), and advanced features like border-radius (for rounded corners) and border-image (for using an
image as the border) were introduced in CSS3. Together, these properties help style boxes, divs, images,
and other elements for better visual appeal and layout design.
CSS Background Property
• 💡 Definition:
• The background property in CSS is used to set the background effects of an element.
It can define colors, images, gradients, positioning, repeating, and even combine all of these in one shorthand
property.
• The CSS background property controls the appearance of the area behind an element’s content and padding,
using several sub-properties.
• The background-color property sets the background color, while background-image allows you to use an
image as the background.
• You can control how the image behaves using background-repeat (to repeat horizontally, vertically, or not at
all),
• background-position (to align the image like top, center, or bottom), and
• background-attachment (to make the background fixed or scroll with the page).
• CSS3 added background-size to resize the image (like cover or contain),
• background-clip to define how far the background extends (to the border-box, padding-box, or content-box),
• background-origin to set the starting position area, and
• background-blend-mode to mix multiple backgrounds visually. All of these can be combined in a single
shorthand property like
background: #00b4db url('[Link]') no-repeat center/cover fixed;,
making it easier to apply color, image, repeat, position, size, and attachment in one line.
• A CSS gradient is a smooth color transition between two or more
colors that can be applied to the background of an element.
They are generated by the browser, so no image files are needed —
making pages faster and more flexible.

• The CSS3 gradient property is used to create smooth transitions


between colors without using image files. It includes linear gradients
(colors blend along a line), radial gradients (colors spread from a
central point), and conic gradients (colors rotate around a center).
• able to control the direction, angle, shape, and color stops, and even
create repeating patterns using repeating-linear-gradient() or
repeating-radial-gradient(). Gradients enhance modern web designs
by making dynamic, colorful, and lightweight backgrounds easily.
• CSS3 text effects are a collection of properties and techniques used to
style and decorate text — including shadows, spacing, overflow,
wrapping, alignment, and even animations — all to enhance visual appeal
and readability.

• The CSS3 text effects provide visual styling to text elements, including
properties like text-shadow for shadows, text-decoration for lines and
styles, text-transform for letter case, text-overflow and white-space for
handling overflow, and letter-spacing or word-spacing for text spacing.
CSS3 also adds advanced effects like gradient-filled text using background-
clip, and outlined text using -webkit-text-stroke. Together, these
properties enhance readability, appearance, and creativity in web
typography.
Definition:
The @font-face rule in CSS3 allows developers to load custom fonts on a
webpage instead of using only the standard system fonts (like Arial or Times
New Roman). It lets you define a font by giving it a name and linking it to a font
file (like .ttf, .woff, or .otf) stored locally or on a server.
• So even if a visitor doesn’t have that font installed on their computer, the
browser will download and display it correctly.

• The @font-face rule in CSS3 allows developers to define and use custom fonts
by linking external font files directly within a stylesheet. It specifies a font-
family name and a src path to one or more font formats such as WOFF,
WOFF2, TTF, or OTF to ensure cross-browser compatibility.
• Once defined, the font can be used like any standard font in CSS. This feature
enhances design flexibility, enabling consistent typography across all devices
and browsers, even if the user doesn’t have the font installed locally.
What are Google Fonts?
• Google Fonts is a free, open-source font library provided by Google.
It allows web developers, designers, and app developers to use
hundreds of fonts easily in websites and applications.
• ✔ 100% Free
✔ No license issues
✔ Works on any device
✔ Very easy to include using CSS
Why use Google Fonts?
• Huge collection of professional fonts
• Improves website readability and look
• Loads fast from Google CDN
• Supports multiple languages (Hindi, Telugu, Tamil, etc.)
• Highly customizable (sizes, weights, styles)
• How to Add Google Fonts to Your Website
• There are two methods:
• Method 1: Using <link> tag (Recommended)
• Method 2: Using @import in CSS
• Add this inside your .css file:
• <link rel="preconnect" href="[Link]
• <link rel="preconnect" href="[Link] crossorigin>
• <link href="[Link]
family=Poppins:wght@300;400;600&display=swap" rel="stylesheet">
• body {
• font-family: 'Poppins', sans-serif;
•}
• @import url('[Link]
family=Roboto:wght@300;400;700&display=swap');

• body {
• font-family: 'Roboto', sans-serif;
•}
Multiple fonts in CSS
• h1 { font-family: 'Poppins', sans-serif; }
• p { font-family: 'Roboto', sans-serif; }
Advantages & Disadvantages
• ✔ Advantages:
• Free and open-source
• Massive font library
• Fast loading via CDN
• Easy to use
• Supports many languages
• ✖ Disadvantages:
• Requires internet connection to load fonts
• Many variations increase page load time
• Not all fonts suitable for professional documents
• Best Google Fonts for Websites • ✔ Display / Decorative
• ✔ Sans-serif • Lobster
• Roboto • Pacifico
• Poppins • Fredoka One
• Open Sans • ✔ Monospace (Coding)
• Inter • Source Code Pro
• Lato • Roboto Mono
• ✔ Serif
• Merriweather
• Playfair Display
• Crimson Text
• <!DOCTYPE html> • h1 {
• <html> • font-weight: 600;
• <head> • }
• <link rel="preconnect" • p{
href="[Link] • font-weight: 400;
• <link rel="preconnect" • }
href="[Link] crossorigin>
• </style>
• <link
href="[Link] • </head>
family=Poppins:wght@400;600&display=swa
p" rel="stylesheet"> • <body>
• • <h1>Welcome to Google Fonts</h1>
• <style> • <p>This text is styled using the Poppins
• body { font from Google Fonts.</p>
• font-family: 'Poppins', sans-serif; • </body>
• } • </html>
2D Transform
• 2D Transform means changing the shape, size, and position of an
element on a two-dimensional plane (x-axis and y-axis).
• Transforms allow you to:
• ✔ Move (translate)
✔ Resize (scale)
✔ Rotate
✔ Skew (tilt)
✔ Apply matrix transformations
• In CSS and Graphics, transforms are applied using:
transform: ...;
3D Transforms
• 3D Transform allows you to move, rotate, scale, or change an element
in three-dimensional space:
• X-axis → Horizontal
• Y-axis → Vertical
• Z-axis → Depth (towards/away from the screen)
• 3D Transform modifies an element in three-dimensional space by
applying translation, scaling, and rotation along the X, Y, and Z axes
with depth perception.
• The resize property in CSS allows the user to manually resize an
element (mostly <div> or <text area>) using the mouse.
• ✔ Supported directions:
• Horizontal
• Vertical
• Both
• BOX RESIZING (CSS Resize Property)
• The resize property in CSS allows the user to manually resize an
element (mostly <div> or <textarea>) using the mouse.
• ✔ Supported directions:
• Horizontal
• Vertical
• Both
Box Resize allows the user to manually change the size of an element (mostly <div> or <textarea>) by
dragging its corner. This is controlled using the CSS resize property.
• Resize in Both Directions
• Allows changing width and height.
• <style>
• .box {
• width: 200px;
• height: 150px;
• border: 2px solid #000;
• padding: 10px;
• overflow: auto;
• resize: both;
• }
• </style>

• <div class="box">Resize me!</div>


• Introduction to CSS Box Model
• Definition and components: Content, Padding, Border, Margin
• How browsers calculate element dimensions
• Problems with default sizing during layout design
• Need for a controlled sizing mechanism → box-sizing
• Concept of Box Sizing
• box-sizing determines how the browser calculates the width and height of an
element.
• Controls whether padding & border are:
• Added inside width
• Added outside width
Types of Box Sizing
content-box (Default Model)
• Width = content only
• Padding + border expand the overall size
• Causes layout shifts
• Example use cases:
• When needing unconstrained content expansion
• Traditional HTML layouts
border-box (Modern Preferred Model)
• Width includes content + padding + border
• Fixed-size layouts
• Recommended for responsive web design
• Solves common layout issues
• Used in most UI libraries (Bootstrap, Tailwind, MaterialUI)
Practical Comparison Example
Case: width: 200px, padding: 20px, border: 5px

Model Total Width Explanation


content-box 200 + 40 + 10 = 250px Expands outside
border-box 200px fixed Content shrinks inside
Use Cases in Modern UI Design
• Responsive layouts (grids, cards, containers)
• Web applications with strict design systems
• Data dashboards & forms
• Mobile-first UI frameworks
Integration with Other CSS Concepts
• Interaction with:
• Flexbox
• CSS Grid
• Media queries
• Width: 100% containers
• Prevents cumulative layout shift (CLS) – important in Core
Web Vitals
• Advantages of Border-box
• More stable for research-oriented web systems
• Better for high-density UI components
• Ensures consistent rendering across browsers
• Reduces cross-browser compatibility issues
• CSS3 Animations —
• 1. Introduction to CSS Animations
• CSS3 Animations allow you to create smooth, keyframe-based
animations without JavaScript.
They control how an element changes from one style to another over
time.
• Animations consist of two main parts:
• @keyframes — Defines what happens at each stage.
• animation properties — Defines how the animation runs.
Animation Properties
Property Description

animation-name Specifies the keyframe name

animation-duration How long the animation takes

animation-timing-function Speed pattern (ease, linear, ease-in…)

animation-delay Start delay

animation-iteration-count Number of repeats (1, 3, infinite)

animation-direction normal, reverse, alternate

animation-fill-mode before/after behavior (none, forwards, backwards, both)

animation-play-state running / paused

animation Shorthand
Types of CSS Selectors
1. Basic Selectors
2. Combinator Selectors
3. Attribute Selectors
4. Pseudo-Class Selectors
5. Pseudo-Element Selectors
Short Summary
Basic: *, tag, .class, #id, group
Combinators: , >, +, ~
Attribute: [attr=value] variations
Pseudo-Class: :hover, :focus, :nth-child()
Pseudo-Element: ::before, ::after, etc.
CSS Multiple Columns (CSS3 Multi-Column Layout)
CSS Multiple Columns allow you to split text/content into multiple
columns, similar to a newspaper or magazine layout.
1. column-count
Specifies how many columns the content should be divided into.
2. column-gap
Sets the space between columns
3. column-rule
Adds a line between columns (like a border).
4. column-width
Sets the ideal width for each column. Browser adjusts number of
columns.
• 5. columns (Shorthand)
• You can combine column-count and column-width.
• 6. column-span
• Controls whether an element should span across all columns.
• 7. column-fill
• Defines how content is filled across columns.
• balance – content distributed evenly (default)
• auto – content fills columns sequentially
Converting Layout to HTML 5 & CSS
3
Why Conversion is Needed
• Improve semantic structure with HTML5 tags
• Better accessibility (screen readers, SEO)
• Cleaner, maintainable code structure
• Separation of structure and styling
Problems with Old Layouts

• Use of <div> everywhere (div soup)


• Table-based layouts are rigid and non-responsive
• Inline styles make maintenance difficult
• Poor accessibility and SEO issues
Benefits of HTML5

• Semantic tags: <header>, <nav>, <main>, <footer>


• Better content meaning and readability
• Improved browser understanding
• More SEO-friendly structure
Benefits of CSS3

• Responsive design using Flexbox and Grid


• Cleaner and faster layouts
• Animations, transitions, shadows, gradients
• Mobile-first design support
Modern Layout Techniques

• CSS Flexbox for alignment and small components


• CSS Grid for complete page layouts
• Media queries for responsive behavior
• Google Fonts, border-radius, opacity, transforms
Summary

• HTML5 + CSS3 improves performance and accessibility


• Modern layouts are responsive and mobile-friendly
• Clean and maintainable code structure
• Essential skills for modern web development
What is .NET Framework?
• A software development platform by Microsoft
• (A software development platform is a set of tools, libraries,
and services that helps developers create, run, and maintain
software applications easily)
• Provides libraries and runtime environment
• Supports multiple languages like C#, [Link], F#
• Used for building web, desktop, mobile, and enterprise apps
• A software development platform usually provides:
• 1. Tools for building applications
• Compilers
• Debuggers
• Editors
• Project templates CLR is the heart of the .NET framework.
• 2. Libraries It is like a manager that runs .NET programs and takes care of
• Ready-made code for: everything required for the program to work smoothly.
• File handling
When we write code in C#, [Link], or F#, the computer cannot
• Database access directly understand it.
• User interface The CLR acts as a middle layer that reads this code, converts it
• Web development into machine language, and executes it safely
• Networking
• 3. Runtime Environment
• A system that runs the program safely and efficiently.
For .NET → CLR (Common Language Runtime)
Compiler converts your C# code into IL code.
• 4. Support for multiple languages CLR converts that IL code into machine code and executes it.”
• C#, [Link], F#, etc. OR
“Compiler prepares the code. CLR runs the code.”
Components of .NET Framework

• CLR (Common Language Runtime)


• FCL (Framework Class Library)
• Languages (C#, [Link], F#, etc.)
• Tools for building and deploying applications
Common Language Runtime (CLR)

• Execution engine for .NET applications


• Memory management with Garbage Collection
• Exception and thread handling
• Security and code verification
Framework Class Library (FCL)

• Collection of reusable classes and APIs


• Provides support for file I/O, networking, and database access
• Includes [Link], Windows Forms, WPF libraries
• Simplifies development with ready-made components
Features of .NET Framework

• Language interoperability
• Automatic memory management
• High performance via JIT compilation
• Strong security mechanisms
• Large class library for rapid development
Architecture Overview

• Application Layer
• Framework Class Library (FCL) Layer
• Common Language Runtime (CLR) Layer
• IL Code compiled to native machine code by JIT
Execution Process

• Source code compiled to Intermediate Language (IL)


• IL stored in assemblies (.exe / .dll)
• CLR loads assemblies
• JIT converts IL to machine code
• Application runs
Applications Built With .NET

• Web apps – [Link], [Link] MVC


• Desktop apps – Windows Forms, WPF
• Mobile apps – Xamarin / .NET MAUI
• Web services and APIs – [Link] Web API
• Cloud apps – Azure
Advantages

• Fast development and deployment


• Object-oriented environment
• Automatic memory handling
• Strong security and reliability
• Consistent programming model
Limitations

• Originally Windows-only
• Heavy framework size
• Not ideal for small embedded systems
Summary

• .NET Framework combines CLR + FCL


• Supports multiple languages
• Used for building a variety of applications
• Provides performance, security, and maintainability

You might also like