Principles of Web Development

Creating a Professional Website

Submitted By:
Pratik Raj
(BFT/17/548)
 Declaration

I hereby declare that this project is an original piece of research work

carried out by Pratik Raj under the guidance and supervision of our
subject faculty Mr. Neeraj Kumar. The information has been collected
from genuine and authentic sources and there is no plagiarism or
dishonest means involved.
 Certificate

“This is to certify that this document work of creating a web page ‘Iron
Maiden’ is based on the original research work of Pratik Raj conducted
under the guidance of Mr. Neeraj Kumar towards partial fulfilment of
curriculum of the subject- Principles of Web Development.

Pratik Raj

Mr. Neeraj Kumar

Department of Fashion Technology
NIFT PATNA
 Acknowledgement

I would like to thank National Institute of Fashion Technology for giving us

the opportunity to give this project of creating a web page.
Foremost, i would like to thank our subject faculty at NIFT, Mr. Neeraj
Kumar for giving his invaluable feedback and guidance on this project
throughout the semester. This could not have been achieved without his
support.

Lastly, i take the opportunity to thank all the people who guided us
through the entire process, our faculties at NIFT and fellow students who
have imparted the necessary knowledge and skills that I required to
complete this document.

Pratik Raj
 Assignment Brief

The aim of this assignment is to develop a clear understanding about

Principles of Web Development.
The aim of the assignment is:

• To pick one topic

• To create a web page of same
• To come up with the use of essential tags using HTML and CSS.
 JavaScript
JavaScript is a dynamic computer programming language. It is lightweight
and most commonly used as a part of web pages, whose
implementations allow client-side script to interact with the user and
make dynamic pages. It is an interpreted programming language with
object-oriented capabilities.
The merits of using JavaScript are:
 Less server interaction: You can validate user input before sending
the page off to the server. This saves server traffic, which means
less load on your server.
 Immediate feedback to the visitors: They don't have to wait for a
page reload to see if they have forgotten to enter something.
 Increased interactivity: You can create interfaces that react when
the user hovers over them with a mouse or activates them via the
keyboard.
 Richer interfaces: You can use JavaScript to include such items as
drag-and- drop components and sliders to give a Rich Interface to
your site visitors.
HTML
HTML (Hypertext Markup Language) is used to create document on the
World Wide Web. It is simply a collection of certain key words called
‘Tags’ that are helpful in writing the document to be displayed using a
browser on Internet.
The merits of using HTML are:
 HTML is easy to learn and use
 It is free
 It is supported by all browsers
 It is most friendly engine
 It is simple to edit
 It can integrate easily with other languages
 It is lightweight
 It is basic of all programming languages
 Display changes instantly
 It is user friendly
 Difference between JavaScript & HTML

 Basic of JavaScript and HTML

Both are high level programming languages used to create a layout of a
website and no website can be made without either of them. While
HTML is a startup markup language that provides the primary structure of
a website. JavaScript is an advanced programming language that makes
web pages more interactive and dynamic.
 Functions of JavaScript and HTML
HTML is the stepping stone to website development which generate a
basic structure of the web page. HTML is how a website should look
without the interactive effects and all. JavaScript, on the other hand,
manipulates the content of the page to create effects on the user actions.
It simply adds dynamic content to websites to make them look good.
 Dynamic Programming
JavaScript is one of the core technologies of the WWW, alongside HTML
and CSS. Standard HTML pages are static which means the content are
fixed and displays the same information to every user who accesses the
website. It cannot interact with user’s input. Incorporating JavaScript
would allow programmers to create user actions to both web pages and
web applications. It makes a web page dynamic by manipulating the
content of the web page.
 Client-side vs. Server-side
HTML is rendered from the web server which means the markup code is
processed by the server before it is sent to the client browser. This is
different from the client-side scripting. The HTML pages are loaded on
your server and then the server turn them into useful documents to be
viewed on client browsers. JavaScript, one the other hand, is totally
synchronous with client-side scripting meaning each code written is
compiled and executed on the web browser.
 Compatibility of JavaScript and HTML
HTML is cross browser compatible which means it works fine with all
versions of all web browser including modern browsers. All browsers, old
and new, handle unrecognized elements as inline elements by default,
which makes it easy for older web browsers to handle unknown HTML
elements. JavaScript, on the other hand, lacks cross-browser
compatibility which makes some functions incompatible with some
browsers.

 Datatypes in JavaScript
JavaScript is dynamically typed (also called loosely typed) scripting
language. That is, in JavaScript variables can receive different data types
over time. Datatypes are basically typed of data that can be used and
manipulated in a program. A variable in JavaScript can contain any data.
This means that a variable at one time can be a number and at another
be a string.
The latest ECMAScript(ES6) standard defines seven data types: Out of
which six data types are Primitive(predefined).
 Numbers: 5, 6.5, 7 etc.
 String: “Hello world” etc.
 Boolean: Represent a logical entity and can have two values: true or
false.
 Null: This type has only one value : null.
 Undefined: A variable that has not been assigned a value is undefined.
 Object: It is the most important data-type and forms the building
blocks for modern JavaScript. We will learn about these data types in
details in further articles.
Number
The number type in JavaScript contains both integer and floating point
numbers. Besides these numbers, we also have some ‘special-numbers’
in JavaScript that are: ‘Infinity’, ‘-Infinity’ and ‘NaN’. The Infinity basically
represents the mathematical ‘?’. The ‘NaN’ denotes a computational
error.
 let num = 2; // integer
 let num2 = 1.3; // floating point number
 let num3 = Infinity; // Infinity
 let num4 = 'something here too'/2; // NaN
String
A String in JavaScript is basically a series of characters that are
surrounded by quotes. There are three types of quotes in JavaScript,
which are:
 let str = "Hello There";
 let str2 = 'Single quotes works fine';
 let phrase = `can embed ${str}`;
There’s no difference between ‘single’ and “double” quotes in JavaScript.
Backticks provide extra functionality as with the help of them we can
embed variables inside them.
A Boolean
The Boolean type has only two values: true and false.
This data type is used to store yes/no values: true means “yes, correct”,
and false means “no, incorrect”.
 let isCoding = true; // yes
 let isOld = false; // no
A null
The special null value does not belong to any of the default data types. It
forms a separate type of its own which contains only the null value:
 let age = null;
The ‘null’ data type basically defines a special value which represents
‘nothing’, ’empty’ or ‘value unknown’.
Undefined
Just like null, Undefined makes its own type. The meaning of undefined is
‘value is not assigned’.
 let x;
 console.log(x); // undefined
Object
Objects are not primitive in nature and a bit complex to understand.
Everything in JavaScript is basically an object, and that is the reason why
it becomes very important to have a good understanding of what they
are. Objects are used to store keyed collections of various data and more
complex entities.
We can create objects in multiple ways. One is by making use of figure
brackets {…} with an optional list of properties. The properties of an
object are in the form of ‘key: value’ pair. Another way is to make use of
the ‘new’ keyword.
An empty Object can be created using given below syntax.
 let person = new Object(); // "object constructor" syntax
 let person = {}; // "object literal" syntax

 The non-primitive data types are as follows:

 Array- represents group of similar values
 RegExp- represents regular expression

 Conditional and Looping Statement in Javascript

Conditional Statements

Very often when you write code, you want to perform different actions
for different decisions.
You can use conditional statements in your code to do this.
 In JavaScript we have the following conditional statements:
 Use if to specify a block of code to be executed, if a specified
condition is true
 Use else to specify a block of code to be executed, if the same
condition is false
 Use else if to specify a new condition to test, if the first condition
is false
 Use switch to specify many alternative blocks of code to be
executed

JavaScript Looping statement

JavaScript supports different kinds of loops:

  for - loops through a block of code a number of times
 for/in - loops through the properties of an object
 for/of - loops through the values of an iterable object
 while - loops through a block of code while a specified condition is
true
 do/while - also loops through a block of code while a specified
condition is true

 Differentiate between for & while loop:

The purpose of a while loop is to execute a statement or code block
repeatedly as long as an expression is true. Once the expression becomes
false, the loop terminates.
<html>
<body>
<script type="text/javascript">
<!--
var count = 0;
document.write("Starting Loop ");
while (count < 10){
document.write("Current Count : " + count + "<br />");
count++;
}
document.write("Loop stopped!");
//-->
</script>
</body>
</html>
The for loop provides a concise way of writing the loop structure. Unlike a
while loop, a for statement consumes the initialization, condition and
increment/decrement in one line thereby providing a shorter, easy to
debug structure of looping.
<html>
<body>
<script type = "text/javascript">
<!--
var count;
document.write("Starting Loop" + "<br />");
for(count = 0; count < 10; count++) {
document.write("Current Count : " + count );
document.write("<br />");
}
document.write("Loop stopped!");
//-->
</script>
</body>
</html>
 Output for FOR LOOP & WHILE LOOP:

 Task-1(Basic uses of HTML tags)

