WEB TECHNOLOGIES

B.Tech CSE III Year I semester

By
Mr. G Prabhakar raju
 LECTURE PLAN UNIT-1

Lecture Topic name Slide

no No.
Introduction to HTML-History
L1 Internet and WWW
HTML Protocols
L2 HTTP and SMTP
L3 POP3 and MIME
HTML Tags
L4 Common tags, List, Tables and
Images
L5 Forms and Frames
L6 Links, Navigation and Image
mapping
 Lecture-1

Internet and World Wide Web

 Internet and WWW
• Network that allows systems to be connected
and exchange information globally.
• Information Highway.
• A medium useful to browse, gather and
exchange information.
• Uses standardized protocols for establishing
communication and exchange of information.
• Internet uses TCP/IP suite.
 Internet and WWW(contd..)
• Def: A worldwide network of computers which is an
interconnection of large and small networks around the
globe.
• Began in 1962, originally conceived by Department of
Defence(U.S Military) to protect government
communications systems.
• The original network, dubbed Arpanet (Advanced Research
Projects Agency Network) evolved into a communications
channel among contractors, military personnel, and
university researchers who were contributing to ARPA
projects.
• The network employed a set of standard protocols to
create an effective way for these people to communicate
and share data with each other.
 Internet and WWW(contd..)
• In 1991, the U.S. High Performance Computing Act established
the NREN (National Research & Education Network) to develop
and maintain high-speed networks for research and education,
and to investigate commercial uses for the Internet.
• The Internet has been improved through the development of
World Wide Web.
• Carries message, documents, programs, data files etc. . for
business, educational institutions, government agencies and
individuals.
• One of the services available through the Internet is World
Wide Web (WWW).
• Developed by Tim Berners-Lee.
 Internet and WWW(contd..)
• To access the web, you need an Internet connection
and a web browser(IE, Netscape navigator, Mozilla
Firefox, etc..)
• Information accessed as webpages or HTML
documents.
• Web pages can be navigated using hyperlinks.
• To search for content on the web, can use a directory,
a search engine, or a metasearch engine.
• A search engine lets users to search for content by
using keywords. The engine lists web sites It finds
that match the keywords.
 Internet and WWW(contd..)
• Commonly used protocols are HTTP(Hyper text
transfer Protocol), SMTP(Simple Mail Transfer
protocol) and DNS(Domain Name System).
• Website is a set of web pages with common
domain name or IP(Internet protocol) address.
• Webpage hosted on webserver and accessed
through URL(Uniform resource Locator).
• Web applications are accessed from webservers
using internet.
 Internet and WWW(contd..)
Different tools to surf a net are:
1. Remote login (telnet)
2 File transfer Protocol(ftp)
3. Electronic mail (e-mail)
4. News (USENET or network news)
5. Hypertext (WWW)
www architecture
 Quiz
1. Tools used for internet
A. Telnet
B. ftp
C. www
D. All
Ans: D
2. WWW stands for_______________
E. World web consortium
F. World wide web
G. Web world wide
H. None
Ans: B

3. A web site contains

I. Domain name
J. IP Address
K. Both A & B
L. None
Ans: C
 Quiz
4. To execute a web page we required
A. Browser
B. compiler
C. interpreter
D. All
Ans: A
5. A protocol is a
E. Software to connect Internet
F. Set of rules for transferring data over the network
G. Software that allows file copying
H. Gateway program for internet bridging
Ans: B

6. FTP stands for

I. File Transfer Protocol
J. File Transfer Process
K. File Translation Process
L. File Transfer Program
Ans: A
 Quiz
7. Network of computers connected over greater distances called
A. LAN
B. WAN
C. Subnet
D. None
Ans: B
8. ISP is an acronym of
E. Internet system provider
F. Internet service provider
G. Internal system provider
H. Internet service procedure
Ans: B

9. Telnet is a
I. Dialup program
J. Teller network
K. Standard internet protocol for remote login
L. Telephone network
Ans: A
 Lecture-2

HTML Protocols
 HTTP
• Hyper Text Transfer Protocol.
• Application Layer protocol for WWW.
• State less object-oriented protocol.
• HTTP is a request-response oriented protocol.
• TCP/IP based communication protocol.
• Useful to transfer resources like HTML files,
images, query results etc..
• First versions is HTTP/1.0.
• Current version is HTTP/1.1
 HTTP(contd..)
• Communication process includes
1. HTTP server process is created on port(generally 80)
and waits for clients to establish a TCP connection.
2. HTTP client initiates a TCP Connection with HTTP server
3. HTTP server accepts this connection.
4. Client sends a HTTP request to server specifying
resource.
5. Server process request and sends an HTTP response
containing the desired information back to client.
6. HTTP server closes TCP connection.
 HTTP(contd..)
• HTTP is connectionless: The client disconnects once request is
established and waits for a response from server. The server
must re-establish the connection to process the request.
• HTTP is media independent: Any type of data can be sent by
HTTP as long as both the client and server know how to handle
the data content which is determined by the MIME type.
• HTTP is stateless: The server and client are aware of each
other only during a request. Afterwards, each forgets the
other. For this reason neither the client nor the browser can
retain information between different request across the web
pages.
 HTTP(contd..)

HTTP Clint/
 HTTP(contd..)
HTTP request message:
• Sent by web client to web server
• Consists
– A request line
– A header
– An empty line
– An optional body
 HTTP(contd..)
