Advanced GIS

Assignment 5: HTML

We talked about HTML this week, and we'll exercise some of our new knowledge around it by using HTML to customize Carto maps and make our own pages. Please do not use CSS (styles) for now. Focus on HTML for this assignment.

Resources

  1. My HTML Reference should get you started.
  2. If you're looking to learn HTML from another angle, codecademy has a course in HTML that is usable and interactive.
  3. The Mozilla Developer Network is a great resource for HTML and other web documentation.
  4. css-tricks has good beginner-to-intermediate tutorials, and you might appreciate HTML & CSS -- The VERY Basics. As stated earlier, please stick to HTML for now and we'll cover CSS next week.

Part 1: Add some HTML to a Carto map

Open a Carto map from a previous assignment and:

  1. Edit the legend to add a link (or links) to your datasource(s).
  2. Make a change to the HTML for the pop-ups for your map. This can be as simple as adding <strong> elements to emphasize some text, or you could link to other pages or show images. Use this video for some pointers. Ignore the CSS for now!

Please focus on making meaningful and presentable changes to your map.

Part 2: HTML pages with embedded Carto maps

Create an HTML page from scratch and add a Carto map to it.

  1. Create an HTML page.
  2. Edit the HTML page:
    • embed the Carto map from Part 1 in the page as an iframe
    • add some text
    • add at least one image
    • add at least one link
    • experiment with some other HTML tags as outlined in the HTML Reference
  3. Put the HTML page online using GitHub Pages, using this video as a guide.

Submitting your work

Submit a link to the map you edited in Part 1 and link to the page you posted online for Part 2.

You may optionally choose to include a short paragraph response or summary of your work.