IT8005

E- Commerce
DEPARTMENT OF INFORMATION TECHNOLOGY
REGULATION 2017
SEMESTER: 8

Ms Anju A
Assistant Professor,
IT Department
 UNIT I
INTRODUCTION TO E-COMMERCE AND TECHNOLOGY
INFRASTRUCTURE

Working of Web - HTML Markup for Structure - Creating simple page - Marking
up text - Adding Links - Adding Images - Table Markup - Forms - HTML5
• Web Essentials:
– Clients
– Servers
– Communication
• Basic Internet Protocols :
– IP,TCP,UDP,DNS
World Wide Web:
– HTTP request message-response message
• Web Clients
• Web Servers
• Markup Languages:
– XHTML.
– HTML
– XHTML Syntax and Semantics
• Some Fundamental HTML Elements
- Relative URLs
- Lists
- tables
- Frames
- Forms
- HTML 5.0.
DEFINITION
 Web technology refers to the means by which computers communicate

with each other using mark up languages and multimedia packages.

 It gives us a way to interact with hosted information, like websites.

 Web technology involves the use of hypertext markup language (HTML)

and cascading style sheets (CSS)

Web Essentials: Clients, Servers, and
Communication
The Internet
Basic Internet Protocols
The World Wide Web
HTTP request message
HTTP response message
Web Clients
Web Servers
The Internet
• A network of networks, joining many government, university and private
computers together and providing an infrastructure for the use of E-mail, file
archives, hypertext documents, databases and other computational resources
• The vast collection of computer networks which form and act as a single
huge network for transport of data and messages across distances which can
be anywhere from the same office to anywhere in the world.
Basic Internet protocols
- A computer communication protocol is a detailed specification of how
communication between two computers will be carried out in order to
serve some purpose

- Basic protocols are

- TCP/IP

- UDP

- DNS and Domain Names

Protocol
 A network protocol is an established set of rules that determine how data is
transmitted between different devices in the same network.
 It allows connected devices to communicate with each other, regardless of
any differences in their internal processes, structure or design.
TCP (Transmission Control Protocol )
 Reliable, full-duplex, connection-oriented, stream delivery
 Interface presented to the application doesn’t require data in
individual packets
 Data is guaranteed to arrive, and in the correct order without
duplications
 Or the connection will be dropped
IP (Internet Protocol)
• The Internet Protocol (IP) is the principal communications protocol for
Internet Access
• Provides a packet delivery service which is:
– Unreliable
– Best-effort
– Connectionless
• Defines the basic unit of data transfer
• Performs the routing function
• Includes a set of rules that embody the idea of unreliable packet delivery
IP (Internet Protocol) Address

• IP (Internet Protocol) Address is an address of your network

hardware.
• It helps in connecting your computer to other devices on your
network and all over the world.
• An IP Address is made up of numbers or characters.
192.168.1.1

• The function of IP software is to transfer data from one

computer (the source) to another computer (the destination)
MAC (Media Access Control) Address
Every NIC has a hardware address that's known as a MAC, for Media

Access Control.
Port Address
 A port number is a 16 bit address used to identify any client-server

program uniquely.
 The transport layer is also responsible for creating the end-to-end

connection between hosts for which it mainly uses TCP and UDP .
Socket Address
 A socket address object identifies a socket endpoint for
communication
Packet
 A packet is a small amount of data sent over a network, such as
a LAN or the Internet.
 Each packet includes a source and destination as well as the
content (or data) being transferred.
Gateway (Protocol Converter)
A gateway is a node (router) in a computer network, a key
stopping point for data on its way to or from other networks.
Route
A router is a networking device that forwards
data packets between computer networks
checksum
IP also adds some error detection information to each
packet it creates, so that if a packet is corrupted
during transmission, this can usually be detected by
the recipient.
UDP(User Datagram Protocol)
• UDP is a connectionless protocol
• UDP provides a process to process communication.
• Port numbers are appended in the header of the packet to enable this.
• There is no handshaking required before sending a message.
• UDP is a best-effort delivery service – it does not transmit any lost or
corrupt packets.
• A packet contains a checksum field that is used to detect a corrupted
datagram.
• It has relatively limited error detection abilities.
UDP Packet Format
DNS (Domain Name System)
 The Domain Name System (DNS) is the phonebook of the Internet.
 Humans access information online through domain names, like
