Lab 4: Basic HTML, CSS and JavaScript

Goals

The objective of this lab was to introduce us to languages including JavaScript in order to give us a better understanding of how to develop Web GIS applications using the ArcGIS API for JavaScript. Not only were students exposed to the basic coding techniques and syntax of HTML (hypertext markup language) and JavaScript but also CSS (cascading style sheets). The overall goal of this lab was to give us the ability to develop our own website using all three languages from scratch.

Methods

Part 1: Developing a Web Page Using HTML Tags

In this first part of the lab we used Notepad++ to write basic HTML tags in order to introduce our web page with some basic information. Notepad++ is a text editor which is used for coding and editing various script languages including HTML, JavaScript and more. The first part of our code (Fig. 1: left) and the output (Fig. 1: right) defined the script as HTML code as well as created a set of three headers. Every additional header from the first one is smaller than the next because of their hierarchical nature. 

(Fig. 1) This image shows the first set of code we created on the left and the output of this code in a web browser on the right.

Next, we created a new paragraph using the <p> tag and created an unordered list with a title which was bolded using the <strong> tag. To create the unordered list we used the <ul> tag and before each line of text used the <li> tag . As can be seen in Fig. 2 on the left is the code used to create the list of my hobbies for this part of the page and on the right is the output. 

(Fig. 2) On the left is the code used to create the output HTML page on the right.

Part 2: Styling the Various Sections of a Webpage
Once the base of the webpage is created we created the CSS to stylize it. To do this we again used Notepad++ but created a new document which we titled "overall design" in order to keep track of what the purpose of each text file was. We started out buy giving the body a background color as well as defining the font for the webpage text. Then we adjusted the wrapper and header. After the CSS file has been created the next step is to link it to the HTML file created in Part 1. Once this is done we can see the results of the styling code in the HTML code (Fig. 3). We are then able to continue to edit the CSS by adjusting the settings of the footer and sidebar. 

(Fig. 3) The upper left screen shows the overall HTML code used to create the webpage on the bottom while the code on the right hand screen is the CSS file which was used to add the colors to the webpage.

The next thing we can do to improve our webpage is adding forms to the HTML code. To do this we simply use the <form> tag and specifying the labels for the input value and the type of information to be inputted into the form field. The code for this step can be seen in Fig. 4 on the left and the output can be seen in Fig. 4 on the right. 

(Fig. 4) On the left hand side of this image the coding used to create the form field can be seen while the result of the code can be seen on the webpage on the right.

Another feature we added an image of the web application we created in Lab 3 as well as the link which would directly link the end user to the application itself. We were even able to add a border to the image in the CSS file. The code for this step can be seen in Fig. 5 on the left and the output can be seen in Fig. 5 on the right. 

(Fig. 5) This image shows the complete list of code for the CSS.

Part 3: Introduction to JavaScript

In part 3 of this lab we developed a simple way to fix the results box which was not formatted correctly in step 2. To do this we created a new Notepad++ file and declared the JavaScript language by applying the function of write results. The writeResults function in JavaScript gives a function a definition or parameter named a result. Then the variables which are declared and the arguments are executed by the function and are written within the { curly brackets }. We then wrote out our code and added comments to describe each step so if we reviewed it later we would understand our process. The Code for this process can be seen in Fig. 6. The final step in this process was to link the JavaScript file to the original HTML document we created in step 1 to include the code of the JavaScript file.

(Fig. 6) The screen on the left shows the working HTML code used to produce the webpage and the image on the right displays the JavaScript which was created and linked to the HTML code.

Results

The ultimate goal of this lab was for us to be able to create our own customized webpage. After being given the following scenario: 

"You have just started a company that provides Web GIS solutions to customers in a county and state of your choice. One of the most important method of disseminating your company’s services to existing and prospective customers is through a website. You will develop a webpage with 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. DR. CYRIL WILSON UNIVERSITY OF WISCONSIN-EAU CLAIRE 28 
 Links to the Web GIS application you developed in Lab 3 and two non-secured Web GIS applications from Esri JavaScript 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."

The result of this portion of the lab and the final goal can be seen in the image below along with the code which was used to create it. 

NOTE: I did have some fun with this activity and it is a bit silly. I did that by choosing a fun design and the idea, the skills I learned really stuck with me. 

(Fig. 7) The webpage I created from scratch using the skills I learned throughout this lab exercise.

Sources

The UWEC logo was obtained from the UW-Eau Claire website and part of the codes which were used in developing the applications were from Sylvia Richardson of Girl Develop It via Github (2015).