parajulirajesh.com.np

RAJESH PARAJULI

Facebook Youtube Linkedin Link

Rajesh parajuli

Syllabus

Assignment

Study Materials

UNIT 1: INTRODUCTION TO HTML 

1.1 Getting Started with a Simple Web Page 

A web page is a document that is shown in a web browser. 
HTML is used to create this web page. 
HTML uses tags to tell the browser what to display. 

Every HTML page must have: 

  • A document type 
  • Head section (title) 
  • Body section (visible content) 

Full HTML Program 

<!DOCTYPE html> 
<html> 
<head> 
   <title>My First Page</title> 
</head> 
<body> 
   <h1>Hello World</h1> 
   <p>This is a simple HTML web page.</p> 
</body> 
</html> 
 

Advantages 

  • Very easy for beginners 
  • No special software needed 
  • Runs on all browsers 
  • Base for all websites 

 

1.2 Block and Inline Elements 

HTML elements are divided into block and inline elements. 

  • Block elements start on a new line and take full width. 
  • Inline elements stay in the same line and take only required space. 

Examples 

  • Block: p, div, h1 
  • Inline: span, b, i, a 

Full HTML Program 

<!DOCTYPE html> 
<html> 
<head> 
   <title>Block and Inline</title> 
</head> 
<body> 
   <h2>Block Elements</h2> 
   <p>This is a paragraph</p> 
   <div>This is a div</div> 
   <h2>Inline Elements</h2> 
   <p>This is <b>bold</b> and <i>italic</i> text.</p> 
</body> 
</html>

Advantages 

  • Helps design page layout
  • Makes content clear 
  • Easy styling using CSS 

1.3 Presentation and Phrase Elements 

Description 

These elements are used to format text and give meaning. 

  • Presentation elements change how text looks. 
  • Phrase elements show importance or meaning. 

Examples 

  • Presentation: b, i, u, sup, sub 
  • Phrase: strong, em, mark 

Full HTML Program 

<!DOCTYPE html> 
<html> 
<head> 
   <title>Presentation and Phrase</title> 
</head> 
<body> 
   <b>Bold Text</b><br> 
   <i>Italic Text</i><br> 
   H<sub>2</sub>O<br>
   x<sup>2</sup><br><br> 
   <strong>Important Text</strong><br> 
   <em>Emphasized Text</em><br> 
   <mark>Highlighted Text</mark> 
</body> 
</html>

Advantages 

  • Improves readability 
  • Makes text meaningful 
  • Helps search engines  

1.4 Empty and Non-Empty Elements 

  • Empty elements do not have closing tags. 
  • Non-empty elements have both opening and closing tags. 

Examples 

  • Empty: br, hr, img 
  • Non-empty: p, h1, div 

Full HTML Program 

<!DOCTYPE html> 
<html> 
<head> 
   <title>Empty and Non Empty</title> 
</head> 
<body> 
   <p>This is a paragraph</p> 
   Line one<br> 
   Line two 
   <hr> 
   <img src=”image.jpg” width=”150″> 
</body> 
</html> 
 

Advantages 

  • Simple syntax 
  • Faster page display 
  • Easy to understand 

 

1.5 HTML Character Entities 

Some characters have special meaning in HTML. 
To display them correctly, character entities are used. 

Examples 

  • < → &lt; 
  • > → &gt; 
  • & → &amp; 
  • © → &copy; 

Full HTML Program 

<!DOCTYPE html> 
<html> 
<head> 
   <title>Character Entities</title> 
</head> 
<body> 
   <p>5 &lt; 10</p> 
   <p>10 &gt; 5</p> 
   <p>AT&amp;T Company</p> 
   <p>Copyright &copy; 2026</p> 
</body> 
</html>

Advantages 

  • Shows special symbols 
  • Prevents HTML errors 
  • Useful in math and text 

1.6 HTML List, Table, and Links 

  • Lists show items in order or bullets. 
  • Tables show data in rows and columns. 
  • Links connect one page to another. 

Types 

  • Lists: Ordered, Unordered, Definition
  • Links: Internal, External 

Full HTML Program 

<!DOCTYPE html> 
<html> 
<head> 
   <title>Lists Tables Links</title> 
</head> 
<body> 
   <h3>Unordered List</h3> 
   <ul> 
       <li>HTML</li> 
       <li>CSS</li> 
   </ul> 

   <h3>Table</h3> 
   <table border=”1″> 
       <tr> 
           <th>Name</th> 
           <th>Marks</th> 
       </tr> 
       <tr> 
           <td>Rahul</td> 
           <td>85</td> 
       </tr> 
   </table> 

   <h3>Links</h3> 
   <a href=”page.html”>Internal Link</a><br> 
   <a href=”https://www.google.com”>External Link</a> 
</body> 
</html> 
 

Advantages 

  • Organizes information 
  • Easy navigation 
  • Clean data display  

1.7 Multimedia Contents 

Multimedia makes web pages attractive by adding: 

  • Images 
  • Audio 
  • Video 
  • YouTube videos 

Full HTML Program 

<!DOCTYPE html> 
<html> 
<head> 
   <title>Multimedia</title> 
</head> 
<body> 
   <h3>Image</h3> 
   <img src=”image.jpg” width=”200″><br><br> 

   <h3>Audio</h3> 
   <audio controls> 
       <source src=”audio.mp3″> 
   </audio><br><br> 

   <h3>Video</h3> 
   <video controls width=”250″> 
       <source src=”video.mp4″> 
   </video><br><br> 

   <h3>YouTube Video</h3> 
   <iframe width=”250″ height=”180″ 
   src=”https://www.youtube.com/embed/VIDEO_ID”> 
   </iframe> 
</body> 
</html> 
 

Advantages 

  • Makes learning interesting 
  • Improves user experience 
  • Interactive websites 

1.8 Form Elements 

Forms are used to collect information from users such as name, password, email, etc. 

Common Form Elements 

Text, password, email, date, file, radio, checkbox, textarea, hidden, select, button 

Full HTML Program 

<!DOCTYPE html> 
<html> 
<head> 
   <title>Form Elements</title> 
</head> 
<body> 
   <form> 
       Name: <input type=”text”><br><br> 
       Password: <input type=”password”><br><br> 
       Email: <input type=”email”><br><br> 
       Date: <input type=”date”><br><br> 
       File: <input type=”file”><br><br> 

       Gender: 
       <input type=”radio” name=”g”>Male 
       <input type=”radio” name=”g”>Female<br><br> 

       Hobbies: 
       <input type=”checkbox”>Reading 
       <input type=”checkbox”>Sports<br><br> 

       Address:<br> 
       <textarea rows=”4″ cols=”30″></textarea><br><br> 

       Country: 
       <select> 
           <option>India</option> 
           <option>USA</option> 
       </select><br><br> 

       <input type=”hidden” value=”001″> 

       <button type=”submit”>Submit</button> 
   </form> 
</body> 
</html>

Advantages 

  • Collects user data 
  • Used for login and registration 
  • Connects website to server 

UNIT 2: CASCADING STYLE SHEET (CSS) 

2.1 How CSS Fits with HTML Page 

CSS (Cascading Style Sheet) is used to style HTML elements. 
HTML creates the structure of a page, while CSS controls: 

  • Colors 
  • Fonts 
  • Size 
  • Layout 

CSS works with HTML, not alone. 

Program 

<!DOCTYPE html> 
<html> 
<head> 
   <title>CSS with HTML</title> 
   <style> 
       h1 { 
           color: blue; 
       } 
       p { 
           font-size: 18px; 
       } 
   </style> 
</head> 
<body> 
   <h1>CSS with HTML</h1> 
   <p>This paragraph is styled using CSS.</p> 
</body> 
</html> 
 

Advantages 

  • Separates design from content 
  • Makes pages attractive 
  • Easy to modify design 

 

2.2 Inline, Internal and External CSS 

CSS can be applied in three ways: 

  1. Inline CSS – inside HTML tag 
  1. Internal CSS – inside <style> in <head> 
  1. External CSS – separate .css file 

 

Program (All Three Types) 

<!DOCTYPE html> 
<html> 
<head> 
   <title>Types of CSS</title> 

   <!– Internal CSS –> 
   <style> 
       h2 { 
           color: green; 
       } 
   </style> 

   <!– External CSS –> 
   <link rel=”stylesheet” href=”style.css”> 
</head> 
<body> 

   <!– Inline CSS –> 
   <h1 style=”color:red;”>Inline CSS</h1> 

   <h2>Internal CSS</h2> 

   <p class=”ext”>External CSS Example</p> 

</body> 
</html> 
 

style.css 

.ext { 
   color: blue; 
   font-size: 20px; 
} 
 

Advantages 

  • Inline: Quick changes 
  • Internal: Page-specific style 
  • External: Reusable and professional 

 

2.3 CSS Selectors 

CSS selectors select HTML elements to apply styles. 

Types 

  • Element selector 
  • Class selector 
  • ID selector 
  • Universal selector 

Program 

<!DOCTYPE html> 
<html> 
<head> 
   <title>CSS Selectors</title> 
   <style> 
       p { 
           color: blue; 
       } 
       .class1 { 
           color: green; 
       } 
       #id1 { 
           color: red; 
       } 
       * { 
           font-family: Arial; 
       } 
   </style> 
</head> 
<body> 
   <p>Element Selector</p> 
   <p class=”class1″>Class Selector</p> 
   <p id=”id1″>ID Selector</p> 
</body> 
</html> 
 

Advantages 

  • Easy element targeting 
  • Clean styling 
  • Better control 

 

2.4 CSS Properties (Text, List, Table, Background, Link) 

CSS properties control the appearance of elements. 

Program 

<!DOCTYPE html> 
<html> 
<head> 
   <title>CSS Properties</title> 
   <style> 
       p { 
           color: blue; 
           text-align: center; 
       } 
       ul { 
           list-style-type: square; 
       } 
       table { 
           border-collapse: collapse; 
           width: 50%; 
       } 
       td, th { 
           border: 1px solid black; 
           padding: 5px; 
       } 
       body { 
           background-color: lightyellow; 
       } 
       a { 
           color: red; 
           text-decoration: none; 
       } 
   </style> 
</head> 
<body> 
   <p>Text Formatting</p> 

   <ul> 
       <li>HTML</li> 
       <li>CSS</li> 
   </ul> 

   <table> 
       <tr> 
           <th>Name</th> 
           <th>Marks</th> 
       </tr> 
       <tr> 
           <td>Ravi</td> 
           <td>80</td> 
       </tr> 
   </table> 

   <a href=”#”>Styled Link</a> 
</body> 
</html> 
 

Advantages 

  • Improves readability 
  • Attractive design 
  • Consistent formatting 

 

2.5 Pseudo Classes & Elements 

Pseudo classes and elements style special states of elements. 

Types 

  • :hover 
  • :focus 
  • :active 
  • ::before 
  • ::after 
  • ::first-line 
  • ::first-letter 

Full HTML Program 

<!DOCTYPE html> 
<html> 
<head> 
   <title>Pseudo Classes</title> 
   <style> 
       p::first-letter { 
           font-size: 30px; 
           color: red; 
       } 
       p::first-line { 
           color: blue; 
       } 
       h1::before { 
           content: “★ “; 
       } 
       h1::after { 
           content: ” ★”; 
       } 
       a:hover { 
           color: green; 
       } 
       input:focus { 
           background-color: lightblue; 
       } 
       a:active { 
           color: red; 
       } 
   </style> 
</head> 
<body> 
   <h1>Welcome</h1> 
   <p>This is a paragraph example for pseudo elements.</p> 
   <a href=”#”>Hover Me</a><br><br> 
   <input type=”text” placeholder=”Focus here”> 
</body> 
</html> 
 

Advantages 

  • Better interaction 
  • Dynamic effects 
  • No JavaScript needed 

 

2.6 Custom List Numbering Using Content Property 

Description 

