Transcript Chapter 5 Intro to HTML

Chapter 5
Introduction to HTML,
Continued
© 2004, Robert K. Moniot
Tables
• A table organizes content into a grid of horizontal rows
and vertical columns.
• The table area is enclosed in <table> ... </table>
• A table row is started with <tr> (closing tag optional).
• Within each row, a table column item is started with
<td> (closing tag optional). Use <th> instead, for
column headings.
Example 6
© 2004, Robert K. Moniot
Forms
• HTML forms allow the user to supply data to the web
server.
• We will focus on creating the form in HTML so it appears
to the user with input fields and descriptive text, ready to
be filled in.
• When the form is submitted, the data entered into the
input fields is sent back to the web server and
processed, for instance by a CGI program. We will not
study CGI programming at this time.
© 2004, Robert K. Moniot
Defining A Form
• A form is defined as follows:
<form name="form-name" action="path/to/cgi" method="post">
... (form fields and descriptive text go here)
</form>
The optional name attribute gives the form a name. This is useful
when using JavaScript to access the form.
The “path to cgi” is a URL specifying the location of the CGI program
that will process the form. The method attribute can be either "get"
or "post".
The region between the opening and closing form tags can contain
input fields and any sort of normal HTML content.
© 2004, Robert K. Moniot
Form Submit Methods
• Method "get"
– The input data are appended to the URL of the request sent to
the server when the form is submitted. The server passes the
data to the CGI through an environment variable.
– This method is primitive and suitable only for very small amounts
of form data. It is deprecated nowadays.
• Method "post"
– The input data are sent to the server in a data body following the
request headers. The server passes the data to the CGI through
an input mechanism.
– This is the preferred method.
© 2004, Robert K. Moniot
Form Input Fields
• The most common type of form input field is defined
using the <input> tag, which allows for various types of
input elements: text boxes, check boxes, etc. The
general form of this tag is
<input name="field-name" type="input-type" ... >
Note that there is never a closing tag, since this defines an element,
not a region.
The name attribute gives the input field a name, which is useful for
JavaScript and CGI processing. The type attribute allows different
kinds of input fields to be defined. Depending on the field type,
there may be other attributes to control other properties of the
element.
© 2004, Robert K. Moniot
Input Field Types
• The type attribute can take on one of the following
values:
text - specifies a small box in which the user can type text.
password - like text, but the text which is typed appears as
asterisks, though it is submitted to the server as typed.
checkbox - specifies a box which can be clicked to check or uncheck it.
radio - specifies a “radio button.” Several buttons of this kind are
usually defined as a group, each button of the group having the
same name. A radio button is like a checkbox except that only
one button of the group can be selected at a time.
© 2004, Robert K. Moniot
Special Input Types
• There are some other input types that are special:
submit - specifies a Submit button that sends the completed form
data to the server.
reset - specifies a Reset button that restores all input fields of the
form to their default initial values.
hidden - used to provide data that the user does not see.
© 2004, Robert K. Moniot
Other <input> Tag Attributes
• size="width" for input fields of type text or
password. The width is an integer giviing the width of
the box in characters. Default width is 20.
• maxlength="length" for fields of type text or
password. Specifies the maximum number of
characters that can be entered into the box.
• checked (this attribute takes no value) for checkbox
and radio buttons. If this attribute is present, the box or
button is selected by default.
• value="value" specifies a default value for the item
or, for submit and reset buttons, a label for the button.
© 2004, Robert K. Moniot
Form Menu Elements
• A menu is defined as follows:
<select name="name">
<option> menu item 1
<option> menu item 2
...
</select>
© 2004, Robert K. Moniot
Form Menu Elements
• Default appearance of a select element is to present
the selected menu item in a text box, with a scroll button
at one side that pops up the menu to allow selecting a
different item.
• To create a menu that displays several options in the
window, include the attribute size="length" where
length is the number of items to show.
• Normally, only one item from the list can be selected. To
allow multiple items to be selected, add the attribute
multiple.
• The item tag allows the attribute selected to indicate
that the item should be selected by default.
© 2004, Robert K. Moniot
The textarea Element
• The text type of input element is intended only for small
amounts of text. To provide space for more input text, as
well as scrollbars, use this element. Example:
<textarea name="remarks" rows="10" cols="25">
Default text can be placed here.
</textarea>
Example 7
© 2004, Robert K. Moniot
Image Maps
• An image map is an image that has “hot spots” defined,
i.e. different places on the image are links to various
URLs. Examples of use:
– A map of a country, with hot spots defined for different regions of
the country, each linked to a document referring to that region.
– An image consisting of text labels acting as links. This method
allows the text to use fancier fonts or color schemes than the
browser's supported text fonts, or to arrange the links in a way
(such as in a circle) that would be hard to achieve using an
HTML table or list.
© 2004, Robert K. Moniot
Image Maps
• Image maps can be of two types:
– client-side map: the browser determines the URL that
corresponds to the hot spot where the mouse is, and opens that
link when the user clicks on it.
– server-side map: when the user clicks on a point in the image,
the browser simply sends that pixel's location to the server,
where the appropriate action is taken.
• In most cases, the client-side map is preferable. For
instance, it can also be used with text-only browsers.
• For some applications, for instance to center or zoom in
on a selected point of the image, a server-side map is
required.
© 2004, Robert K. Moniot
Elements of an Image Map
• An image map consists of three coordinated elements:
the image, the map, and the document that uses the
map.
• The image is always in a separate file, referenced using
an <img> tag.
• A client-side map is usually contained in the document
that uses it.
• A server-side map is in a separate file, or it may be a
CGI program.
• We discuss client-side image maps first.
© 2004, Robert K. Moniot
The Image
• The creation of an image to use as a map is outside the
scope of this course. Images can be obtained by:
– taking a photo with a digital camera
– digitizing a photo print using a scanner
– drawing a picture on a computer, using a program such as Paint
or the GIMP
– using available clip art or stock pictures (but be sure to abide by
copyright rules!)
• You will need to know the size of the image in pixels
(picture elements). This information can be gotten by
– file information provided by system, e.g. Windows XP
– using an image manipulation program that reports the image
size
© 2004, Robert K. Moniot
Pixel Numbering Convention
• A specific pixel (picture element) is identified by a pair of
numbers, giving the horizontal dimension (x) first and the
vertical dimension (y) second, separated by a comma.
• Pixel numbering starts from 0,0 at the top left of the
image.
• Since the numbering starts from 0, the maximum pixel
number in a given direction is 1 less than the image size
in that direction.
– For instance, if an image is 200 pixels wide and 300 pixels high,
the bottom right corner pixel has coordinates 199,299.
© 2004, Robert K. Moniot
The Map
• The image map specifies a set of shapes that occupy
different regions of the image.
• Each shape is associated with a URL that is the location
to be opened when the user clicks over that shape.
• Rules about coverage:
– The regions need not cover the image completely. If the user
clicks on a part of the image that is not within any defined region,
nothing happens.
– Regions may overlap. Clicking on the overlapping parts of two
regions selects the region that is defined first in the map.
– To handle clicks that are not within any of the defined regions,
you can define a rectangular area that covers the whole image,
placing this last in the map.
© 2004, Robert K. Moniot
Defining a Map
• A client-side map is placed somewhere in the body of the
document that uses it. The form of a map definition is:
<map name="map-name">
<area href="URL" shape="shape"
coords="x,y,..." alt="alternate text">
<area href="URL" shape="shape"
coords="x,y,..." alt="alternate text">
...
</map>
The map-name gives the map a name that will be used to associate it
with an image.
The <area> tag will be discussed in the next slide.
© 2004, Robert K. Moniot
The <area> Tag
<area href="URL" shape="shape"
coords="x,y,..." alt="alternate text">
• There is no closing tag for the <area> element.
• The URL is the link target to be opened when the region
defined by this element is clicked.
• The shape attribute value is one of rect (rectangle),
circle, or poly (polygon), described in the next slide.
• The number of values in the coords list will vary
depending on the shape.
• The alt attribute provides alternate text for nongraphical browsers.
© 2004, Robert K. Moniot
Shapes
• The shape attribute of the <area> element can be one
of the following:
– rect : takes two x,y pairs in the coords list. The first pair is the
upper left corner of the rectangle, and the second pair is the
lower right corner.
– circle : takes three numbers in the coords list. The first two
numbers are the x,y location of the center of the circle, and the
third is the radius.
– poly : takes three or more x,y pairs in the coords list. Each x,y
pair is a vertex of the polygon. The first and last pair should be
the same to close the polygon, though most browsers will infer a
closing point if it is omitted.
© 2004, Robert K. Moniot
Using an Image Map
• The document that uses the image map needs to include
both the map (as an element somewhere in the body)
and the image (as another element somewhere in the
body). The map does not appear in the rendered page,
so its location in the document is not important. Usually
the map is placed immediately before or after the image
for convenience.
• The image is included as usual by means of an <img>
tag, with an extra attribute to specify the map:
<img usemap="#map-name" src="image.jpg" ... >
The map-name is the name defined by the map's name attribute.
© 2004, Robert K. Moniot
Using an Image Map
• The <img> tag can use the usual other attributes
specifying the height, width, and alternate text.
• It also is usually desirable to include the attribute
border="0"
This suppresses the thin border that is normally put around an
image. Most browsers color this border a special color when an
image is a map, which is usually not desirable.
• You can tell that the image has hot spots and where they
are by moving the mouse over the image.
The browser's status box will show the URL of the link
corresponding to the region under the mouse. Also, Internet
Explorer (but not Netscape) will pop up a “balloon” with the alternate
text of the region.
Example 9
© 2004, Robert K. Moniot
Server-side Image Map
• A server-side image map is defined by two steps:
– Make the image the link text of a link that references the serverside image map or CGI that will handle the mapping operation.
– Include the ismap attribute in the <img> tag.
• The URL of the link can be a server-side image map
defined in a text file, which is similar to a client-side map,
but has a different syntax that depends on the web
server that is used. It is preferred nowadays to use
client-side maps instead for this purpose.
• Alternatively, the URL of the link can be a CGI that is
able to process the pixel coordinates which are sent
when the user clicks on the image. This is the preferred
mode for using server-side maps.
© 2004, Robert K. Moniot
Server-side Image Map
• Form of a server-side image map using a CGI to process
the request:
<a href="path/to/cgi">
<img ismap src="image.jpg" border="0" ... >
</a>
The “path to cgi” is the URL of the CGI program that will receive the
pixel location when the user clicks on a point in the image.
© 2004, Robert K. Moniot
Server-side Image Map
When the mouse is over the image, you will see something like this in
the status box of the browser:
http://www.somehost.com/cgi-bin/imagemap.cgi?298,42
This is the browser's syntax for invoking a CGI using the get method.
Everything up to the question mark is the URL of the CGI. The text
following the question mark is the data that will be sent to the CGI, in
this case the coordinates of the pixel where the mouse is clicked.
Example 10
Hint: You can use this as a simple technique to find out pixel locations of points
on your image when you are constructing a client-side map: make the image
into a server-side map temporarily and read off the coordinates of any chosen
points in the status box. For instance, in the above example, 298,42 is the x,y
location of the mouse at this moment.
© 2004, Robert K. Moniot
Frames
• The use of frames allows a browser to display more than
one web page in the same window simultaneously.
• Typically frames are used to provide navigation elements
or logos that remain fixed while the main content area
changes.
• Frames are introduced by using the <frameset>
element.
• Note: A page that has a <frameset> element cannot
have a <body> element. The <frameset> element of
a page that uses frames replaces the <body> element
of a non-frame page.
© 2004, Robert K. Moniot
Frames
The overall structure of a page that uses frames is:
<html>
<head>
... (head portion as usual)
</head>
<frameset>
<frame name="frame1-name" src="frame1-URL">
<frame name="frame2-name" src="frame2-URL">
...
<noframes>
... (material for browsers that do not recognize frames)
</noframes>
</frameset>
</html>
© 2004, Robert K. Moniot
Attributes of <frameset>
• The <frameset> tag normally has one attribute that
defines the spacing of the frames either horizontally or
vertically on the screen. For example:
<frameset cols="20%,*"> specifies that there are two frames
in the frameset side by side, the first occupying 20% of the width
of the window, and the other occupying the balance. Each frame
extends the entire height of the window.
<frameset rows="50,100,*"> specifies that there are three
frames in the frameset, one above the other. The first occupies
50 pixels of height, the next 100 pixels, and the last takes up all
the rest of the available vertical space. Each frame extends the
entire width of the window.
• If both rows and cols attributes are specified, then the
frames are laid out in a grid.
© 2004, Robert K. Moniot
Nesting Of Framesets
• One frameset can be nested inside another. This allows
more complicated layouts than horizontal tiles, vertical
tiles, or a grid.
• The nested frameset occupies the space where
otherwise a single frame of the enclosing frameset would
go.
Example 10
© 2004, Robert K. Moniot
The <noframes> Tag
• Older browsers may not support frames. Such browsers
will not see a document body and will display a blank
page. To avoid this, use the <noframes> tag to provide
content for these older browsers. The tag is, of course,
unknown to such browsers, so they will ignore it. You
can place a short document body within this area and it
will be displayed by these browsers. Frame-aware
browsers ignore all content between <noframes> tags.
• The noframes content should be placed inside a <body>
element because some browsers will not display content
that is not in a document body.
Example 10
© 2004, Robert K. Moniot
Linking Between Frames
• Very often it is desired for a link located in one frame to
open in another frame. This is achieved using the target
attribute in the link element:
<a href="URL" target="frame-name">Link text.</a>
When the link text is clicked, the URL will be opened in the frame
whose name attribute is frame-name. The frame containing this link
will remain in place.
Example 10
© 2004, Robert K. Moniot
Special target names
• The target attribute of a link in a frame can have one
of the following special values:
_blank opens the target URL in a new browser window.
_self opens the target URL in the same frame as the anchor
(replacing the frame content).
_top
opens the target URL in the whole browser window
(replacing all frames).
© 2004, Robert K. Moniot