Chapter -1

Introduction to the Internet

1.1. What is the Internet?
The Internet also referred to as the net, in simplest terms, consists of a large group of millions of
computers around the world that are connected to one another. It is a network of networks that
consists of millions of private, public, academic, business, and government networks, local
to global scope, that are linked by a broad array of electronic, wireless and optical networking
technologies such as phone lines, fiber optic lines, coaxial cable, satellites, and wireless
connections.
The Internet seems to be everywhere today with many people and devices connected to
it. When connected to the Internet people can access services such as online shopping,
listen to radio and TV broadcast, chat, and send mail, access information, read newspaper and
So on. Today Internet is not only accessed from regular stationary computer but also from
mobile / portable devices such as Personal Digital Assistants (PDAs), cell phones, netbooks,
iPod, iPad, Palm Pilots and others.
Who owns the Internet?
There are many organizations, corporations, governments, schools, private citizens and service
providers that all own pieces of the infrastructure, but there is no one body that owns it all. No
one actually owns the Internet, and no single person or organization controls the Internet in its
entirety.

1.2. What is the “World Wide Web?”

The World Wide Web is a global, seamless environment in which all information (text,
images, audio, video, computational services) that is accessible from the Internet can be
accessed in a consistent and simple way by using a standard set of naming and
accessing conventions.
It is a system of interlinked hypertext documents that are accessed via the Internet. With a web
browser, one can see web pages that may contain text, images, videos, and other multimedia and
navigate between them via hyperlinks. Hyperlink is a reference to data that the reader can
directly follow either by clicking or by hovering on it.
Tim Berners-Lee, a British computer scientist is known as the inventor of the web.

1.3. The Web and the Internet

Although the Internet and the World Wide Web are used interchangeably, they are not the same
thing. The Internet is the hardware part - it is a collection of computer networks connected
through either copper wires, fiber optic cables or wireless connections whereas, the World Wide
Web can be defined as the software part - it is a collection of web pages connected by hyperlinks
and referenced with Uniform Resource Identifiers(URI). In short, the World Wide Web is one of
the services provided by the Internet. Other services over the Internet include e-mail, chat, and
telephony and file transfer services.

1.4. How the World Wide Web Works

The Web works on a client-server basis. Your computer is the client and the remote computers
that store electronic files are the servers.

Here is how the web works:

When you enter something like http://www.google.com, the request goes to one of many special
computers on the Internet known as Domain Name Servers (DNS). All these requests are routed
through various routers and switches. The domain name servers keep tables of machine names
and their IP addresses, so when you type in http://www.google.com, it gets translated into a
number, which identifies the computers that serve the Google Web site to you.

When you want to view any page on the Web, you must initiate the activity by requesting a page
using your browser. The browser asks a domain name server to translate the domain name you
requested into an IP address. The browser then sends a request to that server for the page you
want, using a standard called Hypertext Transfer Protocol or HTTP.

The server should constantly be connected to the Internet ready to serve pages to visitors. When
it receives a request, it looks for the requested document and returns it to the Web browser.
When a request is made, the server usually logs the client's IP address, the document requested,
and the date and time it was requested.

In short, we can summarize these steps as follows:

 A user enters a URL into a browser (for example, http://www.google.com). This request
is passed to a domain name server.

 The domain name server returns an IP address for the server that hosts the Web site (for
example, 68.178.157.132).

 The browser requests the page from the Web server using the IP address specified by the
domain name server.

 The Web server returns the page to the IP address specified by the browser requesting the
page. The page may also contain links to other files on the same server, such as images,
which the browser will also request.

 The browser collects all the information and displays to your computer in the form of
Web page.

Fig.1.1. Web browser (client) and Web server communication

1.5. Internet Programming

Internet programming is the process of developing services (applications) that run on the
Internet. Internet programming includes broad variety of technologies spanning such diverse
areas such as protocols for communication networks, interfacing to databases, programming of
graphical user interfaces, or structuring information.

A web service is a kind of client/server process i.e.it needs interaction between client and server
computers. Therefore, Internet programming can be divided into two parts:

Client- side programming - to define the operations to be performed on the client’s machine
Server-side programming - to define the operations to be performed on the server

Skills required for Client –side programming Skills required for Server – side programming

 HTML,XHTML  PHP
 CSS  ASP
 JavaScript  JSP
 XML etc.  SQL and other database concepts etc.

Chapter -2
Web page development using HTML
2.1. What is HTML?
HTML stands for Hyper Text Mark-up Language. It is the language for building web pages and consists
of standardized codes or “tags” that are used to define the structure of information on the web page.

 HTML is not a programming language; it is a markup language

 A Markup language is a collection of markup tags
 HTML uses Mark up tags to describe web pages

2.2. What are HTML Tags?

 HTML tags are keywords (tag names) surrounded by angle brackets like <html> in the form of

<tagname>content</tagname>

 Each HTML tag describes different document content

 HTML tags normally come in pairs like <p></p>
 The first tag in a pair is the start tag; the second tag is the end tag
 The end tag is written like the start tag, but with a slash before the tag name
 The start tag is often called the opening tag. The end tag is often called the closing tag.

2.3. What are HTML Documents?

 HTML documents describe web pages
 Web page is a text file marked up with HTML
 HTML documents contain HTML tags and plain text
2.4. Getting started with HTML
What tools do you need to get started?

 A Computer installed with a Browser (Example, Mozilla Firefox, Internet Explorer, Google chrome)
o The purpose of a browser is to read html documents and display them as web pages. The
browser doesn’t display the html tags but uses them to interpret the content of a page.
 Text editor (Example: Notepad, WordPad, Gedit ,emacs)
o The purpose of a text editor is for writing the html code

Steps for writing and running an html document:

 Write the html document in any text editor

 Save it with .html or .htm extension in your computer
 Then open the html document with any web browser

2.5. HTML Document Structure

A typical HTML document will have the following general structure:

DOCTYPE Declaration
<html>
<head>
Header related tags
</head>
<body>
Body related tags
</body>
</html>

2.5.1. DOCTYPE Declaration

An HTML document starts with DOCTYPE declaration that declares the version of HTML to which the
document conforms. The need for the DOCTYPE declaration is that web browsers need to know what
version of HTML/XHTML your web page is written in so that they will know how to display it.

The DOCTYPE declaration names the document type definition (DTD) in use for the document. A
Document Type Definition (DTD) is a set of Markup declarations that define an HTML document
structure with a list of legal elements and attributes. This DTD is associated with html document by
means of Document Type Declaration (DOCTYPE Declaration).

A Document Type Declaration does the following two things:

1. When performing HTML validation testing on a web page it tells the HTML validator which
version of HTML standard is used for writing the web page.
2. It tells the browser how to render the page in standards compliant mode.

Browsers have two modes, Quirk and Standard.

Quirk Mode – renders the page as it would appear in old browsers. If there is no DOCTYPE
declaration, the browser will go into Quirk mode.

Standard Mode – will render the page as intended if the web page coding is valid.

What happens if the DOCTYPE declaration is not included or is incorrect?

1. You will not be able to use HTML validator to check the html document. HTML validation
requires DOCTYPE declaration.
2. The browser rendering the web page will process the coding in Quirks mode.
3. The style sheet may not be implemented as planned

Style sheet is a styling language

There are many DOCTYPE declaration types which can be used in HTML depending on what version of
HTML is being used.

Since its initial introduction in late 1991, HTML has undergone many changes. But the first real standard
was HTMLL 2.0. Other HTML versions are HTML 3.0, HTML 3.2, HTML 4.0, HTML 4.01, XHTML
1.0, and HTML 5.

HTML 4.01 and XHTML 1.0 are commonly used for developing web applications. HTML 5 is the future
html version for developing web applications.

HTML 4.01 has three different document types: Strict, Transitional, Frameset. Therefore, each
document type needs a different DOCTYPE declaration.
i) Strict – The strict type is used with cascading style sheets and helps to ensure a clutter-free coding.

A clutter – free code is a code where the content is separated from the
presentation

The Strict type uses the following DOCTYPE declaration:

<! DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"

"http://www.w3.org/TR/html4/strict.dtd">
ii) Transitional –The transitional type is used when presentational features are included in the
document instead of in a style sheet. This is done to accommodate older browsers that don’t support
CSS. The transitional type uses the following DOCTYPE declaration:

<! DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 TRANSITIONAL//EN">

"http://www.w3.org/TR/html4/strict.dtd">
iii) Frameset – The frameset type is used in html documents that have frames.

HTML frames allow authors to present documents in multiple views, which may be
independent windows or sub windows.

