Web Development Process, Front End Tools

Syllabus: Introduction to web technology, internet and www, Web site planning and design
issues, HTML: structure of html document , HTML elements: headings, paragraphs, line break,
colors & fonts, links, frames, lists, tables, images and forms, Difference between HTML and
HTML5. CSS: Introduction to Style Sheet, Inserting CSS in an HTML page, CSS selectors, XML:
Introduction to XML, XML key component, Transforming XML into XSLT, DTD: Schema,
elements, attributes, Introduction to JSON.

1. Internet and WWW

Internet
The Internet is the global system of interconnected computer networks that use the Internet
protocol suite (TCP/IP) to link devices worldwide.
It is a network of networks that consists of private, public, academic, business, and government
networks of local to global scope, linked by a broad array of electronic, wireless, and optical
networking technologies.
The Internet carries a vast range of information resources and services, such as the inter-
linked hypertext documents and applications of the World Wide Web (WWW), electronic
mail, telephony, and file sharing.
WWW
The World Wide Web (abbreviated WWW or the Web) is an information space where
documents and other web resources are identified by Uniform Resource Locators (URLs),
interlinked by hypertext links, and can be accessed via the Internet.
Web pages are primarily text documents formatted and annotated with Hypertext Markup
Language.

1.1 Difference Between Internet and WWW

1.2. Web site planning and design issues
Main technical issues in web design
Before you create a website, you should consider the technical issues relating to web design,
specifically:
1.1. Browser issues
WebPages should be able to display across different browsers, including Internet Explorer,
Firefox, Safari and Chrome.
1.2. Screen resolutions
The most common screen resolution is 1024 x 768 pixels, although there is a growing trend
towards higher resolutions. If you design your website for a higher resolution, some low-
resolution screens may not be able to display all of the content.
It is worth keeping in mind from the start your mobile users. Consider how your site will
appear when it is accessed from mobile devices.
1.3 Download speeds
Not all internet users have high-speed access, so connection speed should also influence your
webpage design. Research suggests that:
 nearly half of web users expect a webpage to load in 2 seconds or less
 40 per cent of people abandon a website that takes more than 3 seconds to load
Too many images or rich media - such as animations or video - will slow down the speed at
which your webpage loads. This can result in your customers leaving the site. Since page speed
is a ranking factor, slow speeds can also hurt your search ranking.
Try to keep file and image sizes to a minimum. The total size of a webpage should be no more
than 40 to 60 kilobytes.
1.4 Technology
Some web technologies can prevent users from viewing your site or affect indexing of your
website by search engines. These include:
 HTML frames
 JavaScript
 Flash
 AJAX
If using any of these technologies, consider the potential risks to the usability and accessibility of
your website.
1.5 What must your website deliver for you?
Defining the objectives of your website is vital. If you are a startup, ideally you should have
some preliminary ideas before you talk to a web design house; if you are re-working or
completely redesigning your website then you probably have some idea of what went right, what
went wrong and where it should go in the future.
The following are typical objectives for a website:
 Brochure - showing what you do: goods and services
 Commerce - selling goods or services
 CRM - keeping the customer happy, encouraging return visits
  Decision support - helping the prospect decide what to buy (this can be for both online
and offline sales)
 Product support - increase effectiveness and reduce costs of supporting your wares and
services
 Extranet - ring-fenced area for resellers, partners, etc to transact business or run a virtual
office
 Intranets - typically remote working on centrally-held files or updating timesheets of staff
working away
 Reference - provision of (usually) non-commercial data like technical specifications,
statistics or reports
 A combination of the above.
Within each of the above items there is usually a set of sub-objectives.

1.6 Budgeting
The budget has to cover (at the very least):
 Planning - setting out requirements and perhaps a specification
 Design
 Implementation - including databases, associated support software, integration with
existing systems
 Testing - both functional and cross-platform compatibility
 Launch - deployment of component parts, website configuration
 Operational costs - hosting, marketing, CRM, secure certificate
 Website content management - in-house, out-of-house.
Frequently thought is only given to the design element, but some websites may require web
forms, databases, and perhaps integration with an existing sales order processing system. Some
calculation has to be done on the likely returns on investment for a commercial website to keep
the expenditure appropriate.
1.7 Commerce
There are specific issues with commerce that can cause problems. Apart from selling something
downloadable like software or reports (which are infinitely available) any other system has to
take account of stock either in-house or from a wholesaler. Even selling software presents its
own issues because a number of people making a simultaneous download of a 25Mb app may
have a serious impact on the performance of the server, not just for the visitors doing the
downloads, but also for any others visiting the website.
Some of the issues are:
 Shopping systems - product management, price list management, baskets, special offers,
affiliate schemes
 Payment handling - credit card, payment service provider, credit transfer and whether
manual or automatic
 Credit card transactions - merchant ID, AVS (address verification system)
 Secure certificates
  Drop shipping - shipping directly from a wholesaler
 Integration with your existing sales order processing system
 Serial number management (software sales only)
 VAT processing - place of supply, place of delivery considerations, EU issues
 Terms and conditions, copyright, privacy policy and securing 'personal information'.

1.8 Operational Planning Issue

Where are you going to host your website? The USA can be apparently cheap but if your
market is mostly based in the Europe or Australia it takes longer to get pages, images, etc down
submarine cables to your visitors and this can have a perceptible effect on website performance.
Studies have shown that this affects sales.
If it's likely that your website traffic will have large peaks (hundreds of thousands or millions
of pages per hour) followed by quiescent periods, then you should consider a scalable solution in
the 'cloud'.
2. HTML
HTML stands for Hyper Text Markup Language, which is the most widely used language on
Web to develop web pages. HTML was created by Berners-Lee in late 1991 but "HTML 2.0"
was the first standard HTML specification which was published in 1995. HTML 4.01 was a
major version of HTML and it was published in late 1999. Though HTML 4.01 version is widely
used but currently we are having HTML-5 version which is an extension to HTML 4.01, and this
version was published in 2012.
 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.
2.1 Basic HTML Document
<!DOCTYPE html>
<html>
<head>
<title>This is document
title</title>
</head>
<body>
<h1>This is a
heading</h1>
<p>Document content goes
here.....</p>
</body>
</html>

Tag & Description

<!DOCTYPE...> This tag defines the document type and HTML version.

<html> This tag encloses the complete HTML document and mainly comprises of
document header which is represented by <head>...</head> and document body which is
represented by <body>...</body> tags.

<head> This tag represents the document's header which can keep other HTML tags like
<title>, <link> etc.

<title> The <title> tag is used inside the <head> tag to mention the document title.

<body> This tag represents the document's body which keeps other HTML tags like <h1>,
<div>, <p> etc.

<h1> This tag represents the heading.

 <p> This tag represents a paragraph.
2.2 HTML - Basic Tags
2.2.1 Heading Tags
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.
<body> This is heading 1
<h1>This is heading 1</h1>
<h2>This is heading 2</h2> This is heading 2
<h3>This is heading 3</h3> This is heading 3
<h4>This is heading 4</h4>
<h5>This is heading 5</h5> This is heading 4
<h6>This is heading 6</h6>
</body> This is heading 5

This is heading 6

2.2.2 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 as shown below in the example −
<body>
<p>Here is a first paragraph of text.</p>
<p>Here is a second paragraph of text.</p>
<p>Here is a third paragraph of text.</p>
</body>
2.2.3 Line Break Tag
Whenever you use the <br /> element, anything following it starts from the next line. This tag is
an example of an emptyelement, where you do not need opening and closing tags, as there is
nothing to go in between them.
You delivered your assignment ontime.<br />

2.2.4 Centering Content

You can use <center> tag to put any content in the center of the page or any table cell.
<center>
<p>This text is in the center.</p>
</center>

2.2.5 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.
<body>
<p>This is paragraph one and should be on top</p>
<hr />
<p>This is paragraph two and should be at bottom</p>
</body>
2.3 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.

2.3.1 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.

2.3.1.1 Color Names

You can specify direct a color name to set text or background color. W3C has listed 16 basic
color names that will validate with an HTML validator but there are over 200 different color
names supported by major browsers.
<body text = "blue" bgcolor = "green">
<p>Use different color names for for body and table and see the
result.</p>

<table bgcolor = "black">

<tr>
<td>
<font color = "white">This text will appear white on
black background.</font>
</td>
</tr>
</table>
</body>
2.3.1.2 Hex Codes
A hexadecimal is a 6 digit representation of a color. The first two digits(RR) represent a red
value, the next two are a green value(GG), and the last are the blue value(BB).
<body text = "#0000FF" bgcolor = "#00FF00">
<p>Use different color hexa for for body and table and see the
result.</p>

<table bgcolor = "#000000">

<tr>
<td>
<font color = "#FFFFFF">This text will appear white on
black background.</font>
</td>
</tr>
</table>
</body>

2.3.1.3 RGB Values

This color value is specified using the rgb( ) property. This property takes three values, one each
for red, green, and blue. The value can be an integer between 0 and 255 or a percentage.
<body text = "rgb(0,0,255)" bgcolor = "rgb(0,255,0)">
<p>Use different color code for for body and table and see the
result.</p>

<table bgcolor = "rgb(0,0,0)">

<tr>
<td>
<font color = "rgb(255,255,255)">This text will appear
white on black background.</font>
</td>
</tr>
</table>
</body>
2.4 Fonts
The font tag is having three attributes called size, color, and face to customize your fonts. To
change any of the font attributes at any time within your webpage, simply use the <font> tag.
The text that follows will remain changed until you close with the </font> tag. You can change
one or all of the font attributes within one <font> tag.

2.4.1 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.
<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>

2.4.2 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">
<body>
<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>
</body>

2.4.3 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.
<body>
<font face = "Times New Roman" size = "5">Times New
Roman</font><br />
<font face = "Verdana" size = "5">Verdana</font><br />
<font face = "Comic sans MS" size =" 5">Comic Sans MS</font><br
/>
<font face = "WildWest" size = "5">WildWest</font><br />
<font face = "Bedrock" size = "5">Bedrock</font><br />
</body>
2.4.4 Specify alternate font faces
A visitor will only be able to see your font if they have that font installed on their computer. So,
it is possible to specify two or more font face alternatives by listing the font face names,
separated by a comma.
<font face = "arial,helvetica">
<font face = "Lucida Calligraphy,Comic Sans MS,Lucida Console">

2.4.5 Font Color

You can set any font color you like using color attribute. You can specify the color that you want
by either the color name or hexadecimal code for that color.
<body>
<font color = "#FF00FF">This text is in pink</font><br />
<font color = "red">This text is red</font>
</body>
2.5 HTML Links

HTML links are hyperlinks. A hyperlink is a text or an image you can click on, and jump to
another document.
Example

<a href="http://www.w3schools.com/html/">Visit our HTML tutorial</a>

2.5.1 HTML Links - Colors

When you move the mouse over a link, two things will normally happen:
 The mouse arrow will turn into a little hand
 The color of the link element will change
By default, a link will appear like this (in all browsers):
 An unvisited link is underlined and blue
 A visited link is underlined and purple
 An active link is underlined and red
Example:

<!DOCTYPE html>
<html>
<head>
<style>
a:link {
color: green; When Mouse Over The Link
background-color: transparent;
text-decoration: none;
}
a:visited {
color: pink;
background-color: transparent;
text-decoration: none;
}
a:hover {
color: red;
background-color: transparent;
text-decoration: underline;
}
a:active {
color: yellow;
background-color: transparent;
text-decoration: underline;
}
</style>
</head>
<body>
<p>You can change the default colors
of links</p>
<a href="html_images.asp"
target="_blank">HTML Images</a>
 </body></html>

2.5.2 HTML Links - Image as Link

<a href="default.asp">
<img src="smiley.gif" alt="HTML tutorial"
style="width:42px;height:42px;border:0">
</a>
2.6 HTML Images

2.6.1 HTML Images Syntax

In HTML, images are defined with the <img> tag. The <img> tag is empty, it contains attributes
only, and does not have a closing tag. The src attribute specifies the URL (web address) of the
image:

2.6.2 The alt Attribute

The alt attribute specifies an alternate text for an image, if the image cannot be displayed. The alt
attribute provides alternative information for an image if a user for some reason cannot view it
(because of slow connection, an error in the src attribute, or if the user uses a screen reader). If a
browser cannot find an image, it will display the alt text:

<img src="wrongname.gif" alt="HTML5 Icon"

style="width:128px;height:128px;">
Example:

<!DOCTYPE html>
<html>
<body>
<p>If a browser cannot find an image,
it will display the alternate text:</
p>
<img src="wrongname.gif" alt="HTML5
Icon"
style="width:128px;height:128px;">
</body>
</html>

2.6.3 Images in Another Folder

If not specified, the browser expects to find the image in the same folder as the web page.
However, it is common to store images in a sub-folder. You must then include the folder name in
the src attribute:
Example:

<img src="/images/html5.gif" alt="Icon"

style="width:128px;height:128px;">

2.6.4 Animated Images

The GIF standard allows animated images:
Example:

<img src="programming.gif" alt="ComputerMan"

style="width:48px;height:48px;">
2.6.5 Image Floating
Use the CSS float property to let the image float. The image can float to the right or to the left of
a text:
<!DOCTYPE html>
<html>
<body>

<p><strong>Float the image to the right:</strong></p>

<p><img src="smiley.gif" alt="Smiley face"
style="float:right;width:42px; height:42px;">
A paragraph with a floating image. A paragraph with a floating image.
A paragraph with a floating image.
</p>
<p><strong>Float the image to the left:</strong></p>
<p>
<img src="smiley.gif" alt="Smiley face" style="float:left;width:42px;
height:42px;">
A paragraph with a floating image. A paragraph with a floating image.
A paragraph with a floating image.
</p>
<p>Please use the CSS float property. The align attribute is
deprecated in HTML 4, and not supported in HTML5.</p>
</body>
</html>
2.7 HTML Tables

Tables are defined with the <table> tag.

Tables are divided into table rows with the <tr> tag.
Table rows are divided into table data with the <td> tag.
A table row can also be divided into table headings with the <th> tag.

2.7.1 An HTML Table with a Border Attribute

If you do not specify a border for the table, it will be displayed without borders. A border can be
added using the border attribute:
Example

<table border="1"
style="width:100%">
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
</table>
2.7.2 Cell Padding
Cell padding specifies the space between the cell content and its borders. If you do not specify a
padding, the table cells will be displayed without padding. To set the padding, use the CSS
padding property:
<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
th, td {
padding: 15px;
}
</style>
</head>
<body>
<table style="width:100%">
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
<tr>
<td>John</td>
<td>Doe</td>
<td>80</td>
</tr>
</table>
<p>Try to change the padding to
5px.</p>
</body>
</html>
2.7.3 Border Spacing
Border spacing specifies the space between the cells. To set the border spacing for a table, use
the CSS border-spacing property:
<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
border:1px solid
black;
padding:5px;
}
table {
border-spacing:
15px;
}
</style>
</head>
<body>
<table
style="width:100%">
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
<tr>
<td>John</td>
<td>Doe</td>
<td>80</td>
</tr>
</table>
<p>Try to change the
border-spacing to 5px.</
p>
</body>
</html>
2.7.4 Table Cells that Span Many Columns
To make a cell span more than one column, use the colspan attribute:
<style>
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
th, td {
padding: 5px;
text-align: left;
}
</style>
</head>
<body>
<h2>Cell that spans two columns:</h2>
<table style="width:100%">
<tr>
<th>Name</th>
<th colspan="2">Telephone</th>
</tr>
<tr>
<td>Bill Gates</td>
<td>555 77 854</td>
<td>555 77 855</td>
</tr>
</table>
</body>
</html>
2.8 HTML Lists

2.8.1 Unordered HTML Lists

An unordered list starts with the <ul> tag. Each list item starts with the <li> tag. The list items
will be marked with bullets (small black circles):
<!DOCTYPE html>
<html>
<body>
<h2>Unordered List</h2>
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
</body>
</html>

2.8.2 Unordered HTML Lists - The Style Attribute

A style attribute can be added to an unordered list, to define the style of the marker:
Style Description
list-style-type:disc The list items will be marked with bullets (default)
list-style-type:circle The list items will be marked with circles
list-style-type:square The list items will be marked with squares
list-style-type:none The list items will not be marked

<!DOCTYPE html>
<html>
<body>
<h2>Unordered List </h2>
<ul style="list-style-type:disc">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
</body>
</html>
2.8.3 Ordered HTML Lists
An ordered list starts with the <ol> tag. Each list item starts with the <li> tag. The list items will
be marked with numbers:
<!DOCTYPE html> Ordered List
<html> 1. Coffee
<body> 2. Tea
<h2>Ordered List</h2> 3. Milk
<ol>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
</body>
</html>

2.8.4 Ordered HTML Lists - The Type Attribute

A type attribute can be added to an ordered list, to define the type of the marker:
Type Description
type="1" The list items will be numbered with numbers (default)
type="A" The list items will be numbered with uppercase letters
type="a" The list items will be numbered with lowercase letters
type="I" The list items will be numbered with uppercase roman numbers
type="i" The list items will be numbered with lowercase roman numbers

<!DOCTYPE html>
<html>
<body>
<h2>Ordered List with Numbers</h2>
<ol type="1">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
</body>
</html>
2.8.5 Description Lists
HTML also supports description lists. A description list is a list of terms, with a description of
each term. The <dl> tag defines the description list, the <dt> tag defines the term (name), and
the <dd> tag describes each term:
<!DOCTYPE html>
<html><body>
<h2>A Description List</h2>
<dl>
<dt>Coffee</dt>
<dd>- black hot drink</dd>
<dt>Milk</dt>
<dd>- white cold drink</dd>
</dl>
</body></html>

<!DOCTYPE html>
<html>
<head>
<style>
ul#menu {
padding: 0;
}
ul#menu li {
display: inline;
}
ul#menu li a {
background-color: black;
color: white;
padding: 10px 20px;
text-decoration: none;
border-radius: 4px 4px 0 0;
}
ul#menu li a:hover {
background-color: orange;
}
</style>
</head>
<body>
<h2>Horizontal List</h2>
<ul id="menu">
<li><a
href="/html/default.asp">HTML</a></li>
<li><a href="/css/default.asp">CSS</a></
li>
<li><a
href="/js/default.asp">JavaScript</a></li>
<li><a href="/php/default.asp">PHP</a></
li>
</ul>
 </body>
</html>
2.9 <div> Element
The <div> element is a block-level element that is often used as a container for other HTML
elements. The <div> element has no required attributes, but style and class are common. When
used together with CSS, the <div> element can be used to style blocks of content:
<!DOCTYPE html>
<html>
<body>
<div style="background-color:black; color:white; padding:20px;">
<h2>London</h2>
<p>London is the capital city of England. It is the most populous city
in the United Kingdom, with a metropolitan area of over 13 million
inhabitants.</p>
<p>Standing on the River Thames, London has been a major settlement
for two millennia, its history going back to its founding by the
Romans, who named it Londinium.</p>
</div>
</body>
</html>

2.10 The <span> Element

The <span> element is an inline element that is often used as a container for some text. The
<span> element has no required attributes, but style and class are common. When used together
with CSS, the <span> element can be used to style parts of the text:
<!DOCTYPE html>
<html>
<body>
<h1>My <span style="color:red">Important</span> Heading</h1>
</body>
</html>
2.11 HTML Iframes

An iframe is used to display a web page within a web page.

<!DOCTYPE html>
<html>
<body>
<iframe src="demo_iframe.htm" width="200" height="200"></iframe>
</body>
</html>

<!DOCTYPE html>
<html>
<body>
<iframe width="100%" height="300px" src="demo_iframe.htm"
name="iframe_a"></iframe>
<p><a href="http://www.w3schools.com"
target="iframe_a">W3Schools.com</a></p>
<p>When the target of a link matches the name of an iframe, the link
will open in the iframe.</p>
</body>
</html>
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.
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.
<html>
<frameset cols="25%,*,25%">
<frame src="frame_a.htm">
<frame src="frame_b.htm">
<frame src="frame_c.htm">
</frameset>

</html>

<!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>
2.12. The <form> Element
HTML forms are used to collect user input. The <form> element defines an HTML form:

2.12.1 The <input> Element

The <input> element is the most important form element. The <input> element has many
variations, depending on the type attribute.

<html>
<body>
<form>
First name:<br>
<input type="text" name="fname">
<br>
Last name:<br>
<input type="text" name="lname">
</form>
</body>
</html>

2.12.2 Radio Button Input

<input type="radio"> defines a radio button. Radio buttons let a user select ONE of a limited
number of choices:

<html>
<body>
<form>
<input type="radio"
name="gender" value="male"
checked> Male<br>
<input type="radio"
name="gender" value="female">
Female<br>
<input type="radio"
name="gender" value="other"> Other
</form>
</body>
</html>

2.12.3 The Submit Button

<input type="submit"> defines a button for submitting a form to a form-handler. The form-
handler is typically a server page with a script for processing input data.
<html><body>
<form action="action_page.php">
First name:<br>
<input type="text" name="fname"
value="Mickey"><br>
Last name:<br>
<input type="text" name="lname"
 value="Mouse"><br> <input type="submit"
value="Submit">
</form>
</body></html>
2.12.4 The Action Attribute
The action attribute defines the action to be performed when the form is submitted. The
common way to submit a form to a server, is by using a submit button. Normally, the form is
submitted to a web page on a web server.
<form action="action_page.php">

