Introducton To Infromation System

Simran Pakhrin Tamang | 20049054
Module Code & Module Title

CC4057NI Introduction to Information Systems
Assessment Weightage & Type

30% Individual Coursework
Year and Semester

2019-20 autumn
Student Name: Simran Pakhrin Tamang

Group: C11
London Met ID: 20049054
College ID:
Assignment Due Date: 28th may
Assignment Submission Date: 28th may
I confirm that I understand my coursework needs to be submitted online via Google Classroom under the
relevant module page before the deadline in order for my assignment to be accepted and marked. I am
fully aware that late submissions will be treated as non-submission and a marks of zero will be awarded.
1
Table of Contents
1.Introduction: ............................................................................................................ 4
2. Discussion and analysis ......................................................................................... 5
2.1. Home page: ......................................................................................................... 5
2.2 About: ................................................................................................................... 6
2.3 BLOG: .................................................................................................................. 7
2.4 Research .............................................................................................................. 8
2.5 Contact: ................................................................................................................ 9
3.Program tools: ....................................................................................................... 10
3.1. Visual studio code: ......................................................................................... 10
3.2. Microsoft word: .............................................................................................. 10
3.3. Balsamiq: ....................................................................................................... 10
4. Wireframe: ...............................................................Error! Bookmark not defined.
4.1 wire frame for index.html ................................................................................ 11
4.2 Wire frame for about.html ............................................................................... 12
4.3 wire frame for blog.html .................................................................................. 13
4.4 Wireframe for research.html ........................................................................... 15
4.5 Wire frame of contact.html .............................................................................. 17
5. Testing ................................................................................................................. 18
5.1 Test 1.............................................................................................................. 18
5.2 Test 2.............................................................................................................. 19
5.3 Test 3.............................................................................................................. 20
5.4 Test 4.............................................................................................................. 21
5.5 Test 5.............................................................................................................. 22
6. Conclusion ........................................................................................................... 23
2
Table of Figures:
Figure 1: Wireframe 1............................................................................................... 11
Figure 2: Picture1 ..................................................................................................... 11
Figure 3 wireframe:2 ................................................................................................ 12
Figure 4 picture: 2 .................................................................................................... 12
Figure 5 wireframe: 3 ............................................................................................... 13
Figure 6 Picture: 3 .................................................................................................... 14
Figure 7wireframe: 4 ................................................................................................ 15
Figure 8 Picture: 4 .................................................................................................... 16
Figure 9 wireframe: 5 ............................................................................................... 17
Figure 10 Picture: 5 .................................................................................................. 17
Figure 11 picture: 6 .................................................................................................. 18
Figure 12 picture7 .................................................................................................... 19
Figure 13 picture 7 ................................................................................................... 20
Figure 14 picture 8 ................................................................................................... 21
Figure 15 picture 9 ................................................................................................... 22
Table of tables:
Table 1: test 1 .......................................................................................................... 18
Table 2 test 2 ........................................................................................................... 19
Table 3 test 3 ........................................................................................................... 20
Table 4 test 4 ........................................................................................................... 21
Table 5 test 5 ........................................................................................................... 22
3
1. Introduction:
The goal of this task is to construct an individual site with five site pages. The five
pages incorporate CV, online journals, and examination and approval structures. We
use HTML, CSS and Java Script for this venture. HTML represents Hyper Text Mark-
up language. HTML is utilized for making sites as it frames the skeleton of a website
pages. HTML isn't a programming language yet is an increase language used to sort
out the website page text. HTML is made by utilizing different labels.
We should also discuss about CSS. CSS represents Cascade Style Sheet. CSS is a
language that portrays the style of a HTML report or a page. By the utilization of CSS
we can style the substance of made in html or any pages.
Java Script, it is a lightweight programming language which is used to make site

