loading
Did you ever read choose your own adventure books when you were little? Well now you can learn how to make your own online! This instructable is for those who want to learn about the basics of web design using html, while allowing themselves to be a little creative. This instructable will not teach you anything too in depth, instead it will cover, fonts, formatting, creating multiple webpages and linking them together, and inserting images. Although this is done from a programmer's standpoint it should be simple enough to follow along even if you have no programming experience, and it should only take about an hour of your time. 

Step 1: Materials

You will need: 

1. A computer 
2. An internet connection
3. Notepad, or sublime text editor 
4. Up to an hour of time. 
5. An internet browser of your choice

Step 2: Setting Up a Template

In order to start, we're going to be working in notepad. Go ahead and open up a new document. We want to set up a basic template page that we'll work off of. I have provided the html for this step down below.  Go ahead and copy it into your notepad document you have opened. 

<html>

<head>
<title>Title of the document</title>
</head>

<body style="background-color:black;">

<h1 style="font-family:times;color:white;font-size:20px;"><center>This is a webpage</center></h1>

<p>
<a href="http://www.google.com">This is a link to google</a>
</p>

</body>
</html>

The code that we have done so far, it very easy to understand. We have chosen a chosen a color for the background, the font, and provided a heading and a sample link. 

Feel free to play around with this until you have the color scheme, font, and sizes the way you would like. 

Step 3: Saving and Viewing in a Browser

Now that we have the base page set up, we can open that in a browser and see what it looks like. Go ahead and save your document, title it whatever you would like. I've gone and made a folder to save my work in. Make sure that when you save you that your document is with an html extension. You will also want to save a .txt file as well. The .txt file is the that we will be editing when we want to make changes, the html file is only the webpage itself. 

After you have saved, go to where you have saved your file, right click on it and go down to open with. There should be options to open it with any of the browsers you have installed on your computer. Pick the browser of your choice, I use google chrome. 

Your webpage should look something like mine does in the picture, it may differ if you have changed the color scheme or font. Make sure that the link works, and let's move on. 

Step 4: Starting Your Story

Now that we have our page set up the way we would like and we have ensured that everything is working the way that we would like, we can begin our story. We're going to just do the introduction in this step, we won't worry about the other pages yet. 

There's a few things to watch out for. Even though you may have specified a font color for your header, this font color will not stick when we move into our text. I had to change mine, because it's default to black, so mine text was not showing up on the black background I had chosen. 

Here's my code for the introduction: 

<html>

<head>
<title>Title of the document</title>
</head>

<body style="background-color:black;">

<h1 style="font-family:times;color:white;font-size:20px;"><center>This is a webpage</center></h1>
<center>
<p style = "color:white">

You wake up one day to find that the world has been invaded by aliens. This is not normally information
you would have immediately upon waking up, but there is one standing outside your window, staring at you. <br><br>

What do you do?<br><br>

Starting screaming<br>
Wave at the alien and invite them inside. <br>
Pretend you don't see it, roll over, and go back to sleep. <br>

<center>

</p>
<p>


<a href="http://www.google.com">This is a link to google</a>
</p>

</body>
</html>

You'll notice a couple of things that I have done, first off, I have centered my text, this is a personal preferences and you may choose not to do it. You may also be asking what <br> is for. Html will not automatically start new lines for you on your page, so <br> states that we want a new line, on places that I wanted just a blank line I put <br><br>, that way it would start a new line and it would also give me one blank line before I started typing again. 

You'll also notice that I have typed out my choices, but I have not linked them to anything. 
 

Step 5: Planning Our Story

Before we start linking things together I think it's a good idea to plan out where we want our links to be and where anything will lead. You may not be doing a very big story, but this can get confusing if we are working with larger documents. Especially if we have links that lead us back to a previous page.

I have gone ahead and drawn out where I would like my story to go, including which branches will lead to a victory and which ones won't. Some may even lead to a half victory, as is seen in my diagram. 

Step 6: Creating Multiple Pages and Linking

Now we've started the beginning of our story. But how do we get from here to our other pages? Well we first have to create the other pages.

So you will need to open another notepad document and create more webpages. Again we can use our template code, and make these pages exactly the way that we made our first one.

I have made the webpage I will be linking to first, since we cannot create a link without it leading somewhere. So let's take a look at what has changed in our code.

What do you do?<br><br>

<a href="file:///C:/Users/Fata/Desktop/Instructable/sleeping.html">Pretend you don't see it, roll over, and go back to sleep</a><br>
Starting screaming<br>
Wave at the alien and invite them inside. <br>

Where I had written out my 3 choices before, I have replaced one of them with a link. What we can do is edit the link for google that we have in our current code. 

Open up your second webpage, and copy what is in the url bar. Now go back to your .txt file for your main webpage and delete the google url and instead replace it with what you got for your url. It should look something like mine does in the above code. 

Save your page as a webfile and make sure that the link works the way it should. Now repeat this for your other options. 

Step 7: Testing and Debugging

So now we have multiple pages that we will want to manage, so go ahead and save everything. Now open up your webpage, and make sure that everything is formatted correctly, and that all the links work. 

