Tag a Page with HTML Commands


A Web document is actually an ordinary text file that you can load with an editor, such as Windows Notepad. HTML tags are added to the text to achieve different effects, such as the following:

  • Creating a hyperlink

  • Turning text into a heading

  • Making several lines of text into a list

  • Displaying a picture of your 1970 Dodge Dart

All HTML tags begin with the < character. The following tag adds a horizontal line to a Web page:

 <P>What's with this rule hoo-hah?<HR> 

"HR" stands for "horizontal rule." You can place an <HR> tag on a Web page anywhere you want a line to appear.

There are two kinds of tags: opening tags and closing tags. An opening tag indicates where some kind of formatting should begin. A closing tag indicates where it should end.

Consider the following marked -up text from a Web page:

 <H1>Today's Top Story</H1> 

This text uses the HTML tag <H1> to turn the text "Today's Top Story" into a size 1 heading. There also are <H2> , <H3> , <H4> , <H5> , and tags for headings with five additional sizes.

There are two HTML tags in this example: the opening tag, <H1> , and its closing tag, </H1> . The names of all closing tags are preceded by the slash character ( / ).

Most HTML tags require opening and closing tags in order to function correctly. For headings, you must use both tags to show where the heading begins and where it ends.

The <HR> tag is one of several opening tags that do not require a corresponding closing tag. The horizontal line appears on a page exactly where the <HR> opening tag is placed.

graphics/bookpencil_icon.gif

HTML tags aren't case sensitive, so you could place <h1> and <H1> on a Web page and achieve the same effects.


An HTML tag begins with the < character and the name of the tag. It also may contain extra information to control these two characteristics:

  • How the tag is displayed on a page

  • What the tag can be used to do

All of this extra information is placed before the > character at the end of a tag, as in the following example:

 <HR WIDTH="60%"> 

This <HR> tag has the added text WIDTH="60%" . This is an attribute of the tag that causes the horizontal rule to be displayed 60% as wide as it would appear normally. A tag can have more than one attribute as long as they're set apart from each other by blank spaces.

Once you understand the way HTML tags are structured, it becomes easier to understand what they're being used to accomplish. Even if this is your first exposure to HTML, you may be able to figure out what the following does:

 <A HREF=http://www.sams.com>Visit the Sams Publishing Site</A> 

This turns the statement "Visit the Sams Publishing Site" into a hyperlink pointing to http://www.sams.com , which is the URL for Sams Publishing's site. The <A> tag stands for "anchor" ”another term for a link ”and the HREF attribute is named for Hypertext Reference .

Work with HTML in Page View

The normal mode in FrontPage is to convert what you do in Page view into HTML. For this reason, if you added the <HR> tag to a page, FrontPage would assume you wanted to display these four characters , not a horizontal rule ”which you add by choosing Insert, Horizontal Rule.

To work directly with HTML in FrontPage, click the HTML tab at the bottom of the Page view window. There are three tabs for three different editing modes:

  • Normal ” For letting FrontPage write its own HTML behind the scenes

  • HTML ” For writing your own HTML

  • Preview ” For looking at the page as it will function in a Web browser

You can click the HTML tab at any time to see a Web page's HTML formatting. If you're looking at a page that was created in FrontPage, don't expect to make much sense of it unless you're experienced with HTML. The software uses some complex HTML to achieve many of the effects you can use on Web pages.

The easiest way to experiment with HTML in FrontPage is to first create a new Web with no pages and no theme. When you add your first page and view it in the HTML mode of Page view, the document should resemble Figure 41.1.

Figure 41.1. Viewing a Web page's HTML formatting.

graphics/41fig01.gif

FrontPage starts every Web page with a minimal amount of HTML formatting:

  • <HTML> tags to show where the Web page begins and ends (in other words, the entire document).

  • <HEAD> tags to indicate the page's header ”information about the page that isn't displayed in the main browser window.

  • <TITLE> tags to give the page a title in the browser's title bar.

  • <BODY> tags to indicate the page's body ”the area that will show up in the main browser window.

FrontPage also uses several <META> tags in the header of the page that describe the document and how it was created.

graphics/bookpencil_icon.gif

One of these tags shows that Microsoft FrontPage is the Web editing software being used to work on the page.


You can change the title of a page by editing the text between the opening and closing <TITLE> tags. The text will appear on the title bar of the Web browser when the page is loaded.

Anything you want to display on a Web page should be placed between the existing <BODY> tags.

Paragraphs of text are formatted with the <P> tag in HTML, as in the following:

 <P>For years, researchers and politicians have been saying that the amount of violence on television causes children to behave more violently in real life.</P> <P>I've been watching around 7-10 hours of TV every day for the past 15 years.</P> <P>When I read things about how TV makes you violent, it makes me so angry I could hit someone.</P> 

The <P> tags control how this example is formatted when it appears on a page. Adding blank lines after each paragraph and hitting the Enter key at the end of each line does not affect how it is displayed ”in an HTML document, tags control all of the formatting.

Figure 41.2 shows how this text appears in a Web browser.

Figure 41.2. Paragraphs of text on a Web page.

graphics/41fig02.gif

This text behaves like the paragraphs you've been working with in FrontPage. It fills the available space and moves around if you resize the browser window. You can switch back and forth between normal and HTML mode in Page view, editing the page in both views.

A good way to discover things about HTML is to create a simple page using HTML (like the one displayed in Figure 41.2), make a change to it in normal mode, and switch back to HTML mode so you can see what was changed.

The following output shows the TV violence text after a few changes have been made in Page view:

 <P>For years, researchers and politicians have been saying that the amount of violence on <A HREF=http://www.tvultra.com>television</a> causes children to behave more violently in real life.</p> <P><i>I've been watching around 7-10 hours of TV every day for the past 15 years.</i></P> <P>When I read things about how TV makes you violent, it makes me so angry <B>I could hit someone</B>.</P> 

Three things are different:

  • The word "television" is a hyperlink to TV Ultra , a World Wide Web site recommending the day's best show (whether violent or nonviolent).

  • The second paragraph uses the <i> tag to italicize the text. (An uppercase <I> tag would produce identical results.)

  • The words "I could hit someone" are surrounded by the <B> tag, which makes them appear in boldface.



Sams Teach Yourself Office Productivity All in One
Sams Teach Yourself Office Productivity All in One (Sams Teach Yourself All in One)
ISBN: 0672325349
EAN: 2147483647
Year: 2003
Pages: 474
Authors: Greg Perry

flylib.com © 2008-2017.
If you may any questions please contact us: flylib@qtcs.net