pages natural and user friendly. Various stuffs ought to be conceivable through Java
Script like embeddings dynamic substance into HTML, react to events like customer
clicks thus forthAbout the task, we need to construct a website page congaing
legitimate route bar so we can surf through various page. The code is finished by
utilizing CSS that is utilized as inward, everlasting and furthermore inline CSS. It
contains java content to make site intelligent and easy to understand.
The fundamental target of this undertaking was to make a site that gives a functioning
structure approval. The site ought to contain a book field where the client can top off
their subtleties and a ready spring up box ought to seem at whatever point the content
region is vacant.
This project taught us about how to create a form validation. It also covered various
aspects of HTML and CSS.This project also covered about how to create a form
validation. It also taught us about how to implement CSS and HTML styling in our
website.
4
2. Discussion and analysis
2.1. Home page:

This is the principle page of the site. This page contains route bar on the upper left
50% of the site page. This site contains a photo and depiction of tasteful vintage 90s
PC. Different sorts of marks like Meta, div, p, h, etc. are used during the making of this
site page. The <Meta> names are used in this site page are set in the head information
of the website.Meta marks are used to depict the substance of the site page. It helps
in site upgrade. The course bar of this site page is drop down button. Exactly when
mouse is floated over the catch drop down happens show other page. It contains
outside joins which interfaces this page with other four html records. Various records
are related with greeting page using <ul> and <li> tag. Using HTML all the skeleton of
this site page was made and all of the styles were given using CSS. Arranging of this
page is done using internal, inline and external CSS. It moreover contain a heading.
For heading, we use heading tag <h1>. There is additionally a picture in the landing
page. <img src =”..” > tag was utilized to embed the photograph in the website page
and styling to the photograph was given utilizing CSS. Additionally there is a logo in
the website page.<img src=”..”alt=”logo”>.The styling was finished utilizing CSS. Each
piece of this coursework is partitioned into various segment utilizing <div> tag. What's
more, each tag is given either id or class. This makes changing specific items style
simpler. This page contain data about innovation with the goal that it would give
presentation about the site and what sort of site it is. This home page contains hover
effect. Every time you click the follow or explore the colour changes to colour plum.
5
2.2 About:
This part contains individual data about the originator of this site. This page contains
navigation bar on the upper left half of the website page. It additionally contains a
photograph which we can flip. Various sorts of labels like meta, div, p, h and so forth
are utilized during the creation of this site page. The <meta> labels are utilized in this
page are set in the head segment of this task. Meta labels are utilized to portray the
head of the website page. It helps in site advancement. The route bar of this site page
is drop down button. At the point when mouse is drifted over the catch drop down
happens show other website page. It contains outside joins which connects this page
with other four html documents. Different documents are associated with landing page
utilizing <ul> and <li> tag. Utilizing HTML all the skeleton of this site page was created
and every one of the styles were given utilizing CSS. Planning of this page is finished
utilizing inside, inline and outer CSS. It additionally contain a heading. For heading,
we use heading tag : <h1>. There is likewise a picture in the about me site page. <img
src > tag was utilized to embed the photograph in the page and styling to the
photograph was given utilizing CSS. In the image we can flip the picture utilizing
button. This page contains the CV of the engineer. The CV is put away in the container
which when drift change the shade of the entire site page. The CV contains the
individual data about the designer like age, interests, name, sexual orientation, spot
of birth, date of birth ethnicity just as scholastic subtleties. Along
with these, this page additionally contains arrangement of the designer. Portfolio
contains practically everything designer has been included and has finished. In
portfolio segment all the works alongside its photograph and depiction is joined. Both
CV and portfolio are put away in a container. <hr > and <br> labels are likewise utilized
in this site page the unique among <hr> and <br> tag is that <hr> tag makes a flat line
and <br> tag causes line break. Furthermore, when the container is floated it changes
the foundation shade of the site. I have also includes box for showing you the
expertise, my skills. All these styling are finished utilizing CSS. All outer, inside and
inline.CSS are being utilized in this site page.
6
2.3 BLOG:
This part contains articles about how innovation is affecting our every day lives and it
results. This page contains route bar on the upper left half of the website page. It
likewise contains a photograph which we can flip. Various kinds of labels like
meta, div, p, h and so forth are utilized during the making of this site page. The <meta>
labels are utilized in this website page are set in the head part of this venture. Meta
labels are utilized to portray the substance of the page. It helps in site advancement.
At the point when mouse is floated over the catch drop down happens show other site
page.
I have used the tag <section> and various div class. It contains outer joins which
connects this page with other four html records. Different documents are associated
with landing page utilizing <div> tag. Utilizing HTML all the skeleton of this site page
was created and every one of the styles were given utilizing CSS. Planning of this
page is done utilizing using inline and external CSS. It additionally contain a heading.
For heading, we use heading tag; <h1>. This segment contains article about the
technology, its Impacts and its benefits. It is finely organized. I have maintained the
font, font size, background colour and colour of the text. The site page has been
partitioned into two area which is isolated by two distinctive shading. I have included
blog in two column. Column right and column left. Each article in put away in the case
and when the crate in floated it changes its tone furthermore, half of the site page tone.
This impact was utilized by CSS. Outer, inner and inline CSS are utilized in this page.
This page additionally contain a 4 pictures. Using tags <img src=” “>.
7
2.4 Research
This part provides the collective information that was done for this website planning.
This site includes a route bar on the side of the site that is removed from beat. In
addition, it features a flip-ready photo. The creation of this website uses several kind
of labels such as meta, div, p, h, etc. The tags used are placed in the header section
of this document. To represent the contents of the website, meta-labels are used. The
optimization of the site makes a difference here. The navigation bar of this webpage
is drop down button. It contains external links which links this page with other four html
files. Other files are connected with home page using and tag. Using HTML all the
skeleton of this webpage was developed and all the styles were given using CSS.
Designing of this page is done using internal, inline and external CSS. It also contain
a heading. For heading we use heading tag: <h> this page also contains java script
code. When the button is clicked or hovered over it will also change its font as well as
it background colour. The research portion contains six parts.
I have used <img src=””> to insert image of the required website. The first portion
contains the research of home page from where it was taken reference from. The
second portion contains the preparation of drop down navigation bar. Third portion
contains the preparation of hover effect and where it was taken reference. Fourth part
contain design from where it was taken reference of form validation. The last part
contains the preparation of portfolio section from where it was taken reference from.
All the part in the research contains the link to the website from which reference is
taken.
8
2.5 Contact:
This webpage contains navigation bar on the top left side of the webpage. I have used
the tag form. Different types of tags like meta, div, p, h etc. are used during the making
of this webpage. The tags are set in the main portion of this project on this Web page.
The website contents are described via meta tags. It helps optimize the webpage. The
web page navigation bar is dropped. Show different websites while the mouse is
hovering over the drop button. I've got div class here included.
I have included 4 small logo on the bottom of the webpage. It contains external links
which links this page with other four html files. Other files are connected with home
page using and tag. Using HTML all the skeleton of this webpage was developed and
all the styles were given using CSS. Designing of this page is done using internal,
inline and external CSS. It also contain a heading. To use head we use heading tag
h.
I have also used button tag. I have used java script in the contact page. I have create
a pop up message when the text field is left empty and submit button is clicked. Form
tag is used to make the form validation. If all the text field are filled with correct values,
a successful message would pop up. The form is enclosed in border with pinkish
colour. I have also added a button “date and time”. If we click to that button the current
date and time would be shown.
9
3. Program tools:
I also have used various software for completion of this program.

