HTML ... Creating your first page!

Using what you have learned from the previous lessons, it is now time for you to create your very first web page.

Before you start though, it is important for you to set up a couple of things on your computer so you can "view" your work on the fly and make changes to your document(s) as required. You currently have only ONE Netscape Browser window open on your monitor and you must open a "second" window where you will be able to "view" your work as you progress. Do do this, simply point your mouse to the "file" menu and use "new" and then "new navigator window". This will open a second window on top of the current "course" window. For now, just "minimize" this window using the "-" sign at the top right. (You will be "toggling" between the Netscape Web Page Design Course window and your "First Page" window for the remainder of this course so get as comfortable with this procedure as possible.)

The next step to is "launch" your "notepad.exe" text editor in another window. To do this, click and hold on the "START" menu to the lower left, look under "programs" and then select "notepad.exe" to launch the editor. Once the editor is running in a separate window, "minimize this window" as you did in the step above. Basically, you will be following this course through the "frames" website in the basic course to get a command to try, you will "minimize" the course window, maximize the "text editor" window, type in the proper commands, minimize the notepad window and then maximize the 2nd "First Page" Netscape window and perform a reload function to the changes take effect. Again, get very comfortable with this procedure BEFORE YOU CONTINUE ANY FURTHER as you will be "toggling" back and forth between these windows dozens of times in any given session.

Now, that you are ready... we will begin by creating our First Page in a few steps. As you read along and learn about the correct coding required, you will see many "click to test" hyperlinks that will show you how that specific coding should control your page. Simply click on these hyperlinks first, and then minimize the course window and make the entries for yourself in your notepad editor and then view it in your 2nd Netscape window to check it out.

 

STEP 1

Type the following code into your text editor:

 <html>
<head>
<title> My First Web Page </title>
<body>
 This is my very first web page!
</body>
</html>

 CLICK TO TEST

 

STEP 2

You should have noticed that this very simple coding produced a page with a "neutral gray" background with a single line of black text in the "arial" font style. These are the "defaults" set into any new web page that does not have the coding to instruct otherwise.

Let's try some simple coding that DOES instruct the browser to display the page differently. In this example, we will "center" the text and add a few more lines as well by entering the following in your text editor:

 <html>
<head>
<title> My First Web Page </title>
<body>
<center>
This is my very first web page! I am now centering the text on the page by using the "open center" and "end center" "tags". I think that this web page design stuff is going to be fun to learn!
</center>
</body>
</html>

 CLICK TO TEST

 

STEP 3

Well, now you should see how to "center" text on a page. But what about that boring background colour? How can we change that so it looks different, like white or red or green, etc?

This is one of the MOST BASIC of web page functions to control. To change these attributes, you must use "additional body tag information WITHIN the "open body" tag itself. The "open body" tag ONLY REQUIRES that you use the word "body" one time at the beginning followed by additional tag information to control your pages. The MOST COMMON is the "text" tag that allows you to control the colour of the text in the body of your pages. The next MOST COMMON of these is the "bgcolor" tag and the "background image" tag that control how the background of your pages is displayed.

Using colours on web pages can be a little confusing at first and this will be covered in much more detail in the later sections of this course. The "background image" tag will also be covered a little later. For now, try entering the following into your text editor to display white text on a black background:

<html>
<head>
<title> My First Web Page </title>
<body text = "white" bgcolor = "black" >
<center>
This is my very first web page! I am now colouring the text of this page white to appear on a black background with some very simple commands.
</center>
</body>
</html>

 CLICK TO TEST

WORKING WITH TEXT

There is so much more you can do with text using "start" and "end" tags. You can change the way the fonts are displayed, create "bold", "italic" and "pre-formatted" text as well as display the text in different "header size" for titles, subtitles and more. Hit "continue" to start the next lesson.

[ CONTINUE ]      [ BACK ]      [ HOME ]