A

Mini Project Report

On

“PYTHON”

BACHELOR OF TECHNOLOGY
in
“Computer Science & Engineering”

Submitted by
Vipul Singh
(Roll No.1901200100122)

Under Guidance of
Mr. Nitin Dixit
(Assistant Professor, CSED)

Submitted To

DEPARTMENT OF COMPUTER SCIENCE & ENGINEERING

INSTITUTE OF TECHNOLOGY & MANAGEMENT, GIDA,
GORAKHPUR
SESSION: 2023-24
CERTIFICATE

ii
 DECLARATION

This is certified that the work which is being presented in the mini project entitled “PYTHON” is

submitted in the department of Computer Science and Engineering of Institute of Technology and

Management, Gida, Gorakhpur is an authentic record of my own work carried out during the

semester under the supervision of “INDUSTRIAL INTERNSHIP TRAINING AT Neema

Webtech Pvt. Ltd.

The matter presented in this mini project has not been submitted by me for the award of any other

degree of this or any other institute/university.

Vipul Singh

This is to certify that the above statement made by the candidate is correct to the best of my
knowledge.

Date:
Candidate Signature

Mr. Nitin Dixit Mr. Ashutosh Rao

Mini Project Coordinator Head of Department (CSE)

iii
 ABSTRACT
Counterfeit money has always existed an issue that has caused many problems in the market.

Technological growth development has made it possible to create extra counterfeit items which are

distributed in the mitigation market the global economy. Bangui existing banking equipment and so

on trading sites to check the authenticity of funds. But the average person does not do that have

access to such systems and that is why they are needed in order for the software to receive counterfeit

money, which can be used by ordinary people. This proposed system uses image processing to find

out if the money is real or fake. System built uses the Python system completely language. It contains

similar steps grayscale modification, edge detection, separation, etc. made using appropriate methods.

Keyword: Counterfeit currency, Image Processing, Python programming language, grayscale

conversion, edge detection, segmentation.

iv
 ACKNOWLEDGEMENT

Whenever a module of work is completed, there is always a source of inspiration. I always find my

parents as my torch bearers. While completing this task, I realized from my inner core that Rome was

not built in day. I found a stack of mini project reports in the library of ITM Gorakhpur library. Those

reports are the landmarks for me on the way of this task. The presented report is an effort of day and

night works. Selection is always tough; undoubtedly I am accepting this fact.

I am sincerely thankful to Mr. Ashutosh Rao (HOD) & Mr. Nitin Dixit (Mini Project

Coordinator)for his support. I express my gratitude and thanks to all the faculties and staff members

of Computer Science & Engineering department for their sincere cooperation in furnishing relevant

information to complete this mini project report well in time successfully.

Finally, my greatest debt is to my parents, my family for their enduring love, support and forbearance

during my project work.

Vipul Singh

Roll No.1901200100122

v
 TABLE OF CONTENTS

Page No.
Certificate ii
Declaration iii
Abstract iv
Acknowledgement v
Dedication(optional) vi
Table of Contents vii
List of Tables viii
List of Figures ix
List of Symbols and Abbreviations x
CHAPTER 1: INTRODUCTION 1-68
1.1 GENERAL 1
1.2 INTRODUCTION TO MICROWAVE SOURCES
1.3 GENERAL
1.3.1 Evolution of Microwave Tubes 12
1.3.2 Operating Principle of Gyro-TWT
1.3.2.1 General 25
1.3.2.2 Beam-mode line dispersion
1.3.2.3 Waveguide mode dispersion
CHAPTER 2 : LITERATURE REVIEW 59-150
2.1 GENERAL 75
2.2 ALTERNATE METHODS OF MICROWAVE GENERATION 99
2.3 STATE-OF-THE-ART 115
…………………………………

vi
LIST OF FIGURES

vii
viii
LIST OF SYMBOLS AND ABBREVIATIONS

ix
 List of the Table

Chapter No. Title Page No.

Certificate i
Abstract ii
Acknowledgement iv
Table of Contents v-vii

List of Figures viii

CHAPTER-1: Hypertext Markup Language (HTML) 1-0

1.1 Introduction of HTML 1

1.2 Text Formatting 4

1.3 Page Formatting 6

1.4 Tables 8
1.5 Order List Unorder List 9
1.6 Forms
10

CHAPTER-2: Cascading Style Sheets (CSS) 11-20

2.1 What is CSS? 11
2.2 CSS Basics 12
2.3 Internal & External Stylesheet
13
2.4 CSS Classes 13
 2.5 CSS Divisions 13