nytimes.com or espn.com.
 Web browsers interact through Internet Protocol (IP) addresses.
 DNS translates domain names to IP addresses so browsers can load
Internet resources.
www.example.org is a fully qualified domain name for a host with local name www

that belongs to the example second-level domain of the org top-level domain.
nslookup is a simple but very practical command-line tool, which is principally used to

find the IP address that corresponds to a host, or the domain name that corresponds to an

IP address.
High Level Protocols
World Wide Web
 The World Wide Web is a way of exchanging information
between computers on the Internet, tying them together into a

vast collection of interactive multimedia resources .

World Wide Web
 The Web is the collection of machines (Web servers) on the
Internet that provide information,
 particularly HTML documents, via HTTP.

 Machines that access information on the Web are known as

Web clients.
 A Web browser is software used by an end user to access
the Web

30
Communication on web
1. Client (browser) to
webserver
HTTP (Hyper Text Transfer Protocol)
URI,URN,URL
 Uniform Resource Identifier

 Information about a resource

 Uniform Resource Name

 The name of the resource with in a namespace

 Uniform Resource Locator

 How to find the resource, a URI that says how to find the resource
Complete URL format
Uniform Resource Identifier (URI)

 A URI is a string of characters used to identify a name or a

resource on the Internet such as http, https and ftp.

 A URI identifies a resource either by location, name, or both.

 A URI has two specializations known as URL and URN.

https://www.google.com/search/how-to-fix-baked-beans.html#search
Uniform Resource Locator (URL)

 A URL specifies where an identified resource is available and

the mechanism for retrieving it.
 A URL defines how the resource can be obtained.

https://www.google.com/search/how-to-fix-baked-beans.html
Uniform Resource Name (URN)

A URN Identifies a resource by a unique and persistent name,

but doesn’t necessarily tell you how to locate it on the internet.

www.google.com/search/how-to-fix-baked-beans.html#search
HTTP Request Message Structure
Request line
GET /test.html HTTP/1.1

HEAD /query.html HTTP/1.0

POST /index.html HTTP/1.1

HTTP Request Message Structure
 HTTP - Methods

• Methods
– GET
• retrieve a URL from the server
– simple page request

– run a CGI program

– run a CGI with arguments attached to the URL

– POST
• preferred method for forms processing
• run a CGI program
• more secure and private
HTTP - methods

 Methods (cont.)

 PUT

 Used to transfer a file from the client to the server

 HEAD

 requests URLs status header only

MIME
 Multipurpose Internet Mail Extensions (MIME) is an

Internet standard that extends the format of email

messages to support text in character sets other than

ASCII, as well as attachments of audio, video,

images, and application programs.

HTTP Response message
Status Line

HTTP/1.1 200 OK

HTTP/1.0 404 Not Found

HTTP Response Message Structure
Cache Control
 In computer systems, a cache is a repository for copies of information that originates
elsewhere.
 Most web browsers automatically cache on the client machine many of the resources that they
request from servers via HTTP.
 For example, if an image such as a button icon is included in a web page, a copy of the image
obtained from the server will typically be cached in the client’s file system.
 Then if another page at the same site uses the same image, the image can be retrieved from the
client file system
Character Set

It specifies how characters are represented in web documents.


characters are represented by integer values within a computer.


A character set defines the mapping between these integers, or code points, and characters.


US-ASCII [RFC-1345] is the character set used to represent the characters used in HTTP header field names,

and is also used in key portions of many other Internet protocols


Each US-ASCII character can be represented by a 7-bit integer.


The messages transmitted by the Internet Protocol are viewed as streams of 8-bit bytes.


The Unicode Standard is an attempt to provide a single character set that encompasses every human

language representation as well as all other commonly used symbols.


A character encoding is a bit string that must be decoded into a code-point integer that is then mapped to a

character according to the definition provided by some character set.


For example, UTF-8 and UTF-16 are encodings of the character set in Unicode that use variable numbers of

