Your First HTML Page

Remember that HTML reads like you do, top to bottom, left to right. OK, take a deep breath… here is our first HTML page:

<HTML>
<HEAD>
<TITLE>My First Web Page</TITLE>
</HEAD>
<BODY>
<P><B>This is my first HTML page!</B>
<P><HR>
<P>I can write in <I>Italic</I> or <B>Bold</B> or <U>Underline</U>.
<P>I can use <B><I>two tags at once</I></B><BR>
and I can even use <B><I><U>three tags at once</U></I></B>!
<P><HR>
<P><I>…and that’s all for now.</I>
</BODY>
</HTML>

Now I would like you to create this page on your own. Open up Notepad or Wordpad and type in the same HTML code that you see above (Please don't copy and paste the code into a new page. That's cheating, and more importantly, you won't learn anything. Please type in this very short page key-by-key on your own). After you have finished typing in the code, there are some special instructions you will need to follow to save your page.

Saving a Web Page

When you are ready to save your Web page, you will need to follow a few special steps:

  1. Go to the File command on the menu bar and click Save or Save As.

  2. Choose where you would like to save your page. (hard disk, floppy disk, etc.)
  3. Give your page any file name that you like (for most of your assignments, you will be given a specific name for your page). Then, give your page a suffix of .html. For example, for the page that you are creating in this lesson, you will name it page1a.html.

    When naming a page, use only letters, numbers and the underscore symbol ( _ ) in the name. Also, use only lowercase letters, and do not put any spaces in the name.

  4. For the Save As Type, select Text Document or Text Documents, if it is not already selected.
  5. Click the Save button.

    Opening Your Page in the Browser

  6. Once you have completed your Web page and saved it on a disk or your hard drive, you'll need to view it using a Web browser.

    1. Open Microsoft Internet Explorer, Mozilla Firefox or Netscape. Under the File menu at the very top left of this screen, you'll find Open, Open File, Open Document, or similar words.
    2. Browse through your computer until you find the location of your page. Then click on it.
    3. You might have to then click an OK button. The browser will do the rest.

      How does your page look? Does it look identical to my example? If it does, then congratulations! You have completed your very first Web page. Give yourself a pat on the back.

      Does something not look right? Then go back to your HTML document and see if you can locate any errors that you might have made. Don’t worry…errors happen frequently in Web design. The important thing is to have the persistence and patience to be able to locate your errors and correct them. After you correct your errors, save the HTML page. Then go back to your Web browser and refresh the page. If your HTML page has been corrected properly, you will see the page correct itself before your eyes.

      There is one other important thing. Remember that Web pages sometimes look different in different browsers. Make a habit of checking your Web pages in both Microsoft Internet Explorer and Netscape Navigator after you create them. This will help ensure that anyone who looks at your page views a page that you can be proud of.

      One Last Thing

      If you are going to start writing HTML, I recommend that you start looking at other authors' HTML pages. Don't just look at the pretty page; look behind it at the HTML code. Why would you do that? Simply, because you can! Let's say you look at a page that has a really neat layout, or a fancy text pattern, or an interesting grouping of pictures. You'd like to know how to do it. All you need to do is take your mouse and point it anywhere on the page (preferably on some blank white space). Now, right-click your mouse and select “View Source” or “View Page Source”. What you will see is a new page that contains the HTML code for this page. This is a great quality of HTML. You can view code from anyone’s Web page by right-clicking and viewing the source code. And now that you’ve learned a little bit about HTML, you’ll begin to understand some of the code that you view on others’ pages. As the semester continues, you’ll continue to understand more and more.

      4. Please feel free to re-read this information until you feel like you really understand it. If you feel like you already understand the information on this page, great job! You are now ready to complete your 2nd Assignment.

      Assignment 2

      Lessons 

       
      Make a Free Website with Yola.