The Purple Belt:
In American Tae Kwon Do, purple belt is a defining moment when a student begins to develop their own style and technique. A purple belt must demonstrate mastery of 44 moves before he can advance to the next rank, that of the blue belt.
In puzzle solving, our purple belt will begin to learn how to think outside of the box and look in other areas of the page for more information. Face the front of the class. Bow. Let's begin!
HTML:
In one of the previous lessons, you may have had to search in another page for additional information. This is a common tactic in Geocaching, to hide hints, tips and even the outright answer in other fields. Not every puzzle creator is going to put the answer right in front of you. (That wouldn't be much of a challenge, would it?)
Take a look at the following page: https://sites.google.com/site/purplebeltpage1/
It doesn't look like there's much information. Now, highlight all of the data in the page. (Either hit Ctrl+A for "select all" or use your mouse and hold the left button and select all of the text.)
Notice all of the numbers in between the words? How did I do that? Pretty simple. The words you can normally read are written in regular plain text. In this case, Arial font, 9 point, black. Hidden in between the words are numbers written in Arial font, 9 point white.
Right click somewhere on the page, and select the menu option to "View Page Source" (View Source on Internet Explorer.) The gobbledygook you are looking at is HTML, the basic language of web pages. (HTML stands for HyperText Markup Language. And before you start getting technical with me and arguing about PHP and Java vs. HTML, remember this is a basic tutorial.)
You should be able to search in this "page source" using Ctrl + F (for the "Find" command). Use that option and search for "There", the first word in the paragraph. You should see the following:
There <font color="white">3</font>really<font color="white">3</font>isn't much
See how the
<font color="white"> </font>
tags are changing the font color?
The underlying HTML code is one place where extra information can be hidden in a webpage. This is a simple form of Steganography, the art of hiding information where no one else might think to find it. There are lots of places where information can be hidden in HTML.
Information can be hidden in HTML by use of the comment tags:
<!-- Comments go here -->
This is one way that webpage designers can leave comments for other designers or users for documentation and organization.
Also note that comments must end with the " --> " tag. Otherwise, the browser assumes that everything after the opening comment tag is part of the comment. This gives us two other things we can search for. Open the source in any webpage and try searching for comments.
Objects in webpages:
Cute, isn't he. But you should see him once the coffee runs out. Now open your page source and search for details of the photo. (I'll give you a hint, do a CTRL+F search for "jpg", which is a common file extension for images. You should find some information about the image, and some additional information in the "alt" field. This is alternate text that would pop up in the event the image can't be loaded. (Some browsers show this information when you hover your mouse over the image.)
This is another place that information can be hidden. You can also do this with videos in both the "id" and "name" field. And other details of the image or video can be specified by the cache creator like height, width, running time for videos, etc. All of these fields can be utilized to conceal information. (The height and width of a typical image in a webpage is usually three digits each, which is perfect for concealing the last three digits of north and west coordinates.)
