Global Education

Technology
INDEX
Chapter 1
 Web Development
• Introduction to wed development
• Web Designer vs web Development
• Frontend Technologies
• Backend Technologies
 HTML
• Introduction to HTML, HTML Basic Structure
• Features of HTML
• Advantages and disadvantages of HTML
 HTML Tags
• Introduction to Tags
• Types of Tags used in html program structure
 HTML Element
• Introduction to html elements and example
• HTML Tags vs HTML Element
Chapter 2:
 HTML Attributes
• Core Attributes
• Internalization of Attributes
 HTML Formatting
• Different types text formatting tags used in html program
 HTML Phrases
• Introduction to Phrases and different types of phrase tags
 HTML Metatags
• Introduction to Metatags and different Meta tags used in head section
in html page
Chapter 3
 HTML Comments
• Introduction to Comments and different types of comments used in
html page
 HTML Images
• Introduction to Images and types of image tag used in html page with
example
 HTML Tables
• Introduction to tables and table displaying with rows, cols, width and
height with example
 HTML Lists
• Different types of list and examples

Website:www.gedutech.net
mail: [email protected]
contact: +91 7676886524
+91 8712257211
 Global Education
Technology
Chapter 4
 HTML Links
• Links
• HTML Image Links
• HTML Email Links with example
 HTML Frames
• Creating Frames
• Iframes and Example
 HTML Blocks
 HTML Colors
 HTML Fonts
 HTML Forms
• Introduction to forms and different types of forms controls
 HTML Embed Multimedia
 HTML Marquee
• Introduction to header tags and example
 HTML Header
• Introduction to header tags and example

Chapter 5
 CSS
• Introduction to CSS and example
• CSS-Selectors and Properties
• CSS-Layout and Positioning
• CSS-Responsive Design Principal
• CSS-Introduction to Style and different types of Style applied for
HTML pages to interactive web pages
Chapter 6
 JavaScript
• Introduction to JavaScript with example
• JavaScript -Variables and how to apply JavaScript in html pages and
brief description of Variables
• JavaScript Datatypes and how to apply in html pages with example
• JavaScript Operators
• JavaScript Control Structures (If Statements) with example
• JavaScript Controls Structures (Loops) with example
• JavaScript -Functions and Events
• JavaScript -Introduction to DOM manipulation
Chapter 7

 How to apply Style to html Registration page example and how to run in url.

Website:www.gedutech.net
mail: [email protected]
contact: +91 7676886524
+91 8712257211
 Global Education
Technology
Chapter 8
 Version Control (Git) -Introduction to Git
• Using Git For Collaborative Development-Introduction
Chapter 9
 Backend Development
• Backend Development: Introduction
• Overview of serverside Development
• Introduction to backend languages
Chapter 10
 SeverSide programming
• Basic Server setup
• Handling HTTP requests and Responses
• Routing and Middleware
Chapter 11
 Databases
• Introduction to databases
• Basic database operations
• Connecting databases to web development

Website:www.gedutech.net
mail: [email protected]
contact: +91 7676886524
+91 8712257211
 Global Education
Technology
Web Development
Web development refers to the creating, building, and maintaining of websites. It includes
aspects such as web design, web publishing, web programming, and database management.
It is the creation of an application that works over the internet i.e. websites.
Web development is closely related to the job of designing the features and functionality of
apps (web design). The term development is usually reserved for the actual construction of
these things (that is to say, the programming of sites).
Web Designer vs Web Development
Web design specifically refers to the processes required to make the front end of the website
— the part that a webpage visitor sees — visually appealing and understandable.
Web development focuses on the behind-the-scenes programming that makes a website work.
While a web designer might create a button, a web developer ensures that something actually
happens when the button is clicked.
The word Web Development is made up of two words, that is:
 Web: It refers to websites, web pages or anything that works over the internet.
 Development: It refers to building the application from scratch.

Web Development can be classified into two ways:

 Frontend Development
 Backend Development

Frontend Development
 The part of a website where the user interacts directly is termed as front end. It is also
referred to as the ‘client side’ of the application.
Backend Development
 Backend is the server side of a website. It is part of the website that users cannot see
and interact with. It is the portion of software that does not come in direct contact
with the users. It is used to store and arrange data.
Frontend Development:
HTML
CSS
JavaScript
Popular Frontend Technologies:
HTML: HTML stands for Hypertext Markup Language. It is used to design the front-end
portion of web pages using markup language. It acts as a skeleton for a website since it is
used to make the structure of a website.
CSS Cascading Style Sheets fondly referred to as CSS is a simply designed language
intended to simplify the process of making web pages presentable. It is used to style our
website.

Website:www.gedutech.net
mail: [email protected]
contact: +91 7676886524
+91 8712257211
 Global Education
Technology

Below picture shows the frontend technologies:

JavaScript: JavaScript is a scripting language used to provide a dynamic behavior to our

website.
Bootstrap: Bootstrap is a free and open-source tool collection for creating responsive
websites and web applications. It is the most popular CSS framework for developing
responsive, mobile-first websites. Nowadays, the websites are perfect for all browsers (IE,
Firefox, and Chrome) and for all sizes of screens (Desktop, Tablets, Phablets, and Phones).
Bootstrap 4
Bootstrap 5
Popular Backend Development:
PHP: PHP is a server-side scripting language designed specifically for web development.
Java: Java is one of the most popular and widely used programming languages. It is highly
scalable.
Python: Python is a programming language that lets you work quickly and integrate systems
more efficiently.
Node.js: Node.js is an open source and cross-platform runtime environment for executing
JavaScript code outside a browser.

Website:www.gedutech.net
mail: [email protected]
contact: +91 7676886524
+91 8712257211
 Global Education
Technology
Below picture shows the backend technologies:

Website:www.gedutech.net
mail: [email protected]
contact: +91 7676886524
+91 8712257211
 Global Education
Technology
HTML
HTML stands for Hypertext Markup Language, and it is the most widely used language to
write Web Pages. It was introduced by Tim Berners-Lee in 1991 at CERN, initially as a
simple markup language. After, it evolved through versions from HTML 2.0 to HTML5 (the
latest 2024 version).

 Hypertext refers to the way in which Web pages (HTML documents) are linked together.
Thus, the link available on a webpage is called Hypertext.
 As its name suggests, HTML is a Markup Language which means you use HTML to simply
"mark-up" a text document with tags that tell a Web browser how to structure it to display
Basic HTML Document

Features of HTML
It is easy to learn and easy to use.
It is platform-independent.
Images, videos, and audio can be added to a web page.
Hypertext can be added to the text.
It is a markup language.
Advantages of HTML
HTML is used to build websites.
It is supported by all browsers.
It can be integrated with other languages like CSS, JavaScript, etc.
Disadvantages of HTML
HTML can only create static web pages. For dynamic web pages, other languages have to be
used.
A large amount of code has to be written to create a simple web page.
The security feature is not good.
HTML is a markup language and makes use of various tags to format the content. These tags
are enclosed within angle braces. Except few tags, most of the tags have their corresponding

Website:www.gedutech.net
mail: [email protected]
contact: +91 7676886524
+91 8712257211
 Global Education
Technology
losing tags.

HTML Tags:
HTML is a markup language and makes use of various tags to format the content. These tags
are enclosed within angle braces <Tag Name>. Except few tags, most of the tags have their
corresponding closing tags. For example, <html> has its closing tag </html> and <body> tag
has its closing tag </body> tag etc.
HeadingTags
Any document starts with a heading. You can use different sizes for your headings. HTML also
has six levels of headings, which use the elements <h1>, <h2>, <h3>, <h4>, <h5>, and <h6>.
While displaying any heading, browser adds one line before and one line after that heading.
Syntax as follows
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>

Website:www.gedutech.net
mail: [email protected]
contact: +91 7676886524
+91 8712257211
 Global Education
Technology
Paragraph Tag
The <p> tag offers a way to structure your text into different paragraphs. Each paragraph of
text should go in between an opening <p> and a closing </p> tag. Syntax as follows
<p>My first paragraph. </p>
Line Break Tag
Whenever you use the <br /> element, anything following it starts from the next line. This
tag is an example of an empty element, where you do not need opening and closing tags, as
there is nothing to go in between them.
The <br /> tag has a space between the characters br and the forward slash. Syntax as follows
<p>Hello<br />
You delivered your assignment on time. <br />
Thanks<br />
Mahnaz</p>
Centering Content
You can use <center> tag to put any content in the center of the page or any table cell.
Syntax as follows
<center>
<p>This text is in the center. </p>
</center>
Horizontal Lines
Horizontal lines are used to visually break-up sections of a document. The <hr> tag creates a
line from the current position in the document to the right margin and breaks the line
accordingly. Syntax as follows
<p>This is paragraph one and should be on top</p>
<hr />
<p>This is paragraph two and should be at bottom</p>
Preserve Formatting
Sometimes, you want your text to follow the exact format of how it is written in the HTML
document. In these cases, you can use the preformatted tag <pre>.
Any text between the opening <pre> tag and the closing </pre> tag will preserve the
formatting of the source document. Syntax as follows
<pre>
function test Function (strText) {
alert (strText) } </pre>

Website:www.gedutech.net
mail: [email protected]
contact: +91 7676886524
+91 8712257211
 Global Education
Technology
Nonbreaking Spaces
Suppose you want to use the phrase "12 Angry Men." Here, you would not want a browser to
split the "12, Angry"
and "Men" across two lines –
Syntax as follows
<p>An example of this technique appears in the movie "12&nbsp; Angry&nbsp; Men."</p>
HTML Element:

An HTML element is defined by a starting tag. If the element contains other content, it ends
with a closing tag, where the element name is preceded by a forward slash as shown below
with few tags –

Start Tag Content End Tag

<p> This is paragraph content. </p>

<h1> This is heading content. </h1>

<div> This is division content. </div>

HTML Tag vs. Element:

An HTML element is defined by a starting tag. If the element contains other content, it ends
with a closing tag.

For example, <p> is starting tag of a paragraph and </p> is closing tag of the same paragraph
but <p>This is paragraph</p> is a paragraph element.

Nested HTML Elements

It is very much allowed to keep one HTML element inside another HTML element

<!DOCTYPE html>

<html>

<head>

<title>Nested Elements Example</title>

</head><body>

<h1>This is <i>italic</i> heading</h1>

Website:www.gedutech.net
mail: [email protected]
contact: +91 7676886524
+91 8712257211
 Global Education
Technology
<p>This is <u>underlined</u> paragraph</p>

</body></html>

HTML Attributes:
An attribute is used to define the characteristics of an HTML element and is placed inside the
element's opening tag. All attributes are made up of two parts − a name and a value
The name is the property you want to set. For example, the paragraph <p> element in the
example carries an attribute whose name is align, which you can use to indicate the
alignment of paragraph on the page.
The value is what you want the value of the property to be set and always put within
quotations. The below example shows three possible values of align attribute: left, center
and right.
<!DOCTYPE html>
<html> <head>
<title>Align Attribute Example</title>
</head> <body>
<p align = "left">This is left aligned</p>
<p align= "center">This is center aligned</p>
<p align = "right">This is right aligned</p>
</body>
</html>
Core Attributes
The four core attributes that can be used on the majority of HTML elements (although not all)
are −
Id
Title
Class
Style
The Id Attribute
The id attribute of an HTML tag can be used to uniquely identify any element within an
HTML page. There are two primary reasons that you might want to use an id attribute on an
element
The title Attribute
The title attribute gives a suggested title for the element. They syntax for the title attribute is
similar as explained for id attribute

Website:www.gedutech.net
mail: [email protected]
contact: +91 7676886524
+91 8712257211
 Global Education
Technology
The class Attribute
The class attribute is used to associate an element with a style sheet, and specifies the class of
element. You will learn more about the use of the class attribute when you will learn
Cascading Style Sheet (CSS). So for now you can avoid it.
class = “className1 className2 className3”
Style Attribute:
The style attribute allows you to specify Cascading Style Sheet (CSS) rules within the
element.
Internationalization Attributes
There are three internationalization attributes, which are available for most (although not all)
XHTML elements.
dir: When dir attribute is used within the <html> tag, it determines how text will be presented
within the entire document. When used within another tag, it controls the text's direction for
just the content of that tag.
lang: The lang attribute allows you to indicate the main language used in a document, but this
attribute was kept in HTML only for backwards compatibility with earlier versions of HTML
xmllang:This attribute has been replaced by the xml: lang attribute in new XHTML
documents.
HTML Formatting:
If you use a word processor, you must be familiar with the ability to make text bold,
italicized, or underlined; these are just three of the ten options available to indicate how text
can appear in HTML and XHTML.
Bold Text
Anything that appears within <b>...</b> element, is displayed in bold.
Italic Text
Anything that appears within <i>...</i> element is displayed in italicized.
Underlined Text
Anything that appears within <u>...</u> element, is displayed with underline.
Strike Text
Anything that appears within <strike>...</strike> element is displayed with strikethrough,
which is a thin line through the text.
Monospaced Font
The content of a <tt>...</tt> element is written in monospaced font. Most of the fonts are
known as variable-width fonts because different letters are of different widths (for example,
the letter 'm' is wider than the letter 'i'). In a monospaced font, however, each letter has the
same width
Superscript Text
The content of a ^... element is written in superscript; the font size used is the

