31. Do I have to memorize a bunch of tags?
No. Most programs that help you write HTML code already know most tags, and create them when you press a button. But you should understand what a tag is, and how it works. That way you can correct errors in your page more easily.
32. How do I make a form so it can be submitted by hitting ENTER?
The short answer is that the form should just have one <INPUT TYPE=TEXT> and no TEXTAREA, though it can have other form elements like checkboxes and radio buttons.
33. How do I set the focus to the first form field?
You cannot do this with HTML. However, you can include a script after the form that sets the focus to the appropriate field, like this:
<form id="myform" name="myform" action=...>
<input type="text" id="myinput" name="myinput" ...>
</form>
<script type="text/javascript">
document.myform.myinput.focus();
</script>
A similar approach uses <body onload=...> to set the focus, but some browsers seem to process the ONLOAD event before the entire document (i.e., the part with the form) has been loaded.
How can I eliminate the extra space after a </form> tag?
HTML has no mechanism to control this. However, with CSS, you can set the margin-bottom of the form to 0. For example:
<form style="margin-bottom:0;" action=...>
You can also use a CSS style sheet to affect all the forms on a page:
form { margin-bottom: 0 ; }
34. How can I use tables to structure forms?
Small forms are sometimes placed within a TD element within a table. This can be a useful for positioning a form relative to other content, but it doesn't help position the form-related elements relative to each other.
To position form-related elements relative to each other, the entire table must be within the form. You cannot start a form in one TH or TD element and end in another. You cannot place the form within the table without placing it inside a TH or TD element. You can put the table inside the form, and then use the table to position the INPUT, TEXTAREA, SELECT, and other form-related elements, as shown in the following example.
<form action="[URL]">
<table border="0">
<tr>
<th scope="row">
<label for="account">Account:</label>
</th>
<td>
<input type="text" name="account" id="account">
</td>
</tr>
<tr>
<th scope="row">
<label for="password">Password:
</th>
<td>
<input type="password" name="password" id="password">
</td>
</tr>
<tr>
<td> </td>
<td><input type="submit" name="Log On"></td>
</tr>
</table>
</form>
35. How can I show HTML examples without them being interpreted as part of my document?
Within the HTML example, first replace the "&" character with "&" everywhere it occurs. Then replace the "<" character with "<" and the ">" character with ">" in the same way.
Note that it may be appropriate to use the CODE and/or PRE elements when displaying HTML examples.
36. How do I get special characters in my HTML?
The special case of the less-than ('<'), greater-than ('>'), and ampersand ('&') characters. In general, the safest way to write HTML is in US-ASCII (ANSI X3.4, a 7-bit code), expressing characters from the upper half of the 8-bit code by using HTML entities.
Working with 8-bit characters can also be successful in many practical situations: Unix and MS-Windows (using Latin-1), and also Macs (with some reservations).
Latin-1 (ISO-8859-1) is intended for English, French, German, Spanish, Portuguese, and various other western European languages. (It is inadequate for many languages of central and eastern Europe and elsewhere, let alone for languages not written in the Roman alphabet.) On the Web, these are the only characters reliably supported. In particular, characters 128 through 159 as used in MS-Windows are not part of the ISO-8859-1 code set and will not be displayed as Windows users expect. These characters include the em dash, en dash, curly quotes, bullet, and trademark symbol; neither the actual character (the single byte) nor its ?nnn; decimal equivalent is correct in HTML. Also, ISO-8859-1 does not include the Euro currency character. (See the last paragraph of this answer for more about such characters.)
On platforms whose own character code isn't ISO-8859-1, such as MS-DOS and Mac OS, there may be problems: you have to use text transfer methods that convert between the platform's own code and ISO-8859-1 (e.g., Fetch for the Mac), or convert separately (e.g., GNU recode). Using 7-bit ASCII with entities avoids those problems, but this FAQ is too small to cover other possibilities in detail.
If you run a web server (httpd) on a platform whose own character code isn't ISO-8859-1, such as a Mac or an IBM mainframe, then it's the job of the server to convert text documents into ISO-8859-1 code when sending them to the network.
If you want to use characters not in ISO-8859-1, you must use HTML 4 or XHTML rather than HTML 3.2, choose an appropriate alternative character set (and for certain character sets, choose the encoding system too), and use one method or other of specifying this.
37. Should I put quotes around attribute values?
It is never wrong to quote attribute values, and many people recommend quoting all attribute values even when the quotation marks are technically optional. XHTML 1.0 requires all attribute values to be quoted. Like previous HTML specifications, HTML 4 allows attribute values to remain unquoted in many circumstances (e.g., when the value contains only letters and digits).
Be careful when your attribute value includes double quotes, for instance when you want ALT text like "the "King of Comedy" takes a bow" for an image. Humans can parse that to know where the quoted material ends, but browsers can't. You have to code the attribute value specially so that the first interior quote doesn't terminate the value prematurely. There are two main techniques:
* Escape any quotes inside the value with " so you don't terminate the value prematurely: ALT="the "King of Comedy" takes a bow".
* Use single quotes to enclose the attribute value: ALT='the "King of Comedy" takes a bow'.
Both these methods are correct according to the specification and are supported by current browsers, but both were poorly supported in some earlier browsers. The only truly safe advice is to rewrite the text so that the attribute value need not contain quotes, or to change the interior double quotes to single quotes, like this: ALT="the 'King of Comedy' takes a bow".
Posting Copy and Paste HTML
For those wanting to post direct Copy and Paste HTML on screen without the use of spaces or *s etc. and the need to explain those substitutions: Use < to substitute for each opening tag < in each tagged set of HTML. Example, typing the following: <a href="http://www.yourname.com"><img src="http://pics.yourname.com/aw/pics/mask.gif"></a> Will show up on screen as: <a href="http://www.yourname.com"><img src="http://pics.yourname.com/aw/pics/mask.gif"></a>
HTML for Lists
1. Bulleted Lists: <ul> begins a bulleted, indented list. Each item in the list is then prefaced with the <li> tag. It is not necessary to insert a break at the end of each line -- the <li> tag automatically creates a new line.
* with <li type=disc>
* with <li type=square>
* with <li type=circle>
2. Numbered Lists: <ol> begins a numbered, indented list. Each item in the list is then prefaced with the <li> tag. You need to close the list with the </ol> tag. Note: You can expand the <ol> to specify the TYPE of numbering:
<ol> 1 (decimal numbers: 1, 2, 3, 4, 5, ...)
<ol type="a"> a (lowercase alphabetic: a, b, c, d, e, ...)
<ol type="A"> A (uppercase alphabetic: A, B, C, D, E, ...)
<ol type="i"> i (lowercase Roman numerals: i, ii, iii, iv, v, ...)
<ol type="I"> I (uppercase Roman numerals: I, II, III, IV, V, ...)
38. Are there any problems with using tables for layout?
On current browsers, the entire table must be downloaded and the dimensions of everything in the table must to be known before the table can be rendered. That can delay the rendering of your content, especially if your table contains images without HEIGHT or WIDTH attributes.
If any of your table's content is too wide for the available display area, then the table stretches to accomodate the oversized content. The rest of the content then adjusts to fit the oversized table rather than fitting the available display area. This can force your readers to scroll horizontally to read your content, or can cause printed versions to be cropped.
For readers whose displays are narrower than the author anticipated, fixed-width tables cause the same problems as other oversized tables. For readers whose displays are wider than the author anticipated, fixed-width tables cause extremely wide margins, wasting much of the display area. For readers who need larger fonts, fixed-width tables can cause the content to be displayed in short choppy lines of only a few words each.
Many browsers are especially sensitive to invalid syntax when tables are involved. Correct syntax is especially critical. Even with correct syntax, nested tables may not display correctly in older versions of Netscape Navigator.
Some browsers ignore tables, or can be configured to ignore tables. These browsers will ignore any layout you've created with tables. Also, search engines ignore tables. Some search engines use the text at the beginning of a document to summarize it when it appears in search results, and some index only the first n bytes of a document. When tables are used for layout, the beginning of a document often contains many navigation links that appear before than actual content.
Many versions of Navigator have problems linking to named anchors when they are inside a table that uses the ALIGN attribute. These browsers seem to associate the named anchor with the top of the table, rather than with the content of the anchor. You can avoid this problem by not using the ALIGN attribute on your tables.
If you use tables for layout, you can still minimize the related problems with careful markup. Avoid placing wide images, PRE elements with long lines, long URLs, or other wide content inside tables. Rather than a single full-page layout table, use several independent tables. For example, you could use a table to lay out a navigation bar at the top/bottom of the page, and leave the main content completely outside any layout tables.
How do I eliminate the blue border around linked images?
39. In your HTML, you can specify the BORDER attribute for the image:
<a href=...><img src=... alt=... border="0"></a>
However, note that removing the border that indicates an image is a link makes it harder for users to distinguish quickly and easily which images on a web page are clickable.
40. How do I eliminate the space around/between my images?
If your images are inside a table, be sure to set the BORDER, CELLSPACING, and CELLPADDING attributes to 0.
Extra space between images is often created by whitespace around the <IMG> tag in the markup. It is safe to use newlines inside a tag (between attributes), but not between two tags. For example, replace this:
<td ...>
<img src=... alt=...>
<img src=... alt=...>
</td>
with this:
<td ...><img src=... alt=...><img src=... alt=...></td>
According to the latest specifications, the two should be equivalent. However, common browsers do not comply with the specifications in this situation.
Finally, extra space between images can appear in documents that trigger the "standards" rendering mode of Gecko-based browsers like Mozilla and Firefox.
More Questions & Answers :-
Part1 Part2 Part3 Part4 Part5
No. Most programs that help you write HTML code already know most tags, and create them when you press a button. But you should understand what a tag is, and how it works. That way you can correct errors in your page more easily.
32. How do I make a form so it can be submitted by hitting ENTER?
The short answer is that the form should just have one <INPUT TYPE=TEXT> and no TEXTAREA, though it can have other form elements like checkboxes and radio buttons.
33. How do I set the focus to the first form field?
You cannot do this with HTML. However, you can include a script after the form that sets the focus to the appropriate field, like this:
<form id="myform" name="myform" action=...>
<input type="text" id="myinput" name="myinput" ...>
</form>
<script type="text/javascript">
document.myform.myinput.focus();
</script>
A similar approach uses <body onload=...> to set the focus, but some browsers seem to process the ONLOAD event before the entire document (i.e., the part with the form) has been loaded.
How can I eliminate the extra space after a </form> tag?
HTML has no mechanism to control this. However, with CSS, you can set the margin-bottom of the form to 0. For example:
<form style="margin-bottom:0;" action=...>
You can also use a CSS style sheet to affect all the forms on a page:
form { margin-bottom: 0 ; }
34. How can I use tables to structure forms?
Small forms are sometimes placed within a TD element within a table. This can be a useful for positioning a form relative to other content, but it doesn't help position the form-related elements relative to each other.
To position form-related elements relative to each other, the entire table must be within the form. You cannot start a form in one TH or TD element and end in another. You cannot place the form within the table without placing it inside a TH or TD element. You can put the table inside the form, and then use the table to position the INPUT, TEXTAREA, SELECT, and other form-related elements, as shown in the following example.
<form action="[URL]">
<table border="0">
<tr>
<th scope="row">
<label for="account">Account:</label>
</th>
<td>
<input type="text" name="account" id="account">
</td>
</tr>
<tr>
<th scope="row">
<label for="password">Password:
</th>
<td>
<input type="password" name="password" id="password">
</td>
</tr>
<tr>
<td> </td>
<td><input type="submit" name="Log On"></td>
</tr>
</table>
</form>
35. How can I show HTML examples without them being interpreted as part of my document?
Within the HTML example, first replace the "&" character with "&" everywhere it occurs. Then replace the "<" character with "<" and the ">" character with ">" in the same way.
Note that it may be appropriate to use the CODE and/or PRE elements when displaying HTML examples.
36. How do I get special characters in my HTML?
The special case of the less-than ('<'), greater-than ('>'), and ampersand ('&') characters. In general, the safest way to write HTML is in US-ASCII (ANSI X3.4, a 7-bit code), expressing characters from the upper half of the 8-bit code by using HTML entities.
Working with 8-bit characters can also be successful in many practical situations: Unix and MS-Windows (using Latin-1), and also Macs (with some reservations).
Latin-1 (ISO-8859-1) is intended for English, French, German, Spanish, Portuguese, and various other western European languages. (It is inadequate for many languages of central and eastern Europe and elsewhere, let alone for languages not written in the Roman alphabet.) On the Web, these are the only characters reliably supported. In particular, characters 128 through 159 as used in MS-Windows are not part of the ISO-8859-1 code set and will not be displayed as Windows users expect. These characters include the em dash, en dash, curly quotes, bullet, and trademark symbol; neither the actual character (the single byte) nor its ?nnn; decimal equivalent is correct in HTML. Also, ISO-8859-1 does not include the Euro currency character. (See the last paragraph of this answer for more about such characters.)
On platforms whose own character code isn't ISO-8859-1, such as MS-DOS and Mac OS, there may be problems: you have to use text transfer methods that convert between the platform's own code and ISO-8859-1 (e.g., Fetch for the Mac), or convert separately (e.g., GNU recode). Using 7-bit ASCII with entities avoids those problems, but this FAQ is too small to cover other possibilities in detail.
If you run a web server (httpd) on a platform whose own character code isn't ISO-8859-1, such as a Mac or an IBM mainframe, then it's the job of the server to convert text documents into ISO-8859-1 code when sending them to the network.
If you want to use characters not in ISO-8859-1, you must use HTML 4 or XHTML rather than HTML 3.2, choose an appropriate alternative character set (and for certain character sets, choose the encoding system too), and use one method or other of specifying this.
37. Should I put quotes around attribute values?
It is never wrong to quote attribute values, and many people recommend quoting all attribute values even when the quotation marks are technically optional. XHTML 1.0 requires all attribute values to be quoted. Like previous HTML specifications, HTML 4 allows attribute values to remain unquoted in many circumstances (e.g., when the value contains only letters and digits).
Be careful when your attribute value includes double quotes, for instance when you want ALT text like "the "King of Comedy" takes a bow" for an image. Humans can parse that to know where the quoted material ends, but browsers can't. You have to code the attribute value specially so that the first interior quote doesn't terminate the value prematurely. There are two main techniques:
* Escape any quotes inside the value with " so you don't terminate the value prematurely: ALT="the "King of Comedy" takes a bow".
* Use single quotes to enclose the attribute value: ALT='the "King of Comedy" takes a bow'.
Both these methods are correct according to the specification and are supported by current browsers, but both were poorly supported in some earlier browsers. The only truly safe advice is to rewrite the text so that the attribute value need not contain quotes, or to change the interior double quotes to single quotes, like this: ALT="the 'King of Comedy' takes a bow".
Posting Copy and Paste HTML
For those wanting to post direct Copy and Paste HTML on screen without the use of spaces or *s etc. and the need to explain those substitutions: Use < to substitute for each opening tag < in each tagged set of HTML. Example, typing the following: <a href="http://www.yourname.com"><img src="http://pics.yourname.com/aw/pics/mask.gif"></a> Will show up on screen as: <a href="http://www.yourname.com"><img src="http://pics.yourname.com/aw/pics/mask.gif"></a>
HTML for Lists
1. Bulleted Lists: <ul> begins a bulleted, indented list. Each item in the list is then prefaced with the <li> tag. It is not necessary to insert a break at the end of each line -- the <li> tag automatically creates a new line.
* with <li type=disc>
* with <li type=square>
* with <li type=circle>
2. Numbered Lists: <ol> begins a numbered, indented list. Each item in the list is then prefaced with the <li> tag. You need to close the list with the </ol> tag. Note: You can expand the <ol> to specify the TYPE of numbering:
<ol> 1 (decimal numbers: 1, 2, 3, 4, 5, ...)
<ol type="a"> a (lowercase alphabetic: a, b, c, d, e, ...)
<ol type="A"> A (uppercase alphabetic: A, B, C, D, E, ...)
<ol type="i"> i (lowercase Roman numerals: i, ii, iii, iv, v, ...)
<ol type="I"> I (uppercase Roman numerals: I, II, III, IV, V, ...)
38. Are there any problems with using tables for layout?
On current browsers, the entire table must be downloaded and the dimensions of everything in the table must to be known before the table can be rendered. That can delay the rendering of your content, especially if your table contains images without HEIGHT or WIDTH attributes.
If any of your table's content is too wide for the available display area, then the table stretches to accomodate the oversized content. The rest of the content then adjusts to fit the oversized table rather than fitting the available display area. This can force your readers to scroll horizontally to read your content, or can cause printed versions to be cropped.
For readers whose displays are narrower than the author anticipated, fixed-width tables cause the same problems as other oversized tables. For readers whose displays are wider than the author anticipated, fixed-width tables cause extremely wide margins, wasting much of the display area. For readers who need larger fonts, fixed-width tables can cause the content to be displayed in short choppy lines of only a few words each.
Many browsers are especially sensitive to invalid syntax when tables are involved. Correct syntax is especially critical. Even with correct syntax, nested tables may not display correctly in older versions of Netscape Navigator.
Some browsers ignore tables, or can be configured to ignore tables. These browsers will ignore any layout you've created with tables. Also, search engines ignore tables. Some search engines use the text at the beginning of a document to summarize it when it appears in search results, and some index only the first n bytes of a document. When tables are used for layout, the beginning of a document often contains many navigation links that appear before than actual content.
Many versions of Navigator have problems linking to named anchors when they are inside a table that uses the ALIGN attribute. These browsers seem to associate the named anchor with the top of the table, rather than with the content of the anchor. You can avoid this problem by not using the ALIGN attribute on your tables.
If you use tables for layout, you can still minimize the related problems with careful markup. Avoid placing wide images, PRE elements with long lines, long URLs, or other wide content inside tables. Rather than a single full-page layout table, use several independent tables. For example, you could use a table to lay out a navigation bar at the top/bottom of the page, and leave the main content completely outside any layout tables.
How do I eliminate the blue border around linked images?
39. In your HTML, you can specify the BORDER attribute for the image:
<a href=...><img src=... alt=... border="0"></a>
However, note that removing the border that indicates an image is a link makes it harder for users to distinguish quickly and easily which images on a web page are clickable.
40. How do I eliminate the space around/between my images?
If your images are inside a table, be sure to set the BORDER, CELLSPACING, and CELLPADDING attributes to 0.
Extra space between images is often created by whitespace around the <IMG> tag in the markup. It is safe to use newlines inside a tag (between attributes), but not between two tags. For example, replace this:
<td ...>
<img src=... alt=...>
<img src=... alt=...>
</td>
with this:
<td ...><img src=... alt=...><img src=... alt=...></td>
According to the latest specifications, the two should be equivalent. However, common browsers do not comply with the specifications in this situation.
Finally, extra space between images can appear in documents that trigger the "standards" rendering mode of Gecko-based browsers like Mozilla and Firefox.
More Questions & Answers :-
Part1 Part2 Part3 Part4 Part5
No comments:
Post a Comment