Making a More Complex Web Page

So now we know some more facts about web pages:

  • You can make web pages using Notepad
  • You must make a folder which will hold the web page files
  • You must follow rules for naming folders and files:
  • Don't use spaces, symbols or punctuation (though dashes and underscores are OK)
  • Always use lowercase letters
  • Always give web pages a suffix of .html
  • Always name the first web page index.html -- later pages can have different names

Knowing these basic points, we can now move on an start making a more complex web page.

Change-Save-Reload-Check

When we finished on the last page, you had two programs open: Notepad and a browser. The Notepad window had your basic web page HTML code, and the browser showed what the web page looked like.

As we continue, keep these two windows open and switch between them. We will use Notepad to add bits to our web page, and we will use the browser to see what the web page looks like. Keep in mind that both windows show the same web page: Notepad shows the HTML code, and the browser shows what the HTML code looks like as a web page!

When you have made a new change and you want to see it in the browser, first you must SAVE the changes. This is very simple: do a CTRL+S on the keyboard. This will save the file. It will seem like nothing happened (the computer will not tell you "I've saved it"), but if you did the CTRL+S correctly, then trust that it was saved. You can always try again if it didn't work.

Next, switch to the browser window. It will not show the changes you saved yet; to see the changes, you must RELOAD the page. You can do this by clicking on the reload button--in Internet Explorer, it looks like this:

Or you can just click on the F5 key (in any browser). When you do that, the changes you saved will appear on the web page. To review this process:

  • Make Changes to the web page in Notepad
  • Save the changes in Notepad by doing CTRL+S
  • Switch to the Browser
  • Reload the page
  • Check to see if the new changes you made look okay
  • Go back to Notepad and make more changes; repeat this cycle.

From this point, I will ask you to do a Save-Reload-Check to see the changes you made.

Let's Make Some Changes!

Remember the commands I introduced on the last page? Let's try a few.

In your Notepad window, the body should look like this:

<body>
Hello!
</body>

Let's add some line spaces before the "Hello". I will make new code red so you can see it more easily.

<body>
<br><br>Hello!
</body>

That should add two blank lines to your page before the "Hello". Now add a CENTER command. Don't forget the start and finish!

<body>
<center>
<br><br>Hello!
</center>
</body>

That should put the "Hello" in the center of the page, two lines down. Try it! Do a Save-Reload-Check. If there are any problems, just go back to Notepad and look for spelling mistakes or mistakes with brackets and backslashes.

Next, let's try to add a horizontal rule and some more text.

<body>
<center>
<br><br>Hello!
<p>
<hr>
<p>
Here is some more text!
</center>
</body>

After you add this code, do another Save-Reload-Check.

Now let's try something really new: a command with attributes. We haven't done this before, so be careful and pay attention:

<body>
<center>
<br><br>Hello!
<p>
<hr>
<p>
Here is <font size="+2">some more</font> text!
</center>
</body>

Some notes about these changes:

  • Notice that only the beginning tag has the SIZE attribute; the end tag has only the end-FONT command
  • Notice the spaces--there is a space before the FONT command, but no space between the command and the word "some". This is to avoid double-spaces before the word "some," which can happen if there is a space before and after a command. Usually a double-space will not happen, but it is best to be safe.
  • Notice that I put quote-marks around the "+2". This is not necessary, but it still works. The quotes are needed usually just when the attrubute information is letters; quotes are usually not needed with numbers, but they work anyway.

Make the changes I showed above, and then do another Save-Reload-Check.

Now some more changes. Let's add another attribute to the FONT command:

<body>
<center>
<br><br>Hello!
<p>
<hr>
<p>
Here is <font size="+2" color="red">some more</font> text!
</center>
</body>

Add that change, and again, do a Save-Reload-Check. By now, the web page should look like this:



Hello!

Here is some more text!

Are you getting the idea for how web pages are designed? I hope so! If not, then review this page--do everything again from the start. After that, continue on to the next page...

Now You Know

Now you know how to make a very basic page. You are ready to learn more commands and become creative, making your own web page designs.