# Welcome to Learning How To Twine
Welcome to my test page. I'm in the process of learning how to use this new tool, Twine. Or new to me. This is where I'm collecting things that I KNOW work.
I wanted to give you a chance to test out Twine by taking this platform and editing it yourself. Please feel free to download, copy, and modify this. There are all sorts of codes around here, so there should be plenty of material to play with.
There are a couple things you should know, though.
First, there is a good soundtrack for this Twine. You can <a href="https://youtu.be/lCGlIjLT8OQ" target="_blank"> find it over at YouTube</a>. Or you could play it here:
<iframe width="560" height="315" src="https://www.youtube.com/embed/lCGlIjLT8OQ" frameborder="0" allowfullscreen></iframe>
Second, I've created specific pages about specific content.
And third, I've left the navigation pretty simple. You can make it all complex if you like.
[[Embedding Videos]]
[[Embedding Images]]
[[Using iFrames to Embed Websites]] to embed web pages.
The [[mark up codes for Twine]]
## YouTube
`<iframe width="560" height="315" src="https://www.youtube.com/embed/OBEYxCjy7Vc" frameborder="0" allowfullscreen></iframe>`
One of the great things about embed codes is that you can adjust the size of the image, embed, or iFrame. I encourage you to try out different iFrame sizes. In addition to choosing pixel width, as it shows above. Other times, you can choose to replace the number with a percentage, such as width="80%".
The first version of above results in
<iframe width="560" height="315" src="https://www.youtube.com/embed/OBEYxCjy7Vc" frameborder="0" allowfullscreen></iframe>
If you change width to 80%, it looks like this:
<iframe width="80%" height="315" src="https://www.youtube.com/embed/OBEYxCjy7Vc" frameborder="0" allowfullscreen></iframe>
## Embedding Images
This is a model fo the code you'll use:
`<img src="https://dl.dropboxusercontent.com/u/58356524/tenure-binder-2016/tenure-assets-twine/NWelearn16%202.jpg" alt=“WOU Graduate Students at NWeLearn 2016“ style="width:304px;height:228px;">`
After `img src` is the URL for image--where it is located. The `alt` indicates the alternative text for screen readers. It's important to provide alt-text for all images.
For your own image, you'd replace the URL in the quotes after src=" "; of course you'd write your own alt-text for the image, too.
<img src="https://dl.dropboxusercontent.com/u/58356524/tenure-binder-2016/tenure-assets-twine/NWelearn16%202.jpg" alt=“WOU Graduate Students at NWeLearn 2016" style="width:304px;height:228px;">
</p>
<p>
In this example, I have adjusted the width to 80%. You can see that the stretch effect happens if they height is off.
</p>
<img src="https://dl.dropboxusercontent.com/u/58356524/tenure-binder-2016/tenure-assets-twine/NWelearn16%202.jpg" alt=“WOU Graduate Students at NWeLearn 2016" style="width:80%;height:228px;">
If you want to use images, this means you need to have a stable location or folder for the images. That's not in the Twine--not as far as I know. So, you'll need to have a folder on your site or in your DropBox for that purpose. You can see why I've skipped that option, yes? I want to learn other stuff at the moment.
## iFrames
If you want to create an iFrame, you can use this template:
`<iframe src="http://www.wou.edu/graduate/ms-ed-information-technology/degrees-programsms-ed-information-technologymeet-our-students/" width="80%" height="400"></iframe>`
It looks like this:
<iframe src="http://www.wou.edu/graduate/ms-ed-information-technology/degrees-programsms-ed-information-technologymeet-our-students/" width="80%" height="400"></iframe>
Just be sure to replace **everything inside the first set of quotes** with your URL. Once you do this a couple times, you can try tweaking the width and height for fun. If you want.
Here is another example using a Twine-related wiki.
<iframe src="https://twinery.org/wiki/syntax" width="80%" height="400"></iframe>
And here's an example for a Twitter account:
<iframe src="https://twitter.com/plowenthal" width="80%" height="400"></iframe>
# Mark Up Codes in Twine
**Bad news** first: some of the codes I have found for Twine, for creating hyperlinks or embedding content, have not always worked. There are some potential reasons for this. One, I may have been attempting to use codes for an earlier version of Twine (1.xx) when my Twine is version 2.xxx. Second, there may be some bumps in the browser or where I host.
**Good news:** once you are familiar with a basic set of codes or instructions, or in my case, you keep it in a handy document, things become pretty easy.
Headings:
One # is a Level 1 heading. Two ## and that's level two. And so on.
# One pound sign
## Two pound signs
### Three pound signs
And so forth.
## Underline
You can do it like this: `<u>Underline in HTML</u>` = <u>Underline in HTML</u>
## Italic
`//Italic?//` = //Italic?//
`<i>Italic in HTML</i>` = <i>Italic in HTML</i>
or
`<em>Italic #2 in HTML</em>` = <em>Italic #2 in HTML</em>
## Bold
You can put two `**` on each side of a word or phrase and that makes it bold. It should work even if you leave an open space. So `** Empty Space **` ends up looking like **Empty Space**.
You can find some good instructions here.
http://twine2.neocities.org/
However, I suggest scrolling and skipping around. Stick with the simple stuff to start with. Then move up.
## Hyperlinks
Try using this. Just replace the URL and the link text.
`<a href="http://www.google.com">link text</a>`
It ends up looking like this:
<a href="http://www.google.com">link text</a>
If you want the link to open in a new page, there's just a small change.
`<a href="http://www.google.com/" target="_blank">Google!</a>`
It looks like this:
<a href="http://www.google.com/" target="_blank">Google!</a>
## YouTube videos
`<iframe width="640" height="360" src="https://www.youtube.com/embed/Lhv_yFMuwxs" frameborder="0" allowfullscreen></iframe>`
Yields this:
<iframe width="640" height="360" src="https://www.youtube.com/embed/Lhv_yFMuwxs" frameborder="0" allowfullscreen></iframe>
## ScribD Documents
An evaluation from 2015 of one section of my ED 626 course.
`<p style=" margin: 12px auto 6px auto; font-family: Helvetica,Arial,Sans-serif; font-style: normal; font-variant: normal; font-weight: normal; font-size: 14px; line-height: normal; font-size-adjust: none; font-stretch: normal; -x-system-font: none; display: block;"> <a title="View ED 626 Spring 15 section2 Course Evaluation on Scribd" href="https://www.scribd.com/document/328999813/ED-626-Spring-15-section2-Course-Evaluation#from_embed" style="text-decoration: underline;" >ED 626 Spring 15 section2 Course Evaluation</a> by <a title="View zobelgb's profile on Scribd" href="https://www.scribd.com/user/246377905/zobelgb#from_embed" style="text-decoration: underline;" >zobelgb</a> on Scribd</p><iframe class="scribd_iframe_embed" src="https://www.scribd.com/embeds/328999813/content?start_page=1&view_mode=scroll&access_key=key-Nhk49ajtd1tVSM8Sy4w4&show_recommendations=true" data-auto-height="false" data-aspect-ratio="0.7729220222793488" scrolling="no" id="doc_30716" width="100%" height="600" frameborder="0"></iframe>`
Yields this:
<p style=" margin: 12px auto 6px auto; font-family: Helvetica,Arial,Sans-serif; font-style: normal; font-variant: normal; font-weight: normal; font-size: 14px; line-height: normal; font-size-adjust: none; font-stretch: normal; -x-system-font: none; display: block;"> <a title="View ED 626 Spring 15 section2 Course Evaluation on Scribd" href="https://www.scribd.com/document/328999813/ED-626-Spring-15-section2-Course-Evaluation#from_embed" style="text-decoration: underline;" >ED 626 Spring 15 section2 Course Evaluation</a> by <a title="View zobelgb's profile on Scribd" href="https://www.scribd.com/user/246377905/zobelgb#from_embed" style="text-decoration: underline;" >zobelgb</a> on Scribd</p><iframe class="scribd_iframe_embed" src="https://www.scribd.com/embeds/328999813/content?start_page=1&view_mode=scroll&access_key=key-Nhk49ajtd1tVSM8Sy4w4&show_recommendations=true" data-auto-height="false" data-aspect-ratio="0.7729220222793488" scrolling="no" id="doc_30716" width="100%" height="600" frameborder="0"></iframe>