zachlatta/scratch.md Secret

## *scratch*.md

      
    Raw
  

              *scratch*.md
            
          
Adventure Workshop


Go to Cloud9 and log in. Then, create a new directory for this workshop,
naming it AdventureGame. Then, create a new file, naming it index.html.
This is where you will introduce the player to your adventure game.


Use snake case for the folder name, adventure_game


In index.html, put in the template for a basic HTML page:

<!doctype html>
<html>
  <head>
    <title></title>
  </head>
  <body>
  </body>
</html>


doctype should be all caps
Should have newlines before and after the code block
Make sure to clarify that they should type in the basic HTML template. They
should not copy and paste.


Before proceeding, we'll briefly go over what this template means. HTML is
language that the browser can understand, and it works by storing information
inside tags. <html> is an example of one such tag. Inside <html></html>,
we've placed two other tags: <head> and <body>. <body></body> holds
everything you would see in the actual tab/window when you open the page.
<head></head> usually contains metadata about the page; for our purposes
we'll only be putting in the title (with <title></title>), which you usually
see as the name of the tab or window, in your browser.


Assume that they already know what HTML is, just link them to the personal
website workshop or something as a reference.

Ex. "As introduced in the Personal Website workshop, HTML is one of the
three languages we use to build websites"


Do the same sort of thing for tags
What is metadata? Complex term.


<!doctype html> tells the browser what version of HTML to expect. Since it is a language, HTML is constantly growing and updating, so there are multiple versions. In our case, we are going to use HTML5.


Capitalize doctype
Description of HTML could be improved.
What does HTML5 mean?
Can probably be simplified to "<!DOCTYPE html> tells the browser to use the
most recent version of HTML." or something like that.


If you've done the Personal Website tutorial, you've already encountered this
stuff.


Assume that they have, it's the first workshop everyone does.


This structure is common to all HTML pages. If you want to find out more, just
open up any website and inspect it. You'll find each of these elements on
every page-- the doctype, html tag wrapped around a head and body, and a title
in the head.


Can probably remove this


If we refresh the preview (TODO add instructions for viewing preview in c9),
we'll see nothing but a blank page! That's because we haven't added any
content to the body tag, which is where all the stuff we see in the browser
will be kept. We've also got no title and no favicon! (a favicon is the
little picture in the tab next to the title) (TODO rearrange this)
We can add a title by filling in <title></title> with something reasonable.
Probably

<title>Adventure Game - INTRO</title>


It's unclear what the title is for. Does this title show up as text on the page?


Now that you have your bare template ready, we can start to add content to
our page. As mentioned before, all information is wrapped in tags. Tags are
predefined in the language; think of them as the words in the language. For
text, HTML provides a number of tags to store text, one of the most basic
ones being the paragraph tag (<p>). Just as in the other tags, you can
place information within the paragraph tag by surrounding your content with
an opening <p> and closing </p> tag, like so:


Can be simplified, reference the Personal Website workshop

<p>Here's some text</p>

Let's add a description to our adventure, so that the user will be compelled to play the game!
For mine, I'll add this:
<p>Go on a night quest in NYC involving tacos, missed trains, and free concert tickets. Press start to begin the adventure!</p> [TODO wow that's horrible]

My story will be about exploring NYC at night, because I'm not very creative and I can only write autobiographical stories.

Now, let's refresh the preview, and voila! Our text can be seen in the page.
But wait, it's a little silly to tell the user to press start when there is no start thing to press, though, isn't it? Let's fix that by creating some clickable text.

We can then use that text to link to a new page that will designate the start of our adventure. So what's the appropriate tag to contain this text?
Generally, if we want to link a page to another, we use an anchor tag. It's called this because idfk (TODO), and the tag for it is <a></a>. What makes an anchor tag special is that it has an attribute called href, meaning hypertext reference, that is, a link to the page you want.

I'd ignore what the tag is called and just say that we can use <a href="blah">blah</a>. If you could make links your entire life without knowing
this, the reader of this workshop will be able to too.

We're going to add a link to a start page by adding
<a href="start.html">Start Adventure</a>

We've set the attribute of href to start.html, and the text linking to that will say "Start Adventure!"

Now we'll create the start page by making a new file called start.html. Put the HTML template in start.html. Add a reasonable title, like <title>Adventure Game - START</title>. We are now ready to start the adventure! Make a <p> in which you'll set the scene and describe the surroundings.
If you've written several paragraphs, you may have noticed that one <p> doesn't quite cut it. All of the paragraphs have turned into one big blob of text. That's why it's called a paragraph tag! Place each of your paragraphs in its own <p>.

At the bottom, create one or more options to carry your player to the next scene(s)! Repeat what you did in linking the start.html to index.html-- wrap each option in an anchor tag, and link each to a new page where you'll write the next scene. Here, it'll be handy to come up with some sort of naming convention; it can get quite tangled once you've created a complex network of possible routes in the adventure.

What is a naming convention? Give examples. Give examples of the scenes you're creating.

Last step (optional): make an option for the player to go back, by adding an option on every page that links to the preceding page.
Here's what my start page looks like:
  <html>
    <head>
      <title>Adventure Game - START</title>
    </head>
    <body>
      <p>It's 2AM. The streets are shiny after fresh rainfall, and the smell of garbage is starting to lift. You're on the corner of 2nd St and Avenue A, and you've got to meet your friend in midtown by 5:30AM to wait in line for Shakespeare in the Park tickets.</p>
      <p>It'll take you 15 minutes to bike up there, so you've got time. You've also got a hankering for tacos, maybe because there's a taco truck in plain sight across the street. You</p>
      <a href="index.html">Go Back</a>
      <a href="tacoTruck.html">cross the street to get to the taco truck.</a>
      <a href="walkNorth1.html">ignore the craving and start moving northward.</a>
    </body>
  </html>

Get creative: add images, videos, or even external links! your adventure can go anywhere. the internet's the limit!!

Awesome. Give an example of what a completed version of this looks like.


Epilogue

Do you hate links? Try buttons, with the <button> tag!
Are you totally frustrated by how many HTML files you've had to make?! Is it driving you mad that the number is expontentially increasing?
[introduce solutions to this]

Might also be worth introducing CSS to style the page (or at least give an
example of how you used CSS to style the page).

Overall thoughts:


Good start
Give an example of what this workshop will help the user build at the very
beginning (like a link to a completed text adventure)

Bruggie's might be a good example


Example content is good, but can be expanded/improved upon
Introduction is too long