HTML and You ("Lucky Seven" Project #2)

As I mentioned in my introduction to this project tutorial, the best part of using Javascript is that you can go straight from Notepad to your browser of choice. If you have your own web space–and everyone in Digital Storytelling does–it’s easy to use Javascript to make interactive, interesting web pages for your site. Javascript interacts with HTML and CSS to make pop-up windows, rollover images, text boxes, and even simple games for your site.
I figured I’d explain how to put up a new web page on your site for three reasons:
1. I really just wanted to get it out of the way because I’ll forget later.
2. I also wanted to get it out of the way because I’d much rather be coding 🙂
3. Apparently there are people in this class who haven’t been able to get their home page up, and this will help cut down on some of the intimidation and give you a template to work from.
So here’s my step-by-step guide to getting your stuff straight for the future.

Stop worrying. Web design is fun, not frightening. Open up a basic text editor. I’m almost certain you have one on your computer. If you don’t, well, I have no idea what you did with it, but you can download them online for free. Windows users, you’ll use Notepad; Mac users, try TextEdit. This is NOT a job for Word. Word does not like computer code. Not only will it give you red lines all over, but you also won’t get much done as far as making a website goes. Just don’t do it.

Now that you’ve got your text editor open, you’re ready to start with HTML. HTML is what makes your web pages pretty, and I’m going to give you the basic template for every web page out there. I’m also going to go a bit farther and explain what each part is for. When you see text /*between a set of slashes and asterisks, like this*/ it means that everything between and including those slashes and asterisks doesn’t actually belong in your HTML file. All of that text is my explanation, and you should get rid of it before you upload your HTML file so that it’s a visible part of your site. Otherwise, it’ll look ugly and everyone will laugh at you. (Just kidding, but you need to get rid of them.)
Why did I choose those stupid symbols to mark what I’m going to tell you? Well, I didn’t. Take notes now; this is the first thing I’m going to teach you about writing code.
Whenever you see /*text between slashes and asterisks*/ or
//a single line of text that’s preceded by two slashes
then you should know that the text is invisible to the computer as it starts reading and executing the Javascript code. These are called comments, and every good programmer uses them.
But why are they important if the computer never sees them? Comments make things easier for humans to understand when they try to read through hundreds of lines of programming languages. You’ll get a better understanding of what I mean once you get started with this project. If you work on this project on Monday, have a lot of studying to do, and then pick back up with the project on Thursday, then trust me, you’re going to wonder what in the world you were doing last time you sat down to code. You’ll wonder what this does, why you decided to add that, and you’re going to get frustrated. Comment as you work. The slash-asterisk style of comment is generally used for several lines of comments or only a small portion of a line, while the double slash comment is used for a single line (and everything on that line will be commented out). Simply put in one or the other and write yourself a bunch of notes on what you’re doing. You’ll start to get a feel for what you need and want to comment as you start working.
Now that you’re familiar with comments, you can see the backbone of an HTML file. So, here it goes:

/*The first bracket lets the computer know that you’re starting to write HTML. The bracket things are called tags.*/

/*All of your fun Javascript stuff is going to go in here!*/

<br /> /*Whatever you put in here will show up at the top of your browser window, where the minimize and close buttons are. Try to keep it short, sweet, and to the point; there’s a limit to where it’ll simply get cut off. */<br />

/*Everything that you want people to be able to see on your page goes in here. For this project, you’ll probably write a little bit about your game, like instructions for how to play and what the goal is.*/

/*In case you didn’t notice, each tag needs to have a closing tag to tell the computer that a part is done. For example, a tag follows this comment so that the computer knows that the HTML is all finished.*/

Now here are some fun pictures to help you along!
This is a bare bones web page:

NOTE: I’m having difficulty getting this to work for some reason, so I’m going to complete this tutorial at a later date. I’ve been trapped in front of a computer screen for a majority of the past two days working on a do-or-die programming project (There’s really no exaggeration there.), and I’m honestly not in the mood to mess with this stuff right now. Plus, I’m really, really sick. I’ll try to get the next part of this project up soon–I know I’m behind–and finish with this one ASAP. Sorry for the delays and brutal honesty.

Comments are closed.