Scribd
Upload
108 views

HTML Unit - 1

The document provides information about the World Wide Web (WWW) and how it works. Some key points: - The WWW allows for multimedia documents containing text, images, audio, video, and animations to be shared between machines. It is a huge collection of interlinked documents numbering in the billions. - Documents reside on web servers, which are accessed using the Hypertext Transfer Protocol (HTTP). Documents are typically written in Hypertext Markup Language (HTML). Web browsers like Netscape and Mosaic are used to display and format documents. - HTTP is the stateless protocol that allows web clients (browsers) to interact with web servers to transfer hypertext documents across the internet. The basic

Uploaded by

vrkatevarapu
Copyright
© © All Rights Reserved
Available Formats
Download as PPT, PDF, TXT or read online on Scribd
108 views

HTML Unit - 1

The document provides information about the World Wide Web (WWW) and how it works. Some key points: - The WWW allows for multimedia documents containing text, images, audio, video, and animations to be shared between machines. It is a huge collection of interlinked documents numbering in the billions. - Documents reside on web servers, which are accessed using the Hypertext Transfer Protocol (HTTP). Documents are typically written in Hypertext Markup Language (HTML). Web browsers like Netscape and Mosaic are used to display and format documents. - HTTP is the stateless protocol that allows web clients (browsers) to interact with web servers to transfer hypertext documents across the internet. The basic

Uploaded by

vrkatevarapu
Copyright
© © All Rights Reserved
Available Formats
Download as PPT, PDF, TXT or read online on Scribd
You are on page 1/ 149

WWW

Latest revolution in the in the


internet scenario.
Allows multimedia documents to be
shared between machines.
containing text,image,audio,video,animation.

Basically a huge collection of interlinked documents.


Billions of documents.
Inter-linked in any possible way.
Resembles a cob-web.

Cont..
Where do the documents reside?
On webservers.
Also called hypertext transfer
protocol(HTTP)servers.

They are typically written in


Hypertext markup language(HTML).

Documents get formatted/displayed


using
web browsers
Netscape
Mosaic
konquerer

What is http?
Hypertext transfer protocol
A protocol using which web clients(browsers) interact
with web servers.

It is a stateless protocol.
Fresh connection for every item to be downloaded.

Transfers hypertext across the internet.


A text with links to other text documents.
Resembles a cob-web, and hence the name world
wide web(www).

Web clients(browsers) and web servers


communicate via http protocol.

Basic steps:
Client opens socket connection to the
http server.
Typically over port 80.

Client sends http requests to server.


Server sends response back.
Server closes connection.
http is a stateless protocol.

Illustration

http
reques
th
http
response

Webpage

Types:

Static
Webpage

Dynamic
Webpage

a Web page that always comprises the same


information in response to all download requests
from all users.
a Web page that uses a database to generate data or
information "on the fly", depending on the user's
request.

Static vs
Dynamic
Internet
Server
HTML

HTML

HTML

Static
Webpage

Static vs
Dynamic
Internet
Server

DB

Web
page

Web
page

Dynamic
Webpage

HTML

System
Requirements

Text Editor

Web Browser

other
applications

About HTML
Hypertext markup language:
Constitutes a collection of platform
independent styles that define the
various components of a web
document.
Styles indicated by markup tags.
What is HTML really?
plain-text documents can be created
using any text editor.
WYSIWYG editors are also available.

What is markup
language?
One where we can embed special
tags or formatting commands in the
text.
To describe how the text should be
displayed/printed.
HTML is markup language.
Special formatting codes(called
tags) to adjust fonts, create
bulleted lists, create forms,
display images, create tables etc..

Html tags
The left and right angle brackets are
used to enclose all special
instructions called tags.
Two classes of tags.
Those which appears in pairs
<i> good morning </i>.
Those which appear individually
<img src=baby.jpg>.
Browsers interpret the tags to display
a HTML page in properly formatted
form.

Most of the tags belong to the first


category.
<tagname>directives
</tagname>
Tags are case insensitive
<HEAD>,<Head> and <head> all are
equivalent.
Tags may be nested.
<html><head></head><body>
</body></html>
Most of the browsers have view
source menu option
The html version of the page can be
displayed.

Some pints(contd.)
Some tags can have one or more
attributes to define some
additional characteristics of the
tag.
<img src=baby.jpg>
<body text=red
bgcolor=blue>

Some points (contd.)


Unrecognized tags
Browsers normally ignore tags it
does not recognize.

Comment lines
Comments are included between
<!--- and --- >
Comments cannot be nested
<!--- a comment here --- >
<!--- another comment in
two lines --- >

Html document structure


A html document consists of two
major portions:
Head
Contains information about the
document ,like the title etc.

Body
Contains the actual matter of the
document.
Gets displayed within the browser
window.

A simple HTML Document


<html>
<head>
<title>title of the
document</title>
</head>
<body text=white
bgcolor=blue>
This is the content of the
document.
This is an <i>italic</i> font,this is
<b>bold</b>
</body>
</html>

17

Example-1
<html>
<head><title>First Page</title></head>
<body bgcolor="blue>
<hr>
Hello! This is my first page of code. I can't
believe I'm on my way to
being a webmaster.<p>
This is so great!!!
<hr>
</body>
</html>

Heres what those did

Structural html tags


<html></html>
Used to bracket an entire html
document.
Optional for most of the
browsers.
Attributes:
lang = language code
Language code indicates the primary
language of the document
bn-Bengali, hi Hindi, en - English

Structural HTML Tags


(contd.)
<head>.</head>
Used to provide information
about web page.
Nests within itself other tags like
<base>,<meta> and <title>.

Structural HTML Tags


(contd.)
<body>..</body>
Used to bracket the body of a html
document.
Attributes:
background=url
bgcolor=color sets background
color of the document.
text=color sets the default color
for the normal text in the document.

Structural HTML Tags


(contd.)
alink=color sets the color of
the active links.
link=color sets the default
color for all the links in a
document.
vlink=color sets the color for
the visited links.

Text formatting in html


paragraphs and
headings
<Hn></Hn>

Used to generate headings,1n6.


Six different levels of headings.
<h1> is the largest,<h6> is the
smallest.
<p>
Paragraph marker,used to separate
text into paragraphs.
End tag </p> is optional.

HTML<h1>to<h6>Tags
<html>
<head><title>Demonstration of Headings
</title></head>
<body text="#FFFFFF"
bgcolor="#0000FF">
<h1>This is a first level heading. </h1>
<h2>The second level</h2>
<h3>The third level</h3>
<h4>Fourth level. </h4>
<h5>Fifth level.</h5>
<h6>And, finally, the sixth .</h6>
A small amount of plain non-heading text.
</body>
</html>

Contd.
<BR>
Used to indicate that the text
following <br> should begin on
the next line.
The amount of line spacing is
less than of a <p> break.

Contd.
<hr>
Produces a horizontal line,which
can be used to delimit sections.
Length of the line can be
specified.
Examples
<hr>
<hr size=20> [noshade option
possible]
<hr align=right width=75%
>

Appearance of Text
<b>..</b>
Displays enclosed text in bold.
<i></i>
Displays the enclosed text in
italics.
<cite>..</cite>
Tells the browser that this is a
citation usually displayed in italics.

Contd.
<pre>.</pre>
Allows browser to display
carefully laid out text.
Used to display program listings.
Example
<pre>
Main()
{
Int I,j;abc();
}
</pre>

Contd.

<sub>.</sub>
Displays the enclosed text as subscript.
<sup>..</sup>
Displays the enclosed text as
superscript.
<font>..</font>
Specifies the style of the enclosed text.
Attributes:
Color=color name
Face=typeface
Size=value [ 1 to 7; 3 is the default]
[can also specify as +n or n]

contd
<center>.</center>
Centers the enclosed elements
horizontally on the page.
<p align=option></p>
Used to align a paragraph
Option can be left,right or
center.

<html>
<head><title>Paragaph Aligning</title></head>
<body text=white bgcolor=blue>
<h3>
<P ALIGN=CENTER> This paragraph will be
aligned
at the center. Even as the browser window
size changes, the alignment remains the same.
</P>
<P ALIGN=LEFT>This demonstrates left
alignment. </P>
<P ALIGN=RIGHT>How about aligning by the right
margin? </P>
</h3>
</body>
</html>

<html>
<head><title>Layout Features
1</title></head>
<body text=yellow bgcolor=blue>
<h2> <pre>
begin
if (a > b)
then max := a;
else max := b;
end;
</pre> </h2>
<hr size=8 width=50%>
<hr>
<hr size=20 width="75%" noshade>
</body>
</html>

<html>
<head><title>Layout Features
2</title></head>
<body text=yellow bgcolor=blue>
<h3>Extended Quotations</h3>
<blockquote>
<P>This is the first paragraph within
the BLOCKQUOTE environment. </P>
<P>Another paragraph starts here. </P>
We type some text here without explicitly
giving paragraph break.
</blockquote>
</body>
</html>

<html>
<head><title> Superscript and
Subscript </title></head>
<body text=white bgcolor=blue>
<h1> y = x <sup> 3 </sup> + 2 x
<sup> 2 </sup> + 4 </h1>
<br>
<h2> W <sub> total </sub> = x
<sup> 2 </sup> - 5 <h2>
</body>
</html>

<html>
<head>
<title>Background Image</title>
</head>
<body text="#FFFFFF"
background="starwars.jpg">
<h2><center>
This page illustrates how a
background image
can be specified.
</center></h2>
</body>
</html>

HTML Lists

Types of Lists

There are a number of tags for


building lists.
Serves the purpose of improving
the readability of the text.

Depending on the way the list


items are displayed, lists may be
divided into three types:
Unnumbered list
Numbered list
Definition list

Unnumbered List
Used to display a set of related
items that appear in no particular
order.
Each item is indented with a preceding
bullet symbol.

Specified using the tag:


<UL> </UL>
The individual items in the list are
specified using the <LI> tag.
Attributes:
type = disc | circle | square

Unnumbered List
(contd.)
The <LI> items can contain multiple
paragraphs, specified using <P>.
Example:
<UL>
<LI> First item of the list
<LI> Second item of the list
<LI> Third item of the list
</UL>

Unnumbered List
(Example 1)

<html>
<head><title> Bulleted list 1 </title></head>
<body text=white bgcolor=blue>
<h2> The flowers I like: </h2>
<h3>
<UL>
<LI> Rose
<LI> Lotus
<LI> Daffodil
<LI> Marigold
</UL>
</h3>
</body>
<html>

Unnumbered List
(Example 2)
<html>
<head><title> Bulleted list 2 </title></head>
<body text=white bgcolor=blue>
<h2> The flowers I like: </h2>
<h3>
<UL type=square>
<LI> Rose
<LI> Lotus
<LI type=circle> Daffodil
<LI> Marigold
</UL>
</h3>
</body>
</html>

Numbered List
Numbered or ordered lists are used
when the sequence of the items is
important.
Specified using the tag:
<OL> </OL>
The individual items in the list are
specified using the <LI> tag.
Example:
<OL>
<LI> This is number one
<LI> This is number two
<LI> This is number three
</OL>

Numbered List (contd.)


The list items are numbered
sequentially as 1,2,3,
Attributes:
type = 1 | A | a | I | I
Specifies the style of numbering.
1,2,3, or A,B,C, or a,b,c, or
I,II,III, or i,ii,iii,

Numbered List (Example


1)
<html>
<head><title> Numbered list 1
</title></head>
<body text=white bgcolor=blue>
<h2> To cook Maggi you must: </h2>
<h3>
<OL>
<LI> Put some water to boil
<LI> Put in noodles and masala
<LI> Wait for 2 minutes
<LI> Serve in a plate
</OL>
</h3>
</body>
</html>

Numbered List (Example


<html>
2)
<head><title> Numbered list 2 </title></head>
<body text=white bgcolor=blue>
<h2> To cook Maggi you must: </h2>
<h3>
<OL type =A>
<LI> Put some water to boil
<LI> Put in noodles and masala
<LI> Wait for 2 minutes
<LI> Serve in a plate
</OL>
</h3>
</body>
</html>

Numbered List (Example


3)
<html>
<head><title> Numbered list 3 </title></head>
<body text=white bgcolor=blue>
<h2> To cook Maggi you must: </h2>
<h3>
<OL type =I>
<LI> Put some water to boil
<LI> Put in noodles and masala
<LI type=1> Wait for 2 minutes
<LI> Serve in a plate
</OL>
</h3>
</body>
</html>

Definition List
Specified using the tag:
<DL> </DL>
Each definition comprises of a
definition term (<DT>) and a
definition description (<DD>).
Web browsers format each
definition on a new line and
indent it.

Definition List (contd.)


Example:
<DL>
<DT> TCP
<DD> Transmission Control Protocol
<DT> UDP
<DD> User Datagram Protocol
<DT> IP
<DD> Internet Protocol
</DL>

Definition List (Example)


<html>
<head><title> Definition list 1 </title></head>
<body text=white bgcolor=blue>
<h2> Some important protocols: </h2>
<h3><DL>
<DT> TCP
<DD> Transmission Control Protocol
<DT> UDP
<DD> User Datagram Protocol
<DT> IP
<DD> Internet Protocol
</DL></h3>
</body>
</html>

Nesting of Lists
Any list can be nested within
another list.
When unnumbered lists are nested,
the browser automatically uses a
different bullet symbol for each level.
When numbered lists are nested, by
default, every level is numbered
using the arabic numerals (1, 2, 3,
).

Nesting of Lists
<html><head><title>
List Nesting 1 </title></head>
(Example
1)
<body text=white bgcolor=blue>
<H3> My favorite languages are:
<UL>
<LI> Java <BR>
<UL>
<LI> object-oriented
<LI> platform independent
<LI> can be embedded within HTML
</UL> <BR>
<LI> Perl <BR>
<UL>
<LI> a scripting language
<LI> powerful string handling capabilities
<LI> widely used for writing CGI scripts
</UL>
</UL> </H3>
</body>
</html>

Nesting of Lists
(Example
<html><head><title>
List Nesting 22)
</title></head>
<body text=white bgcolor=blue>
<H3> My favorite languages are:
<OL>
<LI> Java <BR>
<UL>
<LI> object-oriented
<LI> platform independent
<LI> can be embedded within HTML
</UL> <BR>
<LI> Perl <BR>
<OL>
<LI> a scripting language
<LI> powerful string handling capabilities
<LI> widely used for writing CGI scripts
</OL>
</OL> </H3></body></html>

Specifying Hyperlinks

Hyperlinks
Chief power of HTML comes from
its ability to link text and/or
image to another document or
section of a document.
These links are called hyperlinks.
Browser by default highlights the
hyperlinks with color and/or
underline.

Hyperlinks (contd.)
Specified using the anchor tag:
<A> . </A>
Requires an attribute called HREF which
specifies the path of the resource to be linked.

Example:
<A HREF=face.jpg> portrait </A>
<a href=www.google.com> search </a>
<a href=mailto:[email protected]> Mail
me </a>
<a href=slides/ch5.pdf> download
pdf</a>

Relative versus Absolute


URLs
Relative URL
Provides a link to another document relative
to the location of the current document.
Commonly used when referring to
documents residing on the same web site.
Examples:

<a href=TENNIS/sania.html> Sania


Mirza </a>
<a href=../NEWS/cricket.html> Cricket
</a>
These kind of links are called relative links.

Relative versus Absolute URLs


(contd.)

Absolute URL

The complete path name of the


document in the server is specified.
Necessary when linking to documents
on other servers.
Example:

<a
href=www.iitkgp.ac.in/people/isg/p
aper5.pdf>
One of my recent papers </a>

Linking to Specific
Sections
Anchors can be used to go to a
particular section in a document.
Within the same (or different) document.

Two steps involved.


Define a named section in a document.

<a name=tennis> <h2>About


tennis</h2> </a>
Provide a link to the named section.

<a href=#tennis> Information on


Tennis </a>
<a href=http://www.sunny.com/xyz.html
#LAN>
Local Area Networks </a>

Hyperlinks (Example)
<html><head><title> Link to Other Sites
</title></head>
<body text=white bgcolor=blue link=red vlink=green>
My favorite search engines are:
<ol>
<li> <a href="http://www.google.com"> Google </a>
<li> <a href="http://www.yahoo.com"> Yahoo </a>
<li> <a href="http://www.khoj.com"> Khoj </a>
</ol>
<hr>
<address>
Prof. Indranil Sen Gupta <BR> <BR>
<a href="mailto:[email protected]"> <img
src="mbox.gif"
align=middle> </a>
</address></body></html>

Images

Images
Supported image formats:
JPEG, GIF, PNG

Specified using the standalone tag:


<IMG>
Attributes of <IMG>:
SRC: specifies the URL of the image
file
HEIGHT: height (in pixels) to be set
aside for the image.
WIDTH: width (in pixels) to be set
aside for the image.

Images (contd.)

The HEIGHT and WIDTH attributes


tells the browser to set aside
appropriate space (in pixels) for
the image as it downloads the rest
of the file.
Some browsers stretch or shrink an
image to fit into the allotted space.

Example:
<IMG SRC=blackrose.gif>
<img src=tiger.jpg height=80
width=150>

Images (Example 1)
<html><body>
An image
<img src=book.gif align="bottom" width="48"
height="48">
in the text
<p> An image
<img src =book.gif align="middle" width="48"
height="48">
in the text
<p> An image
<img src =book.gif align="top" width="48"
height="48">
in the text
</body></html>

Images (Example 2)

<html>
<body>
<img src =book.gif align ="left" width="48"
height="48">
A paragraph with an image. The image will float to
the
left of this text.
<p>
<img src =book.gif align ="right" width="48"
height="48">
A paragraph with an image. The image will float to
the
right of this text.
</body>
</html>

Images (Example 3)
<html>
<body>
<img src="book.gif" width="20" height="20"> <p>
<img src="book.gif" width="45" height="45"> <p>
<img src="book.gif" width="70" height="70"> <p>
Resizing an image by changing the values in the
"height" and "width" attributes of the img tag.
</body>
</html>

Images (Example 4)
<html>
<body>
It is possible to use an image as a link.
Click on the
image below to go to google.
<P>
<a href=www.google.com">
<img src=book.gif>
</a>
</body>
</html>

HTML Tables

Introduction

Tables are made up of cells, arranged


into rows.
Use tags <TABLE>, <TR>, <TD>.
An example:

<table>
<tr>
<td> Good </td> <td> Bad </td>
</tr>
<tr>
<td> Cute </td> <td> Ugly </td>
</tr>
</table>

The Table Tags


<TABLE> </TABLE>
Defines the beginning and the end
of a table.
Can have several attributes:

bgcolor = #rrggbb or color name


rules = all | cols | rows | none
border = number
height = number, percentage
Width=number,percentage

<TR> .. </TR>
Defines a row of cells within a
table.
Can have several attributes:
bgcolor = #rrggbb or color name
align = left | center | right | justify

<CAPTION> .. </CAPTION>
Provides a caption for the table.
Must immediately follow the table
tag, and precede all other tags.

<TD> .. </TD>
Defines a table data cell.
A table cell can contain any content,
like
an image, or even another table.
Can have several attributes:
bgcolor = #rrggbb or color name
colspan = number

== > specifies the number of columns


the currect cell should span (default is
1).
rowspan = number

== > similar

<TH> .. </TH>
Defines a table header cell.
Browsers generally display the
contents of the header cells in
bold, and centered.
Same attributes as the <TD>
tag.

HTML Frames

Introduction
What are frames?
A method for dividing the browser
window into smaller subwindows.
Each subwindow displaying a
different HTML document.
How does a page with frame look
like?
NEXT SLIDE

A Web Page that use


Frames

The Frame Tags

<FRAMESET> .. </FRAMESET>
Defines a collection of frames or other
framesets.
Attributes:
cols = list of lengths (number, %, or *)
rows = list of lengths (number, %, or *)

Establishes the number and sizes of


columns (vertical frames) or rows
(horizontal frames) in a frameset.
In number of pixels, percentage of
total area, or relative values (*) based
on available space.

<FRAME>
Defines a single frame within a
frameset.
Attributes:

frameborder = 1 | 0
src = url
scrolling = yes | no | auto
marginwidth = number
marginheight = number
name = text

<NOFRAMES>
</NOFRAMES>
Specifies the contents to be
displayed by browsers that
cannot display frames.
Ignored by browsers that
support frames.

Assign a name to the targeted


frame.
<frame src = somepage.htm
name = abc>
Specify this frame in a hyperlink
as follows:
<a href = newpage.htm
target=abc> </a>
The document newpage.htm will
load into the frame names abc.

HTML Forms

Introduction
Provides two-way communication
between web servers and browsers.
Demand for most of the emerging
applications.
Providing dynamic contents.
Browser

WebServe
r

What is a HTML FORM?


A form basically contains boxes and
buttons.
Real-life examples:
Search engines
On-line purchase of items
Registration

The form allows a user to fill up the


blank entries and send it back to the
owner of the page.
Called SUBMITTING the form.

FORM Example

FORM Tags and


Attributes
Several tags are used in
connection with forms:
<form> </form>
<input>
<textarea> </textarea>
<select> </select>

<FORM> </FORM>
Tag
This tag is used to bracket a
HTML form.
Includes attributes which specify
where and how to deliver filled-up
information to the web server.

Two main attributes:


METHOD
ACTION

METHOD:
Indicates how the information in
the form will be sent to the web
server when the form is submitted.
Two possible values:
POST: causes a forms contents to be
parsed one element at a time.
GET: concatenates all field names and
values in a single large string.

POST is the preferred method


because of string size limitations
in most systems.

ACTION:
Specifies the URL of a program on
the origin server that will be
receiving the forms inputs.
Traditionally called Common
Gateway Interface (CGI).
Details of CGI to be discussed later.

The specified program is executed


on the server, when the form is
submitted.
Output sent back to the browser.

Typical usage:
<FORM METHOD=POST
ACTION=cgi-bin/myprog.pl>
..
..
</FORM>

<INPUT> Tag
This tag defines a basic form
element.
Several attributes are possible:
TYPE
NAME
SIZE
MAXLENGTH
VALUE
SRC
ALIGN

TYPE:
Defines the kind of element that is to be
displayed in the form.
TEXT defines a text box, which
provides a single line area for entering
text.
RADIO radio button, used when a
choice must be made among several
alternatives (clicking on one of the
buttons turns off all others in the same
group).
CHECKBOX similar to the radio
buttons, but each box here can be
selected independently of the others.

PASSWORD similar to text box, but


characters are not shown as they are typed.
HIDDEN used for output only; cannot be
modified (mainly used to refer to choices
that have already been made earlier).
IMAGE used for active maps. When the
user clicks on the image, the (x,y) coordinates are stored in variables, and are
returned for further processing.
SUBMIT creates a box labeled Submit; if
clicked, the form data are passed on to the
designated CGI script.
RESET creates a box labeled Reset; if
clicked, clears a forms contents.

NAME:
Specifies a name for the input field.
The input-handling program (CGI) in
reality receives a number of
(name,value) pairs.

SIZE:
Defines the number of characters that
can be displayed in a TEXT box without
scrolling.

MAXLENGTH:
Defines the maximum number of
characters a TEXT box can contain.

VALUE:
Used to submit a default value for a TEXT
or HIDDEN field.
Can also be used for specifying the label
of a button (renaming Submit, for
example).

