Section A.1. HTML Tags
As you already know, the essential idea behind the HTML standard is tags specialized codes in angle brackets that tell the browser how to format text, when to insert images, and how to link different documents together. Throughout this book, you've examined just about every important HTML tag that's in use today. Now you're ready for a quick reference that can refresh your memory and help you find the information you need elsewhere in this book.
Note: You won't see every HTML tag in this chapter. Some are old, obscure, and rarely used, while others are redundant or have been superseded by the CSS (Cascading Style Sheet) standard. For the full HTML standard, check out www.w3.org/MarkUp, or try www.htmlhelp.com/reference/html40 for a reference that's easier to digest.
A.1.1. <a> (Anchor Tag)
The anchor tag has two roles. The most common use of the <a> tag is to create a link that, when clicked, takes a visitor from one page to another. To insert this type of link, you supply the destination URL using the href attribute, and put the clickable link text between the opening and closing tags.
<a href="LinkedPage.htm">Click Me</a>
The href can be relative (which means it points to a page in your own Web site) or absolute (which means it includes a full URL starting with "http://"). For a review of the differences and when to use each type, see Section 8.1.1 (Chapter 8).
Creating clickable image links is just as easy as creating clickable text links. The trick is to put an <img> tag inside an <a> tag, like this:
<a href="LinkedPage.htm"><img src="MyPic.gif"></a>
Finally, you can create a link that doesn't transfer the visitor to a new page, but instead pops up an email message with the address information filled in. You do this by creating a mail-to link, as shown here:
<a href="mailto:me@myplace.com">Email Me</a>
For more information about the ins and outs of the mail-to link, see Section 12.2 (Chapter 12).
Anchors can also take a target attribute, which instructs the browser to open the destination page in a specific frame, or in a new browser window (as shown here).
<a href="LinkedPage.htm" target="_blank">Click Me</a>
You can learn about this technique on Section 10.2.3 (Chapter 10).
The anchor tag also lets you create a bookmark in a specific spot on a page. Once you've created a bookmark, you can create a link that heads straight to your bookmark.
To create a bookmark, you use the <a> anchor tag, but with a difference. You don't supply the href attribute, because the anchor doesn't lead anywhere . You also don't put any text inside the anchor, because it's not clickable. Instead, all you supply is a name attribute that gives your bookmark a descriptive name. Here's an example:
<a name="Canaries">Pet Canaries</a>
Once you've created a bookmark, you can write a URL that points to that bookmark. The trick is that you need to add the bookmark information to the end of the URL. To do this, you add the number sign symbol (#) followed by the bookmark name, as shown here:
Learn about recent developments in <a href= "sales.htm#Canaries" >canary sales</a>.
You can learn more about bookmarks and ordinary links in Chapter 8.
A.1.2. <acronym>
The acronym tag lets you give the full version of an abbreviation. For example, wouldn't your visitors like to know that the hipster slang AFAIK stands for "as far as I know"? You can provide this information like this:
<acronym title="As Far As I Know">AFAIK</acronym>
On your Web page, the information in the title attribute doesn't appear right away. But it's available for automated programs that scan Web pages, and more interestingly, many Web browsers (including Internet Explorer) show the full title text in a pop-up text box if you hover over the acronym.
If you use the <acronym> tag, consider applying some style sheet formatting to make sure your acronym appears differently from the rest of the body text (perhaps with a different background color ). That way, the visitor will know there's some extra information waiting to be uncovered with a mouseover.
A.1.3. <address>
An occasionally used tag that identifies contact information (like a Web or postal address). Here's an example:
<address>If you have any questions about the content of this site, phone our offices at 555-5555. </address>
Most browsers format addresses in italics, just as though you used the <i> tag. The only value in using the <address> tag is the fact that it lets automated programs that scan Web pages extract some useful address information.
A.1.4. <area> (Image Map)
Defines a clickable region (known as a hotspot ) inside an image map (generated with the <map> tag; see Section A.1.33). When defining an area, you need to supply the target URL (using the href attribute), the type of shape (using the shape attribute), and the coordinates (using the coords attribute). The shape can be a circle, square, or polygon.
For a circle, the coordinates are in this order: center point (x-coordinate), center point (y-coordinate), radius. For any other shape, you supply the corners in order as a series of x-y coordinates, like this: x1, y1, x2, y2, and so on. Here's an example that creates a square-shaped hotspot:
<area href="page1.htm" shape="square" coords="5,5,95,195">
The square is invisible. If you click anywhere inside this square, you'll be transported to page1.htm . For more information, see the <map> tag on Section A.1.33. For a full-fledged image map example, see Section 8.2 in Chapter 8.
A.1.5. <b> (Bold Text)
Displays text in bold. HTML gurus suggest using <strong> instead of <b>, because it more clearly indicates the relative importance of your text, rather than giving a strictly typographic instruction about how to format it. However, the <b> tag is much more common.
Here is some <b>bold</b> text.
You can get much more control over every aspect of formatting using style sheet rules.
A.1.6. <base> (Base URL)
Defines a document's base URL , which is a Web address that's used to interpret all relative paths. You must place the <base> tag in the <head> section of a page, and you can use two attributes href (which supplies the base URL) and target (which supplies a target frame for links).
For example, if you have a link that points to a file named MySuperSunday.htm and the base URL is http://www.SundaysForever.com/Current , the browser interprets the link as http://www.SundaysForever.com/Current/MySuperSunday.htm . The base URL is rarely used in this way, because it almost always makes more sense for the base URL to be drawn from the current page. In other words, if you're looking at http://www.SundaysForever.com/Current/Intro.htm , the browser already knows that the base URL is http://www.SundaysForever.com/Current . For more information about the difference between absolute and relative links, see Section 8.1.1 (Chapter 8).
There is one useful purpose for the base URL tagyou can use it to set the target frame that will be used for all the links on the page (unless otherwise indicated). Here's an example:
<base target="Main">
You can learn much more about frames in Chapter 10.
A.1.7. <big> (Large Text)
Steps the text size up a notch to create larger text. The <big> tag is out of vogue , and you're better off using style sheets to control the formatting of your text.
A.1.8. <blockquote> (Block Quotation)
Used to identify a long quotation (which stands on its own, separate from other paragraphs) as a block element . As with all other block elements, the browser adds a line break and some space before the beginning and after the end of a <blockquote>:
<blockquote>It was the best of times, it was the worst of times.</blockquote>
Usually, the <blockquote> element is rendered as italic text and indented on the left and right side. However, it makes more sense to use the <blockquote> element to denote the meaning of your text (for example, that it's a passage quoted from a book), in conjunction with style sheet rules that apply the specific formatting you want.
If you want a shorter quotation that you can place inside another block element (like a paragraph), use the <q> element instead.
A.1.9. <body> (Document Body)
The body tag is a basic part of the structure of any HTML document. It occurs immediately after the <head> section ends, and it contains the complete content of your Web page, including all its text, images, tables, and links.
A.1.10. <br> (Line Break)
The break tag is an inline element that splits two lines using a single hard return. No extra spacing is added in between the two lines. For example, you can use <br> to split address information in a paragraph:
<p>Johny The Fever<br> 200 Easy Street<br> Akimbo, Madagascar</p>
A.1.11. <button> (Button)
Lets you create a clickable button in a form, with any content inside (for example, you can place a phrase or an image between the start tag and the end tag). As with any other form control, you need to supply a unique name and a value that will be submitted when the surfer clicks the button. You place the button text between the opening and closing tags:
<button name="submit" value="order">Place Order</button>
The <button> tag is more powerful than the <input> tag for creating buttons , because it puts whatever content you want on the face of a button, including images.
<button name="submit" value="order"><img src="Order.gif" alt="Place Order"> </button>
A.1.12. <caption> (Table Caption)
Defines a text title for a table. If used, this must be the first element in a <table> tag:
<table> <caption>Least Popular Vacation Destinations</caption> </table>
No automatic formatting is applied to the captionit's just placed at the top of the table as ordinary text (and wrapped to fit the width of the table). However, you can apply whatever formatting you want through style sheet rules.
A.1.13. <cite> (Citation)
Used to identify a citation , which is a reference to a book, print article, or other published resource.
<p>Charles Dickens wrote <cite>A Tale of Two Cities</cite>.</p>
Usually, the <cite> element is rendered as italic text. However, it makes more sense to use the <cite> element to denote the meaning of your text, in conjunction with style sheet rules that apply the specific formatting you want.
A.1.14. <dd> (Dictionary Description)
Used to identify the description in a dictionary list. For more information, see the very simple example under the <dl> tag description, below, or refer to Section 5.3.3 (Chapter 5).
A.1.15. <del> (Deleted Text)
A rarely used tag that identifies text that was present but has now been removed. Browsers that support this tag display crossed-out text to represent deleted material. Another tag sometimes used to indicate a revision trail is <ins>.
A.1.16. <dfn> (Defined Term )
A rarely used tag that indicates the defining instance of a term. For example, the first time you learn about a new term in this book, like froopy , it's italicized. That's because it's considered the defining instance, and a definition usually follows . Browsers render the <dfn> tag in italics.
A.1.17. <div> (Generic Block Container)
The division tag is used to group together one or more block elements. For example, you could group together several paragraphs, a paragraph and heading, and so on. Here's an example:
<div> <p></p> <p></p> </div>
On its own, the <div> tag doesn't do anything. However, it's a powerful way to apply style sheet formatting. In the example above, any formatting you apply to the <div> tag is automatically applied to the two nested paragraphs.
To learn more about how to use the <div> tag to apply style rules, see Section 6.6.1 in Chapter 6. You should also refer to the <span> tag (Section 5.2.7), which applies formatting inside a block element.
A.1.18. <dl> (Dictionary List)
Defines a definition list (also known as a dictionary list), which is a series of terms, each one followed by a definition in an indented block of text that appears immediately below it. In theory, you could put any type of content in a dictionary list, but it's recommended that you follow its intended use and include a list of points and explanations . Here's an example:
<dl> <dt>tasseomancy</dt> <dd>Divination by reading tea leaves.</dd> <dt>tyromancy</dt> <dd>Divination by studying how cheese curds form during cheese making.</dd> </dl>
A.1.19. <dt> (Dictionary Term)
Used to identify the term in a dictionary list. For more information, see the very simple example under the <dl> tag description, above, or refer to Section 5.3.3 (Chapter 5).
A.1.20. <em> (Emphasis)
Has the same effect as the <i> tag, but is preferred by some HTML experts because it indicates the relative importance of your text, not just the way it should be formatted. After all, you might use style sheet rules to change the formatting of this tag so that it's emphasized in some other way, and doesn't necessarily use italic formatting.
A.1.21. <form> (Interactive Form)
The form tag creates an interactive form, where you can place graphical widgets like text boxes, checkboxes, selectable lists, and so on (represented by the <input>, <textarea>, <button>, and <select> tags). By placing these widgets in a <form> tag, you can create pages that are able to collect the information the surfer enters with these controls, and submit this information to a Web application. Web applications are outside the scope of this book, but you can learn how to create a basic form that emails you the relevant information in Chapter 12.
A.1.22. <frame> (Frame)
Defines a frame a rectangular subset of the browser windowinside a <frameset>. Each frame can show a different Web page. When defining a frame, you can supply a frame name with the name attribute (which you use to identify the frame in your links) and the page that should be shown in the frame with the src attribute.
<frame name="Menu" src="menu.htm">
You can also create a fixed, non-resizable frame by adding the noresize attribute to the frame tag, and you can prevent scrolling the frame by adding scrolling="no" .
For much more information about frames and how to use them, refer to Chapter 10.
A.1.23. <frameset> (Frameset)
Defines a frameset pagea page that contains one or more frames. Each frame is a rectangular region in the browser window that can show a different Web page. The <frameset> tag also sets the size of each frame (using absolute pixel sizes or percentages of the current browser window). If you're splitting the page horizontally, you use the rows attribute. If you're splitting the page vertically, you use the cols attribute.
Here's an example with two frames split vertically. The first frame is 100 pixels, and the second frame occupies the remaining space.
<frameset cols="100,*"> <frame name="Menu" src="menu.htm"> <frame name="Main" src="welcome.htm"> </frameset>
You can also control the size of the border that's shown between frames by adding the border attribute and setting it to a pixel size (use 0 for no border at all).
<frameset cols="100,*" border="0"> </frameset>
For much more information about frames and how to use them, refer to Chapter 10.
A.1.24. <h1>, <h2>, <h3>, <h4>, <h5>, <h6> (Headings)
Headings are section titles. They display in bold lettering, at various sizes. The size of the heading depends on the heading level. There are six heading levels, starting at <h1> (the biggest), and moving down to <h6> (the smallest). Both <h5> and <6> are actually smaller than regularly sized text. Here's an <h1> tag in action:
<h1>Important Information</h1>
When you use headings, always make sure your page follows a logical structure that starts with <h1> and gradually works its way down to lower heading levels. Don't start with <h3> just because the formatting looks nicer. Instead, use style sheets to change the formatting of each heading to suit you, and use the heading levels to delineate the structure of your document.
A.1.25. <head> (Document Head)
Defines the header portion of an HTML document. The <head> tag is placed immediately before the <body> tag. While the <body> tag contains the Web page content, the <head> tag includes other information like the Web page title (the <title> tag), descriptive metadata (one or more <meta> tags), and styles (the <style> or <link> tags).
A.1.26. <hr> (Horizontal Rule)
Defines a horizontal rule (a solid line) that's drawn to separate block elements:
<p></p> <hr> <p></p>
Although the <hr> tag still works perfectly well, HTML gurus prefer using border settings in a style sheet rule to get much more control over the line style and color. Here's an example that defines a style sheet rule for a solid blue line:
.border { border-top: solid medium navy } And here's how you could apply it:
<p></p> <div class="border"></div> <p></p>
For more information about the style sheet border settings, refer to Section 6.5.1 in Chapter 6.
A.1.27. <html> (Document)
The <html> tag is the first tag in any HTML document. It wraps the rest of the document. If you're creating an ordinary Web page, the <html> tag contains two other essential ingredientsthe <head> tag that defines the title, metadata, and linked style sheets, and the <body> tag that contains the actual content. If you're creating a frames page, the <html> tag contains a <head> tag, a <frameset>, and a <noframes> region.
A.1.28. <i> (Italic Text)
Displays some text in italics. HTML gurus suggest using <em> (emphasis) instead of <i>, because it more clearly indicates the relative importance of your text, rather than giving a strictly typographic instruction about how to format it. However, the <i> tag is much more common.
Here is some <i>italicized</i> text.
You can get much more control over every aspect of formatting using style sheet rules.
A.1.29. <iframe> (Inline Frame)
Creates an inline frame an embedded, scrollable window that shows another Web page inside the current one. You supply the attributes src (the page to show in the frame), name (the unique name of the frame), width , and height (the dimensions of the frame in pixels). You can also turn off the border by setting the frameborder attribute to 0, or disable scrolling by adding the scrolling="no" attribute. Here's one use of the <iframe> tag:
<iframe src="MyPage.html" width="100" height="250"></iframe>
Inside the <iframe> tag, you can put some content that will be displayed on browsers that don't support the <iframe> tag.
<iframe src="MyPage.html" width="100" height="250"> <p>To see more details, check out <a href="MyPage.html">this page</a>.</p> </iframe>
A.1.30. <img> (Image)
The <img> tag points to a picture file you want to show in a page. The src attribute identifies the picture (using a relative or absolute linksee Section 8.1.1 in Chapter 8). The alt attribute supplies some text that's used if the picture can't be shown.
<img src="OrderButton.gir" alt="Place Order">
Internet Explorer uses the alternate text for a picture pop-up text box, while some more standards-aware browsers (namely Firefox) don't. In either case, you can supply a pop-up text box in just about any browser using the title attribute. This is the best way to add a pop-up text box to an image.
The <img> tag also supports height and width attributes that you can use to explicitly size a picture:
<img src="photo01.jpg" width="100" height="150">
In this example, the picture is given a width of 100 pixels and a height of 150 pixels. If these dimensions don't match the actual size of the source picture, the picture is stretched and otherwise mangled to fit.
Never use the width and height attributes to resize an image; instead, make those kinds of edits in a proper image-editing program. You can use the width and height attributes to tell the browser how big your picture is, so it can lay out the page before it's downloaded the whole image (see Section 7.1.3 in Chapter 7 for more details).
To learn more about supported image types, how to organize pictures on a page, and where to find the best material, refer to Chapter 7. To learn how to create images that serve as fancy clickable buttons, check out Chapter 15.
Finally, you can create clickable regions on an image by defining an image map, and then linking that image map to your image with the usemap attribute of the <img> tag. For more information, see the <map> section (Section A.1.33).
A.1.31. <input> (Input Control)
The input tag is the most common ingredient in a HTML form (represented by the <form> tag). The input tag can represent different onscreen widgets (called controls ) that collect information from the Web surfer.
The type of control is determined by the type attribute (see Section 12.2.2.1 in Chapter 12 for a detailed list). Table A-1 lists the most common types. Additionally, every control should have a unique name associated with it.
Table A-1. HTML Form Controls
| Control | HTML Tag | Description |
|---|---|---|
| Single-Line Text Box | <input type="text"> | Shows a text box where the visitor can type in any text. |
| Password Text Box | <input type="password"> | Shows a text box where the visitor can type in any text. However, the text isn't displayed in the browser. Instead, you'll see an asterisk (*) appear in the place of every letter, hiding it from prying eyes. |
| Checkbox | <input type="checkbox"> | Shows a checkbox that can be turned on or off. |
| Option Button | <input type="radio"> | Shows a radio button (a circle that can be turned on or off). Usually, you'll have a group of radio buttons next to each other, in which case the visitor can select exactly one. |
| Button | <input type="submit"> | Shows a standard push button that submits the form, with all its data. |
| Button | <input type="reset"> | Shows a standard push button that simply clears the user selections and entered text in all the input controls of the form. |
Here's an <input> tag that creates a text box. When the page is submitted, whatever the surfer typed in will be sent along, with the descriptive identifier "Last-Name".
<input type="text" name="LastName">
For more information about forms and how you can use them to collect data, refer to Section 12.2.2 in Chapter 12.
A.1.32. <ins> (Inserted Text)
A rarely used tag that identifies newly inserted text. It lets you create an HTML Web page with limited change tracking. (Of course, you don't really want too much change tracking information in a page, because you want to keep your page sizes as small as possible so they can sail across the Internet without a care.)
The <ins> tag can be used around block elements, or inside a block element. Another change revision tag is <del>.
A.1.33. <li> (List Item)
Represents a single item in an ordered (numbered) list or unordered (bulleted) list. For more information, see the <ol> tag for ordered lists and the <ul> tag for unordered lists.
A.1.34. <link> (Document Relationship)
The <link> tag describes a relationship between the current document and another document. For example, you might use it to point to another document that's the previous version of the current document. More commonly, it's used to point to an external style sheet that provides the styles for the current page. The <link> tag is always placed in the <head> section of the page. Here's one possible use:
<link rel="stylesheet" href="NyStyles.css" type="text/css">
By using external style sheets, you can define your styles in one file, and use them in multiple pages. Chapter 6 has much more about style sheets and how to use them.
A.1.35. <map> (Image Map)
Defines an image map a picture with one or more clickable regions. When creating an image map, you assign a unique name that identifies it using the name attribute. You then add one <area> tag inside the <map> tag for each clickable region, specifying the coordinates and destination URL (see the <area> tag on Section A.1.2 for more on how the coords attribute works). Here's an example of an image map with three clickable regions:
<map name="ThreeSquares"> <area href="page1.htm" shape="square" coords="5,5,95,195"> <area href="page2.htm" shape="square" coords="105,5,195,195"> <area href="page3.htm" shape="square" coords="205,5,295,195"> </map>
Finally, to use your image map, you need to apply it to an image with the usemap attribute. The usemap attribute matches the name of the map, but starts with the hash (#) character, which indicates that the image map is defined on the current page:
<img src="image.gif" usemap="#ThreeSquares">
The clickable regions are invisible (unless they're indicated within your picture). However, when you hover over a hotspot, the mouse pointer changes to a hand. Clicking on a hotspot has the same effect as clicking an ordinary <a> linkyou're transported immediately to the new URL. For a full-fledged image map example, see Section 8.2 in Chapter 8.
A.1.36. <meta> (Metadata)
Meta tags give you a way to attach descriptive information to your Web pages. This information is never shown to the Web surfer, but it is available to automated programs like Web search engines as they scan your site. You add metadata by placing <meta> tags in the <head> section of your page.
Every <meta> tag is made up of a name attribute (which identifies the type of information you're adding) and a content attribute (which supplies the actual information). Although there is an unlimited number of potential <meta> tags, the two most common are description and keywords, because they're used by some search engines:
<meta name="description" content="Sugar Beat Music for Children offers age- appropriate music classes for children 4 months to 5 years old">
Section 11.3 in Chapter 11 describes meta tags in more detail, and explains how search engines use them.
A.1.37. <noframes> (Frames Alternate Content)
Defines the content that should be shown instead of a frames page if the browser doesn't support frames. The <noframes> tag must immediately follow the <frameset> tag on a frames page.
It's incredibly rare to stumble across a browser that's too old to support frames. (Netscape's supported frames since version 2.) Today, the only browsers you're likely to find that don't support frames are mobile browsers for small devices like cell phones, and screen reading programs (typically used by viewing-impaired visitors).
For much more information about frames and how to use them, refer to Chapter 10.
A.1.38. <noscript> (Alternate Script Content)
Defines the content that should be shown if a script can't run. The <noscript> tag must immediately follow the <script> tag. The most common reason a script can't run isn't due to lack of browser supportinstead, it's usually because the Web surfer has specifically disabled this feature of the browser.
For more information about scripts, refer to Chapter 14.
A.1.39. <object> (Embedded Object)
Used to embed specialized objects in your page, like audio, video, and even applets ( miniature programs that can run inside a Web page). For example, you might use an <object> tag to place a Flash movie inside a Web page, as described in Chapter 16.
A.1.40. <ol> (Ordered List)
An unordered list starts with the <ol> tag, and contains multiple list items, each of which is represented by the <li> tag. In an ordered list, each item is numbered consecutively, although the numbering can use numbers , letters , or roman numerals.
Here's a simple ordered list that numbers items from 1 to 3:
<ol> <li>Buy bread</li> <li>Soak stamps off letters</li> <li>Defraud government with offshore investment scheme</li> </ol>
To start at a number other than 1, use the start attribute and supply the starting number. To change the list formatting, use the type attribute with one of these values: 1 (numbers), a (lowercase letters), A (uppercase letters), i (lowercase roman numerals), I (uppercase roman numerals).
Ordered lists are demonstrated in Chapter 5 (Section 5.3).
A.1.41. <option> (Menu Option)
Defines an item in a selectable list control, inside a <select> tag. For example, if you want to create a drop-down menu for color picking that has the entries Blue, Red, and Green, you need one <select> tag with three <option> tags inside.
When you define the <option> tag, you can use attributes like selected (the choice is initially selected) and disabled (the choice is disabled, and can't be selected by the surfer). You can also use the value attribute to associate a uniquely identifying piece of information for this option, which is sent with the form data when the form is submitted.
For a basic example, see the description of the <select> tag on Section 12.2.2.2.
A.1.42. <p> (Paragraph)
The paragraph tag contains a paragraph of text:
<p>It was the best of times, it was the worst of times </p>
Paragraphs are block elements , which means the browser automatically adds a line break and a little extra space between two paragraphs, or between a paragraph and another block element, like a list or a heading.
Empty paragraphs are ignored by the browser. If you want to create a blank paragraph that takes up the normal amount of space, use a non-breaking space like this:
<p> </p>
A.1.43. <param> (Object Parameter)
Defines extra information that's used with the <object> tag to send information to the applet or plugin.
A.1.44. <pre> (Preformatted Text)
Preformatted text breaks the normal rules. Inside a <pre> tag, the browser pays close attention to every space and line break you use, and it duplicates that exactly in the Web page. Additionally, the Web browser puts it all into a monospaced font (typically Courier), which means the results are usually ugly. The <pre> tag is an easy and quick way to get text to appear exactly where you want, which is useful if you're using it to show visual poetry or a snippet of programming code. However, you shouldn't use it to align large sections of ordinary textuse tables and CSS positioning rules (see Chapter 9) for those tasks .
<pre> Tumbling-hair picker of buttercups violets dandelions And the big bullying daisies through the field wonderful with eyes a little sorry Another comes also picking flowers </pre>
A.1.45. <q> (Short Quotation)
Used to define a short quotation inside another block element, like a paragraph.
<p>As Charles Dickens once wrote, <q>It was the best of times, it was the worst of times</q>.</p>
Usually, the <q> element is rendered as italic text. However, it makes more sense to use the <q> element to denote the meaning of your text, in conjunction with style sheet rules that apply the specific formatting you want.
If you want a longer quotation that stands on its own as a block element , use the <blockquote> element instead.
A.1.46. <script> (Client-Side Script)
Includes a client-side script inside your Web page. A script is a set of instructions written in a simplified programming language like JavaScript. These instructions are often used to create more interactive Web pages by adding effects like buttons that change color when you hover the mouse pointer over them. To learn some of the basics of JavaScript and see scripts in action, check out Chapter 14.
A.1.47. <select> (Selectable List)
Defines a list control inside a form. The Web surfer can select a single item in the list (or multiple items, if you add the multiple attribute). You use the name attribute to uniquely identify this control, as in the following example:
<select name="PromoSource"> <option value="Ad">Google Ad</option> <option value="Search">Google Search</option> <option value="Psychic">Uncanny Psychic Intuition</option> <option value="Luck">Bad Luck</option> </select>
Ordinarily, selection lists are shown as drop-down menus . However, you can create a scrollable list box using the size attribute. Just specify the number of rows you want to show at once:
<select name="PromoSource" size="3"> </select>
For a full form example, refer to Section 12.2.2.2 in Chapter 12.
A.1.48. <small> (Small Text)
Steps the text size down one notch to create smaller text. The <small> tag is out of vogue, and you're better off using style sheets to control the formatting of your text.
A.1.49. <span> (Generic Inline Container)
The <span> tag is used to identify some text you want to format inside a block element. For example, you could format a single word in a paragraph, a whole sentence , and so on. Here's an example:
<p>In this paragraph, some of the text is wrapped in a span tag. That <span>gives you the ability</span> to format it in some fancy way later on.</p>
On its own the <span> tag doesn't do anything. However, it's a powerful way to apply style sheet formatting in a generic way.
You should also refer to the <div> tag (Section A.1.13), which can apply formatting to several block elements at once.
A.1.50. <strong> (Strong Emphasis)
Has the same effect as the <b> tag, but is preferred by some HTML experts because it indicates the relative importance of your text, not just the way it should be formatted. After all, you might use style sheet rules to change the formatting of this tag so it's emphasized in some other way, and doesn't necessarily use bold formatting.
A.1.51. <style> (Internal Style Sheet)
The <style> tag is used to supply CSS (Cascading Style Sheet) rules that format a Web page. It's always placed inside the <head> section of a Web page.
The <style> tag lets you define a style right inside a Web page. This is known as an internal style sheet . Here's an example that gives <h1> headings colored text.
<style type="text/css"> h1 { color: fuchsia } </style> More commonly, you'll use the <link> tag instead of the <style> tag, so that you can link to a separate file that defines your styles. That way, you can apply the same styles to multiple pages without cluttering up your HTML. Chapter 6 has much more about style sheets and how to use them.
A.1.52. <sub> (Subscript)
Formats text so that it appears smaller and lower (the middle of the text is lined up with the bottom of the current line). It's best not to rely on this trick for formatting (use style sheets instead), but it is a handy way to deal with scientific terms like H20. Here's how you'd use it:
Water is H<sub>2</sub>0
A.1.53. <sup> (Superscript)
Formats text so that it appears smaller and higher (the middle of the text is lined up with the top of the current line). It's best not to rely on this trick for formatting (use style sheets instead), but it is a handy way to deal with exponents like 3 3 . Here's the <sup> tag in action:
3<sup>3</sup> is 27
A.1.54. <table> (Table)
The outermost tag that defines a table. Inside the <table> tag, you define rows with the <tr> tag, and inside each row, you place columns of data in cells with the <td> tag. Here's a very basic table:
<table> <tr> <td>Row 1, Column 1</td> <td> Row 1, Column 2</td> </tr> <tr> <td>Row 2, Column 1</td> <td>Row 2, Column 2</td> </tr> </table>
It looks like this:
Table A-2.
| R ow 1, Column 1 | Row 1, Column 2 |
| Row 2, Column 1 | Row 2, Column 2 |
For much more information about creating exotic tables and sizing them perfectly, refer to Chapter 9.
A.1.55. <td> (Table Data Cell)
Represents an individual cell with text inside a table row (a <tr> tag). Each time you add a <td> tag, you create a column. However, it's perfectly valid to have different numbers of columns in subsequent rows (although it might look a little wacky). For a very basic table example, see the <table> tag definition, above, and for a detailed table expos , check out Chapter 9.
A.1.56. <textarea> (Multiline Text Input)
Shows a large text box that can fit multiple lines of text, inside of a <form>. As with all input controls, you need to identify the control by giving it a unique name. Additionally, you can set the size of the text box using the rows and cols attributes.
If you want some text to appear initially in the <textarea> element, place it in between the beginning and ending tags, like so:
<textarea name="Comments">Enter your comments here.</textarea>
A.1.57. <th> (Table Header Cell)
Represents an individual cell with heading text. The <th> tag is used in the same way as the <td> tagthe difference is that it's usually reserved for the first row (with the heading text), and has a basic bold formatting (which you can tailor using style sheets).
A.1.58. <title> (Document Title)
The <title> tag sets the title for the Web page, which is displayed in the browser title bar and used as the bookmark text if a surfer adds your site to his or her bookmark list. The <title> tag must be placed in the <head> section.
<title>Truly Honest Car Mechanics</title>
A.1.59. <tr> (Table Row)
Represents an individual row inside a table (a <table> tag). To add cells of information, you need to add the <td> tag inside the <tr> tag. For a very basic table example, see the <table> tag definition, above, and for a detailed table expos , check out Chapter 9.
A.1.60. <tt> (Teletype Text)
Text in a teletype tag displays using a fixed-width (monospaced) font, like Courier. Programmers sometimes use it for snippets of code in a paragraph:
<p>To solve your problem, use the <tt>Fizzle()</tt> function.</p>
Teletype text is designed to be used inside a block element like a paragraph (because it's an inline element ). For a similar effect in a block element , check out the <pre> tag.
A.1.61. <u> ( Underlined Text)
Displays some underlined text. Be careful about using this tag, because it's all too easy for Web surfers to mistake underlined text for links.
Here is some <u>underlined</u> text.
A.1.62. <ul> (Unordered List)
An unordered list starts with the <ul> tag, and contains multiple list items, each of which is represented by the <li> tag. The browser indents each item in the list, and draws a bullet next to it.
Here's a simple unordered list:
<ul> <li>Buy bread</li> <li>Soak stamps off letters</li> <li>Defraud government with offshore investment scheme</li> </ul>
Section 5.3.2 shows how you can change the bullet style in an unordered list with the type attribute. You can even use an image for a bullet, as demonstrated on Section 7.3.3 (Chapter 7).
EAN: N/A
Pages: 135