2.6 How to Select a Font Family 14

2.7 Naming HTML elements 15

2.8 Style Location: External 16

2.9 CSS Backgrounds 17

2.9.1CSS background-repeat 17
2.10 CSS Border 18

CHAPTER-3: 21-27
JAVA SCRIPT
21
3.1 What is JavaScript
22
3.2 JS Variable
24
3.3 JS Loop
25
3.4 JS Event
26

3.5 JS DOM 27

CHAPTER-4:
PROJECT- 28-30
4.1 Project
4.2 Picture

CHAPTER-5

5.1Conclusion 31

5.2Result
 LIST OF Figures –

Figure No Title Page No

1 Table 11

2 Forms 14

3 Buttons 19

4 Main color 20

5 CSS styles 22

6 CSS & Html 27

7 28
Websites page
 CHAPTER -1
HTML

1.1 Introduction
HTML is the basic language of the web and is easy to learn and understand! With some basic
knowledge you can decipher seemingly complex pages and break them into their individual parts
to better understand and control your e-Community sites. Is essence, HTML describes what a
page should look like when viewed through a web browser.

• WWW – World Wide Web.

• HTML – Hypertext Markup Language – The Language of Web Pages on the World Wide
Web. HTML is a text formatting language.
• URL – Uniform Resource Locator.
• Browser – A software program which is used to show web pages.
• “Normal text” surrounded by bracketed tags that tell browsers how to display web page
save with “.htm” or “.html”
• HTML Editor – A word processor that has been specialized to makewriting of HTML
documents more effortless.

• The definition of HTML is Hypertext Markup Language.

• Hypertext is the method by which you move around on the web — by clicking on special
text called hyperlinks which bring you to the next page. The fact that it is hyper just
means it is not linear — i.e. you can go to any place on the Internet whenever you want
by clicking on links — there is no set order to do things in.
• Markup is what HTML tags do to the text inside them. They mark it as a certain type of
text.
• HTML is a Language, as it has code-words and syntax like any other language.
•
1.2 How does html works?
HTML consists of a series of short codes typed into a text-file by the site author — these are the
tags. The text is then saved as a html file, and viewed through a browser, like Internet Explorer
or Netscape Navigator. This browser reads the file and translates the text into a visible form,
hopefully rendering the page as the author had intended. Writing your own HTML entails using
tags correctly to create your vision. You can use anything from a rudimentary text-editor to a
powerful graphical editor to create HTML pages.

1
1.2.1 Starting Notepad
Notepad is the standard text editor that comes with the microsoft windows operating sysem. To
start Notepad in windows 9x or XP follow the steps bellow:
i. Click on the “Start” button located on your Windows task bar.
ii. Click on “Programs” and then click on the directory menu labeled “Accessories”.
iii. Locate the shortcut “Notepad” and click the shortcut once.

1.2.2 Choosing Text Editor

There are many different programs that you can use to create web documents.
HTML Editors enable users to create documents quickly and easily by pushing a few buttons.
Instead of entering all of the HTML codes by hand.
These programs will generate the HTML Source Code for you.
HTML Editors are excellent tools for experienced web developers, however, it is important that
you learn and understand the HTML language so that you can edit code and fix “bugs” in your
pages.
For this Course, we will focus on using the standard Adobe Dreamweaver, NotePad. We may use
also Sublime.

1.2.3 HTML Page Creation & Editing

In this chapter you will learn to create HTML pages with a standard text editor. Objectives upon
completing,
<HTML>
<HEAD>
<TITLE>Institute of Technology & Management</TITLE>
</HEAD>
<BODY >This is what is displayed</BODY>
</HTML>

1.2.4 Creating a Basic Starting Document

The HEAD of your document point to above window part. The TITLE of your document
appears in the very top line of the user’s browser. If the user chooses to “Bookmark” your page
or save as a “Favorite”; it is the TITLE that is added to the list.
The text in your TITLE should be as descriptive as possible because this is what many search
engines, on the internet, use for indexing your site.

1.2.5 Setting Document Properties

Document properties are controlled by attributes of the BODY element. For example, there are
color settings for the background color of the page, the document’s text and different states of
links.

2
HTML Tags
HTML Tags are keywords or tag names surrounded by angle brackets or <> and normally come
in pairs like this: <tag> and </tag>.
The first tag in a pair is the opening tag and the second tag is the closing tag. The closing tag is
written the same way as the opening tag with a forward slash ( / ) to say “stop doing this.”

