Make your own free website on Tripod.com
 
LeoBa Media, New York

Leo Suresh, Leoba Media

HTML Lessons        

 
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> </TITLE> it won't work. The correct order is <HEAD><TITLE> Your text</TITLE></HEAD>. 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
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.
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.

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:
To get an ordered, or numbered, list, we'd replace the <UL> tags with <OL> tags; the <LI> tags remain the same: 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:

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
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
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:
Hey, our example is beginning to look like a real Web page


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:http@icarus.weber.edu"> Clicking on this will help you e-mail http@icarus.weber.edu</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).

Links