Activity

Part A: 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 is:

    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. Next Part

    In Part B we will explore the concept of using a query string to create a custom search box that you can embed in any website. Look over the Related Activities and Discussion points to the right above and then head on over to Part B.

    Go to Part B  >