Leo Suresh, Leoba Media
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:
Tags are always surrounded with angle brackets (less-than/greater-than
characters)--for example, <HEAD> or <I>.
Most tags come in pairs and surround the material they affect. They
work like a light switch: the first tag turns the action on, and the second
turns it off. (There are some exceptions. For instance, the <P> tag
creates paragraphs and doesn't have an "off switch." Once you've made a
paragraph, you can't "unmake" it.)
The second tag--the "off switch"--always starts with a forward slash.
For example, you turn on bold with <B>, shout your piece, and go back
to regular text with </B>.
First tag on, last tag off. Tags are embedded, so if you try, for
instance, to do this: <HEAD><TITLE>Your text</HEAD>
it won't work. The correct order is <HEAD><TITLE>
Many tags have optional attributes that use values to modify the tag's
behavior. The <P> tag's ALIGN attribute, for instance, lets you change
the default (left) paragraph alignment. For example, <P ALIGN=CENTER>
centers the paragraph following it.
Remember, too, that HTML is a constantly changing language, and older
browsers often don't support the newest tags. When a browser sees an HTML
tag it doesn't understand, it tends to ignore both the tag and the material
the tag affects. This is nice because you can add new, innovative elements
to your page for viewers with newer browsers to see without causing problems
for viewers with older browsers;
they'll simply see the elements their browser understands. On the downside,
if you've made a coding mistake, you won't necessarily see an error message
or other red flag--so you may not realize you've made an error at all. Thus
, it's important to check all of your pages in a browser to make sure
everything looks the way you intended. In fact, test your pages on several
browsers (on both PC and Mac platforms, if possible), because not every
browser handles HTML in exactly the same way.
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.
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. Now let's get serious. Below the opening <HTML> tag, enter the < HEAD> tag, which contains information about the document. 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>. Finally, add opening and closing <BODY> tags. Everything that appears on the Web page proper will go between the <BODY> tags.
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. 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:
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:
Let's tell the viewer more. To create our example page, type the following directly under the </CENTER> tag:
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
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:
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: . 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
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 tag to read:
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 tag in this way (where bgimage.gif is a sample background image):
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
The following are brief explanations of the HTML tags covered in this feature: <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
--breaks text onto a new line (no vertical space between lines)
--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
Getting Started with HTML There are certain commands that should be in every HTML page. They are: <!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML//EN"> <HTML> and </HTML> <HEAD> and </HEAD> <TITLE> and </TITLE> <BODY> and </BODY> It doesn't matter if HTML commands are in uppercase or lowercase. This is the order that they're used in: <!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML//EN"> <HTML> <HEAD> <TITLE>This is HTML lessons from Leoba</TITLE> </HEAD> <BODY> Your document goes here. </BODY> </HTML> The <!DOCTYPE HTML> and <HTML> commands point out that the document is written in HTML. There are two parts of a document: the head and the body. In the head, you put the title of your document. The title shows up at the top of the browser. For example, the one for this document is Tutorial: Beginning HTML. Don't confuse the title with a heading, though. The heading at the top of this page is Getting Started with HTML. In the body, you put the code for all of the text and graphics that you want in your document Headings There are six headings you can use. They look like regular text, except they're a different size, in bold face, and have blank lines before and after them. <H1> and </H1> <H2> and </H2> <H3> and </H3> <H4> and </H4> <H5> and </H5> <H6> and </H6> Below is an example of each of them: <H1> This is the first heading.</H1> This is the first heading. <H2> This is the second heading.</H2> This is the second heading. <H3> This is the third heading.</H3> This is the third heading. <H4> This is the fourth heading.</H4> This is the fourth heading. <H5> This is the fifth heading.</H5> This is the fifth heading. <H6> This is the sixth heading.</H6> This is the sixth heading
Formatting the Text There are several things you can do to change the look and organization of text. Some are: Bold: <b> and </b> Italics: <i> and </i> Centering: <center> and </center> Font Size: <font size="6"> and </font> Dividing Line:
Bold This is normal text. <b>This is bold text.</b> This is normal text. This is bold text.
Italics <i>This is text in italics.</i> This is text in italics. Centering <center>This is centered text.</center> This is centered text. Font size This is the normal font size for your browser. <font size="4">This is font size 4.</font> <font size="+2">This is font size +2.</font> This is the normal font size for your browser. This is font size 4. This is font size +2. Dividing line Here's a line that is normal size:
Here's a line that is size 5: <hr size=5> Here's a line that is normal size
Adding Graphics There are a few good things to know how to do with graphics: Add a graphic to the page: <IMG SRC=""> Put the graphic to one side or center it: align Use a graphic as a background: background="" Adding a graphic To add graphics to your page, you need to use <IMG SRC="http://www.someplace.com/directory/graphic.gif"> . For example: <IMG SRC="http://icarus.weber.edu/tutorial/mail.gif" If you do decide to use graphics, make sure that they don't take up much memory. Otherwise, it will take a long time for your page to load. People are impatient - they don't like to wait. So, try to keep your graphic sizes to a minimum, and don't use too many of them. Be sure to use graphics that are in the right format. The best two to use are .jpg and .gif. Some people's browsers may not be able to show graphics in any other formats Aligning the graphic This won't work with all browsers, but it will with Netscape. To align to the left: <IMG SRC="http://icarus.weber.edu/tutorial/mail.gif " align=left> To align to the right: <IMG SRC="http://icarus.weber.edu/tutorial/mail.gif " align=right> Using a graphic for your background To do this, put background in the <BODY> tag. The Sample Page uses a graphic for its background. The code in that case is: <BODY background="http://icarus.weber.edu/tutorial/whitebg.gif ">
Making Links to Pages A link is something that takes the user to another Web page. A link brought you to this page, for example. You can make links to: Connect through text: <A HREF=""> and </A> Display images with borders: <A HREF="">, <IMG SRC=""> and </A> Display images without borders: border=0 Send e-mail: mailto: Using text as a link Links begin with: <A HREF="http://domain.name.edu/directory/filename.html"> and end with: </A>. For instance: <A HREF="http://icarus.weber.edu/">WSU's Computer Science Home Page</A>
Using an image as a link <A HREF="http://icarus.weber.edu/"> <IMG SRC="http://icarus.weber.edu/tutorial/new.gif"></A>
Displaying images without borders Graphics that are used as links may or may not have a border around them. The example above had a border. To take it out, just put border=0 inside the IMG SRC tag. For example: <A HREF="http://icarus.weber.edu/"> <IMG SRC="http://icarus.weber.edu/tutorial/new.gif " border=0></A>
Sending e-mail through a link <A HREF="mailto:firstname.lastname@example.org"> Clicking on this will help you e-mail email@example.com</A>
Changing Colors There are many ways to use color in web pages. There are default colors that some browsers use, but you can use different ones in your page if you want. You can define colors for: Some of the text: <font color="#"> and </font> All of the text in the page: text="#" Links that haven't been clicked on: link="#" Links that have been clicked on: vlink="#" The background color of the page: bgcolor="#" When you're ready to choose your colors, look at this helpful color chart.
Setting the color for some of the text This sentence will be the normal color. <font color="#FF0000"> This sentence will be red.</font> This sentence will be the normal color. This sentence will be red
Setting the color for all of the text To do this, put text="#" in the <BODY> tag. The Sample Page changes the default text color. The code in that case is: <BODY text="#0000FF">
Setting the color for links that haven't been clicked on To do this, put link="#" in the <BODY> tag. The Sample Page changes the default for the color of those links. The code in that case is: <BODY link="#FF0000">
Setting the color for links that have been clicked on To do this, put vlink="#" in the <BODY> tag. The Sample Page changes the default for the color of those links. The code in that case is: <BODY vlink="#000000">
Setting the background color If you have a background graphic, you don't need to set a background color. To set the background color, put bgcolor="#" in the <BODY> tag. The background color for this page was set to white (#FFFFFF). The code for this page is: <BODY bgcolor="#FFFFFF">
Hints for using colors If you decide to change the default background, link, and text colors, make sure that the new colors differ enough so that you can read text on the background and tell when a link has been visited or not. For example, you don't want to have blue text on a blue background. When you set the colors for your page, you don't need to have more than one tag. Everything can be put in the same one. For instance, in the Sample Page, the code for that tag looks like this: <BODY background="http://icarus.weber.edu/tutorial/bg.gif" text="#0000FF" link="#FF0000" vlink="#000000">
Ideas for Making Personal Pages Tell about: <ul> yourself your pets your family interests tv shows favorite music show your resume post stories and poems you've written link to other pages you like on the Web ask for people to e-mail you so you can be penpals look at other home pages for ideas</ul>
Hints for Editing Your Web Page I recommend that you use one of theses editors: Editors on Browsers such as communicator-->page composer on Netscape 'Notepad' in Windows 'Word' in Windows95 or NT (save as ASCII text) 'Eve' in the VAX 'Vi' or 'Emacs' in UNIX Webwizard on the Silicon Graphics Machines There are other editors, but those would be the easiest to use. Don't use editors like WordPerfect 5.1, because they wouldn't save your file in the right format. It has to be saved as regular text. There are ways to save or create HTML files in the newer versions of WordPerfect. Make sure that all of your HTML files have a name that ends with .htm or .html. Otherwise, when you try to look at your page through a browser, it will just show up as plain text. When creating your page, it would be a good idea to spell check it, or ask someone to proofread it for you. Pages look better when there aren't a lot of errors in them. Also, once you have your page online, try to keep it up to date. There are some characters that are reserved which you can't use. & is one of them. Use 'and' instead, if possible. Other reserved characters are < and >. If you are having trouble editing your page, go to a computer lab on campus and ask the lab aide on duty for help
Content The actual 'meat' of a document -- all of the words, images, and links which a user can read and interact with. I use this term a lot to mean "whatever you put in the document." Hyperlink A link from one document to another, or to any resource, or within a document. For example, just above where its says "Beginner's Web Glossary" and that text is highlighted in some fashion. The default is usually blue, underlined text, but your display may vary. In-line Almost always used in the context "in-line image," this refers to a resource of some type which is placed directly into a document. As I say, this is nearly always an image, but the future could see things like in-line animations. URL The Uniform Resource Locator is a "standard" way of easily expressing the location and data type of a resource. URLs in general take the form "protocol://address" where protocol is something like gopher, FTP, telnet, and so on, and the address is merely the server and pathname (if any) of a given resource or page. For more information, take a look at the Beginner's Guide to URLs at the National Center for Supercomputing Applications (NCSA).