HTML CSS Report

Download as pdf or txt
Download as pdf or txt
You are on page 1of 44

lOMoARcPSD|42399208

Internship Report for HTML and CSS

Introduction To Project Management Software (Massasoit Community College)

Scan to open on Studocu

Studocu is not sponsored or endorsed by any college or university


Downloaded by Saran ([email protected])
lOMoARcPSD|42399208

REPORT ON
WEBSITE DESIGNING

An Internship-I Report
Submitted in partial fulfilment of the requirement
For the degree of

Bachelor of Technology
In
Computer Science and Engineering

July-December 2020

Submitted by:
Insiya Badshah
[0704CS191061]

Department of Computer Science and Engineering

Mahakal Institute of Technology, Ujjain


Affiliated to Rajiv Gandhi Proudyogiki Vishwavidyalaya,
Bhopal

Downloaded by Saran ([email protected])


lOMoARcPSD|42399208

CERTIFICATE

Downloaded by Saran ([email protected])


lOMoARcPSD|42399208

A Report On Web Designing

RECOMMENDATION

The Internship work entitled “Report on Web Designing” submitted


by Insiya Badshah is recommended towards partial fulfilment for the
award of the Bachelor of Technology in Computer Science and
Engineering from Mahakal Institute of Technology, Ujjain by Rajiv
Gandhi Prodyogiki Vishwavidyalaya, Bhopal.

Internship Coordinator Head


Prof. Priyanka Garg
Department of Computer Science and Engineering
Date:
Mahakal Institute of Technology, Ujjain

II

Downloaded by Saran ([email protected])


lOMoARcPSD|42399208

A Report On Web Designing

Declaration

I Insiya Badshah hereby declare that I have undertaken 4 weeks


internship work at “Universal Informatics” during a period from 20
May, 2020 to 20 June, 2020 in partial fulfilment for the award of the
Bachelor of Technology in Computer Science and Engineering
from Mahakal Institute of Technology, Ujjain by Rajiv Gandhi
Prodyogiki Vishwavidyalaya, Bhopal. The work which is being
presented in the internship report submitted to Department of Computer
Science and Engineering from Mahakal Institute of Technology, Ujjain
is an authentic record of training work.

Date:
Insiya Badshah
[0704CS191061]

III

Downloaded by Saran ([email protected])


lOMoARcPSD|42399208

A Report On Web Designing

Acknowledgement
The successful completion of this internship report would not
have been possible without the support and assistance of many
individuals and organizations. I feel immensely blessed to have
gotten this during the course of my internship program. I would
like to take this opportunity to offer my earnest admiration to
each and every one of them.
I express my sentiment of gratitude to Mr. Kuldeep sir, who
has been a continuous source of inspiration as my intern trainer.
Without his constant guidance and suggestions, this report
would have been nowhere near completion. My gratitude for
his trust and generosity goes beyond words. I am indebted and
thankful to my learned and revered Prof. Vishwas Dixit, Head
of Department of Computer science and Engineering,
Mahakal Institute of Technology, Ujjain (M.P), for his
encouraging support and providing a meticulous platform to
learn.
I owe my deepest gratitude to internship coordinator Prof.
Priyanka Garg for her upbeat personality, kindness,
encouraging support and willingness to help, have tangibly and
greatly improve the quality of my internship report and brought
up to its present status.
Thanks to my classmates who helped me directly or indirectly
to accomplish my work. Finally, I thank all my teachers, who
were the people, who prepared us for this endeavour. I owe you
all my success.

IV

Downloaded by Saran ([email protected])


lOMoARcPSD|42399208

A Report On Web Designing

About Institute

Universal Informatics was launched in the year 1994 as a franchisee of


Tata Unisys Ltd. Education Centre (TULEC), soon it became the
premiere computer training centre of Madhya Pradesh. Through the 23
years of its journey it has crossed several milestones. It partnered with
all subsequent activities of Tata InfoTech Ltd. Till Tata withdrew itself
from computer education business. Endowed with the tradition of Tata,
Universal started its own curriculum and successfully trained more than
5000 students after that and more than 50000 in the total tenure. The
profile of our students varies from Science graduates, Postgraduates,
Engineering students, MCA students & working professionals. Our
course is very much popular among engineering students. We are
partner of Pearson VUE Testing and Oracle workforce Development.
They are ISO 9001:2008 certified company. All kind of International
certification exams are executed at our place.
At MIT Group of Institutes Ujjain, Universal Informatics Ujjain
branch is successfully conducting summer internship from last 2 years
with the best quality. We train t students/interns on latest tools and
technologies currently required in IT Industry. The Trainers &
Developers that they recruit are highly skilled & experienced and have
few years of Industry Experience as well.

Downloaded by Saran ([email protected])


lOMoARcPSD|42399208

A Report On Web Designing

TABLE OF CONTENTS
Page

Internship Certificate provided by the Institute…………... No.


I
Recommendation…………………………………………. II
Declaration………………………………………………... III
Acknowledgement……………………………………….... IV
About Company/Industry/Institute………………………... V
Table of Contents………………………………………….. VI
Abstract……………………………………………………. VII
Figure Index……………………………………………….. VIII

Chapter 1 Introduction (1-8)

1.1 Introduction…………………………………………… 01
1.2 Objective…………………………………………….... 02
1.2.1 To gain skills and knowledge…………………. 02
1.2.2 To get filled work experience…………………. 02
1.2.3 To enhance our communication skills…………. 02
1.2.4 To link theory with practice……………………. 03
1.2.5 To build a network……………………………... 03
1.3 Tools and Technology used……………………………. 04

Chapter 2 Training Work Undertaken………………..... (9-11)

2.1 Training Attended……………………………………... 09


2.2 Roles and Responsibility……………………………… 09
2.3 Work Environment……………………………………. 10

VI

Downloaded by Saran ([email protected])


lOMoARcPSD|42399208

A Report On Web Designing

Chapter 3 Results and Discussion……………………… (12-16)

3.1 Discussion…………………………………………… 12
3.2 Learning Outcome……………………………………. 12
3.2.1 HTML………………………………………... 12
3.2.2 CSS…………………………………………… 13
3.2.3 Bootstrap……………………………………... 13
3.2.4 JavaScript…………………………………….. 13
3.3 Result…………………………………………………. 14

Chapter 4 Conclusion and Future Scope……………… (17-18)


4.1 Conclusion………………………………………… 17
4.2 Future Scope………………………………………….. 18

References………………………………………………... 18

Appendix B Daily Diary

VI

Downloaded by Saran ([email protected])


lOMoARcPSD|42399208

A Report On Web Designing

Abstract

Website Design and learning HTML were the main objective


of this internship. To develop a web based application there are
several programming languages that are in use. Some of them
are only used for the frontend and backend design of the
software. For example, HTML3, HTML4, HTML5, CSS,
Bootstrap, JavaScript etc. There are also some other
programming languages that are used to develop the dynamic
functions of the software or application. For example- PHP,
Java etc. Nowadays there are also some frameworks that use
vastly. Frameworks are basically structured programming by
using Model, View and Controller. It is also called as MVC. If
we develop web based application that is very useful for us
because we can access it from anywhere in the world. It is very
helpful for our daily life. That is why I choose subject of my
report as “WEB DESIGN”. Training in Universal Informatics
added huge experiences in my upcoming career. Solving real
life problems was another key issue. This report takes us
through all the details of WEBSITE DESIGN knowledge and
experience gathered during this internship period.

VII

Downloaded by Saran ([email protected])


lOMoARcPSD|42399208

A Report On Web Designing

FIGURE INDEX

Figure No. Title of Figure Page

Figure1.3.1 Sublime Text Editor 07

Figure 1.3.2 JQuery 08

Figure 3.1 Time Table using HTML 14

Figure 3.2 Table list using HTML 14

Figure 3.3 Click on image button 15

Figure 3.4 Website Layout 15

Figure 3.5 Periodic Table 16

VIII

Downloaded by Saran ([email protected])


lOMoARcPSD|42399208

A Report On Web Designing

CHAPTER 1
INTRODUCTION

1.1 Introduction
As a full-time student at MIT group of Institutes, I was
provided an opportunity to undertake an internship at
Universal Informatics. The degree towards I am currently
studying is a Bachelor of Engineering in Computer
Science and Technology. The course at UI was quite
challenging for me for a few reasons: Firstly, the
programming languages and development tools I was
using were new for me, hence I had to quickly integrate
not only with my new living environment but also
academically. This was very beneficial for me as at the
end I could compare what I’ve learnt with what I already
knew and find a connection between the two.
This report is a description of my 4 weeks internship
carried out as a compulsory component of the course at
UI. In the following chapter details of tools and
technology used and an overview is given. Afterwards, I
explain my role and tasks as a trainee and give specific
technical details about my main tasks. Finally, a
conclusion is drawn from the experience.

