Scribd
Upload
16 views31 pages

ISdocumentation 161235

Uploaded by

kafle1292
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
16 views31 pages

ISdocumentation 161235

Uploaded by

kafle1292
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 31

Module Code & Module Title

CC4057NP Introduction to Information Systems

Assessment Weightage & Type


30% Group Coursework

Year and Semester


2023-24 Autumn

Student’s Name: Suraj Ghimire(23049005) , Ishaan


Poudel(23048987) , Asbin Rana Bhat(23048760) , Rajat
Aacharya(23048883) , Suvam Khanal(23048958)

Group: C8

1
Assignment Due Date: 2024-01-31
Assignment Submission Date: 2024-01-31

Tale of Contents
1.Introduction
1.1 HTML
1.2 CSS
1.3 JavaScript
2.Wireframe
3. Research and Reference
4.Test
5.Conclusion

1 . Introduction :
In this morden life , many people are depending upon the
technologies which includes the usage of online platforms . So ,
nowadays online websites are used more than actual physical
stores. One of the main reason behind the usage of online
websites is because of the recent pandamic known as COVID 19 .
During this period , many people stopped going out of their
houses which highly affect the usage of physical stores . Many
people shut down their stores .Then online websites came in
clutch and suddenly many people start to use this platforms rather
than opening a physical stores .This highly prevent people from
suffering from the pandamic. Now about the coursework , the
main purpose of this coursework is to offer information about our
course and to educate students how to make a simple website.
The main purpose of this website is to use HTML, CSS, and

2
JavaScript to develop a simple website of printer shop. Home,
Product, Blog, About us, and Research are the five websites that
we must construct. HTML, CSS, and JavaScript are all required
skills for building this website.

The three main language used in this coursework are given


below:

• HTML :

Figure 1: Logo of HTML

3
HTML stands for HyperText Markup Language. It's a markup language
that's used to create web pages. HTML is a markup language that
combines hypertext with markup. The term "hypertext" refers to the
connection between online pages. The first HTML was written by
Tim-Berners-Lee in 1993.
We used various tags when creating the website, such as:

<!DOCTYPE>
-It defines the type of document.

(<html> ...</html>)
-It defines the root of an HTML document.

(<head>...</head>)
-It contains a metadata and information for the document.

(<body>...</body>)
-It defines the body of the document.

(<h1>to<h6>)
-It defines all the heading used in HTML.

<img>
-It defines an image used in HTML document.

4
<link>
-It defines the relationship between a document and an external
resource.

(<p>...</p>)
-It defines a paragraph in a document.

(<style>...</style>)
-It defines a style information for a document.

(<ul>...</ul>)
-It used for unordered list used in a document.

• CSS :

5
Figure 2: Logo of CSS

CSS stands for Cascading Style Sheets. It is a language for defining the
appearance of our Web pages, such as colours, layout, and fonts, in
order to make our web sites attractive to users who visited our site.

There are three types of CSS that are described below :


1. Inline CSS
Inline CSS are used inside the HTML statements. It is utilized in
little area. We can utilize inline CSS whenever our requirements are

6
really little. It will only have an effect on a single element. In HTML,
we need distinct views for each HTML tags, thus we utilize inline CSS.

Figure 3:Inline CSS

2. Internal CSS
This type of CSS is used inside the HTML . Internal CSS is used in
the <head> section . This CSS also requires a class to be used.Internal
CSS affects all of the body section's components. Internal CSS is very
easy to use and is very effective.

7
Figure 4:Internal CSS

3. External CSS
To use the external CSS , a .css file is created outside the HTML and
is connected to the HTML using certified code. This type of CSS is used
when there are lot of HTML attributes. To use this CSS , we have to
make a class inside the HTML tag.

8
Figure 5:External CSS

• JavaScript

9
Figure 6: logo of JavaScript

JavaScript is a dynamic programming language that's used for a


variety of purposes, including web development, web apps, game
creation, and more. It enables you to add dynamic features to web
sites that you couldn't achieve with only HTML and CSS.

There are two types of JavaScript described below:


1. Internal JavaScript
JavaScript can be inserted directly to the HTML file by writing
the code within the <script> element. <script> tags can be placed
inside the <head> or <body> tags depending on the situations.

10
Figure 7: Internal JavaScript

2.Wireframes
Wireframe is a image or blueprint which displays the functional
elements of a website or page, typically used for planning a site's
structure and functionality.

• Home Page

11
Figure 8: Wireframe of Home Page

12
Figure 9:Home page of our website

• Product Page

13
Figure 10:Wireframe Of product page

14
Figure 11:Product page of our website

• Research Page

15
Figure 12:Wireframe of Research page

16
Figure 13:Research page of our website

• Blog Page

17
Figure 14 : Wireframe of blog page

18
Figure 15:Blog Page of our website

•
• About us page

19
Figure 16:Wireframe of About us page

20
Figure 17:About us oage of our website

3.Research And References :

• Research 1 :

Figure 18: Navigation Bar of referenced website

For our header , we have taken https://www.hyundai.com/eu.html as the reference


website for our actual web design. In our website , the logo is at the left of the
nav bar as in the reference website.

21
Figure 19:Navigation Bar of our website

• Research 2 :

Figure 20:Product page of reference website

For our product page , we took the referenece from


https://www.daraz.com.np/catalog/?q=printer&_keyori=ss&from=input&spm=a2a0e.11
779170.search.go.287d2d2bxN7R5w . It is simple clean and very attractive.

22
Figure 21:Product page of our website

• Research 3 :

Figure 22:Footer of referenced website

23
For the footer , we took he reference from https://esewa.com.np/#/home . We like
the overall design of the footer , so we decided to take reference from it.

Figure 23:Footer of our website

• Research 4:

Figure 24:Feedback section of reference website

For the feedback part , we took reference from


https://pubgmobile.helpshift.com/hc/en/3-pubg-mobile/faq/6-i-have-a-suggestion-
feedback/ because the design of that was very soothing and attractive.

24
Figure 25:Feedback section of our website

4. Testing
• Test 1 :

25
Figure 26:Test 1

26
Objective Check the validation of feedback form

Action Clicking send message button without filling


the form.
Expected output The alert box appears when the user tries to
submit a form without filling the areas.
Actual Output The alert box appeared when the user tried
to submit a form without filling the areas.

Conclusion Successful

Table 1 : Test 1

• Test 2

27
Figure 27:Test 2

Objective Check whether navigation bar works or


not.
Action Clicking on Product of navigation bar
while being active on home page.
Expected Outcome Should move to Product page after
clicking on Product of navigation bar.
Actual Outcome Has moved to Product page after clicking
on Product of navigation bar.

Conclusion Test was successful.

Table 2 : Test 2

28
• Test 3:

Figure 28:Test 3

29
Objective Check whether the button (Read more and Read
less) works or not.
Action Clicking the button (Read More) on Blog page.

Expected Outcome Should show rest of the hidden paragraphs


and read more button should change into read
less button.
Actual Outcome Showed the rest of the hidden paragraph and
read more button was changed into read less
button.
Conclusion Successful

Table 3 : Test 3
5.Conclusion
This is the third and final coursework of “Introduction to Information System”
for first semester. In this coursework, we have used HTML, CSS and JavaScript
for creating the website. While doing this coursework, many things were learnt.
Before starting this coursework, I had a little knowledge about HTML, CSS and
JavaScript. It was hard for me to complete this coursework with that little
knowledge on web development. Then, I started learning from W3 School and
asked module teacher for help. It makes me so easy to start the coursework. A
lot of problems like aligning the text and picture in correct way in the webpage,
adjusting margin and padding were faced while developing the website.

Although, the coursework was tough to complete but it was equally fruitful.
Itmakes me learnt many things about web development. Because of beginner
in web development, internet was the best option for me to gain more
knowledge and design a productive website. At first, the codes weren’t so good
and the module teacher makes me learnt about the coding style, use of every
tag and importance of every tag in web development. After a lot of hard works
and pressure, this coursework was completed. This coursework has developed
my personal skill on web development which will be beneficial for upcoming
days. This coursework makes me to develop website without facing any errors.
From having little knowledge to gain vast knowledge on web development, this
coursework has helped. It was so fun while completing the coursework. After

30
all, the coursework was completed on time and was very beneficial. As it was
tough at starting but it ended with a lot of happiness and joyful.

31

You might also like