Html Hints for SBI! Home Pages

Html Hints for SBI! Home Pages

Site Build It! does a lot, but getting the pages to appear just the way you want might require some extra work.

When I used the default home page builder, I got a headline that matched--whether by design or coincidence, I don't know--the color of my left, vertical bar and plain text for all the "body". If that meets your needs, then you're all set.

I, on the other hand, wanted a graphic at (or near) the top of my page. This was actually addressed in one of the users' forums that you get access to when you sign up with SBI!. In that case, they suggested putting spaces in the headline field to get past it, to put the graphic at the top of the "body" and to build down from there.

This is generally what I did, except I "juiced" things up a bit:

Instead of just putting in spaces, I used the headline field to put kind of a slogan at the top. I made the text smaller than it would normally be and I changed the color. I made some of the text in the body colored and in different sizes.
I made the trademark notation smaller where I could.
I put bullet points in front of listings. (Just like this!)
I added text descriptions associated with the graphics.
I linked a graphic to text.

Which is just great and real easy if you're an html pro, but what if you're like I was not long ago and don't know html; you just want to make a page? Well, just for you I've reproduced some of the coding for my home page. If you compare it to my home page and how it works, I suspect you'll be able to sort out what does what for your own use.

A few notes:

Fonts come in 7 sizes; 1 is the smallest.
There are four easy ways to gussy up text. Depending on the browser, some can appear the same or different.
- Bold
- Italic
- Strong
- Emphasis
I've discussed color a little further down this page.
The copyright symbol in the footer was generated by typing Alt+0169. I found this code in the "Symbols" area of Microsoft Word.
If/when you upload graphics, there is a field which shows the URL of the graphic once it is uploaded and a second field for an easily-identifiable, reference name. First, file names cannot have spaces. Second, they are case sensitive. Third, when you look to see what graphics are uploaded, all you see is the reference name. Since you need the actual file name to call it (including the extension), either keep track of the reference name vs. the actual name, or, as I did, make the two the same for easier use later.
The break lines on this page are made with a <HR> where they are needed.
And a forced return in a line of text, if you need one, is

I'm not saying that this is the best or only way of doing what I've done. It's just what I've done to get what I've got and I hope it helps you if you need the help.

(headline:)
Doin' D. C.(TM)--The board game that makes politics fun.

(body:)
<IMG SRC="http://www.niceideas.com/images/DC-Header.gif" ALT="'Home of the Doin' D.C.(TM) game' header">

What's Going On In Our Nation's Capital?

If politics makes for strange bedfellows, then who can say what's happening between the sheets in Washington, D. C.?

YOU can!

You are the best investigative reporter at the best newspaper in town--the MUCKRAKER--and you are ready to uncover (ahem) the truth no matter what it takes or who it...exposes. You are prepared to:
<UL>
<LI>Careen through town to secret rendezvous in well-known places.
<LI>Engage other players in verbal intercourse to ask penetrating questions.
<LI>Be the first to reveal the naked truth: Which two, prominent, D. C. residents have been "bunking" together, and where.
</UL>

<A HREF="http://www.niceideas.com/images/DC-Large.gif"><IMG SRC="http://www.niceideas.com/images/DC-Small.gif" ALIGN="RIGHT" ALT="Picture of the Doin' D.C. (TM) game"></A>You know there is a lot of stiff competition going in and that coming up with the winning proposition won't be easy. That doesn't matter to you. The people have a right to know what goings on are going on, and it's up to you to find out:
<UL>
<LI>You owe it to your publisher.
<LI>You owe it to your readers.
<LI>Most of all, you've got a mortgage and you owe it to your bank!
</UL>

You've got to be the first to know who's been...

...

Speaking of pieces in the game, what is included? (Here's a <A HREF="http://www.niceideas.com/images/DC-Large.gif">picture</A> of the Doin' D. C. (TM) game.)

...

<A HREF= "http://shop.niceideas.com">Order</A> your Doin' D. C. (TM) game now.

There are websites that teach html. I can't name any because I gained my rudimentary skills from a book and from the helpful hints area of Site Build It!. I do know that about the most flexible thing to use in creating a site is a "table". They are like spreadsheets where you can combine cells, then stick whatever you'd like into each cell--text, pictures, even other tables! Good for an array of pictures, for example.

About color...

I'll try to keep this simple. In fact, I'll have to keep this simple as whole books could be--and, I'm sure, have been--written on the subject.

Everyone will tell you not to go crazy with all sorts of colors on your site, but with all the colors to choose from (16,777,216 to be precise; we'll come to that), WHICH ONES? Here's a suggestion: Go to your closet and find something you like (a necktie? a party dress? a hat?) appropriate for the theme of the site. Use it as a basis for your site. (In my case, I was thinking "American flag".)

OK, with that settled, take a look at one of the color values in the coding above. Six characters long, yes. But what it really is is three sets of numbers, each two digits long.

Numbers? But the blue is 00 00 8B. What kind of number is that??

That is a "hexadecimal" number from base 16. You do remember your non-base 10 numbers, don't you? And are we having fun yet? Not to despair! Things will get very easy very soon. Just humor me a bit more and read a bit farther.

That means that numbers do not stop at 9; they continue six more places with A, B, C, D, E and F. I know they look like letters, but they're really numbers. (You've read farther; you're supposed to be humoring me.)

That, in turn, means that the two-digit numbers ascend like this: 00, 01, 02, 03, 04, 05, 06, 07, 08, 09, 0A, 0B, 0C, 0D, 0E, 0F, 10, 11, ...19, 1A, 1B, 1C, 1D, 1E, 1F, 20, 21, ...2F, 30, ...3F, 40, on past...99, A0, A1, ...A9, AA, ...AF, B0, ...BF, C0, ...to FE, FF. All together there are 16 X 16, or 256 different possible values.

Those two-digit numbers? They specify the amount of red, green and blue, respectively, in the final color. "00" is "none"; "FF" is "as much as possible". Consequently, 000000 is no red, no green, no blue. In other words, black. And FFFFFF is max red, max green, max blue. That's white. And any other color value that has equal amounts of red, green and blue is a shade of gray (or grey, if you prefer). See, for example, the 808080 in the headline.

Similarly, FF0000 is maximum pure red; 00FF00 is maximum pure green; and 0000FF is maximum pure blue.

Starting to come together? Good. I'll warn you though: Your monitor's idea of a pure color might not match yours. What values will produce which color is not intuitive, at least not to me. It is sort of entertaining to know the value for some color I'm looking at and see how the red/green/blue come together. (So OK, maybe I spend too much time in front of my monitor...but I DID say "sort of"....)

"All of which is great fun," I'm sure you're thinking, "but you promised 'easy' and I don't see anything like easy so far."

Yes, so far we have 256 values for each of 3 colors, or 256 X 256 X 256, or 16,777,216 possibilities. (That's where that comes from.)

But:

Under the best of circumstances, probably no one can see the difference between, say, 808080 and 818181 or 808081. Or between 00008B and 00008A or 01008B. You get the idea.
Many (most?) computer graphics cards cannot even try to create the color; they are just not made to handle all the possibilities. Instead they will "round"--if you will--the color to something they can handle.
Even if you could see the difference and your computer were made to handle it, the 00008B on your computer might end up looking like 00008A on someone else's.

Truth is, in the end it just doesn't matter all that much. All you can do with some measure of hope is to come close. In fact, there are allegedly only 216 colors that can be reliably reproduced and even that makes some assumptions about the capabilities of the browser and display system.

Do a search on the Internet for "hexadecimal colors" or "Internet colors" and you will quickly find your best options. (Mine are not among them as far as I could see. Mine are derived from the values for 140 colors that the Navigator browser was set up to use by assigned names. 00008B, for instance, is named DARKBLUE. Am I going to change that? No, not unless I hear it is causing problems.)

Got easy in a hurry, didn't it? I maybe could have told you where to look right away, but wasn't the diversion fun in the meantime? And besides, I bet by now you CAN'T WAIT to do that Internet search....

footer for Site Build It! page