GE4b: Introduction to Web Programming
NEP UGCF 2022 Effective from AY 2024–25
Credits: 4 Lecture: 3 | Tutorial: 0 | Practical: 1
Eligibility Pass in Class XII | Pre-requisite: NIL
Learning Outcomes
✓ Build websites using HTML elements
✓ Build dynamic websites using CSS, JavaScript, and jQuery
✓ Validate client-side data using JavaScript
GE4b — Introduction to Web Programming | NEP UGCF 2022 Page 1
UNIT 1 Introduction to the Internet & Web Design 5 Hours
1.1 Internet vs. World Wide Web
Term Definition
Internet Worldwide physical infrastructure — networks of computers linked via cables, fibre, satellite, radio
World Wide Web A service running on the Internet — collection of linked webpages stored on web servers
Webpage An HTML document displayed in a browser
Website A collection of related webpages; has a home page as its entry point
Hyperlink Element connecting one page to another; enables non-linear navigation
1.2 Protocols
Protocol Full Form Purpose
HTTP / HTTPS HyperText Transfer Protocol (Secure) Exchange webpages on the web
FTP File Transfer Protocol Transfer files between computers over the Internet
TCP Transmission Control Protocol Breaks data into packets; reassembles at destination
IP Internet Protocol Routes each packet to the correct address
DNS Domain Name System Maps domain names ([Link]) → IP addresses ([Link])
A typical URL structure: [Link]
1.3 Types of Websites
Type Description
Internet Site Publicly accessible to anyone with an Internet connection
Intranet Private network (Internet tech) accessible only within an organization
Extranet Private network shared with select corporate partners / key customers
E-commerce Buying and selling goods/services online (e.g., Wayfair, Amazon)
LMS Learning Management System — web-based software for course management
Blog (Weblog) Personal site reflecting the author's viewpoint on a topic
Social Media Sites for sharing info, photos, videos (Facebook, LinkedIn, Twitter)
1.4 Planning a Website
Before building, answer: Purpose, Audience, Computing Environment, Design Components.
• Wireframe — A simple sketch showing the layout/structure of a webpage before actual design.
• Site Map — Diagram showing how all pages of a website connect to each other.
• Accessibility — Design for users with disabilities (e.g., alt text, keyboard navigation).
• Multiplatform — Ensure site works on desktop, tablet, and mobile devices.
1.5 HTML Basics
GE4b — Introduction to Web Programming | NEP UGCF 2022 Page 2
HTML (HyperText Markup Language) is the standard language for creating webpages. HTML5 (v5.2, released
2017) is the current standard. It introduces semantic elements like <header>, <nav>, <main>, <footer>.
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<!-- Page content here -->
</body>
</html>
Note: Always begin with . Use lowercase tags, close all tags, quote all attribute values.
GE4b — Introduction to Web Programming | NEP UGCF 2022 Page 3
12
UNIT 2 HTML Hours
2.1 Image File Formats
Format Colors Transparency Animation Best For
GIF 256 (8-bit) Yes Yes Icons, line art, animations
PNG 16M+ (PNG24) Yes No Web graphics, logos, screenshots
JPG / JPEG Millions No No Photographs (lossy compression)
SVG Vector (unlimited) Yes Yes Logos, icons (scales perfectly)
2.2 The <img> Tag
<img src="[Link]" alt="Company Logo" width="200" height="100">
Attribute Purpose
src File path or URL of the image
alt Alternative text — shown if image fails; required for accessibility
width / height Dimensions in pixels
2.3 Hyperlinks
<a href="[Link]">Relative Link</a>
<a href="[Link] Link</a>
<a href="#section1">Bookmark / Anchor Link</a>
<a href="[Link] Link</a>
<a href="[Link] Link</a>
2.4 HTML Lists
List Type Tag Example Output
Ordered (numbered) <ol> + <li> 1. Item 2. Item
Unordered (bulleted) <ul> + <li> • Item • Item
Description <dl> + <dt> + <dd> Term → Definition
2.5 HTML Tables
<table border="1">
<caption>Table Title</caption>
<tr>
<th>Header 1</th> <!-- Bold, centered -->
<th>Header 2</th>
GE4b — Introduction to Web Programming | NEP UGCF 2022 Page 4
</tr>
<tr>
<td>Data</td>
<td colspan="2">Spans 2 cols</td>
</tr>
</table>
• colspan — spans element across multiple columns
• rowspan — spans element across multiple rows
• cellpadding — space inside each cell; cellspacing — space between cells
2.6 HTML Forms
<form method="POST" action="[Link]">
<input type="text" name="username" placeholder="Enter name">
<input type="password" name="pwd">
<input type="radio" name="gender" value="male"> Male
<input type="checkbox" name="agree" value="yes"> I agree
<select name="city">
<option value="delhi">Delhi</option>
</select>
<textarea name="comments" rows="4" cols="40"></textarea>
<input type="submit" value="Submit">
<input type="reset" value="Reset">
</form>
2.7 HTML5 Semantic Tags
Tag Purpose
<header> Page or section header
<nav> Navigation links area
<main> Primary content of the page
<section> Thematic grouping of content
<article> Self-contained, independently distributable content
<footer> Page or section footer
<figure> / <figcaption> Self-contained media with caption
<details> / <summary> Expandable/collapsible content section
GE4b — Introduction to Web Programming | NEP UGCF 2022 Page 5
UNIT 3 Cascading Style Sheets (CSS) 8 Hours
3.1 Types of CSS & Precedence
Type Location Scope Syntax
Inline Inside HTML start tag Single element <p style="color:red;">
Embedded (Internal) <style> in <head> Single webpage <style> body { } </style>
External (Linked) Separate .css file Entire website <link rel="stylesheet" href="[Link]">
Note: Precedence: Inline > Embedded > External. More specific selectors override less specific ones (specificity).
Child elements inherit parent properties (inheritance).
3.2 CSS Syntax & Selectors
selector {
property: value; /* declaration */
/* Examples */
body { background-color: #f0f0f0; } /* Element selector */
.highlight { color: red; } /* Class selector */
#header { font-size: 24px; } /* ID selector */
h1, h2 { color: navy; } /* Multiple */
div p { margin: 10px; } /* Descendant */
3.3 Text & Font Properties
Property Description Example Value
font-family Font name (use font stack for fallbacks)
Cambria, "Times New Roman", serif
font-size Size of text 1.5em | 14px | 12pt | 50%
font-weight Thickness bold | bolder | lighter
font-style Italic/normal italic | oblique | normal
text-align Horizontal alignment center | right | justify
color Text color navy | #ff0000 | rgb(255,0,0)
text-decoration Underline etc. underline | none | overline
Unit Description Recommended?
em Relative to current element's font size (1em = 100%) Yes (W3C)
% Relative to default font size Yes (W3C)
px Absolute pixels (depends on screen resolution) Fixed layouts
pt Points — use for print stylesheets Printing only
GE4b — Introduction to Web Programming | NEP UGCF 2022 Page 6
3.4 CSS Box Model
Every HTML element is a rectangular box with four layers:
div {
content (inner text/image)
padding: 15px; /* space between content and border */
border: 2px solid black;
margin: 10px; /* space outside border between elements */
width: 300px;
3.5 CSS Colors
Format Example Notes
Color name color: red; 16 basic names; see w3schools for full list
Hex code color: #ff0000; #RRGGBB — 6 hex digits
RGB color: rgb(255,0,0); R, G, B values 0–255
3.6 Styling Lists & Working with Blocks
ul { list-style-type: disc; } /* disc | circle | square | none */
ol { list-style-type: decimal; } /* lower-alpha | upper-roman | ... */
/* Layout */
.container { display: flex; } /* flexible layout */
.item { display: none; } /* hide element */
GE4b — Introduction to Web Programming | NEP UGCF 2022 Page 7
10
UNIT 4 JavaScript Hours
4.1 What is JavaScript?
JavaScript is a lightweight, interpreted, client-side scripting language that runs directly in the browser — no server
needed. It makes webpages interactive and dynamic via the DOM.
<!-- In body --> <!-- In head --> <!-- External file -->
<script> <head> <script src="[Link]">
[Link]("Hi") <script>...</script> </script>
</script> </head>
4.2 Variables & Data Types
var name = "Alice"; // function-scoped (older style)
let age = 20; // block-scoped (preferred)
const PI = 3.14; // constant — cannot be reassigned
// Data Types
let num = 42; // Number
let text = "Hello"; // String
let valid = true; // Boolean
let empty = null; // Null
let undef; // Undefined
4.3 Operators
Category Operators Key Notes
Arithmetic + - * / % ++ -- % = modulus (remainder)
Assignment = += -= *= /= %= j += 2 means j = j + 2
Comparison == != > < >= <= === !== === checks value AND type; == checks value only
Logical && || ! && = AND || = OR ! = NOT
String concat + "Hello " + name → "Hello Alice"
Ternary condition ? x : y let s = age>=18 ? 'Adult' : 'Minor'
Note: Operator precedence (high → low): () [] . → ++ -- → ! ~ → * / % → + - → < > <= >= → == != === !== → && → ||
→ ?: → = += …
4.4 Control Flow
// if-else
if (age >= 18) { [Link]("Adult"); }
else { [Link]("Minor"); }
GE4b — Introduction to Web Programming | NEP UGCF 2022 Page 8
// for loop
for (let i = 0; i < 5; i++) { [Link](i + "<br>"); }
// while loop
let i = 0;
while (i < 5) { [Link](i); i++; }
// do-while
let j = 0;
do { [Link](j); j++; } while (j < 5);
4.5 Functions
// Declaration
function add(a, b) { return a + b; }
let result = add(3, 5); // result = 8
// Variable arguments using arguments array
function displayItems() {
for (let j = 0; j < [Link]; j++) {
[Link]([Link][j] + "<br>");
// String methods used in functions
[Link](0) // First character
[Link]() // Uppercase
[Link]() // Lowercase
[Link](1) // Substring from index 1 to end
[Link] // Length of string
[Link]("x") // First index of "x" (-1 if not found)
4.6 Events
Event Trigger Event Trigger
onclick Mouse click onblur Element loses focus
ondblclick Double click onfocus Element gains focus
onmouseover Mouse enters element onkeypress Key pressed
onmouseout Mouse leaves element onsubmit Form submitted
onchange Input value changes onselect Text selected
<!-- HTML event attribute -->
<button onclick="alert('Clicked!')">Click Me</button>
GE4b — Introduction to Web Programming | NEP UGCF 2022 Page 9
<!-- JavaScript event handler -->
[Link]('btn').onclick = function() {
alert('Clicked!');
};
4.7 Form Validation
function validate(form) {
// Check non-empty
if ([Link] == "") {
alert("Name cannot be empty!"); return false;
// Validate email with regex
let emailPattern = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
if () {
alert("Invalid email!"); return false;
// Validate roll number (7-digit numeric)
let rollPattern = /^\d{7}$/;
if () {
alert("Roll number must be 7 digits!"); return false;
return true;
Note: JavaScript validation is client-side assistance only. Always re-validate on the server — users can disable JS.
GE4b — Introduction to Web Programming | NEP UGCF 2022 Page 10
10
UNIT 5 jQuery and JSON Hours
5.1 What is jQuery?
jQuery is a fast, lightweight JavaScript library (MIT licence) that simplifies HTML traversal, manipulation, event
handling, animation, and Ajax. $ is the jQuery factory method — shorthand for jQuery().
Version Browser Support Recommendation
1.x All browsers including IE 6–8 (legacy) Only if legacy browser support is needed
2.x Drops IE 6–8; smaller and faster For modern sites targeting IE 9+
3.x (e.g. 3.5.1)Modern browsers only ■ Current recommended version
5.2 Including jQuery
<!-- Local download -->
<script src="[Link]"></script>
<!-- jQuery CDN -->
<script src="[Link]
<!-- Google CDN -->
<script src="[Link]
<!-- Microsoft CDN -->
<script src="[Link]
Note: CDN benefits: free hosting, high-speed backbone, geographic caching, often already in user's browser cache
(used by 90%+ of websites).
5.3 jQuery Syntax & Selectors
$(selector).method(arguments); // Basic syntax
jQuery(selector).method(args); // Equivalent form
$('p').css('text-align', 'justify'); // Element selector
$('#myDiv').css('background', 'yellow'); // ID selector (#)
$('.active').css('color', 'red'); // Class selector (.)
$('p, #myDiv, .active').css('font-weight', 'bold'); // Combined
// Get computed CSS value
let color = $('#elem').css('color'); // Returns e.g. rgb(0,0,255)
5.4 Document Ready
// Ensure code runs after DOM is fully loaded
$('document').ready(function() { /* Long form */ });
GE4b — Introduction to Web Programming | NEP UGCF 2022 Page 11
$(function() { /* Short form — preferred */ });
Note: Alternative: place script tags at the end of <body> — ensures page content loads first.
5.5 jQuery Events
HTML Event jQuery Method HTML Event jQuery Method
onclick .click() onmouseover .mouseover()
ondblclick .dblclick() onmouseout .mouseout()
onfocus .focus() onmouseenter .mouseenter()
onblur .blur() onmouseleave .mouseleave()
onkeypress .keypress() onsubmit .submit()
Note: Remove the 'on' prefix when using jQuery event methods. e.g., onclick → .click()
5.6 jQuery Event Examples
// Click
$('#clickme').click(function() {
$('#result').html('You clicked!');
});
// Focus and Blur
$('#first').focus();
$('input').focus(function() { $(this).css('background', '#ff0'); });
$('input').blur( function() { $(this).css('background', '#aaa'); });
// Double click
$('.myclass').dblclick(function() { $(this).hide(); });
// Keypress
$(document).keypress(function(event) {
let key = [Link]([Link]);
$('#result').html('You pressed: ' + key);
});
// MouseEnter / MouseLeave
$('#test').mouseenter(function() { $(this).html('Stop tickling!'); });
$('#test').mouseleave(function() { $(this).html('Where did you go?'); });
// hover() shorthand
$('#test').hover(
function() { $(this).html('Mouse in!'); },
function() { $(this).html('Mouse out!'); }
);
GE4b — Introduction to Web Programming | NEP UGCF 2022 Page 12
// Form submit validation
$('#form').submit(function() {
if ($('#fname').val() == '' || $('#lname').val() == '') {
alert('Please enter both names');
return false; // Prevent form submission
});
5.7 Method Chaining & noConflict
// Method chaining
$('#test')
.mouseover(function() { $(this).html('Cut it out!'); })
.mouseout( function() { $(this).html('Try it...'); });
// Library conflict resolution
$.noConflict(); // Releases $ — use jQuery() instead
let jq = $.noConflict(); // Assign custom alias
jq('p').css('color', 'red');
5.8 JSON — JavaScript Object Notation
JSON is a lightweight, text-based, human-readable data-interchange format. Used to store and transport data.
Based on JavaScript object syntax but language-independent.
"name": "Alice",
"age": 20,
"courses": ["HTML", "CSS", "JavaScript"],
"address": {
"city": "Delhi",
"pin": "110001"
• Keys must be strings (in double quotes)
• Values can be: string, number, boolean, array, object, or null
• No trailing commas allowed
• File extension: .json
// Parse JSON string → JavaScript object
let obj = [Link]('{"name":"Alice","age":20}');
[Link]([Link]); // "Alice"
// Convert JavaScript object → JSON string
GE4b — Introduction to Web Programming | NEP UGCF 2022 Page 13
let jsonStr = [Link]({ name: "Bob", age: 22 });
// Result: '{"name":"Bob","age":22}'
GE4b — Introduction to Web Programming | NEP UGCF 2022 Page 14
Practical Exercises Summary
HTML Practicals
• 1. Text formatting — bold, italic, underline, headings, paragraphs, colors, marquee text
• 2. Ordered/unordered lists, inserting images, internal and external linking
• 3. Image demonstrations (logos, table cells, table backgrounds, clickable icons)
• 4. Internal and external linking demonstrations
• 5. HTML tables — create a structured timetable/data table
• 6. HTML5 semantic tags — header, nav, main, section, footer, details, summary, figure, figcaption
• 7. Student registration form — text box, text area, dropdown, radio buttons, checkboxes, submit/reset; show
'Form submitted' on submit
CSS Practicals
• 1. Department webpage with drop-down navigation menu using styles, rules, selectors, ID, class
• 2. Apply CSS to modify text, list, div element, and table properties from HTML exercises above
JavaScript Practicals
• 1. Accept a number via prompt and print its multiplication table on button click
• 2. Calculator — two text boxes and 4 buttons (+, −, ×, ÷); show result in alert window
• 3. Change background color of a text box when it gains focus
• 4. Form validation — 7-digit numeric roll number, alphabetical name string, non-empty DOB field
jQuery Practicals
• 1. Change text color and contents using button click events
• 2. Select elements using ID, class, element name, and attribute name
• 3. Write a jQuery function to test whether a given date is a weekend
• 4. Demonstrate events: blur, change, focus, click, dblClick, submit
• 5. mouseOver and mouseOut demo — link changes text and page background changes to green/red
GE4b — Introduction to Web Programming | NEP UGCF 2022 Page 15
Quick Revision Cheat Sheet
Topic Key Point
Internet vs WWW Internet = physical infrastructure; WWW = service running on it
HTTP vs FTP HTTP transfers webpages; FTP transfers files between computers
TCP vs IP TCP breaks/reassembles packets; IP routes them to correct address
DNS Maps human-readable domain names to numeric IP addresses
HTML5 Adds semantic tags: <header>, <nav>, <main>, <section>, <footer>
GIF 256 colors, supports transparency AND animation; good for icons
PNG Millions of colors (PNG24), transparency, NO animation
JPG Best for photos; lossy compression; NO transparency
SVG Vector-based; scales without quality loss; ideal for logos/icons
CSS Precedence Inline > Embedded > External (closest to content wins)
em unit Relative to current element's font size; 1em = 100% of default size
let vs var let is block-scoped; var is function-scoped; const is immutable
=== vs == === checks VALUE and TYPE; == checks value only (type-coercing)
DOM Tree-like representation of a webpage; JS manipulates it dynamically
jQuery $ Factory method / shorthand for jQuery(); selects & manipulates elements
Document Ready $(function(){}) — runs only after DOM is fully loaded
jQuery Events Remove 'on' prefix: onclick → .click() onfocus → .focus()
this in jQuery Refers to the element that triggered the current event
Method Chaining $('#el').method1().method2() — chain multiple jQuery calls
JSON Text-based data format: keys in double quotes, no trailing commas
[Link]() Converts JSON string → JavaScript object
[Link]() Converts JavaScript object → JSON string
Recommended Textbooks
[1 Minnick, J. — Responsible Web Design with HTML5 and CSS, 9th Cengage Learning, 2017
.] ed.
[2 Nixon, R. — Learning PHP, MySQL & JavaScript with jQuery, CSS O'Reilly, 2021
.] and HTML5, 6th ed.
[3 Ivan Bayross — Web Enabled Commercial Application BPB Publications, 2010
.] Development Using HTML, DHTML, JavaScript, Perl CGI, 4th ed.
[4 Duckett, J. — JavaScript and JQuery: Interactive Front-End Web Wiley, 2014
.] Development
GE4b — Introduction to Web Programming | NEP UGCF 2022 Page 16