How to Publish Your Web Page

Once you've created your first page, you need to upload it to your web host so that it's accessible to anybody connected to the internet. The method for doing this will vary depending on the tool (if any) that you used to create the page, and your web host. The example we're going to give in this section is based on the NVU editor and Bluehost, but if you're using other tools or hosts, the overall process should be pretty similar.

If my page didn't include any picture or other graphics, then I could just save it as an HTML file (using File -> Save or File -> Save As), and then upload that file to my website using the File Manager from the Bluehost control panel. In this case, however, since my page includes pictures, it's a little more complicated, and there's a better way to upload it.

If I go to the bottom of the NVU screen and hit the Source button, the HTML code for my page is displayed.

Shows the HTML code for the sample web page.

The part that's highlighted shows how HTML handles images. This part begins with a tag indicating that an image is to be inserted into the page (“<img”), gives some data about the image (it's size and position etc.), and then gives the path to the file where the image is located.

As you can see, this path is to the location of the file on my computer. So, if I just uploaded the web page as it is, it would work on my computer because the image would exist in that location, but it wouldn't work on anybody else's computer.

What I need to do to overcome this is to upload both my web page and the images it references to my website, and also to change the path for his image so that it references the copy of the image uploaded to my website rather than the copy on my local computer.

While this may seem like a complex process, tools like NVU support a Publish function which does all of this in one go. To invoke this, I select Publish or Publish As from the File menu.

Shows how to publish a web page.

In the Settings tab, I need to fill in the following:

  • Site Name: The name you want to give to your website.
  • HTTP address: The web address of your site.
  • Publishing address: The publishing process uses the File Transfer Protocol (FTP) to transfer files to your web host. Somewhere in your account details, your web host will specify your FTP address, which is what you should enter here. For Bluehost, this is the same as the web address of your site, but with "http://www." replaced by "ftp://ftp.".
  • Username and Password: These are your username and password for your web host.

In the Publish tab, there are a few more fields to fill in:

  • Site Name: This is the same as on the Settings tab, and should be automatically populated if you filled it in there.
  • Page Title: This is whatever title you want to give to your page.
  • Filename: This is the actual file name for your page. If this is the main page in your site, it should be called index.html. When you type a web address such as “http://www.computer-answers.info” into a browser, it will by default look for a file called index.html (or a number of possible variations on this, which we won't go into now).
  • Site subdirectory: This is the directory within your account on your web host that you want the file to go into. In Bluehost (and many other hosting services), files that are part of your website should go into the public_html directory. As your site expands, you'll probably want to use subdirectories to divide this up and make it more manageable, in which case you can specify the subdirectory here as well (“public_html/subdirectoryname”). You can have as many subdirectores, and levels of subdirectories, as you want.

Make sure you check the box to include images and other files, otherwise these won't show up on your site. You can either have the image files located in the same directory as the file containing your web page, or use a different directory to keep the images separate if you prefer.

When that's all done, hit Publish, and you'll get a window showing you the progress of your upload. If no errors occur, then you can go to your website and view the result.

<-- Previous Page

Your First Web Page

Next Page -->

Frequently Asked Questions