This adventure is a number of web-pages linked together.
To finish it, you'll need to change the existing web-pages and add some new ones.
A web-page is a special type of document. It's written in HTML: HyperText Markup Language.
A web-page can contain different 'elements': like headings, paragraphs, images and links to other web-pages.
You define what elements should appear in the web-page using HTML.
When you open the web-page in your browser, the browser reads the page's HTML, and shows the defined elements.
It's time to change a web-page in the adventure.
Let's say you want to update the 'start' web-page of the adventure.
We'll add another door that says 'Enter if you dare'.
First of all, you need to open the start web-page in an HTML editor program (ask a mentor if you need help):
The HTML defines the different 'elements' that make up the page: like headers, paragraphs and links.
Each 'element' is made up of a start 'tag' and an end 'tag', and some text in between.
See this line?
This is HTML for 'paragraph' ('p' for paragraph). This tells the web-browser to display the text 'You are in a room' as a paragraph. So the browser shows this text with some empty space above and below it.
Before we add our new 'Enter if you dare' door, let's look at the different HTML elements you can use in your adventure web-pages.
We've already talked about the 'paragraph' element, but to repeat ourself...
Here's an example paragraph in HTML:
And here's what it looks like when loaded in the web-browser:
'You are in a room.'
A 'header' element is useful for chapter or section headings in your adventure.
Here's an example header in HTML:
And here's what it looks like when loaded in the web-browser:
There are different sizes of header: try h1, h2, h3, ...
The list element is useful for writing a list of choices in your adventure.
Use the 'ul' element for that. It's a bit different, because each item in the list is also an element: called 'li' (for 'list item')
Here's an example list in HTML:
And here's what it looks like in the web-browser:
So you want to link to another web-page in the adventure?
You'll need the 'a' element for that (no idea why it's called 'a')
Here's an example link in HTML:
And here's what it looks like when loaded in the web-browser:
Enter the secret tunnel
Now we're ready to add another door saying 'Enter if you dare' on it (to the start of the adventure):
Great - you've added another door to the adventure!
It's time to fill out the adventure.
There are 4 existing web-pages that need changing to make this a real adventure.
Open each page in your text editor, and change it (like you just did with start.html):
In Challenge 1, you just linked to a page that doesn't exist yet: enter-if-you-dare.html.
You'll need to create that page too: the easiest way is to copy and paste an existing HTML file (like thrown-rat.html), and rename it to enter-if-you-dare.html
Then change enter-if-you-dare.html to what you want: what's behind the 'Enter if you dare' door? A giant squid? A volcano?
Spend as much time as you want in writing your adventure.
And get someone else to play it :-)
Your adventure would probably look cooler if it had pictures.
Go and add some.
Use the 'img' element for that. It's a lot like the 'a' link element: but you're linking to a picture rather than another web-page.
Here's an example image in HTML:
And here's what it looks like in the web-browser:
You can create and save new images here: http://drawisland.com/?w=400&h=400
Or use a drawing editor on your computer to create something (like Paint on Windows). Ask a mentor for help with this.
Either way, save the image to the same folder as the adventure html pages - then you can link to it using the 'img' element.
We hope you had fun creating an adventure with simple web-pages.
Now it's time to learn more about web-pages.
Try working through the two online courses at Khan Academy