Walkthrough: Presenting our information as a webpage

Now let’s go ahead and publish our results on a webpage. This will get a bit techy but don’t worry we’ll guide you through. We will create a small web page containing some of the visualizations we created using a simple online tool called pastehtml. Pastehtml allows you to create html websites easily by simply editing the text online and then saving it for sharing.

  1. To start a webpage simply visit pastehtml.com

  2. See the input box with all the brackets? This is html code and we’ll be editing it to present your results. (If you want to learn more about html code head to the school of webcraft

    https://i2.wp.com/farm9.staticflickr.com/8470/8112394583_9c6c439893_o.png

  3. First let’s change the title of the webpage: This is the bit between “<title>” and “</title>”. Edit it so it is appropriate.

  4. Then let’s go and edit the content for a webpage (this is the part between “<body>” and “</body>”). See the text between “<p>” this defines a paragraph. Go ahead and edit it!

  5. You can click on “Publish page” to see how your page will look like (approximately).

  6. On the top you’ll always have the possibility to go back and edit.

  7. Now let’s add some charts we made.

  8. Go back to one of the charts in the spreadsheet.

  9. Click on the chart. See the small triangle top right of the chart: this is the options menu.

  10. Go and select “Publish chart‘85”.There will be a popup with a lot of code in a grey box:

    https://i2.wp.com/farm9.staticflickr.com/8195/8112418106_fac64f623f_o.png

  11. Copy this code and paste it into the pastehtml (somewhere between <body> and </body>). Now if you go and look at your page, the chart should be there.

    https://i1.wp.com/farm9.staticflickr.com/8050/8112418146_72872fde90_o.png

  12. Once you are finished, click on publish and you’ll get a url to your webpage. use this to share your results with your friends.

Of course if you already have a blog or something similar you can share the results there

… raw:: html

<div class=”alert alert-info”>Any questions? Got stuck? <a class=”btn btn-large btn-info” href=”http://ask.schoolofdata.org“>Ask School of Data! </a></div>

Last updated on Sep 02, 2013.