Web Technology Complete Notes and Programs
This PDF contains detailed notes on Internet Basics, HTML, CSS, Forms, and JavaScript. Each topic includes
explanations, syntax, example programs, and expected output.
Unit I - Internet Basics and HTML
Internet Basics
The Internet is a global network connecting millions of computers. It allows communication and sharing of information
worldwide.
Syntax Example:
Example syntax related to Internet Basics.
Internet Domains
Domains are human-readable addresses used to identify websites such as .com, .org, and .edu.
Syntax Example:
Example syntax related to Internet Domains.
Client IP Address
An IP address uniquely identifies a device connected to the Internet.
Syntax Example:
Example syntax related to Client IP Address.
Introduction to HTML
HTML stands for HyperText Markup Language. It is used to create web pages.
Syntax Example:
Example syntax related to Introduction to HTML.
Program: Basic HTML Program
<!DOCTYPE html>
<html>
<head>
<title>My First Page</title>
</head>
<body>
<h1>Welcome to HTML</h1>
<p>This is a paragraph.</p>
</body>
</html>
Output: Displays a heading 'Welcome to HTML' and a paragraph on the webpage.
HTML Tags
HTML tags define the structure of a webpage. Paired tags have opening and closing tags while singular tags do not.
Syntax Example:
Example syntax related to HTML Tags.
Program: Basic HTML Program
<!DOCTYPE html>
<html>
<head>
<title>My First Page</title>
</head>
<body>
<h1>Welcome to HTML</h1>
<p>This is a paragraph.</p>
</body>
</html>
Output: Displays a heading 'Welcome to HTML' and a paragraph on the webpage.
Document Head and Body
The head contains metadata and title information while the body contains visible content.
Syntax Example:
Example syntax related to Document Head and Body.
Text Formatting
HTML provides tags for formatting text such as headings, paragraphs, and line breaks.
Syntax Example:
Example syntax related to Text Formatting.
Images and Colors
HTML allows adding images and applying color formatting to webpages.
Syntax Example:
Example syntax related to Images and Colors.
Unit II - Lists, Tables, Links, Frames, and CSS
Lists
HTML supports ordered, unordered, and definition lists.
Syntax Example:
Example syntax related to Lists.
Program: Basic HTML Program
<!DOCTYPE html>
<html>
<head>
<title>My First Page</title>
</head>
<body>
<h1>Welcome to HTML</h1>
<p>This is a paragraph.</p>
</body>
</html>
Output: Displays a heading 'Welcome to HTML' and a paragraph on the webpage.
Tables
Tables organize data into rows and columns.
Syntax Example:
Example syntax related to Tables.
Program: Basic HTML Program
<!DOCTYPE html>
<html>
<head>
<title>My First Page</title>
</head>
<body>
<h1>Welcome to HTML</h1>
<p>This is a paragraph.</p>
</body>
</html>
Output: Displays a heading 'Welcome to HTML' and a paragraph on the webpage.
Hyperlinks
Links connect one webpage to another.
Syntax Example:
Example syntax related to Hyperlinks.
Frames
Frames divide a browser window into multiple sections.
Syntax Example:
Example syntax related to Frames.
CSS
Cascading Style Sheets are used to style webpages.
Syntax Example:
Example syntax related to CSS.
Unit III - Forms
Forms
Forms collect user data through input elements.
Syntax Example:
Example syntax related to Forms.
Program: Basic HTML Program
<!DOCTYPE html>
<html>
<head>
<title>My First Page</title>
</head>
<body>
<h1>Welcome to HTML</h1>
<p>This is a paragraph.</p>
</body>
</html>
Output: Displays a heading 'Welcome to HTML' and a paragraph on the webpage.
Text Element
Text fields allow users to enter text.
Syntax Example:
Example syntax related to Text Element.
Password Element
Password fields hide user input.
Syntax Example:
Example syntax related to Password Element.
Checkbox and Radio Buttons
Checkboxes allow multiple selections while radio buttons allow one selection.
Syntax Example:
Example syntax related to Checkbox and Radio Buttons.
Text Area
Text areas accept multi-line input.
Syntax Example:
Example syntax related to Text Area.
Select and Option
Dropdown lists allow users to choose from options.
Syntax Example:
Example syntax related to Select and Option.
Unit IV - JavaScript
JavaScript Introduction
JavaScript adds interactivity to webpages.
Syntax Example:
Example syntax related to JavaScript Introduction.
Program: JavaScript Variables Example
<script>
let x = 10;
let y = 20;
[Link](x + y);
</script>
Output: 30
Variables and Data Types
Variables store data values used in scripts.
Syntax Example:
Example syntax related to Variables and Data Types.
Program: JavaScript Variables Example
<script>
let x = 10;
let y = 20;
[Link](x + y);
</script>
Output: 30
Functions
Functions are reusable blocks of code.
Syntax Example:
Example syntax related to Functions.
Program: JavaScript Variables Example
<script>
let x = 10;
let y = 20;
[Link](x + y);
</script>
Output: 30
Arrays
Arrays store multiple values in one variable.
Syntax Example:
Example syntax related to Arrays.
Program: JavaScript Variables Example
<script>
let x = 10;
let y = 20;
[Link](x + y);
</script>
Output: 30
Conditions and Loops
Conditions control decisions while loops repeat tasks.
Syntax Example:
Example syntax related to Conditions and Loops.
Objects
Objects store properties and methods.
Syntax Example:
Example syntax related to Objects.
JSON
JSON is a format for storing and exchanging data.
Syntax Example:
Example syntax related to JSON.
Closures
Closures allow functions to access variables from outer scopes.
Syntax Example:
Example syntax related to Closures.
Detailed HTML and JavaScript Programs
Basic HTML Program
<!DOCTYPE html>
<html>
<head>
<title>My First Page</title>
</head>
<body>
<h1>Welcome to HTML</h1>
<p>This is a paragraph.</p>
</body>
</html>
Output: Displays a heading 'Welcome to HTML' and a paragraph on the webpage.
HTML List Example
<html>
<body>
<h2>Ordered List</h2>
<ol>
<li>Apple</li>
<li>Banana</li>
</ol>
</body>
</html>
Output: Displays a numbered list containing Apple and Banana.
HTML Table Example
<html>
<body>
<table border='1'>
<tr>
<th>Name</th>
<th>Age</th>
</tr>
<tr>
<td>John</td>
<td>20</td>
</tr>
</table>
</body>
</html>
Output: Displays a table with Name and Age columns.
HTML Form Example
<html>
<body>
<form>
Name: <input type='text'><br><br>
Password: <input type='password'><br><br>
<input type='submit'>
</form>
</body>
</html>
Output: Displays a form with name field, password field, and submit button.
JavaScript Variables Example
<script>
let x = 10;
let y = 20;
[Link](x + y);
</script>
Output: 30
JavaScript Function Example
<script>
function greet(name){
return "Hello " + name;
}
[Link](greet("Garima"));
</script>
Output: Hello Garima
JavaScript Loop Example
<script>
for(let i=1; i<=5; i++){
[Link](i + "<br>");
}
</script>
Output: Displays numbers from 1 to 5.
JavaScript Array Example
<script>
let fruits = ["Apple", "Banana", "Mango"];
[Link](fruits[1]);
</script>
Output: Banana