• Request line consists
– Request type(GET, HEAD, POST, PUT, PATCH, COPY,
MOVE, DELETE,LINK, UNLINK, OPTIONS, CONNECT,
TRACE)
– URL
– HTTP version
• Request header consists
– General Header
– Request Header
– Entity Header
 HTTP(contd..)
HTTP response message:
• Sent by web server to web client
• Consists
– A status line
– A header
– An empty line
– An optional body
 HTTP(contd..)
• Status line consists
– HTTP version
– Status code
– Status phrase
• Request header consists
– General Header
– Response Header
– Entity Header
 SMTP
• Simple Mail Transfer Protocol.
• An internet protocol for sending and receiving e-mail message
between E-mail servers over the internet.
• An Application Layer protocol in TCCP/IP suite.
• Used to send electronic mails.
• Uses TCP as underlying transport layer protocol.
• Specifies set of commands and responses to send emails.
• Establishes a TCP socket to server that implements SMTP and gives
commands to send emails.
• SMTP does not specify any user authorization procedure.
• Uses SSL(Secure Socket Layer) over SMTP to ensure
authentication.
 SMTP(contd..)
• Simple Mail Transfer Protocol:
 SMTP(contd..)
• SMTP model for mail exchange
 SMTP(contd..)
SMTP mail transaction flow:
• The sender SMTP establishes a TCP connection with the destination SMTP
and then waits for the server to send a 220 Service ready message or
a 421 Service not available message when the destination is temporarily
unable to proceed.
• Sender sends HELO message , to which the receiver will identify himself by
sending back its domain name.
• The sender-SMTP can use this to verify if it contacted the right destination
SMTP. If the sender-SMTP supports SMTP Service Extensions as defined in
RFC 1651, it may substitute an EHLO command in place of the HELO
command. A receiver-SMTP which does not support service extensions
will respond with a 500 Syntax error, command unrecognized message.
• The sender-SMTP should then retry with HELO, or if it cannot transmit the
message without one or more service extensions, it should send a QUIT
message.
 SMTP(contd..)
• If a receiver-SMTP supports service extensions, it responds with a multi-line 250
OK message which includes a list of service extensions which it supports.
• The sender now initiates the start of a mail transaction by sending a MAIL
command to the receiver. This command contains the reverse-path(user
mailbox@host domain name) and also contain a list of routing hosts.
• The second step of the actual mail exchange consists of providing the server SMTP
with the destinations for the message (there can be more than one recipient). This
is done by sending one or more RCPT TO:<forward-path> commands. Each of them
will receive a reply 250 OK if the destination is known to the server, or a 550 No
such user here if it isn't.
• When all RCPT commands are sent, the sender issues a DATA command to notify
the receiver that the message contents are following.
• The server replies with 354 Start mail input, end with <CRLF>. <CRLF>
• The client now sends the data line by line, ending with the 5-character sequence
<CRLF>.<CRLF> line upon which the receiver acknowledges with a 250 OK or an
appropriate error message if anything went wrong.
 Quiz

1. SMTP stands for

A. Simple message transfer protocol
B. Simple mail transfer protocol
C. Standard mail text protocol
D. None
Ans: B
2. HTTP stands for
E. Hypertext transfer protocol
F. HTML transfer protocol
G. Hyper transmission telnet protocol
H. None
Ans: A
3. How many bits are their in IP address
I. 30
J. 31
K. 32
L. 33
Ans: C
4. Which of the following protocol is used to transfer files over a network?
A. HTTP
B. FTP
C. Both A and B
D. None
Ans: C
5.Which of the following protocol used to send and receive mails?
E. SMTP
F. HTTP
G. FTP
H. ALL
Ans: A
6. What is the full form of Email?
I. Elective mail
J. Electronic mail
K. Empty mail
L. Easy mail
Ans: B
7. HTTP is a ________________ layer protocol
M. Application layer
N. Network layer
O. Transport layer
P. Data link layer
Ans: A
8. SMTP is a _____________ layer protocol
A. Application
B. Transport
C. Network
D. Link
Ans: A
9. IETF stands for
E. Internet environment task force
F. Internet engineering task force
G. Internet educational task force
H. None
Ans: B
10. MIME stands for
A. Multiple internet message extension
B. Multipurpose internet mail extension
c. Multiple internet mail extension
D. None
Ans: B
 Lecture-3

HTML Protocols
 POP3
• Post office Protocol.
• Current version 3.0 is known as POP3.
• Application layer internet standard protocol
used to retrieve emails from remote mail server
over TCP/IP.
• Allows to down load emails in local machines
and read them offline.
• POP3 is a simple request and response protocol.
 POP3(contd..)
• Listens at port number 110.
• Uses Transport layer security(TLS) or Secure
Sockets Layer(SSL) on TCP.

Internet
POP3 Client POP3 Server
Mail client POP3 port 110
POP3(contd..)
 MIME
• Multipurpose Internet Mail Extension is an internet standard for
extending formats of email.
• MIME was defined in 1992 by the Internet Engineering Task Force(IETF).
• A new version, called S/MIME supports encrypted messages.
• SMTP(supports 7-bit ASCII Characters) is designed to transfer E-mail
only in the form of text messages.
• MIME defines mechanisms to use character encodings other than ASCII,
and 8-bit binary content(images, files, movies etc..)
• Mapping messages into and out of MIME format done by
• MIME extends different formats of E-mail
– Text in character sets other than ASCII
– Non-text attachments
– Message bodies with multiple parts
– Header information in non-ASCII character sets.
 MIME(contd..)
