Lab 4: Basic HTML, CSS, and JavaScript
Goal
This lab exercise was designed to introduce us to the various coding languages that are used in developing Web GIS applications with ArcGIS API for JavaScript. The lab introduced us to using HTML, CSS, and JavaScript for the different parts of creating a webpage. After completing this lab, we were able to develop a simple webpage using the three coding languages simultaneously.
Methods
Part 1 of the lab exercise involved building the bare bones of the webpage using HTML. The result of creating the webpage using just HTML results in a boring webpage that displays the text in black and white, with no color or dynamic attributes. We created the header for the webpage as well as an unordered list, which in this case was simply a list of our favorite hobbies.
Part 2 is where the webpage was made more interesting. We added an input form to the top of the webpage where, with extra coding, an end user could give their opinion on the quality of the webpage. We also added a logo image in the header of the webpage, and an image of the web application created in the last lab exercise. Next, we were introduced to using cascading stylesheets (CSS) to give the webpage some color and make it look more professional once our CSS document was referenced in the HTML document. We were able to edit the color of just about any element on the webpage, such as the header, footer, and background. We then added a results box to our HTML code. At that time, it had nothing in it, so we had to use JavaScript to create a method that writes text to the results box.
Part 3 is where we were able to use JavaScript, in this case to create a method that writes text to our results box. Once created, our JavaScript code wrote a message to the results box that then showed up on the webpage once the JavaScript document was referenced in the HTML document. Once this step was completed, the webpage was complete (Figure 1).
Finally, we were able to create our own customized webpage using skills learned in the first three parts (Figure 2). We had the freedom to use our own colors, pictures, logo, and links.
Results
Sources
This lab exercise was designed to introduce us to the various coding languages that are used in developing Web GIS applications with ArcGIS API for JavaScript. The lab introduced us to using HTML, CSS, and JavaScript for the different parts of creating a webpage. After completing this lab, we were able to develop a simple webpage using the three coding languages simultaneously.
Methods
Part 1 of the lab exercise involved building the bare bones of the webpage using HTML. The result of creating the webpage using just HTML results in a boring webpage that displays the text in black and white, with no color or dynamic attributes. We created the header for the webpage as well as an unordered list, which in this case was simply a list of our favorite hobbies.
Part 2 is where the webpage was made more interesting. We added an input form to the top of the webpage where, with extra coding, an end user could give their opinion on the quality of the webpage. We also added a logo image in the header of the webpage, and an image of the web application created in the last lab exercise. Next, we were introduced to using cascading stylesheets (CSS) to give the webpage some color and make it look more professional once our CSS document was referenced in the HTML document. We were able to edit the color of just about any element on the webpage, such as the header, footer, and background. We then added a results box to our HTML code. At that time, it had nothing in it, so we had to use JavaScript to create a method that writes text to the results box.
Part 3 is where we were able to use JavaScript, in this case to create a method that writes text to our results box. Once created, our JavaScript code wrote a message to the results box that then showed up on the webpage once the JavaScript document was referenced in the HTML document. Once this step was completed, the webpage was complete (Figure 1).
Finally, we were able to create our own customized webpage using skills learned in the first three parts (Figure 2). We had the freedom to use our own colors, pictures, logo, and links.
Results
 |
| Figure 1. This is a snippet of the practice webpage created in parts 1-3 of the lab exercise. file:///Z:/STRUMBBJ2408/Lab_4/index_BS.html |
 |
| Figure 2. This is a snippet of the custom webpage we were able to create in part 4 of the lab exercise. file:///Z:/STRUMBBJ2408/Lab_4/Part_4.html |
Sources
UWEC logo: UW-Eau Claire website
Parts of the code used to develop the webpage were abstracted from Sylvia Richardson of Girl Develop It via Github (2015)
Comments
Post a Comment