Other Pages

add_more_elements.step

goals do
  message "WOOHOO, you made it to page 10! Now that we're here, we'll switch from simple steps to doing **challenges**. There will still be something to do at each step, but it will take some figuring out to do correctly. (If you get stuck, you can still ask a TA or instructor for hints. : ) You will:"
  goal "Fill in more content"
  goal "Add an image tag"
  goal "Use two different kinds of anchor tags"
end

steps do
  
  step do
    message <<-MARKDOWN
CHALLENGE: The index.html page you downloaded is a simple profile page. Do a quick read through of the HTML and see if you can guess from the context what any unfamiliar tags might do.

Take 5 or 10 minutes to replace some of the existing text with some info about yourself. You don't have to write a novella, but filling in some tags is a good way to get oriented in the file. Then, save the page and refresh the browser.
    MARKDOWN
  end
  
  step do
    message <<-MARKDOWN
CHALLENGE: Add an image tag to the page, right above the word 'Contents'. There's a sample image in the resources folder that you can use called 'picture.jpg', but if you want to personalize your page, copy a picture of yourself into the resources folder and add that to the page instead.

Two hints: images are usually included with an `img` tag, and the tag's `src` attribute provides the path to the actual file. When you're done, you'll have something like this:

<img src='img/page_img.png'>

Don't forget that, because it doesn't wrap text content, the `img` tag is self-closing, meaning it doesn't need an ending tag. You should never code `</img>`.
    MARKDOWN
  end
  
  step do
    message <<-MARKDOWN
CHALLENGE: Add two kinds of anchor links.

Links in html are created by the `a` tag. Add an `a` tag somewhere in the document that creates a link to another page on the web.

If you're not sure what attributes an `a` tag can have, see if you can look it up on [MDN](https://developer.mozilla.org/en/HTML/Element/a).

You can also make links that stay on the current page and just point to another block of content. Instead of linking to a url, they'll link to the id of an element you want to jump to, with an attribute like `href='#id-name'`

See if you can turn the list items under the word 'Contents' into links that jump down the page to the relevant content. They'll look like this:

<img src='img/page_anchors.png'>
    MARKDOWN
  end
  

end

explanation do
  
  message <<-MARKDOWN

## Woohoo HTML

Now that you know the basics of working with HTML, the trickiest part is remembering
what tags are available. Here are some good sites you can use for reference:

* [Sitepoint](http://reference.sitepoint.com/css)
* [Mozilla Developer Network](https://developer.mozilla.org/en/HTML/Element)
* [DocHub](http://dochub.io/#html/)

  MARKDOWN
end

insert 'consider_deploying_to_github'

next_step 'make_columns'