Digital Foundations

Files and Servers

A web page is an HTML file that is stored on a web server.

A server is a computer with software installed on it that allows it to send and receive requests for web pages.

A client is a computer running software, such as a web browser, that sends requests to the server. When you click a link on the web, your computer sends a request to the server through the web browser and the server returns the requested web page.

Each web page has its own unique address, called a Universal Resource Locator, or URL. A properly formed URL has a domain name, such as www.digital-foundations.net. URLs may also include folders and file names. Folders are denoted by forward slashes, and HTML files end in .html. For example, www.digital-foundations.net/folder/file.html is a URL pointing to a file named file.html stored in a folder named folder on the server that hosts the domain digital-foundations.net. Files and folders on a server are like folders on your own computer. The difference is that anyone on the Internet can view them! One way of thinking about URLs and servers is through the metaphor of the postal mail system. A mailing address specifies the exact location of the addressee using a name, street name and number, city, state, postal code, and country. Likewise, a URL is the exact location of the file you are requesting. The domain name is like the city, state, zip and sometimes the nation, the folder is like the street address, and the file name is the addressee's name. All of these need to be included, or the right file will not be requested.

Artists experiment with their materials, whether they are paint, marble, photographic paper, or, for Internet artists, the communication between clients and servers. In an attempt to describe their Internet artworks, MTAA (M. River & T. Whid Art Associates) created The Simple Net Art Diagram (1997).

netartdiagram.gif 

http://www.mteww.com/nad.html

The concept of the diagram is that Net Art is about communication. The art is not just the code on the server, or the aesthetic results of the code when displayed in the browser. The art happens through communication.

The artist Abe Linkoln took MTAA's work one step further, with the Complex Net Art Diagram, located at:
http://www.linkoln.net/complex/

For Linkoln, the web is a repository of found images and massive quantities of information. Notice the appropriation of Jodi's code bomb in this work. A server is just a computer loaded with software that delivers files requested by web browsers. The artist duo Eva and Franco Mattes, who work as 0100101110101101.org, created a project called Life Sharing, where they turned their own computer into a web server, exposing their entire computer and all of its contents.

Results of Chapter 16 Exercises

results 

The following exercises will result in two web pages that link to each other where one is saved in the root directory and the other is saved in a subdirectory.

Exercise 1: Defining a site in KompoZer

1. Choose Edit from the top menu when Kompozer launches, then select Publish Site Settings.


publishsitesettings_1

2. Click on New Site.

  pubsettings_dialog_1

3. Enter the name of your site and its URL. The name of the site can be anything, but we tend to keep it simple. If you don't have a URL, you can leave this field blank.

4. Enter the Publishing Server details. This is the "ftp" information that you will use to transfer the files from your computer to the server. The required information includes:

  1. ftp URL
  2. username
  3. password

The ftp URL is usually the host name (www.your-domain.com), but that is not always the case. Your FTP login (sometimes referred to as username) and FTP password are also necessary. Usually all of this information will be given to you by the person or organization that provides your web hosting services.

5. Click Save Password (otherwise you will be prompted for the password every time you transfer data).

6 . Click OK.

7.  To confirm that the details work, you must double-click on the name you gave the site in step 3 from the front interface of Kompozer.

site_1_1_1

If all is well, KompoZer will make a connection to the server, and the name of the Server in the KompoZer window will change color. If there are any files and folders already on the server you will see them displayed.

filelist_1_1

Exercise 2: File and folder management

1. View the HTML document in Normal view.

2. Use File > Save As to save the page as index.html in a folder on your computer. You will first be asked to give the page a title.

 title

Then you will be asked to name the file and choose where to save it.

savepageas

The folder that you choose will become the "local directory" where you will build your site. We will end up transferring this entire directory to the server so the contents of the server will mirror your local directory. To make the mirroring process easy, keep all of your web files in one folder. This way you will know which files to transfer to the server.

Name your file index.html. It is essential to have a file named index.html (or index.htm) in your website at the root (top) directory. The HTML home page is always called index.html because the browser will automatically load index.html from any root directory. Any other page that you intend to display in the browser will have to be accessed by a hyperlink either from index.html, or from a page that came from that one.

3. Now we will create a new page. Choose New > Page in New Tab from the tool bar.

newpage_1_1

6. Type "This is not the index" on this page in Normal view.

thisisnothteindex_1

7. Save your new page by choosing File > Save As. Since this new page has not been saved before, you will be asked for the title of the page. Name the page two.html and press OK. Then you will see the File Browser window. Before saving the file use the folder icon with the green '+' on it to create a new subdirectory. A subdirectory is a folder within your root folder. On the server, it is a directory within your root directory.

newsubdir_1

Type the name of the directory you wish to create. We called ours subdirectory. Press OK. The new directory will be created and you will automatically see the contents of this directory in the File Browser. Since the new directory is empty there are no contents. We will now save the new file here by simply clicking Save.

8. Go back to the first file, index.html. If it is still open then it is one click away from the top left tab in the document area. Otherwise, choose File > Open. We will create a link from this page to the new page. Type "This is my first HTML page" then press the Enter key and type "Click to see the new page".

textforlink_1_1

Now highlight the text, "Click to see the new page" and click the Link button in the tool bar. In the Link Properties dialog, click on the folder icon on the right in the Link Location section.

linkproperties

Choose the file to link to, in this case the file is two.html. As you can see, it is already displayed in the File Browser. Click once on two.html and press the Open button. 

linker

The Link Location field now displays the path to the file you just selected. That is, you will see the directory where the file is saved followed by a slash and then the name of the file. In our illustration the path is subdirectory/two.html.

linked

Press the OK button. The link will be displayed in Normal view.

2ndlink_2

9. Repeat the directions in the previous step on page two.html to create a link back to index. Make the link read, "Click to see the index" instead of "Click to see the new page." Notice the URL for the new link is ../index.html. The syntax ../ informs the browser to move up one directory in order to find the file. On your hard drive, this means look inside the previous folder.

10. Remember to save all of your changes in KompoZer in order to see the links working in the browser. You can click to each page individually and use File > Save. Save everything and test your work in a browser. Open index.html in a browser. Use File > Open File or drag the index.html file to the page area of a web browser. Notice as you click between the two pages, the location area of the Navigation Bar (where you type or read a URL) displays the names of each file.

11. Finally, let's transfer the files to the server. We need to transfer each file individually, and to recreate the directory structure. First lets transfer our index.html file. Make sure that page is open in the Normal view and choose File > Publish As...

publish

Make sure the Site Name is the same as the one we set earlier. Now click Publish. A window will appear showing the progress. When the transfer has completed we need to check to see if it was successful. To refresh the server view double-click on the name of the site from the Site Manager on the right. KompoZer will reconnect to the server and display the current contents.

publish2_1_1

Finally, repeat this process for the second page we created. To do this you first have to create a new directory with the same name as we gave our local directory ("subdirectory"). Click on the icon in the Site Manager that looks like a folder with a little star. Then name the directory and follow the same process to transfer the second HTML file. You will need to transfer the second file to the subdirectory.