2.12.5 The Method Attribute

The method attribute specifies the HTTP method (GET or POST) to be used when submitting
the forms:
<form action="action_page.php" method="get">

2.12.6 The Name Attribute

To be submitted correctly, each input field must have a name attribute.
<input type="text" name="lastname" value="Mouse">
2.13. HTML Form Elements

2.13.1 The <select> Element (Drop-Down List)

<!DOCTYPE html>
<html>
<body>
<form action="action_page.php">
<select name="cars">
<option value="volvo">Volvo </
option>
<option value="saab">Saab
</option>
<option value="fiat">Fiat
</option>
<option value="audi">Audi
</option>
</select> <br><br>
<input type="submit">
</form>
</body>
</html>

2.13.2 The <textarea> Element

The <textarea> element defines a multi-line input field (a text area):
<html><body>
<form action="action_page.php">
<textarea name="message" rows="10"
cols="30">
The cat was playing in the garden.
</textarea> <br>
<input type="submit">
</form>
</body></html>

2.13.3 The <button> Element

The <button> element defines a clickable button:
<html>
<body>
<button type="button" onclick="alert('Hello World!')">Click
Me!</button>
</body>
</html>
2.14. HTML Input Types

2.14. 1 Input Type: checkbox

<input type="checkbox"> defines a checkbox. Checkboxes let a user select ZERO or MORE
options of a limited number of choices.

<!DOCTYPE html>
<html>
<body>
<form action="action_page.php">
<input type="checkbox" name="vehicle1" value="Bike">I
have a bike
<br>
<input type="checkbox" name="vehicle2" value="Car">I
have a car
<br><br>
<input type="submit">
</form>
</body>
</html>

2.14. 2 Input Type: number

The <input type="number"> is used for input fields that should contain a numeric value. You
can set restrictions on the numbers. Depending on browser support, the restrictions can apply to
the input field.
<!DOCTYPE html>
<html>
<body>
<form action="action_page.php">
Quantity:
<input type="number" name="points"
min="0" max="100" step="10" value="30">
<input type="submit">
</form>
</body>
</html>
 2.14. 3 Input Type: color
The <input type="color"> is used for input fields that should contain a color. Depending on
browser support, a color picker can show up in the input field.
<!DOCTYPE html>
<html>
<body>
<form action="action_page.php">
Select your favorite color:
<input type="color"
name="favcolor" value="#ff0000">
<input type="submit">
</form>
</body>
</html>

2.14. 4 Input Type: range

The <input type="range"> is used for input fields that should contain a value within a range.
Depending on browser support, the input field can be displayed as a slider control.
<!DOCTYPE html>
<html>
<body>
<form action="action_page.php" method="get">
Points:
<input type="range" name="points" min="0" max="10">
<input type="submit">
</form>
</body>
</html>

2.14. 5 Input Type: email

The <input type="email"> is used for input fields that should contain an e-mail address.
Depending on browser support, the e-mail address can be automatically validated when
submitted. Some smartphones recognize the email type, and adds ".com" to the keyboard to
match email input.
<html><body>
<form action="action_page.php">
E-mail:
<input type="email" name="email">
<input type="submit">
</form>
</body></html>
2.14. 6 Input Type: url
The <input type="url"> is used for input fields that should contain a URL address. Depending
on browser support, the url field can be automatically validated when submitted. Some
smartphones recognize the url type, and adds ".com" to the keyboard to match url input.
<!DOCTYPE html>
<html>
<body>
<form action="action_page.php">
Add your homepage:
<input type="url" name="homepage">
<input type="submit">
</form>
</body>
</html>
3. CSS
3.1 What is CSS?
 CSS stands for Cascading Style Sheets
 CSS describes how HTML elements are to be displayed on screen, paper, or in other
media
 CSS saves a lot of work. It can control the layout of multiple web pages all at once
 External stylesheets are stored in CSS files
 CSS is used to define styles for your web pages, including the design, layout and
variations in display for different devices and screen sizes.

3.2 CSS Syntax:

A CSS rule-set consists of a selector and a declaration block:

 The selector points to the HTML element you want to style.

 The declaration block contains one or more declarations separated by semicolons.
 Each declaration includes a CSS property name and a value, separated by a colon.
 A CSS declaration always ends with a semicolon, and declaration blocks are surrounded
by curly braces.

3.3 CSS Selectors:

CSS selectors are used to "find" (or select) HTML elements based on their element name, id,
class, attribute, and more.

3.3.1 The element Selector

The element selector selects elements based on the element name. You can select all <p>
elements on a page like this (in this case, all <p> elements will be center-aligned, with a red text
color):
<!DOCTYPE html>
<html><head>
<style>
p {
color: red;
text-align: center;
}
</style>
</head>
<body>
<p>Hello World!</p>
<p>This paragraph is styled with
CSS.</p>
</body>
</html>
3.3.2 The id Selector
The id selector uses the id attribute of an HTML element to select a specific element.
The id of an element should be unique within a page, so the id selector is used to select one
unique element!
To select an element with a specific id, write a hash (#) character, followed by the id of the
element.
The style rule below will be applied to the HTML element with id="para1".

<!DOCTYPE html>
<html>
<head>
<style>
#para1 {
text-align: center;
color: red;
}
</style>
</head>
<body>
<p id="para1">Hello World!</p>
<p>This paragraph is not
affected by the style.</p>
</body>
</html>

3.3.3 The class Selector:

The class selector selects elements with a specific class attribute.
To select elements with a specific class, write a period (.) character, followed by the name of the
class.
In the example below, all HTML elements with class="center" will be red and center-aligned.

<!DOCTYPE html>
<html><head>
<style>
.center {
text-align: center;
color: red;
}
</style>
</head>
<body>
<h1 class="center">Red and center-
aligned heading</h1>
<p class="center">Red and center-
aligned paragraph.</p>
</body></html>

You can also specify that only specific HTML elements should be affected by a class.
In the example below, only <p> elements with class="center" will be center-aligned:
<!DOCTYPE html>
<html>
<head>
<style>
p.center {
text-align: center;
color: red;
}
</style>
</head>
<body>

<h1 class="center">This heading

will not be affected</h1>
<p class="center">This paragraph
will be red and center-aligned.</
p>

</body>
</html>
3.4 Types:
3.4.1 External Style Sheet:
With an external style sheet, you can change the look of an entire website by changing just one
file. An external style sheet can be written in any text editor. The file should not contain any html
tags. The style sheet file must be saved with a .css extension. Each page must include a reference
to the external style sheet file inside the <link> element. The <link> element goes inside the
<head> section:
mystyle.css
body {
background-color:
lightblue;
}
h1 {
color: navy;
margin-left: 20px;
}

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

3.4.2 Internal Style Sheet:

An internal style sheet may be used if one single page has a unique style. Internal styles are
defined within the <style> element, inside the <head> section of an HTML page:
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: linen;
}
h1 {
color: maroon;
margin-left: 40px;
}
</style>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body></html>
3.4.3 Inline Styles:
An inline style may be used to apply a unique style for a single element.
To use inline styles, add the style attribute to the relevant element. The style attribute can contain
any CSS property.
The example below shows how to change the color and the left margin of a <h1> element:
<!DOCTYPE html>
<html>
<body>
<h1 style="color:blue; margin-
left:30px;"> This is a heading.
</h1>
<p>This is a paragraph.</p>
</body>
</html>

3.4.4 Cascading Order:

What style will be used when there is more than one style specified for an HTML element?
Generally speaking we can say that all the styles will "cascade" into a new "virtual" style sheet
by the following rules, where number one has the highest priority:
1. Inline style (inside an HTML element)
2. External and internal style sheets (in the head section)
3. Browser default
So, an inline style (inside a specific HTML element) has the highest priority, which means that it
will override a style defined inside the <head> tag, or in an external style sheet, or a browser
default value.
3.5 CSS Colors

Colors in CSS are most often specified by:

 a valid color name - like "red"
 an RGB value - like "rgb(255, 0, 0)"
 a HEX value - like "#ff0000"

<!DOCTYPE html>
<html>
<body>
<h2>Color Names Examples</h2>
<p>Note: You will learn more about the
background-color and the color property later
in our tutorial.</p>
<h2 style="background-color:red">
Red background-color</h2>
<h2 style="background-color:blue;color:white">
Blue background-color and white text color</h2>
</body>
</html>

<!DOCTYPE html>
<html>
<body>
<h2>RGB Color Examples</h2>
<h2 style="background-color:rgb(255, 0,
0)">
Background-color set by using rgb(255, 0,
0)
</h2>
</body>
</html>

<!DOCTYPE html>
<html>
<body>
<h2>HEX Color Examples</h2>
<h2 style="background-color:#FF0000">
Background-color set by using #FF0000
</h2>
</body>
</html>
3.6 CSS Backgrounds

The CSS background properties are used to define the background effects for elements.
CSS background properties:
 background-color
 background-image
 background-repeat
 background-attachment
 background-position

3.6.1 Background Color(background-color: lightblue;)

<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: lightblue;
}
</style>
</head>
<body>
<h1>Hello World!</h1>
<p>This page has a background
color!</p>
</body>
</html>

3.6.2 Background Image(background-image: url("paper.gif");)

<!DOCTYPE html>
<html>
<head>
<style>
body {
background-image:
url("paper.gif");
}
</style>
</head>
<body>
<h1>Hello World!</h1>
<p>This page has an image as the
background!</p>
</body>
</html>
3.6.3 Background Image - Repeat Horizontally or Vertically

<!DOCTYPE html>
<html>
<head>
<style>
body {
background-
image:url("gradient_bg.png");
background-repeat: repeat-x;
}
</style>
</head>
<body>
<h1>Hello World!</h1>
<p>Here, a backgound image is repeated
only horizontally!</p>
</body>
</html>

3.6.4 Background Image - Set position and no-repeat

<!DOCTYPE html>
<html>
<head>
<style>
body {
background-image:
url("img_tree.png");
background-repeat: no-repeat;
background-position: right top;
margin-right: 200px;
}
</style>
</head>
<body>
<h1>Hello World!</h1>
<p>background no-repeat, set position
example.</p>
<p>Now the background image is only shown
once, and positioned away from the
text.</p>
<p>In this example we have also added a
margin on the right side, so the
background image will never disturb the
text.</p>
</body></html>
3.6.5 Background - Shorthand property
To shorten the code, it is also possible to specify all the background properties in one single
property. This is called a shorthand property.
<!DOCTYPE html>
<html><head>
<style>
body {
background: #ffffff
url("img_tree.png") no-repeat right top;
margin-right: 200px;
}
</style>
</head>
<body>
<h1>Hello World!</h1>
<p>Now the background image is only shown
once, and it is also positioned away from
the text.</p>
</body></html>
4. XML
XML stands for Extensible Markup Language and is a text-based markup language derived from
Standard Generalized Markup Language (SGML).
 XML is extensible − XML allows you to create your own self-descriptive tags, or
language, that suits your application.
 XML carries the data, does not present it − XML allows you to store the data irrespective
of how it will be presented.
 XML is a public standard − XML was developed by an organization called the World
Wide Web Consortium (W3C) and is available as an open standard.

4.1 Difference Between XML and HTML

XML and HTML were designed with different goals:
 XML was designed to carry data - with focus on what data is
 HTML was designed to display data - with focus on how data looks
 XML is often used to separate data from presentation.
 XML tags are not predefined like HTML tags are

4.2 XML Syntax Rules

1. XML Documents Must Have a Root Element: XML documents must contain
one root element that is the parent of all other elements
<root>
<child>
<subchild>.....</subchi
ld>
</child>
</root>
2. XML Declaration: The XML document can optionally have an XML declaration. It is
written as follows
<?xml version = "1.0" encoding = "UTF-8"?>
Syntax Rules for XML Declaration
 The XML declaration is case sensitive and must begin with "<?xml>" where "xml" is
written in lower-case.
 If document contains XML declaration, then it strictly needs to be the first statement
of the XML document.
 The XML declaration strictly needs be the first statement in the XML document.
 An HTTP protocol can override the value of encoding that you put in the XML
declaration.

3. All XML Elements Must Have a Closing Tag :In HTML, some elements might work
well, even with a missing closing tag, In XML, it is illegal to omit the closing tag. All
elements must have a closing tag.

4. XML Tags are Case Sensitive : XML tags are case sensitive. The tag <Letter> is
different from the tag <letter>. Opening and closing tags must be written with the same
case
5. XML Elements Must be Properly Nested: In HTML, you might see improperly nested
elements:
<b><i>This text is bold and italic</
b></i>
XML Elements Must be Properly Nested.
<note>
<to>Tove</to>
<from>Jani</from>
<heading>Reminder</heading>
<body>Don't forget me this weekend!
</body>
</note>

6. XML Attribute Values Must be Quoted :XML elements can have attributes in
name/value pairs just like in HTML. In XML, the attribute values must always be quoted.
<note date="12/11/2007">
<to>Tove</to>
<from>Jani</from>
</note>

7. Entity References : Some characters have a special meaning in XML. If you place a
character like "<" inside an XML element, it will generate an error because the parser
interprets it as the start of a new element.
<message>salary &lt; 1000</
message>
There are 5 pre-defined entity references in XML:
&lt; < less than

&gt; > greater than

&amp; & ampersand

&apos; ' apostrophe

&quot; " quotation mark

8. Comments in XML : The syntax for writing comments in XML is similar to that of
HTML.
<!-- This is a comment -->

9. White-space is Preserved in XML : XML does not truncate multiple white-spaces

(HTML truncates multiple white-spaces to one single white-space).
4.3 XML - Documents

Document Prolog Section

Document Prolog comes at the top of the document, before the root element. This section
contains −
 XML declaration
 Document type declaration
Following syntax shows XML declaration

<?xml
version = "version_number"
encoding = "encoding_declaration"
standalone = "standalone_status"
?>

Parameter Parameter_value Parameter_description

Version 1.0 Specifies the version of the XML standard used.

Encoding UTF-8, UTF-16, ISO- It defines the character encoding used in the document.
10646-UCS-2, ISO- UTF-8 is the default encoding used.
10646-UCS-4, ISO-
8859-1 to ISO-8859-9,
ISO-2022-JP,
Shift_JIS, EUC-JP