• Codes enclosed in bracket- Usually paired

<TITLE>My Web Page</TITLE>
• Not case sensitive
<TITLE> = <title> = <TITLE>
HTML tags are element names surrounded by angle brackets:
<tagname>content goes here...</tagname>
HTML tags normally come in pairs like <p> and </p>
The first tag in a pair is the start tag, the second tag is the end tag
The end tag is written like the start tag, but with a forward slash inserted before Below is
visualization of an HTML page structure.

1.1.2 What are the tags up to?

The tags are what separate normal text from HTML code. You might know them as the words
between the <angle-brackets>. They allow all the cool stuff like images and tables and stuff, just
by telling your browser what to render on the page. Different tags will perform different
functions. The tags themselves don’t appear when you view your page through a browser, but
their effects do. The simplest tags do nothing more than apply formatting to some text, like this:
<b>These words will be bold</b>, and these will not.
In the example above, the <b> tags were wrapped around some text, and their effect will be that
the contained text will be bolded when viewed through an ordinary web browser.

a. The Body Element

The BODY element of a web page is an important element in regards to the page’s appearance.
Here are the attributes of the BODY tag to control all the levels:
TEXT="#RRGGBB" to change the color of all the text on the page (full page text color.)
This element contains information about the page’s background color, the background image, as
well as the text and link colors.
A Simple HTML Document
Example-
<!DOCTYPE html>
<html>
3
<head>
<title>Page Title</title>
</head>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>
Example Explained-
➢ The <!DOCTYPE html> declaration defines this document to be HTML5.
➢ The <html> element is the root element of an HTML page.
➢ The <head> element contains meta information about the document.
➢ The <title> element specifies a title for the document.
➢ The <body> element contains the visible page content.
➢ The <h1> element defines a large heading.
➢ The <p> element defines a paragraph.

b. HTML Elements
An HTML element usually consists of a start tag and an end tag, with the content inserted in
between:

<tagname>Content goes here...</tagname>

The HTML element is everything from the start tag to the end tag: <p>My first paragraph.</p>

Start tag Element content End tag

<h1> My First Heading </h1>

<p> My first paragraph. </p>

c.
TML Attributes
Below is an alphabetical list of some attributes often used in HTML, which you will learn more
about in this tutorial:

Attribute Description

Alt Specifies an alternative text for an image, when the image cannot be displayed

4
All HTML elements can have attributes.
Attributes provide additional information about an element.
Attributes are always specified in the start tag.
Attributes usually come in name/value pairs like: name="value".
The width and height Attributes.

HTML images also have width and height attributes, which specifies the width and height of the
image.
Example:-
<imgsrc="img_girl.jpg" width="500" height="600">

The style Attribute

The style attribute is used to specify the styling of an element, like color, font, size etc.
Example:-
<p style="color:red">This is a paragraph.</p>

d. The title Attribute

Here, a title attribute is added to the <p> element. The value of the title attribute will be
displayed as a tooltip when you mouse over the paragraph:
Example:-
<p title="I'm a tooltip">
This is a paragraph.
</p>

e. Fronts
The CSS font-family property defines the font to be used for an HTML element:

Example:-

<h1 style="font-family:verdana;">This is a heading</h1>

<p style="font-family:courier;">This is a paragraph.</p>

f. Text Size

5
 The CSS font-size property defines the text size for an HTML element:

Example:-

<h1 style="font-size:300%;">This is a heading</h1>

<p style="font-size:160%;">This is a paragraph.</p>

g. Text Alignment
The CSS text-align property defines the horizontal text alignment for an HTML element:

Example:-<h1 style="text-align:center;">Centered Heading</h1>

<p style="text-align:center;">Centered paragraph.</p>

h. HTML Paragraphs
HTML paragraphs are defined with the <p> tag:

Example:-

<p>This is a paragraph.</p>
<p>This is another paragraph.</p>

i. HTML Links
HTML links are defined with the <a> tag:

Example:-

<a href="https://www.w3schools.com">This is a link</a>

j. HTML Images
HTML images are defined with the <img> tag.

The source file (src), alternative text (alt), width, and height are provided as attributes:

Example:-

<imgsrc="w3schools.jpg" alt="W3Schools.com" width="104" height="142">

k. HTML Buttons
HTML buttons are defined with the <button> tag:

Example:-

<button>Click me</button>

6
l. HTML Lists
HTML lists are defined with the <ul> (unordered/bullet list) or the <ol>

(ordered/numbered list) tag, followed by <li> tags (list items).

