CNET’s HTML for Beginners
It's time, don't you think? You've been roaming the Net looking at what everyone else has done. Now you're ready to put together a Web site of your own. All you need is a basic understanding of Hypertext Markup Language (HTML)--the coding system that turns plain text into colorful, interactive Web pages.
You already have all the tools you need. We're not talking about snazzy programs like FrontPage or NetObjects Fusion that code HTML for you with a few clicks of the mouse--or even about the latest Internet-aware office suite apps such as Corel's WordPerfect 7 or Microsoft Word 97. Those tools are great, but you don't need them, and they won't teach you what's going on behind the scenes.
For the same reason you want kids to learn their multiplication tables before they get their hands on a calculator, it's helpful to understand basic HTML before relying on Web authoring software. That way, you know just what you can do, how you can do it, and how to resolve any problems you encounter.
And many Web authoring tools don't support all the latest HTML tags. If you know how to code HTML, it's easy to open up an HTML file and add extra tags by hand--including new tags that were developed after the site-authoring software hit the shelves. HTML is a living, growing language; understanding how it works is critical to keeping up with its latest innovations.
To get you going, we'll walk you through coding a simple Web page in HTML. When you're done, you'll have a basic understanding of how HTML works, and you'll have created a basic page. If you actually want to post the page you create, feel free to substitute your own text for our sample copy.
Best of all, you don't have to spend a penny to get started. You can begin right now using any text editor or word processor.
Learn the Basics
So, you have an idea for a Web site. In our example, we'll pretend you're an accountant who wants to drum up some tax-time business from young freelance hackers, so you've formed E-Z Accounting. Now what?
First, get out some old-fashioned paper and a pencil, and sketch out what you want your Web site to look like: overall site organization, as well as basic layout and design of individual pages. You may be itching to get coding, but drawing it out first makes sense: you can fiddle with elements and designs without having to code and recode.
Once you've settled on the organization of your site, it's time to begin creating your pages with HTML tags--the instructions that surround material such as text, images, and links and tell the viewer's Web browser how to display them. If you want an image to show up on the left side of the page, a certain word to appear bold, or another word to link to an outside resource, HTML tags are how you do it.
There are five important things to know about HTML tags:
If it's all starting to sound complicated, relax. We've kept things simple so you can get your feet wet without being overwhelmed. Look for CNET to explore more advanced HTML tags, as well as tips and tricks for using HTML, in upcoming stories.
Now let's get going. Although HTML is not case-sensitive, we'll show tags, attributes, and values in uppercase throughout this article, so you'll be able to spot them easily.
Set up the page
Now that we've covered the rules of HTML, let's get coding. There are certain tags you need to put in every HTML document to set it up as a Web page. Begin by opening a new document in your text editor.
Every Web page starts with <HTML> and ends with </HTML>, so add them to your page. The whole Web page happens between these two tags.
<HTML>
</HTML>
Now let's get serious. Below the opening <HTML> tag, enter the <HEAD> tag, which contains information about the document.
<HTML>
<HEAD>
</HTML>
There are several tags that can go between <HEAD> tags, but the only one that's required is the <TITLE> tag, which puts text on the browser's title bar. To create our example page, type <TITLE>E-Z Accounting, which will appear on the browser's title bar when a viewer loads the page. Close those tags with </TITLE> and </HEAD>. (Remember: first on, last off.)
<HTML>
<HEAD><TITLE>E-Z
Accounting</TITLE></HEAD>
</HTML>
Finally, add opening and closing <BODY> tags. Everything that appears on the Web page proper will go between the <BODY> tags.
<HTML>
<HEAD><TITLE>E-Z
Accounting</TITLE></HEAD>
<BODY>
</BODY>
</HTML>
Note: throughout this article, click the "see what it looks like" links to check out the HTML page as it would look at that stage in a browser. (The links use JavaScript code to bring up a separate window, so if your browser doesn't support JavaScript, download Microsoft Internet Explorer 3.0 for Mac, Windows 3.1, or Windows 95 or Netscape Navigator for Mac, Windows 3.1, or Windows 95.) When you're creating a Web page on your own, you'll need to check it in a browser as you go. Save the file you're creating as plain text with an .htm or .html extension. Then go to your browser, select File/Open File from the main menu, find the HTML document, and click the Open button. Voilà! There's your Web page.
Our page doesn't look like much so far, does it? All you see is the name "E-Z Accounting" in the browser's title bar above a blank page. Don't worry; we're just getting started. Save your file in text format as index.html (or as index.htm if you're still using Windows 3.1), and we'll make things more interesting.
Let’s Talk Text
It's time to say something on our page. We'll start with a headline. Let's say the company's motto is E-Z Accounting: Tax Services That Aren't Too Taxing. Go ahead and add it to the page beneath the <BODY> tag.
<BODY>
E-Z Accounting: Tax Services
That Aren't Too Taxing
</BODY>
Kind of dull, eh? It's just plain text with nothing to call attention to it. You could use specific tags to make it bold or italic and bump up the size, but what you really want are header tags, which do all that for you. Header tags range from <H1> to <H6>, with <H1> the largest and <H6> the smallest. Let's see what adding header tags does. Delete the colon in your headline, and surround the text with <H1> and <H2> tags like so:
<BODY>
<H1>E-Z Accounting</H1>
<H2>Tax Services That Aren't
Too Taxing</H2>
</BODY>
That's better. Notice that the headers automatically break the line for you, and each line is automatically aligned to the left. Wouldn't they look better centered? Add the <CENTER> tag:
<BODY>
<CENTER>
<H1>E-Z Accounting</H1>
<H2>Tax Services That Aren't
Too Taxing</H2>
</CENTER>
</BODY>
Let's tell the viewer more. To create our example page, type the following directly under the </CENTER> tag:
Are you a freelance Web
designer looking for a good
accountant--one who's up on
all the latest changes in the
tax laws? Try E-Z Accounting.
You'll get top-notch service
from an honest accountant
who's inexpensive,
knowledgeable, and--best of
all--knows the Internet and
the type of work you do.
Ready to save some money? Let
E-Z Accounting tell you more
about our services, fees, and
background.
Hey, what happened to our two paragraphs? They've merged into one because HTML doesn't recognize hard returns. If you want to take back control of your text, you need a couple more tags: <BR> and <P>.
<BR> forces a line break without leaving vertical space. This is good for creating line breaks inside paragraphs. Once upon a time, it was necessary to add a <BR> tag to the end of every line to prevent text from running off the right side of the screen, but that's not a problem with most modern browsers. In fact, manually broken lines often look awkward when a viewer's browser window is sized narrower than usual: the text runs across the screen, wraps to the next line, and then breaks again a few words later. Rather than using <BR> at the end of every line, stick to using <BR> only when you need to force a line break for reasons of design or content.
The <P> tag breaks the text and inserts a blank line, which is useful for separating paragraphs from each other. Both the <BR> and the <P> tags start the following text on the left side of the page by default, but the <P> tag's ALIGN attribute can change that. Use <P ALIGN=RIGHT> to align the paragraph right or <P ALIGN=CENTER> to center the paragraph.
Since we want our example to break into two separate paragraphs, insert a <P> tag before each text paragraph, like this:
</CENTER>
<P>
Are you a freelance Web
designer looking...Internet
and the type of work you do.
<P>
Ready to save some money? Let
E-Z...
Not bad, but you can make some points jump out by using the <I> (italic) and <B> (bold) tags. Alternatively, you can use logical tags that let the browser decide what emphasis to use. Text marked with the <EM> and <STRONG> tags appear as italic and bold, respectively, in most up-to-date browsers, but some older browsers that can't handle italic or bold may underline the text instead. (Those browsers won't differentiate text tagged with <I> or <B> at all.) You can also "nest" these tags to create bold and italic text (remember: first on, last off). Apply these tags judiciously, of course. Too much emphatic text makes a page look annoyingly busy.
Add Some Links
The Web is all about links, right? So let's make some. Give a warm welcome to the anchor (<A>) tag, which lets you connect text on your Web page to other Web pages, email addresses, and online destinations. Without it, the Web wouldn't exist.
Let's put this powerful tool to work by making a few links in the line "Let E-Z Accounting tell you more about our services, fees, and background." We'll assume that the information about the company's services, fees, and background will go on separate pages, called services.html, fees.html, and backgrnd.html, respectively. Whenever someone clicks on one of those words, you want to send them to the appropriate page.
So let's add anchor tags to the second paragraph like this:
<P>
Ready to save yourself some
money? Let E-Z Accounting
tell you more about our <A
HREF="services.html">
services</A>, <A
HREF="fees.html">fees</A>,
and <A HREF="backgrnd.html">
background</A>.
The <A> tag tells the browser that you're creating a link. The HREF attribute stands for Hypertext Reference--a fancy name for a link. Whatever follows HREF= in quotes is the actual name, or URL, of what you want to link to. In this case, we're assuming that you're linking to pages that reside in the same Web server directory as your original index.html page.
Now when someone looks at this page, they'll see the words services, fees, and background as hyperlinks. (Of course, we'd actually have to create those pages for these links to work.)
The anchor tag can do more than just link to other Web pages on the same site. It can also link to pages at other Web sites. For instance, we could link to the IRS home page like this:
...in the <A HREF="http://www.irs.ustreas.gov/">tax
laws</A>?
The anchor tag doesn't have to send visitors away from your starting page. Using the NAME attribute you can simply jump them to another location on the same page. This can be particularly useful on exceptionally long pages. Suppose that the page explaining E-Z Accounting's fees has sections for both businesses and individuals. You want to create a link that takes individuals directly to the section below the business fee information.
The NAME attribute labels the destination of the link with an anchor name. In this example, we'll name it "individuals." Go to the destination text and surround it with the tags <A NAME="individuals"> and </A>. Then go to the text you want link from and surround it with the link tags
<A HREF="#individuals"> and </A>. Now when someone clicks on the link, they'll be taken to the target text further down the page.
Create a List
Sometimes, a list is the best way to organize a lot of information. For instance, you could use a list of links as a table of contents for a particularly long FAQ file. And HTML contains a variety of list-making tags to help you get started.
The simplest--and most common--is an unordered, or bulleted, list, denoted by a <UL> tag. This places bullets before each list item, which you designate with an <LI> tag. If we apply it to the three reasons to check out more information about E-Z Accounting, the code looks like this:
Ready to save yourself some
money? Let E-Z Accounting
tell you more about our
<UL>
<LI><A
HREF="services.html">services
</A>
<LI><A
HREF="fees.html">fees</A>
<LI><A HREF="backgrnd.html">
background</A>
</UL>
To get an ordered, or numbered, list, we'd replace the <UL> tags with <OL> tags; the <LI> tags remain the same:
Ready to save yourself some
money? Let E-Z Accounting
tell you more about our
<OL>
<LI><A
HREF="services.html">services
</A>
<LI><A
HREF="fees.html">fees</A>
<LI><A HREF="backgrnd.html">
background</A>
</OL>
But since our example doesn't consist of a series of steps, let's change the <OL> tags back to <UL> tags to imply options rather than sequential order.
A third type of list is the definition list, which is used primarily for glossaries; it presents a term on one line, then its definition indented on a separate line. This type of list uses the <DL> tag and denotes elements with <DT> (for "definition title") and <DD> (for "definition description"), like this:
<DL>
<DT>1040
<DD>The basic form you have
to fill out for a tax return.
<DT>Schedule C
<DD>The form you have to fill
out to declare
self-employment income.
</DL>
Add Images
A text-only page isn't going to catch anyone's eye. After all, the World Wide Web is all about color and pictures. Maybe you spent some bucks on a cool new logo; why not show it off on your Web page?
First, put that snazzy logo into a digital format. If you already have an electronic version, great. If not, you need to request one from the logo's designer, or take your printed copy to a local copy shop and have them scan it. But high-quality electronic images tend to be stored as TIFF files, which don't work on the Web. You need to convert the image into either JPEG or GIF format--the two formats supported by today's browsers. (JPEG works best for photographs; GIF for drawings and line art.) You can find links to a variety of shareware image converters in CNET's "build a great Web site: cheap!" feature.
Once you have your electronic image in the right format, you're ready for the image tag. <IMG> is similar to the anchor tag in that it points to a resource that's not actually on the page--in this case, it uses the SRC (source) attribute to point to the digital image, like this: <IMG SRC="logo.gif">. When you place the image file in the same directory as your pages, this tag will find it and display it in the browser.
We'll add the logo to our page, below the headings and above the text:
</CENTER>
<IMG SRC="logo.gif">
<P>
Before you start peppering your pages with pictures, keep a couple of things in mind. Images, even small ones, take a long time to download compared with text. Always keep the image as small as possible in both physical size and file size while still allowing it to get its message across. (See the "graphics: file size" section of CNET's "elements of Web design" feature for some tips on keeping your images small.) You can also speed up downloads by using the <IMG> tag's WIDTH and HEIGHT attributes. If, as in our example, an image is 100 pixels wide by 50 pixels deep, you'd
use the following tag:
<IMG SRC="logo.gif" WIDTH=100
HEIGHT=50>
When a browser sees the attributes' values, it creates the correct image space automatically rather than having to scan the image first.
Finally, you'll want to place your images using the ALIGN attribute of the <IMG> tag; the options are LEFT, RIGHT, or CENTER. For our example page, let's place the logo on the right side of the first paragraph:
</CENTER>
<IMG SRC="logo.gif"
ALIGN=RIGHT WIDTH=100
HEIGHT=50>
<P>
Hey, our example is beginning to look like a real Web page!
What’s your Background?
No matter what's on a Web page, the standard gray background can get a little dull. But changing a page's background color is as simple as adding a BGCOLOR attribute and value to the <BODY> tag. Modern browsers read some colors from a list of standard English words--such as white, blue, black, and the like. But to get total color control, you'll need to use hexadecimal codes that represent colors. That's not as daunting as it sounds: there are plenty of people who've already worked out all the color combinations and posted their hexadecimal equivalents on the Web. Try Doug
Jacobson's RGB Hex Triplet Color Chart.
Keep in mind that most browsers can display colors from a palette of only 256 different hues and shades. If you use a color that's not in the palette, the browser will try to choose a similar one. If you want to guarantee that your colors will appear as close to your original choices as possible, select shades from Netscape's 216 browser-safe colors (a simplified subset of the Mac's and PC's 256-color palettes), available for download from CNET's "elements of Web design" feature.
For this example, let's keep things simple and use a plain white background. The hexadecimal code for white is #FFFFFF, so we'll expand the existing <BODY> tag to read:
<BODY BGCOLOR="#FFFFFF">
If plain hues aren't exciting enough for you, you can use an image as your background. Any image you choose will tile into the background--that is, it will go into the background at whatever size it is and then reproduce itself over and over to fill the page. (Just remember that complex background images can often make the text difficult to read.) To tile an image, use the <BODY> tag in this way (where bgimage.gif is a sample background image):
<BODY
BACKGROUND="bgimage.gif">
Get Some Feedback!
Creating an attractive, useful Web page is only part of the job. You also need to give viewers a way to contact you.
Sure, you could just list your phone number or your snail mail address, but that's yesterday's news. Web surfers want to be able to send you email. To make a link to your email address, you'll need to use the anchor tag again. Put it below the list, like this:
</UL>
<A HREF=
"mailto:e-z@an-isp.com"> Drop
us a line!</A>
</BODY>
Now, whenever someone viewing our page clicks the words "Drop us a line," their email program will automatically start up and prepare a message to send to E-Z Accounting. (Don't try this with the sample page mailto link--you'll just get an email error message because that address doesn't really exist.)
And that's it--you've built a basic Web page! Don't forget to save your work and check it carefully in a Web browser (several, if possible--get some friends to help) to make sure all the elements are visible and look the way they should. If you're so pleased with your page that you want to put it on the Web right away, check out the "how to post your page online" section of CNET's TV feature, "how to build your own Web page."
HTML Quick Reference
<HTML>...</HTML>--tells browsers the page is written in HTML; entire document goes between the HTML tags
<HEAD>...</HEAD>--appears just below the HTML tag in every HTML document; contains information about the document but does not appear on
Web page
<TITLE>...</TITLE>--specifies the title of the document; the text between these tags appears in browser's title bar but not on the Web page itself
<BODY>...</BODY>--contains all the text and images that make up the Web page, together with all the HTML elements that provide the control/formatting of the page
BGCOLOR—attribute of <BODY> tag; designates color of page's background
BACKGROUND--attribute of <BODY> tag; designates image as page's background (wallpaper)
<H1>-<H6>...</H1>-</H6>--codes text as headings; <H1> is the largest, <H6> the smallest
<CENTER>...</CENTER>--centers text and other elements on page
<BR>--breaks text onto a new line (no vertical space between lines)
<P>--breaks text into a new paragraph (leaves blank line above new paragraph)
<I>...</I>--creates italic text
<B>...</B>--creates bold text
<EM>...</EM>--creates emphasized text, usually italic
<STRONG>...</STRONG>--creates strongly emphasized text, usually bold
<A>...</A>--marks text as the start and/or destination of a link; requires the HREF or NAME attribute
HREF--attribute of <A> tag; makes text or image between <A> tags a hyperlink
NAME--attribute of <A> tag; makes text or image between <A> tags the target of a hyperlink
<UL>...</UL>--creates an unordered (bulleted) list
<OL>...</OL>--creates an ordered (numbered) list
<LI>--used in conjunction with the <UL> or <OL> tag, designates a list item in an unordered or ordered list
<DL>...</DL>--creates a definition list
<DT>--used in conjunction with the <DL> tag, designates a definition title in a definition list
<DD>--used in conjunction with the <DL> tag, designates a definition description in a definition list
<IMG>--adds an image to a page; must have SRC attribute
SRC--attribute of <IMG> tag; points to location of digital image file
WIDTH--attribute of <IMG> tag; defines width of image in pixels
HEIGHT--attribute of <IMG> tag; defines height of image in pixels
<COMMENT> or <!--> tag ; comment delimiter tag