SCHOOL OF COMPUTER SCIENCE

AND ENGINEERING

Web Technology
B20EF0501

For
Seventh Semester
B. Tech in Computer Science and Engineering
Web Application Development AY 2021-2022

Web Technology
-Syllabus

Course Course Title Duration Course L T P J C Hrs/

Code (Weeks) Type Wk
B20EF050 Web 16 HC 3 0 1 0 4 5
1 Technology

Prerequisites:
Programming with Java (B18CS3030) and Database Management System (B18CS4030).

Course Description:
The basics of Web application tools such as HTML, XHTML and CSS are introduced. The
course also provides knowledge about advanced research topics such as Javascript and PHP.

Course Objectives:
1. Explain the basic concepts of HTML code.
2. Illustrate the use of Cascading Style Sheets in web pages.
3. Demonstrate the Java Scripts syntax and Forms in real world applications.
4. Describe the principles of object oriented development and database concept using PHP.

Course Outcomes (Cos):

On successful completion of this course; the student will be able to:
CO1: Build web pages using HTML syntax and semantics.
CO 2: Make use of Cascading Style Sheets in developing web applications.
CO 3: Design and Execute dynamic and interactive web pages by embedding Java Script
code in HTML .
CO 4: Apply the principles of object oriented development and database using PHP.

Course Contents:
Unit- 1
Introduction to HTML, HTML Syntax, Semantic Markup, Structure of HTML Documents,
HTML Elements, HTML Semantic Structure Elements, HTML Web Storage. HTML Tables and
Forms, Introducing Tables, Styling Tables, Introducing Forms, Form Control Elements, Table
and Form Accessibility, Micro formats
Unit -2
Introduction to CSS, What is CSS, CSS Syntax, Location of Styles, Selectors, The Cascade:
How Styles Interact, CSS Text Styling. Advanced CSS: Layout, Normal Flow, Positioning
Elements, Floating Elements, Constructing Multicolumn Layouts, Approaches to CSS Layout,
Responsive Design, CSS Frameworks.
Unit- 3

2
Web Application Development AY 2021-2022

JavaScript: Client-Side Scripting, JavaScript’s History and Uses, JavaScript Design Principles,
Where Does JavaScript Go? Syntax, Control statements, Functions, JavaScript Objects,
Constructors, The Document Object Model (DOM), JavaScript Events, Forms.

Unit- 4
Introduction to server-side Development with PHP,Arrays and Superglobals, Arrays, $GET and
$POST Superglobal Arrays, $_SERVER Array, $_Files Array, Reading/Writing Files, PHP
Classes and Objects, Object-Oriented Overview, Classes and Objects in PHP, Object Oriented
Design, Working with Databases, SQL, Database APIs, Managing a MySQL Database.
Accessing MySQL in PHP.

Self-learning component:
HTML5,JQuery,XML, Ruby, Introduction to REST and RESTful API

Recommended Learning Resources (Text books):

1. Randy Connolly, Ricardo Hoar, "Fundamentals of Web Development”, Pearson Education
India, 1st Edition, 2016
2. Jeffrey C. Jackson, "Web Technologies--A Computer Science Perspective", Pearson
Education, 1st Edition, 2006.
3. Robert. W. Sebesta, "Programming the World Wide Web", Pearson Education, 4th Edition,
2007.
Learning Resources (Reference books):
1) Robin Nixon, “Learning PHP, MySQL &JavaScript with jQuery, CSS and HTML5”, O’Reilly
Publications, 4th Edition, 2015.
2) Luke Welling, Laura Thomson, “PHP and MySQL Web Development”, Pearson Education,
5th Edition 2016.
3) Nicholas C Zakas, “Professional JavaScript for Web Developers”, Wrox/Wiley India, 3rd
Edition 2012.
4) David Sawyer Mcfarland, “JavaScript & jQuery: The Missing Manual”, O’Reilly/Shroff
Publishers & Distributors Pvt Ltd, 1st Edition, 2014
5) Zak Ruvalcaba Anne Boehm, “Murach's HTML5 and CSS3”, Murachs/Shroff Publishers &
Distributors Pvt Ltd, 3rd Edition, 2016.
6) Gerardus Blokdyk, “Representational State Transfer: Practical Integration”, CreateSpace
Independent Publishing Platform, 1st Edition, 2018
7) Michael Fitzgerald, ‘Learning Ruby”, O’Reilly, 1st Edition, 2007

3
Web Application Development AY 2021-2022

Unit -2
Introduction to CSS
1.What Is CSS?

At various places in the previous chapter on HTML, it was mentioned that in current web
development best practices HTML should not describe the formatting or presentation of
documents. Instead that presentation task is best performed using Cascading Style Sheets
(CSS).
CSS is a W3C standard for describing the appearance of HTML elements.Another common way
to describe CSS’s function is to say that CSS is used to define the presentation of HTML
ocuments. With CSS, we can assign font properties, colors, sizes, borders, background images,
and even position elements on the page.CSS can be added directly to any HTML element (via
the style attribute), within the <head> element, or, most commonly, in a separate text file that
contains only CSS.

Benefits of CSS
The benefits of CSS include:
■ Improved control over formatting. The degree of formatting control in CSS is significantly
better than that provided in HTML. CSS gives web authors fine-grained control over the
appearance of their web content.
■ Improved site maintainability. Websites become significantly more maintainable because all
formatting can be centralized into one CSS file, or a small handful of them. This allows you to
make site-wide visual modifications by changing a single file.
■ Improved accessibility. CSS-driven sites are more accessible. By keeping presentation out of
the HTML, screen readers and other accessibility tools work better, thereby providing a
significantly enriched experience for those reliant on accessibility tools.
■ Improved page download speed. A site built using a centralized set of CSS files for all
presentation will also be quicker to download because each individual HTML file will contain
less style information and markup, and thus be smaller.
■ Improved output flexibility. CSS can be used to adopt a page for different output media. This
approach to CSS page design is often referred to as responsive design.

CSS Versions

Just like with the previous chapter, we should say a few words about the history of CSS. Style
sheets as a way to visually format markup predate the web. In the early 1990s, a variety of
different style sheet standards were proposed, including JavaScript style sheets, which was
proposed by Netscape in 1996. Netscape’s proposal was one that required the use of JavaScript
programming to perform style changes. Thankfully for nonprogrammers everywhere, the W3C
decided to adopt CSS, and by the end of 1996 the CSS Level 1 Recommendation was published.

4
Web Application Development AY 2021-2022

A year later, the CSS Level 2 Recommendation (also more succinctly labeled simply as CSS2)
was published.4 Even though work began over a decade ago, an updated version of the Level 2
Recommendation, CSS2.1, did not become an official W3C Recommendation untilJune 2011.
And to complicate matters even more, all through the last decade (and to the present day as
well), during the same time the CSS2.1 standard was being worked on, a different group at the
W3C was working on a CSS3 draft. To make CSS3 more manageable for both browser
manufacturers and web designers, the W3C has subdivided it into a variety of different CSS3
modules. So far the following CSS3 modules have made it to official W3C Recommendations:
CSS Selectors, CSS Namespaces, CSS Media Queries, and CSS Color.

2.CSS Syntax
A CSS document consists of one or more style rules. A rule consists of a selector that identifies
the HTML element or elements that will be affected, followed by a series of property:value
pairs (each pair is also called a declaration),.The series of declarations is also called the
declaration block. The browser ignores white space (i.e., spaces, tabs, and returns) between
your CSS rules so you can format the CSS however you want. Notice thateach declaration is
terminated with a semicolon. The semicolon for the last declaration in a block is in fact optional.

3.Location of Styles

CSS style rules can be located in three different locations.

Inline Styles
Inline styles are style rules placed within an HTML element via the style attribute,. An inline
style only affects the element it is defined within and overrides any other style definitions for
properties used in the inline style .Notice that a selector is not necessary with inline styles and
that semicolons are only required for separating multiple rules.
 Inline styles are style rules placed within an HTML element via the style attribute
 <h1>Share Your Travels</h1>

5
Web Application Development AY 2021-2022

 <h2 style="font-size: 24pt">Description</h2>

 ...
 <h2 style="font-size: 24pt; font-weight:bold;"> Reviews</h2>
 Using inline styles is generally discouraged
 Handy for quickly testing out a style change

Embedded Style Sheet

<style> element (inside the <head> element of an HTML document. While better than inline
styles, using embedded styles is also by and large discouraged. Since each HTML document has
its own <style> element, it is more difficult to consistently style multiple documents when using
embedded styles.

Embedded style sheets (also called internal styles) are style rules placed within the <style>
element (inside the <head> element of an HTML document).
<head>
<meta charset="utf-8">
<title>Share Your Travels -- New York - Central Park</title>
<style>
h1 { font-size: 24pt; }
h2 {
font-size: 18pt;
font-weight: bold;
}
</style>
</head>
<body>
...

External Style Sheet

External style sheets are style rules placed within a external text file with the .css extension.
This is by far the most common place to locate style rules because it provides the best
maintainability. When you make a change to an external style sheet, all HTML documents that
reference that style sheet will automatically use the updated version. The browser is able to cache
the external style sheet, which can improve the performance of the site as well.
External style sheets are style rules placed within a external text file with the .css extension.
<head>
<meta charset="utf-8">
<title>Share Your Travels -- New York - Central
Park</title>
<link rel="stylesheet" href="styles.css" />
</head>

4.Selectors

6
Web Application Development AY 2021-2022

Element Selectors
Element selectors select all instances of a given HTML element. The example CSS rules in.
You can select all elements by using the universal element selector, which is the * (asterisk)
character.You can select a group of elements by separating the different element names with
commas. This is a sensible way to reduce the size and complexity of your CSS files, by
combining multiple identical rules into a single rule.

Class Selectors
A class selector allows you to simultaneously target different HTML elements regardless of
their position in the document tree. If a series of HTML elements have been labeled with the
same class attribute value, then you can target them for styling by using a class selector, which
takes the form: period (.) followed by the class name.

<head>
<title>Share Your Travels </title>
<style>
.first {
font-style: italic;
color: red;
}
</style>
</head>
<body>
<h1 class="first">Reviews</h1>
<div>
<p class="first">By Ricardo on <time>2016-05-23</time></p>
<p>Easy on the HDR buddy.</p>
</div>
<hr/>
<div>

7
Web Application Development AY 2021-2022

<p class="first">By Susan on <time>2016-11-18</time></p>

<p>I love Central Park.</p>
</div>
<hr/>
</body>

Id Selectors
An id selector allows you to target a specific element by its id attribute regardless of its type or
position. If an HTML element has been labeled with an id attribute,
<head>
<title>Share Your Travels </title>
<style>
#latestComment {
font-style: italic;
color: red;
}
</style>
</head>
<body>
<h1 class="first">Reviews</h1>
<div id="latestComment">
<p class="first">By Ricardo on <time>2016-05-23</time></p>
<p>Easy on the HDR buddy.</p>
</div>
<hr/>
<div>
<p class="first">By Susan on <time>2016-11-18</time></p>
<p>I love Central Park.</p>
</div>
<hr/>
</body>

8
Web Application Development AY 2021-2022

Attribute Selectors
An attribute selector provides a way to select HTML elements either by the presence of an
element attribute or by the value of an attribute. This can be a very powerful technique, but
because of uneven support by some of the browsers, not all web authors have used them.
Attribute selectors can be a very helpful technique in the styling of hyperlinks and images. For
instance, perhaps we want to make it more obvious to the user when a pop-up tooltip is available
for a link or image. We can do this by using the following attribute selector:
[title] { … }
This will match any element
<head>
<meta charset="utf-8">
<title>Share Your Travels</title>
<style>
[title] {
cursor: help;
padding-bottom: 3px;
border-bottom: 2px dotted blue;
text-decoration: none;
}
</style>
</head>
<body>
<div>
<img src="images/flags/CA.png" title="Canada Flag" />
<h2><a href="countries.php?id=CA" title="see posts from Canada”> Canada</a></h2>
<p>Canada is a North American country consisting of … </p>
<div>
<img src="images/square/6114907897.jpg” title="At top of Sulphur Mountain" />
<img src="images/square/6592317633.jpg” title="Grace Presbyterian Church" />
<img src="images/square/6592914823.jpg” title="Calgary Downtown" />
</div>
</div>

9
Web Application Development AY 2021-2022

</body>

Selector Matches
[] A specific attribute.
[=] A specific attribute with a specific value.
[~=] A specific attribute whose value matches
at least one of the words in a space delimited
list of words.
[^=] A specific attribute whose value begins
with a specified value.
[*=] A specific attribute whose value contains
a substring.
[$=] A specific attribute whose value ends
with a specified value.

Pseudo-Element and Pseudo-Class Selectors

A pseudo-element selector is a way to select something that does not exist explicitly as an
element in the HTML document tree but which is still a recognizable selectable object. For
instance, you can select the first line or first letter of any HTML element using a pseudo-element

10
Web Application Development AY 2021-2022

selector. A pseudo-class selector does apply to an HTML element, but targets either a particular
state or, in CSS3, a variety of family relationships.
• a:link
• a:visited
• :focus
• :hover
• :active
• :checked
• :first-child
• :first-letter
• :first-line

The most common use of this type of selectors is for targeting link states. By default, the browser
displays link text blue and visited text links purple.
<style>
a:link {
text-decoration: underline;
color: blue;
}
a:visited {
text-decoration: underline;
color: purple;
}
a:hover {
text-decoration: none;
font-weight: bold;
}
a:active {
background-color: yellow;
}
</style>

Contextual Selectors
A contextual selector (in CSS3 also called combinators) allows you to select elements based on
their ancestors, descendants, or siblings. That is, it selects elements based on their context or

their relation to other elements in the document tree. While some of these contextual selectors
are used relatively infrequently, almost all web authors find themselves using descendant
selectors.
A descendant selector matches all elements that are contained within another element. The
character used to indicate descendant selection is the space character.

11
 Web Application Development AY 2021-2022

Selector Matches Example

Descendant A specified element that is contained somewhere div p

within another specified element. Selects a <p> element that is contained somewhere within a <div
Child A specified element that is a direct child of the div>h2
specified element. Selects an <h2> element that is a child of a <div>
element.
Adjacent Sibling A specified element that is the next sibling (i.e., h3+p
comes directly after) of the specified element Selects the first <p> after any <h3>.
General Sibling A specified element that shares h3~p
the same parent as the specified Selects all the <p> elements that share the same
element. parent as the <h3>.

5.The Cascade: How Styles Interact

The “Cascade” in CSS refers to how conflicting rules are handled. The visual metaphor behind
the term cascade is that of a mountain stream progressing downstream over rocks (and not that
of a popular dishwashing detergent). The downward movement of water down a cascade is
meant to be analogous to how a given style rule will continue to take precedence with child .CSS

12
Web Application Development AY 2021-2022

uses the following cascade principles to help it deal with conflicts: inheritance,specificity, and
location.

Inheritance
Inheritance is the first of these cascading principles. Many (but not all) CSS properties affect
not only themselves but their descendants as well. Font, color, list, and text properties are
inheritable; layout, sizing, border, background, and spacing properties are not.

In the first example, only some of the property rules are inherited for the <body> element. That
is, only the bodyelement (thankfully!) will have a thick green border and the 100-px margin;
however,all the text in the other elements in the document will be in the Arial font and colored
red.

13
Web Application Development AY 2021-2022

In the second example you can assume there is no longer the body styling but instead we have a
single style rule that styles all the <div> elements. The <p> and <time> elements within the
<div> inherit the bold font-weight property but not the margin or border styles.

Specificity
Specificity is how the browser determines which style rule takes precedence when more than one
style rule could be applied to the same element.

14
Web Application Development AY 2021-2022

Location
Finally, when inheritance and specificity cannot determine style precedence, the principle of
location will be used. The principle of location is that when rules have the same specificity, then
the latest are given more weight. For instance, an inline style will override one defined in an
external author style sheet or an embedded style sheet.

15
Web Application Development AY 2021-2022

6.The Box Model

In CSS, all HTML elements exist within an element box Inorder to become proficient with CSS,
you must become familiar with the element box.

16
Web Application Development AY 2021-2022

Borders
Borders provide a way to visually separate elements. You can put borders around all four sides
of an element, or just one, two, or three of the sides.
Border widths are perhaps the one exception to the general advice against using the pixel
measure. Using em units or percentages for border widths can result in unpredictable widths as
the different browsers use different algorithms (some round up, some round down) as the zoom
level increases or decreases. For this reason, border widths are almost always set to pixel units.

Margins and Padding

Margins and padding are essential properties for adding white space to a web page, which can
help differentiate one element from another.

17
Web Application Development AY 2021-2022

CSS TRBL Shortcut

border-top-color: red; /* sets just the top side */

border-right-color: green; /* sets just the right side */
border-bottom-color: yellow; /* sets just the bottom side */
border-left-color: blue; /* sets just the left side */
Alternately, we can set all four sides at once:
border-color: red; /* sets all four sides to red */
border-color: red green orange blue; /* sets 4 colors */

18
Web Application Development AY 2021-2022

7.CSS Text Styling

Property Description

font A combined shorthand property that allows you to set the family, style,
size, variant, and weight in one property.
style weight variant size font-family
font-family Specifies the typeface/font to use. More than one can be specified.
font-size The size of the font in one of the measurement units
font-style Specifies whether italic, oblique, or normal

font-variant Specifies either small-caps text or none

font-weight Specifies either normal, bold, bolder, lighter, or a value between 100 and
900 in multiples of 100, where larger number represents
weightier (i.e., bolder) text.

Paragraph Properties

Just as there are properties that affect the font in CSS, there are also a range of CSS properties
that affect text independently of the font.
• letter-spacing
• line-height
• text-align
• text-decoration
• text-direction
• text-shadow
• …
Just look at text-shadow

19
Web Application Development AY 2021-2022

Using CSS these would be accomplished with:

<span style= “font-weight: bold”> … </span>
<span style= “font-style: italic”> … </span>
<span style=”text-decoration: underline”> …</span>
<span style=”vertical-align: super”> … <span>
<span style=”vertical-align: sub”> … </span>

In general, it is better to use <strong> … </strong> than <b> …</b>, and it is better to use
<em> …</em> than <i> … </i>. (‘em’ stands for emphasis.) This is because readers for the
visually impaired can render ‘strong’ and ‘em’ but not b(old) and i(talics).

Font manipulation
Fonts have a font-face (e.g. Arial, Courier, etc.), a font-size, font-weight (e.g. bold), a font-
style (e.g. italic).
Text attributes are used to set alignment (text-align), color (text-color) and decoration
(text-decoration can have the values underline, overline, line-through or blink).
To have a paragraph in bold red with the Arial font and in the font three times as large as
usual you would write:
<p style=”font-face:Arial; font-weight:bold; font-size:3em;text-color:red”> …</p>

20
Web Application Development AY 2021-2022

The <font> tage of XHTML1 and HTML4 is no longer available in (X)HTML5. Accordingly,
you may no longer use code such as:
<font> </font> …….. Font tags
These tags are used to specify a particular font - size, face, color in the body.
Size, face and color are the attributes (properties) you are specifying in the font tag.
When the font tag closes, those attributes end.

<font size=”7”>This is the biggest text available.</font >

<font size =”3”>This is the default size for text .</font >
<font size =”1”>This is the smallest text available.</font >
<font size =”+1”>Increases size by 1 unit</font >
Note: For headlines it is better (more reliable) to use h1, h2, etc.

You may also specify the typeface - but the face must be available on the user's
computer.

<font face="helvetica">This is in Helvetica.</font>

Note: Not all browsers support this, and different browsers/versions may have
different faces available, or different names for the same face (e.g. Times, Times
Roman, Times New Roman.)

face="Times, times, Times Roman, times roman, Times New Roman, times new roman"

will look for these 6 faces (in that order), and then go to the default face.

Using CSS, font-size is changed with

<span style=”font-size: value”>….</span> where value may be absolute -
e.g. 10pt, or relative to the previous – e.g. 120%, or
specified with words such as xx-small, thru xx-large.
For details, see the CSS notes or
http://www.htmlhelp.com/reference/css/font/font-size.html
Using CSS, font families are specified with
<span style=”font-family: courier, Times, serif”> … </span>
NOTE: These style instructions can also go in heading or paragraph tags.
You may also combine these: <p style=”font: bold italic 12pt arial”>..</p>

Colors:
Finally, you may specify colors. You should always try to use browser-safe colors.
Colors are described by a set of three hexadecimal numbers. Each of the numbers is of
the form hh.
Since there are three such numbers, the whole thing looks like hhhhhh.
Each of the h's is 0,1,2,3,4,5,6,7,8,9,A,B,C,D,E, or F.
The three numbers specify the level of the Red, Green and Blue lights which
make up the whole color.

21
Web Application Development AY 2021-2022

Here are some common browser-safe colors:

Red #FF0000
Green #00FF00
Blue #0000FF
White #000000
Black #FFFFFF

The following list of colors is in the transitional but not the strict DTD of XHTML1 and is
also available for styling with CSS (hence in HTML5).
There are also 16 widely known color names with their RGB values:

Black = #000000 Green = #008000

Silver = #C0C0C0 Lime = #00FF00
Gray = #808080 Olive = #808000
White = #FFFFFF Yellow = #FFFF00
Maroon = #800000 Navy = #000080
Red = #FF0000 Blue = #0000FF
Purple = #800080 Teal = #008080
Fuchsia= #FF00FF Aqua = #00FFFF

If you wish your text to be blue then you enter:

<span style=”text- color:#0000FF”>Here is my blue text. </span>

The # sign alerts HTML that a hexadecimal number is following.

HTML (Netscape, Firefox and Internet Explorer and probably the other browsers)
also recognizes a few color names:
Black, White, Green, Maroon, Olive, Navy, Purple, Gray,
Red, Yellow, Blue, Teal, Lime, Aqua, Fuchsia, Silver (see above.)

You may no longer say

<body bgcolor=”#FFFFFF” text=”#000000”>
Your body goes here
</body>
As all attributes of the body tag have been removed in HTML5.

22