Website:www.gedutech.net
mail: [email protected]
contact: +91 7676886524
+91 8712257211
 Global Education
Technology
same size as the characters surrounding it but is displayed half a character's height above the
other characters.
Subscript Text
The content of a _... element is written in subscript; the font size used is the same
as the characters surrounding it, but is displayed half a character's height beneath the other
characters.
Inserted Text
Anything that appears within <ins>...</ins> element is displayed as inserted text.
Deleted Text
Anything that appears within <del>...</del> element, is displayed as deleted text.
Larger Text
The content of the <big>...</big> element is displayed one font size larger than the rest of the
text surrounding it.
Smaller Text
The content of the <small>...</small> element is displayed one font size smaller than the rest
of the text surrounding
Grouping Content
The <div> and <span> elements allow you to group together several elements to create
sections or subsections of a page.
For example, you might want to put all of the footnotes on a page within a <div> element to
indicate that all of the elements within that <div> element relate to the footnotes. You might
then attach a style to this <div> element so that they appear using a special set of style rules.
<!DOCTYPE html>
<html> <head>
<title>Div Tag Example</title>
</head><body>
<div id = "menu" align = "middle" >
<a href = "/index.htm">HOME</a> |
<a href = "/about/contact_us.htm">CONTACT</a> |
<a href = "/about/index.htm">ABOUT</a>
</div>
<div id = "content" align = "left">
<h5>Content Articles</h5>
<p>Actual content goes here.....</p>
</div> </body>
Website:www.gedutech.net
mail: [email protected]
contact: +91 7676886524
+91 8712257211
 Global Education
Technology
</html>
The <span> element, on the other hand, can be used to group inline elements only. So, if you
have a part of a sentence or paragraph which you want to group together, you could use the
<span> element as follows.

<!DOCTYPE html>
<html> <head>
<title>Span Tag Example</title>
</head>
<body>
<p>This is the example of <span style = "color:green">span tag</span>
and the <span style = "color:red">div tag</span> alongwith CSS</p>
</body>
</html>
HTML Phrase:
The phrase tags have been desicolgned for specific purposes, though they are displayed in a
similar way as other basic tags like <b>, <i>, <pre>, and <tt>, you have seen in previous
chapter. This chapter will take you through all the important phrase tags, so let's start seeing
them one by one.
Emphasized Text
Anything that appears within <em>...</em> element is displayed as emphasized text.
Marked Text

Anything that appears with-in <mark>...</mark> element, is displayed as marked with

yellow ink.

Strong Text
Anything that appears within <strong>...</strong> element is displayed as important text.
Text Abbreviation
You can abbreviate a text by putting it inside opening <abbr> and closing </abbr> tags. If
present, the title attribute must contain this full description and nothing else.
Acronym Element
The <acronym> element allows you to indicate that the text between <acronym> and
</acronym> tags is an acronym.
At present, the major browsers do not change the appearance of the content of the <acronym>
element.
Website:www.gedutech.net
mail: [email protected]
contact: +91 7676886524
+91 8712257211
 Global Education
Technology
Text Direction
The <bdo>...</bdo> element stands for Bi-Directional Override and it is used to override the
current text direction.
Special Terms
The <dfn>...</dfn> element (or HTML Definition Element) allows you to specify that you
are introducing a special term. It's usage is similar to italic words in the midst of a paragraph.
Typically, you would use the <dfn> element the first time you introduce a key term. Most
recent browsers render the content of a <dfn> element in an italic font
Quoting Text
When you want to quote a passage from another source, you should put it in
between <blockquote>...</blockquote> tags.
Text inside a <blockquote> element is usually indented from the left and right edges of the
surrounding text, and sometimes uses an italicized font.
Short Quotations
The <q>...</q> element is used when you want to add a double quote within a sentence.
Text Citations
If you are quoting a text, you can indicate the source placing it between an
opening <cite> tag and closing </cite> tag
As you would expect in a print publication, the content of the <cite> element is rendered in
italicized text by default.
Computer Code
Any programming code to appear on a Web page should be placed
inside <code>...</code> tags. Usually the content of the <code> element is presented in a
monospaced font, just like the code in most programming books.
Keyboard Text
When you are talking about computers, if you want to tell a reader to enter some text, you can
use the <kbd>...</kbd> element to indicate what should be typed in.
Programming Variables
This element is usually used in conjunction with the <pre> and <code> elements to indicate
that the content of that element is a variable.
Program Output
The <samp>...</samp> element indicates sample output from a program, and script etc.
Again, it is mainly used when documenting programming or coding concepts.
Address Text
The <address>...</address> element is used to contain any address.
HTML Metatags:
HTML lets you specify metadata - additional important information about a document in a
variety of ways. The META elements can be used to include name/value pairs describing
properties of the HTML document, such as author, expiry date, a list of keywords, document
Website:www.gedutech.net
mail: [email protected]
contact: +91 7676886524
+91 8712257211
 Global Education
Technology
author etc.
The <meta> tag is used to provide such additional information. This tag is an empty element
and so does not have a closing tag but it carries information within its attributes.
Adding Meta Tags to Your Documents
You can add metadata to your web pages by placing <meta> tags inside the header of the
document which is represented by <head> and </head> tags. A meta tag can have following
attributes in addition to core attributes –

Specifying Keywords
You can use <meta> tag to specify important keywords related to the document and later
these keywords are used by the search engines while indexing your webpage for searching
purpose.
Document Description
You can use <meta> tag to give a short description about the document. This again can be
used by various search engines while indexing your webpage for searching purpose
Document Revision Date
You can use <meta> tag to give information about when last time the document was updated.
This information can be used by various web browsers while refreshing your webpage.
Page Redirection
You can use <meta> tag to redirect your page to any other webpage. You can also specify a
duration if you want to redirect the page after a certain number of seconds. Following is an
example of redirecting current page to another page after 5 seconds. If you want to redirect
page immediately then do not specify content attribute.
Setting Cookies
Cookies are data, stored in small text files on your computer and it is exchanged between web
browser and web server to keep track of various information based on your web application

Website:www.gedutech.net
mail: [email protected]
contact: +91 7676886524
+91 8712257211
 Global Education
Technology
need.
You can use <meta> tag to store cookies on client side and later this information can be used
by the Web Server to track a site visitor.
Setting Author Name
You can set an author name in a web page using meta tag.
Specify Character Set
You can use <meta> tag to specify character set used within the webpage. By default, Web
servers and Web browsers use ISO-8859-1 (Latin1) encoding to process Web pages.
Example for meta tag
<!DOCTYPE html>
<html> <head><title>Meta Tags Example</title>
<meta name = "keywords" content = "HTML, Meta Tags, Metadata" />
<meta name = "description" content = "Learning about Meta Tags." />
<meta name = "revised" content = "Tutorials point, 3/7/2014" />
<meta http-equiv = "refresh" content = "5; url = http://www.tutorialspoint.com" />
<meta http-equiv = "cookie" content = "userid = xyz;
expires = Wednesday, 08-Aug-15 23:59:59 GMT;" />
<meta http-equiv = "Content-Type" content = "text/html; charset = UTF-8" />
<meta name = "author" content = "Mahnaz Mohtashim" />
</head> <body><p>Hello HTML5! </p>
</body> </html>
HTML Comment:
Comment is a piece of code which is ignored by any web browser. It is a good practice to
add comments into your HTML code, especially in complex documents, to indicate sections
of a document, and any other notes to anyone looking at the code. Comments help you and
others understand your code and increases code readability.
HTML comments are placed in between <!-- ... --> tags. So, any content placed with-in <!--
... --> tags will be treated as comment and will be completely ignored by the browser.
Valid vs Invalid Comments
Comments do not nest which means a comment cannot be put inside another comment.
Second the double-dash sequence "--" may not appear inside a comment except as part of the
closing --> tag. You must also make sure that there are no spaces in the start-of comment
string.

Website:www.gedutech.net
mail: [email protected]
contact: +91 7676886524
+91 8712257211
 Global Education
Technology
Multiline Comments
So far we have seen single line comments, but HTML supports multi-line comments as well.
You can comment multiple lines by the special beginning tag <!-- and ending tag --> placed
before the first line and end of the last line.
Conditional Comments
Conditional comments only work in Internet Explorer (IE) on Windows but they are ignored
by other browsers. They are supported from Explorer 5 onwards, and you can use them to
give conditional instructions to different versions of IE.
Commenting Script Code
Though you will learn JavaScript with HTML, in a separate tutorial, but here you must make
a note that if you are using Java Script or VB Script in your HTML code then it is
recommended to put that script code inside proper HTML comments so that old browsers can
work properly.
Commenting Style Sheets
Though you will learn using style sheets with HTML in a separate tutorial, but here you must
make a note that if you are using Cascading Style Sheet (CSS) in your HTML code then it is
recommended to put that style sheet code inside proper HTML comments so that old
browsers can work properly.
Example for comments
<!DOCTYPE html>
<html> <head>
<script>
<!--
document. write ("Hello World!")
//-->
</script><title>Valid Comment Example</title>
</head>
<body>
<!-- This is valid comment -->
<p>Document content goes here.....</p>
< !-- This is not a valid comment -->
<p>Document content goes here.....</p>
<!--
This is a multiline comment and it can

Website:www.gedutech.net
mail: [email protected]
contact: +91 7676886524
+91 8712257211
 Global Education
Technology
span through as many as lines you like.
-->
<!--[if IE 6]>
Special instructions for IE 6 here
<![endif]-->
</body>
</html>
Html Image:
Images are very important to beautify as well as to depict many complex concepts in simple
way on your web page.
InsertImage
You can insert any image in your web page by using <img> tag. Following is the simple syntax
to use this tag.
<img src = "Image URL" ... attributes-list/>
The <img> tag is an empty tag, which means that, it can contain only list of attributes and it
has no closing tag.
You can use PNG, JPEG or GIF image file based on your comfort but make sure you specify
correct image file name in src attribute. Image name is always case sensitive.
The alt attribute is a mandatory attribute which specifies an alternate text for an image, if the
image cannot be displayed.
Example for <img> tag
<!DOCTYPE html>
<html><head>
<title>Using Image in Webpage</title>
</head>
<body>
<p>Simple Image Insert</p>
<img src = "/html/images/test.png" alt = "Test Image" />
</body></html>

Website:www.gedutech.net
mail: [email protected]
contact: +91 7676886524
+91 8712257211
 Global Education
Technology

Set Image Location

Usually we keep all the images in a separate directory. So let's keep HTML file test.htm in
our home directory and create a subdirectory images inside the home directory where we will
keep our image test.png.
<img src = "/html/images/test.png" alt = "Test Image" />
Set Image Width/Height
You can set image width and height based on your requirement
using width and height attributes. You can specify width and height of the image in terms of
either pixels or percentage of its actual size.
<img src = "/html/images/test.png" alt = "Test Image" width = "150" height = "100"/>
Set Image Border
By default, image will have a border around it, you can specify border thickness in terms of
pixels using border attribute. A thickness of 0 means, no border around the picture
<img src = "/html/images/test.png" alt = "Test Image" border = "3"/>
Set Image Alignment
By default, image will align at the left side of the page, but you can use align attribute to set
it in the center or right.
<img src = "/html/images/test.png" alt = "Test Image" border = "3" align = "right"/>

Website:www.gedutech.net
mail: [email protected]
contact: +91 7676886524
+91 8712257211
 Global Education
Technology

HTML Tables:
The HTML tables allow web authors to arrange data like text, images, links, other tables, etc.
into rows and columns of cells.
The HTML tables are created using the <table> tag in which the <tr> tag is used to create
table rows and <td> tag is used to create data cells. The elements under <td> are regular and
left aligned by default.
Table Heading:
Table heading can be defined using <th> tag. This tag will be put to replace <td> tag, which
is used to represent actual data cell. Normally you will put your top row as table heading as
shown below, otherwise you can use <th> element in any row. Headings, which are defined in
<th> tag are centered and bold by default.
Examples for table using cellpadding, cell spacing, table background color, table height and
width.
<!DOCTYPE html>
<html> <head>
<title>TIME TABLE</title>
</head> <body>
<table border = "1" cellspacing="1" bordercolor="blue" bgcolor="yellow">
<tr> <th colspan="8">TIME TABLE</th>
</tr><tr>
<th>DAYS</th>
<th>1</th><th>2</th>
<th>3</th><th rowspan="7">lunch break</th>
<th>4</th><th>5</th>
<th>6</th></tr>
<tr>
<td>MONDAY</td><td>Accounts</td>
<td>English</td><td>Statistics</td>
<td>Banking</td>
<td align="center">-</td><td align="center">EP</td></tr>
<tr>

Website:www.gedutech.net
mail: [email protected]
contact: +91 7676886524
+91 8712257211
 Global Education
