Brain Candy #8 - DIY with HTML

Brain Candy #8 - DIY with HTML

There comes a time in most peoples' lives when they feel that they have something to say to the world. We've reviewed sites where others have had their say. Now, I'll show you how you can have yours.

I'm going to discuss the mechanics of building a simple web site. You'll have to find your own service provider, but it isn't hard. You might be surprised to find out how easy it is to put together a simple text-only site. Adding graphics is not difficult to do, either. Let's say that you want to tell everyone in the world about the "Inverted Jenny", an extremely rare US postage stamp that was printed with the airplane upside down. You know a lot about this stamp and you want to share it with the world. You're going to build a web site!

The World Wide Web has a standard language, called HTML. That's short for Hypertext Markup Language. You can do a surprising amount with a few simple commands. Here's the code to get your site started.

  1. <HTML>
  2. <HEAD><TITLE>The Inverted Jenny</TITLE></HEAD>
  3. <BODY>
  4. <CENTER>
  5. <H1>The Inverted Jenny</H1>
  6. <IMG SRC="invjen.gif">
  7. </CENTER>
  8. In 1979, I beheld one of the best known inverts ...
  9. ... the <I>Inverted
  10. Jenny</I>. As you can see from the picture above, ...
  11. <P>
  12. The "Inverted Jenny" ...
  13. <P>
  14. Another site devoted to the "Jenny" can be found at
  15. <A HREF="http://not.a.real.site/j_rafecas/jenny.html">
  16. Jose's Jenny Page</A>
  17. I hope you've enjoyed your visit. I update regularly ...
  18. <P><CENTER><B>Clancy's Jenny Page - Last updated: March 9,
  19. 1998</B></CENTER>
  20. </BODY>
  21. </HTML>

The line numbers shown are for reference purposes. They won't be present in a real HTML file.

The first few lines are a preamble to your document. Line 1 tells the browser that this is an HTML document, by use of the <HTML> tag. Line 2 defines the title, which shows in your browser's frame. Line 3 states that we're ready to start with the body of the document. Line 4 says to center everything that follows until the "stop center" command, </CENTER> is found, in this case on line 7.

Now, we're actually going to put some information into the page. We define a level 1 header, the highest of six available, by using the <H1> tag, to put the title into the document. This will give it a large font and bold text in most browsers. Then, we close the header by saying </H1>. Generally, this is the way you stop any formatting that you start, by prefacing it with a slash within brackets.

Line 6 is special; it defines a graphical file that will be shown centered (per line 4) in your document. As you can see, the basic syntax is simple. The hard part about putting graphics in web documents is having a source for them. If you have scanned images and/or draw your own artwork and can get them into either the gif or jpg graphical format, you're home free. If the last sentence doesn't make sense to you, you'll need to learn a bit about computer graphics, but don't fear. You don't need to know much and it will really benefit your site.

Line 7 cancels the centering. Line 8 actually starts your text presentation. I've removed most of the text to keep the article short, but left a few things worth discussing. Lines 9-10 use the <I>...</I> italics tags. All text between them is rendered in italics in most browsers. If you wanted to make the text bold instead, you would use the <B>...</B> tags. There are a number of other fancy tags available, but space prevents discussing them here. We're just getting you started, remember. Notice that the tag pairs can start in the middle of lines and can span multiple lines. The case of the tags is unimportant, also, but it's nice to be consistent.

Lines 11 and 13 are paragraph tags. You need these; browsers will ignore blank lines you put in your file. One thing to be aware of: browsers don't see your HTML code as commands so much as suggestions. The browser decides how to do things. There is technically a tag pair for underlining, but most browsers I've worked with don't honor it. You can use two <P> tags back to back, but you won't get two blank lines; you'll only get one. The specification for the World Wide Web doesn't give the author full control of everything, in the interest of compatibility with the widest number of computer platforms. This can be maddening, but good browsers are good at making what you do look presentable, even if it isn't precisely the way you want it. Generally, if you request something reasonable, it will look reasonable, but do remember that there are limits.

Line 14 leads into our other really important line: line 15. Line 15 defines a hyperlink. Hyperlinks are what the web is about. The text between the <A HREF>...</A> tags will show up highlighted and underlined in most browsers. When the viewer clicks on this text, the browser will access the site refered to by the HREF="..." field. This is the same URL format that you type into your URL line on your browser. It's that simple. Line 16 is a continuation of line 15.

In Lines 17-19, you finish up, define what the page is and the time it was last updated. You don't have to do this, but it's nice.

Lines 20-21 end the body of the document and the document itself.

If I had room, there would be a few asterisks scattered throughout this discussion, expanding on some things I've brought up. But in essence, this is a simple, working web page. As a matter of fact, by the time this is published, you can look at it at http://home.neo.rr.com/catbar/brain_candy/jenny.htm. It won't have any real info in it, but you can look at what this framework would yield.

Simple web publishing isn't hard. There's a lot more you can learn, but you can take it a bit at a time, at your own rate. If you have something to say, take advantage of the web. That's what it's there for.

More Brain Candy | Back to Brain Candy Central | Return to the CATBAR Main Page.

CATBAR - Brain Candy 8 - DIY with HTML / Brian Rock / Mar 22 1998