Downloaded by Saran ([email protected])


lOMoARcPSD|42399208

A Report On Web Designing

1.2 Objective
The objective of the web design is to handle the entire
design of a website. The software keeps track of all the
information about the entire website. The system contains
database where all the information will be stored safely.

1.2.1 To gain skills and knowledge


This internship provided us essential skills and knowledge
one requires in the field of web designing. The crucial
tools used during the tenure helped us in gaining
knowledge about programming languages.

1.2.2 To get field work experience


By taking this training we enhanced our knowledge in
Web designing and got insight in how the websites are
designed using HTML and CSS.

1.2.3 To enhance our communication skills


By interacting with my trainee and classmates I got to
learn a lot. It helped me to enhance my communicative
skills and represent my work with confidence. It boosted
my confidence to design more webpages and create some
great designs just for fun.

Downloaded by Saran ([email protected])


lOMoARcPSD|42399208

A Report On Web Designing

1.2.4 To link theory with practice


First we learned the theory aspect and then we put that
into practice. By doing the practical work, our concept
got clearer and it was easy to code into HTML once we
got familiar with it. By putting our theoretical knowledge
into practical, coding became more fun.

1.2.5 To build a network


By learning how to code in HTML and CSS it is easy to
build and design our own websites with all the changes
we want. We also got to know about how websites are
designed initially and the logic behind that.

Downloaded by Saran ([email protected])


lOMoARcPSD|42399208

A Report On Web Designing

1.3 Tools and Technology Used


Various tools and technology were used during our internship
training.
Some of them are listed below:
1. HTML5
HTML stands for Hyper Text Mark-up Language. It is
used to design web pages using mark-up language. HTML
is the combination of Hypertext and Mark-up language.
Hypertext defines the link between the web pages. Mark-
up language is used to define the text document within tag
which defines the structure of web pages. HTML5 is the
fifth and current version of HTML. It has improved the
mark-up available for documents and has introduced
application programming interfaces (API) and Document
Object Model (DOM).
Below example illustrate the HTML5 content:

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h1>This is a Heading</h1>
<p> This is a paragraph. </p>
</body>
</html>

Output of the above program

Downloaded by Saran ([email protected])


lOMoARcPSD|42399208

A Report On Web Designing

2. CSS3
Cascading Style Sheets, fondly referred to as CSS, is a
simply designed language intended to simplify the
process of making web pages presentable. CSS allows
you to apply styles to web pages. More importantly, CSS
enables you to do this independent of the HTML that
makes up each web page.
There are three types of CSS which are given below:
 Inline CSS
 Internal or Embedded CSS
 External CSS
Below example illustrate the CSS3 content:

<!DOCTYPE html>
<html>
<head>
<title> HTML 5 Demo</title>
<style>
.intern {
font-size:40px;
font-weight:bold;
color:green;
}
body {
text-align:center;
}
</style>
</head>
<body>
<div class = "intern">Hello World!</div>
<aside>
<div>This is Insiya Badshah</div>
</aside>
</body>
</html>

Downloaded by Saran ([email protected])


lOMoARcPSD|42399208

A Report On Web Designing

Output of the above program

3. JavaScript
JavaScript is a lightweight, cross-platform and
interpreted scripting language. It is well-known for the
development of web pages, many non-browser
environments also use it. JavaScript can be used
for Client-side developments as well as Server-side
developments.
Features of JavaScript:
 According to a recent survey conducted by Stack
Overflow, JavaScript is the most popular language
on earth.
With advances in browser technology and
JavaScript having moved into the server with
Node.js and other frameworks, JavaScript is capable
of so much more.
 Functions in JS are objects. They may have
properties and methods just like another object.
They can be passed as arguments in other
functions.
 Can handle date and time.
 Performs Form Validation although the forms are
created using HTML.
 No compiler needed.

Downloaded by Saran ([email protected])


lOMoARcPSD|42399208

A Report On Web Designing

4. Sublime text
Artfully run by a one-man development team, the secret
to sublime’s success lies in the program’s vast array of
keyboard shortcuts - such as the ability to perform
simultaneous editing (making the same interactive
changes to multiple selected areas) as well as quick
navigation to files, symbols, and lines. And when you’re
spending 8+ hours with your editor each day, those
precious few seconds saved for each process really do
add up.

Fig.1.3.1 Sublime Text Editor

5. JQuery
JavaScript has long been considered an essential front-
end language by developers, although it’s not without its
problems: riddled with browser inconsistencies, its
somewhat complicated and unapproachable syntax meant
that functionality often suffered.
That was until 2006, when jQuery – a fast, small, cross-
platform JavaScript library aimed at simplifying the
front-end process – appeared on the scene. By
abstracting a lot of the functionality usually left for
developers to solve on their own, jQuery allowed greater

Downloaded by Saran ([email protected])


lOMoARcPSD|42399208

A Report On Web Designing

scope for creating animations, adding plug-ins, or even


just navigating documents.
And it’s clearly successful – jQuery was by far the most
popular JavaScript library in existence in 2015, with
installation on 65% of the top 10 million highest-
trafficked sites on the web.

Fig 1.3.2 JQuery

Downloaded by Saran ([email protected])


lOMoARcPSD|42399208

A Report On Web Designing

Chapter 2
Training work undertaken

2.1 Training Attended


According to RGPV University, the III Semester of
B.Tech CS must involve an internship program. The
students require at least 2 weeks of internship program
for attaining a successful career in the related fields.
There are more attendant and requirement is need to
build a project. We know that, we can mix all languages
like C++, C, HTML, PHP, JavaScript and more. The
web server combines the results of the interpreted and
executed HTML code, which maybe any type of data,
including images, with the generated web page. The
training that I attended In Universal Informatics
included:
 HTML5
 CSS
 Bootstrap
 JavaScript
 Ajax
 JQuery

2.2 Roles and Responsibility


As an intern my responsibilities at Universal Informatics
Pvt Ltd. was to cover all aspects of creating web

Downloaded by Saran ([email protected])


lOMoARcPSD|42399208

A Report On Web Designing

application to become a web developer. For this required


core knowledge about designing tools like HTML, CSS,
Bootstrap, JavaScript, etc. and backend scripting
language like PHP. The main responsibility was to
ensure that the web application designed must appeal to
the desired target audience and, as a result, catches their
attention and also include a working knowledge of
different web browsers. While learning about web
development I also gained knowledge about front end
designing. During my internship period I mostly worked
with designing “Training Management System” web
application as well as other mini projects too.

2.3 Work environment


Front end Developer generally works at client side
dealing with the web page design, graphics that is
accessible to the user.

Back end Developer is a person who is responsible for


the back end development that interacts with the server.
This type of web developer specializes in the languages
like PHP, Ruby, ASP.Net, Java and Perl.

The job profiles for the web developer includes:


 Front end web developer.
 Back end Web Developer.
 Web Application Developer.
 Design and Layout Analyst

10

Downloaded by Saran ([email protected])


lOMoARcPSD|42399208

A Report On Web Designing

 Senior web Analyst.


 Web Marketing Analyst.

11

Downloaded by Saran ([email protected])


lOMoARcPSD|42399208

A Report On Web Designing

Chapter 3
Result and Discussion
3.1 Discussion
During entire training session we discussed about how to
analysis the project and how to work on it as per the
requirement of client. The projects done during the
internship are based on the tags of programming language
HTML & CSS.

3.2 Learning Outcome

3.2.1 HTML
 Basic Concept (WWW & HTTP, client server
communication)
 Basic HTML (tags, element, attributes, paragraphs,
headings, line breaks, lists, table, color codes, font, text
linking, email, images, background, comments, media,
charset)
 HTML Forms (input, text fields, password, checkbox,
combo-box, radio box, text areas, files, buttons)
 HTML5 features

12

Downloaded by Saran ([email protected])


lOMoARcPSD|42399208

A Report On Web Designing

3.2.2 CSS
 Basic CSS (selector, internal, external, inline, class, id,
background, font, text, padding, margin, border, list CSS,
hovering and elements)
 Advance CSS (border-radius, opacity, cursor, layers,
position, display, float, gradient and multiple-column)
 Concept of Menu (single menu, drop-down menu)
 Template design using CSS div.

3.2.3 Bootstrap
 Grid System
 Typography
 Tables, forms, buttons, images
 Dropdown, button group
 Navigation element
 Bootstrap plug-ins (Transition, Modal, Dropdown, Tab,
tooltip, Alert, Button)

3.2.4 JavaScript
 Basic JavaScript (syntax, enable, location, operators,
variables, events, alert, confirm, prompt, POP up, date,
print)
 JavaScript string (strings, length, split, search, replace)

13

Downloaded by Saran ([email protected])


lOMoARcPSD|42399208

A Report On Web Designing

3.3 Result
Following are the screenshots of the result of the
projects done during the internship period.

Project-1

Fig 3.1 Time table using HTML

Project-2

Fig 3.2 Table list using HTML

14

Downloaded by Saran ([email protected])


lOMoARcPSD|42399208

A Report On Web Designing

Project-3

Fig 3.3 Click on Button using HTML and CSS

Project-4

Fig 3.4 Website Layout

15

Downloaded by Saran ([email protected])


lOMoARcPSD|42399208

A Report On Web Designing

Project-5

Fig 3.5 Periodic Table using HTML and CSS

16

Downloaded by Saran ([email protected])


lOMoARcPSD|42399208

A Report On Web Designing

CHAPTER 4
CONCLUSION AND FUTURE SCOPE

4.1 Conclusion
In conclusion, I can say that this internship was a great
experience. Thanks to this project, I acquired deeper
knowledge concerning my technical skills, but I also personally
benefited. Currently HTML is a common part of web
applications, and it is one of the most popular language for web
designing used by professionals worldwide. If we surf internet,
we can see millions of websites designed with HTML and CSS.
I learned to live in a different environment from the one I am
used to. Indeed, I grew more independent in work and also in
everyday life. I realized that I could do more things than I
thought, like learning new things by myself.
There are huge opportunities available for the students who
want to work in this field. Many private and public
organizations hire web designer for their online work and
website development. With the rapid advent of online industry,
the demand of web development professionals is increasing,
and this has created a huge job opportunity for the aspirants in
the upcoming days.
Also, an experienced person in this field can also work as a
freelancer; there are many online companies which provide
online projects to the individuals.

17

Downloaded by Saran ([email protected])


lOMoARcPSD|42399208

A Report On Web Designing

4.2 Future Scope


If someone has no experience in this field, finding work can be
a real challenge. A successful internship can help an individual
turn an experience into a career opportunity. So as a successful
internship some future scopes are:
 To work in IT company.
 Can work as a Software Engineer.
 Can work as a Web Designer.
 Can work as a Web Developer.
 Can work as a QA Tester.

References
-http://www.w3schools.com
-http://www.wikipidea.com
-http://www.w3.org/standards/semanticweb/
-http://developer.mozilla.org/en/docs
-http://sioc-project.org/ontology
-http://janastu.org

18

Downloaded by Saran ([email protected])


lOMoARcPSD|42399208

A Report On Web Designing

APPENDIX
Daily Diary

19

Downloaded by Saran ([email protected])


lOMoARcPSD|42399208

A Report On Web Designing

Downloaded by Saran ([email protected])


lOMoARcPSD|42399208

A Report On Web Designing

Downloaded by Saran ([email protected])


lOMoARcPSD|42399208

A Report On Web Designing

Downloaded by Saran ([email protected])


lOMoARcPSD|42399208

A Report On Web Designing

Downloaded by Saran ([email protected])


lOMoARcPSD|42399208

A Report On Web Designing

Downloaded by Saran ([email protected])


lOMoARcPSD|42399208

A Report On Web Designing

Downloaded by Saran ([email protected])


lOMoARcPSD|42399208

A Report On Web Designing

Downloaded by Saran ([email protected])


lOMoARcPSD|42399208

A Report On Web Designing

Downloaded by Saran ([email protected])


lOMoARcPSD|42399208

A Report On Web Designing

Downloaded by Saran ([email protected])


lOMoARcPSD|42399208

A Report On Web Designing

Downloaded by Saran ([email protected])


lOMoARcPSD|42399208

A Report On Web Designing

Downloaded by Saran ([email protected])


lOMoARcPSD|42399208

A Report On Web Designing

Downloaded by Saran ([email protected])


lOMoARcPSD|42399208

A Report On Web Designing

Downloaded by Saran ([email protected])


lOMoARcPSD|42399208

A Report On Web Designing

Downloaded by Saran ([email protected])

You might also like