<html>
<head><title>Trial</title>
<body bgcolor=yellow>
<h1>hello
<h2>hello
<h3>hello
<h4>hello
<h5>hello
<h6><marquee>hello</marquee>
</body>
</head>
<body>
<p> an apple a day keeps the doctor away
<p> an apple a day keeps the doctor away
<p> an apple a day keeps the doctor away
</body>
<body>
<p> I am Pratik</p>
<p style="color:red;">i am happy</p>
<p style="color:blue;:">i am happy</p>
<p style="color:green;:">i am happy</p>
<p style="font-size:50px;">i am happy</p>
<h2>local links </h2>
<p><a href="html_images.asp">HTML Images</a> is a link to a page on
this website.</p>
<style>
table, th, td {border:1px solid black;}
</style>
</head>
</body>
<table bgcolor="#00ff00">
<tr style="background-color:yellowgreen;color:white;">
<tr bgcolor="pink">
<th>Name</th>
<th>Maths</th>
<th>Science</th>
<th>English</th>
</tr>
<tr>
<td bgcolor="white">Sunil</td>
<td>60</td>
<td>70</td>
<td>80</td>
</tr>
<tr>
<td bgcolor="white">Amit</td>
<td>70</td>
<td>60</td>
<td>75</td>
</tr>
<tr>
<td bgcolor="white">Shweta</td>
<td>60</td>
<td>65</td>
<td>70</td>
</tr>
<tr>
<td bgcolor="white">Rohan</td>
<td>80</td>
<td>75</td>
<td>70</td>
</table>
</tr>
<h2>password field</h2>
<p>the <strong>input type="password"
</strong> defines a password field:</p>
<form actions=""> user name:<br>
<input type="text"name="userid">
<br>
user password:<br>
<input type="password" name="psw">
</form>
<p> the characters in the password are masked.</p>
</body>
</html>
 TASK-1 (Output)

 TASK-2 (HTML code for creating a Table)

<html>
<head>
<style>
table, th, td {border: 1px solid black;}
</style>
</head>
<body>
<table style="width:100%">
<tr style="background-color:yellowgreen;color:white;">
<tr bgcolor="pink">
<th>name</th>
<th>maths</th>
<th>science</th>
<th>english</th>
</tr>
<tr>
<td bgcolor="yellow">Sunil</td>
<td>60</td>
<td>70</td>
<td>80</td>
</tr>
<tr>
<td bgcolor="yellow">amit</td>
<td>70</td>
<td>60</td>
<td>75</td>
</tr>
<tr>
<td bgcolor="yellow">shweta</td>
<td>60</td>
<td>65</td>
<td>70</td>
</tr>
<tr>
<td bgcolor="yellow">rohan</td>
<td>80</td>
<td>75</td>
<td>70</td>
</table>
</tr>
 TASK-2(Output)

 TASK-3 (HTML code for creating an Application Form/Register Page)

<html>
<head>
<body background = "IoT-arch.png">
<title>Text Input Control</title>
</head>
<body>
<form >
First name: <input type = "text" name = "first_name" />
<br>
Last name: <input type = "text" name = "last_name" />
</form>
<head>
<title>Password Input Control</title>
</head>
<form >
User ID : <input type = "text" name = "user_id" />
<br>
Password: <input type = "password" name = "password" />
</form>
<td>Phone:</td>
<td><input type='text' name='name'></td></tr>
<tr> <td>&nbsp;</td></tr>
<td>Email:</td>
<td><input type='text' name='name'></td></tr>
<h2> gender </h2>
<form>
<input type="radio" name="gender"
value="male" checked> male<br>
<input type="radio" name="gender"
value="female">female<br>
<input type="radio" name="gender"
value="other"> other
</from>
<form>
<input type="submit" value="sign in">
<a href="table.html"> my link text</a>
</form>
</body>
</html>
 TASK-3(Output)

 TASK-4 (HTML code for linking two pages)

Description:-

CODE:1
<a href="table.html"> my link text</a>
CODE:2
<a href="register_page.html"> my home page </a>
CODE:1 was used in the application form html code (TASK-3) so that it
can be linked to the html code for creating the table (TASK-2) and
CODE:2 was used in the html code for creating the table so that it can go
back to the my home page (the application/register form page).

 TASK-5(HTML code for DIV Layout)

<HTML>
<BODY>
<div style="background:#FFCAFF">
<h3>HTML CODE REALTED TO DIV TAG.</h3>
<p>DIV TAGS ARE USED FOR HIGHLIGHTING A SPECIFIC SECTION OF THE
PAGE</p>
</div>
</BODY>
</HTML>
 TASK-3(Output)

 TAGS used in HTML coding:-

TAGS DESCRIPTION

<html> Defines an HTML document

<head> Defines information about the document

<title> Defines a title for the document

<marquee> It is used for scrolling piece of text or image

displayed either horizontally across or
vertically down your website page depending
on the setting

<h1> to <h2> Defines html heading

<p> Defines a paragraph

<br> Inserts a single line break

<input> Defines an input control

<img> Defines an image

<figure> Specifies self-contained content

TAGS DESCRIPTION

<b> Defines bold text

<centre> Defines centered text

<table> Defines a table

<th> Defines a header cell in a table

<tr> Defines a row in a table

<td> Defines a cell in a table

