Web Design Primer

Chapter 11 – Uploading Content to a Web Server

To place pages on the World Wide Web, you will need (1) a domain name and URL and (2) a web server with sufficient space for your files (pages, images, video, audio, and so on).

Domain names are issued by designated sites such as GoDaddy.com, Domain.com, and numerous others. These sites have a search function where prospective users can see if their desired URL is available. Domain names rent usually annually for $10 and up. Popular names may cost much more.

The domain provider will offer a “pointer” to connect your URL to the server where the content is located.

If you’re studying web design in a university, high school, or continuing education class, the institution may provide a web server and URLs for students to use during the class.

If you have a URL and service space, you will need a file transfer protocol (FTP) program to upload files to the server and set reader permissions. A multitude of free FTP programs are available for download. At Ryerson University we use FileZilla to place files on a student web server maintained by the Computing and Communication Services department.

File Preparation and Upload

To upload files to a web server, the authors recommend the following steps:

  1. Make a “gold master” folder on your desktop, such as “site,” and place final files in it.
  2. Place the required .html, .css, and image files for your site into the folder.
  3. Follow naming conventions for convenience:
    • Use all lowercase letters.
    • No spaces in file or folder names — use hyphen (-) or underscore (_) to separate words.
    • No absolute links to images, .css, .js, or other files (e.g., “file///MacintoshHD/images/image.jpg”) in your documents.
  4. Make sure your home page is called “index.html” so the file will load automatically when the folder is entered.
  5. If placing image, .css, and other files in folders, be sure to cite the folder name in the link. E.g., “images/image1.jpg”
  6. If placing .html files in a folder, remember you will have to go up one directory level to get to the index file and other folders. Use “../” before the folder name.
  7. Test the files to make sure all links work.

Avoid renaming any files after organizing the folder. The result is to break any links that have been coded since they no longer match to the filename.


Icon for the Creative Commons Attribution 4.0 International License

Web Design Primer Copyright © 2018 by Richard Adams and Ahmed Sagarwala is licensed under a Creative Commons Attribution 4.0 International License, except where otherwise noted.