Topics Covered
- Making a web page from scratch
- Putting our links into Google Earth
- Using a template for your project write up
Setting up a folder for use with our web server
You only need to do create a new folder in your home folder for people to see the web pages you can create for this class.
- make a folder in /home/yourusername called public_html or wait until the Seamonkey exercise below to create a folder.
Creating a web page from scratch
Basic HTML
You may have noticed that if you opened your html document from Stats Can instead of your csv file there was a bunch of text many of which were surrounded by <> signs. The < and > are an essential part of HTML. Use google to determine what the letters in the HTML acronym represent as well as learning some of the basics of HTML.
Try: W3schools and follow the links for learning html, and create a basic web page. The answer to almost all things associated with HTML (or web development as a whole) is in this web site. Under the HTML tutorials link (on the top left of the page) there are try it yourself examples of HTML coding. With this viewer you can create pages and look at them instantly.
You may have noticed that web pages can be created by using only a text editor. There are many types of software out there that can help you in creating elaborate pages, but it is very helpful to be able to open up your documents in a text editor if necessary. Wordpad is not really a good editor for that, and editors such as gedit on Linux or Notepad++ for a Windows OS, provide a better presentation of HTML. Check out gedit (type gedit in the Linux shell – it is the default editor on the lab machines) or Notepad++ on osmotar later on once you have a page to edit.
Using Sea Monkey to create web pages
We are going to use Mozilla’s simple web page editor to create a basic page for your GIS lab account. First copy the text from the w3schools page into wordpad or gedit . How does it look? Now open Notepad++ and paste the same content into it. What do you notice? Editors that are better equipped to deal with mark up languages such as HTML – give a much easier representation of the page content
Next create a folder called public_html in your home folder (i.e. k:\public_html). Save the contents of the html file you have been playing around with called index.html in this newly created folder.
Open up Firefox and type “www.gis.unbc.ca/~username/” in the address bar. What just happened here? Do you see the relationship between your public_html folder and locations to be found at www.gis.unbc.ca? Why did we not have to type index.html after our usernames?
Open up SeaMonkey (Mozilla’s web suite) and click File –> Open file to open the file you just saved in wordpad/Notepad++ (you may have to close the editor first). This should appear as a web page. Now click File –> Edit page.
This should bring up mozilla composer, a html editor. This is a handy tool for making web pages. Play around with it and Scott will show some of the things it can be used for. You should try to change the background, insert an image and create a link.
The composer can also be opened by locating it under the Window pulldown menu. From there you can navigate to the html file you wish to edit in your public_html folder. The composer editor also has a source view of the web page content similar to text editors. You can access this view by clicking on the source tab in the bottom right corner. You can see the tags that are created in the page in this view. For more information on these tags, you type in the name of the tag into the search box in the w3schools pages(top right corner).
Putting your project into Google Earth
There are many things you can do to put html into Google Earth objects. The most simple thing you can do to add specific web pages you created for your project, is to add a line in the content area of the properties of each google earth entity (such as polygons, folders, placemarks). With this in mind, we can take whatever web pages you create in SeaMonkey into Google Earth. You can add comments, links to images and so on into the Description tab for each feature.
This is achieved by copying the html content you created in SeaMonkey from the <body> to the </body> tag (inclusive). Here is an example – it looks long, but it is quite simple to make
<body>
<p>Hello fellow socccer fans
<br>
</p>
<table cellspacing="2″ cellpadding="2″ border="1″ width="100%">
<tbody>
<tr>
<td valign="top">
<img src="https://gis.unbc.ca/~emmons/images/messi.jpeg"
alt="" width="300″ height="168″><br>
</td>
<td valign="top">
<a href="https://youtu.be/UvZx5pMHEE0″>
Iceland qualifies for World Cup</a>
<br>
</td>
</tr>
<tr>
<td valign="top">
Just testing
<br>
</td>
<td valign="top">Iceland – smallest country to qualify for World Cup<br>
</td>
</tr>
</tbody>
</table>
<p>
<br>
</body>Linking to and editing the sample project template
Make a folder called geog204_project in your public_html folder and copy the file projecttemplate.html from the /home/labs/geog204/webtutorial/ (L:\labs\geogo204\webtutorial – for those using windows) folder into this new folder. Rename this file index.html. Make another folder in your public_html folder called images (if you have not already done so) and copy the files 2.gif and logo_gis.jpg from the same webtutorial folder into the images folder.
Create a link from your new GIS lab web page to the geog204_project/index.html page in SeaMonkey. Now open the 204_project/index page in mozilla. You should see two broken links for the images you copied. Lets fix that and review the rest of the page.
You now can make a page for your project, as well as create any other HTML document. You can create a UNBC web page by setting up the same folder at web.unbc.ca. If you are interested get Scott to show you how to activate it. All that is required is that you set up a folder called public_html in your folder on the UNBC unified file system and copy web materials there.