Technology
<td>TUESDAY</td><td>Statistics</td>
<td>Banking</td><td>English</td>
<td>Accounts</td><td align="center">-</td>
<td align="center">-</td>
</tr>
<tr><td>WEDNESDAY</td><td>English</td>
<td>Statistics</td> <td>Accounts</td>
<td align="center">EP</td><td>Banking</td>
<td align="center">-</td></tr>
<tr>
<td>THURSDAY</td>
<td align="center">-</td><td align="center">CA</td>
<td>Statistics</td> <td>English</td>
<td align="center">EP</td>
<td align="center">-</td>
</tr>
<tr>
<td>FRIDAY</td><td>Banking</td>
<td>Statistics</td><td>English</td>
<td colspan="2" align="center">ICT</td>
<td align="center">CA</td>
</tr>
<tr>
<td>SATURSDAY</td>
<td>Banking</td><td align="center">CA</td>
<td>Statistics</td><td colspan="2" align="center">English</td>
<td>Accounts</td></tr>
</table>
</body>

Website:www.gedutech.net
mail: [email protected]
contact: +91 7676886524
+91 8712257211
 Global Education
Technology
</html>

HTML Lists:
HTML offers web authors three ways for specifying lists of information. All lists must
contain one or more list elements. Lists may contain −
<ul> − An unordered list. This will list items using plain bullets.
<ol> − An ordered list. This will use different schemes of numbers to list your items.
<dl> − A definition list. This arranges your items in the same way as they are arranged in a
dictionary.
HTML Unordered Lists
An unordered list is a collection of related items that have no special order or sequence. This
list is created by using HTML <ul> tag. Each item in the list is marked with a bullet.
The type Attribute:
You can use type attribute for <ul> tag to specify the type of bullet you like. By default, it is
a disc. Following are the possible options –

<ul type = "square">

<ul type = "disc">
<ul type = "circle">
Example for unordered list
<!DOCTYPE html>
<html>
<head><title>HTML Unordered List</title>
</head>
<body> <ul type = "disc"> <li>Beetroot</li>
<li>Ginger</li><li>Potato</li><li>Radish</li>
</ul></body></html>

Website:www.gedutech.net
mail: [email protected]
contact: +91 7676886524
+91 8712257211
 Global Education
Technology
HTML Ordered Lists
If you are required to put your items in a numbered list instead of bulleted, then HTML
ordered list will be used. This list is created by using <ol> tag. The numbering starts at one
and is incremented by one for each successive ordered list element tagged with <li>.
The type Attribute
You can use type attribute for <ol> tag to specify the type of numbering you like. By default,
it is a number. Following are the possible options –
<ol type = "1"> - Default-Case Numerals.
<ol type = "I"> - Upper-Case Numerals.
<ol type = "i"> - Lower-Case Numerals.
<ol type = "A"> - Upper-Case Letters.
<ol type = "a"> - Lower-Case Letters.
Example for type attribute
<!DOCTYPE html>
<html>
<head><title>HTML Ordered List</title>
</head>
<body>
<ol type = "1"><li>Beetroot</li> <li>Ginger</li>
<li>Potato</li><li>Radish</li></ol>
</body></html>
The start Attribute
You can use start attribute for <ol> tag to specify the starting point of numbering you need.
Following are the possible options −<ol type = "1" start = "4"> - Numerals starts with 4.
<ol type = "I" start = "4"> - Numerals starts with IV.
<ol type = "i" start = "4"> - Numerals starts with iv.
<ol type = "a" start = "4"> - Letters starts with d.
<ol type = "A" start = "4"> - Letters starts with D.
Example for ordered list
<!DOCTYPE html>
<html> <head> <title>HTML Ordered List</title>
</head> <body>
<ol type = "i" start = "4"><li>Beetroot</li> <li>Ginger</li>
<li>Potato</li><li>Radish</li>
</ol> </body>
</html>

Website:www.gedutech.net
mail: [email protected]
contact: +91 7676886524
+91 8712257211
 Global Education
Technology

HTML Definition Lists

HTML and XHTML supports a list style which is called definition lists where entries are
listed like in a dictionary or encyclopedia. The definition list is the ideal way to present a
glossary, list of terms, or other name/value list.
Definition List makes use of following three tags.

Example for definition list

<!DOCTYPE html>
<html>
<head>
<title>HTML Definition List</title>
</head>
<body>
<dl>
<dt><b>HTML</b></dt>
<dd>This stands for Hyper Text Markup Language</dd>
<dt>
<b>HTTP</b>
</dt>
<dd>This stands for Hyper Text Transfer Protocol</dd>
</dl>
</body>
</html>

Website:www.gedutech.net
mail: [email protected]
contact: +91 7676886524
+91 8712257211
 Global Education
Technology

HTML Links:
Html links a webpage can contain various links that take you directly to other pages and even
specific parts of a given page. These links are known as hyperlinks.
Hyperlinks allow visitors to navigate between Web sites by clicking on words, phrases, and
images. Thus, you can create hyperlinks using text or images available on a webpage.
Linking Documents
A link is specified using HTML tag <a>. This tag is called anchor tag and anything between
the opening <a> tag and the closing </a> tag becomes part of the link and a user can click
that part to reach to the linked document. Following is the simple syntax to use <a> tag.
<a href = "Document URL" ... attributes-list>Link Text</a>
Example for linking a document
<!DOCTYPE html>
<html>
<head>
<title>Hyperlink Example</title>
</head>
<body>
<p>Click following link</p>
<a href = "https://www.fcebook.com" target = "_self">Facebook
</a>
</body>
</html>
output:
Click following link
Facebook

Website:www.gedutech.net
mail: [email protected]
contact: +91 7676886524
+91 8712257211
 Global Education
Technology
The target Attribute
We have used target attribute in our previous example. This attribute is used to specify the
location where linked document is opened. Following are the possible options –
Sr.No Option & Description

_blank
1
Opens the linked document in a new window or tab.

_self
2
Opens the linked document in the same frame.

_parent
3
Opens the linked document in the parent frame.

_top
4
Opens the linked document in the full body of the window.

targetframe
5
Opens the linked document in a named targetframe.

Example for target attribute:

<!DOCTYPE html>
<html>
<head>
<title>Hyperlink Example</title>
<base href = "https://www.tutorialspoint.com/">
</head>
<body>
<p>Click any of the following links</p>
<a href = "/html/index.htm" target = "_blank">Opens in New</a> |
<a href = "/html/index.htm" target = "_self">Opens in Self</a> |
<a href = "/html/index.htm" target = "_parent">Opens in Parent</a> |
<a href = "/html/index.htm" target = "_top">Opens in Body</a>
</body>
Website:www.gedutech.net
mail: [email protected]
contact: +91 7676886524
+91 8712257211
 Global Education
Technology
</html>
This will produce the following result, where you can click on different links to understand
the difference between various options given for target attribute.
output:
Click any of the following links
Opens in New | Opens in Self | Opens in Parent | Opens in Body
Use of Base Path
When you link HTML documents related to the same website, it is not required to give a
complete URL for every link. You can get rid of it if you use <base> tag in your HTML
document header.
Input:Example for base path
<!DOCTYPE html>
<html>
<head>
<title>Hyperlink Example</title>
<base href = "https://www.facebook.com/">
</head>
<body>
<p>Click following link</p>
<a href = "/html/index.htm" target = "_blank">HTML Tutorial</a> </body> </html>
Output:
Click following link
HTML Tutorial
Linking to a Page Section
You can create a link to a particular section of a given webpage by using name attribute. This
is a two-step process.

First create a link to the place where you want to reach with-in a webpage and name it using
<a...> tag as follows −
<h1>HTML Text Links <a name = "top">
</a></h1>

Second step is to create a hyperlink to link the document and place where you want to reach −
<a href = "/html/html_text_links.htm#top">Go to the Top</a>

This will produce following link, where you can click on the link generated Go to the Top to
reach to the top of the HTML Text Link tutorial.
Website:www.gedutech.net
mail: [email protected]
contact: +91 7676886524
+91 8712257211
 Global Education
Technology
Setting Link Colors
You can set colors of your links, active links and visited links
using link, alink and vlink attributes of <body> tag.

Save the following in test.htm and open it in any web browser to see
how link, alink and vlink attributes work.
<!DOCTYPE html>
<html>
<head>
<title>Hyperlink Example</title>
<base href = "https://www.Internship.com/">
</head>
<body alink = "#54A250" link = "#040404" vlink = "#F40633">
<p>Click following link</p>
<a href = "/html/index.htm" target = "_blank" >HTML Tutorial</a>
</body>
</html>
This will produce the following result. Just check color of the link before clicking on it, next
check its color when you activate it and when the link has been visited.
Click following link
HTML Tutorial
Download Links
You can create text link to make your PDF, or DOC or ZIP files downloadable. This is very
simple; you just need to give complete URL of the downloadable file
<a href = "https://www.Internship.com/page.pdf">Download PDF File</a>
File Download Dialog Box
Sometimes it is desired that you want to give an option where a user will click a link and it
will pop up a "File Download" box to the user instead of displaying actual content. This is
very easy and can be achieved using an HTTP header in your HTTP response.

Website:www.gedutech.net
mail: [email protected]
contact: +91 7676886524
+91 8712257211
 Global Education
Technology

HTML Image Links:

we have seen how to create hypertext link using text and we also learnt how to use images in
our webpages. Now, we will
learn how to use images to create hyperlinks.
It's simple to use an image as hyperlink. We just need to use an image inside hyperlink at the
place of text as shown below −example for html image links
<!DOCTYPE html>
<html> <head>
<title>Image Hyperlink Example</title>
</head> <body>
<p>Click following link</p>
<a href = "https://www.Internship.com" target = "_self">
<img src = "/images/logo.png" alt = “www.Internship.com" border = "0"/>
</a>
</body></html>

HTML Email Links:

It is not difficult to put an HTML email link on your webpage but it can cause unnecessary
spamming problem for your email account. There are people, who can run programs to
harvest these types of emails and later use them for spamming in various ways.
Website:www.gedutech.net
mail: [email protected]
contact: +91 7676886524
+91 8712257211
 Global Education
Technology
You can have another option to facilitate people to send you emails. One option could be to
use HTML forms to collect user data and then use PHP or CGI script to send an email.
HTML Email Tag:HTML <a> tag provides you option to specify an email address to send an
email. While using <a> tag as an email tag, you will use mailto: email address along
with href attribute. Following is the syntax of using mailto instead of using http.
<a href = "mailto: [email protected]">Send Email</a>
Default Settings:
You can specify a default email subject and email body along with your email address.
Following is the example to use default subject and body.

<a href = "mailto:[email protected]?subject = Feedback&body = Message"> Send

Feedback </a>

This code will generate the following link which you can use to send email.
Send Feedback
Html Frames:
HTML frames are used to divide your browser window into multiple sections where each
section can load a separate HTML document. A collection of frames in the browser window
is known as a frameset. The window is divided into frames in a similar way the tables are
organized: into rows and columns.
Disadvantages of Frames
There are few drawbacks with using frames, so it's never recommended to use frames in your
webpages –

Website:www.gedutech.net
mail: [email protected]
contact: +91 7676886524
+91 8712257211
 Global Education
Technology
Creating Frames:
To use frames on a page we use <frameset> tag instead of <body> tag. The <frameset> tag
defines, how to divide the window into frames. The rows attribute of <frameset> tag defines
horizontal frames and cols attribute defines vertical frames. Each frame is indicated by
<frame> tag and it defines which HTML document shall open into the frame. Example for
frame
<!DOCTYPE html>
<html>
<head>
<title>HTML Frames</title>
</head> <frameset rows = "10%,80%,10%">
<frame name = "top" src = "/html/top_frame.htm" />
<frame name = "main" src = "/html/main_frame.htm" />
<frame name = "bottom" src = "/html/bottom_frame.htm" />
<noframes>
<body>Your browser does not support frames.</body>
</noframes>
</frameset> </html>

The <frameset> Tag Attributes

Cols, rows, border, frameborder, frame spacing
The <frame> Tag Attributes
src, name, frameborder, marginwidth, marginheight, noresize,
scrolling,longdesc
HTML Iframes:
You can define an inline frame with HTML tag <iframe>. The <iframe> tag is not somehow
related to <frameset> tag, instead, it can appear anywhere in your document. The <iframe>
tag defines a rectangular region within the document in which the browser can display a
separate document, including scrollbars and borders. An inline frame is used to embed
another document within the current HTML document.
The src attribute is used to specify the URL of the document that occupies the inline frame.
Example for iframes:

Website:www.gedutech.net
mail: [email protected]
contact: +91 7676886524
+91 8712257211
 Global Education
Technology
<!DOCTYPE html>
<html>
<head> <title>HTML Iframes</title>
</head> <body>
<p>Document content goes here...</p>
<iframe src = "/html/menu.htm" width = "555" height = "200">
Sorry your browser does not support inline frames.
</iframe> <p>Document content also go here...</p> </body> </html>

The <Iframe> Tag Attributes

Most of the attributes of the <iframe> tag, including name, class, frameborder, id, longdesc,
marginheight, marginwidth, name, scrolling, style, and title behave exactly like the
corresponding attributes for the <frame> tag.
HTML Blocks:
All the HTML elements can be categorized into two categories (a) Block Level
Elements (b)Inline Elements.
Block Level Elements
Block elements appear on the screen as if they have a line break before and after them. For
example, the <p>, <h1>, <h2>, <h3>, <h4>, <h5>, <h6>, <ul>, <ol>, <dl>, <pre>, <hr />,
<blockquote>, and <address> elements are all block level elements. They all start on their
own new line, and anything that follows them appears on its own new line.
Inline Elements
Inline elements, on the other hand, can appear within sentences and do not have to appear on
a new line of their own. The <b>, <i>, <u>, <em>, <strong>, <sup>, <sub>, <big>, <small>,
<li>, <ins>, <del>, <code>, <cite>, <dfn>, <kbd>, and <var> elements are all inline
elements.
Grouping HTML Elements
There are two important tags which we use very frequently to group various other HTML
tags (i) <div> tag and (ii) <span> tag
Example for grouping element using<div> (i)The<div>tag

