First Page
Credits

You want detailed instructions on how to make your webpage using HTML code, with step-by-step details.

If you're interested in putting together your webpage using pure HTML and you're not so familiar with HTML commands and its ease of use, this section is put together so that step-by-step instructions for putting together your Expo Webpage with HTML instructions included.

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>

The only part of the code you need to change here is in the highlighted green portion shown above, where the line reads "<meta name="Author" content="Yourname">. Change YourName to the name of the QB company for your project. Everything else should stay the same.

After the head, the next part of blank.htm should read like this:

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

With this particular segment of code, let's dissect a line a little closer:

<body text="#000000" bgcolor="#999999" link="#FFFF99" vlink="#FFCC00" alink="#FFCC00">

This line of code tells the computer what colors are the default for your QB Expo page. To keep the look of all the QB Expo pages in a sort of uniform manner, you shouldn't change the colors set for Links, Visited Links, and Active Links (link="#FFFF99" vlink="#FFCC00" alink="#FFCC00"). However, the two other color settings are free for you to change, particularly the segment of this line of code that deals with body text and background color. Specifically, you should change the highlighted green section above to the color of your choice.

But how do you choose a color? Well, in HTML colors are written as 6-digit hexadecimal codes. That means each digit in the code can be assigned a number from the set 0,1,2,3,4,5,6,7,8,9,A,B,C,D,E,F in order of intensity from least to greatest. For example, here's a sample of some various color codes you can use and how they would look.
 
 

#000000  
#333333  
#666666  
#999999  
#CCCCCC  
Color intensities for 6-digit hexadecimal codes.

Now, the first pair of digits for the hexadecimal code stand for the amount of red intensity that the color you choose will have. The second pair of digits stand for the green intensity that your color will have, and the last pair stands for the blue intensity of the color you choose. An example of some red, green, and blue colors are shown below:
 

#CC0000  
#00CC00  
#0000CC  
How to get red, green, and blue using 6-digit hexadecimal codes.

Blending various red, green, and blue intensities will get you all the other colors of the rainbow. For example, to get yellow, you blend red and green intensities in equal quantities. To get orange, try #884400 or any other combination where you use about twice as much red intensity as you do green intensity. Adding blue intensity to the reds and greens will give you colors like purple or pink.

You're now ready to change the colors in the highlighted green portion of the line

<body text="#000000" bgcolor="#999999" link="#FFFF99" vlink="#FFCC00" alink="#FFCC00">

...to the color intensities you want!

You should probably save blank.htm now. Don't change the name of blank.htm because the QB Expo sponsors need to quickly retrieve your files later, and will probably use blank.htm as what we think is your final product. If you feel that you've messed up blank.htm beyond repair, simply unzip devkit.zip again and start from scratch.

After you've saved, refresh blank.htm on your browser window just to see if the colors you chose are pleasing to you. Remember, you can only see the results you've done in working on your site so far if you first save your page in your text utility. In the meantime, experiment a little bit until you're happy with the color scheme you've chosen for the background of your page and the body text (the default color of all your fonts).


Whew... that was a lot of work, wasn't it? Well, it's okay if you take a little break here. Remember, you can keep a steady pace in making your Expo page a reality, and your brain needs a rest every now and then, especially since you're dealing with writing code in a language that you're not really that familiar with yet! But once you're ready, we'll really get down to the nitty-gritty.


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

The third segment of blank.htm consists of your left sidebar. 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>

There are quite a few things that you can manipulate here, so let's with it from line to line starting with the line you can manipulate at the very top of this segment of code:

<td VALIGN=TOP BGCOLOR="#666666"><img SRC="blank.gif" height=100 width=160>

The color code in the section (<td VALIGN=TOP BGCOLOR="#666666") controls the color of the left sidebar. For example, the color of the left sidebar in test.htm is green. Change this color to the color of your choice.

The section (<img SRC="blank.gif" height=100 width=160>) has three highlighted things you can change, and they're all for manipulating the screenshot that will be shown on the upper left of your homepage. To get your own screenshot into this area, you should place your picture file in the same directory as where you unzipped this site devkit. Then, simply replace blank.gif with the name of the picture file you made.

Now to give the picture you imported some dimensions. That's what the code height=100 width=160 is written in for you to manipulate. If you want your picture to be longer or shorter up and down, increase or decrease the height value. If you want your picture to be wider or narrower left and right, increase or decrease the width value. Remember though, that screenshots on the left sidebar can not have a width greater than 200.

The final line of the left sidebar code consists of the following:

<br><font face="Arial,Helvetica"><font color="#FFFFFF"><font size=-1>Sidebar</font></font></font></td>

There are quite a few things that are free for you to manipulate here, and they all involve the text that makes up the left sidebar. The first section of this line, which reads "<br><font face="Arial,Helvetica">", is the font type for the text in the left sidebar. You can replace Arial,Helvetica with another font name if you are familiar with them. The following are a list of common font faces, along with how they look like:

<font face="Courier New,Courier">
<font face="Times New Roman,Times">
<font face="Impact">
<font face="Architecture">
<font face="France">
<font face="Arial,Helvetica">
<font face="GALLERIA">
<font face="Verdana">

There are many other fonts, but there are simply too many to list in this devkit... however, these nine different fonts should give you a head start. Simply choose the font face that you like and replace Arial,Helvetica with the font type you prefer. For example, if Galleria looks like a better font for you, then after the replacement the line of code should read

<br><font face="Galleria"><font color="#FFFFFF"><font size=-1>Sidebar</font></font></font></td>

Now, the section <font color="#FFFFFF"><font size=-1> deals with the color and size of the font that will be used in the sidebar. You're already familiar with how to change the color for the font. To make the font size smaller, make the font size an even smaller number like -2 or -3. If you want the font size at the left sidebar to be bigger, use a positive number like 1, 2, or higher.

Note: This is probably a good time to save blank.htm again.

The next thing to talk about is how you can write stuff into the left sidebar. The section that reads as "Sidebar</font></font></font></td>" is where you can insert text about your game or links to download your project from the QB Expo if that's applicable. First, let's deal with writing some text. Replace Sidebar with some catchy phrases that summarize the unique features of your game. For example, if you want the features for your project to sound something like "This is simply the greatest QB game ever made." (and you are free to make this propaganda), the newly written code should read like

<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>This is simply the greatest QB game ever made.</font></font></font></td>

Now is a good time to talk about different things you can do to text while you're writing it out. There are three fundamental commands that you can use to change the style of the font you use. The command <b> automatically bolds the text until the bold is turned off by the command </b>. For example, if I replaced the red code above with <b>This is simply the greatest QB game ever made.</b> the text in the sidebar would look like

This is simply the greatest QB game ever made. (bold)

instead of 

This is simply the greatest QB game ever made. (unbolded)

Other commands you can use to manipulate text style include <i> and </i> (italicization) or <u> and </u> (underlining). There's another important command, which allows you to write a new paragraph. This command is called <br>.

These are a lot of commands to manipulate text. How does it look like when you mix all of these commands together? Just for the sake of discussion, let's say the section of code that reads  <b>This is simply the greatest QB game ever made.</b> to something that looks like this:

<b>This is simply the greatest QB game ever made.</b> I couldn't believe just how many levels of gameplay I programmed into this game. I am the <u>best</u> programmer in the whole world, and this QB game of <i>ultimate <b>excellence</b></i> defies all the limits.<br>If you have to download one game from the QB Expo, this is the game <u>to download</u>.

Then the output that will be shown when you view your page at the left sidebar will look exactly like this:

This is simply the greatest QB game ever made. I couldn't believe just how many levels of gameplay I programmed into this game. I am the best programmer in the whole world, and this QB game of ultimate excellence defies all the limits.

If you have to download one game from the QB Expo, this is the game to download.

So, so far you've learned how to change text style, size, and type. But now it's time to learn about how to turn your text into Internet links! As you well know by now, Internet links allow people to click to other web pages or download files from the Internet. Thankfully, constructing one is as easy as changing text style!

To make a link to another webpage, you need the commands <a href> and </a>. These two commands allow you to declare a link to another webpage. Here's an example of how to use <a href>. Consider the following code that sets up a link to blank.htm:

