Tags
Tags are used in an HTML document to specify different things. HTML documents come in pieces, each one separated from the others with tags. Most tags have two parts : the start tag and the end tag.
A start tag in HTML is defined by a left caret (<), followed by the tag name, followed by a right caret (>). To end an element, you include an end tag that is identical to the start tag except that there is a forward slash after the left caret (</) and before the tag name . Here is an example:
<body>data goes here</body>
| Caution | HTML is not case sensitive. That means the tag <hEaD> is identical to the tag <head> . |
Required Tags
Every HTML document should have four elements. Although some browsers can handle a page that omits them, others can't. Therefore, it's always a good idea to include them. Table C.1 lists the four required elements and the tags they are associated with.
 |
| Tag | End Tag | Use |
|---|---|---|
| <html> | </html> | Tells the browser that this document contains HTML data. All other elements occur within this element. |
| <head> | </head> | Gives a brief description of your page. |
| <title> | </title> | Titles your page. This element is defined inside the <head> element. |
| <body> | </body> | Stores the main data for your page. |
| |
As you can see by the description, the <html> element contains all the other elements in your HTML document. The <head> element is the first element in your <html> element. Where the <head> element finishes, the <body> element should begin. Also note that the <title> element occurs inside the <head> element
If we created a basic template for our first HTML document, it would look like the following.
<html> <head> <title> This is the title of our first HTML document </title> </head> <body> The body of our HTML document goes here </body> </html>
It's often convenient to indent HTML tags just like code blocks in ActionScript. In addition, it's common to place the tags on the same line as the data if everything can fit on one line. After applying these two rules, we end up with the following revision:
<html> <head> <title>This is the title of our first HTML document</title> </head> <body> The body of our HTML document goes here </body> </html>
That makes things a little more readable, although HTML will never be as readable as a language like ActionScript.
Some Additional Tags
This is a good time to talk about several other tags. Table C.2 lists them.
| |
| Tag | End Tag | Use |
|---|---|---|
| <h*> | </h*> | Defines a heading. The * is replaced by a number from 1 to 6 that indicates the level of the heading. |
| <p> | none | Defines a paragraph. |
| <hr> | none | Creates a horizontal line across the browser window. HR stands for horizontal rule. |
| <center> | </center> | Centers anything placed inside this element. |
| <a> | </a> | Serves as an anchor to mark a hyperlink. |
| |
Let's look at each of these important tags.
The Heading Tag
The first tag in the list is the heading tag. HTML defines six levels of heading that will format your text with a large font. This is similar to headings in a book, like this one, where separate sections are given a name in a large font. The heading tag can give you this in your HTML document. Just keep in mind that the number of the heading is an indicator of importance. <H1> , therefore, has the biggest text. <H6> , on the other hand, has the smallest text. You don't have to use these heading numbers in any order though. You could create a document that had nothing but <H2> s without using an <H1> . Consider this example:
<body> <h1>Section 1</h1> Here is the copy under heading 1. <h2>Subsection 1</h2> This is some copy under heading 2. </body>
Feel free to experiment with this and the other tags as I explain them. I'm not going to go into too much detail on them in this section, so the best way to get a feel for how they work is to test them.
The Paragraph Tag
Whitespace in your HTML document is compressed into a single space when displayed by a Web browser. That means that carriage returns, tabs, and multiple spaces are all condensed into a single space.
If you want to make a paragraph break, you can use the paragraph tag ( <p> ).
Unlike the other tags we've seen, this one has an end tag, but it is optional. You do not have to place text between two paragraph tags. Instead, you can simply place <p> at the place you want a break. If you prefer, you can still close the text with a </p> . Consider this example:
<body> This is paragraph 1. If this text is longer than 1 line, itwill word wrap automatically. <p> This is paragraph 2. The same word wrapping will occur in this
paragraph as occurred in the previous one. </body>
Generally , the paragraph tag is placed at the beginning of the new paragraph text, not on its own line as in the previous example. I used a separate line only to make it clear where the break was placed. Either way is fine, but putting it at the beginning of the text cleans up the code quite a bit.
The Horizontal Rule Tag
Sometimes it's nice to break apart sections of your HTML document with a horizontal line. You can do this with the horizontal rule tag ( <hr> ). Like the paragraph tag, this element has no end tag, only a start tag. By placing the <hr> tag in your document, you get a horizontal line across the entire Web browser window. Consider this example.
<body> Some text here. Above the line. <hr> More text here. Below the line. </body>
The Center Tag
The center tag centers an element in the browser window. It's straightforward in its use, as in the following example:
<center> This text is centered in the browser </center>
There is one final tag listed in Table C.2: the anchor tag. Before we can talk about it, we need to discuss something called tag attributes.
Tag Attributes
When you create a tag, you can specify specific characteristics about that tag by using tag attributes. Tag attributes are given inside the opening tag, right after the tag name. The general form would look something like this:
<tag attribute=value> element goes here </tag>
For example, one tag called <font> allows you to change the font you are using. There are many attributes you can set for <font> . The following example shows two of them:
<font size="12" color=" red"> content goes here </font>
In this case, we've used the size and color attributes to set up our font. Anything listed in the content goes here section is printed in the Web page in red, at a font size of 12.
Attributes are used for many tags to define exactly how the element is displayed. Graphics images, for example, have several attributes that you can assign to determine how the image is displayed.
Now that you understand tag attributes, we can talk about the anchor tag.
The Anchor Tag
The anchor tag ( <a> ) allows you to direct the browser to a new location. You will make use of anchors when you add hyperlinks to your pages. To create an anchored hyperlink, you use the anchor tag along with an attribute called href , which stands for hyperlink reference. When the browser sees this tag and attribute, it creates an anchored hyperlink. Look at this example of an anchored hyperlink:
<a href=" http://www.mydomain.com/subpage2.html"> CLICK ME, I'm a hyperlink! </a>
In this example, the Web page would display the text "CLICK ME, I'm a hyperlink!" in the browser and create an anchored hyperlink on it that would direct the browser to http://www.mydomain.com/subpage2.html.
HTML has many more tags, but they are beyond the scope of this primer. Some of these tags perform specific tasks , and learning to use them is as simple as reading a brief description of what the tag does and testing it. It's not my intention to teach everything about HTML in this appendix; instead, I want to give you enough basics so that you can understand how to manipulate the way your Flash movie is displayed when it's embedded in an HTML page.
Embedded Flash Movies
When you publish a movie under its default settings, a simple HTML page is generated to hold your .swf. This page is usually not perfect, and you are often forced to edit it by hand.
Some programs, such as Macromedia Dreamweaver, are designed to make the creation and manipulation of HTML pages simple and visual. Although these kinds of programs are nice, they are generally not necessary to make minor modifications to the way your Flash movie is displayed in the browser.
With the basics of HTML as explained in the earlier section, you can modify the default HTML document so that the browser displays the Flash movie as you want.
Your starting plan of attack could involve publishing a Flash movie and HTML document with the default settings and then looking at the HTML that is output. From there, play around with the HTML options in Flash's publish settings and republish. Then compare the differences in HTML pages as you change settings in Flash.
Let's look at the basic HTML that is produced by Flash to get a better idea of what some of these options do. If you just create a new document with Flash's default publish settings, you will get the following HTML. (The bolded code is the HTML that loads the Flash movie.)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"" http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html omens=" http://www.w3.org/1999/xhtml" xml:lang=" en" lang=" en"> <head> <meta http-equiv=" Content-Type" content=" text/html; charset=iso-8859-1"> <title>Untitled-2</title> </head> <body bgcolor="#ffffff"> <!URLs used in the movie> <!text used in the movie> <object classid=" clsid:d27cdb6e-ae6d-11cf-96b8-444553540000"
codebase=" http://download.macromedia.com/pub/shockwave/cabs/flash/
swflash.cab#version=7,0,0,0" width="550" height="400" id=" Untitled-1"
align=" middle"> <param name=" allowScriptAccess" value=" sameDomain" /> <param name=" movie" value=" Untitled-1.swf" /> <param name=" quality" value=" high" /> <param name=" bgcolor" value="#ffffff" /> <embed src=" Untitled-1.swf" quality=" high" bgcolor="#ffffff" width="550"
height="400" name=" Untitled-1" align=" middle"
allowScriptAccess=" sameDomain" type=" application/x-shockwave-flash"
pluginspage=" http://www.macromedia.com/go/getflashplayer" /> </object> </body> </html>
The first thing to notice is that the data is displayed twice. This is because Flash files are displayed by means of a plug-in, and Internet Explorer and Netscape have different ways of accessing plug-ins. All the content inside the <object> tag except for the large <embed> tag is used by Internet Explorer. The <embed> tag content is used by other browsers such as Netscape, Opera, Safari, and so on. Normally, you should keep the details of .swf movies to load consistently between the two tags. The <embed> tag is placed inside the <object> tag so that no browser sees this as two separate .swf files to load.
For the <object> tag, many of the settings for the Flash file are stored in individual <param> tags, but a few key pieces of information are actually in the <object> tag. The properties to be aware of are the height and width properties, which can either use pixels or percentages; the id , which is used when accessing the Flash movie with JavaScript; and the codebase property, which lets you set which version of the plug-in the user must have to see this content. In this case, we can see that anyone who has less than the 7,0,0,0 plug-in will be asked to upgrade.
The <param> tags largely allow you to override the settings that you used in your .fla. You can override the background color, stage alignment, scale mode, and quality by changing the parameters in the HTML. The values of these parameters will be the same as if you were changing the values via ActionScript in the file. The last major parameter is the movie parameter. This is where you specify the actual .swf to load. You would specify the path to the .swf just like you would for any media file used in HTML.
For the <embed> tag, the content is the same; the only real difference is that the information is stored in properties of the <embed> tag instead of in subtags. One significant difference is that for some browsers that use the <embed> tag, you need to add the property swLiveConnect=true to enable JavaScript to Flash communications.
Whichever browser your user chooses, you might still need to transfer data from the page to the Flash movie. In older versions of Flash, this was a pain, but starting with the Flash 6 plug-in, a new feature has become available: FlashVars. With FlashVars, any variables specified are immediately loaded into the _root . This is useful for dynamically generated HTML pages or content that you need to change regularly where it is easier for you to change the HTML than it is to reproduce a Flash file.
The implementation for FlashVars is similar to loading text from a text file using loadVariables . (This process is discussed in Chapter 12, "Server-Side Support for Flash: Highscore Boards.") Your data must be formatted in URL-encoded format. These variables are placed in the HTML twice. The first time is for the <object> tag as another parameter, as seen here:
<param name=" FlashVars" value=" title=This+is+a+title&content=hello" />
The second time is as a property in the <embed> tag:
<embed src=" Untitled-1.swf" quality=" high" bgcolor="#ffffff" width="550"height="400" name=" Untitled-1" align=" middle"
allowScriptAccess=" sameDomain" type=" application/x-shockwave-flash"
pluginspage=http://www.macromedia.com/go/getflashplayer
FlashVars=" title=This+is+a+title&content=hello"/>
EAN: 2147483647
Pages: 161