IT1100 - Internet and Web Technologies

Introduction

1
Internet and Web technologies
• Module Code IT1100
• Credit Points 04
Method of Delivery
• 2 hours - lectures
• 1 hour - tutorials
• 2 hours - labs

• Enrollment Key IT1100

Assessment Criteria
Component %
Mid Semester Exam 20%
Assignment – part 01 10%
Assignment – part 02 20%
Final Exam 50%

Important
To pass this module Student need to obtain a pass mark in
both “Continues assessment“ and “End of the Semester
Examination “ components which would result in an overall
mark that would qualify for a C grade or above.
Assignments
You need to get into 5-member group for the assignment
within the same subgroup.
• You must “Develop a web Application”
• Project Titles are given by us

Assignment Submissions
• 5th Week – Documentation of your project plan .
• 12th Week – Final project submission .
• 12th and 13th Week - Viva.
Reference Materials
❑W3 school - https://www.w3schools.com/
❑J. Reynolds and R. Mofazali, The complete e-commerce book:
design, build, and maintain a successful web-based business,
1st. ed., C M P Books, 2000.
❑R. Nixon, Learning PHP, MySQL, JavaScript and CSS: A step-by-
step guide to creating dynamic websites, O’Reilly Media, Inc.,
2012.
❑H. Sharp, Y. Rogers, and J. Preece, Interaction Design: Beyond
Human-Computer Interaction, 2nd ed. Wiley, 2007.
❑Tutorial point - tutorialspoint.com
PLEAE CHECK THE
COURSE WEB
REGULARY …….
Concepts and technologies
Associated with the Web
applications
Lecture 01
Content
• Data networks and the Internet

• Network Services and Protocols

• Web server and the Browser

• Markup languages

8
Data Networks and
Internet
What is a network?
• A network is (according to the Cambridge Dictionary)
a large system consisting of many similar parts that are connected
together to allow movement or communication along the parts, or
between the parts and a control centre.

10
 Different types of networks
• There are different types of
networks available (according to
the nature of the usage)
• Telecommunication networks
• Television or radio network
• Transport networks
• Social networks
• Computer or data networks

11
Computer and Data Network

• A computer network, or data

network is
• a digital telecommunications network,
which allows nodes to share resources.
• In computer networks, computing devices
exchange data with each other using
connections between nodes (data links).
• These data links are established over cable
media such as wires or optic cables, or
wireless media such as WiFi.

12
Application of Data Networks
▪Resource Sharing
• Hardware (computing resources, disks, printers)
• Software (application software)

▪Information Sharing
▪ Easy accessibility from anywhere (files, databases)
▪ Search Capability (WWW)

▪Communication
▪ Email Message
▪ broadcast

▪Remote computing
Types of data networks - LAN
Local Area Network – LAN
▪ Network in small geographical Area (Room,
Building or a Campus) is called LAN (Local
Area Network)
▪ Local Area Networks are privately-owned
networks within a small area, usually a single
building or campus of up to a few kilometers.
▪ Since it is restricted in size, that means their
data transmission time can be known in
advance, and the network management
would be easier.

Source: http://cityinfrastructure.com/Data/Daa.html

14
Types of data networks - MAN
Metropolitan Area Network – MAN
▪ A Metropolitan Area Network (MAN) is a
network that is utilized across multiple
buildings
▪ Commonly used in schools, campuses
,hospitals , banks or large companies with
multiple buildings
▪ Is larger than a LAN, but smaller than a
WAN
▪ Is also used to mean the interconnection of
several LANs by bridging them together. This
sort of network is also referred to as a
campus network

Source: http://cityinfrastructure.com/Data/Daa.html

15
Types of data networks - WAN
Wide Area Network – WAN
▪ A Wide Area Network is a network
spanning a large geographical area of
around several hundred miles to across
the globe
▪ May be privately owned or leased
▪ Also called “enterprise networks” if they
are privately owned by a large company
▪ Can be connected through cable, fiber
or satellite
▪ Is typically slower and less reliable than
a LAN
Internet
▪ The Internet is the global system of interconnected
computer networks that use the Internet protocol suite
to link devices worldwide.
▪ It is a network of networks
▪ 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.
Source https://en.wikipedia.org/wiki/Internet

17
Network Services and
Protocols
Protocols
• A protocol is a
▪ system of rules that allow two or more entities of a communications
system to transmit information (wiki)
▪ the formal system of rules for correct behavior
on official occasions (Cambridge)

19
Infographic Style

Different Types of Services and Protocols

Mail service (POP3/SMTP/IMAP)
File Transfer ( FTP)

Protocols

Remote Logging (SSH) Web (HTTP/HTTPS)

20
Web server and the
Browser
Identify the browsers
We Use a browser to send HTTP/ HTTPS request

22
The browser
• Usually, the clients use the web browser to access the
web application in the server, based on the request-
response pattern.
1. The user enters the address of the web server (domain name) into
the browser.
2. The browser sends a request to the web server
3. The server responses with the client components
4. The client components are loaded into the browser
5. The browser reads the content and renders