8- and 16-bit values to encode all possible Unicode Standard characters

Web Client
• A web client is software that accesses a web server by sending an HTTP
request message and processing the resulting HTTP response.
• Web browsers running on desktop or laptop computers are the most
common form of web client software.
• There are many other forms of client software, including text-only
browsers, browsers running on cell phones, and browsers that speak a page
rather than displaying the page.
• Any web client that is designed to directly support user access to web
servers is known as a user agent.
• For example, software robots are often used to automatically crawl the Web
and download information for use by search engines.
Basic browser Functions or Task
1. Reformat the URL entered as a valid HTTP request message.
2. If the server is specified using a host name (rather than an IP address), use DNS to convert
this name to the appropriate IP address.
3. Establish a TCP connection using the IP address of the specified web server.
4. Send the HTTP request over the TCP connection and wait for the server’s response.
5. Display the document contained in the response.
– If the document is not a plain-text document but instead is written in a language such as
HTML, this involves rendering the document:
• positioning text and graphics appropriately within the browser window,
• creating table borders,

1. using appropriate fonts and colors, etc.

URLs
Additional Functionalities of web Client
Automatic URL completion (google.com)
Script execution (browsers can run programs)
Event handling (clicking on a link)
Management of form GUI(changing a
button image)
Secure communication (encoding)
Plug-in execution (MIME types)
Web server
 The primary feature of every web server is to accept HTTP
requests from web clients and return an appropriate resource
(if available) in the HTTP response.
Web Server Functions or Task
Server Configuration and Tuning
Virtual Host

• Virtual Host refers to the practice of running more than one web site (such
as company1.example.com and company2.example.com) on a single machine.
• Virtual hosts can be "IP-based", meaning that you have a different IP address for
every web site, or "name-based", meaning that you have multiple names running on
each IP address.
Defining Virtual Hosts
The Host component is used to define a virtual
host
Logging
• Web server logs record information about server activity.
• The primary web server log recording normal activity is an access log, a file that records
information about every HTTP request processed by the server.
• A web server may also produce one or more message logs containing a variety of debugging
and other information generated by web applications as well as possibly by the web server
itself.
• Information written to the standard output and error streams by the web server or applications
may also be logged.
Access Control
 Tomcat can provide automatic password protection for resources that it serves.
 This is a two-stage process.
 First, a database of user names is created.
 Each user name is assigned a password and a list of roles.
Secure Servers

• Normally, the HTTP request and response messages are sent as simple text files.
• These messages are carried by TCP/IP, each message may travel through a number of
machines before reaching its destination.
• It is possible that some machine along the route will extract information from the IP
messages it forwards for important purposes.
• Any machine other than the sender or receiver that extracts information from network
messages is known as an eavesdropper
 To prevent eavesdroppers from obtaining sensitive information, such as credit card numbers,

all such sensitive information should be encrypted before being transmitted over any public

communication network.

 The standard means of indicating to a browser that it should encrypt an HTTP request is to

use the https scheme on the URL for the request.

 For example, entering the URL https://www.example.org

Markup Languages
What is a markup language?
A markup language is a modern system for annotating a
document in a way that is syntactically distinguishable from

the text.
Website
A website is a collection of web pages.
 Webpage
• A web page may contain texts, graphics, sounds, animations,
and movies.
• Web pages are developed with the help of a language called
Hyper Text Markup Language(HTML).
• It is also a language of Internet.
 How is this website made available on the Internet?

These web pages are to be stored in web servers connected to the Internet,

to be made available to others.

