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>
