Site hosted by Angelfire.com: Build your free website today!

HTML tutorials


Yes this is the only part of the website with a normal background!!! So deal with it!


Let's begin, these tutorials are in no particular order, and are specialized knowledge.

Space Character Tutorial
One really easy concept for web design which is so easy that most people just excuse it from their tutorials, thinking that nobody will ever need it, is literal white space in a website. The concept of white space is spacing out your code so any tutorial on spacing or white space focuses completely on how to space out your tags for readability and sometimes focus solely on the <br> and <P> tags.

In this case we're actually worried about adding spaces to a document. Say you need a border on a table and your text is way too close to the edge, or you need space between a graphic and text. This is very simple and is done with the &nbsp; character. This character means "no break space" but if used correctly, acts as a literal space

So lets say that you have the following:
It's the best fool!
Which in source is:
<img src="logo.gif"> <FONT size=5>It's the best fool!</FONT>

In this example you have all this space to the right that you need to fill up with your text, and the whole thing is pretty crowded when you use it on a normal website. The only real way to remedy this before this tutorial is in some rediculously pointless tables. But our newly learned &nbsp character can get us by this lightning quick!
    It's the best fool!
Lets look at the code behind this one
<img src="logo.gif"> &nbsp;&nbsp;&nbsp;&nbsp;      <FONT size=5>It's the best fool!</FONT>

As you can see this is a much simpler way to solve lots of problems with spacing. It has its limits but not as limited as you are without it. This character very well may cause different sized spaces in different fonts, so experiment before launching the big new corperate website.

Frame Corner Graphic Tutorial

O.k. so you're a concerned webmaster that has to add a small simple detail to make the site better

You've made your site into frames and picked your color scheme and everything looks nice, but still a little blocky. So let's add one of those simple little corner graphics! This is a heck of a lot harder than it sounds or should be or makes sense to be. First let's give a crappy drawing example of what you see:
Header frame
Menu
frame 		Main Frame
The problem is that your frames looks like a cubist production. It looks much like my earliest Quake II maps. So you make a simple little graphic that rounds off the edges. The problem is that the grapic you place in your new frame just keeps going off center, like so:
Header frame


/
Menu
frame 		Main Frame
The thing that nobody will tell you is that there's 2 more properties that go along with your <frame> tag. The properties are marginwidth and marginheight.

So when you create the extra frame for this little corner make sure you give the <frame> tag the properties marginwidth="0" and marginheight="0". This will allow the graphic to snap into place and look more like this

Now another problem also arises with this kind of situation, and that is when you put your corner.htm file onto a webserver, it will probobly format it and ad extra special characters in front of it, making it look more like this
Header frame 

  /
Menu
frame 		Main Frame
The best and easiest way to fix this, which NOBODY WILL EVER MENTION IN ANY TUTORIAL except for this one, because I'm nice, is to just link the picture directly.

Basically instead of
<frame src="corner.htm" name="corner">
Try using
<frame src="cornergraphic.jpg" name="corner">

Replace the cornergraphic.jpg with whatever graphic you are using.


So that should be that. I'll make these tuts as they come. Solong!