• MIME is extensible by registering new content type and other MIME
attribute values.
• A MIME text may interpreted by a non MIME client.
• MIME Headers
– MIME version: Indicates message is MIME formatted.
– Content Type: Indicates internet media type message type consisting type and
sub type. Ex: text/plain, image/jpeg,
audio/mp3 etc..
– Content Disposition: specifies presentation style 1. Inline
content disposition: should automatically displayed when message is displayed.
2. Attachment content disposition:
Requires some form of action from user to open
– Content-Transfer-Encoding: Defines set of methods for representing binary
data in formats other than ASCII text formats.
 Quiz
1.POP stands for
A. Pre order protocol
B. peer to peer protocol
C. Post office protocol
D. All
Ans: C
2. POP3 is a ____________ layer protocol
E. Application
F. Transport
G. Network
H. Link
Ans: A
3.Which of the following is used to retrieve mails from remote mail server?
I. SMTP
J. POP3
K. HTTP
L. DNS
Ans: B
4.POP3 listens at port number ___________---
A. 110
B. 102
C. 132
D. 210
Ans: A
5. MIMS supports which of the following
E. Text in character sets other than ASCII
F. Non- text attachments
G. Message bodies with multiple parts
H. All
Ans: D
6. Emails can be transmitted through SMTP in ________ format
I. MIME
J. POP3
K. HTML
L. None
Ans: A
 Lecture-4

HTML Common tags, List, Tables and

Images
 HTML Introduction
• HTML stands for
Hyper
Text
Markup
Language
• Describes how a web page will appear in a browser’s window.
• An HTML file is a text file containing small markup tags
• The markup tags tell the Web browser how to display the
page
• An HTML file must have an htm or html file extension
• An HTML file can be created using a simple text editor
 HTML Introduction(contd..)
• A web page is an electronic document consits of
the following elements
– TEXT
– Links
– Images
– Forms
– Frames
– Tables
– Sounds
– Programs
 HTML Introduction(contd..)
• Any browser application constructs web page,
but does not know how elements are to be
placed in web page.
• We need to specify through HTML tags or code.
• Allows to write formatting instructions for web
pages.
• Web browsers interpret the formatting
instructions.
 HTML Introduction(contd..)
• HTML documents are written using HTML tags embedded in angular
brackets.
• The set of tags used to write HTML documents are defined by
W3C(World Wide Web Consortium).
• W3C has published many standards.
• Current version is 4.5
• HTML document is a text file containing text and mark-up tags.
• Needed a text editor like Notepad, WordPad etc..
• HTML elements consists tags and attributes.
• HTML elements are the fundamental building blocks of a webpage.
• The elements are organized like a tree like structure.
• The root element of an HTML document is <html> which consists of
other elements.
 HTML Introduction(contd..)
• HTML Tags:
– Marks up certain region of an HTML document.
– Tag is written in angular brackets(< and >).
• Syntax: <tag name> tag content </tag name>
• Ex: <b> this is a bold tag </b>
– The instructions or text is embedded in opening and closing tags.
– The tag is called “embedded tag”.
– Some tags may not have corresponding closing tags(stand alone tags).
• Ex: <hr> inserts a horizontal row
– According to XHTML specification every opening tag must have closing tag.
• Ex: <hr> horizontal row </hr>
– HTML tags are case-insensitive.
– Browsers do not distinguish between <b> and <B>.
– Tags must be properly nested.
 HTML Introduction(contd..)
• HTML attributes:
– Tags may have properties that can optionally be
assigned values to change the default behaviour of
these tags.
– These properties are called “attributes”.
– Placed within starting tag
– Standalone tags may also have attributes.
• Ex: <hr width=“200”>
– Tags may have multiple attributes
• Ex: <hr width=“200” color=“green”>
 HTML Introduction(contd..)
• Structure of a HTML document:
– Starts with the <html> tag and ends with </html>.
– An HTML page basically contains two distinct logical sections
• “head” section specified by <head> and</head>
– Contains meta- information like title, style, link, script, meta base.
• “body” section specified by <body> and </body>
– Contains text and text and formatting tags like bgcolor, background, link,
alink, vlink, text.
– <html>
<head>
……..
</head>
<body>
……..
</body>
</html>
 HTML common tags
• HTML comments:
– Ignored by browsers
• <!– comment -->
• Title:
– Displayed on the top of browser window
• <title> My Home Page </title>
• Background:
– Can set backgronud color or an image.
• <body bgcolor=“red”>
• <body background=“lilly.jpg” bgcolor=“#004FAF”>
• Paragraph:
– Starts a fresh paragraph.
– Inserts a blank line immediately before new paragraph.
• <p> This is first paragraph</p>
• <p> This is another paragraph displays after inserting a blank space before
starting this paragraph</p>
 HTML common tags(contd..)
• Line breaks:
– Used to insert a line break.
• First line <br> second line.
• Text styles:
– Changing base font: Changes style of the entire page.
• Sets default font style, color, size etc..
– <basefont face=“arial” size=“3” color=“pink”>
– Changing style of a specific text: Can change specific text.
• Some text <font face=“arial” size=“3” color=“red”> this text is displayed with the
properties specified in font tag</font><br> another text.
– Bold text: Makes enclosed text bold.
• <b>This text is displayed in bold</b>
– Underlined text: Makes enclosed text to be underlined.
• <u> This text is underlined </u>
– Italicized text: Makes enclosed text italic.
• <i> This is text is displayed in italic</i>
– Combining styles: The style tags may be combined
• <b><u> This bold and underlined text </u></b>
 HTML common tags(contd..)
• Heading: Provides tags for section headings
• HTML provides six levels of heading h1
through to h6
• h1 is the largest and h6 is smallest font size.
– <h1> heading 1 </h1>
– <h2> heading 2 </h2>
– <h3> heading 3 </h3>
– <h4> heading 4 </h4>
– <h5> heading 5 </h5>
– <h6> heading 6 </h6>
 HTML common tags(contd..)
• Preformatted text:
– Browsers substitute consecutive white spaces by only one.
– To display text as specified <pre> tag is useful
• <pre>
<b> NAME PLACE </b>
<hr>
Raju Hyderbad
Ravi Delhi
</pre>
• Strikethrough text: The text is strikes through
– Normal text <del> Strike through text</del>
– Normal text <strike> Strike through text</strike>
• Sub Script: Displays text as sub script
– a_b
• Super Script: Displays text as super script
– a^b
• centers the text it contains: However, you should use an align=“center” attribute with a document
text structure instead.
– <p alig=“center">
– <div align=“center”>
• <nobsp> will force a long line to stay together rather than wrap
 LISTS
• Collection of one or more items.
• Supports three types of lists for formatting text.
– Unordered
– Ordered
– Definition
• Lists can be nested.

• Unordered List:
– Created using <ul> tag. Items in the list are created using <li> tag and displayed using
bullets
– <ul>
<li> ONE </li>
</ul>

<ul type="disc"> <li> ONE </li> </ul>

<ul type= "circle"> <li> ONE </li> </ul>

<ul type="square"> <li> ONE </li> </ul>

<ul type="disc"> <li> ONE </li> </ul>

 LISTS(contd..)
• Ordered List:
– Created using <ol> tag. Items in the list are created
using <li> tag and displayed using numbers.
– <ol>
<li> ONE </li>
</ol>

<ol type="1"> <li> ONE </li> </ol>

<ol type="A"> <li> ONE </li> </ol>
<ol type="a"> <li> ONE </li> </ol>
<ol type="A" start="3"> <li> ONE </li> </ol>
 LISTS(contd..)
• Definition List:
– Consists of term and description.
– Created using <dl> tag. Definition term part is created using
<dl> tag and Definition description is created using <dd>tag.

<h4>A Definition List:</h4>

<dl>
<dt>CSE</dt>
<dd> Core Computer Science and Engineering </dd>
<dt>ECE</dt>
<dd> Core Electronics and Communication
Engineering </dd>
</dl>
 Tables
• Represents data in tabular form.
• Introduced in HTML 3.2
• Table is created using 3 basic tags: table, tr and td.
• Syntax: <table>…….</table>
• table: Represents the whole table.
• tr: Represents a row.
• td: Represents table data( a row in a cell)
• th: Represents column header.
• caption: Represents title of the table.
 Tables(contd..)
• Table consists of rows each is made up of number of cells.
– <table>
<tr>
<td>….</td> <td>….</td>….. <td>….</td>
</tr>
<tr>
<td>….</td> <td>….</td>….. <td>….</td>
</tr>
…………..
<tr>
<td>….</td> <td>….</td>….. <td>….</td>
</tr>
</table>
 Tables(contd..)
• <table>…</table> relative attributes.
– align: Alignment of a given table (LEFT/RIGHT/CENTER)
– background: Can set image or other graphics as background
to the table. Need to specify URL.
– bgcolor: Can set color of the window where table is
currently displayed.
– bordercolor: Supports border colour for the given table.
– border: Can set width of the border by passing value to this
attribute (value 0 displays table with no border)
– cols: Can specify number of columns in the table.
– height: Specifies height of a given table.
– width: Specified width of a given table.
 Tables(contd..)

• <tr>….</tr> tags and attributes:

• Tags: <th> and <td>
• attributes:
– align: Directs alignment of text in a given table (LEFT/
CENTER/ RIGHT)
– bgcolor: Sets back ground colour of the blocks of a table
corresponding to a given row.
– bordercolor: Sets the back ground colour of a table
corresponding to a given row.
– valign: Directs vertical placement of data corresponding
to a given row of the table. Values may be (TOP/
BOTTOM/ MIDDLE).
 Tables(contd..)

• <th>…</th> use to set heading to the available

columns.
• Attributes:
– align: Directs alignment of the data in the table header
column(LEFT/ RIGHT/CENTER).
– bgcolor: Sets back bround colour for the table headers.
– borderrcolor: Sets border colour for the corresponding
table headers.
– valign: Directs vertical alignment in the table header
row.
– width: Sets the width of the table header.
 Tables(contd..)

• <td>..</td>: Inserts data into each block of the

table.
• Supported attributes
– align
– backgrouncolor
– bgcolor
– bordercolor
– height
– scope
– valign
– width
 Tables(contd..)

• <caption>…</caption>: Used to specify table

title
• <thead>….. </thead>: Used to group table
headers with single name.
• <tbody>…. </tbody>: Used to group specified
rows to frame the table body.
• <tfoot>…..</tfoot>: Used to specifies table
footer by combining its columns.
 Tables(contd..) Examples

Table cells that span more than one row/column

<html>
<body>
<h4>Cell that spans two columns:</h4>
<table border="1">
<tr>
<th>Name</th>
<th colspan="2">Telephone</th>
</tr>
<tr>
<td>Raju</td>
<td>555 77 854</td>
<td>555 77 855</td>
</tr>
</table>
<h4>Cell that spans two rows:</h4>
<table border="1">
<tr>
<th>First Name:</th>
<td>Prabhakar</td>
</tr>
<tr>
<th rowspan="2">Telephone:</th>
<td>555 77 854</td>
</tr>
<tr>
<td>555 77 855</td>
</tr>
</table>
</body>
</html>
Out put

Cell that spans two columns:

Name Telephone

Raju 555 77 854 555 77 855

Cell that spans two rows:

First Name: Prabhakar

555 77 854

Telephone:

555 77 855
 Tables(contd..) Examples

Tags inside a table

<html>
<body>
<table border="1">
<tr>
<td>
<p>This is a paragraph</p>
<p>This is another paragraph</p>
</td>
<td>This cell contains a table:
<table border="1">
<tr>
<td>A</td>
<td>B</td>
</tr>
<tr>
<td>C</td>
<td>D</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>This cell contains a list
<ul>
<li>apples</li>
<li>bananas</li>
<li>pineapples</li>
</ul>
</td>
<td>HELLO</td>
</tr>
</table>
</body>
</html>
 output
This is a paragraph This cell contains a table

This is another Paragraph A B

C D

This cell contains a list HELLO

•apples

•bananas

•pineapples
 Tables(contd..) Examples

Cell padding (control the white space between cell content and the borders
<html>
<body>
<h4>Without cellpadding:</h4>
<table border="1">
<tr>
<td>First</td>
<td>Row</td>
</tr>
<tr>
<td>Second</td>
<td>Row</td>
</tr>
</table>
<h4>With cellpadding:</h4>
<table border="1" cellpadding="10">
<tr>
<td>First</td>
<td>Row</td>
</tr>
<tr>
<td>Second</td>
<td>Row</td>
</tr>
</table>
</body>
 OUT PUT
Without cell padding:

First Row
Second Row
With cell padding:

First Row

Second Row
 Tables(contd..) Examples

Cell spacing (control the distance between cells)

<html>
<body>
<h4>Without cellspacing:</h4>
<table border="1">
<tr>
<td>First</td>
<td>Row</td>
</tr>
<tr>
<td>Second</td>
<td>Row</td>
</tr>
</table>
<h4>With cellspacing:</h4>
<table border="1" cellspacing="10">

<tr>
<td>First</td>
<td>Row</td>
</tr>
<tr>
<td>Second</td>
<td>Row</td>
</tr>
</table>
</body>
</html>
 Out put:
Without cell spacing:

With cell spacing:

 Tables(contd..) Examples

Add a background color or a background image to a table

<html>
<body>
<h4>A background color:</h4>
<table border="1" bgcolor="red">
<tr>
<td>First</td>
<td>Row</td>
</tr>
<tr>
<td>Second</td>
<td>Row</td>
</tr>
</table>
<h4>A background image:</h4>
<table border="1" background=“Water lilies.jpg">

<tr>
<td>First</td>
<td>Row</td>
</tr>
<tr>
<td>Second</td>
<td>Row</td>
</tr>
</table>
</body>
</html>
• A background color:

• A background Image:
 Tables(contd..) Examples

Align the content in a table cell

<html>
<body>
<table width="400" border="1">
<tr>
<th align="left">Money spent on....</th>
<th align="right">January</th>
<th align="right">February</th>
</tr>
<tr>
<td align="left">Clothes</td>
<td align="right">$241.10</td>
<td align="right">$50.20</td>
</tr>
<tr>
<td align="left">Make-Up</td>
<td align="right">$30.00</td>

<td align="right">$44.45</td>
</tr>
<tr>
<td align="left">Food</td>
<td align="right">$730.40</td>
<td align="right">$650.00</td>
</tr>
<tr>
<th align="left">Sum</th>
<th align="right">$1001.50</th>
<th align="right">$744.65</th>
</tr>
</table>
</body>
</html>
Out put
 Images
• An image can placed in an HTML page using
standalone <img> tag
• Uses attribute “src” indicates URL of the
image file.
– <img src=“Liiiy.jpg” width=”200”>
• The height and width can be controlled by
“height ” and “width ”attributes.
 Images (contd..)
• <img>…</img> attributes:
– src: specifies URL of image located.
– alt: Displays relative text when browser fails to display
image specified.
– allign: Aligns image on the given web page( TOP/
BOTTOM/ LEFT/RIGHT/ MIDDLE).
– border: Width of the border accompanying the image can
be specified.
– height/width: Can specify height and width of the image.
– hspase/vspace: Gaps or White spaces between the text
and images can be controlled.
– name: used to specify name of the image
 Quiz
1) Choose the correct HTML tag to make a text italic
a) <italic>
b) <i>
Ans: b
2)What does HTML stand for?
a)Hypertext Markup Language
b)Hypertext Markup List
c)Happytext Markup Language
d)Hypertext Mark Language
ans: a
3) How do you add a comment into HTML?
a) <-Comment->
b) <--Comment-->
c) <!--Comment-->
d) <Comment/>
4. What is the correct tag for the smallest heading?
a) <h6>
b) <h7>
c) <small>
d) <h1>
Ans: a
5. What is the correct HTML for inserting an image?
e) <img display="image.gif" />
f) <img image="image.gif" />
g) <img src="image.gif" />
h) <img ="image.gif" />
Ans: c
6. What is the correct tag for the largest heading?
i) <h6>
j) <large>
k) <bigh>
l) <h1>
Ans: d
7. What does XHTML stands for?
m) eXtra Hypertext Markup Language
n) eXtension Hypertext Markup Language
o) eXtensible Hypertext Markup Language
p) eXtended Hypertext Markup Language
Ans: c
8. What character code would be used to create a < symbol?
a) & gt ;
b) & lt ;
c) & lessthan ;
d) & lesst ;
Ans: b
9. What tag is used to define abbreviated words?
e) <abbr>
f) <abr>
g) <abbreviation>
h) <ab>
Ans: a
10. What tag is used to define a paragraph?
i) <para>
j) <p>
k) <pg>
l) <pgraph>
Ans: b
 Lecture-5

Forms and Frames

 Forms
• Allows to collect information from user.
• Provides several controls like text boxes, check
boxes, buttons, password fields, radio buttons,
selection boxes etc..
• These data submitted to server further
processing.
• <form>….</form> tag is used to create a form.
 Forms (contd..)
• Form tag has two attributes
• action: Specifies the target URL after user submits the request.
– <form action=“welcome.jsp”>
…….
</form>
When user clicks submit button form data supplied to the program
specified by the URL.
• method: Specifies the HTTP method to be used. Methods may be
– GET (data appended to the URL) or POST (data are sent as part of
HTTP request).
– <form action=“welcome.jsp” method=“get” name=“Loginpage”>
…….
</form>
“name” attribute is used to refer form from scripts or style sheets.
 Forms (contd..)

• Form elements: Form data is collected using

different elements.
• Each element should have a name specified by
attribute “name” and has a initial value
specified by attribute “value”.
• Most of control elements are created using
<input> tag. The input types are
– text, password, checkbox, radio, button, submit,
reset, hidden, file and image.
 Forms (contd..)
• Attributes of input tag:
– type: Type of control element(text, password, checkbox, radio,
submit, reset, file, hidden, image and button)
– name: Name of the control element submitted as a part of the
form
– value : Initial value
– size : Maximum number of characters or width of the control
– maxlength : maximum nuber of characters user can enter in a
text or password field.
– checked : Indicates control is on.
– readonly : prevent changes to controls.
– disabled : disables controls from user input.
 Forms (contd..)
• Text Fields: Used to get textual data
<html>
<body>
<form action=“welcome.jsp">
First name: <input type="text" name="firstname">
<br>
Last name: <input type="text" name="lastname">
</form>
</body>
</html>
• Password field: Similar to text field but characters entered are
displayed as dots or asterisks.
<form action="">
Username: <input type="text" name="user">
<br>
Password: <input type="password" name="password">
</form>
 Forms (contd..)
• Hidden fields: Not displayed by browser and
user can never interact with them.
<form action="">
<input type=“hidden" name="userid“
value=“raju”>
</form>
• Label: Labels an associated field.
<label for=“gender”>
Male <input type=“checkbox" id=“male“>
</label>
 Forms (contd..)
• Text area: useful to enter large amount of text.
<textarea rows="10" cols="30">
This is text area.
</textarea>
• File upload: Allows file to send to server.
– <form action=“upload.jsp” method=“post”>
<input type=“file” name=“filename’>
<input type=“submit” value= “ Upload”>
</form>
• Button: Push button can be create to submit data
– <input type=“button” value= “ Login”>
– <input type=“submit” value= “ send”>
– <input type=“reset” value= “ Restore defaults” onclick=“return
confirm(‘Do you want to reset the form?’)”>
 Forms (contd..)
• Check Box: allows use to select one or more options.
<html><body>
<form action="">
I have a bike:
<input type="checkbox" name="vehicle" value="Bike">
<br />
I have a car:
<input type="checkbox" name="vehicle" value="Car">
<br />
I have an airplane:
<input type="checkbox" name="vehicle" value="Airplane">
</form>
</body></html>
 Forms (contd..)
• Radio button: Allows to select only one among
the alternatives.
<html><body>
<form action="">
Male: <input type="radio" checked="checked"
name="Sex" value="male">
<br>
Female: <input type="radio“ name="Sex"
value="female">
</form>
</body></html>
 Forms (contd..)
• Selection list: Provides a dropdown list to choose one of
them.
<html>
<body>
<form action="">
<select name=“Subjects">
<option value=“os">OS</option>
<option value=“wt">Web Technologies</option>
<option value=“acd">ACD</option>
<option value=“cn">Computer Networks</option>
</select>
</form>
</body>
</html>
 Frames
• With frames, we can display more than one Web page in the
same browser window.
• A web page can be divided into many blocks.
• Each HTML document is called a frame, and each frame is
independent of the others.
• The disadvantages of using frames are:
• The web developer must keep track of more HTML documents
• It is difficult to print the entire page
• Each frame maintain own content without concerning to other.
• They refreshed separately.
 The Frameset Tag

• The <frameset> tag defines how to divide the

window into frames
• Each frameset defines a set of rows or
columns
• The values of the rows/columns indicate the
amount of screen area each row/column will
occupy

08/08/2024 G.PRABHAKAR RAJU 96

 The Frame Tag

• The <frame> tag defines what HTML document to put into each
frame
• In the example below we have a frameset with two columns. The
first column is set to 25% of the width of the browser window. The
second column is set to 75% of the width of the browser window.
The HTML document "frame_a.htm" is put into the first column,
and the HTML document "frame_b.htm" is put into the second
column:
• <frameset cols="25%,75%">
• <frame src="frame_a.htm">
• <frame src="frame_b.htm">
• </frameset>
Note: The frameset column size value can also be set in pixels
(cols="200,500"), and one of the columns can be set to use the
remaining space (cols="25%,*").

08/08/2024 G.PRABHAKAR RAJU 97

 • If a frame has visible borders, the user can resize it by
dragging the border. To prevent a user from doing this,
you can
add noresize="noresize" to the <frame> tag.
• Add the <noframes> tag for browsers that do not
support frames.
• Important: You cannot use the <body></body> tags
together with the <frameset></frameset> tags!
However, if you add a <noframes> tag containing some
text for browsers that do not support frames, you will
have to enclose the text in <body></body> tags! See
how it is done in the example below.

08/08/2024 G.PRABHAKAR RAJU 98

 <html>
<frameset cols="25%,50%,25%">

<frame src="frame_a.html">
<frame src="frame_b.html">
<frame src="frame_c.html">

<noframes>
<body>Your browser does not handle frames!</body>
</noframes>

</frameset>

</html>

08/08/2024 G.PRABHAKAR RAJU 99

 frame_a.html
• <html>
• <body bgcolor="#8F8FBD">

• <h3>Frame A</h3>

• </body>
• </html>

08/08/2024 G.PRABHAKAR RAJU 100

 frame_b.html
• <html>
• <body bgcolor="#EBC79E">

• <h3>Frame B</h3>

• </body>
• </html>

08/08/2024 G.PRABHAKAR RAJU 101

 frame_c.html
• <html>
• <body bgcolor="#FFFFCC">

• <h3>Frame C</h3>

• </body>
• </html>

08/08/2024 G.PRABHAKAR RAJU 102

 output

08/08/2024 G.PRABHAKAR RAJU 103

 Frame Tags

Tag

<frameset> Defines a set of frames

<frame> Defines a sub window (a

frame)
<noframes> Defines a noframe section for
browsers that do not handle
frames
<iframe> Defines an inline sub window
(frame)
08/08/2024 G.PRABHAKAR RAJU 104
 Mixed frameset

This example demonstrates how to make a frameset with three

documents, and how to mix them in rows and columns.

<html>
<frameset rows="50%,50%">
<frame src="frame_a.htm">
<frameset cols="25%,75%">
<frame src="frame_b.htm">
<frame src="frame_c.htm">
</frameset>
</frameset>
</html>

08/08/2024 G.PRABHAKAR RAJU 105

 output

08/08/2024 G.PRABHAKAR RAJU 106

 Vertical frameset
.

This example demonstrates how to make a vertical

frameset with three different documents
<html>
<frameset cols="25%,50%,25%">
<frame src="frame_a.htm">
<frame src="frame_b.htm">
<frame src="frame_c.htm">
</frameset>
</html>

08/08/2024 G.PRABHAKAR RAJU 107

 output

08/08/2024 G.PRABHAKAR RAJU 108

 Horizontal frameset
This example demonstrates how to make a horizontal frameset
with three different documents.

<html>
<frameset rows="25%,50%,25%">
<frame src="frame_a.htm">
<frame src="frame_b.htm">
<frame src="frame_c.htm">
</frameset>
</html>

08/08/2024 G.PRABHAKAR RAJU 109

 output

08/08/2024 G.PRABHAKAR RAJU 110

 Frameset with noresize="noresize"
This example demonstrates the noresize attribute. The frames
are not resizable. Move the mouse over the borders
between the frames and notice that you can not move the
borders.

<html>
<frameset rows="50%,50%">
<frame noresize="noresize" src="frame_a.htm">
<frameset cols="25%,75%">
<frame noresize="noresize" src="frame_b.htm">
<frame noresize="noresize" src="frame_c.htm">
</frameset>
</frameset>
</html>

08/08/2024 G.PRABHAKAR RAJU 111

 output

08/08/2024 G.PRABHAKAR RAJU 112

 Navigation frame

This example demonstrates how to make a navigation frame.

The navigation frame contains a list of links with the second
frame as the target. The file called "tryhtml_contents.htm"
contains three links. The source code of the links:
<a href ="frame_a.htm" target ="showframe">Frame
a</a><br>
<a href ="frame_b.htm" target ="showframe">Frame
b</a><br>
<a href ="frame_c.htm" target ="showframe">Frame c</a>
The second frame will show the linked document.

08/08/2024 G.PRABHAKAR RAJU 113

 tryhtml_frame_navigation.html
• <html>
• <frameset cols="20% , 80%">
• <frame name=“left” src=“one.html">
• <frame name=“ right” src=“two.htm" >
• </frameset>
• </html>

08/08/2024 G.PRABHAKAR RAJU 114

 One.html
• <html>
• <body>
• <a href =“http://www.google.com" target =“right">Google</a><br>
• <a href =“http://www.yahoo.com" target =“right">Yahoo</a><br>
• </body>
• </html>

08/08/2024 G.PRABHAKAR RAJU 115

 two.html
