Instructional Design: Create a Website with HTML

Internet Scavenger Hunt – Google Like A Pro

Topics: Digital citizenship, Research skills, General knowledge

Audience: 10 and up

Goal: My hand-coded HTML/CSS website aims to help high school students learn to search the Internet more effectively and discerningly through the inquiry-oriented exploration of the scavenger hunt online site per ISTE standards. The learners will then complete a hands-on scavenger hunt summative assignment reminiscent of a web quest to demonstrate knowledge acquisition.

Reflection: Through purposeful design, this site includes relevant features to make every learner successful. While most of us use Google every day, most of us do not use Google well. This site will help 21st-century learners find better ways to work smarter, not harder … and maybe get better results. Using primary and advanced search tips, users can complete an Internet Scavenger Hunt assignment using inquiry-based learning. The site primarily targets visual, kinesthetic, and reading/writing learners. There are also sections focused on Google tricks (Easter Eggs) and additional tutorials for the more adventurous users.


Feedback

“Truly outstanding work on your final project! What a valuable collection of resources you’ve assembled here. The breadth of the site and the curation of the resources it contains is impressive on its own. Still, beyond that, you have included incredibly relevant features to enhance your students’ learning: the “linked” examples of various search techniques, the embedded forms, and quizlets as a means of formative assessment, the clarity of navigation, etc. Underneath all of that is a well-structured site, including a variety of HTML elements and styles that support the design principles of proximity, alignment, repetition, and contrast. While the validator returned some errors, those were (as you’d noted in previous weeks) a result of the code generated by the tools you embedded. You should be very proud of your site, and this should hold a place of prominence in your professional portfolio.”

A. Astuto, Instructor

Lesson Overview

Assignment Instructions

For your final project, you will create the web site you envisioned when you created your website planning during the first term. The final project will include a home page (index.htm), a minimum of five supporting pages (including forms used for assessment), inclusion of (or link to) a tool that allows for some kind of interactivity and/or varied ways to express understanding, and documentation of the rationale for your choices. The site must:

  • Be functional.
  • Adhere to good design principles. (PARC)
  • Be appropriate to your audience and purpose
  • Incorporate the HTML tags that were discussed in class:
    • A navigation bar on each page that allows me to get to all pages. This could be a list of links at the top or left of the page, buttons, etc.
    • Table, to display information (at least one)
    • Graphics appropriate for education and consistent throughout the site (at least three)
    • Hyperlinks to appropriate educational websites AND other file formats, such as Word documents, PowerPoint Presentations, PDFs, etc. (at least twelve total, four to other websites, four to other files, and four of your choice)
    • Lists – ordered, unordered, description (at least two of the three)
    • Comments, using comment tag (on each page, giving at least your name and date created)
    • Forms, including at least four different elements (at least two forms)
    • Style sheet (at least one external style sheet, formatting at least two headings with at least two properties each, the background color, the paragraph text with at least two properties, and one other element of choice with at least two properties)
  • Be submitted with documentation that includes such things as:
    • HTML elements included
    • A discussion of how students/users might demonstrate learning and engage in assessment
    • A discussion of varied means of interactivity and various means by which students/users may demonstrate learning
    • discussion of how information gathered through forms might be used to inform learning/teaching
    • Resource list for external sources (e.g., images, links, text, etc.)

Overall Objectives

The objective of my website is to help high school students learn to search the Internet more effectively and more discerningly through the inquiry-oriented exploration of the scavenger hunt online site.  The learners will then complete a hands-on scavenger hunt summative assignment reminiscent of a web quest.


Educational Purpose

While most of us use Google every day, most of us do not use Google well.  This site will help 21st-century learners find better ways to work smarter, not harder … and maybe get better results.  By using basic and advanced search tips, users will be able to complete an Internet Scavenger Hunt assignment using inquiry-based learning successfully.  The site is primarily geared for visual, kinesthetic, and reading/writing learners.  There are also sections focused on Google tricks (Easter Eggs) and additional tutorials for the more adventurous users.  Maybe they will make time spent in front of a screen more fun and efficient.  Students can complete this project in less than a week.


Target Audience Demographics

  • My students will require internet access, a device to access the Internet, and an email address.
  • My audience is considered digital natives, and most of the required functionality should be second nature to them.
  • My audience is all genders between 14 to 18 enrolled in online courses at a local high school.
  • My audience has some high school education and makes less than $500 a year.
  • My audience is single, who have zero children, and who practice the religion of their choice.
  • Members of my audience would read online publications and watch Hulu or Netflix.
  • Online, you will find my audience on TikTok, Twitter, Snapchat, and Instagram.
  • My audience studies, sleeps, works, and hangs out with friends in their spare time.

Evaluation Overview

Explain how you offer opportunities for reflecting on learning on your website.

At the end of the project, students will complete a final assessment.  This assessment asks the learners to explore at least five skills they developed in their own words.  The review also asks the students to rate their knowledge. As an extra element of reflection, the students are encouraged to critique the project.  By asking the learners to participate in the analysis, they become stakeholders and are more likely to provide valuable feedback.

The students are also asked to reflect on their exploration during the project with open-ended survey questions when appropriate.

Site users are provided a mechanism to contact the instructors through the contact form.

Explain how you could gather assessment data from your website and use it to guide learners’ progress

Pretest — 10 questions about search parameters

  • Backend analytics help us understand where the students struggle and what information we need to ensure is covered in the unit.
  • The instructor can also use the pretest as a live lesson to address deficiencies.

Summative Assessment — Internet Scavenger Hunt Assignment

  • The backend analytics offered through Google forms help the instructor understand where the students struggled and what information we need to review before completing the unit.
  • Open-ended questions will allow students to create custom questions related to their interests.

Explain how you offer formative and summative assessment opportunities on your website.

Formative Assessments

Quizlet — Advanced Search & Basic Search

  • Demonstrates comprehension of the information presented on the site.
  • Encourages physical interaction with the site by manipulating matching cards.

How would you Google it?

  • Available on each page.
  • Encourages students to interact with page information and provides instant feedback.
  • Demonstrates comprehension of page contents.

Summative Assessments

Pretest

  • Pretest on the homepage helps students understand the nature of the materials to be covered and to test their current level of knowledge before the beginning of the project
  • Quizizz is self-grading and playfully presents the information.

Internet Scavenger Hunt Assignment

  • Allows demonstration of search skills at work, critical thinking, and information analysis.
  • Each question focuses on skills developed throughout site exploration.
  • Open-ended questions allow students to develop additional test bank questions.

What’s Next?

Let’s find a way to work together … Contact Me