Fundamentals

A Brief Introduction to the Internet

Origins
 Department of Defence (DoD) became interested in developing large scale
computer network in 1960’s

 Communications, program sharing, and remote computer access for researchers

working on defense-related contracts.

 The DoD’s Advanced Research Projects Agency (ARPA) funded the research
organizations

 ARPAnet
BITnet, CSnet - late 1970s & early 1980s
email and file transfer for other institutions

NSFnet - 1986
Originally for non-DOD funded places
Initially connected five supercomputer centers
By 1990, it had replaced ARPAnet for non-military uses
Soon became the network for all (by the early 1990s)

NSFnet eventually became known as the Internet

What the Internet is:
A world-wide network of computer networks

At the lowest level, since 1982, all connections use TCP/IP

TCP/IP hides the differences among devices connected to the Internet

Internet Protocol Addresses (IP Address)
Every node has a unique numeric address
Form: 32-bit binary number

 Organizations are assigned groups of IPs for their computers

256 IP addresses- 191.57.126.0 to 191.57.126.255.

 Department of Defense, may be assigned 16 million IP addresses

12.0.0.0 to 12.255.255.255.
Domain names
 Difficult-remembering numbers-so machines on the Internet have textual names.

 These names begin with the name of the host machine, followed by progressively larger enclosing
collections of machines, called domains.

 Form: host-name.domain-names

 First domain is the smallest; last is the largest

 Last domain specifies the type of organization

 movies.marxbros.comedy.com

 Fully qualified domain name - the host name and all of the domain names
Domain Name Conversion
 The steps for conversion from DNS to IP

 The DNS has to be converted to IP address before destination is reached

 The conversion is needed because the computers can understand only

numbers

 The conversion is done with the help of name server

 As soon as the domain name is provided , it will be sent across the

internet to contact name servers
 This name server is responsible for converting domain name to IP

 If one of the name server is not able to convert DNS to IP, it contacts
other server

 This process continues until IP address is generated

 Once the IP address is generated, the host can be accessed.

 The host name and all domain name form Fully qualified Domain
Name
World Wide Web (WWW)
Origins
 In 1989, a small group of people led by Tim Berners-Lee at CERN(Conseil Européen
pour la Recherche Nucléaire )or European Organization for Particle Physics proposed
a new protocol for the Internet, as well as a system of document access to use it.

 To allow scientists around the world to use the Internet to exchange documents
describing their work.
 The proposed system was designed to allow a user anywhere on the Internet to
search for and retrieve documents from databases.

 In 1991, the system was ported to other computer platforms and released to the
rest of the world.

 The new system used hypertext.

What is Hypertext?
Hypertext is text displayed on a computer display or other electronic devices with
references (hyperlinks) to other text that the reader can immediately access.
 Hypertext has been developed and had appeared in Xerox’s NoteCards and Apple’s
HyperCard in the mid-1980s.

Web or Internet?
 The Internet is a collection of computers and other devices connected by equipment
that allows them to communicate with each other.

 The Web is a collection of software and protocols that has been installed on most of
the computers on the Internet.

 Some of these computers run Web servers, which provide documents, but most run
Web clients, or browsers, which request documents from servers and display them to
users.
Web Browsers
 When two computers communicate over some network, one acts as a client and the
other as a server.

 The client initiates the communication, which is often a request for information
stored on the server, which then sends that information back to the client.

 Documents provided by servers on the Web are requested by browsers, which are
programs running on client machines.

 They are called browsers because they allow the user to browse the resources
available on servers
 The first browsers were text based—they were not capable of displaying graphic
information, nor did they have a graphical user interface.

 Mosaic - NCSA (Univ. of Illinois), in early 1993

First to use a GUI, led to explosion of Web use
The first release of Mosaic ran on UNIX systems using the X Window system,
later on for Apple Macintosh and Microsoft Windows systems.

 Most requests are for existing documents, using HyperText Transfer Protocol
(HTTP)
But some requests are for program execution, with the output being returned as
a document
 Web Servers

 Servers are slave programs: They act only when requests are made to
them by browsers running on other computers on the Internet.

 The most commonly used Web servers are Apache

 It has been implemented for a variety of computer platforms, and

Microsoft’s Internet Information Server (IIS), which runs under
Windows operating systems
 Provide responses to browser requests, either existing documents or dynamically
built documents

 All communications between browsers and servers use Hypertext Transfer Protocol
(HTTP)

 Web Server-Apache,
Web Server Operation
 Web browsers initiate network communications with servers by sending them
URLs.

 A URL can specify-the address of a data file stored on the server or a program
stored on the server

• Web servers run as background processes in the operating system

– Monitor communications , accept HTTP commands through port, and perform
the operations specified by those commands.
 AllHTTP commands include a URL, which includes the
specification of a host server machine.

 When the URL is received, it is translated into either a file name

(in which case the file is returned to the requesting client) or a
program name (in which case the program is run and its output is
sent to the requesting client).
Uniform Resource Locators
Uniform (or universal)resource locators (URLs) are used to identify
documents (resources) on the Internet.

 General form:
scheme: object-address
The scheme is often a communications protocol, such as http,
telnet, ftp
ftp://internet.address.edu/file/path/file.txt

 For the http protocol, the object-address is: fully qualified domain
name/doc path
 //fully-qualified-domain-name/path-to-document
 For the file protocol, only the doc path is needed
 file://path-to-document

 Host name may include a port number (80 Default Port number)

 URLs cannot include spaces or any of a collection of other

special characters (semicolons, colons, ...)
URL Paths
 A path that includes all directories along the way is called a
complete path.

 The path to the document is relative to some base path that is

specified in the configuration files of the server. Such paths are
called partial path
Multipurpose Internet Mail Extensions (MIME)
 Originally developed for email

 Used to specify to the browser the form of a file returned by the

server (attached by the server to the beginning of the document)

Type specifications
Form:
type/subtype

Examples: text/plain, text/html, image/gif, image/jpeg

Video- mpeg and quicktime.

 Server gets type from the requested file name’s suffix (.html
implies text/html)

 Browser gets the type explicitly from the server

Experimental Document types

 Subtype begins with x-

 e.g., video/x-msvideo

 Experimental types require the server to send a helper application

or plug-in so the browser can deal with the file
HyperText Transfer Protocol
 The protocol used by ALL Web communications
 2Phases: Request Phase and Response Phase

The Request Phase

General Form:
1. HTTP method Domain part of URL HTTP version
2. Header fields
3. Blank line
4. Message body

An example of the first line of a request:

GET /degrees.html HTTP/1.1
HTTP Methods
 HTTP Response
Form:
1. Status line
2. Response header fields
3. Blank line
4. Response body

 Status line format:

HTTP version status code explanation
Example: HTTP/1.1 200 OK
 Status code is a three-digit number; first digit specifies the general
status
1 => Informational
2 => Success
3 => Redirection
4 => Client error
5 => Server error

404 Not Found

200 OK
500 - server has encountered a problem and was not
able to fulfill the request
HTTP Response Example
HTTP/1.1 200 OK
Date: Tues, 18 May 2004 16:45:13 GMT
Server: Apache (Red-Hat/Linux)
Last-modified: Tues, 18 May 2004 16:38:38 GMT
Etag: "841fb-4b-3d1a0179"
Accept-ranges: bytes
Content-length: 364
Connection: close
Content-type: text/html, charset=ISO-8859-1
• Both request headers and response headers must be followed by a
blank line
Introduction to HTML/XHTML
Origins and Evolution of HTML
 HTML is a markup language, which means it is used to mark parts of documents to
indicate how they should appear, in print or on a display.

 HTML is defined with the meta-markup language

 A meta-markup language is a language for defining markup languages

 Standard Generalized Markup Language (SGML), which is an International Standards

Organization (ISO) standard notation for describing information-formatting languages.
Versions of HTML and XHTML

Version Year
Initial version of HTML 1991
HTML 2.0 1995
HTML 3.2 1997
HTML 4.0 1997
HTML 4.1 1999
XHTML 1.0 2000
HTML 5 2012
XHTML 5 2013
Difference between XHTML and HTML
Basic Syntax
 Elements are defined by tags
Tag format:
Opening tag: <name>
Closing tag: </name>
The opening tag and its closing tag together specify a container for the content
they enclose
 Not all tags have content
If a tag has no content, its form is <name />
 The container and its content together are called an element
 <p> This is Web Technology </p>

 If a tag has attributes, they appear between its name and the right bracket of the opening tag
 <html lang = "en">

 Comment form: <!-- … -->

1. <!– – This is a comment – –>

2. <!– – AbcHome.html
This describes the home page of
Abc
– –>
 Browsers ignore comments, unrecognizable tags, line breaks, multiple spaces,
and tabs

 Tags are suggestions to the browser, even if they are recognized by the browser
Standard HTML Document Structure
 The first line of every HTML document is a DOCTYPE command
<!DOCTYPE html>

 It specifies the particular SGML Document-Type Definition (DTD) with which the
document complies.

 A document type definition (DTD) is a set of markup declarations that define a

document type for an SGML-family markup language.

 It defines the document structure with a list of validated elements and attributes.
 An HTML document must include the four tags <html>, <head>, <title>, and
<body>.

 The <html> tag identifies the root element of the document.

 HTML documents always have an <html> tag following the DOCTYPE

command and they always end with the closing html tag, </html>

 The html element includes an attribute

<html lang = "en">
 An HTML document consists of two parts, the head and the body.

 The head element provides information about the document but does not provide its
content.

 The head element always contains two simple elements, a title element and a meta
element.

 The meta element is used to provide additional information about a document.

 The meta tag specifies the character set used to write the document.
Basic skeletal document that illustrates the basic structure:
<!DOCTYPE html>
<!–– File name and document purpose ––>
<html lang = "en">
<head>
<title> A title for the document </title>
<meta charset = "utf-8" />
...
</head>
<body>
...
</body>
</html>
2.4 Basic Text Mark up
It tells us how the text content of an HTML document body can be formatted with HTML
tags

2.4.1 Paragraphs
 The HTML <p> element defines a paragraph.
 A paragraph always starts on a new line, and browsers automatically add some white
space (a margin) before and after a paragraph.
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
2.4.2 Line Breaks
 Text requires an explicit line break without the preceding blank line. This is exactly what
the break tag does
<br />
Example:
<p>
Hello my name is Sujayeendra Rao, <br />
Am Working at NIE, Mysuru</p>

Output:
Hello, my name is Sujayeendra Rao,
I am working at NIE, Mysuru.
2.4.4 Headings
 In HTML, there are six levels of headings, specified by the tags
<h1> ,<h2>,<h3>,<h4>,<h5>,<h6>.

 Headings are usually displayed in a boldface font whose default font size
depends on the number in the heading tag.
2.4.5 Block Quotations
Browser designers are allowed to determine how the content of <blockquote> can be
made to look different from the surrounding text.
blockquote.html
2.4.6 Font Styles and Sizes
Boldface - <b>
Italics - <i>
Larger - <big>
Smaller - <small>
Monospace - <tt> -Display text in mono space font.
Subscript -<sub>
Superscript-<sup>
Font Style and Sizes.html
Content-based style tags
They indicate the style of the text that appears in their content.
1. The emphasis element <em>
Specifies that its textual content is special and should be displayed in some way that
indicates this distinctiveness.

2. The strong element <strong>

Browsers often set the content of strong elements in bold.

3. The code element <code>

code is used to specify a monospace font, usually for program code
font.html
2.4.7 Character Entities
2.5.1 Image Formats
 GIF (Graphic Interchange Format)
 8-bit color representation for pixels (256 different colors)
 .gif (or .GIF) extension on their names.

 JPEG (Joint Photographic Experts Group)

 24-bit color representation for pixels (16 million different colors)
 .jpg (or .JPG or .jpeg) extension on their names.

Both use compression, but JPEG compression is better

 PNG (Portable Network Graphics )

 24-bit or 32 bit
 PNG is replacement for GIF and JPEG because it has the best characteristics of each.
2.5.2 The Image Element
 The image element includes two attributes:
 src - specifies the file containing the image
 alt -specifies text to be displayed when it is not possible to display the image.

 Two optional attributes of img:

 width and height- specifies (in pixels) the size of the image.

<img src = “sea.jpg" height = "200" width = "200"

alt = "Picture of a sea />
 A percentage value can be given for the width of an image
 It specifies the percentage of width that will be occupied by the image.
 For example, width = "50%" will result in the image filling half of the width of
the display

image.html
2.6 Hypertext Links
 It acts as a pointer to some particular place in some Web resource.

 Hypertext is a data which when clicked redirects us to some other location, while
the hyperlink is a link to a computer resource embedded in the hypertext.

 HTML document anywhere on the Web

 Document currently being displayed

2.6.1 Link
 A link that points to a different resource specifies the address of a
particular resource.

 Address might be a file name, a directory path and a file name, or a

complete URL.

 Links are specified in an attribute of an anchor element a

 The anchor element that specifies a link is called the source of that link.

 The document whose address is specified in a link is called the target of that
link.

 For creating links, only one attribute is required: href [hypertext reference]

 The value assigned to href specifies the target of the link.

 Public_html -> “WT/xyz.html” -> Relative path

 Absolute path -> Complete URL

• Links can have images:
<a href = "c210data.html“>
<img src = "smallplane.jpg"
alt = "Small picture of an airplane " />
Info on C210 </a>

hyperlink.html
HTML Lists
 HTML lists allow web developers to group a set of related items
in lists.

Types of Lists
 Unordered List
 Ordered List
 Definition List
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

 Can be nested.

<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
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:

 Can be nested

<ol>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
Definition lists
 are used to specify lists of terms and their definitions

 A definition list is given as the content of a dl element, which is a block element.

 Each term to be defined in the definition list is given as the content of a dt element.

 The definitions themselves are specified as the content of dd elements.

 The defined terms of a definition list are usually displayed in the left margin; the
definitions are usually shown indented on the line or lines following the term,
 <dl>: The Description List element.
<dt>: The Description Term element
<dd>: The Description Details element

<dl>
<dt>Coffee</dt>
<dd>- black hot drink</dd>
<dt>Milk</dt>
<dd>- white cold drink</dd>
</dl>
Tables
 A table is a matrix of cells.

 The content of a cell can be any document element, including text, a

heading, a horizontal rule, an image, or a nested table
8.1 Basic Table Tags

 Tables are given titles with the <caption> tag

 The row headings are specified as the content of a <th> tag

 Each row of a table is specified as the content of a <tr> tag

 The contents of a data cell is specified as the content of a <td> tag

 You can create a table using the <table> element.

 Inside the <table> element->

 <tr> tag elements to create rows
 <td> tag is used to create data cells
 <th> tag is used to create table heading

 Tabel.html
<table>
<caption> Fruit Juice Drinks </caption>
<tr>
<th> </th>
<th> Apple </th>
<th> Orange </th>
<th> Screwdriver </th>
</tr>
<tr>
<th> Breakfast </th>
<td> 0 </td>
<td> 1 </td>
<td> 0 </td>
</tr>
<tr>
<th> Lunch </th>
<td> 1 </td>
<td> 0 </td>
<td> 0 </td>
</tr>
</table>
Colspan and Rowspan attributes
 To make a cell span over multiple columns user needs to make use of colspan attribute
 To make a cell span over multiple rows user needs to make use of rowspan attribute

NIE

NIE
Cellpadding and Cellspacing Attributes

 cellpadding and cellspacing will be used to adjust the white space in your table
cells.

 The cellspacing attribute defines space between table cells, while cellpadding
represents the distance between cell borders and the content within a cell.

Cellspacing

Cellpadding
Forms
 The most common way for a user to communicate information from
a Web browser to the server is through a form

 An HTML form is used to collect user input. The user input is most
often sent to a server for processing.

 Every form whose data is to be processed on the server requires a

Submit button.

 When the user clicks the Submit button, the form data is encoded
and sent to the Web server
The form element
 All of the controls of a form appear in the content of a form element

 <form> tag can have several different attributes, only one of which,
action attribute is required.

 The action attribute specifies the URL of the application on the Web
server that is to be called when the user clicks the Submit button.
 The method attribute of <form> specifies which technique, get or post, will be used
to pass the form data to the server.

 The default is get, so if no method attribute is given in the <form> tag, get will be
used.

Example:
 <input>
 <label>
 <select>
 <textarea>
 <button>

 Form.html
The Input element
 One of the most used form element is the <input> element.

 The <input> element can be displayed in several ways, depending on

the type attribute.

Input Type Text

 <input type="text"> defines a single-line text input field.

 The default size of a text box is often 20 characters.

 size attribute is used to specify the size of the text box .

 Scrollbar will be included if the size is more than the text box

 maxlength attribute to specify the maximum number of characters

that the browser will accept in the box

<form action = "">

<p>
<input type = "text" name = "theName" size = "25"
maxlength = "25" />
...
</p>
</form>
Input Type Password
<input type="password"> defines a password field

<input type = "password" name = "myPassword"

size = "10" maxlength = "10" />
Input Type Radio
 <input type="radio"> defines a radio button.
Radio.html

 Radio buttons let a user select ONLY ONE of a limited number of

choices:

<label><input type = "radio" name = "age"

value = "under20" checked = "checked" />
0-19 </label>
<label><input type = "radio" name = "age"
value = "20-35" /> 20-35 </label>
Input Type Checkbox
 <input type="checkbox"> defines a checkbox.

 Checkboxes let a user select ZERO or MORE options of a limited

number of choices.

<label> <input type = "checkbox" name = "groceries"

value = "milk" checked = "checked" /> Milk </label>
<label> <input type = "checkbox" name = "groceries"
value = "bread" /> Bread </label>
The select Element
 The <select> element is used to create a drop-down list.

 The <select> element is most often used in a form, to collect user input.

 The name attribute is needed to reference the form data after the form is
submitted (if you omit the name attribute, no data from the drop-down
list will be submitted).

 The id attribute is needed to associate the drop-down list with a label.

 The <option> tags inside the <select> element define the available
options in the drop-down list.
 check.html
 With size = 1 (the default) –Scrollbar

 The multiple attribute specifies that multiple options can be selected at once

 <select name=“books" id=“book" multiple>

<form action = "">

<p>
With size = 1 (the default)
<select name = “books">
<option> C Sharp </option>
<option> </option>
<option> eggs </option>
</select></form>
The textarea Element
 The <textarea> tag in HTML is used to insert multiple-line text in a form. The size of
<textarea> can be specified either using "rows" or "cols" attribute or by CSS.

 The text typed into the area created by textarea is not limited in length, and there is
implicit scrolling when needed, both vertically and horizontally

<form>
Enter your address:<br>
<textarea rows="2" cols="20"></textarea>
</form>
 text_area.html
The Action Buttons
 The Reset button clears all of the controls in the form to their
initial states.

 Submit button has two actions: First, the form data is encoded
and sent to the server; second, the server is requested to execute
the server-resident program specified in the action attribute of
the <form> tag.

 The purpose of such a server-resident program is to process the

form data and return some response to the user.

 Neither Submit nor Reset buttons require name or id attributes.

<form action = "">
<p>
<input type = "submit" value = "Submit Form" />
<input type = "reset" value = "Reset Form" />
</p>
</form>