KacMac
  
KacMac Home
 

   Index
   Chapter 1
   Chapter 2
   Chapter 3
   Chapter 4
   Chapter 5
   Chapter 6
   Chapter 7
   Chapter 8
   Chapter 9
   Chapter 10
   Chapter 11
   Appendix I
   Appendix II
   Appendix III
   Appendix VI
 HTML Guide   Chapter 1 - Ten Steps to Create a Web Page 

CONTENTS

  1. How To Start
  2. What is HTML Tags?
  3. The Basic Structure of the Page
  4. Adding Title
  5. Adding Text and Paragraphs
  6. Adding Formatting and Headings
  7. Adding Links to Other Pages
  8. Adding Impact with Images
  9. Use a Browser to See How Your Page Looks
  10. Publish the Page on the Web


1. How To Start

Any program that enables you to peck out pure text is all you need for creating Web pages (like Notepad for Windows). Launch a new document in your favorite text editor or word processor (such as Word for Windows).

 

Important:
* Your file name extension must be with either .HTM or .HTML.
* If you're using a word processor, make sure you save the document as a simple text file.

 

2. What is HTML Tags?

When you create your web page you just type in your text and then you insert markers-called tags-that spell out how you want things to look. For example, if you want a word on your page to appear in bold text, you surround that word with the appropriate tags for boldfacing text.

In general, tags use the following format:

<TAG>The text to be affected</TAG>

The TAG part is a code (usually one or two letters) that specifies the type of effect you want. For example, the tag for boldfacing text is <B>. So if you wanted the phrase "This is bold text" to appear in bold, you'd type the following into your document:

<B>This is bold text</B>

The first <B> means "Start showing the text in bold." This continues until the </B> appears. The slash (/) defines this as an end tag, which means "Stop showing the text in bold." As you'll see, there are tags for lots of other effects, including italics, paragraphs, headings, page titles, lists, and lots more.

HTML (which stands for HyperText Markup Language) is just the sum total of all these tags. You'll find out more about HTML later.

3. The Basic Structure of the Page

Your HTML files will always lead off with the <HTML> tag, which you type at the top of the file. This tag doesn't do a whole heckuva lot except tell any Web browser that tries to read the file that it's dealing with a file that contains HTML doodads. Similarly, the last line in your document will always be the </HTML> tag, which you can think of as the HTML equivalent for "The End."

So each of your Web pages will start off looking like this:

<HTML>

</HTML>

The next tags serve to divide the document into two sections: the head and the body. The head section is like an introduction to the page. To define the head, you add a <HEAD> tag and a </HEAD> tag immediately below the <HTML> tag you typed in earlier. So your Web page should now look like this:

<HTML>

<HEAD>

</HEAD>

</HTML>

The body section is where you enter the text and other fun stuff that will actually appear on the Web page. To define the body, you place a <BODY> tag and a </BODY> tag after the head section (below the </HEAD> tag), as follows:

<HTML>

<HEAD>

</HEAD>

<BODY>

</BODY>

</HTML>

4. Adding Title

The page's title is just about what you probably think it is: the overall name of the page (not to be confused with the name of the file you're creating). If someone views the page in a graphical browser (such as Netscape or Explorer), the title appears in the title bar of the browser's window.

To define a title, you surround the text with the <TITLE> and </TITLE> tags. For example, if you want the title of your page to be My Home Page, you'd enter it as follows:

<TITLE>My Home Page</TITLE>

Note that you always place the title inside the head section, so your basic HTML document now looks like so:

<HTML>

<HEAD>

<TITLE>My Home Sweet Home Page</TITLE>

</HEAD>

<BODY>

</BODY>

</HTML>

5. Adding Text and Paragraphs

If you like your text to appear in the body of the page, you can simply type the text between the <BODY> and </BODY> tags, like so:

<HTML>

<HEAD>

<TITLE>My Home Page</TITLE>

</HEAD>

<BODY>

This text appears in the body of the Web page.

</BODY>

</HTML>

When you want to start a new paragraph, you have to use the <P> tag. For example, consider the following text:

<HTML>

<HEAD>

<TITLE>My Home Page</TITLE>

</HEAD>

<BODY>

This text appears in the body of the Web page.

This is the second line.

<P>

This is the third line.

</BODY>

</HTML>

Test how it looks in the browser. As you can see, the first two lines appear beside each other, despite the fact that they're on separate lines in the original text. However, the third line sits nicely in its own paragraph thanks to the <P> tag that precedes it.