They are:
3.1. Visual studio code:
Visual studio code is a very interesting and helpful software where you can write html
codes, CSS codes and also java script. For this project, I used this software to create
my HTML, CSS, and Java Script files. It was user friendly and helpful. the Studio
Visual code is an easy-to-use, easy-to-use, lag-not-to-use, and startup editor. it's really
cobvinient we can connect to live server and do not need to refresh our site time and
again..
3.2. Microsoft word:
Microsoft word is a popular is a popular word processer. It allows the user to type in
the file also, save and edit the saved document. It has various features which is useful
and is, also easier to user. I had written all the program here and Microsoft word also
converts our file to pdf without any extra software.
3.3. Balsamiq:
Balsamiq is a tool that helped me in making wireframe of different webpages. It is easy
to use and beginner friendly. It helps to give a form to the website. It show the user
who the layouts are organized.
4. Wireframe: Wireframes is a means of designing simple online service. A

wireframe is used most often to lay out a page's content and functionality based on
user requirements. It makes both user and non-user easy to get a website and its
layout. It is basically used to construct a basic page structure before visual design and
content are incorporated early in the development process. A wireframe's purpose is
to offer a visual understanding of a page early in a project.
10
4.1 wire frame for index.html
Figure 1: Wireframe 1
Figure 2: Picture1
The plan objective of this page is as clarified in wireframe. The navigation bar of
The page is as demonstrated in the wireframe, it ought to be in the upper right half of
the site page while the header ought to be in the focal point of the website page with
strong letter. Essentially, I have built a button with beneath the header as appeared in
the wireframe. I have applied a background photo. The objective of this plan is to run
hover effect in almost everything in the site page and show other data like route bar,
picture and content of the page. I have used tags such as <div>, <ul>, <li> and
<button>. All most all the plan coordinates the wireframe of this page.
11
4.2 Wire frame for about.html
Figure 3 wireframe:2
Figure 4 picture: 2
12
The design goal of this page is as described in the wireframe. For the web page as it
is displayed in the wireframe. The image is displayed on the right hand side o the
webpage in the wireframe. I have displayed my CV on the top left and portfolio on
the bottom left. Here I have added my expertise and my project in th efom of image. I
have displayed my expertise in inline-flex and in a box.Almost all designs match the
wireframe on this page.
4.3 wire frame for blog.html
Figure 5 wireframe: 3
13
Figure 6 Picture: 3
14
4.4 Wireframe for research.html
Figure 7wireframe: 4
15
Figure 8 Picture: 4
I have displayed the information in inline block. It seems just like I’ve displayed in
wireframe.
16
4.5 Wire frame of contact.html
Figure 9 wireframe: 5
Figure 10 Picture: 5
The design goal of the page is as explained in the wireframe. Header is placed in the
centre of the webpage with bold letter. This page contain forms. The form is inside the
box and there is a border abound the box. There is a submit button to submit the form
after filling up the form. When the form is submitted empty then empty message will
pop up. I have added various social-media’s logo. All most all the design matches the
wireframe of this page.
17
5. Testing
5.1 Test 1
Objective Check if pop up message appears button is clicked
Action Contact.html file was opened and submit button was

