HTML and JavaScript CBMCA5T03

RTMNU B.Com Semester 5 · Minor: Computer Applications · 4 units · notes for every unit

University	RTMNU – Rashtrasant Tukadoji Maharaj Nagpur University, Nagpur
Course	B.Com (Four Year UG Programme, NEP 2020)
Semester	Semester V
Paper code	CBMCA5T03
Paper title	HTML and JavaScript
Category	Minor: Computer Applications
Credits	Not stated in the syllabus extract (Minor, 4 credits per B.Com NEP scheme — check)
Marks	Not stated in the syllabus extract
Syllabus	as per official RTMNU NEP 2020 B.Com syllabus for Sem V & VI (session 2026-27 onwards)

Unit topics below follow the official RTMNU syllabus. RTMNU official website · All RTMNU B.Com papers

Units

1Unit I: Internet, WWW and Introduction to HTMLNotes
2Unit II: HTML Grouping, Links, Multimedia and Cascading Style SheetsNotes
3Unit III: JavaScript: Introduction, Operators and Control StatementsNotes
4Unit IV: Functions, Objects and Events in JavaScriptNotes

RTMNU B.Com Sem 5 · CBMCA5T03 · Unit I

Unit I: Internet, WWW and Introduction to HTML

Syllabus topics (RTMNU)

Brief History of the Internet
What is World Wide Web
URL
Domain
Web Page and a Website
Internet Browser
HTML
CSS Editors
Introduction to HTML
Basic structure of an HTML document
HTML Tags and attributes
HTML Tags vs. elements
Heading
Paragraphs
Line Breaks
HTML Basic Tags and Formatting Tags
Working with Lists
Tables
Frames
Marquee text

Brief History of the Internet

The Internet is a worldwide network of computer networks that communicate using common rules called TCP/IP.

1969: ARPANET, a US defence research network, connected four universities.
1983: ARPANET adopted TCP/IP — often called the birth of the Internet.
1989–91: Tim Berners-Lee at CERN invented the World Wide Web, HTML and HTTP.
1993: Mosaic, the first popular graphical browser.
1995: public Internet in India through VSNL (15 August 1995).
Later: search engines, social media, smartphones, cloud and mobile Internet.

World Wide Web, URL, Domain, Web Page and Website

World Wide Web (WWW): a system of interlinked web pages on the Internet, accessed through browsers using HTTP/HTTPS. The Internet is the network; the Web is one service running on it.
URL (Uniform Resource Locator): the complete address of a resource, e.g. https://www.example.com/notes/index.html — protocol (https), domain (www.example.com), path (/notes/index.html).
Domain name: an easy-to-remember name that maps to a server's IP address through DNS. Top-level domains: .com, .org, .in, .gov.in, .edu.
Web page: a single document written in HTML, shown in a browser.
Website: a collection of related web pages under one domain, with a home page.

Internet Browser and Editors

A web browser is software that requests web pages from servers and displays them — Google Chrome, Mozilla Firefox, Microsoft Edge, Safari. HTML/CSS editors are programs used to write web pages: simple text editors (Notepad), code editors (Visual Studio Code, Sublime Text, Notepad++) and WYSIWYG editors (Adobe Dreamweaver).

Introduction to HTML and Basic Structure

HTML (HyperText Markup Language) is the standard markup language used to create and structure web pages using tags. It is not a programming language; it describes the structure of content. The current standard is HTML5.

Basic structure of an HTML document:
<!DOCTYPE html>
<html>
<head>
  <title>My First Page</title>
</head>
<body>
  <h1>Welcome</h1>
  <p>This is my first web page.</p>
</body>
</html>

<!DOCTYPE html> tells the browser it is HTML5; <html> is the root; <head> holds title and meta information; <body> holds visible content. Save the file with .html extension.

HTML Tags, Attributes and Elements

Tag: a keyword in angle brackets, e.g. <p>. Most come in pairs (opening and closing </p>); some are empty (<br>, <img>, <hr>).
Attribute: extra information inside the opening tag as name="value", e.g. <img src="logo.png" alt="Logo" width="100">.
Element: the opening tag + content + closing tag together, e.g. <p>Hello</p>.

