WEB TECHNOLOGY

INTODUCTION TO WEB TECHNOLOGY

INTERNET

 

• (the above is a very old figure showing an internet)
• each ellipse represents a network connecting a number of computers directly
• an internet is a federation of computer networks, connected by routers
• the Internet is the world-wide federation of packet-switched networks running TCP/IP
• important applications include email and the World Wide Web (WWW)

 

 

Part of the Internet

---

• (the above figure is taken from the book by Kurose and Ross)

Packet Switching

---

• early communication networks evolved from telephone systems
• used physical pair of wires between two parties to form a dedicated circuit
• circuit switching was the task of deciding which circuit to use when two parties wanted to communicate
• the circuit is reserved for the two parties during communication
• so it is not available to other parties
• the Internet uses packet switching which is considered more efficient
• packet switching
• divides data into small blocks, called packets
• allows multiple users to share a network
• includes identification of the intended recipient in each packet
• devices throughout the network each have information about how to reach each possible destination

BREIF HISTORY OF COMPUTER

---

• (1957) AJvanced Research Projects Agency (ARPA) established by US Department of Defense
• (1968-9) first packet-switching networks
• (1972) Telnet
• (1973) File Transfer Protocol (FTP); ARPANET goes international:
  • University College, London (UK)
  • Royal Radar Establishment (Norway)
• (1974) design of TCP (Transmission Control Protocol)
• (1977) email
• (1982) TCP and IP (Internet Protocol) used for ARPANET
• (1984) DNS (Domain Name Service) introduced
• (1991) WWW released



Growth of the Internet

---

Communication Protocols

---

• communication always involves at least two entities
  • one that sends information and another that receives it
• all entities in a network must agree on how information will be represented and communicated
  • the way that electrical signals are used to represent data
  • procedures used to initiate and conduct communication
  • the format of messages
• all communicating parties follow the same set of rules, a set of specifications
• a specification for network communication is called a communication protocol

Protocols and Layering

---

• computer networks are complex systems including both hardware and software
• rather than a single, huge specification for all possible forms of communication, designers divide the communication problem into subparts, called layers
• the interfaces between the layers are defined by protocols
• layers provide for modularity, making implementation and changes easier
• the combination of layers is sometimes called a protocol stack 

TCP/IP 5-layer Reference Model

---

• physical layer corresponds to the basic network hardware
• network interface, or link, layer specifies how data is divided into packets
• Internet layer specifies how packets are forwarded to particular machines over the Internet, using the Internet Protocol (IP)
• transport layer specifies how to communicate with particular processes on machines, using the Transmission Control Protocol (TCP) or User Datagram Protocol (UDP)
• application layer specifies how applications use the Internet, and includes protocols such as the HyperText Transfer Protocol (HTTP) and the Domain Name System (DNS)

TCP/IP layers with some protocols

---

• SMTP is the Simple Mail Transfer Protocol
• RTP is the Real-time Transport Protocol
• ICMP is the Internet Control Message Protocol
• DSL is the family of Digital Subscriber Line technologies
• SONET is the Synchronous Optical Networking protocol
• 802.11 are a set of wireless protocols (WiFi)

 Data parsing through layer

---

Headers and Layers

---

Internet Communication Paradigms

---

• Internet supports two basic communication paradigms:
  • stream paradigm
  • message paradigm

stream paradigm	message paradigm
connection-oriented	connectionless
one-to-one communication	many-to-many communication
sequence of individual bytes	sequence of individual messages
arbitrary length transfer	each message limited to 64 Kbytes
used by most applications	often used for multimedia applications
built on TCP protocol	built on UDP protocol

• we will focus on the stream paradigm

Connection-Oriented Communication

---

 

• the Internet stream service is connection-oriented
• two applications must request that a connection be created
• once it has been established, the connection allows the applications to send data in either direction
• finally, when they finish communicating, the applications request that the connection be terminated

Client-Server Model

---

Srver application	client application
starts first	starts second
does not need to know which client will contact  it	must know which server to contact
waits passively and arbitrarily long for contact from a client	initiates contact whenever communication is needed
communicates with a client by both sending and receiving data	communicates with a server by both sending and receiving data
stays running after servicing one client, and waits for another	may terminate after interacting with a server

Client Software   is an arbitrary application program that becomes a client temporarily when remote access is needed, but also performs other computation is invoked directly by a user, and executes only for one session runs locally on a user's personal computer actively initiates contact with a server can access multiple services as needed, but usually contacts one remote server at a time does not require especially powerful computer hardware Server Software   is a special-purpose, privileged program is dedicated to providing one service that can handle multiple remote clients at the same time is invoked automatically when a system boots, and continues to execute through many sessions runs on a large, powerful computer waits passively for contact from arbitrary remote clients accepts contact from arbitrary clients, but offers a single service requires powerful hardware and a sophisticated operating system (OS) Server Identification   Internet protocols divide identification into two pieces: an identifier for the computer on which a server runs an identifier for a service on the computer identifying a computer each computer on the Internet is assigned a unique 32-bit identifier known as an Internet Protocol address (IP address) 4 bytes written as n1.n2.n3.n4 where each ni is a decimal number, e.g., 18.23.0.22 a client must specify the server's IP address to make server identification easy for humans, each computer is also assigned a name, and the Domain Name System (DNS) is used to translate a name into an address thus, a user specifies a name such as www.dcs.bbk.ac.uk rather than an integer address Client-Server Interaction   following diagram illustrates client-server interaction client on the left server on the right

15 of 22

The World Wide Web

---

• The World Wide Web (WWW, or simply Web) is an information space accessible over the Internet
• items of interest, called resources are identified by global identifiers called Uniform Resource Identifiers (URIs), e.g., www.webtutorial786.blogspot.com
• conceived by Tim Berners-Lee and Robert Caillau; launched at CERN in 1991:
  • using HyperText Markup Language (HTML) for representation of resources
  • using HyperText Transfer Protocol (HTTP) for transport over the Internet
• hypertext and markup languages already existed, but HTML was simpler
• Web now comprises billions of resources, many represented using HTML
• ongoing development of Web specifications is overseen by the World Wide Web Consortium (W3C)
• W3C recommendations are de facto Web standards

Web Languages

---

 

• there are many languages used for representing information on the Web
• we will consider only
  • HTML (just a short overview)
  • XML (in some detail)
  • XHTML (the "XML version" of HTML)
• later on, we will also consider programming languages used on the Web, such as
  • Javascript (used in the browser)
  • PHP (used on the server)

HyperText Markup Language (HTML)

---

• document structure and hypertext specification language
• specified by the World Wide Web Consortium (W3C)
• latest candidate recommendation is HTML5 (August 2013)
• latest recommendation is HTML 4.01 (December 1999)
• designed to specify logical structure of information
• intended for presentation as Web pages
• text marked up with tags defining document's logical units, e.g.
  • title
  • headings
  • paragraphs
  • lists
• displayed properties of logical units determined by browser (and stylesheet, if present)

Elements and tags

---

• the logical units of documents are called elements
• an element is delimited by a start tag and an end tag
• tags are delimited by < and > characters
• example HTML head element:

  <head> <title>Elements and tags</title> </head>

• <head> is the start tag of the element
• </head> is the end tag of the element
• head is the element name
• <title>Elements and tags</title> is the element contents
• "Elements and tags" will be displayed in the title bar of the browser
• extra whitespace characters (e.g. space, tab, carriage return, line feed) are usually not significant

HTML Document Structure

---

• a document can be viewed as elements nested inside one another
• whole document is an html element, with a head element followed by a body element

  <html> <head> <title>Document title</title> </head> <body> <h1>First level heading</h1> <p> First paragraph </p> <p> Second paragraph </p> ... </body> </html>

• what is between < and > inclusive (i.e., in pink on slides) is markup;
  what is between > and < exclusive (i.e., in yellow on slides) is character data

Some Block-Level HTML Elements

---

Element name	Description
h1...h6	headings
p	paragraph
table	table
ol	ordered list
ul	unordered list
li	list item
br	line break
hr	horizontal rule
pre	preformatted text
div	division (often used for formatting with stylesheets)

• block-level elements are displayed with a line break before and after them
• they form the larger structural components of a document
• these are called flow elements in HTML5

Some In-line HTML Elements

---

Element name	Description
code	sample code
em	emphasis
a	anchor (for links)
img	inline image
span	often used for formatting with stylesheets

• in-line elements are displayed in the current line
• can generally only contain other in-line elements and text
• these are called phrasing elements in HTML5
• in fact, a can also be flow in HTML5, and img is called embedded

Attributes of Elements

---

• optional name-value pairs that are included in a start tag
  <tagname attribute="value">
• used to provide associated information or to modify the appearance of an element
• examples:
  <h1 align="center">
<img src="example.jpg" alt="An example image">
• using attributes such as align for formatting is now deprecated
• should rather use class or id attributes along with stylesheets
• order of attributes is not significant, e.g.,
  <img src="example.jpg" alt="An example image">
  is equivalent to
  <img alt="An example image" src="example.jpg">

Permissive Syntax of HTML

---

• HTML4 and HTML5 are both less strict than XHTML
• not all elements need start tags: e.g. head, body
• not all elements need end tags: e.g. head, body, p, li
• some elements (empty elements) must not have end tags: e.g. hr, br, img
• tag names are case insensitive
• quotes are not needed around most attribute values:
  e.g.,<table border=1>
• none of the above is true for XHTML

Limitations of (X)HTML

---

 

• (X)HTML defines a fixed set of elements (XHTML is one XML vocabulary)
• elements have document structuring semantics
• for presentation to human readers
• organisations want to be able to define their own elements
• applications need to exchange structured data too
• applications cannot consume (X)HTML easily
• move to XML for data exchange and (X)HTML for document representation

 

How to access blocked website very easy and secured hod (No download)