<< Return to Lab 1 Page

Your First Webpage Online

Overview

Instructions For Creating Your First Webpage

A Basic Start Using TextPad

Step 1: Open a text editor. Here I'm going to be using TextPad as my demonstration application. On one of the lab computers, you can get to TextPad from the Start menu by: Start -> Programs -> Office Suite and Utilities -> TextPad. This path is shown in the picture below.

Step 2: Opening TextPad should give you a blank document for entering text. Really, our HTML code is just text with some parts of that text happening to be known HTML elements. So, we can type in a simple webpage such as in the example below.

You can simply take the example HTML code below and then copy-and-paste it into your text editor's window.

<html>
  <head>
    <title> My First Webpage </title>
  </head>

  <body>
    <h1> My Very First Webpage </h1>

    <p> This is my first webpage.  I'll be making more soon.
    </p>
  </body>
</html>
    

Once you've got your HTML code pasted in, it's time to save your webpage document. When you do this make note of where you're saving the file to so you can find it to open it with a web browser. I'm saving to the computer's desktop. Also, be sure to name the file something ending in ".html" (or ".htm" if you really prefer). I'm choosing "webpage.html". None of the other TextPad settings for file saving should matter so just leave them at their default settings.

With the file saved, you should now be able to find it and open it with any web browser. On a Windows XP machine, you should probably be able to just double-click the file's icon and it should open in a web browser (which happens because you used a ".html" or ".htm" file name extension). If that doesn't work just open a web browser and go to the menu command "Open File" which is usually found under the "File" menu.

With your HTML file opened in a web browser, the result should look something like the image below. Notice that the url displayed in your browser starts with something like "C:" or "file:" instead of the usual "http:". That's an indication that this HTML document is located on your local computer instead of somewhere out on the web where anyone with a web browser could find it.

Extra Fun: Getting Your Webpage Posted On The Web

To post your webpage on the web where anyone can see it, we simply have to store our .html file in the right place. Duke has provided each student with some space online to post webpages, so saving to the correct folder is all it takes.

Going back to our TextPad application, I'm now going to choose the "Save As" command to save to a new location. Under the "My Computer" option from the icons on the left, I'm going to find the folder option that starts with my Duke ID. For me that's "sgs6". This is getting to your acpub account provided by Duke. You can do more with this than post webpages (like storing files to transfer them or create backup copies), but webpages' are all we're using it for right now.

Inside my "acpub" folder, I'm now going to open the "public_html" folder. Anything saved in this folder is made available on the web. The url is unique for each student, again making use of their Duke ID. For now, just store your .html file inside the "public_html" folder.

With the file saved, we're now ready to view it on the web. After opening a web browser just go to your own web space provided by duke. The url is: www.duke.edu/~DUKEID. The only difference is that DUKEID should be replaced with your own Duke ID.

After doing that, you should see a file directory at that web url. Your directory likely only has the 1 file that you just saved there. Click on that link and it should take you to your webpage. Congratulations: you've just gotten your first webpage posted online.