Geog406 Advanced GISDanielle Bram Lab 1

Lab 1: Create a Personal Homepage

Objectives:

Understand the basics of HTML Create a personal website, if you do not have one

Learn how to submit your assignments

Preparation

1. Create a folder with the name Geog406_AdvGIS under My Documents. From now on, please save all your lab work for this course in this folder. You may create a separate folder for each lab and then save the materials in corresponding folders.

2. Have your university account ready

You should have an account from the university, which allows you to check email. If you still do not have one, contact ITR help desk at 1400 on campus or 677-1400 off campus.

The Web Drive

1. What is the Web Drive?

The Web Drive is an extra storage area that provides additional disk space for campus users who wish to store their desktop files and folders on a remote server and create a personal web page. For example, you can publish your web pages by a simple drag-and-drop action from your desktop computer.  For more information on this please see http://www.csun.edu/it/training/guides/webdrive.html

2. Mapping the Web Drive: PC Instructions1. Go to Windows Explorer (My Computer) – NOT Internet Explorer2. From the Toolbar menu, click Tools > Map Network Drive.3. From the Drive drop-down menu select "W" or whichever drive that has been

designated for this purpose.4. In the Folder field, type: \\webdrive\username NOTE: Replace "username" with

your CSUN username. i.e. dlb103995. Click the Finish button.

1

Geog406 Advanced GISDanielle Bram Lab 1

3. Mapping the Web Drive: Mac Instructions

1. From the blue apple menu bar, click on Go. 2. Click on Connect to Server.

3. In the Connect to Server window, type the location of the account that you wish to map.

1. The correct format for the path is smb://webdrive.csun.edu/username.2. Replace "username" with your CSUN username.

4. Click the Connect button.

2

Geog406 Advanced GISDanielle Bram Lab 1

5. In the Authentication window, leave the Workgroup/Domain box blank. Type in your CSUN Username and Password in the boxes indicated.

6. Then click the OK button.

7. The icon for your web drive will appear on your desktop. Double–click the icon to open and view the contents.

4. About the Web Drive

A window listing your files and folders, including your public_html folder will be displayed in the My Computer window.  You may copy, move, and delete files to and from this drive, the same way you use any window on your PC.

The first time you map to the Web Drive you will see the files that currently reside in your campus account.  Many of these files may not be familiar to you.  Never delete files with which you are unfamiliar, as they may cause problems to you account.  Ignore these files and simply use the drive to copy, move, organize and navigate through your files, folder and drives.

Note: To activate your Web Drive the first time, you may need to change your password. Go to http://www.csun.edu/account and change your current password.  

5. Create a folder called public_html in your Web DriveNote: This step may NOT be necessary as you may already have a “public_html” folder on your Web Drive.

Open My Computer Open your Web Drive

If you do NOT have a folder named “public_html”, do the following:

3

Geog406 Advanced GISDanielle Bram Lab 1

1. Go to File New Folder

2. Name the folder public_html (the name should be exact and case sensitive. Do not try to be creative!)

All your website related items should be stored in this public_html folder (Labs, projects, index.htm, images…). This is the only place that internet users can access.

Create a homepage using MS Word*Note: If you already have a webpage or know how to create one using a different program (such as Macromedia Dreamweaver), please feel free to take that route. Just make sure the following information is included on your webpage.

1. Open Microsoft Word and create a file, which will be your HOMEPAGE (the first page once others find you on web).

In this file, you should include at least the following information:

Who you are? Your contact information: Telephone, Email address…

Your educational experience

Your professional experience

Your computer skills

Also in this file, you should contain some information about this course, and make a link to the course website: http://www.csun.edu/~dlb10399/Geog406.html

2. THIS IS IMPORTANT: Go to File Save As to save this file as a webpage type (you need to change the default type from “Word Document” to “Web Page”). Name the file “index” (yes, every letter in lower case! Don’t try to be creative here again!). Store this file in the public_html folder on your Web Drive.

4

Geog406 Advanced GISDanielle Bram Lab 1

3. MS-Word will automatically save the file with an extension “htm.” The homepage must be named as “index” and extension .htm will automatically added. Do not try to be creative here, as it is required by the protocol to use the name.

However, other files linked to this file should be named differently and still they should be saved as single webpage under the public_html folder under your Web Drive. Later on, we will talk about how to make different kinds of links.

4. Type in your email address in the homepage so that other people who are interested in your work can contact you.

Your email address will be automatically linked. If it does not work, highlight the place where you want to make the link to your email address, and go to the Menu bar: “Insert” on the top of Word, choose Hyperlink, a window will pop up. Choose Link to E-mail Address on the left, and type in your email address on the line: E-mail address. Then click on OK.

5. Make a link to a webpage of others

First, you go to the desired webpage, make a copy of the web address, and then paste it into the place of the file wherever you want.

If you do not want to show the webpage’s address on your web, but just want to make the link. What you need to do is similar to what you did in Step 3. a) Highlight the text you want to make the hyperlink; b) Go to MS word menu Insert-Hyperlink; c) Open a web browser (Internet Explorer or Netscape) and open the page you want to make the link; d) Go back to the Insert hyperlink window, and you should see that the URL (the website address you just viewed) should be in the link. Click OK in the window, and you will see the text in the word document is highlighted.

Click on the hyperlink and see what happens.

6. Insert a picture to the webpage

First, you must have image file available. Go the menu bar “Insert” in Word, and choose “Pictures”, and then choose the sources.

5

Geog406 Advanced GISDanielle Bram Lab 1

Remember to save the changes frequently.

Now, your home page is ready. Congratulations!!!

7. Check your Homepage

Go to http://www.csun.edu/~username (replace “username” with your CSUN user ID, initials followed by the numbers – ex. http://www.csun.edu/~dlb10399) and see if your webpage is running.

IF YOUR WEBPAGE IS NOT WORKING AT THIS POINT, FOLLOW THE FOLLOWING STEPS.

Check/Change permissions of files or folders Using Secure FTP (File Transfer Program).

Note: If you are working in the GIS lab, you can skip the steps a-c, since the programs have been installed there.

a. Go to the CSUN ITR website: https://www.csun.edu/itr/downloads/index.cgi, log on using your CSUN User ID and password, NOT Geography User ID and Password.

b. Download the Secure Shell (SSH) and Secure FTP program.c. Install the program at your HOME computer and you should see two icons on the

desktop. and d. Launch the SSH Secure File Transfer Client program, and you will see the

following interface

6

Geog406 Advanced GISDanielle Bram Lab 1

e. Click on Quick Connect and you will see the following window

f. Set up the window as shown above, using your own CSUN User ID for “User Name” and then click Connect and you will be prompted to enter your password.

g. Enter your CSUN account password, click OK and you will be brought back to the SSH window. On the right side of the window, you should see a folder for

7

Geog406 Advanced GISDanielle Bram Lab 1

your “webdrive”. Double-click to open the “webdrive” folder so you can see the public_html folder.

h. Right click the public_html folder on the right side of the window, choose the property on the context menu, and you will see the following window.

8

Geog406 Advanced GISDanielle Bram Lab 1

i. On the above window, make sure all the options on permissions are set up as shown.

j. If the options for the public_html folder are set up correctly and your webpage is still NOT working, you may also want to check the permission options for all the files and folders stored under the public_html folder in your Web Drive, starting with the index.htm file to ensure that they are set up correctly.

Congratulations! You should be able to view your website/homepage now.

Go to http://www.csun.edu/~username (replace “username” with your CSUN user ID, initials followed by the numbers – ex. http://www.csun.edu/~dlb10399) and see if your webpage is running.

*Note: If the webpage is still not working, I recommend contacting the ITR Help Desk at 818-677-1400.

C. Assignment

1. Create your homepage and make it as attractive as possible. It should contain the information listed above.

2. In addition, create two more html files; labs.htm and projects.htm.

Instructions for labs.htm

Give the file a title, something like “Labs for Geog 406 Advanced GIS”; add a list with the first item as Lab 1, and link it to your homepage. See following example:

Labs for Geog 406 Advanced GIS

Lab1 Web design: welcome to my homepage

* You are going to keep updating this file as you continue this course.

Instructions for projects.htm

Give the file a title, something like “Course Projects for Geog 406 Advanced GIS”. See following example:

Course Projects for Geog 406 Advanced GIS

9

Geog406 Advanced GISDanielle Bram Lab 1

Under construction!

Save the labs.htm and projects.htm to the public_html folder in Web Drive.

Link these two files to your Home Page: index.htm

1. Launch MS Word program and open index.htm from your public_html folder.

2. Somewhere in the file, type GEOG 406 Labs.

3. Highlight GEOG 406 Labs and go to Insert-Hyperlinks, in the space after Address, type in the following:

http://www.csun.edu/~username/labs.htm

Again you should use your own account name (not USERNAME!)

4. Click OK. The program should bring you back to the index.htm window. You should be able to see that GEOG 406 Labs is highlighted now (which indicates the hyperlink).

5. Do the same thing and add the hyperlink to your projects.htm.

6. Save everything.

Use Internet Explorer or Firefox to see if:

1. Your homepage works.

2. If the links to the labs/projects pages are work properly.

3. Make sure the link for Lab 1 on the labs.htm page sends you back to your homepage.

D. In the future, you need to do the following for each assignment:

1) Create a webpage (say lab2.htm) for each lab, including answers to all questions and maps, etc.

2) Upload the htm file to the public_html folder on the server3) Update the labs.htm file and create a link to the lab file (lab2. htm)4) Upload the labs. htm file to your server (updates).

** I will check your assignments through your website **

10

Geog406 Advanced GISDanielle Bram Lab 1

E. For more information, review the following websites:On setting up your account: http://www.csun.edu/accountOn using your csun Webmail: https://www.csun.edu/webmail/

(If you have problems with this, call the ITR HelpDesk at 818-677-1400)

1. Set up a CSUN email account, if you have not done so. To obtain a CSUN account, go to the website: https://www.csun.edu/webmail/

2. Follow link to How to Obtain a Campus Account, and read the information on the page carefully.

3. Set up Forward Service: If you do not want to check the CSUN account frequently, please set up the Forward service in your CSUN account and forward messages to an email service you use frequently (Yahoo, Hotmail, Earthlink, Google…). To find information about how to set it up, go to https://www.csun.edu/webmail/ and read information linked to Using Webmail Direct (Last item at the bottom on the left side).

11