# HTML Hunting in the World Around You
HTML isn't scary or hard to learn. In fact it's really easy. In this challenge you're going to realise that you already know quite a bit of HTML, but you're just not aware that you do.
Think of the word 'Cat' - what is it you see in your mind? A boat, pancake or a cat? This is the skill you're going to develop in this task, only you're going to apply it to learning HTML.
You're going to need some means of taking digital photographs and the confidence to take pictures outside, making sure that when you do, you're not invading on anyone's privacy. That's not cool.
This challenge is best done as a nice leisurely walk around the area that you live in on a fine day.
Time: 1hour plus
## Task 1 - Some Tags For You To Meet
HTML gives content structure and it does this by using tags. In later challenges you'll explore the exact nature of tags in more depth but for now think of them as things that give structure.
Tags give content specific meaning such as paragraphs, headings, lists, navigation or time. In this task, using the [Mozilla Developer Network HTML reference][0] you're going to research what kind of structure the below tags would be used for.
Here's the list of tags that you're going to research
* <div>
* <blockquote>
* <p>
* <ol>
* <ul>
* <li>
* <nav>
* <menu>
* <span>
* <time>
* <q>
* <img>
Spend about fifteen minutes of time looking up the tags in the [Mozilla Developer Network HTML reference][0] and make some notes that you can take with you when you go HTML hunting in the world around you. A small sturdy pocket notebook would be a superb place to keep such notes.
## Task 2 - HTML Hunting In The World Around You.
In the last task you've put together some notes about each tag so you should know what you're looking for. In this task you're going to put those notes to good use. You're going to go out into the world and walk around your neighborhood taking photographs of stuff that has the same structure as the tags you've researched.
See a bunch of people waiting in line for a bus? Sounds like an <ol> to me. What about bricks that make up a wall? Could be a <div> or a <li>. Photograph whatever you think matches the kind of structure that you're looking for.
There are no wrong or right answers in this task. If you can state why you think something is the way that it is, then that's good enough.
Ideally you should aim to get two or three photographs for each tag, but everyone will get different results from the task. The important part is that you activate your mind to look for 'html like' structures in the world.
Go forth and hunt for about thirty minutes - remember to take care and be safe.
## Task 3 - Blog Your Photographs
You should spend about fifteen minutes putting a blog post together that showcases your photographs. For each of the photographs write a sentence or two about how and why the photograph you've taken relates to the tag. You can add sketches, sound or even a storyline to your photographs to support your post.
When your post is published and you've posted a link to it on the challenge discussion board, spend the rest of the hour checking out the work of your peers. Do you agree with their interpretation of the tags? Make sure to leave your comments on the challenge discussion board.
[0]: https://developer.mozilla.org/en/HTML/Element
/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
# Badges
# Possible Badges:
## Webmaking 101
- HTML Hunting in the World Around You Badge
Description: have completed challenge 4
Assessment type: self assessment
Rubric: N/A
## Skill
Description: The HTML Basic Badge recognizes the ability to create an html page by making basic use of HTML tags.
Assessment type: course organizer/mentor assessment, peer assessment?
Assessment formula: awarded once from course organizer? if accumulative then formula could be: course organizer/mentor + 3 peers
Rubric:
- Can use the Mozilla Developer Network HTML reference [0] to identify and use basic HTML tags
- Can translate HTML tags like <div>, <p> into real world structures
## Peer
Description: The Super Blogger Badge recognizes the ability to write infomative, engaging and well presented blog posts while explain clearly and concisely concepts to various audiences.
Assessment type: peer assessment
Assessment formula: acculumative
Rubric:
- Writes engaging blog posts
- Writes clearly and concisely
- Includes thoughtful and creative presentation of materials
- Accurately communicates concepts and information to various audiences, including nontechnical people
- Spends extra time writing supportive blog posts outside the Webmaking 101 task
Description: The Team Player badge recognizes members who help push work forward within the community and motivate other team members to do so.
Assessment type: peer assessment
Assessment formula: acculumative
Requirements: Helpful Feedback Badge
Rubric:
- Pushes work forward within the community
- Provides helpful feedback, participates in discussions
- Motivates other team members to do so.
- Creative Presentation Badge
Description: Learners create multiple representations such as text, diagrams, media, sketches, physical forms to record and express ideas in creative ways.
Assessment type: accumulation
Rubric:
- uses different types of representations to organize, document and express ideas
## Stealth
Description: The Social Legend badge recognizes active community members who consistently participate in discussions and have popular posts.
Assessment type: stealth assessment
Assessment formula: metrics of comments+activity on wall
Rubric:
- Is an active member of the community, logins often, participates in discussions
- Peers often comment on this members' posts
/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
# Smartools(tabled)
- Visual HTML Reference Guide (User created)
Description: The Visual Reference Guide is a user created smartool that consists of visual references for HTML tags. This tool is created as a result of Task 3.
Assessment: self-assessment (one gets it by submitting work for task 3)
- Mozilla HTML Reference Guide
* A smartool is a tool that a learner can use again and again in other challenges.For example, Firebug (if Firebug was to be unlocked as a tool after completing challenge x) is a type of smartool. Smartools can also be user created, such as the collection of visual HTML references in Challenge 4. In unlocking smartools learners connect the skills they have gained to actual tools they can use and master.
/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
================
Community Feedback
================
In a p2p setting, would it make more sense for different peers to research different tags and then share their newfound knowledge w/ each other?
the MDN articles on tags can actually be fairly intimidating. i wonder if it might be useful for learners to come out of those pages with a list of questions pertaining to terminology, concepts etc. mentioned on the pages that they don't fully understand.
because learners have already made an html page in challenge 3, it might be useful to encourage them to experiment w/ the new tags in their sample page, to see how the browser interprets them. learning about tags "in the void" without actually getting your hands dirty using them isn't much fun!
+1 to all the social badges listed here.