HTML (Hyper Text Markup Language

• HTML is the standard markup language for Web pages.

• With HTML you can create your own Website.

Example
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h1>This is a Heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
HTML Tags and Elements
• Any string of the form < … > is a tag

• All tags are specified either start tags < > or end tags < />
– Tags are an example of markup, that is, text treated specially by the
browser
– Non-markup text is called character data and is normally displayed by the
browser

• String at beginning of start/end tag is an element name

• Everything from start tag to matching end tag, including tags, is

an element
– Content of element excludes its start and end tags
HTML Element Tree
HTML Versions
• HTML 4.01 syntax defined using Standard
Generalized Markup Language (SGML)
• XHTML 1.0 syntax defined using Extensible Markup
Language (XML)
• Primary differences:
– HTML allows some tag omissions (e.g., end tags)
– XHTML element and attribute names are lower case
(HTML names are case-insensitive)
– XHTML requires that attribute values be quoted
XHTML Syntax and Semantics
 XHTML (Extensible HyperText Markup Language)

 markup language for creating web pages

 Based on HTML (HyperText Markup Language)

 legacy technology of the World Wide Web Consortium (W3C)

 XHTML 1.0

 Allows only a document’s content and structure to appear in a valid

XHTML document, and not its formatting
 Formatting is specified with Cascading Style Sheets
XHTML syntax
• XHTML syntax is very similar to HTML syntax and almost all the valid HTML elements are
valid in XHTML as well
• Write a DOCTYPE declaration at the start of the XHTML document.
• Write all XHTML tags and attributes in lower case only.
• Close all XHTML tags properly.
• Nest all the tags properly.
• Quote all the attribute values.
• Forbid Attribute minimization.
• Replace the name attribute with the id attribute.
• Deprecate the language attribute of the script tag.
DOCTYPE Declaration

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
Example1
<html>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>
heading
<html>
<body>
<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<h3>This is heading 3</h3>
<h4>This is heading 4</h4>
<h5>This is heading 5</h5>
<h6>This is heading 6</h6>
</body>
</html>
Paragaraph
<html>
<body>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
</body>
</html>
• All HTML elements can have attributes
• Attributes provide additional information about elements
• Attributes are always specified in the start tag
• Attributes usually come in name/value pairs
like: name="value“

<a> Visit W3Schools</a>

<a href=“Page1.thml">Visit W3Schools</a>

Reference page
<html>
<body>
<h2>HTML Links</h2>
<p>HTML links are defined with the a tag:</p>
<a href="linkreg.html">This is a link</a>
</body>
</html>
------
Linkref.html
<html>
<body>
<h2>HTML Links</h2>
<p>page1</p>
</body>
</html>
 HTML Images
<html>
<body>

<h2>HTML Images</h2>
<p>HTML images are defined with the img tag:</p>

<img src="a.jpg" alt="local image" width="104" height="142">

</body>
</html>
Empty HTML Elements

<html>
<body>
<p>This is a <br> paragraph with a line break.</p>
</body>
</html>
Style attributes
<html>

<body>

<h2>The style Attribute</h2>

<p>The style attribute is used to add styles to an element, such as color:</p>

<p style="color:red;">This is a red paragraph.</p>

</body>

</html>
HTML Horizontal Rules
<html>
<body>
<h1>This is heading 1</h1>
<p>This is some text.</p>
<hr>
<h2>This is heading 2</h2>
<p>This is some other text.</p>
<hr>
<h2>This is heading 2</h2>
<p>This is some other text.</p>
</body>
</html>
<pre> tag
<html>
<body>
<p>The pre tag preserves both spaces and line breaks:</p>
<p>
My Bonnie lies over the ocean.
My Bonnie lies over the sea.
My Bonnie lies over the ocean.
Oh, bring back my Bonnie to me.
</p>
<hr>
<pre>
My Bonnie lies over the ocean.
My Bonnie lies over the sea.
My Bonnie lies over the ocean.
Oh, bring back my Bonnie to me.
</pre>
</body>
</html>
Background Color

<html>

<body style="background-color:powderblue;">

<h1 style=background-color:red;>This is a heading</h1>

<p style=background-color:yellow;>This is a paragraph</p>

</body>

</html>
Text Color

<html>
<body>
<h1 style="color:yellow;">This is a heading</h1>
<p style="color:red;">This is a paragraph.</p>
</body>
</html>
Fonts

<html>
<body>
<h1 style="font-family:Times New Roman;">This is a heading</h1>
<p style="font-family:courier;">This is a paragraph.</p>
</body>
</html>
Text Size
<html>
<body>
<h1 style="font-size:400%;">This is a heading</h1>
<p style="font-size:160%;">This is a paragraph.</p>
</body>
</html>
Text Alignment

<html>
<body>
<h1 style="text-align:left;">left Heading</h1>
<p style="text-align:center;">Centered paragraph.</p>
<p style="text-align:right;">right paragraph.</p>
</body>
</html>
HTML Formatting Elements
<b> - Bold text
<strong> - Important text
<i> - Italic text
<em> - Emphasized text
<mark> - Marked text
<small> - Smaller text
<del> - Deleted text
<ins> - Inserted text
<sub> - Subscript text
• <sup> - Superscript text
example
<html>
<body>
<p>This text is normal.</p>
<p><b>This text is bold.</b></p>
<strong>This text is important!</strong><br>
<i>This text is italic</i>
<small>This is some smaller text.</small>
<p>Do not forget to buy <mark>milk</mark> today.</p>
<p>My favorite color is <del>blue</del> red.</p>
<p>My favorite color is <del>blue</del> <ins>red</ins>.
<p>This is _subscripted text.</p>
<p>This is ^{superscripted} text.</p>
</p>
</body>
</html>
HTML Comments

<!-- Write your comments here -->

<html>
<body>
<!-- This is a comment -->
<p>This is a paragraph.</p>
<!-- Comments are not displayed in the browser -->
</body>
</html>
Relative URL
Absolute Path
 On a computer, each file has a location on a storage device.

 This location is referenced by using a path.

 For example, if storing a file called KeySound.txt in the My Documents folder, the

full path to the file might be C:\Documents and Settings\MyLogIn\MyDocuments\

KeySound.txt.

 This kind of path is known as the absolute path (address).

Relative path
Instead of referencing the absolute path for
the file, reference the relative path for the file.
 The relative path is the path you would need
to move through to get from one file to
another.

\KeySound
HTML Lists

HTML lists allow web developers to group a

set of related items in lists.
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:
<html>
<body>
<h2>An unordered HTML list</h2>
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
</body>
</html>
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:
<html>
<body>
<h2>An ordered HTML list</h2>
<ol>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
</body>
</html>
Optional Attributes
HTML Description Lists
• HTML also supports description lists.
• A description list is a list of terms, with a description of

each term.
• The <dl> tag defines the description list,

• The <dt> tag defines the term (name)

<html>
<body>
• The <dd> tag describes each term
<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>
Unordered HTML List - Choose List Item Marker

The CSS list-style-type property is used to define the style of the

list item marker.
Example1
<html>
<body>
<h2>Unordered List with Disc Bullets</h2>
<ul style="list-style-type:disc;">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
</body>
</html>
<html>
<body>
<h2>Unordered List with Circle Bullets</h2>
<ul style="list-style-type:circle;">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
</body>
</html>
<html>
<body>
<h2>Unordered List with Square Bullets</h2>
<ul style="list-style-type:square;">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
</body>
</html>
<html>
<body>
<h2>Unordered List without Bullets</h2>
<ul style="list-style-type:none;">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
</body>
</html>
Ordered HTML List - The Type Attribute
Numbers
<html>
<body>
<h2>Ordered List with Numbers</h2>
<ol type="1">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
</body>
</html>
Uppercase Letters:
<html>
<body>
<h2>Ordered List with Letters</h2>
<ol type="A">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
</body>
</html>
Lowercase Letters

<html>
<body>
<h2>Ordered List with Lowercase Letters</h2>
<ol type="a">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
</body>
</html>
Uppercase Roman Numbers
<html>
<body>
<h2>Ordered List with Roman Numbers</h2>
<ol type="I">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
</body>
</html>
Lowercase Roman Numbers

<html>
<body>
<h2>Ordered List with Lowercase Roman Numbers</h2>
<ol type="i">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
</body>
</html>
 HTML Tables

143
Defining a Table Structure
The first step to creating a table is to specify
the table structure:
 the number of rows and columns
 the location of column headings
 the placement of a table caption

144
Using the <table>, <tr>, and <td> Tags
Graphical tables are enclosed within a two-
sided <table> tag that identifies the start
and ending of the table structure.
Each row of the table is indicated using a two-
sided <tr> (for table row).
Within each table row, a two-sided <td> (for
table data) tag indicates the presence of
individual table cells.

145
The General Table Syntax
<table>
<tr>
<td> First Cell </td>
<td> Second Cell </td>
</tr>
<tr>
<td> Third Cell </td>
<td> Fourth Cell </td>
</tr>
</table>

two
rows

two
146
columns
Example
<html>
<body>
<h2>Basic HTML Table</h2>
<table style="width:100%">
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
</table>
</body>
</html>
 HTML Structure of a Table
beginning of
the table
structure
table cells

first row of six

in the table

end of the
table structure

148
Creating Headings with the <th> Tag

 HTML provides the <th> tag for table headings.

 Text formatted with the <th> tag is centered within the cell and displayed in a

boldface font.

 The <th> tag is most often used for column headings, but you can use it for any

cell that you want to contain centered boldfaced text.

149
 Adding Table Headings to the Table

Text in cells formatted

with the <th> tag is
bold and centered
above each table
column.

table
headings

150
Creating a Table Caption
 HTML allows you to specify a caption for a table.
 The syntax for creating a caption is: <caption
align=“alignment”>caption text</caption>
 alignment indicates the caption placement
 a value of “bottom” centers the caption below the table
 a value of “top” or “center” centers the caption above the table
 a value of “left” or “right” place the caption above the table to
the left or right

151
Result of a Table Caption
caption text

caption will be
centered above
the table

152
 Tables with Different Borders
Values

This figure shows the effect on a table’s border when the border size is varied.

153
Adding a 5-Pixel Border to a Table

Only the outside

border is affected by
the border attribute;
the internal gridlines
are not affected.

154
Controlling Cell Spacing
• The cellspacing attribute controls the amount of space inserted
between table cells.
• The syntax for specifying the cell space is:

<table cellspacing=“value”>

– value is the width of the interior borders in pixels

– the default cell spacing is 2 pixels

• Cell spacing refers to the space between the cells.

155
 Defining Cell Padding
• To control the space between the table text and the cell borders, add the cellpadding
attribute to the table tag.
• The syntax for this attribute is:

<table cellpadding=“value”>

– value is the distance from the table text to the cell border, as measured in pixels
– the default cell padding value is 1 pixel

• Cell padding refers to the space within the cells.

156
Tables with Different
Cell Spacing Values
different cell spacing values

different cell padding values

157
Creating Frames and Rules
Continued
The rules attribute lets you control how the
table gridlines are drawn (not supported by
Netscape)
The syntax of the rules attribute is:
<table rules=“type”>
 type is either
the effect of each“all”,
of the“rows”, “cols”,
rules attribute oron
values “none”
a table

158
 A Table Structure with a Row-Spanning Cell

four table
cells in the
first row

only three table

cells are required
for the second
and third rows

HTML
code

resulting
159
table
Adding Spanning Cells to a Table

160
Applying a Background Color
 Table elements support the bgcolor attribute.
 To specify a background color for all of the cells in a table, all of the
cells in a row, or for individual cells, by adding the bgcolor attribute
to either the <table>, <tr>, <td>, or <th> tags as follows:
<table bgcolor=“color”>

<tr bgcolor=“color”>

<td bgcolor=“color”>

<th bgcolor=“color”>
 color is either a color name or hexadecimal color value

161
Colors
Specifying Table, Row, and Cell
Colors
The bordercolor Attribute
 By default, table borders are displayed in two shades of gray
that create a three-dimensional effect.
 The syntax for the bordercolor attribute is:
<table bordercolor=“color”>
 color is an HTML color name or hexadecimal color value
 Internet Explorer and Netscape apply this attribute
differently.
<table border=“10” bordercolor=“blue”>

Internet Netsca
164 Explorer pe
Applying a Table Background
 Add a background image to your tables using the
background attribute.
 A background can be applied to the entire table or to a cell.

parch.jp
g

<table <td
background=“parch.jpg”> background=“parch.jpg”>
165
Sample Template based on Class Web Page
Frames
HTML frames
 HTML frames are used to divide your browser window into
multiple sections where each section can load a separate
HTML document.
 A collection of frames in the browser window is known as a
frameset.
 The window is divided into frames in a similar way the tables
are organized:
 into rows and columns.
Advantages / Disadvantages of Frames
 Advantages
 Allow multiple content on a
 Disadvantages

single page  Breaks down the trad

 Allow linked content (such as web-page linkage

a table of contents)  Adds considerable co

 Allow coding process

separate scrollable
regions on a page  Implementation is fai

 Errors can be extreme

169
Creating Frames

<html>
<head>
<title>HTML Frames</title>
</head>
<frameset rows = "10%,80%,10%">
<frame name = "top" src = "a.html" />
<frame name = "main" src = "b.html" />
<frame name = "bottom" src = "c.html"/>
<noframes>
<body>Your browser does not support frames.</body>
</noframes>
</frameset>
</html>
Basics of Frame Design - content of frame1.htm file

<HTML>
<HEAD><TITLE>Frame example</TITLE></HEAD>

<FRAMESET ROWS="100,*">
<FRAME NAME="top_row" SRC="frame1top.htm">
<FRAME NAME="bottom_row" SRC="frameintro.htm">
</FRAMESET>

</HTML>
Notice - there is NOT a <BODY> … </BODY> tag set in
the frame definition. This is NOT a mistake in the example
code.
171
Defining the frameset

<HTML>
<HEAD><TITLE>Frame example</TITLE></HEAD>

<FRAMESET ROWS="100,*">
<FRAME NAME="top_row" SRC="frame1top.htm">
<FRAME NAME="bottom_row" SRC="frameintro.htm"
</FRAMESET>

</HTML>

•The Frameset tags define that this frame will have two rows.
•The top row will be 100 pixels tall, the second row will receive whatever space
172
remains.
Defining the Frame

<HTML>
<HEAD><TITLE>Frame example</TITLE></HEAD>

<FRAMESET ROWS="100,*">
<FRAME NAME="top_row" SRC="frame1top.htm">
<FRAME NAME="bottom_row" SRC="frameintro.htm"
</FRAMESET>

</HTML>
•The FRAME tags define the two rows of the frame.
•The name entry is technically optional, but highly recommended.
•The SRC tag defines the content of the frame when the frameset is initially
loaded.
173
Defining the bottom row

<HTML>
<HEAD><TITLE>Frame example</TITLE></HEAD>
<FRAMESET ROWS="100,*">
<FRAME NAME="top_row" SRC="frame1top.htm">
<FRAME NAME="bottom_row" SRC="frameintro.htm"
</FRAMESET>
</HTML>

This Frame tag defines the bottom of the browser window, which will be
the "large size" window on the screen.
The name entry (bottom_row) shows up in links in the frame1top.htm file.
The initial content of the is defined in the SRC tag entry.

174
Opening of frame page

HTML Coding - Frame sets 175

The <frameset> Tag Attributes

Cols
 Specifies how many columns are contained in the frameset and the size of each column
 create three vertical frames, use cols = "100, 500, 100".
 cols = "10%, 80%, 10%".
 cols = "10%, *, 10%"


Rows
 It is used to specify the rows in the frameset.
 rows = "10%, 90%".


Border
 This attribute specifies the width of the border of each frame in pixels


Frameborder
 This attribute specifies whether a three-dimensional border should be displayed between frames


Framespacing
 This attribute specifies the amount of space between frames in a frameset.
The <frame> Tag Attributes

 src – source file name

 Name- name of the frame
 Frameborder – border of the frame
 Marginwidth –
 specify the width of the space between the left and right of the frame's borders
 Marginheight
 specify the height of the space between the top and bottom of the frame's borders
 Noresize
 Scrolling
 Longdesc
 to provide a link to another page containing a long description of the contents of the
frame
Target attribute
 iframe
An HTML iframe is used to display a web page within a web page.

<html>
<body>
<h2>HTML Iframes</h2>
<p>You can use the height and width attributes to specify the size of
the iframe:</p>
<iframe src="a.html" height="200" width="300" title="Iframe
Example"></iframe>
</body>
</html>
HTML Forms
HTML form
 An HTML form is used to collect user input.
 The user input is most often sent to a server for processing.
<html>

<body>

<h2>HTML Forms</h2>

<form action="/action_page.php">

<label name="fname">First name:</label><br>

<input type="text" id="fname" name="fname" value="John"> <br>

<label name ="lname">Last name:</label><br>

<input type="text" id="lname" name="lname" value="Doe"><br><br>

<input type="submit" value="Submit">

</form>

</body>

</html>
Parts of a Web Form
• A Form is an area that can contain Form Control/Elements.

• Each piece of information for a form is stored in a Field.

• The value itself is called Field Value.

Parts of a Web Form

• Users enter or select a field using Form Control/ Elements.

– Form/Control elements include:

• buttons,

• checkboxes,

• text fields,

• radio buttons,

• drop-down menus, etc

– A form usually contains a Submit button to send the information in the form elements to the

server
Control Elements
 Input Boxes – for text and numerical entries

 Option Buttons, also called Radio Buttons – for selecting a single option from a

predefined list

 Selection Lists – for long lists of options, usually appearing in a Drop-Down List

Box

 Check Boxes – for specifying yes or no

 Text Areas – for extended entries that can include several lines of text

185
HTML Forms
• The basic construction of a HTML form is
this...

<form> - begin a form

<input> - ask for information in one of several different
ways
<input> - there can be as many input areas as you wish
</form> - end a form HTML form

186
Forms and Server-Based Programs
 Forms are used to collect information.

 The information is then sent back to the server.

 Information is stored and analyzed using a program on the server.

 By giving users access to programs that react to user input, the Web became a more

dynamic environment where companies and users could interact.

187
 Text Input (type=“text”)
• A Text Field:
– used to create one line fields that viewers can type text.

– The default width is 20 characters, and you can create fields of other sizes by
the value in the size option. Y
– you can limit the number of characters by the value of the MAXLENGTH
option.
– Text input fields will be empty when the page loads, unless you provide an
initial text string for its VALUE option

<input type="text" name="textfield" size=“value” value="with an initial

value">

188
Text Input (type=“text”)
 Example 1: A text field named "text1" that is 30 characters wide.
 <input type="text" name="text1" size="30">

 Example 2: A text field named "text2" that is 30 characters wide but

will only accept 20 characters.
 <input type="text" name="text2" size="30" maxlength="20">

 Example 3: A text field named "text3" that is 40 characters wide with

default value.
 <input type="text" name="text3" size="40" value="We are not
alone">

189
Password Input (type=“password”)
 Example 4: A password field named "pass1" that is 30 characters wide

 <input type="password" name="pass1" size="30">

 Example 5: A password field named "pass2" that is 30 characters wide

but will only accept 20 characters
 <input type="password" name="pass2" size="30" maxlength="20">

190
Text Input (type=“textarea”)
 Example 6: A textarea field named "comments" that is 45 characters
wide and 6 lines high
 <textarea name="comments" rows="6" cols="45" wrap="virtual">
The first time I ever saw a web page, I thought.... (continue)
</textarea>

191
Adding Control Buttons

 A submit button:
<input type="submit" name="Submit" value="Submit">
 A reset button:
<input type="reset" name="Submit2" value="Reset">

• submit: send data

• reset: restore all form elements to

their initial state

• Note that the type is input, not “button”

Radio buttons (type=“radio”)

Radio buttons:<br>
<input type="radio" name="radiobutton" value="myValue1">
male<br>
<input type="radio" name="radiobutton" value="myValue2" checked>
female

193
Checkboxes (type=“checkbox”)
 A checkbox:
<input type="checkbox" name="checkbox”
value="checkbox" checked>
 Drop-down menu or list

 A menu or list:

<select name="select">

<option value="red">red</option>

<option value="green">green</option>

<option value=“blue">blue</option>

</select>

195
A complete example
<html>
<head>
<title>Get Identity</title>
<meta http-equiv="Content-Type" content="text/html;
charset=iso-8859-1">
</head>
<body>
<p><b>Who are you?</b></p>
<form method="post" action="">
<p>Name:
<input type="text" name="textfield">
</p>
<p>Gender:
<input type="radio" name="gender" value="m">Male
<input type="radio" name="gender" value="f">Female</p>
</form>
</body>
</html>