WEB DESIGNING

INTERNSHIP REPORT
Submitted by

PRINCY T 18P330

in partial fulfillment for the award of the degree of

BACHELOR OF ENGINEERING
IN
COMPUTER SCIENCE ANDENGINEERING

ANNA UNIVERSITY, CHENNAI

AUGUST 2020
 CERTIFICATE

This is to certify that the Internship report submitted by PRINCY T( Roll No: 18P330 )

is work done by her and submitted during 2020–2021academic year,in partial fulfillment of the

requirements for the award of the degree of BACHELOR OF ENGINEERING in COMPUTER

SCIENCE AND ENGINEERING.

Department Internship Coordinator Head of the Department

Certified that the candidate was examined in the viva-voce examination held on

………………….

…………………...
(Internal Examiner)
 ACKNOWLEDGEMENT

First I would like to thank Mr. MOHAN KUMAR for giving me the
opportunity to do an internship within the APPIN technology. Although quite
short, for me this was a great experience I can learn from. It helped me to explore
my skills and increased my interest in web development.

It is the moment of immense pride for me to reveal my profound thanks to

our respected Principal, Dr. P.VIJAYAKUMAR, M.E., Ph.D. who happens to be
striving force in all our endeavors.

I express my sincere thanks to our Dr. S.ANGEL LATHA MARY M.E.,

Ph.D., Head of the Department of Computer Science and Engineering.
I express my sincere thanks to my tutors Dr.P.MURUGESWARI,
M.Tech., Ph.D. and Ms. P.V ASHWATHY DEVARAJ, M.Tech. who provided
me with the necessary guidance and encouragement.

Without help and support of all above mentioned people, I may not be able
to fulfill my internship and learn different things. I would like to thanks all those
people for their valuable contribution and proper guidance throughout mine
internship period.

Finally, I must acknowledge with due respect the constant support and
patients of my parents.

1
 ABSTRACT

The key to having successful and fully functional web applications is in

their communication with the user. It is of no surprise that web designing and
graphic designing is popular topic for a web developer, as is the main goal at the
APPIN Technology lab, where I had the honour to spend my first training
period.

A solution has been proposed for the internationalisation and

customization of web applications in general. Taking into account web standards
and the back-end and front-end architecture of web development, a method for
providing a multi-language web interface has been planned from scratch and
explained in details in this report.

2
 TABLE OF CONTENTS

CHAPTER TITLE PAGE

NO NO
ACKNOWLEDGEMENT 1
ABSTRACT 2
LIST OF FIGURES 4

LIST OF ABBREVIATIONS 5
WEEKLY REPORT 6
1 INTRODUCTION
1.1 Introduction to Internship 7
1.2 Internship Program Objective 7
1.3 Introduction to web designing 7
1.4 Website components 9
2 INTRODUCTION HTML AND CSS
2.1 HTML 10
2.2 Basic Tags 11
2.3 CSS 11
3 INTRODUCTION JAVASCRIPT AND JQUERY
3.1 Java Script 14
3.2 J Query
15
4 SAMPLE PROJECT 17
5 REAL TIME PROJECT
5.1 Project code 19

5.2 Output 29
6 CONCLUSION 30
REFERENCES 31

3
 LIST OF FIGURES

FIG NO. LIST OF FIGURES PAGE NO

1.1 Web designing 8
2.1 Forms Output 18
3.1 Internship Output 29

4
LIST OF ABBREVIATIONS

HTML Hyper Text Markup Language

UI User Interface
CSS Cascading Style Sheets
JS Java Script

5
 WEEKLY OVERVIEW OF INTERNSHIP ACTIVITIES

DATE DAY NAME OF THE TOPIC/MODULE COMPLETED

05.8.2020 Wednesday INTRODUCTION TO HTML AND ITS USES
1ST WEEK

06.8.2020 Thursday HOW TO CREATE BASIC HTML DOCUMENT

07.8.2020 Friday LECTURE ABOUT HTML TAGS
10.8.2020 Monday LECTURE ABOUT HTML LIST
11.8.2020 Tuesday LECTURE ABOUT HTML TABLES
12.8.2020 Wednesday LECTURE ABOUT HTML FORMS

DATE DAY NAME OF THE TOPIC/MODULE COMPLETED

13.8.2020 Thursday LECTURE ABOUT INPUT TAG IN HTML
2nd WEEK

14.8.2020 Friday INTRODUCTION TO CSS

