Tutorial: Basic HTML Coding for Twine

Twine is an online platform for producing interactive storytelling; it can be used to write build your own adventure stories, create presentations, produce fiction, and even make video games. One of the basic need-to-knows for using Twine is being able to write Twine HTML code. Now don’t panic. As intimidating as coding may seem, as long as you have the right info it’s just a lot of copying and pasting, while filling in the blanks. In this tutorial we are going to provide you with some cheat sheets and websites to help ease you into becoming a coder.

 

1. Download Twine

Access their website http://twinery.org. You will be given the option to either download their 2.0.11 version or use their online program. Tip: for online use make sure not to delete/clear your browser history otherwise you will lose all of your work (Twine saves to browser). Once you’ve chosen how you will use this program you should see this on your window:

 

 

This is the page that you can start new stories, and find your previously saved stories. Click “Story+” to begin a new story. It’ll ask you to give your story a title; so let’s call this “First Twine”. The next page you should see is:

 

 

2. Start Writing!

Double click the white box that says “United Passage”, it should bring you to a page like this:

This is where you will be entering and editing your code! I found this amazing website “A Twine Cheat Sheet” that breaks down Twine’s coding into cheats and quick plug-ins. You will be able to completely change the structure and the style of your Twine with it’s neat tricks and how to’s; while at the same time you’ll have the opportunity to try coding out on their website so you know if you’re doing it correctly!

3. Basic Twine Coding Structure

In Twine, instead of using basic HTML structure, you have to use the particular coding for Twine. So for creating a header instead of using <h1> and </h1> for your header, you would use:

4. How to insert an image

Many of you will want to add images to your posts, and the way to do that is to add the code “<img src=”Hermadrome-small.jpg”>” into your storysheet. First you have to save and give a name to the image. How you write this particular piece of code is by pasting the name of the image; “yourpicname.jpeg“, after “src=“.

5. How to change your Twine’s style

Writing the actual content of your Twine is one thing, but making it you, changing its style, is a completely other story. While in coding, changing the style you can use specific tags, to do so in Twine you must access it through their specific program. The first step is to go back to the blue grid storyboard. In the bottom left-hand corner there is a tab with your twine title, so for me “First Twine”, click on it. You should see these options:

This screenshot comes from the article “Changing the look & feel of your Twine scenario” by Cathy Moore

Choose Edit Story Stylesheet. A window will open, that looks like this:

Within this “Stylesheet” you can control all default style choices! If you want a different font, say veranda, you would type:

This will change your entire twine’s font to be veranda.

If you’d like to change just one page’s font, add the same code into the individual storysheet.

The image below is screenshotted from the website I listed above as a resource, and it shows you what ‘hooks’ you must use to perform ‘italics’, ‘bold’, ‘highlight’ etc.

6. Change Font Color/Background Color

To change the background color of your story, you would go into your stylesheet edit page and enter this text(without quotations):

“body

{

background-color: #f5fff0;

}

To change your font color you would enter:

“tw-passage

{

color: #422424;

}

A great resource for choosing colors, and finding the html codes for each color is: HTML Color Codes.

7. Concluding Resources