Standalone yes or no
It informs the parser whether the document relies on the
information from an external source, such as external
document type definition (DTD), for its content. The
default value is set to no. Setting it to yestells the
processor there are no external declarations required for
parsing the document.
4.4 XML - DTDs
The XML Document Type Declaration, commonly known as DTD, is a way to describe XML
language precisely. DTDs check vocabulary and validity of the structure of XML documents
against grammatical rules of appropriate XML language. An XML DTD can be either specified
inside the document, or it can be kept in a separate document and then liked separately.
<!DOCTYPE note
[
<!ELEMENT note
(to,from,heading,body)>
<!ELEMENT to (#PCDATA)>
<!ELEMENT from (#PCDATA)>
<!ELEMENT heading (#PCDATA)>
<!ELEMENT body (#PCDATA)>
]>

The DTD above is interpreted like this:

 !DOCTYPE note defines that the root element of the document is note
 !ELEMENT note defines that the note element must contain the elements: "to, from,
heading, body"
 !ELEMENT to defines the to element to be of type "#PCDATA"
 !ELEMENT from defines the from element to be of type "#PCDATA"
 !ELEMENT heading defines the heading element to be of type "#PCDATA"
 !ELEMENT body defines the body element to be of type "#PCDATA"

4.4.1 The Building Blocks of XML Documents

Seen from a DTD point of view, all XML documents are made up by the following building
blocks:
 Elements
 Attributes
 Entities
 PCDATA
 CDATA

1. Elements
Elements are the main building blocks of both XML and HTML documents. Examples of
HTML elements are "body" and "table". Examples of XML elements could be "note" and
"message".
<message>some
text</message>
2. Attributes
Attributes provide extra information about elements. Attributes are always placed inside the
opening tag of an element. Attributes always come in name/value pairs. The following "img"
element has additional information about a source file:
<img src="computer.gif" />
3. Entities
Some characters have a special meaning in XML, like the less than sign (<) that defines the start
of an XML tag. Most of you know the HTML entity: "&nbsp;". This "no-breaking-space" entity
is used in HTML to insert an extra space in a document. Entities are expanded when a document
is parsed by an XML parser.
&lt; < less than

&gt; > greater than

&amp; & ampersand

&apos; ' apostrophe

&quot; " quotation mark

4. PCDATA
PCDATA means parsed character data. Think of character data as the text found between the
start tag and the end tag of an XML element. PCDATA is text that WILL be parsed by a
parser. The text will be examined by the parser for entities and markup. Tags inside the text
will be treated as markup and entities will be expanded.
However, parsed character data should not contain any &, <, or > characters; these need to be
represented by the &amp; &lt; and &gt; entities, respectively.
5. CDATA
CDATA means character data. CDATA is text that will NOT be parsed by a parser. Tags
inside the text will NOT be treated as markup and entities will not be expanded.
4.4.2 XML - Schemas
XML Schema is commonly known as XML Schema Definition (XSD). It is used to describe
and validate the structure and the content of XML data. XML schema defines the elements,
attributes and data types.
<?xml version = "1.0" encoding = "UTF-8"?>
<xs:schema xmlns:xs = "http://www.w3.org/2001/XMLSchema">
<xs:element name = "contact">
<xs:complexType>
<xs:sequence>
<xs:element name = "name" type = "xs:string" />
<xs:element name = "company" type = "xs:string" />
<xs:element name = "phone" type = "xs:int" />
</xs:sequence>
</xs:complexType>
</xs:element>
</xs:schema>

Elements are the building blocks of XML document. An element can be defined within an XSD
as follows −
<xs:element name = "x" type = "y"/>
4.4.3 Definition Types
You can define XML schema elements in the following ways −

Simple Type

Simple type element is used only in the context of the text. Some of the predefined simple types
are: xs:integer, xs:boolean, xs:string, xs:date. For example:
<xs:element name = "phone_number" type = "xs:int" />

Complex Type

A complex type is a container for other element definitions. This allows you to specify which
child elements an element can contain and to provide some structure within your XML
documents. For example:
<xs:element name = "Address">
<xs:complexType>
<xs:sequence>
<xs:element name = "name" type = "xs:string" />
<xs:element name = "company" type = "xs:string" />
<xs:element name = "phone" type = "xs:int" />
</xs:sequence>
</xs:complexType>
</xs:element>

In the above example, Address element consists of child elements. This is a container for
other <xs:element>definitions, that allows to build a simple hierarchy of elements in the XML
document.
5. JSON
JSON or JavaScript Object Notation is a lightweight text-based open standard designed for
human-readable data interchange.
 JSON stands for JavaScript Object Notation.
 The format was specified by Douglas Crockford.
 It was designed for human-readable data interchange.
 It has been extended from the JavaScript scripting language.
 The filename extension is .json.
 JSON Internet Media type is application/json.
 The Uniform Type Identifier is public.json.

5.1 Characteristics of JSON

 JSON is easy to read and write.
 It is a lightweight text-based interchange format.
 JSON is language independent.
{
"book": [

{
"id":"01",
"language": "Java",
"edition": "third",
"author": "Herbert Schildt"
},
{
"id":"07",
"language": "C++",
"edition": "second",
"author": "E.Balagurusamy"
}
]
}

5.2 Creating Simple Objects

JSON objects can be created with JavaScript.
<html>
<head>
<title>Creating Object JSON with JavaScript</title>
<script language = "javascript" >
var JSONObj = { "name" : "tutorialspoint.com", "year" : 2005
};
document.write("<h1>JSON with JavaScript example</h1>");
document.write("<br>");
document.write("<h3>Website Name = "+JSONObj.name+"</h3>");
document.write("<h3>Year = "+JSONObj.year+"</h3>");
</script>
 </head> <body> </body> </html>

5.3 Creating Array Objects

The following example shows creation of an array object in javascript using JSON, save the
below code as json_array_object.htm
<html>
<head>
<title>Creation of array object in javascript using JSON</title>
<script language = "javascript" >
document.writeln("<h2>JSON array object</h2>");
var books = { "Pascal" : [
{ "Name" : "Pascal Made Simple", "price" : 700 },
{ "Name" : "Guide to Pascal", "price" : 400 }],

"Scala" : [
{ "Name" : "Scala for the Impatient", "price" : 1000
},
{ "Name" : "Scala in Depth", "price" : 1300 }]
}
var i = 0
document.writeln("<table border = '2'><tr>");
for(i = 0;i<books.Pascal.length;i++){
document.writeln("<td>");
document.writeln("<table border = '1' width = 100 >");
document.writeln("<tr><td><b>Name</b></td><td width = 50>"
+ books.Pascal[i].Name+"</td></tr>");
document.writeln("<tr><td><b>Price</b></td><td width =
50>" + books.Pascal[i].price +"</td></tr>");
document.writeln("</table>");
document.writeln("</td>");
}
for(i = 0;i<books.Scala.length;i++){
document.writeln("<td>");
document.writeln("<table border = '1' width = 100 >");
document.writeln("<tr><td><b>Name</b></td><td width = 50>"
+ books.Scala[i].Name+"</td></tr>");
document.writeln("<tr><td><b>Price</b></td><td width =
50>" + books.Scala[i].price+"</td></tr>");
document.writeln("</table>");
document.writeln("</td>");
}
document.writeln("</tr></table>");
</script>
</head>
<body>
</body>
</html>