{"id":69,"date":"2021-07-13T10:17:18","date_gmt":"2021-07-13T15:17:18","guid":{"rendered":"https:\/\/sites.owu.edu\/geog-112\/?page_id=69"},"modified":"2022-09-10T08:33:43","modified_gmt":"2022-09-10T13:33:43","slug":"lab-2-html-map-mashups","status":"publish","type":"page","link":"https:\/\/sites.owu.edu\/geog-112\/schedule-content\/lab-2-html-map-mashups\/","title":{"rendered":"Lab 2: HTML &amp; Map Mashups"},"content":{"rendered":"<blockquote style=\"border: 0px solid #666;padding: 10px;background-color: #f2f2f2\"><p>Update 9\/10\/2022<\/p><\/blockquote>\n<p><b>100 points<\/b><br \/>\nAssign: Wednesday, Sept. 7<br \/>\nDue: Monday, Sept. 19, with an in-class demo of HTML pages (end of the class meeting)<\/p>\n<p><a href=\"https:\/\/krygier.owu.edu\/krygier_html\/html_guide\/html_guide.html\"><b>Visual Guide to HTML:<\/b><\/a> basics of HTML<\/p>\n<blockquote style=\"border: 0px solid #666;padding: 10px;background-color: #f2f2f2\"><p>Introduction &amp; Overview<\/p><\/blockquote>\n<dl>\n<dd><span style=\"font-size: 1rem\">An <\/span><b style=\"font-size: 1rem\">HTML (HyperText Markup Language) file<\/b><span style=\"font-size: 1rem\"> 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. <strong>To be consistent (which is really important) stick with .htm for this course.<\/strong> 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.<\/span><\/dd>\n<\/dl>\n<p>All HTML commands are placed between less than and greater than symbols (&lt; &gt;). Anything between these two symbols (and the symbols themselves) will <b>not be visible<\/b> when you view the HTML page in a browser but will affect what you see (or can do) on the WWW page. This exercise will introduce you to very basic HTML by having you create, modify, and view a few basic HTML files.<\/p>\n<p>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 (<a href=\"https:\/\/krygier.owu.edu\/krygier_html\/html_guide\/html_guide.html\"><b>Visual Guide to HTML<\/b><\/a>) 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.<\/p>\n<p><b>For Lab 2:<\/b> Generate (at minimum) <b>four different HTML pages &amp; a WordPress lab log blog<\/b> functioning on the internet, for your course project: they will develop over the semester, but at a minimum include:<\/p>\n<ul>\n<li><b>An HTML file<\/b> (index.htm)<b> &#8211; your personal home page. <\/b>This\u00a0should 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 on this page and <b>not<\/b> 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 (and the rest) to that space.<\/li>\n<li><b>An HTML<\/b> (project-page.htm) &#8211;<b> your course project page<\/b> 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 <b>Lab 1.<\/b> This page should also contain at least <b>one embedded graphic.<\/b> The <a href=\"https:\/\/krygier.owu.edu\/krygier_html\/html_guide\/html_guide.html\"><b>Visual Guide to HTML<\/b><\/a> (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.<\/li>\n<li><b>An HTML file<\/b> (maps.htm)<b> that will eventually embed your project maps:<\/b> Include a title and link back to the main HTML page. Nothing will appear here until you complete Lab 9.<\/li>\n<li><strong>An HTML file<\/strong> (mashup.htm) &#8211; \u00a0your\u00a0<b style=\"font-size: 1rem\">Google Map Mashup<\/b><span style=\"font-size: 1rem\">\u00a0file showing the sites (mapsites.kml) you located in Lab 1 using Google Earth Pro.<\/span><\/li>\n<li>A link to your <strong>WordPress<\/strong>\u00a0<b>lab log blog.<\/b> 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.<\/li>\n<\/ul>\n<p>Please shape your project WWW pages &amp; blog so that they reveal your\u00a0<b>knowledge of HTML and look k001.<\/b> 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.<\/p>\n<blockquote style=\"border: 0px solid #666;padding: 10px;background-color: #f2f2f2\"><p>The Details<\/p><\/blockquote>\n<table border=\"0\" width=\"100%\" cellspacing=\"12\" cellpadding=\"12\">\n<tbody>\n<tr>\n<td bgcolor=\"#FFEBD9\"><b>Part 1: An Introduction to HTML<\/b><\/p>\n<p>Save all your files (and subsequent HTML work) in your HTML folder on the C: drive.<\/p>\n<p>Use <b>Firefox<\/b> as your browser.<\/p>\n<p>Remember: Text (.txt) and HTML (.htm or .html) files are essentially the same; HTML files are text files with HTML commands.<\/p>\n<p>Copy <b>three<\/b> text\/HTML files into your HTML folder:<\/p>\n<p>Click once to see the file <a href=\"https:\/\/krygier.owu.edu\/krygier_html\/geog_112_lab\/index.htm\" target=\"_blank\" rel=\"noopener\"><b>index.htm<\/b><\/a><\/p>\n<ul>\n<li>select <b>Tools<\/b> &gt;&gt; <b>Browser Tools<\/b> &gt;&gt; <b>Page Source<\/b><\/li>\n<li>this shows you the HTML code for the page<\/li>\n<li>select <strong>all<\/strong> the code, then <strong>Copy<\/strong><\/li>\n<li>open <strong>Notepad<\/strong> (on your desktop, or search) and paste the code\n<ul>\n<li><strong>Save<\/strong> as <strong>index.htm<\/strong><\/li>\n<\/ul>\n<\/li>\n<li>Do the same for the <a href=\"https:\/\/krygier.owu.edu\/krygier_html\/geog_112_lab\/project-page.htm\" target=\"_blank\" rel=\"noopener\"><b>project-page.htm <\/b><\/a>and <a href=\"https:\/\/krygier.owu.edu\/krygier_html\/geog_112_lab\/maps.htm\" target=\"_blank\" rel=\"noopener\"><b>maps.htm<\/b><\/a> files<\/li>\n<li><b>Note:<\/b> use .htm to be\u00a0<b>consistent.<\/b><\/li>\n<\/ul>\n<p>You now have the basic files you will modify and develop into your own HTML files for this course.<\/p>\n<p><b>Important: when naming files:<\/b><\/p>\n<ul>\n<li>Use only letters and numbers: no punctuation (except an underscore_ \u00a0or dash-)<\/li>\n<li>Use all lower case letters (the OWU WWW server is case sensitive!)<\/li>\n<li>Don&#8217;t leave a space in a file name: use an underscore: krygier_top.htm<\/li>\n<li>Limit your file names to about 10 characters, including the file extension<\/li>\n<li>Give your files names that make sense: <strong>project-page<\/strong><b>.htm<\/b> and not confusing shit like <b>page.htm<\/b><\/li>\n<\/ul>\n<hr \/>\n<dl>\n<dd><span style=\"font-size: small\"><b>TIP!<\/b> Look at your files on the C: drive. If you <b>don&#8217;t<\/b> 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 <b>krygier.txt<\/b> and <b>krygier.htm<\/b> will show up as two files named <b>krygier<\/b> and this, obviously, is confusing. <i>Damn you, Bill Gates!<\/i> To change this stupid Windows default go to the view menu and check &#8220;File name extensions.&#8221;<\/span><\/dd>\n<\/dl>\n<hr \/>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<table border=\"0\" width=\"100%\" cellspacing=\"12\" cellpadding=\"12\">\n<tbody>\n<tr>\n<td bgcolor=\"#FFD9B7\"><b>Part 2: Learnins&#8217; the HTML<\/b><\/p>\n<p>1) open <strong>Firefox<\/strong>; reduce to the bottom bar<\/p>\n<p>2) open\u00a0<b>Notepad <\/b>and<b> index.htm<\/b><\/p>\n<dl>\n<dd><\/dd>\n<\/dl>\n<p>3) with Firefox <strong>open<\/strong> (as a file, not a URL out there on the web) <b>index.htm<\/b><\/p>\n<hr \/>\n<dl>\n<dd><span style=\"font-size: small\"><b>TIP!<\/b> 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 <b>FPT<\/b> (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.<\/span><\/dd>\n<\/dl>\n<hr \/>\n<p>4) compare the browser and text editor versions<\/p>\n<ul>\n<li>HTML code is all the stuff with &lt; &gt; brackets around it<\/li>\n<li>HTML is a page <b><a href=\"http:\/\/en.wikipedia.org\/wiki\/Markup_language\">markup language<\/a><\/b> (thus HyperText Markup Language)<\/li>\n<\/ul>\n<p>5) in <strong>Notepad<\/strong>, change some text in <b>index.htm<\/b><\/p>\n<ul>\n<li>Look at it in the browser<\/li>\n<li>Do you see it? Why not?<\/li>\n<li>Return to <strong>Notepad<\/strong> and <b>save<\/b> index.htm<\/li>\n<li>Go to the browser<\/li>\n<li>Do you see it? Why not?<\/li>\n<li>Hit <b>reload<\/b> in the browser<\/li>\n<li>How very deeply exciting! You have now created and edited an HTML file. <strong>Vuzza ho!<\/strong><\/li>\n<\/ul>\n<p>7) Navigate to the <b><a href=\"https:\/\/krygier.owu.edu\/krygier_html\/html_guide\/html_guide.html\">Visual Guide to HTML<\/a><\/b> using your browser.<\/p>\n<p><b>Read the introductory information about setting up your HTML files.<\/b><\/p>\n<p>Compare the browser view with the text (HTML) view: while in the browser view the page source of the Visual Guide.<\/p>\n<p>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\u00a0and paste\u00a0it into your own HTML page.<\/p>\n<ul>\n<li>Copy the HTML code for a &#8220;horizontal rule&#8221; and put in your HTML page<\/li>\n<li>Save the image below to your desktop and figure out how to embed it on your HTML page<\/li>\n<\/ul>\n<p><img decoding=\"async\" class=\"aligncenter\" src=\"https:\/\/krygier.owu.edu\/krygier_html\/geog_353\/geog_353_lab\/geog353testimage.jpg\" \/><\/p>\n<p>The <b>Visual Guide<\/b> allows you to see basic HTML functions as they look in raw HTML and as they look in a WWW browser. Use the <b>Visual Guide<\/b> to start developing your HTML pages.<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<table>\n<tbody>\n<tr>\n<td bgcolor=\"#FFBB7D\"><b>Part 3: Fancy up Your HTML<\/b><\/p>\n<p><b>I&#8217;ll let you decide if and how to develop your HTML pages beyond the basics. There are many resources out there.<\/b><\/p>\n<ol>\n<li>Plenty &#8216;o<a href=\"https:\/\/www.google.com\/search?client=safari&amp;rls=en&amp;q=web+based+html+editor&amp;ie=UTF-8&amp;oe=UTF-8\" target=\"_blank\" rel=\"noopener\"><strong> web-based HTML scripting sites<\/strong><\/a> 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.<\/li>\n<li>Add some <b>images,<\/b> maybe <b>music<\/b> or <b>video<\/b> files (nothing boring please), links to stuff, change the <b>background<\/b> and <b>text<\/b> colors&#8230; add at least <b>TEN<\/b> different HTML features to your basic page and <b>document these in your Lab Log.<\/b>3. Pay attention to the <b>design and functionality<\/b> of your page &#8211; ask your instructor or the person next to you for feedback.<\/li>\n<li>A simple way to add some structure to your pages is to use Tables.\u00a0CSS (an enhanced component of HTML) provides <a href=\"http:\/\/en.wikipedia.org\/wiki\/Tableless_web_design\"><b>a better way to control web page layout,<\/b><\/a> but we don&#8217;t really have time to learn CSS in addition to basic HTML in this class (feel free to look into it on your own).\n<ol>\n<li>Think about the basic components that will need to be on each page:\n<ul>\n<li>Page title \/ subtitle<\/li>\n<li>Main content area<\/li>\n<li>Navigation links (to your other pages, OWU, etc.)<\/li>\n<\/ul>\n<\/li>\n<li>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.<\/li>\n<li>Look at the following sites showing some basic table page layouts &amp; code:\n<ul>\n<li><b><a href=\"http:\/\/www.ironspider.ca\/webdesign102\/tables4layout2.htm\">HTML Table Layouts<\/a><\/b><\/li>\n<li><b><a href=\"http:\/\/www.eobcards.com\/tablet.htm\">Tables Templates<\/a><\/b><\/li>\n<\/ul>\n<\/li>\n<li>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.<\/li>\n<\/ol>\n<\/li>\n<\/ol>\n<p>Modify the rest of your HTML pages (Main Project Page, Animation Page) so they are consistent in design with your <b>index.htm<\/b>\u00a0file &#8230; for example, the navigation links on each page should be similar from page to page.<\/p>\n<hr \/>\n<dl>\n<dd><span style=\"font-size: small\"><b>REALLY BIG TIP:<\/b> 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. <b>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.<\/b> I don&#8217;t want to be a censor, or limit your fun with WWW pages. Just use some common sense.<\/span><\/dd>\n<\/dl>\n<hr \/>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<table>\n<tbody>\n<tr>\n<td bgcolor=\"#FFA04A\"><b>Particus 4: Create a Lab Log Blog<\/b><\/p>\n<p>Create a <strong>blog<\/strong> for your lab comments (your lab log blog). In the spirit of what the internets were invented to do (share scientific information), you&#8217;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.<\/p>\n<p>If you happen to already have a blogging platform you can use that, but I&#8217;d recommend\u00a0 <a href=\"https:\/\/substack.com\" target=\"_blank\" rel=\"noopener\"><strong>substack.com<\/strong><\/a>\u00a0which is aimed at people who write. It&#8217;s a simple interface and easy to use and share.<\/p>\n<p>I&#8217;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).<\/p>\n<p>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).<\/p>\n<p>Some <strong>overviews<\/strong> of Substack<\/p>\n<ul>\n<li><a href=\"https:\/\/www.thesideblogger.com\/how-to-start-writing-on-substack\/\" target=\"_blank\" rel=\"noopener\">How to Start Writing on Substack<\/a><\/li>\n<li><a href=\"https:\/\/blog.hootsuite.com\/what-is-substack\/\" target=\"_blank\" rel=\"noopener\">What is Substack<\/a><\/li>\n<\/ul>\n<p><span style=\"font-family: inherit;font-size: inherit;background-color: #ffa04a\">Go to\u00a0<\/span><a href=\"https:\/\/substack.com\" target=\"_blank\" rel=\"noopener\"><span style=\"font-family: inherit;font-size: inherit;background-color: #ffffff\">https:\/\/substack.com<\/span><\/a><\/p>\n<ul>\n<li>Start Writing<\/li>\n<li>Create account<\/li>\n<li>If you already subscribe to any substack accounts, you can display them and recommend them (or not)<\/li>\n<li>Give it a name (you can make it your own account with whatever name and topic and just use it for class<br \/>\nfor now).<\/li>\n<li>Skip mailing list<\/li>\n<li>Skip subscribers<\/li>\n<li>Add a few relevant interests, including Technology (for Geog 112)<\/li>\n<\/ul>\n<p>The rest should be easy.<\/p>\n<p>Write an <strong>introduction<\/strong> to you, or if you are shy, make something up.<\/p>\n<p>Then Create a <strong>new entry for Lab 1<\/strong> (saved elsewhere) and send a link to me.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-806 aligncenter\" src=\"https:\/\/sites.owu.edu\/geog-112\/wp-content\/uploads\/sites\/186\/2022\/07\/thesaurus.png\" alt=\"\" width=\"281\" height=\"194\" srcset=\"https:\/\/sites.owu.edu\/geog-112\/wp-content\/uploads\/sites\/186\/2022\/07\/thesaurus.png 952w, https:\/\/sites.owu.edu\/geog-112\/wp-content\/uploads\/sites\/186\/2022\/07\/thesaurus-300x207.png 300w, https:\/\/sites.owu.edu\/geog-112\/wp-content\/uploads\/sites\/186\/2022\/07\/thesaurus-768x531.png 768w\" sizes=\"auto, (max-width: 281px) 100vw, 281px\" \/><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<table>\n<tbody>\n<tr>\n<td bgcolor=\"#FF800D\"><b>Part 5: Create a Google Maps Mashup<\/b><\/p>\n<p>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&#8217;s API (Application programming interface) which allows you to combine your data with Google Maps data.<\/p>\n<p>For example, here is a simple map mashup combining some of the KMZ\/KML files you sent me (Exercise 1) along with Google&#8217;s map data: <b>Map Mashup<\/b><\/p>\n<p>You are seeing javascript in the source code, and modifying the javascript to be appropriate for your project.<\/p>\n<p>Google&#8217;s basic bit of geographic data is a <b>KML<\/b> file. You can open and view <b>KML<\/b> files with a text processor (like NotePad). KMZ is compressed &#8211; a smaller file size but you cannot open and view the content of the file. <strong>For this exercise, please use a KML file<\/strong> (KMZ does not seem to work in the map mashup demo for some reason).<\/p>\n<ul>\n<li>A Google\u00a0<b>API key<\/b> allows you to create a map mashup using Google Maps.\n<ul>\n<li>My API key is included in the <a href=\"https:\/\/krygier.owu.edu\/krygier_html\/geog_112_lab\/mashup.htm\" target=\"_blank\" rel=\"noopener\">demo map mashup<\/a>, so you don&#8217;t have to get your own for this course.<\/li>\n<li>If you want your own API key: It&#8217;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 <a href=\"https:\/\/developers.google.com\/maps\/documentation\/javascript\/get-api-key\" target=\"_blank\" rel=\"noopener\">here<\/a>.<\/li>\n<\/ul>\n<\/li>\n<li>Modify the demo Map Mashup we just viewed <b>here<\/b> so that it works for your project.\n<ul>\n<li>As with the basic HTML files you got earlier in this exercise, <strong>view the source, copy everything, paste into a new file (mashup.htm) and save the file to your HTML folder. <\/strong>Make sure your other HTML files correctly link to the mashup.htm file.<\/li>\n<li><b>Only modify the things detailed below:<\/b><b>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&#8217;t know where you made the error.<\/b><\/li>\n<li>Change the map <b>title<\/b> to something appropriate<\/li>\n<li>You can put <b>text<\/b> or <b>images<\/b> describing the map and sites on it above and below your map; in the HTML file, the places for normal HTML stuff are indicated.<\/li>\n<li><strong>SKIP this step, Spring 2022: Modify the latitude and longitude of the single point location in the mashup<\/strong> (it&#8217;s my home lat\/long) to your own home lat\/long:\n<ul>\n<li>To get the lat\/long of your home: While in Google Earth, <b>right-mouse-click<\/b> on a placemark at your home location and select <b>Properties<\/b> 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\u00b017&#8217;2.74&#8243;N) go to Google Earth&#8217;s <b>Preferences<\/b> and change <b>Show Lat\/Long<\/b> to <b>Decimal Degrees.<\/b> Replace the coordinates of the points (Krygier&#8217;s home) in the HTML file with your coordinates.<\/li>\n<\/ul>\n<\/li>\n<li>Get a <strong>single KML file<\/strong> of all your saved places for your state:\n<ul>\n<li>in Google Earth: create a folder called\u00a0<strong>mapsites<\/strong><\/li>\n<li>move all of your saved locations for your state into that folder<\/li>\n<li>right mouse click on the folder and <strong>Save place as&#8230;<\/strong><\/li>\n<li>change file type to <strong>.kml<\/strong><\/li>\n<li>keep the name mapsites: thus <strong>mapsites.kml<\/strong><\/li>\n<li>put the .kml file in your HTML folder on the C drive<\/li>\n<li>put the URL to your .kml file in the map mashup code: it should be <strong>https:\/\/go.owu.edu\/~yourusername\/mapsites.kml<\/strong> (of course, change yourusername to your actual OWU user name.<\/li>\n<li>the map mashup won&#8217;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)<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<p><strong>A really important step:<\/strong><\/p>\n<ul>\n<li>Check your OWU web server space exists: <strong>https:\/\/go.owu.edu\/~yourowuusernamehere<\/strong>\n<ul>\n<li>You should see this: ** this new home page was generated on request for (yourowuusernamehere) but has not yet been customized **<\/li>\n<li>if not, let your instructor know<\/li>\n<li>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.<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<table>\n<tbody>\n<tr>\n<td bgcolor=\"#C06A45\"><b>Part 6: Pullins&#8217; it all together and Putsin&#8217; it on the Web<\/b><\/p>\n<p><b>Complete modifications on your HTML pages:<\/b> they should all link together and look decent:<\/p>\n<ul>\n<li>A customized home page (index.htm)<\/li>\n<li>A customized project page (project-page.htm)<\/li>\n<li>A customized map page (maps.htm)<\/li>\n<li>A customized mashup page (mashup.htm) showing your state places (mapsites.kml)<\/li>\n<li>A link to your lab log blog updated thru Lab 2<\/li>\n<\/ul>\n<p><b>Upload your four interlinked HTML pages to your webspace<\/b> on the OWU server using FTP (file transfer protocol) software.<\/p>\n<p>You should have some server space for your web pages already created on the OWU server. If you don&#8217;t, ask your instructor for help.<\/p>\n<p>Find <b>FileZilla Client<\/b> 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:<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/krygier.owu.edu\/krygier_html\/geog_353\/geog_353_lab\/filezilla01.jpg\" \/><\/p>\n<p>For the <b>host<\/b> use <b>sftp:\/\/cc.owu.edu<\/b>, and for the <b>Username<\/b> and <b>Password<\/b> use your OWU email ID and Password, then hit <b>Quickconnect.<\/b><\/p>\n<p>Believe it or not, <b>sftp<\/b> stands for <b>s<\/b>oft <b>f<\/b>rickin&#8217; <b>t<\/b>oilet <b>p<\/b>aper.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"\" src=\"https:\/\/krygier.owu.edu\/krygier_html\/geog_353\/geog_353_lab\/filezilla02.jpg\" width=\"517\" height=\"369\" \/><\/p>\n<p>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).<\/p>\n<p>Navigate to the directory where your HTML files are saved on your computer using the left window. Open the <b>public_html<\/b> directory in the right window. <b>Don&#8217;t fool around with or delete any other files on the server.<\/b><\/p>\n<p>All HTML files should be put in the <b>public_html<\/b> directory on the WWW server. There should be a default <b>index.htm<\/b> file already in your <b>public_html<\/b> directory on the OWU WWW server: right mouse click on this file and delete it.<\/p>\n<p>Select all your HTML files and any images from your HTML folder on the PC and drag them to the <b>public_html<\/b> folder.<\/p>\n<p>Disconnect and quit the FileZilla software when you are done.<\/p>\n<p>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.<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p>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.<\/p>\n<blockquote style=\"border: 0px solid #666;padding: 10px;background-color: #f2f2f2\"><p>Completing the Lab<\/p><\/blockquote>\n<p>By end of class on the due date: email me the link to your blog entry for Lab 2. This should include<\/p>\n<ul>\n<li>a link (go.owu.edu\/~whatever) to your completed web pages (main page, main project page, maps page, map mashup)<\/li>\n<li>a link to your lab blog with an entry for lab 1 and lab 2<\/li>\n<li>Any problems with this lab, and solutions to the problems<\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>Update 9\/10\/2022 100 points Assign: Wednesday, Sept. 7 Due: Monday, Sept. 19, with an in-class demo of HTML pages (end of the class meeting) Visual Guide to HTML: basics of HTML Introduction &amp; Overview An HTML (HyperText Markup Language) file <span class=\"readmore\"><a href=\"https:\/\/sites.owu.edu\/geog-112\/schedule-content\/lab-2-html-map-mashups\/\">Continue Reading<\/a><\/span><\/p>\n","protected":false},"author":138,"featured_media":0,"parent":52,"menu_order":4,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-69","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/sites.owu.edu\/geog-112\/wp-json\/wp\/v2\/pages\/69","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/sites.owu.edu\/geog-112\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/sites.owu.edu\/geog-112\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/sites.owu.edu\/geog-112\/wp-json\/wp\/v2\/users\/138"}],"replies":[{"embeddable":true,"href":"https:\/\/sites.owu.edu\/geog-112\/wp-json\/wp\/v2\/comments?post=69"}],"version-history":[{"count":54,"href":"https:\/\/sites.owu.edu\/geog-112\/wp-json\/wp\/v2\/pages\/69\/revisions"}],"predecessor-version":[{"id":858,"href":"https:\/\/sites.owu.edu\/geog-112\/wp-json\/wp\/v2\/pages\/69\/revisions\/858"}],"up":[{"embeddable":true,"href":"https:\/\/sites.owu.edu\/geog-112\/wp-json\/wp\/v2\/pages\/52"}],"wp:attachment":[{"href":"https:\/\/sites.owu.edu\/geog-112\/wp-json\/wp\/v2\/media?parent=69"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}