HTML Guide, by Kurt
Important: The code given will be displayed as-coded. Meaning you can copy and paste my examples directly into your page and they will work =) just replace with your text
Note 1: Always, ALWAYS preview your posts before utilizing HTML coding. I've been using HTML for 5 years and I still preview everything, because it's easy to slip up/B>. Like missing a brace (>< symbols) =) If that were a real mistake, the ENTIRE document would be bold-faced from there-on. If you want feedback/help/more codes, head to the Webmasters board and ask!
Note 2: Please, PLEASE be ethical in your use of HTML commands. Nobody wants to read bright green text on a white background for an entire paragraph. Think before you submit.
You don't need to use these links, but they are helpful if this get's long.
bold,Italics, Underlines, and Strike
Image Posting on 4K
Font Sizing, Coloring, and Typeface
Layout (Left, Center, Right-align, Lines, pre)
Links to advanced topics
bold,Italics, Underlines, and Strike
<B>replace with your bold text</B>
<I>or italicize it</I>
<U>or underline a title</U>
<S>or strike out text</S>
<I><U>or do combinations.</U></I>
... to do your own combinations, just be sure that you close(</B>) your tags in the reverse order that you open (<B>) them. such as:
<1><2><3>affected text</3></2></1>
^top
Image Posting
So you want images on 4K? There are three ways you can achieve this.
1. The Built-in image uploader - Mr. Four has built into the 4K system a simple, effective way to insert images into your posts. it's as simple as putting [img1], [img2], and so forth for as many pictures as you like. Each one costs $1 (4k$), and the limitation is that you can only upload images up to 30kb in size (that's small). It may have been expanded since I last attempted to use it. If so, please inform me! But last I checked, that was the size limitation.
2. A Free web-host - Many have lately recommended Photobucket.com, but if you Google "free Web hosts" or many variations you think of, you are bound to find about a hundred different ones. Have this and it allows hotlinking (linking from outside their website, eg, on 4K)? Then all you need to do is insert this code and you are set: <IMG SRC="http://www.yoursitesname.com/yourfolder/yourimage.jpg">. Replacing with your URL.
3. Your paid-for webspace with your ISP - Check if your paid service already gives you great, flexible space! It's as simple as calling your ISP (internet service provider) and asking, knowing in advance what your bill usually looks like (having an old one handy helps). Again, if you do, you just need to upload your image and link it, as shown in #2.
^top
Font Sizing, Coloring, and Typeface
Font Sizes are a touchy thing. You can use pixels denoted by px, centimetres cm, Header tags H1-H6, +/- x, or... something else as well. Generally, it's best to just use px pixel measurements and header tags.
<H1>text here</H1>Big Header
<H5>text here</H5>Big Header
Slightly advanced, but you will notice H1 will be different sizes in different pages. My H1 is smaller than other people's because I have a default text size smaller than the usual. It's a quirky thing, but generally if you want big and bold, H1 is your woman for the job (or man, or cat...).
Otherwise you will want to use <FONT SIZE="1px">this for really small text</FONT> or <FONT SIZE="8px">this for really big text</FONT>. Don't abuse this or I will be mad. Besides, the biggest you can go is 8px which I just showed you.
now for some color in your posts ?
You don't want to see the code for that! It takes effort, or a javascript. Check out the links at the end for a colour code though. And generally, just use this for coloring your fonts:
<FONT COLOR="green">text here</FONT>
^top
Layout (Left, Center, Right-align, Lines, pre)
To set an entire block of text to look a certain way, such as what I do with Ye Olde Ink Blot, simply create a division/section "DIV" in your page. If I remember to, I often use "Justify", which is like a newspaper, it spaces everything properly so there aren't those annoying "gaps" at the end of each line, but rather it "fills" the entire line, every time it can.
Notice the differences yet? Perhaps I should keep telling you, that you can set it to left align, right, or center. Further, if you use text inside tables or insert images, you can tell your text to be aligned with the top, middle, or bottom of the table or image. There, see the differences in the two paragraphs now? The top one being justified, the bottom one, not. Let's hope you see it, or in general can visualize it.
<DIV ALIGN="justify">your entire paragraph would go here</DIV>
<DIV ALIGN="center">you can also center text</DIV>
... but it is easier to just use <CENTER> and </CENTER>. They do the same.
More in terms of layout, you can separate text by inserting what are called Horizontal Rules, or lines, for short. It's a simple bit of code that requires no closing tag. Watch, these three lines of code created the above three:
<HR width="20">
<HR width="90%">
<HR width="90%" color="maroon">
Notice in the above, I first used a pixel measurement, then later specified I wanted to cover a certain percentage of the page, and color it.
Finally, you can use the <pre> tag to do preformatted text, where all spaces will be noticed. Note that you may be forced into odd typefaces, often Courier. Like this:
<pre>
like this? - - - >
this
=) .... =O
Good for quick, fake tables:
x | y
-------
1 | 1
2 | 4
3 | 9
4 | 16
</pre>
^top
Links to advanced topics
HTMLGoodies.com - A great starter. I learnt most off this.
HTMLGoodies.com Color Guide - I have this colour table bookmarked. You can use either the colour name, or the colour code preceded by the pound sign #FFFFFF (white).
The JavaScript Source - A good start on using other people's scripts, or designing your own.
WebReference.com - in-depth on most topics, especially DHTML
IPSwitchFTP tools - Great if you have FTP space.
OldVersion.com - IPSwitch's WS_FTP program never used to require registration. If you can't find the old version there, PM me.
Macromedia Dreamweaver - If you are lazy and want a software program to do it, then this is the one. I actually use it as a reference from time to time. Be cautioned if you want very specific results, it can often be tedious and easier to code. So, it's good to learn to code and make notepad your friend!
^top