Web GIS: Learning HTML, CSS and JavaScript

Goals:

This lab was to introduce the basics of creating an HTML page, styling it with CSS, and including JavaScript enabled features. The goal of this lab was to build coding confidence so I could build my own webpage. Later, I will use these skills to make web pages with ArcGIS API for JavaScript.

Methods:

Part 1: Developing a web page using HTML tags

In order to learn the basics of creating a webpage, we started with HTML. In order to create an HTML page, first you need to declare the document type at the top of the page, with <!DOCTYPE html>. After declaring the document type, all further code must be written between the tags <html> and </html>. The name shown at the top of your browser is called the title, and it is set by the <title> tags inside the <head> tags (Figure 1, 2).

Figure 1: The document type, <html> tag, and title.

Figure 2: The title, as it appears in google chrome.

Next, the body of the document is created between the <body> and </body> tags. I used a <div> tag with the id="header" to create a subdivision called "header" within the body text. Within the header I used varying levels of header tags from <h1> to <h3> to write important information in the heading of my website (Figures 3, 4).

Figure 3: My header text.

Figure 4: Examples of the varying header options
using taxonomic levels as an example.

After creating the headers, I make an unordered list of my hobbies, using the unordered list tag <ul>, and the list item <li> tags. I used the <strong> tag to bold the text "these are my hobbies" within its own paragraph made with the <p> tags.

Figure 5: Code for the unordered list.

Figure 6: The result of the code in Figure 5.
Note how <strong> formatted "These are my hobbies"

Part 2: Styling your web page with the use of CSS

Cascading Style Sheets (CSS) is how html pages are customized to be more aesthetically appealing. CSS allows the customization of background colors, margin sizes, text colors, fonts, and borders. CSS works with html by utilizing <div> id's. If I wanted to change the styling for the area holding most of my text, I would use put it within the <div id="main"> my html code. In CSS, I would write the styling code within #main { } to have it link to the div id I placed in the html (Figure 7).

Figure 7: The CSS for my webpage.

Next, I wrote a form to receive sentences as inputs from viewers to the webpage (Figures 8,9).

Figure 8: Code for the input window.

Figure 9: The resulting input window.

After coding the form, I wrote code for a results box showing some JavaScript code I wrote, and added an image of a map I created as part of an earlier lab.

Figure 10: The image with the results box above it.

Part 3: Introduction to JavaScript

To gain a basic understanding of JavaScript, I created results to fill the box described in Part 2. The code first had to find where it was to place the answers, then create a paragraph. After creating the paragraph, it was to create a string of text to put inside the paragraph. After placing the new text in the paragraph, it put the new paragraph inside the div tagged "resultsBox".

Figure 11: The JavaScript Code, and the results above it.

Results:

After learning the basics of HTML, CSS and JavaScript, I was to make my own webpage. The webpage needed to have the following features:

The name of your proposed company and other relevant information
Company Logo.
Links to resources that will be useful to your end-users.
Links to the Web GIS application you developed in Lab 3 and two non-secured Web GIS applications from Esri JavScript website.
An ordered list of six services that your company will be delivering. These services should be highlighted with a catchy color other than black.
A form that will enable end-users to search your website and company services
At least two pictures that are of importance to your proposed company.

Here's the resulting web site: