summer tranining report

1. A SUMMER INTERNSHIP REPORT
INTERNSHIP REPORT ON
WEBSITE APPLICATION DESIGN AND
DEVELOPMENT
USING HTML,CSS,JAVASCRIPT
BY
PUNIT KUMAR
This Report Presented in Partial Fulfillment of the Requirements for the
Degree of
Bachelor of Computer Application
In
Department Of Management and Technology.
Supervisor: Submitted By:
Mr. Amit Chopra Punit Kumar
(Asst. Prof., UGI) Roll no: 2018420
Department of Management & Technology Universal Groups of
Institution, Lalru, Ambala-Chandigarh Expressway September, 2022

2. CANDIDATE’SDECLARATION
I hereby declare that the work, which is being presented in the
Internship report, entitled“INTERNSHIP REPORT ON WEBSITE
APPLICATION DESIGN AND DEVELOPMENT USING HTML
& CSS” in partial fulfillment for the award of Degreeof “Bachelor
of Computer Application” in Department of Management &
Technology and submitted to Class Teacher in, Universal Group Of
institutionMohali,Lalru isarecordofmyowninvestigationscarried
under the Guidance of Nemat Sir,
I havenotsubmittedthe matterpresented inthisreport anywhere forthe
award of any otherDegree.
Punit Kumar
Bachelor Of Computer Application
Roll no: 2018420
Universal Group of institution
Semester :5th

3. TRAINING CERTIFICATE

