WEB TECHNOLOGIES

Code: 8EC07
Prerequisite:
Data Communications and Computer Networks,
Object Oriented Programming through Java
TEXTBOOKS:
1. Web Programming: Building Internet Applications, 3rd Edition, Chris Bates, Wiley Publications.
2. Angular - The Complete Guide [2021 Edition], Maximilian Schwarzmuller, Packt Publishing.
3. Head First Servlets and JSP, 2nd Edition by Kathy Sierra, Bryan Basham, Bert Bates, O'Reilly Media, Inc.
Course Objectives

Implement programs using HTML tags, Java scripts along

with Event Handling. Implement scripts using XML, DOM
parser, and SAX parser for project development. Also, the
student should understand and implement the MVC
architecture applications.
Course Outcomes

At the end of this course, the student will be able to

1. Demonstrate the use of HTML tags and be able to design web pages.Develop
dynamic programs involving Java scripts, popup windows in JavaScript along
Event Handling.
2. Develop scripts using XML and XSLT and read XML documents using parsers,
DOM parser, and SAX parser. Develop JSON files and access them via HTML
pages.
3. Implement Angular with Expressions, Filters, Directives, Controller, and
Modules.
4. Develop a Single Page Application with implementation of Scope and Form.
5. Implement Java servlets using Apache Tomcat Server for User authentications
6. Develop an application in PHP with Database connectivity.
REFERENCES:
1. Programming the World Wide Web, Robert W. Sebesta.
2. Building Web Applications with TypeScript, Angular and React, Sahil Malik, Ivo Gabe de Wolff, Gabriel Isenberg,
Packt Publishing.
3. Web Technologies – Uttam Kumar Roy- Oxford University Press
4. Core SERVLETS AND JAVASERVER PAGES VOLUME 1: CORE TECHNOLOGIES, Marty Hall and Larry Brown
Pearson
5. Internet and World Wide Web – How to program, Dietel and Nieto PHI/Pearson.
6. Murach’s Beginning JAVA JDK 5, Murach, SPD
7. An Introduction to Web Design and Programming –Wang-Thomson
8. Web Warrior Guide to Web Programming-Bai/Ekedaw-Thomas
9. Beginning Web Programming-Jon Duckett WROX
10. Java Script, D.Flanagan, O’Reilly, SPD.
11. Complete Reference to PHP.
12. https://www.w3schools.com/
13. https://angular.io/
14. https://www.php.net/
15. https://www.typescriptlang.org/
16.https://www.json.org/json-en.html
What you will learn,

Unit 1: HTML, CSS, Bootstrap, JavaScript, Typescript

Unit 2: XML, JSON
Unit 3: Angular : Basics, Expressions,Filters, Directives,
Controllers, Modules.
Unit 4: Angular : Forms, Scope, Dependency Injection &
Services, Single Page Application (SPA)
Unit 5: Servlets : Introduction, API, Session Tracking.
Unit 6: PHP : Basics, Form, Database, Session, File Handling
UNIT I : Client-Side Web Development. (Text Book 1)

HTML 4 - List, Tables, Images, Forms, Div. (with all attributes and
sub-elements)
Cascading Style sheets 3 - Selectors (Basic, Combinatory,
Attribute, Pseudo-class, Pseudo Element) using properties (font,
background),
Bootstrap basics (Text Book 2)
JavaScript - Introduction, variables, objects (Boolean, Number, String,
Date, Math, Regular expression, Array), Function, Event handlers
(mouse, keyboard, window), Using CSS with JavaScript.
Introduction to Typescript.(Text Book 2)
Internet
A global computer network providing a variety of information and
communication facilities, consisting of interconnected networks using
standardized communication protocols
The World Wide Web

What is the World Wide Web (WWW)?

A worldwide collection of electronic

documents
Also called the Web

Each electronic document is called a Web page

Can contain text, graphics, audio, video, and built-in connections

A Web site is a collection of related Web pages

Web Technologies

Web Technology refers to the various tools and techniques that are
utilized in the process of communication between different types of
devices over the internet
Clientside Technologies
● HTML
● CSS
● Java Script
● Type Script
● Angular JS
● Ruby on Rails
● jQuery
● Ajax
● Bootstrap
● VBScript….etc
Server side Technologies
● PHP
● Java
● Ruby
● JSP
● ASP
● Django
● Ruby on Rails
● Anngular
● Perl…. etc
 HTML Introduction

⮚In 1980, Tim Berners Lee proposed a concept of

hyper text. He and Robert Cailliau started W3
project.

⮚Web pages are written in

HyperText Markup Language (HTML).

⮚Web pages contain text ,hyperlinks (links to other

web pages), tables, images.