6. Adding Formatting and Headings

So far you've been able to use HTML to convince a Web browser to display a page title and break up plain text into paragraphs. That's a good start, but you won't exactly have Web surfers clamoring to read your page. What you need now is to jazz up the page with some text formatting and a few impressive headings.

HTML has a cartload of tags that will fancify your text. You saw earlier how a word or phrase surrounded by the <B> and </B> tags will appear bold in a browser. You can also display text in italics by bracketing it with the <I> and </I> tags, and you can make your words appear as though you produced them with a typewriter by surrounding them with the <TT> and </TT> tags.

Like chapters in a book, many Web pages divide their contents into several sections. To help separate these sections and so make life easier for the reader, you can use headings. Ideally, these headings act as mini-titles that convey some idea of what each section is all about. To make these titles stand out, HTML has a series of heading tags that display text in a larger, bold font. These are six heading tags in all, ranging from <H1> -which uses the largest font- down to <H6> -which uses the smallest font.

To illustrate these text formatting and heading tags, the next figure shows how Netscape displays the following text:

<HTML>

<HEAD>

<TITLE>A Text Formatting and Headings Extravaganza</TITLE>

</HEAD>

<BODY>

Here's some <B>bold text</B>. You can also do the

<I>italic text</I> thing. And, what the heck,

<TT>typewriter-like text</TT> is also available.

<H1>An H1 Heading</H1>

<H2>An H2 Heading</H2>

<H3>An H3 Heading</H3>

<H4>An H4 Heading</H4>

<H5>An H5 Heading</H5>

<H6>An H6 Heading</H6>

</BODY>

</HTML>

7. Adding Links to Other Pages

As you know the coolest thing about Web pages are the links to other pages. A quick click on a particular link and you're off on a journey to a whole new world.

To give the people reading your Web pages the same kind of thrill, there are HTML tags that you can use to designate a block of text to be a link. Specifically, you use the <A> and </A> tags (the "A" stands for, strangely, "Anchor") to create a link. The <A> tag is a bit more complicated than your garden-variety tag, so let's take a close look at it. Here's the general format to use:

<A HREF="Address">Link text</A>

Here, the Address part is the Web address of the page to which you want to link. Web addresses are ugly-looking things, but later on you'll learn how to avoid that look. For example, here's the Web address of KacMac home page:

http://www.kacmac.com

The Link text part is the word or phrase that your readers will click on to jump to whatever page you specified in the Address part. Here's an example that includes a link you could use to connect to KacMac home page:

<HTML>

<HEAD>

<TITLE>Linking to Another Page</TITLE>

</HEAD>

<BODY>

This example includes a link to

<A HREF="http://www.kacmac.com">

KacMac home page</A>.

</BODY>

</HTML>

8. Adding Impact with Images

You can really spruce up a dry Web page by adding pictures. Whether it's a corporate logo, one of the kids' drawings, or a picture of yourself, images are a great way to break up the monotony of plain text.

There are a number of issues involved in using images in your Web page (such as what type of format to use, how do you get images on your computer, and so on), but don't worry about them now. (more about images, see Chapter 8) For now, you'll just see how to use the <IMG> tag that tells a Web browser to display a specific image. Here's the general format:

<IMG SRC="image">

Here, image is the name of the graphics file you want to display. For example, if the file is named mypicture.gif, then you use the following tag to display it:

<IMG SRC="mypicture.gif">

9. Use a Browser to See How Your Page Looks

Before you foist your completed page on your fellow Web denizens, you should use a Web browser to make sure everything looks okay. All browsers have a feature that lets you load a page right from your computer's hard disk. In Netscape, for example, you pull down the File menu, select the Open File command, and then choose the file from the Open dialog box that appears. In Microsoft's Internet Explorer, you select the File menu's Open command, select the Open File button in the Open Internet Address dialog box that appears, and then pick out the file you need.

10. Publish the Page on the Web

When you're satisfied with your page, you're ready to publish it on the Web for all to see. To get your page online, you need to set up a location on a Web server (A server is a computer that makes documents available to other people on the Internet.) You usually have two choices:

  • Ask your current Internet service provider to set you up.
  • Contract with a separate company that handles Web pages (Web Hosting). If you wish, KacMac, can provide you a great web hosting service. Contact our Support Team for information.

  Make KacMac your home page
Add URL - Information Center - Contact us - Terms of Service - Privacy Policy - Advertising

Copyright © 2004 KacMac. All rights reserved.