KHWOPA SECONDARY SCHOOL

DEPARTMENT OF COMPUTER SCIENCE

Dekocha-6, BHAKTAPUR

A FINAL REPORT
On
“About Nepal Webpage”

A report submitted for the partial fulfillment of requirement for the degree of NEB
in Computer Science

Submitted by: Submitted to:

Anmol Shrestha (772604159) Computer Science Department
Abhinash Rajbahak (772604068) Khwopa Secondary School
Bishal Kharbuja (772604302) Dekocha-06, Bhaktapur
Bikesh Shrestha (772604264)
Perfect Nala (772604697)
Samir Tiwari (77260455B)

UNDER THE GUIDANCE OF

Er. Pujan Changubhari

Date of submission: 2077/ /

i
 DEPARTMENT OF COMPUTER SCIENCE
KHWOPA SECONDARY SCHOOL
DEKOCHA-6, BHAKTAPUR

CERTIFICATE

This is to certify that the project entitled "About Nepal" submitted by Mr. Anmol
Shrestha, Mr. Bishal Kharbuja, Mr. Abinash Rajbahak, Mr. Bikesh Shrestha, Mr.
Samir Tiwari, & Mr.Perfect Nala in a partial fulfillment of the requirements for the
internal marks of Computer Science in NEB (Nepal Education Board) Class 11 (XI),
is a bonafide work to the best of my/our knowledge and may be placed before the
examination Board for their consideration.

Panel of Examiners:
Name Signature Date

External Examiner

……………………

Project Supervisors

Er. Pujan Changubhari

Er. Ayush Dumaru

ii
 ACKNOWLEDGEMENT

We are thankful to all those who have helped us directly or indirectly with this
project. Foremost, we would like to thank the Department of Computer Science of
Khwopa Secondary School for the giving an opportunity to carry out project entitled
"About Nepal".
We would like to thank our computer teachers Er. Pujan Changubhari and Er. Ayush
Dumaru for their guidance while developing project and also for organizing the
project schedules. Also we would like to acknowledge their effort that encouraged us
to take this challenging project. We would also like to offer our gratitude towards
some of our friends who helped throughout our project development phase by
providing several references regarding different links for code and making project
report.

iii
 ABSTRACT

This is our project about our lovely and beautiful country Nepal. In this world there
are more than 7 billion of people but they don’t know about the country Nepal. To
give the information about our country to the whole world we create our new HTML
project “About Nepal”. In this webpage you and know the information about our
home country Nepal where we have give some information about our beautiful
country Nepal. We also attached the beautiful pictures of historical famous place of
Nepal. So you can see the attractive picture about the tourism places located in Nepal.
The main objective of this project is to give information about the natural beautiful
country “NEPAL” and to attract more and more tourist to visit our natural beauty
country “NEPAL”.

iv
 TABLE OF CONTENTS

CHAPTER TITLE PAGE NO

Title Page i
Certificate ii
Acknowledgement iii
Abstract iv
Table of Contents v

1 INTRODUCTION 1-2
1.1 Background
1.2 Objectives
1.3 Application
1.4 Scope and Limitations

2 METHODOLOGY 3-8
2.1 Code 3-6
2.2 Diagram 7
2.3 Tools & Platform 8

3 DISCUSSION & CONCLUSION 9

3.1 Discussion
3.2 Conclusion

APPENDIX 10-13
REFERENCES 14

v
 1. INTRODUCTION

1.1. BACKGROUND
Nepal is a developing country and it is slowly developing in technology sector.
One of the main factors of developing country is implementation of technology in
country. Technology is rapidly increasing in today’s world. Internet is one of the
rapidly increasing technologies. The use and user are increasing day by day.
Nowadays, people are using internet for communication, collaboration, and many
others things that done online.

In the world of internet we have create a new webpage to give information about
our country “Nepal” to the whole world through the help of internet. In this
webpage we have written about the natural beauty of country “Nepal”. By visiting
this webpage you can learn many more things you don’t know about the country
Nepal. We have attached the beautiful pictures of the tourism places and historical
places of Nepal which helps to attract the internal tourist and external tourist too.

1.2. OBJECTIVES
 Main objective of this project is to give information about the country “Nepal”
to whole world.
 To attract tourists to visit our country “Nepal”.
 To give information about the world heritage sites of Nepal.

1.3. APPLICATIONS
 The main use of our website is to give information about our country.
 To let foreigners to know about our country.
 To make easier for foreigners to visit our country.
 To make our country more famous in the world.

1.4. SCOPE & LIMITATION

The first and foremost thing our country Nepal is not as popular as our
neighboring countries like India and China. So the scope of our website is to make
our country famous by giving the information about our country to those people
who want to visit or to know about our country.

1
The limitation of our web site is that in some country it is banned to visit website
like ours and other limitations are that all the people in the world don’t have
access to the internet and to visit our website they need internet connection.

2
 2. METHODOLOGY
2.1. CODE
We have used the following codes to create our website.
In case of HTML we have used the following tags:-
<html></html>
<head> <title> <link rel= type= href= > </title> </head>
<body> </body>
<header> </header>
<div> </div>= The <div> tag defines a division or a section in an HTML document.
<a href> </a>
<nav> </nav>= The HTML <nav> element represents a section of a page whose
purpose is to provide navigation links, either within the current document or to
other documents.
<main></main> =The <main> tag specifies the main content of a document .
<section></section> =Section tag defines the section of documents such as
chapters, headers, footers or any other sections.
<h1> </h1> =Heading tag
<h2> </h2> =Heading tag
<h3></h3>=Heading tag
<p></p>=Paragraph tag
<ul></ul>= undefined list
<li></li>= list
<br>= Break Tag
<img src=> Image Tag
<pre></pre>= Preformatted Tag
<footer></footer>=The <footer> element is a structural element used to identify
the footer of a page, document, article, or section.
<button> </button>= Button Tag
<form></form>= Form Tag
<script></script>= Script tag is used to insert javascript in html.
<input>= Input Tag.

3
In case of CSS (Cascading Style Sheet) we have use following tags:-

 Margin:- The CSS margin properties are used to create space around elements,
outside of any defined borders.
 Padding:- The CSS padding properties are used to generate space around an
element's content, inside of any defined borders.
 Background:- The background shorthand CSS property sets all background style
properties at once, such as color, image, origin and size, or repeat method.
 Background-color:- The background-color properties are used to put color in
background.
 Background-Image:- The background-image property sets one or
more background images for an element.
 Background-repeat:- The background-repeat property in CSS is use
to repeat the background image both horizontally and vertically.
 Width:- The width property in CSS specifies the width of the element's content
area.
 Overflow:- The CSS overflow property controls what happens to content that is
too big to fit into an area.
 List-style:- The list-style-position property specifies the position of the list-item
markers (bullet points).
 Float:- The float CSS property places an element on the left or right side of its
container, allowing text and inline elements to wrap around it.
 Display:- The Display property in CSS defines how the components(div,
hyperlink, heading, etc) are going to be placed on the web page.
 Color:- The <color> CSS data type represents a color in the RGB color space.
 Font-family:- The font-family CSS is used to change the style of the font.
 Font-size:- The font-size CSS is used to increase and decrease the font size.
 Text-decoration:- The text-decoration property is used to add "decorations" to
inline content.

4
 Text-style:- The CSS properties used to style text generally fall into two
categories, which we'll look at separately in this article: Font styles: Properties
that affect the font that is applied to the text, affecting what font is applied, how
big it is, whether it is bold, italic, etc.
 Word-spacing:- The word-spacing property increases or decreases the white space
between words.
 Font-weight:- The font-weight property sets how thick or thin characters in text
should be displayed.
 Letter-spacing:- The letter-spacing property increases or decreases the space
between characters in a text.
 Outline:- An outline is a line that is drawn around elements, OUTSIDE the
borders, to make the element "stand out". CSS has the
following outline properties: outline-style.
 Height:- The height property in CSS defines specifies the content height of boxes
and accepts any of the length values.
 Transition:-CSS transitions provide a way to control animation speed when
changing CSS properties.
 Border:-CSS border is used to put the border in the webpage.
 Border-radius:- The border-radius CSS property rounds the corners of an
element's outer border edge.
 Cursor:- The cursor property of CSS allows you to specify the type of cursor that
should be displayed to the user.
 Box-shadow:- The box-shadow CSS property adds shadow effects around an
element's frame.
 Box-sizing:- The box-sizing property allows us to include the padding and border
in an element's total width and height.
 Transform:- The transform CSS property lets you rotate, scale, skew, or translate
an element.
 Position:- The position CSS property sets how an element is positioned in a
document. The top , right , bottom , and left properties determine the final location
of positioned elements.

5
 Justify-content:- The justify-content property is a sub-property of the Flexible Box
Layout module. It defines the alignment along the main axis.
 Animation:- An animation lets an element gradually change from one style to
another.
 Content:- The content CSS property replaces an element with a generated value.
 @keyframes:- The @keyframes CSS at-rule controls the intermediate steps in
a CSS animation sequence by defining styles for keyframes (or waypoints) along
the animation sequence. This gives more control over the intermediate steps of the
animation sequence than transitions.

In case of JavaScript we have used the following codes:-

 Return validation( );
 Function validation( ){ }
 Var
 If
 Else
 Alert
 Focus
 Return false
 Else if
 document.getElementById
 ==
 &&
 !=
 <=
 ||

6
 2.2. BLOCK DIAGRAM

Visitors Home Page

Learn More

Sign Up

Log In

Contact Us

About Us

Gallery

When we open our project, at first it open our index.html which is our homepage. In
homepage there we can see seven button when redirect to different pages.
 When we press “Learn More” button it redirect us to Learn More page where the
information about Nepal is written.
 When we press the “Sign Up” button it redirect us to Create Account page from
where we can make a account.
 When we press the “Log IN” button it redirect us to Log In page from where we can
log In our account.
 When we press the “Gallery” button it redirect us to the gallery page where lots of
image is provided.
 When we press the “Contact Us” button it redirect us to contact us page from where
we can fill our message and send it to the admin.
 When we press the “About Us” button it redirect us to about us page where we have
provide our information and you can also contact us by clicking the button contact
which redirect you to our facebook profile.

7
2.3 TOOLS AND PLATFORM
The tools we used to create our project is (Sublime text Editor) which is a
sophisticated text editor for code, markup and prose. You'll love the slick user
interface, extraordinary features and amazing performance.

The tools we used to view the final report of webpage is Browser like:- (Chrome,
Internet explorer, UC- Browser, etc..)

8
 3. DISCUSSION & CONCLUSION
DISCUSSION

By doing the project of html we are able to create web page and design it. In this
project we were able to give information about our country Nepal to those people who
want to know about it.

CONCLUSION

In this project we were able to create a web page where we showed information of our
great country Nepal. In the webpage we created you can also contact us to know more
about our web page and about its uses.

9
APPENDIX

 This is our Home page from here we can jump into other pages like ( Learn
more, Sign Up, Log In, etc.)

 This is Learn more page here you get the information about Nepal.

10
 This is Gallery page where we have insert the beautiful picture of Nepal.

 This is also a Gallery page after clicking the small image in Gallery page we
get the big size of that image here we have also include the close button left
right button which help user to easily slide to another image.

11
 This is our About Us page where we have include our information. Below
contact button help to redirect in our facebook page.

 This is our contact Us page from where anyone can send a message by
entering their valid name, email address, and message.

12
 This is our Sign-In page from where user can make their account for our page.

 This is our Log-In page form where user can login their account easily.

13
REFERENCES
1) https://www.youtube.com/watch?v=9_UQkEgtvfk&feature=youtu.be&fbclid=IwA
R3qkdG0U-3FcMGrfyNBz9s1-4PmSCOKiAGJwwnGv0BUHxjkP2Lyifw3RN8
2) https://www.youtube.com/watch?v=TSRtBISvsh4
3) https://www.w3schools.com/colors/colors_picker.asp
4) https://www.w3schools.com/css/css_overflow.asp
5) https://www.w3schools.com/css/css_float.asp
6) https://www.w3schools.com/css/css3_transitions.asp
7) https://www.w3schools.com/css/css3_animations.asp

14