GEOG 581: Cartography Design

LAB-06

Back Home Up Next

Lab-05 Update:

Use the "Calcamp TechJet" to print out ONE Draft Map.

Use the "Borealis" from Twister server to print out the final map.  Each student only has ONE page printing quota.  So make sure your map is finalized before sending to this Printer.

Create Your Website

1.  Create your HTML (5 points)

 

1. Logon on the workstation by using your own account and password.

2. Please spend 10 minutes to read the tutorial of HTML. (http://www.w3.org/MarkUp/Guide/)

3. Right click the [Start] menu and select [Explore] to open the File Explorer on your desktop.  The first thing to do is to create a working folder called "lab-06" under your own directory. 

4. Now you have a new folder called "lab-06".  Double click on the "lab-06" folder to enter.  The next thing to do is to create your first HTML file.  To do so, click the [File] menu -- [New] then select [Text document].  Rename the new document as "yourlastname-lab6.txt".

5. Now you need to verify the setting of [File Explorer] in order to see the hidden extension of your files.  Select [Tools] menu --[Folder Option].  A "Folder Option" window will pop up.   Choose [View] and make sure the box of  "Hidden file extensions for known file types" is UNCHECK.  Then press [OK] button.  

6. Now you should be able to see the full name of your file as "yourlastname-lab1.txt".  Double click on the file and open it in Notepad.  You are ready to write your first HTML file.  

7. Please type the following texts into your file. (Make sure you use your own name in the file)

 

<HTML>

<head>

<title> Lab-06 exercise, Your name here </title>

</head>

<body>

<h1> GEOG 581 LAB SIX </h1>
<h2> created by Your name </h2>

<p align="center"> <font size="6"> Hello World! </font> </p>

<p> This is a HTML file. </p>

<p> <img border="0" src="http://map.sdsu.edu/geog581/images/color-dem.jpg"></p>

<h3> <a href="http://map.sdsu.edu/geog581"> GEOG 581 Class Link </a> </h3>

<p> <a href="http://www.sdsu.edu"> San Diego State University </a> </p>

</body>

</HTML>

 

8. Now choose [File] menu -- [Save] the HTML file, then Exit.

9. Every HTML has ".htm"  (in Windows Environment) or ".html" (in UNIX environment) extensions on their file names.  So we need to change the file extension from ".txt" to ".htm".  To do so, carefully single click on the file name (yourname-lab1.txt), wait for one second, then click the file name again.  Now you can change the file name extension from ".txt" to ".htm".  Answer [Yes] to confirm the change.  You will notice that the icon of this file has been changed from a Notepad to a  HTML document.

10. Double click on the file and the HTML will be opened automatically by your default Web browser. 

11. Watch your first HTML file carefully and check if the file has any broken links or errors.  If everything looks right, close the Web browser.

If you find some errors or need to modify your HTML file, select [View] menu from the web browser, then choose [Source].  The Notepad will popup with your HTML file.  Edit  the HTML file, then [Save] it.  Close the notepad, and click on the "Refresh" button on the web browser to see if the change has been made. 

 

Tips:  How to add new pictures from other Web sites.  --> User the Web Browser to open the web page which has the picture you like.  Right click on the picture and select "Property" menu.  Then copy the Address/URL information from the [Properties] Window to your own HTML.   However, please be very careful about hyperlink to other people's Web pictures or images. Some of the pictures may have copyright issues to deal with.  DO NOT STEAL other's image on purpose.

Sometime, some web site (like Yahoo) will not allow you to hyperlink their images, you might get an error message for your link.  To solve this problem, you can "right click" on the image and save it to your local drive (Z:\g581-0x\lab-06\imagename.jpeg).  Then in the HTML, simply use the file name for image source -->   <img border="0" src="imagename.jpeg">   Make sure that the image and the HTML file are on the same folder.  When you publish your HTML file, please also FTP the image files to the same folder of the HTML document. 

 

COPYRIGHT ISSUE:

Copyright is a form of protection provided by the laws of the United States (title 17, U.S. Code) to the authors of “original works of authorship,” including literary, dramatic, musical, artistic, and certain other intellectual works. This protection is available to both published and unpublished works.

Source:  http://www.loc.gov/copyright/circs/circ1.html

 

2. Publish your HTML

 

1. The next step is to send your first HTML file to our Web server.  There are two ways for publishing your web pages.  One is to use FTP and another is to use HTTP connection.  Today we are going to try the first approach in the FTP way.

2. Open your FTP software by copy the FTP folder from the Z:geog581/data directory to your own workspace (g581-xx/ftp).  (select the FTP folder, then press CTRL-C (copy), then move to your g581-0x folder, then press CTRL-V (paste).  Then double click on the FTP program inside the FTP folder.

3. Type "map.sdsu.edu" as the Host name.  Use the same user-ID and password for your windows account on the FTP account, then press [OK]. (Note: usually, the FTP account should be different from the users account.  This lab will use the same one to simplify the process.)

4. After you create the FTP access to map.sdsu.edu.  You will see the following window.  Now change the "local system" to "Z: drive" and navigate to your "lab-06" folder.  For the Remote System, click on the "ChgDir" button (Change Directory) and type "student581" (it's a hidden directory). You will see the whole student Web site directory. 

 

Now navigate the local system (left hand side) to your own directory (for example, Z:\g581-0#\lab-06).  First, click on the [. .] (see the below picture with the blue bar) to move above the FTP folder, then double click on the [lab-06] to enter.

5. The next procedure is to upload the HTML from local system to the remote system.  Highlight your HTML file first, then press the "Right Arrow" button (Upload button) to your web directory.  Now you should see the file appears on the remote system (right hand side). 

 

 

3. Check out your HTML

 

Congratulations!  You just published your first Web page.  You can open your local Web browser and type the following  URL   http://map.sdsu.edu/student581/   You will see a list of folders under the student581 folder.  Double click on your own folder and open your HTML file.  

You can customize your first Web page later by adding new pictures, hyperlinks or any stuff you like.  Please print out your final version of HTML file and give it to your instructor before the next lab. 

Our Next step is to use "Dreamweaver to create a website for you.  It is a very friendly and professional web authoring tools.  We will start to teach you how to use Dreamweaver in the next lab.  The following link can help you know more about Dreamweaver.  Try to read these tutorial before next lab.

bullet

Dreamweaver Tutorial:  http://www.iboost.com/build/software/dw/tutorial/786.htm

bullet

Macromedia Support Center Tutorial: http://www.macromedia.com/support/dreamweaver/tutorial_index.html

Also, in the local Z:data/Reading folder.  There are a PDF document for Dreamweaver tutorial which will be used in the next lab.

5. What to turn in

 

bullet

The final version of your first HTML in both Web browser format and HTML format. (Use your Web Browser to print out the Web page and select [View] menu -- [Resource] to print out the original HTML text.  (5 points)

 

Please use on-line forum to answer the following questions (5 points)

 

bullet

What is your own Map Schemata for Web-based Maps?  (which criteria for defining a Web-based map ?)

 
bullet

Compare the differences between propositional knowledge representation and the procedure knowledge representation and give ONE example for each.  Which one you prefer ?  WHY?

 
bullet

What is HTML?  What is "mark-up language"?  Why we need HTML for web documents? (rather than use MS Word or PDF files on Web?)

 

Http://map.sdsu.edu/forum

 

 

  Hit Counter
Web-powered by: MAP.SDSU.EDU