A

Industrial Training Report

On

“WEB DESIGNING”
In partial fulfillment of the requirement for the Degree in Bachelor of
Computer Science & Engineering Submitted to
DBATU , Lonere
Submitted By,

Mr. Punywant Shamrav Amrale

Under the guidance of

Prof. Bansode T. P.

DEPARTMENT OF COMPUTER SCIENCE AND ENGINEERING

FABTECH TECHNICAL CAMPUS, COLLEGE OF ENGINEERING AND RESEARCH, SANGOLA

Academic Year 2019-2020

DBATU , Lonere
WEB DESIGNING

CERTIFICATE
This is to certify that the Project Work entitled

“Web Designing”

This is being submitted by

Mr. Punywant Shamrav Amrale CSE/TE/04

Is approved for the partial fulfillment of degree in Bachelor of Computer Science

and Engineering as per curriculum of DBATU , Lonere
for Academic Year 2019 - 2020

Pof. Bansode T. P.

INTERNAL EXAMINER

FTC, Sangola Page 1

WEB DESIGNING

ACKNOWLEDGEMENT

It give us immense pleasure to present a report on successful completion of our project

“WEB DESINGING”. We express our deep sense of gratitude “Miss. Prajkta Jogi ” for his
valuable guidance rendered in all phases of training. We are thankful for his whole hearted
assistance, advice and expert guidance towards making our training successful.

Our special thanks to Prof. Bansode T. P. I/C Vocational training Head of Department
“Prof. Dounde P. P.” & Principal “Dr. Shendge R. B.” For their keen interest, encourage and
excellent support.

We would like to express our thanks to all of staff member of college who helped us
directly & indirectly during the completion of this training.

Mr.Punyawant Shamrav Amrale

FTC, Sangola Page 2

WEB DESIGNING

ABSTRACT

Industrial training is an important phase of a student life. A well planned, properly

executed and evaluated industrial training helps a lot in developing a professional attitude. It
develop an awareness of industrial approach to problem solving, based on a broad understanding
of process and mode of operation of organization.
The aim and motivation of this industrial training is to receive discipline, skills,
teamwork and technical knowledge through a proper training environment. During a period of
one months training at Techsyscon, I was assigned to creating a “Web Designing”. Throughout
this industrial training, I have been learned new Website designing,

FTC, Sangola Page 3

WEB DESIGNING

Table of Contents

Sr.
no Contents Page no.

1 Introduction 5

2 6
Principles of Web Design

9
3 HTML

13
4 CSS

17
5 Bootstrap

21
6 JAVA script

7 Snapshot of Project 23

8 Conclusion 24

FTC, Sangola Page 4

WEB DESIGNING

Introduction

Web design is the visual aesthetics and page layout of a website. It goes hand-in-hand
with web development in the creation of a static website or dynamic web application.

Even if you don’t consider yourself a creative person, it’s still a good idea to learn web design.
No matter whether you want to make static websites or dynamic web applications, design is an
important part of the process. The design is the first thing people notice when they arrive on a
website, and if it’s not good enough, they’ll leave. You don’t want to create a site that frustrates
people, do you?

If you do identify yourself as a creative person, you might even consider a career as a web
designer. Today, there is a huge need for competent web designers with up-to-date skills. It’s not
an opportunity to be sneezed at.Learn coding and you’ll be a valuable asset to many. But learn
coding and design and you’ll be second to none!

The web design process starts with a visual concept, which you could sketch by hand or with
software like Photoshop. Then, you use HTML and CSS to build the website. HTML and CSS
are the codes for writing web pages. HTML handles the basic structure and ‘bones’ of your page,
while CSS handles the style and appearance.If you’re a good web designer, you’ll also pay
attention to concepts like responsive design, aesthetics, usability and accessibility when building
your site.

Responsive design is a popular technique for making websites look good and function well on
additional devices, like phones and tablets. It does this by setting different CSS rules for different
browser widths.

FTC, Sangola Page 5

WEB DESIGNING

Principles of Web Design

Basic Design Principles

As already mentioned, there is no real consensus in the design community about what the main
principles of design actually are. That said, the following twelve principles are those mentioned
most often in articles and books on the subject.

Contrast

