HTML (Hypertext Markup Language) is the language used to create web documents.It defines the syntax and placement of special instructions (tags) that aren’t displayed, but tell the browser how to display the document’s contents. It is also used to create links to other documents, either locally or over a network such as the Internet. The HTML standard and all other Web-related standards are developed under the authority of the World Wide Web Consortium (W3C). Standards, specifications, and drafts of new proposals can be found at http://www.w3.org/. The most recent work is the HTML 5.0 Specification, which is growing in support by major browsers.
In practice, the HTML “standard” is influenced heavily by the tags that are introduced
and supported by the popular browsers, i.e., Microsoft Internet Explorer and Netscape Navigator. These tags may or may not be part of the current HTML specification at any given time.This chapter provides a basic introduction to the background and general syntax of HTML, including document structure, tags, and their attributes. It also looks briefly at good HTML style and the pros and cons of using WYSIWYG authoring
tools.
HTML Editing Tools
HTML documents are simple ASCII text files, which means you can use any minimal text editor to write them. Fortunately, there are editing tools designed especially for writing HTML. These save time by providing shortcuts for repetitive tasks like setting up documents, tables, or simply applying styles to text. HTML
editors are not the same as WYSIWYG authoring tools (discussed next)—you need to know how to compose HTML by hand; editors just make the process faster and easier. There are scores of simple HTML editors available, and many of them are free.
Windows users should definitely check out HomeSite, a high-powered and inexpensive HTML editor from Allaire Corporation. It, too, has HTML shortcuts and templates, color-coded HTML syntax, an FTP function, spell-checker, HTML syntax checker, and multi-file search-and-replace. In addition, it includes wizards for creating more complex elements (such as frames, JavaScript, and DHTML) and
many other attractive features. If you’re working on a Macintosh, you want BBEdit, a commercial HTML editorfrom Bare Bones Software, Inc. It is overwhelmingly the editor of choice among Mac-based web developers. It includes features such as an array of HTML shortcut tools, color-coded HTML syntax, multiple-file search and replace, a built-in FTP function, support for 13 programming languages, a table builder, an HTML syntax checker, and a lot more. .
HTML Tags
Every HTML tag is made up of a tag name, sometimes followed by an optional list of attributes, all of which appears between angle brackets < >. Nothing within the brackets will be displayed in the browser. The tag name is generally an abbreviation of the tag’s function (this makes them fairly simple to learn). Attributes are properties that extend or refine the tag’s function. The name and attributes within a tag are not case sensitive. <BODY BGCOLOR=white> will work the same as <body bgcolor=white>. However,values for particular attributes may be case sensitive, particularly URLs and filenames. Containers Most HTML tags are containers, meaning they have a beginning (also called “opener” or “start”) tag and an end tag. The text enclosed within the tags will follow the tag’s instructions, as in the following example: The weather is <I>gorgeous</I> today. Result: The weather is gorgeous today. An end tag contains the same name as the start tag, but it is preceded by a slash (/). You can think of it as an “off” switch for the tag. End tags never contain attributes. For some tags, the end tag is optional and the browser determines when the tag
ends by context. This practice is most common with the <p> (paragraph) tag. Browsers have supported the <p> tag without its end tag, so many web authors take advantage of the shortcut. Not all tags allow this, however, and not all browsers are forgiving, so when in doubt include the end tag. This is especially
important when using Cascading Style Sheets with your document. In the HTML charts that appear in this book, container tags are indicated with the syntax < >...</>. If the end tag is optional, it will be so noted in the tag’s explanation.
Standalone Tags
A few tags do not have end tags because they are used to place standalone elements on the page. The image tag (<img>) is such a tag and it simply plops a graphic into the flow of the page. Other standalone tags include the linebreak (<br>), horizontal rule (<hr>), and tags that provide information about a document and don’t affect its displayed content, such as the <meta> and <base> tags. Attributes Attributes are added within a tag to extend or modify the tag’s actions. You can add multiple attributes within a single tag. Tag attributes, if any, belong after the tag name, each separated by one or more spaces. Their order of appearance is not important.Most attributes take values, which follow an equal sign (=) after the attribute’s
name. Values are limited to 1024 characters in length and may be case sensitive. Sometimes the value needs to appear in quotation marks (double or single). Here’s how to determine if you need quotation marks around a value:
For example, URLs require quotation marks because they contain the characters “://”. Likewise, quotation marks are required around color specifications that take the syntax “#rrggbb”. Be careful not to leave out the closing quotation mark, or all the content from the opening quotation mark until the browser encounters
a subsequent quotation mark will be interpreted as part of the value, and won’t display in the browser. This is a simple mistake that can cause hours of debugging frustration.
If you are still unsure, using quotation marks consistently for all values will work just fine and is probably a good idea anyway. The following are examples of tags that contain attributes:
<IMG SRC="graphics/pixie.gif" ALIGN=right WIDTH=45 HEIGHT=60>
<BODY BGCOLOR="#000000">
<FONT FACE="Trebuchet MS, Arial, Helvetica" SIZE=4>
Nesting HTML Tags
HTML tags can be applied to content containing other HTML tags for multiple tag effects on a single element. This is called nesting, and to do it properly, both the beginning and end tags of the enclosed tag must be completely contained within the beginning and end tags of the applied tag, as follows:
The weather is <B><I>gorgeous</I></B> today.
Result: The weather is gorgeous today.
This links to <A HREF="document.html">a really <B>cool</B>
page</A>.
Result: This links to a really cool page.
A common mistake is simply overlapping the tags. Although some browsers display content marked up this way, other browsers will not allow the violation, so it is important to nest tags correctly. The following example shows incorrect nesting of tags (note that the <B> tag is closed before the <I>):
The weather is <B><I>gorgeous</B></I> today. Information Browsers Ignore Some information in an HTML document, including certain tags, will be ignored when the document is viewed in a browser. These include:
Line breaks
Line returns in the HTML document are ignored. Text and elements will wrap continuously until they encounter a <p> or <br> tag within the flow of the document text. Line breaks are displayed, however, when text is tagged as preformatted text (<pre>).
Tabs and multiple spaces
When a browser encounters a tab or more than one consecutive blank characterspace in an HTML document, it will display it as a single space. So, if the document contains: far, far away the browser will display:
far, far away
Extra spaces can be added within the flow of text by using the nonbreaking space character entity ( ). Multiple spaces will be displayed, however, when text is tagged as preformatted text (<pre>). Multiple <p> tags A series of <p> (paragraph) tags with no intervening text is interpreted as redundant by all browsers and will display as though it were only a single <p> tag. Most browsers will display multiple <br> tags as multiple line breaks.
Unrecognized tags
A browser simply ignores any tag it doesn’t understand or that was incorrectly specified. Depending on the tag and the browser, this can have varied results. Either the browser will display nothing at all, or it may display the contents of the tag as though it were normal text. Text in comments Browsers will not display text between the special <!–– and – –> elements used to denote a comment. Here is a sample comment:
<!–– This is a comment ––>
<!–– This is a
multiple line comment
that ends here. ––>
There must be a space after the initial <!–– and preceding the final – –>, but you can put nearly anything inside the comment otherwise. You cannot nest comments. Microsoft Internet Explorer has its own proprietary way of indicating comments with <comment> ... </comment> tags. This markup is not supported by any other browser.
HTML Tags
Every HTML tag is made up of a tag name, sometimes followed by an optional list of attributes, all of which appears between angle brackets < >. Nothing within the brackets will be displayed in the browser. The tag name is generally an abbreviation of the tag’s function (this makes them fairly simple to learn). Attributes are properties that extend or refine the tag’s function. The name and attributes within a tag are not case sensitive. <BODY BGCOLOR=white> will work the same as <body bgcolor=white>. However,values for particular attributes may be case sensitive, particularly URLs and filenames. Containers Most HTML tags are containers, meaning they have a beginning (also called “opener” or “start”) tag and an end tag. The text enclosed within the tags will follow the tag’s instructions, as in the following example: The weather is <I>gorgeous</I> today. Result: The weather is gorgeous today. An end tag contains the same name as the start tag, but it is preceded by a slash (/). You can think of it as an “off” switch for the tag. End tags never contain attributes. For some tags, the end tag is optional and the browser determines when the tag
ends by context. This practice is most common with the <p> (paragraph) tag. Browsers have supported the <p> tag without its end tag, so many web authors take advantage of the shortcut. Not all tags allow this, however, and not all browsers are forgiving, so when in doubt include the end tag. This is especially
important when using Cascading Style Sheets with your document. In the HTML charts that appear in this book, container tags are indicated with the syntax < >...</>. If the end tag is optional, it will be so noted in the tag’s explanation.
Standalone Tags
A few tags do not have end tags because they are used to place standalone elements on the page. The image tag (<img>) is such a tag and it simply plops a graphic into the flow of the page. Other standalone tags include the linebreak (<br>), horizontal rule (<hr>), and tags that provide information about a document and don’t affect its displayed content, such as the <meta> and <base> tags. Attributes Attributes are added within a tag to extend or modify the tag’s actions. You can add multiple attributes within a single tag. Tag attributes, if any, belong after the tag name, each separated by one or more spaces. Their order of appearance is not important.Most attributes take values, which follow an equal sign (=) after the attribute’s
name. Values are limited to 1024 characters in length and may be case sensitive. Sometimes the value needs to appear in quotation marks (double or single). Here’s how to determine if you need quotation marks around a value:
• If the value is a single word or number, and contains only letters (a-z), numbers (0-9), or the special characters period (.) or hyphen (-), then it is OK to place it directly after the equal sign without quotation marks.
• If the value contains several words separated by commas or spaces, or if it contains any special characters besides a period or hyphen, then it needs to be contained within quotation marks. For example, URLs require quotation marks because they contain the characters “://”. Likewise, quotation marks are required around color specifications that take the syntax “#rrggbb”. Be careful not to leave out the closing quotation mark, or all the content from the opening quotation mark until the browser encounters
a subsequent quotation mark will be interpreted as part of the value, and won’t display in the browser. This is a simple mistake that can cause hours of debugging frustration.
If you are still unsure, using quotation marks consistently for all values will work just fine and is probably a good idea anyway. The following are examples of tags that contain attributes:
<IMG SRC="graphics/pixie.gif" ALIGN=right WIDTH=45 HEIGHT=60>
<BODY BGCOLOR="#000000">
<FONT FACE="Trebuchet MS, Arial, Helvetica" SIZE=4>
Nesting HTML Tags
HTML tags can be applied to content containing other HTML tags for multiple tag effects on a single element. This is called nesting, and to do it properly, both the beginning and end tags of the enclosed tag must be completely contained within the beginning and end tags of the applied tag, as follows:
The weather is <B><I>gorgeous</I></B> today.
Result: The weather is gorgeous today.
This links to <A HREF="document.html">a really <B>cool</B>
page</A>.
Result: This links to a really cool page.
A common mistake is simply overlapping the tags. Although some browsers display content marked up this way, other browsers will not allow the violation, so it is important to nest tags correctly. The following example shows incorrect nesting of tags (note that the <B> tag is closed before the <I>):
The weather is <B><I>gorgeous</B></I> today. Information Browsers Ignore Some information in an HTML document, including certain tags, will be ignored when the document is viewed in a browser. These include:
Line breaks
Line returns in the HTML document are ignored. Text and elements will wrap continuously until they encounter a <p> or <br> tag within the flow of the document text. Line breaks are displayed, however, when text is tagged as preformatted text (<pre>).
Tabs and multiple spaces
When a browser encounters a tab or more than one consecutive blank characterspace in an HTML document, it will display it as a single space. So, if the document contains: far, far away the browser will display:
far, far away
Extra spaces can be added within the flow of text by using the nonbreaking space character entity ( ). Multiple spaces will be displayed, however, when text is tagged as preformatted text (<pre>). Multiple <p> tags A series of <p> (paragraph) tags with no intervening text is interpreted as redundant by all browsers and will display as though it were only a single <p> tag. Most browsers will display multiple <br> tags as multiple line breaks.
Unrecognized tags
A browser simply ignores any tag it doesn’t understand or that was incorrectly specified. Depending on the tag and the browser, this can have varied results. Either the browser will display nothing at all, or it may display the contents of the tag as though it were normal text. Text in comments Browsers will not display text between the special <!–– and – –> elements used to denote a comment. Here is a sample comment:
<!–– This is a comment ––>
<!–– This is a
multiple line comment
that ends here. ––>
There must be a space after the initial <!–– and preceding the final – –>, but you can put nearly anything inside the comment otherwise. You cannot nest comments. Microsoft Internet Explorer has its own proprietary way of indicating comments with <comment> ... </comment> tags. This markup is not supported by any other browser.
Nice ....Thanks
ReplyDelete