clicked.
Expected result Pop up message should appear.
Actual result Pop up Message appeared.
Conclusion Test was successful
.Table 1: test 1
Figure 11 picture: 6
18
5.2 Test 2
Objective To check the navigation bar.
Action The index.html was opened. Navigation bar was

hover.
Expected result We should experience hover effect.
Actual result Experienced hover effect.
Table 2 test 2
Figure 12 picture7
19
5.3 Test 3
Objective To check if background colour flows when hover.
Action The index.html was opened. Navigation bar and

buttons were hovered and change in background was
noticed.
Expected result When we touch any buttons or navigation bar it should
show flow of colour.
Actual result When the navigation bar or buttons is hovered it will

show background colour flowing from left to right.
Table 3 test 3
Figure 13 picture 7
20
5.4 Test 4
Objective Check if pop up message appears when you submit

your information.
Action Contact.html file was opened. The text field was filled
and submit button was clicked.
Expected result Form submitted information should be displayed.
Actual result Form submitted information was displayed.
Table 4 test 4
Figure 14 picture 8
21
5.5 Test 5
Objective To show the date when the button is clicked.
Action The contact.html was opened. The button “date and

time” was pressed.
Expected result Current date and time should appear.
Actual result Current date and time should appeared.
Table 5 test 5
Figure 15 picture 9
22
6. Conclusion
In this coursework, I built a website containing five different web page. The website
was created by using HTML, CSS and Java Script. We accomplished this project after
a lot of hard effort, blunders, and trial and error. This was my first attempt at creating
a website. The work was really difficult. Building a website with five pages was
extremely tough and time-consuming. I took reference of code from different website
and also YouTube to make a good and attractive webpage. This project provided me
knowledge about wireframes. I was able not know the importance of creating
wireframe of website. Along with wireframe it also gave me knowledge on how testing
is done.
This project helped me in many things such as about creating a website and also
provided me knowledge on portfolio and how to create one. This coursework has also
helped me research more about blogs. As I was searching ideas on how to build one,
I happen to read blogs. Moreover, it was interesting and it’s good to know there are
lots of open minded and deep thinkers out here. I also was compelled to learn on how
to build a website, not only write the code for HTML but for CSS and Java script as
well. In this course work we have to link one website with another and also add an
external CCS to the webpage to make our built up look more attractive. The cool
navigation bar, hover effects and popup making were hard and complex. But I
succeeded thought. I learned about z-index and learned how to work in layers in the
website. Hover effect is one of the coolest thing. I also tried linear gradient but I couldn’t
decide a proper colour combination.
This project was problematic for me to complete alone. The project was tough and
without helpful YouTube videos, lecture slides, class recording and my friends it would
be complete impossible for me to complete this coursework. Instructions, guidance
and genuine suggestion given by you tubers and module teachers was very helpful
and helped a lot throughout my project. . It was incredibly tense and very
hectic. Because of my lack of HTML, CSS and Java script understanding, I have
thought of abandoning up a number of times. It has forced me to be industrious and
innovative. I genuinely feel that in future, when I genuinely walk into real life, this
coursework will benefit me. I learnt to design a website that looks all right, while I was
actually glad to show hi from HTML. When you learn something you never imagined
you would, it is always a nice sensation. Thanks! Thanks! Thanks!
23
References
Anon., n.d. balsamiq. [Online]
Available at: https://balsamiq.com/learn/articles/what-are-wireframes/
Anon., n.d. w3schools. [Online]
Available at: https://www.w3schools.com/html/html_images.asp
Available at: https://www.w3schools.com/html/html_css.asp
Available at: https://www.w3schools.com/js/default.asp
24

