← Advanced GIS

In-class Exercises

Part 1: Putting things online with Glitch

  1. If you don't have one already, create a GitHub account.
  2. Use your GitHub account to log in to Glitch.
  3. Click New Project then hello-webpage.
  4. Click the assets folder in the left of the page.
  5. Upload a few images and get the URLs for them.

Part 2: HTML

  1. Open the file index.html in the Glitch site from the previous part.
  2. Click Show, then In a new window near the top left of the page and see the current page.
  3. Find the <body> and </body> in index.html.
  4. On the lines between the two body tags, add some text.
  5. Click Show live again or return to the tab where you saw the page before. You should see your text there now too.

Part 3: HTML tags

  1. Open the file index.html in the Glitch site from the previous part.
  2. Add a link in the body tags: 
    <a href="http://example.com">visit example.com</a>
    Change the URL and text to something more interesting. Refresh the page in your browser.
  3. Show one of the images you uploaded on your page. Start with: 
    <img src="" />
    and put the URL for the image in the quotation marks.
  4. Experiment with other tags from the HTML reference.

Part 4: Embedding a Carto map in HTML

  1. Open the file index.html in Glitch.
  2. Open a map in Carto, go to Publish > Embed it and copy the HTML.
  3. Paste the embed code in the body of your HTML page in Glitch.

Part 5: HTML in Carto

  1. Open one of your Carto maps.
  2. Link to the data source from the legend.
  3. Change the popups using some HTML.