One of the most common complaints designers have about client feedback often revolves around
clients who say a design needs to “pop” more. While that sounds like a completely arbitrary
term, what the client generally means is that the design needs more contrast.

Contrast refers to how different elements are in a design, particularly adjacent elements. These
differences make various elements stand out. Contrast is also a very important aspect of
creating accessible designs. Insufficient contrast can make text content in particular very difficult
to read, especially for people with visual impairments.

Balance

Every element of a design—typography, colors, images, shapes, patterns, etc.—carries a visual

weight. Some elements are heavy and draw the eye, while other elements are lighter. The way
these elements are laid out on a page should create a feeling of balance.

There are two basic types of balance: symmetrical and asymmetrical. Symmetrical designs
layout elements of equal weight on either side of an imaginary center line. Asymmetrical balance

FTC, Sangola Page 6

WEB DESIGNING

uses elements of differing weights, often laid out in relation to a line that is not centered within
the overall design.

Emphasis

Emphasis deals with the parts of a design that are meant to stand out. In most cases, this means
the most important information the design is meant to convey.

Emphasis can also be used to reduce the impact of certain information. This is most apparent in
instances where “fine print” is used for ancillary information in a design. Tiny typography
tucked away at the bottom of a page carries much less weight than almost anything else in a
design, and is therefore deemphasized.

Proportion

Proportion is one of the easier design principles to understand. Simply put, it’s the size of
elements in relation to one another. Proportion signals what’s important in a design and what
isn’t. Larger elements are more important, smaller elements less.

Hierarchy

Hierarchy is another principle of design that directly relates to how well content can be
processed by people using a website. It refers to the importance of elements within a design. The
most important elements (or content) should appear to be the most important.

FTC, Sangola Page 7

WEB DESIGNING

Repetition

Repetition is a great way to reinforce an idea. It’s also a great way to unify a design that brings
together a lot of different elements. Repetition can be done in a number of ways: via repeating
the same colors, typefaces, shapes, or other elements of a design.

This article, for example, uses repetition in the format of the headings. Each design principle is
formatted the same as the others in this section, signaling to readers that they’re all of equal
importance and that they’re all related. Consistent headings unify these elements across the page.

Pattern

Patterns are nothing more than a repetition of multiple design elements working together.
Wallpaper patterns are the most ubiquitous example of patterns that virtually everyone is familiar
with.

In design, however, patterns can also refer to set standards for how certain elements are
designed. For example, top navigation is a design pattern that the majority of internet users have
interacted with.

FTC, Sangola Page 8

WEB DESIGNING

HTML
 HTML, What Is It?
HTML is an abbreviation for Hyper Text Markup Language.
HTML is actually used to create the webpage and the content that it has, like the images and
writing.
HTML as I said before is ….Hyper Text Markup Language...

Everything in HTML works by the use of 'Tags' , Tags are elements in an HTML document that
give commands to the writing or images or audio or video files what to do, where to be placed
etc in a website...

In HTML, tags always have "<" before and ">" after the tag...
ex-<b> (This tag makes the text bold)

All HTML documents start and end with

<HTML>
</HTML>

 Basic Structure of an HTML Document

HTML Heading Tags

In HTML there are 6 sets of tags used for headings.Headings are defined with
the <h1> to <h6> tags.<h1> defines the most important heading. <h6> defines the least
important heading. <h1> headings should be used for main headings, followed
by <h2> headings, then the less important <h3>, and so on.

FTC, Sangola Page 9

WEB DESIGNING

Image (Tags) in HTML

In HTML, there are about 5 tags which define text in the webpage.
These tags go in the body section of the HTML document.

FTC, Sangola Page 10

WEB DESIGNING

Text Formatting Tags

It consist various text formatting tags

Tags Descriptions

<b> -Define the bold text

<big> -Define big text

<em> -Define emphasized text

<u> -Underline the text

FTC, Sangola Page 11

WEB DESIGNING

 HTML class Attribute

 The HTML class attribute is used to define equal styles for elements with the same class
name.
 So, all HTML elements with the same class attribute will get the same style.
 It is defined by using dot (.) operator. Followed by its class name.

 Multiple Classes
HTML elements can have more than one class name, each class name must be separated by a
space.

 HTML Id
 The id attribute specifies a unique id for an HTML element (the value must be unique
within the HTML document).
 The id value can be used by CSS and JavaScript to perform certain tasks for the element
with the specific id value.

In CSS, to select an element with a specific id, write a hash (#) character, followed by the id of
the element:

FTC, Sangola Page 12

WEB DESIGNING

CSS

 CSS Introduction
 CSS stands for Cascading Style Sheets.
 CSS describes how HTML elements are to be displayed on screen,

paper, or in other media.

 CSS saves a lot of work. It can control the layout of multiple web pages
 all at once.
 CSS can be added to HTML elements in 3 ways:
 Inline - by using the style attribute in HTML elements
 Internal - by using a &lt;style&gt; element in the &lt;head&gt; section
 External - by using an external CSS file
 The most common way to add CSS, is to keep the styles in separate CSS
 files. However, here we will use inline and internal styling, because this is
 easier to demonstrate, and easier for you to try it yourself.
 Inline CSS
 An inline CSS is used to apply a unique style to a single HTML element.
 An inline CSS uses the style attribute of an HTML element.
 Internal CSS
 An internal CSS is used to define a style for a single HTML page.

An internal CSS is defined in the <head> section of an HTML page, within

a <style> element

External CSS
 An external style sheet is used to define the style for many HTML pages.
 With an external style sheet, you can change the look of an entire web site, by changing
one file!
 To use an external style sheet, add a link to it in the <head> section of the HTML page:
 CSS Fonts
 The CSS color property defines the text color to be used.
 The CSS font-family property defines the font to be used.
 The CSS font-size property defines the text size to be used.

 CSS Syntax and Selectors

 CSS Syntax

FTC, Sangola Page 13

WEB DESIGNING

 A CSS rule-set consists of a selector and a declaration block:

The selector points to the HTML element you want to style.The declaration block contains one
or more declarations separated by semicolons.Each declaration includes a CSS property name
and a value, separated by a colon.A CSS declaration always ends with a semicolon, and
declaration blocks are surrounded by curly braces

 CSS Selectors
 CSS selectors are used to "find" (or select) HTML elements based on their
element name, id, class, attribute, and more.

 The element Selector

The element selector selects elements based on the element name.You can select all <p>
elements on a page like this (in this case, all <p>

The selector points to the HTML element you want to style.The declaration block contains one
or more declarations separated by semicolons.Each declaration includes a CSS property name

FTC, Sangola Page 14

WEB DESIGNING

and a value, separated by a colon.A CSS declaration always ends with a semicolon, and
declaration blocks are surrounded by curly braces

 CSS Selectors
 CSS selectors are used to "find" (or select) HTML elements based on their
element name, id, class, attribute, and more.

 The element Selector

The element selector selects elements based on the element name.You can select
all <p> elements on a page like this (in this case, all <p> elements will be center-
aligned, with a red text color):
 Example
p{
text-align: center;
color: red;
}

 The id Selector
 The id selector uses the id attribute of an HTML element to select a specific element.
 The id of an element should be unique within a page, so the id selector is used to select
one unique element!
 To select an element with a specific id, write a hash (#) character, followed by the id of
the element.
 The style rule below will be applied to the HTML element with id="para1":

 The class Selector

The class selector selects elements with a specific class attribute.To select elements with
a specific class, write a period (.) character, followed by the name of the class.In the
example below, all HTML elements with class="center" will be red and center-aligned:

FTC, Sangola Page 15

WEB DESIGNING

 Snapshot of class selector programs:

FTC, Sangola Page 16

WEB DESIGNING

Bootstrap
 Introduction of Bootstrap
Bootstrap was also programmed to support both HTML5 and CSS3. Bootstrap is a free
collection of tools for creating a websites and web applications. It contains HTML and CSS-
based design templates for typography, forms, buttons, navigation and other interface
components, as well as optional JavaScript extensions.Bootstrap will help you to build an
attractive, responsive website, but some mobile users could be turned away by the slow loading
time and battery drain issues. Bootstrap comes with a lot of lines of CSS and JS, which is
a good thing, but also a bad thing because of the bad internet connection.Bootstrap is a
framework to help you design websites faster and easier. It includes HTML and CSS based
design templates for typography, forms, buttons, tables, navigation, modals, image carousels, etc.
It also gives you support for JavaScript plugins. ... Bootstrap's responsive CSS adjusts to phones,
tablets, and desktops.As the web evolves more and more toward responsive design, it can be a
real challenge for web developers to keep up. Bootstrap can make things a whole lot easier.
Bootstrap enables you to create responsive websites without you needing to do the "responsive"
bit. Bootstrap takes care of that.

 One Framework, Every Device

Bootstrap is promoted as being One framework, every device. This is because websites built with
Bootstrap will automatically scale between devices — whether the device is a mobile phone,
tablet, laptop, desktop computer, screen reader, etc.

FTC, Sangola Page 17

WEB DESIGNING

 Mobile-First
Not only is Bootstrap responsive, it is mobile-first. This means that it is primarily designed for
mobile devices, then scales up from there (as opposed to being designed for desktop, then trying
to scale it down to mobile devices).

 Bootstrap Components
Bootstap includes components such as buttons, navbars, dropdown menus, alert boxes, and more.
In most cases, you can make use of a component simply by using the appropriate class name.

We'll be looking at these components throughout this tutorial. We've got plenty of interactive
examples that enable you to see exactly how these components work.

 Advantages of Bootstrap
One of the main benefits of development frameworks like Bootstrap is that they can help speed
up development times, while maintaining quality and consistency across the site. You no longer
need to re-design every element. And you don't need to spend hours trying to get everything
looking and working right across browsers, platforms, and devices. By using Bootstrap, all
(most) of the hard work is done for you.Given Bootstrap is the most popular frontend
development framework on the web, this skillset could be a useful one to learn. Adding
Bootstrap to your bag of tricks could help you in many ways — from building websites faster, to
landing your dream job.Also, although Bootstrap comes with its own set of styles, these are easy
to override. You're not locked into the "Bootstrap design". You are free to use whichever
Bootstrap components you choose, while adding your own on top. There are thousands of
websites out there that are built on Bootstrap, but with their own design.

 Who's Using Bootstrap?

Bootstrap can be used to build websites of any scale, from small blogs to large corporate
websites. Organizations that use Bootstrap include NASA, University of Washington, FIFA,
Newsweek, VOGUE and many more.

FTC, Sangola Page 18

WEB DESIGNING

 Snapshot of class Bootstrap programs:

1]

2]

FTC, Sangola Page 19

WEB DESIGNING

3]

