How to Create Simple Websites with Notepad

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

Create your own website

{“smallUrl”:”https://www.wikihow.com/images_en/thumb/3/32/Create-a-Simple-Webpage-Using-Notepad-Step-1-Version-2.jpg/v4-460px- 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.

{“smallUrl”:”https://www.wikihow.com/images_en/thumb/e/ef/Create-a-Simple-Webpage-Using-Notepad-Step-2-Version-2.jpg/v4-460px- 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.

{“smallUrl”:”https://www.wikihow.com/images_en/thumb/8/85/Create-a-Simple-Webpage-Using-Notepad-Step-3-Version-2.jpg/v4-460px- 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.

READ More: How to Ping on Mac OS

{“smallUrl”:”https://www.wikihow.com/images_en/thumb/7/73/Create-a-Simple-Webpage-Using-Notepad-Step-4-Version-2.jpg/v4-460px- 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.

{“smallUrl”:”https://www.wikihow.com/images_en/thumb/7/70/Create-a-Simple-Webpage-Using-Notepad-Step-5-Version-2.jpg/v4-460px- 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>

{“smallUrl”:”https://www.wikihow.com/images_en/thumb/4/49/Create-a-Simple-Webpage-Using-Notepad-Step-6-Version-2.jpg/v4-460px- 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.

{“smallUrl”:”https://www.wikihow.com/images_en/thumb/4/4a/Create-a-Simple-Webpage-Using-Notepad-Step-7-Version-2.jpg/v4-460px- 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).

{“smallUrl”:”https://www.wikihow.com/images_en/thumb/6/69/Create-a-Simple-Webpage-Using-Notepad-Step-8-Version-2.jpg/v4-460px- 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!

{“smallUrl”:”https://www.wikihow.com/images_en/thumb/6/6f/Create-a-Simple-Webpage-Using-Notepad-Step-9-Version-2.jpg/v4-460px- 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.

{“smallUrl”:”https://www.wikihow.com/images_en/thumb/5/56/Create-a-Simple-Webpage-Using-Notepad-Step-10-Version-2.jpg/v4-460px- 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!

READ More: How to Be Independent

{“smallUrl”:”https://www.wikihow.com/images_en/thumb/0/09/Create-a-Simple-Webpage-Using-Notepad-Step-11-Version-2.jpg/v4-460px- 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.

{“smallUrl”:”https://www.wikihow.com/images_en/thumb/2/23/Create-a-Simple-Webpage-Using-Notepad-Step-12-Version-2.jpg/v4-460px- 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.

{“smallUrl”:”https://www.wikihow.com/images_en/thumb/3/36/Create-a-Simple-Webpage-Using-Notepad-Step-13-Version-2.jpg/v4-460px- 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

{“smallUrl”:”https://www.wikihow.com/images_en/thumb/f/fd/Create-a-Simple-Webpage-Using-Notepad-Step-14-Version-2.jpg/v4-460px- 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.

{“smallUrl”:”https://www.wikihow.com/images_en/thumb/1/15/Create-a-Simple-Webpage-Using-Notepad-Step-15-Version-2.jpg/v4-460px- 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.

Steps

Create your own website

Advice

Related Posts