23
The Server
• A server is a software, which knows how to handle the
requests and responses, while providing a specific
service
• A web server is used to host a web application.
• Apache (for php development)
• Tomcat (for JAVA development)
• IIS (for .NET/ASP development)
• Web server knows how to communicate with the
clients using the HTTP/HTTPS

24
Client and Server

25
Types of languages

▪High level/Compiled languages – Java, C, C++

▪Scripting languages – JS,PHP, Python

▪Markup languages – XML, HTML,XHTML

26
Markup Languages
extensible Markup Language
▪Designed to store and transport data
▪Both human- and machine-readable
(self descriptive)
▪Often used for distributing data over
networks
▪Used by may other tools like protocols

28
XML
• The main and the only component of XML is called an
element
• An element has 3 components
1. Start tag
2. Body
3. End tag
• No predefined set of elements, attributes, and values
for attributes

<Tag_name>IWT</Tag_name>
29
XML
• An element has a name
• Element names are case-sensitive
• Element names must start with a letter or underscore
• Element names cannot start with the letters, xml (or XML, or Xml, etc)
• Element names can contain letters, digits, hyphens, underscores, and periods
• Element names cannot contain spaces
• Any name can be used, no words are reserved (except xml)
<Module>IWT</Module>

30
XML
• Element names – naming styles
Style Example Description
Lower case <firstname> All letters lower case
Upper case <FIRSTNAME> All letters upper case
Underscore <first_name> Underscore separates words

Pascal case <FirstName> Uppercase first letter in each

word
Camel case <firstName> Uppercase first letter in each
word except the first

31
XML
• <?xml version="1.0" encoding="UTF-8"?>

▪ This is the XML declaration

• Provides the instructions for the processor to understand the details of
the XML file
• Encoding attribute indicates the character set
• UTF-8 = Unicode Transformation Format (with 8-bit blocks to represent a
character)
▪ An element may have attribute(s)
• Attributes describe the element
▪ Attribute value is always quoted (either single or double quote)
• <person id=“1”>Saman</person>

32
XML
▪ There can be multiple attributes for an element

<person id=“1” age=“35”>

Saman
</person>

▪ Attributes are separated by a space

▪ There are special type of element with a single self closing

tag
<age/>
33
XML
• Elements can be nested

<person id=“1">
<firstname>Saman</firstname>
<lastname>De Silva</lastname>
<age/>
</person>

<person id=“2">
<firstname>Saman</firstname>
<lastname>De Silva</lastname>
<age>28</age>
</person>
• The first element, which wraps and holds the other elements is called, the root element

34
XML
• Learn more about XML
https://www.w3schools.com/xml/default.asp

•HTML Unicode (UTF-8) Reference

https://www.w3schools.com/charsets/ref_html_utf8.asp

35
Question
• Write XML code to store following personal data
• Name
• Gender
• Age
• School

36
HTML – Hyper Text Markup Language
▪HTML is the standard language to develop the web
pages
▪The web browser knows to read the HTML document
and render the content, showing a nice GUI for web
sites/applications
▪HTML has a predefined set of elements, attributes,
and values for some attributes

37
HTML – Hyper Text Markup Language
▪HTML document (or the web pages) are hosted in a
web server
▪User requests for the initial web page by entering the
address on the browser
▪Thereafter the user can navigate through the web
pages in the site/application using the hyperlinks

38
HTML – Structure of HTML document
<!DOCTYPE HTML> Version

Root Element <html>

<head> Information about the

page
</head>

Content of the page

<body> that should be
</body> displayed

</html>
39
HTML – Types of element
• Structural elements
• header, footer, nav, aside, article
• Text elements
• Headings – <h1> to <h6>
• Paragraph – <p>
• Line break - <br>
• Images
• <img src=“imgName.jpg" alt=“description">
40
HTML – Types of element
• The HTML elements that doesn’t contain any closing
tag is referred as ”Empty Elements”.
<hr> Horizontal Line

<br> Line break

41
HTML – First page
<!DOCTYPE html>
<html>
<head>
<title>My first page</title>
</head>
<body>
<h1>Hello world</h1>
<p>This is my first html page</p>
</body>
<html>

42
HTML – Types of element
• Data representational elements (these elements use
nested structures)
Lists Lists tables
<ul> <ol> <h2>Table</h2>
<li>IWT</li> <li>IWT</li> <table border="1">
<li>OOP</li> <li>OOP</li> <tr>
<li>Database</li> <li>Database</li> <th>IWT</th>
</ul> </ol> <th>OOP</th>
<th>Database</th>
</tr>
</table> >

43
HTML
• You will learn more about these elements and their
use in practical class

• Learn more about HTML and HTML5

• https://www.w3schools.com/html/default.asp
• https://www.w3schools.com/html/html5_intro.asp

44
Question
• Write html code to display following personal data
• Name <!DOCTYPE html>
• age <html>
• School <head>
<title>My first page</title>
</head>
<body>
<h1>My name is Saman De Silva</h1>
<p>I am 70 years old</p>
<p>My School is ABC college</p>
</body>
</html>
45
Summary
• Data networks and the Internet
• Network Services and Protocols
• Web server and the Browser
• Markup languages

46