FTC, Sangola Page 20

WEB DESIGNING

Javascript

 Introduction of 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.

 Features of JavaScript

JavaScript is a client side technology, it is mainly used for gives client side validation, but it
have lot of features which are given below;

 JavaScript is a object-based scripting language.

 Giving the user more control over the browser.

 It Handling dates and time.

 It Detecting the user's browser and OS,

 It is light weighted.

 JavaScript is a scripting language and it is not java.

 JavaScript is interpreter based scripting language.

 JavaScript is case sensitive.

 JavaScript is object based language as it provides predefined objects.

 Every statement in javascript must be terminated with semicolon (;).

 Most of the javascript control statements syntax is same as syntax of control statements in
C language.
 An important part of JavaScript is the ability to create new functions within scripts.
Declare a function in JavaScript using function keyword.

FTC, Sangola Page 21

WEB DESIGNING


For Example:

 Snapshot of class JavaScript programs:

1]

2]

FTC, Sangola Page 22

WEB DESIGNING

 Snapshot of Project:

FTC, Sangola Page 23

WEB DESIGNING

Conclusion:
During my industrial training, there are many changes from the point of learning
environments and discussion among colleagues. It can directly increase the dedication and
rational attitude toward myself.
However, there are still some weaknesses that can be improved in the future. Therefore I
conclude that the industrial training program has provided many benefits to students even if there
are minor flaws that are somewhat disfiguring condition , so that this weakness can be rectified
in the future.
I can conclude that this industry is through training I received a lot of exposure in the
computing world. I would like to thank also the Polytechnic Balik Pulau giving students -
students find their own experience with having Industrial Training like this.

FTC, Sangola Page 24

WEB DESIGNING

FTC, Sangola Page 25