• <html>
• <body>
• <img src=“MyHome.jpg”><br>
• </body>
• </html>

08/08/2024 G.PRABHAKAR RAJU 116

 Quiz

1. In the code <frameset cols="120,*"> the following would be true.

a) Top frame would be 120 pixels high
b) Left frame would be 120 inches wide
c) Left frame would be 120 pixels wide
Ans: c
2. 100) Which property tells how many rows a cell should span ?
a) colspan=n
b) Both rowspan=n and colspan=n
c) rowspan=n
Ans: c
3. You can add names to each frame window using which setting ?
a) name
b) src
c) ur
Ans: a
4. Use what to prevent confusion on numbers higher than 9 with
hexadecimal colors ?
a) #
b) !
c) %
ans: a
5. Which will let text wrap down the side of the image?
a) <img src="myImage.gif" align="wrap">
b)<img src="myImage.gif" align="right">
c) <img src="myImage.gif" wrap="on">
Ans: b
6. How can you open a link in a new browser window?
a) <a href="url" new>
b) <a href="url" target="_blank">
c) <a href="url" target="new
Ans: b
7. Which two meta tags have special relevance for search engines ?
a) Description and Keywords
b) Description and Name
c) Cookies and Keywords
ans: a
8. Which tag is used to insert images into your web page ?
a) pic
b) scr
c) Img
Ans: c
9. Which of the following will NOT be found in the <head> section ?
a) Metatags
b) Title
c) Table
Ans: c
 Lecture-6

Links, Navigation and Image mapping

 Links and Navigation
• A link is a connection from one Web resource to another.
• Allows to navigate from one web page to other web page
• Although a simple concept, the link has been one of the
primary forces driving the success of the Web.
• A link has two ends -- called anchors -- and a direction.
• The link starts at the "source" anchor and points to the
"destination" anchor, which may be any Web resource
(e.g., an image, a video clip, a sound bite, a program, an
HTML document, an element within an HTML document,
etc.).
 Links and Navigation(contd..)
• The HTML <a> tag defines a hyperlink.
• A hyperlink (or link) is a word, group of words, or
image that you can click on to jump to another
document.
• The most important attribute of the <a> element is
the “href” attribute, which indicates the link’s
destination.
• By default, links will appear as follows in all browsers:
– An unvisited link is underlined and blue
– A visited link is underlined and purple
– An active link is underlined and red
 Links and Navigation (contd..)
• HTML Link Syntax
– <a href="url">Link text</a>
• The href attribute specifies the destination of a link.
• Example
– <a href="http://www.google.com/">Google</a>
• The target attribute specifies where to open the linked
document.
• The example below will open the linked document in a new
browser window or a new tab:
• Example
– <a href="http://www.google.com/"
target="_blank">Google</a>
 Links and Navigation (contd..)
• The “id” attribute can be used to create a bookmark inside an
HTML document.
• Bookmarks are not displayed in any special way. They are
invisible to the reader.
• Example
• An anchor with an id inside an HTML document:
– <a id=“help">This is a help Section</a>
– Creation of link to the " Visit the help Section " with in the
same document
• <a href="#help">Visit the help Section</a>
– Create a link to the " Visit the help Section " from another
page:
• <a href="http://www.google.com/help.html#help">
Visit the help Section</a>
 Links and Navigation (contd..)
• The <nav> tag is supported in Internet Explorer 9, Firefox,
Opera, Chrome, and Safari.
• Internet Explorer 8 and earlier versions, do not support the
<nav> tag.
• The <nav> tag defines a section of navigation links.
• Not all links of a document must be in a <nav> element. The
<nav> element is intended only for major block of navigation
links.
• Browsers, such as screen readers for disabled users, can use this
element to determine whether to omit the initial rendering of
this content.
 Links and Navigation (contd..)
<nav>
<a
href=“http://www.Myhome.com/welcome.html">HTML</a> |
<a href="http://www.yahoo.com/css.html">CSS</a> |
<a href=" http://www.Myhome.com/js.html ">
JavaScript</a> |
</nav>

• The <nav> tag is new in HTML5.

 Image mapping
• Image maps are two types
– Server side image maps
– Client side image maps
• Client side image maps: The <map> tag is used to define a
client-side image-map. An image-map is an image with clickable
areas.
• The required name attribute of the <map> element is
associated with the <img>'s “usemap” attribute and creates a
relationship between the image and the map.
• The <map> element contains a number of <area> elements,
that defines the clickable areas in the image map.
 Image mapping(contd..)
• <img src=“universal.gif" width="145" height="126" alt=“universal
map" usemap="#universal">

<map name=“Universal">
<area shape=“rect" coords="0,0,82,126" href="sun.html"
alt="Sun">
<area shape="circle" coords="90,58,3" href="mercury.html"
alt="Mercury">
<area shape="circle" coords="124,58,8" href="venus.html"
alt="Venus">
</map>
 Image mapping(contd..)
Server side Image maps:
• The ismap attribute is a boolean attribute.
• When present, it specifies that the image is part of a server-side
image-map (an image-map is an image with clickable areas).
• When clicking on a server-side image-map, the click coordinates
are sent to the server as a URL query string.
• The ismap attribute is allowed only if the <img> element is a
descendant of an <a> element with a valid href attribute.
• <a href=“welcome.jsp">
<img src=“universal.jpg" alt=“www.google.com" ismap>
</a>