Create a New Web Page Using Notepad

You don't need expensive software to write a web page

Windows Notepad is a basic word processing program that you can use to write your web pages. Web pages are just text, and you can use any word processing program to write HTML.

01
of 06

Save the Page as HTML

Saving a file as HTML

When you create a page, save the file before you get too far along. Use all lowercase letters and no spaces or special characters in the filename.

  1. In Notepad, click File and then Save As.
  2. Go to the folder where you save your website files.
  3. Change the Save As Type drop-down menu to All Files (*.*).
  4. Name the file, using an extension of either .htm or .html.

 

02
of 06

Start Writing the Web Page

Drafting HTML code in Notepad.exe

Start your Notepad HTML5 document with the DOCTYPE. This string tells the browsers what type of HTML to expect. 

The doctype declaration isn't a tag. It tells the computer that an HTML5 document is arriving. It goes at the top of every HTML5 page and it takes this form:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

After you specify the doctype, begin your HTML. Type both the beginning tag and the end tag and leave some space for your web page body contents. Your Notepad document should look like this:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
</html>
03
of 06

Create a Head for Your Web Page

Creating a header in HTML

The head of an HTML document is where basic information about your web page is stored—things like the page title and possibly meta tags for search engine optimization. To create a head section, add the head tags in your Notepad HTML text document between the html tags.

​<head>
</head>

As with the html tags, leave some space between them so you have room to add the head information.

04
of 06

Add a Page Title in the Head Section

Adding a page title in HTML

The title of your web page is the text that displays in the browser's window. It is also what is written in bookmarks and favorites when someone saves your site. Store the title text between the title tags. It won't appear on the web page itself, only at the top of the browser.

This example page is titled "McKinley, Shasta, and Other Pets."

<title>McKinley, Shasta, and Other Pets</title>

It doesn't matter how long your title is or if it spans multiple lines in your HTML, but shorter titles are easier to read, and some browsers cut off long ones in the browser window.

05
of 06

The Main Body of Your Web Page

Creating the body of an HTML document

The body of your web page is stored within the body tags. It should come after the head tags but before the ending html tag. This area is where you put the text, headlines, subheads, images and graphics, links and all other content. It can be as long as you like.

Leave extra space between the starting and ending body tags.

This same format can be followed to write your web page in Notepad.

<body>
</body>
06
of 06

Creating an Images Folder

Creating a new folder called Images in Windows

Before you add content to the body of your HTML document, set up your directories so that you have a folder for images.

  1. Open the My Documents window.
  2. Open the folder where you store your web files.
  3. Click File > New > Folder.
  4. Name the folder images.

Store all the images for your website in the images folder so that you can find them later. This makes it easy to upload them when you need to.

Using Notepad for HTML

In the early days of the web, tools like Notepad were the standard tool for writing new webpages. However, given the complexity of most modern pages, plus the interplay of HTML with CSS, almost no one uses Notepad anymore—either they use graphical tools like Adobe Dreamweaver, or they rely on coding platforms like Visual Studio Code. A text environment that offers linting and code correction is preferable to a blank and undifferentiated canvas, so although Notepad works in a pinch, it's far less optimal for HTML editing than coding editors or graphical web-design applications.