Geography 353 Cartography and Visualization

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


Geog 353 Lab 2: HyperText Markup Language (HTML) & Map Mashups
Update: 9/13/17
100 points
ASSIGNED: Wednesday September 6
In-class demo DUE: Monday September 18
DUE: Wednesday September 20, with in-class demo of refined HTML pages
Visual Guide to HTML: basics of HTML



TIP! Links are in red for unvisited links and purple for visited links in this document!

A HTML (HyperText Markup Language) file is simply a text file containing HTML commands, links to images and other pages, and the text you see on a web page. Instead of a .txt file extension, it has an .html or .htm file extension. 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:


Please shape your project WWW pages & blog so that they reveal a solid knowledge of HTML and look 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:

Part 1: 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: a flash drive or Google Drive.

    Use Firefox as your browser for this exercise.

Remember: Text (.txt) and HTML (.htm or .html) 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:

Click once to see the file index.htm

  • select Tools >> Web Developer >> Page 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 characters, including the file extension

  • Give your files names that make sense: anim_page.htm and not confusing shit like 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 >> Control Panel >> Appearance >> 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: use Firefox for now

  • Text editor: for editing HTML files (Notepad)

  • HTML editor: for WYSIWYG editing of HTML files (BlueGriffin)


Part 2: Learnins' the HTML

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

2) open a text processor (please use Note Pad: on the desktop or Programs >> Accessories >> Note Pad)


TIP! If a shortcut to Notepad is not on your computer desktop: 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 view the page source of the Visual Guide.

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

  • Save the image below to your desktop and figure out how to embed it 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.


Part 3: Fancy up Your HTML with a WYSIWYG Web (HTML) Editor

Most normal people don't script HTML in a text editor, they instead use some kind of HTML editor, often with a "what you see is what you get" interface. You can fine-tune your HTML (or debug it) by toggling to a text editor, where you can see (and understand!) the HTML code.

You can give BlueGriffin a try. This is free software for generating HTML pages, and is based on the same code as Firefox. The software should be on your desktop. You can also download it on your own computer and putter with your web pages in the comfort of tu casa. You may find other HTML scripting software. Whatever you want!

  • Open BlueGriffin

  • Navigate to and Open your index.html file

  • You can look at your page as wysiwyg or source and modify it in either place

  • With your mousie pointer, hoover over the various icons at the top of the page to see what they do

  • Check out the menu options

  • Modify your index.html file - save a copy of the original if you want

Do the following basic stuff with your web pages:

1. Use Tables to create a basic layout for your pages: yes, it is true that CSS (an enhanced component of HTML) provides a better way to control web page layout, but we don't really have time to learn CSS in addition to basic HTML in this class (feel free to look into it on your own).

  • Think about the basic components that will need to be on each page:

    • Page title / subtitle
    • Main content area
    • Navigation links (to your other pages, OWU, etc.)

  • You may want to keep the title/subtitle and navigation areas the same on each page, but divide up the main content area in different ways. The title/subtitle area should probably be on the top (or maybe left, in a column). The navigation links can be a series of horizontal cells, under the title/subtitle, at the bottom, or in a left side column.

  • Look at the following sites showing some basic table page layouts & code:

  • Think about your content and these options and choose a table layout that works for you. You can copy and paste from one of the sites above, or use the BlueGriffin table generator to create the table for you. Find out how to modify the table properties to modify the way your table looks (to make the table outlines invisible, or modify the cellpadding, for example).

2. Add some images, maybe music or video files (nothing boring please), links to stuff, change the background and text colors... add at least TEN different HTML features to your basic page and document these in your Lab Log.

3. Pay attention to the design and funcionality of your page - ask you instructor or the person next to you for feedback.

4. Modify the rest of your HTML pages (Main Project Page, Animation Page) so they are consistent in design with your index.hmtl file ... for example, the navigation links on each page should be similar from page to page.

5. Take a few minuets to explore the internets 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 Mozilla HTML Resource Page and 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.

  • Using the information and resources you have learned about so far, complete the basic course WWW pages & 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, speelling errors, and other outrages 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.


Particus 4: Create a Lab Log Blog

Create a blog for your lab comments (your lab log blog) at WordPress. This replaces the Word doc Lab Log you started in the last lab.

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


Part 5: Create a Google Maps Mashup

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.

For example, here is a simple map mashup combining some of the KMZ files you sent me (Exercise 1) along with Google's map data: Map Mashup

Google's basic bit of geographic data is a KML file. You can open and view KML files with a text processor (like NotePad). KMZ is compressed - a smaller file size but you cannot open and view the content of the file.

  • Modify the Map Mashup we just viewed here so that it works for your state(s) and project. 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.

    • 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. Don't mix up lat and long and include the negative (-) if it is in the original data. It indicates W or S. You have several detectible options:

      • While in Google Earth, right-mouse-click on a placemark and select Properties for the latitude/longitude (which you can copy and paste into your mashup) for each placemark. The lat/long must be decimal degrees. If the latitude/longitude are in degrees/minutes/seconds (43°17'2.74"N) go to Google Earth's Preferences and change Show Lat/Long to Decimal Degrees. Replace the coordinates of the first of the two points in the HTML file with your coordinates. Do the same with the second, then copy and paste the code (each set of coordinates must have the same three lines of code, with differing lat/long).

      • Create a single KML file with all the "home" points you sent me): Put all your placemarks in a single folder in the Places window in Google Earth. While in Google Earth, right-mouse-click on the folder and select Save place as... Select KML as the file format (not KMZ), and give the file a good name and save it to your HTML folder. Open the file with a text processor like NotePad. You should be able to copy (and paste) all the lat/long data from this one file into your map mashup. Upload the single file (details on how to create it in the section above) to your OWU server space (see below for FTP instructions) and include a path (URL) to the file in your map mashup. See this example (view source to see how it's done).

    • Save the map mashup 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 an API key that allows you to create a map mashup using Google Maps. You need a Google account to do this, and our OWU accounts are Google, so that is just terrific. You can also use your Gmail account or create a new account (you can delete it when you finish this course).

    • Go to the Obtaining an API Key section on this page and follow the directions to get your own API key. The key lets Google know who is using their maps in mashups and sets some rules and regulations.

    • The key is a long horrible set of numbers and letters. Carefully copy the key from the Google web page and paste it into your map mashup HTML, replacing my key with yours. You can also save a copy in a text document so you have a backup. You will replace the Key after the key= code, up to the double quote before the word type - the babby blue stuff below. Make sure to leave the double quote and space:

      • script src="http://maps.google.com/maps?file=api&v=2&key=AIzaSyCuXC2qucAmzJxnTNXcFtKaUgP4eR8dtrc" type="text/javascript"

    • You should now be able to use the FTP software (see below) 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.


Part 6: Pullins' it all together and Putsin' it on the Web

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


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 FileZilla Client software and open it. There should be a shortcut to this software on your computer desktop. If not, check in the programs folder. When the software starts you should see this:


  • For the host use sftp://cc.owu.edu, and for the Username and Password use your OWU email ID and Password, then hit Quickconnect.
    Believe it or not, sftp stands for soft frickin' toilet paper.


  • The top window shows messages from the server; the side by side windows below show the files on your computer (left) and on your server space (right).

  • Navigate to the directory where your HTML files are saved on your computer using the left window. Open the public_html directory in the right window. Don't fool around with or delete any other files on the server, it can mess up your email account. 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.

  • Disconnect and quit the FileZilla software when you are done.

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



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.


When you are done, by end of class on due date: email me the link to your blog entry for Lab 2. This should include



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