Workshop 2.
Recreate a WikiHow page

Goals

In this workshop, we will approach HTML semantically and learn how its tags wrap around specific pieces of content. We'll learn how to organize our files into folders and how to link relatively to those files and folders. We'll also look deeper into the difference between local and online versions and the importance of using both.

Instructions

  1. Navigate to http://www.wikihow.com. From the database of how-to articles, choose an article. You can pick any article, but it should be one you find useful or meaningful in some way.

  2. Create a new project folder on your local class website. ("Local" means the website that's on your computer, in the "interactive" folder.) You can name this folder "workshop02".

  3. Inside of that folder, create an “index.html” page that has all of the content from your article. Make sure to use tags so that pieces of content are treated semantically. If there are any images, save them all into a folder called “images” (within your project folder). Create relative links to these images so that they appear in your index.html. In creating your HTML, remember to: put your “How to…” title in an h1 tag, put any secondary titles in h2 tags, put your numbered list items in an ordered list (or if unnumbered, put in an unordered list). Try to put anything else in the most appropriate HTML tag (here is a list).

  4. Create a Table of Contents for your page if it doesn’t already have one. This will be a list of links that exists underneath the main title. Each link will be one step or section of the article that exists underneath the main title. When you click on a link, it will jump you down on the HTML page to that specific section. To do this, use targeted anchor links. (I will give a demo on how to do this, but if you don’t know, look here.)

  5. When you’re done, add a link to this exercise on your class homepage.

  6. When everything is looking good on the local version of your website, then you can open up Github Desktop app on your computer. Make sure “gh-pages” is selected as the default branch up top. Then enter a summary of your changes. Then press the “Commit to gh-pages” button. Then press the “Sync” button in the upper right.

Done!


Updated on July 06, 2016