How to Design a Website Using Notepad++

Download Article

This wikiHow teaches you how to create a simple, text-based webpage by using your Windows computer's Notepad app. You'll use HTML as your webpage's language.

1

Open Start . Click the Windows logo in the bottom-left corner of the screen. The Start menu will pop up.
2

Search for Notepad. Type in notepad to do so. You should see a list of matching results appear near the top of the Start menu.

Advertisement
3

Click Notepad . It's a blue notepad icon at the top of the list of results. Doing so prompts Notepad to open.
4

Click File . This is in the top-left corner of the Notepad window. Clicking it prompts a drop-down menu.
5

Click Save As… . It's in the drop-down menu. The Save As window will open.
6

Click the "Save as type" drop-down box. This option is near the bottom of the window, and should have "Text documents (*.txt)" written on it. Clicking it prompts a drop-down menu to appear.
7

Click All Files . It's in the drop-down menu. This will allow you to save your file as an HTML document.
8
Select a save location. Click the name of the folder in which you want to save your document on the left side of the window.
- For example, to save your document on the desktop, you would scroll up and click Desktop in the left-hand sidebar.
9
Enter a name and the "html" file extension. Click the "File name" text box, then type in whatever you want to name your file followed by .html.
- For example, to name your webpage's file "hello", you would type in hello.html.
10
Click Save . Doing so turns your current Notepad document into an HTML document. At this point, you can proceed with setting up your webpage's initial structure.
- If Notepad inadvertently closes or you have to come back to your document later, you can right-click the HTML file and then click Edit in the resulting drop-down menu.
Advertisement

1

Add your webpage's language tag. The first tag you'll need to add to Notepad tells the rest of the document to use HTML. Type the following into Notepad:
2

Add the "head" tags. These tags mark the beginning and end of the page title, which you'll create in the next step. For now, just type <head> after the "<html>" tag, press ↵ Enter twice to leave a space, and type in </head>.

Add page title to your website. The title, which is placed between "<title></title>" tags, goes in the space between the "head" tags. This title dictates the website's name as it appears on the browser tab. To enter a header to name your website "My Website", for example, you'd enter the following:

                                            <                      title                      >My Website</                      title                      >

4

Add the "body" tags. All of your webpage's code will go between these tags, which should go below the "</title>" tag:
5

Close the HTML language tag. The last tag to go in your document will be a closing HTML tag to signify the end of the page. Type </html> below the "</body>" tag to close the HTML tag.

Review your HTML document so far. At this point, your document should look like this:

                                            <!DOCTYPE html>                      <                      html                      >                      <                      head                      >                      <                      title                      >My Website</                      title                      >                      </                      head                      >                      <                      body                      >                      </                      body                      >                      </                      html                      >

7

Save your document. Press Ctrl+S to do so. You can now proceed with adding page elements, such as paragraphs and headings, to your document.

Advertisement

1

Know that all of your webpage elements go between the "body" tags. Any element—be it a heading or a paragraph—needs to be written after the "<body>" tag and before the "</body>" tag.
2
Add your website's main heading. Type <h1></h1> in between the "body" tags, then type whatever you want your webpage's main heading to be in between the "<h1></h1>" tags. For example, to create a page with the heading "Welcome", you would have the following:
- You can use tags "<h2></h2>" through "<h6></h6>" to create smaller heading text.

Add paragraph text to the page. Type in the paragraph tags, which are "<p></p>", and then enter whatever you want to use as your paragraph in between the tags. Your end result should look something like this:

                                            <                      p                      >This is my website. Vote for me for class president!</                      p                      >

Force a paragraph break. If you want to add extra spaces between paragraphs or heading, type <br> after the line's closing tag. For example, to create a line break after a paragraph, you should end up with something like this:

                                            <                      p                      >This is my website. Vote for me for class president!</                      p                      ><                      br                      >                      <                      p                      >I also like potatoes.</                      p                      >

You can add an additional "<br>" tag after the first one to add another line break, thus creating a space between your first paragraph and your second one.

Add formatting to your text. You can apply bolding, italics, and underlining (as well as superscript and subscript) formatting to any word, sentence, or block of text as long as it is between paragraph tags:

                                            <                      b                      >Bold Text</                      b                      >                      <                      i                      >Italic Text</                      i                      >                      <                      u                      >Underlined Text</                      u                      >                      <                      sup                      >Superscript Text</                      sup                      >                      <                      sub                      >Subscript Text</                      sub                      >

Review your webpage's appearance. While the webpage's elements may vary, your document should look something like this:

                                            <!DOCTYPE html>                      <                      html                      >                      <                      head                      >                      <                      title                      >My Website</                      title                      >                      </                      head                      >                      <                      body                      >                      <                      h1                      >Welcome!</                      h1                      >                      <                      p                      >This is my website. I hope you like it here!</                      p                      >                      <                      p                      ><                      b                      >Here is some bold text for emphasis.</                      b                      ></                      p                      >                      <                      p                      ><                      i                      >Italics can be creepy.</                      i                      ></                      p                      >                      </                      body                      >                      </                      html                      >

1

Save your document. Press Ctrl+S to do so. This will ensure that the HTML document shows the most recent version of your webpage when you open it.
2

Right-click your HTML document. A drop-down menu will appear.
3

Select Open with . It's in the drop-down menu. Doing so opens a pop-out menu.
4

Select your preferred web browser. All web browsers can open HTML documents, so click any web browser you want to use in the pop-out menu. Your HTML document will open in your selected web browser.
5
Review your webpage. If the formatting looks good to you, you can go ahead and close Notepad.
- If you want to keep editing your HTML document, return to Notepad and make the necessary edits, making sure to save your changes often.
Advertisement

Sample HTML Documents

Add New Question

Question

Do I have to use notepad to create web pages?

No. There are many other apps that can edit HTML documents. There are even some made for the purpose of creating HTML.
Question

What is the age limit for hosting a website?

There isn't an age limit for hosting a website. As long as you know how to create one, it will be fine.
Question

What do you mean when you say "open the .html file..."?

Open the HTML file=open the file with the extension .html in Notepad for the code or in a browser for the output.
Question

How do I open the Notepad program?

Press the Windows key + "R," type in, "notepad.exe," and notepad should appear.
Question

How can I run a program in notepad?

Save the program as (whatever you want).html. Save it to the desktop, then find the document and double click on it. It should open up in whatever browser you use.
Question

How can I save the file as an HTML?

When you click on "Save As," change the type to "All Types." Now enter the name of the file followed by ".html." For example, "Website.html."
Question

How can I save the file, then open the website after?

Hit "Save as," then after saving, run the html document through the webpage of your choice.
Question

How do I download the HTML code for a website?

Right click on the page, then click ''View Page Source". You can then copy the HTML and paste it to Notepad.
Question

How do I save the files on my computer?

You select File, and then Save As. Choose the location where you want to save the file and hit Save.
Question

Once my data has been saved in the Notepad file, how do I then display my webpage in a browser?

Right click on the File and select Open With. Then choose your browser. (For example, Internet Explorer.) It will open in the selected browser.