Destination-Code - Chetan Crasta's XHTML, HTML and CSS Notes: July 2008

Thursday, July 31, 2008

Web Page Redirection


<head>

<meta http-equiv="Refresh" content="5; URL=reform.html" />

The above code causes the browser to load the page "reform.html" 5 seconds after loading the page that contained the code. If the URL=page.html is omitted then the browser reloads the page containing the code every 5 seconds.
The above code also works with pages in framesets or iframes.
Pay special attention to the value of the attribute content . Examples:
content="5"> - reloads the page every 5 seconds
content="5; URL=reform.html"- loads the page reform.html after 5 seconds
In the second example the value of content is the number of seconds, a semi-colon, followed by URL=reform.html".

Friday, July 25, 2008

<thead>,<tfoot> and <tbody>

<thead>
This tag must appear just after the table or caption tags.
You can use this tag to define a set of table header rows. The tr tags are placed within the thead element. This can potentially be used by browsers to include the heading row in every printed page or to keep the heading row static while scrolling. However, no browsers currently support this.
<tfoot>
This tag is used to define the footer of a table. It must appear before the tbody tag and can contain multiple rows.
<tbody>
A table can contain more than one set of tbody elements. Each instance of the tbody element contains a set of rows. You can use tbody to divide a table into sections. This helps in styling the sections (using CSS).

The colspan and rowspan attributes

<td colspan="2" rowspan="3" >
The colspan attribute creates a cell that spans the width of more than one column. The rowspan attribute creates a cell that spans the height of more than one row.

Tables

The main table tags are -

<table> - This element is a container for all the other table elements
<tr> - This tag creates a row in the table
<th> - This tag creates a heading row in the table
<td> - Creates a cell within a row

The table tag The table tag can only contain tr tags.
The summary attribute
This attribute contains a string that describes the contents of the table. It is used by non-visual browsers. It may also be used by search engines to index a page.
The tr tag
The tr tag creates rows in the table. This tag can only contain td or th tags.
The td and th tags
The td elements create cells within the rows. Therefore, they are always contained in tr tags. The th elements are used to create heading cells. They operate in the same way as td elements. The only difference is in the way they are rendered by the browser - header cell text is usually rendered in bold and centered.
These tags can contain any content - text, images, lists and even other tables.
If one of the rows in a table has less cells than the others, a blank space is created at the end of the rows, the same size as the missing cells.

Tuesday, July 22, 2008

The <legend> tag

The legend tag creates a label for a fieldset in a form. The legend tag can only be contained in a fieldset.

The above legend was created with the following code:
<fieldset>
<legend>Compulsory Info</legend>

Monday, July 21, 2008

The <label> tag

A form control usually has a text label that describes it. Using the label tag, you can define the relationship between a text-label and the form control. Labels make a form more accessible. They also give more "hooks" to apply CSS.
This is an example of a form control without a label:
<input type="checkbox" name="spice" value="salt" />Hot
Here is the same form control with a label.
<input type="checkbox" name="spice" value="salt" id="hot" /><label for="hot">Hot</label>
Another way to use the label tag is:
<label><input type="checkbox" name="spice" value="salt" />Hot</label>
Note that for the first method, you need to include the id attribute.

Sunday, July 20, 2008

Accesskey attributes

The accesskey specifies a single letter or number as the keyboard shortcut for the link or user-input object. The object is activated by the keyboard combination alt + shift + character . If the shortcut character appears in the link text it will be underlined.
Note this does not work consistently in different browsers. Opera does not seem to support it at all. IE7 and IE6 supports it for text-input fields but not links. Firefox seems to fully support accesskeys.
<a name="test" href="form.html" title="just a test link!" accesskey="a">

Friday, July 18, 2008

The select tag

The select tag can be used to either create a pull-down menu or a multiple-selection menu.
Example:


<select  name="country">
<optgroup label="big_five">
<option value="india" >India</option>
<option value="usa" >USA</option>
<option value=""uk" >UK</option>
<option value="canada">Canada</option>
<option value="australia">Australia</option>
</optgroup>
<optgroup label="others">
<option value="pakistan">Pakistan</option>
<option value="france">France</option>
<option value="spain">Spain</option>
<option value="italy">Italy</option>
</optgroup>
</select>

Pull-down menu

<select name="country">
<option value="india" >India</option>
<option value="usa" >USA</option>
<opton value="uk" >UK</option>
</select>

You can organize the items of a pull-down menu using the optgroup tag.

Multiple-selection menu
The attribute multiple="multiple" makes the above code function as a multiple-selection menu.

You can set the number of items displayed using the size="x",where x is the number of items.

The <textarea> Tag