17.8.2020 Monday HOW TO STYLE A HTML DOCUMENT USING CSS
18.8.2020 Tuesday CLASSES AND ID
19.8.2020 Wednesday LAYOUTS AND DESIGN
20.8.2020 Thursday SIMPLE WEBSITE DEMO

DATE DAY NAME OF THE TOPIC/MODULE COMPLETED

21.8.2020 Friday CREATED THE HTML DOCUMENT FOR TABLES
22.8.2020 Saturday CREATED THE HTML DOCUMENT FOR FORMS
3rd WEEK

24.8.2020 Monday CREATED THE HTML DOCUMENT FOR COMBINATION

WITH FRAMES
25.8.2020 Tuesday DISCUSSION ABOUT WEBSITE DEVELOPMENT AND
MANAGEMENT
26.8.2020 Wednesday CREATED A SAMPLE WEBSITE DAY 1
27.8.2020 Thursday CREATED A SAMPLE WEBSITE DAY 2

DATE DAY NAME OF THE TOPIC/MODULE COMPLETED

28.8.2020 Friday ERROR CORRECTION
4thWEEK

29.8.2020 Saturday GROUP DISCUSSION

31.8.2020 Monday DESIGNED THE ADMIN PAGE
01.9.2020 Tuesday QUALITIES OF WEB DEVELOPER
02.9.2020 Wednesday LECTURE ABOUT JAVASCRIPT FOR ADVANCE
03.9.2020 Thursday TIPS FOR GOOD DESIGNER AND CERTIFICATION ISSUE

6
 CHAPTER 1

INTRODUCTION

1.1 Introduction to Internship

An internship is a structured work experience related to a student’s major
and/or career goal. It is an experience that should enhance a student’s academic,
career, and personal development. It is an involvement, closely aligned with the
student’s major and arranged with an employer who believes it is desirable to aid
in the training and education of the student.

It is of a short duration, typically one to two months, through direct personal

contact hours or through a training program, and to aid the intern in developing a
summary report of his/her experience.

This program has enhanced the skill and enthusiasms of the students as they
get knowledge of the company environments and to learn different aspects of
working mechanism that prevail in the organizations.

1.2 Internship Program Objective

The major objectives of internship are:

• To expose students to a particular job and a profession or industry.

• To provide students with opportunity to develop skills in the field

of interest.

• To assist students in gaining vital work-related experience and

building strong resume for bright career.
1.3 Introduction to web designing

Web design encompasses many different skills and disciplines in the

production and maintenance of websites. The different areas of web design
include web graphic design, interface design, authoring, including standardised

7
code and proprietary software, user experience design and search engine
optimization. Often many individuals will work in teams covering different
aspects of the design process, although some designers will cover them all.
The term "web design" is normally used to describe the design process
relating to the front-end (client side) design of a website including writing
markup. Web design partially overlaps web engineering in the broader scope of
web development. Web designers are expected to have an awareness of usability
and if their role involves creating markup then they are also expected to be up to
date with web accessibility guidelines.

Fig 1.1. Web Designing.

Web designers use a variety of different tools depending on what part of the
production process they are involved in. These tools are updated over time by
newer standards and software but the principles behind them remain the same.
Web designers use both vector and raster graphics editors to create web-
formatted imagery or design prototypes.
Technologies used to create websites include W3C standards like HTML
and CSS, which can be hand-coded or generated by WYSIWYG editing

8
software. Other tools web designers might use include mark up validators and
other testing tools for usability and accessibility to ensure their websites meet
web accessibility guidelines.

1.4 Website Component

• LOGO-logo for your website.

• Web pages – Home, dashboard, About Us, services, product, gallery,
contactUs.
• About page-that includes: A complete description of you and /or
your company
,your website and/or your company objectives such as mail address,
phone number..,
• Services pages-Home, AboutUs, platforms.. etc.,

9
 CHAPTER 2
INTRODUCTION TO HTML

2.1. HYPER TEXT MARKUP LANGUAGE:

Hypertext Markup Language (HTML) is the standard markup

language for documents designed to be displayed in a web browser. It can be
assisted by technologies such as Cascading Style Sheets (CSS) and scripting
languages such as JavaScript.

Web browsers receive HTML documents from a web server or from local
storage and render the documents into multimedia web pages. HTML describes the
structure of a web page semantically and originally included cues for the
appearance of the document.

HTML elements are the building blocks of HTML pages. With HTML
constructs, images and other objects such as interactive forms may be embedded
into the rendered page. HTML provides a means to create structured documents by
denoting structural semantics for text such as headings, paragraphs, lists, links,
quotes and other items.

