HTML for Beginners Required HTML Tags
Now that we've covered the rules of HTML
<ss01.html>, we're ready to start coding. To illustrate just
what HTML code does, we're going to build a simple page for the fictitious
company E-Z Accounting. Click "See it in action" to keep track of the
E-Z Accounting site's progress.
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.
<HTML> is the first tag
to appear on every Web page. Add the opening and closing tags to your page like
this:
<HTML>
</HTML>
All of the page's code will be placed between these two
tags, which tell a Web browser it's reading an HTML document.
Below the opening <HTML>
tag, enter the <HEAD> tag, which
contains information about the document but doesn't appear on the Web page.
Your document should now look like this:
<HTML>
<HEAD>
</HEAD>
</HTML>
There are several tags that can go between <HEAD> tags--for example, you'll regularly
come across <META>
</Authoring/Metadata/> tags that help search engines
categorize pages--but the only tag that's required is the <TITLE> tag, which puts text in the browser's
title bar. Your document should now resemble the example below (remember: First
on, last off):
<HTML>
<HEAD>
<TITLE>E-Z Accounting
</TITLE>
</HEAD>
</HTML>
Now you're ready to add opening and closing <BODY> tags. Your document should now look
like this:
<HTML>
<HEAD>
<TITLE>E-Z Accounting
</TITLE>
</HEAD>
<BODY>
</BODY>
</HTML>
Everything that appears inside the Web page will go between
the <BODY> tags.
See it in action
<javascript:openWindow('ss02x.html','Win',true,600,650)>
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
with the filename index.html (or index.htm if you're still using Windows 3.1),
and we'll start to make things more interesting.
HTML for Beginners Setting Background and Text Color
The <BODY> tag uses
several important attributes to control the look of your page. Use the BGCOLOR attribute and value to change your page's
background color. Version 3.x and
later browsers can read some colors from a list of
standard English words <
http://utopia.knoware.nl/users/schluter/doc/tags/colornames.html>,
such as white, blue, black, and the like. But to take advantage of all Web-safe
colors, you'll need to use hexadecimal color codes. VisiBone's
<http://www.visibone.com/colorlab/> Webmaster's Color Lab
displays safe colors with their hex codes, allowing you to view colors in
different combinations and side by side. By selecting several colors at once,
you can quickly create an entire color scheme for your site.
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 colors from Netscape's 216
browser-safe colors
</Graphics/Design/ss3dlink.html?tag=st.bl.f062700.txt.bl_ss3dlink>
(a simplified subset of the Mac's and PC's 256-color palettes.
For our sample page, let's keep things simple and use a
plain white background. The hexadecimal code for white is #FFFFFF, so we'll add an attribute to the existing <BODY> tag so that it reads:
<BODY BGCOLOR="#FFFFFF">
See it in action
<javascript:openWindow('ss03x.html','Win',true,600,650)>
Background Images
You can also use an image as your background. Any image you choose will tile
into the background--that is, it will go into the background without changing
size and then reproduce itself over and over to fill the page. Never use a
background that makes text difficult to read. To tile an image, add the BACKGROUND attribute to the BODY
tag (bgimage.gif is a sample background image):
<BODY BACKGROUND="bgimage.gif">
See it in action
<javascript:openWindow('ss03xx.html','Win',true,600,650)>
In the end, the E-Z Accounting team decided to stick with a
simple white background to keep the design uncluttered, make the text easy to
read, and ensure that the links stand out.
Text Colors
You can apply hex or name values to attributes of the <BODY>
tag to designate the color of your page's regular text and linked text. The TEXT attribute sets the color of the regular text.
The LINK attribute controls the color of
linked text. VLINK designates the color of a
followed link; it's helpful when you're presenting a list of links because it
lets your users distinguish the pages they've already visited. Finally, ALINK designates the color that links become when
clicked. ALINK is usually the same value as VLINK. For our page, we're going to have black (#000000) text and bright blue links (#33FFFF) that turn dark purple (#330066) when clicked and followed:
<BODY BGCOLOR="#FFFFFF"
TEXT="#000000" LINK="#33FFFF" VLINK="#330066"
ALINK="#330066">
You'll see just how this color scheme looks in the next two
lessons, when we add text and links.
Adding Text
It's time to say something on our page. You've already set
the basic colors of your text using the attributes of the <BODY> tag, but now you can start adding the
words that will appear in your 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 BGCOLOR="#FFFFFF"
TEXT="#000000" LINK="#33FFFF" VLINK="#330066"
ALINK="#330066">
E-Z Accounting: Tax Services That Aren't Too Taxing
</BODY>
See it in action
<javascript:openWindow('ss04x.html','Win',true,600,650)>
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
the size up, 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 this:
<BODY BGCOLOR="#FFFFFF"
TEXT="#000000" LINK="#33FFFF" VLINK="#330066"
ALINK="#330066">
<H1>E-Z Accounting</H1>
<H2>Tax Services That Aren't Too Taxing</H2>
</BODY>
See it in action
<javascript:openWindow('ss04y.html','Win',true,600,650)>
That's better. Notice that the headers automatically break
the line for you. Notice, too, that each line is automatically aligned to the
left. Wouldn't these lines look better centered? Add the <CENTER> tag:
<BODY BGCOLOR="#FFFFFF"
TEXT="#000000" LINK="#33FFFF" VLINK="#330066"
ALINK="#330066">
<CENTER>
<H1>E-Z Accounting</H1>
<H2>Tax Services That Aren't Too Taxing</H2>
</CENTER>
</BODY>
See it in action
<javascript:openWindow('ss04z.html','Win',true,600,650)>
Now we're getting somewhere.
Let's tell the viewer more. Under the </CENTER> tag, let's type in:
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.
See it in action
<javascript:openWindow('ss04w.html','Win',true,600,650)>
Save and view the file in your browser. (Selecting File/Open
or File/Open Page in most browsers will prompt you to enter the location of
your saved file.) Depending on your browser, you'll notice one of two things:
either the text continues beyond the right side of the page and off into
cyberspace, or it fills the entire width of the page no matter how wide or
narrow you make the browser window. (The former happened more frequently in
older browsers; with modern browsers the text will most likely just wrap.) Even
if you type hard line returns when you enter the text, HTML doesn't recognize
them. (Note that in our example, the two paragraphs have merged into one.) 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 adding any
white space after the tag. This tag is a good choice for creating line breaks
inside paragraphs. Keep in mind, though, that 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. For that reason, 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. By default, both the <BR>
and the <P> tags start the text
following the tag on the left side of the page, but the <P> tag's ALIGN attribute
can change that. Use <P ALIGN=RIGHT> to
align the paragraph with the right side of the page 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 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 and
knowledgeable, and--best of all--knows the Internet and the type of work you
do.
</P>
<P>
Ready to save some money? Let E-Z Accounting tell you more about our services,
fees, and background.
</P>
See it in action
<javascript:openWindow('ss04v.html','Win',true,600,650)>
Not bad, but your text is still pretty plain. You can make
some points jump out by using the <I>
(italic) and <B> (bold) tags. You can
also "nest" these tags to create bold italicized text (remember:
First on, last off). You can use the <PRE>
tag to preformat text and the <TT> tag
to use teletype or monospaced text. You can see examples of those tags in our Formatting Flavor <
/Authoring/StupidThree/ss02.html?tag=st.bl.f062700.txt.StupidThree_02>
tricks. Apply these tags judiciously, of course. Too much emphatic text makes a
page look annoyingly busy.
Adding Links
Now you're ready to learn about the anchor tag, which allows the Web
to be the astounding collection of linked information that it is. You'll use
the anchor tag and its attributes to connect
text on your Web page to other Web pages, email addresses, and online
addresses. Without the anchor tag, 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 respectively services.html, fees.html, and backgrnd.html.
Whenever someone clicks one of those words, you want to send him or her to the
appropriate page.
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>.
</P>
What does this do? The <A>
tag tells the browser that you're creating a link. The HREF
attribute stands for Hypertext Reference--the technical name for a link.
Whatever follows HREF= in quotes is the actual
name or URL of the item to which you want to link. 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. If you have multiple directories, you would just
name the appropriate directory before the file name. For example, if the
services.html page lived in a directory called main, you would link to it like this: <A
HREF="main/services.html">.
Now when users look at this page, they'll see the words services, fees, and background as
hyperlinks. Hyperlinked text will appear underlined and in a different color
than standard text. Remember that you designated the color of your links in the
<BODY> tag <ss03.html>
earlier. (Of course, we'd actually have to create those pages for these links
to work. In our example, clicking a link will just bring you back to the same
window.)
See it in action
<javascript:openWindow('ss05x.html','Win',true,600,650)>
The anchor tag can do more than just link Web pages to other
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 users to another
location on the same page. This technique 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 their information 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 to link from and surround that text with the link
tags <A HREF="#individuals">
and </A>. Now when someone clicks the
link, he or she will be taken to the target text further down the page.
Creating HTML
Lists
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
<http://coverage.cnet.com/Resources/Info/Glossary/Terms/faqs.html?tag=st.bl.f062700.txt.faqs>
file. 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 type of list places bullets before each list item, which you
designate with an <LI> tag (for
"list item"). If we apply this tag 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>
See it in action
<javascript:openWindow('ss06x.html','Win',true,600,650)>
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>
See it in action
<javascript:openWindow('ss06y.html','Win',true,600,650)>
Because our example doesn't consist of a series of steps,
let's change the <OL> back to <UL> to imply options rather than a sequential
order.
A third type of list is the definition list, which is used primarily for glossaries. A
definition list presents a term on one line and then its definition on a
separate line. This type of list uses the <DL> tag
and denotes list elements with <DT> (for
"definition title") and <DD> (for
"definition description"), like this:
<DL>
<DT>1040<br>
<DD>The basic form you have to fill out for a tax return.<br>
<DT>Schedule C<br>
<DD>The form you have to fill out to declare self-employment
income.</DL>
HTML for Beginners Adding Graphics
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?
Adding graphics to your page first requires you to put that
snazzy logo into a digital format. If you already have an electronic version,
then you're already set. If not, you need to request one from the logo's
designer, scan it yourself, or take your printed copy to a local copy shop and
have them scan it.
But that's only the beginning. High-quality electronic
images tend to be stored as TIFF
<http://coverage.cnet.com/Resources/Info/Glossary/Terms/tiff.html>
files, and the TIFF format doesn't work on the Web. You need to convert the image
into a JPEG
<http://coverage.cnet.com/Resources/Info/Glossary/Terms/jpeg.html>
or a GIF
<http://coverage.cnet.com/Resources/Info/Glossary/Terms/gif.html>.
JPEG and GIF are the two image formats supported by today's browsers. JPEG
works best for photographs, GIF for drawings and line art. You can make this
conversion in most graphics editors, such as Adobe
ImageStyler </Reviews/ImageStyler1/>.
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, <IMG> uses the SRC
(source) attribute to point to the digital image. The code looks something like
this: <IMG SRC="logo.gif">.
When you place the image file in the same directory as your pages, this tag
will find the image and display it in the browser.
We'll add the logo to our page, below the headings and above
the text:
<IMG SRC="logo.gif">
See it in action
<javascript:openWindow('ss07x.html','Win',true,600,650)>
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 to text. Always keep the image as small as possible, both in physical
size and in file size, while still allowing it to get its message across. You
can also speed up downloads by using the <IMG>
tag's WIDTH and HEIGHT
attributes. If, for instance, an image is 100 pixels wide by 150 pixels high,
you'd use the following tag:
<IMG SRC="logo.gif" WIDTH=100 HEIGHT=150>
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. As with the <P> tag, the <IMG> alignment options are ALIGN=LEFT, RIGHT,
or CENTER. For our example page, let's place
the logo on the right side of the first paragraph:
<IMG SRC="logo.gif" ALIGN=RIGHT
WIDTH=100 HEIGHT=150>
See it in action
<javascript:openWindow('ss07y.html','Win',true,600,650)>
Now our example is beginning to look like a real Web page.
HTML for Beginners Creating an Email Link
Building an attractive, useful Web page is only part of the
job. You also need to give viewers a way to contact you.
In the digital age, Web users expect to have instant and
easy email contact with you. To make a link to your email address, you'll need
to use the anchor tag again. You can separate
your email contact with the <HR> tag,
which inserts a horizontal line. We've decided to have the email contact link
centered on the page. Put it below the list, like this:
<CENTER>
<HR>
<a href="mailto:comments@builder.com">Drop us a line!</a>
</CENTER>
See it in action
<javascript:openWindow('ss08x.html','Win',true,600,650)>
Now, whenever someone viewing our page clicks the words
"Drop us a line," that user's email program will automatically start
up and open a new message to send to E-Z Accounting. To further customize your
mailto link, see our Super Ninja Mailto
</Authoring/MoreStupid/ss05.html> trick.
And that's it--you've built a basic Web page! Don't forget
to check your work carefully in a Web browser (several browsers, if possible;
get some friends to help) to make sure that all the elements are visible and
look the way they should.
HTML for Beginners Basic HTML Tag Guide
The following are brief explanations of the basic HTML tags
used in this article:
<HTML></HTML> - tells browsers the page is written
in HTML; entire document goes between HTML tags
<HEAD></HEAD> - appears just below the HTML tag in
every HTML document; contains information about the document but does not
appear on the Web page
<TITLE></TITLE> - specifies the
title of the document; the text between these tags appears in the browser's
title bar but not on the Web page itself
<BODY></BODY> - contains all the text and images
that will appear on the Web page, together with all the HTML elements that
provide the control/formatting of the page
BODY attributes:
BGCOLOR
- designates the background color, using a name or a hex value
BACKGROUND
- designates an image as a page's background (wallpaper)
TEXT
- designates the text color, using a name or a hex value
LINK
- designates the color of links, using a name or a hex value
VLINK
- designates the color of followed links, using a name or a hex value
ALINK
- designates the color of links on click, using a name or a hex value
<H1><H6></H1>-</H6>
- codes text as headings; <H1> is the
largest, <H6> the smallest
<CENTER></CENTER> - centers text
and other elements on a page
<BR> - breaks text onto a new line (no
vertical space between lines)
<P></P> - breaks text into a new paragraph
(leaves a blank line above the new paragraph)
<I></I> - creates italicized text
<B></B> - creates bold text
<PRE></PRE> - designates preformatted text
<TT></TT> - designates teletype or monospaced
text
<HR> - inserts a horizontal rule; helpful
in breaking up sections of a page
<HR SIZE=x> - designates the size
(height) of a rule
<HR WIDTH=x> - designates the width
of a rule, in percentage or absolute value
<HR
NOSHADE> - inserts a rule without a shadow
<A></A> - marks text as the start and/or
destination of a link; requires the HREF or NAME attribute
HREF - attribute of the <A> tag; makes text or image between <A> tags a hyperlink
NAME - attribute of the <A> tag; makes text or image between <A> tags the target of a hyperlink
<IMG SRC="x">
- Adds an image
<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
If you're curious about the myriad HTML tags we didn't
cover, check out the HTML Compendium's comprehensive list of HTML elements <http://www.htmlcompendium.org/0frame.htm>.
The steps to getting your pages on the Web vary by Internet
service provider. You'll have to contact your ISP to find out exactly what you
have to do. And if your ISP doesn't give you server space on which to post Web
pages, CNET can help you find another one
<http://webservices.cnet.com/>.
Tip:
In some rare situations, when the attribute value itself contains
quotes, it is necessary to use single quotes: name='John "ShotGun"
Nelson'
