Create a New Web Page Using Notepad

01
of 09
Place Your Files in a New Folder

Place Your Files in a New Folder
Place Your Files in a New Folder. Jennifer Kyrnin

The first thing you should do when creating a new Web site is to create a separate folder to store it in. I like to store my Web pages in ​a folder called HTML in my "My Documents" folder, but you can store them where you like.

  1. Open your My Documents window
  2. Click File > New > Folder
  3. Name the folder my_website

Important

Always name your Web folders and files using all lowercase and without any spaces or punctuation. While Windows allows you to use spaces, many Web hosting providers do not, and you'll save yourself some time and trouble if you name your files and folders well from the beginning.

02
of 09
Open a New Web Page

Open a New Web Page
Open a New Web Page. Jennifer Kyrnin

Since a Web page is just a text file, you can use a text editor such as Notepad to write your HTML. Make sure you're in a blank page by choosing File > New...

03
of 09
Save Your Page as HTML

Save Your Page as HTML
Save Your Page as HTML. Jennifer Kyrnin

The first thing you should do when working in Notepad is to save your page as HTML. This will save you time and trouble later.

  1. Click on "File" and then "Save As"
  2. Navigate to the folder you want to save in
  3. Change the "Save As Type" drop-down menu to "All Files (*.*)"
  4. Name your file pets.htm

As with the directory name, always use all lowercase letters and no spaces or special characters in your filename.

04
of 09
Start Your Web Page

Start Your Web Page
Start Your Web Page. Jennifer Kyrnin

DOCTYPE

The first thing you should type in your HTML document is the DOCTYPE. This tells the browsers what type of HTML to expect. For this Web site, we're going to write it in transitional XHTML, so use the following DOCTYPE:

Just type that in exactly as the code sample reads. If you want to learn more about DOCTYPE, there are several articles about DOCTYPE on this site for more information.

HTML

Once you have the DOCTYPE, you can start your HTML with the element. Type both the beginning tag and the end tag and leave some space for your Web page contents, as in the picture.



05
of 09
Create a Head for Your Web Page

Create a Head for Your Web Page
Create a Head for Your Web Page. Jennifer Kyrnin

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 following tags inside the

tags in your Web page:

 

 

As with the

tags, leave some space between them so that you have room to add the head elements.

06
of 09
Add a Page Title

Add a Page Title
Add a Page Title. Jennifer Kyrnin

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 your title text between

tags. For this page, I titled it "McKinley, Shasta, and Other Pets":

 

McKinley, Shasta, and Other Pets

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 longer ones in the browser window.

07
of 09
The Main Body of Your Web Page

The Main Body of Your Web Page
The Main Body of Your Web Page. Jennifer Kyrnin

The body of your Web page is stored within the

element. It should come after the but before the As usual, leave extra space between the starting and ending body tags:

 

 

 

 

08
of 09
Dividing Your Web Page into Sections

Dividing Your Web Page into Sections
Dividing Your Web Page into Sections. Jennifer Kyrnin

The page we are building has two distinct sections or divisions. Before we can easily define what they should look like, it helps to create the divisions and add some content to them. Since we're using Style Sheets to define how the page will look, including the layout, the divisions won't look exactly like my final page until later.

First, add the two div elements. Give them both a unique id using the id attribute. I like to identify my divisions based on the location or function. So a column on the right might have the id "right". Or a navigation header division might have the id "header". Add two div elements to your document and label them "nav" for the navigation column and "main" for the main column.


 

 


 

09
of 09
Creating an Images Folder

Creating an Images Folder
Creating an Images Folder. Jennifer Kyrnin

Once you have your Web page nearly ready to add content, you'll need to get your directories set up so that you have a folder to put your images in. If you think you'll have a lot of stylesheets or javascripts, you might want to create separate folders for them as well.

  1. Open your My Documents window
  2. Change to the my_website folder
  3. Click File > New > Folder
  4. Name the folder images

You should store all your images for this Web site in the images folder so that you can find them later and it's easy to upload them all whenever you need to.