HTML elements are delineated by tags, written using angle brackets. Tags
such as <img /> and <input /> directly introduce content into the page. Other tags

such as <p> surround and provide information about document text and may
include other tags as sub-elements. Browsers do not display the HTML tags, but
use them to interpret the content of the page.

HTML can embed programs written in a scripting language such

as JavaScript, which affects the behavior and content of web pages. Inclusion of
CSS defines the look and layout of content. The World Wide Web
Consortium (W3C), former maintainer of the HTML and current maintainer of the
10
CSS standards, has encouraged the use of CSS over explicit presentational HTML
since 1997.HTML uses "markup" to annotate text, images, and other content for
display in a Web browser.

HTML markup includes special "elements" such as <head>, <title>,

<body>, <header>, <footer>, <article>, <section>, <p>, <div>, <span>,<img>,
<aside>, <audio>, <canvas>, <datalist>, <details>, <embed>, <nav>,
<output>,<progress>, <video>, <ul>, <ol>, <li> and many others.

2.2. Tags:
HTML tags are the hidden keywords within a web page that define how
your web browser must format and display the content.
Most tags must have two parts, an opening and a closing part. For
example, <html> is the opening tag and </html> is the closing tag. Note that
the closing tag has the same text as the opening tag, but has an additional
forward-slash ( / ) character. I tend to interpret this as the "end" or "close"
character.
There are some tags that are an exception to this rule, and where a
closing tag is not required. The <img> tag for showing images is one example
of this. Each HTML file must have the essential tags for it to be valid, so that
web browsers can understand it and display it correctly.
The rest of the HTML file can contain as little or as many tags as you
want to display your content.

2.3. CSS:

Cascading Style Sheets (CSS) is a style sheet language used

for describing the presentation of a document written in a markup language
like HTML.

11
 CSS is a cornerstone technology of the World Wide Web, alongside HTML
and Java Script.

CSS is designed to enable the separation of presentation and

content, including layout, colors, and fonts. This separation can improve content
accessibility, provide more flexibility and control in the specification of
presentation characteristics, enable multiple web pages to share formatting by
specifying the relevant CSS in a separate.CSS file which reduces complexity and
repetition in the structural content as well as enabling the CSS file to be cached to
improve the page load speed between the pages that share the file and its
formatting.

Separation of formatting and content also makes it feasible to present the

same markup page in different styles for different rendering methods, such as on-
screen, in print, by voice (via speech-based browser or screen reader), and on
Braille-based tactile devices. CSS also has rules for alternate formatting if the
content is accessed on a mobile device.

The name cascading comes from the specified priority scheme to determine
which style rule applies if more than one rule matches a particular element. This
cascading priority scheme is predictable.

The CSS specifications are text/css maintained by the World Wide Web
Consortium (W3C).Internet media type (MIME type) is registered for use with
CSS by RFC 2318(March 1998). The W3C operates a free CSS validation service
for CSS documents.[5]

In addition to HTML, other markup languages support the use of CSS

including XHTML, plain XML, SVG, and XUL.

MERITS OF CSS:

• Pages load faster − If you are using CSS, you do not need to write
HTML tag attributes every time. Just write one CSS rule of a tag and
apply it to all the occurrences of that tag. So less code means faster
download times.
12
• Easy maintenance − To make a global change, simply change the
style, and all elements in all the web pages will be updated
automatically.

• Superior styles to HTML − CSS has a much wider array of attributes

than HTML, so you can give a far better look to your HTML page in
comparison to HTML attributes.

• Device Compatibility − Style sheets allow content to be optimized for

more than one type of device. By using the same HTML document,
different versions of a website can be presented for handheld devices
such as PDAs and cell phones or for printing.

13
 CHAPTER 3

INTRODUCTION TO JAVASCRIPT AND JQUERY

3.1. JAVASCRIPT:

JavaScript , often abbreviated as JS, is a programming language that

conforms to the ECMA Script specification. JavaScript is high-level, often just-
in-time compiled, and multi-paradigm. It has curly-bracket syntax, dynamic
typing, prototype-based object-orientation, and first-class functions.

Alongside HTML and CSS, JavaScript is one of the core technologies of

the World Wide Web. JavaScript enables interactive web pages and is an
essential part of web applications. The vast majority of websites use it for client-
side page behavior, and all major web browsers have a dedicated JavaScript
engine to execute it.

