EDU 597 Web Page Tutorial 2

EDU 597 – Web Page Challenge

The Activity

Creating a web page is one thing, making it publicly accessible is another. Using the web page files you created in tutorial 1, you will now learn how to “publish” a web site thereby making it available over the World Wide Web. Once you completed the following steps you (along with anybody else) will be able to type in the address to your page into a web browser and view your page … on the net.

------

Starter Questions 2

Where will my web page be located? 2

What program do I use to create my web pages? 2

What will be the address of my site? 3

Step 1 - Creating a public_html folder in your GPU account. 3

Connecting to the GPU Using Telnet 4

Creating your “public_html” Folder 7

Step 2 – Uploading your webpage files to your GPU account. 7

Step 3 – Viewing your web page 13

Resources and References 13

1 EDU 597 – Web Page Challenge

Starter Questions

The purpose of this section is to answer a few of the preliminary questions you may have concerning publishing your web pages.

Where will my web page be located?

The web pages that make up our web site will be stored on the GPU (General Purpose Unix) computer at the University of Alberta - the same computer system that keeps track of your University e-mail account. Before you can post your web pages, you will have to make some minor changes to your account. The next steps show you what needs to be done.

What program do I use to create my web pages?

It's really a matter of personal preference. Some people prefer to format their page manually using HTML (Hypertext Markup Language) using any word processing program or text editor and some would rather use WYSIWYG (what you see is what you get) programs like Macromedia's Dreamweaver, Adobe's PageMill and GoLive, or Microsoft's FrontPage. Some of these programs have 30 day trial downloads; check their websites for details. WYSIWYG's allow you to see what your page will actually look like, as opposed to just seeing a bunch of HTML programming code (called tags).

What will be the address of my site? Once up and running, you’re URL (Uniform Resource Locator - fancy words for "address") will be:

http://www.ualberta.ca/~yourCNSID/homepagename.htm

So, if your CNSID is “estudent” and the first page of your website is named “page1.htm” then our full address would be:

http://www.ualberta.ca/~estudent/page1.htm

If the first page of your website is named “index.htm” then our full address would simply be:

http://www.ualberta.ca/~estudent/

Step 1 - Creating a public_html folder in your GPU account.

 Before we can publish our web pages we will need to create a new empty folder in our GPU account. This will not be an ordinary folder; it will be our new public_html folder.

 Normally, the contents of our accounts are hidden from anyone without our ID and password. However, anything we place inside our public_html folder (like our web page files) can be seen by anyone who has a viable connection to the Internet and a web browser.

 To do this we need to communicate with the GPU computer, access our account, and execute a command that will create our public folder.

 To communicate with the GPU computer, we must run a Telnet session. See below for a definition of Telnet.

Definition of TELNET A terminal emulation program for TCP/IP networks such as the Internet. The Telnet program runs on your computer and connects your PC to a server on the network (in our case the GPU computer on the University of Alberta network). You can then enter commands through the Telnet program and they will be executed as if you were entering them directly on the server console. To start a Telnet session, you must log into a server by entering a valid username and password. Telnet is a common way to remotely control Web servers.

Definition Courtesy of WeboPaedia.com

Connecting to the GPU Using Telnet

 Depending on where you are completing this tutorial (a Windows lab or a Macintosh Lab) you will require different instructions on how to connect to the GPU using Telnet.

 See below for the set of instructions that apply to your location (Windows or Macintosh) for connecting to the GPU.

 Once you have successfully connected to GPU using Telnet, move onto the next section titled “Creating your public_html folder”.

 The University of Alberta also has a tutorial to show you “How to log in to GPU”. This tutorial contains links you can use to download telnet software. The tutorial is located at:

http://www.ualberta.ca/HELP/gpu/loggingon.html

Connecting to GPU from a Windows CNS computer lab

 Double click the Authentication icon on the desktop.

 Type in your CNSID and password as prompted, then minimize the screen

by clicking on the minimize window button in the top right hand corner.

 Go to the Start button (bottom left hand corner on your Task Bar), then select U of A Communications and then G.P.U. (SSH).

 You will now be placed in the GPU environment. Enter in your CNSID and password again, as prompted.

 You have logged in!

 Move on to the section titled “Creating your public_html folder”

Connecting to GPU from a Macintosh CNS computer lab

 Open the U of A Communications folder (Located on the Macintosh HD).

 Double click the General Purpose Unix icon.

 At the login: prompt, type in your CNS Computing ID and password.

Connecting to GPU using Windows 95/98/NT/2000 at Home

 Use a telnet program, such as WinQVT/QVT Term or, for a more secure session, Putty (select SSH as the protocol). Both can be downloaded from the CNS Software website located at:

http://www.ualberta.ca/CNS/SOFTWARE/

 With any telnet program, you will have to enter a host name. Type in (or

select) gpu.srv.ualberta.ca

 Once connected to GPU, you will see a prompt for login. Type in your CNS Computing ID,and your password (once prompted). For security, your password will not appear when you type it in.

Connecting to GPU using Netsurf on a Macintosh

 Use a telnet program, such as WinQVT/QVT Term (found on Netsurf and idisc) or, for a more secure session, Putty(select SSH as the protocol). Both can be downloaded from the CNS Software website.

http://www.ualberta.ca/CNS/SOFTWARE

 Find the NCSA Telnet folder inside the Netsurf folder and double click.

 Double click the General Purpose Unix (GPU) icon.

 Once connected to GPU enter your CNS Computing ID and password, once prompted.

 Move on to the section titled “Creating your public_html folder”.

Creating your “public_html” Folder

Now that you have connected to the GPU computer complete the following steps to create your public_html folder.

The people at Computing and Network Services (CNS) here at the University of Albert have posted the instructions for creating a public_html folder at the following website:

http://www.ualberta.ca/HELP/gpu/faq_11.html

Step 2 – Uploading your webpage files to your GPU account.

 Now that you have created your public_html directory/folder on your GPU account, you must complete an FTP session to transfer your web page files into your public_html folder in order to make it publicly accessible on the Internet.

Definition of FTP The most common use for FTP is to download files from the Internet. Because of this, FTP is the backbone of the MP3 music craze, and vital to most online auction and game enthusiasts. In addition, the ability to transfer files back- and-forth makes FTP essential for anyone creating a Web page, amateurs and professionals alike. All of this is done through using FTP Clients.

What is an FTP Client?

An FTP Client is software that is designed to transfer files back-and-forth between two computers over the Internet. It needs to be installed on your computer and can only be used with a live connection to the Internet.

Courtesy of FTPplanet.com

 Once again, the type of computer you use and your location will determine which set of instructions you use to complete an FTP session to transfer files into your public_html folder on your GPU account.

 If you are using a Windows computer inside the ED-South 155 lab

complete the available FTP tutorial under the FTP with Windows section below.

 If you are using a Macintosh computer complete any one of the available FTP tutorials listed under the FTP with Macintosh section below.

 As a student at the U of A you can download the programs included in any one of these tutorials at http://www.ualberta.ca/CNS/SOFTWARE.

FTP with Windows

 The program that we will be using to transfer our files to our newly created public_html folder is called WinSCP. To launch WinSCP while working in a Windows CNS computer lab on campus, click on the Start menu select the U of A Communications folder and then select the WinSCP shortcut.

 Once you have launched WinSCP you should see the following screen:

 As a U of A student the computer which will store all of our webpage files is referred to as the GPU computer. This computer keeps tracks of web

space and email accounts for every enrolled student at the University of Alberta.

 Since the GPU here on campus keeps track of the storage space of every computer on campus by giving each student a folder, you will need to identify yourself to the GPU computer to gain access to your space and your specific folder. Type in your CNSID and password as shown above and click on the Login button.

 You should see your home directory/folder as it has been set up for you on the GPU computer. It should be noted here that everything in this folder is completely private. It is only the files that you put inside the public_html folder that can be viewed by anyone with a browser and an Internet connection.

 To place our webpage files into the public_html folder, double click to open your public_html folder.

 Once your folder is open, open up your webpage folder on your desktop and single click to select a file and then drag and drop a file into the folder.

 Once you drop your file into the public_html folder you will see the following Copy confirmation window. To place a copy of the file into your public_html folder click on the Copy button.

 In order to see all of the files on your website, you will have to drag and drop all of the webpage files into your public_html folder. (Hint: You can select more than one file to copy by holding down the shift key while selecting your files.)

 Once you have copied all of your files simply click on the close box to quit the program then you can look at your page on the Internet using a web browser.

FTP with Macintosh

 Using Fetch (U of A - CNS Help Desk)

http://www.ualberta.ca/HELP/ftp/fetch.html

 Fetch Softworks (the publishers of Fetch) – FAQ Page

http://fetchsoftworks.com/Support/faq.html

Step 3 – Viewing your web page

Your webpage address (also known as URL) will be:

http://www.ualberta.ca/~yourCNSID/homepagename.htm

Resources and References

Computing and Network Services. Step-by-step Instructions for Creating your Home Page on GPU. 2001. Retrieved August 1, 2002 from the World Wide Web at: http://www.ualberta.ca/HELP/www/steps.html