Introducton To Infromation System

Uploaded by

Copyright:

Available Formats

You might also like

Introducton To Infromation System

Uploaded by

Document Information

Original Description:

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Introducton To Infromation System

Uploaded by

Copyright:

Available Formats

Simran Pakhrin Tamang | 20049054

Module Code & Module Title

Assessment Weightage & Type

Year and Semester

Student Name: Simran Pakhrin Tamang

Java Script, it is a lightweight programming language which is used to make site

2. Discussion and analysis

2.1. Home page:

I also have used various software for completion of this program.

4. Wireframe: Wireframes is a means of designing simple online service. A

4.1 wire frame for index.html

4.2 Wire frame for about.html

4.3 wire frame for blog.html

4.4 Wireframe for research.html

4.5 Wire frame of contact.html

Objective Check if pop up message appears button is clicked

Action Contact.html file was opened and submit button was

Expected result Pop up message should appear.

Actual result Pop up Message appeared.

Conclusion Test was successful

Objective To check the navigation bar.

Action The index.html was opened. Navigation bar was

Expected result We should experience hover effect.

Actual result Experienced hover effect.

Conclusion Test was successful

Objective To check if background colour flows when hover.

Action The index.html was opened. Navigation bar and

Actual result When the navigation bar or buttons is hovered it will

Conclusion Test was successful

Objective Check if pop up message appears when you submit

Expected result Form submitted information should be displayed.

Actual result Form submitted information was displayed.

Conclusion Test was successful

Objective To show the date when the button is clicked.

Action The contact.html was opened. The button “date and

Expected result Current date and time should appear.

Actual result Current date and time should appeared.

Conclusion Test was successful

You might also like