As a multi-paradigm language, JavaScript supports event-driven, functional,

and imperative programming styles. It has application programming
interfaces (APIs) for working with text, dates, regular expressions, standard data
structures, and the Document Object Model (DOM). However, the language
itself does not include any input/output (I/O), such as networking, storage,
or graphics facilities, as the host environment (usually a web browser) provides
those APIs.

JavaScript engines were originally used only in web browsers, but they are
now embedded in some servers, usually via Node.js. They are also embedded in
a variety of applications created with frameworks such as Electron and Cordova.

14
 Although there are similarities between JavaScript and Java, including
language name, syntax, and respective standard libraries, the two languages are
distinct and differ greatly in design.

3.2. JQUERY

JQuery is a JavaScript library designed to simplify HTML DOM tree

traversal and manipulation, as well as event handling, CSS animation,
and Ajax.[3] It is free, open-source software using the permissive MIT License.
As of May 2019, jQuery is used by 73% of the 10 million most popular
websites. Web analysis indicates that it is the most widely deployed JavaScript
library by a large margin, having 3 to 4 times more usage than any other
JavaScript library.

JQuery's syntax is designed to make it easier to navigate a document,

select DOM elements, create animations, handle events, and
develop Ajax applications. JQuery also provides capabilities for developers to
create plug-ins on top of the JavaScript library. This enables developers to
create abstractions for low-level interaction and animation, advanced effects and
high-level, themeable widgets. The modular approach to the jQuery library
allows the creation of powerful dynamic web pages and Web applications.

The set of jQuery core features—DOM element selections, traversal and

manipulation—enabled by its selector engine , created a new "programming
style", fusing algorithms and DOM data structures. This style influenced the
architecture of other JavaScript frameworks like YUI v3 and Dojo, later
stimulating the creation of the standard Selectors API. Later, this style has been
enhanced with a deeper algorithm-data fusion in an heir of jQuery,
the D3.js framework.

15
 Microsoft and Nokia bundle jQuery on their platforms. Microsoft includes it
with Visual Studio for use within Microsoft's ASP.NET AJAX and ASP.NET
MVC frameworks while Nokia has integrated it into the Web Run-Time widget
development platform.

16
 CHAPTER 4 w2aq
SAMPLE PROJECT
<html>

<head>

<title>Span</title>

<style>

