First Page
Credits

You want detailed instructions on how to make your webpage using HTML code, and you have some experience with HTML.

You're interested in putting together your Expo page using HTML code and you have some HTML experience to the point where you're comfortable with the language. This is good. We won't try to bore you with details about each HTML command then. Basically in this tutorial we'll look over the code, but only provide specifications. If you would like to have step by step instructions, click here for the full, step-by-step instructions.

Anyway, in my personal experiences I've noticed that working on a webpage is best when you can see your page as it is being formed. So the first thing you want to do is open two webpages on your current browser, test.htm and blank.htm. Both of these files are found on your browser. Load them up in separate windows from this one and maximize each window so that the features of each webpage can be seen in its full prominence.


A picture of test.htm, showing the top bar, the left sidebar, and the right column.

Test.htm is a sample Expo page, which shows all the main features that will be uniform in the QB Expo. As you can see, test.htm is divided into three sections. There's a bar on the top of the page (you don't need to worry about this). On the bottom of the top bar are two columns that consist of a left sidebar (where you can provide links that give people an opportunity to download or know more about your product) and a right column where a written overview of the product is provided.

If you'll notice, blank.htm looks very similar to test.htm except that all the tables have been emptied so that the page in itself is free for you to manipulate. Use a text document utility (like Notepad or Wordpad) and load blank.htm into that utility. If you've done it right, you should have the HTML code for blank.htm in the text document utility, ready for you to manipulate. Good! Now, let's take a closer look at how an HTML page is put together. If you're familiar with this part of the ball game, think of this as sort of a review.

First, let's take a look at the top of the HTML document. This part of the document is called the head of the HTML file, and contains some basic information about your page that will be used by Web Browsers and the like. It should look like this.

<!doctype html public "-//w3c//dtd html 4.0 transitional//en">
<html>
<head>
   <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
   <meta name="Author" content="YourName">
   <meta name="GENERATOR" content="Mozilla/4.7 [en] (Win98; I) [Netscape]">
   <title>2000 QB Expo</title>
</head>
<body text="#000000" bgcolor="#999999" link="#FFFF99" vlink="#FFCC00" alink="#FFCC00">
&nbsp;
<table BORDER=0 CELLSPACING=0 CELLPADDING=3 WIDTH="100%" HEIGHT="1%" >
<tr>
<td BACKGROUND="back.jpg"><b><font face="Arial,Helvetica"><a href="main.htm">Main
Page</a>&nbsp; <a href="faq.htm">Site FAQ</a>&nbsp; <a href="sponsors.htm">Sponsors</a></font></b></td>
</tr>

The green sections of code are the parameters you are allowed to change in the head. You're also free to add a background instead of using a color background if you wish.


A closer look at the left sidebar in test.htm.

After the head, the next part of the code is the left sidebar code. The left sidebar is where you can place links to all the media that you want people to see of your project. This includes the location where a download of a beta or finished copy of your project can be located. Other suggestions include links to screenshots, movies, and URLs to your site or related links.

The code for the left sidebar in blank.htm looks a lot like this:

<tr>
<td>
<table BORDER=0 CELLSPACING=0 CELLPADDING=5 WIDTH="100%" >
<tr>
<td VALIGN=TOP BGCOLOR="#666666"><img SRC="blank.gif" height=100 width=160>
<br><font face="Arial,Helvetica"><font color="#FFFFFF"><font size=-1>Sidebar</font></font></font></td>

Again, you're only allowed to change the green sections of code while customizing your Expo page. The green section above with the term Sidebar should be replaced with links to media and whatever else your heart desires. You can even insert extra sceenshots in this area if you wish. A particularly nice thing to include in the left sidebar if this applies to you is a link that will allow people to download your project.



The right column includes two components: the game description and the game summary.

After the left sidebar, the next and final thing you want to modify is the code for the right column:

<td VALIGN=TOP WIDTH="100%" BGCOLOR="#666666">
<table BORDER=0 CELLSPACING=0 CELLPADDING=0 WIDTH="100%" >
<tr VALIGN=TOP>
<td><b><font face="Arial,Helvetica"><font color="#FFFFFF">Game Title</font></font></b>
<br><b><font face="Courier New,Courier"><font color="#FFFFFF"><font size=-1>Developer:
Name of your Company <a href="http://yoursite">(http://yoursite)</a></font></font></font></b>
<br><b><font face="Courier New,Courier"><font color="#FFFFFF"><font size=-1>E-mail:
<a href="mailto:your e-mail">your
e-mail</a></font></font></font></b>
<br><b><font face="Courier New,Courier"><font color="#FFFFFF"><font size=-1>Genre:
1-Player Platform Game</font></font></font></b>
<br><b><font face="Courier New,Courier"><font color="#FFFFFF"><font size=-1>Release
Date: Month Year</font></font></font></b></td>

<td><img SRC="vilogo.gif" height=51 width=50></td>
</tr>
</table>

<p><font face="Arial,Helvetica"><font color="#FFFFFF"><font size=-1>Project
Summary</font></font></font></td>
</tr>
</table>
&nbsp;</td>
</tr>
</table>

</body>
</html>

In the right column, as usual you can modify the green sections of code to help customize your page. The orange sections of code denote information that you need to change to make your Expo page accurate to you and your project. Omit any sections above that don't apply (for example, if you don't have your own website, if you don't have your own e-mail, etc.) For the genre section of the right column, replace 1-Player Platform Game with anything from 1-Player RPG, 1-2 Player Space Shooter, QB Library, QB Tool, or whatever else deems your project appropriately.

For the release date of your project, replace Month Year with the month and year that you decide to release your project. (Example: August 2000). There's only one rule here, though. If you're releasing your project or a beta at the same time as the QB Expo, write July 2000 (Downloadable at Expo) so everyone knows that your project is available to download at the Expo.

Finally, replace Project Summary with a summary of your project. Basically, just talk about your game, tool, library, or utility and just how great it is! Try to talk about features that make your project in particular prevalent. Remember, this is your chance to inform everyone about what your stuff is all about. Three paragraphs will probably put you in great shape.

So that concludes our tutorial about how to put your Expo Page together using HTML. This particular cut of the HTML tutorial did not go deep into each of the HTML commands, but the assumption is that you are comfortable with HTML and can easily read the code in blank.htm. If this is a bad assumption, a more thorough HTML tutorial is included, with step-by-step instructions. There's also the option of finding out how to put your QB Expo page together using Netscape Composer or other composition tool, or letting one of the QB Expo sponsors design your page for you.

Do you feel that you're ready to develop your own QB Expo page?

Yes, I am ready to make my own QB Expo page using HTML code.

No, I want more detailed step-by-step HTML instructions so I can edit my page.

No, I would rather make my QB Expo page using Netscape Composer or another composition tool.

No, I would rather have one of the QB Expo sponsors design my webpage.