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
- 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
Lab 2 Goal: Generate (at minimum) four different HTML pages & a lab log
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. Include at least
one embedded image, and appropriate links.
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
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.
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
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
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.
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!
Do the following basic stuff with your web pages:
- 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
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).
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.
- 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
- 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,
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:
- 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
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
- a link to your completed web pages (main page, main project page, animation page, map mashup)
- a link to your map mashup
- a link to your lab blog with an entry for lab 1 and lab 2
- make sure you indicate the data you found for lab 1, and also link to the actual data files we will use
(one text file and two Excel files)
...to Geog 353 Main Page and Course Description
...to krygier teaching page.
...to krygier top page.
OWU Geology and Geography Home