TechTrain "Just-In-Time" - SEARCH for mini-lessons for busy people!"Step-By-Step" tutorials and lesson modules.TechTrain Home
About TechTrain
Step- By-Step
Just- In-Time Search
Products
Services
Guestbook
Technology Certificates
Graduate Courses
Interactive Internet Email
Communication
FTP (File Transfer Protocol), Telnet, and Gopher
World Wide Web Search
Build Web Pages Create a Simple Page
Create a Second Page
Link to a Web Page
Graphics and Colors on your Web Page
Create a Simple Page Title
Heading
Paragraph
List
How to Save
Title Lesson
Heading Lesson
Paragraph Lesson
List Lesson
Save Lesson
Title Example
Heading Example
Paragraph Example
List Example
Save Example
The "title" appears in the "title bar" (the blue bar at the top of the window). The title is part of the "headER".

A Web page is built using Hypertext Markup Language instructions (HTML). These instructions are written using any word processor on a MAC or PC.

HTML instructions or "tags" are identifiable because they are enclosed in "greater than" and "less than" symbols.

The first tag is always the HTML tag <HTML>.

The "header" tag follows the HTML tag and the "title" tag is part of the "header". <HEAD> and <TITLE>

The "title" appears in the "title bar" (the blue bar at the top of the window). The title is part of the "headER".

Each HTML instruction consists of a beginning tag and an ending tag. The ending tag is identical to the beginning tag except that it is preceded by a forward slash (/). </TITLE>, for example.

 
Title Example
  1. Open Notepad
    Notepad is a very simple word processing program. We recommend that you use Notepad rather than WORD, because WORD has alternative methods for creating Web pages that may cause conflicts with the HTML tags that you type.
    To open Notepad, click on Start | Programs | Accessories | Notepad

  2. Type the following HTML instructions in the Notepad program.
    <HTML>
    <HEAD>
    <TITLE>My First Web Page</TITLE>
    </HEAD>
    </HTML>
  3. Save your Notepad file.
    • Click File | Save As
    • Select the location for your file (Drive, Folder, etc.)
    • Type your filename: mywebpage.html
      (Make sure you type the file extension of .html at the end of your file name.)
    • Click Save.
  4. Open your Web page in a browser.
    • Open Netscape or Microsoft Internet Explorer (whichever browser you use)
    • Click File | Open
    • Using the Browse or Choose File button, select your file (Drive, Folder, Filename.)
    • Click OK or Open
  5. Then, click on the "Title Example" link to see if your Web page looks like the example.
  Notice that the title bar reads: My First Web Page and the body of the Web page is blank.
  Top of Page

Headings set off information in Web pages. Headings can be displayed using different fonts, type styles, and sizes. All Web browsers allow six different heading styles.

"Headings" help set off information on a Web page. Headings are part of the "body" of a Web page and are, therefore, preceded by the "body" tag .

Headings can be displayed in a variety of font styles, sizes, and colors.

Every browser can handle the six basic Heading styles.
These are referred to as H1, H2, H3, H4, H5, and H6 in HTML tags.

Type the following HTML instructions in the word processing program.
Click on the "Heading Example" to see what your Web page should look like so far.
Heading Example
  1. Open Notepad
    To open Notepad, click on Start | Programs | Accessories | Notepad

  2. Type the following HTML instructions in the Notepad program.
    <HTML>
    <HEAD>
    <TITLE>My First Web Page</TITLE>
    </HEAD>
    <BODY>
    <H1>This is Heading Style 1</H1>
    <H2>This is Heading Style 2</H2>
    <H3>This is Heading Style 3</H3>
    <H4>This is Heading Style 4</H4>
    <H5>This is Heading Style 5</H5>
    <H6>This is Heading Style 6</H6>
    </BODY>
    </HTML>
  3. Save your Notepad file.
  4. Open your Web page in a browser.
  5. Then, click on the "Heading Example" link to see if your Web page looks like the example.
  Top of Page

The basic text information is displayed in paragraphs.

Most text information on a Web page is in paragraph format. Paragraphs are preceded and followed by a blank line.

<P> and </P> are HTML tags for paragraph data.

Type the HTML instructions shown below in the word processing program.
Click on the "Paragraph Example" to see what your Web page should look like so far.
Paragraph Example
  1. Open Notepad
    To open Notepad, click on Start | Programs | Accessories | Notepad

  2. Type the following HTML instructions in the Notepad program.
    <HTML>
    <HEAD>
    <TITLE>My First Web Page</TITLE>
    </HEAD>
    <BODY>
    <H1>Building a Web Page</H1>
    <P>Building Web pages is fun and easy once a few HTML tags are learned. Everything between the paragraph tags is included in the text.</P>
    <H3>Titles</H3>
    <p> Titles appear in the Window title bar</P>
    <H3>Headings</H3>
    <P>Headings help identify major categories of information.</P>
    </BODY>
    </HTML>
  3. Save your Notepad file.
  4. Open your Web page in a browser.
  5. Then, click on the "Paragraph Example" link to see if your Web page looks like the example.
  Top of Page

Lists are useful for setting off information on your Web page and making the information more readable.

"Lists" enable the viewer to spot important points on your Web page more easily.

Two basic types of lists are:
Ordered (Numbered) and
Unordered (Bulleted).

In HTML, the beginning and ends of the list are identified with list tags.
<OL> for ordered lists and <UL> for unordered lists.

Each item in the list is identified with list item tags.
<LI>.
Note: The tag is L (as in List) and I (as in Item). The tag does NOT contain numbers, so don't confuse the i with the numeral one.

Type the HTML instructions shown below in the word processing program.
Click on the "List Example" to see what your Web page should look like so far.
List Example
  1. Open Notepad
    To open Notepad, click on Start | Programs | Accessories | Notepad

  2. Type the following HTML instructions in the Notepad program.
    <HTML>
    <HEAD>
    <TITLE>My First Web Page</TITLE>
    </HEAD>
    <BODY>
    <H1>Building a Web Page</H1>
    <H3>3 Steps to Create Your Page</H3>
    <OL>
    <LI>Determine Content</LI>
    <LI>Design Page</LI>
    <LI>Write HTML</LI>
    </OL>
    <H3>What You Have Learned</H3>
    <UL>
    <LI>Titles</LI>
    <LI>Headings</LI>
    <LI>Paragraphs</LI>
    <LI>Lists</LI>
    <OL>

    <LI>Ordered Lists</LI>
    <LI>Unordered Lists</LI>
    </OL>
    </UL>
    </BODY>
    </HTML>
  3. Save your Notepad file.
  4. Open your Web page in a browser.
  5. Then, click on the "List Example" link to see if your Web page looks like the example.
  Top of Page

Hypertext Markup Language Instructions (HTML) need to be saved as a "text only" or ASCII file in order for Web browsers, such as Netscape or Internet Explorer, to read and understand the HTML commands.

Whichever word processor you have used to create your Web page will have a "Save As" command. (Usually this is a sub-menu under "File".)

To Save your Notepad file.

  1. Click File | Save As
  2. Select the location for your file (Drive, Folder, etc.)
  3. Type your filename: mywebpage.html
    (Make sure you type the file extension of .htm or .html at the end of your file name.)
  4. Make sure to save the file as "text only", "text document" or ASCII.
    In Windows, this is done by clicking on the "Save as Type" drop-down list, and selecting "text only" or "text document
  5. Click Save.
Save Example Click on the "Save Example" to see the Save As dialog box.
  Top of Page
 
TechTrain Home
© Technology Training Team
Please contact us at TechTrainTeam