4. ACKNOWLEDGEMENT
Every Summer Training big or small is successful largely due to the
effort of a numberof wonderful people who have always given their
valuable advice or lent a helping hand. I sincerely appreciate the
inspiration; support and guidance of all those people who have been
instrumental in making this project a success.
Firstly, I would like to thank God, for His divine blessings and giving
me the strength to finish this project work spot with success.
I, Punit Kumar, the student of Universal Group Of Institution Mohali,
Lalru
, Chandigarh (Department of UIMT “INTERNSHIP REPORT ON
WEBSITE APPLICATION DESIGN AND
DEVELOPMENT USING HTML & CSS” with special reference to
ISHT World. At this juncture I feel deeply honored in expressing my
sincere thanks Nemat sir (Teacher) available at right time and
providing valuable insights leading to the successful completion of my
Project.IwouldalsoliketothankalltheComputerScienceDepartment

5. faculty members of UNIVERSAL GROUP OF INSTITUTION,
LALRU for their critical advice and guidance
Last but not the least I place a deep sense of gratitude to my family
members and myfriends who have been constant source of inspiration
during the preparation of this INTERNSHIP report.
Punit Kumar
BCA 3rd
Year
2018420
UNIVERSAL GROUP OF
INSTITUTION, LALRU

6. TABLE OF CONTENTS
SR NO. CONTENTS Time Period.
1 Chapter 1
1.1 Introduction
1.2 Objective
1 Chapter 2 1weeks
1.1 HTML
2 Chapter 3 1 months
1.1 CSS
1.2 Bootstrap
3 Chapter 4 3 weeks
1.1 Java Script
4 Chapter 5 1 week
1.1 Educational Website

7. CHAPTER-1:
INTRODUCTION
1.1 Objectives
Training is thought on addition a few encounters from the
different a few associations which will encourage bounty to
make a connection between the hypothetical and reasonable
data. It includes profitable ability like usable working
environmentorpcinstrumentation,takingcareofaspreadof
things in the meantime, sorting out or dissecting learning,
spending plans or rising collaboration, composing, and
talking gifts. Usable work environment or pc
instrumentation, composing, and talking gifts. It’s
indispensable to get a handle on the best approach to impart
data to outsiders, managers, and companions.
While doing BCA at UNIVERSAL GROUP OF
INSTITUTION, LALRU, I considered a few programming
courses Last 2 years. Be that as it may, this is frequently not
happy to get a handle on the web developing because of it's
an extremely huge marketplace to encourage a sound data
concerningprogrammingwhichhasnetapplicationstyleand
Development
This entry level position report covers the whole temporary
job time that I have finished with progress concerning the

8. coding, style and improvement.
Objectives
• Understand basic concept and structure of HTML,
CSS
• To get awareness about the various job opportunities.
• To perceive communicational skills and organizational
dynamics.
• To get educated about the official habitat.
• Opportunities for technical skill.
• Improve communication skill.
• Knowing all type of official knowledge.
• To Increase the capability for solvingthe problems.

9. CHAPTER-2
HTML
In HTML I learnt about the different tags used to
structure a webpage. The list of all those tags are as
follows
HTML TAGS:
1 <!--...--> Defines a comment
2 <!DOCTYPE> Defines the document type
3 <a>Defines a hyperlink
4 <abbr> Defines an abbreviation or an acronym
5 <address> Defines contact information for the author/owner of a document
6 <area> Defines an area inside an image map
7 <article> Defines an article
8 <aside> Defines content aside from the page content
9 <audio> Defines embedded sound content
10 <b> Defines bold text
11 <blockquote> Defines a section that is quoted from another source
12 <body> Defines the document's body
13 <br> Defines a single line break
14 <button> Defines a clickable button
15 <colgroup> Specifies a group of one or more columns in a table for formatting
16 <div> Defines a section in a document

10. 17 <dl> Defines a description list
18 <dt> Defines a term/name in a description list
19 <em> Defines emphasized text
20 <fieldset> Groups related elements in a form
21 Defines font, color, and size for text
22 <footer> Defines a footer for a document or section
23 <form> Defines an HTML form for user input
24 <frame> Not supported in HTML5.
25 <h1> to <h6> Defines HTML headings
26 <head> Contains metadata/information for the document
27 <header> Defines a header for a document or section
28 <hr> Defines a thematic change in the content
29 <html> Defines the root of an HTML document
30 <i> Defines a part of text in an alternate voice or mood
31 <iframe> Defines an inline frame
32 <img> Defines an image
33 <input> Defines an input control
34 <ins> Defines a text that has been inserted into a document
35 <kbd> Defines keyboard input
36 <label> Defines a label for an <input> element
37 <legend> Defines a caption for a <fieldset> element
38 <li> Defines a list item
39 <link> Defines the relationship between a document and an external resource (most
used to link to style sheets)
40 <main> Specifies the main content of a document
41 Defines an alternate content for users that do not support frames
42 <picture> Defines a container for multiple image resources
43 <pre> Defines preformatted text
44 <progress> Represents the progress of a task
45 <q> Defines a short quotation
46 <source> Defines multiple media resources for media elements (<video> and <audio>)
47 <span> Defines a section in a document

11. 48 <strike> Not supported in HTML5. Use <del> or <s>
49 <table> Defines a table
50 <tbody> Groups the body content in a table
51 <td> Defines a cell in a table
52 <textarea> Defines a multiline input control (text area)

12. CHAPTER 3
CSS & BOOSTRAP
What is CSS?
• 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
• External stylesheets are stored in CSS files
CSS Syntax
A CSS rule 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

13. a value, separated by a colon.
• Multiple CSS declarations are separated with
semicolons, and declaration blocks are surrounded
by curly braces.
Example
• example all <p> elements will be center-aligned,
with a red text color:
• p {
• color: red;
• text-align: center;
• }
• CSS Selectors
• We can divide CSS selectors into five categories:
• Simple selectors (select elements based on name, id,
class)
• Combinator selectors (select elements based on a
specific relationship between them)
• Pseudo-class selectors (select elements based on a
certain state)
• Pseudo-elements selectors (select and style a part of
an element)
• Attribute selectors (select elements based on an
attribute or attribute value)

14. • CSS Box Model
• In CSS, the term "box model" is used when talking
about design and layout.
• The CSS box model is essentially a box that wraps
around every HTML element. It consists of:
margins, borders, padding, and the actual content.
The image below illustrates the box model:
Explanation of the different parts:
• Content - The content of the box, where text and
images appear
• Padding - Clears an area around the content. The
padding is transparent
• Border - A border that goes around the padding and
content
• Margin - Clears an area outside the border. The
margin is transparent
• The box model allows us to add a border around

15. elements, and to define space between elements.
CSS 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
• outline-color
• outline-width
• outline-offset
• outline
CSS Outline Style
The outline-style property specifies the style of the outline, and can have one of the
following values:
• dotted - Defines a dotted outline
• dashed - Defines a dashed outline
• solid - Defines a solid outline
• double - Defines a double outline
• groove - Defines a 3D grooved outline
• ridge - Defines a 3D ridged outline
• inset - Defines a 3D inset outline
• outset - Defines a 3D outset outline
• none - Defines no outline
• hidden - Defines a hidden outline

16. Bootstrap
What is Bootstrap 4?
Bootstrap 4 is the newest version of Bootstrap. Bootstrap can be defined as a free and
open-source framework that can be used to create responsive, mobile-first, front-end
web pages.
Advantages of Bootstrap:
There are various different advantages of Bootstrap, a few of them are given
below:
1. The first and foremost advantage of using Bootstrap is that it is very easy to use and
implement. If a person has some basic knowledge of HTML and CSS, that user can
easily use Bootstrap.
2. The fact that Bootstrap can adapt to the size of any phone, tablet, desktop and so on
is also very interesting feature.
3. Bootstrap 4 is also useful because it is compatible with all modern browsers which
include Google Chrome, Firefox, Internet Explorer 10+, Edge, Safari, and Opera.
4. It also produces less cross-browser bugs.
5. It is light weighted and consequently it can be widely used as a framework for creating
responsive sites.
6. Lastly, Bootstrap 4 is a very simple and yet very effective grid system.
Why should one use Bootstrap?
There are multiple reasons for that, such as:
1. It is a way more fast and simpler way to develop websites.
2. It can create platform-independent web pages.
3. It can also create responsive web pages.
4. The web pages created by using Bootstrap 4 can be easily made responsive.
Bootstrap 3 vs Bootstrap 4

17. Bootstrap 3 Bootstrap 4
In Bootstrap 3, the CSS source files are LESS (Leaner Style
Sheets).
In Bootstrap 4, the CSS source files are SCSS (Sassy
CSS).
Here, the grid system has 4 tiers which are xs, sm, md, and
lg.
Here, the grid system has 5 tiers which are xs, sm,
md, lg, and xl.
The CSS unit is px. The CSS unit is rem.
The dropdown structure is created with the help of <ul>
and <li>.
The dropdown structure is created with the help of
<ul> and <div>
The class .img-responsive is used in order to create
responsive images.
The class .img-fluid is used to create responsive
images.
For icons, a user can use Glyphicons. There is no support for Glyphicons in Bootstrap 4.
There are many classes that are used for media objects such
as .media, .media-body, .media-object, .media-heading and
so on.
There is only one class for media objects which is
.media.
Dark or inverse tables are not supported in Bootstrap 3 A user can create Dark or inverse tables with the
help of using .table-dark class.
The only classes that can be used to create buttons are .btn-
default and .btn-info
Many new classes were introduced that can be used
to create buttons such as - .btn-light, .btn-
secondary, .btn-success, .btn-dark. Moreover, the
class .btn-default was dropped.
A button of extra small size can be created with the help of
.btn-xs class.
The button of extra small size was no longer
available in Bootstrap 4. The only available classes
were .btn-sm and .btn-lg.
The checkboxes or radio boxes were created with the help
of classes such as .radio, .radio-inline, .checkbox, and
.checkbox-inline.
The checkboxes and radio buttons are created with
the help of using classes such as .form-check, .form-
check-label, .form-check-input, and .form-check-
inline.
The sizes of form can be increased or decreased with the
help of using .input-lg and .input-sm classes.
The sizes of form can be increased or decreased with
the help of using .form-control-lg and .form-
control-sm classes.
The menu headers can be created with the help of using
.dropdown-header class to the li tag.
The menu headers are created with the help of using
.dropdown-header class with h1 to h2 tags.
In order to divide sections, class .divider is used in the li
element.
In order to divide sections, a class .dropdown-
divider can be used in the div element.
The pages can be aligned with the help of .previous and
.next classes.
The classes .previous and .next are not supported in
this.

18. What are some key usages of Bootstrap 4 in today's world?
There are various key usages of Bootstrap 4, the examples are given below:
1. Supported by various Browsers: It can be supported by every browser.
2. Simple to start and implement: It is very easy to start and implement when the user
has a fair amount of knowledge about HTML and CSS. In addition to that, the
documentation is readily available on the official site.
3. Responsive design and looks: The web pages that are created by using the Bootstrap
framework are responsive and it can adapt to any screen size like mobile, desktop, etc.
4. Easily Customized: It also provides some built-in components and functionalities that
can be used for the purpose of easily customizing the web pages.
What are the disadvantages of bootstrap 4?
Bootstrap 4 also has many disadvantages; those disadvantages are given below:
1. In many cases, Bootstrap cannot be considered very practical for businesses that need
a big amount of investment.
2. Moreover, Bootstrap 4 can take a lot of time to create a website. Therefore, it is not a
very bright idea to use bootstrap 4 when there is no investment.
3. A person using Bootstrap 4 is not likely to earn any money even after investment.
4. And this is one of the reasons why a user can very easily end up in a lot of debt.
Bootstrap 4 - Layouts
Bootstrap 4 is the newest version of Bootstrap. The Bootstrap is a free to use and
completely open-source CSS framework directed at responsive, mobile-first front-end
web development. It contains CSS- and JavaScript-based design templates for
Here, the .jumbotron-fluid class cannot be used to create
full width jumbotrons.
Bootstrap 4 gives a user the access to use the
.jumbotron-fluid class to create full width
jumbotrons.
The class .items is used to create carousel items. The class .carousel-items is used for carousel items.
In Bootstrap 3, wells, panels, and thumbnails are supported. In Bootstrap 4, wells, panels, and thumbnails are not
supported. In place of that, cards can be used.

19. typography, forms, buttons, navigation, and other interface components which is the
most popular HTML, CSS, and JavaScript framework for developing responsive,
mobile-first websites. Bootstrap 4 is completely free to download and use.
Layouts in Bootstrap 4
In Bootstrap 4, there are container classes that are typically used to wrap the different
contents in a page. There are basically two container classes that can be used for
various different activities -
a. .container - this container class can be used to represent a fixed width container.
b. .container-fluid - this container can be used to represent a full width container.
Container
The .container class in Bootstrap 4 can be applied into a web page for the purpose of
wrapping the page content with a fixed width. Moreover, by using the container class
the content can be placed in the center very easily with the help of using the
.container class as shown below.
Fluid Container
In this section, a user can build a full width container with the help of a .container-
fluid class.
Bootstrap 4 - Buttons
n Bootstrap 4, users can also add buttons to their web pages. There are various
different types of buttons that can be applied to the web pages. Those buttons are
listed below:
• Basic Button
• Primary Button
• Secondary Button
• Success Button
• Information Button
• Warning Button
• Danger Button
• Dark Button
• Light Button
• Link Button

20. CHAPTER 4
JAVASCRIPT
What is JavaScript
JavaScript (js) is a light-weight object-oriented programming language which is used
by several websites for scripting the webpages. It is an interpreted, full-fledged
programming language that enables dynamic interactivity on websites when applied
to an HTML document. It was introduced in the year 1995 for adding programs to the
webpages in the Netscape Navigator browser. Since then, it has been adopted by all
other graphical web browsers. With JavaScript, users can build modern web
applications to interact directly without reloading the page every time. The traditional
website uses js to provide several forms of interactivity and simplicity.
Although, JavaScript has no connectivity with Java programming language. The name
was suggested and provided in the times when Java was gaining popularity in the
market. In addition to web browsers, databases such as CouchDB and MongoDB uses
JavaScript as their scripting and query language.
Features of JavaScript
There are following features of JavaScript:
1. All popular web browsers support JavaScript as they provide built-in execution
environments.
2. JavaScript follows the syntax and structure of the C programming language. Thus, it is
a structured programming language.
3. JavaScript is a weakly typed language, where certain types are implicitly cast
(depending on the operation).
4. JavaScript is an object-oriented programming language that uses prototypes rather
than using classes for inheritance.
5. It is a light-weighted and interpreted language.
6. It is a case-sensitive language.
7. JavaScript is supportable in several operating systems including, Windows, macOS, etc.
8. It provides good control to the users over the web browsers.
History of JavaScript

21. In 1993, Mosaic, the first popular web browser, came into existence. In the year
1994, Netscape was founded by Marc Andreessen. He realized that the web needed
to become more dynamic. Thus, a 'glue language' was believed to be provided to
HTML to make web designing easy for designers and part-time programmers.
Consequently, in 1995, the company recruited Brendan Eich intending to implement
and embed Scheme programming language to the browser. But, before Brendan could
start, the company merged with Sun Microsystems for adding Java into its Navigator
so that it could compete with Microsoft over the web technologies and platforms.
Now, two languages were there: Java and the scripting language. Further, Netscape
decided to give a similar name to the scripting language as Java's. It led to 'Javascript'.
Finally, in May 1995, Marc Andreessen coined the first code of Javascript named
'Mocha'. Later, the marketing team replaced the name with 'LiveScript'. But, due to
trademark reasons and certain other reasons, in December 1995, the language was
finally renamed to 'JavaScript'. From then, JavaScript came into existence.
AD
Application of JavaScript
JavaScript is used to create interactive websites. It is mainly used for:
o Client-side validation,
o Dynamic drop-down menus,
o Displaying date and time,
o Displaying pop-up windows and dialog boxes (like an alert dialog box, confirm dialog
box and prompt dialog box),
o Displaying clocks etc.
JavaScript Variable
1. JavaScript variable
2. JavaScript Local variable
3. JavaScript Global variable
A JavaScript variable is simply a name of storage location. There are two types of
variables in JavaScript : local variable and global variable.
There are some rules while declaring a JavaScript variable (also known as identifiers).
1. Name must start with a letter (a to z or A to Z), underscore( _ ), or dollar( $ ) sign.
2. After first letter we can use digits (0 to 9), for example value1.

22. 3. JavaScript variables are case sensitive, for example x and X are different variables.
JavaScript local variable
A JavaScript local variable is declared inside block or function. It is accessible within
the function or block only. For example:
JavaScript global variable
A JavaScript global variable is accessible from any function. A variable i.e. declared
outside the function or declared with window object is known as global variable. For
example:

23. CHAPTER 5
(EDUCATIONAL WEBSITE)
PROJECT DETAILS
PROJECT NAME: Online learning platform
Language used: java script
user interface design: html,css,bootstrap
web browser: google chrome
Screenshots: