Image, Link & Form

Chittaranjan Pradhan

Web Technology 2 Image

Links

Image, Link & Form Link Types

Linking Between Frames

Marquee

Form
Form Action

Chittaranjan Pradhan
School of Computer Engineering,
KIIT University
2.1
 Image, Link & Form
Image
Chittaranjan Pradhan
Image
Border can be added to an image by using border attribute. Image

Similarly, alignment can be set using align attribute Links

Link Types
Linking Between Frames

Marquee

Form
Form Action

2.2
 Image, Link & Form
Links
Chittaranjan Pradhan
Links
Text Links Image

Links
Link Types
Linking Between Frames

Marquee

Form
Form Action

2.3
 Image, Link & Form
Links...
Chittaranjan Pradhan
Links
Image Links Image

Links
Link Types
Linking Between Frames

Marquee

Form
Form Action

2.4
 Image, Link & Form
Link Types
Chittaranjan Pradhan
Relative Link
Image
• It points to a location that is relative to the current page
Links
• Having a link to index.html is a relative link that points to Link Types
Linking Between Frames
the index.html page in the same directory as the current Marquee
page Form
Form Action
• The link can break if you move a file to another directory &
thus change the relative position of the link’s destination

Site Root-Relative Link

• It points to a location that is relative to the root directory of

the site. It begins with a slash /
• Having a link to /index.html is a site root-relative link that
points to the index.html page in the root directory of the
site. Ex: This is used to have all images in an images
directory and then to link images
• The link stays the same no matter what directory the
current page is in
2.5
 Image, Link & Form
Link Types...
Chittaranjan Pradhan
Absolute Link
Image
• It is simply one that includes the entire path to the file
Links
• These are generally used for links that need to point to a Link Types
Linking Between Frames
different site than the one on which your page is located Marquee

Form
Form Action
In-Text Link

• It is one that links to some other part of the same page

2.6
 Image, Link & Form
Linking Between Frames
Chittaranjan Pradhan
Linking Between Frames
Image

Links
Link Types
Linking Between Frames

Marquee

Form
Form Action

2.7
 Image, Link & Form
Linking Between Frames...
Chittaranjan Pradhan

Linking Between Frames

Image

Links
Link Types
Linking Between Frames

Marquee

Form
Form Action

2.8
 Image, Link & Form
Marquee
Chittaranjan Pradhan
Marquee
Marquee is used to set a scrolling text or image Image

Links
• direction: left, right, up, down Link Types
Linking Between Frames
• behavior: scroll, slide, alternate
Marquee

• scrollamount: Form
Form Action

2.9
 Image, Link & Form
Form
Chittaranjan Pradhan

Form
Image
• An HTML form is a section of a document containing Links
normal content, markup, special elements called controls Link Types
Linking Between Frames
(checkboxes, radio buttons, menus, etc.), and labels on Marquee
those controls Form
Form Action
• A single page can include several different forms, but you
cannot nest one form inside another
• The name attribute identifies each form on the page. It is
also needed for programs that retrieve values from the
form
• HTML Forms are required when you want to collect some
data from the site visitor

• The control type defined by the INPUT element depends

on the value of the type attribute
• placeholder attribute specifies a short hint that describes
the expected value of an input field
2.10
 Image, Link & Form
Form...
Chittaranjan Pradhan

Text Box Image

Links
It is a text box where user can enter some characters Link Types
Linking Between Frames

Marquee

Form
Form Action

2.11
 Image, Link & Form
Form...
Chittaranjan Pradhan
Password
A password field is a text box in which the characters typed by Image

the user are displayed as bullets or asterisks Links

Link Types
Linking Between Frames

Marquee

Form
Form Action

2.12
 Image, Link & Form
Form...
Chittaranjan Pradhan

Label
Image
You must bind the label to the id attribute of the field
Links
Link Types
Linking Between Frames

Marquee

Form
Form Action

2.13
 Image, Link & Form
Form...
Chittaranjan Pradhan
Selection List
A selection list is a list box from which a user selects a Image

particular value or set of values Links

Link Types
Linking Between Frames

Marquee

Form
Form Action

2.14
 Image, Link & Form
Form...
Chittaranjan Pradhan
Selection List
Option Group is used to organize selection lists into distinct Image

groups Links
Link Types
Linking Between Frames

Marquee

Form
Form Action

2.15
 Image, Link & Form
Form...
Chittaranjan Pradhan

Radio Buttons Image

Radio buttons display a list of choices from which a user makes Links
Link Types
a selection Linking Between Frames

Marquee

Form
Form Action

2.16
 Image, Link & Form
Form...
Chittaranjan Pradhan

Group Box
Image
It is a box placed around a set of fields that indicates that they
Links
belong to a common group Link Types
Linking Between Frames

Marquee

Form
Form Action

2.17
 Image, Link & Form
Form...
Chittaranjan Pradhan
Check Boxes
A check box is either selected or not Image

Links
Link Types
Linking Between Frames

Marquee

Form
Form Action

2.18
 Image, Link & Form
Form...
Chittaranjan Pradhan
Text Area
It is an extension of a text field, where the text can span Image

multiple lines Links

Link Types
Linking Between Frames

Marquee

Form
Form Action

2.19
 Image, Link & Form
Form...
Chittaranjan Pradhan
Buttons
Image
• A submit button is a button that submits the form
Links
• A reset button resets the form to its original (default) values Link Types
Linking Between Frames

• Push buttons by themselves perform no actions in the Marquee

Web page. To create an action, write a script or program Form

Form Action
that runs automatically when the button is clicked

2.20
 Image, Link & Form
Form...
Chittaranjan Pradhan

File Button
Image
It is used to choose a file
Links
Link Types
Linking Between Frames

Marquee

Form
Form Action

2.21
 Image, Link & Form
Form...
Chittaranjan Pradhan

Hidden Field
A hidden field is added to the form but not displayed in the Web Image

page. Because the field is hidden, it can be placed anywhere Links

Link Types

between the opening and closing <form> tags Linking Between Frames

Marquee

Form
Form Action

2.22
 Image, Link & Form
Form Action
Chittaranjan Pradhan

Form Action Image

Links
• After adding the elements to your form, you’ll need to Link Types
Linking Between Frames
specify where to send the form data and how to send it. Marquee
The attributes are: Form
• action Form Action

• method
• enctype
• The get method is the default
• get appends the form data to the end of the URL specified
in the action attribute
• The post method sends form data in a separate data
stream, allowing the Web server to receive the data
through standard input
• the post method is considered the preferred way of sending
data to a Web server
<FORM ACTION = Ëxample.html METHOD = post »

2.23