Beyond the Son of Filamentality

Adding Activities

Once you've brainstormed some ideas about what activities you'd like your learners doing with the Internet sites you've collected, the next step is purely HTML: let's get those activities typed into the Web page!

But Wait! Before doing the HTML, it will help to see what your activity entry will look like through a browser:

sample activity output

Adding the "Activity Title"

  1. To work on HTML you'll want to view both the HTML and the Browser so you can check your changes often. Also, as you're working, don't forget to save often.

  2. Okay, now that you have the HTML file in front of you, drop your cursor just below the <h2>Activities</H2> heading at the top of your list of Internet links. Then type:

    <h3>Your Title for the First Activity</H3>

    as in this sample:

  3. Save your HTML file, flip to the Browser and click the "reload button" to view your new activity title.

  • Editing the "HyperText Link"

    Now we need to check how the Internet link is listed and see about editing the title or description of the link.
    1. Whether you have one link all by itself or many links grouped together for this activity, check to make sure that there is a <UL> before the first <LI> and a </UL> after the last <LI>'d link.

    2. The next thing to check is whether you want to edit how each link is shown. You might want to change the title (the text that appears between the <A HREF="Internet Location"> and the </A> (also underlined in red above).

    3. Last, you might want to change or cut the description that follows your link. Sometimes a description isn't necessary because the Activity Title and the HyperText Link title communicate enough information (and your Web page looks less cluttered for the user). Sometimes you'll want the description, especially if you're not asking your learners to surf every link.

    4. Save your HTML file often, flip to the Browser and click the "reload button" to view your edited list of links.

    Setting up the "Blockquoted Header & Text"

    Now we're ready to set up how the activity header and text instructions will look through a browser. We'll use <blockquote>s because they indent a whole section of text which looks nice and clean.
    1. Drop your cursor at the beginning of the line right after the </UL> of the links list.

    2. Type in exactly what you see highlighted in light blue below:

      Or simply drag across the line of HTML below and paste it into your own HTML file:

      <BLOCKQUOTE><B>Activity:</B><BR>

      The HTML tag <BLOCKQUOTE> tells the browser to start indenting a passage of text. The <B> and </B> start and stop bold text that will make the word "Activity:" stand out. The single tag <BR> tells the browser to break the line and put the words that follow on the next line.

    3. Save your HTML file, flip to the Browser and click the "reload button" to view the effects of your programming.

    Adding the "Blockquoted Text"

    Now comes the time to type in the magical, cool, quirky, now, and totally happening activity that you've created for these links. Feel free to surf the links again if you need to (do this by simply flipping back to the browser with your page on it). Maybe you want to see some sample activities again?

    1. As soon as you're ready, begin typing your activity instructions just as you want your users to read them. This can be as long or short as suits your learners. Take a look at the highlighted passage below to see where you'll type in your text.

    2. When you've finished typing your activity instructions, add a </BLOCKQUOTE> like you see below to tell the browser to stop this block indenting business.

    Adding the "Horizontal Rule Divider"

    The last thing you'll want for each of your activity entries is a dividing line to separate one activity from another. HTML calls these dividers "horizontal rules" and tags them: <HR>. You can fiddle with the width and thickness of this line or just use the suggested one and type in exactly what you see highlighted in blue below (or drag across, copy and paste what's shown in red): 

      <P>
<HR size=3 width=65%>

    A Closing Tip on HTMLing

    We like to say that a Web page is like a loaf of sourdough bread. The way sourdough works is that you need an old piece of "sour" dough to begin every new loaf. So, in every piece of sourdough is a little piece from another loaf.

    Like this, every page of HTML we've ever written contains at least a little copy/paste from some other page (it's silly to do every little < / and <IMG> from scratch when they already exist in pages you or someone else has already written).

    So now that you've added one activity to your Web page you're ready to add more. You could go through this tutorial again, or you could enjoy the magic of "Copy" and "Paste" and get there sooner. You could drag across the patch of HTML below and paste it into your HTML file where you're ready to begin the next activity. All the things that are red here you will replace with your own info. The HTML parts that are blue will go untouched. If you like this idea use it. If it's confusing, skip it. 

    <H3>Your Activity Title Goes Here</H3>
<UL>
<LI>
<A HREF=http://your URL goes here>
Link Name Goes Here</A>
</UL>
<BLOCKQUOTE><B>Activity:</B><BR>Type your
activity instructions here.  Think about any mindset or attitude
it would be helpful for the learners to be in.  Describe the 
thinking they will do. Be as specific as works for the 
actual output you want learners to create.
</BLOCKQUOTE>
<P>
<HR size=3 width=65%>

    [ Sort List of Links | Brainstorm Activities | Add Activities | Customize Your Page ]
    Return to "Beyond the Son of Filamentality" Homepage
    Education First - Pacific Bell - SDSU Last revised May 21, 1996
    By the SDSU/Pacific Bell Fellows
    Applications Design Team/Wired Learning
    http://www.kn.pacbell.com/wired/beyond/acts.add.html
    Copyright © 1996 Pacific Bell -- All Rights Reserved