Website:www.gedutech.net
mail: [email protected]
contact: +91 7676886524
+91 8712257211
 Global Education
Technology
<!DOCTYPE html>
<html> <head> <title>HTML div Tag</title>
</head> <body>
<!-- First group of tags -->
<div style = "color:red"> <h4>This is first group</h4>
<p>Following is a list of vegetables</p>
<ul> <li>Beetroot</li> <li>Ginger</li> <li>Potato</li> <li>Radish</li> </ul>
</div>
<!-- Second group of tags -->
<div style = "color:green"> <h4>This is second group</h4> <p>Following is a list of
fruits</p>
<ul> <li>Apple</li> <li>Banana</li>
<li>Mango</li> <li>Strawberry</li> </ul> </div> </body> </html>

(ii)The <span> tag

The HTML <span> is an inline element and it can be used to group inline-elements in an
HTML document. This tag also does not provide any visual change on the block but has more
meaning when it is used with CSS.
The difference between the <span> tag and the <div> tag is that the <span> tag is used with
inline elements whereas the <div> tag is used with block-level elements.
Following is a simple example of <span> tag. -
<!DOCTYPE html>
<html> <head> <title>HTML span Tag</title>
</head> <body> <p>This is <span style = color:red">red</span> and this is <span
style = "color:green">green</span></p> </body>
</html>

HTML Background:

Website:www.gedutech.net
mail: [email protected]
contact: +91 7676886524
+91 8712257211
 Global Education
Technology
By default, your webpage background is white in color. You may not like it, but no worries.
HTML provides you following two good ways to decorate your webpage background.
<tagname bgcolor = "color_value"...>
<!-- Format 1 - Use color name --> <table bgcolor = "lime" >
<!-- Format 2 - Use hex value --> <table bgcolor = "#f1f1f1" >
<!-- Format 3 - Use color value in RGB terms --> <table bgcolor = "rgb(0,0,120)" >
Example for background

<!DOCTYPE html><html>
<head>
<title>HTML Background Colors</title> </head>
<body>
<!-- Format 1 - Use color name -->
<table bgcolor = "yellow" width = "100%">
<tr> <td> This background is yellow </td> </tr>
</table>
<!-- Format 2 - Use hex value --> <table bgcolor = "#6666FF" width = "100%">
<tr> <td> This background is sky blue </td> </tr> </table>
<!-- Format 3 - Use color value in RGB terms -->
<table bgcolor = "rgb(255,0,255)" width = "100%"> <tr>
<td> This background is green </td>
</tr> </table> </body> </html>

Html Background with Images

The background attribute can also be used to control the background of an HTML element,
specifically page body and table backgrounds. You can specify an image to set background of
your HTML page or table.
<tagname background = "Image URL"...>
The most frequently used image formats are JPEG, GIF and PNG images.
<!DOCTYPE html>
<html> <head>
<title>HTML Background Images</title> </head> <body>
<!-- Set table background -->
<table background = "/images/html.gif" width = "100%" height = "100"> <tr><td>
Website:www.gedutech.net
mail: [email protected]
contact: +91 7676886524
+91 8712257211
 Global Education
Technology
This background is filled up with HTML image. </td></tr>
</table>
</body>
</html>

HTML Colors:
Colors are very important to give a good look and feel to your website. You can specify
colors on page level using <body> tag or you can set colors for individual tags
using bgcolor attribute.
The <body> tag has following attributes which can be used to set different colors −
bgcolor − sets a color for the background of the page.
text − sets a color for the body text.
alink − sets a color for active links or selected links.
link − sets a color for linked text.
vlink − sets a color for visited links − that is, for linked text that you have already clicked on.
HTML Color Coding Methods:
There are following three different methods to set colors in your web page −
Color names − You can specify color names directly like green, blue or red.
Hex codes − A six-digit code representing the amount of red, green, and blue that makes up
the color.
Color decimal or percentage values − This value is specified using the rgb( ) property.
HTML Fonts
Fonts play a very important role in making a website more user friendly and increasing
content readability. Font face and color depends entirely on the computer and browser that is
being used to view your page but you can use HTML <font> tag to add style, size, and color
to the text on your website. You can use a <basefont> tag to set all of your text to the same
size, face, and color.
Set Font Size
You can set content font size using size attribute. The range of accepted values is from
1(smallest) to 7(largest). The default size of a font is 3.
<!DOCTYPE html>
<html>
Website:www.gedutech.net
mail: [email protected]
contact: +91 7676886524
+91 8712257211
 Global Education
Technology
<head> <title>Setting Font Size</title>
</head>
<body>
<font size = "1">Font size = "1"</font><br />
<font size = "2">Font size = "2"</font><br />
<font size = "3">Font size = "3"</font><br />
<font size = "4">Font size = "4"</font><br />
<font size = "5">Font size = "5"</font><br />
<font size = "6">Font size = "6"</font><br />
<font size = "7">Font size = "7"</font>
</body></html>

Relative Font Size

You can specify how many sizes larger or how many sizes smaller than the preset font size
should be. You can specify it like
<font size = "+n"> or <font size = "−n">
<font size = "-1">Font size = "-1"</font><br />
<font size = "+1">Font size = "+1"</font><br />
<font size = "+2">Font size = "+2"</font><br />
<font size = "+3">Font size = "+3"</font><br />
<font size = "+4">Font size = "+4"</font>
Setting Font Face
You can set font face using face attribute but be aware that if the user viewing the page
doesn't have the font installed, they will not be able to see it. Instead user will see the default
font face applicable to the user's computer.

Website:www.gedutech.net
mail: [email protected]
contact: +91 7676886524
+91 8712257211
 Global Education
Technology

HTML Forms:
HTML Forms are required, when you want to collect some data from the site visitor. For
example, during user registration you would like to collect information such as name, email
address, credit card, etc.

A form will take input from the site visitor and then will post it to a back-end application
such as CGI, ASP Script or PHP script etc. The back-end application will perform required
processing on the passed data based on defined business logic inside the application.

There are various form elements available like text fields, textarea fields, drop-down menus,
radio buttons, checkboxes, etc.
The HTML <form> tag is used to create an HTML form and it has following syntax −

<form action = "Script URL" method = "GET|POST"> form elements like input, textarea etc.
</form>
Form Attributes
Apart from common attributes, following is a list of the most frequently used form attributes
−

Website:www.gedutech.net
mail: [email protected]
contact: +91 7676886524
+91 8712257211
 Global Education
Technology

HTML Form Controls:

There are different types of form controls that you can use to collect data using HTML form
−
Text Input Controls
Checkboxes Controls
Radio Box Controls
Select Box Controls
File Select boxes
Hidden Controls
Clickable Buttons
Submit and Reset Button
Text Input Controls
There are three types of text input used on forms −
Single-line text input controls − This control is used for items that require only one line of
user input, such as search boxes or names. They are created using HTML <input> tag.
Password input controls − This is also a single-line text input but it masks the character as
soon as a user enters it. They are also created using HTMl <input> tag.
Multi-line text input controls − This is used when the user is required to give details that
may be longer than a single sentence. Multi-line input controls are created using
HTML <textarea> tag.
Single-line text input controls:
<!DOCTYPE html>
<html>
<head>
<title>Text Input Control</title>
Website:www.gedutech.net
mail: [email protected]
contact: +91 7676886524
+91 8712257211
 Global Education
Technology
</head> <body> <form >
First name: <input type = "text" name = "first_name" />
<br> Last name: <input type = "text" name = "last_name" />
</form> </body> </html>

Input tag attributes

Password input controls

This is also a single-line text input but it masks the character as soon as a user enters it. They
are also created using HTML <input>tag but type attribute is set to password.
<!DOCTYPE html><html>
<head>
<title>Password Input Control</title>
</head> <body>
<form >
User ID : <input type = "text" name = "user_id" />
Website:www.gedutech.net
mail: [email protected]
contact: +91 7676886524
+91 8712257211
 Global Education
Technology
<br> Password: <input type = "password" name = "password" /> </form>
</body>

</html>
Multiple-Line Text Input Controls
This is used when the user is required to give details that may be longer than a single
sentence. Multi-line input controls are created using HTML <textarea> tag.
<!DOCTYPE html>
<html> <head> <title>File Upload Box</title>
</head>
<body> <form> <input type = "file" name = "fileupload" accept = "image/*" /> </form>
</body>

</html>

Checkbox Control
Checkboxes are used when more than one option is required to be selected. They are also
created using HTML <input> tag but type attribute is set to checkbox.
<!DOCTYPE html><html> <head> <title>Checkbox Control</title> </head>
<body> <form>
<input type = "checkbox" name = "maths" value = "on"> Maths <input type =
"checkbox" name = "physics" value = "on"> Physics </form> </body> </html>

Website:www.gedutech.net
mail: [email protected]
contact: +91 7676886524
+91 8712257211
 Global Education
Technology

Radio Button Control

Radio buttons are used when out of many options, just one option is required to be selected.
They are also created using HTML <input> tag but type attribute is set to radio.
<!DOCTYPE html>
<html>
<head> <title>Radio Box Control</title> </head> <body> <form>
<input type = "radio" name = "subject" value = "maths"> Maths
<input type = "radio" name = "subject" value = "physics"> Physics </form>
</body></html>

Select Box Control

A select box, also called drop down box which provides option to list down various options
in the form of drop down list, from where a user can select one or more options.
<!DOCTYPE html>
<html> <head>
<title>Select Box Control</title>
</head> <body>
<form>
<select name = "dropdown">
<option value = "Maths" selected>Maths</option>

Website:www.gedutech.net
mail: [email protected]
contact: +91 7676886524
+91 8712257211
 Global Education
Technology
<option value = "Physics">Physics</option>
</select> </form> </body></html>

File Upload Box

If you want to allow a user to upload a file to your web site, you will need to use a file upload
box, also known as a file select box. This is also created using the <input> element but type
attribute is set to file.
<!DOCTYPE html>
<html> <head> <title>File Upload Box</title>
</head> <body>
<form> <input type = "file" name = "fileupload" accept = "image/*" /> </form>
</body> </html>

Attributes used in fileupload:

Button Controls
There are various ways in HTML to create clickable buttons. You can also create a clickable

Website:www.gedutech.net
mail: [email protected]
contact: +91 7676886524
+91 8712257211
 Global Education
Technology
button using <input>tag by setting its type attribute to button. The type attribute can take the
following values –

Hidden Form Controls

Hidden form controls are used to hide data inside the page which later on can be pushed to
the server. This control hides inside the code and does not appear on the actual page. For
example, following hidden form is being used to keep current page number. When a user will
click next page then the value of hidden control will be sent to the web server and there it will
decide which page will be displayed next based on the passed current page Example for
hidden from control
<!DOCTYPE html>
<html>
<head> <title>File Upload Box</title>
</head> <body> <form> <p>This is page 10</p>
<input type = "hidden" name = "pagename" value = "10" />
<input type = "submit" name = "submit" value = "Submit"/>
<input type = "reset" name = "reset" value = "Reset" />
</form> </body></html>

HTML Embed Multimedia:

Sometimes you need to add music or video into your web page. The easiest way to add video
or sound to your web site is to include the special HTML tag called <embed>. This tag

Website:www.gedutech.net
mail: [email protected]
contact: +91 7676886524
+91 8712257211
 Global Education
Technology
causes the browser itself to include controls for the multimedia automatically provided
browser supports <embed> tag and given media type.

You can also include a <noembed> tag for the browsers which don't recognize the <embed>
tag. You could, for example, use <embed> to display a movie of your choice,
and <noembed> to display a single JPG image if browser does not support <embed> tag.

The <embed> Tag Attributes

Following is the list of important attributes which can be used with <embed> tag.

Sr.No Attribute & Description

align
1
Determines how to align the object. It can be set to either center, left or right.

autostart
2 This boolean attribute indicates if the media should start automatically. You
can set it either true or false.

loop
3 Specifies if the sound should be played continuously (set loop to true), a
certain number of times (a positive value) or not at all (false)

playcount
4 Specifies the number of times to play the sound. This is alternate option
for loop if you are usiong IE.

hidden
5 Specifies if the multimedia object should be shown on the page. A false value
means no and true values means yes.

width
6
Width of the object in pixels

height
7
Height of the object in pixels

name
8
A name used to reference the object.

src
9
URL of the object to be embedded.

volume
10
Controls volume of the sound. Can be from 0 (off) to 100 (full volume).

<!DOCTYPE html><html> <head> <title>HTML embed Tag</title>

Website:www.gedutech.net
mail: [email protected]
contact: +91 7676886524
+91 8712257211
 Global Education
Technology
</head> <body> <embed src = "/html/yourfile.swf" width = "200" height = "200" >
<noembed><img src = "yourimage.gif" alt = "Alternative Media" ></noembed>