1
3
1
4
WEB BROWSER

Web browsers are software programs that allow users to access the web’s
content.
Ex: Internet Explorer

1
5
 Title bar

Menu bar

Tool bar

Address bar

Status bar

1
6
CATEGORIES OF TEXT

⮚ Plain text- Strings of characters

of fixed font size.

⮚ Rich text -Strings of characters of

various font size.

⮚ Hypertext – Plain / Rich text

plus links to other documents.

1
7
⮚ HTML is a language used to design web pages.
⮚ HTML is mother tongue of web browser

⮚ Without HTML, Web browsers take contents of

web page and put them just like a paragraph
without any line breaks, alignments etc .

⮚ With HTML , we can specify line breaks ,

alignments of text , images, video etc

⮚ In other words ,HTML is all about specifying

structure and format of web page.

1
8
 Html versions
● Since the early days of the web, there have been many
versions of HTML.
HTML 1991
HTML+ 1993
HTML2.0 1995
HTML 3.2 1997
HTML4.01 1999
XHTML 1.0 2000
HTML5 2012
XHTML5 2013
 HTML Tags/HTML elements
⮚ HTMl elements gives the structure to the html document
and tells the browser how you want your website to be
presented.
⮚ The surrounding characters are called angle brackets.
⮚ HTML tags normally come in pairs like <b> and </b>.
⮚ The first tag in a pair is the start tag, the second tag is the
end tag.
⮚ HTML element : start tag , content ,end tag
⮚ HTML tags are not case sensitive, <b> means the same
as <B>

2
2
⮚ An HTML file is a text file containing small markup tags.

⮚ The markup tags tell the Web browser how to display

the page.

⮚ An HTML file must have an htm or html file extension.

- .htm is used windows 3.0
- .html is used for windows95/98 or its next os
⮚ An HTML file can be created using a simple text editor
(notepad,word processor).

2
3
<html>
<head>
<title>
Title
of the page
</title>
</head>

<body>
Content of the
page
</body>

</html>
2
4
EXAMPLE
<html>
<head>
<title> This is my first web page !
</title>
</head>

<body>
<b> welcome to snist </b>
</body>

</html>
⮚ Tag <HTML> indicates this page is written in HTML language.

⮚ HTML page contains two main section , HEAD and BODY.

⮚ HEAD section includes information about the page such as its

title, page formatting instructions, scripts etc.

⮚ The BODY section includes actual content of the page.

⮚ Tags can be nested to create complex structures.

⮚ All tags may not need its closing tag.

2
7
⮚ Attribute : keyword that is added INSIDE another tag in
starting tag.
⮚ Gives the additional information about an element.
⮚ Attributes come in name/value pairs like: name="value"
⮚ Use lowercase attributes.
⮚ For example, the BODY tag can contain the background
color,
<BODY bgcolor="BLUE">.
⮚ The end tag </BODY> does not have to contain the
attribute. The background color will be in effect
throughout the document.
⮚ General form: <tagname attribute=“value”>

2
8
HTML Comments

● Comments can be inserted into the HTML code to make it more readable and
understandable. Comments are ignored by the browser and are not
displayed.
● Example
● <!-- This is a comment -->
To view html code for a web page
● Right-click in the page
● select "View Source" (IE) or "View Page Source" (Firefox), or similar for other
browsers.
● This will open a window containing the HTML code of the page.
HTML
Basic HTML Tags :
1.<html> </html> 13.<s> <del> or
</s> </del>
2.<head> </head> 14.<p> </p>
3.<title> </title> 15.<img></img>
4.<body> </body> 16.<center></center>
5.<br> 17.
6.<b> </b> 18.
7.<i> </i> 19.<bdo> </bdo>
8.<a></a>
20.<q> </q>
9.<u> </u> 21.<big> </big>
10.<center> </center> 22.<small> </small>
11.<hr> 23. <pre> </pre>
12.<h1 to h6> </h1 to h6> 24 .<strong> </strong>
HTML 4

1. List
2. Tables
3. Images
4. Forms
5. Div.
(with all attributes and sub-elements)
Lists
HTML lists allow web developers to group a set of related items in lists.

Unordered HTML List

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) by default:

<ul>

<li>Coffee</li>

<li>Tea</li>

<li>Milk</li>

</ul>
Lists
Unordered HTML List

The CSS list-style-type property is used to define the style of the list item
marker. It can have one of the following values:
Value
Value Description
Description
disc Sets the list item marker to a bullet (default)
disc
circle Sets the list item marker to a circle
Sets the list item marker to a bullet (default)
square Sets the list item marker to a square

none The list items will not be marked

Lists
Unordered HTML List : Example - Disc
<ul style="list-style-type:disc;">

<li>Coffee</li>

<li>Tea</li>

<li>Milk</li>
Output:
</ul>
Lists
Ordered HTML List

An ordered list starts with the <ol> tag. Each list item starts with the <li> tag.

The list items will be marked with numbers by default:

<ol>

<li>Coffee</li>

<li>Tea</li>

<li>Milk</li>

</ol>
Lists
Ordered HTML List : Example - Uppercase Letters
<ol type="A">

<li>Coffee</li>

<li>Tea</li>

<li>Milk</li> Output:
</ol>
Lists
HTML 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:

<dl>
Output:
<dt>Coffee</dt>
<dd>- black hot drink</dd>
<dt>Milk</dt>
<dd>- white cold drink</dd>
</dl>
Lists
Tag Description

<ul> Defines an unordered list

<ol> Defines an ordered list

<li> Defines a list item

<dl> Defines a description list

<dt> Defines a term in a description list

<dd> Describes the term in a description list

Tables

HTML tables allow web developers to <td>Germany</td>

arrange data into rows and columns. </tr>
<tr>
<td>Centro comercial Moctezuma</td>
A simple HTML table:
<td>Francisco Chang</td>
<html>
<td>Mexico</td>
<body>
</tr>
<table>
</table>
<tr>
</body>
<th>Company</th>
</html>
<th>Contact</th>
<th>Country</th> Output:
</tr>
<tr>
<td>Alfreds Futterkiste</td>
<td>Maria Anders</td>
Tables
Table Cells
Each table cell is defined by a <td> and
a </td> tag.
td stands for table data.
Everything between <td> and </td> are
the content of the table cell.
Note: A table cell can contain all sorts
of HTML elements: text, images, lists,
links, other tables, etc.
Table Rows
Each table row starts with a <tr> and
ends with a </tr> tag.
tr stands for table row.
You can have as many rows as you like
in a table; just make sure that the
number of cells are the same in each
row.There are times when a row can
have less or more cells than another.
Tables

Other Tag Description

Table Headers
<caption> Defines a table caption
Sometimes you want your cells to be
<colgroup> Specifies a group of one or more
table header cells. In those cases use columns in a table for formatting
the <th> tag instead of the <td> tag:
<col> Specifies column properties for
each column within a <colgroup>
th stands for table header. element

<thead> Groups the header content in a

By default, the text in <th> elements table
are bold and centered, but you can
<tbody> Groups the body content in a table
change that with CSS.
<tfoot> Groups the footer content in a
table
Tables : Border

How To Add a Border Collapsed Table Borders

When you add a border to a table, you To avoid having double borders like in
also add borders around each table the example above, set the CSS
cell: border-collapse property to collapse.
table, th, td {
table, th, td {
border: 1px solid black;
border: 1px solid black;
}
border-collapse: collapse;
To add a border, use the CSS border
}
property on table, th, and td
elements:
Tables : Border

Style Table Borders Round Table Borders

table, th, td { table, th, td {
border: 1px solid white; border: 1px solid black;
border-collapse: collapse; border-radius: 10px;
} }
th, td {
background-color: #96D4D4;
} th, td {
border: 1px solid black;
border-radius: 10px;
}
Tables : Border

The following values are allowed for

Dotted Table Borders
border-style:
th, td {
border-style: dotted;
}

Border Color
th, td {
border-color: #96D4D4;
}
Tables : Sizes

Table Width Column Width

To set the width of a table, add the
style attribute to the <table> element:
<table style="width:100%">
Note: Using a percentage as the size
unit for a width means how wide will
this element be compared to its parent
element, which in this case is the
<body> element.
To set the size of a specific column, add
the style attribute on a <th> or <td>
element:
Example
Set the width of the first column to 70%:
<table style="width:100%">
<tr>
<th style="width:70%">Firstname</th>
…
Tables : Sizes
<table style="width:100%">
Table Row Height <tr>
<th>Firstname</th>
To set the height of a specific row, add <th>Lastname</th>
the style attribute on a table row <th>Age</th>
element: </tr>
<tr style="height:200px">
Set the height of the second row to 200 <td>Jill</td>
pixels: <td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
</table>
Table Padding & Spacing

To add padding only above the content,

Cell Padding
use the padding-top property.
Cell padding is the space between the
And the others sides with the padding-
cell edges and the cell content.
bottom, padding-left, and padding-
By default the padding is set to 0. right properties:

To add padding on table cells, use the th, td {

CSS padding property: padding-top: 10px;
padding-bottom: 20px;
th, td {
padding-left: 30px;
padding: 15px; padding-right: 40px;
}
}
Table Padding & Spacing

Cell Spacing
Cell spacing is the space between each
cell.

By default the space is set to 2 pixels.

To change the space between table

cells, use the CSS border-spacing
property on the table element:

table {

border-spacing: 30px;
Table Colspan & Rowspan

HTML tables can have cells that span <table style="width:100%">

over multiple rows and/or columns. <tr>
<th colspan="2" >Name</th>
To make a cell span over multiple <th>Phone</th>
columns, use the colspan attribute </tr>
To make a cell span over multiple rows, <tr>
use the rowspan attribute <td rowspan="2">Mark</td>
<td rowspan="2">Jane</td>
<td>555-1234</td>
</tr>
<tr>
<td>555-8745</td>
</tr>
</table>
 Div tag- defines divisions or a section in a document

<div style="background-color:orange;text-
align:center">
<p>Navigation section</p>
</div>
<div style="border:1px solid black">
<p>Content section</p>
</div> outpu
t
 Cascading Stylesheets
(CSS)

54
⮚ To control the look and feel of HTML documents in an organized and
efficient manner with CSS.
⮚ Able to add new look to the old html
What is css?
❑ Styles define how to display html elements
❑ It makes the html document to display with different styles.
⮚ html was never intended to contain tags for formatting a document.
⮚ Html defines the content of the document like
<h1> this is a heading</h1>
<p> this is a paragraph</p>
⮚ To develop a large web sites, fonts and colors information were
added to every single page, became a long and expensive process.
⮚ To solve this problem, the www consortium (w3c) created CSS.
⮚ In html 4.0 all formatting tags were removed from the html
document, and stored in a separate CSS file.
⮚ Css supported by all the browser.
CSS selector
❖ these are heart and soul of css
❖ The selector is normally the html element you
want to manipulate(style).
css syntax
Selector{ property:value;}
Css declaration ends with ; and surrounded
by curly brackets.
Property- style attribute you want to change
value- it has value
Ex- h1{color:green;fornt-size:30px;}
Three flavors of CSS
1. internal style sheet
when you want to apply styles to single document
you must define internal styles in the head section
of an HTML page, by using style tag like this
<head>
<style>
p{ color:red;
text-align:center;
font size:20px;
}
</style>
</head>
<body>
<p> helloworld</p>
<p> this paragraph is styled with css</p>
</body>
2. External style sheet
❖ To apply the style to many pages
❖ you can change the look of entire web site by
changing one file.
❖ External css is a file that contains only css code and
is saved with a “.css” file extension
❖ Each1. html file
create css file should link to this 2.file using
Create html file<ling>
and link to tag.
css
test.css <head>
body{ background-color:gray;} <link rel=“stylesheet” type=“text/css”
p{ color:blue;} href=“test.css”}
h3{color:white;} </head>
<body>
Required. Specifies the relationship <p>SNIST in blue color</p>
between the current document and <h3> IT-IV year</h3>
the linked document </body>
Advantages
- keeps web site design and content separate.
- reuse css code for entire website.
- changes will be done in a single file
3. Inline css
⮚ coded in the body of the web page as an attribute of an HTML tag.
⮚ applies to the specific element that contains it as an attribute
⮚ This has highest priority over internal and external style sheets.
⮚ Inline overrides styles that are defined in external or internal by
using inline css.

example
<p style= “background:blue; color:white;”>hello world</p>
h3{
External.css
text-
h3{
align:right;
color:red;
font-size:px;
text-align:left;
}
font-
size:20px;
Selectors
● CSS selectors are used to "find" (or select) the HTML elements you want to
style.
● We can divide CSS selectors into five categories:
● Simple selectors (select elements based on name, id, class)
● Combinator selectors (select elements based on a specific relationship
between them)
● Pseudo-class selectors (select elements based on a certain state)
● Pseudo-elements selectors (select and style a part of an element)
● Attribute selectors (select elements based on an attribute or attribute value)
Selector by name
Selector by id
Selector by pseudo-class
Universal selector
Grouping selector
● Instead of this…
CSS: H1 { color: #FFFF00; }
H2 { color: #FFFF00; }

● You can do this…

CSS: H1, H2 { color: #FFFF00; }

65
Combinatory
Pseudo-class
Pseudo element
<!DOCTYPE html>
<html>
<head>
<style>
p::first-line {
color: #ff0000;
font-variant: small-caps;
}
</style>
</head>
<body>

<p>You can use the ::first-line pseudo-element to add a special effect to the first line of a text
Some more text. And even more, and more, and more, and more, and more, and more, and
more, and more, and more, and more, and more, and more.</p>

</body>
</html>
CSS Background properties
Background-color
Background Image
Background-repeat
background-attachment
background-shorthand
CSS Fonts