Part 2: Dynamic Hyperlinks

Steps for the Activity

1. Dynamic Content

   Many webpages are static- the content is independent of user input and remains unchanged until the web developer manually makes changes to the HTML markup. However, there are many ways to make content on the web dynamic- to allow the person viewing the page to interact and to automatically update the page's content is without someone having to do so manually.

   An obvious example of a dynamic page is one with a search box- the user can type search terms into the box and by clicking the submit button, they will navigate to a new page with a list of results based on those search terms. Another, more simple example, is when a hyperlink on a page is assigned a URL based on some piece of content on the page. This type of dynamic link is more helpful for the web developer than for the user- if everything goes well, the user doesn't even realize the hyperlinks are dynamic.

2. A little bit about HTML and JavaScript

   We aren't going to get into too much detail for this exercise, but for you to fully understand what we're talking about, we'll need to discuss a couple of things:

   • HTML Element: HTML (Hypertext Markup Language) is the coding language that web pages are built in. Think of it as the skeleton of a webpage- it provides the basic structure of the page and organization of the content. CSS (Cascading Style Sheets) is the language to style the HTML- kind of like the skin and clothes. In this Frankenstein-ian analogy JavaScript is therefore the muscle and the web developer and the user are both the brain.
     
     Each 'bone' in the skeleton of an HTML page is called an element- these are written out using opening and closing tags, enclosed in angle brackets, like so:

     <h3>This is a heading</h3>

     The <h3> element is a third level heading. The heading content begins after the <h3> tag, and ends with the closing tag, which has a backslash, like so: </h3>.
     
     We can also nest elements like so:

     <p>This is a paragraph with a <a>link</a> inside it</p>

     [The <p> tag is for a paragraph and the <a> tag is for a link.]
   • HTML attribute: Each element can have one or more attributes which help to define that particular element. We are going to look at the attributes that are associated with hyperlinks- including the href, title, and target attributes. The href attribute determines the link's destination, for example:

     <a href="https://www.flickr.com/">Click me</a>

     means that the hyperlink will navigate to Flickr.com
     
     Each attribute has a value, which is enclosed in quotation marks. The value for the link above is the URL.
   • JS Variable: In computer programming, variables are similar to those used in Algebra- except that we can use variables to represent any type of data, not just numbers. A variable can be thought of as a shorthand- instead of having to type out "schipperke" a bunch of times and risk misspelling things, we can store the text inside of a variable, such as term like so:

     var term = "schipperke";

     [We type out var to signify that we are about to define a variable. When we assign a value that is not a number, it needs to be inside quotation marks.]
     Now, if I were to write the following script:

     "Let's search for " + term + " photos in Flickr."

     The output would be:

     Let's search for schipperke photos in Flickr.

     The real beauty of variables is that we can change them later, like so:

     term = term + " puppy";

     And then our output would be:

     Let's search for schipperke puppy photos in Flickr.

   • jQuery selector: jQuery is a JS library that makes it easier for us to manipulate HTML & CSS. Simply put, jQuery gives us some shortcuts to work with our webpages. In order to target specific elements on a page, we will use jQuery selectors. Using jQuery to do this can be very complicated with most real-world webpages and I highly recommend taking the jQuery tutorial at Code School (try.jquery.com) if you want to learn more, but the basic idea is this:

     $('a').text("Schipperke");

     This line of code will insert the text "Schipperke" into every <a> element on the page. We accomplish this by using the a selector. A more clever way to acheive this using our variable above would be:

     $('a').text(term);

     If we wanted to change the text in a paragraph, we could use a p selector to write:

     $('p').text('This is the new paragraph text.');

     [The dollar sign is a cue that we're using jQuery- whenever you use jQuery, you'll need to be sure to include that dollar sign!]

3. Anatomy of a Hyperlink

   Hyperlinks, commonly called links, are the ways that we most commonly navigate the web. Think of them like shortcuts- instead of having to type in the URL, you can click on a link to navigate to a new page. But it is a bit more complicated than just that- let's look at how a link works by examining the "Schipperke photos" link below:

   Schipperke photos

   
   

   • First, hover your mouse over the link- notice that a box pops up describing what the link is for. This is because it has a title attribute containing the descriptive text.

     title="Search for CC schipperke photos on Flickr"

   • Next, click the link- notice that it opens in a new tab. This is because it has a target attribute telling it to do so.
     

     target="_blank"

     [Bonus points: look a the results on Flickr- see the little guy with a red bow around his neck? That's my dog! His name is Jack and he does *not* like having that bow around his neck, regardless of what my girlfried says!]
   • Finally, the href attribute (which is not something you can see on the page) determines where the link will navigate to- this is where we insert the URL.

     href="https://www.flickr.com/search/?text=schipperke%20photos&sort=relevance&license=4%2C5"

   • We can put all of these attributes together like so:

     <a href="https://www.flickr.com/search/?q=schipperke%20jack" target="_blank" 
     title="Search for CC schipperke photos on Flickr">Schipperke photos</a>

4. Description of the Exercise

   Now that we know a little bit about what makes up a link, let's explore creating dynamic hyperlinks- we will create a way to make a hyperlink that navigates to a search in Flickr for Creative Commons images based on the title of the section of that page. This is handy for the web developer because she can go in and change the titles of the sections but won't have to also update every link href & title. Similarly, she could just load the script on every new page and the links will automatically appear for the new content.

   This could be useful on a blog where you want to feature different themes each week, but don't want to have to type in all of the HTML for every section by hand. Think about it- every link requires several attributes- a href, or URL to point to; a title, so that people know where the link is taking them (this is especially important for people who use screen readers); a target (if she wants the link to open in a new tab or window); and other options, such as id or name.

5. Getting your hands dirty

   Now that we know what we want to do, go on over to view the project- from there you can remix and create your own version to share or simply play around with.

   View the project  >