 |
|
 |
|
 |
||||||||||||||||||
|
Opening and Starting your HTML page It's important that when you start you have what you plan to use as your html editor. Most common people will use things like "Notepad" As their HTML editor. I'm using Notepad right now, as it is a no frill easy load and easy interface for typing out my code. There is no need for MS word or Corel Word in this situation. Simple Notepad or even wordpad will do the trick nicely.So open up notepad, and we'll begin with opening our HTML tags. HTML stands for Hyper Text Markup Language. When opened the document becomes a "HTML" document. <HTML> Now that the tag is opened we can begin with our editing. At the end of the document, at the VERY end you will have to close the tag. </HTML> Setting Page Titles / Header tags. But for now we need to get to our head tags. Our head tags will prevent what we type in the "Header" part from being on the actual webpage, most often the header tags are used to create a title for the page, meta tags(Useful for Search Engines to index your site), and to link to style sheets or create style sheets. We're not talking about Style sheets in the beginner level but later lessons will discuss them. We'll start with opening the header tags. <head> And then once we get all our information in we'll close them. </head> It's important once again to close our header tags, as we don't want the computers to get confused with the information. Inside our header tags we're going to set the page title. The page title is what shows up in the top bar of your browser. If you look up at MiD's it says Currently "Version Scanning Darkfyre" And then the browser type follows. (At least in IE it does) So within our <head> and </head> tags we're going to add something new. <title>Version Scanning Darkfyre</title> So now we have something that looks like this. <HTML> <head> <title>Version Scanning Darkfyre</title> </head> </HTML> And it would give us this 
Body Tags and Setting Backgrounds Next we're going to create the actual body to the page. The real part where all the content goes.So let's start by opening a simple body tag <body> This is a simple body tag that will start your document. The default background color on computer is white, the default text is black, so it will assume this is the colors you want for your site. It is always better to set them, but before I forget, lets remember to put the closing tag in. So just above your </HTML> let's add: </body> So our document should now look like this: <HTML> <head> <title>Version Scanning Darkfyre</title> </head> <body> </body> </HTML> In between the two <body> tags, you can add in your content. Anything you type will show up on your site. (Even stuff in the header tags that isn't given the porper tags to go with it.) So lets set the page background color, and text color.
Now since everyone loves to set background images as their background we'll show how to do the background image.
Fixing the Background Commonly people ask, how does your content and images hover overtop of the background? or How can you make it so my background doesn't move?" And well the answer is a simple addition to the "Body" tag.So for starters we want to grab our Body tag <body bgcolor=black background="bg.jpg" text="White"> Then to this code we're going to add bgpoperties=fixed So the total code should look like this: <body bgcolor=black background="bg.jpg" text="White" bgproperties=fixed> For an example of what this looks like, scroll. I'm using it on MiD. The layout hovers overtop of a fixed background. If you notice the words in the bg never move. Page Margins Around the outside of a webpage there are page margins. Now, whenever I do a layout I find that I'll take out the top, bottom, right, and left margins in order to have my pictures at the very top and not have them shifted over.Page margins are often set to 5px each. So I'll show you how to change them Once again we're going to grab our body tag: <body bgcolor=black background="bg.jpg" text="White" bgproperties=fixed> Then to this code we're going to add topmargin=0 leftmargin=0 rightmargin=0 bottommargin=0 To change the margins you simpley need to replace the 0 with the number you want. Margins are changed in pixels so feel free to just play around with the numbers. Now if we wanted them all set to 0, which is a common thing for me to do, the code would look like this: <body bgcolor=black background="bg.jpg" text="White" bgproperties=fixed topmargin=0 leftmargin=0 rightmargin=0 bottommargin=0> They don't have to be in that exact order, they can go in any order you want them in. Once again an example of this would be hard to create, but basically there is no blank space to the right, left, top and bottom of the layout, the layout fits to the enter window. |