<textarea name="comment" cols="50" rows="5">Type your comment here</textarea>
This tag creates a multi-line text-entry area. The text content of the element is the default text that the text-area will contain. cols and rows specify the number of columns and rows. The default text should not contain any HTML.
It makes more sense to use the post method to submit a form if it has a text-area. Because unlike get, post does not have the 2048-characters-in-URL limit.
Non-standard attribute: wrap
By default, the text-area wraps lines to fit in the box. To disable this put the attribute wrap=off in the textarea tag.
Note that though by default the text-area wraps lines, it transmits the text exactly the way the user entered it. To have the virtual wrapping transmitted, use wrap=physical. To prevent the transmission of virtual wrapping use wrap=virtual.

Forms - Hidden Fields

<input type="hidden" name="secretparameter" value="something" />
The above tag is not rendered by the browser - it is hidden. When the form containing this element is submitted, elements parameter and value is sent to the form application.
This tag has some special uses in managing user-server interactions (when the server application itself generates forms).

Tuesday, July 15, 2008

Forms - Action Buttons

These are buttons that perform an action on the entire form. There are four types of action buttons - submit, reset, regular and image.
Submit and image buttons submit all the form's parameters to the form application.
A regular button can be used to perform an action using Javascript.
The reset button erases all user input from the form.

Submit Button
The submit button's default name is "Submit Query". However, Opera and Amaya display just "Submit". To rename the button, include the value="somename" attribute.
If there is a name attribute, then it's value is included as a parameter in the form data, with the value of value as the data.
Example:
<input type="submit" name="button1" value="test" />
if the form uses get, the url will look like this
form.php?spice=pepper&button1=test
the button will look like this

Reset Button
<input type="reset" value="clear all">
The above code creates a button that clears all user-entered data in the form and restores the defaults.
If, in a group of radio buttons, there is no default choice (using the checked=checked attribute), then on pressing the reset button, all the radio buttons are cleared.
The code above creates the following button:

Image Buttons
<input type="image" src="images/button1.gif" name="map"/>
This is what it looks like:

Using the code above, you can make an image of your choice a button. When the user clicks it, the form is submitted to the form application along with the X and Y coordinates of the mouse pointer when the button was clicked. The X and Y coordinates are with respect to the top-left corner of the button.
Here is what will be submitted if the method is get :
form.php?spice=pepper&map.x=10&map.y=14

Regular Buttons
<input type="button" value="Send" />
This type of button does nothing unless used along with a Javascript on-event.

Note: When you have a group of buttons, it is useful to give all the buttons the same names but different values. Thus, the form program will know which button was clicked by the name=clickedbuttonname parameter.

Thursday, July 10, 2008

Forms - Radio buttons

In a set of radio buttons, only button can be chosen at a time. Here is the code to create radio buttons:
<input type="radio" name="sex" value="male" />Male<br />
<input type="radio" name="sex" value="female" />Female<br />
Each button has a different value attribute value. This is the data sent to the server application when the form is submitted. In the above example, if "Male" is selected then sex=male will be sent to the server application.
When the webpage is first loaded, by default none of the radio buttons are selected. However, once the user makes a choice, one button in the set of radio buttons will be selected - the radio buttons cannot be returned to their "all unselected" state.
After the page is loaded, if the user does not select any radio button and submits the form, then none of the radio button values will be submitted to the server; the name of the radio button controls will not even be present in the data transmitted to the server application.
To prevent the above scenario from occurring, include checked="checked" in the input tag that you want selected when the page is loaded. Of course, including this attribute for more than one radio button makes no sense.

Forms - Checkboxes

<input type="checkbox" name="spice" etc.

This creates a checkbox. The value attribute specifies the data that is sent to the server application when the checkbox is selected.

<input type="checkbox" name="spice" value="salt" />

You can have a set of checkboxes all with the same name. When these are submitted using get, the URL looks something like this:
http://www.somesite.com/form.html?chars&picture=&spice=salt&spice=chilly&spice=pepper

and the checkboxes will look like this:

<input name="spice" value="salt" type="checkbox">Salt

<input name="spice" value="pepper" type="checkbox">Pepper

<input name="spice" value="chilly" type="checkbox">Chilly

The checked="checked" attribute selects the items that are checked automatically when the web page is loaded.

<input> Tag - File Selection

<input type="file" size="20" />
The above code presents the user with a text box and a button labeled "Browse" to its right. The maxlength attribute does not seem to have any effect here.
The accept attribute is supposed to specify the kind of file the user can choose. However, currently only Opera supports this. Other browsers ignore the accept attribute and allow the user to choose any filetype.
The accept attribute's value is a comma-separated list of MIME types (eg. accept="image/gif,image/jpeg" ).
The form which contains the file selection control must use the post method and the enctype must be multipart/form-data . If the form uses the get method, then the name of the file (not the entire path), is sent as if it were entered in a regular test field, any spaces in the name of the file is converted into pluses (+).
Note that the enctype attribute specifies the content-type only when the value of method is post.

Forms - Masked Text Controls

<input type="password" size="15" maxlength="10" name="accesscode" />
In this text control, the characters entered by the user are masked. However, if the form is transmitted using get, then the password will be visible in the URL. This is not a secure way of transmitting secret data.

Forms - Text Entry Controls

<input type="text" name="somename" size="15" maxlength="20" />
The above line of code specifies a single-line text input box of width 15 characters (approximately) that accepts a maximum of 20 characters. The name of the submitted text is "somename".
The default value in the text box can be specified using the value attribute (eg. value="first name only")

Wednesday, July 9, 2008

The <input> tag

The <input> tag is used to create "controls" in a form. There are four types of input controls:

text box
submit button
radio buttons
checkboxes

You choose the type of control using the type attribute. Also, every input control must have a name attribute. The name attribute's value is a text string. It's a good idea to avoid special characters (except the underscore). It can contain letters and numbers, but should not having a leading number.
Note that violation of the above rules does not give validation errors.
The name given to a form control is associated with the data sent by that control to the server. (Eg. If the method is get, the url sent to the application will be something like http://www.somesite.com/processorder.php?fieldname=sometext )

Saturday, July 5, 2008

The tabindex attribute

The tabindex attribute reorders the sequence in which the browser changes focus when the user presses the tab key. This might confuse screen reader software, therefore this attribute is not recommended.
See http://www.webnauts.net/academy/tabindex.html

The accesskey attribute

The accesskey attribute specifies a character that serves as an alt + shift + character keyboard shortcut (in firefox 2 and above) for an element.
However, this may override the keyboard shortcuts defined by the browser. No indication is given to the user that the special keyboard shortcut is available.
For this and other reasons (see http://en.wikipedia.org/wiki/Access_keys ), using this attribute is not recommended.

Form submission trick using mailto

<form method="post" action="mailto:chetancrasta@gmail.com" enctype="text/plain">
Using the above code along with the rest of the form code, you can receive form submissions by email.
However, most browsers will give a security warning to the user. Also, the browser will invoke the default email application or the application associated with the mailto protocol.
Note that the enctype attribute specifies the content-type only when the value of method is post.

post vs get

Get requests have a limit of 2048 characters for Internet Explorer. The get request consists of the URL of the application and the form data.
When security of the data is important (eg. passwords) post is more secure. The data sent by get is visible in the URL and therefore can be viewed in the browser history or in bookmarks.
Since transmission is a single-step process in get, it is faster than post.
Get results can be bookmarked and get applications can be invoked from links (the <a> tag).

Friday, July 4, 2008

CSS Terms

A CSS style sheet contains rules that describe how (X)HTML elements are presented. In the above example, the XHTML element body is the selector. There can be more than one selector.
font-family is a property and "Times New Roman" is called the value.
The part of the rule that starts with the left brace and ends with right brace is called the declaration block. The declaration starts with the property, continues with the value and ends with the semi-colon.
For XHTML documents, CSS selectors must be lower-case.

Adding CSS to an XHTML document

Inline Styles: These have the highest specificity. The CSS rules are located in the value of the style attribute. Eg. style="color: blue"
Embedded Styles: These have the second highest specificity. The CSS rules are contained within the <style type="text/css"> tag.
External Stylesheets:
There are two kinds:

Linked external stylesheet: This is loaded with <link rel="stylesheet" type="text/css" href="styles.css">
Imported external stylesheet: <style type="text/css"> @import url(styles.css);

The media can be specified for imported stylesheets in this way:
@import url(style.css) screen, handheld; Imported styles have the lowest specificity.

<style> and <link>: the media attribute

Here are the possible values for the media attribute:

screen (default)
handheld
print
tv
projection
tty (text only)
aural
braille
embossed (Braille printers)
all

To choose more than one media, separate them with commas. Example: media="screen, print".
If you have separate stylesheets for different media, some browsers download all of them, regardless of the medium.

Inline Styles (CSS) - Putting CSS within (X)HTML tags

Inline Styles are contained in the style attribute of a tag. The body tag and any tag within it can contain inline styles. Each CSS rule is separated by a semi-colon.
Note: The last CSS declaration in the attribute need not end with a semicolon.
Eg:
<p style="color: rgb(135,201,68)"> ,<div style="font-size:62.5%;background-color:rgb(130,130,130)">

Ordered List Numbering Tricks

How do you start an ordered list from, say, 10? Put start="10" in the <ol> tag.
How do you change the numbering of an ordered list mid-way? Put value="number" in the <li> tag, where number is the number you want inserted.

One caveat: These attributes will cause your XHTML1-strict document to invalidate. The XHTML1-transitional DTD accepts these attributes.
The only standard-compliant way to do the above is to use an unordered list and insert the odd-ball numbers using css.

Wednesday, July 2, 2008

The Meta tag

<meta name="keywords" content="html, reference, tutorial, css" />
The above tag may be used by search engines to categorize the web page that contains it in its head. Another example:
<meta name="Author" content="Chetan Crasta" />

Links: the target attribute

This attribute specifies the name of the window a link must open in. It is also useful to specify this in the <base> tag.

Hyperlinks: rel and rev attributes

The rel attribute in a link specifies the relationship between the linked document and the linking page. Examples: next , prev , head (links to the top-level), toc , parent , child , index , glossary
Similarly, rev specifies the relationship of the target document to the source.

Forms: Tabbing with tabindex

A text input area can be activated by tabbing to it. The tabbing order can be changed by the tabindex attribute. The value of this attribute is a number greater than 0. Pressing the tab key will cycle the focus starting with the object with the tabindex of 1 to those with higher values.
example:
<input tabindex="1" type="password" size="15" maxlength="10" name="accesscode" >

Image Maps

Client-side image maps are better than server-side image maps.
To make an image a client-side map, use the attribute usemapin the img tag. Its value should be the url anchor of a <map> element. The <map> element can either be in the same page or in an external one.
The map tag contains the <area /> tags. The area tags use the coords attribute to define the area that can be clicked. The coordinates are with respect to the top left corner of the image. The clickable areas can be circles, rectangles or polygons. The clickable area is specified in the shape attribute as either circle, rectangle, or polygon. You can also use the short-forms circ, rect and poly.
For circles, coords="x, y, r" where x and y is the center and r is the radius.
For rectangles, coords="x1, y1, x2, y2" - the first coordinate is the upper-left corner and the second is the bottom-right corner.
For polygons: coords="x1,y1,x2,y2,x3,y3..." the first coordinate should not be repeated.
Finally, the href attribute specifies the link and the alt attribute the alternate text.

Tuesday, July 1, 2008

Mailto links

<a href="mailto:someone@gmail.com,noone@yahoo.com?subject=Test%20;Message&cc=anyone@gmail.com">Mail me!</a>
The above code snippet will open a blank email in the default email program with the appropriate fields filled (subject, cc etc). Make sure the ampersands and spaces are encoded (with & and %20;), or else the page won't validate.

Relative FTP URL

If the base URL or the path to a page is
http://www.somesite.com/stuff/index.html
, then the relative url
ftp:download/executable.exe
becomes
ftp://www.somesite.com/stuff/download/executable.exe

URL Encodings

URLs use the following encoding for characters that are not numbers or letters:

Character	Description	Usage	Encoding
	space		%20
;	semicolon	reserved	%3b
/	slash	reserved	%2f
?	question mark	reserved	%3f
:	colon	reserved	%3a
@	at sign	reserved	%40
=	equals sign	reserved	%3d
&	ampersand	reserved	%26
<	Less-than sign	unsafe	%3c
>	Greater-than sign	unsafe	%3e
“	double quote	unsafe	%22
#	hash symbol	unsafe	%23
%	percent	unsafe	%25
{	left curly brace	unsafe	%7b
}	right curly brace	unsafe	%7d
\|	vertical bar	unsafe	%7c
\	backslash	unsafe	%5c
^	caret	unsafe	%5e
~	tilde	unsafe	%7e
[	left square bracket	unsafe	%5b
]	right square bracket	unsafe	%5d
'	single quote	unsafe	%60

Hyperlinks and URLs

You don't need the slash at the beginning of relative urls (it is automatically added between the base url and the relative url).
The trailing slash at the end of a directory url is theoretically required, but in practice, the link also works without it.
You can have multiple email address in mailto: - just separate them with commas (no spaces).
Examples:

mailto:someone@gmail.com?subject=Great stuff!

mailto:someone@gmail.com?cc=stuff@stuffy.com

mailto:someone@gmail.com?bcc=noone@yahoo.com

The <address> element

The address element is an inline element. Unlike other inline elements, it can be a child element of the body element but cannot be a child of the p element. It can, however, be a child of the div element.

The <address> element is used only for the contact address of the author of a web page. It is not used for other addresses.

It can contain physical addresses or phone numbers or just an email address.

Example: <p>Here is my address:</p> <address>chetancrasta@gmail.com</address>