I went ahead and made a page that is absolutely riddled with errors. Look at it and see if you can find the mistakes yourself before I say what they are. 

The mistakes are as follows: There is no new lines between the links, making it really sloppy, the link to google is still on the page, and I didn't use new lines for my introduction, it's just one long line of text. 

So let's look at the code and see how we fix this. 

<html>

<head>
<title>Title of the document</title>
</head>

<body style="background-color:black;">

<h1 style="font-family:times;color:white;font-size:20px;"><center>This is a webpage</center></h1>

<center>
<p style = "color:white">


You wake up one day to find that the world has been invaded by aliens. This is not normally information
you would have immediately upon waking up, but there is one standing outside your window, staring at you.

What do you do?

<a href = "file:///C:/Users/Coleman/Desktop/Instructable/pistoldeath.html">Starting screaming</a>
<a href = "file:///C:/Users/Coleman/Desktop/Instructable/inside.html"> Wave at the alien and invite them inside. </a>
<a href = "file:///C:/Users/Coleman/Desktop/Instructable/sleeping.html">Pretend you don't see it, roll over, and go back to sleep. </a>



</p>

</center>
<p>


<a href="http://www.google.com">This is a link to google</a>
</p>

</body>
</html>

The link to google is pretty easy to remove, so we can just delete that line of code and the <p> </p> around it specifying it's paragraph. The rest of them are spacing errors, meaning that I forgot my <br> in places. You'll notice that I have spaced my introduction and links the way I wanted in the code, but html does not pick up on this. We have to do all the new lines manually.  So let's add those, now let's look at what the fixed code looks like. 

<html>

<head>
<title>Title of the document</title>
</head>

<body style="background-color:black;">

<h1 style="font-family:times;color:white;font-size:20px;"><center>This is a webpage</center></h1>

<center>
<p style = "color:white">


You wake up one day to find that the world has been invaded by aliens. This is not normally information <br>
you would have immediately upon waking up, but there is one standing outside your window, <br>
staring at you. <br><br>

What do you do? <br><br>

<a href = "file:///C:/Users/Coleman/Desktop/Instructable/pistoldeath.html">Starting screaming</a><br>
<a href = "file:///C:/Users/Coleman/Desktop/Instructable/inside.html"> Wave at the alien and invite them inside. </a><br>
<a href = "file:///C:/Users/Coleman/Desktop/Instructable/sleeping.html">Pretend you don't see it, roll over, and go back to sleep. </a><br>



</p>

</center>

</body>
</html>

So the google link is removed and all the appropriate <br> have been added. But what if we have a much larger webpage? How do we find our mistakes then? In programming it is always good practice to comment your code so you know what part does what, and html is no exception. Here's how html comments are done in case you are doing a much larger page and need to keep track of everything. 

<!--This is a comment. Comments are not displayed in the browser--> 

Step 8: (Optional) Adding Pictures

You may choose to skip this step, but if you want to know how to insert pictures or would just like some more experience in html then go ahead and do it. Maybe you're doing an online picture book, so let's go ahead and look at the code for an image 

<p><img src ="http://static.guim.co.uk/sys-images/Money/Pix/pictures/2008/10/13/AlienGetty460.jpg" alt="Aliens" width="460" height="270"></p>

For my image I chose to use a picture I found on google images, if you're doing this, make sure that when you find the picture you want, you right click on it, and select open image in new tab. When you do this the url should end in jpg, gif, or some other image file extension. You'll notice that the code is similar to the way that we have done links. So if you want to insert an image from your computer, it'd be the same way we did it when we were using links to other webpages that were only located on our computer. 

So once you have the image that you want go ahead and paste in the url or address after img src. It doesn't matter what you put after "alt". And then you have to specify the width and height. Mine was easy enough since the dimensions were given on google. Be careful when playing around with these, because it is very easy to make your image very stretched out, or very scrunched up. 

Step 9: Wrapping Everything Up

It is up to you how you want to choose to end your story. For mine I have chosen to end it with the main character either surviving, dying, or surviving and a lot of the world gone. 

When they reach the end, I only have one link instead of multiple options, letting them go back to the start and being again if they wish. I find this useful, because it let's them go back to the start without hitting the back button dozens of times just to get there. You want to be nice to your user, and that means making things as easy as possible for them at times. 

Step 10: Finished!

You have now made your very own choose your own adventure website! Have your friend and family play it and see how well they can do. Or if you're looking for more of a challenge, see what else you can do with html to make your website more interactive. How would you insert a video? What if you wanted a point system throughout your story? There's plenty that you can do, you now know the basics, so see how you can expand upon them and teach yourself something new. 
<p>This was <em>so</em> fun to make!!!!</p>
<p>great idea may i suggest for new people to html to use notepad ++ because it shows you the colors of different sections so incase you do mess something up it will show you where in some way</p>
<p>This is a really fun idea and I like that you made it so detailed that it's accessible to beginners. Thanks for posting this :)</p>

About This Instructable

1,839views

17favorites

License:

More by fnadarevic:Creating a choose your own adventure webpage 
Add instructable to: