Hogwarts Magic :: Where Anything is Possible!

Home
About Us
Affiliates
Job Openings
Contact Us
History of HM
Affiliation
Privacy Policy
Editorials
Trophy Hall
HM Forums
HM Galleries
HM Reviews
HM Awards
HM Email

Socerer's Stone
Chamber of Secrets
Prisoner of Azkaban
Goblet of Fire
Order of the Phoenix
Half-Blood Prince
Deathly Hallows
Other HP Books
Book Mistakes
Name Origins
Recipes

Socerer's Stone
Chamber of Secrets
Prisoner of Azkaban
Goblet of Fire
Order of the Phoenix
Contact the Cast
OoTP Trailer Page

Biography
Wizard of the Month
Official Site

Magical Decrees
Founders
Ghosts
Houses
Staff

Social Order
History of Magic
Quidditch
Ask Merlin
Wizard Money
Dumbledore's Army

Communication
Creatures
Transportation
Dark Arts
Animagus
Horcruxes
Spells
Wands

Azkaban
Diagon Alley
Leaky Cauldron
St. Mungos
Hogsmeade Village
Other Places

Ask the Webmaster
Helpful Websites
CSS Tutorial
PHP Includes
Hosting Guide
Photoshop Tutorials
HTML Tutorials

So you want to create your own website? If you want to create your own website, this tutorial will walk you through step-by step how to do it and do it good!

First off you will need an excelent, free website hosting company unless you want to pay i qould suggest Trap17

Next you will need an HTML Editor, this is super easy and any good computer will have one, you can simply open Notepad and use that! Start->Programs->Accessories->Notepad

Now we get to the actual HTML Part, Now that you have your free website host, and an HTML Editor, you can start with the rest of this tutorial

----------------
Step 1) Setting Your DOCTYPE
Setting your doctype is very important and it is the first thing that you should do when making a webpage. It should go at the very beginning of the page, before EVERYTHING on EVERY page. FOr a list of the Doctypes you can use go to W3.org
For this tutorial, you will need the most common one, which is: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

Step 2) Setting Up The Page
The next step is quite simple. There are three tags that are the basic Set-up to the page, and they are <html><head> and <body>
The <html> tag is used to tell the browser that this is where all of the HTML for the site's contents will be held.
The <head> tag is used to tell search engines and browsers what the title of your site is about, what the description of your site is, the keywords, etc.. stuff we will get into later.
The <body> tag is used to tell the browser that this is where the content that will be shown is going to be.
So it should be set-up like this:

<html>
<head>
HEAD CONTENT GOES HERE
</head>
<body>
MAIN CONTENT GOES HERE
</body>
</html>

Step 3) Setting Up The <head> content
Like i said earlyer, the <head> area is going to be used to tell the search engines and browsers what the site is about, etc. Some of the things that you need to put in the <head> tags, is:
The <title></title> tag - You need this tag because it will tell the Browser what to name the site if someone BookMarks it, or when it is listed on a search engine. You could just put the name of your site between the <title> </title> tags
The Mets tags - there are many meta tags, but the most important ones and the only ones you need to worry about are the Description and the Keywords.
Use <META NAME="keywords" CONTENT="KEYWORDS HERE SEPERATED BY A COMMA"> to list the keywords for your site, so if someone searches for Harry Potter and you have Harry Potter in your keywords section, your site will pop-up SOMEWHERE in that search listing.
Use <META NAME="description" CONTENT="DESCRIPTION OF YOUR SITE GOES HERE"> to tell the search engine how to describe your site when it list's it on it's search page.

Step 4) Adding Basic CSS
Open a new Notepad completley Blank, then copy and paste this code into it:
<STYLE type=text/css>
BODY {
}
A:link {
COLOR: #FFFFFF; TEXT-DECORATION: underline;
}
A:active {
COLOR: #FFFFFF; TEXT-DECORATION: underline;
}
A:visited {
COLOR: #FFFFFF; TEXT-DECORATION: underline;
}
A:hover {
COLOR: #808080; TEXT-DECORATION: none;
}
TD {
FONT-SIZE: 11px; COLOR: #FFFFFF; FONT-FAMILY: Verdana, Tahoma, Arial
}
</STYLE>

Now so to File->Save and when you are saving it, type in the file name for ex: css.css (include the .css a the end) and then right under where you put the file name in, make sure 'Save As Type' is set to "All Files' To change the color's of this you will need to get yourself a Hex Color Code Chart
Under A:link, you see COLOR: with this particular code, you can change the color of the links on your site, if you want to change the color of the links, then find the color you want to change it to on the chart, then copy the 6 digit number incuding the # sign and paste that where #FFFFFF is, so it says your number instead of mine.
Then you see TEXT-DECORATION: this is what the text will look like, for example, if you want it to have an underline, you put underline there.
You will do the same thing for the rest of them, A:active, is what the link will look like while a viewer is viewing the link, A:visisted is what the link will look like after they have visited it before, A:hoover is what the link will look like when their mouse hoovers over the link.
To change the color of the text you need to do the same thing where it says TD, you will see FONT-SIZE: and that is to change the size of the text, if you want to change the color, then change the #000000 to whatever color code you want the text to be.
Now save that file again and close it, remember where you put it though.
Now, you need to add this inbetween <head></head> tags: <link rel="stylesheet" href="css.css" type="text/css"> if you names the file something other than css, then change css to what you named the file, but leave the .css alone, otherwise it wont work correctly.