GEO 583 Internet Mapping and Distributed GIServices

Up Next

LAB ONE:  HTML Tutorial

Created by Dr. Ming-Hsiang Tsou, 2-1-2001, modified in 2012
Department of Geography, San Diego State University


Due day: February  1  (before the Lecture Session)

10 Points (total 100).


horizontal rule

Getting Started in the SAL Lab

horizontal rule

 Please follow these procedures when you use the PC machines for the first time in the SAL lab.


1. Login to the Workstation using your account and password (it will take around 3 minutes to initiate...).  Please be patient.

NOTE: In the new Windows 10 system, you need to click on the "Sign-In Option" first.  Then select the left-side KEY icon --> Sign-in to GEOGRAPHY Domain with your g583-## account and password.


After the login, click on the "file explore" icon to check if your network drive is connected automatically (Y: drive and Z: drive).  You should see the network drive “g583-xx on \\Vortex (Z:)” and "data on \\Vortex\geog583 (Y:)  is attached on your computer.   (The new system may need to take 1 or 2 minutes to mount the Y drive).  


If you can not find your Y drive or Z drive after 3 minutes, you can connect your network drive by the following steps:

If you cannot see the Y: drive, please manually connect it by selecting the [Tool] menu from the File Explorer --> [Map Network Drive] --> select drive “Y:” and type \\Vortex\geog583\data in the folder box --> click on [Finish].

3. To set up Z: drive, RIGHT-Click on the [Computer] from the File Explorer --> [Map Network Drive] --> select drive “Y:” and type \\Vortex\geog583\data in the folder box --> click on [Finish].


Click on the "Network" icon to check if the "Little_Cesar" printer is available in the list of your printers.


Please remember to Save your works frequently.

·       Use your own directory on Z: (g583-0# on Vortex\geog583) drive to save your lab work.

·       DO NOT save any files in C: D: or Desktop, My Documents, or My BriefCase.  You may lose your file if you save your files under these directories (related to your profile setting).


You can prepare a USB Flash Drive to backup your lab exercises regularly.


How to Exit:  Press  CONTROL-ALT-DELETE at the same time --> Select "Sign Out"


MAKE SURE  you login-off the computer every time before you leave the SAL lab.


horizontal rule

1.  Create your HTML

horizontal rule


1. Please spend 10 minutes to read the tutorial of HTML.

2. Select [Explore] icon to open the File Explorer on your desktop. 

3. The first thing to do is to create a working folder called "lab-1" under your own directory.  To do so, use the File Explorer and select "Vortex Z:" drive first.  Then Right-Click on the Z: drive -- [New] -- [Folder], then type "lab-1" in the folder box (to create a new "lab-1" folder on Z:).

4. Now you have a new folder called "lab-1".  Double click on the "lab-1" folder to enter.  The next thing to do is to create your first HTML file.  To do so, Right-click inside the blank space of File Explorer (Left lower side) -- > [New] then select [Text document].  Rename the new document as "yourlastname-lab1.txt".


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 (select Notepad from the list of software).  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) 

(NOTE:  There are TWO errors in the following HTML page, please correct the errors before you publish the web page.)




<title> GEOG 583: Lab-1 exercise, Your name here </title>



<h1> GEOG 583 LAB ONE <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="htp://"> </p>

<h3> <a href=""> GEOG 583 Class Link </a> </h3>

<p> <a href=""> San Diego State University </a> </p>




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 and select a your preferred Web Browser to open it (IE or Chrome or Firefox).

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.

12. Use the following tips to add one new picture into your HTML file and then save your file.

If you find some errors or need to modify your HTML file, select [View] menu from the web browser, then choose [Source] (or [Page Source] if you are using Firefox browser).  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. 

(Note:  If you can not file the [View] menu, right click on the status bar area (shown in the picture) and select [Menu Bar] to make it visible.)

IE-menu toolbar

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:\g596-0x\lab-1\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 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.


horizontal rule

2. Publish your HTML  with Secured FTP

horizontal rule


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 secured FTP and another is to use HTTP connection.  Today we are going to try the first approach in the secured FTP way.

What is Secured FTP  (SSH File Transfer Protocol) ?

2. Open the WinSCP software in your Desktop.   First, click on the Windows Menu icon, then type "WinSCP".  The WinSCP program will show up on the right-side of the window.   Right-click on the WinSCP --> select "Pin to Taskbar".   Then click on the WinSCP to open the software.


Type in "" in the host name.

Type in your OWN USERNAME (same as the one you login into the SAL lab workstation).  Press Enter.  Then type your password.  (Keep the port number as 22).



After login, there is a popup window asking about security questions, click on "YES".   Then click on "Continue" to continue the program. 


After login, the left side window show the local folder.  The right side window show the remote folder (on the mappingideas server).

Select the Z: drive from the drop-down list on the Upper-Left corner of the Window (See the picture below). 

Navigate to your Z:/personal-folder\lab-1\   move the lab-1.htm file to the right folder (transferring).  After the transfer, close the WinSCP software. 



horizontal rule

3. Check out your HTML

horizontal rule


Congratulations!  You just published your first Web page.  You can open your local Web browser and type the following  URL   HTTP://    You will see a list of folders under the studentweb 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. 

horizontal rule

Other Website Creation Methods: (Optional)

If you are already familiar with Web authoring tools and HTML.  You can modify your own student website using the following options:

1. Create a website using online services, such as Weebly .  or WIX or WEBS.  Here is an example of website created by Weebly. Here is a good link about Weebly review:,2817,2461594,00.asp


weebly example 


2. Use  WordPress as a free and open source content management system (CMS).  But we needs to install WordPress on our web server first.  Then you can select various template or functions.  (Free download).


3. Use a "front-end framework", such as Bootstrap.  The framework contains HTML and CSS-based design templates for web page design and creation.   Here is an example of website tutorial for Bootstrap in Codecademy.  


horizontal rule

4. What to turn in

(due day: next week before the lecture time )

horizontal rule



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 -- [Source] (or "Page Source") to print out the original HTML text.



B. Visit the following web site and use their Internet Map Engine.  

U.S. Census Bureau  American FactFinder (AFF)   (Try reference map or thematic map)

The National Map (Viewer)

HERE Mapping Services: 


Please spend 15 minutes with each one and write down your answer for the following questions and REPLY on the on-line Forum and also PRINT OUT a paper copy for the instructor. 

Please POST your Answers as SEPARATED Topic.

(Suggestions: You can write down your answer in the Word or any text editor and then copy/paste to the Forum in case you misplace your answers.)


1. What do you like and dislike these web pages (regarding to their Web design, user interface, contents, and functions).

2. How long have you actually spent on each site? and Why?

3. What kinds of spatial information do you like to retrieve from these web sites?  Do you get what you want or not? and Why?

4. Use on-line resources (Google, wikipedia, etc), to find out the definition of the following terms (with their full names and definition) and compare their transmission speed (bandwidth):  (DO NOT copy directly from the resource.  Please use your own words to re-write these answers in the forum).


Cable modem


IEEE 802.11g  (wireless LAN)


IEEE 802.16







horizontal rule

Home Up Next