GEO 583 Internet Mapping and Distributed GIServices

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).

Getting Started in the SAL Lab

 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.

1.  Create your HTML

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.)

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.)

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 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.copyright.gov/

2. Publish your HTML  with Secured FTP

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) ?  https://kb.iu.edu/d/akqg

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 "mappingideas.sdsu.edu" 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. 

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://mappingideas.sdsu.edu/583student    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. 

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  http://www.weebly.com/ .  or WIX or WEBS.  Here is an example of website created by Weebly. Here is a good link about Weebly review: http://www.pcmag.com/article2/0,2817,2461594,00.asp

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. https://wordpress.org/  (Free download).

3. Use a "front-end framework", such as Bootstrap.    http://getbootstrap.com/  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.

https://www.codecademy.com/courses/web-beginner-en-yjvdd/0/1  

4. What to turn in

(due day: next week before the lecture time )

 
MAP.SDSU.EDU