<! DOCTYPE HTML PUBLIC "-W3C//DTD HTML 4.01 Frameset//EN"

"http://www.w3.org/TR/html4/frameset.dtd">

2.5.2 html

Immediately after the DOCTYPE comes the <html> tag. It indicates that the contents of the page are in
HTTML.

The html element is the root element of the document tree and everything that follows is a descendant of
that element.

The html element breaks the html document into main sections – the head and body.

 <html> is the first tag of any HTML page.

 </html> has to be the last tag of any HTML page
2.5.3 Head

The head element contains metadata – information that describes the document itself, such as its title or
associates it with related resources, such as scripts and style sheets. The head element consists of the
following other elements.

The title tag –represents the document’s title or name. The content in the title is used to provide a heading
that appears in the browser’s title bar.

The link tag – tag defines a link between a document and an external resource, most often it is used to
link to external style sheets.

The meta tag – provides extra information about the web page; for example, which character encoding
the page uses, a summary of the page’s content etc.

The script tag - used to either to embed or refer to an external script.

The style tag - provides an area for internal page-specific) CSS styles.

All of these elements are optional and can appear in any order within the head

2.5.4 body

Defines the document’s body. Everything that you can see in the browser window (or viewport) is
contained inside this element, including paragraphs, lists, links, images, tables, and more.

2.6 HTML elements and Attributes

2.6.1 HTML elements

HTML documents are made up of HTML elements. An HTML element is everything from the start tag to
the end tag. HTML elements are written with a start tag, with an end tag, and with the content in
between:

<tagname>content</tagname>
HTML elements follow a certain format regardless of how the element is used:
 An HTML element starts with a start tag/opening tag
 An HTML element ends with an end tag/closing tag
 The element content is everything between the start tag and end tag
 Some html elements don’t have content, hence are called empty elements (e.g. img, hr)
 Empty elements are closed in the start tag (e.g. <br/>)
 HTML elements can be nested in other html elements
 Most HTML elements can have attributes i.e.
Examples of html elements:

The <html> element - defines the whole document.

 It has a start tag <html> and an end tag </html>.

 The element content is another HTML element (the <body> element).

<html>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>

The <body> element - defines the document body.

 It has a start tag <body> and an end tag </body>.

 The element content is two other HTML elements (<h1> and <p>).

<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>

The <h1> element - defines a heading.

 It has a start tag <h1> and an end tag </h1>.

 The element content is: My First Heading.

<h1>My First Heading</h1>

The <p> element - defines a paragraph.

 It has a start tag <p> and an end tag </p>.

 The element content is: My first paragraph.

<p>My first paragraph.</p>

Empty HTML elements

 HTML elements with no content are called empty elements.

 <br> is an empty element without a closing tag (the <br> tag defines a line break).
 Empty element can be "closed" in the opening tag like this: <br />.
2.6.2 HTML Attributes

Attributes provide additional information about HTML elements.

 HTML elements can have attributes

 Attributes provide additional information about an element
 Attributes are always specified in the start tag
 Attributes come in name/value pairs like: name="value"

Examples of HTML Attributes:

The lang Attribute

 The document language can be declared in the <html> tag.

 The language is declared in the lang attribute.
 Declaring a language is important for accessibility applications (screen readers) and search
engines:

<!DOCTYPE html>
<html lang="en-US">
<body>
<h1>My First Heading</h1>

<p>My first paragraph.</p>

</body>
</html>

The href Attribute

HTML links are defined with the <a> tag. The link address is specified in the href attribute:

Size Attributes

HTML images are defined with <img> tag. The file name of the source (src), and the size of
the image (width and height) are all provided as attributes:

Example: <img src=" img1.jpg " width="104" height="242"/>

The image size is specified in pixels: width="104" means 104 screen pixels wide.
The alt Attribute
The alt attribute specifies an alternative text to be used, when an HTML element cannot be displayed.
The value of the attribute can be read by "screen readers". This way, someone "listening" to the webpage,
i.e. a blind person, can "hear" the element.

Example: <img src="giraffe.jpg" alt="Photo of a Giraffe” width="104" height="142">

2.7. HTML text formatting

HTML use tags like <b>, <i> to modify the appearance of text, like bold or italic. These HTML tags are
called formatting tags.

Formatting elements were designed to display special types of text:

 Bold text  Small text

 Important text  Deleted text
 Italic text  Inserted text
 Emphasized text  Subscripts
 Marked text  Superscripts

2.7.1 HTML Bold and Strong Formatting

The HTML <b> element defines bold text, without any extra importance.

Example:

Html code Output

<p>This text is normal.</p> This text is normal.
<p><b>This text is bold</b>.</p>
This text is bold.

The HTML <strong> element defines strong text, with added semantic "strong" importance.

Example:

Html code Output

<p>This text is normal.</p> This text is normal.

<p><strong>This text is strong.</strong></p> This text is strong.

Other formatting elements

2.8. HTML Styling

Every HTML element has a default style (background color is white, text color is black, text-size is
12px…). Changing the default style of an HTML element, can be done with the style attribute.
This example changes the default background color from white to lightgrey:
Example:
<body style="background-color:lightgrey">
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>

2.8.1 The HTML Style Attribute

The HTML style attribute has the following syntax:

style="property:value"

The following are commonly used properties:

 Use background-color for background color

 Use color for text colors
 Use font-family for text fonts
 Use font-size for text sizes
 Use text-align for text alignment

2.9. HTML Links

Links are found in nearly all web pages. Links allow users to click their way from page to page. A link is
the “address” to a document (or a resource) located on the World Wide Web or elsewhere within your
own web server.

HTML links are also called hyperlinks. A hyperlink can be an element, a text, or an image that you can
click on, and jump to another document.

2.9.1 HTML Links - Syntax

In HTML, links are defined with the <a> tag.

Link Syntax: <a href="url">link text</a>

Example:

<!DOCTYPE html>
<html>
<body>
<p>
<a href=" http://www.w3schools.com/)">Visit w3schools</a>
</p>
</body>
</html>

 The href attribute specifies the destination address (http://www.w3schools.com/)

 The link text is the visible part (Visit w3schools).
 Clicking on the link text, will send you to the specified address.

2.9.2 HTML Links - The target attribute

The target attribute specifies where to open the linked document.

This example will open the linked document in a new browser window or in a new tab:

Example: <a href="http://www.w3schools.com/" target="_blank">Visit W3Schools!</a>

Target Value Description

_blank Opens the linked document in a new window or tab

_self Opens the linked document in the same frame as it was clicked (this is default)

_parent Opens the linked document in the parent frame

_top Opens the linked document in the full body of the window

2.9.3 HTML Links - Image as Link

It is common to use images as links:

Example:

<a href="default.asp">
<img src="smiley.gif" alt="HTML tutorial" style="width:42px;height: 42px">
</a>

2.10. HTML Images

2.10.1 img Tag and the src attribute

In HTML, images are defined with with the <img> tag. The img tag is empty which means that it contains
attributes only and it has no closing tag.

To display an image on a page, you need to use the src attribute. src stands for “source”. The value of the
src attribute is the URL of the image you want to display on your page.

The syntax of defining an image:

<img src="url" />

The URL points to the location or address where the image is stored. An image file named "boat.gif"
located in the directory "images" on "http://www.w3schools.com/" has the url:

http://www.w3schools.com/images/boat.gif

2.10.2 The alt attribute

The alt attribute is used to define an alternate text for an image. The alt attribute tells the reader what he
or she is missing on a page if the browser can’t load images. The browser will then display the alternate
text instead of the image.

The value of the alt attribute is an author-defined text:

<img src="boat.gif" alt="Big Boat">

It is a good practice to include alternate text for every image on a page to improve the display and
usefulness of your document for people who have text-only browsers.

The alt attribute also helps to create accessible web pages for users with disabilities, especially those with
vision impairments who use text-based browsers.

Specialized software called a speech synthesizer can “speak” the alt attributes value so that a user with a
visual impairment knows what the browser is displaying.

2.11. HTML Tables

Tables are an excellent way to organize and display information on a page. Tables are defined using the
<table> tag. A table is divided into rows with the <tr> tag, and each row is divided into data cells using
the <td> tag. The letters td stand for “table data,” which is the content of a data cell. A data cell can
contain text, images, lists, paragraphs, forms, horizontal rules, tables, and so on.

2.11.1 Defining HTML Tables

Example: Example Explained:
<table style="width:100%">
<tr>  Tables are defined with the <table> tag.
<td>Jill</td>
 Tables are divided into table rows with
<td>Smith</td>
the <tr> tag.
<td>50</td>
</tr>  Table rows are divided into table
<tr> data with the <td> tag.
<td>Eve</td>  A table row can also be divided into table
<td>Jackson</td>
headings with the <th> tag.
<td>94</td>
</tr>
</table>

2.11.2 An HTML Table with a Border Attribute

If you do not specify a border for the table, it will be displayed without borders.
A border can be added using the border attribute:
Example:
<table border="1" style="width:100%">
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
</table>

2.11.3 An HTML Table with Cell Padding

Cell padding specifies the space between the cell content and its borders. If you do not specify padding,
the table cells will be displayed without padding. To set the padding, use the CSS padding property:
Example:
<table border="1" style="padding:15xp" >
…
</table>
2.11.4 HTML Table Headings

Table headings are defined with the <th> tag. By default, all major browsers display table headings as
bold and centered:
<table style="width:100%">
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Points</th>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
</table>

2.11.5 Table Cells that Span Many Columns

To make a cell span more than one column, use the colspan attribute:

Example:
<table style="width:100%">
<tr>
<th>Name</th>
<th colspan="2">Telephone</th>
</tr>
<tr>
<td>Bill Gates</td>
<td>555 77 854</td>
<td>555 77 855</td>
</tr>
</table>

2.11.6 Table Cells that Span Many Rows

To make a cell span more than one row, use the rowspan attribute:

Example:
<table style="width:100%">
<tr>
<th>First Name:</th>
<td>Bill Gates</td>
</tr>
<tr>
<th rowspan="2">Telephone:</th>
<td>555 77 854</td>
</tr>
<tr>
<td>555 77 855</td>
</tr>
</table>

2.11.7 An HTML Table with a Caption

To add a caption to a table, use the <caption> tag:

Example:
<table style="width:100%">
<caption>Monthly savings</caption>
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>February</td>
<td>$50</td>
</tr>
</table>

The <caption> tag must be inserted immediately after the <table> tag.

2.12 HTML Lists

HTML can have Unordered Lists, Ordered Lists, or Description Lists:

Unordered HTML List Ordered HTML List HTML Description List

 The first item 1. The first item The first item

 The second item 2. The second item Description of item
 The third item 3. The third item The second item
 The fourth item 4. The fourth item Description of item

2.12.1 Unordered HTML Lists

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).
Example:
<!DOCTYPE html>
<html>
<body>

