IIIF for Educators

Pic-to-Graph

click to copy lesson html ...

Pic-to-Graph

💡 Concept

Pictographic image of a human hand hovering over water from Florentine Codex, Book 11

Code is a string of characters that signify something according to specific rules and conventions. The meaning of the symbols might be very different from how they appear at first glance. They can also have relational or "syntactical" significance: what they mean can depend on how they are positioned relative to each other. This is as true for historic indigenous pictographic images as it is for 21st-Century digital technologies

🖥️ Activity

For our first hands-on "digitl" Lab Activity, we will jump into the deep end. Using HTML code, which is symbolized by the three characters </>, we will literally bring into being a thing to view and play with. Following Steps, below, you will each solve a puzzle and share your impressions of it.

🧱 Materials

In the gray box below is some HTML code. 

<table style="border-collapse: collapse; width: 930px;" border="1">
            <tbody>
                <tr>
                    <td style="width: 155px; height: 155px;"><img src="https://media.getty.edu/iiif/image/dfe34df8-66ae-4e08-82e6-60329a6385df/1850,5700,350,350/max/0/default.jpg" alt="Image detail" /></td>
                    <td style="width: 155px; height: 155px;"><img src="https://media.getty.edu/iiif/image/dfe34df8-66ae-4e08-82e6-60329a6385df/2550,6050,350,350/max/0/default.jpg" alt="Image detail" /></td>
                    <td style="width: 155px; height: 155px;"><img src="https://media.getty.edu/iiif/image/dfe34df8-66ae-4e08-82e6-60329a6385df/1500,5350,350,350/max/0/default.jpg" alt="Image detail" /></td>
                    <td style="width: 155px; height: 155px;"><img src="https://media.getty.edu/iiif/image/dfe34df8-66ae-4e08-82e6-60329a6385df/1500,5700,350,350/max/0/default.jpg" alt="Image detail" /></td>
                    <td style="width: 155px; height: 155px;"><img src="https://media.getty.edu/iiif/image/dfe34df8-66ae-4e08-82e6-60329a6385df/2900,5000,350,350/max/0/default.jpg" alt="Image detail" /></td>
                    <td style="width: 155px; height: 155px;"><img src="https://media.getty.edu/iiif/image/dfe34df8-66ae-4e08-82e6-60329a6385df/2900,5350,350,350/max/0/default.jpg" alt="Image detail" /></td>
                </tr>
                <tr>
                    <td style="width: 155px; height: 155px;"><img src="https://media.getty.edu/iiif/image/dfe34df8-66ae-4e08-82e6-60329a6385df/2900,5700,350,350/max/0/default.jpg" alt="Image detail" /></td>
                    <td style="width: 155px; height: 155px;"><img src="https://media.getty.edu/iiif/image/dfe34df8-66ae-4e08-82e6-60329a6385df/1850,6050,350,350/max/0/default.jpg" alt="Image detail" /></td>
                    <td style="width: 155px; height: 155px;"><img src="https://media.getty.edu/iiif/image/dfe34df8-66ae-4e08-82e6-60329a6385df/2550,5000,350,350/max/0/default.jpg" alt="Image detail" /></td>
                    <td style="width: 155px; height: 155px;"><img src="https://media.getty.edu/iiif/image/dfe34df8-66ae-4e08-82e6-60329a6385df/2550,5350,350,350/max/0/default.jpg" alt="Image detail" /></td>
                    <td style="width: 155px; height: 155px;"><img src="https://media.getty.edu/iiif/image/dfe34df8-66ae-4e08-82e6-60329a6385df/3250,5700,350,350/max/0/default.jpg" alt="Image detail" /></td>
                    <td style="width: 155px; height: 155px;"><img src="https://media.getty.edu/iiif/image/dfe34df8-66ae-4e08-82e6-60329a6385df/2900,6050,350,350/max/0/default.jpg" alt="Image detail" /></td>
                </tr>
                <tr>
                    <td style="width: 155px; height: 155px;"><img src="https://media.getty.edu/iiif/image/dfe34df8-66ae-4e08-82e6-60329a6385df/2200,6050,350,350/max/0/default.jpg" alt="Image detail" /></td>
                    <td style="width: 155px; height: 155px;"><img src="https://media.getty.edu/iiif/image/dfe34df8-66ae-4e08-82e6-60329a6385df/3250,5000,350,350/max/0/default.jpg" alt="Image detail" /></td>
                    <td style="width: 155px; height: 155px;"><img src="https://media.getty.edu/iiif/image/dfe34df8-66ae-4e08-82e6-60329a6385df/2200,5700,350,350/max/0/default.jpg" alt="Image detail" /></td>
                    <td style="width: 155px; height: 155px;"><img src="https://media.getty.edu/iiif/image/dfe34df8-66ae-4e08-82e6-60329a6385df/1500,6050,350,350/max/0/default.jpg" alt="Image detail" /></td>
                    <td style="width: 155px; height: 155px;"><img src="https://media.getty.edu/iiif/image/dfe34df8-66ae-4e08-82e6-60329a6385df/3250,5350,350,350/max/0/default.jpg" alt="Image detail" /></td>
                    <td style="width: 155px; height: 155px;"><img src="https://media.getty.edu/iiif/image/dfe34df8-66ae-4e08-82e6-60329a6385df/2200,5000,350,350/max/0/default.jpg" alt="Image detail" /></td>
                </tr>
                <tr>
                    <td style="width: 155px; height: 155px;"><img src="https://media.getty.edu/iiif/image/dfe34df8-66ae-4e08-82e6-60329a6385df/1850,5350,350,350/max/0/default.jpg" alt="Image detail" /></td>
                    <td style="width: 155px; height: 155px;"><img src="https://media.getty.edu/iiif/image/dfe34df8-66ae-4e08-82e6-60329a6385df/1850,5000,350,350/max/0/default.jpg" alt="Image detail" /></td>
                    <td style="width: 155px; height: 155px;"><img src="https://media.getty.edu/iiif/image/dfe34df8-66ae-4e08-82e6-60329a6385df/2550,5700,350,350/max/0/default.jpg" alt="Image detail" /></td>
                    <td style="width: 155px; height: 155px;"><img src="https://media.getty.edu/iiif/image/dfe34df8-66ae-4e08-82e6-60329a6385df/1500,5000,350,350/max/0/default.jpg" alt="Image detail" /></td>
                    <td style="width: 155px; height: 155px;"><img src="https://media.getty.edu/iiif/image/dfe34df8-66ae-4e08-82e6-60329a6385df/2200,5350,350,350/max/0/default.jpg" alt="Image detail" /></td>
                    <td style="width: 155px; height: 155px;"></td>
                </tr>
            </tbody>
        </table>

🪜 Steps

Digitl Slide Activity
Read the following steps through, and then proceed one at a time through the activity. (Click to open and close)
  1. Take a look at the characters in the gray box above. Squint a little, then look closely, and see what patterns emerge at different levels of "zoom,' such as repetition, symmetry, formulas. 
  2. Highlight and copy the entire block of code.
  3. Scroll to the bottom of the screen, and click Reply
  4. When the "WYSIWYG" (what you see is what you get) editor appears, look just under the box to the right for the HTML symbol </> and click it. You should see a gray field and the number 1.
  5. Paste your code into the field.
  6. Click the HTML symbol </> again to switch back to the default editor. You should see something you can play with.
  7. To the right of the HTML </> symbol is an eight-dot "resize" symbol 8 dot computer symbol, which you can slide down to enlarge your WYSIWYG editing field. Use it to view the full image set at once (you may need to do this a couple times).
  8. Following standard rules of a sliding puzzle, your task is to unscramble an image: click into any image and drag or cut and paste it into the only empty box, until you have "solved" the puzzle by putting all its scrambled pieces in the right order.
  9. After you've put everything in its place, click the HTML </> symbol one more time, and look at the code you re-produced. What similarities and/or differences do you see from the sequence you started with, if any?

✉️ Share

Once you have completed your puzzle or run out of time, click Post Reply and it will be displayed in this discussion forum.

Then reply to your own post, and if you like, add a reflection on the process.

🤝 Collaborate

After you have posted your completed puzzle and reflection, take a look at submissions by others: how far did they get? 

copyright 2026