Frames part 6

Posted in Labels: | at 03:21


The <FRAMESET> tag can enclose other framesets. This results in a nesting of frames. The usefulness of nested frames is much debated and seldom appreciated by purists (same guys who don't like frames in the first place).
If we plan to construct our site based on the format presented in the image below, we have to make use of nested frames.
Nested Frames
And here is the code for it:
<HTML>
<HEAD><TITLE>Nested Frames</TITLE>
</HEAD>
<FRAMESET ROWS="20%, *">
   <FRAME SRC="topframe.html" NAME="top">
   <FRAMESET COLS="50%, *">
      <FRAME SRC="leftbot.html" NAME="left_bot">
      <FRAME SRC="rightbot.html" NAME="right_bot"> 
   </FRAMESET>
</FRAMESET>
<!-- Displayed in browsers whih do not support frames -->
<NOFRAMES>
There is no frame support on your browser.
</NOFRAMES>
</HTML>
The first FRAMESET divides the page into two horizontal regions, 20% and * (80%). It encloses a FRAME (topframe.html) that occupies 20% area and is displayed horizontally across the top of the page. The rest of the page area is allocated to another FRAMESET. This second FRAMESET contains two frames, leftbot.html and rightbot.html. These two frames share 50% of the remaining area.
Click here to display the file. To view source codes for individual documents (topframe.html, leftbot.html and rightbot.html), load them separately in other browser windows.
This finishes our discussions on frames (inline frames are described later), now onto the next session.

  • Digg
  • Del.icio.us
  • StumbleUpon
  • Reddit
  • Twitter
  • RSS
Read Users' Comments (0)

Target attribute of anchor tag

Posted in Labels: | at 03:20


As described in previous session, the Target attribute of <A> is most often used when dealing with frames. It specifies the window in which the document should be loaded. The TARGET attribute can take one of the six values below: (note the underscore for the first four)
  • _blank: Indicates a new window.
  • _parent: Specifies the parent frame which contains the source link.
  • _self: The meaning is very much obvious. The new document is loaded in the same frame.
  • _top: This indicates a new document window. It is a good way to break out of frames and load the document in the same window.
  • frame-name: You can use this to specify in which frame the document should be loaded.
  • RESOURCE WINDOW: This loads the document in a new browser window. This is same as _blank.
The links and their code are presented below. Click on the link to see how the TARGET attribute behaves.
<A HREF="test.html" TARGET="RESOURCE WINDOW">
Loads test.html in a new browser window</A>
Loads test.html in a new browser window

<A HREF="test.html" TARGET="_blank">
Loads test.html in a new browser window</A>
Loads test.html in a new browser window

<A HREF="test2.html" TARGET="_self">
Loads test2.html in this window</A>
Loads test2.html in this window

  • Digg
  • Del.icio.us
  • StumbleUpon
  • Reddit
  • Twitter
  • RSS
Read Users' Comments (1)comments

Inline Frames

Posted in Labels: | at 03:20


Inline Frames were introduced with Micorsoft Internet Explorer version 3.0. They have since been taken up by the World Wide Web Consortium and are now a part of HTML 4.0 standard. Netscape (till version 4), however, does not display inline frames so you may have to load this page in Internet Explorer to see inline frames.
The procedure for including inline frames in documents is very similar to that for images (inline frames, however, have an ending tag) and carry some of the attributes of <IMG> tag.
The tag that places an inline frame is <IFRAME>. So of its attributes are.
  • SRC: A required attribute that takes the URL of a page as value and loads it in the frame.
  • ALIGN: aligns the inline frame with respect to other elements on the page. Values taken are 'TOP', 'BOTTOM', 'MIDDLE', 'LEFT' and 'RIGHT'.
  • HEIGHT and WIDTH: Specifies the dimensions in pixels.
  • HSPACE and VSPACE: Specifies amount of horizontal and vertical space to be put around the inline frame. Value has to be a number that denotes pixels.
  • MARGINHEIGHT and MARGINWIDTH: Determines the amount of space in pixels between the left-right and top-bottom edges of the frame and its contents.
  • FRAMEBORDER: Value can be '1' which puts a 3D border around the frame or '0' which removes this border.
  • SCROLLING: A value of 'YES' forces the display of scrollbars. 'NO' removes scrollbars even if they are needed. 'AUTO' lets the browser decide on inclusion of scroll bars depending on the contents.
  • NORESIZE: Prevents users from resizing the frame.
  • NAME: Assigns a name to the frame so that it can be referred by it.
Now let us put an inline frame in this document.
Right click inside the frame to view its source.

  • Digg
  • Del.icio.us
  • StumbleUpon
  • Reddit
  • Twitter
  • RSS
Read Users' Comments (0)

HTML Forms part 1

Posted in Labels: | at 03:19


Note: HTML forms are not useful without a client-side scripting language or server-side technology.
The note above should be enough to prompt you in learning a programming language... but let us get down to the business at hand.
The main use of HTML forms is to gather some kind of input/feedback from visitors. This input might be in the form of comments or a shopping cart system wherein your users select items and drop them in shopping baskets. Form objects (which we shall soon meet) have also been used for various tricks by client-side programmers.
A form begins with <FORM> and ends with </FORM>. HTML presents us with various form object/elements that are placed INSIDE the form tags.
  • <INPUT TYPE="TEXT">
  • <INPUT TYPE="PASSWORD">
  • <INPUT TYPE="RADIO">
  • <INPUT TYPE="CHECKBOX">
  • <INPUT TYPE="BUTTON">
  • <INPUT TYPE="RESET">
  • <INPUT TYPE="SUBMIT">
  • <INPUT TYPE="HIDDEN">
  • <INPUT TYPE="IMAGE">
  • <INPUT TYPE="FILE">
  • <SELECT>...</SELECT>
  • <TEXTAREA>...</TEXTAREA>
  • <BUTTON>...<BUTTON>
  • <OPTION>...</OPTION>
The first ten listed above are all variants of the <INPUT> element. However, since their TYPE is different, the other attributes taken by them differ.
We shall explore these along with their attributes, one by one.

The HTML form <INPUT TYPE="TEXT">

This form object is the most common. It defines a horizontal text field as:

The attributes associated with this tag are:
  • NAME: Sets a name for this form element. You can give any name to your text field as long as you don't duplicate it in the same form.
  • SIZE: Determines the size. The value taken is a number.
  • MAXLENGTH: Specifies the number of characters a user can submit thru this element.
  • VALUE: Specifies a default value that is displayed inside the text field when a user first opens the page.
Type your first name in the box: 
<INPUT TYPE="TEXT" SIZE="15" MAXLENGTH="20" 
NAME="first_name" VALUE="Your first name">
is displayed as:
Type your first name in the box:


The HTML form <INPUT TYPE="PASSWORD">

This object is very similar to the TEXT mentioned above and takes the same attributes. Its inclusion also causes the display of a text field. However, anything typed by the user inside this text field is replaced by *s or other characters that mask what you type. Try this out yourself.
Type your password in the box:
<INPUT TYPE="PASSWORD" SIZE="15" MAXLENGTH="20" 
NAME="yourpassword" VALUE="">
Type your password in the box:

Attributes:
  • NAME: Sets a name for the password field by which it is referred using scripting languages.
  • MAXLENGTH: Sets the maximum number of characters a user can input.
  • SIZE: Takes a number as value and specifies the size.
  • VALUE: Specifies a default value.

<INPUT TYPE="CHECKBOX">

Creates a checkbox. Its other attributes are:
  • CHECKED: This attribute takes no value. Including it in the tag causes the checkbox to be checked by default.
  • NAME: Specifies a name for the element.
  • VALUE: Assigns a value to the element.
<INPUT TYPE="CHECKBOX" NAME="your_answer"
VALUE="yes" CHECKED> Do you like this site?
Do you like this site?


<INPUT TYPE="RADIO">

Makes a radio button. The attributes taken are similar to those of a checkbox (above).
  • CHECKED: Puts the radio button to "ON" state. Takes no value.
  • NAME: Assigns a name to the radio button.
  • VALUE: Specifies a value that can be passed to the server.
<INPUT TYPE="RADIO" VALUE="yes" NAME="html" 
CHECKED> Do you like HTML?
Do you like HTML?


Important: What is the difference between a radio button and a checkbox?

These two elements are not the same though they share the same attributes.
Radio buttons are employed when a single reply is desired from a list of choices. In such cases, radio buttons with the same name but different values are grouped together. Since the buttons have the same name, the user is able to select only one. The value of the selected button along with its name is sent to the server.
Checkboxes on the other hand, can be used in two ways. One to get a 'yes'/'no' kind of response and the other to get a multiple selection.
We'll see this through examples.
Do you like Mozart's Symphony No.40?<BR>
<INPUT TYPE="RADIO" NAME="moz" VALUE="yes" CHECKED> Yes<BR>
<INPUT TYPE="RADIO" NAME="moz" VALUE="No"> No<BR>
<INPUT TYPE="RADIO" NAME="moz" VALUE="notsure"> Can't Say<BR>
Do you like Mozart's Symphony No.40?
Yes
No
Can't Say
Try to select two radio buttons... you can't... that is because they have the same name. Thus, the code above presents a list of choices and expects only one selection.
Notice that the CHECKED attribute selects the first radio button when the page is first loaded. Depending on the selection, the associated value is sent to the server along with the radio button name. So, if the visitor selects Can't Say, the associated value notsure is sent along with button name, moz.

An example for checkboxes can be...
Which ice-cream flavors do you like?<BR>

<INPUT TYPE="CHECKBOX" NAME="ice" VALUE="chocolate" CHECKED>
Chocolate<BR>
<INPUT TYPE="CHECKBOX" NAME="ice" VALUE="vanilla">
Vanilla<BR>
<INPUT TYPE="CHECKBOX" NAME="ice" VALUE="strawberry">
Strawberry<BR>
<INPUT TYPE="CHECKBOX" NAME="ice" VALUE="mint">
Mint<BR>
Which ice-cream flavors do you like?
Chocolate
Vanilla
Strawberry
Mint
Notice that in this case too, all checkboxes have the same name. However, you can select multiple boxes (try it out...). This is helpful when we desire zero or more values. Values of all checkboxes that are selected are sent to the server along with checkbox name for further processing by a CGI script.
Another use of checkboxes is to get a 'yes'/'no' kind of response as in:
<INPUT TYPE="CHECKBOX" VALUE="yes" NAME="mlist">
Would you like to subscribe to our mailing list?
Would you like to subscribe to our mailing list? Although, radio buttons can be employed for the same purpose, I prefer to use checkboxes since they display a better icon.

So, radio buttons or checkboxes are used depending on the type of question you have. A generalization would be to employ radio buttons for questions where only one reply is desired and checkboxes for questions where multiple replies are possible.

  • Digg
  • Del.icio.us
  • StumbleUpon
  • Reddit
  • Twitter
  • RSS
Read Users' Comments (0)

orms in HTML part 2

Posted in Labels: | at 03:18


This creates a button which is quite useful for triggering JavaScript events.
  • NAME: Specifies a name for the button.
  • VALUE: Determines what is written on the button.
<INPUT TYPE="BUTTON" NAME="pbut" VALUE="Push Me">

The button above does nothing when clicked. However, you can attach JavaScript event handlers to this button to set up some kind of action.
<INPUT TYPE="BUTTON" VALUE="Push me to get a greeting" 
NAME="mybut" onclick="return disp();">


The HTML form RESET button

Creates a reset button, which when clicked, clears all form elements and sets then to their default values. It has only one attribute VALUE, that specifies the text written on the button.
<INPUT TYPE="RESET" VALUE="Clear the form">


The HTML form SUBMIT button

Makes a button, which when clicked, submits the form. It has two attributes
  • VALUE: Puts text on the button.
  • NAME: Names the submit button. Its value is generally used by server side scripts to determine if the form has been submitted.
<INPUT TYPE="SUBMIT" VALUE="Send Email" NAME="semail">

Clicking on a submit button sends the name-value pairs of all form elements to the server. (Note: This submit button does not work. However, you can test one on the right to join my mailing list!)

<INPUT TYPE="FILE">

Allows your users to send files to your server. It is accompanied with a Browse button that helps the user locate the file on his computer.
Attributes taken are:
  • ACCEPT: Its value is a MIME type/s that your server program is ready to accept. A comma-separated list of mime types can be supplied.
  • NAME: Specifies a name for the element.
  • VALUE: Specifies the default text inside the text field.
<INPUT TYPE="FILE" NAME="uploadfile" VALUE="">



<INPUT TYPE="IMAGE">

This is a great tag allowing designers to make their own buttons. With its use you can replace the dull default button with a colorful image.
There are four attributes associated with this tag
  • SRC: a required attribute that points to the URL of the image file.
  • NAME: Gives a name to the element.
  • ALIGN: aligns the surrounding text with respect to the image.
  • BORDER: sets the border around the image. If zero is assigned as its value, no border is displayed.
<INPUT TYPE="IMAGE" SRC="but.gif" NAME="sub_but" BORDER="0">



<INPUT TYPE="HIDDEN">

This creates a form input field which is not displayed in the browser. It is ideal for passing values set by the programmer or by certain actions of the user.
It has only two attributes.
  • NAME: Defines a name for the element.
  • VALUE: Sets a value for the element.
<INPUT TYPE="HIDDEN" NAME="birthday" VALUE="16-03-72">

  • Digg
  • Del.icio.us
  • StumbleUpon
  • Reddit
  • Twitter
  • RSS
Read Users' Comments (0)

HTML Forms part 3

Posted in Labels: | at 03:17


SELECT>... </SELECT> form element

This HTML form element lets you develop a drop down scrolling list or menu. The list can allow for single as well as multiple selections.
The individual items of the list are placed with the help of another tag, <OPTION> (described below).
The attributes taken are:
  • NAME: defines a name for this element.
  • SIZE: if the size is '1', the list is displayed as a dropdown menu else as a scrolling list.
  • MULTIPLE: allows for multiple selection.
Here is how you create a four-item drop down selection list.
Which system do you use? 
<SELECT NAME="platform" SIZE="1">
<OPTION VALUE="win">Windows
<OPTION VALUE="mac">Macintosh
<OPTION VALUE="unix">Unix
<OPTION VALUE="oth">Other
</SELECT>
Which system do you use?


<OPTION> </OPTION>

The <OPTION> tag defines an item of the selection list described above. Its end tag is not required. It takes two attributes:
  • VALUE: Gives a value to the item that is sent to the server along with the selection list name.
  • SELECTED: Selects an item when the form is displayed.
Which system do you use? 
<SELECT NAME="platform" SIZE="1">
<OPTION VALUE="win">Windows
<OPTION VALUE="mac">Macintosh
<OPTION VALUE="unix" SELECTED>Unix
<OPTION VALUE="oth">Other
</SELECT>
Which system do you use?


HTML form TEXTAREA elements

This creates a multi-line text box. Its attributes are:
  • NAME: Defines a name for this element.
  • COLS: Specifies the number of character columns. Thus, a value of 20 means that the text box is twenty character in width.
  • ROWS: Determines the height of text box in terms of character rows.
  • WRAP: Sets word wrapping inside the text box and can take off, virtual or physical as value. 'Off' turns word wrapping off. Through 'virtual', word wrapping is turned on but the line endings are not transmitted to the server. 'Physical' displays and sends the line endings to the server.
To define a value for the TEXTAREA, include the text between the start and end tags.
<TEXTAREA NAME="query" COLS="20" ROWS="5">
Please type your query here.
</TEXTAREA>



<BUTTON>...</BUTTON>

This element is specific to Internet Explorer and ignored by Netscape.
It creates a button that is quite similar to ones made by <INPUT TYPE="BUTTON">. It takes the following attributes:
  • NAME: Sets a name for the button.
  • TYPE: Can take either SUBMIT, RESET or BUTTON as value.
  • VALUE: Defines the value that is sent to the server along with the button name.
<BUTTON NAME="somebut" TYPE="BUTTON" VALUE="justabut">
Just for Kicks</BUTTON>
  (Netscape users will not see the button)
Note: The text that is placed between the closing and ending tags is displayed on the button.
What do you do now?
As mentioned previously, forms are pretty useless if you don't know client-side or server side scripting. In order to gain full advantage of forms, you should learn a client-side and a server-side language.

  • Digg
  • Del.icio.us
  • StumbleUpon
  • Reddit
  • Twitter
  • RSS
Read Users' Comments (0)

Image Maps part 1

Posted in Labels: | at 03:14


You know that an image can be made into a hot spot by enclosing it inside anchor tags. Such images point to only one HTML document, the one specified in the HREF attribute of the enclosing <A> tag. Thus,
<A HREF="http://www.webdevelopersnotes.com/">
<IMG SRC="home.gif" WIDTH="152" HEIGHT="25" 
ALT="Back to homepage" BORDER="0"></A>
Back to homepage Provides a link to homepage of this site.
Image maps too, carry links to documents. However, in Image Maps, different parts of the image are linked to different HTML documents! For example, the top part of the image might link to document1.html, the middle part to document2.html and the bottom to document3.html.
Linking different parts of an image to different documents/files is achieved through some specific HTML tags.
But before all that, let us get to know these image maps better.
Image Maps come in two flavors:
  • Server-side maps: Those that contain the linking information on the server.
  • Client-side maps: The linking information is bundled along with the HTML document.
There is always a performance benefit when using Client-side maps. They can also be made interactive using JavaScript. Since, client-side maps are supported by all modern browsers and are simpler to understand and implement than server-side maps, I shall be concentrating only on them.
[Though, the usage of older browsers has dwindled, it is recommended that you have a look at your site statistics to make a decision whether to use server-side maps, client-side maps or both.]

Client-side Image Maps

In order to use an image as a map, you have to include the USEMAP attribute inside the <IMG> tag. Thus, any image can be made into a map if the USEMAP attribute is added to the <IMG> tag. The value of this attribute is the name of the <MAP> element. The <MAP> element contains the main information about the image map. It defines the different areas of the image and their associated links.
The different regions of the image are defined using the <AREA> tags. These tags are placed between <MAP> - </MAP> tags. The link data is also specified by the <AREA> tags.
Your document can carry as many image-maps as you want, but each should have different maps to tell them apart.
Let's look at some code.
<IMG SRC="sitemap.gif" WIDTH="200" HEIGHT="300" BORDER="0" 
USEMAP="#site">
The SRC attribute of <IMG> tag specifies sitemap.gif to be used as an image map. The USEMAP attribute points to the map we shall be using.
Note: The name of the map is prefixed with a hash # sign.
It's simple, isn't it? Now we shall look at the <MAP> tag and the <AREA> tags it encloses.

<MAP>...</MAP>

This element has many attributes. Most of them are useful for scripting and for applying styles. We shall concern ourselves with only one, the NAME attribute. This attribute determines the name of the map and is used to refer to it from USEMAP attribute of the <IMG> tag. We'll name our map, site.
<MAP NAME="site">
...
Content
...
</MAP>

<AREA> tags and attributes

The main content of the image map resides inside <AREA> tags. Their important attributes are:
  • HREF: Takes a URL as value and provides a link to that document.
  • SHAPE: The values for this attribute can be RECT, CIRCLE, POLY or DEFAULT. These define the shape of the area in the main image. After dividing your image into RECTs, POLYs, and CIRCLEs, you might be left with some area. You can use the DEFAULT value to refer to this area.
  • COORDS: Takes a comma-separated list of values. Depending upon the shape, this value changes.
  • TARGET: Specifies the window in which to load the document. This attribute is the same as that for <A>.
  • NOHREF: This is employed when you do not want areas to be linked to any documents. Used often with the DEFAULT value of SHAPE mentioned above.
  • NAME: This defines an area that can be used for scripting, by older browsers.
<MAP NAME="site">

<AREA HREF="../../index.html" SHAPE="RECT" COORDS="5,6,95,25">
<AREA HREF="../../basics/index.php3" SHAPE="RECT" 
COORDS="61,43,109,60">
<AREA HREF="../index.php3" SHAPE="RECT" COORDS="61,65,125,83">
<AREA HREF="../../graphics/index.php3" SHAPE="RECT" 
COORDS="61,88,124,106">
<AREA HREF="../../tips/index.php3" SHAPE="RECT" 
COORDS="61,112,164,129">
<AREA HREF="../../design/index.php3" SHAPE="RECT" 
COORDS="61,133,145,152">
<AREA HREF="../../promotion/index.php3" SHAPE="RECT" 
COORDS="61,158,161,174">
<AREA HREF="../../se/index.php3" SHAPE="RECT" 
COORDS="61,180,168,199">
<AREA HREF="../../software/index.php3" SHAPE="RECT" 
COORDS="61,204,128,221">
<AREA HREF="../../services/index.php3" SHAPE="RECT" 
COORDS="61,227,158,244">
<AREA HREF="../../feedback.php3" SHAPE="RECT" 
COORDS="61,249,142,267">
<AREA HREF="../../feedback.php3" SHAPE="CIRCLE" 
COORDS="145,25,40">

</MAP>
The value of COORDS taken by RECT is the top-left corner and bottom-right, x and y coordinates. For CIRCLE, the value is x and y coordinates of the center and the radius.
The co-ordinates of the image map are specified in pixel values and you can use any graphics program to find them. Now, this procedure is quite painful and time-consuming, so I suggest you use one of the Image-Map coordinates generator programs.

  • Digg
  • Del.icio.us
  • StumbleUpon
  • Reddit
  • Twitter
  • RSS
Read Users' Comments (0)
Subscribe to: Posts (Atom)