2. • HTML is a document-layout and hyperlinkspecification language. It defines the syntax and
placement of special, embedded directions that aren't
displayed by the browser, but tell it how to
display the contents of the document, including text,
images, and other support media. The language
also tells you how to make a document interactive
through special hypertext links, which connect your
document with other documents - on either your
computer or someone else's, as well as with other
Internet resources, like FTP
9. The output looks like:
UIUC
University of Illinois at Urbana-Champaign is one of three campuses of the University of
Illinois
system
UIC
University of Illinois at Chicago is another campus
UIS
University of Illinois at Springfield is the newest campus in the system
The <DT> and <DD> entries can contain multiple paragraphs (indicated by <P>
paragraph tags), lists, or other
definition information.
10. Nested Lists
Lists can be nested. You can also have a number of paragraphs, each containing a
nested list, in a single list item.
Here is a sample nested list:
<UL>
<LI> A few New England states:
<UL>
<LI> Vermont
<LI> New Hampshire
<LI> Maine
</UL>
<LI> Two Midwestern states:
<UL>
<LI> Michigan
<LI> Indiana
</UL>
</UL>
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26. Image Maps
Understanding How Image Maps Work
Creating an image map involves three steps: creating the graphic, mapping the graphic
for hot zones, and placing the correct information (along with the correct programs) on
the Web server itself..
The Map Server Program
When a user clicks an image map on a Web page, the browser determines the
coordinates of the graphic (in pixels) that describe where the user clicked. The browser
then passes these numbers to the map server program, along with the name of the file
that contains the URLs that correspond to coordinates
Defining Your Image Map Hot Zones
As a designer, you are responsible for doing two things in the hot zone definition
process. First, you need to define the hot zones to create the image map-that is, you
need to decide what URL the coordinates will correspond to when the image map is
clicked. Second, you need to create the map definition file that makes the hot zone
information available to the Web server these coordinates.
28. Forms
•
•
•
•
•
An HTML form is part of a web page that includes area where readers can enter
information to be sent back to you, the publisher of the web page.
Creating a form
Every form begins with a form tag that can be located anywhere in body of HTM
document. The form tag has two main attributes:
method: This attrbute can take two values: get and post. Post means to send the
form entries as a document. Get submits the results as a part of URL header in the
form of result query which is in the form of name-value pairs separated by &
action: action attribute specifies the address to which to send the form data. The
address can take two values:
– Location of form processing script on a web server
– mailto: followed by your email address.
•
•
•
•
•
•
Various fields or elements of a form
Textfield-one line text boxes
Syntax: <input type=text name=“txt1” value=“” size=3 maxlength=5 />
Radio button- used when we want the user to select one of a limited number of
choices.
Syntax: <input type=“radio” name=“rd1” value=“male” />Male
The name remains same for all radio buttons but value varies with the label it is
representing.
29. • Checkboxes- checkboxes are used when we want the user to select
more than one choice
• Syntax: <input type=“checkbox” name=“chk1” value=“MCA”
checked />MCA
• When the form is submitted the values are submitted to server as
name value pairs
• Action buttons on form- Action buttons are special buttons that are
included in form for submitting the form’s entries to server, for
resetting the entries of the form and for initiating various events using
language like javascript
• Submit button- The submit button submits the entries of forms to the
server
• Syntax: <input type=“submit” name=“bt1” value=“submit” />
• Reset button- To reset or refill the form
• Syntax: <input type=“reset” name=“bt2” value=“reset” />
• Custom image button- To include an image as a button in form
• Syntax: <input type=image src=“a.gif” name=“bt3” align=“top” />
30. •
•
•
•
•
•
•
•
•
•
•
•
•
Push buttons:
Syntax :<input type=“button” name=“bt4” value=“abc” />
Hidden fields: to pass some hidden values
Syntax:<input type=“hidden” name=“txt4” value=“” />
Textarea- Used for entering more than one line text( multiline text
entry)
Syntax: <textarea name=“” cols=“2” rows=“4”></textarea>
Multichoice elements: used for drawing pulldown menus
Syntax: <select name=“s1” multiple>
<option value=“ ”> </option>
<option value=“ “></option>
</select>
By default all options of select tag are unselected
<option selected></option>
31. • Labels: The label tag is used to define the relationships between a
form control such as a text input field and one or more text labels
• <label>Name</label>
• Password field: The password field is used to get password inputs
from the user
• <input type=“password” name=“ps” value=“” />
32. Frames
A frame is a rectangular region within the browser window that displays
a web page alongside other pages in other frames
To create frames in a web page, a special kind of document is created
called the frameset document. A frameset document is an HTML page
that instructs the web browser to split its window into multiple frames
and specifies which web page should be displayed in each frame. The
frameset document does not contain a body tag. No tags that can be
contained in a body tag can be written in a frameset tag.
The frameset tag has two attributes : rows and cols
rows: This attribute is used for creating horizontal frames. The height of
frames is specified in pixels, percentage or as a proportion of the
remaining space by using “*”.
cols: This attribute is used for vertical frames and widths are specified as
comma delimited list of sizes in pixels , percentage or proportion of
remaining space by using “*”
33. • Frame Tag
• Within the frameset tag, frame tag is included indicating the HTML
document to be displayed in the frame. Frame tag has an attribute:
• src: which gets the address of web page to be loaded in that frame
• name: indicating the name of the frame. The name property is used to
set the value of target property of anchor tag. The target property of
the anchor tag can be:
• _blank- loads link in the new unnamed window
• _top-loads the link in entire browser window
• _parent-loads the link over the parent frame if current frame is nested
within other frames
• _self- loads link into current frame replacing the document now being
displayed in this frame. This is by default.
34. • Nested frames- By nesting one frameset within another, one can
create rather complex frame layouts
• <html><head></head>
• <frameset rows=“43,*,43” >
• <frameset cols=“43,*,43” >
• <frame src=“a.html” />
• <frame src=“b.html” />
• <frame src=“c.html” />
• </frameset>
• <frameset cols=“43,*,43” >
• <frame src=“d.html” />
• <frame src=“e.html” />
• <frame src=“f.html” />
• </frameset>
36. •
•
•
•
•
Other attributes taken by frameset tag are:
Framespacing- specifies the spacing between the frames.
Border-size in pixels
Frameborder- to specify whether the frames contain the border or not.
Takes value 1 or 0 for true or false respectively.
Other attributes of frame tag are:
Scrolling- display scroll bar or not . Gets the value yes or no
Noresize-don’t allow this frame to be resized.
