Activity

Part 1: Anatomy of a URL

Let's examine how a URL is constructed for a search in Google.

Made by Tim Miller

Photo credit: Cubosh / Foter / CC BY

Warning:

This tutorial will cover some basic concepts and is targeted to beginners with little experience with web development. However, we will be using HTML, CSS, JavaScript and jQuery. If you would like to learn more about these, please visit Codeacademy and complete their HTML & CSS, JavaScript and jQuery tutorials.

Steps for the Activity

  1. URLs

    A URL (Uniform Resource Locator) can be simply thought of as the address for a webpage. Just as you would type in an email address to send an email to someone specific, by typing a URL into the address bar of your browser, you are navigating the browser to that specific web page. A very familiar example of a URL is:

    https://www.google.com/

    Have you ever noticed that when you search in Google, the URL for the search results page will include the terms you used in your search? For example, if we search for "schipperke puppy photos" in Google, the URL for that page will look something like:

    https://www.google.com/#q=schipperke+puppy+photos
    [Note that instead of the spaces between our terms, the URL contains the + symbol. URLs don't like spaces so they usually use the + symbol or encode the space with %20.]

  2. URL Query Strings

    Go ahead and copy and paste the URL above and open a new tab (ctrl+t) and paste the URL in the address bar. However, instead of pressing the enter key, go ahead and replace 'schipperke+puppy+photos' with something else- such as 'kitten+photos' and then press enter.

    Viola! You now are looking at the results for kitten photos- just as if you had typed those terms in the search box. The 'kitten+photos' portion of the URL is called a query string and is the part of the URL we are going to use to create some customized search plug-ins.

  3. Explore

    Where else do you think we can use this idea of query strings? What about a search on another one of your favorite sites? Take a minute to try this same concept out with different sites and different URLs. Look at the 'Related Activites' in the right-hand panel for more ideas. Go ahead and navigate to another site and conduct a search- look at the URL on the search results page. Can you spot the query string? Can you substitute some other terms?

    What about the other parts of the URL on the search page? What do they mean? Usually, a URL for a search page has several strings (often separated by &) for every different search facet, or filter that you use. For example, a search on Amazon may have the following string: search-alias%3Dmovies-tv& for any search that limited to movies.

  4. Next Part

    In Part 2 we will explore the concept of changing that URL query string a bit more by using JavaScript to create dynamically populated hyperlinks. Don't know what 'dynamic' means in this context? Move on to the next part to find out!

    Go to Part 2  >