How to Create a Simple Webpage Using Notepad

PDF download Download Article
Easily create a web page with the software already installed on your computer
PDF download Download Article

Do you want to learn web design? You don't need fancy editing software to get started creating a web pages. You can create web pages using Notepad, which comes pre-installed on your Windows computer. The language used to create web pages is called "HTML," which stands for Hypertext Markup Language. You can write HTML using Notepad or any other text editing program. Then all you need to do is save the file as an HTML document. HTML is easy to learn , even if you have no programming skills. This wikiHow article teaches you how to create a simple webpage using Notepad.

Things You Should Know

  • HTML is the primary language used in web design.
  • You can easily write HTML using Notepad or any other text editing program.
  • Don't forget to save the file as an HTML (.html) document.
Part 1
Part 1 of 4:

Creating a Document

PDF download Download Article
  1. Click the Windows logo in the bottom-left corner of the screen. The Start menu will pop up. [1]
  2. Type in notepad to do so. You should see a list of matching results appear near the top of the Start menu. [2]
    Advertisement
  3. It's a blue notepad icon at the top of the list of search results. Click this app to open a blank page in Notepad. [3]
  4. This is in the top-left corner of the Notepad window. Clicking it prompts a drop-down menu.
  5. It's in the drop-down menu. The Save As window will open.
  6. 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. It's in the drop-down menu. This will allow you to save your file as an HTML document.
  8. 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. Click the "File name" text box. Then type in whatever you want to name your file, followed by .html , which is the file extension for an HTML document. [4]
    • For example, to name your webpage's file "hello", you would type in hello.html .
  10. Doing so turns your current Notepad document into an HTML document. At this point, you can proceed with setting up your web page'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.
    11. Advertisement
Part 2
Part 2 of 4:

Adding Structural Code

PDF download Download Article
  1. The first tag you'll need to add is the language tag. This tells the web browser that this is an HTML document and that the language being used is HTML. Type the following into Notepad at the top of the page: [5] 
     <!DOCTYPE html> 
 < 
 html 
 >
  2. The "head" section of an HTML document contains the metadata for the web page. This information is not displayed in your web browser. It can contain information such as the page title, style sheets (CSS), scripts, and more. For now, just type <head> below the "<html>" tag, press Enter twice to leave a space. Then type in </head> . [6]
    • Each HTML element has an opening and closing tag. When we add a new element, such as the "<head>" tag to open the head, we need to add a closing tag as well. For the head, this is the "</head>" tag.
  3. The title goes within the "head" section of your HTML document, so you will need to enter this in between the opening "<head>" tag, and closing "</head>" tag. To add a title, type the opening title tag, which is <title>" . Then type your title text. Add the closing title tag immediately after, which is </title> . For example, if you wanted to title your web page, "My Website," you'd enter the following: [7] 
     < 
 title 
 > 
My Website </ 
 title 
 >
  4. Everything displayed in your web browser will go in the "body" section of your HTML document. The opening and closing body tags go below the closing "</head>" tag. Add the opening and closing body tags, as shown below: [8] 
     < 
 body 
 > 
 </ 
 body 
 >
  5. The last tag to go in your document will be a closing HTML tag to signify the end of the page. Type </html> at the bottom of the page below the closing "</body>" tag.
  6. At this point, your document should look something like the following: 
     <!DOCTYPE html> 
 < 
 html 
 > 
 < 
 head 
 > 
 < 
 title 
 > 
My Website </ 
 title 
 > 
 </ 
 head 
 > 
 < 
 body 
 > 
 </ 
 body 
 > 
 </ 
 html 
 >
  7. To do so, click File in the menu bar at the top, followed by Save . Alternatively, you can press Ctrl + S to save your document. Be sure to save often.
    8. Advertisement
Part 3
Part 3 of 4:

Inserting Page Elements

PDF download Download Article
  1. Any element—be it a heading or a paragraph—needs to be written after the "<body>" tag and before the "</body>" tag.
  2. 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 add the following: 
     < 
 h1 
 > 
Welcome </ 
 h1 
 >
    • You can use tags "<h2></h2>" through "<h6></h6>" to create smaller heading text. "<h1>" is the largest heading text, and "<h6>" is the smallest heading text.
  3. Type in the paragraph tags, which are "<p></p>", and then enter whatever you want to use as your paragraph text in between the tags. Your end result should look something like this: 
     < 
 p 
 > 
This is my website. Vote for me for class president! </ 
 p 
 >
  4. 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 create additional line spaces in between your paragraphs..
    • You do not need to add a closing tag for line breaks.
  5. 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 the text is between paragraph tags. The formatting tags you can use are as follows: 
     < 
 b 
 > 
Bold Text </ 
 b 
 > 
 < 
 i 
 > 
Italic Text </ 
 i 
 > 
 < 
 u 
 > 
Underlined Text </ 
 u 
 > 
 < 
 sup 
 > 
Superscript Text </ 
 sup 
 > 
 < 
 sub 
 > 
Subscript Text </ 
 sub 
 >
  6. To add an image to your web page, the image must be uploaded to a web server on the internet. You need to know the web address for the image. Once you have that, type <img src= followed by the web address for the image in quotation marks. Then add the closing > bracket at the end. The following is an example of what this should look like: [9] 
     < 
 img 
 src 
 = 
 "https://www.mywebsite.me/images/me.jpg" 
 >
    • If the image is not online, but is saved to your computer, you can use the location it is saved to instead of the web address. For example, <img src="C:\Users\username\Pictures\me.jpg">
  7. Links are a crucial aspect of web development. They allow users to navigate from one web page to another. To add a link, you need to have the web address for the web page you want to link to. Type <a href= followed by the web address to the page you want to link to in quotations. Then add the closing > bracket at the end. Then immediately after, type the text you want the link to say followed by the closing tag, which is </a> . The following is an example of how to add a link to your web page: [10] 
     < 
 a 
 href 
 = 
 "https://www.mywebsite.me/ipage2" 
 > 