Example:-

<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
<ol>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>

m. Background Color
It is very common to see web pages with their background color set to white or some other
Colors.
To set your document’s background color, you need to edit the <BODY> element
by adding the BGCOLOR attribute. The following example will display a document with
a white background color:
<BODY BGCOLOR= “#FFFFFF”></BODY>

The CSS background-color property defines the background color for an HTML element.

This example sets the background color for a page to powder blue:

Example

<body style="background-color: powder blue;">

<h1>This is a heading</h1>
<p>This is a paragraph.</p></body>

n. Use image background

The BODY element also gives you ability of setting an image as the document’s
background.
An example of a background image’s HTML code is as follows:
<BODY BACKGROUND=“hi.gif” BGCOLOR=“#FFFFFF”></BODY>

7
o. Text color
The TEXT attribute is used to control the color of all the normal text in the document.
The default color for text is black. The TEXT attribute would be added as follows:

<BODY BGCOLOR=“#FFFFFF” TEXT=“#FF0000”></BODY>

In this example the document’s page color is white and the text would be red.

The CSS color property defines the text color for an HTML element:

Example: -

<h1 style="color:blue;">This is a heading</h1>

<p style="color:red;">This is a paragraph.</p>

p. HEADING, <Hx></Hx>
Inside the BODY element, heading elements H1 through H4 are generally used for major
divisions of the document. Headings are permitted to appear in any order, but you will
obtain the best results when your documents are displayed in a browser if you follow
these guidelines: H1: should be used as the highest level of heading, H2 as the next
highest, and so forth. You should not skip heading levels: e.g., an H3 should not appear
after an H1, unless there is an H2 between them.

<HTML>
<HEAD>
<TITLE> Example Page</TITLE>
</HEAD>
<BODY>
<H1> Heading 1 </H1>
<H2> Heading 2 </H2>
<H3> Heading 3 </H3>
<H4> Heading 4 </H4>
</BODY>
</HTML>

q. Paragraphs, <P></P>

Paragraphs allow you to add text to a document in such a way that it will automatically
adjust the end of line to suite the window size of the browser in which it is being
displayed. Each line of text will stretch the entire length of the window.

<HTML><HEAD>
<TITLE> Example Page</TITLE>
</HEAD>

8
 <BODY></H1> Heading 1 </H1>
<P> Paragraph 1, ….</P>
<H2> Heading 2 </H2>
<P> Paragraph 2, ….</P>
<H3> Heading 3 </H3>
<P> Paragraph 3, ….</P>
</BODY></HTML>

r. BREAK,<BR>
Line breaks allow you to decide where the text will break on a line or continue to the end
of the window.
A <BR> is an empty Element, meaning that it may contain attributes but it does not
contain content.
The <BR> element does not have a closing tag.

<HTML>
<HEAD>
<TITLE> Example Page</TITLE>
</HEAD>
<BODY>
<H1> Heading 1 </H1>
<P>Paragraph 1, <BR>
Line 2 <BR>Line 3 <BR>….
</P>
</BODY>
</HTML>

s. Horizontal Rule, <HR>

The <HR> element causes the browser to display a horizontal line (rule) in your
document.
<HR> does not use a closing tag, </HR>.
<HTML>
<HEAD>
<TITLE> Example Page</TITLE>
</HEAD>
<BODY>
<H1> Heading 1 </H1>
<P>Paragraph 1, <BR>
Line 2 <BR>
<HR>Line 3 <BR>
</P>
</BODY>
</HTML>

9
t. Character Formatting

In this chapter you will learn how to enhance your page with Bold, Italics, and other
character formatting options.
Objectives
Upon completing this section, you should be able to
Change the color and size of your text.
Use Common Character Formatting Elements.
Align your text.
Add special characters.
Use other character formatting elements.

Bold, Italic and other Character Formatting Elements

<FONT SIZE=“+2”> Two sizes bigger</FONT>
The size attribute can be set as an absolute value from 1 to 7 or as a relative value using
the “+”or “-” sign. Normal text size is 3 (from -2 to +4).
<B> Bold </B>
<I> Italic </I>
<U> Underline </U>

Color = “#RRGGBB” The COLOR attribute of the FONT element.

Example:-
<FONT COLOR=“#RRGGBB”>this text has color</FONT>
<PRE> Preformatted </PRE> Text enclosed by PRE tags is displayed in a mono-
spacedfont.Spaces and line breaks are supported without additional elements or
special characters.

u. Alignment
Some elements have attributes for alignment (ALIGN) e.g. Headings, Paragraphs and
Horizontal Rules.
The Three alignment values are : LEFT, RIGHT, CENTER.
• <CENTER></CENTER> Will center elements.
• <DIV ALIGN=“value”></DIV> Represents a division in the document and can
contain most other element type. The alignment attribute of the DIV element is well
supported.
• <TABLE></TABLE> Inside a TABLE, alignment can be set for each individual cell.
Special Characters & Symbol.

v. Images
• Width (WIDTH): is the width of the image in pixels.
• Height (HEIGHT): is the height of the image in pixels.
• Border (BORDER): is for a border around the image, specified in pixels.

10
 • HSPACE: is for Horizontal Space on both sides of the image specified in pixels. A
setting of 5will put 5 pixels of invisible space on both sides of the image.
• VSPACE: is for Vertical Space on top and bottom of the image specified in pixels. A
setting of 5 will put 5 pixels of invisible space above and bellow the image.

Some Examples on images

1) <IMG SRC=“jordan.gif“ border=4>

2) <IMG SRC=" jordan.gif" width="60" height="60">

3) <IMG SRC=“jordan.gif" ALT="This is a text that goes with the image">

4) <IMG SRC=" jordan.gif “ Hspace="30" Vspace="10" border=20>

5) < IMG SRC =" jordan.gif“ align="left">

w. Tables
The <TABLE></TABLE> element has four sub-elements:

– Table Row<TR></TR>.
– Table Header <TH></TH>.
– Table Data <TD></TD>.
– Caption <CAPTION></CAPTION>.

The table row elements usually contain table header elements or table data elements.

<table border=“1”>

<tr>

<th> Column 1 header </th>

<th> Column 2 header </th>

</tr>

<tr>

<td> Row1, Col1 </td>

<td> Row1, Col2 </td>

</tr>

<tr>

11
 <td> Row2, Col1 </td>

<td> Row2, Col2 </td>

</tr>

</table>

Column 1 Header Column 2 Header

Row1, Col1 Row1, Col2
Row2, Col1 Row2, Col2

Table Attributes
CellPadding: Cell Padding is the space between the cell border and the cell contents and is
specified in pixels.

Align: tables can have left, right, or center alignment.

Background: Background Image, will be titled in IE3.0 and above.

Table Caption
A table caption allows you to specify a line of text that will appear centered above or bellow the
table.

<TABLE BORDER=1 CELLPADDING=2>

<CAPTION ALIGN=“BOTTOM”> Label For My Table </CAPTION>

The Caption element has one attribute ALIGN that can be either TOP (Above the table) or
BOTTOM (below the table).

Table Data and Table Header Attributes

<Table border=1 cellpadding =2>

<tr><th> Column 1 Header</th><th> Column 2 Header</th></tr>

<tr><td colspan=2> Row 1 Col 1</td></tr>

<tr><td rowspan=2>Row 2 Col 1</td>

<td> Row 2 Col2</td></tr>

12
<tr><td> Row 3 Col2</td></tr>

</table>

Check Box
Check Box: Check boxes allow the users to select more than one option.

• <INPUT TYPE=“CHECKBOX”>
• Browser will display Checkboxes have the following attributes:
• TYPE: checkbox.
• CHECKED: is blank or CHECKED as the initial status.
• NAME: is the name of the variable to be sent to the CGI application.
• VALUE: is usually set to a value.

Target Attribute

HTML Head
The HTML <head> element is a special container element to contain all of the headspecific
elements. Elements inside the head can include scripts, tell the browser.
where to find external information such as stylesheets or Javascripts and provide
search engines with descriptive information about the content of the page.

HTML Images
Images are displayed in HTML by use of the <img> tag. The <img> tag does not need
to be closed. The <img> tag has multiple attributes to define what to display and
how it should be displayed. As with other attributes, values must be contained in
quotes.

HTML Tables

A table is comprised of rows and columns, similar to a spreadsheet, and can be quite complex.
Tables consist of a number of tags and will always start with the <table> tag. Like many other
tags the table tag can have attributes assigned to it.

13
 CHAPTER -2
Cascading Style Sheets(CSS)
2.1 Introduction

Cascading Style Sheets (CSS) are rules used to control the way a web browser displays elements
on a page. With a basic understanding of HTML you can now learn to control it with CSS. CSS
defines how to display your HTML elements by element name, ID or Class. ID and Class are
attributes of your HTML elements, and most common in e-Community, the<div> tag. With
HTML you will define the content of a document, headings, paragraphs, lists, tables, and so on.
CSS will be used to define what each of those elements will look like by defining a Rule.

