Internet tech & web prog. p4,5

Course Title :
Internet Techniques & Web programming
Course Code: CSC 357
PART : 4
Prof. Taymoor Mohamed Nazmy
Dept. of computer science, faculty of computer science, Ain Shams uni.
Ex-vice dean of post graduate studies and research Cairo, Egypt

What is CSS?
• CSS (Cascading Style Sheets) allows us to apply
formatting and styling to the HTML that builds
our web pages.
• CSS can control many elements of our web
pages: colors, fonts, alignment, borders,
backgrounds, spacing, margins, and much
more.

How does CSS work?
• CSS works in conjunction with HTML.
• An HTML file (or multiple files) links to a CSS file (or
multiple CSS files) and when the web browser displays the
page, it references the CSS file(s) to determine how to
display the content.
• HTML elements are marked with “IDs” and “classes,” which
are defined in the CSS file – this is how the browser knows
which styles belong where. Each element type (<h1>,
<img>, <p>, <li>, etc.) can also be styled with CSS.
– IDs and classes are defined by the person writing the code –
there are no default IDs and classes.

What is the difference between ID and
class?
• IDs and classes function the same way – they can both
provide the same styling functionality to an HTML element,
however…
– IDs are unique; each element can only have one ID, and that ID
can only be on the page once.
– Classes are not unique; an element can have multiple classes,
and multiple elements can have the same class.
• What does that mean?
– IDs can be used to style elements that are different from
anything else on the page.
– Classes can be used to style multiple elements on a single page
that have things in common, like font size, color, or style.

What does a CSS file look like?
• The styles for each element, ID, or class used on
an HTML page are defined in a CSS document.
#title { }
 Classes are declared with a period and the class name; styles for the class
are wrapped with curly brackets:
.bodytext { }
 IDs are declared with a pound sign and the ID name; styles for the ID are
wrapped with curly brackets:
 Elements are declared with the element (HTML) tag; styles for the
element are wrapped with curly brackets:
h1 { }

What does a CSS file look like?
• Within each CSS element, styles are added
that apply to that particular element/ID/class:
h1 {
color: green;
}
 This style would apply to anything within HTML <h1></h1>
tags; the text inside the tags would be green.

Adding CSS to HTML
• CSS must be used in conjunction with HTML to
be effective. CSS files can be linked to HTML
documents with a bit of code in the
<head></head> tags of an HTML file:
<link rel="stylesheet" type="text/css" href=“myfile.css" />
 CSS can also be written “in line,” within HTML code, but
it’s preferable to include an external style sheet:
<p style=“font-size: 14px;”>Lorem ipsum…</p>

Let’s write some CSS!
• We’ll work in a web-based editing tool, but CSS can
easily be written in text editing software like
Notepad.
• Go to http://dabblet.com/gist/9103656
– *This tool references our CSS automatically, so in this case, we don’t
need to link our CSS file like we normally would.

Adding IDs and Classes to HTML
• First, we need to add our IDs and classes to the HTML:
<h1>Wolverine</h1>
<img
src=http://www.uvu.edu/web/images/wolverine.jpg
class=“bordered” />
This class won’t do
anything yet. We’ll
define its associated
styles in our CSS file.

Adding IDs and Classes to HTML
<p id="introduction" class="emphasis">The
wolverine, also referred to as glutton, carcajou,
skunk bear, or quickhatch…
<p class="emphasis">The adult wolverine is
about the size of a medium dog, with a length
usually ranging from…
…
We’re adding a class and an ID
to this paragraph; we want the
styles from both to be applied
to it.We only want the styles
from one class to apply
to this paragraph.

Defining Elements in CSS
• We’ve added IDs and classes to our HTML file,
but we need to define what those IDs and
classes will do.
– How will each class or ID change the appearance
of that HTML element?
• This is where CSS comes in!
– By defining the styles that go with each
attribute/class/ID, we have complete control over
the look of our content.

Writing CSS
• Let’s create a new CSS document in Notepad.
• We’ll begin by defining the “bordered” class that is
applied to one of the images.
– CSS uses . to identify classes, and # to identify IDs. Because
our HTML indicates class=“bordered” we need to use the
matching identifier in our CSS document.
.bordered { }
All the styles inside these brackets will be applied to any
elements in our HTML file that include class=“bordered”.

Writing CSS
• First, let’s add a simple style to .bordered:
.bordered {
width: 300px;
}
Each style ends with a
semicolon.
 Now, any HTML element that includes class=“border” will be
300 pixels wide.

Writing CSS
• Let’s add a border to that image that has class=“bordered”.
– The “border” style requires some additional attributes.
.bordered {
width: 300px;
border: 3px solid #000000;
}
Tells the browser “I
want a border around
this element.”
The border
should be 3
pixels wide.
The border
should be solid.
(Other possible
values include
dotted and dashed.)
The border should
be black (defined
by hexadecimal
color code).

Using Colors in CSS
• Though there are standard color names that are supported
by all browsers (i.e. green, red, yellow, etc.), colors are
often declared in CSS using hexadecimal color codes.
• How can I find the hex color code?
Color picker tool in Photoshop/image
editing software.
Online tools:
http://www.w3schools.com/tags/ref_colorpicker.asp
Official UVU web colors:
http://www.uvu.edu/web/standards/