</embed> </body></html>

Background Audio

You can use HTML <bgsound> tag to play a soundtrack in the background of your webpage.
This tag is supported by Internet Explorer only and most of the other browsers ignore this
tag.

<!DOCTYPE html>
<html>

<head>
<title>HTML embed Tag</title>
</head>

<body>
<bgsound src = "/html/yourfile.mid">
<noembed><img src = "yourimage.gif" ></noembed>
</bgsound>
</body>

</html>

HTML Object tag

HTML 4 introduces the <object> element, which offers an all-purpose solution to generic
object inclusion. The <object> element allows HTML authors to specify everything required
by an object for its presentation by a user agent.

You can embed an HTML document in an HTML document itself as follows

<object data = "data/test.htm" type = "text/html" width = "300" height = "200">
alt : <a href = "data/test.htm">test.htm</a>
</object>
<object data = "data/test.htm" type = "text/html" width = "300" height = "200">
alt : <a href = "data/test.htm">test.htm</a>
</object>

Website:www.gedutech.net
mail: [email protected]
contact: +91 7676886524
+91 8712257211
 Global Education
Technology
HTML Marquee:An HTML marquee is a scrolling piece of text displayed either horizontally
across or vertically down your webpage depending on the settings. This is created by using
HTML <marquees> tag.

A simple syntax to use HTML <marquee> tag is as follows −

<marquee attribute_name = "attribute_value"....more attributes>

One or more lines or text message or image
</marquee>

<!DOCTYPE html>

<html> <head> <title>HTML marquee Tag</title> </head>

<body> <marquee>This is basic example of marquee</marquee> </body></html>

HTML Header:

We have learnt that a typical HTML document will have following structure − The <head>
tag is a container of various important tags like <title>, <meta>, <link>, <base>, <style>,
<script>, and <noscript> tags.

The HTML <title> Tag

The HTML <title> tag is used for specifying the title of the HTML document. Following is
an example to give a title to an HTML document

<title>HTML Title Tag Example</title>

The HTML <meta> Tag

The HTML <meta> tag is used to provide metadata about the HTML document which
includes information about page expiry, page author, list of keywords, page description etc.

The HTML <base> Tag

The HTML <base> tag is used for specifying the base URL for all relative URLs in a page,
which means all the other URLs will be concatenated into base URL while locating for the
given item.

<head><title>HTML Base Tag Example</title>

<base href = "https://www.tutorialspoint.com/" /></head>

The HTML <link> Tag

Website:www.gedutech.net
mail: [email protected]
contact: +91 7676886524
+91 8712257211
 Global Education
Technology
The HTML <link> tag is used to specify relationships between the current document and
external resource. Following is an example to link an external style sheet file available
in css sub-directory within web root –

<head>

<title>HTML link Tag Example</title>

<base href = "https://www.tutorialspoint.com/" />

<link rel = "stylesheet" type = "text/css" href = "/css/style.css">

</head>

The HTML <style> Tag

The HTML <style> tag is used to specify style sheet for the current HTML document.
Following is an example to define few style sheet rules inside <style> tag –

<head>

<title>HTML style Tag Example</title> <base href = "https://www.tutorialspoint.com/"

/> <style type = "text/css"> .myclass { background-color: #aaa; padding: 10px; }
</style> </head>

The HTML <script> Tag

The HTML <script> tag is used to include either external script file or to define internal
script for the HTML document. Following is an example where we are using JavaScript to
define a simple JavaScript function <head>

<title>HTML script Tag Example</title>

<base href = "http://www.tutorialspoint.com/" /> <script type = "text/JavaScript">

function Hello() {

alert("Hello, World"); }</script> </head>

Website:www.gedutech.net
mail: [email protected]
contact: +91 7676886524
+91 8712257211
 Global Education
Technology

CSS

Cascading Style Sheets (CSS) describe how documents are presented on screens, in print, or
perhaps how they are pronounced.

Cascading Style Sheets (CSS) provide easy and effective alternatives to specify various
attributes for the HTML tags. Using CSS, you can specify a number of style properties for a
given HTML element. Each property has a name and a value, separated by a colon (:). Each
property declaration is separated by a semi-colon (;).

First let's consider an example of HTML document which makes use of <font> tag and
associated attributes to specify text color and font size.

Example for css

<!DOCTYPE html><html> <head> <title>HTML CSS</title> </head> <body>

<p><font color = "green" size = "5">Hello, World! </font></p> </body></html>

Hello, World!

You can use CSS in three ways in your HTML document −

 External Style Sheet − Define style sheet rules in a separate .css file and then include
that file in your HTML document using HTML <link> tag.
 Internal Style Sheet − Define style sheet rules in header section of the HTML
document using <style> tag.
 Inline Style Sheet − Define style sheet rules directly along-with the HTML elements
using style attribute.

External Style Sheet

If you need to use your style sheet to various pages, then its always recommended to define a
common style sheet in a separate file. A cascading style sheet file will have extension
as .css and it will be included in HTML files using <link> tag.

Consider we define a style sheet file style.css which has following rules

.red {
color: red;
}
.thick {
font-size:20px;
}
.green {
color:green;

Website:www.gedutech.net
mail: [email protected]
contact: +91 7676886524
+91 8712257211
 Global Education
Technology
}

<!DOCTYPE html><html>

<head> <title>HTML External CSS</title>

<link rel = "stylesheet" type = "text/css" href = "/html/style.css"> </head> <body> <p
class = "red">This is red</p>

<p class = "thick">This is thick</p>

<p class = "green">This is green</p>

<p class = "thick green">This is thick and green</p> </body></html>

This is red

This is thick

This is green

This is thick and green

Internal Style Sheet

If you want to apply Style Sheet rules to a single document only, then you can include those
rules in header section of the HTML document using <style> tag.

Rules defined in internal style sheet overrides the rules defined in an external CSS file.
Example for Internal Style sheet

<!DOCTYPE html> <html> <head>

<title>HTML Internal CSS</title>

<style type = "text/css">

.red { color: red; }

.thick{ font-size:20px; }

.green { color:green; } </style> </head>

<body> <p class = "red">This is red</p>

<p class = "thick">This is thick</p>

Website:www.gedutech.net
mail: [email protected]
contact: +91 7676886524
+91 8712257211
 Global Education
Technology
<p class = "green">This is green</p>

<p class = "thick green">This is thick and green</p>

</body></html>

Inline Style Sheet

You can apply style sheet rules directly to any HTML element using style attribute of the
relevant tag. This should be done only when you are interested to make a particular change in
any HTML element only.

Rules defined inline with the element overrides the rules defined in an external CSS file as
well as the rules defined in <style> element. Example for inline style sheet

<!DOCTYPE html> <html> <head> <title>HTML Inline CSS</title>

</head>

<body> <p style = "color:red;">This is red</p>

<p style = "font-size:20px;">This is thick</p>

<p style = "color:green;">This is green</p>

<p style = "color:green;font-size:20px;">This is thick and green</p> </body></html>

This is red

This is thick

This is green

This is thick and green

Website:www.gedutech.net
mail: [email protected]
contact: +91 7676886524
+91 8712257211
 Global Education
Technology
JavaScript

A script is a small piece of program that can add interactivity to your website. For example, a
script could generate a pop-up alert box message, or provide a dropdown menu. This script
could be written using JavaScript or VBScript.

You can write various small functions, called event handlers using any of the scripting
language and then you can trigger those functions using HTML attributes.

Now-a-days, only JavaScript and associated frameworks are being used by most of the web
developers, VBScript is not even supported by various major browsers.

You can keep JavaScript code in a separate file and then include it wherever it's needed, or
you can define functionality inside HTML document itself. Let's see both the cases one by
one with suitable examples.

External JavaScript

If you are going to define a functionality which will be used in various HTML documents
then it's better to keep that functionality in a separate JavaScript file and then include that file
in your HTML documents. A JavaScript file will have extension as .js and it will be included
in HTML files using <script> tag.

Example: Consider we define a small function using JavaScript in script.js which has
following code –

function Hello() {
alert("Hello, World");}
Now let's make use of the above external JavaScript file in our following HTML document –
<!DOCTYPE html>
<html> <head>
<title>Javascript External Script</title>
<script src = "/html/script.js" type = "text/javascript"/></script> </head>
<body>
<input type = "button" onclick = "Hello();" name = "ok" value = "Click Me" />
</body></html>

Internal Script

You can write your script code directly into your HTML document. Usually we keep script
code in header of the document using <script> tag, otherwise there is no restriction and you
can put your source code anywhere in the document but inside <script> tag.

Example for Internal Script

Website:www.gedutech.net
mail: [email protected]
contact: +91 7676886524
+91 8712257211
 Global Education
Technology
<!DOCTYPE html>

<html> <head> <title>JavaScript Internal Script</title>

<base href = "https://www.tutorialspoint.com/" />

<script type = "text/JavaScript"> function Hello() {

alert("Hello, World"); } </script> </head> <body>

<input type = "button" onclick = "Hello();" name = "ok" value = "Click Me" />
</body></html>

Event Handlers:

Event handlers are nothing but simply defined functions which can be called against any
mouse or keyboard event. You can define your business logic inside your event handler
which can vary from a single to 1000s of line code.

Following example explains how to write an event handler. Let's write one simple
function EventHandler() in the header of the document. We will call this function when any
user brings mouse over a paragraph.

Example for Event handlers

<!DOCTYPE html><html> <head>

<title>Event Handlers Example</title>

<base href = "https://www.tutorialspoint.com/" />

<script type = "text/JavaScript">

function EventHandler() {

alert("I'm event handler!!");

</script> </head>

<body>

<p onmouseover = "EventHandler();">Bring your mouse here to see an alert</p>

</body></html>output: Bring your mouse here to see an alert

Website:www.gedutech.net
mail: [email protected]
contact: +91 7676886524
+91 8712257211
 Global Education
Technology
Hide Scripts from Older Browsers:

Although most (if not all) browsers these days support JavaScript, but still some older
browsers don't. If a browser doesn't support JavaScript, instead of running your script, it
would display the code to the user. To prevent this, you can simply place HTML comments
around the script as shown below.

JavaScript Example:
<script type = "text/JavaScript">
<!--
document.write("Hello JavaScript!");
//-->
</script>

VBScript Example:
<script type = "text/vbscript">
<!--
document. write("Hello VBScript!")
'-->
</script>

The <noscript> Element

You can also provide alternative info to the users whose browsers don't support scripts and
for those users who have disabled script option their browsers. You can do this using
the <noscript> tag.

JavaScript Example:
<script type = "text/JavaScript">
<!--
document.write("Hello JavaScript!");
//-->
</script>

<noscript>Your browser does not support JavaScript!</noscript>

VBScript Example:
<script type = "text/vbscript">
<!--
document.write("Hello VBScript!")
'-->
</script>

Website:www.gedutech.net
mail: [email protected]
contact: +91 7676886524
+91 8712257211
 Global Education
Technology
<noscript>Your browser does not support VBScript!</noscript>

Default Scripting Language

There may be a situation when you will include multiple script files and ultimately using
multiple <script> tags. You can specify a default scripting language for all your script tags.
This saves you from specifying the language every time you use a script tag within the page.
Below is the example –

<meta http-equiv = "Content-Script-Type" content = "text/JavaScript" />

JavaScript Variables:

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.
3. JavaScript variables are case sensitive, for example x and X are different variables.

Correct JavaScript variables

1. var x = 10;
2. var _value="sonoo";

Example of JavaScript variable

<html><body><script>

var x = 10; var y = 20;

var z=x+y; document.write(z);

</script> </body></html>

JavaScript local variable

A JavaScript local variable is declared inside block or function. It is accessible within the
function or block only. For example:

1. <script>
Website:www.gedutech.net
mail: [email protected]
contact: +91 7676886524
+91 8712257211
 Global Education
Technology
2. <script>
3. If(10<13){
4. var y=20;//JavaScript local variable
5. }
or
</script>
1.
2. function abc(){
3. var x=10;//local variable
4. }
5. </script>

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:

1. <script>
2. var data=200;//gloabal variable
3. function a(){
4. document.writeln(data);
5. }
6. function b(){
7. document.writeln(data);
8. }
9. a();//calling JavaScript function
10. b();
11. </script>
Javascript Data Types

JavaScript provides different data types to hold different types of values. There are two types
of data types in JavaScript.

1. Primitive data type

2. Non-primitive (reference) data type

Website:www.gedutech.net
mail: [email protected]
contact: +91 7676886524
+91 8712257211
 Global Education
Technology
JavaScript is a dynamic type language, means you don't need to specify type of the variable
because it is dynamically used by JavaScript engine. You need to use var here to specify the
data type. It can hold any type of values such as numbers, strings etc. For example:

1. var a=40;//holding number

2. var b="Rahul";//holding string

JavaScript primitive data types

There are five types of primitive data types in JavaScript. They are as follows:

Data Type Description

String represents sequence of characters e.g. "hello"

Number represents numeric values e.g. 100

Boolean represents boolean value either false or true

Undefined represents undefined value

Null represents null i.e. no value at all

JavaScript non-primitive data types

The non-primitive data types are as follows:

Data Type Description

Object represents instance through which we can access members

Array represents group of similar values

RegExp represents regular expression

JavaScript Operators

JavaScript operators are symbols that are used to perform operations on operands. For example:

1. var sum=10+20;

Here, + is the arithmetic operator and = is the assignment operator.

There are following types of operators in JavaScript.

Website:www.gedutech.net
mail: [email protected]
contact: +91 7676886524
+91 8712257211
 Global Education
Technology
1. Arithmetic Operators
2. Comparison (Relational) Operators
3. Bitwise Operators
4. Logical Operators
5. Assignment Operators
6. Special Operators

JavaScript Arithmetic Operators

Arithmetic operators are used to perform arithmetic operations on the operands. The
following operators are known as JavaScript arithmetic operators.

Operator Description Example

+ Addition 10+20 = 30

- Subtraction 20-10 = 10

* Multiplication 10*20 = 200

/ Division 20/10 = 2

% Modulus (Remainder) 20%10 = 0

++ Increment var a=10; a++; Now a = 11

-- Decrement var a=10; a--; Now a = 9

JavaScript Comparison Operators

The JavaScript comparison operator compares the two operands. The comparison operators are
as follows:

Operator Description Example

== Is equal to 10==20 = false

=== Identical (equal and of same type) 10==20 = false

!= Not equal to 10!=20 = true

!== Not Identical 20!==20 = false

Website:www.gedutech.net
mail: [email protected]
contact: +91 7676886524
+91 8712257211
 Global Education
Technology

> Greater than 20>10 = true

>= Greater than or equal to 20>=10 = true

< Less than 20<10 = false

<= Less than or equal to 20<=10 = false

JavaScript Bitwise Operators

The bitwise operators perform bitwise operations on operands. The bitwise operators are as
follows:

Operator Description Example

& Bitwise AND (10==20 & 20==33) = false

| Bitwise OR (10==20 | 20==33) = false

^ Bitwise XOR (10==20 ^ 20==33) = false

~ Bitwise NOT (~10) = -10

<< Bitwise Left Shift (10<<2) = 40

>> Bitwise Right Shift (10>>2) = 2

>>> Bitwise Right Shift with Zero (10>>>2) = 2

JavaScript Logical Operators

The following operators are known as JavaScript logical operators.

Operator Description Example

&& Logical AND (10==20 && 20==33) = false

|| Logical OR (10==20 || 20==33) = false

! Logical Not !(10==20) = true

JavaScript Assignment Operators

The following operators are known as JavaScript assignment operators.

Website:www.gedutech.net
mail: [email protected]
contact: +91 7676886524
+91 8712257211
 Global Education
Technology

Operator Description Example

= Assign 10+10 = 20

+= Add and assign var a=10; a+=20; Now a = 30

-= Subtract and assign var a=20; a-=10; Now a = 10

*= Multiply and assign var a=10; a*=20; Now a = 200

/= Divide and assign var a=10; a/=2; Now a = 5

%= Modulus and assign var a=10; a%=2; Now a = 0

JavaScript Special Operators

The following operators are known as JavaScript special operators.

Operator Description

(?:) Conditional Operator returns value based on the condition. It is like if-else.

, Comma Operator allows multiple expressions to be evaluated as single statement.

delete Delete Operator deletes a property from the object.

in In Operator checks if object has the given property

instanceof checks if the object is an instance of given type

new creates an instance (object)

typeof checks the type of object.

void it discards the expression's return value.

yield checks what is returned in a generator by the generator's iterator.

JavaScript If-else

The JavaScript if-else statement is used to execute the code whether condition is true or false.
There are three forms of if statement in JavaScript.

1. If Statement
2. If else statement

Website:www.gedutech.net
mail: [email protected]
contact: +91 7676886524
+91 8712257211
 Global Education
Technology
3. if else if statement

JavaScript If statement

It evaluates the content only if expression is true. The signature of JavaScript if statement is
given below.

1. if(expression){
2. //content to be evaluated
3. }
Flowchart of JavaScript If statement

Let’s see the simple example of if statement in javascript.

1. <script>
2. var a=20;
3. if(a>10){
4. document.write("value of a is greater than 10");
5. }
6. </script>

Website:www.gedutech.net
mail: [email protected]
contact: +91 7676886524
+91 8712257211
 Global Education
Technology
JavaScript If...else Statement

It evaluates the content whether condition is true of false. The syntax of JavaScript if-else
statement is given below.

1. if(expression){
2. //content to be evaluated if condition is true
3. }
4. else{
5. //content to be evaluated if condition is false
6. }
Flowchart of JavaScript If...else statement

Let’s see the example of if-else statement in JavaScript to find out the even or odd number.

1. <script>
2. var a=20;
3. if(a%2==0){
4. document.write("a is even number");
5. }
6. else{
7. document.write("a is odd number");
8. }
9. </script>

Website:www.gedutech.net
mail: [email protected]
contact: +91 7676886524
+91 8712257211
 Global Education
Technology
JavaScript If...else if statement

It evaluates the content only if expression is true from several expressions. The signature of
JavaScript if else if statement is given below.

1. if(expression1){
2. //content to be evaluated if expression1 is true
3. }
4. else if(expression2){
5. //content to be evaluated if expression2 is true
6. }
7. else if(expression3){
8. //content to be evaluated if expression3 is true
9. }
10. else{
11. //content to be evaluated if no expression is true
12. }
JavaScript Switch

The JavaScript switch statement is used to execute one code from multiple expressions. It is
just like else if statement that we have learned in previous page. But it is convenient
than if..else..if because it can be used with numbers, characters etc.

The signature of JavaScript switch statement is given below.

1. switch(expression){
2. case value1:
3. code to be executed;
4. break;
5. case value2:
6. code to be executed;
7. break;
8. ......
9.
10. default:
11. code to be executed if above values are not matched;
12. }

Website:www.gedutech.net
mail: [email protected]
contact: +91 7676886524
+91 8712257211
 Global Education
Technology
JavaScript Loops

The JavaScript loops are used to iterate the piece of code using for, while, do while or for-in
loops. It makes the code compact. It is mostly used in array.

There are four types of loops in JavaScript.

1. for loop
2. while loop
3. do-while loop
4. for-in loop

1) JavaScript For loop

The JavaScript for loop iterates the elements for the fixed number of times. It should be used
if number of iteration is known. The syntax of for loop is given below.

1. for (initialization; condition; increment)

2. {
3. code to be executed
4. }

2) JavaScript while loop

The JavaScript while loop iterates the elements for the infinite number of times. It should be
used if number of iteration is not known. The syntax of while loop is given below.

1. while (condition)
2. {
3. code to be executed
4. }

3) JavaScript do while loop

The JavaScript do while loop iterates the elements for the infinite number of times like while
loop. But, code is executed at least once whether condition is true or false. The syntax of do
while loop is given below.

1. do{
2. code to be executed
3. }while (condition);
Website:www.gedutech.net
mail: [email protected]
contact: +91 7676886524
+91 8712257211
 Global Education
Technology
4) JavaScript for in loop

The JavaScript for in loop is used to iterate the properties of an object.

JavaScript Functions

JavaScript functions are used to perform operations. We can call JavaScript function many
times to reuse the code.

Advantage of JavaScript function

There are mainly two advantages of JavaScript functions.

1. Code reusability: We can call a function several times so it save coding.

2. Less coding: It makes our program compact. We don’t need to write many lines of code
each time to perform a common task.

JavaScript Function Syntax

The syntax of declaring function is given below.

1. function functionName([arg1, arg2, ...argN]){

2. //code to be executed
3. }

Document Object Model

1. Document Object
2. Properties of document object
3. Methods of document object
4. Example of document object

The document object represents the whole html document.

When html document is loaded in the browser, it becomes a document object. It is the root
element that represents the html document. It has properties and methods. By the help of
document object, we can add dynamic content to our web page.

Website:www.gedutech.net
mail: [email protected]
contact: +91 7676886524
+91 8712257211
 Global Education
Technology
Properties of document object

Methods of document object

We can access and change the contents of document by its methods.

The important methods of document object are as follows:

Method Description

write("string") writes the given string on the doucment.

writeln("string") writes the given string on the doucment with newline character at the end.

getElementById() returns the element having the given id value.

getElementsByName() returns all the elements having the given name value.

Website:www.gedutech.net
mail: [email protected]
contact: +91 7676886524
+91 8712257211
 Global Education
Technology

getElementsByTagName() returns all the elements having the given tag name.

getElementsByClassName() returns all the elements having the given class name.

Accessing field value by document object

In this example, we are going to get the value of input text by user. Here, we are
using document.form1.name.value to get the value of name field.

Here, document is the root element that represents the html document.

form1 is the name of the form.

name is the attribute name of the input text.

value is the property, that returns the value of the input text.

Let's see the simple example of document object that prints name with welcome message.

1. <script type="text/javascript">
2. function printvalue(){
3. var name=document.form1.name.value;
4. alert("Welcome: "+name);
5. }
6. </script>
7.
8. <form name="form1">
9. Enter Name:<input type="text" name="name"/>
10. <input type="button" onclick="printvalue()" value="print name"/>
11. </form>

Output of the above example

Enter Name:

Javascript - document.getElementById() method

The document.getElementById() method returns the element of specified id.

Website:www.gedutech.net
mail: [email protected]
contact: +91 7676886524
+91 8712257211
 Global Education
Technology
Javascript - document.getElementsByName() method

The document.getElementsByName() method returns all the element of specified name.

Javascript - document.getElementsByTagName() method

The document.getElementsByTagName() method returns all the element of specified tag

name.

GetElementsByClassName()

The getElementsByClassName() method is used for selecting or getting the elements through
their class name value. This DOM method returns an array-like object that consists of all the
elements having the specified classname. On calling the getElementsByClassName() method
on any particular element, it will search the whole document and will return only those elements
which match the specified or given class name.

HTML Example: For every html page is run in chrome browser,IE .

1.First Take a notepad/text editor to create a html file with first program.html
2.next it will be saved in localdisk /take some folder and in this .html extension saved in this
folder and when we are run the program in chrome
Forexample:ThisPC:E:\html\first.htmlcopy this address and paste in chrome url paste it and
run the html file

The following code describes how to create a simple registration Page.

<Html>
<head>
<title>
RegistrationPage
</title> </head>
<body bgcolor="Lightskyblue">
<br> <br>
<form>
<label> Firstname </label>
<input type="text" name="firstname" size="15"/> <br> <br>
<label> Middlename: </label>
<input type="text" name="middlename" size="15"/> <br> <br>
<label> Lastname: </label>
<input type="text" name="lastname" size="15"/> <br> <br>
<label>
Course :
</label>
<select>
<option value="Course">Course</option>
<option value="BCA">BCA</option>
<option value="BBA">BBA</option>
<option value="B.Tech">B.Tech</option>
Website:www.gedutech.net
mail: [email protected]
contact: +91 7676886524
+91 8712257211
 Global Education
Technology
<option value="MBA">MBA</option>
<option value="MCA">MCA</option>
<option value="M.Tech">M.Tech</option>
</select>
<br> <br>
<label>
Gender :
</label><br>
<input type="radio" name="male"/> Male <br>
<input type="radio" name="female"/> Female <br>
<input type="radio" name="other"/> Other
<br> <br>
<label>
Phone :
</label> <input type="text" name="country code" value="+91" size="2"/>
<input type="text" name="phone" size="10"/> <br> <br>
Address
<br>
<textarea cols="80" rows="5" value="address">
</textarea>
<br> <br>
Email:
<input type="email" id="email" name="email"/> <br>
<br> <br>
Password:
<input type="Password" id="pass" name="pass"> <br>
<br> <br>
Re-type password:
<input type="Password" id="repass" name="repass"> <br> <br>
<input type="button" value="Submit"/>
</form>
</body>

Website:www.gedutech.net
mail: [email protected]
contact: +91 7676886524
+91 8712257211
 Global Education
Technology
</html>

The following code describes how to create a responsive registration form with the use of CSS.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body{
font-family: Calibri, Helvetica, sans-serif;
background-color: pink;
} .container {
padding: 50px;
background-color: lightblue;
}

input[type=text], input[type=password], textarea {

width: 100%;
Website:www.gedutech.net
mail: [email protected]
contact: +91 7676886524
+91 8712257211
 Global Education
Technology
padding: 15px;
margin: 5px 0 22px 0;
display: inline-block;
border: none;
background: #f1f1f1;
} input[type=text]:focus, input[type=password]:focus {
background-color: orange;
outline: none;
}
div {
padding: 10px 0;
}
hr {
border: 1px solid #f1f1f1;
margin-bottom: 25px;
} .registerbtn {
background-color: #4CAF50;
color: white;
padding: 16px 20px;
margin: 8px 0;
border: none;
cursor: pointer;
width: 100%;
opacity: 0.9;
}
.registerbtn:hover {
opacity: 1;
} </head>
<body>
<form>
<div class="container">
<center> <h1> Student Registeration Form</h1> </center>
<hr>
<label> Firstname </label>
<input type="text" name="firstname" placeholder= "Firstname" size="15" required />
<label> Middlename: </label>
<input type="text" name="middlename" placeholder="Middlename" size="15" required />
<label> Lastname: </label>
<input type="text" name="lastname" placeholder="Lastname" size="15"required />
<div>
<label>

Gender :
</label><br>
<input type="radio" value="Male" name="gender" checked > Male
<input type="radio" value="Female" name="gender"> Female
<input type="radio" value="Other" name="gender"> Other

Website:www.gedutech.net
mail: [email protected]
contact: +91 7676886524
+91 8712257211
 Global Education
Technology
</div>
<label>
Phone :
</label>
<input type="text" name="country code" placeholder="Country Code" value="+91" size="2
"/>
<input type="text" name="phone" placeholder="phone no." size="10"/ required> Current A
ddress :
<textarea cols="80" rows="5" placeholder="Current Address" value="address" required>
</textarea>
<label for="email"><b>Email</b></label>
<input type="text" placeholder="Enter Email" name="email" required> <label for="psw">
<b>Password</b></label>
<input type="password" placeholder="Enter Password" name="psw" required>
<label for="psw-repeat"><b>Re-type Password</b></label>
<input type="password" placeholder="Retype Password" name="psw-repeat" required>
<button type="submit" class="registerbtn">Register</button>
</form> </body> </html>

Website:www.gedutech.net
mail: [email protected]
contact: +91 7676886524
+91 8712257211
 Global Education
Technology

GIT

Git is a modern and widely used distributed version control system in the world. It is
developed to manage projects with high speed and efficiency. The version control system
allows us to monitor and work together with our team members at the same workspace.

Git is foundation of many services like GitHub and GitLab, but we can use Git without using
any other Git services. Git can be used privately and publicly.

Git was created by Linus Torvalds in 2005 to develop Linux Kernel. It is also used as an
important distributed version-control tool for the DevOps.

Website:www.gedutech.net
mail: [email protected]
contact: +91 7676886524
+91 8712257211
 Global Education
Technology
Git is easy to learn, and has fast performance. It is superior to other SCM tools like Subversion,
CVS, Perforce, and ClearCase.

Features of Git

Some remarkable features of Git are as follows:

Benefits of Git

A version control application allows us to keep track of all the changes that we make in the
files of our project. Every time we make changes in files of an existing project, we can push
those changes to a repository. Other developers are allowed to pull your changes from the
repository and continue to work with the updates that you added to the project files.

Website:www.gedutech.net
mail: [email protected]
contact: +91 7676886524
+91 8712257211
 Global Education
Technology

Why Git?

We have discussed many features and benefits of Git that demonstrate the undoubtedly Git as
the leading version control system. Now, we will discuss some other points about why should
we choose Git.

Git Version Control System

A version control system is a software that tracks changes to a file or set of files over time so
that you can recall specific versions later. It also allows you to work together with other
programmers.

The version control system is a collection of software tools that help a team to manage changes
in a source code. It uses a special kind of database to keep track of every modification to the
code.

Developers can compare earlier versions of the code with an older version to fix the mistakes.

Benefits of the Version Control System

The Version Control System is very helpful and beneficial in software development;
developing software without using version control is unsafe. It provides backups for
uncertainty. Version control systems offer a speedy interface to developers. It also allows
software teams to preserve efficiency and agility according to the team scales to include more
developers.

Some key benefits of having a version control system are as follows.

o Complete change history of the file

Website:www.gedutech.net
mail: [email protected]
contact: +91 7676886524
+91 8712257211
 Global Education
Technology
o Simultaneously working
o Branching and merging
o Traceability

Types of Version Control System

o Localized version Control System

o Centralized version control systems
o Distributed version control systems

Localized Version Control Systems

The localized version control method is a common approach because of its simplicity. But this
approach leads to a higher chance of error. In this approach, you may forget which directory
you're in and accidentally write to the wrong file or copy over files you don't want to.

To deal with this issue, programmers developed local VCSs that had a simple database. Such
databases kept all the changes to files under revision control. A local version control system
keeps local copies of the files.

The major drawback of Local VCS is that it has a single point of failure.

Centralized Version Control System

The developers needed to collaborate with other developers on other systems. The localized
version control system failed in this case. To deal with this problem, Centralized Version
Control Systems were developed.

Website:www.gedutech.net
mail: [email protected]
contact: +91 7676886524
+91 8712257211
 Global Education
Technology

Centralized version control systems have many benefits, especially over local VCSs.

o Everyone on the system has information about the work what others are doing on the
project.
o Administrators have control over other developers.
o It is easier to deal with a centralized version control system than a localized version
control system.
o A local version control system facilitates with a server software component which
stores and manages the different versions of the files.

It also has the same drawback as in local version control system that it also has a single point
of failure.

Distributed Version Control System

Centralized Version Control System uses a central server to store all the database and team
collaboration. But due to single point failure, which means the failure of the central server,
developers do not prefer it. Next, the Distributed Version Control System is developed.

In a Distributed Version Control System (such as Git, Mercurial, Bazaar or Darcs), the user has
a local copy of a repository. So, the clients don't just check out the latest snapshot of the files
even they can fully mirror the repository. The local repository contains all the files and
metadata present in the main repository.

Website:www.gedutech.net
mail: [email protected]
contact: +91 7676886524
+91 8712257211
 Global Education
Technology

Backend Development

Backend Developer is an expert in the field of programming who can design and develop
software on the server side and has expertise in logic and databases. That is to ensure a
software can run as it should.
There are many ways of mentioning a Backend. Among them are Backend Developers,
Backend Developers, and Software Engineers. From all that it is the same in terms of work.
A backend must master one of the programming languages required by the company.
Technology is growing rapidly, all of this cannot be separated from the important role of a
Backend Developer. Software that we often use on smartphones or on PCs or laptops all have
an important role as a programmer. Currently, there are many startups that provide solutions
for users or the entertainment world. Therefore a Backend Developer is needed. And many
companies need a Backend Developer to create internal and external company software. The
more technology develops, the more programmers are needed. So for those of you who have
expertise, especially in the field of programmers, you don’t need to worry about not being
able to get a job, if you have the skills needed by the company then you will quickly get a
job.
There are many areas in software development, including:

1. System Analyst functions to collect data and design software that has been
collected from users. A System Analyst must have the expertise to make
diagrams or flowcharts of system design.

2. UI/UX design User Interface (UI) and User Experience (UX) serves to make the
appearance according to the design that has been made, and make the display so
that it can be used as expected by the user. A UI/UX ensures that a product or
service provides a pleasant experience for the user. One of the software that is
often used is figma.

3. Backend Developer functions to create logic and database of a software.

Backend Developer ensures the software can run properly. A Backend

Website:www.gedutech.net
mail: [email protected]
contact: +91 7676886524
+91 8712257211
 Global Education
Technology
programmer must have expertise in Programming Languages such as Java,
Node.JS, Go etc.

4. Frontend Developer functions to create software displays and connect users with
servers. A frontend developer is responsible for making the appearance
according to the design that has been made byUI/UX design. A frontend
developer must also have expertise in programming including HTML, CSS,
JavaScript, Flutter etc.

Those are some of the professions that are currently needed for software development. A
large software will require a large team as well. A software developer must always develop
expertise from the latest technologies. And also not everyone is able to learn everything, they
will only choose one of the skills of the software developer they will have.
Developer Backend Functions
Becoming a Backend Developer is not easy. If you want to become a Backend Developer
then you have to learn a programming language and logic capable of solving a problem. And
if you study it seriously and like it as a Backend Programmer then you will easily learn it.
Backend Developer is a skill with applied science so you don’t have to memorize all the
code, you always have to practice it so you can apply it from a system.
A Backend Developer must be able to apply diagrams or flowcharts that have been made by
system analysts using programming languages and design databases according to needs.
There are several functions of a Backend Developer, including:

1. Database Design

For a Backend Developer the main task is to design a database where all data will be stored in
the database. The database must be created first before creating a system. A backend
developer must design an efficient database so that the system is not heavy when running and
the database must be made as safe as possible so that it can be used without having to worry
about losing data.
Example use case diagram:

 Coding and Testing

After creating the database, a Backend Developer is able to create programming code and
produce output in accordance with the system design.
Testing knowledge is no less important for a Backend Developer. From every programming
code that has been made, it must be tested first before implementing it to the core system or
main system.

 System security

The security of a system is no less important for a Backend Developer when creating a
system. Backend Developer ensures that the system or application they make is safe for users
and servers. At least you have to know hacking techniques, namely studying system security
holes, such as defects or SQL injection.

Website:www.gedutech.net
mail: [email protected]
contact: +91 7676886524
+91 8712257211
 Global Education
Technology

Backend Developer Skills

There are a number of things you should learn when we prepare to become a Backend
Developer. Mastering programming languages and frameworks.
Mastering Sql & NoSql databases, Mastering Testing and Caching, Able to create
APIs,Master VCS,Able to create CI/CD,Able to create application containers,Able to make
API documentation

Here are some of the most popular and widely used backend languages: JavaScript: Because
it can be used for both frontend and backend development, JavaScript is a popular
programming language.

 ,Python: Python makes it easy to engage in modern programming tactics.

 Python comes with several sophisticated libraries that contain a large quantity of
pre-written code. As a result, engineers don't have to write code from scratch,
which reduces development time.

 ,Java: The object-oriented programming language is widely utilized in the

construction of enterprise-scale online applications, android apps, desktop apps,
scientific apps, and so on.

 Java offers multithreading, which allows two or more threads to run

simultaneously to maximize CPU utilization.

 Ruby: Ruby is one of the popular languages used. It's the basis for frameworks
like ruby on rails. It has an expressive and easy-to-understand syntax. Provides
more than 60000 libraries, has its own definite set of keywords, and is a
dynamically typed language.

 PHP: PHP, short for Hypertext Preprocessor, is an open-source server-side

scripting language specifically designed for web development.

 ,C#: C-Sharp is one of the most widely used languages for creating system
backends. It's because of its incredible features, such as Windows server
automation. Apart from that, it's fantastic because it runs codes quite quickly. It can
also be used to create CLI applications and game creation.

 Perl: Perl (Practical Extension and Reporting Language) is a multipurpose

programming language originally designed for text manipulation. Still, it is used
Website:www.gedutech.net
mail: [email protected]
contact: +91 7676886524
+91 8712257211
 Global Education
Technology
for a broad spectrum of tasks, including system administration, network
programming, web development, GUI construction, and more

Serverside Programming.

Step-By-Step Server Setup Guide

The procedure for setting up a server in your company is as follows:

 Selecting server hardware
 Choosing an operating system for the server
 Choose a trusted server location
 Server configuration
 Implementing server security
1. Selecting server hardware
Although servers can perform a variety of functions, they are used most effectively when
performing only one or a few specific tasks. Depending on the functions you want your
server to perform, different hardware and features are required. The most common server
applications in commercial environments are as follows:
 File servers
 Database servers
 HTTP (Web) servers
 Mail servers
 Print server
 Domain servers, and
 Application Deployment
The hardware and features that make up each type of server determine what that server is
capable of. Therefore, when choosing a server, you should pay close attention to RAM
memory, hard disk space and processor size in relation to the purpose of the server.
2. Choose an operating system for the server
Servers require special operating systems that are more reliable and are designed for
simultaneous work by multiple users. The most popular server operating systems are:
 Windows Server
 Linux Ubuntu Server
 Linux Red Hat Enterprise Linux
 CentOS
Choosing the best operating system for your server has a significant impact on its cost and,
more importantly, its usability. The following points are important to consider before
choosing a server operating system:
 User Friendliness
When selecting a server operating system, ease of installation, setup, and use is a crucial
consideration. For small and medium-sized firms that do not have dedicated IT employees,
this is extremely important.
Due to their striking resemblance to the Windows operating system for personal computers in
terms of appearance and functionality, Windows server operating systems are typically well-
liked by current Windows users. For installation, operation, and maintenance, Linux
operating systems, on the other hand, have an extremely steep learning curve and call for a
Linux expert.
Website:www.gedutech.net
mail: [email protected]
contact: +91 7676886524
+91 8712257211
 Global Education
Technology
 Support
Since Linux is an open-source operating system, whenever your server encounters a problem,
you may have to spend a lot of time online looking for a solution. However, Microsoft offers
excellent multi-channel customer support.
The need for support often has a significant impact on the operating system selected. Since
most small businesses find it difficult to maintain their Linux server with a dedicated IT team,
Windows Server is often the default choice.
 Personalization
In comparison to the Windows operating system, Linux is more flexible and offers more
customization choices if you have the necessary technical know-how and familiarity.
 Cost
Linux is less expensive to run than Windows server operating systems because it is an open-
sourced programme. However, you also need to take into account the total cost of IT
operations, which includes the time and technical know-how needed for server management
and maintenance.
3. Choosing a server location
Your server should ideally be situated in a different room. Even if you select a turret server,
it’s still advantageous to have a different place for your server. Other than to isolate noisy
servers, recommended for security reasons. Controlling physical access to the server might
help you lower some of the security risks to your data. In rare circumstances, this can even be
necessary to follow legal obligations.
You should have a windowless server room where cooling systems and backup power can be
installed. It is important to have a cooling system that can run continuously because high
temperatures can damage your server hardware. You must have access to the front and back
of the servers in the room. It’s much cheaper to invest in proper racking, although you can
easily place your server on a desk or table. Your server hardware is securely stored and
racked, increasing scalability.
4. Server configuration
Before you even begin personalising your server, the operating system needs to be installed.
On your PC or Mac, using this method isn’t all that different from installing software from a
DVD, USB drive, or virtual media. On the server, the operating system might already be
installed. In this case, you can go right to configuring.
After installing the operating system, below are some common settings for an office server:
 Choose a strong administrator password for the server
 Set up the network; usually the default network settings are sufficient
 A local administrator account must be added to each computer before connecting
to the server
 Set up your server as a domain controller so it can authenticate user credentials
and allow all computers on your network to join the new centralized
environment
 Set remote access and sharing options
 Server backup set. Follow your company’s data backup plan
 Configure the firewall to protect the server from attacks like phishing, DDOS,
etc.
5. Implementing server security
Of course, your server is the most significant piece of technology in your office. All company
activities, such as data interchange, database upkeep, and customer support, are based on
Website:www.gedutech.net
mail: [email protected]
contact: +91 7676886524
+91 8712257211
 Global Education
Technology
them. Due to their significance to a company’s daily operations, servers are a top target for
hackers. As a result, server security must be properly monitored.
Servers can be attacked in a variety of methods. Web and mail servers are susceptible to
malware because of their direct internet connection. A database server, for instance, might
not have a direct Internet connection, but it is still susceptible to side incursions from your
internal network. Common assault methods include:
 Phishing emails
 DDoS
 Torjan
You can increase the security of your server in the following ways:
 To limit access to servers, set physical and virtual access controls
 Installing and maintaining anti-virus and anti-malware programs
 Installing and maintaining firewalls
 Measures to detect and prevent intruders include
 Protect your data
 Back up important files regularly
Conclusion
Every organisation must invest in a server at some point, whether for growth, business
requirements, data security, or compliance. Although setting up a server isn’t difficult,
selecting a server that meets your business’s needs is the most important thing you need to do
to set up your self for online success. Here is hoping that you have understood how to set up a
server step by step for a small business. If you are getting a shared, VPS or even a dedicated
server, you can follow these steps and get your server ready.

Http Request and Response

HTTP Request:

An HTTP (Hypertext Transfer Protocol)

request is a fundamental part of web communications, forming the basis of data exchange on
the internet. It’s a protocol used for fetching resources, such as HTML documents, images,
and other files, from web servers. The communication between a client (like a web browser)
and a server occurs through these HTTP requests. Here’s a breakdown of how it works:
Request Line: An HTTP request starts with a request line, which includes the following:

Website:www.gedutech.net
mail: [email protected]
contact: +91 7676886524
+91 8712257211
 Global Education
Technology

 Method: This indicates the action to be performed on the resource. Common

methods include GET (retrieve a resource), POST (submit data to the server),

PUT (update a resource), DELETE (remove a resource), and others.

 Request URL: The URL of the resource being requested.

 HTTP Version: The version of the HTTP protocol being used.

What is HTTP?

HTTP (HyperText Transfer Protocol) is a protocol for transferring hypertext. It is a set of rules

for transferring data between computers and servers on the Internet. HTTP is the template for

data transfer requests. It consists of text only. However, it transfers all kinds of file formats,

such as video, audio, and text.

What is an HTTP request?

An HTTP protocol is based on a client/server architecture where a web browser, robot, search

engine, and so on act as HTTP clients, and the web server acts as a server. The session is a

sequence of request-response network operations. Structure of HTTP Request

Website:www.gedutech.net
mail: [email protected]
contact: +91 7676886524
+91 8712257211
 Global Education
Technology
HTTP Response:

An HTTP response is what a server sends back to the client after receiving and processing an

HTTP request. It is a key part of the data exchange in web communications, essentially being

the server’s answer to the client’s request. Here’s a breakdown of the components of an HTTP

response:

1. Status Line: This is the first line of the response and includes:

 HTTP Version: Indicates the HTTP protocol version used (e.g., HTTP/1.1).

 Status Code: A three-digit number that indicates the outcome of the request.

Common status codes include 200 (OK, request succeeded), 404 (Not Found, the

resource can’t be found), 500 (Internal Server Error), etc.

 Status Text: A brief, human-readable explanation of the status code (e.g., OK,

Not Found, Internal Server Error).

Website:www.gedutech.net
mail: [email protected]
contact: +91 7676886524
+91 8712257211
 Global Education
Technology

Routing And Middleware

What is routing?

Network routing is the process of selecting a path across one or more networks. The
principles of routing can apply to any type of network, from telephone networks to public
transportation. In packet-switching networks, such as the Internet, routing selects the paths
for Internet Protocol (IP) packets to travel from their origin to their destination. These
Internet routing decisions are made by specialized pieces of network hardware called routers.

Consider the image below. For a data packet to get from Computer A to Computer B, should
it pass through networks 1, 3, and 5 or networks 2 and 4? The packet will take a shorter path
through networks 2 and 4, but networks 1, 3, and 5 might be faster at forwarding packets than
2 and 4. These are the kinds of choices network routers constantly make.

How does routing work?

Routers refer to internal routing tables to make decisions about how to route packets along
network paths. A routing table records the paths that packets should take to reach every
destination that the router is responsible for. Think of train timetables, which train passengers
consult to decide which train to catch. Routing tables are like that, but for network paths
rather than trains.

Routers work in the following way: when a router receives a packet, it reads the headers* of
the packet to see its intended destination, like the way a train conductor may check a

Website:www.gedutech.net
mail: [email protected]
contact: +91 7676886524
+91 8712257211
 Global Education
Technology
passenger's tickets to determine which train they should go on. It then determines where to
route the packet based on information in its routing tables.

What are the main routing protocols?

In networking, a protocol is a standardized way of formatting data so that any connected

computer can understand the data. A routing protocol is a protocol used for identifying or
announcing network paths.

The following protocols help data packets find their way across the Internet:

IP: The Internet Protocol (IP) specifies the origin and destination for each data packet.
Routers inspect each packet's IP header to identify where to send them.

BGP: The Border Gateway Protocol (BGP) routing protocol is used to announce which
networks control which IP addresses, and which networks connect to each other. (The large
networks that make these BGP announcements are called autonomous systems.) BGP is a
dynamic routing protocol.

The below protocols route packets within an AS:

OSPF: The Open Shortest Path First (OSPF) protocol is commonly used by network routers
to dynamically identify the fastest and shortest available routes for sending packets to their
destination.

RIP: The Routing Information Protocol (RIP) uses "hop count" to find the shortest path from
one network to another, where "hop count" means number of routers a packet must pass
through on the way. (When a packet goes from one network to another, this is known as a
"hop.")

Other interior routing protocols include EIGRP (the Enhanced Interior Gateway Routing
Protocol, mainly for use with Cisco routers) and IS-IS (Intermediate System to Intermediate
System).

Website:www.gedutech.net
mail: [email protected]
contact: +91 7676886524
+91 8712257211
 Global Education
Technology

What Is Middleware?

Middleware is a layer of software that enables interaction and transmission of information

between assorted applications and services that make up a complex system, providing a
uniform user experience for clients.

Website:www.gedutech.net
mail: [email protected]
contact: +91 7676886524
+91 8712257211
 Global Education
Technology
Benefits of Middleware

Database

Database:
What is Database?


A database is an organized collection of data stored in a computer system and usually
controlled by a database management system (DBMS). The data in common databases is
modeled in tables, making querying and processing efficient. Structured query language (SQL)
is commonly used for data querying and writing.
The Database is an essential part of our life. We encounter several activities that involve our
interaction with databases, for example in the bank, in the railway station, in school, in a
grocery store, etc. These are the instances where we need to store a large amount of data in one
place and fetch these data easily.
What is Data?
Data is statically raw and unprocessed information. For example – name, class, marks, etc. In
computer language, a piece of information that can be translated into a form for efficient
movement and processing is called data. Data is interchangeable information.

Website:www.gedutech.net
mail: [email protected]
contact: +91 7676886524
+91 8712257211
 Global Education
Technology
What is a Database?
A database is a collection of data that is organized, which is also called structured data. It can
be accessed or stored in a computer system. It can be managed through a Database
Management System (DBMS), a software used to manage data. Database refers to related data
in a structured form.
Types of Databases
There are several types of databases, that are briefly explained below.
 Hierarchical databases
 Network databases
 Object-oriented databases
 Relational databases
 Cloud Database
 Centralized Database
 Operational Database
 NoSQL databases
Database Management System:
A Database Management System (DBMS) is a software system that is designed to manage
and organize data in a structured manner. It allows users to create, modify, and query a
database, as well as manage the security and access controls for that database.
DBMS provides an environment to store and retrieve the data in coinvent and efficient
manner.
Key Features of DBMS
 Data modeling: A DBMS provides tools for creating and modifying data
models, which define the structure and relationships of the data in a database.
 Data storage and retrieval: A DBMS is responsible for storing and retrieving
data from the database, and can provide various methods for searching and
querying the data.
 Concurrency control: A DBMS provides mechanisms for controlling
concurrent access to the database, to ensure that multiple users can access the
data without conflicting with each other.
 Data integrity and security: A DBMS provides tools for enforcing data
integrity and security constraints, such as constraints on the values of data and
access controls that restrict who can access the data.
 Backup and recovery: A DBMS provides mechanisms for backing up and
recovering the data in the event of a system failure.
 DBMS can be classified into two types: Relational Database Management
System (RDBMS) and Non-Relational Database Management System (NoSQL
or Non-SQL)
 RDBMS: Data is organized in the form of tables and each table has a set of rows
and columns. The data are related to each other through primary and foreign
keys.
 NoSQL: Data is organized in the form of key-value pairs, documents, graphs, or
column-based. These are designed to handle large-scale, high-performance
scenarios.

Website:www.gedutech.net
mail: [email protected]
contact: +91 7676886524
+91 8712257211
 Global Education
Technology
Database Languages
 Data Definition Language
 Data Manipulation Language
 Data Control Language
 Transactional Control Language
Data Definition Language
DDL is the short name for Data Definition Language, which deals with database schemas
and descriptions, of how the data should reside in the database.
 CREATE: to create a database and its objects like (table, index, views, store
procedure, function, and triggers)
 ALTER: alters the structure of the existing database
 DROP: delete objects from the database
 TRUNCATE: remove all records from a table, including all spaces allocated for
the records are removed
 COMMENT: add comments to the data dictionary
 RENAME: rename an object
Data Manipulation Language
DML is the short name for Data Manipulation Language which deals with data manipulation
and includes most common SQL statements such SELECT, INSERT, UPDATE, DELETE,
etc., and it is used to store, modify, retrieve, delete and update data in a database.
 SELECT: retrieve data from a database
 INSERT: insert data into a table
 UPDATE: updates existing data within a table
 DELETE: Delete all records from a database table
 MERGE: UPSERT operation (insert or update)
 CALL: call a PL/SQL or Java subprogram
 EXPLAIN PLAN: interpretation of the data access path
 LOCK TABLE: concurrency Control
Data Control Language
DCL is short for Data Control Language which acts as an access specifier to the
database.(basically to grant and revoke permissions to users in the database
 GRANT: grant permissions to the user for running DML(SELECT, INSERT,
DELETE,…) commands on the table
 REVOKE: revoke permissions to the user for running DML(SELECT,
INSERT, DELETE,…) command on the specified table
Transactional Control Language
TCL is short for Transactional Control Language which acts as an manager for all types of
transactional data and all transactions. Some of the command of TCL are
 Roll Back: Used to cancel or Undo changes made in the database
 Commit: It is used to apply or save changes in the database
 Save Point: It is used to save the data on the temporary basis in the database
Data retrieval language:
DRL is short for Data Retrieval Language which is used for retrieval of data. It can also be
said as DML.
 SELECT: Used for extracting the required data.

Website:www.gedutech.net
mail: [email protected]
contact: +91 7676886524
+91 8712257211
 Global Education
Technology

Connecting database to web development Requirements:

How to link databases to a website?

To link databases to websites, this process can involve connecting the database, the backend
server to the frontend with a server side scripting language such as PHP to present data on
websites.

1. Prepare your database user account details

Details about your database account will be necessary to set up the connection to the website.
Ensure to have the credentials before establishing the connection.

2. Connect to your database

You might need to use one or more server side scripts to connect to your database. The
process for making a connection is similar for most database systems and programming
languages.

3. Query your data

Using SQL to retrieve specific data from databases with SQL queries that will be executable
with server side scripts and languages.

4. Output your data

After getting the data from the database, you can begin to present the data to the website
pages which are structured in HTML format.

5. Test your script and present the data

Make sure to test your script before presenting the data online to check if the script is
completed. Edit and update your script when you encounter errors. After confirming the
completeness and accuracy of the script, you can establish the connection between the
database and the website to present the data to your users.

Website:www.gedutech.net
mail: [email protected]
contact: +91 7676886524
+91 8712257211
Global Education
Technology

Website:www.gedutech.net
mail: [email protected]
contact: +91 7676886524
+91 8712257211
Global Education
Technology

Website:www.gedutech.net
mail: [email protected]
contact: +91 7676886524
+91 8712257211
Global Education
Technology

Website:www.gedutech.net
mail: [email protected]
contact: +91 7676886524
+91 8712257211
Global Education
Technology

Website:www.gedutech.net
mail: [email protected]
contact: +91 7676886524
+91 8712257211