Every time we surf the web, we specify a URL (Uniform Resource Locator) in a browser in our client computer to send a request to a web server. HyperText Transfer Protocol (HTTP) is used to send the request and receive the response(s). To host a site, a different protocol, FTP (FIle Transfer Protocol) is used to transfer the site files from a development host machine to a server. The files are then available to an HTTP request sent by a URL in a browser.

HyperText Transfer Protocol (HTTP)

HTTP is a simple protocol with few words, GET, POST, DELETE, and PUT. This is the protocol you use to surf the web; clicking a hyperlink or submitting an HTML form in a browser uses HTTP to send a request to a server and the server responds with the requested documents or an error status (such as, 404 - Not Found).

Client Server model

Exercise — Client – Server

To ss the request / responses for this page:

  1. In Firefox, click on this element and Inspect Element(Q)
  2. Opent the Network panel.
  3. Refresh this page to send a request.
  4. Notice the Type and the time taken for each response.
  5. On receiving the responses, the browser compiles the document and displays it.

File Transfer Protocol (FTP)

FTP is a network protocol for transferring files from one host to another host over a network such as the internet. In practice this involves:

  1. connecting to a server,
  2. logging in,
  3. transfering files.

This can be done using an FTP program with a comman-line or a graphics user interface. Web browsers and operating system file browsers are also FTP client programs and accept FTP commands such as, ftp://ip address to connect to a server. You can then host your site by dragging and dropping files from the local host to the remote server. Befor that, please follow the Preparing a site to host section meticulously, it will save you time!

Preparing to host

Testing and validating the code in a development system is essential before uploading to a web server.

Test the site locally

Validate the HTML and CSS code; use the W3C HTML validator and the W3C CSS validator before uploading any files.

For valid documents once uploaded to the server, the most likely problem breaking your site is the pathnames used in your code. Avoid absolute pathnames.

Absolute pathnames start with a logical drive name such as C: or I: or / (top level of the current disk). These are local logical drive names that do not exist on the remote server. The HTML elements that have attributes that require a pathname include link, a, img, sound and video Check, these all have relative pathnames and follow a naming convention. For example, in these exercises we used relative pathnames and followed a consistent naming convention.

We specified all files and directory names in lower case with underscore instead of space characters. We have one wd directory with all the files in this directory; a relative path is then simply the filename.

In larger projects, it is good practice to create subdirectories for images, sound, video, and javascript files. However, creating subdirectories for your HTML files can become problematic as the relative pathnames become cumbersome.

Exercise — Preparing to host

  1. Follow the simple naming convention; check all filenames are in lower case with underscore instead of space characters.
  2. Check the HTML link, a, img, sound and video elements and specify relative pathnames. WIth all files in the same directory, the relative pathname is simply the filename.
  3. Validate the HTML and CSS code; use the W3C HTML validator and the W3C CSS validator.
  4. Check each page display in a browser.

Hosting a site

Hosting a site involves:

  1. Preparing a site to host.
  2. FTP connection to a server using its IP address.
  3. Logging in to the server.
  4. Transfering files
  5. Browsing to site URL.

Exercise – Hosting a site

  1. Open "My Computer" in windows or a shell in Linux to FTP to the server. In the top window showing the current directory type: ftp://your_server_name
  2. Once connected you are normally asked to login.
  3. Once logged in, change directory to the root directory of your site; typically named webpages or public on many ISP hosting.
  4. Drag from your local system and drop in the window connected to the server.
  5. Use Firefox to browse to the site URL.

    On a shared server, the URL can seem counter intuitive. A general address, http://your_server_name/~c1234/index.html, translates to the user, ~c1234's web directory, typically named, webpages or public. This directory is then searched for the file index.html.
    So, while the site is uploaded using an ftp session starting with ftp://your_servername, the site is typically surfed to with a URL, http://your_server_name/~user/index.html

  6. Should the site not display as expected, visit the Preparing a site to host.