Next Page </ 
 a 
 >
  8. While the web page's elements may vary, your document should look something like the following: 
     <!DOCTYPE html> 
 < 
 html 
 > 
 < 
 head 
 > 
 < 
 title 
 > 
My Website </ 
 title 
 > 
 </ 
 head 
 > 
 < 
 body 
 > 
 < 
 h1 
 > 
Welcome! </ 
 h1 
 > 
 < 
 a 
 href 
 = 
 "https://www.mywebsite.me/ipage2" 
 > 
Next Page </ 
 a 
 > 
 < 
 img 
 src 
 = 
 "https://www.mywebsite.me/images/me.jpg" 
 > 
 < 
 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 
 >
    9. Advertisement
Part 4
Part 4 of 4:

Testing Your Page

PDF download Download Article
  1. To do so, click File in the menu bar at the top, followed by Save . This will ensure that the HTML document shows the most recent version of your web page when you open it.
  2. Navigate to where you saved your HTML document, and right-click it. A drop-down menu will appear.
  3. It's in the drop-down menu. Doing so opens a pop-out menu with a list of apps you can open the file with.
  4. 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. If the formatting looks good to you, you can go ahead and close Notepad.
    6. Advertisement


Sample HTML Documents

Community Q&A

Search
Add New Question
  • Question
    Do I have to use notepad to create web pages?
    Community Answer
    No. There are many other apps that can edit HTML documents. There are even some made for the purpose of creating HTML.
    Thanks! We're glad this was helpful.
    Thank you for your feedback.
    If wikiHow has helped you, please consider a small contribution to support us in helping more readers like you. We’re committed to providing the world with free how-to resources, and even $1 helps us in our mission. Support wikiHow
    Yes No
    Not Helpful 47 Helpful 98
  • Question
    What is the age limit for hosting a website?
    Community Answer
    There isn't an age limit for hosting a website. As long as you know how to create one, it will be fine.
    Thanks! We're glad this was helpful.
    Thank you for your feedback.
    If wikiHow has helped you, please consider a small contribution to support us in helping more readers like you. We’re committed to providing the world with free how-to resources, and even $1 helps us in our mission. Support wikiHow
    Yes No
    Not Helpful 17 Helpful 64
  • Question
    What do you mean when you say "open the .html file..."?
    Community Answer
    Open the HTML file=open the file with the extension .html in Notepad for the code or in a browser for the output.
    Thanks! We're glad this was helpful.
    Thank you for your feedback.
    If wikiHow has helped you, please consider a small contribution to support us in helping more readers like you. We’re committed to providing the world with free how-to resources, and even $1 helps us in our mission. Support wikiHow
    Yes No
    Not Helpful 46 Helpful 85
See more answers
Ask a Question
200 characters left
Include your email address to get a message when this question is answered.
Submit
      Advertisement

      Tips

      Submit a Tip
      All tip submissions are carefully reviewed before being published
      Name
      Please provide your name and last initial
      Submit
      Thanks for submitting a tip for review!

      You Might Also Like

      How to
      Create a Simple CSS Stylesheet Using Notepad
      How to
      Login to a Website as an Admin
      Making Small URLs: 11 Tools to Create Shorter Web Links
      How to
      Redirect a URL: 301 Redirects, Meta Refresh, PHP, & More
      Create and Upload a Website on a Custom Domain
      How to
      Save a Document as an HTML File in a Plain Text Editor
      10 Easy Ways to Shorten a URL & Create Free Custom Links
      How to
      Open Your Port 80 Behind a Firewall
      How to
      Register a Domain Name With Google
      Use Apache Webserver to Host a Website on Your PC: Step-by-Step
      How to
      Embed Pictures
      How to
      Register a Domain Name
      Advertisement

      References

      1. ↑ https://support.microsoft.com/en-us/windows/help-in-notepad-4d68c388-2ff2-0e7f-b706-35fb2ab88a8c
      2. ↑ https://support.microsoft.com/en-us/windows/help-in-notepad-4d68c388-2ff2-0e7f-b706-35fb2ab88a8c
      3. ↑ https://support.microsoft.com/en-us/windows/help-in-notepad-4d68c388-2ff2-0e7f-b706-35fb2ab88a8c
      4. ↑ https://www.contexteditor.org/how-to-create-a-website-using-html-on-notepad/
      5. ↑ https://www.contexteditor.org/how-to-create-a-website-using-html-on-notepad/
      6. ↑ https://www.apu.ac.jp/~gunarto/html.html
      7. ↑ https://www.apu.ac.jp/~gunarto/html.html
      8. ↑ https://www.apu.ac.jp/~gunarto/html.html
      9. ↑ https://www.contexteditor.org/how-to-create-a-website-using-html-on-notepad/
      1. ↑ https://www.contexteditor.org/how-to-create-a-website-using-html-on-notepad/

      About This Article

      In other languages
      Thanks to all authors for creating a page that has been read 1,542,905 times.

      Reader Success Stories

      • Hnin Thidar

        Feb 3, 2017

        "The article is very useful for me. When I studied for my diploma in IT, I created a webpage using Dream Weaver ..." more
      More reader stories Hide reader stories
      Share your story

      Is this article up to date?

      Advertisement