Writing CSS
• We want the image to be on the right side of the page,
so we need to add a “float” to the class styles:
.bordered {
width: 300px;
border: 1px solid #000;
float: right;
}
We could also align the element
to the left side of the page using
“float: left;”.

Writing CSS
• Next, let’s write some styles to apply to our
paragraphs. First, we’ll create styles for the ID called
“introduction.”
• We want this paragraph to stand out from the rest, so
we’ll make the font size bigger and change the color.
#introduction {
font-size: 20px;
color: #4d7123;
}

Writing CSS
• We want a few paragraphs to have some
additional emphasis, so let’s write an additional
class for those styles:
.emphasis {
font-style: italic;
font-weight: bold;
}
Other font-style options
include “underline,” and
“normal.”
Other font-weight options
include “normal,” “lighter,” or
numerical values.

Writing CSS
• We can also apply CSS styles to HTML elements
without using classes and IDs. These will apply to
any HTML element of that type, unless they are
overwritten by classes or IDs.
h1 {
font-family: “Arial”, sans-serif;
}
Any <h1> tag on the page will
be in Arial unless the <h1>
has a class that overwrites it.

Using Fonts in CSS
• Because every computer has a different set of fonts installed by
default, we can’t know for sure if our visitors will have a certain font
on their computer.
– If we design our site using a certain font, and a visitor doesn’t have
that font installed, our site will not look as we intended it to.
• Luckily, there is a set of “web safe” fonts that most computers have.
Choosing from these fonts will make our site look (almost) the same
on any computer.
• Web safe fonts include: Times New Roman, Georgia, Arial, Tahoma,
Verdana. More info:
http://www.w3schools.com/cssref/css_websafe_fonts.asp
– In CSS, the font-family style often includes a list of a few fonts, so that
there is a “fallback” option in case the font we specify first isn’t
available.

Writing CSS
• We may want the same styles to apply to more than
one element in our site. Combining our styles can help
us do this so that we don’t have to duplicate our CSS
code:
h1, h2 {
font-family: “Arial”, sans-serif;
}
Adding additional, comma-
separated elements, classes, or
IDs allows the same styles to be
used in more than one place.

More about CSS
• The possibilities with CSS are endless…this is just
scratching the surface
– CSS can: add rollover effects to text and images,
change background colors and images, create very
intricate page layouts and designs, change element
opacity, create gradient colors, control page layout in
adaptive/responsive design (new uvu.edu mobile-
friendly design), show and hide content, create
animations, and much more!
• A nice CSS “cheat sheet” is available at
http://www.w3schools.com/cssref/
• Find more CSS tutorials at
http://www.uvu.edu/web/training/basics.html

Embedded Styles: Example (2)
35
…
<body>
<h1 class="blue">A Heading</h1>
<p>Here is some text. Here is some text. Here
is some text. Here is some text. Here is some
text.</p>
<h1>Another Heading</h1>
<p class="blue">Here is some more text.
Here is some more text.</p>
<p class="blue">Here is some <em>more</em>
text. Here is some more text.</p>
</body>
</html>

…
<body>
<h1 class="blue">A Heading</h1>
<p>Here is some text. Here is some text. Here
is some text. Here is some text. Here is some
text.</p>
<h1>Another Heading</h1>
<p class="blue">Here is some more text.
Here is some more text.</p>
<p class="blue">Here is some <em>more</em>
text. Here is some more text.</p>
</body>
</html>
Embedded Styles: Example (3)
36

External Styles: Example (3)
37
…
<li>Bread
<ul>
<li>White bread</li>
<li>Rye bread</li>
<li>Whole wheat bread</li>
</ul>
</li>
<li>Rice</li>
<li>Potatoes</li>
<li>Pizza <em>with mushrooms</em></li>
</ul>
<a href="http://food.com" title="grocery
store">Go to the Grocery store</a>
</body>
</html>

…
<li>Bread
<ul>
<li>White bread</li>
<li>Rye bread</li>
<li>Whole wheat bread</li>
</ul>
</li>
<li>Rice</li>
<li>Potatoes</li>
<li>Pizza <em>with mushrooms</em></li>
</ul>
<a href="http://food.com" title="grocery
store">Go to the Grocery store</a>
</body>
</html>
External Styles: Example (4)
38

39
What is XHTML?
• XHTML stands for Extensible Hypertext Markup
Language
– XHTML is aimed to replace HTML
– XHTML is almost identical to HTML 4.01
– XHTML is a stricter and cleaner version of HTML
• XML (Extensible Markup Language) is a markup
language designed for describing data
– XHTML is HTML redefined as an XML application
– XHTML is a “bridge” between HTML and XML

40
The problem with HTML
• HTML started out as a way of way of describing
the structure of documents, with tags to indicate
headers, paragraphs, and the like
• Because people wanted to control the
appearance of documents, HTML acquired tags
to control fonts, alignment, etc.
• The result is a markup language that does both,
but isn’t very good at either

Introduction to XML
41
• XML stands for EXtensible Markup Language
• XML is a markup language much like HTML
• XML was designed to carry data, not to display
data
• XML tags are not predefined. You must define
your own tags
• XML is designed to be self-descriptive
• XML is a W3C Recommendation

XML is Not a Replacement for HTML
42
• It is important to understand that XML is not a
replacement for HTML. In most web
applications, XML is used to transport data,
while HTML is used to format and display the
data.

With XML You Invent Your Own Tags
43
• The tags used in HTML are predefined. HTML
documents can only use tags defined in the
HTML standard (like <p>, <h1>, etc.).
• XML allows the author to define his/her own
tags and his/her own document structure.

XML Separates Data from HTML
44
 If you need to display dynamic data in your HTML
document, it will take a lot of work to edit the HTML
each time the data changes.
 With XML, data can be stored in separate XML files.
This way you can concentrate on using HTML/CSS for
display and layout, and be sure that changes in the
underlying data will not require any changes to the
HTML.
 With a few lines of JavaScript code, you can read an
external XML file and update the data content of your
web page.

XML Simplifies Data Transport
45
• One of the most time-consuming challenges
for developers is to exchange data between
incompatible systems over the Internet.
• Exchanging data as XML greatly reduces this
complexity, since the data can be read by
different incompatible applications.

Course Title :
Internet Techniques & Web programming
Course Code: CSC 357
PART : 5
Prof. Taymoor Mohamed Nazmy
Dept. of computer science, faculty of computer science, Ain Shams uni.
Ex-vice dean of post graduate studies and research Cairo, Egypt

JavaScript Syntax
• The JavaScript syntax is similar to C# and Java
– Operators (+, *, =, !=, &&, ++, …)
– Variables (typeless)
– Conditional statements (if, else)
– Loops (for, while)
– Arrays (my_array[]) and associative arrays
(my_array['abc'])
– Functions (can return value)
– Function variables (like the C# delegates)
48

Data Types
• JavaScript data types:
– Numbers (integer, floating-point)
– Boolean (true / false)
• String type – string of characters
• Arrays
• Associative arrays (hash tables)
49
var myName = "You can use both single or double
quotes for strings";
var my_array = [1, 5.3, "aaa"];
var my_hash = {a:2, b:3, c:"text"};

Everything is Object
• Every variable can be considered as object
– For example strings and arrays have member
functions:
50
var test = "some string";
alert(test[7]); // shows letter 'r'
alert(test.charAt(5)); // shows letter 's'
alert("test".charAt(1)); //shows letter 'e'
alert("test".substring(1,3)); //shows 'es'
var arr = [1,3,4];
alert (arr.length); // shows 3
arr.push(7); // appends 7 to end of array
alert (arr[3]); // shows 7
objects.html

String Operations
• The + operator joins strings
• What is "9" + 9?
• Converting string to number:
51
string1 = "fat ";
string2 = "cats";
alert(string1 + string2); // fat cats
alert("9" + 9); // 99
alert(parseInt("9") + 9); // 18

Arrays Operations and Properties
• Declaring new empty array:
• Declaring an array holding few elements:
• Appending an element / getting the last element:
• Reading the number of elements (array length):
• Finding element's index in the array:
52
var arr = new Array();
var arr = [1, 2, 3, 4, 5];
arr.push(3);
var element = arr.pop();
arr.length;
arr.indexOf(1);

Standard Popup Boxes
• Alert box with text and [OK] button
– Just a message shown in a dialog box:
• Confirmation box
– Contains text, [OK] button and [Cancel] button:
• Prompt box
– Contains text, input field with default value:
53
alert("Some text here");
confirm("Are you sure?");
prompt ("enter amount", 10);

Sum of Numbers – Example
sum-of-numbers.html
54
<html>
<head>
<title>JavaScript Demo</title>
<script type="text/javascript">
function calcSum() {
value1 =
parseInt(document.mainForm.textBox1.value);
value2 =
parseInt(document.mainForm.textBox2.value);
sum = value1 + value2;
document.mainForm.textBoxSum.value = sum;
}
</script>
</head>

Sum of Numbers – Example (2)
sum-of-numbers.html (cont.)
55
<body>
<form name="mainForm">
<input type="text" name="textBox1" /> <br/>
<input type="text" name="textBox2" /> <br/>
<input type="button" value="Process"
onclick="javascript: calcSum()" />
<input type="text" name="textBoxSum"
readonly="readonly"/>
</form>
</body>
</html>

JavaScript Prompt – Example
prompt.html
56
price = prompt("Enter the price", "10.00");
alert('Price + VAT = ' + price * 1.2);

Greater than
<=
Symbol Meaning
>
< Less than
>= Greater than or equal to
Less than or equal to
== Equal
!= Not equal
Conditional Statement (if)
57
unitPrice = 1.30;
if (quantity > 100) {
unitPrice = 1.20;
}

Conditional Statement (if) (2)
• The condition may be of Boolean or integer type:
58
var a = 0;
var b = true;
if (typeof(a)=="undefined" || typeof(b)=="undefined") {
document.write("Variable a or b is undefined.");
}
else if (!a && b) {
document.write("a==0; b==true;");
} else {
document.write("a==" + a + "; b==" + b + ";");
}
conditional-statements.html

Switch Statement
• The switch statement works like in C#:
59
switch (variable) {
case 1:
// do something
break;
case 'a':
// do something else
break;
case 3.14:
// another code
break;
default:
// something completely different
}
switch-statements.html

Loops
• Like in C#
• for loop
• while loop
• do … while loop
60
var counter;
for (counter=0; counter<4; counter++) {
alert(counter);
}
while (counter < 5) {
alert(++counter);
} loops.html

Functions
• Code structure – splitting code into parts
• Data comes in, processed, result returned
61
function average(a, b, c)
{
var total;
total = a+b+c;
return total/3;
}
Parameters come in
here.
Declaring variables
is optional. Type is
never declared.
Value returned
here.

Function Arguments
and Return Value
• Functions are not required to return a value
• When calling function it is not obligatory to
specify all of its arguments
– The function has access to all the arguments passed
via arguments array
62
function sum() {
var sum = 0;
for (var i = 0; i < arguments.length; i ++)
sum += parseInt(arguments[i]);
return sum;
}
alert(sum(1, 2, 4)); functions-demo.html

How is JavaScript different from
Java?
• The JavaScript programming language, developed by Netscape, Inc., is not
part of the Java platform.
• JavaScript does not create applets or stand-alone applications. In its most
common form, JavaScript resides inside HTML documents, and can
provide levels of interactivity to web pages that are not achievable with
simple HTML.
• Key differences between Java and JavaScript: Java is an OOP
programming language while Java Script is an OOP scripting language.
• Java creates applications that run in a virtual machine or browser while
JavaScript code is run on a browser only.
• Java code needs to be compiled while JavaScript code are all in text.
• They require different plug-ins.

© 2004 Pearson Addison-
Wesley. All rights reserved
1-64
Java
• A programming language specifies the words and
symbols that we can use to write a program
• A programming language employs a set of rules
that dictate how the words and symbols can be put
together to form valid program statements
• The Java programming language was created by
Sun Microsystems, Inc.
• It was introduced in 1995 and it's popularity has
grown quickly since

© 2004 Pearson Addison-
Wesley. All rights reserved
1-65
Java Program Structure
• In the Java programming language:
– A program is made up of one or more classes
– A class contains one or more methods
– A method contains program statements
• These terms will be explored in detail
throughout the course
• A Java application always contains a method
called main

TCP/IP, Client /Server
architectures
67

TCP/IP
• First developed in the mid-1970s, by Defense
Advanced Research Projects Agency (DARPA)
– establishing a packet-switched network that would facilitate
communication between dissimilar computer systems at
research institutions
–
• The foundation on which the Internet and the World
Wide Web (WWW) are based.

Internet Protocol (IP)
• The Internet Protocol (IP) is a network-layer (Layer 3)
protocol that contains addressing information and some control
information that enables packets to be routed
• IP represents the heart of the Internet protocols.
• IP has two primary responsibilities:
– providing connectionless, best-effort delivery of datagrams through an
internetwork
– providing fragmentation and reassembly of datagrams to support data
links with different maximum-transmission unit (MTU) sizes

Transmission Control Protocol (TCP)
• Provides reliable transmission of data in an IP
environment.
• Services TCP provides
– Stream data transfer
• TCP delivers an unstructured stream of bytes identified by
sequence numbers
• TCP groups bytes into segments and passes them to IP for delivery.
– Reliability
• Providing connection-oriented, end-to-end reliable packet delivery

Internet Protocols Application-Layer Protocols
• The Internet protocol suite includes many application-layer
protocols that represent a wide variety of applications,
including the following:
– File Transfer Protocol (FTP)-Moves files between devices
– Simple Network-Management Protocol (SNMP)-Primarily
reports anomalous network conditions and sets network
threshold values
– Telnet-Serves as a terminal emulation protocol
– X Windows-Serves as a distributed windowing and graphics
system used for communication between X terminals and UNIX
workstations

Internet protocol suite
• The Internet protocol suite is the conceptual
model and set of communications protocols used on
the Internet and similar computer networks. It is
commonly known as TCP/IP because the original
protocols in the suite are the Transmission Control
Protocol (TCP) and the Internet Protocol (IP).
• The Internet protocol suite provides end-to-end data
communication specifying how data should be
packetized, addressed, transmitted, routed and
received.

Protocol layering
Protocols provide specialized services by
relying on services provided by lower-level
protocols (i.e., they leverage lower-level
services).
Reliable
byte stream
delivery
(process-
process)
Unreliable
best effort
datagram
delivery
(host-host)
Unreliable
best effort
datagram
delivery
(process-
process)
User application program (FTP, Telnet, WWW, email)
User datagram protocol
(UDP)
Transmission control
protocol (TCP)
Internet Protocol (IP)
Network interface (ethernet)
hardware Physical
connection
interface between user
code and OS code
(Sockets interface)

Encapsulation
TCP segment
header
data
data
Ethernet frame
header
IP datagram
header
TCP segment
header
data
IP datagram
header
TCP segment
header
data
Application program
TCP
IP
Adapter
Network
OS code
User code
User Interface (API)
OS/adapter interface
(exception mechanism)
Adapter/Network interface

Transmission Control Protocol (TCP)
– Efficient flow control
• When sending acknowledgments back to the source, the receiving
TCP process indicates the highest sequence number it can receive
without overflowing its internal buffers
– Full-duplex operation
• TCP processes can both send and receive at the same time
– Multiplexing
• Simultaneous upper-layer conversations can be multiplexed over a
single connection

Transmission Control Protocol
• Under the application layer in the protocol stack is the TCP layer.
When applications open a connection to another computer on the
Internet, the messages they send (using a specific application layer
protocol) get passed down the stack to the TCP layer.
• TCP is responsible for routing application protocols to the
correct application on the destination computer.
• To accomplish this, port numbers are used. Ports can be thought of
as separate channels on each computer. For example, you can surf
the web while reading e-mail.
• This is because these two applications (the web browser and the
mail client) used different port numbers. When a packet arrives at a
computer and makes its way up the protocol stack, the TCP layer
decides which application receives the packet based on a port
number.

• TCP works like this:
• When the TCP layer receives the application layer protocol
data from above, it segments it into manageable 'chunks'
and then adds a TCP header with specific TCP information
to each 'chunk'.
• The information contained in the TCP header includes the
port number of the application the data needs to be sent to.
• When the TCP layer receives a packet from the IP layer
below it, the TCP layer strips the TCP header data from the
packet, does some data reconstruction if necessary, and then
sends the data to the correct application using the port
number taken from the TCP header.
• This is how TCP routes the data moving through the
protocol stack to the correct application.

• TCP is not a textual protocol. TCP is a
connection-oriented, reliable, byte stream
service. Connection-oriented means that two
applications using TCP must first establish a
connection before exchanging data.
• TCP is reliable because for each packet
received, an acknowledgement is sent to the
sender to confirm the delivery. TCP also
includes a checksum in it's header for error-
checking the received data. The TCP header
looks like this:

Internet Protocol
• Unlike TCP, IP is an unreliable, connectionless protocol.
IP doesn't care whether a packet gets to it's destination or
not. Nor does IP know about connections and port
numbers.
• IP's job is too send and route packets to other
computers. IP packets are independent entities and may
arrive out of order or not at all. It is TCP's job to make sure
packets arrive and are in the correct order.
• About the only thing IP has in common with TCP is the
way it receives data and adds it's own IP header information
to the TCP data. The IP header looks like this:

• Above we see the IP addresses of the sending and
receiving computers in the IP header.
• Below is what a packet looks like after passing
through the application layer, TCP layer, and IP
layer.
• The application layer data is segmented in the
TCP layer, the TCP header is added, the packet
continues to the IP layer, the IP header is added,
and then the packet is transmitted across the
Internet.

• Hopefully the next router will know where to
send the packet. If it does not, again the packet is
routed upwards until it reaches a NSP backbone.
• The routers connected to the NSP backbones hold
the largest routing tables and here the packet will
be routed to the correct backbone, where it will
begin its journey 'downward' through smaller and
smaller networks until it finds it's destination.

• Eventually, the packets reach computer 5.6.7.8.
Here, the packets start at the bottom of the
destination computer's TCP/IP stack and work
upwards.
• As the packets go upwards through the stack, all
routing data that the sending computer's stack
added (such as IP address and port number) is
stripped from the packets.
• When the data reaches the top of the stack, the
packets have been re-assembled into their original
form, "Hello computer 5.6.7.8!"

The Ping Program
• If you're using Microsoft Windows and have a connection to
the Internet, there is a handy program to see if a computer on
the Internet is alive. It's called ping.
• If you are using Windows, start a command prompt window. If
you're using a flavor of Unix, get to a command prompt.
Type ping www.yahoo.com.
• The ping program will send a 'ping' (actually an ICMP
(Internet Control Message Protocol) echo request message) to
the named computer.

• The pinged computer will respond with a
reply. The ping program will count the time
expired until the reply comes back (if it does).
• Also, if you enter a domain name (i.e.
www.yahoo.com) instead of an IP address,
ping will resolve the domain name and display
the computer's IP address. More on domain
names and address resolution later.

General protocol suite description
• T ~ ~ ~ T
• [A] [B]_____[C]
• Imagine three computers: A, B, and C. A and B both have radio
equipment, and can communicate via the airwaves using a suitable
network protocol (such as IEEE 802.11.) B and C are connected via
a cable, using it to exchange data (again, with the help of a protocol,
for example Ethernet).
• However, neither of these two protocols will be able to transport
information from A to C, because these computers are conceptually
on different networks. One, therefore, needs an inter-network
protocol to "connect" them.

• One could combine the two protocols to form a powerful
third, mastering both cable and wireless transmission, but a
different super-protocol would be needed for each possible
combination of protocols.
• It is easier to leave the base protocols alone, and design a
protocol that can work on top of any of them (the Internet
Protocol is an example.) This will make two stacks of two
protocols each.
• The inter-network protocol will communicate with each of
the base protocol in their simpler language; the base
protocols will not talk directly to each other.

• A request on computer A to send a chunk of data to C is
taken by the upper protocol, which (through whatever
means) knows that C is reachable through B.
• It, therefore, instructs the wireless protocol to transmit the
data packet to B.
• On this computer, the lower layer handlers will pass the
packet up to the inter-network protocol, which, on
recognizing that B is not the final destination, will again
invoke lower-level functions.
• .

• This time, the cable protocol is used to send
the data to C. There, the received packet is
again passed to the upper protocol, which
(with C being the destination) will pass it on to
a higher protocol or application on C.
• Often an even higher-level protocol will sit on
top, and incur further processing

Internet Addresses
• Because the Internet is a global network of computers each
computer connected to the Internet must have a unique address.
Internet addresses are in the form nnn.nnn.nnn.nnn where nnn
must be a number from 0 - 255.
• This address is known as an IP address. (IP stands for Internet
Protocol; more on this later.)The picture below illustrates two
computers connected to the Internet; your computer with IP
address 1.2.3.4 and another computer with IP address 5.6.7.8.
ed.)

