Logo of the best adult webmasters' tutorials website.

First Web Page Tutorial

←... Adult Webmaster Coding Tutorial

My First Web Page...

Ok, so it's probably not your first web page. And it may not even be the first one that you hand coded. But, it may just be the first one that you hand coded where you actually understood what is happening.

Because if you stick with me for just the next few pages, you WILL have a complete understanding of what's going on. I promise!

On The Same Page...

For the purposes of this tutorial, I'm going to assume that you are on a PC running Windows XP and that you have Notepad for a text editor. If not, you'll have to make adjustments to what I'm telling you.

Most webmasters have a directory somewhere on the computer where they keep all of their websites. I do, and mine is called oddly enough, "Websites", which contains many other directories, one for each of my websites. So, inside your Websites directory (or whatever you call yours), make a new directory for the new website that you're about to create. So that we're on the same page, let's pretend that your new site is called "changrox.com" (I'm Chang, BTW) and name the folder accordingly.

All web hosting servers have a specific directory where the publicly accessible files must be stored. It may be called "public_html","www","htdocs", etc. It all depends on the software that your hosting company has installed on the server. My host uses "htdocs" so that's what I'm going to use. Feel free to use what your host uses, just remember that you need to change it to that when I refer to htdocs. So now, inside your changrox.com directory, make another directory called htdocs. This directory is where all of the files needed for displaying the website will reside.

Now, open Notepad and copy/paste the following code into it...

<html>
  <head>
    <title></title>
  </head>
  <body>

  </body>
</html>

Save the file as "index.html" in your htdocs directory, close it, then navigate to your "Websites\changrox.com\htdocs" directory.

Looking in your htdocs directory, you should now see an icon of your default browser named "index.html" If you wanted to edit index.html and tried to open it by double-clicking, it would open in your browser because it's not a Notepad file anymore (you saved it with the .html extension). To edit the HTML you have to right-click the file, then click "Open With" and "Notepad."

Troubleshooting...

If you see "index.txt" in your htdocs directory, you didn't save it with the .html extension. To save it as "index.html" in older versions of Windows, you MUST include the quotes around the file name.

If you right-click the file and don't see "Open With", try it again using SHIFT+right-click and it should appear.

So, go ahead and open index.html with Notepad (we're going to be using it some more). Then double-click index.html. A hand coded web page of your very own will open in your browser.

Ta-daa!

Ok, so it's just a blank page. But remember, it's ALL yours, no WYSIWYG! Click the link for the next lesson and we'll put something in it.


No WYSIWYG... →



Valid XHTML 1.0 Transitional Valid CSS!

© 2008 - 2011 fapmaster.com