CSS will be defined in your HTML document in one of three ways:

• External Style Sheet
• Internal Style Sheet
• Inline Styles

2.1.1 What is CSS?

Cascading Style Sheets, fondly referred to as CSS, is a simple design language intended to
simplify the process of making web pages presentable.
CSS handles the look and feel part of a web page. Using CSS, you can control the color of the
text, the style of fonts, the spacing between paragraphs, how columns are sized and laid out, what
background images or colors are used, as well as a variety of other effects.
CSS is easy to learn and understand but it provides a powerful control over the presentation of an
HTML document. Most commonly, CSS is combined with the markup languages HTML or
XHTML.

2.1.2 Advantages of CSS

i. CSS saves time :- You can write CSS once and then reuse the same sheet in multiple
HTML pages. You can define a style for each HTML element and apply it to as many
web pages as you want.
ii. 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.
iii. Easy maintenance :- To make a global change, simply change the style, and all the
elements in all the web pages will be updated automatically.

14
 iv. 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.
v. Multiple 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 cellphones or for
printing.
vi. Global web standards :- Now HTML attributes are being deprecated and it is being
recommended to use CSS. So it’s a good idea to start using CSS in all the HTML pages
to make them compatible with future browsers.

2.2 Cascading Style Sheets

Cascading Style Sheets are a fast and efficient way to control how your page is displayed. It can
replace the need for using attributes for each and every element on you page and instead control
them all at the same time. When using the <p> tag, you may want to assign attributes or a
number of other tags such as <font> to define how your paragraph is to be displayed. With CSS
you can define that all of your paragraphs to display in the same manner, leaving you to code in
HTML only with the <p> tag.

All the various methods will cascade into a new "pseudo" stylesheet in the following order:
• Inline Style (inside (X)HTML element)
• Internal Style Sheet (inside the <head> tag)
• External Style Sheet

2.2.1 Inline Styles

An inline style may be used to apply a unique style for a single element. To use inline styles, add
the style attribute to the relevant element. The style attribute can contain any CSS property.

I have not mentioned them until now because in a way they defeat the purpose of using CSS in
he first place. Inline styles are defined right in the (X)HTML file along side the element you
want to style.

Inline styles are defined within the "style" attribute of the relevant element:

Example-

<!DOCTYPE html>
<html>
<body>
<h1 style="color:blue;text-align:center;">This is a heading</h1>
<p style="color:red;">This is a paragraph.</p>
</body>
</html>

15
2.2.2 Internal Style Sheet
An internal style sheet may be used if one single HTML page has a unique style.The internal
style is defined inside the <style> element, inside the head section.

First we will explore the internal method. This way you are simply placingthe CSS code within
the <head></head> tags of each (X)HTML file youwant to style with the CSS. The format for
this is shown in the example below.With this method each (X)HTML file contains the CSS code
needed to style the page. Meaning that any changes you want to make to one page, will have to
be made to all. This method can be good if you need to style only one page, or if you want
different pages to have varying styles.

Example-

Internal styles are defined within the <style> element, inside the <head> section of an HTML
page:

<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: linen;
}
h1 {
color: maroon;
margin-left: 40px;
}
</style>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>

2.2.3 External Stylesheet

16
Next we will explore the external method. An external CSS file can be created with any text or
HTML editor such as "Notepad" or "Dreamweaver". A CSS file contains no (X)HTML, only
CSS. You simply save it with the .css file extension. You can link to the file externally by
placing one of the following links in the head section of every (X)HTML file you want to style
with the CSS file.
Example-
<head>
<title><title>
<style type="text/css">
CSS Content Goes Here
</style>
</head>
<body>
<link rel="stylesheet" type="text/css" href="Path To
stylesheet.css" />

2.3 CSS Syntax

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.

Example-

In this example all <p> elements will be center-aligned, with a red text color:

p{
color: red;
text-align: center;
}

2.4 Adding Styles to HTML

<head>

17
<link rel="stylesheet" type="text/css" href="myStyles.css" />
<style type="text/css">
body {
font-family: Tahoma, Arial, sans-serif;
}
</style>
</head>
<body>
<div style="padding:2px; ... ">
</body>

2.5 CSS Styling Backgrounds

There are multiple declarations you can assign to the background of your <div> or
other element such as:
• background-color
• background-image
• background-repeat
For example you could define that the body of your HTML document had a
background color of blue:
body {
background-color:blue;
}