• If you connect to the Internet through an Internet
Service Provider (ISP), you are usually assigned a
temporary IP address for the duration of your dial-in
session. I
• f you connect to the Internet from a local area network
(LAN) your computer might have a permanent IP
address or it might obtain a temporary one from a
DHCP (Dynamic Host Configuration Protocol) server.
• In any case, if you are connected to the Internet, your
computer has a unique IP address.

• If we were to follow the path that the message
"Hello computer 5.6.7.8!" took from our
computer to the computer with IP address
5.6.7.8, it would happen something like this:

The process of sending a massage
over the internet
• The message would start at the top of the protocol stack on your
computer and work it's way downward.
• If the message to be sent is long, each stack layer that the message
passes through may break the message up into smaller chunks of
data. This is because data sent over the Internet (and most computer
networks) are sent in manageable chunks. On the Internet, these
chunks of data are known as packets.
• The packets would go through the Application Layer and continue to
the TCP layer. Each packet is assigned a port number.
• We need to know which program on the destination computer needs
to receive the message because it will be listening on a specific port.

• After going through the TCP layer, the packets proceed to the
IP layer. This is where each packet receives it's destination
address, 5.6.7.8.
• Now that our message packets have a port number and an IP
address, they are ready to be sent over the Internet. The
hardware layer takes care of turning our packets containing the
alphabetic text of our message into electronic signals and
transmitting them over the phone line.
• On the other end of the phone line your ISP has a direct
connection to the Internet. The ISPs router examines the
destination address in each packet and determines where to
send it. Often, the packet's next stop is another router. More on
routers and Internet infrastructure later.

How TCP/IP Works
Transfer Control Protocol
(TCP) breaks data into
small pieces of no bigger
than 1500 characters
each. These “pieces” are
called packets.
101010101001
101010011010
011010210101
010101011010
111101010111
011101110110
110000101110
110101010101
001110101001
010111101000
101010101001
101010011010
011010210101
010101011010
111101010111
011101110110
110000101110
110101010101
001110101001
010111101000

How TCP/IP Works
• Each packet is inserted
into different Internet
Protocol (IP)
“envelopes.” Each
contains the address of
the intended recipient
and has the exact same
header as all other
envelopes.

How TCP/IP Works
• A router receives the
packets and then
determines the most
efficient way to send
the packets to the
recipient.
• After traveling along a
series of routers, the
packets arrive at their
destination.

How TCP/IP Works
• Upon arrival at their
destination, TCP checks
the data for corruption
against the header
included in each packet.
If TCP finds a bad
packet, it sends a
request that the packet
be re-transmitted.

TCP/IP and Domain Names
• Basic task of IP – moving packets as quickly
as possible from one router to another
• Yet, it doesn’t check whether packets are
delivered successfully, thus need TCP
• TCP (Transmission Control Protocol) –
disassemble/reassemble packets, error
checking, ACK packets

• We need some sort of address in order to identify
different nodes, as if every house has a mailing
address in order to receive mail from others
• The one used by Internet Protocol is called IP
address.
• Every host on the Internet has a unique IP address,
made up of four numbers. E.g.. 192.56.215.131,
each number is between 0 and 255

• The numbers in an IP address is hard to remember, while
names are easier.
• Domain Name System – a mapping between the human-
readable name (domain name) of a host and its IP address.
• A domain name consists of two or more parts, e.g.
cs.pitt.edu
• The rightmost label conveys the top-level domain, e.g. edu

• Each label to the left specifies a subdomain, in our
example, subdomain is pitt (University of
Pittsburgh), and sub-subdomain is cs (computer
science).
• A top-level domain contains of multiple
subdomains, each subdomain can contain multiple
sub-subdomain, so on.
• The database contains the mapping between a
domain name and an IP address is stored on a
DNS server.

HTTP Authentication
• Protect web content from those who don’t have a “need to know”
• Require users to authenticate using a userid/password before they are
allowed access to certain URLs
• HTTP/1.1 requires that when a user makes a request for a protected
resource the server responds with a authentication request header
– WWW-Authenticate
• contains enough pertinent information to carry out a “challenge-response”
session between the user and the server
Web Server
Client
Client requests a protected resource
Server responds with a 401 (not
authorized and a challenge request
for the client to authenticate

Client Response
• Well established clients like Firefox, Internet Explorer …. will respond to
the challenge request (WWW-Authenticate) by presenting the user with a
small pop-up window with data entry fields for
– userid
– password
– a Submit button and a Cancel button
• entering a valid userid and password will post the data to the server, the
server will attempt authentication and if authenticated will serve the
originally requested resource.

WWW-Authenticate
• The authentication request received by the browser will look
something like:
– WWW-Authenticate = Basic realm=“defaultRealm”
• Basic indicates the HTTP Basic authentication is requested
• realm indicates the context of the login
– realms hold all of the parts of security puzzle
» Users
» Groups
» ACLs (Access Control Lists)
• Basic Authentication
– userid and password are sent base 64 encoded (might as well be plain
text)
– hacker doesn’t even need to unencode all he has to do is “replay” the blob
of information he stole over and over ( this is called a “replay attack”)

WWW-Authenticate
• Digest Authentication
– attempts to overcome the shortcomings of Basic Authentication
– WWW-Authenticate = Digest realm=“defaultRealm” nonce=“Server SpecificString”
– see RFC 2069 for description of nonce, each nonce is different
– the nonce is used in the browser in a 1-way function (MD5, SHA-1….) to encode the
userid and password for the server, this function essentially makes the password good
for only one time
• Common browsers don’t use Digest Authentication but an applet could as an
applet has access to all of the Java Encryption classes needed to create the
creation of a Digest.

WWW-Authenticate
• Secure Sockets Layer (SSL)
– Invented by Netscape and made public domain for everyone’s use
– An additional layer to the TCP/IP stack that sits between the Application
and Transport layers
• ensures that all application data is encrypted but TCP/IP headers are not
• usually run on port 443 (default HTTPS port)
• Public Key Cryptography
– owner of a private key sends a public key to all who want to communicate
with him (keys are both prime factors of a large (1024 bit) number).
Owner keeps the private key secret and uses it to decrypt information sent
to him that has been encrypted with the public-key
– RSA algorithm is most notable public-key cipher algorithm
• Digital Certificates
– issued by a disinterested third party (ex. Verisign)
– the Certificate contains the public-key for the specific Web Server and a
digital signature of the certifying authority

Security Requirements
• Confidentiality
– Preserving authorized restrictions on information
access and disclosure, including means for protecting
personal privacy and proprietary information.
• Integrity
– Guarding against information modifications or
destruction, including ensuring information non-
repudiation and authenticity.
• Availability
– Ensuring timely and reliable access to and use of
information

Security Attacks,
Mechanisms & Services
• Security Attack
– Any action that compromises the security of
information
• Security Mechanism
– A process / device that is designed to detect, prevent or
recover from a security attack.
• Security Service
– A service intended to counter security attacks,
typically by implementing one or more mechanisms.

114
Viruses and Worms
A computer virus is a small program that alters the
way a computer operates and often does various types
of damage by deleting and corrupting data and
program files, or by altering operating system
components, so that computer operation is impaired or
even halted.
Many different types of viruses, such as parasitic, boot
sector, stealth, polymorphic, and macro.

115
Viruses and Worms
A computer worm is a program that copies itself
from one system to another over a network,
without the assistance of a human being.
Worms usually propagate themselves by
transferring from computer to computer via e-mail.
Typically, a virus or a worm is transported as a
Trojan horse—in other words, hiding inside a
harmless-looking piece of code such as an e-mail
or an application macro.

116
Standard System Attacks
Two leading forms of attacks the last few years:
1. Exploiting known operating system vulnerabilities
2. Exploiting known vulnerabilities in application
software
For both of these, software company issues a patch.
Patch may fix it, or introduce even more holes.
Either way, bad guys find new holes and exploit.

117
Standard System Attacks
A very common way to attack vulnerability is via an e-
mail attachment. You open the attachment and you
launch the virus.
Second common way to attack is to simply scan your
computer ports while you are connected to the Internet
(either dial-up or non-dial-up). If you have an open
port, hacker will download malicious software to your
machine.

118
Other Standard System Attacks
Denial of service attacks, or distributed denial of service attacks, bombard a
computer site with so many messages that the site is incapable of answering
valid request.
In e-mail bombing, a user sends an excessive amount of unwanted e-mail to
someone.
Smurfing is a nasty technique in which a program attacks a network by
exploiting IP broadcast addressing operations.
Ping storm is a condition in which the Internet Ping program is used to send a
flood of packets to a server.
Spoofing is when a user creates a packet that appears to be something else or
from someone else.
Trojan Horse is a malicious piece of code hidden inside a seemingly harmless
piece of code.
Stealing, guessing, and intercepting passwords is also a tried and true form of
attack.

119
Physical Protection
Protection from environmental damage such as floods,
earthquakes, and heat.
Physical security such as locking rooms, locking down
computers, keyboards, and other devices.
Electrical protection from power surges.
Noise protection from placing computers away from
devices that generate electromagnetic interference.

120
Physical Protection - Surveillance
Proper placement of security cameras can deter theft and
vandalism.
Cameras can also provide a record of activities.
Intrusion detection is a field of study in which specialists try to
prevent intrusion and try to determine if a computer system has
been violated.
A honeypot is an indirect form of surveillance. Network
personnel create a trap, watching for unscrupulous activity

121
Basic Encryption and Decryption
Cryptography is the study of creating and using
encryption and decryption techniques.
Plaintext is the the data that before any encryption has
been performed.
Ciphertext is the data after encryption has been
performed.
The key is the unique piece of information that is used to
create ciphertext and decrypt the ciphertext back into
plaintext.

123
Monoalphabetic Substitution-based Ciphers
Monoalphabetic substitution-based ciphers replace a
character or characters with a different character or
characters, based upon some key.
Replacing: abcdefghijklmnopqrstuvwxyz
With: POIUYTREWQLKJHGFDSAMNBVCXZ
The message: how about lunch at noon
encodes into EGVPO GNMKN HIEPM HGGH

124
Polyalphabetic Substitution-based Ciphers
Similar to monoalphabetic ciphers except multiple
alphabetic strings are used to encode the plaintext.
For example, a matrix of strings, 26 rows by 26
characters or columns can be used.
A key such as COMPUTERSCIENCE is placed
repeatedly over the plaintext.
COMPUTERSCIENCECOMPUTERSCIENCECOMPUT
ER
thisclassondatacommunicationsisthebe
st

125
Digital Signatures
Document to be signed is sent through a complex
mathematical computation that generates a hash.
Hash is encoded with the owner’s private key then
stored.
To prove future ownership, stored hash is decoded
using the owner’s public key and that hash is
compared with a current hash of the document.
If the two hashes agree, the document belongs to the
owner.
The U.S. has just approved legislation to accept
digitally signed documents as legal proof.

126
Public Key Infrastructure
The combination of encryption techniques, software, and
services that involves all the necessary pieces to support digital
certificates, certificate authorities, and public key generation,
storage, and management.
A certificate, or digital certificate, is an electronic document,
similar to a passport, that establishes your credentials when you
are performing transactions.

127
A digital certificate contains your name, serial
number, expiration dates, copy of your public
key, and digital signature of certificate-issuing
authority.
Certificates are usually kept in a registry so
other users may check them for authenticity.

128
Certificates are issued by a certificate authority
(CA). A CA is either specialized software on a
company network or a trusted third party.
Let’s say you want to order something over the
Internet. The web site wants to make sure you
are legit, so the web server requests your
browser to sign the order with your private key
(obtained from your certificate).

129
The web server then requests your certificate from the
third party CA, validates that certificate by verifying
third party’s signature, then uses that certificate to
validate the signature on your order.
The user can do the same procedure to make sure the
web server is not a bogus operation.
A certificate revocation list is used to “deactivate” a
user’s certificate.

130
Applications that could benefit from PKI:
• World Wide Web transactions
• Virtual private networks
• Electronic mail
• Client-server applications
• Banking transactions

131
Steganography
The art and science of hiding information inside other,
seemingly ordinary messages or documents.
Unlike sending an encrypted message, you do not
know when steganography is hiding a secret message
within a document.
Examples include creating a watermark over an image
or taking “random” pixels from an image and
replacing them with the hidden data.

132
Securing Communications
So far we have examined standard system attacks,
physical protection, controlling access, and securing
data. Now let’s examine securing communications.
One way to secure the transfer of data is to scramble
the signal as it is being transmitted. This is called
spread spectrum technology.

133
Guarding Against Viruses
Signature-based scanners look for particular virus
patterns or signatures and alert the user.
Terminate-and-stay-resident programs run in the
background constantly watching for viruses and their
actions.
Multi-level generic scanning is a combination of
antivirus techniques including intelligent checksum
analysis and expert system analysis.

134
Firewalls
A system or combination of systems that supports an
access control policy between two networks.
A firewall can limit the types of transactions that enter
a system, as well as the types of transactions that leave
a system.
Firewalls can be programmed to stop certain types or
ranges of IP addresses, as well as certain types of TCP
port numbers (applications).

135
Firewalls
A packet filter firewall is essentially a router that has
been programmed to filter out or allow to pass certain
IP addresses or TCP port numbers.
A proxy server is a more advanced firewall that acts as
a doorman into a corporate network. Any external
transaction that request something from the corporate
network must enter through the proxy server.
Proxy servers are more advanced but make external
accesses slower.

138
Wireless Security
How do you make a wireless LAN secure?
WEP (Wired Equivalency Protocol) was the first
security protocol used with wireless LANs. It had
weak 40-bit static keys and was too easy to break.
WPA (Wi-Fi Protected Access) replaced WEP. Major
improvement including dynamic key encryption and
mutual authentication for wireless clients.

139
Wireless Security
Both of these should eventually give way to a new
protocol created by the IEEE - IEEE 802.11i.
802.11i allows the keys, the encryption algorithms,
and negotiation to be dynamically assigned.
Also, AES encryption based on the Rijndael algorithm
with 128-, 192-, or 256-bit keys is incorporated.

140
Security Policy Design Issues
What is the company’s desired level of security?
How much money is the company willing to invest in
security?
If the company is serious about restricting access
through an Internet link, what about restricting access
through all other entry ways?
The company must have a well-designed security
policy.

141
Network Security In Action: Making Wireless LANs
Secure
Recall Hannah the network administrator from
Chapters Seven, Eight, and Nine? Now her company
wants to add a wireless LAN to their system and make
it secure.
She needs to protect herself from war drivers.
Should she use WEP?
What about Cisco’s LEAP (Lightweight Extensible
Authentication Protocol)?

142
Network Security In Action: Making Wireless LANs
Secure
What about WPA? It is relatively new. Is the software
and hardware all compatible with WPA?
If she decides to use WPA, where does she have to
install the WPA software? In the user’s laptop? At the
wireless access point? At the network server? All the
above?

End of : Internet Techniques &
Web programming course

Internet tech & web prog. p4,5

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Similar to Internet tech & web prog. p4,5

Similar to Internet tech & web prog. p4,5 (20)

More from Taymoor Nazmy

More from Taymoor Nazmy (20)

Recently uploaded

Recently uploaded (20)