Introduction Text Links Images Backgrounds Tables Colors Utilities and other tips

A few added comments and things... So at last you’ve come to the final page of my tutorial...it seemed interminable didn’t it? Well, you’ve got one last blurb to read and it is well worth your while. HTML file creation I recommend that when you’re making a web page, you use a word processor to check your spelling and grammar as you type. Just ignore the gripes it makes about the various tags you put in. DO NOT SAVE AS AN HTML FILE!! This will TOTALLY mess up your coding since the program will slip in it’s own stuff which may or may not conflict with yours. Open a text file (windows users just open up Notepad), copy the ENTIRE document from word or whatever processor you’re using (ctrl-a = select all, ctrl-c = copy) then paste it into your notepad window (ctrl-v = paste). Then, save it. I will ask you for a file name, put in whatever you like, but change the extension. It will have two choices, one will be as a .txt file, the other will be ‘All files’ make sure it’s on the latter of those two, then add ‘.html’ to the end of your filename and hit enter. This will save it as a file that uses your default browser to open and view. To EDIT it, right click on the file and select ‘open with’ then choose notepad. Slicker’an snot. Off site profile hosting As you probably know from reading the various comments in the message board, you have a limited space for your profile in the on-site character info page. This is why I opted to host my profiles on an off site location. There are countless free site hosts you can choose from. I happen to like 50megs.com because of the ease of sign up and use, not to mention the fact that I can put in whatever url I want and only have to deal with them adding ‘50megs.com’ to the end of it. The only problem with free web sites is they do not allow hotlinking of pictures. But that’s okay, just load your HTML file there and your picture and it will come up JUST fine. I’ve included a few sites below where you can find free webhosting. 50 megs.com I have a few sites on here, I recommend this place. It’s got it’s limits but it’s not a bad place to start out. Free Pro Hosting 50 megs of space, and 3 gigs of transfers allowed each month. Not bad. Great Now 100 megs of space, 1.2 gigs of transfer per month BUT only 40 megs a day (yeah, it’s not like you’ll be using all of it unless you load up, but still...) Zero Catch Pretty much the same as Great Now, so don’t get too excited. 125 mb.com 125 megs of space, and almost 100 GIGS of transfer a month! This place has caught my eye recently and I think I could get to like it, however, if they don’t like what you put up, they’ll delete it WITHOUT WARNING, so it may not be vore friendly. 1 ASP host 100 megs of space, and I don’t know how much transfer per month but if you plan on using them to spam people, you’ll wind up owing them $500. Alexus Media This one REALLY caught my eye!! UNLIMITED space and UNLIMITED transfer!! The transfer rate is 100mbps which ain’t too shabby! If you’re looking for a place to host pictures and LOTS of them, this place might be for you! Angel Towns 50 megs of space and unlimited bandwidth, however, max filesize of 900 megs. Not too bad, but eh, could be better in my opinion. Free Webspace.net This place is basically a search engine. I used it to find everything listed above. Things you need to look out for are tricks saying they’ll give you ‘this’ much space...IF you get a paid site...while the FREE one is only about 20 megs or so, and for the average user, 20 megs is more than enough. Not enough for me though, I want as much as I can get, which is why Alexus Media caught my attention, the only drawback I don’t like is that they won’t handle CGI-scripting (which was not mentioned in this tutorial) which is something I’ll probably be getting into myself when I have the skill to warrant studying it. Check their listings carefully before you dive in, make sure it’s what you’re looking for in a site. Online help Incase this tutorial did NOT answer your question or it just confused you even further, there are numerous HTML tutorials out there, I used EchoEcho.com as a reference to make mine. They also have tutorials on Java scripting with HTML as well as Flash and a few other nice things you might find interesting. More advanced HTML tidbits If you’re really wanting to learn more about HTML and the many many things you can do with it, give me a buzz and we’ll talk shop, but try to have an idea in mind of what you’d like to be able to do. This could include stylesheets, cgi-scripting, java embedding, java applets and their uses, flash media, and just about anything else your huggable little brain could come up with. Don’t be afraid to ask!! Quick and easy method to proportions Here’s how you do it, I’ll explain it then show an example. First, decide if you want to make the height or the width the round number (round numbers are easier to work with). Let’s say you pick height. So now you have two heights and one width while you have one to figure out. Multiply the first height by the second width and the first width by the second height. In this case, the second width has no value yet so just call it x, giving you a number times x. Divide that number into the multiple of the first width and the second height and you’re done. Yeah yeah, explaining is confusing so just look below. The text in white is al you really have to worry about. Use the legend on the left to help you as needed. I even included the algebraic simplification in case you get confused. If you don’t know algebra, just skip down to the bottom portion. One is for if you pick a round height, the other is for a round width. (Round in this case is like, 100 or 200, a simple, easy to multiply number.) h1 = height 1 w1 = width 1 h2 = height 2 w2 = width 2 h1/w1 = h2/w2 h1 * w2 = h2 * w1 (we’ll let x = w2) h1 * x = h2 * w1 x = (h2 * w1)/h1 h1/w1 = h2/w2 h2 * w1 = h1 * w2 (we’ll let x = w1) h2 * x = h1 * w2 x = (h1 * w2)/h2 Horizontal Rules...aka, Lines These are nice if you want to divide your page into sections. To put one in, you just use the <hr> tag. It has it’s own attributes but after what you’ve seen so far, I think you can figure out how to use them so I’ll forgo the examples here and just list them. Attribute Values What it does align= noshade size= width= left center right -void- n* n* n%** aligns the line to the left of the window aligns the line to the middle of the window aligns the line to the right of the window removes the shadow from the line determines the line’s thickness determines the line’s width (pixels) determines the line’s width (percent) * n is in number of pixels ** n% is percentage of the window’s size. I believe the only way to change the color of a line is with the <font> tag, simply use the color attribute and close the tag after the line. Little tricks of the trade There are various things you can do to make coding in HTML go more smoothly. 1. You can view a page’s source code if it has your interest and you’re wondering how they did something. This could be a good source of inspiration and trouble shooting. You could be stuck at a crossroads in your coding, see the exact result you want and just look at their source code. You do this by right clicking on the background of the page, then hitting ‘view source code’. Keep in mind, this may not work if it’s in a frame or something similar, just play around until you find the code you want to see. 2. Ask for help. Never be afraid to ask someone for help if you can’t figure it out yourself. 3. To keep yourself from getting confused, add spaces between various portions of your code to keep it all straight in your head. Some like to use comments which are indeed VERY handy! To make a comment, just put in <!-- your comment goes here --> and it will not be seen by the browser while still being present in the coding. 4. PRACTICE PRACTICE PRACTICE!!! Just like everything else in this world, you will get better with HTML the more you work with it. If you get stuck, take a break and come back to it later. 5. Try laying out what you have in mind on paper first, the number of pages you’ll have, the content on each, what images you’ll need, tables, no tables, things like that. PLANNING AHEAD CAN BE HELPFUL!! 6. There is endless documentation on HTML coding of all kinds. You can find various books on it at a local bookstore (albeit, they’re kinda pricy!) 7. Embedding a music file into your page. This has come under a lot of controversy in the chat lately. May people are putting in song files but setting them on autostart. It is by the very fact I have spent so much time on this tutorial that I ask you NOT TO PUT YOUR MUSIC ON AUTOSTART if you use this tag. <embed src="your song url goes here" width=200 height=20 autostart=false loop=true> As you can see, I even went to the trouble to size it properly for you. Yes, you can change that if you like. It works just like anything else that uses width and height. DO NOT CHANGE AUTOSTART=FALSE TO TRUE!! I WILL GET FLAMED FOR THAT!! Having your music start on its own is bad for those who are not on broadband. They have to wait until the music loads to view your info so just please...for the love of all that is sacred, just leave autostart off. When you’re faced with a problem in HTML, don’t let it frustrate you. It can end up being a massive ‘trial and error’ game. Just think of all the code I had to write for this tutorial!! I was checking it every time I finished a paragraph or table JUST to make sure I was getting it right. If I didn’t, I stopped my progress and worked on what was wrong. All in all, this tutorial took me about 20 hours to write, spread out over a few months. (real life gets in the way all the time) I’ve put a whole lot of work into this thing so please, use it whenever you need to! CONGRATULATIONS!! You made it to the end of my tutorial!! If you feel this has helped you out or that you’re just uber impressed with my work, feel free to donate to the cause!! It may result in more tutorials being written! This tutorial was written by Smokescale Aquatos Back to top