<a href="blank.htm">Click here to check out the Expo Page under construction!</a>

The output should form a working link like the one below:

Click here to check out the Expo Page construction!

If you click on the link, you'll be sent straight to your Expo page since the last time you saved it. It works like a charm! Try clicking on it yourself; just make sure you press back on your browser to return to this tutorial.

So now you know how to make your Expo Page link to another page, which will come in very handy during the explanation for the right column, which is the third component of every QB Expo page. But let's take a look at some more things that you can do with <a href>.

In the blue sample code above, <a href="blank.htm">Click here to check out the Expo Page under construction!</a>, the "blank.htm" is the name of the file that the link will refer to. Basically, if the file you link to has an extension of .htm or .html, your browser will assume that you want your link to lead to another webpage. But, if you have an extension of .gif, .jpg, or other graphic file formats, your browser will go to a page that shows the graphic file by itself. You can use this technique to show screenshots on the left sidebar.

For example, if I wrote

<a href="expo.gif">Click here to see the 2000 QB Expo logo</a>

in HTML, I would create a link that would allow people to view the 2000 QB Expo logo. The link would look like this:

Click here to see the 2000 QB Expo logo

Another thing you can do with <a href> is allow people to download your product. Generally, if you make a link to a file with an .exe, .bas, .lib, or .zip extension, your browser will automatically prompt you to download that file. This is how you get people to download your game.

For example, if I wrote

<a href="mygame.zip">Click here to download the best game in QB</a>

in HTML, I would create a link that would allow people to download the file "mygame.zip". The link would look like this:

Click here to download the best game in QB

By the way, the link shouldn't work because there is no "mygame.zip". This leads to a very important point... make sure you check all your links to make sure they work!


Okay, so now you know how to mess with all kinds of text on your sidebar. Now let's go talk about how to get the left sidebar further individualized through the use of pictures or images.

<img SRC="blank.gif" height=100 width=160>

Remember this line of code? This is how you can import an image to Netscape. Well, making a screenshot like this into a picture link can be done the same way as making a text link:

<a href="blank.gif"><img SRC="blank.gif" height=100 width=160></a>

The code, with the added red code shown above, will yield this output:

Click on the "screenshot" and you will link with blank.gif, allowing you to see this screenshot up close and personal.

There's one last thing you can do with images. If you've ever been around the web, you've probably noticed that some websites use images as backgrounds. You can change images into backgrounds by using the background command, which looks like this:

background="yourpic.gif"

where you can replace yourpic.gif with the name of the file that you want to use as a background. This sounds simple enough, but where do you put this code to make an image background? Well, that depends.

Let's take a look back at the second part of the Expo code, which looked like this:

<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 part of the code that's highlighted in green is what we're concerned about, because it's here where you can add an image as the main background of your Expo page. Use the background command as shown:

<body text="#000000" bgcolor="#999999" link="#FFFF99" vlink="#FFCC00" alink="#FFCC00" background="yourpic.gif">
&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>

Adding the background command in a similar manner will allow you to give a background to the left sidebar, as shown below:

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



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

With all your newfound knowledge ot HTML from the monstrous left sidebar, this third and final part of your Expo page should feel like a breeze. The right column involves what us QB writers do best: talk about our projects =)

The code for the right column, which immediately follows that of the left sidebar, looks like this:

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

There are quite a few things you can change in this section, but a lot of things are set in stone. The parts of this code that you are allowed to change are highlighted in green. By now you should be able to look at blank.htm and find out what each section of green text in the right column code is responsible for, so there's no need to discuss about these things. Besides manipulating the green text, you can also add more HTML code any way you wish, since it is your Expo page and you should be free to some creative energies.

What we should talk about is the orange text, which is basically where you can put the text that describes your game. What information you're supposed to place in each of these areas are described more thoroughly below.

Note: This is probably a good time to save blank.htm again.

<td><b><font face="Arial,Helvetica"><font color="#FFFFFF">Game Title</font></font></b>

In this section of code, replace Game Title with the name of your game. (Example: Raven: The Yoyo Comamndo)

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