2.6 CSS Styling Text

All of your text in an HTML document can be controlled by CSS. You can either
define a rule for a particular element, such as <p>, <h1>, or by a <div> class for
Example:-
Text color can be defined using the declaration: color. Colors can be defined by a
color name, RGB values or Hex Colors.
For example:-
p{
color:blue;
}
2.7 CSS Styling Tables
Tables can be styled by addressing each of the elements that construct them. You can define
borders and colors and the text contained in each. You can define that multiple elements are
affected by the rule by including each element separated by a comma.
table, tr, td {
border:1px;
}

<!DOCTYPE html>
<html>
<head>
18
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>

2.8 Header
A header is usually located at the top of the website (or right below a top navigation menu). It
often contains a logo or the website name:

Example

.header {
background-color: #F1F1F1;
text-align: center;
padding: 20px;
}

19
 CHAPTER -3
JavaScript

3.1 What is 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.

JavaScript was first known as LiveScript, but Netscape changed its name to JavaScript, possibly
because of the excitement being generated by Java. JavaScript made its first appearance in
Netscape 2.0 in 1995 with the name LiveScript. The general-purpose core of the language has
been embedded in Netscape, Internet Explorer, and other web browser.

The ECMA-262 Specification defined a standard version of the core JavaScript language.

• JavaScript is a lightweight, interpreted programming language.

• Designed for creating network-centric applications.

• Complementary to and integrated with Java.

• Complementary to and integrated with HTML.

• Open and cross-platform.

3.2 Clint-Side JavaScript

Client-side JavaScript is the most common form of the language. The script should be included
in or referenced by an HTML document for the code to be interpreted by the browser.

It means that a web page need not be a static HTML, but can include programs that interact
with the user, control the browser, and dynamically create HTML content.

The JavaScript client-side mechanism provides many advantages over traditional CGI server-
side scripts. For example, you might use JavaScript to check if the user has entered a valid e-
mail address in a form field.

20
 The JavaScript code is executed when the user submits the form, and only if all the entries are
valid, they would be submitted to the Web Server.

JavaScript can be used to trap user-initiated events such as button clicks, link navigation, and other
actions that the user initiates explicitly or implicitly.

3.3 Advantages of JavaScript

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-anddrop
components and sliders to give a Rich Interface to your site visitors.

3.4 Limitations of JavaScript

We cannot treat JavaScript as a full-fledged programming language. It lacks the following
important features:

• Client-side JavaScript does not allow the reading or writing of files. This has been kept for
security reason.

• JavaScript cannot be used for networking applications because there is no such support
available.

• JavaScript doesn't have any multithreading or multiprocessor capabilities.

Once again, JavaScript is a lightweight, interpreted programming language that allows you to
build interactivity into otherwise static HTML pages.

21
3.5 JavaScript Development Tools
One of major strengths of JavaScript is that it does not require expensive development tools.
You can start with a simple text editor such as Notepad. Since its an interpreted language inside
the context of a web browser, you don't even need to buy a compiler.

To make our life simpler, various vendors have come up with very nice JavaScript editing tools.
Some of them are listed here:

• Microsoft FrontPage: Microsoft has developed a popular HTML editor called

FrontPage. FrontPage also provides web developers with a number of JavaScript tools to assist
in the creation of interactive websites.

• Macromedia Dreamweaver MX: Macromedia Dreamweaver MX is a very popular

HTML and JavaScript editor in the professional web development crowd. It provides several
handy prebuilt JavaScript components, integrates well with databases, and conforms to new
standards such as XHTML and XML.

• Macromedia HomeSite 5: HomeSite 5 is a well-liked HTML and JavaScript editor from

Macromedia that can be used to manage personal websites effectively.

3.6 Comments in JavaScript

javaScript supports both C-style and C++-style comments. Thus:

• Any text between a // and the end of a line is treated as a comment and is ignored by
JavaScript.

• Any text between the characters /* and */ is treated as a comment. This may span multiple
lines. 17

• JavaScript also recognizes the HTML comment opening sequence is not recognized by
javaScript so it should be written as //-->. Example The following example shows how to use
comments in JavaScript.

• The HTML comment closing sequence --> is not recognized by JavaScript so it should be
written as //--

>.

22
Example
The following example shows how to use comments in JavaScript.

<Script Language=”javaScript” type=”text/javascript”>

<!—

// This is a comment . It is similar to comments in c++

/*

*This is a multiple comment in Javascript

*It is a very similar to comments in C programming

*/

//-->

</script>

3.7 JavaScript Datatypes

One of the most fundamental characteristics of a programming language is the set of data types it
supports. These are the type of values that can be represented and manipulated in a programming
language.

JavaScript allows you to work with three primitive data typess:

• Numbers, e.g., 123, 120.50 etc.

• Strings of text, e.g. "This text string" etc.

• Boolean, e.g. true or false.

JavaScript also defines two trivial data types, null and undefined, each of which defines only a single
value. In addition to these primitive data types, JavaScript supports a composite data type known as
object. We will cover objects in detail in a separate chapter.

Note: Java does not make a distinction between integer values and floating-point values. All numbers in
JavaScript are represented as floating-point values. JavaScript represents numbers using the 64-bit
floating-point format defined by the IEEE 754 standard.

23
3.8 JavaScript Variables
Like many other programming languages, JavaScript has variables. Variables can be thought of as named
containers. You can place data into these containers and then refer to the data simply by naming the
container.

Before you use a variable in a JavaScript program, you must declare it. Variables are declared with the
var keyword as follows.

<script type =”text / javascript”>

<!- -

Var money;

Var name;

//-->

</script>

<script type="text/javascript">

</- -

var money, name;

//-->

</script>

You can also declare multiple variables with the same var keyword as follows:

24
storing a value in a variable is called variable initialization. You can do variable initialization at the time
of variable creation or at a later point in time when you need that variable.

For instance, you might create a variable named money and assign the value 2000.50 to it later. For
another variable, you can assign a value at the time of initialization as follows.

<script type="text/javascript">

<!--

var name = "Ali";

var money;

money = 2000.50;

//-->

</script>

Note: Use the var keyword only for declaration or initialization, once for the life of any variable name
in a document. You should not re-declare same variable twice.
</script>
JavaScript is untyped language. This means that a JavaScript variable can hold a value of any data type.
Unlike many other languages, you don't have to tell JavaScript during variable declaration what type of
value the variable will hold. The value type of a variable can change during the execution of a program
and JavaScript takes care of it automatically.

3.9 JavaScript Variable Names

While naming your variables in JavaScript, keep the following rules in mind. 28

• You should not use any of the JavaScript reserved keywords as a variable name. These keywords are
mentioned in the next section. For example, break or boolean variable names are not valid.

• JavaScript variable names should not start with a numeral (0-9). They must begin with a letter or an
underscore character. For example, 123test is an invalid variable name but _123test is a valid one.

• JavaScript variable names are case-sensitive. For example, Name and name are two different variables.

25
 CHAPTER No – 4
Websites Project

4.1 CSS And HTML Coding :–

Image 1

Image 2

26
Image 3

27
28
 CHAPTER – 5

Conclusion & Future Work

5.1 Conclusion:–

HTML and CSS are actually surprisingly large topics, who would have thought? If you’ve
made it this far, though, you’re more than well on your way to front end development magic.
You should be significantly more comfortable breaking down a webpage into its component
pieces and then coding them with HTML and CSS. You have the tools necessary to identify
an effective visual layout and then bring it to fruition.

There are still plenty of ways you can make your workflow better or improve your knowledge
of best practices (so don’t stop learning!), but you’ve got everything you need to build
beautiful websites. Now that you’ve finished this course, you are probably chomping at the bit
for the final piece of the puzzle which will empower you to make everything dynamic.

HTML (the Hypertext Markup Language) and CSS (Cascading Style Sheets) are two of the core
technologies for building Web pages. HTML provides the structure of the page, CSS the (visual
and aural) layout, for a variety of devices. Along with and HTML and CSS are the basis of
building Web pages and Web Applications.

5.2 Future Work: –

It can be used as a guide for someone working on implementation or as a tool to evaluate ... Our
goal is to take this static image and turn it into HTML and CSS using these principles. ... It
makes our projects morefuture-proof. If you're looking for Front End
i.e. HTML/CSS Developers Jobs In Understanding of the concepts of progressive enhancement,
mobile first and future friendly and others to design system and to obtain information
on projectlimitations and ... HTML and CSS are the fundamental technologies for building Web
pages: HTML ... W3C has a mission to design technology that works across cultures and
languages. ... Work on payments at W3C was supported in part by the HTML5Apps project,and
..... [News Release] HTML5Apps paves the way tofuture W3C payment ...

29
 References

1- www.google.com

2- www.codekaro.com
3- www.geeksforgeeks.com
4- www.wikipidia.com
5- www.zavatutorial.com