Free tutorials : HTML for Begginers

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:

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:

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:

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):

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:

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:

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:

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:

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:

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/>.

Free tutorials

Pages

Thursday 15 August 2013

HTML for Begginers

1 comment: