Creating and Editing Websites

This tutorial is for beginner users who want to create and edit simple webpages or websites. You should already have a basic grasp of HTML and CSS. It is assumed that you already have some sort of web space designated for your site.

How Do Websites Work?

To make a website, you first need to understand the basics of how the internet works. Let's walk through the process of how your computer surfs the web.

  1. First, you open your web browser. A web browser, also known simply as a "browser," is a program that is specially designed to view, or "render," the contents of websites. Firefox, Safari, Internet Explorer, Chrome, and Opera are all examples of web browsers.
  2. Next, you give your browser the URL of the website you wish to view. Your browser takes this URL and sends out a request to the internet, asking where to find this website.
  3. The internet looks up where to find the website, and then points the browser to another computer, called a "server." This computer contains the contents of the website.
  4. Your browser sends out a request to the server, asking for the contents of the website.
  5. The server sends the browser several files. These may include text, images, sound, and information about how the website should look and act.
  6. Your browser reads these files, interprets them, and then renders a picture of what it believes the website should look like. This picture is what you see in the browser window.

You should notice that a website is really nothing more than a collection of files. Even though most people envision a website as the final product, the result of the browser's rendering, what we as web developers have to worry about are the actual files that tell the browser what to render.

You should also know that some browsers render more accurately than others. Internet Explorer, in particular, is famous for rendering websites incorrectly. For complex websites, there are usually two versions on the server: the normal version given to accurate browsers, and a special version just for Internet Explorer to trick it into displaying correctly. Fortunately, Internet Explorer can handle simple websites just fine, so you don't have to worry about browser differences just yet.

Requirements

In order to work with the files that make up a website, we need the proper tools. There are many choices, but I suggest you use free and open source software.

Browser
A browser is used for testing your site. Firefox is the best browser for web development, followed by Safari. If you pick Firefox, be sure to grab the Firebug extension. If you pick Safari, open the Preferences, and in the Advanced tab, select "Show Develop menu in menu bar."
Text Editor
A text editor is used for creating and editing the website files. For Windows, get Notepad++. For Mac, get Smultron or TextWrangler. For Linux, a text editor should be already installed: use gedit if you're running Gnome, or Kate if you're running KDE. NOTE: Microsoft Word is a word processor, not a text editor. Do not use Microsoft Word for making websites.
FTP/SFTP Client
An FTP (File Transfer Protocol) client is used for transferring files between your computer and the server. You should use SFTP (Secure File Transfer Protocol) rather than FTP whenever possible. For Windows, get WinSCP. For Mac, get Cyberduck or Fugu. For Linux, use Nautilus if you're running Gnome, or either Kasablanca or KFTPgrabber if you're running KDE.
Server information
You will need the URL of your web server. You will also need a username and password to log in to the server. Ask your system administrator for this information.

Connecting to the Server

We need to use an FTP/SFTP client to establish a connection between your computer and the server before we can create or edit a website. Although each client is different, establishing a connection is a fairly straightforward process and shouldn't be too hard to figure out.

  1. Open your FTP/SFTP client and familiarize yourself with the interface. Most clients have a two-panel design where the contents of your computer is listed on one side, and the contents of the server is listed on the other side. If you have not connected to a server yet, the server panel may be grayed out.
  2. Tell the client that you want to open a new connection. You can generally find this option in the File menu.
  3. The client will ask you for some information about the server you want to connect to. Fill in as much information as you know. You will need at least the URL of the web server, a username, and a password. If the client asks for other information that you don't know, just leave it blank. When you are done, click OK.
  4. The client will attempt to connect to the server with the information you have provided. If it fails, read the error message and see if you can understand what went wrong. Perhaps you typed in the information incorrectly?
  5. If you are connecting via SFTP and this is your first time connecting to the server, you will see a warning about a "host key fingerprint" or something similar. Don't worry about this: the client is simply indicating that it has never connected to this server before. If there is an option to do so, ask the client to save or remember this host key fingerprint, and this warning should not show up again. If you do see this warning again in the future when connecting to this same server, it could mean that a hacker has intercepted your connection -- be careful!
  6. When you connect to the server successfully, you should see a listing of files located on the server. Locate your public web directory: it's usually a folder called public_html or www. This is where your website files will live.

Your First Webpage

Let's make a test webpage, to make sure that the contents of your web directory are in fact being put on the internet.

  1. Open up your text editor. Create a file that has some text in it, like Hello, World! Save this file on your computer to somewhere you will remember, like your Desktop. Be sure to name the file index.html (not .txt).
  2. Open up your FTP/SFTP client and connect to the server.
  3. Set up the FTP/SFTP client so that you can see your index.html file on your computer, and your web directory on the server.
  4. Transfer the index.html file from your computer into the web directory on the server. Usually, you can do this simply by dragging the file from one panel of the client to the other. Make sure you drop the file into the web directory.
  5. Let's see if it worked! Open up your web browser.
  6. Now we need to know what URL to use to view the webpage you just created. This will start with the same URL as the server itself, followed by a forward slash (/) and a tilde (~). The tilde symbol is to the left of the number 1 on the keyboard. Then, add the username that you used to log in to the server, followed by another forward slash. So if your username is joe and your web server is at http://www.example.com, you should type http://www.example.com/~joe/ into your browser.
  7. You should see contents of the index.html file in your browser window. Congratulations! You have made your first web page!

URL Structure

URLs are structured in such a way as to provide information about where files are located. Using the URL scheme, you can determine what the specific URL is for a file on a web server. You can also apply this scheme in reverse: Given a specific URL, you can determine where the web page file is on the web server.

Each URL has four parts: protocol, domain, path, and file. Let's analyze a sample URL:

http://www.example.com/public/blog/2008/entry1.html
  • The protocol of this URL is in gray. This indicates that we are using HTTP: the HyperText Transfer Protocol, which is the standard protocol for serving websites.
  • The domain of this URL is in black. This indicates the "family" of websites that this webpage is on.
  • The path of this URL is in blue. This indicates the "path" of directories we travel down to reach the webpage file. Directories are separated by forward slashes. In this case, we start at the public directory, then go into the blog directory, and then go into the 2008 directory.
  • The file of this URL is in green. This indicates that the webpage file is called entry1.html, located in the directory specified by the path.

Let's look at another sample URL.

http://www.google.com/

The protocol and domain are clear enough. But what about the path and file? In this case, the path consist of only a single forward slash. This indicates that you don't have to travel down through any directories to reach the webpage file: the file is sitting directly inside the web directory.

But what is the name of the file? The file name is masked by a shortcut that was designed to keep URLs shorter. If a file name isn't specified in a URL, like this one, the server looks for a file in that directory named index.html. For this reason, index.html is the standard name for a home page: it allows for shorter URLs. If you'd like, you can also include the file name in the URL: http://www.google.com/ and http://www.google.com/index.html are two names for the same webpage.

One more thing to note. In some cases, a web server can be configured to host websites for multiple users. In this case, to access a specific user's website, you must specify that user to the web server in the URL. The standard way of doing this is by putting the username at the front of the path, with a tilde (~) in front of it. That's why in the section above, the webpage is located at http://www.example.com/~joe/: the ~joe tells the web server to look for joe's website.

Editing Websites

You've seen how to create a basic webpage. Clearly, most websites are fancier than simple text, however. To make your website look nice, you'll need to learn HTML and CSS, two of the languages used in web development. HTML and CSS are not covered in this tutorial.

However, you don't even need to know HTML and CSS to be able to edit an existing website! On the web, text is text is text. If all you want to do is update the text on a webpage, you can simply open up the webpage file, change the text, save it, and upload it to the server. That's all! You already know everything you need to know to keep a webpage up to date.

Here's an example. Let's say there is an out of date webpage for a sports team. All the players that it lists are no longer on the team. Updating the player names is easy, just follow these steps:

  1. Look at the URL of the page and identify the domain, path, and file of the webpage.
  2. In most cases, the domain of the page is also the location of the web server. You will still need a username and password to log in to make your changes, however. Obtain these from your system administrator.
  3. Connect to the web server, and find the webpage file based on path and file in the page URL.
  4. Transfer the file to your computer, and open it in a text editor.
  5. Find the text you want to change and make your changes. In this case, replace the names of the old players with the names of the new players. Save the file with a new name to distinguish it from the old file.
  6. Transfer the new file to the web server. Check the file in your browser to make sure everything looks right.
  7. Delete the out-of-date file from the web server, and rename the new file on the web server so that it replaces the old one.