UD Logo
School of Education
Textbook Cover

Computational Thinking on the Internet

Chapter 5: HTML Coding

After completing Chapter 5, you will know how to:

Chapter 5 steps you through the process of creating your Web page résumé. This is the same process I followed when I created my Web page résumé. Feel free to use my résumé as your guide, or let your imagination run free and create a unique design.

End of Chapter Labs

Lab Project 5.1: Making HTML Images Accessible

For users who can see, it may suffice to put images onscreen via the <image> tag’s basic syntax. If the image filename is MountEverest.jpg, for example, the following basic <image> tag puts it onscreen:

<image src="MountEverest.jpg">

What about someone who cannot see? How do you make it possible for a seeing-impaired user to know what is pictured onscreen?

People who cannot see access the Web via special software called a Screen Reader. True to its name, the Screen Reader will read aloud what a sighted user sees onscreen.

To provide the screen reader with a textual alternative that the screen reader will speak when it encounters the <image> tag, the World Wide Web consortium invented the alt parameter. The following example shows how it works:

<image src="MountEverest.jpg" alt="Mount Everest">

As you learn later in this book in Chapter 10, Web Accessibility, the United States and most of the world place a high priority on making the Web accessible to users with special needs. In the United States, for example, you violate a law called Section 508 if you do not provide alternate text for images on your Web pages.

In this lab, you provide alternate text for each image on your Web page. You do this by using your code editor to add the alt tag to each image on your page. If your instructor asked you to hand in this page to show how you have learned to create alternate text, make sure you put your name at the top of the page, then save it on your computer and follow any other instructions you may have been given for submitting this assignment.

Lab Project 5.2: Google Photos

Imagine a place on the Web where you can upload all your photos free of charge. If you don’t have time to organize them yourself, robots create slide shows by recognizing patterns in your images and performing facial recognition to group your photos automatically according to time and place and the people who are in them. Would you like to be able to do some of these things? Then you need to check out Google Photos.

Behind the scenes, the programmers who created Google Photos had to do a lot of computational thinking. This involved separating this huge problem into subtasks that different teams of programmers could work on solving. Follow this YouTube link to a video of Google geniuses explaining how they did this kind of computational thinking to create the library of algorithms and functions that power Google Photos.

Some of the features include making your photos searchable by the people, places and things in them, with no tagging required on your part. You get movies and panoramas from your photos, and there is advanced editing that lets you apply content-aware filters and adjust lighting. You can make collages of photos you took on a certain day.

In this lab, you get your free account at Google Photos and upload a collection of your photos there. Then you try out the various features described here. See how they work for you. Then use your word processor to write an essay reflecting on your findings. In this essay, write about the various features you tried. Do you think the Google engineers achieved the goal they were brainstorming in their video of Google geniuses talking about this? What features need more work, and how do they need to be improved? What other features would you like to see Google Photos enable you to do? Do you think it is realistic for algorithms and functions to be created to do these new features you are suggesting?

If you would like to make one of your Google photos appear on your Web page, follow these steps to create its HTML image tag:

  1. Go into your Google Photos account and click to select the image you want on your Web page.
  2. Click the Share icon to pop out the sharing options.
  3. In the bottom-left part of the options window, use the Create Link tool to pop out the Create Link to Share dialog, then click the Create Link button.
  4. When the HTTP link to your image appears, click the Copy button to copy the link onto your clipboard.
  5. In the HTML code of your web page, type your image tag in the following format:
    <image src="" alt="">
  6. Position your cursor in between the src="" quote marks and type Control-V (Windows) or Command-V (Mac) to make your image’s HTTP address be the image tag’s source.
  7. In between the alt="" quote marks, type some alternate text describing the image to benefit users with special needs.
If your instructor asked you to hand in this essay, make sure you put your name at the top of the page, then save it on your computer and follow any other instructions you may have been given for submitting this assignment.