Lab Report – BIM 3rd Semester – Web Technology I
Create a simple HTML page with a title, heading, and paragraph.
Source Code:
<!DOCTYPE html>
<html>
<head>
<title>First Question</title>
</head>
<body>
<h1>Heading</h1>
<p>This is First Paragraph</p>
<p>This is Second Paragraph</p>
</body>
</html>
Add a horizontal line and line break in your page.
Source Code:
<!DOCTYPE html>
<html>
<head>
<title>Second Question</title>
</head>
<body>
<h3>Horizontal Line & Line Break Demo</h3>
<hr>
<p> I am Ashesh Neupane <br> Student of BIM <br> Shanker Dev Campus </p>
</body>
</html>
https://www.asheshneupane.com.np/bim https://www.highapproach.com/bim
Lab Report – BIM 3rd Semester – Web Technology I
Write an HTML code to demonstrate different level of Headings.
Source Code:
<!DOCTYPE html>
<html>
<head>
<title>Different Levels of Headings</title>
</head>
<body>
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>
</body>
</html>
Create a page that displays your name, address, and email using proper HTML
tags.
Source Code:
<!DOCTYPE html>
<html>
<head>
<title>Contact Information</title>
</head>
<body>
<h1>Contact Information</h1>
<p><b>Name: </b>Ashesh Neupane</p>
<p><b>Address: </b>Kathmandu, Nepal</p>
</body>
</html>
https://www.asheshneupane.com.np/bim https://www.highapproach.com/bim
Lab Report – BIM 3rd Semester – Web Technology I
Write a program to format text using <b>, <i>, <u>, <s>, <tt>, <sup>, <sub>,
<big> and <small>.
Source Code:
<!DOCTYPE html>
<html>
<head>
<title>Format Text</title>
</head>
<body>
<p><b>Bold</b></p>
<p><i>Italic</i></p>
<p><u>Underline</u></p>
<p><b>Entry Fee: </b><s>1999</s> Free</p>
<p><tt>Using tt tag</tt></p>
<p>(a+b)<sup>2</sup></p>
<p>Water = H<sub>2</sub>O</p>
<p><big>Use of big tag</big></p>
<p><small>Use of small tag</small></p>
</body>
</html>
https://www.asheshneupane.com.np/bim https://www.highapproach.com/bim
Lab Report – BIM 3rd Semester – Web Technology I
Write an HTML code to demonstrate the following phrase elements(<em>,
<strong>, <blockquote>, <cite>, <q>, <abbr>, <acronym>, <dfn>, <code>,
<kbd>, <var>, <samp>, and <address>).
Source Code:
<!DOCTYPE html>
<html>
<head>
<title>Phrase Elements Demonstration</title>
</head>
<body>
<p><em>Emphasized text</em></p>
<p><strong>Using Strong</strong></p>
<blockquote>"Welcome to my website asheshneupane.com.np"</blockquote>
<p><cite>ASHESHNEUPANE.COM.NP</cite> - A website for BIM Study Notes</p>
<p>Dipeen Dahal said, <q>I am a student of Shanker Dev Campus.</q></p>
<p><abbr title="Khadga Prasad Sharma Oli">K.P. Sharma Oli</abbr> is the Prime Minister of Nepal.</p>
<p><acronym title="Bachelors of Information Management">BIM</acronym> Notes are widely available in
Ashesh Neupane's Website.</p>
<p><dfn title="Shanker Dev Campus">SDC</dfn> is constituent college of Tribhuvan University.</p>
<p><b>Java Code:</b> <code>System.out.print("Ashesh Neupane");</code></p>
<p>Press <kbd>Ctrl</kbd> + <kbd>C</kbd> to copy.</p>
<p>Area of Rectangle: <var>l</var>x<var>b</var></p>
<p>404 Error <samp>Sorry! This Page is currently unavailable</samp></p>
<address>
Ashesh Neupane<br>
Kathmandu<br>
Nepal<br>
</address>
</body>
</html>
https://www.asheshneupane.com.np/bim https://www.highapproach.com/bim
Lab Report – BIM 3rd Semester – Web Technology I
Write an HTML code to demonstrate <pre> tag.
Source Code:
<!DOCTYPE html>
<html>
<head>
<title>Pre Tag Demo</title>
</head>
<body>
<b>Example of Loop:</b>
<pre>
for(int i=0;i<=5;i++) {
System.out.println("Ashesh Neupane");
</pre>
</body>
</html>
https://www.asheshneupane.com.np/bim https://www.highapproach.com/bim
Lab Report – BIM 3rd Semester – Web Technology I
Write an HTML code to demonstrate ordered, unordered and definition list.
Source Code:
<!DOCTYPE html>
<html>
<head>
<title>List Demo</title>
</head>
<body>
<h1>Ordered List</h1>
<p><b>BIM Colleges in KTM:</b></p>
<ol type="1">
<li>Shanker Dev Campus</li>
<li>Nepal Commerce Campus</li>
<li>Orchid College</li>
</ol>
<p><b>BBA Colleges in KTM:</b></p>
<ol type="A">
<li>Shanker Dev Campus</li>
<li>Nepal Commerce Campus</li>
<li>Patan Multiple Campus</li>
</ol>
<p><b>BBM Colleges in KTM:</b></p>
<ol type="I">
<li>Shanker Dev Campus</li>
<li>Nepal Commerce Campus</li>
<li>Prime College</li>
</ol>
<h1>Unordered List</h1>
<p><b>BIM Colleges in KTM:</b></p>
<ul type="disc">
<li>Shanker Dev Campus</li>
https://www.asheshneupane.com.np/bim https://www.highapproach.com/bim
Lab Report – BIM 3rd Semester – Web Technology I
<li>Nepal Commerce Campus</li>
<li>Orchid College</li>
</ul>
<p><b>BBA Colleges in KTM:</b></p>
<ul type="square">
<li>Shanker Dev Campus</li>
<li>Nepal Commerce Campus</li>
<li>Patan Multiple Campus</li>
</ul>
<p><b>BBM Colleges in KTM:</b></p>
<ul type="circle">
<li>Shanker Dev Campus</li>
<li>Nepal Commerce Campus</li>
<li>Prime College</li>
</ul>
<h1>Definition List</h1>
<dl>
<dt>SDC</dt>
<dd>Shanker Dev Campus - Located in Putalisadak</dd>
<dt>NCC</dt>
<dd>Nepal Commerce Campus - Located in New Baneshwor</dd>
</dl>
</body>
</html>
https://www.asheshneupane.com.np/bim https://www.highapproach.com/bim
Lab Report – BIM 3rd Semester – Web Technology I
Create a nested list using both ordered and unordered list.
Source Code:
<!DOCTYPE html>
<html>
<head>
<title>Nested List</title>
</head>
<body>
<h1>Nested List</h1>
<ol type="1">
<li>Tribhuvan University
<ul type="disc">
<li>Faculty of Management
<ul type="square">
<li>Office of the Dean
<ol type="a">
<li>Dean</li>
<li>Assistant Dean</li>
<li>Other Staffs</li>
</ol>
</li>
<li>Shanker Dev Campus
<ol type="a">
<li>Campus Chief</li>
<li>Assistant Campus Chief</li>
<li>Program Director</li>
<li>Professors</li>
<li>Associate Professors</li>
<li>Lecturers</li>
</ol>
</li>
https://www.asheshneupane.com.np/bim https://www.highapproach.com/bim
Lab Report – BIM 3rd Semester – Web Technology I
</ul>
</li>
</ul>
</li>
</ol>
</body>
</html>
Add a hyperlink to another website using <a> tag.
Source Code:
<!DOCTYPE html>
<html>
<head>
<title>Hyperlink Example</title>
</head>
<body>
<h1>Hyperlink Example</h1>
<p>Click below to view BIM Notes:</p>
<a href="https://www.asheshneupane.com.np/bim">Link 1</a> <br> <br>
<a href="https://www.highapproach.com/bim">Link 2</a>
</body>
</html>
https://www.asheshneupane.com.np/bim https://www.highapproach.com/bim
Lab Report – BIM 3rd Semester – Web Technology I
Create an image gallery using <img> and <a> tags.
Source Code:
<!DOCTYPE html>
<html>
<head>
<title>Image Gallery</title>
</head>
<body>
<h1>Image Gallery</h1>
<p>Click on an image to view it in full size.</p>
<a href="image1.jpg">
<img src="image1.jpg" alt="Image 1" width="200">
</a>
<a href="image2.jpg">
<img src="image2.jpg" alt="Image 2" width="200">
</a>
<a href="image3.jpg">
<img src="image3.jpg" alt="Image 3" width="200">
</a>
<a href="image4.jpg">
<img src="image4.jpg" alt="Image 4" width="200">
</a>
</body>
</html>
https://www.asheshneupane.com.np/bim https://www.highapproach.com/bim
Lab Report – BIM 3rd Semester – Web Technology I
Make an image clickable and open a new webpage when clicked.
Source Code:
<!DOCTYPE html>
<html>
<head>
<title>Clickable Image</title>
</head>
<body>
<h1>Clickable Image Example</h1>
<p>Click the image below to view BIM Study Notes:</p>
<a href="https://www.asheshneupane.com.np/bim">
<img src="image.jpg" alt="Clickable Image" width="300">
</a>
</body>
</html>
https://www.asheshneupane.com.np/bim https://www.highapproach.com/bim
Lab Report – BIM 3rd Semester – Web Technology I
Create a webpage that links to different sections using anchor links.
Source Code:
<!DOCTYPE html>
<html>
<head>
<title>Anchor Links Example</title>
</head>
<body>
<h1>Webpage with Anchor Links</h1>
<p>Click the links below to jump to different sections:</p>
<ul>
<li><a href="#section1">Go to Section 1</a></li>
<li><a href="#section2">Go to Section 2</a></li>
<li><a href="#section3">Go to Section 3</a></li>
<li><a href="#section4">Go to Section 4</a></li>
</ul>
<h2 id="section1">Section 1</h2>
<p>This is the content of Section 1.</p>
<a href="#top">Back to Top</a>
<h2 id="section2">Section 2</h2>
<p>This is the content of Section 2.</p>
<a href="#top">Back to Top</a>
<h2 id="section3">Section 3</h2>
<p>This is the content of Section 3.</p>
<a href="#top">Back to Top</a>
<h2 id="section4">Section 4</h2>
<p>This is the content of Section 4.</p>
<a href="#top">Back to Top</a>
</body>
</html>
https://www.asheshneupane.com.np/bim https://www.highapproach.com/bim
Lab Report – BIM 3rd Semester – Web Technology I
Embed a video and an audio file in your webpage.
Source Code:
<!DOCTYPE html>
<html>
<head>
<title>Video and Audio</title>
</head>
<body>
<h1>Video and Audio Example</h1>
<h2>Video</h2>
<video src="an.mp4" width="500" controls></video>
<h2>Audio</h2>
<audio src="an.mp3" controls></audio>
</body>
</html>
https://www.asheshneupane.com.np/bim https://www.highapproach.com/bim
Lab Report – BIM 3rd Semester – Web Technology I
Design an HTML Table with Student Details (S.N. , Name, Roll No. , Marks,
Remarks).
Source Code:
<!DOCTYPE html>
<html>
<head>
<title>Student Details</title>
</head>
<body>
<center>
<h2>Student Details</h2>
<table border="">
<thead>
<th>S.N.</th>
<th>Name</th>
<th>Roll No.</th>
<th>Marks</th>
<th>Remarks</th>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Ashesh Neupane</td>
<td>16295</td>
<td>88</td>
<td>Pass</td>
</tr>
<tr>
<td>2</td>
<td>Bishow Raj Saru Magar</td>
<td>16299</td>
https://www.asheshneupane.com.np/bim https://www.highapproach.com/bim
Lab Report – BIM 3rd Semester – Web Technology I
<td>95</td>
<td>Pass</td>
</tr>
<tr>
<td>3</td>
<td>Nishant Lamichhane</td>
<td>16323</td>
<td>97</td>
<td>Pass</td>
</tr>
<tr>
<td>4</td>
<td>Parbat Adhikari</td>
<td>16324</td>
<td>99</td>
<td>Pass</td>
</tr>
<tr>
<td>5</td>
<td>Sanyam Kothari</td>
<td>16335</td>
<td>100</td>
<td>Pass</td>
</tr>
</tbody>
</table>
</center>
</body>
</html>
https://www.asheshneupane.com.np/bim https://www.highapproach.com/bim
Lab Report – BIM 3rd Semester – Web Technology I
Write an HTML code to demonstrate rowspan and colspan.
Source Code:
<!DOCTYPE html>
<html>
<head>
<title>Rowspan and Colspan</title>
</head>
<body>
<table border="">
<thead>
<th colspan="4">BIM 3rd Sem Result Ledger 2025</th>
</thead>
<tbody>
<tr>
<td colspan="2"><b>Section A</b></td>
<td colspan="2"><b>Section B</b></td>
</tr>
<tr>
<td><b>Student Name</b></td>
<td><b>Remarks</b></td>
<td><b>Student Name</b></td>
<td><b>Remarks</b></td>
</tr>
<tr>
<td>Ashesh</td>
<td rowspan="2">Pass</td>
<td>Raghu</td>
<td rowspan="2">Pass</td>
</tr>
<tr>
<td>Bishow</td>
https://www.asheshneupane.com.np/bim https://www.highapproach.com/bim
Lab Report – BIM 3rd Semester – Web Technology I
<td>Manish</td>
</tr>
<tr>
<td>Ram</td>
<td rowspan="2">Fail</td>
<td>Gopal</td>
<td rowspan="2">Fail</td>
</tr>
<tr>
<td>Shyam</td>
<td>Pratik</td>
</tr>
</tbody>
</table>
</body>
</html>
https://www.asheshneupane.com.np/bim https://www.highapproach.com/bim
Lab Report – BIM 3rd Semester – Web Technology I
Create a contact form with input fields for name, email, Gender, Age, Country,
Skills and comments. Also include a submit and a reset button.
Source Code:
<!DOCTYPE html>
<html>
<head>
<title>Contact Form</title>
</head>
<body>
<h1>Contact Form</h1>
<form>
Name:
<input type="text" name="name" placeholder="Full Name">
<br><br>
Email:
<input type="email" name="email" placeholder="[email protected]">
<br><br>
Gender:
<input type="radio" name="gender">Male
<input type="radio" name="gender">Female
<input type="radio" name="gender">Other
<br><br>
Age:
<input type="number" name="Age" placeholder="Age">
<br><br>
Country:
<select>
<option>Nepal</option>
<option>India</option>
<option>Others (Please Specify in Comment)</option>
</select>
https://www.asheshneupane.com.np/bim https://www.highapproach.com/bim
Lab Report – BIM 3rd Semester – Web Technology I
<br><br>
Skills:
<input type="checkbox" name="skills">Reading
<input type="checkbox" name="skills">Writing
<input type="checkbox" name="skills">Listening
<input type="checkbox" name="skills">Speaking
<br><br>
Comments:
<br><br>
<textarea id="textarea" rows="10" cols="40" placeholder="Enter Your Comments ...">
</textarea>
<br><br>
<input type="submit">
<input type="reset">
</form>
</body>
</html>
https://www.asheshneupane.com.np/bim https://www.highapproach.com/bim
Lab Report – BIM 3rd Semester – Web Technology I
Create a webpage using <header>, <footer>, <nav>, <article>, <section>,
<aside>.
Source Code:
<!DOCTYPE html>
<html>
<head>
<title>Webpage Example</title>
</head>
<body>
<header>
<h1>Welcome to the Website</h1>
<p>Curosity Meets Knowledge</p>
</header>
<nav>
<ul>
<li><a href="https://www.asheshneupane.com.np">Home</a></li>
<li><a href="https://www.asheshneupane.com.np/about">About</a></li>
<li><a href="https://www.asheshneupane.com.np/bim">Study Notes</a></li>
<li><a href="https://www.asheshneupane.com.np/contact">Contact</a></li>
</ul>
</nav>
<main>
<article>
<h2>About Me</h2>
<p>Welcome to my website! I'm Ashesh Neupane, currently pursuing a Bachelor of Information Management
(BIM) at Tribhuvan University.</p>
</article>
<section>
<h2>Our Services</h2>
<p>We offer helpful study materials for BIM student and IT Students for Free</p>
</section>
<aside>
https://www.asheshneupane.com.np/bim https://www.highapproach.com/bim
Lab Report – BIM 3rd Semester – Web Technology I
<h2>Related Links</h2>
<ul>
<li><a href="https://www.highapproach.com">HighApproach Website</a></li>
<li><a href="https://www.asheshneupane.com.np/blog">Blog</a></li>
</ul>
</aside>
</main>
<footer>
<p>© 2025 Ashesh Neupane</p>
</footer>
</body>
</html>
https://www.asheshneupane.com.np/bim https://www.highapproach.com/bim
Lab Report – BIM 3rd Semester – Web Technology I
Display an interactive map using <iframe>.
Source Code:
<!DOCTYPE html>
<html>
<head>
<title>Interactive Map</title>
</head>
<body>
<h1>Interactive Map Example</h1>
<p>Here is an embedded Google Map:</p>
<iframe
src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3532.445950005648!2d85.31923517424914!3
d27.703514176184697!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x39eb19a851d21aa7%3A0x1514f
22a42153099!2z4KS24KSC4KSV4KSw4KSm4KWH4KS1IOCkleCljeCkr-
CkvuCkruCljeCkquCkuA!5e0!3m2!1sne!2snp!4v1742308980613!5m2!1sne!2snp" width="600" height="450"
style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
</body>
</html>
https://www.asheshneupane.com.np/bim https://www.highapproach.com/bim
Lab Report – BIM 3rd Semester – Web Technology I
Embed a youtube video using <iframe>
Source Code:
<!DOCTYPE html>
<html>
<head>
<title>Embedded YouTube Video</title>
</head>
<body>
<h1>Watch this YouTube Video!</h1>
<!-- Embed YouTube Video with Correct Video ID -->
<iframe width="560" height="315" src="https://www.youtube.com/embed/Kb_3t520l9k" frameborder="0"
allow="autoplay; encrypted-media" allowfullscreen></iframe>
</body>
</html>
https://www.asheshneupane.com.np/bim https://www.highapproach.com/bim
