Lab 2: HTML & Map Mashups

Save all your files (and subsequent HTML work) in your HTML folder on the C: drive.

Use Firefox as your browser.

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

Copy three text/HTML files into your HTML folder:

Click once to see the file index.htm

• select Tools >> Browser Tools >> Page Source
• this shows you the HTML code for the page
• select all the code, then Copy
• open Notepad (on your desktop, or search) and paste the code
  • Save as index.htm
• Do the same for the project-page.htm and maps.htm files
• Note: use .htm to 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_  or dash-)
• Use all lower case letters (the OWU WWW server is case sensitive!)
• Don’t 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: project-page.htm and not confusing shit like page.htm

TIP! Look at your files on the C: drive. 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 stupid Windows default go to the view menu and check “File name extensions.”

1) open Firefox; reduce to the bottom bar

2) open Notepad and index.htm

3) with Firefox open (as a file, not a URL out there on the web) index.htm

TIP! Notice that you are viewing HTML files that are on your computer (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 you typically work on and view them on your computer and refine them until they work perfectly. You then upload them to a server, using FPT (file transfer protocol, such as FileZilla) software, and then the world can look at them. We will do the FTP thing at the end of this lab.

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

5) in Notepad, change some text in index.htm

• Look at it in the browser
• Do you see it? Why not?
• Return to Notepad and save index.htm
• 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 an HTML file. Vuzza ho!

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

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 and paste it into your own HTML page.

• 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 on your HTML page

The Visual Guide allows you to see basic HTML functions as they look in raw HTML and as they look in a WWW browser. Use the Visual Guide to start developing your HTML pages.

I’ll let you decide if and how to develop your HTML pages beyond the basics. There are many resources out there.

1. Plenty ‘o web-based HTML scripting sites are available. Check them out: copy your simple code and paste into one of these sites and see if you can fancy up your stuff. Then simply copy the code for the new, fancy++ pages back into your HTM document.
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 functionality of your page – ask your instructor or the person next to you for feedback.
3. A simple way to add some structure to your pages is to use Tables. 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).
   1. 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.)
   2. 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.
   3. Look at the following sites showing some basic table page layouts & code:
      • HTML Table Layouts
      • Tables Templates
   4. 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.

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

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.

Create a blog for your lab comments (your lab log blog). In the spirit of what the internets were invented to do (share scientific information), you’ll share progress and details about each of the steps (labs) in the course project (except the two evaluation labs). If for some reason someone wants to know what went into the project, there it is. Also, I can take a look at your postings on each lab.

If you happen to already have a blogging platform you can use that, but I’d recommend  substack.com which is aimed at people who write. It’s a simple interface and easy to use and share.

I’d recommend creating a Substack site for yourself, with your name (or some alias) rather than a Substack just for this class, but you decide. You can write whatever you want, but do create separate postings for each of the labs in this class (and share them with me when you are done).

Substack is completely free with unless you decide to charge a fee for a subscription to the site (then they take part of the fee).

Some overviews of Substack

• How to Start Writing on Substack
• What is Substack

Go to https://substack.com

• Start Writing
• Create account
• If you already subscribe to any substack accounts, you can display them and recommend them (or not)
• Give it a name (you can make it your own account with whatever name and topic and just use it for class
  for now).
• Skip mailing list
• Skip subscribers
• Add a few relevant interests, including Technology (for Geog 112)

The rest should be easy.

Write an introduction to you, or if you are shy, make something up.

Then Create a new entry for Lab 1 (saved elsewhere) and send a link to me.

A map mashup is simply a map created from at least two different digital data sources. A scripted 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) which allows you to combine your data with Google Maps data.

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

You are seeing javascript in the source code, and modifying the javascript to be appropriate for your project.

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. For this exercise, please use a KML file (KMZ does not seem to work in the map mashup demo for some reason).

• A Google API key allows you to create a map mashup using Google Maps.
  • My API key is included in the demo map mashup, so you don’t have to get your own for this course.
  • If you want your own API key: It’s free to a point (for smaller projects like ours, you will not incur any costs). Alas, Google wants your credit card even for the free API key. Infomation on getting an API key here.
• Modify the demo Map Mashup we just viewed here so that it works for your project.
  • As with the basic HTML files you got earlier in this exercise, view the source, copy everything, paste into a new file (mashup.htm) and save the file to your HTML folder. Make sure your other HTML files correctly link to the mashup.htm file.
  • Only modify the things detailed below:Really, really important: when you change code in your map mashup HTML file make sure to make one change, then save, then view the page in your browser. If it works, great, if not, go back to your text editor and HTML page and undo the change. If you change 10 things, then save and view, and it does not work, you don’t know where you made the error.
  • Change the map title to something appropriate
  • You can put text or images describing the map and sites on it above and below your map; in the HTML file, the places for normal HTML stuff are indicated.
  • SKIP this step, Spring 2022: Modify the latitude and longitude of the single point location in the mashup (it’s my home lat/long) to your own home lat/long:
    • To get the lat/long of your home: While in Google Earth, right-mouse-click on a placemark at your home location and select Properties for the latitude/longitude (which you can copy and paste into your mashup). The lat/long must be decimal degrees. If the latitude/longitude is 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 points (Krygier’s home) in the HTML file with your coordinates.
  • Get a single KML file of all your saved places for your state:
    • in Google Earth: create a folder called mapsites
    • move all of your saved locations for your state into that folder
    • right mouse click on the folder and Save place as…
    • change file type to .kml
    • keep the name mapsites: thus mapsites.kml
    • put the .kml file in your HTML folder on the C drive
    • put the URL to your .kml file in the map mashup code: it should be https://go.owu.edu/~yourusername/mapsites.kml (of course, change yourusername to your actual OWU user name.
    • the map mashup won’t work until you use the FTP software to upload the contents of your HTML file to your public_html folder on your OWU account (see next step)

A really important step:

• Check your OWU web server space exists: https://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 your instructor know
  • You should now be able to use the FTP software (see below) to upload the two files (the mashup HTML and .kml) 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.

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

• A customized home page (index.htm)
• A customized project page (project-page.htm)
• A customized map page (maps.htm)
• A customized mashup page (mashup.htm) showing your state places (mapsites.kml)
• A link to your lab log blog updated thru Lab 2

Upload your four interlinked HTML pages to your webspace 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.

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.