Basic Webpage I
Saturday, June 14, 2008
Written by Jonathan, aka. Joa's awesomeEdited by Joa, the
So you wanna learn HTML now? The crappy prebuilt free templates not working for you? All of your friends too busy to design for you your 10325598756th website? Maybe it's time to stop being lazy and learn some HTML yourself. Of course, the website might look ugly at first, and the coding won't be a piece of art either, but with practise and lots and lots of trials-and-errors and the proness of me guiding you on your way xD you're sure to be able to finally make a masterpiece, which you can truly call your own.
First of all, you need a text editor program. For the windows user, you have the built in all-powerful mighty god of Notepad. You can find it in Start-->All Programs-->Accessories. For the Mac users, you have the more generic textedit. Many advanced coders like to use external programs, such as dreamweaver or frontpage, but you don't need them for now...
To avoid the very common and annoying issue of applications crashing, first save your notepad file. You can save it as anything.html. MAKE SURE IT ENDS IN .html!!!
Then, copy and paste this following bit of code down. It'll serve as the basic framework for your webpage, and I will explain it later.
<html> <head> <title>Title</title> </head> <body> <p>Hello World! <!-- This is a comment --> </body> </html> This is a simplified version of the HTML framework. In actual HTML there are a lot of declarations and whatnot you have to go through... but its not important xD. Anyhow, don't forget to save regularly.
Then, copy and paste this following bit of code down. It'll serve as the basic framework for your webpage, and I will explain it later.
As you can see, HTML uses what are called tags. Tags are things that are enclosed in those brackets, <>. These are the things that tell the web browser what to do, and are not going to be displayed in your web page. As you can see, the first tag is the <html> tag. This tells the web browser that it's looking at a webpage made with html. Yes, there are other languages to code webpages in. No, I will not go into detail about them, because they will make your head explode. xD
The next tag is the <head> tag. The purpose of this tag isn't important for now. Within the head tag, there is another tag. That is the title tag, and it controls what shows up on that little blue bar at the top of your browser. Try changing the word Title to something else, saving, and opening your web page.
After that you might notice what seems to be another title tag, that looks like </title>. Tags come in two types; opening tags and closing tags. I'm sure you can guess which is which. Opening tags tell the browser when to start, and closing tags tell the browser to end. The opening title tag tells the browser that you are setting the title, and the close tag tells the browser that you are finished setting the title.
But since you can have one tag inside another, you have to make sure to close them starting with the inside one first. Like, right now you have <head><title>. In order to make sure the really stupid browser doesn't crash... you have to close them with the title first, so </title></head>. If you happen to type <head><title></head></title> the browser will die and you will forever burn in hell.
So now that you know how to manipulate tags, how do we display stuffs in the browser..... All of the things that will be displayed in the main part of the browser goes inside the <Body> tags. Notice that in the first line there is a <p> tag. That tells the browser that it's
the beginning of a paragraph. Of course, even if you don't use that, the browser will still display words. the <p> tag is a special one; like a few others, you
don't have to close it! Of course, nothing bad will happen if you do, but if you're really lazy like me this is a relief. Also, as you may have noticed, tags are not case-sensitive, so I could have just as well typed <bODy>. Now you can go type whatever you want after the <p> tag. Make it long, make it short, but its still going to be the ugly generic times new roman 12 point font xD. Ah well, lets finish with the formalities first before I teach you some basic design tags. Close the </body> first then the </html>. [sarcasm]You've now got yourself the best webpage ever! Hurray! [/sarcasm]
the beginning of a paragraph. Of course, even if you don't use that, the browser will still display words. the <p> tag is a special one; like a few others, you
don't have to close it! Of course, nothing bad will happen if you do, but if you're really lazy like me this is a relief. Also, as you may have noticed, tags are not case-sensitive, so I could have just as well typed <bODy>. Now you can go type whatever you want after the <p> tag. Make it long, make it short, but its still going to be the ugly generic times new roman 12 point font xD. Ah well, lets finish with the formalities first before I teach you some basic design tags. Close the </body> first then the </html>. [sarcasm]You've now got yourself the best webpage ever! Hurray! [/sarcasm]
You might have noticed something funny.... the <!--Comment -->. That's the comment tag. The starting portion is the <!--, and the ending portion is the -->. Within those boundaries, anything, I repeat, ANYTHING you type will be skipped over by the browser. That means you can leave little notes to yourself, to others, maybe hints for an online game, maybe some unfinished coding, and nothing will happen. Of course, don't forget to close your comments with -->. Too many times I thought my web page had dissappeared when all that had happened was that I forgot to close a comment tag.
Now go make your website, and go brag to all your friends about how proud you are of it, and gloat about it until you finally get bored of its genericness and boring black-words-on-white-background-ness. Then, hopefully I will have my next tut, basic effects, done. xD
Scrawled by,
Jonathanasdf @ 10:09 PM
on Saturday, June 14, 2008