CSS content property is used with ::before to create custom numbering. 

Full HTML Program 

<!DOCTYPE html> 
<html> 
<head> 
   <title>Custom List</title> 
   <style> 
       ol { 
           list-style: none; 
       } 
       li::before { 
           content: “✔ “; 
           color: green; 
       } 
   </style> 
</head> 
<body> 
   <ol> 
       <li>HTML</li> 
       <li>CSS</li> 
       <li>JavaScript</li> 
   </ol> 
</body> 
</html> 
 

Advantages 

  • Creative list design 
  • No images required 
  • Fully customizable 

 

2.7 CSS Box Model 

Description 

CSS Box Model consists of: 

  • Content 
  • Padding 
  • Border 
  • Margin 

Full HTML Program 

<!DOCTYPE html> 
<html> 
<head> 
   <title>Box Model</title> 
   <style> 
       div { 
           width: 200px; 
           padding: 20px; 
           border: 5px solid blue; 
           margin: 30px; 
           background-color: lightgray; 
       } 
   </style> 
</head> 
<body> 
   <div>This is CSS Box Model</div> 
</body> 
</html> 
 

Advantages 

  • Controls spacing 
  • Better layout 
  • Clean design 

 

2.8 Creating Layouts (Display, Position, Float) 

Description 

CSS layout properties control element positioning. 

Properties 

  • display 
  • position 
  • float 

Full HTML Program 

<!DOCTYPE html> 
<html> 
<head> 
   <title>CSS Layout</title> 
   <style> 
       .box1 { 
           float: left; 
           width: 40%; 
           background: lightblue; 
           padding: 10px; 
       } 
       .box2 { 
           float: right; 
           width: 40%; 
           background: lightgreen; 
           padding: 10px; 
       } 
   </style> 
</head> 
<body> 
   <div class=”box1″>Left Box</div> 
   <div class=”box2″>Right Box</div> 
</body> 
</html> 
 

Advantages 

  • Page layout control 
  • Responsive design 
  • Professional look 

 

2.9 Fixed and Liquid Design 

  • Fixed design uses fixed width (px) 
  • Liquid design uses percentage (%) 

Full HTML Program 

<!DOCTYPE html> 
<html> 
<head> 
   <title>Fixed and Liquid</title> 
   <style> 
       .fixed { 
           width: 300px; 
           background-color: lightcoral; 
           padding: 10px; 
       } 
       .liquid { 
           width: 60%; 
           background-color: lightseagreen; 
           padding: 10px; 
       } 
   </style> 
</head> 
<body> 
   <div class=”fixed”>Fixed Width Box</div><br> 
   <div class=”liquid”>Liquid Width Box</div> 
</body> 
</html> 
 

Advantages 

  • Fixed: Predictable layout 
  • Liquid: Screen adaptable 
  • Better user experience 

UNIT 3: CLIENT SIDE PROGRAMMING WITH JAVASCRIPT 

3.1 How JavaScript Fits into a Web Page 

JavaScript is a client-side scripting language. 
It runs inside the web browser and makes web pages interactive. 

HTML → structure 
CSS → design 
JavaScript → behavior (actions) 

JavaScript can be written: 

  • Inside <script> tag 
  • In <head> or <body> 

Full HTML Program 

<!DOCTYPE html> 
<html> 
<head> 
   <title>JavaScript in Web Page</title> 
   <script> 
       function showMessage() { 
           alert(“JavaScript is working!”); 
       } 
   </script> 
</head> 
<body> 
   <h2>JavaScript Example</h2> 
   <button onclick=”showMessage()”>Click Me</button> 
</body> 
</html> 
 

Advantages 

  • Makes pages interactive 
  • Runs fast in browser 
  • No server required 

 

3.2 JavaScript Basics: Variables and Operators 

Variables 

Variables store data values. 

Keywords: 

  • var 
  • let 
  • const 

Operators 

Used to perform operations. 

Types: 

  • Arithmetic (+ – * /) 
  • Assignment (=) 
  • Comparison (==, >, <) 
  • Logical (&&, ||) 

Program 

<!DOCTYPE html> 
<html> 
<head> 
   <title>Variables and Operators</title> 
   <script> 
       function calculate() { 
           let a = 10; 
           let b = 5; 
           let sum = a + b; 
           document.getElementById(“result”).innerHTML = “Sum = ” + sum; 
       } 
   </script> 
</head> 
<body> 
   <h2>JavaScript Variables</h2> 
   <button onclick=”calculate()”>Calculate</button> 
   <p id=”result”></p> 
</body> 
</html> 
 

Advantages 

  • Stores data easily 
  • Performs calculations 
  • Essential for logic building 

 

3.3 Understanding the Document Object Model (DOM) 

DOM represents the HTML page as objects. 
JavaScript uses DOM to: 

  • Change content 
  • Change style 
  • Respond to events 

HTML elements become objects in DOM. 

Program 

<!DOCTYPE html> 
<html> 
<head> 
   <title>DOM Example</title> 
   <script> 
       function changeText() { 
           document.getElementById(“msg”).innerHTML = “Text Changed!”; 
       } 
   </script> 
</head> 
<body> 
   <h2 id=”msg”>Original Text</h2> 
   <button onclick=”changeText()”>Change Text</button> 
</body> 
</html> 
 

Advantages 

  • Dynamic page update 
  • No page reload 
  • Better user experience 

 

3.4 Accessing HTML Elements 

JavaScript accesses HTML elements using DOM methods. 

Methods 

  • getElementById() 
  • getElementsByClassName() 
  • getElementsByName() 
  • getElementsByTagName() 

Program 

<!DOCTYPE html> 
<html> 
<head> 
   <title>Access Elements</title> 
   <script> 
       function accessElements() { 
           document.getElementById(“id1”).style.color = “red”; 

           let c = document.getElementsByClassName(“cls”); 
           c[0].style.color = “blue”; 

           let t = document.getElementsByTagName(“p”); 
           t[1].style.color = “green”; 
       } 
   </script> 
</head> 
<body> 
   <h2 id=”id1″>By ID</h2> 
   <p class=”cls”>By Class</p> 
   <p>By Tag</p> 
   <button onclick=”accessElements()”>Apply</button> 
</body> 
</html> 
 

Advantages 

  • Easy element selection 
  • Control over page content 
  • Useful for forms and UI 

 

3.5 JavaScript Objects 

Objects store properties and methods. 

Common Objects 

  • window 
  • document 
  • array 
  • string 
  • math 
  • date 

Program 

<!DOCTYPE html> 
<html> 
<head> 
   <title>JavaScript Objects</title> 
   <script> 
       function showObjects() { 
           let arr = [“HTML”, “CSS”, “JS”]; 
           let today = new Date(); 
           let num = Math.sqrt(16); 

           document.getElementById(“out”).innerHTML = 
               “Array: ” + arr + 
               “<br>Date: ” + today + 
               “<br>Square Root: ” + num; 
       } 
   </script> 
</head> 
<body> 
   <h2>JavaScript Objects</h2> 
   <button onclick=”showObjects()”>Show</button> 
   <p id=”out”></p> 
</body> 
</html> 
 

Advantages 

  • Organizes data 
  • Built-in useful functions 
  • Reduces coding effort 

 

3.6 Writing Scripts to Handle Events 

Events occur when user performs actions like: 

  • Click 
  • Mouse over 
  • Key press 
  • Load 

JavaScript handles events using event handlers. 

Program 

<!DOCTYPE html> 
<html> 
<head> 
   <title>Event Handling</title> 
   <script> 
       function showAlert() { 
           alert(“Button Clicked!”); 
       } 
   </script> 
</head> 
<body> 
   <h2>Event Handling Example</h2> 
   <button onclick=”showAlert()”>Click Me</button> 
</body> 
</html> 
 

Advantages 

  • Interactive web pages 
  • User-friendly 
  • Dynamic behavior 

 

3.7 Using JavaScript to Validate User Inputs 

Validation checks user input before submitting a form. 

Examples: 

  • Empty field 
  • Correct email 
  • Password length 

Validation improves data accuracy. 

Program 

<!DOCTYPE html> 
<html> 
<head> 
   <title>Form Validation</title> 
   <script> 
       function validateForm() { 
           let name = document.getElementById(“name”).value; 

           if (name == “”) { 
               alert(“Name must be filled out”); 
               return false; 
           } 
           alert(“Form Submitted Successfully”); 
           return true; 
       } 
   </script> 
</head> 
<body> 
   <h2>Form Validation</h2> 
   <form onsubmit=”return validateForm()”> 
       Name: <input type=”text” id=”name”><br><br> 
       <input type=”submit” value=”Submit”> 
   </form> 
</body> 
</html> 

Advantages 

  • Prevents wrong data 
  • Improves security 
  • Saves server time 

 

 

  • prompt() → always returns a string

  • parseInt() → converts to integer

  • parseFloat() → converts to decimal / double

  • Number() → can also be used for both integer and decimal

<!DOCTYPE html>
<html>
<body>

<script>
var name = prompt(“Enter your name”);
document.write(“Hello ” + name);
</script>

</body>
</html>

<!DOCTYPE html>
<html>
<body>

<script>
var num = parseInt(prompt(“Enter a number”));

if (num % 2 == 0)
document.write(num + ” is Even”);
else
document.write(num + ” is Odd”);
</script>

</body>
</html>

Factorial program in javascript

<!DOCTYPE html>
<html>
<head>
<title>Factorial using Recursion</title>
<script>
function fact(n) {
if (n == 0)
return 1;
else
return n * fact(n – 1);
}

var num = 5; // number whose factorial is to be found
var result = fact(num);

document.write(“Factorial of ” + num + ” is ” + result);
</script>
</head>
<body>
</body>
</html>

The DOM (Document Object Model) is a tree-like structure that represents an HTML document. JavaScript uses the DOM to access, change, add, or delete HTML elements dynamically.

Document
└── html
├── head
└── body
├── h1
└── p

document.getElementById

<!DOCTYPE html>
<html>
<body>

<h2 id=”msg”>Hello World</h2>
<button onclick=”changeText()”>Click</button>

<script>
function changeText() {
document.getElementById(“msg”).innerHTML = “Hello JavaScript!”;
}
</script>

</body>
</html>

<p class=”text”>First Paragraph</p>
<p class=”text”>Second Paragraph</p>
<button onclick=”changeText()”>Click Me</button>

document.getElementsByClassName()

<script>
function changeText() {
document.getElementsByClassName(“text”)[0].style.color = “red”;
}
</script>

document.getElementsByTagName()

<h1>Heading 1</h1>
<h1>Heading 2</h1>
<button onclick=”changeHeading()”>Click Me</button>

<script>
function changeHeading() {
document.getElementsByTagName(“h1”)[0].innerHTML = “Changed Heading”;
}
</script>

Event Handling

Event handling is a way to make a web page respond to user actions, like:

  • Clicking a button
  • Moving the mouse
  • Typing on the keyboard

Click Event

<!DOCTYPE html>
<html>
<body>

<button onclick=”showMessage()”>Click Me</button>

<script>
function showMessage() {
alert(“Button was clicked!”);
}
</script>

</body>
</html>

Using addEventListener() (Modern Way)

<button id=”btn”>Click Me</button>

<script>
document.getElementById(“btn”).addEventListener(“click”, function() {
alert(“Button clicked using addEventListener!”);
});
</script>

Scroll to Top

Rajesh Parajuli

Menu

SERVICES

  • WEB DEVELOPMENT & DESIGN
  • GRAPHICS DESIGN
  • WEBSITE HOSTING
Facebook Instagram Youtube Linkedin

BICTE GMC

LEC.RAJESH PARAJULI

Address: Ghodaghodi Municipality-1 Sukhad kailali

Contact: 9847546279

Ghodaghodi Multiple Campus BICTE

Copyright © 2026 parajulirajesh.com.np | Powered by parajulirajesh.com.np