Wal Mart Online → Best Selection

Last Modified:



Beginning Website Development

Website Development Overview

Start Notepad Instructions

Entering Text in Notepad

Saving a Notepad Document

Selecting A Web Browser

Viewing the Document

The HTML Tag

The Body Tag

Web Page Content

The Header Tag

The Closing Tags

HTML Tag Order

Second Web Page

Reasons for HTML

Tag Definition

Element Definition

Attribute Definition

Element Description

The Paragraph Element

The Element Webpage

The Align Attribute

Title & Font Attributes

Links and Anchor Tag

Images, Maps & Area

Python/IDLE Tutorial

MS Office
PowerPoint 2007 Tutorial

Web Development
Website Design Rules

Beginning Website Development

Welcome to this introduction to HTML and web design. This tutorial is intended to give some experience in writing HTML code, saving the files and viewing the result in a web browser.

Note: It is imperative that all code and files names be entered exactly as displayed and described in this manual. If you have a problem with the code working properly, you may cut and paste the examples into your text editor (Notepad) and it should work just fine. The tutorials have been tested prior to release, so they should work for you as well.

Website Development Overview

In this tutorial we will enter code into notepad (or you may use any other plain-text editor) and then view it with a web browser. The code is called HTML (Hyper Text Markup Language) and notepad is commonly used on a Windows PC. Although HTML may seem confusing at first, following this step-by-step tutorial will show you how to make a web page.

Start Notepad from the Start Menu

Start Notepad by selecting Start Button → All Programs → Accessories → Notepad or as indicated in the diagrams below:

Start All Programs

Figure HTML-1: Start → All Programs

  1. Place the Mouse Pointer over the Windows Start Button: Windows Start Button and left-click.
  2. On the Start Menu Options Panel left-click on the All Programs Selection Bar: All Programs Selection Bar.

This will bring up the Windows All Program Selection Menu as indicated in the diagram below:

All Programs Selection Bar

Figure HTML-2: → Accessories

3. Left-click on the Accessories folder: Accessories Folder Icon to bring up the Accessories Program Selection Menu as indicated in the diagram below:

Select Notepad

Figure HTML-3: Select Notepad

4. Left-click on the Notepad icon: Notepad Icon to bring up the Notepad program as indicated in the diagram below:

Notepad on Power Up

Figure HTML-4: Notepad on Power-Up

Entering Text into Notepad

After selecting Notepad cut and paste or enter the text into Notepad as you see in the diagram below:

<h2>My First Webpage!!</h2>

Figure HTML-5: HTML Code for First Webpage

After Powering Up Notepad, Manually Enter the text above into the Notepad Text Entry Area so that your Notepad program looks like the diagram below. Note, you may cut and paste the text above into Notepad. However, it will help you better learn the statements and syntax if you manually enter the statements.

The diagram below shows how Notepad should look after you have entered the code:

Notepad with text

Figure HTML-6: Notepad with First Webpage Text Entered

Saving A Notepad Document

After you have entered the HTML statements exactly as shows above select:

File → Save → FirstWebpage.html

As indicated in the diagram below:

Notepad File Save

Figure HTML-7: Diagram for Notepad File → Save

In order to continue with this guide, and continue the discussion of Saving our Webpage and the corresponding Notepad File Commands:

Press the Button below:

Help Support this site

Thank you

Become a consultant
Many jobs available