a{

text-decoration:none;

a:hover{

text-decoration:underline;

#rig{

float:right;

</style>

</head>

<body>

<center><h1 style="font-size:60px;"><span style="color:blue">A</span><span

style="color:red">P</span><span style="color:brown">P</span><span
style="color:yellow">I</span><span style="color:pink">N</span></h1></center>

<a href="https://www.google.com">click here!!!</a>

<a href="https://www.facebook.com" id="rig">

<img src="fb.jpeg">

</a>

</body>

17
 </html>

OUTPUT:

Fig2.1.Frames output

18
 CHAPTER 5
REAL TIME PROJECT SAMPLE

5.1. PROJECT CODE

<!DOCTYPE html>

<html>

<head>

<style>

p{

color: yellow;

margin-left: 8px;

font-size: 20px;

#inpt{

width: 92.5%;

#submit {

background-color: green;

border-color: green;

color:white;

19
 height: 30px;

width: 60px;

#cancel {

background-color: red;

border-color: red;

color:white;

height: 30px;

width: 60px;

#frm{

color: yellow;

background-color: #0a0a2a;

#check {

text-align: center;

#col1 {

color: yellow;

text-align: right;

20
</style>

</head>

<body>

<table cellpadding="10">

<tr>

<td bgcolor="orange">

<font color="yellow" size=5px>Sign Up</font>

</td>

</tr>

<tr>

<td bgcolor="#0a0a2a">

<form id="frm"><br>

<table>

<tr>

<td id="col1">

First Name

</td>

<td>

&nbsp&nbsp<input id="inpt" type="text" placeholder="Enter First Name... "></input>

</td>

</tr>

21
<tr><td id="col1">

Last Name

</td>

<td>

&nbsp&nbsp<input id="inpt" type="text" placeholder="Enter Last Name... "></input>

</td></tr>

<tr><td id="col1">

Screen Name</td>

<td>

&nbsp&nbsp<input id="inpt" type="text" placeholder="Enter Screen Name... "></input>

</td></tr>

<tr><td id="col1">

Date of Birth</td>

<td>

&nbsp&nbsp<select name="month" placeholder="May">

<option value="jan">January</option>

<option value="feb">February</option>

<option value="mar">March</option>

<option value="apr">April</option>

<option value="may" selected disabled hidden>May</option>

<option value="june">June</option>

22
<option value="mar">July</option>

<option value="aug">August</option>

<option value="sep">September</option>

<option value="oct">October</option>

<option value="nov">November</option>

<option value="dec">December</option>

</select>&nbsp&nbsp

<select name="date" placeholder="5">

<option value="1">1</option>

<option value="2">2</option>

<option value="3">3</option>

<option value="4">4</option>

<option value="5" selected disabled hidden>5</option>

<option value="6">6</option>

<option value="7">7</option>

<option value="8">8</option>

<option value="9">9</option>

<option value="10">10</option>

<option value="11">11</option>

<option value="12">12</option>

<option value="13">13</option>

23
<option value="14">14</option>

<option value="15">15</option>

<option value="16">16</option>

<option value="17">17</option>

<option value="18">18</option>

<option value="19">19</option>

<option value="20">20</option>

<option value="21">21</option>

<option value="22">22</option>

<option value="23">23</option>

<option value="24">24</option>

<option value="25">25</option>

<option value="26">26</option>

<option value="27">27</option>

<option value="28">28</option>

<option value="29">29</option>

<option value="30">30</option>

<option value="31">31</option>

</select>&nbsp&nbsp

<select name="year" placeholder="1985">

<option value="1985" selected disabled hidden>1985</option>

24
<option value="1986">1986</option>

<option value="1987">1987</option>

<option value="1988">1988</option>

<option value="1989">1989</option>

<option value="1990">1990</option>

<option value="1991">1991</option>

<option value="1992">1992</option>

<option value="1993">1993</option>

<option value="1994">1994</option>

<option value="1995">1995</option>

<option value="1996">1996</option>

<option value="1997">1997</option>

<option value="1998">1998</option>

<option value="1999">1999</option>

<option value="2000">2000</option>

</select>

</td></tr>

<tr><td id="col1">

Gender</td>

<td>

25
&nbsp&nbsp<input type="radio" name="gender" ><font
color="yellow">Male</font></input>

<input type="radio" name="gender" ><font color="yellow">Female</font></input>

</td>

</tr>

<tr><td id="col1">

Country</td>

<td>

&nbsp&nbsp<select name="country">

<option value="usa" selected disabled hidden>USA</option>

<option value="india">INDIA</option>

<option value="japan">JAPAN</option>

<option value="france">FRANCE</option>

<option value="germany">GERMANY</option>

</select></td>

</tr>

<tr><td id="col1">

E-mail</td>

<td>

&nbsp&nbsp<input id="inpt" type="email" placeholder="Enter E-mail......"></input>

</td>

26
</tr>

<tr><td id="col1">

Phone

</td>

<td>

&nbsp&nbsp<input id="inpt" type="text" placeholder="Enter Phone......"></input>

</td>

</tr>

<tr><td id="col1">

Password</td>

<td>

&nbsp&nbsp<input id="inpt" type="password"></input>

</td></tr>

<tr><td id="col1">

Confirm Password

</td>

<td>&nbsp&nbsp<input id="inpt" type="password"></input>

</td></tr>

<tr>

<td></td>

27
<td>&nbsp<input type="checkbox" id="check"><font color="yellow">I agree to the terms of
Use</font></input></td>

</tr>

</table>

</form>

</td>

</tr>

<tr>

<form>

<td bgcolor="orange" align="right">

<input type="submit" id="submit"></input>&nbsp&nbsp

<input type="reset" value="Cancel" id="cancel"></input>

</form>

</td>

</tr>

</table>

</body>

</html>

28
5.2. OUTPUT

Fig3.1.Intenship output

29
 CHAPTER 6

CONCLUSION

I have learned various types of technologies required for web designing. My

main focus had been on front-end designing of web development. With the help of
this internship I have gained significant amount of knowledge I hope it will be
helpful for my future carrier.

Throughout my time of internship, I have acquired lots of new experiences. I

got chances to use different development tools, research on them and use them.
Overall in this period of internship all my theoretical knowledge gained from
college had gained a practical experience.

30
 REFERENCES

WEBSITES

• https://www.tutorialspoint.com
• https://www.w3school.com
• https://www.geeksforgeeks.com
• https://www.javatpoint.com

BOOKS

• CSS3 for Web Designers. By Dan Cederholm.

• Adaptive Web Design. By Aaron Gustafson.

31