Tag	Element
Only the marker in angle brackets	Complete unit: start tag, content and end tag
<b>	<b>Bold</b>

Headings, Paragraphs, Line Breaks, Basic and Formatting Tags

Headings: <h1> (largest) to <h6> (smallest).
Paragraph: <p>; line break: <br>; horizontal line: <hr>.
Formatting tags: <b> bold, <i> italic, <u> underline, <strong> important, <em> emphasis, <sub> subscript (H₂O), <sup> superscript (x²), <mark> highlight, <small>, <del> deleted, <pre> preformatted text.

Working with Lists

Ordered list <ol>: numbered items; attribute type="1", "A", "a", "I", "i"; start="5".
Unordered list <ul>: bulleted items; list-style disc, circle, square.
Description list <dl>: <dt> term and <dd> description.

Example:
<ol type="A">
<li>Accounts</li>
<li>Economics</li>
</ol>

Tables

Tags: <table>, <tr> (row), <th> (header cell), <td> (data cell), <caption>. Attributes: border, cellpadding, cellspacing, colspan (merge columns), rowspan (merge rows).

Example:
<table border="1">
  <tr><th>Name</th><th>Marks</th></tr>
  <tr><td>Asha</td><td>78</td></tr>
  <tr><td colspan="2">Total students: 1</td></tr>
</table>

Frames and Marquee Text

Frames divide the browser window into sections, each showing a separate HTML document, using <frameset rows="30%,70%"> or cols, with <frame src="...">. Frameset is not supported in HTML5; today <iframe> is used to embed one page inside another.

Marquee (<marquee>) makes text scroll across the screen; attributes: direction (left, right, up, down), behavior (scroll, slide, alternate), scrollamount, loop, bgcolor. It is obsolete in HTML5 (CSS animation is preferred) but still asked in exams.

Example:
<marquee direction="left" behavior="scroll" scrollamount="5">Admissions open!</marquee>

Likely exam questions

(Long, 8/16 marks) Explain the basic structure of an HTML document. Describe the formatting tags of HTML with examples.
(Long, 8/16 marks) How are lists and tables created in HTML? Explain with examples including colspan and rowspan.
(Short, 4 marks) Distinguish between a web page and a website.
(Short, 4 marks) What is a URL? Explain its parts.
(Short, 4 marks) Differentiate between an HTML tag and an HTML element.

Unit II →

RTMNU B.Com Sem 5 · CBMCA5T03 · Unit II

Unit II: HTML Grouping, Links, Multimedia and Cascading Style Sheets

Syllabus topics (RTMNU)

HTML Grouping Using Div and Span tag
Working with Hyperlinks
Images
Multimedia Contents
Introduction to Cascading Style Sheets: Concept of CSS
Creating Style Sheets
CSS Properties
CSS Styling (Background, Text Format, Controlling Fonts)
Embedded, Internal and External Style Sheets
CSS Selectors
CSS Colours
Browser Safe Colours
CSS borders
CSS Comments

Grouping Using Div and Span

<div>	<span>
Block-level element — starts on a new line, takes full width	Inline element — stays within the line
Groups large sections (header, menu, footer)	Groups small parts of text
<div class="box">...</div>	<span style="color:red">word</span>

Both have no visual effect by themselves; they are used with CSS (class/id) and JavaScript.

Working with Hyperlinks

A hyperlink connects one page or resource to another using the anchor tag <a> with the href attribute.

Types of links:
<a href="https://www.rtmnu.ac.in" target="_blank">RTMNU</a>
<a href="about.html">About Us</a>
<a href="#top">Go to top</a>
<a href="mailto:info@example.com">Email us</a>

Types: external (another site), internal (another page of the same site), bookmark/anchor link (part of the same page using id), email link. target="_blank" opens in a new tab.

Images and Multimedia Content

Image: <img src="photo.jpg" alt="description" width="300" height="200">. The alt text is shown if the image fails and helps blind users. Formats: JPG, PNG, GIF, SVG, WebP. An image can be made a link by putting <img> inside <a>.

Multimedia in HTML5:
<audio src="song.mp3" controls></audio>
<video src="intro.mp4" width="320" controls autoplay muted></video>

Attributes: controls, autoplay, loop, muted, poster (for video). Older pages used <embed> and <object>. YouTube videos are added with <iframe>.

Introduction to CSS: Concept

CSS (Cascading Style Sheets) is a language used to describe the presentation (colours, fonts, layout, spacing) of HTML documents. HTML gives structure; CSS gives style. "Cascading" means several style rules can apply, and the browser follows priority rules (inline > internal/external, later rule wins, more specific selector wins).

Advantages: separates content from design; one stylesheet controls many pages; faster pages; consistent look; easy maintenance; responsive design for mobiles.

Creating Style Sheets and CSS Syntax

A CSS rule = selector + declaration block: selector { property: value; }

Syntax:
h1 { color: navy; font-size: 28px; text-align: center; }

Inline, Internal (Embedded) and External Style Sheets

Inline: style attribute on one element: <p style="color:green">. Highest priority; not reusable.
Internal/Embedded: <style> tag inside <head>; applies to one page.
External: a separate .css file linked with <link rel="stylesheet" href="style.css">; applies to many pages — best practice.

CSS Properties and Styling: Background, Text, Fonts

Background: background-color, background-image: url("bg.jpg"), background-repeat, background-position, background-size.
Text formatting: color, text-align, text-decoration (underline, none), text-transform (uppercase), text-indent, letter-spacing, line-height, word-spacing.
Fonts: font-family (Arial, "Times New Roman", serif), font-size (px, em, %), font-weight (bold, 400), font-style (italic), font-variant (small-caps).

CSS Selectors

Selector	Example	Selects
Element	p { }	All <p> elements
Class	.note { }	Elements with class="note"
ID	#header { }	The one element with id="header"
Universal	* { }	All elements
Group	h1, h2 { }	Both h1 and h2
Descendant	div p { }	<p> inside <div>
Pseudo-class	a:hover { }	Link when mouse is over it

CSS Colours and Browser-Safe Colours

Colours can be written as names (red), hexadecimal (#FF0000), RGB (rgb(255,0,0)), RGBA with transparency (rgba(255,0,0,0.5)) and HSL. Browser-safe (web-safe) colours are the 216 colours that older 256-colour monitors displayed the same in all browsers; their hex values use only 00, 33, 66, 99, CC, FF (e.g. #3366CC).

CSS Borders and Comments

border-width, border-style (solid, dashed, dotted, double, none), border-color, shorthand border: 2px solid black; border-radius for rounded corners.

Comments in CSS are written as /* comment */ and are ignored by the browser (HTML comments use ).

Combined example:
<style>
/* box style */
.box { background-color: #FFFFCC; border: 2px dashed #336699;
padding: 10px; font-family: Arial; }
</style>
<div class="box">Notes for <span style="color:red">exam</span></div>

Likely exam questions

(Long, 8/16 marks) What is CSS? Explain inline, internal and external style sheets with examples.
(Long, 8/16 marks) Explain how hyperlinks, images and multimedia contents are added to a web page.
(Short, 4 marks) Distinguish between div and span tags.
(Short, 4 marks) Explain any four CSS selectors.
(Short, 4 marks) What are browser-safe colours?

← Unit I Unit III →

RTMNU B.Com Sem 5 · CBMCA5T03 · Unit III

Unit III: JavaScript: Introduction, Operators and Control Statements

Syllabus topics (RTMNU)

Java Script - Introduction
Internal Vs. External Scripts
Internal JavaScript Code
Understand The JavaScript Language & The Document Object Model
Variable Declaration
Operators
Types of Operators: Arithmetic Operators, Assignment Operators, Comparison Operators, Logical Operators, Conditional Operators, Type Operators
Control Statements: Conditional Statement: if, if else, else if
Looping Statement: while, do while, for loop

JavaScript: Introduction

JavaScript is a lightweight, interpreted, object-based scripting language used to make web pages interactive — for example, checking a form, showing a message, changing content without reloading. It runs inside the browser (client side). It was created by Brendan Eich at Netscape in 1995. JavaScript is different from Java.

Features: interpreted (no compiling), case-sensitive, event-driven, dynamically typed, platform-independent, works with HTML and CSS.

Internal vs External Scripts

Internal script	External script
Code written inside <script>...</script> in the HTML page	Code saved in a separate .js file and linked
Used by one page only	Reusable by many pages
<script> alert("Hi"); </script>	<script src="app.js"></script>
Page becomes longer	Cleaner HTML; browser can cache the file

Internal JavaScript code:
<html><body>
<h2>Demo</h2>
<script>
document.write("Welcome to JavaScript");
</script>
</body></html>

The JavaScript Language and the Document Object Model

The DOM (Document Object Model) is a tree-like representation of the HTML page that the browser creates, where every element is an object. JavaScript uses the DOM to read and change the page: document.getElementById("demo").innerHTML = "Hello"; The top object is window, then document, then elements (html → head, body → p, h1 ...).

Variable Declaration

A variable is a named storage location for data. Declared with var (old, function-scoped), let (block-scoped, can change) and const (block-scoped, cannot be reassigned). Rules: names start with a letter, _ or $; no spaces; not a keyword; case-sensitive. Data types: number, string, boolean, undefined, null, object, array.

Example:
var name = "Ravi";
let marks = 72;
const PI = 3.14;

Operators

Type	Operators	Example
Arithmetic	+ − * / % ** ++ --	10 % 3 gives 1
Assignment	= += -= *= /= %=	x += 5 means x = x + 5
Comparison	== === != !== > < >= <=	5 == "5" true; 5 === "5" false
Logical	&& (AND) \|\| (OR) ! (NOT)	(a > 0 && b > 0)
Conditional (ternary)	condition ? value1 : value2	res = (m >= 35) ? "Pass" : "Fail"
Type	typeof, instanceof	typeof 25 gives "number"

Remember: == compares only value (after type conversion); === compares value AND type.

Control Statements: Conditional Statements

if runs a block when the condition is true; if...else chooses between two blocks; else if ladder tests many conditions.

Grade program:
let m = 68;
if (m >= 60) {
  document.write("First Class");
} else if (m >= 45) {
  document.write("Second Class");
} else if (m >= 35) {
  document.write("Pass");
} else {
  document.write("Fail");
}

Looping Statements: while, do...while, for

while: checks the condition first, then runs (entry-controlled).
do...while: runs the body first, then checks (exit-controlled) — runs at least once.
for: initialisation; condition; increment in one line — used when the number of repetitions is known.

Loops:
// for: 1 to 5
for (let i = 1; i <= 5; i++) { document.write(i + " "); }
// while: sum of 1 to 10
let i = 1, sum = 0;
while (i <= 10) { sum += i; i++; }
// do-while
let n = 1;
do { document.write(n * 2 + " "); n++; } while (n <= 5);

while	do...while
Entry-controlled	Exit-controlled
May run zero times	Runs at least once
No semicolon after while( )	Semicolon after while( );

Likely exam questions

(Long, 8/16 marks) What is JavaScript? Explain the types of operators in JavaScript with examples.
(Long, 8/16 marks) Explain conditional and looping statements in JavaScript with suitable programs.
(Short, 4 marks) Distinguish between internal and external scripts.
(Short, 4 marks) Distinguish between while and do...while loops.
(Short, 4 marks) What is the Document Object Model (DOM)?

← Unit II Unit IV →

RTMNU B.Com Sem 5 · CBMCA5T03 · Unit IV

Unit IV: Functions, Objects and Events in JavaScript

Syllabus topics (RTMNU)

Function: Function Declaration
Built-in Functions
Standard Date and Time Functions
HTML Document Object Model
Working with HTML Form and its Elements
Passing Parameter to Function
Returning A Value from Function
Array
Object: Creating Object, Accessing Object Properties
Array Object
String Object
Date Object
Math Object
Window Object
Navigator Object
Events: Event Types: Mouse Events, Frame/Object Events, Form Events

Functions: Declaration, Parameters and Return Value

A function is a named block of code that performs a task and can be called (reused) many times. It makes programs shorter, organised and easy to debug.

Declaring, passing parameters and returning a value:
function add(a, b) {      // a, b are parameters
  return a + b;           // returns a value
}
let total = add(40, 35);   // 40, 35 are arguments
document.write("Total = " + total);  // Total = 75

Passing parameters: values (arguments) given in the call are received by parameters in the definition.
Returning a value: the return statement sends a result back and ends the function.
Function expression: let sq = function(x) { return x * x; }; Arrow function: let sq = x => x * x;

Built-in Functions

alert() (message box), prompt() (input box), confirm() (OK/Cancel), parseInt() and parseFloat() (convert text to number), isNaN() (checks "not a number"), Number(), String(), eval(), setTimeout() and setInterval() (timers).

Standard Date and Time Functions (Date Object)

Show the current date and time:
let d = new Date();
document.write(d.getDate() + "/" + (d.getMonth() + 1) + "/" + d.getFullYear());
document.write(" " + d.getHours() + ":" + d.getMinutes());

Methods: getDate(), getDay() (0 = Sunday), getMonth() (0 = January), getFullYear(), getHours(), getMinutes(), getSeconds(), toDateString(), and set methods like setFullYear().

HTML DOM and Working with Forms

Through the DOM, JavaScript reads and validates form elements — text box, password, radio button, checkbox, select list, textarea, button. Elements are accessed by document.getElementById("id"), document.forms["f1"]["name"], or document.querySelector(). The value property gives entered text; checked tells whether a radio/checkbox is selected.

Form validation:
<form name="f1" onsubmit="return check()">
  Name: <input type="text" id="nm">
  <input type="submit" value="Save">
</form>
<script>
function check() {
  if (document.getElementById("nm").value == "") {
    alert("Please enter name"); return false;
  }
  return true;
}
</script>

Arrays and the Array Object

An array stores many values in one variable, accessed by index starting at 0: let marks = [65, 72, 80]; marks[0] is 65. Properties/methods: length, push() (add at end), pop() (remove last), shift(), unshift(), sort(), reverse(), join(), indexOf(), slice(), splice(), concat().

Objects: Creating and Accessing Properties

An object is a collection of properties (name: value pairs) and methods.

Object literal:
let student = { name: "Neha", roll: 21,
  show: function() { return this.name + " - " + this.roll; } };
document.write(student.name);        // dot notation
document.write(student["roll"]);     // bracket notation
document.write(student.show());

Objects can also be created with new Object() or a constructor function.

String, Math, Window and Navigator Objects

Object	Common properties/methods
String	length, toUpperCase(), toLowerCase(), charAt(), indexOf(), substring(), slice(), replace(), split(), trim(), concat()
Math	Math.PI, Math.sqrt(), Math.pow(), Math.round(), Math.ceil(), Math.floor(), Math.max(), Math.min(), Math.random(), Math.abs()
Window	alert(), confirm(), prompt(), open(), close(), setTimeout(), innerWidth, location, history
Navigator	Information about the browser: navigator.userAgent, language, onLine, cookieEnabled, platform

Events: Mouse, Frame/Object and Form Events

An event is an action that happens in the browser (a click, page load, typing) to which JavaScript can respond through an event handler.

Type	Events
Mouse events	onclick, ondblclick, onmouseover, onmouseout, onmousedown, onmouseup, onmousemove
Frame/Object (window) events	onload, onunload, onresize, onscroll, onerror, onabort
Form events	onsubmit, onreset, onchange, onfocus, onblur, onselect, oninput

Event handlers:
<button onclick="alert('Saved!')">Save</button>
<body onload="alert('Page loaded')">
<input type="text" onblur="this.value = this.value.toUpperCase()">

Exam tip: In practical-style questions, write the full HTML page with <script> and show the expected output in one line.

Likely exam questions

(Long, 8/16 marks) What is a function in JavaScript? Explain how parameters are passed and values returned, with a program.
(Long, 8/16 marks) Explain events in JavaScript. Describe mouse, frame/object and form events with examples.
(Short, 4 marks) Explain any four methods of the String object.
(Short, 4 marks) Write a JavaScript program to display the current date and time.
(Short, 4 marks) Explain any four methods of the Math object.

← Unit III