March  28, 2009

Create your first web page – Part 2

by Bill at 2:23 pm

Lesson 1: Get ready to write code

Think this stuff is hard? I’m going to convince you in the next 15 minutes that it’s not. Your 80-year-old grandma can do this, even your 6-year old brother could do it. And now, you’re going to do it.

We’re going to assume that most of you are using a Windows computer. But just in case, we’ll get you set up on both Windows and Mac. And just to make sure we don’t lose anyone, we’ll go through it twice.

For Windows users, do the following:

  1. Click on the Start button (lower left), and go to Accessories, and choose Notepad. I’ll wait while you do that.
  2. Stretch your box out so it covers the screen this way. We’re doing this because we’ll need to have another window open right next to it.
  3. Now open your Internet browser, either Firefox, or Internet Explorer. Once it’s open, do the same thing with this window. Stretch it out until the two windows are sitting side-by-side. Just make sure you can still see a little bit of your desktop. Notepad on the left, and your web browser on the right

For Mac users, do the following:

  1. On your desktop, double-click on your hard drive icon (usually at the top right). Next double-click on your Applications folder. Inside that folder, you should see a program called TextEdit. Double-click and launch that program.
  2. Once TextEdit is in position, click once in the middle of that window, and then go to the menu at the top, choosing Format. Select the option “Make Plain Text.”
  3. Stretch your box out so it covers the screen this way. We’re doing this because we’ll need to have another window open right next to it.
  4. Now open your Internet browser, either Firefox, or Safari. Once it’s open, do the same thing with this window. Stretch it out until the two windows are sitting side-by-side. Just make sure you can still see a little bit of your desktop. TextEdit on the left, and your web browser on the right

Lesson 2: Your first web page

So, first things first… we need a place to save our future website.

  • Create a new folder on your desktop (or wherever your teacher wants it) and give it a name. Need help creating a folder? Click somewhere on your desktop. Right-click and choose “new” and then “folder.” Type in a name, like maybe website project, and that’s it!
  • Click in the middle of your Notepad (or TextEdit) window, and type this in:
    My first web page.
  • Now go up to the File menu (top left), and click on File, and then click on Save from the drop-down menu.
  • Save the file as myfirstpage.html. It’s important that the “.html” is at the end. Web browsers know how to open these kids of files.
  • Now click on your web browser, then click on the File menu, and then Open (Ctrl+O does the same thing, and much quicker). Now find the HTML file you just saved, and double click on it (or choose Open).

(SOUND THE TRUMPETS)

You just did it! Your very first web page, and all it took was typing a few words. See how simple that was?

Now, don’t get me wrong. Your page is cool and everything … buuuuut it could be a lot better, don’t you think? So lets’ move on.

Tags: , , ,


Leave a Reply