Styleswitcher-

HTML/CSS Guide

So, you've (switched over to/started a site using) HTML. Now what? This guide will show you how to build a site with HTML. (please note that when I am mentioning codes outside of text areas, I will be using [ ]. You actually do the code with < >)

Starting your page

To start a page, use this code. Where it says ENTER, take out that word and press enter on your keyboard.

Now, let me explain this. In the [title] tag, you put what you want to appear in the page margin. In CSS, look at my CSS section for what to put (coming soon).

CSS

I find it suitable to begin this section with a sample block of CSS (taken from my sand layout) and explain some of its components

a, a:link, a:active, a:visited
color: #7c4804;
cursor: pointer;
text-decoration: none;
font-weight: bold;
}
a:hover {
color: #FFFFFF;
}
h1 {font-family: verdana; font-size: 40px; color: #c98d40; background:url(http://img132.imageshack.us/img132/7255/sandh1ka2.png);
border:1px dashed #610D8D; text-align: center; padding-left: 2px;
}
h2 {font-family: verdana; font-size: 25px; color: #7c4804; background:url(http://img156.imageshack.us/img156/6117/sandh2tl1.png);
border:1px dashed #9145E6; text-align: center; padding-left: 2px;
}
#layout {
width: 900px;
border: 0px;
cellspacing: 0px;
cellpadding: 0px;
align: center;
}

From first observations, you can see that most CSS is arranged into blocks, separated by a line consisting of this character: }. The line begins with a line stating what section of the page it is you are changing the properties of.

The first block pertains to all forms of links (a is link because of the "a href" code, link is the standard unclicked link, active is a link currently being used, visited is a link that the visitor has already clicked, and hover (shown below) is a link which the mouse is currently over. After an area (the top line of a block) has been specified, properties of that area follow. In this block, the properties are color, cursor, text decoration, and font weight.

Skip the hover block and you'll find an h1 block. Headers (h1 through h6) are just plain text if not used with CSS, but stylesheets can give headers a whole new meaning with a background or text color. I won't go in great detail with the rest of the header block, as you can copy it and fill it in with your own specifications. To do headers, the code is [h#]TEXT[h#] (fill in # with any number 1 through 6).

The last block is an example of editing a table or div. You can easily cite a table or div in CSS with [table id="NAME"], [tr id="NAME"], [td id="NAME"], or [div id="NAME"]. In here, the properties are width (in pixels), border, cellspacing, cellpadding, and align (center, left, right, and other positions).

I know this guide didn't cover everything, but I hope you have a basic understanding of how CSS is organized by reading this.

Displaying Your Content

Now, let's do some basic codes.

If you press enter when making a website, it won't go to the next line on the actual page. Instead there's a code for that:

To make bold text like this, use this code:

To make italicized text like this, use this code:

To make underlined text like this, use this code:

Think you've got the hang of it? Now let's do font sizes and colors like this. In this code, if you only want size or color, you can take out either one.

Now let's do links and images. When putting a URL in either of these codes, if the URL is from your site, you only have to put the file name, such as url.htm. I'll show you the code for links first:

Now images:

Now to do image links, just combine the two:

To make slashed-out text ~~like this~~, use this code:

To make subscript text _{like this}, use this code:

To make superscript text ^{like this}, use this code:

I bet you're wondering how to make a text box thingy that I'm using right now. This is the code. Replace * with / because the real deal normally ends the text box.

Here is an example of scrolling text.
Blahblah
Now, the code for doing it:

More coming soon