Advanced GIS

Assignment 7: HTML

We talked about HTML this week, and we'll exercise some of our new knowledge around it by using HTML to customize CartoDB visualizations 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 CartoDB visualization

Open a CartoDB visualization 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 infowindows for your visualization. This can be as simple as adding <strong> elements to emphasize some text, or you could link to other pages or show images.

Part 2: HTML pages with embedded CartoDB visualizations

Now we'll create an HTML page from scratch and add a CartoDB map to it.

  1. Create an HTML page.
  2. Edit the HTML page:
    • embed the CartoDB visualization from Part 1 in the page as an iframe
    • add some text
    • add at least one image
    • add at least one link
  3. Put the HTML page online using any method you like. The simplest way to do this is through Neocities—create an account and upload your page. If you're feeling adventurous, why not give GitHub Pages a go?

Submitting your work

Submit a link to the visualization you edited in Part 1 and a 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.