<style> Defines style information for a
document

<body> It is used to define the body of

html document. It contain mages,
tables, lists, etc
bgcolour Background color

background Image to be used in a background

<pre> It is used for indicating

perfomatted text

<I> It is used to write the content in

italic format

<u> It is used to set the content

underline

<font> It is used to specify the font size

and color in html document

Color Specifies the color of the text

size Specifies the size of the text

face Specifies the font of the text

<img> It defines an image in an html
page

src Specifies the URL of an image

height Specifies the height of an image

width Specifies the width of an image

alt Specifies an alternative text for

an image

<form> <form> tag is used to create an

html form for user input

action Specifies where to send the data

when a form is submitted

<input> It specifies an input field where

the user can enter the data

type Specifies the type <input>

element to display. Eg: button,
radio, text etc
Name Specifies the name of an <input>
element

height Specifies the height of an <input>

element
 width Specifies the width of an <input>
element

<a> The <a> tag is used to define a

hyperlink , which is used to link
from one page to another
herf Specifies the url of the page the
link goes to

<link> Defines the relationship between

a document and an external
resource (most used to link to
style sheets)
<div> Defines a section in a document

 Principles of good Website Design

An effective website design should fulfill its intended function by
conveying its particular message whilst simultaneously engaging the
visitor. Several factors such as consistency, colours, typography, imagery,
simplicity and functionality all contribute to good website design.
When designing a website there are many key factors that will contribute
to how it is perceived. A well designed website can help build trust and
guide visitors to take action. Creating a great user experience involves
making sure your website design is optimised for usability (form and
aesthetics) and how it easy is it to use (functionality).
Following are the steps:
1. Website Purpose
Your website needs to accommodate the needs of the user. Having a
simple clear intention on all pages will help the user interact with what
you have to offer. What is the purpose of your website? Are you
imparting practical information like a ‘How to guide’? Is it an
entertainment website like sports coverage or are you selling a product
to the user? There are many different purposes that websites may have
but there are core purposes common to all websites;
 Describing Expertise
 Building Your Reputation
 Generating Leads
 Sales and After Care

2. Simplicity

Simplicity is the best way to go when considering the user experience and
the usability of your website. Below are ways to achieve simplicity
through design.

 Colour
Colour has the power to communicate messages and evoke emotional
responses. Finding a colour palette that fits your brand will allow you to
influence your customer’s behaviour towards your brand. Keep the
colour selection limited to less than 5 colours. Complementary colours
work very well. Pleasing colour combinations increase customer
engagement and make the user feel good.
 Type
Typography has an important role to play on your website. It commands
attention and works as the visual interpretation of the brands voice.
Typefaces should be legible and only use a maximum of 3 different fonts
on the website.
 Imagery
Imagery is every visual aspect used within communications. This includes
still photography, illustration, video and all forms of graphics. All imagery
should be expressive and capture the spirit of the company and act as the
embodiment of their brand personality. Most of the initial information
we consume on websites is visual and as a first impression it is important
that high quality images are used to form an impression of
professionalism and credibility in the visitors mind.

3. Navigation

Navigation is the way finding system used on websites where visitors

interact and find what they are looking for. Website navigation is key to
retaining visitors. If the websites navigation is confusing visitors will give
up and find what they need elsewhere. Keeping navigation simple,
intuitive and consistent on every page is key.

4. F-Shaped pattern reading

The F- based pattern is the most common way visitors scan text on a
website. Eye tracking studies have found that most of what people see is
in the top and left area of the screen. The F’ shaped layout mimics our
natural pattern of reading in the West (left to right and top to bottom).
An effective designed website will work with a readers natural pattern of
scanning the page.

5. Visual Hierarchy

Visual hierarchy is the arrangement of elements is order of importance.

This is done either by size, colour, imagery, contrast, typographically,
whitespace, texture and style. One of the most important functions of
visual hierarchy is to establish a focal point; this shows visitors where the
most important information is.

6. Content
An effective web design has both great design and great content. Using
compelling language great content can attract and influence visitors by
converting them into customers.
7. Grid based layout
Grids help to structure your design and keep your content organised. The
grid helps to align elements on the page and keep it clean. The grid based
layout arranges content into a clean rigid grid structure with columns,
sections that line up and feel balanced and impose order and results in an
aesthetically pleasing website.
8. Load Time
Waiting for a website to load will lose visitors. Nearly half of web visitors
expect a site to load in 2 seconds or less and they will potentially leave a
site that isn’t loaded within 3 seconds. Optimising image sizes will help
load your site faster.
9. Mobile Friendly
More people are using their phones or other devices to browse the web.
It is important to consider building your website with a responsive layout
where your website can adjust to different screens.
 Website Page:

1. Home Page

2. About Us Page
3. Register here Page

4. Information of the members in the band