SRC:
Provides a pointer to an image file.
Used for clickable maps.

ALIGN:
Used for aligning image types.
ALIGN = TOP | MIDDLE | BOTTOM

<TEXTAREA>
</TEXTAREA> Tag
Can be used to accommodate
multiple text lines in a box.
Attributes are:
NAME: name of the field.
ROWS: number of lines of text
that can fit into the box.
COLS: width of the text area on
the screen.

<SELECT> . </SELECT>
Tag
Used along with the tag <OPTION>.

Used to define a selectable list of


elements.

The list appears as a scrollable menu or


a pop-up menu (depends on browser).

Attributes are:
NAME: name of the field.
SIZE: specifies the number of option
elements that will be displayed at a
time on the menu. (If actual number
exceeds SIZE, a scrollbar will appear).

MULTIPLE: specifies that multiple


selections from the list can be made.
<FORM .>
..
Languages known:
<SELECT NAME=lang SIZE=3
MULTIPLE>
<OPTION> English
<OPTION> Hindi
<OPTION> French
<OPTION> Hebrew
</SELECT>
</FORM>

Example 1

Example 1

<HTML>
<HEAD>
<TITLE> Using HTML Forms </TITLE>
</HEAD>
<BODY TEXT="#FFFFFF"
BGCOLOR="#0000FF"
LINK="#FF9900" VLINK="#FF9900"
ALINK="#FF9900">
<CENTER><H3> Student Registration
Form </H3>
</CENTER>
Please fill up the following form about the
courses you will register for this Semester.

<FORM METHOD="POST" ACTION="/cgi/feedback">


<P> Name: <INPUT NAME="name" TYPE="TEXT"
SIZE="30" MAXLENGTH="50">
<P> Roll Number: <INPUT NAME="rollno"
TYPE="TEXT" SIZE="7">
<P> Course Numbers:
<INPUT NAME="course1" TYPE="TEXT" SIZE="6">
<INPUT NAME="course2" TYPE="TEXT" SIZE="6">
<INPUT NAME="course3" TYPE="TEXT" SIZE="6">
<P> <P> Press SUBMIT when done.
<P> <INPUT TYPE="SUBMIT">
<INPUT TYPE="RESET">
</FORM> </BODY> </HTML>

Example 2

Example 2

<HTML>
<HEAD>
<TITLE> Using HTML Forms </TITLE>
</HEAD>
<BODY TEXT="#FFFFFF" BGCOLOR="#0000FF"
LINK="#FF9900" VLINK="#FF9900"
ALINK="#FF9900">
<CENTER> <H3> Student Registration Form
</H3>
</CENTER>
Please fill up the form below and press DONE
when
done.

<FORM METHOD="POST" ACTION="/cgi/feedback">


<P> Name: <INPUT NAME="name" TYPE="TEXT"
SIZE="30" MAXLENGTH="50">
<P> Roll Number:
<INPUT NAME="rollno" TYPE="TEXT" SIZE="7">
<P> Course Numbers:
<INPUT NAME="course1" TYPE="TEXT" SIZE="6">
<INPUT NAME="course2" TYPE="TEXT" SIZE="6">
<INPUT NAME="course3" TYPE="TEXT" SIZE="6">
<P> Category: SC <INPUT NAME="cat"
TYPE=RADIO>
ST <INPUT NAME="cat" TYPE=RADIO>
GE <INPUT NAME="cat" TYPE=RADIO>

<P> Mother tongue: <SELECT


NAME="mtongue" SIZE="3">
<OPTION> Hindi
<OPTION> Bengali
<OPTION> Gujrati
<OPTION> Tamil
<OPTION> Oriya
<OPTION> Assamese
</SELECT>
<P> <P> Thanks for the information.
<P> <INPUT TYPE="SUBMIT" VALUE="DONE">
<INPUT TYPE="RESET" VALUE="CLEAR
FORM">
</FORM>
</BODY>
</HTML>

Example 3

Example 3
<HTML>
<HEAD>
<TITLE> Using HTML Forms </TITLE>
</HEAD>
<BODY TEXT="#FFFFFF" BGCOLOR="#0000FF"
LINK="#FF9900" VLINK="#FF9900"
ALINK="#FF9900">
<CENTER> <H3> Student Feedback Form </H3>
</CENTER>
Please fill up the following form and press DONE
when finished.

<FORM METHOD="POST"
ACTION="/cgi/feedback">
<P> Name: <INPUT NAME="name"
TYPE="TEXT"
SIZE="30" MAXLENGTH="50">
<P> Roll Number:
<INPUT NAME="rollno" TYPE="TEXT" SIZE="7">
<P> Password:
<INPUT NAME="code" TYPE=PASSWORD
SIZE="10">
<P> Course Numbers:
<INPUT NAME="course1" TYPE="TEXT"
SIZE="6">
<INPUT NAME="course2" TYPE="TEXT"
SIZE="6">
<INPUT NAME="course3" TYPE="TEXT"
SIZE="6">

<P> Category: SC <INPUT NAME="cat"


TYPE=RADIO>
ST <INPUT NAME="cat" TYPE=RADIO>
GE <INPUT NAME="cat" TYPE=RADIO>
<P> Mother tongue: <SELECT
NAME="mtongue"
SIZE="3">
<OPTION> Hindi
<OPTION> Bengali
<OPTION> Gujrati
<OPTION> Tamil
<OPTION> Assamese
<OPTION> Oriya
</SELECT>

<P> Languages known:


English <INPUT NAME="lang"
TYPE=CHECKBOX>
Hindi <INPUT NAME="lang" TYPE=CHECKBOX>
<P> Scholarship holder (select for yes):
<INPUT NAME="schol" TYPE=CHECKBOX>
<P> General feedback:
<TEXTAREA NAME="feed" ROWS=3 COLS=20>
</TEXTAREA>
<P> <P> Thanks for the information.
<P> <INPUT TYPE="SUBMIT" VALUE="DONE">
<INPUT TYPE="RESET" VALUE="CLEAR
FORM">
</FORM>
</BODY> </HTML>

Cascaded Style Sheets


(CSS)

How to specify a rule?


The basic CSS syntax
body {background-color:
#FF0000;}

properties
background-color: #FFCC66;
color: #990000;
background-image: url("butterfly.gif");
font-family: arial, verdana, sans-serif;
font-variant: small-caps;
font-variant: normal;
font-style: italic;
font-weight: bold;

font-size: 30px;
text-decoration: underline| overline|
line-through;
text-transform: uppercase|lowercase;
text-transform: capitalize;

Inline Styles
<H2 style = color: blue> This will
appear
as blue. </H2>
<P style = font-size: 12pt; fontfamily:
Verdana>
This paragraph will be set as per the
specified
Style. </P>

Embedded Style Sheets

<html><head>
<style type = text/css>
<! - H2 {color: blue}
P {font-size: 12pt;
font-family: Verdana;
}
-->
</style>
<title> Example of using style sheets </title>
</head>
.
.
</html>

External Style Sheets

The most powerful way.


Collect all styles in a separate text
document.
Creates links to that document.

<head>
<link rel = STYLESHEET
href =
/pathname/mystyle.css
type = text/css>
</head>

The id and class Selectors


In addition to setting a style for a
HTML element, CSS allows you to
specify your own selectors called "id"
and "class".
#para1
{
text-align:center;
color:red;
}

Example for id selector


<html>
<head>
<style>
#para1
{
text-align:center;
color:red;
}
</style>
</head>
<body>
<p id="para1">Hello World!</p>
<p>This paragraph is not affected by the style.</p>
</body>
</html>

The class Selector


The class selector is used to specify a
style for a group of elements.
.center {text-align:center;}

Example for class selector


<html>
<head>
<style>
.center
{
text-align:center;
}
</style>
</head>
<body>
<h1 class="center">Center-aligned heading</h1>
<p class="center">Center-aligned paragraph.</p>
</body>
</html>

You might also like