In this section of code, replace Name of your Company with the name of your coding group. (Example: V Games). Then, replace the two instances of http://yoursite with the URL or site address of your website (Example: http://www.qb45.com).

If you don't have a website, you can remove the link that leads to a URL by omitting the red portion shown below:

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

The modified code should look something like this:

<br><b><font face="Courier New,Courier"><font color="#FFFFFF"><font size=-1>Developer:
Name of your Company</font></font></font></b>

After the name of your company, the next section of code is for people to have access to your e-mail:

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

If you would like people to have access to your e-mail address, replace the two instances of your e-mail with your e-mail address (Example: mhoopmann@hotmail.com). If you don't have an e-mail address, or if you're unwilling to share your e-mail address, omit the red portion shown below from this section of code:

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

(In other words, remove the entire section.)

After your e-mail address, the next section of code allows you to explain the genre of your project.

<br><b><font face="Courier New,Courier"><font color="#FFFFFF"><font size=-1>Genre:
1-Player Platform Game</font></font></font></b>

Depending on what your project is, you can 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.

After the genre section of the code, the following section of code allows you to show the projected release date of your project:

<br><b><font face="Courier New,Courier"><font color="#FFFFFF"><font size=-1>Release
Date: Month Year</font></font></font></b></td>

For this part of the code, 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.

After the release date information, the last part of your game summary is the company logo:

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

For this section, replace vilogo.gif with a picture file name of the logo your company uses to promote your projects. Make sure you adjust the height and width settings so that your logo is to scale. Generally, you also want to make sure that your logo isn't so big that it suffocates the rest of your Expo page... anything smaller than 80*80 should be fine.

If you don't have a logo and you're not interested in making one, you can substitute vilogo.gif with the button or banner you usually use for people to link to your site. If you don't have either of these and would not like a logo graphic to show on the upper left corner or your page, omit the red section of code shown below

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

and the logo code will be removed.

Note: This is probably a good time to save blank.htm again.

The final part of the Expo Page is finally upon us! In the summary of your project, you get to 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.

The code for your summary, which follows the logo code, should look like this:

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

Now, see the orange code shown above that reads Project Summary? Replace this section of code with a series of paragraphs that explain your product. Don't be afraid to use <b>,<i>,<u>,<img src>,<a href>,<br>, and everything else you learned from the lessons about the left sidebar to strike even more attention to your project summary!

An example of a project summary written into the summary code is shown below as reference:

<p><font face="Arial,Helvetica"><font color="#FFFFFF"><font size=-1>Ever wanted to play Hopscotch but never had the chance? Now you're given the chance to play Extreme Hopscotch thanks to a combination of QB, IPX connection, and the latest in ASM library technology! You'll be able to do battle with 6-8 players in a Hopscotch Mania. Are you ready for the challenge? Then get ready to play Hopscotch Mania.<br>Hopscotch Mania features forty levels of endless jumping action, with tricky one jump and two jump combinations. Roll the die to see which spaces you must hop over entirely for extra challenge! Hopscotch Mania is especially fun with extra friends, who can compete or cooperate with you. For extra mania, try playing the three-legged hopscotch mode!<br>The best part about Hopscoth Mania is that updates are always available on the Internet through the company website at <a href="http://www.doesnotexist.com> doesnotexist.com!</a>So come on down for some rootin'-tootin' fun! </font></font></font></td>
</tr>
</table>
&nbsp;</td>
</tr>
</table>

</body>
</html>

So that concludes our tutorial about how to put your Expo Page together using pure HTML. There are a lot of interesting things you can do to your site, like throw in some Java applets or perform all other sorts of crazy stuff. But this is where the HTML tutorial ends. My best advice to you is that if you want to know more about how to do some of the things you may have seen on other websites, simply View the source of some HTML pages while you're surfing the net. You'll be surprised... chances are you'll begin to understand a lot of the HTML code that you couldn't before.

I hope you found this HTML explanation of how you can make your Expo page to be very beneficial not only for the development of your Expo page but for the refinement of your HTML skills as well. There is also the option, if you feel that this HTML tutorial is not sufficient, to either make your QB Expo page using Netscape Composer or other utility or to simply let one of our sponsors design your QB Expo 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 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.