How to Write a Programming Tutorial

This tutorial will teach you how to format a tutorial for the Spoono Programming section. This includes: PHP, HTML/XHTML, CSS, and Javascript. 3D Studio Max tutorials also follow this format.

All right, there is pretty much a set template to follow to write a tutorial. The template is actually written in XML. Don't be worried, it's very easy to use. There are some default tags to learn and then you can just follow the template.

Start Off

  1. Setup: Put the XML template (an .xml file which this tutorial will demonstrate how to create) and the images all in one folder with nothing else.
  2. Right Click and Download This. It's the XML flash graphics template with a working example. Open up notepad to edit it.
  3. You need to fill out everything in the graphics template. You can add as many steps as you want. ALL TAGS MUST BE PRESENT before the <STEP> tag.
  4. Every tag that's opened in XML must be closed. That means, to have a <br>, you have to do <br></br>
  5. The top stuff must go in that order. Don't mess with the order of anything inside the template
  6. You can view a sample complete tutorial XML which we are currently using by clicking here.

Template Top

  1. <?xml version="1.0" encoding="utf-8"?> - This just specifes the fact that it's an XML file. Don't edit it
  2. <tutorial> - This starts the tutorial. No need to edit it either. This tag needs to be closed and should be the last thing at the end of the file (</tutorial>)
  3. <description> - Inside this tag, place a description of the tutorial. It will be used for the metatags.
  4. <keywords> - Inside this tag, place keywords for the tutorial. It will be used for the metatags.
  5. <title> - Inside this tag, place the title of this tutorial. Try to keep it short and to the point
  6. <slug> - Inside this tag, place a short slug or description of the tutorial. Very short and descriptive (like a sentence max).

Body

  1. <text> - This begins the body of the tutorial
  2. <pre> - Pre tags can be used to indicate actual code. The text inside will appear in it's own paragraph, be green, and monospaced
  3. <br /> - Br tags (note the space and then ending slash) can be used just like <br> tags are normally used in html documents.
  4. <green> - Green tags can be used to make small bits of code green and monospaced, but not break off into its own paragraph as it does in a pre tag.
  5. <image> - As you saw in the <left> tag, you can put in an image using simple commands. Every one must be like this: <image><name>nameofimage.xxx</name><width>20</width><height>20<height><alt>Picture 1</alt></image>. In there, replace nameofimage.xxx to the image name, not the full URL of the image, but just the final image name. The width is the width, height is the height, alt is the popup alternative text. Every image tag needs all those attributes. Sorry, but it's XHTML standards :-/.
  6. <link> - Links can be placed using this format: <link><url>http:///www.urltosite.com</url>Text to Link</link>. As you can see, they function pretty similarly to the way normal <a> tags work.

All right, that should just about describe everything. I hope this tutorial helps you write the tutorial and that we recieve some great tutorials. Please send any tutorial submissions our way at webmaster@spoono.com.