1.
Explain HTML in detail
HTML (HyperText Markup Language) is the standard markup language used for creating web
pages. It describes the structure and layout of a web document by using a system of tags
and attributes. HTML allows text, images, links, tables, forms, and multimedia to be
displayed in a web browser.
HTML works on a tag-based structure, where each tag performs a specific function. HTML
documents are saved with .html or .htm extension and are interpreted by web browsers
such as Chrome, Firefox, and Edge.
HTML is platform independent and works along with CSS for styling and JavaScript for
interactivity. The latest version, HTML5, supports modern features like audio, video, and
semantic elements.
2. Explain the structure of an HTML document
An HTML document follows a predefined structure to ensure proper display in browsers.
<!DOCTYPE html>
<html>
<head>
<title>My Page</title>
</head>
<body>
Welcome to HTML
</body>
</html>
Explanation
<!DOCTYPE html> declares the document type and version
<html> is the root element
<head> contains metadata such as title, character set, and styles
<title> specifies the page title
<body> contains visible content like text, images, and links
This structure helps browsers correctly interpret and render web pages.
3. Explain HTML tags and elements
HTML tags are keywords enclosed within angle brackets < > used to define elements on a
web page. Most tags come in pairs: opening and closing tags.
Example:
<p>This is a paragraph</p>
An HTML element consists of:
Opening tag
Content
Closing tag
Some tags are empty tags, such as <br> and <img>, which do not require a closing tag.
4. Explain different types of HTML tags
HTML tags are classified into different categories:
1. Paired Tags
Require opening and closing tags
Example: <p>, <h1>, <body>
2. Unpaired (Empty) Tags
Do not have closing tags
Example: <br>, <hr>, <img>
3. Block-level Tags
Start on a new line
Example: <div>, <p>, <h1>
4. Inline Tags
Do not start on a new line
Example: <span>, <a>, <b>
5. Explain HTML attributes with examples
Attributes provide additional information about HTML elements. They are written inside the
opening tag and usually come in name-value pairs.
Example:
<img src="[Link]" alt="My Photo" width="200">
Common Attributes
src – specifies source
href – hyperlink reference
alt – alternative text
id – unique identification
class – grouping elements
6. Explain HTML headings, paragraphs, and formatting tags
Headings
HTML provides six heading tags <h1> to <h6>. <h1> is the most important heading and <h6>
is the least.
Paragraph
The <p> tag defines a paragraph. It automatically adds space before and after the content.
Formatting Tags
<b> – bold text
<i> – italic text
<u> – underline
<strong> – strong importance
<em> – emphasized text
7. Explain HTML links and images
HTML Links
Links are created using the <a> tag and allow navigation between web pages.
<a href="[Link] Site</a>
Types:
Internal links
External links
Email links
HTML Images
Images enhance the appearance of web pages.
<img src="[Link]" alt="Sample Image">
Attributes:
src
alt
width
height
8. Explain HTML lists in detail
HTML supports three types of lists:
Ordered List
Displays numbered items.
<ol>
<li>HTML</li>
</ol>
Unordered List
Displays bullet points.
<ul>
<li>CSS</li>
</ul>
Description List
Defines terms and descriptions.
<dl>
<dt>HTML</dt>
<dd>Markup Language</dd>
</dl>
9. Explain HTML tables with example
HTML tables organize data in rows and columns.
<table border="1">
<tr>
<th>Subject</th>
<th>Marks</th>
</tr>
<tr>
<td>HTML</td>
<td>80</td>
</tr>
</table>
Table Tags
<table> – creates table
<tr> – table row
<th> – header cell
<td> – data cell
10. Explain HTML forms in detail
HTML forms collect user input and send it to the server.
<form method="post">
Name: <input type="text"><br>
<input type="submit">
</form>
Form Controls
Textbox
Password
Radio button
Checkbox
Submit button
Form Methods
GET
POST
Forms are widely used in login pages, registration forms, and feedback forms.
11. Advantages and limitations of HTML
Advantages
Easy to learn
Platform independent
Free and open standard
Browser supported
Limitations
Cannot perform logic
Static content only
Needs CSS and JavaScript for advanced features
12. Applications of HTML
Website creation
Web application UI
Online forms
Multimedia display
CSS (Cascading Style Sheets)
1. Introduction to CSS
CSS (Cascading Style Sheets) is a style sheet language used to describe the presentation of
HTML documents. It controls how web pages look, including layout, colors, fonts, spacing,
and responsiveness.
Why CSS is used
Separates content (HTML) from design (CSS)
Makes websites more attractive and user-friendly
Saves time by applying styles to multiple pages
Improves website performance and maintainability
2. Types of CSS
CSS can be applied in three different ways:
a) Inline CSS
Written directly inside an HTML tag using the style attribute.
Affects only that single element.
Example:
<p style="color: red; font-size: 16px;">Hello World</p>
Advantages: Quick and simple
Disadvantages: Not reusable, difficult to manage
b) Internal CSS
Written inside the <style> tag within the <head> section.
Applies styles to a single webpage.
Example:
<style>
p{
color: blue;
}
</style>
Advantages: Better than inline
Disadvantages: Not suitable for large websites
c) External CSS
Written in a separate .css file and linked to HTML.
Most commonly used method.
Example:
<link rel="stylesheet" href="[Link]">
Advantages: Reusable, clean, easy maintenance
Disadvantages: Requires an extra file
3. CSS Syntax
CSS consists of selectors and declarations.
Syntax:
selector {
property: value;
Example:
h1 {
color: green;
font-size: 24px;
Selector: HTML element to style
Property: What to change
Value: How to change it
4. CSS Selectors
Selectors are used to target HTML elements.
a) Element Selector
p{
color: black;
b) ID Selector
Uses #
ID must be unique
#main {
background-color: yellow;
c) Class Selector
Uses .
.box {
border: 1px solid black;
d) Group Selector
h1, h2, p {
color: red;
5. CSS Styling
CSS styling refers to applying visual effects such as:
Font size and family
Text alignment
Colors
Layout adjustments
Example:
p{
font-family: Arial;
text-align: center;
6. CSS Comments
Comments are used to explain code and are ignored by browsers.
Syntax:
/* This is a CSS comment */
Purpose:
Improves readability
Helps in debugging
Useful for documentation
7. CSS Colors
Colors can be applied in different ways:
a) Color Names
color: red;
b) Hexadecimal
color: #ff0000;
c) RGB
color: rgb(255, 0, 0);
8. CSS Backgrounds
Used to set background effects.
Background properties
background-color
background-image
background-repeat
background-position
Example:
body {
background-color: lightblue;
9. CSS Borders
Borders are used to create lines around elements.
Border properties
border-width
border-style
border-color
Example:
div {
border: 2px solid black;
10. CSS Margin
Margin controls the outer space around elements.
Example:
p{
margin: 20px;
Types:
margin-top
margin-right
margin-bottom
margin-left
11. CSS Padding
Padding controls the inner space between content and border.
Example:
div {
padding: 15px;
Difference between Margin and Padding
Margin Padding
Space outside element Space inside element
Transparent Increases element size
12. Advantages of CSS
Easy website design changes
Faster page loading
Consistent design across pages
Better control over layout
JavaScript – Very Detailed Notes (BSc I Semester – Introduction to Web Technology)
1. Introduction to JavaScript
1.1 What is JavaScript?
JavaScript (JS) is a high-level, interpreted, object-based, client-side scripting language
primarily used to make web pages interactive, dynamic, and responsive. It runs inside the
user's web browser and can manipulate:
HTML (structure)
CSS (style)
Browser behavior
JavaScript was created in 1995 by Brendan Eich at Netscape and was originally called
Mocha, then LiveScript, and finally renamed to JavaScript.
Note: JavaScript is not related to Java. They are completely different languages.
2. Uses of JavaScript
JavaScript is used for:
Form validation
Creating dynamic web content
Handling events (click, mouse move, key press)
Animations and effects
Web games
Creating web applications
Communicating with servers (AJAX, APIs)
Examples:
Showing alert messages
Validating login forms
Changing images dynamically
Displaying time and date
3. Types of JavaScript
3.1 Client-Side JavaScript
Runs in the browser
Used to control web pages
Example: form validation, animations
3.2 Server-Side JavaScript
Runs on the server
Used for backend development
Example: [Link]
4. JavaScript in HTML
4.1 Ways to Add JavaScript
(A) Inline JavaScript
<button onclick="alert('Hello World')">Click Me</button>
(B) Internal JavaScript
<script>
alert("Hello from JavaScript");
</script>
(C) External JavaScript
<script src="[Link]"></script>
5. Variables in JavaScript
5.1 What is a Variable?
A variable is a container used to store data values.
5.2 Declaring Variables
var name = "Ram";
let age = 20;
const pi = 3.14;
5.3 Types of Variables
Keyword Scope Can Reassign Can Redeclare
var Global/Function Yes Yes
let Block Yes No
const Block No No
6. Scope of Variables
6.1 Global Scope
Declared outside a function and accessible anywhere.
var x = 10;
function show() {
[Link](x);
6.2 Local Scope
Declared inside a function.
function test() {
let y = 5;
6.3 Block Scope
Used inside {} blocks (if, loops)
if (true) {
let z = 20;
7. Data Types in JavaScript
7.1 Primitive Data Types
Number
String
Boolean
Undefined
Null
BigInt
Symbol
7.2 Non-Primitive Data Type
Object
Example
let num = 10;
let name = "Amit";
let status = true;
let x;
let y = null;
8. Operators
8.1 Arithmetic Operators
Operator Meaning
+ Addition
- Subtraction
* Multiplication
/ Division
% Modulus
8.2 Comparison Operators
Operator Meaning
== Equal
Operator Meaning
=== Strict Equal
!= Not Equal
> Greater
< Less
8.3 Logical Operators
Operator Meaning
&& AND
! NOT
9. Conditional Statements
9.1 if Statement
if (age > 18) {
[Link]("Eligible to vote");
9.2 if-else Statement
if (age >= 18) {
[Link]("Adult");
} else {
[Link]("Minor");
9.3 else-if Ladder
if (marks >= 90) {
grade = "A";
} else if (marks >= 75) {
grade = "B";
} else {
grade = "C";
9.4 Switch Statement
let day = 1;
switch(day) {
case 1: [Link]("Monday"); break;
case 2: [Link]("Tuesday"); break;
default: [Link]("Invalid Day");
10. Loops
10.1 for Loop
for (let i = 1; i <= 5; i++) {
[Link](i);
10.2 while Loop
let i = 1;
while (i <= 5) {
[Link](i);
i++;
10.3 do-while Loop
let i = 1;
do {
[Link](i);
i++;
} while (i <= 5);
11. break and continue
break
Stops the loop.
for (let i = 1; i <= 10; i++) {
if (i == 5) break;
[Link](i);
continue
Skips the current iteration.
for (let i = 1; i <= 5; i++) {
if (i == 3) continue;
[Link](i);
12. Functions
12.1 What is a Function?
A function is a block of reusable code.
12.2 Function Declaration
function greet() {
[Link]("Hello");
12.3 Function with Parameters
function add(a, b) {
return a + b;
12.4 Function Expression
let sum = function(a, b) {
return a + b;
};
13. Objects
13.1 What is an Object?
An object stores data in key-value pairs.
Example
let student = {
name: "Ravi",
age: 20,
course: "BSc"
};
Accessing Object Properties
[Link]([Link]);
[Link](student["age"]);
14. Arrays
Creating an Array
let fruits = ["Apple", "Banana", "Mango"];
Accessing Elements
[Link](fruits[0]);
Array Methods
push()
pop()
length
15. JavaScript Events
Common Events
onclick
onmouseover
onkeyup
onload
Example
<button onclick="show()">Click</button>
<script>
function show() {
alert("Button Clicked");
</script>
16. JavaScript Form Validation
Example
<form onsubmit="return validate()">
<input type="text" id="name">
<input type="submit">
</form>
<script>
function validate() {
let name = [Link]("name").value;
if (name == "") {
alert("Name is required");
return false;
</script>
17. JavaScript Number Methods
parseInt()
parseFloat()
toFixed()
18. DOM (Document Object Model)
What is DOM?
The DOM is a programming interface that represents the HTML document as a tree
structure.
Accessing Elements
[Link]("id");
[Link]("class");
[Link]("p");
19. JavaScript Timing Functions
setTimeout()
setInterval()
Example
setTimeout(function() {
alert("Hello after 2 seconds");
}, 2000);
20. Exception Handling
try-catch
try {
let x = y + 10;
} catch (error) {
[Link](error);
21. Advantages of JavaScript
Easy to learn
Runs in browser
Makes websites interactive
Reduces server load
22. Disadvantages of JavaScript
Security issues
Browser compatibility problems
Client-side execution
23. Interview & Exam Important Questions
1. Define JavaScript
2. Difference between var, let and const
3. Explain scope of variables
4. What is DOM?
5. Explain form validation
6. Explain break and continue
7. What are functions?
24. Short Notes Section
JavaScript Engine
Executes JavaScript code inside browser
Hoisting
Moving declarations to the top
Strict Mode
"use strict";
25. Summary
JavaScript is a powerful scripting language used to create interactive and dynamic websites.
It supports variables, functions, objects, loops, conditions, form validation, DOM
manipulation, and event handling.
1. Introduction to PHP
1.1 What is PHP?
PHP stands for PHP: Hypertext Preprocessor. It is a server-side scripting language used to
create dynamic and interactive websites. PHP scripts are executed on the server, and the
result (HTML output) is sent to the user's browser.
Unlike HTML and JavaScript which run in the browser, PHP runs on the web server.
1.2 History of PHP
Created by Rasmus Lerdorf in 1994
Originally called Personal Home Page Tools
Later renamed as PHP: Hypertext Preprocessor
1.3 Features of PHP
Open source and free
Easy to learn
Platform independent
Supports databases (MySQL, Oracle, PostgreSQL, etc.)
Fast and secure
Can be embedded inside HTML
2. How PHP Works
1. User requests a PHP page from browser
2. Request goes to web server
3. PHP code is executed on server
4. Server sends back HTML output
5. Browser displays the result
3. Setting Up PHP Environment
3.1 Requirements
Web Server (Apache)
PHP
Database (MySQL)
3.2 Popular Packages
XAMPP
WAMP
LAMP
4. PHP Syntax
4.1 Basic Structure
<?php
echo "Hello World";
?>
4.2 PHP Tags
<?php – Opening tag
?> – Closing tag
5. Comments in PHP
Single-line Comments
// This is a comment
# This is also a comment
Multi-line Comments
/*
This is a
multi-line comment
*/
6. Variables in PHP
6.1 Declaring Variables
Variables start with $ sign.
$name = "Rahul";
$age = 20;
6.2 Rules for Variables
Must start with $
Cannot start with number
Case-sensitive
7. Data Types in PHP
7.1 Primitive Data Types
String
Integer
Float
Boolean
7.2 Complex Data Types
Array
Object
7.3 Special Data Types
NULL
Resource
Example
$text = "Hello";
$num = 10;
$price = 99.99;
$status = true;
8. Operators in PHP
8.1 Arithmetic Operators
Operator Meaning
+ Addition
- Subtraction
* Multiplication
/ Division
% Modulus
8.2 Assignment Operators
Operator Example
= $a = 10
+= $a += 5
8.3 Comparison Operators
Operator Meaning
== Equal
!= Not equal
> Greater than
< Less than
8.4 Logical Operators
Meanin
Operator
g
&& AND
OR
! NOT
9. Control Structures
9.1 if Statement
if ($age >= 18) {
echo "Eligible to vote";
9.2 if-else Statement
if ($marks >= 40) {
echo "Pass";
} else {
echo "Fail";
9.3 else-if Ladder
if ($marks >= 90) {
echo "Grade A";
} elseif ($marks >= 70) {
echo "Grade B";
} else {
echo "Grade C";
9.4 switch Statement
$day = 1;
switch($day) {
case 1: echo "Monday"; break;
case 2: echo "Tuesday"; break;
default: echo "Invalid";
10. Loops in PHP
10.1 for Loop
for ($i = 1; $i <= 5; $i++) {
echo $i;
10.2 while Loop
$i = 1;
while ($i <= 5) {
echo $i;
$i++;
10.3 do-while Loop
$i = 1;
do {
echo $i;
$i++;
} while ($i <= 5);
10.4 foreach Loop
$colors = array("Red", "Green", "Blue");
foreach ($colors as $color) {
echo $color;
11. Functions in PHP
11.1 User-defined Functions
function greet() {
echo "Hello User";
11.2 Function with Parameters
function add($a, $b) {
return $a + $b;
12. Arrays in PHP
12.1 Indexed Array
$fruits = array("Apple", "Banana", "Mango");
12.2 Associative Array
$student = array("name" => "Amit", "age" => 20);
12.3 Multidimensional Array
$marks = array(
array(10, 20),
array(30, 40)
);
13. Forms in PHP
13.1 GET Method
<form method="get" action="[Link]">
<input type="text" name="name">
<input type="submit">
</form>
<?php
echo $_GET["name"];
?>
13.2 POST Method
<form method="post" action="[Link]">
<input type="text" name="name">
<input type="submit">
</form>
<?php
echo $_POST["name"];
?>
14. Super Global Variables
$_GET
$_POST
$_REQUEST
$_SERVER
$_SESSION
$_COOKIE
$_FILES
15. File Handling in PHP
Reading a File
$file = fopen("[Link]", "r");
Writing a File
$file = fopen("[Link]", "w");
fwrite($file, "Hello");
16. Exception Handling
try-catch
try {
if (!file_exists("[Link]")) {
throw new Exception("File not found");
} catch (Exception $e) {
echo $e->getMessage();
17. Sessions and Cookies
Sessions
session_start();
$_SESSION["user"] = "Admin";
Cookies
setcookie("user", "Admin", time() + 3600);
18. Database Connectivity (MySQL)
Steps
1. Connect to database
2. Create database
3. Create table
4. Insert data
5. Fetch data
Connection Example
$conn = mysqli_connect("localhost", "root", "", "test");
Insert Data
$sql = "INSERT INTO students VALUES ('Amit', 20)";
mysqli_query($conn, $sql);
19. PHP Security
Use htmlspecialchars()
Validate form inputs
Use prepared statements
20. Advantages of PHP
Open source
Easy to use
Platform independent
Supports many databases
21. Disadvantages of PHP
Slower than some languages
Security issues if not coded properly
22. Important Exam Questions
1. Define PHP
2. Explain GET and POST
3. What are super globals?
4. Explain sessions and cookies
5. Explain database connectivity
6. What are arrays in PHP?
23. Short Notes
PHP Parser
Reads and executes PHP code
MVC
Model View Controller architecture
Header Function
header("Location: [Link]");
24. Viva Questions
What is PHP?
Difference between GET and POST
What is a session?
What is a cookie?
What is a database?
25. Summary
PHP is a powerful server-side scripting language used to build dynamic websites. It supports
variables, loops, functions, forms, sessions, cookies, file handling, and database connectivity.
XML & JSON – Proper and Detailed Notes
BSc I Semester – Introduction to Web Technology (E1UA109B)
1. Introduction to Data Representation on the Web
In web technology, data must be stored, transferred, and displayed in a structured format
so that both humans and machines can understand it. Two of the most popular formats for
this purpose are:
XML (eXtensible Markup Language)
JSON (JavaScript Object Notation)
These formats are widely used for:
Web services
APIs
Data exchange between client and server
Configuration files
Database communication
PART A – XML (eXtensible Markup Language)
2. Introduction to XML
2.1 What is XML?
XML stands for eXtensible Markup Language. It is a markup language designed to store and
transport data in a structured, human-readable and machine-readable format.
Unlike HTML, which is used to display data, XML is used to store and carry data.
2.2 Features of XML
Platform independent
Self-descriptive
Extensible (users can define their own tags)
Supports Unicode
Hierarchical (tree structure)
Easy to read and write
2.3 Applications of XML
Web services (SOAP)
Data exchange between applications
Configuration files
Office file formats (DOCX, XLSX)
RSS feeds
3. XML Structure
3.1 Basic Syntax Rules
1. Every XML document must have one root element
2. All tags must be properly closed
3. Tags are case-sensitive
4. Elements must be properly nested
5. Attribute values must be in quotes
3.2 Example of XML Document
<?xml version="1.0" encoding="UTF-8"?>
<students>
<student>
<name>Rahul</name>
<age>20</age>
<course>BSc</course>
</student>
<student>
<name>Amit</name>
<age>21</age>
<course>BCA</course>
</student>
</students>
4. XML Declaration
<?xml version="1.0" encoding="UTF-8"?>
Explanation
version → XML version
encoding → Character encoding
5. XML Elements and Attributes
5.1 XML Elements
Elements are defined by start and end tags.
<name>Ravi</name>
5.2 XML Attributes
Attributes provide additional information about elements.
<student id="101">
<name>Ravi</name>
</student>
6. XML Namespaces
Namespaces are used to avoid name conflicts in XML documents.
Example
<root xmlns:h="[Link]
<h:table>
<h:tr>
<h:td>Data</h:td>
</h:tr>
</h:table>
</root>
7. XML Tree Structure
XML documents follow a tree structure:
Root
Parent
Child
Siblings
Example
<college>
<student>
<name>Ravi</name>
</student>
</college>
8. XML Validation
Validation ensures that an XML document follows specific rules.
Types of Validation
8.1 DTD (Document Type Definition)
Defines structure and rules.
Example:
<!DOCTYPE students [
<!ELEMENT students (student*)>
<!ELEMENT student (name, age, course)>
<!ELEMENT name (#PCDATA)>
<!ELEMENT age (#PCDATA)>
<!ELEMENT course (#PCDATA)>
]>
8.2 XSD (XML Schema Definition)
More powerful than DTD, supports data types.
9. XML Display
XML does not have built-in display features. It is displayed using:
CSS
XSL (eXtensible Stylesheet Language)
10. XSLT (XML Stylesheet Transformation)
XSLT is used to transform XML into HTML or another format.
Example
<xsl:stylesheet version="1.0" xmlns:xsl="[Link]
<xsl:template match="/">
<html>
<body>
<h2>Student List</h2>
</body>
</html>
</xsl:template>
</xsl:stylesheet>
11. Advantages of XML
Platform independent
Extensible
Easy data sharing
Supports validation
12. Disadvantages of XML
Larger file size
Slower processing
Complex syntax
PART B – JSON (JavaScript Object Notation)
13. Introduction to JSON
13.1 What is JSON?
JSON stands for JavaScript Object Notation. It is a lightweight data interchange format used
for storing and transferring data between server and client.
It is easier to read and write compared to XML.
13.2 Features of JSON
Lightweight
Easy to parse
Language independent
Human-readable
Faster than XML
14. JSON Syntax Rules
1. Data is written in key-value pairs
2. Data is separated by commas
3. Objects are enclosed in {}
4. Arrays are enclosed in []
5. Keys must be in double quotes
15. JSON Data Types
String
Number
Boolean
Array
Object
Null
16. JSON Example
"students": [
"name": "Rahul",
"age": 20,
"course": "BSc"
},
"name": "Amit",
"age": 21,
"course": "BCA"
}
17. JSON Objects and Arrays
JSON Object
"name": "Ravi",
"age": 22
JSON Array
["Red", "Green", "Blue"]
18. JSON in JavaScript
Converting JSON to JavaScript Object
let obj = [Link](jsonData);
Converting JavaScript Object to JSON
let jsonData = [Link](obj);
19. JSON vs XML (Comparison)
Feature XML JSON
Format Tag-based Key-value
Size Large Small
Speed Slow Fast
Readability Medium High
Parsing Complex Easy
20. Display and Transform
XML Display
CSS
XSLT
JSON Display
JavaScript
APIs
21. Applications of JSON
REST APIs
Web services
Mobile apps
Database communication
22. Advantages of JSON
Lightweight
Faster transmission
Easy to use
23. Disadvantages of JSON
No comments support
Less secure
Limited data types
24. Important Exam Questions
1. Define XML
2. Difference between XML and JSON
3. Explain XML structure
4. What is XSLT?
5. Define JSON
6. Explain [Link]() and [Link]()
25. Short Notes
Well-Formed XML
XML that follows syntax rules
Valid XML
XML that follows DTD or XSD
API
Application Programming Interface
26. Viva Questions
What is XML?
What is JSON?
Which is faster: XML or JSON?
What is XSLT?
What is a root element?
27. Summary
XML and JSON are important data formats for web development. XML is powerful and
structured, while JSON is lightweight and faster. Both are widely used in APIs, data exchange,
and modern web applications.
