• About
  • Contact
  • Cookie
  • Disclaimer
  • Privacy Policy
  • Change the purpose of use

Tnhelearning.edu.vn - Various useful general information portal

  • Photo
  • Bio
  • How To
  • Tech

How to Create Simple Websites with Notepad

February 17, 2024 by admin Category: How To

You are viewing the article How to Create Simple Websites with Notepad  at Tnhelearning.edu.vn you can quickly access the necessary information in the table of contents of the article below.

X

wikiHow is a “wiki” site, which means that many of the articles here are written by multiple authors. To create this article, 71 people, some of whom are anonymous, have edited and improved the article over time.

This article has been viewed 30,703 times.

We use websites every day, but is it difficult to create a website? This article will teach you how to create a simple HTML website using Notepad.

Table of Contents

  • Steps
    • Create your own website
  • Advice

Steps

Create your own website

Image titled Create a Simple Webpage Using Notepad Step 1

Image titled Create a Simple Webpage Using Notepad Step 1

{“smallUrl”:”https://www.wikihow.com/images_en/thumb/3/32/Create-a-Simple-Webpage-Using-Notepad-Step-1-Version-2.jpg/v4-728px- Create-a-Simple-Webpage-Using-Notepad-Step-1-Version-2.jpg”,”bigUrl”:”https://www.wikihow.com/images/thumb/3/32/Create-a- Simple-Webpage-Using-Notepad-Step-1-Version-2.jpg/v4-728px-Create-a-Simple-Webpage-Using-Notepad-Step-1-Version-2.jpg”,”smallWidth”:460 ,”smallHeight”:345,”bigWidth”:728,”bigHeight”:546,”licensing”:”<div class=”mw-parser-output”></div>”}
Open Notepad. Notepad comes pre-installed on every Windows computer and you can find it in the Start menu. After opening Notepad, click “File”, select “Save As” in the drop-down menu. Then, select “All Files” in the file type menu and save the file as HTML. Normally, the file “index.html” is the main page, containing all the links to access everything on the website.
Image titled Create a Simple Webpage Using Notepad Step 2

Image titled Create a Simple Webpage Using Notepad Step 2

{“smallUrl”:”https://www.wikihow.com/images_en/thumb/e/ef/Create-a-Simple-Webpage-Using-Notepad-Step-2-Version-2.jpg/v4-728px- Create-a-Simple-Webpage-Using-Notepad-Step-2-Version-2.jpg”,”bigUrl”:”https://www.wikihow.com/images/thumb/e/ef/Create-a- Simple-Webpage-Using-Notepad-Step-2-Version-2.jpg/v4-728px-Create-a-Simple-Webpage-Using-Notepad-Step-2-Version-2.jpg”,”smallWidth”:460 ,”smallHeight”:345,”bigWidth”:728,”bigHeight”:546,”licensing”:”<div class=”mw-parser-output”></div>”}
HTML (Hypertext Markup Language) uses tags. Essentially, tags are words enclosed in <curly brackets> .
You will use a lot of tags to create a web page. Next to it is a “closing tag”, used to end a line of code. For example: </text> .These tags end a bold font or a paragraph of text.
Image titled Create a Simple Webpage Using Notepad Step 3

Image titled Create a Simple Webpage Using Notepad Step 3

{“smallUrl”:”https://www.wikihow.com/images_en/thumb/8/85/Create-a-Simple-Webpage-Using-Notepad-Step-3-Version-2.jpg/v4-728px- Create-a-Simple-Webpage-Using-Notepad-Step-3-Version-2.jpg”,”bigUrl”:”https://www.wikihow.com/images/thumb/8/85/Create-a- Simple-Webpage-Using-Notepad-Step-3-Version-2.jpg/v4-728px-Create-a-Simple-Webpage-Using-Notepad-Step-3-Version-2.jpg”,”smallWidth”:460 ,”smallHeight”:345,”bigWidth”:728,”bigHeight”:546,”licensing”:”<div class=”mw-parser-output”></div>”}
The opening of the web page is usually the tag: <html> . You can put it at the top of the Notepad file.
Image titled Create a Simple Webpage Using Notepad Step 4

READ More:   How to Be Yourself

Image titled Create a Simple Webpage Using Notepad Step 4

{“smallUrl”:”https://www.wikihow.com/images_en/thumb/7/73/Create-a-Simple-Webpage-Using-Notepad-Step-4-Version-2.jpg/v4-728px- Create-a-Simple-Webpage-Using-Notepad-Step-4-Version-2.jpg”,”bigUrl”:”https://www.wikihow.com/images/thumb/7/73/Create-a- Simple-Webpage-Using-Notepad-Step-4-Version-2.jpg/v4-728px-Create-a-Simple-Webpage-Using-Notepad-Step-4-Version-2.jpg”,”smallWidth”:460 ,”smallHeight”:345,”bigWidth”:728,”bigHeight”:546,”licensing”:”<div class=”mw-parser-output”></div>”}
Next is the <head> tag.
Next is <title> , which tells the browser what to put at the top of the window, and a meta tag (optional) that tells search engines (such as Google) what the web page is about.
Image titled Create a Simple Webpage Using Notepad Step 5

Image titled Create a Simple Webpage Using Notepad Step 5

{“smallUrl”:”https://www.wikihow.com/images_en/thumb/7/70/Create-a-Simple-Webpage-Using-Notepad-Step-5-Version-2.jpg/v4-728px- Create-a-Simple-Webpage-Using-Notepad-Step-5-Version-2.jpg”,”bigUrl”:”https://www.wikihow.com/images/thumb/7/70/Create-a- Simple-Webpage-Using-Notepad-Step-5-Version-2.jpg/v4-728px-Create-a-Simple-Webpage-Using-Notepad-Step-5-Version-2.jpg”,”smallWidth”:460 ,”smallHeight”:345,”bigWidth”:728,”bigHeight”:546,”licensing”:”<div class=”mw-parser-output”></div>”}
On the next line, after the head tag, put a title, for example: <title>wikiHow HTML</title>
Image titled Create a Simple Webpage Using Notepad Step 6

Image titled Create a Simple Webpage Using Notepad Step 6

{“smallUrl”:”https://www.wikihow.com/images_en/thumb/4/49/Create-a-Simple-Webpage-Using-Notepad-Step-6-Version-2.jpg/v4-728px- Create-a-Simple-Webpage-Using-Notepad-Step-6-Version-2.jpg”,”bigUrl”:”https://www.wikihow.com/images/thumb/4/49/Create-a- Simple-Webpage-Using-Notepad-Step-6-Version-2.jpg/v4-728px-Create-a-Simple-Webpage-Using-Notepad-Step-6-Version-2.jpg”,”smallWidth”:460 ,”smallHeight”:345,”bigWidth”:728,”bigHeight”:546,”licensing”:”<div class=”mw-parser-output”></div>”}
Now, type </head> to end the header.
Image titled Create a Simple Webpage Using Notepad Step 7

Image titled Create a Simple Webpage Using Notepad Step 7

{“smallUrl”:”https://www.wikihow.com/images_en/thumb/4/4a/Create-a-Simple-Webpage-Using-Notepad-Step-7-Version-2.jpg/v4-728px- Create-a-Simple-Webpage-Using-Notepad-Step-7-Version-2.jpg”,”bigUrl”:”https://www.wikihow.com/images/thumb/4/4a/Create-a- Simple-Webpage-Using-Notepad-Step-7-Version-2.jpg/v4-728px-Create-a-Simple-Webpage-Using-Notepad-Step-7-Version-2.jpg”,”smallWidth”:460 ,”smallHeight”:345,”bigWidth”:728,”bigHeight”:546,”licensing”:”<div class=”mw-parser-output”></div>”}
Next on the web page is the <body> tag. Note that browsers do not support all colors (for example, most browsers do not support dark gray).
Image titled Create a Simple Webpage Using Notepad Step 8

Image titled Create a Simple Webpage Using Notepad Step 8

{“smallUrl”:”https://www.wikihow.com/images_en/thumb/6/69/Create-a-Simple-Webpage-Using-Notepad-Step-8-Version-2.jpg/v4-728px- Create-a-Simple-Webpage-Using-Notepad-Step-8-Version-2.jpg”,”bigUrl”:”https://www.wikihow.com/images/thumb/6/69/Create-a- Simple-Webpage-Using-Notepad-Step-8-Version-2.jpg/v4-728px-Create-a-Simple-Webpage-Using-Notepad-Step-8-Version-2.jpg”,”smallWidth”:460 ,”smallHeight”:345,”bigWidth”:728,”bigHeight”:546,”licensing”:”<div class=”mw-parser-output”></div>”}
Between the two body tags is the web page content that the user sees. Let’s start with the title. This is the large text size specified in HTML from <h1> to <h6> , with <h1> being the largest size. So at the top of the web page, after the body tag, you can write <h1>Welcome to my page!</h1> You must always put the closing tag, or else the whole text on the web page will be zoomed out. grand!
Image titled Create a Simple Webpage Using Notepad Step 9

Image titled Create a Simple Webpage Using Notepad Step 9

{“smallUrl”:”https://www.wikihow.com/images_en/thumb/6/6f/Create-a-Simple-Webpage-Using-Notepad-Step-9-Version-2.jpg/v4-728px- Create-a-Simple-Webpage-Using-Notepad-Step-9-Version-2.jpg”,”bigUrl”:”https://www.wikihow.com/images/thumb/6/6f/Create-a- Simple-Webpage-Using-Notepad-Step-9-Version-2.jpg/v4-728px-Create-a-Simple-Webpage-Using-Notepad-Step-9-Version-2.jpg”,”smallWidth”:460 ,”smallHeight”:345,”bigWidth”:728,”bigHeight”:546,”licensing”:”<div class=”mw-parser-output”></div>”}
Another tag that can be included in the body of a web page is the <p> or paragraph tag. After the header, you can type <p> . I’m learning how to make a website! wikiHow Rules! If you want to create a new line on the page, use the <br> line break tag.
Image titled Create a Simple Webpage Using Notepad Step 10

Image titled Create a Simple Webpage Using Notepad Step 10

{“smallUrl”:”https://www.wikihow.com/images_en/thumb/5/56/Create-a-Simple-Webpage-Using-Notepad-Step-10-Version-2.jpg/v4-728px- Create-a-Simple-Webpage-Using-Notepad-Step-10-Version-2.jpg”,”bigUrl”:”https://www.wikihow.com/images/thumb/5/56/Create-a- Simple-Webpage-Using-Notepad-Step-10-Version-2.jpg/v4-728px-Create-a-Simple-Webpage-Using-Notepad-Step-10-Version-2.jpg”,”smallWidth”:460 ,”smallHeight”:345,”bigWidth”:728,”bigHeight”:546,”licensing”:”<div class=”mw-parser-output”></div>”}
A plain text-only website is boring. So let’s put in some formatting. <b> to bold, <i> to italic, and <u> to underline. Don’t forget the closing tag!
Image titled Create a Simple Webpage Using Notepad Step 11

READ More:   How to Calculate Consumer Surplus

Image titled Create a Simple Webpage Using Notepad Step 11

{“smallUrl”:”https://www.wikihow.com/images_en/thumb/0/09/Create-a-Simple-Webpage-Using-Notepad-Step-11-Version-2.jpg/v4-728px- Create-a-Simple-Webpage-Using-Notepad-Step-11-Version-2.jpg”,”bigUrl”:”https://www.wikihow.com/images/thumb/0/09/Create-a- Simple-Webpage-Using-Notepad-Step-11-Version-2.jpg/v4-728px-Create-a-Simple-Webpage-Using-Notepad-Step-11-Version-2.jpg”,”smallWidth”:460 ,”smallHeight”:345,”bigWidth”:728,”bigHeight”:546,”licensing”:”<div class=”mw-parser-output”></div>”}
What makes the site really interesting are the images. Even with formatted text, no one wants to see a page full of text. Use the <img> tag to insert an image. But like the body tag, this tag needs additional information. An img tag would look like this: <img alt=dog src=”dog.jpg” width=200 height=200> . The src data (source: source) is the name of the image. Behind the width and height are the width and height in pixels of the image.
Image titled Create a Simple Webpage Using Notepad Step 12

Image titled Create a Simple Webpage Using Notepad Step 12

{“smallUrl”:”https://www.wikihow.com/images_en/thumb/2/23/Create-a-Simple-Webpage-Using-Notepad-Step-12-Version-2.jpg/v4-728px- Create-a-Simple-Webpage-Using-Notepad-Step-12-Version-2.jpg”,”bigUrl”:”https://www.wikihow.com/images/thumb/2/23/Create-a- Simple-Webpage-Using-Notepad-Step-12-Version-2.jpg/v4-728px-Create-a-Simple-Webpage-Using-Notepad-Step-12-Version-2.jpg”,”smallWidth”:460 ,”smallHeight”:345,”bigWidth”:728,”bigHeight”:546,”licensing”:”<div class=”mw-parser-output”></div>”}
Almost done! If you want visitors to be able to view multiple pages, use the tag: <a href=”otherpage.html”>Otherpage</a> to create a link. The content inside the tag is what the user will click on. to go to the next page, and the href part is the link to that page. With this tag, you can easily take users around your website.
Image titled Create a Simple Webpage Using Notepad Step 13

Image titled Create a Simple Webpage Using Notepad Step 13

{“smallUrl”:”https://www.wikihow.com/images_en/thumb/3/36/Create-a-Simple-Webpage-Using-Notepad-Step-13-Version-2.jpg/v4-728px- Create-a-Simple-Webpage-Using-Notepad-Step-13-Version-2.jpg”,”bigUrl”:”https://www.wikihow.com/images/thumb/3/36/Create-a- Simple-Webpage-Using-Notepad-Step-13-Version-2.jpg/v4-728px-Create-a-Simple-Webpage-Using-Notepad-Step-13-Version-2.jpg”,”smallWidth”:460 ,”smallHeight”:345,”bigWidth”:728,”bigHeight”:546,”licensing”:”<div class=”mw-parser-output”></div>”}
To finish, you need to end the body tag with </body> and the entire web page with a </html> . tag
Image titled Create a Simple Webpage Using Notepad Step 14

Image titled Create a Simple Webpage Using Notepad Step 14

{“smallUrl”:”https://www.wikihow.com/images_en/thumb/f/fd/Create-a-Simple-Webpage-Using-Notepad-Step-14-Version-2.jpg/v4-728px- Create-a-Simple-Webpage-Using-Notepad-Step-14-Version-2.jpg”,”bigUrl”:”https://www.wikihow.com/images/thumb/f/fd/Create-a- Simple-Webpage-Using-Notepad-Step-14-Version-2.jpg/v4-728px-Create-a-Simple-Webpage-Using-Notepad-Step-14-Version-2.jpg”,”smallWidth”:460 ,”smallHeight”:345,”bigWidth”:728,”bigHeight”:546,”licensing”:”<div class=”mw-parser-output”></div>”}
Save the file with ‘.html’ extension. Then, open the .html file in your favorite browser to see how it works. Congratulations! You have successfully created a website.
  • Image titled Create a Simple Webpage Using Notepad Step 15

    Image titled Create a Simple Webpage Using Notepad Step 15

    {“smallUrl”:”https://www.wikihow.com/images_en/thumb/1/15/Create-a-Simple-Webpage-Using-Notepad-Step-15-Version-2.jpg/v4-728px- Create-a-Simple-Webpage-Using-Notepad-Step-15-Version-2.jpg”,”bigUrl”:”https://www.wikihow.com/images/thumb/1/15/Create-a- Simple-Webpage-Using-Notepad-Step-15-Version-2.jpg/v4-728px-Create-a-Simple-Webpage-Using-Notepad-Step-15-Version-2.jpg”,”smallWidth”:460 ,”smallHeight”:345,”bigWidth”:728,”bigHeight”:546,”licensing”:”<div class=”mw-parser-output”></div>”}
    If you want to publish your website online, learn how to create a website with a domain name.
  • Advice

    • You can find a lot of cards online. There are many useful websites that help people learn how to create websites (W3Schops is one of them).
    • Remember to use closures.
    • Always make sure to put the <!DOCTYPE html> tag in the first line, before the <HTML> tag, so the browser knows that your site is HTML5.
    • You can change the font with the <font face=”N”></font> tag before <html> and after </html>. N stands for a font, such as “Verdana”.
    • If you want to use special characters on a web page, type < (<), > (>), & (&), etc., the end of the code MUST have a semicolon “;”.
    • In HTML tutorials, folder and web file names are always set in lowercase, written immediately, without accents. Although Windows allows the use of spacing, many web server providers do not, so you’ll save time and hassle by naming the right files and folders right from the start.
    READ More:   How to calm a female cat into heat
    X

    wikiHow is a “wiki” site, which means that many of the articles here are written by multiple authors. To create this article, 71 people, some of whom are anonymous, have edited and improved the article over time.

    This article has been viewed 30,703 times.

    We use websites every day, but is it difficult to create a website? This article will teach you how to create a simple HTML website using Notepad.

    Thank you for reading this post How to Create Simple Websites with Notepad at Tnhelearning.edu.vn You can comment, see more related articles below and hope to help you with interesting information.

    Related Search:

    Related Posts

    How to Create Curved Text in Photoshop
    How to fall asleep faster
    How to Install FBReader to Read eBooks

    Category: How To

    Previous Post: « How to Uninstall McAfee Security Center
    Next Post: How to make whey protein at home »

    Copyright © 2025 · Tnhelearning.edu.vn - Useful Knowledge