<h2>Unordered List with Default Bullets</h2>

<ul>
<li>Apples</li>
<li>Bananas</li>
<li>Lemons</li>
<li>Oranges</li>
</ul>

</body>
</html>

Unordered HTML Lists - The Style Attribute

A style attribute can be added to an unordered list, to define the style of the marker:

Style Description
list-style-type:disc The list items will be marked with bullets (default)
list-style-type:circle The list items will be marked with circles
list-style-type:square The list items will be marked with squares
list-style-type:none The list items will not be marked

2.12.2 Ordered HTML Lists

An ordered list starts with the <ol> tag. Each list item starts with the <li> tag.
The list items will be marked with numbers.
Example:
<!DOCTYPE html>
<html>
<body>
<h2>Ordered List</h2>
<ol>
<li>Coffee</li>
<li>Tea</li>
</ol>
</body>
</html>

Ordered HTML Lists - The Type Attribute

A type attribute can be added to an ordered list, to define the type of the marker:

Type Description

type="1" The list items will be numbered with numbers (default)

type="A" The list items will be numbered with uppercase letters

type="a" The list items will be numbered with lowercase letters

type="I" The list items will be numbered with uppercase roman numbers

type="i" The list items will be numbered with lowercase roman numbers
2.12.3 HTML Description Lists
A description list, is a list of terms, with a description of each term.

 The <dl> tag defines a description list.

 The <dt> tag defines the term (name), and the <dd> tag defines the data (description).

Example:

<!DOCTYPE html>
<html>
<body>

<h2>A Description List</h2>

<dl>
<dt>Coffee</dt>
<dd>- black hot drink</dd>

<dt>Milk</dt>
<dd>- white cold drink</dd>
</dl>

</body>
</html>

2.12.4 Nesting html lists

List can be nested (lists inside lists).
Example:
<!DOCTYPE html>
<html>
<body>

<h2>A Nested List</h2>

<ul>
<li>Coffee</li>
<li>Tea
<ul>
<li>Black tea</li>
<li>Green tea</li>
</ul>
</li>
<li>Milk</li>
</ul>

</body>
</html>