You browser does not support JavaScript, or it is not enabled.
The functionality of this site requires enabled Javascripts.
   http://www.passco.com/npunit1a.htm   Updated:   Ideal Presentation Configuration
Unit-1 Unit-2 Unit-3
Using Notepad+ and Making a Web Page - Unit 1a
Part of the Basic3 Skills Online Courses
This tutorial is best viewed if your set the window to this width.

Align Next Prior Top
Page 6 - Fonts

   Web designers would like to control the fonts that you see on their web pages.

   The font requested by the web file may not be available within the browser or your system. Or, the size of the same named fonts may be slightly different in two different browsers.

   Browsers are designed with defaults for everything. So, what you see on your screen, may be different than what the designer expects you will see. And, even if it is exactly what he wanted, you can change it.

   The size of HTML fonts have a defined range from Size=1 to Size=7. Let's add a HTML font tag the makes the "default" font as large as possible.

   Fonts have other properties such as "color", "bold", "italic" and "underscored". Click graphic.
Align Next Prior Top
 View Background File: http://www.passco.com/images/fontsample.gif
Web page displayed









Align Next Prior Top
Page 7 - The HTML Block

   Since we are going to write our first Web Page, we need to know "What is and HTML file". The black text in this graphic 1 illustrates the normal "boundaries" of web page file. This is the "HTML" block.
2
   This is not the minimum HTML file. The minimum file is as simple as a file with a single "space" character.

   The single blank character file constitutes a "text" file. We could name is it, "Onespace", even without an extension. 3

   Lets look at the "onespace" file with the Netscape browser.
4 . We can look at the source file, 5 . But, the source file does not show the space character. So, we'll return to the Netscape window and "highlight" the total content of the file, 6

Read this 7 and this 8

Align Next Prior Top		 View Background File: http://www.passco.com/images/htmlsample.gif

Exercise 1
Read all instructions first.
  1. Open Notepad+ (Click Start / Run / then type in "notepad+.exe" and click "OK".)
  2. Adjust the Notepad+ Window so you can read the tutorial. Use the edges and corners of the window to make this adjustment.
  3. Click the left-most icon, the "Creates a new file" icon on the Menu bar (see it above), and the workspace will become white. The window will be titled "Untitled".
  4. Type in the HTML block tags (the black text above).
  5. Now, save the file on the "desktop". Click File, then select Save As....
  6. If the "Save In" window does not say "Desktop", click the select indicator and select Desktop.
  7. The "File name" window says "Untitled". Type in "webpage.htm" and click the "Save" button.
  8. Close the Notepad+ window. You have typed your first Web page. Now you can do it. I just did it while editing this page.






Align Next Prior Top
Page 8 - The HTML Blocks

   An HTML file has only two internal blocks. 1

   First is the "HEAD" block that provides the browser with "instructions" that are not displayed.

   The Head Block syntax:
      <HEAD>
         ........
         </HEAD>

   The second block is the "BODY" which defines the visual content on the page, and how it is displayed.

   The Body Block syntax:
      <BODY>
         ........
         </BODY>

   If the font for Exercise 2 does not fill the "workspace" in the image (that is, the tenth instruction is just within the graphic) the font needs adjustment.
Align Next Prior Top 		View Background File: http://www.passco.com/images/headsample.gif
Exercise 2
Read all instructions first.
  1. Open Notepad+ (remember, Start, Run ....)
  2. Notepad+ can find the file. Click File.
  3. In the drop down box select "Reopoen".
  4. Wow... there it is on the top of the list, "webpage.htm". Select "webpage" and hit enter.
  5. Now edit in the HEAD and BODY block tags.
  6. Now, since the file has a name, "webpage.htm", you can save it by clicking the "Save" Icon. The "Save" icon looks like a floppy diskette.
  7. Now, exit the Notepad+ window. Where is your file? Yep, Right back on the desktop.
  8. This is important. Let's minimize this tutorial. Look for the "webpage.htm" icon on the desk top. Click the icon. View your web page. It will be just a blank screen (check the name in the Title Bar).
  9. If you know your browser, click View and select the ``view source`` choice, and look at the source of your file.
  10. Then do a browser "BACK", and you will be here in the tutorial again.






Align Next Prior Top
Page 9 - The Title Block

   The Head block is the portion of the HTML file that provides parameters to the browsers. 1

   In the Title Bar of a window is the name for that page. How does that name get placed there. The answer is that the browser looks for text in an HTML block called the TITLE block.

   The block illustrates the two types of elements found in an HTML statement. One type are the "HTML tags", which begin with a "<" character and end with a ">". The second type of element is a "text character string".

   In the following HTML block you will see two HTML tags and one text string.

    <TITLE> Sample HTML File for Netscape Class </TITLE>

   Lets edit in the TITLE block.
Align Next Prior Top 		View Background File: http://www.passco.com/images/bdsample.gif

Exercise 3
Read all instructions first.
  1. Open Notepad+ (this may not be necessary if you have not saved and closed the file).
  2. Notepad+ can find the file. Click File
    (again, if necessary).
  3. In the drop down box select "Reopoen"
    (again, if necessary).
  4. Select "webpage" and click Enter
    (again, if necessary).
  5. Now edit in the TITLE block statement seen above within the Head block.
  6. Let's Save the file by clicking the "Save Icon", the diskette image.
  7. Let's NOT Close the editor.






Align Next/Unit2 Prior Top
Page 10 - The Body Block

   Having given the Browser the title for the page, the next block, the BODY is used to provide the content, text and graphics that will be seen on the monitor. 1

   What we will add is the HTML FONT tag that will define the size of the FONT, and the text string that will be seen on the screen.

    <Body>
       <FONT size=7>
       This is a Sample File
       </Body>

   Although we may not Close the editor after these exercises, it is always reasonable to Save the file frequently.

   Lets remove the Tool Bar. Click Options , then Preferences. Under the "General Index" tab set the Tool Bar Checkbox off (blank).

   Without the presence of a Tool Bar, you will have to find the drop down controls from the Menu Bar.
Align Next/Unit2 Prior Top 		View Background File: http://www.passco.com/images/tbsample.gif

Exercise 4
Read all instructions first.
  1. Open Notepad+; Click File; Select "Reopoen"; Select "webpage" and click Enter
    (again, if necessary).
  2. Edit in the FONT tag.
  3. Edit in the Text string.
  4. Let's Save the file by clicking the "Save Icon".
  5. Let's remove the "Tool" Bar.
  6. Let's Save the file again, (hint: Click File).
  7. Let's re-establish the "Tool" bar.
  8. Let's Close the editor, and take a timeout.












"Web Mastering at Affordable Prices"
 PASSCo.COM
Updated: