...to Geog 353 Main Page and Course Description
...to Geog 353 Syllabus
...to Geog 353 Course Schedule and Lecture Outlines
...to Geog 353 Laboratory Information and Student Projects

100 points

ASSIGNED: Wednesday September 2

PREVIEW DEMO DUE: Wednesday September 16 & Monday September 21 (demo to class)

DUE: Wednesday September 23, with in-class demo if significant changes.

Visual Guide to HTML: basics of HTML

A HTML (HyperText Markup Language) file is nothing more than a basic text file containing HTML commands, links to images and other pages, and the text you see on a web page. HTML commands are letters and words that shape what you see (and what happens) when you interact with a WWW page in an internet browser.

All HTML commands are placed between less than and greater than symbols (< >). Anything between these two symbols (and the symbols themselves) will not be visible when you view the HTML page in an internet browser, but will effect what you see (or can do) on the WWW page. This exercise will introduce you to HTML by having you create, modify, and view a few basic HTML files.

We will initially work with text (HTML) files and manipulate the HTML without HTML scripting software. I prefer you understand how HTML works, and scripting software impedes your understanding of HTML. A basic reference page of HTML commands (Visual Guide to HTML) is very olde but will help you to learn basic HTML commands. Additional knowledge of HTML can be found in innumerable sources on the WWW.

Lab 2 Goal: Generate (at minimum) four different HTML pages & a lab log blog functioning on the internet, for your course project: they will develop over the semester, but at minimum include:

• A HTML file which is the main page of your Personal Home Page, which should include information about you, your interests (however interesting or boring) as well as a link to your course project and lab blog. Be creative! Put personal information in this page and not on your project page. You will learn to set up some space on the OWU server for your personal home page, and upload this page to that space.

• A main course HTML page with the title of your Lab project, your name, and state or states. You should also include basic information about this course, the source of the data for your project (with a working link to the original data), and links to the WWW sites with information about your state and population change located as part of Lab 1. This page should also contain at least one embedded graphic. The Visual Guide to HTML (discussed below) shows you how to do this. You can grab images from the web (right mouse click on an image and save) or scan them or use digital photos you have or whatever.

• Your animated map HTML page: Include a title and link back to the main HTML page. Nothing will be here until you complete the map animations in Lab 9.

• A link to your lab log blog. Include basic information about you and the course and a link back to your main HTML page or home page. Add your lab log entry from Lab 1 (and 2) to the blog.

• A Google Map Mashup page (HTML) showing the sites you located in Lab 1 using Google Earth.

Please shape your project WWW pages & blog so that they reveal a solid knowledge of HTML and look kinda-k001. Experiment with backgrounds, colors, layout, etc. I expect you will have a set of creatively designed pages at the time this lab is due. You will continue to refine the pages over the semester.

The Details:

An Introduction to HTML Each student should have created (in Lab 1) a course (Geog 353) folder on the computer C drive, and in that folder should be your own folder (with your name). In your folder should be a folder called HTML. Save all your HTML files in the HTML folder.

Get in the habit of backing up all your work on the soon to be departed lab computers.

Remember: Text (.txt) and HTML (.htm) files are essentially the same; HTML files are text files with HTML commands.

Each student needs to copy three text/HTML files into their HTML directory:

Use FIrefox as your browser for this exercise.

Click once to see the file index.htm

• select View >> Source

• this shows you the HTML code for the page in Notepad

• Save it as an HTML file in your HTML folder:
  • File >> Save as... index.htm
  
  
• Do the same for the geog_353_main_project-page.htm and geog_353_animation.htm files

• Note: use either .htm or .html but be consistent.

You now have the basic files you will modify and develop into your own html files for this course.

Important: when naming files:

• Use only letters and numbers: no punctuation (except an underscore_ )

• Use all lower case letters (the OWU WWW server is case sensitive)

• Never leave a space in a file name: use an underscore: krygier_top.htm

• Limit your file names to about 10-15 characters, including the file extension

• Give your files names that make sense: anim_page.htm and not page.htm

  
  

TIP! Look at your files in Windows Explorer (right click on Start menu). If you don't see the file extension (.htm, .txt, etc.) it is because Windows is trying to help you and instead it is making life hard for you: the files krygier.txt and krygier.htm will show up as two files named krygier and this, obviously, is confusing. Damn you Bill Gates! To change this very stupid Windows default you need to find Folder Options in Windows: Start >> Settings >> Folder Options, then select View from the options at the top of the window, and un-check the box next to the text that says "hide file extensions for known file types." Hit the Apply button and you should be able to see the file extensions in Windows Explorer.

Software you will need:

• WWW Browser: for viewing HTML files as they look on the WWW

• Text editor: for editing HTML files (Notepad)

1) open the WWW Browser (if not already open); reduce to bottom bar

2) open a text processor (please use Note Pad: Programs>>Accessories>>Note Pad)

TIP! Check on your computer desktop and see if there is a shortcut to Note Pad. If there is not an icon named Note Pad, use the FIND feature of Windows (under the Start menu) to locate the Note Pad application on the computer's C: drive. Once located, click and drag the icon for Note Pad onto the desktop. This automatically adds a shortcut to Note Pad on your computer desktop. Snappy!

3) from Note Pad, navigate to and open your copy of index.htm

WARNING! You should see a basic text file with a dozen or so lines of HTML code and text with blank lines in between. If all the text is on one line please tell your instructor and he will provide a properly formatted file.

4) with the browser open (as a file, not a location) index.htm

TIP! Notice that you are viewing HTML files that are on your PC (rather than out on the WWW). Obviously you can view HTML files without those files being uploaded to a WWW server. When developing HTML pages it is vital to work on and view them on your PC and refine them until they work perfectly. You then upload them to a server, using FPT (file transfer protocol) software, and then the world can look at them. We will do the FTP thing at the end of this lab.

5) compare the browser and text editor versions

• HTML code is all the stuff with < > brackets around it

• HTML is a page markup language (thus HyperText Markup Language)

6) in the text editor, change some text in index.htm

• Look at it in the browser

• Do you see it? Why not?

• Return to the text processor and save index.html

• Go to the browser

• Do you see it? Why not?

• Hit reload in the browser

• How very deeply exciting! You have now created and edited a HTML file. Vuzza ho!

7) Navigate to the Visual Guide to HTML using your browser.

Carefully read the introductory information about setting up your HTML files.

Compare the browser view with the text (HTML) view: while in the browser select the View menu and then View Source. You should see all the HTML code and text for the Visual Guide. When you see an HTML effect you want to use in your own pages, view the source HTML and copy the HTML code (Control-C) and paste (Control-V) into your own HTML page. You can do this with any HTML page you find on the WWW. When you see something interesting on a HTML page, you can see and even copy how they did it.

• Copy the HTML code for a "horizontal rule" and put in your HTML page

The Visual Guide allows you to see basic HTML functions as the look in raw HTML and as they look in a WWW browser. Use the Visual Guide to start developing your HTML pages. It has all the HTML basics you need to complete this Lab.

8) Explore the WWW to find out more about HTML commands.

While you may be tempted to scamper out and buy an HTML book, there are many great sources available free on the WWW. Check out the Compact Guide to HTML site, for example. Include it as a link in your lab log blog entry for this lab. Go to www.yahoo.com and find the category for HTML: explore these free sources of information on HTML and HTML commands. Save the address of at least one of these sites, and include it in your lab log blog entry for this lab.

9) Using the information and resources you have learned about so far, complete the basic course WWW pages & blog. Be prepared to show the instructor that they work. You can copy and paste your lab log text from the first lab from a text/word processor file into the blog.

REALLY BIG TIP: The HTML pages you create for this course constitute the final form of your course project. The HTML pages will be placed on the OWU WWW server, and anyone in the world with WWW access can see them. Do keep in mind that your WWW pages represent you, your instructor, and Ohio Wesleyan University. You would not include copyright infringements, spelling errors, and other various blasphemies in a paper or project you complete for a university course, so avoid them in your WWW pages. I don't want to be a censor, or limit your fun with WWW pages. Just use some common sense.

10) Create a blog for your lab comments (your lab log blog) at WordPress.

• Quick setup of new blog (in class).

• include a link in the blog back to your HTML pages, and a link to the blog in your HTML pages.

11) Create a basic Google Maps Mashup:

Mashups are sorta popular at the moment, and are becoming easier to create, even if you are not a computer expert.

A map mashup is simply a map created from at least two different data sources. A real mashup (eg., not a Google My Maps map) requires you to know a bit about HTML, thus this lab is an appropriate place to create one. You will use Google's API (Application programming interface) and have to register with Google to do so.

• Get a Google Maps Mashup HTML template here. As with the basic HTML files you got earlier in this exercise, view the source and save the file to your HTML folder.

• There are a series of things you will change in the file, what the map looks like, where it is centered, and, of course, your points of interest (located using Google Earth in the previous Lab). Only modify the things detailed below:
  • Change the map title to something appropriate

  • You can put text describing the map and sites on it above and below your map; in the HTML file the two places for text say "you can put text here."

  • You can have a large or small map control. This is the zoom/pan tool. You can change this later if you want

  • You need to set the center of the map (in lat/long), how far zoomed in you are, and if you want the normal, hybrid, or satellite map view. Get the lat/long from Google Earth: create a placemark, right click on it, then Get Info. Copy and paste the numbers (make sure you don't mix up latitude and longitude).

  • You also need to replace the two sample markers with your locations for you state or states. Modify only the lat/long and the name of the marker. Again, get the lat/long values from Google Earth. You can also map out a series of points stored in a KML or KMZ file, as long as that file is uploaded to your server space: example (view source to see how it's done).

  • Save the file when you have made the appropriate changes.

  • Open the file with your browser. At this point the map is not on the server, so you are only viewing it locally. Evaluate the map to make sure everything is correct.
    
    
• Check that your OWU web server space exists: http://go.owu.edu/~yourowuusernamehere
  • You should see this: ** this new home page was generated on request for (yourowuusernamehere) but has not yet been customized **

  • if not, let you instructor know

• Get a key that allows you to create a map mashup using Google Maps. You need a Google account to do this, so create one (you can delete it when you finish this course).
  • If you don't have a Google Account create one here and log in.

  • Go here for your Google Maps API Key. This lets Google know who is using their maps in mashups and sets some rules and regulations. Take a look at the rules. Your map won't work on the internet without this key.

  • Scroll down the page, check the box that says you agree to Google's terms, and enter the URL to your personal home page. It will look like mine, but with your OWU user name: http://go.owu.edu/~jbkrygie

    Hit the Generate API Key button.

  • The key is a long horrible set of numbers and letters. It will allow you to use a Google Map mashup on any HTML page in your OWU account. I believe you can bookmark this page and the key, but please carefully copy the key from the web page and paste it into a text document and save that file as Google API Key so you have a backup. Then open your Google Maps Mashup file and replace the key in the Mashup Tutorial (that one is my key) with your new key (just the red text below):
    • script src="http://maps.google.com/maps?file=api&v=2&key=ABQIAAAAIbo__rXXaVW2K_bgNbYvExQkF5UvvbcjMp63E3mCWRMiYiYe7RRYk8N4QYY1oAU9ap-x1aDYH_KBpw" type="text/javascript"

  • You should now be able to use Cute FTP to upload the file to your OWU account and it should work. Freaky! Link the page to your other HTML pages and make sure people viewing your page know there is a map mashup with sites relevant to your project on that page.

12) Complete modifications on your HTML pages: they should all link together and look decent:

• A personalized home page (index.htm)

• A personalized project page (geog_353_main_project-page.htm)

• A personalized animation page (geog_353_animation.htm)

• A personalized mashup page (geog_353_mapmashup.htm)

• A personalized lab log blog at Wordpress.com

13) Finally: Upload your four interlinked HTML pages to your web space on the OWU server using FTP (file transfer protocol) software.

• You should have some server space for your web pages already created on the OWU server. If you don't, ask your instructor for help.

• Find Cute FTP software and open it. There should be a shortcut to this software on your computer desktop. If not, search for cute to find the Cute FTP folder and start the application (cutftp32.exe). When the software starts hit OK on the window that pops up telling you are logged on, and you should see this:

  

  
  

• Change the host address to cc.owu.edu, the User ID and Password to your ID and Password, then hit OK.

• You should see a dual window (below) showing files on the PC you are working on, to the left, and files on the WWW server, in your account, on the right.

• Navigate to the directory where your HTML files are saved using the left window. Open the public_html directory in the right window. Don't fool around with the mail folder on the server, this is all your email files. All HTML files should be put in the public_html directory on the WWW server. There should be a default index.htm file already in your public_html directory on the OWU WWW server: right mouse click on this file and delete it.

  

  
  

• Select all your HTML files and any images from your HTML folder on the PC and drag them to the public_html folder.

• You can also hit the up arrow in the Cute software along the icon bar at the top of the window to upload your files to the OWU WWW server. You can also remove files from the server if they are no longer part of your HTML pages.

• Open a browser and navigate to go.owu.edu/~yourowuusernamehere. Of course, substitute your OWU user name. You should see your new WWW page: anyone, anywhere in the world with WWW access can see it too.

HTML Authoring Software: Most people use HTML scripting software to create WWW pages. Computers in the lab should have one of the better HTML authoring tools installed,Macromedia Dreamweaver, or you can use one of the easy to use free HTML authoring tools like SeaMonkey, which should be installed on the GIS lab machines.

After completing your basic four pages and getting them working on the WWW, show your instructor. Then feel free to use HTML scripting software - Dreamweaver, or SeaMonkey, or whatever honks your horn.

Knowing how to create HTML, Map Mashups and blogs are useful skills. There are many sources (books, computer center courses, and the WWW) for learning about HTML, map mashups, and blogs. Do take the time to develop your WWW pages and HTML skills in the context of the course project. It will be worth your time.

E-mail: jbkrygier@owu.edu

...to Geog 353 Main Page and Course Description
...to krygier teaching page.
...to krygier top page.

OWU Home
OWU Geology and Geography Home