HomeSitemapForumsLessons  

Lesson 4a

Creating a Simple Page

With this lesson you will create just a simple page using the basics within web design to create it. The beauty of FrontPage is you don't have to worry about making sure your graphics and other items are within the web before you create the page that requires them. FrontPage prompts you to save your graphics and any other file within the web itself. Therefore you don't need to create a specific folder for you contents, FrontPage will do this within the My Webs folder created specifically for FrontPage.

  1. Open FrontPage
  2. Click on File then New then Page or Web (this brings up a menu on the right of your screen)
  3. Click Blank Page, for this exercise we are just going to work with a basic page. You will see a page opened up called new_page_1.htm
  4. At the bottom of the window you will see click on the HTML to view the page coding.
  5. This is what you should see
    • <html>

      <head>
      <meta name="GENERATOR" content="Microsoft FrontPage 5.0">
      <meta name="ProgId" content="FrontPage.Editor.Document">
      <meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
      <title>New Page 1</title>
      </head>

      <body>

      </body>

      </html>
  6. If you are still unfamiliar with what the code means review lesson one to refresh. The only thing we will change in this code for now is <title>New Page 1</title> remove the New Page 1 and replace it with Welcome.
  7. Now we are ready to work on the body of the page. Click back to Normal View and return to your blank page.
  8. You are going to now format your page. Click on Format and then choose Background. The following window will open for the moment the only two items we are going to deal with are the Background and Text under Colors. 
  9. Click on the arrow beside the red one and it will bring up a small window as shown on the right. If you do not like any of the basic colors provided you can click on the More Colors and another window as shown below will pop up and you can choose your colors from that view. You can even go further and click custom and you will be provided with another window where you can choose different shades of any of the colors in the graphic below.
  10. When you have chosen your color and back at the Page Properties window above then do the same the thing for choosing your font. Click on the arrow beside the red 2 and choose your colors. When done click ok on the Page Properties window and you will be returned to your blank page and can begin with creating the rest of your page.
  11. Type in the title of your page "Welcome" (without the quotes)
  12. Highlight the text and then go to the Style button on the far left of the formatting toolbar. Click on the Arrow and Click on Heading 1 this will close the box and enlarge your text to the largest heading size.
  13. Next you will click on the center button approximately in the middle of the formatting toolbar. This will center your heading.
  14. Hit enter on your keyboard and again your cursor will be back to the default font size and will be centered.
  15. You will now click on the left align button which is beside the center button. This will bring your cursor to the left of the page.
  16. You can now type a paragraph into your page. Write whatever you wish. When finished hit the enter key on your keyboard.
  17. Now enter a second paragraph for your page. When finished again hit the enter key.
  18. Now you will place a graphic on your page, we will use a graphic that is already on your hard drive just to make it easier for now. Click on Insert then Choose Picture and then Choose From File. You will have a new window pop up which will bring you most likely to your document folder. Find a graphic from there that you would like to insert into your page and click on the picture and then click insert. Your picture is now on your page.
  19. It is now time to save your page. Click on File then Save. It will most likely prompt you to save your file as index.htm as FrontPage checks the web to see if this default page exists, if not it will ask you to save it as the index file. Instead we are going to save the page as welcome.htm, all you need to type into the File Name spot is welcome and then click on Save this should bring you up a new window as shown below.
  20. Click on the Change Folder and there should be a folder within your "My Webs" called images. When you click on Change Folder a new window pops up as shown below. Click on the images folder and then click the OK button.
  21. You will then be brought back to the window below and you will see your image has been moved into the images folder. If this is correct you can now click OK and your file is saved.

    22. Here is my page, yours should look similar to it.

Summary

You have now learned the very basics of Web Design. Adding a title, adding paragraphs and adding a picture. If you open your page and look at it in the HTML view you will see what tags you have used to create your page.

Lesson 1 went through the tags that are automatic when you create a page in the HTML editor you are using. If you remember your page when you first opened it the <body> tag was simply just a body tag. Looking at it now, you will see something similar to this

<body text="#008080" bgcolor="#CCCCFF">

When you formatted your background information you changed your body tag and gave it some attributes.  Attributes are options that enhance the way the tag will display the content on the web page. The attribute is made up of 3 components, first the name of the component, then the =sign and finally the the value of the component. For example "text" is the name of the component then the = sign, then "#008080" is the value. People who don't use HTML editors actually type the entire coding of a page. If you were to go to notepad and want to create a web page, you would be typing in each line of code. The HTML editor makes it much easier and faster for a designer to create a page.

The code above tells the browser the default text color and the background color of the page.

The next line of code is your heading.

<h1 align="center">Welcome</h1>

The h1 is the heading size that you chose for the title of your page, when you chose to center that title you added the code align="center" to the h1. Basically this line has told the browser to place the word Welcome centered on the page and using the largest heading size.

The next lines of code are your paragraphs.

<p>This is a simple page to go with the Web Design tutorial. It is linked to Lesson 4 on creating your first page.</p>
<p>This is a second paragraph within the page.</p>

You see here that the tags used were <p> and </p> these tell the browser to start and end a  paragraph. For this tag it is not absolutely necessary to use the end tag </p> but it is better to use them both to easily see where a paragraph begins and ends.

And finally the last line of code you entered was the graphic

<p><img border="0" src="../images/Avatars/fbacks998.gif" width="102" height="116"></p>

It also used the paragraph tags, but in addition it used the <IMG> tag.

 

 

   Site Map

    Copyright © 2001-2005 Margaret Walker