|
Learning Basic HTML Tags
by Shannon O'Donnell
It wasn't that long ago that the only way I knew how to put data onto a user's screen was by using an
AS/400 display file. As I started to use the Internet more and more, however, and as I began to grow curious
about how the Internet, and Web pages in particular, worked, I began to pick up a few things here and there.
One day I finally decided to bite the bullet and sit down and learn how to use HTML, the heart and soul of
the Internet. To my surprise, I learned that there are really only a few HTML tags (think DDS keyword) that
are used over and over on 99 percent of all Web pages. Once I learned these, I could do pretty much
anything I wanted with a Web page. And you can, too.
But why would you want to? The answer to that question depends entirely on you and what you want out of
your career. If you only want to program in RPG for the rest of your life, writing the same old DDS display
file over and over, you don't really need to learn anything about HTML. If, on the other hand, you'd like to
someday learn how to take your existing DDS screens and convert them so that they'll run in a Web
browser, using the CGI APIs, for example; or if you plan to use one of IBM's WebSphere Studio tools; or if you want to understand what is
being done when you use IBM's WebFacing tool to move your green-screen programs to the web--then you
need to understand HTML.
In this article, I'm going to identify the key HTML tags you need to learn to create a static Web page. If
you'd like to follow along as you read, open up the Windows Notepad.exe program, found on all Windows
PCs. If you're not familiar with this program, it's usually found by clicking on Start, Programs, Accessories,
and then Notepad. Alternatively, you can click on Start, Run, and then type NOTEPAD.exe, and
click OK. I will explain what to type into Notepad as I go along.
The Basics: Creating a Static HTML Page With Text Formatting
A basic HTML page consists of opening (<html>) and closing (</html>) HTML tags. In
your Notepad session, type <html> on the first line. Press the Enter key a few times and
then type in the closing HTML tag (</html>).
Move your cursor back up so that it's above the closing HTML tag, and you'll be set for the next step.
Adding Text
Now let's add some text. Type the following text into your Notepad document (or any other text you like):
I am a great HTML programmer!
Now let's see what that looks like. Click on the Notepad menu item named File, then select Save. When the
Save window appears, name your file MYHTML.htm and click on the OK button. This will save your file
as an HTML file. You could also have chosen to save it with an HTML extension rather than HTM; most
browsers can handle either one.
To view your HTML document, use Windows Explorer to navigate to the folder you saved the
MYHTML.htm file into, find this file, and then double click on it. The default Windows browser should
open, displaying your new HTML document.
Formatting the Text
Looks pretty boring so far, huh? I'll show you a few more HTML tags that will allow you to make the text
look a little more exciting.
Go back to your Notepad session and add the following tags:
<b><u><i><center>I am a great HTML programmer!</center></i></u></b>
The <b> tags tell HTML to bold everything between the beginning (<b>) and ending (</b>) bold tags.
The <u> tags tell HTML to underline everything between the beginning (<u>) and ending (</u>) underline tags.
The <i> tags tell HTML to italicize everything between the beginning (<i>) and ending (</i>) italics tags.
The <center> tags tell HTML to center everything between the beginning (<center>) and ending (</center>) center tags.
Save your document. Open your browser session again and click on the browser's Refresh menu item
(found under the View menu item in Internet Explorer and under the Refresh button in Netscape
Navigator). You should now see the text formatted in bold, centered, underlined, and italicized.
Creating a Table
That was fun but not terribly exciting. Let's do something a bit more fun now and learn how to create an
HTML table. A table in HTML is extremely useful for keeping data aligned and formatted. And it's
especially useful for those times when you want to display something like an inventory list where the item
number, quantity, and price need to be placed under a particular column heading. If you don't use an HTML
table, you may find that your text is formatted by your browser in ways you don't like! You could get
around that problem by using the <pre> and </pre> tags, which tell HTML to preserve your existing
formatting, but that doesn't always leave you with the desired results.
The best way to keep your data formatted the way you want it, and at the same time make it look
professional, is to use an HTML table.
HTML tables, at their most basic, are very simple to create. An HTML table consists of an opening <table>
tag and a closing </table> tag. Within the <table> tags, you will create table rows by using the <tr> and
</tr> tags. To add data elements to a row, use the <td> and </td> tags (which stand for table data). To add
a border to your table, so that it appears as if it's in a box, use the <table border=" "> parameter on the
<table> tag. The format is border="x", where x is a numeric value that specifies the border width.
If you make the width "0" or leave the border keyword off, the table will not have a border. And, finally, to
add column headings to your table, use the table heading (<th></th>) tags.
Using Notepad, add the following HTML code to your document:
<html>
<table border="2">
<tr>
<th>Item#</th><th>Quantity</th><th>Price</th>
</tr>
<tr>
<td><b>A56778</b></td>
<td><b><center>15</center></b></td>
<td><b>17.34</b></td>
</tr>
<tr>
<td><b>B65657</b></td>
<td><b><center>68</center></b></td>
<td><b>19.87</b></td>
</tr>
</table>
</html>
Next, save the document and open the HTML Web page in your browser. It should like pretty much like
this:
Adding an Image
OK, this is starting to get a little bit more exciting. Let's jazz things up just a bit by adding an image. You
may not be aware of it, but all the pretty pictures you see on a Web page while browsing the Internet are
not actually part of those Web pages! In fact, the images themselves may not even exist on the same
computer that the HTML web page itself does. How can such a thing be?
Actually, it's pretty simple. Since an HTML file is nothing more than simple text, there had to be a way to
include pictures and sound and so forth. And since you can't convert an image to a string of text very easily,
there needed to be a way to point a browser to the actual physical location of images and sounds and
anything else that is not straight text. To tell a browser where to find a non-text item, such as an image, you
have to include a special tag (<img>) that includes a parameter (src=) that tells the browser where the non-
text item can be found. In other words, the <img> tag tells the browser the HTTP address, or URL, of the
image file.
Here's an example. I'm going to tell the browser to display a picture of an iSeries, which I have stored
locally on my PC's hard drive in a directory named Downloads. The image file name is as4001a.jpg. Enter
this HTML source line into the sample HTML file you've been creating for this article.
<img src="c:\downloads\as4001a.jpg" />
This is what your HTML will look like with the addition of this line (be sure to insert the path to your own
image file when you key this example in yourself):
Adding Hyperlinks
The last thing I'll cover today is how to add links to your Web page. Links allow you to provide a way for
your users to jump from one Web page to another. Links, like all other HTML functions, have their own
special tag. That tag is <a>, which stands for "anchor." Every anchor tag contains a parameter that tells
the browser where to take the user when he clicks on that link. The parameter "href=" points to the
physical location (that is, the HTTP address, or URL) of the HTML page.
In addition, if you want the user to see something other than the HTTP address, you can enter some
descriptive text inside the opening anchor tag and between the opening and closing (</a>) anchor tags. This
way, the "replacement" text will appear instead of the Web address itself.
For this sample, I'll provide a link that takes the user to the Guild Companies Web site. The replacement text
for the URL will read "The best resource for iSeries information!"
Enter the following text into the HTML page in the Notepad document that you've been working on in this
example:
<a href="http://www.itjungle.com">The best resource for iSeries information!</a>
When you're done, save your HTML file in Notepad and then open it (refresh it) in your browser. The new text will appear:
More to Come
As you've seen, it doesn't take a lot to create an HTML Web page. I've shown you some of the more
common--and what I think are the most useful--HTML tags you'll use in your own projects. In a future
article, I'll show you how to turn your static HTML page into a dynamic HTML page that lets users enter
data into a form.
Shannon O'Donnell is director of new technologies for Jano Justice Systems and co-editor of
Midrange Programmer, OS/400 Edition. He can be reached at sodonnell@itjungle.com.
|
